/* ─────────────────────────────────────────────────────────
   Émotivance · /offres — la page de conversion.

   Deux ensembles : la séance individuelle (#particuliers) et
   les formats entreprises (#entreprises). La hauteur de la coque
   est mesurée par `shell.js` et exposée dans `--header-h` —
   aucune valeur en dur.

   Préfixe `of-`.
   ───────────────────────────────────────────────────────── */


/* ═══ Hero ════════════════════════════════════════════
   Texte à gauche, trio de statistiques dessous, photographie
   du cabinet à droite (§6).                                 */

.of-hero { padding-block: clamp(40px, 2rem + 3vw, 80px) 0; }

/* La barre d'ancres séparait autrefois le hero du premier ensemble ;
   sans elle, la respiration basse du hero et celle, pleine, de la
   section s'additionnaient dans le vide. Une seule respiration —
   courte — suffit à poser le filet champagne du chapeau. */
.of-hero + .section { padding-top: var(--section-y-sm); }

.of-hero__grid { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 1000px) {
  .of-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--sp-9);
    /* La photographie se cale sur la colonne de texte : haut et bas
       alignés, plutôt qu'un cadre 4/5 qui déborde de part et d'autre. */
    align-items: stretch;
  }
  .of-hero__media { display: flex; }
  .of-hero__media .media { flex: 1; aspect-ratio: auto; }
}

.of-hero__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
}
.of-hero__title { max-width: 14ch; font-size: var(--t-h1); }
.of-hero__text  { max-width: 52ch; }

/* Trio de statistiques — durée, tarif, format. */
.of-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: var(--sp-6);
  margin-top: var(--sp-3);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-gold);
}
@media (max-width: 479px) {
  .of-stats { grid-template-columns: repeat(2, auto); gap: var(--sp-5); }
}
.of-stats .stat__value { font-size: var(--t-h4); }


/* Les cibles d'ancre dégagent la coque collante. */
#particuliers, #entreprises, #intelligence, #liberation, #conflits {
  scroll-margin-top: calc(var(--header-h, 68px) + 16px);
}


/* ═══ Chapeau de section ══════════════════════════════
   Un seul modèle pour l'ouverture des DEUX ensembles. Ils en
   avaient chacun un : les particuliers, une colonne unique
   plafonnée à 62ch — plus de la moitié de la largeur restait
   vide, sans contrepoids ; les entreprises, une rangée
   `space-between` qui envoyait le bouton à sept cents pixels de
   la phrase qu'il conclut. Deux sections de même rang lues comme
   deux gabarits différents.

   Le chapeau est maintenant une grille :

     ┌────────────── filet champagne ──────────────┐
       ● SUR-TITRE
       Titre de la section        Le paragraphe qui
       sur deux lignes            porte l'offre, tenu
       [ action ] [ seconde ]     à sa mesure.

   Le sur-titre coiffe les deux colonnes, le titre et les actions
   tiennent la colonne porteuse, le paragraphe occupe la seconde :
   la largeur est remplie, l'action reste au contact du titre, et
   les deux ensembles s'ouvrent sur le même rythme. Le filet
   champagne reprend le vocabulaire déjà posé par `.of-stats` et
   `.of-step` — c'est lui qui ancre le départ de la section.

   Sous 900px, la grille retombe en une colonne et l'ordre du DOM
   fait foi : sur-titre, titre, paragraphe, actions — l'appel
   arrive après l'explication, jamais avant.                    */

.of-head {
  display: grid;
  gap: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-gold);
  margin-bottom: var(--sp-8);
}
.of-head__title { font-size: var(--t-h2); max-width: 22ch; text-wrap: balance; }
.of-head__text  { max-width: 56ch; }
.of-head__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}
/* La seconde action était une pilule sable pleine : posée sur
   l'ivoire, elle se lisait comme une étiquette inerte, et sa
   largeur ne tombait jamais d'accord avec celle de la première.
   Elle devient un contour — même gabarit, même hauteur que la
   pilule pleine, hiérarchie enfin lisible. Le tracé passe par
   --ornament-deep (3,27:1), comme l'exige toute bordure qui
   identifie une commande (WCAG 1.4.11). */
.of-head__actions .btn--outline { padding: 14px 24px; font-size: var(--t-base); }

/* Sous 560px les deux pilules ne tiennent plus côte à côte. Elles
   s'étirent alors à la largeur de la colonne : un empilement de
   deux largeurs égales se lit comme une paire, deux pilules de
   largeurs différentes comme un défaut d'alignement. */
@media (max-width: 559px) {
  .of-head__actions { align-items: stretch; }
  .of-head__actions .btn { width: 100%; justify-content: center; }
}

@media (min-width: 900px) {
  .of-head {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    /* Entre 900 et 1200px la colonne porteuse tourne autour de
       520px : les deux pilules n'y tiennent pas d'un trait et se
       remettraient à s'empiler l'une sous l'autre, à des largeurs
       différentes — le défaut qu'on vient de corriger. La rangée
       d'actions prend donc toute la largeur sur cette plage. */
    grid-template-areas:
      "badge   badge"
      "title   text"
      "actions actions";
    column-gap: var(--sp-9);
    row-gap: var(--sp-6);
    align-items: start;
  }
  .of-head > .badge   { grid-area: badge; }
  .of-head__title     { grid-area: title; }
  .of-head__text      { grid-area: text; }
  .of-head__actions   { grid-area: actions; }
  /* La colonne donne la mesure du titre : aucun plafond en `ch`
     ne vient plus couper « Régulation & » sur une esperluette
     orpheline. */
  .of-head__title { max-width: none; }
  /* Le paragraphe descend d'un cheveu : hauts de boîte alignés,
     sa première ligne flotterait au-dessus de celle du titre. */
  .of-head__text { padding-top: var(--sp-2); }
}

/* Au-delà de 1200px la colonne porteuse dépasse 620px : la rangée
   d'actions y tient d'un trait et remonte au contact du titre —
   l'appel touche alors ce qu'il propose, et le paragraphe déplie sa
   colonne sur toute la hauteur du chapeau. */
@media (min-width: 1200px) {
  .of-head {
    grid-template-areas:
      "badge   badge"
      "title   text"
      "actions text";
  }
}


/* ═══ Séance individuelle ═════════════════════════════ */

/* « Pour qui » — quatre cartes sable en 2 × 2 (version sobre :
   la carte image finale du kit est supprimée, la symétrie est
   plus nette). */
.of-fit {
  padding: clamp(28px, 2rem + 2vw, 50px);
  border-radius: var(--r-2xl);
  background: var(--surface);
}
.of-fit__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.of-fit__grid { display: grid; gap: var(--sp-4); }
@media (min-width: 768px) { .of-fit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.of-fit__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-xl);
  background: var(--white);
  border: 1px solid var(--line-gold);
}
.of-fit__item svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--accent);
}

/* « Comment ça se passe » — trois temps numérotés. */
.of-steps { display: grid; gap: var(--sp-5); margin-top: var(--section-y-sm); }
@media (min-width: 900px) { .of-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.of-step {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  border-top: 2px solid var(--ornament);
}
.of-step__num {
  font-family: var(--font-heading);
  font-size: var(--t-h3);
  line-height: 1;
  color: var(--ornament-deep);
  font-variant-numeric: tabular-nums;
}
.of-step__title { font-size: var(--t-h5); color: var(--ink); font-weight: 600; }
.of-step__text  { font-size: var(--t-md); }


/* ═══ Entreprises ═════════════════════════════════════
   L'ouverture de l'ensemble passe par `.of-head`, comme celle des
   particuliers. Seul le filet change de fond : sur la dalle sable
   le champagne tient encore, aucune variante n'est nécessaire.  */

/* Trois formats — cartes prix/badge/« comprend »/coches/bouton.
   L'emplacement du prix reste vide pour les entreprises (sur
   devis), ce que le modèle absorbe (§6). */
.of-formats { display: grid; gap: var(--sp-5); }
@media (min-width: 800px)  { .of-formats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1150px) { .of-formats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.of-format {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-7);
  border-radius: var(--r-2xl);
  background: var(--white);
  border: 1px solid var(--line-gold);
  transition: box-shadow var(--dur) var(--ease);
}
.of-format:hover { box-shadow: var(--shadow); }
.of-format__title { font-size: var(--t-h4); }
.of-format__text  { font-size: var(--t-md); }
.of-format .check-list { gap: var(--sp-3); }
.of-format .check-list li { font-size: var(--t-sm); }
.of-format .check-list svg { width: 18px; height: 18px; }
/* Le bouton se cale en bas quelle que soit la hauteur du texte. */
.of-format__cta { margin-top: auto; padding-top: var(--sp-2); }

/* Au-delà de 1150px les trois formats sont côte à côte : cliquer une
   pastille amène au même endroit pour les trois. On désigne donc la
   carte visée plutôt que de compter sur le seul défilement. */
.of-format:target {
  border-color: var(--accent-40);
  box-shadow: 0 0 0 3px var(--accent-10);
}

/* La bande « Sur mesure » (.of-custom) a été retirée de la page — contenu
   supprimé par la migration 0025, bloc HTML retiré ensuite. Ses règles
   partaient avec elle : aucun sélecteur orphelin à entretenir. */

/* Bénéfices — les disques colorés du kit deviennent des icônes. */
.of-gains { margin-top: var(--section-y-sm); }
.of-gains__head { margin-bottom: var(--sp-6); }
.of-gains__grid { display: grid; gap: var(--sp-4); }
@media (min-width: 600px)  { .of-gains__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .of-gains__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.of-gain {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-xl);
  background: var(--white);
  border: 1px solid var(--line-gold);
}
.of-gain__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  background: var(--accent-10);
  color: var(--accent);
}
.of-gain__icon svg { width: 20px; height: 20px; }
.of-gain span { font-size: var(--t-md); color: var(--ink-2); }


/* ═══ Appel final ═════════════════════════════════════
   Clôture forte pour la page de conversion : CTA sur image,
   photographie 6, partagée avec l'accueil et /approche.      */

.of-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-2xl);
  /* Même respiration haute que sur l'accueil : la dalle entreprises
     collait au bord supérieur de la carte. */
  margin-block-start: var(--sp-7);
}
.of-cta__media { position: absolute; inset: 0; z-index: -2; border-radius: 0; }
.of-cta__media img { width: 100%; height: 100%; object-fit: cover; }
.of-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--primary-3) 82%, transparent);
}
.of-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  padding-block: clamp(72px, 4rem + 5vw, 150px);
  text-align: center;
}
.of-cta__inner h2 { max-width: 16ch; font-size: var(--t-h1); color: var(--white); }
.of-cta__inner h2 em { color: var(--ornament); }
.of-cta__inner p {
  max-width: 48ch;
  font-size: var(--t-lg);
  color: color-mix(in srgb, var(--white) 88%, transparent);
}
.of-cta .badge {
  background: color-mix(in srgb, var(--white) 18%, transparent);
  color: var(--white);
}
.of-cta .media__brief { color: color-mix(in srgb, var(--white) 70%, transparent); }


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

@media (max-width: 599px) {
  .of-hero { padding-block: 26px 0; }
  .of-hero__grid { gap: var(--sp-5); }
  .of-hero__title { max-width: 18ch; }

  /* Le rembourrage des cartes-cadres passe de 40–50px à 20px : sur
     350px, il prenait plus du quart de la largeur de lecture. */
  .of-fit    { padding: var(--sp-5); }
  .of-fit__head { margin-bottom: var(--sp-5); }
  .of-fit__item { padding: var(--sp-4); gap: var(--sp-3); }
  .of-format { padding: var(--sp-5); gap: var(--sp-3); }
  .of-gain   { padding: var(--sp-4); gap: var(--sp-3); }

  /* Même règle que sur l'accueil : les appels finaux s'empilent sur
     toute la largeur plutôt qu'en escalier de largeurs inégales. */
  .of-cta__inner { padding-block: 56px; gap: var(--sp-4); }
  .of-cta__inner h2 { max-width: 15ch; }
  .of-cta__inner .row,
  .of-cta__actions { width: 100%; }
  .of-cta__inner .row > *,
  .of-cta__actions > * { flex: 1 1 100%; justify-content: center; }
}