/* ============================================================
   RMDESIGN : maquette interactive V1
   Direction : Racing / JDM · noir carbone · rouge racing E10600
   · blanc Championship. Monde visuel unique (sombre), assumé.
   Typo : Chakra Petch (display italique + UI) / Barlow (texte)
   ============================================================ */

@font-face{font-family:'Chakra Petch';font-style:italic;font-weight:700;font-display:swap;
  src:url(/assets/fonts/chakra-700i.woff2) format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/chakra-500.woff2) format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/chakra-600.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/barlow-400.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/barlow-600.woff2) format('woff2')}

:root{
  /* fonds : noir carbone bleuté */
  --bg:#0B0D10; --bg2:#101318; --surface:#14181E; --surface2:#1A1F27;
  --line:#262C36; --line2:#313947;
  /* encres : blanc Championship (crème froide) */
  --ink:#F6F4EF; --muted:#9BA3B0; --faint:#868F9D;
  /* accent : rouge racing */
  --red:#E10600; --red-hot:#FF2B1E; --red-deep:#8F0400;
  /* statuts (validés CVD + contraste sur --surface) */
  --ok:#2AA968; --warn:#C77F06; --info:#3E8BE0; --bad:#E8483C;
  /* typo */
  --f-display:'Chakra Petch','Arial Narrow',Impact,sans-serif;
  --f-body:'Barlow','Segoe UI',system-ui,sans-serif;
  --f-mono:ui-monospace,'SF Mono','Cascadia Code',Consolas,monospace;
  --shadow:0 18px 40px -18px rgba(0,0,0,.65);
}

*{box-sizing:border-box}
/* un display: posé par une classe (grid, flex…) l'emporte sinon sur le display:none
   du navigateur pour [hidden], et l'élément « masqué » reste visible. */
[hidden]{display:none !important}
html{scroll-behavior:smooth;scroll-padding-top:86px}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 16px/1.65 var(--f-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--red);color:#fff}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:2px solid var(--red-hot);outline-offset:2px;border-radius:2px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#2A313C;border-radius:5px}
::-webkit-scrollbar-track{background:var(--bg)}

.container{max-width:1180px;margin:0 auto;padding:0 24px}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.red{color:var(--red-hot)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- typographie ---------- */
.display{
  font-family:var(--f-display);font-style:italic;font-weight:700;
  text-transform:uppercase;line-height:.96;letter-spacing:-.01em;
  text-wrap:balance;margin:0;
}
.eyebrow{
  font-family:var(--f-display);font-weight:600;font-style:normal;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red-hot);display:flex;align-items:center;gap:10px;margin:0 0 14px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--red);flex:none}
h2.display{font-size:clamp(30px,4.4vw,50px);line-height:1.04}
p.lead{font-size:18px;color:var(--muted);max-width:62ch;margin:14px 0 0}
.sec-head{margin-bottom:40px}
.section{padding:clamp(64px,9vw,110px) 0;position:relative}
.section.alt{background:var(--bg2)}

/* ---------- boutons ---------- */
.btn{
  font-family:var(--f-display);font-style:italic;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:15px;
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 28px;transform:skew(-10deg);
  transition:background .18s,box-shadow .18s,border-color .18s,color .18s;
  border-radius:2px;
}
.btn>span{display:inline-block;transform:skew(10deg)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-hot);box-shadow:0 8px 32px -6px rgba(255,43,30,.55)}
.btn-ghost{border:1px solid var(--line2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--red-hot);color:var(--red-hot)}
.btn-sm{padding:9px 18px;font-size:13px}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.link-arrow{
  font-family:var(--f-display);font-weight:600;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--red-hot);
  display:inline-flex;gap:8px;align-items:center;
}
.link-arrow:hover{color:#fff}

/* ---------- header ---------- */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:80;
  background:rgba(11,13,16,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.hdr::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--red) 0 62%,#fff 62% 64%,var(--red-deep) 64%)}
.hdr-inner{display:flex;align-items:center;gap:20px;height:66px}
/* logo + 7 entrées de nav + téléphone + 2 boutons : ça ne tient pas partout.
   La nav est le seul bloc compressible, on la laisse se resserrer plutôt que
   de laisser le panier sortir de l'écran. */
.nav{min-width:0;flex-shrink:1}
@media (max-width:1240px){
  .hdr-inner{gap:16px}
  .logo-sub{display:none}
}
@media (max-width:1060px){
  .hdr-inner{gap:10px}
  .logo-sub{display:none}
}
.logo{display:flex;align-items:center;gap:12px;flex:none}
.logo-mark{
  font-family:var(--f-display);font-style:italic;font-weight:700;font-size:20px;
  background:var(--red);color:#fff;padding:4px 10px 4px 8px;
  clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%);
}
.logo-word{font-family:var(--f-display);font-style:italic;font-weight:700;
  font-size:19px;letter-spacing:.04em}
.logo-word em{font-style:italic;color:var(--red-hot)}
.logo-sub{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.22em;
  color:var(--faint);text-transform:uppercase;display:block;margin-top:1px}
.nav{display:flex;gap:2px;margin-left:auto}
/* Le conteneur plafonne à 1180 px : logo + 7 entrées (« Occasions » depuis le
   06/09/2026) + le numéro entier + deux boutons y tiennent à quelques px près, et comme la nav est le seul bloc compressible
   c'est son dernier lien (« Contact ») qui passait par-dessus le téléphone,
   sur tout écran de bureau. La nav est donc dimensionnée pour tenir. */
.nav a{
  font-family:var(--f-display);font-weight:500;font-size:12.5px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  padding:8px 8px;border-radius:2px;transition:color .15s;position:relative;
}
.nav a:hover{color:var(--ink)}
.nav a.on{color:var(--ink)}
.nav a.on::after{content:"";position:absolute;left:8px;right:8px;bottom:2px;
  height:2px;background:var(--red);transform:skew(-20deg)}
.hdr-actions{display:flex;align-items:center;gap:10px;flex:none}
.icon-btn{
  position:relative;width:40px;height:40px;border:1px solid var(--line2);
  border-radius:2px;display:grid;place-items:center;color:var(--muted);
  transition:border-color .15s,color .15s;
}
.icon-btn:hover{border-color:var(--red-hot);color:var(--ink)}
/* la surface sensible atteint 44px sans changer la taille dessinee */
.icon-btn::after{content:'';position:absolute;inset:-2px}
/* téléphone de l'atelier, toujours visible et cliquable */
.hdr-tel{display:flex;align-items:center;gap:8px;font:600 13.5px/1 var(--f-mono);
  letter-spacing:.04em;color:var(--ink);border:1px solid var(--line2);border-radius:2px;
  padding:9px 12px;transition:border-color .15s,color .15s;white-space:nowrap}
.hdr-tel:hover{border-color:var(--red-hot);color:var(--red-hot)}
.hdr-tel svg{color:var(--red-hot);flex:none}
@media (max-width:1240px){.hdr-tel span{display:none}.hdr-tel{padding:9px 11px}}
/* --- barre d'action fixe, mobile uniquement --- */
.mobile-cta{display:none}
@media (max-width:900px){
  .mobile-cta{
    display:grid;grid-template-columns:1.25fr 1fr;gap:1px;
    position:fixed;left:0;right:0;bottom:0;z-index:78;
    background:var(--line);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mobile-cta a{
    display:flex;align-items:center;justify-content:center;gap:9px;
    min-height:56px;padding:0 12px;text-align:center;
    font-family:var(--f-display);font-weight:600;font-size:14px;
    letter-spacing:.1em;text-transform:uppercase;
  }
  .mcta-tel{background:var(--red);color:#fff}
  .mcta-tel svg{flex:none}
  .mcta-devis{background:var(--bg2);color:var(--ink)}
  /* le pied de page ne doit pas finir sous la barre */
  .footer{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
  /* panier, modale ou visionneuse ouverts : la barre s'efface, sinon elle
     transparaît sous le voile et double le bouton de validation */
  body:has(.overlay.show) .mobile-cta,
  body:has(.modal.show) .mobile-cta,
  body:has(.lightbox.open) .mobile-cta{display:none}
}

.cart-badge{
  position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;
  background:var(--red);color:#fff;border-radius:9px;
  font:600 10.5px/18px var(--f-mono);text-align:center;padding:0 4px;
  display:none;
}
.cart-badge.show{display:block}
.burger{display:none}
.mobile-menu{display:none}

/* ---------- hero ---------- */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;
  padding:140px 0 90px;overflow:hidden;isolation:isolate}
/* photo d'atelier en fond de héro : le voile garde le texte lisible par-dessus */
.hero-photo{position:absolute;inset:0;z-index:-5;display:block}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block;
  filter:contrast(1.06) saturate(.88)}
.hero-veil{position:absolute;inset:0;z-index:-4;pointer-events:none;background:
  linear-gradient(96deg,#0B0D10 0%,rgba(11,13,16,.94) 34%,rgba(11,13,16,.68) 58%,rgba(11,13,16,.82) 100%),
  linear-gradient(180deg,#0B0D10 0%,rgba(11,13,16,.35) 22%,rgba(11,13,16,.4) 64%,#0B0D10 100%)}
.hero-carbon{position:absolute;inset:0;z-index:-3;
  background-image:radial-gradient(rgba(255,255,255,.028) 1px,transparent 1.3px);
  background-size:22px 22px}
.hero-glow{position:absolute;z-index:-3;width:60vw;height:60vw;right:-18vw;top:-22vw;
  background:radial-gradient(closest-side,rgba(225,6,0,.16),transparent 70%);pointer-events:none}
.stripes{position:absolute;z-index:-2;top:-12%;bottom:-12%;right:6%;width:340px;
  transform:rotate(16deg);display:flex;gap:26px;pointer-events:none}
.stripes i{display:block;height:100%}
.stripes i:nth-child(1){width:150px;background:linear-gradient(180deg,var(--red),var(--red-deep))}
.stripes i:nth-child(2){width:18px;background:rgba(246,244,239,.16)}
.stripes i:nth-child(3){width:58px;background:rgba(225,6,0,.35)}
.ghost{
  position:absolute;z-index:-1;right:-40px;bottom:-30px;
  font-family:var(--f-display);font-style:italic;font-weight:700;
  font-size:clamp(180px,26vw,360px);line-height:1;color:transparent;
  -webkit-text-stroke:1px rgba(246,244,239,.07);pointer-events:none;user-select:none;
}
.checker{
  position:absolute;left:0;right:0;bottom:0;height:22px;opacity:.5;
  background:conic-gradient(rgba(246,244,239,.14) 25%,transparent 0 50%,rgba(246,244,239,.14) 0 75%,transparent 0);
  background-size:22px 22px;
}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:28px 48px;align-items:center}
.hero-brand{display:flex;justify-content:center}
.hero-brand svg{width:min(100%,430px);aspect-ratio:831/647;height:auto;
  filter:drop-shadow(0 26px 60px rgba(0,0,0,.55))}
.hero-grid .telemetry{grid-column:1/-1;margin-top:22px}
.f-logo{height:118px;aspect-ratio:831/647;display:block;margin-bottom:16px}
.login-logo{height:92px;aspect-ratio:831/647;display:block;margin:0 auto 16px}
.hero-eyebrow{
  font-family:var(--f-mono);font-size:12px;font-weight:400;letter-spacing:.3em;
  text-transform:uppercase;color:var(--muted);margin:0 0 22px;
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
}
.hero-eyebrow b{color:var(--red-hot);font-weight:400}
.hero-title{font-size:clamp(46px,8.2vw,104px)}
.hero-title .out{color:transparent;-webkit-text-stroke:2px var(--ink)}
.hero-title .r{color:var(--red-hot)}
.hero-sub{font-size:clamp(16px,1.6vw,19px);color:var(--muted);max-width:56ch;margin:24px 0 0}
.hero-sub b{color:var(--ink);font-weight:600}
.hero-ctas{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap}
.telemetry{
  margin-top:64px;border:1px solid var(--line);border-radius:2px;
  background:rgba(16,19,24,.72);backdrop-filter:blur(6px);
  display:flex;flex-wrap:wrap;
}
.telemetry span{
  flex:1 1 auto;display:flex;flex-direction:column;gap:3px;
  padding:14px 20px;border-right:1px solid var(--line);min-width:150px;
}
.telemetry span:last-child{border-right:0}
.telemetry .k{font:400 10px/1 var(--f-mono);letter-spacing:.24em;color:var(--faint);text-transform:uppercase}
.telemetry .v{font-family:var(--f-display);font-style:italic;font-weight:700;font-size:19px}
.telemetry .v em{font-style:italic;color:var(--red-hot)}

/* entrée héro */
@media (prefers-reduced-motion:no-preference){
  .hero .up{opacity:0;transform:translateY(26px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
  .hero .up.d1{animation-delay:.08s}.hero .up.d2{animation-delay:.16s}
  .hero .up.d3{animation-delay:.24s}.hero .up.d4{animation-delay:.34s}
  @keyframes rise{to{opacity:1;transform:none}}
  .stripes{animation:sweep 1s cubic-bezier(.2,.7,.2,1) both}
  @keyframes sweep{from{transform:rotate(16deg) translateX(46vw)}to{transform:rotate(16deg) translateX(0)}}
}

/* ---------- bande marquee ---------- */
.marquee{border-block:1px solid var(--line);background:var(--bg2);
  overflow:hidden;padding:13px 0;position:relative}
.marquee-track{display:flex;gap:0;width:max-content}
.m-seq{display:flex;flex:none;align-items:center}
.m-item{
  font-family:var(--f-display);font-style:italic;font-weight:700;font-size:15px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  padding:0 26px;white-space:nowrap;
}
.m-item.jp{font-family:var(--f-body);font-style:normal;font-weight:600}
.m-item.hot{color:var(--red)}
@media (prefers-reduced-motion:no-preference){
  .marquee-track{animation:scroll 36s linear infinite}
  @keyframes scroll{to{transform:translateX(-50%)}}
}

/* ---------- cartes prestation ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.svc-card{
  background:var(--surface);border:1px solid var(--line);border-radius:3px;
  padding:28px 24px 24px;display:flex;flex-direction:column;gap:12px;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);
  transition:border-color .2s,transform .2s;position:relative;overflow:hidden;
}
.svc-card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--red);transform:scaleY(0);transform-origin:top;transition:transform .25s}
.svc-card:hover{border-color:var(--line2);transform:translateY(-3px)}
.svc-card:hover::after{transform:scaleY(1)}
/* photo réelle en tête de carte, à fond perdu jusqu'aux bords */
.svc-shot{display:block;position:relative;margin:-28px -24px 6px;
  aspect-ratio:4/3;max-height:186px;overflow:hidden;background:var(--surface2)}
.svc-shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.svc-shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,13,16,.18) 0%,transparent 42%,rgba(20,24,30,.92) 100%)}
.svc-card:hover .svc-shot img{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){.svc-card:hover .svc-shot img{transform:none}}
.svc-icon{width:44px;height:44px;color:var(--red-hot)}
.svc-icon svg{width:100%;height:100%}
.svc-title{font-family:var(--f-display);font-style:italic;font-weight:700;
  font-size:20px;text-transform:uppercase;margin:0}
.svc-desc{color:var(--muted);font-size:14.5px;margin:0;flex:1}
.svc-meta{font-family:var(--f-mono);font-size:12px;color:var(--faint);
  border-top:1px dashed var(--line);padding-top:12px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.svc-meta b{color:var(--ink);font-weight:400}

/* ---------- bande honda ---------- */
.honda-band{
  /* le dégradé montait jusqu'à #FF3B2E : le texte blanc y tombait à 2,9:1.
     Il s'arrête maintenant au rouge de marque, où le blanc tient 4,97:1. */
  background:linear-gradient(100deg,var(--red-deep),#C90500 45%,var(--red));
  position:relative;overflow:hidden;
}
.honda-band::before{content:"";position:absolute;inset:0;opacity:.1;
  background:repeating-linear-gradient(-55deg,#fff 0 2px,transparent 2px 26px)}
.honda-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;
  padding:clamp(56px,7vw,86px) 0;position:relative}
.honda-band h2{color:#fff;font-size:clamp(28px,3.8vw,44px)}
.honda-band p{color:#fff;max-width:54ch;font-size:16.5px}
.honda-band .eyebrow{color:#fff}
.honda-band .eyebrow::before{background:#fff}
.model-chips{display:flex;flex-wrap:wrap;gap:9px}
.mchip{
  font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:.1em;
  border:1px solid rgba(255,255,255,.4);color:#fff;padding:7px 14px;
  border-radius:2px;transform:skew(-8deg);background:rgba(0,0,0,.14);
}
.mchip b{font-weight:600;letter-spacing:.1em;margin-right:6px}
.btn-white{background:#fff;color:#A30400}
.btn-white:hover{background:#FFF3F2;box-shadow:0 8px 30px -8px rgba(0,0,0,.5)}

/* ---------- process (séquence réelle → numéroté) ---------- */
.process{display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:step}
.step{position:relative;padding:26px 22px 4px;border-left:1px dashed var(--line)}
.step:first-child{border-left:0;padding-left:0}
.step::before{
  counter-increment:step;content:"0" counter(step);
  font-family:var(--f-display);font-style:italic;font-weight:700;font-size:34px;
  color:transparent;-webkit-text-stroke:1.3px var(--red);display:block;margin-bottom:10px;
}
.step h3{font-family:var(--f-display);font-weight:600;font-size:15.5px;
  letter-spacing:.06em;text-transform:uppercase;margin:0 0 8px}
.step p{font-size:13.5px;color:var(--muted);margin:0}
.step .tag{display:inline-block;margin-top:10px;font:400 11px/1 var(--f-mono);
  color:var(--red-hot);letter-spacing:.12em;text-transform:uppercase}

/* ---------- réalisations ---------- */
.works-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.work-card{background:var(--surface);border:1px solid var(--line);border-radius:3px;overflow:hidden;
  transition:border-color .2s,transform .2s}
.work-card:hover{border-color:var(--line2);transform:translateY(-3px)}
.paint-band{height:150px;position:relative;display:flex;align-items:flex-end;padding:16px}
.paint-band::after{content:"";position:absolute;inset:auto 0 0 0;height:22px;opacity:.35;
  background:conic-gradient(rgba(0,0,0,.5) 25%,transparent 0 50%,rgba(0,0,0,.5) 0 75%,transparent 0);
  background-size:22px 22px}
.paint-code{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;
  background:rgba(10,11,13,.78);color:#fff;padding:6px 10px;border-radius:2px;position:relative;z-index:1;
}
.work-body{padding:20px 20px 22px}
.work-body h3{font-family:var(--f-display);font-style:italic;font-weight:700;
  font-size:19px;text-transform:uppercase;margin:0 0 6px}
.work-body p{color:var(--muted);font-size:13.5px;margin:0 0 14px}
.work-tags{display:flex;gap:7px;flex-wrap:wrap}
.wtag{font:400 10.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line2);color:var(--muted);padding:5px 9px;border-radius:2px}

/* ---------- projets réalisés (photos réelles) ---------- */
a.work-card{display:block;color:inherit;text-decoration:none}
.work-shot{position:relative;aspect-ratio:4/3;max-height:300px;background:var(--surface2);overflow:hidden}
.work-shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s cubic-bezier(.2,.7,.3,1)}
a.work-card:hover .work-shot img{transform:scale(1.045)}
.work-shot .shot-count{position:absolute;right:10px;bottom:10px;z-index:1;
  font:400 10.5px/1 var(--f-mono);letter-spacing:.12em;background:rgba(10,11,13,.8);
  color:#fff;padding:5px 8px;border-radius:2px}
.work-empty{border:1px dashed var(--line2);border-radius:3px;padding:40px 26px;text-align:center;
  color:var(--muted);grid-column:1/-1}
.work-empty b{color:var(--ink);display:block;margin-bottom:6px;font-family:var(--f-display);
  font-style:italic;text-transform:uppercase;letter-spacing:.04em}

/* fiche projet */
.proj-grid{display:grid;grid-template-columns:1.6fr .9fr;gap:34px;align-items:start}
.proj-txt p{color:var(--muted);font-size:15px;line-height:1.75;margin:0 0 14px}
.proj-txt p:first-of-type{color:var(--ink);font-size:16.5px}
.proj-card{background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:22px 22px 24px;
  position:sticky;top:96px}
.proj-card h3{font-family:var(--f-display);font-style:italic;font-weight:700;font-size:16px;
  text-transform:uppercase;margin:0 0 14px;letter-spacing:.03em}
.proj-line{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid var(--line);
  font-size:13px}
.proj-line .k{color:var(--faint);font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase}
.proj-line .v{color:var(--ink);text-align:right}
.proj-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:38px}
.proj-gallery figure{margin:0;border:1px solid var(--line);border-radius:3px;overflow:hidden;
  background:var(--surface);cursor:zoom-in}
.proj-gallery img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover}
.proj-gallery figure:first-child{grid-column:1/-1}
.proj-gallery figure:first-child img{aspect-ratio:16/9}
/* pièces détachées : photographiées sur fond clair, un recadrage les amputerait */
.proj-gallery.pieces img{object-fit:contain;background:#fff;padding:10px}
/* Une photo verticale recadrée en 16/9 ou en 4/3 se centre sur le ventre du
   sujet et lui coupe la tête. On remonte le cadrage : le geste et le visage
   sont dans le tiers haut de ce genre de cliché d'atelier. */
.proj-gallery figure.portrait img{object-position:50% 28%}
.work-shot img.portrait{object-position:50% 28%}
.piece-liens{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.piece-liens a{display:inline-block;border:1px solid var(--line2);border-radius:2px;
  padding:9px 13px;font-size:13.5px;color:var(--muted);transition:border-color .15s,color .15s}
.piece-liens a:hover{border-color:var(--red);color:var(--ink)}
/* ---------- occasions : véhicules à vendre ---------- */
.occ-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px}
.occ-head h3{margin:0;min-width:0}
.occ-prix{flex:none;font-family:var(--f-display);font-style:italic;font-weight:700;font-size:17px;
  color:var(--red-hot);white-space:nowrap}
.occ-statut{position:absolute;left:10px;top:10px;z-index:1;font:600 10.5px/1 var(--f-mono);
  letter-spacing:.12em;text-transform:uppercase;padding:6px 9px;border-radius:2px;
  background:rgba(11,13,16,.82);color:var(--warn);border:1px solid rgba(199,127,6,.5)}
.occ-statut.vendu{color:var(--bad);border-color:rgba(232,72,60,.5)}
.occ-card[data-statut="vendu"] .work-shot img{filter:grayscale(.7) brightness(.8)}
.occ-prix-fiche{font-size:30px;margin:0 0 16px;color:var(--red-hot)}
.occ-form{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.occ-form h4{font-family:var(--f-display);font-style:italic;font-weight:700;font-size:15px;margin:0 0 6px}
.occ-form>p{color:var(--muted);font-size:13px;margin:0 0 14px}
.occ-form .field{margin-bottom:12px}
.occ-form .frow{gap:12px}
.occ-form .err-msg{margin:0 0 10px}
.occ-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.occ-ok{color:var(--ok);font:600 12.5px/1.5 var(--f-mono);margin:12px 0 0}
.occ-indispo{margin-top:18px;padding:14px 16px;border:1px dashed var(--line2);border-radius:3px;
  color:var(--muted);font-size:13.5px;line-height:1.6}
.occ-indispo b{color:var(--warn)}
.frow.f3{grid-template-columns:1fr 1fr 1fr}
.lightbox{position:fixed;inset:0;background:rgba(6,7,9,.94);z-index:120;display:none;
  align-items:center;justify-content:center;padding:26px}
.lightbox.open{display:flex}
.lightbox img{max-width:min(1200px,94vw);max-height:88vh;object-fit:contain;border-radius:3px}
.lightbox .lb-close{position:absolute;top:18px;right:20px;background:none;border:1px solid var(--line2);
  color:var(--ink);width:44px;height:44px;border-radius:2px;font-size:17px;cursor:pointer}
.lightbox .lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(20,24,30,.8);
  border:1px solid var(--line2);color:var(--ink);width:44px;height:52px;border-radius:2px;
  font-size:20px;cursor:pointer}
.lightbox .lb-prev{left:16px} .lightbox .lb-next{right:16px}
@media(max-width:900px){
  .proj-grid{grid-template-columns:1fr;gap:22px}
  .proj-card{position:static}
  /* fiche pièce sur téléphone : le prix et le bouton d'achat passaient après
     toutes les photos. On les remonte avant la galerie. */
  #page-piece .proj-card{order:-1}
}

/* ---------- back-office : projets ---------- */
.pj-list{display:grid;gap:10px}
.pj-item{display:grid;grid-template-columns:74px 1fr auto;gap:14px;align-items:center;
  background:var(--surface2);border:1px solid var(--line);border-radius:3px;padding:10px 14px 10px 10px}
.pj-item img{width:74px;height:56px;object-fit:cover;border-radius:2px;display:block;background:var(--bg2)}
.pj-item .pj-no{width:74px;height:56px;border:1px dashed var(--line2);border-radius:2px;
  display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:10px;
  font-family:var(--f-mono);text-align:center}
.pj-t{font-weight:600;font-size:14px}
.pj-s{color:var(--faint);font:400 11.5px/1.5 var(--f-mono)}
.pj-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.pj-badge{font:400 10px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
  padding:5px 8px;border-radius:2px;border:1px solid var(--line2);color:var(--muted)}
.pj-badge.on{border-color:rgba(42,169,104,.55);color:var(--ok)}
.pj-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;margin-top:10px}
.pj-shot{position:relative;border:1px solid var(--line);border-radius:2px;overflow:hidden;background:var(--surface2)}
.pj-shot img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.pj-shot .pj-x{position:absolute;top:4px;right:4px;background:rgba(10,11,13,.85);border:1px solid var(--line2);
  color:var(--ink);width:24px;height:24px;border-radius:2px;cursor:pointer;font-size:12px;line-height:1}
.pj-shot .pj-cover{position:absolute;left:4px;bottom:4px;font:400 9.5px/1 var(--f-mono);
  letter-spacing:.1em;text-transform:uppercase;background:var(--red);color:#fff;padding:4px 6px;border-radius:2px}
.pj-shot button.pj-mk{position:absolute;left:4px;bottom:4px;font:400 9.5px/1 var(--f-mono);
  letter-spacing:.1em;text-transform:uppercase;background:rgba(10,11,13,.85);border:1px solid var(--line2);
  color:var(--muted);padding:4px 6px;border-radius:2px;cursor:pointer}
.pj-drop{border:1px dashed var(--line2);border-radius:3px;padding:18px;text-align:center;color:var(--muted);
  font-size:13px;margin-top:10px;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.pj-drop:hover{border-color:var(--muted)}
.pj-drop.over{border-color:var(--red);border-style:solid;background:rgba(225,6,0,.08);color:var(--ink)}
.pj-drop.busy{opacity:.55;pointer-events:none}
.pj-shot img{cursor:zoom-in}
.pj-shot.pending{border-color:rgba(199,127,6,.65)}
.pj-shot .pj-pend{position:absolute;left:4px;bottom:4px;font:400 9.5px/1 var(--f-mono);letter-spacing:.1em;
  text-transform:uppercase;background:var(--warn);color:#0B0D10;padding:4px 6px;border-radius:2px}
.pj-presta{display:flex;flex-wrap:wrap;gap:8px}
.pj-presta label{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line2);
  border-radius:2px;padding:8px 11px;font-size:12.5px;color:var(--muted);cursor:pointer}
.pj-presta label:has(input:checked){border-color:var(--red);color:var(--ink);
  background:rgba(225,6,0,.07)}
.pj-presta input{accent-color:var(--red)}

/* ---------- stats ---------- */
.stats-band{border-block:1px solid var(--line);background:var(--bg2)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.stat{padding:34px 28px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat-num{font-family:var(--f-display);font-style:italic;font-weight:700;
  font-size:clamp(34px,4vw,46px);font-feature-settings:"tnum";color:var(--ink)}
.stat-num i{font-style:italic;color:var(--red-hot)}
.stat-label{font:400 11.5px/1.5 var(--f-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);margin-top:6px}

.rassure{list-style:none;margin:22px 0 0;padding:16px 18px;display:flex;flex-direction:column;
  gap:9px;border:1px dashed var(--line2);border-radius:3px;background:var(--surface)}
.rassure li{position:relative;padding-left:24px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.rassure li::before{content:"✓";position:absolute;left:0;top:0;color:var(--ok);font-weight:700}
.rassure b{color:var(--ink);font-weight:600}

/* ---------- figure d'atelier : le geste, en portrait ---------- */
/* Le site n'avait aucun format portrait : tout passait en 4/3 ou 16/9, ce qui
   décapite un cliché vertical. Ici on garde le 4/5 natif du fichier et c'est la
   colonne de texte qui s'adapte. */
.geste{overflow:hidden}          /* .section est relative mais pas overflow:hidden : sans ça le .ghost déborde */
.geste-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
.geste-fig{margin:0;position:relative}   /* figure a une marge par défaut de 1em 40px */
.geste-shot{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;
  border:1px solid var(--line);border-radius:3px;background:var(--surface2)}
.geste-shot img{width:100%;height:100%;object-fit:cover;display:block;
  filter:contrast(1.06) saturate(.88)}
/* le plan de travail clair occupe le bas du cadre : on l'assoit dans le noir de
   la page sans créer d'arête franche */
.geste-shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 58%,rgba(11,13,16,.5) 100%)}
.geste-shot::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  z-index:1;background:var(--red)}
.geste-fig figcaption{margin-top:16px;padding:2px 0 2px 14px;
  border-left:2px solid var(--red);font-size:13.5px;line-height:1.6;color:var(--muted)}
.geste-fig figcaption b{display:block;margin-bottom:4px;
  font:400 11px/1.5 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--red-hot)}
.geste-txt p.lead{margin-top:0}
.geste-etapes{margin:30px 0 0;padding:0;list-style:none;border-top:1px dashed var(--line)}
.geste-etapes li{padding:16px 0;border-bottom:1px dashed var(--line)}
.geste-etapes h3{font-family:var(--f-display);font-weight:600;font-size:15.5px;
  letter-spacing:.06em;text-transform:uppercase;margin:0 0 6px}
.geste-etapes p{font-size:13.5px;color:var(--muted);margin:0}
.geste-etapes .tag{display:inline-block;margin-top:8px;font:400 11px/1 var(--f-mono);
  color:var(--red-hot);letter-spacing:.12em;text-transform:uppercase}

/* ---------- avis ---------- */
/* les cartes gardent une largeur lisible et se centrent : un seul avis ne doit
   pas s'étirer sur toute la page */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,400px));
  gap:18px;justify-content:center}
.quote{background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:26px 24px}
.quote .q{font-size:15px;color:var(--ink);margin:0 0 18px;font-style:italic}
.quote .who{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font:400 12.5px/1.5 var(--f-mono);color:var(--faint)}
.quote .who b{color:var(--ink);font-weight:600;font-family:var(--f-body);font-size:14px}
.quote .who span::before{content:"· "}
.q-stars{display:flex;gap:3px;margin-bottom:14px}
.q-stars svg{width:15px;height:15px;color:var(--red-hot)}
.quote blockquote{margin:0}
.quote .av{width:38px;height:38px;border-radius:2px;background:var(--surface2);
  display:grid;place-items:center;font-family:var(--f-display);font-weight:600;
  font-size:14px;color:var(--red-hot);transform:skew(-6deg);border:1px solid var(--line2)}
.quote .nm{font-weight:600;font-size:14px}
.quote .veh{font:400 11.5px/1.4 var(--f-mono);color:var(--faint)}
.starline{color:var(--red-hot);font-size:12px;letter-spacing:3px;margin-bottom:14px}

/* ---------- CTA final ---------- */
.cta-final{position:relative;overflow:hidden;text-align:center}
.cta-final .ghost{right:auto;left:-30px;bottom:auto;top:-40px;font-size:clamp(140px,20vw,260px)}
.cta-final h2{font-size:clamp(30px,5vw,58px)}
.cta-final p{color:var(--muted);max-width:56ch;margin:16px auto 34px}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);background:var(--bg2);padding:64px 0 0;position:relative}
.footer::before{content:"";position:absolute;top:-1px;left:0;width:200px;height:3px;
  background:var(--red);transform:skew(-30deg)}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:38px}
.f-col h4{font-family:var(--f-display);font-weight:600;font-size:12.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin:0 0 16px}
.f-col a,.f-col p{display:block;color:var(--muted);font-size:14px;margin:0 0 2px;padding:7px 0}
.f-col a:hover{color:var(--red-hot)}
.f-brand p{max-width:34ch}
.f-legal{border-top:1px solid var(--line);margin-top:52px;padding:20px 0;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font:400 12px/1.6 var(--f-mono);color:var(--faint)}

/* ---------- routing pages ---------- */
.page{display:none}
.page.active{display:block}
.page-head{padding:150px 0 56px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--bg2),var(--bg));position:relative;overflow:hidden}
.page-head .ghost{font-size:clamp(120px,18vw,220px);bottom:-46px}
.page-head h1{font-size:clamp(34px,5.4vw,62px)}
.page-head p{color:var(--muted);max-width:60ch;margin:14px 0 0}

/* ---------- prestations détail ---------- */
.anchor-nav{display:flex;gap:9px;flex-wrap:wrap;margin-top:26px}
.anchor-nav a{font-family:var(--f-display);font-weight:500;font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line2);padding:8px 14px;border-radius:2px;transform:skew(-8deg)}
.anchor-nav a:hover{color:var(--ink);border-color:var(--red)}
.presta{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;
  padding:56px 0;border-bottom:1px dashed var(--line)}
.presta:last-of-type{border-bottom:0}
.presta h2{font-size:clamp(24px,3vw,34px)}
.presta .desc{color:var(--muted);font-size:15.5px}
.presta ul{margin:16px 0 0;padding:0;list-style:none}
.presta ul li{padding:7px 0 7px 22px;position:relative;font-size:14.5px;color:var(--muted)}
.presta ul li::before{content:"▸";position:absolute;left:0;color:var(--red-hot)}
/* photo d'atelier au-dessus de la grille tarifaire de chaque prestation */
.presta-shot{display:block;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--line);
  border-radius:3px;margin-bottom:16px;background:var(--surface2)}
.presta-shot img{width:100%;height:100%;object-fit:cover;display:block}
/* .presta a trois enfants (texte, photo, tarifs) pour deux colonnes : on place
   explicitement, sinon les tarifs retombent sous le texte. */
@media (min-width:961px){
  .presta > div:first-of-type{grid-column:1;grid-row:1 / span 2}
  .presta-shot{grid-column:2;grid-row:1}
  .presta > .price-card{grid-column:2;grid-row:2;align-self:start}
}
.price-card{background:var(--surface);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.price-card h3{font-family:var(--f-display);font-weight:600;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--faint);
  margin:0;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--bg2)}
.price-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:13px 20px;border-bottom:1px solid var(--line);font-size:14px}
.price-row:last-child{border-bottom:0}
.price-row .lbl{color:var(--muted)}
.price-row .val{font-family:var(--f-mono);font-size:13.5px;white-space:nowrap}
.price-note{padding:12px 20px;font:400 11.5px/1.6 var(--f-mono);color:var(--faint);background:var(--bg2)}
.presta-cta{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ---------- boutique ---------- */
.shop-filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:34px}
.fchip{font-family:var(--f-display);font-weight:500;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--line2);
  padding:9px 16px;border-radius:2px;transform:skew(-8deg);transition:all .15s}
.fchip:hover{color:var(--ink)}
.fchip.on{background:var(--red);border-color:var(--red);color:#fff}
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.prod-card{background:var(--surface);border:1px solid var(--line);border-radius:3px;
  overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.prod-card:hover{border-color:var(--line2);transform:translateY(-3px)}
/* Vitrine produit : même bloc pour toutes les fiches, avec ou sans photo, sinon
   les lignes de la grille se décalent. Les clichés fournisseur sont détourés sur
   blanc → panneau clair + object-fit:contain, la pièce n'est jamais rognée. */
.prod-visual{aspect-ratio:4/3;position:relative;display:grid;place-items:center;width:100%;
  background:#fff;border:0;border-bottom:1px solid var(--line);padding:0;overflow:hidden}
/* la trame n'habille que les fiches sans photo : sous un cliché détouré sur
   blanc, elle dessinerait le rectangle de l'image */
.prod-visual:not(.has-shot)::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(-55deg,rgba(11,13,16,.05) 0 2px,transparent 2px 18px)}
.prod-visual svg{width:56px;height:56px;color:var(--red);position:relative;opacity:.85}
.prod-visual .pv-ref{position:absolute;right:9px;bottom:8px;font:400 10px/1 var(--f-mono);
  letter-spacing:.14em;color:#5A6270;background:rgba(255,255,255,.72);
  padding:4px 7px;border-radius:2px}
.prod-visual.has-shot img{width:100%;height:100%;object-fit:contain;display:block;
  position:relative;padding:10px}
.prod-body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.prod-cat{font:400 10px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.prod-name{font-weight:600;font-size:15px;line-height:1.35;margin:0;flex:1}
.prod-link{background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;
  cursor:pointer}
.prod-link:hover{color:var(--red-hot)}
.prod-fit{font:400 11.5px/1.5 var(--f-mono);color:var(--muted)}
.prod-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}
.prod-price{font-family:var(--f-display);font-style:italic;font-weight:700;font-size:20px}
.stock{font:400 10.5px/1 var(--f-mono);letter-spacing:.08em;display:flex;align-items:center;gap:6px}
.stock::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.stock.in{color:var(--ok)}.stock.low{color:var(--warn)}
.add-btn{
  font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;background:var(--red);color:#fff;width:100%;
  padding:12px;border-radius:2px;transition:background .15s;margin-top:12px;
}
.add-btn:hover{background:var(--red-hot)}
.add-btn.added{background:var(--ok)}
.shop-note{margin-top:36px;border:1px dashed var(--line2);border-radius:3px;padding:16px 20px;
  font:400 12.5px/1.7 var(--f-mono);color:var(--faint)}
.shop-note b{color:var(--muted);font-weight:400}

/* ---------- drawer panier ---------- */
.overlay{position:fixed;inset:0;background:rgba(5,6,8,.62);backdrop-filter:blur(3px);
  z-index:90;opacity:0;pointer-events:none;transition:opacity .22s}
.overlay.show{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,94vw);z-index:95;
  background:var(--bg2);border-left:1px solid var(--line);
  transform:translateX(102%);transition:transform .28s cubic-bezier(.2,.7,.2,1);
  display:flex;flex-direction:column;
}
.drawer:not(.show){visibility:hidden}
.drawer.show{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;
  padding:20px 22px;border-bottom:1px solid var(--line)}
.drawer-head h3{font-family:var(--f-display);font-style:italic;font-weight:700;
  font-size:19px;text-transform:uppercase;margin:0}
.drawer-items{flex:1;overflow-y:auto;padding:8px 22px}
.d-empty{color:var(--faint);font:400 13px/1.7 var(--f-mono);text-align:center;padding:48px 0}
.d-item{display:flex;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.d-thumb{width:46px;height:46px;flex:none;border-radius:2px;border:1px solid var(--line2);
  display:grid;place-items:center;color:var(--red-hot);background:var(--surface)}
.d-thumb svg{width:24px;height:24px}
.d-info{flex:1;min-width:0}
.d-name{font-weight:600;font-size:13.5px;line-height:1.3}
.d-price{font:400 12px/1 var(--f-mono);color:var(--muted);margin-top:5px}
.qty{display:flex;align-items:center;gap:2px;border:1px solid var(--line2);border-radius:2px}
.qty button{position:relative;width:36px;height:38px;color:var(--muted);font-size:16px}
.qty button::after{content:'';position:absolute;inset:-3px}
.qty button:hover{color:var(--red-hot)}
.qty b{font:400 13px/1 var(--f-mono);min-width:22px;text-align:center}
.drawer-foot{border-top:1px solid var(--line);padding:20px 22px;display:grid;gap:12px}
.d-total{display:flex;justify-content:space-between;font-family:var(--f-display);
  font-style:italic;font-weight:700;font-size:19px;text-transform:uppercase}
.d-ship{font:400 11.5px/1.6 var(--f-mono);color:var(--faint)}
.drawer-foot .btn{justify-content:center}

/* ---------- devis wizard ---------- */
.wizard{max-width:780px;margin:0 auto}
.wsteps{display:flex;gap:0;margin-bottom:8px}
.wstep{flex:1;text-align:center;font-family:var(--f-display);font-weight:500;
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  padding-bottom:12px;position:relative}
.wstep.on{color:var(--ink)}
.wstep.done{color:var(--red-hot)}
.wprogress{height:3px;background:var(--line);border-radius:2px;overflow:hidden;margin-bottom:40px}
.wbar{height:100%;width:25%;background:linear-gradient(90deg,var(--red-deep),var(--red-hot));
  transition:width .35s cubic-bezier(.2,.7,.2,1)}
.wpanel{display:none}
.wpanel.on{display:block;animation:fadein .3s}
@keyframes fadein{from{opacity:0;transform:translateY(10px)}to{opacity:1}}
.wpanel h2{font-family:var(--f-display);font-style:italic;font-weight:700;
  font-size:24px;text-transform:uppercase;margin:0 0 26px}
.wpanel h2 small{display:block;font-family:var(--f-mono);font-style:normal;font-weight:400;
  font-size:11px;letter-spacing:.2em;color:var(--faint);margin-bottom:8px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field label{display:block;font-family:var(--f-display);font-weight:500;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.field label em{color:var(--red-hot);font-style:normal}
.input,select.input,textarea.input{
  width:100%;background:#0F1216;border:1px solid var(--line2);border-radius:2px;
  color:var(--ink);font:400 16px/1.4 var(--f-body);padding:12px 14px;
  transition:border-color .15s;appearance:none;
}
select.input{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 0),linear-gradient(135deg,var(--muted) 50%,transparent 0);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.input:focus{outline:none;border-color:var(--red)}
.input:focus-visible{outline:2px solid var(--red-hot);outline-offset:2px}
.err{border-width:2px!important}
textarea.input{min-height:120px;resize:vertical}
.err{border-color:var(--bad)!important}
.err-msg{color:var(--bad);font:400 12px/1.5 var(--f-mono);margin-top:6px;display:none}
.err-msg.show{display:block}
.model-quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.mq{font:400 13px/1 var(--f-mono);letter-spacing:.06em;border:1px solid var(--line2);
  color:var(--muted);padding:13px 14px;border-radius:2px;transition:all .12s}
.mq:hover,.mq.on{border-color:var(--red);color:var(--ink)}
.svc-checks{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.svc-check{position:relative}
.svc-check input{position:absolute;opacity:0;inset:0;cursor:pointer}
.svc-check .box{
  border:1px solid var(--line2);border-radius:2px;padding:16px;display:flex;gap:12px;
  align-items:flex-start;transition:all .15s;height:100%;
}
.svc-check .tick{width:18px;height:18px;flex:none;border:1px solid var(--line2);
  border-radius:2px;display:grid;place-items:center;font-size:11px;color:transparent;margin-top:2px}
.svc-check input:checked+.box{border-color:var(--red);background:rgba(225,6,0,.07)}
.svc-check input:checked+.box .tick{background:var(--red);border-color:var(--red);color:#fff}
.svc-check input:focus-visible+.box{outline:2px solid var(--red-hot);outline-offset:2px}
.svc-check .t{font-weight:600;font-size:14.5px}
.svc-check .s{font:400 11.5px/1.5 var(--f-mono);color:var(--faint);margin-top:3px}
.dropzone{border:1.5px dashed var(--line2);border-radius:3px;padding:30px;text-align:center;
  color:var(--faint);cursor:pointer;transition:border-color .15s;margin-top:6px}
.dropzone:hover{border-color:var(--red)}
.dropzone .big{font-family:var(--f-display);font-weight:600;font-size:14px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:6px}
.filechips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.filechip{font:400 11.5px/1 var(--f-mono);border:1px solid var(--line2);color:var(--muted);
  padding:7px 10px;border-radius:2px;display:inline-flex;gap:8px;align-items:center}
.filechip button{position:relative;color:var(--bad);font-size:15px;padding:0 4px}
.filechip button::after{content:'';position:absolute;inset:-12px -10px}
.wnav{display:flex;justify-content:space-between;gap:14px;margin-top:34px}
.recap{background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:20px 22px;margin-bottom:22px}
.recap h3{font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);margin:0 0 14px}
.recap-row{display:flex;justify-content:space-between;gap:16px;padding:7px 0;
  border-bottom:1px dashed var(--line);font-size:13.5px}
.recap-row:last-child{border-bottom:0}
.recap-row .k{color:var(--faint);font-family:var(--f-mono);font-size:12px;flex:none}
.recap-row .v{text-align:right;color:var(--ink)}
.confirm{text-align:center;padding:52px 24px;display:none}
.confirm.show{display:block;animation:fadein .4s}
.confirm .badge{
  width:76px;height:76px;margin:0 auto 26px;border-radius:50%;
  border:2px solid var(--ok);color:var(--ok);display:grid;place-items:center;font-size:32px;
}
.confirm h2{font-family:var(--f-display);font-style:italic;font-weight:700;
  font-size:clamp(24px,3.4vw,34px);text-transform:uppercase;margin:0 0 12px}
.confirm p{color:var(--muted);max-width:52ch;margin:0 auto 8px}
.confirm .ref{font-family:var(--f-mono);font-size:14px;color:var(--red-hot);letter-spacing:.14em}

/* ---------- espace client ---------- */
.login-card{background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:34px 30px;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)}
.login-card h2{font-family:var(--f-display);font-style:italic;font-weight:700;
  font-size:23px;text-transform:uppercase;margin:0 0 6px}
.login-card .hint{font:400 12px/1.7 var(--f-mono);color:var(--faint);margin:0 0 24px}
.login-card .btn{width:100%;justify-content:center;margin-top:6px}


/* KPI (tuiles stat : libellé / valeur / delta) */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;margin-bottom:30px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:20px;
  position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--kc,var(--line2))}
.kpi-label{font:400 10.5px/1.4 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.kpi-num{font-family:var(--f-display);font-style:italic;font-weight:700;font-size:30px;
  font-feature-settings:"tnum";margin-top:10px;line-height:1.05}
.kpi-num small{font-size:15px;color:var(--muted);font-weight:600}
.kpi-sub{font:400 11.5px/1.6 var(--f-mono);color:var(--muted);margin-top:8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* statuts : pastille + libellé, jamais couleur seule */
.status{display:inline-flex;align-items:center;gap:7px;font:600 11px/1 var(--f-mono);
  letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:2px;
  color:var(--sc);background:color-mix(in srgb,var(--sc) 11%,transparent);
  border:1px solid color-mix(in srgb,var(--sc) 40%,transparent)}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sc)}
.st-wait{--sc:var(--warn)}.st-ok{--sc:var(--ok)}.st-info{--sc:var(--info)}
.st-bad{--sc:var(--bad)}.st-off{--sc:var(--faint)}

/* tables */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:3px;background:var(--surface)}
table.tb{width:100%;border-collapse:collapse;min-width:640px}
.tb th{font:600 10.5px/1.4 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);
  background:var(--bg2);white-space:nowrap}
.tb td{padding:14px 16px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle}
.tb tr:last-child td{border-bottom:0}
.tb .ref{font-family:var(--f-mono);font-size:12px;color:var(--muted);white-space:nowrap}
.tb .amt{font-family:var(--f-mono);font-size:13px;white-space:nowrap;text-align:right}
.tb .muted{color:var(--muted)}
.tb .act{white-space:nowrap;text-align:right}
.tb .act .mini{font:600 10.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--line2);color:var(--muted);padding:7px 11px;border-radius:2px;transition:all .13s}
.tb .act .mini:hover{border-color:var(--red);color:var(--ink)}
.tb .act .mini.hot{border-color:var(--red);background:var(--red);color:#fff}
.tb .act .mini.hot:hover{background:var(--red-hot)}

/* ---------- back-office ---------- */
.admin-banner{background:linear-gradient(95deg,rgba(225,6,0,.14),transparent 60%);
  border:1px solid rgba(225,6,0,.4);border-radius:3px;padding:16px 20px;margin-bottom:30px;
  display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.admin-banner .tag{font:600 10px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;
  background:var(--red);color:#fff;padding:6px 10px;border-radius:2px;flex:none}
.admin-banner p{margin:0;font-size:13.5px;color:var(--muted)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:24px;margin-bottom:26px}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.panel-head h3{font-family:var(--f-display);font-style:italic;font-weight:700;
  font-size:17px;text-transform:uppercase;margin:0}
.panel-head .sub{font:400 11px/1.5 var(--f-mono);color:var(--faint)}

/* statistiques réelles */
.stat-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:26px}
.stat-tile{background:var(--bg2);border:1px solid var(--line);border-radius:3px;padding:16px 18px}
.stat-tile .v{font-family:var(--f-display);font-style:italic;font-weight:700;font-size:24px;color:var(--ink);line-height:1.05}
.stat-tile .v small{font-size:14px;color:var(--muted)}
.stat-tile .l{font:400 10px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:8px}
.stats-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:26px;align-items:start}
.stats-h{font:600 11px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
.mini-chart{display:flex;align-items:flex-end;gap:8px;height:150px;border-bottom:1px solid var(--line);padding-bottom:0}
.mini-chart.vide{height:auto;align-items:center;border-bottom:0}
.mc-bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px;min-width:0}
.mc-val{font:600 10px/1 var(--f-mono);color:var(--muted);white-space:nowrap}
.mc-fill{width:70%;max-width:34px;min-height:2px;background:linear-gradient(var(--red-hot),var(--red));
  border-radius:3px 3px 0 0;transition:height .5s cubic-bezier(.2,.7,.2,1)}
.mc-bar.now .mc-fill{background:linear-gradient(var(--ok),#1c8a52)}
.mc-lbl{font:400 10px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-top:8px}
.mc-bar.now .mc-lbl{color:var(--ok)}
.presta-bars{display:grid;gap:11px}
.pb-row{display:grid;grid-template-columns:110px 1fr auto;gap:12px;align-items:center;font-size:12.5px}
.pb-label{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-track{height:9px;background:var(--surface2);border-radius:5px;overflow:hidden}
.pb-fill{height:100%;background:linear-gradient(90deg,var(--red-deep),var(--red-hot));border-radius:5px;transition:width .5s}
.pb-n{font-family:var(--f-mono);font-size:12px;color:var(--ink);min-width:16px;text-align:right}
.stats-empty{color:var(--faint);font:400 12px/1.6 var(--f-mono);padding:8px 0}

/* éditeur de devis */
.devis-editor{max-width:660px;width:100%;text-align:left;max-height:88vh;overflow-y:auto}
.devis-editor h3{text-align:left}
.dl-head,.dl-row{display:grid;grid-template-columns:1fr 62px 82px 88px 28px;gap:8px;align-items:center}
.dl-head{font:600 9px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:8px 0 8px;padding:0 2px}
.dl-head span:nth-child(2),.dl-head span:nth-child(3),.dl-head span:nth-child(4){text-align:right}
.dl-row{margin-bottom:8px}
.dl-row .input{padding:9px 10px;font-size:13px}
.dl-row .dl-q,.dl-row .dl-p{text-align:right}
.dl-lt{font-family:var(--f-mono);font-size:12px;text-align:right;color:var(--ink)}
.dl-del{width:26px;height:26px;border:1px solid var(--line2);border-radius:2px;color:var(--faint);
  font-size:12px;transition:.15s;justify-self:center;background:transparent}
.dl-del:hover{border-color:var(--bad);color:var(--bad)}
.dl-total{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:14px;
  border-top:1.4px solid var(--red);font-family:var(--f-display);font-style:italic;font-weight:700;
  font-size:15px;text-transform:uppercase}
.dl-total b{color:var(--red-hot);font-size:19px;font-style:normal}
.amt-actions{display:inline-flex;flex-direction:column;align-items:flex-end;gap:6px}
.row-btns{display:flex;gap:5px}
.row-btns .mini,.row-btns a.mini{padding:5px 9px;text-decoration:none}

/* ---------- toast & modal ---------- */
.toasts{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:120;
  display:grid;gap:10px;width:min(430px,92vw)}
.toast{background:#05070A;border:1px solid var(--line2);border-left:3px solid var(--red);
  border-radius:3px;padding:14px 18px;font-size:13.5px;color:var(--ink);
  box-shadow:var(--shadow);animation:toastin .3s cubic-bezier(.2,.7,.2,1)}
.toast.okt{border-left-color:var(--ok)}
@keyframes toastin{from{opacity:0;transform:translateY(14px)}}
.modal{position:fixed;inset:0;z-index:110;display:none;place-items:center;padding:22px;
  overflow-y:auto;overscroll-behavior:contain;
  background:rgba(5,6,8,.66);backdrop-filter:blur(3px)}
.modal.show{display:grid}
.modal-card{background:var(--bg2);border:1px solid var(--line2);border-radius:3px;
  max-width:470px;width:100%;padding:36px 32px;text-align:center;position:relative;
  max-height:calc(100vh - 44px);max-height:calc(100dvh - 44px);overflow-y:auto;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);box-shadow:var(--shadow)}
.modal-card .badge{width:64px;height:64px;margin:0 auto 20px;border-radius:50%;
  border:2px solid var(--ok);color:var(--ok);display:grid;place-items:center;font-size:26px}
.modal-card h3{font-family:var(--f-display);font-style:italic;font-weight:700;
  font-size:22px;text-transform:uppercase;margin:0 0 10px}
.modal-card p{color:var(--muted);font-size:14px;margin:0 0 8px}
.modal-card .ref{font-family:var(--f-mono);font-size:13px;color:var(--red-hot);letter-spacing:.12em}
.modal-card .btn{margin-top:22px}

/* ---------- accès client : connexion + suivi express ---------- */
.suivi-card h2{font-family:var(--f-display);font-style:italic;font-weight:700;font-size:23px;text-transform:uppercase;margin:0 0 6px}
.sv-result{margin-top:16px;font-size:14px;display:none;border:1px dashed var(--line2);border-radius:3px;padding:14px 16px}
.sv-result.show{display:block;animation:fadein .3s}
.sv-result .sv-line{display:flex;justify-content:space-between;gap:14px;padding:6px 0;align-items:baseline}
.sv-result .k{font:400 11px/1.6 var(--f-mono);color:var(--faint);text-transform:uppercase;letter-spacing:.1em;flex:none}
.sv-result .sv-line>span:last-child,.sv-result .sv-line b{text-align:right}
.sv-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.sv-ref{font-family:var(--f-display);font-weight:600;font-size:15px;color:var(--ink)}
.amt-hl{color:var(--red-hot);font-size:15px}
.sv-presta{font-size:12.5px;color:var(--muted);line-height:1.5}
/* timeline suivi */
.sv-timeline{display:flex;justify-content:space-between;gap:4px;margin:18px 0 6px;position:relative}
.sv-timeline::before{content:"";position:absolute;top:7px;left:7%;right:7%;height:2px;background:var(--line2);z-index:0}
.sv-step{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.sv-dot{width:16px;height:16px;border-radius:50%;background:var(--surface2);border:2px solid var(--line2);flex:none;transition:.3s}
.sv-step.done .sv-dot{background:var(--ok);border-color:var(--ok)}
.sv-step.now .sv-dot{background:var(--red);border-color:var(--red-hot);box-shadow:0 0 0 4px rgba(225,6,0,.2);animation:pulse 1.8s infinite}
.sv-lbl{font:600 10px/1.3 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--faint);max-width:9ch}
.sv-step.done .sv-lbl,.sv-step.now .sv-lbl{color:var(--ink)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(225,6,0,.2)}50%{box-shadow:0 0 0 7px rgba(225,6,0,.05)}}
.sv-details{margin-top:14px;border-top:1px solid var(--line);padding-top:8px}
.sv-photos{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.sv-photos a{width:64px;height:64px;border:1px solid var(--line2);border-radius:2px;overflow:hidden}
.sv-photos img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.sv-photos a:hover img{transform:scale(1.08)}
/* acceptation / refus du devis par le client */
.sv-decide{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line2)}
.sv-dq{font-family:var(--f-display);font-weight:600;font-size:15px;color:var(--ink);
  text-transform:uppercase;letter-spacing:.06em;margin:0 0 13px}
.sv-dbtns{display:flex;gap:10px;flex-wrap:wrap}
.sv-dbtns .btn{flex:1 1 auto;justify-content:center}
.sv-dnote{font:400 11.5px/1.65 var(--f-mono);color:var(--faint);margin:13px 0 0}
.sv-done{margin-top:16px;border:1px solid var(--ok);border-left-width:2px;border-radius:3px;
  padding:13px 15px;color:var(--ok);font-size:13.5px;line-height:1.6}
.sv-done.no{border-color:var(--line2);color:var(--muted)}
.sv-pdf{margin-top:14px;width:100%;justify-content:center}
/* espace client : mise en page suivi + colonne latérale */
.suivi-wrap{display:grid;grid-template-columns:1.3fr 0.8fr;gap:22px;max-width:960px;margin:0 auto;align-items:start}
.suivi-side{display:flex;flex-direction:column;gap:16px}
.ss-card{background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:24px 24px 26px;position:relative}
.ss-logo{height:44px;aspect-ratio:831/647;display:block;margin-bottom:12px;opacity:.9}
.ss-card h3{font-family:var(--f-display);font-weight:600;font-size:16px;margin:0 0 8px;color:var(--ink)}
.ss-card p{font-size:13px;line-height:1.6;color:var(--muted);margin:0 0 16px}
.ss-actions{display:flex;flex-direction:column;gap:9px}
.ss-actions .btn{width:100%;justify-content:center}
.ss-soon{border-style:dashed;opacity:.9}
.ss-soon p{margin-bottom:0}
/* suivi express : replié par défaut, la connexion est devenue le chemin principal */
.sv-express{border-style:dashed}
.sv-express > summary{font-family:var(--f-display);font-weight:600;font-size:15px;color:var(--ink);
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:9px}
.sv-express > summary::-webkit-details-marker{display:none}
.sv-express > summary::before{content:"▸";color:var(--red-hot);transition:transform .18s}
.sv-express[open] > summary{margin-bottom:12px}
.sv-express[open] > summary::before{transform:rotate(90deg)}
.sv-express .field{margin-bottom:10px}
.sv-express .btn{width:100%;justify-content:center}
/* tableau de bord du client connecté */
.cpt-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:16px;margin:0 auto 22px;max-width:960px}
.cpt-top .eyebrow{margin:0 0 4px}
.cpt-top .mono{font:400 13.5px/1.3 var(--f-mono);color:var(--ink)}
#cptListe{display:flex;flex-direction:column;gap:18px;max-width:960px;margin:0 auto}
.cpt-doss .sv-result{margin-top:0}
.cpt-vide{color:var(--muted);font-size:14px;text-align:center;padding:34px 0}
.soon-tag{position:absolute;top:16px;right:16px;font:600 9px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--warn);border:1px solid rgba(199,127,6,.5);border-radius:2px;padding:5px 8px;background:rgba(199,127,6,.08)}

/* commande (modal) */
.co-card{text-align:left;max-width:530px}
/* récapitulatif du panier dans la modale de commande */
.co-recap{border-top:1px dashed var(--line2);border-bottom:1px dashed var(--line2);
  padding:12px 0;margin:18px 0 4px;display:flex;flex-direction:column;gap:7px}
.cr-line{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  font:400 13px/1.4 var(--f-mono);color:var(--muted)}
.cr-line.cr-tot{font-size:15px;color:var(--ink);padding-top:7px;
  border-top:1px solid var(--line)}
.cr-line.cr-tot span:last-child{font-family:var(--f-display);font-style:italic;
  font-weight:700;font-size:19px;color:var(--ink)}
.co-card h3{text-align:left}
.co-sub{font:400 12.5px/1.7 var(--f-mono);color:var(--muted);margin:0 0 18px}
.radio-row{display:flex;gap:10px;flex-wrap:wrap}
.radio{display:flex;align-items:center;gap:8px;border:1px solid var(--line2);border-radius:2px;
  padding:10px 14px;cursor:pointer;font-size:13.5px;color:var(--muted);flex:1;min-width:170px}
.radio input{accent-color:var(--red)}
.radio:has(input:checked){border-color:var(--red);color:var(--ink);background:rgba(225,6,0,.06)}
.co-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:14px}
.pay-note{font:400 11px/1.7 var(--f-mono);color:var(--faint);margin:16px 0 0;border-top:1px dashed var(--line);padding-top:12px}

/* back-office réel */
.admin-gate{max-width:430px;margin:0 auto 34px}
.admin-gate .login-card{clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)}
.admin-gate h2{font-family:var(--f-display);font-style:italic;font-weight:700;font-size:22px;text-transform:uppercase;margin:0 0 6px}
.tb select.stsel{background:#0F1216;border:1px solid var(--line2);border-radius:2px;color:var(--ink);
  font:600 11px/1.4 var(--f-mono);letter-spacing:.04em;padding:7px 8px;text-transform:uppercase}
.tb select.stsel:focus{outline:none;border-color:var(--red)}
.ph-links{display:flex;gap:5px;margin-top:6px}
.ph-links a{display:block;width:40px;height:40px;border:1px solid var(--line2);border-radius:2px;overflow:hidden}
.ph-links img{width:100%;height:100%;object-fit:cover}
.ph-links>img{width:40px;height:40px;border:1px solid var(--line2);border-radius:2px;flex:none}
.ph-links{align-items:center}
.btn.busy{pointer-events:none;opacity:.65}

/* accès gérant discret, en bas de l'espace client */
.adm-dot{display:flex;align-items:center;gap:9px;width:max-content;margin:52px auto 0;padding:12px 14px;
  border-radius:2px;opacity:.45;transition:opacity .2s}
.adm-dot i{display:block;width:7px;height:7px;border-radius:50%;background:var(--line2);
  transition:background .2s,box-shadow .2s}
.adm-dot span{font:600 9.5px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .3s,opacity .2s;opacity:0}
.adm-dot:hover,.adm-dot:focus-visible{opacity:1}
.adm-dot:hover i,.adm-dot:focus-visible i{background:var(--red);box-shadow:0 0 0 4px rgba(225,6,0,.16)}
.adm-dot:hover span,.adm-dot:focus-visible span{max-width:120px;opacity:1}
@media (hover:none){          /* tactile : pas de survol, on agrandit la zone de tap */
  .adm-dot{opacity:.6;padding:18px 22px}
  .adm-dot i{width:8px;height:8px}
}

/* back-office : menu de sections (colonne à gauche, onglets sur mobile) */
.adm-layout{display:grid;grid-template-columns:214px minmax(0,1fr);gap:22px;align-items:start}
.adm-main{min-width:0}
.adm-nav{position:sticky;top:88px;display:flex;flex-direction:column;gap:2px;padding:8px;
  border:1px solid var(--line);border-radius:3px;background:var(--surface)}
.adm-tab{display:flex;align-items:center;gap:8px;width:100%;text-align:left;cursor:pointer;
  background:none;border:0;border-left:2px solid transparent;color:var(--muted);padding:12px 13px;
  font:600 11.5px/1.3 var(--f-display);letter-spacing:.11em;text-transform:uppercase;
  transition:color .18s,background .18s,border-color .18s}
.adm-tab:hover{color:var(--ink);background:rgba(255,255,255,.035)}
.adm-tab.on{color:var(--ink);border-left-color:var(--red);background:rgba(225,6,0,.09)}
.adm-badge{margin-left:auto;min-width:19px;padding:3px 6px;border-radius:2px;background:var(--warn);
  color:#0B0D10;font:600 10px/1 var(--f-mono);text-align:center}
.adm-badge:empty{display:none}
.adm-sec[hidden]{display:none}
.adm-sec > .panel:first-child,.adm-sec > .kpi-grid:first-child{margin-top:0}
@media (max-width:900px){
  /* surtout pas de grid ici : un élément sticky ne peut pas sortir de sa case de
     grille, et sur une colonne unique cette case fait la hauteur de la barre,
     les onglets défilaient donc hors de l'écran dès le premier scroll. */
  .adm-layout{display:block}
  .adm-nav{flex-direction:row;overflow-x:auto;gap:4px;padding:6px;top:69px;z-index:20;
    margin-bottom:14px;
    background:rgba(11,13,16,.97);backdrop-filter:blur(6px);
    scrollbar-width:none;-ms-overflow-style:none}
  .adm-nav::-webkit-scrollbar{display:none}
  .adm-tab{flex:0 0 auto;white-space:nowrap;border-left:0;border-bottom:2px solid transparent;
    padding:11px 13px;font-size:11px}
  .adm-tab.on{border-bottom-color:var(--red)}
  /* au changement d'onglet, le haut de la section ne doit pas se glisser
     sous le header (69px) ni sous la barre d'onglets collée juste dessous */
  .adm-main{scroll-margin-top:122px}
}

/* back-office : barre d'outils (recherche + filtres) */
/* réglages de livraison, en tête du panneau Boutique */
.sv-acompte{border:1px solid var(--warn);border-radius:3px;background:rgba(199,127,6,.07);
  padding:16px 18px;margin-top:14px}
.sv-acompte .sv-dq{margin:0 0 6px}
.sv-pay{margin:12px 0 4px;width:100%;justify-content:center}
.sv-rib{border-top:1px dashed var(--line2);margin-top:12px;padding-top:10px}
.dl-acompte{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border-top:1px dashed var(--line2);margin-top:10px;padding-top:12px}
.dl-acompte label{font:400 12.5px/1.4 var(--f-mono);color:var(--muted)}
.dl-ac-champ{display:flex;align-items:center;gap:7px}
.dl-ac-champ .input{width:78px;padding:8px 10px;text-align:right}
.dl-acompte b{margin-left:auto;color:var(--ink)}
.liv-form{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}
.liv-form .field{margin:0;flex:1 1 160px}
.liv-check{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted);
  padding-bottom:11px;white-space:nowrap}
.fhint{display:block;font:400 11px/1.5 var(--f-mono);color:var(--faint);margin-top:5px}
.relance-list{display:flex;flex-direction:column;gap:8px}
.rl-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:3px;
  padding:11px 14px;background:var(--surface)}
.rl-ref{font:600 13px/1.2 var(--f-mono);letter-spacing:.08em;color:var(--ink);cursor:pointer}
.rl-ref:hover{color:var(--red-hot)}
.rl-who{font-size:13.5px;color:var(--muted)}
.rl-age{font:400 11.5px/1.2 var(--f-mono);color:var(--warn);margin-left:auto}
.fi-histo{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
@media (max-width:620px){.rl-age{margin-left:0}}
.adm-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 16px}
.adm-tools .adm-search{flex:1 1 230px;min-width:180px;padding:10px 12px;font-size:13px}
.adm-chips{display:flex;gap:6px;flex-wrap:wrap}
.adm-chips .fchip{font-size:11.5px;padding:8px 12px}
.adm-count{font:600 10.5px/1.5 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-left:auto}
.tb tr.rowlink{cursor:pointer;transition:background .15s}
.tb tr.rowlink:hover{background:rgba(255,255,255,.03)}
.tb .see{display:block;width:max-content;font:600 10px/1.4 var(--f-mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);margin-top:7px}
.tb tr.rowlink:hover .see{color:var(--red-hot)}
.tb .nph{font:600 10px/1 var(--f-mono);color:var(--faint)}

/* back-office : fiche détaillée */
/* fiche d'une pièce (modale visiteur) */
.prod-visual{cursor:zoom-in}
.piece-card{max-width:860px;width:100%;text-align:left;max-height:92vh;overflow-y:auto;padding:0}
.piece-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding:20px 24px 26px}
.piece-main{aspect-ratio:4/3;background:#fff;border:1px solid var(--line);border-radius:3px;
  display:grid;place-items:center;overflow:hidden}
.piece-main img{width:100%;height:100%;object-fit:contain;padding:12px;cursor:zoom-in}
.piece-main svg{width:74px;height:74px;color:var(--red);opacity:.85}
.piece-thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.piece-thumbs img{width:58px;height:58px;object-fit:contain;background:#fff;padding:3px;
  border:1px solid var(--line);border-radius:2px;cursor:pointer;transition:border-color .15s}
.piece-thumbs img:hover,.piece-thumbs img.on{border-color:var(--red)}
.piece-info{display:flex;flex-direction:column;gap:10px}
.piece-info h3{font-family:var(--f-display);font-style:italic;font-weight:700;
  font-size:24px;text-transform:uppercase;margin:0;text-align:left}
.piece-descr{white-space:pre-wrap;font-size:14.5px;line-height:1.7;color:var(--muted);
  margin:0;flex:1}
.piece-descr:empty{display:none}
.piece-note{font:400 11.5px/1.6 var(--f-mono);color:var(--faint);margin:12px 0 0}
@media (max-width:700px){.piece-grid{grid-template-columns:1fr;gap:18px;padding:16px 18px 22px}}
.fiche-card{max-width:780px;width:100%;text-align:left;max-height:92vh;overflow-y:auto;padding:0}
.fiche-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:16px 22px;border-bottom:1px solid var(--line2);background:var(--bg2)}
.fiche-top .fi-ref{font:600 14px/1.2 var(--f-mono);letter-spacing:.1em;color:var(--ink)}
.fiche-top .fi-when{font:400 11px/1.2 var(--f-mono);color:var(--faint)}
.fiche-x{margin-left:auto;background:none;border:1px solid var(--line2);color:var(--muted);
  width:34px;height:34px;flex:none;border-radius:2px;font-size:14px;cursor:pointer}
.fiche-x:hover{border-color:var(--red);color:var(--ink)}
.fiche-body{padding:20px 22px 24px}
.fi-sec{margin-bottom:24px}
.fi-sec:last-child{margin-bottom:0}
.fi-h{font:600 10.5px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
  margin:0 0 12px;padding-bottom:9px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:center}
.fi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px 22px}
.fi-f .k{display:block;font:600 9.5px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin-bottom:6px}
.fi-f .v{display:block;font-size:14.5px;color:var(--ink);line-height:1.5;word-break:break-word}
.fi-f a.v:hover{color:var(--red-hot)}
.fiche-card p.fi-text{white-space:pre-wrap;font-size:14.5px;line-height:1.7;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-left:2px solid var(--red);border-radius:3px;padding:14px 16px;margin:0}
.fi-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.fi-tag{font:600 11px/1 var(--f-mono);letter-spacing:.05em;color:var(--ink);border:1px solid var(--line2);
  border-radius:2px;padding:8px 10px;background:var(--surface)}
.fi-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.fi-shots img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line2);
  border-radius:2px;cursor:zoom-in;background:var(--surface)}
.fi-shots img:hover{border-color:var(--red)}
table.fi-lines{width:100%;border-collapse:collapse;font-size:13.5px}
.fi-lines th{font:600 9.5px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);text-align:left;padding:0 0 9px}
.fi-lines th.n,.fi-lines td.n{text-align:right;font-family:var(--f-mono)}
.fi-lines td{padding:9px 0;border-top:1px solid var(--line);vertical-align:top}
.fi-tot{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:14px;
  padding-top:13px;border-top:1px solid var(--line2)}
.fi-tot span{font:600 10.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.fi-tot b{font-family:var(--f-mono);font-size:20px;color:var(--red-hot)}
.fiche-card p.fi-none{font:400 12.5px/1.7 var(--f-mono);color:var(--faint);margin:0 0 12px}
.fi-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fi-acts .mini,.fi-acts a.mini{font:600 10.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;
  background:none;border:1px solid var(--line2);color:var(--muted);padding:10px 13px;border-radius:2px;
  cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.fi-acts .mini:hover{border-color:var(--red);color:var(--ink)}
.fi-acts .mini.hot{border-color:var(--red);background:var(--red);color:#fff}
.fi-acts .mini.hot:hover{background:var(--red-hot)}
.fi-acts select.stsel{background:#0F1216;border:1px solid var(--line2);border-radius:2px;color:var(--ink);
  font:600 11px/1.4 var(--f-mono);letter-spacing:.04em;padding:9px 10px;text-transform:uppercase}
textarea.fi-note{width:100%;min-height:78px;resize:vertical;font-family:var(--f-body);font-size:14px;line-height:1.6}
.fi-danger{border-top:1px solid var(--line);margin-top:26px;padding-top:20px}
.fi-acts .mini.danger{border-color:rgba(232,72,60,.45);color:var(--bad)}
.fi-acts .mini.danger:hover{border-color:var(--bad);background:var(--bad);color:#fff}
.fi-acts .mini.danger.armed{background:var(--bad);border-color:var(--bad);color:#fff}

/* back-office : listes en cartes sur mobile */
@media (max-width:820px){
  #realDevisWrap,#realCmdWrap{overflow-x:visible}
  #realDevisWrap table.tb,#realCmdWrap table.tb{min-width:0;display:block}
  #realDevisWrap .tb thead,#realCmdWrap .tb thead{display:none}
  #realDevisWrap .tb tbody,#realCmdWrap .tb tbody,
  #realDevisWrap .tb tr,#realCmdWrap .tb tr{display:block;width:auto}
  #realDevisWrap .tb tr,#realCmdWrap .tb tr{border:1px solid var(--line);border-radius:3px;
    background:var(--surface);margin-bottom:10px;padding:2px 0}
  #realDevisWrap .tb td,#realCmdWrap .tb td{display:flex;gap:12px;align-items:flex-start;text-align:left;
    padding:10px 14px;border-bottom:1px dashed var(--line);width:auto}
  #realDevisWrap .tb tr td:last-child,#realCmdWrap .tb tr td:last-child{border-bottom:0}
  #realDevisWrap .tb td::before,#realCmdWrap .tb td::before{content:attr(data-l);flex:none;width:82px;
    padding-top:3px;font:600 9.5px/1.5 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
  #realDevisWrap .tb td.amt,#realCmdWrap .tb td.amt{text-align:left}
  #realDevisWrap .tb td.ref,#realCmdWrap .tb td.ref{white-space:normal;color:var(--ink);font-size:13px}
  .amt-actions{align-items:flex-start}
  .adm-count{margin-left:0}
}

/* plaque maquette */
.build-tag{position:fixed;left:14px;bottom:14px;z-index:70;
  font:600 9.5px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;
  color:var(--faint);border:1px solid var(--line2);background:rgba(11,13,16,.85);
  padding:7px 10px;border-radius:2px;backdrop-filter:blur(6px);pointer-events:none}
.build-tag b{color:var(--red-hot);font-weight:600}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:34px;align-items:start}
.contact-card{background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:30px 30px 26px}
.c-row{display:flex;gap:15px;padding:16px 0;border-bottom:1px solid var(--line)}
.c-row:last-child{border-bottom:0}
.c-ico{flex:none;width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line2);
  border-radius:2px;color:var(--red-hot)}
.c-ico svg{width:18px;height:18px}
.c-row .k{display:block;font:600 10.5px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.c-row .v{display:block;color:var(--ink);font-size:15px;line-height:1.5}
.c-row a.v:hover{color:var(--red-hot)}
.c-hours{margin:3px 0 0;list-style:none;padding:0}
.c-hours li{display:flex;justify-content:space-between;gap:16px;font-size:14px;color:var(--muted);padding:3px 0}
.c-hours li b{color:var(--ink);font-weight:600}
.c-hours .rdv{color:var(--warn)}
.socials{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.social-btn{display:inline-flex;align-items:center;gap:9px;padding:11px 16px;border:1px solid var(--line2);
  border-radius:2px;color:var(--ink);font:600 12.5px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;
  transition:border-color .2s,color .2s,transform .2s}
.social-btn svg{width:17px;height:17px}
.social-btn:hover{border-color:var(--red-hot);color:var(--red-hot);transform:translateY(-2px)}
.map-embed{border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--surface);position:relative}
.map-embed iframe{display:block;width:100%;height:420px;border:0;filter:grayscale(.35) contrast(1.05)}
.map-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;
  border-top:1px solid var(--line);background:var(--surface)}
.map-foot span{font:600 11px/1.4 var(--f-mono);letter-spacing:.06em;color:var(--muted)}

/* ---------- faq ---------- */
.faq{max-width:820px;margin:0 auto}
.faq details{border:1px solid var(--line);border-radius:3px;background:var(--surface);margin-bottom:12px;overflow:hidden}
.faq details[open]{border-color:var(--line2)}
.faq summary{list-style:none;cursor:pointer;padding:19px 22px;display:flex;align-items:center;gap:14px;
  font-family:var(--f-display);font-weight:600;font-size:16px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;color:var(--red-hot);font-size:22px;line-height:1;
  transition:transform .25s;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--red-hot)}
.faq .q-num{font:600 11px/1 var(--f-mono);color:var(--faint);flex:none}
.faq .a{padding:0 22px 20px 22px;color:var(--muted);font-size:14.5px;line-height:1.65;margin:0}

/* ---------- mentions légales ---------- */
.legal{max-width:820px;margin:0 auto;color:var(--muted);font-size:14.5px;line-height:1.75}
.legal h2{font-family:var(--f-display);font-style:italic;font-weight:700;font-size:19px;
  text-transform:uppercase;letter-spacing:.04em;color:var(--ink);margin:38px 0 14px;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.legal h2:first-child{margin-top:0}
.legal p{margin:0 0 14px}
.legal a{color:var(--red-hot)}
.legal a:hover{text-decoration:underline}
.legal-dl{display:grid;grid-template-columns:220px minmax(0,1fr);gap:0;margin:0}
.legal-dl dt{font:600 10.5px/1.6 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);padding:11px 0;border-top:1px solid var(--line)}
.legal-dl dd{margin:0;padding:11px 0;color:var(--ink);border-top:1px solid var(--line)}
.legal-note{display:block;font:400 11.5px/1.5 var(--f-mono);color:var(--faint);margin-top:3px}
.legal-dl dt:first-child,.legal-dl dt:first-child + dd{border-top:0}
@media (max-width:620px){
  .legal-dl{grid-template-columns:1fr}
  .legal-dl dt{padding:12px 0 0;border-top:1px solid var(--line)}
  .legal-dl dd{padding:2px 0 12px;border-top:0}
}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:10px}
  .hero-brand{order:-1;justify-content:flex-start;margin-bottom:14px}
  .hero-brand svg{width:min(56vw,225px)}
  .honda-inner{grid-template-columns:1fr;gap:30px}
  .process{grid-template-columns:1fr 1fr;gap:8px}
  .step{border-left:0;padding-left:0}
  .presta{grid-template-columns:1fr;gap:26px}
  .contact-grid{grid-template-columns:1fr;gap:24px}
  /* en pile, un 4/5 pleine largeur ferait un mur sur tablette : on le borne */
  .geste-grid{grid-template-columns:1fr;gap:28px}
  .geste-fig{max-width:440px}
  .map-embed iframe{height:320px}
  .veh-grid{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr}
  .tl{grid-template-columns:repeat(5,minmax(86px,1fr));overflow-x:auto;padding-bottom:6px}
}
/* sous 1060 px la nav complète ne tient plus à côté du téléphone : on passe au
   menu burger avant qu'elle se chevauche, pas après */
@media (max-width:1060px){
  .nav{display:none}
  .burger{display:grid}
  .hdr-inner{gap:14px}
  .hdr-actions{margin-left:auto}
  .mobile-menu{display:none;position:fixed;top:67px;left:0;right:0;z-index:79;
    background:rgba(11,13,16,.97);border-bottom:1px solid var(--line);padding:10px 24px 22px}
  .mobile-menu.open{display:block}
  .mobile-menu a{display:block;font-family:var(--f-display);font-weight:500;font-size:16px;
    letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:13px 4px;
    border-bottom:1px dashed var(--line)}
  .mobile-menu a:hover{color:var(--ink)}
  .hero{min-height:0;padding:120px 0 70px}
  /* en une colonne le texte passe sur toute la largeur : le voile devient
     vertical et les bandes racing s'effacent, sinon elles barrent le titre */
  .hero-veil{background:
    linear-gradient(180deg,#0B0D10 0%,rgba(11,13,16,.72) 30%,rgba(11,13,16,.9) 58%,#0B0D10 100%)}
  .stripes{right:-30%;width:230px;opacity:.42}
  .telemetry span{min-width:46%}
  .suivi-wrap{grid-template-columns:1fr;max-width:560px}
}
/* très petits écrans : on resserre boutons et logo plutôt que de laisser
   l'en-tête déborder. Le téléphone reste, c'est le bouton le plus utile */
@media (max-width:400px){
  .hdr-inner{gap:8px}
  .icon-btn{width:38px;height:38px}
  .hdr-tel{padding:8px 9px}
  .logo{gap:8px}
  .logo-mark{font-size:15px;padding:3px 7px 3px 5px}
  /* l'accès au compte reste dans le menu burger : on libère la place */
  .hdr-actions a.icon-btn{display:none}
}
@media (max-width:620px){
  .logo-sub{display:none}
  .logo-word{font-size:16px}
  .logo-mark{font-size:16px;padding:3px 8px 3px 6px}
  /* le sur-titre porte le métier et la ville : trop espacé il prenait 3 lignes */
  .hero-eyebrow{letter-spacing:.14em;gap:8px}
  .frow,.frow.f3,.svc-checks{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr;gap:20px}
  .process{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:1px solid var(--line);padding:24px 28px}
  .stat:last-child{border-bottom:0}
  .hero-ctas .btn{width:100%;justify-content:center}
  .dash-head{flex-direction:column;align-items:flex-start}
}