/* * css/tokens.css — Story 1.3, AD-3. * * Reflet 1:1 des tokens de _data/theme.js (lui-même reflet 1:1 de * DESIGN.md — colors/typography/rounded/spacing/components). Chaque token * DESIGN.md devient une custom property de même nom ; les tokens composés * (ex. un style typographique = famille + taille + graisse + interligne + * tracking) sont décomposés en une custom property par sous-champ plutôt * qu'un raccourci CSS shorthand, pour rester réplicables 1:1. * * Ce fichier est le SEUL endroit où ces valeurs doivent apparaître en CSS : * css/style.css ne doit plus contenir de couleur/police/rayon codés en dur, * seulement des var(--...) pointant ici. */ /* Retour utilisateur (revue Winston, party mode) : Source Sans 3 auto-hébergée (fonts/*.woff2, copiés tels quels par eleventy.config.js) plutôt que chargée depuis fonts.googleapis.com/fonts.gstatic.com -- chaque visiteur transmettait son IP à Google sans contrepartie réelle (le partitionnement de cache par origine des navigateurs, en place depuis 2020, a supprimé le seul avantage -- un cache CDN partagé entre sites -- qui aurait pu justifier la dépendance externe). Sujet particulièrement sensible pour un site institutionnel paritaire (OPCO, observatoire de branche). 2 fichiers seulement, pas 4 : la requête Google Fonts d'origine (poids 400/600/700 + italique 400) résolvait déjà 400/600/700 vers le MÊME fichier .woff2 (police variable, confirmé par les URLs identiques renvoyées par l'API Google Fonts) -- `font-weight: 400 700` (plage, syntaxe police variable) sur une seule règle couvre les trois graisses utilisées par le site, pas trois fichiers. Sous-ensemble "latin" de la police uniquement (pas cyrillic/greek/vietnamese/latin-ext) : couvre tous les caractères du contenu français du site (accents, œ, «», ponctuation générale -- vérifié contre la plage unicode-range latin d'origine avant de choisir ce sous-ensemble), inutile de télécharger les autres écritures. */ @font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/source-sans-3-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/source-sans-3-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* --------------------------------------------------------------------- * Colors (DESIGN.md `colors`, 1:1 avec _data/theme.js `colors`) * ------------------------------------------------------------------- */ --color-surface: #FFFFFF; --color-surface-dim: #E2E2D9; --color-surface-bright: #FFFFFF; --color-surface-container-lowest: #FFFFFF; --color-surface-container-low: #F7F6F3; --color-surface-container: #F0F0EA; --color-surface-container-high: #E2E2D9; --color-surface-container-highest: #D5D4C8; --color-on-surface: #08436F; --color-on-surface-variant: #828282; --color-inverse-surface: #063456; --color-inverse-on-surface: #FFFFFF; --color-outline: #B7B7B3; --color-outline-variant: #E2E2D9; --color-surface-tint: #08436F; --color-primary: #08436F; --color-on-primary: #FFFFFF; --color-primary-container: #4FADF2; --color-on-primary-container: #063456; --color-inverse-primary: #4FADF2; --color-secondary: #24998E; --color-on-secondary: #FFFFFF; --color-secondary-container: #2EC4B6; --color-on-secondary-container: #0B332F; --color-tertiary: #80D33A; --color-on-tertiary: #063456; --color-tertiary-container: #B6E68E; --color-on-tertiary-container: #2E4D14; --color-error: #EB5757; --color-on-error: #FFFFFF; --color-error-container: #FF9E9E; --color-on-error-container: #7A1414; --color-primary-fixed: #4FADF2; --color-primary-fixed-dim: #297CA3; --color-on-primary-fixed: #063456; --color-on-primary-fixed-variant: #08436F; --color-secondary-fixed: #77DFD5; --color-secondary-fixed-dim: #2EC4B6; --color-on-secondary-fixed: #0B332F; --color-on-secondary-fixed-variant: #24998E; --color-tertiary-fixed: #B6E68E; --color-tertiary-fixed-dim: #80D33A; --color-on-tertiary-fixed: #2E4D14; --color-on-tertiary-fixed-variant: #5C9E23; --color-background: #FFFFFF; --color-on-background: #08436F; --color-surface-variant: #F0F0EA; /* --------------------------------------------------------------------- * Accents (gamme secondaire de la charte, reflet 1:1 de _data/theme.js * `accents` -- jeu DISTINCT de colors ci-dessus, jamais un rôle FR-10. * Consommé uniquement par `.volet__picto` via `--section-accent`, cf. * _includes/section.njk et la règle `.volet__picto` plus bas dans * css/style.css. * ------------------------------------------------------------------- */ --accent-bleu-ciel: #297CA3; --accent-vert-clair: #75CB1F; --accent-jaune: #F4D36C; --accent-corail: #EB5757; --accent-violet: #6935A7; /* --------------------------------------------------------------------- * Typography (DESIGN.md `typography`, 9 tokens — décomposés par sous-champ) * ------------------------------------------------------------------- */ --font-display-lg-family: "Source Sans 3"; --font-display-lg-size: 48px; --font-display-lg-weight: 700; --font-display-lg-line-height: 1.1; --font-display-lg-letter-spacing: -0.01em; --font-display-lg-mobile-family: "Source Sans 3"; --font-display-lg-mobile-size: 32px; --font-display-lg-mobile-weight: 700; --font-display-lg-mobile-line-height: 1.15; --font-display-lg-mobile-letter-spacing: normal; /* Retour utilisateur (revue Sally, party mode) : h1 (titre du rapport, hero) et h2 (titre de chapitre/section) rendaient tous deux à 48px (h2 réutilisait --font-display-lg faute d'un palier dédié entre headline-md/28px et display-lg/48px dans l'échelle DESIGN.md) -- le titre du rapport n'avait alors aucune prééminence typographique sur un titre de chapitre. Nouveau palier intermédiaire pour h2 spécifiquement ; h1/hero garde display-lg inchangé (son rôle de plus gros titre de la page reste le même, seul h2 descend). Mobile : réutilise --font-headline-md (28px, déjà existant) plutôt qu'un nouveau token mobile dédié -- l'écart h1/h2 compte surtout en desktop, où les deux tailles coexistent visuellement dans le même champ de vision. */ --font-headline-lg-family: "Source Sans 3"; --font-headline-lg-size: 36px; --font-headline-lg-weight: 700; --font-headline-lg-line-height: 1.2; --font-headline-lg-letter-spacing: normal; --font-headline-md-family: "Source Sans 3"; --font-headline-md-size: 28px; --font-headline-md-weight: 600; --font-headline-md-line-height: 1.25; --font-headline-md-letter-spacing: normal; --font-headline-sm-family: "Source Sans 3"; --font-headline-sm-size: 22px; --font-headline-sm-weight: 600; --font-headline-sm-line-height: 1.3; --font-headline-sm-letter-spacing: normal; /* Retour utilisateur ("les chiffres 2x plus gros, qu'ils attirent l'œil") : valeur mobile intermédiaire (56px, x1.4 -- pas x2 net) plutôt que le doublement plein (80px) appliqué à partir de 768px (cf. media query, css/style.css) -- à x2 plein sur les colonnes mobiles les plus étroites (`.chiffres-cles-liste`, grid `minmax(9rem, 1fr)`, css/ style.css), le plus grand chiffre du site ("70000", 5 chiffres) recassait en 2 lignes au milieu du nombre (même défaut que le bug "7000/0" déjà corrigé une fois pour ce même chiffre, cf. retour utilisateur sur "Le portail en chiffres") -- vérifié en navigateur. 56px reste tout de même +40% par rapport à l'ancienne valeur (40px). */ --font-counter-figure-family: "Source Sans 3"; --font-counter-figure-size: 56px; --font-counter-figure-weight: 700; --font-counter-figure-line-height: 1; --font-counter-figure-letter-spacing: -0.01em; --font-body-lg-family: "Source Sans 3"; --font-body-lg-size: 18px; --font-body-lg-weight: 400; --font-body-lg-line-height: 1.6; --font-body-lg-letter-spacing: normal; --font-body-md-family: "Source Sans 3"; --font-body-md-size: 16px; --font-body-md-weight: 400; --font-body-md-line-height: 1.6; --font-body-md-letter-spacing: normal; --font-label-caps-family: "Source Sans 3"; --font-label-caps-size: 13px; --font-label-caps-weight: 600; --font-label-caps-line-height: 1.4; --font-label-caps-letter-spacing: 0.06em; --font-caption-family: "Source Sans 3"; --font-caption-size: 13px; --font-caption-weight: 400; --font-caption-line-height: 1.4; --font-caption-letter-spacing: normal; /* --------------------------------------------------------------------- * Rounded (DESIGN.md `rounded`) * ------------------------------------------------------------------- */ --rounded-sm: 0.25rem; --rounded: 0.5rem; --rounded-md: 0.75rem; --rounded-lg: 1rem; --rounded-full: 9999px; /* --------------------------------------------------------------------- * Spacing (DESIGN.md `spacing`) * ------------------------------------------------------------------- */ --spacing-unit: 8px; --spacing-gutter: 24px; --spacing-margin-mobile: 20px; --spacing-margin-desktop: 80px; --spacing-section-gap: 96px; /* Retour utilisateur : largeur commune à tous les blocs "2e colonne" secondaires (repli photo, encadré, bloc chiffres clés) -- reprend la largeur déjà fixée pour l'encadré "objectifs" du portail (3 objectifs, cf. .portail-banner__encadre, css/style.css), pris comme référence plutôt que de laisser chacun de ces blocs dériver une largeur différente de son propre ratio de grille (`2fr 1fr` etc.) selon la largeur du texte voisin. */ --secondary-column-width: 420px; /* --------------------------------------------------------------------- * Components (DESIGN.md `components` — tokens composés décomposés, AD-3) * ------------------------------------------------------------------- */ /* components.volet */ --volet-padding: 24px; --volet-radius: var(--rounded-md); --volet-border: 1px solid var(--color-outline-variant); --volet-focus-ring: 2px solid var(--color-tertiary); /* Retour utilisateur ("l'interaction ne se voit pas") : essai intermédiaire -- intensité remontée (4px/12px/10% -> 10px/28px/22%) -- puis changement de TECHNIQUE, pas seulement d'intensité (cf. commentaire complet sur `.volet__card:hover`, css/style.css) : `.volet` (l'article englobant `.volet__card`) porte son propre `overflow: hidden` pour un tout autre besoin (révéler la zone photo d'un voisin de rangée, js/volets.js) -- ce clip masquait entièrement toute ombre EXTÉRIEURE posée sur la carte, quelle que soit son intensité. `inset` : rendue À L'INTÉRIEUR du cadre de la carte, jamais besoin de déborder -- immunisée contre ce clip par construction, plutôt que de contourner un `overflow: hidden` dont la carte elle-même dépend ailleurs. Retour utilisateur ("la bordure de couleur au hover devrait être de la couleur de la partie") : essai rejeté -- `var(--section-chiffre-color, var(--color-primary))` DIRECTEMENT DANS CE TOKEN, en pensant que la substitution se referait au point d'USAGE (`.volet__card`, qui hérite bien la couleur de sa section, vérifié). Bug constaté en vérification indépendante : une custom property résout SES PROPRES `var()` à SON PROPRE point de cascade (ici `:root`, où `--section-chiffre-color` n'existe pas) -- c'est cette valeur DÉJÀ RÉSOLUE (repli bleu figé) qui est ensuite héritée telle quelle par tous les descendants, jamais réévaluée plus bas. Un token défini une fois sur `:root` ne peut donc pas "s'adapter" à la section qui l'utilise par ce biais. Ce token revient à un valeur FIXE (juste la forme -- ombre intérieure 2px, jamais la couleur) ; la couleur, elle, est posée DIRECTEMENT dans `.volet__card:hover` (css/style.css), au bon niveau de cascade pour hériter correctement `--section-chiffre-color`. */ --volet-hover-shadow-inset: inset 0 0 0 2px; /* Retour utilisateur (revue Sally, party mode -- WCAG 2.2 SC 1.4.11) : `--volet-focus-ring` (vert tertiary sur un indicateur non-textuel) mesure 1,86:1 sur une carte blanche -- échoue le minimum 3:1 requis. Sur le fond bleu foncé de la nav (--color-primary), ce même vert mesure 5,53:1 (passe largement) -- le token d'origine reste donc inchangé et continue de servir .site-nav__link/.site-nav__toggle/ .back-to-top (tous sur ce fond bleu foncé). Seuls les 2 usages sur fond CLAIR (.volet__toggle, carte blanche ; .btn--cta, fond vert lui-même -- vert sur vert est quasi invisible) ont besoin de cette paire dédiée : le bleu (10,28:1 sur blanc) porte le contraste requis par la norme, le halo vert garde la signature visuelle de la charte sans la perdre. */ --focus-ring-on-light: 2px solid var(--color-primary); --focus-ring-on-light-glow: 0 0 0 4px var(--color-tertiary); /* components.counter (figureToken = typography.counter-figure) */ --counter-figure-family: var(--font-counter-figure-family); --counter-figure-size: var(--font-counter-figure-size); --counter-figure-weight: var(--font-counter-figure-weight); --counter-figure-line-height: var(--font-counter-figure-line-height); --counter-figure-letter-spacing: var(--font-counter-figure-letter-spacing); /* components.hero-band — pas de bandeau photo dans cette story (cf. Never de la spec 1.3), mais le token de plancher est défini dès maintenant pour que _data/theme.js.validate() puisse le vérifier (AD-7). */ --hero-band-min-height: 60vh; --hero-band-overlay-opacity: 0.55; --hero-band-overlay-opacity-floor: 0.55; /* Chevauchement de la bande "Avant-propos" sur le bas du hero (retour utilisateur, "donner un peu de dynamisme") -- valeur UNIQUE partagée entre `#avant-propos .section-band` (marge négative) ET `.hero__numeral` (décalage vers le haut pour rester lisible malgré ce chevauchement) dans css/style.css : les deux DOIVENT rester synchronisés (sans ce token commun, le numéral fantôme "2025" se retrouve partiellement caché sous la bande -- bug constaté en vérification navigateur lors de l'introduction du chevauchement). Valeur mobile (<768px, police h2 mobile -> bande de 83px de haut, mesuré) ; redéfinie à 768px (police h2 desktop -> bande de 91px) dans la même media query que le reste des paliers desktop, css/style.css. */ --avant-propos-overlap: 2.6rem; }