/** * theme_violette — jetons du système de design « Violette Bernad, version 1 ». * * Source de vérité unique : aucune valeur de couleur, de police, d'espacement * ou de durée n'est écrite en dur ailleurs dans le thème. * * Les valeurs du système sont données en pixels ; elles sont transposées ici en * `rem` (base 16) pour que le réglage de taille de police du navigateur reste * opérant — le rendu par défaut est identique au pixel près. * * Sommaire * 1. Jetons du système * 2. Échelles typographiques — taille, hauteur de ligne * 3. Espacement, grille, divers * 4. Jetons de ff_components */ /* Correspondance avec le handoff Claude Design (système v2) : --vb-papier → --papier · --vb-papier-presse → --papier-presse · --vb-encre → --encre · --vb-accent → --accent · --vb-alerte → --alerte · --vb-surlignage → --surlignage · --vb-meta → --meta · --vb-filet → --filet · --vb-filet-fort → --filet-fort · --vb-font-* → --font-* · --vb-1…8 → --space-1…8 · --vb-max → --max · --vb-lecture → --lecture · --vb-gouttiere → --gouttiere · --vb-marge-fluide → --marge · --vb-marge → --marge-fixe · --vb-radius → --radius · --vb-cible → --cible · --vb-focus → --focus · --vb-t-* → --t-* · --vb-grille-actus → --grille-actus · --vb-embed-max → --embed-max · --vb-rupture-* → --rupture-* · rôles --vb-marque, --vb-display, --vb-titre-*, --vb-texte-*, --vb-citation, --vb-label, --vb-meta-mono, --vb-date-mono → mêmes noms sans préfixe. Sans équivalent dans le handoff, ajoutés aux tâches 3 à 8 : les opacités dérivées de --vb-encre et --vb-accent, posées une fois pour toutes en --encre-92, --encre-90, --encre-80, --encre-75, --encre-72, --encre-68, --encre-30, --encre-25, --encre-12 et --accent-45. */ /* ------------------------------------------------------------------ */ /* 1. Jetons du système */ /* ------------------------------------------------------------------ */ :root { color-scheme: light; /* Couleur. Le site n'a pas de mode sombre : on assume le papier. */ --papier: #fcfcfb; --papier-presse: #f1f1ef; --encre: #1c1a16; --accent: #2c6f7a; /* bleu-vert, max 5 % de la surface d'un écran */ --alerte: #8a4a35; /* avertissement de contenu, erreurs */ --surlignage: #e2edee; --meta: rgba(28, 26, 22, 0.7); --filet: rgba(28, 26, 22, 0.14); --filet-fort: #1c1a16; /* L'encre et l'accent à opacité réduite, tels que les maquettes v2 les emploient. Un seul endroit pour les régler. */ --encre-92: rgba(28, 26, 22, 0.92); /* texte lu */ --encre-90: rgba(28, 26, 22, 0.9); /* texte secondaire */ --encre-88: rgba(28, 26, 22, 0.88); /* texte court d'un composant : entrée de liste, cellule, texte petit */ --encre-80: rgba(28, 26, 22, 0.8); /* texte du bandeau d'appel */ --encre-75: rgba(28, 26, 22, 0.75); /* baseline de la marque */ --encre-72: rgba(28, 26, 22, 0.72); /* références, sous-titres italiques */ --encre-68: rgba(28, 26, 22, 0.68); /* labels mono, compteurs */ --encre-30: rgba(28, 26, 22, 0.3); /* filet sous l'en-tête d'un tableau */ --encre-25: rgba(28, 26, 22, 0.25); /* filet sous le titre d'une carte */ --encre-12: rgba(28, 26, 22, 0.12); /* filet entre deux rangées de tableau */ --accent-45: rgba(44, 111, 122, 0.45); /* filet sous un lien, bouton accent */ /* Les mêmes teintes vues depuis l'encre pleine : sur fond sombre les liens s'affichent en papier, le bleu-vert n'y passe pas le contraste. */ --papier-16: rgba(252, 252, 251, 0.16); --papier-28: rgba(252, 252, 251, 0.28); --papier-35: rgba(252, 252, 251, 0.35); --papier-40: rgba(252, 252, 251, 0.4); --papier-50: rgba(252, 252, 251, 0.5); --papier-60: rgba(252, 252, 251, 0.6); --papier-68: rgba(252, 252, 251, 0.68); --papier-70: rgba(252, 252, 251, 0.7); --papier-75: rgba(252, 252, 251, 0.75); --papier-90: rgba(252, 252, 251, 0.9); --papier-92: rgba(252, 252, 251, 0.92); --filet-invert: rgba(252, 252, 251, 0.22); /* Filet de saisie sur fond encre. Plus franc que le filet de séparation : à 22 % une ligne de champ vide passerait pour du décor. */ --filet-invert-fort: rgba(252, 252, 251, 0.35); /* Typographie — trois familles, sans exception. */ --font-titre: "Archivo Narrow", "Helvetica Neue", Arial, sans-serif; --font-texte: "Lora", Georgia, "Times New Roman", serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace; } /* ------------------------------------------------------------------ */ /* Rôles typographiques — raccourcis `font:` du système v2. */ /* Un rôle s'emploie tel quel : `font: var(--titre-m);`. Les crans de */ /* texte et de mono ne changent à aucune largeur ; seuls display, */ /* titre-xl, titre-l et marque sont fluides. */ /* */ /* Correspondance avec le handoff : --vb- → --. */ /* ------------------------------------------------------------------ */ :root { /* Le plafond est calé pour que « Violette Bernad » atteigne la largeur du slogan posé dessous. Valeur de calibrage : elle dépend du nom, de la phrase et de la taille de celle-ci — à reprendre si l'un des trois change. */ --marque: 700 clamp(22px, 6.5vw, 29.5px) / 1 var(--font-titre); --display: 600 clamp(34px, 5vw, 60px) / 1.02 var(--font-titre); --titre-xl: 600 clamp(30px, 4.4vw, 44px) / 1.04 var(--font-titre); --titre-l: 600 clamp(26px, 3vw, 30px) / 1.1 var(--font-titre); --titre-m: 600 20px / 1.2 var(--font-titre); --titre-s: 600 16px / 1.2 var(--font-titre); --texte-l: 400 20px / 1.7 var(--font-texte); --texte-m: 400 17px / 1.75 var(--font-texte); --texte-s: 400 15px / 1.65 var(--font-texte); --citation: 400 clamp(21px, 2.2vw, 26px) / 1.55 var(--font-texte); --label: 500 12px / 1 var(--font-mono); --meta-mono: 400 12px / 1.4 var(--font-mono); --date-mono: 400 12.5px / 1.4 var(--font-mono); } /* ------------------------------------------------------------------ */ /* 2. Échelles typographiques — taille, hauteur de ligne */ /* ------------------------------------------------------------------ */ /** * Trois échelles indépendantes, par ordre de grandeur, sans rapport avec un * rôle (titre/texte/marque) : `--fs-*` (taille) et `--lh-*` (hauteur de * ligne). Un rang est partagé entre plusieurs pièces du * système quand la valeur est identique — ex. `--fs-s` sert à la fois au * `titre-s` et au `texte-s` du système de design, tous deux 16px. * * La taille et la hauteur de ligne sont jetonnées ; la graisse et la famille * ne le sont qu'à moitié. La famille reste un des trois jetons * `--font-titre` / `--font-texte` / `--font-mono` ci-dessus, la graisse un des * cinq jetons `--fw-*` ci-dessous, et l'un comme l'autre s'écrivent règle par * règle : aucun jeton ne réunit les quatre axes d'un rôle. C'est voulu — le * système fournit des primitives, les pièces du thème les assemblent. * * Table complète des rôles du système de design, quatre axes par ligne. Elle * remplace les anciens jetons composites `--vb-*`, qui portaient la famille et * la graisse dans le raccourci `font` ; sans elle, le fait que `label`, * `meta-mono` et `date-mono` soient en mono ne serait plus écrit nulle part. * * rôle graisse taille hauteur famille px * marque --fw-gras --fs-2xl --lh-3xs --font-titre 24 * display --fw-demi --fs-6xl --lh-2xs --font-titre 60 * titre-xl --fw-demi --fs-5xl --lh-xs --font-titre 44 * titre-l --fw-demi --fs-4xl --lh-s --font-titre 30 * titre-m --fw-demi --fs-l --lh-m --font-titre 20 * titre-s --fw-demi --fs-s --lh-m --font-titre 16 * texte-l --fw-normal --fs-xl --lh-3xl --font-texte 21 * texte-m --fw-normal --fs-m --lh-4xl --font-texte 18 * texte-s --fw-normal --fs-s --lh-2xl --font-texte 16 * citation --fw-leger --fs-3xl --lh-xl --font-texte 26 * label --fw-moyenne --fs-3xs --lh-3xs --font-mono 11 * meta-mono --fw-normal --fs-2xs --lh-l --font-mono 12 * date-mono --fw-normal --fs-2xs --lh-l --font-mono 12 * * * Trois crans sont partagés par deux rôles, à dessein — la distinction se fait * alors par la graisse et la famille, pas par la taille : * * --fs-s titre-s (600, titre) et texte-s (400, texte), tous deux 16 * --fs-2xs meta-mono et date-mono, tous deux 12 : la même mono, même graisse, * même hauteur de ligne. Les deux rôles restent distincts par leur * emploi (mention contre date), plus par leur dessin. * * Deux rôles se retrouvent en outre à taille égale à certaines largeurs : * `marque` et `titre-l` à 24 sous 900 px, `titre-m` et `texte-l` à 25 à partir * de 1800 px. Là encore, seules la graisse et la famille les séparent. */ :root { --fs-3xs: 0.6875rem; /* 11 */ --fs-2xs: 0.75rem; /* 12 */ --fs-xs: 0.875rem; /* 14 */ --fs-s: 1rem; /* 16 */ --fs-m: 1.125rem; /* 18 */ --fs-l: 1.25rem; /* 20 */ --fs-xl: 1.3125rem; /* 21 */ --fs-2xl: 1.5rem; /* 24 */ --fs-3xl: 1.625rem; /* 26 */ --fs-4xl: 1.875rem; /* 30 */ --fs-5xl: 2.75rem; /* 44 */ --fs-6xl: 3.75rem; /* 60 */ --lh-3xs: 1; --lh-2xs: 1.02; --lh-xs: 1.04; --lh-s: 1.1; --lh-m: 1.2; --lh-l: 1.4; --lh-xl: 1.55; --lh-2xl: 1.65; --lh-3xl: 1.7; --lh-4xl: 1.75; /* Cinq graisses, aucune autre. Trois familles à porter — un titre demi-gras, un texte régulier, une mono d'étiquette — cinq crans ne sont pas de trop ; un sixième le serait. */ --fw-leger: 300; --fw-normal: 400; --fw-moyenne: 500; --fw-demi: 600; --fw-gras: 700; } /* Sous 640 px, seuls les trois plus grands crans de titrage changent — display, titre-xl, titre-l — sur leur taille ET leur hauteur de ligne. Les crans de texte et de mono ne bougent à aucune largeur. */ @media (max-width: 640px) { :root { --fs-6xl: 2.375rem; /* display 38 */ --lh-2xs: 1.05; --fs-5xl: 1.875rem; /* titre-xl 30 */ --lh-xs: 1.1; --fs-4xl: 1.5rem; /* titre-l 24 */ --lh-s: 1.15; } } /** * Grand écran. Le système de design version 1 fige une seule liste de crans ; * ces deux paliers l'élargissent, à la demande. Ce sont donc les seules tailles * légitimes hors de la liste ci-dessus, et la règle « toute autre taille est un * bug » vaut toujours pour le reste du thème. * * Deux temps plutôt qu'un : mesuré à 1440, où le portable large s'arrête, franc * à 1800, où l'écran de bureau commence. Les seuils sont écrits en dur, une * media query ne peut pas lire une variable CSS. * * Ne bougent à aucune largeur : `titre-s`, `texte-s` et les trois crans mono. * Ce sont les crans d'étiquette, de mention et de méta — les grossir ferait * remonter le bruit au niveau du texte, alors que leur rôle est d'être en * retrait. Les hauteurs de ligne ne changent à aucun de ces deux paliers, seule * la taille grandit. */ @media (min-width: 1440px) { :root { --fs-6xl: 4.25rem; /* display 68 */ --fs-5xl: 3.125rem; /* titre-xl 50 */ --fs-4xl: 2.125rem; /* titre-l 34 */ --fs-l: 1.375rem; /* titre-m 22 */ --fs-xl: 1.4375rem; /* texte-l 23 */ --fs-m: 1.25rem; /* texte-m 20 */ --fs-3xl: 1.8125rem; /* citation 29 */ } } @media (min-width: 1800px) { :root { --fs-6xl: 5rem; /* display 80 */ --fs-5xl: 3.625rem; /* titre-xl 58 */ --fs-4xl: 2.5rem; /* titre-l 40 */ --fs-l: 1.5625rem; /* titre-m 25 */ --fs-xl: 1.5625rem; /* texte-l 25 */ --fs-m: 1.3125rem; /* texte-m 21 */ --fs-3xl: 2.125rem; /* citation 34 */ } } /* ------------------------------------------------------------------ */ /* 3. Espacement, grille, divers */ /* ------------------------------------------------------------------ */ :root { /* Base 4. Entre sections d'une page : 96. Entre blocs d'une section : 48. À l'intérieur d'un bloc : 20 ou 12. Rien d'autre. */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1.25rem; /* 20 */ --space-5: 2rem; /* 32 */ --space-6: 3rem; /* 48 */ --space-7: 4rem; /* 64 */ --space-8: 6rem; /* 96 */ /* Le cadre suit la fenêtre : la marge visible vaut alors exactement `--marge`. Il ne se fige qu'à 1840, au-delà de quoi le papier reprend de part et d'autre — la marge grossit d'elle-même sur très grand écran. */ --max: min(1840px, 100vw); --lecture: 42.5rem; /* 680 — colonne de texte */ --gouttiere: 1.5rem; /* 24 */ --marge: clamp(20px, 3.6vw, 48px); /* marge horizontale fluide, toutes largeurs */ /* Retrait intérieur d'une cellule de grille. Le bandeau d'annonce s'en sert aussi : son texte doit tomber sur celui des cartes, pas sur le bord de la grille. Les deux pièces doivent donc rester d'accord sur cette valeur. */ --pad-cellule: clamp(20px, 2.5vw, 28px); --marge-fixe: 4rem; /* 64 — seulement pour un calcul qui exige un nombre */ --radius: 0; --cible: 2.75rem; /* 44 — hauteur et cible minimales */ --t-survol: 120ms ease-out; --t-deplie: 200ms ease-out; --t-image: 400ms ease-out; --focus: 2px solid var(--accent); --embed-max: 420px; /* embed Instagram, jamais plus large */ --grille-actus: repeat(auto-fit, minmax(max(300px, 31%), 1fr)); /* Les deux ruptures du site, à recopier en dur dans les @media : menu et grille 3→2 à 1024px, grille 2→liste à 640px. */ --rupture-menu: 1024px; --rupture-liste: 640px; --trait: 1px solid var(--encre); --trait-fort: 1px solid var(--filet-fort); /** * Bordure des champs de saisie. Le filet standard (encre à 14 %) ne donne que * 1,3:1 sur le papier : une bordure de champ est un élément d'interface, elle * doit atteindre 3:1 (RGAA 3.2, WCAG 1.4.11). L'encre à 50 % donne 3,3:1. * C'est le seul point où le système de design est complété plutôt que suivi. */ --filet-champ: rgba(28, 26, 22, 0.5); --trait-champ: 1px solid var(--filet-champ); } /* Écran de bureau : la marge grandit, pour que les cartes d'actualité ne grandissent plus avec la fenêtre. Elle part des 48 du palier précédent et atteint 116 vers 1860, sans saut au passage du seuil. Tout ce qui s'aligne sur `--marge` suit : entête, annonce, grille, main, pied. */ @media (min-width: 1800px) { :root { --marge: clamp(48px, calc(48px + (100vw - 1800px) * 1.2), 116px); } } /* ------------------------------------------------------------------ */ /* 4. Jetons de ff_components */ /* ------------------------------------------------------------------ */ /** * `ff_components` est un module partagé formes fluides : il ne connaît pas ce * thème, et n'écrit aucune couleur en dur. Il consomme les vingt-cinq jetons * ci-dessous, chacun avec un repli neutre côté module — de sorte qu'il reste * présentable sans thème. Ici, ils sont branchés sur le système de design. * * La liste doit correspondre aux `var(--ffc-…)` présents dans * web/modules/custom. Rien de spéculatif, rien d'orphelin. * * Les trois jetons du diaporama étaient laissés non définis, au motif que leurs * replis d'alors (`none`, `auto`, `inherit`) suffisaient. Le rendu a démenti : * `auto` laissait chaque média à sa taille de fichier, donc une image de 440px * de large débordait d'un écran de 390px et le fondu faisait sauter la page ; * `inherit` réduisait le glyphe des flèches à 13px sur un fond de sa propre * couleur. Ils sont branchés ici, et le module porte désormais des replis qui * tiennent debout seuls. */ :root { --ffc-fond: var(--papier); --ffc-fond-invert: var(--encre); --ffc-fond-doux: var(--papier-presse); --ffc-filet: var(--filet); --ffc-texte: var(--encre); --ffc-texte-fort: var(--encre); --ffc-texte-faible: var(--meta); --ffc-texte-invert: var(--papier); --ffc-lien: var(--accent); --ffc-accent: var(--accent); --ffc-accent-doux: var(--surlignage); --ffc-accent-doux-invert: var(--encre); --ffc-accent-fort: var(--accent); --ffc-accent-fort-invert: var(--papier); --ffc-accent-45: var(--accent-45); /** * Crans typographiques ouverts aux composants. Le module ne compose pas de * taille : il demande un rôle, le thème répond par le cran du système. Sans * ça, un composant écrirait « 20px » en dur et sortirait des treize crans. */ --ffc-titre-l: var(--titre-l); --ffc-titre-m: var(--titre-m); --ffc-texte-s: var(--texte-s); --ffc-label: var(--label); --ffc-meta-mono: var(--meta-mono); /* Deux crans d'espacement à l'intérieur d'un composant : ce qui va ensemble se serre, ce qui se distingue s'écarte. Un seul cran rendrait tout équidistant, et un bloc équidistant n'a plus de groupes. */ --ffc-espace-serre: var(--space-3); --ffc-espace-groupe: var(--space-4); --ffc-graisse-moyenne: var(--fw-demi); --ffc-espace-bloc: var(--space-6); --ffc-espace-section: var(--space-6); --ffc-espace-large: var(--space-8); /* 96 — espaceur « très grande » */ --ffc-gouttiere: var(--gouttiere); --ffc-duree: 120ms; --ffc-duree-deplie: 200ms; --ffc-courbe: ease-out; /** * Air laissé entre la pile collante (barre d'administration, en-tête, * sous-menu) et le titre qu'une entrée du sous-menu vient chercher : une * gouttière, pour que le titre se lise comme un début de section et non * comme une ligne coincée sous le bandeau. * * En pixels et non en rem : submenu.js lit ce jeton au `parseFloat` d'une * valeur calculée, où une longueur relative ne serait pas résolue. */ --gut: 24px; /* Aucun rayon dans le système : les puces du diaporama sont carrées. */ --ffc-rayon: var(--radius); /* Tailles plafond du composant `medias` (champs/medias/medias.css). */ --ffc-medias-petit: 15rem; /* 240 — vignette */ --ffc-medias-moyen: 26.25rem; /* 420 — couverture, portrait */ --ffc-medias-grand: 40rem; /* 640 — planche pleine colonne */ /** * Diaporama. Une seule hauteur pour tous les médias de tous les modes : c'est * ce qui fait une bande en mode continu, et ce qui empêche la page de sauter * entre deux fondus en mode simple. La borne basse tient sur un téléphone, la * borne haute reste sous la hauteur d'un écran d'ordinateur portable. */ --ffc-slider-hauteur: 25rem; /* 400 — hauteur commune de tous les médias */ --ffc-slider-mesure: var(--lecture); --ffc-taille-fleche: var(--fs-l); --ffc-font-titre: var(--font-titre); /* Le repère de page de validation. Il n'emprunte aucune couleur du système — un échafaudage ne doit pas pouvoir se confondre avec du contenu — mais il se pose à la racine de la page, hors des bandes : la marge horizontale de la page, il ne peut que la demander ici. */ --ffc-font-mono: var(--font-mono); --ffc-marge: var(--marge); /* Mesure de l'accordéon : un cran au-dessus de la colonne de lecture. Le titre d'un accordéon est court, mais son chevron doit rester dans le champ de vision du titre — au-delà, l'œil perd le lien entre les deux. */ --ffc-accordion-mesure: 48.75rem; /* 780 */ /* Mesures du composant présentation : la liste en pile, la colonne centrée. */ --ffc-presentation-liste-mesure: 32.5rem; /* 520 */ --ffc-presentation-centre-mesure: 26.25rem; /* 420 */ /** * Combiné téléphonique, tracé Tabler. Le système n'autorise que trois glyphes * sur le site — Instagram, Facebook, le combiné du pied de page — et les deux * premiers sont posés en SVG dans le gabarit du bloc réseaux. Celui-ci * accompagne une ligne de texte saisie en back-office : il ne peut donc pas * vivre dans le balisage, il est peint en masque depuis une URI de données. * Aucune requête réseau, couleur héritée de `currentColor`. */ --glyphe-telephone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2'/%3E%3C/svg%3E"); }