/**
 * Page "Accès Web TV" — application TVMS en plein écran dans une iframe.
 * Une barre fine "Retour au site" au-dessus de l'iframe (jamais par-dessus :
 * elle ne peut donc masquer aucun contrôle de l'application), puis l'iframe
 * sur tout l'espace restant. Réutilise uniquement les tokens (variables.css).
 */

html:has(body.tp-webtv-app),
body.tp-webtv-app {
	height: 100%;
	overflow: hidden;
	background: #000;
}

.tp-webtv-app__shell {
	/* 100vh en repli pour les navigateurs sans unité dvh. */
	height: 100vh;
	height: 100dvh;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	background: #000;
}

/* La barre d'administration WordPress (utilisateurs connectés) décale le
   document : on retire sa hauteur pour éviter une double barre de défilement. */
body.admin-bar .tp-webtv-app__shell {
	height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
	height: calc(100dvh - var(--wp-admin--admin-bar--height, 32px));
}

/* ---- barre de retour ---- */
.tp-webtv-app__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 40px;
	padding: 5px max(14px, env(safe-area-inset-right)) 5px max(14px, env(safe-area-inset-left));
	padding-top: max(5px, env(safe-area-inset-top));
	background: #030503;
	border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.tp-webtv-app__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: var(--tp-radius-pill);
	border: 1px solid rgba(255, 255, 255, .1);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	color: var(--tp-white);
	text-decoration: none;
	transition: border-color .2s ease, background .2s ease;
}
.tp-webtv-app__back:hover { border-color: rgba(31, 140, 74, .6); background: rgba(31, 140, 74, .12); }
.tp-webtv-app__back:focus-visible { outline: 2px solid #1f8c4a; outline-offset: 2px; }

.tp-webtv-app__logo { width: 34px; height: auto; opacity: .9; }

/* ---- application ---- */
.tp-webtv-app__stage {
	position: relative;
	min-height: 0;
	padding-bottom: env(safe-area-inset-bottom);
	background: #000;
}

.tp-webtv-app__frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
}

/* ---- bouton Complianz "Gérer le consentement" ----
   Ailleurs il est fixé en bas à droite, là où un lecteur vidéo place ses
   contrôles (plein écran...). Sur cette page seulement, il reste accessible
   mais rejoint la barre du haut, hors de l'application. */
body.tp-webtv-app .cmplz-manage-consent {
	top: max(6px, env(safe-area-inset-top)) !important;
	bottom: auto !important;
	right: 58px !important;
	left: auto !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 6px 12px !important;
	border: 1px solid rgba(255, 255, 255, .1) !important;
	border-radius: var(--tp-radius-pill) !important;
	background: transparent !important;
	color: var(--tp-text-mute2) !important;
	font-size: 12px !important;
	line-height: 1 !important;
	box-shadow: none !important;
	transform: none !important;
}
body.admin-bar.tp-webtv-app .cmplz-manage-consent {
	top: calc(var(--wp-admin--admin-bar--height, 32px) + 6px) !important;
}

/* ---- repli si l'application ne peut pas être chargée ---- */
.tp-webtv-app__fallback {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 24px;
	text-align: center;
	background: #000;
	color: var(--tp-white);
}
.tp-webtv-app__fallback[hidden] { display: none; }
.tp-webtv-app__fallback-title { margin: 0; font-size: 18px; font-weight: 600; }
.tp-webtv-app__fallback-text { margin: 0; font-size: 14px; color: var(--tp-text-mute2); }
.tp-webtv-app__fallback-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.tp-webtv-app__fallback-btn,
.tp-webtv-app__fallback-retry {
	padding: 10px 18px;
	border-radius: var(--tp-radius-pill);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
}
.tp-webtv-app__fallback-btn { background: #1f8c4a; color: #fff; border: 1px solid #1f8c4a; }
.tp-webtv-app__fallback-retry { background: transparent; color: var(--tp-white); border: 1px solid rgba(255, 255, 255, .2); }

@media (max-width: 480px) {
	.tp-webtv-app__bar { min-height: 36px; }
	.tp-webtv-app__back { padding: 5px 10px; font-size: 12.5px; }
	.tp-webtv-app__logo { width: 28px; }
	body.tp-webtv-app .cmplz-manage-consent { right: 50px !important; padding: 5px 10px !important; font-size: 11.5px !important; }
}