/* Le second bloc .belisa-hero-intro (sous-titre + CTA) réutilise le style du premier (titre),
   mais sans le padding-top pensé pour le tout premier élément de la page. */
.belisa-hero-intro-below { padding-top: 0; margin-bottom: 0; }

/* Bande plein écran (edge-to-edge), plus un rectangle centré avec des marges — la vidéo doit
   sembler incrustée dans une bande de couleur qui occupe toute la largeur de la page, pas
   encadrée comme une carte posée dessus. .belisa-hero est déjà en pleine largeur (page en mode
   "plein écran", voir belisa-full-bleed) : width:100% suffit, pas besoin du hack en vw qui se
   ferait couper par l'overflow:hidden du parent. */
.belisa-hero-video-wrap { position: relative; z-index: 20; width: 100%; margin: 28px 0 0; padding: 0; }
.belisa-hero-video-player {
	position: relative; width: 100%; height: clamp(320px, 58vh, 620px); overflow: hidden;
	background: linear-gradient(135deg, #221516, #3B0510); display: flex; align-items: center;
	justify-content: center; background-size: cover; background-position: center;
	opacity: 0; filter: blur(10px); animation: belisaBlurIn .7s ease forwards; animation-delay: .4s;
}
.belisa-hero-video-player video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Une iframe YouTube ne connaît pas object-fit:cover — elle affiche des bandes noires si son
   ratio ne correspond pas à celui de la bande. On la surdimensionne et on la centre (comme un
   fond en background-size:cover), débordement masqué par overflow:hidden du parent. */
.belisa-hero-video-youtube iframe {
	position: absolute; top: 50%; left: 50%; border: none;
	width: 177.78vh; height: 56.25vw; /* 16:9 dans les deux sens */
	min-width: 100%; min-height: 100%;
	transform: translate(-50%, -50%); pointer-events: auto;
}

/* Bords "verre liquide" : la vidéo elle-même s'arrête net (objet rectangulaire par nature),
   mais ces deux bandes en verre dépoli superposées sur ses extrémités la font fondre dans la
   couleur du fond plutôt que de laisser un bord net visible — flou + ombre intérieure, pas de
   ligne de démarcation. */
.belisa-hero-video-edge {
	position: absolute; top: 0; bottom: 0; width: min(18vw, 220px); pointer-events: none; z-index: 1;
	backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
	background: linear-gradient(90deg, rgba(34,21,22,0.55), rgba(34,21,22,0));
}
.belisa-hero-video-edge-left { left: 0; }
.belisa-hero-video-edge-right { right: 0; background: linear-gradient(270deg, rgba(34,21,22,0.55), rgba(34,21,22,0)); }

.belisa-hero-video-placeholder::before {
	content: ''; position: absolute; inset: 0; background: rgba(34, 21, 22, 0.35);
}
/* Bouton lecture en verre liquide : fond translucide flouté, liseré clair, ombre douce — plutôt
   qu'un simple disque plein, pour rester cohérent avec l'effet de bord de la bande. */
.belisa-hero-video-play {
	position: relative; z-index: 2; width: 76px; height: 76px; border-radius: 50%;
	background: rgba(244, 244, 241, 0.22); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(244, 244, 241, 0.55); color: #F4F4F1; display: flex; align-items: center;
	justify-content: center; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255,255,255,0.06);
	transition: background .2s, transform .2s;
}
.belisa-hero-video-play:hover { background: rgba(244, 244, 241, 0.32); transform: scale(1.04); }
.belisa-hero-video-play svg { margin-left: 3px; }

/* Nos propres commandes (lecture/pause, son) remplacent les commandes natives YouTube
   (impossibles à afficher seulement au survol depuis notre CSS — autre origine). Masquées par
   défaut, visibles seulement quand la souris est sur la vidéo (ou au clavier, via :focus-within,
   pour l'accessibilité) — jamais visibles autrement, jamais visibles en permanence. */
.belisa-hero-video-controls {
	position: absolute; z-index: 3; bottom: 18px; left: 50%; transform: translateX(-50%);
	display: flex; gap: 10px; opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.belisa-hero-video-player:hover .belisa-hero-video-controls,
.belisa-hero-video-controls:focus-within {
	opacity: 1; pointer-events: auto;
}
.belisa-hero-video-btn {
	width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(244, 244, 241, 0.5);
	background: rgba(34, 21, 22, 0.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	color: #F4F4F1; display: flex; align-items: center; justify-content: center; cursor: pointer;
	transition: background .2s;
}
.belisa-hero-video-btn:hover { background: rgba(34, 21, 22, 0.65); }

@media (max-width: 640px) {
	.belisa-hero-video-wrap { margin-top: 18px; }
	.belisa-hero-video-player { height: clamp(240px, 46vh, 420px); }
	.belisa-hero-video-play { width: 60px; height: 60px; }
	.belisa-hero-video-edge { width: min(10vw, 90px); }
	.belisa-hero-video-btn { width: 36px; height: 36px; }
}