/* ============================================================================ Pat — Design tokens (CSS custom properties) Artiste : Pat (Charles Salla Dieng). Charte : Brand/02_Charte-visuelle.md ---------------------------------------------------------------------------- Toutes les valeurs découlent de la charte visuelle §2 (couleur), §3 (typographie) et §6 (grille / mise en page). Les équivalences CMJN et Pantone sont dans ./print.md — à confirmer sur épreuve imprimée. Convention de nommage imposée : --pat-* ============================================================================ */ :root { /* -------------------------------------------------------------------------- 1. COULEUR — charte §2 Ratios de contraste réels (WCAG 2.1, sRGB) indiqués pour information ; recalculés dans identite-visuelle.html. -------------------------------------------------------------------------- */ /* Primaires §2.1 */ --pat-encre: #1A1A1A; /* Noir d'encre — texte, tracé du logo, plume */ --pat-papier: #F4EDDE; /* Papier cru — fond dominant écran + print */ --pat-vermillon: #D63A2F; /* Vermillon — accent unique, jamais sous texte */ /* Secondaires §2.2 */ --pat-vert: #1E7A5A; /* Vert atelier — aplats, éléments d'expo */ --pat-vert-texte: #175240; /* Vert atelier profond — texte, liens, petits */ --pat-racine: #6FA03C; /* Vert racine — rappel logo, décoratif seul */ --pat-terre: #C08A3E; /* Terre de Dakar — filets, folios, motif */ /* Neutres §2.3 */ --pat-papier-clair: #FBF7EF; /* Papier clair — cartels, encarts, négatif */ --pat-gris: #6E665A; /* Gris pierre — texte secondaire, légendes */ --pat-ligne: #E4DAC6; /* Ligne sable — filets fins, bordures tableau */ --pat-noir-profond: #141310; /* Noir profond — fonds pleins, couvertures */ /* Alias sémantiques (facilitent l'intégration ; ne pas multiplier) */ --pat-texte: var(--pat-encre); --pat-texte-secondaire: var(--pat-gris); --pat-fond: var(--pat-papier); --pat-fond-alt: var(--pat-papier-clair); --pat-fond-sombre: var(--pat-noir-profond); --pat-lien: var(--pat-vert-texte); --pat-accent: var(--pat-vermillon); --pat-focus: var(--pat-encre); /* contour focus 2px — charte §2.5 */ /* Opacité de la trame racine en filigrane — charte §4.1 (8–12 %) */ --pat-trame-opacite: 0.10; /* -------------------------------------------------------------------------- 2. TYPOGRAPHIE — charte §3 3 familles OFL / Google Fonts + fallback système (§3.5). -------------------------------------------------------------------------- */ --pat-font-titre: "Fraunces", Georgia, "Times New Roman", serif; --pat-font-texte: "Spectral", "Iowan Old Style", Georgia, serif; --pat-font-ui: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif; /* Graisses employées (charte §3.1–§3.3) */ --pat-poids-titre-light: 300; --pat-poids-titre-regular: 400; --pat-poids-titre-semibold: 600; --pat-poids-titre-black: 900; --pat-poids-texte-regular: 400; --pat-poids-texte-medium: 500; --pat-poids-texte-semibold: 600; --pat-poids-ui-regular: 400; --pat-poids-ui-medium: 500; --pat-poids-ui-semibold: 600; /* -- Échelle WEB (hiérarchie type §3.4) --------------------------------- */ /* borne haute retenue comme valeur par défaut ; borne basse en commentaire */ --pat-web-couverture: 64px; /* Fraunces 900 — 44–64px */ --pat-web-h1: 40px; /* Fraunces 600 — 32–40px */ --pat-web-h2: 26px; /* Fraunces 600 — 22–26px */ --pat-web-h3: 20px; /* Fraunces 400 italique — exergue, vert-texte */ --pat-web-chapo: 21px; /* Spectral 500 — 20–22px */ --pat-web-corps: 18px; /* Spectral 400 — 17–19px (jamais < 16px) */ --pat-web-legende: 14px; /* Archivo 400 — 13–14px — gris pierre */ --pat-web-folio: 12px; /* Archivo 600 petites caps +40 — gris/vermillon*/ /* -- Échelle PRINT (hiérarchie type §3.4) ------------------------------- */ --pat-print-couverture: 60pt; /* 48–72pt */ --pat-print-h1: 28pt; /* 24–30pt */ --pat-print-h2: 17pt; /* 16–18pt */ --pat-print-h3: 14pt; --pat-print-chapo: 12.5pt; /* 12–13pt */ --pat-print-corps: 10.5pt; /* 10–11pt (jamais < 9pt) */ --pat-print-legende: 9pt; /* 8,5–10pt */ --pat-print-folio: 8pt; /* -- Interlignes (§3.2 corps 1,5 ; §3.3 cartel 1,4 ; titres serrés) ---- */ --pat-interligne-titre: 1.1; --pat-interligne-h: 1.2; --pat-interligne-corps: 1.5; --pat-interligne-cartel: 1.4; /* -- Interlettrage -------------------------------------------------------- */ --pat-tracking-titre: 0; /* Fraunces : interlettrage 0 (§3.1) */ --pat-tracking-caps: 0.04em; /* petites capitales +40 (§3.3) */ /* -- Longueur de ligne cible (§3.2 / §6) ------------------------------- */ --pat-mesure-corps: 68ch; /* 62–75 caractères */ /* -------------------------------------------------------------------------- 3. GRILLE & ESPACEMENTS — charte §6 Base 4px. Gouttière 20–24pt ≈ 22px écran. -------------------------------------------------------------------------- */ --pat-space-1: 4px; --pat-space-2: 8px; --pat-space-3: 12px; --pat-space-4: 16px; --pat-space-5: 20px; --pat-space-6: 24px; --pat-space-8: 32px; --pat-space-10: 40px; --pat-space-12: 48px; --pat-space-16: 64px; --pat-space-20: 80px; --pat-space-24: 96px; --pat-gouttiere: 22px; /* écran — 20–24pt */ --pat-colonnes-ecran: 12; --pat-colonnes-a4: 6; --pat-contenu-max: 1200px; /* Marges A4 (dossier) — charte §6 */ --pat-a4-marge-ext: 22mm; --pat-a4-marge-reliure: 25mm; --pat-a4-marge-pied: 18mm; --pat-a4-marge-tete: 22mm; /* Filets / bordures */ --pat-filet-fin: 1px solid var(--pat-ligne); --pat-filet-encre: 2px solid var(--pat-encre); /* trait plume ≥ 2pt (§1.2) */ /* Rayons — l'identité est anguleuse/organique : rayons quasi nuls */ --pat-rayon-0: 0; --pat-rayon-1: 2px; /* Transition du filet plume animé — respecter prefers-reduced-motion */ --pat-transition: 240ms ease; } /* Réduction de mouvement — charte / synthèse (filet plume animé) */ @media (prefers-reduced-motion: reduce) { :root { --pat-transition: 0ms; } }