/* Zaply — socle commun (tokens + shell topbar/footer + typo de base).
   Inclus par TOUTES les pages du site. Le style spécifique à une page reste dans la page. */
:root{
  --encre:#16213A; --encre-2:#243354; --papier:#F6F4EE; --blanc:#FFFFFF;
  --zap:#FFD43B; --zap-ombre:#E8B90F; --vert:#2F9E62; --rouge:#E04F3F;
  --gris:#6B7080; --ligne:#E3DFD4;
  --mono:ui-monospace,"Cascadia Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --sans:"Avenir Next","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--papier);color:var(--encre);line-height:1.55}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
/* ---------- Topbar ---------- */
nav.topbar{position:sticky;top:0;z-index:50;background:rgba(246,244,238,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--ligne)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-weight:800;font-size:1.35rem;letter-spacing:-.02em;text-decoration:none;display:flex;align-items:center;gap:.3rem}
.logo .z{display:inline-grid;place-items:center;width:1.5em;height:1.5em;background:var(--zap);border-radius:6px;font-size:.95em}
.nav-liens{display:flex;gap:28px;align-items:center}
.nav-liens a{text-decoration:none;font-size:.92rem;font-weight:500;color:var(--encre-2)}
.nav-liens a:hover{text-decoration:underline;text-underline-offset:4px}
/* ---------- Boutons ---------- */
.btn{display:inline-block;background:var(--encre);color:#fff;text-decoration:none;font-weight:700;padding:.7em 1.4em;border-radius:10px;border:none;cursor:pointer;font-size:.95rem}
.btn:hover{background:var(--encre-2)}
.btn:focus-visible,a:focus-visible{outline:3px solid var(--zap-ombre);outline-offset:2px}
.btn-zap{background:var(--zap);color:var(--encre);box-shadow:0 2px 0 var(--zap-ombre)}
.btn-zap:hover{background:#ffdd5c}
/* ---------- Footer ---------- */
footer.pied{padding:36px 0;color:var(--gris);font-size:.82rem}
.pied-in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer.pied a{color:var(--gris)}
footer.pied a:hover{color:var(--encre)}
/* ---------- Pages de contenu (légales…) ---------- */
.page-contenu{padding:56px 0 72px;max-width:760px;margin:0 auto}
.page-contenu h1{font-size:clamp(1.8rem,3.6vw,2.6rem);letter-spacing:-.03em;font-weight:800;margin-bottom:10px}
.page-contenu .maj{font-family:var(--mono);font-size:.78rem;color:var(--gris);margin-bottom:34px}
.page-contenu h2{font-size:1.15rem;letter-spacing:-.01em;font-weight:800;margin:34px 0 10px}
.page-contenu p,.page-contenu li{font-size:.95rem;color:var(--encre-2)}
.page-contenu p{margin-bottom:12px}
.page-contenu ul,.page-contenu ol{margin:0 0 12px 22px}
.page-contenu li{margin-bottom:6px}
.page-contenu a{color:var(--encre);text-decoration-color:var(--zap-ombre);text-underline-offset:3px}
@media (max-width:860px){
  .nav-liens{gap:16px}
  .nav-liens a:not(.btn){display:none}
}