/*
 * Site www.ericzemmour.fr — le vieux téléviseur des vidéos de l'accueil (assets/js/tele.js).
 * Un clic sur une vidéo l'ouvre dans un poste cathodique au milieu de l'écran (<dialog> modal). Deux boutons
 * à tourner : RÉTRO (intensité de l'effet) et TEINTE (4 crans : Néon, Lagon, Couchant, Noir et blanc).
 * L'effet ne touche jamais l'image de YouTube elle-même (iframe d'un autre site) : un filtre CSS sur l'iframe
 * et des calques par-dessus (teinte en mélange, lignes de balayage, verre bombé), tous transparents au clic
 * pour garder les commandes du lecteur.
 * Jetons : ceux de ez.css (chargé avant).
 */

/* ---------- Fenêtre ---------- */
html.ez-tele-ouverte { overflow: hidden; }
.ez-tele {
	position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
	margin: 0; padding: 0; border: 0; overflow: auto; background: rgba(20, 18, 42, 0.84); color: var(--ez-blanc);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	opacity: 0; transition: opacity 240ms ease-out;
	/* Largeur de l'écran du poste : la plus grande qui laisse voir tout le poste, antennes et titre compris.
	   --kh : hauteur de l'écran / largeur (4:3, ou 3:4 pour un Short sur téléphone). */
	--kh: 0.75;
	--le: min(680px, calc(100vw - 2 * var(--ez-gouttiere) - 210px), calc((100svh - 262px) / var(--kh)));
}
.ez-tele::backdrop { background: transparent; }
.ez-tele.est-ouvert { opacity: 1; }
.ez-tele.est-ferme { opacity: 0; transition-delay: 160ms; }
.ez-tele__scene {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	min-height: 100%; padding: 86px var(--ez-gouttiere) 24px; box-sizing: border-box;
}

.ez-tele__fermer {
	position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; padding: 0;
	border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: var(--ez-blanc); cursor: pointer;
	transition: background-color var(--ez-duree);
}
.ez-tele__fermer:hover { background: rgba(255, 255, 255, 0.18); }
.ez-tele__fermer svg { display: block; width: 18px; height: 18px; margin: auto; }
.ez-tele :focus-visible { outline: 2px solid var(--ez-turquoise); outline-offset: 3px; }

/* ---------- Le poste ---------- */
.ez-tele__poste {
	position: relative; transform: translateY(18px) scale(0.97);
	transition: transform 420ms var(--ez-courbe);
}
.ez-tele.est-ouvert .ez-tele__poste { transform: none; }

/* Antennes « oreilles de lapin » : deux tiges fines sur un petit dôme */
.ez-tele__antennes { position: absolute; left: 50%; bottom: 100%; width: 44px; height: 16px; margin-left: -22px; border-radius: 22px 22px 0 0; background: linear-gradient(180deg, #4b4373, #2a2548); }
.ez-tele__antennes::before, .ez-tele__antennes::after {
	content: ""; position: absolute; left: 50%; bottom: 8px; width: 2px; height: 74px; margin-left: -1px;
	background: linear-gradient(180deg, #c9c3e6, #7d75a6); border-radius: 2px; transform-origin: 50% 100%;
}
.ez-tele__antennes::before { transform: rotate(-30deg); }
.ez-tele__antennes::after { transform: rotate(24deg); height: 66px; }

.ez-tele__caisse {
	position: relative; display: flex; gap: 24px; align-items: stretch; padding: 24px;
	border-radius: 28px; background: linear-gradient(160deg, #3b3160, #262046 55%, #1c1936);
	box-shadow: 0 46px 90px -34px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -4px 0 rgba(0, 0, 0, 0.32);
}
/* Un filet corail en bas de la caisse : la seule touche néon du poste */
.ez-tele__caisse::after {
	content: ""; position: absolute; left: 28px; right: 28px; bottom: 9px; height: 2px; border-radius: 2px;
	background: var(--ez-corail); box-shadow: 0 0 10px rgba(238, 124, 111, 0.7); opacity: 0.85;
}
.ez-tele__pieds { display: flex; justify-content: space-between; padding: 0 18%; }
.ez-tele__pieds::before, .ez-tele__pieds::after { content: ""; width: 34px; height: 10px; border-radius: 0 0 8px 8px; background: #17142c; }

/* ---------- L'écran ---------- */
.ez-tele__cadre { padding: 12px; border-radius: 30px; background: #121025; box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.08); }
.ez-tele__ecran {
	--r: 0.4;
	position: relative; isolation: isolate; overflow: hidden;
	width: var(--le); height: calc(var(--le) * var(--kh));
	border-radius: 8% / 10%; background: #000;
}
.ez-tele__contenu { position: absolute; inset: 0; }
/* Derrière la vidéo : la vignette floutée, qui remplit les bandes (16:9 ou Short dans un écran 4:3) */
.ez-tele__fond { position: absolute; left: -8%; top: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(18px) brightness(0.45) saturate(1.3); }
.ez-tele__video {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 0; background: #000;
	width: 100%; height: calc(var(--le) * 9 / 16);
	filter: saturate(calc(1 + var(--r) * 0.65)) contrast(calc(1 + var(--r) * 0.14)) blur(calc(var(--r) * 0.4px));
}
.ez-tele--court .ez-tele__video { width: calc(var(--le) * var(--kh) * 9 / 16); height: 100%; }
.ez-tele__ecran[data-teinte="nb"] .ez-tele__fond { filter: blur(18px) brightness(0.45) grayscale(1); }
.ez-tele__ecran[data-teinte="nb"] .ez-tele__video { filter: grayscale(1) contrast(calc(1.08 + var(--r) * 0.2)) blur(calc(var(--r) * 0.4px)); }

/* Calques de l'effet : jamais de clic (les commandes du lecteur restent utilisables) */
.ez-tele__teinte, .ez-tele__etalon, .ez-tele__lignes, .ez-tele__bande, .ez-tele__verre, .ez-tele__osd { position: absolute; inset: 0; pointer-events: none; }
/* Deux calques de la même teinte : en lumière douce (contraste, ambiance) et en couleur (l'étalonnage néon, qui ne
   prend le dessus qu'en fin de course du bouton RÉTRO) */
.ez-tele__teinte, .ez-tele__etalon { transition: background 300ms; }
.ez-tele__teinte { mix-blend-mode: soft-light; opacity: calc(var(--r) * 0.9); }
.ez-tele__etalon { mix-blend-mode: color; opacity: calc(var(--r) * var(--r) * 0.42); }
.ez-tele__ecran[data-teinte="neon"] :is(.ez-tele__teinte, .ez-tele__etalon) { background: linear-gradient(180deg, var(--ez-violet) 0%, #d45d9a 55%, var(--ez-corail) 100%); }
.ez-tele__ecran[data-teinte="lagon"] :is(.ez-tele__teinte, .ez-tele__etalon) { background: linear-gradient(180deg, var(--ez-turquoise) 0%, #4f7fd0 50%, var(--ez-violet) 100%); }
.ez-tele__ecran[data-teinte="couchant"] :is(.ez-tele__teinte, .ez-tele__etalon) { background: linear-gradient(180deg, #ffd27a 0%, var(--ez-corail) 50%, var(--ez-violet) 100%); }
.ez-tele__ecran[data-teinte="nb"] .ez-tele__teinte { background: linear-gradient(180deg, #d9e4ff, #8a93b8); opacity: calc(var(--r) * 0.5); }
.ez-tele__ecran[data-teinte="nb"] .ez-tele__etalon { display: none; }
.ez-tele__lignes {
	background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0 1px, transparent 1px 3px);
	opacity: calc(0.1 + var(--r) * 0.5);
}
/* Bande claire qui descend lentement, comme sur un tube mal synchronisé */
.ez-tele__bande {
	inset: -30% 0 auto; height: 30%;
	background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.5) 50%, transparent);
	opacity: calc(var(--r) * 0.1); animation: ez-tele-bande 7s linear infinite;
}
@keyframes ez-tele-bande { to { transform: translateY(433%); } }
/* Verre bombé : coins assombris et reflet */
.ez-tele__verre {
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 32%),
		radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.55) 100%);
	box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.6);
	border-radius: inherit;
}
/* Affichage du poste (canal, réglage) : quelques secondes après chaque tour de bouton */
.ez-tele__osd {
	inset: 7% auto auto 8%; font-family: var(--ez-f-titre); font-size: clamp(13px, 2.3vw, 21px); letter-spacing: 0.06em;
	color: var(--ez-turquoise); text-shadow: 0 0 6px rgba(69, 213, 222, 0.85), 2px 0 0 rgba(238, 124, 111, 0.35);
	opacity: 0; transition: opacity 400ms;
}
.ez-tele__osd.est-visible { opacity: 1; transition-duration: 80ms; }
.ez-tele__jauge { display: inline-block; vertical-align: 0.1em; width: 6.5em; height: 0.6em; margin-left: 0.6em; padding: 2px; border: 2px solid currentColor; box-shadow: 0 0 6px rgba(69, 213, 222, 0.6); }
.ez-tele__jauge::before { content: ""; display: block; width: var(--p); height: 100%; background: repeating-linear-gradient(90deg, currentColor 0 0.42em, transparent 0.42em 0.58em); }

/* ---------- Le panneau : deux boutons à tourner, le haut-parleur, la mise en marche ---------- */
.ez-tele__panneau { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 104px; padding: 6px 0 14px; }
.ez-tele__reglage { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ez-tele__molette {
	--angle: 0deg;
	position: relative; width: 60px; height: 60px; border-radius: 50%; cursor: grab; touch-action: none;
	background:
		radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 45%),
		repeating-conic-gradient(from 0deg, rgba(0, 0, 0, 0.22) 0 4deg, rgba(255, 255, 255, 0.04) 4deg 8deg),
		radial-gradient(circle, #4a4272 0%, #2a2448 72%);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.55), 0 0 0 3px #1a1731, inset 0 1px 1px rgba(255, 255, 255, 0.25);
}
.ez-tele__molette:active { cursor: grabbing; }
.ez-tele__molette::after {
	content: ""; position: absolute; inset: 9px; border-radius: 50%;
	background: radial-gradient(circle at 40% 35%, #574e86, #2e2850 80%); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
/* Repère du bouton : il tourne avec --angle */
.ez-tele__repere { position: absolute; z-index: 1; inset: 0; transform: rotate(var(--angle)); transition: transform 90ms ease-out; pointer-events: none; }
.ez-tele__repere::before { content: ""; position: absolute; left: 50%; top: 11px; width: 3px; height: 13px; margin-left: -1.5px; border-radius: 2px; background: var(--ez-corail); box-shadow: 0 0 6px rgba(238, 124, 111, 0.8); }
.ez-tele__molette.est-cranee .ez-tele__repere { transition: transform 160ms var(--ez-courbe); }
/* Graduations autour du bouton (posées par le script) */
.ez-tele__crans { position: absolute; inset: -9px; pointer-events: none; }
.ez-tele__crans i { position: absolute; left: 50%; top: 0; width: 2px; height: 5px; margin-left: -1px; border-radius: 1px; background: rgba(255, 255, 255, 0.35); transform-origin: 50% 39px; }
.ez-tele__legende { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.ez-tele__hautparleur { flex: 1; width: 64px; min-height: 40px; border-radius: 8px; background: repeating-linear-gradient(180deg, #14122a 0 3px, rgba(255, 255, 255, 0.06) 3px 6px); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6); }
.ez-tele__marche {
	display: flex; align-items: center; gap: 8px; padding: 7px 12px; border: 0; border-radius: 6px; cursor: pointer;
	background: #17142c; color: rgba(255, 255, 255, 0.7); font: inherit; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
	box-shadow: 0 2px 0 #0d0b1c, inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.ez-tele__marche:active { transform: translateY(1px); box-shadow: 0 1px 0 #0d0b1c; }
.ez-tele__voyant { width: 7px; height: 7px; border-radius: 50%; background: var(--ez-corail); box-shadow: 0 0 8px var(--ez-corail); }
.ez-tele.est-ferme .ez-tele__voyant { background: #4a2b33; box-shadow: none; }

/* ---------- Titre sous le poste ---------- */
.ez-tele__legende-video { width: calc(var(--le) + 200px); max-width: 100%; margin: 18px 0 0; text-align: center; }
.ez-tele__titre { margin: 0; font-weight: 700; font-size: 1rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ez-tele__youtube { display: inline-block; margin-top: 4px; font-size: 0.8125rem; font-weight: 300; color: rgba(255, 255, 255, 0.75); }
.ez-tele__youtube:hover { color: var(--ez-blanc); }

/* ---------- Allumage et extinction du tube ---------- */
.ez-tele.est-ouvert .ez-tele__contenu { animation: ez-tele-allume 640ms 120ms both cubic-bezier(0.3, 0.7, 0.2, 1); }
.ez-tele.est-ferme .ez-tele__contenu { animation: ez-tele-eteint 300ms both ease-in; }
@keyframes ez-tele-allume {
	0% { transform: scale(0, 0.006); filter: brightness(4); }
	35% { transform: scale(1, 0.006); filter: brightness(4); }
	75% { transform: scale(1, 1); filter: brightness(1.6); }
	100% { transform: none; filter: none; }
}
@keyframes ez-tele-eteint {
	0% { transform: none; filter: none; }
	55% { transform: scale(1, 0.006); filter: brightness(4); }
	100% { transform: scale(0, 0.006); filter: brightness(4); }
}

/* ---------- Téléphone : panneau sous l'écran, Short en écran vertical ---------- */
@media (max-width: 699px) {
	.ez-tele { --le: min(calc(100vw - 2 * var(--ez-gouttiere) - 44px), calc((100svh - 300px) / var(--kh))); }
	.ez-tele.ez-tele--court { --kh: 1.3333; }
	.ez-tele__scene { padding-top: 70px; }
	.ez-tele__caisse { flex-direction: column; gap: 12px; padding: 14px 14px 22px; border-radius: 22px; }
	.ez-tele__caisse::after { left: 20px; right: 20px; bottom: 8px; }
	.ez-tele__cadre { padding: 8px; border-radius: 24px; }
	.ez-tele__panneau { flex-direction: row; justify-content: space-between; width: auto; padding: 0 4px; gap: 12px; }
	.ez-tele__reglage { flex-direction: row; gap: 8px; }
	.ez-tele__molette { width: 44px; height: 44px; }
	.ez-tele__molette::after { inset: 7px; }
	.ez-tele__repere::before { top: 8px; height: 10px; }
	.ez-tele__crans { inset: -7px; }
	.ez-tele__crans i { transform-origin: 50% 29px; }
	.ez-tele__hautparleur { flex: 1; width: auto; min-height: 30px; height: 30px; max-width: 60px; background: repeating-linear-gradient(90deg, #14122a 0 3px, rgba(255, 255, 255, 0.06) 3px 6px); }
	.ez-tele__antennes::before { height: 54px; }
	.ez-tele__antennes::after { height: 48px; }
	.ez-tele__legende-video { width: auto; }
}
@media (max-width: 380px) {
	.ez-tele__hautparleur { display: none; }
}

/* Mouvements réduits : ni allumage ni bande qui défile, simple fondu */
@media (prefers-reduced-motion: reduce) {
	.ez-tele__poste { transform: none; transition: none; }
	.ez-tele.est-ouvert .ez-tele__contenu, .ez-tele.est-ferme .ez-tele__contenu { animation: none; }
	.ez-tele__bande { display: none; }
}