/* =====================================================================
   WTV web — ce qui change quand l'appareil est DEBOUT

   L'application est dessinee pour un ecran 16:9 de television : une
   grille figee de 1920x900, ou tout est place au pixel pres. Debout, ce
   plan n'a plus de sens — les rangees dependent de la largeur, la page
   se deroule, et le doigt remplace la telecommande.

   On ne refait pas l'application : on la REPLIE. Les ecrans concernes
   passent d'un plan absolu a un plan qui coule, et seulement sous
   `html.wtv-debout` — la television et le paysage ne voient rien d'ici.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Le choix du profil

   C'etait une colonne de lignes larges de 720 px, calee a 174 px du bord
   gauche : dessinee pour etre parcourue a la telecommande, de haut en
   bas. Debout, elle sortait de l'ecran par la droite et laissait la
   moitie gauche vide.

   On la remet en GRILLE centree, comme Netflix sur telephone : trois
   visages par ligne, le nom dessous, et de quoi respirer autour.
   --------------------------------------------------------------------- */
/* L'ARRIERE-PLAN.

   Sur television, l'affiche occupe 78 % de la largeur a DROITE et un
   degrade horizontal la noie vers la gauche, ou vit le texte. Debout, ce
   plan donnait une moitie gauche entierement noire.

   On la remet a plat : pleine largeur, en HAUT, nette, et le degrade
   devient vertical — l'affiche se fond vers le bas, la ou les profils
   attendent. C'est l'equilibre de Netflix : le contenu se regarde en
   haut, l'action se fait en bas. */
html.wtv-debout #screen-profiles .profiles__backdrop {
  left: 0; right: auto; top: 0;
  width: 100%; height: 68%;
  background-position: center 20%;
}

html.wtv-debout #screen-profiles .profiles__shade {
  background: linear-gradient(180deg,
    rgba(5,5,5,.50) 0%,
    rgba(5,5,5,0) 20%,
    rgba(5,5,5,0) 40%,
    rgba(5,5,5,.55) 56%,
    rgba(5,5,5,.94) 66%,
    #050505 74%);
}

/* LE PANNEAU DE VERRE.

   Meme recette que la barre du bas — teinte, brillance, aretes
   chromatiques — parce que c'est le meme materiau et qu'il doit se
   reconnaitre d'un ecran a l'autre. Il se pose en bas, arrondi sur le
   haut seulement : il sort de l'ecran, il ne flotte pas dedans. */
html.wtv-debout #screen-profiles .profiles {
  position: absolute;
  /* `!important` a regret, mais necessaire : la regle de base pose
     `top: 0` avec `height: 1080px`, et laisser les deux ancrages actifs
     etire le panneau sur toute la page au lieu de le poser en bas. */
  top: auto !important; bottom: 0; left: 0; right: 0;
  width: auto; height: auto !important;
  z-index: 2;
  isolation: isolate;
  padding: calc(22 * var(--wtv-u)) calc(16 * var(--wtv-u))
           calc(28 * var(--wtv-u) + env(safe-area-inset-bottom) / var(--wtv-echelle, 1));
  border-radius: calc(30 * var(--wtv-u)) calc(30 * var(--wtv-u)) 0 0;

  background: linear-gradient(168deg,
      rgba(255,255,255,.13) 0%,
      rgba(255,255,255,.04) 42%,
      rgba(255,255,255,.07) 100%);
  border-top: var(--wtv-u) solid rgba(255,255,255,.20);
  box-shadow: 0 calc(-14 * var(--wtv-u)) calc(40 * var(--wtv-u)) rgba(0,0,0,.45);

  -webkit-backdrop-filter: blur(calc(20 * var(--wtv-u))) saturate(180%);
          backdrop-filter: blur(calc(20 * var(--wtv-u))) saturate(180%);
}

html.wtv-debout #screen-profiles .profiles::before,
html.wtv-debout #screen-profiles .profiles::after {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
}

/* La teinte, sombre : le panneau se pose sur une application noire. */
html.wtv-debout #screen-profiles .profiles::before {
  z-index: -1;
  background: rgba(20, 18, 22, .55);
}

/* Les aretes chromatiques, en `screen` : le liseré irisé. */
html.wtv-debout #screen-profiles .profiles::after {
  z-index: 3;
  box-shadow:
    inset  calc(1.4 * var(--wtv-u)) 0 rgba(255, 86, 116, .34),
    inset calc(-1.4 * var(--wtv-u)) 0 rgba(54, 226, 255, .30),
    inset 0 calc(1.2 * var(--wtv-u)) rgba(255,255,255,.44);
  mix-blend-mode: screen;
}

html.wtv-debout #screen-profiles .profiles__eyebrow {
  position: static;
  text-align: center;
  padding: 0 0 calc(18 * var(--wtv-u));
  font-size: calc(14 * var(--wtv-u));
  font-weight: 400;
  color: rgba(255, 255, 255, .72);
}

html.wtv-debout #screen-profiles .profiles__row {
  position: static;
  width: auto; height: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(20 * var(--wtv-u)) calc(12 * var(--wtv-u));
  padding: 0;
  justify-items: center;
}

/* La case se serre sur la vignette : sinon elle occupe toute sa colonne
   et le crayon, qui se pose par rapport a ELLE, atterrit dans le vide a
   droite du visage. Vu sur le vrai ecran, pas seulement en paysage. */
html.wtv-debout #screen-profiles .profile-slot {
  width: 100%; max-width: calc(104 * var(--wtv-u));
  height: auto; margin: 0;
  display: flex; justify-content: center;
}

html.wtv-debout #screen-profiles .profile {
  position: static;
  width: 100%; max-width: calc(104 * var(--wtv-u)); height: auto;
  display: flex; flex-direction: column; align-items: center;
  gap: calc(9 * var(--wtv-u));
  text-align: center;
}

/* Le visage devient une vignette carree, arrondie comme une icone
   d'application — c'est la forme que Netflix emploie sur telephone. */
html.wtv-debout #screen-profiles .profile__face {
  position: static;
  width: 100%; aspect-ratio: 1 / 1; height: auto;
  border-radius: calc(12 * var(--wtv-u));
  border-width: calc(2 * var(--wtv-u));
  font-size: calc(38 * var(--wtv-u)); line-height: calc(96 * var(--wtv-u));
  display: flex; align-items: center; justify-content: center;
  transform: none !important;
}

/* Le nom passe SOUS le visage. Sur la television il etait a droite, et
   le focus le decalait : debout ce glissement n'a plus lieu d'etre. */
html.wtv-debout #screen-profiles .profile__name {
  position: static;
  margin: 0; font-size: calc(13.5 * var(--wtv-u)); font-weight: 600;
  color: rgba(255, 255, 255, .78); opacity: 1;
  transform: none !important;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}

/* L'ANNEAU BLEU du navigateur.

   Safari dessine son propre cerclage sur l'element qui a le focus. Il se
   superposait a notre cadre blanc et donnait deux traits de couleurs
   differentes autour du meme visage. On le retire — le cadre blanc dit
   deja lequel est choisi, et il est dessine pour ca. */
html.wtv-debout #screen-profiles .profile:focus,
html.wtv-debout #screen-profiles .profile:focus-visible,
html.wtv-debout #screen-profiles .profile__face:focus {
  outline: none !important;
  box-shadow: none;
}

/* Tous les noms se lisent pareil.

   Ils etaient gris pour les profils non choisis et blancs pour l'actif :
   on ne lisait bien qu'un nom sur trois. Chez Netflix, tous sont blancs —
   c'est le CADRE qui designe, jamais la couleur du texte. */
html.wtv-debout #screen-profiles .profile__name {
  color: #fff !important;
  opacity: 1 !important;
  font-weight: 600;
}

/* Au doigt il n'y a pas de focus qui se promene : on montre lequel est
   choisi, sans l'agrandir — un agrandissement decalerait la grille. */
html.wtv-debout #screen-profiles .profile.is-focused .profile__face {
  transform: none !important;
  box-shadow: 0 0 0 calc(3 * var(--wtv-u)) #fff,
              0 calc(8 * var(--wtv-u)) calc(22 * var(--wtv-u)) rgba(0, 0, 0, .5);
}
html.wtv-debout #screen-profiles .profile.is-focused .profile__name {
  color: #fff; font-size: calc(13 * var(--wtv-u)); font-weight: 600;
}

/* Le crayon d'edition etait pose a gauche, hors de la vignette. Debout,
   il se pose DANS le coin du visage, la ou le pouce le trouve. */
html.wtv-debout #screen-profiles .profile-edit {
  left: auto; right: calc(4 * var(--wtv-u)); top: calc(4 * var(--wtv-u));
  width: calc(26 * var(--wtv-u)); height: calc(26 * var(--wtv-u));
  opacity: .9; background: rgba(0, 0, 0, .55);
  border-radius: 50%;
}

/* ---------------------------------------------------------------------
   2. Les vignettes des rangees

   A 0,203 de zoom, une affiche de 306 px de large en faisait 62 a
   l'ecran : un timbre-poste, et son titre sous la ligne de flottaison.
   On ne refait pas la grille — tout y est fige — mais on redimensionne
   ce qui se voit, en gardant les PROPORTIONS de l'affiche (306x462).
   --------------------------------------------------------------------- */
html.wtv-debout .rail .card--tall,
html.wtv-debout .rail .card--tall.is-focused {
  width: calc(112 * var(--wtv-u)) !important;
}

html.wtv-debout .rail .card__art {
  height: calc(169 * var(--wtv-u)) !important;
  border-radius: calc(7 * var(--wtv-u));
}

/* Le titre et la note etaient coupes : leur boite gardait la hauteur
   prevue pour un ecran de television. */
html.wtv-debout .rail .card__label {
  padding: calc(6 * var(--wtv-u)) calc(2 * var(--wtv-u)) 0;
  font-size: calc(11 * var(--wtv-u));
  line-height: 1.25;
  height: calc(34 * var(--wtv-u));
}
html.wtv-debout .rail .card__label span {
  font-size: calc(9.5 * var(--wtv-u));
  margin-top: calc(2 * var(--wtv-u));
}

/* LE CONTENEUR AUSSI.

   `.rail__track` a une hauteur FIGEE de 548 px de grille — la place
   exacte d'une affiche de 462 et de son titre de 86. En agrandissant
   l'affiche a 169 px d'ECRAN, soit 833 px de grille, le contenu debordait
   sur la rangee suivante : le titre « Top 10 films » se retrouvait pose
   sur l'affiche du dessus. Tout ce qui borne la rangee doit changer dans
   la meme unite que ce qu'elle contient. */
html.wtv-debout .rail__track {
  height: calc(212 * var(--wtv-u)) !important;
}

html.wtv-debout .rail { margin-bottom: calc(16 * var(--wtv-u)); }
html.wtv-debout .rail__head { margin-bottom: calc(7 * var(--wtv-u)); }
html.wtv-debout .rail .card { margin-right: calc(8 * var(--wtv-u)); }

/* Le resume du titre survole n'a aucun sens au doigt : il ne s'affiche
   que sur focus, et reservait pourtant 118 px de grille sous chaque
   rangee — de l'espace vide, partout. */
html.wtv-debout .rail__info { display: none !important; }

html.wtv-debout .rail__title {
  font-size: calc(15 * var(--wtv-u));
  max-width: 100%;
}

/* Le chiffre du Top 10 fait 400 px de haut : debout, il mangeait la
   moitie de la rangee et ne laissait la place que pour deux affiches. */
html.wtv-debout .rail--top10 .rank__num {
  font-size: calc(96 * var(--wtv-u));
  -webkit-text-stroke: calc(1.8 * var(--wtv-u)) #6E6E6E;
  margin-right: calc(-8 * var(--wtv-u));
}
html.wtv-debout .rail--top10 .rank__num {
  margin-right: calc(4 * var(--wtv-u));
}

/* ---------------------------------------------------------------------
   3. Le haut de l'accueil

   Le bandeau vedette commencait au pixel zero : sur un telephone, son
   titre et sa note disparaissaient derriere l'heure et l'encoche. Une
   television n'a ni l'une ni l'autre, d'ou l'oubli. `safe-area-inset-top`
   est la mesure exacte de ce qui est mange, et on ajoute de quoi
   respirer par-dessus.
   --------------------------------------------------------------------- */
/* L'encoche, et trois pixels pour respirer. J'en avais mis dix : comme
   cette marge est comprise dans la hauteur de l'ecran, chaque pixel de
   trop est un pixel perdu en bas. */
html.wtv-debout #screen-home {
  padding-top: calc(env(safe-area-inset-top) / var(--wtv-echelle, 1) + 3 * var(--wtv-u));
}

/* ---------------------------------------------------------------------
   4. Le glissement horizontal, au doigt

   Dans les deux orientations : c'est le TOUCHER qui commande ici, pas la
   forme de l'ecran. A la souris les fleches restent, elles y sont
   meilleures.

   La piste devient nativement defilante. L'inertie, le rebond en butee et
   le freinage d'iOS ne s'imitent pas : tout glissement fait main serait
   moins bon. En echange on neutralise le deplacement par transformation,
   qui appartient a la telecommande — les deux ne peuvent pas cohabiter
   sur le meme element.
   --------------------------------------------------------------------- */
html.wtv-tactile .rail__track {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  transform: none !important;
  transition: none !important;
  will-change: auto;
  scrollbar-width: none;
}
html.wtv-tactile .rail__track::-webkit-scrollbar { display: none; }

/* Les fleches n'ont plus lieu d'etre : elles se posaient sur les affiches
   et il fallait les viser. */
html.wtv-tactile .wtv-chev { display: none !important; }

/* ---------------------------------------------------------------------
   5. L'ecran de preparation

   Il est dessine comme le reste : une boite figee de 1920x1080 avec
   322 px de marge haute. Debout, la page fait quatre mille pixels de
   grille — le contenu se retrouvait donc colle en haut, minuscule, avec
   un desert noir en dessous.

   On le sort de la grille : `fixed` le rattache a l'ECRAN, et il se
   centre pour de bon. Les tailles passent en pixels reels, sinon le
   titre ferait six pixels de haut sur un telephone.
   --------------------------------------------------------------------- */
html.wtv-tactile #screen-cook .cook__inner {
  position: fixed; inset: 0;
  width: auto; height: auto; padding: 0 calc(28 * var(--wtv-u));
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0;
}

html.wtv-tactile .cook__logo {
  width: calc(52 * var(--wtv-u)); height: calc(52 * var(--wtv-u));
  margin: 0 0 calc(22 * var(--wtv-u));
}

html.wtv-tactile .cook__title {
  font-size: calc(19 * var(--wtv-u));
  letter-spacing: calc(-0.2 * var(--wtv-u));
  text-align: center;
}

html.wtv-tactile .cook__sub {
  font-size: calc(13 * var(--wtv-u));
  margin-top: calc(7 * var(--wtv-u));
  text-align: center;
  max-width: calc(260 * var(--wtv-u));
}

/* La barre d'avancement : plus fine, arrondie, et centree pour de bon —
   elle etait calee par une marge automatique dans une boite de 1920. */
html.wtv-tactile .cook__bar {
  width: calc(190 * var(--wtv-u));
  height: calc(3 * var(--wtv-u));
  margin: calc(26 * var(--wtv-u)) 0 0;
  border-radius: 999px;
}

/* Les trois points disaient la meme chose que la barre juste au-dessus. */
html.wtv-tactile .cook__dots { display: none; }

/* =====================================================================
   6. Les ecrans qui restaient dessines pour une television

   Recherche, chaines et fiche partagent la meme maladie : un plan
   ABSOLU dans une grille de 1920x1080, avec des hauteurs figees qui
   coupent tout ce qui depasse. Debout, la page fait quatre fois cette
   hauteur — d'ou le contenu tasse en haut et l'immense bande noire.

   On leur rend la hauteur de l'ecran et on les laisse defiler.
   ===================================================================== */
html.wtv-debout #screen-search,
html.wtv-debout #screen-detail,
html.wtv-debout #screen-live {
  height: var(--wtv-hauteur) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

/* ---- La fiche ------------------------------------------------------
   Sur television, l'affiche occupe tout l'ecran et le texte se pose
   PAR-DESSUS, a gauche, lisible grace a un degrade horizontal. Debout,
   ce plan collait le titre et les boutons sur l'image, en haut, et le
   reste tombait dans le vide.

   On separe : l'affiche prend la moitie haute, le texte coule dessous.
   Le degrade devient vertical, comme sur la page profil. */
/* `!important` impose par `bureau.css`, qui force ces calques a la
   hauteur pleine pour supprimer les bandes noires en paysage. En
   portrait, l'affiche ne doit justement PAS prendre tout l'ecran. */
html.wtv-debout #screen-detail .hero--detail {
  position: absolute; top: 0; left: 0; right: 0;
  width: auto; height: calc(var(--wtv-hauteur) * 0.46) !important;
}

html.wtv-debout #screen-detail .hero__scrim {
  /* Le texte commence juste sous l'affiche et mord de quelques pixels
     sur son bas : le degrade doit donc etre franchement noir a partir
     des trois quarts, sinon le titre se perd dans l'image. */
  background: linear-gradient(180deg,
    rgba(0,0,0,.50) 0%, rgba(0,0,0,.08) 20%,
    rgba(0,0,0,.34) 52%, rgba(0,0,0,.80) 74%,
    rgba(0,0,0,.97) 88%, #000 100%);
}

html.wtv-debout #screen-detail .detail__scroll {
  position: relative; width: auto;
  transform: none !important; transition: none !important;
}

html.wtv-debout #screen-detail .detail {
  width: auto;
  padding: calc(var(--wtv-hauteur) * 0.43) calc(16 * var(--wtv-u)) 0;
}
html.wtv-debout #screen-detail .detail--series {
  padding-top: calc(var(--wtv-hauteur) * 0.39);
}

html.wtv-debout #screen-detail .detail__title {
  font-size: calc(26 * var(--wtv-u)); line-height: 1.12;
}

/* Les etiquettes tenaient sur une seule ligne, prevue pour 1816 px. */
html.wtv-debout #screen-detail .chips { white-space: normal; margin-top: calc(9 * var(--wtv-u)); }
html.wtv-debout #screen-detail .chip {
  font-size: calc(11 * var(--wtv-u));
  padding: calc(4 * var(--wtv-u)) calc(11 * var(--wtv-u));
  margin: 0 calc(6 * var(--wtv-u)) calc(6 * var(--wtv-u)) 0;
  border-radius: 999px;
}

html.wtv-debout #screen-detail .plotbox {
  width: auto; margin-top: calc(10 * var(--wtv-u));
  padding: calc(11 * var(--wtv-u)) calc(13 * var(--wtv-u));
  border-radius: calc(10 * var(--wtv-u));
}
/* Le resume etait tronque a 100 px : debout, il y a la place de le lire. */
html.wtv-debout #screen-detail .detail__plot {
  font-size: calc(12.5 * var(--wtv-u)); max-height: none;
}

html.wtv-debout #screen-detail .detail__actions {
  width: auto; white-space: normal; margin-top: calc(12 * var(--wtv-u));
}
html.wtv-debout #screen-detail .detail__extra { padding-bottom: calc(60 * var(--wtv-u)); }

/* ---- Les chaines ---------------------------------------------------
   IL N'Y A PAS D'ECRAN « screen-live » : la television vit DANS l'accueil,
   qui change de section. Mes premieres regles visaient un identifiant
   inexistant et ne s'appliquaient donc a rien — d'ou les deux rangees
   suivies de noir, inchangees.

   `.chanview` a une hauteur figee de 856 px et masque le reste. On la
   laisse suivre son contenu, et la grille remplit la largeur. */
html.wtv-debout .chanview {
  height: auto !important; overflow: visible !important;
}
html.wtv-debout .chan__inner {
  width: auto !important; padding: calc(6 * var(--wtv-u)) 0 0;
  transform: none !important; transition: none !important;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(16 * var(--wtv-u)) calc(10 * var(--wtv-u));
}
html.wtv-debout .chan {
  display: block; width: 100% !important; margin: 0 !important;
}
/* La barre des onglets « Chaines favorites / Replay » gardait la taille
   d'une telecommande. */
html.wtv-debout .chanbar { height: auto; padding-top: calc(4 * var(--wtv-u)); white-space: normal; }
html.wtv-debout .chanpill {
  height: calc(30 * var(--wtv-u)); line-height: calc(30 * var(--wtv-u));
  padding: 0 calc(14 * var(--wtv-u)); font-size: calc(12 * var(--wtv-u));
  border-radius: 999px; margin: 0 calc(6 * var(--wtv-u)) calc(6 * var(--wtv-u)) 0;
}

/* ---- La recherche --------------------------------------------------
   La colonne de gauche faisait 452 px dans un ecran de 1920, et les
   resultats occupaient le reste. Debout, les deux se chevauchaient dans
   le coin haut-gauche. On les empile : la saisie d'abord, les resultats
   dessous. */
/* La marge haute laisse la place a la fleche de retour, qui flotte au
   meme endroit : 12 px du bord, 44 de haut. Sans elle, elle se posait
   sur le titre — c'est ce qu'on voyait. */
html.wtv-debout #screen-search .srch {
  position: relative; width: auto; height: auto !important;
  padding: calc(env(safe-area-inset-top) / var(--wtv-echelle, 1) + 64 * var(--wtv-u))
           calc(16 * var(--wtv-u)) calc(40 * var(--wtv-u));
}
html.wtv-debout #screen-search .srch__side {
  position: static; width: auto; margin-bottom: calc(18 * var(--wtv-u));
}
html.wtv-debout #screen-search .srch__title { font-size: calc(22 * var(--wtv-u)); }
html.wtv-debout #screen-search .srch__eyebrow { font-size: calc(10 * var(--wtv-u)); }
html.wtv-debout #screen-search .srch__field { width: auto; margin-top: calc(14 * var(--wtv-u)); }
html.wtv-debout #screen-search .srch__field .searchbox {
  width: 100%; height: calc(44 * var(--wtv-u));
  font-size: calc(15 * var(--wtv-u));
  padding: 0 calc(12 * var(--wtv-u)) 0 calc(36 * var(--wtv-u));
  border-width: calc(1.5 * var(--wtv-u));
  border-radius: calc(10 * var(--wtv-u));
}
html.wtv-debout #screen-search .srch__ico { left: calc(12 * var(--wtv-u)); }
/* Les resultats vivaient dans une colonne ABSOLUE, calee a 552 px du
   bord et large de 1316 : debout, elle recouvrait la saisie et le titre.
   D'ou les textes superposes. On l'empile sous le champ. */
html.wtv-debout #screen-search .srch__main {
  position: static !important;
  width: auto !important; height: auto !important;
}
html.wtv-debout #screen-search .srch__bar {
  position: static !important; height: auto; text-align: right;
}
html.wtv-debout #screen-search .srch__empty {
  position: static !important; width: auto !important;
  padding-top: calc(40 * var(--wtv-u)); font-size: calc(13 * var(--wtv-u));
}
/* La phrase d'aide gardait la largeur de la colonne de telecommande. */
html.wtv-debout #screen-search .srch__hint {
  font-size: calc(12 * var(--wtv-u));
  width: auto !important; max-width: none !important;
  margin-top: calc(10 * var(--wtv-u));
}
html.wtv-debout #screen-search .srch__recent { width: auto !important; }
html.wtv-debout #screen-search .srch__inner,
html.wtv-debout #screen-search .srch__results {
  position: static !important; width: auto !important; height: auto !important;
  transform: none !important;
}

/* ---------------------------------------------------------------------
   7. Le jingle d'ouverture

   `object-fit: cover` remplit la boite en rognant ce qui depasse. Sur une
   television, boite et video ont le meme format : rien n'est perdu.
   Debout, la boite fait quatre fois la hauteur d'un 16:9 — le cadrage
   allait donc chercher une bande au centre de l'image, d'ou ce zoom
   enorme sur le W.

   `contain` le fait tenir en entier, centre sur du noir.
   --------------------------------------------------------------------- */
html.wtv-debout .intro__video {
  object-fit: contain;
  background: #000;
}

/* =====================================================================
   8. Les vignettes qui ne remplissaient pas leur colonne

   Mettre le conteneur en grille ne suffit pas : les vignettes gardent
   une largeur ECRITE EN DUR — 568 px pour une chaine, 308 pour un
   resultat de recherche. Elles se calaient donc a gauche de colonnes
   plus larges qu'elles, laissant une bande noire a droite, et les
   libelles, centres sur la COLONNE, ne tombaient plus sous l'image.

   On leur fait remplir la colonne et on garde leur proportion.
   ===================================================================== */

/* ---- Chaines : l'image en 16/9, pleine largeur ---------------------- */
html.wtv-debout .chan__art {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
}
html.wtv-debout .chan__label { font-size: calc(12 * var(--wtv-u)); padding-top: calc(5 * var(--wtv-u)); }
html.wtv-debout .chan__label b { font-size: calc(12 * var(--wtv-u)); }
html.wtv-debout .chan__label span { font-size: calc(10.5 * var(--wtv-u)); }
html.wtv-debout .chan__logo { font-size: calc(13 * var(--wtv-u)); }

/* ---- Recherche : TROIS affiches par rangee, en grand ----------------
   Elles etaient quatre par rangee, minuscules, et la moitie basse de
   l'ecran restait vide. Trois affiches lisibles valent mieux que quatre
   timbres-poste : on remplit la largeur et on deroule vers le bas. */
/* LA GRILLE VA SUR `.srch__inner`, PAS SUR SON PARENT.

   Les vignettes vivent dans un `.srch__inner` que l'application deplace
   par `translateY` — c'est ainsi qu'elle fait defiler a la telecommande.
   Poser la grille sur `.srch__live` revenait donc a mettre en grille UN
   SEUL element, cet `inner`, et tout se retrouvait empile dedans : d'ou
   l'unique affiche a l'ecran. Erreur du 16/09/2026. */
html.wtv-debout #screen-search .srch__live {
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
}

html.wtv-debout #screen-search .srch__inner {
  width: auto !important; height: auto !important;
  /* Le deplacement appartient a la telecommande : au doigt, c'est
     l'ecran entier qui defile. */
  transform: none !important; transition: none !important;
  display: grid;
  /* Trois par rangee sur un telephone, davantage sur une tablette : on
     fixe une largeur MINIMALE d'affiche plutot qu'un nombre de colonnes.
     A 105 px, un iPhone en loge trois et un iPad six — sans qu'aucune
     regle ne mentionne d'appareil. */
  grid-template-columns: repeat(auto-fill, minmax(calc(105 * var(--wtv-u)), 1fr));
  gap: calc(18 * var(--wtv-u)) calc(10 * var(--wtv-u));
  padding-top: calc(4 * var(--wtv-u));
}
/* `display: block` et non `auto` : une vignette en ligne se retracte sur
   son contenu, donc elle restait a 82 px dans une colonne de 113. */
html.wtv-debout #screen-search .scard {
  display: block; width: 100% !important; margin: 0 !important;
}
html.wtv-debout #screen-search .scard__art {
  width: 100% !important; height: auto !important;
  aspect-ratio: 2 / 3;                 /* la proportion exacte d'une affiche */
}
html.wtv-debout #screen-search .scard__label,
html.wtv-debout #screen-search .scard b,
html.wtv-debout #screen-search .scard span {
  font-size: calc(11 * var(--wtv-u));
}

/* L'etat vide : il flottait, minuscule, au milieu du noir. */
html.wtv-debout #screen-search .srch__empty p { font-size: calc(13 * var(--wtv-u)); }
html.wtv-debout #screen-search .srch__mark {
  width: calc(34 * var(--wtv-u)); height: auto;
}

/* =====================================================================
   9. `1fr` n'est pas « un tiers »

   `1fr` vaut `minmax(auto, 1fr)` : une part egale, MAIS jamais plus
   etroite que son contenu. Un titre comme « Le monument prefere des
   Francais », qui ne se coupe pas, imposait donc sa largeur a toute la
   colonne — l'autre se retrouvait ecrasee, et sur la recherche les
   colonnes gonflaient au point qu'une seule affiche tenait a l'ecran.

   `minmax(0, 1fr)` autorise la colonne a etre plus etroite que son
   contenu. Encore faut-il que le contenu accepte de se couper : d'ou les
   reglages de libelle ci-dessous, sans quoi il deborde au lieu de tenir.
   ===================================================================== */
html.wtv-debout .chan__label {
  height: auto !important;
  min-width: 0;
  padding-left: calc(2 * var(--wtv-u));
  padding-right: calc(2 * var(--wtv-u));
}
html.wtv-debout .chan__label b,
html.wtv-debout .chan__label span {
  display: block; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

html.wtv-debout #screen-search .scard { min-width: 0; }
html.wtv-debout #screen-search .scard b,
html.wtv-debout #screen-search .scard span {
  display: block; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* =====================================================================
   10. La television en paysage

   Mes regles ne portaient que sur le portrait. En paysage, `.chanview`
   garde sa hauteur figee de 856 px et masque le reste : deux rangees,
   puis plus rien, et le glissement ne donnait rien puisque le contenu
   etait simplement coupe.

   La regle porte donc sur le TOUCHER, dans les deux orientations. Le
   nombre de colonnes s'adapte tout seul a la largeur disponible : deux
   sur un telephone debout, davantage des qu'il y a la place.
   ===================================================================== */
html.wtv-tactile .chanview {
  height: auto !important; overflow: visible !important;
}
/* LE NOMBRE DE COLONNES EST FIXE, et non calcule d'apres une largeur
   minimale.

   `auto-fill` en donnait SEPT sur un iPad couche : des vignettes
   etroites, des noms de chaine a l'etroit dedans, et soixante-dix
   images a charger d'un coup. Deux en portrait, trois en paysage : les
   vignettes respirent, les noms tiennent, et il y a moins a charger
   d'un seul coup. */
html.wtv-tactile .chan__inner {
  width: auto !important; padding: calc(6 * var(--wtv-u)) 0 0;
  transform: none !important; transition: none !important;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(16 * var(--wtv-u)) calc(12 * var(--wtv-u));
}
html.wtv-tactile:not(.wtv-debout):not(.wtv-pivote) .chan__inner {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(18 * var(--wtv-u)) calc(14 * var(--wtv-u));
}
html.wtv-tactile .chan {
  display: block; width: 100% !important; margin: 0 !important; min-width: 0;
}
html.wtv-tactile .chan__art {
  width: 100% !important; height: auto !important; aspect-ratio: 16 / 9;
}
html.wtv-tactile .chan__label { height: auto !important; min-width: 0; }
html.wtv-tactile .chan__label b,
html.wtv-tactile .chan__label span {
  display: block; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* =====================================================================
   11. Les bandes-annonces

   Le calque est fige a 1920x1080, avec `!important` sur chaque mesure —
   ecrit pour contourner les caprices de mise en page du Tizen. Sur tout
   ecran d'une autre forme, il ne remplit donc qu'un rectangle dans le
   coin haut-gauche, le reste restant noir.

   On lui rend la taille de l'ECRAN. Le cadre YouTube, lui, centre et
   encadre sa video tout seul : inutile de calculer un 16/9, il le fait
   mieux que nous et s'adapte aux formats qui n'en sont pas.
   ===================================================================== */
html.wtv-tactile .trailer,
html.wtv-tactile .trailer__frame,
html.wtv-tactile .trailer__frame iframe,
html.wtv-tactile #trailer-frame {
  width: var(--wtv-largeur) !important;
  height: var(--wtv-hauteur) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
}

/* Le voile de chargement doit se centrer sur le meme cadre. */
html.wtv-tactile .trailer__loader {
  width: var(--wtv-largeur) !important;
  height: var(--wtv-hauteur) !important;
}

/* =====================================================================
   12. Les bandes-annonces sont retirees du tactile

   Decision prise avec Yanis le 16/09/2026, apres trois tentatives.

   Le calque est cable en dur a 1920x1080, avec `!important` sur CHAQUE
   mesure — largeur, hauteur, minimum, maximum — pour contourner les
   caprices de mise en page du televiseur Tizen. Lui rendre la taille de
   l'ecran n'a pas suffi, et la sonde posee pour comprendre n'a rien
   rapporte : le calque ne s'ouvre meme pas par le chemin surveille.

   Le point qui a tranche n'est pas l'esthetique : UNE FOIS DEDANS, ON NE
   PEUT PLUS EN SORTIR. Pas de fleche, et le balayage depuis le bord ne
   ramene nulle part dans un onglet sans historique. Un ecran joli mais
   dont on ne revient pas est pire qu'un bouton absent.

   On retire donc l'entree — le bouton — plutot que de laisser quelqu'un
   tomber dans le piege, et on ferme le calque par securite au cas ou un
   autre chemin l'ouvrirait. La television et l'ordinateur gardent tout.
   ===================================================================== */
html.wtv-tactile .pill--trailer { display: none !important; }
html.wtv-tactile #trailer,
html.wtv-tactile .trailer { display: none !important; }

/* =====================================================================
   13. Le choix du profil EN PAYSAGE

   Toutes les regles de la section 1 portent sur `wtv-debout`. Couche,
   l'ecran retombait donc sur le dessin de television : une colonne de
   lignes de 780 px calee a 300 px du bord, prevue pour 1080 px de haut.
   Un telephone en paysage n'offre que 900 unites de hauteur et le focus
   agrandit le visage de 47 % vers le haut — d'ou l'avatar qui montait
   par-dessus « Choisir un profil ».

   On reprend donc le panneau de verre du portrait et on le pose SUR LE
   COTE, puisque c'est la que l'espace manque le moins. Meme materiau,
   meme famille : on doit reconnaitre l'objet d'une orientation a
   l'autre. Seul l'arrondi change de bord.

   Mesures en `--wtv-u`, donc en pixels d'ecran : une vignette doit faire
   la meme taille sous le doigt sur un telephone et sur un iPad, alors
   que la grille, elle, n'est pas reduite du meme facteur.
   ===================================================================== */
html.wtv-tactile:not(.wtv-debout):not(.wtv-pivote) #screen-profiles .profiles__backdrop {
  /* L'affiche passe DERRIERE le panneau au lieu de s'arreter avant lui.
     Sans cela le verre n'a rien a refracter : il ne reste qu'un
     rectangle flou sur du noir, et c'est exactement ce qui faisait
     « fabrique » dans nos premiers essais. */
  width: 100%; right: 0;
}

html.wtv-tactile:not(.wtv-debout):not(.wtv-pivote) #screen-profiles .profiles__shade {
  /* Le voile de television noircit les 25 % de gauche pour y poser du
     texte. Ici le texte est sur du verre : on garde de la matiere
     dessous, sinon le panneau flotte dans le vide. */
  background:
    linear-gradient(90deg,
      rgba(5,5,5,.50) 0%, rgba(5,5,5,.38) 34%, rgba(5,5,5,.22) 56%,
      rgba(5,5,5,.10) 76%, rgba(5,5,5,.06) 100%),
    linear-gradient(0deg, rgba(5,5,5,.34) 0%, rgba(5,5,5,0) 44%);
}

/* LE PANNEAU, colle au bord gauche et arrondi a droite seulement : il
   SORT de l'ecran, il ne flotte pas dedans — comme celui du bas. */
html.wtv-tactile:not(.wtv-debout):not(.wtv-pivote) #screen-profiles .profiles {
  position: absolute;
  top: 0 !important; bottom: 0; left: 0; right: auto;
  /* Une seule colonne : le panneau se resserre, sinon les visages
     flottent au milieu d'une bande vide. */
  width: clamp(calc(186 * var(--wtv-u)), 29%, calc(300 * var(--wtv-u)));
  height: auto !important;
  z-index: 2;
  isolation: isolate;
  box-sizing: border-box;

  display: flex; flex-direction: column; justify-content: center;
  /* L'encoche passe a GAUCHE des qu'on couche l'appareil : sans cette
     reserve, le premier visage se retrouve dessous. */
  padding: calc(18 * var(--wtv-u))
           calc(22 * var(--wtv-u))
           calc(18 * var(--wtv-u))
           calc(22 * var(--wtv-u) + env(safe-area-inset-left) / var(--wtv-echelle, 1));
  border-radius: 0 calc(28 * var(--wtv-u)) calc(28 * var(--wtv-u)) 0;

  background: linear-gradient(118deg,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.05) 44%,
      rgba(255,255,255,.11) 100%);
  border-right: var(--wtv-u) solid rgba(255,255,255,.20);
  box-shadow: calc(14 * var(--wtv-u)) 0 calc(40 * var(--wtv-u)) rgba(0,0,0,.45);

  -webkit-backdrop-filter: blur(calc(20 * var(--wtv-u))) saturate(180%);
          backdrop-filter: blur(calc(20 * var(--wtv-u))) saturate(180%);
}

html.wtv-tactile:not(.wtv-debout):not(.wtv-pivote) #screen-profiles .profiles::before,
html.wtv-tactile:not(.wtv-debout):not(.wtv-pivote) #screen-profiles .profiles::after {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
}

html.wtv-tactile:not(.wtv-debout):not(.wtv-pivote) #screen-profiles .profiles::before {
  z-index: -1;
  /* Plus claire que celle du portrait, et pour une raison precise : ici
     le voile de television assombrit DEJA ce bord. Les deux s'ajoutaient
     et donnaient un rectangle noir — du verre sur du noir n'est plus du
     verre, c'est un aplat. */
  background: rgba(20, 18, 22, .34);
}

/* Les aretes chromatiques. Le liseré irisé vit sur le bord LIBRE — ici
   celui de droite, puisque le gauche est hors de l'ecran. */
html.wtv-tactile:not(.wtv-debout):not(.wtv-pivote) #screen-profiles .profiles::after {
  z-index: 3;
  box-shadow:
    inset calc(-1.6 * var(--wtv-u)) 0 rgba(54, 226, 255, .34),
    inset calc(-1.6 * var(--wtv-u)) calc(-1.4 * var(--wtv-u)) 0 rgba(255, 86, 116, .22),
    inset 0 calc(1.2 * var(--wtv-u)) rgba(255,255,255,.34);
  mix-blend-mode: screen;
}

html.wtv-tactile:not(.wtv-debout):not(.wtv-pivote) #screen-profiles .profiles__eyebrow {
  position: static;
  padding: 0 0 calc(14 * var(--wtv-u));
  font-size: calc(15 * var(--wtv-u)); font-weight: 500;
  color: rgba(255,255,255,.74);
  text-align: center;
}

/* Les visages s'EMPILENT, un par ligne.

   Debout ils vont par trois de front parce que la largeur est la seule
   chose qui ne manque pas. Couche, c'est l'inverse : le panneau est
   etroit et haut, et une colonne s'y lit comme un menu — le pouce
   descend au lieu de balayer.

   Le panneau defile si la maisonnee s'agrandit : cinq entrees tiennent
   encore sur un telephone, au-dela il faut glisser. */
html.wtv-tactile:not(.wtv-debout):not(.wtv-pivote) #screen-profiles .profiles__row {
  position: static;
  width: 100%; height: auto; max-height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(12 * var(--wtv-u));
  padding: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  justify-items: center;
}

/* La case se serre sur la vignette.

   En colonne unique elle prenait toute la largeur du panneau, et le
   crayon — qui se pose par rapport a ELLE — atterrissait a vingt
   centimetres du visage, tout seul dans le vide. */
html.wtv-tactile:not(.wtv-debout):not(.wtv-pivote) #screen-profiles .profile-slot {
  width: 100%; max-width: calc(74 * var(--wtv-u));
  height: auto; margin: 0;
  display: flex; justify-content: center;
}

html.wtv-tactile:not(.wtv-debout):not(.wtv-pivote) #screen-profiles .profile {
  position: static;
  /* Calibre pour que TROIS entrees tiennent sans defilement sur un
     telephone couche : 393 px de haut, moins les marges et le titre,
     laissent environ 324 — soit 100 par entree, visage compris. */
  width: 100%; max-width: calc(74 * var(--wtv-u)); height: auto;
  display: flex; flex-direction: column; align-items: center;
  gap: calc(6 * var(--wtv-u));
  text-align: center;
}

html.wtv-tactile:not(.wtv-debout):not(.wtv-pivote) #screen-profiles .profile__face {
  position: static;
  width: 100%; aspect-ratio: 1 / 1; height: auto;
  border-radius: calc(11 * var(--wtv-u));
  border-width: calc(2 * var(--wtv-u));
  font-size: calc(30 * var(--wtv-u)); line-height: 1;
  display: flex; align-items: center; justify-content: center;
  /* L'agrandissement de 1,47 de la television part du bord gauche et
     deborde du panneau : c'est lui qui mangeait le titre. */
  transform: none !important;
}

html.wtv-tactile:not(.wtv-debout):not(.wtv-pivote) #screen-profiles .profile__name {
  position: static;
  margin: 0; font-size: calc(12 * var(--wtv-u)); font-weight: 600;
  color: #fff !important; opacity: 1 !important;
  transform: none !important;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}

html.wtv-tactile:not(.wtv-debout):not(.wtv-pivote) #screen-profiles .profile.is-focused .profile__face {
  transform: none !important;
  box-shadow: 0 0 0 calc(3 * var(--wtv-u)) #fff,
              0 calc(7 * var(--wtv-u)) calc(20 * var(--wtv-u)) rgba(0,0,0,.5);
}

html.wtv-tactile:not(.wtv-debout):not(.wtv-pivote) #screen-profiles .profile:focus,
html.wtv-tactile:not(.wtv-debout):not(.wtv-pivote) #screen-profiles .profile:focus-visible,
html.wtv-tactile:not(.wtv-debout):not(.wtv-pivote) #screen-profiles .profile__face:focus {
  outline: none !important;
}

/* Le crayon revient DANS le coin du visage, hors du flux : pose a
   gauche comme sur la television, il sortait du panneau. */
html.wtv-tactile:not(.wtv-debout):not(.wtv-pivote) #screen-profiles .profile-edit {
  left: auto; right: calc(3 * var(--wtv-u)); top: calc(3 * var(--wtv-u));
  width: calc(22 * var(--wtv-u)); height: calc(22 * var(--wtv-u));
  opacity: .9; background: rgba(0,0,0,.55);
  border-radius: 50%;
}
html.wtv-tactile:not(.wtv-debout):not(.wtv-pivote) #screen-profiles .profile-edit svg {
  width: calc(14 * var(--wtv-u)); height: calc(14 * var(--wtv-u)); margin: calc(4 * var(--wtv-u));
}

/* Sur une tablette couchee, la meme vignette parait perdue.

   Nos mesures sont en pixels d'ecran pour garder la MEME taille sous le
   doigt partout — c'est juste sur un telephone, ou la hauteur est
   comptee, et trop timide sur un iPad, ou il reste huit cents pixels de
   libre. Le seuil porte sur la hauteur reelle : 393 px pour un
   telephone couche, 820 pour un iPad. Rien entre les deux a departager.

   La requete s'evalue sur l'ecran, pas sur la grille zoomee : le `zoom`
   de la racine ne la touche pas. */
@media (min-height: 620px) {
  html.wtv-tactile:not(.wtv-debout):not(.wtv-pivote) #screen-profiles .profiles__row {
    gap: calc(18 * var(--wtv-u));
  }
  html.wtv-tactile:not(.wtv-debout):not(.wtv-pivote) #screen-profiles .profile-slot {
    max-width: calc(112 * var(--wtv-u));
  }
  html.wtv-tactile:not(.wtv-debout):not(.wtv-pivote) #screen-profiles .profile {
    max-width: calc(112 * var(--wtv-u));
    gap: calc(9 * var(--wtv-u));
  }
  html.wtv-tactile:not(.wtv-debout):not(.wtv-pivote) #screen-profiles .profile__face {
    border-radius: calc(15 * var(--wtv-u));
    font-size: calc(42 * var(--wtv-u));
  }
  html.wtv-tactile:not(.wtv-debout):not(.wtv-pivote) #screen-profiles .profile__name {
    font-size: calc(14 * var(--wtv-u));
  }
  html.wtv-tactile:not(.wtv-debout):not(.wtv-pivote) #screen-profiles .profiles__eyebrow {
    font-size: calc(17 * var(--wtv-u));
    padding-bottom: calc(18 * var(--wtv-u));
  }
  html.wtv-tactile:not(.wtv-debout):not(.wtv-pivote) #screen-profiles .profile-edit {
    width: calc(28 * var(--wtv-u)); height: calc(28 * var(--wtv-u));
  }
  html.wtv-tactile:not(.wtv-debout):not(.wtv-pivote) #screen-profiles .profile-edit svg {
    width: calc(17 * var(--wtv-u)); height: calc(17 * var(--wtv-u));
    margin: calc(5.5 * var(--wtv-u));
  }
}

/* Le nom de chaine, quand aucune image ne l'illustre.

   Il est dessine pour une television : un bloc de 460 px centre par une
   marge negative. Une vignette tactile en fait 245 — le nom depassait
   donc de 107 px de CHAQUE cote, et se lisait « AINE PARLEMEN » pour
   « LA CHAÎNE PARLEMENTAIRE », « ANAL+ GRAND ECR » pour Canal+ Grand
   Ecran. Coupe aux deux bouts, donc illisible, et sans le moindre point
   de suspension pour prevenir. */
html.wtv-tactile .chan__logo--text {
  left: 5%; width: 90%; height: auto;
  margin: 0; top: 50%;
  -webkit-transform: translateY(-50%); transform: translateY(-50%);
  font-size: calc(13 * var(--wtv-u)); line-height: 1.22;
  text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =====================================================================
   14. LES BOUTONS D'UNE FICHE, au doigt

   Ils s'alignent tous sur une meme ligne, a la file, de la meme taille :
   « Lire », « Reprendre depuis le debut », « Retirer de la reprise »,
   « Ma liste », « J'aime », « J'adore ». Sur une television parcourue a
   la telecommande c'est juste — le focus passe de l'un a l'autre et rien
   ne prime. Au doigt, non : neuf fois sur dix on vient pour LIRE, et
   cette action se cherche au milieu des autres.

   On donne donc au premier bouton toute la largeur. Il est toujours
   l'action principale — `app.js` pose « Lire » ou « Reprendre 1 h 12 »
   en tete, et le reste apres. Les autres se partagent la ligne suivante.

   Rien de tout cela ne touche a `app.js` : c'est la MISE EN PAGE qui
   change, pas ce qui est construit. La television garde sa file.
   ===================================================================== */
html.wtv-tactile #detail-actions {
  width: auto !important;
  margin-bottom: 0;
  display: flex; flex-wrap: wrap;
  gap: calc(9 * var(--wtv-u));
  align-items: stretch;
}

/* LE BOUTON PRINCIPAL. Pleine largeur, centre, plus haut : c'est la
   seule chose qu'on vient faire. */
html.wtv-tactile #detail-actions > :first-child {
  flex: 0 0 100%;
  margin: 0 !important;
  display: flex; align-items: center; justify-content: center;
  padding: calc(14 * var(--wtv-u)) calc(18 * var(--wtv-u));
  font-size: calc(16 * var(--wtv-u));
  font-weight: 600;
  background: #fff; color: #000; border-color: #fff;
}
html.wtv-tactile #detail-actions > :first-child .pill__ico {
  border-color: currentColor;
  width: calc(19 * var(--wtv-u)); height: calc(19 * var(--wtv-u));
  margin-right: calc(9 * var(--wtv-u));
}
html.wtv-tactile #detail-actions > :first-child:active {
  transform: scale(.985);
}

/* LES SECONDAIRES. Elles se partagent la place, sur une ou deux lignes
   selon leur nombre — deux quand il y a une reprise a gerer. */
html.wtv-tactile #detail-actions > :not(:first-child) {
  flex: 1 1 auto;
  min-width: calc(96 * var(--wtv-u));
  margin: 0 !important;
  display: flex; align-items: center; justify-content: center;
  padding: calc(11 * var(--wtv-u)) calc(12 * var(--wtv-u));
  font-size: calc(12.5 * var(--wtv-u));
  white-space: nowrap;
}
html.wtv-tactile #detail-actions > :not(:first-child) .pill__ico {
  width: calc(15 * var(--wtv-u)); height: calc(15 * var(--wtv-u));
  margin-right: calc(7 * var(--wtv-u));
}
html.wtv-tactile #detail-actions > :not(:first-child) span {
  overflow: hidden; text-overflow: ellipsis;
}

/* Le focus de la television dessine un double halo tres large, pense
   pour etre vu a trois metres. Au doigt il n'a pas lieu d'etre, et il
   debordait des boutons maintenant colles les uns aux autres. */
html.wtv-tactile #detail-actions .pill.is-focused {
  box-shadow: none;
}

/* =====================================================================
   15. LA FICHE, REORGANISEE POUR LE DOIGT

   Elle empilait : titre, puces, description, puis TOUS les boutons a la
   file — « Lecture », « Reprendre depuis le debut », « Retirer de la
   reprise », « Ma liste », « J'aime », « J'adore ». Six pastilles de
   meme taille, ou se melangeaient deux choses qui n'ont rien a voir :
   ce qui LANCE le film, et ce qu'on PENSE du film.

   On les separe. Le bouton qui lance passe AVANT la description, seul et
   en pleine largeur — c'est la raison pour laquelle on a ouvert la
   fiche. Les autres descendent en dessous, en icone surmontant son mot,
   sans chrome de pastille : la meme grammaire que l'application Netflix,
   et qui tient sur une ligne au lieu de deux.

   Tout passe par l'ORDRE d'affichage, pas par le balisage : `app.js`
   construit exactement la meme chose, la television n'en voit rien.
   ===================================================================== */
html.wtv-tactile #screen-detail .detail {
  display: flex;
  flex-direction: column;
}

html.wtv-tactile #screen-detail .detail__logo  { order: 1; }
html.wtv-tactile #screen-detail .detail__title { order: 2; }
html.wtv-tactile #screen-detail .chips         { order: 3; }
html.wtv-tactile #screen-detail #detail-actions{ order: 4; }
html.wtv-tactile #screen-detail .plotbox       { order: 5; margin-top: calc(14 * var(--wtv-u)); }
html.wtv-tactile #screen-detail .seasonshost   { order: 6; }
html.wtv-tactile #screen-detail #episodes      { order: 7; }
html.wtv-tactile #screen-detail #detail-extra  { order: 8; }

/* LES SECONDAIRES deviennent des icones avec leur mot dessous.

   Une pastille bordee appelle l'appui ; ces actions-la ne le meritent
   pas autant que « Lecture ». En retirant le fond et le cadre, elles
   cessent de lui disputer l'attention — et on en loge six sur une ligne
   la ou trois tenaient a peine. */
html.wtv-tactile #detail-actions > :not(:first-child) {
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  gap: calc(5 * var(--wtv-u));
  background: transparent !important;
  border-color: transparent !important;
  padding: calc(10 * var(--wtv-u)) calc(4 * var(--wtv-u));
  font-size: calc(11 * var(--wtv-u));
  font-weight: 500;
  color: rgba(255,255,255,.88);
}
html.wtv-tactile #detail-actions > :not(:first-child) .pill__ico {
  width: calc(22 * var(--wtv-u)); height: calc(22 * var(--wtv-u));
  margin: 0;
  border-width: calc(1.6 * var(--wtv-u));
}
html.wtv-tactile #detail-actions > :not(:first-child) span {
  white-space: normal;
  text-align: center;
  line-height: 1.15;
}
html.wtv-tactile #detail-actions > :not(:first-child).is-on {
  background: transparent !important;
  color: #fff;
}
html.wtv-tactile #detail-actions > :not(:first-child):active {
  transform: scale(.92);
}

/* La description gagne a respirer maintenant qu'elle n'est plus coincee
   entre le titre et six boutons. */
html.wtv-tactile #screen-detail .detail__plot {
  line-height: 1.45;
}

/* =====================================================================
   16. LA BANNIERE D'ACCUEIL, en vitrine

   Elle fait 600 unites de haut — une mesure pensee pour une grille de
   1920. Debout, la page est reduite au cinquieme : ces 600 unites
   deviennent 134 pixels d'ecran. D'ou une vedette timide, large et
   basse, quand celle de Netflix occupe la moitie du telephone.

   On la mesure donc en pixels d'ecran, comme tout ce qui doit avoir la
   meme taille sous l'oeil quel que soit l'appareil. Et le voile passe a
   la VERTICALE : celui d'origine noircit la gauche pour y poser du texte
   a cote de l'image, disposition de television. Debout, le texte va
   dessous, donc l'ombre aussi.
   ===================================================================== */
html.wtv-debout #screen-home .billboard {
  height: calc(430 * var(--wtv-u));
  margin: calc(8 * var(--wtv-u)) calc(12 * var(--wtv-u)) 0;
  border-radius: calc(16 * var(--wtv-u));
}

html.wtv-debout #screen-home .billboard__art {
  background-position: center 18%;
}

html.wtv-debout #screen-home .billboard__scrim {
  background: linear-gradient(0deg,
      rgba(0,0,0,.94) 0%,
      rgba(0,0,0,.66) 22%,
      rgba(0,0,0,.18) 48%,
      rgba(0,0,0,0) 70%);
}

html.wtv-debout #screen-home .billboard__body {
  left: calc(16 * var(--wtv-u));
  right: calc(16 * var(--wtv-u));
  bottom: calc(16 * var(--wtv-u));
  width: auto;
  text-align: center;
}

html.wtv-debout #screen-home .billboard__title {
  font-size: calc(30 * var(--wtv-u));
  line-height: 1.04;
}
html.wtv-debout #screen-home .billboard__meta {
  font-size: calc(12 * var(--wtv-u));
  margin-top: calc(7 * var(--wtv-u));
}
/* Le resume tient deja dans la fiche : sous l'affiche il ne fait
   qu'ecraser le titre. */
html.wtv-debout #screen-home .billboard__plot { display: none; }

/* DEUX BOUTONS PLEINE LARGEUR, l'un sous l'autre.

   Cote a cote ils faisaient chacun la moitie d'un telephone, donc deux
   cibles etroites. L'un sur l'autre, chacun a toute la largeur — et le
   blanc dit lequel des deux on vient chercher. */
html.wtv-debout #screen-home .billboard__actions {
  margin-top: calc(14 * var(--wtv-u));
  white-space: normal;
  display: flex; flex-direction: column;
  gap: calc(8 * var(--wtv-u));
}
html.wtv-debout #screen-home .billboard__actions .btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; margin: 0 !important;
  padding: calc(13 * var(--wtv-u)) calc(16 * var(--wtv-u));
  font-size: calc(15 * var(--wtv-u));
  font-weight: 600;
  border-radius: calc(10 * var(--wtv-u));
}
html.wtv-debout #screen-home .billboard__actions .btn:not(.btn--primary) {
  background: rgba(108, 108, 116, .62);
  border-color: transparent;
  color: #fff;
}
html.wtv-debout #screen-home .billboard__actions .btn:active { transform: scale(.98); }

/* =====================================================================
   17. LES POUCES

   « J'aime » et « J'adore » etaient un emoji pouce et un emoji coeur,
   et surtout : rien ne disait qu'on venait d'appuyer. On relachait, le
   mot changeait peut-etre, et c'etait tout.

   Deux gestes, une seule famille de signes : UN pouce pour j'aime, DEUX
   pouces pour j'adore. La difference se lit d'un coup d'oeil, sans
   avoir a lire le mot dessous — ce qu'un pouce et un coeur, qui
   n'appartiennent pas au meme vocabulaire, ne permettaient pas.

   Les silhouettes sont des masques SVG en ligne, pas des images : elles
   prennent la couleur du texte, donc l'etat se peint sans changer de
   fichier. `app.js` continue de poser ses emoji, qu'on masque.
   ===================================================================== */
html.wtv-tactile #detail-actions .pill--like .pill__ico,
html.wtv-tactile #detail-actions .pill--love .pill__ico {
  font-size: 0;                 /* l'emoji d'origine disparait */
  border: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain;    mask-size: contain;
  transition: background-color .2s ease, transform .3s var(--wtv-ressort, ease);
}

/* UN pouce. */
html.wtv-tactile #detail-actions .pill--like .pill__ico {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 10h4v11H2zM8.2 10.2l4.1-7.4a1.6 1.6 0 0 1 3 .8v4.5h5.1a1.9 1.9 0 0 1 1.85 2.35l-1.6 7.3A2.3 2.3 0 0 1 18.4 21H8.2z' fill='black'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 10h4v11H2zM8.2 10.2l4.1-7.4a1.6 1.6 0 0 1 3 .8v4.5h5.1a1.9 1.9 0 0 1 1.85 2.35l-1.6 7.3A2.3 2.3 0 0 1 18.4 21H8.2z' fill='black'/%3E%3C/svg%3E");
}

/* DEUX pouces, decales : le second legerement plus haut et plus petit,
   comme une main qui suit la premiere. */
html.wtv-tactile #detail-actions .pill--love .pill__ico {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 24'%3E%3Cg fill='black'%3E%3Cpath d='M1 12h3v9H1zM5.6 12.1l3.2-5.8a1.25 1.25 0 0 1 2.35.63V10.4h4a1.5 1.5 0 0 1 1.45 1.85l-1.25 5.7A1.8 1.8 0 0 1 13.6 19.4H5.6z'/%3E%3Cpath d='M15.4 9h3v9h-3zM20 9.1l3.2-5.8a1.25 1.25 0 0 1 2.35.63V7.4h4a1.5 1.5 0 0 1 1.45 1.85l-1.25 5.7A1.8 1.8 0 0 1 28 16.4h-8z'/%3E%3C/g%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 24'%3E%3Cg fill='black'%3E%3Cpath d='M1 12h3v9H1zM5.6 12.1l3.2-5.8a1.25 1.25 0 0 1 2.35.63V10.4h4a1.5 1.5 0 0 1 1.45 1.85l-1.25 5.7A1.8 1.8 0 0 1 13.6 19.4H5.6z'/%3E%3Cpath d='M15.4 9h3v9h-3zM20 9.1l3.2-5.8a1.25 1.25 0 0 1 2.35.63V7.4h4a1.5 1.5 0 0 1 1.45 1.85l-1.25 5.7A1.8 1.8 0 0 1 28 16.4h-8z'/%3E%3C/g%3E%3C/svg%3E");
  width: calc(27 * var(--wtv-u));
}

/* L'ETAT, enfin visible. Blanc pour j'aime, ROUGE pour j'adore — c'est
   la couleur de l'application, et elle ne sert qu'a ce qui compte. */
html.wtv-tactile #detail-actions .pill--like.is-on .pill__ico { background-color: #fff; }
html.wtv-tactile #detail-actions .pill--love.is-on .pill__ico { background-color: #E50914; }
html.wtv-tactile #detail-actions .pill--love.is-on { color: #fff; }
html.wtv-tactile #detail-actions .pill--like:not(.is-on) .pill__ico,
html.wtv-tactile #detail-actions .pill--love:not(.is-on) .pill__ico {
  background-color: rgba(255,255,255,.72);
}

/* LE GESTE. Le pouce se leve : il part vers le bas, depasse, revient.
   C'est le ressort calcule, pas une courbe approchee. */
@media (prefers-reduced-motion: no-preference) {
  html.wtv-tactile #detail-actions .pill--like.is-on .pill__ico {
    animation: wtv-pouce .5s var(--wtv-ressort, ease) both;
  }
  html.wtv-tactile #detail-actions .pill--love.is-on .pill__ico {
    animation: wtv-pouces .62s var(--wtv-ressort, ease) both;
  }
  @keyframes wtv-pouce {
    from { transform: translateY(5px) rotate(-16deg) scale(.82); }
    to   { transform: none; }
  }
  @keyframes wtv-pouces {
    from { transform: translateY(6px) rotate(-20deg) scale(.74); }
    to   { transform: none; }
  }

  /* LA GERBE, sur « J'adore » seulement.

     Six points projetes depuis le centre, une seule fois. Ce sont des
     ombres portees sur un point unique — aucun element supplementaire
     dans la page, et donc rien a nettoyer ensuite. */
  html.wtv-tactile #detail-actions .pill--love.is-on .pill__ico::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: calc(3 * var(--wtv-u)); height: calc(3 * var(--wtv-u));
    margin: calc(-1.5 * var(--wtv-u)) 0 0 calc(-1.5 * var(--wtv-u));
    border-radius: 50%;
    background: transparent;
    animation: wtv-gerbe .62s ease-out .06s both;
    pointer-events: none;
  }
  @keyframes wtv-gerbe {
    from {
      opacity: 1;
      box-shadow: 0 0 0 #E50914, 0 0 0 #ff5f6d, 0 0 0 #ffd166,
                  0 0 0 #E50914, 0 0 0 #ff5f6d, 0 0 0 #ffd166;
    }
    to {
      opacity: 0;
      box-shadow:
        calc(14 * var(--wtv-u)) calc(-10 * var(--wtv-u)) 0 #E50914,
        calc(-15 * var(--wtv-u)) calc(-8 * var(--wtv-u)) 0 #ff5f6d,
        calc(4 * var(--wtv-u)) calc(-18 * var(--wtv-u)) 0 #ffd166,
        calc(-9 * var(--wtv-u)) calc(-16 * var(--wtv-u)) 0 #E50914,
        calc(17 * var(--wtv-u)) calc(2 * var(--wtv-u)) 0 #ff5f6d,
        calc(-17 * var(--wtv-u)) calc(3 * var(--wtv-u)) 0 #ffd166;
    }
  }
}

/* `position: relative` pour que la gerbe se cale sur l'icone, et non
   sur le bouton entier. */
html.wtv-tactile #detail-actions .pill--love .pill__ico { position: relative; }

/* =====================================================================
   18. « MA LISTE » : une coche, et du rouge

   Elle gardait son « + » meme une fois le titre ajoute. Le mot dessous
   changeait, mais le signe, lui, disait toujours « ajouter » — donc
   l'inverse de l'etat reel. Une coche dit « c'est fait », et le rouge
   la range dans la meme famille que « J'adore » : ce sont les deux
   seules choses qu'on marque comme siennes.
   ===================================================================== */
html.wtv-tactile #detail-actions .pill--fav .pill__ico {
  border: 0;
  background-color: rgba(255,255,255,.72);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain;    mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v18h-2z' fill='black'/%3E%3Cpath d='M3 11h18v2H3z' fill='black'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v18h-2z' fill='black'/%3E%3Cpath d='M3 11h18v2H3z' fill='black'/%3E%3C/svg%3E");
  transition: background-color .2s ease, transform .3s var(--wtv-ressort, ease);
}
/* Les traits du « + » etaient dessines par des pseudo-elements : ils
   survivraient au masque et se superposeraient a la coche. */
html.wtv-tactile #detail-actions .pill--fav .pill__ico::before,
html.wtv-tactile #detail-actions .pill--fav .pill__ico::after { display: none; }

html.wtv-tactile #detail-actions .pill--fav.is-on .pill__ico {
  background-color: #E50914;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.3 5.7 9.3 16.7l-5.6-5.6 1.8-1.8 3.8 3.8 9.2-9.2z' fill='black'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.3 5.7 9.3 16.7l-5.6-5.6 1.8-1.8 3.8 3.8 9.2-9.2z' fill='black'/%3E%3C/svg%3E");
}
html.wtv-tactile #detail-actions .pill--fav.is-on { color: #fff; }

@media (prefers-reduced-motion: no-preference) {
  html.wtv-tactile #detail-actions .pill--fav.is-on .pill__ico {
    animation: wtv-coche .5s var(--wtv-ressort, ease) both;
  }
  @keyframes wtv-coche {
    from { transform: scale(.55) rotate(-12deg); }
    to   { transform: none; }
  }
}

/* =====================================================================
   19. L'AURORE derriere la vedette

   Un degrade conique qui tourne tres lentement, floute, derriere la
   banniere. Ce n'est possible que depuis `@property` : une couleur ou
   un angle DANS un degrade ne s'animait pas — le navigateur ne savait
   pas quoi interpoler entre deux images. En declarant le type de la
   variable, il le sait.

   PRECAUTION : la banniere rogne ce qui depasse (`overflow: hidden`),
   sinon ses coins arrondis ne tiendraient pas sur l'image. La lueur
   serait donc invisible. On deplace donc le rognage sur l'image
   elle-meme, et la banniere laisse deborder.

   L'animation ne tourne que tant que l'accueil est AFFICHE : des qu'on
   ouvre une fiche, l'ecran passe en `display: none` et le navigateur la
   suspend de lui-meme. C'est ce qui rend acceptable une animation sans
   fin sur un telephone.
   ===================================================================== */
@property --wtv-aurore {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@media (prefers-reduced-motion: no-preference) {
  html.wtv-tactile #screen-home .billboard { overflow: visible; }
  html.wtv-tactile #screen-home .billboard__art,
  html.wtv-tactile #screen-home .billboard__scrim { border-radius: inherit; }

  html.wtv-tactile #screen-home .billboard::before {
    content: '';
    position: absolute;
    inset: calc(-18 * var(--wtv-u));
    border-radius: inherit;
    z-index: -1;
    background: conic-gradient(from var(--wtv-aurore),
        rgba(229, 9, 20, .60),
        rgba(126, 58, 214, .52),
        rgba(0, 148, 214, .44),
        rgba(229, 9, 20, .60));
    filter: blur(calc(22 * var(--wtv-u)));
    opacity: .55;
    animation: wtv-aurore 28s linear infinite;
    pointer-events: none;
  }
  @keyframes wtv-aurore { to { --wtv-aurore: 360deg; } }
}

/* =====================================================================
   20. LES SQUELETTES

   Une vignette dont l'affiche n'est pas encore arrivee est un
   rectangle noir. Sur une rangee entiere, ca fait un trou — et on ne
   sait pas si ca charge ou si c'est vide.

   On y met une lueur qui balaie. L'astuce tient en une ligne : le
   squelette est dessine par un `::before`, et il DISPARAIT des que
   l'attribut `style` de la vignette contient une adresse d'image. C'est
   `app.js` qui la pose, en style en ligne — on n'a donc besoin ni d'une
   classe supplementaire, ni d'un signal : le selecteur lit ce qui est
   deja la.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html.wtv-tactile .card__art::before,
  html.wtv-tactile .chan__art::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(100deg,
        rgba(255,255,255,0)   38%,
        rgba(255,255,255,.07) 50%,
        rgba(255,255,255,0)   62%),
      #17171a;
    background-size: 280% 100%, 100% 100%;
    animation: wtv-balaie 1.6s linear infinite;
    pointer-events: none;
  }
  html.wtv-tactile .card__art[style*="url("]::before,
  html.wtv-tactile .chan__art[style*="url("]::before,
  html.wtv-tactile .chan__art.has-art::before { display: none; }

  @keyframes wtv-balaie {
    from { background-position: 140% 0, 0 0; }
    to   { background-position: -40% 0, 0 0; }
  }
}