/* ========================================================================== JASMIN GARDEN DESIGN — DESIGN TOKENS CINQUIÈME PASSE — LA LETTRE INSCRITE. 24-09-2026. Deux consignes, une seule passe : reprendre la typographie de la plaque de marque, et retirer le bleu de l'accent. 1. LA LETTRE DE LA PLAQUE. Le mot-symbole fourni (JASMIN / L'ART DU PAYSAGE) est composé en capitales romaines inscrites : forts contrastes, empattements fins et aigus, jambage du J sous la ligne, M aux montants écartés, et un interlettrage large pour la ligne basse. Cinzel — dessinée d'après les inscriptions latines du premier siècle — est la face libre qui reprend ce squelette. Elle devient --font-brand et porte désormais tous les titres du site comme ses petits textes capitales (voir la section « CINQUIÈME PASSE » de 01-base.css). DM Serif Display, appelée par la marque précédente pour ce rôle, quitte le site — et sa ligne dans la requête de polices. 2. LA FIN DU BLEU. Le bleu électrique #1EA7FF portait l'emphase depuis la quatrième passe. Il est remplacé par la teinte de la plaque elle-même : un laiton pâle, presque un os. L'emphase ne se fait plus par la couleur mais par la lettre — c'est l'énoncé de la cinquième passe. OBSIDIENNE #000000 le fond et les aplats noirs BLANC #FFFFFF le texte LAITON PÂLE #D9C08A l'accent — ce qui demande un geste : boutons pleins (texte noir dessus), sélection, filet de focus, barre de progression, mots mis en avant dans les titres. 11,9:1 sur l'obsidienne. SABLE #B3A894 le second accent — les repères : le mot qui ouvre chaque étiquette (.label__index). 8,9:1 sur le noir. Le LAITON CLAIR #EFE3C2 (--c-laiton-clair, 16,1:1) et le LAITON PROFOND #B99F66 (--c-releve, 8,2:1 avec le texte noir) ne sont pas des teintes de plus : le premier est l'accent monté d'un cran, le second sa réserve au survol des boutons pleins. Aucun n'est une teinte de texte courant. Disparu avec la cinquième passe : le bleu #1EA7FF, le bleu éclairci #6FC3FF, le lilas #9E80C4 et la lavande #BCA3D9. Le bleu de l'oiseau de paradis ne survit que dans la plaque — une photographie, pas un jeton de couleur. Le fond reste le NOIR PUR : ni pierre tuilée, ni grain, ni halo, ni voile. La couleur ne revient que par la marque et par ses deux accents. ========================================================================== */ :root { /* ---------------------------------------------------------------- Couleurs */ --c-noir: #000000; /* obsidienne : fond, aplats, texte posé sur l'accent */ --c-encre: #0b0b0b; /* surface relevée d'un pas (visage de carte, cadre) */ --c-encre-2: #151515; /* surface relevée de deux pas */ --c-blanc: #ffffff; /* texte principal */ /* Le laiton pâle de la plaque de marque : l'accent. Ses 11,9:1 sur l'obsidienne lui permettent de tenir les deux rôles de l'accent — la couleur des mots mis en avant dans les titres, et l'aplat des boutons pleins, où le texte passe au noir (11,9:1 dans l'autre sens, donc). */ /* ------------------------------------------------------------------------ SIXIÈME PASSE bis, 26-09-2026 — NOIR ET BLANC PURS, À L'ESSAI. À la demande de la maison, la palette se réduit à deux valeurs : le noir du fond (#000000) et le blanc du texte (#ffffff). Le laiton pâle, le sable, le laiton clair et le laiton profond ne sont pas supprimés : ils sont ramenés au blanc et à ses deux réserves de gris. Tout le site les appelle par leur nom (--c-laiton, --accent…), donc tout le site suit — et revenir en arrière se fait ici, dans ces quatre lignes. · le laiton → blanc pur : l'accent, c'est maintenant le blanc ; · le laiton clair → blanc à 0,72 : la réserve des survols, qui se distingue du blanc plein sans introduire de teinte ; · le sable → blanc à 0,62 : le repère des étiquettes, un cran sous le texte, ce qu'il était déjà ; · le laiton profond → blanc à 0,50 : inutilisé, il reste en réserve. Ce qui disparaît avec les teintes : la seule couleur du site. La hiérarchie ne repose plus que sur trois choses — la taille, la graisse et trois valeurs de blanc. */ --c-laiton: #ffffff; --c-laiton-clair: rgba(255, 255, 255, 0.72); --c-releve: rgba(255, 255, 255, 0.5); --c-sable: rgba(255, 255, 255, 0.62); /* Matières sombres — quatre pas de profondeur, du plus creusé au plus relevé. La revue du 21-09-2026 fait basculer le site entier côté nuit : les photographies deviennent les seules sources de lumière de la page, et ces quatre pas remplacent l'ancien ivoire des fonds clairs. La revue du 23-09-2026 les neutralise : ils étaient olivâtres, la plaque est noire ; le second passage du 23-09-2026 les met au noir pur — seuls s-2 et s-3 gardent un pas de gris, celui des rares surfaces qui doivent encore se détacher du fond. */ --s-0: #000000; --s-1: #000000; --s-2: #0b0b0b; --s-3: #161616; /* Couleurs de r\u00f4le (permettent d'inverser un chapitre entier). SIXIÈME PASSE, 26-09-2026 — LA PRÉSENCE DES PETITS TEXTES. Sur le noir pur, la mesure n'était pas en cause : 0,58 de blanc donne encore 6,9:1 de contraste. C'est la présence qui manquait — à 11 px, en capitales espacées, un gris se lit comme une salissure posée sur la photographie. L'écart entre le texte et ses réserves se resserre donc, et les filets, qui dessinaient les blocs, se voient enfin. Mêmes teintes, un cran plus franches. */ --bg: var(--s-1); --bg-alt: var(--s-2); --fg: var(--c-blanc); --fg-muted: rgba(255, 255, 255, 0.86); --fg-faint: rgba(255, 255, 255, 0.72); --rule: rgba(255, 255, 255, 0.22); --rule-strong: rgba(255, 255, 255, 0.38); /* L'accent est le laiton de la plaque, sans éclaircissement : 11,9:1 sur l'obsidienne — assez pour les étiquettes capitales de 11 px comme pour les mots mis en avant dans les grands titres. */ --accent: var(--c-laiton); /* Second accent : les repères — voir .label__index (01-base). */ --accent-2: var(--c-sable); /* -------------------------------------------------------------- Typographie */ --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --font-sans: "Jost", "Futura", "Century Gothic", "Helvetica Neue", Arial, system-ui, sans-serif; /* La plaque de marque a livré sa lettre le 24-09-2026 : capitales romaines inscrites, forts contrastes, empattements fins et aigus, jambage du J sous la ligne. Cinzel est la face libre qui reprend ce squelette ; elle porte --font-brand et, par la section « CINQUIÈME PASSE » de 01-base.css, tous les titres du site et tous ses petits textes capitales. Cormorant reste la serif éditoriale (chapeaux, citations, lettrine) ; Jost, la bâton du texte courant. DM Serif Display, appelée par la marque précédente, a quitté le site avec sa ligne dans la requête de polices. */ --font-brand: "Cinzel", "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif; /* Échelle typographique fluide */ --t-display-1: clamp(2.2rem, 0.85rem + 5.4vw, 6rem); --t-display-2: clamp(1.7rem, 0.95rem + 3vw, 3.5rem); --t-display-3: clamp(1.3rem, 1rem + 1.4vw, 2.1rem); --t-display-4: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem); --t-lede: clamp(1.05rem, 0.99rem + 0.34vw, 1.35rem); --t-body: clamp(0.975rem, 0.95rem + 0.16vw, 1.075rem); --t-small: clamp(0.85rem, 0.83rem + 0.1vw, 0.92rem); --t-label: clamp(0.68rem, 0.66rem + 0.08vw, 0.75rem); --lh-display: 1.04; --lh-title: 1.14; --lh-body: 1.72; --lh-tight: 1.35; /* Interlettrage : une échelle, quatre crans, une seule raison — la capitale inscrite de Cinzel demande du blanc entre ses lettres, et ce blanc n'est pas le même selon la taille. Plus la lettre est petite, plus elle en demande ; un grand titre en supporte moins. Ces quatre valeurs sont les seules du site : aucune règle ne pose d'interlettrage « à la main ». */ --tracking-display: 0.045em; /* les grands titres */ --tracking-title: 0.075em; /* les titres courants et les noms de projet */ --tracking-ui: 0.18em; /* navigation, boutons, gestes */ /* L'étiquette de 11 px : son interlettrage suit la largeur de la fenêtre. À 1440 px elle ouvre large (0,28 em, comme la ligne basse de la plaque) ; sous 800 px elle se resserre jusqu'à 0,20 em, sinon la ligne de capitales dépasse la mesure et se coupe au bord du cadre. */ --tracking-label: clamp(0.2em, 0.14em + 0.16vw, 0.28em); /* ------------------------------------------------------------------ Espace */ --shell: 1560px; --shell-narrow: 1080px; --shell-text: 720px; --gutter: clamp(1.25rem, 0.35rem + 3.6vw, 4.5rem); --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; /* Rythme vertical des chapitres — resserré le 23-09-2026. À 8 rem, deux chapitres voisins laissaient 256 px de vide entre leurs contenus, ce qui donnait à chaque page l'air d'une suite de plaques séparées. Le site est une seule pièce : 6,5 rem au plus, et 4 rem sur écran étroit. */ --section-y: clamp(2.75rem, 1.5rem + 4.4vw, 6.5rem); --section-y-sm: clamp(2rem, 1.2rem + 2.8vw, 4rem); /* --------------------------------------------------------------- M\u00e9canique */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-io: cubic-bezier(0.65, 0.05, 0.36, 1); --dur-1: 0.36s; --dur-2: 0.72s; --dur-3: 1.2s; --hairline: 1px; /* La barre portait 84 px pour une plaque de 58 px : la marque se lisait comme une vignette. Elle en porte 128 pour une plaque de 104 — la proportion change, pas la structure. La cinquième passe du 23-09-2026 porte la plaque de 80 à 104 px : la barre suit, de 108 à 128. Les paliers de fenêtre étroite sont posés plus bas, dans 04-immersive.css, avec la marque. */ --header-h: 8rem; --z-nav: 90; --z-overlay: 100; --z-lightbox: 120; } /* Chapitre sombre : on inverse simplement les r\u00f4les de couleur. */ .u-invert, [data-theme="dark"] { --bg: var(--s-0); --bg-alt: var(--s-1); --fg: var(--c-blanc); --fg-muted: rgba(255, 255, 255, 0.86); --fg-faint: rgba(255, 255, 255, 0.72); --rule: rgba(255, 255, 255, 0.22); --rule-strong: rgba(255, 255, 255, 0.38); /* Les accents ne dépendent pas de la profondeur du fond : le fond est noir partout, et les deux teintes viennent de la plaque. Le chapitre étiqueté « mousse » est le seul à échanger leurs rôles — voir .chapter--moss (02-layout), dont le nom garde la trace des matières de chapitre. */ --accent: var(--c-laiton); --accent-2: var(--c-sable); color-scheme: dark; } @media (prefers-reduced-motion: reduce) { :root { --dur-1: 0.001s; --dur-2: 0.001s; --dur-3: 0.001s; } }