/* Home page-specific styles are loaded here while shared layout and utilities remain in style.css. */

/* ---------------------------------------------------------------
   Hero reel : vidéo verticale dans la carte d'illustration.
   Ratio réel de assets/videos/reel.mp4 = 1080x1620, soit 2/3 :
   le conteneur est calé dessus pour que la vidéo soit visible
   intégralement, sans rognage horizontal.
   Reprend le style de .illustration-card (rayon, bordure, ombre)
   et reste transparent pour ne pas créer de fond blanc dur.
   --------------------------------------------------------------- */

.hero-visual .hero-reel {
  /* ~650px de haut sur desktop, bridé en vh pour ne pas faire déborder le hero
     sur les écrans peu hauts (la largeur suit via le ratio 2/3). */
  --reel-max-height: min(650px, 72vh);
  --reel-padding: 0.6rem;

  position: relative;
  width: min(100%, calc(var(--reel-max-height) * 2 / 3 + var(--reel-padding) * 2));
  margin: 0 auto;
  padding: var(--reel-padding);
  overflow: hidden;
  background: var(--glow);
}

body[data-theme='dark'] .hero-reel {
  background: var(--glow);
}

.hero-reel-video,
.hero-reel-fallback {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1080 / 1620;
  max-height: var(--reel-max-height);
  border-radius: calc(1.75rem - var(--reel-padding));
  background: transparent;
}

/* contain (et non cover) : aucune image n'est rognée, même si le fichier
   vidéo est un jour remplacé par un autre ratio. Le cadre étant calé sur
   1080/1620, il n'y a aujourd'hui aucune bande vide ; s'il y en avait, elle
   laisserait voir le var(--glow) de la carte, jamais un fond noir. */
.hero-reel-video {
  object-fit: contain;
}

/* Repli : l'ancienne illustration reste masquée tant que la vidéo est lisible. */
.hero-reel-fallback {
  display: none;
  object-fit: contain;
  padding: 1rem;
}

.hero-reel.is-video-unavailable .hero-reel-video {
  display: none;
}

.hero-reel.is-video-unavailable .hero-reel-fallback {
  display: block;
}

/* Bouton son en overlay, coin bas-droit de la vidéo. Le cadre ayant le même
   ratio que le fichier (1080/1620), l'image occupe toute la zone : le bouton
   repose sur la vidéo visible, jamais sur une bande vide. */
.hero-reel-sound {
  position: absolute;
  right: calc(var(--reel-padding) + 0.7rem);
  bottom: calc(var(--reel-padding) + 0.7rem);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.hero-reel-sound:hover {
  transform: translateY(-1.6px) scale(1.04);
  background: var(--surface-strong);
}

.hero-reel-sound:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.hero-reel-sound svg {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
  pointer-events: none;
}

/* aria-pressed="true" = son actif : on affiche l'icône haut-parleur. */
.hero-reel-sound .reel-icon-on {
  display: none;
}

.hero-reel-sound[aria-pressed='true'] .reel-icon-off {
  display: none;
}

.hero-reel-sound[aria-pressed='true'] .reel-icon-on {
  display: block;
}

.hero-reel.is-video-unavailable .hero-reel-sound {
  display: none;
}

/* Mobile / tablette : le hero passe en colonne, la vidéo se place sous le texte
   et sa hauteur (padding compris) reste sous 70vh. */
@media (max-width: 920px) {
  .hero-visual .hero-reel {
    /* Le padding de la carte est retranché : hauteur totale = 70vh maximum. */
    --reel-max-height: min(650px, calc(70vh - var(--reel-padding) * 2));
  }
}