/* Intro plein écran (vidéo à fond transparent) */
html.hp-intro-lock { overflow: hidden; }
html.hp-intro-skip .hp-intro { display: none; }

.hp-intro {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2147483000;
  /* Compatibilité avec l'ancien intro.tpl (fond posé sur la racine) : mêmes réglages que la scène. */
  background-color: var(--color-background-neutral-10, #0b0b0c);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  touch-action: none;
  overscroll-behavior: none;
  opacity: 1;
  transition: opacity 200ms ease;
}
/* Scène : image d'attente + vidéo. Dès que la vidéo affiche sa première image, l'image de fond est retirée : les zones transparentes montrent le site. */
.hp-intro__stage {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: var(--color-background-neutral-10, #0b0b0c);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* Même teinte que le hero : le hero est assombri par son voile (color-mix 32 % de --color-background-neutral-10),
     l'intro, posée au-dessus, ne l'est pas. brightness(.68) = 1 - 0,32. Appliqué une seule fois, à l'image d'attente
     et à la vidéo ensemble (aucun saut de teinte au démarrage). */
  filter: brightness(.68);
}
.hp-intro.is-playing .hp-intro__stage { background-image: none !important; background-color: transparent; }
.hp-intro.is-playing { background-image: none !important; background-color: transparent; }
.hp-intro.is-out { opacity: 0; pointer-events: none; }

.hp-intro__video {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
  pointer-events: none;
}
.hp-intro__video::-webkit-media-controls,
.hp-intro__video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }

.hp-intro__skip {
  position: absolute;
  right: var(--spacing-margin-mobile-md, 16px);
  bottom: var(--spacing-margin-mobile-md, 16px);
  z-index: 1;
  min-height: 40px;
  padding: 0 var(--spacing-width-xl, 16px);
  border: 1px solid var(--color-foreground-neutral-0, #fff);
  border-radius: 0;
  background: transparent;
  color: var(--color-foreground-neutral-0, #fff);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  opacity: 1;
  transition: opacity .5s ease, background-color .2s, color .2s;
}
/* Visible pendant le chargement ; disparaît en fondu dès que la vidéo démarre */
.hp-intro.is-playing .hp-intro__skip { opacity: 0; pointer-events: none; }
.hp-intro__skip:hover,
.hp-intro__skip:focus-visible { background: var(--color-foreground-neutral-0, #fff); color: var(--color-foreground-neutral-10, #111); outline: none; }

@media (prefers-reduced-motion: reduce) {
  .hp-intro { display: none; }
  html.hp-intro-lock { overflow: auto; }
}