/* ─────────────────────────────────────────────────────────
   Émotivance · /home — mise en page des dix sections.

   Toutes les primitives viennent de components.css (.badge,
   .btn, .card, .media, .glass, .accordion, .check-list…). Ce
   fichier ne fait que les assembler : grilles, rythmes et les
   quelques pièces propres à l'accueil (anneau de mots, encoche
   du hero, médaillon des bénéfices).

   Préfixe `hm-` — aucune collision possible avec la coque
   (`em-`) ni avec les primitives du socle.
   ───────────────────────────────────────────────────────── */


/* ═══ Hero ════════════════════════════════════════════
   Une seule colonne centrée : eyebrow, titre, chapô, méta.
   L'image d'ouverture porte le sceau de mots et l'encoche de
   l'appel à l'action.                                       */

.hm-hero {
  padding-block: clamp(40px, 2rem + 3vw, 80px) clamp(64px, 3rem + 4vw, 110px);
}

/* Bloc central — le seul h1 de la page. */
.hm-hero__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  text-align: center;
}
.hm-hero__title {
  max-width: 15ch;
  font-size: var(--t-display);
}
/* La mise en avant italique est un champ CMS à part : tant qu'il est
   vide, l'élément ne doit laisser aucune trace dans le titre. */
.hm-hero__title em:empty,
.hm-cta__inner h2 em:empty { display: none; }
.hm-hero__lede {
  max-width: 56ch;
  font-size: var(--t-lg);
  color: var(--ink-2);
}
/* Méta d'ouverture : lieu · format · durée, en trois pastilles. */
.hm-hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  list-style: none;
}

/* ─ Image d'ouverture ─────────────────────────────────── */

.hm-hero__media {
  position: relative;
  margin-top: clamp(32px, 2rem + 2vw, 60px);
}
.hm-hero__frame { border-radius: var(--r-2xl); }

/* Encoche basse : demi-pilule ivoire posée sur l'image, flanquée
   de deux coins inversés pour que le fond de page semble y couler.
   Elle accueille le second appel à l'action. */
.hm-hero__notch {
  position: absolute;
  inset-inline-start: 50%;
  bottom: 0;
  transform: translateX(-50%);
  padding: var(--sp-4) var(--sp-6) var(--sp-4);
  max-width: calc(100% - var(--cut) * 2 - var(--sp-6));
}
.hm-hero__notch .cutout { position: absolute; bottom: 0; }
.hm-hero__notch .cutout--tl { inset-inline-start: calc(var(--cut) * -1); }
.hm-hero__notch .cutout--tr { inset-inline-end:  calc(var(--cut) * -1); }

@media (max-width: 599px) {
  /* Sous 600px, l'encoche mangerait la moitié de l'image : le second
     appel repasse simplement sous le cadre. */
  .hm-hero__notch {
    position: static;
    transform: none;
    max-width: none;
    display: flex;
    justify-content: center;
    padding: var(--sp-5) 0 0;
    border-radius: 0;
    background: none;
  }
  .hm-hero__notch .cutout { display: none; }
}

/* ─ Sceau de mots ─────────────────────────────────────
   Remplace la roue de 18 pastilles du kit (décision 3 et 4) :
   six mots du vocabulaire du site, écrits sur un cercle en
   SVG — donc jamais de débordement, quelle que soit la taille. */

.hm-seal {
  border: 2px solid var(--ornament);
  position: absolute;
  inset-block-start: clamp(12px, 2vw, 28px);
  inset-inline-end: clamp(12px, 2vw, 28px);
  z-index: 3;
  display: grid;
  place-items: center;
  width: clamp(96px, 12vw, 148px);
  aspect-ratio: 1;
  border-radius: var(--r-pill);
  background: var(--primary-4);
  box-shadow: var(--shadow);
}
.hm-seal__ring { width: 100%; height: 100%; }
.hm-seal__ring text {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  fill: var(--accent-text);
}
/* Point de séparation posé seul au milieu d'un secteur : à la taille
   du texte il passe pour une poussière, il lui faut son propre corps. */
.hm-seal__ring text.hm-seal__dot { font-size: 18px; }
/* Pastille centrale — le point d'ancrage visuel du sceau. */
.hm-seal__core {
  position: absolute;
  width: 34%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--white);
}
.hm-seal__core svg { width: 55%; height: 55%; }

@media (max-width: 479px) {
  .hm-seal { width: 84px; }
}


/* ═══ Manifeste ═══════════════════════════════════════
   Dalle ivoire purement typographique (version sobre), bordée
   des deux arches découpées.                                */

.hm-manifest {
  position: relative;
  /* Bande bleu nuit à texte champagne : c'est la phrase de marque, et
     c'est le sens de la DA — le champagne se pose sur le bleu. 5,38:1. */
  background: var(--slab-ink);
  border-block: 1px solid var(--slab-ink);
}
.hm-manifest .badge { background: transparent; border: 1px solid var(--on-slab-ink); color: var(--on-slab-ink); }
.hm-manifest .badge::before { background: var(--on-slab-ink); }
.hm-manifest .em { color: var(--white); font-style: italic; }
.hm-manifest__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  text-align: center;
}
.hm-manifest__text {
  max-width: 30ch;
  font-family: var(--font-heading);
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--on-slab-ink);
}
/* Le cœur ponctue la phrase — mais posé DANS le flux du texte, il
   atterrissait où la ligne voulait bien le laisser : accroché en bout
   de ligne après « sens. » sur un écran large, seul en début de ligne
   sur un téléphone. Dans les deux cas il se lisait comme un accident,
   détaché des deux énoncés qu'il devait relier.

   Il devient un séparateur posé sur sa propre ligne, entre les deux
   phrases : même rôle, mais une position identique à toute largeur.
   Le paragraphe passe donc en colonne — l'énoncé, le cœur, la mise en
   avant — au lieu d'un seul bloc de texte courant.                */
.hm-manifest__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.hm-manifest__icon {
  display: grid;
  place-items: center;
  width: 1.3em;
  height: 1.3em;
  border-radius: var(--r-pill);
  /* Voile champagne sur le bleu de la bande — un disque bleu y serait
     invisible. */
  background: var(--ornament-on-ink);
  color: var(--on-slab-ink);
}
.hm-manifest__icon svg { width: 58%; height: 58%; }
/* Le champ de mise en avant est facultatif côté back-office : vide, le
   séparateur n'a plus rien à séparer et disparaît avec lui. */
.hm-manifest__text:has(em:empty) .hm-manifest__icon { display: none; }


/* ═══ En-tête de section ══════════════════════════════
   Badge, titre, phrase d'introduction — centrés. Partagé par
   les dimensions, les accompagnements, les bénéfices, les
   témoignages et « Pour qui ».                               */

.hm-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
  text-align: center;
}
.hm-head h2 { max-width: 18ch; }
.hm-head p  { max-width: 58ch; }
.hm-head--wide { margin-bottom: var(--sp-8); }
/* Variante fer à gauche — l'en-tête devient une colonne posée à
   côté de son contenu au lieu de le surplomber. */
.hm-head--start {
  align-items: flex-start;
  margin-bottom: 0;
  text-align: start;
}


/* ═══ Quatre dimensions ═══════════════════════════════
   Accordéon numéroté : la séquence 01–04 porte du sens, elle
   est conservée. Le gabarit de carte du CMS est préservé.    */

/* Deux colonnes à partir de 1024px : l'énoncé à gauche, les
   dimensions dépliables en face. L'en-tête reste en vue pendant
   que l'on ouvre les cartes. */
.hm-dims {
  display: grid;
  gap: var(--sp-6);
  align-items: start;
}
@media (min-width: 1024px) {
  .hm-dims {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--sp-8);
  }
  .hm-dims .hm-head {
    position: sticky;
    top: calc(var(--header-h, 68px) + var(--sp-6));
  }
  .hm-dims .hm-head h2 { max-width: none; }
}

.hm-dim__toggle { align-items: center; }
.hm-dim__num {
  flex: none;
  min-width: 2.2ch;
  font-family: var(--font-heading);
  font-size: var(--t-h5);
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.hm-dim__title {
  flex: 1;
  font-size: var(--t-h3);
  line-height: var(--lh-heading);
}
@media (min-width: 768px) {
  .hm-dim__title { font-size: var(--t-h2); }
}
.hm-dim__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  max-width: 72ch;
}
/* Aligne le corps sous le titre, pas sous le numéro. */
@media (min-width: 768px) {
  .hm-dim__body { padding-inline-start: calc(2.2ch + var(--sp-5)); }
}


/* ═══ Accompagnements ═════════════════════════════════
   Deux blocs image + texte, inversés l'un par rapport à
   l'autre. Cartouche en verre sur la photo, badge à point,
   liste à coches, bouton.                                   */

.hm-offers__list {
  display: flex;
  flex-direction: column;
  gap: var(--section-y-sm);
}
.hm-offer { display: grid; gap: var(--sp-7); align-items: center; }

@media (min-width: 900px) {
  /* Deux colonnes de nature différente : le texte se dimensionne sur
     son contenu (`max-content`, borné par les `max-width` du titre et
     du paragraphe), la photo prend ce qui reste. Le groupe est plus
     étroit que le conteneur et centré — sans quoi la photo se colle au
     bord de page et tout le reliquat s'accumule derrière le texte. */
  .hm-offer {
    grid-template-columns: minmax(0, 1fr) minmax(0, max-content);
    gap: var(--sp-7) clamp(72px, 9vw, 140px);
    /* `width` explicite : le bloc est un enfant flex, et une marge
       automatique y désactive l'étirement — sans elle il retomberait
       en largeur de contenu et la piste `1fr` de la photo, dont le
       minimum est nul, disparaîtrait. */
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
  }
  /* Alternance portée par la position, non par une classe : un bloc
     ajouté depuis le back-office s'inverse donc tout seul. `order`
     déplace la photo, les pistes doivent suivre dans le même sens. */
  .hm-offer:nth-child(even) {
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  }
  .hm-offer:nth-child(even) .hm-offer__media { order: 2; }

  /* Le portrait 4/5 rapporté à une demi-largeur de conteneur donnait
     une image plus haute que l'écran : le bouton du bloc tombait sous
     la ligne de flottaison. La hauteur se cale sur le viewport, c'est
     le cadrage qui s'ajuste — l'image reste en `cover`. */
  .hm-offer__media .media {
    aspect-ratio: auto;
    height: clamp(340px, 52vh, 560px);
  }
}

.hm-offer__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
}
.hm-offer__title { max-width: 16ch; }
.hm-offer__text { max-width: 52ch; }
.hm-offer__media { position: relative; }


/* ═══ Bénéfices ═══════════════════════════════════════
   Quatre attentions disposées autour d'un médaillon circulaire.
   L'hôte des cartes est en `display: contents` : ses enfants
   deviennent les cellules de cette grille, ce qui laisse le
   médaillon en dehors du décompte des cartes du CMS.         */


.hm-benefits__grid {
  display: grid;
  gap: var(--sp-6);
  justify-items: center;
}
.hm-benefits__cards { display: contents; }

.hm-benefit {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 42ch;
  text-align: center;
}
.hm-benefit__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-inline: auto;
  border-radius: var(--r-pill);
  background: var(--accent-10);
  color: var(--accent);
}
.hm-benefit__icon svg { width: 24px; height: 24px; }
.hm-benefit h3 { font-size: var(--t-h4); }

.hm-benefits__medallion {
  width: clamp(190px, 26vw, 280px);
  border-radius: var(--r-pill);
}

@media (min-width: 768px) {
  .hm-benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7); }
  .hm-benefits__medallion { grid-column: 1 / -1; order: -1; }
}
@media (min-width: 1024px) {
  .hm-benefits__grid {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--sp-8) var(--sp-7);
    align-items: center;
  }
  .hm-benefits__medallion { grid-area: 1 / 2 / 3 / 3; order: 0; }
  .hm-benefit { text-align: start; }
  .hm-benefit__icon { margin-inline: 0; }

  /* Colonne de gauche alignée à droite, vers le médaillon. */
  .hm-benefit:nth-child(1) { grid-area: 1 / 1; }
  .hm-benefit:nth-child(2) { grid-area: 2 / 1; }
  .hm-benefit:nth-child(1),
  .hm-benefit:nth-child(2) { text-align: end; align-items: flex-end; }
  .hm-benefit:nth-child(1) .hm-benefit__icon,
  .hm-benefit:nth-child(2) .hm-benefit__icon { margin-inline-start: auto; margin-inline-end: 0; }

  .hm-benefit:nth-child(3) { grid-area: 1 / 3; }
  .hm-benefit:nth-child(4) { grid-area: 2 / 3; }

  /* Cartes ajoutées depuis le back-office : ligne pleine largeur,
     sous le médaillon — la symétrie à quatre n'est pas cassée. */
  .hm-benefit:nth-child(n+5) { grid-column: 1 / -1; text-align: center; align-items: center; }
  .hm-benefit:nth-child(n+5) .hm-benefit__icon { margin-inline: auto; }
}


/* ═══ Témoignages ═════════════════════════════════════
   Dalle sable détachée ; le carrousel lui-même est habillé
   par chrome.css, partagé avec les autres pages.            */

.hm-voices { text-align: center; }


/* ═══ Pour qui ════════════════════════════════════════
   Six signes en deux colonnes à coches, phrase de clôture
   centrée en clôture (version sobre : la colonne image du kit
   est supprimée).                                            */


.hm-audience__list {
  display: grid;
  gap: var(--sp-4);
  max-width: var(--container-md);
  margin-inline: auto;
}
@media (min-width: 768px) {
  .hm-audience__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-7); }
}
.hm-audience__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);
}
.hm-audience__item svg {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--accent);
}

.hm-audience__closing {
  max-width: 46ch;
  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;
}


/* ═══ Journal ═════════════════════════════════════════
   Un article vedette, trois en pile. Le balisage est produit
   par home-journal.js ; la requête Supabase est inchangée.   */

.hm-journal__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-7);
}
.hm-journal__head h2 { max-width: 16ch; }

.hm-journal__grid { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 900px) {
  .hm-journal__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sp-7); }
}

.hm-journal__stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* Carte vedette — image en tête, méta, titre, chapô. */
.hm-post {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.hm-post__cover {
  overflow: hidden;
  border-radius: var(--r-2xl);
  background: var(--surface);
  aspect-ratio: 16 / 10;
}
.hm-post__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.hm-post:hover .hm-post__cover img { transform: scale(1.03); }
.hm-post__title {
  font-size: var(--t-h3);
  transition: color var(--dur-fast) var(--ease);
}
.hm-post:hover .hm-post__title { color: var(--accent-text); }
.hm-post__excerpt { max-width: 56ch; }
.hm-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Cartes en pile — vignette carrée à gauche, texte à droite. */
.hm-post--row {
  flex-direction: row;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-4);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line-gold);
  transition: background-color var(--dur) var(--ease);
}
.hm-post--row:hover { background: var(--white); }
.hm-post--row .hm-post__cover {
  flex: none;
  width: clamp(84px, 22vw, 128px);
  aspect-ratio: 1;
  border-radius: var(--r-lg);
}
.hm-post--row .hm-post__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}
.hm-post--row .hm-post__title { font-size: var(--t-h5); }

.hm-journal__empty { color: var(--ink-3); }


/* ═══ Appel final ═════════════════════════════════════
   Sur photographie, partagée avec les CTA de /approche et
   /offres. Le voile brun tient le contraste du texte blanc
   quel que soit le cliché — et sur le brief hachuré tant que
   la photographie n'est pas livrée.                          */

.hm-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-2xl);
  /* La dalle du journal s'arrêtait pile sur le bord haut de la carte :
     ses coins arrondis n'avaient rien pour se détacher. Une respiration
     courte laisse passer l'ivoire de page, comme sous la carte. */
  margin-block-start: var(--sp-7);
}
.hm-cta__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: 0;
}
.hm-cta__media img { width: 100%; height: 100%; object-fit: cover; }
.hm-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--primary-3) 82%, transparent);
}

.hm-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  padding-block: clamp(72px, 4rem + 5vw, 150px);
  text-align: center;
}
.hm-cta__inner h2 {
  max-width: 18ch;
  font-size: var(--t-h1);
  color: var(--white);
}
.hm-cta__inner h2 em { color: var(--ornament); }
.hm-cta__inner p {
  max-width: 48ch;
  font-size: var(--t-lg);
  color: color-mix(in srgb, var(--white) 88%, transparent);
}
.hm-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}
/* Le badge doit rester lisible sur le voile brun. */
.hm-cta .badge {
  background: color-mix(in srgb, var(--white) 18%, transparent);
  color: var(--white);
}
/* Le brief de direction artistique reste lisible sous le voile. */
.hm-cta .media__brief { color: color-mix(in srgb, var(--white) 70%, transparent); }


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

   La page tient déjà dans la largeur : ce bloc ne corrige pas
   des débordements, il rend le défilement raisonnable. Quatre
   bénéfices centrés l'un sous l'autre demandaient un écran et
   demi à eux seuls ; ils passent en rangées icône / texte.
   ───────────────────────────────────────────────────── */

@media (max-width: 599px) {

  /* ─ Hero ─ */
  .hm-hero { padding-block: 28px 44px; }
  /* 15ch de large sur un titre centré, c'est trois mots par ligne
     et six lignes de haut. */
  .hm-hero__title { max-width: 20ch; }
  .hm-hero__lede  { max-width: 46ch; }
  .hm-hero__media { margin-top: 26px; }

  /* ─ Manifeste ─ */
  .hm-manifest__text { max-width: 26ch; }
  .hm-manifest__inner { gap: var(--sp-5); }

  /* ─ En-têtes de section ─ */
  .hm-head { margin-bottom: var(--sp-6); gap: var(--sp-3); }
  .hm-head h2 { max-width: 22ch; }

  /* ─ Bénéfices ─
     Colonne centrée → rangée : l'icône tient la marge de gauche,
     le titre et le texte occupent le reste. Quatre cartes passent
     de ~1 100px de haut à ~560px, sans rien perdre. */
  .hm-benefits__grid { gap: var(--sp-5); justify-items: stretch; }
  .hm-benefit {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: var(--sp-4);
    row-gap: 2px;
    align-items: start;
    max-width: none;
    text-align: start;
  }
  .hm-benefit__icon {
    grid-row: 1 / span 2;
    width: 44px;
    height: 44px;
    margin: 0;
  }
  .hm-benefit__icon svg { width: 21px; height: 21px; }
  .hm-benefit h3 { align-self: center; }
  .hm-benefits__medallion { width: min(200px, 60vw); justify-self: center; }

  /* ─ Pour qui ─ */
  .hm-audience__item { padding: var(--sp-4); gap: var(--sp-3); }
  .hm-audience__item svg { width: 20px; height: 20px; }
  .hm-audience__closing { margin-top: var(--sp-6); }

  /* ─ Journal ─ */
  .hm-journal__head { margin-bottom: var(--sp-5); gap: var(--sp-4); }
  .hm-journal__head h2 { max-width: 20ch; }
  .hm-post--row { gap: var(--sp-4); padding: var(--sp-3); }
  .hm-post--row .hm-post__cover { width: 76px; }

  /* ─ Appel final ─
     Deux boutons de largeurs différentes empilés au centre lisaient
     comme un accident : ils prennent la même largeur pleine. */
  .hm-cta__inner { padding-block: 56px; gap: var(--sp-4); }
  .hm-cta__inner h2 { max-width: 16ch; }
  .hm-cta__actions { width: 100%; gap: var(--sp-2); }
  .hm-cta__actions > * { flex: 1 1 100%; justify-content: center; }

  /* ─ Accompagnements ─ */
  .hm-offers__list { gap: var(--section-y-sm); }
  .hm-offer { gap: var(--sp-5); }
  .hm-offer__title { max-width: 20ch; }
}