/* workbench.css v0.27.0 — copie, ne pas modifier ici. Toute correction remonte à ~/projects/perso/workbench. */ /* ========================================================================== WORKBENCH — design system des apps perso Copié dans chaque app, jamais modifié sur place : une correction remonte au dépôt ~/projects/perso/workbench puis redescend par `scripts/install_css.py`. Pas de numéro de version ici : `install_css.py` l'estampille lui-même en tête du fichier copié, en la lisant dans `workbench/__init__.py` — c'est ce qui permet à `--check` de dire à une app qu'elle est en retard. En écrire une seconde ici créerait deux mentions que rien ne compare, et qui divergeraient silencieusement au premier oubli. Workbench ne définit AUCUNE teinte d'accent : c'est ce qui distingue une app des autres. Chaque app pose sa paire --accent / --accent-tx / --accent-soft / --accent-line / --ring, pour les DEUX thèmes, vérifiée au contraste : `python3 css/check_contrasts.py "#8c2f39" "#ffffff"`. Cette vérification n'est pas une formalité : l'ancien accent de recipes (#FEF991) tenait sur fond noir et tombait à 1,2:1 sur fond blanc. ========================================================================== */ /* --- Jetons : thème clair (défaut) --------------------------------------- */ :root { --bg: #f7f7f6; --surface: #ffffff; --surface-2: #f2f2f0; /* zone en retrait, ligne survolée */ --surface-hi: #ffffff; /* élément surélevé : menu, popover */ /* `--line` et `--line-strong` sont décoratifs (séparateurs, bord de carte). `--line-controle` est le seul qui identifie un contrôle : il tient 3:1 comme l'exige WCAG 1.4.11, les deux autres n'y sont pas soumis. */ --line: #e4e3df; --line-strong: #d3d2cd; --line-controle: #8a8880; --tx: #16150f; --tx-2: #5f5d55; --tx-3: #6f6d64; /* gris de service : libellés, unités, inactifs */ --ok-bg: #e7f4e7; --ok-tx: #1e5320; --ok-line: #bfe0c0; --warn-bg: #fdf1dd; --warn-tx: #6b4200; --warn-line: #f0dcb0; --err-bg: #fdecec; --err-tx: #8c1d1d; --err-line: #f3c9c9; --info-bg: #e8f0fd; --info-tx: #1a4a8c; --info-line: #c5d9f5; /* --danger : la SEULE teinte que le socle pose lui-même, contrairement à --accent qu'il ne définit jamais. Un geste destructeur n'a pas de marque à qui appartenir : sa couleur ne peut donc pas venir de l'app, sous peine que deux apps montrent deux rouges différents pour le même risque. Vérifiée aux quatre ambiances : `python3 css/check_contrasts.py "#b3261e" "#ffffff" "#ff6659" "#3a0a06"`. */ --danger: #b3261e; --danger-tx: #ffffff; --shadow-1: 0 1px 2px rgba(20,18,10,.05), 0 1px 1px rgba(20,18,10,.04); --shadow-2: 0 6px 16px -6px rgba(20,18,10,.14), 0 2px 5px -2px rgba(20,18,10,.08); --shadow-3: 0 1px 2px rgba(20,18,10,.04), 0 12px 32px -12px rgba(20,18,10,.16); color-scheme: light; } /* --- Jetons : thème sombre ----------------------------------------------- */ /* Le sombre n'est pas une inversion : les surfaces s'ÉCLAIRCISSENT à mesure qu'elles s'élèvent, et l'accent se désature. `:root:not([data-theme="light"])` est ce qui permet à un choix « clair » explicite de gagner contre un système en sombre. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0d0d0e; --surface: #161618; --surface-2: #202023; --surface-hi: #242428; --line: #2a2a2e; --line-strong: #35353b; --line-controle: #66666f; --tx: #f2f1ee; --tx-2: #a3a29c; --tx-3: #8a8982; --ok-bg: #16290f; --ok-tx: #9bd79b; --ok-line: #274a20; --warn-bg: #2a1e10; --warn-tx: #f0c07a; --warn-line: #4a3616; --err-bg: #2c1414; --err-tx: #f5a9a9; --err-line: #4d2222; --info-bg: #101f33; --info-tx: #9dc0f0; --info-line: #1e3a5c; --danger: #ff6659; --danger-tx: #3a0a06; --shadow-1: 0 1px 2px rgba(0,0,0,.5); --shadow-2: 0 10px 26px -10px rgba(0,0,0,.75), 0 2px 6px -2px rgba(0,0,0,.5); --shadow-3: 0 1px 2px rgba(0,0,0,.5), 0 14px 36px -14px rgba(0,0,0,.8); color-scheme: dark; } } /* Choix explicite. Duplique le bloc ci-dessus : c'est le prix à payer pour qu'une préférence stockée l'emporte sur le réglage du système. */ :root[data-theme="dark"] { --bg: #0d0d0e; --surface: #161618; --surface-2: #202023; --surface-hi: #242428; --line: #2a2a2e; --line-strong: #35353b; --line-controle: #66666f; --tx: #f2f1ee; --tx-2: #a3a29c; --tx-3: #8a8982; --ok-bg: #16290f; --ok-tx: #9bd79b; --ok-line: #274a20; --warn-bg: #2a1e10; --warn-tx: #f0c07a; --warn-line: #4a3616; --err-bg: #2c1414; --err-tx: #f5a9a9; --err-line: #4d2222; --info-bg: #101f33; --info-tx: #9dc0f0; --info-line: #1e3a5c; --danger: #ff6659; --danger-tx: #3a0a06; --shadow-1: 0 1px 2px rgba(0,0,0,.5); --shadow-2: 0 10px 26px -10px rgba(0,0,0,.75), 0 2px 6px -2px rgba(0,0,0,.5); --shadow-3: 0 1px 2px rgba(0,0,0,.5), 0 14px 36px -14px rgba(0,0,0,.8); color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } /* --- Formes, espacement, mouvement, typographie --------------------------- */ :root { --r-s: 6px; --r-m: 10px; --r-l: 14px; --r-xl: 18px; /* Base de 4. Une valeur d'espacement écrite en dur est un jeton manquant. */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; /* Le rythme vertical d'une PAGE, distinct des espacements de composant. `--e-section` sépare deux sections, `--e-bloc` sépare un titre de section de son contenu. Ce sont eux que la densité resserre — une app qui pose ses propres marges continue de marcher, mais ne suivra pas le compact. */ --e-section: 32px; --e-bloc: 12px; /* La taille de BASE du corps de texte, distincte des 16px d'un champ de saisie (`--e-4` ni l'un ni l'autre : `font-size: 16px` reste écrit en dur sur les champs, jamais en dessous, jamais paramétré par la densité — c'est un plancher d'usage, pas un jeton de style). Le corps, lui, PEUT descendre : c'est ce que redéfinit la densité compacte. */ --taille-corps: 15px; /* L'ÉCHELLE TYPOGRAPHIQUE, jetonnée comme l'espacement l'est déjà. Avant ce lot : 31 `font-size` en dur pour 15 valeurs distinctes (.7 / .75 / .78 / .8 / .85 / .9 / .92 / 1 / 1.05 / 1.1 / 1.15 / 1.5 / 2rem, plus 16px et 22px) — dont `.75`, `.78` et `.8` à trois endroits sans qu'aucune différence soit voulue. C'est le signe d'une échelle absente, pas d'une intention. Cinq valeurs, pas quinze : au-delà, l'échelle cesse d'être une échelle. La densité compacte les resserre — c'est ce qui manquait, `--taille-corps` n'atteignant que `body`. LES JETONS ONT ÉTÉ DÉFINIS SANS ÊTRE LUS. Pendant un lot entier, la feuille les déclarait, la densité compacte les redéfinissait, et DEUX règles seulement les lisaient sur trente-deux `font-size` : `h1` restait à `1.5rem` en dur, exactement la valeur de `--t-xl`, donc le compact changeait le jeton et rien ne bougeait à l'écran. Les deux tests qui portent leur nom vérifiaient la DÉFINITION (« `--t-xs:` est dans la feuille »), jamais la lecture — verts pendant tout ce temps. C'est le même défaut que la vue grille jamais rendue : ce qui est écrit n'est pas ce qui est vérifié. LA SUBSTITUTION SUIT LE RÔLE, PAS LE NOMBRE — les commentaires par jeton ci-dessous sont cette table, et ils tranchent les collisions. `.8rem` devient `--t-s` sur `.badge` et `.tableau th` (le jeton les NOMME), et `--t-xs` sur `.bulle.outil`, qui est en mono et va avec les deux autres blocs mono à `.75`. Suivre le nombre aurait mis les trois au même endroit, ce qui est précisément l'absence d'échelle qu'on corrige. QUATRE FAMILLES RESTENT EN DUR, ET AUCUNE N'EST UNE TAILLE DE TEXTE : 1. Le PLANCHER de champ de saisie (`16px` sur `input/select/textarea` et sur `.menu-reglage select`) : un contrôle sous 16px fait zoomer Safari iOS. C'est un plancher d'usage, jamais paramétré par la densité — dit plus haut, à `--taille-corps`. `.menu-reglage select` portait `1rem`, égal à 16px seulement tant que la racine garde sa taille par défaut : écrit en px, il tient aussi quand elle rétrécit. 2. Les GLYPHES d'icône (`.nav-basse .ico`, `.recherche .ico`, `.collection-vide .ico`, `.vide .ico`, `.pastille-assistant .robot`, et l'`::after` de l'ambiance terminal). Un emoji ou un caractère d'icône se dimensionne par rapport à la boîte qu'il remplit, pas par rapport au corps du texte : les faire suivre l'échelle ferait rétrécir les pictogrammes en compact, où c'est la DENSITÉ qu'on resserre, pas la lisibilité. 3. `.num` en `.92em` — relatif au PARENT, à dessein : le même composant sert dans un titre et dans un paragraphe, et doit suivre celui qui le contient. Le passer en `rem` le figerait à une taille absolue. 4. `h3` à `1rem` : le seul site de la feuille à ce cran. Un cran d'échelle avec un unique usager n'est pas un cran, c'est une valeur avec une raison — h3 doit rester au-dessus du corps (15px) là où `--t-m` (.9rem, 14,4px) passerait dessous. Sixième jeton refusé pour cette seule règle ; à reconsidérer au deuxième usager. */ --t-xs: .75rem; /* raccourci clavier, intertitre de menu */ --t-s: .85rem; /* libellé, métadonnée, badge, en-tête de tableau */ --t-m: .9rem; /* texte secondaire, corps d'alerte */ --t-l: 1.1rem; /* h2 */ --t-xl: 1.5rem; /* h1 */ /* Deux graisses nommées. Quatre valeurs coexistaient (500, 600, 640, 700) sans qu'un lecteur puisse dire laquelle veut dire quoi. */ --gr-normal: 500; --gr-fort: 600; /* Hauteur d'une ligne de collection en vue liste. Une ligne de hauteur variable oblige l'œil à chercher où retomber : mesuré chez roms, 124px quand la ligne casse contre ~60 sinon. 56px datait d'avant la correction du padding hérité de `> *` (voir plus bas, `.collection[data-view="list"] .ligne`) : avec ces 24px en trop, 56 semblait généreux. Une fois le padding neutralisé, ce que la ligne contient RÉELLEMENT au repos, c'est un bouton de 44px (plancher de cible tactile, verrouillé par tests) OU deux lignes de texte empilées (titre + `.sous-titre`, ~42px). 56px laissait donc 12px de vide qui ne protégeait rien. 48px garde une respiration visible au-dessus du bouton (4px) sans revenir coller pile sur le plancher tactile — mesuré à la baseline 1500×643 : 8 résultats au-dessus du pli au lieu de 5. Ne descend pas sous 44px : le plancher de cible tactile reste `--h-ligne` en densité compacte, juste en dessous. */ --h-ligne: 48px; /* Ratio par défaut d'une vignette. `.collection img` gravait `4 / 3`, ce qui rogne tout objet en portrait — c'est-à-dire tout objet réel dont on ne choisit pas la forme. En jeton, une app peut poser le sien ; en `natif`, la macro le calcule par élément (voir `collection`). */ --ratio-vignette: 4 / 3; --lg-lecture: 720px; /* contenu linéaire */ --lg-large: 1240px; /* grilles et tableaux */ --lg-formulaire: 30rem; /* saisies linéaires : nom, email, mot de passe */ /* Entre les deux : une page dont le contenu principal est un tableau avec une action par ligne (l'administration, au premier chef). `--lg-lecture` (720px) coupait les boutons « Réinitialiser » du tableau des comptes ; `--lg-large` (1240px) est pensé pour des grilles denses et écarte les colonnes au point qu'on ne relie plus un nom à son rôle. 880px laisse respirer quatre colonnes (Nom, Email, Rôle + bouton, Mot de passe + bouton) plus une colonne d'action étroite, sans dilater le reste de la page. */ --lg-tableau: 880px; --ease: cubic-bezier(.2,.7,.3,1); --t: 140ms var(--ease); --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --serif: Georgia, "Iowan Old Style", "Times New Roman", serif; --mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace; /* --face-titre, --graisse-titre et --lettrage-titre n'ont VOLONTAIREMENT aucun défaut ici. `.titre-affiche` et `.bandeau .nom-app` n'ont pas la même allure aujourd'hui (serif/500/-.01em contre sans/640/-.02em) : une seule valeur par défaut ne peut pas reproduire les deux. Chacun des deux lit donc `var(--x, SON-PROPRE-REPLI)` — le même motif que `outline: var(--accent, var(--tx))` plus bas — et une ambiance qui pose l'une de ces variables l'impose aux deux d'un coup, sans rien dupliquer. Une ambiance qui ne la pose PAS (ex. `moderne` et `--face-titre`) doit le faire explicitement : sans déclaration nulle part, c'est le repli de CHAQUE élément qui s'applique, pas une valeur partagée. */ } /* --- Halo ---------------------------------------------------------------- */ /* Ombre teintée de l'accent, posée sur ce qui doit accrocher l'œil. Dérivée de `--accent` : une app qui pose sa teinte reçoit son halo sans rien déclarer. Dosé plus bas que sur le site vitrine, et volontairement : une app consultée dix fois par jour n'est pas une page d'accueil. En clair le halo descend (une ombre portée), en sombre il rayonne (il n'y a pas de lumière au-dessus d'un fond noir). */ :root { --halo: 0 2px 12px color-mix(in srgb, var(--accent, transparent) 20%, transparent); --halo-2: 0 2px 12px color-mix(in srgb, var(--accent-2, transparent) 20%, transparent); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --halo: 0 0 16px color-mix(in srgb, var(--accent, transparent) 30%, transparent); --halo-2: 0 0 16px color-mix(in srgb, var(--accent-2, transparent) 30%, transparent); } } :root[data-theme="dark"] { --halo: 0 0 16px color-mix(in srgb, var(--accent, transparent) 30%, transparent); --halo-2: 0 0 16px color-mix(in srgb, var(--accent-2, transparent) 30%, transparent); } /* --- L'ACCENT est fourni par l'application ------------------------------- */ /* Socle ne définit aucune teinte : c'est ce qui distingue une app des autres. Chaque app pose, dans sa propre feuille et POUR LES DEUX THÈMES : --accent la teinte --accent-tx le texte qui se pose dessus (≥ 4,5:1 sur --accent) --accent-soft fond discret teinté --accent-line filet teinté --ring l'accent à ~30 % d'opacité, pour l'anneau de focus L'accent est une PAIRE, jamais une couleur seule. Un jaune pâle qui tient sur fond noir tombe à 1,2:1 dès qu'on pose un fond blanc — c'est la leçon qui a coûté le plus cher dans recipes. Vérifier avant de commiter : `python3 check_contrasts.py`. UN SECOND ACCENT, facultatif : --accent-2 la teinte secondaire --accent-2-tx le texte qui se pose dessus --accent-2-soft fond discret teinté --accent-2-line filet teinté À quoi il sert : distinguer « c'est ici que vous êtes » de « ceci mérite votre attention ». Avec une seule teinte, l'onglet actif et le badge urgent ont la même couleur, et chaque app finit par bricoler la seconde dans son coin. Non déclaré, il retombe sur l'accent principal — une app qui n'en veut pas n'a rien à faire. Des paires prêtes et vérifiées vivent dans `css/accents/`. */ :root { --accent-2: var(--accent); --accent-2-tx: var(--accent-tx); --accent-2-soft: var(--accent-soft); --accent-2-line: var(--accent-line); } /* ========================================================================== LES AMBIANCES La personnalité visuelle, choisie par l'utilisateur et POSÉE PAR LE SERVEUR sur `:root` — jamais par un script après coup, sinon la page part dans une ambiance et saute dans l'autre. `countryside` n'a PAS de bloc ici : c'est l'existant, il vit dans `:root`. L'absence de l'attribut rend donc exactement le CSS d'avant, et c'est ce qui permet à chaque app de prendre cette version sans changer d'allure. AUCUNE ambiance ne redéfinit l'accent ni les couleurs d'état. L'accent appartient à l'app — c'est lui qui dit dans laquelle on se trouve — et un message d'erreur reste rouge partout, sous peine de ne plus se lire comme une erreur. Verrouillé par tests/test_css.py. ========================================================================== */ /* --- terminal : chasse fixe, angles vifs, filets francs, zéro ombre ------- */ :root[data-ambiance="terminal"] { /* BLANC PUR, ENCRE NOIRE. Pas de papier crème, pas de gris de surface : un terminal n'a qu'un fond et des caractères dessus. Les quatre surfaces valent donc la même chose, et TOUTE la structure passe par les filets — c'est ce qui rend l'ambiance radicale au lieu de décorative. */ --bg: #ffffff; --surface: #ffffff; --surface-2: #ffffff; --surface-hi: #ffffff; --line: #000000; --line-strong: #000000; --line-controle: #000000; /* Le secondaire et le tertiaire restent des gris : du noir pur partout supprimerait toute hiérarchie de lecture. 10,4:1 et 7,0:1 sur blanc. */ --tx: #000000; --tx-2: #3a3a3a; --tx-3: #565656; --r-s: 0; --r-m: 0; --r-l: 0; --r-xl: 0; --shadow-1: none; --shadow-2: none; --shadow-3: none; /* Redéfinit --sans, pas une règle sur `body` : les CINQ apps écrivent `font-family: var(--sans)` dans leur PROPRE feuille, en dehors de celle- ci. Une règle posée ici sur `body` ne les atteindrait jamais — le terminal se serait arrêté au bord du CSS de l'app. --mono garde sa valeur : le monospace doit rester du monospace là où il est demandé explicitement (`.num`, `.raccourci`…). */ --sans: var(--mono); --face-titre: var(--mono); --graisse-titre: 700; --lettrage-titre: .01em; } /* Le sombre tire les gris vers le vert — l'esprit phosphore — sans toucher l'accent, qui reste celui de l'app. */ :root[data-ambiance="terminal"][data-theme="dark"] { /* NOIR PUR, symétrique du blanc pur en clair. Aucune surface surélevée : sur un terminal, une « carte » est un cadre, pas un aplat plus clair. */ --bg: #000000; --surface: #000000; --surface-2: #000000; --surface-hi: #000000; --line: #4a4a4a; --line-strong: #6e6e6e; --line-controle: #8a8a8a; /* L'encre reste NEUTRE, pas verte : le vert phosphore serait un accent, et l'accent appartient à l'app — c'est lui qui dit dans laquelle on est. Un terminal ambré pour recipes, un vert pour fitness, chacun sur ce noir. */ --tx: #ededed; --tx-2: #a6a6a6; --tx-3: #8a8a8a; } @media (prefers-color-scheme: dark) { :root[data-ambiance="terminal"]:not([data-theme="light"]) { --bg: #000000; --surface: #000000; --surface-2: #000000; --surface-hi: #000000; --line: #4a4a4a; --line-strong: #6e6e6e; --line-controle: #8a8a8a; --tx: #ededed; --tx-2: #a6a6a6; --tx-3: #8a8a8a; } } /* --- moderne : rayons larges, ombres portées, gris froids ---------------- */ :root[data-ambiance="moderne"] { --bg: #f6f8fb; --surface: #ffffff; --surface-2: #eef2f8; --surface-hi: #ffffff; --line: #e2e8f1; --line-strong: #cbd4e2; --line-controle: #8d97a8; --tx: #0f131b; --tx-2: #596375; --tx-3: #6d7688; --r-s: 10px; --r-m: 16px; --r-l: 22px; --r-xl: 28px; --shadow-1: 0 1px 3px rgba(16,24,40,.06); --shadow-2: 0 4px 14px -4px rgba(16,24,40,.10), 0 1px 3px rgba(16,24,40,.06); --shadow-3: 0 12px 32px -12px rgba(16,24,40,.18); /* Explicite, et pas un oubli : sans valeur par défaut au :root pour --face-titre, ne pas la poser laisserait `.titre-affiche` retomber sur SON repli à lui (`--serif`) — `moderne` se retrouverait avec des titres en serif, ce que rien dans sa description ne demande. */ --face-titre: var(--sans); --graisse-titre: 700; --lettrage-titre: -.035em; } :root[data-ambiance="moderne"][data-theme="dark"] { --bg: #0a0d13; --surface: #141922; --surface-2: #1d232e; --surface-hi: #1f2733; --line: #232b38; --line-strong: #333d4e; --line-controle: #667389; --tx: #edf1f7; --tx-2: #9aa5b8; --tx-3: #7e8899; --shadow-1: 0 1px 3px rgba(0,0,0,.4); --shadow-2: 0 6px 20px -6px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.4); --shadow-3: 0 14px 36px -14px rgba(0,0,0,.8); } @media (prefers-color-scheme: dark) { :root[data-ambiance="moderne"]:not([data-theme="light"]) { --bg: #0a0d13; --surface: #141922; --surface-2: #1d232e; --surface-hi: #1f2733; --line: #232b38; --line-strong: #333d4e; --line-controle: #667389; --tx: #edf1f7; --tx-2: #9aa5b8; --tx-3: #7e8899; --shadow-1: 0 1px 3px rgba(0,0,0,.4); --shadow-2: 0 6px 20px -6px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.4); --shadow-3: 0 14px 36px -14px rgba(0,0,0,.8); } } /* --- classique : serif de titre, filets plutôt qu'ombres, gris chauds ----- */ /* La serif ne touche QUE les titres : sur un paragraphe d'app, elle fatigue. */ :root[data-ambiance="classique"] { --bg: #faf7f1; --surface: #fffdf8; --surface-2: #f2ede3; --surface-hi: #fffdf8; --line: #ddd6c7; --line-strong: #c4bbaa; --line-controle: #8b8471; --tx: #1d1a13; --tx-2: #5c5545; --tx-3: #6d6555; --r-s: 2px; --r-m: 3px; --r-l: 4px; --r-xl: 6px; --shadow-1: none; --shadow-2: none; --shadow-3: none; --face-titre: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif; --graisse-titre: 600; --lettrage-titre: 0; } :root[data-ambiance="classique"][data-theme="dark"] { --bg: #14120d; --surface: #1c1913; --surface-2: #28241e; --surface-hi: #2c2822; --line: #3b3625; --line-strong: #4b4430; --line-controle: #7d745c; --tx: #f2ece0; --tx-2: #b3aa96; --tx-3: #968d7a; } @media (prefers-color-scheme: dark) { :root[data-ambiance="classique"]:not([data-theme="light"]) { --bg: #14120d; --surface: #1c1913; --surface-2: #28241e; --surface-hi: #2c2822; --line: #3b3625; --line-strong: #4b4430; --line-controle: #7d745c; --tx: #f2ece0; --tx-2: #b3aa96; --tx-3: #968d7a; } } /* ========================================================================== TERMINAL — LES CADRES EN ASCII Le seul endroit du fichier où une ambiance touche à autre chose qu'un jeton. C'est assumé : « chasse fixe et angles vifs » ne fait pas un terminal, les cadres en font un. LE HTML NE CHANGE PAS, et c'est la contrainte qui a dicté tout le dessin. Les cinq apps rendent déjà leurs cartes, leurs boutons et leurs badges ; une ambiance qui exigerait un balisage particulier ne serait plus une ambiance, ce serait un framework — et l'adopter demanderait de modifier cinq apps. Tout passe donc par `content` sur des pseudo-éléments. DEUX COINS, PAS QUATRE. Un élément n'a que deux pseudo-éléments ; en poser quatre exigerait un enfant de plus, donc du HTML. Les deux coins opposés suffisent à faire lire le cadre : la bordure dessine déjà les côtés, l'œil complète les angles. L'ACCENT N'EST PAS TOUCHÉ. `.bouton.principal` garde son fond d'accent : il appartient à l'app, c'est lui qui dit dans laquelle on se trouve. Les crochets s'ajoutent autour du libellé, ils ne le remplacent pas. ========================================================================== */ :root[data-ambiance="terminal"] .carte, :root[data-ambiance="terminal"] .carte-flottante, :root[data-ambiance="terminal"] .panneau { position: relative; } :root[data-ambiance="terminal"] .carte::before, :root[data-ambiance="terminal"] .carte::after, :root[data-ambiance="terminal"] .carte-flottante::before, :root[data-ambiance="terminal"] .carte-flottante::after, :root[data-ambiance="terminal"] .panneau::before, :root[data-ambiance="terminal"] .panneau::after { position: absolute; color: var(--tx); background: var(--bg); line-height: 1; font-size: 1.05em; pointer-events: none; } :root[data-ambiance="terminal"] .carte::before, :root[data-ambiance="terminal"] .carte-flottante::before, :root[data-ambiance="terminal"] .panneau::before { content: "\250C"; top: -1px; left: -1px; padding: 0 2px 2px 0; } :root[data-ambiance="terminal"] .carte::after, :root[data-ambiance="terminal"] .carte-flottante::after, :root[data-ambiance="terminal"] .panneau::after { content: "\2518"; bottom: -1px; right: -1px; padding: 2px 0 0 2px; } /* Un bouton de terminal se lit entre crochets. Le `gap` du bouton fournit déjà l'espace : les crochets n'en portent pas, sinon il compte double. */ :root[data-ambiance="terminal"] .bouton { text-transform: uppercase; letter-spacing: .06em; } :root[data-ambiance="terminal"] .bouton::before { content: "["; } :root[data-ambiance="terminal"] .bouton::after { content: "]"; } /* Un badge devient un jeton entre chevrons — la convention des méta-variables dans une page de manuel. */ :root[data-ambiance="terminal"] .badge { text-transform: uppercase; background: transparent; border-color: currentColor; } :root[data-ambiance="terminal"] .badge::before { content: "<"; } :root[data-ambiance="terminal"] .badge::after { content: ">"; } /* Le repli troque son chevron dessiné contre un marqueur de nœud d'arbre, la convention de tout explorateur en console. Le `transform` du chevron est annulé : il ferait pivoter le texte. */ :root[data-ambiance="terminal"] .repli > summary::before { content: "[+]"; width: auto; height: auto; border: 0; transform: none; transition: none; font-family: var(--mono); } :root[data-ambiance="terminal"] .repli[open] > summary::before { content: "[-]"; transform: none; } /* Le message d'erreur GARDE SA COULEUR — un rouge devenu monochrome cesserait de se lire comme une erreur. Il gagne seulement le préfixe des sorties d'erreur d'un terminal. */ :root[data-ambiance="terminal"] .alerte::before { content: "!! "; font-weight: 700; } /* ========================================================================== LA DENSITÉ Axe INDÉPENDANT de l'ambiance : un terminal aéré et un countryside resserré sont deux demandes légitimes. Elle ne touche AUCUNE couleur — c'est ce qui garde la vérification de contraste à 8 combinaisons (4 ambiances × 2 luminosités) au lieu de 16. Et elle ne descend sous AUCUN des deux planchers : 44px de cible tactile, 16px sur un champ de saisie. Ce sont des règles d'usage, pas de style — en dessous de 16px Safari iOS zoome au focus et ne dézoome jamais, que la vue soit compacte ou non. Les deux sont verrouillés par tests/test_css.py. ========================================================================== */ :root[data-densite="compact"] { --e-1: 3px; --e-2: 6px; --e-3: 8px; --e-4: 11px; --e-5: 16px; --e-6: 22px; --e-7: 32px; --e-section: 18px; --e-bloc: 8px; /* Le spec demande les espacements ET la taille de base du texte — cette seconde partie manquait. --taille-corps, jamais `font-size` en dur ici : un champ de saisie reste à 16px littéral, gravé dans sa propre règle, quelle que soit la densité. Rien dans ce bloc ne descend sous ce plancher, seul le corps de texte (`body`) le peut. */ --taille-corps: 14px; --t-xs: .7rem; --t-s: .8rem; --t-m: .85rem; --t-l: 1rem; --t-xl: 1.35rem; --h-ligne: 44px; /* jamais moins : c'est le plancher de cible tactile */ } /* --- Réinitialisation ---------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } /* `hidden` doit l'emporter sur les `display:flex` posés plus bas, sinon un élément masqué par le serveur reste visible. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--tx); font-family: var(--sans); font-size: var(--taille-corps); line-height: 1.5; min-height: 100dvh; /* jamais 100vh : sur iOS la barre d'adresse rétracte la hauteur */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } a { color: inherit; text-decoration: none; } img, svg { max-width: 100%; } img { display: block; } :focus-visible { outline: 2px solid var(--accent, var(--tx)); outline-offset: 2px; border-radius: 4px; } /* Lien de sortie d'une page qui ne partage pas le bandeau de l'app — la page d'administration au premier chef. Sans lui on y entre sans pouvoir en sortir. Cible tactile de 44 px comme partout ailleurs. */ .retour { display: inline-flex; align-items: center; gap: var(--e-1); min-height: 44px; color: var(--tx-2); text-decoration: none; } .retour:hover { color: var(--tx); } /* En-tête d'une page qui ne partage pas le bandeau de l'app (l'admin, au premier chef — voir README, « La page d'administration a toujours une sortie »). Sans elle, le titre et le lien de sortie sont deux éléments empilés au hasard : ici le lien se lit comme une VRAIE sortie, posée à distance du titre plutôt que perdue au-dessus dans son propre `

`. */ .entete-page { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; } .entete-page h1 { margin: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* --- Typographie --------------------------------------------------------- */ /* `--face-titre` sans repli concurrent plus bas dans le fichier (vérifié : aucune autre règle ne cible `h1, h2, h3` sur `font-family`) : la variable peut donc se poser ici sans risquer de perdre la cascade. Le repli `var(--sans)` reproduit l'existant — aucune ambiance ne change le corps de la page tant qu'elle ne pose pas --face-titre. */ h1, h2, h3 { font-family: var(--face-titre, var(--sans)); line-height: 1.25; letter-spacing: -.015em; font-weight: 640; } h1 { font-size: var(--t-xl); } h2 { font-size: var(--t-l); } h3 { font-size: 1rem; } /* Le serif est réservé aux grands titres et écrans d'accueil. Toute l'interface courante reste en --sans. C'EST ICI, et nulle part avant, que `.titre-affiche` lit les trois variables — pas dans une règle antérieure à spécificité égale qu'une règle plus bas pourrait ensuite écraser en silence. Le repli de chaque `var()` reproduit exactement l'apparence d'avant la branche : aucune ambiance active ne change ce rendu. */ .titre-affiche { font-family: var(--face-titre, var(--serif)); font-weight: var(--graisse-titre, 500); letter-spacing: var(--lettrage-titre, -.01em); } /* Chiffres en chasse fixe tabulaire : durées, quantités, montants, compteurs. Sans elle, une colonne « 5 min / 45 min / 120 min » danse d'une ligne à l'autre. */ .num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .92em; letter-spacing: -.01em; } .doux { color: var(--tx-2); } .service { color: var(--tx-3); font-size: var(--t-s); } .contenu { max-width: var(--lg-lecture); margin: 0 auto; padding: var(--e-4); } .contenu-large { max-width: var(--lg-large); margin: 0 auto; padding: var(--e-4); } /* Voir `--lg-tableau` : une page-tableau avec actions par ligne. */ .contenu-tableau { max-width: var(--lg-tableau); margin: 0 auto; padding: var(--e-4); } /* Rythme vertical PAR DÉFAUT des deux conteneurs de page. `.contenu` ne posait que largeur, centrage et rembourrage — rien sur l'espacement entre ses enfants directs. `.carte` et `.apres-carte` portent leur propre marge et sauvent les apparences ; un `

`, un `

`, un `` ou un `
` nu n'en porte aucune, et une page qui les empile obtient un mur au contact. Mesuré au navigateur sur `surpriseme` : six écarts sur huit valaient 0px entre les enfants de `.contenu` (voir docs/revue-ux-2026-08-12.md). Même valeur que `.rythme` (`--e-5`), sur le même sélecteur `> * + *` — pas une coïncidence, c'est le même rythme. `.contenu-tableau` n'est PAS concerné : il s'écrit toujours `class="contenu-tableau rythme"`, explicitement (voir la page d'administration) — une page-tableau a des sections plus denses que la lecture ou une grille de cartes, et le choix reste local à qui l'utilise. Une app peut resserrer localement (une `.pile` a son propre `gap`, plus serré) ; elle ne doit plus avoir à DÉCOUVRIR l'absence de rythme. */ .contenu > * + *, .contenu-large > * + * { margin-top: var(--e-5); } /* --- Écran isolé : connexion, activation --------------------------------- */ /* Une page sans navigation, une carte, rien d'autre. Sans cette règle, la carte s'étale sur toute la largeur du conteneur et le formulaire flotte au milieu de nulle part — vu en production sur `random` le 2026-08-24, et c'est la raison pour laquelle l'écran de connexion est descendu dans le socle plutôt que d'être recopié une sixième fois. `min-height` plutôt qu'un centrage vertical strict : sur un téléphone en paysage, une carte centrée verticalement se retrouve à cheval sur le clavier dès que le champ prend le focus. */ .ecran-isole { display: flex; justify-content: center; align-items: flex-start; min-height: 60vh; padding-block: var(--e-6); } .ecran-isole > * { width: 100%; } /* ========================================================================== COMPOSANTS ========================================================================== */ /* --- Bandeau collant ----------------------------------------------------- */ .bandeau { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); padding: var(--e-2) var(--e-4); padding-top: calc(var(--e-2) + env(safe-area-inset-top, 0px)); } @supports (backdrop-filter: blur(1px)) { .bandeau { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); } } .bandeau .dedans { display: flex; align-items: center; gap: var(--e-3); max-width: var(--lg-large); margin: 0 auto; /* Nowrap PAR DÉFAUT, explicitement : au-dessus du seuil mobile (640px, ci-dessous), la ligne ne casse jamais toute seule. Avant ce lot, l'absence de valeur ici (le `nowrap` implicite du flexbox) cohabitait mal avec le `flex-wrap: wrap` du bloc 640px plus bas — selon l'ordre du fichier, l'un écrasait l'autre à spécificité égale, et chaque enfant de `.dedans` (marque, recherche, bouton, thème, menu) pouvait finir sur sa propre ligne. C'est le bug constaté : le bouton de thème au-dessus du menu de compte. Un seul point de rupture, déclaré une seule fois : voir `.bandeau-actions` et le bloc `@media (max-width: 640px)` plus bas. */ flex-wrap: nowrap; } /* La marque : une icône optionnelle, puis le nom. L'icône n'est PAS posée ici en `` — elle vient en SVG inline, rendu par l'app, pour prendre `currentColor` et donc `--accent` ; une image ne se colore pas en CSS. Cible tactile de 44px comme ses voisins, sans que le dessin lui-même grossisse : la taille est fixée sur le SVG (`.mark-svg`), pas sur le lien. PIÈGE DÉJÀ PAYÉ : cette règle remplace une ancienne version qui traitait `.marque` comme un lien simple (`font-weight` et `letter-spacing` posés directement dessus). Une app qui n'a pas encore adopté le contrat à deux enfants (`.mark` + `.nom-app`) perd ce style au prochain `installer_css.py` — c'est le prix assumé de ne PAS doubler le sélecteur : deux déclarations de `.bandeau .marque` à quelques lignes d'écart, c'est le bug déjà vu sur `.avis-form`, où celle qui gagnait était invisible à qui lisait l'autre. */ /* `--e-2` (8px) lisait comme deux éléments côte à côte plutôt qu'une seule marque — l'icône et le nom sont UNE chose, pas deux : resserré à `--e-1`. */ .bandeau .marque { display: flex; align-items: center; gap: var(--e-1); margin-right: auto; } .bandeau .marque .mark { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -10px; color: var(--accent); flex: none; } .bandeau .marque .mark-svg { width: 22px; height: 22px; } .bandeau .marque .mark:hover { filter: brightness(1.1); } /* Même trois variables que `.titre-affiche`, avec le repli PROPRE au nom d'app (640 / -.02em / --sans hérité) : une ambiance qui pose --face-titre, --graisse-titre ou --lettrage-titre les impose aux deux à la fois — c'est voulu, un terminal a des titres ET un nom d'app en chasse fixe — mais tant que rien ne les pose, chacun garde SA propre allure d'aujourd'hui. */ .bandeau .nom-app { font-family: var(--face-titre, var(--sans)); font-weight: var(--graisse-titre, 640); letter-spacing: var(--lettrage-titre, -.02em); } /* --- Bloc de droite : thème + compte, jamais séparés ---------------------- Avant ce lot, `.bascule-theme` et `
` étaient deux enfants directs de `.dedans`, au même niveau que la marque et la recherche : quand la ligne manquait de place, `flex-wrap` les répartissait CHACUN où il pouvait — le bouton de thème pouvait finir seul au-dessus du menu de compte, séparé de son voisin. Ce conteneur les regroupe en UN SEUL item flex de `.dedans`. `flex: none` : il ne grandit ni ne rétrécit, donc ne cède jamais sa place — c'est le repère de navigation, il reste sur la ligne de la marque à toute largeur. Contrat HTML : voir README, section « Bandeau ». */ .bandeau-actions { display: flex; align-items: center; gap: var(--e-2); flex: none; } /* --- Bouton d'ajout : perd son libellé avant de disparaître --------------- `.bouton-ajouter` porte DEUX enfants : un signe `+` toujours visible, et un `` masqué sous le seuil mobile. `aria-label` est posé sur `.bouton-ajouter` lui-même (contrat README) — il fixe le nom accessible dans les DEUX cas, donc masquer `.libelle` en CSS ne retire rien pour un lecteur d'écran. Un bouton d'action ne doit pas s'évaporer en silence : sous le seuil il reste une cible de 44px avec un `+` lisible, jamais un élément qui disparaît sans repli. */ .bandeau .bouton-ajouter { flex: none; } /* La croissance de `.recherche` (elle prend la place libre, sans jamais descendre sous 240px) vit désormais sur le composant lui-même — plus bas dans ce fichier, bloc « Barre de recherche » — via `flex-grow` / `flex-shrink` / `min-width`, PAS `flex-basis` : posée sur `.recherche`, `flex-basis` devient une hauteur dès que le parent est en colonne (mesuré à 240px de haut pour un champ de 42 dans le `
` de roms). Un premier correctif (revue du 2026-08-16) avait déplacé la croissance ICI, sur `.bandeau .recherche` — ça réglait roms, mais ça retirait la règle de sous `surpriseme`, qui pose `.recherche` dans un flex ROW hors bandeau (`.entete-recherche`) et documente dans son propre CSS qu'il compte dessus. `flex-grow` + `min-width` sur le composant marchent dans les DEUX sens : en ligne ils reproduisent l'ancien comportement, en colonne `flex-grow` n'a aucune hauteur à distribuer (`.pile` n'en fixe pas) donc l'élément garde sa hauteur naturelle — le bug des 240px de haut ne peut plus revenir. Le bandeau n'a donc plus besoin de règle de croissance dédiée, seulement de la bascule mobile ci-dessous. */ /* Sous 640px (breakpoint mobile unifié, déjà en place ailleurs dans ce fichier — voir la densité et `.nav-basse`) : LA RECHERCHE EST CE QUI CÈDE, rien d'autre. `order` + `flex-basis: 100%` la poussent sur sa PROPRE ligne, en dernier — un choix délibéré (elle ne tient plus dans la largeur disponible entre la marque et le bloc de droite), pas un débordement qui dépendrait de la largeur exacte du contenu ce jour-là. La marque et `.bandeau-actions` restent `flex: none` : ils ne participent pas au calcul qui pousserait la recherche à la ligne, ils sont simplement toujours là. */ @media (max-width: 640px) { .bandeau .dedans { flex-wrap: wrap; row-gap: var(--e-2); } .bandeau .recherche { order: 5; flex-basis: 100%; } .bandeau .bouton-ajouter .libelle { display: none; } } .bandeau nav { display: flex; gap: var(--e-4); font-size: var(--t-m); } /* 25px de haut, mesuré : c'est la navigation la plus touchée de tout le parc, et la seule famille de liens du socle sans plancher tactile. Neuf autres règles posent déjà `min-height: 44px` — celle-ci avait été oubliée. `inline-flex` + `align-items: center` pour que le plancher grandisse la CIBLE sans faire descendre le texte de la ligne. */ .bandeau nav a { color: var(--tx-2); display: inline-flex; align-items: center; min-height: 44px; } .bandeau nav a:hover, .bandeau nav a[aria-current] { color: var(--tx); } /* --- Carte --------------------------------------------------------------- */ .carte { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--e-4); box-shadow: var(--shadow-1); } .carte-flottante { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--e-6) var(--e-5) var(--e-5); box-shadow: var(--shadow-3); } /* --- Boutons ------------------------------------------------------------- */ /* 44px de haut : cible tactile minimale. Un bouton de 32px se rate au doigt. */ .bouton { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: 44px; padding: 0 var(--e-4); font: inherit; font-weight: 600; border: 1px solid var(--line-controle); border-radius: var(--r-m); background: var(--surface); color: var(--tx); cursor: pointer; transition: background var(--t), border-color var(--t), color var(--t); } .bouton:hover { background: var(--surface-2); } .bouton:active { transform: translateY(1px); } .bouton[disabled] { opacity: .5; cursor: not-allowed; } .bouton.principal { background: var(--accent); color: var(--accent-tx); border-color: transparent; } .bouton.principal:hover { filter: brightness(.94); background: var(--accent); } .bouton.discret { background: transparent; border-color: transparent; color: var(--tx-2); min-height: 36px; padding: 0 var(--e-2); font-weight: 500; font-size: var(--t-m); } .bouton.discret:hover { background: var(--surface-2); color: var(--tx); } /* Le geste destructeur, sans quoi chaque app invente son propre rouge — c'était `wishlist`, vécu. `--danger` est la seule teinte que le socle pose lui-même (voir sa déclaration plus haut) : contrairement à `--accent`, elle n'appartient à aucune marque, donc aucune app ne peut la faire dériver. Contourné plutôt que plein par défaut : la hiérarchie d'action (README, section « Composition ») veut ce bouton REPLIÉ, jamais dans la rangée des gestes ordinaires — un rouge plein à côté d'un `.bouton.principal` ferait deux boutons qui crient. Le remplissage n'arrive qu'au survol, une fois l'intention confirmée par le geste de la souris. */ .bouton.danger { background: transparent; border-color: var(--danger); color: var(--danger); } .bouton.danger:hover { background: var(--danger); color: var(--danger-tx); } .bouton.pleine-largeur { width: 100%; } /* --- Champs -------------------------------------------------------------- */ .champ { display: flex; flex-direction: column; gap: var(--e-1); } .champ > span { font-size: var(--t-s); color: var(--tx-2); } /* `input:not([type])` n'est pas une coquetterie : un sans attribut type est un champ texte parfaitement valide, et c'est la forme la plus courante dans un gabarit. Sans cette ligne il ressort au style natif du navigateur au milieu de champs stylés — l'app a l'air cassée. */ .champ input, .champ select, .champ textarea, input:not([type]), input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], input[type=date], input[type=url], input[type=tel], select, textarea { width: 100%; padding: var(--e-2) var(--e-3); /* 16px, et pas moins : en dessous, Safari zoome la page au focus. */ font: inherit; font-size: 16px; /* Le contrôle le plus fréquent d'un formulaire ratait le plancher de 2px, partout, dans les cinq apps : `padding` + texte + deux bordures font 42px, jamais 44. Neuf autres règles du socle posent déjà ce plancher. */ min-height: 44px; color: var(--tx); background: var(--surface); border: 1px solid var(--line-controle); border-radius: var(--r-m); transition: border-color var(--t), box-shadow var(--t); } .champ input:focus, .champ select:focus, .champ textarea:focus, input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); } textarea { min-height: 5rem; resize: vertical; } /* --- Case à cocher et bouton radio --------------------------------------- La liste de sélecteurs des champs, juste au-dessus, couvre onze formes de saisie et s'arrête juste avant ces deux-là — les seules qui soient à la fois un champ ET une cible de clic, donc les seules à cumuler les deux planchers du socle. Elles ressortaient à 13x13px au style natif du navigateur, au milieu de champs stylés à 42px. LE LIBELLÉ EST LA CIBLE, pas seulement la case : c'est ce qui donne les 44px sans dessiner une case géante. `