/* =========================================================================
   WEBCRAFT — la matière du hero BOUGE · 23/10/2026 · Hugo
   Une vraie vidéo de métal liquide (Pixabay, drakemotion, licence libre)
   en fond du hero, en boucle. L'image fixe reste : elle est l'affiche de la
   vidéo ET le fond de secours si la vidéo ne démarre pas. Mouvement réduit :
   la vidéo est coupée, l'affiche seule.
   ========================================================================= */

/* Le conteneur garde son dégradé de secours (matière fixe de la charte). */
.hero__matiere{
  position:absolute;
  inset:0;
  overflow:hidden;
}

/* La vidéo : plein cadre, recadrée, très légèrement floutée pour la matière
   et pour que le texte reste le sujet. */
.hero__matiere .hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:56% 50%;
  filter:contrast(1.18) saturate(.85) brightness(.96);
  opacity:.92;
  /* fondu de raccord sur les bords : la vidéo se fond dans la nuit */
  -webkit-mask-image:
    linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 12%, #000 34%, #000 100%),
    linear-gradient(180deg, #000 0%, #000 72%, rgba(0,0,0,0) 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 12%, #000 34%, #000 100%),
    linear-gradient(180deg, #000 0%, #000 72%, rgba(0,0,0,0) 100%);
  mask-composite:intersect;
  animation:hero-video-entree 1.6s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes hero-video-entree{
  from{opacity:0}
  to{opacity:.92}
}

/* Le voile de lisibilité passe PAR-DESSUS la vidéo (le pseudo-élément de
   .hero__matiere est au-dessus de ses enfants dans l'ordre du DOM). */
.hero__matiere::after{
  z-index:3;
}

/* Image fixe de secours : si le navigateur ne peut pas lire la vidéo, ou si
   elle est refusée, l'affiche est peinte en fond du conteneur. */
.hero__matiere{
  background-image:url("images/ia-mercure-nappe-liquide-hd.jpg");
  background-size:cover;
  background-position:56% 50%;
}

/* ---------- MOUVEMENT RÉDUIT : on éteint la vidéo, l'affiche reste ------- */
@media (prefers-reduced-motion:reduce){
  .hero__matiere .hero__video{
    display:none!important;
    animation:none!important;
  }
  .hero__matiere{
    background-image:url("images/ia-mercure-nappe-liquide-hd.jpg")!important;
    background-size:cover!important;
    background-position:56% 50%!important;
  }
  .hero .hero__titre .flux-mot::after{
    animation:none!important;
    opacity:0!important;
  }
}