/* Fichier généré par scripts/sync-tokens.js — ne pas éditer.
Source : design/storitelia-tokens.css */
/* ==========================================================================
storitelia-tokens.css — source unique de la direction artistique.
Le fichier canonique est design/storitelia-tokens.css, et c'est le seul à
éditer. Après toute modification : npm run sync-tokens
Il vit hors des racines statiques parce qu'il y en a trois, dont une servie
par Caddy sur un autre domaine : aucune URL ne peut les couvrir toutes.
scripts/sync-tokens.js en dépose une copie générée dans chacune. Ces copies
portent un bandeau « ne pas éditer » ; `npm run sync-tokens:check`, appelé
par pretest et par test/design-tokens.test.js, échoue si l'une diverge.
Les règles d'usage sont dans AGENTS.md, section « Direction artistique et
rédaction ». Ce fichier ne contient que des valeurs : aucune règle de mise
en page, aucun sélecteur de composant.
CHARGEMENT — en PREMIER, avant toute autre feuille, dans les trois racines :
public/index.html
panel/public/index.html (racine servie par panel/server.js)
coming-soon/index.html (racine servie par Caddy sur storitelia.com)
Le dépôt n'utilise ni bundler ni @import : l'ordre des fait foi, et
les feuilles historiques doivent rester chargées APRÈS ce fichier pour
pouvoir le surcharger pendant la migration.
POLICES — Fraunces et Inter sont auto-hébergées. Les @font-face vivent dans
design/storitelia-fonts.css, à charger AVANT ce fichier ; les .woff2 dans
design/fonts/. La CSP de deploy/Caddyfile bloquerait Google Fonts, et elle
ne doit PAS être ouverte pour autant : Storitelia promet aux familles que
leurs données restent chez elles.
========================================================================== */
:root {
color-scheme: light;
/* --- Surfaces ---------------------------------------------------------
Le crème occupe 80 % de toute surface. Les accents sont des ponctuations. */
--creme: #F6F1E7; /* fond principal — remplace #f8f3e9 et #f4efe5 */
--creme-clair: #FBF8F2; /* cartes, surfaces surélevées */
--creme-profond: #EDE5D6; /* zones enfoncées, séparations */
--bord: #DED3BF; /* filets et bordures 1px */
/* --- Encres -----------------------------------------------------------
Brun-noir, jamais #000. */
--encre: #1F1B16; /* texte principal — 15,21 sur crème */
--encre-douce: #574F45; /* texte secondaire, chapôs — 7,15 */
--encre-legere: #7D7365; /* libellés, métadonnées — 4,13 : ≥18px UNIQUEMENT */
/* --- Les quatre accents chauds ----------------------------------------
Une couleur, un seul métier. Si l'ambre devient cliquable ou la terre
cuite décorative, les quatre accents se confondent. */
/* L'ACTION. Bouton principal, symbole du logo, tout ce qui se clique.
Une seule zone terre cuite par écran. Blanc sur terre = 4,56. */
--terre: #B85C2E;
--terre-voile: #E8C9AE; /* bordure des boutons secondaires, surlignage léger */
/* LA PROFONDEUR. Texte accentué sur crème, libellés, état survolé du
bouton. Jamais un aplat plein seul. 6,64 sur crème. */
--brique: #96341F;
/* LA MISE EN AVANT. Histoire du jour, filets, ce qu'on veut faire
remarquer. Décoratif — jamais une action. 5,96 sur crème. */
--ambre: #9A6614;
--ambre-voile: #EBD6B2; /* fond des badges de mise en avant */
/* LA DOUCEUR. Presque toujours en teinte claire. 6,10 sur crème. */
--rose: #A85C52;
--rose-voile: #F0DCD8; /* fonds de lecture, moments tendres, zones où l'on ralentit */
/* --- La couleur fonctionnelle -----------------------------------------
Seule couleur froide du système, et c'est délibéré : une garantie doit se
lire comme une garantie, pas comme un ornement. ELLE NE DÉCORE JAMAIS.
Le jour où la sauge habille un titre ou un fond, elle perd son pouvoir de
signal. Uniquement les états vérifiés, validés, terminés. 5,28 sur crème. */
--sauge: #4F6B4A;
--sauge-voile: #D3DFCE; /* fond du badge « Récit vérifié » */
/* --- L'alerte ----------------------------------------------------------
Ne fait PAS partie des quatre accents chauds : une alerte n'est pas une
nuance de la marque, c'est une interruption.
RÈGLE OBLIGATOIRE — une erreur ne se signale jamais par la couleur seule.
Toujours un fond --alerte-voile OU un aplat --alerte, PLUS une icône,
PLUS un mot explicite. Dans une palette entièrement chaude, où terre,
brique, ambre et rose occupent déjà le rouge-orangé, la teinte seule ne
distingue rien. */
--alerte: #B3261E; /* 5,81 · 6,17 · 5,22 — blanc dessus 6,54 */
--alerte-voile: #F3D3CC; /* encre dessus 12,23 — alerte dessus 4,67 */
/* --- Le texte posé sur un aplat d'accent -------------------------------
Blanc pur, et pas --creme-clair : sur terre, le crème clair ne fait que
4,30 quand le blanc atteint 4,56. Un aplat d'accent est le seul endroit
où le blanc pur est admis.
terre 4,56 · brique 7,48 · ambre 4,90 · rose 4,86 · sauge 5,94 ·
alerte 6,54 */
--sur-accent: #FFFFFF;
/* --- Accents en texte -------------------------------------------------
Pour du TEXTE coloré, écrire toujours color: var(--brique-texte), jamais
var(--brique) : un aplat et un texte n'ont pas les mêmes contraintes de
contraste. Un composant traverse ainsi les deux thèmes sans condition.
Les APLATS gardent --terre / --ambre / --rose dans les deux thèmes, avec
du blanc dessus (4,56 · 4,90 · 4,86).
Contrastes en commentaire : crème · crème-clair · crème-profond. */
/* En clair, un accent terre cuite qui porte du texte devient brique — terre
sur crème ne fait que 4,05:1. La nuit, les deux se séparent à nouveau. */
--terre-texte: var(--brique);
--brique-texte: var(--brique); /* 6,64 · 7,06 · 5,98 */
/* Ambre et rose s'assombrissent pour le texte. Les valeurs de jour ne font
que 3,45 et 3,69 sur leur propre voile, or c'est là le cas d'usage réel :
les libellés de badge posés sur --ambre-voile et --rose-voile. */
--ambre-texte: #7E530F; /* 5,96 · 6,33 · 5,36 — sur voile 4,72 */
--rose-texte: #8C463D; /* 6,10 · 6,48 · 5,49 — sur voile 5,21 */
/* La sauge aussi : sur son propre voile, celui du badge « Récit vérifié »,
la couleur d'aplat ne ferait que 4,31. */
--sauge-texte: #476043; /* 6,17 · 6,56 · 5,55 — sur voile 5,03 */
--alerte-texte: var(--alerte); /* 5,81 · 6,17 · 5,22 */
/* --- Mode nuit --------------------------------------------------------
Valeurs brutes. Le remappage est plus bas, sur [data-theme="nuit"]. */
--nuit: #17140F;
--nuit-surface: #221E18;
--nuit-encre: #EFE8DB;
/* --- Les surfaces sombres permanentes ----------------------------------
Barre latérale, lecteur. C'est une mise en scène, pas un thème.
INDÉPENDANT de [data-theme="nuit"], même si les valeurs coïncident
aujourd'hui : le jour où le mode nuit évolue, le lecteur ne doit pas
bouger. Ne jamais utiliser --nuit* pour une zone sombre permanente.
Les accents en texte posés sur ces surfaces sont remappés plus bas,
sur [data-surface="scene"]. */
--scene: #17140F;
--scene-surface: #221E18;
--scene-encre: #EFE8DB; /* 15,07 sur scene · 13,60 sur scene-surface */
/* --- Typographie ------------------------------------------------------
Le logotype « storitelia » est toujours en bas de casse. */
--police-titre: Fraunces, Georgia, "Times New Roman", serif;
--police-ui: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
/* Titres, logo, éditorial — Fraunces 600 */
--titre-graisse: 600;
--titre-opsz: 96; /* font-variation-settings: "opsz" var(--titre-opsz) */
--titre-tracking: -0.02em;
--titre-interligne: 1.08;
/* Interface, texte courant — Inter 400/500/600 */
--corps-taille: 17px;
--corps-interligne: 1.65;
/* Libellés — Inter 600, majuscules */
--libelle-taille: 12px;
--libelle-graisse: 600;
--libelle-tracking: 0.14em;
/* Page lue à voix haute — Inter 400, 20–24px */
--lecture-taille: clamp(20px, 2.2vw, 24px);
--lecture-interligne: 1.75;
/* --- Formes -----------------------------------------------------------*/
--rayon-6: 6px;
--rayon-10: 10px;
--rayon-16: 16px;
--rayon-24: 24px;
--rayon-plein: 999px;
/* --- Ombres -----------------------------------------------------------
Toujours chaudes, jamais grises : teintées à l'encre (31,27,22). */
--ombre-douce: 0 1px 2px rgba(31, 27, 22, .05), 0 6px 20px rgba(31, 27, 22, .06);
--ombre-carte: 0 2px 4px rgba(31, 27, 22, .06), 0 14px 38px rgba(31, 27, 22, .10);
/* --- Rythme -----------------------------------------------------------*/
--espace-4: 4px;
--espace-8: 8px;
--espace-12: 12px;
--espace-16: 16px;
--espace-24: 24px;
--espace-32: 32px;
--espace-48: 48px;
--espace-72: 72px;
/* --- Mouvement --------------------------------------------------------*/
--transition: 220ms cubic-bezier(.22, .61, .36, 1);
}
/* Mode nuit — opt-in explicite via .
Le remappage réattribue les surfaces et l'encre ; les accents chauds sont
inchangés, ils portent le même métier de jour comme de nuit.
Pour un basculement automatique, dupliquer ce bloc sous
@media (prefers-color-scheme: dark) — non activé aujourd'hui, aucune des
trois racines n'ayant encore de mode nuit. */
[data-theme="nuit"] {
color-scheme: dark;
--creme: var(--nuit);
--creme-clair: var(--nuit-surface);
--creme-profond: #100E0A;
--bord: #3A342B;
--encre: var(--nuit-encre);
--encre-douce: #BEB4A3;
--encre-legere: #9A9083;
/* Accents en TEXTE. Les valeurs de jour deviennent illisibles sur
--creme-clair (#221E18) : brique 2,22 · sauge 2,79 · ambre 3,38 ·
rose 3,41 · terre 3,64 — toutes sous le seuil de 4,5:1. Ces variantes
claires les remplacent partout où l'accent porte du texte.
Les APLATS ne changent pas : un bouton reste --terre avec du blanc
dessus, et le blanc sur les valeurs de jour reste conforme la nuit
(terre 4,56 · brique 7,48 · ambre 4,90 · rose 4,86 · sauge 5,94).
Contrastes : sur --creme-clair #221E18 / sur --creme #17140F. */
--terre-texte: #C27A57; /* 4,91 / 5,44 */
--brique-texte: #CC7461; /* 4,92 / 5,46 */
--ambre-texte: #CC9133; /* 6,05 / 6,70 */
--rose-texte: #B17E77; /* 4,83 / 5,35 */
--sauge-texte: #769470; /* 4,93 / 5,46 */
--alerte-texte: #E8837A; /* 6,28 / 6,96 */
/* Les voiles clairs deviennent des fonds sourds : sur fond nuit, un voile
crème redeviendrait un aplat lumineux et casserait la hiérarchie. */
--terre-voile: #4A2E1B;
--ambre-voile: #46341A;
--rose-voile: #452B27;
--sauge-voile: #2C3A29;
/* Sans cette ligne, --alerte-voile resterait clair et l'encre de nuit
tomberait à 1,15 dessus. Valeur dérivée, à valider. */
--alerte-voile: #4A2320; /* alerte-texte dessus 5,13 · encre-nuit 11,10 */
--ombre-douce: 0 1px 2px rgba(0, 0, 0, .30), 0 6px 20px rgba(0, 0, 0, .36);
--ombre-carte: 0 2px 4px rgba(0, 0, 0, .34), 0 14px 38px rgba(0, 0, 0, .46);
}
/* Accents en texte posés sur une surface --scene.
PROPOSITION — à retirer d'une seule pièce si elle ne convient pas.
Une surface scene est sombre en permanence, quel que soit le thème. Les
accents en texte du mode clair y échouent tous : terre 3,64 · brique 2,22 ·
ambre 3,38 · rose 3,41 · sauge 2,79 · alerte 2,54 sur --scene-surface.
Sans ce bloc, écrire color: var(--brique-texte) dans le lecteur donnerait
2,22 sans qu'aucun garde-fou ne le signale.
Ce bloc réutilise exactement les variantes déjà validées pour le mode nuit :
il n'introduit aucune valeur nouvelle.
Usage :