/* =========================================================
   DESIGNER BY NATURE — 05. HERO
   Photographie plein écran, voile montant, titre en capitales
   avec un mot en italique, rail « 01 » à gauche, indicateurs de
   défilement en bas. Composition asymétrique : le texte occupe la
   moitié gauche, jamais le centre optique.

   PLANS
   0  photographie      2  volet d'ouverture
   1  voile             3  contenu, rail, pied
   ========================================================= */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: var(--noir);
  color: var(--ivoire);
}

/* ---------- PHOTOGRAPHIE ---------- */
/* Deux couches imbriquées : le cadre porte le masque de révélation et
   ne bouge plus ensuite ; l'intérieur porte le zoom et la parallaxe.
   Une seule couche obligerait clip-path et transform à cohabiter sur
   le même élément pendant le défilement. */

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero__media-inner {
  position: absolute;
  /* Débord vertical : la parallaxe de sortie ne doit jamais découvrir
     le fond sous l'image. */
  inset: -10% 0;
}

.hero__media-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

/* Placeholder du hero, en attendant la photographie définitive.
   Il ne cherche pas à imiter une photo : il pose les masses lumineuses
   d'un intérieur au crépuscule — foyer chaud à droite, baie plus claire
   au centre, angles éteints — pour que la composition et la lisibilité
   du titre se jugent honnêtement dès maintenant. */
.hero__attente {
  width: 100%;
  height: 100%;
  background-color: #1A1512;
  background-image:
    radial-gradient(38rem 26rem at 72% 62%, rgba(214, 154, 78, .40), transparent 62%),
    radial-gradient(30rem 34rem at 52% 34%, rgba(196, 178, 148, .26), transparent 66%),
    radial-gradient(46rem 40rem at 22% 78%, rgba(60, 46, 34, .85), transparent 70%),
    linear-gradient(168deg, #241C16 0%, #3A2C21 42%, #191310 100%);
}

/* Voile double : montant pour porter le texte, latéral pour détacher la
   colonne de gauche d'une photographie claire. L'opacité est animée à
   l'ouverture et à la sortie — d'où l'élément dédié plutôt qu'un
   pseudo-élément, qu'aucune timeline ne peut cibler. */
.hero__voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .82;
  background-image:
    linear-gradient(to top,
      rgba(17, 17, 15, .86) 0%,
      rgba(17, 17, 15, .50) 38%,
      rgba(17, 17, 15, .18) 68%,
      rgba(17, 17, 15, .40) 100%),
    linear-gradient(to right,
      rgba(17, 17, 15, .66) 0%,
      rgba(17, 17, 15, .20) 44%,
      rgba(17, 17, 15, 0) 72%);
  pointer-events: none;
}

/* Volet d'ouverture : opaque au chargement, retiré par la timeline.
   Sans JavaScript il n'existe pas — la règle .no-js l'efface, sinon il
   masquerait la photographie pour toujours. */
.hero__ouverture {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-color: var(--noir);
  pointer-events: none;
}

.no-js .hero__ouverture { display: none; }

/* ---------- CONTENU ---------- */

.hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--marge);
  /* LE BLOC EST ALIGNÉ EN BAS, MAIS PAS POSÉ AU FOND
     Le hero aligne son contenu sur le bas — c'est ce qui donne à la
     photographie sa pleine hauteur au-dessus du texte. Avec une réserve
     de neuf rems seulement, le titre commençait à mi-hauteur exacte et
     paraissait glisser vers le bord. La réserve est portée à un peu plus
     du double au bureau : le titre remonte d'environ quatre-vingts
     pixels, la composition retrouve son assise sans perdre l'ancrage
     bas, et le pied de hero garde son dégagement.

     Le minimum est haut — quatorze rems — parce que c'est sur les petits
     écrans que le déséquilibre se voyait le plus : la formule en vw n'y
     rend presque rien, et le titre restait à plus de la moitié de la
     hauteur alors qu'il est à deux cinquièmes au bureau.
  */
  padding-block: var(--sp-10) clamp(14rem, 6rem + 9vw, 15rem);
}

/* Assez large pour que la plus longue des deux lignes tienne d'un seul
   tenant. Les deux lignes du titre sont composées à la main : aucune ne
   doit se replier, sinon la composition perd son équilibre. */
.hero__contenu { max-width: min(64rem, 92vw); }

.hero__titre {
  font-family: var(--display);
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

.hero__ligne {
  display: block;
  /* Le masque de ligne reste utile : il rattrape le débord des mots au
     cas où le découpage n'aurait pas eu lieu (JavaScript absent). */
  overflow: hidden;
}

.hero__ligne > span { display: block; }

/* Masques de mots, créés par `decouperMots`. Le padding vertical laisse
   passer accents et jambages ; la marge négative annule sa contribution
   à la hauteur de ligne, sinon chaque ligne du titre s'écarterait. */
.hero__titre .mot {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-block: .12em;
  margin-block: -.12em;
}

.hero__titre .mot__i {
  display: inline-block;
}

/* L'italique de « ressemblent » enveloppe son masque : la règle doit
   donc porter sur le conteneur, pas sur le mot. */
.hero__titre .italique { font-style: italic; }

.hero__soustitre {
  margin-top: var(--sp-6);
  max-width: 26rem;
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1.9;
  letter-spacing: .04em;
  color: var(--beige);
}

.hero__actions { margin-top: var(--sp-7); }

/* ---------- RAIL LATÉRAL ---------- */
/* « 01 », un trait vertical fin, une flèche : le repère de section de la
   maquette. Masqué sous 1024 px, où la marge est trop étroite. */

.hero__rail {
  position: absolute;
  left: calc(var(--marge) / 2);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  color: var(--beige);
}

.hero__rail-num {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
}

.hero__rail-trait {
  width: var(--trait);
  height: clamp(4rem, 8vw, 8rem);
  background-color: currentColor;
  opacity: .4;
  transform-origin: top;
}

.hero__rail-fleche {
  font-size: .75rem;
  opacity: .6;
}

/* ---------- PIED DU HERO ---------- */

.hero__pied {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  z-index: 3;
  padding-inline: var(--marge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}

.hero__scroller {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  color: var(--ivoire);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.hero__rond {
  display: grid;
  place-items: center;
  width: 2.875rem;
  height: 2.875rem;
  border: var(--trait) solid rgba(244, 240, 232, .34);
  border-radius: var(--rayon-rond);
  transition:
    border-color var(--dur-court) var(--ease-net),
    background-color var(--dur-court) var(--ease-net),
    color var(--dur-court) var(--ease-net);
}

.hero__scroller:hover .hero__rond {
  border-color: var(--or);
  background-color: var(--or);
  color: var(--noir);
}

.hero__indice {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--beige);
}

.hero__indice-fleche {
  width: var(--trait);
  height: 1.75rem;
  background-image: linear-gradient(
    to bottom, currentColor 0%, rgba(216, 207, 192, 0) 100%);
}

/* ---------- RESPONSIVE ---------- */

@media (min-width: 48rem) {
  .hero__indice { display: flex; }
}

@media (min-width: 64rem) {
  .hero__rail { display: flex; }
  .hero__pied { bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
}

/* Écrans courts et paysage mobile : le titre prendrait toute la hauteur
   et le pied passerait sous la ligne de flottaison. */
@media (max-height: 34rem) {
  .hero { min-height: 40rem; }
  .hero__pied { position: static; margin-top: var(--sp-6); }
}

/* La photographie remplace le placeholder : elle couvre son cadre sans
   jamais se déformer. Le cadrage vertical est décalé vers le bas, là où
   se trouve le mobilier — un centrage strict couperait le plafond. */
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

/* ---------- SÉQUENCE PILOTÉE PAR LE DÉFILEMENT ---------- */
/* Le canvas se pose par-dessus la photographie, dans le même cadre.
   Il ne se montre qu'une fois ses premières images dessinées : sans
   cette garde, on verrait un rectangle vide le temps du chargement,
   là où la photographie est déjà en place. */

.hero__sequence {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity var(--dur-long) var(--ease-net);
  pointer-events: none;
}

.hero__sequence[data-sequence-prete="true"] { opacity: 1; }

/* La photographie reste dessous : elle porte le premier affichage et
   sert de repli. Une fois la séquence active, elle n'a plus à être
   décodée ni composée. */
.hero__sequence[data-sequence-active="true"] ~ .hero__img,
.hero__media-inner:has(.hero__sequence[data-sequence-active="true"]) .hero__img {
  visibility: hidden;
}