/* Rachat Auto Océan — direction « La Boussole » (Radial Nautical). Jetons générés par construire.py à partir de directions.json ; le reste de la feuille vient de sites/rachat-auto-ocean/skin.css. */
:root{
  --bg:#FAF8F3;--bg-2:#F0EDE4;--ink:#1A2733;--ink-2:#4C5A66;--ink-3:color-mix(in srgb,#4C5A66 70%,#FAF8F3);
  --line:color-mix(in srgb,#1A2733 12%,#FAF8F3);--line-2:color-mix(in srgb,#1A2733 22%,#FAF8F3);
  --accent:#0A5FA8;--accent-ink:#FFFFFF;--accent-2:#4CB996;--accent-soft:color-mix(in srgb,#0A5FA8 14%,#FAF8F3);
  --f-head:'Jost',system-ui,sans-serif;--f-body:'Figtree',system-ui,sans-serif;
  --r:18px;--r-lg:30px;--r-btn:999px;
}
/* ===== La Boussole : sable clair, bleu océan, vert d'eau, formes rondes, graduations en anneaux ===== */
h1,h2,h3{letter-spacing:-.01em}
h1{font-size:clamp(2.3rem,5.2vw,4.2rem)}
.kicker{color:var(--accent);letter-spacing:.2em}
.kicker::before{content:"";display:inline-block;width:.7rem;height:.7rem;border:2px solid var(--accent);border-radius:50%;margin-right:.5rem;vertical-align:-1px}
em{color:var(--accent)}
.topbar{background:color-mix(in srgb,var(--bg) 94%,transparent);border-bottom:1px solid var(--line)}
.btn--primary{box-shadow:0 12px 28px rgba(10,95,168,.25)}

/* héros */
.hero--boussole{padding:clamp(2.4rem,6vw,5rem) 0 clamp(1.5rem,4vw,3rem)}
.hero__grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(1.6rem,4vw,4rem);align-items:center}
.boussole{display:flex;justify-content:center}
.boussole__svg{width:min(100%,440px);filter:drop-shadow(0 24px 40px rgba(26,39,51,.16))}
.tick{opacity:0}
.grad{stroke-dasharray:1106;stroke-dashoffset:1106}
@media (max-width:900px){.hero__grid{grid-template-columns:1fr}.boussole__svg{width:min(100%,340px)}}

/* composants : anneaux et arrondis */
.etats__item,.etape,.preuve__item,.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(26,39,51,.07)}
.etats__item:hover,.post:hover{border-color:var(--accent);box-shadow:0 18px 40px rgba(26,39,51,.12)}
.etats__num{width:2rem;height:2rem;border-radius:50%;border:2px solid var(--accent);display:inline-flex;align-items:center;justify-content:center;font-size:.7rem}
.etape__num{background:var(--accent-2);color:var(--ink)}
.etapes{position:relative}
.etape:nth-child(2){transform:translateY(2.2rem)}
@media (max-width:860px){.etape:nth-child(2){transform:none}}
.preuve{margin-top:1.6rem}
.preuve__item{border-radius:var(--r-lg);text-align:center;align-items:center}
.preuve__item b{color:var(--accent)}
.chip{border-radius:999px;background:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(26,39,51,.06)}
.chip svg{color:var(--accent)}
.villes-table{border-radius:var(--r-lg)}
.sect--alt{background:var(--bg-2);border:0}
.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}
.faq details{border-radius:var(--r-lg)}
.faq details[open]{border-color:var(--accent)}
.cta-final{background:var(--accent);color:#fff;border-radius:var(--r-lg) var(--r-lg) 0 0}
.cta-final__title em{color:var(--accent-2)}
.cta-final .btn--cream{color:var(--accent)}
.cta-mi{background:var(--accent)}
.cta-mi .btn--cream{color:var(--accent)}
.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-2)}
.footer__bottom{border-top-color:rgba(255,255,255,.15);color:rgba(255,255,255,.5)}
.shead h2 em{color:var(--accent)}