/* ==========================================================================
   HÉROS — Direction B2.2 « Pelage réel », approuvée le 3 août 2026
   Repris de maquettes/direction-b2-2-pelage-reel/styles.css, valeurs
   inchangées. Chargé par l'accueil seulement : aucune autre page ne paie
   ces octets.

   Les cinq points figés de la référence ne sont pas dans ce fichier — ils
   sont dans hero.js (vitesse 1,00×, démarrage à 1 100 ms, aucune boucle,
   résultat final conservé, deux versions) et dans les requêtes média
   ci-dessous (recadrage ordinateur / téléphone).

   Écarts assumés par rapport à la référence, détaillés dans
   documentation/ecarts-vs-b2-2.md :
     - le bouton de revue « Rejouer la séquence » n'existe plus ;
     - la section « note » de maquette est retirée ;
     - le héros descend légèrement pour laisser place à l'en-tête collant.
   ========================================================================== */

.hero {
  position: relative;
  min-height: min(calc(100dvh - 82px), 940px);
  display: flex; flex-direction: column;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(120% 78% at 62% 8%, rgba(79, 220, 239, .20), transparent 62%),
    radial-gradient(90% 62% at 12% 96%, rgba(59, 130, 246, .26), transparent 66%),
    radial-gradient(70% 50% at 92% 82%, rgba(255, 90, 160, .16), transparent 66%),
    linear-gradient(178deg, var(--deep-1) 0%, var(--deep) 34%, var(--deep-3) 78%, var(--deep-4) 100%);
}

.hero__inner {
  position: relative; z-index: 30;
  flex: 1;
  width: 100%; max-width: var(--max); margin-inline: auto;
  padding: clamp(6px, 2vh, 26px) var(--gut) clamp(20px, 3vh, 44px);
  display: grid; align-items: center;
  /* La plaque est plus large que la colonne de texte : c'est elle le sujet. */
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(18px, 2.6vw, 44px);
}

/* --- Ambiance ------------------------------------------------------------- */
.amb { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.amb i { position: absolute; display: block; border-radius: 50%; filter: blur(66px); }
.amb i:nth-child(1) {
  width: 46vw; height: 46vw; right: 2vw; top: -14vw;
  background: radial-gradient(circle, rgba(79,220,239,.42), transparent 68%);
}
.amb i:nth-child(2) {
  width: 40vw; height: 40vw; left: -8vw; top: 22vh;
  background: radial-gradient(circle, rgba(59,130,246,.34), transparent 68%);
}
.amb i:nth-child(3) {
  width: 30vw; height: 30vw; right: 18vw; bottom: -8vw;
  background: radial-gradient(circle, rgba(139,107,255,.30), transparent 70%);
}
.amb__line {
  position: absolute; left: -10%; right: -10%; bottom: 16%; height: 42vh;
  background: linear-gradient(180deg, transparent, rgba(169,233,246,.16) 46%, transparent);
  filter: blur(24px);
}
.amb__screen {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(241,246,251,.30) 1px, transparent 1.4px);
  background-size: 8px 8px;
  opacity: .22;
  mask-image: radial-gradient(115% 80% at 40% 34%, #000 12%, transparent 74%);
}

/* --- Mot géant ------------------------------------------------------------ */
.giant {
  position: absolute; pointer-events: none; user-select: none;
  left: 50%; top: 47%; transform: translate(-50%, -50%);
  font-weight: 800; font-size: clamp(230px, 30vw, 470px);
  letter-spacing: -.055em; line-height: .72; white-space: nowrap;
}
.giant--back {
  z-index: 2;
  color: rgba(169, 233, 246, .11);
  -webkit-text-stroke: 1.6px rgba(169, 233, 246, .20);
}
.giant--front {
  z-index: 34;
  color: rgba(241, 246, 251, .10);
  -webkit-text-stroke: 1.8px rgba(241, 246, 251, .44);
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0 30%, #000 44%, #000 76%, transparent 99%);
  mask-image: linear-gradient(90deg,
    transparent 0 30%, #000 44%, #000 76%, transparent 99%);
  filter: drop-shadow(0 2px 12px rgba(3, 18, 38, .85));
}
@media (max-width: 1080px) { .giant--front { display: none; } }

/* ==========================================================================
   LA PLAQUE — la vidéo réelle
   ========================================================================== */
.plate {
  position: relative; z-index: 20;
  grid-column: 2; grid-row: 1;
  margin: 0;
  width: calc(100% + clamp(40px, 10vw, 180px));
  justify-self: start;
  perspective: 1800px;
  perspective-origin: 38% 50%;
}

.plate__frame {
  position: relative;
  aspect-ratio: 8 / 5;
  overflow: hidden;
  border-radius: 6px;
  transform: rotateY(-11.5deg) rotateX(2.6deg) rotate(-1.2deg);
  transform-origin: 22% 50%;
  -webkit-mask-image: radial-gradient(84% 92% at 47% 48%, #000 44%, transparent 98%);
  mask-image: radial-gradient(84% 92% at 47% 48%, #000 44%, transparent 98%);
  filter: drop-shadow(0 46px 76px rgba(3, 18, 38, .74));
}

.plate::before {
  content: ''; position: absolute; z-index: -1;
  left: 46%; top: 50%; width: 104%; aspect-ratio: 1.5;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(79,220,239,.38) 0%, rgba(59,130,246,.22) 42%, transparent 70%);
  filter: blur(46px);
  pointer-events: none;
}

.plate__img,
.plate__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;
}
.plate__video { opacity: 0; pointer-events: none; }
.plate__video.is-on { opacity: 1; transition: opacity 320ms var(--e-soft); }
.plate__video::-webkit-media-controls { display: none !important; }

.plate__wipe {
  position: absolute; inset: -2% -4%;
  background: linear-gradient(101deg,
    var(--deep-1) 0 42%,
    rgba(79, 220, 239, .55) 51%,
    rgba(169, 233, 246, .18) 57%,
    transparent 70%);
  transform: translate3d(118%, 0, 0);
  opacity: 0;
  pointer-events: none;
}
.js-anim .plate__wipe { transform: translate3d(0, 0, 0); opacity: 1; will-change: transform; }
.js-anim .plate__wipe.is-gone { animation: b22-wipe 980ms var(--e-out) 1 forwards; }
@keyframes b22-wipe {
  0%   { transform: translate3d(0, 0, 0); opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translate3d(118%, 0, 0); opacity: 0; }
}

.plate__tag {
  position: absolute; z-index: 3; left: 4%; bottom: -6px;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px 7px 12px;
  border-radius: var(--r-pill);
  background: rgba(4, 20, 40, .82);
  box-shadow: inset 0 0 0 1px var(--line);
  backdrop-filter: blur(6px);
  font-size: 13px; font-weight: 700; letter-spacing: .015em;
  color: var(--t-1);
}
.plate__dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--aqua);
  box-shadow: 0 0 0 3px rgba(79, 220, 239, .22);
}

.plate__start {
  position: absolute; z-index: 6; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 11px;
  min-height: 52px; padding: 0 22px 0 8px;
  border: 0; border-radius: var(--r-pill);
  background: var(--t-1); color: var(--t-ink);
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  box-shadow: 0 16px 40px -14px rgba(3, 18, 38, .9);
}
.plate__start .btn__chip { background: var(--deep-2); color: var(--t-1); }
.plate__start[hidden] { display: none; }

/* --- Colonne de texte ----------------------------------------------------- */
.hero__text { position: relative; z-index: 40; grid-column: 1; grid-row: 1; }
.hero .h1 {
  margin: 18px 0 0;
  font-size: clamp(32px, 3.15vw, 46px);
  max-width: 26ch;
  text-shadow: 0 2px 22px rgba(3, 18, 38, .45);
}
.hero .lead { margin-top: 20px; max-width: 44ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 28px; }
.hero__tertiary { margin-top: 14px; }

.ln { display: block; overflow: hidden; }
.ln__i { display: block; }

/* ==========================================================================
   CHORÉGRAPHIE D'OUVERTURE
   ========================================================================== */
.js-anim .an { opacity: 0; }
.js-anim .an--up { transform: translateY(20px); }
.js-anim .an--ln .ln__i { transform: translateY(108%); }
.js-anim .amb__screen { opacity: 0; }
.js-anim .giant--back { opacity: 0; transform: translate(-50%, -50%) scale(1.08); }
.js-anim .giant--front { opacity: 0; }
.js-anim .plate__frame { opacity: 0; transform: rotateY(-25deg) rotateX(2.6deg) translate3d(6%, 0, -170px); }
.js-anim .plate::before { opacity: 0; }

.js-anim .an.is-in { opacity: 1; transform: none;
  transition: opacity 620ms var(--e-out), transform 780ms var(--e-out); }
.js-anim .an--ln.is-in .ln__i { transform: none; transition: transform 760ms var(--e-out); }
.js-anim .amb__screen.is-in { opacity: .22; transition: opacity 900ms var(--e-out); }
.js-anim .giant--back.is-in {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
  transition: opacity 780ms var(--e-out), transform 1000ms var(--e-out);
}
.js-anim .giant--front.is-in {
  opacity: 1;
  /* Le mot avant et le mot arrière doivent partager exactement la même
     origine. La règle générique `.an.is-in { transform: none; }` déplaçait
     auparavant ce calque à left:50% / top:47% sans le recentrer. */
  transform: translate(-50%, -50%);
  transition: opacity 900ms var(--e-out);
}
.js-anim .plate.is-in .plate__frame {
  opacity: 1; transform: rotateY(-11.5deg) rotateX(2.6deg) rotate(-1.2deg);
  transition: opacity 520ms var(--e-out), transform 1040ms var(--e-out);
}
.js-anim .plate::before { transition: opacity 900ms var(--e-out); }
.js-anim .plate.is-in::before { opacity: 1; }

/* ==========================================================================
   RÉDUCTION DE MOUVEMENT — aucune vidéo n'est même téléchargée
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .js-anim .an,
  .js-anim .an--ln .ln__i,
  .js-anim .giant,
  .js-anim .plate__frame,
  .js-anim .plate::before {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .js-anim .amb__screen { opacity: .22 !important; }
  .js-anim .giant--back { transform: translate(-50%, -50%) !important; }
  .js-anim .giant--front { transform: translate(-50%, -50%) !important; }
  .js-anim .plate__frame {
    transform: rotateY(-11.5deg) rotateX(2.6deg) rotate(-1.2deg) !important;
  }
  .plate__wipe { display: none !important; }
  .plate__video { display: none !important; }
}

/* ==========================================================================
   TABLETTE
   ========================================================================== */
@media (max-width: 1080px) {
  .hero__inner { grid-template-columns: 1fr; gap: 24px; align-content: center; }
  .plate {
    grid-column: 1; grid-row: 1; order: 1;
    width: calc(100% + var(--gut) * 2);
    margin-inline: calc(var(--gut) * -1);
    perspective: none;
  }
  .plate__frame,
  .js-anim .plate.is-in .plate__frame { transform: none; border-radius: 0; }
  .js-anim .plate__frame { transform: translate3d(0, 22px, 0) scale(1.02); }
  .hero__text { grid-column: 1; grid-row: 2; order: 2; }
  .giant { top: 58%; font-size: clamp(190px, 34vw, 330px); }
  .giant--back { color: rgba(169, 233, 246, .075); -webkit-text-stroke-color: rgba(169, 233, 246, .14); }
}

/* ==========================================================================
   TÉLÉPHONE — 40svh de hauteur de média, valeur approuvée
   ========================================================================== */
@media (max-width: 720px) {
  .hero { min-height: auto; }
  .hero__inner {
    grid-template-columns: 1fr;
    padding-top: 0; padding-bottom: 20px;
    row-gap: 18px;
  }
  .plate {
    width: calc(100% + var(--gut) * 2);
    margin-inline: calc(var(--gut) * -1);
    justify-self: stretch;
    perspective: none;
  }
  .plate__frame {
    aspect-ratio: auto;
    height: 40svh;
    max-height: 380px; min-height: 210px;
    border-radius: 0;
    transform: none;
    filter: none;
    -webkit-mask-image: linear-gradient(180deg, #000 0 74%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0 74%, transparent 100%);
  }
  .js-anim .plate__frame { transform: none; }
  .js-anim .plate.is-in .plate__frame { transform: none; }
  .plate::before { display: none; }
  .plate__tag { left: var(--gut); bottom: 8px; font-size: 12.5px; padding: 6px 13px 6px 10px; }

  .giant { top: 20%; font-size: 52vw; }
  .giant--front { display: none; }

  .hero .h1 { font-size: clamp(27px, 7.6vw, 31px); max-width: none; }
  .hero .lead { max-width: none; margin-top: 13px; }
  .hero__cta { margin-top: 20px; gap: 10px; }
  .hero__cta .btn { flex: 1 1 100%; }
  .hero__tertiary { margin-top: 12px; }
}

@media (max-width: 900px) {
  .plate__tag { font-size: 12.5px; }
}