/* =====================================================================
   WTV web — commandes tactiles du lecteur

   L'interface d'origine est faite pour une télécommande : elle affiche
   « OK pause · ◀ ▶ avance · ▲ options · Retour quitte ». Sur un iPad ces
   indications ne veulent rien dire et rien n'est touchable.

   On pose donc une surface de commandes par-dessus la vidéo, et on
   masque l'OSD d'origine. Elle n'apparaît QUE sur un appareil tactile —
   voir la condition dans tactile.js — le pointeur garde souris.js.

   Repère : tout est dimensionné en pixels de la grille 1920×1080, comme
   le reste de l'application. `echelle.js` met le tout à l'échelle de
   l'écran, donc les tailles ci-dessous sont grandes à dessein.
   ===================================================================== */

/* L'OSD d'origine parle de télécommande : on le retire du tactile. */
html.wtv-tactile.is-playing #osd { display: none !important; }

#wtv-tac {
  position: absolute; inset: 0; z-index: 60;
  display: none; opacity: 0;
  transition: opacity .22s ease;
  font: 400 26px/1.3 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #fff;
  /* Un voile très léger : on doit continuer de voir le film. */
  background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.15) 22%,
                              rgba(0,0,0,.15) 62%, rgba(0,0,0,.82) 100%);
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
}
html.wtv-tactile.is-playing #wtv-tac { display: block; }
#wtv-tac.is-on { opacity: 1; }

/* ---- Bandeau haut ---- */
#wtv-tac .tac__haut {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 28px;
  padding: 44px 56px 0;
}
#wtv-tac .tac__titre {
  flex: 1; font-size: 34px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- Rangée centrale : reculer / lire / avancer ---- */
#wtv-tac .tac__centre {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center; gap: 150px;
}

/* ---- Bas : barre, temps, options ---- */
#wtv-tac .tac__bas {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 56px 44px;
}
#wtv-tac .tac__piste {
  position: relative; height: 56px;       /* zone TOUCHABLE, large */
  display: flex; align-items: center; cursor: pointer;
}
#wtv-tac .tac__rail {
  position: relative; width: 100%; height: 8px; border-radius: 4px;
  background: rgba(255,255,255,.28);
}
#wtv-tac .tac__fait {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: #e50914; border-radius: 4px; width: 0;
}
#wtv-tac .tac__poignee {
  position: absolute; top: 50%; left: 0;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; background: #e50914;
  box-shadow: 0 2px 10px rgba(0,0,0,.6);
}
#wtv-tac .tac__temps {
  display: flex; justify-content: space-between;
  font-size: 24px; opacity: .92; margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
/* Un seul bouton, pousse a droite : il ne coupe plus le bas de l'image,
   et l'oeil le trouve la ou Netflix l'a mis. */
#wtv-tac .tac__options {
  display: flex; justify-content: flex-end; margin-top: 22px;
}

/* ---- Boutons ---- */
#wtv-tac .tacb {
  display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  background: none; border: 0; color: #fff; font: inherit;
  padding: 14px; border-radius: 16px; cursor: pointer;
  min-width: 88px; min-height: 88px;       /* cible tactile confortable */
}
#wtv-tac .tacb:active { background: rgba(255,255,255,.16); }
#wtv-tac .tacb svg { width: 52px; height: 52px; fill: currentColor; flex: none; }
#wtv-tac .tacb--gros svg { width: 112px; height: 112px; }
#wtv-tac .tacb--texte { font-size: 26px; font-weight: 600; }
#wtv-tac .tac__options .tacb--texte svg { width: 40px; height: 40px; }

/* Le repère « 10 » posé dans la flèche de saut. */
#wtv-tac .tacb--saut { position: relative; }
#wtv-tac .tacb--saut b {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; padding-top: 6px;
}

/* ---- Panneau des réglages ---- */
#wtv-tac .tac__panneau {
  position: absolute; right: 56px; bottom: 210px;
  min-width: 460px; max-height: 620px; overflow-y: auto;
  background: rgba(22,22,26,.97); border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px; padding: 16px; display: none;
  box-shadow: 0 18px 60px rgba(0,0,0,.6);
}
#wtv-tac .tac__panneau.is-on { display: block; }
#wtv-tac .tac__panneau h4 {
  margin: 10px 14px 8px; font-size: 20px; letter-spacing: .12em;
  text-transform: uppercase; opacity: .55; font-weight: 600;
}
#wtv-tac .tac__choix {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; color: #fff; font: inherit; font-size: 26px;
  padding: 18px 20px; border-radius: 14px; cursor: pointer;
}
#wtv-tac .tac__choix:active { background: rgba(255,255,255,.14); }
#wtv-tac .tac__choix.is-pris { background: rgba(255,255,255,.12); font-weight: 600; }
#wtv-tac .tac__choix.is-pris::after { content: ' ✓'; opacity: .8; }

/* ---- Repère de saut au double-appui ---- */
#wtv-tac .tac__eclair {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 300px; height: 300px; border-radius: 50%;
  background: rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; font-weight: 700; opacity: 0;
  transition: opacity .25s ease; pointer-events: none;
}
#wtv-tac .tac__eclair.g { left: 8%; }
#wtv-tac .tac__eclair.d { right: 8%; }
#wtv-tac .tac__eclair.is-on { opacity: 1; }


/* ---- Paysage force pendant la lecture --------------------------------
   iOS ne permet pas de verrouiller l'orientation (verifie 16/09/2026 :
   `screen.orientation.lock` est absent de Safari, et le manifeste est
   ignore). On fait donc pivoter la page nous-memes, uniquement pendant
   un film. `echelle.js` pose la classe et les deux mesures.

   Le pivot part du coin haut-gauche puis on decale d'une largeur
   d'ecran : c'est ce qui ramene le contenu pile dans le cadre. */
/* Le cadre pivote est plus large que l'ecran dans le sens d'origine :
   sans ce garde, un defilement horizontal apparait sous le doigt. */
html.wtv-pivote { overflow: hidden; }

html.wtv-pivote body {
  position: absolute;
  top: 0; left: var(--wtv-pivot-h);
  width: var(--wtv-pivot-l);
  height: var(--wtv-pivot-h);
  transform: rotate(90deg);
  transform-origin: 0 0;
  overflow: hidden;
}