/* Rachat Auto Montpellier — direction « Le Comptoir · Montpellier » (Comptoir pro (reprise recolorée de recup-occaz, Perpignan, via L'Atelier de Lyon)). Jetons générés par construire.py à partir de directions.json ; le reste de la feuille vient de sites/rachat-auto-montpellier/skin.css. */
:root{
  --bg:#F5F4EE;--bg-2:#EBE9DF;--ink:#1B2219;--ink-2:#4F564B;--ink-3:color-mix(in srgb,#4F564B 70%,#F5F4EE);
  --line:color-mix(in srgb,#1B2219 12%,#F5F4EE);--line-2:color-mix(in srgb,#1B2219 22%,#F5F4EE);
  --accent:#667719;--accent-ink:#FFFFFF;--accent-2:#2B3328;--accent-soft:color-mix(in srgb,#667719 14%,#F5F4EE);
  --f-head:'Teko',system-ui,sans-serif;--f-body:'Hanken Grotesk',system-ui,sans-serif;
  --r:4px;--r-lg:8px;--r-btn:4px;
}
/* ===== Le Comptoir, Montpellier : gabarit de recup-occaz (Perpignan), vert nuit + olive ===== */
h1,h2,h3{text-transform:uppercase;letter-spacing:.01em;font-weight:700;line-height:.95}
h1{font-size:clamp(2.9rem,6.6vw,5.2rem);line-height:.92}
h2{font-size:clamp(2.3rem,4.6vw,3.6rem);line-height:.92}
h3{letter-spacing:.01em}
em{font-style:normal;color:var(--accent)}
.kicker{color:var(--accent);letter-spacing:.1em;font-size:1rem}
.kicker--light{color:#B9CC5A}

.topbar{background:var(--bg);border-bottom:1px solid var(--line-2)}
.brand__name{text-transform:uppercase;letter-spacing:.04em;font-size:1.6rem}
.mainnav a,.mainnav button{white-space:nowrap;padding:.55rem .6rem;font-size:.9rem}
.btn{font-family:var(--f-body);font-weight:600;border-radius:var(--r-btn)}
.btn--primary{box-shadow:none;border-color:var(--accent)}
.btn--primary:hover{background:#4F5D12;border-color:#4F5D12;transform:translateY(-1px)}
.btn--primary svg{width:1rem;height:1rem}
.btn--ghost{border:1.5px solid var(--line-2);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink)}

/* héros : photo réelle plein cadre sous voile charbon */
.hero--atelier{position:relative;isolation:isolate;overflow:hidden;color:#fff;padding:clamp(4.5rem,11vw,8rem) 0 clamp(3.5rem,8vw,6rem)}
.hero__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:60% 62%}
.hero--atelier::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(22,29,20,.92) 0%,rgba(22,29,20,.8) 38%,rgba(22,29,20,.3) 58%,rgba(22,29,20,.12) 100%),linear-gradient(180deg,rgba(22,29,20,0) 70%,rgba(22,29,20,.75) 100%)}
.hero__eye{font-family:var(--f-head);font-weight:700;font-size:1rem;letter-spacing:.12em;text-transform:uppercase;color:#B9CC5A;margin:0 0 1.1rem}
.hero--atelier h1{color:#fff;font-size:clamp(2.6rem,4.6vw,4.1rem);max-width:15ch;margin-bottom:.4em}
.hero--atelier h1 em{color:#B9CC5A}
.hero__lead{font-size:clamp(1.05rem,1.5vw,1.22rem);color:rgba(255,255,255,.86);max-width:46ch;margin:0 0 1.6rem}
.hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 2rem;margin-top:1.8rem}
.hero--atelier .trust-hero{margin:0;color:rgba(255,255,255,.72)}
.hero--atelier .trust-hero strong{color:#fff}
.hero__faits{margin:0;font-size:.9rem;color:rgba(255,255,255,.72)}
@media (max-width:560px){.hero--atelier .actions .btn{width:100%}.hero__bg{object-position:62% 45%}.hero--atelier::after{background:linear-gradient(180deg,rgba(22,29,20,.55) 0%,rgba(22,29,20,.82) 45%,rgba(22,29,20,.92) 100%)}}

/* bande sombre des 4 états, collée au héros */
.bande-etats{background:var(--ink);color:#fff;padding:clamp(2.2rem,5vw,3.4rem) 0 clamp(2.6rem,5.5vw,3.8rem);border-top:1px solid rgba(255,255,255,.08)}
.bande-etats h2{color:#fff;font-size:clamp(1.7rem,3.2vw,2.5rem);margin-bottom:1.4rem}
.bande-etats h2 span{display:block;color:#B9CC5A}
.bande-etats .etats__item{background:#262F23;border:1px solid rgba(255,255,255,.1);border-radius:var(--r);color:#fff}
.bande-etats .etats__item:hover{border-color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent);transform:none}
.bande-etats .etats__num{color:#B9CC5A}
.bande-etats .etats__item strong{text-transform:uppercase;letter-spacing:.02em;font-size:1.35rem}
.bande-etats .etats__item small{color:rgba(255,255,255,.7)}
.bande-etats .etats__go{color:#fff}

/* composants : angles vifs, bandes nettes */
.sect--alt{background:var(--bg-2);border-block:1px solid var(--line-2)}
.shead h2{margin-bottom:.35rem}
.etats__item,.etape,.preuve__item,.post,.faq details,.formlead__card,.aside__card,.wizard-card,.contact-card,.modele,.villes-table,.offer{border-radius:var(--r);border-color:var(--line-2);box-shadow:none}
.etats__item:hover,.post:hover,.chip:hover{border-color:var(--accent);box-shadow:none}
.etape__num{border-radius:var(--r)}
.preuve{margin-top:1.4rem}
.preuve__item{border-left:3px solid var(--accent)}
.preuve__item b{color:var(--ink);font-family:var(--f-head);font-weight:700}
.galerie__item{border-radius:var(--r)}
.galerie__item figcaption{background:var(--ink);border-radius:2px;text-transform:uppercase;letter-spacing:.06em;font-size:.76rem}
.chip{border-radius:var(--r);border-color:var(--line-2)}
.chip svg{color:var(--accent)}
.faq summary{text-transform:none}
.page-hero{background:var(--bg-2);border-bottom:3px solid var(--ink)}

/* fin de page : un seul bouton de couleur sur charbon */
.cta-final{background:var(--ink);color:#fff}
.cta-final__title em{color:#B9CC5A;opacity:1}
.cta-final .btn--cream{background:var(--accent);color:#fff}
.cta-final .btn--cream:hover{background:#4F5D12}
.footer{background:#11160F;color:rgba(255,255,255,.72);border-top:0}
.footer__logo,.footer__head,.footer__contact a{color:#fff}
.footer__col a{color:rgba(255,255,255,.72)}
.footer__col a:hover,.footer__logo em{color:#B9CC5A}
.footer__bottom{border-top-color:rgba(255,255,255,.14);color:rgba(255,255,255,.5)}
.footer__bottom a{color:rgba(255,255,255,.6)}

/* Signature Speed validée le 31/10/2026, commune à toutes les pages. */
.brand__mark{display:none}
.brand__name{display:block;line-height:1}
.brand-signature{display:block;width:280px;max-width:100%;height:auto}
.footer__logo{display:inline-block;background:#fff;padding:14px 16px;border-radius:2px;max-width:100%}
.footer__logo .brand-signature{width:300px}
@media(max-width:1200px){.brand-signature{width:240px}}
@media(max-width:560px){.brand-signature{width:250px}}
@media(max-width:360px){.brand-signature{width:220px}}