/* * apps/_shared/static/css/fondations.css * -------------------------------------- * CHAPITRE 1 DE LA CHARTE : LES FONDATIONS, communes à toutes les marques. * Les valeurs dont tout le reste dépend : couleurs et leurs degrés, gris, * états, palette des graphiques, échelle des titres et des textes, * espacements, arrondis, filets, focus clavier. * * 🚨 POURQUOI (10/11/2026, Benjamin : « les couleurs ne sont jamais pareilles », * « on n'a pas toutes les couleurs et degrés », « les titres et sous-titres ne * se ressemblent jamais »). MESURÉ ce jour-là dans toutes les apps : 393 * couleurs écrites à la main, 34 styles de titre de page, 78 de section. * Doctrine complète : `MD Manuels/SYSTEME_GRAPHIQUE.md`. * * UNE MARQUE NE DÉCLARE QUE SES VALEURS DE BASE (`/base.html`) : sa * couleur `--color-primary`, son encre, son fond, ses polices. Les DEGRÉS se * calculent ici, par mélange : la marque n'a rien à recopier, et le mode * sombre suit tout seul, puisque l'encre et le fond s'y inversent. * * TOUT EST DÉCLARÉ SOUS `:where(...)`, à spécificité NULLE : une valeur que la * marque pose dans son `:root` l'emporte toujours sur le défaut d'ici, quel * que soit l'ordre de chargement. * * Chargée par le cadre de toutes les marques, AVANT `composants.css` et * `page.css`, qui lisent ces jetons. */ :where(:root) { /* ── Couleur de marque, 9 degrés ── 50 à 200 : fonds teintés ; 300 à 400 : filets et aplats doux ; 600 : LA couleur de marque (liens, accent) ; 700 à 900 : survols et texte sur fond teinté. Calculés depuis `--color-primary`, jamais recopiés. */ --m-marque-50: color-mix(in oklab, var(--color-primary) 6%, var(--marque-fond, #fff)); --m-marque-100: color-mix(in oklab, var(--color-primary) 12%, var(--marque-fond, #fff)); --m-marque-200: color-mix(in oklab, var(--color-primary) 24%, var(--marque-fond, #fff)); --m-marque-300: color-mix(in oklab, var(--color-primary) 40%, var(--marque-fond, #fff)); --m-marque-400: color-mix(in oklab, var(--color-primary) 62%, var(--marque-fond, #fff)); --m-marque-500: color-mix(in oklab, var(--color-primary) 82%, var(--marque-fond, #fff)); --m-marque-600: var(--color-primary); --m-marque-700: color-mix(in oklab, var(--color-primary) 78%, var(--marque-encre, #1a1a1a)); --m-marque-800: color-mix(in oklab, var(--color-primary) 58%, var(--marque-encre, #1a1a1a)); --m-marque-900: color-mix(in oklab, var(--color-primary) 38%, var(--marque-encre, #1a1a1a)); /* ── Gris, 9 degrés ── L'encre de la marque mêlée à son fond. 50 à 100 : fonds ; 200 : filets ; 300 : filets forts, bord de champ ; 400 : décor (axes) ; 600 : texte secondaire (≥ 4,5:1) ; 900 : texte. */ --m-gris-50: color-mix(in oklab, var(--marque-encre, #1a1a1a) 3%, var(--marque-fond, #fff)); --m-gris-100: color-mix(in oklab, var(--marque-encre, #1a1a1a) 6%, var(--marque-fond, #fff)); --m-gris-200: color-mix(in oklab, var(--marque-encre, #1a1a1a) 10%, var(--marque-fond, #fff)); --m-gris-300: color-mix(in oklab, var(--marque-encre, #1a1a1a) 18%, var(--marque-fond, #fff)); --m-gris-400: color-mix(in oklab, var(--marque-encre, #1a1a1a) 34%, var(--marque-fond, #fff)); --m-gris-500: color-mix(in oklab, var(--marque-encre, #1a1a1a) 50%, var(--marque-fond, #fff)); --m-gris-600: color-mix(in oklab, var(--marque-encre, #1a1a1a) 66%, var(--marque-fond, #fff)); --m-gris-700: color-mix(in oklab, var(--marque-encre, #1a1a1a) 78%, var(--marque-fond, #fff)); --m-gris-800: color-mix(in oklab, var(--marque-encre, #1a1a1a) 88%, var(--marque-fond, #fff)); --m-gris-900: var(--marque-encre, #1a1a1a); /* ── Les rôles : ce qu'une page emploie, jamais un degré pris au hasard ── */ --m-texte: var(--m-gris-900); --m-texte-2: var(--marque-gris, var(--m-gris-600)); --m-filet: var(--marque-filet, var(--m-gris-200)); --m-filet-fort: var(--m-gris-300); --m-surface: var(--neutre-surface, #fff); --m-surface-douce: var(--m-gris-100); --m-lien: var(--marque-accent, var(--color-primary)); /* ── États ── Quatre, au sens fixe, sur toutes les pages et tous les graphiques. Les noms de jetons `--etat-alerte-*` (ambre) et `--etat-erreur-*` (rouge) viennent du cadre ; leur ROLE ici : ok = vert, attention = ambre, alerte = rouge, info = bleu. */ --etat-ok-fond: #eaf4ee; --etat-ok-texte: #1f5c3f; --etat-ok-trait: #2f6f4f; --etat-alerte-fond: #fbf3e2; --etat-alerte-texte: #7a5408; --etat-alerte-trait: #8a6410; --etat-erreur-fond: #fbe9e7; --etat-erreur-texte: #a1201a; --etat-erreur-trait: #b42318; --etat-info-fond: #eaf1f8; --etat-info-texte: #1d4f7a; --etat-info-trait: #2d5a80; /* ── Palette des graphiques ── HUIT couleurs, dans cet ordre, toujours. VÉRIFIÉES PAR MESURE le 10/11/2026 (méthode OKLab, daltonismes protan et deutan simulés, voisins ≥ 12 en daltonisme, ≥ 18 en vision normale, contraste ≥ 3:1 sur le fond clair #FAFAF8 et le fond sombre #0D0D0D) : une couleur changée = la palette re-mesurée. Au-delà de huit séries, on regroupe en « Autres » (`apps/_shared/graphiques.py`, `regrouper`). La 1re est le prune de ZB, ravivé pour rester une couleur et pas un gris. UNE MARQUE PEUT POSER SA PALETTE dans son `valeurs_marque` (Benjamin, 10/11/2026 : les décisions sur le corail portent sur AFL, pas sur ZB), re-mesurée avant. */ --m-serie-1: #954f88; /* prune */ --m-serie-2: #d0692f; /* orange */ --m-serie-3: #00918c; /* sarcelle */ --m-serie-4: #b88400; /* ocre */ --m-serie-5: #2a6fd6; /* bleu */ --m-serie-6: #5f8f1f; /* olive */ --m-serie-7: #6a5acd; /* violet */ --m-serie-8: #c0453f; /* brique */ /* Dégradé (une quantité : une carte, une intensité) : les degrés de la couleur de marque, 200 à 900. Deux sens (un écart positif ou négatif) : sarcelle d'un côté, orange de l'autre, gris au milieu. */ --m-divergent-neg: var(--m-serie-2); --m-divergent-milieu: var(--m-gris-200); --m-divergent-pos: var(--m-serie-3); /* ── Typographie, l'échelle UNIQUE ── Chaque niveau a UN usage (`SYSTEME_GRAPHIQUE.md` §1.2). */ --m-t-titre: clamp(2rem, 1.35rem + 2.6vw, 3.25rem); /* titre de page, h1 */ --m-t-chapeau: 1.15rem; /* chapeau sous le h1 */ /* Titre de section et sous-titre FLUIDES, du téléphone au grand écran (repris des enquêtes ZB, 10/11/2026). */ --m-t-section: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); /* titre de section, h2 */ --m-t-sous-titre: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem); /* sous-titre, h3 */ --m-t-niveau-4: 1.0625rem; /* texte long seulement, h4 */ --m-t-corps: 1rem; /* texte courant */ --m-t-texte-long: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem); /* enquête, méthode */ --m-interligne-long: 1.85; --m-t-petit: 0.9375rem; /* intro de section, liste dense */ --m-t-note: 0.8125rem; /* source, date, précision */ --m-t-chiffre: 1.875rem; /* chiffre d'une tuile */ --m-interligne-titre: 1.12; --m-interligne-texte: 1.6; /* ── Espacements, l'échelle UNIQUE ── 4, 8, 12, 16, 24, 32, 48, 64 px. */ --m-esp-1: 4px; --m-esp-2: 8px; --m-esp-3: 12px; --m-esp-4: 16px; --m-esp-5: 24px; --m-esp-6: 32px; --m-esp-7: 48px; --m-esp-8: 64px; /* ── Largeurs ── Trois, chacune pour un usage (Benjamin, 10/11/2026 : il manquait une règle, pas un interdit) : la colonne de lecture (le texte), la page (les données), la colonne étroite (un bloc qui se suffit à lui-même : bandeau d'inscription, page de service). Jamais une largeur au cas par cas. */ --m-lecture: 68ch; --m-page-largeur: 1200px; --m-colonne-etroite: 680px; /* ── Filets, arrondis, ombres ── Un filet, deux arrondis, aucune ombre. */ --m-trait: 1px solid var(--m-filet); --m-rayon: 8px; --m-rayon-petit: 4px; } /* Le mode sombre choisi par le lecteur : les états et la palette, pas à pas pour le fond noir (mêmes teintes, éclaircies à L 0,64, palette re-mesurée sur #0D0D0D le 10/11/2026). Les degrés de marque et les gris suivent seuls. */ @media screen { :where(html[data-mode="sombre"]) { --etat-ok-fond: #12261b; --etat-ok-texte: #7fd3a4; --etat-ok-trait: #4fa877; --etat-alerte-fond: #2a2010; --etat-alerte-texte: #f0c674; --etat-alerte-trait: #c99a3a; --etat-erreur-fond: #2e1416; --etat-erreur-texte: #f2a0a6; --etat-erreur-trait: #f07466; --etat-info-fond: #14222c; --etat-info-texte: #9cc8f0; --etat-info-trait: #5b93c9; --m-serie-1: #b86fa9; --m-serie-2: #d26b32; --m-serie-3: #03a19b; --m-serie-4: #b58200; --m-serie-5: #4489f3; --m-serie-6: #6c9d31; --m-serie-7: #8578ee; --m-serie-8: #dc5f56; } } /* ── Le focus clavier ── Visible sur tout ce qu'on atteint au clavier, à la couleur de la marque. Spécificité nulle : un composant peut préciser. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 2px; } /* ── L'échelle typographique, en classes ── Une page n'écrit jamais une taille : elle prend un niveau. Les blocs de `page.css` (haut de page, section) posent déjà le bon niveau ; ces classes servent aux textes longs et aux cas posés hors d'un bloc. */ .m-surtitre { font-family: var(--m-label-police, inherit); font-size: var(--m-label-taille, 0.8rem); text-transform: var(--m-label-casse, uppercase); letter-spacing: var(--m-label-espacement, 0.08em); color: var(--m-texte-2); margin: 0 0 var(--m-esp-2); } .m-titre-page { font-family: var(--font-heading, inherit); font-size: var(--m-t-titre); font-weight: var(--m-titre-graisse, 800); line-height: 1.08; letter-spacing: var(--m-titre-espacement, -0.02em); color: var(--m-texte); margin: 0; text-wrap: balance; } .m-chapeau { font-size: var(--m-t-chapeau); line-height: var(--m-interligne-texte); color: var(--m-texte); max-width: var(--m-lecture); } .m-titre-section { font-family: var(--font-heading, inherit); font-size: var(--m-t-section); font-weight: var(--m-section-graisse, 700); line-height: 1.2; letter-spacing: var(--m-titre-espacement, -0.01em); color: var(--m-texte); margin: 0; } .m-sous-titre { font-family: var(--font-heading, inherit); font-size: var(--m-t-sous-titre); font-weight: 700; line-height: 1.25; color: var(--m-texte); margin: var(--m-esp-6) 0 var(--m-esp-3); } .m-titre-4 { font-family: var(--font-body, inherit); font-size: var(--m-t-niveau-4); font-weight: 700; line-height: 1.35; color: var(--m-texte); margin: var(--m-esp-5) 0 var(--m-esp-2); } .m-texte-petit { font-size: var(--m-t-petit); line-height: 1.55; } .m-chiffre { font-variant-numeric: tabular-nums; } /* ── Mouvement réduit ── Le lecteur qui l'a demandé à son appareil n'a ni animation ni défilement doux (normalisation du Financial Times, DSFR). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ── Impression ── Le texte en noir, les liens et l'interface qui ne servent à rien sur papier masqués (GOV.UK, DSFR). */ @media print { :root { --m-texte: #000; --m-texte-2: #333; } .m-sommaire, .m-sous-menu, .m-filtres, .m-pagination, .m-actions { display: none !important; } } /* ── Le texte long ── Une enquête, une méthode : plus grand, plus aéré, dans la colonne de lecture (repris des enquêtes ZB, interligne 1,85). */ .m-texte-long { font-size: var(--m-t-texte-long); line-height: var(--m-interligne-long); max-width: var(--m-lecture); } .m-texte-long > p { margin: 0 0 1.1em; } /* ── La colonne étroite, centrée ── Pour un bloc qui se suffit à lui-même. */ .m-etroit { max-width: var(--m-colonne-etroite); margin-left: auto; margin-right: auto; }