/* ================= BookFlow — coque du lecteur =================
   Version simplifiée : l'application EST le lecteur. Plus d'accueil,
   plus de fiche détail, plus de jaquette. Ce fichier ne contient donc
   que le cadre téléphone et le conteneur de l'iframe.
   (L'ancienne version, avec toute la navigation, vit dans ../proto-nav/) */
:root{
  --bg:#0a0a0b;
  --font: "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--font);
  background:#000;
  color:#f4f4f5;
  display:flex;align-items:center;justify-content:center;
  /* dvh : le body épouse la zone visible. Sinon (100vh figé) il est plus haut que
     l'écran et centre le device en le décalant sous la barre d'adresse mobile
     → le player du bas sort du champ. Les deux lignes = fallback 100vh puis 100dvh. */
  height:100vh; height:100dvh;
  min-height:100vh; min-height:100dvh;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Cadre téléphone (desktop) ----------
   Directement en PAYSAGE : sur PC, impression « téléphone déjà tourné ».
   Aucune rotation du contenu. */
.device{
  position:relative;
  width:min(844px, 96vw); height:auto; aspect-ratio:844 / 390;
  background:var(--bg);
  border-radius:44px;
  border:10px solid #1c1c1e;
  box-shadow:0 40px 90px rgba(0,0,0,.7), 0 0 0 2px #000 inset;
  overflow:hidden;
}
.device__notch{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:120px;height:26px;background:#000;border-radius:16px;z-index:60;
}

/* Sur vrai mobile : plein écran, pas de cadre */
@media (max-width:520px){
  body{background:var(--bg)}
  .device{width:100vw;height:100dvh;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none}
  .device__notch{display:none}
}

/* ---------- Le lecteur ---------- */
.player{position:absolute;inset:0;background:#000;overflow:hidden}
#player-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;display:block}