/* LE PACTE HERO — auto-évaluation.
   Jetons repris tels quels de hth-seance/app/static/styles.css : la famille
   visuelle doit être la même que le générateur de PDF et le calculateur de devis. */

:root{
  --jaune:#FFD100;
  --jaune-vif:#FFDE33;
  --jaune-fonce:#E0A500;
  --jaune-soft:#FFF6D6;
  --noir:#1a1a1a;
  --texte:#1a1a1a;
  --texte-doux:#6b6a64;
  --bordure:#e4e2da;
  --fond:#faf9f5;
  --blanc:#fff;
  --radius:12px;

  /* Les trois couleurs des curseurs. Volontairement sobres : c'est un réglage,
     pas un classement, le document est explicite là-dessus. */
  --vert:#4a7c59;
  --vert-fond:#eef4ef;
  --jaune-curseur:#b08800;
  --jaune-curseur-fond:#fdf6e0;
  --rouge:#a4453a;
  --rouge-fond:#f8eeec;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Rubik','Helvetica Neue',Helvetica,Arial,sans-serif;
  background:var(--fond);color:var(--texte);
  font-size:15px;line-height:1.5;
  -webkit-text-size-adjust:100%;
}

/* ---------------- topbar ---------------- */
.topbar{
  display:flex;align-items:center;gap:14px;
  padding:12px 18px;background:var(--blanc);
  border-bottom:1px solid var(--bordure);
  position:sticky;top:0;z-index:20;
}
.wordmark{font-weight:800;letter-spacing:.5px;font-size:13px;white-space:nowrap}
.wordmark b{background:var(--jaune);padding:2px 6px;border-radius:4px}
.topbar-title{font-weight:600;color:var(--texte-doux);font-size:13px;white-space:nowrap}
.topbar-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.topbar-actions .btn-ghost{white-space:nowrap}

/* Sous 560px la barre n'a pas la place de tout tenir : le sous-titre saute en
   premier, il est redit par le titre de chaque écran. */
@media (max-width:560px){
  .topbar{gap:10px;padding:11px 14px}
  .topbar-title{display:none}
}

/* ---------------- coquille ---------------- */
.coquille{max-width:600px;margin:0 auto;padding:22px 18px 60px}
.vue{display:none}
.vue.active{display:block;animation:apparait .18s ease}
@keyframes apparait{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

h1{font-size:25px;line-height:1.2;margin:0 0 12px;font-weight:800;letter-spacing:-.2px}
h2{font-size:18px;margin:0 0 10px;font-weight:700}
p{margin:0 0 14px}
.doux{color:var(--texte-doux)}
.petit{font-size:13px}
.mini{font-size:12px;color:var(--texte-doux)}

.carte{
  background:var(--blanc);border:1px solid var(--bordure);
  border-radius:var(--radius);padding:18px;margin-bottom:14px;
}
.carte.accent{border-color:var(--jaune-fonce);box-shadow:0 0 0 3px var(--jaune-soft)}

.etiquette{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--texte-doux);margin-bottom:7px;
}

/* ---------------- champs ---------------- */
input[type=text],input[type=email],input[type=number]{
  width:100%;padding:11px 12px;border:1px solid var(--bordure);
  border-radius:8px;font-size:16px; /* 16px : évite le zoom auto sur iOS */
  font-family:inherit;background:var(--fond);color:var(--texte);
}
input:focus{outline:2px solid var(--jaune-soft);border-color:var(--jaune-fonce)}
input.code{
  text-align:center;font-size:30px;font-weight:700;letter-spacing:11px;
  padding:14px 12px 14px 23px;
}
.duo-champ{display:flex;gap:10px;align-items:center}
.duo-champ input{flex:1}
.suffixe{color:var(--texte-doux);font-size:14px;white-space:nowrap}

/* ---------------- boutons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--jaune-fonce);background:var(--jaune);color:var(--noir);
  border-radius:8px;padding:12px 20px;font-size:15px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:background .12s ease;
}
.btn:hover:not(:disabled){background:var(--jaune-vif)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.pleine{width:100%}
.btn-ghost{
  border:1px solid var(--bordure);background:var(--blanc);border-radius:8px;
  padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer;
  color:var(--texte-doux);font-family:inherit;
}
.btn-ghost:hover{border-color:var(--jaune-fonce);color:var(--noir)}
.btn-ghost.sm{padding:5px 11px;font-size:12px}
.btn-lien{
  background:none;border:none;color:var(--texte-doux);font-family:inherit;
  font-size:13px;cursor:pointer;text-decoration:underline;padding:4px;
}
.btn-lien:hover{color:var(--noir)}
.barre-actions{display:flex;gap:10px;align-items:center;margin-top:16px}
.barre-actions .btn{flex:1}

/* ---------------- choix oui/non ---------------- */
.choix{display:flex;gap:8px}
.choix button{
  flex:1;border:1px solid var(--bordure);background:var(--blanc);
  border-radius:8px;padding:10px;font-size:14px;font-weight:600;
  cursor:pointer;font-family:inherit;color:var(--texte);
}
.choix button:hover{border-color:var(--jaune-fonce)}
.choix button[aria-pressed="true"]{background:var(--jaune);border-color:var(--jaune-fonce)}

/* ---------------- progression ---------------- */
.etapes{display:flex;gap:5px;margin-bottom:18px}
.etapes i{flex:1;height:4px;border-radius:2px;background:var(--bordure)}
.etapes i.faite{background:var(--jaune-fonce)}
.etapes i.courante{background:var(--jaune)}
.numero-etape{font-size:12px;font-weight:700;color:var(--texte-doux);
  letter-spacing:.5px;text-transform:uppercase;margin-bottom:6px}

/* ---------------- chrono ---------------- */
.chrono{
  text-align:center;padding:18px 0 6px;
}
.chrono-valeur{
  font-size:60px;font-weight:800;letter-spacing:-2px;line-height:1;
  font-variant-numeric:tabular-nums;
}
.chrono.actif .chrono-valeur{color:var(--jaune-fonce)}
.chrono-etat{font-size:13px;color:var(--texte-doux);margin-top:6px;min-height:20px}

.compteur{
  width:100%;border:2px dashed var(--bordure);background:var(--blanc);
  border-radius:var(--radius);padding:20px;text-align:center;cursor:pointer;
  font-family:inherit;margin-top:12px;
}
.compteur:hover{border-color:var(--jaune-fonce)}
.compteur:active{background:var(--jaune-soft)}
.compteur .n{font-size:42px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.compteur .quoi{font-size:12px;color:var(--texte-doux);margin-top:4px}

/* ---------------- fiche de résultat ---------------- */
.curseurs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
@media (max-width:420px){.curseurs{grid-template-columns:1fr}}
.curseur{
  border:1px solid var(--bordure);border-radius:var(--radius);
  padding:16px;background:var(--blanc);
}
.curseur .quoi{font-size:10.5px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--texte-doux)}
.curseur .valeur{font-size:26px;font-weight:800;margin:6px 0 2px}
.curseur .sous{font-size:12.5px;color:var(--texte-doux)}
.curseur.vert{background:var(--vert-fond);border-color:var(--vert)}
.curseur.vert .valeur{color:var(--vert)}
.curseur.jaune{background:var(--jaune-curseur-fond);border-color:var(--jaune-fonce)}
.curseur.jaune .valeur{color:var(--jaune-curseur)}
.curseur.rouge{background:var(--rouge-fond);border-color:var(--rouge)}
.curseur.rouge .valeur{color:var(--rouge)}

/* Un 🟢 imposé est une règle du bloc 1, pas une erreur : filet noir sur fond
   blanc. Le rouge dirait « tu as un problème », ce n'est pas le message. */
.contrainte{
  border:1px solid var(--bordure);border-left:3px solid var(--noir);
  background:var(--blanc);
  border-radius:0 8px 8px 0;padding:12px 14px;margin-bottom:10px;
}
.contrainte .pattern{font-weight:700;font-size:13px;margin-bottom:3px}
.contrainte .consigne{font-size:13.5px}

table.detail{width:100%;border-collapse:collapse;font-size:13.5px}
table.detail td{padding:9px 0;border-bottom:1px solid var(--bordure);vertical-align:top}
table.detail tr:last-child td{border-bottom:none}
table.detail td.v{text-align:right;white-space:nowrap;font-weight:600}
table.detail td .role{display:block;font-size:11px;color:var(--texte-doux);font-weight:400}

.pastille{
  display:inline-block;padding:2px 9px;border-radius:999px;
  font-size:11.5px;font-weight:700;
}
.pastille.vert{background:var(--vert-fond);color:var(--vert)}
.pastille.jaune{background:var(--jaune-curseur-fond);color:var(--jaune-curseur)}
.pastille.rouge{background:var(--rouge-fond);color:var(--rouge)}

.rappel{
  background:var(--jaune-soft);border:1px solid var(--jaune-fonce);
  border-radius:var(--radius);padding:14px 16px;margin-bottom:14px;font-size:14px;
}
.rappel b{display:block;margin-bottom:3px}

/* ---------------- appareils ---------------- */
.appareil{
  display:flex;align-items:center;gap:12px;padding:12px 0;
  border-bottom:1px solid var(--bordure);
}
.appareil:last-child{border-bottom:none}
.appareil .infos{flex:1;min-width:0}
.appareil .nom{font-weight:600;font-size:14px}

/* ---------------- messages ---------------- */
.message{
  border-radius:8px;padding:11px 14px;margin-bottom:14px;font-size:13.5px;
  border:1px solid var(--rouge);background:var(--rouge-fond);color:var(--rouge);
}
.message.ok{border-color:var(--vert);background:var(--vert-fond);color:var(--vert)}
.message[hidden]{display:none}

.liste-propre{margin:0 0 14px;padding-left:20px}
.liste-propre li{margin-bottom:7px}

.pied{margin-top:26px;padding-top:16px;border-top:1px solid var(--bordure);
  font-size:12px;color:var(--texte-doux);display:flex;flex-wrap:wrap;gap:14px}

/* ================= page coach ================= */
/* Une seule feuille de style pour les deux pages : la famille visuelle reste
   la même, et il n'y a qu'un endroit où changer une couleur. */

.coquille.large{max-width:1100px}

.entete-cohorte{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  justify-content:space-between;margin-bottom:16px;
}

.compteurs{display:flex;flex-wrap:wrap;gap:10px}
.compteur-tuile{
  background:var(--blanc);border:1px solid var(--bordure);border-radius:var(--radius);
  padding:12px 16px;min-width:120px;
}
.compteur-tuile .n{font-size:24px;font-weight:800;line-height:1.1}
.compteur-tuile .quoi{
  font-size:10.5px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--texte-doux);margin-top:2px;
}

table.cohorte{width:100%;border-collapse:collapse;font-size:13.5px}
table.cohorte th{
  text-align:left;padding:11px 14px;border-bottom:1px solid var(--bordure);
  font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--texte-doux);white-space:nowrap;background:var(--fond);
}
table.cohorte td{padding:11px 14px;border-bottom:1px solid var(--bordure);vertical-align:middle}
table.cohorte tr:last-child td{border-bottom:none}
table.cohorte tr.cliquable:hover{background:var(--jaune-soft);cursor:pointer}
table.cohorte .nom{font-weight:600}
table.cohorte .mail{font-size:12px;color:var(--texte-doux)}
table.cohorte td.actions{text-align:right;white-space:nowrap}
.vide-cellule{color:var(--texte-doux)}

.grille-champs{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.grille-champs label{display:block;font-size:12.5px;font-weight:600}
.grille-champs label input,
.grille-champs label select{margin-top:6px}
.grille-champs label em{
  display:block;font-style:normal;font-size:11px;
  color:var(--texte-doux);margin-top:4px;font-weight:400;
}
.grille-champs select{
  width:100%;padding:11px 12px;border:1px solid var(--bordure);
  border-radius:8px;font-size:16px;font-family:inherit;
  background:var(--fond);color:var(--texte);
}

.question-admin{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  justify-content:space-between;padding:10px 0;
  border-bottom:1px solid var(--bordure);
}
.question-admin:last-child{border-bottom:none}
.question-admin .intitule{flex:1;min-width:240px;font-size:13.5px}
.question-admin .choix{flex:0 0 auto;width:180px}