/* ─────────────────────────────────────────────────────────
   Émotivance · /approche — mise en page des sept sections.

   Le schéma du système nerveux est la pièce la plus forte du
   site et n'a aucun équivalent dans le kit Dermato : seule son
   apparence change ici. Les crochets que lit `app.js` —
   `#ns-states`, `.ns-state[data-state]`, `--state-color`,
   `#ns-back`, `.ns-back__bullet`, `.ns-back__text`, `.is-active`,
   `aria-selected` — sont inchangés, au caractère près.

   Préfixe `ap-` pour les pièces propres à la page.
   ───────────────────────────────────────────────────────── */


/* ═══ Hero — panneau nuit ═════════════════════════════
   La page s'ouvrait sur du texte posé à plat sur l'ivoire :
   beaucoup de blanc, aucune masse, rien qui tienne le regard.
   Elle s'ouvre maintenant sur un OBJET — un panneau bleu nuit
   arrondi, détaché des bords, éclairé d'un halo qui respire.

   Trois registres se superposent, du plus sombre au plus clair :
   la nuit (le panneau), l'ivoire (la carte de parole rapportée,
   qui inverse le contraste et devient le second point d'entrée),
   le champagne (filets, halo, emphase du titre). Le récit est
   découpé en strophes par `hero-stanzas.js` — une par ligne
   vide du champ CMS — et chaque strophe est tenue par un filet
   vertical coiffé d'un accent champagne.

   La bande de mots qui suit (`.ap-band`) reste sur l'ivoire :
   c'est elle qui fait respirer la page après la masse sombre. */

.ap-hero {
  /* Le panneau se cale sous la barre blanche, presque au contact :
     il doit lire comme une couverture, pas comme une section. */
  padding-block: clamp(10px, 0.5rem + 0.8vw, 22px) clamp(48px, 2.5rem + 3vw, 90px);
}

/* Lueur ambiante posée SOUS le panneau de verre. Elle n'est pas
   décorative : sans elle la transparence n'aurait rien à diffuser
   — l'ivoire de la page est un aplat — et le verre ne se lirait
   pas. C'est elle que `backdrop-filter` va flouter, et c'est elle
   qui déborde en halo autour des arêtes du panneau.

   `isolation` retient la lueur dans la section : sans elle, un
   z-index négatif passerait derrière le fond de page. */
.ap-hero > .container {
  position: relative;
  isolation: isolate;
}
.ap-hero > .container::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: clamp(-16px, -0.6rem - 0.6vw, -6px);
  inset-inline: calc(var(--gutter) * 0.4);
  border-radius: clamp(20px, 1rem + 1.6vw, 40px);
  background:
    radial-gradient(52% 62% at 80% 78%, var(--ornament), transparent 66%),
    radial-gradient(44% 54% at 16% 22%, var(--accent), transparent 68%),
    radial-gradient(38% 46% at 46% 100%, var(--ornament-60), transparent 70%),
    radial-gradient(30% 40% at 96% 18%, var(--ornament-35), transparent 70%);
  filter: blur(clamp(26px, 1.4rem + 1.6vw, 52px));
  opacity: 0.85;
  pointer-events: none;
}

.ap-hero__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding:
    clamp(30px, 1.6rem + 3vw, 76px)
    clamp(22px, 1rem + 3vw, 68px)
    clamp(30px, 1.6rem + 2vw, 56px);
  border-radius: clamp(20px, 1rem + 1.6vw, 40px);

  /* Les trois nuits du dégradé, nommées une fois : le panneau les
     sert en version translucide (verre) ou pleine (repli). */
  --panel-night-1: color-mix(in srgb, var(--primary-3) 88%, var(--primary-1));
  --panel-night-2: var(--primary-3);
  --panel-night-3: color-mix(in srgb, var(--primary-3) 84%, var(--default-950));

  /* ─ Le verre ─
     La translucidité est DÉGRADÉE, jamais uniforme : dense en haut
     à gauche, où se posent le badge champagne (12 px, donc 4,5:1
     exigé) et le titre ; nettement plus ouverte en bas à droite, où
     le verre ne porte plus que les strophes et la carte ivoire —
     c'est là que la lueur champagne traverse la plaque.

     Ces trois pourcentages sont un budget de contraste, pas un
     réglage esthétique. Relevé au pixel sur le rendu (Chrome,
     1440 px) : badge 4,79:1, titre champagne 4,03:1 (grand corps,
     seuil 3:1), strophes 6,09:1, ivoire 8,2 à 9,7:1. Les ouvrir
     davantage fait passer le badge sous 4,5:1. */
  --glass-top: 96%;
  --glass-mid: 90%;
  --glass-bot: 82%;

  --panel-glass:
    radial-gradient(120% 85% at 84% -10%, var(--accent-60), transparent 58%),
    linear-gradient(152deg,
      color-mix(in srgb, var(--panel-night-1) var(--glass-top), transparent),
      color-mix(in srgb, var(--panel-night-2) var(--glass-mid), transparent) 52%,
      color-mix(in srgb, var(--panel-night-3) var(--glass-bot), transparent));
  --panel-solid:
    radial-gradient(120% 85% at 84% -10%, var(--accent-60), transparent 58%),
    linear-gradient(168deg,
      var(--panel-night-1),
      var(--panel-night-2) 54%,
      var(--panel-night-3));

  background: var(--panel-glass);
  backdrop-filter: blur(26px) saturate(135%);
  -webkit-backdrop-filter: blur(26px) saturate(135%);

  /* Arêtes de verre : un liseré ivoire très dilué tout autour, un
     filet plus clair sur la seule arête haute — la lumière vient
     du haut — et l'ombre portée qui détache la plaque du papier. */
  border: 1px solid color-mix(in srgb, var(--primary-4) 14%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--primary-4) 20%, transparent),
    0 30px 70px -34px color-mix(in srgb, var(--primary-3) 55%, transparent);

  /* Encres locales du panneau. L'ivoire tient 11:1 sur la nuit,
     sa déclinaison douce 7:1 — le champagne reste réservé aux
     ornements et à l'emphase du titre (5,38:1). */
  --panel-ink:      var(--primary-4);
  --panel-ink-soft: color-mix(in srgb, var(--primary-4) 82%, var(--primary-3));
}

/* Reflet spéculaire — la lumière qui accroche l'angle d'une plaque
   de verre. Il se pose en HAUT À DROITE, sur le seul quart du
   panneau sans texte, jamais sur le badge ni le titre : un voile
   ivoire, même à 10 %, éclaircit le fond et ferait tomber le
   champagne du badge (12 px, 4,5:1 exigé) de 5,3:1 à 4,1:1.
   Mesuré : c'est exactement ce qui s'est produit au premier essai.

   Purement optique, donc sous le contenu (z-index négatif dans le
   contexte d'empilement du panneau). */
.ap-hero__panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(38% 46% at 96% -8%,
      color-mix(in srgb, var(--primary-4) 13%, transparent),
      transparent 62%),
    linear-gradient(to bottom,
      color-mix(in srgb, var(--primary-4) 7%, transparent),
      transparent 3%);
  pointer-events: none;
}

/* Sans `backdrop-filter` — Firefox par défaut, anciens Safari —
   la transparence seule délaverait la nuit sans rien flouter :
   on repasse à l'aplat plein. Même chose si l'utilisateur demande
   moins de transparence au système. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ap-hero__panel { background: var(--panel-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  .ap-hero__panel {
    background: var(--panel-solid);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .ap-hero > .container::before { opacity: 0.4; }
}

/* Panneau plein écran : le badge champagne (12 px) n'est plus qu'à
   8 % du haut de la plaque, en pleine zone de verre. Or l'ivoire
   de la page est très clair — 4 % suffisent à éclaircir le fond :
   mesuré, le badge tombait à 4,32:1 contre 4,59:1 sur l'aplat
   d'origine, sous le seuil de 4,5:1. Isoler le reflet ou la lueur
   n'y changeait rien : c'est la translucidité elle-même.

   Sous 1080 px, le verre commence donc SOUS le titre — haut de
   plaque plein, glissement vers 88 % en pied, là où la lueur
   champagne traverse et où ne restent que les strophes (6,7:1) et
   la carte ivoire, opaque. */
@media (max-width: 1079px) {
  .ap-hero__panel {
    --glass-top: 100%;
    --glass-mid: 100%;
    --glass-bot: 88%;
    --panel-glass:
      radial-gradient(120% 85% at 84% -10%, var(--accent-60), transparent 58%),
      linear-gradient(172deg,
        color-mix(in srgb, var(--panel-night-1) var(--glass-top), transparent),
        color-mix(in srgb, var(--panel-night-2) var(--glass-mid), transparent) 42%,
        color-mix(in srgb, var(--panel-night-3) var(--glass-bot), transparent));
  }
}

/* Halo respirant — le motif du site (souffle, régulation) posé
   en lumière plutôt qu'en illustration. Deux anneaux champagne
   dilatent et se relâchent en 11 s, sans jamais boucler net. */
.ap-hero__aura {
  position: absolute;
  z-index: -1;
  inset-block-start: clamp(-220px, -8rem - 6vw, -90px);
  inset-inline-end: clamp(-140px, -4rem - 5vw, -40px);
  width: min(620px, 68%);
  aspect-ratio: 1;
  border-radius: var(--r-pill);
  background: radial-gradient(circle, var(--ornament-20), transparent 62%);
  animation: ap-breathe 11s var(--ease) infinite alternate;
  pointer-events: none;
}
.ap-hero__aura::before,
.ap-hero__aura::after {
  content: "";
  position: absolute;
  border-radius: var(--r-pill);
  border: 1px solid var(--ornament-20);
  animation: ap-breathe 11s var(--ease) infinite alternate;
}
.ap-hero__aura::before { inset: 16%; animation-delay: -3.5s; }
.ap-hero__aura::after  { inset: 30%; border-color: var(--ornament-35); animation-delay: -7s; }

@keyframes ap-breathe {
  from { transform: scale(0.94); opacity: 0.65; }
  to   { transform: scale(1.06); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ap-hero__aura,
  .ap-hero__aura::before,
  .ap-hero__aura::after { animation: none; }
}

/* ─ Le titre, pleine largeur ──────────────────────────
   Il occupe toute la largeur du panneau : chaque phrase tient
   alors sur SA ligne, sans césure ni orphelin, et le titre lit
   comme une inscription. C'est lui, et rien d'autre, qui ouvre
   la page — le récit et la parole viennent dessous. */
.ap-hero__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(18px, 1rem + 1vw, 30px);
}
/* Badge sur la nuit : contour champagne, fond transparent — le
   champagne se pose SUR le bleu, jamais l'inverse. */
.ap-hero__badge {
  background: transparent;
  border: 1px solid var(--ornament-35);
  color: var(--ornament);
}
.ap-hero__badge::before { background: var(--ornament); }

.ap-hero__title {
  font-size: var(--t-h1);
  line-height: 1.06;
  color: var(--panel-ink);
  /* Pas de `balance` ici : l'équilibrage automatique redécoupe les
     deux phrases en quatre lignes bancales. Chaque phrase tient sur
     sa ligne tant que la largeur le permet, et se casse d'elle-même
     ensuite — un titre plus long saisi au CMS ne déborde jamais. */
  text-wrap: pretty;
}
/* L'emphase passe au champagne : sur la nuit il tient 5,38:1,
   là où il échouerait sur l'ivoire. */
.ap-hero__title em { font-style: italic; color: var(--ornament); }
.ap-hero__title-2 {
  display: block;
  color: var(--panel-ink-soft);
}
/* Sous 1080px les phrases ne tiennent plus sur une ligne : mesure
   resserrée pour que la casse tombe au milieu, pas sur un mot seul. */
@media (max-width: 1079px) {
  .ap-hero__title { max-width: 20ch; }
}

/* ─ Le corps du panneau ───────────────────────────────
   Sous le titre, un filet champagne pleine largeur, puis deux
   masses : le récit à gauche, la parole rapportée à droite. La
   carte n'est plus perdue en bas de page — elle referme la
   ligne de lecture. */
.ap-hero__body {
  display: grid;
  gap: clamp(28px, 1.5rem + 2vw, 52px);
  margin-top: clamp(34px, 1.8rem + 2.6vw, 66px);
  padding-top: clamp(24px, 1.4rem + 1.6vw, 44px);
  border-top: 1px solid var(--ornament-20);
}
@media (min-width: 1080px) {
  .ap-hero__body {
    grid-template-columns: minmax(0, 1.62fr) minmax(300px, 0.78fr);
    gap: clamp(36px, 1.8rem + 3vw, 76px);
  }
}
/* En colonne, la citation passe devant le récit : c'est elle qui
   accroche, le récit se lit ensuite. La carte garde une mesure de
   lecture — pleine largeur, elle deviendrait une bannière vide. */
@media (max-width: 1079px) {
  .ap-hero__voice { order: -1; max-width: 640px; }
  .ap-hero__voice-text { max-width: none; }
}

/* La parole rapportée devient une carte ivoire posée sur la nuit :
   contraste inversé, c'est le second point d'entrée du regard. */
.ap-hero__voice {
  position: relative;
  margin: 0;
  padding:
    clamp(26px, 1.4rem + 1.6vw, 40px)
    clamp(22px, 1rem + 1.6vw, 36px)
    clamp(24px, 1.2rem + 1.4vw, 36px);
  border-radius: clamp(16px, 0.8rem + 1vw, 26px);
  background: var(--primary-4);
  box-shadow: var(--shadow-lg);
}
/* Arête champagne en tête de carte — la même signature que les
   filets des strophes, en plus affirmé. */
.ap-hero__voice::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: clamp(22px, 1rem + 1.6vw, 36px);
  width: 56px;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--ornament);
}

/* Guillemet en filigrane, dans le seul doré assez sombre pour
   tenir sur l'ivoire (3,27:1) — et en très grand corps. */
.ap-hero__voice-mark {
  position: absolute;
  inset-block-start: clamp(-10px, -0.4rem - 0.4vw, -2px);
  inset-inline-end: clamp(14px, 1rem + 0.6vw, 26px);
  font-family: var(--font-heading);
  font-size: clamp(88px, 4rem + 5vw, 150px);
  line-height: 1;
  color: var(--ornament-35);
  pointer-events: none;
  user-select: none;
}

.ap-hero__voice-intro,
.ap-hero__voice-text { position: relative; }

.ap-hero__voice-intro {
  /* Le sur-titre s'arrête avant le guillemet en filigrane : les deux
     ne doivent jamais se croiser. */
  padding-inline-end: clamp(44px, 2rem + 2.4vw, 76px);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-3);
}
.ap-hero__voice-text {
  margin: var(--sp-4) 0 0;
  max-width: 24ch;
  font-family: var(--font-heading);
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  text-wrap: pretty;
}
/* Les guillemets français sont posés par la feuille de style, pas
   saisis dans le CMS : le champ reste une phrase propre. */
.ap-hero__voice-text::before { content: "\00AB\00A0"; }
.ap-hero__voice-text::after  { content: "\00A0\00BB"; }

/* ─ Le récit, en strophes ─────────────────────────────
   Le champ est écrit en lignes courtes séparées par des lignes
   vides : ces respirations font le rythme. `hero-stanzas.js` en
   fait un bloc par respiration ; les retours simples à
   l'intérieur d'une strophe sont conservés (`pre-line`).

   Repli sans JS : la source reste visible et garde le rythme du
   champ — c'est `hero-stanzas.js` qui la masque, une fois les
   strophes posées. */
.ap-hero__source {
  max-width: 62ch;
  color: var(--panel-ink-soft);
  font-size: var(--t-h5);
  line-height: 1.7;
  white-space: pre-line;
}

.ap-hero__stanzas {
  display: grid;
  gap: clamp(24px, 1.4rem + 1.4vw, 44px);
}
/* `auto-fit` plutôt qu'un nombre fixe : le nombre de strophes vient
   du texte saisi, pas du gabarit. Deux respirations donnent deux
   colonnes, quatre en donnent trois puis une ligne de plus. */
@media (min-width: 600px) {
  .ap-hero__stanzas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
}

.ap-stanza {
  position: relative;
  padding-inline-start: clamp(16px, 0.8rem + 0.8vw, 26px);
  border-inline-start: 1px solid var(--ornament-20);
  color: var(--panel-ink-soft);
  font-size: var(--t-md);
  line-height: 1.85;
  white-space: pre-line;
  text-wrap: pretty;
}
/* Accent champagne en tête de filet : l'œil sait où chaque
   strophe commence, même quand elles se suivent en colonnes. */
.ap-stanza::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: -2px;
  width: 2px;
  height: clamp(26px, 1.2rem + 1vw, 38px);
  border-radius: var(--r-pill);
  background: var(--ornament);
}
/* La première strophe ouvre le récit : encre pleine, corps au-dessus
   des suivantes. La hiérarchie vient du texte, pas d'un cadre. */
.ap-stanza:first-child {
  color: var(--panel-ink);
  font-size: var(--t-lg);
  line-height: 1.75;
}

/* Bande de mots — remplace la bande d'images du kit. */
.ap-band { padding-block: clamp(28px, 2rem + 1vw, 48px); border-block: 1px solid var(--line-soft); }
/* Ici chaque copie est une phrase qui porte déjà ses séparateurs « · ».
   Le séparateur de raccord entre les deux copies est posé par la feuille
   de style — le champ CMS reste une liste propre, sans « · » final — et
   l'écart de raccord vaut une espace de mot, pas l'écart complet du kit,
   pour que le rythme soit le même partout dans la bande.                  */
.ap-band .marquee__word { padding-inline-end: 0.55em; }
.ap-band .marquee__word::after { content: "\00A0\00B7"; }
/* La piste porte six copies et non deux : `translateX(-50%)` en parcourt
   donc trois, soit le triple de la distance du kit. On triple la durée
   pour retrouver l'allure lente d'origine (~30 px/s).                  */
.ap-band .marquee__track { animation-duration: 135s; }


/* ═══ Système nerveux ═════════════════════════════════ */

/* Section compacte : on retombe sur le rythme court (--section-y-sm)
   au lieu du --section-y de `.section`, le diagramme se suffisant
   d'une respiration plus brève. */
[data-cms-section="nervous-system"] { padding-block: var(--section-y-sm); }

.ap-ns__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  text-align: center;
}
.ap-ns__head h2 { max-width: 20ch; }
/* `pre-line` conserve les retours saisis dans le CMS. La mesure était
   trop courte (62ch) : la première phrase, longue de 75 signes, se
   repliait sur un mot orphelin. 80ch la fait tenir d'un trait tout en
   restant sous le seuil de confort de lecture. */
.ap-ns__head p  { max-width: 80ch; white-space: pre-line; }

.ns-states { position: relative; }

/* La ligne de circulation 1→2→3→1 du diagramme. */
.ns-flow {
  display: none;
  width: 100%;
  height: 56px;
  margin-bottom: calc(var(--sp-5) * -1);
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.5;
  stroke-dasharray: 6 8;
}
@media (min-width: 900px) { .ns-flow { display: block; } }

.ns-cards {
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 900px) {
  .ns-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Chaque état est un bouton : la couleur d'état vient de
   `--state-color`, posée en style inline et lue par app.js. */
.ns-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--line-gold);
  border-radius: var(--r-2xl);
  background: var(--primary-4);
  text-align: left;
  transition:
    background-color var(--dur) var(--ease),
    border-color     var(--dur) var(--ease),
    box-shadow       var(--dur) var(--ease);
}
.ns-state:hover { border-color: var(--line-strong); }
.ns-state.is-active {
  background: var(--white);
  border-color: color-mix(in srgb, var(--state-color) 45%, transparent);
  box-shadow: var(--shadow);
}

.ns-orb {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: none;
}
.ns-orb__halo,
.ns-orb__ring {
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
}
.ns-orb__halo {
  background: color-mix(in srgb, var(--state-color) 16%, transparent);
  transform: scale(1);
  transition: transform var(--dur) var(--ease);
}
.ns-state.is-active .ns-orb__halo { transform: scale(1.12); }
.ns-orb__ring { border: 1px solid color-mix(in srgb, var(--state-color) 40%, transparent); }
.ns-orb__core {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-pill);
  background: var(--state-color);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: var(--t-md);
  line-height: 1;
}

.ns-state__title { font-size: var(--t-h4); }
.ns-state__lede {
  font-size: var(--t-md);
  line-height: var(--lh-body);
  color: var(--ink-2);
  white-space: pre-line;
}

/* Signaux corporels — pastilles blanches. */
.ns-signals { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ns-signal {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--white);
  border: 1px solid var(--line-soft);
  color: var(--ink-2);
  font-size: var(--t-xs);
  line-height: 1.5;
}
.ns-state.is-active .ns-signal { background: var(--primary-5); }

/* « ventral · vagal » — badge à point, à la couleur de l'état. */
.ns-state__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: auto;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--state-color) 12%, transparent);
  color: var(--ink);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.ns-state__pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--state-color);
  flex: none;
}

/* Bandeau d'action — cartouche en verre posé sous les cartes.
   Il n'est pas sur une photographie : le voile bronze suffit à
   le détacher, et le texte reste en encre. */
.ns-back {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--line-gold);
  border-radius: var(--r-xl);
  background: var(--white);
}
/* app.js repose la couleur de l'état actif sur `#ns-back` : la pastille
   et son halo en découlent. Sécurité si le JS n'a pas encore tourné. */
.ns-back__bullet {
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 7px;
  border-radius: var(--r-pill);
  background: var(--state-color, var(--accent));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--state-color, var(--accent)) 16%, transparent);
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ns-back__text {
  font-size: var(--t-md);
  line-height: var(--lh-body);
  color: var(--ink-2);
}
.ns-back__text strong { color: var(--ink); font-weight: 600; }
.ns-back__text em { font-style: italic; color: var(--accent-text); }

.ap-ns__closing {
  max-width: 52ch;
  margin: var(--sp-8) auto 0;
  font-family: var(--font-heading);
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  text-align: center;
}


/* ═══ Quatre appuis ═══════════════════════════════════
   Numéro géant de part et d'autre, en deux colonnes : les
   paragraphes sont longs, trois colonnes les étrangleraient.
   Section volontairement plus compacte que les autres : le
   titre, les numéros et les respirations sont d'un cran en
   dessous de l'échelle globale.                             */

#principles { padding-block: var(--section-y-sm); }

/* Le chapeau court sur toute la largeur de la section : titre et
   intro se déplient sur la pleine mesure, pas dans une colonne. */
.ap-principles__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: none;
  margin-bottom: var(--sp-7);
}
.ap-principles__head h2 {
  max-width: none;
  font-size: clamp(26px, 1.4rem + 1.2vw, 36px);
  text-wrap: pretty;
}
.ap-principles__head .lede { font-size: var(--t-base); }
.ap-principles__head p { max-width: none; white-space: pre-line; }

.ap-principles__grid { display: grid; gap: var(--sp-6); }
@media (min-width: 900px) {
  .ap-principles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7) var(--sp-8); }
}

.ap-principle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3) var(--sp-4);
  align-items: start;
}
.ap-principle__num {
  grid-row: 1 / 3;
  font-family: var(--font-heading);
  font-size: clamp(34px, 3.6vw + 10px, 54px);
  line-height: 0.9;
  color: var(--ornament-deep);
  font-variant-numeric: tabular-nums;
}
.ap-principle__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.ap-principle__title { font-size: var(--t-h4); }
.ap-principle__text { font-size: var(--t-md); white-space: pre-line; }


/* ═══ En pratique — les quatre temps ══════════════════ */

/* Le bloc titre est plus proche du haut du slab que la règle générale.
   Le bas est resserré lui aussi : la phrase de clôture est courte et
   centrée, la respiration standard laissait une bande vide sous elle. */
[data-cms-section="process"].section {
  padding-top: var(--section-y-sm);
  padding-bottom: clamp(48px, 2.5rem + 2.5vw, 90px);
}

/* Le bloc titre occupe toute la largeur de la section : le titre et
   l'intro s'étendent sur la pleine mesure du conteneur, comme les
   quatre cartes d'étapes qui suivent. */
.ap-process__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}

.ap-steps { display: grid; gap: var(--sp-5); }
@media (min-width: 700px) { .ap-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ap-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ap-step {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  border-radius: var(--r-2xl);
  background: var(--white);
  border: 1px solid var(--line-gold);
}
.ap-step__num {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent-text);
}
.ap-step__title { font-size: var(--t-h4); }
.ap-step__text { font-size: var(--t-md); white-space: pre-line; }

.ap-process__closing {
  max-width: 56ch;
  margin: var(--sp-8) auto 0;
  font-family: var(--font-heading);
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  text-align: center;
}


/* ═══ La praticienne ══════════════════════════════════
   Le bloc portrait + présentation doit tenir dans une seule
   hauteur d'écran sur ordinateur : c'est un moment de lecture
   continu, pas un défilé. Trois leviers, dans cet ordre :

     · la colonne de texte s'élargit — la même bio y tient en
       moins de lignes, sans réduire le confort de lecture ;
     · le portrait n'impose plus son 4:5 : il s'étire sur la
       hauteur du texte, les deux colonnes finissent ensemble ;
     · le rythme vertical se resserre (gouttières, médaillons).

   Les tailles restent en pixels/`ch` : rien ne dépend de la
   hauteur de fenêtre, le zoom navigateur reste sain.        */

/* Respiration réduite autour du bloc : c'est elle qui décidait,
   à elle seule, que le portrait dépasse du bas de l'écran. */
/* Le bas est volontairement court : la carte « Formations & ce
   que j'accompagne » enchaîne juste après le portrait, les deux
   blocs se lisent comme un seul dossier praticienne. */
[data-cms-section="practitioner"].section {
  padding-block: clamp(64px, 3rem + 2.4vw, 104px) var(--sp-4);
}

/* Quatre zones : portrait, identité, récit, qualifications. Le récit
   suit le nom dans la colonne de droite, et le bouton reste la
   dernière chose lue du bloc. */
.ap-practitioner {
  display: grid;
  gap: var(--sp-7);
  align-items: start;
  grid-template-areas:
    "media"
    "head"
    "story"
    "meta";
}
.ap-practitioner__media { grid-area: media; }
.ap-practitioner__head  { grid-area: head; }
.ap-practitioner__story { grid-area: story; }
.ap-practitioner__meta  { grid-area: meta; }

@media (min-width: 900px) {
  .ap-practitioner {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    grid-template-areas:
      "media head"
      "media story"
      "media meta";
    /* La dernière rangée absorbe le surplus éventuel du portrait : le
       nom, le récit et les médaillons restent collés les uns aux
       autres au lieu d'être écartés par un vide réparti. */
    grid-template-rows: min-content min-content 1fr;
    column-gap: var(--sp-8);
    row-gap: var(--sp-5);
  }
  .ap-practitioner__head,
  .ap-practitioner__story,
  .ap-practitioner__meta { align-self: start; }
  .ap-practitioner__media { align-self: start; }
}
/* Entre 900 et 1200 px, la colonne d'identité devient étroite pour le
   nom et les médaillons : le portrait cède du terrain. */
@media (min-width: 900px) and (max-width: 1199px) {
  .ap-practitioner {
    grid-template-columns: minmax(0, 0.64fr) minmax(0, 1.36fr);
    column-gap: var(--sp-7);
  }
}

.ap-practitioner__media { position: relative; }
/* Le portrait garde ses proportions 4/5 : la colonne de texte est
   désormais plus haute que lui, l'étirer donnerait une bande
   verticale démesurée. */
@media (min-width: 900px) {
  .ap-practitioner__media .media {
    aspect-ratio: 4 / 5;
    height: auto;
    min-height: 420px;
  }
}

.ap-practitioner__head,
.ap-practitioner__story,
.ap-practitioner__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
}
.ap-practitioner__head { gap: var(--sp-4); }
@media (min-width: 900px) {
  .ap-practitioner__story,
  .ap-practitioner__meta { gap: var(--sp-4); }
}
.ap-practitioner__name { font-size: var(--t-h2); }
.ap-practitioner__role {
  margin-top: calc(var(--sp-4) * -1);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-3);
}
/* Le récit occupe toute la colonne de droite : la largeur de la
   colonne fait déjà office de mesure, pas de bride supplémentaire. */
.ap-practitioner__bio { max-width: none; white-space: pre-line; }
@media (min-width: 900px) {
  /* Le premier paragraphe reste le chapô, mais à la taille du
     corps : à 18px il coûtait deux lignes de plus par phrase. */
  .lede.ap-practitioner__bio {
    font-size: var(--t-base);
    line-height: 1.55;
  }
}
/* Écrans courts et étroits : un cran de plus, sinon les deux
   derniers médaillons passent sous la ligne de flottaison. */
@media (min-width: 900px) and (max-width: 1199px) {
  .lede.ap-practitioner__bio,
  .body.ap-practitioner__bio { font-size: var(--t-md); }
}

/* Qualifications — médaillons resserrés, une ligne par intitulé. */
@media (min-width: 900px) {
  .ap-practitioner .icon-list { gap: var(--sp-3); }
  .ap-practitioner .icon-list .icon-list__badge { width: 32px; height: 32px; }
  .ap-practitioner .icon-list .icon-list__badge svg { width: 18px; height: 18px; }
  .ap-practitioner .icon-list span { font-size: var(--t-base); }
}

.ap-practitioner__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }


/* ═══ Formations & ce que j'accompagne ════════════════
   Ces deux colonnes ne sont pas un chapitre autonome : ce sont
   les pièces justificatives de « La praticienne ». Elles étaient
   posées sur une dalle pleine largeur, séparée par 200 px de
   respiration — le lecteur perdait le lien avec Cynthia et voyait
   d'abord une bande beige vide.

   On les remet dans la continuité du bloc portrait : une carte
   posée juste sous Cynthia (aplat ivoire doré, filet champagne,
   rayon des cartes du site). La section reste distincte dans le
   CMS — elle se publie séparément — seule la mise en page les
   réunit.                                                      */

/* Aucune respiration propre : ni en haut (la carte du portrait
   enchaîne), ni en bas (l'appel final ouvre lui-même le sien).
   Sinon deux demi-respirations se cumulent en un trou avant le
   bandeau CTA. */
.ap-credentials-section.section { padding-block: 0; }

.ap-credentials {
  display: grid;
  gap: var(--sp-6);
  margin-top: var(--sp-4);
  padding: var(--sp-7);
  border-radius: var(--r-2xl);
  background: var(--surface);
  border: 1px solid var(--line-gold);
}
@media (min-width: 800px) {
  .ap-credentials {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-7);
  }
  /* Filet vertical entre les deux colonnes : il tient l'axe
     central là où l'écart seul laissait les listes flotter. */
  .ap-credentials__col + .ap-credentials__col {
    padding-left: var(--sp-7);
    border-left: 1px solid var(--line-gold-soft);
  }
}
.ap-credentials__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
}
/* Téléphone : 40 px de marge intérieure de chaque côté mangeaient
   un quart de la largeur utile, les intitulés longs cassaient sur
   trois lignes. */
@media (max-width: 560px) {
  /* Empilées, les deux colonnes ont besoin d'un écart plus franc
     que celui qui sépare une pastille de sa liste. */
  .ap-credentials { padding: var(--sp-6) var(--sp-5); gap: var(--sp-7); }
}
.ap-credentials .check-list { gap: var(--sp-3); }
.ap-credentials .check-list li { align-items: flex-start; }
/* Une ligne = un intitulé = une puce. `pre-line` servait de
   rustine quand plusieurs intitulés étaient saisis dans le même
   champ : les lignes 2 et 3 s'affichaient alors sans coche, sous
   le texte. Les champs sont désormais séparés (f1…f6 / a1…a5). */
.ap-credentials .check-list span { text-wrap: pretty; }
/* Une ligne vidée depuis le back-office disparaît au lieu de
   laisser une coche orpheline. */
.ap-credentials .check-list li[hidden] { display: none; }


/* ═══ Appel final ═════════════════════════════════════
   Format sobre — deux intensités plutôt qu'une répétition du
   CTA sur image de l'accueil (§5).

   Le bandeau était ivoire doré sur fond ivoire : deux valeurs
   trop proches, la carte se lisait comme un trou dans la page.
   On passe au blanc surélevé + filet champagne — la même
   grammaire que la carte des formations, mais un cran au-dessus,
   ce que demande une invitation à l'action.                    */

/* Le bandeau conclut la carte des formations, il n'ouvre pas un
   nouveau chapitre : une respiration courte en haut (une demi-
   respiration de section laissait ~120 px de vide entre deux
   cartes qui se répondent). En bas, la pleine respiration de
   section cumulée au padding haut du footer creusait ~230 px de
   vide : le footer porte déjà sa propre respiration, on se
   contente ici de décoller la carte de son bord arrondi. */
.ap-cta-section.section { padding-block: var(--sp-8) var(--sp-7); }

.ap-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: clamp(36px, 3rem + 2vw, 64px);
  border-radius: var(--r-2xl);
  background: var(--surface-raised);
  border: 1px solid var(--line-gold);
}
.ap-cta h2 { max-width: 16ch; }
.ap-cta__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
/* Sur carte blanche, le bouton secondaire perdrait son contour :
   on lui rend un filet plutôt qu'un aplat de même valeur. */
.ap-cta__actions .btn--white {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.ap-cta__actions .btn--white:hover {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: none;
}
/* Téléphone : deux boutons côte à côte n'ont plus la place, et
   « Prendre rendez-vous » cassait en plein milieu. On les empile
   sur toute la largeur — la cible tactile y gagne aussi. */
@media (max-width: 560px) {
  .ap-cta { padding: var(--sp-6) var(--sp-5); }
  .ap-cta__actions { width: 100%; }
  .ap-cta__actions .btn { flex: 1 1 100%; justify-content: center; }
}


/* ═════════════════════════════════════════════════════
   Téléphone — < 600px

   La page portait déjà plusieurs réglages à 560px : celui-ci ne
   fait que compléter, il ne les remplace pas.
   ───────────────────────────────────────────────────── */

@media (max-width: 599px) {
  /* Le guillemet en filigrane faisait 88px de haut sur un bloc de
     citation qui n'en fait plus que 300 de large : il couvrait le
     sur-titre au lieu de l'accompagner. */
  .ap-hero__voice-mark { font-size: 62px; }

  /* Le numéro de principe prenait 34px de large sur 350 : il passe
     à l'échelle du titre qu'il annonce. */
  .ap-principle__num { font-size: 30px; }
  .ap-principle { gap: var(--sp-2) var(--sp-3); }
  .ap-principles__head { margin-bottom: var(--sp-6); }
  .ap-principles__grid { gap: var(--sp-5); }

  .ap-band { padding-block: 26px; }

  /* Cartes à 30px de rembourrage : le texte n'avait plus que 290px. */
  .ap-step { padding: var(--sp-5); }
  .ns-back { padding: var(--sp-5) var(--sp-4); }
}