/* Charte Liberation Totale : sand / slate / clay, Spectral + Hanken Grotesk, 0 emoji.
   Source : 4 Delivery/Clients/sophie-chevelu/1 Direction/charte-sophie/CHARTE.md */
:root{
  --slate-600:#4f6d78; --slate-700:#415862; --slate-800:#36474f; --slate-900:#232f34;
  --clay-500:#b07e57; --clay-600:#97694a; --clay-700:#7a5339; --clay-200:#decaba;
  --sand-50:#faf8f4; --sand-100:#f4f0e8; --sand-200:#e9e1d4;
  --ink-900:#1c2427; --ink-700:#3c474c;
  --sage-500:#5f7d5b; --amber-500:#b08537; --rust-500:#9b5043;
  --r:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--sand-50); color:var(--ink-900);
  font-family:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.chiffre{font-family:Spectral,Georgia,serif; font-weight:600; line-height:1.2; margin:0}
.wrap{max-width:660px; margin:0 auto; padding:0 16px 64px}

/* jauge vivante */
.jauge{position:sticky; top:0; z-index:10; background:var(--sand-50); padding:14px 0 10px}
.jauge .piste{height:4px; background:var(--sand-200); border-radius:99px; overflow:hidden}
.jauge .barre{height:100%; width:0; background:var(--slate-600); border-radius:99px; transition:width .35s ease}
.jauge .pas{margin-top:7px; font-size:13px; color:var(--ink-700); letter-spacing:.02em}

.ecran{display:none; animation:entre .32s ease both}
.ecran.actif{display:block}
@keyframes entre{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* accueil */
.hero{padding:44px 0 8px; text-align:center}
.surtitre{font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--clay-700); font-weight:600}
.hero h1{font-size:clamp(30px,7.4vw,44px); margin:12px 0 0}
.hero .st{margin:16px auto 0; max-width:30em; color:var(--ink-700)}
.reperes{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:26px 0 0; padding:0; list-style:none}
.reperes li{font-size:13.5px; background:var(--sand-100); border:1px solid var(--sand-200);
  border-radius:99px; padding:6px 13px; color:var(--ink-700)}
.noeud{display:block; margin:30px auto 0; width:56px; height:56px; opacity:.9}

/* questions */
.etiquette{font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--clay-700); font-weight:600}
.question{font-size:clamp(21px,4.6vw,26px); margin:10px 0 0}
.aide{margin:12px 0 0; font-size:15px; color:var(--ink-700); font-style:italic}
.choix{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:10px}
.choix button{
  width:100%; text-align:left; display:flex; align-items:flex-start; gap:13px;
  background:#fff; border:1px solid var(--sand-200); border-radius:var(--r);
  padding:15px 16px; font:inherit; color:var(--ink-900); cursor:pointer;
  transition:border-color .16s, background .16s, transform .08s;
}
.choix button:hover{border-color:var(--slate-600); background:var(--sand-100)}
.choix button:active{transform:scale(.995)}
.choix button.pris{border-color:var(--clay-500); background:var(--sand-100); box-shadow:inset 0 0 0 1px var(--clay-500)}
.bareme{flex:0 0 auto; min-width:22px; height:22px; margin-top:2px; border-radius:6px;
  background:var(--sand-200); color:var(--ink-700); font-size:12.5px; font-weight:700;
  display:grid; place-items:center; font-family:Spectral,Georgia,serif}
.choix button.pris .bareme{background:var(--clay-500); color:#fff}

.btn{display:inline-block; background:var(--slate-600); color:#fff; border:0; border-radius:99px;
  padding:15px 30px; font:inherit; font-weight:600; cursor:pointer; text-decoration:none;
  transition:background .16s}
.btn:hover{background:var(--slate-700)}
.btn.clay{background:var(--clay-600)} .btn.clay:hover{background:var(--clay-700)}
.btn.bloc{display:block; width:100%; text-align:center}
.retour{background:none; border:0; color:var(--ink-700); font:inherit; font-size:14.5px;
  cursor:pointer; padding:10px 0; text-decoration:underline; text-underline-offset:3px}
.pied{margin-top:26px; display:flex; align-items:center; gap:18px; flex-wrap:wrap}

/* calcul */
.calcul{text-align:center; padding:70px 0}
.calcul .piste{max-width:260px; margin:26px auto 0; height:4px; background:var(--sand-200); border-radius:99px; overflow:hidden}
.calcul .barre{height:100%; width:0; background:var(--clay-500); transition:width .5s linear}

/* score */
.score-carte{background:var(--slate-900); color:var(--sand-100); border-radius:20px;
  padding:34px 26px; text-align:center; margin-top:14px}
.score-carte .chiffre{font-size:clamp(54px,15vw,86px); color:#fff; line-height:1}
.score-carte .sur{font-size:19px; color:var(--clay-200)}
.score-carte .zone{margin-top:14px; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--clay-200); font-weight:600}
.score-carte .bornes{margin-top:6px; font-size:14px; color:#c9d4d9}
.score-carte .phrase{font-family:Spectral,Georgia,serif; font-size:clamp(19px,4.4vw,23px); margin:20px auto 0; max-width:26em; color:#fff}
.echelle{display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-top:22px}
.echelle div{font-size:11.5px; text-align:center; padding:7px 2px; border-radius:7px;
  background:rgba(255,255,255,.08); color:#c9d4d9; letter-spacing:.04em}
.echelle div.ici{background:var(--clay-500); color:#fff; font-weight:700}

/* mecanismes */
h2.sec{font-size:clamp(22px,5vw,28px); margin:46px 0 4px}
.sec-st{color:var(--ink-700); font-size:15.5px; margin:0 0 18px}
.meca{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.meca li{background:#fff; border:1px solid var(--sand-200); border-radius:var(--r); padding:14px 16px;
  display:flex; gap:13px; align-items:flex-start}
.meca li.off{opacity:.55}
.meca .etat{flex:0 0 auto; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 9px; border-radius:99px; margin-top:1px}
.meca li.on .etat{background:var(--rust-500); color:#fff}
.meca li.off .etat{background:var(--sand-200); color:var(--ink-700)}
.meca .nom{font-weight:600}
.meca .mot{display:block; margin-top:4px; font-size:14.5px; color:var(--ink-700); font-style:italic}

/* encart citation / guide */
.encart{background:var(--sand-100); border-left:5px solid var(--clay-500); border-radius:var(--r);
  padding:20px 22px; margin:26px 0 0}
.encart p:first-child{margin-top:0} .encart p:last-child{margin-bottom:0}
.guide{counter-reset:g; list-style:none; margin:18px 0 0; padding:0; display:grid; gap:14px}
.guide li{background:#fff; border:1px solid var(--sand-200); border-radius:var(--r); padding:18px 20px 18px 58px; position:relative}
.guide li::before{counter-increment:g; content:counter(g); position:absolute; left:18px; top:17px;
  width:26px; height:26px; border-radius:99px; background:var(--slate-600); color:#fff;
  font-family:Spectral,Georgia,serif; font-weight:600; display:grid; place-items:center; font-size:15px}
.guide strong{display:block; margin-bottom:4px}

/* urgence */
.urgence{background:#fff; border:2px solid var(--rust-500); border-radius:var(--r); padding:20px 22px; margin:24px 0 0}
.urgence h3{color:var(--rust-500); font-size:19px}
.urgence dl{margin:14px 0 0; display:grid; gap:10px}
.urgence dt{font-family:Spectral,Georgia,serif; font-size:24px; font-weight:600; color:var(--rust-500)}
.urgence dd{margin:0 0 0 2px; font-size:15px; color:var(--ink-700)}

/* formulaire creneau */
.champ{display:block; margin-top:16px}
.champ span{display:block; font-size:14.5px; font-weight:600; margin-bottom:6px}
.champ input{width:100%; font:inherit; padding:14px 15px; border:1px solid var(--sand-200);
  border-radius:var(--r); background:#fff; color:var(--ink-900)}
.champ input:focus{outline:2px solid var(--slate-600); outline-offset:1px; border-color:var(--slate-600)}
.erreur{color:var(--rust-500); font-size:14.5px; margin:12px 0 0; min-height:1px}
.mini{font-size:13.5px; color:var(--ink-700); margin:14px 0 0}
.lien{color:var(--clay-700); text-underline-offset:3px}
@media print{.jauge,.pied,.btn,.retour{display:none!important}body{background:#fff}}