/* Site évaluateur. Complète theme.css (jetons Altyor) : angles droits, aucune ombre, filets d'encre de 1 px.
   Mesures du serveur sur fond plein ; valeurs déclarées par le navigateur en pointillés (classe .declared). */

.wrap.wide { max-width: 1200px; }
.hdr { display: flex; align-items: center; gap: var(--sp-3); }
.btn.small { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-body-sm); }
.mono { font-family: var(--font-mono); font-size: var(--fs-body-sm); }
.grow { flex: 1; }
.loading { padding: var(--sp-7) 0; text-align: center; }
.empty-state { text-align: center; padding: var(--sp-7) var(--sp-5); border: 1px dashed var(--warm-gray); background: var(--white); }
button.link { font: inherit; color: var(--fg-1); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; font-weight: var(--w-semibold); border-bottom: 1px solid var(--brand-coral); }
button.link:hover { color: var(--brand-coral-dark); }
button.link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- Connexion ---------- */
.login-panel { max-width: 460px; margin: var(--sp-7) auto 0; border-top: 1px solid var(--ink); }
.login-panel h1 { font-size: var(--fs-h4); margin-top: var(--sp-2); }
form.login { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
.field { display: grid; gap: var(--sp-1); }
.field label { font-weight: var(--w-semibold); font-size: var(--fs-body-sm); }
.field .muted { margin: 0; }
form.login .note:empty { display: none; }
form.login .btn { justify-self: start; }

/* ---------- Liste des tests reçus ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); border-bottom: 1px solid var(--ink); padding-bottom: var(--sp-3); }
.page-head h1 { margin: var(--sp-1) 0 0; font-size: var(--fs-h3); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--white); }
table.list th { text-align: left; font-size: var(--fs-eyebrow); font-weight: var(--w-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--fg-2); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--ink); }
table.list td { padding: var(--sp-3); border-bottom: 1px solid var(--border-default); vertical-align: top; }
table.list tbody tr:hover { background: var(--cream-50); }
.status { font-size: var(--fs-caption); font-weight: var(--w-semibold); padding: 2px var(--sp-2); border: 1px solid var(--ink); }
.status.expired { border-style: dashed; color: var(--fg-2); }
.sev-row { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.flash-msg { background: var(--cream-100); border-left: 3px solid var(--ink); padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-4); font-weight: var(--w-semibold); }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); font-size: var(--fs-body-sm); }
.filter-row label { font-weight: var(--w-semibold); }
.filter-row select { width: auto; padding: var(--sp-1) var(--sp-2); }
.decision-cell { display: grid; gap: 2px; }
.dec { display: inline-block; justify-self: start; font-size: var(--fs-caption); font-weight: var(--w-semibold); padding: 1px var(--sp-2); border: 1px solid var(--ink); background: var(--white); }
.dec-retenu { background: var(--ink); color: var(--white); }
.dec-ecarte { background: var(--gray-100); color: var(--fg-2); border-color: var(--warm-gray); }
.dec-a_trier { border-style: dashed; }
.dec-who { font-size: var(--fs-caption); }

/* Générer un code */
.gen { background: var(--cream-50); }
.gen-form { display: grid; gap: var(--sp-3); }
.gen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3) var(--sp-4); }
.gen-form .note:empty { display: none; }
.code-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin: var(--sp-3) 0; }
.code-big { margin: 0; font-family: var(--font-mono); font-size: var(--fs-h3); font-weight: var(--w-bold); letter-spacing: 0.06em; padding: var(--sp-2) var(--sp-4); background: var(--white); border: 1px solid var(--ink); user-select: all; }
.gen-reminder { padding: var(--sp-3); border-left: 3px solid var(--brand-coral); background: var(--white); }

/* Codes en attente */
.pending { margin-top: var(--sp-7); border-top: 1px solid var(--ink); padding-top: var(--sp-3); }
.pending h2 { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.status.inv-unused { background: var(--white); }
.status.inv-expired { border-style: dashed; color: var(--fg-2); }
.status.inv-disabled { background: var(--gray-100); color: var(--fg-2); border-color: var(--warm-gray); }
td.right { text-align: right; }
.confirm-row { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--sp-2); }
.confirm-row .note:empty { display: none; }

/* Action dangereuse : sobre, filet corail foncé, pas de couleur criarde. */
.btn.danger { background: var(--white); color: var(--sev-high-fg); border: 1px solid var(--sev-high-fg); }
.btn.danger:hover { background: var(--sev-high-bg); }
.btn.danger:disabled, .btn.danger:disabled:hover { background: var(--gray-100); color: var(--fg-2); border-color: var(--gray-300); }

/* ---------- Fiche ---------- */
.cover { background: var(--cream-200); padding: var(--sp-5); border-top: 1px solid var(--ink); margin-bottom: var(--sp-4); }
.cover h1 { margin: var(--sp-1) 0; font-size: var(--fs-h3); }
.cover .subtitle { margin: 0; color: var(--fg-2); }
.cover .meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border-default); font-size: var(--fs-body-sm); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.save-state { font-size: var(--fs-body-sm); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--ink); border: 1px solid var(--ink); margin-bottom: var(--sp-5); }
.kpi { background: var(--white); padding: var(--sp-3) var(--sp-4); }
.kpi.total { background: var(--cream-100); }
.kpi .l { font-size: var(--fs-eyebrow); font-weight: var(--w-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--fg-2); }
.kpi .v { font-family: var(--font-display); font-size: var(--fs-h4); margin-top: 2px; }
.kpi .s { font-size: var(--fs-caption); color: var(--fg-2); }
.kpi.off { background: var(--gray-50); }
.kpi.off .v { color: var(--fg-2); font-size: var(--fs-body); }

.block, .synth { background: var(--white); border: 1px solid var(--ink); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-4); }
.block h2, .synth h2 { font-size: var(--fs-body-lg); margin-bottom: var(--sp-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.synth p { margin: var(--sp-1) 0; }
.tone-ok { font-weight: var(--w-semibold); }
.tone-alert { font-weight: var(--w-bold); color: var(--sev-high-fg); }
.tone-neutral { font-weight: var(--w-semibold); color: var(--fg-2); }
.ok { font-weight: var(--w-semibold); }
.k { font-weight: var(--w-semibold); margin: var(--sp-3) 0 var(--sp-1); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-4); }
.grid-3 .block { margin-bottom: 0; }
.anti { margin-bottom: var(--sp-4); }
dl.facts { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-4); margin: 0; font-size: var(--fs-body-sm); }
dl.facts dt { color: var(--fg-2); }
dl.facts dd { margin: 0; font-weight: var(--w-semibold); }
ul.plain { list-style: none; padding: 0; margin: var(--sp-2) 0; font-size: var(--fs-body-sm); }
ul.plain li { padding: var(--sp-1) 0; border-bottom: 1px solid var(--border-subtle); }

/* Provenance : serveur sur fond plein, navigateur en pointillés avec la mention « déclaré » (theme.css). */
.src { display: inline-block; font-family: var(--font-body); font-size: var(--fs-caption); font-weight: var(--w-semibold); letter-spacing: 0; padding: 1px var(--sp-2); line-height: 1.4; vertical-align: middle; }
.src.server { background: var(--ink); color: var(--white); border: 1px solid var(--ink); }
.src.declared { background: var(--white); color: var(--fg-2); }

ol.signals { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
li.signal { border-left: 3px solid var(--warm-gray); padding: var(--sp-2) var(--sp-3); background: var(--cream-50); }
li.signal.high { border-left-color: var(--sev-high-bd); }
li.signal.medium { border-left-color: var(--sev-medium-bd); }
li.signal p { margin: var(--sp-1) 0; }
.signal-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.signal-head strong { font-size: var(--fs-body); }
li.signal p.check { font-size: var(--fs-body-sm); }
.sid { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--fg-2); }

.warnbox { background: var(--white); color: var(--fg-1); border: 1px solid var(--ink); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-4); font-size: var(--fs-body-sm); line-height: var(--lh-loose); }
.warnbox h2 { font-size: var(--fs-body-lg); margin-bottom: var(--sp-3); }
.guide { border: 1px solid var(--border-default); background: var(--cream-50); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); font-size: var(--fs-body-sm); }
.guide summary { cursor: pointer; }
.guide h3 { font-size: var(--fs-body); margin: var(--sp-3) 0 var(--sp-1); }
table.mini td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-body-sm); }
table.mini td.right { text-align: right; font-weight: var(--w-semibold); white-space: nowrap; }

/* ---------- Sections et étapes ---------- */
.section { margin-top: var(--sp-6); }
.section-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3); border-bottom: 1px solid var(--ink); padding-bottom: var(--sp-2); }
.section-header h2 { margin: 0; font-size: var(--fs-h4); }
.section-body { padding-top: var(--sp-2); }
.sub { font-size: var(--fs-eyebrow); font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--fg-2); margin: 0 0 var(--sp-2); }
.qid { font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: var(--w-semibold); color: var(--fg-1); background: var(--cream-100); border: 1px solid var(--ink); padding: 0 var(--sp-1); margin-right: var(--sp-2); white-space: nowrap; }

/* Bandeau d'étape : nom, mesures de l'étape, énoncé, démarche. */
.step-head { margin: var(--sp-6) 0 var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-4); background: var(--cream-100); border-top: 2px solid var(--brand-coral); }
.section-body > .step-head:first-child { margin-top: var(--sp-4); }
.st-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); }
.st-name h3 { margin: 0; font-size: var(--fs-body-lg); }
.step-head > .measures { margin-top: var(--sp-3); }
.step-head .mtable th { width: 40%; }
.enonce { margin-top: var(--sp-3); }
.enonce summary, .relect summary, .howto summary { cursor: pointer; font-size: var(--fs-eyebrow); font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.enonce summary { color: var(--brand-coral-dark); }
.enonce-body { font-size: var(--fs-body-sm); margin-top: var(--sp-2); padding: var(--sp-3); background: var(--white); border-left: 1px solid var(--ink); }
.dem-panel { margin-top: var(--sp-3); padding: var(--sp-3); background: var(--white); border: 1px solid var(--ink); }
.dem-title { font-family: var(--font-display); font-size: var(--fs-body); font-weight: var(--w-semibold); margin: 0 0 var(--sp-2); }
.dem-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--sp-4); }
.dem-grid.solo { grid-template-columns: 1fr; }
.dem-grid > .relect { align-self: start; }
.dem-field + .dem-field { margin-top: var(--sp-3); }
.dem-panel > .muted { margin: var(--sp-3) 0 0; }

/* Mesures : serveur sur fond plein, navigateur en pointillés. */
.measures { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-4); align-items: start; }
.mbox { padding: var(--sp-3); font-size: var(--fs-body-sm); min-width: 0; }
.mbox.srv { background: var(--cream-50); border: 1px solid var(--ink); border-top-width: 3px; }
.mbox.nav { background: var(--white); border: 1px dashed var(--fg-2); }
.mbox-title { margin: 0; font-weight: var(--w-bold); font-size: var(--fs-body-sm); }
.mbox-sub { margin: 0 0 var(--sp-3); color: var(--fg-2); font-size: var(--fs-body-sm); }
.mbox-lead { margin: 0 0 var(--sp-2); padding: var(--sp-1) var(--sp-2); background: var(--gray-50); }
.mbox-lead.tone-bad { background: var(--sev-high-bg); color: var(--sev-high-fg); font-weight: var(--w-regular); }
.mbox-lead.tone-mid { background: var(--sev-medium-bg); color: var(--sev-medium-fg); }
.mbox > .muted { margin: 0; }
table.mtable { background: transparent; }
.mtable th, .mtable td { padding: var(--sp-2) 0; line-height: var(--lh-normal); border-bottom: 1px solid var(--border-subtle); vertical-align: top; text-align: left; font-size: var(--fs-body-sm); }
.mtable th { font-weight: var(--w-regular); color: var(--fg-2); padding-right: var(--sp-3); width: 55%; }
.mtable td { font-weight: var(--w-semibold); }
.mtable tr:last-child th, .mtable tr:last-child td { border-bottom: 0; }
.mtable tr.warn th, .mtable tr.warn td { color: var(--sev-high-fg); }
.howto { margin-top: var(--sp-2); color: var(--fg-2); }
.howto summary { color: var(--fg-2); font-weight: var(--w-semibold); }
.howto dl { margin: var(--sp-2) 0 0; font-size: var(--fs-body-sm); line-height: var(--lh-normal); }
.howto dt { font-weight: var(--w-semibold); color: var(--fg-1); margin-top: var(--sp-2); }
.howto dd { margin: 0; }

/* Carte d'une question : en-tête avec la note, réponse et mesures à gauche, grille et annotations à droite. */
.qa { background: var(--white); border: 1px solid var(--ink); margin-bottom: var(--sp-4); }
.qa.dem-row { background: var(--cream-50); }
.qa-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--ink); background: var(--cream-50); }
.qa-title { margin: 0; font-size: var(--fs-body); font-weight: var(--w-semibold); line-height: var(--lh-snug); }
.score-pick { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }
.score-pick .eyebrow { letter-spacing: var(--tracking-wide); }
.score-pick select { width: auto; min-width: 4.5em; font-weight: var(--w-bold); padding: var(--sp-1) var(--sp-2); }
.score-pick .muted { white-space: nowrap; }
.qa-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.qa-body.solo { grid-template-columns: 1fr; }
.qa-main, .qa-side { padding: var(--sp-4); min-width: 0; }
.qa-side { border-left: 1px solid var(--border-default); background: var(--white); display: grid; gap: var(--sp-4); align-content: start; }
@media (max-width: 860px) {
  .qa-body, .dem-grid { grid-template-columns: 1fr; }
  .qa-side { border-left: 0; border-top: 1px solid var(--border-default); }
}
@media (max-width: 560px) {
  .qa-head { flex-direction: column; align-items: flex-start; }
}
.qlabel { font-size: var(--fs-body-sm); font-weight: var(--w-semibold); color: var(--fg-2); margin: 0 0 var(--sp-1); }
.answer { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--cream-50); border-left: 3px solid var(--brand-coral); padding: var(--sp-2) var(--sp-3); min-height: 2em; }
.answer.empty { color: var(--fg-2); font-style: italic; border-left-color: var(--warm-gray); }
.jq + .jq { margin-top: var(--sp-3); }
.photos { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.photos figure { margin: 0; }
.photos img { display: block; max-width: 100%; max-height: 320px; border: 1px solid var(--ink); cursor: zoom-in; }
.photos img.zoom { max-height: none; cursor: zoom-out; }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-2); }
.chip { font-size: var(--fs-caption); font-weight: var(--w-semibold); padding: 1px var(--sp-2); background: var(--gray-100); color: var(--fg-2); border: 1px solid transparent; }
.c-sur { background: var(--ink); color: var(--white); }
.c-ver, .c-mid { background: var(--sev-medium-bg); color: var(--sev-medium-fg); }
.c-ign { background: var(--gray-100); color: var(--fg-2); }
.c-bad { background: var(--sev-high-bg); color: var(--sev-high-fg); }
.c-ok { background: var(--white); color: var(--fg-1); }
.c-choice { background: var(--cream-200); color: var(--fg-1); border-color: var(--ink); }
.chip.declared { border: 1px dashed var(--warm-gray); }
.q-signals { margin-top: var(--sp-4); padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--brand-coral); background: var(--sev-high-bg); }
.q-signals ul { list-style: none; padding: 0; margin: 0; font-size: var(--fs-body-sm); }
.q-signals li + li { margin-top: var(--sp-2); }
.dem-field .q-signals { margin-top: var(--sp-2); }

/* Légende serveur / navigateur, une fois en haut de la fiche. */
ul.legend { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-3); }
.legend-item { padding: var(--sp-3); }
.legend-item.srv { background: var(--cream-50); border: 1px solid var(--ink); border-top-width: 3px; }
.legend-item.nav { background: var(--white); border: 1px dashed var(--fg-2); }
.legend-item.ai { background: var(--cream-100); border-left: 3px solid var(--brand-coral); }

/* Conclusion d'une question. */
.verdict { margin: var(--sp-4) 0 0; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-body-sm); }
.verdict.ok { background: var(--gray-50); border-left: 3px solid var(--ink); }
.verdict.check { background: var(--sev-medium-bg); color: var(--sev-medium-fg); border-left: 3px solid var(--sev-medium-bd); }
.verdict .muted { color: inherit; }

/* ---------- Grille de correction et saisie ---------- */
.relect { font-size: var(--fs-body-sm); border: 1px solid var(--border-default); padding: var(--sp-2) var(--sp-3); background: var(--cream-50); }
.relect[open] { background: var(--white); }
.relect p.sec { margin: var(--sp-2) 0 var(--sp-1); }
.relect ul { margin: var(--sp-1) 0; }
.relect b.k { display: inline; margin: 0; }
.relect b.k.att { color: var(--brand-coral-dark); }
.relect b.k.mega { color: var(--fg-1); }
.relect b.k.vig { color: var(--sev-high-fg); }
.relect .cmp, .relect .antic { color: var(--fg-2); }
.annot textarea { resize: vertical; font-size: var(--fs-body-sm); }
.others { font-size: var(--fs-body-sm); border-top: 1px solid var(--border-subtle); padding-top: var(--sp-2); }
.others p { margin: var(--sp-1) 0; }
.others p.sub { margin-bottom: var(--sp-1); }
.quote { color: var(--fg-2); }
.skipbox { margin: var(--sp-3) 0; padding: var(--sp-3) var(--sp-4); border: 1px dashed var(--warm-gray); background: var(--white); }
.thresholds { margin-top: var(--sp-6); }
.decision .dec-state { font-size: var(--fs-body); margin: var(--sp-2) 0 var(--sp-3); }
.decision .field { margin-bottom: var(--sp-3); }
.decision textarea { resize: vertical; font-size: var(--fs-body-sm); }
.decision .btn[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
.decision .note:empty, .danger-zone .note:empty { display: none; }
.danger-zone { margin-top: var(--sp-8); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--sev-high-fg); background: var(--white); }
.danger-zone h2 { font-size: var(--fs-body-lg); color: var(--sev-high-fg); margin-bottom: var(--sp-2); }
.danger-zone .field { max-width: 520px; margin: var(--sp-3) 0; }
.nowrap { white-space: nowrap; }
.danger-zone input { font-family: var(--font-mono); }
.verdict.pending { background: var(--gray-50); border-left: 3px dashed var(--warm-gray); color: var(--fg-2); }
.flash { outline: 2px solid var(--brand-coral); outline-offset: 4px; }
[tabindex="-1"]:focus { outline: none; }
[tabindex="-1"].flash:focus { outline: 2px solid var(--brand-coral); }

@media print {
  .header, .toolbar, .noprint { display: none !important; }
  body, body.cream { background: var(--white); }
  .wrap.wide { max-width: none; padding: 0; }
  .qa, .block, li.signal, .step-head { break-inside: avoid; }
  .score-pick select, .annot textarea { border: 1px solid var(--ink); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }