/* Vidéo de fond des bandeaux des pages intérieures (.page-hero), voir includes/page-hero-video.php — 2026-10-21.
   Voile neutre (noir léger) plutôt que bleu, pour garder les vraies couleurs de la vidéo, comme sur l'accueil. */
.page-hero-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .8s ease; pointer-events: none;
}
.page-hero-video.is-playing { opacity: 1; }
.page-hero-voile {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to right, rgba(0,0,0,.62) 0%, rgba(0,0,0,.44) 50%, rgba(0,0,0,.3) 100%);
}
.page-hero:has(.page-hero-voile) .page-hero-title,
.page-hero:has(.page-hero-voile) .page-hero-desc,
.res-hero:has(.page-hero-voile) .res-hero-title,
.res-hero:has(.page-hero-voile) .res-hero-desc { text-shadow: 0 1px 3px rgba(0,0,0,.45), 0 2px 18px rgba(0,0,0,.35); }
/* Nos Ressources : bandeau propre à la page (48 px en haut, caché sous le menu fixe) mis aux mêmes proportions
   que les autres bandeaux pour que la vidéo se voie (voile toujours présent : pas de saut si la vidéo est retirée) */
.res-hero:has(.page-hero-voile) {
  min-height: 420px; display: flex; align-items: center;
  padding: calc(64px + 48px) 0 52px;
}
.res-hero:has(.page-hero-voile) > .container { width: 100%; }
.page-hero-pause {
  position: absolute; right: 16px; bottom: 16px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; padding: 0;
  border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.45); color: #fff;
  transition: background-color .15s ease, transform .12s ease-out;
}
.page-hero-pause:hover { background: rgba(0,0,0,.7); }
.page-hero-pause:active { transform: scale(.95); }
.page-hero-pause:focus-visible { outline: 3px solid var(--orange, #f39200); outline-offset: 3px; }
.page-hero-pause[hidden] { display: none; }
.page-hero-pause svg { width: 16px; height: 16px; }
.page-hero-pause .ico-play, .page-hero-pause.is-paused .ico-pause { display: none; }
.page-hero-pause.is-paused .ico-play { display: inline; }
@media (max-width: 760px) {
  /* texte et chiffres empilés sur toute la hauteur : voile régulier */
  .page-hero-voile { background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.42) 50%, rgba(0,0,0,.55) 100%); }
  .page-hero-pause { right: 12px; bottom: 12px; }
  .res-hero:has(.page-hero-voile) { min-height: 340px; padding: calc(60px + 32px) 0 40px; }
}
@media (prefers-reduced-motion: reduce) { .page-hero-video { display: none; } }