/* ============================================================================
   WORK-OUT — Feuille de style globale
   Move at work.
   ----------------------------------------------------------------------------
   À placer dans le <head> de CHAQUE page HTML :

     <link rel="stylesheet" href="../assets/css/style.css">
     <link rel="icon" type="image/svg+xml" href="../assets/images/logos/wo-favicon.svg">

   Les polices sont déclarées en tête de ce fichier et servies depuis
   assets/fonts/ : le site ne contacte plus Google Fonts.

   (depuis la racine, remplacer ../assets/ par assets/)
   ========================================================================== */


/* ============================================
   0. POLICES (hébergées localement)
   ============================================ */

/*  Space Grotesk et Inter sont servies depuis ce domaine, et non depuis
    Google Fonts. Raison principale : un appel à fonts.googleapis.com
    transmet l'adresse IP de chaque visiteur à Google aux États-Unis, sans
    consentement possible puisque la police est nécessaire à l'affichage.
    En local, le site ne contacte plus aucun tiers.

    Effets de bord, tous favorables : une résolution DNS et une connexion
    TLS de moins au chargement, et une politique de sécurité de contenu
    qui n'a plus à autoriser de domaine externe.

    Les deux familles sont sous licence SIL Open Font 1.1, qui autorise
    explicitement la redistribution et l'auto-hébergement (voir
    assets/fonts/LICENCES.txt).

    font-display: swap — le texte s'affiche immédiatement dans la police
    de secours, puis bascule. Jamais de texte invisible au chargement. */


@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-latin.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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-latin-ext.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-latin.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-latin-ext.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-latin.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-latin-ext.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/space-grotesk-500-latin.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/space-grotesk-500-latin-ext.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/space-grotesk-600-latin.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/space-grotesk-600-latin-ext.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-700-latin.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-700-latin-ext.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;
}


/* ============================================
   1. RESET & BASE
   ============================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Compense le header collant lors des ancres internes */
  scroll-padding-top: 6rem;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote,
dl, dd, ul, ol {
  margin: 0;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

body {
  min-height: 100vh;
  background-color: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

table {
  border-collapse: collapse;
}

/* Focus : jamais de outline supprimé sans remplacement (a11y) */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

::selection {
  background-color: var(--chartreuse);
  color: var(--onyx);
}


/* ============================================
   2. VARIABLES
   ============================================ */

:root {
  /* --- Palette de marque (valeurs brutes — dans les composants,
         toujours passer par les tokens sémantiques plus bas) --- */
  --onyx: #0D0D0D;
  --cloudy-sky: #3993DD;
  --parchment: #F2F0EB;
  --chartreuse: #C8F135;

  /* Variantes dérivées, strictement utilitaires (pas de nouvelle couleur
     de marque : ce sont les mêmes teintes ajustées pour le contraste) */
  --onyx-70: rgba(13, 13, 13, 0.66);   /* texte secondaire sur fond clair */
  --onyx-12: rgba(13, 13, 13, 0.14);   /* filets, séparateurs sur fond clair */
  --parchment-70: rgba(242, 240, 235, 0.68);
  --parchment-16: rgba(242, 240, 235, 0.18);
  /* Cloudy Sky assombri : le bleu de marque ne passe pas le contraste AA
     en petit texte sur Parchment (2.65:1). Cette version fait ~4.9:1. */
  --cloudy-sky-deep: #1F6BAE;

  /* --- Tokens sémantiques (surchargés par .theme-dark) --- */
  --color-bg: var(--parchment);
  --color-fg: var(--onyx);
  --color-muted: var(--onyx-70);
  --color-rule: var(--onyx-12);
  --color-link: var(--cloudy-sky-deep);
  --color-focus: var(--cloudy-sky-deep);
  --color-accent: var(--chartreuse);

  /* --- Typographie --- */
  --font-heading: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);      /* 16 -> 18 */
  --fs-small: 0.875rem;                                    /* 14 */
  --fs-micro: 0.75rem;                                     /* 12 — overlines */

  --fs-display: clamp(3rem, 1.55rem + 6.9vw, 7rem);        /* 48 -> 112 */
  --fs-h1: clamp(2.5rem, 1.6rem + 4.3vw, 5.5rem);          /* 40 -> 88 */
  --fs-h2: clamp(1.875rem, 1.45rem + 2vw, 3.25rem);        /* 30 -> 52 */
  --fs-h3: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);    /* 18 -> 22 */
  --fs-h4: 1rem;

  --lh-tight: 0.94;
  --lh-heading: 1.08;
  --lh-body: 1.6;

  --ls-display: -0.035em;
  --ls-heading: -0.02em;
  --ls-overline: 0.14em;

  /* --- Rythme spatial (base 8) --- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;
  --space-16: 128px;

  /* Padding vertical des sections : 60px mobile -> 120px desktop */
  --section-y: clamp(60px, 3rem + 4vw, 120px);

  /* --- Layout --- */
  --container-max: 1280px;
  --container-pad: var(--space-3);
  --measure: 62ch;              /* longueur de ligne confortable */
  --rule-width: 1px;
  --radius: 0;                  /* parti pris : angles vifs partout */
  --header-h: 72px;

  /* --- Mouvement --- */
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur: 200ms;
  --dur-slow: 320ms;

  /* --- Breakpoints ---
     Déclarés ici pour référence et pour lecture côté JS
     (getComputedStyle(document.documentElement).getPropertyValue('--bp-tablet')).
     ATTENTION : les media queries n'acceptent pas les custom properties,
     les valeurs sont donc répétées en dur en section 9. */
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-large: 1280px;
}

/* Inversion de thème : tout composant placé dedans s'adapte tout seul.
   C'est ce qui permet l'alternance clair/sombre entre sections sans
   réécrire un seul composant. */
.theme-dark,
.section--dark,
.site-footer {
  --color-bg: var(--onyx);
  --color-fg: var(--parchment);
  --color-muted: var(--parchment-70);
  --color-rule: var(--parchment-16);
  --color-link: var(--cloudy-sky);        /* le bleu vif passe sur fond noir */
  --color-focus: var(--cloudy-sky);
  background-color: var(--color-bg);
  color: var(--color-fg);
}


/* ============================================
   3. TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
}

/* h3 volontairement discret : c'est un titre d'item, pas un palier de plus.
   Il se distingue par la graisse et le calage optique, pas par la taille. */
h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
}

h4 {
  font-size: var(--fs-h4);
  font-weight: 500;
  letter-spacing: 0;
}

p {
  text-wrap: pretty;
}

p + p {
  margin-top: var(--space-2);
}

strong,
b {
  font-weight: 600;
}

small {
  font-size: var(--fs-small);
}

/* Chapô : paragraphe d'intro, plus grand, moins dense */
.lead {
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.45;
  color: var(--color-muted);
  max-width: 46ch;
}

/* Surtitre éditorial. Le petit carré Chartreuse est l'un des rares
   emplois de l'accent hors CTA — 1 par section maximum. */
.overline {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-muted);
}

.overline--marked::before {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  background-color: var(--chartreuse);
  flex: none;
}

/* Numérotation éditoriale des sections / items */
.index-number {
  font-family: var(--font-heading);
  font-size: var(--fs-micro);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

/* --- Liens ---
   Le filet reste posé sur la ligne de base ; c'est le texte qui se soulève
   au survol. Micro-mouvement cohérent avec « Move at work ». */
a {
  color: inherit;
  text-decoration: none;
}

.text-link {
  position: relative;
  display: inline-block;
  color: var(--color-link);
  transition: transform var(--dur) var(--ease);
}

.text-link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -2px;
  block-size: var(--rule-width);
  background-color: currentColor;
  opacity: 0.45;
  transition: opacity var(--dur) var(--ease);
}

.text-link:hover {
  transform: translateY(-2px);
}

.text-link:hover::after {
  opacity: 1;
}

/* Lien dans un bloc de texte courant */
.prose a:not([class]) {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.prose {
  max-width: var(--measure);
}

.prose > * + * {
  margin-top: var(--space-2);
}


/* ============================================
   4. LAYOUT
   ============================================ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--narrow {
  max-width: 880px;
}

.section {
  padding-block: var(--section-y);
}

/* Deux sections sombres consécutives : on ne double pas le padding */
.section--dark + .section--dark {
  padding-block-start: 0;
}

/* En-tête de section : surtitre + titre + chapô, calés à gauche.
   Pas de centrage — le fer à gauche tient mieux la page en éditorial. */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-end: var(--space-6);
  max-width: 40ch;
}

.section-head--wide {
  max-width: none;
}

/* Filet de séparation, l'unité graphique de base du site */
.rule {
  border: 0;
  border-block-start: var(--rule-width) solid var(--color-rule);
  margin: 0;
}

/* Grilles : mobile = 1 colonne, le desktop est ajouté en section 9 */
.grid {
  display: grid;
  gap: var(--space-4);
}

.grid--2,
.grid--3,
.grid--4 {
  grid-template-columns: 1fr;
}

/* Bloc éditorial en deux colonnes : titre collant à gauche, contenu à droite */
.split {
  display: grid;
  gap: var(--space-4);
}


/* ============================================
   5. COMPONENTS RÉUTILISABLES
   ============================================ */

/* --- Boutons ---
   Angles vifs, pas d'ombre. Au survol, un aplat balaie le bouton du bas
   vers le haut et le texte s'inverse : la couleur « monte », elle ne
   s'allume pas. Le geste vaut mieux que le fondu. */
.btn {
  --btn-pad-y: 14px;
  --btn-pad-x: var(--space-3);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-block-size: 48px;               /* cible tactile confortable */
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: var(--rule-width) solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--dur) var(--ease);
}

.btn:hover::after,
.btn:focus-visible::after {
  transform: scaleY(1);
}

.btn:active {
  transform: translateY(1px);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

/* Primaire — le seul emploi systématique du Chartreuse */
.btn--primary {
  background-color: var(--chartreuse);
  color: var(--onyx);
  border-color: var(--chartreuse);
}

.btn--primary::after {
  background-color: var(--onyx);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  color: var(--chartreuse);
}

/* Secondaire — contour, s'inverse selon le thème de la section */
.btn--secondary {
  background-color: transparent;
  color: var(--color-fg);
  border-color: var(--color-fg);
}

.btn--secondary::after {
  background-color: var(--color-fg);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  color: var(--color-bg);
}

/* Ghost — pas d'aplat : un filet court qui se déploie sous le mot */
.btn--ghost {
  --btn-pad-x: 0;
  min-block-size: auto;
  padding-block: var(--space-1);
  overflow: visible;
  color: var(--color-fg);
}

.btn--ghost::after {
  inset: auto 0 0 0;
  z-index: 0;
  block-size: var(--rule-width);
  inline-size: 32px;
  transform: none;
  background-color: currentColor;
  transition: inline-size var(--dur) var(--ease);
}

.btn--ghost:hover::after,
.btn--ghost:focus-visible::after {
  inline-size: 100%;
}

.btn--ghost:hover {
  color: var(--color-link);
}

/* Groupe de boutons */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* --- Tuiles ---
   Volontairement pas des « cards » : ni fond, ni ombre, ni coins arrondis.
   Un filet supérieur, un numéro, et un décalage horizontal au survol. */
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: var(--space-3);
  border-block-start: var(--rule-width) solid var(--color-rule);
  transition: border-color var(--dur) var(--ease);
}

.tile__index {
  font-family: var(--font-heading);
  font-size: var(--fs-micro);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  transition: color var(--dur) var(--ease);
}

.tile__title {
  transition: transform var(--dur) var(--ease);
}

.tile__text {
  color: var(--color-muted);
  max-width: 40ch;
}

.tile:hover {
  border-block-start-color: var(--color-fg);
}

.tile:hover .tile__title {
  transform: translateX(var(--space-1));
}

.tile:hover .tile__index {
  color: var(--color-fg);
}

/* Tuile entièrement cliquable : le lien couvre la tuile sans imbriquer
   de balises interactives (a11y + SEO propres) */
.tile__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* --- Formulaires ---
   Pas de boîtes : un filet sous chaque champ, un label en petites capitales.
   Le focus se signale par un trait Cloudy Sky qui se trace de gauche à droite. */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 640px;
}

.field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-block-end: var(--space-1);
  border-block-end: var(--rule-width) solid var(--color-rule);
  transition: border-color var(--dur) var(--ease);
}

.field::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  block-size: 2px;
  background-color: var(--color-focus);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.field:focus-within::after {
  transform: scaleX(1);
}

.field__label {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-muted);
  transition: color var(--dur) var(--ease);
}

.field:focus-within .field__label {
  color: var(--color-fg);
}

.field__label .required {
  color: var(--color-link);
}

.field input,
.field textarea,
.field select {
  inline-size: 100%;
  padding: var(--space-1) 0;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  font-size: var(--fs-body);
  color: var(--color-fg);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;                       /* remplacé par le trait ::after */
}

.field textarea {
  min-block-size: 7rem;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--color-muted);
  opacity: 0.7;
}

/* Select : caret dessiné en CSS, aucune image */
.field--select {
  position: relative;
}

.field select {
  appearance: none;
  padding-inline-end: var(--space-3);
  cursor: pointer;
}

.field--select > .caret {
  position: absolute;
  inset-inline-end: 4px;
  inset-block-end: 18px;
  inline-size: 8px;
  block-size: 8px;
  border-inline-end: var(--rule-width) solid var(--color-fg);
  border-block-end: var(--rule-width) solid var(--color-fg);
  transform: rotate(45deg);
  pointer-events: none;
}

/* Case à cocher (consentement) */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-muted);
  cursor: pointer;
}

.check input[type="checkbox"] {
  appearance: none;
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  margin-block-start: 4px;
  border: var(--rule-width) solid var(--color-fg);
  transition: background-color var(--dur-fast) var(--ease);
}

.check input[type="checkbox"]:checked {
  background-color: var(--color-fg);
}

.check input[type="checkbox"]:checked::before {
  content: "";
  display: block;
  inline-size: 4px;
  block-size: 9px;
  margin: 1px auto 0;
  border-inline-end: 2px solid var(--color-bg);
  border-block-end: 2px solid var(--color-bg);
  transform: rotate(45deg);
}

/* Texte d'aide sous le libelle.
   Remplace le placeholder, qui disparaissait des le premier caractere tape :
   l'indication doit rester lisible pendant qu'on ecrit, pas seulement avant.
   Rattache au champ par aria-describedby, donc annonce aussi a la lecture vocale. */
.field__help {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--color-muted);
}

/* Messages de retour formulaire */
.form-note {
  font-size: var(--fs-small);
  color: var(--color-muted);
}

.form-note--error {
  color: #B3261E;
}

/* --- Étiquette / tag --- */
.tag {
  display: inline-block;
  padding: 6px var(--space-1);
  border: var(--rule-width) solid var(--color-rule);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}


/* ============================================
   6. HEADER
   ============================================ */

/*  Markup attendu :
    <header class="site-header" data-header>
      <a class="skip-link" href="#main">Aller au contenu</a>
      <div class="site-header__inner container">
        <a class="site-logo" href="/fr/">
          <img class="site-logo__img site-logo__img--dark"
               src="../assets/images/logos/workout-logo.svg" alt="Work-Out" width="140" height="26">
          <img class="site-logo__img site-logo__img--light"
               src="../assets/images/logos/workout-logo-white.svg" alt="" aria-hidden="true" width="140" height="26">
        </a>
        <span class="site-header__locality">Bruxelles</span>
        <button class="nav-toggle" data-nav-toggle aria-expanded="false" aria-controls="site-nav">
          <span class="nav-toggle__label">Menu</span>
          <span class="nav-toggle__glyph" aria-hidden="true"></span>
        </button>
        <nav class="site-nav" id="site-nav" aria-label="Navigation principale">
          <ul class="site-nav__list">
            <li class="site-nav__item"><a class="site-nav__link" href="index.html" aria-current="page">Accueil</a></li>
            <li class="site-nav__item"><a class="site-nav__link" href="ateliers.html">Ateliers</a></li>
            … Formules / À propos / Contact …
          </ul>
          <div class="lang-switch" aria-label="Langue">
            <a class="lang-switch__link" href="/fr/…" aria-current="true" lang="fr">FR</a>
            <span class="lang-switch__sep" aria-hidden="true"></span>
            <a class="lang-switch__link" href="/en/…" lang="en" hreflang="en">EN</a>
          </div>
          <a class="btn btn--primary site-header__cta" href="contact.html">Réserver</a>
        </nav>
      </div>
    </header>                                                                  */

.skip-link {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--space-2);
  z-index: 100;
  padding: var(--space-1) var(--space-2);
  background-color: var(--onyx);
  color: var(--parchment);
  font-size: var(--fs-small);
}

.skip-link:focus {
  inset-block-start: var(--space-1);
}

/* Le header suit la page mais se retire vers le haut dès qu'on descend,
   et revient — condensé, avec son CTA — dès qu'on remonte. Il n'occupe
   jamais l'écran pendant la lecture. Classes posées par main.js. */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background-color: var(--color-bg);
  border-block-end: var(--rule-width) solid transparent;
  transition: transform var(--dur-slow) var(--ease),
              border-color var(--dur) var(--ease);
}

.site-header.is-condensed {
  border-block-end-color: var(--color-rule);
}

/* Anciennement, le header se retirait au défilement descendant.
   Abandonné : sur un cycle de vente B2B long, le CTA doit rester
   atteignable en permanence. Le header reste collé et se contente
   de se condenser. La règle est conservée, neutralisée, pour que
   la classe éventuellement posée par le JS reste sans effet. */
.site-header.is-hidden {
  transform: none;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--header-h);
  padding-block: var(--space-2);
  transition: min-block-size var(--dur) var(--ease),
              padding-block var(--dur) var(--ease);
}

.site-header.is-condensed .site-header__inner {
  min-block-size: 56px;
  padding-block: var(--space-1);
}

.site-logo {
  display: block;
  flex: none;
  margin-inline-end: auto;
}

.site-logo__img {
  block-size: 26px;
  inline-size: auto;
  transition: block-size var(--dur) var(--ease);
}

.site-header.is-condensed .site-logo__img {
  block-size: 22px;
}

/* Un seul des deux logos est visible selon le thème du contexte */
.site-logo__img--light {
  display: none;
}

.theme-dark .site-logo__img--dark,
.site-footer .site-logo__img--dark,
.site-header.is-nav-open .site-logo__img--dark {
  display: none;
}

.theme-dark .site-logo__img--light,
.site-footer .site-logo__img--light,
.site-header.is-nav-open .site-logo__img--light {
  display: block;
}

/* Mention de zone d'intervention : détail éditorial + signal local (SEO) */
.site-header__locality {
  display: none;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Bouton d'ouverture : un mot + deux traits, pas un hamburger à 3 barres */
.nav-toggle {
  position: relative;
  z-index: 60;                        /* reste au-dessus du panneau ouvert */
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) 0;
  font-family: var(--font-heading);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-fg);
}

.site-header.is-nav-open .nav-toggle {
  color: var(--parchment);
}

.nav-toggle__glyph {
  position: relative;
  inline-size: 18px;
  block-size: 9px;
}

.nav-toggle__glyph::before,
.nav-toggle__glyph::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: var(--rule-width);
  background-color: currentColor;
  transition: transform var(--dur) var(--ease);
}

.nav-toggle__glyph::before { inset-block-start: 0; }
.nav-toggle__glyph::after  { inset-block-end: 0; }

.site-header.is-nav-open .nav-toggle__glyph::before {
  transform: translateY(4px) rotate(45deg);
}

.site-header.is-nav-open .nav-toggle__glyph::after {
  transform: translateY(-4px) rotate(-45deg);
}

/* --- Panneau de navigation (mobile) --- */
.site-nav {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-6);
  padding: calc(var(--header-h) + var(--space-4)) var(--container-pad) var(--space-6);
  background-color: var(--onyx);
  color: var(--parchment);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease),
              visibility 0s linear var(--dur-slow);
}

.site-header.is-nav-open .site-nav {
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}

/* Le logo doit rester au-dessus du panneau, en version claire */
.site-header.is-nav-open .site-logo {
  position: relative;
  z-index: 60;
}

body.has-nav-open {
  overflow: hidden;
}

.site-nav__list {
  counter-reset: nav;
  display: flex;
  flex-direction: column;
}

.site-nav__item {
  counter-increment: nav;
  border-block-start: var(--rule-width) solid var(--parchment-16);
}

.site-nav__item:last-child {
  border-block-end: var(--rule-width) solid var(--parchment-16);
}

.site-nav__link {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding-block: var(--space-2);
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 1.2rem + 2.5vw, 2.5rem);
  font-weight: 600;
  letter-spacing: var(--ls-heading);
  color: var(--parchment);
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* Numérotation éditoriale générée en CSS : rien à écrire dans le HTML */
.site-nav__link::before {
  content: counter(nav, decimal-leading-zero);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--parchment-70);
}

.site-nav__link:hover {
  transform: translateX(var(--space-1));
  color: var(--cloudy-sky);
}

.site-nav__link[aria-current="page"]::before {
  color: var(--chartreuse);
}

/* --- Sélecteur de langue --- */
.lang-switch {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lang-switch__link {
  color: var(--color-muted);
  transition: color var(--dur-fast) var(--ease);
}

.lang-switch__link:hover {
  color: var(--color-fg);
}

.lang-switch__link[aria-current="true"] {
  color: var(--color-fg);
}

.lang-switch__sep {
  inline-size: var(--rule-width);
  block-size: 12px;
  background-color: var(--color-rule);
}

/* Dans le panneau mobile, le switch bascule sur les teintes claires */
.site-nav .lang-switch {
  --color-fg: var(--parchment);
  --color-muted: var(--parchment-70);
  --color-rule: var(--parchment-16);
}

/* Le CTA header n'apparaît qu'en état condensé (voir section 9) :
   en haut de page, le hero porte déjà l'appel à l'action. */
.site-header__cta {
  align-self: flex-start;
}


/* ============================================
   7. FOOTER
   ============================================ */

/*  Markup attendu :
    <footer class="site-footer">
      <div class="container">
        <p class="site-footer__claim">Move at work<span class="dot">.</span></p>
        <div class="site-footer__grid">
          <div><img class="site-footer__logo" src="…workout-logo-white.svg" alt="Work-Out">…</div>
          <div><h2 class="site-footer__col-title">Contact</h2><ul class="site-footer__list">…</ul></div>
          <div><h2 class="site-footer__col-title">Navigation</h2><ul class="site-footer__list">…</ul></div>
        </div>
        <div class="site-footer__bottom">
          <p>© 2026 Work-Out — Bruxelles</p>
          <p>Bien-être en entreprise, à Bruxelles et environs</p>
        </div>
      </div>
    </footer>                                                                  */

.site-footer {
  padding-block: var(--space-8) var(--space-4);
}

/* La signature de marque tient le pied de page à elle seule */
.site-footer__claim {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 1.2rem + 5vw, 5rem);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  margin-block-end: var(--space-6);
}

.site-footer__claim .dot {
  color: var(--chartreuse);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-6);
  padding-block-start: var(--space-6);
  border-block-start: var(--rule-width) solid var(--color-rule);
}

.site-footer__col-title {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-block-end: var(--space-2);
}

.site-footer__list > li + li {
  margin-top: var(--space-1);
}

.site-footer__logo {
  block-size: 24px;
  inline-size: auto;
  margin-block-end: var(--space-2);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
  justify-content: space-between;
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-3);
  border-block-start: var(--rule-width) solid var(--color-rule);
  font-size: var(--fs-small);
  color: var(--color-muted);
}


/* ============================================
   8. UTILITIES
   ============================================ */

.u-visually-hidden {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.u-measure      { max-width: var(--measure); }
.u-muted        { color: var(--color-muted); }
.u-nowrap       { white-space: nowrap; }
.u-center       { text-align: center; }
.u-flow > * + * { margin-top: var(--space-2); }

.u-mt-2 { margin-top: var(--space-2); }
.u-mt-4 { margin-top: var(--space-4); }
.u-mt-6 { margin-top: var(--space-6); }
.u-mt-8 { margin-top: var(--space-8); }

/* Fondu-in au défilement.
   Le masquage n'est appliqué que si main.js a posé .js sur <html> :
   sans JS, tout reste visible (dégradation propre + indexation garantie). */
.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Décalage en cascade pour une série d'items révélés ensemble */
.reveal-group > *:nth-child(2) { --reveal-delay: 70ms; }
.reveal-group > *:nth-child(3) { --reveal-delay: 140ms; }
.reveal-group > *:nth-child(4) { --reveal-delay: 210ms; }


/* ============================================
   9. RESPONSIVE (mobile-first, min-width)
   ============================================ */

/* --- Tablette : 768px (--bp-tablet) --- */
@media (min-width: 768px) {
  :root {
    --container-pad: var(--space-4);
  }

  .grid--2,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-footer__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .tile {
    padding-block: var(--space-4);
  }
}

/* --- Desktop : 1024px (--bp-desktop) --- */
@media (min-width: 1024px) {
  :root {
    --header-h: 88px;
  }

  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Bloc éditorial : la colonne titre reste collante pendant que
     le contenu défile à droite */
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-8);
  }

  .split__aside {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--space-3));
    align-self: start;
  }

  .section-head {
    margin-block-end: var(--space-8);
  }

  /* --- Header desktop : la nav redevient une barre --- */
  .site-header__locality {
    display: block;
    margin-inline-end: auto;
    padding-inline-start: var(--space-3);
    border-inline-start: var(--rule-width) solid var(--color-rule);
  }

  .site-logo {
    margin-inline-end: var(--space-3);
  }

  .nav-toggle {
    display: none;
  }

  .site-nav {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    padding: 0;
    background-color: transparent;
    color: inherit;
    transform: none;
    visibility: visible;
    transition: none;
  }

  .site-nav__list {
    flex-direction: row;
    gap: var(--space-4);
  }

  .site-nav__item,
  .site-nav__item:last-child {
    border: 0;
  }

  .site-nav__link {
    position: relative;
    display: inline-block;
    padding-block: var(--space-1);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--color-fg);
  }

  /* Pas de numérotation dans la barre desktop */
  .site-nav__link::before {
    content: none;
  }

  /* Filet qui se déploie sous l'item survolé */
  .site-nav__link::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: var(--rule-width);
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur) var(--ease);
  }

  .site-nav__link:hover {
    transform: none;
    color: var(--color-link);
  }

  .site-nav__link:hover::after {
    transform: scaleX(1);
  }

  /* Page courante : marqueur Chartreuse, unique accent du header */
  .site-nav__link[aria-current="page"]::after {
    background-color: var(--chartreuse);
    transform: scaleX(1);
  }

  .site-nav .lang-switch {
    --color-fg: var(--onyx);
    --color-muted: var(--onyx-70);
    --color-rule: var(--onyx-12);
    padding-inline-start: var(--space-4);
    border-inline-start: var(--rule-width) solid var(--color-rule);
  }

  /* Le CTA header se déploie uniquement en état condensé */
  .site-header__cta {
    --btn-pad-y: 10px;
    --btn-pad-x: var(--space-2);
    align-self: center;
    min-block-size: 40px;
    max-inline-size: 0;
    padding-inline: 0;
    border-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-inline-size var(--dur-slow) var(--ease),
                opacity var(--dur) var(--ease),
                padding-inline var(--dur-slow) var(--ease);
  }

  .site-header.is-condensed .site-header__cta {
    max-inline-size: 14rem;
    padding-inline: var(--btn-pad-x);
    border-width: var(--rule-width);
    opacity: 1;
  }

  .site-footer__bottom {
    margin-block-start: var(--space-12);
  }
}

/* --- Large : 1280px (--bp-large) --- */
@media (min-width: 1280px) {
  :root {
    --container-pad: var(--space-6);
  }

  .site-nav__list {
    gap: var(--space-6);
  }
}

/* --- Préférence de mouvement réduit : on coupe tout --- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* --- Impression --- */
@media print {
  .site-header,
  .site-nav,
  .btn {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}


/* ============================================
   10. PAGE : ACCUEIL (hero)
   ============================================ */

/* Hero éditorial : pas d'image de fond, pas de logo répété.

   Le logo géant a été retiré : il redoublait celui du header à trois cents
   pixels d'écart. Et la hauteur ne cherche plus à occuper tout l'écran —
   un hero qui réserve 88 % du viewport à trois lignes de texte fabrique du
   vide. C'est l'index des thématiques qui remplit désormais le bas du cadre,
   avec de l'information plutôt qu'avec de l'espace. */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-4);
  padding-block: var(--space-2) 0;
}

/* Le hero suit immédiatement le header : il n'a pas besoin du retrait
   d'une section de contenu, qui creusait une bande vide au chargement. */
.section--hero {
  padding-block-start: var(--space-4);
}

/* Surtitre : localise l'offre dès la première ligne (utile aussi
   au référencement local). */
.hero__eyebrow {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-muted);
}

.hero__title {
  font-size: var(--fs-display);
}

/* Le point final du slogan : accent Chartreuse (1 des 2 accents de la page) */
.hero__title .dot {
  color: var(--chartreuse);
}

.hero__lead {
  max-width: 52ch;
}

/* Ligne de méta qui clôt le hero : filet + repères factuels */
.hero__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: space-between;
  padding-block-start: var(--space-2);
  border-block-start: var(--rule-width) solid var(--color-rule);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-muted);
}

@media (min-width: 768px) {
  .section--hero {
    padding-block-start: var(--space-6);
  }

  .hero {
    padding-block: var(--space-4) 0;
  }
}

@media (min-width: 1024px) {
  .hero {
    gap: var(--space-6);
  }
}

/* Tuiles de renvoi (section Explorer) : le faux-CTA est un span décoratif —
   le vrai lien est le titre, dont l'overlay couvre toute la tuile.
   Le filet du CTA se déploie quand on survole la tuile entière. */
.tile__cta {
  align-self: flex-start;
  margin-block-start: auto;
  pointer-events: none;
}

.tile:hover .tile__cta {
  color: var(--color-link);
}

.tile:hover .tile__cta::after {
  inline-size: 100%;
}


/* ============================================
   11. PAGES INTERNES
   ============================================ */

/* --- En-tête de page ---
   Pas de "hero" répété sur les pages internes : un bloc titre calé bas,
   fermé par un filet. La page commence, elle ne se relance pas. */
.page-header {
  padding-block: var(--space-8) var(--space-6);
}

.page-header__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 44ch;
}

.page-header__title {
  font-size: var(--fs-h1);
}

.page-header__lead {
  color: var(--color-muted);
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.45;
}

/* Fil d'Ariane discret, utile au SEO et à l'orientation */
.breadcrumb {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-muted);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li + li::before {
  content: "/";
  margin-inline-end: var(--space-1);
  color: var(--color-rule);
}

.breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--color-fg);
}

/* --- Fiche longue (atelier, formule) ---
   Un filet haut, un grand numéro d'index, le contenu en colonne droite.
   C'est la tuile de la home, déployée en pleine page. */
.entry {
  padding-block-start: var(--space-4);
  border-block-start: var(--rule-width) solid var(--color-rule);
}

.entry + .entry {
  margin-block-start: var(--space-8);
}

.entry__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
}

.entry__index {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 1.8rem + 3vw, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--color-rule);
}

.entry__title {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

.entry__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Sous-bloc d'une fiche : "La masterclass", "L'activité fonctionnelle"… */
.block__label {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-block-end: var(--space-1);
}

.block__text {
  max-width: var(--measure);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: 0;
  list-style: none;
}

/* --- Liste à puces éditoriale : tiret cadratin, pas de rond --- */
.list-dash {
  padding: 0;
  list-style: none;
  max-width: var(--measure);
}

.list-dash > li {
  position: relative;
  padding-inline-start: var(--space-3);
  color: var(--color-muted);
}

.list-dash > li + li {
  margin-block-start: var(--space-1);
}

.list-dash > li::before {
  content: "—";
  position: absolute;
  inset-inline-start: 0;
  color: var(--color-rule);
}

/* --- Tableau comparatif (page Formules) --- */
.table-wrap {
  overflow-x: auto;
  margin-block-start: var(--space-4);
}

.compare {
  inline-size: 100%;
  min-inline-size: 620px;
  text-align: left;
  font-size: var(--fs-small);
}

.compare th,
.compare td {
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  border-block-end: var(--rule-width) solid var(--color-rule);
  vertical-align: top;
}

.compare thead th {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: -0.01em;
  border-block-end-color: var(--color-fg);
}

.compare tbody th {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-muted);
  inline-size: 26%;
}

.compare tbody tr:last-child th,
.compare tbody tr:last-child td {
  border-block-end: 0;
}

/* --- FAQ : <details> natif, zéro JS --- */
.faq {
  border-block-start: var(--rule-width) solid var(--color-rule);
}

.faq__item {
  border-block-end: var(--rule-width) solid var(--color-rule);
}

.faq__question {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur) var(--ease);
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question:hover {
  color: var(--color-link);
}

/* Marqueur + / − dessiné en CSS */
.faq__question::after {
  content: "";
  flex: none;
  inline-size: 12px;
  block-size: 12px;
  border-inline-end: var(--rule-width) solid currentColor;
  border-block-end: var(--rule-width) solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--dur) var(--ease);
}

.faq__item[open] .faq__question::after {
  transform: translateY(2px) rotate(-135deg);
}

.faq__answer {
  padding-block-end: var(--space-3);
  color: var(--color-muted);
  max-width: var(--measure);
}

/* --- Fondateurs (page À propos) --- */
.person__portrait {
  margin: 0 0 var(--space-3);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--color-rule);
}

.person__portrait img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.person__role {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-block-start: var(--space-1);
}

.person__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
}

/* --- Encadré latéral (page Contact) --- */
.info-block + .info-block {
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-4);
  border-block-start: var(--rule-width) solid var(--color-rule);
}

.info-block__label {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-block-end: var(--space-1);
}

/* --- Page de confirmation / 404 : bloc centré vertical --- */
.notice {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
  justify-content: center;
  min-block-size: 60svh;
  max-width: 48ch;
}


/* ============================================
   12. RESPONSIVE — PAGES INTERNES
   ============================================ */

@media (min-width: 768px) {
  .page-header {
    padding-block: var(--space-12) var(--space-8);
  }
}

@media (min-width: 1024px) {
  /* Fiche longue : index + titre à gauche, contenu à droite */
  .entry {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--space-8);
  }

  .entry__aside {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--space-3));
    align-self: start;
  }

  .entry + .entry {
    margin-block-start: var(--space-12);
  }

  .compare tbody th {
    inline-size: 22%;
  }
}


/* ============================================
   13. RECENTRAGE ÉDITORIAL
   ============================================ */

/*  Le site était calé au fer à gauche : sur un écran large, les blocs de texte
    (limités à ~40 caractères pour rester lisibles) laissaient un vide important
    à droite et le regard tombait toujours dans le même coin.

    Les blocs éditoriaux — en-têtes de page, en-têtes de section, hero, blocs de
    conclusion — sont donc désormais centrés dans la page. Le texte lui-même reste
    centré aussi : c'est ce qui rend l'ensemble symétrique.

    Ce qui n'est PAS centré, volontairement : les fiches longues (.entry), les
    blocs .split et le tableau comparatif. Ce sont des contenus de lecture suivie,
    où le fer à gauche reste plus lisible — et l'alternance entre blocs centrés et
    blocs alignés donne son rythme à la page. */

.section-head {
  align-items: center;
  margin-inline: auto;
  text-align: center;
  max-width: 46ch;
}

/* Le bloc de conclusion porte un titre au calibre d'un h1 : il lui faut plus
   de largeur que les en-têtes courants, sinon il se casse en cinq lignes.
   (Attention : `ch` se calcule sur la taille du texte du conteneur, pas sur
   celle du titre — d'où une valeur qui paraît généreuse.) */
.section-head--wide {
  max-width: 62ch;
}

/* L'overline est un flex (carré + texte) : il faut recentrer son contenu */
.section-head .overline,
.page-header__inner .overline,
.notice .overline {
  justify-content: center;
}

.section-head .lead,
.page-header__lead {
  margin-inline: auto;
}

/* Groupes de boutons sous un bloc centré */
.section-head + .btn-group,
.section-head + .reveal > .btn-group,
.notice .btn-group {
  justify-content: center;
}

/* Lien isolé de fin de section (« Voir tous les ateliers ») */
.section > .container > .u-mt-6 {
  text-align: center;
}

/* --- En-tête de page --- */
.page-header__inner {
  align-items: center;
  margin-inline: auto;
  text-align: center;
  max-width: 52ch;
}

.breadcrumb ol {
  justify-content: center;
}

/* --- Hero --- */
.hero {
  align-items: center;
  text-align: center;
}

.hero__lead {
  margin-inline: auto;
}

.hero__foot {
  inline-size: 100%;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
}

.hero .btn-group {
  justify-content: center;
}

/* --- Page de confirmation / 404 --- */
.notice {
  align-items: center;
  margin-inline: auto;
  text-align: center;
}

/* --- Tuiles ---
   Le texte des tuiles reste au fer à gauche : centrer trois paragraphes
   côte à côte rendrait les bords irréguliers et la lecture pénible. */
.tile__text {
  max-width: none;
}


/* ============================================
   14. SECTION DE CONCLUSION (CTA)
   ============================================ */

/*  Dernier bloc avant le pied de page, donc dernière chose que voit un
    visiteur qui parcourt vite. Trois choses le distinguent d'une section
    ordinaire : le fond sombre, un titre au calibre d'un h1, et un filet
    franc qui le sépare du footer — sans quoi les deux fonds noirs se
    fondaient en un seul pavé et la section disparaissait. */
.section--cta {
  border-block-end: var(--rule-width) solid var(--parchment-16);
}

.section--cta .section-head h2 {
  font-size: var(--fs-h1);
}

.cta-layout {
  display: grid;
  gap: var(--space-6);
}

/* --- Mini-formulaire intégré ---
   Trois champs, pas un de plus. Chaque page intermédiaire vers un formulaire
   coûte une part des visiteurs : celui-ci s'envoie sans quitter la page. */
.cta-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 520px;
  margin-inline: auto;
  inline-size: 100%;
  text-align: left;   /* le formulaire reste au fer à gauche, lisibilité oblige */
}

.cta-form .field__label {
  color: var(--color-muted);
}

/* --- Signaux de réassurance ---
   Micro-copie factuelle placée au contact du bouton : c'est là qu'elle lève
   les dernières réserves, pas en bas de page. */
.trust-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.trust-list > li {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Coche dessinée en CSS — aucune image, aucun caractère décoratif */
.trust-list > li::before {
  content: "";
  flex: none;
  inline-size: 5px;
  block-size: 9px;
  border-inline-end: var(--rule-width) solid var(--chartreuse);
  border-block-end: var(--rule-width) solid var(--chartreuse);
  transform: rotate(45deg) translateY(-1px);
}

/* Repli e-mail : certains destinataires préfèrent écrire depuis leur messagerie
   plutôt que remplir un champ dans un navigateur. */
.cta-fallback {
  font-size: var(--fs-small);
  color: var(--color-muted);
  text-align: center;
}

@media (min-width: 1024px) {
  .cta-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-12);
    align-items: center;
  }

  /* En deux colonnes, le bloc de texte se recale à gauche face au formulaire :
     deux colonnes centrées l'une à côté de l'autre flotteraient. */
  .cta-layout .section-head {
    align-items: flex-start;
    text-align: left;
    margin-inline: 0;
    margin-block-end: 0;
    max-width: 26ch;
  }

  .cta-layout .section-head .overline {
    justify-content: flex-start;
  }

  .cta-layout .section-head .lead {
    margin-inline: 0;
  }

  .cta-layout .trust-list,
  .cta-layout .cta-fallback {
    justify-content: flex-start;
    text-align: left;
  }

  .cta-form {
    margin-inline: 0;
  }
}


/* ============================================
   15. CADRAGE TYPOGRAPHIQUE
   ============================================ */

/*  Sans photographie, c'est la typographie qui porte la page — et pour cela
    il lui faut une charpente. Un texte posé sur du blanc n'est pas « épuré »,
    il est simplement non composé.

    Trois outils, employés partout et rien qu'eux :
      1. le filet, qui délimite et met en rapport ;
      2. la colonne, qui aligne ;
      3. le contraste d'échelle, qui hiérarchise.

    Les filets ne sont pas décoratifs : chacun sépare deux choses réellement
    de nature différente. C'est ce qui distingue une grille d'une ornementation. */


/* --- Grille filetée -------------------------------------------------------
   Des colonnes séparées par un trait vertical plutôt que par du vide seul :
   la relation entre les éléments devient lisible, et l'œil sait où commence
   et où finit une unité de lecture. */
.grid--ruled {
  gap: 0;
}

.grid--ruled > * {
  padding-block: var(--space-3);
  border-block-start: var(--rule-width) solid var(--color-rule);
}

/*  Les filets verticaux ne s'appliquent qu'a partir du moment ou la grille
    est reellement sur plusieurs colonnes. Sinon le retrait interieur decale
    le texte par rapport au titre de section, et la colonne unique parait
    mal alignee — c'etait le cas entre 768 et 1024 px pour les grilles de
    trois, qui ne se scindent qu'a 1024. */
@media (min-width: 768px) {
  .grid--ruled.grid--2 > *,
  .grid--ruled.grid--4 > * {
    padding-inline: var(--space-3);
    border-inline-start: var(--rule-width) solid var(--color-rule);
  }

  /* Premier de chaque rangee : cale sur le bord du texte courant. */
  .grid--ruled.grid--2 > *:nth-child(2n + 1),
  .grid--ruled.grid--4 > *:nth-child(2n + 1) {
    border-inline-start: 0;
    padding-inline-start: 0;
  }
}

@media (min-width: 1024px) {
  .grid--ruled.grid--3 > * {
    padding-inline: var(--space-3);
    border-inline-start: var(--rule-width) solid var(--color-rule);
  }

  /* La grille de quatre passe de deux a quatre colonnes : les separateurs
     changent de rythme. */
  .grid--ruled.grid--4 > *:nth-child(2n + 1) {
    border-inline-start: var(--rule-width) solid var(--color-rule);
    padding-inline-start: var(--space-3);
  }

  .grid--ruled.grid--3 > *:nth-child(3n + 1),
  .grid--ruled.grid--4 > *:nth-child(4n + 1) {
    border-inline-start: 0;
    padding-inline-start: 0;
  }
}


/* --- Exergue --------------------------------------------------------------
   Une phrase extraite du propos, composée en grand, qui coupe un bloc de
   prose et donne un point d'entrée à la lecture en diagonale. Seul endroit
   du site où l'échelle change au milieu d'un texte suivi. */
.pull {
  margin: var(--space-6) 0;
  padding-block-start: var(--space-3);
  border-block-start: 2px solid var(--color-fg);
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
  max-width: 32ch;
}

.pull cite {
  display: block;
  margin-block-start: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-style: normal;
  font-weight: 500;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-muted);
}


/* --- Table de caractéristiques -------------------------------------------
   Remplace la rangée d'étiquettes flottantes : durée, effectif et matériel
   sont des données de même nature, elles se lisent mieux alignées en colonne
   qu'éparpillées en pastilles. */
.specs {
  margin: 0;
  inline-size: 100%;
  border-block-start: var(--rule-width) solid var(--color-rule);
}

.specs__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: baseline;
  padding-block: 10px;
  border-block-end: var(--rule-width) solid var(--color-rule);
}

.specs dt {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-muted);
}

.specs dd {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: 600;
  text-align: right;
}


/* --- Sous-blocs d'une fiche ----------------------------------------------
   Les paragraphes d'une fiche s'enchaînaient sans respiration : un filet
   entre chacun sépare les registres — le constat, le contenu, l'activité —
   et donne au lecteur des points d'accroche. */
.entry__body {
  counter-reset: bloc;
}

.entry__body > div + div {
  padding-block-start: var(--space-3);
  border-block-start: var(--rule-width) solid var(--color-rule);
}

.entry__body > div {
  counter-increment: bloc;
}

.block__label {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

/* Numérotation automatique : la fiche se lit comme une séquence, ce qu'elle
   est. Rien à écrire dans le HTML. */
.entry__body > div > .block__label::before {
  content: counter(bloc, decimal-leading-zero);
  font-family: var(--font-heading);
  font-variant-numeric: tabular-nums;
  color: var(--color-rule);
}


/* --- Ouverture de section -------------------------------------------------
   Un filet pleine largeur ouvre chaque en-tête de section : il marque le
   changement de sujet plus nettement que l'alternance de fonds seule, et
   rattrape les sections qui se suivent sur un même fond. */
.section-head {
  position: relative;
  padding-block-start: var(--space-3);
}

.section-head::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: 100%;
  block-size: var(--rule-width);
  background-color: var(--color-rule);
}

/* Dans le bloc de conclusion, l'en-tête est calé à gauche en deux colonnes :
   le filet doit suivre le texte, pas le centre de la page. */
@media (min-width: 1024px) {
  .cta-layout .section-head::before {
    inset-inline-start: 0;
    translate: none;
  }
}


/* ============================================
   16. SURFACES & CARTES
   ============================================ */

/*  Une carte, ici, n'est pas une boîte flottante à coins ronds : c'est une
    surface franche, posée sur le fond, tenue par un filet. Les angles restent
    vifs — c'est la signature du site, et ce qui le distingue d'un gabarit SaaS.

    Ce qui remplace l'ombre portée pour créer la profondeur : le mouvement.
    Au repos la carte est plate et calme ; au survol un aplat sombre monte du
    bas, le texte s'inverse, l'accent s'allume. Toute l'animation tient en deux
    propriétés composées par le GPU (transform, opacity) plus des couleurs —
    aucun recalcul de mise en page, donc aucune saccade. */

:root {
  /* Surfaces : deux crans au-dessus et en dessous du fond courant.
     Dérivées de la palette, jamais de nouvelle teinte. */
  --surface: #FFFFFF;              /* carte sur fond Parchment */
  --surface-raised: #FAFAF8;
  --shadow-hover: 0 2px 0 var(--color-fg);

  /* Compléments à l'échelle d'espacement (base 8 + deux demi-pas) */
  --space-05: 4px;
  --space-15: 12px;
}

.theme-dark,
.section--dark {
  /* Sur fond Onyx, la surface s'éclaircit au lieu de blanchir */
  --surface: #171717;
  --surface-raised: #1E1E1E;
  --shadow-hover: 0 2px 0 var(--color-fg);
}


/* --- Carte ---------------------------------------------------------------- */

.card {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background-color: var(--surface);
  border: var(--rule-width) solid var(--color-rule);
  border-radius: 0;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

/* L'aplat qui monte au survol. Il est sous le contenu (z-index) et se déploie
   depuis le bas : le geste évoque un remplissage, pas un simple changement
   de couleur. */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-fg);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--dur-slow) var(--ease);
}

.card:hover,
.card:focus-within {
  border-color: var(--color-fg);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.card:hover::before,
.card:focus-within::before {
  transform: scaleY(1);
}

/* Inversion du contenu pendant que l'aplat monte */
.card:hover .card__title,
.card:focus-within .card__title,
.card:hover .card__text,
.card:focus-within .card__text,
.card:hover .card__index,
.card:focus-within .card__index {
  color: var(--color-bg);
}

.card:hover .card__icon,
.card:focus-within .card__icon {
  color: var(--chartreuse);
  transform: translateY(-2px);
}

.card:hover .card__arrow,
.card:focus-within .card__arrow {
  color: var(--chartreuse);
  transform: translateX(var(--space-05));
}

@media (min-width: 1024px) {
  .card {
    padding: var(--space-4);
  }
}

/* Éléments de carte */
.card__icon {
  display: block;
  inline-size: 32px;
  block-size: 32px;
  color: var(--color-fg);
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.card__index {
  font-family: var(--font-heading);
  font-size: var(--fs-micro);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  transition: color var(--dur) var(--ease);
}

.card__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  transition: color var(--dur) var(--ease);
}

.card__text {
  color: var(--color-muted);
  transition: color var(--dur) var(--ease);
}

/* Pied de carte : poussé en bas pour aligner les cartes d'une même rangée */
.card__foot {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-block-start: auto;
  padding-block-start: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-fg);
  transition: color var(--dur) var(--ease);
}

.card:hover .card__foot,
.card:focus-within .card__foot {
  color: var(--chartreuse);
}

.card__arrow {
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* Carte entièrement cliquable, sans imbriquer de balises interactives */
.card__link {
  color: inherit;
  text-decoration: none;
}

.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Carte mise en avant (formule recommandée) */
.card--featured {
  border-color: var(--color-fg);
  border-width: 2px;
}

.card__flag {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  z-index: 2;
  padding: var(--space-05) var(--space-1);
  background-color: var(--chartreuse);
  color: var(--onyx);
  font-family: var(--font-heading);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
}

/* Une carte non cliquable ne doit pas s'animer comme si elle l'était */
.card--static:hover,
.card--static:focus-within {
  transform: none;
  box-shadow: none;
}

.card--static:hover::before,
.card--static:focus-within::before {
  transform: scaleY(0);
}

.card--static:hover .card__title,
.card--static:hover .card__text,
.card--static:hover .card__index {
  color: inherit;
}


/* --- Chiffre-clé ---------------------------------------------------------- */

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
  padding-block: var(--space-2);
}

.stat__value {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ls-display);
}

.stat__label {
  font-size: var(--fs-small);
  color: var(--color-muted);
  max-width: 28ch;
}


/* --- Ligne d'avantages (sous un formulaire) ------------------------------- */

.perks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.perks > li {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.perks svg {
  flex: none;
  inline-size: 14px;
  block-size: 14px;
  color: var(--chartreuse);
}


/* ============================================
   17. PLACEHOLDERS « À FOURNIR PAR LE CLIENT »
   ============================================ */

/*  Ces blocs balisent chaque zone dont le contenu n'a pas encore été livré.
    Ils sont volontairement voyants : leur rôle est d'être vus, comptés et
    remplis, pas de se fondre dans la page. Chacun porte un data-todo-id
    identique entre FR et EN, ce qui permet à /_todos.html de les agréger.

    Ils utilisent un jaune d'avertissement hors palette de marque — c'est
    délibéré : un balisage de chantier ne doit pas pouvoir être confondu
    avec du contenu définitif. Tout disparaît le jour où le dernier bloc
    est rempli. */

.todo-client {
  margin-block: var(--space-2);
  padding: var(--space-3);
  background-color: #FFF9E6;
  border: 2px dashed #E5B84B;
  color: #6B5518;
  text-align: left;
}

.todo-client__label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-block-end: var(--space-15);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8A6D1F;
}

.todo-client__label svg {
  flex: none;
  inline-size: 16px;
  block-size: 16px;
}

.todo-client__brief strong {
  display: block;
  margin-block-end: var(--space-05);
  font-family: var(--font-heading);
  font-size: 1rem;
  color: #4A3A0F;
}

.todo-client__brief p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #6B5518;
  max-width: 68ch;
}

.todo-client__id {
  display: inline-block;
  margin-block-start: var(--space-1);
  padding: 2px 6px;
  background-color: rgba(138, 109, 31, 0.12);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: #8A6D1F;
}

/* Sur fond sombre, l'encadré garde ses couleurs d'avertissement : c'est
   justement ce qui le signale comme extérieur au design. */
.section--dark .todo-client {
  background-color: #FFF9E6;
}

/* Ni imprimé, ni lu par la synthèse vocale d'un visiteur réel */
@media print {
  .todo-client,
  .dev-counter {
    display: none !important;
  }
}


/* --- Compteur de chantier (visible en local uniquement) ------------------- */

.dev-counter {
  position: fixed;
  inset-block-end: var(--space-2);
  inset-inline-end: var(--space-2);
  z-index: 80;
  display: none;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background-color: #FFF9E6;
  border: 1px solid #E5B84B;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: #6B5518;
  text-decoration: none;
}

/* La classe est posée par main.js quand le site tourne en local. */
.env-dev .dev-counter {
  display: flex;
}

/* Plus rien à compléter : le compteur s'efface. Sans cette règle, le
   display:flex ci-dessus l'emporterait sur l'attribut hidden posé par le JS. */
.dev-counter[hidden] {
  display: none !important;
}

.dev-counter:hover {
  background-color: #E5B84B;
  color: #4A3A0F;
}


/* ============================================
   18. CONTENUS DÉFINITIFS (septembre 2026)
   ============================================ */

/* Accroche du haut de page : sous le sous-titre, plus dense que lui.
   C'est le paragraphe qui explique l'offre à un lecteur qui ne connaît pas. */
.hero__pitch {
  max-width: 62ch;
  margin-inline: auto;
  color: var(--color-muted);
}

/* Source d'un chiffre-clé. Toujours affichée : un chiffre sans source
   n'engage personne, et celui qui le lit a le droit de le vérifier. */
.stat__source {
  margin-block-start: var(--space-1);
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  color: var(--color-muted);
  opacity: 0.8;
}

/* L'en-tête de page porte désormais la même pastille que les sections. */
.page-header__inner .overline {
  order: -1;
}


/* ============================================
   19. RETOURS CLIENT (22/09/2026)
   ============================================ */

/*  Le point final de chaque titre passe en Chartreuse. Il était jusque-là
    réservé au slogan du hero et à la signature du pied de page ; le client
    en fait la ponctuation de la marque, présente sur tous les titres.

    C'est la seule extension consentie à l'accent : un point de deux
    millimètres ne « remplit » pas, il signe. La règle d'origine — pas de
    Chartreuse en aplat, ni en bordure décorative — reste entière. */
.dot {
  color: var(--chartreuse);
}

/* --- Tuiles du format : alignement des étiquettes de durée ---------------
   « Échange libre » flottait plus haut que les « 1 heure » voisines, parce
   que le texte de la pause est plus court. L'étiquette est désormais
   poussée en bas de sa tuile : les trois se lisent sur une même ligne. */
.tile .tag {
  align-self: flex-start;
  margin-block-start: auto;
}

/* --- Icône de thématique sur les fiches d'atelier ------------------------
   La même icône que sur la carte du sommaire, reprise en tête de fiche :
   le lecteur qui arrive par une ancre reconnaît l'atelier sans remonter. */
.entry__icon {
  display: block;
  inline-size: 40px;
  block-size: 40px;
  margin-block-end: var(--space-1);
  color: var(--color-fg);
}

@media (min-width: 1024px) {
  .entry__icon {
    inline-size: 48px;
    block-size: 48px;
  }
}


/* ============================================
   20. PIED DE PAGE — INFORMATIONS LÉGALES
   ============================================ */

/*  Rangée de liens obligatoires, séparée du reste du pied de page par un
    filet. Volontairement discrète : ces pages doivent être atteignables
    depuis chaque page du site, sans concurrencer la navigation réelle. */
.site-footer__legal {
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-3);
  border-block-start: var(--rule-width) solid var(--color-rule);
}

.site-footer__legal-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
}

/* Séparateur typographique entre les liens, décoratif donc masqué
   aux technologies d'assistance par ::before sur un conteneur vide. */
.site-footer__legal-list > li + li::before {
  content: "·";
  margin-inline-end: var(--space-3);
  color: var(--color-muted);
}

/* --- Pages légales : densité de lecture ---------------------------------
   Un texte juridique se lit en continu, pas en diagonale : interlignage
   confortable, listes aérées, et un rythme de titres plus serré que sur
   les pages commerciales. */
.container--narrow .prose > * + * {
  margin-block-start: var(--space-3);
}

.container--narrow .list-dash > li + li {
  margin-block-start: var(--space-1);
}

.container--narrow h2 {
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: var(--ls-overline);
  color: var(--color-muted);
}

/* --- Mention RGPD sous un formulaire ------------------------------------ */
.form-privacy {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--color-muted);
  max-width: var(--measure);
}


/* --- Message d'envoi bloqué ---------------------------------------------
   Apparaît sous le bouton tant que le consentement n'est pas donné. Un
   bouton grisé sans explication envoie chercher l'erreur ailleurs dans le
   formulaire ; une ligne suffit à lever le doute. */
.form-blocked {
  margin-block-start: calc(var(--space-2) * -1 + var(--space-1));
  font-size: var(--fs-small);
  color: var(--color-muted);
}

.form-blocked::before {
  content: "";
  display: inline-block;
  inline-size: 6px;
  block-size: 6px;
  margin-inline-end: var(--space-1);
  background-color: var(--chartreuse);
  vertical-align: middle;
}


/* --- Grille des portraits -----------------------------------------------
   La grille filetée ajoute un retrait intérieur à toutes les colonnes sauf
   la première : les deux portraits n'avaient donc pas exactement la même
   largeur, ce qui se voit immédiatement sur deux visages côte à côte. Ici
   on sépare par une gouttière plutôt que par un filet, et les colonnes
   restent rigoureusement égales. */
.grid--portraits {
  gap: var(--space-4);
}

@media (min-width: 1024px) {
  .grid--portraits {
    gap: var(--space-8);
  }
}