/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"Manrope","arguments":[{"subsets":["latin"],"variable":"--font-sans","display":"swap"}],"variableName":"manrope"} ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: '__Manrope_73ee6c';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/_next/static/media/438aa629764e75f3-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__Manrope_73ee6c';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/_next/static/media/875ae681bfde4580-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: '__Manrope_73ee6c';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/_next/static/media/51251f8b9793cdb3-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: '__Manrope_73ee6c';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/_next/static/media/e857b654a2caa584-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Manrope_73ee6c';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/_next/static/media/cc978ac5ee68c2b6-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Manrope_73ee6c';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/_next/static/media/4c9affa5bc8f420e-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: '__Manrope_Fallback_73ee6c';src: local("Arial");ascent-override: 103.31%;descent-override: 29.07%;line-gap-override: 0.00%;size-adjust: 103.19%
}.__className_73ee6c {font-family: '__Manrope_73ee6c', '__Manrope_Fallback_73ee6c';font-style: normal
}.__variable_73ee6c {--font-sans: '__Manrope_73ee6c', '__Manrope_Fallback_73ee6c'
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"Sora","arguments":[{"subsets":["latin"],"variable":"--font-display","display":"swap"}],"variableName":"sora"} ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* latin-ext */
@font-face {
  font-family: '__Sora_ce197d';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/_next/static/media/1d4eaed977255102-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Sora_ce197d';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/_next/static/media/f3f7e95f2dbc4fe4-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: '__Sora_Fallback_ce197d';src: local("Arial");ascent-override: 85.29%;descent-override: 25.50%;line-gap-override: 0.00%;size-adjust: 113.73%
}.__className_ce197d {font-family: '__Sora_ce197d', '__Sora_Fallback_ce197d';font-style: normal
}.__variable_ce197d {--font-display: '__Sora_ce197d', '__Sora_Fallback_ce197d'
}

/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
:root {
  --ink: #0a0c10;
  --ink-2: #14171f;
  --ink-3: #1c2029;
  --line: #262c36;
  --line-2: #363d49;
  --paper: #ede8df;
  --muted: #8b929e;
  --amber: #e0a458;
  --amber-2: #f0b878;
  --danger: #e5807a;
  --radius: 16px;
  --radius-sm: 11px;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  --ring: 0 0 0 3px rgba(224, 164, 88, 0.22);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; scrollbar-color: #333a47 #0d0f14; }
html, body { margin: 0; padding: 0; }
/* Les <button> n'héritent pas de la police de la page : sans ceci ils tombent
   sur la police système du navigateur (souvent Arial), différente du site. */
button { font: inherit; }
body {
  background:
    radial-gradient(1200px 600px at 15% -220px, rgba(224, 164, 88, 0.08) 0%, rgba(224, 164, 88, 0) 60%),
    radial-gradient(1100px 520px at 85% -180px, #1b2029 0%, rgba(27, 32, 41, 0) 70%),
    var(--ink);
  background-attachment: fixed;
  color: var(--paper);
  font-family: var(--font-sans), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Colle le footer en bas même quand la page est courte. */
  min-height: 100dvh; display: flex; flex-direction: column;
}
a { color: inherit; text-decoration: none; }
::selection { background: rgba(224, 164, 88, 0.28); }

.container { max-width: 1000px; width: 100%; margin: 0 auto; padding: 40px 20px 80px; flex: 1 0 auto; }
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 24px 40px; border-bottom: 1px solid var(--line);
  position: -webkit-sticky;
  position: sticky; top: 0; z-index: 5;
  background: rgba(10, 12, 16, 0.7); backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.wordmark {
  font-weight: 800; letter-spacing: 0.28em; font-size: 17px; color: var(--paper);
  font-family: var(--font-display), ui-sans-serif, system-ui, sans-serif;
  display: inline-flex; align-items: center;
}
.logo {
  width: 28px; height: 28px; margin-right: 15px; border-radius: 6px;
  box-shadow: 0 0 11px rgba(224, 164, 88, 0.35);
}
nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 22px; align-items: center; font-size: 15px; color: var(--muted); }
/* Les libellés ne se coupent jamais en plein milieu ; si la barre déborde, elle se
   replie proprement par éléments entiers (utile quand l'admin a des liens en plus). */
nav a, nav .link-btn { white-space: nowrap; transition: color 0.15s ease; }
nav a:hover { color: var(--paper); }
/* Page courante : texte clair + soulignement ambré sous le lien. */
.site-header nav a.active { color: var(--paper); position: relative; }
.site-header nav a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px;
  border-radius: 99px; background: linear-gradient(90deg, var(--amber-2), var(--amber));
  box-shadow: 0 0 8px rgba(224, 164, 88, 0.5);
}
.inline { display: inline; }
.link-btn { background: none; border: none; color: var(--muted); cursor: pointer; font: inherit; padding: 0; transition: color 0.15s ease; }
.link-btn:hover { color: var(--paper); }

h1 {
  font-size: clamp(28px, 4vw, 36px); letter-spacing: -0.025em; margin: 0 0 8px; font-weight: 800;
  font-family: var(--font-display), ui-sans-serif, system-ui, sans-serif;
  line-height: 1.12; text-wrap: balance;
  background: linear-gradient(180deg, var(--paper), #c9c3b7);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
h2 {
  font-size: 19px; margin: 40px 0 16px; letter-spacing: -0.01em; font-weight: 700;
  font-family: var(--font-display), ui-sans-serif, system-ui, sans-serif;
  display: inline-flex; align-items: center; gap: 10px;
}
/* Mot mis en avant dans un titre : dégradé ambré (le h1 reste crème). */
.grad {
  background: linear-gradient(90deg, var(--amber-2), var(--amber));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
h2::before {
  content: ""; width: 4px; height: 17px; border-radius: 99px;
  background: linear-gradient(180deg, var(--amber-2), var(--amber));
}
.subtle { color: var(--muted); font-size: 14px; }
/* Pied de page complet : bloc marque + colonnes de liens, puis barre légale. */
.site-footer {
  color: var(--muted);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(20, 23, 31, 0) 0%, rgba(20, 23, 31, 0.55) 100%);
}
.footer-inner {
  max-width: 1000px; margin: 0 auto; padding: 56px 20px 40px;
  display: grid; grid-template-columns: 2.2fr 1fr 1fr; grid-gap: 48px; gap: 48px;
}
.footer-brand { max-width: 340px; }
.footer-wordmark {
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 800; letter-spacing: 0.22em; font-size: 15px; color: var(--paper);
  font-family: var(--font-display), ui-sans-serif, system-ui, sans-serif;
}
.footer-wordmark .logo { width: 26px; height: 26px; margin: 0; }
.footer-tagline { margin: 16px 0 18px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.footer-badges { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; }
.foot-badge {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--amber-2);
  padding: 4px 10px; border-radius: 99px;
  background: rgba(224, 164, 88, 0.1); border: 1px solid rgba(224, 164, 88, 0.24);
}
.footer-col { display: flex; flex-direction: column; align-items: flex-start; }
.footer-col h3 {
  margin: 0 0 15px; font-size: 12px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--paper);
}
.footer-col a, .footer-link-btn {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--muted); font-size: 14px; padding: 6px 0; line-height: 1.3;
  background: none; border: none; cursor: pointer; font: inherit; text-align: left;
  transition: color 0.15s ease, transform 0.15s ease;
}
.footer-col a:hover, .footer-link-btn:hover { color: var(--amber-2); transform: translateX(2px); }

.footer-bottom {
  max-width: 1000px; margin: 0 auto; padding: 22px 20px 40px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 12px 28px;
  flex-wrap: wrap; font-size: 12px; color: var(--muted);
}
.footer-bottom p { margin: 0; }
.footer-disclaimer { opacity: 0.85; }

@media (max-width: 720px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 36px 24px; padding: 44px 20px 32px; }
  .footer-brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 440px) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

.card {
  background: linear-gradient(180deg, var(--ink-2), #10131a);
  border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px;
  /* Fin liseré lumineux en haut : donne du relief aux cartes sur fond sombre. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--shadow-sm);
}
/* Bibliothèque : grille fluide, 1 colonne en mobile, plusieurs en large. */
.grid { display: grid; grid-gap: 14px; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }

/* Pagination « 10 par 10 » sous chaque catégorie : boutons centrés, compteur discret. */
.load-more-row { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.load-more, .load-less { display: inline-flex; align-items: center; gap: 9px; min-width: 220px; justify-content: center; }
.load-more svg, .load-less svg { flex: none; color: var(--amber); }
.load-more-count { color: var(--muted); font-weight: 500; font-size: 13px; }

/* Cartes de bibliothèque (séries et films) : légère élévation au survol.
   Disposition : variante .show-card-split ci-dessous — affiche pleine hauteur à
   gauche, titre/note, actions et progression empilés à droite. */
.card.show-card { display: flex; flex-direction: column; gap: 11px; transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease; overflow: hidden; }
.card.show-card:hover {
  transform: translateY(-3px); border-color: rgba(224, 164, 88, 0.4);
  box-shadow: var(--shadow), 0 4px 28px rgba(224, 164, 88, 0.09);
}
.card.show-card:hover .poster { transform: scale(1.05); }

/* Variante « série/manga avec épisodes » (ShowCard) : affiche plaquée à gauche sur toute
   la hauteur de la carte, puis titre/note, actions et progression empilés à droite. */
.card.show-card.show-card-split { flex-direction: row; align-items: stretch; gap: 0; padding: 0; min-height: 132px; }
.show-card-split .show-poster-link { flex: none; margin: 0; overflow: hidden; }
.show-card-split .poster { width: 90px; height: 100%; border-radius: 0; box-shadow: none; }
.show-card-split .show-body {
  flex: 1 1; min-width: 0; padding: 16px; position: relative;
  display: flex; flex-direction: column; justify-content: space-between; gap: 11px;
}
.show-card-split .show-row { flex-wrap: wrap; }
/* Toute la partie droite de la carte (titre, zones vides, méta) est cliquable et
   mène à la fiche : on étire le lien du titre en calque sur tout le .show-body via
   un pseudo-élément. Les contrôles de la ligne d'actions repassent au-dessus du
   calque (z-index) pour rester cliquables indépendamment. */
.show-card-split .show-title-link::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
}
.show-card-split .show-row > * { position: relative; z-index: 1; }

.show-row { display: flex; gap: 14px; align-items: center; min-width: 0; }
/* Affiche cliquable (lien vers la série) : largeur fixe à gauche, les actions
   sont poussées à droite de la ligne. */
.show-poster-link { position: relative; flex: none; display: inline-flex; text-decoration: none; color: inherit; margin-right: auto; }
/* Série terminée (tous les épisodes vus, aucun à venir) : la partie droite (fond sombre)
   se pare d'un semis de confettis multicolores, purement décoratif. Le fond est peint
   sous le contenu de l'élément, le texte reste donc lisible sans z-index dédié. */
.show-body-completed {
  position: relative;
  background-color: rgba(46, 196, 109, 0.04);
  background-image:
    radial-gradient(rgba(224, 164, 88, 0.5) 1.8px, transparent 2.2px),
    radial-gradient(rgba(74, 208, 122, 0.5) 1.8px, transparent 2.2px),
    radial-gradient(rgba(90, 169, 230, 0.5) 2px, transparent 2.4px),
    radial-gradient(rgba(230, 96, 122, 0.5) 1.8px, transparent 2.2px);
  background-size: 84px 84px, 96px 96px, 108px 108px, 92px 92px;
  background-position: 0 0, 40px 26px, 66px 58px, 18px 62px;
  background-repeat: repeat;
}
/* Bloc méta sur sa propre ligne, pleine largeur en bas de la carte :
   « x/y épisodes · z% » à gauche et la barre de progression à droite. */
.show-meta {
  display: flex; flex-direction: row; align-items: center; gap: 12px; min-width: 0;
  text-decoration: none; color: inherit;
}
.show-meta .subtle { flex: none; white-space: nowrap; }
.show-meta .progress { flex: 1 1; margin-top: 0; }
/* Titre : pleine largeur de la carte, sur une seule ligne (tronqué si vraiment très long). */
.show-title-link { display: block; min-width: 0; text-decoration: none; color: inherit; }
.show-title { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.poster {
  width: 48px; height: 72px; border-radius: 9px; object-fit: cover;
  background: var(--ink-3); flex: none; display: inline-block; box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease;
}
/* Affiche manquante (span vide) : clap centré en filigrane plutôt qu'un bloc nu. */
span.poster { display: inline-flex; align-items: center; justify-content: center; }
span.poster::after { content: "🎬"; font-size: 17px; opacity: 0.3; filter: grayscale(1); }
.progress { height: 6px; background: var(--ink-3); border-radius: 99px; overflow: hidden; margin-top: 8px; }
.progress > span {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--amber), var(--amber-2));
  box-shadow: 0 0 12px rgba(224, 164, 88, 0.45);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn {
  background: linear-gradient(180deg, var(--amber-2), var(--amber)); color: #1a1206;
  border: none; border-radius: var(--radius-sm); padding: 9px 15px; font-weight: 650; cursor: pointer;
  /* Reflet en haut du bouton plein : effet « poli » discret. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), var(--shadow-sm);
  transition: filter 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease; white-space: nowrap;
}
.btn:hover { filter: brightness(1.07); box-shadow: 0 6px 18px rgba(224, 164, 88, 0.28); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--paper); border: 1px solid var(--line-2); box-shadow: none; }
.btn.ghost:hover { border-color: var(--amber); color: var(--amber-2); background: rgba(224, 164, 88, 0.06); box-shadow: none; }
.btn:disabled { opacity: 0.45; cursor: default; filter: none; transform: none; box-shadow: var(--shadow-sm); }
.btn-sm { padding: 6px 12px; font-size: 13px; }
/* Statut « En cours » : fond ambré translucide, distinct du plein « ✓ Vu ». */
.btn.ghost.ongoing { background: rgba(224, 164, 88, 0.16); border-color: var(--amber); color: var(--amber-2); }
.btn.ghost.ongoing:hover { background: rgba(224, 164, 88, 0.24); border-color: var(--amber); }

/* Bouton « demander sur Emby » (membres du groupe Emby). Accent vert Emby, distinct
   de l'ambre du site. Quatre états : demander (creux) / demandé (.done, plein) /
   ajout en cours (.downloading, bleu) / introuvable (.not-found, rouge). Les trois
   derniers sont informatifs : marqués aria-disabled (et non disabled) pour que
   leur infobulle s'affiche, ils doivent donc être neutralisés ici à la main. */
.emby-btn {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer;
  padding: 6px 12px; font-size: 13px; font-weight: 650; border-radius: var(--radius-sm);
  background: rgba(82, 181, 75, 0.12); color: #6fce68; border: 1px solid rgba(82, 181, 75, 0.5);
  transition: filter 0.15s ease, transform 0.08s ease, background 0.15s ease, border-color 0.15s ease;
}
.emby-btn:hover { background: rgba(82, 181, 75, 0.2); border-color: #52b54b; }
.emby-btn:active { transform: translateY(1px); }
.emby-btn.done {
  background: linear-gradient(180deg, #63c95c, #52b54b); color: #08240a; border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), var(--shadow-sm); cursor: default;
}
.emby-btn:disabled { cursor: default; }
.emby-btn.done:disabled { opacity: 1; }
/* États informatifs : plus cliquables, donc ni curseur main, ni enfoncement au clic. */
.emby-btn[aria-disabled="true"] { cursor: default; opacity: 1; }
.emby-btn[aria-disabled="true"]:active { transform: none; }
.emby-btn.done:hover { filter: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), var(--shadow-sm); }
/* Demande acceptée par qBittorrent : bleu « en cours », distinct du vert « demandé »
   et de l'ambre déjà utilisé ailleurs pour « En cours » (DejaVuButton). */
.emby-btn.downloading {
  background: rgba(90, 156, 232, 0.16); color: #8ec0f2; border-color: rgba(90, 156, 232, 0.55);
  cursor: default;
}
.emby-btn.downloading:hover { background: rgba(90, 156, 232, 0.16); border-color: rgba(90, 156, 232, 0.55); }
.emby-btn.downloading:disabled { opacity: 1; }
/* L'arc de l'icône tourne : dit « ça travaille » sans texte supplémentaire. */
@media (prefers-reduced-motion: no-preference) {
  .emby-btn.downloading svg { animation: emby-spin 1.7s linear infinite; }
}
@keyframes emby-spin { to { transform: rotate(360deg); } }
/* Signalé introuvable par l'admin : neutre/rouge, non cliquable. */
.emby-btn.not-found {
  background: rgba(224, 115, 107, 0.12); color: #e0736b; border-color: rgba(224, 115, 107, 0.5);
  cursor: default;
}
.emby-btn.not-found:hover { background: rgba(224, 115, 107, 0.12); border-color: rgba(224, 115, 107, 0.5); }
.emby-btn.not-found:disabled { opacity: 1; }
.card.show-card .emby-btn { padding: 6px 10px; font-size: 12px; }

/* Listes des pages admin Emby (membres, historique). */
.admin-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.admin-list-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--ink-2);
}
/* Épisode/film pas encore sorti : pastille discrète avec la date, à la place du bouton « À voir ». */
.upcoming-date {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: none;
  padding: 8px 13px; font-size: 13px; font-weight: 500; color: var(--muted);
  background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.upcoming-date::before { content: "📅"; font-size: 12px; }

.icon-btn {
  background: transparent; border: 1px solid var(--line-2); color: var(--muted);
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer; flex: none;
  font-size: 13px; line-height: 1; transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.icon-btn:hover { color: var(--danger); border-color: var(--danger); background: rgba(229, 128, 122, 0.09); }
.icon-btn:disabled { opacity: 0.4; cursor: default; }

/* Menu déroulant maison réutilisable (composant Dropdown) : catégories des cartes,
   filtres de recherche… Style entièrement maîtrisé, coins arrondis, portail flottant. */
.dd { position: relative; flex: none; }
.dd-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 7px 11px; font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.2px;
  color: var(--paper); background: var(--ink-3);
  border: 1px solid var(--line); border-radius: 10px;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.dd-btn:hover { color: var(--amber-2); background: #20242e; border-color: var(--line-2); }
.dd-btn:focus-visible { outline: none; border-color: var(--amber); box-shadow: var(--ring); }
.dd-btn:disabled { opacity: 0.5; cursor: default; }
.dd-placeholder { color: var(--muted); }
.dd-caret { color: var(--muted); flex: none; transition: transform 0.18s ease, color 0.15s ease; }
.dd-btn:hover .dd-caret { color: var(--amber-2); }
.dd-btn[aria-expanded="true"] .dd-caret { transform: rotate(180deg); color: var(--amber-2); }

/* Liste flottante : coins bien arrondis, ombre portée, petite animation d'apparition. */
.dd-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  min-width: 150px; max-width: min(280px, 90vw); max-height: min(320px, 60vh); overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
  margin: 0; padding: 6px; list-style: none;
  background: linear-gradient(180deg, #1a1e27, var(--ink-2));
  border: 1px solid var(--line-2); border-radius: 14px;
  box-shadow: var(--shadow);
  animation: dd-in 0.14s ease;
}
@keyframes dd-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
.dd-menu li { margin: 0; }
.dd-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; cursor: pointer; text-align: left;
  padding: 9px 11px; font: inherit; font-size: 13px; font-weight: 500;
  color: var(--paper); background: transparent; border: none; border-radius: 9px;
  transition: background 0.12s ease, color 0.12s ease;
}
.dd-opt:hover, .dd-opt:focus-visible { background: rgba(224, 164, 88, 0.12); color: var(--amber-2); outline: none; }
.dd-opt.selected { color: var(--amber-2); font-weight: 650; }
.dd-opt.selected svg { color: var(--amber); }

input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%; background: var(--ink-3); border: 1px solid var(--line); color: var(--paper);
  border-radius: var(--radius-sm); padding: 10px 12px; font: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Zone de message (annonce admin) : redimensionnable en hauteur seulement. */
textarea { resize: vertical; line-height: 1.55; }
input:hover, select:hover, textarea:hover { border-color: var(--line-2); }
input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible, .icon-btn:focus-visible, a:focus-visible {
  outline: none; border-color: var(--amber); box-shadow: var(--ring);
}
input[type=file] { color: var(--muted); font-size: 14px; }
input[type=file]::-webkit-file-upload-button {
  background: var(--ink-3); color: var(--paper); border: 1px solid var(--line-2);
  border-radius: 8px; padding: 8px 12px; margin-right: 12px; cursor: pointer; font: inherit;
}
input[type=file]::file-selector-button {
  background: var(--ink-3); color: var(--paper); border: 1px solid var(--line-2);
  border-radius: 8px; padding: 8px 12px; margin-right: 12px; cursor: pointer; font: inherit;
}
input[type=file]::-webkit-file-upload-button:hover { border-color: var(--paper); }
input[type=file]::file-selector-button:hover { border-color: var(--paper); }
label { display: block; font-size: 13px; color: var(--muted); margin: 12px 0 4px; }

/* Formulaire de connexion / inscription : espacement régulier, actions équilibrées. */
.auth-form { margin-top: 16px; }
.auth-form label:first-child { margin-top: 0; }
.auth-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.auth-actions .btn { flex: 1 1 140px; }

/* Écran « vérifiez vos e-mails » après une inscription (compte pas encore créé). */
.auth-check { text-align: center; }
.auth-check-ico {
  width: 52px; height: 52px; margin: 4px auto 14px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--amber-2);
  background: rgba(224, 164, 88, 0.12); border: 1px solid rgba(224, 164, 88, 0.25);
}
.auth-check h2 { display: block; margin: 0 0 10px; }
.auth-check h2::before { display: none; }
.auth-check p { margin: 0 auto 8px; max-width: 40ch; }
.auth-check-hint { font-size: 13px; opacity: 0.8; }
.auth-check .btn { margin-top: 12px; }

/* « Continuer avec Google » : bouton pleine largeur, icône + libellé centrés. */
.google-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; text-decoration: none; }
/* Séparateur « ou » entre l'auth Google et le formulaire email. */
.auth-sep { display: flex; align-items: center; gap: 10px; margin: 16px 0 4px; color: var(--muted); font-size: 13px; }
.auth-sep::before, .auth-sep::after { content: ""; flex: 1 1; height: 1px; background: var(--line-2); }

/* Panneau de recherche : à gauche, les champs (titre + filtres) empilés ;
   à droite, le bouton « Chercher » étiré sur les deux lignes. */
.search-panel { display: flex; gap: 8px; align-items: stretch; }
/* Recherche scindée : bibliothèque (locale) + « ajouter un titre » (TMDB). */
.search-section { margin-top: 18px; }
.search-section-head {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}
.search-reset { margin-top: 12px; }
.search-fields { flex: 1 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.search-fields .f-grow { width: 100%; }
/* Le bouton couvre toute la hauteur du bloc de champs (titre + filtres). */
.search-go { align-self: stretch; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 24px; font-weight: 650; white-space: nowrap; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters input { width: auto; }
/* Chaque filtre grandit pour occuper la largeur, harmonisé avec le champ Titre. */
.filters .dd { flex: 1 1 130px; min-width: 120px; }
/* Dans les filtres de recherche, les menus TYPE/GENRE adoptent le même style
   que les champs ANNÉE/ACTEUR : poids normal, sans letter-spacing, même rayon,
   et un survol neutre (seule la bordure s'éclaircit) plutôt que le survol ambré. */
.filters .dd-btn {
  width: 100%; justify-content: space-between; padding: 10px 12px;
  font-size: inherit; font-weight: normal; letter-spacing: normal; line-height: 1.55;
  border-radius: var(--radius-sm);
}
.filters .dd-btn:hover { color: var(--paper); background: var(--ink-3); border-color: var(--line-2); }
.filters .dd-btn:hover .dd-caret { color: var(--muted); }
.filters .f-year { flex: 0 0 104px; width: 104px; }
.filters .f-actor { flex: 1 1 150px; min-width: 130px; }

/* Mobile : tout s'empile, le bouton passe en pleine largeur tout en bas. */
@media (max-width: 560px) {
  .search-panel { flex-direction: column; }
  .search-go { width: 100%; padding: 11px 24px; }
}

/* Deux actions d'ajout (Vu / À voir) empilées à droite d'un résultat. */
.row-actions { display: flex; flex-direction: column; gap: 6px; flex: none; }
.row-actions .btn { padding: 6px 11px; font-size: 13px; }

/* En-tête de saison : titre à gauche, bouton « Vu » à droite, centrés verticalement.
   La marge vit sur le conteneur (pas sur le h2) pour un vrai centrage flex. */
.season-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 34px 0 14px; }
.season-head h2 { margin: 0; }

.ep {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 4px; border-bottom: 1px solid var(--line); transition: background 0.15s ease;
}
.ep:hover { background: rgba(255, 255, 255, 0.02); }
.ep .num { color: var(--muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; margin-right: 10px; }
.watched { color: var(--amber); }
.error { color: var(--danger); font-size: 14px; margin-top: 10px; }
/* Message positif (confirmation, info) : encart ambré discret. */
.notice {
  color: var(--amber-2); font-size: 14px; margin: 4px 0 12px; padding: 10px 14px;
  background: rgba(224, 164, 88, 0.1); border: 1px solid rgba(224, 164, 88, 0.28); border-radius: var(--radius-sm);
}
.badge {
  display: inline-block; margin-top: 5px; font-size: 11px; color: var(--amber);
  border: 1px solid var(--line-2); border-radius: 99px; padding: 2px 9px;
  letter-spacing: 0.03em; background: rgba(224, 164, 88, 0.08);
}

/* Note publique TMDB (composant Rating), affichée près des titres/épisodes. */
.rating {
  display: inline-flex; align-items: center; gap: 4px; flex: none; white-space: nowrap;
  font-size: 12.5px; font-weight: 650; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--paper);
  padding: 3px 9px; border-radius: 99px;
  background: rgba(224, 164, 88, 0.12); border: 1px solid rgba(224, 164, 88, 0.28);
}
.rating-star { color: var(--amber); font-size: 12px; line-height: 1; }
/* Titre de carte + note sur une même ligne, note calée à droite. */
.show-head { display: flex; align-items: center; gap: 10px; }
.show-head > :first-child { flex: 1 1 auto; min-width: 0; }
/* Ligne d'épisode : note + bouton groupés à droite. */
.ep-actions { display: inline-flex; align-items: center; gap: 10px; flex: none; }
/* Résultats de recherche : badge type + note alignés. */
.hit-tags { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.hit-tags .badge { margin-top: 0; }

/* ==================== Responsive ==================== */

/* Titre + nom d'épisode : autorise la troncature/retour à la ligne face au bouton. */
.ep > span:first-child { min-width: 0; }

/* Tablette et en dessous : on resserre l'espacement général et l'en-tête. */
@media (max-width: 680px) {
  .container { padding: 28px 16px 64px; }
  .site-header { padding: 18px 22px; gap: 18px; }
  .wordmark { letter-spacing: 0.18em; font-size: 15px; }
  .logo { width: 24px; height: 24px; margin-right: 12px; }
  nav { gap: 10px 18px; font-size: 14px; }
  h2 { margin: 32px 0 12px; }
}

/* Mobile : l'en-tête passe sur deux lignes (marque puis nav pleine largeur),
   ce qui évite tout débordement, même connecté (« Se déconnecter »). */
@media (max-width: 480px) {
  .site-header { flex-wrap: wrap; gap: 14px 0; padding: 16px 18px; }
  .wordmark { font-size: 15px; }
  nav { width: 100%; justify-content: space-between; gap: 18px; }
  nav a, .link-btn { font-size: 14px; }
  /* Cartes bibliothèque : actions plus compactes pour laisser le titre respirer. */
  .card.show-card { padding: 13px; gap: 10px; }
  .card.show-card .btn { padding: 6px 10px; font-size: 12px; }
  /* Variante scindée : affiche un peu plus étroite, contenu resserré. */
  .show-card-split .poster { width: 76px; }
  .show-card-split .show-body { padding: 12px 13px; gap: 9px; }
  .show-row { gap: 10px; }
}

/* Très petits écrans : on réduit encore l'interlettrage de la marque. */
@media (max-width: 340px) {
  .wordmark { letter-spacing: 0.08em; }
  nav { gap: 10px; }
}

/* ==================== Page d'accueil (landing) ==================== */
.lp-hero { text-align: center; padding: 22px 0 4px; }
.lp-hero .badge { margin: 0 0 20px; font-size: 12px; padding: 5px 13px; letter-spacing: 0.02em; }
.lp-hero h1 { max-width: 20ch; margin: 0 auto 18px; font-size: clamp(32px, 5.4vw, 56px); }
.lp-lead { color: var(--muted); font-size: clamp(16px, 2vw, 19px); max-width: 60ch; margin: 0 auto; line-height: 1.6; text-wrap: pretty; }
.lp-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 28px 0 16px; }
.lp-cta-row .btn { padding: 12px 22px; font-size: 16px; }
.lp-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; color: var(--muted); font-size: 13px; margin: 0; }
.lp-trust span { display: inline-flex; align-items: center; gap: 7px; }
.lp-trust svg, .lp-chip svg { color: var(--amber); flex: none; }

/* Aperçu produit (décoratif) */
.lp-art { max-width: 540px; margin: 40px auto 0; }
.lp-mock {
  display: grid; grid-gap: 12px; gap: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--shadow-sm), 0 24px 80px rgba(224, 164, 88, 0.08);
}
/* Trois pastilles « fenêtre d'application » en tête de l'aperçu. */
.lp-mock::before {
  content: ""; width: 9px; height: 9px; border-radius: 99px; margin: 2px 0 1px;
  background: #e5807a; box-shadow: 16px 0 0 #e0c368, 32px 0 0 #8fbf8e;
}
.lp-mock-row { display: flex; align-items: center; gap: 13px; }
.lp-mock-row + .lp-mock-row { border-top: 1px solid var(--line); padding-top: 12px; }
.lp-mock-poster { width: 42px; height: 62px; border-radius: 8px; flex: none; object-fit: cover; background: var(--ink-3); box-shadow: var(--shadow-sm); }
.lp-mock-meta { flex: 1 1; min-width: 0; }
.lp-mock-meta strong { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-mock-meta .subtle { font-size: 12.5px; }
.lp-mock .progress { margin-top: 8px; }
.lp-mock-tag { flex: none; font-size: 11px; color: var(--amber); white-space: nowrap; border: 1px solid var(--line-2); border-radius: 99px; padding: 3px 10px; background: rgba(224, 164, 88, 0.08); }
.lp-mock-tag.done { color: #1a1206; border-color: transparent; background: linear-gradient(180deg, var(--amber-2), var(--amber)); }

/* Sections */
.lp-section { margin-top: 66px; }
.lp-head { text-align: center; margin-bottom: 30px; }
.lp-head h2 { margin: 0 0 10px; }
.lp-head p { max-width: 52ch; margin: 0 auto; text-wrap: pretty; }

/* Fonctionnalités */
.lp-features { display: grid; grid-gap: 14px; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.lp-feature { transition: transform 0.16s ease, border-color 0.16s ease; }
.lp-feature:hover { transform: translateY(-3px); border-color: var(--line-2); }
.lp-ico { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 14px; display: inline-flex; align-items: center; justify-content: center; color: var(--amber-2); background: rgba(224, 164, 88, 0.12); border: 1px solid rgba(224, 164, 88, 0.25); }
.lp-feature h3, .lp-step h3 { margin: 0 0 7px; font-size: 16.5px; font-weight: 720; }
.lp-feature p, .lp-step p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

/* Étapes */
.lp-steps { display: grid; grid-gap: 14px; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.lp-num { width: 36px; height: 36px; border-radius: 99px; margin-bottom: 14px; display: inline-flex; align-items: center; justify-content: center; font-weight: 820; color: #1a1206; background: linear-gradient(180deg, var(--amber-2), var(--amber)); box-shadow: var(--shadow-sm); }

/* Valeurs */
.lp-values { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.lp-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; padding: 9px 15px; border: 1px solid var(--line); border-radius: 99px; background: linear-gradient(180deg, var(--ink-2), #10131a); }

/* FAQ */
.lp-faq { display: grid; grid-gap: 10px; gap: 10px; max-width: 760px; margin: 0 auto; }
.lp-faq details { border: 1px solid var(--line); border-radius: var(--radius-sm); background: linear-gradient(180deg, var(--ink-2), #10131a); overflow: hidden; }
.lp-faq details[open] { border-color: var(--line-2); }
.lp-faq summary { cursor: pointer; padding: 15px 18px; font-weight: 650; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; transition: color 0.15s ease; }
.lp-faq summary:hover { color: var(--amber-2); }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; color: var(--amber); font-size: 22px; line-height: 1; flex: none; transition: transform 0.2s ease; }
.lp-faq details[open] summary::after { transform: rotate(45deg); }
.lp-faq p { margin: 0; padding: 0 18px 16px; color: var(--muted); font-size: 14px; line-height: 1.65; }

/* CTA final */
.lp-final { text-align: center; padding: 44px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(600px 220px at 50% -60px, rgba(224, 164, 88, 0.13), rgba(224, 164, 88, 0) 70%), linear-gradient(180deg, var(--ink-2), #10131a); }
.lp-final h2 { margin: 0 0 10px; }
.lp-final h2::before { display: none; }
.lp-final p { color: var(--muted); max-width: 48ch; margin: 0 auto 22px; }
.lp-final .btn { padding: 12px 24px; font-size: 16px; }

@media (max-width: 680px) {
  .lp-section { margin-top: 52px; }
  .lp-cta-row .btn, .lp-final .btn { width: 100%; }
}

/* Apparition douce des cartes de la landing au défilement. Amélioration
   progressive : seulement si le navigateur gère les animations pilotées par le
   scroll, et si l'utilisateur n'a pas demandé à réduire les animations. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .lp-feature, .lp-step, .lp-chip {
      animation: lp-rise 1ms linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
    /* Anime `translate` (et non `transform`) pour ne pas écraser l'élévation
       au survol des cartes, qui vit sur `transform`. */
    @keyframes lp-rise {
      from { opacity: 0; translate: 0 16px; }
      to { opacity: 1; translate: 0 0; }
    }
  }
}

/* ==================== Compteurs de bibliothèque ==================== */

/* Petites pastilles « X films vus / Y séries terminées… » sous le total. */
.lib-stats {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.lib-stats li {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 11px; border-radius: 99px; font-size: 13px; color: var(--muted);
  background: var(--ink-3); border: 1px solid var(--line);
}
.lib-stats strong {
  color: var(--amber); font-weight: 700; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
/* Libellé « Stats : » avec son icône — sans pastille, aligné avec les compteurs. */
.lib-stats .lib-stats-label {
  align-items: center; gap: 6px; padding: 5px 4px 5px 0; background: none; border: none;
  color: var(--paper); font-weight: 700;
}
.lib-stats .lib-stats-label svg { color: var(--amber); flex: none; }

/* ==================== Bouton « Haut de page » ==================== */

/* Bouton flottant en bas à droite, masqué tant qu'on n'a pas défilé.
   pointer-events: none à l'état caché pour ne pas gêner les clics dessous. */
.scroll-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 40;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer;
  color: var(--ink); background: linear-gradient(135deg, var(--amber), var(--amber-2));
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: var(--shadow), 0 0 14px rgba(224, 164, 88, 0.35);
  opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.scroll-top.show { opacity: 1; transform: none; pointer-events: auto; }
.scroll-top:hover { filter: brightness(1.08); box-shadow: var(--shadow), 0 0 20px rgba(224, 164, 88, 0.55); }
.scroll-top:active { transform: translateY(1px); }
.scroll-top:focus-visible { outline: none; box-shadow: var(--ring), var(--shadow); }
@media (max-width: 640px) {
  .scroll-top { right: 14px; bottom: 14px; width: 40px; height: 40px; }
}

/* ==================== Accessibilité ==================== */

/* L'utilisateur a demandé à son OS de réduire les animations : on coupe
   transitions, animations et défilement doux, sans toucher aux styles finaux. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}