/* screens/famille.css — « Ma famille ».  TOKENS ONLY : pas une valeur de couleur ici, seulement
   des var() de tokens.css (G1). Les cartes, les listes et le sélecteur de semaine continuent de
   réutiliser base.css et .picks (modals.css) — ce fichier n'ajoute que ce que la garde apporte.

   Propriétaires : S11 (la garde) · S20 (le fil) · S21 (les appareils) — blocs disjoints.

   ── S11, 2026-08-12 · LA GARDE ────────────────────────────────────────────────────────────
   L'assistant (« Comment ça s'organise chez vous ? »), les vacances, et la phrase du passage de
   relais. Rien ici n'est décoratif : trois choix qui doivent se lire d'un coup d'œil à 19h40, et
   deux champs de date qui doivent être saisissables d'une main. */

/* ── 11.1/11.2 · l'assistant et les vacances ─────────────────────────────── */
.garde-a,
.garde-v { margin-top: 16px; }

/* L'intitulé d'une section de la garde. Volontairement PAS `.q1` : celui-là est scopé à la
   feuille modale (`.sheet .q1`, modals.css) et appartient à S12. */
.garde-q {
  font: 600 12.5px/1.2 var(--font);
  color: var(--ink);
  letter-spacing: .03em;
  margin: 16px 0 8px;
}

/* Trois choix, l'un sous l'autre et alignés à gauche : on les LIT, on ne les compare pas. */
.garde-c { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.garde-c .btn { width: 100%; justify-content: flex-start; text-align: left; }

.garde-a label,
.garde-f label {
  display: block;
  font: 600 12px/1 var(--font);
  color: var(--ink-muted);
  margin: 12px 0 6px;
}

/* D3 : 16px minimum. En dessous, iOS Safari zoome tout seul à la mise au point du champ et le
   parent se retrouve sur une page décalée qu'il doit repincer — un champ de date posé quatre
   fois par an n'a pas le droit de coûter ça. */
.garde-a input[type="date"],
.garde-f input[type="date"] {
  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);
}

.garde-f { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line-dashed); }
.garde-f .acts,
.garde-a .acts { margin-top: 14px; }

/* (Le bloc .relais a déménagé dans soir.css à la fusion de la Wave 2 — il habille un élément
   de « Ce soir », il vit avec son écran.) */

/* Une carte enfant sur deux lignes — nom/statut, puis les deux menus (S15, Wave 3).
   16px sur les selects : au-dessous, iOS zoome au focus (règle D3). */
.ag-kid { flex-direction: column; align-items: stretch; gap: 8px; }
.ag-kid-top { display: flex; justify-content: space-between; gap: 8px; }
.ag-kid-sel { display: flex; gap: 8px; }
.ag-kid-sel select { flex: 1 1 0; min-width: 0; font-size: 16px; }

/* ── famille-in-app, 2026-09-03 · the three child pickers STACK ──────────────────────────────
   Steven's phone: « some of the dropdowns are getting out of the frame which makes the app
   wider ». Measured: 841px of page on a 390px viewport. The rule above sizes `select` children —
   these have been F.picker buttons since 2026-08-15 (§2.1) and never got a rule, so each took
   its full width and the row spilled 451px past the edge. Three labelled fields do not fit side
   by side at 390px anyway: one under the other, each 48px, each readable. */
.ag-kid-sel { flex-direction: column; }
.ag-kid-sel .pick { width: 100%; min-width: 0; }