/* =====================================================================
   WTV web — habillage pour navigateur (iPhone, iPad, et le Mac en test)

   Reprend les regles que la coque Mac injecte par `webContents.insertCSS`
   (supports/mac/shell/main.js). Meme raisonnement, servi autrement.

   Ce fichier n'est charge QUE par le relais. La television, la box et le
   Mac ne le voient jamais : `app/` n'est pas modifie.
   ===================================================================== */

/* ---- Plein cadre -----------------------------------------------------
   L'interface est dessinee sur une grille large de 1920 px et haute de
   1080. On cale l'echelle sur la LARGEUR (voir echelle.js), et la hauteur
   reelle devient alors superieure ou inferieure a 1080 selon l'ecran.
   Tous les calques qui valaient `height:1080px` suivent donc la hauteur
   reelle — c'est ce qui SUPPRIME les bandes noires au lieu de les
   deplacer. `--wtv-hauteur` est ecrite par echelle.js. */
html, body, #app, .screen, #html5player,
.hero--detail, .osd, .cook__inner, .setup, .profiles,
.intro, .keypanel, .ambience, .ambience .a1, .vignette,
.ui-fade, .srch {
  height: var(--wtv-hauteur, 1080px) !important;
}

html, body { width: 1920px !important; overflow: hidden; }
html { background: #000; }
body { margin: 0 !important; position: relative; top: 0; transform: none; }

/* ---- Curseur ---------------------------------------------------------
   `style.css` pose `cursor:none` — un televiseur n'a pas de souris. Ici
   il sert, et il faut `!important` pour passer devant, sinon il ne
   reapparait que sur les vignettes. Il ne s'escamote que par-dessus une
   image en cours de lecture, ou il gene. */
html, body { cursor: default !important; }
.focusable { cursor: pointer !important; }
html.souris-dormante, html.souris-dormante * { cursor: none !important; }

/* <object type="application/avplayer"> est la surface video de la TV.
   Ailleurs, le navigateur affiche a la place son cartouche
   « Impossible de charger le plug-in », en plein milieu de l'ecran. */
#avplayer { display: none !important; }

/* ---- Defilement natif de l'accueil -----------------------------------
   La colonne etait deplacee par un transform pilote par le focus, ce qui
   fait sauter de rangee en rangee. Hors televiseur on veut une page qui
   defile et qui s'arrete ou l'on veut : la colonne devient statique et
   c'est l'ecran qui defile. `focus.js` detecte la classe `wtv-natif`
   (posee par souris.js) et cesse d'ecrire son transform. */
#screen-home {
  overflow-y: auto !important; overflow-x: hidden !important;
  scroll-behavior: auto; -webkit-overflow-scrolling: touch;
}
#screen-home .home__scroll {
  position: static !important; transform: none !important;
  height: auto !important; min-height: 0 !important;
}
#screen-home .topnav {
  position: fixed !important; top: 0; left: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.92) 0%,
              rgba(0,0,0,.72) 55%, rgba(0,0,0,0) 100%);
}
#screen-home .rails { padding-top: 124px; }

#screen-home::-webkit-scrollbar { width: 10px; }
#screen-home::-webkit-scrollbar-track { background: transparent; }
#screen-home::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.28); border-radius: 5px;
  border: 3px solid transparent; background-clip: content-box;
}
#screen-home::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.5);
  border: 3px solid transparent; background-clip: content-box;
}

/* ---- Fond pendant la lecture -----------------------------------------
   `style.css` rend html, body, #app et .screen TRANSPARENTS pendant un
   film. C'est juste sur la television et sur le Mac : la video y est
   affichee par un plan separe — AVPlay, ou mpv derriere une fenetre
   retiree — et l'interface doit le laisser voir.

   Dans un navigateur il n'y a rien derriere : la video est DANS la page.
   Transparent veut alors dire « blanc », d'ou les bandes claires en haut
   et en bas du film. On repose donc du noir. */
html.is-playing,
html.is-playing body { background: #000 !important; }

/* `#app` et `.screen` doivent RESTER transparents : la video est
   DESSOUS (`#html5player`), et les repeindre la recouvre — ecran noir
   complet, erreur commise le 16/09/2026. Seul le fond de page devait
   changer : c'est lui qui apparaissait en blanc au-dessus et en dessous
   de l'image. */

/* La video est en `object-fit: contain` : sur un ecran qui n'est pas en
   16/9 elle laisse des bandes. Elles doivent etre noires, et c'est
   l'element video lui-meme qui doit les peindre — pas la page, dont le
   fond est masque par le reste. */
html.is-playing #html5player { background: #000 !important; }

/* ---- Defilement sur les autres ecrans --------------------------------
   Seul `#screen-home` avait ete rendu defilable : c'est ce que faisait la
   coque Mac, ou le reste tient dans la fenetre. Sur un telephone en
   paysage la hauteur utile est bien moindre, et la fiche d'un film, la
   grille des chaines ou la recherche debordent sans qu'on puisse
   descendre. Constate sur iPhone : « je ne peux pas descendre ». */
html.wtv-tactile #screen-detail,
html.wtv-tactile #screen-grid,
html.wtv-tactile #screen-search,
html.wtv-tactile #screen-settings,
html.wtv-tactile #screen-profiles {
  overflow-y: auto !important; overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

/* ---- Retour, toujours accessible au doigt ----------------------------
   Dans un onglet Safari la page n'empile aucun historique : le balayage
   depuis le bord gauche ne ramene donc nulle part. Et une fois posee sur
   l'ecran d'accueil, il n'y a plus de barre du tout. Sans ce bouton, on
   entre dans une fiche et on ne peut plus en sortir. */
#wtv-retourtac {
  /* En paysage, la Dynamic Island occupe le bord GAUCHE de l'ecran et
     recouvrait cette fleche : on ne pouvait plus revenir en arriere.
     `safe-area-inset-left` est exactement la mesure de ce qu'elle mange.
     Les tailles passent par `--wtv-u`, un pixel d'ecran : sans lui le
     bouton suivait la reduction de la page et devenait minuscule debout. */
  position: fixed; z-index: 9500;
  top: calc(12 * var(--wtv-u) + env(safe-area-inset-top) / var(--wtv-echelle, 1));
  left: calc(12 * var(--wtv-u) + env(safe-area-inset-left) / var(--wtv-echelle, 1));
  width: calc(44 * var(--wtv-u)); height: calc(44 * var(--wtv-u));
  border: 0; border-radius: 50%;
  background: rgba(20,20,24,.62); color: #fff;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 6px 24px rgba(0,0,0,.45);
  display: none; align-items: center; justify-content: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#wtv-retourtac svg { width: calc(24 * var(--wtv-u)); height: calc(24 * var(--wtv-u)); fill: currentColor; }
#wtv-retourtac:active { background: rgba(40,40,48,.82); }
/* Il n'apparait que la ou « revenir » veut dire quelque chose. Sur
   l'accueil il ne sert a rien : on y est deja. */
html.wtv-tactile.wtv-retour-utile #wtv-retourtac { display: flex; }
/* Pendant un film, c'est la surface du lecteur qui porte son propre
   retour : deux fleches superposees n'auraient aucun sens. */
html.wtv-tactile.is-playing #wtv-retourtac { display: none; }

/* ---- Un souffle derriere les profils ---------------------------------
   Les affiches se relaient toutes les 5 secondes, avec un fondu de 0,9 s
   (`startProfilesBackdrop` dans app.js). Immobiles, elles donnent une
   succession de cartes postales ; un mouvement tres lent suffit a rendre
   l'ecran vivant sans jamais attirer l'oeil.

   `linear` et non une courbe adoucie : a cette vitesse, une acceleration
   au depart se remarquerait, alors qu'une derive constante reste
   invisible. On ne la percoit qu'en regardant ailleurs.

   Et l'echelle au REPOS vaut celle de fin d'animation : la couche qui
   s'efface garde donc sa taille pendant les 0,9 s du fondu, au lieu de
   se retracter d'un coup en sortant. */
@-webkit-keyframes wtv-souffle {
  from { -webkit-transform: scale(1.02); transform: scale(1.02); }
  to   { -webkit-transform: scale(1.11); transform: scale(1.11); }
}
@keyframes wtv-souffle {
  from { transform: scale(1.02); }
  to   { transform: scale(1.11); }
}

#screen-profiles .profiles__backdrop {
  -webkit-transform: scale(1.11);
  transform: scale(1.11);
}

#screen-profiles .profiles__backdrop.is-on {
  -webkit-animation: wtv-souffle 6.2s linear forwards;
  animation: wtv-souffle 6.2s linear forwards;
}

/* Qui demande moins d'animation n'en recoit aucune. */
@media (prefers-reduced-motion: reduce) {
  #screen-profiles .profiles__backdrop.is-on {
    -webkit-animation: none;
    animation: none;
  }
}