/* Habillage de l'appli iPhone (~/mediatheque-ios), actif sous html.appli-ios :
   la classe est posee par 02-base.js quand la page tourne dans l'appli.
   Surcharge pure : rien ne change dans Safari, sur Android ni au salon. */

/* Une appli ne surligne pas ce qu'on touche et ne selectionne pas son texte. */
html.appli-ios { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
html.appli-ios body { -webkit-user-select: none; user-select: none; }
html.appli-ios input, html.appli-ios textarea { -webkit-user-select: text; user-select: text; }

@media (max-width: 760px) {
  /* ── En-tete : pose sur l'affiche, juste sous l'heure ── */
  html.appli-ios { --entete: calc(var(--safe-t) + 100px); }
  html.appli-ios header {
    position: absolute; left: 0; right: 0; top: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.34) 62%, transparent 100%);
    animation: none;
  }
  html.appli-ios .head { padding-top: 2px; padding-bottom: 12px; gap: 8px 10px; }
  html.appli-ios .brand { font-size: 19px; }
  html.appli-ios .wrap { padding-top: var(--entete); }
  html.appli-ios .avatar { border-radius: 50%; }
  /* Champ de recherche a la facon d'iOS : plein, arrondi, sans filet. */
  html.appli-ios .searchbox input {
    height: 38px; border: 0; border-radius: 11px;
    background: rgba(118,118,128,.34);
    -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  }
  html.appli-ios .searchbox input::placeholder { color: rgba(235,235,245,.62); }

  /* L'affiche monte jusqu'en haut de l'ecran, sous l'en-tete. */
  html.appli-ios.theme-b .spot {
    margin-top: calc(-1 * var(--entete));
    height: calc(clamp(300px, 78vw, 460px) + var(--entete) - 40px);
  }
  html.appli-ios .spot .actions .btn { min-height: 46px; }

  /* ── Barre d'onglets : une capsule de verre qui flotte ──
     Collee aux bords, elle faisait « un gros bloc » (Rico, 2026-10-10) :
     elle est detachee des trois cotes, la page se voit autour et dessous. */
  html.appli-ios nav.tabs {
    left: calc(14px + var(--safe-l)); right: calc(14px + var(--safe-r));
    bottom: max(10px, calc(var(--safe-b) - 14px));
    padding: 5px 6px; border-radius: 30px;
    background: rgba(34,34,37,.72);
    -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
    border: .5px solid rgba(255,255,255,.16);
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
  }
  html.appli-ios nav.tabs button {
    font-size: 9.5px; gap: 1px; padding: 5px 4px 4px; letter-spacing: .01em; border-radius: 24px;
  }
  html.appli-ios nav.tabs button svg { width: 20px; height: 20px; }
  html.appli-ios nav.tabs button.on { background: rgba(255,255,255,.13); }

  /* ── Formes : les angles d'iOS ── */
  html.appli-ios .btn { border-radius: 12px; }
  html.appli-ios .poster, html.appli-ios .poster:after { border-radius: 10px; }
  html.appli-ios .badge { border-radius: 6px; }
  html.appli-ios.theme-b .filters select, html.appli-ios.theme-b .filters .chip,
  html.appli-ios.theme-b .chip, html.appli-ios.theme-b .saisons .chip { border-radius: 999px; }
  html.appli-ios .close-x {
    width: 34px; height: 34px; border-radius: 50%; border: 0;
    background: rgba(60,60,67,.62);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  }
}

/* ── Lecteur : pastilles rondes ── */
html.appli-ios .ppill { border-radius: 12px; }
html.appli-ios .ppill.ico { border-radius: 50%; }

/* Fiche façon Netflix (validée par Rico le 2026-10-10) : l image commence SOUS
   l encoche, entière en 16/9, et le titre vient après. La marge du haut est
   celle que donne le téléphone (--safe-t), donc juste sur chaque iPhone. */
@media (max-width: 760px) and (orientation: portrait) {
  html.appli-ios #sheet { padding-top: var(--safe-t); box-sizing: border-box; background: #000; backdrop-filter: none; }
  html.appli-ios .sheet-in { border-radius: 16px 16px 0 0; border: 0; }
  html.appli-ios .sheet-in > .hero { aspect-ratio: 16/9; }
  html.appli-ios .sheet-in > .hero:after { background: linear-gradient(180deg, rgba(8,9,12,0) 68%, var(--bg) 100%); }
  html.appli-ios .sheet-in > .hero + .sheet-body { margin-top: 0; padding-top: 10px; }
  html.appli-ios .close-x { top: calc(var(--safe-t) + 12px); }
}