/*
 * CAIAC — Variante C « constructiviste »
 * ------------------------------------------------------------------
 * Direction : géométrique et affirmé.
 * Origine   : le logo lui-même. Un anneau segmenté en cinq arcs de couleur
 *             cerné d'un contour noir épais, c'est déjà du vocabulaire
 *             constructiviste. C n'invente pas un style, il déplie celui-ci.
 * Dispositif: le KEYLINE NOIR de 3 px et l'ARC. Chaque bloc est cerné comme
 *             les segments du logo ; les arcs reviennent en ancre de section,
 *             en pastille de numéro et en nœud de schéma.
 * Layout    : grille modulaire visible, blocs de tailles inégales, aplats de
 *             couleur pleine occupant des modules entiers.
 * Couleur   : palette de marque inchangée, employée en GRANDS APLATS. Toutes
 *             portent du texte sombre : jaune 12,2:1 · bleu clair 11,6:1 ·
 *             bleu 9,3:1 · vert+navy 6,6:1 · rouge 5,1:1.
 *
 * À charger APRÈS ../design-system.css, dont C ne reprend QUE les jetons de
 * couleur. Aucune classe de A ni de B : préfixe `c-` partout.
 */

/* ================================================
   1. JETONS
   ================================================ */
:root {
  --c-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Une seule famille, comme la charte l'impose. La direction est portée par
     la géométrie et la couleur, pas par une police de caractères nouvelle. */
  --c-t-xs:   0.8125rem;
  --c-t-sm:   0.9375rem;
  --c-t-base: 1.0625rem;
  --c-t-md:   1.25rem;
  --c-t-lg:   1.75rem;
  --c-t-xl:   2.5rem;
  --c-t-2xl:  3.5rem;
  /* H1 réduit d'environ 35 % le 24 août 2026 : 80 -> 52 px au maximum.
     Les trois bornes du clamp sont réduites ensemble pour que la réduction
     tienne à toutes les largeurs, pas seulement sur grand écran. */
  --c-t-hero: clamp(1.5rem, 4.5vw, 3.25rem);

  --c-s1: 8px;  --c-s2: 16px; --c-s3: 24px; --c-s4: 32px;
  --c-s5: 48px; --c-s6: 64px; --c-s7: 96px; --c-s8: 120px;

  --c-key:  3px;                 /* le keyline noir */
  --c-max:  1240px;
  --c-prose: 620px;
  --c-ease: 180ms cubic-bezier(.2,.7,.3,1);
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-latin-ext.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

/* ================================================
   2. BASE
   ================================================ */
.c-page {
  font-family: var(--c-font); font-size: var(--c-t-base); line-height: 1.6;
  color: var(--text); background: var(--white); margin: 0;
  -webkit-font-smoothing: antialiased;
}
.c-page *, .c-page *::before, .c-page *::after { box-sizing: border-box; }
.c-page h1, .c-page h2, .c-page h3, .c-page h4 {
  margin: 0; font-weight: 800; line-height: 1.02; letter-spacing: -0.03em;
  color: var(--text); text-wrap: balance; overflow-wrap: break-word;
}
.c-page p { margin: 0; color: inherit; }
/* `color: inherit` est indispensable : design-system.css déclare
   `p { color: var(--gray-mid) }`, un sélecteur de type qui l'emporte sur la
   couleur héritée d'un aplat. Sans ce reset, tout paragraphe posé sur une
   couleur de marque repasse en gris — 1,5:1 sur le rouge, 1,7:1 sur le vert. */
.c-page ul, .c-page ol { margin: 0; padding: 0; list-style: none; }
.c-page img { max-width: 100%; height: auto; display: block; }
.c-page a { color: inherit; text-decoration: none; }
.c-page :focus-visible { outline: var(--c-key) solid var(--text); outline-offset: 2px; }

/* ================================================
   3. GRILLE MODULAIRE — visible, inégale
   ================================================ */
.c-wrap { max-width: var(--c-max); margin-left: auto; margin-right: auto;
  padding-left: var(--c-s3); padding-right: var(--c-s3); }
.c-mod { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--c-s3); }
/* Paire simple. .c-mod ne convient pas dans un conteneur étroit : ses onze
   gouttières de 24 px totalisent 264 px, plus que la largeur disponible quand
   la grille est imbriquée — les colonnes tombent à zéro et l'élément déborde. */
.c-duo { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--c-s3); }
.c-trio { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--c-s3); }
@media (max-width: 900px) { .c-duo, .c-trio { grid-template-columns: 1fr; } }
.c-sp3 { grid-column: span 3; } .c-sp4 { grid-column: span 4; }
.c-sp5 { grid-column: span 5; } .c-sp6 { grid-column: span 6; }
.c-sp7 { grid-column: span 7; } .c-sp8 { grid-column: span 8; }
.c-sp9 { grid-column: span 9; } .c-sp12 { grid-column: span 12; }

/* Hero à deux colonnes.
   L'alignement par le bas fonctionnait avec un H1 de 80 px : les deux colonnes
   avaient des hauteurs voisines. Depuis la réduction du H1, la colonne de titre
   est plus courte que celle du chapô et le titre se retrouvait poussé vers le bas.
   Les deux colonnes partent donc du haut, et la colonne de droite est décalée de
   la hauteur du sur-titre pour que le chapô démarre à la même ligne que le H1. */
.c-hero { align-items: start; }
/* Le décalage ne vaut que si la colonne de titre porte un sur-titre : sans lui,
   il désaligne le chapô au lieu de l'aligner. `:has()` laisse les navigateurs qui
   l'ignorent sur un alignement haut simple — dégradation sans casse. */
.c-hero:has(.c-kicker) > :last-child { padding-top: calc(var(--c-s3) + 1.9em); }
@media (max-width: 1024px) { .c-hero:has(.c-kicker) > :last-child { padding-top: 0; } }

.c-workflow-card { border: var(--c-key) solid var(--text); background: var(--white);
  box-shadow: 10px 10px 0 var(--yellow); }
.c-workflow-card__head { padding: var(--c-s2) var(--c-s3); background: var(--navy);
  color: var(--white); font-size: var(--c-t-xs); font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; }
.c-workflow-card ol { padding: var(--c-s2) var(--c-s3); }
.c-workflow-card li { display: grid; grid-template-columns: 34px 1fr auto; gap: var(--c-s2);
  align-items: center; min-height: 58px; border-bottom: 2px solid var(--text); }
.c-workflow-card li:last-child { border-bottom: 0; }
.c-workflow-card li b { color: var(--green); }
.c-workflow-card li span { font-size: var(--c-t-sm); font-weight: 800; }
.c-workflow-card li em { font-size: var(--c-t-xs); font-style: normal; color: var(--gray-mid); }
.c-workflow-card__foot { display: flex; justify-content: space-between; align-items: center;
  gap: var(--c-s2); padding: var(--c-s3); border-top: var(--c-key) solid var(--text);
  background: var(--blue-light); font-size: var(--c-t-xs); }
.c-workflow-card__foot strong { font-size: var(--c-t-md); }

/* Le hero raconte le système CAIAC, pas un faux écran produit. Trois capacités,
   une plaque de titre, un aplat de clôture.
   Direction : AFFICHE MODULAIRE, pas schéma. La continuité n'est pas tracée, elle
   est composée — les trois plans-chiffres alternent gauche / droite / gauche et
   leur coin plat vise toujours le texte : la rotation se sent, elle ne se lit pas.
   Dispositif dominant : l'arc du logo à grande échelle — les plans-chiffres, et
   la découpe mordue dans le coin de la plaque de titre.
   Couleur : blanc majoritaire, le vert en grand aplat (découpe, chiffre 03, pied),
   le jaune et le bleu en accents de chiffre. */
.c-hero__promise { font-weight: 800; color: var(--navy); }

.c-capability-map {
  --cap-pad: 22px;   /* marge intérieure des registres */
  --cap-num: 68px;   /* côté du plan-chiffre */
  --cap-gap: 20px;   /* entre le plan-chiffre et son texte */
  --cap-cut: 72px;   /* rayon de la découpe de la plaque de titre */
  margin: 0; border: var(--c-key) solid var(--text);
  background: var(--green);   /* ne se voit que dans la découpe du titre */
  box-shadow: 10px 10px 0 var(--yellow);
}

/* --- Plaque de titre : un arc du logo mordu dans le coin --- */
.c-capability-map__head {
  padding: var(--c-s3); background: var(--navy); color: var(--white);
  border-bottom-right-radius: var(--cap-cut);
}
.c-capability-map__head span {
  display: block; color: var(--green); font-size: var(--c-t-xs); font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;   /* vert sur navy : 6,54:1 */
}
.c-capability-map__head strong {
  display: block; margin-top: 4px; font-size: var(--c-t-md); line-height: 1.15;
  letter-spacing: -.02em;
}

/* --- Les trois registres --- */
.c-capability-map__list { background: var(--white); }   /* couvre le vert de fond */
.c-capability-map__item {
  display: flex; align-items: flex-start; gap: var(--cap-gap);
  padding: var(--cap-pad) var(--c-s3);
  border-top: var(--c-key) solid var(--text);
}
/* L'alternance : le deuxième registre s'ancre à droite. Trois modules identiques
   feraient une liste ; décalés, ils font une composition. */
.c-capability-map__item:nth-child(2) { flex-direction: row-reverse; }

.c-capability-map__num {
  display: grid; place-items: center; flex: none;
  width: var(--cap-num); height: var(--cap-num);
  border: var(--c-key) solid var(--text);
  border-radius: 100% 0 100% 100%;   /* coin plat vers le texte, à droite */
  font-size: var(--c-t-lg); font-weight: 800; line-height: 1;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
/* Ancré à droite, le coin plat bascule pour continuer de viser le texte. */
.c-capability-map__item:nth-child(2) .c-capability-map__num { border-radius: 0 100% 100% 100%; }
.c-capability-map__num--yellow { background: var(--yellow);     color: var(--text); }
.c-capability-map__num--blue   { background: var(--blue);       color: var(--text); }
.c-capability-map__num--green  { background: var(--green);      color: var(--navy); }

/* La mesure est bornée : pleine largeur, la ligne filerait à 90 signes. */
.c-capability-map__body { flex: 1; min-width: 0; max-width: 46ch; }
.c-capability-map__body strong {
  display: block; font-size: var(--c-t-md); line-height: 1.15;
  letter-spacing: -.02em; color: var(--text);
}
.c-capability-map__body p {
  margin-top: 7px; font-size: var(--c-t-sm); line-height: 1.5; color: var(--anthracite);
}

/* --- Pied : le seul grand aplat, il clôt la plaque --- */
.c-capability-map__loop {
  padding: var(--c-s3); border-top: var(--c-key) solid var(--text);
  background: var(--green); color: var(--navy);   /* 6,63:1 */
}
.c-capability-map__loop span {
  display: block; font-size: var(--c-t-xs); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}
.c-capability-map__loop strong {
  display: block; margin-top: 5px; font-size: var(--c-t-base);
  font-weight: 800; line-height: 1.2; letter-spacing: -.01em;
}
.c-sec { padding-top: var(--c-s8); padding-bottom: var(--c-s8); }
.c-sec--tight { padding-top: var(--c-s6); padding-bottom: var(--c-s6); }

/* ================================================
   4. LE KEYLINE ET LES APLATS — dispositif dominant
   ================================================ */
.c-box { border: var(--c-key) solid var(--text); padding: var(--c-s4); }
.c-box--flush { padding: 0; overflow: hidden; }
.c-plane { padding: var(--c-s5); border: var(--c-key) solid var(--text); }
.c-plane--green      { background: var(--green);      color: var(--navy); }
.c-plane--yellow     { background: var(--yellow);     color: var(--text); }
.c-plane--blue       { background: var(--blue);       color: var(--text); }
.c-plane--blue-light { background: var(--blue-light); color: var(--text); }
.c-plane--red        { background: var(--red);        color: var(--text); }
.c-plane--navy       { background: var(--navy);       color: var(--white); }
.c-plane--white      { background: var(--white);      color: var(--text); }
.c-plane--green h1, .c-plane--green h2, .c-plane--green h3, .c-plane--green h4 { color: var(--navy); }
.c-plane--navy  h1, .c-plane--navy  h2, .c-plane--navy  h3, .c-plane--navy  h4 { color: var(--white); }

/* Encre de chaque aplat — toutes les valeurs sont mesurées :
   jaune 12,21:1 · bleu clair 11,62:1 · bleu 9,33:1 · rouge 5,13:1 ·
   vert + navy 6,63:1 · navy + --on-navy 10,30:1 */
.c-plane--yellow, .c-plane--blue, .c-plane--blue-light, .c-plane--red,
.c-plane--yellow .c-lede, .c-plane--blue .c-lede, .c-plane--blue-light .c-lede, .c-plane--red .c-lede,
.c-plane--yellow .c-body, .c-plane--blue .c-body, .c-plane--blue-light .c-body, .c-plane--red .c-body,
.c-plane--yellow .c-small, .c-plane--blue .c-small, .c-plane--blue-light .c-small, .c-plane--red .c-small,
.c-plane--yellow .c-note, .c-plane--blue .c-note, .c-plane--blue-light .c-note, .c-plane--red .c-note,
.c-plane--yellow .c-quote, .c-plane--blue .c-quote, .c-plane--blue-light .c-quote, .c-plane--red .c-quote,
.c-plane--yellow .c-proof, .c-plane--blue .c-proof, .c-plane--blue-light .c-proof, .c-plane--red .c-proof {
  color: var(--text);
}
.c-plane--green, .c-plane--green .c-lede, .c-plane--green .c-body,
.c-plane--green .c-small, .c-plane--green .c-note, .c-plane--green .c-quote,
.c-plane--green .c-proof, .c-plane--green li { color: var(--navy); }

.c-plane--navy .c-lede, .c-plane--navy .c-body, .c-plane--navy .c-small,
.c-plane--navy .c-note, .c-plane--navy .c-proof, .c-plane--navy li { color: var(--on-navy); }
.c-plane--navy .c-quote { color: var(--white); }
.c-plane--navy .c-proof { border-left-color: rgba(255,255,255,.32); }

/* Un filet noir épais comme séparateur de section */
.c-rule { height: var(--c-key); background: var(--text); border: 0; margin: 0; }

/* ================================================
   5. L'ARC — repris des segments du logo
   ================================================ */
.c-arc { display: block; border: var(--c-key) solid var(--text); background: transparent; }
.c-arc--tl { border-radius: 100% 0 0 0; }
.c-arc--tr { border-radius: 0 100% 0 0; }
.c-arc--br { border-radius: 0 0 100% 0; }
.c-arc--bl { border-radius: 0 0 0 100%; }
.c-arc--green { background: var(--green); }
.c-arc--yellow { background: var(--yellow); }
.c-arc--blue { background: var(--blue); }
.c-arc--blue-light { background: var(--blue-light); }
.c-arc--grey { background: var(--grey); }

/* Bandeau d'arcs — cite la séquence exacte des cinq segments du logo */
.c-strip { display: flex; height: 26px; border: var(--c-key) solid var(--text); overflow: hidden; }
.c-strip i { display: block; }
.c-strip i:nth-child(1) { flex: 38; background: var(--blue); }
.c-strip i:nth-child(2) { flex: 8;  background: var(--grey); }
.c-strip i:nth-child(3) { flex: 22; background: var(--green); }
.c-strip i:nth-child(4) { flex: 24; background: var(--yellow); }
.c-strip i:nth-child(5) { flex: 8;  background: var(--blue-light); }

/* ================================================
   6. TYPOGRAPHIE DE BLOC
   ================================================ */
.c-kicker {
  display: inline-block; font-size: var(--c-t-xs); font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  border: var(--c-key) solid var(--text); padding: 5px 12px; background: var(--white);
  color: var(--text); margin-bottom: var(--c-s3);
}
.c-kicker--green  { background: var(--green);      color: var(--navy); }
.c-kicker--yellow { background: var(--yellow);     color: var(--text); }
.c-kicker--blue   { background: var(--blue);       color: var(--text); }
.c-kicker--red    { background: var(--red);        color: var(--text); }
.c-h1 { font-size: var(--c-t-hero); }
/* Les pages de texte — légal, 404, remerciement — portent un H1 plus sobre.
   Fluide comme le H1 principal, sinon il le dépasserait sous 890 px. */
.c-h1--compact { font-size: clamp(1.5rem, 3.6vw, 2.5rem); }
.c-h2 { font-size: var(--c-t-xl); }
.c-h3 { font-size: var(--c-t-lg); }
.c-h4 { font-size: var(--c-t-md); letter-spacing: -0.02em; }
.c-lede { font-size: var(--c-t-md); line-height: 1.5; font-weight: 600; color: var(--anthracite); }
.c-body { font-size: var(--c-t-base); line-height: 1.65; color: var(--anthracite); }
.c-small { font-size: var(--c-t-sm); line-height: 1.55; color: var(--anthracite); }
.c-note { font-size: var(--c-t-xs); line-height: 1.55; color: var(--gray-mid); }
.c-prose { max-width: var(--c-prose); }
.c-stack > * + * { margin-top: var(--c-s3); }
.c-stack--lg > * + * { margin-top: var(--c-s5); }

/* Chiffre en pastille — reprend l'arc du logo */
.c-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; flex: none;
  border: var(--c-key) solid var(--text); background: var(--green); color: var(--navy);
  font-weight: 800; font-size: var(--c-t-md); font-variant-numeric: tabular-nums;
  border-radius: 100% 0 100% 100%;
}
.c-num--yellow { background: var(--yellow); color: var(--text); }
.c-num--blue   { background: var(--blue);   color: var(--text); }

/* ================================================
   7. BOUTONS — angles vifs, keyline noir, décalage à l'appui
   ================================================ */
.c-btn {
  display: inline-flex; align-items: center; gap: var(--c-s1);
  font-family: var(--c-font); font-weight: 800; font-size: var(--c-t-sm);
  letter-spacing: 0.01em; padding: 15px 26px;
  border: var(--c-key) solid var(--text); background: var(--white); color: var(--text);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: 5px 5px 0 var(--text);
  transition: transform var(--c-ease), box-shadow var(--c-ease), background var(--c-ease);
}
.c-page .c-btn:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--text); text-decoration: none; }
.c-page .c-btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--text); }
.c-page .c-btn--primary { background: var(--green); color: var(--navy); }
.c-page .c-btn--primary:hover { background: var(--green-hover); color: var(--navy); }
.c-page .c-btn--ghost { background: var(--white); color: var(--text); }
.c-page .c-btn--onDark { background: var(--green); color: var(--navy); border-color: var(--white); box-shadow: 5px 5px 0 var(--white); }
.c-page .c-btn--onDark:hover { background: var(--green-hover); box-shadow: 2px 2px 0 var(--white); }
.c-page .c-btn--onColor { background: var(--white); color: var(--text); }

.c-actions { display: flex; align-items: center; gap: var(--c-s3); flex-wrap: wrap; }

.c-page .c-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 800; font-size: var(--c-t-sm);
  border-bottom: var(--c-key) solid var(--green); padding-bottom: 2px; color: var(--text);
  min-height: 44px;
}
.c-page .c-link::after { content: '→'; transition: transform var(--c-ease); }
.c-page .c-link:hover::after { transform: translateX(5px); }
.c-plane--navy .c-link, .c-plane--navy a { color: var(--white); }

/* ================================================
   8. LISTES ET GROUPES
   ================================================ */
.c-items { display: flex; flex-direction: column; }
.c-item { display: flex; gap: var(--c-s3); align-items: flex-start;
  padding: var(--c-s4) 0; border-bottom: var(--c-key) solid var(--text); }
.c-item:first-child { border-top: var(--c-key) solid var(--text); }
/* .c-page p et .c-page ul posent margin:0 avec une spécificité (0,1,1) que
   .c-item__body > * + * (0,1,0) ne franchit pas : la règle était écrite mais
   ne s'appliquait qu'au lien de pied. Préfixée, elle vaut pour tout le corps. */
.c-item__body { min-width: 0; }
.c-page .c-item__body > * + * { margin-top: var(--c-s2); }

/* Cartes de capacité — même vocabulaire que .c-item (pastille, titre, chapô,
   lien), mais posé en grille au lieu d'une pile. La grille est celle du site :
   <ul class="c-mod"> et des <li class="c-sp4">, donc 3 par ligne, 2 sous 1024 px
   et 1 sous 768 px sans une règle de plus. */
.c-page .c-card {
  display: flex; flex-direction: column; gap: var(--c-s2);
  height: 100%; padding: var(--c-s4);
  border: var(--c-key) solid var(--text); background: var(--white); color: var(--text);
}
.c-card .c-h4 { line-height: 1.15; }
.c-card .c-small { flex: 1; }   /* pousse le lien en pied de carte, toutes alignées */
.c-card__go {
  align-self: flex-start; margin-top: var(--c-s1);
  font-size: var(--c-t-sm); font-weight: 800;
  border-bottom: var(--c-key) solid var(--green); padding-bottom: 2px;
}
.c-card__go::after { content: '\2192'; display: inline-block; margin-left: 6px;
  transition: transform var(--c-ease); }

/* Relief au survol — UN seul comportement pour toutes les cartes de la page :
   .c-card (fonctionnalités), .c-plane (la tension), .c-box (impact business),
   .c-plan (les parcours). Il n'est posé que sur des blocs réellement cliquables :
   un bloc inerte qui se soulève promet un clic que rien ne tient. */
/* Devenus liens, ces blocs passent en colonne : le libellé se cale en pied,
   comme .c-plan__cta le fait déjà pour les parcours. */
a.c-box, a.c-plane { display: flex; flex-direction: column; }
.c-page .c-lift { transition: transform var(--c-ease), box-shadow var(--c-ease); }
.c-page .c-lift:hover, .c-page .c-lift:focus-visible {
  transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--text); text-decoration: none;
}
/* Le plan mis en avant porte déjà une ombre de 8 px : au survol elle grandit
   du même décalage que la carte, elle ne rétrécit pas. */
.c-page .c-plan--featured.c-lift:hover, .c-page .c-plan--featured.c-lift:focus-visible {
  box-shadow: 11px 11px 0 var(--text);
}
.c-page .c-lift:hover .c-card__go::after,
.c-page .c-lift:focus-visible .c-card__go::after { transform: translateX(5px); }

/* La sixième carte n'est pas une capacité mais la porte d'entrée : aplat jaune
   (texte --text, 12,21:1) et pastille blanche au lieu d'un numéro. */
.c-page .c-card--yellow     { background: var(--yellow);     color: var(--text); }
.c-page .c-card--green      { background: var(--green);      color: var(--navy); }
.c-page .c-card--blue-light { background: var(--blue-light); color: var(--text); }
.c-page .c-card--navy       { background: var(--navy);       color: var(--white); }
/* Sur un aplat, la pastille repasse en réserve blanche : le vert par défaut
   disparaîtrait sur le vert et perdrait 1,9:1 sur le navy. */
.c-card--yellow .c-num, .c-card--green .c-num,
.c-card--blue-light .c-num, .c-card--navy .c-num { background: var(--white); color: var(--text); }
/* Encre des cartes en aplat — mêmes mesures que les plans (section 4) :
   jaune 12,21:1 · bleu clair 11,62:1 · vert + navy 6,63:1 · navy + --on-navy 10,30:1 */
.c-card--yellow h3, .c-card--blue-light h3 { color: var(--text); }
.c-card--green h3 { color: var(--navy); }
.c-card--navy  h3 { color: var(--white); }
.c-card--yellow .c-small, .c-card--blue-light .c-small { color: var(--text); }
.c-card--green .c-small { color: var(--navy); }
.c-card--navy  .c-small { color: var(--on-navy); }
/* Variante en bandeau — la même carte, dépliée sur toute la largeur : pastille,
   corps, libellé sur une seule ligne. Sous 768 px elle revient en colonne. */
.c-page .c-card--row { flex-direction: row; align-items: flex-start; gap: var(--c-s4); }
.c-card--row .c-card__body {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--c-s2);
}
.c-card--row .c-small { flex: none; }
.c-card--row .c-card__go { align-self: center; margin-top: 0; white-space: nowrap; }
@media (max-width: 768px) {
  .c-page .c-card--row { flex-direction: column; gap: var(--c-s2); }
  .c-card--row .c-card__go { align-self: flex-start; }
}

/* Le filet vert du libellé ne tient pas 3:1 sur le jaune (2,05:1) : sur tout
   aplat de marque il repasse en noir. */
.c-page .c-card--yellow .c-card__go,
.c-page .c-plane .c-card__go,
.c-page .c-plan--featured .c-card__go { border-bottom-color: var(--text); }

/* Le retrait n'est plus un nombre en dur : il se déduit du côté de la pastille
   et du blanc qui la sépare du texte, ce qui permet d'ouvrir le second sans
   déplacer la première. Les valeurs par défaut reconduisent les 30 px. */
.c-checks { display: flex; flex-direction: column; gap: var(--c-s2);
  --check-mark: 14px; --check-gap: 16px; }
.c-checks--airy { --check-gap: var(--c-s3); gap: var(--c-s3); }
.c-checks li { position: relative; font-size: var(--c-t-sm); line-height: 1.55;
  padding-left: calc(var(--check-mark) + var(--check-gap)); }
.c-checks li::before {
  content: ''; position: absolute; left: 0; top: 4px;
  width: var(--check-mark); height: var(--check-mark);
  border: var(--c-key) solid currentColor; border-radius: 100% 0 100% 100%; background: var(--green);
}
.c-plane--green .c-checks li::before { background: var(--navy); }
.c-plane--navy  .c-checks li::before { background: var(--green); }

.c-tags { display: flex; flex-wrap: wrap; gap: var(--c-s1); }
.c-tags li { font-size: var(--c-t-xs); font-weight: 700;
  border: 2px solid var(--text); padding: 5px 10px; background: var(--white); }

/* ================================================
   9. SCHÉMA — la couche diagrammatique des pages produit
   ================================================ */
.c-schema { border: var(--c-key) solid var(--text); background: var(--gray-bg); }
.c-schema__head { display: flex; justify-content: space-between; align-items: center; gap: var(--c-s2);
  padding: var(--c-s2) var(--c-s3); border-bottom: var(--c-key) solid var(--text); background: var(--white); }
.c-schema__t { font-size: var(--c-t-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.c-schema__scroll { overflow-x: auto; padding: var(--c-s4); }
.c-schema svg { display: block; min-width: 720px; width: 100%; height: auto; }
.c-schema__legend { display: flex; flex-wrap: wrap; gap: var(--c-s3);
  padding: var(--c-s2) var(--c-s3); border-top: var(--c-key) solid var(--text); background: var(--white); }
.c-schema__legend span { display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--c-t-xs); font-weight: 700; }
.c-schema__legend i { width: 14px; height: 14px; border: 2px solid var(--text); display: block; }


/* ================================================
   9 ter. RETOUR D'EXPÉRIENCE — la fiche de preuve
   Colonne de chiffres sur aplat de marque, corps sur blanc. Le registre
   éditorial impose une preuve principale par cas : la fiche porte le KPI et
   l'apprentissage, le cas complet reste sur sa page canonique.
   ================================================ */
.c-rex { display: grid; grid-template-columns: 300px 1fr;
  border: var(--c-key) solid var(--text); background: var(--white); }
.c-rex__fig { display: flex; flex-direction: column; gap: var(--c-s3);
  padding: var(--c-s4); border-right: var(--c-key) solid var(--text); }
.c-rex__fig--yellow { background: var(--yellow);     color: var(--text); }
.c-rex__fig--blue   { background: var(--blue-light); color: var(--text); }
.c-rex__fig--green  { background: var(--green);      color: var(--navy); }
.c-rex__id { align-self: flex-start; font-size: var(--c-t-xs); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  border: 2px solid currentColor; padding: 3px 9px; }
.c-rex__n strong { display: block; font-size: var(--c-t-xl); font-weight: 800;
  line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.c-rex__n span { display: block; margin-top: 5px; font-size: var(--c-t-xs);
  font-weight: 700; line-height: 1.35; }
.c-rex__body { display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--c-s2); padding: var(--c-s4); }
.c-rex__body .c-link { margin-top: var(--c-s1); }
@media (max-width: 768px) {
  .c-rex { grid-template-columns: 1fr; }
  .c-rex__fig { border-right: 0; border-bottom: var(--c-key) solid var(--text); }
}

.c-execution-map { display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  border: var(--c-key) solid var(--text); }
.c-execution-map > div { min-height: 180px; padding: var(--c-s3); display: flex;
  flex-direction: column; justify-content: space-between; border-right: var(--c-key) solid var(--text); }
.c-execution-map > div:last-child { border-right: 0; }
.c-execution-map > div:nth-child(1) { background: var(--yellow); }
.c-execution-map > div:nth-child(2) { background: var(--green); }
.c-execution-map > div:nth-child(3) { background: var(--blue-light); }
.c-execution-map > div:nth-child(4) { background: var(--blue); }
.c-execution-map span { font-size: var(--c-t-xs); font-weight: 800; text-transform: uppercase; }
.c-execution-map strong { font-size: var(--c-t-md); line-height: 1.2; }
.c-table--wide { min-width: 64rem; }

/* ================================================
   10. AVANT / APRÈS — deux aplats opposés
   ================================================ */
.c-ba { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--c-s3); }
.c-ba__c ul { display: flex; flex-direction: column; gap: var(--c-s2); margin-top: var(--c-s3); }
.c-ba__c li { position: relative; padding-left: 26px; font-size: var(--c-t-sm); line-height: 1.55; }
.c-ba__c li::before { position: absolute; left: 0; font-weight: 800; }
.c-ba__c--before li::before { content: '\2715'; }
.c-ba__c--after  li::before { content: '\2713'; }

/* ================================================
   11. PLANS, TABLEAU, ACCORDÉON, FORMULAIRE
   ================================================ */
.c-plans { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--c-s3); }
.c-plan { display: flex; flex-direction: column; gap: var(--c-s3);
  border: var(--c-key) solid var(--text); padding: var(--c-s4); background: var(--white); }
.c-plan--featured { background: var(--yellow); box-shadow: 8px 8px 0 var(--text); }
.c-plan__price { font-size: var(--c-t-xl); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.c-plan__cta { margin-top: auto; }

.c-tablewrap { overflow-x: auto; border: var(--c-key) solid var(--text); }
.c-table { width: 100%; border-collapse: collapse; font-size: var(--c-t-sm); min-width: 34rem; }
.c-table th, .c-table td { text-align: left; padding: var(--c-s2) var(--c-s3);
  border-bottom: 2px solid var(--text); }
.c-table thead th { background: var(--text); color: var(--white);
  font-size: var(--c-t-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.c-table thead th.is-caiac { background: var(--green); color: var(--navy); }
/* Les colonnes mises en regard portent l'aplat jaune (--text dessus : 12,21:1),
   la colonne CAIAC garde le vert : l'œil sépare d'emblée les deux points de
   comparaison de la réponse. */
.c-table thead th.is-alt { background: var(--yellow); color: var(--text); }

/* Comparatif dense — huit critères en quatre colonnes. Les cellules portent
   des paragraphes : elles s'alignent en tête, pas au centre, et les colonnes
   sont réglées à la main pour que le critère reste étroit. Deux aplats jaunes
   voisins ont besoin d'un filet pour ne pas se souder : la grille verticale
   sert aussi à lire une ligne de bout en bout. */
.c-table--compare { table-layout: fixed; min-width: 60rem; }
.c-table--compare th, .c-table--compare td { vertical-align: top; line-height: 1.55; }
.c-table--compare thead th:first-child { width: 16%; }
.c-table--compare thead th:not(:first-child) { width: 28%; }
.c-table--compare tr > * + * { border-left: 2px solid var(--text); }
.c-table tbody tr:last-child td, .c-table tbody tr:last-child th { border-bottom: 0; }
.c-table th[scope="row"] { font-weight: 800; }

.c-faq { border-top: var(--c-key) solid var(--text); }
.c-faq__i { border-bottom: var(--c-key) solid var(--text); }
.c-faq__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--c-s3);
  background: none; border: 0; padding: var(--c-s3) 0; cursor: pointer; text-align: left;
  font-family: var(--c-font); font-size: var(--c-t-md); font-weight: 800; color: var(--text); }
.c-faq__q::after { content: ''; width: 18px; height: 18px; flex: none;
  border: var(--c-key) solid var(--text); background: var(--yellow);
  border-radius: 100% 0 100% 100%; transition: transform var(--c-ease); }
.c-faq__q[aria-expanded="true"]::after { background: var(--green); transform: rotate(180deg); }
.c-faq__a { max-height: 0; overflow: hidden; transition: max-height var(--c-ease); }
/* Le plafond doit couvrir la réponse la plus longue à 360 px, sinon elle est
   tronquée à l'ouverture. */
.c-faq__a.is-open { max-height: 1100px; }
.c-faq__a > div { padding-bottom: var(--c-s3); max-width: var(--c-prose); }
/* .c-page p pose margin:0 en (0,1,1) : l'interligne des réponses doit passer
   devant, sinon les paragraphes se collent. */
.c-page .c-faq__a > div > * + * { margin-top: var(--c-s2); }

.c-form { display: flex; flex-direction: column; gap: var(--c-s3); }
.c-field { display: flex; flex-direction: column; gap: 6px; }
.c-field label { font-size: var(--c-t-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.c-field input, .c-field select, .c-field textarea {
  font-family: var(--c-font); font-size: var(--c-t-sm); color: var(--text);
  background: var(--white); border: var(--c-key) solid var(--text); padding: 11px 13px; width: 100%;
  transition: box-shadow var(--c-ease);
}
.c-field input:focus, .c-field select:focus, .c-field textarea:focus {
  outline: none; box-shadow: 4px 4px 0 var(--green);
}
.c-field textarea { resize: vertical; min-height: 100px; }
.c-field--check { flex-direction: row; align-items: flex-start; gap: var(--c-s2); }
.c-field--check input { width: auto; }
.c-field--check label { text-transform: none; letter-spacing: 0; font-weight: 400;
  font-size: var(--c-t-xs); line-height: 1.55; color: var(--anthracite); }

/* ================================================
   12. EN-TÊTE ET PIED
   ================================================ */
.c-nav { border-bottom: var(--c-key) solid var(--text); background: var(--white);
  position: sticky; top: 0; z-index: 100; }
.c-nav__in { max-width: var(--c-max); margin-left: auto; margin-right: auto;
  padding: var(--c-s2) var(--c-s3); display: flex; align-items: center; justify-content: space-between; gap: var(--c-s3); }
.c-nav__logo { display: flex; align-items: center; gap: var(--c-s1); font-weight: 800;
  font-size: var(--c-t-md); letter-spacing: -0.02em; min-height: 44px; }
.c-nav__logo img { height: 32px; width: auto; }
.c-nav__links { display: flex; gap: var(--c-s3); }
.c-nav__links a { font-size: var(--c-t-sm); font-weight: 700; padding: 10px 0;
  min-height: 44px; display: inline-flex; align-items: center;
  border-bottom: var(--c-key) solid transparent; }
.c-nav__links a:hover, .c-nav__links a[aria-current] { border-bottom-color: var(--green); }
.c-nav__right { display: flex; align-items: center; gap: var(--c-s2); }
.c-lang { display: flex; }
.c-lang a { font-size: var(--c-t-xs); font-weight: 800; padding: 12px 7px;
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center;
  justify-content: center; color: var(--gray-mid); }
.c-lang a[aria-current] { color: var(--text); }
.c-burger { display: none; background: var(--white); border: var(--c-key) solid var(--text);
  padding: 9px; cursor: pointer; min-width: 44px; min-height: 44px; }
.c-burger span { display: block; width: 20px; height: 3px; background: var(--text); }
.c-burger span + span { margin-top: 4px; }

.c-foot { background: var(--navy); color: var(--on-navy); border-top: var(--c-key) solid var(--text); }
.c-foot__in { padding-top: var(--c-s7); padding-bottom: var(--c-s5); }
.c-foot h4 { font-size: var(--c-t-xs); font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--white); margin-bottom: var(--c-s2); }
.c-foot ul { display: flex; flex-direction: column; gap: 6px; }
.c-foot a { font-size: var(--c-t-sm); color: var(--on-navy); min-height: 44px;
  display: inline-flex; align-items: center; }
.c-foot a:hover { color: var(--green); }
.c-foot__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--c-s2);
  margin-top: var(--c-s6); padding-top: var(--c-s3);
  border-top: 2px solid rgba(255,255,255,0.24); font-size: var(--c-t-xs); }

/* ================================================
   13. UTILITAIRES
   ================================================ */
.c-crumbs { font-size: var(--c-t-xs); font-weight: 700; margin-bottom: var(--c-s3); color: var(--gray-mid); }
.c-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; }
.c-crumbs li + li::before { content: '/'; margin-right: 6px; }
.c-crumbs [aria-current] { color: var(--text); }

.c-todo { display: inline-block; font-size: var(--c-t-xs); font-weight: 800;
  background: var(--yellow); color: var(--text); border: 2px solid var(--text); padding: 1px 7px; }
.c-page[data-mode="production"] .c-todo { display: none; }

.c-mesh__l { display: block; font-size: var(--c-t-xs); font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--c-s3); }
.c-mesh__links { display: flex; flex-wrap: wrap; gap: var(--c-s2); }
.c-mesh__links a { font-size: var(--c-t-sm); font-weight: 700; min-height: 44px;
  display: inline-flex; align-items: center;
  border: 2px solid var(--text); padding: 7px 13px; background: var(--white); }
.c-mesh__links a:hover { background: var(--yellow); }

.c-proof { border-left: var(--c-key) solid var(--text); padding-left: var(--c-s2);
  font-size: var(--c-t-xs); color: var(--anthracite); line-height: 1.55; }
.c-src { font-size: var(--c-t-xs); font-style: italic; color: var(--gray-mid); }
.c-quote { font-size: var(--c-t-lg); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }

.c-skip { position: absolute; left: -9999px; background: var(--green); color: var(--navy);
  border: var(--c-key) solid var(--text); padding: 12px 20px; font-weight: 800; z-index: 200; }
.c-skip:focus { left: 0; top: 0; }
.c-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Préfixées : .c-page p pose margin:0 en (0,1,1) et l'emportait sur
   .c-longread > * + * (0,1,0) — l'interligne des articles était déclaré mais
   ne s'appliquait qu'aux titres. Les trois règles montent ensemble pour que
   les titres gardent leur avance sur les paragraphes. */
.c-page .c-longread > * + * { margin-top: var(--c-s3); }
.c-longread > h2 { font-size: clamp(1.1875rem, 2.6vw, 1.75rem); scroll-margin-top: 90px; }
.c-longread > h3 { font-size: clamp(1rem, 1.9vw, 1.25rem); }
/* Le retrait des titres ne vaut que pour les titres de l'article : en sélecteur
   de descendance il s'ajoutait au padding des cartes posées dans le corps. */
.c-page .c-longread > h2 { margin-top: var(--c-s6); }
.c-page .c-longread > h3 { margin-top: var(--c-s4); }
/* La citation reste collée au paragraphe qu'elle atteste. */
.c-page .c-longread > .c-cite { margin-top: var(--c-s2); }
.c-longread p, .c-longread li { color: var(--anthracite); line-height: 1.75; }
.c-longread ul { display: flex; flex-direction: column; gap: var(--c-s2); }
.c-longread ul li { position: relative; padding-left: 26px; }
.c-longread ul li::before { content: ''; position: absolute; left: 0; top: 8px;
  width: 12px; height: 12px; background: var(--green); border: 2px solid var(--text);
  border-radius: 100% 0 100% 100%; }

/* ================================================
   13 bis. LES TROIS ÉTAPES — planches dépliables
   ================================================ */
/* Une étape = une seule planche, divisée par le keyline plutôt que par des
   marges : bandeau de titre coloré (plan-chiffre blanc en réserve), puis deux
   cellules inégales — la capture d'écran sur fond gris, le texte court —, puis
   la tirette « En savoir plus ». Le texte long se déplie DANS la planche : la
   composition ne se casse jamais.
   L'alternance gauche-droite d'une planche à l'autre donne à la page le rythme
   vertical qu'une pile de cadres identiques ne produit pas. */
.c-steps { display: flex; flex-direction: column; gap: var(--c-s5); }
.c-step  { border: var(--c-key) solid var(--text); background: var(--white); }

/* --- Bandeau de titre --- */
.c-step__head { display: flex; align-items: stretch;
  border-bottom: var(--c-key) solid var(--text); }
.c-step__num {
  flex: none; display: grid; place-items: center; width: 92px;
  background: var(--white); color: var(--text);
  font-size: var(--c-t-lg); font-weight: 800; line-height: 1;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
  border-right: var(--c-key) solid var(--text);
}
.c-step__title { flex: 1; min-width: 0; display: flex; align-items: center;
  padding: var(--c-s3) var(--c-s4); }
.c-step__title .c-h3 { line-height: 1.15; }

/* Encre de chaque bandeau — valeurs mesurées, cf. section 5 :
   jaune 12,21:1 · bleu clair 11,64:1 · vert/navy 6,63:1 */
.c-step--yellow .c-step__head { background: var(--yellow);     color: var(--text); }
.c-step--blue   .c-step__head { background: var(--blue-light);  color: var(--text); }
.c-step--green  .c-step__head { background: var(--green);       color: var(--navy); }

/* --- Corps : capture + texte court --- */
.c-step__body { display: grid; grid-template-columns: 7fr 5fr; }
.c-step__fig { margin: 0; display: flex; align-items: center;
  padding: var(--c-s3); background: var(--gray-bg);
  border-right: var(--c-key) solid var(--text); }
/* Les captures n'ont pas le même format (2:1, 1,46:1) : sans plafond, la plus
   haute creuse un vide dans la colonne de texte en regard. Bornée, elle se
   centre sur le fond gris — un cartouche, pas un trou. */
.c-step__fig img { display: block; margin-inline: auto;
  width: auto; height: auto; max-width: 100%; max-height: 420px;
  border: 2px solid var(--text); background: var(--white); }
.c-step__say { display: flex; flex-direction: column; justify-content: center;
  gap: var(--c-s3); padding: var(--c-s4); }

/* L'alternance : la planche entière bascule — plan-chiffre et capture à droite,
   titre et texte à gauche. Les filets suivent le basculement. */
.c-step--flip .c-step__head { flex-direction: row-reverse; }
.c-step--flip .c-step__num { border-right: 0; border-left: var(--c-key) solid var(--text); }
.c-step--flip .c-step__body { grid-template-columns: 5fr 7fr; }
.c-step--flip .c-step__fig { order: 2;
  border-right: 0; border-left: var(--c-key) solid var(--text); }

/* --- La tirette : <details>/<summary>, donc dépliable sans JavaScript --- */
.c-more { border-top: var(--c-key) solid var(--text); }
.c-more__btn {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--c-s2); padding: var(--c-s3) var(--c-s4);
  font-size: var(--c-t-sm); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em;
  cursor: pointer; list-style: none;
  transition: background var(--c-ease);
}
.c-more__btn::-webkit-details-marker { display: none; }
.c-more__btn:focus-visible { outline: var(--c-key) solid var(--text); outline-offset: -6px; }
/* Au survol, la tirette prend la couleur de son étape : le lien entre le
   bandeau du haut et la commande du bas devient visible. */
.c-step--yellow .c-more__btn:hover, .c-step--yellow .c-more[open] .c-more__btn { background: var(--yellow); }
.c-step--blue   .c-more__btn:hover, .c-step--blue   .c-more[open] .c-more__btn { background: var(--blue-light); }
.c-step--green  .c-more__btn:hover, .c-step--green  .c-more[open] .c-more__btn { background: var(--green); color: var(--navy); }

.c-more__sign { flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; border: 2px solid currentColor;
  font-size: var(--c-t-md); font-weight: 800; line-height: 1; }
.c-more__sign::before { content: '+'; }
.c-more[open] .c-more__sign::before { content: '\2212'; }
.c-more__lbl--less { display: none; }
.c-more[open] .c-more__lbl--more { display: none; }
.c-more[open] .c-more__lbl--less { display: inline; }

.c-more__panel { padding: var(--c-s5) var(--c-s4);
  border-top: var(--c-key) solid var(--text); }
/* .c-stack ne peut pas servir ici : .c-page p (0,1,1) l'emporte sur
   .c-stack > * + * (0,1,0) et écrase l'interligne. La règle est donc portée
   par une classe propre, assez spécifique pour passer devant. */
.c-page .c-step__prose { max-width: 62ch; }
.c-page .c-step__prose > * + * { margin-top: var(--c-s3); }
/* La chute de chaque texte long, sortie du flux et posée en aplat : elle donne
   au dépli un point d'entrée au lieu d'un mur de paragraphes. */
.c-step__pull { padding: var(--c-s3); border: var(--c-key) solid var(--text);
  font-size: var(--c-t-md); font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; }
.c-step--yellow .c-step__pull { background: var(--yellow);     color: var(--text); }
.c-step--blue   .c-step__pull { background: var(--blue-light); color: var(--text); }
.c-step--green  .c-step__pull { background: var(--green);      color: var(--navy); }

/* ================================================
   13 ter. LA CHAÎNE — méthode, workflows, exécution
   ================================================ */
/* Cinq cellules dans un seul cadre, séparées par le keyline : la méthode entre
   à gauche, le contrôle sort à droite. La flèche est une pastille posée à
   cheval sur le filet — le passage d'une cellule à l'autre se voit. */
.c-flow { display: grid; grid-template-columns: repeat(5, minmax(0,1fr));
  border: var(--c-key) solid var(--text); }
.c-flow > li { position: relative; display: flex; flex-direction: column;
  justify-content: space-between; gap: var(--c-s3);
  min-height: 168px; padding: var(--c-s3);
  border-right: var(--c-key) solid var(--text); }
.c-flow > li:last-child { border-right: 0; }
.c-flow__n { font-size: var(--c-t-xs); font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; }
.c-flow__b { display: flex; flex-direction: column; gap: 6px; }
.c-flow__t { font-size: var(--c-t-md); font-weight: 800; line-height: 1.15;
  letter-spacing: -0.02em; }
.c-flow__d { font-size: var(--c-t-xs); line-height: 1.45; }
/* Sept temps au lieu de cinq : la boucle d'amélioration. Les cellules se
   resserrent, le verbe reste lisible. */
.c-flow--7 { grid-template-columns: repeat(7, minmax(0,1fr)); }
.c-flow--7 > li { min-height: 130px; padding: var(--c-s2); }
.c-flow--7 .c-flow__t { font-size: var(--c-t-base); }
/* Le retour de boucle : un bandeau qui referme la chaîne au lieu d'une flèche
   qui devrait contourner sept cellules. */
.c-flow--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.c-flow--cycle { border-bottom: 0; }
.c-loopback { display: flex; align-items: center; gap: var(--c-s2);
  padding: var(--c-s2) var(--c-s3);
  border: var(--c-key) solid var(--text); background: var(--gray-bg);
  font-size: var(--c-t-sm); font-weight: 800; }
.c-loopback::before { content: '\21BA'; font-size: var(--c-t-lg); line-height: 1; }
/* Même bandeau, mais pour une conséquence linéaire et non pour une boucle. */
.c-loopback--out::before { content: '\2193'; }
/* Encres mesurées, cf. section 4 */
.c-flow--yellow     { background: var(--yellow);     color: var(--text); }
.c-flow--navy       { background: var(--navy);       color: var(--white); }
.c-flow--blue-light { background: var(--blue-light); color: var(--text); }
.c-flow--green      { background: var(--green);      color: var(--navy); }
.c-flow--white      { background: var(--white);      color: var(--text); }
.c-flow > li:not(:last-child)::after {
  content: '\2192'; position: absolute; z-index: 1;
  right: calc(-13px - var(--c-key) / 2); top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 26px; height: 26px;
  background: var(--white); color: var(--text); border: 2px solid var(--text);
  font-size: var(--c-t-xs); font-weight: 800; line-height: 1;
}

/* Version dressée : la chaîne se lit de haut en bas, ce qui permet d'en poser
   deux côte à côte pour les comparer. */
.c-flow--stack { grid-template-columns: 1fr; }
.c-flow--stack > li { min-height: 0; flex-direction: row; align-items: center;
  justify-content: flex-start; gap: var(--c-s3); padding: var(--c-s3);
  border-right: 0; border-bottom: var(--c-key) solid var(--text); }
.c-flow--stack > li:last-child { border-bottom: 0; }
.c-flow--stack .c-flow__n { flex: none; width: 3ch; }
.c-flow--stack .c-flow__t { font-size: var(--c-t-base); }
.c-flow--stack > li:not(:last-child)::after { content: '\2193';
  right: var(--c-s3); left: auto; top: auto;
  bottom: calc(-13px - var(--c-key) / 2); transform: none; }

/* ================================================
   13 quater. APPAREIL DE PREUVE — statistiques sourcées, niveaux de discours
   ================================================ */
/* Un chiffre n'a de valeur que s'il porte son périmètre et sa source. Le bloc
   les tient ensemble : la mesure, ce qu'elle couvre, d'où elle vient. */
.c-stat { display: flex; flex-direction: column; gap: var(--c-s2); height: 100%;
  padding: var(--c-s4); border: var(--c-key) solid var(--text); background: var(--white); }
.c-stat__n { font-size: var(--c-t-xl); font-weight: 800; line-height: 1;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.c-stat__l { flex: 1; font-size: var(--c-t-sm); font-weight: 700; line-height: 1.45; }
.c-stat__s { font-size: var(--c-t-xs); line-height: 1.45; font-style: italic;
  color: var(--gray-mid); }
.c-page .c-stat__s a { color: inherit; border-bottom: 1px solid currentColor; }
.c-page .c-stat__s a:hover { color: var(--text); }
/* Sur un aplat sombre, le gris de la source tombe sous le seuil : elle reprend
   l'encre du plan. */
.c-plane--navy .c-stat { background: transparent; border-color: var(--white); }
.c-plane--navy .c-stat__n { color: var(--green); }
.c-plane--navy .c-stat__l { color: var(--white); }
.c-plane--navy .c-stat__s, .c-plane--navy .c-stat__s a { color: var(--on-navy); }

/* Trois niveaux de discours, jamais confondus : ce que les études montrent,
   ce que nous en déduisons, ce que nous en concluons. */
.c-levels { border: var(--c-key) solid var(--text); background: var(--white); }
.c-levels > li { display: grid; grid-template-columns: 210px 1fr;
  border-bottom: var(--c-key) solid var(--text); }
.c-levels > li:last-child { border-bottom: 0; }
.c-levels__k { padding: var(--c-s3); border-right: var(--c-key) solid var(--text);
  font-size: var(--c-t-xs); font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; line-height: 1.3; }
.c-levels__v { padding: var(--c-s3); font-size: var(--c-t-base); line-height: 1.65;
  color: var(--anthracite); }
.c-levels > li:nth-child(1) .c-levels__k { background: var(--blue-light); color: var(--text); }
.c-levels > li:nth-child(2) .c-levels__k { background: var(--yellow);     color: var(--text); }
.c-levels > li:nth-child(3) .c-levels__k { background: var(--green);      color: var(--navy); }

/* Citation en ligne — le composant unique de source des articles : émetteur,
   titre, année, lien. Un filet vert la rattache au paragraphe qu'elle atteste
   sans l'interrompre. */
.c-cite { margin-top: var(--c-s2); padding-left: var(--c-s2);
  border-left: 2px solid var(--green);
  font-size: var(--c-t-xs); line-height: 1.55; color: var(--gray-mid); }
.c-cite__o { font-weight: 800; color: var(--text);
  letter-spacing: 0.06em; text-transform: uppercase; }
.c-page .c-cite a { color: var(--anthracite); border-bottom: 1px solid currentColor;
  white-space: nowrap; }
.c-page .c-cite a:hover { color: var(--text); }
/* Un composant posé dans un article garde sa mise en page : la règle de liste
   du longread — colonne flex + pastille verte — ne doit pas la reprendre. */
.c-longread ul.c-mod { display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--c-s3); }
.c-longread ul.c-duo { display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--c-s3); }
.c-longread ul.c-trio { display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--c-s3); }
/* Dans une colonne d'article la mesure est déjà réduite : les cartes resserrent
   leur marge intérieure, sinon un titre d'un seul mot se coupe en deux — les
   titres (ligne 69) sont en overflow-wrap: break-word. */
.c-page .c-longread .c-card, .c-page .c-longread .c-box { padding: var(--c-s3); }
.c-longread ul.c-tags { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--c-s1); }
.c-longread ul.c-mod > li, .c-longread ul.c-duo > li, .c-longread ul.c-trio > li,
.c-longread ul.c-tags > li { padding-left: 0; }
.c-longread ul.c-mod > li::before, .c-longread ul.c-duo > li::before,
.c-longread ul.c-trio > li::before, .c-longread ul.c-tags > li::before { content: none; }

.c-longread .c-cite { margin-bottom: var(--c-s3); }
.c-plane--navy .c-cite { border-left-color: var(--green); color: var(--on-navy); }
.c-plane--navy .c-cite__o { color: var(--white); }
.c-page .c-plane--navy .c-cite a { color: var(--on-navy); }

/* Bibliographie de pied de page : dense, discrète, jamais dans le corps. */
.c-refs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--c-s2) var(--c-s5); }
.c-refs li { font-size: var(--c-t-xs); line-height: 1.5; color: var(--gray-mid);
  padding-left: var(--c-s3); text-indent: calc(-1 * var(--c-s3)); }
.c-page .c-refs a { color: var(--anthracite); }

/* ================================================
   13 quinquies. CAS — scorecard et note de méthode
   ================================================ */
/* Trois mesures, pas dix : la bande donne le résultat avant la démonstration.
   Un seul cadre, divisé par le keyline. */
.c-score { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  border: var(--c-key) solid var(--text); }
.c-score > li { padding: var(--c-s4);
  border-right: var(--c-key) solid var(--text); }
.c-score > li:last-child { border-right: 0; }
.c-score > li:nth-child(1) { background: var(--yellow);     color: var(--text); }
.c-score > li:nth-child(2) { background: var(--blue-light); color: var(--text); }
.c-score > li:nth-child(3) { background: var(--green);      color: var(--navy); }
.c-score__n { display: block; font-size: var(--c-t-xl); font-weight: 800;
  line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.c-score__l { display: block; margin-top: var(--c-s2);
  font-size: var(--c-t-sm); font-weight: 700; line-height: 1.4; }

/* La note de méthode se replie : présente, vérifiable, jamais encombrante.
   .c-more est conçu pour vivre dans une planche ; isolé, il lui faut son cadre. */
.c-more--plain { border: var(--c-key) solid var(--text); background: var(--white); }
.c-page .c-more--plain .c-more__btn:hover,
.c-page .c-more--plain[open] .c-more__btn { background: var(--gray-bg); }
.c-more--plain .c-more__panel > * + * { margin-top: var(--c-s2); }

/* ================================================
   14. RESPONSIVE — 360 / 768 / 1280
   ================================================ */
@media (max-width: 1024px) {
  .c-sp3, .c-sp4, .c-sp5 { grid-column: span 6; }
  .c-sp7, .c-sp8, .c-sp9 { grid-column: span 12; }
  /* Cinq colonnes ne tiennent plus : la chaîne se redresse, la flèche bascule
     au milieu du filet horizontal. */
  .c-flow { grid-template-columns: 1fr; }
  .c-flow > li { min-height: 0; flex-direction: row; align-items: center;
    justify-content: flex-start; gap: var(--c-s3);
    border-right: 0; border-bottom: var(--c-key) solid var(--text); }
  .c-flow > li:last-child { border-bottom: 0; }
  .c-flow__n { flex: none; width: 12ch; }
  .c-flow > li:not(:last-child)::after { content: '\2193';
    right: var(--c-s3); left: auto; top: auto;
    bottom: calc(-13px - var(--c-key) / 2); transform: none; }
  .c-flow--7 { grid-template-columns: 1fr; }
  .c-flow--7 > li { min-height: 0; padding: var(--c-s3); }
  .c-flow--4 { grid-template-columns: 1fr; }
  .c-levels > li { grid-template-columns: 1fr; }
  .c-levels__k { border-right: 0; border-bottom: var(--c-key) solid var(--text); }
  .c-refs { grid-template-columns: 1fr; }
  .c-score { grid-template-columns: 1fr; }
  .c-score > li { border-right: 0; border-bottom: var(--c-key) solid var(--text); }
  .c-score > li:last-child { border-bottom: 0; }
  .c-longread ul.c-duo, .c-longread ul.c-trio { grid-template-columns: 1fr; }
  /* Sous 1024 px la capture n'a plus la mesure pour tenir en colonne : la
     planche passe en pile et l'alternance ne joue plus que sur le bandeau. */
  .c-step__body, .c-step--flip .c-step__body { grid-template-columns: 1fr; }
  .c-step__fig, .c-step--flip .c-step__fig { order: 0;
    border-right: 0; border-left: 0; border-bottom: var(--c-key) solid var(--text); }
}
@media (max-width: 768px) {
  :root { --c-s8: 72px; --c-s7: 56px; --c-key: 2px; }
  .c-mod > * { grid-column: span 12 !important; }
  .c-nav__links { display: none; }
  .c-nav__links.is-open { display: flex; flex-direction: column; gap: var(--c-s2);
    position: absolute; top: 100%; left: 0; right: 0; background: var(--white);
    padding: var(--c-s3); border-bottom: var(--c-key) solid var(--text); }
  .c-burger { display: block; }
  .c-nav__right > .c-btn { display: none; }
  .c-ba, .c-plans { grid-template-columns: 1fr; }
  .c-plane { padding: var(--c-s4); }
  .c-capability-map { --cap-pad: 18px; }
  /* Pleine largeur, l'alternance décrocherait le plan-chiffre 02 de son texte :
     elle ne reprend que sous 480 px, où la mesure redevient étroite. */
  .c-capability-map__item:nth-child(2) { flex-direction: row; }
  .c-capability-map__item:nth-child(2) .c-capability-map__num { border-radius: 100% 0 100% 100%; }
  .c-execution-map { grid-template-columns: 1fr 1fr; }
  .c-execution-map > div:nth-child(2) { border-right: 0; }
  .c-execution-map > div { min-height: 140px; border-bottom: var(--c-key) solid var(--text); }
  .c-execution-map > div:nth-child(n+3) { border-bottom: 0; }
  .c-steps { gap: var(--c-s4); }
  .c-step__num { width: 72px; font-size: var(--c-t-md); }
  .c-step__title { padding: var(--c-s3); }
  .c-step__fig { padding: var(--c-s2); }
  .c-step__say { padding: var(--c-s3); gap: var(--c-s2); }
  .c-more__btn, .c-more__panel { padding-left: var(--c-s3); padding-right: var(--c-s3); }
  .c-more__panel { padding-top: var(--c-s4); padding-bottom: var(--c-s4); }
}
@media (max-width: 480px) {
  .c-wrap { padding-left: var(--c-s2); padding-right: var(--c-s2); }
  .c-actions { flex-direction: column; align-items: stretch; }
  .c-actions > * { max-width: 100%; }
  .c-actions .c-btn { justify-content: center; white-space: normal; text-align: center; }
  /* Hors .c-actions aussi : un libellé long en nowrap élargit son conteneur. */
  .c-plan .c-btn { justify-content: center; white-space: normal; text-align: center; }
  .c-actions .c-link { white-space: normal; overflow-wrap: anywhere; }
  .c-longread a { overflow-wrap: anywhere; }
  .c-num { width: 44px; height: 44px; }
  .c-card { padding: var(--c-s3); }
  /* Sous 480 px : plans-chiffres et interlignes resserrés, l'alternance tient. */
  .c-capability-map { --cap-pad: 15px; --cap-num: 54px; --cap-gap: 14px; --cap-cut: 52px; }
  .c-capability-map__head { padding: var(--c-s2); }
  .c-capability-map__item { padding: var(--cap-pad) var(--c-s2); }
  .c-capability-map__num { font-size: var(--c-t-md); }
  .c-capability-map__body strong { font-size: var(--c-t-base); }
  .c-capability-map__body p { font-size: var(--c-t-xs); }
  .c-capability-map__loop { padding: var(--c-s2); }
  .c-capability-map__item:nth-child(2) { flex-direction: row-reverse; }
  .c-capability-map__item:nth-child(2) .c-capability-map__num { border-radius: 0 100% 100% 100%; }
  /* Le bandeau ne tient plus le plan-chiffre et le titre côte à côte : il se
     plie en deux, le chiffre garde son filet en pied de cellule. */
  .c-step__head, .c-step--flip .c-step__head { flex-direction: column; align-items: stretch; }
  .c-step__num, .c-step--flip .c-step__num { width: auto; height: 48px;
    border-right: 0; border-left: 0; border-bottom: var(--c-key) solid var(--text); }
  .c-more__btn { font-size: var(--c-t-xs); letter-spacing: 0.06em; }
  .c-more__sign { width: 26px; height: 26px; font-size: var(--c-t-base); }
  .c-flow > li { flex-direction: column; align-items: flex-start; gap: var(--c-s1); }
  .c-flow__n { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .c-page *, .c-page *::before, .c-page *::after {
    transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .c-page .c-btn:hover { transform: none; }
}