/* ═══════════════════════════════════════════════════════════════
   Why – Vidéo de fond Elementor : correctif "bandes noires" v1.2.0
   Pour revenir en arrière : retirer l'enqueue de ce fichier dans
   why-video-bg.php (ou supprimer les 2).
   ═══════════════════════════════════════════════════════════════ */

/*
 * Bug corrigé (règle ci-dessous, TOUJOURS d'actualité si le contrôle
 * personnalisé "🎬 Vidéo de fond" de why-video-bg.php est utilisé) :
 * la <video> injectée par why-video-bg.js reprend les classes natives
 * d'Elementor (.elementor-background-video-container /
 * .elementor-background-video-hosted) pour hériter gratuitement de leur
 * CSS — mais cette CSS ne fixe QUE la position (top:50%/left:50% +
 * transform:translate(-50%,-50%)) et object-fit:cover, sans jamais
 * définir de largeur/hauteur. Contrairement à la fonctionnalité native
 * "Background Video" d'Elementor (qui calcule et applique une taille en
 * JS après le chargement), notre <video> n'a donc PAS de boîte définie :
 * object-fit:cover n'a aucun effet sans dimensions, et le navigateur
 * affiche la vidéo à sa taille intrinsèque (résolution native du
 * fichier, ex. 1280×720). Sur un hero mobile en min-height:100vh
 * (donc plus haut que large), une vidéo au format paysage ne remplit
 * alors pas toute la hauteur : le fond sombre de la page (#111111)
 * apparaît en bandes au-dessus et en dessous — d'où le décalage visuel
 * signalé sur la page d'accueil. À l'inverse, sur très grand écran,
 * la même vidéo peut déborder horizontalement (recadrée sans dégât
 * visible grâce à l'overflow:hidden du conteneur).
 *
 * Fix : technique "min-width/min-height 100% + largeur/hauteur auto"
 * (indépendante de object-fit, donc plus robuste) — la vidéo est
 * forcée à occuper AU MOINS 100% de la largeur ET AU MOINS 100% de la
 * hauteur du conteneur tout en gardant son ratio d'origine (auto/auto) :
 * elle déborde donc toujours d'au moins un côté, recadrée proprement
 * par l'overflow:hidden déjà présent sur le conteneur, sans jamais
 * laisser de bande vide visible — quel que soit le format de l'écran
 * (mobile portrait comme desktop très large).
 */
.why-bg-video-container video {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  max-width: none;
}

/*
 * v1.2.0 — DÉCOUVERTE (2026-08-20) : sur le hero de la page d'accueil,
 * la vidéo n'est en réalité PLUS rendue via le contrôle "🎬 Vidéo de
 * fond" ci-dessus (0 élément .why-bg-video-container trouvé en direct
 * sur la page) mais via la fonctionnalité vidéo native d'Elementor
 * (classe générée .e-self-hosted-video-base, dans le conteneur
 * .elementor-element-d811f00). La règle du dessus ne s'appliquait donc
 * à RIEN sur cette page depuis le début — d'où le décalage encore
 * visible malgré le premier correctif. Le conteneur est en
 * display:flex + justify-content:center + align-items:center, et la
 * vidéo y est un enfant flex normal (object-fit:contain, pas de
 * largeur/hauteur forcée) : sur mobile étroit, la vidéo se réduit
 * énormément en hauteur (ex. 350×197px) alors que le conteneur fait
 * 100vh (ex. 844px) — ce qui laisse un immense espace vide au-dessus
 * ET en dessous, où le fond sombre de la page apparaît (bien plus
 * qu'une simple "bande" : jusqu'à ~320px de chaque côté sur mobile).
 * Fix : sortir la vidéo du flux flex (position absolute, cadrée sur
 * tout le conteneur) et la faire remplir tout l'espace en "cover" —
 * même principe que le hero (elementor-element-2797ed74) déjà sorti du
 * flux flex pour la flèche de scroll, cf. why-hero-scroll-arrow-fix.php.
 */
.elementor-element-d811f00 video.e-self-hosted-video-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}