/*
 * ============================================================================
 *  utmb-quiz-video.css — lecteur en tête du questionnaire (#5223)
 * ============================================================================
 *  Le lecteur vit dans la carte blanche du gabarit Elementor 169. Il reprend
 *  les variables de utmb-quiz.css (couleurs, rayons, police), avec un repli.
 *
 *  Écrans (attribut data-etat de .utmbqv) :
 *    lecture  vidéo à voir, questionnaire verrouillé ;
 *    fin      enchaînement V1 / V2, dans la boîte vidéo elle-même ;
 *    quiz     questionnaire en cours : lecteur masqué (V1, V2) ou en vignette (V3) ;
 *    compact  vidéo acquise : une ligne « Revoir la vidéo » ;
 *    revoir   relecture libre, avec un bouton « Réduire ».
 *
 *  AUCUN SAUT DE MISE EN PAGE : la boîte a son format (aspect-ratio) dès le
 *  premier affichage, les écrans V1 et V2 se superposent à la vidéo dans la
 *  même boîte, et la barre de commandes est masquée par « visibility », qui
 *  garde sa hauteur. Seule V3 change la hauteur, par une transition.
 * ============================================================================
 */

.utmbqv {
	--utmbqv-primaire: var( --utmb-quiz-primary, #396277 );
	--utmbqv-surface: var( --utmb-quiz-surface, #ffffff );
	--utmbqv-voile: rgba( 23, 39, 47, 0.74 );
	--utmbqv-rayon: var( --utmb-quiz-radius-answer, 10px );
	--utmbqv-duree: 450ms;
	--utmbqv-hauteur-max: 46svh;

	font-family: var( --utmb-quiz-font, inherit );
	margin: 0 0 16px;
}

/* La page complète a plus de hauteur que la modale. */
body:not( .utmb-quiz-modale-frame ) .utmbqv {
	--utmbqv-hauteur-max: 44svh;
}

/* ------------------------------------------ verrou de l'écran de départ --- */

/*
 * Posé par le serveur (classe sur body), donc actif dès le premier affichage.
 * Masque l'écran de démarrage de WpProQuiz par une règle de feuille de style,
 * sans écrire d'attribut « style » dans le quiz.
 */
body.utmbqv-verrou .wpProQuiz_content .wpProQuiz_text {
	display: none !important;
}

/* V1 et V2 remplacent l'écran de départ par le leur, dans la boîte vidéo. */
body.utmbqv-ecran-fin .wpProQuiz_content .wpProQuiz_text {
	display: none !important;
}

/* ------------------------------------- remise à zéro des boutons ------- */

/*
 * Le kit Elementor stylise tous les boutons (« .elementor-kit-6 button » :
 * fond bleu, majuscules, gras). Nos règles sont écrites
 * « .utmbqv button.utmbqv__… » pour passer devant, y compris au survol.
 */
.utmbqv button {
	box-shadow: none;
	font-family: inherit;
	letter-spacing: normal;
	line-height: 1.2;
	text-transform: none;
}

/* ------------------------------------------------------- boîte vidéo ------ */

.utmbqv__boite {
	aspect-ratio: 16 / 9;
	background: #0d1a20;
	border-radius: var( --utmbqv-rayon );
	margin: 0 auto;
	max-width: 100%;
	overflow: hidden;
	position: relative;
	transition: width var( --utmbqv-duree ) ease, border-radius var( --utmbqv-duree ) ease, background-color var( --utmbqv-duree ) ease;
	width: min( 100%, calc( var( --utmbqv-hauteur-max ) * 16 / 9 ) );
}

.utmbqv__media,
.utmbqv__video {
	display: block;
	height: 100%;
	width: 100%;
}

.utmbqv__video {
	background: #0d1a20;
	object-fit: contain;
	transition: opacity var( --utmbqv-duree ) ease;
}

/* Voile de V2, et de la vignette V3. */
.utmbqv__media::after {
	background: var( --utmbqv-voile );
	content: "";
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity var( --utmbqv-duree ) ease;
}

/* -------------------------------------------- grand bouton de lecture ----- */

.utmbqv button.utmbqv__grand-lire {
	align-items: center;
	background: var( --utmbqv-voile );
	border: 0;
	border-radius: 0;
	color: #fff;
	cursor: pointer;
	display: none;
	flex-direction: column;
	font: inherit;
	gap: 10px;
	inset: 0;
	justify-content: center;
	padding: 0;
	position: absolute;
}

.utmbqv.is-neuf[data-etat="lecture"] button.utmbqv__grand-lire {
	display: flex;
}

.utmbqv button.utmbqv__grand-lire .utmbqv__icone--lire {
	background-color: var( --utmbqv-primaire );
	background-size: 28px 28px;
	border-radius: 50%;
	height: 64px;
	width: 64px;
}

.utmbqv button.utmbqv__grand-lire:hover .utmbqv__icone--lire,
.utmbqv button.utmbqv__grand-lire:focus-visible .utmbqv__icone--lire {
	transform: scale( 1.06 );
}

.utmbqv button.utmbqv__grand-lire:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -6px;
}

/* --------------------------------------------------- barre de commandes --- */

.utmbqv__barre {
	align-items: center;
	display: flex;
	gap: 6px;
	margin: 8px auto 0;
	max-height: 60px;
	transition: opacity var( --utmbqv-duree ) ease, max-height var( --utmbqv-duree ) ease, margin var( --utmbqv-duree ) ease;
	width: min( 100%, calc( var( --utmbqv-hauteur-max ) * 16 / 9 ) );
}

.utmbqv button.utmbqv__ctrl {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 8px;
	color: var( --utmbqv-primaire );
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	height: 40px;
	justify-content: center;
	padding: 0;
	width: 40px;
}

.utmbqv button.utmbqv__ctrl:hover,
.utmbqv button.utmbqv__ctrl:focus {
	background: color-mix( in srgb, var( --utmbqv-primaire ) 10%, transparent );
}

.utmbqv button.utmbqv__ctrl:focus-visible,
.utmbqv button.utmbqv__lien:focus-visible,
.utmbqv button.utmbqv__bouton:focus-visible,
.utmbqv button.utmbqv__vignette:focus-visible {
	outline: 2px solid var( --utmbqv-primaire );
	outline-offset: 2px;
}

.utmbqv button.utmbqv__ctrl--reduire {
	display: none;
}

/* Barre de progression : informative, PAS cliquable. */
.utmbqv__progression {
	background: rgba( 57, 98, 119, 0.18 );
	border-radius: 3px;
	cursor: default;
	flex: 1 1 auto;
	height: 6px;
	overflow: hidden;
	pointer-events: none;
	position: relative;
}

.utmbqv__progression-vu,
.utmbqv__progression-pos {
	inset: 0 auto 0 0;
	position: absolute;
	width: 0;
}

.utmbqv__progression-vu {
	background: rgba( 57, 98, 119, 0.32 );
}

.utmbqv__progression-pos {
	background: var( --utmbqv-primaire );
}

.utmbqv__temps {
	color: var( --utmbqv-primaire );
	flex: 0 0 auto;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	min-width: 3.2em;
	text-align: right;
}

.utmbqv__aide {
	color: #4a5a63;
	font-size: 14px;
	margin: 6px auto 0;
	min-height: 1.4em;
	text-align: center;
	transition: opacity var( --utmbqv-duree ) ease;
	width: min( 100%, calc( var( --utmbqv-hauteur-max ) * 16 / 9 ) );
}

/* ------------------------------------------------------------ icônes ------ */

.utmbqv__icone {
	background-color: currentColor;
	display: inline-block;
	height: 22px;
	-webkit-mask: var( --utmbqv-svg ) center / contain no-repeat;
	mask: var( --utmbqv-svg ) center / contain no-repeat;
	width: 22px;
}

.utmbqv button.utmbqv__grand-lire .utmbqv__icone {
	-webkit-mask: none;
	mask: none;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23fff'/%3E%3C/svg%3E" );
	background-position: 55% center;
	background-repeat: no-repeat;
	transition: transform 200ms ease;
}

.utmbqv__icone--lire {
	--utmbqv-svg: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E" );
}

.utmbqv.is-lecture [data-action="basculer"] .utmbqv__icone--lire {
	--utmbqv-svg: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 5h4v14H6zM14 5h4v14h-4z'/%3E%3C/svg%3E" );
}

.utmbqv__icone--reculer {
	--utmbqv-svg: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E" );
}

.utmbqv__icone--son {
	--utmbqv-svg: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4z'/%3E%3Cpath d='M16 8.5a5 5 0 0 1 0 7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E" );
}

.utmbqv.is-muet .utmbqv__icone--son {
	--utmbqv-svg: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4z'/%3E%3Cpath d='M16 9l5 6M21 9l-5 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E" );
}

.utmbqv__icone--reduire {
	--utmbqv-svg: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E" );
}

.utmbqv__icone--revoir {
	--utmbqv-svg: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E" );
	color: #fff;
	height: 26px;
	width: 26px;
}

/* ------------------------------------------------------------ boutons ----- */

.utmbqv button.utmbqv__bouton {
	align-items: center;
	border: 2px solid var( --utmbqv-primaire );
	border-radius: var( --utmb-quiz-radius-button, 10px );
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: var( --utmb-quiz-button-size, 16px );
	font-weight: var( --utmb-quiz-button-weight, 500 );
	justify-content: center;
	line-height: 1.2;
	min-height: 44px;
	padding: 8px 24px;
}

.utmbqv button.utmbqv__bouton--primaire {
	background: var( --utmbqv-primaire );
	color: var( --utmbqv-surface );
}

.utmbqv button.utmbqv__bouton--primaire:hover,
.utmbqv button.utmbqv__bouton--primaire:focus {
	background: var( --e-global-color-utmbbleusurvol, #2c4b5b );
	border-color: var( --e-global-color-utmbbleusurvol, #2c4b5b );
}

.utmbqv button.utmbqv__bouton--secondaire {
	background: rgba( 255, 255, 255, 0.92 );
	color: var( --utmbqv-primaire );
}

.utmbqv button.utmbqv__lien {
	background: none;
	border: 0;
	color: var( --utmbqv-primaire );
	cursor: pointer;
	font: inherit;
	font-size: 15px;
	padding: 6px 4px;
	text-decoration: underline;
	text-underline-offset: 3px;
}


.utmbqv button.utmbqv__ctrl,
.utmbqv button.utmbqv__ctrl:active {
	font-weight: 400;
}

.utmbqv button.utmbqv__lien:hover,
.utmbqv button.utmbqv__lien:focus {
	background: none;
	color: var( --utmbqv-primaire );
}

.utmbqv button.utmbqv__bouton--secondaire:hover,
.utmbqv button.utmbqv__bouton--secondaire:focus {
	background: #fff;
	color: var( --utmbqv-primaire );
}

.utmbqv button.utmbqv__grand-lire:hover,
.utmbqv button.utmbqv__grand-lire:focus {
	background: var( --utmbqv-voile );
	color: #fff;
}

.utmbqv button.utmbqv__vignette:hover,
.utmbqv button.utmbqv__vignette:focus {
	background: transparent;
}

/* ------------------------------------------- écran de fin (V1 et V2) ------ */

.utmbqv__fin {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 12px;
	inset: 0;
	justify-content: center;
	opacity: 0;
	padding: 16px;
	position: absolute;
	text-align: center;
	transition: opacity var( --utmbqv-duree ) ease;
}

.utmbqv__fin[hidden] {
	display: none;
}

.utmbqv[data-etat="fin"] .utmbqv__fin {
	opacity: 1;
}

/* V1 — fondu : la vidéo s'efface, l'écran d'accueil apparaît à sa place. */
.utmbqv__fin--v1 {
	background: var( --utmbqv-surface );
}

.utmbqv[data-variante="v1"][data-etat="fin"] .utmbqv__video {
	opacity: 0;
}

/* Le fond de la boîte suit le fondu : pas de coins sombres autour de l'écran. */
.utmbqv[data-variante="v1"][data-etat="fin"] .utmbqv__boite,
.utmbqv[data-variante="v1"][data-etat="fin"] .utmbqv__video {
	background-color: var( --utmbqv-surface );
}

.utmbqv__fin-titre {
	color: var( --utmbqv-primaire );
	font-size: clamp( 20px, 3.2vw, 28px );
	font-weight: 500;
	margin: 0;
}

.utmbqv__fin-detail {
	color: #4a5a63;
	margin: 0 0 4px;
}

/* V2 — bouton révélé : dernière image figée et assombrie, boutons en surimpression. */
.utmbqv__fin--v2 {
	flex-direction: row;
	flex-wrap: wrap;
}

.utmbqv[data-variante="v2"][data-etat="fin"] .utmbqv__media::after {
	opacity: 1;
}

.utmbqv__fin--v2 button.utmbqv__bouton {
	opacity: 0;
	transform: translateY( 12px ) scale( 0.96 );
	transition: opacity 350ms ease 120ms, transform 350ms cubic-bezier( 0.2, 0.8, 0.2, 1 ) 120ms;
}

.utmbqv__fin--v2 .utmbqv__bouton--secondaire {
	transition-delay: 200ms;
}

.utmbqv[data-etat="fin"] .utmbqv__fin--v2 button.utmbqv__bouton {
	opacity: 1;
	transform: none;
}

/* Pendant l'écran de fin, la barre s'efface mais garde sa place. */
.utmbqv[data-etat="fin"] .utmbqv__barre {
	opacity: 0;
	visibility: hidden;
}

/* ------------------------------------------------- V3 — vignette --------- */

.utmbqv button.utmbqv__vignette {
	align-items: center;
	background: transparent;
	border: 0;
	cursor: pointer;
	display: flex;
	inset: 0;
	justify-content: center;
	opacity: 0;
	padding: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity var( --utmbqv-duree ) ease;
}

.utmbqv[data-variante="v3"][data-etat="quiz"] .utmbqv__boite {
	border-radius: 8px;
	width: 160px;
}

.utmbqv[data-variante="v3"][data-etat="quiz"] .utmbqv__media::after,
.utmbqv[data-variante="v3"][data-etat="quiz"] button.utmbqv__vignette {
	opacity: 1;
	pointer-events: auto;
}

.utmbqv[data-variante="v3"][data-etat="quiz"] .utmbqv__barre,
.utmbqv[data-variante="v3"][data-etat="quiz"] .utmbqv__aide {
	margin-top: 0;
	max-height: 0;
	min-height: 0;
	opacity: 0;
	overflow: hidden;
	visibility: hidden;
}

/* V1 et V2 : pendant le questionnaire, le lecteur s'efface complètement. */
.utmbqv[data-variante="v1"][data-etat="quiz"],
.utmbqv[data-variante="v2"][data-etat="quiz"] {
	display: none;
}

/* ---------------------------------------------- compact et relecture ----- */

.utmbqv__compact {
	align-items: center;
	display: none;
	gap: 8px;
	justify-content: flex-start;
}

.utmbqv__compact button.utmbqv__lien::before {
	background-color: currentColor;
	content: "";
	display: inline-block;
	height: 14px;
	margin-right: 6px;
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E" ) center / contain no-repeat;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E" ) center / contain no-repeat;
	vertical-align: -1px;
	width: 14px;
}

.utmbqv__compact-duree {
	color: #4a5a63;
	font-size: 14px;
}

.utmbqv[data-etat="compact"] .utmbqv__compact {
	display: flex;
}

.utmbqv[data-etat="compact"] .utmbqv__boite,
.utmbqv[data-etat="compact"] .utmbqv__barre,
.utmbqv[data-etat="compact"] .utmbqv__aide {
	display: none;
}

.utmbqv[data-etat="revoir"] .utmbqv__ctrl--reduire {
	display: inline-flex;
}

.utmbqv[data-etat="revoir"] .utmbqv__aide {
	visibility: hidden;
}

/* ----------------------------------------------- administrateurs ---------- */

.utmbqv__admin {
	align-items: center;
	border: 1px dashed rgba( 57, 98, 119, 0.5 );
	border-radius: 8px;
	display: flex;
	flex-wrap: wrap;
	font-size: 13px;
	gap: 4px 12px;
	margin: 8px auto 0;
	padding: 2px 10px;
	width: fit-content;
}

.utmbqv__admin button.utmbqv__lien {
	font-size: 13px;
}

.utmbqv__admin-libelle {
	color: #4a5a63;
}

/* ------------------------------------------------------- mobile ----------- */

@media ( max-width: 767px ) {
	.utmbqv__fin {
		gap: 6px;
		padding: 8px;
	}

	.utmbqv__fin-detail {
		font-size: 14px;
	}

	.utmbqv button.utmbqv__bouton {
		font-size: 15px;
		min-height: 40px;
		padding: 6px 16px;
	}

	.utmbqv[data-variante="v3"][data-etat="quiz"] .utmbqv__boite {
		width: 120px;
	}
}

/* ----------------------------------------- mouvement réduit --------------- */

@media ( prefers-reduced-motion: reduce ) {
	.utmbqv,
	.utmbqv * {
		transition-duration: 0s !important;
		transition-delay: 0s !important;
	}
}