/* ============================================================
   Serivore — feuille de style UNIQUE des pages dynamiques
   (fiches série /tv/<id>, profils /<lang>/u/<handle>, erreurs).
   Servie par FileMiddleware ; référencée par le gabarit de
   WebController.html(). Les pages statiques de Public/ gardent
   leurs styles propres.
   ============================================================ */

/* ---------- Base (toutes pages) ---------- */
:root { --bg:#0a0a0d; --text:#f5f5f7; --muted:#a1a1aa; --accent:#1ee5ce; --card:#131318; --line:#26262c; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text);
       font:17px/1.7 -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
       -webkit-text-size-adjust:100%;
       /* Colonne pleine hauteur : le pied de page colle au bas de l'écran même
          quand le contenu est court (comme le fait l'app web). */
       min-height:100vh; display:flex; flex-direction:column; }
img { max-width:100%; }
a { color: var(--accent); }
.mire { height:6px; background:linear-gradient(to right,
        #f9e231 0 20%, #1ee5ce 20% 40%, #60d838 40% 60%, #ca2a7a 60% 80%, #ed230d 80% 100%); }
main { max-width:44rem; margin:0 auto; padding:3rem 1.25rem 5rem;
       /* main grandit pour remplir la fenêtre ; à l'intérieur, .page-content
          pousse le <footer> tout en bas sur les pages courtes. */
       display:flex; flex-direction:column; flex:1 0 auto; }
.page-content { flex:1 0 auto; }
/* Pages légales : de la prose dense qu'on PARCOURT (titres numérotés, listes),
   pas une fiche à lire d'une traite. La mesure serrée des pages de partage y
   laissait deux marges de plus de 600 px sur un écran de bureau. */
main.legal { max-width:62rem; padding-top:2.5rem; }
h1 { font-size:clamp(1.45rem, 3vw + 1rem, 1.9rem); line-height:1.25;
     letter-spacing:-.02em; margin:0 0 .4rem; overflow-wrap:break-word; }
h2 { font-size:1.15rem; margin:2.6rem 0 1rem; letter-spacing:-.01em; }
h2 .region { color:var(--muted); font-weight:400; font-size:.9rem; }
.sub { color:var(--muted); }
.cta { display:inline-block; background:var(--accent); color:#06221f; font-weight:700;
       padding:.8rem 1.6rem; border-radius:12px; text-decoration:none; margin-top:1.2rem; }
.cta-note { display:block; color:var(--muted); font-size:.9rem; margin-top:.7rem; }
/* Pied de page UNIFIÉ (même markup que l'index statique). */
footer { margin-top:4rem; padding-top:1.5rem; border-top:1px solid var(--line);
         color:var(--muted); font-size:.92rem;
         display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; }
footer a { color:var(--muted); text-decoration:none; }
footer a:hover { color:var(--accent); }

/* ---------- Fiche série ---------- */
.fiche { display:flex; gap:2rem; flex-wrap:wrap; }
/* align-self:flex-start : sans lui, le stretch flex étire l'affiche sur
   toute la hauteur de la fiche (height:fit-content n'est pas fiable sur
   les éléments remplacés dans WebKit). aspect-ratio verrouille le 2/3. */
.poster { border-radius:14px; flex-shrink:0; align-self:flex-start;
          width:220px; aspect-ratio:2/3; object-fit:cover;
          box-shadow:0 8px 32px rgba(0,0,0,.55); }
.infos { flex:1; min-width:16rem; }
.meta { color:var(--accent); font-weight:600; font-size:.95rem; margin:0 0 1rem; }
.hero { height:240px; background-size:cover; background-position:center 20%;
        mask-image:linear-gradient(to bottom, black 40%, transparent);
        -webkit-mask-image:linear-gradient(to bottom, black 40%, transparent); }
.hero + main { margin-top:-110px; position:relative; }
.badges { color:var(--text); font-size:.95rem; margin:.2rem 0 1rem;
          background:var(--card); border:1px solid var(--line); border-radius:10px;
          display:inline-block; padding:.35rem .8rem; }
.providers { display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; }
.provider { display:inline-flex; align-items:center; gap:.5rem; color:var(--text); }
.provider img { border-radius:8px; }
.attribution { color:var(--muted); font-size:.78rem; margin-top:.8rem; }
details { border-bottom:1px solid var(--line); padding:.55rem 0; }
summary { cursor:pointer; font-weight:600; }
summary::marker { color:var(--accent); }
.eplist { list-style:none; padding:.4rem 0 .2rem .5rem; margin:0;
          color:var(--text); font-size:.95rem; }
.eplist li { padding:.22rem 0; overflow-wrap:anywhere; }
.epnum { color:var(--accent); font-weight:600; font-variant-numeric:tabular-nums;
         margin-right:.35rem; }
.epdate { color:var(--muted); font-size:.85rem; }

/* ---------- Profil public ---------- */
.profile-banner { height:190px; background-size:cover; background-position:center;
                  background-color:var(--card); }
/* L'avatar chevauche la bannière, comme dans l'app. */
.avatar { width:96px; height:96px; border-radius:50%; object-fit:cover;
          border:4px solid var(--bg); background:var(--card);
          margin-top:-48px; display:block; }
.avatar-fallback { width:96px; height:96px; border-radius:50%;
                   border:4px solid var(--bg); background:var(--card);
                   margin-top:-48px; display:flex; align-items:center;
                   justify-content:center; font-size:1.6rem; font-weight:700;
                   color:var(--muted); }
.display-name { font-size:clamp(1.35rem, 3vw + .9rem, 1.7rem); font-weight:800;
                letter-spacing:-.02em; margin:.8rem 0 0; overflow-wrap:break-word; }
.handle { color:var(--muted); margin:.1rem 0 0; }
.counters { display:flex; gap:1.4rem; flex-wrap:wrap; color:var(--muted);
            margin:.9rem 0 0; font-size:.98rem; }
.counters b { color:var(--text); font-weight:700; margin-right:.3rem; }
.joined { color:var(--muted); font-size:.95rem; margin:.5rem 0 0; }
.private-note { background:var(--card); border:1px solid var(--line); border-radius:12px;
                padding:1rem 1.2rem; color:var(--muted); margin-top:2rem; }
/* Étagère d'affiches : défilement horizontal, jamais de débordement de page. */
.shelf { display:flex; gap:.8rem; overflow-x:auto; padding:.2rem 0 .6rem;
         -webkit-overflow-scrolling:touch; }
.shelf img { width:104px; aspect-ratio:2/3; object-fit:cover;
             border-radius:10px; flex-shrink:0; background:var(--card); }
.list-row { display:flex; align-items:center; justify-content:space-between;
            gap:.8rem; background:var(--card); border:1px solid var(--line);
            border-radius:12px; padding:.75rem 1rem; margin-bottom:.6rem; }
.list-row .name { font-weight:600; overflow-wrap:anywhere; }
.list-row .count { color:var(--muted); font-size:.9rem; white-space:nowrap; }

/* ---------- Pages légales (fragments servis via le gabarit) ---------- */
.updated { color:var(--muted); font-size:.95rem; margin:0 0 2.25rem; }
h2 .num { color:var(--accent); font-variant-numeric:tabular-nums; margin-right:.5rem; }
li { margin:.35rem 0; }
strong { font-weight:600; }
.summary-box { background:var(--card); border:1px solid var(--line);
               border-radius:14px; padding:1.4rem 1.5rem; margin:0 0 1rem; }
.summary-box h2 { margin:0 0 .6rem; font-size:1.05rem; color:var(--accent); }
.summary-box ul { margin:0; padding-left:1.2rem; }
@media print {
  body { background:#fff; color:#111; }
  .summary-box { border-color:#ccc; background:#f6f6f6; }
  a { color:#0a7c72; }
}

/* ---------- Visionnage partagé (/​<lang>/w/…) ---------- */
.watch-head { display:flex; align-items:center; gap:1.1rem; }
.watch-head h1 { margin:0; }
.watch-avatar { width:72px; height:72px; border-radius:50%; object-fit:cover;
                border:3px solid var(--line); flex-shrink:0; background:var(--card); }
.stars { color:var(--accent); font-size:2.1rem; letter-spacing:.18rem; margin:.2rem 0 0; }
.reaction-row { font-size:2.2rem; display:flex; gap:.6rem; flex-wrap:wrap; }
.fav-char { color:#ca2a7a; font-weight:700; font-size:1.15rem; margin:.2rem 0 0; }

/* ---------- Mobile ---------- */
@media (max-width:560px) {
  main { padding:2.25rem 1rem 3.5rem; }
  .fiche { flex-direction:column; align-items:center; text-align:center; gap:1.4rem; }
  .poster { width:190px; align-self:center; }
  .badges { text-align:left; }
  .hero { height:190px; }
  .hero + main { margin-top:-80px; }
  .cta { display:block; text-align:center; }
  .profile-banner { height:150px; }
  .avatar, .avatar-fallback { width:84px; height:84px; margin-top:-42px; }
  .shelf img { width:92px; }
}

/* ---------- Accueil (vitrine) + Nouveautés ---------- */
main.landing { max-width:60rem; }
.lp-hero { text-align:center; padding:3rem 1.25rem .5rem; max-width:48rem; margin:0 auto; }
.lp-logo { width:132px; height:auto; }
.lp-title { font-size:2.3rem; line-height:1.1; letter-spacing:-.02em; text-wrap:balance;
            margin:1rem 0 .6rem; }
.lp-sub { color:var(--muted); font-size:1.15rem; line-height:1.5; max-width:34rem; margin:0 auto; }
.lp-cta { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin:1.6rem 0 .2rem; }
.lp-cta .cta { margin:0; }
.cta--ghost { background:transparent; color:var(--accent); border:1px solid var(--accent); }
.lp-features { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin:1.25rem 0 0; }
.lp-card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.3rem 1.35rem; }
.lp-card h2 { font-size:1.12rem; margin:0 0 .4rem; }
.lp-card p { color:var(--muted); line-height:1.5; margin:0; }
.lp-more { text-align:center; font-size:1.02rem; margin:2rem 0 0; }
.lp-more a { font-weight:600; text-decoration:none; }

.cl-release { border-top:1px solid var(--line); padding:1.4rem 0 .2rem; }
.cl-release:first-of-type { border-top:0; padding-top:.5rem; }
.cl-release h2 { display:flex; align-items:center; gap:.6rem; font-size:1.15rem; margin:0 0 .6rem;
                 text-transform:capitalize; }
.cl-latest { background:var(--accent); color:#06221f; font-size:.72rem; font-weight:700;
             text-transform:uppercase; letter-spacing:.03em; padding:.15rem .5rem; border-radius:999px; }
.cl-release ul { margin:0; padding-left:1.15rem; }
.cl-release li { line-height:1.5; margin:.3rem 0; }

@media (max-width:560px) {
  .lp-features { grid-template-columns:1fr; }
  .lp-title { font-size:1.9rem; }
}
@media (prefers-color-scheme: light) {
  .lp-card { background:#f6f6f6; border-color:#ddd; }
  .cl-release { border-color:#e2e2e2; }
  .lp-card p, .lp-sub { color:#555; }
}

/* ---------- Icônes réseaux (pied de page) ---------- */
.footer-social { display: inline-flex; align-items: center; gap: 14px; margin-left: auto; }
.footer-social a { display: inline-flex; color: var(--muted); }
.footer-social a:hover { color: var(--accent); }
.footer-social svg { width: 18px; height: 18px; fill: currentColor; display: block; }