/* ============================================================================
   Psychos — design system
   Clinical, calm, professional. One accent blue, restrained greens/reds for
   status. 8px spacing rhythm, soft borders, subtle shadows.
   ========================================================================== */

:root {
  --bg: #eef1f5;
  --surface: #ffffff;
  --surface-2: #f7f9fb;
  --surface-3: #eff3f8;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --text: #16212e;
  --text-2: #3b4756;
  --muted: #6b7787;

  --primary: #2563a8;
  --primary-dark: #1c4d84;
  --primary-soft: #e8f0f9;
  --primary-softer: #f2f7fc;

  --success: #1f7a4d;
  --success-soft: #e5f4ec;
  --danger: #b5372c;
  --danger-soft: #fcebe9;
  --warn: #9a6410;
  --warn-soft: #fdf1df;

  --radius: 10px;
  --radius-sm: 7px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20, 33, 46, 0.06), 0 1px 3px rgba(20, 33, 46, 0.05);
  --shadow-md: 0 2px 6px rgba(20, 33, 46, 0.07), 0 6px 18px rgba(20, 33, 46, 0.06);

  --ring: 0 0 0 3px rgba(37, 99, 168, 0.28);
}

* { box-sizing: border-box; }
[x-cloak] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--text); line-height: 1.25; }
h1 { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 1.2rem; font-weight: 700; }
h3 { font-size: 1rem; font-weight: 700; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* -- top navigation -------------------------------------------------------- */

.topnav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1.75rem;
  position: sticky;
  top: 0;
  z-index: 50;
}

.topnav__brand {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--text);
  letter-spacing: -0.01em;
}
.topnav__brand:hover { text-decoration: none; }

.topnav__links { display: flex; gap: 1.1rem; align-items: center; }
.topnav__links a { color: var(--muted); font-weight: 500; }
.topnav__links a:hover { color: var(--primary); text-decoration: none; }

/* -- layout ---------------------------------------------------------------- */

.container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 1.75rem;
}
.container--wide { max-width: 1440px; }

/* -- cards ----------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.35rem 1.4rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
}
.card > h2:first-child,
.card > h3:first-child { margin-top: 0; }
.card + .card { margin-top: 0; }

/* -- page head ------------------------------------------------------------- */

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.page-head__title { margin: 0 0 0.25rem; }
.page-head__sub { margin: 0; color: var(--muted); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.page-head__patient { color: var(--text-2); font-weight: 600; }
.page-head__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.dot { color: var(--border-strong); }

/* -- tables ---------------------------------------------------------------- */

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--border); }
th {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
tbody tr:last-child td { border-bottom: none; }
.table-hover tbody tr:hover { background: var(--surface-2); }

/* -- buttons --------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); text-decoration: none; }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:active { transform: translateY(0.5px); }

.btn--secondary { background: var(--surface); color: var(--primary); border-color: var(--border-strong); }
.btn--secondary:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-dark); }

.btn--ghost { background: transparent; color: var(--text-2); border-color: transparent; }
.btn--ghost:hover { background: var(--surface-3); color: var(--text); }

.btn--danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn--danger:hover { background: #98281f; border-color: #98281f; }

.btn--sm { padding: 0.32rem 0.6rem; font-size: 0.8rem; border-radius: 6px; }

/* -- forms ----------------------------------------------------------------- */

.form-row { margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.form-row label { font-weight: 600; font-size: 0.88rem; }
.form-row input, .form-row select, .form-row textarea,
input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="number"], input[type="search"], select, textarea {
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  color: var(--text);
  background: #fff;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
/* Le chevron natif d'un <select> se pose contre la limite du padding, pas du
   contenu : sans marge dédiée il touche la bordure. Les navigateurs ne le
   dessinent pas à la même largeur, d'où une réserve un peu généreuse.
   `.form-row select` est répété pour tenir la spécificité de la règle
   ci-dessus, sans quoi la réserve saute sur tous les formulaires. */
select, .form-row select { padding-right: 1.6rem; }

/* Safari n'applique le style de base qu'après ``-webkit-appearance``, et une
   recherche garde sinon son apparence de champ arrondi natif. */
input[type="search"] { -webkit-appearance: none; appearance: none; }
input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

.form-row input:focus, .form-row select:focus, .form-row textarea:focus,
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--ring);
}
/* Les cases et boutons radio ne sont pas des champs de saisie : la règle
   ci-dessus les étirait sur toute la largeur de la ligne, avec bordure et
   padding — une barre pleine largeur au lieu d'une case. */
.form-row input[type="checkbox"], .form-row input[type="radio"],
input[type="checkbox"], input[type="radio"] {
  width: auto;
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  accent-color: var(--primary);
}

.form-row .errorlist { color: var(--danger); font-size: 0.85rem; margin: 0; padding: 0; list-style: none; }

/* -- messages -------------------------------------------------------------- */

.messages { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.messages li {
  padding: 0.7rem 1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 0.5rem;
  font-weight: 500;
  border: 1px solid transparent;
}
.messages .success { background: var(--success-soft); color: var(--success); border-color: #bfe3cd; }
.messages .error { background: var(--danger-soft); color: var(--danger); border-color: #f2cfcb; }

/* -- badges & status ------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--surface-3);
  color: var(--muted);
  line-height: 1.5;
}
.badge--active { background: var(--success-soft); color: var(--success); }
.badge--archived { background: var(--warn-soft); color: var(--warn); }

/* dot-prefixed status chips (assessment / subtest states) */
.badge--status::before {
  content: "";
  width: 0.45rem; height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.9;
}
.status-pending, .status-draft { background: var(--surface-3); color: var(--muted); }
.status-in_progress { background: var(--primary-soft); color: var(--primary-dark); }
/* « discontinued » = règle d'arrêt atteinte : un sous-test mené à son terme,
   au même titre que « completed » — même vert, pas de rouge d'alerte. */
.status-completed, .status-signed_off, .status-discontinued { background: var(--success-soft); color: var(--success); }
.status-skipped, .status-paused { background: var(--warn-soft); color: var(--warn); }

/* -- filter bar (liste des dossiers) --------------------------------------- */

/* Grille fluide plutôt qu'un nombre de colonnes fixe : le champ de recherche
   prend deux fois la largeur d'un sélecteur, et l'ensemble se replie tout seul
   sur un écran étroit sans media query. */
.filters { margin-bottom: 1.25rem; }
.filters__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.75rem 1rem;
}
.filters__field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.filters__field--wide { grid-column: span 2; }
.filters__field > span {
  font-size: 0.78rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.filters__field input, .filters__field select { width: 100%; }
.filters__actions { display: flex; gap: 0.5rem; margin-top: 0.9rem; }

@media (max-width: 560px) { .filters__field--wide { grid-column: span 1; } }

/* -- stat tiles ------------------------------------------------------------ */

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.stat-tile::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--primary);
}
.stat-tile__value { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.stat-tile__label { color: var(--muted); font-size: 0.85rem; margin-top: 0.15rem; }

.muted { color: var(--muted); }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.observation-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.observation-field { display: flex; flex-direction: column; gap: 0.35rem; font-weight: 600; text-transform: none; }
.observation-field textarea { width: 100%; resize: vertical; font: inherit; font-weight: 400; }
.booklet-observations .observation-field { display: grid; grid-template-rows: 3.2rem auto; align-content: start; }
@media (max-width: 760px) { .observation-fields { grid-template-columns: 1fr; } }

/* ============================================================================
   Booklet (digital administration)
   ========================================================================== */

.booklet-layout {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.booklet-main, .booklet-nav { min-width: 0; }

/* Un element collant plus haut que la fenetre colle par le haut : son bas
   n'apparait jamais, il faut derouler tout le cahier pour l'atteindre. On le
   borne donc a la hauteur utile et c'est la liste qui defile, en gardant
   « Ajouter » et « Terminer la passation » toujours visibles. */
.booklet-nav {
  position: sticky;
  top: 4.5rem;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 5.5rem);
}
.booklet-nav__card { padding: 0.75rem; margin-bottom: 0; display: flex; flex-direction: column; min-height: 0; }
.booklet-nav__card > h2, .booklet-nav__add, .booklet-nav__finish { flex-shrink: 0; }
.booklet-nav__card h2 { margin: 0.4rem 0.5rem 0.75rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }

.booklet-nav__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; scrollbar-gutter: stable; }

.booklet-nav__item { border-radius: var(--radius-sm); }
.booklet-nav__item.is-current { background: var(--primary-soft); }

.booklet-nav__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.6rem;
  color: var(--text-2);
  border-radius: var(--radius-sm);
}
.booklet-nav__link:hover { background: var(--surface-3); text-decoration: none; }
.booklet-nav__item.is-current .booklet-nav__link { color: var(--primary-dark); }
.booklet-nav__label { font-weight: 600; font-size: 0.9rem; line-height: 1.25; }

.booklet-nav__meta { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.booklet-nav__score {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* -- booklet body ---------------------------------------------------------- */

.booklet { padding: 1.35rem 1.4rem 1rem; }

.booklet__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.booklet__title { margin: 0; }

.booklet__chrono {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.4rem 0.3rem 0.85rem;
}
.booklet__chrono-time, .item-timer__t, .booklet-speed__t {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}
.booklet__chrono.is-running { border-color: var(--primary); box-shadow: var(--ring); }
.booklet__chrono.is-running .booklet__chrono-time { color: var(--primary-dark); }

/* administration guide shown before the item grid */
.booklet-guide {
  margin-top: 1rem;
  border: 1px solid #d9e5e9;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #f7fbfc, #fdfbf6);
  overflow: hidden;
}
.booklet-guide__summary {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1rem;
  cursor: pointer;
  list-style: none;
  transition: background .2s ease, padding .2s ease;
}
.booklet-guide__summary:hover { background: rgb(255 255 255 / 42%); }
.booklet-guide__summary::-webkit-details-marker { display: none; }
.booklet-guide__summary:focus-visible { outline: none; box-shadow: inset var(--ring); }
.booklet-guide__summary strong { display: block; color: var(--text); line-height: 1.35; }
.booklet-guide__eyebrow {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--primary-dark);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.booklet-guide__icon {
  width: 76px;
  height: 76px;
  border-radius: 13px;
  object-fit: contain;
  display: block;
  box-shadow: 0 4px 14px rgb(24 50 74 / 9%);
}
.booklet-guide__toggle {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  color: var(--primary-dark);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), color .2s ease;
}
.booklet-guide__toggle svg {
  display: block;
  width: 1.55rem;
  height: auto;
  overflow: visible;
}
.booklet-guide__toggle path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3.25; }
.booklet-guide__summary:hover .booklet-guide__toggle { color: var(--primary); }
.booklet-guide[open] .booklet-guide__toggle { transform: rotate(180deg); }
.booklet-guide__body {
  padding: 1rem 1.1rem 1rem;
  border-top: 1px solid #d9e5e9;
  background: rgb(255 255 255 / 72%);
}
.booklet-guide__time {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
  color: var(--text-2);
  font-weight: 700;
}
.rule-picto {
  display: inline-block;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  object-fit: contain;
  vertical-align: middle;
}
.booklet-guide__sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.75rem;
  align-items: start;
}
.booklet-guide__section {
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-top: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  background: #fff;
}
.booklet-guide__section:nth-child(2) { border-top-color: var(--warn); }
.booklet-guide__section:nth-child(3) { border-top-color: var(--danger); }
.booklet-guide__section:nth-child(4) { border-top-color: var(--success); }
.booklet-guide__section h3 { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.45rem; color: var(--primary-dark); font-size: 0.9rem; }
.booklet-guide__section p { margin: 0.25rem 0; color: var(--text-2); font-size: 0.82rem; line-height: 1.4; }
.booklet-guide__note {
  margin: 0.9rem 0 0;
  padding: 0.65rem 0.8rem;
  border-left: 3px solid var(--warn);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--warn-soft);
  color: var(--text-2);
}
.symbol-bonus { display: flex; justify-content: flex-end; margin-top: 0.9rem; overflow-x: auto; }
.symbol-bonus table { border-collapse: collapse; min-width: 34rem; background: #fff; font-size: 0.8rem; text-align: center; }
.symbol-bonus caption { padding: 0.5rem 0.7rem; border: 1px solid var(--border-strong); border-bottom: 0; background: var(--primary-softer); color: var(--primary-dark); font-weight: 800; }
.symbol-bonus th, .symbol-bonus td { padding: 0.45rem 0.65rem; border: 1px solid var(--border-strong); }
.symbol-bonus th:first-child { text-align: left; }

/* rule tags — informational, NOT clickable */
.booklet__rules { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0.25rem; }
.rule {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.65rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: default;
  user-select: none;
  border: 1px solid transparent;
}
.rule--start { background: var(--primary-softer); color: var(--primary-dark); border-color: #d5e4f2; }
.rule--reverse { background: var(--warn-soft); color: var(--warn); border-color: #f3e0bf; }
.rule--stop { background: var(--danger-soft); color: var(--danger); border-color: #f2cfcb; }

.booklet__banner {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  margin: 1rem 0 0;
  border: 1px solid transparent;
}
.booklet__banner--stop { background: var(--danger-soft); color: var(--danger); border-color: #f2cfcb; }
.booklet__banner--done { background: var(--success-soft); color: var(--success); border-color: #bfe3cd; }
.booklet__banner--reverse { background: var(--warn-soft); color: var(--warn); border-color: #f3e0bf; }

.booklet__grid-wrap { overflow-x: auto; margin-top: 1rem; }

/* -- grid ------------------------------------------------------------------ */

.booklet-grid { width: 100%; border-collapse: collapse; }
.booklet-grid thead th {
  background: var(--surface-3);
  border-bottom: 2px solid var(--border-strong);
  padding: 0.55rem 0.7rem;
}
.booklet-grid thead tr th:first-child { border-top-left-radius: var(--radius-sm); }
.booklet-grid thead tr th:last-child { border-top-right-radius: var(--radius-sm); }
.booklet-grid th, .booklet-grid td { vertical-align: middle; }
.booklet-grid tbody td { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--border); }
.booklet-row { border-bottom: 1px solid var(--border); }
.booklet-row:nth-child(even) { background: var(--surface-2); }
.booklet-row:hover { background: var(--primary-softer); }

.booklet-row.is-start { box-shadow: inset 3px 0 0 var(--primary); }
.booklet-row.is-dim td { opacity: 0.5; }
.booklet-row.is-stop, .booklet-row.is-stop:nth-child(even) { background: var(--danger-soft); }
.booklet-row--intro { background: var(--primary-softer); }
.booklet-row--intro td { color: var(--text-2); }

.col-num { white-space: nowrap; width: 1%; color: var(--text); }
.col-num .booklet-row__order { font-weight: 700; font-variant-numeric: tabular-nums; }
.start-arrow { color: var(--primary); font-weight: 800; margin-right: 0.2rem; }
.booklet-row__stim { font-weight: 500; color: var(--text); }
.item-kind { display: inline-block; margin-left: 0.4rem; padding: 0.08rem 0.35rem; border-radius: var(--radius-pill); background: var(--primary-soft); color: var(--primary-dark); font-size: 0.68rem; font-weight: 700; }
.item-help { display: inline-grid; place-items: center; margin-left: 0.3rem; color: var(--primary); cursor: help; font-weight: 800; }
.item-help--warn { color: var(--warn); }
.booklet-row__limit { margin-left: 0.4rem; color: var(--muted); font-size: 0.82rem; white-space: nowrap; }
.booklet-row__img { max-width: 160px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; vertical-align: middle; }

.booklet-verbatim, .booklet-option {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  background: #fff;
  resize: vertical;
}
.booklet-option--sm { min-width: 8rem; }
.booklet-option--xs { width: 5rem; }
.cube-model-labels { display: flex; gap: 0.35rem; margin-top: 0.3rem; }
.cube-model-labels span { padding: 0.1rem 0.35rem; border-radius: var(--radius-sm); background: var(--primary-soft); font-size: 0.68rem; font-weight: 700; }
.cube-trial-timers { display: grid; gap: 0.45rem; }
.cube-trial-timers small { display: block; color: var(--muted); }
.partial-chips { min-width: 7rem; max-width: 10rem; }
.booklet-grid--construction th:nth-child(7),
.booklet-grid--construction td:nth-child(7) { min-width: 1.5rem; }
.cube-score-trial-labels { display: grid; grid-template-columns: repeat(3, 2.05rem); gap: 0.35rem; margin-bottom: 0.15rem; }
.cube-score-trial-labels span { color: var(--muted); font-size: 0.62rem; font-weight: 700; text-align: center; white-space: nowrap; }
.cube-target-cell { min-width: 9.5rem; }
.cube-target { display: grid; place-items: center; min-height: 8.5rem; overflow: hidden; }
.construction-drawings { min-width: 10rem; }
.construction-attempt { display: grid; justify-items: start; gap: 0.35rem; padding: 0.35rem 0; }
.construction-attempt + .construction-attempt { border-top: 1px solid var(--border); }
.construction-attempt__label { font-size: 0.72rem; color: var(--text-2); }
.construction-empty { font-size: 0.72rem; color: var(--muted); }
.construction-preview { pointer-events: none; }
.construction-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; background: rgb(15 23 42 / 55%); }
.construction-modal__panel { width: min(620px, 100%); padding: 1rem; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-md); }
.construction-modal__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.construction-modal__actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1rem; }
.construction-grid { --cube-size: 38px; display: grid; justify-content: center; gap: 3px; margin: 1rem; }
.construction-grid--row { grid-template-columns: repeat(2, var(--cube-size)); }
.construction-grid--2 { grid-template-columns: repeat(2, var(--cube-size)); }
.construction-grid--3 { grid-template-columns: repeat(3, var(--cube-size)); }
.construction-grid--diamond { margin: 2.25rem auto; transform: rotate(45deg); }
/* Un conteneur tourné garde la boîte d'un bloc : pleine largeur, elle pivote en
   un losange géant qui déborde sur ce qui suit (les boutons de la modale se
   retrouvaient dessous, inertes). On la réduit au contenu, on la centre, et on
   laisse passer les clics — seules les cellules restent cliquables. */
.construction-grid--diamond,
.construction-grid--cross { width: max-content; pointer-events: none; }
.construction-grid--diamond .construction-cell,
.construction-grid--cross .construction-cell { pointer-events: auto; }
/* Croix de l'item 13 : c'est le conteneur qui pivote, comme le losange —
   jamais les cubes un par un. Les neuf cubes occupent un « plus » dans la
   grille ; la rotation de 45° le transforme en croix dont les cubes se
   touchent arête contre arête, comme au cahier. Les faire pivoter
   individuellement les espaçait d'un facteur √2 (croix trouée). Ordre des
   cellules = lecture ligne par ligne du plus. */
.construction-grid--cross { grid-template-columns: repeat(5, var(--cube-size)); grid-template-rows: repeat(5, var(--cube-size)); margin: calc(var(--cube-size) * 0.3) auto; transform: rotate(45deg); }
.construction-grid--cross .construction-cell:nth-of-type(1) { grid-area: 1 / 3; }
.construction-grid--cross .construction-cell:nth-of-type(2) { grid-area: 2 / 3; }
.construction-grid--cross .construction-cell:nth-of-type(3) { grid-area: 3 / 1; }
.construction-grid--cross .construction-cell:nth-of-type(4) { grid-area: 3 / 2; }
.construction-grid--cross .construction-cell:nth-of-type(5) { grid-area: 3 / 3; }
.construction-grid--cross .construction-cell:nth-of-type(6) { grid-area: 3 / 4; }
.construction-grid--cross .construction-cell:nth-of-type(7) { grid-area: 3 / 5; }
.construction-grid--cross .construction-cell:nth-of-type(8) { grid-area: 4 / 3; }
.construction-grid--cross .construction-cell:nth-of-type(9) { grid-area: 5 / 3; }
.construction-cell { position: relative; width: var(--cube-size); aspect-ratio: 1; border: 1.5px solid var(--text); background: #fff; }
.construction-cell::before, .construction-cell::after { content: ""; position: absolute; z-index: 1; top: 50%; left: -10%; width: 120%; height: 1px; background: rgb(255 255 255 / 58%); pointer-events: none; }
.construction-cell::before { transform: rotate(45deg); }
.construction-cell::after { transform: rotate(-45deg); }
.construction-triangle { position: absolute; inset: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.construction-triangle--1 { clip-path: polygon(0 0, 100% 0, 50% 50%); }
.construction-triangle--2 { clip-path: polygon(100% 0, 100% 100%, 50% 50%); }
.construction-triangle--3 { clip-path: polygon(100% 100%, 0 100%, 50% 50%); }
.construction-triangle--4 { clip-path: polygon(0 100%, 0 0, 50% 50%); }
.construction-triangle.is-filled { background: var(--primary); }
.construction-triangle:disabled { cursor: default; opacity: 1; }
.construction-modal .construction-grid { --cube-size: 78px; }
.construction-preview .construction-grid { --cube-size: 25px; margin: 0.5rem; }
.construction-preview .construction-grid--diamond { margin: 1.25rem auto; }
/* La croix occupe 5,41 × la taille d'un cube contre 4,24 pour le losange :
   on réduit --cube-size pour que les items 12 et 13 aient le même gabarit. */
.construction-modal .construction-grid--cross { --cube-size: 60px; }
.construction-preview .construction-grid--cross { --cube-size: 20px; margin: 0.5rem auto; }
.cube-target .construction-grid--cross { --cube-size: 30px; }
.item-timer.is-timeout { color: var(--danger); background: var(--danger-soft); }
.booklet-grid--mcq .booklet-option { max-width: 14rem; }
.answer-choices { display: grid; grid-template-columns: repeat(3, 2.15rem); gap: 0.35rem; }
.booklet-grid--mcq .answer-choices { grid-template-columns: repeat(6, 2.15rem); }
.answer-choice { position: relative; display: grid; place-items: center; width: 2.15rem; height: 2.15rem; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); background: #fff; cursor: pointer; font-weight: 700; }
.answer-choice input { position: absolute; opacity: 0; }
.answer-choice:has(input:checked), .answer-choice.is-selected { background: var(--primary); border-color: var(--primary); color: #fff; }
.answer-choices--reference .answer-choice { cursor: default; }
.answer-choice.is-correct { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.booklet-row--example { background: var(--surface-2); }
.expected-answer { display: block; margin-top: 0.4rem; color: var(--muted); font-size: 0.75rem; }
.booklet-grid--verbal .booklet-verbatim { min-height: 2.3rem; }
.booklet-grid--image-memory .booklet-option { min-width: 12rem; }
.booklet-grid--letter-number .col-trial-number { width: 1%; white-space: nowrap; font-weight: 700; }
.booklet-grid--letter-number .col-stimulus,
.booklet-grid--letter-number .col-correct { min-width: 8rem; font-weight: 600; }
.booklet-grid--letter-number tbody + tbody { border-top: 2px solid var(--border-strong); }
.booklet-grid__note { margin: 0.65rem 0 0; color: var(--text-2); font-size: 0.82rem; }

/* score chips */
.chips { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; }
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.05rem;
  height: 2.05rem;
  padding: 0 0.15rem;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: #fff;
  cursor: pointer;
  font-weight: 700;
  color: var(--text-2);
  transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
}
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip:hover { border-color: var(--primary); color: var(--primary-dark); }
.chip:has(input:focus-visible) { box-shadow: var(--ring); }
/* instant client-side feedback + persisted server state */
.chip:has(input:checked), .chip--on {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.booklet-auto {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  background: var(--success-soft);
  color: var(--success);
  font-size: 0.68rem;
  font-weight: 700;
  vertical-align: middle;
}

.booklet-note--readonly { white-space: nowrap; font-weight: 700; text-align: right; }
.booklet-note__val { font-size: 1.05rem; }
.booklet-note__max { color: var(--muted); font-weight: 600; }

/* item (per-row) timer */
.col-timer { white-space: nowrap; }
.col-timer .item-timer__t, .booklet-speed__t { font-size: 0.95rem; }
.col-timer .btn--sm { margin-left: 0.35rem; }
.col-timer.is-timeout .item-timer__t,
.booklet-speed__timer.is-timeout .booklet-speed__t {
  color: var(--danger);
}
.col-timer.is-timeout,
.booklet-speed__timer.is-timeout {
  background: var(--danger-soft);
}

/* -- footer / running total ------------------------------------------------ */

.booklet__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 2px solid var(--border-strong);
}
.booklet__total { display: flex; align-items: baseline; gap: 0.5rem; }
.booklet__total-label { color: var(--muted); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.05em; font-weight: 700; }
.booklet__total-value { font-size: 1.7rem; font-weight: 800; color: var(--primary-dark); font-variant-numeric: tabular-nums; }
.booklet__total-max { color: var(--muted); font-weight: 600; }
.booklet-observations { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 2px solid var(--border-strong); }
.booklet-observations > h2 { margin-top: 0; }

/* -- speed tasks (Code / Symboles / Barrage) ------------------------------- */

.booklet-speed { display: grid; gap: 1rem; margin-top: 1rem; }
.booklet-speed__task {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  background: var(--surface-2);
}
/* La grille de vitesse n'est pas un <table> : `.booklet-row.is-dim` ne l'atteint
   pas, il lui faut son propre grisage. */
.booklet-speed__task.is-dim { opacity: 0.55; }
/* Forme d'une autre tranche d'âge : franchement en retrait et en pointillés,
   pour qu'on ne la confonde pas avec une tâche encore à faire. */
.booklet-speed__task--out-of-band {
  border-style: dashed;
  border-color: var(--border-strong);
  background: var(--surface-3);
  color: var(--muted);
}
.booklet-speed__task--out-of-band .booklet-speed__head h3 { color: var(--muted); font-weight: 600; }
/* Variante réduite à l'en-tête : elle seule n'a pas de `booklet-form-scope`. */
.booklet-speed__task--out-of-band:not(.booklet-form-scope) .booklet-speed__head { margin-bottom: 0; }
.booklet-speed__head, .booklet-speed__timer, .booklet-speed__counts {
  display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap;
}
.booklet-speed__head { margin-bottom: 0.85rem; }
.booklet-speed__head h3 { margin: 0; }
.booklet-speed__timer { margin-bottom: 0.85rem; }
.booklet-speed__timer .item-timer { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.4rem 0.3rem 0.85rem;  border-radius: var(--radius-pill); }
.booklet-speed__counts { gap: 1.25rem; }
.booklet-speed__counts label { display: flex; flex-direction: column; gap: 0.3rem; font-weight: 600; font-size: 0.85rem; min-width: 11rem; }
.booklet-speed__bonus { text-align: center; }
.booklet-speed__bonus strong { font-size: 1.2rem; font-weight: 800; color: var(--primary-dark); }
.booklet-speed__score { margin-left: auto; text-align: right; }
.booklet-speed__score strong { font-size: 1.4rem; font-weight: 800; color: var(--primary-dark); }

/* -- prerequisite gate (6-7 spans) ----------------------------------------- */

.booklet-prereq { margin: 0.75rem 0; padding: 0.6rem 0.9rem; border: 1px solid var(--border, #d5dde5);
  border-radius: var(--radius, 8px); background: var(--surface-alt, #f6f8fa); }
.booklet-prereq--failed { border-color: var(--danger, #c0392b); background: rgba(192, 57, 43, 0.06); }
.booklet-prereq--passed { border-color: var(--primary, #2d7d9a); background: rgba(45, 125, 154, 0.06); }
.booklet-prereq__caption { text-align: left; padding-bottom: 0.4rem; }
.booklet-prereq__caption .muted { font-size: 0.8rem; font-weight: 400; margin-left: 0.5rem; }
.booklet-prereq__hint { font-size: 0.8rem; margin: 0.4rem 0 0; }
.booklet-grid--prereq { background: transparent; }
.booklet-grid--prereq .col-check { width: 5rem; text-align: center; }
.booklet-grid--prereq input[type="checkbox"] { width: 1.1rem; height: 1.1rem; cursor: pointer; }

/* -- process / span scores -------------------------------------------------- */

.process-scores { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px dashed var(--border, #d5dde5); }
.process-scores__title { margin: 0 0 0.25rem; font-size: 1rem; }
.process-scores__hint { margin: 0 0 0.75rem; font-size: 0.85rem; }
.process-scores__table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.process-scores__table th[scope="row"] { font-weight: 800; color: var(--primary-dark); white-space: nowrap; }
.process-scores__table thead th { text-align: left; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
.process-scores__table th, .process-scores__table td { padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border, #eef2f6); vertical-align: top; text-align: left; }
.process-scores__value { font-weight: 800; font-size: 1.05rem; }
.process-scores__note { display: block; font-size: 0.78rem; margin-top: 0.15rem; }

/* -- read-only shared assessments ------------------------------------------ */

.booklet--readonly .chip,
.booklet--readonly input,
.booklet--readonly button:not(.btn),
.booklet--readonly .btn { pointer-events: none; opacity: 0.75; }

/* Les pastilles masquent leur checkbox native sous le libellé. La règle
   lecture seule ci-dessus ne doit pas la rendre visible quand un subtest est
   marqué « non administré » (même principe pour les choix illustrés). */
.booklet--readonly .chip input,
.booklet--readonly .answer-choice input { opacity: 0; }

/* -- responsive ------------------------------------------------------------ */

@media (max-width: 960px) {
  .booklet-layout { grid-template-columns: 1fr; }
  /* Empilee au-dessus du cahier, la nav n'a plus a etre bornee ni a defiler. */
  .booklet-nav { position: static; max-height: none; display: block; }
  .booklet-nav__card { margin-bottom: 1.25rem; }
  .booklet-nav__list { overflow-y: visible; }
  .booklet-grid thead th { top: 0; }
}
@media (max-width: 640px) {
  .booklet-observations .observation-field { grid-template-rows: auto auto; }
  .booklet-guide__summary { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 0.7rem; }
  .booklet-guide__icon { width: 58px; height: 58px; }
  .booklet-guide__sections { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Protocole, subtests non administrés, fin de passation
   ========================================================================== */

[x-cloak] { display: none !important; }

.btn--block { display: block; width: 100%; text-align: center; }

/* pastille (i) : le remplaçant possible d'un subtest du QIT (tableau 2.7) */
.info-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.05rem; height: 1.05rem; flex-shrink: 0;
  border-radius: 50%; border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--muted);
  font-size: 0.7rem; font-style: italic; font-weight: 700; cursor: help;
}

.protocol-list { list-style: none; padding: 0; margin: 0.35rem 0 0; display: flex; flex-direction: column; gap: 0.35rem; }
.protocol-option { display: flex; align-items: center; gap: 0.45rem; }
.protocol-option label { display: flex; align-items: center; gap: 0.45rem; margin: 0; font-weight: 400; cursor: pointer; }
.protocol-option__label { font-size: 0.92rem; }
.form-hint { margin: 0.2rem 0 0.5rem; font-size: 0.85rem; }

/* -- navigation du cahier : ajout / fin ------------------------------------ */

.booklet-nav__item.is-skipped .booklet-nav__label { text-decoration: line-through; color: var(--muted); }
.booklet-nav__add { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--border); }
.booklet-nav__addlist { list-style: none; padding: 0.35rem 0 0; margin: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.booklet-nav__additem { display: flex; align-items: center; gap: 0.4rem; padding: 0 0.5rem; }
.booklet-nav__additem form { display: inline; }
.linklike {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--primary); font: inherit; font-size: 0.88rem; text-align: left;
}
.linklike:hover { text-decoration: underline; }
.booklet-nav__finish { margin-top: 0.6rem; }

.booklet__notice {
  margin: 0 0 0.9rem; padding: 0.7rem 0.9rem;
  border: 1px solid var(--warn); border-left-width: 3px;
  border-radius: var(--radius-sm); background: var(--warn-soft);
}
.booklet__notice p { margin: 0.15rem 0; }

/* Le cahier d'un subtest écarté est verrouillé, mais « Remettre à administrer »
   doit rester cliquable — sinon on ne peut plus revenir sur le choix. */
.booklet--readonly .booklet__skip-action { pointer-events: auto; opacity: 1; }

/* -- page « Terminer la passation » ---------------------------------------- */

.card--error { border-color: var(--danger); background: var(--danger-soft); }
.card--notice { border-color: var(--primary); background: var(--primary-softer); }

.notice { margin: 0.8rem 0; padding: 0.7rem 0.9rem; border-radius: var(--radius-sm); border: 1px solid; }
.notice--ok { border-color: var(--success); background: var(--success-soft); }
.notice--warn { border-color: var(--warn); background: var(--warn-soft); }

.table--compact { font-size: 0.9rem; }
.table--compact tr.is-missing td { background: var(--warn-soft); }

.qit-choice { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.8rem 1rem; margin: 0.8rem 0; }
.qit-choice legend { padding: 0 0.4rem; font-weight: 600; font-size: 0.9rem; color: var(--text-2); }
.radio-row, .checkbox-row { display: flex; align-items: flex-start; gap: 0.55rem; margin: 0.5rem 0; cursor: pointer; }
.radio-row input, .checkbox-row input { margin-top: 0.25rem; flex-shrink: 0; }
.footnote { font-size: 0.82rem; line-height: 1.45; }

.inventory { list-style: none; padding: 0; margin: 0.6rem 0 0; display: flex; flex-direction: column; gap: 0.15rem; }
.inventory__item { display: flex; gap: 0.65rem; padding: 0.55rem 0.6rem; border-radius: var(--radius-sm); }
.inventory__item:nth-child(odd) { background: var(--surface-2); }
.inventory__marker { flex-shrink: 0; width: 1.1rem; font-weight: 700; text-align: center; }
.inventory__item--complete .inventory__marker { color: var(--success); }
.inventory__item--partial .inventory__marker { color: var(--warn); }
.inventory__item--absent .inventory__marker { color: var(--danger); }
.inventory__body { min-width: 0; }
.inventory__title { margin: 0; font-weight: 600; font-size: 0.92rem; }
.inventory__status { font-weight: 400; font-size: 0.82rem; color: var(--muted); }
.inventory__body p.muted { margin: 0.15rem 0 0; font-size: 0.84rem; }
.inventory__missing { font-style: italic; }

.form-actions { display: flex; gap: 0.6rem; align-items: center; margin: 1rem 0 2rem; }

/* -- dossier : sous-dossiers (années scolaires) et checklist ---------------- */

.folder-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  margin-bottom: 0.8rem;
}
.folder-card .toolbar { margin-bottom: 0.4rem; }
.folder-card h3 { margin: 0; font-size: 1rem; }
.folder-card p { margin: 0.2rem 0; font-size: 0.9rem; }

/* La checklist a des colonnes de nature très différente (case, libellé, date,
   notes, fichiers, actions) : sans largeurs imposées, « Notes » se retrouve
   écrasée par les colonnes à contenu large et devient inutilisable. */
.checklist { width: 100%; table-layout: fixed; }
.checklist td, .checklist th { vertical-align: top; overflow-wrap: anywhere; }
.checklist th:nth-child(1) { width: 6rem; }     /* Réalisée */
.checklist th:nth-child(2) { width: 9rem; }     /* Épreuve */
.checklist th:nth-child(3) { width: 9.5rem; }   /* Date */
/* Fichiers : les pièces photographiées sont renommées « Épreuve — jj/mm/aaaa »
   (services/uploads.py), soit deux fois plus long qu'un « dessin.pdf ». */
.checklist th:nth-child(5) { width: 12rem; }    /* Fichiers */
.checklist th:nth-child(6) { width: 14rem; }    /* Actions */
.checklist .btn { white-space: nowrap; }
.checklist input[type="text"], .checklist input[type="date"] { width: 100%; }
.checklist input[type="file"] { max-width: 100%; font-size: 0.8rem; }
.checklist form { margin: 0; display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.checklist p { margin: 0.15rem 0; font-size: 0.85rem; }
.checklist-document { display: flex; align-items: center; gap: .4rem; margin: .25rem 0; }
.checklist-document > a { min-width: 0; overflow-wrap: anywhere; }
.checklist .checklist-document__delete { display: inline-flex; flex: 0 0 auto; }
.checklist .checklist-document__delete-button {
  flex: 0 0 28px;
  width: 28px;
  min-width: 28px;
  min-height: 28px;
  height: 28px;
  padding: 0;
  border-radius: 9px;
  line-height: 1;
}

.checklist__check { width: 1.15rem; height: 1.15rem; cursor: pointer; accent-color: var(--primary); }

/* La checklist s'enregistre toute seule : la ligne clignote pour le dire, et le
   bouton d'enregistrement global n'existe que sans JavaScript (base.html). */
.checklist-row.is-saved > td { animation: checklist-saved 1.4s ease; }
@keyframes checklist-saved {
  0%, 45% { background: var(--success-soft); }
  100% { background: transparent; }
}
.checklist__save { display: none; }

/* Modale « date de réalisation » : un <dialog> natif, centré par le navigateur. */
.date-dialog {
  width: min(420px, calc(100vw - 2rem));
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-md);
}
.date-dialog::backdrop { background: rgb(15 23 42 / 45%); }
.date-dialog__title { margin: 0; font-size: 1.05rem; }
.date-dialog__label { margin: 0.15rem 0 0.9rem; }
.date-dialog input[type="date"] { width: 100%; }
.date-dialog__actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }

/* Suppression d'une pièce jointe : une croix discrète à côté du lien, pas un
   pavé rouge qui pèse plus lourd que le fichier qu'il supprime. */
.checklist .btn--danger,
.folder-card .btn--danger {
  padding: 0.1rem 0.4rem;
  font-size: 0.8rem;
  line-height: 1.3;
}

/* -- dépôt de pièces : photo, fichier, appairage téléphone ------------------ */

/* Les trois entrées d'une ligne de checklist (photo, fichier, téléphone). Les
   deux premières sont des <label> qui enveloppent un input file caché : cliquer
   le libellé ouvre le sélecteur, et l'envoi part dès la sélection (capture.js). */
.upload-actions { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.upload-actions form { margin: 0; }
.upload-actions .btn { cursor: pointer; }
/* Non restreint à .upload-actions : la page mobile a besoin du même retour, et
   « is-sending » n'est posé que par capture.js. */
form.is-sending .btn { opacity: 0.6; pointer-events: none; }

/* Repli sans JavaScript : capture.js envoie dès la sélection du fichier, donc
   ce bouton ne sert que si le script n'a pas chargé — sans lui, cliquer
   « Photo » ouvrirait l'appareil photo puis ne ferait rien. Il est rétabli par
   le <noscript> de base.html, et non par le script : ainsi il n'apparaît jamais
   le temps d'un clignotement avant que le script ne le cache. */
.upload-actions__go { display: none; }

/* -- modale « scanner depuis mon téléphone » -------------------------------- */

.capture-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgb(15 23 42 / 55%);
  overflow-y: auto;
}
.capture-modal__panel { width: min(420px, 100%); margin: auto; text-align: center; }
.capture-modal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.6rem; text-align: left; }
.capture-modal__head h2 { margin: 0; }
.capture-modal__head p { margin: 0.15rem 0 0; }
.capture-modal__head form { margin: 0; }
.capture-modal__actions { margin-top: 1rem; }
.capture-modal__actions form { margin: 0; }
.capture-modal p { font-size: 0.9rem; }

/* Le QR doit rester sur fond blanc franc : son contraste est ce qui le rend
   lisible par un appareil photo, et les modules sont dessinés en noir pur. */
.capture-qr {
  display: inline-block;
  margin: 0.8rem auto 0.4rem;
  padding: 0.5rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.capture-qr svg { display: block; width: min(240px, 60vw); height: auto; }

/* L'URL est affichée en clair sous le QR : c'est le seul moyen de voir qu'un
   « 127.0.0.1 » de développement ne sera jamais joignable depuis un téléphone. */
.capture-qr__url { font-size: 0.75rem; overflow-wrap: anywhere; }

.capture-code {
  font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text);
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.4rem;
}

.capture-received {
  margin-top: 1rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
  text-align: left;
}
.capture-received h3 { margin: 0 0 0.3rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.capture-received p { margin: 0.15rem 0; }

/* -- page téléphone --------------------------------------------------------- */

/* Cibles tactiles larges : la page s'utilise debout, d'une main, l'autre tenant
   le dessin de l'enfant. */
.capture-mobile { max-width: 34rem; margin: 0 auto; }
.capture-mobile h1 { margin-bottom: 0.2rem; }
.capture-mobile form { margin: 0.6rem 0; }
.capture-mobile__action {
  cursor: pointer;
  padding: 1.1rem 1rem;
  font-size: 1.05rem;
}
.capture-mobile__error { color: var(--danger); margin: 0; }

/* « Envoi en cours… » n'apparaît que pendant l'envoi : sur un réseau d'école,
   une photo de plusieurs Mo laisse le temps de croire que rien ne se passe. */
.capture-mobile__sending { display: none; text-align: center; }
.capture-mobile:has(form.is-sending) .capture-mobile__sending { display: block; }

.capture-code-input {
  font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
  font-size: 1.4rem;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
}

/* Champs de création d'un enseignant, dépliés par le sélecteur. */
.subform {
  margin-top: 0.6rem;
  padding: 0.8rem 1rem;
  border-left: 3px solid var(--primary);
  background: var(--primary-softer);
  border-radius: var(--radius-sm);
}

/* Sélection explicite du contenu transmis dans un compte rendu PDF. */
.report-section-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 0.65rem;
  margin-top: 1rem;
}
.report-section-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  cursor: pointer;
}
.report-section-choice:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-softer);
}
.report-section-choice input { margin-top: 0.2rem; }
.report-section-choice small { display: block; margin-top: 0.2rem; }