/* Massilia Rachat Auto — direction « Le Quai » (Sunny Mediterranean Bold). Jetons générés par construire.py à partir de directions.json ; le reste de la feuille vient de sites/massilia-rachat-auto/skin.css. */
:root{
  --bg:#F6F1E7;--bg-2:#EFE7D8;--ink:#0B2A4A;--ink-2:#3D556D;--ink-3:color-mix(in srgb,#3D556D 70%,#F6F1E7);
  --line:color-mix(in srgb,#0B2A4A 12%,#F6F1E7);--line-2:color-mix(in srgb,#0B2A4A 22%,#F6F1E7);
  --accent:#FF5A36;--accent-ink:#FFFFFF;--accent-2:#0B2A4A;--accent-soft:color-mix(in srgb,#FF5A36 14%,#F6F1E7);
  --f-head:'Bricolage Grotesque',system-ui,sans-serif;--f-body:'Manrope',system-ui,sans-serif;
  --r:14px;--r-lg:26px;--r-btn:999px;
}
/* ===== Le Quai : sable, bleu marine en encre, corail en accent, formes rondes, gros titres larges ===== */
h1,h2,h3{letter-spacing:-.025em}
h1{font-size:clamp(2.6rem,7vw,6rem);line-height:.98;text-transform:none}
h2{font-size:clamp(1.8rem,3.8vw,3rem)}
.kicker{letter-spacing:.2em;font-size:.78rem}
.btn{letter-spacing:.01em}
.btn--primary{box-shadow:0 12px 30px rgba(255,90,54,.28)}
.topbar{background:color-mix(in srgb,var(--bg) 94%,transparent);border-bottom:0}
.topbar__in{height:82px}
.brand__name{font-size:1.2rem}

/* héros */
.hero--quai{padding:clamp(2.6rem,6vw,5rem) 0 0;overflow:hidden}
.hero__h1{max-width:16ch}
.hero__row{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:end;margin-bottom:1rem}
.hero__row .lead{margin:0}
.hero__row .actions{justify-content:flex-end}
.quai{margin-top:1.4rem;border-top:3px solid var(--ink);background:linear-gradient(var(--bg-2),var(--bg))}
.quai__svg{display:block;width:100%;height:auto;max-height:340px}
.q-draw{stroke-dasharray:1400;stroke-dashoffset:1400}
.q-cable{stroke-dasharray:1200;stroke-dashoffset:1200}
@media (max-width:820px){.hero__row{grid-template-columns:1fr}.hero__row .actions{justify-content:flex-start}.quai__svg{max-height:220px}}

/* bento asymétrique : états larges à gauche, preuve empilée à droite */
.bento{display:grid;grid-template-columns:2fr 1fr;gap:1.2rem;align-items:start}
.bento__etats .etats{grid-template-columns:1fr 1fr}
.bento__preuve .preuve{grid-template-columns:1fr}
.bento__preuve .preuve__item{background:var(--ink);color:#fff;border-color:var(--ink)}
.bento__preuve .preuve__item b{color:var(--accent)}
.bento__preuve .preuve__item span{color:rgba(255,255,255,.8)}
@media (max-width:900px){.bento{grid-template-columns:1fr}.bento__preuve .preuve{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.bento__etats .etats,.bento__preuve .preuve{grid-template-columns:1fr}}

/* composants : arrondis généreux, sable */
.etats__item,.etape,.post,.faq details,.formlead__card,.aside__card,.wizard-card,.contact-card,.modele,.offer{border-radius:var(--r-lg);border-color:transparent;background:#fff;box-shadow:0 10px 30px rgba(11,42,74,.06)}
.etats__item:hover,.post:hover{border-color:var(--accent)}
.etape__num{background:var(--ink);color:var(--accent)}
.chip{border-radius:999px;background:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(11,42,74,.06)}
.galerie__item{border-radius:var(--r-lg)}
.galerie__item figcaption{background:var(--accent);border-radius:999px}
.page-hero{background:var(--bg-2);border-bottom:0}
.page-hero h1{font-size:clamp(2.2rem,5vw,4rem)}
.sect--alt{border:0}
.cta-final{background:var(--ink);color:#fff}
.cta-final__title em{color:var(--accent)}
.cta-final .btn--cream{color:var(--ink)}
.cta-mi{background:var(--ink)}
.cta-mi .btn--cream{color:var(--ink)}
.footer{background:var(--ink);color:rgba(255,255,255,.75);border-top:0}
.footer__logo,.footer__head,.footer__contact a{color:#fff}
.footer__col a{color:rgba(255,255,255,.75)}
.footer__col a:hover,.footer__logo em{color:var(--accent)}
.footer__bottom{border-top-color:rgba(255,255,255,.15);color:rgba(255,255,255,.5)}
.faq details[open]{border-color:var(--accent)}