/* ═══════════════════════════════════════════════════════════════════════════ LA CHARTE MANA — fichier partagé de l'écosystème ═══════════════════════════════════════════════════════════════════════════ Source de vérité : `docs/charte-graphique-reference.md` du dépôt manafrance-app, lui-même relevé dans le code de mana.bzh. ⚠️ CE FICHIER EST COPIÉ TEL QUEL SUR LES SIX SITES DE L'ÉCOSYSTÈME. manahome.org · manafamily.org · alliancemana.org · alliancemana.com manatimebank.org · manafrance.org Le modifier ici ne suffit donc pas : il faut le repropager. C'est le prix de sites statiques indépendants — assumé, à condition d'être dit. ⚠️ IL NE CONTIENT QUE CE QUI EST COMMUN : polices, couleurs, basculeur. Rien de propre à une page. Ce qui n'est vrai que d'un site reste chez lui. Aucune image : ni fond, ni illustration, ni icône en fichier. Ce qui remplace les images, c'est la typographie, les filets, les aplats et l'espace. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ LES TROIS VOIX — charte de l'écosystème, identique à mana.bzh. Voir `docs/charte-graphique-reference.md` du dépôt manafrance-app. Philosopher est partie le 07/09/2026 : le même écosystème ne peut pas parler deux langues typographiques. ═══════════════════════════════════════════════════════════════════════ */ /* LA PAROLE — Rubik, variable 300→900, romaine et italique. */ @font-face { font-family:'Rubik'; font-style:normal; font-weight:300 900; font-display:swap; src:url('/fonts/rubik-latin-var.woff2') format('woff2-variations'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family:'Rubik'; font-style:normal; font-weight:300 900; font-display:swap; src:url('/fonts/rubik-latin-ext-var.woff2') format('woff2-variations'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family:'Rubik'; font-style:italic; font-weight:300 900; font-display:swap; src:url('/fonts/rubik-latin-var-italic.woff2') format('woff2-variations'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family:'Rubik'; font-style:italic; font-weight:300 900; font-display:swap; src:url('/fonts/rubik-latin-ext-var-italic.woff2') format('woff2-variations'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* LA MESURE — Departure Mono. ⚠️ Nette aux MULTIPLES DE 11 px seulement : 11, 22, 33, 44. Un nombre qui ne peut pas tenir un multiple de 11 garde la mono du système avec `tabular-nums`. */ @font-face { font-family:'Departure Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/departure-mono-regular.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* LA SIGNATURE — Marelle 2, et le BÂTON pour les intertitres. Une occurrence par page : elles ne sont pas préchargées. */ @font-face { font-family:'Marelle 2'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/Marelle2-Regular.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family:'Marelle Baton 2'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/MarelleBaton2-Regular.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ═══ LES DEUX MODES ═══════════════════════════════════════════════════ Mêmes jetons, autres valeurs — un seul mécanisme, `data-nuit` sur . ⚠️ ON N'EMPORTE PAS `data-folk-theme` : sur mana.bzh il coexiste avec `data-nuit` sans lui parler, et cette dette a déjà coûté un placeholder noir sur fond noir. Un site vitrine n'a besoin que d'un attribut. ═══════════════════════════════════════════════════════════════════════ */ :root{ color-scheme: light; --du:#FFFFFF; --du-2:#FAF7F1; --du-3:#F6F3EC; --gwenn:#232418; --gwenn-dim:#5f6470; /* ⚠️ L'ACCENT DU JOUR EST UN NOIR, PAS DE L'OR — la laque du gwenn ha du portée en plein jour. Elle s'ÉCLAIRE au survol (--mana-hot plus clair), elle ne fonce pas. Le safran ne garde que les aplats de rayonnement. */ --mana:#1A1B13; --mana-hot:#3B3E2B; --mana-deep:#95A161; /* ⚠️ LES COMPOSANTES, parce qu'une couleur d'accent sert AUSSI en transparence (halos, bordures, ombres) et qu'un hex ne se compose pas avec un alpha. Sans elles, l'ambre #ffb347 de l'ancien visage restait codé en dur à quatorze endroits et ne suivait AUCUN des deux modes. */ --mana-rgb: 26, 27, 19; --mana-hot-rgb: 59, 62, 43; --gwenn-rgb: 35, 36, 24; --du-rgb: 255, 255, 255; --granit:#a19b90; --filet:#EAE4DA; /* ⚠️ ALIAS REDIRIGÉS, pas règles réécrites. Une cinquantaine de déclarations de ce fichier passent par --display/--sans/--mono ; les reprendre une à une aurait laissé la première oubliée reparaître au premier ajout. Trois lignes commandent tout. */ /* ═══ LES QUATRE RÔLES, ET CE QUI LES SÉPARE ═══════════════════════════ ⚠️ CORRIGÉ LE 07/09/2026. La première passe avait mis Rubik PARTOUT, titres compris. C'était incomplet : sur mana.bzh, les titres et les intertitres sont en **Marelle Bâton** — vérifié dans `fiche-page.css`, quatorze déclarations `var(--mana-baton)` pour les h1, h2, les intertitres de volet et les nombres mis en avant. Rubik porte le CORPS, pas les titres. Mettre Rubik partout donnait une page correcte et une page qui n'était pas MANA. --display titres, intertitres, nombres mis en avant Marelle Bâton 2 --sans corps de texte, boutons, listes Rubik --mesure nombres alignés en colonne Departure Mono --signature le mot-marque, UNE occurrence par page Marelle 2 ⚠️ Departure Mono n'est nette qu'aux MULTIPLES DE 11 px — 11, 22, 33, 44. Un nombre qui ne peut pas tenir un multiple de 11 garde `--mono` avec `font-variant-numeric: tabular-nums`. Règle payée une fois. */ --display: 'Marelle Baton 2', 'Marelle 2', 'Marelle', 'Rubik', Georgia, serif; --sans: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --mesure: 'Departure Mono', ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace; --mono: ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace; --signature: 'Marelle 2','Marelle','Segoe Script','Snell Roundhand',cursive; --baton: 'Marelle Baton 2','Marelle 2','Marelle',cursive; --pad:clamp(20px,5vw,64px); } html[data-nuit="1"]{ color-scheme: dark; /* ⚠️ #141615 = le noir SONDÉ dans le disque du triskell de mana.bzh. */ --du:#141615; --du-2:#1c1e1b; --du-3:#0a0e19; --gwenn:#f2eee4; --gwenn-dim:#a8a49b; /* Le kaki : 9,8:1, 13,8:1 et 5,7:1 sur le fond de nuit. */ --mana:#B2BA8C; --mana-hot:#D5D9C0; --mana-deep:#848E55; --mana-rgb: 178, 186, 140; --mana-hot-rgb: 213, 217, 192; --gwenn-rgb: 242, 238, 228; --du-rgb: 20, 22, 21; --granit:#5d6678; --filet:#1e2536; } /* ═══ LE BASCULEUR JOUR / NUIT ═════════════════════════════════════════ Du TEXTE, pas une icône : « aucune image », et un mot se lit dans toutes les langues mieux qu'un pictogramme de lune. */ /* ⚠️ EN ICÔNE DEPUIS LE 08/09/2026 — décision du fondateur : « je veux les icônes soleil / lune partout ». Le basculeur disait « Nuit » / « Jour » en toutes lettres depuis le 07/09, au motif qu'un mot se lit dans toutes les langues mieux qu'un pictogramme. Le fondateur a tranché dans l'autre sens ; le mot survit dans l'aria-label, que chaque site pose sur son bouton. ⚠️ LE DESSIN EST DANS LE CSS, PAS DANS LE HTML, et c'est ce qui permet de ne toucher qu'UN fichier : les six sites reçoivent l'icône sans qu'aucun n'ait à modifier son bouton. Un mask prend la forme du SVG et la remplit de currentColor — l'icône suit donc la couleur du texte, y compris au survol, ce qu'une image de fond ne saurait pas faire. ⚠️ DATA-URI : les chevrons sont encodés, et il n'y a AUCUN dièse dans ces deux dessins. S'il en apparaissait un, il faudrait l'écrire %23, sans quoi le navigateur coupe l'URI à cet endroit sans rien signaler. ⚠️ L'ICÔNE MONTRE LA DESTINATION, PAS L'ÉTAT COURANT : une lune en plein jour, c'est là où le bouton emmène. C'est exactement ce que faisait le libellé, qui affichait « Nuit » en journée. */ :root{ --icone-bascule: url("data:image/svg+xml,") } html[data-nuit="1"]{ --icone-bascule: url("data:image/svg+xml,") } .bascule{position:fixed;top:14px;right:14px;z-index:99; width:38px;height:38px;padding:0; display:inline-flex;align-items:center;justify-content:center; color:var(--gwenn-dim); background:var(--du-2);border:1px solid var(--filet);border-radius:50%; cursor:pointer;transition:color .3s,border-color .3s} .bascule:hover{color:var(--mana);border-color:var(--mana)} .bascule::before{content:'';width:17px;height:17px; background-color:currentColor; -webkit-mask:var(--icone-bascule) center/contain no-repeat; mask:var(--icone-bascule) center/contain no-repeat} html[data-nuit="1"] .bascule::before{content:''} @media print{.bascule{display:none}} /* ═══ LE LETTRAGE ══════════════════════════════════════════════════════════ « M A N A », espacé, EN TEXTE — la charte le prescrit partout. ⚠️ Il remplace `Logo_MANA_Symbol_logo.png` (07/09/2026). Ce n'était pas seulement une image de plus : un logo en fichier CONTREDISAIT la charte. Le lettrage se sélectionne, se traduit, s'annonce à un lecteur d'écran, et ne pixellise à aucune taille. */ .mana-lettrage{ font-family:var(--display);font-weight:400; letter-spacing:.34em;text-transform:uppercase; color:var(--gwenn);white-space:nowrap; } /* ═══ LE CORPS PREND LA PAROLE, LES TITRES PRENNENT LE BÂTON ═══════════════ ⚠️ Ces trois règles sont le cœur du peaufinage du 07/09. Sans elles, chaque site doit se souvenir d'appliquer `--sans` au corps et `--display` aux titres — et le premier qui oublie repart en Rubik partout. */ body { font-family: var(--sans); } h1, h2, h3, h4, h5, h6 { font-family: var(--display); font-weight: 400; } /* Les nombres alignés en colonne : la mesure, et jamais autre chose. */ .mesure, [data-mesure] { font-family: var(--mesure); font-variant-numeric: tabular-nums; } /* La signature — UNE occurrence par page, c'est sa règle. */ .mana-signature { font-family: var(--signature); } /* ═══ CE QUE MARELLE BÂTON NE SAIT PAS FAIRE ══════════════════════════════ ⚠️ ELLE N'A PAS D'ITALIQUE — un seul fichier, aucune face oblique. Un navigateur la penche alors MÉCANIQUEMENT : les jambages de la scripte se cassent et le mot devient illisible. L'italique appartient à Rubik, qui a sa vraie face (`rubik-latin-var-italic.woff2`). Ce garde rattrape les oublis : toute italique posée sur un titre repart à la parole, quel que soit l'endroit où la règle a été écrite. */ h1 em, h2 em, h3 em, h4 em, h5 em, h6 em, h1 i, h2 i, h3 i, h4 i, h5 i, h6 i, [style*="italic"] { font-family: var(--sans); } /* ⚠️ ET ELLE N'A PAS DE GRAS NON PLUS. `font-weight: 700` sur Marelle Bâton fait épaissir le tracé par synthèse — une scripte d'enfant en faux gras. Un titre qui doit peser prend de la TAILLE, pas du poids. */ h1, h2, h3, h4, h5, h6 { font-weight: 400; }