/* ==========================================================================
   NekoFlix — pages : accueil (mobile), fiche, recherche, catalogue,
   explorer, profil, bibliothèque, paramètres, connexion, 404, admin
   ========================================================================== */

/* ── Fiche titre ───────────────────────────────────────────────────────── */
.detail-hero { position: relative; isolation: isolate; overflow: hidden; min-height: min(72vh, 640px); display: flex; align-items: flex-end; padding: calc(var(--header-h) + 40px) var(--gutter) 36px; }
.detail-hero { background: var(--bg); }
/* Image de l'anime en fond : bannière plein écran si dispo, sinon l'affiche à droite, fondue vers la gauche */
.detail-backdrop { position: absolute; inset: 0; z-index: -2; background: center 20% / cover no-repeat; }
.detail-backdrop { transition: opacity .4s ease; }
.detail-backdrop.is-loading { opacity: 0; }
/* Sans bannière large : l'affiche agrandie serait floue et pixelisée → flou franc et assumé
   (couleurs de l'affiche), l'affiche nette est à gauche. */
.detail-hero:not(.has-banner) .detail-backdrop { inset: -60px; filter: blur(34px) brightness(.6) saturate(1.25); }
html[data-theme="light"] .detail-backdrop { opacity: .35; }
.detail-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(var(--bg-rgb), .96) 0%, rgba(var(--bg-rgb), .82) 30%, rgba(var(--bg-rgb), .35) 60%, rgba(var(--bg-rgb), .1) 85%), linear-gradient(0deg, var(--bg) 0%, rgba(var(--bg-rgb), .5) 22%, transparent 50%); }
.detail-inner { display: grid; grid-template-columns: clamp(170px, 18vw, 260px) minmax(0, 1fr); gap: clamp(24px, 3.5vw, 48px); align-items: center; width: 100%; max-width: 1320px; }
.detail-poster .frame { border-radius: var(--r); box-shadow: var(--shadow-3); }
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; font-size: 13px; color: var(--text-3); }
.crumbs a { color: var(--text-2); font-weight: 500; } .crumbs a:hover { color: var(--text); }
.detail-title { text-wrap: balance; }
.detail-alt { margin-top: 6px; color: var(--text-3); font-size: 14px; }
.detail-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 12px 0 8px; color: var(--text-2); font-size: 14px; font-weight: 600; }
.detail-meta .sep { color: var(--text-3); }
.detail-genres { margin-bottom: 14px; font-size: 14px; line-height: 1.6; color: var(--text-3); }
.detail-genres a { color: var(--accent-text); font-weight: 600; }
.detail-genres a:hover { text-decoration: underline; }
.detail-desc { max-width: 780px; color: var(--text-2); font-size: 15px; line-height: 1.65; }
.detail-desc.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.more-btn { margin-top: 6px; color: var(--text); font-size: 13.5px; font-weight: 600; }
.more-btn:hover { color: var(--accent-text); }
.detail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.detail-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; padding: 8px var(--gutter) 0; max-width: calc(1320px + 2 * var(--gutter)); }
.detail-main { min-width: 0; }
.info-panel { padding: 18px; border-radius: var(--r); background: var(--surface); align-self: start; position: sticky; top: calc(var(--header-h) + 16px); }
.info-panel h3 { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; }
.info-list { display: grid; grid-template-columns: auto 1fr; gap: 9px 14px; font-size: 13.5px; }
.info-list dt { color: var(--text-3); }
.info-list dd { margin: 0; color: var(--text); text-align: right; overflow-wrap: anywhere; }
.info-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.info-panel .btn { width: 100%; margin-top: 12px; }
/* Saisons en onglets + langue à droite */
.ep-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 16px; }
.ep-toolbar .spacer { flex: 1; }
.ep-tools { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.ep-count { color: var(--text-3); font-size: 13.5px; white-space: nowrap; }
.season-one { font-size: 16px; font-weight: 700; }
.season-tabs { display: flex; gap: 6px; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.season-tabs::-webkit-scrollbar { display: none; }
.stab { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); color: var(--text-2); font-size: 14px; font-weight: 600; white-space: nowrap; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.stab small { min-width: 22px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: 6px; background: var(--surface-3); color: var(--text-3); font-size: 11.5px; font-weight: 700; }
.stab:hover { color: var(--text); border-color: var(--line-2); }
.stab[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.stab[aria-pressed="true"] small { background: rgba(0, 0, 0, .12); color: var(--bg); }
.ep-ranges { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 16px; }
/* Épisodes en lignes compactes */
.ep-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 8px; }
.eprow { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 10px 10px 10px 10px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); overflow: hidden; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.eprow .card-link { border-radius: var(--r); }
.eprow:hover { background: var(--surface-2); border-color: var(--line-2); }
.eprow-num { position: relative; flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-3); color: var(--text); font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; pointer-events: none; }
.eprow-num svg { width: 20px; height: 20px; }
.eprow-play { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; background: var(--accent); color: var(--on-accent); opacity: 0; transition: opacity var(--dur) var(--ease); }
.eprow-play svg { width: 18px; height: 18px; }
.eprow:hover .eprow-play, .eprow:focus-within .eprow-play { opacity: 1; }
.eprow-text { flex: 1; min-width: 0; pointer-events: none; }
.eprow-title { font-size: 14.5px; font-weight: 600; color: var(--text); }
.eprow-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px; color: var(--text-3); font-size: 12.5px; font-weight: 500; }
.eprow-meta:empty { display: none; }
.eprow-cur { color: var(--accent-text); font-weight: 700; }
.eprow-ok { color: var(--success); font-weight: 700; }
.eprow .ep-seen { margin: 0; }
.eprow-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .08); pointer-events: none; }
.eprow-progress i { display: block; height: 100%; background: var(--accent); }
.eprow.is-current { border-color: rgba(var(--accent-rgb), .7); background: rgba(var(--accent-rgb), .1); }
.eprow.is-current .eprow-num { background: var(--accent); color: var(--on-accent); }
.eprow.is-done .eprow-num { background: var(--success-soft); color: var(--success); }
.eprow.is-done .eprow-title { color: var(--text-2); }
@media (max-width: 640px) {
  .ep-tools { margin-left: 0; width: 100%; justify-content: space-between; }
  .eprow { gap: 12px; padding: 8px; }
  .eprow-num { width: 40px; height: 40px; font-size: 15px; }
}
.detail-section { margin-top: 44px; }
.detail-section > h2 { margin-bottom: 16px; }
.watch-panel { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; padding: 20px 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.watch-panel .ico { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--r); background: var(--accent-soft); color: var(--accent-text); }
.watch-panel .txt { flex: 1; min-width: 200px; }
.watch-panel b { font-size: 15px; font-weight: 600; }
.watch-panel p { margin-top: 4px; color: var(--text-2); font-size: 13.5px; line-height: 1.55; }

/* ── Recherche ─────────────────────────────────────────────────────────── */
.search-box { display: flex; align-items: center; gap: 12px; max-width: 820px; height: 60px; padding: 0 12px 0 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-2); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.search-box:focus-within { border-color: rgba(var(--accent-rgb), .7); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .14); }
.search-box svg { color: var(--text-3); flex: none; }
.search-box input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--text); font-size: 18px; font-weight: 500; }
.search-box input::-webkit-search-cancel-button { display: none; }
.search-under { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 24px; }
.search-meta { margin-left: auto; color: var(--text-3); font-size: 13.5px; }
.history-list { display: flex; flex-wrap: wrap; gap: 8px; }
.history-chip { display: inline-flex; align-items: center; gap: 2px; height: 34px; padding: 0 6px 0 12px; border-radius: var(--r-pill); background: var(--surface-2); font-size: 13.5px; color: var(--text-2); }
.history-chip button:first-child { padding-right: 4px; }
.history-chip:hover { color: var(--text); }

/* ── Catalogue : filtres ───────────────────────────────────────────────── */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.toolbar .spacer { flex: 1; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px; margin-bottom: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.filters .select { flex: 1 1 160px; min-width: 0; }
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; }
.af-chip { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 6px 0 12px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-text); font-size: 12.5px; font-weight: 600; }
.af-chip button { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.af-chip button:hover { background: rgba(var(--accent-rgb), .25); }
.result-count { color: var(--text-3); font-size: 13.5px; }

/* ── Explorer / genres ─────────────────────────────────────────────────── */
.explore-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.explore-grid .tile { aspect-ratio: 16 / 9; }
.genre-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.genre-tiles .tile { aspect-ratio: 16 / 10; }
.gtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.coll-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); transition: border-color var(--dur) var(--ease), transform var(--dur-2) var(--ease); }
.coll-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.coll-stack { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.coll-card b { font-size: 15px; } .coll-card p { font-size: 13px; color: var(--text-2); }
.coll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }

/* ── Profil ────────────────────────────────────────────────────────────── */
.profile-banner { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center 30%; }
.profile-banner.b-aurore, .pf-aurore { background: linear-gradient(120deg, #5a2410, #160f0b); }
.profile-banner.b-nuit, .pf-nuit { background: linear-gradient(120deg, #1a1d2b, #0b0c12); }
.profile-banner.b-sakura, .pf-sakura { background: linear-gradient(120deg, #4a1d35, #160c13); }
.profile-banner.b-ocean, .pf-ocean { background: linear-gradient(120deg, #0f3346, #08121a); }
.profile-banner.b-crepuscule, .pf-crepuscule { background: linear-gradient(120deg, #4a2414, #1a0d16); }
.profile-banner.b-foret, .pf-foret { background: linear-gradient(120deg, #173a24, #0a130d); }
.color-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent; box-shadow: inset 0 0 0 2px var(--bg); }
.swatch[aria-pressed="true"] { border-color: var(--text); }
.banner-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.banner-swatch { position: relative; height: 54px; border-radius: var(--r); overflow: hidden; border: 2px solid transparent; }
.banner-swatch .profile-banner { position: absolute; inset: 0; z-index: 0; }
.banner-swatch[aria-pressed="true"] { border-color: var(--text); }

/* ── Paramètres ────────────────────────────────────────────────────────── */
.settings { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start; }
.settings-nav { position: sticky; top: calc(var(--header-h) + 20px); display: flex; flex-direction: column; gap: 2px; }
.settings-nav a { padding: 9px 12px; border-radius: var(--r-sm); color: var(--text-2); font-size: 14px; font-weight: 500; }
.settings-nav a:hover { background: var(--surface-2); color: var(--text); }
.set-card { margin-bottom: 18px; padding: 6px 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 20px); }
.set-card > h2 { padding: 14px 0 6px; font-size: 16px; font-weight: 650; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.set-card > h2 + .set-row { border-top: 0; }
.set-row .txt { min-width: 0; }
.set-row b { display: block; font-size: 14px; font-weight: 600; }
.set-row span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-3); }
.theme-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.theme-pick { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; border-radius: var(--r); border: 2px solid var(--line); font-size: 12px; font-weight: 600; color: var(--text-2); }
.theme-pick i { display: block; width: 64px; height: 40px; border-radius: 6px; }
.theme-pick[aria-pressed="true"] { border-color: var(--accent); color: var(--text); }

/* ── Notifications (page) ──────────────────────────────────────────────── */
.notif-page { max-width: 760px; }
.notif-page .notif-item { padding: 14px 32px 14px 12px; border-bottom: 1px solid var(--line); border-radius: 0; }
.notif-page .notif-thumb, .notif-page .notif-ico { width: 132px; }

/* ── Splash, connexion, préférences ────────────────────────────────────── */
#splash { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; background: var(--bg); transition: opacity .35s ease, visibility .35s; }
#splash.hide { opacity: 0; visibility: hidden; pointer-events: none; }
#splash img { width: 68px; height: 68px; object-fit: contain; animation: fade-up .5s var(--ease) both; }
.gate { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 24px 16px; background: #07070b; color: #ededf2; }
.gate-bg { position: absolute; inset: 0; background: center 20% / cover no-repeat; filter: brightness(.4); }
.gate::before { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, .55); pointer-events: none; }
.gate-card { position: relative; z-index: 1; width: 100%; max-width: 420px; padding: 36px 32px; border-radius: var(--r-lg); background: #141519; border: 1px solid rgba(255, 255, 255, .08); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); animation: fade-up .4s var(--ease) both; }
.gate-card.wide { max-width: 560px; }
.gate-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.gate-brand img { width: 34px; height: 34px; object-fit: contain; }
.gate-brand b { color: #b9a0ff; }
.gate-card h1 { margin-bottom: 6px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.gate-card .sub { margin-bottom: 24px; color: #a3a3b3; font-size: 14.5px; line-height: 1.55; }
.auth-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 48px; margin-bottom: 10px; border-radius: var(--r-xs); font-size: 14px; font-weight: 700; transition: filter var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.auth-btn:active:not(:disabled) { transform: scale(.98); }
.auth-btn.discord { background: #5865F2; color: #fff; }
.auth-btn.google { background: #fff; color: #18181b; }
.auth-btn.guest { background: rgba(255, 255, 255, .06); color: #ededf2; border: 1px solid rgba(255, 255, 255, .12); }
.auth-btn.guest:hover { background: rgba(255, 255, 255, .1); }
.auth-btn:disabled { opacity: .4; cursor: not-allowed; }
.auth-div { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: #71717f; font-size: 12px; }
.auth-div::before, .auth-div::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .1); }
.auth-note { margin-top: 16px; color: #71717f; font-size: 12.5px; line-height: 1.5; text-align: center; }
.ob-label { margin: 18px 0 10px; font-size: 13px; font-weight: 600; color: #c9c9d4; }
.ob-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-chip { height: 36px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: #d6d6de; font-size: 13.5px; font-weight: 500; transition: all var(--dur) var(--ease); }
.ob-chip:hover { border-color: rgba(255, 255, 255, .25); }
.ob-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.gate-actions { display: flex; gap: 10px; margin-top: 24px; }
.gate-actions .btn { flex: 1; }
.gate .btn-ghost { color: #a3a3b3; } .gate .btn-ghost:hover { background: rgba(255, 255, 255, .06); color: #fff; }

/* ── 404 ───────────────────────────────────────────────────────────────── */
.notfound { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: calc(100vh - 240px); padding: calc(var(--header-h) + 40px) var(--gutter) 40px; text-align: center; }
.notfound .big { font-size: clamp(80px, 14vw, 160px); font-weight: 800; letter-spacing: -.05em; line-height: 1; background: linear-gradient(180deg, var(--text), rgba(var(--accent-rgb), .55)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.notfound img { width: 64px; height: 64px; opacity: .85; }
.notfound p { max-width: 420px; color: var(--text-2); }

/* ── Administration ────────────────────────────────────────────────────── */
.admin { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 28px; align-items: start; }
.admin-nav { position: sticky; top: calc(var(--header-h) + 20px); display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.admin-nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-radius: var(--r-sm); color: var(--text-2); font-size: 14px; font-weight: 500; }
.admin-nav a:hover { background: var(--surface-2); color: var(--text); }
.admin-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--text); font-weight: 600; }
.admin-nav .n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; }
.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { position: sticky; top: 0; padding: 10px 12px; text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--text-3); background: var(--surface); border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tr:hover td { background: var(--surface-2); }
.table .thumb { width: 36px; } .table .thumb .frame { border-radius: 4px; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.admin-login { max-width: 420px; margin: 40px auto; }
.pick-list { display: flex; flex-direction: column; gap: 6px; }
.pick-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r); background: var(--surface-2); }
.pick-item .frame { width: 34px; flex: none; border-radius: 4px; }
.pick-item b { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; }
.status-pill { display: inline-flex; height: 22px; align-items: center; padding: 0 8px; border-radius: 99px; font-size: 11.5px; font-weight: 600; background: var(--surface-3); color: var(--text-2); }
.status-pill.open, .status-pill.nouvelle { background: var(--warning-soft); color: var(--warning); }
.status-pill.done, .status-pill.traite, .status-pill.acceptee, .status-pill.ajoutee { background: var(--success-soft); color: var(--success); }
.status-pill.ignore, .status-pill.refusee { background: var(--surface-3); color: var(--text-3); }
.log-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.log-item time { flex: none; width: 128px; color: var(--text-3); font-size: 12.5px; }
.log-item .type { flex: none; width: 110px; color: var(--accent-text); font-size: 12.5px; font-weight: 600; }

/* ── Responsive des pages ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hero { min-height: clamp(460px, 60vh, 640px); }
  .detail-body { grid-template-columns: 1fr; }
  .info-panel { position: static; }
  .admin { grid-template-columns: 1fr; }
  .admin-nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .admin-nav a { flex: none; }
  .settings { grid-template-columns: 1fr; }
  .settings-nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .settings-nav a { flex: none; }
}
@media (max-width: 768px) {
  /* Mobile : l'affiche (verticale, comme l'écran) remplit toute la une, texte en bas */
  .hero { min-height: min(132vw, 640px); padding-top: calc(var(--header-h) + 18px); }
  .hero-backdrop, .hero.has-banner .hero-backdrop { background-position: center 15%; }
  .hero::after { background: linear-gradient(0deg, var(--bg) 0%, rgba(var(--bg-rgb), .85) 22%, rgba(var(--bg-rgb), .2) 55%, rgba(var(--bg-rgb), .35) 100%); }
  .hero-inner { flex-direction: column; align-items: center; gap: 0; text-align: center; padding: 0 16px; }
  .hero-content { max-width: none; width: 100%; align-items: center; }
  .hero-eyebrow { justify-content: center; margin-bottom: 8px; font-size: 12.5px; }
  .hero-title { font-size: 30px; margin-bottom: 0; }
  .hero-desc { display: none; }
  .hero-actions { display: grid; grid-template-columns: 1fr auto; width: 100%; margin-top: 16px; }
  .hero-actions .btn { height: 46px; padding: 0 14px; }
  .hero-actions .hide-xs { display: none; }
  .hero-thumbs { display: none; }
  .hero-nav .hero-dots { display: flex !important; }
  .hero-nav { justify-content: center; padding: 18px var(--gutter) 26px; }
  .hero-arrows { display: none; }
  .detail-hero { min-height: 0; padding-top: calc(var(--header-h) + 18px); padding-bottom: 24px; }
  .detail-backdrop { width: 100%; opacity: .6; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 85%); mask-image: linear-gradient(180deg, #000 30%, transparent 85%); }
  .detail-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 18px; }
  .detail-poster { width: 46vw; max-width: 200px; }
  .crumbs, .detail-meta, .detail-genres, .detail-actions { justify-content: center; }
  .detail-title { font-size: 26px; }
  .detail-desc { text-align: left; }
  .detail-actions .btn-primary { flex: 1 1 100%; }
  .search-box { height: 52px; padding-left: 14px; }
  .search-box input { font-size: 16px; }
  .search-meta { margin-left: 0; width: 100%; }
  .filters .select { flex: 1 1 calc(50% - 10px); }
  .admin-grid { grid-template-columns: 1fr; }
  .log-item { flex-wrap: wrap; } .log-item time, .log-item .type { width: auto; }
  .gate-card { padding: 28px 22px; }
  .genre-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .explore-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile-label { font-size: 15px; }
}

/* ── Pages légales ─────────────────────────────────────────────────────── */
.legal { max-width: 820px; }
.legal .tabs-row { margin-bottom: var(--s-6); }
.legal h1 { margin-bottom: 18px; }
.legal h2 { margin: 28px 0 10px; font-size: 18px; font-weight: 650; }
.legal p, .legal li { color: var(--text-2); font-size: 15px; line-height: 1.7; }
.legal ul { margin: 6px 0 0 20px; display: flex; flex-direction: column; gap: 6px; }
.legal a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.legal .tabs-row a, .legal .btn { text-decoration: none; }
.legal .tabs-row a { color: var(--text-3); }
.legal .tabs-row a[aria-current="page"] { color: var(--text); }
.legal .table-wrap { margin-top: 8px; }
.legal-lead { font-size: 16px !important; color: var(--text) !important; }
.legal-todo { padding: 1px 6px; border-radius: 4px; background: var(--warning-soft); color: var(--warning); font-size: 13px; }

/* Bandeau d'information cookies (une seule fois) */
.privacy-notice { position: fixed; left: 16px; bottom: 16px; z-index: 350; display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; max-width: 560px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--elevated); border: 1px solid var(--line-2); box-shadow: var(--shadow-3); animation: fade-up .3s var(--ease) both; }
.privacy-notice p { flex: 1 1 260px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.privacy-notice a { color: var(--accent-text); text-decoration: underline; }
.privacy-notice .actions { display: flex; gap: 6px; margin-left: auto; }
.footer-legal { width: 100%; justify-content: flex-start; margin-left: 0; font-size: 12.5px; }
@media (max-width: 1100px) {
  .privacy-notice { left: 12px; right: 12px; bottom: calc(var(--bottom-h) + 12px + env(safe-area-inset-bottom)); max-width: none; }
}

/* ── Profil (bandeau + onglets, façon page de compte de plateforme) ─────── */
/* Profil : bandeau pleine largeur aligné sur la marge du site */
.pf-head { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--header-h) + 44px) var(--gutter) 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.pf-banner { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center 30%; }
.pf-banner[style] { filter: brightness(.4) saturate(1.1); }
.pf-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg) 0%, rgba(var(--bg-rgb), .55) 55%, rgba(var(--bg-rgb), .15) 100%); }
.pf-inner { display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; }
.pf-inner > .avatar { width: 108px; height: 108px; font-size: 40px; flex: none; box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--accent), 0 12px 30px rgba(0, 0, 0, .45); }
.pf-id { flex: 1; min-width: 220px; padding-bottom: 6px; }
.pf-id h1 { font-size: clamp(26px, 2.6vw, 36px); font-weight: 800; line-height: 1.1; overflow-wrap: anywhere; }
.pf-sub { margin-top: 6px; color: var(--text-2); font-size: 14px; font-weight: 500; }
.pf-bio { margin-top: 8px; max-width: 620px; color: var(--text-2); font-size: 14.5px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.pf-actions { display: flex; gap: 6px; padding-bottom: 8px; }
.pf-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; margin: 26px 0 4px; }
.pf-stat { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r); background: rgba(255, 255, 255, .045); border: 1px solid var(--line); }
html[data-theme="light"] .pf-stat { background: var(--surface); }
.pf-stat-ico { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: rgba(var(--accent-rgb), .16); color: var(--accent-text); }
.pf-stat-ico svg { width: 18px; height: 18px; }
.pf-stat > div { min-width: 0; }
.pf-stat b { display: block; font-size: 18px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.pf-stat > div span { display: block; color: var(--text-3); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-tabs { margin: 14px 0 0; border-bottom: 0; }
.pf-pad { padding-top: 28px; }
.pf-rows { margin-top: 28px; }
.pf-rows + .pf-rows { margin-top: 8px; }
.pf-rows + .pf-pad { padding-top: 4px; }
.pf-guest { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.pf-guest .ico { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-3); color: var(--text-2); }
.pf-guest { flex-wrap: wrap; }
.pf-guest p { flex: 1 1 260px; color: var(--text-2); font-size: 13.5px; line-height: 1.5; } .pf-guest p b { color: var(--text); }
.pf-start { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; padding: 24px; border-radius: var(--r-lg); background: linear-gradient(110deg, rgba(var(--accent-rgb), .2), var(--surface) 60%); border: 1px solid rgba(var(--accent-rgb), .25); }
.pf-start h2 { font-size: 20px; font-weight: 800; } .pf-start p { margin-top: 4px; max-width: 560px; color: var(--text-2); font-size: 14px; line-height: 1.5; }
.pf-start-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; margin-bottom: var(--s-8); }
.pf-box { padding: 18px 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.pf-box-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pf-box h2 { font-size: 15px; font-weight: 700; }
.pf-act-sum { margin: -4px 0 14px; color: var(--text-3); font-size: 13px; } .pf-act-sum b { color: var(--text); }
.pf-empty { display: flex; align-items: center; gap: 14px; min-height: 120px; color: var(--text-2); font-size: 14px; line-height: 1.5; }
.pf-empty > svg { flex: none; width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: var(--surface-3); color: var(--text-3); }
.pf-empty span { color: var(--text-3); font-size: 13px; }
.announces:not(:empty) ~ main .pf-head { padding-top: 32px; }
@media (max-width: 768px) {
  .pf-head { padding-top: calc(var(--header-h) + 22px); }
  .pf-inner { gap: 14px; align-items: center; }
  .pf-inner > .avatar { width: 76px; height: 76px; font-size: 30px; }
  .pf-id { min-width: 0; padding-bottom: 0; }
  .pf-actions { width: 100%; padding-bottom: 0; }
  .pf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pf-stat { padding: 10px; gap: 10px; }
  .pf-stat-ico { width: 32px; height: 32px; }
  .pf-guest { flex-wrap: wrap; }
  .pf-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  /* Les boutons en majuscules sont plus larges : les lignes de réglages passent à la ligne */
  .set-row { flex-wrap: wrap; }
  .set-row .txt { flex: 1 1 200px; }
  .legal .btn, .set-row .btn { white-space: normal; height: auto; min-height: 34px; padding-top: 8px; padding-bottom: 8px; line-height: 1.2; }
}

/* ── Épisodes : carte « À suivre », sous-barre (tri, aller à) ─────────── */
.nextup { position: relative; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: center; gap: 20px; margin-bottom: 22px; padding: 12px; border-radius: var(--r-lg); background: linear-gradient(100deg, rgba(var(--accent-rgb), .16), var(--surface) 55%); border: 1px solid rgba(var(--accent-rgb), .3); }
.nextup .card-link { border-radius: var(--r-lg); }
.nextup-media { position: relative; border-radius: var(--r); overflow: hidden; }
.nextup-media .card-progress { height: 4px; }
.nextup-play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; }
.nextup-play svg { width: 54px; height: 54px; padding: 15px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; transition: background var(--dur) var(--ease); }
.nextup:hover .nextup-play svg { background: var(--accent); }
.nextup-text { min-width: 0; pointer-events: none; }
.nextup-kicker { display: inline-block; margin-bottom: 6px; color: var(--accent-text); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.nextup-text h3 { font-size: clamp(17px, 1.6vw, 22px); font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.nextup-text p { margin-top: 4px; color: var(--text-3); font-size: 13.5px; font-weight: 500; }
.nextup-text .nextup-pct { color: var(--text-2); }
.ep-subbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: -4px 0 16px; }
.ep-subbar .spacer { flex: 1; }
.ep-subbar .ep-ranges { margin: 0; }
.ep-jump { display: flex; gap: 6px; }
.ep-jump .field { width: 130px; height: 34px; padding: 0 12px; font-size: 13px; }
.ep-jump .field::-webkit-inner-spin-button { display: none; }
.eprow.flash, .epcard.flash { animation: ep-flash 1.6s ease; }
@keyframes ep-flash { 0%, 60% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (max-width: 640px) {
  .nextup { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 8px; }
  .nextup-play svg { width: 40px; height: 40px; padding: 11px; }
  .nextup-text h3 { font-size: 15px; }
  .ep-subbar .spacer { display: none; }
}