/* ============================================================================
   freeetv — volume-ui.css  (ADDITIF, chantier player / DA Lili)
   Curseur de volume mobile : bouton haut-parleur + panneau curseur qui surgit
   par-dessus le lecteur, se règle au doigt, s'efface tout seul.

   ── COMMENT APPLIQUER ──────────────────────────────────────────────────────
   1) Enqueue APRÈS le CSS du lecteur (et de pair avec volume-ui.js, lui-même
      enqueue après player.js). WordPress :
        wp_enqueue_style ( 'ftv-volume-ui',
          get_stylesheet_directory_uri() . '/patches/volume-ui.css',
          array( 'ftv-player' ), '1' );
      Statique : <link rel="stylesheet" href="patches/volume-ui.css"> juste
      avant </head>, après la feuille du player.
   2) Aucune règle du lecteur n'est modifiée : ce fichier n'ajoute QUE des
      classes préfixées .ftv-vol* / .ftv-spk. Retrait = dé-enqueue, rien à
      nettoyer dans le player.
   3) Variante active par défaut = A (curseur VERTICAL, bord droit). La variante
      B (barre horizontale en bas) est fournie en bloc commenté plus bas :
      Stéphane tranche depuis le proto ; pour basculer, commenter le bloc A et
      décommenter le bloc B (le JS lit data-ftv-vol-variant, cf. volume-ui.js).
   4) Tokens repris de freeetv (--blue/--glow/--panel…). S'ils sont déjà définis
      globalement, les :root ci-dessous ne font que fournir un repli.
   ============================================================================ */

:root {
	/* Repli si les tokens freeetv ne sont pas déjà exposés globalement. */
	--ftv-panel: 13, 18, 38;              /* rgb() du fond des panneaux        */
	--ftv-line:  rgba(255,255,255,.14);
	--ftv-line2: rgba(255,255,255,.26);
	--ftv-ink:   #eef2ff;
	--ftv-soft:  #c3c9e8;
	--ftv-blue:  #2e7bff;
	--ftv-glow:  #5ea0ff;
	--ftv-vol-fade: 220ms;                /* durée d'apparition/effacement     */
}

/* Le panneau se positionne DANS le conteneur du lecteur (marche en plein écran
   aussi — cf. chantier volet plein écran). Le JS pose position:relative si
   besoin ; on le garantit ici sans écraser un positionnement existant. */
.ftv-has-vol-ui { position: relative; }

/* ── Bouton haut-parleur (déclencheur) ────────────────────────────────────
   Cible tactile 46px (≥44). Coin bas-droit du lecteur. */
.ftv-spk {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 8;
	width: 46px;
	height: 46px;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border-radius: 50%;
	display: grid;
	place-items: center;
	cursor: pointer;
	color: #fff;
	border: 1px solid var(--ftv-line2);
	background: rgba(var(--ftv-panel), .55);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition: border-color var(--ftv-vol-fade), background var(--ftv-vol-fade);
}
.ftv-spk:hover { border-color: var(--ftv-glow); }
.ftv-spk:focus-visible { outline: 2px solid var(--ftv-glow); outline-offset: 2px; }
.ftv-spk svg { display: block; pointer-events: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   VARIANTE A — curseur VERTICAL, bord droit  (DÉFAUT, geste pouce naturel)
   ═══════════════════════════════════════════════════════════════════════════ */
.ftv-vol {
	position: absolute;
	right: 12px;
	bottom: 66px;                         /* au-dessus du bouton HP            */
	z-index: 9;
	width: 52px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 12px 8px 10px;
	border-radius: 16px;
	border: 1px solid var(--ftv-line);
	background: rgba(var(--ftv-panel), .6);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	opacity: 0;
	transform: translateY(6px) scale(.96);
	pointer-events: none;
	transition: opacity var(--ftv-vol-fade), transform var(--ftv-vol-fade);
}
.ftv-vol.is-show { opacity: 1; transform: none; pointer-events: auto; }
.ftv-vol:focus-visible { outline: 2px solid var(--ftv-glow); outline-offset: 2px; }

.ftv-vol__pct {
	font-size: .74rem;
	color: var(--ftv-soft);
	font-variant-numeric: tabular-nums;
	min-height: 1em;
}
/* Piste : 150px de haut, mais zone tactile élargie via padding invisible pour
   franchir le seuil ≥44px de large sans épaissir le visuel. */
.ftv-vol__track {
	position: relative;
	width: 8px;
	height: 150px;
	border-radius: 6px;
	background: rgba(255,255,255,.16);
	cursor: pointer;
	touch-action: none;
	padding: 0 18px;                      /* étend la zone de hit à ~44px      */
	margin: 0 -18px;
	background-clip: content-box;
}
.ftv-vol__fill {
	position: absolute;
	left: 18px; right: 18px; bottom: 0;
	border-radius: 6px;
	background: linear-gradient(180deg, var(--ftv-glow), var(--ftv-blue));
}
.ftv-vol__knob {
	position: absolute;
	left: 50%;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	transform: translate(-50%, 50%);
	box-shadow: 0 2px 8px rgba(0,0,0,.5);
}

/* ── Mode iOS (piste masquée, muet/son seulement) ─────────────────────────
   volume-ui.js pose .ftv-vol--io sur le panneau et l'iOS n'a PAS de piste
   continue : on réduit le panneau à une pastille d'état + libellé. */
.ftv-vol--io .ftv-vol__track,
.ftv-vol--io .ftv-vol__fill,
.ftv-vol--io .ftv-vol__knob { display: none; }
.ftv-vol--io { width: auto; min-width: 44px; padding: 10px 12px; }
.ftv-vol__io-label {
	display: none;
	font-size: .72rem;
	color: var(--ftv-soft);
	text-align: center;
	line-height: 1.3;
}
.ftv-vol--io .ftv-vol__io-label { display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   VARIANTE B — barre HORIZONTALE en bas  (OPTIONNELLE — Stéphane tranche)
   Pour l'activer : commenter le bloc VARIANTE A ci-dessus, décommenter ce bloc,
   et poser data-ftv-vol-variant="H" (cf. volume-ui.js).
   ─────────────────────────────────────────────────────────────────────────

.ftv-vol {
	position: absolute;
	left: 12px;
	right: 70px;
	bottom: 20px;
	z-index: 9;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-radius: 14px;
	border: 1px solid var(--ftv-line);
	background: rgba(var(--ftv-panel), .6);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity var(--ftv-vol-fade), transform var(--ftv-vol-fade);
}
.ftv-vol.is-show { opacity: 1; transform: none; pointer-events: auto; }
.ftv-vol__pct { flex: none; font-size: .78rem; color: var(--ftv-soft);
	font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; }
.ftv-vol__track {
	position: relative;
	flex: 1;
	height: 8px;
	border-radius: 6px;
	background: rgba(255,255,255,.16);
	cursor: pointer;
	touch-action: none;
	padding: 18px 0;
	margin: -18px 0;
	background-clip: content-box;
}
.ftv-vol__fill { position: absolute; top: 18px; bottom: 18px; left: 0;
	border-radius: 6px; background: linear-gradient(90deg, var(--ftv-blue), var(--ftv-glow)); }
.ftv-vol__knob { position: absolute; top: 50%; width: 20px; height: 20px;
	border-radius: 50%; background: #fff; transform: translate(-50%, -50%);
	box-shadow: 0 2px 8px rgba(0,0,0,.5); }

   ───────────────────────────────────────────────────────────────────────── */

/* ── Accessibilité mouvement ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.ftv-spk,
	.ftv-vol { transition: none; }
	.ftv-vol { transform: none; }
}