/* Jetons du design system cateline.fr (Claude Design, 25/09/2026), qui remplace
   Organic. Recopiés sous leurs noms d’origine depuis tokens.json, pour qu’une
   resynchronisation se fasse par simple comparaison.

   Les alias sémantiques en fin de bloc sont l’interface du site : les tests parlent
   de --bg, --fg, --accent, jamais des couleurs elles-mêmes.

   Un seul thème : la charte n’en a pas de sombre, on n’en invente pas ici.

   Polices auto-hébergées, licence SIL OFL 1.1. Caveat n’est pas chargée : elle ne
   sert qu’aux légendes des BD. */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("assets/fonts/bricolage-grotesque-700-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal; font-weight: 800; font-display: swap;
  src: url("assets/fonts/bricolage-grotesque-800-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/atkinson-hyperlegible-next-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("assets/fonts/atkinson-hyperlegible-next-700-latin.woff2") format("woff2");
}

:root {
  color-scheme: light;

  --creme: #FFF8EC;
  --blanc: #FFFFFF;
  --encre: #1B1A2E;
  --ardoise: #4A4860;
  --bleu: #2B35C8;
  --bleu-survol: #1E268F;
  --citron: #FFD83D;
  --bleu-pale: #E3E6FF;
  --citron-pale: #FFF0B3;
  --pervenche: #9AA2F5;
  --gris-lilas: #7A7796;

  --lien: var(--bleu);
  /* Cité par le README et bundle.css de la charte, absent de tokens.json :
     sans lui, le survol des liens ne change rien. À ajouter côté charte. */
  --lien-survol: var(--bleu-survol);
  --focus: var(--bleu);
  --action: var(--citron);
  --sur-action: var(--encre);

  --font-titres: "Bricolage Grotesque", system-ui, sans-serif;
  --font-texte: "Atkinson Hyperlegible Next", system-ui, sans-serif;

  --espace-8: 8px;
  --espace-14: 14px;
  --espace-20: 20px;
  --espace-28: 28px;
  --espace-32: 32px;
  --espace-40: 40px;
  --espace-80: 80px;

  --rayon-3: 3px;
  --rayon-6: 6px;
  --rayon-10: 10px;
  --rayon-12: 12px;
  --rayon-16: 16px;

  --ombre-bouton: 5px 5px 0 var(--encre);
  --ombre-carte: 6px 6px 0 var(--encre);

  --trait-fin: 1px;
  --trait: 2px;
  --trait-fort: 3px;

  --bg: var(--creme);
  --surface: var(--blanc);
  --fg: var(--encre);
  --muted: var(--ardoise);
  --rule: var(--ardoise);
  --border: var(--encre);
  --accent: var(--lien);
  --accent-bg: var(--action);
  --accent-fg: var(--sur-action);
}

/* Composants de la charte cateline.fr, repris de son bundle.css (préfixe ct-),
   puis la mise en page de la landing. Aucune couleur en dur : tout passe par les
   jetons de _ct-tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--creme); color: var(--encre);
  font-family: var(--font-texte); font-size: 18px; line-height: 1.6;
}
/* Un mot plus long que la ligne se coupe au lieu de sortir de l’écran : à 320 px
   avec l’espacement agrandi, « L’accompagnement » en titre ne tient pas entier. */
/* anywhere, pas break-word : dans un bloc flexible, seul anywhere réduit la largeur minimale
   d’un groupe insécable. À 320 px, espacement agrandi, quatre titres sortaient de l’écran ; un
   mot n’est coupé que s’il ne tient pas (RGAA 10.12, audit du 20/10/2026). */
h1, h2, h3 { font-family: var(--font-titres); margin: 0; text-wrap: balance; overflow-wrap: anywhere; }
p { margin: 0; max-width: 33em; }
a { color: var(--lien); text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* Une citation courte est dans un élément q, qui pose ses guillemets : français, avec leurs
   espaces insécables, puis anglais pour une citation dans la citation (RGAA 9.4, 20/10/2026). */
q { quotes: "«\00a0" "\00a0»" "“" "”"; }
a:hover { color: var(--lien-survol); }
:focus-visible { outline: var(--trait-fort) solid var(--focus); outline-offset: 3px; }
.ct-nowrap { white-space: nowrap; }
/* Sous 400 px, un groupe insécable dans un grand titre sort de l’écran dès que
   l’espacement du texte est agrandi (RGAA 10.11 et 10.12) : il peut alors couler. */
@media (max-width: 400px) { h1 .ct-nowrap, h2 .ct-nowrap { white-space: normal; } }

.ct-evitement {
  position: absolute; left: var(--espace-20); top: -100px; z-index: 1;
  padding: var(--espace-8) var(--espace-20); background: var(--blanc); color: var(--encre);
  border: var(--trait) solid var(--encre); border-radius: var(--rayon-10);
}
.ct-evitement:focus { top: var(--espace-20); }

/* Bouton */
.ct-bouton {
  display: inline-flex; align-items: center; min-height: 56px;
  padding: 0 var(--espace-28); border: var(--trait-fort) solid var(--sur-action);
  border-radius: var(--rayon-10); background: var(--action); color: var(--sur-action);
  box-shadow: var(--ombre-bouton); font-size: 18px; font-weight: 700; line-height: 1.2;
  text-decoration: none; text-wrap: balance;
}
.ct-bouton:hover { color: var(--sur-action); }
/* La flèche pousse vers l’action ; elle glisse au survol, sauf si l’appareil
   demande de réduire les animations. */
:root { --fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E"); }
.ct-bouton::after {
  content: ""; width: 20px; height: 20px; margin-left: 10px; flex-shrink: 0; background: currentColor;
  -webkit-mask: var(--fleche) center / contain no-repeat; mask: var(--fleche) center / contain no-repeat;
  transition: transform .15s ease-out;
}
.ct-bouton:hover::after, .ct-bouton:focus-visible::after { transform: translateX(4px); }
/* Un lien qui s’ouvre dans un nouvel onglet : un pictogramme le montre (23/10/2026). C’est un
   masque, rien à lire ; le texte masqué « (nouvel onglet) » le dit aux lecteurs d’écran. */
:root { --sortie: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 11 13'/%3E%3Cpath d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E"); }
a[target="_blank"]::after {
  content: ""; display: inline-block; width: .75em; height: .75em; margin-left: .25em; vertical-align: -.05em; flex-shrink: 0;
  background: currentColor; -webkit-mask: var(--sortie) center / contain no-repeat; mask: var(--sortie) center / contain no-repeat;
}
@media (forced-colors: active) { a[target="_blank"]::after { background: LinkText; } }
@media (prefers-reduced-motion: reduce) { .ct-bouton::after { transition: none; } .ct-bouton:hover::after, .ct-bouton:focus-visible::after { transform: none; } }
@media (forced-colors: active) { .ct-bouton::after { background: ButtonText; } }
.ct-bouton:focus-visible { outline-offset: 6px; }
.ct-bouton-sous-titre { font-size: 16px; line-height: 1.5; color: var(--ardoise); }
@media (max-width: 559px) { .ct-bouton { padding-inline: var(--espace-20); } }
.ct-action { display: flex; flex-direction: column; align-items: center; align-self: stretch; gap: var(--espace-20); text-align: center; }
/* Le dernier appel, sous les dernières vignettes : la page finit sur le bouton */
.ct-action-fin { padding-top: clamp(var(--espace-40), 8vw, var(--espace-80)); }
/* Bouton secondaire, tel que défini dans la charte : pour naviguer, jamais pour convertir */
.ct-bouton-secondaire { display: inline-flex; align-items: center; min-height: 56px; box-sizing: border-box; padding: 0 var(--espace-28); border: var(--trait) solid var(--encre); border-radius: var(--rayon-10); background: var(--creme); color: var(--encre); font-family: var(--font-texte); font-size: 18px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; }
.ct-bouton-secondaire:focus-visible { outline: var(--trait-fort) solid var(--focus); outline-offset: 3px; }

/* Lien */
.ct-lien {
  display: inline-flex; align-items: center; min-height: 44px; font-weight: 700;
}

/* Étiquette */
.ct-etiquette {
  display: inline-block; padding: 4px 10px; border-radius: var(--rayon-6);
  background: var(--bleu-pale); color: var(--encre);
  font-size: 16px; font-weight: 700; line-height: 1.4;
}
.ct-etiquette-citron { background: var(--citron-pale); }
.ct-section > .ct-etiquette { align-self: flex-start; }
.ct-sujets { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--espace-8); max-width: 65ch; }

.ct-note { font-size: 16px; line-height: 1.5; color: var(--ardoise); }
.ct-liste {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 6px; font-size: 17px; line-height: 1.45;
}
.ct-liste li { position: relative; padding-left: 22px; }
.ct-liste li::before {
  content: ""; position: absolute; left: 0; top: .37em; width: 12px; height: 12px; box-sizing: border-box;
  border-radius: var(--rayon-3); background: var(--citron);
  border: var(--trait) solid var(--encre);
}

/* Surligneur : un seul mot, ou un groupe de trois au plus, par bloc */
.ct-surligne {
  background: var(--citron); color: var(--encre); padding: 0 .12em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* Dans un grand titre, 0,12 em colle les lettres au bord du surlignage. */
h1 .ct-surligne, h2 .ct-surligne {
  padding: 0 .2em; margin: 0 .04em;
  /* Le surlignage s’arrête sous les jambages de la ligne du dessus, qu’il ne touche plus. */
  background: linear-gradient(transparent .16em, var(--citron) .16em);
}

/* Bloc logo, version courte : sa baseline est le titre de la page, juste dessous.
   Les cubes restent de travers, le cube citron reste en haut. */
.ct-logo { display: inline-flex; align-items: center; gap: var(--espace-20); color: var(--encre); text-decoration: none; }
.ct-logo svg { flex-shrink: 0; }
.ct-logo-nom { font-family: var(--font-titres); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -0.02em; }
.ct-logo-court { gap: var(--espace-14); }
.ct-logo-court .ct-logo-nom { font-size: 30px; }
.cube-encre { fill: var(--encre); }
.cube-bleu { fill: var(--bleu); }
.cube-citron { fill: var(--citron); stroke: var(--encre); stroke-width: 3; }

/* Mise en page */
.ct-page { max-width: 1120px; margin: 0 auto; padding: 0 clamp(16px, 5vw, var(--espace-80)); }
.ct-entete { padding: var(--espace-28) 0; }
/* En-tête fixe : le logo, le menu et le bouton restent visibles au défilement */
html { scroll-padding-top: 96px; }
.ct-entete-fixe {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: var(--espace-14);
  padding: var(--espace-8) 0; background: var(--creme); border-bottom: var(--trait-fin) solid var(--ardoise);
}
.ct-entete-fixe .ct-logo svg { width: 36px; height: 45px; }
/* Le logo à gauche ; à droite, serrés, le menu et le bouton, ou le bouton et le burger. */
.ct-entete-fixe > .ct-logo { margin-right: auto; }
/* Comme chez Scalezia : l’offre en titre, l’entreprise dessous */
.ct-logo-textes { display: flex; flex-direction: column; gap: 2px; }
.ct-entete-fixe .ct-logo-nom { font-size: clamp(18px, 5.6vw, 22px); }
.ct-logo-offre { font-size: 16px; line-height: 1.2; font-weight: 700; color: var(--ardoise); }
.ct-bouton-entete { min-height: 44px; padding: 0 var(--espace-14); font-size: 16px; border-width: var(--trait); box-shadow: 3px 3px 0 var(--encre); }
.ct-bouton-entete::after { width: 16px; height: 16px; margin-left: 6px; }
.ct-entete-fixe { flex-wrap: wrap; }
/* Le bouton fixe en bas de l’écran n’existe que sur téléphone */
.ct-barre-collante { display: none; }
/* Le menu (Cateline, 21/10/2026). Sur ordinateur, ses liens tiennent entre le logo et le
   bouton ; en dessous de 1100 px, ils passent dans un burger. Sous 680 px, le bouton ne tient
   plus à côté du logo et du burger : il passe dans le burger, sous les liens, et sur l’accueil
   dans la barre collée en bas de l’écran. */
.ct-nav ul { display: flex; margin: 0; padding: 0; list-style: none; }
.ct-nav a { display: flex; align-items: center; min-height: 44px; color: var(--encre); font-weight: 700; text-decoration: none; }
.ct-nav a:hover { color: var(--encre); text-decoration: underline; }
/* La page en cours : soulignée plus épais, et annoncée par aria-current. */
.ct-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: var(--trait-fort); }
.ct-entete-fixe > .ct-nav { display: none; margin-right: var(--espace-14); }
.ct-entete-fixe > .ct-nav ul { flex-wrap: wrap; column-gap: var(--espace-20); }
.ct-entete-fixe > .ct-nav a { font-size: 16px; }
.ct-menu summary {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; box-sizing: border-box; list-style: none; cursor: pointer;
  border: var(--trait) solid var(--encre); border-radius: var(--rayon-10); background: var(--creme); box-shadow: 3px 3px 0 var(--encre);
}
.ct-menu summary::-webkit-details-marker { display: none; }
.ct-burger, .ct-burger::before, .ct-burger::after { display: block; width: 20px; height: 2px; border-radius: 1px; background: var(--encre); }
.ct-burger { position: relative; }
.ct-burger::before, .ct-burger::after { content: ""; position: absolute; left: 0; }
.ct-burger::before { top: -6px; }
.ct-burger::after { top: 6px; }
.ct-menu[open] .ct-burger { background: transparent; }
.ct-menu[open] .ct-burger::before { top: 0; transform: rotate(45deg); }
.ct-menu[open] .ct-burger::after { top: 0; transform: rotate(-45deg); }
@media (forced-colors: active) { .ct-burger::before, .ct-burger::after { background: ButtonText; } .ct-menu:not([open]) .ct-burger { background: ButtonText; } }
.ct-menu-panneau {
  position: absolute; left: 0; right: 0; top: 100%; display: flex; flex-direction: column; gap: var(--espace-20);
  padding: var(--espace-8) 0 var(--espace-20); background: var(--creme); border-bottom: var(--trait-fin) solid var(--ardoise);
}
/* Une ligne par lien, assez haute pour le pouce, un filet entre deux. */
.ct-menu-panneau .ct-nav ul { flex-direction: column; }
.ct-menu-panneau .ct-nav a { min-height: 48px; font-family: var(--font-titres); font-size: 20px; line-height: 1.2; }
.ct-menu-panneau .ct-nav li + li { border-top: var(--trait-fin) solid var(--ardoise); }
.ct-menu-rdv { display: none; flex-direction: column; align-items: center; gap: var(--espace-8); text-align: center; }
.ct-menu-rdv .ct-bouton { align-self: stretch; justify-content: center; text-align: center; }
@media (min-width: 1100px) {
  .ct-entete-fixe > .ct-nav { display: block; }
  .ct-menu { display: none; }
}
@media (max-width: 679px) {
  .ct-entete-fixe > .ct-bouton-entete { display: none; }
  .ct-menu-rdv { display: flex; }
  /* D’un bord à l’autre de l’écran, comme le bandeau encre : au défilement, rien ne passe sur les côtés */
  .ct-entete-fixe { margin-inline: calc(-1 * clamp(16px, 5vw, var(--espace-80))); padding-inline: clamp(16px, 5vw, var(--espace-80)); }
  .ct-menu-panneau { padding-inline: clamp(16px, 5vw, var(--espace-80)); }
  /* Le bouton à portée du pouce, qui suit le défilement. La page lui réserve sa hauteur
     en bas, et le focus ne passe jamais dessous (WCAG 2.4.11). */
  .ct-barre-collante {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--creme); border-top: var(--trait-fin) solid var(--ardoise);
  }
  .ct-bouton-collant { display: flex; justify-content: center; width: 100%; box-sizing: border-box; }
  html { scroll-padding-bottom: 96px; }
  body:has(.ct-barre-collante) { padding-bottom: 88px; }
}
.ct-section { padding: clamp(var(--espace-40), 8vw, var(--espace-80)) 0 0; display: flex; flex-direction: column; gap: var(--espace-20); }
/* Accueil : de l’air et un filet fin entre les sections, pour que chaque temps se
   détache. Les pages de texte gardent leur rythme plus serré. */
.ct-hero ~ .ct-section {
  margin-top: clamp(56px, 10vw, var(--espace-80));
  padding-top: clamp(56px, 10vw, var(--espace-80));
  border-top: var(--trait-fin) solid var(--ardoise);
  gap: var(--espace-28);
}
.ct-section h2, .ct-cloture h2 { font-size: clamp(30px, 4.6vw, 48px); line-height: 1.1; font-weight: 800; max-width: 22ch; }
.ct-section h3 { font-size: 24px; line-height: 1.3; font-weight: 700; }

.ct-hero { padding: clamp(var(--espace-20), 5vw, var(--espace-40)) 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--espace-28); }
/* L’astérisque du titre renvoie aux trois « sans », juste dessous */
.ct-ast { color: var(--bleu); }
.ct-sans { font-size: 17px; line-height: 1.5; color: var(--ardoise); margin-top: calc(-1 * var(--espace-14)); }
/* Les trois pastilles de preuve : des faits vérifiables, chiffres clés en bleu */
.ct-pastilles { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--espace-8); }
/* Plus grandes depuis le 07/10/2026 (Audrey Jargot, 06/10 : « lisibles par quelqu’un qui voit
   mal »), mais toujours des chips, pour ne pas empiler les blocs au-dessus des boutons. */
.ct-pastilles li {
  display: flex; align-items: baseline; gap: var(--espace-8); padding: 8px 18px; border-radius: 999px; background: var(--blanc); color: var(--encre);
  border: var(--trait-fin) solid var(--ardoise); font-size: 18px; line-height: 1.3;
}
.ct-chiffre { color: var(--bleu); font-family: var(--font-titres); font-weight: 800; font-size: 26px; line-height: 1; }
.ct-hero h1 { font-size: clamp(40px, 7.4vw, 72px); line-height: 1.04; font-weight: 800; letter-spacing: -0.02em; max-width: 15ch; }
/* La ligne de cible, dans le H1 mais à la taille d’une étiquette */
.ct-hero h1 .ct-h1-cible { display: table; margin-bottom: var(--espace-20); font-family: var(--font-texte); font-size: 16px; font-weight: 700; line-height: 1.4; letter-spacing: normal; }
/* Sur ordinateur, le titre tient en trois lignes, coupées au sens sans <br> (RGAA 8.9) : « 90 jours pour remettre /
   le business / au cœur du produit. » (Cateline, 07/10/2026). Ailleurs, il coule librement. */
@media (min-width: 900px) { .ct-hero h1 { max-width: none; } .ct-hero h1 .ct-ligne { display: block; } }

/* Cas réels : un mur de vignettes de BD, chacune mène à son récit */
.ct-vignettes { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--espace-14); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { #cas .ct-vignettes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* « Voir tout » et « Voir moins », sans JavaScript */
.ct-voir-tout { display: flex; flex-direction: column; gap: var(--espace-20); }
.ct-voir-tout summary { align-self: center; list-style: none; }
.ct-voir-tout summary::-webkit-details-marker { display: none; }
.ct-voir-tout[open] .ct-voir-plus, .ct-voir-tout:not([open]) .ct-voir-moins { display: none; }
@media (min-width: 760px) { .ct-vignettes { gap: var(--espace-20); grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ct-vignette {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; color: var(--encre); text-decoration: none;
  background: var(--blanc); border: var(--trait) solid var(--encre); border-radius: var(--rayon-12);
}
.ct-vignette img { display: block; width: 100%; height: auto; border-bottom: var(--trait) solid var(--encre); }
.ct-vignette-titre { padding: var(--espace-14) var(--espace-14) var(--espace-8); font-family: var(--font-titres); font-weight: 700; font-size: clamp(17px, 1.8vw, 20px); line-height: 1.3; }
.ct-vignette-pied { align-self: flex-start; margin: auto var(--espace-14) var(--espace-14); padding: 4px 10px; border-radius: var(--rayon-6); background: var(--bleu-pale); color: var(--encre); font-size: 16px; font-weight: 700; line-height: 1.4; }
/* « À venir », sur l’étiquette d’une page de talk comme sur sa vignette : en citron, pour se
   voir (Cateline, 21/10/2026). Le mot est écrit en toutes lettres : la couleur n’est qu’un appui. */
.ct-a-venir { background: var(--citron); }
.ct-vignette:hover .ct-vignette-titre { text-decoration: underline; text-underline-offset: 3px; }
.ct-vignette:focus-visible { outline-offset: 4px; }
.ct-cases { display: grid; gap: var(--espace-14); grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.ct-cases img { display: block; width: 100%; height: auto; }
/* La case dans son cadre, la narration en bandeau citron pâle au-dessus : elle ne se confond
   plus avec les bulles blanches, et c’est du texte, qui suit le zoom (Cateline, 27/09/2026). */
.ct-case { margin: 0; overflow: hidden; border: var(--trait) solid var(--encre); border-radius: var(--rayon-12); }
.ct-narration {
  padding: var(--espace-8) var(--espace-14); background: var(--citron-pale); color: var(--encre);
  font-family: var(--font-titres); font-weight: 700; font-size: 18px; line-height: 1.35;
  border-bottom: var(--trait) solid var(--encre);
}
.ct-narration-ligne { display: block; }
.ct-recit > p, .ct-recit > ul, .ct-recit > ol { max-width: 33em; }
.ct-recit h2 { font-size: clamp(24px, 3vw, 30px); line-height: 1.2; margin-top: var(--espace-14); }
.ct-recit h2:first-child { margin-top: 0; }

/* La méthode : des étapes numérotées, « Vous êtes ici » sur la première */
.ct-etapes { margin: 0; padding: 0; list-style: none; counter-reset: etape; display: grid; gap: var(--espace-28); max-width: 760px; }
/* La ligne de la méthode : elle relie les pastilles des étapes, puis descend en flèche jusqu’aux résultats. */
.ct-etapes > li::after {
  content: ""; position: absolute; left: calc(var(--espace-20) + 17.5px); top: 100%; width: 3px;
  height: calc(var(--espace-28) + 4px); background: var(--encre);
}
/* Le dernier trait s’arrête à la base de la pointe, posée sur l’encadré des résultats. */
.ct-etapes > li:last-child::after { height: calc(var(--espace-28) + var(--espace-14) + var(--trait) - 11px); }
.ct-etapes > li {
  counter-increment: etape; position: relative; display: flex; flex-direction: column; gap: var(--espace-8);
  padding: var(--espace-20);
  background: var(--blanc); border: var(--trait) solid var(--encre); border-radius: var(--rayon-12);
}
.ct-etapes > li::before {
  content: counter(etape); position: absolute; left: var(--espace-20); top: var(--espace-20);
  width: 38px; height: 38px; display: grid; place-items: center; box-sizing: border-box;
  font-family: var(--font-titres); font-weight: 800; font-size: 18px;
  background: var(--bleu-pale); border: var(--trait) solid var(--encre); border-radius: 50%;
}
.ct-etapes .ct-etape-ici { border-width: var(--trait-fort); }
.ct-etapes .ct-etape-ici::before { background: var(--citron); }
.ct-etapes .ct-etiquette { align-self: flex-start; }
/* Le titre à côté du numéro ; tout le reste sur toute la largeur de la carte */
.ct-etapes > li > h3 { min-height: 38px; display: flex; align-items: center; padding-left: 56px; }
.ct-chute-etape { font-family: var(--font-texte); font-weight: 400; font-size: 18px; line-height: 1.4; color: var(--ardoise); }
.ct-etapes picture, .ct-etapes picture img { display: block; }
.ct-etapes picture { margin-block: var(--espace-8); }
/* Pas de cadre dans un cadre : la case de BD touche les bords de la carte, un filet dessus et dessous */
.ct-etapes picture img { width: calc(100% + 2 * var(--espace-20)); max-width: none; margin-inline: calc(-1 * var(--espace-20)); height: auto; box-sizing: border-box; border-block: var(--trait) solid var(--encre); }
/* Les outils : une ligne de texte, pour ne pas peser plus lourd que l’étape */
.ct-etapes .ct-outils { display: block; margin-top: 0; font-size: 16px; line-height: 1.5; color: var(--ardoise); }
.ct-etapes .ct-outils p { display: inline; font-size: 16px; }
.ct-etapes .ct-sujets { display: inline; }
.ct-etapes .ct-sujets li { display: inline; }
.ct-etapes .ct-sujets .ct-etiquette { background: none; padding: 0; border: 0; border-radius: 0; font-weight: 400; font-size: 16px; color: var(--ardoise); }
.ct-etapes .ct-sujets li:not(:last-child)::after { content: ", "; }
@media (max-width: 559px) {
  .ct-etapes > li { padding: 16px 16px 20px; }
  .ct-etapes > li::before { left: 16px; top: 16px; }
  .ct-etapes > li::after { left: calc(16px + 17.5px); }
  .ct-etapes > li > h3 { padding-left: 52px; }
  .ct-etapes picture img { width: calc(100% + 32px); margin-inline: -16px; }
}
.ct-etapes h3 { font-size: 22px; line-height: 1.3; }
.ct-etapes p { font-size: 18px; line-height: 1.5; }
/* Sur ordinateur, comme chez Scalezia : le texte à gauche, la case 4:3 à droite, collée
   aux bords de la carte avec un filet à gauche. Deux étapes par écran (Cateline, 30/09/2026). */
@media (min-width: 900px) {
  .ct-etapes { max-width: 1000px; }
  .ct-etapes > li {
    display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-rows: repeat(4, auto) 1fr;
    column-gap: var(--espace-20); row-gap: var(--espace-8); align-content: start; padding-right: 0;
  }
  .ct-etapes > li > * { grid-column: 1; }
  .ct-etapes .ct-etiquette { justify-self: start; }
  /* La case n’est jamais rognée (« c’est dégueu », Cateline, 06/10/2026, quand le texte a
     grandi) : elle garde son 4:3, posée en bas de la carte, et le crème du fond des dessins
     remplit le haut de la colonne. */
  .ct-etapes picture {
    grid-column: 2; grid-row: 1 / -1; margin: calc(-1 * var(--espace-20)) 0; align-self: stretch;
    display: flex; align-items: flex-end; background: var(--creme);
    border-left: var(--trait) solid var(--encre);
    border-radius: 0 calc(var(--rayon-12) - var(--trait)) calc(var(--rayon-12) - var(--trait)) 0; overflow: hidden;
  }
  .ct-etapes picture img { width: 100%; height: auto; margin: 0; border: 0; border-radius: 0; }
  .ct-etapes .ct-etape-ici picture { border-radius: 0 calc(var(--rayon-12) - var(--trait-fort)) calc(var(--rayon-12) - var(--trait-fort)) 0; }
}

/* Les résultats, au bout de la méthode : un aplat citron, trois cartes numérotées */
.ct-resultats {
  position: relative; margin-top: var(--espace-14);
  display: flex; flex-direction: column; gap: var(--espace-20); padding: var(--espace-28);
  background: var(--citron-pale); border: var(--trait) solid var(--encre); border-radius: var(--rayon-16);
}
.ct-resultats::before {
  content: ""; position: absolute; left: calc(var(--espace-20) + 11px); top: calc(-1 * var(--trait) - 12px);
  border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 12px solid var(--encre);
}
@media (max-width: 559px) { .ct-resultats { padding: var(--espace-20); } .ct-resultats::before { left: calc(16px + 11px); } }
.ct-resultats h3 { font-size: clamp(24px, 3vw, 30px); line-height: 1.2; }
.ct-resultats ol {
  margin: 0; padding: 0; list-style: none; counter-reset: resultat; display: grid; gap: var(--espace-14);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.ct-resultats li {
  counter-increment: resultat; display: flex; flex-direction: column; align-items: flex-start; gap: var(--espace-8);
}
.ct-resultats li::before {
  content: counter(resultat); width: 32px; height: 32px; display: grid; place-items: center;
  font-family: var(--font-titres); font-weight: 800; font-size: 16px; color: var(--blanc); background: var(--encre); border-radius: 50%;
}
.ct-resultats h4 { margin: 0; font-family: var(--font-titres); font-size: 22px; line-height: 1.3; font-weight: 700; }
.ct-resultats p { font-size: 18px; line-height: 1.5; }

/* Ce qu’on met en place : quatre cartes sans BD (06/10/2026, « pour alléger »), deux par ligne
   sur ordinateur. Étiquette, titre, texte, puis la cadence sous un filet, en pied de carte. */
.ct-dispositif { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--espace-20); grid-template-columns: 1fr; }
@media (min-width: 760px) { .ct-dispositif { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ct-composante {
  display: flex; flex-direction: column; gap: var(--espace-8); padding: var(--espace-20);
  background: var(--blanc); border: var(--trait) solid var(--encre); border-radius: var(--rayon-12);
}
@media (max-width: 559px) { .ct-composante { padding: 16px; } }
.ct-composante > .ct-etiquette { align-self: flex-start; }
.ct-composante h3 { font-size: 22px; line-height: 1.3; }
@media (min-width: 560px) { .ct-etapes h3, .ct-composante h3, .ct-resultats h4 { font-size: 24px; } }
.ct-composante p { font-size: 18px; line-height: 1.5; }
.ct-cadence { display: flex; align-items: baseline; gap: var(--espace-8); margin-top: auto; padding-top: var(--espace-14); border-top: var(--trait-fin) solid var(--ardoise); font-weight: 700; }
.ct-cadence::before { content: ""; flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--citron); border: var(--trait) solid var(--encre); transform: translateY(1px); }

/* La rareté, juste avant le dernier bouton : une étiquette citron pâle, centrée comme le bouton */
.ct-cloture .ct-rarete { align-self: center; margin-inline: auto; width: fit-content; padding: 6px 14px; border-radius: var(--rayon-12); background: var(--citron-pale); color: var(--encre); border: var(--trait) solid var(--encre); font-family: var(--font-titres); font-weight: 700; font-size: 18px; text-align: center; }

/* Les questions où le dirigeant se reconnaît (Audrey Jargot, 06/10/2026) : écrites
   simplement, les unes sous les autres, sans cartes, alignées à gauche (Cateline, 07/10/2026).
   Une seule situation par question. */
.ct-reconnaissance { margin: 0; padding: 0; list-style: none; max-width: 34em; display: flex; flex-direction: column; gap: var(--espace-14); }
.ct-reconnaissance li { font-family: var(--font-titres); font-weight: 700; font-size: 22px; line-height: 1.35; color: var(--encre); }
@media (max-width: 559px) { .ct-reconnaissance li { font-size: 19px; } }

/* Haut de page : le bouton et, à côté, « Voir la méthode » pour qui n’est pas prêt à réserver.
   Le sous-titre reste sous le bouton jaune. Sur téléphone, l’un sous l’autre. */
.ct-action-double { display: grid; grid-template-columns: auto auto; justify-content: center; column-gap: var(--espace-14); row-gap: var(--espace-8); align-items: center; }
.ct-action-double .ct-bouton { grid-column: 1; grid-row: 1; }
.ct-action-double .ct-bouton-secondaire { grid-column: 2; grid-row: 1; }
.ct-action-double .ct-bouton-sous-titre { grid-column: 1; grid-row: 2; }
@media (max-width: 559px) {
  .ct-action-double { grid-template-columns: auto; }
  .ct-action-double .ct-bouton-secondaire { grid-column: 1; grid-row: 3; justify-self: center; }
}

/* Les cas réels, en fin de page et sur place (Audrey Jargot, 06/10/2026), en cartes
   d’exemples concrets sur le modèle de Demat’ Consulting (Cateline, 07/10/2026). Rien de
   cliquable : pas de contour au survol. La case de BD touche les bords de la carte. */
.ct-exemples { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--espace-20); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .ct-exemples { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .ct-exemples { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ct-exemple {
  display: flex; flex-direction: column; gap: var(--espace-8); padding: 0 var(--espace-20) var(--espace-20); overflow: hidden;
  background: var(--blanc); border: var(--trait) solid var(--encre); border-radius: var(--rayon-12);
}
.ct-exemple img { display: block; width: calc(100% + 2 * var(--espace-20)); max-width: none; margin: 0 calc(-1 * var(--espace-20)) var(--espace-8); height: auto; border-bottom: var(--trait) solid var(--encre); }
.ct-exemple-pilier { align-self: flex-start; padding: 2px 10px; border-radius: var(--rayon-6); background: var(--bleu-pale); color: var(--encre); font-size: 15px; font-weight: 700; line-height: 1.4; }
.ct-exemple h3 { font-size: 21px; line-height: 1.3; }
.ct-exemple-effet { font-size: 17px; line-height: 1.5; }
.ct-exemple-outils { margin: auto 0 0; padding: var(--espace-8) 0 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.ct-exemple-outils li { padding: 3px 10px; border-radius: 999px; border: var(--trait-fin) solid var(--ardoise); color: var(--encre); font-size: 14px; font-weight: 700; line-height: 1.4; }

/* La sortie à J+30, clause de réassurance : en tête de la garantie (Audrey Jargot, 06/10/2026), sans en faire
   un slogan (« horrible et agressif », Cateline, 07/10/2026) */
.ct-garantie-phare { font-weight: 700; font-size: 20px; line-height: 1.4; }

/* La réassurance après les questions (Audrey Jargot, 06/10/2026). Sans gras : « trop de
   gras », Cateline, 07/10/2026. */
.ct-reassurance { display: grid; gap: var(--espace-28); align-items: center; }
.ct-reassurance-texte { display: flex; flex-direction: column; gap: var(--espace-20); }
.ct-reassurance img { display: block; width: 100%; max-width: 420px; height: auto; border: var(--trait) solid var(--encre); border-radius: var(--rayon-12); box-sizing: border-box; }
@media (min-width: 900px) { .ct-reassurance { grid-template-columns: minmax(0, 1fr) 380px; } }
.ct-reassurance-chute { max-width: 33em; font-size: 19px; line-height: 1.5; }
/* Chaque fausse piste se lit d’un coup d’œil, comme le reste du bloc (Cateline, 07/10/2026) */
.ct-reassurance .ct-liste li { font-size: 19px; line-height: 1.5; }
/* Ce dont le dirigeant a besoin, en gras : la réponse aux fausses pistes du dessus */
.ct-reassurance .ct-liste-forte li { font-weight: 700; }

/* Le vocabulaire produit (09/10/2026) : un sommaire en liens, puis chaque rubrique en
   liste de définitions, le terme en gras au-dessus de sa définition. */
.ct-sommaire ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--espace-8) var(--espace-20); }
.ct-sommaire a { font-weight: 700; }
.ct-lexique { margin: 0; max-width: 46em; display: grid; gap: 4px; }
.ct-lexique dt { margin-top: var(--espace-20); font-family: var(--font-titres); font-weight: 700; font-size: 21px; line-height: 1.3; }
.ct-lexique dt:first-child { margin-top: 0; }
.ct-lexique dd { margin: 0; font-size: 18px; line-height: 1.55; }
.ct-lexique dd p { margin: 0; }
/* Pour les rôles : où on les trouve, après la définition (Cateline, 09/10/2026) */
.ct-lexique .ct-lexique-orga { margin-top: 4px; color: var(--ardoise); font-size: 17px; }

/* Encart de la charte : un point à part, une icône au trait et un titre */
.ct-encart { display: flex; gap: var(--espace-14); align-items: flex-start; padding: var(--espace-20) 22px; border-radius: var(--rayon-12); background: var(--citron-pale); color: var(--encre); max-width: 420px; }
.ct-encart svg { flex-shrink: 0; }
.ct-encart-texte { display: flex; flex-direction: column; gap: var(--espace-8); font-size: 17px; line-height: 1.5; }
/* La garantie, bloc 8 de Scalezia : l’encart en grand, avec son contour */
.ct-garantie { max-width: 760px; padding: var(--espace-28); border: var(--trait) solid var(--encre); }
@media (max-width: 559px) { .ct-garantie { flex-direction: column; gap: var(--espace-8); padding: var(--espace-20); } }
.ct-garantie h2 { font-size: clamp(24px, 3vw, 30px); line-height: 1.2; }

/* Recommandations LinkedIn, sur les cartes de Scalezia (27/09/2026) : contour encre et
   ombre franche. En haut, le message d’un bord à l’autre de la carte, sans cadre à lui,
   une phrase entière en grand ; la recommandation entière se déplie dessous. En bas, sous
   un filet : le lien avec Cateline et « Vérifié », puis qui parle. Les mots d’abord. */
.ct-temoignages {
  margin: 0; padding: 0; list-style: none; display: grid; align-items: start; gap: var(--espace-28) var(--espace-20);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
}
.ct-temoignage {
  margin: 0; padding: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--blanc); border: var(--trait) solid var(--encre); border-radius: var(--rayon-12);
  box-shadow: var(--ombre-carte);
}
/* Un message sur deux en bleu pâle : la grille respire, le surligneur citron reste visible */
.ct-message { padding: var(--espace-20) var(--espace-20) var(--espace-8); background: var(--bleu-pale); }
.ct-temoignages > li:nth-child(even) .ct-message { background: var(--blanc); }
.ct-temoignage blockquote { margin: 0; }
/* À la taille de la phrase sous le titre (Cateline, 28/09/2026) */
.ct-accroche p { font-size: 17px; line-height: 1.5; }
.ct-temoignage details blockquote { display: flex; flex-direction: column; gap: var(--espace-8); padding-bottom: var(--espace-14); font-size: 17px; line-height: 1.5; }
/* Le summary garde son affichage natif, comme dans la FAQ : en flex, Safari et VoiceOver
   ne l’annoncent plus comme un bouton dépliable. */
.ct-temoignage summary {
  margin-top: var(--espace-8); padding: 10px 0; list-style: none; cursor: pointer;
  color: var(--lien); font-weight: 700; line-height: 1.4;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.ct-temoignage summary::-webkit-details-marker { display: none; }
/* En inline-block, le signe n’hérite pas du soulignement du libellé */
.ct-temoignage summary::after { content: "+"; content: "+" / ""; display: inline-block; margin-left: .3em; }
.ct-temoignage details[open] summary::after { content: "−"; content: "−" / ""; }
/* Le lien avec Cateline et « Vérifié » sur une ligne ; quand la place manque (320 px, texte
   espacé), « Vérifié » passe dessous au lieu d’écraser la phrase en colonne. */
.ct-temoignage figcaption {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 4px var(--espace-14);
  padding: var(--espace-14) var(--espace-20) var(--espace-20); border-top: var(--trait) solid var(--encre);
  font-size: 16px; line-height: 1.4;
}
/* La ligne se coupe en parts égales : l’année ne reste pas seule */
.ct-relation { flex: 1 1 9em; font-weight: 700; text-wrap: balance; }
.ct-verifie {
  padding: 2px 10px; border: var(--trait) solid var(--encre); border-radius: 999px; background: var(--blanc);
  font-size: 14px; font-weight: 700; line-height: 1.4; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.ct-verifie::before { content: "✓"; content: "✓" / ""; margin-right: 4px; }
.ct-temoin, .ct-role { flex-basis: 100%; }
.ct-temoin { margin-top: var(--espace-8); font-family: var(--font-titres); font-weight: 700; font-size: 18px; }
.ct-role { color: var(--ardoise); }
@media (max-width: 559px) {
  .ct-message { padding-inline: 16px; }
  .ct-temoignage figcaption { padding-inline: 16px; }
}
/* Lu par les lecteurs d’écran, invisible à l’écran */
.ct-masque { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.ct-questions { margin: 0; padding: 0; list-style: none; counter-reset: q; display: grid; gap: var(--espace-20); }
/* Numéros des questions : une colonne étroite et fixe, et le chiffre de la hauteur
   exacte de la première ligne, pour tomber pile en face d’elle. */
/* Interlignes relatifs : en pixels, ils ne suivraient pas le texte agrandi (RGAA 10.4).
   1,45 × 20 px = 29 px, et 1,036 × 28 px = 29 px : le chiffre a la hauteur de la ligne. */
.ct-questions li {
  counter-increment: q; display: grid; grid-template-columns: 1.4em minmax(0, 1fr);
  column-gap: var(--espace-14); align-items: start; font-size: 20px; line-height: 1.45; max-width: 33em;
}
.ct-questions li::before {
  content: counter(q); font-family: var(--font-titres); font-weight: 800; font-size: 1.4em;
  line-height: 1.036; color: var(--bleu);
}

/* Introduction de section, en texte courant agrandi */
.ct-intro { font-size: 20px; line-height: 1.5; }

/* Piliers : une liste, numéro à gauche, tant que cinq cartes ne tiennent pas de front.
   En deux colonnes étroites, les titres débordaient et le texte s’écrasait. */
.ct-outils { display: flex; flex-direction: column; gap: var(--espace-8); margin-top: var(--espace-8); }
.ct-outils p { font-size: 16px; color: var(--ardoise); }


/* FAQ : une question par ligne, le signe dit si elle est ouverte */
.ct-faq { max-width: 760px; }
.ct-faq details { border-top: var(--trait) solid var(--encre); }
.ct-faq details:last-child { border-bottom: var(--trait) solid var(--encre); }
/* Le summary garde son affichage natif : en flex, Safari et VoiceOver ne
   l’annoncent plus comme un bouton dépliable. Le signe est positionné à part. */
.ct-faq summary {
  position: relative; min-height: 44px; padding: var(--espace-20) 2.5rem var(--espace-20) 0;
  font-size: 19px; font-weight: 700; line-height: 1.4; cursor: pointer; list-style: none;
}
.ct-faq summary::-webkit-details-marker { display: none; }
.ct-faq summary::after {
  content: "+"; content: "+" / "";
  position: absolute; right: 0; top: var(--espace-20);
  font-family: var(--font-titres); font-weight: 800; font-size: 28px; line-height: 1; color: var(--bleu);
}
.ct-faq details[open] > summary::after { content: "−"; content: "−" / ""; }
/* Les questions SEO, repliées derrière « Voir plus de questions » (09/10/2026) : le bouton
   garde son allure de bouton, sans le signe des questions, et chaque question repliée
   affiche son propre état. */
.ct-faq .ct-voir-tout { padding-top: var(--espace-20); }
.ct-faq .ct-voir-tout:last-child { border-bottom: 0; }
.ct-faq .ct-voir-tout > summary { padding: 0 var(--espace-28); font-size: 18px; }
.ct-faq .ct-voir-tout > summary::after, .ct-faq .ct-voir-tout[open] > summary::after { content: none; }
.ct-faq details p { padding-bottom: var(--espace-20); }

.ct-moi { display: grid; gap: var(--espace-28); align-items: center; }
.ct-moi img { width: 100%; max-width: 240px; height: auto; border-radius: var(--rayon-12); border: var(--trait) solid var(--encre); }
.ct-pile { display: flex; flex-direction: column; gap: var(--espace-14); }
.ct-section > .ct-lien { align-self: flex-start; }

/* Pages de texte : mentions légales, déclaration d’accessibilité */
.ct-doc h1 { font-size: clamp(34px, 5vw, 48px); line-height: 1.1; font-weight: 800; margin-top: var(--espace-20); }
.ct-doc > p { margin-top: var(--espace-20); }
.ct-doc .ct-section { padding-top: var(--espace-40); gap: var(--espace-14); }
.ct-doc .ct-section h2 { font-size: clamp(24px, 3vw, 32px); }
.ct-doc .ct-section h3 { font-size: 20px; }
.ct-doc ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; max-width: 65ch; }
/* Le plan du site (20/10/2026) : la liste sous le titre, comme le premier paragraphe d’une page. */
.ct-doc .ct-plan { margin-top: var(--espace-20); }
.ct-doc > .ct-formulaire { margin-top: var(--espace-32); }
.ct-doc dl { margin: 0; }
.ct-doc dt { font-weight: 700; margin-top: var(--espace-14); }
.ct-doc dd { margin: 0; }
.ct-maj { margin-top: var(--espace-40); }

/* Rappel de l’étape 1 : le seul aplat encre de la page, juste avant la FAQ.
   Crème sur encre (16:1), numéros bleu pâle, focus citron ; l’ombre du bouton passe en crème. */
.ct-encre {
  margin-top: clamp(var(--espace-40), 8vw, var(--espace-80));
  padding: clamp(var(--espace-28), 6vw, var(--espace-80));
  border-radius: var(--rayon-16); background: var(--encre); color: var(--creme);
}
@media (max-width: 559px) { .ct-encre { margin-inline: calc(-1 * clamp(16px, 5vw, var(--espace-80))); border-radius: 0; padding-inline: var(--espace-20); } }
.ct-encre .ct-etiquette { color: var(--encre); }
.ct-encre .ct-questions li::before { color: var(--bleu-pale); }
.ct-encre .ct-bouton { box-shadow: 5px 5px 0 var(--creme); }
.ct-encre .ct-bouton-sous-titre { color: var(--creme); }
.ct-encre :focus-visible { outline-color: var(--citron); }

/* Bandeau final : crème sur bleu électrique (8,1:1), l’anneau de focus passe en citron */
.ct-cloture {
  margin-top: clamp(var(--espace-40), 8vw, var(--espace-80));
  padding: clamp(var(--espace-28), 6vw, var(--espace-80));
  border-radius: var(--rayon-16); background: var(--bleu); color: var(--creme);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--espace-28);
}
@media (max-width: 559px) { .ct-cloture { margin-inline: calc(-1 * clamp(16px, 5vw, var(--espace-80))); border-radius: 0; padding-inline: var(--espace-20); } }
.ct-cloture .ct-bouton-sous-titre { color: var(--creme); }
.ct-cloture :focus-visible { outline-color: var(--citron); }

/* Pied de page : le même filet et le même air qu’entre les sections. Trois colonnes titrées,
   puis le copyright (Cateline, 21/10/2026) ; elles passent l’une sous l’autre quand la place
   manque : deux par ligne sur téléphone, une seule à 320 px. */
.ct-pied {
  display: flex; flex-direction: column; gap: var(--espace-28);
  margin-top: clamp(56px, 10vw, var(--espace-80)); padding: var(--espace-40) 0; font-size: 16px; color: var(--ardoise);
  border-top: var(--trait-fin) solid var(--ardoise);
}
.ct-pied-nav { display: grid; gap: var(--espace-20) var(--espace-28); grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); max-width: 760px; }
.ct-pied-titre { font-family: var(--font-titres); font-size: 16px; font-weight: 800; line-height: 1.4; color: var(--encre); }
.ct-pied p { margin: 0; }
.ct-pied ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.ct-pied a { display: inline-flex; align-items: center; min-height: 44px; }
.ct-pied a[aria-current="page"] { font-weight: 700; }

@media (min-width: 900px) {
  .ct-moi { grid-template-columns: 240px minmax(0, 1fr); }
}


/* Page d’un talk : le retour au sommaire, en haut du contenu, avant le titre (Cateline,
   21/10/2026). Un lien, pas un bouton ; la flèche, la même que celle du bouton retournée,
   est un masque : rien à lire. Le titre remonte un peu pour rester près du haut de l’écran. */
.ct-retour { display: flex; width: fit-content; margin-top: var(--espace-14); font-size: 16px; }
.ct-retour::before {
  content: ""; width: 16px; height: 16px; margin-right: 6px; flex-shrink: 0; background: currentColor;
  -webkit-mask: var(--fleche) center / contain no-repeat; mask: var(--fleche) center / contain no-repeat;
  transform: scaleX(-1);
}
@media (forced-colors: active) { .ct-retour::before { background: LinkText; } }
.ct-retour + .ct-hero { padding-top: var(--espace-8); }
/* Où et quand, en grand sous le titre (Cateline, 21/10/2026). La date est liée par des espaces
   insécables : seule l’heure peut passer à la ligne. */
.ct-talk-infos { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; font-size: clamp(20px, 2.4vw, 24px); line-height: 1.35; }
.ct-talk-evenement { font-family: var(--font-titres); font-weight: 800; }
/* Les talks d’avant et d’après, sous le dernier appel (Cateline, 21/10/2026) : build.py reprend
   leurs vignettes du sommaire. Côte à côte sur ordinateur, l’une sous l’autre sur téléphone. */
@media (min-width: 760px) { .ct-voisins .ct-vignettes { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; } }
.ct-vignette-sens { padding: var(--espace-14) var(--espace-14) 0; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--ardoise); }
.ct-vignette-sens + .ct-vignette-titre { padding-top: 2px; }

/* Page d’un talk : chaque slide, puis son texte, comme sur noti.st (01/10/2026).
   À partir de 900 px, le texte passe à droite de la slide pour garder la page dense. */
.ct-diapos { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--espace-28); }
.ct-diapo { display: grid; gap: var(--espace-14); align-items: start; }
.ct-diapo img { display: block; width: 100%; height: auto; border-radius: var(--rayon-12); border: var(--trait) solid var(--encre); }
/* Une adresse sans espace (github.com/pcate22/demo-arbre-accessibilite) élargissait la colonne
   à 320 px, espacement du texte agrandi : elle se coupe plutôt (RGAA 10.12, 21/10/2026). */
.ct-diapo-texte { font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.ct-diapo-num { display: inline-block; min-width: 2em; padding: 0 6px; margin-right: 6px; border-radius: var(--rayon-6); background: var(--bleu-pale); font-weight: 700; text-align: center; }
.ct-diapo-dessin { display: block; margin-top: var(--espace-8); font-size: 14px; color: var(--ardoise); }
/* Un texte de slide long se lit par parties, chacune à la ligne (Cateline, 21/10/2026). */
.ct-diapo-partie { display: block; margin-top: 4px; }
/* Une référence sous une slide (Cateline, 21/10/2026 : « sinon on dirait que c’est le contenu
   en soi ») : plus petite, grise, et annoncée en toutes lettres, « Source », « Crédit », « Note ». */
.ct-diapo-source { display: block; margin-top: 4px; font-size: 14px; color: var(--ardoise); }
/* Le son d’une slide, sous son texte : ce qu’on entend, le lecteur, puis la transcription. */
.ct-audio { display: flex; flex-direction: column; gap: var(--espace-8); }
.ct-audio audio { width: 100%; max-width: 33em; }
.ct-audio-titre { font-weight: 700; }
.ct-transcription { font-size: 16px; line-height: 1.5; }
.ct-transcription-titre { font-weight: 700; }
@media (min-width: 900px) { .ct-diapo > .ct-audio { grid-column: 2; } }
@media (min-width: 900px) { .ct-diapo { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--espace-28); } }

/* Formulaire natif, sans JavaScript : rien ne part avant l’envoi. */
.ct-formulaire { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espace-20); max-width: 33em; }
.ct-champ { display: flex; flex-direction: column; gap: var(--espace-8); align-self: stretch; }
.ct-champ label { font-weight: 700; }
.ct-champ input { min-height: 48px; padding: 0 var(--espace-14); border: var(--trait) solid var(--encre); border-radius: var(--rayon-10); background: var(--blanc); color: var(--encre); font: inherit; }
/* Les petites lignes sous le champ, usages de l’adresse et mentions, en plus petit
   (Cateline, 01/10/2026 puis 07/10/2026 ; la case de refus a disparu le 07/10/2026). */
.ct-formulaire .ct-note { font-size: 13px; line-height: 1.5; }
/* Le formulaire de contact (23/10/2026) : le sujet en boutons radio natifs, un par ligne,
   chacun assez haut pour le doigt, puis le message, qu’on peut agrandir en hauteur. */
.ct-sujets { display: flex; flex-direction: column; gap: var(--espace-8); margin: 0; padding: 0; border: 0; min-width: 0; }
.ct-sujets legend { padding: 0; margin-bottom: var(--espace-8); font-weight: 700; }
.ct-sujets label { display: flex; align-items: center; gap: var(--espace-8); min-height: 44px; }
.ct-sujets input { flex-shrink: 0; width: 20px; height: 20px; margin: 0; accent-color: var(--bleu); }
.ct-champ textarea { min-height: 10em; padding: var(--espace-14); border: var(--trait) solid var(--encre); border-radius: var(--rayon-10); background: var(--blanc); color: var(--encre); font: inherit; resize: vertical; }