/* =========================================================================
   WEBCRAFT — hero : la vraie matière (mercure étalonné) · 23/10/2026 · Hugo
   Remplace la fumée presque noire par hero-mercure.mp4 (luminosité 93,
   contraste 147, mouvement 17,6 : « visible et vivante »).
   Voile de lisibilité UNIQUEMENT en dégradé côté texte (gauche) ; à droite
   et en bas, la matière se voit franchement.
   ========================================================================= */

/* 1. La vidéo : nette, contrastée, plein cadre. */
.hero .hero__matiere .hero__video{
  opacity:1!important;
  /* Matière vivante (canvas WebGL) : décalée à droite du titre et assombrie, pour que le texte blanc
     reste lisible au pixel (bonnes-pratiques-design §5) et que les plis gardent leur relief. */
  left:34%!important;width:66%!important;
  filter:brightness(.62) contrast(1.15)!important;
}

/* 2. Le voile : un seul dégradé horizontal, opaque à gauche, nul à 58 %. */
.hero .hero__matiere::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:
    linear-gradient(90deg,
      rgba(10,11,14,.96) 0%,
      rgba(10,11,14,.90) 22%,
      rgba(10,11,14,.68) 38%,
      rgba(10,11,14,.30) 50%,
      rgba(10,11,14,.06) 58%,
      rgba(10,11,14,0) 66%)!important;
  pointer-events:none!important;
  animation:none!important;
}

/* 3. Le liseré / la nappe ajoutés précédemment ne doivent pas rabattre
      la lumière sur la droite : on les neutralise. */
.hero .hero__matiere::before{
  display:none!important;
}

/* 4. Bas du hero : un fondu vertical court seulement, pour la continuité. */
.hero::after{
  background:linear-gradient(180deg,rgba(10,11,14,0) 78%,#0A0B0E 100%)!important;
}

/* 5. Mouvement réduit : l'affiche seule, aucun voile animé. */
@media (prefers-reduced-motion:reduce){
  .hero .hero__matiere .hero__video{display:none!important}
  .hero .hero__matiere{
    background:#0A0B0E url("images/ia-mercure-nappe-liquide-hd.jpg") center/cover no-repeat!important;
  }
}