/* ===================================================================== ESS — Design Tokens Source of truth for brand colors, typography, spacing, radii, shadows. Values derived from assets/charte graphique ESS.pdf (see decision.md §5–6). ===================================================================== */ :root { /* ---- Brand: primary ------------------------------------------------ */ --c-blue: #0058A5; /* bleu profond — primaire, structure, texte fort */ --c-blue-700: #004a8c; --c-blue-900: #00335f; /* footer / surfaces sombres */ --c-sky: #169FDB; /* bleu ciel — interactif, liens, secondaire */ --c-sky-600: #0f88bd; --c-green: #61B234; /* vert — ESS/nature, réussite, accent */ --c-green-700: #4d9327; /* vert lisible sur fond clair (texte) */ --c-orange-red: #E74011; /* ponctuation forte — à doser */ /* ---- Brand: secondary (parcimonie — 1 max par vue) ----------------- */ --c-wine: #A3173E; --c-orange: #F3953F; --c-yellow: #FFCD1C; /* ---- Neutrals ------------------------------------------------------ */ --c-ink: #12212E; /* texte principal */ --c-slate: #5B6B7A; /* texte secondaire */ --c-slate-300: #93A2AF; /* texte tertiaire / placeholders */ /* AUDIT #4 — jeton référencé par pages.css pour TOUT le corps éditorial (`var(--c-ink-700, #33414d)`) mais jamais défini : la valeur de repli s'appliquait, donc une couleur en dur déguisée en jeton. Changer --c-ink n'aurait rien fait bouger sur les pages Découvrir ou les fiches, sans explication. */ --c-ink-700: #33414d; /* texte éditorial long (prose) */ /* AUDIT #6 — quatre usages, aucun nom : bleu très clair pour texte secondaire posé sur les fonds bleu profond (pied de page, bandes). */ --c-on-blue: #cfe3f3; --c-line: #E3E9F0; /* bordures / séparateurs */ --c-line-strong: #CBD6E1; --c-mist: #F4F7FA; /* fond de section clair */ --c-mist-200: #EAF0F6; --c-paper: #FFFFFF; /* ---- Semantic ------------------------------------------------------ */ --c-success: var(--c-green-700); --c-info: var(--c-sky); --c-warning: var(--c-orange); --c-danger: var(--c-wine); /* Rouge de REFUS — le seul rouge d'action de la plateforme. C'est le bordeaux de la charte, pas l'orange-rouge : sur blanc il donne 7,64:1 (contre 4,09:1 pour #E74011), et il est déjà la couleur des statuts « refusé ». Un refus doit se lire du premier coup d'œil ET rester lisible — l'orange-rouge de la charte est réservé à la ponctuation éditoriale, « à doser ». */ --c-danger-700: #85102F; /* survol / appui */ --c-danger-bg: var(--tag-wine-bg); /* ---- Tag palette (soft backgrounds + readable text) ---------------- */ --tag-blue-bg: #E4EFF8; --tag-blue-fg: var(--c-blue); --tag-green-bg: #E8F4DE; --tag-green-fg: var(--c-green-700); --tag-sky-bg: #E1F3FB; --tag-sky-fg: var(--c-sky-600); --tag-orange-bg: #FDEEDD; --tag-orange-fg: #C56A1C; --tag-wine-bg: #F7E1E8; --tag-wine-fg: var(--c-wine); --tag-neutral-bg:#EDF1F5; --tag-neutral-fg:var(--c-slate); /* ---- Surlignage ------------------------------------------------------ Vert de marque + NOIR PUR, et non l'encre du site : sur #61B234, le noir donne 7,93:1 (AAA) là où --c-ink n'atteint que 6,18:1 (AA). Le surlignage sert justement à porter ce qui compte — il n'a pas le droit d'être le passage le moins lisible de la page. Le noir pur est ici un choix de CONTRASTE, pas une couleur de marque : d'où un jeton nommé plutôt qu'un littéral semé dans les composants. */ --c-highlight: var(--c-green); /* fond du surlignage */ --c-highlight-fg: #000000; /* 7,93:1 sur le fond ci-dessus */ /* ---- Typography ---------------------------------------------------- */ /* Police de tout le site : Poppins (chargée via Google Fonts). Arabe (phase ultérieure) : IBM Plex Sans Arabic / Frutiger LT Arabic. */ --font-latin: "Poppins", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; --font-arabic: "IBM Plex Sans Arabic", "Frutiger LT Arabic", "Segoe UI", Tahoma, sans-serif; --font-body: var(--font-latin); --font-head: var(--font-latin); /* ==== Échelle typographique — RÉFÉRENCE UNIQUE de tout le site ====== Tout texte doit suivre cette échelle (via ces tokens ou les classes utilitaires .text-*). px indiqués ; clamp = fluide jusqu'au max. */ --fs-display: clamp(2.5rem, 1.6rem + 3.6vw, 4rem); /* Hero — max 64px */ --fs-h1: clamp(2rem, 1.4rem + 2.4vw, 3rem); /* H1 — 48px */ --fs-h2: clamp(1.6rem, 1.2rem + 1.7vw, 2.25rem); /* H2 — 36px */ --fs-h3: clamp(1.4rem, 1.15rem + 1vw, 1.75rem); /* H3 — 28px */ --fs-h4: 1.375rem; /* H4 — 22px */ --fs-lead: 1.125rem; /* Body large — 18px */ --fs-base: 1rem; /* Body — 16px */ --fs-sm: 0.875rem; /* Small / métadonnées — 14px */ --fs-xs: 0.75rem; /* Caption — 12px */ --fs-eyebrow: 0.75rem; /* sur-titre — 12px */ --fs-stat: clamp(2.4rem, 1.8rem + 2.6vw, 3.6rem); /* chiffres-clés */ --lh-tight: 1.1; --lh-snug: 1.28; --lh-body: 1.65; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* Titres plafonnés à « bold » (700) par direction client — pas de black/800. */ --fw-black: 700; /* ---- Spacing scale (4px base) ------------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; /* ---- Layout ------------------------------------------------------- */ --container: 1200px; --container-wide: 1320px; --container-text: 760px; /* colonne de lecture éditoriale */ --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem); --section-y: clamp(3rem, 2rem + 5vw, 6rem); /* ---- Radii — sharp / editorial (see decision.md §5b) --------------- */ --r-sm: 2px; --r-md: 4px; --r-lg: 6px; --r-xl: 10px; --r-pill: 999px; /* réservé aux pastilles : tags, chips, badges */ /* ---- Shadows (soft, editorial) ------------------------------------ */ --sh-xs: 0 1px 2px rgba(18, 33, 46, 0.06); --sh-sm: 0 2px 8px rgba(18, 33, 46, 0.07); --sh-md: 0 10px 24px rgba(18, 33, 46, 0.09); --sh-lg: 0 20px 48px rgba(18, 33, 46, 0.13); --sh-blue: 0 14px 30px rgba(0, 88, 165, 0.22); /* ---- Motion ------------------------------------------------------- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-fast: 0.15s; --dur: 0.28s; --dur-slow: 0.5s; --header-h: 76px; /* ---- Hauteur des contrôles ----------------------------------------- Deux hauteurs, deux seulement. Avant, chaque contrôle calculait la sienne depuis son rembourrage en `em` : champs 43px, recherche 41, pastilles 37, tri 38, filtres 30 — sept valeurs pour des éléments censés s'aligner. Une hauteur DÉCLARÉE remplace sept hauteurs déduites, et le rembourrage ne sert plus qu'au confort horizontal. 44px : le minimum de cible tactile, et ce site est mobile-first. 36px pour les pastilles de filtre — ce sont des bascules dans une rangée, pas des champs de saisie. */ --control-h: 44px; --chip-h: 36px; } /* ---- High-contrast mode (accessibility toggle) --------------------- */ :root[data-contrast="high"] { --c-ink: #000000; --c-slate: #1c2b36; /* Bordures : on garde un gris clair « à peine visible » même en fort contraste (le renfort de contraste porte sur le texte, pas les traits). */ --c-line: #E3E9F0; --c-line-strong: #CBD6E1; --c-mist: #ffffff; --c-blue: #003a70; --c-sky: #0b6f9c; --c-green-700:#2f6d10; } /* ---- Font-size scaling (accessibility toggle) ---------------------- */ :root[data-textsize="lg"] { font-size: 18px; } :root[data-textsize="xl"] { font-size: 20px; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0.001s; --dur: 0.001s; --dur-slow: 0.001s; } }