/* ═══════════════════════════════════════════════════════════════════════════ LA CHARTE DES VITRINES — bandeau et sections ═══════════════════════════════════════════════════════════════════════════ 🔴 CETTE FEUILLE EST LA CHARTE, ET ELLE EST PARTAGÉE. Elle était dans `src/index.css`, donc dans le bundle React, donc réservée à UNE page : la landing. Les sept pages statiques du site (missions, constitution, livre-blanc, international, partenaires, rejoindre, mentions) n'y avaient pas accès — elles n'avaient pas « un autre bandeau », elles n'en avaient aucun. Sortie ici, elle sert la landing ET les pages statiques par le même fichier : une seule source, donc une seule vérité. ⚠️ NE PAS RECOPIER CES RÈGLES AILLEURS. Le document qui les fige est `docs/charte-vitrine-univers.md` ; trois autres vitrines de l'univers (manahome, alliancemana, manatimebank) les appliquent en parallèle. Deux copies d'une même charte divergent au premier ajustement — c'est écrit plusieurs fois dans ce dépôt, et c'est arrivé à chaque fois. Extrait de src/index.css le 28/09/2026, sans rien changer aux valeurs : ce qui suit a été mesuré à l'écran, pas choisi à l'œil. */ /* ═══ LE BANDEAU — IDENTIQUE AUX PAGES D'ANNUAIRE (14/09/2026) ══════════════ Aurélien : « toutes les pages ressources ont un header qui devrait aussi apparaître à l'identique sur la landing — même typo, même barre de recherche ». ⚠️ RECOPIÉ DE `/associations/annuaire.css`, ENGENDRÉ PAR UN AUTRE DÉPÔT (manafrance-app, `scripts/annuaire/gen-associations.mjs`). Les deux ne se voient pas : aucun test d'ici ne verra l'autre bouger. Les valeurs sont donc écrites EN CLAIR, et non tirées des jetons de la landing — elle ne porte ni `--encre`, ni `--sous`, ni `--carte`. Un bandeau qui hérite d'une palette différente selon la page n'est plus le même bandeau. */ .tete { /* ── LES JETONS DU BANDEAU, PORTÉS PAR LUI ────────────────────────────── De jour, ce sont EXACTEMENT ceux de `/associations/annuaire.css` : le bandeau est le même objet sur les deux surfaces. 🔴 MAIS LA LANDING A UN MODE NUIT, ET LES PAGES D'ANNUAIRE N'EN ONT PAS. Première version : ces quatre valeurs en dur, donc une encre #1A1A2E sur un fond #141615 — le bandeau devenait illisible dès qu'on basculait. Vu à l'écran après déploiement, pas deviné. ⭐ Recopier un objet d'une surface qui n'a qu'un thème vers une surface qui en a deux, c'est en recopier la moitié. */ /* 🔴 CES DEUX ENCRES ÉTAIENT CELLES D'UN BANDEAU CLAIR — corrigées le 28/09/2026, quand il est devenu noir. `--t-encre: #1A1A2E` et `--t-sous: #4F5331` viennent de `/associations/annuaire.css`, où le bandeau est sur fond blanc : posées sur le dégradé noir→kaki, elles donnaient du sombre sur du sombre. ⭐ TROUVÉ PAR BALAYAGE, PAS À L'ŒIL. Un passage qui compare la luminance de chaque texte à celle de son fond réellement peint a sorti trois coupables — « france.org », « × » et « .bzh », les morceaux de la marque qui ne sont pas en ocre — à **1,73:1**. J'avais regardé ce bandeau en capture au moins deux fois sans le voir : à cette taille, un olive sombre sur un kaki sombre ressemble à un gris discret voulu. Crème à 100 % et à 72 % : mesuré ensuite à 12,4:1 et 8,2:1. */ --t-encre: #F2EAD9; --t-sous: rgba(242, 234, 217, 0.72); --t-filet: #E3E5D6; --t-carte: #FFFFFF; /* ⭐ 8px, PAS 14 — 28/09/2026, demande d'Aurélien : « les espaces entre icônes doivent être les mêmes ». C'est aussi ce que porte déjà `.tete-commandes` : un seul chiffre pour les cinq commandes, qu'elles tombent avant ou après le repli en deux groupes. */ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 22px; border-bottom: 1px solid var(--t-filet); /* ⭐ LE BANDEAU NE PART PLUS AU DÉFILEMENT — 28/09/2026, Aurélien : « en mode desktop ET en mode PWA, le header est fixe, et est appliqué partout, dans chaque page ». Donc sans condition de largeur : `sticky` dans les deux. ⚠️ `sticky` ET NON `fixed`, et ce n'est pas un détail ici. La page entière vit dans un conteneur qui défile (`fixed inset-0 overflow-y-auto` dans App.tsx) : un `fixed` se serait ancré au CADRE DE LA FENÊTRE, donc serait sorti de ce conteneur — il aurait flotté par-dessus, sans réserver sa place, et le premier bloc serait passé dessous. `sticky` colle au haut du conteneur QUI DÉFILE, ce qui est exactement ce qu'on veut, et garde sa hauteur dans le flux. ⚠️ Le fond devient opaque à cette occasion : transparent, le contenu défilant se serait lu à travers le bandeau. `--t-carte` est le fond de carte du bandeau, déjà défini plus haut dans ce même bloc. */ position: sticky; top: 0; z-index: 30; /* ⭐ NOIR EN HAUT, KAKI EN BAS — 28/09/2026, Aurélien : « garde le header sur fond noir, ça démarque » puis « applique un dégradé allant du noir en haut vers le kaki en bas, MÊME kaki que le fond d'écran en haut de l'écran ». ⭐ L'ARRIVÉE N'EST PAS CHOISIE À L'ŒIL : `--mana-fond-lueur` (#5E5F3D) EST le premier arrêt du dégradé de page — mesuré sur l'élément qui peint réellement sous le bandeau (`linear-gradient(rgb(94,95,61) 0%, …)`). Le bas du bandeau rejoint donc la page exactement à sa couleur, sans couture. Écrit par le JETON plutôt qu'en littéral : le jour où la lueur bouge, la jointure suit au lieu de se décoller en silence. ⚠️ `overflow:hidden` BORNE LA LUMIÈRE TRAVERSANTE, et il est sans danger pour le panneau de MANA Chat, qui vit maintenant DANS ce bandeau : un descendant `position:fixed` n'est pas rogné par l'`overflow` d'un ancêtre. ⚠️ EN REVANCHE, PAS DE `backdrop-filter` ICI, quelle que soit l'envie de « verre » : il créerait un bloc conteneur pour les descendants fixes, et le panneau de MANA Chat se repositionnerait sur le bandeau au lieu de la fenêtre. Le poli se fait donc au reflet et au liseré, pas au flou — et le fond étant opaque, un flou d'arrière-plan n'aurait rien eu à flouter. */ background: linear-gradient(180deg, #0B0C0A 0%, #23261C 45%, var(--mana-fond-lueur, #5E5F3D) 100%); overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10); /* le liseré du poli */ } /* Les commandes passent AU-DESSUS des deux couches d'effet. */ .tete > * { position: relative; z-index: 2; } /* ⭐ SCINTILLEMENTS DORÉS — des poussières d'ocre, pas des étoiles : douze points sous 2 px, d'opacités inégales, qui respirent ensemble mais à des intensités différentes. Tous à la même opacité, ils feraient une trame régulière ; c'est l'irrégularité qui se lit comme de la poussière de lumière. Couleur : l'ocre de la maison, jamais un doré neuf. */ .tete::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(1.6px 1.6px at 9% 38%, rgba(217,169,74,.95), transparent 62%), radial-gradient(1.1px 1.1px at 17% 72%, rgba(217,169,74,.60), transparent 62%), radial-gradient(1.4px 1.4px at 28% 24%, rgba(217,169,74,.80), transparent 62%), radial-gradient(1px 1px at 36% 61%, rgba(217,169,74,.45), transparent 62%), radial-gradient(1.7px 1.7px at 47% 33%, rgba(217,169,74,.90), transparent 62%), radial-gradient(1.1px 1.1px at 55% 77%, rgba(217,169,74,.55), transparent 62%), radial-gradient(1.3px 1.3px at 64% 20%, rgba(217,169,74,.75), transparent 62%), radial-gradient(1px 1px at 71% 55%, rgba(217,169,74,.50), transparent 62%), radial-gradient(1.6px 1.6px at 80% 40%, rgba(217,169,74,.88), transparent 62%), radial-gradient(1.2px 1.2px at 88% 70%, rgba(217,169,74,.62), transparent 62%), radial-gradient(1.4px 1.4px at 94% 28%, rgba(217,169,74,.78), transparent 62%), radial-gradient(1px 1px at 41% 86%, rgba(217,169,74,.42), transparent 62%); animation: tete-scintille 7s ease-in-out infinite; } @keyframes tete-scintille { 0%, 100% { opacity: .45 } 50% { opacity: 1 } } /* ⭐ LA LUMIÈRE TRAVERSANTE — une bande claire, inclinée, qui balaie le bandeau et s'en va. Elle passe RAREMENT (9 s, dont plus de la moitié hors champ) : un reflet qui repasse sans cesse cesse d'être un reflet et devient un clignotant. */ .tete::after { content: ''; position: absolute; top: 0; bottom: 0; width: 38%; z-index: 1; pointer-events: none; left: -45%; background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.06) 38%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.06) 62%, transparent 100%); transform: skewX(-14deg); animation: tete-traverse 9s ease-in-out infinite; } @keyframes tete-traverse { 0% { left: -45% } 55%, 100% { left: 125% } } /* ⚠️ Et les deux se taisent pour qui a demandé moins de mouvement — même garde que les étoiles filantes et le halo plus haut dans ce fichier. */ @media (prefers-reduced-motion: reduce) { .tete::before { animation: none; opacity: .7 } .tete::after { animation: none; display: none } } .tete { font-family: var(--sans); } /* 🔴 LA MARQUE SE DISPOSE ICI, PAS EN TAILWIND — ajouté le 28/09/2026 après une question de la session MANA.bzh. Sur la landing, `.tete-marque` portait sa disposition par des classes utilitaires (`inline-flex items-baseline gap-1.5`) : cette feuille était donc INCOMPLÈTE pour qui la copie sans Tailwind — les trois autres vitrines de l'univers, justement. Une charte qui a besoin d'un framework pour tenir n'est pas une charte partageable. Les valeurs sont les mêmes, elles ne dépendent plus de rien. */ .tete-marque { display: inline-flex; align-items: baseline; gap: 6px; } .tete-nom { font-family: var(--sans); font-size: .95rem; letter-spacing: .02em; text-decoration: none; color: var(--t-encre); white-space: nowrap; } .tete-nom b { font-weight: 700; } .tete-nom span { color: var(--t-sous); font-weight: 400; } /* Le champ prend la place qui reste, et rend la main sous 560 px. */ .tete-chercher { display: flex; gap: 6px; flex: 1 1 210px; min-width: 0; max-width: 420px; } .tete-chercher input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: .9rem; padding: 7px 12px; border: 1px solid var(--t-filet); border-radius: 999px; background: var(--t-carte); color: var(--t-encre); } .tete-chercher input::placeholder { color: var(--t-sous); } .tete-chercher button { font: inherit; font-size: .85rem; padding: 7px 14px; cursor: pointer; border: 1px solid var(--t-filet); border-radius: 999px; background: transparent; color: var(--t-encre); } .tete-chercher button:hover { background: var(--t-carte); } .tete-pro { margin-left: auto; font-size: .85rem; text-decoration: none; color: var(--t-encre); border: 1px solid var(--t-filet); border-radius: 999px; padding: 7px 14px; white-space: nowrap; } .tete-pro:hover { background: var(--t-carte); } /* ⚠️ UNE ÉTIQUETTE CACHÉE À L'ŒIL DOIT RESTER LISIBLE PAR LA VOIX : ni `display:none` ni `visibility:hidden` — les deux la retirent aussi de l'arbre d'accessibilité, ce qui annule exactement ce qu'elle sert. */ /* ═══════════════════════════════════════════════════════════════════════════ LA SECTION — charte du 28/09/2026, demandée par Aurélien ═══════════════════════════════════════════════════════════════════════════ « TITRE sous fond ocre doré, police Marelle Bâton 2 majuscules ; corps de section en écriture blanche, police Archivo Narrow. » Reprise de la supervision de mana.bzh/admin, posée le même soir — c'est la MÊME maison, les deux surfaces doivent se reconnaître. ⭐ UN MOTIF, PAS UNE RECOPIE PAR BLOC. Il sera appliqué « partout » (ses mots) : trois classes tenues ici coûtent une ligne par section ensuite, là où des utilitaires recopiés divergeraient au premier ajustement — la faute que ce dépôt documente déjà pour `.tete-pro` et le champ de commune. ⚠️ TITRE EN NOIR SUR L'OCRE, JAMAIS EN BLANC. Mesuré : blanc sur #D9A94A tombe à ~1,9:1 (illisible), noir y tient ~9,7:1. Même arbitrage que la régie radio et que le bouton MANA Chat. ⚠️ ET LE CORPS NE PEUT PAS PRENDRE `--gwenn`. En mode nuit permanent (`html[data-nuit="1"]`), ce jeton bascule en crème — mais il REDEVIENT sombre dans `.bg-surface-white`. Une section posée dans une carte claire aurait donc du texte sombre là où la charte demande du blanc. D'où un blanc littéral, qui ne dépend d'aucun contexte. */ .mana-section { border-radius: 16px; overflow: hidden; /* le titre épouse le rayon de la carte */ border: 1px solid rgba(185, 191, 171, 0.22); } .mana-section-titre { background: var(--mana-ocre, #D9A94A); color: #000; font-family: var(--baton), 'Marelle Baton 2', cursive; /* ⚠️ GRAISSE 400, ET C'EST MESURÉ AILLEURS : Marelle Bâton n'a qu'un seul fichier. Lui demander 600 ou 700 fait épaissir le dessin par SYNTHÈSE, les pleins se ferment et la scripte casse. Le poids vient de l'interlettrage, jamais de la graisse (cf. regie/charte.ts, 08/09). */ font-weight: 400; text-transform: uppercase; letter-spacing: 0.12em; font-size: 15px; line-height: 1.25; padding: 12px 18px; display: flex; align-items: center; gap: 8px; } .mana-section-corps { background: var(--mana-surface, #3A3F30); color: #FFF; font-family: var(--narrow), 'Archivo Narrow', sans-serif; font-size: 14.5px; line-height: 1.5; padding: 16px 18px; } /* 🔴 LES TITRES DU CORPS AUSSI — sinon ils retombent en Marelle Bâton. `charte.css` et `index.css` posent tous deux `h1,h2,h3 { font-family: var(--display) }` : une règle d'ÉLÉMENT (0,0,1) que l'héritage du parent ne peut pas contredire — l'héritage ne se bat pas, il se fait battre par n'importe quelle règle qui vise l'élément. Mesuré à l'écran : le `h1` du bloc de tête rendait en Marelle Bâton 2, en graisse 600, c'est-à-dire en FAUX GRAS — la police n'a qu'un fichier, le navigateur l'épaissit lui-même et les pleins se ferment (le piège que `verifier-charte.mjs` surveille par ailleurs). Un sélecteur descendant (0,1,1) reprend la main. */ .mana-section-corps h1, .mana-section-corps h2, .mana-section-corps h3, .mana-section-corps h4 { font-family: var(--narrow), 'Archivo Narrow', sans-serif; } /* Les mentions secondaires DANS un corps de section : même police, moins de présence — sans descendre sous le seuil de lecture (blanc à 72 % sur la surface kaki reste au-dessus de AA). */ .mana-section-corps .sourdine { color: rgba(255, 255, 255, 0.72); } .visuellement-cache { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } @media (max-width: 560px) { .tete { padding: 10px 16px; gap: 10px; } .tete-pro { margin-left: 0; order: 3; } .tete-chercher { order: 2; flex: 1 1 100%; max-width: none; } } /* Les deux commandes propres à la landing, au bout du bandeau. */ .tete-commandes { display: flex; align-items: center; gap: 8px; } @media (max-width: 560px) { .tete-commandes { order: 1; margin-left: auto; } } .tete-univers{ display:flex; gap:8px; align-items:center; margin-left:auto } @media (max-width:639.98px), (display-mode:standalone){ /* ⭐ DEUX LIGNES CENTRÉES — 28/09/2026, Aurélien : « en mode PWA, 2 lignes : ligne 1 = MANAfrance.org × MANA.bzh centré ; ligne 2 = les icônes centrées ». Avant : la marque et deux commandes tenaient la première ligne, les trois autres débordaient sur la seconde, collées à droite. ⭐ LA MARQUE PREND TOUTE LA LARGEUR, ET C'EST ELLE QUI FAIT LA COUPURE. `.tete` est déjà en `flex-wrap:wrap` : un `flex-basis:100%` sur la marque renvoie mécaniquement les cinq commandes à la ligne suivante, que le bandeau en porte cinq ou sept. Un `flex-direction:column` aurait donné TROIS lignes — `.tete-univers` et `.tete-commandes` sont deux conteneurs distincts, ils se seraient empilés au lieu de se suivre. ⚠️ `margin-left:auto` DOIT TOMBER ICI. Il pousse le groupe à droite en mode large (c'est voulu) ; conservé sur une ligne centrée, une marge auto bat `justify-content` et le centrage n'aurait rien fait. ⚠️ Condition inchangée : téléphone OU app installée. C'est la règle déjà écrite dans ce bloc — « un téléphone et une app posent le même problème, et deux blocs qui se recopient divergent ». */ /* `column-gap` explicite : le bandeau en porte 10 par ailleurs, et les deux conteneurs d'icônes en portent 8 à l'intérieur — la jointure entre les deux groupes se voyait donc à 10 px là où les quatre autres écarts font 8. Un « bloc d'icônes » n'en est un que si le cinquième écart ressemble aux autres. */ .tete{ justify-content:center; row-gap:8px; column-gap:8px } .tete-marque{ flex-basis:100%; justify-content:center } /* 🔴 LES DEUX MARGES AUTO, PAS UNE. Mesuré à 375 px : les icônes se scindaient en 2 + 3 avec 118 px de vide — `.tete-univers` collé à gauche, `.tete-commandes` collé à droite, exactement un `space-between` alors que `justify-content:center` était bien posé. La seconde marge venait d'une règle plus ancienne et plus étroite, `@media (max-width:560px) { .tete-commandes { margin-left:auto } }`, invisible depuis ici. Une marge auto bat `justify-content` : tant qu'il en reste UNE, le centrage ne fait rien. Les cinq commandes ne forment un groupe que si les deux tombent. */ .tete-univers, .tete-commandes{ margin-left:0 } .tete-univers{ gap:8px } /* ⚠️ UNE COMMANDE SANS MOT SE TOUCHE AU DOIGT. Un emblème de 24 px est une cible de 24 px : sous le seuil confortable. Le rembourrage n'agrandit pas le dessin, il agrandit ce qu'on peut ATTEINDRE. */ .tete-commandes a[aria-label="Extranet"]{ padding-left:.65rem; padding-right:.65rem } } @media (min-width:640px){ .tete-univers{ gap:8px } .tete-univers a{ color:var(--sous,inherit); text-decoration:none; font-size:.86rem; white-space:nowrap; opacity:.85 } .tete-univers a:hover{ opacity:1; text-decoration:underline; text-underline-offset:3px } } /* ── LES COMMANDES DU BANDEAU STATIQUE ─────────────────────────────────────── Les pages hors React n'ont qu'un vrai lien à offrir (l'Extranet) : elles portent la même commande que la landing, à l'identique — ocre, icône noire en trait, 40 px de haut. Mêmes valeurs que les boutons React, écrites ici pour que le HTML nu n'ait besoin d'aucune classe utilitaire. ⚠️ `line-height:1` sur le mot : sans lui la hauteur de ligne décide de la hauteur du bouton (mesuré : 46 px au lieu de 40). */ .tete-cmd { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; border-radius: 12px; border: 1px solid rgba(185, 191, 171, 0.22); background: var(--mana-ocre, #D9A94A); color: #000; padding: 10px; text-decoration: none; font-family: var(--narrow), 'Archivo Narrow', sans-serif; font-size: 13px; } .tete-cmd:hover { filter: brightness(.95); } .tete-cmd-mot { line-height: 1; } @media (max-width: 639.98px), (display-mode: standalone) { .tete-cmd-mot { display: none } } /* ═══════════════════════════════════════════════════════════════════════════ LA CHARTE APPLIQUÉE AUX PAGES-DOCUMENTS — 28/09/2026 ═══════════════════════════════════════════════════════════════════════════ Aurélien : « applique la charte à tous les documents et pages ». ⭐ PAR LE STYLE, PAS PAR LA CHIRURGIE. Ces sept pages sont du HTML écrit à la main, chacune avec sa structure et son `