:root {
    --bg: #14171c;
    --bg-panel: #1c2028;
    --bg-input: #10131a;
    --bg-btn: #262b35;
    --bg-btn-hover: #2d3340;
    --border: #2a2f3a;
    --text: #e4e6eb;
    --text-muted: #8a90a0;
    --accent: #4f8cff;
    --accent-hover: #6ea0ff;
    --accent-text: #0b0f16;
    --ok: #3ddc84;
    --warn: #ffb454;
    --err: #ff5c5c;
    --accent-rgb: 79, 140, 255;
    --ok-rgb: 61, 220, 132;
    --warn-rgb: 255, 180, 84;
    --err-rgb: 255, 92, 92;
    --danger-border: #7a2b2b;
    --danger-bg-hover: #3a1a1a;
    --radius: 8px;
}

/*
 * Thèmes : chaque bloc ne fait que surcharger les variables ci-dessus. Tout le
 * reste de cette feuille de style est construit exclusivement sur var(--xxx) —
 * aucune couleur codée en dur ailleurs — donc un thème n'a qu'à redéfinir sa
 * palette ici pour reskinner l'application entière, sans toucher aux règles
 * des composants plus bas.
 */
:root[data-theme="clair"] {
    --bg: #f3f4f6;
    --bg-panel: #ffffff;
    --bg-input: #f7f8fa;
    --bg-btn: #eef0f3;
    --bg-btn-hover: #e3e6ea;
    --border: #dde1e7;
    --text: #1a1d24;
    --text-muted: #5b6472;
    --accent: #2f6fed;
    --accent-hover: #1c58d1;
    --accent-text: #ffffff;
    --ok: #17a34a;
    --warn: #c96a06;
    --err: #dc2828;
    --accent-rgb: 47, 111, 237;
    --ok-rgb: 23, 163, 74;
    --warn-rgb: 201, 106, 6;
    --err-rgb: 220, 40, 40;
    --danger-border: #e3b3b3;
    --danger-bg-hover: #fbe9e9;
    --radius: 8px;
}

:root[data-theme="humour"] {
    --bg: #1e1730;
    --bg-panel: #2a2043;
    --bg-input: #1a1428;
    --bg-btn: #362a52;
    --bg-btn-hover: #40325f;
    --border: #493a68;
    --text: #f5eeff;
    --text-muted: #b9a8d9;
    --accent: #ffb400;
    --accent-hover: #ffc933;
    --accent-text: #241a00;
    --ok: #5ee6a0;
    --warn: #ff8c42;
    --err: #ff5d8f;
    --accent-rgb: 255, 180, 0;
    --ok-rgb: 94, 230, 160;
    --warn-rgb: 255, 140, 66;
    --err-rgb: 255, 93, 143;
    --danger-border: #a13a5c;
    --danger-bg-hover: #401627;
    --radius: 14px;
}

:root[data-theme="sport"] {
    --bg: #101811;
    --bg-panel: #16221a;
    --bg-input: #0d130f;
    --bg-btn: #1e2e22;
    --bg-btn-hover: #263a2b;
    --border: #2b4032;
    --text: #e7f5ec;
    --text-muted: #8fae9b;
    --accent: #29d16b;
    --accent-hover: #4fe085;
    --accent-text: #06210f;
    --ok: #29d16b;
    --warn: #ffb020;
    --err: #ff5252;
    --accent-rgb: 41, 209, 107;
    --ok-rgb: 41, 209, 107;
    --warn-rgb: 255, 176, 32;
    --err-rgb: 255, 82, 82;
    --danger-border: #7a2b2b;
    --danger-bg-hover: #3a1a1a;
    --radius: 6px;
}

:root[data-theme="voiture"] {
    --bg: #161314;
    --bg-panel: #1f1a1b;
    --bg-input: #120f10;
    --bg-btn: #2b2223;
    --bg-btn-hover: #362b2c;
    --border: #3d2d2f;
    --text: #f3e9ea;
    --text-muted: #b09a9c;
    --accent: #e6332b;
    --accent-hover: #ff4a41;
    --accent-text: #1a0605;
    --ok: #3ddc84;
    --warn: #ffb454;
    --err: #ff5c5c;
    --accent-rgb: 230, 51, 43;
    --ok-rgb: 61, 220, 132;
    --warn-rgb: 255, 180, 84;
    --err-rgb: 255, 92, 92;
    --danger-border: #7a2b2b;
    --danger-bg-hover: #3a1a1a;
    --radius: 4px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

header.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
}

header.topbar .brand { font-weight: 600; letter-spacing: .2px; }

nav.mainnav a {
    margin-right: 18px;
    color: var(--text-muted);
    font-weight: 500;
}
nav.mainnav a.active,
nav.mainnav a:hover { color: var(--text); }

.userbox { display: flex; align-items: center; gap: 12px; color: var(--text-muted); font-size: 13px; }

.diskbox { display: flex; align-items: center; gap: 7px; padding-right: 12px; border-right: 1px solid var(--border); }
.diskbox .progress { width: 56px; flex-shrink: 0; }

.ratebox { display: flex; align-items: center; gap: 10px; padding-right: 12px; border-right: 1px solid var(--border); font-variant-numeric: tabular-nums; }

main {
    max-width: 1500px;
    margin: 0 auto;
    padding: 28px 24px 60px;
}

h1 { font-size: 20px; margin: 0 0 18px; }
h2 { font-size: 16px; margin: 28px 0 12px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

.panel {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: 20px;
}

/*
 * Un tableau à beaucoup de colonnes (torrents : case, nom, taille, progression,
 * ratio, état, date, actions) peut dépasser la largeur disponible, en particulier
 * sur un nom de torrent long. Plutôt que de laisser les colonnes — et les boutons
 * d'action — se comprimer et se replier sur plusieurs lignes, le tableau défile
 * horizontalement dans son propre cadre : le reste de la page ne bouge pas.
 */
.table-scroll { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
th { color: var(--text-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
tr:last-child td { border-bottom: none; }

/* En-têtes de colonne cliquables (tri du dashboard) : au repos ils gardent
   l'aspect d'un th normal, pour ne pas ressembler à un lien de contenu. */
a.sort-link { color: inherit; text-decoration: none; }
a.sort-link:hover { color: var(--accent); text-decoration: underline; }
a.sort-link.sort-active { color: var(--accent); }

/* Colonne d'actions : les boutons (Stop/Start/Retirer, Modifier/Activer/Supprimer...)
   ne doivent jamais se replier chacun sur sa ligne — trop illisible. S'il manque de
   place, c'est .table-scroll ci-dessus qui prend le relais avec un défilement. */
td.col-actions { white-space: nowrap; }
td.col-actions form { display: inline-flex; gap: 6px; }

.badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
}
.badge-detected     { background: rgba(128, 128, 138, .2); color: var(--text-muted); border: 1px solid var(--border); }
.badge-downloading  { background: rgba(var(--accent-rgb), .13); color: var(--accent); border: 1px solid rgba(var(--accent-rgb), .33); }
.badge-completed    { background: rgba(var(--ok-rgb), .13); color: var(--ok); border: 1px solid rgba(var(--ok-rgb), .33); }
.badge-superseded   { background: transparent; color: var(--text-muted); border: 1px solid var(--border); text-decoration: line-through; }
.badge-error        { background: rgba(var(--err-rgb), .13); color: var(--err); border: 1px solid rgba(var(--err-rgb), .33); }

.btn {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-btn);
    color: var(--text);
    cursor: pointer;
    font-size: 13.5px;
}
.btn:hover { background: var(--bg-btn-hover); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-danger { border-color: var(--danger-border); color: var(--err); }
.btn-danger:hover { background: var(--danger-bg-hover); }
.btn-sm { padding: 4px 10px; font-size: 12.5px; }

input[type=text], input[type=password], input[type=number], input[type=url], select, textarea {
    width: 100%;
    padding: 8px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 13.5px;
}

label { display: block; margin-bottom: 5px; color: var(--text-muted); font-size: 13px; }
.field { margin-bottom: 14px; }
.checkbox-field { display: flex; align-items: center; gap: 8px; }
.checkbox-field input { width: auto; }

/* Champ fichier natif (bouton "Parcourir") : sans ceci le nom de fichier
   sélectionné s'affiche en texte noir par défaut, illisible sur fond sombre. */
input[type=file] { color: var(--text); font-size: 13.5px; }

.form-actions { margin-top: 16px; }

.flash {
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 18px;
    font-size: 13.5px;
}
.flash-ok  { background: rgba(var(--ok-rgb), .13); border: 1px solid rgba(var(--ok-rgb), .33); color: var(--ok); }
.flash-err { background: rgba(var(--err-rgb), .13); border: 1px solid rgba(var(--err-rgb), .33); color: var(--err); }

.muted { color: var(--text-muted); }
.mono { font-family: "SF Mono", Consolas, Menlo, monospace; font-size: 12.5px; }

.progress {
    height: 6px;
    border-radius: 999px;
    background: var(--bg-input);
    overflow: hidden;
    border: 1px solid var(--border);
}
.progress > span {
    display: block;
    height: 100%;
    background: var(--accent);
}

.login-wrap {
    max-width: 360px;
    margin: 90px auto;
}
.login-wrap .panel { padding: 26px; }
.login-wrap h1 { text-align: center; }

/* Grilles "derniers films / séries" sous le formulaire (page de connexion) :
   volontairement plus large que .login-wrap, qui reste étroit pour le
   formulaire lui-même — les deux coexistent sur la même page. */
.discover-wrap {
    max-width: 1100px;
    margin: 48px auto 30px;
    padding: 0 16px;
}
/* .category-title:first-of-type (règle générique plus haut) s'en charge déjà
   pour "Derniers films", premier h2 de ce conteneur. */

/* Vignette vitrine (page d'accueil publique) : même gabarit que .poster-card.
   Elle est cliquable (popup de détail) et porte une case à cocher pour le
   comparatif, d'où le curseur et l'effet au survol — position: relative sert
   d'ancrage au badge de note et à la case, tous deux positionnés dessus. */
.discover-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-panel);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: transform .12s ease, border-color .12s ease;
}
.discover-card:hover,
.discover-card:focus-visible {
    transform: translateY(-3px);
    border-color: var(--accent);
    outline: none;
}
.discover-card img {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    display: block;
    background: var(--bg-input);
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 10, 14, .65);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 8vh 16px;
    z-index: 100;
}
/* .modal-overlay (classe) l'emporterait sur la règle par défaut du navigateur
   pour l'attribut hidden (spécificité plus faible) : sans cette règle, "hidden"
   n'aurait plus aucun effet et la modale resterait visible en permanence. */
.modal-overlay[hidden] { display: none; }
.modal-box { width: 100%; max-width: 480px; }
.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.empty-state { color: var(--text-muted); font-style: italic; padding: 20px 0; text-align: center; }

/* Menu contextuel (clic droit sur une ligne de torrent, Dashboard). */
.ctxmenu {
    position: fixed;
    z-index: 200;
    min-width: 230px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
    padding: 6px;
}
.ctxmenu[hidden] { display: none; }
.ctxmenu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.ctxmenu button:hover:not(:disabled) { background: var(--bg-btn-hover); }
.ctxmenu button:disabled { color: var(--text-muted); cursor: default; opacity: .5; }
.ctxmenu button.danger { color: var(--err); }
.ctxmenu button.danger:hover:not(:disabled) { background: rgba(var(--err-rgb), .13); }
.ctxmenu-sep { border: none; border-top: 1px solid var(--border); margin: 6px 2px; }

/* Ligne ciblée par le clic droit, tant que le menu contextuel reste ouvert :
   sans repère visuel, impossible de confirmer que le menu agit bien sur la
   ligne visée dans un tableau dense. */
tr.ctx-row-active td { background: rgba(var(--accent-rgb), .16); }

.theme-swatches { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.theme-swatch {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--border);
    cursor: pointer;
    padding: 0;
}
.theme-swatch[aria-pressed="true"] { border-color: var(--accent); }

/* ---- Page TOP : grille d'affiches TheMovieDB ---- */

/* Titre de section (catégorie de feed). Le trait sous le titre sépare
   visuellement deux grilles qui se suivent, sinon difficiles à distinguer
   l'une de l'autre quand les affiches s'enchaînent. */
.category-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 28px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.category-title:first-of-type { margin-top: 0; }
.category-title .muted { font-size: 13px; font-weight: 400; }

/* Espace sous chaque grille, pour que la section suivante ne colle pas aux
   affiches de la précédente. */
.poster-grid + .category-title { margin-top: 32px; }

/* auto-fill + minmax : le nombre de colonnes découle de la largeur disponible,
   sans point de rupture à maintenir — 2 colonnes sur un téléphone, 8 ou plus
   sur un grand écran, et les affiches gardent la même taille dans tous les cas. */
.poster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 18px;
}

.poster-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-panel);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: transform .12s ease, border-color .12s ease;
}
.poster-card:hover, .poster-card:focus-visible {
    transform: translateY(-3px);
    border-color: var(--accent);
}
.poster-card img {
    width: 100%;
    /* 2/3 : proportion standard des affiches TMDb. Imposée explicitement pour
       que la grille ne saute pas pendant le chargement des images, et pour que
       les vignettes "pas d'affiche" s'alignent exactement sur les autres. */
    aspect-ratio: 2 / 3;
    object-fit: cover;
    display: block;
    background: var(--bg-input);
}

.poster-none {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    aspect-ratio: 2 / 3;
    background: var(--bg-input);
    color: var(--text-muted);
}
.poster-none-icon { font-size: 30px; opacity: .5; }
.poster-none-text { font-size: 12px; }

.poster-caption {
    padding: 8px 10px;
    font-size: 12.5px;
    line-height: 1.35;
    /* Deux lignes maximum puis ellipse : sans ça, un nom de release à rallonge
       ferait grandir sa carte et désalignerait toute la ligne de la grille. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Une carte "série" ajoute .poster-sub juste après : la légende n'a alors pas
   besoin de son propre espace en bas, .poster-sub le porte à sa place. */
.poster-caption:has(+ .poster-sub) { padding-bottom: 2px; }

/* Sous-titre d'une carte "série" (nombre d'épisodes, dernier épisode). */
.poster-sub {
    display: block;
    padding: 0 10px 8px;
    font-size: 11px;
}

.poster-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 11px;
    background: var(--accent);
    color: #fff;
}

/* ---- Page TOP : popup de fiche ---- */

/* max-height + défilement interne : un synopsis long ferait sinon dépasser le
   popup de l'écran, bouton "Télécharger" compris, sans moyen de l'atteindre. */
.release-modal {
    max-width: 620px;
    position: relative;
    max-height: 84vh;
    overflow-y: auto;
}

/* Image large de TMDb en fond de l'en-tête du popup, très atténuée : elle doit
   habiller sans jamais gêner la lecture du titre posé par-dessus. */
.release-backdrop {
    position: absolute;
    inset: 0 0 auto 0;
    height: 150px;
    background-size: cover;
    background-position: center;
    opacity: .18;
    pointer-events: none;
    border-radius: 8px 8px 0 0;
}
.release-backdrop[hidden] { display: none; }

.release-modal .modal-head { position: relative; z-index: 1; }

.release-body {
    display: flex;
    gap: 16px;
    position: relative;
    z-index: 1;
}
.release-body > img {
    width: 140px;
    flex-shrink: 0;
    border-radius: 6px;
    align-self: flex-start;
    background: var(--bg-input);
}
.release-body > img[hidden] { display: none; }
.release-meta { flex: 1; min-width: 0; }
.release-meta p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; }

.release-tech { width: 100%; margin-top: 14px; }
.release-tech th {
    width: 110px;
    text-align: left;
    font-weight: 500;
    color: var(--text-muted);
    font-size: 12.5px;
}
.release-tech td { font-size: 12.5px; word-break: break-word; }
.release-tech tr[hidden] { display: none; }

/* Table des épisodes (carte "série" du popup) : première ligne = en-têtes de
   colonnes plutôt qu'une paire label/valeur comme le reste de .release-tech,
   donc largeur de colonne libre au lieu de la colonne "th" fixe ci-dessus. */
/* Sélecteur renforcé (table.classe) : la règle mobile .release-tech th plus
   bas dans ce fichier a la même spécificité qu'un simple .release-episodes th
   et l'emporterait sur petit écran par simple ordre d'apparition. */
table.release-episodes th { width: auto; }
.release-episodes td { padding: 5px 8px 5px 0; vertical-align: middle; }
.release-episodes tr:not(:last-child) td { border-bottom: 1px solid var(--border); }

/*
 * Mobile / écran étroit.
 *
 * Le point vraiment cassé jusqu'ici, c'est le header : marque + nav (4 liens +
 * bouton "Ajouter un torrent") + userbox (disque, débit, compte, déconnexion)
 * tenaient sur UNE seule ligne, pensée pour un écran large — sur un téléphone,
 * ça déborde ou s'écrase. Le reste (tableaux, formulaires) était déjà
 * raisonnablement sûr : .table-scroll gère déjà le débordement horizontal des
 * tableaux dans leur propre cadre, et la plupart des champs/lignes flex ont
 * déjà flex-wrap. Cette section ne fait donc que réparer le header et resserrer
 * quelques marges — pas une refonte, juste ce qui manquait.
 */
@media (max-width: 780px) {
    header.topbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px 16px;
    }
    header.topbar .brand { text-align: center; }

    nav.mainnav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 14px;
    }
    nav.mainnav a { margin-right: 0; }

    .userbox {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 8px;
    }
    /* Le trait vertical entre disque/débit/compte n'a de sens que sur une seule
       ligne ; une fois empilé/enroulé, il resterait comme un tiret égaré. */
    .diskbox, .ratebox { border-right: none; padding-right: 0; }

    main { padding: 20px 14px 40px; }
    h1 { font-size: 18px; }

    .login-wrap { margin: 40px auto; }
    .discover-wrap { margin: 30px auto 20px; }

    /* Affiches plus petites : à 150px de large minimum, un téléphone n'en
       tiendrait que deux par ligne avec de grandes marges perdues. */
    .poster-grid {
        grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
        gap: 12px;
    }
    .poster-caption { padding: 6px 8px; font-size: 11.5px; }

    /* Le popup passe en pleine hauteur : côte à côte, l'affiche ne laisserait
       presque rien au synopsis sur un écran étroit. */
    .modal-overlay { padding: 4vh 10px; }
    .release-body { flex-direction: column; }
    .release-body > img { width: 120px; align-self: center; }
    .release-tech th { width: 90px; }
}

/* ---- Page d'accueil publique : hero, badges, comparatif ---- */

.hero { margin-bottom: 28px; }
.hero-title {
    margin: 0 0 6px;
    font-size: 30px;
    font-weight: 650;
    letter-spacing: -.4px;
}
.hero-sub { margin: 0; color: var(--text-muted); font-size: 14px; }

/* Badge de note, coin haut-droit de l'affiche. Fond opaque et non pas
   semi-transparent : posé sur une affiche quelconque, un fond translucide rend
   le chiffre illisible une fois sur deux. */
.note-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--warn);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
}

/* La case à cocher du comparatif. Sa zone cliquable déborde volontairement de
   la case elle-même (padding) : sur mobile, viser une case de 13px posée sur
   une image ouvrirait le popup une fois sur deux. */
.card-pick {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    padding: 8px;
    cursor: pointer;
    line-height: 0;
}
.card-pick input { cursor: pointer; }
.card-pick input:disabled { cursor: not-allowed; opacity: .45; }

.site-foot {
    margin-top: 34px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 12.5px;
    text-align: center;
}

/* Barre de comparaison : fixée en bas, elle reste atteignable après avoir
   coché deux titres situés à des hauteurs de page très différentes. */
.cmp-bar {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
}
.cmp-bar[hidden] { display: none; }

/* Empêche la page de défiler derrière le popup ouvert : sans ça, la molette
   fait glisser la vitrine sous la modale, ce qui donne l'impression d'un bug. */
body.modal-open { overflow: hidden; }

/* Plus large que .modal-box (480px) : le comparatif est un tableau à trois
   colonnes, illisible dans la largeur d'un popup de formulaire. */
.discover-modal {
    max-width: 680px;
    position: relative;
    max-height: 84vh;
    overflow-y: auto;
}
.discover-modal .modal-head { position: relative; z-index: 1; }
.discover-modal #modal-body { position: relative; z-index: 1; }

.modal-meta { margin: 0 0 10px; font-size: 13px; color: var(--text); }
.modal-genres { margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--bg-btn);
    border: 1px solid var(--border);
    font-size: 11.5px;
    color: var(--text-muted);
}
.modal-overview { margin: 0; font-size: 14px; line-height: 1.55; }
.modal-h4 { margin: 18px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }

.review {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-left: 3px solid var(--accent);
    background: var(--bg-input);
    border-radius: 0 6px 6px 0;
}
.review p { margin: 0 0 6px; font-size: 13px; line-height: 1.5; font-style: italic; }
.review cite { font-size: 12px; font-style: normal; }

.cmp-table { width: 100%; }
.cmp-table th { text-align: left; font-size: 13px; }
.cmp-table td { font-size: 13px; vertical-align: top; }
.cmp-lab { width: 78px; color: var(--text-muted); font-weight: 500; }

/* Les deux synopsis côte à côte sous le tableau : c'est la seule partie trop
   longue pour tenir dans une cellule sans déformer les colonnes. */
.cmp-synopsis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 16px;
}
.cmp-synopsis p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }

@media (max-width: 780px) {
    .hero-title { font-size: 24px; }
    /* Les synopsis passent l'un sous l'autre : à deux colonnes sur un écran
       étroit, chaque ligne ne tiendrait que deux ou trois mots. */
    .cmp-synopsis { grid-template-columns: 1fr; gap: 12px; }
    .cmp-bar { width: calc(100% - 24px); justify-content: center; border-radius: 12px; }
}