/* ================================================================
   MOTRO — css/accueil.css (29/10/2026, chantier C)
   Page d'accueil SEULE (index.html), zone « Plus de 90 marques » → FAQ et fond de studio de la voiture.
   Tous les sélecteurs commencent par l'identifiant d'une section : rien ne fuit vers les autres pages.
   Un identifiant pèse plus lourd qu'une classe : ces règles priment sur style.css / prime.css SANS les modifier.
   Palette : noir #111, texte secondaire #55555b (7:1 sur blanc), filets #E8E8ED, fond gris #F5F5F7,
   jaune #FFCC00 en accent rare. Manrope, graisses ≤ 800.
   ================================================================ */


/* ── 0. VOITURE 3D — fond de studio (variante A1 « studio ovale ») ─────────────
   Ovale gris perle DERRIÈRE le canevas transparent de clio3d.js. Taille et cadrage
   de la voiture inchangés ; aucun sol, aucune ombre (décision du 08/10/2026).
   Valeurs : _interne/outils/essai-fond-voiture.js, variante 'A1-studio-ovale'.
   ⚠ ÉCART VOLONTAIRE avec l'essai (z-index:-1 + isolation:isolate) : isoler
   .car-stage y ENFERMERAIT la fenêtre Contact du téléphone (position: fixed,
   z-index 9990, mobile.css) — elle passerait sous la barre d'appel (900) et les
   onglets (20). Ici, AUCUN contexte d'empilement : le pseudo-élément, positionné
   sans z-index et premier dans l'ordre du document, se peint avant .car-viewer
   (position: relative) et tout son contenu. Même rendu, sans effet de bord. */
#hero .car-stage {
    position: relative;
}
#hero .car-stage::before {
    content: "";
    position: absolute;
    left: 4%;
    right: 4%;
    top: 6%;
    bottom: 2%;
    border-radius: 50%;
    background: radial-gradient(closest-side, #e4e6ea 0%, #eceef1 55%, rgba(244, 245, 247, 0) 100%);
    pointer-events: none;
}


/* ── Petits caractères partagés (précisions légales) ─────────────────────────
   0,8125 rem, gris #55555b : lisibles, jamais cachés, jamais contradictoires. */
#faits .mention,
#garantie .mention {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.55;
    color: #55555b;
}


/* ── 1. MARQUES — bande claire et sobre (plus de fond jaune) ────────────────── */
#marques {
    background: #F5F5F7;
    border-top: 1px solid #E8E8ED;
    border-bottom: 1px solid #E8E8ED;
    padding: 40px 0 36px;
}
#marques .marques-titre {
    font-size: clamp(17px, 1.8vw, 21px);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-transform: none;
    color: #111111;
    text-align: center;
    margin: 0 0 24px;
}
#marques .brand-item {
    border-right-color: #E1E1E6;
}
/* 30/10/2026 (exploitant : la bande des moteurs « tourne du mauvais côté » et doit aller à l'inverse des
   logos) : les moteurs vont désormais vers la GAUCHE, les logos sont donc inversés vers la DROITE —
   ici, sans toucher style.css (defilement-marques : 0 → -50 %, joué à l'envers = boucle toujours sans couture). */
#marques .carrousel-track {
    animation-direction: reverse;
}
/* Clavier : le défilement s'arrête dès qu'un logo reçoit le focus. */
#marques .carrousel-outer:focus-within .carrousel-track {
    animation-play-state: paused;
}
/* Écran tactile : ni le « survol » collé (style.css : .carrousel-track:hover) ni le focus d'un toucher ne figent les logos. */
@media (hover: none) {
    #marques .carrousel-track:hover,
    #marques .carrousel-outer:focus-within .carrousel-track {
        animation-play-state: running;
    }
}
#marques .brand-link:focus-visible {
    outline: 2px solid #111111;
    outline-offset: 4px;
    border-radius: 4px;
}


/* ── 2. POURQUOI MOTRO (#faits) — « schéma technique annoté » (30/10/2026) ──────
   Remplace la grille de tuiles + gros chiffres (« ça n'a pas d'âme », exploitant).
   Écran large : grille 60/40. À gauche, le moteur de la Clio sur un quadrillage de
   papier technique (pas de 24 px, traits #111 à 5 % : un MOTIF, pas un dégradé de
   couleur). À droite, les 5 promesses distribuées par une accolade verticale ; UN
   trait #111 de 1,5 px part du moteur et vient l'y rejoindre (la figure est centrée
   sur la liste : le trait tombe toujours dans la hauteur de l'accolade). Chaque
   promesse : tiret + point jaune #FFCC00 (seul usage du jaune ici). Téléphone
   (≤ 900 px) : figure pleine largeur, puis la liste ; trait du moteur masqué.
   Mouvement unique, en fin de section. La note du site (#faitsNote, js/avis.js) vit
   dans la rangée d'actions, de hauteur fixe : rien ne bouge quand elle apparaît. */
#faits {
    background: #ffffff;
    padding: 88px 0 80px;
    border-bottom: 1px solid #E8E8ED;
}
#faits .pm-entete {
    max-width: 720px;
    margin: 0 0 48px;
}
#faits .pm-kicker {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #55555b;
    margin: 0 0 12px;
}
#faits .pm-titre {
    font-size: clamp(32px, 4.4vw, 52px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #111111;
    margin: 0 0 14px;
    text-wrap: balance;   /* « Un moteur d'occasion, / rien au hasard. » plutôt qu'un « hasard. » isolé */
}
#faits .pm-sous-titre {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.6;
    color: #55555b;
    margin: 0;
}
#faits .pm-schema {
    --pm-ecart: 64px;   /* espace figure → accolade : le trait du moteur le traverse */
    display: grid;
    grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
    column-gap: var(--pm-ecart);
    align-items: stretch;
}

/* Figure : papier technique. Quadrillage de 24 px en traits #111 à 5 % (deux lignes
   franches de 1 px, aucune transition de couleur). L'image a un fond blanc opaque :
   « multiply » la laisse voir le quadrillage au travers (le blanc ne change rien). */
#faits .pm-figure {
    margin: 0;
    min-width: 0;
    align-self: center;   /* centrée sur la liste : le trait tombe dans la hauteur de l'accolade */
}
#faits .pm-planche {
    position: relative;
    isolation: isolate;
    background-color: #ffffff;
    background-image:
        linear-gradient(rgba(17, 17, 17, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 17, 17, 0.05) 1px, transparent 1px);
    background-size: 24px 24px;
    border: 1px solid #E8E8ED;
    border-radius: 4px;
}
#faits .pm-planche img {
    display: block;
    width: 100%;
    height: auto;
    mix-blend-mode: multiply;
}

/* Le trait : du bord droit du moteur (≈ x 38 %, y 62,5 % de l'image) jusqu'au filet de
   l'accolade, juste après l'écart de la grille (+ 1 px de bordure de la planche).
   Départ : anneau (sur le moteur) ; arrivée : point plein sur l'accolade. */
#faits .pm-trait {
    position: absolute;
    left: 38%;
    top: 62.5%;
    right: calc(var(--pm-ecart) * -1 - 1px);
    height: 0;
    pointer-events: none;
}
#faits .pm-trait::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -0.75px;
    height: 1.5px;
    background: #111111;
    transform-origin: 0 50%;
}
#faits .pm-trait::after {
    content: "";
    position: absolute;
    right: -5.25px;
    top: -4.5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #111111;
}
#faits .pm-trait-depart {
    position: absolute;
    left: -5px;
    top: -5px;
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    border: 1.5px solid #111111;
    border-radius: 50%;
    background: #ffffff;
}

/* Les promesses. Chaque <li> porte son tronçon de l'accolade (filet vertical à
   gauche : il commence au premier tiret, finit au dernier), son tiret et son point
   jaune (pseudo-éléments du libellé). 11 px = milieu de la 1re ligne du libellé
   (18 px × 1,3 ÷ 2 ≈ 11,7 px). */
#faits .pm-promesses {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#faits .pm-promesse {
    position: relative;
    padding: 0 0 26px 52px;
}
#faits .pm-promesse:last-child {
    padding-bottom: 0;
}
#faits .pm-promesse::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1.5px;
    background: #111111;
}
#faits .pm-promesse:first-child::before {
    top: 11px;
}
#faits .pm-promesse:last-child::before {
    bottom: auto;
    height: 12.5px;
}
#faits .pm-libelle {
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #111111;
    margin: 0;
}
#faits .pm-libelle::before {   /* point jaune (cerclé de #111 : visible sur le blanc) */
    content: "";
    position: absolute;
    left: 24px;
    top: 6px;
    box-sizing: border-box;
    width: 12px;
    height: 12px;
    border: 1.5px solid #111111;
    border-radius: 50%;
    background: #FFCC00;
}
#faits .pm-libelle::after {   /* tiret : de l'accolade au point */
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    width: 24px;
    height: 1.5px;
    background: #111111;
}
#faits .pm-promesse .mention {
    max-width: 46ch;
    margin: 4px 0 0;
}
#faits .pm-lien,
#faits .pm-contact {
    font-size: 15px;
    font-weight: 700;
    color: #111111;
    text-decoration: underline;
    text-decoration-color: #FFCC00;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
#faits .pm-lien:hover,
#faits .pm-contact:hover {
    text-decoration-color: #111111;
}
#faits .pm-promesse .pm-lien {
    display: inline-block;
    margin-top: 8px;
}
#faits .pm-sav-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    margin-top: 10px;
}
/* Bouton d'appel : la seule action pleine de la liste, bien visible. */
#faits .pm-appel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 999px;
    background: #111111;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}
#faits .pm-appel:hover {
    background: #2C2C30;
}
#faits .pm-appel-numero {
    color: #FFCC00;
}

#faits .pm-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-height: 52px;
    margin-top: 28px;
}
#faits .pm-note {
    margin-right: auto;
}
#faits .pm-note-lien {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #111111;
    text-decoration: none;
}
#faits .pm-note-chiffre {
    font-size: 17px;
    font-weight: 800;
}
#faits .pm-note-nombre {
    font-size: 15px;
    color: #55555b;
    text-decoration: underline;
    text-underline-offset: 3px;
}
#faits .pm-cta {
    display: inline-flex;
    align-items: center;
    padding: 14px 24px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
#faits .pm-cta-principal {
    background: #FFCC00;
    color: #111111;
}
#faits .pm-cta-principal:hover {
    background: #F0BF00;
}
#faits .pm-cta-secondaire {
    border: 1px solid #111111;
    color: #111111;
}
#faits .pm-cta-secondaire:hover {
    background: #F5F5F7;
}
#faits .pm-lien:focus-visible,
#faits .pm-contact:focus-visible,
#faits .pm-appel:focus-visible,
#faits .pm-cta:focus-visible,
#faits .pm-note-lien:focus-visible {
    outline: 2px solid #111111;
    outline-offset: 3px;
}

/* Étoiles d'affichage (note du site) : même dessin que dans #avis. */
#faits .avis-etoiles {
    position: relative;
    display: inline-block;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
}
#faits .avis-etoiles-fond {
    color: #D9D9DE;
}
#faits .avis-etoiles-remplies {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: #FFCC00;
}

/* Mouvement unique : à l'entrée de la section, le trait se dessine puis les 5 promesses
   apparaissent l'une après l'autre (et leur tronçon d'accolade avec elles). CSS seul, une
   seule chronologie nommée (--pm-schema = la zone figure + liste). Sans
   « animation-timeline » (@supports) ou avec « mouvement réduit » : rien n'est animé,
   tout est visible tout de suite. Sous 900 px la zone dépasse l'écran : chaque promesse
   suit alors SA PROPRE entrée (view()) au lieu de la zone entière. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        @keyframes accueil-faits-trace {
            from { transform: scaleX(0); }
            to   { transform: scaleX(1); }
        }
        @keyframes accueil-faits-apparait {
            from { opacity: 0; transform: translateY(14px); }
            to   { opacity: 1; transform: none; }
        }
        @keyframes accueil-faits-fondu {
            from { opacity: 0; }
            to   { opacity: 1; }
        }
        #faits .pm-schema {
            view-timeline: --pm-schema block;
        }
        #faits .pm-trait::before {
            animation: accueil-faits-trace linear both;
            animation-timeline: --pm-schema;
            animation-range: entry 5% entry 40%;
        }
        #faits .pm-trait::after {
            animation: accueil-faits-fondu linear both;
            animation-timeline: --pm-schema;
            animation-range: entry 36% entry 44%;
        }
        #faits .pm-promesse {
            animation: accueil-faits-apparait linear both;
            animation-timeline: --pm-schema;
        }
        #faits .pm-promesse:nth-child(1) { animation-range: entry 30% entry 55%; }
        #faits .pm-promesse:nth-child(2) { animation-range: entry 38% entry 63%; }
        #faits .pm-promesse:nth-child(3) { animation-range: entry 46% entry 71%; }
        #faits .pm-promesse:nth-child(4) { animation-range: entry 54% entry 79%; }
        #faits .pm-promesse:nth-child(5) { animation-range: entry 62% entry 87%; }
        @media (max-width: 900px) {
            #faits .pm-promesse:nth-child(n) {
                animation-timeline: view();
                animation-range: entry 0% entry 70%;
            }
        }
    }
}

@media (max-width: 1100px) {
    #faits .pm-schema { --pm-ecart: 40px; }
}
/* Téléphone et petite tablette : figure pleine largeur, puis la liste (accolade à gauche) ;
   le trait du moteur n'a plus d'accolade à rejoindre : masqué. */
@media (max-width: 900px) {
    #faits .pm-schema {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 32px;
    }
    #faits .pm-figure { align-self: auto; }
    #faits .pm-trait { display: none; }
    #faits .pm-promesse { padding-left: 46px; }
}
@media (max-width: 640px) {
    #faits { padding: 56px 0 48px; }
    #faits .pm-actions { justify-content: stretch; }
    #faits .pm-cta { flex: 1 1 100%; justify-content: center; }
    /* La note figure déjà dans #avis : sur téléphone, on évite qu'elle décale la page. */
    #faits .pm-note { display: none; }
}


/* ── 4. AVIS CLIENTS (#avis) — NOTRE service de notation (C2, 29/10/2026) ─────
   40/60 : le texte et l'action, puis la note moyenne mise en avant. Les avis
   publiés, le formulaire et les deux rubriques <details> suivent en pleine
   largeur. Étoiles d'affichage : glyphes ★ gris + même rangée jaune rognée à
   note / 5 (js/avis.js) ; étoiles de saisie : SVG, allumées par la classe
   .est-allumee (js/avis.js).
   30/10/2026 : BANDE PLEINE LARGEUR jaune MOTRO (#FFCC00) au milieu de sections
   blanches, pour qu'on la remarque au défilement. Texte #111111 (≈14:1) ; les
   mentions en #111111 à 78 % (≈7:1 sur le jaune, au-dessus de 4,5:1). Étoiles
   noires, jamais jaunes sur le jaune ; cartes et formulaire sur BLANC. */
#avis {
    background: #FFCC00;
    padding: 96px 0;
}
#avis .avis-layout {
    display: grid;
    grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
    gap: 56px;
    align-items: center;
}
#avis .avis-kicker {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(17, 17, 17, 0.78);
    margin: 0 0 12px;
}
#avis .avis-titre {
    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: #111111;
    margin: 0 0 14px;
}
#avis .avis-texte {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(17, 17, 17, 0.78);
    max-width: 46ch;
    margin: 0;
}
#avis .avis-intro .avis-bouton {
    margin: 24px 0 20px;
}
#avis .mention {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.55;
    color: rgba(17, 17, 17, 0.78);
    max-width: 62ch;
    margin: 0;
}
#avis .avis-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Synthèse : la note moyenne en très grand, la répartition 5 → 1 à côté.
   Hauteur réservée : rien ne saute quand la réponse arrive. */
#avis .avis-synthese {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 40px;
    min-height: 240px;
}
#avis .avis-synthese-note {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
#avis .avis-moyenne {
    margin: 0;
    color: #111111;
    line-height: 1;
}
#avis .avis-moyenne-chiffre {
    font-size: clamp(96px, 12vw, 168px);
    font-weight: 800;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}
#avis .avis-moyenne-sur {
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: rgba(17, 17, 17, 0.78);
}
#avis .avis-nombre {
    font-size: 16px;
    font-weight: 700;
    color: #111111;
    margin: 0;
}
#avis .avis-etoiles {
    position: relative;
    display: inline-block;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
}
#avis .avis-etoiles-grandes {
    font-size: 32px;
}
#avis .avis-etoiles-fond {
    color: rgba(17, 17, 17, 0.22);
}
#avis .avis-etoiles-remplies {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: #111111;
}
#avis .avis-repartition {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#avis .avis-repartition-ligne {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) 36px;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 700;
    color: #111111;
}
#avis .avis-repartition-barre {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: rgba(17, 17, 17, 0.15);
    overflow: hidden;
}
#avis .avis-repartition-niveau {
    display: block;
    height: 100%;
    background: #111111;
    border-radius: 999px;
}
#avis .avis-repartition-nombre {
    text-align: right;
    color: rgba(17, 17, 17, 0.78);
}
#avis .avis-vide {
    grid-column: 1 / -1;
}
#avis .avis-vide-titre {
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #111111;
    margin: 0 0 8px;
}

/* Derniers avis publiés */
#avis #avisClients {
    margin-top: 48px;
}
#avis .avis-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}
#avis .avis-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(17, 17, 17, 0.08);   /* ombre neutre, aucun halo coloré */
}
#avis .avis-item[hidden] {
    display: none;
}
#avis .avis-item-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
#avis .avis-badge {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 4px 10px;
    border-radius: 999px;
    background: #FFEB99;   /* lisible sur la carte blanche (texte #111111) */
    color: #111111;
}
#avis .avis-item-texte {
    font-size: 15px;
    line-height: 1.65;
    color: #111111;
    margin: 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}
#avis .avis-item-auteur {
    font-size: 15px;
    font-weight: 800;
    color: #111111;
    margin: auto 0 0;
    overflow-wrap: anywhere;
}
#avis .avis-item-dates {
    font-size: 0.8125rem;
    color: #55555b;
    margin: 0;
}
#avis .avis-plus {
    margin-top: 20px;
}

/* Carrousel des avis (30/10/2026) : VRAIE BOUCLE PAR CARTE, même principe que la
   bande des moteurs (§5), vers la GAUCHE. Plus de piste animée ni de groupes
   dupliqués : CHAQUE CARTE défile seule, de translateX(L - pas) à translateX(-pas),
   puis repart HORS ÉCRAN derrière la dernière (« le premier suit le dernier »).
   js/avis.js pose sur la liste : --avis-n (cartes affichées), --avis-pas (carte +
   écart), --avis-L (= n × pas), --avis-duree (= L ÷ 42 px/s), --avis-hauteur (carte la
   plus haute) ; et sur chaque carte son rang --avis-i. Délai de la carte i =
   -T × (n-1-i) / n : à l'instant 0, elle est à x = i × pas. Cartes en
   position: absolute dans une fenêtre de la hauteur de la plus haute. Pas de bouton
   pause (décision de l'exploitant) : pause au survol et au focus clavier. */
#avis .avis-fenetre {
    overflow: hidden;
    padding: 12px 0 24px;   /* place pour l'ombre des cartes (overflow la rognerait sinon) */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
#avis .avis-piste {
    --avis-ecart: 20px;   /* écart entre deux cartes (lu par js/avis.js pour calculer le pas, en px) */
    position: relative;
    height: var(--avis-hauteur, 300px);
    margin: 0;
    padding: 0;
    list-style: none;
}
#avis .avis-piste .avis-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    min-height: var(--avis-hauteur, 0px);   /* toutes les cartes à la hauteur de la plus haute */
    box-sizing: border-box;
    animation: accueil-avis-defile var(--avis-duree, 60s) linear infinite;
    animation-delay: calc(var(--avis-duree) * -1 * (var(--avis-n) - 1 - var(--avis-i)) / var(--avis-n));
}
/* Texte de la carte : 5 lignes au plus, coupé proprement (la page /avis les montre en entier). */
#avis .avis-piste .avis-item-texte {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
}
/* Pause seulement avec une VRAIE souris (30/10/2026 : « les carrousels doivent tourner à l'infini ») : sur un
   écran tactile, le « survol » reste collé après un toucher et figeait la bande. L'état de lecture n'étant pas
   hérité, la pause vise les CARTES elles-mêmes : toutes s'arrêtent (et repartent) ensemble. */
@media (hover: hover) and (pointer: fine) {
    #avis .avis-fenetre:hover .avis-item,
    #avis .avis-fenetre:focus-within .avis-item {
        animation-play-state: paused;
    }
}
@keyframes accueil-avis-defile {
    from { transform: translateX(calc(var(--avis-L) - var(--avis-pas))); }
    to   { transform: translateX(calc(var(--avis-pas) * -1)); }
}
/* 30/10/2026 — « au bout d'un long moment, ça devient blanc » : l'ancienne piste formait UN calque de ~9 600 px que
   Chrome redessine par tuiles ; sous pression mémoire, des tuiles restaient blanches. Chaque carte est maintenant
   son PROPRE petit calque (une carte = un calque), dessiné une fois : seul le compositeur la déplace. */
@media (prefers-reduced-motion: no-preference) {
    #avis .avis-piste .avis-item { will-change: transform; }
}
#avis .avis-voir-tous {
    margin: 20px 0 0;
}
#avis .avis-formulaire-zone {
    scroll-margin-top: 96px;   /* « #laisser-avis » : le formulaire ne passe pas sous l'en-tête */
}
@media (max-width: 640px) {
    #avis .avis-piste .avis-item { width: 270px; }
}

/* Animations réduites : aucune animation, cartes en rangée à faire défiler à la main, copies masquées. */
@media (prefers-reduced-motion: reduce) {
    #avis .avis-piste { display: flex; gap: 20px; width: max-content; height: auto; }
    #avis .avis-piste .avis-item { animation: none; position: relative; transform: none; flex: 0 0 auto; }
    #avis .avis-fenetre { overflow-x: auto; width: auto; margin-left: 0; -webkit-mask-image: none; mask-image: none; }
    #avis .avis-piste .avis-item[aria-hidden="true"] { display: none; }
}

/* Formulaire de dépôt */
#avis .avis-formulaire-zone {
    margin-top: 40px;
    padding: 36px;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 20px;
    background: #ffffff;   /* carte blanche sur la bande jaune */
    box-shadow: 0 2px 8px rgba(17, 17, 17, 0.08);
}
#avis .avis-formulaire-zone[hidden],
#avis .avis-formulaire[hidden],
#avis .avis-merci[hidden] {
    display: none;
}
#avis .avis-formulaire {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 760px;
}
#avis .avis-formulaire-titre {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #111111;
    margin: 0;
}
#avis .avis-aide {
    display: block;
    font-size: 0.8125rem;
    color: #55555b;
    margin: 0;
}
#avis .avis-champ-titre {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: #111111;
    margin-bottom: 6px;
}
#avis .avis-etoiles-saisie {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}
#avis .avis-etoiles-rangee {
    display: flex;
    gap: 4px;
}
/* Radio masqué visuellement mais focalisable : le clavier choisit la note (flèches). */
#avis .avis-note-radio {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}
#avis .avis-etoile-choix {
    display: inline-flex;
    padding: 4px;
    border-radius: 8px;
    cursor: pointer;
}
#avis .avis-etoile-choix svg {
    fill: #ffffff;
    stroke: #8E8E93;
    stroke-width: 1.4;
    transition: fill 0.15s ease, stroke 0.15s ease;
}
#avis .avis-etoile-choix.est-allumee svg {
    fill: #FFCC00;
    stroke: #111111;
}
#avis .avis-note-radio:focus-visible + .avis-etoile-choix {
    outline: 2px solid #111111;
    outline-offset: 2px;
}
#avis .avis-champs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
}
#avis .avis-champ {
    display: block;
}
#avis .avis-champ-large {
    grid-column: 1 / -1;
}
#avis .avis-champ input,
#avis .avis-champ textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid #C7C7CC;
    border-radius: 10px;
    background: #ffffff;
    font: inherit;
    font-size: 15px;
    color: #111111;
}
#avis .avis-champ textarea {
    resize: vertical;
    min-height: 130px;
    margin-bottom: 6px;
}
#avis .avis-champ input:focus-visible,
#avis .avis-champ textarea:focus-visible {
    outline: 2px solid #111111;
    outline-offset: 1px;
}
#avis .avis-champ [aria-invalid="true"] {
    border-color: #B3261E;
}
#avis .avis-piege {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
#avis .avis-consentement {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    line-height: 1.6;
    color: #111111;
}
#avis .avis-consentement input {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    accent-color: #111111;
}
#avis .avis-message {
    font-size: 14px;
    font-weight: 700;
    color: #111111;
    margin: 0;
}
#avis .avis-message:empty {
    display: none;
}
#avis .avis-message.est-erreur {
    color: #B3261E;
}
#avis .avis-envoyer {
    align-self: flex-start;
}
#avis .avis-envoyer[disabled] {
    opacity: 0.6;
    cursor: progress;
}
#avis .avis-merci {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#avis .avis-merci:focus {
    outline: none;
}
#avis .avis-merci-code {
    font-size: 15px;
    color: #111111;
    margin: 6px 0 0;
}
#avis .avis-merci-code strong {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 2px 10px;
    border-radius: 8px;
    background: #FFF6CC;
}

/* Rubriques « Comment les avis sont contrôlés » et « Suivre mon avis » */
#avis .avis-controle,
#avis .avis-suivi {
    margin-top: 28px;
    border-top: 1px solid rgba(17, 17, 17, 0.25);
    padding-top: 18px;
}
#avis .avis-suivi {
    margin-top: 0;
}
#avis .avis-controle summary,
#avis .avis-suivi summary {
    cursor: pointer;
    font-size: 15px;
    font-weight: 800;
    color: #111111;
    padding-bottom: 18px;
}
#avis .avis-controle summary:focus-visible,
#avis .avis-suivi summary:focus-visible {
    outline: 2px solid #111111;
    outline-offset: 3px;
}
#avis .avis-controle-liste {
    margin: 0 0 14px;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(17, 17, 17, 0.78);
    max-width: 80ch;
}
#avis .avis-lien {
    display: inline-block;
    margin-bottom: 18px;
    font-size: 14px;
    font-weight: 700;
    color: #111111;
    text-decoration: underline;
    text-underline-offset: 3px;
}
#avis .avis-suivi-formulaire {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 12px;
}
#avis .avis-suivi-formulaire .avis-champ {
    flex: 0 1 280px;
}
#avis .avis-suivi .avis-message {
    margin-bottom: 18px;
}
/* « Suivre mon avis » est posé directement sur le jaune : champ cerclé de noir, erreur assez sombre (≥ 4,5:1). */
#avis .avis-suivi .avis-champ input {
    border-color: #111111;
}
#avis .avis-suivi .avis-message.est-erreur {
    color: #8A1B14;
}
#avis .avis-bouton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    border: 1px solid #111111;
    border-radius: 999px;
    background: #111111;
    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
#avis .avis-bouton:hover {
    background: #2C2C30;
}
#avis .avis-bouton:focus-visible {
    outline: 2px solid #111111;
    outline-offset: 3px;
}
#avis .avis-bouton-secondaire {
    background: transparent;
    color: #111111;
}
#avis .avis-bouton-secondaire:hover {
    background: rgba(17, 17, 17, 0.08);
}

@media (max-width: 900px) {
    #avis .avis-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 640px) {
    #avis { padding: 64px 0; }
    #avis .avis-synthese { grid-template-columns: minmax(0, 1fr); gap: 24px; min-height: 0; }
    #avis .avis-formulaire-zone { padding: 24px 20px; }
    #avis .avis-champs { grid-template-columns: minmax(0, 1fr); }
    #avis .avis-liste { grid-template-columns: minmax(0, 1fr); }
}


/* ── 5. NOS DERNIERS MOTEURS (#vedette) — bande en boucle (révision 2, 29/10/2026) ──
   30/10/2026 — VRAIE BOUCLE PAR CARTE (« le premier doit suivre le dernier ») : plus de
   piste animée ni de jeu dupliqué. CHAQUE CARTE défile seule, de translateX(L - pas) à
   translateX(-pas), vers la GAUCHE (sens inverse du carrousel des marques, joué à
   l'envers vers la droite, #marques ci-dessus), puis repart HORS ÉCRAN derrière la
   dernière. js/vedette.js pose sur la piste : --vedette-n (cartes affichées, liste
   répétée si besoin, copies aria-hidden), --vedette-pas (carte + écart), --vedette-L
   (= n × pas), --vedette-duree (= L ÷ 42 px/s : vitesse constante), --vedette-hauteur
   (carte la plus haute) ; et sur chaque carte son rang --vedette-i. Délai de la carte i
   = -T × (n-1-i) / n : à l'instant 0, elle est à x = i × pas. Cartes en position: absolute
   dans une fenêtre de la hauteur de la plus haute.
   Pause au survol et au focus clavier (bouton « Pause » retiré le 30/10/2026,
   décision de l'exploitant). Depuis le 30/10/2026, la section est AUSSI affichée
   sur téléphone (règle @media max-width 767px plus bas, qui l'emporte sur mobile.css). */
#vedette .vedette-grille.vedette-defile {
    display: block;
    margin-top: 48px;
}
/* Titre « Nos derniers moteurs disponibles » : l'en-tête commun (style.css,
   520 px) le coupait sur 3 lignes à 1 440 px ; 720 px = 2 lignes au plus. */
#vedette .section-entete {
    max-width: 720px;
}
/* La bande sort du conteneur et prend toute la fenêtre (comme les marques) :
   100vw recentré par la marge négative ; titre, texte et bouton restent dans
   le conteneur. Fondu linéaire aux deux bords par masque (Contexte §24). */
#vedette .vedette-fenetre {
    overflow: hidden;
    padding: 12px 0 16px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
#vedette .vedette-piste {
    --vedette-ecart: 20px;   /* écart entre deux cartes (lu par js/vedette.js pour calculer le pas, en px) */
    position: relative;
    height: var(--vedette-hauteur, 380px);
}
#vedette .vedette-piste .vedette-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 280px;
    min-height: var(--vedette-hauteur, 0px);   /* toutes les cartes à la hauteur de la plus haute */
    animation: accueil-vedette-defile var(--vedette-duree, 60s) linear infinite;
    animation-delay: calc(var(--vedette-duree) * -1 * (var(--vedette-n) - 1 - var(--vedette-i)) / var(--vedette-n));
}
/* Pastille de carburant : dans la zone image, sur sa propre rangée au-dessus
   de la photo (order: -1, elle suit l'image dans le HTML) — elle ne la
   chevauche plus. La photo occupe la hauteur restante. */
#vedette .vedette-card-image {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 12px 12px 0;
}
#vedette .vedette-carburant-badge {
    position: static;
    order: -1;
    flex: 0 0 auto;
}
#vedette .vedette-card-image .vedette-img {
    flex: 1 1 0;
    min-height: 0;
    height: auto;
    width: 100%;
    padding: 8px 12px 16px;
}
/* Pause seulement avec une VRAIE souris (voir #avis) : sur tactile, la bande tourne sans fin.
   La pause vise les CARTES (l'état de lecture n'est pas hérité) : toutes s'arrêtent ensemble. */
@media (hover: hover) and (pointer: fine) {
    #vedette .vedette-fenetre:hover .vedette-card,
    #vedette .vedette-fenetre:focus-within .vedette-card {
        animation-play-state: paused;
    }
}
/* 30/10/2026 — « les carrousels doivent faire tourner les annonces Motro à l'infini » : sur TÉLÉPHONE, la bande
   des moteurs est désormais AFFICHÉE (mobile.css la masquait au profit d'un simple bouton) ; son propre bouton
   « Voir tout notre stock » rend inutile le bouton mobile isolé qui la suit. */
@media screen and (max-width: 767px) {
    #vedette.section-vedette { display: block; }
    #vedette + .mobile-vedette-cta { display: none; }
}
@keyframes accueil-vedette-defile {
    from { transform: translateX(calc(var(--vedette-L) - var(--vedette-pas))); }
    to   { transform: translateX(calc(var(--vedette-pas) * -1)); }
}
/* Même raison que #avis (un grand calque redessiné par tuiles → blanc au bout d'un long moment) : une carte = un calque.
   Le soulèvement au survol (style.css : transform: translateY(-8px)) ne peut plus passer par « transform », que
   l'animation occupe : la propriété indépendante « translate » s'y ajoute sans la gêner. */
@media (prefers-reduced-motion: no-preference) {
    #vedette .vedette-piste .vedette-card {
        will-change: transform;
        transition: translate 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }
    #vedette .vedette-piste .vedette-card:hover { translate: 0 -8px; }
}

/* Animations réduites : aucune animation, cartes en rangée à faire défiler à la main, copies masquées. */
@media (prefers-reduced-motion: reduce) {
    #vedette .vedette-piste { display: flex; gap: 20px; width: max-content; height: auto; }
    #vedette .vedette-piste .vedette-card { animation: none; position: relative; transform: none; flex: 0 0 auto; }
    #vedette .vedette-fenetre { overflow-x: auto; width: auto; margin-left: 0; -webkit-mask-image: none; mask-image: none; }
    #vedette .vedette-piste .vedette-card[aria-hidden="true"] { display: none; }
}


/* ── 6. SERVICES — #garantie + #paiement, deux sections CLAIRES en 40/60 ───── */
#garantie,
#paiement {
    background: #ffffff;
    padding: 96px 0;
}
#garantie {
    border-top: 1px solid #E8E8ED;
}
/* Un seul bloc « Services » : le paiement suit la garantie, séparé par un filet. */
#paiement {
    padding-top: 0;
}
#paiement .service-layout {
    padding-top: 80px;
    border-top: 1px solid #E8E8ED;
}
#garantie .service-layout,
#paiement .service-layout {
    display: grid;
    grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
    gap: 72px;
    align-items: center;
}
#paiement .service-layout {
    grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
}

/* Repère « 24 mois » : un aplat gris, le chiffre porte le poids. */
#garantie .service-visuel {
    display: flex;
    justify-content: center;
}
#garantie .service-chiffre-bloc {
    width: 100%;
    max-width: 340px;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #F5F5F7;
    border: 1px solid #E8E8ED;
    border-radius: 28px;
}
#garantie .service-jusqu-a,
#garantie .service-unite {
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #55555b;
    margin: 0;
}
#garantie .service-chiffre {
    font-size: clamp(88px, 10vw, 128px);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: #111111;
    margin: 10px 0 16px;
}
#garantie .service-unite {
    padding-top: 14px;
    border-top: 3px solid #FFCC00;
}

#garantie .service-kicker,
#paiement .service-kicker {
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #55555b;
    margin-bottom: 14px;
}
#garantie .service-titre,
#paiement .service-titre {
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: #111111;
    margin: 0 0 18px;
}
/* L'accent jaune : un surlignage bas, une fois par bloc. */
#garantie .service-accent,
#paiement .service-accent {
    box-shadow: inset 0 -0.28em 0 #FFCC00;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
#garantie .service-desc,
#paiement .service-desc {
    font-size: 16px;
    line-height: 1.7;
    color: #55555b;
    max-width: 56ch;
    margin: 0 0 22px;
}
#garantie .service-desc strong,
#paiement .service-desc strong {
    color: #111111;
    font-weight: 700;
}
#garantie .service-liste,
#paiement .service-liste {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    border-top: 1px solid #E8E8ED;
}
#garantie .service-liste li,
#paiement .service-liste li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #E8E8ED;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    color: #111111;
}
#garantie .liste-puce,
#paiement .liste-puce {
    flex: none;
    margin-top: 3px;
    color: #111111;
}
#garantie .service-lien,
#paiement .service-lien {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    border-radius: 999px;
    background: #111111;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
#garantie .service-lien:hover,
#paiement .service-lien:hover {
    background: #2C2C30;
}
#garantie .service-lien:focus-visible,
#paiement .service-lien:focus-visible {
    outline: 2px solid #111111;
    outline-offset: 3px;
}
#garantie .mention {
    margin: 22px 0 0;
    max-width: 62ch;
}
#garantie .mention a {
    color: #111111;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Paiement : badge Klarna conservé (rose officiel), photo au ratio fixe. */
#paiement .klarna-logo-officiel {
    margin-bottom: 18px;
}
#paiement .service-visuel-photo {
    border-radius: 20px;
    overflow: hidden;
    background: #F5F5F7;
}
#paiement .service-image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

@media (max-width: 900px) {
    #garantie { padding: 64px 0; }
    #paiement { padding: 0 0 64px; }
    #paiement .service-layout { padding-top: 56px; }
    #garantie .service-layout,
    #paiement .service-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    #garantie .service-chiffre-bloc { max-width: 240px; }
    #paiement .service-image { aspect-ratio: 16 / 10; }
}


/* ── 7. RÉSEAU — contraste du texte courant, phrase sur l'écologie ──────────── */
#reseau .reseau-desc {
    color: #55555b;
}
#reseau .reseau-eco {
    margin: 18px 0 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
    color: #111111;
}
/* Identité légale : le texte était blanc sur fond clair (illisible). */
#reseau .reseau-identite {
    color: #55555b;
    border-top-color: #E8E8ED;
}
#reseau .reseau-identite a {
    color: #111111;
}