/*
Theme Name: Dale Carnegie France
Theme URI: https://www.dalecarnegie.fr
Description: Child theme GeneratePress — refonte 2026, code-first, sortie d'Elementor.
Author: Dale Carnegie France
Template: generatepress
Version: 1.1.0
Text Domain: dalecarnegie-child
*/

/* =========================================================================
   Design system — système typographique arrêté le 15/08/2026.

   Sanchez porte les titres, Work Sans porte tout le reste. C'est
   l'inverse du montage précédent, où le slab tenait le corps du texte
   et la grotesque les titres.

   Deux raisons de fond :

   1. Sanchez en corps de texte alourdit la lecture — c'est ce que fait
      le site actuel, qui l'applique à `body, h1..h6` sans distinction.
      Une slab égyptienne donne de l'autorité à un titre et fatigue sur
      un paragraphe.
   2. Neue Haas Grotesk Display est sous licence commerciale et n'a
      jamais été livrée : le site tournait en Arial depuis le début.
      Sanchez et Work Sans sont sous licence libre (OFL) et déjà
      auto-hébergées — le système typographique devient enfin réel.

   Les @font-face vivent dans assets/css/fonts.css, chargé seulement si
   les fichiers sont présents (voir functions.php). Repli Georgia pour
   les titres, Arial pour le reste ; Helvetica reste interdite.
   ========================================================================= */

:root {
  /* Familles — nommées par leur rôle, pas par leur dessin */
  --font-titre: "Sanchez", Georgia, "Times New Roman", serif;
  --font-ui: "Work Sans", Arial, sans-serif;

  /* Graisses.
     Sanchez ne connaît que 400 : les titres portent --fw-titre, jamais
     --fw-bold, sous peine de faux gras synthétisé par le navigateur.
     Work Sans est variable de 400 à 700 — 300 n'existe pas. */
  --fw-titre: 400;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* Échelle fluide — min 360px, max 1440px */
  --fs-h1: clamp(2.25rem, 1.55rem + 2.4vw, 3.5rem);
  --fs-subtitle: clamp(1.375rem, 1.09rem + 1vw, 1.875rem);
  --fs-h2: clamp(1.75rem, 1.42rem + 1.4vw, 2.5rem);
  --fs-h3: clamp(1.375rem, 1.22rem + 0.65vw, 1.75rem);
  --fs-h4: clamp(1.1875rem, 1.13rem + 0.28vw, 1.375rem);
  --fs-callout: clamp(1.375rem, 1.18rem + 0.8vw, 1.75rem);
  --fs-lead: clamp(1.25rem, 1.19rem + 0.28vw, 1.4375rem);
  --fs-body: clamp(1.125rem, 1.08rem + 0.2vw, 1.1875rem);
  --fs-aside: 1rem;
  --fs-small: 0.9375rem;
  --fs-legal: 1rem;

  /* Interlignages */
  --lh-tight: 1.1;
  --lh-title: 1.2;
  --lh-lead: 1.5;
  /* 1,6 et non 1,7 : Work Sans a une hauteur d'x plus généreuse que le
     slab qu'elle remplace et n'a pas besoin d'autant d'air pour rester
     lisible. Au-delà, les lignes se délient. */
  --lh-body: 1.6;

  /* Couleurs — charte p. 27 */
  --c-text: #1a1a1a;
  --c-text-muted: #4a4d52;

  /* Liens en anthracite souligné — décision du 14/08.
     Le bleu #2f519a appartient au jeu 3, réservé aux supports
     Enterprise (charte p. 58), et aucune couleur des jeux 1 et 2
     n'atteint les 4,5:1 exigés pour du texte. Le soulignement porte
     donc seul l'affordance du lien, et la couleur de marque reste
     aux filets, aux fonds et aux boutons. */
  --c-link: #1a1a1a;
  --c-link-survol: #bc5b08; /* orange assombri, 4,53:1 sur blanc */
  /* Orange PMS 151 C — charte p. 27. Fonds et filets UNIQUEMENT,
     jamais en texte : 2,59:1 sur blanc. Alias de --c-orange. */
  --c-accent: #f58220;
  --c-accent-dark: #e07310; /* survol des boutons à fond orange */
  --c-bg: #ffffff;
  --c-bg-alt: #f6f6f4;
  --c-border: #e3e3e0;

  /* =======================================================
     Palette de marque — valeurs officielles
     Source : Charte graphique.pdf, p. 27-28 « Brand Color
     Palette » et p. 58 « Enterprise Color Palette ».

     Trois jeux de couleurs. Règle de la charte (p. 28) : on ne
     mélange pas les couleurs d'un jeu avec celles d'un autre —
     l'interdit porte sur la superposition et le dégradé, qui
     produisent une teinte terne.

     Chaque couleur existe en deux valeurs :
       --c-X       teinte officielle, pour les aplats, les fonds
                   et les filets épais ;
       --c-X-fonce déclinaison assombrie à teinte constante, pour
                   les pictogrammes et le texte d'accent. Les
                   quatre primaires plafonnent entre 1,6 et 2,6:1
                   sur blanc : illisibles en trait fin, elles
                   doivent être assombries (4,5:1 atteint).
     ======================================================= */

  /* Jeu 1 — orange et jaune */
  --c-orange: #f58220;        /* PMS 151 C */
  --c-orange-fonce: #bc5b08;
  --c-orange-pale: #fef5ed;
  --c-jaune: #ffc708;         /* PMS 123 C */
  --c-jaune-fonce: #937200;
  --c-jaune-pale: #fffbeb;

  /* Jeu 2 — vert et turquoise */
  --c-vert: #84c44c;          /* PMS 367 C */
  /* Assombri le 17/08 : #54832b tenait 4,26:1 sur le vert pâle, sous le
     seuil AA de 4,5 relevé par Lighthouse sur la pastille CPF. #4d7827
     monte à 4,92:1 sur ce fond et à 5,21:1 en blanc dessus, pour un
     vert que l'œil ne distingue pas du précédent. */
  --c-vert-fonce: #4d7827;
  --c-vert-pale: #f5faf1;
  --c-turquoise: #00b6b3;     /* PMS 319 C */
  --c-turquoise-fonce: #008381;
  --c-turquoise-pale: #ebf9f9;

  /* Jeu 3 — bleu et violet. La charte (p. 58) les réserve aux
     supports Enterprise ; Damien l'ouvre au site le 16/08. Avec le
     navy, ces deux teintes portent les trois thèmes que les jeux 1
     et 2 ne pouvaient plus distinguer : sept programmes, sept
     couleurs. */
  --c-bleu: #0090cf;          /* PMS 2925 C — 3,57:1 sur blanc */
  --c-bleu-fonce: #007eb4;    /* 4,52:1, seuil AA pour un picto */
  --c-bleu-pale: #ebf6fb;
  --c-violet: #7c7fbd;        /* PMS 2715 C — 3,73:1 sur blanc */
  --c-violet-fonce: #6d70b5;  /* 4,53:1, seuil AA pour un picto */
  --c-violet-pale: #f7f7fb;

  /* Dégradés — un jeu à la fois.
     La charte (p. 28) construit chaque dégradé sur les deux primaires
     d'un même jeu, la couleur de recouvrement étant la teinte
     « limited use ». Mélanger deux jeux est explicitement proscrit :
     le dégradé turquoise → jaune des bannières LinkedIn de juillet
     2026 traversait le jeu 2 vers le jeu 1, il a été ramené dans le
     jeu 2 (décision du 14/08).

     Jeu 1 : orange → jaune, recouvrement #ef4e22.
     Jeu 2 : turquoise → vert, recouvrement #008e54.
     Jeu 3 : bleu → violet, recouvrement #2f519a — Enterprise. */
  --degrade-jeu1: linear-gradient(90deg, #f58220 0%, #ffc708 100%);
  --degrade-jeu2: linear-gradient(90deg, #00b6b3 0%, #84c44c 100%);
  /* Jeu 3, ajouté le 17/08 pour les blocs Mission / Vision / Valeurs de
     la page Héritage, qui reprennent les trois dégradés du site
     d'origine. Sens violet vers bleu, comme sur la page d'origine. */
  --degrade-jeu3: linear-gradient(90deg, #7c7fbd 0%, #0090cf 100%);

  /* Signature du site : le jeu 2, qui conserve le turquoise. */
  --degrade-marque: var(--degrade-jeu2);

  /* Nuances structurantes dérivées du bleu de la charte */
  --c-navy: #1b2a4a;       /* bandes sombres, titres inversés */
  --c-navy-deep: #131f38;  /* footer */
  --c-navy-line: #2c3d63;  /* filets sur fond navy */
  /* Le navy sert aussi d'accent de thème depuis le 16/08
     (« L'art du feedback »). À 14,22:1 il n'a pas besoin d'être
     assombri : sa déclinaison « foncé » est lui-même. */
  --c-navy-fonce: #1b2a4a;
  --c-navy-pale: #eef1f7;
  --c-inverse-text: #f4f6fa;
  --c-inverse-muted: #b9c3d8;

  /* Flèche sortante, posée en masque sur les liens qui quittent le site.
     Le tracé reprend celui du pictogramme « fleche » de
     template-parts/icone.php, tourné vers le haut à droite. Le trait est
     noir : un masque ne retient que l'opacité, la couleur vient de
     `background-color`. */
  --fleche-sortante: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 17.5 17.5 6.5'/%3E%3Cpath d='M9 6.5h8.5V15'/%3E%3C/svg%3E");

  /* Ombres */
  --shadow-card: 0 1px 2px rgba(19, 31, 56, 0.06), 0 4px 14px rgba(19, 31, 56, 0.06);
  --shadow-card-hover: 0 2px 4px rgba(19, 31, 56, 0.08), 0 12px 28px rgba(19, 31, 56, 0.12);

  /* Rythme */
  --space-section: clamp(3rem, 2rem + 4vw, 6rem);
  --content-width: 1140px;

  /* Hauteur de l'en-tête collant : 84 px de barre plus les 4 px du
     filet dégradé. La barre tient sa hauteur du `line-height: 60px`
     que GeneratePress pose sur les liens du menu et sur le bouton
     burger, à quoi s'ajoutent les 0,75 rem de marge intérieure haute
     et basse. Elle vaut donc autant sur téléphone que sur écran large,
     et le logo, plus petit que cette hauteur, ne la commande jamais.
     Tout ce qui doit se placer sous l'en-tête s'y réfère. */
  --h-entete: 89px;
}

* {
  font-synthesis: none;
}

/* =========================================================================
   Base
   ========================================================================= */

body {
  /* Aucune graisse ni italique fabriqués par le navigateur : si un
     fichier manque, on veut le voir plutôt que subir un rendu approximatif
     qui varie d'un système à l'autre (TYPOGRAPHIE.md §2). */
  font-synthesis: none;
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-bg);
}

/* ---- Titres : le slab porte l'autorité ----

   Sanchez sur H1 à H3, Work Sans à partir de H4. La bascule tombe là
   parce qu'un H4 n'est plus un titre de section mais une étiquette de
   bloc : il vit au milieu de l'interface, il en prend la voix.

   Aucun tracking négatif ici : le -0,02em du montage précédent était
   calibré pour une grotesque. Sur une égyptienne il ferait mordre les
   empattements les uns sur les autres. */

h1 {
  font-family: var(--font-titre);
  font-weight: var(--fw-titre);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: normal;
  color: var(--c-text);
  text-wrap: balance;
  max-width: 22ch;
}

/* Sous-titre en Medium : à ce corps, le Regular manque de tenue sous un
   titre en Sanchez, et le Bold entrerait en concurrence avec lui. */
.subtitle {
  font-family: var(--font-ui);
  font-weight: var(--fw-medium);
  font-size: var(--fs-subtitle);
  line-height: 1.4;
  color: var(--c-text);
  max-width: 40ch;
  margin-top: 0.5em;
}

h2 {
  font-family: var(--font-titre);
  font-weight: var(--fw-titre);
  font-size: var(--fs-h2);
  line-height: var(--lh-title);
  letter-spacing: normal;
  color: var(--c-text);
  margin-block: 2.5em 0.6em;
  text-wrap: balance;
}

h3 {
  font-family: var(--font-titre);
  font-weight: var(--fw-titre);
  font-size: var(--fs-h3);
  line-height: var(--lh-title);
  letter-spacing: normal;
  color: var(--c-text);
  margin-block: 1.8em 0.5em;
}

/* H4 : étiquette de bloc, donc interface — Work Sans en Bold. */
h4 {
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  line-height: 1.35;
  color: var(--c-text);
  margin-block: 1.4em 0.4em;
}

/* H5/H6 : volontairement non stylés — un contenu qui en a besoin
   doit être scindé en deux pages (TYPOGRAPHIE.md §6). */

/* ---- Corps : le slab porte la lecture ---- */

p {
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  max-width: 68ch;
  margin-block-end: 1.3em;
  text-align: left;
  hyphens: none;
  text-wrap: pretty;
}

p strong {
  font-weight: var(--fw-bold);
}

p em {
  font-style: italic;
}

ul,
ol {
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: 68ch;
}

/* La mesure de lecture ne vaut que pour les listes de contenu : appliquée
   à la navigation ou au pied de page, elle écrase leur mise en page. */
.main-navigation ul,
.site-footer ul,
.dc-footer ul,
.formation-grid ul,
.centre-grid ul,
.session-card ul,
.stats-row ul,
.dc-pagination ul {
  max-width: none;
}

/* La barre d'administration de WordPress est elle aussi construite en
   listes, et la mesure de 68ch l'atteignait : ses items ne disposaient
   plus que de 557 px dans une fenêtre de 1440, et repassaient sur une
   seconde ligne qui recouvrait le haut de la page (constaté le 25/08).

   WordPress protège pourtant sa barre par `#wpadminbar *`, qui reprend la
   main sur la police, le corps et l'interligne. Mais il ne déclare aucune
   `max-width` — c'était le seul interstice par lequel le thème pouvait
   entrer. Mesuré : deux lignes avec le CSS du thème, une seule sans.

   Ne concernait que les utilisateurs connectés : les visiteurs ne voient
   jamais cette barre. */
#wpadminbar ul,
#wpadminbar ol {
  max-width: none;
}

/* Le nom de marque ne se coupe pas en deux (demande du 25/08). Les H1 de
   contact et d'à-propos donnaient « Contactez Dale / Carnegie France » :
   la signature se lisait comme deux fragments.

   Borné à 641 px et au-delà, le seuil mobile du thème. Sur téléphone, le
   H1 tombe à 36 px dans 342 px de large et se répartit sur deux lignes de
   toute façon ; y interdire la coupure ne gagnerait rien et exposerait un
   débordement sur les écrans les plus étroits.

   La classe est posée par `dc_marque_insecable()`, pas par une espace
   insécable saisie dans la base : celle-ci vaudrait aussi sur mobile. */
@media (min-width: 641px) {
  .insecable {
    white-space: nowrap;
  }
}

li {
  margin-block-end: 0.4em;
}

/* Une barre de navigation n'est pas du texte courant : cette marge de
   0,4em s'y glissait sous chaque item et, le centrage flex portant sur
   la boîte de marge et non sur le libellé, remontait liens, téléphone et
   loupe de 3,8 px au-dessus de l'axe du bouton Contact. */
.main-navigation li {
  margin-block-end: 0;
}

.lead {
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-text);
  max-width: 60ch;
  margin-block-end: 2em;
}

.run-in {
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: inherit;
}

/* ---- Exergues : sans-serif gras, pas serif italique ---- */

blockquote,
.callout {
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: var(--fs-callout);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--c-text);
  max-width: 30ch;
  border-left: 3px solid var(--c-accent);
  padding-left: 1.25em;
  margin-block: 2.5em;
}

/* Les 50 exergues du contenu hérité tiennent leur texte à nu ; ceux qui
   viennent de l'éditeur l'enveloppent d'un paragraphe, qui reprenait
   alors la typographie du corps et annulait l'exergue. */
blockquote p {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  max-width: none;
  margin: 0;
}

blockquote cite {
  display: block;
  margin-top: 0.9em;
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-small);
  font-style: normal;
  color: var(--c-text-muted);
}

/* ---- Encadrés : bascule intégrale en sans-serif ---- */

.aside {
  font-family: var(--font-ui);
  max-width: 34ch;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
}

/* Titre d'encadré : H2 ou H3 selon la place de l'encadré dans le sommaire
   de la page, mais toujours la taille et la fonction d'une étiquette
   d'interface. Il garde donc Work Sans : la règle de la bascule H4
   s'applique ici au dessin, pas au niveau balisé. */
.aside h2,
.aside h3 {
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: var(--fs-aside);
  line-height: 1.3;
  margin: 0 0 0.5em;
}

.aside p,
.aside li {
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-aside);
  line-height: 1.6;
  color: var(--c-text);
  max-width: none;
}

figcaption {
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-text-muted);
}

.legal,
.wp-block-footnotes,
.site-footer .legal-links {
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-legal);
  line-height: 1.6;
  color: var(--c-text);
  max-width: 80ch;
}

.eyebrow {
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  line-height: 1.3;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

/* ---- Tailles découplées des niveaux (TYPOGRAPHIE.md §7) ---- */

.t-xl { font-size: var(--fs-h1); }
.t-lg { font-size: var(--fs-h2); }
.t-md { font-size: var(--fs-h3); }
.t-sm { font-size: var(--fs-h4); }

/* ---- Liens et boutons ---- */

/* Le lien se signale par son soulignement, pas par sa couleur : c'est
   lui qui porte l'affordance depuis que les liens sont en anthracite.
   Il s'épaissit et passe à l'orange assombri au survol. */
a {
  color: var(--c-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.12s ease, text-decoration-color 0.12s ease;
}

a:hover,
a:focus-visible {
  color: var(--c-link-survol);
  text-decoration-thickness: 2px;
}

/* Les liens de navigation, de boutons et de cartes ont leur propre
   affordance : encadrement, fond, ou zone cliquable entière. */
.main-navigation a,
.button,
.wp-block-button__link,
.dc-footer a,
.dc-breadcrumbs-wrap a,
.formation-card a,
.centre-card a,
.article-card a,
.session-card a,
.link-grid a,
.arrow-link {
  text-decoration: none;
}

.main-navigation a:hover,
.dc-footer a:hover,
.dc-breadcrumbs-wrap a:hover,
.formation-card h3 a:hover,
.centre-card h2 a:hover,
.centre-card h3 a:hover,
.article-card h3 a:hover,
.link-grid a:hover,
.arrow-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

a:focus-visible,
button:focus-visible,
.button:focus-visible {
  outline: 2px solid var(--c-link);
  outline-offset: 2px;
}

/* Boutons : Work Sans Bold, avec un demi-pixel d'interlettrage qui pose
   le libellé sans l'étirer.
   La casse reste normale : « Découvrir nos formations » ou « Un projet
   pour votre entreprise ? » en capitales gagnerait un tiers de largeur
   et se lirait moins vite — les capitales privent l'œil de la silhouette
   des mots, et le français fait des libellés longs. */
.button,
.wp-block-button__link,
button[type="submit"] {
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: 1.0625rem;
  line-height: 1.2;
  letter-spacing: 0.5px;
  text-transform: none;
  display: inline-block;
  padding: 0.85em 1.7em;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease, transform 0.15s ease;
}

/* Bouton principal : turquoise PMS 319 C, libellé blanc — arbitrage de
   Damien du 15/08, la teinte pleine de la charte est préférée à sa
   déclinaison assombrie.
   Spécificité renforcée (a.button.button--primary) : GeneratePress
   injecte ses couleurs de boutons en CSS inline APRÈS les feuilles de
   style, une règle à égalité de spécificité perdrait.

   Contraste connu et assumé : blanc sur #00b6b3 vaut 2,5:1, sous le
   seuil WCAG AA de 4,5:1 (docs/points-a-valider.md §18). Ne pas
   « corriger » ce couple sans en reparler — c'est une décision, pas un
   oubli. Le repli documenté si la question revient est #008381, qui
   tient 4,6:1 pour un turquoise visuellement très proche. */
a.button.button--primary,
.button.button--primary,
button[type="submit"] {
  background: var(--c-turquoise);
  color: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 182, 179, 0.35);
}

a.button.button--primary:hover,
a.button.button--primary:focus,
button[type="submit"]:hover {
  background: var(--c-navy);
  color: #fff;
  transform: translateY(-1px);
}

a.button.button--secondary,
.button.button--secondary {
  background: transparent;
  color: var(--c-link);
  border: 2px solid var(--c-link);
}

a.button.button--secondary:hover,
a.button.button--secondary:focus {
  background: var(--c-link);
  color: #fff;
}

/* Variante sur fond sombre (hero) : filet blanc, libellé blanc */
a.button.button--inverse,
.button.button--inverse {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.7);
}

a.button.button--inverse:hover,
a.button.button--inverse:focus {
  background: #fff;
  color: var(--c-navy);
  border-color: #fff;
}

/* Lien fléché — appel discret en fin de section */
.arrow-link {
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: var(--fs-aside);
  text-decoration: none;
  color: var(--c-link);
}

.arrow-link::after {
  content: " \2192";
}

.arrow-link:hover {
  text-decoration: underline;
}

/* =========================================================================
   Layout — bandes pleine largeur
   Le conteneur GeneratePress peut être contraint : les bandes s'étirent
   en 100vw puis recentrent leur contenu dans .band__inner.
   ========================================================================= */

/* GeneratePress rend .site-content en flex ; sans cette règle le <main>
   du child theme se réduit à sa largeur intrinsèque. */
.site-content > .dc-main {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
}

.dc-main.grid-container {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: 24px;
  padding-block: 0.5rem 3rem;
}

/* Les bandes occupent toute la largeur du <main>. Les gabarits qui les
   utilisent passent la page en pleine largeur (body_class
   full-width-content, functions.php) : aucun calcul en 100vw, qui
   provoquerait un débordement horizontal de la largeur de l'ascenseur. */
.band,
.hero-home {
  width: 100%;
}

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

.band__inner {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: 24px;
}

.band--alt {
  background: var(--c-bg-alt);
}

.band--navy {
  background: var(--c-navy);
}

.band > .band__inner > h2:first-child,
.band__inner > h2:first-child {
  margin-block-start: 0;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-block-end: 0.5rem;
}

.section-head h2 {
  margin-block: 0 0.3em;
}

/* Filet orange sous les titres de section de la home */
.section-head h2::after,
h2.ruled::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-top: 0.35em;
  background: var(--c-accent);
  border-radius: 2px;
}

/* =========================================================================
   Hero — bande navy, accents orange
   ========================================================================= */

.hero-home {
  background:
    radial-gradient(ellipse 60% 80% at 85% 15%, rgba(245, 130, 32, 0.14), transparent 60%),
    linear-gradient(160deg, #22345c 0%, var(--c-navy) 45%, var(--c-navy-deep) 100%);
  padding-block: clamp(3rem, 2.2rem + 3.5vw, 5rem);
}

.hero-home .band__inner {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: 24px;
}

/* Le surtitre « Dale Carnegie France » et son filet orange ont été
   retirés le 16/08 : le logo de l'en-tête dit déjà la marque, et
   l'accroche démarre plus franchement sans ce préambule. Les règles qui
   les habillaient sont parties avec — les autres surtitres du site
   gardent les leurs, ailleurs dans cette feuille. */

.hero-home h1 {
  color: #fff;
  margin-block: 0 0;
}

.hero-home .subtitle {
  color: var(--c-inverse-text);
}

.hero-home .hero-actions {
  margin-top: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  max-width: none;
}

/* Les quatre chiffres closent le hero. Un filet les sépare de
   l'accroche : sans lui, les cartes semblent flotter dans la même
   respiration que les boutons. La grille perd sa marge haute, que le
   `padding` du bloc remplace. */
.hero-home__chiffres {
  margin-block-start: clamp(2.2rem, 1.6rem + 2.5vw, 3.4rem);
  padding-block-start: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
  border-top: 1px solid var(--c-navy-line);
}

/* Quatre colonnes ou deux, jamais trois : en `auto-fit`, la tablette
   portrait en logeait trois et laissait la quatrième seule sur une
   deuxième rangée. Deux rangées de deux valent mieux qu'un orphelin.
   Et sur mobile, quatre cartes en pleine largeur ajoutaient près d'un
   écran et demi au hero avant la première section. */
.hero-home__chiffres .stat-grid {
  margin-block: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

/* Chiffres centrés et resserrés (demande du 19/08) : en pied de hero ils
   servent de bandeau de preuve, pas de contenu à lire. Le corps de la
   page reprend juste après — ils ne doivent pas peser autant que
   l'accroche. Valeur d'un cran sous celle des bandes ordinaires,
   rembourrage réduit d'un tiers. */
.hero-home__chiffres .stat-card {
  text-align: center;
  padding: 1.1rem 1rem;
}

.hero-home__chiffres .stat-card__valeur {
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.55rem);
}

.hero-home__chiffres .stat-card__label {
  font-size: var(--fs-aside);
  margin-top: 0.3rem;
}

.hero-home__chiffres .stat-card__source {
  margin-top: 0.35rem;
  font-size: 0.78125rem;
  line-height: 1.45;
}

@media (max-width: 1023px) {
  .hero-home__chiffres .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
  }
}

.hero-home__grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 2rem 3rem;
  align-items: center;
}

.hero-home__text h1 {
  max-width: 26ch;
}

/* Accroche en trois temps : une proposition par bloc, avec un léger
   dégagement entre elles. Sur les écrans étroits chaque phrase peut
   passer sur deux lignes — l'espacement suffit alors à faire lire les
   trois groupes comme trois temps.

   Taille propre à cette accroche, plus basse que le --fs-h1 du reste du
   site : à 55 px, « Développez la confiance. » débordait la colonne de
   1,4 px et se repliait sur deux lignes, ce qui cassait le rythme
   ternaire — la première proposition pesait deux fois les suivantes. À
   48 px la ligne la plus longue passe avec 13 % de marge, de quoi
   encaisser une variation de rendu de la fonte. */
.hero-home__accroche {
  font-size: clamp(1.875rem, 1.35rem + 2.05vw, 3rem);
  line-height: 1.12;
}

.hero-home__accroche span {
  display: block;
  /* Quand une proposition se replie malgré tout (mobile), les deux
     lignes se partagent la largeur au lieu de laisser un mot seul. */
  text-wrap: balance;
}

.hero-home__accroche span + span {
  /* Nettement plus que l'interligne (1,1) : c'est cet écart, et lui
     seul, qui distingue les trois temps quand une phrase se replie sur
     deux lignes. Un dégagement discret les laissait se confondre avec
     un simple retour à la ligne. */
  margin-block-start: 0.3em;
}

/* Le sous-titre suit l'accroche : à 30 px sous un titre de 48, le
   rapport tombait à 1,6 et les deux blocs se disputaient l'attention.
   La taille des chapôs du site (--fs-lead) rétablit la hiérarchie et
   donne une ligne de lecture plus confortable. */
.hero-home__text .subtitle {
  font-size: var(--fs-lead);
  max-width: 44ch;
}

/* Le visuel est détouré dans le monogramme de la marque : c'est la forme
   qui fait le cadre. Ni coins arrondis ni ombre portée — tous deux
   dessineraient le rectangle du fichier autour d'une image qui n'en a
   pas. Pas de recadrage non plus (`cover` + hauteur fixe rognait le
   monogramme) : l'image garde son carré, la hauteur suit la largeur. */
.hero-home__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

@media (max-width: 900px) {
  .hero-home__grid {
    grid-template-columns: 1fr;
  }

  .hero-home__media {
    order: -1;
  }

  /* En colonne unique, un carré pleine largeur repousserait l'accroche
     sous la ligne de flottaison — l'ancien visuel, en paysage recadré,
     ne prenait que 180 à 260 px de haut. Le carré est donc bridé et
     centré : 220 px sur un téléphone, jusqu'à 320 sur une tablette. */
  .hero-home__media img {
    max-width: clamp(220px, 45vw, 320px);
    margin-inline: auto;
  }
}

/* La ligne « Organismes de formation certifiés Qualiopi » a été retirée
   du hero le 16/08 ; sa règle est partie avec. La certification reste
   affirmée deux fois sur la page — dans la barre de preuve juste en
   dessous, et au pied de page avec le logo. */

/* =========================================================================
   Structure — header, navigation, footer (GeneratePress surchargé)
   ========================================================================= */

/* ---- Bandeau d'annonce ----

   Au-dessus de l'en-tête, pour une promotion ponctuelle. Piloté par le
   CPT `bandeau` (mu-plugins/dc-bandeau.php) : rien n'est écrit ici, ni
   texte, ni lien, ni couleur.

   Il ne colle pas au défilement, contrairement à l'en-tête : une
   annonce ponctuelle n'a pas à occuper une bande d'écran sur toutes
   les pages et à toutes les hauteurs. */
.dc-bandeau {
  background: var(--c-navy-deep);
  color: var(--c-inverse-text);
  font-family: var(--font-ui);
}

.dc-bandeau__inner {
  max-width: calc(var(--content-width) + 48px);
  margin-inline: auto;
  padding: 0.85rem 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}

/* La couleur est posée sur le paragraphe et non héritée du bandeau :
   la règle générale `p { color: var(--c-text) }` l'emporterait sur
   l'héritage, et le texte s'afficherait en gris foncé sur le navy. */
.dc-bandeau__texte {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.45;
  max-width: 90ch;
  color: var(--c-inverse-text);
}

/* Le bouton garde sa largeur : c'est le texte qui cède, et il a de la
   place pour cela — 200 caractères tiennent en trois lignes ici. */
.dc-bandeau__bouton {
  flex: 0 0 auto;
  display: inline-block;
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  line-height: 1.2;
  letter-spacing: 0.3px;
  /* Libellé sombre sur chacun des quatre aplats : c'est ce qui tient
     le seuil AA là où un libellé blanc ne le tiendrait pas sur
     l'orange (2,59:1) ni sur le turquoise (2,52:1). */
  color: var(--c-navy-deep);
  border-radius: 6px;
  padding: 0.7em 1.4em;
  text-decoration: none;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.dc-bandeau__bouton:hover,
.dc-bandeau__bouton:focus-visible {
  color: var(--c-navy-deep);
  text-decoration: none;
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.dc-bandeau__bouton--orange {
  background: var(--c-orange); /* 6,32:1 avec le libellé */
}

.dc-bandeau__bouton--turquoise {
  background: var(--c-turquoise); /* 6,51:1 */
}

.dc-bandeau__bouton--jaune {
  background: var(--c-jaune); /* 10,48:1 */
}

.dc-bandeau__bouton--blanc {
  background: #fff; /* 14,22:1 */
}

/* Filet de sécurité : trois lignes au maximum. La limite de 200
   caractères le rend inatteignable sur un écran large — il ne joue que
   si un texte plus ancien avait échappé à la limite. En dessous, la
   règle est levée : 200 caractères y prennent six lignes, et les
   couper masquerait la moitié de l'annonce. */
@media (min-width: 900px) {
  .dc-bandeau__texte {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (max-width: 640px) {
  .dc-bandeau__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dc-bandeau__bouton {
    transition: none;
  }

  .dc-bandeau__bouton:hover,
  .dc-bandeau__bouton:focus-visible {
    transform: none;
  }
}

/* ---- En-tête collant ----

   Le conteneur enveloppe le header et son filet dégradé (voir le hook
   dans functions.php) : les deux se déplacent ensemble, sans que la
   hauteur du header ait à être écrite dans le `top` du filet.

   Le z-index crée un contexte d'empilement qui contient les sous-menus
   déroulants de GeneratePress, montés à 99999 : ils continuent de
   passer au-dessus de la page, et l'en-tête entier passe au-dessus du
   reste. Le lien « Aller au contenu » est hors du conteneur et garde
   le sien, plus élevé encore.

   Le fond est opaque : c'est ce qui distingue une barre collante d'une
   barre qui laisse voir le texte défiler dessous. */
.entete-collante {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-bg);
  transition: box-shadow 0.2s ease;
}

/* Repère du script : un pixel de haut, rattrapé par la marge négative,
   donc sans effet sur la mise en page. */
.entete-sentinelle {
  height: 1px;
  margin-block-end: -1px;
}

/* ---- Décollage ----

   En haut de page, l'en-tête appartient à la page et porte son filet de
   marque. Décollé, il devient une barre posée par-dessus le contenu :
   l'ombre le dit, et le filet s'efface plutôt que de doubler la
   séparation (demande du 17/08).

   Le filet est effacé en opacité et non en hauteur : il garde ses 4 px,
   l'en-tête garde ses 89 px, et rien ne remonte de quatre pixels au
   moment du décollage. C'est aussi ce qui laisse `--h-entete` juste
   dans les deux états. */
.entete-collante.est-collee {
  box-shadow: 0 2px 12px rgba(19, 31, 56, 0.14);
}

.filet-marque {
  transition: opacity 0.2s ease;
}

.entete-collante.est-collee .filet-marque {
  opacity: 0;
}

/* Une seule séparation à la fois : le liseré gris du header flotterait
   à quatre pixels au-dessus de l'ombre. Sa couleur s'efface, sa place
   reste. */
.entete-collante.est-collee .site-header {
  border-bottom-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .entete-collante,
  .filet-marque {
    transition: none;
  }
}

/* Barre d'administration : elle est fixée en haut de la fenêtre pour un
   utilisateur connecté, et recouvrirait l'en-tête. Ne concerne que
   l'équipe, jamais un visiteur. Sous 601 px, WordPress la remet dans le
   flux : plus rien à décaler. */
@media screen and (min-width: 783px) {
  body.admin-bar .entete-collante {
    top: 32px;
  }
}

@media screen and (min-width: 601px) and (max-width: 782px) {
  body.admin-bar .entete-collante {
    top: 46px;
  }
}

/* Menu burger déplié : la liste vit dans le header, donc dans le
   conteneur collant. Sur un téléphone bas, six entrées dont plusieurs
   dépliées dépasseraient l'écran sans aucun moyen d'atteindre les
   dernières. Le conteneur défile alors pour son propre compte. */
@media (max-width: 1099px) {
  .entete-collante {
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Une ancre visée depuis un lien atterrirait sous la barre : le
   navigateur réserve sa hauteur. Vaut pour les liens « Demander le
   test » des ressources, la sous-navigation des pages Approche et
   tout lien interne à venir. */
html {
  scroll-padding-top: var(--h-entete);
}

.site-header {
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
}

.site-header .inside-header {
  max-width: calc(var(--content-width) + 48px);
  margin-inline: auto;
  padding: 0.75rem 24px;
}

/* Barre horizontale : uniquement au-dessus du point de bascule du menu
   burger de GeneratePress. En dessous, on laisse GP empiler le header,
   sinon la navigation déborde par-dessus le logo.

   Ce point est passé de 769 à 1100 px le 17/08, avec l'entrée « À
   propos » exigée par le §8. Le conteneur du header est plafonné à
   1188 px : au-delà, élargir la fenêtre ne donne plus un pixel de
   place. Six entrées, la loupe et le bouton Contact demandent un peu
   plus de 1 000 px à côté d'un logo de 190 : c'est jouable au-dessus
   de 1100, pas en dessous, où la liste passait par-dessus le logo au
   lieu de se réduire. Les filtres GeneratePress qui déplacent le
   bouton sont dans functions.php. */
@media (min-width: 1100px) {
  .site-header .inside-header {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
  }

  /* Le logo garde sa taille en toute circonstance : c'est la
     navigation qui s'adapte, jamais l'inverse. */
  .site-header .inside-header .site-branding {
    flex: 0 0 auto;
  }

  .site-header .inside-header .main-navigation {
    flex: 1 1 auto;
    min-width: 0;
  }

  .site-header .inside-header .main-navigation .main-nav {
    width: 100%;
  }

  .site-header .inside-header .main-navigation .main-nav > ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    float: none;
  }

  .site-header .inside-header .main-navigation .main-nav > ul > li {
    flex: 0 0 auto;
  }
}

.dc-logo a {
  display: inline-flex;
  align-items: center;
}

.dc-logo img {
  width: clamp(150px, 22vw, 190px);
  height: auto;
  display: block;
}

/* Navigation principale */

.main-navigation {
  background: transparent;
}

.main-navigation .main-nav ul li a {
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: 1rem;
  color: var(--c-text);
  padding-inline: 8px;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.main-navigation .main-nav ul ul li a {
  padding-inline: 18px;
}

/* Survol : le bleu profond du hero, sans soulignement — la navigation
   a sa propre affordance (demande du 15/08). */
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.sfHover > a {
  color: var(--c-navy);
  text-decoration: none;
}

/* Item actif — l'onglet de premier niveau comme la page ouverte dans
   son sous-menu, le sélecteur portant sur les deux profondeurs.

   Le filet turquoise sous le libellé est retiré (demande du 17/08) :
   la navigation n'a plus qu'une seule affordance, la couleur.

   Elle passe du navy au bleu 2925 C assombri. Le navy (#1b2a4a) ne se
   distinguait de l'anthracite du texte courant (#1a1a1a) que par le
   filet ; sans lui, l'état actif devenait invisible. Le bleu foncé se
   lit comme un bleu, et tient 4,52:1 sur blanc. */
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-ancestor > a,
.main-navigation .main-nav ul li.current-menu-parent > a {
  color: var(--c-bleu-fonce);
  box-shadow: none;
}

/* Sous-menus : panneau blanc, ombre douce, filet orange */
.main-navigation .main-nav ul ul {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-turquoise);
  border-radius: 0 0 8px 8px;
  box-shadow: var(--shadow-card-hover);
  width: 260px;
  padding-block: 0.35rem;
}

.main-navigation .main-nav ul ul li a {
  font-weight: var(--fw-regular);
  font-size: 0.9375rem;
  color: var(--c-text);
  padding: 9px 18px;
}

.main-navigation .main-nav ul ul li:hover > a,
.main-navigation .main-nav ul ul li.sfHover > a {
  color: var(--c-navy);
  background: var(--c-bg-alt);
  text-decoration: none;
}

/* Item Contact transformé en bouton turquoise, libellé blanc.

   Ce couple vaut 2,5:1, sous le seuil AA. **C'est un choix assumé de
   Damien du 15/08**, consigné en `points-a-valider.md` §18 pour que
   personne ne le « corrige » : le repli #008381 (4,60:1) y est décrit
   si la question revient. Ne pas modifier sans arbitrage.

   Au survol, le bleu profond du hero, qui lui accepte le blanc. */
.main-navigation .main-nav ul li.nav-cta > a {
  background: var(--c-turquoise);
  color: var(--c-text);
  border-radius: 6px;
  padding: 10px 20px;
  margin-left: 10px;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.main-navigation .main-nav ul li.nav-cta > a:hover,
.main-navigation .main-nav ul li.nav-cta:hover > a,
.main-navigation .main-nav ul li.nav-cta > a:focus-visible {
  background: var(--c-navy);
  color: #fff;
  text-decoration: none;
}

@media (min-width: 1100px) {
  .main-navigation .main-nav ul li.nav-cta > a {
    margin-top: 6px;
    margin-bottom: 6px;
  }
}

/* Menu déroulant : le bouton reprend toute la largeur, sans marge flottante */
@media (max-width: 1099px) {
  .main-navigation .main-nav ul li.nav-cta > a {
    margin: 8px 16px 12px;
    display: inline-block;
  }

  .main-navigation .menu-toggle {
    font-family: var(--font-ui);
    font-weight: var(--fw-bold);
  }
}

/* ---- Footer ---- */

/* Le filet supérieur reprend le dégradé de marque de l'en-tête plutôt
   qu'un aplat orange : les deux extrémités de la page se répondent, et
   la signature ne s'exprime plus que d'un côté.
   Il passe en `background` sur un pseudo-élément — un `border-top` ne
   sait pas porter de dégradé. */
.site-footer {
  background: var(--c-navy-deep);
  color: var(--c-inverse-text);
  margin-top: var(--space-section);
  position: relative;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--degrade-marque);
}

.site-footer a,
.site-footer .dc-footer a {
  color: var(--c-inverse-muted);
  text-decoration: none;
  text-underline-offset: 0.2em;
  transition: color 0.15s ease;
}

.site-footer a:hover,
.site-footer .dc-footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.dc-footer {
  max-width: var(--content-width);
  margin-inline: auto;
  padding: 3.5rem 24px 2.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.5rem 2rem;
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-aside);
}

/* Colonne 1 : la marque. Le logo, puis la mention Qualiopi. */
.dc-footer__marque > a img {
  width: 132px;
  height: auto;
  display: block;
  margin-block-end: 1.4rem;
}

/* Colonnes 3 et 4 : deux blocs empilés dans une même colonne. */
.dc-footer__groupe {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.dc-footer__cta {
  margin: 0;
}

.dc-footer__cta .button {
  font-size: 1rem;
  padding: 0.7em 1.4em;
}

/* Bouton Contact du pied de page : même dessin que celui de l'en-tête,
   et désormais que le bouton principal — turquoise assombri, libellé
   blanc.
   Sélecteur préfixé par .site-footer côté pied de page : la règle
   générale des liens du pied de page (.site-footer .dc-footer a) les
   passe en gris clair, et à égalité de spécificité elle l'emportait —
   le libellé ressortait à 2,6:1 au lieu de 4,6:1. */
.site-footer .dc-footer a.button--contact,
.main-navigation .main-nav ul li.nav-cta > a {
  background: var(--c-turquoise);
  color: #fff;
  text-decoration: none;
}

.site-footer .dc-footer a.button--contact:hover,
.site-footer .dc-footer a.button--contact:focus-visible {
  background: var(--c-navy);
  color: #fff;
  text-decoration: none;
}

/* Réseaux sociaux, sous le bouton. */
.dc-footer__reseaux {
  list-style: none;
  display: flex;
  gap: 0.75rem;
  margin: 1.2rem 0 0;
  padding: 0;
  max-width: none;
}

.dc-footer__reseaux li {
  margin: 0;
}

/* Pastille blanche, opaque au survol.
   L'opacité est à 90 % et non 70 % : sur un fond aussi sombre, 70 %
   laisse remonter le bleu et donne un gris franc (#b8bcc3). À 90 % le
   mélange donne #e7e9eb — l'œil lit « blanc », et la pastille
   s'éclaire encore nettement au survol.
   Le logo passe en bleu profond : en blanc, il disparaîtrait sur ce
   fond clair (1,91:1). En navy il tient 10,8:1 au repos, 14,2:1 au
   survol. */
.site-footer .dc-footer__reseaux a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--c-navy);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.site-footer .dc-footer__reseaux a:hover,
.site-footer .dc-footer__reseaux a:focus-visible {
  background: #fff;
  color: var(--c-navy);
  text-decoration: none;
}

/* `.dc-icone` fixe sa propre couleur pour le reste du site : ici, le
   logo doit suivre celle de la pastille. */
.site-footer .dc-footer__reseaux .dc-icone {
  color: inherit;
}

/* Bas de page : mentions légales et copyright, centrés sur le fond
   sombre. La bande blanche de GeneratePress est supprimée — elle
   n'aurait plus rien porté. */
.dc-footer-bas {
  border-top: 1px solid var(--c-navy-line);
  margin-top: 1rem;
  padding: 1.6rem 24px 2rem;
  text-align: center;
}

.dc-footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2rem;
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-small);
}

.site-footer .dc-footer-legal-links a {
  color: var(--c-inverse-muted);
  text-decoration: none;
}

.site-footer .dc-footer-legal-links a:hover {
  color: #fff;
  text-decoration: underline;
}

.dc-footer-copyright {
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-small);
  color: var(--c-inverse-muted);
  margin: 0.9rem 0 0;
  max-width: none;
  /* La règle de base `p { text-align: left }` l'emporterait sur le
     centrage hérité du conteneur : on le redit ici. */
  text-align: center;
}

.dc-footer h2 {
  /* titres de colonnes : taille utilitaire, pas de saut de niveau —
     ce sont des repères de navigation, pas des sections de document.
     D'où Work Sans malgré le niveau H2 : Sanchez en petites capitales
     espacées empâterait des libellés de 15 px. */
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  color: #fff;
  margin-block: 0 1em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dc-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-aside);
}

.dc-footer li {
  margin-block-end: 0.6em;
}

.dc-footer p {
  color: var(--c-inverse-muted);
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  line-height: 1.6;
  max-width: none;
}

/* Description de la marque, sous le logo. Un ton en dessous du reste de
   la colonne : c'est du texte de contexte, pas un repère de navigation. */
.site-footer .dc-footer__baseline {
  margin-block: 0;
  max-width: 34ch;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--c-inverse-muted);
}

/* Mention Qualiopi du pied de page. Le logo garde son liseré blanc à
   coins arrondis : quelques pixels de blanc autour du fichier, qui le
   posent proprement sur le navy. Ce n'est pas lui qui débordait le
   17/08 — c'était la carte des pages centres, qui portait la même
   classe et gagnait par ordre de déclaration. Le préfixe `.site-footer`
   ferme cette porte. */
.site-footer .qualiopi {
  display: flex;
  align-items: center;
  /* Dégagement net après la description : les deux blocs ne disent pas
     la même chose — l'un présente la marque, l'autre atteste d'une
     certification — et se lisaient comme un seul paragraphe. */
  margin-block-start: 2rem;
}

.site-footer .qualiopi__logo {
  display: block;
  width: 116px;
  height: auto;
  flex: none;
  background: #fff;
  border-radius: 4px;
  padding: 6px 8px;
}

.dc-footer-legal {
  border-top: 1px solid var(--c-navy-line);
  padding: 1.2rem 24px;
  text-align: center;
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-legal);
  color: var(--c-inverse-muted);
}

.site-footer .inside-site-info {
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-small);
  color: var(--c-inverse-muted);
}

/* ---- Fil d'ariane ---- */

/* Rank Math rend son propre fil — `nav.rank-math-breadcrumb` contenant
   un `<p>` — et ignore la classe du repli maison. Les règles portent
   donc sur l'enveloppe, seule constante entre les deux rendus : sans
   cela le fil s'affichait à la taille du corps de texte, en anthracite
   plein, à 4 px sous l'en-tête.
   L'espacement est en `padding` et non en `margin` : la marge du `<p>`
   de Rank Math traversait l'enveloppe par fusion des marges, et l'écart
   réel ne correspondait plus à ce qui était écrit ici. */
.dc-breadcrumbs-wrap {
  max-width: var(--content-width);
  margin-inline: auto;
  padding: 1.75rem 24px 1.5rem;
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-text-muted);
}

.dc-breadcrumbs-wrap p,
.dc-breadcrumbs {
  margin: 0;
  max-width: none;
  font-size: inherit;
  color: inherit;
}

.dc-breadcrumbs-wrap a {
  color: var(--c-text-muted);
  text-decoration: none;
}

.dc-breadcrumbs-wrap a:hover {
  color: var(--c-link);
  text-decoration: underline;
}

/* ---- Bande de logos clients ---- */

.band--tight {
  padding-block: clamp(2rem, 1.4rem + 2vw, 3rem);
}

/* Le titre de cette bande était un surtitre centré : elle avait sa
   propre mise en forme au milieu d'une page où toutes les autres
   sections portent un H2 aligné à gauche, souligné du filet orange.
   Elle suit désormais la règle commune (.section-head) — d'où la marge
   haute ci-dessous, qui remplace celle que portait le surtitre. */
.logo-band {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  align-items: center;
  justify-items: center;
  gap: 1.2rem 0.8rem;
}

.logo-band li {
  margin: 0;
}

.logo-band img {
  /* les fichiers sont des carrés de 150 px avec beaucoup de marge
     interne : on agrandit la boîte pour que la marque reste lisible */
  height: 74px;
  width: 108px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.65;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.logo-band img:hover {
  filter: grayscale(0);
  opacity: 1;
}

/* ---- Deux audiences : entreprises / particuliers ---- */

.audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}

.audience-card {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-top: 4px solid var(--c-accent);
  border-radius: 10px;
  padding: 2rem 2.2rem 1.6rem;
  box-shadow: var(--shadow-card);
}

/* Sur fond navy (accueil) : même traitement que les cartes de chiffres —
   un voile clair plutôt qu'un aplat blanc, qui masquerait la bande. Le
   filet supérieur orange est conservé, c'est lui qui distingue les deux
   cartes du reste. */
.band--navy .audience-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--c-navy-line);
  border-top-color: var(--c-accent);
  box-shadow: none;
}

/* Le surtitre reprend le turquoise des fonds sombres : en
   `--c-text-muted`, il disparaissait presque. */
.band--navy .eyebrow {
  color: var(--c-turquoise);
}

.audience-card h2 {
  margin-block: 0.35em 0.5em;
  font-size: var(--fs-h3);
}

.audience-card h2::after {
  content: none;
}

.audience-card p {
  max-width: none;
}

/* ---- Témoignages vidéo : façade, pas d'iframe avant le clic ---- */

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-block: 2rem 0;
}

.video-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 0.9rem 0.9rem 1.3rem;
  text-decoration: none;
  color: var(--c-text);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.video-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}

.video-card__media {
  position: relative;
  display: block;
  line-height: 0;
}

.video-card__media img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.video-card__play {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 4px 14px rgba(9, 16, 32, 0.35);
}

.video-card__play::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 54%;
  translate: -50% -50%;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--c-text);
}

.video-card__titre {
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: var(--fs-aside);
  line-height: 1.35;
  padding-inline: 0.4rem;
}

.video-card__cta {
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-small);
  color: var(--c-link);
  padding-inline: 0.4rem;
  margin-top: auto;
}

/* =========================================================================
   En-tête de page intérieure (hub, thème, centre, calendrier, CPF)
   ========================================================================= */

.formation-hero,
.page-hero {
  margin-block: 1rem 2.5rem;
}

/* ---- En-tête avec vignette du programme ----

   Le titre à gauche, l'image carrée du thème de formation à droite. Le
   filet orange passe sur la colonne de texte : sur le conteneur, il
   deviendrait une troisième cellule de la grille et pousserait
   l'image. */
.page-hero--vignette {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem 2.5rem;
}

/* Spécificité doublée : à égalité, la règle `.page-hero::before`
   déclarée plus bas l'emporterait, et le filet occuperait la première
   cellule de la grille — l'image passait alors sous le texte, à
   gauche. */
.page-hero.page-hero--vignette::before {
  display: none;
}

/* Uniquement dans le cas de la vignette : le conteneur de texte existe
   aussi sans image, et le filet s'y ajouterait à celui du parent — deux
   traits orange l'un sous l'autre. */
.page-hero--vignette .page-hero__texte::before {
  content: "";
  display: block;
  width: 64px;
  height: 5px;
  border-radius: 3px;
  background: var(--c-accent);
  margin-bottom: 1.4rem;
}

.vignette-formation {
  margin: 0;
  flex: 0 0 auto;
}

/* Le carré est garanti par le cadrage, pas par le fichier : une image
   de proportion quelconque déposée en image mise en avant est recadrée
   sur son centre plutôt que déformée. */
/* 25 % de la largeur utile (demande du 24/08) : c'est la grille qui
   fixe la colonne, l'image la remplit. Le carré est garanti par le
   cadrage — une image de proportion quelconque déposée en image mise en
   avant est recadrée sur son centre plutôt que déformée.

   Ni fond ni ombre : ces monogrammes sont des photos détourées dans la
   forme de la marque, sur transparence. Le pastel du thème passe à
   travers la découpe, et un cadre rectangulaire la contredirait. */
.vignette-formation__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

@media (max-width: 640px) {
  /* Sur un téléphone, l'image passe au-dessus du titre : à côté, il ne
     resterait pas la place d'écrire une date. */
  .page-hero--vignette {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Sur une colonne, l'image passe au-dessus du titre : à côté, il ne
     resterait pas la place d'écrire une date. Elle reprend alors une
     largeur propre — étirée sur toute la colonne, elle mangerait le
     premier écran. */
  .vignette-formation {
    order: -1;
  }

  .vignette-formation__img {
    width: clamp(120px, 38vw, 180px);
  }
}

.formation-hero::before,
.page-hero::before {
  content: "";
  display: block;
  width: 64px;
  height: 5px;
  border-radius: 3px;
  background: var(--c-accent);
  margin-bottom: 1.4rem;
}

.formation-hero h1,
.page-hero h1 {
  margin-block: 0 0.2em;
}

/* Le titre du programme tient sur une ligne (demande du 24/08).

   Depuis que le monogramme occupe 25 % de l'en-tête, la colonne de
   texte plafonne à 727 px, et « Communication & Leadership » — le plus
   long des sept — y débordait de 60 px. Il est seul dans ce cas :
   l'échelle est calée sur lui, avec ~3 % de marge, et les six autres la
   suivent pour que les sept fiches gardent le même titre.

     1024 px de fenêtre → 647 px utiles, le titre passe à 43 px
     1280 px et au-delà → 727 px utiles, il plafonne à 49,6 px

   L'échelle ne vaut que là où l'en-tête est en deux colonnes. En
   dessous de 1024 px l'image repasse au-dessus du titre, qui retrouve
   toute la largeur et sa taille pleine. */
.formation-hero h1 {
  font-size: clamp(2.25rem, 1.0375rem + 2.58vw, 3.1rem);
}

/* ---- Le monogramme du programme, à droite du titre ----

   Seul le haut de l'en-tête est en deux colonnes : titre, promesse et
   accroche à gauche, image à droite. Les repères, la pastille CPF et
   les boutons restent en pleine largeur en dessous — à 25 %, l'image ne
   descend pas assez bas pour les longer sans les comprimer.

   Sans image, la grille n'a qu'une colonne et l'en-tête est
   exactement celui d'avant. */
.formation-hero__tete {
  display: grid;
  gap: 1.5rem 2.5rem;
}

.formation-hero__tete--vignette {
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  align-items: center;
}

/* La colonne de texte est déjà bornée par la grille : les enfants ne
   doivent pas y ajouter leur propre mesure, sinon le texte s'arrête
   avant le bord et l'écart avec l'image double. */
.formation-hero__intro {
  min-width: 0;
}

/* Le seuil est à 1024 px et non 640 : entre les deux, la colonne de
   texte tombe jusqu'à 372 px pendant que le titre grandit avec la
   fenêtre, et « Communication & Leadership » se coupait en deux. Passer
   l'image au-dessus rend au titre toute la largeur, et une image de
   180 px de côté au-dessus d'un titre est de toute façon plus lisible
   qu'un titre écrasé dans un tiers d'écran. */
@media (max-width: 1023px) {
  /* Sur une colonne, l'image passe au-dessus du titre, comme sur les
     pages session. */
  .formation-hero__tete--vignette {
    grid-template-columns: minmax(0, 1fr);
  }

  .formation-hero__tete .vignette-formation {
    order: -1;
  }

  .formation-hero__tete .vignette-formation__img {
    width: clamp(120px, 38vw, 180px);
  }
}

/* La promesse du thème, en H2 sous le titre du programme.

   Le H2 de base ouvre une section de contenu : 2,5em de marge haute et
   la taille --fs-h2, qui talonnerait le H1 à deux lignes d'intervalle.
   Ici c'est un sous-titre — il descend d'un cran de l'échelle et se
   colle au titre. Sanchez est conservée : deux niveaux de titre dans la
   même famille se lisent comme une seule idée, là où un passage en
   Work Sans en ferait un second objet. */
.formation-hero .formation-promesse {
  /* Échelle propre, et non --fs-subtitle, calée sur la largeur utile
     du hero — qui ne suit pas celle de la fenêtre, le conteneur
     plafonnant à 1092 px.

     Le monogramme posé à droite le 24/08 a ramené la colonne de texte
     de 1009 à 727 px : les deux promesses de 71 caractères
     (communication-leadership, leadership-management) passent depuis
     sur deux lignes, les deux plus courtes tiennent toujours sur une.
     Les y ramener demanderait 21 px, sous le plancher et minuscule face
     à un H1 de 56 px — l'image à 25 % et la promesse d'un seul tenant
     ne peuvent pas coexister, et c'est l'image qui a été tranchée.
     `text-wrap: balance` plus bas répartit alors les deux lignes. */
  font-size: clamp(1.375rem, 0.82rem + 1.15vw, 1.75rem);
  line-height: 1.25;
  color: var(--c-text);
  margin-block: 0 0.5em;
  /* Pas de mesure de lecture : c'est un titre, il occupe la largeur de
     l'encart. La borne de 30ch héritée du sous-titre le coupait en deux
     à 589 px alors que 1009 étaient disponibles. */
  max-width: none;
  /* Ne joue que dans le cas où la promesse passe sur deux lignes, en
     dessous de la tablette : elle les équilibre au lieu de laisser un
     mot seul sur la seconde. */
  text-wrap: balance;
}

/* Le filet orange des H2 de section n'a pas lieu d'être ici : le hero
   porte déjà le sien au-dessus du H1. Aucun sélecteur actuel ne
   l'atteint — le hero est un <header>, pas une <section> — mais la
   règle est posée pour que l'ajout d'un `.dc-main h2::after` plus
   général ne vienne pas le rouvrir. */
.formation-hero .formation-promesse::after {
  content: none;
}

.formation-hero .subtitle,
.page-hero .subtitle {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-text-muted);
  max-width: 52ch;
}

/* L'accroche d'une fiche descend à 20 px (demande du 24/08).

   --fs-lead culmine à 23 px, ce qui convient à une accroche isolée sous
   un titre — le cas de /faq/, qui garde donc l'échelle. Sur une fiche,
   l'accroche est le troisième niveau d'un empilement titre / promesse /
   accroche, et à 23 px elle pesait presque autant que la promesse en
   Sanchez juste au-dessus. 20 px est le plancher de --fs-lead : c'est
   la valeur que l'accroche prenait déjà sur mobile, étendue à toutes
   les largeurs. */
.formation-hero .subtitle {
  font-size: 1.25rem;
}

/* Sur une fiche formation, l'accroche s'aligne sur la largeur du H2
   au-dessus d'elle (demande du 22/08) : depuis que la promesse occupe
   l'encart en pleine largeur, la mesure de 52ch commune à `.page-hero`
   laissait l'accroche nettement plus étroite que le titre qu'elle
   prolonge. `.page-hero` la garde : ses pages n'ont pas de H2 en
   pleine largeur au-dessus, la mesure de lecture y reste pertinente. */
.formation-hero .subtitle {
  max-width: none;
}

.formation-hero .formation-card__meta {
  font-size: var(--fs-aside);
  margin-block: 1rem 1.2rem;
}

/* Chiffres clés de l'en-tête d'une fiche : durée, tarif, centres

   Repris le 22/08. En rangée flex, les trois repères s'alignaient sur
   leur milieu : le tarif porte deux notes sous sa valeur, si bien que
   « Durée » et « Centres » se retrouvaient décalés d'une demi-ligne
   l'un par rapport à l'autre, et les écarts entre eux variaient avec la
   longueur du contenu. Trois colonnes égales, calées en tête, rangent
   les trois libellés sur la même ligne quoi qu'ils portent. */
.facts {
  list-style: none;
  margin: 1.8rem 0 1.4rem;
  padding: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  align-items: start;
  gap: 1.5rem 2rem;
  font-family: var(--font-ui);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  padding-block: 1.35rem;
}

/* Le pictogramme occupe une colonne à part, le libellé et la valeur
   s'empilent à côté : la ligne reste lisible même sur deux lignes. */
.facts li {
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0.85rem;
  row-gap: 0.25rem;
  align-items: start;
}

/* Le picto passe sur une pastille blanche : posé à nu sur le bandeau
   pastel du thème, un trait de 1,5 px se noyait dans le fond. Le blanc
   tient sur les cinq teintes de domaine sans avoir à en dériver une
   sixième valeur. */
.facts__pastille {
  grid-row: 1 / 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--c-bg);
  color: var(--c-accent-dark);
  flex: none;
  /* Aligne le centre optique de la pastille sur le libellé, pas sur le
     haut de sa boîte. */
  margin-block-start: -0.15rem;
}

.facts__icone {
  color: inherit;
}

.facts__label {
  font-weight: var(--fw-bold);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.facts__value {
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  line-height: 1.25;
  color: var(--c-text);
  /* Coupe les valeurs sur un espace plutôt qu'au milieu d'un mot quand
     la colonne se resserre : « 28h (8 soirées) ou 21h (3 jours) ». */
  text-wrap: pretty;
}

.facts__note {
  font-weight: var(--fw-regular);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

/* La modalité passe sous l'adresse. Les autres notes — l'horaire après
   la date, « par participant » après le tarif — sont assez courtes pour
   rester à la suite de leur valeur. */
.facts__note--bloc {
  display: block;
  margin-block-start: 0.15rem;
}

.formation-hero .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-block: 1.6rem;
  max-width: none;
}

.formation-hero .nps-badge {
  margin-block: 0.5rem 0;
}

/* Fiche formation — corps pleine largeur

   La colonne latérale et son encart collant ont été retirés le 22/08 :
   l'encart répétait l'en-tête et rognait le corps de 300 px sur toute sa
   hauteur. Les règles `.formation-layout`, `.formation-aside` et
   `.reserver` sont parties avec — plus rien ne les portait. */

/* ---- Le programme en modules ----

   Empilés, huit modules faisaient défiler autant de titres presque
   identiques sur deux écrans. En grille, la structure du parcours se
   lit d'un coup d'œil. `auto-fit` avec un plancher de 17 rem donne
   trois colonnes sur la pleine largeur, deux en tablette, une sur
   mobile — sans média-requête. */
.programme-grid {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.25rem;
}

.programme-carte {
  margin: 0;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 1.4rem 1.5rem;
}

/* Le filet d'accent des H3 de section n'a pas lieu d'être ici : il
   couperait chaque carte en deux. */
.programme-carte h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: var(--fs-aside);
  line-height: 1.3;
  color: var(--c-text);
}

.programme-carte h3::after {
  content: none;
}

.programme-carte p {
  margin: 0;
  max-width: none;
  font-family: var(--font-ui);
  font-size: var(--fs-aside);
  line-height: 1.6;
  color: var(--c-text-muted);
}

/* Les programmes locaux (pages centres) détaillent leurs modules en
   liste à puces plutôt qu'en paragraphe : mêmes réglages que
   `.programme-carte p` ci-dessus, pour que le texte tienne la même
   place qu'il tombe dans l'un ou l'autre. */
.programme-carte ul {
  margin: 0;
  max-width: none;
  padding-left: 1.1em;
  font-family: var(--font-ui);
  font-size: var(--fs-aside);
  line-height: 1.6;
  color: var(--c-text-muted);
}

.programme-carte li {
  margin: 0;
}

.programme-carte li + li {
  margin-block-start: 0.3em;
}

/* Deux colonnes plutôt que trois (demande du 24/08) : ces cartes
   portent une liste à puces, plus longue à lire qu'une phrase, et la
   troisième colonne du gabarit national les aurait rendues trop
   étroites. Une seule en dessous de 42 rem — jamais de colonne
   orpheline sur un module resté seul. */
.programme-grid--2col {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 42rem) {
  .programme-grid--2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- Questions fréquentes d'une fiche formation ----

   L'accordéon lui-même est le composant `.faq-item`, plus bas dans cette
   feuille : il sert déjà sur /faq/, /modalites/sur-mesure/ et
   /modalites/financement-cpf/. Il ne manquait que le filet supérieur,
   que les pages qui l'emploient obtiennent par le titre de leur groupe.
   La mesure de lecture est reprise de `.faq-item__reponse`. */
.faq-liste {
  margin-block-start: 2rem;
  max-width: 70ch;
  border-top: 1px solid var(--c-border);
}

/* ---- Chiffres du marché (haut des quatre thèmes principaux) ----

   Trois colonnes égales, reprises des pages d'origine. Le chiffre porte
   la carte, l'énoncé l'explique, la source la crédibilise : sans elle on
   n'affiche rien (CLAUDE.md §13). Le tout est un encadré de faits, pas
   une section de lecture — d'où l'absence de titre. */
.chiffres-marche {
  list-style: none;
  margin: 0 0 3rem;
  padding: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1.25rem;
}

.chiffre-carte {
  margin: 0;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

/* Sélecteur doublé : `.dc-icone` pose `color: var(--c-link)` plus bas
   dans cette feuille et l'emporterait à spécificité égale — le
   pictogramme sortait en anthracite.

   #b25c10 et non l'orange de marque : sur le crème des cartes, le
   #f58220 de la charte tombe à 2,9:1, sous le seuil de 3:1 des éléments
   graphiques. Même valeur que `.icone-pastille--accent`, où le cas
   s'était déjà posé (4,4:1 ici). */
.chiffre-carte .chiffre-carte__picto {
  color: #b25c10;
  margin-block-end: 0.9rem;
}

/* Le chiffre est une donnée, pas un titre : Work Sans en Bold, comme
   les autres valeurs de l'interface — Sanchez n'existe qu'en 400 et
   n'a pas la présence qu'il faut ici (TYPOGRAPHIE.md §0). */
.chiffre-carte__valeur {
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-text);
  max-width: none;
  margin: 0 0 0.5rem;
}

.chiffre-carte__texte {
  font-family: var(--font-ui);
  font-size: var(--fs-aside);
  line-height: 1.55;
  color: var(--c-text);
  max-width: none;
  /* Colle la source au bas de la carte : les trois énoncés n'ont pas la
     même longueur, et sans cela les trois sources flottent à trois
     hauteurs différentes. */
  margin: 0 0 1rem;
  flex: 1 1 auto;
}

.chiffre-carte__source {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--c-text-muted);
  max-width: none;
  margin: 0;
}


/* ---- Rappel des appels à l'action, après « À qui s'adresse » ----

   Les deux mêmes boutons que l'en-tête, replacés là où le visiteur
   vient d'établir qu'il est concerné. Les filets les détachent du
   texte : sans eux, une paire de boutons au milieu d'un enchaînement
   de sections passe pour la fin de la section précédente. */
.formation-relance {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  max-width: none;
  margin-block: 2.5rem;
  padding-block: 1.6rem;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

/* ---- Ils l'ont suivie : les citations en rangée ----

   Deux exergues empilés à 30ch dans un corps de 1 092 px laissaient les
   deux tiers de la largeur vides et coûtaient un écran de défilement de
   plus. `auto-fit` les pose côte à côte tant que la place suffit, et les
   repasse l'un sous l'autre en dessous de ~44 rem — sans média-requête,
   et quel que soit le nombre de témoignages saisis. */
.temoignages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1.6rem 2.5rem;
  margin-block-start: 2rem;
  align-items: start;
}

/* La citation remplit sa colonne : c'est la grille qui tient désormais
   la longueur de ligne, plus la mesure de 30ch de l'exergue. La marge
   verticale de 2.5em de `blockquote` ferait doublon avec le `gap`. */
.temoignages-grid blockquote {
  max-width: none;
  margin-block: 0;
}

/* ---- Le corps de la fiche occupe sa largeur ----

   Demandé le 22/08. La mesure de 68ch sert une page de lecture suivie ;
   sur une fiche produit, depuis le retrait de la colonne latérale, elle
   laissait ~450 px de blanc à droite de chaque paragraphe. Le corps de
   la fiche s'en affranchit donc.

   Une exception volontaire : les cartes de module
   (`.programme-carte`), dont la grille fixe déjà la largeur. */
.formation-corps p,
.formation-corps ul,
.formation-corps ol,
.formation-corps li,
.formation-corps .faq-liste,
.formation-corps .faq-item__reponse {
  max-width: none;
}

/* Sections d'une page thème : filet orange sous chaque H2 pour
   installer le rythme de lecture.

   `.centre-texte h2` ajouté le 24/08 : ce contenu d'éditeur — pages
   centres, programmes locaux, contact — vit dans une div intermédiaire
   et non en enfant direct de `section`, ce qui l'excluait des trois
   premiers sélecteurs. Ses H2 en repartaient nus, sans filet ni
   séparation du paragraphe précédent. */
.dc-main section > h2::after,
.formation-single > section > h2::after,
.dc-main > section > h2::after,
.formation-intro > h2::after,
.centre-texte h2::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 0.4em;
  background: var(--c-accent);
  border-radius: 2px;
}

/* Sauf dans l'encadré d'appel : c'est un bloc d'action, pas une section
   de lecture. Le cas ne se posait pas tant que ces encadrés portaient un
   H3 ; le hub des centres en a un en H2, sa hiérarchie l'exigeant. */
.dc-main section.aside > h2::after {
  content: none;
}

.formation-single > section {
  margin-block-end: 1rem;
}

/* Zone éditoriale libre en tête de fiche. Ses H2 viennent de l'éditeur,
   d'où le sélecteur d'enfant direct : ils doivent porter le même filet
   et le même rythme que les sections construites par le gabarit. */
.formation-intro {
  margin-block-end: 1rem;
}

.formation-intro > h2:not(:first-child) {
  margin-block-start: 1.8em;
}

/* Même rythme sur le contenu des pages centres et programmes locaux :
   plusieurs H2 s'y suivent (jusqu'à six sur ces fiches), et sans cette
   marge ils ne se distinguaient du paragraphe précédent que par leur
   taille de police. */
.centre-texte > h2:not(:first-child) {
  margin-block-start: 1.8em;
}

/* Encadré d'appel en fin de page : bloc navy, pas une simple boîte grise */
.formation-single > section.aside,
.dc-main > section.aside {
  max-width: none;
  background: var(--c-navy);
  border: none;
  border-radius: 10px;
  padding: 2rem 2.2rem;
  margin-block: 3rem 0;
}

.formation-single > section.aside h2,
.formation-single > section.aside h3,
.dc-main > section.aside h2,
.dc-main > section.aside h3 {
  color: #fff;
  font-size: var(--fs-h3);
  margin-top: 0;
}

.formation-single > section.aside p,
.dc-main > section.aside p {
  color: var(--c-inverse-text);
}

.formation-single > section.aside a {
  color: #fff;
}

/* =========================================================================
   Composants métier
   ========================================================================= */

/* ---- Carte de session (page thème, calendrier, page centre) ---- */

.session-card {
  position: relative;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 1rem 1.5rem;
  align-items: center;
  padding: 1.1rem 1.4rem;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  /* Le filet prend la couleur du programme, posée en variable par
     dc_style_theme(). Une session sans thème rattaché n'en a pas : elle
     retombe sur l'orange, comme avant. */
  border-left: 4px solid var(--accent, var(--c-accent));
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  margin-block-end: 0.8rem;
  font-family: var(--font-ui);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.session-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

/* La carte relevait déjà au survol sans mener nulle part : elle promettait
   un clic qu'elle ne tenait pas. Le lien est posé sur le titre — un seul
   lien annoncé par un lecteur d'écran, avec le titre de la session pour
   libellé — puis étendu à toute la carte par ce pseudo-élément. */
.session-card__titre a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.session-card__titre a {
  color: var(--c-text);
  text-decoration: none;
}

.session-card:hover .session-card__titre a,
.session-card__titre a:focus-visible {
  color: var(--c-link);
  text-decoration: underline;
}

/* Le focus clavier doit se voir sur la carte entière, pas sur les deux
   mots du titre : c'est la zone que le clic active. */
.session-card:has(.session-card__titre a:focus-visible) {
  outline: 3px solid var(--c-link);
  outline-offset: 2px;
}

.session-card__titre a:focus-visible {
  outline: none;
}

/* Le pictogramme du programme, sur sa pastille pastel. Il double le
   filet de couleur : la teinte seule ne dit pas quel programme c'est à
   qui ne l'a pas mémorisée, et ne se voit pas du tout en daltonisme. */
.session-card__picto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent-pale, var(--c-bg-alt));
  color: var(--accent-fonce, var(--c-accent-dark));
  flex: none;
}

/* `.dc-icone` pose sa propre couleur sur le <svg> et coupe l'héritage :
   sans ce rappel, le tracé sortirait en anthracite sur la pastille. */
.session-card__picto .dc-icone {
  color: inherit;
}

.session-card__date {
  font-weight: var(--fw-bold);
  font-size: var(--fs-aside);
  white-space: nowrap;
}

.session-card__titre {
  font-weight: var(--fw-regular);
  font-size: var(--fs-aside);
  margin: 0;
  max-width: none;
}

.session-card__lieu {
  font-weight: var(--fw-regular);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

.session-card__prix {
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

/* Trois colonnes ne tiennent pas sur un téléphone : la date et le prix
   sont en `auto` et refusent de se réduire, la carte débordait donc de
   80 px hors de l'écran et faisait défiler la page horizontalement.
   Sous 34 rem, la date passe au-dessus du titre et le prix en dessous.
   Corrigé le 18/08 : le défaut touchait toutes les listes de sessions,
   pas seulement la page CPF. */
@media (max-width: 34rem) {
  .session-card {
    /* Le pictogramme garde sa colonne et longe les trois lignes ; sans
       cela il occuperait une ligne à lui seul et allongerait chaque
       carte d'autant.

       Les placements sont explicites : `grid-row: 1 / -1` ne vaut rien
       ici, faute de lignes déclarées — `-1` désigne la dernière ligne
       explicite, et la grille n'en a aucune. Le pictogramme retombait
       alors sur une seule ligne, la date et le prix passaient à côté du
       titre et sortaient du cadre. */
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 0.35rem 1rem;
    align-items: start;
  }

  .session-card__picto {
    grid-column: 1;
    grid-row: 1 / 4;
    align-self: center;
  }

  .session-card__date,
  .session-card__corps,
  .session-card__prix {
    grid-column: 2;
  }

  /* Sans pictogramme, la première colonne n'a plus lieu d'être. */
  .session-card:not(:has(.session-card__picto)) {
    grid-template-columns: minmax(0, 1fr);
  }

  .session-card:not(:has(.session-card__picto)) .session-card__date,
  .session-card:not(:has(.session-card__picto)) .session-card__corps,
  .session-card:not(:has(.session-card__picto)) .session-card__prix {
    grid-column: 1;
  }

  .session-card__date {
    font-size: var(--fs-small);
    color: var(--c-text-muted);
  }

  .session-card__prix {
    margin-block-start: 0.2rem;
  }
}

/* ---- Page d'une session ---- */

/* Session échue : un bandeau ambre, ni alarmant ni discret. Le
   visiteur doit comprendre avant de remplir le formulaire que la date
   est passée. */
.notice--passee {
  font-family: var(--font-ui);
  font-size: var(--fs-aside);
  color: var(--c-text);
  background: var(--c-jaune-pale);
  border-left: 4px solid var(--c-jaune);
  border-radius: 6px;
  padding: 0.9rem 1.2rem;
  margin-block: 0 2rem;
  max-width: none;
}

/* Informations pratiques et bouton d'inscription sur la même ligne, le
   bouton calé à droite. La liste des faits prend ce qui reste et se
   replie d'elle-même — l'adresse passe sur deux lignes plutôt que de
   pousser le bouton hors du cadre. */
/* ---- Informations pratiques d'une session ----

   Deux colonnes fixes : les libellés alignés à gauche, les valeurs en
   regard. La disposition précédente rangeait les faits côte à côte dans
   une boîte flexible, si bien que « Format » se plaçait à une hauteur
   différente de « Date » et que chaque session produisait une mise en
   page différente selon la longueur de son adresse. Ici, la longueur
   des textes ne déplace plus rien (demande du 18/08). */
.session-entete {
  display: flex;
  flex-wrap: wrap;
  /* Le bouton se centre sur la hauteur de la liste : accroché en haut,
     il laissait un vide de deux cents pixels sous lui. */
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  margin-block: 2rem;
  padding: 1.6rem 1.8rem;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: 12px;
}

.session-faits {
  flex: 1 1 26rem;
  min-width: 0;
  margin: 0;
  display: grid;
  /* Le libellé prend la largeur du plus long — « Date de début » — et
     s'y tient d'une ligne à l'autre. */
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.9rem 1.6rem;
  align-items: baseline;
  font-family: var(--font-ui);
}

.session-faits__label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: var(--fw-bold);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  /* Sur la ligne de base du libellé, le pictogramme flotterait au-dessus
     du texte : il se cale sur la hauteur de la ligne. */
  align-self: start;
  padding-block-start: 0.15em;
}

.session-faits__icone {
  flex: 0 0 auto;
  color: var(--c-accent-dark);
}

/* 1,1875 rem plutôt que --fs-h4 : à la taille d'un titre, une adresse
   complète passait sur deux lignes alors que la place était là. Ce sont
   des informations pratiques, pas des titres. */
.session-faits__valeur {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: 1.1875rem;
  line-height: 1.35;
  color: var(--c-text);
}

/* La précision — horaires, modalité, « par participant » — sous la
   valeur, jamais à sa suite. */
.session-faits__note {
  display: block;
  margin-block-start: 0.2rem;
  font-weight: var(--fw-regular);
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--c-text-muted);
}

.session-entete__action {
  flex: 0 0 auto;
  margin: 0;
  max-width: none;
}

/* En dessous de 34rem, la colonne des valeurs n'a plus la place de
   tenir à côté des libellés : tout s'empile. */
@media (max-width: 34rem) {
  .session-faits {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem;
  }

  .session-faits__label {
    padding-block-start: 0;
  }

  .session-faits__valeur {
    margin-block-start: 0.15rem;
  }
}

/* ---- Documents à télécharger ----
   Programme, témoignages, évaluations : le contenu hérité les empilait
   un par écran, chacun sous son filet. En rangée, ils se lisent d'un
   coup d'œil. */
.session-docs {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.25rem;
}

.session-doc {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 1.4rem 1.5rem;
  box-shadow: var(--shadow-card);
  font-family: var(--font-ui);
}

.session-doc__icone {
  color: var(--c-accent-dark);
}

.session-doc__titre {
  font-weight: var(--fw-bold);
  font-size: var(--fs-aside);
  line-height: 1.35;
  color: var(--c-text);
  margin: 0;
  max-width: none;
  /* Pousse le bouton en bas : les cartes d'une rangée alignent leurs
     actions même quand les intitulés font une ou trois lignes. */
  flex: 1 1 auto;
}

.session-doc__action {
  margin: 0;
  max-width: none;
}

.session-single__contenu {
  margin-block-start: 2rem;
}

.session-single__inscription {
  margin-block-start: 2rem;
  max-width: none;
}

.session-single__retour {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  margin-block-start: 2.5rem;
  max-width: none;
}

/* ---- Page contact : carte de France et coordonnées des centres ----
   Reprise de la structure de la page actuelle : la carte situe les trois
   centres, la liste donne la ligne directe de chacun. La pastille de
   couleur de chaque bloc reprend celle de sa région sur la carte —
   c'est ce qui fait le lien entre les deux colonnes. La couleur est
   passée en variable `--puce` depuis le gabarit, seule information de
   présentation qui dépende de la donnée. */

/* ---- Page contact ----

   Le formulaire et les coordonnées en regard, dans la première bande
   (demande du 18/08). La colonne du formulaire est la plus large : ses
   champs sur deux colonnes ont besoin de place, la liste des centres se
   contente d'une colonne étroite.

   `align-items: start` et non `center` : les deux colonnes n'ont pas la
   même hauteur, et centrer la plus courte laisserait son titre flotter
   au milieu de la bande, loin du titre voisin. */
.contact-duo {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 2.5rem 3rem;
  align-items: start;
}

.contact-duo h2 {
  margin-block-start: 0;
}

.contact-duo__intro {
  font-size: var(--fs-aside);
  line-height: 1.6;
  color: var(--c-text-muted);
  max-width: 46ch;
  margin-block-end: 1.6rem;
}

/* La carte ferme la colonne des coordonnées : décorative, elle ne doit
   pas retarder l'accès aux numéros. */
.contact-duo .contact-carte {
  margin-block-start: 2rem;
  max-width: 420px;
}

.contact-carte {
  margin: 0;
  max-width: none;
}

.contact-carte img {
  display: block;
  width: 100%;
  height: auto;
}

.contact-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  display: grid;
  gap: 1.6rem;
}

.contact-liste li {
  margin: 0;
  padding-inline-start: 1.1rem;
  border-inline-start: 4px solid var(--puce, var(--c-turquoise));
}

.contact-liste h3 {
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  margin: 0 0 0.4rem;
}

.contact-liste h3 a {
  color: var(--c-text);
  text-decoration: none;
}

.contact-liste h3 a:hover {
  color: var(--c-link);
  text-decoration: underline;
}

.contact-liste__ligne {
  font-family: var(--font-ui);
  font-size: var(--fs-aside);
  color: var(--c-text-muted);
  margin: 0 0 0.25rem;
  max-width: none;
}

/* Les adresses e-mail dépassent la colonne sur un petit écran : elles
   doivent pouvoir se couper, sans quoi la page défile en largeur. */
.contact-liste__ligne a {
  color: var(--c-link);
  overflow-wrap: anywhere;
}

/* Le délai de réponse, sous le bouton d'envoi. Le nombre porte le poids,
   la légende reste discrète — même dessin que les chiffres du hero, dont
   il reprend le rôle depuis que le bandeau a été retiré. */
.contact-delai {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-block: 1.6rem 0;
  padding-block-start: 1.2rem;
  border-top: 1px solid var(--c-border);
  font-family: var(--font-ui);
  max-width: none;
}

.contact-delai strong {
  font-size: 1.375rem;
  line-height: 1.1;
  color: var(--c-navy);
}

.contact-delai span {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

/* Sous 62 rem, les deux colonnes s'empilent. Le formulaire reste en
   tête : c'est le chemin le plus emprunté depuis un téléphone, où
   composer un numéro depuis une liste de quatre est plus laborieux que
   remplir six champs. */
@media (max-width: 62rem) {
  .contact-duo {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }

  .contact-duo .contact-carte {
    max-width: 420px;
    margin-inline: auto;
  }
}

/* Le texte rédigé de la page contact garde la mesure de lecture : ses
   trois sections sont de la prose, pas une grille. */
.contact-texte {
  max-width: 74ch;
}

/* ---- Formulaires Contact Form 7 ----
   Les formulaires existants regroupent tous leurs champs dans un seul
   paragraphe séparé par des <br> : on met donc en forme les contrôles
   eux-mêmes plutôt qu'une grille de champs. Aucun style CF7 n'est
   chargé (§11) : tout vient d'ici. */

.wpcf7 {
  max-width: 620px;
  margin-block: 2rem;
}

/* ---- Champs appariés ----
   Le formulaire « Contact national 2026 » enveloppe déjà ses champs deux
   par deux dans `.dc-form__ligne` — prénom/nom, e-mail/téléphone, code
   postal/entreprise. Ces classes n'avaient jamais reçu de styles : tout
   s'empilait sur une colonne, et le formulaire paraissait deux fois plus
   long qu'il ne l'est. */

.dc-form__ligne {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.25rem;
}

.dc-form label {
  display: block;
  font-family: var(--font-ui);
  font-weight: var(--fw-medium);
  font-size: var(--fs-small);
  color: var(--c-text);
  margin-block-end: 0.9rem;
}

/* Le libellé du consentement a sa propre mise en forme plus bas (case
   et texte alignés, gris) : ne pas lui réappliquer la marge du bloc. */
.dc-form .wpcf7-list-item label {
  margin-block-end: 0;
}

/* Deux colonnes demandent de la largeur : à 620 px chaque champ tombe
   sous 300, trop court pour une adresse e-mail. */
.contact-duo__form .wpcf7,
.session-single__contenu .wpcf7 {
  max-width: 780px;
}

@media (max-width: 640px) {
  .dc-form__ligne {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Formulaires hérités des pages de session ----
   Les trois formulaires de demande de renseignements (Paris, Marseille,
   Toulouse) portent déjà `FormCard__field--half` sur les six champs à
   apparier — prénom/nom, e-mail/téléphone, code postal/ville. Ces
   classes venaient de l'ancien thème et n'avaient jamais été reprises :
   les champs s'empilaient sur une colonne. Aucune modification des
   formulaires en base, seulement les styles qui leur manquaient. */

.FormCard__fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1.25rem;
  margin-block: 1.4rem;
}

/* Le titre de groupe et tout champ non apparié tiennent la largeur. */
.FormCard__field {
  grid-column: 1 / -1;
}

.FormCard__field--half {
  grid-column: span 1;
}

.RegisterParticipants__form__title,
.RegisterParticipants__headline {
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--c-text);
}

.RegisterParticipants__form__title {
  font-size: var(--fs-aside);
  margin-block-start: 0.4rem;
}

.FormCard__field--checkbox-stack {
  margin-block: 1.2rem 0.8rem;
}

.FormCard__note .legal,
.wpcf7-form p.legal {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-text-muted);
  max-width: 70ch;
}

.RegisterParticipants__cart {
  margin-block-start: 1.4rem;
}

@media (max-width: 640px) {
  .FormCard__fieldset {
    grid-template-columns: minmax(0, 1fr);
  }

  .FormCard__field--half {
    grid-column: 1 / -1;
  }
}

/* Les liens « Télécharger » et « Inscrire un participant » du contenu
   hérité portent la classe `Button--black` de l'ancien thème. Ils
   reprennent le dessin du bouton d'envoi, juste au-dessus d'eux sur la
   même page (demande du 16/08). La règle couvre aussi les sessions dont
   un lien échapperait au découpage du gabarit. */
a.Button--black {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: 1.0625rem;
  line-height: 1.2;
  letter-spacing: 0.5px;
  color: #fff;
  background: var(--c-turquoise);
  border-radius: 6px;
  padding: 0.85em 1.7em;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 182, 179, 0.35);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

a.Button--black:hover,
a.Button--black:focus-visible {
  background: var(--c-navy);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

/* Filet de sécurité pour tout ce que l'ancien thème habillait en bouton
   et que les deux règles ci-dessus ne couvrent pas : les renvois vers
   une autre évaluation en bas de « Testez votre niveau d'engagement »,
   le « Trouver un évènement » de son bandeau, les « S'inscrire » vers
   Eventbrite des deux pages d'évènement conservées. Sans elle, ces liens
   restaient en texte souligné alors que le contenu les avait écrits
   comme des boutons — le même défaut que celui signalé le 18/08 sur les
   livres blancs.

   Dessin secondaire, pas primaire : ce sont des appels de second rang,
   et sur la page d'engagement ils sont trois à la suite. En turquoise
   plein, ils l'emporteraient sur le bouton qui mène au formulaire. */
a.Button:not(.Button--black):not([href*="#DownloadForm"]) {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: 1.0625rem;
  line-height: 1.2;
  letter-spacing: 0.5px;
  color: var(--c-link);
  background: transparent;
  border: 2px solid var(--c-link);
  border-radius: 6px;
  padding: 0.75em 1.6em;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

a.Button:not(.Button--black):not([href*="#DownloadForm"]):hover,
a.Button:not(.Button--black):not([href*="#DownloadForm"]):focus-visible {
  background: var(--c-link);
  color: #fff;
  text-decoration: none;
}

/* Le lien qui mène au formulaire de demande, sur les évaluations et les
   livres blancs. Il prend le dessin d'un bouton, comme les autres appels
   à l'action du site (demandes des 17 et 18/08).

   Deux destinations se cachent derrière le même libellé « Téléchargez
   votre copie », et le sélecteur les distingue :

     href="#DownloadForm"   le formulaire est plus bas sur la même page ;
     href="https://…#…"     le document est sur dalecarnegie.com.

   D'où deux marqueurs. Le premier pointe vers le bas, là où le visiteur
   doit aller ; le second pointe en diagonale, la convention qui annonce
   une sortie du site. Sans ce partage, un même bouton mènerait tantôt à
   trente centimètres plus bas, tantôt sur un autre domaine.

   Les deux marqueurs sont dessinés en bordures, comme le chevron des
   dépliants du processus : rien à annoncer pour un lecteur d'écran, et
   aucune requête de plus. */
a.Button[href*="#DownloadForm"] {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  margin-block: 1.6rem 2.4rem;
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: 1.0625rem;
  line-height: 1.2;
  letter-spacing: 0.5px;
  color: #fff;
  background: var(--c-turquoise);
  border-radius: 6px;
  padding: 0.85em 1.7em;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 182, 179, 0.35);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

/* Triangle vers le bas : le formulaire est plus bas sur la même page. */
a.Button[href="#DownloadForm"]::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 6px solid currentColor;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  transition: transform 0.15s ease;
}

/* Flèche en diagonale : le document est sur dalecarnegie.com, c'est le
   dessin qui annonce une sortie du site.

   Deux bordures d'un carré tourné, comme pour le triangle ci-dessus,
   donnaient un simple coin que l'œil lisait comme un chevron vers le
   haut. La flèche est donc un SVG posé en masque, coloré par
   `currentColor` : il suit le libellé du bouton sans être annoncé par
   les lecteurs d'écran, et le fichier reste dans la feuille de style —
   aucune requête de plus.

   Le sélecteur distingue les deux cas sur le protocole : les liens
   internes du contenu hérité valent exactement « #DownloadForm », les
   externes commencent par « https:// ». */
a.Button[href^="http"][href*="#DownloadForm"]::after {
  content: "";
  width: 0.95em;
  height: 0.95em;
  background-color: currentColor;
  -webkit-mask: var(--fleche-sortante) center / contain no-repeat;
  mask: var(--fleche-sortante) center / contain no-repeat;
  transition: transform 0.15s ease;
}

a.Button[href*="#DownloadForm"]:hover,
a.Button[href*="#DownloadForm"]:focus-visible {
  background: var(--c-navy);
  color: #fff;
  text-decoration: none;
}

/* Au survol, le marqueur bouge plutôt que le bouton ne se soulève : le
   geste indique où mène le clic — vers le bas pour le formulaire de la
   page, vers la sortie pour dalecarnegie.com. */
a.Button[href="#DownloadForm"]:hover::after,
a.Button[href="#DownloadForm"]:focus-visible::after {
  transform: translateY(3px);
}

a.Button[href^="http"][href*="#DownloadForm"]:hover::after,
a.Button[href^="http"][href*="#DownloadForm"]:focus-visible::after {
  transform: translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
  a.Button[href*="#DownloadForm"],
  a.Button[href*="#DownloadForm"]::after {
    transition: none;
  }

  a.Button[href="#DownloadForm"]:hover::after,
  a.Button[href="#DownloadForm"]:focus-visible::after {
    transform: none;
  }

  a.Button[href^="http"][href*="#DownloadForm"]:hover::after,
  a.Button[href^="http"][href*="#DownloadForm"]:focus-visible::after {
    transform: none;
  }
}

/* ---- Encart d'appel dans un contenu hérité (.dc-cta) ----

   Deux familles d'encarts arrivent ici, de deux époques différentes :
   les bandeaux `.CtaBar` de l'ancien thème (54 blocs) et les widgets
   « call to action » d'Elementor (5 articles). Ils disaient la même
   chose de deux façons ; ils partagent désormais un seul dessin, et
   deux filtres de functions.php les y ramènent.

   L'aplat de couleur pleine largeur devient un encadré du design
   system : fond pâle, filet épais de la teinte, titre en navy, bouton
   dans la déclinaison lisible. La couleur d'origine est conservée —
   elle ne porte plus le texte, elle le désigne. */

.dc-cta {
  /* Turquoise par défaut : la teinte que les filtres retiennent quand
     un encart n'en annonce aucune. */
  --cta: var(--c-turquoise);
  --cta-fonce: var(--c-turquoise-fonce);
  --cta-pale: var(--c-turquoise-pale);

  background: var(--cta-pale);
  border: 1px solid var(--c-border);
  border-top: 4px solid var(--cta);
  border-radius: 10px;
  padding: 1.7rem 1.9rem 1.9rem;
  margin-block: 2.6rem;
}

.dc-cta--orange {
  --cta: var(--c-orange);
  --cta-fonce: var(--c-orange-fonce);
  --cta-pale: var(--c-orange-pale);
}

.dc-cta--jaune {
  --cta: var(--c-jaune);
  --cta-fonce: var(--c-jaune-fonce);
  --cta-pale: var(--c-jaune-pale);
}

.dc-cta--vert {
  --cta: var(--c-vert);
  --cta-fonce: var(--c-vert-fonce);
  --cta-pale: var(--c-vert-pale);
}

.dc-cta--turquoise {
  --cta: var(--c-turquoise);
  --cta-fonce: var(--c-turquoise-fonce);
  --cta-pale: var(--c-turquoise-pale);
}

.dc-cta--bleu {
  --cta: var(--c-bleu);
  --cta-fonce: var(--c-bleu-fonce);
  --cta-pale: var(--c-bleu-pale);
}

.dc-cta--violet {
  --cta: var(--c-violet);
  --cta-fonce: var(--c-violet-fonce);
  --cta-pale: var(--c-violet-pale);
}

/* Les titres montaient à 40 px, plus fort que les titres de section
   qui les entourent. Ramenés au niveau H3. */
.dc-cta__titre {
  font-family: var(--font-titre);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h3);
  line-height: 1.25;
  color: var(--c-navy);
  margin: 0 0 0.8rem;
  max-width: 34ch;
}

.dc-cta__texte {
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  color: var(--c-text);
  margin: 0 0 1.2rem;
  max-width: none;
}

/* Le lien du chapô était forcé en blanc souligné par le CSS
   personnalisé du widget Elementor. Sur fond pâle, il redevient un
   lien du site. */
.dc-cta__texte a {
  color: var(--cta-fonce);
}

.dc-cta__action,
.dc-cta p:last-child {
  margin-block-end: 0;
}

/* Le bouton reprenait le turquoise du design system : sur un encart
   turquoise, il disparaissait dans le fond. Il porte maintenant la
   teinte de l'encart, dans sa déclinaison lisible (4,5:1 en blanc). */
.dc-cta a.dc-cta__bouton {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: 1.0625rem;
  line-height: 1.2;
  letter-spacing: 0.5px;
  color: #fff;
  background: var(--cta-fonce);
  border: none;
  border-radius: 6px;
  padding: 0.85em 1.7em;
  text-decoration: none;
  box-shadow: none;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.dc-cta a.dc-cta__bouton:hover,
.dc-cta a.dc-cta__bouton:focus-visible {
  background: var(--c-navy);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

.wpcf7-form p {
  max-width: none;
  margin-block-end: 0.5rem;
}

.wpcf7-form br {
  line-height: 0.6;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-aside);
  color: var(--c-text);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 0.75em 1em;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wpcf7-form textarea {
  height: 170px;
  min-height: 120px;
  resize: vertical;
}

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--c-link);
  box-shadow: 0 0 0 3px rgba(47, 81, 154, 0.15);
}

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
  color: var(--c-text-muted);
  opacity: 1;
}

/* Consentement et cases à cocher : la case et son libellé alignés */
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item,
.wpcf7-form .wpcf7-checkbox .wpcf7-list-item {
  margin: 0;
  display: block;
}

.wpcf7-form .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-text-muted);
}

.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"] {
  margin-top: 0.2em;
  width: 1.05em;
  height: 1.05em;
  accent-color: var(--c-link);
  flex: 0 0 auto;
}

/* Le bouton d'envoi est un input, pas un button : il ne prend pas les
   règles de .button, on le rhabille explicitement. */
.wpcf7-form input[type="submit"],
.wpcf7-form .wpcf7-submit {
  display: inline-block;
  width: auto;
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: 1.0625rem;
  line-height: 1.2;
  letter-spacing: 0.5px;
  color: #fff;
  background: var(--c-turquoise);
  border: none;
  border-radius: 6px;
  padding: 0.85em 1.7em;
  margin-top: 0.8rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 182, 179, 0.35);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form .wpcf7-submit:hover {
  background: var(--c-navy);
  transform: translateY(-1px);
}

.wpcf7-form .wpcf7-not-valid-tip {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  color: #b3261e;
  margin-top: 0.35em;
}

.wpcf7-form .wpcf7-response-output {
  font-family: var(--font-ui);
  font-size: var(--fs-aside);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-accent);
  border-radius: 6px;
  padding: 0.9em 1.1em;
  margin: 0;
}

.wpcf7-spinner {
  margin-left: 0.6rem;
}

/* ---- Blog : grille d'articles, article ---- */

.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem 1.75rem;
  margin-block: 2rem;
}

/*
 * Le corps d'une page thème occupait 744 px tant qu'un encart lui
 * prenait 300 px à droite : le plancher de 300 px n'y laissait tenir que
 * deux cartes, et le troisième article partait seul sur une deuxième
 * ligne. La colonne retirée (22/08), la largeur suffit — le plancher
 * commun redonne les trois cartes que demande le §10.
 */

.article-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.article-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}

.article-card__media {
  display: block;
  line-height: 0;
  background: var(--c-bg-alt);
}

.article-card__media img {
  width: 100%;
  height: 190px;
  object-fit: cover;
}

/*
 * Corps du hub des ressources. La page n'est pas construite en bandes —
 * filtres, liste et pagination s'enchaînent sans respiration de couleur —
 * mais elle a besoin de la même gouttière que les bandes pour s'aligner
 * sur l'en-tête navy qui la surmonte.
 */
/* ---- Tiroir de filtres du blog ----

   Un <details>, pas un script : l'ouverture, la fermeture et l'accès au
   clavier sont fournis par le navigateur. Le chevron pivote sur
   l'attribut `open`, que le navigateur pose lui-même. */
.filtres-tiroir {
  margin-block-end: 2rem;
}

/* Chrome insère depuis peu un `::details-content` entre <details> et ses
   enfants. Ce pseudo-élément n'est pas atteint par le
   `*, ::after, ::before { box-sizing: inherit }` de GeneratePress — il
   retombe donc sur `content-box`, que tout le contenu du tiroir hérite
   à son tour. Le bouton « Rechercher », mis en largeur 100 % sous
   600 px, ajoutait ses 58 px de rembourrage par-dessus et débordait de
   17 px. On rétablit la valeur explicitement plutôt que de compter sur
   l'héritage. */
.filtres-tiroir,
.filtres-tiroir * {
  box-sizing: border-box;
}

.filtres-tiroir__bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1.1rem;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--c-bg);
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: var(--fs-aside);
  color: var(--c-text);
  cursor: pointer;
  list-style: none;
}

/* Safari dessine encore son triangle par défaut sans cette règle. */
.filtres-tiroir__bouton::-webkit-details-marker {
  display: none;
}

.filtres-tiroir__bouton:hover,
.filtres-tiroir[open] .filtres-tiroir__bouton {
  border-color: var(--c-navy);
}

.filtres-tiroir__bouton:focus-visible {
  outline: 2px solid var(--c-navy);
  outline-offset: 2px;
}

.filtres-tiroir__chevron {
  flex: none;
  transition: transform 0.15s ease;
}

.filtres-tiroir[open] .filtres-tiroir__chevron {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .filtres-tiroir__chevron {
    transition: none;
  }
}

.filtres-tiroir .ressources-filtres {
  margin-block-start: 1rem;
}

.filtres-tiroir__reset {
  margin-block: -0.5rem 1.5rem;
}

.ressources-corps {
  padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.article-card--logo .article-card__media img {
  object-fit: contain;
  padding: 1.25rem;
}

.article-card__corps {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 1.4rem 1.4rem;
}

.article-card .eyebrow {
  margin: 0;
}

.article-card h3 {
  margin: 0;
  font-size: var(--fs-h4);
  line-height: 1.3;
}

.article-card h3 a {
  color: var(--c-text);
  text-decoration: none;
}

.article-card h3 a:hover {
  color: var(--c-link);
}

.article-card__extrait {
  font-size: var(--fs-aside);
  line-height: 1.6;
  color: var(--c-text-muted);
  margin: 0;
  max-width: none;
}

.article-card__date {
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  margin: auto 0 0;
}

.article-single__media {
  margin-block: 0 2.5rem;
}

.article-single__media img {
  width: 100%;
  max-height: 440px;
  object-fit: cover;
  border-radius: 10px;
}

.article-single__contenu {
  max-width: 68ch;
}

.article-single__contenu img {
  border-radius: 8px;
}

/* ---- Article de blog : corps de lecture + colonne d'appel collante ----

   Le texte tient dans sa mesure de 68ch, la colonne de droite occupe la
   place que cette mesure laissait vide. Les fiches formation avaient le
   même dessin jusqu'au 22/08 ; leur encart répétait l'en-tête, celui du
   blog porte un appel qui n'existe nulle part ailleurs sur la page. `align-items: start` est ce qui rend le sticky opérant — la
   zone de grille garde la hauteur de la ligne, l'encart s'y déplace. */

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1rem 3rem;
  align-items: start;
}

/* Une étude de cas n'a pas de colonne : ses volets colorés prennent
   toute la largeur. */
.article-layout--pleine {
  display: block;
}

.article-sidebar {
  position: sticky;
  top: calc(var(--h-entete) + 1.5rem);
}

.article-sidebar .aside {
  max-width: none;
}

@media (max-width: 900px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* En une colonne l'encart repasse en fin d'article, à sa place
     d'origine : collé en haut il masquerait le début du texte. */
  .article-sidebar {
    position: static;
    margin-block-start: 2rem;
  }
}

/* ---- Thèmes proposés dans l'encart ---- */

.formations-liees {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.formations-liees li {
  margin: 0;
}

.formations-liees a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.9rem;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--accent, var(--c-accent));
  border-radius: 6px;
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: var(--fs-aside);
  line-height: 1.35;
  color: var(--c-text);
  text-decoration: none;
}

.formations-liees a:hover,
.formations-liees a:focus-visible {
  border-color: var(--accent-fonce, var(--c-accent));
  color: var(--accent-fonce, var(--c-text));
}

/* La teinte foncée, pas la primaire : les quatre couleurs de la charte
   plafonnent à 2,6:1 sur blanc et disparaissent en trait fin. */
.formations-liees__icone {
  color: var(--accent-fonce, var(--c-accent));
  flex: none;
}

.aside__lien {
  margin-block: 0.9rem 0;
}

/*
 * Variante pleine largeur de l'encart, en fin d'étude de cas : la page
 * n'y a pas de colonne latérale, et un bloc de 34ch posé sous un texte
 * pleine largeur donne l'impression d'un morceau oublié. Les thèmes
 * s'alignent alors côte à côte.
 */
.aside--large {
  max-width: none;
  margin-block-start: 3rem;
  padding: 1.75rem 2rem;
}

.aside--large .formations-liees {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.75rem;
}

/* =========================================================================
   Pagination — blog, ressources, résultats de recherche

   Le balisage vient de dc_pagination() (inc/pagination.php) et non de
   the_posts_pagination() : GeneratePress retire le conteneur `.pagination`,
   si bien que les règles écrites pour lui ne s'appliquaient à rien et que
   la navigation du blog s'affichait en liens soulignés à la file.

   Trois zones sur une ligne : le saut arrière à gauche, les numéros au
   centre, le saut avant à droite. Les deux sauts occupent une colonne
   égale (1fr), ce qui garde les numéros centrés sur la page même quand
   l'un des deux manque — sur la première et la dernière page, un espace
   vide tient sa place.
   ========================================================================= */

.dc-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem 1.25rem;
  font-family: var(--font-ui);
  margin-block: clamp(2.5rem, 1.6rem + 3vw, 4rem) 0;
  padding-block-start: 2rem;
  border-block-start: 1px solid var(--c-border);
}

.dc-pagination__pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dc-pagination__item {
  margin: 0;
}

/* Tuiles carrées : le nombre ne commande pas la largeur, donc la barre
   ne se déforme pas au passage de la page 9 à la page 10. */
.dc-pagination__page {
  display: grid;
  place-content: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding-inline: 0.6rem;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-bg);
  color: var(--c-text);
  font-size: 1.0625rem;
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease;
}

a.dc-pagination__page:hover,
a.dc-pagination__page:focus-visible {
  border-color: var(--c-navy);
  background: var(--c-navy-pale);
  color: var(--c-navy);
  text-decoration: none;
}

.dc-pagination__page.est-courante {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: #fff;
  font-weight: var(--fw-bold);
}

/* Les points de suspension ne sont pas un bouton : ni cadre, ni fond,
   pour qu'aucun clic ne s'y perde. */
.dc-pagination__points {
  display: grid;
  place-content: center;
  min-width: 1.5rem;
  height: 2.75rem;
  color: var(--c-text-muted);
  line-height: 1;
}

.dc-pagination__saut {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding-inline: 1rem;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  color: var(--c-text);
  font-size: 1.0625rem;
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease;
}

.dc-pagination__saut--prec {
  justify-self: start;
}

.dc-pagination__saut--suiv {
  justify-self: end;
}

/* La case vide qui tient la colonne sur la première et la dernière
   page : elle ne doit rien dessiner. */
.dc-pagination__saut:not([href]) {
  border-color: transparent;
  pointer-events: none;
}

a.dc-pagination__saut:hover,
a.dc-pagination__saut:focus-visible {
  border-color: var(--c-navy);
  background: var(--c-navy-pale);
  color: var(--c-navy);
  text-decoration: none;
}

/* Une seule flèche dans le jeu de pictogrammes, tournée vers la droite :
   le saut arrière la retourne. */
.dc-pagination__fleche {
  flex: none;
}

.dc-pagination__saut--prec .dc-pagination__fleche {
  transform: rotate(180deg);
}

/* `max-width: none` : la mesure de lecture de 68 ch posée sur `p`
   rétrécit la ligne d'état et décale son centrage. */
.dc-pagination__etat {
  grid-column: 1 / -1;
  max-width: none;
  margin: 0;
  text-align: center;
  color: var(--c-text-muted);
  font-size: var(--fs-small);
}

/* En dessous de 34 rem, « Précédent » et « Suivant » côte à côte
   pousseraient les numéros hors de l'écran : les numéros passent au-dessus
   et les deux sauts se partagent la ligne suivante. */
@media (max-width: 34rem) {
  .dc-pagination {
    grid-template-columns: 1fr 1fr;
    gap: 1rem 0.75rem;
  }

  /* Tuiles resserrées à 36 px : la série la plus longue — deux voisines
     de part et d'autre, la première et la dernière page, deux séries de
     points — mesure alors 324 px et tient sur une ligne dès 390 px de
     large. À 44 px, la dernière page passait seule à la ligne. */
  .dc-pagination__pages {
    grid-column: 1 / -1;
    grid-row: 1;
    gap: 0.25rem;
  }

  .dc-pagination__saut--prec {
    grid-column: 1;
    grid-row: 2;
  }

  .dc-pagination__saut--suiv {
    grid-column: 2;
    grid-row: 2;
  }

  .dc-pagination__page {
    min-width: 2.25rem;
    height: 2.25rem;
    padding-inline: 0.3rem;
    font-size: 1rem;
  }

  .dc-pagination__points {
    min-width: 1.25rem;
    height: 2.25rem;
  }

  .dc-pagination__saut {
    justify-content: center;
    padding-inline: 0.75rem;
  }
}

.search-form {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.search-form .search-field {
  flex: 1 1 260px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 0.7em 1em;
  font-family: var(--font-ui);
  font-size: var(--fs-aside);
}

/* ---- Filtres du calendrier ---- */

/* Ville et Modalité tiennent sur une seule rangée : quatre pastilles
   d'un côté, trois de l'autre, là où deux rangées pleine largeur
   coûtaient une hauteur d'écran pour rien (demande du 17/08).

   Le thème garde la largeur entière — ses huit pastilles repasseraient
   sur trois lignes dans une demi-colonne, ce qui annulerait le gain. */
.calendrier-filtres {
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 1.4rem 1.6rem 1.6rem;
  margin-block: 1.5rem 2.5rem;
  display: grid;
  gap: 1.2rem 2.5rem;
  align-items: start;

  /* Pas de point de rupture en dur : la grille apparie les colonnes
     seulement si chacune fait au moins 380 px, la largeur mesurée pour
     tenir « Toutes · Paris · Marseille · Toulouse » sur une ligne
     (369 px). Sous ce seuil elle repasse d'elle-même en pile — deux
     colonnes trop étroites cassent leurs pastilles sur deux lignes et
     le bloc redevient plus haut qu'empilé, le gain s'inverserait.

     Un seuil en pixels de fenêtre aurait fallu le recalculer au
     moindre changement de libellé.

     `min(380px, 100%)` et non `380px` : sur un téléphone de 412 px, la
     colonne disponible fait 364 px et la valeur en dur débordait de
     19 px, ce qui faisait défiler toute la page horizontalement
     (relevé le 18/08). */
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
}

.filtre-groupe--theme {
  grid-column: 1 / -1;
}

.filtre-groupe .eyebrow {
  margin-block-end: 0.6rem;
}

.chips {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chips li {
  margin: 0;
}

.chip {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-small);
  line-height: 1.2;
  color: var(--c-text);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  padding: 0.5em 1em;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.chip:hover {
  border-color: var(--c-link);
  color: var(--c-link);
}

.chip--actif {
  font-weight: var(--fw-bold);
  color: #fff;
  background: var(--c-navy);
  border-color: var(--c-navy);
}

.chip--actif:hover {
  color: #fff;
  border-color: var(--c-navy);
}

/* ---- Grille de liens (formations d'un centre, listes de maillage) ---- */

.link-grid {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.9rem;
}

.link-grid li {
  margin: 0;
}

.link-grid a {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  height: 100%;
  padding: 1rem 1.2rem;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-accent);
  border-radius: 8px;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.link-grid a:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.link-grid__titre {
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: var(--fs-aside);
  line-height: 1.35;
  color: var(--c-text);
}

.link-grid__meta {
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

/* ---- Bloc NPS : affichage visuel sourcé, jamais en AggregateRating ---- */

.nps-badge {
  font-family: var(--font-ui);
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  background: var(--c-bg-alt);
  border-left: 4px solid var(--c-accent);
  border-radius: 8px;
  padding: 0.7em 1.1em;
}

.nps-badge__score {
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
}

.nps-badge__source {
  font-weight: var(--fw-regular);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

/* ---- Pastille CPF — pilotée par ACF, jamais écrite en dur ---- */

.cpf-pill {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: 0.8125rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  /* Vert du jeu 2, en déclinaison lisible : le bleu d'origine
     appartenait au jeu 3, réservé aux supports Enterprise. */
  color: var(--c-vert-fonce);
  background: var(--c-vert-pale);
  border: 1px solid #d8e8cc;
  border-radius: 999px;
  padding: 0.35em 0.9em;
}

/* ---- Grille de fiches (hub /formations/, home) ---- */

.formation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-block: 2rem;
}

.formation-card {
  position: relative;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 1.6rem 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
  overflow: hidden;
}

.formation-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.18s ease;
}

.formation-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}

.formation-card:hover::before {
  transform: scaleX(1);
}

.formation-card h3 {
  margin: 0;
  font-size: var(--fs-h4);
}

.formation-card h3 a {
  color: var(--c-text);
  text-decoration: none;
}

.formation-card h3 a:hover {
  color: var(--c-link);
}

.formation-card__meta {
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  margin: 0;
}

.formation-card__desc {
  font-size: var(--fs-aside);
  line-height: 1.6;
  color: var(--c-text-muted);
  margin: 0;
  max-width: none;
}

.formation-card .arrow-link {
  margin-top: auto;
  padding-top: 0.5rem;
}

.formation-card .button {
  margin-top: auto;
  align-self: flex-start;
}

/* ---- Bande de chiffres (home) ---- */

.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-block: 1rem;
}

.stat {
  font-family: var(--font-ui);
}

.stat::before {
  content: "";
  display: block;
  width: 34px;
  height: 4px;
  border-radius: 2px;
  background: var(--c-accent);
  margin-bottom: 0.9rem;
}

.stat__value {
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #fff;
  display: block;
}

.stat__label {
  font-weight: var(--fw-regular);
  font-size: var(--fs-aside);
  color: var(--c-inverse-muted);
  display: block;
  margin-top: 0.4rem;
  max-width: none;
}

/* ---- Cartes centres (home, /centres/) ---- */

.centre-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-block: 2rem;
}

.centre-card {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 1.6rem 1.5rem;
  box-shadow: var(--shadow-card);
  font-family: var(--font-ui);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.centre-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}

/* Le titre de carte est un H3 sous le H2 de section de la home, et un H2
   sous le H1 du hub /centres/ — même dessin dans les deux cas : c'est un
   titre de carte, pas un titre de section (hiérarchie Hn, §10). */
.centre-card h2,
.centre-card h3 {
  margin: 0;
  font-size: var(--fs-h4);
  font-family: var(--font-titre);
  font-weight: var(--fw-titre);
}

.centre-card h2::after,
.centre-card h3::after {
  content: none;
}

.centre-card h2 a,
.centre-card h3 a {
  color: var(--c-text);
  text-decoration: none;
}

.centre-card h2 a:hover,
.centre-card h3 a:hover {
  color: var(--c-link);
}

.centre-card__ville {
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.centre-card p {
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  margin: 0;
  max-width: none;
  line-height: 1.6;
}

.centre-card .arrow-link {
  margin-top: 0.6rem;
}

/* ---- Bloc CTA intra (home) : deux colonnes sur desktop ---- */

.split {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2rem 4rem;
  align-items: center;
}

@media (max-width: 768px) {
  .split {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   Pictogrammes et composants structurés
   Direction retenue le 14/08 : corporate structuré — sections à
   pictogrammes, blocs de chiffres, grilles denses.
   ========================================================================= */

.dc-icone {
  flex: none;
  display: block;
  color: var(--c-link);
}

/* ---- Couleur par thème ----
   Les gabarits posent --accent et --accent-pale sur le conteneur
   (voir dc_style_theme()). Les composants ci-dessous s'y adaptent
   sans qu'aucune classe par domaine n'existe. */

/* Déclinaison assombrie et non la teinte officielle : le titre fait
   22 px en Sanchez 400, donc du texte normal au sens WCAG, qui réclame
   4,5:1. Les primaires de la charte plafonnent à 2,6:1 sur blanc — le
   jaune tombe même à 1,6:1. La variante « foncé » tient le seuil pour
   les sept thèmes. */
.formation-card[style*="--accent"] .formation-card__titre a,
.formation-card[style*="--accent"] h3 a:hover {
  color: var(--accent-fonce);
}

/* Le filet coloré identifie le thème dès le premier coup d'œil : il
   reste visible au repos, et s'épaissit au survol. */
.formation-card[style*="--accent"]::before {
  background: var(--accent);
  transform: scaleX(1);
  height: 4px;
}

.formation-card[style*="--accent"]:hover::before {
  height: 6px;
}

/* Les pictogrammes prennent la déclinaison assombrie : la teinte
   officielle en trait de 1,5 px passerait sous le seuil de 3:1. */
.formation-card[style*="--accent"] .dc-icone,
.formation-card[style*="--accent"] .icone-pastille {
  color: var(--accent-fonce);
}

.formation-card[style*="--accent"] .icone-pastille {
  background: var(--accent-pale);
}

/* En-tête de fiche : bandeau pastel à la couleur du thème */
.formation-hero[style*="--accent"] {
  background: var(--accent-pale);
  border-radius: 14px;
  padding: clamp(1.6rem, 1rem + 2vw, 2.6rem);
  margin-block-end: 2.5rem;
}

.formation-hero[style*="--accent"] .facts__pastille,
.formation-hero[style*="--accent"] .eyebrow {
  color: var(--accent-fonce);
}

/* Le filet au-dessus du titre prend lui aussi la couleur du thème */
.formation-hero[style*="--accent"]::before {
  background: var(--accent);
}

.formation-hero[style*="--accent"] .facts {
  border-color: rgba(0, 0, 0, 0.09);
}

/* Filet dégradé — signature reprise des supports de marque */
.filet-marque {
  height: 4px;
  width: 100%;
  background: var(--degrade-marque);
}

/* Pastille : le picto posé sur un fond clair, taille constante */
.icone-pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--c-bg-alt);
  color: var(--c-text);
  flex: none;
}

/* Le pictogramme prend la couleur de sa pastille.

   Sans cette règle, il ne la prenait jamais : `.dc-icone` pose
   `color: var(--c-link)` directement sur le <svg>, ce qui coupe
   l'héritage — les deux variantes ci-dessous déclaraient donc une
   couleur qui n'atteignait pas le tracé. Relevé le 23/08 sur les quatre
   repères de la méthode, en page d'accueil : pastille crème, picto
   anthracite. Les cartes de formation y échappaient, une règle plus
   spécifique les rattrapant par ailleurs. */
.icone-pastille .dc-icone {
  color: inherit;
}

.icone-pastille--accent {
  background: #fdf0e3;
  /* Le trait orange sur fond crème reste au-dessus de 3:1, seuil des
     éléments graphiques : c'est un pictogramme, pas du texte (§12). */
  color: #b25c10;
}

.icone-pastille--inverse {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* ---- Bandeau d'arguments sous le hero ---- */

.proof-bar {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--c-bg-alt);
  border-bottom: 1px solid var(--c-border);
}

.proof-bar__inner {
  max-width: var(--content-width);
  margin-inline: auto;
  padding: 1.6rem 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem 2.5rem;
}

.proof {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  font-family: var(--font-ui);
}

.proof__titre {
  font-weight: var(--fw-bold);
  font-size: var(--fs-aside);
  line-height: 1.3;
  margin: 0 0 0.15em;
  max-width: none;
}

.proof__texte {
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-text-muted);
  margin: 0;
  max-width: none;
}

/* ---- Rangée de blocs à pictogramme ---- */

/* Deux colonnes fixes, pas d'`auto-fit` : à quatre entrées, le calcul
   automatique en plaçait trois sur la première ligne et laissait la
   quatrième seule en dessous. Un carré 2 × 2 se lit d'un coup d'œil. */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 3rem;
  margin-block: 2.5rem;
}

@media (max-width: 700px) {
  .feature-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.feature {
  font-family: var(--font-ui);
}

.feature h3 {
  font-size: var(--fs-h4);
  margin-block: 0.9em 0.35em;
}

.feature p {
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-aside);
  line-height: 1.6;
  color: var(--c-text-muted);
  max-width: 42ch;
  margin: 0;
}

/* ---- Liste à pictogrammes ---- */

.icon-list {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  max-width: 62ch;
}

.icon-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-aside);
  line-height: 1.6;
  margin: 0;
}

.icon-list .dc-icone {
  margin-top: 0.15em;
  color: var(--c-accent-dark);
}

.icon-list--deux {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  max-width: none;
}

/* ---- Blocs de chiffres ---- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-block: 2rem;
}

.stat-card {
  font-family: var(--font-ui);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 1.4rem 1.5rem;
  box-shadow: var(--shadow-card);
}

/* Un cran sous --fs-h2 : « +50 millions » ne tient pas dans une colonne
   de la grille à 40 px, et GeneratePress pose un `word-wrap: break-word`
   sur `.site-content` qui coupait le mot en deux (« millio / ns »).
   La règle ci-dessous interdit cette césure : si une valeur ne tient
   toujours pas, elle passe à la ligne entre ses mots. */
.stat-card__valeur {
  display: block;
  font-weight: var(--fw-bold);
  font-size: clamp(1.5rem, 1.15rem + 1.1vw, 1.95rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  overflow-wrap: normal;
  hyphens: none;
}

.stat-card__label {
  display: block;
  font-weight: var(--fw-regular);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-text-muted);
  margin-top: 0.4rem;
  /* Les intitulés allongés le 22/08 tiennent sur trois lignes dans une
     colonne étroite, et laissaient un mot seul sur la dernière
     (« … des soft / skills »). Équilibrés, ils se répartissent. */
  text-wrap: balance;
}

.stat-card__source {
  display: block;
  font-size: 0.8125rem;
  color: var(--c-text-muted);
  margin-top: 0.6rem;
}

/* Sur fond navy — bandes `band--navy` et pied du hero, qui partagent le
   même fond sombre depuis que les quatre chiffres y ont été déplacés. */
.band--navy .stat-card,
.hero-home .stat-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--c-navy-line);
  box-shadow: none;
}

.band--navy .stat-card__valeur,
.hero-home .stat-card__valeur {
  color: #fff;
}

.band--navy .stat-card__label,
.band--navy .stat-card__source,
.hero-home .stat-card__label,
.hero-home .stat-card__source {
  color: var(--c-inverse-muted);
}

.band--navy h2,
.band--navy h3,
.band--navy p,
.band--navy li {
  color: var(--c-inverse-text);
}

.band--navy .feature p {
  color: var(--c-inverse-muted);
}

/* ---- Étapes numérotées ---- */

.steps {
  counter-reset: etape;
  list-style: none;
  margin: 2rem 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  max-width: none;
}

/* La pastille est posée en absolu, pas placée en grille.
   Corrigé le 17/08 : en `display: grid`, le `::before` prenait la
   première cellule et chaque nœud suivant la sienne. Une étape écrite
   « <span class="run-in">Titre.</span> texte » se retrouvait coupée en
   deux, le titre seul poussé à droite et le texte renvoyé à la ligne
   dessous. En absolu, l'étape accepte n'importe quel contenu : texte
   nu, titre courant, ou un h3 suivi d'un paragraphe. */
.steps li {
  counter-increment: etape;
  position: relative;
  min-height: 40px;
  padding-left: calc(40px + 1.1rem);
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-aside);
  line-height: 1.6;
  color: var(--c-text-muted);
  /* `.steps` lève la contrainte de largeur pour que la grille occupe
     la colonne ; l'étape, elle, reste du texte et se lit sur la même
     longueur de ligne que les paragraphes voisins. */
  max-width: 68ch;
  margin: 0;
}

.steps li::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-text);
  font-weight: var(--fw-bold);
  font-size: 1.0625rem;
}

.steps h3 {
  margin: 0.25em 0 0.3em;
  font-size: var(--fs-h4);
}

.steps p {
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-aside);
  line-height: 1.6;
  color: var(--c-text-muted);
  margin: 0;
}

/* ---- Emplacement photo réservé ----
   Les photos françaises ne sont pas encore livrées : le gabarit prévoit
   leur place et affiche en attendant une image du fonds existant, ou un
   aplat discret. La substitution se fera sans toucher au gabarit. */

.media-figure {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--c-bg-alt);
}

.media-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-figure--attente {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--c-border);
  color: var(--c-text-muted);
  font-family: var(--font-ui);
  font-size: var(--fs-small);
}

/* =========================================================================
   Recherche globale
   ========================================================================= */

/* ---- Loupe de l'en-tête ---- */

.main-navigation .main-nav ul li.nav-search > a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-text);
}

.main-navigation .main-nav ul li.nav-search > a:hover,
.main-navigation .main-nav ul li.nav-search > a:focus-visible {
  color: var(--c-navy);
  text-decoration: none;
}

.nav-search .dc-icone {
  flex: 0 0 auto;
}

/* En desktop la loupe se suffit ; dans le menu burger elle se perdrait
   au milieu d'items textuels, le libellé revient donc. */
@media (min-width: 769px) {
  .nav-search__label {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
  }

  .main-navigation .main-nav ul li.nav-search > a {
    padding-inline: 12px;
  }

  /* Le lien est en inline-flex : posé sur la ligne de texte de l'item,
     il suivait la ligne de base et la loupe tombait 4 px au-dessus de
     l'axe des libellés. En passant l'item lui-même en flex, la loupe est
     centrée sur sa boîte, donc sur le même axe que le reste de la barre.
     Desktop seulement : dans le menu burger, l'item doit rester un bloc
     pleine largeur pour garder une zone de clic confortable. */
  .main-navigation .main-nav ul li.nav-search {
    display: flex;
    align-items: center;
  }
}

/* ---- Panneau déroulant ---- */

.dc-recherche-panneau[hidden] {
  display: none;
}

.dc-recherche-panneau {
  background: var(--c-bg-alt);
  border-bottom: 1px solid var(--c-border);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.2s ease, opacity 0.2s ease;
}

.dc-recherche-panneau.est-ouvert {
  max-height: 320px;
  opacity: 1;
}

.dc-recherche-panneau__inner {
  max-width: calc(var(--content-width) + 48px);
  margin-inline: auto;
  padding: 1.5rem 24px 1.75rem;
}

.dc-recherche-suggestions {
  margin: 0.9rem 0 0;
  max-width: none;
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  align-items: baseline;
}

.dc-recherche-suggestions a {
  color: var(--c-text);
}

/* ---- Formulaire ---- */

.dc-recherche-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-block: 1.25rem 0;
}

.dc-recherche-form__champ {
  flex: 1 1 320px;
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.dc-recherche-form__loupe {
  position: absolute;
  left: 0.95rem;
  color: var(--c-text-muted);
  pointer-events: none;
}

.dc-recherche-form input[type="search"] {
  width: 100%;
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-aside);
  color: var(--c-text);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 0.85em 1em 0.85em 3rem;
  /* Safari arrondit les champs de recherche et masque le texte long. */
  appearance: none;
  -webkit-appearance: none;
}

.dc-recherche-form input[type="search"]:focus-visible {
  outline: 2px solid var(--c-turquoise);
  outline-offset: 1px;
  border-color: var(--c-turquoise);
}

.dc-recherche-form input[type="search"]::placeholder {
  color: var(--c-text-muted);
}

.dc-recherche-form .button {
  flex: 0 0 auto;
}

/* ---- Page de résultats ---- */

.page-hero--recherche .dc-recherche-form {
  max-width: 44rem;
}

.recherche-filtres {
  margin-block: 1.5rem 2.5rem;
  padding-block-end: 1.5rem;
  border-bottom: 1px solid var(--c-border);
}

.recherche-groupe {
  margin-block-end: 3rem;
}

.recherche-groupe__titre {
  font-size: var(--fs-h3);
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding-block-end: 0.6rem;
  border-bottom: 2px solid var(--c-turquoise);
  margin-block-end: 0.5rem;
}

.recherche-groupe__titre span {
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

.recherche-groupe__plus {
  margin-block-start: 1rem;
}

/* ---- Une ligne de résultat ---- */

.resultats {
  display: grid;
  gap: 0.25rem;
}

.resultat {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.1rem 0.6rem;
  border-bottom: 1px solid var(--c-border);
  transition: background-color 0.15s ease;
}

.resultat:hover {
  background: var(--c-bg-alt);
}

.resultat__picto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent-pale, var(--c-bg-alt));
  color: var(--accent-fonce, var(--c-navy));
  flex: 0 0 auto;
  margin-block-start: 0.15rem;
}

.resultat__corps {
  min-width: 0;
}

.resultat__type {
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-fonce, var(--c-text-muted));
  margin: 0 0 0.15rem;
  max-width: none;
}

.resultat__titre {
  font-size: var(--fs-h4);
  margin: 0 0 0.35rem;
}

.resultat__titre a {
  color: var(--c-text);
  text-decoration: none;
}

.resultat__titre a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.resultat__extrait {
  margin: 0;
  /* Plus large que la mesure de lecture courante : un résultat se
     balaie, il ne se lit pas au long. Une colonne étroite sous un titre
     pleine largeur déséquilibrait la ligne. */
  max-width: 78ch;
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-aside);
  line-height: 1.55;
  color: var(--c-text-muted);
}

/* Le jaune pâle du design system disparaît sur fond blanc : le
   surlignage doit se voir d'un coup d'œil, c'est sa seule raison
   d'être. Le jaune de la charte à 40 % reste lisible en texte
   anthracite (contraste au-delà de 10:1). */
.resultat__extrait mark {
  background: rgba(255, 199, 8, 0.4);
  color: var(--c-text);
  font-weight: var(--fw-bold);
  padding: 0.05em 0.15em;
  border-radius: 2px;
}

.resultat__meta {
  margin: 0.4rem 0 0;
  max-width: none;
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

/* ---- Recherche vide ou infructueuse ---- */

.recherche-vide {
  margin-block: 2rem var(--space-section);
}

.recherche-vide .chips {
  margin-block: 1rem 2rem;
}

.link-grid--raccourcis {
  margin-block-start: 2rem;
}

.link-grid__picto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-bg-alt);
  color: var(--c-navy);
  margin-block-end: 0.4rem;
}

/* ---- Archive des ressources ---- */

.ressources-filtres {
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 1.4rem 1.6rem 1.6rem;
  margin-block: 1.5rem 2rem;
  display: grid;
  gap: 1.2rem;
}

.ressources-filtres .dc-recherche-form {
  margin-block: 0;
}

.ressources-compte {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  margin-block-end: 1.5rem;
}

@media (max-width: 600px) {
  .resultat {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  .resultat__picto {
    display: none;
  }

  /* Le bouton passait sous le champ en occupant 40 % de la largeur :
     cible tactile étroite et alignement bancal. */
  .dc-recherche-form .button {
    width: 100%;
  }

  .ressources-filtres {
    padding: 1.1rem 1rem 1.2rem;
  }
}

/* =========================================================================
   FAQ
   ========================================================================= */

.faq-sommaire {
  margin-block: 1.5rem 3rem;
  padding-block-end: 1.5rem;
  border-bottom: 1px solid var(--c-border);
}

.faq-groupe {
  margin-block-end: 3rem;
}

.faq-groupe > h2 {
  /* Le titre de groupe suit immédiatement le sommaire ou le groupe
     précédent : la marge haute par défaut des H2 creuserait la page.
     Pas de filet ajouté ici — les H2 de section en portent déjà un,
     orange, et les deux se superposaient. */
  margin-block-start: 0;
  margin-block-end: 1.2rem;
}

/* Accordéon natif : <details> ne demande aucun script, garde le texte
   dans le DOM quand il est replié, et se pilote entièrement au clavier. */
.faq-item {
  border-bottom: 1px solid var(--c-border);
}

.faq-item summary {
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  line-height: 1.4;
  color: var(--c-text);
  cursor: pointer;
  padding: 1.1rem 2.5rem 1.1rem 0;
  position: relative;
  /* Le triangle par défaut des navigateurs est remplacé par le chevron
     dessiné ci-dessous, aligné sur le jeu de pictogrammes. */
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover {
  color: var(--c-navy);
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--c-link);
  outline-offset: 2px;
}

.faq-item summary::after {
  content: "";
  position: absolute;
  right: 0.5rem;
  top: 1.55rem;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--c-turquoise-fonce);
  border-bottom: 2px solid var(--c-turquoise-fonce);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.faq-item[open] summary::after {
  transform: rotate(-135deg);
  top: 1.9rem;
}

.faq-item__reponse {
  padding-block-end: 1.2rem;
  max-width: 68ch;
}

.faq-item__reponse p:last-child {
  margin-block-end: 0;
}

@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after {
    transition: none;
  }
}

/* =========================================================================
   Divers
   ========================================================================= */

img {
  max-width: 100%;
  height: auto;
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

/* =========================================================================
   Études de cas — habillage du contenu hérité

   Les 16 études partagent la même structure, reprise du site actuel :
   un « Masthead » (logo du client, chapô, encadré de résultats), trois
   volets « BigIconList » — Défis, Solutions, Résultats — et un
   témoignage. Le balisage n'est pas modifié, à une exception près : les
   pictogrammes PNG des trois volets sont remplacés par les SVG du jeu
   maison (voir functions.php).
   ========================================================================= */

/* ---- En-tête : logo du client et chapô ---- */

.Masthead__container {
  margin-block-end: 2.5rem;
}

.Masthead__upper {
  text-align: center;
}

/* Le logo vit dans le H1. Sans contrainte, un SVG s'étire à la largeur
   du texte : 700 px de haut pour une signature de marque. */
.Masthead__upper-heading {
  margin-block: 0 1.2rem;
}

.Masthead__upper-heading img {
  display: block;
  width: auto;
  max-width: min(100%, 320px);
  max-height: 96px;
  margin-inline: auto;
  object-fit: contain;
}

.Masthead__upper-heading::after {
  content: none;
}

.Masthead__upper-body {
  font-family: var(--font-ui);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-text);
  max-width: 62ch;
  margin-inline: auto;
}

/* L'encadré « Leurs succès actuels » : la respiration entre le chapô et
   les trois volets. */
.Masthead__lower {
  background: var(--c-bg-alt);
  border-radius: 12px;
  padding: 1.8rem 2rem;
  margin-block-start: 2rem;
}

.Masthead__lower-heading {
  font-family: var(--font-titre);
  font-weight: var(--fw-titre);
  font-size: var(--fs-h3);
  line-height: 1.25;
  color: var(--c-text);
  margin-block-end: 0.6rem;
}

.Masthead__lower-heading::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 0.4em;
  background: var(--c-accent);
  border-radius: 2px;
}

.Masthead__lower-body {
  font-family: var(--font-ui);
  font-size: var(--fs-aside);
  line-height: 1.65;
  color: var(--c-text-muted);
  max-width: none;
}

/* ---- Défis · Solutions · Résultats ----
   Trois volets de même poids : une rangée de cartes, chacune sa couleur.
   Le lecteur voit la progression problème → méthode → effet d'un coup
   d'œil, là où l'empilement d'origine demandait trois écrans. */

.BigIconList__item {
  --volet: var(--c-turquoise);
  --volet-fonce: var(--c-turquoise-fonce);
  --volet-pale: var(--c-turquoise-pale);
}

.BigIconList__item--defis {
  --volet: var(--c-orange);
  --volet-fonce: var(--c-orange-fonce);
  --volet-pale: var(--c-orange-pale);
}

.BigIconList__item--solutions {
  --volet: var(--c-turquoise);
  --volet-fonce: var(--c-turquoise-fonce);
  --volet-pale: var(--c-turquoise-pale);
}

.BigIconList__item--resultats {
  --volet: var(--c-vert);
  --volet-fonce: var(--c-vert-fonce);
  --volet-pale: var(--c-vert-pale);
}

.BigIconList > .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.5rem;
  margin-block: 2.5rem;
}

.BigIconList__item {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-top: 4px solid var(--volet);
  border-radius: 12px;
  padding: 1.6rem 1.6rem 1.8rem;
  box-shadow: var(--shadow-card);
}

/* Pastille colorée : le pictogramme se lit sur son fond pâle, comme sur
   les cartes de formation. */
.BigIconList__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--volet-pale);
  color: var(--volet-fonce);
}

.BigIconList__title {
  font-family: var(--font-titre);
  font-weight: var(--fw-titre);
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--c-text);
  margin: 0;
}

/* Le filet générique des H2 de section ferait doublon avec le liseré
   coloré du haut de carte. */
.BigIconList__title::after {
  content: none;
}

.BigIconList__paragraph {
  font-family: var(--font-ui);
  font-size: var(--fs-aside);
  line-height: 1.65;
  color: var(--c-text-muted);
  margin: 0;
  max-width: none;
}

/* ---- Témoignage ---- */

.OutlinedTestimonial {
  margin-block: 3rem 1rem;
}

.OutlinedTestimonial__background {
  display: none;
}

.OutlinedTestimonial__panel {
  background: var(--c-navy);
  border-radius: 12px;
  padding: 2.2rem 2.4rem;
  color: var(--c-inverse-text);
  text-align: center;
}

.OutlinedTestimonial__quote {
  font-family: var(--font-titre);
  font-weight: var(--fw-titre);
  font-size: var(--fs-h4);
  line-height: 1.5;
  color: #fff;
  margin: 0 auto;
  max-width: 60ch;
}

.OutlinedTestimonial__image {
  margin-block-start: 1.6rem;
}

/* Les logos clients sont dessinés pour un fond clair : sur le navy, la
   pastille blanche leur rend leur lisibilité. */
.OutlinedTestimonial__image img {
  display: inline-block;
  width: auto;
  max-width: 190px;
  max-height: 56px;
  padding: 0.5rem 0.9rem;
  background: #fff;
  border-radius: 8px;
  object-fit: contain;
}

.OutlinedTestimonial__author {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-inverse-muted);
  margin-block-start: 1rem;
}

.OutlinedTestimonial__author strong {
  display: block;
  color: #fff;
  font-weight: var(--fw-bold);
}

/* Le contenu hérité s'appuie sur un conteneur de l'ancien thème, qui
   n'existe plus : sans cette neutralisation, il ajouterait ses propres
   marges par-dessus celles du gabarit. */
.article-single__contenu .container {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* La mesure de lecture de 68ch vaut pour un article ; une étude de cas
   est une mise en page, avec une rangée de trois volets qui a besoin de
   toute la largeur. */
.etude-de-cas .article-single__contenu {
  max-width: none;
}

/* ---- Certification Qualiopi (pages centres) ---- */

/* Le logo est une marque déposée : taille fixe, jamais déformé, jamais
   recoloré. Il garde sa largeur d'origine tant que la place le permet
   et se contente de rétrécir en dessous. */
.qualiopi-bloc {
  display: grid;
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  gap: 1.4rem 1.8rem;
  align-items: start;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 1.5rem 1.7rem;
  margin-block: 1.4rem;
}

.qualiopi-bloc__logo {
  width: 100%;
  max-width: 190px;
  height: auto;
}

.qualiopi-bloc__texte {
  font-family: var(--font-ui);
}

.qualiopi-bloc__mention {
  font-family: var(--font-ui);
  font-size: var(--fs-aside);
  line-height: 1.55;
  margin: 0 0 0.5em;
  max-width: none;
}

/* Entité, certificateur, numéro, échéance : une ligne de référence,
   utile mais secondaire à la lecture. */
.qualiopi-bloc__detail {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--c-text-muted);
  margin: 0 0 0.8em;
  max-width: none;
}

.qualiopi-bloc p:last-child {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .qualiopi-bloc {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================================================================
   Rubrique Approche — méthode, héritage, culture

   Le site d'origine reliait ces trois pages par un bandeau d'onglets
   sous le titre, et racontait l'histoire de l'entreprise dans une
   frise. Les deux composants sont repris ici, redessinés : le
   balisage d'origine dépendait entièrement du CSS de l'ancien thème,
   qui ne s'applique plus.
   ========================================================================= */

/* ---- Sous-navigation de la rubrique ----
   Des onglets soulignés plutôt que des pastilles : la page courante
   porte le filet orange, les autres l'esquissent au survol. */

.approche-nav {
  border-bottom: 1px solid var(--c-border);
  margin-block: 0 2.5rem;
}

.approche-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.approche-nav li {
  margin: 0;
}

.approche-nav a {
  display: block;
  padding: 0.55rem 0 0.7rem;
  /* Le filet de l'onglet actif doit recouvrir celui de la barre, pas
     s'empiler dessous. */
  margin-bottom: -1px;
  border-bottom: 3px solid transparent;
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: var(--fs-aside);
  color: var(--c-text-muted);
  text-decoration: none;
}

.approche-nav a:hover,
.approche-nav a:focus-visible {
  color: var(--c-text);
  border-bottom-color: var(--c-border);
}

.approche-nav a[aria-current="page"] {
  color: var(--c-text);
  border-bottom-color: var(--c-accent);
}

/* ---- Frise historique ----
   Une chronologie, pas une suite de titres : l'année est un repère
   visuel dans un `ol`, dont l'ordre porte déjà le sens. La baliser en
   `h3` aurait ajouté quatorze titres vides de contenu à la page. */

.timeline {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.timeline > li {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 0 2.4rem;
  /* Le texte se cale sur le milieu de la colonne de gauche : sur les
     entrées d'une ou deux lignes, il flottait sinon tout en haut d'un
     bloc année + photo de 240 px. */
  align-items: center;
  padding-block: 2rem;
  border-top: 1px solid var(--c-border);
  margin: 0;
}

.timeline > li:last-child {
  border-bottom: 1px solid var(--c-border);
}

/* L'année est le repère de la frise : elle prend la taille d'un titre
   de section et le même filet orange, qui la détache de la photo posée
   juste dessous. La colonne est calée sur « 2016 et 2017 », la mention
   la plus longue, pour qu'aucune année ne passe à la ligne. */
.timeline__annee {
  font-family: var(--font-titre);
  font-weight: var(--fw-titre);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  margin: 0 0 0.9rem;
  max-width: none;
}

.timeline__annee::after {
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  margin-top: 0.45em;
  background: var(--c-accent);
  border-radius: 2px;
}

.timeline__media {
  aspect-ratio: 1;
}

.timeline p:not(.timeline__annee) {
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-aside);
  line-height: 1.6;
  color: var(--c-text-muted);
  margin: 0;
}

@media (max-width: 640px) {
  .timeline > li {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .timeline__media {
    max-width: 180px;
  }
}

/* ---- Badges de certificat ----
   Les visuels sont fournis sur fond noir : le coin arrondi les pose
   comme des vignettes plutôt que comme des rectangles collés au
   texte. */

.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.4rem;
  max-width: 620px;
  margin-block: 2rem;
}

/* Chaque badge est enveloppé dans une `figure` : wpautop intercale un
   `<br>` entre deux images séparées par un retour à la ligne, et ce
   `<br>` occupait une cellule de la grille, décalant tout d'un cran. */
.badge-grid figure {
  margin: 0;
}

/* Les fichiers ont un fond transparent : ni cadre ni coins arrondis à
   leur poser, le badge se découpe seul sur la page. */
.badge-grid img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- Principes de conduite ----
   Trois colonnes de listes numérotées. Le fond gris les détache du
   corps du texte : ce sont des références, on y revient, on ne les
   lit pas d'un trait. */

.principes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.6rem;
  margin-block: 2rem;
}

.principe {
  background: var(--c-bg-alt);
  border-radius: 12px;
  padding: 1.5rem 1.6rem 1.7rem;
}

/* Pictogramme d'en-tête. Les trois fichiers viennent du site
   d'origine et n'ont ni le même format ni le même cadrage : c'est la
   hauteur qui les aligne, la largeur suit. Décoratifs — le titre juste
   en dessous dit déjà ce qu'ils illustrent. */
.principe__picto {
  margin: 0 0 1.6rem;
  max-width: none;
}

.principe__picto img {
  display: block;
  height: 48px;
  width: auto;
  margin-inline: auto;
}

.principe h3 {
  margin-block: 0 0.7em;
  font-size: var(--fs-h4);
}

.principe ol {
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-aside);
  line-height: 1.55;
  color: var(--c-text-muted);
  margin: 0;
  padding-left: 1.3rem;
  max-width: none;
}

.principe li {
  margin-block: 0 0.55em;
}

.principe li:last-child {
  margin-bottom: 0;
}

/* La même carte accueille aussi un paragraphe seul : mission, vision
   et valeurs se lisent en trois colonnes, sans énumération. */
.principe p {
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-aside);
  line-height: 1.6;
  color: var(--c-text-muted);
  margin: 0;
  max-width: none;
}

/* Un logo n'est pas une photo : il se pose entier sur un fond clair
   au lieu d'être recadré comme une illustration. */
.media-figure--logo {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 650 / 575;
  padding: 1.6rem;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
}

.media-figure--logo img {
  width: auto;
  max-height: 100%;
  object-fit: contain;
}

/* ---- Mission, vision, valeurs ----
   Repris du site d'origine, dégradés compris : un bandeau horizontal
   traverse la colonne, le pictogramme est posé dessus. Chaque colonne
   prend l'un des trois jeux de la charte, dans l'ordre de la page
   d'origine — jeu 2 pour la mission, jeu 1 pour la vision, jeu 3 pour
   les valeurs.

   Les valeurs hexadécimales de l'ancien thème étaient à un ou deux
   points des teintes officielles (#03b6b2 pour #00b6b3, par exemple) :
   ce sont les variables de la charte qui font foi ici, l'écart ne se
   voit pas. */

.mvv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2.5rem;
  margin-block: 2.5rem;
  text-align: center;
}

.mvv h3 {
  margin: 0;
  font-size: var(--fs-h4);
}

.mvv__picto {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 110px;
  margin-block: 1.6rem;
  max-width: none;
}

/* Le bandeau passe derrière le pictogramme, d'un bord à l'autre de la
   colonne. */
.mvv__picto::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 20px;
  background: var(--degrade-jeu2);
}

.mvv__col:nth-child(2) .mvv__picto::before {
  background: var(--degrade-jeu1);
}

.mvv__col:nth-child(3) .mvv__picto::before {
  background: var(--degrade-jeu3);
}

/* Les trois fichiers n'ont ni la même hauteur ni le même format : ils
   gardent leur taille d'origine, bornée par la hauteur du bandeau. */
.mvv__picto img {
  position: relative;
  max-height: 100%;
  width: auto;
  height: auto;
}

.mvv__texte {
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-aside);
  line-height: 1.6;
  color: var(--c-text-muted);
  margin: 0;
  max-width: none;
  /* La règle de base `p { text-align: left }` l'emporterait sur le
     centrage hérité du conteneur. */
  text-align: center;
}

/* ---- Légende d'illustration ---- */

.media-figure figcaption,
figure.media-figure > figcaption {
  padding: 0.7rem 0 0;
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-text-muted);
}

/* Pictogramme Dale Carnegie des blocs « Contactez-nous » hérités.
   La classe venait de l'ancien thème, qui la dimensionnait ; le child
   theme ne la reprenait pas, si bien que le SVG s'affichait à sa taille
   intrinsèque — 142 px de large, en aplat noir, au milieu du texte.
   Huit pages ressources indexées le montraient ainsi. La largeur reprise
   ici est celle que le contenu hérité déclare lui-même sur les pages où
   l'attribut existe. */
.ReachoutForm__icon,
.FormSection__icon {
  width: 100px;
  height: auto;
}

/* ---- Le cycle de développement des compétences ----

   Schéma à gauche, les quatre temps à droite : ce sont deux lectures
   d'une même chose, les mettre en regard évite de faire défiler l'une
   pour retrouver l'autre (demande du 19/08). Sous 62rem la colonne
   unique reprend, schéma d'abord.

   Les étapes sont centrées verticalement sur la hauteur du schéma :
   quatre lignes courtes en haut d'un carré de 34 rem laisseraient un
   vide sous la liste. */
.cycle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
  margin-block: 2.2rem;
  max-width: none;
}

.cycle__figure {
  margin: 0;
  max-width: 30rem;
}

.cycle__figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* La liste hérite de `.steps` : seules la marge et la pastille changent
   ici. Le reste du site garde ses étapes orange — `/modalites/sur-mesure/`
   en porte aussi. */
.cycle__etapes {
  margin: 0;
}

/* Pastille bleue et chiffre blanc (demande du 19/08). La teinte est
   celle des quatre cadres du schéma placé en regard : les étapes se
   lisent comme la suite de l'illustration, pas comme un autre bloc.
   7,63:1 avec du blanc, très au-dessus du AA.

   Elle n'entre pas dans les variables de `:root` : la charte n'a pas ce
   bleu, il n'appartient qu'au schéma. L'y promouvoir laisserait croire
   qu'il est réutilisable ailleurs. */
.cycle__etapes li::before {
  background: #2f5198;
  color: #fff;
}

@media (max-width: 62rem) {
  .cycle {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  .cycle__figure {
    max-width: 30rem;
    margin-inline: auto;
  }
}

/* Un schéma large se lit mal réduit à la largeur du texte : il garde
   sa taille et défile dans son propre cadre sur petit écran. */
.figure-schema {
  overflow-x: auto;
}

.figure-schema img {
  min-width: 620px;
  /* `.media-figure img` recadre en `cover`, ce qui rognerait un
     schéma. Ici la totalité doit rester visible. */
  height: auto;
  object-fit: contain;
}

/* =========================================================================
   Le processus en cinq étapes — schéma circulaire et dépliants

   Repris du site d'origine, qui empilait trois fichiers en
   positionnement absolu : l'anneau, l'arc et les pastilles. Tout tient
   ici dans un seul SVG en ligne, ce qui permet au CSS d'atteindre
   chaque pastille.

   L'état vit sur `data-etape`, posé par le script sur le conteneur.
   Aucune classe d'état n'est écrite dans le JavaScript : il nomme
   l'étape ouverte, la feuille de style en tire tout le reste.
   ========================================================================= */

.dc-processus {
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  gap: 2rem 3rem;
  align-items: center;
  margin-block: 2.5rem;
}

@media (max-width: 880px) {
  .dc-processus {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Le schéma ---- */

.dc-processus__schema {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin-inline: auto;
}

.dc-processus__anneau {
  fill: none;
  stroke: var(--c-bg-alt);
  stroke-width: 5;
}

/* L'arc pointe vers l'étape ouverte, un cinquième de tour par étape.
   `transform-box: view-box` donne au centre de rotation les
   coordonnées du viewBox, et non celles de la boîte du tracé. */
.dc-processus__arc {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 240px 240px;
  transition: opacity 0.3s ease, transform 0.45s ease;
}

.dc-processus[data-etape] .dc-processus__arc {
  opacity: 1;
}

.dc-processus[data-etape="Intent"] .dc-processus__arc {
  transform: rotate(0deg);
}

.dc-processus[data-etape="Inquire"] .dc-processus__arc {
  transform: rotate(72deg);
}

.dc-processus[data-etape="Involve"] .dc-processus__arc {
  transform: rotate(144deg);
}

.dc-processus[data-etape="Innovate"] .dc-processus__arc {
  transform: rotate(216deg);
}

.dc-processus[data-etape="Impact"] .dc-processus__arc {
  transform: rotate(288deg);
}

/* Pastille au repos : un gris qui laisse lire le pictogramme blanc
   sans prendre le pas sur l'étape ouverte. */
.dc-processus__pastille {
  fill: #a9adb3;
  transition: fill 0.3s ease;
}

/* Le dégradé du jeu 2 recouvre le gris quand l'étape est ouverte, ou
   au survol de la pastille. */
.dc-processus__pastille-active {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.dc-processus__icone {
  cursor: pointer;
}

.dc-processus__icone:hover .dc-processus__pastille-active,
.dc-processus[data-etape="Intent"] #dc-etape-Intent .dc-processus__pastille-active,
.dc-processus[data-etape="Inquire"] #dc-etape-Inquire .dc-processus__pastille-active,
.dc-processus[data-etape="Involve"] #dc-etape-Involve .dc-processus__pastille-active,
.dc-processus[data-etape="Innovate"] #dc-etape-Innovate .dc-processus__pastille-active,
.dc-processus[data-etape="Impact"] #dc-etape-Impact .dc-processus__pastille-active {
  opacity: 1;
}

/* Les libellés du schéma et la mention centrale passent à la police
   d'interface : le fichier d'origine les figeait en Arial. */
.dc-processus__schema text {
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: 15px;
}

.dc-processus__icones > g > text {
  font-size: 15px;
}

/* Sous 520 px, les libellés se chevauchent sur l'anneau : le schéma
   garde ses pastilles, la liste porte les noms. */
@media (max-width: 520px) {
  .dc-processus__icones text {
    display: none;
  }
}

/* ---- Les dépliants ---- */

.dc-processus__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}

.dc-processus__etape {
  margin: 0;
  border-bottom: 1px solid var(--c-border);
}

.dc-processus__etape:first-child {
  border-top: 1px solid var(--c-border);
}

.dc-processus__titre {
  margin: 0;
  font-size: inherit;
}

.dc-processus__titre button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  width: 100%;
  padding: 1.1rem 0;
  background: none;
  border: 0;
  font-family: var(--font-titre);
  font-weight: var(--fw-titre);
  font-size: 1.1875rem;
  line-height: 1.35;
  color: var(--c-text);
  text-align: left;
  cursor: pointer;
  transition: color 0.25s ease;
}

.dc-processus__titre button:hover,
.dc-processus__etape.est-ouverte .dc-processus__titre button {
  color: var(--c-turquoise-fonce);
}

/* Le chevron : un triangle qui se retourne à l'ouverture. */
.dc-processus__titre button::after {
  content: "";
  flex: none;
  width: 0;
  height: 0;
  border-top: 6px solid currentColor;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  transition: transform 0.25s ease;
}

.dc-processus__etape.est-ouverte .dc-processus__titre button::after {
  transform: rotate(180deg);
}

.dc-processus__volet {
  padding-block-end: 1.3rem;
}

.dc-processus__volet p {
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-aside);
  line-height: 1.6;
  color: var(--c-text-muted);
  margin: 0;
  max-width: 62ch;
}

/* Le repli n'a lieu qu'une fois le script en place : sans lui, les
   cinq descriptions restent lisibles. */
.dc-processus.est-interactif
  .dc-processus__etape:not(.est-ouverte)
  .dc-processus__volet {
  display: none;
}

/* =========================================================================
   Page « Intra & sur-mesure » (templates/page-sur-mesure.php)

   La page de conversion B2B. Elle alterne des bandes pleine largeur,
   comme la page d'accueil, et n'emprunte au reste du site que son
   vocabulaire : mêmes couleurs, mêmes pictogrammes, mêmes boutons.
   ========================================================================= */

/* ---- Hero ----

   Fond navy et filet de marque en tête : la page se distingue au premier
   regard d'une page de contenu ordinaire, sans changer de langage
   graphique. */
.sm-hero {
  position: relative;
  background: var(--c-navy);
  color: var(--c-inverse-text);
  padding-block: clamp(2.5rem, 1.8rem + 3.4vw, 4.5rem);
  overflow: hidden;
}

/* Pas de filet dégradé en tête du hero : le même filet ferme déjà
   l'en-tête du site, cent pixels plus haut, et le fil d'Ariane est la
   seule chose qui les sépare. Répéter la signature deux fois de suite
   l'affaiblit. Le passage au navy suffit à marquer l'entrée. */

/* Halo turquoise très dilué, posé hors du flux : il donne de la
   profondeur au bloc sans peser une seule requête. */
.sm-hero::after {
  content: "";
  position: absolute;
  inset-block-start: -30%;
  inset-inline-end: -10%;
  width: min(46rem, 70%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 182, 179, 0.22) 0%,
    rgba(0, 182, 179, 0) 68%
  );
  pointer-events: none;
}

.sm-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: 24px;
}

.eyebrow--inverse {
  color: var(--c-turquoise);
}

/* Le sur-titre du hero peut porter un lien — le centre sur une fiche de
   programme local, le thème sur une session. Sans cette règle, le lien
   reprend la couleur de texte du site, presque noire, et disparaît sur
   le fond navy. */
.eyebrow--inverse a {
  color: inherit;
  text-decoration-color: rgba(255, 255, 255, 0.45);
}

.eyebrow--inverse a:hover,
.eyebrow--inverse a:focus-visible {
  color: #fff;
  text-decoration-color: currentColor;
}

.sm-hero h1 {
  color: #fff;
  margin-block: 0.4em 0.3em;
  max-width: 20ch;
}

.sm-hero__accroche {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-inverse-muted);
  max-width: 54ch;
}

.sm-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-block: 2rem 2.6rem;
  max-width: none;
}

/* Bouton secondaire sur fond sombre : le `--secondary` du design system
   emprunte la couleur des liens, illisible ici. */
a.button.button--fantome {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.55);
}

a.button.button--fantome:hover,
a.button.button--fantome:focus-visible {
  background: #fff;
  color: var(--c-navy);
  border-color: #fff;
}

/* ---- Bandeau de preuve ---- */
.sm-preuves {
  list-style: none;
  margin: 0;
  padding-block-start: 1.8rem;
  border-top: 1px solid var(--c-navy-line);
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.2rem 2rem;
  font-family: var(--font-ui);
}

.sm-preuves li {
  margin: 0;
}

.sm-preuves strong {
  display: block;
  font-size: 1.5rem;
  line-height: 1.15;
  color: #fff;
}

.sm-preuves span {
  display: block;
  margin-block-start: 0.15rem;
  font-size: var(--fs-small);
  color: var(--c-inverse-muted);
}

/* ---- Chapô de section ---- */
.sm-intro {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-text-muted);
  max-width: 62ch;
  margin-block-end: 2.4rem;
}

/* ---- L'équation de la méthode ----

   Deux termes et leur résultat, séparés par un « + » et un « = ». Les
   signes sont décoratifs : ils portent aria-hidden, un lecteur d'écran
   lit trois titres de rang égal, ce qui dit la même chose. */
.sm-equation {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 1.2rem;
  margin-block: 2.5rem 1rem;
}

.sm-equation__terme {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 1.6rem 1.5rem;
  box-shadow: var(--shadow-card);
  font-family: var(--font-ui);
}

/* Le résultat se détache : c'est lui que la page vend. */
.sm-equation__terme--resultat {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: var(--c-inverse-text);
}

.sm-equation__terme h3 {
  margin-block: 1rem 0.5rem;
  font-size: var(--fs-h4);
}

.sm-equation__terme--resultat h3 {
  color: #fff;
}

.sm-equation__terme p {
  margin: 0;
  font-size: var(--fs-aside);
  line-height: 1.6;
  color: var(--c-text-muted);
  max-width: none;
}

.sm-equation__terme--resultat p {
  color: var(--c-inverse-muted);
}

.sm-equation__signe {
  align-self: center;
  margin: 0;
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: 2rem;
  line-height: 1;
  color: var(--c-accent);
  max-width: none;
}

@media (max-width: 900px) {
  .sm-equation {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.8rem;
  }

  .sm-equation__signe {
    justify-self: center;
  }
}

/* ---- Les défis ----

   Des étiquettes plutôt qu'une liste à puces : treize sujets se
   parcourent du regard, ils ne se lisent pas ligne à ligne. */
.sm-defis {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.sm-defis li {
  margin: 0;
}

.sm-defi a,
.sm-defi__inerte {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7em 1.1em;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-weight: var(--fw-medium);
  font-size: var(--fs-small);
  line-height: 1.2;
  color: var(--c-text);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease,
    transform 0.15s ease;
}

.sm-defi__picto {
  flex: 0 0 auto;
  color: var(--c-accent-dark);
}

.sm-defi a:hover,
.sm-defi a:focus-visible {
  background: var(--c-orange-pale);
  border-color: var(--c-accent);
  color: var(--c-text);
  text-decoration: none;
  transform: translateY(-1px);
}

/* Un sujet sans page dédiée reste affiché — il dit ce que nous savons
   traiter — mais ne feint pas d'être cliquable. */
.sm-defi__inerte {
  color: var(--c-text-muted);
  cursor: default;
}

/* ---- Le parcours en quatre étapes ---- */
.sm-parcours {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem 1.8rem;
}

.sm-etape {
  position: relative;
  margin: 0;
  padding-block-start: 1.4rem;
  border-top: 3px solid var(--c-border);
  font-family: var(--font-ui);
}

/* Les quatre filets portent l'accent : un seul coloré ressemblait à un
   oubli plutôt qu'à une intention, et alignés ils dessinent la
   progression du projet. */
.sm-etape {
  border-top-color: var(--c-accent);
}

.sm-etape__rang {
  margin: 0 0 0.4rem;
  font-weight: var(--fw-bold);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  color: var(--c-accent-dark);
  max-width: none;
}

.sm-etape h3 {
  margin: 0 0 0.5rem;
  font-size: var(--fs-h4);
}

.sm-etape p:not(.sm-etape__rang) {
  margin: 0;
  font-size: var(--fs-aside);
  line-height: 1.6;
  color: var(--c-text-muted);
  max-width: none;
}

/* ---- Les trois modalités ---- */
.sm-modalites {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem;
}

.sm-modalite {
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-top: 4px solid var(--c-accent);
  border-radius: 12px;
  padding: 1.7rem 1.6rem 1.4rem;
  box-shadow: var(--shadow-card);
  font-family: var(--font-ui);
}

.sm-modalite h3 {
  margin-block: 1rem 0.5rem;
  font-size: var(--fs-h4);
}

.sm-modalite p {
  margin: 0;
  font-size: var(--fs-aside);
  line-height: 1.6;
  color: var(--c-text-muted);
  max-width: none;
}

/* Le lien se cale en bas : les trois cartes n'ont pas le même nombre de
   lignes, leurs liens s'alignent quand même. */
.sm-modalite__lien {
  margin-block-start: auto;
  padding-block-start: 1.2rem;
}

.sm-modalite__lien a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: var(--fw-bold);
  text-decoration: none;
}

.sm-modalite__lien a:hover,
.sm-modalite__lien a:focus-visible {
  text-decoration: underline;
}

.sm-modalite__fleche {
  transition: transform 0.15s ease;
}

.sm-modalite__lien a:hover .sm-modalite__fleche {
  transform: translateX(3px);
}

/* ---- Intra ou inter ---- */
.sm-comparatif {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.5rem;
}

.sm-colonne {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 1.7rem 1.6rem;
  font-family: var(--font-ui);
}

/* La colonne que la page défend porte l'accent, l'autre reste neutre :
   la comparaison est honnête, la préférence est assumée. */
.sm-colonne--phare {
  border-color: var(--c-accent);
  border-width: 2px;
  box-shadow: var(--shadow-card);
}

.sm-colonne ul {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  max-width: none;
}

.sm-colonne li {
  position: relative;
  margin: 0 0 0.7rem;
  padding-inline-start: 1.6rem;
  font-size: var(--fs-aside);
  line-height: 1.55;
  color: var(--c-text-muted);
}

.sm-colonne li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-border);
}

.sm-colonne--phare li::before {
  background: var(--c-accent);
}

.sm-colonne__lien {
  margin-block: 1.2rem 0;
  font-size: var(--fs-small);
}

/* ---- Questions fréquentes ---- */
.sm-faq {
  max-width: 70ch;
}

.sm-faq__complement {
  margin-block-start: 1.8rem;
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

/* ---- Appel final ---- */

/* La bande navy touche le pied de page : la marge blanche que le pied
   se réserve ailleurs couperait l'enchaînement entre deux fonds
   sombres. Posée par une classe de body, elle ne concerne que ce
   gabarit. */
.dc-pied-colle .site-footer {
  margin-top: 0;
}

.sm-final h2 {
  color: #fff;
}

.sm-final p {
  color: var(--c-inverse-muted);
  max-width: 58ch;
}

.sm-final__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-block-start: 1.8rem;
  max-width: none;
}

@media (prefers-reduced-motion: reduce) {
  .sm-defi a,
  .sm-modalite__fleche {
    transition: none;
  }

  .sm-defi a:hover,
  .sm-defi a:focus-visible,
  .sm-modalite__lien a:hover .sm-modalite__fleche {
    transform: none;
  }
}

/* =========================================================================
   Page « Financement CPF » (templates/page-cpf.php)

   Elle reprend le hero, les étapes, la FAQ et l'appel final de la page
   sur-mesure : même gabarit en bandes, mêmes classes `sm-*`. Seuls les
   composants qui lui sont propres sont définis ici.
   ========================================================================= */

/* ---- Le dispositif en trois notions ---- */
.cpf-notions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem;
  margin-block-start: 2rem;
}

.cpf-notion {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 1.7rem 1.6rem;
  box-shadow: var(--shadow-card);
  font-family: var(--font-ui);
}

.cpf-notion h3 {
  margin-block: 1rem 0.5rem;
  font-size: var(--fs-h4);
}

.cpf-notion p {
  margin: 0;
  font-size: var(--fs-aside);
  line-height: 1.6;
  color: var(--c-text-muted);
  max-width: none;
}

/* ---- Le délai réglementaire ----

   Première cause d'inscription refusée : il mérite d'être vu, pas d'être
   lu au détour d'une étape. Fond ambré et non rouge : c'est une
   contrainte de calendrier, pas une erreur. */
.cpf-alerte {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin-block-start: 2.5rem;
  padding: 1.2rem 1.4rem;
  background: var(--c-jaune-pale);
  border: 1px solid var(--c-jaune);
  border-left-width: 5px;
  border-radius: 10px;
  font-family: var(--font-ui);
  font-size: var(--fs-aside);
  line-height: 1.6;
  color: var(--c-text);
  max-width: 78ch;
}

.cpf-alerte__picto {
  flex: 0 0 auto;
  margin-block-start: 0.15em;
  color: var(--c-jaune-fonce);
}

/* ---- Ce qui est couvert, ce qui reste à charge ---- */
.cpf-couverture {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.5rem;
  margin-block-start: 2rem;
}

.cpf-couverture__col {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 1.6rem;
  font-family: var(--font-ui);
}

.cpf-couverture__col--oui {
  border-color: var(--c-vert);
  border-width: 2px;
  box-shadow: var(--shadow-card);
}

.cpf-couverture__col ul {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  max-width: none;
}

.cpf-couverture__col li {
  position: relative;
  margin: 0 0 0.7rem;
  padding-inline-start: 1.6rem;
  font-size: var(--fs-aside);
  line-height: 1.55;
  color: var(--c-text-muted);
}

.cpf-couverture__col li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-border);
}

.cpf-couverture__col--oui li::before {
  background: var(--c-vert-fonce);
}

.cpf-decrets {
  margin-block-start: 1.4rem;
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

/* ---- Filtres par centre ----

   Des liens, pas des boutons : chaque vue a son URL, partageable et
   indexable. Le repli du §2 vaut ici comme pour le calendrier général. */
.cpf-filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-block-end: 2rem;
}

.cpf-filtre {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55em 1em;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-weight: var(--fw-medium);
  font-size: var(--fs-small);
  color: var(--c-text);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cpf-filtre span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  padding-inline: 0.35em;
  height: 1.6em;
  border-radius: 999px;
  background: var(--c-bg-alt);
  font-size: 0.8125rem;
  font-weight: var(--fw-bold);
  color: var(--c-text-muted);
}

.cpf-filtre:hover,
.cpf-filtre:focus-visible {
  border-color: var(--c-accent);
  color: var(--c-text);
  text-decoration: none;
}

.cpf-filtre.est-actif {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: #fff;
}

.cpf-filtre.est-actif span {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.cpf-sessions {
  display: grid;
  gap: 0.75rem;
}

/* ---- Programmes éligibles ---- */
.cpf-programmes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.5rem;
  margin-block-start: 2rem;
}

.cpf-programme {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-top: 4px solid var(--c-turquoise);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  font-family: var(--font-ui);
}

.cpf-programme h3 {
  margin: 0 0 0.8rem;
  font-size: var(--fs-h4);
}

.cpf-programme h3 a {
  text-decoration: none;
}

.cpf-programme h3 a:hover,
.cpf-programme h3 a:focus-visible {
  text-decoration: underline;
}

/* Les centres sont la mention que le §7 impose de préciser à chaque
   fois : ils sont mis en avant, pas relégués en note. */
.cpf-programme__centres {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  font-size: var(--fs-aside);
  line-height: 1.5;
  color: var(--c-text);
  max-width: none;
}

.cpf-programme__picto {
  flex: 0 0 auto;
  margin-block-start: 0.15em;
  color: var(--c-accent-dark);
}

.cpf-programme__rs {
  margin-block: 0.7rem 0;
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

.cpf-referente {
  margin-block-start: 1.2rem;
  font-size: var(--fs-small);
  color: var(--c-inverse-muted);
}

/* =========================================================================
   Page « Modalités de formation » (templates/page-modalites.php)

   Page d'aiguillage. Comme la page CPF, elle reprend le squelette de la
   page sur-mesure — hero navy, chapô, comparatifs, FAQ, appel final,
   classes `sm-*` — et ne définit ici que ses composants propres.
   ========================================================================= */

/* ---- Les quatre cartes d'aiguillage ----

   Toute la carte est cliquable, pas seulement son titre : sur une page
   dont l'unique fonction est de repartir ailleurs, réduire la cible à
   trois mots soulignés est un frein gratuit. L'ancre enveloppe donc le
   contenu, et la carte se contente de tenir la grille. */
.mod-cartes {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 1.5rem;
}

.mod-carte {
  margin: 0;
  display: flex;
}

.mod-carte__lien {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-top: 4px solid var(--c-accent);
  border-radius: 12px;
  padding: 1.7rem 1.6rem 1.4rem;
  box-shadow: var(--shadow-card);
  font-family: var(--font-ui);
  color: var(--c-text);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    border-color 0.15s ease;
}

.mod-carte__lien:hover,
.mod-carte__lien:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--c-accent);
  text-decoration: none;
}

/* La situation avant le nom de la modalité : le visiteur se reconnaît
   dans « une équipe entière » plus vite que dans « intra ». */
.mod-carte__pour {
  margin: 1rem 0 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-orange-fonce);
  max-width: none;
}

.mod-carte__lien h3 {
  margin-block: 0.3rem 0.6rem;
  font-size: var(--fs-h4);
}

.mod-carte__texte {
  margin: 0;
  font-size: var(--fs-aside);
  line-height: 1.6;
  color: var(--c-text-muted);
  max-width: none;
}

/* Le chiffre et la note se calent en bas : les quatre cartes n'ont pas
   le même nombre de lignes, leurs pieds s'alignent quand même. */
.mod-carte__chiffre {
  margin-block: 1.3rem 0;
  padding-block-start: 1.1rem;
  margin-block-start: auto;
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  max-width: none;
}

.mod-carte__chiffre strong {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--c-navy);
  margin-inline-end: 0.35rem;
}

/* Sans chiffre — le sur-mesure n'a pas de session au calendrier — la
   note prend elle-même le filet et la place du bas. */
.mod-carte__note {
  margin: 0.35rem 0 0;
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  max-width: none;
}

.mod-carte__chiffre + .mod-carte__note {
  margin-block-start: 0.2rem;
}

.mod-carte__texte + .mod-carte__note {
  margin-block-start: auto;
  padding-block-start: 1.1rem;
  border-top: 1px solid var(--c-border);
}

.mod-carte__fleche {
  display: block;
  margin-block-start: 1rem;
  color: var(--c-accent-dark);
  transition: transform 0.15s ease;
}

.mod-carte__lien:hover .mod-carte__fleche {
  transform: translateX(4px);
}

/* ---- Titre de colonne dans un comparatif ----

   La page sur-mesure n'en a pas : ses colonnes se passent de titre. Ici
   chaque colonne répond à une question — « choisissez le présentiel
   si… » — et ce titre porte le niveau h3 sous le h2 de la section. Au
   corps global, il écraserait la carte. */
.sm-colonne h3 {
  margin-block: 0.15rem 0;
  font-size: var(--fs-h4);
}

/* ---- Liste de dates sur une page de modalité ----

   Même empilement que la vue CPF : les cartes de session portent déjà
   leur mise en page, le conteneur ne fait que les espacer. */
.mod-sessions {
  display: grid;
  gap: 0.75rem;
}

/* ---- Dates ouvertes, en pied de carte de thème ----

   `margin-block-start: auto` aligne les pieds des sept cartes, dont les
   accroches n'ont pas le même nombre de lignes. Le filet sépare la
   donnée de catalogue du texte de présentation. */
.formation-card__dates {
  margin-block: 1rem 0.9rem;
  margin-block-start: auto;
  padding-block-start: 0.9rem;
  border-top: 1px solid var(--c-border);
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  max-width: none;
}

.formation-card__dates strong {
  font-size: 1.25rem;
  line-height: 1;
  color: var(--c-navy);
  margin-inline-end: 0.2rem;
}

/* Un thème sans date n'est pas un thème en défaut : le libellé reste
   neutre, sans rouge ni pastille d'alerte. */
.formation-card__dates--vide {
  font-style: normal;
}

/* ---- Précision de bas de section ---- */
.mod-note {
  margin-block: 1.8rem 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--c-text-muted);
  max-width: 74ch;
}

@media (prefers-reduced-motion: reduce) {
  .mod-carte__lien,
  .mod-carte__fleche {
    transition: none;
  }

  .mod-carte__lien:hover,
  .mod-carte__lien:focus-visible,
  .mod-carte__lien:hover .mod-carte__fleche {
    transform: none;
  }
}

/* =========================================================================
   Hub des centres — cartes détaillées (page-centres.php)

   La variante `--detaille` ajoute à chaque carte les trois nombres qui
   distinguent réellement un centre d'un autre. Ailleurs — home, page
   présentiel — la carte reste une simple porte d'entrée et garde son
   dessin d'origine.
   ========================================================================= */

.centre-grid--detaille {
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

/* Les trois nombres en regard de leur libellé, sur une ligne. Le filet
   les sépare du bloc adresse : ils ne se lisent pas comme la suite du
   texte mais comme une fiche. */
/* `margin-block-start: auto` : les trois nombres se comparent d'une carte
   à l'autre, ils doivent donc se trouver à la même hauteur. Sans cela,
   « Dale Carnegie Paris Île-de-France » se replie sur deux lignes et
   décale ses chiffres de dix-sept pixels par rapport aux deux autres. */
.centre-card__chiffres {
  margin-block-start: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-block-end: 0.2rem;
  padding-block-start: 1rem;
  border-top: 1px solid var(--c-border);
}

.centre-card__chiffres > div {
  min-width: 0;
}

/* Le nombre au-dessus de son libellé : c'est lui qu'on compare d'une
   carte à l'autre, il passe donc en premier dans l'ordre visuel. La
   liste de définitions garde l'ordre inverse, qui est le sien. */
.centre-card__chiffres > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
}

.centre-card__chiffres dt {
  margin: 0.15rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.25;
  color: var(--c-text-muted);
}

.centre-card__chiffres dd {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--c-navy);
}

.centre-card__tel {
  margin-block: 0.6rem 0;
  font-weight: var(--fw-bold);
}

/* Le texte rédigé d'une page de centre, posé dans sa bande : il porte
   ses propres titres et ne doit pas hériter de la mesure du chapô. */
.centre-texte > *:first-child {
  margin-block-start: 0;
}

.centre-texte > *:last-child {
  margin-block-end: 0;
}

/* Le premier titre d'une bande n'a pas à porter la marge qui sépare
   deux sections à l'intérieur d'une même bande : elle s'ajoute au
   rembourrage et fait 183 px avant le titre au lieu de 83. Le cas ne se
   voyait que sur la bande Qualiopi des pages centres, seule à recevoir
   un H2 nu par template-part là où les autres passent par
   `.section-head`, qui annule déjà la marge. */
.band__inner > :first-child > h2:first-child,
.band__inner > h2:first-child {
  margin-block-start: 0;
}

/* ---- Le contenu rédigé d'une page centre, en deux parties ----

   Un chapeau en pleine largeur, puis les deux parties titrées côte à
   côte (demande du 24/08). Empilées, elles faisaient un pavé de six
   paragraphes entre le calendrier et le financement ; en regard, on
   voit d'un coup qu'elles répondent à deux questions différentes —
   venir se former ici, ou faire venir un formateur chez soi. */
.centre-texte__chapeau {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-text-muted);
  max-width: 62ch;
  margin-block-end: 2.5rem;
}

.centre-texte__chapeau > *:first-child {
  margin-block-start: 0;
}

.centre-texte__chapeau > *:last-child {
  margin-block-end: 0;
}

/* Une seule colonne : les deux parties s'empilent et forment deux
   sections franches (demande du 24/08, qui revient sur la mise côte à
   côte du matin). Elles retrouvent une mesure de lecture propre, que
   deux colonnes de 45 caractères leur refusaient. */
.centre-blocs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

/* Un panneau pâle plutôt qu'un filet de tête (repris le 25/08).

   Le filet courait sur les 1140 px de la bande alors que les paragraphes
   s'arrêtent à 68ch, soit 761 px : il pointait vers 380 px de vide, et
   les deux parties se lisaient comme du texte nu posé entre le calendrier
   et le financement. Le fond occupe la largeur à la place du trait.

   Ni bordure ni ombre : c'est du texte suivi, pas une carte cliquable, et
   un cadre les ferait passer pour des liens. Le seul aplat suffit à les
   poser. La bande d'accueil est blanche — `band--tight`, encadrée de deux
   `band--alt` grises — donc le contraste passe.

   Teinte : l'orange pâle des encarts de tête des fiches formation
   (demande du 25/08), et non le gris neutre. `--c-orange-pale` plutôt que
   `--accent-pale` : cette dernière est posée par domaine sur le conteneur
   d'une fiche, alors qu'une page centre couvre plusieurs programmes et
   n'a pas de couleur propre. C'est donc l'orange de marque qui s'impose. */
.centre-bloc {
  background: var(--c-orange-pale);
  border-radius: 12px;
  padding: clamp(1.4rem, 4vw, 2rem) clamp(1.25rem, 4vw, 2.25rem);
}

/* Sur une colonne, le texte reprend la mesure de lecture du site : en
   pleine largeur, ces paragraphes atteindraient 110 caractères. */
.centre-bloc > p {
  max-width: 68ch;
}

.centre-bloc > h2 {
  font-size: var(--fs-h3);
  margin-block: 0 0.9em;
}

/* Le filet de 44 px sous le H2 revient — il est repris de
   `.centre-texte h2::after`. Il faisait doublon tant que le bloc portait
   son propre trait de tête ; dans un panneau, c'est le seul rappel
   d'accent, et il ancre le titre au lieu de le laisser flotter. */

.centre-bloc > *:last-child {
  margin-block-end: 0;
}

/* ---- Formes décoratives du contenu hérité ----

   Les blocs `ImageCopyPanel` de l'ancien thème posent une forme SVG de
   fond dimensionnée en dur dans le balisage — `width="542"` sur une page
   dont la colonne fait 330 px sur téléphone. Sans le CSS d'origine, qui
   n'a jamais été repris, elle déborde de 182 px et fait défiler la page
   en largeur.

   Trois pages étaient concernées : service client, réussir le changement
   en entreprise, accompagner le changement organisationnel. Toutes trois
   sont hors du périmètre des 48 h (§9) et gardent leurs URLs ; elles
   n'en sont pas moins indexées et visitées.

   `height: auto` accompagne `max-width` : sans lui, la hauteur reste
   figée à 745 px et la forme s'écrase. Le `viewBox` fait le reste. */
.entry-content svg[width]:not([width$="em"]) {
  max-width: 100%;
  height: auto;
}

/* =========================================================================
   Scores de recommandation (page-a-propos.php)

   Le chiffre domine la carte : c'est lui qu'on compare d'un programme à
   l'autre. La source, en petit dessous, n'est pas une note de bas de
   page facultative — c'est elle qui rend le chiffre défendable (§10).
   ========================================================================= */

/* Trois colonnes plutôt que quatre : cinq cartes se rangent en 3 + 2,
   pas en 4 + 1 qui laisse la dernière seule au bout d'une ligne vide. */
.nps-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: 1.5rem;
}

.nps-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-top: 4px solid var(--c-turquoise);
  border-radius: 12px;
  padding: 1.5rem 1.4rem 1.3rem;
  box-shadow: var(--shadow-card);
  font-family: var(--font-ui);
}

.nps-card__valeur {
  margin: 0;
  font-size: clamp(2.25rem, 1.9rem + 1.4vw, 3rem);
  line-height: 1;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--c-turquoise-fonce);
  max-width: none;
}

.nps-card h3 {
  margin-block: 0.5rem 0;
  font-size: var(--fs-h4);
}

.nps-card h3 a {
  color: var(--c-text);
  text-decoration: none;
}

.nps-card h3 a:hover,
.nps-card h3 a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* `margin-block-start: auto` : les libellés de programme n'ont pas tous
   le même nombre de lignes, les sources s'alignent quand même. */
.nps-card__source {
  margin-block: 0.9rem 0;
  margin-block-start: auto;
  padding-block-start: 0.9rem;
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-text-muted);
  max-width: none;
}