/* screens/atelier.css — « L'atelier ».  Split out of app.css by S0. TOKENS ONLY.
   Bloc TechniqueView + la grille de matières (l'index) + l'arc d'une matière (le détail).

   ⚠ Seam 3 (tokens.css, en-tête) : AUCUNE valeur de couleur n'entre dans ce fichier — pas de
   hex, pas de rgb(), pas de nom de couleur (`white` en est un). La porte est tenue par une
   machine : node scripts/famille-gate.js, porte COULEURS.
   Les quatre niveaux de la grille de compétences se peignent donc AVEC les lumières de l'app
   (ici l'école) et rien d'autre : voir `.rub-*` plus bas. */

/* ── §2.2 · UN seul geste monté à la fois ──────────────────────────────────────────────────
   Le bloc n'a plus de titre à lui : le nom de la technique est sur le déclencheur du picker
   (« Technique · Le double pas »), donc `.tech-block b` a été retiré avec lui. Au passage le
   préfixe emoji a disparu — il ne connaissait que le judo et le basket et retombait sur 🏀 pour
   le football, le handball et le rugby. */
.tech-block { margin-top: 14px; }
/* Les quatre contrôles de la carte respirent : un picker, puis ce qu'il commande. */
.sport-row { margin-top: 12px; }

/* ── U2.3 · P3 · le geste, PILOTÉ ──────────────────────────────────────────────────────────
   Quatre rangs sous le terrain : la phrase du temps, les temps en points, le transport + le
   zoom, les points de vue. Le bloc vit dans la carte « Le sport », donc TOUT s'allume dans la
   lumière sport (`--sport`) — jamais l'école, qui est celle du programme, et jamais une
   cinquième teinte : l'app en a trois et n'en aura pas une de plus (§3 invariant 4).

   ⚠ D7 — aucun état ne se signale ici par la seule teinte : la vue active porte une COCHE
   (`i-check`, le même glyphe que l'option retenue d'un F.picker) et « Ralenti » aussi. La CSS
   ne fait que renforcer ce que le glyphe et `aria-pressed` disent déjà. */

/* La phrase du temps. Le repère (« 5 · L'extension ») en gras dans l'encre sport, la consigne à
   la suite en encre normale : une seule ligne de lecture, pas deux blocs à recoller. */
.tech-say { margin: 10px 0 0; font: 400 13px/1.4 var(--font); }
.tech-say b { font: 600 13px/1.4 var(--font); color: var(--sport-ink); }

/* Les temps. Même rampe que l'arc des matières — une lumière, deux poids, jamais une deuxième
   teinte qui pourrait s'inverser d'un thème à l'autre. `aria-hidden` : la phrase du dessus dit
   déjà « 5 · … », ces points-là ne sont qu'un repère pour l'œil. */
.tech-dots { display: flex; gap: 5px; margin-top: 8px; }
.tech-dots i { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-3); }
.tech-dots i.on { background: var(--sport); }

/* Le rang de commandes : le geste à gauche (‹ ⏸ ›), le cadre à droite (− 85 % +).
   44 px DE CÔTÉ, et c'est une décision, pas un arrondi : la maquette dessine 36 px et un `.btn`
   de l'app en fait 33, mais ce rang-ci est le seul de l'écran qu'on tape et retape — avancer
   d'un temps, reculer, élargir. 44 px est le plancher que l'app s'est déjà donné exactement pour
   ce cas (la pastille de classe de U2.1, `.quote button` de base.css) ; les deux boutons du bas
   restent des `.btn` ordinaires parce qu'on les touche une fois.
   Les six commandes tiennent la largeur : 3×44 + 2×6 à gauche, 44 + 44 + 44 + 2×6 à droite,
   soit 288 px dans les ~314 px utiles d'une carte à 390 (§3.14 : scrollWidth === 390). */
.tech-ctl { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.tech-ctl .tech-grp { display: flex; align-items: center; gap: 6px; }
.tech-ctl .ib {
  width: 44px; height: 44px; flex: none; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: 50%;
  background: var(--surface);
}
.tech-ctl .ib svg { width: 17px; height: 17px; }
.tech-ctl .ib:active { transform: translateY(1px); }
/* Lecture/pause est la commande principale du rang : elle prend la lumière sport, comme un
   `.btn.pri`. Le glyphe change (i-play ⇄ i-pause) — la teinte, elle, ne dit rien à elle seule. */
.tech-ctl .ib.play { background: var(--sport); color: var(--ink-on-sport); border-color: transparent; }
/* L'étiquette du zoom, en chiffres tabulaires : « 85 % » et « 100 % » ne doivent pas faire
   sauter les deux boutons qui l'encadrent. `min-width` réserve la place des trois chiffres. */
.tech-z {
  font: 600 12.5px/1 var(--font); color: var(--ink-muted);
  font-variant-numeric: tabular-nums; min-width: 44px; text-align: center; white-space: nowrap;
}

/* Les points de vue, tels que la donnée les écrit (`tech.view.presets`) — quatre par geste.
   Une vraie cible de doigt (44 px) parce qu'ils sont dans le même geste que le rang du dessus,
   et la COCHE sur la vue active (D7). */
.tech-chips { display: flex; gap: 6px; margin-top: 10px; }
.tech-chip {
  flex: 1; min-height: 44px; padding: 6px 4px;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  font: 600 11.5px/1.2 var(--font); border-radius: var(--r-pill);
  background: var(--chip-bg); color: var(--chip-ink); border: 1px solid transparent;
}
.tech-chip svg { width: 12px; height: 12px; flex: none; }
.tech-chip.on { background: var(--sport-soft); color: var(--sport-ink); border-color: var(--sport-line); }
.tech-chip:active { transform: translateY(1px); }

/* ── P1 · la classe en pastille, dans l'en-tête de la carte ────────────────────────────────
   Le MÊME F.picker que les sept autres menus de l'app — même feuille, même clavier, même
   annonce ARIA — avec une seule chose de changée : sa forme. `.pick` est un CHAMP pleine
   largeur ; dans un `.clhead` il doit se lire comme une valeur posée à droite du titre, donc
   une pastille qui ne prend que sa place.

   Ce qui NE change pas, et c'est délibéré : la hauteur reste une vraie cible de doigt et la
   valeur reste à 16px (modals.css, D3). La maquette dessine une pastille de 26px de haut ;
   26px, c'est la moitié d'un pouce de parent à 19h40, et l'app s'est donné 48px pour ce même
   contrôle partout ailleurs. Le compromis tenu ici : 44px, la cible minimale, au lieu de 48.

   `.pick-lab` (« Classe ») ne se peint plus : la place est celle d'une pastille et le niveau
   se lit seul (« CE2 »). Il reste dans l'`aria-label` du déclencheur, que `paint()` compose
   en « Classe : CE2 » — c'est l'oreille qui garde le libellé, pas l'œil. */
.clhead .pick.pick-pill {
  width: auto; min-height: 44px; padding: 9px 14px; gap: 8px;
  background: var(--chip-bg); border-radius: var(--r-pill);
}
.clhead .pick.pick-pill .pick-lab { display: none; }
.clhead .pick.pick-pill .pick-val { flex: 0 1 auto; }

/* ── P1 · les matières en grille ───────────────────────────────────────────────────────────
   Trois colonnes, 8px de gouttière : dix-neuf matières tiennent sur un écran et demi au lieu
   d'un menu à ouvrir. `min-height` laisse la place à un libellé sur deux lignes (« Vélo &
   sécurité routière ») sans que la rangée se déforme quand la voisine tient sur une. */
.mat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.mat-tile {
  display: flex; flex-direction: column; gap: 7px; min-height: 74px;
  padding: 10px 10px 9px; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.mat-tile b { font: 600 12.5px/1.2 var(--font); }
.mat-tile small { font: 500 11px/1.25 var(--font); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
/* `margin-top:auto` sur l'arc : le libellé reste en haut, l'arc ET le compte se collent au bas.
   Une rangée dont un libellé tient sur deux lignes garde donc ses trois arcs alignés. */
.mat-tile .arc { margin-top: auto; }
/* « En construction » (2026-09-10, G-LIVE ouvert par Steven) — un atelier visible et nommé pour
   ce qu'il est, plutôt que caché : une pastille sur la tuile, une ligne en tête du détail. Dans
   la lumière école, sans deuxième teinte, comme l'arc et la bande ; jamais du rouge (`--danger`
   est réservé, et ceci n'est pas une alerte). */
.mat-chantier {
  align-self: flex-start; padding: 1px 6px; border-radius: 999px; white-space: nowrap;
  font: 600 9.5px/1.5 var(--font); letter-spacing: .04em; text-transform: uppercase;
  color: var(--school); border: 1px solid var(--school-line); background: var(--surface);
}
.mat-chantier-note {
  margin: 0 0 8px; padding: 10px 12px;
  border: 1px dashed var(--school-line); border-radius: var(--r-sm);
  font: 500 12.5px/1.45 var(--font); color: var(--ink-muted);
}
.mat-chantier-note b { color: var(--school); font-weight: 600; }
/* L'arc : un segment par période. Une seule lumière (l'école), trois poids — plein, trait,
   éteint — exactement la rampe des pastilles `.rub-*` plus bas, et pour la même raison : une
   échelle qui ne dépend d'aucune deuxième teinte ne peut pas s'inverser d'un thème à l'autre.
   Il est `aria-hidden` : ce qu'il dit, la ligne « n / N » et l'`aria-label` le disent en mots. */
.arc { display: flex; gap: 3px; }
.arc i { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-3); }
.arc i.full { background: var(--school); }
.arc i.part { background: var(--school-line); }
/* La bande de groupe (§3.1), dessinée seulement quand la grille est dépliée. Même registre que
   `.ex-band` (apprendre.css) : la graisse et l'approche, jamais des capitales — « Les ateliers »
   est un nom, pas une étiquette. Elle traverse la grille pour rompre la rangée. */
.mat-band {
  grid-column: 1 / -1; margin: 6px 0 -1px;
  font: 600 11.5px/1.35 var(--font); letter-spacing: .06em; color: var(--school);
}
/* « Voir les N autres » — une ligne pleine largeur au pied de la grille, dans la lumière
   école : ce n'est pas un bouton d'action, c'est le reste de la même liste. */
.mat-more {
  grid-column: 1 / -1; min-height: 44px; text-align: center;
  font: 600 12px/1.35 var(--font); color: var(--school); padding: 8px;
}

/* Les menus de la bibliothèque OUVERTE sont des F.picker (modals.js/modals.css) depuis le
   2026-08-15 : le `<select>` natif rendait sa liste d'options illisible (1,05:1 mesuré) et, sur
   téléphone, ignorait la CSS de l'auteur de toute façon. `.explore-picks` reste l'enveloppe et
   vit dans apprendre.css — une classe CSS s'applique par nom, pas par fichier. */
/* Le picker de matière du détail s'aligne sur les cartes qu'il surplombe, comme `.mat-back`. */
.mat-pick { padding: 0 20px; margin: 10px 0 0; }

/* ── le détail : l'arc d'une matière ──────────────────────────────────────────────────────── */
/* 20px, comme .list — le retour s'aligne sur les cartes qu'il surplombe, pas sur le titre (24px). */
.mat-back { padding: 6px 20px 0; }
/* ── P2 · une période = un œilleton, une séquence = une carte ──────────────────────────────
   La carte de période a disparu : elle encadrait des LIGNES, et les lignes sont devenues des
   cartes. Deux cadres imbriqués coûtaient 32px de largeur sur 390 — exactement la place que
   réclament les deux boutons de chaque séquence. Ce qui reste du cadre est son titre, en
   capitales espacées comme `.mat-band` : une bande de groupe, pas une étiquette. */
.per-eye {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  margin: 10px 2px -4px;
}
.per-eye b { font: 600 11px/1.35 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
/* Le sous-titre que quelques matières d'atelier écrivent après les mois (« la saison des
   tournois ») : casse normale, jamais dans les capitales — c'est une phrase, pas un intitulé. */
.per-eye .per-note { font: 400 12px/1.35 var(--font); color: var(--ink-muted); }
/* §3.2 — « en cours », posé sur l'œilleton de la période où l'enfant est aujourd'hui. Un MOT,
   dans la lumière école, jamais une couleur seule ni une pastille de plus dans l'échelle de la
   rubrique : il ne dit pas un RÉSULTAT, il dit un ENDROIT. D'où le contour, pas le plein.
   `margin-left:auto` le renvoie à droite — la grammaire « libellé à gauche, valeur à droite »
   de toute l'app, sans une règle de plus. */
.per-eye .per-now {
  flex: none; margin-left: auto;
  font: 600 10px/1 var(--font); letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 8px; border-radius: var(--r-pill);
  background: none; color: var(--school); border: 1px solid var(--school-line);
}

/* La carte d'une séquence. `strong` descend de 15.5px à 14.5px : un titre de séquence fait
   souvent deux lignes (« Retour aux nombres : lire, écrire, comparer jusqu'à 1 000 ») et quinze
   cartes s'enchaînent — la mesure garde la colonne lisible sans la faire crier. La règle du mode
   « grande lecture » (base.css `:root[data-lecture="large"] .card strong`) est PLUS spécifique et
   l'emporte toujours : le confort de lecture n'est pas repris ici. */
.seq strong { display: block; font: 600 14.5px/1.3 var(--font); }
/* La ligne d'état : le code et le nombre à gauche, le statut à droite. `flex-wrap` est la garde
   anti-débordement — sur « à revoir · 12 déc. 2025 » plus un code long, la ligne passe à deux
   plutôt que d'élargir l'écran (§3.14 : scrollWidth === 390). */
.seq .meta {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
  margin-top: 5px; font: 500 12.5px/1.35 var(--font); color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
/* Le statut travaillé prend la lumière école ; « pas commencé » reste en encre atténuée. La
   COULEUR n'est ici qu'un renfort — l'information est le mot, dans les deux cas (D7). */
.seq .meta .st { flex: none; font-weight: 600; color: var(--school); }
.seq .meta .st.todo { font-weight: 500; color: var(--ink-muted); }
/* U1.2 (famille-faisabilité) — « dont 3 sur la feuille ». La composition de la séquence, sous le
   compte qu'elle qualifie. Elle prend la MESURE de `.meta` (12.5px, 500, chiffres tabulaires) et
   non celle du thème : c'est la même phrase que la ligne du dessus, continuée — pas une seconde
   information sur la séquence. 3px seulement les sépare, contre 6 avant le thème, pour que l'œil
   lise « 12 exercices / dont 3 sur la feuille » d'un seul bloc.
   Aucune teinte propre : elle ne dit ni un résultat ni un état, elle décrit un contenu. La
   nommer en couleur en ferait une alerte, et une séquence sur papier n'est pas un problème. */
.seq .seq-pap {
  margin-top: 3px; font: 500 12.5px/1.35 var(--font); color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
/* §3.3 — le thème officiel du programme. Discret par construction (il sert à écarter, pas à
   lire), et jamais dessiné quand le curriculum ne le porte pas. */
.seq .seq-sub { margin-top: 6px; font: 400 11.5px/1.35 var(--font); color: var(--ink-muted); }

/* ── la grille de compétences ──────────────────────────────────────────────────────────────
   ⚠ P2 (2026-09-03) — CE BLOC N'A PLUS DE PRODUCTEUR DANS CET ÉCRAN, et il reste quand même.
   La carte de séquence porte `litB` quand la séquence est travaillée, et `.card.litB` peint le
   fond en --school-soft, qui est EXACTEMENT le fond de `.rub-atteint` : la pastille se serait
   fondue dans sa carte — le défaut consigné le 2026-08-13, reproduit à l'identique. Le barreau
   est donc passé dans le MOT du statut (`.seq .meta .st`), qui ne dépend d'aucun fond.
   Les règles restent pour deux raisons, pas par oubli : apprendre.css:166 les cite comme
   l'explication canonique de la rampe « une lumière, quatre poids », et les cartes d'escale du
   cahier (Loop 4) sont le producteur suivant annoncé. Elles ne peignent rien aujourd'hui.

   Quatre pastilles, quatre MOTS (jamais un glyphe seul, jamais une couleur seule — D7).
   Pas de rouge : `--danger` est réservé, et un « À revoir » gris se relit sans se punir.

   UNE SEULE LUMIÈRE, QUATRE POIDS — et c'est une correction, pas un goût. La première version
   du produit source peignait « En partie » avec --voice, et selon le thème cette lumière-là
   ressortait PLUS que celle d'« Atteint » : l'échelle s'inversait, le troisième niveau se lisait
   comme le meilleur. La règle qui en est sortie survit au port Caribbein (où --voice est l'ambre
   de l'app) parce qu'elle ne dépend d'aucune teinte : les quatre pastilles restent sur --school
   (c'est du travail d'école) et ne varient que par le POIDS : plein → fond léger → contour seul
   → neutre. Cette rampe-là descend toujours dans le même ordre.

   Le sélecteur porte deux classes (`.ag .rub-*`) parce que `.ag span { color: var(--ink-muted) }`
   de base.css a la même spécificité qu'une classe simple et l'emporterait sinon. */
.ag .rub {
  flex: none; align-self: center;
  font: 600 11px/1 var(--font); letter-spacing: .01em;
  padding: 5px 9px; border-radius: var(--r-pill); border: 1px solid transparent;
}
.ag .rub-depasse { background: var(--school);      color: var(--ink-on-school); }
.ag .rub-atteint { background: var(--school-soft); color: var(--school);    border-color: var(--school-line); }
.ag .rub-partiel { background: none;               color: var(--school);    border-color: var(--school-line); }
.ag .rub-revoir  { background: var(--surface-3);   color: var(--ink-muted); border-color: var(--line); }


/* ── U2.4 · P4 · « Reprendre », la bande du haut ────────────────────────────────────────────
   La carte est `card litV` : l'ambre, la troisième lumière. Ce n'est pas une décoration — la
   bande porte À LA FOIS du travail d'école (la séquence, teal) et du sport (le geste, corail),
   et l'allumer de l'une des deux ferait mentir l'autre. L'ambre est la lumière qui n'appartient
   à aucune des deux disciplines, celle du cahier de vacances et de la voix de l'enfant.

   Deux étages, séparés par un pointillé : la séquence avec sa porte à droite, puis le dernier
   geste sportif. Le trait ne se dessine QUE sous un étage (`.sep`) — un filet de séparation seul
   en tête de carte ne sépare rien du tout.

   Les boutons restent des `.btn` de base.css (33 px) : on les touche UNE fois. Le plancher de
   44 px que ce fichier s'est donné en U2.1/U2.3 vise les commandes qu'on tape et retape (la
   pastille de classe, le transport du geste) — l'appliquer ici désaccorderait « Continuer » de
   « Ouvrir », deux écrans plus loin, sur le même objet. */
.rep-top { display: flex; align-items: center; gap: 12px; }
.rep-txt { flex: 1; min-width: 0; }
/* L'œilleton en ambre, la même forme que celui de `.quote` (base.css) : capitales espacées,
   10.5 px, la lumière de la carte. C'est le seul mot de l'écran qui se lit avant le titre. */
.rep-txt small { display: block; font: 600 10.5px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--voice); }
.rep-txt b { display: block; font: 600 14px/1.3 var(--font); margin-top: 4px; }
.rep-txt span { display: block; font: 400 12px/1.35 var(--font); color: var(--ink-muted); margin-top: 2px; }
.rep-top > .btn { flex: none; }
.rep-sport { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 400 12.5px/1.35 var(--font); color: var(--ink-muted); margin-top: 10px; }
.rep-sport.sep { padding-top: 10px; border-top: 1px dashed var(--line-dashed); }
.rep-sport b { color: var(--ink); font-weight: 600; }
.rep-sport > .btn { flex: none; }

/* ── « Le plan » — la leçon d'une séquence (2026-09-11, version 3) ─────────────────────────────
   La carte de mission, trois lignes qui se plient, la tuile méthode, le déroulé en soirs, la
   question du dîner. Tout dans la lumière école et les tokens ; jamais une deuxième teinte, et
   jamais du rouge (`--danger` est réservé). Une ligne pliée garde sa phrase : le pli n'enlève
   que le détail. Le papier (print.css) déplie tout — ce que l'écran replie, la feuille le montre. */
.seq-plan { display: inline-block; margin-top: 6px; font: 600 12.5px/1.4 var(--font); color: var(--school); }
.plan-soirs { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.plan-soir { padding: 2px 8px; border-radius: var(--r-pill); font: 600 11px/1.6 var(--font); border: 1px solid var(--line-2); color: var(--ink-muted); background: var(--surface); }
.plan-soir.now { border-color: var(--school); color: var(--school); }
.plan-rows { display: flex; flex-direction: column; }
.plan-row { border-top: 1px solid var(--line); }
.plan-row:first-child { border-top: 0; }
.plan-row-b { width: 100%; display: grid; grid-template-columns: 80px 1fr 18px; gap: 10px; padding: 9px 0; align-items: start; text-align: left; }
.plan-row-b[disabled] { cursor: default; }
.plan-k { font: 600 10.5px/1.5 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--school); padding-top: 2px; }
.plan-short { font: 400 13px/1.45 var(--font); color: var(--ink); }
.plan-chev { color: var(--ink-muted); font-size: 12px; padding-top: 2px; transition: transform .18s ease; }
.plan-row.open .plan-chev { transform: rotate(180deg); }
.plan-long { display: none; padding: 0 0 10px 90px; font: 400 12.5px/1.45 var(--font); }
.plan-row.open .plan-long { display: block; }
.plan-long p { margin: 0 0 6px; }
.plan-k2 { font: 600 10.5px/1.5 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--school); margin: 8px 0 2px; }
.plan-listen { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font: 600 12px/1.4 var(--font); color: var(--school); }
.plan-tile { margin-top: 10px; border: 1px solid var(--school-line); background: var(--school-soft); border-radius: var(--r-md); padding: 10px 14px 12px; }
.plan-tile-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.plan-swap { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1.4 var(--font); color: var(--school); padding: 3px 10px; border: 1px dashed var(--school-line); border-radius: var(--r-pill); background: var(--surface); }
.plan-swap[disabled] { opacity: .45; border-style: solid; }
.plan-nom { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 4px; }
.plan-nom b { font: 600 15px/1.3 var(--font); }
.plan-qui { padding: 0 8px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--school-line); font: 400 11px/1.6 var(--font); color: var(--ink); }
.plan-court { margin: 6px 0 0; font: 400 12.5px/1.45 var(--font); color: var(--ink); }
.plan-more { display: block; margin-top: 6px; font: 600 12px/1.4 var(--font); color: var(--school); }
.plan-deep { display: none; margin-top: 10px; border-top: 1px solid var(--school-line); padding-top: 10px; font: 400 12.5px/1.45 var(--font); }
.plan-tile.open .plan-deep { display: block; }
.plan-deep h5 { margin: 8px 0 3px; font: 600 10.5px/1.5 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--school); }
.plan-deep h5:first-child { margin-top: 0; }
.plan-deep ol { margin: 0; padding-left: 18px; }
.plan-deep ol li { margin: 2px 0; }
.plan-deep p { margin: 4px 0 0; }
.plan-note { color: var(--ink-muted); font-style: italic; }
.plan-signes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.plan-signes div { padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface); font-size: 12px; }
.plan-signes b { display: block; font: 600 10.5px/1.5 var(--font); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 2px; }
.plan-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.plan-chip { padding: 2px 9px; border-radius: var(--r-pill); border: 1px solid var(--school-line); color: var(--school); font: 600 11.5px/1.5 var(--font); background: var(--surface); }
.plan-exos { margin: 4px 0 0; padding: 0; list-style: none; }
.plan-exos li { padding: 5px 0; border-top: 1px solid var(--line); display: flex; gap: 8px; font-size: 12.5px; }
.plan-exos li i { flex: 0 0 auto; font-style: normal; color: var(--ink-muted); font-variant-numeric: tabular-nums; font-size: 11.5px; }
.plan-rest { color: var(--ink-muted); padding-top: 5px; border-top: 1px solid var(--line); font-size: 12.5px; }
.plan-fold { margin-top: 10px; border: 1px dashed var(--line-2); border-radius: var(--r-md); overflow: hidden; }
.plan-fold.atelier { border-style: solid; border-color: var(--line); }
.plan-fold.soir, .plan-fold.fam { margin-top: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.plan-fold.fam { border-top-color: var(--voice-line); margin-top: 8px; }
.plan-fold-b { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; font: 600 13px/1.4 var(--font); text-align: left; }
.plan-fold.soir > .plan-fold-b { padding: 8px 0; font: 600 10.5px/1.5 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--school); }
.plan-fold.fam > .plan-fold-b { padding: 6px 0 0; font: 600 12.5px/1.4 var(--font); }
.plan-fold-body { display: none; padding: 0 12px 12px; }
.plan-fold.soir > .plan-fold-body, .plan-fold.fam > .plan-fold-body { padding: 0 0 8px; }
.plan-fold.open > .plan-fold-body { display: block; }
.plan-fold.fam > .plan-fold-body p { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-muted); }
.plan-voix { font: 600 10.5px/1.5 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 6px; }
.plan-phases { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.plan-phases li { display: grid; grid-template-columns: 40px 1fr; gap: 10px; }
.plan-min { font: 600 15px/1 var(--font); color: var(--school); font-variant-numeric: tabular-nums; padding-top: 2px; }
.plan-min small { display: block; font: 600 9.5px/1.3 var(--font); letter-spacing: .04em; color: var(--ink-muted); margin-top: 3px; }
.plan-phases b { display: block; font: 600 13px/1.4 var(--font); }
.plan-phases p { margin: 2px 0 0; color: var(--ink-muted); font: 400 12.5px/1.45 var(--font); }
.plan-worked { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.plan-worked-b { padding: 5px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface); font: 600 12px/1.4 var(--font); white-space: nowrap; }
.plan-worked-b[aria-pressed="true"] { background: var(--school); color: var(--ink-on-school); border-color: var(--school); }
.plan-worked small { font: 400 11px/1.35 var(--font); color: var(--ink-muted); text-align: right; }
.plan-q { margin: 6px 0 0; color: var(--ink); font: italic 400 14px/1.45 var(--font); }
.plan-acts { margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .plan-chev { transition: none; } }