/* Mise en page TELEPHONE et fenetre etroite.
 *
 * Chargee par index.html avec media="(max-width: 900px)" : une TV, qui affiche
 * un canevas de 1920 px, ne la declenche JAMAIS. Le rendu webOS et Android TV
 * ne peut donc pas en etre affecte -- c'est la raison d'en faire une feuille a
 * part plutot que des @media dans app.css.
 *
 * Aucune contrainte Chromium 79 ici (pas de TV) : aspect-ratio, gap sur flex,
 * env(safe-area-inset-*) et dvh sont disponibles sur les navigateurs mobiles
 * vises. Ce fichier ne surcharge que la MISE EN PAGE ; les composants, les
 * couleurs et le comportement restent ceux de app.css.
 *
 * Principe : le rail vertical devient une barre d'onglets en bas, au pouce ;
 * les colonnes de categories deviennent une rangee de puces qui defile a
 * l'horizontale ; les grilles calculent leur nombre de colonnes. */

:root {
  --safe: 12px;
  --ring: 6px;
  --rail-w: 0px;
  --tabbar-h: 58px;
  --tabbar-total: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
}

html, body {
  width: 100%;
  height: 100%;
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
  /* Le tap ne doit pas faire clignoter un fond gris sur chaque bouton. */
  -webkit-tap-highlight-color: transparent;
}
#app { width: 100%; height: 100%; }
.view-host { width: 100%; height: 100%; height: 100dvh; transform: none; }

/* Toutes les vues sont figees a 1080 px de haut dans app.css. */
.home, .live, .organise, .guide, .catalog, .search, .login, .settings,
.shell, .shell-main {
  height: 100%;
}
.detail { height: 100%; padding: var(--safe); padding-bottom: calc(var(--tabbar-total) + var(--safe)); }

/* L'effet de mise en avant au focus est pense pour la telecommande : au doigt,
   il fait sauter la tuile sous le pouce. */
.tile.is-focused { transform: none; }

/* ------------------------------------------------------------------ *
 * Rail -> barre d'onglets
 * ------------------------------------------------------------------ */

.shell { padding-left: 0; padding-bottom: var(--tabbar-total); }
.shell-main::after { display: none; }

.rail,
.rail:focus-within,
.rail.is-open {
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: var(--tabbar-total);
  flex-direction: row;
  align-items: stretch;
  justify-content: space-around;
  gap: 0;
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  background: #151830;
  border-top: 1px solid var(--line);
  box-shadow: none;
}
.rail-sep { display: none; }
.rail-foot { display: contents; }
.rail-item,
.rail:focus-within .rail-item,
.rail.is-open .rail-item {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  height: auto;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 6px 2px 4px;
  font-size: 11px;
}
.rail-icon { flex: 0 0 24px; width: 24px; height: 24px; }
.rail-icon svg { width: 24px; height: 24px; }
.rail-label,
.rail:focus-within .rail-label,
.rail.is-open .rail-label {
  opacity: 1;
  font-size: 11px;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Accueil sans compte ni source : pas de barre d'onglets, donc pas de place a lui
   reserver en bas. */
.shell.no-rail { padding-bottom: 0; }

/* ------------------------------------------------------------------ *
 * En-tetes
 * ------------------------------------------------------------------ */

.sub-head,
.shell .sub-head,
.catalog .sub-head,
.live .sub-head {
  padding: calc(env(safe-area-inset-top, 0px) + 10px) var(--safe) 6px;
}
.sub-head h1 { font-size: 22px; }
/* Les aides de touches (Rouge, Jaune...) n'ont pas de sens au doigt. */
.sub-hints { display: none; }

/* ------------------------------------------------------------------ *
 * Categories : colonne -> rangee de puces
 * ------------------------------------------------------------------ */

.catalog-body,
.live-body {
  flex-direction: column;
  padding: 0;
}
.cat-pane {
  flex: 0 0 auto;
  margin: 0;
  display: flex;
  flex-direction: row;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px var(--safe) 10px;
  border-right: 0;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cat-pane::-webkit-scrollbar { display: none; }
.cat {
  flex: 0 0 auto;
  width: auto;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--panel);
  font-size: 14px;
  white-space: nowrap;
}
.cat::before { display: none; }
.cat.is-active { background: var(--accent-deep); color: #fff; }
.cat-name { flex: 0 0 auto; }
.cat-count { display: none; }

/* ------------------------------------------------------------------ *
 * Grilles Films / Series
 * ------------------------------------------------------------------ */

.catalog-resume .row { margin-bottom: 8px; }
.catalog-resume .tile,
.row-strip.is-wide .tile { flex-basis: 220px; width: 220px; height: 124px; }
.row { margin-bottom: 18px; }
.row-strip { gap: 10px; padding-left: var(--safe); padding-right: var(--safe); }

/* min-height: 0 -- en colonne, `flex: 1` sans lui laisse la grille prendre la
   hauteur de TOUT son contenu : elle ne defilait plus jamais. */
.catalog-grid, .chan-pane { min-height: 0; }
.catalog-grid {
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
  padding: 10px var(--safe) 16px;
}
.catalog-grid .tile { height: auto; aspect-ratio: 2 / 3; }
/* Une tuile en aspect-ratio dont tout le contenu est en position absolue
   n'impose AUCUNE hauteur minimale a sa rangee : des que la grille depassait
   l'ecran, le navigateur ecrasait les rangees a ~14 px et les tuiles se
   chevauchaient. Invisible avec 12 films, flagrant avec un vrai catalogue.
   max-content fige chaque rangee a la hauteur reelle de ses tuiles. */
.catalog-grid { grid-auto-rows: max-content; }
.tile-meta { padding: 8px 8px 9px; }
.tile-title { font-size: 13px; line-height: 1.25; }
.tile-sub { margin-top: 2px; font-size: 11px; }
/* Le defilement du titre au focus est un artifice de telecommande ; au doigt,
   il decalait le premier titre hors de sa tuile. */
.marquee-text.is-scrolling { display: -webkit-box; transform: none; animation: none; }

/* ------------------------------------------------------------------ *
 * TV : liste des chaines pleine largeur
 * ------------------------------------------------------------------ */

/* « Maintenant / Ensuite » occupe un tiers d'ecran de TV : sur un telephone,
   le programme en cours est deja sur chaque ligne de chaine. */
.next-pane { display: none; }
.chan-pane { padding: 4px 8px 12px; }
.chan { gap: 10px; padding: 8px 6px; margin-bottom: 2px; }
.chan.is-focused { transform: none; }
.chan-num { flex: 0 0 26px; font-size: 13px; }
.chan-logo { flex: 0 0 52px; width: 52px; height: 32px; }
.chan-label { font-size: 15px; }
.chan-prog { margin-top: 2px; font-size: 13px; }
.chan-time { gap: 8px; margin-top: 4px; font-size: 12px; }
.chan-bar { flex: 1 1 auto; max-width: 140px; height: 3px; }
.chan .tag { flex: 0 0 auto; margin-left: 6px; padding: 2px 6px; font-size: 10px; white-space: nowrap; }

/* L'anneau de focus suit la telecommande. Au doigt, il restait colle sur la
   premiere ligne comme une selection que personne n'a faite. On le garde au
   clavier d'un ordinateur (pas de .is-touch-layout). */
.is-touch-layout [data-focusable].is-focused::after,
.is-touch-layout .chan.is-focused::after { display: none; }

/* ------------------------------------------------------------------ *
 * Fiche detaillee : affiche au-dessus, texte dessous
 * ------------------------------------------------------------------ */

.detail-head { flex-direction: column; gap: 16px; margin-bottom: 18px; }
.detail-poster { flex: 0 0 auto; width: 46vw; max-width: 200px; height: auto; aspect-ratio: 2 / 3; }
.detail-meta h1 { margin-bottom: 8px; font-size: 24px; }
.detail-actions { gap: 10px; margin-top: 14px; }

/* ------------------------------------------------------------------ *
 * Reglages
 * ------------------------------------------------------------------ */

.settings-body {
  margin-left: 0;
  padding: 4px var(--safe) 20px;
  max-width: none;
}
.settings-section { margin: 22px 0 8px; font-size: 12px; }
.set-row { gap: 12px; padding: 12px 14px; margin-bottom: 6px; }
.set-label { min-width: 0; font-size: 15px; }
/* Une valeur longue (« Automatique (HLS si disponible) ») ne doit pas pousser
   la ligne hors de l'ecran : elle se tronque, le libelle garde sa place. */
.set-value {
  flex: 0 1 auto;
  max-width: 48%;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.set-chevron { font-size: 18px; }
.settings .hint { padding: 0 4px; font-size: 13px; }

/* ------------------------------------------------------------------ *
 * Recherche et formulaires
 * ------------------------------------------------------------------ */

.search-bar { gap: 10px; padding: 0 var(--safe) 10px; max-width: none; }
.search-bar .field { margin-bottom: 0; }
.btn-mic { flex: 0 0 44px; width: 44px; height: 44px; }
.btn-mic svg { width: 20px; height: 20px; }
.field-label { font-size: 12px; }
/* 16 px minimum : en dessous, Safari iOS zoome sur le champ au focus. */
.input { font-size: 16px; padding: 10px 12px; }
.search-results { padding: 0 var(--safe) 16px; }

/* Les notifications passaient sous la barre d'onglets. */
.toast { bottom: calc(var(--tabbar-total) + 10px); max-width: calc(100% - 2 * var(--safe)); padding: 10px 16px; font-size: 14px; }

/* ------------------------------------------------------------------ *
 * Compte, accueil, boutons
 * ------------------------------------------------------------------ */

/* margin:auto dans une colonne flex fait prendre au corps la largeur de son
   contenu (jusqu'a 720 px) au lieu de celle de l'ecran : tout debordait. */
.settings.is-welcome .settings-body { width: 100%; max-width: none; margin: 0; }
.account-brand { margin: 12px 0 18px; }
.account-brand h1 { font-size: 36px; }
.account-brand p { margin-top: 6px; font-size: 15px; }
.account-actions { flex-wrap: wrap; gap: 10px; margin: 6px 0 16px; }
.btn { padding: 10px 18px; font-size: 15px; }
.btn.is-focused { transform: none; }
.login-form { width: 100%; max-height: none; }

/* Ajout de source */
.login { padding: calc(env(safe-area-inset-top, 0px) + 56px) var(--safe) 24px; overflow-y: auto; }
.login-brand { margin-bottom: 18px; }
.login-brand h1 { font-size: 36px; }
.login-brand p { margin-top: 6px; font-size: 15px; }
.login-tabs { gap: 8px; margin-bottom: 18px; }
.tab { padding: 8px 16px; font-size: 14px; }
.login-form { padding: 0; }
.login .hint, .login p { font-size: 13px; }