/* ========================================================================== tokens.css — la direction artistique validée du 2026-08-28, en système. -------------------------------------------------------------------------- Source de vérité : `design/DIRECTION_ARTISTIQUE.html`. Aucune valeur n'est inventée ici ; en cas de doute, c'est la maquette qu'on relit. ⚠️ Ce fichier se charge APRÈS main.css. C'est délibéré : son `:root` doit gagner sur celui de main.css, dont il reprend les noms de variables. Les sections pas encore refondues suivent donc le nouveau sol sans être réécrites — elles seront moins riches en attendant leur tour, jamais illisibles. Trois choses que la direction supprime, et qui sont supprimées ici : le fond bleu marine EN APLAT, le ciel étoilé, et le halo global. La profondeur vient de la lumière, pas d'un aplat. ⚠️ Ne pas lire « plus de bleu » : ce que la direction a écarté, c'est le bleu comme PEINTURE de fond. Depuis le 2026-09-02 il revient comme LUMIÈRE, en lavis dans le hero (cf. --bleu plus bas). Le sol, lui, reste noir. ========================================================================== */ :root { /* ---- Fonds --------------------------------------------------------- */ --noir: #08080A; /* le sol, partout */ --noir-2: #0F0F13; /* un palier au-dessus du sol */ --surf: #16161C; /* surface d'un bloc plein */ --rule: #26262F; /* filet */ --clair: #CFCBBF; /* contrepoint clair, et jamais de blanc pur : #F7F7FA en pleine largeur fait mal aux yeux. Valeur baissée d'un cran depuis #E6E4DE (arbitrage de la propriétaire, 2026-09-02) : vu en grand, le papier d'origine jurait avec le noir de l'app et du site. C'est le PLANCHER : sous ~#C6C1B4, --ink-soft passe sous 4,5:1 et il faudrait l'assombrir avec. */ /* ---- Texte — ratios MESURÉS sur #08080A, pas estimés. Ne pas redescendre : la valeur d'origine de --faint (#63636F) tombait à 3,4:1 et était réellement illisible en petit corps. ------------- */ --blanc: #F7F7FA; /* 18,9:1 */ --gris: #B4B4C2; /* 9,8:1 — corps */ --faint: #9898A6; /* 7,0:1 — secondaire */ --ink: #0C0C10; /* texte sur la section claire : 12,04:1 */ --ink-soft: #4E4E58; /* corps sur la section claire : 5,07:1. Le commentaire d'origine annonçait 7,6:1 ; la valeur était fausse même sur l'ancien papier, où le ratio mesuré valait 6,47:1. */ /* ---- Accent — une seule pilule orange dans la page ------------------ */ --orange: #FF9100; --orange-ink: #160C00; /* ---- Le bleu de marque. Réintroduit le 2026-09-02 à la demande de la propriétaire : « ça reste la couleur identité de la marque ». Ce n'est pas une teinte inventée pour le site, c'est `AppColors.Tellyah.NightBlue`, un token nommé de l'app, utilisé par son thème et ses écrans, et que main.css portait avant que la direction ne le remplace par le noir. Il revient comme LUMIÈRE, jamais comme peinture : le sol reste `--noir`, et c'est un lavis qui emplit le hero derrière tout le reste. C'est la lecture qui reste fidèle à la direction — « la profondeur vient de la lumière » — et celle qui répare le vide mesuré sur les bords du hero, sans repeindre les sections qui vont très bien en noir. En composantes, comme les lueurs de genre, pour moduler l'alpha. */ --bleu: 10, 15, 44; /* NightBlue #0A0F2C */ --bleu-clair: 31, 42, 92; /* LightBlue #1F2A5C */ /* ---- Lueur de genre. La scène change de genre → ces deux teintes changent, et rien d'autre. C'est la lumière qui porte l'harmonie, pas des cadres. Le polar est au centre parce que son or et son rouge profond sont ANALOGUES à l'orange du CTA ; le vert du bien-être en est presque le complémentaire et se battait avec. Exprimées en composantes pour pouvoir moduler l'alpha. -------- */ --glow-1: 139, 0, 0; /* rouge profond du polar */ --glow-2: 212, 175, 55; /* or du polar */ /* ---- Typo ---------------------------------------------------------- */ --f-disp: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --f-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Échelle Archivo : une seule graisse (800), un seul serrage (-.045em), trois tailles. Tout titre de la page sort d'ici. Les unités `cqw` supposent un ancêtre en `container-type` — hors conteneur elles retombent sur la fenêtre, ce qui reste correct. */ --t-h1: clamp(34px, 7.6cqw, 78px); --t-h2: clamp(26px, 5cqw, 50px); --t-h3: clamp(19px, 2.9cqw, 28px); --tight: -.045em; /* ---- Rythme -------------------------------------------------------- */ --sp-1: 6px; --sp-2: 12px; --sp-3: 20px; --sp-4: 32px; --sp-5: 52px; --sp-6: 84px; /* ---- Rayons & ombres. AUCUNE boîte, aucun cadre, aucun châssis d'appareil : ces rayons ne servent qu'aux captures, aux pilules et aux boutons. ----------------------------------------------- */ --r-shot: 16px; --r-shot-lg: 20px; --r-pill: 999px; --sh-shot: 0 30px 60px -20px rgba(0, 0, 0, .85); --sh-cta: 0 14px 34px -12px rgba(255, 145, 0, .6); /* ====================================================================== Reprise des noms de main.css. C'est ce bloc qui fait suivre TOUT le site — y compris les sections pas encore refondues — sans y toucher une ligne. ====================================================================== */ --bg-night: var(--noir); --bg-deep: var(--noir); --card: rgba(255, 255, 255, .045); --card-hi: rgba(255, 255, 255, .075); --stroke: rgba(255, 255, 255, .09); --stroke-hi: rgba(255, 255, 255, .22); --text: var(--blanc); --muted: var(--gris); --subtle: var(--faint); --accent: var(--orange); --accent-hi: #FFA733; --accent-ink: var(--orange-ink); /* L'or de la marque devient celui du polar : la page n'a plus qu'une famille chaude, du kicker de section jusqu'à la lueur du hero. */ --gold: rgb(var(--glow-2)); --gold-soft: #E8D08A; /* Plus de dégradé sur le primaire : « l'accent sur UNE seule pilule » veut dire un aplat, pas un fondu qui attire l'œil deux fois. */ --grad-warm: var(--orange); --shadow-accent: var(--sh-cta); --shadow-gold: 0 18px 44px -14px rgba(255, 145, 0, .72); /* Fraunces quitte les titres. Les `font-variation-settings` (opsz / SOFT / WONK) restés dans main.css et home.css deviennent des no-op : Archivo n'a pas ces axes, ils sont ignorés sans effet de bord. */ --font-display: var(--f-disp); --font-sans: var(--f-body); --font-mono: var(--f-mono); /* Encombrement mesuré de la nav pilule : 9 + 40 (la pilule d'install, le plus haut des trois) + 9 + 2 (bordures) = 60, plus 18 de marge haute. Seule l'ancre de « Lire un extrait » s'en sert encore — le hero ne chevauche plus le header, donc plus rien ne se compense ici. */ --header-h: 78px; } /* ========================================================================== Les suppressions de la direction. ========================================================================== */ /* Le ciel étoilé a été RETIRÉ, le 2026-09-04, de `main.css` et des cinq pages qui le portaient encore. La règle de neutralisation qui vivait ici n'a donc plus de cible. Elle avait été posée pour couvrir « les pages qui adopteront tokens.css sans être retouchées » : ces pages ont fini par être retouchées, et `.page-lueur` a pris la place. */ /* Le halo global disparaît aussi : une seule source de lumière dans la page, et c'est la lueur de genre du hero. Deux halos qui se croisent, c'est exactement l'effet de collage qui a fait rejeter la version précédente. */ body::before { background: none !important; } /* Le primaire redevient une pilule pleine, sans liseré doré : le contour clair sur l'aplat orange lisait comme un cadre, et la direction n'en veut aucun. */ .btn-primary { border-color: transparent; } /* ========================================================================== Les titres. -------------------------------------------------------------------------- « Archivo 800, très serré. » Le lot 1 avait bien repointé --font-display sur Archivo, mais laissé les graisses de Fraunces (600 pour h1, 500 pour h2) et son serrage : les titres étaient dans la bonne famille, pas dans la bonne voix. Une seule graisse, un seul serrage, pour toute la page. ========================================================================== */ h1, h2, h3, h4 { font-weight: 800; letter-spacing: var(--tight); }