/* ===================================================================== La charte, à UN seul endroit. Avant ce fichier, chaque page portait son propre `:root`. Les valeurs ont dérivé, comme dérivent toujours quatre copies d'une même chose : web/index.html --rouge: #2563EB ← du BLEU web/carte/index.html --rouge: #DC2626 ← du rouge Le même nom, deux couleurs opposées, deux pages. Et `--ombre-forte` contre `--ombre-haute` pour la même idée, `--douce` contre `--encre-douce` de même, `--r` à 14 px ici et 16 px là. Ce n'était pas un défaut d'écran : c'était un défaut de SOURCE. Changer la couleur d'accent demandait quatre modifications, et la quatrième s'oubliait. Une seule déclaration, et l'oubli n'est plus possible. Une page peut déroger — la carte publique a sa propre alerte allergène, plus franche que celle de l'atelier. Mais elle le DIT : toute redéclaration doit porter le marqueur « local » en commentaire de fin de ligne, et `scripts/theme.js` refuse les autres. Déroger reste permis ; déroger sans le savoir, non. (Le marqueur ne peut pas s'écrire ici tel quel : les commentaires CSS ne s'imbriquent pas, et son `*` suivi d'un `/` fermerait CE bloc au milieu d'une phrase. C'est arrivé le 2026-08-08 — la feuille se chargeait et ne définissait plus rien, sans un message.) ===================================================================== */ /* Les valeurs ci-dessous ont changé le 2026-08-13 : le bleu d'outil a laissé la place à une surface chaude et à un vert profond. Ce sont les VALEURS qui ont bougé, jamais les NOMS — c'est tout l'intérêt d'avoir centralisé. */ :root { /* --- Le texte et les fonds ---------------------------------------- */ --encre: #19211D; --encre-douce: #5B665E; --fond: #F7F3EB; --fond-creux: #EEE8DD; --carte: #FFFEFA; --trait: #DED5C7; /* --- L'accent ------------------------------------------------------ */ --accent: #1C6955; --accent-fonce: #114B3D; --accent-voile: #E2F0E8; --sur-accent: #FFFFFF; /* --- Les couleurs de marque ---------------------------------------- Elles n'ont PAS de statut : ni bon, ni douteux, ni faux. Elles servent le décor et l'identité. Confondre les deux familles remettrait de la couleur là où on a passé du temps à mettre du contraste. */ --terre: #B95841; --terre-voile: #F8E7DF; --or: #B7852F; --or-voile: #F6EFD9; --nuit: #122238; /* --- Les statuts --------------------------------------------------- Trois familles de trois : la couleur pleine (un point, un trait), le fond (un bandeau) et l'encre (du texte SUR ce fond). Sans la troisième, on écrit du vert vif sur du vert pâle et plus personne ne lit — c'est le contraste, pas la teinte, qui porte l'information. */ --ok: #237A4A; --ok-fond: #E7F4EA; --ok-encre: #176236; --alerte: #B97916; --alerte-fond: #FBF0D8; --alerte-encre: #7C4A06; --danger: #B33F38; --danger-fond: #F9E5E2; --danger-encre: #862B28; --violet: #7161A8; --violet-fond: #ECE9F7; /* --- Le relief ----------------------------------------------------- Deux ombres : celle qui POSE une carte sur le fond, et celle qui la SOULÈVE au survol. Une seule pour les deux donnerait soit des cartes qui flottent, soit un survol qu'on ne sent pas. */ --ombre: 0 1px 1px rgba(39,30,16,.04), 0 12px 34px -24px rgba(47,31,9,.34); --ombre-haute: 0 2px 4px rgba(39,30,16,.06), 0 20px 44px -22px rgba(47,31,9,.38); /* --- La forme ------------------------------------------------------ */ --r: 18px; --r-petit: 12px; /* Aucun @font-face vers un CDN : l'écran de cuisine ne doit dépendre d'aucun serveur tiers. `Inter` est prise si elle est installée, sinon la police système — qui, sur les machines visées, EST Inter ou SF. La serif passe en tête sur les vieilles Iowan/Baskerville : c'est elle qui porte les titres depuis la refonte, et la pile système suffit. */ --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --serif: "Iowan Old Style", "Baskerville", "Palatino Linotype", Georgia, ui-serif, serif; /* --- Noms hérités --------------------------------------------------- `haccp` écrit `--douce` et `--accent-f` là où l'atelier écrit `--encre-douce` et `--accent-fonce`. Mêmes valeurs, deux noms. Des ALIAS plutôt qu'une réécriture : la centralisation ne doit rien changer à l'écran le jour où elle est posée, sinon on ne saura pas distinguer un déplacement d'une régression. À retirer quand les usages auront été renommés. */ --douce: var(--encre-douce); --accent-f: var(--accent-fonce); } /* ===================================================================== CLAIR PAR DÉFAUT, et toujours pas `prefers-color-scheme`. La cuisine est éclairée, la tablette est posée sous une hotte : le sombre y était plus difficile à lire qu'agréable. Le jeu sombre s'active en posant `data-theme="sombre"` sur . QUI LE POSE, depuis le 2026-08-10 : `commun/soleil.js`, au coucher du soleil — calculé, pas deviné. Et seulement sur DEUX écrans, l'atelier et la carte publique. `/haccp/` ne charge pas ce module et reste clair : c'est lui, la tablette sous la hotte, et le paragraphe ci-dessus est le compte rendu d'un essai, pas une précaution théorique. Il ne redéclare QUE ce qui change. Les rayons, les polices et les aliases valent dans les deux modes, et les recopier ici serait rouvrir la porte que ce fichier vient de fermer. ===================================================================== */ :root[data-theme="sombre"] { --encre: #F5F0E7; --encre-douce: #B9C1B7; --fond: #0D1917; --fond-creux: #132521; --carte: #162B26; --trait: #294038; --accent: #79C6A8; --accent-fonce: #B4E4CF; --accent-voile: #1A4136; --sur-accent: #0D1917; --terre: #F0A18B; --terre-voile: #40251F; --or: #E6C266; --or-voile: #3E3420; --nuit: #0A121F; --ok: #77CF98; --ok-fond: #173826; --ok-encre: #A7E8BE; --alerte: #E9BB59; --alerte-fond: #3B2E17; --alerte-encre: #F5D78E; --danger: #EF8E87; --danger-fond: #3D211F; --danger-encre: #F6B8B2; --violet: #B5A8EA; --violet-fond: #2C2945; --ombre: 0 1px 2px rgba(0,0,0,.35), 0 14px 40px -22px rgba(0,0,0,.78); --ombre-haute: 0 3px 7px rgba(0,0,0,.42), 0 22px 52px -20px rgba(0,0,0,.85); } /* ===================================================================== La cible tactile. Une main gantée, ou mouillée, ne vise pas au pixel. 44 px est le minimum tenable — au-dessous, on valide le relevé d'à côté, et un relevé faux vaut moins que pas de relevé du tout. La règle est ici et pas dans chaque page pour la même raison que le reste : quatre copies dérivent. ===================================================================== */ button, [role="button"], input[type="checkbox"], input[type="radio"], input[type="file"], select { min-height: 44px; } /* `input[type="file"]` a été ajouté le 2026-09-04, en mesurant l'import Factur-X : la commande faisait 253 × 22 px, moitié moins que la règle, et elle y échappait sans un mot pour la seule raison que personne n'avait eu de champ fichier avant. La liste ci-dessus est une liste : ce qui n'y est pas n'est pas contrôlé. PLAFOND CONNU, et il ne se referme pas ici : `min-height` porte la COMMANDE à 44 px (mesuré : 253 × 44), pas le bouton que le navigateur dessine dedans. Le garantir demanderait de masquer le champ derrière un `