/* modals.css — le voile et la feuille (voice · invite · thread · sequence · agenda).
   Split out of app.css by S0. TOKENS ONLY.
   Owner after Wave 0: S12 (D6 — faire de la feuille un vrai dialogue : focus, Échap, verrou de
   scroll, glissement vers le bas — fait, voir modals.js).
   NOTE: .picks is also worn by the custody week picker in screens/famille.js — it was already so
   before the split; changing it changes that screen too. */

/* ── modal (la parole de l'enfant) ─────────────────────────────────────── */
.veil { position: fixed; inset: 0; background: var(--veil); backdrop-filter: blur(6px); display: none; align-items: flex-end; justify-content: center; z-index: 40; }
.veil.on { display: flex; }
.sheet {
  width: 100%; max-width: var(--shell-w); background: var(--sheet-bg); color: var(--ink);
  border-radius: var(--r-xl) var(--r-xl) 0 0; border: 1px solid var(--sheet-line); border-bottom: none;
  padding: 22px 22px 34px; max-height: 88vh; overflow-y: auto;
  /* S12/D6 — le glissement vers le bas déplace la feuille via `transform` pendant le geste
     (modals.js met `transition:none` le temps du drag) ; ceci ne joue qu'au relâchement, pour
     que la feuille revienne à sa place si le geste n'atteint pas le seuil de fermeture. */
  transition: transform .2s ease;
}
.sheet:focus { outline: none; } /* on pilote nous-mêmes le focus initial (activateModal) ; pas d'anneau sur le conteneur */
@media (prefers-reduced-motion: reduce) {
  .sheet { transition: none; }
}
/* U2 — data-calme (le masque de concentration) redit la règle ci-dessus, choisie dans l'app. */
:root[data-calme="1"] .sheet { transition: none; }
.sheet h2 { font: 300 21px/1.2 var(--font); }
.sheet h2 b { font-weight: 600; }
.sheet .q1 { font: 600 13px/1 var(--font); color: var(--voice); margin: 18px 0 10px; letter-spacing: .04em; }
.sheet label { display: block; font: 600 12px/1 var(--font); color: var(--ink-muted); margin: 14px 0 6px; }
.sheet input[type="text"], .sheet input[type="email"], .sheet input[type="date"], .sheet select {
  /* D3 (S1): 16px minimum stops iOS Safari auto-zooming on focus */
  width: 100%; background: var(--field-bg); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--ink); padding: 11px 14px; font: 400 16px/1.3 var(--font);
}
.moods { display: flex; gap: 10px; }
.moods button { font-size: 30px; padding: 8px 14px; border-radius: var(--r-md); background: var(--chip-bg); border: 1px solid transparent; }
.moods button.on { border-color: var(--voice); background: var(--voice-soft); }
.picks { display: flex; flex-wrap: wrap; gap: 8px; }
.picks button { font: 600 12px/1 var(--font); padding: 9px 13px; border-radius: var(--r-pill); background: var(--chip-bg); border: 1px solid transparent; color: var(--chip-ink); }
.picks button.on { border-color: var(--voice); color: var(--voice); background: var(--voice-soft); }
.sheet .done { margin-top: 22px; width: 100%; justify-content: center; background: var(--voice); color: var(--ink-on-voice); padding: 13px; }
.sheet .ghost { margin-top: 10px; width: 100%; justify-content: center; }

/* ── F.picker — le menu, enfin lisible (ATELIER-MENUS-EXERCICE-PLAN §2.1) ───
   Le `<select>` natif est parti : sa liste d'options était peinte par le navigateur avec le fond
   et l'encre du champ, soit --field-bg (12 % opaque, donc blanc une fois composé) sous --ink
   (presque blanc) — 1,05:1 mesuré à l'écran le 2026-08-15. Et sur téléphone la liste est une
   roue du système, que la CSS n'atteint pas du tout. Ceci est du DOM ordinaire : il se peint
   dans les deux thèmes parce qu'il se peint avec les tokens, comme tout le reste.
   AUCUNE nouvelle couche : la feuille est celle de #veil (z-index 40) et il n'y en a pas d'autre.
   TOKENS ONLY. */

/* Le déclencheur : ça se lit comme un CHAMP, jamais comme un bouton d'action. 48px de haut et
   16px de valeur — une cible de doigt qui ne fait pas zoomer iOS (D3). */
.pick {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px;
  padding: 10px 14px; text-align: left;
  background: var(--field-bg); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--ink);
}
.pick[disabled] { opacity: .55; cursor: default; }
/* `--ink`, PAS `--ink-muted` — et c'est une MESURE, pas un goût. test-contrast.js (2026-08-15) :
   l'encre atténuée vaut 3,93:1 sur --field-bg et 4,23:1 sur --sheet-bg en Terrain de jeu, sous les
   4,5:1 de WCAG AA ; et 12px en 600 n'est pas du « grand texte » qui aurait droit à 3:1. C'est la
   TROISIÈME fois que ce fichier-là attrape cette paire (voir .ex-rub-b et .ex-blank.bad dans
   apprendre.css) — la hiérarchie se fait donc à la TAILLE et à la GRAISSE, jamais en atténuant
   l'encre. Les deux paires sont maintenant tenues par la machine, dans les deux thèmes. */
.pick-lab { flex: 0 0 auto; font: 600 12px/1 var(--font); color: var(--ink); letter-spacing: .02em; }
/* La valeur prend la place qui reste et se coupe proprement : « Vélo & sécurité routière » ne
   pousse jamais le chevron hors du champ. */
.pick-val { flex: 1 1 auto; min-width: 0; font: 400 16px/1.25 var(--font); color: var(--ink); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Ce que le repli a caché reste ANNONCÉ : « 10 exercices maison » sur le déclencheur des drills. */
.pick-meta { flex: 0 0 auto; font: 400 12px/1 var(--font); color: var(--ink); }
.pick-empty .pick-val { font-size: 13.5px; color: var(--ink); white-space: normal; }
/* Le chevron reste en --ink-muted : c'est un OBJET GRAPHIQUE, pas du texte, donc le seuil WCAG
   qui s'y applique est 3:1 (non-texte) et non 4,5:1 — et il vaut 3,93:1 au pire des deux thèmes.
   Il n'entre donc pas dans la table de test-contrast.js, qui ne juge que des paires de texte.
   Les deux glyphes portent `ic` EN PLUS de leur classe : c'est `svg.ic` (base.css) qui tient la
   convention de la maison — trait en currentColor, aucun remplissage. Sans elle, le navigateur
   REMPLIT le tracé par défaut et la coche se peint en triangle noir plein (vu à l'écran avant
   correction). Le sélecteur est donc préfixé `svg.` ici : à spécificité égale avec `svg.ic`,
   c'est l'ordre de chargement (modals.css après base.css) qui donne la taille à celui-ci. */
svg.pick-caret { flex: 0 0 auto; width: 16px; height: 16px; color: var(--ink-muted); }
.pick:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* La liste, dans la feuille ordinaire. */
.pick-list { margin-top: 14px; display: flex; flex-direction: column; gap: 2px; }
.pick-group { display: flex; flex-direction: column; gap: 2px; }
/* Même mesure que .pick-lab ci-dessus : sur --sheet-bg, l'encre atténuée vaut 4,23:1 en Terrain.
   Le registre de bande de la maison (.mat-group, .ex-band) tient ici à la GRAISSE et à
   l'approche — pas à l'atténuation, qui sur ce fond-là passe sous AA. */
.pick-group-h { font: 600 11.5px/1.35 var(--font); letter-spacing: .06em; color: var(--ink); margin: 14px 0 4px; }
.pick-group:first-child .pick-group-h { margin-top: 2px; }
/* 48px : une ligne qu'on vise avec un pouce, dans une feuille tenue à une main. */
.pick-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px;
  padding: 9px 12px; text-align: left;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
  color: var(--ink);
}
.pick-row-t { flex: 1 1 auto; min-width: 0; }
.pick-row-t b { display: block; font: 600 15px/1.3 var(--font); color: var(--ink); }
.pick-row-meta { display: block; margin-top: 2px; font: 400 12.5px/1.35 var(--font); color: var(--ink); }
/* L'option retenue : un FOND, un contour, et une COCHE. Trois signaux, dont deux qui ne sont pas
   une teinte — un état ne se signale jamais par la seule couleur (D7). */
.pick-row.on { background: var(--school-soft); border-color: var(--school-line); }
.pick-row.on .pick-row-t b { color: var(--school); }
svg.pick-row-check { flex: 0 0 auto; width: 18px; height: 18px; color: var(--school); visibility: hidden; }
.pick-row.on .pick-row-check { visibility: visible; }
.pick-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
@media (prefers-reduced-motion: no-preference) {
  .pick, .pick-row { transition: background-color .12s ease, border-color .12s ease; }
}
:root[data-calme="1"] .pick, :root[data-calme="1"] .pick-row { transition: none; } /* U2 */