/* LA FAMILLE D'HABILLAGE, ET LA FEUILLE DE L'APPLICATION — SPEC §26.1, * ARCHITECTURE §12.1, règles de surface au SPEC §26 bis. * * CE QUE CE FICHIER EST. Les deux fonds normatifs du §26.1, tout ce qui change * avec le thème, et les règles de composition (structure, tableaux, rendu * mathématique, impression) héritées d'`essai.css`, dont ce fichier et * `semantique.css` sont la scission — passe P10, lot interface. `essai.css` * annonçait sa propre disparition pour ce lot, et elle a eu lieu. * * COMMENT LE THÈME S'APPLIQUE (ARCHITECTURE §12.1). Un attribut sur la racine * du document, écrit dans la page servie : `data-theme="clair"` ou * `"sombre"` — DEUX valeurs depuis P21 (26/08) : « comme mon appareil » * (`systeme`) a disparu de l'écran et des libellés, et les comptes qui le * portaient sont migrés (`0008`). CHAQUE VALEUR DE * COULEUR VIT UNE FOIS, en tête, en paire `-clair`/`-sombre` ; les blocs de * thème ne font que REMAPPER les variables effectives vers l'une des deux. * Un bloc de thème qui porterait une valeur littérale serait une seconde * source, qui divergerait au premier oubli — le garde * `tests/gardes/test_variables_css.py` le refuse. * * « Comme mon téléphone » (`systeme`) suivait le réglage du système par * `prefers-color-scheme` ; il a VÉCU de P10 à P21, et son bloc de remappage * est retiré — voir la note à son ancien emplacement. * * CHANGER L'UN DES DEUX FONDS INVALIDE TOUTE LA PALETTE (§26.1) : * `tests/gardes/test_contraste.py` recalcule les dix-huit contrastes depuis ce * fichier et `semantique.css`, et refuse un fond sombre éclairci — le cas * qu'une liste figée manque (§26.5). * * AUCUNE COULEUR SÉMANTIQUE ICI : juste/faux, signes, courbes et statuts * vivent dans `semantique.css`, invariants au thème (`T-02`). * * LES FACES SONT EMBARQUÉES, JAMAIS TÉLÉCHARGÉES D'UN TIERS (ARCHITECTURE * §6.1). Tranché par Kenny le 23/08 (`DU-19`) — critère : la couverture des * glyphes avant l'esthétique — et servi le 24/08, passe P11a. Les fichiers * vivent sous `polices/`, avec leurs licences (SIL OFL 1.1) et leur * provenance (`polices/LISEZ_MOI.md`) ; le garde * `tests/gardes/test_polices_embarquees.py` mesure leur table `cmap` et * refuse toute face qui ne couvrirait pas l'inventaire des glyphes servis. * * UNE SEULE FAMILLE — SPEC §26 bis.1.1, décision de Kenny du 26/08 (passe * P22) : TOUT le texte servi est en IBM Plex Serif — l'énoncé et la notation * comme les titres, les boutons, les libellés de formulaire et la console. * * La séparation serif/sans de P19 (« ce que l'élève lit pour réfléchir » en * serif, « ce sur quoi il agit » en Atkinson) était une décision de session, * présentée dans un récapitulatif non contesté — un silence n'est pas un * choix. Ce que Kenny a choisi, c'est IBM Plex Serif, sur comparaison de * quatre rendus, et il l'attend partout où elle peut servir. La règle des * deux familles était GÊNANTE, pas fausse (CLAUDE.md §8.14) : une famille * unique compose des écrans corrects. * * LA LIMITE DE LA RÈGLE, ET IL FAUT LA CONNAÎTRE : l'énoncé est rendu PAR LE * SERVEUR (macro `expression` de `gabarits/mathematiques.html`), donc Plex * Serif gouverne bien la notation AFFICHÉE. Elle ne gouverne PAS ce que * MathLive compose dans le champ de saisie : ses fontes KaTeX sont chargées à * part (`statique/mathlive/fontes.css`), seulement sur saisie libre, et * aucune règle de cette feuille ne les atteint. * * ATKINSON ET INTER RESTENT EMBARQUÉES ET NE SONT SERVIES PAR RIEN (`DU-133`). * Ne pas les retirer : Atkinson ne couvre pas U+2192 quand Inter le couvre, * et c'est Inter qui fait passer `test_polices_embarquees` — retirer une face * ferait rougir le garde pour un glyphe que rien ne sert. Leurs `@font-face` * restent déclarées (le précédent d'Inter depuis P19) : une famille qu'aucune * règle ne nomme n'est jamais téléchargée par le navigateur. * * L'ATTRIBUTION DES GLYPHES EST DÉCIDÉE PAR `unicode-range`, PAS ÉMERGENTE. * Une chaîne de repli laisse le navigateur décider ; ici, la mesure a décidé * (24/08 pour les deux faces sans empattement, 25/08 pour Plex Serif — table * `cmap` contre l'inventaire du garde) : * · six points de code manquent à Atkinson, à Inter ET à IBM Plex Serif — * U+0305 (barre du complémentaire), U+211D (ℝ), U+2229 (∩), U+222A (∪), * U+2A7D (⩽), U+2A7E (⩾) — et viennent de Noto Sans Math, sous-ensemblée * à ces six. **Plex Serif manque EXACTEMENT les six mêmes** (mesuré le * 25/08 par le garde sur sa table `cmap` : 930 points de code) : le repli * la sert donc sans qu'une ligne de ce mécanisme change ; * · tout le reste de l'inventaire est mesuré couvert par les trois faces de * prose, et leur `unicode-range` est « tout sauf ces six ». * *DEPUIS LE 30/09/2026 (P117-UX2, réponses Q3 et Q3 bis de Kenny ; * `DU-133`), HUIT : ∅ (U+2205, l'écriture d'un ensemble de solutions) et * ⋯ (U+22EF, le menu du rail), qu'aucune face servie ne portait (le * navigateur les prenait à la pile système, Cambria Math au poste), * viennent aussi de Noto, sous-ensemblée à huit ; les faces de prose les * excluent, et `test_le_repli_sert_seul_les_glyphes_du_sous_ensemble` * tient les deux plages contre la table `cmap` du sous-ensemble.* * Un glyphe HORS inventaire (une saisie libre de l'élève) suit la même liste * et retombe sur la pile système en dernier ressort — comme avant ce lot. * * BUDGET D'ANIMATION : ZÉRO (§26 bis). Aucune propriété `animation` ni * `transition` dans cette feuille ; la préférence de réduction des animations * est donc respectée par vacuité, et le jour où une animation entrerait, la * règle du §26 bis exige qu'elle vive sous * `@media (prefers-reduced-motion: no-preference)` et dure 200 ms au plus. */ /* ══════════════════════════════════════════════════════════════════════════ * LES FACES EMBARQUÉES — SPEC §26 bis.1.1, décision de Kenny du 23/08. * Deux graisses par face de prose, 400 et 600, et pas une de plus (§26 * bis.1.3). Le repli mathématique n'a qu'une graisse : Noto Sans Math * n'existe qu'en Regular, et les huit glyphes qu'elle sert ne sont jamais * composés en gras dans un énoncé — si un `font-weight: 600` les atteint, le * navigateur les épaissit lui-même, et c'est le seul cas de gras synthétique * admis dans cette feuille. * * `unicode-range` des faces de prose : TOUT SAUF les huit points de code du * repli — voir l'en-tête. Les intervalles s'écrivent par exclusion pour que * l'attribution de chaque glyphe de l'inventaire soit décidée une fois. * ══════════════════════════════════════════════════════════════════════════ */ /* Atkinson et Inter : embarquées, DÉCLARÉES, servies par AUCUNE règle depuis * P22 (une seule famille — en-tête). Une `@font-face` que rien ne nomme n'est * pas téléchargée ; les fichiers restent au dépôt pour la couverture du garde * (`DU-133` : U+2192 n'est couvert que par Inter). */ @font-face { font-family: "Atkinson Hyperlegible Next"; src: url("polices/AtkinsonHyperlegibleNext-Regular.88ed5c31a715.ttf") format("truetype"); font-weight: 400; font-style: normal; unicode-range: U+0000-0304, U+0306-211C, U+211E-2204, U+2206-2228, U+222B-22EE, U+22F0-2A7C, U+2A7F-10FFFF; } @font-face { font-family: "Atkinson Hyperlegible Next"; src: url("polices/AtkinsonHyperlegibleNext-SemiBold.8e2fff779f35.ttf") format("truetype"); font-weight: 600; font-style: normal; unicode-range: U+0000-0304, U+0306-211C, U+211E-2204, U+2206-2228, U+222B-22EE, U+22F0-2A7C, U+2A7F-10FFFF; } @font-face { font-family: "Inter"; src: url("polices/Inter-Regular.40d692fce188.ttf") format("truetype"); font-weight: 400; font-style: normal; unicode-range: U+0000-0304, U+0306-211C, U+211E-2204, U+2206-2228, U+222B-22EE, U+22F0-2A7C, U+2A7F-10FFFF; } @font-face { font-family: "Inter"; src: url("polices/Inter-SemiBold.78a843fade9d.ttf") format("truetype"); font-weight: 600; font-style: normal; unicode-range: U+0000-0304, U+0306-211C, U+211E-2204, U+2206-2228, U+222B-22EE, U+22F0-2A7C, U+2A7F-10FFFF; } /* LA FAMILLE SERVIE — IBM Plex Serif, choisie par Kenny le 25/08 (P19, alors * pour le seul contenu) et étendue à tout le texte le 26/08 (P22, en-tête). * Le rapport hauteur d'x sur capitale a tranché entre deux serifs libres, * parce que c'est lui qui décide si un mélange avec le repli mathématique * paraît voulu ou subi : * * Atkinson Hyperlegible Next x/cap = 0,7425 * IBM Plex Serif Regular x/cap = 0,7393 écart 0,003 ← retenue * IBM Plex Serif SemiBold x/cap = 0,7479 * Source Serif 4 x/cap = 0,709 écart 0,034 ← écartée * * Source Serif a été écartée sur un second motif, qui n'est pas l'esthétique : * son écart au REPLI Noto Sans Math (x/cap = 0,7507) atteint 0,042 — et Noto * sert six glyphes qui paraissent AU MILIEU d'une expression, entourés de * serif. L'écart s'y serait vu dans le mot même. * * SERVIE EN `.woff`, ET C'EST LE FICHIER OFFICIEL D'IBM, PAS UNE CONVERSION. * Le `.woff` de la publication `@ibm/plex-serif@2.0.0` pèse 90 404 et 96 072 * octets, contre 217 332 et 222 876 pour les `.ttf` de la même publication : * 253 732 octets de moins servis à un téléphone, pour la même table de glyphes. * Le garde sait le mesurer (`FORMATS_MESURABLES`, décodeur WOFF 1.0 maison) — * `.woff2` reste refusé, faute de savoir en lire la `cmap`. */ @font-face { font-family: "IBM Plex Serif"; src: url("polices/IBMPlexSerif-Regular.4c09eb709664.woff") format("woff"); font-weight: 400; font-style: normal; unicode-range: U+0000-0304, U+0306-211C, U+211E-2204, U+2206-2228, U+222B-22EE, U+22F0-2A7C, U+2A7F-10FFFF; } @font-face { font-family: "IBM Plex Serif"; src: url("polices/IBMPlexSerif-SemiBold.12614abbd2f0.woff") format("woff"); font-weight: 600; font-style: normal; unicode-range: U+0000-0304, U+0306-211C, U+211E-2204, U+2206-2228, U+222B-22EE, U+22F0-2A7C, U+2A7F-10FFFF; } /* L'ITALIQUE — P22 (point 2 ter), 26/08 : la note de la restitution et la * phrase du manque de « Mes données » se composent en italique, qui est une * FACE de la même famille, jamais une troisième graisse (§26 bis.1.3). Elle * est EMBARQUÉE — une italique synthétisée (oblique) varierait d'un appareil * à l'autre, le motif exact du refus du gras synthétique. Même publication * officielle IBM que les deux faces droites, couverture MESURÉE : 930 points * de code, les mêmes, et les six manques sont ceux du repli. Elle n'est * téléchargée que par les pages qui composent de l'italique. */ @font-face { font-family: "IBM Plex Serif"; src: url("polices/IBMPlexSerif-Italic.ad355966a258.woff") format("woff"); font-weight: 400; font-style: italic; unicode-range: U+0000-0304, U+0306-211C, U+211E-2204, U+2206-2228, U+222B-22EE, U+22F0-2A7C, U+2A7F-10FFFF; } @font-face { /* LE REPLI MATHÉMATIQUE — sous-ensemble de Noto Sans Math (9 560 octets * contre 1 015 684 pour la face entière) : embarquer 2 655 glyphes pour en * servir six serait du poids servi à un téléphone pour rien. Le garde * recalcule l'inventaire à chaque exécution : un sous-ensemble devenu * insuffisant fait ROUGIR `test_polices_embarquees`, jamais silence. */ font-family: "Noto Sans Math"; src: url("polices/NotoSansMath-SousEnsemble.f3f6c96cba85.ttf") format("truetype"); font-weight: 400; font-style: normal; unicode-range: U+0305, U+211D, U+2205, U+2229-222A, U+22EF, U+2A7D-2A7E; } :root { /* ── LA PALETTE, CHAQUE VALEUR UNE FOIS ───────────────────────────────── * * REVUE ENTIÈREMENT LE 25/08 (P19), décision de Kenny : LE MARINE N'EST PAS * SEULEMENT UN ACCENT, C'EST L'ENCRE — le texte lui-même tire vers le bleu. * La conséquence commande tout le reste de la colonne claire : une encre * marine sur des gris CHAUDS jure, et les gris ont donc été refaits par * mélange de l'encre et du blanc, donc froids comme elle. Les surfaces, * elles, restent le crème : c'est le papier sous l'encre, pas le trait. * * LE FOND CLAIR EST PASSÉ DE `#FFFFFF` AU CRÈME `#F3F1EC` LE 26/08 * (P19 bis), décision de Kenny — c'est l'identité qu'il a validée sur * maquette, et l'encre y rend **13,91:1**, très exactement le chiffre qu'il * avait mesuré. `DU-134` se clôt ici. * * CE QUI L'EMPÊCHAIT, ET COMMENT C'EST TOMBÉ. La veille, ce fond faisait * tomber `--semantique-partiel` (`#B8860B`) à **2,88:1** — le garde a été * mis devant ce fond exprès et l'a refusé en nommant `partiel`. La borne * mesurée alors reste vraie et vaut d'être gardée : **le fond clair le plus * sombre qui laisse les neuf couleurs au-dessus du seuil avait L ⩾ 0,9179**, * soit environ `#F8F6F0`, un crème qui ne se voit pas. Ce n'est pas le fond * qui a cédé, c'est l'ambre : `partiel` est descendu à `#9C7207`, DANS LES * DEUX THÈMES À LA FOIS — voir `semantique.css`, où le motif est écrit. * *Ce que le §26.3 interdit est de recolorer une couleur sémantique SELON * LE THÈME ; corriger une valeur qui manque son seuil ne l'entame pas.* * * LA COLONNE CLAIRE ENTIÈRE A ÉTÉ REFAITE AVEC LUI, jamais cette seule * valeur : un fond neuf change ce que chaque couleur rend dessus. La * méthode est celle de P19, appliquée au papier neuf — **les gris clairs * sont l'encre diluée par LA PAGE, à fraction d'encre INCHANGÉE** (0,199 · * 0,239 · 0,579 · 0,720) ; seul le diluant passe du blanc au crème. Les * surfaces, elles, sont le crème lui-même ASSOMBRI d'un facteur (0,964 · * 0,944 · 0,902) : une ombre garde la teinte du papier, et le pas de * chacune vers le fond est celui qu'elle tenait la veille contre le blanc. * * LE CHAMP RESTE BLANC, ET IL Y GAGNE : `#FFFFFF` sur un fond blanc ne se * distinguait que par sa bordure ; sur le crème il rend 1,13:1 et se voit. * C'est aussi le seul de la colonne qui aille vers le CLAIR quand les * surfaces vont vers l'encre — parce qu'on écrit SUR du papier blanc. * * CONTRASTES MESURÉS (WCAG 2.1), clair / sombre : * texte 13,91 / 14,99 · texte fort 15,92 / 16,82 · * texte atténué 5,91 / 6,95 · accent 12,40 / 8,84. */ --habillage-fond-clair: #F3F1EC; --habillage-fond-sombre: #16161A; --habillage-texte-clair: #12233F; --habillage-texte-sombre: #E8EAEF; /* L'ENCRE RENFORCÉE — l'énoncé, §26 bis.1.7. À corps réduit, une encre * marine paraît MOINS foncée : moins de matière pour la même couleur. Ce * n'est pas une seconde encre, c'est la même densifiée. */ --habillage-texte-fort-clair: #0B1729; --habillage-texte-fort-sombre: #F5F7FB; --habillage-texte-attenue-clair: #515D70; --habillage-texte-attenue-sombre: #9BA1AC; /* LA BORDURE DE BLOC — c'est elle qui S'EFFACE en sombre (§26 bis.5 bis) : * 1,49 sur le fond clair, 1,23 sur le fond sombre. */ --habillage-bordure-clair: #C6C8CA; --habillage-bordure-sombre: #26282F; /* LE TRAIT FONCTIONNEL — la ligne d'un tableau, entrée le 25/08, et il * existe pour que l'asymétrie des thèmes ne coûte rien à la JUSTESSE : une * ligne de relevé qu'on lit de travers donne une information fausse (voir * `.releve` plus bas). Il garde donc sa force dans les DEUX thèmes — * 1,62 sur le fond clair, 1,64 sur le fond sombre — là où la bordure de * bloc s'efface. */ --habillage-trait-clair: #BDC0C3; --habillage-trait-sombre: #3A3C42; --habillage-bordure-forte-clair: #717A88; --habillage-bordure-forte-sombre: #4A4F59; /* LES TROIS SURFACES CLAIRES SONT LE CRÈME DU FOND, ASSOMBRI — 26/08 * (P19 bis). Elles valaient le crème lui-même jusqu'à ce jour ; le crème * étant devenu le FOND, une surface qui l'aurait gardé rendrait 1,000:1 et * ne serait plus une surface. Chacune reprend le pas qu'elle tenait contre * le blanc la veille : légère 1,08 · surface 1,13 · active 1,25. */ --habillage-surface-clair: #E5E4DF; --habillage-surface-sombre: #1E1F25; --habillage-surface-legere-clair: #EAE8E4; --habillage-surface-legere-sombre: #1C1D23; /* LA SURFACE ACTIVE — le troisième niveau, entré le 25/08. En sombre, c'est * lui qui SÉPARE : fond #16161A · surface #1E1F25 · active #24262D. */ --habillage-surface-active-clair: #DBD9D5; --habillage-surface-active-sombre: #24262D; --habillage-champ-clair: #FFFFFF; --habillage-champ-sombre: #1B1C21; /* LE FOND D'INFORMATION — P44 (01/09), décision de Kenny : le bleu clair de * sa maquette du 31/08 entre à la palette, sur SPECIMEN VALIDÉ le 1er * septembre (les deux thèmes, valeurs et contrastes). P43 avait posé * l'encadré du changement de type sur la surface crème en publiant l'écart * — « une couleur neuve est une décision de charte, pas un geste de * correction » — ; la décision de charte est prise, et c'est celle-ci. * * POURQUOI CE N'EST PAS L'ACCENT SOMBRE, et la question a été posée : * `#93B9E3` est le bleu clair des boutons, mais c'est l'ACCENT — une encre * et un filet, jamais un fond. En fond de thème sombre il rendrait le * texte clair illisible — mesuré : `--habillage-texte-sombre` y rend * 1,70:1, le texte fort 1,90:1. Le seul texte qui passe sur l'accent * sombre est l'encre du thème clair (7,69:1), et c'est exactement ce que * `--habillage-sur-accent-sombre` dit déjà. Le fond d'information sombre * est donc un bleu SOMBRE de la famille de l'encre, pas l'accent. * * CONTRASTES MESURÉS (01/09, formules du garde), sur le fond neuf, * clair/sombre : texte 13,07/13,10 · fort 14,97/14,71 · atténué 5,55/6,07 * · filet d'accent 11,66/7,73 — les trois textes au-dessus du 4,5:1, le * filet au-dessus du 3:1 graphique. Le garde du contraste RECALCULE ces * huit paires à chaque exécution et en assère le décompte * (`test_contraste.py`) : ces nombres-ci sont un témoignage daté, jamais * la source. * * LES EMPLOIS, ÉLARGIS PAR LES MAQUETTES DU 01/09 — P45 (V0.2). « Un seul * emploi » (P44, 1.5) valait jusqu'à ce que les DEUX MAQUETTES VALIDÉES de * la séance quotidienne posent le rôle en pavé d'information (« En classe * cette semaine », « Demain ») : les emplois sont désormais l'encadré du * changement de type (`[data-type-avertissement]`) et le pavé * `.pave-info` des écrans de séance — DEUX, décidés sur maquette, et * toujours pas cinq : l'interdit de l'extension « pendant qu'on y est » * reste entier, et les huit paires du garde couvrent tout texte posé sur * ce fond. */ --habillage-info-clair: #E3EBF7; --habillage-info-sombre: #1B2331; /* L'ACCENT D'INTERFACE — `ARCHITECTURE.md` §12.1 le nommait depuis le * 24/08 (« accent d'interface, anneau de focus », deux rôles) et AUCUNE * variable ne le portait : l'anneau tenait les deux. Il entre le 25/08. * Il sert QUATRE choses, recomptées le 26/08 (P19 bis) : le filet de * l'objectif, la bordure des contrôles, le filet de l'étape COURANTE de la * frise, et la marque — cette dernière SEULEMENT là où l'élève ne travaille * pas (§26 bis.1.8) : sur l'item, la revue et l'interruption, elle est en * texte atténué. La ligne disait « trois » et nommait trois emplois : le * filet de la frise, entré le 25/08 avec elle, n'y avait jamais été inscrit. * UN ACCENT NE TRAVERSE PAS LES DEUX THÈMES, et c'est mesuré : `#052962` * sur le fond sombre rend **1,29:1** — invisible. */ --habillage-accent-clair: #052962; --habillage-accent-sombre: #93B9E3; /* L'ENCRE SUR L'APLAT D'ACCENT — P21 (point 10), décision de Kenny : le * bouton de l'ACTION PRINCIPALE porte l'aplat, comme les maquettes * validées. Remesuré le 26/08 (jamais recopié) : texte sur aplat 14,00:1 * en clair (#FFFFFF sur #052962) et 7,69:1 en sombre (#12233F sur * #93B9E3) ; l'aplat sur son fond 12,40:1 en clair et 8,84:1 en sombre. * La valeur sombre EST l'encre du thème clair — une référence, pas une * seconde source. */ --habillage-sur-accent-clair: #FFFFFF; --habillage-sur-accent-sombre: var(--habillage-texte-clair); /* L'ANNEAU DE FOCUS — le rôle reste distinct (ARCHITECTURE §12.1), la * VALEUR est celle de l'accent depuis le 25/08 : c'est ce que la décision * de Kenny emporte (« l'accent remplace `#2F5FA8` »), et une seconde * valeur littérale identique serait une seconde source. Le focus se * distingue de la bordure du contrôle par l'ÉPAISSEUR et le DÉCALAGE * (2 px, `outline-offset: 2px`), jamais par la seule couleur. */ --habillage-anneau-clair: var(--habillage-accent-clair); --habillage-anneau-sombre: var(--habillage-accent-sombre); /* ── LES VARIABLES EFFECTIVES — le thème clair est la base ──────────────── */ --habillage-fond: var(--habillage-fond-clair); --habillage-texte: var(--habillage-texte-clair); --habillage-texte-fort: var(--habillage-texte-fort-clair); --habillage-texte-attenue: var(--habillage-texte-attenue-clair); --habillage-bordure: var(--habillage-bordure-clair); --habillage-trait: var(--habillage-trait-clair); --habillage-bordure-forte: var(--habillage-bordure-forte-clair); --habillage-surface: var(--habillage-surface-clair); --habillage-surface-legere: var(--habillage-surface-legere-clair); --habillage-surface-active: var(--habillage-surface-active-clair); --habillage-champ: var(--habillage-champ-clair); --habillage-info: var(--habillage-info-clair); --habillage-accent: var(--habillage-accent-clair); --habillage-sur-accent: var(--habillage-sur-accent-clair); --habillage-anneau: var(--habillage-anneau-clair); /* LE RAYON — un seul au dépôt (§26 bis) : tout arrondi est celui-ci ou 0. */ --habillage-rayon: 6px; /* LA FACE SERVIE — SPEC §26 bis.1.1, décision de Kenny du 26/08 (P22) : * une seule famille partout. La variable unique `--habillage-police` avait * été scindée à P19 en `-interface`/`-contenu` pour nommer laquelle des * deux familles une règle sert ; à une seule famille, chacun des deux noms * mentirait — le nom d'avant la scission revient. Le jour où une seconde * famille reviendrait, ce serait une scission de nouveau, avec son motif. * Les guillemets font partie de la valeur : `"IBM Plex Serif"`. */ --habillage-police: "IBM Plex Serif"; } /* Le thème choisi « sombre » — remappage pur, aucune valeur littérale. * * `.theme-force[data-theme="sombre"]` — P48 (02/09) : le spécimen des figures * montre chaque figure dans les DEUX thèmes sur une même page. Un bloc qui * porte cet attribut remappe les variables pour lui seul (il pose son fond * et son encre, voir `.theme-force` plus bas). Le bloc jumeau * `.theme-force[data-theme="clair"]` remappe vers la colonne claire — sans * lui, un bloc « clair » sur une page sombre hériterait du sombre. Deux * blocs de thème de plus, aucune valeur littérale : le garde * `test_variables_css` les lit comme les autres. */ .theme-force[data-theme="clair"] { --habillage-fond: var(--habillage-fond-clair); --habillage-texte: var(--habillage-texte-clair); --habillage-texte-fort: var(--habillage-texte-fort-clair); --habillage-texte-attenue: var(--habillage-texte-attenue-clair); --habillage-bordure: var(--habillage-bordure-clair); --habillage-trait: var(--habillage-trait-clair); --habillage-bordure-forte: var(--habillage-bordure-forte-clair); --habillage-surface: var(--habillage-surface-clair); --habillage-surface-legere: var(--habillage-surface-legere-clair); --habillage-surface-active: var(--habillage-surface-active-clair); --habillage-champ: var(--habillage-champ-clair); --habillage-info: var(--habillage-info-clair); --habillage-accent: var(--habillage-accent-clair); --habillage-sur-accent: var(--habillage-sur-accent-clair); --habillage-anneau: var(--habillage-anneau-clair); } :root[data-theme="sombre"], .theme-force[data-theme="sombre"] { --habillage-fond: var(--habillage-fond-sombre); --habillage-texte: var(--habillage-texte-sombre); --habillage-texte-fort: var(--habillage-texte-fort-sombre); --habillage-texte-attenue: var(--habillage-texte-attenue-sombre); --habillage-bordure: var(--habillage-bordure-sombre); --habillage-trait: var(--habillage-trait-sombre); --habillage-bordure-forte: var(--habillage-bordure-forte-sombre); --habillage-surface: var(--habillage-surface-sombre); --habillage-surface-legere: var(--habillage-surface-legere-sombre); --habillage-surface-active: var(--habillage-surface-active-sombre); --habillage-champ: var(--habillage-champ-sombre); --habillage-info: var(--habillage-info-sombre); --habillage-accent: var(--habillage-accent-sombre); --habillage-sur-accent: var(--habillage-sur-accent-sombre); --habillage-anneau: var(--habillage-anneau-sombre); } /* LE TROISIÈME THÈME « systeme » A DISPARU LE 26/08 (P21, décision de * Kenny) : son bloc `@media (prefers-color-scheme: dark)` vivait ici. Deux * thèmes nommés, le clair par défaut — un `data-theme="systeme"` résiduel * tomberait sur la colonne claire du `:root`, jamais sur un état non * stylé. */ /* ══════════════════════════════════════════════════════════════════════════ * LA COMPOSITION — héritée d'`essai.css`, couleurs passées aux variables. * L'échelle typographique et le rythme sont ceux du SPEC §26 bis. * ══════════════════════════════════════════════════════════════════════════ */ /* ── L'ÉCHELLE DES CORPS, EN VARIABLES — P76 (08/09/2026), décision F de Kenny * du 7 septembre : « la taille des caractères doit être choisie de manière à * avoir un contenu harmonieux — ce n'est pas partout le cas ». Les SEPT valeurs * sont celles, closes, du SPEC §26 bis.1.2 — le garde * `tests/gardes/test_echelle_des_corps.py` les y LIT et exige que ce bloc les * porte toutes, une fois chacune. Ce bloc les NOMME PAR L'USAGE, et c'est le * SEUL endroit de cette feuille où un corps s'écrit en rem : toute autre * déclaration `font-size` est `var(--corps-…)`, dans cette feuille, dans les * gabarits et dans les scripts — le garde refuse le reste (un `0.8rem` posé * « parce que la touche est petite », un `em` hors du rendu mathématique). * MESURÉ AVANT D'ÉCRIRE (P76) : 53 corps en rem sur six valeurs de l'échelle * (0,9 ×29 · 0,95 ×16 · 1,1 ×3 · 1,25 ×3 · 1,35 ×1 · 1,5 ×1), un `0,9em` hors * du rendu mathématique (`.cadre .date`), et cinq `em` de géométrie de glyphe * (`.m-…`, `.maths sup`) que le §26 bis.1.2 exempte ; les 54 premiers sont * ramenés ici. Les textes des FIGURES ont leurs deux corps en unités du * `viewBox` (`app/services/figures/rendu.py`, `CORPS` et `CORPS_PETIT`) : ils * suivent la largeur de la figure, pas celle du texte, et le garde les tient * à part. ── */ :root { /* ce qui SITUE sans informer : mentions, frises, dates, légendes, la marque atténuée */ --corps-legende: 0.9rem; /* un cran sous le courant : l'objectif, les cases, les compléments, le relevé */ --corps-petit: 0.95rem; /* le texte que l'élève lit — la base (html : 17 px) */ --corps-courant: 1rem; /* les titres de section (h2), l'énoncé, la valeur d'une réponse */ --corps-titre-de-bloc: 1.1rem; /* la marque, le champ de composition et ses touches, le signe d'un bouton d'insertion */ --corps-grand: 1.25rem; /* le titre de chaque écran (h1) */ --corps-titre-de-page: 1.35rem; /* le titre de la restitution — le seul document qui s'imprime */ --corps-titre-de-document: 1.5rem; } html { /* LA SEULE DÉCLARATION DE FAMILLE DE CETTE FEUILLE — P22 (26/08) : une * famille partout, servie à la racine et héritée par tout ce qui s'affiche. * Puis le repli mathématique (huit glyphes, `unicode-range` ci-dessus), puis * la pile serif du système en dernier ressort — pour les seuls glyphes hors * inventaire qu'une saisie libre pourrait porter. */ font-family: var(--habillage-police), "Noto Sans Math", Georgia, "Times New Roman", serif; font-size: 17px; line-height: 1.55; background: var(--habillage-fond); color: var(--habillage-texte); } body { margin: 0; font-size: var(--corps-courant); } /* La règle groupée de « la famille du contenu » (P19 : `.item`, `.options`, * `.touche`, `.restitution`, `.cadre`, `.releve`, `.reponse-donnee`, * `.maths`, `.notation`) vivait ici. Retirée à P22 (26/08) : une seule * famille est servie, ces sélecteurs héritent de la racine. Le seul cas que * `habillage.css` n'atteint toujours pas est le champ MathLive, composé par * ses fontes KaTeX (`statique/mathlive/fontes.css`). */ main { max-width: 40rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; } p { margin: 0 0 1rem; } /* LA HIÉRARCHIE DES TITRES — demande de Kenny du 18/08 (`DU-19`), règle au * §26 bis : titre de page > titre de section > corps, par la taille ET la * graisse. Générale et non par écran : un `

` écrit dans six mois la * reçoit sans qu'on y pense. Le BALISAGE que ces règles attendaient est servi * depuis le 24/08 (P11a, `DU-45`) : chaque écran porte son `

`, et les * amorces de la transparence leur `

`. */ h1 { font-size: var(--corps-titre-de-page); font-weight: 600; margin: 0 0 1.25rem; } h2 { font-size: var(--corps-titre-de-bloc); font-weight: 600; margin: 0 0 0.75rem; } /* LE TITRE DE LA RESTITUTION — P21 (point 6), décision de Kenny : le

* existait sans se lire comme un titre. 1,5 rem, la plus grande valeur de * l'échelle close (§26 bis.1.2) — jamais un corps inventé — et la graisse * reste 600, la plus forte des deux embarquées (§26 bis.1.3). Il demeure un * titre de DOCUMENT : Plex Serif par héritage (§26 bis.1.1), et la * hiérarchie du §26 bis.1.5 est renforcée, jamais entamée (h1 > h2). */ .restitution h1 { font-size: var(--corps-titre-de-document); } /* L'OBJECTIF DE L'ANNÉE — demande de Kenny du 18/08 (`DU-19`), règle au * §26 bis. Servi en permanence (`socle.html`, CDC §9.1 « en évidence ») : il * se distingue du corps par la graisse et par son filet, en couleur de texte * PLEINE — un objectif atténué serait le contraire d'une mise en évidence —, * et reste sous le titre de page par la taille : il situe, il ne titre pas. */ .objectif { font-size: var(--corps-petit); font-weight: 600; color: var(--habillage-texte); /* LE FILET est en couleur d'ACCENT depuis le 25/08 (P19) : c'est le premier * des QUATRE emplois de l'accent, énumérés une seule fois au :root — y * renvoyer plutôt que les recopier, une liste en double périmant à * l'emploi suivant (elle avait déjà périmé, voir là-bas). */ border-left: 3px solid var(--habillage-accent); padding-left: 0.75rem; margin-bottom: 1.5rem; } /* ── LA MARQUE — 25/08 (P19), décision de Kenny ─────────────────────────── * * « PY » suivi d'un CARRÉ, jamais d'un point. Le motif est mathématique et il * est écrit dans `gabarits/socle.html` : le carré est la marque de l'angle * droit, et le théorème de Pythagore ne vaut que là. * * COMPOSÉE, JAMAIS DESSINÉE. Les deux lettres sont du TEXTE, en IBM Plex Serif * SemiBold — la famille servie, héritée de la racine depuis P22 (elle était * nommée ici du temps des deux familles, la marque étant le nom de la chose, * pas un contrôle). Le carré est * une BOÎTE, pas un caractère : « ■ » (U+25A0) dépendrait de la fonte servie * et n'est pas à l'inventaire du garde des polices, donc il tomberait sur la * pile système. Une boîte se rend partout, identique. * * LE CARRÉ EST POSÉ SUR LA LIGNE DE BASE, et c'est là qu'on le trace dans le * coin d'un triangle rectangle. `vertical-align: baseline` est le défaut, mais * il est écrit ici parce qu'il est le SENS de cette forme, non une valeur par * défaut qu'on subit. * * DEUX TRAITEMENTS DEPUIS LE 26/08 (P19 bis), SPEC §26 bis.1.8, décision de * Kenny — et c'est une PROPRIÉTÉ, jamais une liste d'écrans : * * la marque paraît EN ACCENT là où l'élève n'est pas en train de * travailler, et EN ATTÉNUÉ là où il travaille. Elle ne disparaît jamais. * * Le motif est celui que l'en-tête d'`item.html` écrit de son écran : il * énumère ce qu'il ne porte PAS, et c'est « la moitié de sa définition ». Une * marque en accent, quarante fois de suite, est du bruit pendant que l'élève * calcule. Sur les écrans qui portent une frise, elle passe en outre sur SA * ligne (`.entete-parcours`) : une ligne au lieu de deux, présente sans rien * prendre. * * UNE VARIANTE, JAMAIS UN SECOND BLOC. `.marque-attenuee` ne redéclare que ce * qui diffère — le corps et la couleur — et hérite du reste. Deux blocs * complets divergeraient à la première retouche : la face changée d'un côté, * l'approche des capitales de l'autre. * * CONTRASTES MESURÉS, ET LE CARRÉ EN A BESOIN PARCE QU'IL EST UN ÉLÉMENT * GRAPHIQUE — les QUATRE cas, pour 3:1 requis : * * accent / fond clair 12,40:1 accent / fond sombre 8,84:1 * atténué / fond clair 5,91:1 atténué / fond sombre 6,95:1 * * Les quatre passent AUSSI le seuil de 4,5:1 du TEXTE, et ce n'est pas un * luxe : les deux lettres sont du texte, et à `0,9 rem` elles ne sont pas du * « grand texte » au sens de WCAG. La marge est structurelle plutôt que * heureuse — `--habillage-texte-attenue` est tenu à 4,5:1 sur son fond par * `tests/gardes/test_contraste.py`, qui porte des phrases entières ailleurs. * Sur une SURFACE (bandeau de test, bloc de message) : 11,00 / 5,24 en clair, * 8,05 / 6,33 en sombre. */ .marque { /* La famille est celle de la racine depuis P22 — la ligne `font-family` * qui la nommait ici (P19 bis) est devenue une redite. */ font-size: var(--corps-grand); font-weight: 600; color: var(--habillage-accent); line-height: 1; margin: 0 0 1.5rem; } .marque-attenuee { /* Le plus petit corps de l'échelle close (§26 bis.1.2) — celui de la frise, * dont elle partage la ligne : deux corps différents sur une même ligne se * liraient comme deux niveaux d'information, et il n'y en a qu'un. */ font-size: var(--corps-legende); color: var(--habillage-texte-attenue); /* La marge du bas appartient à la LIGNE, pas à la marque : c'est * `.entete-parcours` qui la porte quand la frise l'accompagne, et le bloc * qui suit quand elle est seule (écran d'interruption). */ margin: 0 0 1.5rem; } /* ── LA LIGNE DE PARCOURS — la marque et la frise ensemble, 26/08 (P19 bis) ── * * `align-items: baseline` ET NON `center` : le carré de la marque est posé sur * SA ligne de base — c'est le sens de cette forme —, et l'aligner sur autre * chose que la ligne d'écriture de la frise le décollerait de la seule * référence qu'il ait. Les deux textes partagent donc une baseline, comme deux * mots d'une même phrase. * * LA FRISE PREND CE QUI RESTE (`flex: 1`) et la marque ne prend que sa * largeur : sur un téléphone, c'est la frise qui a besoin de place — quatre * libellés dont « Statistiques et probabilités » —, et son * `overflow-wrap: anywhere` s'en charge. * * `min-width: 0` sur la frise : sans lui, un élément de flex refuse de * rétrécir sous la largeur de son contenu, et la grille des quatre colonnes * pousserait la ligne hors de l'écran au lieu de couper ses libellés. */ .entete-parcours { display: flex; align-items: baseline; gap: 0.75rem; margin: 0 0 1.5rem; } .entete-parcours .marque, .entete-parcours .frise { margin: 0; } .entete-parcours .frise { flex: 1; min-width: 0; } .marque-lettres { /* L'approche des deux capitales, resserrée d'un cheveu : `P` et `Y` laissent * un blanc à la jonction que la fonte ne corrige pas à ce corps. */ letter-spacing: -0.01em; } .marque-carre { display: inline-block; /* Le côté est la hauteur d'x de la face qui porte les lettres : le carré * s'accorde alors au corps, quel qu'il soit, sans valeur à retoucher. */ width: 0.52em; height: 0.52em; margin-left: 0.18em; background: currentColor; vertical-align: baseline; } /* ── LA FRISE DES SEGMENTS — SPEC §17.4 bis, 25/08 (P19) ────────────────── * * AUCUNE COULEUR NE PORTE L'ÉTAT, ET C'EST LA PROPRIÉTÉ CENTRALE DE CE BLOC. * « terminé », « en cours », « à venir » sont des MOTS, servis par le gabarit * depuis `seance.yaml` ; un élève qui ne verrait aucune couleur lirait la même * frise (CDC §11.1 bis, SPEC §26.4). Ce que la couleur fait ici est ce qu'elle * a le droit de faire : APPUYER une information que le texte porte déjà. * * L'ÉTAPE COURANTE SE DISTINGUE PAR TROIS MOYENS DONT AUCUN N'EST UNE COULEUR * PORTEUSE DE SENS — la graisse (600), la couleur de texte PLEINE au lieu de * l'atténuée, et le filet en couleur d'ACCENT (habillage, jamais sémantique). * Chacun tient sans les deux autres, et le sélecteur porte sur * `aria-current="step"` plutôt que sur une classe : ce qui est vrai à l'œil * est alors exactement ce qui est vrai à la voix, par construction. * * `grid-auto-flow: column` PLUTÔT QUE `repeat(4, 1fr)`, et ce n'est pas un * détail de style : le nombre de segments est celui des domaines PEUPLÉS * (`nombre_de_segments`), et il peut valoir moins de quatre. Une grille à * quatre colonnes fixes laisserait une colonne vide ce jour-là. * * AUCUNE ANIMATION, AUCUNE TRANSITION : le budget du §26 bis.4 est zéro, et * une frise qui glisserait d'une étape à l'autre porterait de l'information * par le mouvement — le défaut que « jamais par la couleur seule » interdit à * la couleur. */ .frise { margin: 0 0 1.5rem; } .frise ol { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.5rem; list-style: none; margin: 0; padding: 0; } .frise-etape { /* LE FILET EST AU-DESSUS, et il tient lieu de séparation : quatre colonnes * sans trait se liraient comme un paragraphe en morceaux. */ border-top: 2px solid var(--habillage-trait); padding-top: 0.4rem; font-size: var(--corps-legende); color: var(--habillage-texte-attenue); /* Un libellé long — « Statistiques et probabilités » — se coupe plutôt que * de pousser les trois autres colonnes hors de l'écran d'un téléphone. */ overflow-wrap: anywhere; } .frise-etape[aria-current="step"] { border-top-color: var(--habillage-accent); color: var(--habillage-texte); font-weight: 600; } .frise-domaine, .frise-etat { /* Deux lignes : le domaine, puis son état. Sur une seule, « Statistiques et * probabilités à venir » se lit comme une phrase et non comme un état. */ display: block; } .message, .erreur { border: 1px solid var(--habillage-bordure); border-radius: var(--habillage-rayon); padding: 0.75rem 1rem; background: var(--habillage-surface); } /* LE LIEN ET SON BOUTON COPIER — P24 (point 5 sexies) : le champ prend la * place, le bouton reste à sa taille. */ .lien-et-copie { display: flex; gap: 0.5rem; align-items: stretch; } .lien-et-copie input { flex: 1 1 auto; min-width: 0; } /* L'ŒIL DU MOT DE PASSE — P24 (27/08). Le bouton vit DANS le champ, à * droite : un enveloppeur en position relative, l'œil en absolu. L'icône * est en `currentColor` atténué — un contrôle d'appoint, pas une action * principale — et la cible reste confortable (2,75 rem de haut, la règle * des cibles). Le champ garde un rembourrage à droite pour que la saisie ne * passe pas sous l'icône. */ .champ-mot-de-passe { position: relative; display: block; } .champ-mot-de-passe input { width: 100%; box-sizing: border-box; padding-right: 2.75rem; } .oeil { position: absolute; top: 0; right: 0; height: 100%; min-height: 2.75rem; width: 2.75rem; display: flex; align-items: center; justify-content: center; border: none; background: none; padding: 0; color: var(--habillage-texte-attenue); cursor: pointer; } .oeil:hover, .oeil:focus-visible { color: var(--habillage-texte); } /* LE CODE DU REFUS — P24 (27/08) : à côté de la cause, en petit et atténué. * Kenny est le seul lecteur de la console, et le code lui sert ; il reste une * donnée d'appoint, jamais le message. 0,9 rem est le plus petit corps de * l'échelle close du §26 bis.1.2 — le garde refuse tout autre. */ .code-de-refus { font-size: var(--corps-legende); color: var(--habillage-texte-attenue); } /* L'ÉNONCÉ — 25/08, P19, décision de Kenny sur mesure. * * LE CORPS DESCEND À `1,1 rem`, l'une des sept valeurs de l'échelle close. * Le motif est une mesure de hauteur d'x : Kenny a comparé IBM Plex Serif à * Georgia et jugé Georgia plus juste. Georgia porte **0,4814** de hauteur d'x * relative, Plex Serif **0,516** — **+7,2 %** —, si bien qu'à corps égal Plex * paraît plus grande. Réduire le corps lui rend la discrétion cherchée. * * CE QUE LE MANDAT DE P19 CROYAIT, ET CE QUE LE FICHIER DISAIT — écrit ici * parce que l'écart change le résultat et non le geste. Le mandat annonçait * « de 1,25 rem à 1,1 rem », soit **un** cran. Le corps servi était **1,5 rem** * (`1,25 rem` est celui de `math-field`, plus bas) : la valeur nommée fait * donc descendre de **deux** crans, et l'énoncé passe à la taille d'un `h2`. * **La valeur nommée l'emporte** — elle est écrite trois fois au mandat, et * Kenny a vérifié qu'elle appartient à l'échelle — mais remonter à `1,35 rem` * est un changement d'UNE valeur ici, et c'est sa décision. * * L'ENCRE EST RENFORCÉE, ET C'EST LA CONSÉQUENCE DU CORPS RÉDUIT : à corps * plus petit, une encre marine paraît moins foncée — moins de matière pour la * même couleur. `--habillage-texte-fort` rend **17,97:1** sur le fond clair * et **16,82:1** sur le fond sombre, pour 4,5 requis. */ .enonce { font-size: var(--corps-titre-de-bloc); color: var(--habillage-texte-fort); font-variant-numeric: tabular-nums; margin: 1.5rem 0 0.5rem; } .consigne { margin-bottom: 1.5rem; } .apres { font-size: var(--corps-legende); color: var(--habillage-texte-attenue); } ul { list-style: none; padding: 0; margin: 0 0 1rem; } .priorites { list-style: disc; padding-left: 1.25rem; } .priorites li { margin-bottom: 0.75rem; } /* LE TITRE D'UNE PRIORITÉ PASSE EN GRAS — P21 (point 8), décision de Kenny. * 600 et rien d'autre : le §26 bis.1.3 n'admet que 400 et 600, et * `test_echelle_des_corps` lit la règle. Le texte d'explication (`pourquoi`, * `premiere_action`) ne bouge pas. Aucune taille : ce n'est toujours pas un * titre de section (`DU-132` porte la question du balisage), c'est le nom de * la priorité, mis en relief dans son bloc. */ .priorites .titre { font-weight: 600; } .options li { margin-bottom: 0.5rem; } .reserves { margin-top: 2rem; font-size: var(--corps-petit); color: var(--habillage-texte-attenue); /* La note du diagnostic en ITALIQUE — P22 (point 2 ter), décision de Kenny * du 26/08 : une face de la même famille, embarquée (voir la @font-face), * jamais une troisième graisse. */ font-style: italic; } /* LES LIENS — P22 (point 2 bis), 26/08. Aucune règle `a` n'existait : le * navigateur décidait, et rendait VIOLETS les liens visités — Kenny l'a vu * sur le rail, dans les deux thèmes. L'accent porte le lien, et l'état * VISITÉ PREND LA MÊME COULEUR — décision écrite : les liens du produit sont * de la navigation (le rail, une sortie d'écran), pas un corpus à explorer ; * « déjà suivi » n'y apporte aucune information, et le violet du navigateur * est hors palette. `a` seul suffirait (l'origine auteur l'emporte sur le * `a:visited` du navigateur), mais l'état est nommé pour que la décision se * lise ici. CONTRASTES MESURÉS (26/08) : accent sur fond 12,40:1 en clair, * 8,84:1 en sombre ; sur SURFACE (celle du rail) 11,00:1 et 8,05:1 — tous * au-dessus du 4,5:1 du texte. Le soulignement du navigateur reste : c'est * lui qui dit « lien », jamais la couleur seule (CLAUDE.md §7). */ a, a:visited { color: var(--habillage-accent); } /* LES CONTRÔLES SONT CERCLÉS D'ACCENT — 25/08, P19. La bordure d'un contrôle * n'est pas une séparation de bloc : c'est la LIMITE DE LA CIBLE, et elle doit * se voir dans les deux thèmes (14,00:1 en clair, 8,84:1 en sombre). C'est ce * qui rend tenable l'effacement des bordures de bloc en sombre (§26 bis.5 bis). */ /* Un `select` n'hérite pas non plus — les sélecteurs de la console (P21) * se rendaient dans la fonte par défaut du navigateur, vu à l'écran à P22. */ select { font: inherit; } input[type="text"], input[type="email"], input[type="number"], input[type="password"] { /* `email` et `number` ajoutés à P22 : l'épreuve à l'écran a montré le champ * d'adresse de la connexion (P21) rendu dans la fonte par défaut du * navigateur — les contrôles n'héritent pas d'eux-mêmes, chaque type se * nomme. */ font: inherit; width: 100%; box-sizing: border-box; padding: 0.6rem 0.7rem; border: 1px solid var(--habillage-accent); border-radius: var(--habillage-rayon); background: var(--habillage-champ); color: inherit; margin-bottom: 1rem; } /* LE CHAMP DE COMPOSITION — P11b, le clavier mathématique (CDC §11.3). * L'élément `` est créé par le script de l'écran d'item quand * MathLive est chargé ; il prend la place du champ de texte, et il en prend * l'habillage : mêmes bordure, fond, rayon — un élève ne doit pas voir deux * familles de champs. Le corps est 1,25 rem, de l'échelle close (§26 bis.1.2) : * une fraction composée a un numérateur et un dénominateur plus petits que le * corps, et un corps de lecture ordinaire les rendrait illisibles sur un * téléphone — c'est la géométrie relative du §12.3, portée par un corps plus * grand. La cible fait 2,75 rem au moins (§26 bis.2.2). */ math-field { font-size: var(--corps-grand); width: 100%; box-sizing: border-box; min-height: 2.75rem; padding: 0.4rem 0.7rem; border: 1px solid var(--habillage-accent); border-radius: var(--habillage-rayon); background: var(--habillage-champ); color: inherit; margin-bottom: 1rem; } button { font: inherit; padding: 0.55rem 1.1rem; /* LA CIBLE TACTILE — §26 bis.2 : 2,75 rem au moins pour tout contrôle * actionnable. La valeur vient des touches d'insertion (passe W1), que la * spécification de surface a reprise pour tout bouton. */ min-height: 2.75rem; border: 1px solid var(--habillage-accent); border-radius: var(--habillage-rayon); background: var(--habillage-champ); color: inherit; cursor: pointer; margin: 0 0.5rem 0.5rem 0; } /* L'ACTION PRINCIPALE PORTE L'APLAT — P21 (point 10), décision de Kenny, * comme les maquettes validées. RÉSERVÉ à elle : un écran à quatre boutons * pleins devient un mur d'accent, et plus rien ne dit où aller — les gestes * secondaires gardent le contour. Le relevé écran par écran est au rapport * de P21 ; en deux mots : « Répondre », « Continuer », « Reprendre * l'essai », et le bouton de clé d'accès des deux écrans d'accès ; le * dialogue d'accueil n'en a AUCUN (ses boutons sont des CHOIX égaux — * marquer l'un biaiserait un choix qui appartient à l'élève), la * restitution non plus (écran terminal, l'impression est un confort — * §18.1 bis), la console non plus (pas UNE action). */ button.principal { background: var(--habillage-accent); color: var(--habillage-sur-accent); border-color: var(--habillage-accent); } button:hover, button:focus-visible { /* LA SURFACE ACTIVE, ET NON LA SURFACE — 25/08, P19. En sombre, c'est le * troisième niveau de clarté qui dit « ce bouton répond » ; l'ancienne * valeur était celle des blocs et des en-têtes de tableau, si bien qu'un * bouton survolé prenait la couleur d'un en-tête. */ background: var(--habillage-surface-active); } /* Le principal GARDE son aplat au survol — la surface active des boutons de * contour le déshabillerait ; sa réponse visible est l'anneau de focus. */ button.principal:hover, button.principal:focus-visible { background: var(--habillage-accent); } /* LE FORMULAIRE FIGÉ — P25 (28/08), décision de Kenny : après un geste * réussi qui modifie, champs ET bouton sont grisés (attribut `disabled`, * posé par le script de la console) — un formulaire qui garde ses valeurs * et son bouton actif invite à recliquer, et des champs restés modifiables * laissent croire qu'on peut encore changer un geste qui est fait. Le * principal PERD son aplat en se figeant : un aplat grisé garderait l'air * d'une action. Le survol ne répond plus — la surface active dirait « ce * bouton répond », et il ne répond pas. */ button:disabled, button.principal:disabled, input:disabled, select:disabled { background: var(--habillage-surface); border-color: var(--habillage-trait); color: var(--habillage-texte-attenue); cursor: default; } button:disabled:hover, button:disabled:focus-visible, button.principal:disabled:hover, button.principal:disabled:focus-visible { background: var(--habillage-surface); } /* LE BOUTON DE REPRISE — P25 : séparé par un FILET, en bas du bloc — il ne * fait plus partie du formulaire, il le remplace. En contour, jamais en * aplat : l'aplat reste à l'action principale du volet (§26 bis), et * recommencer ne l'est pas. */ .reprise { border-top: 1px solid var(--habillage-trait); margin-top: 1.5rem; padding-top: 1rem; } /* LE LIEN HABILLÉ EN BOUTON — P23 (point 2), la page introuvable. L'inverse * exact de « Reprendre plus tard » (bouton habillé en lien parce que son * geste POSTE) : ici le geste NAVIGUE, donc un ``, et la maquette validée * le montre en bouton d'aplat — l'action principale du seul écran qui n'en a * qu'une (§26 bis). Mêmes cotes que `button` (cible 2,75 rem, §26 bis.2.2), * même aplat que `button.principal`, texte sur accent — et le soulignement * disparaît ICI SEULEMENT : la forme de bouton dit la cible, le soulignement * des liens ordinaires ne perd rien. `:visited` suit, comme pour tout lien * du produit (la règle `a` ci-dessus). */ a.principal, a.principal:visited { display: inline-block; box-sizing: border-box; min-height: 2.75rem; padding: 0.55rem 1.1rem; border: 1px solid var(--habillage-accent); border-radius: var(--habillage-rayon); background: var(--habillage-accent); color: var(--habillage-sur-accent); text-decoration: none; } /* LA LIGNE DE GESTES — P22 (point 2 quinquies), maquette validée par Kenny le * 26/08 : les gestes de RÉPONSE à gauche, côte à côte, et la SORTIE * (« Reprendre plus tard ») poussée à DROITE, en lien souligné et texte * atténué. Le motif qui tient la forme : la sortie n'est pas une réponse — * trois gestes à poids égal laisseraient croire qu'elle en est une troisième. * Si la ligne ne tient pas (téléphone), les gestes passent à la ligne et la * sortie reste à droite, toujours en lien : distincte quelle que soit la * disposition. Contraste du lien : l'atténué, 5,91:1 en clair et 6,95:1 en * sombre sur le fond — au-dessus du 4,5:1 du texte (et du 3:1 graphique). */ .gestes { display: flex; align-items: center; flex-wrap: wrap; gap: 0 0.25rem; } .gestes .secondaire { margin-left: auto; } /* Un BOUTON HABILLÉ EN LIEN — le geste poste, donc la balise reste un bouton ; * la forme dit qu'il n'est pas une réponse. La cible garde 2,75 rem * (§26 bis.2.2) : c'est le remplissage vertical qui la tient, pas une boîte. */ .gestes .secondaire button { background: none; border: none; border-radius: 0; padding: 0.55rem 0; margin: 0; text-decoration: underline; color: var(--habillage-texte-attenue); } .gestes .secondaire button:hover, .gestes .secondaire button:focus-visible { background: none; color: var(--habillage-texte); } /* L'ANNEAU DE FOCUS — la famille du §12.1 le nomme, et il change avec le * thème : un anneau unique serait invisible sur l'un des deux fonds. */ :focus-visible { outline: 2px solid var(--habillage-anneau); outline-offset: 2px; } .choix { display: flex; flex-wrap: wrap; gap: 0.25rem; } /* ── LES TOUCHES D'INSERTION ────────────────────────────────────────────── * * 21/08, passe W1, `DU-75`. Un bouton qui insère « √ » dans le champ de * réponse. Ce n'est PAS le clavier mathématique du CDC §11.3 : voir le * commentaire de `gabarits/item.html`, qui porte la distinction. * * LA CIBLE TACTILE EST DEVENUE UNE RÈGLE LE 23/08 (§26 bis) : 2,75 rem de * côté au moins pour tout contrôle pressé au pouce. La valeur est celle que * la passe W1 avait posée en jugement d'ingénierie déclaré ; la * spécification de surface la reprend, et c'est désormais elle qui tranche — * exactement ce que le commentaire d'`essai.css` annonçait. * * `display: none` SOUS `[hidden]`, ET CE N'EST PAS UNE PRÉCAUTION DE STYLE. * Le conteneur est servi `hidden` et révélé par le script (`item.html`). Or * une règle `display: flex` ÉCRASE le `display: none` que le navigateur * applique à `[hidden]` : sans la ligne ci-dessous, les touches resteraient * visibles chez un élève sans JavaScript, et chaque clic ne ferait rien. Un * test le refuse. */ .touches { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.6rem; } /* LE BLOC SANS SCRIPT — P12, `DU-75` (a). Rendu dans