/**
 * Page Services - styles
 * Cartes compactes + panneau accordéon avec aperçu galerie 8 photos
 */

/* ==========================================================================
   HERO
   ========================================================================== */
.svc-hero {
    position: relative;
    padding: clamp(120px, 18vh, 200px) 36px clamp(60px, 10vh, 120px);
    text-align: center;
    background: radial-gradient(ellipse at center top, rgba(212, 165, 116, 0.06) 0%, transparent 60%), var(--bg);
    border-bottom: 1px solid var(--line);
}

.svc-hero-inner {
    max-width: 900px;
    margin: 0 auto;
}

.svc-hero-kicker {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 32px;
    position: relative;
    padding: 0 32px;
}

.svc-hero-kicker::before,
.svc-hero-kicker::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 20px;
    height: 1px;
    background: var(--accent);
}

.svc-hero-kicker::before { left: 0; }
.svc-hero-kicker::after  { right: 0; }

.svc-hero-title {
    font-family: var(--font-display);
    font-size: clamp(80px, 14vw, 180px);
    letter-spacing: clamp(4px, 0.8vw, 12px);
    line-height: 0.9;
    margin: 0 0 32px;
    color: var(--fg);
    text-transform: uppercase;
}

.svc-hero-deck {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--fg-2);
    max-width: 640px;
    margin: 0 auto;
}

.svc-hero-deck em {
    color: var(--accent);
    font-style: italic;
}


/* ==========================================================================
   NAV CATÉGORIELLE STICKY
   ========================================================================== */
.svc-cat-nav {
    position: sticky;
    /* Le header EON est lui-même sticky en haut. On cale la nav catégorielle
       juste en dessous, sinon elle se sticky à top: 0 et passe sous le header
       (qui a z-index: 50). Hauteur header : ~82px desktop, ~74px mobile. */
    top: 82px;
    z-index: 49;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    padding: 18px 24px;
}

@media (max-width: 760px) {
    .svc-cat-nav {
        top: 74px;
    }
}

/* Fallback pour les navigateurs qui ne supportent pas color-mix */
@supports not (background: color-mix(in srgb, red, blue)) {
    .svc-cat-nav {
        background: rgba(7, 7, 7, 0.92);
    }
    [data-theme="light"] .svc-cat-nav {
        background: rgba(242, 235, 222, 0.92);
    }
}

.svc-cat-nav-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    gap: clamp(16px, 3vw, 40px);
    justify-content: center;
    flex-wrap: wrap;
}

/* Sur mobile, la nav devient scrollable horizontalement plutôt que
   de wrapper sur plusieurs lignes (où seulement la dernière ligne
   reste visible). Les 6 catégories tiennent sur une ligne, on swipe. */
@media (max-width: 760px) {
    .svc-cat-nav {
        padding: 14px 0;
    }
    .svc-cat-nav-inner {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        /* overflow-y explicite à hidden : sans ça, certains Safari
           appliquent overflow-y: auto par défaut quand x est sur auto,
           ce qui permet un drag vertical involontaire. */
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        /* overscroll-behavior empêche le scroll de la page de "fuir" dans
           la nav quand on swipe le bord (sinon la nav se déplace de haut
           en bas en suivant le scroll de la page). */
        overscroll-behavior: contain;
        /* touch-action limite le geste tactile à l'horizontal uniquement,
           bloque les drags verticaux et diagonaux. */
        touch-action: pan-x;
        scrollbar-width: none; /* Firefox */
        padding: 0 20px;
        gap: 24px;
    }
    .svc-cat-nav-inner::-webkit-scrollbar {
        display: none; /* Chrome / Safari */
    }
    .svc-cat-nav-link {
        flex-shrink: 0;
    }
}

.svc-cat-nav-link {
    font-family: var(--font-body);
    font-size: 10.5px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--fg-2);
    text-decoration: none;
    cursor: pointer;
    padding: 4px 0;
    position: relative;
    transition: color 0.25s ease;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}

.svc-cat-nav-link:hover,
.svc-cat-nav-link.active {
    color: var(--accent);
}

.svc-cat-nav-link.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 1px;
    background: var(--accent);
}

.svc-cat-nav-roman {
    opacity: 0.6;
}


/* ==========================================================================
   SECTION CATÉGORIE
   ========================================================================== */
.svc-cat-sec {
    padding: 80px 36px;
    border-bottom: 1px solid var(--line);
    max-width: 1280px;
    margin: 0 auto;
}

.svc-cat-sec:last-of-type {
    border-bottom: none;
}

/* En-tête de catégorie */
.svc-cat-head {
    margin-bottom: 48px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
}

.svc-cat-head-left {
    display: flex;
    flex-direction: column;
}

.svc-cat-kicker {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--fg-3, var(--fg-2));
    margin-bottom: 12px;
}

.svc-cat-title {
    font-family: var(--font-display);
    font-size: clamp(48px, 8vw, 88px);
    letter-spacing: clamp(2px, 0.5vw, 6px);
    line-height: 0.95;
    margin: 0;
    color: var(--fg);
    text-transform: uppercase;
    display: flex;
    align-items: baseline;
    gap: 0.4em;
}

.svc-cat-roman {
    color: var(--accent);
    font-size: 0.5em;
    letter-spacing: 0.2em;
}

.svc-cat-head-right {
    text-align: right;
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--fg-2);
    line-height: 1.7;
}

.svc-cat-meta-line:first-child {
    color: var(--accent);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
}


/* ==========================================================================
   GRILLE DE CARTES + PANNEAU
   ========================================================================== */
.svc-cards-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, 1fr);
}

/* Toutes les grilles ont la même largeur (celle de la section).
   - is-1 : 1 carte qui s'étend sur toute la largeur (homogène avec is-3)
   - is-2 : 2 cartes côte à côte
   - is-3 : 3 cartes côte à côte */
.svc-cards-grid.is-1 { grid-template-columns: 1fr; }
.svc-cards-grid.is-2 { grid-template-columns: repeat(2, 1fr); }
.svc-cards-grid.is-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 880px) {
    .svc-cards-grid.is-2,
    .svc-cards-grid.is-3 {
        grid-template-columns: 1fr;
    }
}

/* Pour la carte unique (is-1), on adapte le layout interne
   pour qu'elle ne soit pas un mur de texte sur une carte de 1208px */
.svc-cards-grid.is-1 .svc-card {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    column-gap: 48px;
    row-gap: 12px;
    min-height: 0;
    padding: 36px 40px;
    align-items: start;
}

.svc-cards-grid.is-1 .svc-card-ribbon { right: 32px; }

.svc-cards-grid.is-1 .svc-card-name,
.svc-cards-grid.is-1 .svc-card-blurb {
    grid-column: 1;
}

.svc-cards-grid.is-1 .svc-card-blurb {
    margin-bottom: 0;
}

.svc-cards-grid.is-1 .svc-card-price-pre,
.svc-cards-grid.is-1 .svc-card-price {
    grid-column: 2;
    margin: 0;
    text-align: right;
}

.svc-cards-grid.is-1 .svc-card-price-row {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    justify-content: flex-end;
}

.svc-cards-grid.is-1 .svc-card-price-pre {
    grid-row: 1;
    align-self: start;
}

.svc-cards-grid.is-1 .svc-card-price {
    grid-row: 2;
}

.svc-cards-grid.is-1 .svc-card-stats {
    grid-column: 1;
    grid-row: 3;
    margin: 0;
    padding: 14px 0 0;
}

.svc-cards-grid.is-1 .svc-card-cta {
    grid-column: 1 / -1;
    margin-top: 12px;
}

@media (max-width: 880px) {
    .svc-cards-grid.is-1 .svc-card {
        grid-template-columns: 1fr;
        padding: 28px 24px;
    }
    /* On repasse en flux naturel : tous les éléments en colonne 1, et on
       efface les grid-row du desktop pour respecter l'ordre du HTML
       (nom -> blurb -> prix -> stats -> cta). Sinon le prix, placé en
       grid-row 1/2 sur desktop, passe AVANT le titre sur mobile. */
    .svc-cards-grid.is-1 .svc-card-name,
    .svc-cards-grid.is-1 .svc-card-blurb,
    .svc-cards-grid.is-1 .svc-card-price-pre,
    .svc-cards-grid.is-1 .svc-card-price,
    .svc-cards-grid.is-1 .svc-card-price-row,
    .svc-cards-grid.is-1 .svc-card-stats,
    .svc-cards-grid.is-1 .svc-card-cta {
        grid-column: 1;
        grid-row: auto;
    }
    .svc-cards-grid.is-1 .svc-card-price-pre,
    .svc-cards-grid.is-1 .svc-card-price,
    .svc-cards-grid.is-1 .svc-card-price-row {
        text-align: left;
        justify-content: flex-start;
    }
    /* Un peu d'air au-dessus du prix une fois empilé sous le texte */
    .svc-cards-grid.is-1 .svc-card-price-pre {
        margin-top: 18px;
    }
}


/* ==========================================================================
   CARTE COMPACTE
   ========================================================================== */
.svc-card {
    background: var(--bg-2);
    border: 1px solid var(--line);
    padding: 32px 28px;
    cursor: pointer;
    position: relative;
    transition: border-color 0.25s ease, transform 0.25s ease;
    display: flex;
    flex-direction: column;
    min-height: 280px;
}

.svc-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.svc-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.svc-card.featured {
    border-color: var(--accent);
    background: linear-gradient(180deg, rgba(212, 165, 116, 0.04), transparent 60%), var(--bg-2);
}

.svc-card.open {
    border-color: var(--accent);
    background: linear-gradient(180deg, rgba(212, 165, 116, 0.08), transparent 60%), var(--bg-2);
}

.svc-card-ribbon {
    position: absolute;
    top: -1px;
    right: 24px;
    background: var(--accent);
    color: var(--bg);
    font-family: var(--font-body);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    padding: 6px 14px;
}

.svc-card-name {
    font-family: var(--font-display);
    font-size: 30px;
    letter-spacing: 2px;
    margin: 0 0 4px;
    color: var(--fg);
    line-height: 1;
    text-transform: uppercase;
}

.svc-card-blurb {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.55;
    color: var(--fg-2);
    margin: 0 0 24px;
    flex-grow: 1;
}

.svc-card-price-pre {
    font-family: var(--font-body);
    font-size: 9.5px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--fg-3, var(--fg-2));
    margin: 0 0 4px;
}

.svc-card-price {
    font-family: var(--font-display);
    font-size: 44px;
    letter-spacing: 1px;
    margin: 0 0 18px;
    color: var(--fg);
    line-height: 1;
}

.svc-card-price-devis {
    font-size: 24px;
    letter-spacing: 2px;
    color: var(--accent);
    text-transform: uppercase;
}

/* ===== Offre promotionnelle ===== */
.svc-card-promo-badge {
    position: absolute;
    top: -1px;
    right: 24px;
    background: #c0392b;
    color: #fff;
    font-family: var(--font-body);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    padding: 6px 14px;
    z-index: 2;
}

/* Si une carte a À LA FOIS le badge promo ET le ruban "Populaire",
   on garde la promo en haut à droite et on descend le ruban juste
   en dessous pour éviter qu'ils se chevauchent. */
.svc-card.has-promo .svc-card-ribbon {
    top: 30px;
}

.svc-card-price-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 18px;
    flex-wrap: wrap;
}

.svc-card-price-old {
    font-family: var(--font-display);
    font-size: 26px;
    letter-spacing: 1px;
    color: var(--fg-3, var(--fg-2));
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: #c0392b;
    line-height: 1;
}

.svc-card-price-row .svc-card-price {
    margin: 0;
}

.svc-card-price-promo {
    color: #c0392b;
}

[data-theme="light"] .svc-card-price-promo {
    color: #b03020;
}

/* Carte en promo : léger liseré rouge discret */
.svc-card.has-promo {
    border-color: rgba(192, 57, 43, 0.4);
}

.svc-card.has-promo:hover {
    border-color: #c0392b;
}

.svc-card-stats {
    display: flex;
    gap: 18px;
    margin: 0 0 22px;
    padding: 14px 0 0;
    border-top: 1px solid var(--line);
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--fg-2);
}

.svc-card-stats strong {
    color: var(--fg);
    font-weight: 600;
}

.svc-card-cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0 0;
    border-top: 1px solid var(--line);
    margin-top: auto;
    font-family: var(--font-body);
    font-size: 10.5px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent);
}

.svc-card-arrow {
    transition: transform 0.35s ease;
    display: inline-block;
}

.svc-card.open .svc-card-arrow {
    transform: rotate(180deg);
}


/* ==========================================================================
   PANNEAU ACCORDÉON
   ========================================================================== */
.svc-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 14px;
    grid-column: 1 / -1;
}

/* Quand .open est ajouté sans inline style (fallback CSS), on bascule large.
   En pratique le JS applique un max-height inline calculé sur la hauteur réelle. */
.svc-panel.open {
    max-height: 6000px;
}

.svc-panel-inner {
    background: var(--bg-2);
    border: 1px solid var(--accent);
    padding: 48px 40px;
    display: grid;
    grid-template-columns: 1.1fr 1.6fr;
    gap: 48px;
    position: relative;
}

@media (max-width: 880px) {
    .svc-panel-inner {
        grid-template-columns: 1fr;
        padding: 32px 24px;
        gap: 32px;
    }
}

.svc-panel-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--fg-2);
    border: 1px solid var(--line);
    background: var(--bg);
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
    transition: all 0.25s ease;
    z-index: 2;
}

.svc-panel-close:hover {
    color: var(--accent);
    border-color: var(--accent);
}


/* GAUCHE — Description + Inclus + CTA */
.svc-panel-left {
    min-width: 0;
}

.svc-panel-sub {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 16px;
}

.svc-panel-name {
    font-family: var(--font-display);
    font-size: 36px;
    letter-spacing: 2px;
    margin: 0 0 20px;
    color: var(--fg);
    line-height: 1;
    text-transform: uppercase;
}

.svc-panel-text {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.7;
    color: var(--fg-2);
    margin: 0 0 24px;
}

.svc-panel-includes {
    margin: 0;
    padding: 0;
    list-style: none;
}

.svc-panel-includes li {
    font-family: var(--font-body);
    font-size: 12.5px;
    color: var(--fg);
    padding: 12px 0 12px 22px;
    border-bottom: 1px solid var(--line);
    position: relative;
    letter-spacing: 0.5px;
    line-height: 1.6;
}

.svc-panel-includes li:last-child { border-bottom: none; }

.svc-panel-includes li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20px;
    width: 10px;
    height: 1px;
    background: var(--accent);
}

.svc-panel-includes li strong {
    color: var(--fg);
    font-weight: 600;
}

.svc-panel-bonus {
    margin-top: 20px;
    padding: 16px 18px;
    border-left: 2px solid var(--accent);
    background: rgba(212, 165, 116, 0.05);
}

.svc-panel-bonus-label {
    font-family: var(--font-body);
    font-size: 9.5px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
}

.svc-panel-bonus-text {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.6;
    color: var(--fg);
}

.svc-panel-cta-group {
    margin-top: 32px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.svc-panel-btn {
    font-family: var(--font-body);
    font-size: 10.5px;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 14px 22px;
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.25s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.svc-panel-btn-primary {
    background: var(--accent);
    color: var(--bg);
}

.svc-panel-btn-primary:hover {
    background: var(--fg);
    color: var(--bg);
}

.svc-panel-btn-ghost {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--fg);
}

.svc-panel-btn-ghost:hover {
    border-color: var(--accent);
    color: var(--accent);
}


/* DROITE — Aperçu galerie 8 photos */
.svc-panel-right {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.svc-preview-label {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--fg-3, var(--fg-2));
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.svc-preview-count {
    color: var(--accent);
}

.svc-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

@media (max-width: 600px) {
    .svc-preview-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.svc-preview-tile {
    aspect-ratio: 4 / 5;
    background: var(--bg);
    border: 1px solid var(--line);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.35s ease, border-color 0.25s ease;
}

.svc-preview-tile:hover {
    transform: scale(0.96);
    border-color: var(--accent);
}

.svc-preview-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.svc-preview-placeholder {
    position: absolute;
    inset: 0;
}

.svc-preview-placeholder::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* État "visuels en développement" (galerie sans photo mais avec message) */
.svc-preview-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 18px;
    min-height: 260px;
    padding: 48px 32px;
    border: 1px dashed var(--line-2);
    background:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 12px,
            var(--accent-soft, rgba(212,165,116,.05)) 12px,
            var(--accent-soft, rgba(212,165,116,.05)) 24px
        );
}

.svc-preview-empty-icon {
    width: 54px;
    height: 54px;
    color: var(--accent);
    opacity: .85;
}

.svc-preview-empty-icon svg {
    width: 100%;
    height: 100%;
}

.svc-preview-empty-text {
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--fg-2);
    max-width: 320px;
    line-height: 1.6;
}

/* Variations d'ambiance pour les placeholders quand pas de photo */
.svc-preview-mood-1 { background: linear-gradient(135deg, #420808 0%, #1a0202 100%); }
.svc-preview-mood-1::after { background: radial-gradient(ellipse at 55% 40%, rgba(220, 30, 30, 0.5) 0%, transparent 65%); }
.svc-preview-mood-2 { background: linear-gradient(135deg, #3a2810 0%, #080604 100%); }
.svc-preview-mood-2::after { background: radial-gradient(ellipse at 60% 35%, rgba(232, 200, 80, 0.5) 0%, transparent 65%); }
.svc-preview-mood-3 { background: linear-gradient(135deg, #251a10 0%, #0a0604 100%); }
.svc-preview-mood-3::after { background: radial-gradient(ellipse at 50% 50%, rgba(220, 180, 140, 0.4) 0%, transparent 65%); }
.svc-preview-mood-4 { background: linear-gradient(135deg, #1a2540 0%, #080a14 100%); }
.svc-preview-mood-4::after { background: radial-gradient(ellipse at 45% 60%, rgba(140, 170, 220, 0.3) 0%, transparent 65%); }
.svc-preview-mood-5 { background: linear-gradient(135deg, #2a1822 0%, #0a0508 100%); }
.svc-preview-mood-5::after { background: radial-gradient(ellipse at 60% 50%, rgba(220, 170, 180, 0.4) 0%, transparent 65%); }
.svc-preview-mood-6 { background: linear-gradient(135deg, #1c1810 0%, #08060a 100%); }
.svc-preview-mood-6::after { background: radial-gradient(ellipse at 55% 45%, rgba(212, 180, 130, 0.35) 0%, transparent 65%); }
.svc-preview-mood-7 { background: linear-gradient(135deg, #28201a 0%, #0a0805 100%); }
.svc-preview-mood-7::after { background: radial-gradient(ellipse at 50% 50%, rgba(232, 200, 160, 0.4) 0%, transparent 65%); }
.svc-preview-mood-8 { background: linear-gradient(135deg, #251c14 0%, #0a0604 100%); }
.svc-preview-mood-8::after { background: radial-gradient(ellipse at 55% 50%, rgba(220, 170, 130, 0.35) 0%, transparent 65%); }

/* Adaptation pour le mode clair : moods plus doux/sépia */
[data-theme="light"] .svc-preview-mood-1 { background: linear-gradient(135deg, #d4b8a8 0%, #b89888 100%); }
[data-theme="light"] .svc-preview-mood-1::after { background: radial-gradient(ellipse at 55% 40%, rgba(168, 112, 47, 0.25) 0%, transparent 65%); }
[data-theme="light"] .svc-preview-mood-2 { background: linear-gradient(135deg, #e6dcc8 0%, #c8b89c 100%); }
[data-theme="light"] .svc-preview-mood-2::after { background: radial-gradient(ellipse at 60% 35%, rgba(180, 130, 70, 0.2) 0%, transparent 65%); }
[data-theme="light"] .svc-preview-mood-3 { background: linear-gradient(135deg, #e2d4c0 0%, #c4b098 100%); }
[data-theme="light"] .svc-preview-mood-3::after { background: radial-gradient(ellipse at 50% 50%, rgba(168, 112, 47, 0.2) 0%, transparent 65%); }
[data-theme="light"] .svc-preview-mood-4 { background: linear-gradient(135deg, #c8c8d8 0%, #a8a8c0 100%); }
[data-theme="light"] .svc-preview-mood-4::after { background: radial-gradient(ellipse at 45% 60%, rgba(120, 130, 160, 0.2) 0%, transparent 65%); }
[data-theme="light"] .svc-preview-mood-5 { background: linear-gradient(135deg, #d8c8d0 0%, #b8a8b0 100%); }
[data-theme="light"] .svc-preview-mood-5::after { background: radial-gradient(ellipse at 60% 50%, rgba(160, 110, 120, 0.2) 0%, transparent 65%); }
[data-theme="light"] .svc-preview-mood-6 { background: linear-gradient(135deg, #d8d0c0 0%, #b8b098 100%); }
[data-theme="light"] .svc-preview-mood-6::after { background: radial-gradient(ellipse at 55% 45%, rgba(168, 130, 70, 0.2) 0%, transparent 65%); }
[data-theme="light"] .svc-preview-mood-7 { background: linear-gradient(135deg, #e0d4c0 0%, #c0b098 100%); }
[data-theme="light"] .svc-preview-mood-7::after { background: radial-gradient(ellipse at 50% 50%, rgba(180, 140, 90, 0.2) 0%, transparent 65%); }
[data-theme="light"] .svc-preview-mood-8 { background: linear-gradient(135deg, #d8c4ac 0%, #b8a48c 100%); }
[data-theme="light"] .svc-preview-mood-8::after { background: radial-gradient(ellipse at 55% 50%, rgba(168, 112, 47, 0.2) 0%, transparent 65%); }

/* ==========================================================================
   CARROUSEL 16:9 (mode alternatif à la grille)
   ========================================================================== */
.svc-carousel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.svc-carousel-viewport {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--bg);
    border: 1px solid var(--line);
    overflow: hidden;
}

.svc-carousel-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.svc-carousel-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.svc-carousel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.svc-carousel-placeholder {
    width: 100%;
    height: 100%;
    position: relative;
}

.svc-carousel-placeholder::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* Flèches navigation prev/next */
.svc-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: rgba(7, 7, 7, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fafafa;
    font-size: 28px;
    line-height: 1;
    font-family: var(--font-body);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    z-index: 2;
    padding: 0;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.svc-carousel-arrow:hover {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
}

.svc-carousel-prev { left: 12px; }
.svc-carousel-next { right: 12px; }

.svc-carousel-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

[data-theme="light"] .svc-carousel-arrow {
    background: rgba(242, 235, 222, 0.75);
    border-color: rgba(10, 10, 10, 0.15);
    color: var(--fg);
}

/* Compteur 1/6 en bas à droite */
.svc-carousel-counter {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(7, 7, 7, 0.65);
    color: #fafafa;
    font-family: var(--font-body);
    font-size: 10.5px;
    letter-spacing: 2px;
    padding: 6px 12px;
    z-index: 2;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

[data-theme="light"] .svc-carousel-counter {
    background: rgba(242, 235, 222, 0.85);
    color: var(--fg);
}

.svc-carousel-current {
    color: var(--accent);
    font-weight: 500;
}

.svc-carousel-separator {
    margin: 0 4px;
    opacity: 0.6;
}

/* Dots de pagination */
.svc-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 4px 0;
}

.svc-carousel-dot {
    width: 24px;
    height: 2px;
    background: var(--line-2, var(--line));
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.25s ease, width 0.25s ease;
}

.svc-carousel-dot:hover {
    background: var(--fg-2);
}

.svc-carousel-dot.active {
    background: var(--accent);
    width: 40px;
}

/* Responsive */
@media (max-width: 600px) {
    .svc-carousel-arrow {
        width: 36px;
        height: 36px;
        font-size: 22px;
    }
    .svc-carousel-prev { left: 8px; }
    .svc-carousel-next { right: 8px; }
}



.svc-preview-foot {
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    gap: 12px;
    flex-wrap: wrap;
}

.svc-preview-foot-meta {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--fg-3, var(--fg-2));
}

.svc-preview-foot-link {
    font-family: var(--font-body);
    font-size: 10.5px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent);
    padding-bottom: 3px;
    border-bottom: 1px solid var(--accent);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: opacity 0.25s ease;
}

.svc-preview-foot-link:hover {
    opacity: 0.75;
}


/* ==========================================================================
   CTA FINAL
   ========================================================================== */
.svc-final-cta {
    padding: 120px 36px;
    text-align: center;
    position: relative;
    background: radial-gradient(ellipse at center, rgba(212, 165, 116, 0.06) 0%, transparent 60%), var(--bg);
}

.svc-fc-inner {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.svc-fc-kicker {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 24px;
}

.svc-fc-h {
    font-family: var(--font-display);
    font-size: clamp(56px, 9vw, 120px);
    letter-spacing: clamp(2px, 0.5vw, 6px);
    line-height: 0.95;
    margin: 0 0 32px;
    color: var(--fg);
    text-transform: uppercase;
}

.svc-fc-h-accent {
    color: var(--accent);
    position: relative;
}

.svc-fc-h-accent::before {
    content: '';
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle at center, rgba(212, 165, 116, 0.15) 0%, transparent 70%);
    z-index: -1;
    animation: svcPulse 4s ease-in-out infinite;
}

@keyframes svcPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.05); }
}

.svc-fc-deck {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.7;
    color: var(--fg-2);
    max-width: 600px;
    margin: 0 auto 40px;
}

.svc-fc-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    padding: 18px 36px;
    background: var(--accent);
    color: var(--bg);
    text-decoration: none;
    transition: all 0.25s ease;
    font-weight: 500;
}

.svc-fc-btn:hover {
    background: var(--fg);
    color: var(--bg);
}


/* ==========================================================================
   RESPONSIVE FINAL
   ========================================================================== */
@media (max-width: 680px) {
    .svc-hero { padding: 100px 20px 60px; }
    .svc-cat-sec { padding: 60px 20px; }

    .svc-cat-head {
        flex-direction: column;
        align-items: flex-start;
    }
    .svc-cat-head-right { text-align: left; }

    .svc-card { padding: 24px 20px; min-height: 0; }
    /* Cartes avec un badge (promo ou Populaire) : de l'air en haut pour que
       le badge ne chevauche pas le nom de la formule sur mobile. */
    .svc-card.has-promo,
    .svc-card.featured { padding-top: 40px; }
    .svc-card.has-promo.featured { padding-top: 56px; }
    .svc-card-name { font-size: 26px; }
    .svc-card-price { font-size: 38px; }

    .svc-panel-inner { padding: 28px 20px; }
    .svc-panel-name { font-size: 28px; }
    .svc-panel-cta-group { flex-direction: column; }
    .svc-panel-btn { justify-content: space-between; width: 100%; }

    .svc-final-cta { padding: 80px 20px; }
}