/* ============================================================================ Modul@net — jetons de design v2.0 « Cuivre vivant » ---------------------------------------------------------------------------- Source : le bloc :root de maquette-accueil.html v3.0, désignée par le brief comme référence de rendu. Remplace theme/tokens.css v1.0 « Cité ardente », périmé depuis l'arbitrage §0.1 du brief (rayon 0 et coupes à 45° abandonnés). Rien n'est codé en dur ailleurs. Tout passe par ce fichier. Chargé en premier, avant base.css. Quatre couleurs de la maquette ont été corrigées : elles échouaient au contraste WCAG AA. Les mesures sont en bas de fichier, pas assumées. ============================================================================ */ :root { color-scheme: dark; /* — FONDS — Le rythme du site tient à l'alternance de trois fonds : graphite, ivoire, cuivre en dégradé. Les sections majeures sont des bandes à coins hauts arrondis qui coupent le graphite. */ --mn-bg: #090a0c; --mn-panel: #101216; --mn-surf-1: linear-gradient(140deg, #17191d, #0d0e10); --mn-surf-2: linear-gradient(140deg, #1d2025, #101216); --mn-surf-1a: #17191d; /* extrémité claire, pour les calculs de contraste */ --mn-surf-1b: #0d0e10; /* extrémité sombre */ /* — FILETS — La profondeur vient des filets et des surfaces. Les seules ombres admises sont fonctionnelles : lueur du CTA primaire, élévation de la carte inclinée. Aucune ombre décorative sous une carte. */ --mn-line: rgba(255, 255, 255, .14); --mn-line-soft: rgba(255, 255, 255, .08); /* — ENCRES SUR GRAPHITE — Blanc cassé chaud, jamais #FFF pur. */ --mn-text: #f3f0e9; /* 17,40:1 */ --mn-muted: #c4bdb6; /* 10,66:1 */ --mn-dim: #a8a5a1; /* 8,07:1 */ --mn-faint: #8b857d; /* 5,42:1 — CORRIGÉ, cf. §CONTRASTES */ /* — CUIVRES — Deux cuivres. --mn-copper est le cuivre éditorial : titres en italique, lueurs, dégradés. --mn-copper-deep est le cuivre d'action. */ --mn-copper: #f29164; --mn-copper-hi: #ffb98f; --mn-copper-deep: #e27b4c; --mn-copper-dark: #b7562c; --mn-copper-wash: rgba(242, 145, 100, .14); /* — BANDE CUIVRE — L'extrémité foncée du dégradé remonte de #C35F32 à #CC6838 : à #C35F32, l'encre de la bande ne donnait que 4,50:1, sans marge. CORRIGÉ. */ --mn-band-copper: linear-gradient(128deg, #f6a276, #e27b4c 46%, #cc6838); --mn-on-copper: #1b0e06; /* 5,04:1 au pire du dégradé — tout texte */ --mn-on-copper-em: #3d2415; /* 3,83:1 — titres ≥ 40 px uniquement */ --mn-on-copper-lede: #2e1206; /* 4,65:1 — chapô 18 px */ /* — BANDE IVOIRE — */ --mn-ivory: #eee7dc; --mn-ivory-2: #e4dacc; --mn-on-ivory: #201b17; /* 13,90:1 */ --mn-on-ivory-dim: #5e544c; /* 6,00:1 */ --mn-on-ivory-label: #665c52; /* 5,31:1 — CORRIGÉ (était #7A6E63, 4,03) */ --mn-on-ivory-em: #b7562c; /* 3,90:1 — titres ≥ 40 px uniquement */ /* — CARTE IVOIRE INCLINÉE (scène du pôle SEO) — */ --mn-sheet: linear-gradient(150deg, #f8f4ec, #e2d7c6); --mn-on-sheet: #201b17; /* 12,00:1 */ --mn-on-sheet-dim: #5e544c; /* 5,19:1 — CORRIGÉ (était #8A7E71, 2,78) */ --mn-on-sheet-em: #a24a22; /* 4,17:1 — CORRIGÉ (était #B7562C, 3,37) */ /* — FONCTIONNEL : jamais décoratif — */ --mn-ok: #4ed495; --mn-warn: #f0b45a; --mn-err: #ff8a84; --mn-data: #6fc6d6; /* — TYPOGRAPHIE — Trois familles OFL, auto-hébergées en woff2. Aucun appel à fonts.googleapis.com : le site vend la souveraineté des données, il ne peut pas commencer par un transfert vers les États-Unis. */ --mn-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --mn-serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif; --mn-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* — ÉCHELLE TYPOGRAPHIQUE — PLANCHER ABSOLU, correction obligatoire n° 4 du brief : · 16 px pour tout texte destiné à être lu ; · 12 px pour les étiquettes en monospace ; · jamais moins, nulle part. La maquette descend à 8 px. Sur un site vendu à des dirigeants, la micro-typographie n'est pas un parti pris, c'est un défaut. */ --mn-t-h1: clamp(2.9rem, 1.5rem + 5.2vw, 5.6rem); --mn-t-h2: clamp(2.5rem, 1.4rem + 3.4vw, 4.6rem); --mn-t-h2-sm: clamp(1.9rem, 1.2rem + 2vw, 3rem); --mn-t-h3: clamp(1.45rem, 1.1rem + 1vw, 1.95rem); --mn-t-h4: 1.6rem; --mn-t-lede: 1.125rem; /* 18 px */ --mn-t-body: 1rem; /* 16 px — plancher */ /* * 14 px, pour les SOURCES, mentions et horodatages — en monospace, jamais * pour une phrase courante. Au-dessus du plancher mono de 12 px, en dessous * du corps : c'est ce qui distingue une source du texte qu'elle appuie. * * Ce jeton était employé à douze endroits sans avoir jamais été défini : * font-size:var(--mn-t-meta) est alors invalide, et tout retombait * silencieusement à la taille héritée. Le défaut était invisible parce * qu'inoffensif — 16 px reste au-dessus du plancher — mais la hiérarchie * voulue n'existait pas. */ --mn-t-meta: .875rem; /* 14 px — sources, mentions, horodatages */ --mn-t-label: .75rem; /* 12 px — étiquettes mono uniquement, jamais de phrase */ --mn-t-num-s: 1.25rem; --mn-t-num-m: 1.75rem; --mn-t-num-l: 2.25rem; --mn-t-num-xl: clamp(5.5rem, 3rem + 11vw, 12rem); /* — GÉOMÉTRIE — Rondeurs éditoriales. Boutons et pastilles en pilule. */ --mn-r-s: 20px; --mn-r-m: 32px; --mn-r-l: 44px; --mn-r-xl: 70px; --mn-r-pill: 999px; --mn-wrap: 1560px; --mn-pad: 5%; /* — ESPACEMENT — */ --mn-1: 4px; --mn-2: 8px; --mn-3: 16px; --mn-4: 24px; --mn-5: 40px; --mn-6: 64px; --mn-7: 104px; --mn-sec: clamp(72px, 7vw, 124px); /* — MOUVEMENT — 120–420 ms pour les états, jusqu'à 950 ms pour une séquence orchestrée. On n'anime que transform et opacity. */ --mn-fast: 140ms; --mn-base: 240ms; --mn-slow: 420ms; --mn-e-out: cubic-bezier(.16, 1, .3, 1); --mn-e-io: cubic-bezier(.65, 0, .35, 1); /* — COUCHES — */ --mn-z-header: 60; --mn-z-modu: 90; --mn-z-progress: 100; } /* ============================================================================ §CONTRASTES — mesurés, pas estimés ---------------------------------------------------------------------------- Calculés selon WCAG 2.1 (luminance relative, seuils 4,5:1 texte normal et 3:1 texte large ≥ 24 px ou ≥ 18,66 px gras). Script : _work/contrast3.mjs. SUR GRAPHITE #090A0C --mn-text #F3F0E9 17,40:1 --mn-muted #C4BDB6 10,66:1 --mn-dim #A8A5A1 8,07:1 --mn-faint #8B857D 5,42:1 --mn-copper #F29164 8,50:1 --mn-copper-deep #E27B4C 6,76:1 --mn-warn #F0B45A 10,73:1 --mn-data #6FC6D6 10,11:1 --mn-ok #4ED495 10,54:1 --mn-err #FF8A84 8,70:1 SUR CARTE (pire des deux extrémités du dégradé #17191D → #0D0E10) --mn-muted 9,47:1 --mn-faint 4,82:1 --mn-copper 7,55:1 SUR BANDE CUIVRE (pire des trois arrêts du dégradé) --mn-on-copper #1B0E06 5,04:1 tout texte --mn-on-copper-lede #2E1206 4,65:1 chapô 18 px --mn-on-copper-em #3D2415 3,83:1 titres ≥ 40 px uniquement SUR BANDE IVOIRE #EEE7DC --mn-on-ivory #201B17 13,90:1 --mn-on-ivory-dim #5E544C 6,00:1 --mn-on-ivory-label #665C52 5,31:1 --mn-on-ivory-em #B7562C 3,90:1 titres ≥ 40 px uniquement SUR CARTE INCLINÉE (#F8F4EC → #E2D7C6) --mn-on-sheet #201B17 12,00:1 --mn-on-sheet-dim #5E544C 5,19:1 --mn-on-sheet-em #A24A22 4,17:1 BOUTONS primaire #F7B081→#E27B4C sur texte #231207 6,18:1 pastille #F7B081→#D9713F sur texte #2A1207 5,37:1 sombre #1B1410 sur texte #EEE7DC 14,82:1 ──────────────────────────────────────────────────────────────────────────── CE QUI A ÉTÉ CORRIGÉ PAR RAPPORT À LA MAQUETTE v3.0 — cinq échecs avérés : 1. --faint #7E7870 → #8B857D 4,53 → 5,42 (limite) 2. eyebrow ivoire #7A6E63 → #665C52 4,03 → 5,31 ÉCHEC 3. étiquette carte #8A7E71 → #5E544C 2,78 → 5,19 ÉCHEC GRAVE 4. italique cuivre #FFF3E9 → #3D2415 1,86 → 3,83 ÉCHEC GRAVE (le handoff §9 interdit explicitement le blanc sur cuivre ; la maquette le faisait quand même. L'emphase est désormais portée par l'italique du serif, pas par un écart de valeur impossible à tenir.) 5. chapô cuivre rgba(27,14,6,.74) → #2E1206 2,29 → 4,65 ÉCHEC Et une correction de fond : l'extrémité sombre du dégradé cuivre passe de #C35F32 à #CC6838, sans quoi aucune encre ne tient 4,5:1 avec de la marge sur toute la surface de la bande. ============================================================================ */