/* Rachat Auto Bruxelles — direction « La Bande dessinée » (Comic / Pop). Jetons générés par construire.py à partir de directions.json ; le reste de la feuille vient de sites/rachat-auto-bruxelles/skin.css. */
:root{
  --bg:#FFFFFF;--bg-2:#F5F5F5;--ink:#101010;--ink-2:#454545;--ink-3:color-mix(in srgb,#454545 70%,#FFFFFF);
  --line:color-mix(in srgb,#101010 12%,#FFFFFF);--line-2:color-mix(in srgb,#101010 22%,#FFFFFF);
  --accent:#1E64C8;--accent-ink:#FFFFFF;--accent-2:#FFD500;--accent-soft:color-mix(in srgb,#1E64C8 14%,#FFFFFF);
  --f-head:'Rubik',system-ui,sans-serif;--f-body:'Rubik',system-ui,sans-serif;
  --r:6px;--r-lg:10px;--r-btn:6px;
}
/* ===== La Bande dessinée : blanc, contours noirs épais, trame de points, bleu + jaune + rouge en touches ===== */
h1,h2,h3{letter-spacing:-.02em;font-weight:900}
h1{font-size:clamp(2.4rem,5.8vw,4.8rem);line-height:1;-webkit-text-stroke:0}
.kicker{color:var(--ink);background:var(--accent-2);display:table;padding:.25rem .6rem;border:3px solid var(--ink);border-radius:var(--r);letter-spacing:.14em;transform:rotate(-2deg)}
em{color:var(--accent)}
.topbar{background:#fff;border-bottom:4px solid var(--ink)}
.btn{border:3px solid var(--ink);border-radius:var(--r);box-shadow:4px 4px 0 var(--ink);font-weight:900}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn--primary{background:var(--accent);color:#fff}
.btn--ghost{background:#fff}
.btn--cream{background:var(--accent-2);color:var(--ink)}
.btn--outline-light{background:#fff;color:var(--ink);border-color:var(--ink)}

/* héros : trois cases */
.hero--bd{padding:clamp(2rem,5vw,4rem) 0 clamp(1.5rem,4vw,3rem);background:radial-gradient(circle,rgba(30,100,200,.18) 1.4px,transparent 1.6px) 0 0/14px 14px,#fff}
.hero__photo-wrap{margin:1.6rem 0 1.8rem}
.hero__photo-img{display:block;width:100%;height:340px;object-fit:cover;border:4px solid var(--ink);border-radius:var(--r);box-shadow:8px 8px 0 var(--ink)}
.hero__row{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:end}
.hero__row .lead{margin:0}
.hero__row .actions{justify-content:flex-end}
@media (max-width:900px){.hero__photo-img{height:220px}.hero__row{grid-template-columns:1fr}.hero__row .actions{justify-content:flex-start}}

/* composants : cases de BD */
.etats__item,.etape,.preuve__item,.post,.faq details,.formlead__card,.aside__card,.wizard-card,.contact-card,.modele,.villes-table,.offer,.chip{border-radius:var(--r);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);background:#fff}
.etats__item:hover,.post:hover,.chip:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink);border-color:var(--ink)}
.etats__num{color:var(--accent)}
.etape__num{border:3px solid var(--ink);background:var(--accent-2);color:var(--ink);border-radius:var(--r)}
.etape:nth-child(2) .etape__num{background:var(--accent);color:#fff}
.etape:nth-child(3) .etape__num{background:#E8202A;color:#fff}
.preuve{margin-top:1.6rem}
.preuve__item b{color:var(--accent)}
.shead h2{display:inline;background:linear-gradient(transparent 55%,var(--accent-2) 55%)}
.shead__intro{margin-top:.8rem}
.sect--alt{background:var(--bg-2);border-block:4px solid var(--ink)}
.galerie__item{border-radius:var(--r);border:3px solid var(--ink)}
.galerie__item figcaption{background:var(--accent-2);color:var(--ink);border:2px solid var(--ink);border-radius:var(--r)}
.page-hero{background:radial-gradient(circle,rgba(30,100,200,.14) 1.4px,transparent 1.6px) 0 0/14px 14px,#fff;border-bottom:4px solid var(--ink)}
.faq details[open]{border-color:var(--accent)}
.cta-final{background:var(--accent);color:#fff;border-top:4px solid var(--ink)}
.cta-final__title em{color:var(--accent-2)}
.cta-mi{background:var(--accent);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.cta-mi .btn--cream{color:var(--ink)}
.footer{background:radial-gradient(circle,rgba(30,100,200,.14) 1.4px,transparent 1.6px) 0 0/14px 14px,#fff;border-top:4px solid var(--ink)}
.footer__grid{grid-template-columns:1.3fr 1fr 1fr 1.2fr}
.footer__col{border-left:3px solid var(--ink);padding-left:1.3rem}
@media (max-width:640px){.footer__col{border-left:0;padding-left:0}}
.callbar{border-top:3px solid var(--ink)}