/* Breizh Rachat Auto — direction « Le Sémaphore » (Maritime Signal (light)). Jetons générés par construire.py à partir de directions.json ; le reste de la feuille vient de sites/breizh-rachat-auto/skin.css. */
:root{
  --bg:#FFFFFF;--bg-2:#F2F2F2;--ink:#0E0E0E;--ink-2:#454545;--ink-3:color-mix(in srgb,#454545 70%,#FFFFFF);
  --line:color-mix(in srgb,#0E0E0E 12%,#FFFFFF);--line-2:color-mix(in srgb,#0E0E0E 22%,#FFFFFF);
  --accent:#E63312;--accent-ink:#FFFFFF;--accent-2:#0E0E0E;--accent-soft:color-mix(in srgb,#E63312 14%,#FFFFFF);
  --f-head:'Archivo Black',system-ui,sans-serif;--f-body:'Archivo',system-ui,sans-serif;
  --r:0px;--r-lg:0px;--r-btn:0px;
}
/* ===== Le Sémaphore : blanc, noir, rouge phare, rayures, grille décalée, aucun arrondi ===== */
h1,h2,h3{letter-spacing:0;font-weight:400;text-transform:uppercase}
h1{font-size:clamp(2.3rem,5.4vw,4.4rem);line-height:1}
h2{font-size:clamp(1.6rem,3.4vw,2.6rem)}
h3{font-family:var(--f-body);font-weight:600;text-transform:none}
.kicker{color:var(--ink);letter-spacing:.24em;font-family:var(--f-body);font-weight:600;border-bottom:3px solid var(--accent);display:inline-block;padding-bottom:.2rem}
em{color:var(--accent)}
.topbar{background:var(--bg);border-bottom:6px solid var(--ink)}
.brand__name{text-transform:uppercase;font-family:var(--f-head);font-weight:400;font-size:1rem}
.btn{text-transform:uppercase;letter-spacing:.08em;font-family:var(--f-head);font-weight:400;font-size:.88rem}
.btn--primary{box-shadow:none;border-color:var(--ink);border-width:2px}
.btn--primary:hover{background:var(--ink)}
.btn--ghost{border-color:var(--ink);border-width:2px}

/* héros */
.hero--semaphore{padding:clamp(2.4rem,6vw,5rem) 0 clamp(1.5rem,4vw,3rem)}
.hero__grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(1.6rem,4vw,4rem);align-items:center}
.semaphore__svg{width:100%;height:auto;max-height:520px}
.pav{opacity:0}
@media (max-width:900px){.hero__grid{grid-template-columns:1fr}.semaphore__svg{max-height:380px}}
.rayure{height:16px;background:repeating-linear-gradient(90deg,var(--ink) 0 24px,#fff 24px 48px)}

/* grille décalée */
.decale{display:grid;grid-template-columns:1fr 1.4fr;gap:2rem;align-items:start}
.decale__a .preuve{grid-template-columns:1fr 1fr;margin-top:1rem}
.decale__b{margin-top:3rem}
@media (max-width:900px){.decale{grid-template-columns:1fr}.decale__b{margin-top:0}}

/* composants : noir/blanc, bords épais */
.etats__item,.etape,.preuve__item,.post,.faq details,.formlead__card,.aside__card,.wizard-card,.contact-card,.modele,.villes-table,.offer,.chip{border-radius:0;border:2px solid var(--ink);box-shadow:none;background:#fff}
.etats__item:hover,.post:hover,.chip:hover{background:var(--ink);color:#fff;transform:none}
.etats__item:hover small,.post:hover p,.post:hover time{color:rgba(255,255,255,.75)}
.etats__item:hover .etats__go,.etats__item:hover .etats__num{color:var(--accent)}
.etats__num{color:var(--accent);font-family:var(--f-head);font-weight:400}
.etats__item strong{font-family:var(--f-head);font-weight:400;text-transform:uppercase}
.etape__num{border-radius:0;background:var(--accent)}
.etape:nth-child(2) .etape__num{background:var(--ink)}
.preuve__item b{color:var(--ink);font-weight:400}
.preuve__item:nth-child(odd){background:var(--ink);color:#fff}
.preuve__item:nth-child(odd) b{color:var(--accent)}
.preuve__item:nth-child(odd) span{color:rgba(255,255,255,.8)}
.sect--alt{background:var(--bg-2);border:0}
.galerie__item{border-radius:0;border:2px solid var(--ink)}
.galerie__item figcaption{background:var(--accent);border-radius:0;text-transform:uppercase}
.page-hero{background:var(--bg);border-bottom:6px solid var(--ink)}
.faq summary{font-family:var(--f-body);font-weight:700;text-transform:none}
.faq details[open]{border-color:var(--accent)}
.cta-final{background:var(--accent);color:#fff;border-top:10px solid var(--ink)}
.cta-final__title{font-weight:400}
.cta-final__title em{color:#fff;text-decoration:underline;text-decoration-color:var(--ink)}
.cta-final .btn--cream{color:var(--ink);border-color:var(--ink)}
.cta-mi{background:var(--ink);border-radius:0}
.cta-mi .btn--cream{color:var(--ink)}
.footer{background:var(--bg);border-top:16px solid;border-image:repeating-linear-gradient(90deg,var(--ink) 0 24px,#fff 24px 48px) 16}
.callbar__btn--go{color:#fff}