/* ------------------------------------------------------------------ tokens.css — Source unique de vérité de la charte CMA ------------------------------------------------------------------ Valeurs issues du BRANDBOOK CMA (charte seule), pages 8 et 15. Ratios de contraste calculés selon WCAG 2.1 (relative luminance). RÈGLE : aucune couleur en dur dans les squelettes ni dans le CSS. Toute couleur passe par une variable définie ici. C'est l'absence d'un tel fichier qui a laissé dériver le site actuel vers #cc1a30, #db1762 et #c41558 à côté du Rouge CMA. ------------------------------------------------------------------ */ :root { /* --- Couleurs de marque : valeurs immuables du brandbook --------- */ /* Rouge CMA — Pantone 201C — couleur principale Contraste sur blanc : 7.57:1 (AAA) — utilisable pour tout texte */ --cma-rouge: #A8131D; /* Rouge Éclairé — Pantone 2034C — aplats, « Lien », fonds Contraste sur blanc : 3.77:1 — INSUFFISANT pour du texte courant. Réservé aux aplats et aux grands titres (seuil 3:1). */ --cma-rouge-eclaire: #EA4B3C; /* Variante accessible du Rouge Éclairé, imposée par le brandbook pour « les textes ou tout petits objets nécessitant d'être accessibles sur le Web (textes et CTA) ». Contraste sur blanc : 4.55:1 (AA) */ --cma-rouge-texte: #CD493D; /* Bleu Marine — Pantone 2380C — institutionnel, secondaire Contraste sur blanc : 13.19:1 (AAA) */ --cma-bleu-marine: #0F3250; /* Bleu Frais — Pantone 543C — fonds légers, survols Marine sur Bleu Frais : 8.21:1 (AAA) */ --cma-bleu-frais: #B0D2D9; /* Bleu frais très dilué : fond de survol des sous-menus. La valeur était jusqu'ici écrite en repli d'un var() qui ne résolvait jamais — elle fonctionnait, mais restait invisible dans la palette. */ --frais-wash: #F0F7F9; /* Rouge éclairci, pour du texte rouge SUR le bleu marine. Le Rouge Éclairé #EA4B3C n'y atteint que 3.50:1 et le #CD493D que 2.90:1 : tous deux insuffisants. Celui-ci donne 5.61:1 (AA) tout en restant dans la famille. */ --cma-rouge-sur-marine: #F58C7E; /* --- Neutres ---------------------------------------------------- */ /* Légèrement teintés vers le bleu marine : un gris pur jure avec la palette. Le gris de texte est calé à 5.51:1 sur blanc, là où le #A7A7A7 du site actuel plafonne à 2.41:1 (non conforme). */ --blanc: #FFFFFF; --fond: #F5F8F9; --fond-alt: #EDF2F4; --bordure: #D8E3E8; --bordure-forte: #B6C9D2; --texte: #12222E; /* 15.4:1 sur blanc */ --texte-doux: #3D5464; /* 9.1:1 sur blanc */ --texte-faible: #5A6B78; /* 5.5:1 sur blanc — plancher AA */ /* --- Rôles sémantiques ------------------------------------------ */ /* Les composants consomment ces rôles, jamais les couleurs brutes. Changer un rôle suffit à répercuter partout. */ --c-action: var(--cma-rouge); --c-action-hover: var(--cma-rouge-texte); /* Rouge CMA et non Rouge Eclaire : #CD493D tient 4.55:1 sur du blanc pur, mais tombe a 4.26:1 des que le fond est teinte (mesure sur --fond #F5F8F9). #A8131D donne 7.57:1 et reste utilisable partout. Le brandbook autorise les deux pour du texte ; on prend celui qui a de la marge. */ --c-lien: var(--cma-rouge); --c-titre: var(--cma-bleu-marine); --c-surface: var(--blanc); --c-surface-alt: var(--fond-alt); --c-surface-accent: var(--cma-bleu-frais); --c-focus: var(--cma-rouge-eclaire); /* États — distincts de l'accent de marque, jamais porteurs d'information à eux seuls (RGAA 3.1) */ --c-succes: #1B6B4A; /* 5.2:1 sur blanc */ --c-alerte: #8A5A00; /* 5.4:1 sur blanc */ --c-erreur: #A8131D; /* 7.6:1 sur blanc */ /* --- Typographie ------------------------------------------------ */ /* Roboto Slab : titres et accroches uniquement. Le brandbook précise « ne pas l'utiliser pour des paragraphes trop longs, de préférence pour des phrases courtes ». Montserrat : texte courant. */ --f-titre: 'Roboto Slab', Georgia, 'Times New Roman', serif; --f-texte: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; /* Échelle calée sur CMA Nouvelle-Aquitaine, mesurée sur leur site : corps 18px / interligne 30, h1 Roboto Slab 56px en graisse 500, h2 30px en 500, titre de carte 20px en 500, lien de navigation 18px en 600. Le corps passe donc de 16 à 18px. C'est ce qui fait la lisibilité de leur site, et la spec UX pose 16px comme plancher, pas comme cible. */ --t-xs: 0.875rem; /* 14px — mentions */ --t-sm: 1rem; /* 16px — méta */ --t-base: 1.125rem; /* 18px — corps */ --t-lg: 1.25rem; /* 20px — chapô */ --t-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); /* 20 → 24 */ --t-2xl: clamp(1.5rem, 1.15rem + 1.5vw, 1.875rem); /* 24 → 30 */ --t-3xl: clamp(1.875rem, 1.1rem + 3.3vw, 2.75rem); /* 30 → 44 */ --t-4xl: clamp(2.125rem, 0.9rem + 5.2vw, 3.5rem); /* 34 → 56 */ /* Roboto Slab en graisse 500, comme le réseau. Le 700/800 alourdit une slab déjà très présente. */ --fw-titre: 500; --lh-titre: 1.2; /* 56/67 et 30/37 chez NA = 1.2 */ --lh-texte: 1.65; /* dans la fourchette 1.5–1.8 de la spec UX */ --mesure: 68ch; /* 45–75 caractères */ /* --- Espacement : échelle 4/8 de la spec UX --------------------- */ --e-1: 0.25rem; /* 4px micro-espace */ --e-2: 0.5rem; /* 8px espace compact */ --e-3: 0.75rem; /* 12px espace interne petit */ --e-4: 1rem; /* 16px padding standard */ --e-6: 1.5rem; /* 24px séparation de bloc */ --e-8: 2rem; /* 32px séparation de section */ --e-12: 3rem; /* 48px grande section */ --e-16: 4rem; /* 64px respiration large */ /* --- Structure -------------------------------------------------- */ --largeur-max: 80rem; --rayon: 4px; --rayon-lg: 8px; --ombre: 0 1px 2px rgb(15 50 80 / 0.06), 0 4px 12px rgb(15 50 80 / 0.08); /* Ombre au survol des éléments cliquables — valeur reprise du travail spip_v5, associée à un déplacement de −4px. */ --ombre-survol: 0 12px 24px -6px rgb(15 50 80 / 0.18); /* --- Motion : durées de la spec UX ------------------------------ */ --d-micro: 120ms; /* 80–150ms micro-interaction */ --d-feedback: 200ms; /* 150–250ms feedback simple */ --d-apparition: 280ms; /* 200–350ms apparition de contenu */ --d-composant: 320ms; /* 250–400ms transition de composant */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-sortie: cubic-bezier(0.0, 0, 0.2, 1); } /* Mouvement réduit : exigence RGAA et spec UX. On neutralise, on ne supprime pas les états. */ @media (prefers-reduced-motion: reduce) { :root { --d-micro: 0ms; --d-feedback: 0ms; --d-apparition: 0ms; --d-composant: 0ms; } }