/* ==========================================================================
   Nouvelimag Photographie - Page /offres
   v1.59.3 - Retour a align-items: stretch sur desktop (alignement des cartes).
              `start` reserve au breakpoint mobile uniquement.
   ========================================================================== */

/* --- Conteneurs de groupe --- */
.catalog-group {
    max-width: 1180px;
    margin: 0 auto 56px;
    padding: 0 20px;
    box-sizing: border-box;
}
.catalog-group:last-of-type { margin-bottom: 0; }

.catalog-group-header { margin-bottom: 24px; }

.catalog-group-title {
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    color: var(--primary-color);
    margin: 0 0 6px;
    font-weight: 800;
    text-wrap: balance;
}
.catalog-group-subtitle {
    margin: 0;
    color: var(--accent-color);
    font-size: 0.95rem;
    font-weight: 600;
}
.catalog-group-desc {
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.55;
    text-wrap: pretty;
}

/* ==========================================================================
   CARTES SERVICE / PROMO
   ========================================================================== */

/* Desktop : STRETCH (défaut) = toutes les cartes d'une ligne à la même hauteur.
   Le contenu interne (body flex:1) pousse les boutons en bas.
   Ne pas mettre align-items:start ici — cela produirait un decalage visuel
   entre les cartes ayant des contenus de tailles differentes. */
.services-catalog {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    width: 100%;
}
.services-catalog--mariage {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.service-catalog-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    min-width: 0;
    /* height: 100% + min-height:0 = hauteur egale dans la ligne (stretch) */
    height: 100%;
}
.service-catalog-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.service-catalog-image {
    aspect-ratio: 4 / 3;
    background: var(--bg-soft-gray);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    flex-shrink: 0;
}
.service-catalog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.service-catalog-card:hover .service-catalog-image img { transform: scale(1.04); }

.service-catalog-image--empty {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}
.service-catalog-image-initial {
    color: #FFFFFF;
    font-size: 5rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
}

/* Promo : image en 4:5 (visuel portrait), contain (jamais rognee) */
.service-catalog-card--promo .service-catalog-image {
    aspect-ratio: 4 / 5;
    background: var(--bg-soft-gray);
    cursor: zoom-in;
}
.service-catalog-card--promo .service-catalog-image img {
    object-fit: contain;
}

/* Body : flex column + flex:1 => pousse le bouton en bas de la carte.
   C'est ce qui garantit l'alignement des boutons sur la meme ligne. */
.service-catalog-body {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}
.service-catalog-title {
    font-size: 1.15rem;
    color: var(--primary-color);
    margin: 0 0 10px;
    text-wrap: balance;
    line-height: 1.25;
}
.service-catalog-desc {
    font-size: 0.95rem;
    color: var(--text-muted);
    /* flex:1 : occupe tout l'espace dispo, pousse les blocs suivants vers le bas */
    flex: 1 1 auto;
    margin: 0 0 14px;
    line-height: 1.5;
    text-wrap: pretty;
}
.service-catalog-desc--preserve { white-space: pre-line; }

.service-catalog-features {
    list-style: none;
    padding: 0;
    margin: 10px 0 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    color: var(--text-dark);
    flex-shrink: 0;
}
.service-catalog-features li {
    padding-left: 20px;
    position: relative;
    line-height: 1.5;
}
.service-catalog-features li svg {
    position: absolute;
    left: 0;
    top: 4px;
    color: var(--accent-color);
}

.service-catalog-meta {
    list-style: none;
    padding: 0;
    margin: 10px 0 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.service-catalog-meta li svg {
    vertical-align: -2px;
    margin-right: 6px;
}

.service-catalog-price {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--accent-color);
    margin: 0 0 14px;
    flex-shrink: 0;
}
.service-catalog-price--quote {
    font-size: 1.1rem;
    color: var(--primary-color);
}

/* Bouton toujours colle en bas (mt:auto) + aligne a gauche */
.service-catalog-btn {
    align-self: flex-start;
    margin-top: auto;
}

/* En-tête des cartes mariage */
.service-catalog-mariage-head {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: #FFFFFF;
    padding: 12px 22px;
    text-align: center;
    flex-shrink: 0;
}
.service-catalog-mariage-label {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.85;
}
.service-catalog-mariage-title {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.1;
}
.service-catalog-mariage-price {
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 4px;
    color: var(--accent-soft);
}

/* Note mariage */
.catalog-mariage-note {
    margin-top: 24px;
    padding: 18px 22px;
    background: linear-gradient(135deg, var(--bg-light-blue), #E5EEF7);
    border: 2px dashed var(--secondary-color);
    border-radius: var(--radius);
    text-align: center;
}
.catalog-mariage-note p {
    margin: 0 0 12px;
    font-size: 0.95rem;
    color: var(--text-dark);
    line-height: 1.6;
    text-wrap: pretty;
}

/* Encadré Option (MakeUp, etc.) dans les promos */
.promo-option-note {
    margin: 0 0 14px;
    padding: 10px 14px;
    background: #FFF6F1;
    border: 1px dashed var(--accent-color);
    border-radius: 8px;
    font-size: 0.88rem;
    color: var(--text-dark);
    line-height: 1.55;
    white-space: pre-line;
    flex-shrink: 0;
}
.promo-option-note::before {
    content: "Option";
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-color);
    margin-bottom: 4px;
}

/* ==========================================================================
   BLOC "OPTIONS DISPONIBLES"
   ========================================================================== */
.options-highlight {
    background: var(--bg-light-blue);
    border-radius: var(--radius);
    padding: 24px 28px;
    margin-top: 40px;
}
.options-highlight-title {
    margin: 0 0 10px;
    color: var(--primary-color);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.options-highlight-intro {
    margin: 0 0 12px;
    color: var(--text-dark);
    font-size: 0.95rem;
    line-height: 1.55;
}
.options-highlight-list {
    margin: 0;
    padding-left: 20px;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.7;
}

/* ==========================================================================
   PORTFOLIO (carrousel droite vers gauche)
   ========================================================================== */
.portfolio-teaser {
    position: relative;
    padding: 88px 0 72px;
    background:
        radial-gradient(circle at 20% 10%, rgba(240, 105, 47, 0.06) 0%, transparent 45%),
        radial-gradient(circle at 85% 90%, rgba(35, 119, 186, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, #F2F4F8 0%, #FFFFFF 100%);
    overflow: hidden;
}
.portfolio-teaser::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 88px; height: 3px;
    border-radius: 2px;
    background: var(--accent-color);
}
.portfolio-teaser-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    position: relative;
}
.portfolio-teaser-header { max-width: 720px; text-align: center; }
.portfolio-teaser-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    color: var(--accent-color);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    box-shadow: var(--shadow-sm);
}
.portfolio-teaser-title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    color: var(--primary-color);
    margin: 0 0 16px;
    line-height: 1.15;
    text-wrap: balance;
}
.portfolio-teaser-description {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
    text-wrap: pretty;
}
.portfolio-teaser-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.portfolio-marquee {
    overflow: hidden;
    padding: 8px 0 4px;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
}
.portfolio-marquee-track {
    display: flex;
    gap: 16px;
    width: max-content;
    animation: portfolio-scroll 90s linear infinite;
    will-change: transform;
}
.portfolio-marquee:hover .portfolio-marquee-track { animation-play-state: paused; }
.portfolio-marquee-item {
    flex: 0 0 auto;
    width: 220px;
    aspect-ratio: 3 / 4;
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    background: var(--bg-soft-gray);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.portfolio-marquee-item img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.6s ease;
}
.portfolio-marquee-item:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(13, 77, 122, 0.18); }
.portfolio-marquee-item:hover img { transform: scale(1.05); }

@keyframes portfolio-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - 8px)); }
}

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lightbox {
    position: fixed; inset: 0; z-index: 4000;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.22s ease;
}
.lightbox.is-visible { opacity: 1; }
.lightbox[hidden] { display: none; }
.lightbox-backdrop {
    position: absolute; inset: 0;
    background: rgba(13, 20, 30, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
}
.lightbox-content {
    position: relative;
    max-width: 94vw; max-height: 94vh;
    display: flex; flex-direction: column; align-items: center;
    gap: 10px;
    z-index: 1;
}
.lightbox-image {
    max-width: 94vw; max-height: 86vh;
    width: auto; height: auto; object-fit: contain;
    display: block; border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
    background: #000;
}
.lightbox-close {
    position: absolute; top: -48px; right: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #FFFFFF; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.lightbox-close:hover { background: var(--accent-color); border-color: var(--accent-color); }
.lightbox-close svg { width: 20px; height: 20px; fill: currentColor; }
.lightbox-caption { color: #FFFFFF; text-align: center; font-size: 13px; opacity: 0.9; max-width: 80vw; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* --- Tablette --- */
@media (max-width: 1024px) {
    .services-catalog,
    .services-catalog--mariage {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 20px;
    }
    .catalog-group { padding: 0 16px; margin-bottom: 44px; }
    .options-highlight { padding: 20px 22px; }
}

@media (max-width: 900px) {
    .portfolio-teaser { padding: 72px 0 56px; }
    .portfolio-marquee-item { width: 180px; }
    .portfolio-marquee-track { animation-duration: 70s; }
}

/* --- Mobile : empilement, hauteur naturelle --- */
@media (max-width: 720px) {
    .catalog-group { padding: 0 16px; margin-bottom: 40px; }
    .catalog-group-header { margin-bottom: 18px; }
    .catalog-group-title { font-size: 1.35rem; }
    .catalog-group-subtitle,
    .catalog-group-desc { font-size: 0.9rem; }

    .services-catalog,
    .services-catalog--mariage {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
        gap: 18px;
        align-items: start;      /* mobile uniquement : plus de stretch */
    }

    .service-catalog-card {
        height: auto;
        max-height: none;
        align-self: start;
        width: 100%;
    }

    .service-catalog-card--promo .service-catalog-image {
        aspect-ratio: 4 / 5;
        max-height: 70vh;
    }

    .service-catalog-body {
        padding: 18px 20px 20px;
        flex: 0 0 auto;
    }
    .service-catalog-title { font-size: 1.05rem; }
    .service-catalog-desc { font-size: 0.9rem; flex: 0 0 auto; }
    .service-catalog-price { font-size: 1.25rem; }
    .service-catalog-btn { width: 100%; justify-content: center; margin-top: 0; }

    .service-catalog-mariage-head { padding: 10px 18px; }
    .service-catalog-mariage-title { font-size: 1.2rem; }

    .catalog-mariage-note { padding: 16px 18px; }
    .catalog-mariage-note .btn { width: 100%; justify-content: center; }

    .options-highlight { padding: 18px 20px; margin-top: 28px; }
    .options-highlight-title { font-size: 1rem; }
    .options-highlight-list { padding-left: 18px; font-size: 0.88rem; }

    .portfolio-teaser { padding: 56px 0 44px; }
    .portfolio-teaser-inner { gap: 22px; padding: 0 16px; }
    .portfolio-teaser-actions,
    .portfolio-teaser-actions .btn { width: 100%; }

    .lightbox-close { top: 8px; right: 8px; }
}

@media (max-width: 640px) {
    .portfolio-marquee-item { width: 145px; }
    .portfolio-marquee-track { animation-duration: 55s; gap: 10px; }
}

/* --- Tres petits mobiles --- */
@media (max-width: 380px) {
    .catalog-group { padding: 0 14px; }
    .service-catalog-body { padding: 16px 16px 18px; }
    .service-catalog-mariage-head { padding: 10px 14px; }
    .portfolio-marquee-item { width: 130px; }
}

/* --- Mouvement reduit --- */
@media (prefers-reduced-motion: reduce) {
    .portfolio-marquee-track { animation: none; }
    .portfolio-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    .portfolio-marquee-item, .portfolio-marquee-item img { transition: none; }
    .portfolio-marquee-item:hover { transform: none; }
    .portfolio-marquee-item:hover img { transform: none; }
    .service-catalog-card:hover { transform: none; }
    .service-catalog-card:hover .service-catalog-image img { transform: none; }
}