/* ================================================================
   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:  'Manrope', -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;
    /* Couche propre : rien de la page ne peut plus s’intercaler entre le
       fond de la capsule et son texte, quels que soient les contextes
       d’empilement créés ailleurs (le hero en crée plusieurs). */
    isolation: isolate;
    /* La bande fixe fait toute la largeur mais n’est VISIBLE que sur la
       capsule. Sans cela elle intercepte les clics sur toute la largeur de
       l’écran — d’autant plus gênant depuis que la barre est resserrée :
       on cliquerait dans le vide de part et d’autre. Les enfants
       réactivent la cible. */
    pointer-events: none;
}
.header > * { pointer-events: auto; }

/* 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;
    /* RETOUR capsule → bandeau (haut de page). Ces transitions sont celles qui
       jouent quand .scrolled est RETIRÉE : auparavant seules fond, ombre et
       bordure y figuraient, si bien que largeur, hauteur, marges et arrondi
       revenaient d'un coup pendant que l'ombre s'effaçait. Désormais tout se
       ré-encastre ENSEMBLE, sur la courbe de l'aller (0,4 s, très sortante).
       ⚠ Toujours pas `transition: all` (le flou ne doit pas être animé). */
    transition:
        max-width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        padding 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        border-radius 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Island activé au scroll */
.header.scrolled .nav,
.header.menu-open .nav {
    /* 0,92 et non 0,88 : le hero est une image claire très contrastée, et
       un texte de navigation doit rester lisible SANS dépendre du flou. */
    background: rgba(255, 255, 255, 0.92);
    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);
}

/* REPLI : navigateur sans `backdrop-filter`, ou flou désactivé (économie
   d’énergie, pilote graphique, réglage d’accessibilité). Sans ce repli, la
   barre redevient à moitié transparente et le contenu défile au travers —
   exactement le défaut constaté. Une navigation illisible n’est pas une
   dégradation acceptable : on prend un aplat franc. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .header.scrolled .nav,
    .header.menu-open .nav {
        background: #ffffff;
        border-color: rgba(15, 23, 42, 0.10);
    }
}

/* ──────────────────────────────────────────────────────────────
   PILL-BAR « DYNAMIC ISLAND » — capsule flottante au scroll

   Un SEUL en-tête, qui se resserre : pas une seconde barre ajoutée
   sous la première. Deux <nav> portant les mêmes liens donneraient deux
   points de repère identiques à un lecteur d'écran et deux cibles au
   clavier, pour une navigation unique.

   Le flou est ici JUSTIFIÉ (Contexte §24 : un panneau qui flotte
   réellement au-dessus du contenu) — c'est le seul cas admis. Il reste
   ⚠⚠ NE JAMAIS REMETTRE `contain: paint` NI `will-change` ICI.
   Première version : les deux y étaient, « pour confiner les repeints ».
   Résultat en production — le verre dépoli ne se peignait plus du tout et
   la voiture du hero traversait visuellement le logo et les liens.
   • `contain: paint` fait de l’élément un BACKDROP ROOT : son propre
     `backdrop-filter` n’a plus d’arrière-plan à échantillonner.
   • `will-change` le promeut en couche composée, ce qui casse le même
     échantillonnage — et il ne servait à rien : `max-width` et `height`
     ne sont pas des propriétés composables, `will-change` n’accélère que
     `transform` et `opacity`.
   L’élément est une pastille de 54 px de haut : il n’y avait aucun repeint
   coûteux à confiner. Le garde-fou du §22 s’applique aux GRANDES surfaces.
   ────────────────────────────────────────────────────────────── */
.header.scrolled .nav {
    /* Capsule : largeur resserrée, centrée, coins pleinement arrondis. */
    max-width: min(920px, calc(100% - 32px));
    height: 54px;
    padding: 0 22px;
    /* 28 px = demi-hauteur maximale de la capsule (56 px au survol) : coins
       pleinement arrondis, ET interpolables. Avec 999 px, le retour vers 18 px
       restait visuellement rond jusqu'aux derniers 1 % puis « claquait ». */
    border-radius: 28px;
    /* Courbe unique, très sortante : le mouvement démarre franc et se pose
       sans rebond. ⚠ PAS `transition: all` : `all` animerait aussi
       `backdrop-filter`, donc referait le flou à chaque image pendant toute
       la transition — le coût que le §22 demande précisément d’éviter. La
       liste explicite laisse le flou s’appliquer d’un coup, sans être animé. */
    transition:
        max-width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        padding 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        border-radius 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.32s ease, box-shadow 0.32s ease,
        border-color 0.32s ease;
}

/* ── MODE COMPACT — s’applique dès que la capsule existe, donc JAMAIS en
   haut de page. À l’arrivée, l’en-tête reste complet : numéro en toutes
   lettres et nom du compte lisibles, parce que c’est là qu’on décide
   d’appeler. Une fois la lecture engagée, ces deux libellés ne servent plus
   qu’à élargir la capsule et à la faire mordre sur le contenu. */
.header.scrolled .nav-actions { gap: 12px; }

/* TÉLÉPHONE → pastille noire, icône seule.
   ⚠ Le numéro est un NŒUD DE TEXTE nu dans le lien (pas de <span> à
   masquer) : `font-size: 0` est le seul levier purement CSS, et c’est déjà
   l’idiome du projet (sidebar du CRM, §11). L’alternative — emballer le
   numéro dans un <span> — imposait de retoucher les 14 pages publiques.
   Le numéro RESTE dans l’arbre d’accessibilité, et le lien porte déjà
   `aria-label="Appeler Motro France"` : rien n’est perdu pour un lecteur
   d’écran ni pour le référencement. L’icône garde sa taille, fixée par ses
   attributs width/height et non en em. */
.header.scrolled .btn-phone {
    font-size: 0;
    gap: 0;
    width: 38px;
    height: 38px;
    padding: 0;
    justify-content: center;
    border-radius: 100px;
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                padding 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.18s ease;
}
.header.scrolled .btn-phone svg { flex: none; }

/* COMPTE → carré aux bords arrondis, avatar (ou icône) seul.
   Une seule règle couvre les trois états du libellé : « Mon compte » par
   défaut, le prénom, ou le nom complet — `header-compte.js` écrit toujours
   dans le MÊME `.nav-user-label`. */
.header.scrolled .nav-user-label { display: none; }
.header.scrolled .nav-user-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    gap: 0;
    justify-content: center;
    border-radius: 10px;
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                padding 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                border-color var(--t-vite), background var(--t-vite);
}
/* Le chevron du menu compte n’a plus de libellé à annoncer : il ferait du
   bruit dans une pastille de 38 px. */
.header.scrolled .nav-user-btn--connecte .compte-chevron { display: none; }
.header.scrolled .nav-user-btn--connecte { gap: 0; padding-right: 0; }

@media (prefers-reduced-motion: reduce) {
    .header.scrolled .btn-phone,
    .header.scrolled .nav-user-btn { transition: none; }
}

/* Descente RAPIDE : la capsule se resserre pour rendre la page. Elle ne
   disparaît pas — on ne retire pas la navigation à quelqu'un qui lit. */
.header.scrolled.nav-compact .nav {
    max-width: min(720px, calc(100% - 32px));
    height: 48px;
    padding: 0 16px;
}

/* Survol : la capsule reprend sa respiration. `:focus-within` va avec —
   une navigation au clavier doit obtenir exactement ce que le survol donne. */
@media (hover: hover) and (pointer: fine) {
    .header.scrolled .nav:hover,
    .header.scrolled .nav:focus-within,
    .header.scrolled.nav-compact .nav:hover,
    .header.scrolled.nav-compact .nav:focus-within {
        max-width: min(1040px, calc(100% - 24px));
        height: 56px;
        padding: 0 26px;
    }
}

/* Menu mobile ouvert : la capsule redevient une barre pleine, sinon le
   panneau déroulant sortirait d'une pastille trop étroite.
   ⚠ Le second sélecteur n'est PAS redondant : `.header.scrolled.nav-compact
   .nav` pèse 0,4,0 et l'emporterait sur un simple `.header.menu-open .nav`
   (0,3,0). Sans lui, ouvrir le menu pendant une descente rapide laissait le
   panneau sortir d'une capsule de 720 px. */
.header.menu-open .nav,
.header.menu-open.nav-compact .nav {
    max-width: 1280px;
    height: 58px;
    padding: 0 28px;
    border-radius: 18px;
}


@media (prefers-reduced-motion: reduce) {
    .nav, .btn-phone, .nav-user-btn { transition: background 0.2s ease, box-shadow 0.2s ease; }
    .header.scrolled .nav { transition: background 0.2s ease, box-shadow 0.2s ease; }
    .header.scrolled.nav-compact .nav { max-width: min(920px, calc(100% - 32px)); height: 54px; padding: 0 22px; }
}

.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;
    /* Retour au grand format : le numéro réapparaît en grandissant (font-size)
       au lieu de surgir, sur la courbe de la capsule. */
    transition: background 0.18s ease,
                font-size 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                padding 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                gap 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    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;
}

/* TABLETTE ET PETIT PORTABLE (769–1199 px) — la barre complète ne tient pas.
   Les liens sont centrés EN ABSOLU : rien ne les empêchait de passer sous le
   bouton téléphone, qui recevait alors leurs clics (et inversement). Mesuré
   dans Chrome : à 820–1000 px, « Garantie » et « Contact » étaient recouverts.
   L'ancienne règle (≤ 900 px) voulait remplacer le numéro par « Tél. », mais
   le numéro est un nœud de texte nu : on obtenait « 04 49 38 29 76 Tél. » et
   l'icône disparaissait. On reprend ici le format de la capsule compacte :
   pastille-icône (le lien garde son aria-label), puis compte en icône seule. */
@media (min-width: 769px) and (max-width: 1199px) {
    .btn-phone { font-size: 0; gap: 0; width: 38px; height: 38px; padding: 0; justify-content: center; }
    .btn-phone svg { flex: none; }
    .nav-links { gap: 22px; }
}
@media (min-width: 769px) and (max-width: 979px) {
    .nav-user-label { display: none; }
    .nav-user-btn { width: 38px; height: 38px; padding: 0; gap: 0; }
    .nav-user-btn--connecte .compte-chevron { display: none; }
    .nav-links { gap: 18px; }
}

@media (max-width: 768px) {
    .nav-user-label { display: 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);
    /* 2026-10-08 : plus d'overflow: hidden VERTICAL — le canevas 3D déborde
       au-dessus et au-dessous du viewer pendant les rotations. Seul l'axe
       horizontal est rogné (clip, pas hidden : clip + visible est permis). */
    overflow-x: clip;
    overflow-y: visible;
}

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

/* Badge « Moteurs testés & garantis » retiré le 2026-10-09 : la garantie est dans le bandeau sous les onglets. */

.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;
    margin-left: auto;
    margin-right: auto;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* ⚠ LA LIGNE QUI MANQUAIT — cause du décalage à gauche.
       Sans `align-items`, un conteneur flex en colonne vaut `stretch`. Or
       `.car-viewer` a un `aspect-ratio` ET une hauteur : sa largeur en
       DÉCOULE, elle est donc définie, et `stretch` ne peut plus l’étirer —
       l’élément retombe alors au DÉBUT de l’axe transversal, c’est-à-dire à
       gauche. Le défaut restait discret tant que la voiture remplissait la
       scène ; le plafond `max-height` posé le 30/09 a réduit sa hauteur,
       donc sa largeur, et l’a rendu visible.
       La plaque et le bouton suivent tout seuls : `hero.js` les positionne
       à partir de la géométrie de `.car-viewer`. */
    align-items: center;
    text-align: 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;
    /* ⚠⚠ NE JAMAIS POSER `align-self` ICI. Une version l’a fait — `stretch`,
       comme garde-fou contre un effondrement de largeur — et cela a REMIS le
       décalage à gauche que `.car-stage { align-items: center }` venait de
       corriger. Deux règles à connaître, et la seconde est contre-intuitive :
         • `align-self` sur l’enfant ÉCRASE `align-items` du parent ;
         • `stretch` sur un élément dont la taille transversale est DÉJÀ
           définie ne « ne fait rien » : il se comporte comme `flex-start`.
       Or ici la largeur est définie par `aspect-ratio × height`. Le bloc
       partait donc se coller à gauche, et le commentaire d’alors affirmait
       exactement l’inverse.
       L’effondrement de largeur sur mobile est traité là où il se produit :
       `mobile.css` pose `width: 100% !important` sur `.car-viewer`, ce qui
       est explicite et local. Voir Contexte §39. */
    /* PLAFOND GÉNÉRAL, à toutes les tailles et pas seulement sur portable.
       `.car-stage` est en `flex: 1` : sans plafond, la voiture prend toute
       la hauteur restante et la barre d’onglets vient se poser dessus. Le
       z-index 20 posé plus bas règle l’ordre de peinture — il ne crée pas
       d’espace. En `vh` d’abord, pour que le cadrage tienne sur un écran
       court comme sur un grand ; borné à 440 px pour qu’une voiture de
       trace filaire ne devienne pas un poster sur un 4K. */
    /* Relevé le 2026-10-08 (visualiseur 3D) : la hauteur reste celle de la zone
       flexible (height: 100 %) — le plafond ne fait grandir la voiture que là où
       la place existe, sans repousser les onglets hors du hero (100vh, overflow
       hidden). */
    max-height: min(56vh, 520px);
}
/* ÉCRAN LARGE (visualiseur 3D, 2026-10-08) : plafond relevé à 580 px. La
   SURFACE DE DESSIN de la voiture (canevas, js/clio3d.js) fait toujours au
   moins 580 px de haut : elle déborde au-dessus et au-dessous du viewer (hero
   en overflow-y visible), si bien que la voiture n'est jamais coupée, même en
   pleine rotation, tout en gardant les onglets dans le premier écran. */
@media (min-width: 769px) {
    .car-viewer    { max-height: 580px; }
}

/* ──────────────────────────────────────────────────────────────
   GRANDS ÉCRANS — centrage de la scène, affirmé plutôt que supposé

   `.car-stage` centre déjà ses enfants plus haut. Ce bloc le REDIT pour les
   écrans larges, et surtout il pose `align-self: auto` sur `.car-viewer` :
   `auto` signifie « suivre le `align-items` du parent ». C’est une assertion
   positive, qui neutralise tout `align-self` qu’une règle ultérieure poserait
   par mégarde — le défaut est déjà arrivé une fois.

   Les surcouches (plaque, bouton, panneau) restent centrées par `hero.js`,
   qui les pose en `left: 50%` + `translateX(-50%)` À PARTIR de la géométrie
   réelle de `.car-viewer`. Centrer le conteneur suffit donc : tout ce qui est
   posé dessus suit, sans règle supplémentaire.
   ────────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
    .car-stage {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    /* La ligne qui compte : elle rend au parent la décision d’alignement. */
    .car-viewer { align-self: auto; }
}

/* ──────────────────────────────────────────────────────────────
   ÉCRANS DE PORTABLE — voiture et plaque qui se télescopaient

   Le hero fait `height: 100vh` moins 86 px d'en-tête. Sur un portable
   13–15" (≈ 768–864 px de haut), il reste ~700 px pour le texte ET la
   scène ; la voiture prenait toute la hauteur restante et la plaque,
   posée dessus par `hero.js`, remontait dans le texte.

   ⚠ La condition porte sur la HAUTEUR, pas sur la largeur. Un écran
   1536 px de large peut être un portable (864 px de haut) comme un
   moniteur externe (1440 px) : seul le second a la place. Cibler
   `1366–1536px` de large aurait bridé le moniteur sans raison et raté
   un portable 1280 px.

   La plaque suit automatiquement : `hero.js` recalcule sa position à
   partir de `carViewer.clientHeight` via un ResizeObserver.
   ────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) and (max-height: 900px) {
    .car-stage  { padding: 0 24px; gap: 24px; }
    /* De l'air entre l'accroche et la scène, des deux côtés. */
    .hero-top-text   { padding: 8px 24px 16px; }
    .hero-immersif   { padding-top: 78px; padding-bottom: 24px; }
}

/* Portable très bas de plafond (≈ 720 px) : on resserre encore. */
@media (min-width: 1024px) and (max-height: 760px) {
    .hero-top-text { padding: 4px 24px 12px; }
}


/* ──────────────────────────────────────────────────────────────
   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);
}


/* Visualiseur 3D (js/clio3d.js) : canevas posé sur le viewer, élargi de part
   et d'autre pour les vues longues (profil, dessous). Sous les surcouches de
   saisie (z-index 10). Les images restent dessous tant que le canevas n'est
   pas apparu, puis sont masquées SANS sortir du flux. */
.viewer-3d-canvas {
    position: absolute;
    top: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);   /* fondu d'apparition après le 1er rendu */
}
/* ÉCRAN LARGE — PAS DE FLASH AU CHARGEMENT (2026-10-08). Les images du hero sont
   masquées PAR DÉFAUT : seule la 3D s'affiche, en fondu. hero.js pose
   .repli-image quand il faut les montrer (3D impossible, en échec ou lente) ;
   sans JavaScript, css/sans-js.css (noscript) les rétablit. Tant que ni la 3D
   ni le repli ne sont là : squelette discret, et surcouches (plaque, bouton,
   panneau) masquées pour ne pas flotter dans le vide. */
@media (min-width: 769px) {
    .car-viewer:not(.repli-image) .car-image { visibility: hidden !important; }
    .car-viewer:not(.repli-image):not(.vue-3d) .overlay-plaque,
    .car-viewer:not(.repli-image):not(.vue-3d) .overlay-cta,
    .car-viewer:not(.repli-image):not(.vue-3d) .overlay-float { opacity: 0 !important; pointer-events: none !important; }
}
/* Attente (toutes tailles) : petit anneau discret (taupe de la grille) + ombre au sol qui respire. */
@media all {
    .car-viewer::before,
    .car-viewer::after {
        content: '';
        position: absolute;
        left: 50%;
        pointer-events: none;
        transition: opacity 0.5s ease;
    }
    .car-viewer::before {           /* anneau */
        top: 46%;
        width: 26px;
        height: 26px;
        margin-left: -13px;
        border-radius: 50%;
        border: 2px solid rgba(158, 154, 144, 0.22);
        border-top-color: rgba(158, 154, 144, 0.75);
        animation: squelette-tour 0.9s linear infinite;
    }
    .car-viewer::after {            /* ombre au sol */
        bottom: 20%;
        width: 62%;
        height: 7%;
        transform: translateX(-50%);
        border-radius: 50%;
        background: radial-gradient(closest-side, rgba(15, 23, 42, 0.14), rgba(15, 23, 42, 0));
        animation: squelette-souffle 1.6s ease-in-out infinite;
    }
    .car-viewer.vue-3d::before, .car-viewer.vue-3d::after,
    .car-viewer.repli-image::before, .car-viewer.repli-image::after { opacity: 0; animation: none; }
}
@keyframes squelette-tour    { to { transform: rotate(360deg); } }
@keyframes squelette-souffle { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .car-viewer::before, .car-viewer::after { animation: none !important; }
}
.viewer-3d-canvas.pret { opacity: 1; }
.car-viewer.vue-3d .car-image { visibility: hidden !important; }
/* Téléphone : la 3D y est aussi affichée depuis le 2026-10-08 (css/mobile.css, section K). */

/* ──────────────────────────────────────────────────────────────
   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)
   ⚠ LA PLAQUE ENTIÈRE DOIT TENIR (2026-10-20). Le champ fait 98 px (plaque de
   155 px moins les bandes et la bordure). En 20 px avec 3 px d'interlettre,
   « AB 123 CD » mesurait 143 px : le champ défilait et le visiteur ne voyait que
   « 123 CD », sur ordinateur comme sur téléphone. Courier New avance de 0,6 em :
   9 caractères en 17 px sans interlettre = 91,8 px, dans 94 px utiles
   (padding 2 px). 17 px reste au-dessus de 16 px : pas de zoom iOS au focus.
   Même métrique dans le mockup « Fonctionnement Motro » (css/parcours.css). */
.plate-input {
    flex: 1;
    border: none;
    background: #FFCC00;
    font-family: var(--font-mono);
    font-size: 17px;
    font-weight: 900;
    color: var(--c-noir);
    text-align: center;
    letter-spacing: 0;
    text-transform: uppercase;
    outline: none;
    padding: 0 2px;
    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 de saisie : fondu-glissé quand ses champs changent (VIN → code moteur → modèle). */
@keyframes carte-saisie-change {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.float-panel.change { animation: carte-saisie-change 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
@media (prefers-reduced-motion: reduce) { .float-panel.change { animation: none; } }

/* 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;
    /* 10 px fixes collaient les onglets au bas de la voiture dès que la
       hauteur se resserrait. L’écart suit désormais la hauteur de la fenêtre,
       avec un plancher qui garantit qu’ils ne se touchent jamais. */
    margin-top: clamp(14px, 2.4vh, 26px);
    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);
}

/* PASTILLE GLISSANTE — le fond noir de l'onglet actif se DÉPLACE d'un onglet à
   l'autre (translateX + largeur) au lieu de sauter. Posée par hero.js
   (placerPastille) ; tant qu'elle n'est pas prête, l'onglet garde son propre
   fond noir (aucun saut au chargement, ni sans JavaScript). */
.tab-pastille {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-radius: var(--r-full);
    background: var(--c-noir);
    box-shadow: 0 2px 10px rgba(0,0,0,0.22);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
}
.tabs-hero.pastille-prete .tab-pastille {
    opacity: 1;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.tabs-hero .tab { position: relative; z-index: 1; }
.tabs-hero.pastille-prete .tab.active { background: transparent; box-shadow: none; }
.tabs-hero.pastille-prete .tab { transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform var(--dur-press) var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
    .tabs-hero.pastille-prete .tab-pastille { transition: none; }
}


/* ──────────────────────────────────────────────────────────────
   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;
}

/* BANDEAU DE GARANTIES (2026-10-09) — un fait par cellule : icône au trait,
   valeur en gras, libellé en clair. Remplace le gabarit « gros chiffre + petit
   libellé » (libellés à 10,5 px, sous le plancher de lisibilité). */
.stat {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    gap: 10px;
    cursor: default;
}
.stat-icone {
    flex: none;
    width: 34px;
    height: 34px;
    padding: 8px;
    border-radius: 50%;
    background: var(--c-blanc);
    color: var(--c-noir);
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.06), inset 0 0 0 1px rgba(17, 17, 17, 0.06);
}
.stat-texte {
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-align: left;
    gap: 1px;
}
.stat-number {
    font-size: 15px;
    font-weight: 800;
    color: var(--c-noir);
    letter-spacing: -0.2px;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.stat-prefixe {
    font-size: 12px;
    font-weight: 600;
    color: var(--c-gris-moyen);
    letter-spacing: 0;
}
.stat-label {
    font-size: 12px;
    color: var(--c-gris-moyen);
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
}

.stat-divider {
    width: 1px;
    height: 32px;
    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: 14px; }
    .stat-icone  { width: 30px; height: 30px; padding: 7px; }
    .stat        { padding: 9px 10px; gap: 8px; }

    /* 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),
                padding 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                border-radius 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    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: minmax(0, 1fr);   /* minmax : une colonne ne dépasse jamais l'écran */
        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.62);   /* 7,6:1 — etait 0.42, soit 4,07:1 */
    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;
}

/* ── Avis client (Trustpilot) : zone libre sous les colonnes 2 à 4 (28/10/2026) ──
   Une ligne : la question, puis le bouton Trustpilot (iframe : son contenu est centré dans
   la largeur donnée ; 240 px le gardent sur UNE ligne, le retrait le cale sur la question). */
/* La colonne Marque, plus haute, couvre deux rangées : la bande remonte dans la zone libre à sa droite. */
.footer-col-marque { grid-row: span 2; }

.footer-avis {
    grid-column: 2 / -1;
    align-self: start;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 20px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-avis-titre {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
}

.footer-avis .trustpilot-widget {
    flex: 0 0 240px;
    margin-left: -24px;
}

@media (max-width: 960px) {
    .footer-col-marque { grid-row: auto; }
    .footer-avis { grid-column: 1 / -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;
    /* 7,2:1 — etait 0.22, soit 1,98:1. Une mention legale doit rester
       lisible, pas juste presente. */
    color: rgba(255, 255, 255, 0.60);
}

.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.35);   /* separateur : visible sans peser */
    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-input { flex: none; width: 100%; }   /* en colonne, flex: 1 écrasait le champ à 22 px */

    .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); }
/* Survol jaune dans TOUS les états de l'en-tête. Les trois règles ci-dessus
   pèsent autant que `.nav-links a:hover` (0,2,1) et viennent après : elles
   écrasaient le jaune dès que la capsule « Dynamic Island » apparaissait. */
.header--dark .nav-links a:hover,
.header.scrolled .nav-links a:hover,
.header.menu-open .nav-links a:hover,
.header .nav-links a:focus-visible                         { color: var(--c-jaune); }

/* 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; }

/* ─── Portail motro.online (29/10/2026) : bandeau révélé sur le portail seulement ─── */
.auth-portail {
    margin: -20px 0 28px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255,204,0,0.06);
    border: 1px solid rgba(255,204,0,0.18);
    text-align: center;
}
.auth-portail[hidden] { display: none; }
.auth-portail-titre {
    display: block;
    margin-bottom: 4px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #FFCC00;
}
.auth-portail-texte { display: block; font-size: 0.86rem; line-height: 1.5; color: rgba(255,255,255,0.78); }
.auth-portail-retour {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255,255,255,0.78);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.auth-portail-retour:hover, .auth-portail-retour:focus-visible { color: #ffffff; }
.auth-portail-retour[hidden] { display: none; }
#portailReprise { margin-left: 14px; color: #FFCC00; }
#lienRetourSite { margin: -18px 0 22px; }
/* Lien « Portail de l'équipe » des pages de connexion publiques (séparation employés / clients). */
.auth-equipe { margin-top: 14px; text-align: center; font-size: 0.82rem; color: rgba(255,255,255,0.62); }
.auth-equipe[hidden] { display: none; }
.auth-equipe a { color: rgba(255,255,255,0.86); font-weight: 600; text-underline-offset: 3px; }
.auth-equipe a:hover, .auth-equipe a:focus-visible { 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;
    /* 18,4:1 sur le #080808 de .section-boutique. C'etait var(--c-noir),
       soit 1,06:1 : le titre etait invisible. */
    color: #F5F5F7;
    margin: 0 0 28px;
}

.catalogue-index-sous-titre {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #A8A8B0;   /* 8,5:1 — etait #55555b, soit 2,71:1 */
    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: #B8B8C0;   /* 10,2:1 — etait #55555b, soit 2,71:1 */
    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: #FFFFFF;
    border-bottom-color: var(--c-jaune);
}

.catalogue-index-compte {
    color: #8A8A92;   /* 5,9:1 sur fond sombre */
    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(auto-fit, minmax(min(100%, 9.5rem), 1fr)); } }   /* 2 colonnes, 1 si le texte est agrandi */
@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.62);   /* 7,6:1 — etait 0.38, tout juste au seuil */
    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.35);
    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.

      26/10/2026 — RÉSERVÉ AU REPLI PAR IMAGES (`.car-viewer:not(.vue-3d)`) : avec la 3D, la plaque
      suit la vraie plaque du véhicule et le bouton se cale dessous (hero.js), à toute hauteur
      d'écran — décision de l'exploitant : la plaque se pose SUR la voiture, jamais à côté. */
@media (max-height: 880px) and (min-width: 769px) {

    .car-viewer:not(.vue-3d) .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. */
    .car-viewer:not(.vue-3d) .overlay-plaque,
    .car-viewer:not(.vue-3d) .overlay-float,
    .car-viewer:not(.vue-3d) .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. */
    .car-viewer:not(.vue-3d) .overlay-plaque:not(.visible),
    .car-viewer:not(.vue-3d) .overlay-float:not(.visible),
    .car-viewer:not(.vue-3d) .overlay-cta:not(.visible) {
        display: none       !important;
    }
}

/* 4 bis. ÉCRANS COURTS, VISUALISEUR 3D (26/10/2026) — onglets VIN, code moteur, modèle : le panneau
      flotte, centré, AU-DESSUS de la voiture. Plus large et plus compact (indice sur une ligne,
      ~100 px au lieu de ~147) : la 3D, recadrée sous lui (zoneLibre), garde la voiture entière. */
@media (max-height: 880px) and (min-width: 769px) {
    .car-viewer.vue-3d .overlay-float { top: 2%; width: min(88%, 430px); }
    .car-viewer.vue-3d .float-panel   { padding: 12px 16px; }
    .car-viewer.vue-3d .float-label   { margin-bottom: 6px; }
    .car-viewer.vue-3d .float-input   { padding-top: 9px; padding-bottom: 9px; }
}

/* 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));
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE « PAIEMENT EN PLUSIEURS FOIS »  (paiement-plusieurs-fois.html)
   Préfixe `pf-`. Aucune de ces règles ne s'applique ailleurs sur le site.
   Les couleurs viennent des jetons de marque déjà définis plus haut, y compris
   `--c-klarna-rose` / `--c-klarna-noir` posés lors du passage d'Oney à Klarna.
   ═══════════════════════════════════════════════════════════════════════════ */

.pf-section { padding: 72px 0; }
.pf-section--gris { background: var(--c-gris-bg); }

.pf-chapeau {
    font-size: 16px;
    line-height: 1.7;
    color: var(--c-gris-moyen);
    max-width: 640px;
    margin: 0 0 44px;
}

.pf-intro {
    max-width: 760px;
    font-size: 16.5px;
    line-height: 1.85;
    color: #333;
}
.pf-intro p + p { margin-top: 18px; }

/* ── Les offres ─────────────────────────────────────────────────────────── */
/* `auto-fit` plutôt qu'un nombre fixe de colonnes : la grille tient avec une
   seule offre aujourd'hui, et accueillera la seconde sans retouche. */
.pf-offres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 56px;
}

.pf-offre {
    background: var(--c-blanc);
    border: 1px solid var(--c-gris-bordure);
    border-radius: 16px;
    padding: 28px;
}

.pf-offre-marque {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.pf-badge-klarna {
    background: var(--c-klarna-rose);
    color: var(--c-klarna-noir);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: -0.2px;
    padding: 6px 14px;
    border-radius: 100px;
}

.pf-badge-oney {
    background: var(--c-anthracite);
    color: var(--c-blanc);
    font-weight: 800;
    font-size: 14px;
    padding: 6px 14px;
    border-radius: 100px;
}

.pf-offre-etat {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: 100px;
}
.pf-offre-etat--actif { background: rgba(34, 160, 90, .12); color: var(--c-vert); }

.pf-offre-titre {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.5px;
    color: var(--c-noir);
    margin: 0 0 12px;
}

.pf-offre-texte { font-size: 15px; line-height: 1.7; color: #444; margin: 0 0 18px; }

.pf-offre-liste { list-style: none; padding: 0; margin: 0; }
.pf-offre-liste li {
    position: relative;
    padding-left: 22px;
    font-size: 14.5px;
    line-height: 1.65;
    color: #444;
    margin-bottom: 10px;
}
.pf-offre-liste li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-jaune);
}

/* ── Tableau comparatif ─────────────────────────────────────────────────── */
.pf-tableau-titre {
    font-size: 20px;
    font-weight: 800;
    color: var(--c-noir);
    margin: 0 0 18px;
}

/* Le cadre défile horizontalement plutôt que de comprimer les colonnes : sur
   un téléphone, un tableau écrasé devient illisible bien avant d'être court. */
.pf-tableau-cadre {
    overflow-x: auto;
    max-width: 100%;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--c-gris-bordure);
    border-radius: 16px;
    background: var(--c-blanc);
}

.pf-tableau { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 480px; }
.pf-tableau-legende { caption-side: bottom; padding: 14px 20px; font-size: 12.5px; color: var(--c-gris-moyen); text-align: left; }
.pf-tableau thead th {
    background: var(--c-gris-bg);
    text-align: left;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-gris-moyen);
    padding: 14px 20px;
}
.pf-tableau tbody th {
    text-align: left;
    font-weight: 700;
    color: var(--c-noir);
    padding: 14px 20px;
    width: 34%;
    vertical-align: top;
}
.pf-tableau tbody td { padding: 14px 20px; color: #444; line-height: 1.6; vertical-align: top; }
.pf-tableau tbody tr + tr th,
.pf-tableau tbody tr + tr td { border-top: 1px solid var(--c-gris-clair); }

.pf-note { font-size: 13px; color: var(--c-gris-moyen); margin-top: 14px; font-style: italic; }

/* ── Étapes ─────────────────────────────────────────────────────────────── */
.pf-etapes {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

.pf-etape {
    background: var(--c-blanc);
    border: 1px solid var(--c-gris-bordure);
    border-radius: 16px;
    padding: 26px;
}

.pf-etape-num {
    display: inline-block;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.1em;
    color: var(--c-jaune-sombre);
    margin-bottom: 12px;
}

.pf-etape-titre { font-size: 17px; font-weight: 800; color: var(--c-noir); margin: 0 0 10px; line-height: 1.3; }
.pf-etape p { font-size: 14.5px; line-height: 1.7; color: #444; margin: 0; }

/* ── Volet juridique ────────────────────────────────────────────────────── */
.pf-juridique {
    background: var(--c-blanc);
    border: 1px solid var(--c-gris-bordure);
    border-radius: 16px;
    padding: 32px;
    max-width: 820px;
}

.pf-juridique-titre { font-size: 18px; font-weight: 800; color: var(--c-noir); margin: 0 0 14px; }
.pf-juridique p { font-size: 15px; line-height: 1.8; color: #444; margin: 0 0 16px; }

.pf-juridique-liste { list-style: none; padding: 0; margin: 0 0 16px; }
.pf-juridique-liste li {
    position: relative;
    padding-left: 20px;
    font-size: 14.5px;
    line-height: 1.75;
    color: #444;
    margin-bottom: 14px;
}
.pf-juridique-liste li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-anthracite);
}

.pf-juridique-renvoi { font-size: 14px; margin: 0; }

/* La mention légale du crédit est OBLIGATOIRE et doit rester lisible : elle ne
   se fond pas dans le corps de texte, et ne descend jamais sous 14 px. */
.pf-avertissement {
    margin: 28px 0;
    max-width: 820px;
    background: rgba(214, 40, 40, .06);
    border-left: 4px solid var(--c-rouge);
    border-radius: 10px;
    padding: 18px 22px;
}
.pf-avertissement p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--c-noir); }

.pf-partenaires { max-width: 820px; margin-top: 28px; }
.pf-partenaires p { font-size: 15px; line-height: 1.8; color: #444; margin: 0 0 16px; }
.pf-partenaires a { color: var(--c-noir); text-decoration: underline; text-underline-offset: 3px; }

.pf-cta-boutons { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; }
.pf-cta-lien { display: inline-block; text-decoration: none; }
.pf-cta-lien-secondaire { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 767px) {
    .pf-section { padding: 48px 0; }
    .pf-offre, .pf-etape, .pf-juridique { padding: 22px; }
    .pf-tableau tbody th { width: 42%; }
}

/* ══════════════════════════════════════════════════════════════════════
   TESTS DE STRESS DU 09/10/2026 — plancher de lisibilité et cibles tactiles
   Mesures sur les 19 pages × 5 largeurs : textes de 9 à 10,5 px relevés à
   11 px minimum (badges, mentions, aides de saisie) ; liens et boutons
   texte trop bas sur téléphone portés à ≥ 36 px de zone tactile.
   (Restent volontairement sous 11 px : les étoiles UE de la plaque,
   décoratives, et le libellé masqué du bouton téléphone en mode icône.)
   ══════════════════════════════════════════════════════════════════════ */
.klarna-badge-split,
.moteur-carburant-badge,
.moteur-spec-lib,
.moteur-badge,
.moteur-prix-detail,
.process-num,
.selecteur-langue-sep { font-size: 11px; }
.moteur-code,
.form-security,
.float-hint,
.boutique-search-hint,
.selecteur-langue-lien { font-size: 11.5px; }

@media (max-width: 767px) {
    .hero-top-link,
    .parcours-action,
    .pf-cta-lien-secondaire,
    .auth-link { display: inline-flex; align-items: center; min-height: 36px; padding-top: 8px; padding-bottom: 8px; }
    .btn-back-overlay { min-height: 36px; padding-top: 8px; padding-bottom: 8px; }
    .carte-sur-commande .csc-btn-mail { min-height: 40px; padding-top: 10px; padding-bottom: 10px; }
}