/* freeetv — PATCHES PROD v0 (déployables seuls, sans la refonte de freeetv.css).
   DÉCOUPE Lili : ici = ce qui part MAINTENANT (pagination + bande hero + tactile HORS
   header). Le tactile du HEADER (pastilles/toggle/langue) + le cluster responsive vivent
   dans le lot HEADER MOBILE (bouton palette + bottom-sheet) — pas ici, pour ne pas
   étaler le header sur mobile. Tokens → suit switcher + jour/nuit. Enqueue après freeetv. */

/* ===== PAGINATION catalogue (spec Léonard 11/07) — le .ftv-pagination était dans .grid
   (repeat(4,1fr)) → pilules repliées verticalement ; scope li>.page-numbers (le <ul>
   porte aussi .page-numbers). ===== */
.grid > .ftv-pagination{grid-column:1/-1}
.ftv-pagination{width:100%;display:flex;justify-content:center}
.ftv-pagination ul.page-numbers{list-style:none;margin:0;padding:0;display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.ftv-pagination li{margin:0}
.ftv-pagination li > .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;font-size:14px;font-weight:600;letter-spacing:.02em;transition:border-color .18s,background .18s,transform .18s}
.ftv-pagination li > a.page-numbers:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-1px)}
.ftv-pagination li > .page-numbers.current{background:var(--blue);border-color:var(--blue);color:#fff}
.ftv-pagination li > .page-numbers.dots{border:none;opacity:.55;min-width:auto;padding:0 2px}
.ftv-pagination li > .prev.page-numbers,.ftv-pagination li > .next.page-numbers{padding:0 16px}
@media(max-width:480px){.ftv-pagination li > .page-numbers{min-width:36px;height:36px}}

/* ===== RESPONSIVE mobile — bande hero (CONTENU, pas le header). Les 3 colonnes ne
   tiennent pas en portrait → empilées, centrées. (Le header mobile = lot séparé.) ===== */
@media(max-width:600px){
  .band{flex-direction:column}
  .band span{white-space:normal;justify-content:center;text-align:center}
  .band .b1,.band .b3{justify-content:center}
  .band .b2{padding:12px 24px}
}

/* ===== SOCLE TACTILE HORS HEADER (audit Albert P0, découpe Lili) : cibles ≥44px sur
   les éléments de CONTENU. Le tactile du header part avec le lot header mobile. ===== */
@media (pointer:coarse){
  .ftv-pagination li > .page-numbers{min-width:44px;height:44px}
  .mo-btn{width:40px;height:40px}
  .cl-tab{padding:15px 10px}
  .ftv-oc{min-height:44px}
}

/* ===== MICRO-FIX halo bandeau catégorie sur la FICHE (Lili 13/07 ~18h00, capture
   Stéphane) : le glow du .cl-band (0 26px 60px -30px var(--blue)) s'étend ~56 px sous
   le bandeau → il recouvrait le haut du player. Préférence (a) : on CLIPPE l'ombre vers
   le bas sur la variante --slim de la fiche UNIQUEMENT (extension basse ≈ 12 px, le
   player ne porte rien) ; le bandeau plein de la home garde son halo. Tokens → discret
   dans les 2 modes et toutes les ambiances (le « vert » = --blue de l'ambiance WebCam). */
.cl-band--slim{box-shadow:0 8px 22px -18px var(--blue)}

/* ===== story-04 V2 AUDIO iOS — INDICE VOLUME (Michelangelo 13/07 soir, direction
   Stéphane post-crash : PAS d'autoplay iOS, lecteur en pause, PLAY NATIF = un geste
   image+son — l'overlay « toucher pour le son » V1 est ABANDONNÉ). Ma part restante :
   l'indice discret « Volume : boutons de l'appareil », montré par player.js (Léonard)
   sur iOS SEULEMENT après le play natif (sa détection de contrainte volume est
   conservée), dismissible (×, mémorisé localStorage — clé côté player.js).
   Couleurs en dur assumées : overlay sur VIDÉO (fond variable), noir translucide +
   blanc = seul choix lisible, comme le chrome des lecteurs. margin:0 explicite
   (piège margin:20px du thème sur <button>). AUCUN curseur logiciel sur iOS. */
.player .ftv-sound-hint{position:absolute;left:14px;bottom:14px;z-index:5;display:inline-flex;align-items:center;gap:8px;
  margin:0;padding:8px 12px;border:1px solid rgba(255,255,255,.18);border-radius:999px;
  background:rgba(8,10,18,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:rgba(255,255,255,.85);font-size:.75rem;font-weight:600;line-height:1;
  opacity:0;animation:ftvHintIn .4s ease .3s forwards}
@keyframes ftvHintIn{to{opacity:1}}
.player .ftv-sound-hint-x{margin:0;padding:0 2px;border:0;background:none;color:rgba(255,255,255,.6);
  font-size:1rem;line-height:1;cursor:pointer;min-width:24px;min-height:24px}
.player .ftv-sound-hint-x:hover{color:#fff}
.player .ftv-sound-hint[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.player .ftv-sound-hint{animation:none;opacity:1}}
@media(max-width:480px){.player .ftv-sound-hint{left:10px;bottom:10px}}

/* ===== LIVE-VISITORS héros (spec Lili 13/07 ~21h) : « N watching now » DISCRET sous le
   compteur du bandeau — ne concurrence PAS le compteur principal (petit, alpha .72,
   même famille que .cl-band-total). k=3 STRICT géré côté PHP/JS ([hidden] = rien).
   tabular-nums → le nombre change sans reflow au refresh 60 s. Blancs alpha assumés :
   texte posé sur le dégradé bleu du bandeau, comme .cl-band-total/.cl-band-sub. */
.cl-band-watch{display:flex;align-items:center;gap:7px;margin-top:4px;
  font-size:.9rem;font-weight:600;letter-spacing:.03em;color:rgba(255,255,255,.72)}
.cl-band-watch svg{opacity:.8;flex:0 0 auto}
.cl-band-watch b{font-weight:700;color:rgba(255,255,255,.92);font-variant-numeric:tabular-nums}
.cl-band-watch[hidden]{display:none}