/**
 * Pilates & Moi — page d'une vidéo (charte MOI)
 * ---------------------------------------------------------------------
 * Chargé par le plugin « MOI — Habillages du site », sur les seules pages
 * `single video`, en complément de videos-moi.css (dont il dépend : la grille
 * de suggestions réutilise les cartes du listing « Vidéo — miniature »).
 *
 * Trois familles de règles :
 *   1. le lecteur (.mvp) et son écran verrouillé ;
 *   2. les briques de texte des shortcodes (.mvmeta, .mvdesc) ;
 *   3. le pilotage des blocs promotionnels du template Elementor, d'après les
 *      classes posées sur le <body> par le plugin pmpro-video-access.
 *
 * Les couleurs viennent des variables globales Elementor v4 : les changer dans
 * Elementor met cette feuille à jour. Les valeurs après la virgule sont des
 * secours.
 */

/* -------------------------------------------------------------------------
 * 1. Le lecteur
 *
 * La façade — vignette + gros bouton — est un vrai <button> : le script la
 * remplace au clic par l'iframe de l'hébergeur, en lecture automatique. Charger
 * YouTube seulement quand on décide de regarder évite trois requêtes tierces à
 * chaque page ouverte, et laisse une première image à la charte.
 * ---------------------------------------------------------------------- */

.mvp {
	width: 100%;
	border-radius: 20px;
	overflow: hidden;
	background: #1c1410;
	box-shadow: 0 18px 44px -22px rgba(206, 104, 87, .55), 0 2px 10px -4px rgba(51, 45, 41, .25);
}

.mvp__scene {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.mvp__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
}

.mvp__scene iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Façade cliquable. */
.mvp__facade {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	cursor: pointer;
	display: block;
	-webkit-appearance: none;
	appearance: none;
}

/* Léger assombrissement, pour que le bouton et la durée restent lisibles
   quelle que soit la vignette. */
.mvp__lueur {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(28, 20, 16, .10) 0%, rgba(28, 20, 16, .30) 100%);
	transition: background .2s ease;
}

.mvp__facade:hover .mvp__lueur,
.mvp__facade:focus-visible .mvp__lueur {
	background: linear-gradient(180deg, rgba(28, 20, 16, .18) 0%, rgba(28, 20, 16, .42) 100%);
}

.mvp__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 84px;
	height: 84px;
	transform: translate(-50%, -50%);
	pointer-events: none;
	transition: transform .18s ease;
}

.mvp__play svg {
	width: 100%;
	height: 100%;
	display: block;
	filter: drop-shadow(0 6px 18px rgba(28, 20, 16, .45));
}

.mvp__play circle {
	fill: var(--moiTerracotta, #ce6857);
	fill-opacity: .94;
}

.mvp__play path {
	fill: var(--moiCream, #fff8ee);
}

.mvp__facade:hover .mvp__play,
.mvp__facade:focus-visible .mvp__play {
	transform: translate(-50%, -50%) scale(1.07);
}

.mvp__facade:focus-visible {
	outline: 3px solid var(--moiCream, #fff8ee);
	outline-offset: -6px;
}

.mvp__duree {
	position: absolute;
	right: 14px;
	bottom: 14px;
	padding: 4px 10px;
	border-radius: 6px;
	background: rgba(28, 20, 16, .78);
	color: var(--moiCream, #fff8ee);
	font-family: "DM Sans", sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	pointer-events: none;
}

/* -------------------------------------------------------------------------
 * L'écran verrouillé
 *
 * Même vignette, floutée : on montre qu'il y a une séance, pas laquelle.
 * L'agrandissement masque le bord délavé que laisse le flou.
 *
 * ⚠️ Ce n'est qu'un habillage. Ce qui protège réellement la vidéo est en PHP :
 * quand l'accès est refusé, le shortcode [moi_video_player] n'imprime ni
 * iframe ni identifiant YouTube — il n'y a rien à révéler en inspectant la page.
 * ---------------------------------------------------------------------- */

.mvp--verrouille .mvp__poster,
.mvp--indisponible .mvp__poster {
	filter: blur(16px) saturate(.7);
	transform: scale(1.14);
}

.mvp__voile {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(51, 45, 41, .58) 0%, rgba(51, 45, 41, .74) 100%);
}

.mvp__verrou {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	text-align: center;
	padding: 28px 24px;
	box-sizing: border-box;
	color: var(--moiCream, #fff8ee);
}

.mvp__cadenas {
	width: 40px;
	height: 40px;
	display: block;
}

.mvp__cadenas svg {
	width: 100%;
	height: 100%;
	display: block;
	fill: var(--moiCream, #fff8ee);
	filter: drop-shadow(0 3px 10px rgba(28, 20, 16, .4));
}

.mvp__verrou-titre {
	margin: 0;
	font-family: "DM Sans", sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--moiCream, #fff8ee);
	text-shadow: 0 1px 4px rgba(28, 20, 16, .4);
}

.mvp__verrou-texte {
	margin: 0;
	max-width: 520px;
	font-family: "DM Sans", sans-serif;
	font-size: 16px;
	line-height: 1.55;
	color: rgba(255, 248, 238, .92);
	text-shadow: 0 1px 4px rgba(28, 20, 16, .4);
}

.mvp__verrou-liens {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: 6px;
}

.mvp__btn {
	display: inline-block;
	padding: 13px 28px;
	border-radius: 999px;
	background: var(--moiCream, #fff8ee);
	color: var(--moiTerracotta, #ce6857);
	font-family: "DM Sans", sans-serif;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: transform .15s ease, background .15s ease;
}

.mvp__btn:hover,
.mvp__btn:focus-visible {
	background: #fff;
	color: var(--moiTerracotta, #ce6857);
	transform: translateY(-1px);
}

.mvp__lien {
	color: var(--moiCream, #fff8ee);
	font-family: "DM Sans", sans-serif;
	font-size: 14px;
	line-height: 1.4;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mvp__lien:hover,
.mvp__lien:focus-visible {
	color: var(--moiBlush, #e8cfc1);
}

.mvp__message {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 24px;
	box-sizing: border-box;
	text-align: center;
	color: var(--moiCream, #fff8ee);
	font-family: "DM Sans", sans-serif;
	font-size: 16px;
	font-weight: 600;
}

/* Sous 767 px, un 16/9 ne laisse pas la place au message : la scène
   verrouillée s'allonge au lieu de comprimer le texte. */
@media (max-width: 767px) {
	.mvp {
		border-radius: 16px;
	}

	.mvp--verrouille .mvp__scene {
		aspect-ratio: auto;
		min-height: 420px;
	}

	.mvp__play {
		width: 62px;
		height: 62px;
	}

	.mvp__verrou-titre {
		font-size: 20px;
	}

	.mvp__verrou-texte {
		font-size: 15px;
	}
}

/* -------------------------------------------------------------------------
 * 2. Les briques de texte des shortcodes
 * ---------------------------------------------------------------------- */

.mvmeta {
	margin: 0;
	font-family: "DM Sans", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	line-height: 1.5;
	color: var(--moiTerracotta, #ce6857);
}

.mvmeta a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .15s ease;
}

.mvmeta a:hover,
.mvmeta a:focus-visible {
	border-bottom-color: currentColor;
}

.mvmeta__sep {
	opacity: .55;
}

.mvmeta__duree {
	color: var(--moiInkSoft, #6b5f58);
}

.mvdesc {
	max-width: 760px;
}

.mvdesc p {
	margin: 0 0 14px;
	font-family: "DM Sans", sans-serif;
	font-size: 16.5px;
	line-height: 1.68;
	color: var(--moiInkSoft, #6b5f58);
}

.mvdesc p:last-child {
	margin-bottom: 0;
}

/* Les widgets v3 (shortcode, grille JetEngine) n'ont pas de styles atomiques :
   dans une colonne flex alignée à gauche, ils se réduisent à leur contenu, donc
   à rien. On les étire ici — c'est la seule chose que le template ne peut pas
   dire lui-même. */
.elementor-element-svmeta,
.elementor-element-svplay,
.elementor-element-svdesc,
.elementor-element-svsuggrid {
	width: 100%;
	align-self: stretch;
}

/* Un shortcode qui ne rend rien (pas de description, pas de métadonnées) laisse
   malgré tout son widget dans la colonne : le `gap` du conteneur creuserait un
   interligne double. On le sort du flux. */
.elementor-element-svmeta:not(:has(.mvmeta)),
.elementor-element-svdesc:not(:has(.mvdesc)) {
	display: none;
}

/* -------------------------------------------------------------------------
 * 3. Blocs promotionnels du template Elementor
 *
 * Ces blocs sont construits en Elementor v4 atomic pour rester éditables ;
 * c'est ici qu'on décide à qui ils s'adressent. Les classes du <body>
 * (moi-acces-ouvert / moi-acces-verrouille, moi-abonne-annuel, moi-connecte /
 * moi-anonyme) sont posées par le plugin pmpro-video-access.
 *
 * .svverrou / .svannuel sont les identifiants de style locaux des sections du
 * template « Vidéo — page unique » : Elementor v4 les imprime tels quels en
 * classes CSS. Les renommer dans le template demande de les renommer ici.
 *
 * Rappel : il ne s'agit que de promotion. Le contenu protégé, lui, ne sort pas
 * du serveur (cf. § 1).
 * ---------------------------------------------------------------------- */

/* L'offre complète ne s'affiche que si la vidéo est verrouillée. */
body.moi-acces-ouvert .svverrou {
	display: none !important;
}

/* L'incitation à l'annuel ne s'adresse pas à un abonné en cours — ni annuel
   (il l'a déjà), ni mensuel (on ne relance pas quelqu'un qui paie déjà tous les
   mois) — ni à qui voit déjà l'offre complète juste au-dessus. Il reste donc
   les acheteurs d'un programme à l'unité (Dos, Femme enceinte, Pilates Mama),
   qui ont accès à leurs vidéos sans être abonnés : eux, c'est la bonne cible. */
body.moi-acces-verrouille .svannuel,
body.moi-abonne .svannuel {
	display: none !important;
}

/* Titre de la vidéo, une fois connecté : le nom de la séance n'a plus à
   accrocher — c'est le lecteur qui compte. On descend du H1 de page (42/32 px)
   à un calibre de titre de contenu. */
body.moi-connecte .svtitle {
	font-size: 32px;
}

@media (max-width: 767px) {
	body.moi-connecte .svtitle {
		font-size: 26px;
	}
}

/* « Vous êtes déjà abonné ? Connectez-vous » : inutile une fois connecté.
   Deux exemplaires : le bouton du template (.svconnexion) et le lien de
   l'écran verrouillé (.mvp__lien). */
body.moi-connecte .svconnexion,
body.moi-connecte .mvp__lien {
	display: none !important;
}

/* -------------------------------------------------------------------------
 * 4. Suggestions
 *
 * La grille réutilise le listing « Vidéo — miniature » et donc tout l'habillage
 * de videos-moi.css. Il ne reste qu'à ne pas laisser une ligne solitaire coller
 * au titre de section.
 * ---------------------------------------------------------------------- */

.moi-video-suggestions .jet-listing-grid__items {
	row-gap: 30px;
}