/*
 * Bouton « Découvrir Avenches en vidéo » et sa fenêtre modale.
 * Agence Audace, 05.11.2026 (révisé le même jour : plus de bande sous le
 * slider — un seul bouton, dans le hero, juste sous la rangée de pastilles).
 *
 * Le balisage est posé par la surcharge
 * templates/theme25/html/mod_sliders/default.php.
 * Le comportement est dans assets/js/video-commune.js.
 *
 * Contexte : le bouton se pose sur une photo assombrie (.item-shape, noir à
 * 50 %). D'où le blanc plein plutôt que le rouge #d21414 du « Lire plus »,
 * qui passe mal sur une image sombre.
 */

/* La zone reprend le positionnement de .btns-slider (absolu, centré, au-dessus
   du bas du hero) pour se caler juste en dessous de la rangée de pastilles.
   Les pastilles sont à bottom: 120px ; le bouton se pose à 48px. */
.video-commune__zone {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 48px;
	z-index: 9;
	text-align: center;
	/* Le hero ne doit pas perdre ses clics ailleurs que sur le bouton. */
	pointer-events: none;
}

.video-commune__declencheur {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	gap: 11px;
	/* 48px : cible tactile confortable sur téléphone. */
	min-height: 48px;
	padding: 10px 24px;
	/* Forme de pastille, comme les boutons de diapositive juste au-dessus,
	   mais en bleu plein (#0E4D9E, le bleu du gabarit) : demande d'Hugo, le
	   bouton doit se distinguer des pastilles crème et non s'y fondre. */
	border: 1px solid #0E4D9E;
	border-radius: 40px;
	background: #0E4D9E;
	color: #fff;
	font-family: "Helvetica Now Display", sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.4px;
	text-align: center;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.2s, border-color 0.2s;
}

/* Au survol, un bleu plus profond : le bouton reste lisible et bleu, il ne
   bascule pas dans le vocabulaire crème des pastilles. */
.video-commune__declencheur:hover {
	background: #0A3A78;
	border-color: #0A3A78;
}

/* Le bouton se pose sur une photo : un contour blanc doublé d'un halo bleu
   reste visible aussi bien sur une image claire que sur une image sombre. */
.video-commune__declencheur:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
	box-shadow: 0 0 0 6px rgba(14, 77, 158, 0.9);
}

/* Dans la modale le fond est connu (#282828) : le rouge du gabarit suffit. */
#video-commune-dialogue button:focus-visible {
	outline: 3px solid #d21414;
	outline-offset: 3px;
}

/* Triangle de lecture dessiné en CSS : pas d'image à charger, pas d'emoji. */
.video-commune__declencheur::before {
	content: "";
	flex: 0 0 auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 11px;
	border-color: transparent transparent transparent currentColor;
}

/* ---- Fenêtre modale ---- */

#video-commune-dialogue {
	/* Le gabarit remet margin:0 sur tout : sans ce margin:auto, la fenêtre
	   native se colle en haut à gauche au lieu d'être centrée. */
	margin: auto;
	width: min(92vw, 1180px);
	max-width: none;
	max-height: calc(100vh - 48px);
	/* La modale ne doit pas transmettre son défilement à la page derrière. */
	overscroll-behavior: contain;
	padding: 0;
	border: none;
	border-radius: 6px;
	background: #282828;
	color: #fff;
	overflow: hidden;
}

#video-commune-dialogue::backdrop {
	background: rgba(0, 0, 0, 0.82);
}

#video-commune-dialogue video {
	display: block;
	width: 100%;
	height: auto;
	max-height: 78vh;
	background: #000;
}

#video-commune-dialogue .video-commune__barre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	/* Encoche des téléphones : la barre ne doit pas passer sous l'indicateur. */
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
}

#video-commune-dialogue .video-commune__credit {
	margin: 0;
	color: #f0f0f0;
	font-family: "Helvetica Now Display", sans-serif;
	font-size: 14px;
}

#video-commune-dialogue .video-commune__fermer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid #f0f0f0;
	border-radius: 4px;
	background: transparent;
	color: #fff;
	font-family: "Helvetica Now Display", sans-serif;
	font-size: 15px;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.2s, color 0.2s;
}

#video-commune-dialogue .video-commune__fermer:hover {
	background: #fff;
	color: #282828;
}

/* Sur téléphone le titre de diapositive occupe déjà toute la largeur :
   le bouton la prend aussi, plutôt que de flotter à gauche. */
/* Sous 1200px le gabarit remonte les pastilles et les aligne à gauche
   (styles-mobile.css) : le bouton suit le même alignement. */
@media screen and (max-width: 1200px) {
	.video-commune__zone {
		bottom: 36px;
		padding: 0 20px;
		text-align: left;
	}
}

@media screen and (max-width: 575px) {
	.video-commune__zone {
		bottom: 28px;
	}
	.video-commune__declencheur {
		width: 100%;
		justify-content: center;
	}
}

/* Aucune transition pour qui demande à réduire les animations. */
@media (prefers-reduced-motion: reduce) {
	.video-commune__declencheur,
	#video-commune-dialogue .video-commune__fermer {
		transition: none;
	}
}