/* =====================================================
   CONSEIL SNDGK — Sections pleine hauteur, page CONSTELLATION

   Fichier AUTONOME, chargé par constellation.html et constellation-en.html :
   ne modifie ni premium.css ni premium-themes.css.

   CE QU'IL FAIT — chaque section occupe un écran, en-tête déduit.

   PAS DE CALAGE (scroll-snap). Mesuré : posé sur cette page, il FIGE le
   défilement. Lenis écrit scrollTop à chaque image pour le lisser, le calage
   ramène le navigateur sur le point d'ancrage le plus proche, et les deux se
   disputent la position soixante fois par seconde. La page ne bouge plus.
   Ce n'est pas un réglage à trouver : les deux veulent tenir le même volant.

   min-height ET NON height. Une section dont le contenu depasse doit
   grandir, pas rogner son texte. Sur un ecran bas, //04 depasse l'ecran :
   c'est le bon echec.

   100dvh ET NON 100vh. Sur mobile, 100vh compte la barre du navigateur qui
   se retracte au defilement : la hauteur change en cours de route et la mise
   en page sursaute. dvh suit la hauteur reellement visible.
===================================================== */

body.page-constellation {
  /* L'en-tête est en position fixe : il recouvre le haut de chaque section.
     Cette valeur doit suivre sa hauteur réelle, mesurée à 76 px. */
  --entete-h: 76px;

  /* Respiration au-dessus et au-dessous du //02. Bien plus serrée que celle
     des autres sections : chaque pixel rendu ici passe directement dans le
     film, multiplié par 1,78 en largeur. */
  --film-pad: clamp(0.6rem, 1.4vh, 1.2rem);

  /* La largeur que .wrap donnait au texte avant qu'on lui retire son plafond,
     soit son max-width moins ses deux rembourrages — les mêmes valeurs que
     premium.css, recopiées telles quelles. Le titre et le chapeau du //02
     gardent ainsi exactement leur position d'origine. */
  --film-colonne: calc(min(var(--maxw), 100vw) - 2 * clamp(1.4rem, 4vw, 3.5rem));
}

body.page-constellation section.page-hero,
body.page-constellation section.block {
  min-height: 100vh;          /* repli pour les navigateurs sans dvh */
  min-height: 100dvh;
  display: flex;
  align-items: center;
  /* Le rembourrage haut absorbe l'en-tête fixe : le contenu se centre dans
     ce qui reste visible, pas dans la section entière. */
  padding-top: calc(var(--entete-h) + clamp(2rem, 5vh, 4rem));
  padding-bottom: clamp(2rem, 5vh, 4rem);
}

/* .wrap devient l'element centre ; sans cette largeur il se reduirait a son
   contenu sous l'effet du conteneur flex. */
body.page-constellation section.page-hero > .wrap,
body.page-constellation section.block > .wrap {
  width: 100%;
}


/* ---------- Le //02 : le film prend tout ce qui reste ----------

   POURQUOI L'ANCIENNE FORMULE ETAIT TROP PETITE. Elle plafonnait le cadre a
   `min(1000px, ...)` : sur un ecran de 1900 px, le film occupait 53 % de la
   largeur, avec du vide de chaque cote. Et elle reservait au texte une valeur
   ecrite en dur, 19rem, qui ne correspondait plus a rien des que le titre
   changeait de longueur.

   CE QUI REMPLACE. Le .wrap de cette section devient une colonne flex a
   hauteur DEFINIE (l'ecran moins l'en-tete et les rembourrages). Le marqueur,
   le titre et le chapeau y prennent la place qu'il leur faut ; le cadre
   recupere tout le reste avec `flex: 1 1 0`. Sa largeur se deduit ensuite du
   `aspect-ratio: 16/9` pose en ligne dans le HTML.

   Plus aucun nombre a maintenir : si le titre passe a trois lignes, le film
   se reduit d'autant, tout seul, et rien ne deborde.

   PAS DE transform. Le cadre porte `data-reveal` : GSAP ecrit sa propre
   transform pour l'animation d'apparition. Toute translation posee ici
   serait ecrasee — d'ou le decapsulage par la largeur du .wrap plutot que
   par un `translateX(-50%)`. */

/* LA DEROGATION. Les sept autres sections tiennent dans un ecran. Celle-ci
   n'y est plus tenue : le film prime, et la section grandit autant qu'il le
   faut. C'est ce qui debloque tout — tant qu'il fallait loger le titre ET le
   film dans une seule hauteur d'ecran, le film plafonnait a 70 %. */
body.page-constellation section.block:has(.media-frame video) {
  min-height: 0;
  display: block;
  padding-top: calc(var(--entete-h) + var(--film-pad));
  padding-bottom: var(--film-pad);
}

/* Le .wrap perd son plafond : c'est ce qui autorise le film a depasser la
   colonne de lecture. */
body.page-constellation section.block:has(.media-frame video) > .wrap {
  max-width: none;
}

/* Le texte, lui, reste exactement ou il etait. --film-colonne reproduit la
   largeur que .wrap lui donnait avant (son plafond moins ses rembourrages) :
   le titre ne bouge pas d'un pixel, seul le film s'elargit. */
body.page-constellation section.block:has(.media-frame video) > .wrap > .sec-head,
body.page-constellation section.block:has(.media-frame video) > .wrap > h2,
body.page-constellation section.block:has(.media-frame video) > .wrap > p {
  flex: 0 0 auto;
  width: 100%;
  max-width: var(--film-colonne);
  margin-inline: auto;
}

body.page-constellation section.block:has(.media-frame video) > .wrap > p.lead {
  margin-bottom: clamp(0.7rem, 1.6vh, 1.6rem);
}

/* Le marqueur //02 et son ecart au titre sont, apres le titre lui-meme, le
   plus gros consommateur de hauteur de cette section : environ 100 px sur un
   ecran de 975. On resserre ici, et ici seulement — les sept autres sections
   gardent la respiration reglee plus haut. */
body.page-constellation section.block:has(.media-frame video) > .wrap > .sec-head {
  margin-bottom: clamp(0.5rem, 1.2vh, 1.2rem);
}

/* LA TAILLE DU FILM — trois plafonds, le plus petit gagne.

   1. 94vw : la largeur de l'ecran, deux traits de marge exceptes. C'est la
      cible visee.
   2. La hauteur : meme si la SECTION a le droit de depasser l'ecran, le FILM
      lui-meme doit y tenir entier. Un film plus haut que l'ecran obligerait a
      choisir entre voir le haut de l'image ou la barre de commande — jamais
      les deux. On lui reserve donc la hauteur visible moins l'en-tete fixe et
      un filet de respiration, et la largeur en decoule par le 16/9.
   3. 1800px : au-dela, sur un tres grand moniteur, l'image cesse de gagner en
      lisibilite et le regard ne suit plus le cadre.

   Sur 1900x975 c'est la hauteur qui l'emporte : environ 1555 x 875, soit 82 %
   de la largeur et 90 % de la hauteur. Sur un ecran haut et etroit, c'est 94vw
   qui limite. Aucune bascule a ecrire : min() choisit. */
body.page-constellation section.block:has(.media-frame video) .media-frame {
  width: min(94vw, calc((100dvh - var(--entete-h) - 1.5rem) * 16 / 9), 1800px);
  max-width: none;
  margin-inline: auto;
}

/* Sous 860 px, la largeur d'ecran redevient le seul facteur limitant : le
   cadre prend simplement toute la colonne. */
@media (max-width: 859px) {
  body.page-constellation section.block:has(.media-frame video) > .wrap {
    max-width: var(--maxw);
  }
  body.page-constellation section.block:has(.media-frame video) .media-frame {
    width: 100%;
  }
}

/* Sous 620 px, imposer un ecran par section transformerait des sections
   courtes en grands vides. On rend la hauteur au contenu. */
@media (max-width: 619px) {
  body.page-constellation section.page-hero,
  body.page-constellation section.block {
    min-height: 0;
    padding-top: var(--section-y);
    padding-bottom: var(--section-y);
    display: block;
  }
  body.page-constellation section.page-hero {
    padding-top: calc(var(--entete-h) + var(--section-y));
  }
}

/* =====================================================
   Les espacements suivent aussi la hauteur

   Les tailles de texte sont reglees en ligne dans le HTML (les styles en
   ligne battent toute feuille) ; il reste ici les espacements, que
   premium.css calibre sur la largeur seule. Meme principe : min(vw, vh).
===================================================== */

/* premium.css : clamp(2.2rem, 5vw, 4rem). Sur un ecran bas, 4rem d'ecart
   entre le marqueur et le titre coutent plus que ce qu'ils rapportent. */
body.page-constellation .sec-head {
  margin-bottom: clamp(1.2rem, min(5vw, 3.4vh), 4rem);
}

body.page-constellation .sec-intro,
body.page-constellation .lead {
  font-size: clamp(0.98rem, min(1.25vw, 1.9vh), 1.15rem);
}

/* Le //04 est une liste .steps : quatre etapes dont chacune porte
   clamp(1.6rem, 3.5vw, 2.6rem) de rembourrage vertical dans premium.css,
   calibre sur la largeur. Sur un ecran bas, ces quatre respirations
   suffisent a faire deborder la section. */
body.page-constellation .steps .step {
  padding: clamp(0.7rem, min(3.5vw, 2.2vh), 2.6rem) 0;
}