/* ============================================================================
   MangaSphere — Catalogue & Lecteur de scans (dépend de manga-theme.css)
   ========================================================================== */

/* ---------- Catalogue ---------- */
.ms-cat-toolbar { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin: 1.4rem 0; }
.ms-search { position: relative; flex: 1; min-width: 220px; }
.ms-search input { width: 100%; padding: .7rem .9rem .7rem 2.4rem; background: var(--ms-surface); border: 1px solid var(--ms-border); border-radius: 12px; color: var(--ms-text); font-family: inherit; }
.ms-search input:focus { outline: none; border-color: var(--ms-primary-soft); box-shadow: 0 0 0 3px rgba(124,58,237,.2); }
.ms-search svg { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ms-text-dim); }
.ms-select { padding: .7rem .9rem; background: var(--ms-surface); border: 1px solid var(--ms-border); border-radius: 12px; color: var(--ms-text); font-family: inherit; }
.ms-select:focus { outline: none; border-color: var(--ms-primary-soft); }

.ms-grid-cat { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.ms-manga-card .ms-card-cover { aspect-ratio: 2/3; }
.ms-type-badge { position: absolute; top: .6rem; left: .6rem; z-index: 2; padding: .2rem .5rem; border-radius: 7px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; background: rgba(124,58,237,.9); color: #fff; }
.ms-manga-card .ms-card-meta .chip-count { color: var(--ms-primary-soft); font-weight: 600; }

/* ---------- Fiche série (intégrée au catalogue/lecteur) ---------- */
.ms-series-head { display: grid; grid-template-columns: 200px 1fr; gap: 1.6rem; align-items: start; margin-bottom: 2rem; }
.ms-series-cover { aspect-ratio: 2/3; border-radius: var(--ms-radius); overflow: hidden; box-shadow: var(--ms-shadow); border: 1px solid var(--ms-border-strong); }
.ms-series-info h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: .2rem 0 .5rem; }
.ms-series-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; }
.ms-series-synopsis { color: var(--ms-text-soft); line-height: 1.7; max-width: 65ch; }
.ms-chapter-list { display: grid; gap: .5rem; margin-top: 1.4rem; }
.ms-chapter-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; background: var(--ms-surface); border: 1px solid var(--ms-border); border-radius: 12px; transition: border-color .2s, transform .2s; }
.ms-chapter-item:hover { border-color: var(--ms-border-strong); transform: translateX(3px); }
.ms-chapter-item .num { font-family: "Russo One", sans-serif; color: var(--ms-primary-soft); }
.ms-chapter-item .meta { color: var(--ms-text-dim); font-size: .82rem; }

/* ---------- LECTEUR ---------- */
body.ms-reading { background: #07070f; }
.reader-bar {
  position: sticky; top: 0; z-index: var(--z-nav);
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem clamp(.8rem, 3vw, 1.4rem);
  background: color-mix(in srgb, #07070f 88%, transparent);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--ms-border);
}
.reader-bar .r-back { display: inline-flex; align-items: center; gap: .4rem; color: var(--ms-text-soft); font-weight: 600; font-size: .9rem; }
.reader-bar .r-back:hover { color: var(--ms-text); }
.reader-bar .r-title { min-width: 0; }
.reader-bar .r-title b { display: block; font-family: "Russo One", sans-serif; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-bar .r-title span { font-size: .78rem; color: var(--ms-text-dim); }
.reader-bar .r-spacer { flex: 1; }
.reader-bar select { background: var(--ms-surface); border: 1px solid var(--ms-border); border-radius: 10px; color: var(--ms-text); padding: .45rem .6rem; font-family: inherit; font-size: .85rem; max-width: 150px; }
.reader-bar .r-mode { display: inline-flex; border: 1px solid var(--ms-border); border-radius: 10px; overflow: hidden; }
.reader-bar .r-mode button { background: var(--ms-surface); color: var(--ms-text-soft); border: none; padding: .45rem .6rem; font-size: .8rem; font-weight: 600; }
.reader-bar .r-mode button.is-active { background: var(--ms-grad-cta); color: #fff; }
.reader-bar .r-mode button svg { width: 16px; height: 16px; display: block; }

/* Stage */
.reader-stage { max-width: 900px; margin: 0 auto; padding-bottom: 5rem; }
.reader-page { width: 100%; display: block; }
/* mode vertical (webtoon) */
.reader-vertical .reader-page { margin: 0 auto; }
.reader-vertical .reader-page + .reader-page { margin-top: 2px; }
/* mode page par page */
.reader-paged { min-height: calc(100vh - 60px); display: flex; align-items: center; justify-content: center; position: relative; }
.reader-paged .reader-page { display: none; max-height: calc(100vh - 90px); width: auto; max-width: 100%; }
.reader-paged .reader-page.is-current { display: block; }
.reader-paged .r-zone { position: absolute; top: 0; bottom: 0; width: 38%; cursor: pointer; z-index: 5; }
.reader-paged .r-zone.left { left: 0; }
.reader-paged .r-zone.right { right: 0; }

/* Page placeholder (démo « ph:N ») — panneau généré sans vraie image */
.reader-ph { place-items: center; color: rgba(255,255,255,.85); font-family: "Russo One", sans-serif; position: relative; }
/* vertical : panneaux pleine largeur empilés */
.reader-vertical .reader-ph { display: grid; width: 100%; max-width: 800px; aspect-ratio: 3/4; margin: 0 auto; }
.reader-vertical .reader-ph + .reader-ph { margin-top: 2px; }
/* page par page : panneau au format page, seul le courant est visible */
.reader-paged .reader-ph { aspect-ratio: 3/4; height: calc(100vh - 130px); width: auto; max-width: 94vw; }
.reader-paged .reader-ph.is-current { display: grid; }
.reader-ph::before { content: ""; position: absolute; inset: 0; opacity: .18; background-image: radial-gradient(circle at 30% 20%, #fff 1px, transparent 1.6px); background-size: 22px 22px; }
.reader-ph .pn { font-size: 3rem; position: relative; text-shadow: 0 4px 20px rgba(0,0,0,.5); }
.reader-ph small { position: relative; color: rgba(255,255,255,.6); font-family: "Chakra Petch", sans-serif; letter-spacing: 2px; }

/* Barre de navigation chapitre (bas) */
.reader-foot { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); display: flex; align-items: center; gap: .6rem; background: var(--ms-elevated); border: 1px solid var(--ms-border-strong); border-radius: 999px; padding: .4rem .5rem; box-shadow: var(--ms-shadow); z-index: var(--z-overlay); }
.reader-foot button, .reader-foot a { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .8rem; border-radius: 999px; border: none; background: transparent; color: var(--ms-text-soft); font-weight: 600; font-size: .85rem; }
.reader-foot button:disabled { opacity: .35; cursor: not-allowed; }
.reader-foot button:not(:disabled):hover, .reader-foot a:hover { color: var(--ms-text); background: var(--ms-surface); }
.reader-foot .r-counter { font-size: .8rem; color: var(--ms-text-dim); min-width: 56px; text-align: center; }

.reader-empty { text-align: center; padding: 5rem 1rem; color: var(--ms-text-dim); }

@media (max-width: 760px) {
  .ms-series-head { grid-template-columns: 120px 1fr; gap: 1rem; }
  .reader-bar .r-back span { display: none; }
  .reader-bar select { max-width: 110px; }
}