/* ─────────────────────────────────────────────────────────
   Émotivance · /offres/<format> — les trois pages de détail
   des formats entreprises.

   Ces pages prolongent /offres : la carte « En savoir plus »
   y renvoie, et on y trouve ce que la carte ne peut pas dire —
   le programme séquence par séquence, puis les modalités.

   La page tenait autrefois en dix sections empilées sur près de
   dix mille pixels : constats, objectifs, programme, déroulé,
   bénéfices, modalités, questions, autres formats. Chacune
   ouvrait sur un filet, un sur-titre, un titre à gauche, un
   paragraphe à droite — et deux cents pixels de vide avant le
   premier contenu. Le lecteur traversait plus de vide que de
   texte, et la moitié droite de l'écran ne portait rien.

   Elle en compte trois : le hero (avec la bande des chiffres
   clés), le programme (séquences + acquis), et « concrètement »
   (frise du déroulé + modalités). L'appel final ferme la page.
   Ce qui a été retiré n'a pas été perdu : les constats et les
   bénéfices disaient déjà ce que le programme démontre, la FAQ
   et les autres formats vivent sur /offres.

   Le gabarit REPREND le vocabulaire de /offres (`badge`,
   `check-list`, `tag`) : les deux pages doivent se lire comme un
   seul ensemble. Ce fichier n'ajoute que ce qui n'existait pas —
   préfixe `od-`.

   Il se charge APRÈS offres.css, dont il dépend.
   ───────────────────────────────────────────────────────── */


/* ═══ Rythme vertical ═════════════════════════════════
   Le rythme global (--section-y : jusqu'à 200px en haut ET en
   bas) est calibré pour des sections narratives qui alternent
   dalle et fond de page toutes les deux ou trois lignes. Ici,
   trois sections denses se suivent : 400px entre deux blocs de
   contenu creusaient une bande vide plus haute que la moitié de
   l'écran. Ce fichier n'étant chargé que par les trois pages de
   détail, l'échelle est resserrée pour elles seules —
   ni /offres ni /approche ne bougent.                          */

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


/* ═══ Fil d'Ariane ════════════════════════════════════
   La page est un enfant de /offres, jamais une entrée de
   navigation : le chemin de retour doit rester visible en
   haut, sans quoi le visiteur n'a que le bouton « retour »
   du navigateur pour revenir à la comparaison des formats. */

.od-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);
}
.od-crumbs a { color: var(--ink-3); text-decoration: none; }
.od-crumbs a:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.od-crumbs [aria-current] { color: var(--ink); }
.od-crumbs span[aria-hidden] { opacity: 0.55; }


/* ═══ Hero ════════════════════════════════════════════
   Pas de photographie : la page de détail n'a rien à illustrer
   que le hero de /offres n'ait déjà montré.

   Le hero tenait sur une colonne plafonnée à 62ch — titre,
   phrase, boutons et chiffres empilés sur 40% de la largeur, le
   reste de l'écran vide jusqu'au pli. Il tient maintenant la
   largeur : titre à gauche, phrase et commandes calées en bas de
   la colonne de droite, puis la bande des chiffres clés d'un
   bord à l'autre.                                             */

.od-hero { padding-block: clamp(22px, 1.2rem + 1.4vw, 40px) 0; }

.od-hero__grid { display: grid; gap: var(--sp-6); }
@media (min-width: 900px) {
  .od-hero__grid {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    column-gap: var(--sp-9);
  }
  /* Les deux colonnes se terminent sur la même ligne : la phrase et les
     boutons répondent au bas du titre plutôt que de flotter à mi-hauteur.
     L'alignement est posé colonne par colonne, jamais sur la grille : avec
     `align-items: end`, la colonne la plus courte coulait vers le bas, et
     vers 900px — où la phrase devient plus haute que le titre — le
     sur-titre se retrouvait à soixante pixels sous le fil d'Ariane. */
  .od-hero__lead { align-self: start; }
  .od-hero__side { align-self: end; }
}

.od-hero__lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}
.od-hero__title { font-size: var(--t-h1); max-width: 15ch; text-wrap: balance; }

.od-hero__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
}
.od-hero__text { max-width: 48ch; }
.od-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
@media (max-width: 559px) {
  .od-hero__actions { flex-direction: column; align-self: stretch; }
  .od-hero__actions .btn { width: 100%; justify-content: center; }
}

/* Le hero et le premier chapeau ont chacun leur respiration ;
   additionnées, elles creusent un vide. Une seule suffit. */
.od-hero + .section { padding-top: var(--section-y-sm); }


/* ═══ Bande des chiffres clés ═════════════════════════
   Durée, effectif, format, tarif : les quatre questions posées
   avant toute autre. Elles étaient dispersées — trois dans un
   trio serré à gauche du hero, le tarif quarante écrans plus
   bas dans les modalités. Réunies, elles tiennent la largeur du
   hero et servent de socle au titre.                          */

.od-key {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--sp-7);
  border-top: 1px solid var(--line-gold);
}
@media (min-width: 720px) { .od-key { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.od-key__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-5) 0;
}
.od-key__item:first-child { padding-inline-start: 0; }
.od-key__item + .od-key__item { border-inline-start: 1px solid var(--line-gold-soft); }
@media (max-width: 719px) {
  /* Deux colonnes : le filet vertical ne vaut que pour la
     seconde de chaque rangée, et la rangée du bas reprend un
     filet horizontal. */
  .od-key__item:nth-child(odd) { padding-inline-start: 0; border-inline-start: 0; }
  .od-key__item:nth-child(n + 3) { margin-top: var(--sp-5); border-top: 1px solid var(--line-gold-soft); }
}
.od-key__label {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-3);
}
.od-key__value {
  font-family: var(--font-heading);
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  color: var(--ink);
}


/* ═══ Chapeau de section ══════════════════════════════
   Filet champagne, sur-titre, titre porteur, paragraphe en
   seconde colonne. Deux corrections par rapport à /offres : les
   deux colonnes s'alignent sur leur BAS (le paragraphe ne flotte
   plus au-dessus du titre qu'il accompagne), et le paragraphe
   n'est plus plafonné à 56ch dans une colonne qui en fait 70 —
   il remplit sa colonne.                                       */

.od-head {
  display: grid;
  gap: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-gold);
  margin-bottom: var(--sp-6);
}
.od-head__title { font-size: var(--t-h2); max-width: 24ch; text-wrap: balance; }
.od-head__text  { max-width: 56ch; }

@media (min-width: 900px) {
  .od-head {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-areas:
      "badge badge"
      "title text";
    column-gap: var(--sp-8);
    row-gap: var(--sp-4);
    align-items: end;
  }
  .od-head > .badge  { grid-area: badge; }
  .od-head__title    { grid-area: title; max-width: 20ch; }
  .od-head__text     { grid-area: text; max-width: none; padding-bottom: 4px; }
}

/* Les cibles d'ancre dégagent la coque collante, comme sur /offres. */
#programme, #modalites {
  scroll-margin-top: calc(var(--header-h, 68px) + 16px);
}


/* ═══ Programme ═══════════════════════════════════════
   Le cœur de la page : ce qui est couvert, séquence par
   séquence.

   La rangée comptait deux colonnes — 200px de numéro, puis tout
   le contenu tassé dans une colonne plafonnée à 62ch : sur un
   écran large, le tiers droit de chaque carte restait blanc.
   Elle en compte trois : numéro et durée, l'explication, puis
   les points travaillés séparés par un filet. La carte est
   remplie d'un bord à l'autre et se lit d'une traite.          */

.od-mods { display: flex; flex-direction: column; gap: var(--sp-4); }

.od-mod {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-xl);
  background: var(--white);
  border: 1px solid var(--line-gold);
}
@media (min-width: 900px) {
  .od-mod {
    grid-template-columns: 150px minmax(0, 1.12fr) minmax(0, 0.88fr);
    column-gap: var(--sp-7);
    padding: var(--sp-6) var(--sp-7);
    align-items: start;
  }
}

.od-mod__rail {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-4);
}
@media (min-width: 900px) {
  .od-mod__rail { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
}
/* La colonne du rail est fixe : une durée longue — « 2h30 · semaine 1 »
   sur le parcours conflits — doit passer à la ligne dans la pilule plutôt
   que de déborder sur le titre. */
.od-mod__rail .tag { white-space: normal; }
.od-mod__num {
  font-family: var(--font-heading);
  font-size: var(--t-h3);
  line-height: 1;
  color: var(--ornament-deep);
  font-variant-numeric: tabular-nums;
}

.od-mod__main { display: flex; flex-direction: column; gap: var(--sp-3); }
.od-mod__title { font-size: var(--t-h4); }
.od-mod__text  { font-size: var(--t-md); max-width: none; }

.od-mod__points { gap: var(--sp-3); }
.od-mod__points li { font-size: var(--t-sm); }
.od-mod__points svg { width: 18px; height: 18px; }
@media (min-width: 900px) {
  .od-mod__points { padding-inline-start: var(--sp-7); border-inline-start: 1px solid var(--line-gold-soft); }
}


/* ═══ Ce que l'équipe sait faire en sortant ═══════════
   Les objectifs occupaient une section entière : quatre cartes
   blanches, un filet, un sur-titre et deux cents pixels de vide
   pour dire ce que le programme venait de démontrer. Ils ferment
   maintenant la section programme — même largeur, quatre
   colonnes rythmées par un filet, sans carte ni icône.         */

.od-outcomes {
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-gold);
}
.od-outcomes__head { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-6); }
@media (min-width: 900px) {
  .od-outcomes__head {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    column-gap: var(--sp-8);
    align-items: end;
  }
}
.od-outcomes__title { font-size: var(--t-h3); max-width: 22ch; }
.od-outcomes__text  { font-size: var(--t-md); color: var(--ink-2); }

.od-outcomes__list { display: grid; gap: var(--sp-5); list-style: none; }
@media (min-width: 640px)  { .od-outcomes__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .od-outcomes__list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--sp-6); } }

.od-outcome {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-gold-soft);
}
.od-outcome__title { font-size: var(--t-h5); font-weight: 600; color: var(--ink); }
.od-outcome__text  { font-size: var(--t-sm); color: var(--ink-2); }


/* ═══ Frise du déroulé ════════════════════════════════
   Du cadrage en amont au suivi après. La chronologie tenait sur
   une colonne verticale de cinq blocs alignés à gauche : mille
   pixels de haut, la moitié droite de l'écran vide. Couchée, la
   même information tient en une bande — et l'ordre se lit dans
   le sens de la lecture.                                       */

.od-flow {
  display: grid;
  gap: var(--sp-5);
  list-style: none;
  margin-bottom: var(--sp-7);
}
@media (min-width: 760px) {
  /* Le filet doit se lire comme UNE ligne de temps. Porté par chaque
     étape avec une gouttière entre les colonnes, il se coupait cinq fois ;
     porté par la frise entière, il disparaissait de la seconde rangée dès
     que les étapes passaient à la ligne (entre 760 et 1000px). Les
     colonnes sont donc jointives et l'écart passe dans le padding : les
     filets se touchent, rangée par rangée. */
  .od-flow {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    column-gap: 0;
    row-gap: var(--sp-6);
  }
}

.od-flow__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-gold);
}
.od-flow__step::before {
  content: "";
  position: absolute;
  top: -5px;
  inset-inline-start: 0;
  width: 9px;
  height: 9px;
  border-radius: var(--r-pill);
  background: var(--ornament);
  box-shadow: 0 0 0 3px var(--surface);
}
@media (min-width: 760px) {
  .od-flow__step { padding-inline-end: var(--sp-5); }
}
.od-flow__time {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent-text);
}
.od-flow__title { font-size: var(--t-h5); color: var(--ink); font-weight: 600; }
.od-flow__text  { font-size: var(--t-sm); color: var(--ink-2); }


/* ═══ Modalités ═══════════════════════════════════════
   Lieu, prérequis, confidentialité. Durée, effectif et tarif
   sont remontés dans la bande de tête : les répéter ici ne
   faisait que rallonger le tableau. Une liste de définition —
   le couple intitulé / valeur est exactement ce que <dl>
   décrit, et le lecteur d'écran l'annonce comme tel.           */

.od-facts {
  display: grid;
  gap: 0;
  border-radius: var(--r-2xl);
  background: var(--white);
  border: 1px solid var(--line-gold);
  overflow: hidden;
}
@media (min-width: 900px) { .od-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.od-fact {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  padding: var(--sp-5) var(--sp-6);
  border-top: 1px solid var(--line-gold-soft);
}
.od-fact:first-child { border-top: 0; }
@media (min-width: 900px) {
  .od-fact { border-top: 0; }
  .od-fact + .od-fact { border-inline-start: 1px solid var(--line-gold-soft); }
}
.od-fact__label {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-3);
}
.od-fact__value { font-size: var(--t-md); line-height: var(--lh-body); color: var(--ink-2); }

.od-note {
  margin-top: var(--sp-5);
  font-size: var(--t-sm);
  color: var(--ink-3);
  max-width: 88ch;
}


/* ═══ Appel final ═════════════════════════════════════
   /offres clôt sur une photographie voilée de bleu. Ici, un
   aplat bleu nuit franc : la page de détail se termine sur une
   décision, pas sur une ambiance — et aucun média à charger.  */

.od-cta { border-radius: var(--r-2xl); margin-top: var(--section-y-sm); }
.od-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  padding-block: clamp(56px, 3rem + 3vw, 104px);
  text-align: center;
}
.od-cta__inner h2 { max-width: 20ch; font-size: var(--t-h1); }
.od-cta__inner p {
  max-width: 52ch;
  font-size: var(--t-lg);
  color: color-mix(in srgb, var(--white) 88%, transparent);
}
.od-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
}

/* La dalle bleue repeint en champagne TOUS ses <span> — y compris le
   libellé, porté par un <span> pour rester éditable depuis le CMS. Sur la
   pilule blanche, cela donnait du champagne sur blanc : 2,03:1, sous le
   seuil. Les libellés posés sur une surface claire reprennent donc le bleu
   (7,53:1 en inverse), au repos comme au survol. */
.od-cta .btn--white,
.od-cta .btn--white span { color: var(--accent-text); }
.od-cta .btn--white:hover,
.od-cta .btn--white:hover span { color: var(--accent-ink); }
.od-cta .btn--soft:hover,
.od-cta .btn--soft:hover span { color: var(--accent-text); }
@media (max-width: 559px) {
  .od-cta__actions { align-items: stretch; flex-direction: column; align-self: stretch; }
  .od-cta__actions .btn { width: 100%; justify-content: center; }
}


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

@media (max-width: 599px) {
  .od-hero { padding-block: 20px 0; }
  .od-hero__title { max-width: 18ch; }
  .od-key { margin-top: var(--sp-5); }
  .od-key__item { padding: var(--sp-4) var(--sp-4) 0; }
  .od-mod { padding: var(--sp-4); gap: var(--sp-3); }
  .od-outcomes { margin-top: var(--sp-6); padding-top: var(--sp-5); }
  .od-outcomes__head { margin-bottom: var(--sp-5); }
}

/* Le fil d'Ariane est une ligne de 19px : au doigt, ses liens
   demandent une boîte de frappe, pas un interligne plus grand. */
@media (pointer: coarse) {
  .od-crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .od-crumbs { row-gap: 0; }
}