/* Page candidat : composants du déroulé (accueil, étape, bandeau, fins). Complète theme.css.
   Charte Altyor : angles droits, aucune ombre, filets d'encre de 1 px, boutons corail à texte encre. */

/* ---------- Accueil ---------- */
.hero { margin: var(--sp-5) 0 var(--sp-6); }
.hero h1 { font-size: var(--fs-h2); margin-bottom: var(--sp-2); }
.hero .sub { color: var(--fg-2); font-size: var(--fs-body-lg); margin: 0; }
.card { margin-bottom: var(--sp-5); }
.card h2 { font-size: var(--fs-h4); }
.card p { margin: 0 0 var(--sp-3); max-width: 72ch; }
.card ul { margin: 0 0 var(--sp-3); max-width: 72ch; }
.card li { margin-bottom: var(--sp-2); }
mark.todo { background: var(--sev-medium-bg); color: var(--sev-medium-fg); padding: 0 .25em; }
.field { margin: var(--sp-5) 0 var(--sp-4); max-width: 22rem; }
.field label { display: block; font-weight: var(--w-semibold); margin-bottom: var(--sp-2); }
.field input { font-family: var(--font-mono); font-size: var(--fs-body-lg); letter-spacing: .08em; text-transform: uppercase; }
.field input::placeholder { color: var(--warm-gray); }
.check { display: flex; align-items: flex-start; gap: var(--sp-3); cursor: pointer; margin: var(--sp-3) 0; }
.check input { width: 18px; height: 18px; margin: 3px 0 0; flex: none; }
.actions { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-5); }
.actions .note { margin: 0; }
.loading { color: var(--fg-2); padding: var(--sp-7) 0; }

/* Bouton armé : le second clic confirme. Encre pleine, pour le distinguer du corail. */
.btn.warn { background: var(--ink); color: var(--white); }
.btn.warn:hover { background: var(--gray-700); }

/* ---------- Bandeau ---------- */
#hdr { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-4); flex-wrap: wrap; }
#hdr .who { color: var(--fg-1); font-weight: var(--w-semibold); }
.t { font-family: var(--font-mono); color: var(--fg-1); font-variant-numeric: tabular-nums; }
.t.over { color: var(--sev-high-fg); }
.alert { background: var(--sev-high-bg); color: var(--sev-high-fg); border: 1px solid var(--sev-high-bd); padding: 2px var(--sp-2); font-weight: var(--w-semibold); }
.alert[hidden] { display: none; }
.hdr-prog { position: absolute; left: 0; bottom: -1px; width: 100%; height: 3px; display: block; appearance: none; -webkit-appearance: none; border: 0; background: var(--cream-100); color: var(--brand-coral); }
.hdr-prog::-webkit-progress-bar { background: var(--cream-100); }
.hdr-prog::-webkit-progress-value { background: var(--brand-coral); }
.hdr-prog::-moz-progress-bar { background: var(--brand-coral); }

/* ---------- Étape ---------- */
.step > .eyebrow { margin: var(--sp-2) 0 var(--sp-2); }
.ex-mark { display: flex; align-items: baseline; gap: var(--sp-3); margin: 0 0 var(--sp-5); }
.ex-title { font-family: var(--font-display); font-size: var(--fs-h4); line-height: var(--lh-snug); }
.step-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-4); flex-wrap: wrap; border-bottom: 1px solid var(--ink); padding-bottom: var(--sp-3); margin-bottom: var(--sp-5); }
.step-head h1 { font-size: var(--fs-h3); margin: 0; }
.step-head h1:focus { outline: none; }
.context { line-height: var(--lh-loose); max-width: 72ch; margin-bottom: var(--sp-6); }
.context p, .context ul, .context ol, .context pre { margin: 0 0 var(--sp-3); }

.q { border-top: 1px solid var(--border-default); padding-top: var(--sp-5); margin-top: var(--sp-5); }
.ql { display: block; font-weight: var(--w-semibold); margin-bottom: var(--sp-3); max-width: 72ch; }
.q textarea { resize: vertical; line-height: var(--lh-normal); }
.q .check { margin: 0; font-weight: var(--w-semibold); }
.qfoot { display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-3); font-size: var(--fs-body-sm); color: var(--fg-2); }

/* Choix et niveaux de confiance : boutons bascule à filet d'encre, sélection en encre pleine. */
.seg { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.seg button { font: inherit; font-size: var(--fs-body-sm); background: var(--white); color: var(--fg-1); border: 1px solid var(--ink); border-radius: var(--r-none); padding: var(--sp-1) var(--sp-3); cursor: pointer; transition: background var(--dur-fast) var(--ease-standard); }
.seg button:hover { background: var(--cream-100); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.seg button:focus-visible { outline: 2px solid var(--brand-coral); outline-offset: 2px; }

/* Démarche : bloc facultatif, sur crème, en tête de la première étape d'un exercice. */
.demarche { background: var(--cream-100); padding: var(--sp-5); margin-bottom: var(--sp-5); }
.demarche-h { font-size: var(--fs-eyebrow); font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--brand-coral-dark); margin: 0 0 var(--sp-2); }
.demarche-s { font-size: var(--fs-body-sm); color: var(--fg-2); margin: 0; max-width: 72ch; }
.demarche .q { border-top-color: var(--border-default); }

/* Photos du schéma */
.photos { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; margin-top: var(--sp-3); }
.ph { position: relative; margin: 0; }
.ph img, .ph-none { display: block; height: 96px; border: 1px solid var(--ink); }
.ph img { width: auto; }
.ph-none { width: 96px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-caption); background: var(--cream-50); }
.ph button { position: absolute; top: 0; right: 0; font: inherit; font-size: var(--fs-caption); background: var(--ink); color: var(--white); border: 0; border-radius: var(--r-none); padding: 2px var(--sp-2); cursor: pointer; }
.ph button:focus-visible { outline: 2px solid var(--brand-coral); outline-offset: 2px; }
.upl { position: relative; display: inline-flex; align-items: center; font-size: var(--fs-body-sm); font-weight: var(--w-semibold); border: 1px dashed var(--ink); padding: var(--sp-2) var(--sp-3); background: var(--white); cursor: pointer; }
.upl:hover { background: var(--cream-50); }
.upl:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.upl input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.upl.busy { color: var(--fg-2); cursor: progress; }
.photos .note { flex-basis: 100%; margin: 0; }

/* ---------- Fins : merci et temps écoulé ---------- */
.end { padding-top: var(--sp-7); max-width: 40rem; }
.end h1 { font-size: var(--fs-h2); }
.end h1:focus { outline: none; }
.end p { margin: 0 0 var(--sp-3); }

@media (max-width: 600px) {
  .header { flex-wrap: wrap; gap: var(--sp-2); }
  #hdr { justify-content: flex-start; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-caption); }
  .hero h1, .end h1 { font-size: var(--fs-h3); }
  .step-head h1 { font-size: var(--fs-h4); }
}
@media (prefers-reduced-motion: reduce) { .seg button { transition: none; } }