/* ══════════════════════════════════════════════════════════════
   ScénariScript — système de styles partagé
   Jetons et composants issus des références de design.
   Utilisé par : index.html, compte.html, merci.html,
   et les pages légales (avec legal.css par-dessus).
   ══════════════════════════════════════════════════════════════ */

:root{
  /* fonds */
  --bg:#070706;            /* hors-cadre */
  --bg-1:#0b0a09;          /* fond principal des sections */
  --bg-2:#0e0c0b;          /* section alternée */
  --card:#0f0d0c;          /* carte niveau 1 */
  --card-2:#131110;        /* carte niveau 2 */
  --panel:#121010;         /* panneau interne */
  --row:#171413;           /* ligne de démo */
  --hot:#141008;           /* carte mise en avant */

  /* bordures */
  --line:#1a1715;          /* séparation de section */
  --line-2:#221e1b;        /* bordure discrète */
  --line-3:#2a2522;        /* bordure marquée */
  --line-btn:#332d28;      /* bouton secondaire */

  /* accent */
  --amber:#E9B166;
  --amber-hi:#F5CE96;
  --amber-dk:#C8813A;
  --amber-line:#4a3a24;
  --on-amber:#14100b;

  /* texte */
  --txt:#F2EDE6;
  --txt-2:#D8D1C9;
  --txt-3:#C9C1B8;
  --dim:#A39A90;
  --dim-2:#8b837b;
  --dim-3:#7d756d;
  --dim-4:#6f6862;

  /* états */
  --ok:#7fae7a;
  --bad:#E88A7D;
  --bad-line:#4a2b28;

  /* scénario */
  --paper:#F7F3EA;
  --ink:#1a1815;
  --hl:#F6DDA8;

  /* polices */
  --mono:"Courier Prime","Courier New",monospace;
  --sans:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* rythme */
  --pad-x:56px;
  --gap-sec:170px;
  --gap-sec-b:240px;
  --gap-feat:120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
[hidden]{display:none !important}

body{
  margin:0;
  background:var(--bg-1);
  color:var(--txt);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--amber); text-decoration:none; transition:color 150ms ease}
a:hover{color:var(--amber-hi)}
:focus-visible{outline:2px solid var(--amber); outline-offset:2px}
img{max-width:100%}

/* ─────────── conteneurs ─────────── */
.wrap{max-width:1240px; margin:0 auto; padding-left:var(--pad-x); padding-right:var(--pad-x)}
.wrap-s{max-width:1120px; margin:0 auto; padding-left:40px; padding-right:40px}

/* ─────────── navigation ─────────── */
nav{border-bottom:1px solid var(--line); background:var(--bg-1)}
.navIn{
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  max-width:1240px; margin:0 auto; padding:18px var(--pad-x);
}
.brand{
  font-family:var(--mono); font-weight:700; font-size:15px;
  letter-spacing:.16em; color:var(--txt);
  display:inline-flex; align-items:center; gap:9px;
}
/* Le logo garde sa taille quelle que soit la densité de l'écran. */
.brand img{width:26px; height:26px; display:block; border-radius:6px}
.brand:hover{color:var(--txt)}
.brand b{color:var(--amber); font-weight:700}
.sp{flex:1}
.navIn a:not(.brand):not(.cta),
.nav-l{color:var(--dim); font-size:14px; transition:color 150ms ease}
.navIn a:not(.brand):not(.cta):hover,
.nav-l:hover{color:var(--txt)}
.nav-l.on{color:var(--txt); border-bottom:1px solid var(--amber); padding-bottom:2px}
.cta{
  background:var(--amber); color:var(--on-amber); font-weight:600;
  font-size:14px; padding:9px 18px; border-radius:6px;
  transition:background 150ms ease;
}
.cta:hover{background:var(--amber-hi); color:var(--on-amber)}

/* ─────────── sélecteur de langue ─────────── */
.lang{display:inline-flex; border:1px solid var(--line-2); border-radius:6px; overflow:hidden; flex:none}
.langBtn{
  background:transparent; border:0; cursor:pointer;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--dim);
  padding:7px 10px; min-height:34px; transition:color 150ms ease, background 150ms ease;
}
.langBtn:hover{color:var(--txt)}
.langBtn.actif{background:var(--amber); color:var(--on-amber); font-weight:700}
.langBtn + .langBtn{border-left:1px solid var(--line-2)}

/* ─────────── boutons ─────────── */
.btn{
  display:inline-block; text-align:center; cursor:pointer;
  font-family:var(--sans); font-size:14px; font-weight:600;
  padding:12px 22px; border-radius:8px;
  border:1px solid var(--line-btn); background:transparent; color:var(--txt);
  transition:border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.btn:hover{border-color:var(--amber-line); background:rgba(233,177,102,.06); color:var(--txt)}
.btn.primary{background:var(--amber); border-color:var(--amber); color:var(--on-amber); font-weight:700}
.btn.primary:hover{background:var(--amber-hi); border-color:var(--amber-hi); color:var(--on-amber)}
.btn.ghost-amber{border-color:var(--amber); color:var(--amber)}
.btn.ghost-amber:hover{background:rgba(233,177,102,.08); color:var(--amber-hi); border-color:var(--amber-hi)}
.btn.danger{border-color:var(--bad-line); color:var(--bad)}
.btn.danger:hover{background:rgba(232,138,125,.07); border-color:var(--bad); color:var(--bad)}
.btn.block{display:block; width:100%}
.btn[disabled]{opacity:.55; cursor:default}

/* ─────────── en-têtes de section ─────────── */
.sec-head{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  text-align:center; padding-bottom:56px;
}
.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:400;
  letter-spacing:.24em; color:var(--txt);
}
.eyebrow.amber{color:var(--amber-dk)}
.sec-head h2{
  margin:0; font-family:var(--mono); font-weight:700;
  font-size:38px; letter-spacing:.08em; color:var(--amber); line-height:1.2;
}
.sec-head h2.sm{font-size:32px}
.sec-head h2.plain{color:var(--txt)}
.sec-head p{margin:0; font-size:16px; line-height:1.6; color:var(--dim); max-width:62ch; text-wrap:pretty}
.sec-head p.narrow{max-width:58ch}
.sec-head p.mid{max-width:60ch}

/* ─────────── cartes ─────────── */
.card{border:1px solid var(--line-2); border-radius:12px; background:var(--card); padding:26px 28px}
.card-2{border:1px solid var(--line-3); border-radius:12px; background:var(--card-2); padding:34px 30px}
.card-label{font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--dim-4)}

/* listes à coche */
.ticks{display:flex; flex-direction:column; gap:9px; font-size:14px; color:var(--txt-3); margin:0; padding:0; list-style:none}
.ticks li{display:flex; gap:10px}
.ticks li::before{content:"✓"; color:var(--amber); flex:none}
.ticks li.no{color:var(--dim-4)}
.ticks li.no::before{content:"—"; color:var(--dim-4)}
.ticks li.ok::before{color:var(--ok)}

/* grilles */
.g3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.g3.lg{gap:18px}
.gauto{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px}

/* ─────────── pied de page ─────────── */
.foot{
  border-top:1px solid var(--line); background:var(--bg-2);
  padding:28px var(--pad-x);
  font-size:13px; color:var(--dim-3);
}
.footIn{
  max-width:1240px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  gap:20px; flex-wrap:wrap;
}
.foot a{color:var(--amber)}
.foot a:hover{color:var(--amber-hi)}

/* ─────────── responsive ─────────── */
@media (max-width:1199px){
  :root{--pad-x:40px; --gap-sec:110px; --gap-sec-b:140px; --gap-feat:80px}
  .sec-head h2{font-size:30px}
  .sec-head h2.sm{font-size:28px}
}
@media (max-width:899px){
  .g3, .g3.lg{grid-template-columns:minmax(0,1fr)}
  .navIn{gap:18px; row-gap:12px}
  .footIn{justify-content:flex-start}
  .btn{min-height:44px}
}
@media (max-width:700px){
  .navIn{gap:16px 18px}
  .navIn .brand{flex:0 0 100%}
  .sp{display:none}
}
@media (max-width:600px){
  :root{--pad-x:20px}
  .wrap-s{padding-left:20px; padding-right:20px}
  .sec-head h2{font-size:26px}
  .sec-head h2.sm{font-size:24px}
}
.btn.disabled{opacity:.45; cursor:default; border-color:var(--line-2); color:var(--dim-2)}
.btn.disabled:hover{background:transparent; border-color:var(--line-2); color:var(--dim-2)}
.dlNote{margin-top:2px; font-size:12.5px; color:var(--dim-3)}
.dlNote summary{cursor:pointer; color:var(--amber); list-style:none}
.dlNote summary::-webkit-details-marker{display:none}
.dlNote summary::before{content:"? "; font-weight:700}
.dlNote p{margin:8px 0 0; line-height:1.6; color:var(--dim)}
.dlNote b{color:var(--txt-2)}
.dlCmd{
  display:block; margin-top:8px; padding:9px 11px;
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:7px;
  font-family:var(--mono); font-size:11.5px; color:var(--txt-2);
  overflow-x:auto; white-space:nowrap; user-select:all;
}