/* =========================================================================
   home.css — Page d'accueil (6 sections plein écran).
   Chargé uniquement sur la home (cf. snippet head). Dépend de variables.css.
   Reproduit le comportement du legacy (bulmaStyles.scss + home.js) :
     - chaque section = 100vh, contenu centré verticalement ;
     - scroll-snap vertical mandatory (désactivé en mobile / petite hauteur) ;
     - lien « suivant » ancré en bas, sur une bande de fond contrastée ;
     - animation d'entrée en cascade quand la section devient visible.
   ========================================================================= */

/* --- Scroll-snap (desktop / hauteur suffisante) -----------------------
   La première « page » de snap = header + section 1 réunis sur un écran
   (comme le legacy `is-fullheight-with-navbar`). Le snap initial cale donc
   sur le header (haut du document), qui reste accessible. Les sections
   suivantes snappent une à une.
   --------------------------------------------------------------------- */
@media (min-width: 1024px) and (min-height: 30em) {
  html.home {
    /* Hauteur occupée par le header (marge navbar 44px + navbar 72px). */
    --header-height-snap: 116px;
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
  }
  /* Cible de snap initiale : le header (donc la navbar reste visible).
     On transfère la marge haute de la navbar en padding du header pour
     neutraliser le margin-collapse : le bord supérieur du header tombe
     ainsi au top réel du document (0) — l'espacement au-dessus de la
     navbar fait partie de la cible et reste visible quand on remonte. */
  html.home .site-header {
    padding-top: 2.75rem;
    scroll-snap-align: start;
  }
  html.home .site-header .navbar {
    margin-top: 0;
  }
  /* Section 1 partage l'écran avec le header → pas une cible séparée.
     Hauteur FIXE (= reste de l'écran sous le header) pour que la bande
     « suivant », ancrée en bas de la section, reste dans le viewport. */
  html.home #slider1 {
    height: calc(100vh - var(--header-height-snap));
    min-height: 0;
    scroll-snap-align: none;
    /* Sur écran étroit/court (tablette : navbar encore en desktop, mais peu
       de hauteur), le contenu en 2 colonnes serrées dépasse cette hauteur
       fixe. Avec `center`, le débordement remonte symétriquement et le titre
       passe SOUS la navbar. `safe center` aligne alors le contenu en haut de
       la zone (jamais sous le header) tout en gardant le centrage quand il y
       a la place. */
    justify-content: safe center;
  }
  /* L'illustration de la section 1 tient dans cette zone réduite
     (hauteur header + paddings haut/bas réservés). */
  html.home #slider1 .home-hero__media img {
    max-height: calc(100vh - var(--header-height-snap) - 11rem);
  }
  /* Sections : snap plein écran sur leur bord haut. */
  html.home .home-hero:not(#slider1) {
    scroll-snap-align: start;
  }
  /* Le footer est plus court qu'un écran : son bord HAUT (5400px) dépasse le
     scroll max (5260px) et serait donc inatteignable avec `start`. On l'aligne
     par le BAS (`end`) → son point de snap tombe pile au scroll max, ce qui le
     rend accessible et permet de quitter la dernière section vers lui. */
  html.home .site-footer {
    scroll-snap-align: end;
  }
}

/* --- Tablette (layout desktop 2 colonnes, mais hauteur trop courte) -----
   Entre ~1024px de large et un viewport peu haut (tablette paysage), le
   contenu 2 colonnes de la section 1 a besoin de plus que la hauteur fixe
   `100vh - header`. Forcée à cette hauteur, la section débordait SOUS la
   bande « Sortir du silence » (ancrée en absolu en bas) → chevauchement du
   bouton « Trouver un professionnel ».
   Comme la prod (Bulma : section en flux, `min-height` seulement), on laisse
   ici la section 1 GRANDIR avec son contenu et on remet sa bande dans le
   flux : elle « descend » sous le contenu au lieu de le recouvrir. Le snap
   reste actif (la section devient juste plus haute que le viewport). */
@media (min-width: 1024px) and (min-height: 30em) and (max-height: 56em) {
  html.home #slider1 {
    height: auto;
    min-height: calc(100vh - var(--header-height-snap));
    /* La bande passe dans le flux (cf. ci-dessous) et s'étire jusqu'aux bords
       via des marges négatives : on ne réserve donc PAS de padding-bottom
       (sinon un vide apparaîtrait sous la bande). */
    padding-bottom: 0;
  }
  /* Bande « suivant » remise dans le flux : elle suit le contenu et descend
     avec lui, sans le chevaucher. En statique, elle hériterait du padding
     latéral/bas de la section (gutter à gauche + vide en bas) : on l'annule
     par des marges négatives pour qu'elle aille jusqu'aux bords et colle à la
     section suivante, comme en mode absolu (et comme la prod). */
  html.home #slider1 .home-hero__foot {
    position: static;
    margin-top: 4rem;        /* air au-dessus du contenu (remplace le centrage) */
    margin-bottom: 0;
    margin-inline: -3rem;    /* reprend le gutter latéral (padding 3rem) → pleine largeur */
    width: auto;
  }
}

/* --- Section plein écran ---------------------------------------------- */
.home-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  /* Le padding-bottom réserve la place de la bande « suivant » (foot absolu) :
     le contenu est ainsi centré DANS l'espace situé au-dessus d'elle, ce qui
     le remonte — comme le legacy (hero-body au-dessus, hero-foot ancré bas). */
  padding: 4rem 3rem 7rem;       /* gutter latéral = 48px ; 7rem = hauteur du foot */
}

/* Fonds par section (mapping legacy). */
.home-hero--light  { background-color: var(--c-purple-extra-light); }
.home-hero--purple { background-color: var(--c-purple);        color: var(--c-white); }
.home-hero--dark   { background-color: var(--color-primary);   color: var(--c-white); }
.home-hero--coral  { background-color: var(--color-secondary); color: var(--c-white); }

/* --- Disposition 2 colonnes (texte + illustration) -------------------- */
.home-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2rem;
  width: 100%;            /* pleine largeur (pas de max-width) — cf. prod */
}
.home-hero__media {
  margin: 0;
  text-align: center;
}
.home-hero__media img {
  /* Remplit la colonne (legacy : image ≈ pleine largeur de sa moitié),
     bornée en hauteur pour tenir dans la zone de contenu. */
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - 11rem);
  /* Le reset global met les <img> en `display:block`, ce qui annule le
     `text-align:center` du conteneur : les images plus étroites que leur
     colonne (slides 2-4, width < 100%) se collaient à gauche et n'étaient
     donc pas alignées en X avec l'image pleine largeur de la slide 1.
     `margin-inline:auto` les recentre dans leur colonne. */
  margin-inline: auto;
}
/* Sliders 2 à 4 : illustrations un peu plus petites (~-20 %) qu'en pleine
   colonne — la section 1 garde sa taille (déjà plus mesurée). */
.home-hero:not(#slider1) .home-hero__media img {
  width: 80%;
}
/* Slider 3 : la goutte est plus volumineuse visuellement → réduite davantage.
   Sélecteur aligné sur la règle générale (.home-hero + média) pour gagner en
   spécificité, sinon le `width: 80%` ci-dessus l'emporterait. */
.home-hero#slider3 .home-hero__media img {
  width: 65%;
}
.home-hero__text h1,
.home-hero__text h2 {
  max-width: 80%;
  margin-bottom: 1.875rem;
  font-size: var(--fs-display);     /* 42px (legacy) */
  font-weight: var(--fw-extrabold);
  line-height: 1.05;
  text-transform: uppercase;
}
.home-hero__text h2 { font-weight: var(--fw-bold); }

/* Couleurs des textes — relevées sur la prod (hemogyn.fr) :
     section claire  → titre + paragraphe en primaire (#1b0f7d) ;
     sections colorées (violet / foncé / corail) → titre + paragraphe blanc.
   Surcharge les règles globales de base.css (h2 / p en violet). */
.home-hero--light .home-hero__text h1,
.home-hero--light .home-hero__text h2,
.home-hero--light .home-hero__text p { color: var(--color-primary); }

.home-hero--purple .home-hero__text,
.home-hero--purple .home-hero__text h2,
.home-hero--purple .home-hero__text p,
.home-hero--dark   .home-hero__text,
.home-hero--dark   .home-hero__text h2,
.home-hero--dark   .home-hero__text p,
.home-hero--coral  .home-hero__text,
.home-hero--coral  .home-hero__text h2,
.home-hero--coral  .home-hero__text p { color: var(--c-white); }

.home-hero__text p {
  font-size: 1.5rem;        /* 24px desktop (legacy $size-4) */
  line-height: 1.875rem;    /* 30px */
}

/* --- Boutons (contenu Bulma migré : .button is-primary / is-secondary) - */
.home-hero .button {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 2rem;
  height: 3.75rem;
  padding-inline: 1.875rem;
  border-radius: var(--radius-md);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease;
}
/* is-primary : fond primaire, texte blanc (sections 1 & 4). */
.home-hero .button.is-primary {
  background-color: var(--color-primary);
  color: var(--c-white);
}
/* is-secondary : fond blanc, texte violet foncé #282473 (sections 2 & 3) —
   relevé sur la prod (et non un bouton corail). */
.home-hero .button.is-secondary {
  background-color: var(--c-white);
  color: #282473;
}
.home-hero .button.is-primary:hover   { background-color: var(--c-purple); }
.home-hero .button.is-secondary:hover { background-color: var(--c-purple-light); }
.home-hero .button img { height: 1.5rem; width: auto; }
.home-hero .button + .button { margin-left: 1rem; }

/* --- Lien « suivant » ancré en bas, sur bande contrastée --------------
   La bande couvre la MOITIÉ de la largeur (legacy : `column is-half-desktop`),
   ancrée à gauche (défaut) ou à droite (`--right`). Texte aligné à droite. */
.home-hero__foot {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
}
.home-hero__foot--right { justify-content: flex-end; }

.home-hero__next {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2rem;
  width: 50%;
  padding: 1.5rem 4.18rem 2.68rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  color: var(--c-white);
  background-color: var(--c-purple);
  text-align: right;
}
.home-hero__next img { width: 1.25rem; height: auto; }

/* Couleur de la bande selon la section (legacy : `.switch-section`).
   Principe : la bande annonce la section SUIVANTE → elle en reprend le fond. */
.home-hero--light  .home-hero__next { background-color: var(--c-purple); }
.home-hero--purple .home-hero__next { background-color: var(--color-primary); }
.home-hero--dark   .home-hero__next { background-color: var(--color-secondary); }
.home-hero--coral  .home-hero__next {
  background-color: var(--c-purple-light);
  color: var(--color-primary);
}

/* Cas particuliers : les deux dernières bandes mènent à des sections claires.
   On reprend le fond exact de la section ciblée (texte foncé pour lisibilité),
   au lieu du violet plein hérité de `--light`.
   #medias  → section médias (fond `--c-purple-extra-light`)
   #actus   → section actus  (fond `--c-purple-light`) */
#slider4 .home-hero__next { background-color: var(--c-purple-extra-light); }
#medias  .home-hero__next {
  background-color: var(--c-purple-light);
  color: var(--color-primary); /* fond clair → texte foncé lisible */
}

/* --- Section médias --------------------------------------------------- */
.home-medias {
  gap: 0;
  /* Contenu court (titre + 2 lignes de logos) : centré verticalement, il
     laissait un grand vide en haut. On le cale en haut (comme la prod) avec
     un padding-top qui place le titre à ~200px du bord — `clamp` pour ne pas
     trop pousser sur les petites hauteurs. */
  justify-content: flex-start;
  padding-top: clamp(4rem, 18vh, 12rem);
}
.home-medias__title {
  width: 100%;
  margin: 0 0 4rem;
  text-align: right;
  color: var(--color-primary);
  font-size: var(--fs-display);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
}
.home-medias__logos {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  width: 100%;
}
.home-medias__row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 3rem;
  flex-wrap: wrap;
}
.home-medias__logos img {
  max-height: 7rem;
  max-width: 14rem;
  width: auto;
  object-fit: contain;
}

/* --- Section actualités ----------------------------------------------- */
.home-actus { background-color: var(--c-purple-light); }
.home-actus__title {
  width: 100%;
  margin: 0 0 2.5rem;
  color: var(--color-primary);
  font-size: var(--fs-display);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
}
.home-actus__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  width: 100%;
}

/* Carte actu : image plein cadre, titre, flèche « lire » en bas à droite. */
.actu-card {
  display: flex;
  flex-direction: column;
  background-color: var(--c-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.actu-card a {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.actu-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.actu-card__media {
  aspect-ratio: 16 / 10;
  background-color: var(--c-bg-light);
}
.actu-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.actu-card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex: 1;
  padding: 1.5rem;
}
.actu-card__title {
  margin: 0;
  color: var(--color-primary);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}
.actu-card__more {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background-color: var(--color-secondary);
  color: var(--c-white);
  font-size: 1.25rem;
  line-height: 1;
}
.home-actus__more {
  width: 100%;
  margin: 2.5rem 0 0;
}
.home-actus .btn--primary {
  display: inline-flex;
  align-items: center;
  height: 3.75rem;
  padding-inline: 1.875rem;
  border-radius: var(--radius-md);
  background-color: var(--color-primary);
  color: var(--c-white);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
}
.home-actus .btn--primary:hover { background-color: var(--c-purple); }

/* --- Animation d'entrée (IntersectionObserver → .is-visible) ---------- */
@media (min-width: 1024px) and (min-height: 30em) {
  .home-hero [data-animate] > * {
    opacity: 0;
    transform: translate3d(0, 4rem, 0);
    transition:
      opacity 800ms var(--delay, 0ms),
      transform 800ms cubic-bezier(0.13, 0.07, 0.26, 0.99) var(--delay, 0ms);
  }
  .home-hero.is-visible [data-animate] > * {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* --- Mobile / petite hauteur : pas de snap, pile verticale ------------ */
@media (max-width: 1023px), (max-height: 30em) {
  html.home { height: auto; overflow-y: visible; scroll-snap-type: none; }
  .home-hero {
    min-height: auto;
    /* padding-bottom (8.5rem) = hauteur de la bande « suivant » (~6.3rem,
       position absolue) + une marge d'air sous le dernier bouton, sinon le
       contenu centré venait coller voire chevaucher la bande. */
    padding: 3rem 1.5rem 8.5rem;
  }
  .home-hero__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  /* Sections texte-à-droite : illustration au-dessus du texte. */
  .home-hero--purple .home-hero__media,
  .home-hero--coral  .home-hero__media { order: -1; }
  .home-hero__media img { max-height: 40vh; }
  .home-hero__text p { font-size: var(--fs-base); line-height: var(--lh-base); }
  .home-hero__text h1,
  .home-hero__text h2 { max-width: none; }
  /* Boutons : empilés pleine largeur (centrés sur leur contenu).
     Neutralise le margin-left desktop (.button + .button) qui, en pile,
     décalait le 2e bouton de 16px — cf. section 4 « Se former / Être référencé ». */
  .home-hero .button {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 1rem;
  }
  .home-hero .button + .button { margin-left: 0; }
  .home-hero__text h1,
  .home-hero__text h2,
  .home-medias__title,
  .home-actus__title { font-size: 1.75rem; }
  .home-medias__title { text-align: left; }
  .home-medias__row { justify-content: center; }
  .home-actus__grid { grid-template-columns: 1fr; }
  .home-hero__next {
    width: 100%;
    justify-content: flex-end;
    padding: 1.25rem 1.5rem 1.75rem;
  }
}