/* =========================================================== TOKENS.CSS — Source de vérité de la charte SARCANA Uniquement des --variables. Aucun style ici. La charte n'est pas inventée : elle vient du site arcanasacra.ch de Laurence. Le mauve #815F7C et le pétrole #1E4A54 sont ses couleurs, le logo est le sien — une lune envahie de végétation, tracée à la main. ── Le renversement du 7 septembre 2026 ──────────────────── Le site était bâti sur la nuit. Laurence a demandé le contraire, trois messages de suite : « lumineux », « un fond clair », « pas de blanc », « quelque chose de coloré », et surtout « que l'image elle couvre toute la page ». D'où la règle qui remplace l'ancienne : UN PAYSAGE tient tout le fond, fixe derrière le défilement. Le contenu passe sur des VOILES clairs translucides à deux profondeurs. Ce qui distingue deux sections reste la profondeur et la matière, jamais un écart de luminosité — le principe n'a pas changé, seul son sens s'est inversé. Ce qui reste interdit : le dégradé d'une teinte vers une autre en fond de page, les blobs décoratifs, le blanc pur. Ce que Laurence demande — ses deux couleurs déclinées en valeurs — est autre chose, et c'est ce que font les deux rampes ci-dessous. =========================================================== */ :root { /* ============ SES DEUX COULEURS, EN VALEURS ============ « tu peux prendre un violet et puis descendre dans les couleurs du violet, prendre une couleur pétrole, descendre un peu les couleurs ». Chaque rampe part de SA couleur et se décline vers le sombre pour l'écriture, vers le clair pour les surfaces. Les deux valeurs 300 sont les siennes, inchangées. */ --mauve-900: #2a1c28; --mauve-700: #453042; --mauve-500: #5e4159; --mauve-400: #6f4e69; --mauve-300: #815f7c; /* Sa couleur */ --mauve-200: #b399ae; --mauve-100: #dccdd8; --mauve-050: #f2ebf1; --petrole-900: #0c2027; --petrole-700: #143840; --petrole-500: #1e4a54; /* Sa couleur */ --petrole-400: #2c6270; --petrole-300: #4d8794; --petrole-200: #9dc2ca; --petrole-100: #cfe3e7; --petrole-050: #eaf3f5; /* Le socle des sections à lueur : entre le 050 et le 100 de chaque rampe, à 40 % du chemin. La cliente a demandé deux fois « un peu moins blanc » (11 septembre 2026) ; à 050 pur c'était encore trop clair pour elle. */ --lueur-mauve: #e9dfe7; --lueur-petrole: #dfedf0; /* L'or reste rare : une ou deux occurrences par section. Sur fond clair sa valeur d'origine passe à 2,4:1, elle descend donc de deux crans pour porter du texte. */ --or-700: #6d5219; --or-500: #785a1a; --or-300: #c9a961; /* Sa valeur, décorative seulement */ --or-100: #ecdcb4; /* ============ LES VOILES ============ Deux profondeurs posées sur le paysage. L'écart d'opacité entre elles est faible : c'est une différence de matière, pas d'éclairage. */ --voile: rgba(243, 248, 248, .74); /* Sections courantes */ --panneau: rgba(246, 250, 250, .90); /* Blocs en avant */ --panneau-fort: rgba(241, 247, 248, .94); /* Seuil, en-tête, pied */ --panneau-mauve: rgba(247, 242, 246, .90); /* Teinté de son mauve */ --panneau-petrole: rgba(237, 246, 248, .91); /* Teinté de son pétrole */ /* Le lavis posé sur le paysage lui-même. Il relève la photo sans l'effacer : sans lui, une zone d'ombre du sous-bois ferait tomber le texte sous le seuil de lisibilité. */ /* Assez pour que la photo appartienne à la palette, pas assez pour l'effacer : à .40 elle disparaissait sous un voile blanc. Ce n'est pas lui qui protège le texte, ce sont les voiles de section. */ --lavis-paysage: linear-gradient(178deg, rgba(240, 247, 244, .18) 0%, rgba(239, 247, 243, .26) 44%, rgba(237, 246, 242, .32) 100%); --etalonnage-paysage: saturate(1.26) brightness(1.28) contrast(.95); /* ============ L'ÉCRITURE ============ Jamais de noir pur : une encre pétrole, tirée de sa couleur. Elle appartient à la palette au lieu de s'y poser. */ --encre: #16262b; --encre-douce: #38494f; --encre-faible: #40505a; /* un cran plus sombre depuis que les lueurs ont foncé : 5,0:1 au pire */ /* ============ SÉMANTIQUE ============ */ --fond-page: var(--voile); --texte: var(--encre); --texte-doux: var(--encre-douce); --texte-faible: var(--encre-faible); --texte-accent: var(--mauve-500); --filet: rgba(22, 38, 43, 0.13); --filet-appuye: rgba(22, 38, 43, 0.26); --filet-mauve: rgba(94, 65, 89, 0.48); --filet-or: rgba(131, 100, 31, 0.44); /* ============ TYPOGRAPHIE ============ Grenze se tient sur la frontière entre le romain et la gothique — d'où son nom. Sur fond clair les déliés fins s'amincissent au lieu de s'épaissir : les titres peuvent redescendre en 300, ce que la nuit interdisait. */ --font-titre: 'Grenze', 'Iowan Old Style', Georgia, serif; --font-texte: 'Karla', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --font-main: 'Ephesis', 'Snell Roundhand', cursive; /* Échelle. Volontairement plus resserrée qu'un gabarit de page d'accueil : les très grands titres légers et centrés sont la signature d'un site fait à la chaîne. */ --fs-titan: clamp(34px, 4.6vw, 66px); --fs-display: clamp(29px, 3.5vw, 50px); --fs-h1: clamp(26px, 3vw, 42px); --fs-h2: clamp(23px, 2.4vw, 33px); --fs-h3: clamp(19px, 1.7vw, 24px); --fs-h4: clamp(17px, 1.4vw, 19px); --fs-main: clamp(28px, 3.4vw, 50px); --fs-main-sm: clamp(23px, 2.4vw, 33px); --fs-chapo: clamp(17px, 1.25vw, 20px); --fs-body: 17px; --fs-small: 15px; --fs-micro: 13px; --fs-nano: 11px; /* Sur fond clair l'encre « maigrit » optiquement : on remonte d'un cran ce que la nuit faisait descendre. */ --fw-fin: 300; --fw-normal: 400; --fw-moyen: 500; --fw-semi: 600; --fw-titre: 400; --lh-serre: 1.08; --lh-titre: 1.16; --lh-court: 1.34; --lh-normal: 1.74; --lh-aere: 1.92; --ls-serre: -0.018em; --ls-normal: 0; --ls-large: 0.04em; --ls-plus: 0.13em; --ls-max: 0.28em; /* ============ ESPACEMENT ============ */ --sp-3xs: 4px; --sp-2xs: 8px; --sp-xs: 13px; --sp-sm: 20px; --sp-md: 32px; --sp-lg: 50px; --sp-xl: 76px; --sp-2xl: 110px; --sp-3xl: 158px; /* Trois rythmes verticaux, et ils ne sont pas interchangeables : une section qui respire n'a pas la même densité qu'une section qui énumère. Un rythme unique partout = gabarit. */ --section-y: clamp(78px, 8.5vw, 138px); --section-y-ample: clamp(104px, 12vw, 196px); --section-y-dense: clamp(56px, 6vw, 92px); /* ============ LAYOUT ============ */ --conteneur: 1240px; --conteneur-texte: 660px; --conteneur-large: 1520px; --gouttiere: clamp(22px, 5vw, 64px); --header-h: 78px; --header-h-sm: 62px; /* ============ FORMES ============ */ --r-nul: 0; --r-fin: 2px; --r-doux: 6px; --r-carte: 10px; --r-pilule: 999px; /* ============ MATIÈRE ============ Un aplat de couleur pure sur un grand écran est plat et « fabriqué ». Un grain très fin par-dessus lui rend une matière — papier, émulsion. Sur fond clair il doit être plus discret que sur la nuit : le bruit y saute aux yeux. Généré en SVG dans l'URL : aucune requête réseau. */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E"); /* Halos. Très larges, très faibles : ils teintent le voile de ses deux couleurs sans jamais devenir un « blob ». */ --halo-mauve: radial-gradient(ellipse at 50% 50%, rgba(129, 95, 124, .20) 0%, rgba(129, 95, 124, .07) 42%, transparent 70%); --halo-petrole: radial-gradient(ellipse at 50% 50%, rgba(30, 74, 84, .20) 0%, rgba(30, 74, 84, .06) 44%, transparent 72%); --halo-or: radial-gradient(ellipse at 50% 50%, rgba(201, 169, 97, .18) 0%, rgba(201, 169, 97, .05) 40%, transparent 68%); /* Voile posé sur les photos de contenu, pour qu'une image rapportée ne jure pas avec le paysage du fond. */ --voile-photo: linear-gradient(180deg, rgba(243, 248, 248, .34) 0%, rgba(243, 248, 248, .10) 45%, rgba(237, 246, 242, .40) 100%); /* ============ OMBRES ============ Sur fond clair c'est l'OMBRE qui fait le relief, pas la lumière : l'inverse exact de ce que faisait la nuit. */ --relief-sm: 0 1px 2px rgba(12, 32, 39, .06), 0 2px 10px rgba(12, 32, 39, .07); --relief-md: 0 2px 6px rgba(12, 32, 39, .07), 0 12px 30px rgba(12, 32, 39, .10); --relief-lg: 0 4px 12px rgba(12, 32, 39, .08), 0 26px 60px rgba(12, 32, 39, .14); /* ============ MOUVEMENT ============ */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-sortie: cubic-bezier(0.16, 1, 0.3, 1); --ease-doux: cubic-bezier(0.45, 0, 0.15, 1); --t-eclair: 0.15s; --t-court: 0.24s; --t-base: 0.42s; --t-lent: 0.85s; --t-souffle: 11s; --z-paysage: -1; /* Le fond, sous tout le reste */ --z-fond: 0; --z-menu: 950; /* L'en-tête passe au-dessus du panneau : le bouton qui ouvre le menu doit rester visible pour le refermer. */ --z-entete: 960; --z-header: 900; /* raccourci WhatsApp flottant */ --z-modal: 1000; --z-rideau: 1100; /* L'ouverture du site passe au-dessus de tout */ --z-editor: 1200; /* sauf la barre d'admin */ /* Le curseur passe devant tout : il remplace la flèche du système, qui n'était jamais masquée par quoi que ce soit. */ --z-curseur: 1300; } /* Une barre fixe de 78 px prend un dixième d'un écran de téléphone, et elle le prend en permanence. Sur mobile elle se resserre — les deux valeurs restent liées, tout le reste s'y accroche : le décalage des sections, le `scroll-padding` des ancres, le haut du menu. */ @media (max-width: 699px) { :root { --header-h: 64px; --header-h-sm: 56px; } }