@font-face{font-family:"Barlow";src:url("/f/barlow-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url("/f/barlow-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("/f/barlow-condensed-700.woff2") format("woff2");font-weight:700;font-display:swap}

/* v5 : tout site.css dans une couche — le héro copié de la démo (heros-demo.css, hors couche) passe devant. */
@layer site{
/* SAMO'TO — feuille de style du site (21/10/2026).
   Couleurs tirées du logo (noir, chrome, liseré or, bleu électrique) ; chaque paire texte/fond
   a été CALCULÉE (WCAG 2), voir _INFOS-SAMOTO.md § Couleurs :
   texte #F2F4F7 / fond #0A0B0D 17,9:1 · chrome #B8BEC7 / #14171C 9,6:1 · discret #8E96A3 / #14171C 6,0:1
   or #D9A441 / #0A0B0D 8,8:1 · bleu clair #5A9BFF / #14171C 6,5:1 · blanc / bouton bleu #1554E0 6,2:1
   noir / bouton or 8,8:1 · zone claire : encre #15171B / #F3F4F6 16,3:1, bleu #0047DB 6,5:1, discret #4E5561 6,8:1
   Trois règles du dossier : [hidden] gagne toujours · overflow-x sur body seul · pas de background-attachment:fixed. */


:root{
  --fond:#0A0B0D; --surface:#14171C; --surface-2:#1B1F25; --trait:#2A2F37;
  --texte:#F2F4F7; --chrome:#B8BEC7; --discret:#8E96A3;
  --or:#D9A441; --or-fonce:#B07020; --bleu:#1554E0; --bleu-vif:#0050F8; --bleu-clair:#5A9BFF;
  --clair:#F3F4F6; --encre:#15171B; --encre-discret:#4E5561; --bleu-sur-clair:#0047DB; --or-sur-clair:#8A5A12;
  --rouge:#B3261E;
  --titre:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --corps:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --r:10px; --ombre:0 18px 40px rgba(0,0,0,.45);
}
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--texte);font-family:var(--corps);font-size:17px;line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--bleu-clair)}
h1,h2,h3{font-family:var(--titre);font-weight:700;line-height:1.08;letter-spacing:.005em;margin:0}
h2 em,h1 em{font-style:normal;color:var(--or)}
p{margin:0}
.cadre{max-width:1200px;margin:0 auto;padding:0 16px}
@media(min-width:700px){.cadre{padding:0 28px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--bleu-clair);outline-offset:3px}
.lien-evitement{position:absolute;left:-9999px;top:8px;background:var(--or);color:var(--fond);padding:10px 14px;border-radius:6px;font-weight:600;z-index:100}
.lien-evitement:focus{left:8px}

/* ── boutons ── */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 22px;border-radius:8px;font-weight:600;font-size:16.5px;text-decoration:none;border:2px solid transparent;transition:transform .25s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease;cursor:pointer;line-height:1.2;text-align:center}
.bouton svg{width:20px;height:20px;flex:none}
.bouton.bleu{background:var(--bleu);color:#fff;box-shadow:0 8px 26px rgba(21,84,224,.38)}
.bouton.bleu:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(21,84,224,.55)}
.bouton.or{background:var(--or);color:var(--fond)}
.bouton.or:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(217,164,65,.35)}
.bouton.contour{border-color:rgba(242,244,247,.4);color:var(--texte);background:rgba(10,11,13,.35)}
.bouton.contour:hover{border-color:var(--or);color:var(--or)}
.petit-wa{font-size:14px;color:var(--discret);margin-top:10px}
.petit-wa a{color:var(--chrome);font-weight:600}

/* ── en-tête ── */
.entete{position:sticky;top:0;z-index:70;background:rgba(10,11,13,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--trait)}
.entete::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--or) 30%,var(--bleu-vif) 70%,transparent);opacity:.7}
.entete .cadre{display:flex;align-items:center;gap:12px;min-height:66px}
.marque{display:block;flex:none;margin-right:auto}
.marque img{height:46px;width:auto}
.menu{display:none;gap:4px}
.menu a{white-space:nowrap;display:inline-flex;align-items:center;gap:7px;color:var(--chrome);text-decoration:none;font-weight:600;font-size:15.5px;padding:8px 11px;border-radius:6px}
.menu a svg{width:18px;height:18px;color:var(--or);flex:none}
.menu a:hover,.menu a[aria-current="page"]{color:var(--texte);background:var(--surface-2)}
.entete .horaires-btn{display:inline-flex;align-items:center;gap:8px;color:var(--texte);text-decoration:none;font-weight:600;font-size:15px;padding:9px 12px;border:1px solid var(--trait);border-radius:999px;white-space:nowrap}
.entete .horaires-btn .pastille{width:9px;height:9px;border-radius:50%;background:var(--discret)}
.entete .horaires-btn.ouvert .pastille{background:#3BD07A;box-shadow:0 0 0 4px rgba(59,208,122,.18)}
.entete .tel{display:none;align-items:center;gap:8px;background:var(--bleu);color:#fff;text-decoration:none;font-weight:600;padding:10px 16px;border-radius:8px;white-space:nowrap}
.entete .tel svg{width:18px;height:18px}
.burger{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:8px;border:1px solid var(--trait);background:transparent;color:var(--texte);cursor:pointer}
.burger svg{width:22px;height:22px}
/* v4 — menu sur téléphone : tiroir plein écran sous l'en-tête, grandes lignes (icône + libellé), au-dessus de la barre du bas */
.menu-mobile{position:fixed;left:0;right:0;top:67px;bottom:0;z-index:80;overflow-y:auto;overscroll-behavior:contain;background:#0A0B0D;border-top:1px solid var(--trait);padding:10px 16px calc(24px + env(safe-area-inset-bottom));animation:tiroir .22s ease-out}
@keyframes tiroir{from{opacity:0;transform:translateY(-8px)}}
.menu-mobile nav{display:flex;flex-direction:column}
.menu-mobile nav a{display:flex;align-items:center;gap:14px;min-height:60px;padding:8px 6px;color:var(--texte);text-decoration:none;font-weight:600;font-size:19px;border-bottom:1px solid var(--trait)}
.menu-mobile nav a[aria-current="page"]{color:var(--or)}
.menu-mobile nav a[aria-current="page"] .mm-ic{background:var(--or);color:var(--fond)}
.mm-ic{flex:none;width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--or)}
.mm-ic svg{width:22px;height:22px}
.mm-t{flex:1}
.mm-fl{font-size:26px;color:var(--discret)}
.mm-actions{display:grid;gap:10px;margin-top:18px}
body.menu-ouvert{overflow:hidden}
body.menu-ouvert .barre{display:none}
@media(max-width:380px){.entete .horaires-btn .txt-long{display:none}}
@media(min-width:1180px){
  .menu{display:flex}.entete .tel{display:inline-flex}.burger,.menu-mobile{display:none!important}
  .marque img{height:54px}.entete .cadre{min-height:78px}
}

/* ── tête de page : le DESSIN de la démo d'origine que le client a vue et aimée (v3, 21/10) ──
   photo plein cadre, voile sombre de gauche à droite, petit trait + sur-titre, titre sur deux lignes (2e en couleur),
   chapeau, pastille « ouvert / fermé », deux boutons, pastille des avis. Couleurs : celles du logo. */
.tete{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:560px;padding:64px 0 56px;background:#0B0C0E}
@media(min-width:900px){.tete{min-height:660px;padding:110px 0 96px}}
.tete .fond-photo{position:absolute;inset:0;z-index:-2}
.tete .fond-photo img{width:100%;height:100%;object-fit:cover;object-position:var(--tete-pos,62% 55%);transform:scale(1.05);animation:respire 14s ease-out forwards}
.tete::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(9,10,12,.84),rgba(9,10,12,.9))}
@media(min-width:900px){.tete::before{background:linear-gradient(90deg,rgba(9,10,12,.95) 0%,rgba(9,10,12,.84) 46%,rgba(9,10,12,.42) 100%)}}
@keyframes respire{to{transform:scale(1)}}
.tete>.cadre{width:100%}
.tete .texte{max-width:720px}
.sur{font-family:var(--corps);font-weight:600;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--or);margin-bottom:14px}
.tete .sur{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.1em;color:#fff;margin:0 0 16px}
.tete .sur::before{content:"";width:28px;height:3px;border-radius:2px;background:var(--bleu-clair);flex:none;transform-origin:0 50%;animation:trait .8s cubic-bezier(.2,.8,.2,1) .25s both}
@keyframes trait{from{transform:scaleX(0)}}
.tete h1{color:#fff;text-transform:uppercase;font-size:clamp(36px,9.4vw,70px);line-height:1.03;margin-bottom:18px;text-wrap:balance}
.tete h1 em{font-style:normal;color:var(--bleu-clair)}
.saut{display:none}
@media(min-width:700px){.saut{display:inline}}
.chapeau{font-size:clamp(17px,4.4vw,20px);line-height:1.55;color:rgba(255,255,255,.86);max-width:33em;margin:0 0 24px}
.etat{display:inline-flex;align-items:center;gap:9px;margin:0 0 20px;padding:8px 15px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);font-weight:600;font-size:15px;color:#fff}
.etat .pastille{width:10px;height:10px;border-radius:50%;background:#9AA3AF}
.etat.ouvert .pastille{background:#22A565}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.actions .bouton{flex:1 1 220px}
@media(min-width:700px){.actions .bouton{flex:0 0 auto}}
.tete .bouton.bleu{position:relative;overflow:hidden}
.tete .bouton.bleu::after{content:"";position:absolute;top:0;bottom:0;left:0;width:46%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);animation:reflet 5.5s ease-in-out 1.6s infinite both;pointer-events:none}
@keyframes reflet{0%{transform:translateX(-120%)}22%,100%{transform:translateX(260%)}}
.tete .bouton.contour{border:1.5px solid rgba(255,255,255,.55);color:#fff;background:transparent}
.gages{display:flex;flex-wrap:wrap;gap:10px 12px;list-style:none;margin:26px 0 0;padding:0}
.gages li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);font-size:14.5px;font-weight:600;color:#fff}
.gages svg{width:17px;height:17px;color:var(--or)}

/* ── blocs ── */
.bloc{padding:72px 0}
@media(min-width:900px){.bloc{padding:100px 0}}
.bloc.alt{background:var(--surface)}
.bloc.claire{background:var(--clair);color:var(--encre)}
.bloc.claire .sur{color:var(--or-sur-clair)}
.bloc.claire h2 em{color:var(--bleu-sur-clair)}
.titre{max-width:760px;margin-bottom:38px}
.titre h2{font-size:clamp(34px,5.4vw,56px);text-transform:uppercase}
.titre p.intro{margin-top:14px;color:var(--chrome);font-size:18px}
.bloc.claire .titre p.intro{color:var(--encre-discret)}
.vide{color:var(--chrome);background:var(--surface);border:1px dashed var(--trait);border-radius:var(--r);padding:22px}

/* les quatre prestations de tête */
.phares{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:620px){.phares{grid-template-columns:1fr 1fr}}
@media(min-width:1050px){.phares{grid-template-columns:repeat(4,1fr)}}
.phare{position:relative;border-radius:var(--r);overflow:hidden;background:var(--surface);border:1px solid var(--trait);display:flex;flex-direction:column;transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.phare:hover{transform:translateY(-6px);border-color:var(--or);box-shadow:var(--ombre)}
.phare figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--surface-2)}
.phare figure img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.phare:hover figure img{transform:scale(1.06)}
.phare .icone-grande{display:flex;align-items:center;justify-content:center;height:100%;color:var(--or);background:radial-gradient(circle at 50% 40%,rgba(0,80,248,.28),transparent 65%),var(--surface-2)}
.phare .icone-grande svg{width:84px;height:84px}
.phare .corps{padding:20px 20px 22px}
.phare h3{font-size:28px;text-transform:uppercase}
.phare p{margin-top:8px;color:var(--chrome);font-size:16px}

/* véhicules — v3, « plus pro, comme la démo de référence » : grandes photos qui défilent, filtres, tri */
.vh-grille{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:640px){.vh-grille{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.vh-grille{grid-template-columns:repeat(3,1fr);gap:24px}}
.vh{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--trait);border-radius:var(--r);overflow:hidden;transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.bloc.alt .vh{background:var(--fond)}
.vh:hover{transform:translateY(-4px);border-color:var(--or);box-shadow:var(--ombre)}
.vh-photo{position:relative;aspect-ratio:4/3;background:var(--surface-2);overflow:hidden}
.vh-defile{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.vh-defile::-webkit-scrollbar{display:none}
.vh-vue{flex:0 0 100%;height:100%;scroll-snap-align:start;display:block}
.vh-vue img{width:100%;height:100%;object-fit:cover;object-position:50% 72%}
.vh-vendu .vh-vue img{filter:grayscale(.55) brightness(.8)}
.vh-nav{position:absolute;top:50%;width:40px;height:40px;margin-top:-20px;border-radius:50%;border:0;background:rgba(10,11,13,.7);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.92;transition:opacity .2s,background .2s}
.vh-nav svg{width:20px;height:20px}
.vh-nav:hover{background:var(--bleu)}
.vh-prec{left:10px}.vh-suiv{right:10px}
@media(hover:hover){.vh-nav{opacity:0}.vh:hover .vh-nav,.vh-nav:focus-visible{opacity:1}}
.vh-compte{position:absolute;right:10px;bottom:10px;padding:3px 9px;border-radius:999px;background:rgba(10,11,13,.75);color:#fff;font-size:13px;font-weight:600}
.vh-badge{position:absolute;top:14px;left:14px;background:var(--rouge);color:#fff;font-family:var(--titre);font-size:17px;letter-spacing:.14em;text-transform:uppercase;padding:5px 12px;border-radius:4px}
.vh-badge.en-ligne{position:static;display:inline-block;font-size:14px;padding:3px 9px;margin-left:8px;vertical-align:middle}
.vh-sans-photo{display:flex;align-items:center;justify-content:center;height:100%;color:var(--discret);font-weight:600}
.vh-sans-photo.grand{aspect-ratio:4/3;background:var(--surface-2);border-radius:var(--r)}
.vh-corps{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.vh-marque{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--or)}
.vh-titre{font-size:28px;text-transform:uppercase;margin-top:4px}
.vh-titre a{color:inherit;text-decoration:none}
.vh-version{color:var(--discret);font-size:15px;margin-top:2px}
.vh-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.vh-pills span{padding:5px 10px;border-radius:6px;background:var(--surface-2);border:1px solid var(--trait);font-size:14px;font-weight:600;color:var(--chrome)}
.bloc.alt .vh-pills span{background:var(--surface)}
.vh-bas{margin-top:auto;padding-top:16px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap}
.vh-prix{font-family:var(--titre);font-size:34px;line-height:1;color:var(--or)}
.vh-prix small{font-size:15px;font-family:var(--corps);font-weight:600}
.vh-prix-vendu{color:#FF8A80}
.vh-voir{display:inline-flex;align-items:center;gap:4px;color:var(--texte);font-weight:600;text-decoration:none;padding:9px 12px;border:1px solid var(--trait);border-radius:8px}
.vh-voir svg{width:16px;height:16px}
.vh-voir:hover{border-color:var(--or);color:var(--or)}
.notes-stock{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px;color:var(--chrome);font-size:15.5px;padding:0;list-style:none}
.notes-stock li{display:flex;gap:8px;align-items:flex-start}
.notes-stock svg{width:20px;height:20px;color:var(--or);flex:none;margin-top:3px}
.suite{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px}
/* filtres */
.filtres-stock{margin:-10px 0 24px}
.fbar{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.f-q{position:relative;flex:1 1 320px;display:flex;align-items:center}
.f-q svg{position:absolute;left:14px;width:19px;height:19px;color:var(--discret);pointer-events:none}
.f-q input,.f-tri select,.f-sel select{width:100%;background:var(--surface);border:1px solid #3A3F47;border-radius:8px;color:var(--texte);font:600 16px/1.3 var(--corps);padding:12px 14px;min-height:48px}
.f-q input{padding-left:42px}
.f-q input::placeholder{color:var(--discret);font-weight:500}
.f-tri{flex:0 0 220px}
.f-tri select,.f-sel select{appearance:none;-webkit-appearance:none;padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23B8BEC7' stroke-width='2.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.f-q input:focus,.f-tri select:focus,.f-sel select:focus{outline:2px solid var(--bleu-clair);outline-offset:1px}
.f-sel select.actif{border-color:var(--or);box-shadow:inset 0 0 0 1px var(--or)}
.f-tog{display:none;align-items:center;justify-content:center;gap:8px;border:1px solid var(--trait);background:var(--surface-2);color:var(--texte);border-radius:8px;padding:0 16px;font:600 15px var(--corps);cursor:pointer;min-height:48px}
.f-tog b{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--or);color:var(--fond);font-size:12px}
.f-sel{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.f-sel label{display:grid;gap:6px}
.f-sel label>span{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--discret)}
.f-compte{margin-top:12px;color:var(--chrome);font-size:15px;font-weight:600}
.lien-bouton{background:none;border:0;padding:0;color:var(--bleu-clair);font:inherit;text-decoration:underline;cursor:pointer}
@media(max-width:760px){.f-q{flex:1 1 100%}.f-tog{display:flex;flex:1}.f-tri{flex:1 1 0}.f-sel{display:none;grid-template-columns:1fr 1fr;padding:12px;background:var(--surface);border:1px solid var(--trait);border-radius:8px}.f-sel.ouvert{display:grid}}

/* avis */
.avis-tete{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-bottom:28px}
.avis-note strong{font-family:var(--titre);font-size:64px;line-height:1;color:var(--encre)}
.avis-note span{display:block;color:var(--encre-discret);font-weight:600}
.etoiles{display:inline-flex;gap:3px;color:var(--or-fonce)}
.etoiles svg{width:22px;height:22px}
.paroles{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:900px){.paroles{grid-template-columns:repeat(3,1fr)}}
.paroles blockquote{margin:0;background:#fff;border:1px solid #DDE1E6;border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:12px;box-shadow:0 10px 24px rgba(21,23,27,.06)}
.paroles blockquote .etoiles svg{width:19px;height:19px}
.paroles blockquote p{color:var(--encre);font-size:16.5px}
.paroles footer{margin-top:auto;color:var(--encre-discret);font-weight:600;font-size:15px}
.bloc.claire .bouton.sombre{background:var(--encre);color:#fff;margin-top:28px}
.date-releve{margin-top:14px;font-size:14px;color:var(--encre-discret)}

/* horaires et accès */
.pratique{display:grid;gap:30px;grid-template-columns:1fr}
@media(min-width:900px){.pratique{grid-template-columns:1fr 1fr;gap:48px}}
.pratique h3{font-size:28px;text-transform:uppercase;margin-bottom:6px}
.sous{color:var(--chrome);margin-bottom:16px}
.horaires{width:100%;border-collapse:collapse;font-size:17px}
.horaires th,.horaires td{padding:12px 4px;border-bottom:1px solid var(--trait);text-align:left;font-weight:400}
.horaires th{font-weight:600}
.horaires td{text-align:right;color:var(--chrome)}
.horaires tr.ferme td{color:var(--discret)}
.horaires tr.aujourdhui th,.horaires tr.aujourdhui td{color:var(--or);font-weight:600}
.horaires tr.aujourdhui th::after{content:" · aujourd'hui";font-weight:400;font-size:14px}
.adresse{font-style:normal;font-size:18px;line-height:1.5;margin-bottom:16px}
.adresse b{display:block;font-family:var(--titre);font-size:24px;letter-spacing:.04em}
.carte{margin-top:18px;border-radius:var(--r);overflow:hidden;border:1px solid var(--trait);aspect-ratio:4/3}
.carte iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.25)}
.carte-ouvrir{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;height:100%;text-decoration:none;color:var(--texte);text-align:center;padding:20px;
  background:linear-gradient(rgba(10,11,13,.55),rgba(10,11,13,.75)),repeating-linear-gradient(0deg,transparent 0 38px,rgba(90,155,255,.10) 38px 39px),repeating-linear-gradient(90deg,transparent 0 38px,rgba(90,155,255,.10) 38px 39px),var(--surface-2)}
.carte-ouvrir svg{width:54px;height:54px;color:var(--or)}
.carte-ouvrir b{display:block;font-family:var(--titre);font-size:24px;text-transform:uppercase;letter-spacing:.04em}
.carte-ouvrir small{display:block;color:var(--chrome);font-size:15px;margin-top:4px}
.carte-ouvrir:hover b{color:var(--or)}
.carte-credit{font-size:13px;color:var(--discret);margin-top:6px}

/* pied */
.pied{background:#060708;border-top:1px solid var(--trait);padding:44px 0 110px;color:var(--chrome);font-size:15.5px}
@media(min-width:1000px){.pied{padding-bottom:44px}}
.pied .cadre{display:grid;gap:26px;grid-template-columns:1fr}
@media(min-width:800px){.pied .cadre{grid-template-columns:1.2fr 1fr 1fr}.pied-logo{justify-self:center}}
.pied img{height:64px;width:auto}
.pied h2{font-size:18px;letter-spacing:.14em;text-transform:uppercase;color:var(--texte);margin-bottom:8px;font-family:var(--corps);font-weight:600}
.pied a{color:var(--chrome)}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pied .bas{grid-column:1/-1;border-top:1px solid var(--trait);padding-top:18px;font-size:14px;color:var(--discret);display:flex;flex-wrap:wrap;gap:8px 20px}
.pied .bas a{color:var(--discret)}

/* barre d'actions mobile */
.barre{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(10,11,13,.95);border-top:1px solid var(--trait);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.barre a{display:flex;align-items:center;justify-content:center;gap:7px;min-height:48px;border-radius:8px;text-decoration:none;font-weight:600;font-size:15px;color:var(--texte);background:var(--surface-2)}
.barre a:first-child{background:var(--bleu);color:#fff}
.barre svg{width:18px;height:18px;flex:none}
@media(min-width:1000px){.barre{display:none}}

/* pages intérieures */
.tete-page{padding:48px 0 34px;border-bottom:1px solid var(--trait);background:radial-gradient(ellipse at 15% 0%,rgba(0,80,248,.22),transparent 55%),var(--fond)}
.tete-page h1{font-size:clamp(40px,7vw,68px);text-transform:uppercase}
.tete-page p{margin-top:12px;color:var(--chrome);max-width:62ch}
.ariane{font-size:14.5px;color:var(--discret);margin:22px 0 20px}
.ariane a{color:var(--chrome)}
.fiche{display:grid;gap:28px;grid-template-columns:1fr}
@media(min-width:960px){.fiche{grid-template-columns:1.35fr 1fr;gap:40px;align-items:start}}
.galerie-grande{position:relative;margin:0;border-radius:var(--r);overflow:hidden;background:var(--surface-2);aspect-ratio:4/3;touch-action:pan-y}
.g-nav{position:absolute;top:50%;width:46px;height:46px;margin-top:-23px;border-radius:50%;border:0;background:rgba(10,11,13,.72);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.g-nav svg{width:22px;height:22px}
.g-nav:hover{background:var(--bleu)}
.g-prec{left:12px}.g-suiv{right:12px}
.g-compte{position:absolute;right:12px;bottom:12px;padding:4px 10px;border-radius:999px;background:rgba(10,11,13,.78);color:#fff;font-size:14px;font-weight:600}
.fiche-tuiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.fiche-tuiles div{background:var(--surface);border:1px solid var(--trait);border-radius:8px;padding:10px 12px}
.fiche-tuiles span{display:block;font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--discret)}
.fiche-tuiles b{display:block;font-size:18px;font-weight:600;margin-top:2px}
.galerie-grande img{width:100%;height:100%;object-fit:contain;background:#000}
.galerie-vignettes{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin-top:10px}
.vignette{padding:0;border:2px solid transparent;border-radius:6px;overflow:hidden;background:none;cursor:pointer;aspect-ratio:4/3}
.vignette img{width:100%;height:100%;object-fit:cover}
.vignette.active{border-color:var(--or)}
.fiche-infos h1{font-size:clamp(36px,5vw,54px);text-transform:uppercase;margin-top:6px}
.fiche-prix{font-family:var(--titre);font-size:48px;color:var(--or);margin-top:14px}
.fiche-prix small{font-family:var(--corps);font-size:18px;font-weight:600}
.fiche-tableau{margin-top:12px}
.fiche-ligne{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--trait);font-size:16px}
.fiche-ligne span{color:var(--discret)}
.fiche-ligne b{font-weight:600;text-align:right}
.fiche-actions{display:grid;gap:10px;margin-top:22px}
.fiche-texte{margin-top:42px;max-width:860px;padding-bottom:20px}
.fiche-texte h2{font-size:34px;text-transform:uppercase;margin-bottom:12px}
.fiche-sous{font-size:22px;text-transform:uppercase;color:var(--or);margin:22px 0 8px}
.fiche-texte p{color:var(--chrome);margin:8px 0}
.coches{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.coches li{position:relative;padding-left:28px;color:var(--texte)}
.coches li::before{content:"";position:absolute;left:4px;top:9px;width:12px;height:7px;border-left:2.5px solid var(--bleu-clair);border-bottom:2.5px solid var(--bleu-clair);transform:rotate(-45deg)}
.reserve{font-size:14px;color:var(--discret)!important;margin-top:20px!important}
.legal{max-width:820px}
.legal h2{font-size:28px;text-transform:uppercase;margin:34px 0 10px}
.legal p,.legal li{color:var(--chrome)}
.legal p+p{margin-top:10px}

/* apparition au défilement — le contenu reste visible sans JavaScript */
.js .apparait{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.16,.84,.44,1)}
.js .apparait.vu{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .apparait{opacity:1;transform:none}
}

/* v2 — huit prestations, toutes en photo (2 colonnes sur téléphone, 4 sur ordinateur) */
.phares.huit{grid-template-columns:1fr 1fr;gap:12px}
.phares.huit>.phare:first-child{grid-column:1/-1}
.phares.huit>.phare:first-child figure{aspect-ratio:16/9}
@media(min-width:620px) and (max-width:1049px){.phares.huit>.phare:first-child figure{aspect-ratio:21/9}}
@media(min-width:1050px){.phares.huit{grid-template-columns:repeat(12,1fr);gap:16px}.phares.huit>.phare{grid-column:span 3}.phares.huit>.phare:nth-child(-n+3){grid-column:span 4}.phares.huit>.phare:first-child figure{aspect-ratio:4/3}}
.phare figure{position:relative}
@media(max-width:619px){.phare .corps{padding:12px 12px 14px}.phare h3{font-size:20px}.phare p{font-size:14px;line-height:1.5}}

/* v2 — une seule réalisation : avant au-dessus de l'après, une flèche entre les deux */
.realisation{display:grid;gap:28px;grid-template-columns:1fr;align-items:center}
@media(min-width:960px){.realisation{grid-template-columns:.85fr 1.15fr;gap:56px}}
.realisation h2{font-size:clamp(34px,5.4vw,56px);text-transform:uppercase;margin-bottom:18px}
.realisation .tag{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--bleu-clair);margin-bottom:6px}
.realisation h3{font-size:30px;text-transform:uppercase}
.realisation p{margin-top:10px;color:var(--chrome)}
.realisation p.petit{font-size:14px;color:var(--discret)}
/* v3 — avant/après INTERACTIF (référence de Loann) : les deux photos superposées, un curseur à glisser */
.ba{position:relative;width:100%;max-width:760px;margin:0 auto;aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;background:var(--surface-2);border:1px solid var(--trait);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize}
.ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba-avant{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-mot{position:absolute;top:9%;font-family:var(--titre);font-weight:700;font-size:clamp(30px,7vw,58px);letter-spacing:.02em;text-transform:uppercase;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.65),0 1px 3px rgba(0,0,0,.8);pointer-events:none}
.ba-mot-avant{left:6%}
.ba-mot-apres{right:6%}
.ba-ligne{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,.45);pointer-events:none}
.ba-poignee{position:absolute;top:50%;left:var(--pos);width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;border:3px solid #fff;background:rgba(10,11,13,.55);color:#fff;display:flex;align-items:center;justify-content:center;cursor:ew-resize;box-shadow:0 4px 18px rgba(0,0,0,.5);padding:0;touch-action:none}
.ba-poignee svg{width:24px;height:24px}
.ba-poignee:focus-visible{outline:3px solid var(--bleu-clair);outline-offset:3px}
.ba.glisse .ba-poignee{background:var(--bleu)}

/* v2 — contact façon démo de référence : à gauche les moyens directs, à droite un formulaire qui PRÉPARE un message */
.contact{padding:72px 0;background:radial-gradient(ellipse at 15% 0%,rgba(0,80,248,.26),transparent 55%),var(--fond)}
@media(min-width:900px){.contact{padding:100px 0}}
.ct{display:grid;gap:34px;grid-template-columns:1fr}
@media(min-width:960px){.ct{grid-template-columns:1fr 1fr;gap:56px;align-items:start}}
.ct-g h2{font-size:clamp(36px,5.8vw,60px);text-transform:uppercase}
.ct-g .intro{margin-top:14px;color:var(--chrome);font-size:18px;max-width:46ch}
.ct-g .numero{display:inline-block;margin-top:18px;font-family:var(--titre);font-size:clamp(42px,9vw,64px);color:var(--texte);text-decoration:none;letter-spacing:.02em}
.ct-l{margin-top:22px;border-top:1px solid var(--trait)}
.ct-l a{display:flex;align-items:center;gap:16px;padding:16px 4px;border-bottom:1px solid var(--trait);color:var(--texte);text-decoration:none}
.ct-l a>span:nth-child(2){flex:1}
.ct-l a>span:last-child{font-size:22px;color:var(--discret);transition:transform .25s ease}
.ct-l a:hover>span:last-child{transform:translateX(4px);color:var(--or)}
.ct-l small{display:block;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--discret)}
.ct-l b{font-size:19px;font-weight:600}
.ct-i{flex:none;width:46px;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--or)}
.ct-i.bleu{background:var(--bleu);color:#fff}
.ct-i svg{width:22px;height:22px}
.ct-l b{overflow-wrap:anywhere}  /* v7f (23/10) : l'e-mail est une ligne comme les autres (Samir) ; ne déborde jamais à 375 px */
.ct-f{background:var(--surface);border:1px solid var(--trait);border-radius:14px;padding:20px 18px 18px;box-shadow:var(--ombre)}
@media(min-width:700px){.ct-f{padding:28px 28px 24px}}
.ct-ty{border:0;padding:0;margin:0 0 6px}
.ct-ty legend{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--or);margin-bottom:10px;padding:0}
.ct-ty div{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(min-width:520px){.ct-ty div{grid-template-columns:repeat(3,1fr)}}
.ct-ty button{min-height:48px;padding:8px 10px;border-radius:8px;border:1px solid var(--trait);background:var(--fond);color:var(--chrome);font:600 15px/1.2 var(--corps);cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.ct-ty button:hover{border-color:var(--or)}
.ct-ty button.on{background:var(--or);border-color:var(--or);color:var(--fond)}
#form-contact label{display:block;margin-top:14px;font-size:15px;font-weight:600;color:var(--texte)}
#form-contact .fac{font-weight:400;color:var(--discret);font-size:14px}
#form-contact input,#form-contact select,#form-contact textarea{display:block;width:100%;margin-top:6px;background:var(--fond);border:1px solid #3A3F47;border-radius:8px;padding:13px 14px;font:400 16px/1.4 var(--corps);color:var(--texte)}
#form-contact textarea{resize:vertical;min-height:110px}
#form-contact input:focus,#form-contact select:focus,#form-contact textarea:focus{outline:2px solid var(--bleu-clair);outline-offset:1px;border-color:transparent}
.ct-photo{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:12px 14px;border-radius:8px;background:rgba(0,80,248,.12);border:1px solid rgba(90,155,255,.35);font-size:14.5px;color:var(--chrome)}
.ct-photo svg{width:24px;height:24px;flex:none;color:var(--bleu-clair);margin-top:1px}
.ct-photo b{color:var(--texte)}
.ct-err{margin-top:12px;color:#FF8A80;font-weight:600;font-size:15px}
.ct-env{width:100%;margin-top:16px}
.ct-note{margin-top:10px;font-size:13.5px;color:var(--discret)}
.contact .petit-wa{text-align:center}

/* v2 — fermeture exceptionnelle (affichée seulement si le garage en a saisi une) */
.conges{background:var(--or);color:var(--fond)}
.conges .cadre{padding-top:10px;padding-bottom:10px}
.conges p{font-size:15.5px;font-weight:600}
.conges p+p{margin-top:4px}
.realisation p.sur{color:var(--or);margin-top:0}
section[id],#form-contact{scroll-margin-top:84px}
.petit-source{font-size:14px;color:var(--discret)!important}

/* v4 — ruban défilant sous la tête (comme la démo d'origine) : le texte est dans un pseudo-élément, aucune boîte plus large que l'écran */
.ruban{display:block;position:relative;overflow:hidden;contain:paint;background:#14171C;color:#fff;border-block:1px solid var(--trait);padding:14px 0;font-family:var(--titre);font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:clamp(18px,4.8vw,30px);line-height:1.2}
.ruban::before{content:attr(data-t);display:inline-block;white-space:pre;will-change:transform;animation:file 48s linear infinite}
@keyframes file{to{transform:translateX(-50%)}}

/* v4 — choix d'un véhicule du stock dans le formulaire (fenêtre avec vignettes, recherche, filtre par marque) */
.ct-lab{display:block;margin-top:14px;font-size:15px;font-weight:600}
.ct-pick{display:flex;align-items:center;gap:12px;width:100%;margin-top:6px;text-align:left;cursor:pointer;background:var(--fond);border:1px solid #3A3F47;border-radius:10px;padding:10px;color:var(--texte);font:inherit;min-height:64px}
.ct-pick:hover,.ct-pick:focus-visible{border-color:var(--or)}
.ct-pick-img{flex:none;width:84px;height:58px;border-radius:6px;overflow:hidden;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--discret)}
.ct-pick-img svg{width:30px;height:30px}
.ct-pick-img img{width:100%;height:100%;object-fit:cover;object-position:50% 72%}
.ct-pick-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-weight:600}
.ct-pick-txt small{font-size:13.5px;font-weight:500;color:var(--chrome)}
.ct-pick-fl{font-size:26px;color:var(--discret);line-height:1}
.pk{border:0;padding:0;width:min(640px,100vw);max-width:100vw;max-height:min(88vh,780px);background:var(--surface);color:var(--texte);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.pk::backdrop{background:rgba(6,7,8,.72)}
.pk-t{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--trait)}
.pk-t b{font-family:var(--titre);font-size:24px;text-transform:uppercase}
.pk-t button{border:0;background:none;color:var(--texte);font-size:30px;line-height:1;cursor:pointer;width:44px;height:44px}
.pk-f{padding:12px 18px;display:grid;gap:10px;border-bottom:1px solid var(--trait)}
.pk-f input{font:500 16px var(--corps);padding:12px 14px;border:1px solid #3A3F47;border-radius:8px;background:var(--fond);color:var(--texte);width:100%}
.pk-m{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.pk-m::-webkit-scrollbar{display:none}
.pk-m button{flex:none;border:1px solid var(--trait);background:var(--fond);color:var(--chrome);border-radius:999px;padding:7px 14px;font:600 14px var(--corps);cursor:pointer}
.pk-m button.on{background:var(--or);border-color:var(--or);color:var(--fond)}
.pk-l{overflow-y:auto;max-height:min(58vh,540px)}
.pk-l button{display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px;align-items:center;width:100%;padding:12px 18px;border:0;border-bottom:1px solid var(--trait);background:transparent;color:var(--texte);text-align:left;cursor:pointer;font:inherit}
.pk-l button:hover,.pk-l button:focus-visible{background:var(--surface-2)}
.pk-l img{width:110px;height:76px;object-fit:cover;object-position:50% 72%;border-radius:6px;background:var(--surface-2)}
.pk-l b{display:block;font-family:var(--titre);font-size:21px;text-transform:uppercase;line-height:1.1}
.pk-l small{display:block;margin-top:3px;font-size:14px;color:var(--chrome)}
.pk-l .px{display:block;margin-top:4px;font-family:var(--titre);font-size:20px;color:var(--or)}
.pk-v{margin:0;padding:22px 18px;color:var(--chrome)}
@media(max-width:620px){.pk{width:100vw;max-height:92vh;margin:auto 0 0;border-radius:14px 14px 0 0}.pk-l button{grid-template-columns:92px minmax(0,1fr);padding:10px 16px}.pk-l img{width:92px;height:64px}}
.burger.ouvert{background:var(--or);border-color:var(--or);color:var(--fond)}
/* backdrop-filter crée un bloc conteneur pour les éléments « fixed » : on l'enlève quand le menu est ouvert,
   sinon le tiroir se calcule sur la hauteur de l'en-tête (mesuré : 35 px de haut). */
body.menu-ouvert .entete{backdrop-filter:none;-webkit-backdrop-filter:none;background:#0A0B0D}
@media(max-width:600px){.tete .sur{display:block;white-space:nowrap;font-size:12.5px;letter-spacing:.1em}.tete .sur::before{display:none}.tete .sur-long{display:none}}
@media(max-width:340px){.tete .sur{font-size:11.5px;letter-spacing:.06em}}

}

/* Bande des réseaux (remise le 21/10 : Facebook, Instagram, TikTok). Contrastes calculés : blanc / #1668D9 5,23:1 ;
   blanc / dégradé #C1356F→#4F5BD5 ≥ 5,24:1 ; blanc / #111 18,9:1 ; pastilles : couleur de marque sur blanc. */
.reseaux{display:flex;flex-wrap:wrap}
.reseaux a{flex:1 1 320px;display:block;color:#fff;text-decoration:none;transition:filter .3s ease}
.reseaux a:hover{filter:brightness(1.1)}
.reseaux .r-in{padding:30px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;max-width:620px;margin:0 auto}
.reseaux svg{width:42px;height:42px;flex:none;animation:flotte 3.4s ease-in-out infinite}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.reseaux .r-txt{flex:1;min-width:200px}
.reseaux .r-titre,.reseaux .r-sous{display:block}
.reseaux .r-titre{font-family:var(--titre);font-size:clamp(24px,3vw,32px);text-transform:uppercase;line-height:1.1}
.reseaux .r-sous{margin-top:6px;font-size:15.5px;font-weight:600}
.reseaux .r-pill{display:inline-flex;background:#fff;font-weight:700;font-size:15px;padding:12px 18px;border-radius:8px;white-space:nowrap}
.r-facebook{background:#1668D9}.r-facebook .r-pill{color:#1668D9}
.r-instagram{background:linear-gradient(135deg,#C1356F 0%,#962FBF 55%,#4F5BD5 100%)}.r-instagram .r-pill{color:#962FBF}
.r-tiktok{background:#111}.r-tiktok .r-pill{color:#111}
@media(prefers-reduced-motion:reduce){.reseaux svg{animation:none}}

/* ═════════════ v6 (22/10/2026) — retours du client au téléphone (notes de Loann, en bas de RDV-2026-10-21-Notes-Loann.md) ═════════════
   Couleurs : uniquement les jetons existants (contrastes calculés le 21/10, _INFOS-SAMOTO.md) ; ajouts calculés le 22/10 :
   or #D9A441 / en-tête #0A0B0D 8,75:1 · discret #8E96A3 / fond #0A0B0D 6,60:1 · blanc / pastille rgba(10,11,13,.78) même sur photo blanche 10,23:1 · noir / pastille or 8,75:1 */
@layer site{
/* en-tête : logo plus grand, et sa ligne « Carrosserie • Peinture • Covering » écrite en texte (lisible), à côté du dessin */
.entete .cadre{min-height:72px}
.marque{display:flex;align-items:center;gap:9px;text-decoration:none}
.marque img{height:50px;width:auto}
.marque-ligne{display:flex;flex-direction:column;justify-content:center;gap:3px;padding-left:9px;border-left:1px solid rgba(217,164,65,.5);font-family:var(--titre);font-weight:700;font-size:11px;line-height:1.05;letter-spacing:.16em;text-transform:uppercase;color:var(--or)}
.menu-mobile{top:73px}
@media(min-width:600px){.marque-ligne{font-size:12px}}
@media(min-width:1180px){.marque img{height:60px}.marque-ligne{font-size:13px}.entete .cadre{min-height:84px}}
@media(max-width:360px){.marque img{height:44px}.marque-ligne{font-size:10px;letter-spacing:.12em}}

/* prestations : 8 cartes, 2 par ligne (téléphone), 4 par ligne (ordinateur) */
.phares.huit>.phare:first-child{grid-column:auto}
.phares.huit>.phare:first-child figure{aspect-ratio:4/3}
@media(min-width:620px) and (max-width:1049px){.phares.huit>.phare:first-child figure{aspect-ratio:4/3}}
@media(min-width:1050px){.phares.huit>.phare,.phares.huit>.phare:nth-child(-n+3){grid-column:span 3}}
.phare p.petit-presta{margin-top:6px;font-size:14px;color:var(--discret)}

/* garanties */
.garanties{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:900px){.garanties{grid-template-columns:1fr 1fr;gap:20px}}
.garantie{background:var(--surface);border:1px solid var(--trait);border-radius:var(--r);padding:22px 22px 18px}
.garantie h3{font-size:26px;text-transform:uppercase;margin-bottom:12px}
.garantie ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.garantie li{display:flex;gap:10px;align-items:flex-start;color:var(--chrome)}
.garantie li svg{width:20px;height:20px;color:var(--or);flex:none;margin-top:3px}

/* stock : mention sous chaque prix */
.vh-px{display:flex;flex-direction:column}
.vh-cg{margin-top:5px;font-size:12.5px;font-weight:600;color:var(--discret)}
.fiche-cg{margin-top:2px;font-size:14px;color:var(--discret)}
.fiche-actions .bouton{width:100%}

/* annonce : des rubriques nettement séparées */
.fiche-texte .rubrique{padding:18px 0 16px;border-top:1px solid var(--trait)}
.fiche-texte .rubrique:last-of-type{border-bottom:1px solid var(--trait)}
.fiche-texte .rubrique .fiche-sous{margin:0 0 10px}
.fiche-texte .rubrique p{margin:4px 0}
@media(min-width:760px){.fiche-texte .rubrique .coches{grid-template-columns:1fr 1fr;column-gap:28px}}

/* avis qui défilent (étoiles sur chaque avis ; aucun balisage de note) */
.avis-defile{overflow:hidden;margin:0 -16px;padding:4px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.avis-piste{display:flex;gap:18px;width:max-content;padding:6px 16px 18px;animation:avis-defile 110s linear infinite}
.avis-defile:hover .avis-piste,.avis-defile.arrete .avis-piste,.avis-defile:focus-within .avis-piste{animation-play-state:paused}
@keyframes avis-defile{to{transform:translateX(calc(-50% - 9px))}}
.avis-c{flex:0 0 300px;margin:0;background:#fff;border:1px solid #DDE1E6;border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:10px;box-shadow:0 10px 24px rgba(21,23,27,.06)}
@media(min-width:700px){.avis-c{flex-basis:360px}}
.avis-c .etoiles svg{width:19px;height:19px}
.avis-c p{color:var(--encre);font-size:16px}
.avis-c footer{margin-top:auto;color:var(--encre-discret);font-weight:600;font-size:14.5px}
.avis-aide{margin-top:4px;font-size:14px;color:var(--encre-discret)}
@media(prefers-reduced-motion:reduce){.avis-defile{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.avis-piste{animation:none}.avis-c[aria-hidden="true"]{display:none}}

/* avant/après : proportions de la paire */
.ba{aspect-ratio:var(--ratio,3/2)}
.ba.portrait{max-width:480px}

/* page Réalisations */
.rl-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.rl-nav a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1px solid var(--trait);border-radius:999px;color:var(--texte);text-decoration:none;font-weight:600;background:var(--surface)}
.rl-nav a:hover{border-color:var(--or);color:var(--or)}
.rl-rubrique{scroll-margin-top:96px}
.rl-rubrique .titre{margin-bottom:26px}
.rl-cas{margin:0 0 34px}
.rl-cas h3{font-size:26px;text-transform:uppercase;margin-bottom:6px}
.rl-cas>p{color:var(--chrome);margin-bottom:14px;max-width:70ch}
.rl-sous{font-size:30px;text-transform:uppercase;margin:44px 0 6px}
.rl-sous+p{color:var(--chrome);margin-bottom:18px;max-width:70ch}
.paire{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:980px}
.paire.portrait{max-width:620px}
.paire figure{position:relative;margin:0;border-radius:var(--r);overflow:hidden;background:var(--surface-2);border:1px solid var(--trait);aspect-ratio:var(--ratio,4/3)}
.paire img{width:100%;height:100%;object-fit:cover}
.paire-mot{position:absolute;left:8px;top:8px;padding:4px 10px;border-radius:6px;background:rgba(10,11,13,.78);color:#fff;font-family:var(--titre);font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.paire figure:last-child .paire-mot{background:var(--or);color:var(--fond)}
.rl-galerie{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
@media(min-width:760px){.rl-galerie{grid-template-columns:repeat(4,1fr);gap:14px}}
.rl-galerie figure{margin:0}
.rl-galerie a{display:block;border-radius:var(--r);overflow:hidden;border:1px solid var(--trait);background:var(--surface-2);aspect-ratio:4/3}
.rl-galerie img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.rl-galerie a:hover img{transform:scale(1.04)}
.rl-galerie figcaption{margin-top:6px;font-size:14px;color:var(--chrome);line-height:1.4}
.rl-fin{margin-top:20px;padding:28px;border:1px solid var(--trait);border-radius:var(--r);background:var(--surface)}
.rl-fin h2{font-size:clamp(28px,4vw,40px);text-transform:uppercase}
.rl-fin p{color:var(--chrome);margin-top:8px}
.rl-fin .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.lb{border:0;padding:0;background:transparent;max-width:min(96vw,1200px);max-height:92vh}
.lb::backdrop{background:rgba(5,6,8,.9)}.lb .lb-prec,.lb .lb-suiv{top:50%;right:auto;transform:translateY(-50%);font-size:34px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0 0 4px}.lb .lb-prec{left:12px}.lb .lb-suiv{right:12px;left:auto}.lb .lb-prec[hidden],.lb .lb-suiv[hidden]{display:none}.lb .lb-prec:hover,.lb .lb-suiv:hover,.lb .lb-prec:focus-visible,.lb .lb-suiv:focus-visible{background:rgba(255,255,255,.18)}
.lb img{max-width:100%;max-height:82vh;width:auto;height:auto;border-radius:8px;margin:0 auto}
.lb p{color:#fff;text-align:center;margin-top:10px;font-size:15px}
.lb button{position:fixed;top:12px;right:12px;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(10,11,13,.8);color:#fff;font-size:26px;cursor:pointer}
}
@layer site{.rl-note{margin-top:16px;color:var(--chrome);font-size:15.5px}}
/* v6 — en-tête sur téléphone : tout tient sur une ligne même quand la pastille dit « Horaires » (plus longue que « Ouvert ») ;
   mesuré à 375 px le 22/10 : 410 px demandés avant cette règle. */
@layer site{
@media(max-width:420px){
  .entete .cadre{gap:8px;padding:0 12px}
  .marque{gap:7px}
  .marque img{height:44px}
  .marque-ligne{font-size:10px;letter-spacing:.1em;padding-left:7px}
  .entete .horaires-btn{padding:8px 9px;font-size:14px;gap:7px}
  .burger{width:44px;height:44px;flex:none}
}
@media(max-width:360px){.marque img{height:40px}.marque-ligne{font-size:9.5px;letter-spacing:.08em}}
}

/* 22/10/2026 — Loann : « quand je clique sur carrosserie dans prestation ça doit m'emmener dans la section réalisation » : la carte entière est un lien vers sa rubrique */
.phare-lien{position:absolute;inset:0;z-index:2;border-radius:inherit}
.phare-lien:focus-visible{outline:3px solid var(--or);outline-offset:-3px}
.phare:has(.phare-lien){cursor:pointer}
.phare-voir{margin-top:10px!important;font-size:14px!important;font-weight:600;color:var(--or)}
/* v6c (22/10) : 9 prestations — 3 × 3 dès 620 px ; sur téléphone 2 colonnes, la 1re carte en pleine largeur (1 + 4 × 2). */
@layer site{
.phares.neuf>.phare:first-child{grid-column:1/-1}
.phares.neuf>.phare:first-child figure{aspect-ratio:16/9}
@media(min-width:620px){.phares.huit.neuf{grid-template-columns:repeat(3,1fr);gap:14px}.phares.neuf>.phare:first-child{grid-column:auto}.phares.neuf>.phare:first-child figure{aspect-ratio:4/3}}
@media(min-width:1050px){.phares.huit.neuf{grid-template-columns:repeat(3,1fr);gap:18px}.phares.huit.neuf>.phare,.phares.huit.neuf>.phare:nth-child(-n+3){grid-column:auto}}
}
/* v6d (22/10, Loann : « toutes les photos de la même taille ») : une seule grille, un seul format.
   Chaque photo = une case 4:3 de même largeur (2 colonnes dès 620 px, 1 sur téléphone), object-fit: cover ;
   le curseur avant/après occupe une case, son texte la case voisine. Accueil : même format 4:3 pour l'avant/après. */
@layer site{
.ba{aspect-ratio:4/3}
.rl-grille{display:grid;grid-template-columns:1fr;gap:14px;margin-top:14px}
@media(min-width:620px){.rl-grille{grid-template-columns:1fr 1fr;gap:16px}}
.rl-grille .ba{max-width:none;margin:0;aspect-ratio:4/3}
.rl-grille.paire figure,.rl-galerie a{aspect-ratio:4/3}
.rl-grille.paire{max-width:none}
.rl-texte{align-self:center}
.rl-texte h3{font-size:26px;text-transform:uppercase;margin-bottom:6px}
.rl-texte p{color:var(--chrome)}
.rl-grille+.rl-cas,.rl-cas+.rl-cas,.rl-cas+.rl-grille,.rl-grille+.rl-grille{margin-top:34px}
.rl-cas{margin:0}
.rl-cas>p{margin-bottom:0}
.rl-galerie figcaption{font-size:15px}
}
/* v6e (22/10, Loann : « met des dessins / illustrations ») : un dessin au trait par engagement (même trait de 2 px et même or que les
   icônes du menu), un dessin plus grand en tête de colonne. Contrastes calculés : or #D9A441 / surface #14171C 7,99:1 ;
   or / case #1B1F25 7,36:1. */
@layer site{
.garantie-tete{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.garantie-tete h3{margin:0}
.garantie-ic{flex:none;width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--or)}
.garantie-ic svg{width:30px;height:30px}
.garantie li{align-items:center}
.garantie li svg{width:24px;height:24px;margin-top:0}
.garantie ul{gap:12px}
}
/* v6e (robustesse, 22/10) : un titre très long ou un mot sans espace ne déborde jamais ; « Prix sur demande » lisible. */
@layer site{
.vh-titre,.vh-version,.fiche-infos h1,.fiche-infos .vh-version,.ariane,.fiche-tuiles b,.fiche-texte,.coches li,.pk-l b,.ct-pick-txt,.vh-pills span{overflow-wrap:anywhere}
.vh-titre{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.prix-demande{font-size:.62em;letter-spacing:.02em}
.fiche-tuiles div{min-width:0}
}
/* v6f : « Véhicule révisé et nettoyé avant la vente » (fiches en vente) — or #D9A441 sur #14171C 7,99:1, texte #F2F4F7 sur #14171C 16,30:1 */
@layer site{
.fiche-revise{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 12px;border:1px solid var(--trait);border-left:3px solid var(--or);border-radius:8px;background:var(--surface);font-weight:600;font-size:15.5px;color:var(--texte)}
.fiche-revise svg{width:22px;height:22px;flex:none;color:var(--or)}
}
/* v6f : boutons de rubriques de /realisations avec un dessin au trait (or #D9A441 sur #14171C 7,99:1) ; 2 colonnes égales sur téléphone */
@layer site{
.rl-nav a{gap:9px;white-space:nowrap}
.rl-nav a svg{width:22px;height:22px;flex:none;color:var(--or)}
@media(max-width:619px){.rl-nav{display:grid;grid-template-columns:1fr 1fr}.rl-nav a{justify-content:flex-start;padding:8px 12px;font-size:15px;white-space:normal;line-height:1.2}}
}
/* v7 (23/10/2026, appel avec SAM'OTO) */
.jantes-accueil{margin-top:34px}
.jantes-accueil .sur{margin-bottom:4px}
.jantes-accueil .rl-galerie{grid-template-columns:repeat(3,1fr);gap:8px}
@media(min-width:760px){.jantes-accueil .rl-galerie{grid-template-columns:repeat(5,1fr);gap:10px}}
.jantes-accueil .rl-galerie figcaption{font-size:13px}
.jantes-accueil .rl-galerie a{cursor:zoom-in}
.devis-gratuit{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.devis-gratuit p{margin:0;font-weight:600;color:var(--texte)}
.pied-logo ul{margin-top:12px}
/* titres des réalisations : entrée au défilement */
.js .titre.apparait .sur{opacity:0;transform:translateX(-18px);transition:opacity .7s ease .1s,transform .7s cubic-bezier(.16,.84,.44,1) .1s}
.js .titre.apparait h2{opacity:0;transform:translateY(18px);transition:opacity .8s ease .25s,transform .8s cubic-bezier(.16,.84,.44,1) .25s}
.js .titre.apparait h2 em{background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .9s ease .7s}
.js .titre.apparait.vu .sur,.js .titre.apparait.vu h2{opacity:1;transform:none}
.js .titre.apparait.vu h2 em{background-size:100% 2px}
@media (prefers-reduced-motion:reduce){.js .titre.apparait .sur,.js .titre.apparait h2{opacity:1;transform:none;transition:none}}
/* v7d : petite phrase de devis sous chaque réalisation (lien discret, pas un bouton) */
.devis-petit{margin:10px 0 0;font-size:14px}
.devis-petit a{color:var(--chrome);text-decoration:underline;text-underline-offset:3px}
.devis-petit a:hover{color:var(--texte)}
.rl-cas .devis-petit{margin-top:8px}
.dh .tete .texte p.signature-heros{margin:18px 0 0;font-size:15px;line-height:1.5;color:rgba(255,255,255,.72);letter-spacing:.01em}