/* ==========================================================================
Mulieris — feuille de style unique
Direction artistique « esprit WordPress » (décision du 05/10/2026,
docs/RHABILLAGE.md) : fond blanc, logo et menu centrés, titres en
Libre Baskerville, texte en Open Sans, rouge du logo #d12f30 en accent,
beige #d6c8ae comme seule couleur secondaire, losange rouge de 5 px,
filets de 1 px, angles droits, ni ombre ni dégradé.
Référence des composants : docs/COMPONENTS.md · styleguide : /styleguide/
Sommaire
1. Polices
2. Tokens (:root)
3. Reset & base
4. Mise en page (container, section, stack, cluster, grid, split)
5. Composants
5.1 Lien d'évitement 5.14 Étapes de processus
5.2 Pictos 5.15 FAQ
5.3 Typographie éditoriale 5.16 Études de cas, fiche
5.4 Boutons & liens fléchés 5.17 Citation / témoignage
5.5 Motifs (losange, filet, 5.18 Logos partenaires
séparateur, tricolore) 5.19 Média + texte, figures,
galerie
5.20 Emplacement photo
5.6 En-tête, nav., langues 5.21 Bandeau CTA
5.7 Fil d'Ariane 5.22 Texte riche .prose
5.8 Pied de page 5.23 Tableau
5.9 Héros d'accueil 5.24 Tags
5.10 Héros de page 5.25 Visite & accès
5.11 En-tête de section 5.26 Formulaires
5.12 Chiffres clés 5.27 Contenus à valider (.todo)
5.13 Cartes (parcours, service, 5.28 Frise chronologique
article) + liste à pictos 5.29 Sommaire de page
5.30 Article d'actualité
6. Pages
7. Utilitaires
8. Impression
========================================================================== */
/* ==========================================================================
1. Polices — auto-hébergées, fichiers statiques, SIL OFL 1.1 (voir assets/fonts/)
Titres, menu, citations : Libre Baskerville 400 romain et 400 italique.
Texte et interface : Open Sans 400 et 700.
Source : paquets @fontsource 5.3.0 (sous-ensembles latin et latin-ext).
Préchargées (head) : Libre Baskerville 400 et Open Sans 400 « latin »
(38 748 o). L'italique (titres du pied de page, citations, légendes), le
gras et les fichiers latin-ext ne se téléchargent que si la page en a
besoin (unicode-range + usage réel).
Aucune graisse intermédiaire : 500 se rend en 400, 550 à 900 en 700
(font-synthesis: none, jamais de faux gras ni de faux italique). Libre
Baskerville n'existe qu'en 400 : un titre reste en 400 quelle que soit
la graisse demandée.
ORDRE IMPORTANT : pour chaque famille et chaque style, le bloc latin-ext
est déclaré AVANT le bloc latin (comme Google Fonts). Les plages se
chevauchent (œ Œ U+0152-0153, diacritiques U+0304/0308/0329) et c’est la
DERNIÈRE règle déclarée qui est essayée en premier : « cœur », « œuvre »
utilisent ainsi le fichier latin déjà chargé, sans télécharger latin-ext.
========================================================================== */
@font-face {
font-family: "Libre Baskerville";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/libre-baskerville-latin-ext-400-normal.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Libre Baskerville";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/libre-baskerville-latin-400-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: "Libre Baskerville";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("../fonts/libre-baskerville-latin-ext-400-italic.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Libre Baskerville";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("../fonts/libre-baskerville-latin-400-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;
}
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/open-sans-latin-ext-400-normal.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/open-sans-latin-400-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: "Open Sans";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/open-sans-latin-ext-700-normal.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/open-sans-latin-700-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;
}
/* Polices de repli ajustées : limitent le décalage de mise en page pendant le
chargement (CLS). Même méthode que pour les polices précédentes : avec
fontTools, largeur moyenne des glyphes pondérée par la fréquence des
caractères du texte du site (FR + NL) → size-adjust ; ascent et descent
(hhea) de la police cible divisés par size-adjust. Les valeurs de départ
de @capsizecss/metrics 4.3.0 s'en écartent de 0,4 à 0,8 %.
Une famille par police système, car chaque police a ses propres réglages :
Times New Roman / Arial (Windows, macOS, iOS), Noto Serif / Roboto
(Android, mesurées sur les fichiers @fontsource). L'italique de Libre
Baskerville, plus étroit que le romain, a son propre repli. */
@font-face {
font-family: "Libre Baskerville Repli";
font-style: normal;
src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Times");
size-adjust: 126.81%;
ascent-override: 76.5%;
descent-override: 21.29%;
line-gap-override: 0%;
}
@font-face {
font-family: "Libre Baskerville Repli";
font-style: italic;
src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Times Italic");
size-adjust: 113.41%;
ascent-override: 85.53%;
descent-override: 23.81%;
line-gap-override: 0%;
}
@font-face {
font-family: "Libre Baskerville Repli Android";
font-style: normal;
src: local("Noto Serif"), local("NotoSerif");
size-adjust: 107.48%;
ascent-override: 90.25%;
descent-override: 25.12%;
line-gap-override: 0%;
}
@font-face {
font-family: "Libre Baskerville Repli Android";
font-style: italic;
src: local("Noto Serif Italic"), local("NotoSerif-Italic");
size-adjust: 99.31%;
ascent-override: 97.67%;
descent-override: 27.19%;
line-gap-override: 0%;
}
@font-face {
font-family: "Open Sans Repli";
src: local("Arial"), local("ArialMT"), local("Helvetica");
size-adjust: 104.36%;
ascent-override: 102.42%;
descent-override: 28.07%;
line-gap-override: 0%;
}
@font-face {
font-family: "Open Sans Repli Android";
src: local("Roboto"), local("Roboto-Regular");
size-adjust: 105.08%;
ascent-override: 101.72%;
descent-override: 27.88%;
line-gap-override: 0%;
}
/* ==========================================================================
2. Tokens
========================================================================== */
:root {
/* --- 2.1 Palette -------------------------------------------------------
Cinq couleurs (blanc, presque noir, gris, beige, rouge) et deux gris de
texte, relevés sur le site WordPress de Mulieris (05/10/2026).
Ratios de contraste WCAG 2.2 calculés (formule de luminance relative),
texte normal ≥ 4.5:1, grands textes & composants UI ≥ 3:1.
Texte ↓ / fond → blanc #fff · gris #f5f5f5 · beige #d6c8ae
Encre #111111 18.88 · 17.32 · 11.45
Encre-2 #333333 12.63 · 11.59 · 7.66
Encre-3 #666666 5.74 · 5.27 · INTERDIT (3.48)
Rouge #d12f30 5.05 · 4.63 · INTERDIT (3.06)
Rouge-profond #8a1d21 — · — · 5.59 (accent sur beige)
Rouge-texte #a8262a 7.06 · 6.47 · 4.28 (focus, erreurs)
Blanc sur rouge #d12f30 5.05 · sur rouge-texte #a8262a 7.06 (survol des boutons)
Blanc sur beige 1.65 → JAMAIS de texte blanc sur beige.
Ligne-ui #767676 4.54 sur blanc · 4.17 sur gris (bords de champs,
contrôles ; sur beige, 2.75 : y utiliser encre-2)
Succès #2e6a3e 6.47 sur blanc · voile-succès 5.34
Rouge-texte sur voile-erreur #f8e4df 5.76 · encre-3 dessus 4.69
Encre sur todo #ffe27a 14.76 · sur sélection #f4d27a 12.90
Jaune #efb833 1.81 sur blanc → réservé au filet tricolore,
jamais de texte.
--------------------------------------------------------------------- */
--c-blanc: #ffffff; /* fond principal, surfaces (cartes, encadrés) */
--c-gris: #f5f5f5; /* sections alternées, champs de formulaire */
--c-beige: #d6c8ae; /* cartes, bandeaux CTA, emplacements photo */
--c-encre: #111111; /* texte principal */
--c-encre-2: #333333; /* texte secondaire, menu */
--c-encre-3: #666666; /* texte discret (légendes, sous-titres du menu) */
--c-ligne: #efefef; /* filets décoratifs (non porteurs d'information) */
--c-ligne-gris: #dedede; /* filets décoratifs posés sur le gris (#efefef y est invisible : 1.05) */
--c-ligne-ui: #767676; /* bords de composants interactifs (≥ 3:1) */
--c-rouge: #d12f30; /* rouge du logo : accent, liens, boutons, losange */
--c-rouge-texte: #a8262a; /* focus, erreurs, survol des boutons */
--c-rouge-profond: #8a1d21; /* accent de texte sur beige */
--c-jaune: #efb833; /* jaune du logo : filet tricolore seulement */
--c-succes: #2e6a3e;
--c-voile-succes: #e4ecdc;
--c-voile-erreur: #f8e4df;
--c-todo: #ffe27a; /* surlignage des contenus à valider */
--c-selection: #f4d27a;
/* Voiles (transparences) : filets sur beige, ombres de défilement des tableaux */
--voile-encre-14: rgb(17 17 17 / 0.14);
--voile-encre-18: rgb(17 17 17 / 0.18);
/* --- 2.2 Rôles (surchargés par les contextes gris et beige) ---------- */
--fond: var(--c-blanc);
--surface: var(--c-blanc);
--texte: var(--c-encre);
--texte-2: var(--c-encre-2);
--texte-3: var(--c-encre-3);
--accent-texte: var(--c-rouge);
--accent-deco: var(--c-rouge);
--bord: var(--c-ligne);
--bord-ui: var(--c-ligne-ui);
--focus: var(--c-rouge-texte);
--champ: var(--c-gris); /* fond des champs de formulaire (blanc en contexte gris ou beige) */
--btn-primaire: var(--c-rouge); /* fond du bouton primaire (blanc dessus 5.05) */
--btn-primaire-survol: var(--c-rouge-texte); /* blanc dessus 7.06 */
/* --- 2.3 Typographie -------------------------------------------------- */
--font-serif: "Libre Baskerville", "Libre Baskerville Repli", "Libre Baskerville Repli Android", Georgia, serif;
--font-sans: "Open Sans", "Open Sans Repli", "Open Sans Repli Android", Arial, Helvetica, sans-serif;
/* Échelle (fluide de 320 à 1440 px). Libre Baskerville est 32 % plus large
que Cormorant, Open Sans 13 % plus large que Source Sans 3 : l'échelle a
été recalibrée (plan du 05/10/2026). */
--step--2: 0.75rem; /* 12 px : sur-titres, sous-titres du menu, dates */
--step--1: 0.875rem; /* 14 px : notes, fil d'Ariane, pied de page */
--step-0: clamp(1rem, 0.977rem + 0.095vw, 1.0625rem); /* 16 → 17 px : texte courant */
--step-1: clamp(1.0625rem, 1.016rem + 0.19vw, 1.1875rem); /* 17 → 19 px : chapô, h4 */
--step-2: clamp(1.25rem, 1.157rem + 0.381vw, 1.5rem); /* 20 → 24 px : h3, titres de cartes */
--step-3: clamp(1.5rem, 1.361rem + 0.571vw, 1.875rem); /* 24 → 30 px : h2 */
--step-4: clamp(1.625rem, 1.3rem + 1.333vw, 2.5rem); /* 26 → 40 px : h1 ; minimum 26 px :
« socioprofessionnelle » tient à 320 px */
--step-6: clamp(2.25rem, 1.971rem + 1.143vw, 3rem); /* 36 → 48 px : chiffres clés */
--lh-titre: 1.3;
--lh-texte: 1.7;
--tracking-caps: 0.12em; /* sur-titres et petites capitales */
--tracking-menu: 0.03em; /* menu principal en capitales serif */
--tracking-btn: 0.2em; /* boutons (0.14em pour les petits) */
/* --- 2.4 Espacements -------------------------------------------------- */
--space-3xs: 0.25rem; /* 4 px */
--space-2xs: 0.5rem; /* 8 px */
--space-xs: 0.75rem; /* 12 px */
--space-s: 1rem; /* 16 px */
--space-m: 1.5rem; /* 24 px */
--space-l: 2rem; /* 32 px */
--space-xl: 3rem; /* 48 px */
--space-2xl: 4.5rem; /* 72 px */
--space-3xl: 6rem; /* 96 px */
--space-section: clamp(3.5rem, 2.25rem + 5vw, 7.5rem); /* 56 → 120 px entre sections */
--gutter: clamp(1.125rem, 0.6rem + 2.4vw, 2.5rem); /* marges latérales */
/* --- 2.5 Largeurs ------------------------------------------------------ */
--w-prose: 40rem; /* ≈ 70 caractères : texte long */
--w-narrow: 52rem; /* formulaires, FAQ */
--w-content: 75rem; /* 1200 px : largeur utile du WordPress */
--w-wide: 88rem; /* 1408 px */
/* --- 2.6 Divers --------------------------------------------------------
Angles droits partout (WordPress) : aucun border-radius, sauf les
pictos ronds éventuels. Ni ombre ni dégradé décoratif. */
--duree: 180ms;
--ease: cubic-bezier(0.2, 0.6, 0.2, 1);
--losange: 5px; /* motif unique : carré rouge tourné à 45° (menu du WordPress) */
--filet-titre: 3.75rem; /* filet rouge de 60 × 1 px sous certains titres */
}
/* Contexte gris (sections alternées, comme « Exemples de réalisations » du
WordPress) : .section--gris sur une section, .contexte-gris ailleurs.
Rouge sur gris : 4.63 ; encre-3 sur gris : 5.27. */
.contexte-gris,
.section--gris,
.toc {
--fond: var(--c-gris);
--surface: var(--c-blanc);
--champ: var(--c-blanc);
--bord: var(--c-ligne-gris);
}
.contexte-gris,
.contexte-beige {
background-color: var(--fond);
color: var(--texte);
}
/* Contexte beige (cartes de parcours, d'étude de cas et d'article, bandeaux
CTA, emplacements photo) : seuls #111 et #333 y sont lisibles ; le rouge de
texte passe en rouge profond (5.59), les bords de contrôle en encre-2 (7.66).
Le bouton rouge garde son fond : contour 3.06 ≥ 3:1. */
.contexte-beige,
.cta-band,
.audience-card,
.case-card,
.carte,
.photo-slot {
--fond: var(--c-beige);
--surface: var(--c-blanc);
--texte: var(--c-encre);
--texte-2: var(--c-encre-2);
--texte-3: var(--c-encre-2);
--accent-texte: var(--c-rouge-profond);
--accent-deco: var(--c-rouge-profond); /* filet sous le titre, losange */
--bord: var(--voile-encre-14);
--bord-ui: var(--c-encre-2);
--champ: var(--c-blanc);
}
/* ==========================================================================
3. Reset & base
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
color-scheme: light;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
hanging-punctuation: first allow-end last;
scroll-padding-top: var(--space-l);
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
:root:lang(fr) {
quotes: "«\202F" "\202F»" "“" "”";
}
/* Néerlandais (pages /nl/, docs/GLOSSAIRE-NL.md § 2 et § 8).
Guillemets “ ” puis ‘ ’ (aussi sur un bloc lang="nl" isolé, ex. styleguide).
Césure automatique des longs mots composés (« arbeidsmarktbegeleiding »,
« socioprofessionele ») :
- texte courant : à toutes les largeurs, mots de 10 lettres et plus, 4 lettres
au moins de part et d'autre du tiret. Chrome et Safari sous macOS et iOS
ignorent ce seuil (« feb-ruari », « Ander-lecht » constatés) : les noms propres
de 9 lettres et plus sont donc protégés dans le HTML par .nowrap
(GLOSSAIRE-NL § 2) ;
- titres : seulement sous 480 px (mots de 12 lettres et plus, 5 + 5), là où un
composé peut être plus large que l'écran (« Arbeids-marktbegeleiding » à 320 px).
Au-delà, pas de césure : sur un titre en plusieurs lignes, le navigateur
couperait sans nécessité (« confectie-atelier » dans le h1 à 1024 px) ; un
« » dans le HTML si un mot est trop long pour sa colonne.
overflow-wrap: break-word reste le dernier recours contre le débordement ;
- libellés d'interface (boutons, navigation, sur-titres, chiffres clés,
colonne Contact du pied de page, mention « (verplicht) », noms de partenaires
comme « finance&invest.brussels »…) : jamais de césure automatique ;
- textes centrés de deux ou trois lignes (texte du bandeau d'appel, grande
citation .quote--large, dont le texte est dans des ) : jamais de césure non
plus (« samen-werkt », « podium-kostuums » y étaient disgracieux).
Rien à annuler côté français : la seule règle propre au français (guillemets)
est limitée à :lang(fr).
Spécificité (0,1,0) partout : la liste des exceptions, placée en dernier, l'emporte. */
:root:lang(nl),
.quote:lang(nl),
q:lang(nl) {
quotes: "“" "”" "‘" "’";
}
:where(p, li, dd, dt, figcaption, blockquote, td, th, caption, legend, label, summary):lang(nl) {
-webkit-hyphens: auto;
hyphens: auto;
hyphenate-limit-chars: 10 4 4;
}
:where(h1, h2, h3, h4, .h1, .h2, .h3, .h4, .display):lang(nl) {
-webkit-hyphens: manual;
hyphens: manual;
overflow-wrap: break-word;
}
@media (max-width: 29.99em) {
:where(h1, h2, h3, h4, .h1, .h2, .h3, .h4, .display):lang(nl) {
-webkit-hyphens: auto;
hyphens: auto;
hyphenate-limit-chars: 12 5 5;
}
}
:where(
.btn, .link-arrow, .nav-toggle, .site-nav *, .lang-switch *, .breadcrumb *,
.eyebrow, .made-in, .chiffre *, .audience-card__eyebrow, .site-footer__title,
.site-footer__nav *, .site-footer__legal *, .case-sheet__title, .case-sheet__row dt,
.visit__title, .contact-list__label, .toc__title, .tag, thead th,
.site-footer__list *, .field__req, .logo-grid__name, .cta-band__text,
.quote--large .quote__text p
):lang(nl) {
-webkit-hyphens: manual;
hyphens: manual;
}
/* Passages d'une autre langue dans une page NL (titres d'articles en français,
« made in Brussels ») : pas de césure, comme sur les pages FR. Sans cette règle,
ils héritent de la césure du paragraphe NL (« Ander-lecht » dans un titre RTBF). */
:where(:lang(nl)) :not(:lang(nl)) {
-webkit-hyphens: manual;
hyphens: manual;
}
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--fond);
color: var(--texte);
font-family: var(--font-sans);
font-size: var(--step-0);
font-weight: 400;
line-height: var(--lh-texte);
font-kerning: normal;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
main {
flex: 1 0 auto;
display: block;
}
main:focus {
outline: none;
}
h1, h2, h3, h4, h5, h6,
p, ul, ol, dl, dd, figure, blockquote, address, fieldset, pre {
margin: 0;
}
/* Titres : Libre Baskerville 400 (seule graisse servie ; le WordPress
déclarait 500 mais rendait en 400), noirs, interligne 1,3 (grande hauteur
d'x : 0,53 em). Chiffres alignés par défaut dans cette police. */
h1, h2, h3, h4 {
font-family: var(--font-serif);
font-weight: 400;
line-height: var(--lh-titre);
letter-spacing: 0;
text-wrap: balance;
font-variant-numeric: lining-nums;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
h5, h6 { font-size: var(--step-0); font-weight: 700; }
p, li, dd, figcaption, blockquote {
text-wrap: pretty;
}
ul[role="list"],
ol[role="list"] {
list-style: none;
padding: 0;
}
img,
picture,
svg,
video {
display: block;
max-width: 100%;
}
img {
height: auto;
font-style: italic; /* texte alternatif lisible si l'image manque */
background-color: var(--c-gris);
}
address {
font-style: normal;
}
strong, b {
font-weight: 700;
}
small {
font-size: var(--step--1);
}
code,
kbd,
samp {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 0.86em;
}
abbr[title] {
text-decoration: underline dotted;
text-underline-offset: 0.2em;
}
hr {
border: 0;
border-top: 1px solid var(--bord);
margin: var(--space-xl) 0;
}
a {
color: var(--accent-texte);
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
transition: color var(--duree) var(--ease), text-decoration-color var(--duree) var(--ease);
}
/* Liens : rouge du logo sur blanc (5.05) et sur gris (4.63), rouge profond
sur beige (rôle --accent-texte). Survol : encre, soulignement épaissi. */
a:hover {
color: var(--texte);
text-decoration-thickness: 2px;
}
/* Un numéro de téléphone ne se coupe jamais (« +32 488 78 24 / 18 » à 1024 px) */
a[href^="tel:"] {
white-space: nowrap;
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
letter-spacing: inherit;
}
button {
cursor: pointer;
}
[hidden] {
display: none !important;
}
/* Focus visible : anneau de 3 px #a8262a, décalé de 3 px, jamais supprimé
(7.06 sur blanc, 6.47 sur gris, 4.28 sur beige) */
:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 3px;
}
:focus:not(:focus-visible) {
outline: none;
}
::selection {
background: var(--c-selection);
color: var(--c-encre);
}
:target {
scroll-margin-top: var(--space-l);
}
/* ==========================================================================
4. Mise en page
========================================================================== */
/* Conteneur centré */
.container {
width: 100%;
max-width: calc(var(--w-content) + 2 * var(--gutter));
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--wide { max-width: calc(var(--w-wide) + 2 * var(--gutter)); }
.container--narrow { max-width: calc(var(--w-narrow) + 2 * var(--gutter)); }
.container--prose { max-width: calc(var(--w-prose) + 2 * var(--gutter)); }
/* Section : rythme vertical entre blocs de page */
.section {
padding-block: var(--space-section);
background: var(--fond);
color: var(--texte);
}
/* Alternance blanc / gris : .section (fond blanc) et .section--gris (#f5f5f5,
rôles en section 2). Plus de section sombre. Sur une page, on alterne les
deux fonds ; le bandeau CTA beige ferme la page. */
.section--tight { padding-block: calc(var(--space-section) * 0.6); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
/* Deux sections de même fond se suivent : on évite le double espacement */
.section:not(.section--gris) + .section:not(.section--gris),
.section--gris + .section--gris {
padding-top: 0;
}
/* Pile : espacement vertical régulier entre enfants.
L'écart est fixé par le sélecteur du parent (pas par une propriété
personnalisée héritée) : une pile imbriquée garde son propre écart, et un
enfant .stack--s d'une .stack--xl reçoit bien l'écart de son parent. */
.stack > * + * { margin-block-start: var(--space-s); }
.stack--xs > * + * { margin-block-start: var(--space-2xs); }
.stack--s > * + * { margin-block-start: var(--space-xs); }
.stack--l > * + * { margin-block-start: var(--space-l); }
.stack--xl > * + * { margin-block-start: var(--space-xl); }
/* Grappe : éléments en ligne qui passent à la ligne */
.cluster {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--cluster-gap, var(--space-xs) var(--space-s));
}
.cluster--between { justify-content: space-between; }
.cluster--center { justify-content: center; }
.cluster--l { --cluster-gap: var(--space-s) var(--space-l); }
/* Grille : colonnes automatiques ou fixes */
.grid {
display: grid;
gap: var(--grid-gap, var(--space-l));
grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min, 17rem)), 1fr));
}
@media (min-width: 40em) {
.grid--2,
.grid--3,
.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 3 colonnes sur 2 (640–895 px) : le dernier élément seul prend toute la ligne (pas de 2 + 1 bancal) */
@media (min-width: 40em) and (max-width: 55.99em) {
.grid--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 56em) {
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 4 colonnes seulement dès 1200 px : à 1024 px, 4 cartes de 215 px ne laissaient
que ≈ 150 px au texte (titres sur 3 lignes, flèches seules à la ligne) */
@media (min-width: 75em) {
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Vignettes : petite galerie, deux par ligne dès le mobile */
.grid--vignettes {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-s);
}
@media (min-width: 40em) {
.grid--vignettes { gap: var(--space-m); }
}
/* Vignettes sur 4 colonnes (Réalisations, #artistes) : 2 par ligne sur mobile, 4 dès 768 px
(évite une colonne de 4 grands emplacements). Sous 1200 px, les emplacements photo sont étroits
(160–230 px) : marge intérieure réduite et consigne de préproduction coupée à 6 lignes. */
@media (min-width: 48em) {
.grid--4.grid--vignettes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 74.99em) {
.grid--4.grid--vignettes .photo-slot { padding: var(--space-s); }
.grid--4.grid--vignettes .photo-slot[data-todo]::before {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;
overflow: hidden;
letter-spacing: 0.04em;
}
}
/* Split : deux colonnes éditoriales (une seule sur mobile).
minmax(0, 1fr) : un contenu large (tableau défilant) ne fait pas déborder la page */
.split {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--split-gap, clamp(2rem, 1rem + 4vw, 5rem));
}
@media (min-width: 56em) {
.split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.split--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--4-8 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.split--top { align-items: start; }
.split--reverse > :first-child { order: 2; }
}
/* ==========================================================================
5. Composants
========================================================================== */
/* --- 5.1 Lien d'évitement ----------------------------------------------- */
.skip-link {
position: absolute;
top: var(--space-xs);
left: var(--space-xs);
z-index: 100;
padding: var(--space-xs) var(--space-s);
background: var(--c-encre);
color: var(--c-blanc);
font-weight: 700;
text-decoration: none;
transform: translateY(-200%);
}
.skip-link:focus {
transform: none;
color: var(--c-blanc);
outline-color: var(--c-rouge-texte); /* 7,06 sur blanc */
}
/* --- 5.2 Pictos ---------------------------------------------------------- */
.icon {
width: 1.25em;
height: 1.25em;
flex: none;
display: inline-block;
vertical-align: -0.25em;
overflow: visible;
}
.icon--s { width: 1rem; height: 1rem; }
.icon--m { width: 1.5rem; height: 1.5rem; }
.icon--l { width: 2.25rem; height: 2.25rem; }
.icon--xl { width: 3rem; height: 3rem; }
.icon--accent { color: var(--accent-deco); }
/* --- 5.3 Typographie éditoriale ------------------------------------------ */
/* Sur-titre : Open Sans 700, 12 px, capitales espacées, gris #666 (5.74 sur
blanc, 5.27 sur gris ; #333 sur beige par le rôle --texte-3).
Losange rouge devant : modificateur --losange, à réserver aux ouvertures
fortes (héros, bandeau CTA), pas à chaque section. */
.eyebrow {
display: flex;
align-items: flex-start;
gap: 0.75em;
font-family: var(--font-sans);
font-size: var(--step--2);
font-weight: 700;
line-height: 1.4;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--texte-3);
text-wrap: balance;
}
.eyebrow--losange::before {
content: "";
flex: none;
width: var(--losange);
height: var(--losange);
margin: calc(0.7em - var(--losange) / 2) 0.1em 0; /* centre de la 1re ligne (line-height 1.4) */
background-color: var(--accent-deco);
transform: rotate(45deg);
}
.eyebrow--muted { color: var(--texte-3); }
/* Chapô */
.lead {
font-size: var(--step-1);
line-height: 1.5;
color: var(--texte-2);
max-width: 34rem; /* ≈ 60 caractères par ligne */
}
/* Classes de titre (quand l'élément HTML ne correspond pas au rendu voulu) :
même rendu que h1–h4 (approche, équilibrage des lignes), sur un p ou un h d'un autre niveau */
.h1, .h2, .h3, .h4, .display { font-variant-numeric: lining-nums; text-wrap: balance; }
.h1, .h2, .h3, .h4 { font-family: var(--font-serif); font-weight: 400; line-height: var(--lh-titre); }
.h1 { font-size: var(--step-4); }
.h2 { font-size: var(--step-3); }
.h3 { font-size: var(--step-2); }
.h4 { font-size: var(--step-1); }
.display { font-family: var(--font-serif); font-size: var(--step-4); font-weight: 400; line-height: var(--lh-titre); }
/* Accent dans un titre (« l’insertion socioprofessionnelle », « made in
Brussels ») : en romain rouge, comme les titres rouges du WordPress
(5.05 sur blanc ; rouge profond sur beige). .accent-italique garde son
nom historique. */
.accent-italique,
h1 em, h2 em, .h1 em, .h2 em, .display em {
font-style: normal;
font-weight: inherit;
color: var(--accent-texte);
}
/* Légende : Libre Baskerville italique (fichier déjà chargé pour les titres
du pied de page) */
.caption {
font-family: var(--font-serif);
font-style: italic;
font-size: 0.9375rem;
line-height: 1.5;
color: var(--texte-2);
}
.note {
font-size: var(--step--1);
color: var(--texte-3);
}
/* --- 5.4 Boutons & liens fléchés ----------------------------------------- */
/* Boutons : style du bouton « Envoyer » du WordPress. Open Sans 400, 15 px,
capitales espacées de 0,2em, angles droits, 48 px de haut (44 px en petit).
Pas de survol animé : changement de couleur seulement. */
.btn {
--btn-bg: transparent;
--btn-fg: var(--texte);
--btn-bd: var(--texte);
--btn-bd-bas: var(--btn-bd);
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.625rem;
min-height: 3rem;
padding: 0.625rem 1.5rem;
border: 1px solid var(--btn-bd);
border-bottom-color: var(--btn-bd-bas);
border-radius: 0;
background: var(--btn-bg);
color: var(--btn-fg);
font-family: var(--font-sans);
font-size: 0.9375rem;
font-weight: 400;
line-height: 1.2;
letter-spacing: var(--tracking-btn);
text-transform: uppercase;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color var(--duree) var(--ease), color var(--duree) var(--ease), border-color var(--duree) var(--ease);
}
.btn:hover {
color: var(--btn-fg);
text-decoration: none;
}
.btn .icon {
width: 1.15rem;
height: 1.15rem;
}
/* Primaire : fond rouge du logo, texte blanc (5.05), filet bas noir de 3 px.
Survol #a8262a (blanc dessus : 7.06 ; le survol #ed6465 du WordPress ne
faisait que 3.18). Sur beige, le contour rouge fait 3.06 (≥ 3:1). */
.btn--primary {
--btn-bg: var(--btn-primaire);
--btn-fg: var(--c-blanc);
--btn-bd: var(--btn-primaire);
--btn-bd-bas: var(--c-encre);
border-bottom-width: 3px;
}
.btn--primary:hover {
--btn-bg: var(--btn-primaire-survol);
--btn-bd: var(--btn-primaire-survol);
}
/* Secondaire : contour encre de 1 px, s'inverse au survol */
.btn--secondary:hover {
--btn-bg: var(--texte);
--btn-fg: var(--fond);
--btn-bd: var(--texte);
}
.btn--small {
min-height: 2.75rem;
padding: 0.5rem 1.125rem;
font-size: 0.875rem;
letter-spacing: 0.14em;
}
.btn--block {
width: 100%;
}
@media (max-width: 29.99em) {
.btn--block-mobile { width: 100%; }
}
.btn[disabled],
.btn[aria-disabled="true"] {
opacity: 0.55;
cursor: not-allowed;
}
/* Lien fléché (« En savoir plus → »). En inline-block (pas inline-flex) : le
libellé peut passer à la ligne. Attention : l'espace avant le SVG et le SVG
en ligne lui-même sont deux points de coupure (Chrome coupe aussi entre un
mot et un SVG) : la flèche peut finir seule à la ligne. Si le libellé peut
passer à la ligne, envelopper le dernier mot et le picto :
mot */
.link-arrow {
display: inline-block;
font-weight: 700;
color: var(--accent-texte);
text-decoration-line: underline;
text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
text-decoration-thickness: 1px;
text-underline-offset: 0.3em;
}
.link-arrow .icon {
width: 1.15em;
height: 1.15em;
margin-left: 0.2em;
vertical-align: -0.22em;
}
.link-arrow:hover {
color: var(--accent-texte);
text-decoration-color: currentColor;
}
.link-arrow--muted { color: var(--texte); }
/* --- 5.5 Motifs --------------------------------------------------------- */
/* Losange rouge de 5 px (motif unique, repris du menu du WordPress) :
, ou ::before d'un composant
(sur-titre, menu, sélecteur de langue). */
.losange {
display: inline-block;
width: var(--losange);
height: var(--losange);
background: var(--accent-deco);
transform: rotate(45deg);
vertical-align: middle;
}
/* Filet rouge de 60 × 1 px sous un titre centré (titres du pied de page,
bandeau CTA) : .filet-titre sur le titre */
.filet-titre::after {
content: "";
display: block;
width: var(--filet-titre);
height: 1px;
margin: 0.9rem auto 0;
background: var(--accent-deco);
}
/* Séparateur : filet de 1 px (--bord : #efefef sur blanc, #dedede sur gris) interrompu au centre par le losange
rouge. Remplace les piqûres (.stitch) et l'ornement piqué.
(le hr garde son rôle de séparateur thématique pour les lecteurs d'écran).
Le même rendu sert aux hr de .prose (contenu saisi). Filets dessinés en
dégradés, losange en ::before (pseudo-élément pris en charge sur hr par
Chrome, Firefox et Safari). */
.separateur,
.prose hr {
position: relative;
display: block;
height: 7px;
margin: var(--space-xl) 0;
border: 0;
overflow: visible;
background:
linear-gradient(var(--bord), var(--bord)) left center / calc(50% - 1rem) 1px no-repeat,
linear-gradient(var(--bord), var(--bord)) right center / calc(50% - 1rem) 1px no-repeat;
}
.separateur::before,
.prose hr::before {
content: "";
position: absolute;
top: 1px;
left: calc(50% - var(--losange) / 2);
width: var(--losange);
height: var(--losange);
background: var(--accent-deco);
transform: rotate(45deg);
}
/* Filet tricolore « Made in Belgium » : seul usage du jaune, réservé à la
mention « Made in Brussels » de l'accueil (le logo porte déjà le sien) */
.tricolore {
display: inline-block;
width: 4.5rem;
height: 3px;
background: linear-gradient(90deg, var(--c-encre) 0 33.34%, var(--c-jaune) 0 66.67%, var(--c-rouge) 0);
vertical-align: middle;
}
.made-in {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--step--2);
font-weight: 700;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--texte-2);
}
/* --- 5.6 En-tête, navigation & sélecteur de langue ----------------------- */
/* En-tête centré, comme le WordPress (partial header ; docs/COMPONENTS.md § 6.2).
Rangée du logo à 3 zones, puis le menu centré en 2e rangée :
- dès 75em (1200 px) : FR | NL à gauche, logo de 260 px au centre, zone
droite vide (même largeur que la gauche) ; menu en capitales serif avec
sous-titres ;
- en dessous : FR | NL en haut à droite, puis « Menu » | logo de 116 px | vide
(« Menu » seulement si JS est actif ; sans JS, le menu reste visible en
dessous, libellés seuls).
Le bouton devis de l'en-tête (et son doublon du menu mobile) est retiré
depuis le 07/10/2026, à la demande de Mouad : les appels au devis restent
dans les pages et sur Contact.
Seuil du menu complet : 75em (1200 px), comme main.js et l'attribut sizes
du logo (partials/header.*.html). Menu à 7 rubriques depuis le 07/10/2026
(« À propos » ajouté) : mesuré dans Chrome, il fait 1057 px en FR et environ
1082 px en NL ; à 1120 px il débordait de la zone de contenu (1047 px),
à 1200 px il y tient (1123 px). */
.site-header {
position: relative;
z-index: 20;
background: var(--c-blanc);
border-bottom: 1px solid var(--c-ligne);
}
.site-header__inner {
display: grid;
/* côtés extensibles mais jamais plus étroits que leur contenu : le logo
reste centré tant que la place le permet, et rétrécit en dernier */
grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);
/* la 3e colonne reste vide (bouton devis de l'en-tête retiré le 07/10/2026) :
elle fait contrepoids à « Menu » pour garder le logo centré */
grid-template-areas:
"langues langues langues"
"menu logo .";
align-items: center;
gap: 0.25rem var(--space-xs); /* l'écart vertical sépare le losange de FR | NL de la rangée du logo */
padding-block: 0.375rem 0.75rem; /* 6 px : place pour l'anneau de focus sous le bord de l'écran */
}
.site-header__brand {
grid-area: logo;
justify-self: center;
display: block;
min-width: 0;
}
.site-header__brand img {
width: 116px;
max-width: 100%;
height: auto;
background: none;
}
/* Bouton menu (mobile, uniquement si JS actif).
Dans le HTML, c'est un lien vers le menu du pied de page
() : si main.js ne se charge pas
(erreur, bloqueur, cache), « Menu » mène quand même à tous les liens.
main.js le transforme en bouton (role, aria-expanded, aria-controls). */
.nav-toggle {
grid-area: menu;
justify-self: start;
display: none;
align-items: center;
gap: 0.4rem;
min-height: 2.75rem;
padding: 0.5rem 0.75rem;
border: 1px solid var(--c-ligne-ui);
background: var(--c-blanc);
color: var(--c-encre);
font-size: 0.8125rem;
font-weight: 700;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
}
.nav-toggle:hover {
color: var(--c-encre);
border-color: var(--c-encre);
}
.nav-toggle .icon {
width: 1.35rem;
height: 1.35rem;
color: var(--c-rouge);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__ouvrir,
.nav-toggle:not([aria-expanded="true"]) .nav-toggle__fermer {
display: none;
}
/* Navigation principale : libellé (serif, capitales) + sous-titre gris.
Une espace réelle sépare les deux span dans le HTML : nom accessible
« Projets Nos créations », qui commence par le libellé visible (2.5.3). */
.site-nav__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0 var(--space-s);
margin: 0 auto;
padding-block: 0 var(--space-2xs);
list-style: none;
}
.site-nav__link {
position: relative;
display: inline-block;
padding-block: 0.625rem;
color: var(--c-encre-2);
text-decoration: none;
}
.site-nav__label {
font-family: var(--font-serif);
font-size: 0.9375rem;
line-height: 1.4;
letter-spacing: var(--tracking-menu);
text-transform: uppercase;
color: var(--c-encre-2); /* 12,63 sur blanc */
transition: color var(--duree) var(--ease);
}
.site-nav__sub {
font-size: var(--step--2);
font-weight: 400;
line-height: 1.3;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--c-encre-3); /* 5,74 sur blanc (le #aeafb1 du WordPress : 2,2) */
display: none; /* sans JS, sous 75em : libellés seuls, en ligne sous le logo */
}
.site-nav__link:hover .site-nav__label,
.site-nav__link[aria-current] .site-nav__label {
color: var(--c-rouge); /* 5,05 sur blanc */
}
/* Page active : couleur ET soulignement (jamais la couleur seule) */
.site-nav__link[aria-current="page"] .site-nav__label {
text-decoration: underline 1px var(--c-rouge);
text-underline-offset: 0.35em;
}
@media (scripting: enabled) and (max-width: 74.99em) {
.nav-toggle {
display: inline-flex;
}
.site-nav {
display: none;
}
.site-header[data-menu="ouvert"] .site-nav {
display: block;
border-top: 1px solid var(--c-ligne);
}
.site-header[data-menu="ouvert"] .site-nav__list {
flex-direction: column;
align-items: stretch;
gap: 0;
padding-block: 0;
}
/* filet entre les entrées ; sous la dernière, le filet de l'en-tête ferme la liste */
.site-header[data-menu="ouvert"] .site-nav__list > li:not(:last-child) {
border-bottom: 1px solid var(--c-ligne);
}
/* Accordéon du WordPress : libellé en casse normale, sous-titre gris dessous */
.site-header[data-menu="ouvert"] .site-nav__link {
display: grid;
gap: 0.125rem;
padding: 0.75rem var(--space-xs);
}
.site-header[data-menu="ouvert"] .site-nav__label {
font-size: 1.0625rem;
letter-spacing: 0;
text-transform: none;
color: var(--c-encre);
}
.site-header[data-menu="ouvert"] .site-nav__sub {
display: block;
}
/* entrée active : rouge sur gris (4,63), soulignée */
.site-header[data-menu="ouvert"] .site-nav__link[aria-current] {
background: var(--c-gris);
}
.site-header[data-menu="ouvert"] .site-nav__link[aria-current] .site-nav__label,
.site-header[data-menu="ouvert"] .site-nav__link:hover .site-nav__label {
color: var(--c-rouge);
}
}
/* Moins de 400 px : bouton « Menu » aminci et écarts resserrés */
@media (max-width: 24.99em) {
.site-header__inner {
column-gap: var(--space-2xs);
}
.nav-toggle {
padding-inline: 0.5rem;
}
}
/* Moins de 360 px : « Menu » ne garde que son picto (le mot reste lu par les
lecteurs d'écran) */
@media (max-width: 22.49em) {
.nav-toggle__texte {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
@media (min-width: 75em) {
.site-header__inner {
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
grid-template-areas: "langues logo .";
align-items: start;
padding-block: 1.5rem 0.5rem;
}
.site-header__brand img {
width: 260px; /* 94 px de haut avec le logo de 2017 (sur le WordPress : 269 × 101) */
}
.site-nav__list {
flex-wrap: nowrap;
gap: 0;
padding-block: 0.25rem 0.75rem;
}
/* losange rouge de 5 px au-dessus de chaque entrée ; libellé et sous-titre
centrés (cible de 59 px de haut) */
.site-nav__link {
display: grid;
justify-items: center;
gap: 0.2rem;
padding: 0.875rem 1rem 0.25rem;
text-align: center;
}
.site-nav__link::before {
content: "";
position: absolute;
top: 0.125rem;
left: 50%;
width: var(--losange);
height: var(--losange);
margin-left: calc(var(--losange) / -2);
background: var(--c-rouge);
transform: rotate(45deg);
}
.site-nav__label,
.site-nav__sub {
display: block;
white-space: nowrap;
}
}
/* Écrans larges mais bas (1366 × 657, 1280 × 650…) : logo de 200 px et rangées
resserrées, le contenu remonte de 40 px */
@media (min-width: 75em) and (max-height: 50em) {
.site-header__inner {
padding-block: 1rem 0.25rem;
}
.site-header__brand img {
width: 200px;
}
.site-nav__list {
padding-block: 0.125rem 0.5rem;
}
}
/* Sélecteur de langue FR | NL (partial header ; docs/COMPONENTS.md § 6.2 bis).
Dans la rangée du logo, à gauche dès 75em ; en haut à droite en dessous.
Langue courante : non cliquable, encre, graisse
700 et losange rouge dessous (repère de forme, pas seulement de couleur) ;
autre langue : lien (lang, hreflang) en #666 (5,74). Cibles de 40 × 28 px
(≥ 24 px, WCAG 2.5.8). Le href du lien vient du jeton {{alt:xx}} du partial
(page équivalente, tools/lib/partials.mjs). */
.lang-switch {
grid-area: langues;
justify-self: end;
}
.lang-switch__list {
display: flex;
align-items: center;
margin: 0 -0.5rem 0 0; /* la dernière lettre s'aligne sur le bord du conteneur */
padding: 0;
list-style: none;
}
.lang-switch__list > li {
display: flex;
align-items: center;
}
/* filet vertical entre les langues (décoratif) */
.lang-switch__list > li + li::before {
content: "";
width: 1px;
height: 0.875rem;
background-color: var(--c-ligne-ui);
}
.lang-switch__link,
.lang-switch__current {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.5rem;
min-height: 1.75rem;
padding: 0 0.5rem;
font-size: 0.8125rem;
font-weight: 700;
line-height: 1;
letter-spacing: var(--tracking-caps);
text-decoration: none;
}
.lang-switch__link {
color: var(--c-encre-3);
}
.lang-switch__link:hover {
color: var(--c-encre);
text-decoration: underline;
text-underline-offset: 0.3em;
}
.lang-switch__current {
color: var(--c-encre);
}
.lang-switch__current::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: var(--losange);
height: var(--losange);
margin-left: calc(var(--losange) / -2 - 0.06em); /* centré sous les lettres (interlettrage) */
background: var(--c-rouge);
transform: rotate(45deg);
}
@media (min-width: 75em) {
.lang-switch {
justify-self: start;
margin-top: 0.75rem;
}
.lang-switch__list {
margin: 0 0 0 -0.5rem; /* la première lettre s'aligne sur le bord du conteneur */
}
}
/* Rappel dans le pied de page (.site-footer__legal) : lien vers l'autre langue */
.site-footer__langue {
font-weight: 700;
}
/* --- 5.7 Fil d'Ariane ------------------------------------------------------ */
/* Open Sans 14 px #666, séparateur « / » #767676 (décoratif), page courante
en encre et en gras. Aligné à gauche au-dessus du titre. */
.breadcrumb {
font-size: var(--step--1);
color: var(--texte-3);
}
.breadcrumb ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 0.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.breadcrumb li {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.breadcrumb li + li::before {
content: "/";
color: var(--c-ligne-ui);
}
.breadcrumb a {
display: inline-block;
padding-block: 0.3rem;
color: var(--texte-2);
text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
.breadcrumb a:hover {
color: var(--accent-texte);
text-decoration-color: currentColor;
}
.breadcrumb [aria-current="page"] {
color: var(--texte);
font-weight: 700;
}
/* --- 5.8 Pied de page ------------------------------------------------------ */
/* Comme le WordPress : fond blanc, filet haut pâle, 4 colonnes (logo | Menu |
Contact | Visites), encadrés à filet de 1 px, titres en Libre Baskerville
italique soulignés d'un filet rouge de 60 × 1 px. Bas de page centré.
Le menu porte id="menu-pied" : cible du lien « Menu » de l'en-tête sans JS. */
.site-footer {
--fond: var(--c-blanc);
position: relative;
margin-top: auto;
padding-block: 4.375rem 0; /* 70 px, comme le WordPress */
border-top: 1px solid var(--c-ligne);
background: var(--c-blanc);
color: var(--c-encre);
}
.site-footer__grid {
display: grid;
gap: var(--space-l);
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
@media (min-width: 40em) {
.site-footer__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* 4 colonnes dès 1200 px (à 1024 px, l'encadré Contact n'aurait que 180 px utiles) */
@media (min-width: 75em) {
.site-footer__grid {
grid-template-columns: 1.1fr 1fr 1fr 1fr;
gap: var(--space-l) 1.875rem;
}
}
.site-footer__logo,
.brand-logo {
display: inline-block;
}
.site-footer__brand img,
.brand-logo img {
width: 15rem; /* 240 px */
max-width: 100%;
height: auto;
background: none;
}
.site-footer__tagline {
margin-top: var(--space-s);
max-width: 20rem;
font-family: var(--font-serif);
font-size: 0.9375rem;
font-style: italic;
line-height: 1.6;
color: var(--c-encre-2);
}
/* Encadrés (Menu, Contact, Visites) */
.site-footer__col {
padding: 1.875rem 1.25rem 1.25rem;
border: 1px solid var(--c-ligne);
font-size: var(--step--1);
line-height: 1.8;
}
.site-footer__title {
margin-bottom: 1.5rem;
font-family: var(--font-serif);
font-size: 1.125rem;
font-style: italic;
font-weight: 400;
line-height: 1.2;
text-align: center;
color: var(--c-encre);
}
.site-footer__title::after {
content: "";
display: block;
width: var(--filet-titre);
height: 1px;
margin: 0.95rem auto 0;
background: var(--c-rouge);
}
.site-footer__col > * + * {
margin-top: var(--space-xs);
}
.site-footer__col > .site-footer__title + * {
margin-top: 0;
}
.site-footer__muted {
color: var(--c-encre-3);
}
/* Menu du pied de page : Libre Baskerville 16 px, centré, séparé par des filets */
.site-footer__menu {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.site-footer__menu li + li {
border-top: 1px solid var(--c-ligne);
}
.site-footer__menu a {
display: block;
padding-block: 0.5rem;
font-family: var(--font-serif);
font-size: 1rem;
line-height: 1.5;
text-decoration: none;
}
.site-footer__menu a:hover,
.site-footer__menu a[aria-current] {
color: var(--c-rouge);
text-decoration: underline;
text-decoration-thickness: 1px;
}
/* Coordonnées, Facebook : picto rouge + texte */
.site-footer__list {
display: grid;
gap: 0.35rem;
margin: 0;
padding: 0;
list-style: none;
}
.site-footer__list li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
}
.site-footer__list .icon {
width: 1.1rem;
height: 1.1rem;
margin-top: 0.3rem;
color: var(--c-rouge);
}
/* picto « lien externe » à l'intérieur d'un lien (Facebook) */
.site-footer__list a .icon {
display: inline-block;
width: 0.95em;
height: 0.95em;
margin: 0 0 0 0.2em;
vertical-align: -0.1em;
color: currentColor;
}
.site-footer a {
color: var(--c-encre);
text-decoration-color: color-mix(in srgb, var(--c-encre) 35%, transparent);
}
.site-footer a:hover {
color: var(--c-rouge);
text-decoration-color: currentColor;
}
.site-footer__bottom {
display: grid;
justify-items: center;
gap: var(--space-2xs);
margin-top: 2.5rem;
padding-block: 2.5rem;
border-top: 1px solid var(--c-ligne);
font-size: var(--step--1);
text-align: center;
color: var(--c-encre-3);
}
.site-footer__legal {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.25rem var(--space-m);
margin: 0;
padding: 0;
list-style: none;
}
.site-footer__legal a {
display: inline-block;
padding-block: 0.2rem;
}
/* --- 5.9 Héros d'accueil ---------------------------------------------------- */
/* Version figée de la diapositive du WordPress (aucun carrousel) : une photo
panoramique sur toute la largeur du conteneur, puis une boîte blanche qui
remonte sur le bas de la photo (sur-titre à losange, h1, boutons) et le
chapô à sa droite. Le texte n'est jamais posé sur la photo : la boîte a son
propre fond blanc (#111 dessus : 18.88).
Ratios : 16:9 sous 480 px, 3:2 de 480 à 639 px, 2:1 de 640 à 895 px (en 3:2,
les boutons sortaient du premier écran à 895 × 800), 20:7 dès 896 px
(1200 × 420 à 1440 px), 30:7 sur les écrans bas. La boîte déborde de 9 rem (5 rem sur
écran bas). Cadrage des photos : sujet hors du quart inférieur gauche (sous
la boîte) ; .cadrage-haut si le visage est en haut.
![]()
sur-titre, h1.hero-home__title, .hero-home__actions
…
*/
.hero-home {
padding-block: var(--space-m) clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
.hero-home__media {
margin: 0;
}
.hero-home__media img,
.hero-home__media .photo-slot {
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
}
.hero-home__bas {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-m);
}
.hero-home__boite {
position: relative; /* au-dessus de la photo quand elle déborde */
display: grid;
justify-items: start;
gap: var(--space-s);
padding-top: var(--space-m);
background: var(--fond);
}
.hero-home__title {
font-family: var(--font-serif);
font-size: var(--step-4); /* 26 → 40 px */
font-weight: 400;
line-height: var(--lh-titre);
text-wrap: balance;
}
/* « l’insertion socioprofessionnelle » : romain rouge (5.05 sur blanc) */
.hero-home__title em {
font-style: normal;
color: var(--accent-texte);
}
.hero-home__actions {
width: 100%;
padding-top: var(--space-2xs);
}
.hero-home__lead {
font-size: var(--step-1);
line-height: 1.6;
color: var(--texte-2);
max-width: 34rem; /* ≈ 60 caractères par ligne */
}
/* Petits écrans : photo en 16:9, espacements resserrés (h1 néerlandais sur
5 lignes à 320 px : boutons dans les 640 px du premier écran), boutons
pleine largeur, empilés proprement */
@media (max-width: 29.99em) {
.hero-home {
padding-top: var(--space-s);
}
.hero-home__media img,
.hero-home__media .photo-slot {
aspect-ratio: 16 / 9;
}
.hero-home__boite {
gap: var(--space-xs);
padding-top: var(--space-s);
}
.hero-home__actions > .btn,
.cta-band__actions > .btn {
flex: 1 1 100%;
}
}
@media (min-width: 40em) and (max-width: 55.99em) {
.hero-home__media img,
.hero-home__media .photo-slot {
aspect-ratio: 2 / 1;
}
}
@media (min-width: 56em) {
.hero-home__media img,
.hero-home__media .photo-slot {
aspect-ratio: 20 / 7;
}
.hero-home__bas {
grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
column-gap: var(--space-xl);
align-items: start;
}
.hero-home__boite {
margin: -9rem 0 0 clamp(1.5rem, 3vw, 2.5rem);
padding: 2.25rem 2.5rem 2.5rem;
}
.hero-home__lead {
padding-top: var(--space-l);
}
}
/* Écrans bas (fenêtre utile 1366 × 657, 1280 × 650, 1536 × 730) : titre et
boutons restent dans le premier écran */
@media (min-width: 56em) and (max-height: 50em) {
.hero-home {
padding-top: var(--space-s);
}
.hero-home__media img,
.hero-home__media .photo-slot {
aspect-ratio: 30 / 7;
}
.hero-home__boite {
margin-top: -5rem;
padding-block: 1.5rem 1.75rem;
gap: var(--space-xs);
}
.hero-home__title {
font-size: min(var(--step-4), 2.125rem); /* 34 px au plus */
}
.hero-home__actions {
padding-top: 0;
}
.hero-home__lead {
padding-top: var(--space-m);
}
}
/* --- 5.10 Héros de page ---------------------------------------------------- */
/* Deux variantes, même balisage (gabarit partials/_page-template.*) :
…
…
…
(boutons .cluster, .note, .contact-list, .form-alert : facultatifs)
![]()
(--media seulement)
- sans photo : sur-titre, titre et chapô centrés (48 rem au plus), comme les
pages « À propos » et « Services » du WordPress ; le fil d'Ariane reste à gauche ;
- avec photo (--media) : titre à gauche, photo à droite au ratio 4:3 imposé
(object-fit), sans débord ; 3:2 sous 896 px, sous le texte.
Filet bas #efefef dans les deux cas. */
.page-hero {
padding-block: var(--space-m) 0;
}
.page-hero .breadcrumb {
margin-bottom: clamp(1.5rem, 1rem + 2vw, 3rem);
}
.page-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-xl);
padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
border-bottom: 1px solid var(--bord);
}
.page-hero__text > * + * {
margin-top: var(--space-m);
}
.page-hero__title {
font-family: var(--font-serif);
font-size: var(--step-4);
font-weight: 400;
line-height: var(--lh-titre);
max-width: 20ch;
}
/* Sans photo : bloc centré. Les éléments larges (alerte, coordonnées) restent
alignés à gauche à l'intérieur de leur cadre. */
.page-hero:not(.page-hero--media) .page-hero__text {
display: grid;
justify-items: center;
max-width: 48rem;
margin-inline: auto;
text-align: center;
}
.page-hero:not(.page-hero--media) .page-hero__text > .eyebrow {
justify-content: center;
}
.page-hero:not(.page-hero--media) .page-hero__text > .lead {
max-width: 40rem;
}
.page-hero:not(.page-hero--media) .page-hero__text > :is(.form-alert, .contact-list, .cluster) {
justify-self: stretch;
text-align: left;
}
.page-hero:not(.page-hero--media) .page-hero__text > .cluster {
justify-content: center;
}
.page-hero__media {
margin: 0;
}
.page-hero__media img,
.page-hero__media .photo-slot {
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
}
@media (min-width: 56em) {
.page-hero--media .page-hero__grid {
grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
align-items: center;
}
.page-hero--media .page-hero__media img,
.page-hero--media .page-hero__media .photo-slot {
aspect-ratio: 4 / 3;
}
}
/* Portables à écran bas (fenêtre utile 1366 × 657, 1280 × 650, 1536 × 730) :
espacements resserrés pour garder titre et chapô dans le premier écran
(héros d'accueil : voir 5.9). La photo 4:3 fait au plus 393 px de haut. */
@media (min-width: 56em) and (max-height: 50em) {
.page-hero .breadcrumb {
margin-bottom: var(--space-m);
}
.page-hero__text > * + * {
margin-top: var(--space-s);
}
}
/* --- 5.11 En-tête de section ---------------------------------------------- */
.section-head {
display: grid;
gap: var(--space-s);
max-width: 46rem;
margin-bottom: clamp(2rem, 1.25rem + 2.5vw, 3.5rem);
}
.section-head__title {
font-size: var(--step-3);
font-weight: 400;
}
.section-head__intro {
font-size: var(--step-0);
color: var(--texte-2);
max-width: 38em;
}
.section-head--center {
margin-inline: auto;
justify-items: center;
text-align: center;
}
/* Titre centré souligné du filet rouge de 60 × 1 px (comme les titres du
pied de page du WordPress) : réservé aux en-têtes centrés */
.section-head--center .section-head__title::after {
content: "";
display: block;
width: var(--filet-titre);
height: 1px;
margin: 0.9rem auto 0;
background: var(--accent-deco);
}
/* Titre à gauche, lien « Tout voir » à droite */
.section-head--split {
max-width: none;
align-items: end;
}
@media (min-width: 48em) {
.section-head--split {
grid-template-columns: minmax(0, 1fr) auto;
column-gap: var(--space-xl);
}
.section-head--split > :not(.section-head__action) {
grid-column: 1;
}
.section-head--split .section-head__action {
grid-column: 2;
grid-row: 1 / span 3;
align-self: end;
}
}
/* --- 5.12 Chiffres clés ---------------------------------------------------- */
/* Encadrés blancs à filet #efefef (comme les encadrés du WordPress), posés de
préférence sur une section grise. Chiffre en Libre Baskerville 36 → 48 px
#111 (18.88 sur blanc), libellé en Open Sans 700 capitales #333 (12.63),
source en #666 (5.74). Ni trame, ni piqûre, ni variante sombre.
-
11
…
Source : … (facultatif)
Colonnes de 12,5 rem au moins : 3 encadrés sur une ligne dès 768 px. Sous
36 rem de large, une seule colonne, quelle que soit la place
((36rem - 100%) × 999 devient énorme et min(100%, …) donne 100 %) : les
encadrés passent alors en longueur (requête de conteneur plus bas). */
.chiffres {
container: chiffres / inline-size;
display: grid;
gap: var(--space-m);
grid-template-columns: repeat(auto-fit, minmax(min(100%, max(12.5rem, (36rem - 100%) * 999)), 1fr));
padding: 0;
list-style: none;
}
/* 4 chiffres (Économie sociale) : 2 + 2 entre 640 et 1023 px plutôt que 3 + 1 */
@media (min-width: 40em) and (max-width: 63.99em) {
.chiffres:has(> :nth-child(4):last-child) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.chiffre {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start; /* chiffres calés en haut : même ligne de base d'un encadré à l'autre */
gap: 0.6rem;
padding: var(--space-l) var(--space-m);
text-align: center;
color: var(--c-encre);
background: var(--c-blanc);
border: 1px solid var(--c-ligne);
}
.chiffre__nombre {
display: block;
font-family: var(--font-serif);
font-size: var(--step-6);
font-weight: 400;
line-height: 1.1;
font-variant-numeric: lining-nums tabular-nums;
white-space: nowrap;
}
/* « + » en exposant (250+) : décalage sans toucher à la hauteur de ligne */
.chiffre__nombre small {
position: relative;
top: -0.7em;
margin-left: 0.05em;
font-size: 0.5em;
font-weight: 400;
}
.chiffre__libelle {
display: block;
max-width: 16rem;
font-size: var(--step--1);
font-weight: 700;
line-height: 1.45;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--c-encre-2);
text-wrap: balance; /* pas de mot seul en dernière ligne */
}
/* Source : poussée en bas de l'encadré */
.chiffre__note {
display: block;
margin-top: auto;
font-size: var(--step--2);
color: var(--c-encre-3);
}
/* Chiffre à valider : surlignage remplacé par un soulignement jaune, badge
« à valider » dans le coin de l'encadré (la bulle de la question s'affiche
au-dessus) */
:where(:root:not(.apercu-client)) .chiffre mark.todo {
position: static;
padding: 0;
background: none;
color: inherit;
box-shadow: none;
text-decoration: underline 0.08em var(--c-todo);
text-underline-offset: 0.1em;
text-decoration-skip-ink: none;
}
:where(:root:not(.apercu-client)) .chiffre mark.todo::after {
position: absolute;
top: 0.45rem;
right: 0.6rem;
margin: 0;
}
/* Une seule colonne (sous 36 rem : mobile) : encadrés en longueur, chiffre à
gauche, libellé à droite, deux fois moins hauts qu'empilés. Colonne du
chiffre : 5,25 rem (« 2 500 » à 2,25 rem de corps), plus si un chiffre la
dépasse ; les libellés restent alignés d'un encadré à l'autre. */
@container chiffres (max-width: 35.99rem) {
.chiffres > .chiffre {
display: grid;
grid-template-columns: minmax(min-content, 5.25rem) minmax(0, 1fr);
grid-template-rows: 1fr auto auto 1fr;
column-gap: var(--space-m);
row-gap: 0;
align-items: center;
justify-items: start;
padding: var(--space-m);
text-align: left;
}
.chiffres > .chiffre > .chiffre__nombre {
grid-column: 1;
grid-row: 1 / -1;
font-size: 2.25rem;
}
.chiffres > .chiffre > .chiffre__libelle {
grid-column: 2;
grid-row: 2;
letter-spacing: 0.04em;
/* filet de sécurité : un mot trop long pour la colonne est coupé au lieu
de sortir de l'encadré (pas de césure automatique avec text-wrap: balance) */
overflow-wrap: anywhere;
}
.chiffres > .chiffre > .chiffre__note {
grid-column: 2;
grid-row: 3;
margin-top: 0.3rem;
}
}
/* --- 5.13 Cartes -------------------------------------------------------------- */
/* Cartes de parcours (clients / candidat·es / partenaires) : les cartes beige
de l'accueil du WordPress, texte foncé (jamais de blanc sur beige : 1.65).
Contexte beige (section 2) : titre #111 (11.45), texte et sur-titre #333
(7.66), lien #111 souligné. Photo en haut au ratio imposé 9:7 (object-fit),
ou picto rouge si la carte n'a pas de photo (page Contact). Toute la carte
est cliquable, sans ombre ; anneau de focus autour de la carte (4.28 sur
beige, 7.06 sur blanc autour).
![]()
ou
La photo est décorative (alt="") : le titre et le lien portent le sens. */
.audiences {
display: grid;
gap: 1.875rem;
padding: 0;
list-style: none;
}
@media (min-width: 56em) {
.audiences {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.audience-card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-s);
padding: 0 var(--space-m) var(--space-l);
background: var(--fond);
color: var(--texte);
text-align: center;
}
/* Sans photo : le picto ouvre la carte */
.audience-card:not(:has(> .audience-card__media)) {
padding-top: var(--space-l);
}
/* En colonnes : les 5 rangées des cartes (photo ou picto, sur-titre, titre,
texte, lien) sont partagées → titres et textes alignés même si un
sur-titre passe sur deux lignes */
@supports (grid-template-rows: subgrid) {
@media (min-width: 56em) {
.audience-card {
display: grid;
grid-row: span 5;
grid-template-rows: subgrid;
row-gap: var(--space-s);
align-content: start;
}
.audience-card__link {
align-self: end;
}
/* picto calé en bas de sa rangée : à côté d'une carte à photo, il reste
collé au sur-titre au lieu de flotter au milieu de la hauteur de la photo */
.audience-card__icon {
align-self: end;
}
}
}
/* Photo pleine largeur, collée aux bords de la carte */
.audience-card__media {
margin: 0 calc(-1 * var(--space-m)) var(--space-2xs);
}
.audience-card__media img {
width: 100%;
aspect-ratio: 9 / 7;
object-fit: cover;
}
.audience-card__icon {
justify-self: center;
align-self: center;
width: 2.75rem;
height: 2.75rem;
margin-inline: auto;
color: var(--accent-texte); /* rouge profond sur beige */
}
.audience-card__eyebrow {
font-size: var(--step--2);
font-weight: 700;
line-height: 1.4;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--texte-2);
text-wrap: balance;
}
.audience-card__title {
font-size: var(--step-2);
color: var(--texte);
}
.audience-card__text {
flex: 1;
color: var(--texte-2);
}
/* Un lien dans le texte reste cliquable au-dessus du lien étiré */
.audience-card__text a {
position: relative;
z-index: 1;
}
.audience-card__link {
align-self: center;
justify-self: center;
margin-top: var(--space-2xs);
color: var(--texte);
text-decoration-color: currentColor;
}
.audience-card__link:hover {
color: var(--texte);
text-decoration-thickness: 2px;
}
/* Toute la carte est cliquable via le lien (pseudo-élément étiré) */
.audience-card__link::after {
content: "";
position: absolute;
inset: 0;
}
.audience-card:hover .audience-card__title {
text-decoration: underline 1px;
text-underline-offset: 0.2em;
}
.audience-card:has(.audience-card__link:focus-visible) {
outline: 3px solid var(--focus);
outline-offset: 3px;
}
.audience-card .audience-card__link:focus-visible {
outline: none;
}
/* Carte service : encadré blanc à filet #efefef (comme les encadrés du pied
de page du WordPress), picto rouge seul (plus d'écusson piqué). Sur une
section grise, la carte reste blanche (rôle --surface). */
.service-card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-s);
padding: var(--space-l);
background: var(--surface);
border: 1px solid var(--c-ligne);
transition: border-color var(--duree) var(--ease);
}
.service-card__icon {
display: block;
color: var(--accent-deco);
}
.service-card__icon .icon {
width: 2.25rem;
height: 2.25rem;
}
.service-card__title {
font-size: var(--step-2);
}
.service-card__text {
flex: 1;
color: var(--texte-2);
}
.service-card__link {
align-self: flex-start;
}
/* En colonnes (dès 640 px, où .grid--2/3/4 passent à 2 colonnes) : les rangées
des cartes (picto, titre, texte, lien — ou, carte détaillée du hub : picto,
sur-titre, titre, texte, liste, lien) sont partagées → un titre sur deux
lignes ne décale plus le texte des cartes voisines */
@supports (grid-template-rows: subgrid) {
@media (min-width: 40em) {
.grid > .service-card {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
align-content: start;
}
.grid > .service-card:has(> :nth-child(5)) { grid-row: span 5; }
.grid > .service-card:has(> :nth-child(6)) { grid-row: span 6; }
.grid > .service-card > .service-card__link {
align-self: end;
justify-self: start;
}
/* Une liste plus courte que celle de la carte voisine reste serrée en haut */
.grid > .service-card > .icon-list {
align-content: start;
}
}
}
.service-card__link::after {
content: "";
position: absolute;
inset: 0;
}
.service-card:hover {
border-color: var(--c-ligne-ui);
}
.service-card:has(.service-card__link:focus-visible) {
outline: 3px solid var(--focus);
outline-offset: 3px;
}
.service-card .service-card__link:focus-visible {
outline: none;
}
/* Carte d'article (actualités, revue de presse) : beige comme les cartes de
parcours (contexte beige : titre #111 11.45, texte #333 7.66), alignée à
gauche. Contrat des champs pour l'outil d'édition (gabarit
partials/_article-template.*) : image (facultative, alt="" car le titre
porte le sens), date, titre, chapô, lien.
-
![]()
(facultatif)
Chapô…
Lire la suite
- image 3:2 imposée (object-fit) : portrait, carré ou panorama sont recadrés ;
- sans image : filet rouge de 3 px en tête de carte ;
- chapô coupé à 4 lignes quand le titre est un lien vers l'article (le texte
complet reste dans le DOM et sur la page de l'article) ;
- variante revue de presse : titre sans lien, texte complet (pas de coupure,
il n'existe nulle part ailleurs sur le site) et lien externe
Lire l'article (…), étiré
sur toute la carte.
Toute la carte est cliquable (lien étiré), sans ombre ; anneau de focus
autour de la carte. */
.cartes {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
gap: 1.875rem;
padding: 0;
list-style: none;
}
/* Deux colonnes au plus (revue de presse : textes longs) */
@media (min-width: 40em) {
.cartes--2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.carte {
position: relative;
display: flex;
flex-direction: column;
background: var(--fond);
color: var(--texte);
}
.carte:not(:has(> .carte__media)) {
border-top: 3px solid var(--c-rouge);
}
.carte__media {
margin: 0;
}
.carte__media img {
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
}
.carte__corps {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--space-xs);
padding: var(--space-m) var(--space-m) var(--space-l);
}
.carte__date {
font-size: var(--step--2);
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--texte-2);
}
.carte__titre {
font-size: var(--step-2);
color: var(--texte);
overflow-wrap: break-word;
}
.carte__titre a {
color: inherit;
text-decoration: none;
}
.carte__titre a::after,
.carte__lien::after {
content: "";
position: absolute;
inset: 0;
}
.carte__texte {
color: var(--texte-2);
}
.carte:has(.carte__titre a) .carte__texte {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
line-clamp: 4;
overflow: hidden;
}
.carte__suite,
.carte__lien {
margin-top: auto;
padding-top: var(--space-2xs);
font-weight: 700;
color: var(--texte);
text-decoration: underline 1px;
text-underline-offset: 0.25em;
}
.carte__lien {
align-self: flex-start;
}
.carte__lien:hover {
color: var(--texte);
text-decoration-thickness: 2px;
}
.carte:hover .carte__titre {
text-decoration: underline 1px;
text-underline-offset: 0.2em;
}
.carte:has(a:focus-visible) {
outline: 3px solid var(--focus);
outline-offset: 3px;
}
.carte a:focus-visible {
outline: none;
}
/* Liste à puces-pictos */
.icon-list {
display: grid;
gap: var(--space-xs);
padding: 0;
list-style: none;
}
.icon-list > li {
display: grid;
grid-template-columns: 1.5rem minmax(0, 1fr);
gap: var(--space-xs);
align-items: start;
}
.icon-list__icon {
width: 1.5rem;
height: 1.5rem;
margin-top: 0.05em;
color: var(--accent-deco);
}
.icon-list--l {
gap: var(--space-m);
}
.icon-list--l > li {
grid-template-columns: 2.25rem minmax(0, 1fr);
gap: var(--space-s);
}
.icon-list--l .icon-list__icon {
width: 2.25rem;
height: 2.25rem;
}
.icon-list strong {
display: block;
color: var(--texte);
}
/* --- 5.14 Étapes de processus ----------------------------------------------- */
/* Liste ordonnée d'étapes : numéro « 01 » en Libre Baskerville rouge (5.05 sur
blanc, 4.63 sur gris ; rouge profond sur beige), titre en gras, texte #333.
Un filet de 1 px relie les étapes (vertical en mobile, horizontal dès 1024 px).
…
…
*/
.steps {
display: grid;
gap: var(--space-l);
padding: 0;
list-style: none;
counter-reset: etape;
}
.steps__item {
position: relative;
display: grid;
gap: var(--space-2xs);
padding-left: 4.5rem;
counter-increment: etape;
}
.steps__item::before {
content: counter(etape, decimal-leading-zero);
position: absolute;
top: -0.1em;
left: 0;
width: 3rem;
font-family: var(--font-serif);
font-size: var(--step-3);
font-weight: 400;
line-height: 1;
font-variant-numeric: lining-nums tabular-nums;
color: var(--accent-texte);
text-align: center;
}
/* filet qui relie les étapes (bordure : reste visible en contraste forcé) */
.steps__item:not(:last-child)::after {
content: "";
position: absolute;
left: 1.5rem;
top: 2.75rem;
bottom: calc(-1 * var(--space-l) + 0.5rem);
border-left: 1px solid var(--c-ligne-gris);
}
.steps__title {
font-size: var(--step-1);
font-weight: 700;
line-height: 1.3;
}
.steps__text {
color: var(--texte-2);
}
@media (min-width: 64em) {
.steps {
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: var(--space-l);
}
.steps__item {
align-content: start;
padding-left: 0;
padding-top: 4rem;
}
.steps__item::before {
top: 0;
width: auto;
text-align: left;
}
.steps__item:not(:last-child)::after {
top: 0.95rem;
left: 4rem;
right: calc(-1 * var(--space-l) + 1rem);
bottom: auto;
border-left: 0;
border-top: 1px solid var(--c-ligne-gris);
}
}
/* --- 5.15 FAQ ---------------------------------------------------------------- */
.faq {
border-top: 1px solid var(--bord);
max-width: var(--w-narrow);
}
.faq__item {
border-bottom: 1px solid var(--bord);
}
.faq__question {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-m);
padding-block: 1.15rem;
font-family: var(--font-serif);
font-size: var(--step-1);
font-weight: 400;
line-height: 1.3;
cursor: pointer;
list-style: none;
text-wrap: balance;
}
.faq__question::-webkit-details-marker {
display: none;
}
/* « + » / « − » dans un carré bordé de #767676 (4.54 sur blanc, 4.17 sur
gris), traits rouges ; seul le trait vertical change, sans rotation */
.faq__question::after {
content: "";
flex: none;
width: 2rem;
height: 2rem;
border: 1px solid var(--bord-ui);
background:
linear-gradient(var(--accent-texte), var(--accent-texte)) center / 0.75rem 1.5px no-repeat,
linear-gradient(var(--accent-texte), var(--accent-texte)) center / 1.5px 0.75rem no-repeat;
transition: background-size var(--duree) var(--ease), border-color var(--duree) var(--ease);
}
.faq__item[open] > .faq__question::after {
background-size: 0.75rem 1.5px, 1.5px 0;
}
.faq__question:hover::after {
border-color: var(--texte);
}
.faq__question:hover {
color: var(--accent-texte);
}
.faq__answer {
padding: 0 calc(2rem + var(--space-m)) var(--space-m) 0;
color: var(--texte-2);
max-width: 44rem;
}
.faq__answer > * + * {
margin-top: var(--space-xs);
}
/* --- 5.16 Études de cas -------------------------------------------------------- */
/* Carte d'étude de cas : beige comme les cartes de parcours (contexte beige),
texte foncé, sans bord, sans ombre ni zoom. Photo 3:2 imposée (object-fit).
Le titre-lien rend toute la carte cliquable ; anneau de focus autour de la carte.
![…]()
*/
.case-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--fond);
color: var(--texte);
}
.case-card__media {
margin: 0;
aspect-ratio: 3 / 2;
}
.case-card__media img,
.case-card__media .photo-slot {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: auto;
}
.case-card__body {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--space-xs);
padding: var(--space-m) var(--space-m) var(--space-l);
}
.case-card__title {
font-size: var(--step-2);
}
.case-card__title a {
color: inherit;
text-decoration: none;
}
.case-card__title a::after {
content: "";
position: absolute;
inset: 0;
}
.case-card__excerpt {
flex: 1;
color: var(--texte-2);
}
.case-card__meta {
display: flex;
flex-wrap: wrap;
gap: 0.25rem var(--space-s);
padding-top: var(--space-xs);
border-top: 1px solid var(--bord);
font-size: var(--step--1);
color: var(--texte-3);
}
.case-card:hover .case-card__title a {
text-decoration: underline 1px;
text-underline-offset: 0.2em;
}
.case-card:has(.case-card__title a:focus-visible) {
outline: 3px solid var(--focus);
outline-offset: 3px;
}
.case-card .case-card__title a:focus-visible {
outline: none;
}
/* Fiche libellé → valeur (fiche projet, aide-mémoire du devis, fiche de
contrat) : encadré blanc à filet (#efefef, #dedede sur gris), rangées
séparées par des filets pleins, libellés en capitales #666, valeurs #111.
*/
.case-sheet {
position: relative;
background: var(--surface);
border: 1px solid var(--bord);
color: var(--c-encre);
}
.case-sheet__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--space-2xs) var(--space-s);
padding: var(--space-s) var(--space-m);
border-bottom: 1px solid var(--bord);
}
/* titre : losange rouge et capitales, comme un sur-titre */
.case-sheet__title {
display: flex;
align-items: center;
gap: 0.75em;
font-family: var(--font-sans);
font-size: var(--step--2);
font-weight: 700;
line-height: 1.3;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--c-encre-2);
}
.case-sheet__title::before {
content: "";
flex: none;
width: var(--losange);
height: var(--losange);
background: var(--c-rouge);
transform: rotate(45deg);
}
.case-sheet__ref {
font-family: var(--font-serif);
font-size: var(--step--1);
font-style: italic;
color: var(--c-encre-2);
}
.case-sheet__list {
display: grid;
margin: 0;
}
.case-sheet__row {
display: grid;
gap: 0.15rem var(--space-s);
padding: var(--space-s) var(--space-m);
border-bottom: 1px solid var(--bord);
}
.case-sheet__row:last-child {
border-bottom: 0;
}
@media (min-width: 30em) {
.case-sheet__row {
grid-template-columns: 8.5rem minmax(0, 1fr);
align-items: baseline;
}
}
.case-sheet__row dt {
font-size: var(--step--2);
font-weight: 700;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--c-encre-3);
}
.case-sheet__row dd {
margin: 0;
font-weight: 400;
}
.case-sheet__foot {
padding: var(--space-xs) var(--space-m);
border-top: 1px solid var(--bord);
font-size: var(--step--1);
color: var(--c-encre-3);
}
/* --- 5.17 Citation / témoignage ------------------------------------------------ */
/* Citation : filet rouge de 1 px à gauche (comme le blockquote de .prose),
texte en Libre Baskerville italique #111 ; grande citation centrée sous un
filet rouge de 60 × 1 px. */
.quote {
position: relative;
max-width: 48rem;
padding-left: clamp(1.25rem, 0.75rem + 2vw, 2rem);
border-left: 1px solid var(--accent-deco);
}
.quote__text {
margin: 0;
font-family: var(--font-serif);
font-size: var(--step-2);
font-style: italic;
font-weight: 400;
line-height: 1.45;
}
.quote__text > p + p {
margin-top: var(--space-s);
}
.quote__text > p:first-child::before { content: open-quote; }
.quote__text > p:last-child::after { content: close-quote; }
.quote__source {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.2rem 0.6rem;
margin-top: var(--space-m);
font-size: var(--step--1);
}
/* tiret porté par le nom (et non par la source) : il ne reste jamais seul
sur sa ligne quand le nom est long ; inline-block : pas souligné si le nom
est un lien (a.quote__name, section Références de l'accueil) */
.quote__name {
font-weight: 700;
}
.quote__name::before {
content: "—";
display: inline-block;
margin-right: 0.6rem;
font-weight: 400;
color: var(--accent-texte);
}
.quote__role {
color: var(--texte-3);
}
/* Grande citation centrée */
.quote--large {
max-width: 56rem;
margin-inline: auto;
padding-left: 0;
border-left: 0;
text-align: center;
}
/* filet rouge de 60 × 1 px centré au-dessus de la citation */
.quote--large::before {
content: "";
display: block;
width: var(--filet-titre);
height: 1px;
margin: 0 auto var(--space-m);
background: var(--accent-deco);
}
.quote--large .quote__text {
font-size: var(--step-3);
line-height: 1.4;
}
/* Mobile : l'italique fin à 31 px occupait 8 à 10 lignes (jusqu'à 40 % de l'écran) */
@media (max-width: 39.99em) {
.quote--large .quote__text {
font-size: var(--step-2);
line-height: 1.45;
}
}
.quote--large .quote__source {
justify-content: center;
}
/* --- 5.18 Logos partenaires --------------------------------------------------- */
.logo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr));
padding: 0;
list-style: none;
border-top: 1px solid var(--bord);
border-left: 1px solid var(--bord);
}
.logo-grid__item {
display: grid;
place-items: center;
align-content: center;
gap: var(--space-2xs);
min-height: 7.5rem;
padding: var(--space-m);
border-right: 1px solid var(--bord);
border-bottom: 1px solid var(--bord);
text-align: center;
}
/* Logos en couleur par défaut : les règles de visibilité des financeurs
(Région, FSE+, Actiris…) imposent souvent le logo officiel tel quel.
Hauteur max. 56 px ; largeur max. 144 px pour qu'un logo-mot très large
(Eurostar, 175 × 40) ne pèse pas plus que les logos carrés (DTO) */
.logo-grid__item img {
width: auto;
max-width: min(100%, 9rem);
max-height: 3.5rem;
object-fit: contain;
background: none;
mix-blend-mode: multiply;
transition: filter var(--duree) var(--ease), opacity var(--duree) var(--ease);
}
/* Logo presque carré dont la charte impose une largeur minimum (Bruxelles
Formation, 82 × 63 : « pas en dessous de 75 px de large » sur le web) :
hauteur max. 60 px au lieu de 56, soit 78 px de large */
.logo-grid__item--haut img {
max-height: 3.75rem;
}
/* Logo très allongé (nom écrit en toutes lettres) : plus de largeur pour rester lisible */
.logo-grid__item--large img {
max-width: min(100%, 12rem);
}
/* Variante niveaux de gris (couleur au survol) : seulement si les chartes
des partenaires l'autorisent */
.logo-grid--mono .logo-grid__item img {
filter: grayscale(1);
opacity: 0.85;
}
.logo-grid--mono .logo-grid__item:hover img {
filter: none;
opacity: 1;
}
/* Peu de cellules : les colonnes s'étirent pour remplir la ligne
(pas de cellules vides à droite sur grand écran) */
.logo-grid--fit {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
}
/* Grilles de partenaires (logos fournis en image, souvent avec du texte) :
cellules plus larges et logos plus grands pour rester lisibles */
@media (min-width: 40em) {
.logo-grid--grand {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
}
}
.logo-grid--grand .logo-grid__item img {
max-width: min(100%, 11rem);
max-height: 4.5rem;
}
.logo-grid--grand .logo-grid__item--large img {
max-width: min(100%, 14rem);
}
/* Mobile : 2 colonnes (à 320 px, 8 noms s'empilaient sur 960 px), cellules
plus basses ; un dernier élément seul prend toute la ligne (cadre complet) */
@media (max-width: 39.99em) {
.logo-grid,
.logo-grid--fit {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.logo-grid > :last-child:nth-child(odd) {
grid-column: 1 / -1;
}
.logo-grid__item {
min-height: 5rem;
padding: var(--space-s);
}
}
/* 6 ou 8 cellules (noms de clients) : rangées complètes, 3 + 3 ou 4 + 4, quelle
que soit la largeur de la colonne (à 1024 px, 8 noms donnaient 3 + 3 + 2) */
@media (min-width: 40em) {
.logo-grid:has(> :nth-child(6):last-child) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.logo-grid:has(> :nth-child(8):last-child) {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/* Légende sous un logo sans nom lisible (Rail-Rest : sigle seul) ;
l'image a alors alt="" (le nom n'est pas lu deux fois) */
.logo-grid__legende {
font-size: var(--step--1);
line-height: 1.2;
color: var(--texte-2);
}
/* Nom en toutes lettres tant que le logo n'est pas fourni */
.logo-grid__name {
font-variant-numeric: lining-nums;
font-family: var(--font-serif);
font-size: var(--step-1);
font-weight: 400;
line-height: 1.15;
color: var(--texte-2);
}
/* --- 5.19 Média + texte, figures, galerie -------------------------------------- */
.media-text {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(2rem, 1rem + 4vw, 5rem);
align-items: center;
}
.media-text__media {
margin: 0;
}
.media-text__media img,
.media-text__media .photo-slot {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.media-text__media figcaption {
margin-top: var(--space-xs);
}
.media-text__body > * + * {
margin-top: var(--space-s);
}
.media-text__body > .cluster,
.media-text__body > .icon-list {
margin-top: var(--space-m);
}
@media (min-width: 56em) {
.media-text {
grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}
.media-text--reverse {
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}
.media-text--reverse .media-text__media {
order: 2;
}
.media-text--portrait .media-text__media img,
.media-text--portrait .media-text__media .photo-slot {
aspect-ratio: 4 / 5;
max-height: 40rem;
}
}
.figure img {
width: 100%;
}
.figure figcaption {
margin-top: var(--space-xs);
}
/* Ratio imposé : photos de formats différents alignées côte à côte */
.figure--4-3 img,
.figure--4-3 .photo-slot {
aspect-ratio: 4 / 3;
object-fit: cover;
}
.figure--3-2 img,
.figure--3-2 .photo-slot {
aspect-ratio: 3 / 2;
object-fit: cover;
}
/* Galerie (contenu saisi : actualités, projets) : vignettes carrées recadrées
(object-fit), 5 px d'écart comme le WordPress, 2 colonnes puis 3 dès 640 px.
Chaque image a un alt (obligatoire dans l'outil d'édition) ; le lien vers la
grande image est facultatif. Utilisable dans .prose (les puces de .prose ne
s'appliquent qu'aux listes sans classe).
- --produits : photos détourées entières (object-fit: contain) sur fond blanc ;
- 1 photo : pleine largeur en 3:2 ; 2 photos : 2 colonnes ; 4 photos : 2 + 2,
puis 4 en ligne dès 896 px (jamais de vignette seule sur sa ligne avec 4). */
.galerie {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 5px;
padding: 0;
list-style: none;
}
@media (min-width: 40em) {
.galerie {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.galerie:has(> :nth-child(2):last-child),
.galerie:has(> :nth-child(4):last-child) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 56em) {
.galerie:has(> :nth-child(4):last-child) {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.galerie:has(> :only-child) {
grid-template-columns: minmax(0, 1fr);
}
.galerie a {
display: block;
}
.galerie a:focus-visible {
outline-offset: -3px;
}
.galerie img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
}
.galerie > :only-child img {
aspect-ratio: 3 / 2;
}
.galerie--produits img {
object-fit: contain;
background: var(--c-blanc);
}
/* --- 5.20 Emplacement photo ------------------------------------------------- */
/* Photo à produire (préproduction) : aplat beige #d6c8ae (contexte beige),
« Photo à venir » en Libre Baskerville italique #111 (11.45) précédé de
ciseaux rouge profond, consigne de shooting (data-todo) en capitales #333
(7.66). Même ratio que la photo attendue.
Photo à venir
*/
.photo-slot {
position: relative;
display: grid;
place-content: center;
justify-items: center;
gap: var(--space-xs);
width: 100%;
aspect-ratio: 3 / 2;
padding: var(--space-xl) var(--space-l);
overflow: hidden;
text-align: center;
color: var(--texte);
background-color: var(--fond);
}
.photo-slot__label {
display: inline-flex;
align-items: center;
gap: 0.45em;
font-family: var(--font-serif);
font-size: var(--step-1);
font-style: italic;
font-weight: 400;
line-height: 1.2;
color: var(--texte);
}
.photo-slot__label::before {
content: "";
flex: none;
width: 1em;
height: 1em;
background-color: var(--accent-deco);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='6' cy='7' r='2.75'/%3E%3Ccircle cx='6' cy='17' r='2.75'/%3E%3Cpath d='M8.2 8.6 20.5 17.5M8.2 15.4 20.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='6' cy='7' r='2.75'/%3E%3Ccircle cx='6' cy='17' r='2.75'/%3E%3Cpath d='M8.2 8.6 20.5 17.5M8.2 15.4 20.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* description de la photo à produire (préproduction) */
.photo-slot[data-todo]::before {
content: attr(data-todo);
order: 2;
max-width: 26rem;
font-size: var(--step--2);
font-weight: 700;
line-height: 1.45;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--texte-2);
}
.photo-slot--portrait { aspect-ratio: 4 / 5; }
.photo-slot--carre { aspect-ratio: 1 / 1; }
.photo-slot--large { aspect-ratio: 16 / 9; }
.photo-slot--panorama { aspect-ratio: 2.4 / 1; }
/* --- 5.21 Bandeau CTA ---------------------------------------------------------- */
/* Bandeau d'appel : beige #d6c8ae pleine largeur, seule couleur secondaire
du WordPress (contexte beige, section 2). Sur-titre et texte #333 (7.66),
titre Libre Baskerville #111 (11.45) centré et souligné d'un filet de
60 × 1 px rouge profond #8a1d21 ; bouton rouge (contour 3.06 sur beige) et
bouton à contour #111. Pas de cadre.
*/
.cta-band {
padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
background: var(--fond);
color: var(--texte);
}
.cta-band__inner {
display: grid;
justify-items: center;
gap: var(--space-s);
text-align: center;
}
.cta-band__title {
font-size: var(--step-3);
font-weight: 400;
max-width: 36rem;
}
.cta-band__title::after {
content: "";
display: block;
width: var(--filet-titre);
height: 1px;
margin: 0.9rem auto 0;
background: var(--accent-deco);
}
.cta-band__text {
max-width: 36rem;
font-size: var(--step-1);
line-height: 1.5;
color: var(--texte-2);
}
.cta-band__actions {
justify-content: center;
margin-top: var(--space-xs);
}
/* Moins de 480 px, boutons pleine largeur du héros d'accueil, du bandeau et
des formulaires (« Kandidatuur versturen » sur deux lignes à 320 px) :
avec l'interlettrage de 0,2em, les libellés longs (« Découvrir l’économie
sociale », « Samenwerking voorstellen », « Productie in reeksen bekijken »)
passaient sur deux lignes dès 390 px. Les boutons occupant toute la largeur,
réduire leur marge intérieure et leur interlettrage ne se voit pas. */
@media (max-width: 29.99em) {
.cta-band__actions > .btn,
.hero-home__actions > .btn,
.page-racine .cta-band__inner .btn,
.form__actions > .btn {
padding-inline: var(--space-xs);
letter-spacing: 0.1em;
}
}
/* Moins de 360 px : corps de 14 px et interlettrage de 0,06em (« Samenwerking
voorstellen », « Voir la confection en série » tiennent alors sur une ligne
à 320 px) */
@media (max-width: 22.49em) {
.cta-band__actions > .btn,
.hero-home__actions > .btn,
.page-racine .cta-band__inner .btn,
.form__actions > .btn {
font-size: 0.875rem;
letter-spacing: 0.06em;
}
}
.cta-band .eyebrow {
justify-content: center;
}
/* Variante grise (page racine, Actualités : bandeau secondaire, ou bandeau
qui suivrait une section beige). Rôles du contexte gris : rouge 4.63,
encre-3 5.27, filet et losange au rouge du logo. */
.cta-band--clair {
--fond: var(--c-gris);
--surface: var(--c-blanc);
--texte-3: var(--c-encre-3);
--accent-texte: var(--c-rouge);
--accent-deco: var(--c-rouge);
--bord: var(--c-ligne-gris);
--bord-ui: var(--c-ligne-ui);
}
/* --- 5.22 Texte riche .prose ---------------------------------------------------- */
.prose {
max-width: var(--w-prose);
}
.prose > * + * {
margin-block-start: 1em;
}
.prose > h2 {
margin-block-start: 2.25em;
font-size: var(--step-3);
}
.prose > h3 {
margin-block-start: 1.9em;
font-size: var(--step-2);
}
.prose > h4 {
margin-block-start: 1.6em;
font-size: var(--step-1);
}
.prose > :is(h2, h3, h4) + * {
margin-block-start: 0.6em;
}
.prose > :first-child {
margin-block-start: 0;
}
/* Liens saisis : encre soulignée de rouge (lecture longue). Les liens fléchés
(.link-arrow) posés dans .prose gardent leur rouge, comme partout ailleurs. */
.prose a:not(.link-arrow) {
color: var(--texte);
text-decoration-color: var(--accent-deco);
text-decoration-thickness: 1.5px;
}
.prose a:not(.link-arrow):hover {
color: var(--accent-texte);
}
/* Listes saisies (sans classe) seulement : une liste à classe posée dans
.prose (galerie, icon-list, tag-list) garde son propre rendu. */
.prose :is(ul, ol):not([class]) {
padding-left: 1.4rem;
}
.prose :is(ul, ol):not([class]) > li + li {
margin-top: 0.4em;
}
.prose li > :is(ul, ol):not([class]) {
margin-top: 0.4em;
}
.prose ul:not([class]) {
list-style: none;
}
.prose ul:not([class]) > li {
position: relative;
}
/* puce : losange rouge de 5 px (motif du menu) */
.prose ul:not([class]) > li::before {
content: "";
position: absolute;
left: -1.1rem;
top: calc(0.85em - var(--losange) / 2);
width: var(--losange);
height: var(--losange);
background: var(--accent-deco);
transform: rotate(45deg);
}
.prose ol:not([class]) > li::marker {
color: var(--accent-texte);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.prose blockquote {
padding-left: var(--space-m);
border-left: 1px solid var(--accent-deco);
font-family: var(--font-serif);
font-size: var(--step-1);
font-style: italic;
}
/* hr : séparateur à losange (5.5), marges propres au texte courant */
.prose > hr {
margin-block: 2.5em;
}
.prose dl {
display: grid;
gap: 0.25em var(--space-m);
}
@media (min-width: 40em) {
.prose dl {
grid-template-columns: max-content minmax(0, 1fr);
}
}
.prose dt {
font-weight: 700;
}
.prose dd {
margin: 0;
color: var(--texte-2);
}
.prose > figure,
.prose > img,
.prose > .galerie {
margin-block: 2em;
}
.prose figure img {
width: 100%;
}
/* légende saisie sous une photo : Libre Baskerville italique #333 */
.prose figcaption {
margin-top: var(--space-2xs);
font-family: var(--font-serif);
font-size: 0.9375rem;
font-style: italic;
line-height: 1.5;
color: var(--texte-2);
}
.prose table {
width: 100%;
}
.prose > table,
.prose > .table-wrap {
margin-block: 1.75em;
}
.prose table caption {
padding-inline: 0;
border-bottom: 0;
}
.prose code {
font-size: 0.9em;
padding: 0.1em 0.3em;
background: var(--c-gris);
}
/* Variante compacte : nombreuses sections courtes (pages légales).
h2 plafonnés à 36 px et moins espacés. */
.prose--compacte > h2 {
margin-block-start: 2em;
font-size: min(var(--step-3), 2.25rem);
}
/* --- 5.23 Tableau --------------------------------------------------------------- */
/* Conteneur défilant : sur mobile, le tableau garde 34 rem et défile ;
une ombre apparaît du côté où il reste du contenu (couvercles « local »
de la couleur du fond qui glissent avec le contenu) */
.table-wrap {
container-type: inline-size; /* 100cqi = largeur visible du conteneur (légende ci-dessous) */
max-width: 100%;
overflow-x: auto;
border: 1px solid var(--bord);
background:
linear-gradient(to right, var(--surface) 30%, transparent) left center / 2.5rem 100% no-repeat local,
linear-gradient(to left, var(--surface) 30%, transparent) right center / 2.5rem 100% no-repeat local,
radial-gradient(farthest-side at 0 50%, var(--voile-encre-18), transparent) left center / 0.85rem 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%, var(--voile-encre-18), transparent) right center / 0.85rem 100% no-repeat scroll,
var(--surface);
}
.table-wrap > table {
min-width: 34rem;
}
/* Légende d'un tableau qui défile : limitée à la largeur visible et collée à
gauche (sinon, large comme le tableau, elle était coupée à 320 et 390 px) */
.table-wrap > table > caption {
position: sticky;
left: 0;
max-width: calc(100vw - 2 * var(--gutter) - 2px);
max-width: 100cqi;
}
.table,
.prose table {
width: 100%;
border-collapse: collapse;
font-size: var(--step--1);
font-variant-numeric: tabular-nums;
line-height: 1.5;
}
.table caption,
.prose table caption {
padding: var(--space-s) var(--space-m);
caption-side: top;
font-family: var(--font-serif);
font-size: var(--step-1);
font-weight: 400;
text-align: left;
border-bottom: 1px solid var(--bord);
}
.table th,
.table td,
.prose table th,
.prose table td {
padding: 0.75rem var(--space-m);
border-bottom: 1px solid var(--bord);
text-align: left;
vertical-align: top;
}
.table thead th,
.prose table thead th {
font-size: var(--step--2);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--texte-2);
background: var(--c-gris);
border-bottom: 1px solid var(--c-encre);
}
.table tbody th,
.prose table tbody th {
font-weight: 700;
}
.table tbody tr:last-child > *,
.prose table tbody tr:last-child > * {
border-bottom: 0;
}
.table .num {
text-align: right;
white-space: nowrap;
}
/* Tableau large (5 colonnes et plus) : il défile plus tôt plutôt que
d'écraser ses colonnes ; la colonne d'en-tête de ligne reste lisible */
.table-wrap > .table--large {
min-width: 52rem;
}
.table--large tbody th {
min-width: 9rem;
}
/* --- 5.24 bis Valeurs (accueil, #valeurs) ------------------------------------------ */
/* Les six valeurs de Mulieris (relecture de Rachida Lazrak, 28/09/2026) : un libellé en serif
précédé d'un picto couture, en grille souple (1 à 3 colonnes). */
.valeurs {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
gap: var(--space-s);
margin: 0;
padding: 0;
list-style: none;
}
/* Six valeurs : deux rangées de trois plutôt que quatre + deux */
@media (min-width: 56em) {
.valeurs:has(> :nth-child(6):last-child) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.valeurs__item {
display: flex;
align-items: center;
gap: var(--space-s);
padding: var(--space-s) var(--space-m);
background: var(--surface);
border: 1px solid var(--bord);
font-family: var(--font-serif);
font-size: var(--step-2);
font-weight: 400;
line-height: 1.15;
}
.valeurs__item .icon {
flex: none;
width: 1.75rem;
height: 1.75rem;
color: var(--accent-deco);
}
/* --- 5.24 Tags ------------------------------------------------------------------- */
.tag-list {
display: flex;
flex-wrap: wrap;
gap: var(--space-2xs);
padding: 0;
list-style: none;
}
/* Étiquette (non cliquable) : rectangle à angles droits, filet discret
(#efefef sur blanc, voile sur beige), fond blanc, texte #333 en gras 12 px
(12.63 sur blanc). Plus d'œillet. */
.tag {
display: inline-flex;
align-items: center;
padding: 0.2rem 0.6rem;
border: 1px solid var(--bord);
background: var(--surface);
font-size: var(--step--2);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.06em;
color: var(--c-encre-2);
white-space: nowrap;
}
/* --- 5.25 Visite & accès ----------------------------------------------------------- */
/* Bloc Visite : encadré blanc à filet #efefef (blanc sur une section grise),
trois colonnes séparées par des filets dès 896 px. Plus de cadre piqué. */
.visit {
position: relative;
display: grid;
gap: var(--space-xl) var(--space-l);
padding: clamp(1.75rem, 1rem + 3vw, 3rem);
background: var(--surface);
border: 1px solid var(--c-ligne);
}
@media (min-width: 56em) {
.visit {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.visit__block + .visit__block {
padding-left: var(--space-l);
border-left: 1px solid var(--c-ligne);
}
}
.visit__block > * + * {
margin-top: var(--space-s);
}
.visit__title {
display: flex;
align-items: center;
gap: 0.6rem;
font-family: var(--font-sans);
font-size: var(--step--2);
font-weight: 700;
line-height: 1.3;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--texte);
}
.visit__title .icon {
width: 1.4rem;
height: 1.4rem;
color: var(--accent-deco);
}
.visit__address {
font-variant-numeric: lining-nums;
font-family: var(--font-serif);
font-size: var(--step-2);
font-weight: 400;
line-height: 1.25;
}
.visit__links {
display: grid;
gap: var(--space-2xs);
margin: var(--space-m) 0 0;
padding: 0;
list-style: none;
}
.hours {
display: grid;
font-variant-numeric: tabular-nums;
}
.hours > div {
display: flex;
justify-content: space-between;
gap: var(--space-s);
padding-block: 0.45rem;
border-bottom: 1px solid var(--c-ligne);
}
.hours dt {
font-weight: 700;
}
.hours dd {
margin: 0;
text-align: right;
}
.hours__ferme dt,
.hours__ferme dd {
font-weight: 400;
color: var(--texte-3);
}
.visit__note {
font-size: var(--step--1);
color: var(--texte-3);
}
.contact-list {
display: grid;
gap: var(--space-xs);
padding: 0;
list-style: none;
}
/* Deux colonnes dès 640 px (coordonnées d'un héros, d'un encart large) */
.contact-list--2 {
gap: var(--space-s) var(--space-l);
}
@media (min-width: 40em) {
.contact-list--2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.contact-list li {
display: grid;
grid-template-columns: 1.4rem minmax(0, 1fr);
gap: var(--space-xs);
align-items: start;
}
.contact-list .icon {
width: 1.4rem;
height: 1.4rem;
color: var(--accent-deco);
}
.contact-list__label {
display: block;
font-size: var(--step--2);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--texte-3);
}
.contact-list a {
font-weight: 700;
color: var(--texte);
text-decoration-color: var(--accent-deco);
}
.contact-list a:hover {
color: var(--accent-texte);
}
/* --- 5.26 Formulaires ------------------------------------------------------------------ */
/* Champs du WordPress, en lisible : fond gris #f5f5f5 (rôle --champ, blanc
sur une section grise ou beige), bord de 1 px #767676 (4.54 sur blanc, 4.17
sur gris : critère 1.4.11), angles droits, aucune ombre. Libellés #111 en
Open Sans 700, « (obligatoire) » écrit en #666. Focus : anneau 3 px #a8262a
et fond blanc. Erreurs en texte #a8262a (7.06), reliées au champ par main.js.
Balisage inchangé (contrat SPEC § 8, voir docs/COMPONENTS.md § 6.27). */
.form {
display: grid;
gap: var(--space-l);
max-width: var(--w-narrow);
}
.form__row {
display: grid;
gap: var(--space-l) var(--space-m);
}
@media (min-width: 40em) {
.form__row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Deux champs côte à côte : leurs rangées (libellé, contrôle, aide, erreur) sont
partagées → un libellé sur deux lignes ne décale plus le contrôle voisin
(« Type de projet » était 25 px plus bas que « Quantité »). Écart vertical
de la rangée à 0 : celui du .field (0,4 rem) s'applique entre ses rangées,
et les rangées vides (pas d'aide, pas d'erreur) ne prennent aucune place. */
@supports (grid-template-rows: subgrid) {
@media (min-width: 40em) {
.form__row {
grid-template-rows: repeat(4, auto);
row-gap: 0;
}
.form__row > .field {
grid-row: span 4;
grid-template-rows: subgrid;
}
}
}
/* Dans une rangée, le champ date prend toute la largeur de sa colonne */
.form__row .field input[type="date"] {
max-width: none;
}
.form__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-s) var(--space-m);
padding-top: var(--space-2xs);
}
.form__note {
font-size: var(--step--1);
color: var(--texte-3);
}
.field {
display: grid;
gap: 0.4rem;
align-content: start;
}
.field__label,
.fieldset__legend {
font-weight: 700;
line-height: 1.35;
color: var(--texte);
}
.field__req {
white-space: nowrap; /* « (obligatoire) », « (verplicht) » : jamais coupé */
font-weight: 400;
font-size: var(--step--1);
color: var(--texte-3);
}
.field__hint {
font-size: var(--step--1);
line-height: 1.45;
color: var(--texte-3);
}
/* Rappel ajouté par main.js après une erreur serveur (« Joignez à nouveau vos fichiers ») */
.field__rappel {
font-weight: 700;
color: var(--texte-2);
}
/* Contrôles texte, liste, date, zone de texte */
.field :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"]), select, textarea) {
width: 100%;
min-height: 3rem;
padding: 0.7rem 0.875rem;
border: 1px solid var(--c-ligne-ui);
background-color: var(--champ);
color: var(--c-encre);
font-size: max(1rem, var(--step-0)); /* ≥ 16 px : évite le zoom iOS */
line-height: 1.4;
transition: border-color var(--duree) var(--ease), background-color var(--duree) var(--ease);
}
.field textarea {
min-height: 9rem;
resize: vertical;
}
.field select {
appearance: none;
padding-right: 2.75rem;
/* chevron encre #111 : couleur écrite dans le data-URI (un 