/* ─────────────────────────────────────────────────────────
   Émotivance · /entreprises/<formation> — les deux formations
   d'une journée : « Agir avant le conflit » et « Discerner avant
   de répondre ».

   Elles remplacent les trois pages « Format · … » servies sous
   /offres/… (retirées en septembre 2026, redirigées en 301).

   Les maquettes du client posent un vocabulaire commun aux deux
   pages : petit sur-titre encadré de filets, titre serif, filet
   doré court sous les titres, pastilles rondes, encadrés à barre
   dorée. Ce fichier le traduit dans la DA du site — le doré reste
   un ORNEMENT (filets, anneaux, pictogrammes) et ne porte jamais
   de libellé ni de fond sous un élément bleu. Là où la maquette
   posait un bouton doré à libellé blanc (2,23:1), le bouton passe
   au contour doré sur fond blanc.

   Préfixe `fm-`. Dépend de tokens, base, components.
   ───────────────────────────────────────────────────────── */


/* ═══ Rythme vertical ═════════════════════════════════
   Six à huit sections de texte dense se suivent : la respiration
   narrative du site (jusqu'à 200px haut et bas) creusait des
   bandes vides plus hautes que le contenu. Même resserrement que
   les anciennes pages de format.                              */

body[data-cms-page^="formation-"] {
  --section-y:      clamp(56px, 2.6rem + 3vw, 112px);
  --section-y-sm:   clamp(40px, 1.8rem + 2vw, 72px);
  --section-y-seam: clamp(48px, 2.4rem + 2.4vw, 96px);
}


/* ═══ Fil d'Ariane ════════════════════════════════════ */

.fm-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding-top: var(--sp-5);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-3);
}
.fm-crumbs a { color: var(--ink-3); }
.fm-crumbs a:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.fm-crumbs [aria-current] { color: var(--ink); }
.fm-crumbs span[aria-hidden] { opacity: 0.55; }
@media (pointer: coarse) {
  .fm-crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
}


/* ═══ Vocabulaire commun ══════════════════════════════ */

/* Sur-titre encadré de deux filets dorés : « — FORMATION · 1 JOUR — ».
   Le libellé reste en pétrole : le doré ne tient pas en petit corps. */
.fm-kicker {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.fm-kicker::before,
.fm-kicker::after {
  content: "";
  flex: none;
  width: 28px;
  height: 1px;
  background: var(--ornament);
}

/* Filet court sous un titre. */
.fm-rule {
  display: block;
  width: 56px;
  height: 2px;
  border-radius: 2px;
  background: var(--ornament);
}

.fm-title {
  font-size: var(--t-h3);
  line-height: var(--lh-heading);
  text-wrap: balance;
}
.fm-title--xl { font-size: var(--t-h2); }

.fm-lede {
  font-size: var(--t-lg);
  line-height: var(--lh-body);
  color: var(--ink);
  max-width: 62ch;
}
.fm-body {
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--ink-2);
  max-width: 62ch;
}
.fm-body--ink { color: var(--ink); font-weight: 600; }
.fm-note {
  font-size: var(--t-md);
  line-height: var(--lh-body);
  color: var(--ink-2);
  max-width: 60ch;
}

/* Phrase porteuse, en serif — « Un conflit ne commence pas… ». */
.fm-statement {
  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: balance;
  max-width: 40ch;
}
/* Dans le bandeau, la phrase tient sur une ligne tant que la colonne
   le permet : elle prend toute sa largeur et son corps s'ajuste. */
.fm-hero .fm-statement {
  max-width: none;
  font-size: clamp(20px, 0.9rem + 1.25vw, 30px);
  text-wrap: nowrap;
}
@media (max-width: 899px) { .fm-hero .fm-statement { text-wrap: balance; } }

/* Phrase de conclusion. La maquette la posait en doré : il ne tient
   que 3,27:1 — insuffisant sous 24px. Elle passe en pétrole clair,
   en italique, soulignée d'un filet doré à gauche. */
.fm-closing {
  padding-inline-start: var(--sp-4);
  border-inline-start: 2px solid var(--ornament);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--t-h5);
  line-height: var(--lh-snug);
  color: var(--accent-text);
  max-width: 48ch;
  text-wrap: pretty;
}

/* Sous-titre en italique sur un cartouche, barre dorée à gauche —
   « Encore faut-il savoir quoi faire de ce que l'on perçoit. ». */
.fm-tagline {
  width: fit-content;
  max-width: 100%;
  padding: 10px 20px 10px 18px;
  border-inline-start: 3px solid var(--ornament);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--surface);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  color: var(--ink);
  text-wrap: balance;
}
.slab .fm-tagline { background: var(--primary-4); }
/* Variante capitales — la ligne « Formation professionnelle · … ». */
.fm-tagline--caps {
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent-text);
}

/* Encadré à barre dorée — phrase forte en serif, suite en courant. */
.fm-callout {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-6);
  border-inline-start: 3px solid var(--ornament);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  background: var(--surface);
}
.slab .fm-callout { background: var(--primary-4); }
.fm-callout__title {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  color: var(--ink);
  text-wrap: balance;
}
.fm-callout__text { font-size: var(--t-base); line-height: var(--lh-body); color: var(--ink-2); }
.fm-callout--wide { margin-top: var(--sp-7); }

/* Variante « à noter » — pastille point d'exclamation. */
.fm-callout--note {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--sp-5);
  margin-top: var(--sp-7);
}
.fm-callout--note .fm-callout__text {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--t-h5);
  line-height: var(--lh-snug);
  color: var(--ink);
}
.fm-callout__mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: var(--slab-ink);
  color: var(--on-slab-ink);
  font-family: var(--font-heading);
  font-size: var(--t-h4);
  line-height: 1;
}

/* Pastille ronde à pictogramme. Deux teintes seulement, qui
   alternent comme sur les maquettes :
     claire — fond blanc, anneau et trait dorés ;
     encre  — bleu nuit, trait champagne (5,38:1).
   Jamais de pictogramme bleu sur un fond doré. */
.fm-medal {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-pill);
  background: var(--white);
  border: 1px solid var(--ornament-60);
  color: var(--ornament-deep);
}
.fm-medal svg { width: 22px; height: 22px; }
.fm-medal--lg { width: 60px; height: 60px; }
.fm-medal--lg svg { width: 28px; height: 28px; }
.fm-medal--ink {
  background: var(--slab-ink);
  border-color: var(--slab-ink);
  color: var(--on-slab-ink);
}


/* ═══ Listes ══════════════════════════════════════════ */

/* Liste à coches dans une pastille dorée. Le rond et la coche sont
   dessinés en CSS : le <li> ne porte que son texte, éditable. */
.fm-checks { display: grid; gap: var(--sp-3); list-style: none; }
.fm-checks li {
  position: relative;
  min-height: 28px;
  padding-inline-start: 42px;
  padding-top: 3px;
  font-size: var(--t-base);
  line-height: var(--lh-snug);
  color: var(--ink);
}
.fm-checks li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  background: var(--white);
  border: 1px solid var(--ornament-60);
}
.fm-checks li::after {
  content: "";
  position: absolute;
  inset-inline-start: 8px;
  top: 10px;
  width: 12px;
  height: 7px;
  border-inline-start: 2px solid var(--ornament-deep);
  border-block-end: 2px solid var(--ornament-deep);
  transform: rotate(-45deg);
}

/* Liste à puces dorées. */
.fm-dots { display: grid; gap: var(--sp-3); list-style: none; }
.fm-dots li {
  position: relative;
  padding-inline-start: 30px;
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--ink);
}
.fm-dots li::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  top: 0.62em;
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--ornament);
}

/* Deux colonnes, lues de haut en bas puis de gauche à droite : la
   maquette range ainsi les objectifs, et l'ordre de lecture reste
   celui de la liste. */
@media (min-width: 760px) {
  .fm-checks--split,
  .fm-dots--split {
    display: block;
    columns: 2;
    column-gap: var(--sp-10);
  }
  .fm-checks--split li,
  .fm-dots--split li {
    break-inside: avoid;
    margin-bottom: var(--sp-4);
  }
}

/* Couples intitulé / valeur à pastille — durée, groupe, public… */
.fm-info { display: grid; gap: var(--sp-4); list-style: none; }
.fm-info__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--sp-4);
}
.fm-info__text {
  font-size: var(--t-base);
  line-height: var(--lh-snug);
  color: var(--ink-2);
}
.fm-info__label { font-weight: 700; color: var(--ink); }
.fm-info__label:not(:empty)::after { content: "\00a0:"; }
.fm-info__label:empty { display: none; }
.fm-info__item--strong .fm-info__text { font-weight: 700; color: var(--ink); }


/* ═══ Boutons ═════════════════════════════════════════
   Libellé d'abord, flèche au bout — comme sur les maquettes. */

.fm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.fm-actions .btn {
  flex: 1 1 260px;
  justify-content: space-between;
  padding: 12px 12px 12px 24px;
}
.fm-actions--stack { flex-direction: column; }
.fm-actions--stack .btn { flex: none; }

/* Bouton secondaire : contour doré sur blanc, pastille pleine. */
.btn--line {
  background: var(--white);
  border-color: var(--ornament-deep);
  color: var(--accent-text);
}
.btn--line .btn__icon { background: var(--accent); color: var(--accent-ink); }
.btn--line:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--line:hover .btn__icon { background: var(--white); color: var(--accent-text); }


/* ═══ Bandeau ═════════════════════════════════════════ */

.fm-hero { padding-block: clamp(24px, 1.4rem + 1.6vw, 48px) var(--section-y); }
.fm-hero__grid { display: grid; gap: var(--sp-8); align-items: center; }
@media (min-width: 980px) {
  .fm-hero__grid {
    /* La colonne de texte prend la place : quatre paragraphes y tenaient
       dans 550px, soit dix mots par ligne et une colonne très haute. */
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    column-gap: var(--sp-8);
  }
}
.fm-hero__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
}
.fm-hero__title { font-size: var(--t-display); max-width: 18ch; text-wrap: balance; }
.fm-hero__subtitle {
  font-size: clamp(18px, 1rem + 0.5vw, 23px);
  line-height: var(--lh-snug);
  color: var(--ink);
  max-width: 58ch;
  margin-top: calc(var(--sp-2) * -1);
}
.fm-hero__text { font-size: var(--t-base); line-height: var(--lh-body); color: var(--ink-2); max-width: 76ch; }
.fm-hero .fm-statement { margin-top: var(--sp-2); }

/* Paragraphes successifs du bandeau — chacun peut être vidé depuis
   le back-office sans laisser de trou. */
.fm-prose { display: grid; gap: var(--sp-3); max-width: 76ch; }
.fm-prose p { font-size: var(--t-base); line-height: var(--lh-body); color: var(--ink-2); }
/* Dans le bandeau d'ouverture, la colonne de texte fait 911px sur un
   écran de 1500, mais les paragraphes s'arrêtaient à 76ch (695px) et
   le sous-titre à 58ch : le bloc se terminait 160px avant l'encadré
   posé juste en dessous, et un creux s'ouvrait entre le texte et le
   schéma. Les deux prennent toute la colonne — le corps monte d'un cran
   pour que la ligne reste lisible sur cette mesure. */
.fm-hero .fm-prose,
.fm-hero .fm-hero__text { max-width: none; }
.fm-hero .fm-prose p { font-size: var(--t-lg); }
.fm-hero .fm-hero__subtitle { max-width: none; text-wrap: balance; }
.fm-hero .fm-callout { align-self: stretch; margin-top: var(--sp-2); }

/* Tracés SVG : couleurs portées par classe, jamais en dur. */
.fm-stop--gold  { stop-color: var(--gold); stop-opacity: 0.26; }
.fm-stop--clear { stop-color: var(--gold); stop-opacity: 0; }
.fm-stop--ink   { stop-color: var(--primary-1); stop-opacity: 1; }
.fm-art-fill          { fill: var(--ornament); }
.fm-art-fill--mid     { fill: var(--ornament-60); }
.fm-art-fill--pale    { fill: var(--ornament-35); }
.fm-art-stroke        { stroke: var(--ornament); }
.fm-art-stroke--ink   { stroke: var(--accent); }


/* Photographie d'atelier sous le bandeau — large et basse, pour ne pas
   repousser le contenu : 21:9 au large, 4:3 sur téléphone. */
.fm-hero__photo {
  margin-top: var(--sp-8);
  aspect-ratio: 21 / 9;
}
@media (max-width: 599px) { .fm-hero__photo { aspect-ratio: 4 / 3; margin-top: var(--sp-6); } }

/* ─── La montée (formation 1) ─────────────────────────── */

.fm-rise {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 640 / 440;
  justify-self: center;
}
.fm-rise svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fm-rise__halo  { fill: var(--ornament-10); }
.fm-rise__sun   { fill: var(--ornament); }
.fm-rise__line  { fill: none; stroke: var(--ornament); stroke-width: 1.6; }
.fm-rise__line--soft { stroke: var(--ornament-35); }
.fm-rise__line--ink  { stroke: var(--accent); stroke-width: 1.8; }
.fm-rise__ridge { fill: none; stroke: var(--ornament); stroke-width: 2; }
.fm-rise__leader { fill: none; stroke: var(--ornament-deep); stroke-width: 1.2; stroke-dasharray: 3 4; }
.fm-rise__dot {
  fill: var(--ornament);
  stroke: var(--primary-4);
  stroke-width: 4;
}
.fm-rise__mark {
  position: absolute;
  transform: translate(-50%, -100%);
  padding-bottom: 4px;
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
}


/* ─── Une situation, cinq réponses (formation 2) ──────── */

.fm-branch {
  width: 100%;
  max-width: 560px;
  justify-self: center;
}
.fm-branch svg { width: 100%; height: auto; overflow: visible; }
.fm-branch__halo { fill: var(--ornament-10); }
.fm-branch__stem { fill: none; stroke-width: 2; }
.fm-branch__line { fill: none; stroke: var(--ornament); stroke-width: 1.8; }
.fm-branch__line--ink { stroke: var(--accent); }
.fm-branch__node { fill: var(--ornament); stroke: var(--primary-4); stroke-width: 4; }
.fm-branch__end { fill: var(--ornament); }
.fm-branch__end--ink { fill: var(--accent); }
/* Seul le disque de fond ; les cercles du pictogramme héritent du trait. */
.fm-branch__medal > circle { fill: var(--white); stroke: var(--ornament-60); stroke-width: 1; }
.fm-branch__medal path,
.fm-branch__medal g { fill: none; stroke: var(--ornament-deep); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.fm-branch__medal--ink path,
.fm-branch__medal--ink g { stroke: var(--accent); }

@media (max-width: 979px) {
  .fm-rise, .fm-branch { max-width: 520px; }
}


/* ═══ En-tête de section ══════════════════════════════ */

.fm-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
}
.fm-head .fm-title--xl { max-width: 26ch; }


/* ═══ Avant de chercher les bons mots (formation 1) ═══ */

.fm-intro { display: grid; gap: var(--sp-8); align-items: center; }
@media (min-width: 980px) {
  .fm-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--sp-10); }
}
.fm-intro__lead { display: grid; gap: var(--sp-7); }
.fm-intro__lead .fm-title--xl { font-size: var(--t-h1); max-width: 12ch; }
.fm-intro__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
}

/* Trois pastilles posées sur une vague : percevoir, se poser, parler. */
.fm-steps {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 480px;
  padding-block: var(--sp-6) var(--sp-7);
}
.fm-steps__wave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.fm-steps__line { fill: none; stroke: var(--ornament); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.fm-steps__line--ink { stroke: var(--accent); }
.fm-steps .fm-medal { position: relative; width: 76px; height: 76px; box-shadow: 0 0 0 10px color-mix(in srgb, var(--surface) 70%, transparent); }
.fm-steps .fm-medal svg { width: 34px; height: 34px; }
/* Point doré sous chaque pastille. */
.fm-steps .fm-medal::after {
  content: "";
  position: absolute;
  bottom: -26px;
  left: 50%;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: var(--r-pill);
  background: var(--ornament);
}


/* ═══ Objectifs ═══════════════════════════════════════ */

.fm-motto {
  margin-top: var(--sp-7);
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(26px, 1.4rem + 1vw, 36px);
  letter-spacing: var(--tracking-tight);
  /* Doré assombri : 3,27:1, admis en grand corps (≥ 24px). */
  color: var(--ornament-deep);
}


/* ═══ Deux colonnes séparées d'un filet doré ═════════ */

.fm-split { display: grid; gap: var(--sp-8); }
.fm-split__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
}
.fm-split__col + .fm-split__col {
  padding-top: var(--sp-8);
  border-top: 1px solid var(--line-gold);
}
@media (min-width: 980px) {
  .fm-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 0; }
  .fm-split__col { padding-inline-end: var(--sp-9); }
  .fm-split__col + .fm-split__col {
    padding: 0 0 0 var(--sp-9);
    border-top: 0;
    border-inline-start: 1px solid var(--line-gold);
  }
}


/* ═══ L'approche Émotivance (formation 2) ═════════════
   Texte à gauche, parcours à droite. La liste suit « Elle
   associe : » dans le DOM — le lecteur d'écran l'entend à sa
   place — et la citation vient après ; la grille les replace.   */

.fm-approach { display: grid; gap: var(--sp-7); }
.fm-approach__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}
@media (min-width: 980px) {
  .fm-approach {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    grid-template-areas:
      "head path"
      "pull path";
    grid-template-rows: auto 1fr;
    column-gap: var(--sp-10);
    row-gap: var(--sp-7);
  }
  .fm-approach__head { grid-area: head; }
  .fm-path  { grid-area: path; align-self: center; }
  .fm-pull  { grid-area: pull; align-self: start; }
}

/* Le parcours : pastilles reliées par un fil qui passe du doré au
   pétrole — l'attention au corps mène à la réponse construite. */
.fm-path { display: grid; list-style: none; }
.fm-path__item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--sp-5);
  padding-bottom: var(--sp-4);
}
.fm-path__item:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-inline-start: 29px;
  top: 60px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(var(--ornament), var(--accent));
}
.fm-path__item:nth-child(even)::before { background: linear-gradient(var(--accent), var(--ornament)); }
.fm-path__text { font-size: var(--t-base); line-height: var(--lh-snug); color: var(--ink); }
.fm-pull {
  margin: 0;
  padding: var(--sp-6) var(--sp-7);
  border-inline-start: 4px solid var(--ornament);
  border-radius: 0 var(--r-xl) var(--r-xl) 0;
  background: var(--primary-4);
}
.fm-pull p {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  color: var(--ink);
  text-wrap: pretty;
}


/* ═══ Les réponses relationnelles (formation 2) ═══════ */

.fm-responses {
  display: grid;
  gap: var(--sp-5) var(--sp-10);
  list-style: none;
}
@media (min-width: 900px) {
  .fm-responses {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
  }
}
.fm-response {
  display: grid;
  grid-template-columns: 38px 34px auto minmax(0, 1fr);
  align-items: center;
  column-gap: 0;
}
/* Le numéro reste en doré assombri, mais en grand corps (≥ 24px). */
.fm-response__num {
  font-family: var(--font-heading);
  font-size: 30px;
  line-height: 1;
  color: var(--ornament-deep);
  font-variant-numeric: tabular-nums;
}
.fm-response__link {
  height: 1px;
  margin-inline-end: 6px;
  background: linear-gradient(90deg, var(--ornament), var(--accent));
}
.fm-response .fm-medal { margin-inline-end: var(--sp-5); }
.fm-response__text { font-size: var(--t-base); line-height: var(--lh-snug); color: var(--ink); }


/* ═══ Deux journées complémentaires (formation 2) ═════ */

.fm-duo { display: grid; gap: var(--sp-5); align-items: center; }
@media (min-width: 980px) {
  .fm-duo { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: var(--sp-5); }
}
.fm-day {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: var(--sp-6);
  height: 100%;
  padding: var(--sp-6);
  border-radius: var(--r-2xl);
  background: var(--white);
  border: 1px solid var(--line-gold);
}
.fm-day__art {
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  border-radius: var(--r-pill);
  background: var(--primary-4);
  border: 1px solid var(--ornament-35);
  color: var(--ornament-deep);
}
.fm-day__art svg { width: 64px; height: 64px; }
.fm-day--ink .fm-day__art {
  background: var(--slab-ink);
  border-color: var(--slab-ink);
  color: var(--on-slab-ink);
}
.fm-day__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
}
.fm-day__tag {
  display: inline-flex;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  background: var(--white);
  border: 1px solid var(--ornament-deep);
  font-size: var(--t-sm);
  color: var(--ink);
}
.fm-day--ink .fm-day__tag {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.fm-day__title { font-size: var(--t-h3); }
.fm-day__text { font-size: var(--t-base); line-height: var(--lh-body); color: var(--ink-2); }
.fm-day__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-color: var(--ornament);
  text-underline-offset: 4px;
}
.fm-day__link svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.fm-day__link:hover svg { transform: translateX(3px); }

/* Les deux anneaux enlacés, entre les deux journées. */
.fm-duo__knot {
  justify-self: center;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: var(--r-pill);
  background: var(--primary-4);
}
.fm-duo__knot svg { width: 44px; height: 44px; }
@media (max-width: 979px) {
  .fm-duo__knot { width: 56px; height: 56px; margin-block: calc(var(--sp-2) * -1); }
  .fm-duo__knot svg { width: 34px; height: 34px; transform: rotate(90deg); }
}


/* ═══ Informations pratiques (formation 2) ════════════ */

.fm-practical { display: grid; gap: var(--sp-8); align-items: center; }
@media (min-width: 980px) {
  .fm-practical { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--sp-10); }
}
.fm-practical__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
}
.fm-practical__main .fm-info { margin-top: var(--sp-2); }
.fm-practical__aside { display: grid; gap: var(--sp-5); }

.fm-quote {
  position: relative;
  margin: 0;
  padding: clamp(40px, 2rem + 2vw, 64px) clamp(28px, 1.2rem + 2.4vw, 64px);
  border-radius: var(--r-2xl);
  background: var(--surface);
  text-align: center;
}
/* Guillemets décoratifs, dessinés en serif doré. */
.fm-quote::before,
.fm-quote::after {
  position: absolute;
  font-family: var(--font-heading);
  font-size: 96px;
  line-height: 1;
  color: var(--ornament);
}
.fm-quote::before { content: "\201C"; top: 8px; left: 20px; }
.fm-quote::after  { content: "\201D"; bottom: -36px; right: 24px; }
.fm-quote blockquote {
  margin: 0;
  padding-block: var(--sp-5);
  border-block: 1px solid var(--line-gold);
}
.fm-quote p {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  color: var(--ink);
  text-wrap: balance;
}


/* ═══ Intervenante ════════════════════════════════════ */

.fm-person { display: grid; gap: var(--sp-8); }
@media (min-width: 980px) {
  .fm-person { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); column-gap: 0; }
  .fm-person__main { padding-inline-end: var(--sp-9); }
  .fm-person__cta {
    align-self: center;
    padding-inline-start: var(--sp-9);
    border-inline-start: 1px solid var(--line-gold);
  }
  .fm-person--solo { grid-template-columns: minmax(0, 1fr); }
}
.fm-person__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
}
.fm-person__card {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
  width: 100%;
  margin-top: var(--sp-3);
}
@media (min-width: 640px) {
  .fm-person__card { grid-template-columns: 220px minmax(0, 1fr); column-gap: var(--sp-8); }
}
.fm-person__portrait {
  width: min(220px, 60vw);
  box-shadow: inset 0 0 0 2px var(--ornament-60), 0 0 0 8px var(--primary-4);
}
.fm-person__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  max-width: 58ch;
}
.fm-person__name { font-size: var(--t-h3); }
.fm-person__role { font-size: var(--t-lg); line-height: var(--lh-snug); color: var(--ink); }
.fm-person__text { font-size: var(--t-base); line-height: var(--lh-body); color: var(--ink-2); }
.fm-person__body .fm-rule { margin-block: var(--sp-2); width: 40px; }
.fm-person__note { font-size: var(--t-sm); color: var(--ink-2); }

.fm-person__cta { display: grid; gap: var(--sp-5); }
.fm-person__cta .fm-actions { width: 100%; }

/* Titre entre deux filets — « — Découvrir le programme — ». */
.fm-flourish {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-family: var(--font-heading);
  font-size: var(--t-h3);
  line-height: var(--lh-heading);
  color: var(--ink);
  text-align: center;
}
.fm-flourish::before,
.fm-flourish::after {
  content: "";
  flex: 1 1 24px;
  min-width: 24px;
  height: 1px;
  background: var(--ornament);
}


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

@media (max-width: 599px) {
  .fm-hero__body { gap: var(--sp-4); }
  .fm-kicker { font-size: var(--t-xs); }
  .fm-rise__mark { font-size: var(--t-xs); }
  .fm-callout { padding: var(--sp-4) var(--sp-5); }
  .fm-callout--note { column-gap: var(--sp-4); }
  .fm-tagline:not(.fm-tagline--caps) { font-size: var(--t-h5); }
  .fm-steps .fm-medal { width: 64px; height: 64px; }
  .fm-steps .fm-medal svg { width: 28px; height: 28px; }
  .fm-day { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-4); padding: var(--sp-5); }
  .fm-day__art { width: 84px; height: 84px; }
  .fm-day__art svg { width: 48px; height: 48px; }
  .fm-response { grid-template-columns: 30px 20px auto minmax(0, 1fr); }
  .fm-response__num { font-size: 26px; }
  .fm-response .fm-medal { margin-inline-end: var(--sp-4); }
  .fm-response .fm-medal--lg { width: 50px; height: 50px; }
  .fm-response .fm-medal--lg svg { width: 24px; height: 24px; }
  .fm-pull { padding: var(--sp-5); }
  .fm-quote::before { font-size: 72px; left: 12px; }
  .fm-quote::after  { font-size: 72px; right: 14px; bottom: -28px; }
  .fm-person__card { justify-items: start; }
}