:root{
  --obsidienne:#040404;
  --surface:#0D0D0F;
  --champ:#C2A76D;
  --champ-sombre:#8C7443;
  --argent:#C3C9CB;
  --texte:#EDEAE3;
  --muet:#8A8F94;
  --ligne:#232326;
  --ligne-or:rgba(194,167,109,.38);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--obsidienne);
  color:var(--texte);
  font-family:'Jost',system-ui,-apple-system,sans-serif;
  font-weight:300;
  line-height:1.5;
  padding:calc(env(safe-area-inset-top) + 60px) 0 calc(env(safe-area-inset-bottom) + 24px);
}
::selection{background:var(--champ);color:#040404}

/* ---- Barre fixe : douze traits, « Retour », le libellé, « Gardé » ----
   Jamais un pourcentage. Le libellé ne compte que le cœur (« Plus que N »),
   les précisions disent « 2 / 9 », le bout dit « Prêt à forger ». */
#progressWrap{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(4,4,4,.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--ligne);
  padding:calc(env(safe-area-inset-top) + 8px) 16px 4px;
}
#traits{display:flex;gap:3px;max-width:560px;margin:0 auto}
#traits i{flex:1;height:3px;border-radius:2px;background:var(--ligne);transition:background .25s ease}
#traits i.plein{background:var(--champ)}
#traits i.actif{background:var(--champ-sombre)}
#traits i.saute{opacity:.35}
.barre-ligne{
  display:flex;align-items:center;gap:10px;
  max-width:560px;height:40px;margin:4px auto 0;
  font-size:12px;letter-spacing:.06em;
}
.retour{
  display:inline-flex;align-items:center;
  height:40px;padding:0 10px;margin-left:-10px;
  background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:13px;color:var(--argent);
  letter-spacing:.04em;white-space:nowrap;
}
.retour[hidden]{display:none}
.retour:active{color:var(--champ)}
#progressLabel{
  flex:1;color:var(--champ);font-weight:400;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.garde{
  display:flex;align-items:center;gap:6px;
  color:var(--muet);opacity:0;transition:opacity .3s ease,color .3s ease;
  white-space:nowrap;
}
.garde.visible{opacity:1}
.garde .point{width:6px;height:6px;border-radius:50%;background:var(--muet);transition:background .3s ease}
.garde.allume{color:var(--champ)}
.garde.allume .point{background:var(--champ)}

/* ---- Écrans : un seul à la fois, masqués par classe — jamais par hidden ---- */
form{max-width:560px;margin:0 auto}
.ecran{padding:6px 20px 12px}
.ecran:not(.actif){display:none}
.question{
  display:block;
  font-weight:500;font-size:20px;line-height:1.25;
  color:var(--texte);margin:4px 0 12px;
  outline:none;
}
.question.petite{
  font-family:'Cinzel',serif;font-weight:500;font-size:13px;
  letter-spacing:.18em;color:var(--champ);margin:6px 0 10px;
}
.aide{font-size:13.5px;color:var(--muet);font-style:italic;margin:-6px 0 10px}
.pied{font-size:13.5px;color:var(--argent);font-style:italic;margin-top:2px}
.q{margin-bottom:10px}
.lib{display:block;font-weight:500;font-size:15px;margin-bottom:5px}
.voile{display:none}
.rangee{display:flex;gap:6px}
.rangee .puces{flex:1 1 0}
.rangee .puces[data-multi]{flex:0 0 36%}

/* ---- En-tête (écran 1 seulement) ---- */
.hero{text-align:center;padding:2px 0 6px}
.wordmark{
  font-family:'Cinzel',serif;font-weight:600;
  font-size:22px;letter-spacing:.34em;text-indent:.34em;
  color:var(--champ);
}
.hero h1{
  font-family:'Cinzel',serif;font-weight:500;
  font-size:16px;letter-spacing:.14em;text-indent:.14em;
  color:var(--texte);margin-top:4px;
}
.hero .position{font-size:13px;color:var(--argent);margin-top:1px}
.hero .devise{
  font-style:italic;font-size:14px;color:var(--champ);
  margin:8px auto 0;max-width:34ch;line-height:1.4;
}
.hero .note{font-size:12.5px;color:var(--muet);margin:6px auto 0;line-height:1.4}
.retour-dossier{
  display:inline-block;margin-top:8px;
  font-size:13px;letter-spacing:.06em;color:var(--champ);
  text-decoration:none;border-bottom:1px solid var(--ligne-or);
  padding-bottom:2px;
}
.retour-dossier[hidden]{display:none}

/* ---- Champs ---- */
input[type=text],input[type=email],textarea,select{
  width:100%;
  background:var(--surface);
  border:1px solid var(--ligne);
  border-radius:2px;
  color:var(--texte);
  font-family:inherit;font-weight:400;
  font-size:16px;
  padding:12px 14px;min-height:48px;
  transition:border-color .15s ease;
  appearance:none;
}
textarea{resize:none;min-height:88px;line-height:1.5}
button,a.btn,.puces label,.echelle label,.accord{touch-action:manipulation}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--champ)}
.a-remplir{border-color:var(--champ)!important;background:rgba(194,167,109,.08)}
.puces.a-remplir{background:none}
.puces.a-remplir label{border-color:var(--champ)}
:focus-visible{outline:2px solid var(--champ);outline-offset:2px}
input::placeholder,textarea::placeholder{color:var(--muet);font-weight:300}
input[type=email]{text-transform:none}

.trio{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.mini label{
  display:block;font-size:12px;color:var(--champ-sombre);
  font-weight:500;letter-spacing:.08em;margin-bottom:5px;
}

/* ---- Puces (choix unique, ou multiple sur un groupe data-multi) ---- */
.puces{display:flex;flex-wrap:wrap;gap:8px}
.puces input{position:absolute;opacity:0;pointer-events:none}
.puces label{
  display:inline-flex;align-items:center;
  min-height:48px;padding:10px 16px;
  border:1px solid var(--ligne);border-radius:2px;
  background:var(--surface);
  font-size:15px;font-weight:400;color:var(--argent);
  cursor:pointer;line-height:1.2;
  transition:border-color .15s ease,background .15s ease,color .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.puces input:checked+label{
  background:var(--champ);border-color:var(--champ);
  color:#040404;font-weight:500;
}
.puces input:focus-visible+label{outline:2px solid var(--champ);outline-offset:2px}
.puces+.q,.puces+[id$="-zone"]{margin-top:10px}
.puces[data-multi]{gap:6px}
/* une colonne : une puce par ligne, le tap parle de lui */
.puces.colonne{flex-direction:column}
.puces.colonne label{width:100%}
/* grille : deux par ligne ; `trois` : trois par ligne, le reste s'étire */
.puces.grille{display:grid;grid-template-columns:1fr 1fr}
.puces.grille label{justify-content:center;text-align:center;padding:8px 10px;font-size:14.5px}
.puces.grille.trois{display:flex}
.puces.grille.trois label{flex:1 1 30%;padding:6px 8px;font-size:14px}
/* compactes : une ligne, à parts égales */
.puces.compactes{flex-wrap:nowrap;gap:6px}
.puces.compactes label{flex:1 1 0;min-width:0;justify-content:center;padding:6px 6px;font-size:14px;text-align:center}

/* Non / Oui sur une ligne, la question à gauche */
.ouinon{display:flex;align-items:center;gap:12px}
.ouinon .lib{flex:1;margin:0;font-size:14px;line-height:1.3}
.ouinon .puces{flex:0 0 124px}
.sante{margin-bottom:8px}
.sante [id$="-detail-zone"]{margin-top:6px}

/* ---- Échelle 1–10 : plaques ---- */
.echelle{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
.echelle input{position:absolute;opacity:0;pointer-events:none}
.echelle label{
  display:flex;align-items:center;justify-content:center;
  height:48px;
  border:1px solid var(--ligne);border-radius:2px;
  background:var(--surface);
  font-size:14px;font-weight:400;color:var(--muet);
  cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.echelle input:checked+label{background:var(--champ);border-color:var(--champ);color:#040404;font-weight:600}
.echelle input:focus-visible+label{outline:2px solid var(--champ);outline-offset:1px}
.bornes{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muet);margin-top:3px}

/* ---- Encart médical ---- */
.medical{
  border-left:2px solid var(--champ-sombre);
  padding:2px 0 2px 10px;
  font-size:12.5px;color:var(--argent);line-height:1.4;
  margin-top:6px;
}

/* ---- Navigation d'écran ---- */
.msg{font-size:14px;color:var(--champ);line-height:1.4}
.msg:not(:empty){margin:4px 0 8px}
.nav{display:flex;gap:10px;margin-top:6px}
.nav .btn{margin:0;flex:1}
.lien-forger{
  display:block;width:100%;margin-top:6px;
  background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:14px;color:var(--champ);
  letter-spacing:.04em;text-decoration:underline;text-underline-offset:4px;
  min-height:44px;
}

/* ---- La porte des précisions ---- */
.porte .question{font-family:'Cinzel',serif;font-weight:500;font-size:20px;letter-spacing:.06em;margin-top:24px}
.porte-texte{font-size:16px;color:var(--texte);line-height:1.5;margin:0 0 12px;max-width:36ch}
.porte-suite{font-size:13.5px;color:var(--muet);line-height:1.5;margin:0 0 22px;max-width:40ch}
.porte-boutons{display:flex;flex-direction:column;gap:12px}
.porte-boutons .btn{margin:0}

/* ---- Boutons ---- */
.btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:52px;
  border-radius:2px;border:1px solid var(--champ);
  font-family:inherit;font-size:16px;font-weight:500;
  letter-spacing:.03em;cursor:pointer;
  margin-bottom:12px;
  transition:filter .15s ease,background .15s ease;
  -webkit-tap-highlight-color:transparent;
}
a.btn{text-decoration:none;-webkit-tap-highlight-color:transparent}
.btn:active{filter:brightness(.92)}
.btn.principal{background:var(--champ);color:#040404}
.btn.secondaire{background:transparent;color:var(--champ)}
.btn svg{flex:0 0 auto}

/* ---- Factions : trois cartes, les vraies couleurs, l'or reste le héros ---- */
.puces.factions{flex-direction:column}
.puces.factions label{
  width:100%;flex-direction:column;align-items:flex-start;
  gap:3px;padding:12px 16px 11px;line-height:1.25;
}
.puces.factions label .nom{
  font-family:'Cinzel',serif;font-weight:600;font-size:14px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--texte);
  display:flex;align-items:center;gap:8px;
}
.puces.factions label .nom::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:var(--faction,var(--champ));box-shadow:0 0 0 2px rgba(255,255,255,.06);
}
.puces.factions label[data-faction="SPARTANS"]{--faction:#D63B3B}
.puces.factions label[data-faction="VENOM"]{--faction:#4A90D9}
.puces.factions label[data-faction="ECHO"]{--faction:#8B5CD9}
.puces.factions label small{font-size:12px;color:var(--muet);letter-spacing:.04em}
.puces.factions input:checked+label{background:var(--surface);border-color:var(--champ);color:var(--texte)}
.puces.factions input:checked+label .nom{color:var(--champ)}
.puces.factions input:checked+label small{color:var(--argent)}

/* ---- Le sceau : bloc légal, puis le serment, dernier tap avant « Forger » ---- */
.consent{
  border:1px solid var(--ligne);border-radius:2px;
  padding:12px 14px 10px;margin:0 0 10px;
  transition:border-color .15s ease,background .15s ease;
}
.consent .q{margin-bottom:10px}
.consent .accord{display:flex;gap:12px;align-items:flex-start;cursor:pointer;min-height:48px}
.consent .accord span{font-size:12.5px;line-height:1.45;color:var(--argent);font-weight:300}
.consent .accord a{color:var(--champ);text-decoration:none;border-bottom:1px solid var(--ligne-or)}
.consent.a-remplir{border-color:var(--champ);background:rgba(194,167,109,.08)}
.sceau{
  border:1px solid var(--champ);border-radius:2px;
  background:linear-gradient(180deg,rgba(194,167,109,.07),rgba(194,167,109,.02));
  padding:12px 14px 8px;
  margin:0 0 12px;
}
.sceau .serment{font-style:italic;font-size:14.5px;color:var(--texte);line-height:1.5}
.sceau .accord{display:flex;gap:12px;align-items:center;margin-top:6px;cursor:pointer;min-height:48px}
.sceau .accord span{font-size:16px;font-weight:500}
.accord input[type=checkbox]{
  appearance:none;flex:0 0 auto;
  width:24px;height:24px;margin-top:1px;
  border:1px solid var(--champ-sombre);border-radius:2px;
  background:var(--surface);
  display:grid;place-content:center;
  cursor:pointer;
}
.sceau .accord input[type=checkbox]{width:28px;height:28px;margin-top:0}
.accord input[type=checkbox]:checked{background:var(--champ);border-color:var(--champ)}
.accord input[type=checkbox]:checked::before{
  content:"";width:12px;height:7px;
  border-left:2.5px solid #040404;border-bottom:2.5px solid #040404;
  transform:rotate(-45deg) translate(1px,-1px);
}

/* ---- Envoi ---- */
.envoi{text-align:center}
#msgEnvoi{min-height:22px;font-size:14px;color:var(--champ);margin-top:2px;transition:opacity .2s ease}
.cloture{
  margin:34px auto 0;max-width:36ch;
  font-style:italic;font-size:15px;color:var(--champ-sombre);
  line-height:1.65;
}
.forge{
  font-family:'Cinzel',serif;font-weight:600;
  font-size:12px;letter-spacing:.42em;text-indent:.42em;
  color:var(--champ);margin-top:18px;
}
.confid{font-size:12px;color:var(--muet);margin-top:26px}
.confid a{color:var(--muet)}
#effacer{
  display:inline-block;margin-top:14px;min-height:44px;
  background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:12px;color:var(--muet);
  text-decoration:underline;text-underline-offset:3px;
}

/* Piège à robots : hors écran, jamais visible */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Bouton Forger : le CTA principal, avec état d'envoi */
.btn.principal svg{flex:0 0 auto}
.btn.principal:disabled,.btn.principal.en-cours{
  cursor:progress;filter:none;opacity:.85;
  background:linear-gradient(90deg,var(--champ) 0%,#D9C08A 50%,var(--champ) 100%);
  background-size:200% 100%;animation:forge-scan 1.4s linear infinite;
}
@keyframes forge-scan{from{background-position:200% 0}to{background-position:-200% 0}}

/* Séparateur « ou » entre la forge et les canaux coach */
.ou{
  display:flex;align-items:center;gap:14px;
  margin:26px 0 16px;color:var(--muet);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
}
.ou::before,.ou::after{content:"";flex:1;height:1px;background:var(--ligne)}
.btn.tertiaire{background:transparent;border-color:var(--ligne);color:var(--argent);font-weight:400}

/* ---------- Le secours, après un échec d'envoi ----------
   Discret, et visuellement SOUS le bouton principal : c'est un dernier
   recours, pas une alternative. Le 01/10, il était au même rang et un client
   l'a pris pour la porte normale — son bilan n'est jamais entré. */
.secours{margin-top:26px;padding-top:20px;border-top:1px solid #15171A}
.secours-note{margin:8px 0 14px;font-size:12.5px;color:#8A8F94;line-height:1.5;text-align:center}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  .btn.principal.en-cours{animation:none}
}
@media (min-width:480px){
  .ecran{padding:14px 24px 28px}
  .question{font-size:24px}
  .hero{padding-top:14px}
  .wordmark{font-size:30px}
  .hero h1{font-size:20px;margin-top:10px}
}