/* =============================================================
   SCOLA DESIGN SYSTEM — refonte 2026-05-03
   Calque d'override appliqué après style.css + mobile.css.
   Palette teal #00C4B4 + indigo #2D2A75, header fin 48px,
   surfaces neutres Material gray, cards subtiles, CTA pill.
   ============================================================= */

:root {
    /* Override nav height — scola = 48px desktop, 56px mobile (touch) */
    --nav-h: 48px;
    --container-pad: 24px;
}

/* Body : fond gris très clair scola (pas le cream warm de l'ancien design) */
body {
    background: var(--color-surface-secondary, #F8F9FA);
    color: var(--color-txt-primary, #202124);
}

/* ---------- HEADER fin (48px) ---------- */

.nav.nav--scola {
    position: sticky; top: 0; z-index: 50;
    background: var(--color-surface-primary, #FFFFFF);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--color-border-scola, #E8EAED);
    box-shadow: none;
    height: var(--header-height, 48px);
    transition: none;
}
.nav.nav--scola.scrolled { background: var(--color-surface-primary, #FFFFFF); border-color: var(--color-border-scola, #E8EAED); }

.nav.nav--scola .nav-inner {
    width: 100%;
    max-width: var(--container-max, 1280px);
    margin: 0 auto;
    height: 100%;
    padding: 0 var(--container-pad, 24px);
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Brand : SVG bicolore + wordmark (Marque + .ma)
   Le conteneur .brand suit la direction de la page → en RTL le flex inverse
   naturellement et place le logo à droite (côté début en lecture arabe), le
   wordmark à gauche. Seul .brand-wordmark reste forcé en LTR pour préserver
   l'ordre interne "Atlas Drive.ma" (sinon devient "ma.Atlas Drive"). */
.nav.nav--scola .brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-txt-primary, #202124);
    font-weight: 600;
    text-decoration: none;
    flex-shrink: 0;
}
.nav.nav--scola .brand-icon {
    display: inline-flex;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}
.nav.nav--scola .brand-icon svg { width: 100%; height: 100%; display: block; }
.nav.nav--scola .brand-wordmark {
    display: inline-flex;
    align-items: baseline;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
    /* Latin brand : reste en LTR même en RTL (sinon "Atlas Drive.ma"
       devient "ma.Atlas Drive" car inline-flex inverse en RTL). */
    direction: ltr;
    unicode-bidi: isolate;
}
.nav.nav--scola .brand-name {
    color: var(--color-secondary, #2D2A75);
    font-size: inherit;
    font-weight: inherit;
}
.nav.nav--scola .brand-suffix {
    color: var(--color-primary, #00C4B4);
    font-weight: 600;
}

/* Liens du nav central — desktop seulement. Disposition en flex interne pour
   aligner horizontalement les liens. Le centrage RÉEL par rapport au header
   est piloté par le grid 3-cols sur `.nav-inner` plus bas (@media min-width:
   1025px) : avec `grid-template-columns: 1fr auto 1fr`, les colonnes 1fr de
   chaque côté s'équilibrent → menu strictement centré dans le header
   indépendamment des largeurs de brand et nav-utils. Le mobile garde `.nav-inner`
   en flex et override `.nav-links` en `position: fixed` (drawer top-down). */
.nav.nav--scola .nav-links {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: flex-start;
    margin-left: 8px;
    gap: 4px;
}
.nav.nav--scola .nav-links > a {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-txt-secondary, #5F6368);
    transition: background .15s, color .15s;
}
.nav.nav--scola .nav-links > a:hover {
    background: var(--color-surface-tertiary, #F1F3F4);
    color: var(--color-txt-primary, #202124);
}
.nav.nav--scola .nav-links > a:focus-visible {
    outline: 2px solid var(--color-primary, #00C4B4);
    outline-offset: 2px;
}

/* Items mobile-only cachés en desktop */
.nav.nav--scola .nav-tel-mobile,
.nav.nav--scola .nav-admin-link,
.nav.nav--scola .nav-close,
.nav.nav--scola .drawer-card,
.nav.nav--scola .drawer-section,
.nav.nav--scola .drawer-toggle { display: none; }

/* Bouton de fermeture du drawer (mobile) — affiché en mobile uniquement */
.nav.nav--scola .nav-close {
    background: transparent;
    border: none;
    padding: 8px;
    border-radius: 8px;
    color: var(--color-txt-secondary, #5F6368);
}

/* Utils desktop : pills langue + CTA */
.nav.nav--scola .nav-utils {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Desktop : centre le menu dans l'espace résiduel entre brand et nav-utils.
   Note : un vrai centrage strict par rapport au header serait mathématiquement
   impossible sans overlap dès que `nav-utils` (tel + 4 pills langue + currency
   + CTA, ~530px) est plus large que `(container - menu)/2`. Le centrage entre
   brand et utils est le meilleur compromis visuel sans débordement.
   En mobile (drawer flex-direction: column), `justify-content: center`
   centrerait verticalement les liens dans le drawer — donc override en
   desktop seulement. */
@media (min-width: 1025px) {
    .nav.nav--scola .nav-links {
        justify-content: center;
        margin-left: 0;
    }
}

/* Téléphone cliquable desktop — texte teal aligné sur la palette, icône
   en couleur de marque, masqué en mobile (le drawer porte sa propre entrée). */
.nav.nav--scola .nav-tel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-secondary, #2D2A75);
    text-decoration: none;
    direction: ltr;
    unicode-bidi: isolate;
    transition: background .15s, color .15s;
}
.nav.nav--scola .nav-tel:hover {
    background: var(--color-surface-tertiary, #F1F3F4);
    color: var(--color-primary-dark, #00A89A);
}
.nav.nav--scola .nav-tel svg {
    color: var(--color-primary, #00C4B4);
    flex-shrink: 0;
}
.nav.nav--scola .nav-tel-num { white-space: nowrap; }

/* ---------- FOOTER admin login link — discret, aligné aux liens légaux ---------- */
.footer-legal .footer-admin-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.footer-legal .footer-admin-link svg {
    opacity: .65;
    transition: opacity .15s;
}
.footer-legal .footer-admin-link:hover svg { opacity: 1; }

/* Pills langue — gradient teal pour active */
.lang-pills,
.currency-pills {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--color-surface-tertiary, #F1F3F4);
    padding: 2px;
    border-radius: 999px;
}
.lang-pill,
.currency-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 24px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-txt-secondary, #5F6368);
    border-radius: 999px;
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color .15s, background .15s;
}
.lang-pill:hover,
.currency-pill:hover { color: var(--color-txt-primary, #202124); }
.lang-pill.is-active,
.currency-pill.is-active {
    background: linear-gradient(to right, var(--color-primary, #00C4B4), var(--color-primary-dark, #00A89A));
    color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

/* CTA primaire dans le nav — pill, plus petit/sobre que le btn-primary global */
.nav.nav--scola .nav-cta-btn {
    position: relative;
    isolation: isolate;
    height: 32px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    box-shadow: 0 4px 10px -2px rgba(var(--primary-rgb), .35);
}
.nav.nav--scola .nav-cta-btn .nav-cta-text,
.nav.nav--scola .nav-cta-btn svg { position: relative; z-index: 1; }
.nav.nav--scola .nav-cta-btn .cta-pulse {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--color-primary, #00C4B4);
    z-index: -1;
    pointer-events: none;
    animation: nav-cta-pulse 2.4s cubic-bezier(.4, 0, .6, 1) infinite;
}
.nav.nav--scola .nav-cta-btn .cta-pulse-2 { animation-delay: 1.2s; }
.nav.nav--scola .nav-cta-btn:hover .cta-pulse,
.nav.nav--scola .nav-cta-btn:focus-visible .cta-pulse {
    animation-play-state: paused;
    opacity: 0;
    transition: opacity .2s;
}
@keyframes nav-cta-pulse {
    0%   { transform: scale(1);    opacity: .45; }
    100% { transform: scale(1.45); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .nav.nav--scola .nav-cta-btn .cta-pulse { animation: none; opacity: 0; }
}

/* Burger mobile — caché en desktop */
.nav.nav--scola .nav-burger {
    display: none;
    width: 40px; height: 40px;
    align-items: center; justify-content: center;
    background: transparent;
    border-radius: 999px;
    flex-direction: row; gap: 0;
    color: var(--color-txt-secondary, #5F6368);
}
.nav.nav--scola .nav-burger:hover { background: var(--color-surface-tertiary, #F1F3F4); }
.nav.nav--scola .nav-burger span { display: none; }
.nav.nav--scola .nav-burger-icon { display: block; }

/* Topbar : retiré du nouveau header — masqué partout */
.topbar { display: none !important; }

/* ---------- BOUTONS — version scola sobre ---------- */

.btn { font-family: inherit; }

.btn-primary {
    background: var(--color-primary, #00C4B4);
    color: #fff;
    box-shadow: 0 4px 10px -2px rgba(var(--primary-rgb), .35);
    border-radius: 12px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
}
.btn-primary:hover {
    background: var(--color-primary-dark, #00A89A);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -4px rgba(var(--primary-rgb), .45);
}

.btn-dark {
    background: var(--color-secondary, #2D2A75);
    color: #fff;
    box-shadow: 0 4px 10px -2px rgba(45, 42, 117, .35);
    border-radius: 12px;
}
.btn-dark:hover { background: #1F1D52; transform: translateY(-2px); }

.btn-ghost {
    background: transparent;
    color: var(--color-txt-secondary, #5F6368);
    border: 1px solid var(--color-border-scola, #E8EAED);
    border-radius: 12px;
}
.btn-ghost:hover {
    background: var(--color-surface-tertiary, #F1F3F4);
    color: var(--color-txt-primary, #202124);
    border-color: var(--color-border-scola, #E8EAED);
}

/* Focus rings cohérents teal */
.btn:focus-visible,
a.btn:focus-visible,
button.btn:focus-visible {
    outline: 3px solid var(--color-primary, #00C4B4);
    outline-offset: 3px;
}
a:focus-visible:not(.btn):not(.chip):not(.selector-trigger):not(.selector-menu li):not(.lang-pill):not(.currency-pill) {
    outline: 2px solid var(--color-primary, #00C4B4);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- CARDS — version scola : white + border 1px + shadow micro + radius 16px ---------- */

.car-card,
.gamme,
.trust-card,
.tcard,
.faq-item,
.locate-card {
    background: var(--color-surface-primary, #FFFFFF);
    border: 1px solid var(--color-border-scola, #E8EAED);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
    transition: box-shadow .2s, transform .2s, border-color .2s;
}
.car-card:hover,
.gamme:hover,
.trust-card:hover,
.tcard:hover {
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, .08);
    border-color: rgba(var(--primary-rgb), .3);
    transform: translateY(-2px);
}

/* Gamme featured — pas de barre d'accent (interdit CLAUDE.md), juste un teal soft border */
.gamme.is-featured {
    border-color: var(--color-primary, #00C4B4);
    box-shadow: 0 4px 16px rgba(var(--primary-rgb), .15);
}
.gamme.is-featured::before { display: none !important; }

/* Trust icon = pastel rounded box scola */
.trust-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: var(--color-primary-50, #E6FAF8);
    color: var(--color-primary, #00C4B4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------- FORMS (contact + reservation) ---------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="number"],
input[type="search"],
select,
textarea {
    background: var(--color-surface-secondary, #F8F9FA);
    border: 1px solid var(--color-border-scola, #E8EAED);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--color-txt-primary, #202124);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-primary, #00C4B4);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .15);
}
input::placeholder, textarea::placeholder { color: var(--color-txt-tertiary, #80868B); }

/* ---------- SECTIONS HEADINGS ---------- */

.section-title { color: var(--color-txt-primary, #202124); }
.section-sub   { color: var(--color-txt-secondary, #5F6368); }
.eyebrow {
    background: var(--color-primary-50, #E6FAF8);
    color: var(--color-primary-dark, #00A89A);
    border: 1px solid rgba(var(--primary-rgb), .2);
}
.eyebrow-dot { background: var(--color-primary, #00C4B4); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .25); }

/* ---------- FAQ — accordeon scola ---------- */

/* Wrapper : pas de double encadrement (le legacy posait bg+border+shadow+radius
   par-dessus les cards d'items → coins arrondis qui se chevauchent). On
   neutralise et on remplace par un gap aéré. */
.faq-list {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-item {
    background: var(--color-surface-secondary, #F8F9FA);
    border: 1px solid var(--color-border-scola, #E8EAED);
    border-radius: 12px;
    box-shadow: none;
    transition: background .15s, border-color .15s, box-shadow .2s;
}
.faq-item:hover {
    background: var(--color-surface-tertiary, #F1F3F4);
    border-color: rgba(var(--primary-rgb), .25);
}
.faq-item[open] {
    background: var(--color-surface-primary, #FFFFFF);
    border-color: rgba(var(--primary-rgb), .35);
    box-shadow: 0 4px 14px -4px rgba(var(--primary-rgb), .15);
}

/* Summary — typo + chevron teal */
.faq-item summary {
    padding: 18px 22px;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--color-txt-primary, #202124);
    border-radius: inherit;
    transition: color .15s;
}
.faq-item summary:hover { background: transparent; color: var(--color-primary-dark, #00A89A); }
.faq-item[open] summary { color: var(--color-primary-dark, #00A89A); }
.faq-item summary svg {
    color: var(--color-primary, #00C4B4);
    width: 16px; height: 16px;
    padding: 4px;
    border-radius: 50%;
    background: rgba(var(--primary-rgb), .1);
    box-sizing: content-box;
    transition: transform .25s cubic-bezier(.2,.8,.2,1), background .15s;
}
.faq-item[open] summary svg { background: rgba(var(--primary-rgb), .18); }
.faq-item summary:focus-visible {
    outline: 2px solid var(--color-primary, #00C4B4);
    outline-offset: 2px;
}

/* Réponse — fade-in subtil à l'ouverture */
.faq-item .faq-a {
    padding: 0 22px 20px;
    color: var(--color-txt-secondary, #5F6368);
    font-size: 14.5px;
    line-height: 1.65;
}
.faq-item[open] .faq-a {
    animation: faq-fade-in .22s ease-out;
}
@keyframes faq-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .faq-item[open] .faq-a { animation: none; }
}

@media (max-width: 680px) {
    .faq-list { gap: 8px; }
    .faq-item summary { padding: 16px 18px; font-size: 14.5px; }
    .faq-item .faq-a { padding: 0 18px 18px; }
}

/* ---------- RSV MODAL — bouton fermeture visible sur tous les fonds ---------- */
/* Contexte : le X de fermeture (.rsv-close) était bg blanc + icône ink. Sur le
   nouveau modal full-screen mobile, il se retrouve sur le aside indigo où le
   blanc disparaît (1:1 contre le drag handle blanc juste à côté). On le passe
   en cercle teal solide avec icône blanche → visible quel que soit le fond. */
.rsv-close {
    background: var(--color-primary, #00C4B4) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px -2px rgba(var(--primary-rgb), .45), 0 0 0 2px rgba(255, 255, 255, .9);
    z-index: 10;
}
.rsv-close:hover {
    background: var(--color-primary-dark, #00A89A) !important;
    transform: scale(1.05);
}
.rsv-close svg { color: #fff; }

/* ---------- RSV MODAL — état "invalid" basé sur :user-invalid ---------- */
/* Bug : `:invalid:not(:placeholder-shown)` matchait dès l'ouverture pour les
   <input type="date"> (ces inputs n'ont pas de placeholder text → la règle
   :placeholder-shown reste fausse, donc :invalid s'applique sans qu'on ait
   touché le champ). Résultat : le formulaire affichait un cadre rouge
   "erreur de validation" sur Date Départ avant que l'utilisateur ait cliqué.
   Fix : utiliser :user-invalid (ne match qu'après une vraie interaction
   utilisateur — clic, saisie, ou tentative de submit). On désactive aussi
   l'ancien sélecteur :invalid:not(:placeholder-shown). */
.rsv-field:has(input:invalid:not(:placeholder-shown)),
.rsv-field:has(textarea:invalid:not(:placeholder-shown)),
.rsv-field:has(select:invalid:not(:placeholder-shown)) {
    border-color: var(--color-border-scola, #E8EAED) !important;
    background: transparent !important;
}
.rsv-field:has(input:user-invalid),
.rsv-field:has(textarea:user-invalid),
.rsv-field:has(select:user-invalid) {
    border-color: #c0392b !important;
    background: rgba(192, 57, 43, .04) !important;
}
.rsv-field:has(input:user-invalid):focus-within,
.rsv-field:has(textarea:user-invalid):focus-within,
.rsv-field:has(select:user-invalid):focus-within {
    box-shadow: 0 0 0 4px rgba(192, 57, 43, .18);
}

/* ---------- RSV MODAL — aside compact + foot horizontal en mobile ---------- */
/* Bug : sur mobile (modale full-width bottom-sheet), .rsv-aside fait ~393px
   sur 844px de viewport (47%) et le foot 2-boutons-stackés ~140px,
   ne laissant que ~370px scrollables pour le formulaire.
   Fix : aside horizontal compact + modale 96dvh + boutons foot côte-à-côte +
   paddings réduits → ~750px utiles pour le formulaire. */
@media (max-width: 768px) {
    /* Header reste visible quand la modale est ouverte. Le legacy met
       `overflow: hidden` sur body, ce qui casse le `position: sticky` du nav
       (le sticky a besoin d'un ancestor scrollable). On override en gardant
       body scrollable — l'overlay full-screen sous le header capture les
       touch events, donc l'utilisateur ne peut pas scroller la page derrière
       même sans overflow:hidden. Bonus : le switch fixed↔sticky qui causait
       un flash blanc au close sur Safari mobile est évité. */
    body.rsv-locked { overflow: visible !important; }
    body.rsv-locked .rsv-overlay { overscroll-behavior: contain; }

    /* Modale en mode "menu drawer" : descend depuis sous le header du site,
       le header scola reste visible et accessible (pas caché par l'overlay).
       Animation top-down (slideDown), pas de coins arrondis, plein écran sous
       le nav. */
    .rsv-overlay {
        top: var(--nav-h, 48px) !important;
        inset: var(--nav-h, 48px) 0 0 0 !important;
        z-index: 49 !important;          /* < nav z-index 50 — header reste devant */
        align-items: stretch !important;
        padding: 0 !important;
    }
    .rsv-modal,
    .rsv-form-dialog {
        max-height: 100% !important;
        height: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
        transform: translateY(-100%) !important;
    }
    #rsv-overlay.is-open .rsv-modal,
    #rsv-overlay[data-open="1"] .rsv-modal,
    #rsv-overlay.open .rsv-modal {
        transform: translateY(0) !important;
    }
    /* Drag handle inutile en mode top-down */
    .rsv-modal::before { display: none !important; }
    /* Aside dark masqué : c'était le "header de la modale" qui chevauchait
       visuellement le header du site. */
    .rsv-aside { display: none !important; }

    /* Aside compacte horizontale : ~84px au lieu de 393px */
    .rsv-aside {
        padding: 12px 14px !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;
    }
    .rsv-aside-eyebrow,
    .rsv-aside-sub,
    .rsv-aside-specs,
    .rsv-aside-trust,
    .rsv-aside-price-label { display: none !important; }
    .rsv-aside-photo {
        width: 56px;
        height: 56px;
        aspect-ratio: 1 / 1 !important;
        border-radius: 10px !important;
        flex-shrink: 0;
    }
    .rsv-aside-name {
        font-size: 16px !important;
        flex: 1 1 0;
        min-width: 0;
        margin: 0 !important;
    }
    .rsv-aside-price {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        text-align: right;
    }
    .rsv-aside-price-val {
        font-size: 18px !important;
        font-weight: 700 !important;
    }
    .rsv-aside-price-val sub { font-size: 11px !important; }

    /* Foot : boutons côte-à-côte + paddings serrés (~80px au lieu de 139px) */
    .rsv-foot,
    .rsv-actions {
        flex-direction: row !important;
        gap: 8px !important;
        padding: 10px 12px calc(10px + var(--safe-bottom)) !important;
        margin-top: 8px !important;
    }
    .rsv-foot .btn,
    .rsv-actions .btn,
    .rsv-actions .rsv-submit,
    .rsv-actions .rsv-wa {
        flex: 1 1 0 !important;
        width: auto !important;
        min-height: 44px !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
        justify-content: center;
    }

    /* Body scrollable recalculé : 100dvh - header 48px - foot ~75px (aside masqué) */
    .rsv-body {
        max-height: calc(100dvh - 123px) !important;
        padding: 16px 16px 0 !important;
    }
}

/* ---------- AGENCE stats — chiffres teal pour valoriser ---------- */

.stat-num { color: var(--color-primary, #00C4B4) !important; }
.stat-num span { color: var(--color-primary-dark, #00A89A) !important; font-weight: 700 !important; }
.stat-label { color: var(--color-txt-secondary, #5F6368) !important; }

/* ---------- TÉMOIGNAGES — étoiles + guillemets teal scola (italique gardée
   pour la convention typo des citations, autorisée par CLAUDE.md) ---------- */
.tcard-stars { color: var(--color-primary, #00C4B4) !important; }
.tcard-quote::before { color: var(--color-primary, #00C4B4) !important; }

/* ---------- FLEET car cards — bouton Réserver teal scola ---------- */

.car-book {
    background: var(--color-primary, #00C4B4) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px -2px rgba(var(--primary-rgb), .35);
    transition: background .15s, transform .15s, box-shadow .2s !important;
}
.car-book:hover {
    background: var(--color-primary-dark, #00A89A) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -4px rgba(var(--primary-rgb), .45);
}
.car-link:hover { color: var(--color-primary-dark, #00A89A); background: var(--color-surface-tertiary, #F1F3F4); }

/* ---------- FLEET filters (chips Tous / Économique / Confort / Premium) ---------- */

.fleet-filters .chip {
    background: var(--color-surface-primary, #FFFFFF);
    border: 1px solid var(--color-border-scola, #E8EAED);
    color: var(--color-txt-secondary, #5F6368);
    border-radius: 999px;
}
.fleet-filters .chip:hover {
    border-color: rgba(var(--primary-rgb), .35);
    color: var(--color-txt-primary, #202124);
    background: var(--color-surface-tertiary, #F1F3F4);
}
.fleet-filters .chip.is-active,
.fleet-filters .chip.active {
    background: linear-gradient(to right, var(--color-primary, #00C4B4), var(--color-primary-dark, #00A89A));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 10px -2px rgba(var(--primary-rgb), .35);
}

/* ---------- INCL-BAND (inclus dans chaque location) ---------- */

/* Bandeau sous les gammes : passage indigo + accents teal au lieu du noir
   pur orange legacy. Cohérent avec la CTA band en bas de page. */
.incl-band {
    background:
        radial-gradient(ellipse 50% 80% at 0% 0%, rgba(var(--primary-rgb), .22), transparent 60%),
        var(--color-secondary, #2D2A75) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 24px -10px rgba(45, 42, 117, .35);
}
.incl-band-title { color: #fff !important; }
.incl-band-title .ital {
    color: var(--color-primary, #00C4B4) !important;
    font-style: normal !important;
    font-family: inherit !important;
    font-weight: 600 !important;
}
.incl-list li { color: rgba(255, 255, 255, .9) !important; }
.incl-list svg {
    color: var(--color-primary, #00C4B4) !important;
    width: 18px;
    height: 18px;
    padding: 3px;
    border-radius: 50%;
    background: rgba(var(--primary-rgb), .18);
    box-sizing: content-box;
}

/* ---------- CTA BAND ---------- */

.cta-band {
    background:
        radial-gradient(ellipse 60% 80% at 100% 0%, rgba(var(--primary-rgb), .35), transparent 60%),
        radial-gradient(ellipse 50% 70% at 0% 100%, rgba(var(--primary-rgb), .22), transparent 55%),
        var(--color-secondary, #2D2A75) !important;
    color: #fff;
}

/* Eyebrow : sur fond indigo, force le pastel teal lisible */
.cta-band .eyebrow,
.cta-band .eyebrow.light {
    background: rgba(255, 255, 255, .12) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .18) !important;
}
.cta-band .eyebrow-dot { background: var(--color-primary, #00C4B4) !important; box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .35) !important; }

/* Bouton primaire du CTA — inverse : blanc sur indigo, hover teal */
.cta-band .btn-dark {
    background: #fff !important;
    color: var(--color-secondary, #2D2A75) !important;
    border-radius: 12px;
    padding: 14px 22px;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 6px 18px -4px rgba(0, 0, 0, .25);
    transition: background .18s, color .18s, transform .18s, box-shadow .18s;
}
.cta-band .btn-dark:hover {
    background: var(--color-primary, #00C4B4) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -4px rgba(var(--primary-rgb), .45);
}
.cta-band .btn-dark svg { transition: transform .2s; }
.cta-band .btn-dark:hover svg { transform: translateX(3px); }

/* Lien WhatsApp secondaire — plus visible : badge transparent + bord, pas une underline texte */
.cta-band .btn-wa-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    transition: background .15s, border-color .15s, transform .15s;
}
.cta-band .btn-wa-link:hover {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .55);
    transform: translateY(-1px);
}
.cta-band .btn-wa-link svg { color: #25d366; }

@media (max-width: 768px) {
    .cta-band .btn-dark { padding: 12px 18px; font-size: 14px; }
}

/* ---------- HERO — gradient dérivé de la palette active ---------- */

/* Variante "photo" sans image hero sélectionnée (settings.hero_image='none') :
   la fallback recouvre tout le bloc — autant en faire un dégradé palette franc
   plutôt qu'un wash neutre. Dark secondary en haut (texte blanc lisible sous
   vignette) → primary-dark → primary en bas. S'adapte à toute palette. */
.hero-photo-fallback {
    background: linear-gradient(160deg, var(--color-secondary) 0%, var(--color-primary-dark) 55%, var(--color-primary) 100%) !important;
}

/* Variante "floating" : wash subtil derrière les blobs/grid décoratifs. */
.hero--floating::before {
    background: linear-gradient(180deg, rgba(var(--primary-rgb), .04) 0%, var(--surface, #FFFFFF) 50%, rgba(var(--color-accent-rgb), .35) 100%) !important;
}

/* ---------- DRAWER MOBILE — top-down panel, cards arrondies ---------- */

@media (max-width: 1024px) {
    /* Cacher utils desktop sur mobile/tablette */
    .nav.nav--scola .nav-utils { display: none; }
    .nav.nav--scola .nav-links > a { display: none; }
    /* Réafficher le burger */
    .nav.nav--scola .nav-burger { display: inline-flex; }
}

@media (max-width: 1024px) {
    /* Le drawer = nav-links transformé en panneau top-down.
       `position: fixed` (et non absolute) : quand body.nav-open applique
       `overflow: hidden` au scroll lock, le header `position: sticky` perd
       son ancrage et redescend à y=0 du document → un drawer en absolute
       calé sur ce parent suivrait hors viewport. Fixed l'ancre au viewport. */
    .nav.nav--scola .nav-links {
        position: fixed;
        top: var(--header-height, 48px);
        left: 0; right: 0;
        background: var(--color-surface-secondary, #F8F9FA);
        border-bottom: 1px solid var(--color-border-scola, #E8EAED);
        box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
        padding: 16px;
        max-height: calc(100vh - var(--header-height, 48px));
        overflow-y: auto;
        z-index: 50;
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 0;
        opacity: 0;
        transform: translateY(-8px);
        pointer-events: none;
        transition: opacity .2s, transform .2s;
    }
    .nav.nav--scola .nav-links.open {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    /* Drawer mobile : fond surface unique, liste plate iOS-style. Le drawer
       est désormais un panneau blanc; les items se distinguent par un divider
       fin et une icône pastel teal à gauche, pas par cards individuelles. */
    .nav.nav--scola .nav-links {
        background: var(--color-surface-primary, #FFFFFF) !important;
        padding: 8px 0 16px !important;
    }
    .nav.nav--scola .nav-links > a,
    .nav.nav--scola .drawer-toggle,
    .nav.nav--scola .drawer-card {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .nav.nav--scola .nav-links > a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 20px !important;
        font-size: 15px;
        font-weight: 500;
        color: var(--color-txt-primary, #202124);
        position: relative;
        text-decoration: none;
    }
    /* Icône à gauche : cercle pastel teal + SVG mask spécifique au lien */
    .nav.nav--scola .nav-links > a::before {
        content: '';
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: var(--color-primary-50, #E6FAF8);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 18px 18px;
    }
    /* Chevron droite (RTL miroir auto via mask) */
    .nav.nav--scola .nav-links > a::after {
        content: '';
        margin-inline-start: auto;
        width: 14px; height: 14px;
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2380868B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>") no-repeat center / contain;
        flex-shrink: 0;
        opacity: .6;
    }
    [dir="rtl"] .nav.nav--scola .nav-links > a::after { transform: scaleX(-1); }
    .nav.nav--scola .nav-links > a:hover {
        background: var(--color-surface-tertiary, #F1F3F4) !important;
    }
    .nav.nav--scola .nav-links > a:active {
        background: var(--color-surface-secondary, #F8F9FA) !important;
    }
    /* Divider entre items (1px ligné, indenté pour ne pas toucher l'icône) */
    .nav.nav--scola .nav-links > a + a,
    .nav.nav--scola .nav-links > a + .drawer-toggle,
    .nav.nav--scola .nav-links > .drawer-toggle + a,
    .nav.nav--scola .nav-links > .drawer-toggle + .drawer-toggle,
    .nav.nav--scola .nav-links > .drawer-card + a,
    .nav.nav--scola .nav-links > * + .drawer-card,
    .nav.nav--scola .nav-tel-mobile + .nav-admin-link,
    .nav.nav--scola .nav-links > a + .nav-tel-mobile {
        border-top: 1px solid var(--color-border-scola, #E8EAED) !important;
    }

    /* Icônes par lien — SVG inline en background-image (mask-color teal) */
    .nav.nav--scola .nav-links > a[href="/"]::before {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300A89A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><polyline points='9 22 9 12 15 12 15 22'/></svg>");
    }
    .nav.nav--scola .nav-links > a[href="/flotte.php"]::before {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300A89A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 16H9m10 0h3v-3.15a1 1 0 0 0-.84-.99L16 11l-2.7-3.6a1 1 0 0 0-.8-.4H5.24a2 2 0 0 0-1.8 1.1l-.8 1.63A6 6 0 0 0 2 12.42V16h2'/><circle cx='6.5' cy='16.5' r='2.5'/><circle cx='16.5' cy='16.5' r='2.5'/></svg>");
    }
    .nav.nav--scola .nav-links > a[href="/#gammes"]::before {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300A89A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7' rx='1'/><rect x='14' y='3' width='7' height='7' rx='1'/><rect x='3' y='14' width='7' height='7' rx='1'/><rect x='14' y='14' width='7' height='7' rx='1'/></svg>");
    }
    .nav.nav--scola .nav-links > a[href="/a-propos.php"]::before {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300A89A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4M12 8h.01'/></svg>");
    }
    .nav.nav--scola .nav-links > a[href="/contact.php"]::before {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300A89A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='m22 7-10 5L2 7'/></svg>");
    }
    .nav.nav--scola .nav-tel-mobile::before {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300A89A' stroke='none'><path d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.6a1 1 0 0 1-.25 1z'/></svg>") !important;
    }
    .nav.nav--scola .nav-admin-link::before {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300A89A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/><polyline points='10 17 15 12 10 7'/><line x1='15' y1='12' x2='3' y2='12'/></svg>") !important;
    }
    .nav.nav--scola .nav-tel-mobile,
    .nav.nav--scola .nav-admin-link {
        display: flex !important;
    }

    /* Drawer cards (CTA Réserver) — adaptées au flat list */
    .nav.nav--scola .drawer-card {
        display: flex;
        align-items: center;
        gap: 12px;
        background: rgba(var(--primary-rgb), .06) !important;
        border: none !important;
        border-top: 1px solid var(--color-border-scola, #E8EAED) !important;
        border-radius: 0 !important;
        padding: 14px 20px !important;
        margin: 0 !important;
        text-decoration: none;
        color: var(--color-primary-dark, #00A89A);
    }
    .nav.nav--scola .drawer-card:hover {
        background: rgba(var(--primary-rgb), .12) !important;
    }
    .nav.nav--scola .drawer-card-icon {
        width: 36px; height: 36px;
        border-radius: 10px;
        background: var(--color-surface-tertiary, #F1F3F4);
        color: var(--color-txt-secondary, #5F6368);
        display: inline-flex;
        align-items: center; justify-content: center;
        flex-shrink: 0;
    }
    .nav.nav--scola .drawer-card-icon--accent {
        background: var(--color-primary-50, #E6FAF8);
        color: var(--color-primary-dark, #00A89A);
    }
    .nav.nav--scola .drawer-card-body {
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-width: 0;
        flex: 1;
    }
    .nav.nav--scola .drawer-card-label {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .08em;
        font-weight: 600;
        color: var(--color-txt-tertiary, #80868B);
    }
    .nav.nav--scola .drawer-card-title {
        font-size: 15px;
        font-weight: 600;
        color: var(--color-txt-primary, #202124);
    }
    .nav.nav--scola .drawer-card-chevron { color: var(--color-txt-secondary, #5F6368); flex-shrink: 0; }
    [dir="rtl"] .nav.nav--scola .drawer-card-chevron { transform: scaleX(-1); }
    .nav.nav--scola .drawer-card--cta {
        background: var(--color-primary-50, #E6FAF8);
        border-color: rgba(var(--primary-rgb), .25);
    }
    .nav.nav--scola .nav-close { display: none; }
}

/* En desktop on cache les cartes drawer */
@media (min-width: 1025px) {
    .nav.nav--scola .drawer-card { display: none; }
    .nav.nav--scola .nav-tel-mobile,
    .nav.nav--scola .nav-admin-link { display: none; }
}

/* RTL : burger à gauche, brand à droite, swap brand-suffix ordre OK car baseline */
[dir="rtl"] .nav.nav--scola .nav-inner { /* flex-direction reste row, ce qui inverse naturellement en RTL */ }
[dir="rtl"] .nav.nav--scola .nav-utils { margin-left: 0; margin-right: auto; }

/* ---------- OVERRIDES mobile.css legacy (drawer side-slide + burger ordre) ----------
   mobile.css applique `order:-1` sur .nav-burger (push à gauche) + flex-direction:
   row-reverse sur .brand + un drawer side-slide. Scola veut le burger À DROITE et
   un drawer top-down. On annule ces règles spécifiquement sur .nav--scola. */

@media (max-width: 1024px) {
    /* margin-inline-start: auto = margin-left en LTR, margin-right en RTL.
       Pousse le burger vers la fin physique de la rangée (droite en LTR,
       gauche en RTL) — symétrique selon le sens de lecture. */
    .nav.nav--scola .nav-inner > .nav-burger { order: 0; margin-inline-start: auto; }
    .nav.nav--scola .brand { flex-direction: row; gap: 8px; }
    .nav.nav--scola .brand-text-block { align-items: flex-start; }
    .nav.nav--scola .brand-name,
    .nav.nav--scola .brand-slogan { text-align: start; }

    /* Drawer top-down full-width : annule complètement le drawer side-slide legacy
       (position:fixed, width:min(86vw,360px), background:ink, transform:translateX).
       Fixed (pas absolute) — voir commentaire ligne ~815 pour le pourquoi.
       Flat list iOS-style : fond unique blanc, items séparés par dividers. */
    .nav.nav--scola .nav-links {
        position: fixed !important;
        inset-inline-start: 0 !important;
        inset-inline-end: 0 !important;
        top: var(--header-height, 48px) !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: calc(100vh - var(--header-height, 48px)) !important;
        background: var(--color-surface-primary, #FFFFFF) !important;
        color: var(--color-txt-primary, #202124) !important;
        padding: 8px 0 16px !important;
        gap: 0 !important;
        border-bottom: 1px solid var(--color-border-scola, #E8EAED) !important;
        box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1) !important;
        transform: translateY(-8px) !important;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s, transform .2s !important;
    }
    .nav.nav--scola .nav-links.open {
        transform: translateY(0) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    [dir="rtl"] .nav.nav--scola .nav-links { transform: translateY(-8px) !important; }
    [dir="rtl"] .nav.nav--scola .nav-links.open { transform: translateY(0) !important; }

    /* Garde le burger visible quand le drawer est ouvert (pour pouvoir refermer
       avec l'icône close — pattern scola). mobile.css le cache via visibility:hidden. */
    body.nav-open .nav.nav--scola .nav-burger { visibility: visible !important; }

    /* Header en fixed quand drawer ouvert : avec body.nav-open → overflow:hidden,
       le `position: sticky` du header perd son ancrage et retombe à y=0 du document.
       Le forcer en fixed garde le burger (X de fermeture) accessible peu importe la
       position de scroll au moment où l'utilisateur a ouvert le menu. */
    body.nav-open .nav.nav--scola {
        position: fixed !important;
        top: 0; left: 0; right: 0;
        z-index: 51;
    }

    /* Backdrop legacy à retirer (scola n'en a pas — le drawer est full-width depuis le header) */
    body.nav-open .nav.nav--scola ~ * { /* no-op pour spécificité */ }

    /* Flat list iOS-style : items sans border ni radius individuels, juste un
       padding horizontal pour aérer. Les dividers et icônes sont définis
       dans le bloc plus haut (ligne ~870). */
    .nav.nav--scola .nav-links > a {
        background: transparent !important;
        color: var(--color-txt-primary, #202124) !important;
        padding: 14px 20px !important;
        border: none !important;
        border-radius: 0 !important;
        font-size: 15px !important;
        font-weight: 500 !important;
    }
    .nav.nav--scola .nav-links > a:hover {
        background: var(--color-surface-tertiary, #F1F3F4) !important;
        color: var(--color-txt-primary, #202124) !important;
    }
}

/* Backdrop legacy à neutraliser sur scola (drawer top-down full-width) */
body.nav-open:has(.nav.nav--scola)::before { display: none !important; }
@supports not selector(:has(*)) {
    /* Fallback : on laisse le backdrop, mais transparent (le drawer full-width
       couvre déjà la zone vue). Mieux qu'un voile sombre disgracieux. */
    body.nav-open::before { background: transparent !important; backdrop-filter: none !important; }
}

/* Toggle des 2 icônes du burger : .nav-burger-icon--menu visible par défaut,
   .nav-burger-icon--close visible quand .nav-burger.open. Override de la règle
   .nav-burger-icon { display: block } qui montrait les deux. */
.nav.nav--scola .nav-burger-icon--close { display: none; }
.nav.nav--scola .nav-burger.open .nav-burger-icon--menu { display: none; }
.nav.nav--scola .nav-burger.open .nav-burger-icon--close { display: block; }

/* Hide le chevron ::after ET le cercle ::before générique du nav-links > a
   sur les drawer-card : ces dernières ont déjà leur propre .drawer-card-icon
   et .drawer-card-chevron en SVG inline. Sans hide du ::before, un cercle
   pastel teal vide apparaît côté start (visible en RTL à droite). */
.nav.nav--scola .nav-links > a.drawer-card::before,
.nav.nav--scola .nav-links > a.drawer-card::after { content: none !important; display: none !important; }

/* Mirror la flèche → du CTA Réserver en RTL (cohérence avec .drawer-card-chevron). */
[dir="rtl"] .nav.nav--scola .drawer-card-icon--accent svg { transform: scaleX(-1); }

/* Drawer mobile : sections langue/devise — segmented control plein-width.
   Pas d'icône décorative, juste un label small-caps + pills à parts égales.
   `display: none` par défaut (cf. règle plus haut) → réaffichées dans la
   media-query mobile via flex. Scopé à .drawer-section pour ne pas étirer
   les pills desktop. */
@media (max-width: 1024px) {
    .nav.nav--scola .drawer-section {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 12px;
        padding: 12px 14px;
        background: var(--color-surface-primary, #FFFFFF);
        border: 1px solid var(--color-border-scola, #E8EAED);
        border-radius: 12px;
        /* `.nav-links` est align-items: center en mobile drawer → sans
           align-self stretch, la section se sized à son contenu et reste
           centrée et étroite. Force la full-width comme les liens nav. */
        align-self: stretch;
    }
}
.nav.nav--scola .drawer-section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    color: var(--color-txt-tertiary, #80868B);
}
.nav.nav--scola .drawer-section .lang-pills,
.nav.nav--scola .drawer-section .currency-pills {
    width: 100%;
    gap: 4px;
    /* Pas de wrapper grise (la card blanche fait déjà office de container) +
       padding 0 pour aligner les pills sur les liens nav du drawer (16px de
       l'edge écran). */
    padding: 0;
    background: transparent;
    border-radius: 0;
}
.nav.nav--scola .drawer-section .lang-pill,
.nav.nav--scola .drawer-section .currency-pill {
    height: 36px !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
    padding: 0 8px !important;
    font-size: 13px;
    color: var(--color-txt-primary, #202124);
    background: var(--color-surface-tertiary, #F1F3F4);
    border-radius: 8px;
}
.nav.nav--scola .drawer-section .lang-pill.is-active,
.nav.nav--scola .drawer-section .currency-pill.is-active {
    color: #fff;
    background: linear-gradient(to right, var(--color-primary, #00C4B4), var(--color-primary-dark, #00A89A));
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

/* ---------- DRAWER TOGGLE — langue + devise (mobile) ----------
   Pattern <details>/<summary> collapsible : la valeur courante visible avec
   chevron, options déployées au clic. Plus compact que les pills 4-éléments. */
@media (max-width: 768px) {
    .nav.nav--scola .drawer-toggle {
        display: block !important;
        background: transparent !important;
        border: none !important;
        border-top: 1px solid var(--color-border-scola, #E8EAED) !important;
        border-radius: 0 !important;
        margin: 0 !important;
        overflow: hidden;
        align-self: stretch;
        width: auto;
        /* Empêche le flex parent (.nav-links column) de compresser le toggle
           ouvert : sans flex-shrink:0 le wrapper reste à sa taille fermée et
           clip les options via overflow:hidden — le drawer ne scrolle pas. */
        flex-shrink: 0;
    }
    .nav.nav--scola .drawer-toggle > summary {
        list-style: none;
        cursor: pointer;
        padding: 12px 16px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        color: var(--color-txt-primary, #202124);
    }
    .nav.nav--scola .drawer-toggle > summary {
        padding: 14px 20px !important;
    }
    /* Icône à gauche du toggle (cohérence avec les liens nav) */
    .nav.nav--scola .drawer-toggle > summary::before {
        content: '';
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: var(--color-primary-50, #E6FAF8);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 18px 18px;
    }
    .nav.nav--scola .drawer-toggle--lang > summary::before {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300A89A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/></svg>");
    }
    .nav.nav--scola .drawer-toggle--currency > summary::before {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300A89A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='1' x2='12' y2='23'/><path d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/></svg>");
    }
    .nav.nav--scola .drawer-toggle > summary::-webkit-details-marker { display: none; }
    .nav.nav--scola .drawer-toggle .drawer-toggle-label {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--color-txt-secondary, #5F6368);
        font-weight: 600;
        /* Logical property : pousse la valeur courante vers la fin de la ligne
           (droite en LTR, gauche en RTL). Sans ça, en RTL le label flottait au
           milieu au lieu de coller à l'icône. */
        margin-inline-end: auto;
    }
    .nav.nav--scola .drawer-toggle .drawer-toggle-current {
        font-weight: 600;
        color: var(--color-secondary, #2D2A75);
    }
    .nav.nav--scola .drawer-toggle .drawer-toggle-chevron {
        color: var(--color-txt-secondary, #5F6368);
        transition: transform .25s cubic-bezier(.2,.8,.2,1);
        flex-shrink: 0;
    }
    .nav.nav--scola .drawer-toggle[open] .drawer-toggle-chevron { transform: rotate(180deg); }

    .nav.nav--scola .drawer-toggle-options {
        display: flex;
        flex-direction: column;
        border-top: 1px solid var(--color-border-scola, #E8EAED);
        padding: 4px;
        gap: 2px;
    }
    .nav.nav--scola .drawer-toggle-option {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border-radius: 8px;
        font-size: 14px;
        color: var(--color-txt-primary, #202124);
        text-decoration: none;
        background: transparent;
        border: none;
        text-align: start;
        cursor: pointer;
        font-family: inherit;
        width: 100%;
    }
    .nav.nav--scola .drawer-toggle-option:hover {
        background: var(--color-surface-tertiary, #F1F3F4);
    }
    .nav.nav--scola .drawer-toggle-option.is-active {
        background: rgba(var(--primary-rgb), .1);
        color: var(--color-primary-dark, #00A89A);
        font-weight: 600;
    }
    .nav.nav--scola .drawer-toggle-option-code {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        height: 28px;
        padding: 0 8px;
        background: var(--color-surface-tertiary, #F1F3F4);
        border-radius: 6px;
        font-weight: 700;
        font-size: 12px;
        letter-spacing: 0.04em;
        color: var(--color-txt-secondary, #5F6368);
    }
    .nav.nav--scola .drawer-toggle-option.is-active .drawer-toggle-option-code {
        background: var(--color-primary, #00C4B4);
        color: #fff;
    }
    .nav.nav--scola .drawer-toggle-option-name {
        flex: 1;
        font-size: 13px;
        color: var(--color-txt-secondary, #5F6368);
    }
    .nav.nav--scola .drawer-toggle-option.is-active .drawer-toggle-option-name {
        color: var(--color-primary-dark, #00A89A);
    }
}

/* ---------- NAV CURRENCY TOGGLE — desktop dropdown ---------- */
.nav.nav--scola .nav-currency-toggle {
    position: relative;
    flex-shrink: 0;
}
.nav.nav--scola .nav-currency-toggle > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--color-surface-tertiary, #F1F3F4);
    color: var(--color-txt-primary, #202124);
    font-size: 12px;
    font-weight: 600;
    transition: background .15s, color .15s;
}
.nav.nav--scola .nav-currency-toggle > summary::-webkit-details-marker { display: none; }
.nav.nav--scola .nav-currency-toggle > summary:hover {
    background: rgba(var(--primary-rgb), .12);
    color: var(--color-primary-dark, #00A89A);
}
.nav.nav--scola .nav-currency-toggle > summary svg {
    transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.nav.nav--scola .nav-currency-toggle[open] > summary svg { transform: rotate(180deg); }
.nav.nav--scola .nav-currency-toggle[open] > summary {
    background: rgba(var(--primary-rgb), .15);
    color: var(--color-primary-dark, #00A89A);
}

.nav.nav--scola .nav-currency-menu {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    background: var(--color-surface-primary, #FFFFFF);
    border: 1px solid var(--color-border-scola, #E8EAED);
    border-radius: 12px;
    box-shadow: 0 12px 28px -8px rgba(32, 33, 36, .15);
    padding: 4px;
    gap: 2px;
    z-index: 60;
}
.nav.nav--scola .nav-currency-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: start;
    width: 100%;
    color: var(--color-txt-primary, #202124);
}
.nav.nav--scola .nav-currency-option:hover {
    background: var(--color-surface-tertiary, #F1F3F4);
}
.nav.nav--scola .nav-currency-option.is-active {
    background: rgba(var(--primary-rgb), .1);
    color: var(--color-primary-dark, #00A89A);
    font-weight: 600;
}
.nav.nav--scola .nav-currency-option-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 24px;
    padding: 0 8px;
    background: var(--color-surface-tertiary, #F1F3F4);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-txt-secondary, #5F6368);
}
.nav.nav--scola .nav-currency-option.is-active .nav-currency-option-code {
    background: var(--color-primary, #00C4B4);
    color: #fff;
}
.nav.nav--scola .nav-currency-option-name {
    font-size: 13px;
    color: var(--color-txt-secondary, #5F6368);
}
.nav.nav--scola .nav-currency-option.is-active .nav-currency-option-name {
    color: var(--color-primary-dark, #00A89A);
}

/* Cache le toggle currency desktop en mobile (le drawer-toggle prend le relais) */
@media (max-width: 768px) {
    .nav.nav--scola .nav-currency-toggle { display: none; }
}

/* ---------- ÉCHELLE TYPO scola ----------
   Note importante : NE PAS surcharger globalement la couleur de h1/h2/h3.
   La variante hero photo a un overlay sombre + titre en blanc — un override
   global les rendrait illisibles. On cible uniquement les sections claires. */

.section-title { color: var(--color-txt-primary, #202124); }
.section-sub   { color: var(--color-txt-secondary, #5F6368); }
.muted, .text-secondary { color: var(--color-txt-secondary, #5F6368); }

/* H1 hero — split par couleur (pas italique) sur les variantes light :
   le span .ital reçoit le gradient teal scola. Sur les hero sombres
   (photo), le span est blanc — ne pas l'override, laisser style.css gérer. */
.hero--airbnb .hero-title .ital,
.hero--mesh .hero-title .ital,
.hero--floating .hero-title .ital {
    background: linear-gradient(to right, var(--color-primary, #00C4B4), var(--color-primary-dark, #00A89A));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-style: normal;
    font-weight: inherit;
    font-family: inherit;
}

/* ---------- SCROLLBAR fine en mobile drawer ---------- */
.nav.nav--scola .nav-links::-webkit-scrollbar { width: 4px; }
.nav.nav--scola .nav-links::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 2px; }

/* ============================================================
   DARK MENU — header + drawer mobile en mode sombre (2026-05-04)
   Surface ink, accents teal préservés, brand-name passé en blanc.
   Bloc placé en fin de fichier pour gagner sur les rules
   `!important` du drawer mobile défini plus haut.
   ============================================================ */

/* Header desktop : fond ink, border subtle, ombre inversée */
.nav.nav--scola,
.nav.nav--scola.scrolled {
    background: #1F2026;
    border-bottom-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* Brand : nom en blanc, suffix .ma reste teal pour pop visuel */
.nav.nav--scola .brand { color: #fff; }
.nav.nav--scola .brand-name { color: #fff; }
.nav.nav--scola .brand-slogan { color: rgba(255, 255, 255, 0.6); }

/* Liens centraux desktop */
.nav.nav--scola .nav-links > a {
    color: rgba(255, 255, 255, 0.72);
}
.nav.nav--scola .nav-links > a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* Téléphone desktop : texte blanc, icône teal préservée */
.nav.nav--scola .nav-tel { color: #fff; }
.nav.nav--scola .nav-tel:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-primary, #00C4B4);
}

/* Burger mobile : icône blanche sur fond sombre */
.nav.nav--scola .nav-burger { color: #fff; }
.nav.nav--scola .nav-burger:hover { background: rgba(255, 255, 255, 0.08); }
.nav.nav--scola .nav-close { color: #fff; }

/* Pills langue/devise dans le header desktop */
.nav.nav--scola .nav-utils .lang-pills,
.nav.nav--scola .nav-utils .currency-pills {
    background: rgba(255, 255, 255, 0.08);
}
.nav.nav--scola .nav-utils .lang-pill,
.nav.nav--scola .nav-utils .currency-pill {
    color: rgba(255, 255, 255, 0.72);
    background: transparent;
}
.nav.nav--scola .nav-utils .lang-pill:hover,
.nav.nav--scola .nav-utils .currency-pill:hover {
    color: #fff;
}
/* Active : ré-applique le gradient teal — sinon la règle .nav-utils .lang-pill
   ci-dessus écrase .lang-pill.is-active par specificity (active devenait
   transparent + texte 72% blanc → invisible sur le nav sombre). */
.nav.nav--scola .nav-utils .lang-pill.is-active,
.nav.nav--scola .nav-utils .currency-pill.is-active {
    background: linear-gradient(to right, var(--color-primary, #00C4B4), var(--color-primary-dark, #00A89A));
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

/* Currency toggle desktop (dropdown) — adapté sombre */
.nav.nav--scola .nav-currency-toggle > summary {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.nav.nav--scola .nav-currency-toggle > summary:hover {
    background: rgba(0, 196, 180, 0.18);
    color: var(--color-primary, #00C4B4);
}
.nav.nav--scola .nav-currency-toggle[open] > summary {
    background: rgba(0, 196, 180, 0.22);
    color: var(--color-primary, #00C4B4);
}

/* ---- DRAWER MOBILE en sombre (override des règles !important plus haut) ---- */
@media (max-width: 1024px) {
    .nav.nav--scola .nav-links,
    .nav.nav--scola .nav-links.open {
        background: #1F2026 !important;
        color: #fff !important;
        border-bottom-color: rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 10px 15px -3px rgba(0,0,0,.4), 0 4px 6px -4px rgba(0,0,0,.3) !important;
    }
    .nav.nav--scola .nav-links > a {
        color: rgba(255, 255, 255, 0.88) !important;
    }
    .nav.nav--scola .nav-links > a:hover {
        background: rgba(255, 255, 255, 0.06) !important;
        color: #fff !important;
    }
    .nav.nav--scola .nav-links > a:active {
        background: rgba(255, 255, 255, 0.1) !important;
    }
    /* Dividers entre items du drawer en sombre */
    .nav.nav--scola .nav-links > a + a,
    .nav.nav--scola .nav-links > a + .drawer-toggle,
    .nav.nav--scola .nav-links > .drawer-toggle + a,
    .nav.nav--scola .nav-links > .drawer-toggle + .drawer-toggle,
    .nav.nav--scola .nav-links > .drawer-card + a,
    .nav.nav--scola .nav-links > * + .drawer-card,
    .nav.nav--scola .nav-tel-mobile + .nav-admin-link,
    .nav.nav--scola .nav-links > a + .nav-tel-mobile {
        border-top-color: rgba(255, 255, 255, 0.08) !important;
    }
    /* Cercles d'icônes : tinte plus sombre pour rester visibles sur ink */
    .nav.nav--scola .nav-links > a::before {
        background-color: rgba(0, 196, 180, 0.14);
    }
    /* Chevron blanc cassé au lieu de gris foncé */
    .nav.nav--scola .nav-links > a::after {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>");
    }

    /* Drawer-card (CTA Réserver dans le drawer) */
    .nav.nav--scola .drawer-card {
        background: rgba(0, 196, 180, 0.1) !important;
        border-top-color: rgba(255, 255, 255, 0.08) !important;
        color: var(--color-primary, #00C4B4);
    }
    .nav.nav--scola .drawer-card:hover {
        background: rgba(0, 196, 180, 0.18) !important;
    }
    .nav.nav--scola .drawer-card-icon {
        background: rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.72);
    }
    .nav.nav--scola .drawer-card-icon--accent {
        background: rgba(0, 196, 180, 0.18);
        color: var(--color-primary, #00C4B4);
    }
    .nav.nav--scola .drawer-card-label {
        color: rgba(255, 255, 255, 0.5);
    }
    .nav.nav--scola .drawer-card-title {
        color: #fff;
    }
    .nav.nav--scola .drawer-card-chevron { color: rgba(255, 255, 255, 0.5); }

    /* Sections langue/devise (segmented control plein-width) */
    .nav.nav--scola .drawer-section {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.08);
    }
    .nav.nav--scola .drawer-section-label {
        color: rgba(255, 255, 255, 0.5);
    }
    .nav.nav--scola .drawer-section .lang-pill,
    .nav.nav--scola .drawer-section .currency-pill {
        background: rgba(255, 255, 255, 0.08) !important;
        color: rgba(255, 255, 255, 0.78);
    }

    /* Drawer toggle <details> langue+devise */
    .nav.nav--scola .drawer-toggle {
        border-top-color: rgba(255, 255, 255, 0.08) !important;
    }
    .nav.nav--scola .drawer-toggle > summary {
        color: #fff !important;
    }
    .nav.nav--scola .drawer-toggle > summary::before {
        background-color: rgba(0, 196, 180, 0.14);
    }
    .nav.nav--scola .drawer-toggle .drawer-toggle-label {
        color: rgba(255, 255, 255, 0.5);
    }
    .nav.nav--scola .drawer-toggle .drawer-toggle-current {
        color: var(--color-primary, #00C4B4);
    }
    .nav.nav--scola .drawer-toggle .drawer-toggle-chevron {
        color: rgba(255, 255, 255, 0.5);
    }
    .nav.nav--scola .drawer-toggle-options {
        border-top-color: rgba(255, 255, 255, 0.08);
    }
    .nav.nav--scola .drawer-toggle-option {
        color: rgba(255, 255, 255, 0.88);
    }
    .nav.nav--scola .drawer-toggle-option:hover {
        background: rgba(255, 255, 255, 0.06);
    }
    .nav.nav--scola .drawer-toggle-option.is-active {
        background: rgba(0, 196, 180, 0.16);
        color: var(--color-primary, #00C4B4);
    }
    .nav.nav--scola .drawer-toggle-option-code {
        background: rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.72);
    }
    .nav.nav--scola .drawer-toggle-option-name {
        color: rgba(255, 255, 255, 0.6);
    }
    .nav.nav--scola .drawer-toggle-option.is-active .drawer-toggle-option-name {
        color: var(--color-primary, #00C4B4);
    }
}