/* ===================================================================== KEIRAKU — le système ===================================================================== Écrit le 20 septembre 2026, après un audit qui a compté, sur 1 900 lignes de CSS : 21 tailles de police pour 124 usages, 37 espacements pour 257, 16 interlettrages, 10 rayons, et 25 couleurs écrites en dur. Chaque composant avait réinventé les siens. Ce n'est pas un défaut de goût, c'est un défaut d'outillage : sans échelle nommée, on tape la valeur qui va bien à cet endroit-là, et l'ensemble part en poussière. Pire : le MÊME NOM désignait deux couleurs selon le fichier. `--encre` valait #131316 dans l'application et #16161A sur la page de vente ; `--gris` #918C85 d'un côté, #67635E de l'autre. Ce n'était pas une faute — un gris lisible sur fond sombre ne l'est pas sur fond clair — mais alors ce ne sont pas les mêmes jetons, et les appeler pareil garantissait la dérive. D'où trois couches, et l'ordre compte : 1. LA MARQUE — trois couleurs, deux polices. Invariables. 2. LES RÔLES — « fond », « texte », « bord »… Ils pointent vers la marque, et se redéfinissent selon le thème. 3. LES ÉCHELLES — taille, espacement, rayon, élévation, mouvement. Indépendantes du thème. Règle d'usage : un composant n'écrit JAMAIS une valeur. Il nomme un rôle ou un pas d'échelle. Si aucun ne convient, c'est l'échelle qu'il faut discuter, pas la valeur qu'il faut inventer. ===================================================================== */ :root { /* ═══ 1. LA MARQUE ═══════════════════════════════════════════════ */ /* Les trois couleurs. Elles ne changent pas d'un thème à l'autre : ce sont ELLES la marque, le reste n'est que leur mise en œuvre. */ --marque-encre: #131316; /* le noir chaud du fond de scène */ --marque-papier: #EDEAE4; /* le blanc cassé chaud, sur l'encre */ --marque-sceau: #BF3B2E; /* le rouge du « RAKU » et des alertes */ /* Les deux déclinaisons dont le thème clair a besoin. Ce ne sont pas des variantes décoratives : sur fond clair, #EDEAE4 n'est plus un blanc mais un beige, et #BF3B2E tombe à 4,1:1 en texte. */ --marque-papier-vif: #FBFAF7; /* fond de page en thème clair */ --marque-sceau-txt: #A32E22; /* le sceau lisible en texte, 5,6:1 */ /* Les deux polices. Le serif porte la voix, la grotesque porte l'outil. Ne jamais mettre du Newsreader dans un bouton. */ --f-titre: 'Newsreader', Georgia, 'Noto Serif CJK JP', serif; --f-ui: 'Inter', system-ui, -apple-system, sans-serif; /* ═══ 3. LES ÉCHELLES ════════════════════════════════════════════ */ /* (avant les rôles, parce que les rôles n'en dépendent pas et que l'ordre de lecture est celui-ci : ce qui ne bouge jamais d'abord) */ /* ── Tailles de police ────────────────────────────────────────── Neuf pas, raison 1,22 à partir du corps à 15 px — qui était déjà la taille dominante (38 usages sur 124). Les vingt-et-une valeurs relevées s'y rangent toutes, à moins d'un demi-pixel près. */ --t-0: 11px; /* mentions légales, compteurs, exposants */ --t-1: 12.5px; /* étiquettes en capitales, badges */ --t-2: 13.5px; /* texte secondaire, légendes */ --t-3: 15px; /* LE CORPS */ --t-4: 18px; /* accroche, chapô */ --t-5: 22px; /* titre de section */ --t-6: 28px; /* titre de bloc */ --t-7: 38px; /* titre de page */ --t-8: 52px; /* affiche — la page de vente seulement */ /* ── Espacements ──────────────────────────────────────────────── Base 4. Les trente-sept valeurs relevées se ramènent à ces neuf ; les 7, 9, 11, 13, 22, 26 px n'étaient que du bruit d'ajustement. */ --e-0: 2px; --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px; /* ── Rayons ───────────────────────────────────────────────────── Un rayon dit une taille d'objet : 4 pour une puce, 8 pour un bouton, 14 pour une carte, 22 pour un panneau. La pilule est à part — elle ne dit pas la taille mais la forme. */ --r-1: 4px; --r-2: 8px; --r-3: 14px; --r-4: 22px; --r-pilule: 999px; /* ── Interlettrage ────────────────────────────────────────────── En em, pour suivre la taille. Les seize valeurs en px relevées étaient toutes des approximations de ces quatre-là. */ --ls-titre: -.015em; /* le serif se resserre en grand */ --ls-corps: 0; --ls-caps: .12em; /* capitales d'étiquette */ --ls-caps-large: .22em; /* capitales d'en-tête, très espacées */ /* ── Épaisseurs de trait ────────────────────────────────────────*/ --trait: 1px; --trait-fort: 2px; /* ── Élévation ────────────────────────────────────────────────── Deux couches par ombre : un contact serré et sombre, une diffusion large et douce. Une ombre à une seule couche paraît toujours collée ou sale. */ --ombre-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px -2px rgba(0,0,0,.35); --ombre-2: 0 2px 4px rgba(0,0,0,.45), 0 12px 28px -8px rgba(0,0,0,.6); --ombre-3: 0 4px 8px rgba(0,0,0,.5), 0 28px 64px -16px rgba(0,0,0,.75); /* Le trait de lumière du bord supérieur : c'est lui qui donne une épaisseur à une surface au lieu d'un aplat. */ --lumiere: inset 0 1px 0 rgba(255,255,255,.055); /* ── Mouvement ────────────────────────────────────────────────── Une courbe pour ce qui entre et sort, une plus vive pour ce qui répond au doigt. Trois durées, pas davantage. */ --sortie: cubic-bezier(.22,.61,.36,1); --ressort: cubic-bezier(.34,1.32,.64,1); --vite: 120ms; --moyen: 220ms; --ample: 380ms; /* ── Largeurs de lecture ──────────────────────────────────────── Une colonne de texte au-delà de 70 caractères fatigue ; en deçà de 45 elle hache. 66ch est le compromis usuel. */ --colonne: 66ch; --colonne-large: 1180px; } /* ═══ 2. LES RÔLES ═════════════════════════════════════════════════ C'est ici qu'un thème se décide. Un composant ne connaît QUE ces noms-là ; il fonctionne alors dans les deux thèmes sans le savoir. */ /* ── Thème sombre : l'application ─────────────────────────────────*/ :root, [data-theme="sombre"] { --fond: var(--marque-encre); --surface: #1A1A1D; /* panneau posé sur le fond */ --surface-2: #212125; /* panneau posé sur un panneau */ --surface-verre: rgba(22,22,25,.82); --verre-flou: saturate(140%) blur(22px); --texte: var(--marque-papier); --texte-doux: #9A958D; /* 5,56:1 sur le fond de scène */ --texte-faible: #6F6B66; /* désactivé, non interactif */ --bord: rgba(237,234,228,.14); --bord-fort: rgba(237,234,228,.28); /* L'accent du mobilier est le PAPIER, pas une couleur. Une teinte sans hue ne peut pas être confondue avec un méridien — et il y en a quatorze à l'écran. C'est la contrainte fondatrice de la charte. */ --accent: var(--marque-papier); --accent-doux: rgba(237,234,228,.14); --accent-txt: var(--marque-encre); /* texte SUR l'accent */ --alerte: var(--marque-sceau); --alerte-doux: rgba(191,59,46,.16); } /* ── Thème clair : la page de vente, les mentions, les CGV ────────*/ [data-theme="clair"] { --fond: var(--marque-papier-vif); --surface: #FFFFFF; --surface-2: #F2EFEA; --surface-verre: rgba(251,250,247,.86); --verre-flou: saturate(130%) blur(18px); --texte: #16161A; /* 15,8:1 sur le papier vif */ --texte-doux: #67635E; /* 5,7:1 */ --texte-faible: #A9A49D; --bord: #E2DCD2; --bord-fort: #C9C2B4; --accent: var(--marque-sceau); --accent-doux: rgba(191,59,46,.10); --accent-txt: #FFFFFF; --alerte: var(--marque-sceau-txt); --alerte-doux: rgba(191,59,46,.10); /* Sur fond clair, une ombre noire salit. Elle se teinte de l'encre et s'allège beaucoup. */ --ombre-1: 0 1px 2px rgba(22,22,26,.06), 0 2px 8px -2px rgba(22,22,26,.05); --ombre-2: 0 2px 6px rgba(22,22,26,.07), 0 14px 32px -10px rgba(22,22,26,.12); --ombre-3: 0 6px 14px rgba(22,22,26,.08), 0 32px 72px -20px rgba(22,22,26,.18); --lumiere: inset 0 1px 0 rgba(255,255,255,.9); } /* ═══ LE SOCLE ═════════════════════════════════════════════════════ Le strict minimum, commun aux deux surfaces. Tout le reste est du ressort des composants. */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--f-ui); font-size: var(--t-3); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { font-family: var(--f-titre); font-weight: 400; letter-spacing: var(--ls-titre); line-height: 1.12; margin: 0; } /* Le focus se voit, toujours, et de la même façon partout. C'est une obligation d'accessibilité avant d'être un choix esthétique. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: var(--trait-fort) solid var(--accent); outline-offset: 2px; border-radius: var(--r-1); } /* Le réglage système l'emporte sur toute animation de la charte. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }