/* ================================================================
   MOTRO FRANCE — style.css
   Direction artistique : Ultra-épurée · Technique · Automobile
   Palette : Blanc #FFFFFF | Anthracite #111111 | Jaune #FFCC00
   Version : Hero centré immersif avec overlays sur la voiture
   ================================================================ */


/* ──────────────────────────────────────────────────────────────
   1. VARIABLES CSS GLOBALES
   ────────────────────────────────────────────────────────────── */
:root {
    --c-blanc:        #FFFFFF;
    --c-noir:         #111111;
    --c-anthracite:   #1C1C1E;
    --c-gris-bg:      #F5F5F7;
    --c-gris-clair:   #E8E8ED;
    /* #8E8E93 (systemGray d'Apple) ne donnait que 3,26:1 sur blanc : sous le
       seuil AA de 4,5:1 pour du texte courant, et cette variable sert 36 fois,
       presque toujours comme couleur de texte. #6E6E73 est le gris secondaire
       de la meme famille : 5,07:1 sur blanc, 4,66:1 sur le gris de fond. */
    --c-gris-moyen:   #6E6E73;
    --c-gris-bordure: #D1D1D6;
    --c-jaune:        #FFCC00;
    --c-jaune-sombre: #E6B800;
    --c-rouge:        #FF3B30;
    --c-vert:         #34C759;

    /* Couleurs de marque Klarna (partenaire paiement en 3x via Stripe) */
    --c-klarna-rose:  #FFB3C7;
    --c-klarna-noir:  #0B051D;

    --font-corps:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:   'Courier New', 'Roboto Mono', monospace;

    --ombre-xs: 0 1px 2px rgba(0,0,0,0.06);
    --ombre-sm: 0 1px 6px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.05);
    --ombre-md: 0 4px 24px rgba(0,0,0,0.10);
    --ombre-lg: 0 8px 40px rgba(0,0,0,0.15);
    --ombre-jaune: 0 4px 20px rgba(255, 204, 0, 0.45);

    --r-sm:   6px;
    --r-md:   10px;
    --r-lg:   16px;
    --r-xl:   24px;
    --r-full: 9999px;

    /* ── COURBES ──────────────────────────────────────────────────
       Les easings natifs du CSS sont trop faibles : ils manquent le
       punch qui rend une animation intentionnelle. Courbes fortes.
       Regle absolue : jamais d'ease-in sur de l'UI. Il demarre lent,
       donc il retarde l'instant precis ou l'oeil regarde le plus.  */
    --ease-out:     cubic-bezier(0.23, 1, 0.32, 1);      /* entrees, sorties : demarre vite */
    --ease-in-out:  cubic-bezier(0.77, 0, 0.175, 1);     /* deplacement / morphing a l'ecran */
    --ease-drawer:  cubic-bezier(0.32, 0.72, 0, 1);      /* drawers facon iOS (Ionic) */
    --ease-hover:   ease;                                 /* survol, changement de couleur */

    /* ── DUREES ───────────────────────────────────────────────────
       L'UI reste sous 300ms. Un dropdown a 180ms parait plus
       reactif qu'a 400ms — la perception de vitesse compte autant
       que la vitesse reelle.                                       */
    --dur-press:    140ms;   /* retour de pression bouton   100-160 */
    --dur-tooltip:  160ms;   /* tooltips, petits popovers   125-200 */
    --dur-menu:     200ms;   /* dropdowns, selects          150-250 */
    --dur-panel:    320ms;   /* modales, drawers            200-500 */

    /* ── ALIAS HISTORIQUES ────────────────────────────────────────
       Conserves pour ne rien casser (34 usages de --t-vite), mais
       reconstruits sur les courbes fortes.                         */
    --t-vite:   0.18s var(--ease-out);
    --t-normal: 0.24s var(--ease-out);
    --t-lente:  var(--dur-panel) var(--ease-drawer);
}


/* ──────────────────────────────────────────────────────────────
   2. RESET & BASE
   ────────────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* L'attribut `hidden` doit TOUJOURS l'emporter.
   La feuille de style du navigateur ne pose qu'un `[hidden] { display:none }`
   de faible priorité : n'importe quelle règle d'auteur portant `display:`
   (ex. `.mc-chargement { display:flex }`) le bat, si bien que `el.hidden = true`
   en JS ne masquait rien — l'écran d'attente « Vérification de votre session… »
   restait peint par-dessus le profil. Ce garde-fou vaut pour tout le site. */
[hidden] { display: none !important; }

html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-corps);
    background-color: var(--c-blanc);
    color: var(--c-noir);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img    { max-width: 100%; display: block; }
ul     { list-style: none; }
a      { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: var(--font-corps); font-size: inherit; }


/* ──────────────────────────────────────────────────────────────
   3. HEADER & NAVIGATION
   ────────────────────────────────────────────────────────────── */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: 10px 16px 0;
    background: transparent;
}

/* Nav transparent par défaut — island activé au scroll */
.nav {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 28px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    position: relative;
    border-radius: 18px;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border: 1px solid transparent;
    transition: background 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease, backdrop-filter 0.32s ease;
}

/* Island activé au scroll */
.header.scrolled .nav,
.header.menu-open .nav {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 6px 36px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);
    border-color: rgba(255,255,255,0.65);
}

.logo {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    flex-shrink: 0;
}

.logo-text {
    font-size: 21px;
    font-weight: 900;
    letter-spacing: -0.8px;
    color: var(--c-noir);
    line-height: 1;
}

.logo-accent {
    font-size: 26px;
    font-weight: 900;
    color: var(--c-jaune);
    line-height: 1;
}

/* Logo image — src géré dynamiquement par header-theme.js */
.logo-img {
    height: 34px;
    width: auto;
    display: block;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: auto;
    z-index: 1;
}

.nav-links a {
    font-size: 14px;
    font-weight: 500;
    color: var(--c-anthracite);
    transition: color var(--t-vite);
    white-space: nowrap;
}

.nav-links a:hover { color: var(--c-jaune); }

.nav-cta {
    background: var(--c-noir) !important;
    color: var(--c-blanc) !important;
    padding: 9px 22px;
    border-radius: var(--r-sm);
    font-weight: 700 !important;
    font-size: 14px;
    font-family: var(--font-corps);
    border: none;
    cursor: pointer;
    transition: background var(--t-vite) !important;
}

.nav-cta:hover  { background: var(--c-anthracite) !important; }
.nav-cta:active { background: #333333 !important; transform: scale(0.97); }

/* Bouton téléphone dans le header (remplace le bouton Contact) */
.btn-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--c-noir);
    color: var(--c-blanc);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    padding: 9px 20px;
    border-radius: 100px;
    border: none;
    transition: background 0.18s ease;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.btn-phone:hover { background: var(--c-anthracite); }

.btn-phone--dark {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.22);
    color: var(--c-blanc);
}

.btn-phone--dark:hover { background: rgba(255,255,255,0.15); }

/* Label "Mon compte" — inline avec l'icône */
.nav-user-label {
    font-size: 13px;
    font-weight: 500;
    color: inherit;
    letter-spacing: 0;
    line-height: 1;
}

@media (max-width: 900px) {
    .btn-phone span,
    .btn-phone svg { display: none; }
    .btn-phone::after { content: "Tél."; }
    .btn-phone { padding: 9px 14px; }
}

@media (max-width: 768px) {
    .nav-user-label { display: none; }
    .btn-phone::after { content: none; }
    .btn-phone { display: none; }
}

.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.nav-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--c-noir);
    border-radius: 2px;
    transition: transform 0.24s var(--ease-in-out),
                opacity 0.24s var(--ease-in-out),
                background-color 0.24s var(--ease-hover);
}

/* Animation 2 traits → X (distance centre-à-centre = gap 5px + 2px = 7px → ±3.5px) */
.nav-hamburger.is-active span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav-hamburger.is-active span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }


/* ──────────────────────────────────────────────────────────────
   MOBILE MENU — DROPDOWN DEPUIS LE HAUT
   ────────────────────────────────────────────────────────────── */
.mobile-menu-backdrop {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 8999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.mobile-menu-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 68px; left: 16px; right: 16px;
    max-height: calc(100dvh - 68px - 16px);
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 9000;
    border-radius: 0 0 18px 18px;
    /* Fermé : remonter au-dessus du viewport — rien visible derrière l'island */
    transform: translateY(calc(-100% - 68px));
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    overflow-y: auto;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.13);
    border: 1px solid rgba(255,255,255,0.65);
    border-top: none;
    -webkit-overflow-scrolling: touch;
}
.mobile-menu-overlay.open { transform: translateY(0); }

/* Desktop : island → menu connectés */
@media (min-width: 769px) {
    .header.menu-open .nav {
        border-radius: 18px 18px 0 0;
        border-bottom-color: transparent;
    }
}

/* Premier item : padding-top pour combler le raccordement visuel */
.mobile-menu-list:first-child {
    padding-top: 10px;
}

.mobile-menu-list {
    list-style: none;
    padding: 6px 0;
    margin: 0;
}
.mobile-menu-list a,
.mobile-menu-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 16px 24px;
    font-size: 17px;
    font-weight: 500;
    color: var(--c-noir);
    text-decoration: none;
    background: none;
    border: none;
    border-bottom: 1px solid var(--c-gris-clair);
    text-align: left;
    cursor: pointer;
    font-family: var(--font-corps);
    letter-spacing: -0.2px;
    transition: background 0.15s ease;
}
.mobile-menu-list a:hover,
.mobile-menu-btn:hover { background: var(--c-gris-bg); }

.mobile-menu-sep {
    border: none;
    border-top: 1px solid var(--c-gris-clair);
    margin: 4px 0;
}
.mobile-menu-list--account a {
    font-size: 15px;
    font-weight: 600;
    color: var(--c-anthracite);
}

body.mobile-nav-open { overflow: hidden; }

@media (max-width: 768px) {
    .mobile-menu-backdrop { display: block; }
    .mobile-menu-overlay  { display: block; }
}


/* ──────────────────────────────────────────────────────────────
   4. HERO IMMERSIF — Mise en page centrée (voiture au centre)
   ────────────────────────────────────────────────────────────── */
.hero-immersif {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding-top: 86px;  /* 10px header-padding + 58px nav + 18px gap */
    padding-bottom: 16px;
    background: var(--c-blanc);
    overflow: hidden;
}

/* ── Bloc texte au-dessus de la voiture ── */
.hero-top-text {
    text-align: center;
    padding: 14px 24px 4px;
    max-width: 640px;
    width: 100%;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--c-gris-bg);
    border: 1px solid var(--c-gris-bordure);
    border-radius: var(--r-full);
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-anthracite);
    letter-spacing: 0.02em;
    margin-bottom: 8px;
    user-select: none;
}

.badge-dot {
    width: 7px;
    height: 7px;
    background: var(--c-vert);
    border-radius: 50%;
    flex-shrink: 0;
    animation: battement 2.2s ease-in-out infinite;
}

@keyframes battement {
    0%, 100% { opacity: 1;   transform: scale(1);    }
    50%       { opacity: 0.5; transform: scale(0.75); }
}

.hero-title {
    font-size: clamp(22px, 3vw, 38px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -1.5px;
    color: var(--c-noir);
    margin-bottom: 6px;
}

.hero-title-accent { color: var(--c-jaune-sombre); }

.hero-subtitle {
    font-size: 13px;
    color: var(--c-gris-moyen);
    line-height: 1.5;
    max-width: 480px;
    margin: 0 auto;
}

/* Lien secondaire hero → boutique directe (UX : règle des 3 secondes) */
.hero-top-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--c-gris-moyen);
    text-decoration: none;
    transition: color var(--t-vite);
}
.hero-top-link:hover { color: var(--c-noir); }
.hero-top-link svg   { transition: transform var(--t-vite); }
.hero-top-link:hover svg { transform: translateX(3px); }


/* ──────────────────────────────────────────────────────────────
   5. SCÈNE VOITURE (car-stage & car-viewer)
   ────────────────────────────────────────────────────────────── */
.car-stage {
    width: 100%;
    max-width: 980px;
    padding: 0 24px;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Le viewer contient toutes les images + tous les overlays */
.car-viewer {
    position: relative;
    aspect-ratio: 4 / 3;
    height: 100%;        /* remplit la hauteur du car-stage */
    max-width: 100%;     /* mais ne dépasse jamais la largeur */
    overflow: visible;
}


/* ──────────────────────────────────────────────────────────────
   6. IMAGES DE LA VOITURE — Effet Motion Blur au changement de vue
   ────────────────────────────────────────────────────────────── */
.car-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;        /* l'image s'affiche entièrement */
    pointer-events: none;
    will-change: opacity, filter, transform;
    /* État caché : flou + légère mise à l'échelle → simule le "motion blur" */
    opacity:   0;
    filter:    blur(10px);
    transform: scale(1.04);
    transition:
        opacity   0.50s var(--ease-out),
        filter    0.50s var(--ease-out),
        transform 0.50s var(--ease-out);
}

/* État actif : image nette, taille normale */
.car-image.active {
    opacity:   1;
    filter:    blur(0px);
    transform: scale(1);
}


/* ──────────────────────────────────────────────────────────────
   7. BADGE "VUE ACTUELLE" — supprimé
   ────────────────────────────────────────────────────────────── */


/* ──────────────────────────────────────────────────────────────
   8. OVERLAY SAISIE — Couche mère (transparent, pointer-events: none)
   ────────────────────────────────────────────────────────────── */
.overlay-saisie {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;   /* les clics traversent sauf sur .visible */
}


/* ──────────────────────────────────────────────────────────────
   9. OVERLAY PLAQUE — Centré en CSS sur la zone plaque de l'image
   ────────────────────────────────────────────────────────────── */
.overlay-plaque {
    position: absolute;
    left: 50%;
    top: 72%;                /* PLATE_FY : 72 % depuis le haut de l'image */
    width: 20%;              /* PLATE_FW : 20 % de la largeur de l'image */
    min-width: 155px;
    transform: translateX(-50%);
    z-index: 15;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.overlay-plaque.visible {
    opacity: 1;
    pointer-events: auto;
}

/* ── Plaque d'immatriculation SIV (version compacte pour overlay) ── */
.license-plate {
    display: flex;
    align-items: stretch;
    height: 46px;           /* hauteur compacte adaptée à l'overlay */
    border-radius: 5px;
    overflow: hidden;
    border: 2.5px solid var(--c-noir);
    /* Ombre prononcée pour que la plaque se démarque bien sur le wireframe */
    box-shadow:
        0 6px 24px rgba(0,0,0,0.40),
        0 2px 8px rgba(0,0,0,0.25),
        0 0 0 1.5px rgba(0,0,0,0.15);
    cursor: text;
}

/* Bande bleue UE gauche */
.plate-eu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #003399;
    color: #FFCC00;
    padding: 3px 7px;
    flex-shrink: 0;
    gap: 1px;
    min-width: 24px;
}

.eu-stars { font-size: 7px; line-height: 1; }
.eu-code  {
    font-size: 11px;
    font-weight: 800;
    font-family: var(--font-mono);
    line-height: 1;
}

/* Champ de saisie central (fond jaune) */
.plate-input {
    flex: 1;
    border: none;
    background: #FFCC00;
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 900;
    color: var(--c-noir);
    text-align: center;
    letter-spacing: 3px;
    text-transform: uppercase;
    outline: none;
    padding: 0 4px;
    min-width: 0;
    caret-color: var(--c-noir);
    -webkit-appearance: none;
}

.plate-input::placeholder {
    color: rgba(17,17,17,0.28);
    font-size: 14px;
    letter-spacing: 1.5px;
    font-weight: 700;
}

.plate-input:focus { background: #FFD700; }

/* Bande bleue département droite */
.plate-dept {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #003399;
    padding: 3px 5px;
    gap: 2px;
    flex-shrink: 0;
    min-width: 28px;
}

.dept-select {
    background: transparent;
    border: none;
    color: #FFCC00;
    font-size: 10px;
    font-weight: 800;
    font-family: var(--font-mono);
    text-align: center;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding: 0;
}

.dept-select option { background: #003399; color: #FFCC00; }


/* ──────────────────────────────────────────────────────────────
   10. OVERLAY FLOAT PANEL — Panneau flottant pour les onglets non-plaque
       Affiché en haut du car-viewer (sur la zone moteur/châssis/profil)
   ────────────────────────────────────────────────────────────── */
.overlay-float {
    position: absolute;
    top: 6%;
    left: 50%;
    transform: translateX(-50%);
    width: min(70%, 380px);
    z-index: 15;
    pointer-events: none;

    opacity: 0;
    transform: translateX(-50%) translateY(-8px);
    transition:
        opacity   0.30s var(--ease-out),
        transform 0.30s var(--ease-out);
}

.overlay-float.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* Carte du float panel avec effet verre dépoli */
.float-panel {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1.5px solid rgba(17,17,17,0.10);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06);
}

.float-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--c-noir);
    margin-bottom: 9px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.float-input {
    display: block;
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid rgba(17,17,17,0.18);
    border-radius: 9px;
    font-size: 15px;
    color: var(--c-noir);
    background: rgba(255,255,255,0.97);
    outline: none;
    font-family: var(--font-corps);
    transition: border-color var(--t-vite), box-shadow var(--t-vite);
    -webkit-appearance: none;
}

.float-input:focus {
    border-color: var(--c-noir);
    box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.30);
}

.float-input.erreur {
    border-color: var(--c-rouge);
    animation: secousse 0.30s ease;
}

.float-hint {
    margin-top: 7px;
    font-size: 10.5px;
    color: var(--c-gris-moyen);
    line-height: 1.45;
}


/* ──────────────────────────────────────────────────────────────
   11. OVERLAY CTA — Bouton jaune "Vérifier la disponibilité"
       Centré en CSS sur le pare-choc de la voiture
   ────────────────────────────────────────────────────────────── */
.overlay-cta {
    position: absolute;
    left: 50%;
    top: 81%;                /* CTA_FY : 81 % depuis le haut de l'image */
    width: 40%;              /* CTA_FW : 40 % de la largeur de l'image */
    min-width: 220px;
    transform: translateX(-50%);
    z-index: 15;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease 0.06s;
}

.overlay-cta.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Bouton CTA jaune superposé sur la voiture */
.btn-cta-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 12px 20px;
    background: var(--c-jaune);
    color: var(--c-noir);
    border: none;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: -0.01em;
    font-family: var(--font-corps);
    /* Ombre jaune marquée pour lisibilité sur le wireframe blanc */
    box-shadow:
        0 5px 20px rgba(255, 204, 0, 0.55),
        0 2px 8px rgba(0, 0, 0, 0.20);
    transition:
        background  var(--t-vite),
        transform   var(--t-vite),
        box-shadow  var(--t-vite);
}

.btn-cta-overlay:hover {
    background: var(--c-jaune-sombre);
    transform: translateY(-2px);
    box-shadow:
        0 8px 28px rgba(255, 204, 0, 0.65),
        0 3px 10px rgba(0, 0, 0, 0.20);
}

.btn-cta-overlay:active { transform: translateY(0); }


/* ──────────────────────────────────────────────────────────────
   12. OVERLAY CONTACT — Étape 2 (fond flouté + carte de formulaire)
   ────────────────────────────────────────────────────────────── */
.overlay-contact {
    position: absolute;
    inset: 0;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.40s var(--ease-out);
}

.overlay-contact.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Carte blanche contenant le formulaire de contact */
.contact-card {
    background: var(--c-blanc);
    border: 1px solid var(--c-gris-clair);
    border-radius: var(--r-xl);
    padding: 24px 26px;
    width: min(92%, 400px);
    box-shadow: var(--ombre-lg);
    position: relative;
    animation: entreeCard 0.35s var(--ease-out);
}

@keyframes entreeCard {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* Ligne décorative jaune en haut de la carte */
.contact-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--c-jaune);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
}

/* En-tête de la carte (bouton retour + résumé) */
.contact-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.btn-back-overlay {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    color: var(--c-gris-moyen);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    font-family: var(--font-corps);
    transition: color var(--t-vite);
    flex-shrink: 0;
}

.btn-back-overlay:hover { color: var(--c-noir); }

.step2-summary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--c-gris-bg);
    border: 1px solid var(--c-gris-clair);
    border-radius: var(--r-sm);
    padding: 5px 11px;
    white-space: nowrap;
    overflow: hidden;
    max-width: 240px;
    flex-shrink: 1;
    min-width: 0;
}

.summary-key {
    font-size: 11px;
    font-weight: 700;
    color: var(--c-gris-moyen);
    flex-shrink: 0;
    letter-spacing: 0.01em;
}

.summary-val {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--c-noir);
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.5px;
}

.contact-title {
    font-size: 19px;
    font-weight: 800;
    color: var(--c-noir);
    letter-spacing: -0.4px;
    margin-bottom: 4px;
}

.contact-subtitle {
    font-size: 12.5px;
    color: var(--c-gris-moyen);
    margin-bottom: 18px;
    line-height: 1.5;
}


/* ──────────────────────────────────────────────────────────────
   13. OVERLAY SUCCÈS — Après soumission validée
   ────────────────────────────────────────────────────────────── */
.overlay-succes {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.40s var(--ease-out);
}

.overlay-succes.visible {
    opacity: 1;
    pointer-events: auto;
}

.succes-card {
    text-align: center;
    padding: 24px 20px;
    width: min(92%, 360px);
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: entreeCard 0.45s var(--ease-out);
}

.succes-icone {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.succes-titre {
    font-size: 24px;
    font-weight: 900;
    color: var(--c-noir);
    letter-spacing: -0.5px;
    margin-bottom: 10px;
}

.succes-message {
    font-size: 14px;
    color: var(--c-gris-moyen);
    line-height: 1.65;
    margin-bottom: 20px;
    max-width: 280px;
}

.succes-details {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 24px;
    text-align: left;
    width: 100%;
    max-width: 250px;
}

.succes-detail-item {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: var(--c-anthracite);
    font-weight: 500;
}

/* Animations SVG du cercle de succès */
.success-circle {
    stroke-dasharray: 160;
    stroke-dashoffset: 160;
    animation: tracerCercle 0.55s 0.10s ease forwards;
}

.success-check {
    stroke-dasharray: 36;
    stroke-dashoffset: 36;
    animation: tracerCheck 0.40s 0.55s ease forwards;
}

@keyframes tracerCercle { to { stroke-dashoffset: 0; } }
@keyframes tracerCheck  { to { stroke-dashoffset: 0; } }


/* ──────────────────────────────────────────────────────────────
   14. BARRE D'ONGLETS HORIZONTALE (sous la voiture)
       Design : segmented control en capsule arrondie
   ────────────────────────────────────────────────────────────── */
.tabs-hero {
    /* ORDRE DE PEINTURE — les images de la voiture (`.car-image`) sont en
       `position: absolute`. Or un élément positionné se peint TOUJOURS au-dessus
       d'un élément statique, quel que soit l'ordre du DOM : sur un écran large et
       peu haut, la voiture débordait donc par-dessus les onglets et le bouton,
       bien qu'ils viennent après elle dans le HTML. Passer ces blocs en
       `position: relative` les fait entrer dans la même couche, où le z-index
       tranche enfin.
       VALEUR 20, choisie et pas au hasard : `.car-viewer` est `position:
       relative` SANS z-index, il ne crée donc aucun contexte d'empilement et les
       z-index de ses overlays concurrencent directement celui-ci. Il faut donc
       passer au-dessus de la plaque et du bouton jaune (15) tout en restant sous
       les panneaux Contact (25) et Succès (30), qui recouvrent la scène entière
       et doivent le rester. */
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--c-gris-bg);
    border: 1px solid var(--c-gris-clair);
    border-radius: var(--r-full);
    padding: 4px;
    margin-top: 10px;
    width: calc(100% - 48px);
    max-width: 580px;
}

.tabs-hero .tab {
    flex: 1;
    padding: 10px 8px;
    border: none;
    background: transparent;
    border-radius: var(--r-full);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--c-gris-moyen);
    cursor: pointer;
    transition: background-color var(--dur-menu) var(--ease-hover),
                color var(--dur-menu) var(--ease-hover),
                transform var(--dur-press) var(--ease-out);
    text-align: center;
    white-space: nowrap;
    font-family: var(--font-corps);
    letter-spacing: -0.01em;
}

.tabs-hero .tab:hover:not(.active) {
    color: var(--c-anthracite);
    background: rgba(0,0,0,0.04);
}

.tabs-hero .tab.active {
    background: var(--c-noir);
    color: var(--c-blanc);
    box-shadow: 0 2px 10px rgba(0,0,0,0.22);
}


/* ──────────────────────────────────────────────────────────────
   15. BARRE DE STATISTIQUES (sous les onglets)
   ────────────────────────────────────────────────────────────── */
.hero-stats {
    position: relative;   /* même raison et même valeur que .tabs-hero ci-dessus */
    z-index: 20;
    display: flex;
    align-items: center;
    background: var(--c-gris-bg);
    border: 1px solid var(--c-gris-clair);
    border-radius: var(--r-lg);
    width: calc(100% - 48px);
    max-width: 580px;
    margin-top: 6px;
    overflow: hidden;
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    padding: 9px 12px;
    gap: 2px;
    transition: background var(--t-vite);
    cursor: default;
}

.stat:hover { background: var(--c-gris-clair); }

.stat-number {
    font-size: 18px;
    font-weight: 900;
    color: var(--c-noir);
    letter-spacing: -0.5px;
    line-height: 1;
}

.stat-label {
    font-size: 10.5px;
    color: var(--c-gris-moyen);
    text-align: center;
    font-weight: 500;
    line-height: 1.3;
}

.stat-divider {
    width: 1px;
    height: 36px;
    background: var(--c-gris-clair);
    flex-shrink: 0;
}


/* ──────────────────────────────────────────────────────────────
   16. CHAMPS DE FORMULAIRE (dans la carte contact)
   ────────────────────────────────────────────────────────────── */
.field-group { margin-bottom: 12px; }

.field-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--c-anthracite);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}

.required { color: var(--c-rouge); margin-left: 2px; }
.optional  { color: var(--c-gris-moyen); font-weight: 400; font-size: 11px; }

.field-input {
    display: block;
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--c-gris-bordure);
    border-radius: var(--r-md);
    font-size: 14px;
    color: var(--c-noir);
    background: var(--c-blanc);
    transition: border-color var(--t-vite), box-shadow var(--t-vite);
    outline: none;
    resize: none;
    -webkit-appearance: none;
    font-family: var(--font-corps);
}

.field-input:focus {
    border-color: var(--c-noir);
    box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.25);
}

.field-input::placeholder {
    color: var(--c-gris-moyen);
    font-size: 13px;
}

.field-input.erreur {
    border-color: var(--c-rouge);
    animation: secousse 0.30s ease;
}

.field-textarea {
    min-height: 60px;
    resize: vertical;
    line-height: 1.5;
}

@keyframes secousse {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-5px); }
    60%       { transform: translateX(5px); }
    80%       { transform: translateX(-3px); }
}


/* ──────────────────────────────────────────────────────────────
   17. BOUTONS GÉNÉRIQUES
   ────────────────────────────────────────────────────────────── */

/* Bouton Noir → Jaune au survol (CTA final) */
.btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 22px;
    margin-top: 14px;
    background: var(--c-noir);
    color: var(--c-blanc);
    border: none;
    border-radius: var(--r-md);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--t-vite), color var(--t-vite), transform var(--t-vite), box-shadow var(--t-vite);
    letter-spacing: -0.01em;
    font-family: var(--font-corps);
    -webkit-appearance: none;
}

.btn-secondary:hover {
    background: var(--c-jaune);
    color: var(--c-noir);
    transform: translateY(-2px);
    box-shadow: var(--ombre-jaune);
}

.btn-secondary:active { transform: translateY(0); }

/* Bouton fantôme */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    border: 1.5px solid var(--c-gris-bordure);
    color: var(--c-anthracite);
    padding: 11px 24px;
    border-radius: var(--r-md);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--dur-menu) var(--ease-hover),
                border-color var(--dur-menu) var(--ease-hover),
                color var(--dur-menu) var(--ease-hover),
                transform var(--dur-press) var(--ease-out);
    margin-top: 4px;
    font-family: var(--font-corps);
}

.btn-ghost:hover {
    border-color: var(--c-noir);
    color: var(--c-noir);
    background: var(--c-gris-bg);
}

/* Icône dans les boutons */
.btn-icon { width: 16px; height: 16px; flex-shrink: 0; }

/* État de chargement (spinner) */
.btn-secondary.loading {
    pointer-events: none;
    opacity: 0.75;
    position: relative;
}

.btn-secondary.loading .btn-text { visibility: hidden; }

.btn-secondary.loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px;
    height: 18px;
    border: 2.5px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: tourner 0.6s linear infinite;
}

@keyframes tourner { to { transform: rotate(360deg); } }

/* Mention sécurité / confidentialité */
.form-security {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 10.5px;
    color: var(--c-gris-moyen);
    text-align: center;
    line-height: 1.4;
}

.form-security svg { flex-shrink: 0; }


/* ──────────────────────────────────────────────────────────────
   18. TOAST — Notifications temporaires
   ────────────────────────────────────────────────────────────── */
#toastContainer {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--c-anthracite);
    color: var(--c-blanc);
    padding: 13px 18px;
    border-radius: var(--r-md);
    font-size: 13px;
    font-weight: 500;
    box-shadow: var(--ombre-lg);
    min-width: 240px;
    max-width: 340px;
    pointer-events: auto;
    transform: translateY(20px) scale(0.97);
    opacity: 0;
    transition: transform 0.28s var(--ease-out),
                opacity 0.28s var(--ease-out);
}

.toast.visible {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.toast.erreur  { border-left: 3px solid var(--c-rouge); }
.toast.succes  { border-left: 3px solid var(--c-vert);  }
.toast svg { flex-shrink: 0; }


/* ──────────────────────────────────────────────────────────────
   19. RESPONSIVE — Tablettes (max 768px)
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .nav { padding: 0 24px; }
    .nav-links { display: none; }
    .nav-actions { display: none; }
    .nav-hamburger { display: flex; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); }
    /* Logo centré au milieu de l'écran sur mobile */
    .logo { position: absolute; left: 50%; transform: translateX(-50%); }

    .hero-top-text { padding: 32px 20px 8px; }
    .hero-title { font-size: clamp(28px, 6vw, 40px); letter-spacing: -1px; }

    .car-stage { padding: 0 16px; }

    .tabs-hero {
        width: calc(100% - 32px);
        gap: 3px;
        padding: 3px;
    }

    .tabs-hero .tab {
        font-size: 11px;
        padding: 9px 5px;
    }

    .hero-stats {
        width: calc(100% - 32px);
    }

    .stat-number { font-size: 16px; }

    /* Panel flottant plus large sur tablette */
    .overlay-float {
        width: min(85%, 380px);
    }

    /* Contact card légèrement plus haute */
    .contact-card {
        padding: 20px;
    }
}


/* ──────────────────────────────────────────────────────────────
   20. RESPONSIVE — Mobiles (max 480px)
   ────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .nav { padding: 0 16px; }

    .hero-top-text { padding: 28px 16px 6px; }
    .hero-subtitle { font-size: 14px; }

    .car-stage { padding: 0 12px; }

    /* Sur très petits écrans, les onglets passent en 2 lignes */
    .tabs-hero {
        flex-wrap: wrap;
        border-radius: 16px;
        width: calc(100% - 24px);
    }

    .tabs-hero .tab {
        flex: 1 1 calc(50% - 4px);
        font-size: 11px;
        padding: 9px 4px;
    }

    .tabs-hero .tab.active {
        border-radius: 12px;
    }

    .hero-stats { width: calc(100% - 24px); }

    /* Float panel pleine largeur */
    .overlay-float {
        width: 88%;
    }

    .float-panel { padding: 14px 16px; }

    .btn-cta-overlay {
        font-size: 12px;
        padding: 11px 14px;
    }

    #toastContainer {
        bottom: 16px;
        right: 12px;
        left: 12px;
    }

    .toast { min-width: unset; max-width: 100%; }
}


/* ──────────────────────────────────────────────────────────────
   21. ACTIONS DE NAVIGATION (Contact + Icône compte)
   ────────────────────────────────────────────────────────────── */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.nav-user-btn {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 15px;
    border-radius: 8px;
    border: 1px solid #EAEAEA;
    background: #F4F4F4;
    color: var(--c-anthracite);
    text-decoration: none;
    cursor: pointer;
    font-weight: 500;
    font-size: 13px;
    transition: border-color var(--t-vite), background var(--t-vite);
    flex-shrink: 0;
    white-space: nowrap;
}

.nav-user-btn:hover {
    border-color: #CCCCCC;
    background: #EBEBEB;
}

@media (max-width: 768px) {
    .nav-actions { gap: 8px; }
    .nav-cta { padding: 8px 16px !important; }
}


/* ──────────────────────────────────────────────────────────────
   22. DRAWER BACKDROP
   ────────────────────────────────────────────────────────────── */
.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(17, 17, 17, 0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.drawer-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}


/* ──────────────────────────────────────────────────────────────
   23. PANNEAU DE CONTACT COULISSANT
   ────────────────────────────────────────────────────────────── */
.contact-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(480px, 100vw);
    height: 100vh;
    height: 100dvh;
    background: var(--c-blanc);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.38s var(--ease-drawer);
    box-shadow: -4px 0 40px rgba(0, 0, 0, 0.13), -1px 0 0 var(--c-gris-clair);
    overflow: hidden;
}

.contact-drawer.open {
    transform: translateX(0);
}

/* En-tête fixe (aligné avec le header) */
.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    height: 66px;
    border-bottom: 1px solid var(--c-gris-clair);
    flex-shrink: 0;
    background: var(--c-blanc);
}

/* Bouton fermer (×) */
.drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--c-gris-bg);
    color: var(--c-anthracite);
    cursor: pointer;
    transition: background var(--t-vite), color var(--t-vite);
    flex-shrink: 0;
}

.drawer-close:hover {
    background: var(--c-gris-clair);
    color: var(--c-noir);
}

/* Corps défilable */
.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 28px;
    scrollbar-width: thin;
    scrollbar-color: var(--c-gris-clair) transparent;
}

.drawer-body::-webkit-scrollbar { width: 4px; }
.drawer-body::-webkit-scrollbar-track { background: transparent; }
.drawer-body::-webkit-scrollbar-thumb {
    background: var(--c-gris-clair);
    border-radius: 2px;
}

.drawer-title {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.5px;
    color: var(--c-noir);
    margin-bottom: 6px;
}

.drawer-desc {
    font-size: 13px;
    color: var(--c-gris-moyen);
    line-height: 1.55;
    margin-bottom: 24px;
}

/* Ligne Nom / Prénom côte à côte */
.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Pied fixe (bouton + mention sécurité) */
.drawer-footer {
    padding: 16px 28px 22px;
    border-top: 1px solid var(--c-gris-clair);
    flex-shrink: 0;
    background: var(--c-blanc);
}

/* Bouton de soumission du drawer */
.btn-drawer-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 24px;
    background: var(--c-noir);
    color: var(--c-blanc);
    border: none;
    border-radius: var(--r-md);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-family: var(--font-corps);
    cursor: pointer;
    transition: background var(--t-vite), transform var(--t-vite), box-shadow var(--t-vite);
    -webkit-appearance: none;
}

.btn-drawer-submit:hover {
    background: var(--c-anthracite);
    transform: translateY(-1px);
    box-shadow: var(--ombre-md);
}

.btn-drawer-submit:active { transform: translateY(0); }

/* Bouton désactivé tant que CGV non cochées */
.btn-drawer-submit:disabled,
.btn-secondary:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: auto;
    transform: none !important;
    box-shadow: none !important;
    background: var(--c-gris-clair) !important;
    color: var(--c-gris-moyen) !important;
}

/* Checkbox CGV — acceptation obligatoire avant soumission */
.cgv-accept {
    margin-bottom: 14px;
}
.cgv-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.55;
    color: var(--c-gris-moyen);
}
.cgv-checkbox {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    accent-color: var(--c-jaune);
    cursor: pointer;
}
.cgv-label a {
    color: var(--c-jaune);
    text-decoration: underline;
    font-weight: 600;
}
.cgv-label a:hover { color: var(--c-anthracite); }

.btn-drawer-submit.loading {
    pointer-events: none;
    opacity: 0.75;
    position: relative;
}

.btn-drawer-submit.loading .btn-text { visibility: hidden; }

.btn-drawer-submit.loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px;
    height: 18px;
    border: 2.5px solid transparent;
    border-top-color: var(--c-blanc);
    border-radius: 50%;
    animation: tourner 0.6s linear infinite;
}

/* Menu déroulant — chevron SVG inline */
.field-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-color: var(--c-blanc);
    padding-right: 38px;
    cursor: pointer;
}

.field-select:focus {
    border-color: var(--c-noir);
    box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.25);
}

/* Responsive drawer */
@media (max-width: 480px) {
    .contact-drawer { width: 100vw; }
    .drawer-header,
    .drawer-footer  { padding-left: 20px; padding-right: 20px; }
    .drawer-body    { padding: 20px; }
    .field-row      { grid-template-columns: 1fr; }
}


/* ================================================================
   CONTENEUR COMMUN AUX NOUVELLES SECTIONS
   ================================================================ */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 48px;
}

@media (max-width: 768px) { .container { padding: 0 24px; } }
@media (max-width: 480px) { .container { padding: 0 16px; } }


/* ================================================================
   SECTION 1 — CARROUSEL DES MARQUES (fond jaune)
   ================================================================ */
.section-marques {
    background: var(--c-jaune);
    padding: 52px 0 48px;
    overflow: hidden;
}

.marques-titre {
    font-size: clamp(18px, 2.2vw, 26px);
    font-weight: 800;
    letter-spacing: -0.3px;
    text-transform: none;
    color: var(--c-noir); /* WCAG: #111 sur #FFCC00 = 10.2:1 — passage du blanc (ratio 1.06:1, fail) au noir */
    text-align: center;
    margin-bottom: 36px;
}

/* Bande de défilement infini */
.carrousel-outer {
    overflow: hidden;
    /* Masques de fondu sur les bords */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    mask-image:         linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

/* Carrousel tactile sur mobile : scroll manuel au pouce */
@media (max-width: 768px) {
    .carrousel-outer {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -webkit-mask-image: none;
        mask-image: none;
        scrollbar-width: none;
        cursor: grab;
    }
    .carrousel-outer::-webkit-scrollbar { display: none; }
    .carrousel-track {
        animation: none;
        width: max-content;
    }
}

.carrousel-track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 0;
    animation: defilement-marques 36s linear infinite;
}

.carrousel-track:hover {
    animation-play-state: paused;
}

@keyframes defilement-marques {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Item de marque */
.brand-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 36px;
    flex-shrink: 0;
    /* Séparateur vertical entre marques */
    border-right: 1px solid rgba(17, 17, 17, 0.12);
    filter: grayscale(100%) opacity(0.45);
    transition: filter 0.3s ease, transform 0.3s ease;
}

.brand-item:hover {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.15);
}

.brand-logo {
    height: 36px;
    width: auto;
    max-width: 120px;
    display: block;
    object-fit: contain;
}

/* Lien cliquable autour du logo de marque */
.brand-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    width: 100%;
    height: 100%;
    outline: none;
}

.brand-link:focus-visible {
    outline: 2px solid var(--c-jaune);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Pulse jaune sur le select de filtre quand activé par URL */
.filtre-select--highlight {
    animation: filtreHighlight 1.4s ease forwards;
}

@keyframes filtreHighlight {
    0%   { box-shadow: 0 0 0 0 rgba(255,204,0,0.6); border-color: var(--c-jaune); }
    50%  { box-shadow: 0 0 0 6px rgba(255,204,0,0.18); border-color: var(--c-jaune); }
    100% { box-shadow: 0 0 0 0 transparent; border-color: rgba(255,204,0,0.4); }
}


/* ================================================================
   SECTION PARCOURS CLIENT — DU DEVIS A LA POSE
   ================================================================ */
.section-parcours {
    background: var(--c-blanc);
    padding: 92px 0 96px;
    border-bottom: 1px solid var(--c-gris-clair);
}

.parcours-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.40fr) minmax(0, 0.60fr);
    gap: 72px;
    align-items: start;
}

.parcours-intro {
    position: sticky;
    top: 104px;
}

.parcours-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #55555b;
}

.parcours-kicker::before {
    content: "";
    width: 28px;
    height: 3px;
    background: var(--c-jaune);
    border-radius: var(--r-full);
}

.parcours-titre {
    max-width: 11ch;
    margin: 0;
    font-size: clamp(34px, 4.8vw, 58px);
    font-weight: 900;
    letter-spacing: -1.4px;
    line-height: 0.98;
    color: var(--c-noir);
}

.parcours-texte-intro {
    max-width: 34ch;
    margin-top: 24px;
    color: #55555b;
    font-size: 15px;
    line-height: 1.75;
}

.parcours-action {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    color: var(--c-noir);
    font-size: 14px;
    font-weight: 800;
    text-decoration: underline;
    text-decoration-color: var(--c-jaune);
    text-decoration-thickness: 3px;
    text-underline-offset: 5px;
    transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

.parcours-action svg {
    flex-shrink: 0;
    transition: transform 0.18s cubic-bezier(0.23, 1, 0.32, 1);
}

.parcours-demo {
    position: relative;
}

.parcours-browser {
    overflow: hidden;
    border: 1px solid rgba(17, 17, 17, 0.10);
    border-radius: 10px;
    background: var(--c-blanc);
    box-shadow: 0 18px 45px rgba(17, 17, 17, 0.11);
    transform: translateZ(0);
    backface-visibility: hidden;
    contain: paint;
    animation: parcoursWindow 8s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

.parcours-browser-top {
    display: grid;
    grid-template-columns: 10px 10px 10px 1fr;
    gap: 7px;
    align-items: center;
    height: 42px;
    padding: 0 14px;
    background: var(--c-noir);
    color: rgba(255,255,255,0.62);
}

.parcours-browser-top span {
    width: 10px;
    height: 10px;
    border-radius: var(--r-full);
    background: rgba(255,255,255,0.28);
}

.parcours-browser-top strong {
    justify-self: center;
    margin-left: -51px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,0.72);
}

.parcours-screen {
    position: relative;
    min-height: 468px;
    padding: 24px;
    background: #F5F5F7;
}

.parcours-form-card,
.parcours-engine-card,
.parcours-status,
.parcours-garage-card,
.parcours-review-card {
    border: 1px solid rgba(17, 17, 17, 0.10);
    border-radius: 8px;
    background: var(--c-blanc);
    box-shadow: 0 8px 22px rgba(17, 17, 17, 0.08);
}

.parcours-form-card {
    width: min(330px, 62%);
    padding: 18px;
    animation: parcoursActive 12s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}

.parcours-form-label,
.parcours-card-label,
.parcours-status span {
    display: block;
    margin-bottom: 7px;
    color: #55555b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.parcours-input {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--c-gris-bordure);
    border-radius: 7px;
    background: #FAFAFA;
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.parcours-typing {
    display: inline-block;
    white-space: nowrap;
    clip-path: inset(0 100% 0 0);
    animation: parcoursType 12s linear infinite;
}

.parcours-cursor {
    width: 2px;
    height: 20px;
    background: var(--c-jaune);
    animation: parcoursCursor 0.9s linear infinite;
}

.parcours-fields {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.parcours-fields span {
    display: block;
    height: 28px;
    padding: 6px 10px;
    border-radius: 6px;
    background: #F5F5F7;
    color: #55555b;
    font-size: 12px;
    font-weight: 700;
    opacity: 0;
    transform: translateY(8px);
    animation: parcoursFieldIn 12s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}

.parcours-fields span:nth-child(2) { animation-name: parcoursFieldInB; }
.parcours-fields span:nth-child(3) { animation-name: parcoursFieldInC; }

.parcours-engine-card {
    position: absolute;
    top: 90px;
    right: 24px;
    width: 248px;
    display: grid;
    grid-template-columns: 62px 1fr auto;
    gap: 13px;
    align-items: center;
    padding: 15px;
    opacity: 0;
    transform: translateY(18px) scale(0.97);
    animation: parcoursEngineIn 12s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}

.parcours-engine-visual {
    position: relative;
    height: 52px;
    border-radius: 7px;
    background: var(--c-noir);
    overflow: hidden;
}

.parcours-engine-block {
    position: absolute;
    left: 14px;
    top: 16px;
    width: 34px;
    height: 18px;
    border: 2px solid var(--c-jaune);
    border-radius: 4px;
}

.parcours-engine-line {
    position: absolute;
    height: 2px;
    background: var(--c-jaune);
    opacity: 0.8;
}

.parcours-engine-line--a { left: 10px; top: 11px; width: 19px; }
.parcours-engine-line--b { right: 9px; top: 25px; width: 12px; }
.parcours-engine-line--c { left: 20px; bottom: 10px; width: 28px; }

.parcours-engine-card strong,
.parcours-garage-card strong,
.parcours-review-card strong,
.parcours-status strong {
    display: block;
    color: var(--c-noir);
    font-size: 15px;
    font-weight: 900;
    letter-spacing: -0.2px;
    line-height: 1.18;
}

.parcours-engine-card small,
.parcours-garage-card small {
    display: block;
    margin-top: 4px;
    color: #55555b;
    font-size: 12px;
    font-weight: 600;
}

.parcours-score {
    align-self: start;
    padding: 5px 7px;
    border-radius: 6px;
    background: var(--c-jaune);
    color: var(--c-noir);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 900;
}

.parcours-status-stack {
    position: absolute;
    top: 216px;
    left: 24px;
    right: 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.parcours-status {
    min-height: 94px;
    padding: 15px;
    opacity: 0;
    transform: scale(0.97);
    animation: parcoursCardIn 12s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}

.parcours-status--devis { animation-name: parcoursDevisIn; }
.parcours-status--call  { animation-name: parcoursCallIn; }
.parcours-status--pay   { animation-name: parcoursPayIn; }

.parcours-bottom-row {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 172px;
    gap: 12px;
}

.parcours-garage-card,
.parcours-review-card {
    min-height: 96px;
    padding: 16px;
    opacity: 0;
    transform: translateY(18px) scale(0.97);
    animation: parcoursCardIn 12s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}

.parcours-garage-card { animation-name: parcoursGarageIn; }
.parcours-review-card { animation-name: parcoursReviewIn; }

.parcours-stars {
    display: block;
    margin-bottom: 9px;
    color: var(--c-jaune);
    font-size: 18px;
    letter-spacing: 1px;
}

.parcours-legend {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--c-gris-clair);
    border-bottom: 1px solid var(--c-gris-clair);
}

.parcours-legend li {
    min-width: 0;
    padding: 14px 12px;
    border-left: 1px solid var(--c-gris-clair);
    color: #55555b;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.parcours-legend li:first-child {
    border-left: 0;
}

.parcours-legend span {
    display: block;
    margin-bottom: 5px;
    color: var(--c-noir);
    font-family: var(--font-mono);
    font-weight: 900;
}

.parcours-legend a {
    color: var(--c-noir);
    font-weight: 900;
    text-decoration: underline;
    text-decoration-color: var(--c-jaune);
    text-underline-offset: 3px;
}

@keyframes parcoursWindow {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

@keyframes parcoursType {
    0%, 4%    { clip-path: inset(0 100% 0 0); }
    16%, 92%  { clip-path: inset(0 0 0 0); }
    100%      { clip-path: inset(0 100% 0 0); }
}

@keyframes parcoursCursor {
    0%, 45%  { opacity: 1; }
    46%, 100% { opacity: 0; }
}

@keyframes parcoursFieldIn {
    0%, 13%   { opacity: 0; transform: translateY(8px); }
    18%, 92%  { opacity: 1; transform: translateY(0); }
    100%      { opacity: 0; transform: translateY(-8px); }
}

@keyframes parcoursFieldInB {
    0%, 15%   { opacity: 0; transform: translateY(8px); }
    20%, 92%  { opacity: 1; transform: translateY(0); }
    100%      { opacity: 0; transform: translateY(-8px); }
}

@keyframes parcoursFieldInC {
    0%, 17%   { opacity: 0; transform: translateY(8px); }
    22%, 92%  { opacity: 1; transform: translateY(0); }
    100%      { opacity: 0; transform: translateY(-8px); }
}

@keyframes parcoursEngineIn {
    0%, 22%   { opacity: 0; transform: translateY(18px) scale(0.97); }
    28%, 92%  { opacity: 1; transform: translateY(0) scale(1); }
    100%      { opacity: 0; transform: translateY(-10px) scale(0.98); }
}

@keyframes parcoursDevisIn {
    0%, 34%   { opacity: 0; transform: translateY(18px) scale(0.97); }
    40%, 92%  { opacity: 1; transform: translateY(0) scale(1); }
    100%      { opacity: 0; transform: translateY(-10px) scale(0.98); }
}

@keyframes parcoursCallIn {
    0%, 43%   { opacity: 0; transform: translateY(18px) scale(0.97); }
    49%, 92%  { opacity: 1; transform: translateY(0) scale(1); }
    100%      { opacity: 0; transform: translateY(-10px) scale(0.98); }
}

@keyframes parcoursPayIn {
    0%, 52%   { opacity: 0; transform: translateY(18px) scale(0.97); }
    58%, 92%  { opacity: 1; transform: translateY(0) scale(1); }
    100%      { opacity: 0; transform: translateY(-10px) scale(0.98); }
}

@keyframes parcoursGarageIn {
    0%, 64%   { opacity: 0; transform: translateY(18px) scale(0.97); }
    70%, 92%  { opacity: 1; transform: translateY(0) scale(1); }
    100%      { opacity: 0; transform: translateY(-10px) scale(0.98); }
}

@keyframes parcoursReviewIn {
    0%, 76%   { opacity: 0; transform: translateY(18px) scale(0.97); }
    82%, 92%  { opacity: 1; transform: translateY(0) scale(1); }
    100%      { opacity: 0; transform: translateY(-10px) scale(0.98); }
}

@keyframes parcoursActive {
    0%, 22%, 100% { box-shadow: 0 8px 22px rgba(17, 17, 17, 0.08); transform: translateY(0); }
    8%, 18%       { box-shadow: 0 12px 28px rgba(17, 17, 17, 0.12); transform: translateY(-2px); }
}

@media (hover: hover) and (pointer: fine) {
    .parcours-action:hover {
        color: var(--c-jaune-sombre);
        text-decoration-color: var(--c-jaune-sombre);
    }

    .parcours-action:hover svg {
        transform: translateX(4px);
    }
}

@media (max-width: 900px) {
    .section-parcours {
        padding: 72px 0;
    }

    .parcours-layout {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .parcours-intro {
        position: static;
    }

    .parcours-titre,
    .parcours-texte-intro {
        max-width: 100%;
    }

    .parcours-browser {
        max-width: 680px;
        margin: 0 auto;
    }
}

@media (max-width: 600px) {
    .section-parcours {
        padding: 58px 0 62px;
    }

    .parcours-browser-top strong {
        justify-self: end;
        margin-left: 0;
        font-size: 11px;
    }

    .parcours-screen {
        min-height: 620px;
        padding: 16px;
    }

    .parcours-form-card,
    .parcours-engine-card,
    .parcours-status-stack,
    .parcours-bottom-row {
        position: static;
        width: auto;
    }

    .parcours-screen {
        display: grid;
        gap: 12px;
    }

    .parcours-engine-card {
        grid-template-columns: 56px 1fr auto;
        padding: 13px;
    }

    .parcours-status-stack,
    .parcours-bottom-row,
    .parcours-legend {
        grid-template-columns: 1fr;
    }

    .parcours-status,
    .parcours-garage-card,
    .parcours-review-card {
        min-height: 82px;
    }

    .parcours-legend li {
        border-left: 0;
        border-top: 1px solid var(--c-gris-clair);
    }

    .parcours-legend li:first-child {
        border-top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .parcours-browser,
    .parcours-form-card,
    .parcours-typing,
    .parcours-cursor,
    .parcours-fields span,
    .parcours-engine-card,
    .parcours-status,
    .parcours-garage-card,
    .parcours-review-card {
        animation: none;
        opacity: 1;
        transform: none;
        clip-path: none;
    }

    .parcours-action svg {
        transition: none;
    }
}


/* ================================================================
   SECTION VEDETTE — NOS DERNIERS MOTEURS EN STOCK
   ================================================================ */
.section-vedette {
    background: var(--c-gris-bg);
    padding: 96px 0;
    border-top: 1px solid var(--c-gris-clair);
    border-bottom: 1px solid var(--c-gris-clair);
}

.vedette-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-gris-moyen);
    margin-bottom: 14px;
}

.vedette-grille {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 48px;
}

/* ── Carte produit ── */
/* Squelette de chargement des moteurs en vedette.
   La grille est alimentee depuis Firestore (js/vedette.js) : ces trois cartes
   grises tiennent la place le temps de la reponse, pour que le contenu qui
   suit ne remonte pas d'un bloc quand les vraies annonces arrivent. */
.vedette-skeleton {
    min-height: 320px;
    border-radius: 16px;
    background: linear-gradient(100deg,
        var(--c-gris-bg, #F5F5F7) 30%,
        rgba(255,255,255,0.75) 50%,
        var(--c-gris-bg, #F5F5F7) 70%);
    background-size: 220% 100%;
    animation: vedetteSquelette 1.25s linear infinite;
    pointer-events: none;
}
@keyframes vedetteSquelette {
    from { background-position: 120% 0; }
    to   { background-position: -20% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .vedette-skeleton { animation: none; }
}

.vedette-card {
    background: var(--c-blanc);
    border: 1px solid var(--c-gris-clair);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--ombre-xs);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.vedette-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--ombre-lg);
    border-color: rgba(255,204,0,0.30);
}

/* Zone image */
.vedette-card-image {
    position: relative;
    height: 180px;
    background: #E8E8ED;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.vedette-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 24px;
}

.vedette-carburant-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    border-radius: 100px;
}

.vedette-carburant-diesel {
    background: rgba(17, 17, 17, 0.09);
    color: var(--c-noir);
}

.vedette-carburant-essence {
    background: rgba(255, 59, 48, 0.10);
    color: #b91c1c;
}

/* Corps de la carte */
.vedette-card-corps {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
}

.vedette-code-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-jaune);
    background: var(--c-noir);
    padding: 3px 8px;
    border-radius: 5px;
    width: fit-content;
}

.vedette-titre {
    font-size: 16px;
    font-weight: 700;
    color: var(--c-noir);
    line-height: 1.3;
    margin: 0;
}

.vedette-cylindree {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--c-gris-moyen);
    margin-top: 3px;
}

/* Specs */
.vedette-specs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.vedette-spec {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--c-gris-moyen);
}

.vedette-spec-garantie {
    color: var(--c-vert);
    font-weight: 600;
}

.vedette-spec-garantie svg {
    stroke: var(--c-vert);
}

/* Prix */
.vedette-prix-zone {
    border-top: 1px solid var(--c-gris-clair);
    padding-top: 14px;
}

.vedette-prix {
    font-size: 26px;
    font-weight: 800;
    color: var(--c-noir);
    letter-spacing: -0.03em;
    line-height: 1;
}

.vedette-prix-mention {
    font-size: 11px;
    color: var(--c-gris-moyen);
    margin-top: 4px;
}

/* Bouton jaune "Voir le moteur" */
.btn-voir-moteur {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--c-jaune);
    color: var(--c-noir);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    padding: 12px 16px;
    border-radius: 8px;
    transition: background 0.18s ease, transform 0.15s ease;
    margin-top: auto;
}

.btn-voir-moteur:hover {
    background: var(--c-jaune-sombre);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(255,204,0,0.30);
}

.btn-voir-moteur:active {
    transform: translateY(0);
    box-shadow: none;
}

/* CTA "Voir tout le stock" */
.vedette-footer {
    margin-top: 52px;
    text-align: center;
}

.btn-vedette-stock {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--c-noir);
    background: var(--c-blanc);
    border: 1.5px solid var(--c-gris-bordure);
    border-radius: 100px;
    padding: 14px 30px;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.btn-vedette-stock:hover {
    border-color: var(--c-noir);
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

@media (max-width: 1100px) {
    .vedette-grille { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media (max-width: 600px) {
    .section-vedette { padding: 64px 0; }
    .vedette-grille  { grid-template-columns: 1fr; }
}


/* ================================================================
   SECTION 2 — POURQUOI NOUS CHOISIR
   ================================================================ */
.section-entete {
    text-align: center;
    margin-bottom: 60px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.section-titre {
    font-size: clamp(26px, 3.5vw, 40px);
    font-weight: 900;
    letter-spacing: -1px;
    color: var(--c-noir);
    line-height: 1.1;
    margin-bottom: 14px;
}

.section-sous-titre {
    font-size: 15px;
    /* #8E8E93 sur blanc plafonne à 3,1:1 — sous le seuil AA (4,5:1).
       #55555b atteint 7,1:1 sans durcir le gris à l'œil. */
    color: #55555b;
    line-height: 1.7;
}

/* ──────────────────────────────────────────────────────────────
   SECTION « LES FAITS » (remplace l'ancienne grille de 4 cartes)
   ──────────────────────────────────────────────────────────────
   Aucune carte, aucune boîte, aucune icône décorative : quatre
   énoncés alignés sur une ligne pleine largeur, séparés par des
   filets d'un pixel. Le chiffre porte le poids typographique, le
   libellé situe, la preuve rassure. Rien ne bouge au survol : ce
   n'est pas un bouton, c'est une information.
   ────────────────────────────────────────────────────────────── */
.section-faits {
    padding: 96px 0;
    background: var(--c-blanc);
    border-top: 1px solid var(--c-gris-clair);
}

.faits-titre {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 900;
    letter-spacing: -1px;
    line-height: 1.12;
    color: var(--c-noir);
    max-width: 20ch;
    margin-bottom: 52px;
}

.faits-liste {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    list-style: none;
}

.fait {
    padding: 4px 32px 4px 28px;
    border-left: 1px solid var(--c-gris-clair);
}
.fait:first-child { border-left: 0; padding-left: 0; }

.fait-valeur {
    display: block;
    font-size: clamp(26px, 3.2vw, 36px);
    font-weight: 900;
    letter-spacing: -1.2px;
    line-height: 1.05;
    color: var(--c-noir);
    margin-bottom: 14px;
}

/* Le trait jaune est le SEUL accent de couleur de la section :
   il souligne le libellé, il ne colore pas un fond. */
.fait-libelle {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--c-noir);
    margin-bottom: 8px;
}
.fait-libelle::before {
    content: '';
    display: block;
    width: 26px;
    height: 3px;
    background: var(--c-jaune);
    margin-bottom: 12px;
}

.fait-preuve {
    display: block;
    font-size: 13px;
    line-height: 1.6;
    color: #55555b;
    max-width: 30ch;
}
.fait-preuve a {
    color: var(--c-noir);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--c-jaune);
    text-decoration-thickness: 2px;
}
.fait-preuve a:hover { background: rgba(255, 204, 0, 0.20); }

@media (max-width: 900px) {
    .faits-liste { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
    .fait:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 560px) {
    .section-faits { padding: 64px 0; }
    .faits-titre   { margin-bottom: 36px; }
    .faits-liste   { grid-template-columns: 1fr; row-gap: 32px; }
    .fait          { border-left: 0; padding-left: 0; padding-right: 0; }
    .fait-preuve   { max-width: none; }
}


/* ================================================================
   SECTION 3 — BLOC GARANTIE PREMIUM
   ================================================================ */
.section-garantie {
    background: #080808;
    padding: 140px 0;
    position: relative;
    overflow: hidden;

    /* PERF — Même isolation que .section-klarna : couche de composition GPU
       dédiée + repeints confinés. Les dégradés décoratifs qui la rendaient
       coûteuse (deux pseudo-éléments radiaux pleine hauteur, un halo de 560 px,
       une carte vitrée) ont depuis été retirés — cf. refonte éditoriale. */
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    contain: paint;
}

/* Les deux halos dorés en dégradé radial (::before) et la vignette sombre
   (::after) ont été RETIRÉS : c'étaient des dégradés purement décoratifs, et
   ils imposaient une repeinture pleine section au défilement. La section est
   désormais un aplat franc. */

/* Layout deux colonnes : texte gauche / badge droite */
.garantie-layout {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 88px;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* ── Badge premium verre sombre ── */
.garantie-visuel {
    display: flex;
    justify-content: center;
    align-items: center;
}

.garantie-badge-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 420px;
}

/* .garantie-glow (halo doré radial de 560 px) RETIRÉ — même raison. */

.garantie-card {
    position: relative;
    width: 360px;
    height: 360px;
    /* Aplat franc : plus de dégradé décoratif, et plus de `backdrop-filter`
       (qui forçait un rééchantillonnage du fond à chaque image rendue). */
    background: #14140F;
    border-radius: 40px;
    padding: 44px;
    box-sizing: border-box;
    /* Bordure : fine ligne lumineuse en haut + dorée très subtile */
    border: 1px solid rgba(255, 255, 255, 0.10);
    outline: 1px solid rgba(212, 175, 55, 0.12);
    outline-offset: -1px;
    /* PERF + DA — les 6 couches d'ombre sont tombées à une seule : les lueurs
       dorées de 60 et 120 px étaient décoratives, et l'ombre de 24 px était
       absorbée par celle de 80 px. */
    /* Une seule ombre de profondeur : la lueur dorée était un effet, pas une
       information. */
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
    /* `backdrop-filter: blur(24px)` RETIRÉ : c'était la cause principale du
       lag — un flou d'arrière-plan force le navigateur à relire et refiltrer
       la zone située derrière l'élément à chaque image rendue. */
    overflow: hidden;
    z-index: 2;

    /* PERF — Carte promue sur sa propre couche GPU. */
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* .garantie-card-glass (faux reflet de verre en dégradé, avec un
   border-radius 40px 40px 60% 60%) RETIRÉ : le verre dépoli est ramené au
   strict minimum fonctionnel — ici, à rien. */

.garantie-card-content {
    text-align: center;
    width: 100%;
    position: relative;
    z-index: 1;
}

/* "24" — gradient blanc → argent, taille imposante */
.garantie-number {
    font-size: 120px;
    font-weight: 900;
    line-height: 0.88;
    margin: 0;
    padding: 0;
    font-family: var(--font-corps);
    /* Blanc franc. Le dégradé argenté en `background-clip: text` délavait le
       bas du chiffre et le rendait moins lisible. */
    color: #ffffff;
    letter-spacing: -4px;
}

/* "JUSQU'À" — label discret au-dessus du "24" */
.garantie-jusqu-a {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    font-family: var(--font-corps);
    margin: 0 0 6px 0;
}

/* Ligne jaune avec lueur */
.garantie-divider {
    width: 52px;
    height: 2.5px;
    background: #ffcc00;
    margin: 14px auto 16px auto;
    border-radius: 3px;
    box-shadow: 0 0 14px rgba(255, 204, 0, 0.65), 0 0 4px rgba(255, 204, 0, 0.9);
}

/* "MOIS DE GARANTIE" — caps lisibles sous le divider */
.garantie-text {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.50);
    letter-spacing: 3px;
    margin: 0;
    text-transform: uppercase;
    font-family: var(--font-corps);
}

/* ── Contenu textuel gauche ── */
.garantie-kicker {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-jaune);
    margin-bottom: 20px;
}

.garantie-titre {
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -1.5px;
    color: var(--c-blanc);
    margin-bottom: 24px;
}

.garantie-accent { color: var(--c-jaune); }

.garantie-desc {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.80;
    margin-bottom: 32px;
    max-width: 420px;
}

.garantie-desc strong { color: #ffffff; }

.garantie-liste {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 40px;
}

.garantie-liste li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 500;
    line-height: 1.4;
}

.liste-puce { flex-shrink: 0; }

.btn-garantie {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: var(--c-jaune);
    color: var(--c-noir);
    font-size: 14px;
    font-weight: 700;
    border-radius: var(--r-md);
    text-decoration: none;
    letter-spacing: -0.01em;
    transition: background var(--t-vite), transform var(--t-vite), box-shadow var(--t-vite);
}

.btn-garantie:hover {
    background: var(--c-jaune-sombre);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(255, 204, 0, 0.30);
}

.btn-garantie:active { transform: translateY(0); }

/* Responsive garantie */
@media (max-width: 960px) {
    .garantie-layout {
        grid-template-columns: 1fr;
        gap: 64px;
        text-align: center;
    }
    .section-garantie::before {
        right: auto;
        left: 50%;
        transform: translate(-50%, -50%);
        top: 35%;
        width: 80%;
        height: 60%;
    }
    .garantie-desc     { max-width: 100%; }
    .garantie-liste li { justify-content: center; }
    .garantie-visuel   { order: -1; }
}

@media (max-width: 480px) {
    .section-garantie         { padding: 88px 0; }
    .garantie-badge-container { min-height: 320px; }
    .garantie-card  {
        width: 272px; height: 272px;
        border-radius: 32px; padding: 32px;
    }
    .garantie-number  { font-size: 88px; }
    .garantie-months  { font-size: 16px; letter-spacing: 5px; }
}


/* ================================================================
   FOOTER COMPLET
   ================================================================ */
.footer {
    background: #111111;
}

/* ── Corps 4 colonnes ── */
.footer-corps {
    padding: 72px 0 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.footer-grille {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
    gap: 48px;
    align-items: start;
}

/* Colonne 1 — marque */
.footer-logo-lien {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.5px;
    text-decoration: none;
    margin-bottom: 16px;
}

.footer-baseline {
    font-size: 13px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.38);
    max-width: 268px;
    margin-top: 14px;
}

/* ── Réseaux sociaux (footer) ── */
.footer-socials {
    margin-top: 20px;
}
.footer-socials-titre {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.52);
    margin-bottom: 12px;
}
.footer-socials-liste {
    display: flex;
    gap: 10px;
}
.footer-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.72);
    transition: background var(--t-vite, 0.18s), color var(--t-vite, 0.18s),
                border-color var(--t-vite, 0.18s), transform var(--t-vite, 0.18s);
}
.footer-social:hover {
    background: var(--c-jaune, #FFCC00);
    border-color: var(--c-jaune, #FFCC00);
    color: #111;
    transform: translateY(-2px);
}
.footer-social:focus-visible {
    outline: 2px solid var(--c-jaune, #FFCC00);
    outline-offset: 2px;
}

/* Titre de colonne */
.footer-col-titre {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.70);
    margin-bottom: 20px;
}

/* Colonne 2 — navigation */
.footer-nav-liste {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.footer-nav-liste a {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.42);
    text-decoration: none;
    transition: color var(--t-vite);
    display: inline-block;
}

.footer-nav-liste a:hover { color: var(--c-jaune); }

/* Colonne 3 — service client */
.footer-contact-liste {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.footer-contact-liste li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.42);
    line-height: 1.4;
}

.footer-contact-liste svg {
    flex-shrink: 0;
    color: var(--c-jaune);
}

/* Colonne 4 — paiement */
.footer-paiement-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.38);
    line-height: 1.65;
    margin-bottom: 20px;
}

.footer-paiement-logos {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.paiement-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.65);
    white-space: nowrap;
    transition: background var(--t-vite), border-color var(--t-vite);
}

.paiement-badge:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.18);
}

.paiement-stripe { padding: 6px 10px; }

/* Badge Klarna — rose officiel #FFB3C7, wordmark noir */
.paiement-klarna {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 5px 12px;
    background: var(--c-klarna-rose);
    border-color: var(--c-klarna-rose);
}

.paiement-klarna:hover {
    background: var(--c-klarna-rose);
    border-color: var(--c-klarna-rose);
}

.klarna-badge-text {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--c-klarna-noir);
    line-height: 1;
}

.klarna-badge-split {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(11, 5, 29, 0.60);
    text-transform: uppercase;
    line-height: 1;
}

/* ── Barre copyright ── */
.footer-bas {
    padding: 18px 0;
}

.footer-bas-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.footer-copy {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.22);
}

.footer-liens-legaux {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-liens-legaux a {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.22);
    text-decoration: none;
    transition: color var(--t-vite);
}

.footer-liens-legaux a:hover { color: rgba(255, 255, 255, 0.65); }

.footer-sep {
    color: rgba(255, 255, 255, 0.15);
    font-size: 12px;
}

/* ── Responsive ── */
@media (max-width: 960px) {
    .footer-grille {
        grid-template-columns: 1fr 1fr;
        gap: 40px 48px;
    }
    .footer-baseline { max-width: 100%; }
}

@media (max-width: 560px) {
    .footer-corps  { padding: 52px 0 44px; }
    .footer-grille { grid-template-columns: 1fr; gap: 36px; }
    .footer-bas-inner { flex-direction: column; align-items: center; text-align: center; }
}

@media (max-width: 600px) {
    .section-faits { padding: 60px 0; }
    .section-entete    { margin-bottom: 40px; }
}


/* ================================================================
   SECTION KLARNA — Financement (Bento style, même ton que Garantie)
   ================================================================ */
.section-klarna {
    background: #0f0f0f;
    padding: 100px 0;

    /* PERF — Isolation de la zone (cf. historique_modifs.md 2026-08-26).
       `translateZ(0)` promeut la section sur une COUCHE DE COMPOSITION GPU :
       au défilement, le navigateur se contente de déplacer la texture déjà
       rasterisée au lieu de repeindre les dégradés et les lueurs à chaque
       pixel. `contain: paint` confine les repeints à l'intérieur de la
       section : plus rien au-dessus ni en dessous n'est invalidé. */
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    contain: paint;
}

.klarna-layout {
    display: grid;
    /* Split 40/60, même logique que la section Réseau. */
    grid-template-columns: 40fr 60fr;
    gap: 72px;
    align-items: stretch;
}

/* ── Image gauche ── */
.klarna-visuel {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    min-height: 380px;
    /* PERF — Rayon de diffusion divisé par ~2,3 (80px → 34px) : le coût d'un
       flou d'ombre croît avec le CARRÉ du rayon, et celui-ci s'étalait sur
       toute la hauteur de la carte (380 px minimum). Rendu quasi identique. */
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255,255,255,0.06);

    /* PERF — Carte d'image promue sur sa propre couche GPU. */
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.klarna-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    position: absolute;
    inset: 0;
}

/* ── Contenu droite ── */
.klarna-contenu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Logo Klarna officiel — pastille rose #FFB3C7, wordmark noir */
.klarna-logo-officiel {
    display: inline-flex;
    align-items: center;
    background: var(--c-klarna-rose);
    border: 1px solid var(--c-klarna-rose);
    border-radius: var(--r-md);
    padding: 7px 18px 9px;
    margin-bottom: 22px;
}

.klarna-logo-text {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.8px;
    color: var(--c-klarna-noir);
    line-height: 1;
    font-family: var(--font-corps);
}

.klarna-kicker {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-jaune);
    margin-bottom: 14px;
}

.klarna-titre {
    font-size: clamp(24px, 2.8vw, 36px);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -1px;
    color: var(--c-blanc);
    margin-bottom: 18px;
}

.klarna-accent { color: var(--c-jaune); }

.klarna-desc {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.74);
    line-height: 1.75;
    margin-bottom: 28px;
}

.klarna-liste {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 36px;
}

.klarna-liste li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 500;
    line-height: 1.4;
}

.btn-klarna {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 24px;
    background: var(--c-jaune);
    color: var(--c-noir);
    font-size: 14px;
    font-weight: 700;
    border-radius: var(--r-md);
    text-decoration: none;
    transition: background var(--t-vite), transform var(--t-vite), box-shadow var(--t-vite);
    letter-spacing: -0.01em;
}

.btn-klarna:hover {
    background: var(--c-jaune-sombre);
    transform: translateY(-2px);
    box-shadow: var(--ombre-jaune);
}

.btn-klarna:active { transform: translateY(0); }

@media (max-width: 900px) {
    .klarna-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .klarna-visuel {
        min-height: 280px;
        border-radius: 28px 28px 0 0;
    }
    .klarna-contenu {
        padding: 40px 36px;
        background: rgba(255,255,255,0.04);
        border-radius: 0 0 28px 28px;
        border: 1px solid rgba(255,255,255,0.06);
        border-top: none;
    }
}

@media (max-width: 480px) {
    .section-klarna { padding: 72px 0; }
}

/* PERF — Garde-fou mémoire. `will-change` réserve la couche GPU en
   PERMANENCE : sur mobile, où la mémoire vidéo est comptée, on le relâche et
   on garde uniquement `translateZ(0)`, qui suffit à promouvoir l'élément
   sans réservation anticipée. */
@media (max-width: 600px) {
    .section-klarna,
    .section-garantie,
    .klarna-visuel,
    .garantie-card { will-change: auto; }
}


/* ================================================================
   SECTION RÉSEAU EUROPÉEN
   ================================================================ */
.section-reseau {
    background: var(--c-gris-bg);
    padding: 88px 0;
    border-top: 1px solid var(--c-gris-clair);
}

.reseau-layout {
    display: grid;
    /* Split 40/60 : mise en page asymétrique. Deux colonnes égales donnent un
       rythme de gabarit ; ici le texte porte, l'image accompagne. */
    grid-template-columns: 40fr 60fr;
    gap: 72px;
    align-items: center;
}

.reseau-kicker {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-gris-moyen);
    margin-bottom: 16px;
}

.reseau-titre {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 900;
    letter-spacing: -1px;
    line-height: 1.15;
    color: var(--c-noir);
    margin-bottom: 20px;
}

.reseau-accent { color: var(--c-noir); border-bottom: 3px solid var(--c-jaune); }

.reseau-desc {
    font-size: 15px;
    color: var(--c-gris-moyen);
    line-height: 1.75;
    margin-bottom: 14px;
}

.reseau-identite {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 12.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.62);
    letter-spacing: 0.01em;
}
.reseau-identite a {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--c-jaune);
}

.reseau-desc strong { color: var(--c-noir); }
.reseau-desc:last-child { margin-bottom: 0; }

/* Bloc stats : 3 lignes empilées */
.reseau-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-radius: var(--r-xl);
    overflow: hidden;
    position: relative;
    min-height: 320px;
}

/* Version avec fond carte Europe */
.reseau-stats-map {
    background-image: url('../images/europe-map.webp');
    background-size: cover;
    background-position: center;
}

/* Calque semi-transparent pour lisibilité */
.reseau-map-overlay {
    position: absolute;
    inset: 0;
    /* Aplat : un dégradé à 135° sur une photo n'apporte rien qu'un voile
       uniforme ne donne pas, et déséquilibre la lisibilité d'un coin à l'autre. */
    background: rgba(17, 17, 17, 0.72);
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
}

/* Stats au-dessus du calque */
.reseau-stat {
    position: relative;
    z-index: 1;
    background: transparent;
    padding: 32px 40px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.reseau-stat:last-child {
    border-bottom: none;
}

/* Chiffres : blancs sur fond sombre de la carte */
.reseau-stat-num {
    font-size: 46px;
    font-weight: 900;
    letter-spacing: -2px;
    color: var(--c-jaune);
    line-height: 1;
    text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

.reseau-stat-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 500;
    letter-spacing: 0.02em;
}

@media (max-width: 900px) {
    .reseau-layout { grid-template-columns: 1fr; gap: 48px; }
    .reseau-stats  { grid-template-columns: repeat(3, 1fr); min-height: auto; }
    .reseau-stat   { border-bottom: none; border-right: 1px solid rgba(255,255,255,0.10); }
    .reseau-stat:last-child { border-right: none; }
}

@media (max-width: 480px) {
    .section-reseau { padding: 60px 0; }
    .reseau-stats   { grid-template-columns: 1fr; }
    .reseau-stat    { padding: 24px 28px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.10); }
    .reseau-stat:last-child { border-bottom: none; }
}


/* ================================================================
   SECTION FAQ — Accordéon
   ================================================================ */
.section-faq {
    background: var(--c-blanc);
    padding: 88px 0;
    border-top: 1px solid var(--c-gris-clair);
}

.faq-liste {
    max-width: 780px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--c-gris-clair);
    border-radius: var(--r-xl);
    overflow: hidden;
}

.faq-item {
    border-bottom: 1px solid var(--c-gris-clair);
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 28px;
    background: var(--c-blanc);
    border: none;
    cursor: pointer;
    font-family: var(--font-corps);
    font-size: 15px;
    font-weight: 700;
    color: var(--c-noir);
    text-align: left;
    letter-spacing: -0.2px;
    transition: background var(--t-vite);
}

.faq-question:hover {
    background: var(--c-gris-bg);
}

.faq-chevron {
    flex-shrink: 0;
    transition: transform 0.3s ease;
    color: var(--c-gris-moyen);
}

.faq-question[aria-expanded="true"] .faq-chevron {
    transform: rotate(180deg);
}

.faq-reponse {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.faq-reponse p {
    padding: 0 28px 22px;
    font-size: 14px;
    color: var(--c-gris-moyen);
    line-height: 1.75;
    margin: 0;
}

@media (max-width: 600px) {
    .section-faq     { padding: 60px 0; }
    .faq-question    { padding: 18px 20px; font-size: 14px; }
    .faq-reponse p   { padding: 0 20px 18px; }
}


/* ================================================================
   PAGE GARANTIE — Hero de page
   ================================================================ */
.page-hero {
    background: #080808;
    padding: 130px 0 90px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 90% at 15% 60%,
        rgba(255, 204, 0, 0.09) 0%,
        transparent 65%);
    pointer-events: none;
}

.page-hero-inner { position: relative; max-width: 700px; }

.page-hero-kicker {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-jaune);
    margin-bottom: 22px;
}

.page-hero-titre {
    font-size: clamp(34px, 5.5vw, 62px);
    font-weight: 900;
    line-height: 1.07;
    letter-spacing: -2.5px;
    color: #ffffff;
    margin-bottom: 22px;
}

.page-hero-sous-titre {
    font-size: 17px;
    color: rgba(255,255,255,0.45);
    line-height: 1.7;
    max-width: 520px;
}


/* ── Stats rapides (flottent sur le hero) ── */
.section-gstats {
    background: #080808;
    padding: 0 0 88px;
}

.garantie-stats-grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.07);
    border-radius: var(--r-xl);
    overflow: hidden;
    transform: translateY(-44px);
}

.gstat-card {
    background: #111111;
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: background 0.2s;
}

.gstat-card.gstat-accent { background: #120f02; border-top: 2px solid rgba(255,204,0,0.35); }
.gstat-card:hover { background: #181818; }

.gstat-num {
    font-size: 50px;
    font-weight: 900;
    letter-spacing: -2px;
    color: var(--c-jaune);
    line-height: 1;
    font-family: var(--font-corps);
}

.gstat-unite {
    font-size: 15px;
    font-weight: 700;
    color: rgba(255,255,255,0.45);
    margin-top: -2px;
}

.gstat-label {
    font-size: 13px;
    color: rgba(255,255,255,0.38);
    line-height: 1.6;
    margin-top: 6px;
}


/* ── Couverture (ce qui est couvert / pas couvert) ── */
.section-couverture {
    background: #0a0a0a;
    padding: 88px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.couverture-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: rgba(255,255,255,0.06);
    border-radius: var(--r-xl);
    overflow: hidden;
    margin-top: 60px;
}

.couverture-col {
    background: #111111;
    padding: 48px 44px;
}

.couverture-col.couverture-ok  { border-top: 3px solid var(--c-jaune); }
.couverture-col.couverture-non { border-top: 3px solid rgba(255,255,255,0.12); }

.couverture-col-titre {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 28px;
}

.couverture-ok .couverture-col-titre  { color: var(--c-jaune); }
.couverture-non .couverture-col-titre { color: rgba(255,255,255,0.35); }

.couverture-liste {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.couverture-liste li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255,255,255,0.62);
}

.couverture-ok .couverture-liste  li svg { color: var(--c-jaune);              flex-shrink: 0; margin-top: 2px; }
.couverture-non .couverture-liste li svg { color: rgba(255,255,255,0.28);       flex-shrink: 0; margin-top: 2px; }


/* ── Processus de test (4 étapes) ── */
.section-process {
    background: #080808;
    padding: 88px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.gpage-entete {
    text-align: center;
    max-width: 560px;
    margin: 0 auto 60px;
}

.gpage-kicker {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-jaune);
    margin-bottom: 14px;
}

.gpage-titre {
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 900;
    letter-spacing: -1px;
    line-height: 1.12;
    color: #ffffff;
    margin-bottom: 12px;
}

.gpage-sous-titre {
    font-size: 15px;
    color: rgba(255,255,255,0.42);
    line-height: 1.7;
}

.process-grille {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.07);
    border-radius: var(--r-xl);
    overflow: hidden;
}

.process-etape {
    background: #0d0d0d;
    padding: 36px 28px 40px;
    display: flex;
    flex-direction: column;
    gap: 13px;
    transition: background 0.2s;
}

.process-etape:hover { background: #131313; }

.process-num {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--c-jaune);
}

.process-icone {
    width: 44px;
    height: 44px;
    background: rgba(255,204,0,0.08);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-jaune);
}

.process-titre {
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.2px;
}

.process-desc {
    font-size: 13px;
    color: rgba(255,255,255,0.40);
    line-height: 1.65;
}


/* ── Faire valoir sa garantie ── */
.section-sinistre {
    background: #0a0a0a;
    padding: 88px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.sinistre-steps {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 700px;
    margin: 0 auto;
}

.sinistre-step {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    background: #111111;
    padding: 28px 32px;
    border-left: 2px solid rgba(255,255,255,0.06);
    transition: border-color 0.2s, background 0.2s;
}

.sinistre-step:first-child { border-radius: var(--r-xl) var(--r-xl) 0 0; }
.sinistre-step:last-child  { border-radius: 0 0 var(--r-xl) var(--r-xl); }
.sinistre-step:hover { border-left-color: var(--c-jaune); background: #151515; }

.sinistre-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,204,0,0.08);
    border: 1px solid rgba(255,204,0,0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: var(--c-jaune);
    flex-shrink: 0;
}

.sinistre-corps h4 {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 5px;
    letter-spacing: -0.2px;
}

.sinistre-corps p {
    font-size: 13px;
    color: rgba(255,255,255,0.42);
    line-height: 1.65;
    margin: 0;
}


/* ── FAQ sombre (page garantie) ── */
.section-faq-sombre {
    background: #080808;
    padding: 88px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.section-faq-sombre .faq-liste {
    border-color: rgba(255,255,255,0.07);
}

.section-faq-sombre .faq-item {
    border-bottom-color: rgba(255,255,255,0.07);
}

.section-faq-sombre .faq-question {
    background: #111111;
    color: #ffffff;
}

.section-faq-sombre .faq-question:hover { background: #181818; }

.section-faq-sombre .faq-reponse p {
    color: rgba(255,255,255,0.45);
}

.section-faq-sombre .faq-chevron { color: rgba(255,255,255,0.35); }


/* ── CTA bas de page garantie ── */
.section-gpage-cta {
    background: #0a0a0a;
    padding: 88px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.gpage-cta-inner {
    text-align: center;
    max-width: 540px;
    margin: 0 auto;
}

.gpage-cta-inner h2 {
    font-size: clamp(26px, 3.2vw, 38px);
    font-weight: 900;
    letter-spacing: -1px;
    color: #ffffff;
    margin-bottom: 14px;
}

.gpage-cta-inner p {
    font-size: 15px;
    color: rgba(255,255,255,0.42);
    line-height: 1.7;
    margin-bottom: 32px;
}

/* Responsive page garantie */
@media (max-width: 768px) {
    .garantie-stats-grille { grid-template-columns: 1fr 1fr; }
    .couverture-layout     { grid-template-columns: 1fr; }
    .process-grille        { grid-template-columns: 1fr 1fr; }
    .page-hero             { padding: 110px 0 72px; }
}

@media (max-width: 480px) {
    .garantie-stats-grille { grid-template-columns: 1fr; transform: none; }
    .process-grille        { grid-template-columns: 1fr; }
    .sinistre-step         { padding: 20px 18px; gap: 16px; }
    .section-gstats        { padding-bottom: 60px; }
}


/* ================================================================
   MODAL KLARNA — Simulateur de financement
   ================================================================ */
.klarna-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 3000;
    display: flex;
    /* PAS align-items:center — quand la modale est plus haute que l'écran, un
       enfant centré déborde des DEUX côtés et le haut devient inatteignable :
       on ne peut pas défiler vers une marge négative. Mesuré sur iPhone SE :
       modale de 815 px dans 568 px, 103 px hors écran en haut.
       flex-start + `margin: auto 0` sur l'enfant (voir .klarna-modal) centre
       quand il y a la place et laisse défiler quand il n'y en a pas. */
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* La réserve du bas dégage la barre d'appel fixe (110 px) : sans elle le
       bouton « Demander mon devis » finissait derrière elle. */
    padding: 20px 20px calc(110px + env(safe-area-inset-bottom));
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

.klarna-modal-overlay.open {
    opacity: 1;
    visibility: visible;
}

.klarna-modal {
    background: #141414;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 28px;
    padding: 44px 40px 36px;
    max-width: 460px;
    width: 100%;
    /* Centrage sûr : les marges auto centrent tant qu'il reste de la place et
       s'annulent dès que la modale dépasse, ce qui rend le défilement complet. */
    margin: auto 0;
    flex: 0 0 auto;
    position: relative;
    box-shadow: 0 40px 100px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.04);
    transform: translateY(20px) scale(0.97);
    transition: transform 0.28s ease;
}

.klarna-modal-overlay.open .klarna-modal { transform: translateY(0) scale(1); }

.klarna-modal-close {
    position: absolute;
    top: 16px; right: 16px;
    width: 30px; height: 30px;
    border: none;
    background: rgba(255,255,255,0.07);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.55);
    transition: background 0.2s, color 0.2s;
}

.klarna-modal-close:hover { background: rgba(255,255,255,0.13); color: #fff; }

.klarna-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.klarna-modal-logo-text {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.8px;
    color: var(--c-klarna-noir);
    background: var(--c-klarna-rose);
    border-radius: var(--r-md);
    padding: 7px 16px 9px;
    font-family: var(--font-corps);
    line-height: 1;
}

.klarna-modal-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.32);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    padding: 4px 10px;
    border-radius: var(--r-full);
}

.klarna-modal h2 {
    font-size: 21px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

.klarna-modal-desc {
    font-size: 13px;
    color: rgba(255,255,255,0.42);
    line-height: 1.65;
    margin-bottom: 26px;
}

.klarna-modal-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin-bottom: 8px;
}

.klarna-input-group {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--r-md);
    overflow: hidden;
    margin-bottom: 20px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.klarna-input-group:focus-within {
    border-color: rgba(255,204,0,0.45);
    box-shadow: 0 0 0 3px rgba(255,204,0,0.07);
}

.klarna-input-group input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    padding: 13px 14px;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    font-family: var(--font-corps);
}

.klarna-input-group input::placeholder { color: rgba(255,255,255,0.22); font-weight: 400; font-size: 15px; }

.klarna-input-unit {
    padding: 13px 14px;
    font-size: 16px;
    font-weight: 700;
    color: rgba(255,255,255,0.38);
    border-left: 1px solid rgba(255,255,255,0.08);
}

.klarna-resultats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

.klarna-resultat {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--r-md);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: border-color 0.25s, background 0.25s;
}

.klarna-resultat.active {
    border-color: rgba(0, 200, 83, 0.38);
    background: rgba(0, 200, 83, 0.04);
}

.klarna-resultat-type {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.38);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.klarna-resultat-montant {
    font-size: 24px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.5px;
    font-family: var(--font-corps);
    line-height: 1.1;
}

.klarna-resultat-detail {
    font-size: 11px;
    color: rgba(255,255,255,0.28);
}

.klarna-modal-disclaimer {
    font-size: 11px;
    color: rgba(255,255,255,0.22);
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: center;
}

.btn-klarna-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 24px;
    background: var(--c-jaune);
    color: var(--c-noir);
    font-size: 14px;
    font-weight: 700;
    border-radius: var(--r-md);
    text-decoration: none;
    letter-spacing: -0.01em;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.btn-klarna-modal:hover {
    background: var(--c-jaune-sombre);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(255,204,0,0.25);
}

@media (max-width: 500px) {
    .klarna-modal    { padding: 32px 22px 28px; border-radius: 20px; }
    .klarna-resultats { grid-template-columns: 1fr; }
}


/* ================================================================
   PAGE BOUTIQUE — Catalogue moteurs
   ================================================================ */

/* ── Hero compact ── */
.boutique-page-hero {
    background: #080808;
    padding: 106px 0 56px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    position: relative;
    overflow: hidden;
}

.boutique-page-hero::before {
    content: '';
    position: absolute;
    left: -8%;
    top: 50%;
    transform: translateY(-50%);
    width: 50%;
    height: 200%;
    background: radial-gradient(circle at 50% 50%, rgba(212,175,55,0.09) 0%, rgba(212,175,55,0.03) 45%, transparent 70%);
    pointer-events: none;
}


/* ──────────────────────────────────────────────────────────────
   SUIVI DE COMMANDE — Page suivre-ma-commande.html
   ────────────────────────────────────────────────────────────── */

/* ─── Section wrapper ─────────────────────────────────────── */
.suivi-section {
    padding: 56px 0 100px;
    background: var(--c-blanc);
    min-height: 60vh;
}

.suivi-container {
    max-width: 680px;
}

/* ─── Formulaire de recherche ─────────────────────────────── */
.suivi-form {
    margin-bottom: 40px;
}

.suivi-form-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-gris-moyen);
    margin-bottom: 10px;
}

.suivi-form-row {
    display: flex;
    gap: 10px;
}

.suivi-input {
    flex: 1;
    height: 52px;
    border: 1.5px solid var(--c-gris-bordure);
    border-radius: var(--r-md);
    padding: 0 18px;
    font-size: 1rem;
    font-family: var(--font-corps);
    background: var(--c-blanc);
    color: var(--c-noir);
    transition: border-color var(--t-vite), box-shadow var(--t-vite);
    outline: none;
    letter-spacing: 0.04em;
}

.suivi-input:focus {
    border-color: var(--c-jaune);
    box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.18);
}

.suivi-btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 0 24px;
    background: var(--c-jaune);
    color: var(--c-noir);
    border: none;
    border-radius: var(--r-md);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--t-vite), transform var(--t-vite), box-shadow var(--t-vite);
}

.suivi-btn-submit:hover {
    background: var(--c-jaune-sombre);
    box-shadow: var(--ombre-jaune);
    transform: translateY(-1px);
}

.suivi-btn-submit:active {
    transform: translateY(0);
}

.suivi-input-hint {
    margin-top: 10px;
    font-size: 0.78rem;
    color: var(--c-gris-moyen);
    line-height: 1.5;
}

/* ─── Zone d'erreur ───────────────────────────────────────── */
.suivi-erreur {
    background: rgba(255, 59, 48, 0.06);
    border: 1.5px solid rgba(255, 59, 48, 0.22);
    border-radius: var(--r-lg);
    padding: 24px;
    margin-bottom: 32px;
}

.suivi-erreur-inner {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    color: var(--c-rouge);
}

.suivi-erreur-inner svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.suivi-erreur-titre {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-rouge);
    margin-bottom: 6px;
}

.suivi-erreur-texte {
    font-size: 0.88rem;
    color: var(--c-noir);
    margin-bottom: 4px;
}

.suivi-erreur-numero {
    font-family: var(--font-mono);
    font-weight: 700;
}

.suivi-erreur-aide {
    font-size: 0.82rem;
    color: var(--c-gris-moyen);
}

.suivi-erreur-aide a {
    color: var(--c-jaune-sombre);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ─── Cartes résultat ─────────────────────────────────────── */
.suivi-card {
    background: var(--c-blanc);
    border: 1.5px solid var(--c-gris-bordure);
    border-radius: var(--r-lg);
    padding: 28px;
    margin-bottom: 16px;
}

.suivi-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-gris-moyen);
    margin-bottom: 20px;
}

/* ─── Carte statut ────────────────────────────────────────── */
.suivi-top-row {
    margin-bottom: 16px;
}

.suivi-top-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.suivi-kicker {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-gris-moyen);
}

.suivi-numero {
    font-size: 1.4rem;
    font-weight: 800;
    font-family: var(--font-mono);
    color: var(--c-noir);
    letter-spacing: 0.04em;
}

.suivi-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--r-full);
    font-size: 0.78rem;
    font-weight: 700;
    width: fit-content;
}

.suivi-badge--etape1 { background: rgba(142,142,147,0.14); color: var(--c-gris-moyen); }
.suivi-badge--etape2 { background: rgba(255,204,0,0.14);   color: var(--c-jaune-sombre); }
.suivi-badge--etape3 { background: rgba(255,149,0,0.14);   color: #E68200; }
.suivi-badge--etape4 { background: rgba(52,199,89,0.14);   color: #1D9E44; }

.suivi-meta {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    border-top: 1px solid var(--c-gris-clair);
    padding-top: 14px;
}

.suivi-meta-item {
    font-size: 0.82rem;
    color: var(--c-gris-moyen);
}

.suivi-meta-label { color: var(--c-gris-moyen); }

.suivi-meta-item strong {
    color: var(--c-noir);
    font-weight: 600;
}

/* ─── Timeline ────────────────────────────────────────────── */
.suivi-timeline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    gap: 0;
}

/* Ligne de connexion entre les points */
.suivi-timeline::before {
    content: '';
    position: absolute;
    top: 22px;
    left: calc(22px / 2);
    right: calc(22px / 2);
    height: 2px;
    background: var(--c-gris-clair);
    z-index: 0;
}

.timeline-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex: 1;
    position: relative;
    z-index: 1;
}

.timeline-dot {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--c-gris-clair);
    border: 2px solid var(--c-gris-bordure);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-gris-moyen);
    transition: background var(--t-normal), border-color var(--t-normal), color var(--t-normal), box-shadow var(--t-normal);
}

.timeline-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-align: center;
    color: var(--c-gris-moyen);
    line-height: 1.3;
    max-width: 80px;
    transition: color var(--t-normal);
}

/* État : fait (étape passée) */
.timeline-item--fait .timeline-dot {
    background: rgba(52,199,89,0.10);
    border-color: var(--c-vert);
    color: var(--c-vert);
}

.timeline-item--fait .timeline-label {
    color: var(--c-vert);
}

/* État : actif (étape en cours) */
.timeline-item--actif .timeline-dot {
    background: var(--c-jaune);
    border-color: var(--c-jaune);
    color: var(--c-noir);
    box-shadow: 0 0 0 6px rgba(255, 204, 0, 0.18), var(--ombre-jaune);
    animation: pulseDot 2.2s ease-in-out infinite;
}

.timeline-item--actif .timeline-label {
    color: var(--c-jaune-sombre);
    font-weight: 800;
}

@keyframes pulseDot {
    0%   { box-shadow: 0 0 0 0px rgba(255, 204, 0, 0.30), 0 4px 20px rgba(255, 204, 0, 0.35); }
    50%  { box-shadow: 0 0 0 8px rgba(255, 204, 0, 0.10), 0 4px 20px rgba(255, 204, 0, 0.50); }
    100% { box-shadow: 0 0 0 0px rgba(255, 204, 0, 0.30), 0 4px 20px rgba(255, 204, 0, 0.35); }
}

/* ─── Grille infos livraison ──────────────────────────────── */
.suivi-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.suivi-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.suivi-info-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--c-gris-moyen);
}

.suivi-info-val {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--c-noir);
    font-family: var(--font-mono);
}

/* ─── Bouton suivi transporteur ───────────────────────────── */
.suivi-btn-wrapper {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--c-gris-clair);
}

.btn-suivi-transporteur {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 56px;
    padding: 0 24px;
    background: var(--c-jaune);
    color: var(--c-noir);
    border-radius: var(--r-md);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    justify-content: center;
    transition: background var(--t-vite), transform var(--t-vite), box-shadow var(--t-vite);
}

.btn-suivi-transporteur:hover {
    background: var(--c-jaune-sombre);
    box-shadow: var(--ombre-jaune);
    transform: translateY(-1px);
}

.btn-suivi-transporteur:active {
    transform: translateY(0);
}

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {
    .suivi-form-row {
        flex-direction: column;
    }

    .suivi-btn-submit {
        width: 100%;
        justify-content: center;
    }

    .suivi-timeline::before {
        top: 20px;
    }

    .timeline-dot {
        width: 38px;
        height: 38px;
    }

    .timeline-label {
        font-size: 0.65rem;
        max-width: 62px;
    }

    .suivi-info-grid {
        grid-template-columns: 1fr;
    }

    .suivi-meta {
        flex-direction: column;
        gap: 8px;
    }
}

.boutique-hero-inner {
    max-width: 680px;
    position: relative;
}

.boutique-kicker {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-jaune);
    margin-bottom: 16px;
}

.boutique-titre {
    font-size: clamp(30px, 5vw, 50px);
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -1.5px;
    line-height: 1.06;
    margin-bottom: 14px;
}

.boutique-sous-titre {
    font-size: 15.5px;
    color: rgba(255,255,255,0.68); /* WCAG: 0.45 → 0.68 (ratio 3.2:1 → 6.1:1) */
    line-height: 1.65;
    max-width: 520px;
}

/* ── Barre d'outils ── */
.boutique-toolbar {
    background: rgba(8,8,8,0.97);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    padding: 14px 0;
    position: sticky;
    top: 86px;
    z-index: 90;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.boutique-toolbar-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.boutique-search-wrapper {
    position: relative;
    flex: 1;
    min-width: 220px;
}

.boutique-search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.30);
    pointer-events: none;
}

.boutique-search-input {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    color: #fff;
    padding: 10px 14px 10px 40px;
    border-radius: 10px;
    font-family: var(--font-corps);
    font-size: 13.5px;
    font-weight: 500;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.boutique-search-input:focus {
    outline: none;
    border-color: rgba(255,204,0,0.42);
    box-shadow: 0 0 0 3px rgba(255,204,0,0.07);
}

.boutique-search-input::placeholder { color: rgba(255,255,255,0.22); font-weight: 400; }

.boutique-filtres {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.filtre-select {
    appearance: none;
    -webkit-appearance: none;
    background-color: rgba(255,255,255,0.06);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpolyline points='1 1 5 5 9 1' fill='none' stroke='rgba%28255%2C255%2C255%2C0.4%29' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.80);
    padding: 9px 30px 9px 12px;
    border-radius: 10px;
    font-family: var(--font-corps);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s;
    white-space: nowrap;
}

.filtre-select:focus { outline: none; border-color: rgba(255,204,0,0.4); }
.filtre-select option { background: #1a1a1a; color: #fff; }

.filtre-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.40);
    padding: 9px 14px;
    border-radius: 10px;
    font-family: var(--font-corps);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
    white-space: nowrap;
}

.filtre-reset-btn:hover { border-color: rgba(255,255,255,0.24); color: rgba(255,255,255,0.72); }

.boutique-count {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.30);
    white-space: nowrap;
    margin-left: auto;
}

/* ── Section grille ── */
.section-boutique {
    background: #080808;
    padding: 52px 0 100px;
    min-height: 50vh;
}

.boutique-grille {
    display: grid;
    /* Grille adaptative : les cartes s'alignent seules de 1 à N colonnes
       selon la largeur dispo (mobile → desktop), sans casser la mise en page. */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 22px;
}

/* ── État « Recherche en cours… » (overlay discret au-dessus de la grille) ── */
.boutique-loading {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: rgba(255,255,255,0.45);
    font-size: 14px;
}
.boutique-loading.visible { display: flex; }
.boutique-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.18);
    border-top-color: var(--c-jaune, #FFCC00);
    border-radius: 50%;
    animation: boutique-spin 0.7s linear infinite;
}
@keyframes boutique-spin { to { transform: rotate(360deg); } }

/* Actions de l'état « aucun résultat » : bouton contact + reset alignés */
.boutique-vide-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: center;
}

/* ── État vide ── */
.boutique-vide {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 20px;
    color: rgba(255,255,255,0.28);
    gap: 16px;
}

.boutique-vide.visible { display: flex; }

.boutique-vide p { font-size: 15px; line-height: 1.6; }

.boutique-vide-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.48);
    padding: 10px 24px;
    border-radius: 10px;
    font-family: var(--font-corps);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

.boutique-vide-btn:hover { border-color: rgba(255,255,255,0.28); color: rgba(255,255,255,0.78); }

/* ── Carte moteur ── */
.moteur-card {
    background: #111111;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.moteur-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255,255,255,0.15);
    box-shadow: 0 28px 64px rgba(0,0,0,0.6);
}

/* Image */
.moteur-card-image {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #0d0d0d;
    flex-shrink: 0;
}

.moteur-img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.moteur-card:hover .moteur-img { transform: scale(1.07); }

/* Rangée de badges — conteneur flex ancré en haut de l'image.
   Remplace les 2 positionnements absolus indépendants qui se chevauchaient
   au milieu de la carte et se faisaient rogner par overflow:hidden. */
.moteur-card-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    pointer-events: none;   /* le clic traverse jusqu'à la carte */
}

/* Badge état (gauche de la rangée) */
.moteur-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 20px;
    line-height: 1.15;
    min-width: 0;           /* autorise la réduction avant tout débordement */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.badge-occasion {
    background: rgba(52,199,89,0.16);
    color: #4cd964;
    border: 1px solid rgba(52,199,89,0.28);
}

.badge-reconditionne {
    background: rgba(10,132,255,0.16);
    color: #64baff;
    border: 1px solid rgba(10,132,255,0.28);
}

/* Badge carburant (droite de la rangée) */
.moteur-carburant-badge {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 20px;
    line-height: 1.15;
    white-space: nowrap;    /* « Diesel » reste sur une ligne… */
    flex-shrink: 0;         /* …et c'est le badge état (plus long) qui cède */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.carburant-diesel {
    background: rgba(90,200,250,0.12);
    color: rgba(90,200,250,0.88);
    border: 1px solid rgba(90,200,250,0.20);
}

.carburant-essence {
    background: rgba(255,149,0,0.12);
    color: rgba(255,159,64,0.90);
    border: 1px solid rgba(255,149,0,0.22);
}

.carburant-hybride {
    background: rgba(52,199,89,0.12);
    color: rgba(78,205,109,0.90);
    border: 1px solid rgba(52,199,89,0.22);
}

/* Corps de la carte */
.moteur-card-corps {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px 18px 0;
}

.moteur-card-top { margin-bottom: 12px; }

.moteur-code {
    display: inline-block;
    font-family: 'Courier New', Courier, monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--c-jaune);
    background: rgba(255,204,0,0.08);
    border: 1px solid rgba(255,204,0,0.16);
    padding: 3px 9px;
    border-radius: 6px;
    margin-bottom: 8px;
}

.moteur-titre {
    font-size: 15.5px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.3;
    letter-spacing: -0.2px;
}

.moteur-cylindree {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255,255,255,0.60); /* WCAG: 0.40 → 0.60 (ratio 2.9:1 → 5.5:1) */
    margin-top: 3px;
}

/* Specs — grille 3 colonnes strictement égales.
   `minmax(0, 1fr)` est la clé : sans le `0`, une piste de grille ne peut pas
   descendre sous la largeur de son contenu, et le texte débordait puis se
   faisait rogner (« Europe » → « E…ope »). */
.moteur-specs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 12px 0;
}

.moteur-spec {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    min-width: 0;           /* autorise la piste à se réduire */
    padding: 0 6px;
    border-right: 1px solid rgba(255,255,255,0.06);
}

.moteur-spec:last-child { border-right: none; }

.moteur-spec svg {
    color: rgba(255,255,255,0.28);
    flex-shrink: 0;
}

.moteur-spec-val,
.moteur-spec-lib {
    max-width: 100%;
    text-align: center;
    /* Le texte passe à la ligne au lieu de déborder : plus aucun rognage. */
    white-space: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.moteur-spec-val {
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
}

.moteur-spec-lib {
    font-size: 9.5px;
    color: rgba(255,255,255,0.55); /* WCAG: 0.28 → 0.55 (ratio 1.7:1 → 4.8:1) */
    line-height: 1.25;
}

.moteur-spec-garantie .moteur-spec-val {
    color: var(--c-jaune);
    font-size: 11px;
}

/* Zone prix + CTA — empilée verticalement.
   Avant : flex row avec un prix en `nowrap` ET un bouton en `nowrap` +
   `flex-shrink:0` → la somme dépassait la largeur de la carte et le bouton
   était rogné à droite. En colonne, le débordement est structurellement
   impossible quelle que soit la longueur du prix ou du libellé. */
.moteur-prix-zone {
    margin-top: auto;
    padding: 14px 0 18px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    min-width: 0;
}

.moteur-prix-block { min-width: 0; }

/* Le CTA occupe toute la largeur utile de la carte (équivalent `w-full`). */
.moteur-prix-zone .btn-devis {
    width: 100%;
    justify-content: center;
    text-decoration: none;   /* marque.js utilise un <a> */
}

.moteur-prix {
    font-size: 22px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.7px;
    line-height: 1;
}

.moteur-prix-detail {
    font-size: 10px;
    color: rgba(255,255,255,0.55); /* WCAG : 0.26 était illisible (ratio 1.6:1) */
    margin-top: 3px;
    line-height: 1.3;
    /* Plus de `nowrap` : le libellé passe à la ligne au lieu de pousser la carte. */
}


.btn-devis {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 15px;
    background: var(--c-jaune);
    color: var(--c-noir);
    border: none;
    border-radius: 9px;
    font-family: var(--font-corps);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.btn-devis:hover {
    background: var(--c-jaune-sombre);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(255,204,0,0.28);
}

.btn-devis:active {
    transform: translateY(0);
    box-shadow: none;
}

/* ── Responsive boutique ──
   (La grille .boutique-grille est désormais auto-adaptative via auto-fill :
    plus besoin de forcer le nombre de colonnes par breakpoint.) */
@media (max-width: 768px) {
    .boutique-toolbar { top: 64px; }
    .boutique-search-wrapper { min-width: 100%; }
    .boutique-count { margin-left: 0; }

    /* Filtres → bandeau à défilement horizontal */
    .boutique-filtres {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .boutique-filtres::-webkit-scrollbar { display: none; }
    .filtre-select {
        flex-shrink: 0;
        min-width: 140px;
        font-size: 12px;
        padding: 8px 28px 8px 10px;
    }

    .boutique-page-hero { padding: 92px 0 40px; }
    .boutique-titre { letter-spacing: -1px; }
    .moteur-prix-zone { flex-direction: column; align-items: flex-start; gap: 10px; }
    .btn-devis { width: 100%; justify-content: center; }
}

/* ── Hint sous la barre de recherche ── */
.boutique-search-hint {
    font-size: 10.5px;
    color: rgba(255,255,255,0.22);
    margin: 6px 0 0 2px;
    letter-spacing: 0.01em;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

/* ── État vide — message plaque reconnue ── */
#videStandard,
#videPlaque {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
}

.vide-plaque-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    padding: 12px 22px;
    border-radius: 14px;
}

.vide-plaque-num {
    font-family: 'Courier New', Courier, monospace;
    font-size: 24px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 3px;
}

.vide-plaque-format {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--c-jaune);
    background: rgba(255,204,0,0.10);
    border: 1px solid rgba(255,204,0,0.20);
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}


/* ══════════════════════════════════════════════════════════════
   PAGE CONNEXION / INSCRIPTION — connexion.html
   ══════════════════════════════════════════════════════════════ */

/* ─── Body override : fond noir total ────────────────────── */
.body--dark-auth {
    background: #080808;
}

/* ─── Header adaptatif — burger, liens, boutons ────────────────
   Logo : géré par header-theme.js (swap .src).
   RÈGLE CASCADE : .header.scrolled/.menu-open gagne sur .header--dark.
   ────────────────────────────────────────────────────────────── */

/* Burger — barres */
.nav-hamburger span {
    background: var(--c-noir);
    transition: background-color 0.3s ease;
}
.header--dark .nav-hamburger span                          { background: #ffffff; }
.header.scrolled .nav-hamburger span,
.header.menu-open .nav-hamburger span                      { background: var(--c-noir); }

/* Liens nav */
.header--dark .nav-links a                                 { color: rgba(255, 255, 255, 0.85); }
.header.scrolled .nav-links a,
.header.menu-open .nav-links a                             { color: var(--c-anthracite); }

/* Bouton téléphone */
.header--dark .btn-phone {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.30);
    color: #ffffff;
}
.header--dark .btn-phone:hover                             { background: rgba(255, 255, 255, 0.20); }
.header.scrolled .btn-phone,
.header.menu-open .btn-phone {
    background: var(--c-noir);
    border-color: transparent;
    color: var(--c-blanc);
}

/* Bouton CTA */
.header--dark .nav-cta {
    background: rgba(255, 255, 255, 0.10) !important;
    color: rgba(255, 255, 255, 0.90) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
}
.header--dark .nav-cta:hover {
    background: rgba(255, 255, 255, 0.20) !important;
    color: #ffffff !important;
}
.header.scrolled .nav-cta,
.header.menu-open .nav-cta {
    background: var(--c-noir) !important;
    color: var(--c-blanc) !important;
    border-color: transparent !important;
}


/* ================================================================
   BOUTIQUE — Skeleton Loading (chargement Firestore)
   ================================================================ */

.moteur-skeleton {
    background: #111111;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.skeleton-block {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.04) 25%,
        rgba(255,255,255,0.10) 50%,
        rgba(255,255,255,0.04) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 6px;
}

@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-img {
    height: 200px;
    border-radius: 0;
    flex-shrink: 0;
}

.skeleton-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.skeleton-line             { height: 11px; }
.skeleton-line--xshort     { width: 28%; }
.skeleton-line--short      { width: 42%; }
.skeleton-line--medium     { width: 65%; }
.skeleton-line--long       { width: 88%; }

.skeleton-specs {
    display: flex;
    gap: 10px;
    margin: 4px 0;
}
.skeleton-spec {
    flex: 1;
    height: 44px;
    border-radius: 8px;
}

.skeleton-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 14px;
    gap: 10px;
}
.skeleton-price { height: 24px; width: 80px; }
.skeleton-btn   { height: 38px; width: 140px; border-radius: 9px; }

/* Bouton profil actif (page courante) */
.nav-user-btn--active {
    border-color: var(--c-jaune) !important;
    color: var(--c-jaune) !important;
    background: rgba(255, 204, 0, 0.10) !important;
}

/* ─── Layout principal ───────────────────────────────────── */
.auth-main {
    min-height: calc(100vh - 66px - 280px);
    background: #080808;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    position: relative;
    overflow: hidden;
}

/* Halo décoratif d'arrière-plan */
.auth-main::before {
    content: '';
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255,204,0,0.07) 0%, transparent 65%);
    pointer-events: none;
}

.auth-wrapper {
    width: 100%;
    max-width: 460px;
    position: relative;
    z-index: 1;
}

/* ─── Carte d'authentification ───────────────────────────── */
.auth-card {
    background: #111111;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 24px;
    /* Padding vertical resserré : la note de sécurité et les paragraphes
       explicatifs ayant été retirés, la carte n'a plus besoin de la même
       respiration basse. */
    padding: 34px 40px 24px;
    box-shadow:
        0 32px 80px rgba(0,0,0,0.55),
        0 0 0 1px rgba(255,204,0,0.04),
        inset 0 1px 0 rgba(255,255,255,0.05);
}

/* ─── Marque en haut de la carte ─────────────────────────── */
.auth-brand {
    display: block;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.5px;
    text-decoration: none;
    margin-bottom: 36px;
    text-align: center;
}

.auth-brand .logo-text { color: #ffffff; }

/* ─── En-tête du panneau ─────────────────────────────────── */
.auth-head {
    margin-bottom: 32px;
    text-align: center;
}

.auth-titre {
    font-size: 1.75rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.8px;
    line-height: 1.15;
    margin-bottom: 8px;
}

.auth-sous-titre {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.42);
    line-height: 1.55;
}

/* ─── Champs du formulaire ───────────────────────────────── */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.auth-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.auth-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.03em;
}

.auth-required { color: var(--c-rouge); margin-left: 2px; }
.auth-optional { color: rgba(255,255,255,0.25); font-weight: 400; font-size: 0.72rem; }

.auth-input-wrapper {
    position: relative;
}

.auth-input {
    width: 100%;
    height: 48px;
    background: rgba(255,255,255,0.05);
    border: 1.5px solid rgba(255,255,255,0.11);
    border-radius: var(--r-md);
    padding: 0 16px;
    font-family: var(--font-corps);
    font-size: 0.9rem;
    color: #ffffff;
    outline: none;
    transition: border-color var(--t-vite), box-shadow var(--t-vite), background var(--t-vite);
}

/* Champ de type password dans wrapper — décaler pour le bouton œil */
.auth-input-wrapper .auth-input {
    padding-right: 46px;
}

.auth-input::placeholder {
    color: rgba(255,255,255,0.22);
    font-weight: 400;
}

.auth-input:focus {
    border-color: var(--c-jaune);
    background: rgba(255,255,255,0.07);
    box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.13);
}

.auth-input.erreur {
    border-color: var(--c-rouge);
    box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.14);
}

.auth-field-hint {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.28);
    margin-top: 2px;
}

/* ─── Bouton afficher/masquer le mot de passe ────────────── */
.auth-eye-btn {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--t-vite);
    border-radius: 0 var(--r-md) var(--r-md) 0;
}

.auth-eye-btn:hover {
    color: rgba(255,255,255,0.75);
}

/* ─── Ligne options (se souvenir / mot de passe oublié) ──── */
.auth-row-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.auth-checkbox-label {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.50);
    cursor: pointer;
    user-select: none;
}

.auth-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.auth-checkbox-custom {
    width: 17px;
    height: 17px;
    border: 1.5px solid rgba(255,255,255,0.22);
    border-radius: 4px;
    background: transparent;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--t-vite), background var(--t-vite);
}

.auth-checkbox:checked + .auth-checkbox-custom {
    background: var(--c-jaune);
    border-color: var(--c-jaune);
}

.auth-checkbox:checked + .auth-checkbox-custom::after {
    content: '';
    display: block;
    width: 4px;
    height: 7px;
    border: 2px solid #000;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translateY(-1px);
}

.auth-link {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-corps);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--c-jaune);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 204, 0, 0.35);
    transition: color var(--t-vite), text-decoration-color var(--t-vite);
    white-space: nowrap;
}

.auth-link:hover {
    color: var(--c-jaune-sombre);
    text-decoration-color: var(--c-jaune-sombre);
}

/* ─── Bouton de soumission ───────────────────────────────── */
.btn-auth-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 52px;
    background: var(--c-jaune);
    color: var(--c-noir);
    border: none;
    border-radius: var(--r-md);
    font-family: var(--font-corps);
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    transition: background var(--t-vite), transform var(--t-vite), box-shadow var(--t-vite), opacity var(--t-vite);
    letter-spacing: 0.01em;
    margin-top: 4px;
}

.btn-auth-submit:hover {
    background: var(--c-jaune-sombre);
    box-shadow: 0 6px 24px rgba(255, 204, 0, 0.38);
    transform: translateY(-1px);
}

.btn-auth-submit:active {
    transform: translateY(0);
}

.btn-auth-submit.loading {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* ─── Séparateur ─────────────────────────────────────────── */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 24px 0 20px;
    color: rgba(255,255,255,0.18);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.09);
}

/* ─── Lien bascule (connexion ↔ inscription) ─────────────── */
.auth-switch {
    text-align: center;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.38);
}

.auth-switch-btn {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-corps);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--c-jaune);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255,204,0,0.35);
    transition: color var(--t-vite), text-decoration-color var(--t-vite);
}

.auth-switch-btn:hover {
    color: var(--c-jaune-sombre);
    text-decoration-color: var(--c-jaune-sombre);
}

/* ─── Note de sécurité en bas de carte ───────────────────── */
.auth-security-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 0.72rem;
    color: rgba(255,255,255,0.22);
    letter-spacing: 0.02em;
}

/* ─── Animations des panneaux ────────────────────────────── */
.auth-panel {
    /*
     * La transition entre panneaux fonctionne en 2 phases (voir connexion.js) :
     * Sortie : classe --sortie (animation + animationend) → puis --hidden (display:none)
     * Entrée : remove --hidden → double rAF → classe --entree (animation)
     * Le double requestAnimationFrame garantit que le navigateur peint l'élément
     * visible AVANT que la classe d'animation soit ajoutée.
     */
}

.auth-panel--hidden {
    display: none;
}

/* ================================================================
   CLICK-TO-CALL — Fixes conversion appels entrants
   ================================================================ */


/* ── Section vedette masquée + CTA mobile ── */
.mobile-vedette-cta { display: none; }

@media (max-width: 768px) {
    .section-vedette { display: none; }
    .mobile-vedette-cta {
        display: flex;
        justify-content: center;
        padding: 32px 20px;
        background: var(--c-blanc);
    }
    .mobile-vedette-cta a {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: var(--c-noir);
        color: var(--c-blanc);
        font-family: var(--font-corps);
        font-weight: 700;
        font-size: 16px;
        text-decoration: none;
        padding: 16px 28px;
        border-radius: 100px;
        letter-spacing: -0.3px;
        transition: background 0.18s ease, transform 0.12s ease;
        width: 100%;
        max-width: 360px;
        justify-content: center;
        text-align: center;
    }
    .mobile-vedette-cta a:hover { background: var(--c-anthracite); transform: translateY(-1px); }
}


/* ── Sticky call bar (mobile uniquement) ──
   ORDRE D'EMPILEMENT (mesuré au banc d'audit, 7 viewports) :
     contenu de page ......... ≤ 200
     BARRE D'APPEL ........... 900    ← ici : au-dessus du contenu, SOUS tout le reste
     modale Klarna 3x ........ 3 000
     menu mobile ............. 8 999 / 9 000
     bandeau cookies ......... 9 500  (js/cookies.js)
     overlay contact ......... 9 990
     header island ........... 9 999
   La barre valait 9 998 : elle passait DEVANT la modale 3x (3 000) et devant le
   bandeau cookies (9 000), rendant leurs boutons du bas inatteignables au doigt.
   C'est un rôle d'aide à l'appel, pas de couche supérieure : elle descend. */
.sticky-call-bar { display: none; }

@media (max-width: 768px) {
    .sticky-call-bar {
        display: flex;
        align-items: center;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        background: var(--c-noir);
        padding: 10px 16px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
        z-index: 900;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
        border-top: 2px solid var(--c-jaune);
    }
    .sticky-call-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        background: var(--c-jaune);
        color: var(--c-noir);
        font-family: var(--font-corps);
        font-weight: 700;
        font-size: 15px;
        text-decoration: none;
        padding: 13px 20px;
        border-radius: 10px;
        letter-spacing: -0.2px;
        transition: background 0.18s ease;
    }
    .sticky-call-btn:hover { background: var(--c-jaune-sombre); }
    /* MARGE DE SÉCURITÉ SOUS LA BARRE D'APPEL.
       74 px correspondait à la hauteur de la barre sur un écran de 375 px et
       plus. Mais sous 360 px le libellé « Appeler un expert : 04 49 38 29 76 »
       passe à la ligne et la barre monte à 95 px : 21 px de contenu passaient
       derrière elle, boutons de fin de carte compris. 110 px couvrent le cas
       le plus large mesuré, avec de la respiration, et l'encoche s'ajoute. */
    body { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
}

/* ── Fix #4 — CTA appel prioritaire dans le drawer de réservation ── */
.drawer-call-cta {
    background: rgba(255,204,0,0.07);
    border: 1.5px solid rgba(255,204,0,0.22);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    text-align: center;
}

.drawer-call-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--c-jaune);
    color: var(--c-noir);
    font-family: var(--font-corps);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    padding: 13px 22px;
    border-radius: 100px;
    letter-spacing: -0.2px;
    transition: background 0.18s ease, transform 0.12s ease;
    width: 100%;
}

.drawer-call-btn:hover  { background: var(--c-jaune-sombre); transform: translateY(-1px); }
.drawer-call-btn:active { transform: translateY(0); }

.drawer-call-ou {
    margin: 10px 0 0;
    font-size: 11px;
    color: rgba(255,255,255,0.32);
    letter-spacing: 0.01em;
}

/* ── Fix #2 — Numéro footer cliquable (tap-to-call) ── */
.footer-tel {
    color: inherit;
    text-decoration: none;
    font-weight: 700;
    transition: color 0.15s ease;
}
.footer-tel:hover { color: var(--c-jaune); }

/* ================================================================
   CARTE "SUR COMMANDE" — < 10 résultats avec filtre marque actif
   Utilise la même structure que .moteur-card
   ================================================================ */
@keyframes carteApparition {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.carte-sur-commande {
    border: 2px solid var(--c-jaune);
    animation: carteApparition 0.35s ease both;
}



.auth-panel--sortie {
    animation: authSortie 0.2s ease forwards;
}

.auth-panel--entree {
    animation: authEntree 0.3s ease forwards;
}

@keyframes authSortie {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-10px); }
}

@keyframes authEntree {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 520px) {
    .auth-card {
        padding: 36px 24px 28px;
        border-radius: 20px;
    }

    .auth-titre { font-size: 1.45rem; }

    .auth-field-row {
        grid-template-columns: 1fr;
    }

    .auth-row-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}


/* ─── Bouton Google (charte officielle Google) ────────────── */
.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 46px;
    background: #ffffff;
    color: #3c4043;
    border: 1.5px solid #dadce0;
    border-radius: var(--r-md);
    font-family: var(--font-corps);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--t-vite), box-shadow var(--t-vite), border-color var(--t-vite);
    margin-bottom: 16px;
    letter-spacing: 0.01em;
}

.btn-google:hover {
    background: #f8f9fa;
    border-color: #c6c6c6;
    box-shadow: 0 1px 4px rgba(60,64,67,0.20), 0 2px 8px rgba(60,64,67,0.10);
}

.btn-google:active {
    background: #f1f3f4;
}

.btn-google svg {
    flex-shrink: 0;
}

/* ─── Panneau utilisateur connecté ───────────────────────── */
.auth-connected {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: var(--r-md);
    margin-bottom: 20px;
}

.auth-connected-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255,204,0,0.12);
    border: 2px solid rgba(255,204,0,0.30);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-jaune);
    flex-shrink: 0;
    overflow: hidden;
}

.auth-connected-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.auth-connected-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.auth-connected-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.30);
}

.auth-connected-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.auth-connected-email {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.40);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ── Dashboard client / admin ─────────────────────────────── */
.dashboard {
    margin-bottom: 8px;
}

.dashboard-titre {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    /* Contraste WCAG : rgba(255,255,255,.28) sur #111 tombait sous 2:1. */
    color: #9CA3AF;
    margin-bottom: 12px;
    padding: 0 2px;
}

.dashboard-grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-bottom: 18px;
}

.dashboard-carte {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 13px;
    border-radius: var(--r-md, 10px);
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.03);
    text-decoration: none;
    color: inherit;
    transition: background .18s, border-color .18s, transform .18s, box-shadow .18s;
    min-width: 0;
    text-align: left;
    cursor: default;
    font-family: inherit;
    font-size: inherit;
    width: 100%;
    box-sizing: border-box;
}

.dashboard-carte--off {
    opacity: .40;
    pointer-events: none;
}

.dashboard-carte--actif {
    cursor: pointer;
}

.dashboard-carte--actif:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.2);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.32);
}

/* Carte d'accès mise en avant (destination principale du rôle) : liseré or
   permanent, et un survol qui renforce l'accent au lieu de le neutraliser. */
.dashboard-carte--primaire {
    border-color: rgba(255,204,0,0.55);
    box-shadow: 0 0 0 3px rgba(255,204,0,0.14);
}

.dashboard-carte--primaire:hover {
    background: rgba(255,204,0,0.08);
    border-color: #FFCC00;
    box-shadow: 0 0 0 3px rgba(255,204,0,0.22), 0 6px 18px rgba(0,0,0,0.32);
}

/* Respect des préférences d'accessibilité : pas de déplacement au survol. */
@media (prefers-reduced-motion: reduce) {
    .dashboard-carte--actif:hover { transform: none; }
}

.dashboard-carte-icone {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255,255,255,0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #D1D5DB;
}

.dashboard-carte-icone--alert {
    background: rgba(255,69,58,.12);
    color: #ff453a;
}

.dashboard-carte-icone--finder {
    background: rgba(255,204,0,.12);
    color: #FFCC00;
}

.dashboard-carte-corps {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding-top: 2px;
}

.dashboard-carte-corps strong {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    /* Contraste WCAG AA sur #111 : ~15:1 (contre ~7:1 auparavant). */
    color: #F3F4F6;
    line-height: 1.3;
}

.dashboard-carte-corps span {
    font-size: 0.70rem;
    /* Descriptions secondaires (« Outil de sourcing → », « Espace administration → ») :
       rgba(255,255,255,.32) donnait ~2,3:1, sous le seuil AA. #9CA3AF ≈ 7,3:1. */
    color: #9CA3AF;
    line-height: 1.4;
}

.dashboard-badge-soon {
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    /* Carte « bientôt disponible » : opacité .40 appliquée par --off, d'où une
       teinte de départ plus claire pour rester lisible une fois atténuée. */
    color: #D1D5DB !important;
    letter-spacing: .03em;
}

@media (max-width: 380px) {
    .dashboard-grille { grid-template-columns: 1fr; }
}

.btn-auth-deconnexion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 44px;
    background: transparent;
    color: rgba(255,255,255,0.50);
    border: 1.5px solid rgba(255,255,255,0.12);
    border-radius: var(--r-md);
    font-family: var(--font-corps);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--t-vite), color var(--t-vite), background var(--t-vite);
}

.btn-auth-deconnexion:hover {
    border-color: rgba(255,59,48,0.40);
    color: var(--c-rouge);
    background: rgba(255,59,48,0.06);
}


/* ================================================================
   CARTE « DISPONIBLE SUR COMMANDE » — toujours en dernier dans la grille
   ================================================================ */
.carte-sur-commande {
    border: 2px dashed #FFCC00;
    border-radius: 16px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 28px 22px;
    box-sizing: border-box;
    min-height: 340px;
    gap: 12px;
}
.carte-sur-commande .csc-badge {
    background: #FFCC00;
    color: #111;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 5px 12px;
    border-radius: 20px;
}
.carte-sur-commande .csc-titre {
    font-size: 17px;
    font-weight: 800;
    color: #111;
    line-height: 1.3;
    margin: 6px 0 0;
}
.carte-sur-commande .csc-texte {
    font-size: 13px;
    color: #666;
    line-height: 1.55;
    margin: 0;
    max-width: 300px;
}
.carte-sur-commande .csc-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
}
.carte-sur-commande .csc-btn-tel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #FFCC00;
    color: #111;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    padding: 12px;
    border-radius: 10px;
    transition: background 0.2s ease;
}
.carte-sur-commande .csc-btn-tel:hover { background: #ffd633; }
.carte-sur-commande .csc-btn-mail {
    background: transparent;
    border: none;
    color: #111;
    font-weight: 600;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}
.carte-sur-commande .csc-btn-mail:hover { color: #000; }


/* ================================================================
   HEADER — COMPTE CONNECTE & MENU DEROULANT
   ----------------------------------------------------------------
   Pose par js/header-compte.js. Tant qu'aucune session Firebase
   n'est active, rien de tout ceci n'existe dans le DOM : le bouton
   « Mon compte » d'origine reste seul en place.
   ================================================================ */

.nav-compte { position: relative; display: inline-flex; }

/* Bouton une fois connecte : avatar + nom + chevron */
.nav-user-btn--connecte { gap: 8px; padding-right: 10px; }
.nav-user-btn--connecte .nav-user-label { max-width: 130px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }

.compte-avatar {
    width: 26px; height: 26px; flex: none; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em;
    background: var(--c-jaune); color: #111;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.10);
}
.compte-avatar--photo { object-fit: cover; background: #1c1c1e; }

.compte-chevron { flex: none; opacity: 0.55; transition: transform 0.18s ease; }
.nav-user-btn--connecte[aria-expanded="true"] .compte-chevron { transform: rotate(180deg); }

/* ── Panneau deroulant ───────────────────────────────────────────
   Flou LEGER et ombre franche : c'est un menu, pas un decor. Il est
   retire du flux tant qu'il est ferme (visibility) pour rester
   inaccessible au clavier et aux lecteurs d'ecran. */
.compte-menu {
    position: absolute; top: calc(100% + 10px); right: 0;
    width: 268px; padding: 6px;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(17, 17, 17, 0.09);
    border-radius: 14px;
    box-shadow: 0 12px 32px -10px rgba(17, 17, 17, 0.28), 0 2px 6px rgba(17, 17, 17, 0.06);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
    z-index: 200;
}
.compte-menu.ouvert { opacity: 1; visibility: visible; transform: translateY(0); }

/* En-tete : e-mail + badge de role */
.compte-menu-tete {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 10px 9px; border-bottom: 1px solid rgba(17, 17, 17, 0.07);
    margin-bottom: 5px;
}
.compte-menu-mail {
    flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: #111;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.compte-badge {
    flex: none; font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em;
    text-transform: uppercase; padding: 3px 7px; border-radius: 999px;
    border: 1px solid transparent;
}
.compte-badge--superAdmin,
.compte-badge--admin   { background: #111; color: var(--c-jaune); border-color: #111; }
.compte-badge--employe { background: rgba(255, 204, 0, 0.16); color: #8a6d00; border-color: rgba(255, 204, 0, 0.45); }
.compte-badge--client  { background: rgba(17, 17, 17, 0.05); color: #55555b; border-color: rgba(17, 17, 17, 0.10); }

/* Entrees */
.compte-menu-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 8px 10px; border: 0; border-radius: 9px;
    background: transparent; text-align: left; text-decoration: none;
    color: #111; cursor: pointer; font-family: inherit;
    transition: background 0.14s ease;
}
.compte-menu-item:hover,
.compte-menu-item:focus-visible { background: rgba(17, 17, 17, 0.055); }
.compte-menu-ico { flex: none; display: inline-flex; color: #6b6b73; }
.compte-menu-item:hover .compte-menu-ico { color: #111; }
.compte-menu-txt { display: flex; flex-direction: column; min-width: 0; }
.compte-menu-txt strong { font-size: 13px; font-weight: 600; line-height: 1.3; }
.compte-menu-txt span   { font-size: 11px; color: #86868b; line-height: 1.35; margin-top: 1px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.compte-menu-vide { padding: 12px 10px; font-size: 12px; line-height: 1.5; color: #86868b; margin: 0; }

/* Pied : separateur + deconnexion */
.compte-menu-pied {
    margin-top: 5px; padding-top: 5px;
    border-top: 1px solid rgba(17, 17, 17, 0.07);
}
.compte-menu-sortie .compte-menu-txt strong { color: #c0392b; }
.compte-menu-sortie:hover { background: rgba(255, 59, 48, 0.08); }
.compte-menu-sortie:hover .compte-menu-ico { color: #c0392b; }

/* Sur fond sombre (header--dark), le menu reste clair : c'est un
   panneau, il ne doit pas se fondre dans la page. Seul l'avatar
   s'adapte au contraste du bouton. */
.header--dark .nav-user-btn--connecte .compte-chevron { opacity: 0.7; }

@media (prefers-reduced-motion: reduce) {
    .compte-menu { transition: none; }
    .compte-chevron { transition: none; }
}

/* Mobile : le menu s'ancre sous le header, pleine largeur utile. */
@media (max-width: 720px) {
    .nav-user-btn--connecte .nav-user-label { display: none; }
    .compte-menu { width: min(280px, calc(100vw - 24px)); right: 0; }
}


/* ================================================================
   PAGE MON PROFIL (mon-compte.html)
   ----------------------------------------------------------------
   Deux formulaires cote a cote sur grand ecran, empiles en dessous
   de 820 px. Palette stricte : fond neutre, titres noirs, accent
   jaune Motro reserve aux actions.
   ================================================================ */

.mc-page { padding: 132px 0 96px; background: var(--c-gris-bg, #f5f5f7); min-height: 70vh; }

/* Ecran d'attente */
.mc-chargement { display: flex; flex-direction: column; align-items: center; gap: 14px;
    padding: 80px 0; color: #86868b; font-size: 14px; }
.mc-spinner { width: 26px; height: 26px; border-radius: 50%;
    border: 2.5px solid rgba(17, 17, 17, 0.12); border-top-color: var(--c-jaune);
    animation: mcTourne 0.75s linear infinite; }
@keyframes mcTourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mc-spinner { animation-duration: 2.4s; } }

/* ── Bandeau d'identite ── */
.mc-entete {
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
    padding: 24px; margin-bottom: 22px;
    background: #fff; border: 1px solid rgba(17, 17, 17, 0.08); border-radius: 16px;
}
.mc-avatar-zone { display: flex; align-items: center; gap: 14px; }
.mc-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
    background: #111; border: 1px solid rgba(17, 17, 17, 0.10); flex: none; }
.mc-avatar-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.mc-identite { min-width: 0; }
.mc-nom  { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; color: #111; margin: 0 0 4px; }
.mc-mail { font-size: 14px; color: #6b6b73; margin: 0 0 10px; overflow-wrap: anywhere; }

.mc-google-note {
    margin: 0 0 22px; padding: 12px 16px; font-size: 13px; line-height: 1.55; color: #8a6d00;
    background: rgba(255, 204, 0, 0.10); border: 1px solid rgba(255, 204, 0, 0.38);
    border-radius: 12px;
}

/* ── Cartes de formulaire ── */
.mc-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.mc-carte {
    padding: 24px; background: #fff;
    border: 1px solid rgba(17, 17, 17, 0.08); border-radius: 16px;
}
.mc-carte--large { grid-column: 1 / -1; margin-top: 22px; }
.mc-carte-titre { font-size: 16px; font-weight: 800; letter-spacing: -0.3px; color: #111; margin: 0 0 6px; }
.mc-carte-desc  { font-size: 13px; line-height: 1.6; color: #6b6b73; margin: 0 0 20px; }

.mc-label { display: block; font-size: 12px; font-weight: 700; color: #111;
    margin: 0 0 6px; letter-spacing: 0.01em; }
.mc-label + .mc-input, .mc-label + .mc-champ-mdp { margin-bottom: 16px; }

.mc-input {
    width: 100%; padding: 11px 13px; font-size: 14px; font-family: inherit; color: #111;
    background: #fff; border: 1px solid rgba(17, 17, 17, 0.16); border-radius: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mc-input::placeholder { color: #b0b0b8; }
.mc-input:focus { outline: none; border-color: var(--c-jaune);
    box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.22); }
.mc-input:disabled { background: #f5f5f7; color: #a0a0a8; cursor: not-allowed; }
.mc-input.erreur { border-color: #ff3b30; box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.14); }

/* Champ mot de passe + bouton oeil */
.mc-champ-mdp { position: relative; }
.mc-champ-mdp .mc-input { padding-right: 44px; }
.mc-eye {
    position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px;
    background: transparent; color: #86868b; cursor: pointer;
    transition: color 0.14s ease, background 0.14s ease;
}
.mc-eye:hover { color: #111; background: rgba(17, 17, 17, 0.05); }
.mc-eye.actif { color: #111; }
.mc-eye:disabled { opacity: 0.4; cursor: not-allowed; }

/* Boutons */
.mc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px; font-size: 14px; font-weight: 700; font-family: inherit;
    color: #111; background: var(--c-jaune); border: 1px solid var(--c-jaune);
    border-radius: 10px; cursor: pointer; text-decoration: none;
    transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.mc-btn:hover { background: var(--c-jaune-sombre, #e6b800); }
.mc-btn:active { transform: translateY(1px); }
.mc-btn:disabled, .mc-btn.loading { opacity: 0.6; cursor: not-allowed; transform: none; }
.mc-btn--clair { background: #fff; border-color: rgba(17, 17, 17, 0.16); color: #111; }
.mc-btn--clair:hover { background: #f5f5f7; border-color: rgba(17, 17, 17, 0.30); }

.mc-lien-discret {
    padding: 0; border: 0; background: none; font-family: inherit; font-size: 12.5px;
    color: #86868b; text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.mc-lien-discret:hover { color: #c0392b; }
.mc-lien-discret:disabled { opacity: 0.4; cursor: not-allowed; }

.mc-actions-doc { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 820px) {
    .mc-page { padding: 108px 0 72px; }
    .mc-grille { grid-template-columns: 1fr; }
    .mc-entete { gap: 18px; }
    .mc-avatar { width: 76px; height: 76px; }
}

/* ==========================================================================
   INDEX DU CATALOGUE (bas de la boutique)
   Liste de vrais liens vers chaque moteur et chaque marque en stock.
   Contenu regenere a chaque build par catalogue_seo.js depuis Firestore.
   Role double : chemin d'exploration pour les robots (le filtre <select>
   ne genere aucun lien suivable) et raccourci reel pour l'utilisateur.
   ========================================================================== */

.catalogue-index {
    margin: 64px 0 8px;
    padding-top: 40px;
    border-top: 1px solid var(--c-gris-bordure);
}

.catalogue-index-titre {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: var(--c-noir);
    margin: 0 0 28px;
}

.catalogue-index-sous-titre {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #55555b;
    margin: 28px 0 12px;
}

.catalogue-index-marques,
.catalogue-index-moteurs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px 28px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.catalogue-index-marques a,
.catalogue-index-moteurs a {
    display: block;
    padding: 7px 0;
    font-size: 14px;
    line-height: 1.45;
    color: #55555b;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}

.catalogue-index-marques a:hover,
.catalogue-index-moteurs a:hover,
.catalogue-index-marques a:focus-visible,
.catalogue-index-moteurs a:focus-visible {
    color: var(--c-noir);
    border-bottom-color: var(--c-jaune);
}

.catalogue-index-compte {
    color: var(--c-gris-moyen);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    .catalogue-index { margin-top: 44px; padding-top: 28px; }
    .catalogue-index-titre { font-size: 19px; }
    .catalogue-index-marques,
    .catalogue-index-moteurs { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GARANTIE — grille des extensions
   Section sombre (data-theme="dark"), comme le reste de la page garantie.
   ═════════════════════════════════════════════════════════════════════════ */
.section-extensions { padding: 5rem 0; background: #111111; }

.ext-grille {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 2.5rem;
}
.ext-carte {
    padding: 1.75rem 1.25rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .10);
    text-align: center;
}
/* La durée la plus longue est mise en avant : c'est la seule hiérarchie utile
   dans une grille dont les quatre membres sont par ailleurs identiques. */
.ext-carte--phare {
    background: rgba(255, 204, 0, .09);
    border-color: rgba(255, 204, 0, .38);
}
.ext-duree {
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
}
.ext-taux {
    margin-top: .5rem;
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--c-jaune, #FFCC00);
    font-variant-numeric: tabular-nums;
}
.ext-note {
    margin: .35rem 0 0;
    font-size: .8125rem;
    color: rgba(255, 255, 255, .58);
}
.ext-exemple {
    margin: 2rem auto 0;
    max-width: 62ch;
    text-align: center;
    font-size: .9375rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .72);
}
.ext-exemple strong { color: #fff; font-weight: 700; }

@media (max-width: 900px) { .ext-grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) {
    .section-extensions { padding: 3.5rem 0; }
    .ext-taux { font-size: 1.875rem; }
}

/* ──────────────────────────────────────────────────────────────
   AJOUTER UN MOT DE PASSE À UN COMPTE GOOGLE
   Le panneau connecté est sur fond sombre : mêmes conventions que
   .btn-auth-deconnexion (blancs semi-transparents), pour que le bloc
   se lise comme une section native du panneau et non comme un ajout.
   ────────────────────────────────────────────────────────────── */
.bloc-mdp {
    margin-bottom: 14px;
    padding: 16px;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.03);
}

.bloc-mdp[hidden] { display: none !important; }

.bloc-mdp-titre {
    margin: 0 0 6px;
    font-family: var(--font-corps);
    font-size: 0.95rem;
    font-weight: 700;
    color: #FFFFFF;
}

.bloc-mdp-texte {
    margin: 0 0 14px;
    font-size: 0.8rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.62);   /* 7,3:1 sur le fond du panneau */
}

.bloc-mdp-champs { display: flex; flex-direction: column; gap: 4px; }

.bloc-mdp-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 6px;
}

.bloc-mdp-input {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--r-md);
    color: #FFFFFF;
    font-family: var(--font-corps);
    font-size: 0.9rem;
    transition: border-color var(--t-vite), background var(--t-vite);
}

.bloc-mdp-input::placeholder { color: rgba(255, 255, 255, 0.32); }

.bloc-mdp-input:focus-visible {
    outline: none;
    border-color: var(--c-jaune);
    background: rgba(255, 255, 255, 0.09);
}

.bloc-mdp-btn {
    width: 100%;
    height: 44px;
    margin-top: 14px;
    background: var(--c-jaune);
    color: var(--c-noir);
    border: none;
    border-radius: var(--r-md);
    font-family: var(--font-corps);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--t-vite), transform var(--t-vite);
}

.bloc-mdp-btn:hover:not(:disabled) { background: var(--c-jaune-sombre); }
.bloc-mdp-btn:active:not(:disabled) { transform: translateY(1px); }
.bloc-mdp-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ──────────────────────────────────────────────────────────────
   SÉLECTEUR DE LANGUE (pied de page)
   Injecté par js/i18n.js. Volontairement DISCRET : c'est un service,
   pas un appel à l'action — d'où un corps de 11 px, des gris sourds et
   aucune bordure ni fond. La langue active est simplement plus claire,
   sans pastille ni surlignage.
   ────────────────────────────────────────────────────────────── */
.selecteur-langue {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 11px;
    letter-spacing: 0.08em;
}

.selecteur-langue-lien {
    color: rgba(255, 255, 255, 0.38);   /* 4,6:1 sur le pied sombre */
    text-decoration: none;
    font-weight: 600;
    padding: 3px 2px;
    border-radius: 3px;
    transition: color var(--t-vite);
}

.selecteur-langue-lien:hover,
.selecteur-langue-lien:focus-visible {
    color: rgba(255, 255, 255, 0.85);
}

.selecteur-langue-lien:focus-visible {
    outline: 2px solid var(--c-jaune);
    outline-offset: 2px;
}

/* Langue affichée : plus claire, et non cliquable au regard (pas de survol
   qui la fasse bouger). Elle reste un lien pour rester copiable/partageable. */
.selecteur-langue-lien.est-actif {
    color: #FFFFFF;
    cursor: default;
}

.selecteur-langue-sep {
    color: rgba(255, 255, 255, 0.16);
    font-size: 10px;
    user-select: none;
}

@media (max-width: 480px) {
    .selecteur-langue { gap: 5px; font-size: 10.5px; }
    /* Cible tactile : le lien reste petit visuellement mais confortable au doigt. */
    .selecteur-langue-lien { padding: 8px 6px; }
}

/* ──────────────────────────────────────────────────────────────
   CORRECTIFS RESPONSIVE — chevauchements mesurés, pas supposés
   ────────────────────────────────────────────────────────────── */

/* 1. ÉCRANS COURTS — voir js/hero.js.
      Une première tentative posait ici `@media (max-height: 820px) {
      .overlay-cta { top: auto; bottom: 4% } }`. SANS EFFET, et même nuisible :
      hero.js écrit `style.top` EN LIGNE, ce qui bat toute feuille de style ;
      `top` et `bottom` se retrouvaient tous deux définis et le bouton était
      calculé avec une hauteur de 0. La correction appartient au script qui
      pose la position, pas au CSS. */

/* 2. TABLETTE (≤ 768 px) — la barre fixe « Appeler un expert » recouvrait la
      barre de statistiques sur 42 px de haut. `body { padding-bottom: 110px }`
      existe déjà, mais il ne protège que la FIN du document : la section héros
      fait 100vh et se termine donc exactement là où la barre fixe est posée.
      C'est au héros lui-même de réserver la place. */
@media (min-width: 600px) and (max-width: 768px) {
    /* TABLETTES SEULEMENT. Mesuré au banc : le chevauchement barre fixe /
       statistiques n'existe qu'à partir de ~600 px de large. Sur téléphone,
       mobile.css impose déjà sa propre mise en page et les 390 px comme les
       320 px étaient PROPRES avant ce correctif — l'y appliquer ne faisait que
       creuser un vide sous le héros. */
    .hero-immersif {
        padding-bottom: calc(96px + env(safe-area-inset-bottom));
    }
}

/* 3. ÉCRANS COURTS — récupérer de la hauteur pour la scène.
      Mesure à 1366×720 : la scène tombe à 210 px, alors que la plaque (46 px)
      et le bouton (40 px) plus leurs écarts en réclament ~245. Le manque est
      d'environ 40 px, et AUCUN repositionnement ne le comble : borner le bouton
      par le bas le fait mordre la plaque (−35 px mesurés), ne pas le borner le
      fait mordre les onglets (−27 px). Le seul vrai correctif est de rendre les
      40 px manquants à la scène, en resserrant les blocs qui l'entourent. */
@media (max-height: 880px) and (min-width: 769px) {
    .hero-immersif {
        padding-top: 66px;      /* au lieu de 86 : le nav fait 58 px, on rogne le jeu */
        padding-bottom: 8px;
    }
    .hero-top-text  { padding: 4px 24px 2px; }
    .hero-title     { margin-bottom: 4px; }
    .hero-subtitle  { margin-bottom: 4px; }
    .tabs-hero      { margin-top: 6px; }
    .hero-stats     { margin-top: 4px; }
}

/* 4. ÉCRANS COURTS ET LARGES — on sort de la superposition.
      C'est la correction de fond du chevauchement bouton/onglets, et la seule
      qui tienne arithmétiquement. La plaque est posée à 72 % de la hauteur de
      scène H, mesure 46 px, et le bouton réclame 40 px plus 8 d'écart : la
      superposition exige H >= 336 px. À 1366×720 on ne dispose que de 252 px,
      même après avoir resserré les blocs voisins. Déplacer le bouton ne fait
      que choisir QUI il chevauche — les onglets, ou la plaque.

      On empile donc plaque et bouton DANS LE FLUX, exactement comme mobile.css
      le fait déjà sous 768 px de large. Deux éléments qui se suivent dans un
      flux ne peuvent pas se chevaucher : le défaut disparaît par construction,
      il n'est plus arbitré.

      Le bloc est ancré par le BAS de la scène : calé sur le bas, il ne peut pas
      en déborder quelle que soit la hauteur restante.

      Seuil 880 px (et non 800) : à 900 px de haut la superposition tient encore
      (11 px de marge mesurés), à 864 px — les portables 1536×864, très répandus —
      elle ne tient plus. `min-width: 769px` laisse mobile.css gérer les écrans
      étroits, qui appliquent déjà leur propre empilement. */
@media (max-height: 880px) and (min-width: 769px) {

    .overlay-saisie {
        position: absolute  !important;
        inset: auto         !important;
        bottom: 12px        !important;
        left: 50%           !important;
        transform: translateX(-50%) !important;
        /* Jamais plus large que la scène : `.overlay-saisie` en est l'enfant, donc
           100 % la cale exactement dessus (336 px à 1366×720). Une valeur fixe
           de 460 px débordait de la voiture et le bloc semblait flotter. */
        width: min(100%, 440px)     !important;
        display: flex       !important;
        flex-direction: column !important;
        align-items: stretch   !important;
        gap: 10px           !important;
        padding: 0          !important;
        background: transparent !important;
        pointer-events: auto !important;
        z-index: 16         !important;   /* au-dessus de la voiture, sous Contact (25) */
    }

    /* Les trois blocs repassent dans le flux. `!important` est ici indispensable
       et non paresseux : hero.js écrit `top`, `left`, `width` et `transform` EN
       LIGNE, et un style en ligne bat toute règle de feuille de style. */
    .overlay-plaque,
    .overlay-float,
    .overlay-cta {
        position: relative  !important;
        top: auto           !important;
        left: auto          !important;
        bottom: auto        !important;
        width: 100%         !important;
        min-width: 0        !important;
        max-width: none     !important;
        transform: none     !important;
        margin: 0           !important;
        pointer-events: auto !important;
    }

    /* Ces trois blocs s'excluent par `opacity`, pas par `display` : dans un flux
       empilé, celui qui est masqué occuperait quand même sa hauteur et laisserait
       un trou. On le retire donc réellement du flux. */
    .overlay-plaque:not(.visible),
    .overlay-float:not(.visible),
    .overlay-cta:not(.visible) {
        display: none       !important;
    }
}

/* 5. BANDE BLANCHE SOUS LE PIED DE PAGE (mobile)
      `body { padding-bottom: 110px }` réserve la hauteur de la barre fixe
      « Appeler un expert » pour que le contenu ne finisse pas dessous. Mais ce
      padding appartient au BODY, dont le fond est blanc, alors que le pied de
      page est en #111111 : on voyait donc 110 px de blanc entre la fin du pied
      et la barre noire.
      La réserve est déplacée sur le PIED lui-même, qui l'occupe avec sa propre
      couleur. La barre fixe se pose alors sur du sombre et la jointure
      disparaît. Vérifié : les 8 pages qui portent la barre ont toutes un
      `<footer class="footer">`, aucune ne perd sa garde. */
@media (max-width: 768px) {
    body {
        padding-bottom: 0;
    }
    .footer {
        padding-bottom: calc(110px + env(safe-area-inset-bottom));
    }
}