:root {
    color-scheme: dark;
    --bg-gradient: linear-gradient(160deg, #0a1628 0%, #12263f 55%, #173356 100%);
    --header-footer: #0a1628;
    --surface: #0f2138;
    --primary: #2f6fdb;
    --primary-hover: #255cc0;
    --accent: #53c1f5;
    --text: #ffffff;
    --border: rgba(139, 163, 191, 0.25);
    --danger-bg: rgba(220, 60, 70, 0.14);
    --danger-border: rgba(242, 139, 148, 0.45);
    --danger-text: #f28b94;
    --radius: 10px;
    --radius-lg: 14px;
    --shadow-card: 0 18px 40px rgba(4, 15, 30, 0.45);
    --font: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-family: var(--font);
    background: var(--bg-gradient);
    background-attachment: fixed;
    color: var(--text);
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Le champ de recherche peut ne plus tenir sur la ligne du logo et des liens
       du compte : plutot que de laisser la page deborder horizontalement (barre
       de defilement parasite), la barre passe sur deux lignes. Rien ne change
       tant que la place suffit. */
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 14px 32px;
    background: var(--header-footer);
    border-bottom: 1px solid rgba(83, 193, 245, 0.25);
}

.main-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 2px;
    list-style: none;
    padding: 0 20px;
    background: #081120;
    border-bottom: 1px solid rgba(83, 193, 245, 0.25);
}

.main-nav a {
    display: block;
    padding: 10px 12px;
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.6);
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.main-nav a:hover {
    color: #ffffff;
}

.main-nav a:focus-visible {
    outline: none;
    color: var(--accent);
    box-shadow: inset 0 -2px 0 var(--accent);
}

.main-nav a.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.brand {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #fff;
    white-space: nowrap;
}

.brand span {
    color: var(--accent);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Meme intention que le flex-wrap de `header` : quand le bloc ne tient plus
       sur une ligne (recherche + pastille IP + bouton Signaler + nom +
       deconnexion sur un ecran etroit), les pastilles passent a la ligne au
       lieu de deborder en largeur et d'ajouter une barre de defilement. */
    flex-wrap: wrap;
    justify-content: flex-end;
    /* Quand la barre se replie sur deux lignes, le bloc de droite se retrouve
       seul sur la sienne : sans cette marge il repartirait a gauche. */
    margin-left: auto;
}

.user-chip,
.ip-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 6px 14px;
    font-size: 0.88rem;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
}

a.user-chip {
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

a.user-chip:hover {
    background: rgba(83, 193, 245, 0.18);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(83, 193, 245, 0.15);
}

a.user-chip:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(83, 193, 245, 0.35);
}

.logout-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    color: var(--danger-text);
    background: transparent;
    border: 1px solid var(--danger-border);
    border-radius: 999px;
}


.logout-btn:hover {
    color: #ffffff;
    background: #d64550;
    border-color: #d64550;
}

.logout-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(242, 139, 148, 0.35);
}

/* Signalement : bouton de l'en-tete, pose a gauche du nom d'utilisateur. Meme
   gabarit de pilule que .logout-btn, mais en bleu (action neutre, pas une
   deconnexion) pour ne pas concurrencer le bouton rouge. */
.signal-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--accent);
    background: transparent;
    border: 1px solid rgba(83, 193, 245, 0.5);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.signal-btn:hover {
    color: #0a1628;
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 14px rgba(83, 193, 245, 0.55);
}

.signal-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(83, 193, 245, 0.35);
}

/* Recherche globale du header : champ en pilule + menu d'autocompletion. */
.header-search {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 320px;
}

.header-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 6px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.header-search-form:focus-within {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(83, 193, 245, 0.18);
}

.header-search-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.6);
}

.header-search-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.header-search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    font-size: 0.88rem;
    font-family: inherit;
    color: #ffffff;
    background: transparent;
    border: 0;
    outline: none;
}

.header-search-input::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

/* Le « x » natif des champs search doublerait notre bouton d'effacement. */
.header-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.header-search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    padding: 0;
    color: rgba(255, 255, 255, 0.6);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.header-search-clear[hidden] {
    display: none;
}

.header-search-clear svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.header-search-clear:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
}

.header-search-panel {
    position: absolute;
    z-index: 40;
    top: calc(100% + 8px);
    right: 0;
    width: min(420px, calc(100vw - 32px));
    max-height: min(70vh, 560px);
    overflow-y: auto;
    padding: 6px;
    background: #0e1a2b;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.header-search-panel[hidden] {
    display: none;
}

.header-search-group + .header-search-group {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.header-search-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px 4px;
    font-size: 0.72rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.header-search-group-label {
    font-weight: 700;
    color: var(--accent);
}

.header-search-group-all {
    font-size: 0.72rem;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
}

.header-search-group-all:hover {
    color: #ffffff;
    text-decoration: underline;
}

.header-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
}

.header-search-item:hover,
.header-search-item.is-active {
    color: #ffffff;
    background: rgba(83, 193, 245, 0.14);
}

.header-search-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 48px;
    overflow: hidden;
    background: rgba(83, 193, 245, 0.12);
    border: 1px solid rgba(83, 193, 245, 0.3);
    border-radius: 6px;
}

.header-search-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header-search-thumb-empty {
    font-weight: 700;
    color: var(--accent);
}

.header-search-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.header-search-name {
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-search-sub {
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-search-empty {
    padding: 14px 10px;
    font-size: 0.9rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
}

.header-search-footer {
    margin-top: 4px;
    padding: 8px 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.header-search-footer a {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}

.header-search-footer a:hover {
    text-decoration: underline;
}

main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
}

.card,
.dashboard-box {
    width: 100%;
    max-width: 400px;
    padding: 36px 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    animation: rise 0.45s ease-out both;
}

.dashboard-box {
    max-width: 560px;
}

.stats-box {
    max-width: 1080px;
}

/* Page compte et administration partagent la meme boite : pleine largeur de
   l'ecran, pour laisser place aux tableaux comme celui des demandes. */
.admin-box,
.account-box {
    max-width: none;
}

.admin-box h1,
.account-box h1 {
    margin-bottom: 22px;
    font-size: 1.5rem;
    text-align: center;
    color: #ffffff;
}

/* Meme traitement que le tableau de bord : les titres de section sont en bleu,
   alors que .account-section reste blanc ailleurs. */
.admin-box .account-section h2,
.account-box .account-section h2 {
    color: var(--accent);
}

.account-section {
    padding-top: 24px;
    margin-top: 8px;
}

.account-section:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.account-section + .account-section {
    margin-top: 28px;
}

.stats-box .account-section {
    border-top: none;
    padding-top: 0;
}

.stats-box h1,
.stats-box .account-section h2 {
    color: var(--accent);
}

.account-section h2 {
    margin-bottom: 16px;
    font-size: 1.05rem;
    letter-spacing: 0.2px;
    color: #ffffff;
}

.saga-section {
    text-align: center;
}

.account-section.saga-section {
    margin-top: 28px;
}

.saga-section-grid {
    width: 100%;
}

/* Information secondaire : elle doit rester discrete sous le titre de
   section. Le selecteur est double pour passer devant `.dashboard-box p`,
   plus fort et bien plus bas dans la feuille, qui force le blanc. */
.account-box .account-meta {
    margin: -10px 0 18px;
    font-size: 0.76rem;
    color: #8a9bb4;
}

.form-hint {
    margin-top: 6px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
}

/* Meme traitement que .account-meta sur les pages compte et administration :
   ces indications sont secondaires. Le selecteur est double car
   `.dashboard-box p`, plus fort et bien plus bas dans la feuille, impose sinon
   le blanc. */
.admin-box .form-hint,
.account-box .form-hint {
    font-size: 0.76rem;
    color: #8a9bb4;
}

/* Colonne Titre de « Mes demandes » : vignette d'affiche a cote du lien. */
.suivi-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.suivi-poster {
    flex: 0 0 auto;
    width: 42px;
    height: 60px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 6px;
}

/* Colonne Titre de « Mes demandes » : sous le lien, le périmètre de la demande —
   « Série complète », « Saison 2 », « Épisode S2E3 ». Les trois se demandent et
   se livrent séparément, le hint les distingue. */
.suivi-cell-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.suivi-scope {
    margin-top: 2px;
    font-size: 0.76rem;
    line-height: 1.2;
    color: #8a9bb4;
    letter-spacing: 0.02em;
}

/* Colonne « État du média » : au survol, « En ligne » devient « Télécharger », un
   texte plus large. Le badge garde donc une largeur fixe — celle du libellé le plus
   long qu'il puisse afficher, mesurée à 138px — et ne se coupe jamais. La cellule
   ne dépend plus du libellé, donc le survol ne déplace plus la ligne entière.
   Une largeur sur la colonne ne suffirait pas : le tableau répartit le surplus
   entre les colonnes à chaque reflow. */
.suivi-table .film-status-neon {
    width: 138px;
    text-align: center;
    white-space: nowrap;
}

/* Filet sous le titre « Mes demandes ». Le h1 garde son marge de 6px imposee par
   .dashboard-box h1 : c'est le filet qui creuse l'ecart au-dessus de lui. */
.account-hr {
    margin: 16px 0 22px;
    border: 0;
    border-top: 1px solid var(--border);
}

/* Colonne « Mis en ligne le » : la coche verte signale un média arrivé après la
   demande. */
.suivi-table .suivi-servei {
    margin-right: 4px;
    color: #4ade80;
    font-weight: 700;
}

.toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 0.92rem;
    color: #ffffff;
}

.toggle input {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 46px;
    height: 26px;
    margin: 0;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid var(--border);
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.toggle input::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    transition: transform 0.25s ease;
}

.toggle input:checked {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-color: transparent;
}

.toggle input:checked::before {
    transform: translateX(20px);
}

.toggle input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(83, 193, 245, 0.35);
}

/* Second reglage des « Preferences » du compte : l'indication du premier n'a pas
   de marge basse, la bascule suivante a donc besoin d'air. */
.form-hint + .toggle {
    margin-top: 18px;
}

.logs-box {
    max-width: 1080px;
}

.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}

/* Compteurs centrés : les cartes se répartissent au centre de la ligne quand
   elles sont moins nombreuses que les 4 colonnes de la grille. */
.stat-grid-center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.stat-grid-center .stat-card {
    flex: 0 1 200px;
}

.stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 18px 12px;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

a.stat-card-link {
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

a.stat-card-link:hover {
    border-color: rgba(83, 193, 245, 0.45);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 10px rgba(83, 193, 245, 0.2);
}

a.stat-card-link:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(83, 193, 245, 0.3);
}

/* Carte-compteur servant de filtre actif. */
a.stat-card-link-active {
    border-color: var(--accent);
    background: rgba(83, 193, 245, 0.14);
    box-shadow: 0 0 12px rgba(83, 193, 245, 0.3),
                inset 0 0 8px rgba(83, 193, 245, 0.2);
}

.stat-card-total {
    color: #ffffff;
    background: rgba(183, 110, 255, 0.12);
    border: 1px solid rgba(183, 110, 255, 0.55);
    box-shadow: 0 0 12px rgba(183, 110, 255, 0.3),
                inset 0 0 8px rgba(183, 110, 255, 0.2);
}

.stat-card-total .stat-value {
    color: #d99cff;
    text-shadow: 0 0 8px rgba(183, 110, 255, 0.9),
                 0 0 16px rgba(183, 110, 255, 0.6);
}

.stat-card-total .stat-label {
    color: rgba(255, 255, 255, 0.85);
}

.stat-card-neon {
    color: #ffffff;
    background: var(--neon-bg);
    border: 1px solid var(--neon-border);
    box-shadow: 0 0 12px var(--neon-shadow),
                inset 0 0 8px var(--neon-inset);
}

.stat-card-neon .stat-value {
    color: var(--neon-value);
}

.stat-card-neon .stat-label {
    color: rgba(255, 255, 255, 0.85);
}

a.stat-card-neon:hover {
    border-color: var(--neon-value);
    background: var(--neon-bg-hover);
    box-shadow: 0 0 18px var(--neon-shadow),
                inset 0 0 12px var(--neon-inset);
}

.stat-card-blue { --neon-bg: rgba(83, 193, 245, 0.12); --neon-bg-hover: rgba(83, 193, 245, 0.2); --neon-border: rgba(83, 193, 245, 0.55); --neon-value: #53c1f5; --neon-glow: rgba(83, 193, 245, 0.9); --neon-shadow: rgba(83, 193, 245, 0.3); --neon-inset: rgba(83, 193, 245, 0.2); }
.stat-card-cyan { --neon-bg: rgba(34, 211, 238, 0.12); --neon-bg-hover: rgba(34, 211, 238, 0.2); --neon-border: rgba(34, 211, 238, 0.55); --neon-value: #22d3ee; --neon-glow: rgba(34, 211, 238, 0.9); --neon-shadow: rgba(34, 211, 238, 0.3); --neon-inset: rgba(34, 211, 238, 0.2); }
.stat-card-green { --neon-bg: rgba(74, 222, 128, 0.12); --neon-bg-hover: rgba(74, 222, 128, 0.2); --neon-border: rgba(74, 222, 128, 0.55); --neon-value: #4ade80; --neon-glow: rgba(74, 222, 128, 0.9); --neon-shadow: rgba(74, 222, 128, 0.3); --neon-inset: rgba(74, 222, 128, 0.2); }
.stat-card-orange { --neon-bg: rgba(251, 146, 60, 0.12); --neon-bg-hover: rgba(251, 146, 60, 0.2); --neon-border: rgba(251, 146, 60, 0.55); --neon-value: #fb923c; --neon-glow: rgba(251, 146, 60, 0.9); --neon-shadow: rgba(251, 146, 60, 0.3); --neon-inset: rgba(251, 146, 60, 0.2); }
.stat-card-pink { --neon-bg: rgba(230, 57, 70, 0.12); --neon-bg-hover: rgba(230, 57, 70, 0.2); --neon-border: rgba(230, 57, 70, 0.55); --neon-value: #e63946; --neon-glow: rgba(230, 57, 70, 0.9); --neon-shadow: rgba(230, 57, 70, 0.3); --neon-inset: rgba(230, 57, 70, 0.2); }
.stat-card-yellow { --neon-bg: rgba(250, 204, 21, 0.12); --neon-bg-hover: rgba(250, 204, 21, 0.2); --neon-border: rgba(250, 204, 21, 0.55); --neon-value: #facc15; --neon-glow: rgba(250, 204, 21, 0.9); --neon-shadow: rgba(250, 204, 21, 0.3); --neon-inset: rgba(250, 204, 21, 0.2); }
.stat-card-red { --neon-bg: rgba(239, 68, 68, 0.12); --neon-bg-hover: rgba(239, 68, 68, 0.2); --neon-border: rgba(239, 68, 68, 0.55); --neon-value: #f87171; --neon-glow: rgba(239, 68, 68, 0.9); --neon-shadow: rgba(239, 68, 68, 0.3); --neon-inset: rgba(239, 68, 68, 0.2); }
.stat-card-teal { --neon-bg: rgba(45, 212, 191, 0.12); --neon-bg-hover: rgba(45, 212, 191, 0.2); --neon-border: rgba(45, 212, 191, 0.55); --neon-value: #2dd4bf; --neon-glow: rgba(45, 212, 191, 0.9); --neon-shadow: rgba(45, 212, 191, 0.3); --neon-inset: rgba(45, 212, 191, 0.2); }
.stat-card-indigo { --neon-bg: rgba(129, 140, 248, 0.12); --neon-bg-hover: rgba(129, 140, 248, 0.2); --neon-border: rgba(129, 140, 248, 0.55); --neon-value: #818cf8; --neon-glow: rgba(129, 140, 248, 0.9); --neon-shadow: rgba(129, 140, 248, 0.3); --neon-inset: rgba(129, 140, 248, 0.2); }
.stat-card-gold { --neon-bg: rgba(253, 186, 116, 0.12); --neon-bg-hover: rgba(253, 186, 116, 0.2); --neon-border: rgba(253, 186, 116, 0.55); --neon-value: #fdba74; --neon-glow: rgba(253, 186, 116, 0.9); --neon-shadow: rgba(253, 186, 116, 0.3); --neon-inset: rgba(253, 186, 116, 0.2); }
.stat-card-online { --neon-bg: rgba(46, 204, 113, 0.12); --neon-bg-hover: rgba(46, 204, 113, 0.2); --neon-border: rgba(46, 204, 113, 0.55); --neon-value: #2ecc71; --neon-glow: rgba(46, 204, 113, 0.9); --neon-shadow: rgba(46, 204, 113, 0.3); --neon-inset: rgba(46, 204, 113, 0.2); }
.stat-card-offline { --neon-bg: rgba(239, 68, 68, 0.12); --neon-bg-hover: rgba(239, 68, 68, 0.2); --neon-border: rgba(248, 113, 113, 0.55); --neon-value: #f87171; --neon-glow: rgba(248, 113, 113, 0.9); --neon-shadow: rgba(248, 113, 113, 0.35); --neon-inset: rgba(248, 113, 113, 0.2); }
.stat-card-coming { --neon-bg: rgba(245, 158, 11, 0.12); --neon-bg-hover: rgba(245, 158, 11, 0.2); --neon-border: rgba(245, 158, 11, 0.55); --neon-value: #f59e0b; --neon-glow: rgba(245, 158, 11, 0.9); --neon-shadow: rgba(245, 158, 11, 0.35); --neon-inset: rgba(245, 158, 11, 0.2); }

.stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--accent);
}

.stat-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 700px) {
    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.page-main {
    align-items: flex-start;
    flex-wrap: wrap;
}

.tracked-page {
    padding: 16px;
}

[data-tracked-page] .saga-block .film-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    justify-content: stretch;
    gap: 14px;
    width: 100%;
}

[data-tracked-page] .saga-block .film-card {
    flex: none;
    min-width: 0;
    max-width: none;
    width: 100%;
}

.tracked-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.tracked-more-btn {
    padding: 10px 24px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--accent);
    background: rgba(83, 193, 245, 0.08);
    border: 1px solid rgba(83, 193, 245, 0.4);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.tracked-more-btn:hover {
    color: #0a1628;
    background: var(--accent);
    border-color: var(--accent);
}

.tracked-more-btn.tracked-more-loading {
    opacity: 0.6;
    pointer-events: none;
}

.films-box {
    max-width: none;
    position: relative;
}

.films-box h1 {
    margin-bottom: 22px;
    font-size: 1.5rem;
    text-align: center;
    color: #ffffff;
}

/* Filtres, recherche et bouton d'ajout places hors de la carte, directement
   sous le menu. La gouttiere laterale vient de .page-main (14px, comme
   l'ecart entre les vignettes). */
.films-page-head,
.list-page-head {
    flex: 0 0 100%;
    width: 100%;
    margin-bottom: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}

/* Page films : la tete de page (filtres + recherche) remonte juste sous le
   menu. Gouttiere laterale de 14px, identique a l'ecart entre les vignettes. */
.page-main.films-page,
.page-main.list-page {
    padding-top: 16px;
    padding-left: 14px;
    padding-right: 14px;
}

/* Page univers : la gouttiere laterale suit l'ecart de .univers-grid (18px),
   comme les listes suivent celui de .list-grid (14px). */
.page-main.univers-list-page {
    padding-left: 18px;
    padding-right: 18px;
}

/* Pages « Media de mon age » et « Medias en ligne » : la barre des
   compteurs-filtres est le seul element de la tete, on centre les puces. Sa marge
   basse (14px) est annulee, car l'ecart avec le premier filet est porte par
   .list-body. */
.media-age-page .list-page-head > .univers-topbar,
.media-en-ligne-page .list-page-head > .univers-topbar {
    margin-bottom: 0;
    justify-content: center;
}

.media-age-page .list-page-head .univers-detail-counts,
.media-en-ligne-page .list-page-head .univers-detail-counts {
    justify-content: center;
}

/* Le filet de separation est porte par l'en-tete de la premiere categorie et non
   plus par .list-page-head : en filtrant sur une seule categorie, celle-ci se
   retrouve seule au-dessus de la liste, donc un seul filet. On remet ici
   l'ecart de 10px entre la barre de filtres et ce premier filet. */
.media-age-page .list-body,
.media-en-ligne-page .list-body {
    padding-top: 10px;
}

/* En-tete de categorie : titre centre encadre par deux filets. */
.media-age-section-head {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.media-age-section-head > .media-age-section-sep {
    margin: 0;
}

.media-age-section-head > .media-age-section-title {
    margin: 0;
    text-align: center;
}

/* Page plateformes : titre de la liste encadre par deux filets. Les boutons
   d'ajout et d'edition se placent entre le titre et le filet du bas ; le bloc
   remplace donc la tete de page vide. Ecarts internes de 10px, comme les titres
   de categorie de « Media de mon age ». */
.plateformes-title-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 10px;
}

.plateformes-title-block > .saga-sep {
    margin: 0;
}

.plateformes-title-block > h1 {
    margin: 0;
    text-align: center;
}

/* Dans le bloc titre, la barre de boutons n'est plus ancree au coin superieur
   droit : elle est dans le flux, centree sous le titre. */
.plateformes-title-block .add-film-bar {
    position: static;
    max-width: none;
    margin: 0;
    justify-content: center;
}

.plateformes-title-block .add-film-bar .film-edit-btn {
    position: static;
    margin: 0;
}

/* Meme ecart au-dessus du filet du haut (nav -> filet) qu'en dessous du filet du
   bas (bloc -> plateformes) : 10px dans les deux cas. */
.page-main.list-page.plateformes-page {
    padding-top: 10px;
}

/* Tete de page en grille : filtres et filet sur toute la largeur, recherche et
   bouton d'ajout sur une meme ligne. Le bouton ne s'intercale donc plus entre
   le filet et la liste : les ecarts au filet restent egaux. */
.films-page-head > .univers-topbar,
.list-page-head > .univers-topbar {
    grid-column: 1 / -1;
}

.films-page-head > .search-form,
.list-page-head > .search-form {
    grid-column: 1;
    min-width: 0;
    margin-bottom: 0;
}

.films-page-head .search-form input,
.list-page-head .search-form input {
    min-width: 0;
}

.films-page-head .add-film-bar,
.list-page-head .add-film-bar {
    grid-column: 2;
    margin-left: 10px;
    margin-bottom: 0;
    position: static;
    max-width: none;
}

.films-page-head .add-film-bar .film-edit-btn,
.list-page-head .add-film-bar .film-edit-btn {
    position: static;
    margin: 0;
}

/* Conteneur des medias : plus de carte. Les medias sont directement sous la
   barre de recherche, dans le flux normal du document (c'est la page entiere
   qui defile, sauf sur media_en_ligne.php ou c'est le conteneur interne qui
   porte le defilement). La gouttiere laterale vient de .page-main (14px,
   comme l'ecart entre les vignettes). */
.films-body,
.list-body {
    flex: 0 0 100%;
    width: 100%;
}

/* Puces de filtre de films : centrees dans la tete de page. */
.films-filter-topbar {
    justify-content: center;
}

.films-filter-bar {
    width: 100%;
    justify-content: center;
}

/* Filet entre la recherche et la liste : memes ecarts de chaque cote
   (le style global .saga-sep garde ses 30px ailleurs). */
.films-page-head .saga-sep,
.list-page-head .saga-sep {
    grid-column: 1 / -1;
    margin: 10px 0;
}

/* Pages a deux boutons d'ajout (plateformes) : sur ecran etroit, les boutons
   passent sous la recherche, en pleine largeur, pour ne pas ecraser le champ. */
@media (max-width: 820px) {
    .films-page-head .add-film-bar-multiple,
    .list-page-head .add-film-bar-multiple {
        grid-column: 1 / -1;
        margin-left: 0;
        margin-top: 10px;
    }
}

.search-form {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
}

.search-form input {
    flex: 1;
    padding: 11px 14px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.2s, background 0.2s;
}

.search-form input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--accent);
}

.btn-search {
    padding: 10px 18px;
    font-size: 0.85rem;
    color: var(--accent);
    border-color: rgba(83, 193, 245, 0.35);
    cursor: pointer;
}

.btn-search:hover {
    color: #0a1628;
    background: var(--accent);
    border-color: var(--accent);
}

.film-form-row {
    display: flex;
    gap: 12px;
}

.film-form-row .film-status-picker {
    align-self: center;
}

.form-grow {
    flex: 1;
}

.form-narrow {
    width: 110px;
}

.form-type {
    width: 150px;
}

textarea {
    resize: vertical;
    min-height: 70px;
}

.film-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.film-status .toggle {
    margin: 0;
}

.film-status input[type='number'] {
    width: 64px;
    padding: 8px 10px;
    font-size: 0.88rem;
    font-family: inherit;
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    -moz-appearance: textfield;
    appearance: textfield;
}

.film-status input[type='number']::-webkit-inner-spin-button,
.film-status input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.film-status input[type='number']:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--accent);
}

.btn-status {
    cursor: pointer;
    color: var(--accent);
    border-color: rgba(83, 193, 245, 0.35);
}

.btn-status:hover {
    color: #0a1628;
    background: var(--accent);
    border-color: var(--accent);
}

.btn-status-active {
    color: #0a1628;
    background: var(--accent);
    border-color: var(--accent);
}

.film-status-row,
.spectacle-status-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
}

.film-status-row form,
.spectacle-status-row form {
    margin: 0;
}

.film-status-bottom {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.film-status-bottom .film-status-row,
.film-status-bottom .spectacle-status-row {
    padding-top: 0;
    margin-top: 0;
    width: auto;
}

.serie-episodes {
    width: 100%;
    margin-top: 16px;
}

.serie-episodes-hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 0 0 16px;
}

.serie-episodes h2 {
    margin-bottom: 12px;
    font-size: 1.1rem;
}

.serie-episodes-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.serie-episodes-head h2 {
    margin: 0;
}

.serie-episodes-head .film-edit-btn {
    padding: 7px 16px;
    font-size: 0.82rem;
}

.episode-form-table {
    margin-bottom: 10px;
}

.episode-form-error {
    margin-bottom: 14px;
    padding: 10px 14px;
    font-size: 0.86rem;
    font-weight: 600;
    color: #ff8a92;
    background: rgba(214, 69, 80, 0.12);
    border: 1px solid rgba(255, 31, 75, 0.55);
    border-radius: var(--radius);
}

.episode-form-num.is-error {
    border-color: #ff1f4b;
    box-shadow: 0 0 0 1px #ff1f4b inset, 0 0 6px rgba(255, 31, 75, 0.35);
}

.episode-form-head,
.episode-form-row {
    display: grid;
    grid-template-columns: 90px 1fr auto 32px;
    gap: 8px;
}

.episode-form-head {
    align-items: center;
    padding: 0 2px 6px;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

/* Lignes du tableau d'episodes des modales de saison (ajout et edition) : pas
   de survol, la ligne porte deja numero, titre, statut et nom de fichier sur
   deux lignes de la grille. */
.episode-form-row {
    align-items: stretch;
    margin-bottom: 6px;
}

/* Champ "Fichier" de chaque ligne d'épisode (episode-filename.js) : le nom
   calculé est pré-rempli mais reste modifiable. Il occupe la seconde ligne de la
   grille (grid-column: 1 / -1), sous le numéro et le titre, ce qui laisse la
   ligne du haut inchangée. */
.episode-form-row .episode-form-file {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255, 255, 255, 0.5);
}

.episode-form-row .episode-form-file-label {
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
}

.episode-form-row .episode-form-file-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 9px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.82);
}

.episode-form-row .episode-form-file-input:focus {
    color: #ffffff;
}

/* Nom de fichier calculé pour la saison complète (episode-filename.js) :
   affiché sous le champ « Saison », en pleine largeur. */
.season-filename-hint {
    margin: 8px 0 0;
    font-size: 0.72rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.5);
}

.season-form-filename {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: rgba(255, 255, 255, 0.72);
    word-break: break-all;
}

.season-filename-hint[hidden] {
    display: none;
}

.episode-form-row .episode-form-num,
.episode-form-row .episode-form-title {
    appearance: none;
    -webkit-appearance: none;
    padding: 9px 10px;
    font-size: 0.92rem;
    line-height: 1.2;
}

.episode-form-row .episode-form-num + .episode-form-title {
    margin-top: 0;
}

#add_episode_season,
#add_episode_year,
#edit-season-display,
#edit-season-year {
    padding: 9px 10px;
    font-size: 0.92rem;
    line-height: 1.2;
}

.episode-form-row .film-status-neon {
    padding: 4px 12px;
    font-size: 0.7rem;
}

.episode-form-status {
    display: flex;
    align-items: center;
    align-self: center;
}

.episode-form-remove {
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 0;
    border-radius: 50%;
    border: none;
    color: var(--text);
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
}

.episode-form-remove:hover {
    color: #ff8a92;
}

.episode-form-remove.is-hidden {
    display: none;
}

#add-episode-row.btn-mini,
#season-add-row.btn-mini {
    color: var(--accent);
    text-shadow: 0 0 3px rgba(83, 193, 245, 0.6);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, text-shadow 0.2s ease;
}

#add-episode-row.btn-mini:hover,
#season-add-row.btn-mini:hover {
    color: #ffffff;
    background: linear-gradient(135deg, rgba(47, 111, 219, 0.3), rgba(83, 193, 245, 0.3));
    border-color: rgba(83, 193, 245, 0.9);
    text-shadow: 0 0 6px rgba(83, 193, 245, 0.9);
    box-shadow: inset 0 0 8px rgba(83, 193, 245, 0.3), 0 0 12px rgba(83, 193, 245, 0.5);
}

@media (max-width: 640px) {
    .episode-form-head {
        display: none;
    }

    .episode-form-row {
        grid-template-columns: 74px 1fr 30px;
    }

    .episode-form-status {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

.season-block {
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px);
    margin-bottom: 8px;
    overflow: hidden;
}

.season-summary {
    padding: 10px 14px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.92rem;
    background: rgba(255, 255, 255, 0.03);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

/* Survol d'une saison : met en évidence la ligne sous la souris. */
.season-summary:hover {
    background: rgba(83, 193, 245, 0.12);
    box-shadow: inset 3px 0 0 var(--accent);
}

.season-summary::-webkit-details-marker {
    display: none;
}

.season-summary::before {
    content: '▸';
    transition: transform 0.2s ease;
    font-size: 0.8em;
    flex-shrink: 0;
}

details[open] > .season-summary::before {
    transform: rotate(90deg);
}

.season-label {
    flex: 1;
}

.season-summary .film-status-neon {
    font-size: 0.7rem;
    padding: 3px 10px;
    flex-shrink: 0;
}

/* Bouton "Éditer la saison" : il réutilise le style du bouton "Ajouter des
   épisodes" (classes btn-mini + film-edit-btn) et ne surcharge que ce qui
   dépend de son emplacement dans le <summary> en flex. */
.season-summary .season-edit-btn {
    flex-shrink: 0;
    margin: 0;
    padding: 7px 16px;
    font-size: 0.82rem;
}

.episode-form-hint {
    margin-bottom: 12px;
    padding: 8px 12px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.04);
    border-left: 2px solid rgba(83, 193, 245, 0.6);
    border-radius: 0 var(--radius) var(--radius) 0;
}

#edit-season-modal .episode-form-table {
    max-height: 40vh;
    overflow-y: auto;
}

.episode-list {
    padding: 4px 0 8px;
}

.episode-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 7px 14px;
    font-size: 0.88rem;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.episode-row:first-child {
    border-top: none;
}

/* Survol d'un épisode : met en évidence la ligne sous la souris. */
.episode-row:hover {
    background: rgba(83, 193, 245, 0.12);
    box-shadow: inset 3px 0 0 var(--accent);
}

.episode-num {
    font-weight: 700;
    opacity: 0.5;
    font-size: 0.8rem;
    min-width: 28px;
    flex-shrink: 0;
}

.episode-title {
    flex: 1;
}

.episode-year {
    font-size: 0.8rem;
    opacity: 0.45;
    flex-shrink: 0;
}

.episode-row .film-status-btn {
    padding: 3px 12px;
    font-size: 0.78rem;
    flex-shrink: 0;
    align-self: center;
}

.film-status-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.film-status-btn:hover {
    color: var(--accent);
    border-color: rgba(83, 193, 245, 0.45);
}

.film-status-btn:active {
    transform: scale(0.97);
}

.film-status-btn.active {
    color: #0a1628;
    background: var(--accent);
    border-color: var(--accent);
}

.film-status-btn-fav:hover {
    color: #ff4d6d;
    border-color: rgba(255, 77, 109, 0.45);
}

.film-status-btn-fav.active,
.film-status-btn-fav:hover.active {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.05);
    border-color: #e63946;
    box-shadow: 0 0 14px rgba(230, 57, 70, 0.45);
}

.film-status-btn-fav.active .film-status-icon,
.film-status-btn-fav:hover.active .film-status-icon {
    color: #e63946;
}

.film-status-btn-success:hover {
    color: #2ecc71;
    border-color: rgba(46, 204, 113, 0.45);
}

.film-status-btn-success.active,
.film-status-btn-success:hover.active {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.05);
    border-color: #2ecc71;
    box-shadow: 0 0 14px rgba(46, 204, 113, 0.45);
}

.film-status-btn-success.active .film-status-icon,
.film-status-btn-success:hover.active .film-status-icon {
    color: #2ecc71;
}

.film-status-btn-warning:hover {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.45);
}

.film-status-btn-warning.active,
.film-status-btn-warning:hover.active {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.05);
    border-color: #f59e0b;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.45);
}

.film-status-btn-warning.active .film-status-icon,
.film-status-btn-warning:hover.active .film-status-icon {
    color: #f59e0b;
}

.film-status-btn-interesse:hover {
    color: #a78bfa;
    border-color: rgba(167, 139, 250, 0.45);
}

.film-status-btn-interesse.active,
.film-status-btn-interesse:hover.active {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.05);
    border-color: #a78bfa;
    box-shadow: 0 0 14px rgba(167, 139, 250, 0.45);
}

.film-status-btn-interesse.active .film-status-icon,
.film-status-btn-interesse:hover.active .film-status-icon {
    color: #a78bfa;
}

.film-status-icon {
    display: inline-flex;
}

.film-status-icon svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

[data-tooltip] {
    position: relative;
}

/* Info-bulle commune (statuts Vu / A voir / Favori...). Elle est creee par
   assets/js/tooltip.js et posee en position: fixed dans <body>, puis
   repositionnee au survol pour rester dans la fenetre quelle que soit la
   place de la carte. */
.ui-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    width: max-content;
    max-width: min(360px, calc(100vw - 16px));
    background: #0f1c2e;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e6f1ff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.ui-tooltip[hidden] {
    display: none;
}

.log-badge-favorite {
    color: #ffd166;
    background: rgba(255, 209, 102, 0.12);
    border: 1px solid rgba(255, 209, 102, 0.4);
}

.film-fav {
    position: absolute;
    top: 10px;
    right: 10px;
}

.btn-fav {
    width: 34px;
    height: 34px;
    font-size: 1rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.btn-fav:hover {
    color: #ffd166;
    background: rgba(255, 209, 102, 0.12);
    border-color: rgba(255, 209, 102, 0.4);
}

.btn-fav-active {
    color: #ffd166;
    background: rgba(255, 209, 102, 0.16);
    border-color: rgba(255, 209, 102, 0.55);
}

.empty-state {
    padding: 28px;
    text-align: center;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
}

.film-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
    justify-content: center;
    gap: 14px;
}

.list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.filter-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0 22px;
}

.filter-nav-link {
    padding: 8px 18px;
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 999px;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.filter-nav-link:hover {
    color: #fff;
    border-color: rgba(83, 193, 245, 0.5);
}

.filter-nav-link.active {
    color: #fff;
    background: rgba(83, 193, 245, 0.14);
    border-color: rgba(83, 193, 245, 0.55);
    box-shadow: 0 0 10px rgba(83, 193, 245, 0.25);
}

.tracked-status-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 0 24px;
}

.tracked-status-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
    font-family: inherit;
    color: var(--accent);
    background: #0a1628;
    border: 1px solid rgba(83, 193, 245, 0.35);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.tracked-status-btn:hover {
    color: #fff;
    border-color: rgba(83, 193, 245, 0.7);
}

.tracked-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
}

.tracked-status-watched .tracked-status-dot {
    background: #2ecc71;
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.8);
}

.tracked-status-to-watch .tracked-status-dot {
    background: #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.8);
}

.tracked-status-favorite .tracked-status-dot {
    background: #e63946;
    box-shadow: 0 0 8px rgba(230, 57, 70, 0.8);
}

.tracked-status-btn.tracked-status-active {
    color: #4ade80;
    background: rgba(22, 163, 74, 0.3);
    border-color: rgba(74, 222, 128, 0.6);
    box-shadow: 0 0 6px rgba(74, 222, 128, 0.6),
                0 0 16px rgba(74, 222, 128, 0.4),
                inset 0 0 6px rgba(74, 222, 128, 0.35);
    text-shadow: 0 0 6px rgba(74, 222, 128, 0.9);
}

.tracked-status-btn.tracked-status-active:hover {
    background: rgba(22, 163, 74, 0.45);
    border-color: rgba(74, 222, 128, 0.85);
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.85),
                0 0 24px rgba(74, 222, 128, 0.55),
                inset 0 0 8px rgba(74, 222, 128, 0.5);
    text-shadow: 0 0 10px rgba(74, 222, 128, 1),
                 0 0 20px rgba(74, 222, 128, 0.7);
}

.tracked-status-btn.tracked-status-inactive {
    color: #f87171;
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(248, 113, 113, 0.6);
    box-shadow: 0 0 6px rgba(248, 113, 113, 0.6),
                0 0 16px rgba(248, 113, 113, 0.4),
                inset 0 0 6px rgba(248, 113, 113, 0.35);
    text-shadow: 0 0 6px rgba(248, 113, 113, 0.9);
}

.tracked-status-btn.tracked-status-inactive:hover {
    background: rgba(239, 68, 68, 0.45);
    border-color: rgba(248, 113, 113, 0.85);
    box-shadow: 0 0 10px rgba(248, 113, 113, 0.85),
                0 0 24px rgba(248, 113, 113, 0.55),
                inset 0 0 8px rgba(248, 113, 113, 0.5);
    text-shadow: 0 0 10px rgba(248, 113, 113, 1),
                 0 0 20px rgba(248, 113, 113, 0.7);
}

.tracked-status-inactive .tracked-status-dot {
    opacity: 0.25;
}

.saga-sort {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 14px 0 18px;
}

.saga-sort-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.saga-sort-btn {
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.saga-sort-btn:hover {
    border-color: rgba(83, 193, 245, 0.45);
    color: #ffffff;
}

.saga-sort-btn.active {
    color: #ffffff;
    border-color: var(--accent);
    background: rgba(83, 193, 245, 0.12);
    box-shadow: 0 0 6px rgba(83, 193, 245, 0.4);
}

.films-scroll-loader {
    height: 48px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(139, 163, 191, 0.7);
    font-size: 0.9rem;
}

.films-scroll-loader[aria-busy='true']::after {
    content: '';
    width: 22px;
    height: 22px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: scroll-spin 0.8s linear infinite;
}

@keyframes scroll-spin {
    to {
        transform: rotate(360deg);
    }
}

.film-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.file-size-badge {
    display: inline-block;
    padding: 3px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent, #53c1f5);
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(83, 193, 245, 0.35);
    border-radius: var(--radius-sm);
    pointer-events: none;
}

.film-card .file-size-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
}

.film-card:hover {
    border-color: rgba(83, 193, 245, 0.45);
}

.film-card-active,
.film-card-active:hover {
    border-color: var(--accent);
    box-shadow: 0 0 8px rgba(83, 193, 245, 0.55),
                0 0 20px rgba(83, 193, 245, 0.35),
                inset 0 0 8px rgba(83, 193, 245, 0.25);
    animation: card-neon-flicker 7s ease-in-out infinite;
}

@keyframes card-neon-flicker {
    0%, 90%, 100% { opacity: 1; }
    92% { opacity: 0.85; }
    94% { opacity: 1; }
    96% { opacity: 0.92; }
    98% { opacity: 1; }
}

.film-card-head {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    text-align: center;
}

.film-poster {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
}

.film-card-sensitive .film-poster {
    filter: blur(16px);
}

.film-card.saga-item-locked .film-poster {
    filter: grayscale(1);
    opacity: 0.55;
}

.film-card.saga-item-locked .film-title-link {
    filter: grayscale(1);
    opacity: 0.6;
}

.film-card.saga-item-locked .film-poster-link,
.film-card.saga-item-locked .film-title-link {
    pointer-events: none;
    cursor: not-allowed;
}

.film-card.saga-item-locked .film-status-neon {
    color: #cbd5e1;
    border-color: #94a3b8;
    background: rgba(148, 163, 184, 0.08);
    box-shadow: none;
    text-shadow: none;
    animation: none;
    filter: grayscale(1);
    pointer-events: none;
}

.film-card-head h3 {
    font-size: 1rem;
    line-height: 1.35;
    color: #ffffff;
    overflow-wrap: anywhere;
}

.film-title-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
    min-width: 0;
}

.film-title-hint {
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.55);
    overflow-wrap: anywhere;
}

.film-year,
.poster-badge,
.poster-flags {
    position: absolute;
    z-index: 1;
}

.film-year,
.poster-badge {
    bottom: 10px;
    padding: 4px 10px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    background: rgba(0, 0, 0, 0.65);
    border-radius: 8px;
}

.film-year {
    right: 10px;
}

/* Année cliquable vers annee.php. Le <a> est désormais pose HORS de
   .film-poster-link (un lien dans un lien est du HTML invalide qui casse la
   navigation), dans .film-poster-box qui reprend la meme boite : la position et
   l'inset de 10px restent donc identiques a l'ancien <span>. */
   .film-year-link {
       text-decoration: none;
       line-height: 1.4;
       transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
   }

   .film-year-link:hover,
   .film-year-link:focus-visible {
       background: rgba(0, 0, 0, 0.85);
       color: var(--accent);
       transform: scale(1.08);
   }

.film-year-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.poster-badge-left {
    left: 10px;
}

.poster-badge-top-left {
    top: 10px;
    left: 10px;
    bottom: auto;
}

.poster-badge-top-right {
    top: 10px;
    right: 10px;
    bottom: auto;
}

.poster-badge-center {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.poster-type-badge {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: 44px;
    transform: translateX(-50%);
    padding: 3px 14px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.4;
    color: #d99cff;
    background: rgba(20, 8, 35, 0.9);
    border: 1px solid rgba(183, 110, 255, 0.6);
    border-radius: 999px;
    white-space: nowrap;
    text-shadow: 0 0 6px rgba(183, 110, 255, 0.9),
                 0 0 12px rgba(183, 110, 255, 0.6),
                 0 0 20px rgba(183, 110, 255, 0.4);
    box-shadow: 0 0 8px rgba(183, 110, 255, 0.55),
                inset 0 0 6px rgba(183, 110, 255, 0.25);
}

/* Page « Medias en ligne » : la vignette n'affiche pas son type de media (le
   type est deja porte par le titre de categorie). */
.media-en-ligne-page .poster-type-badge {
    display: none;
}

.film-status-online { background: rgba(22, 163, 74, 0.85); }
.film-status-offline { background: rgba(120, 120, 120, 0.75); }
.film-status-coming { background: rgba(234, 179, 8, 0.85); }

.film-poster-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.film-status-neon {
    display: inline-block;
    padding: 5px 18px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ffffff;
    border-radius: 999px;
    border: 1px solid;
    animation: neon-flicker 7s ease-in-out infinite;
    transition: opacity 0.08s linear;
}

.film-status-neon.neon-off {
    opacity: 0;
    box-shadow: none;
    text-shadow: none;
    filter: brightness(0.2);
}

.film-status-neon.neon-frame .neon-char {
    opacity: 0;
}

.film-status-neon.is-clickable {
    cursor: pointer;
}

/* Un média déjà demandé reste cliquable : son survol propose de retirer la demande. */
.film-status-neon.is-requested {
    cursor: pointer;
}

.film-status-neon.is-busy {
    cursor: progress;
}

.neon-text {
    display: inline-block;
}

@keyframes neon-flicker {
    0%, 90%, 100% { opacity: 1; }
    92% { opacity: 0.82; }
    94% { opacity: 1; }
    96% { opacity: 0.9; }
    98% { opacity: 1; }
}

.neon-char {
    display: inline-block;
    transition: opacity 0.12s ease-out;
}

.film-status-neon.film-status-online {
    color: #4ade80;
    border-color: #4ade80;
    background: rgba(22, 163, 74, 0.12);
    box-shadow: 0 0 6px rgba(74, 222, 128, 0.6),
                0 0 16px rgba(74, 222, 128, 0.4),
                inset 0 0 6px rgba(74, 222, 128, 0.35);
    text-shadow: 0 0 6px rgba(74, 222, 128, 0.9);
}

.film-status-neon.film-status-offline {
    color: #f87171;
    border-color: #f87171;
    background: rgba(239, 68, 68, 0.12);
    box-shadow: 0 0 6px rgba(248, 113, 113, 0.6),
                0 0 16px rgba(248, 113, 113, 0.4),
                inset 0 0 6px rgba(248, 113, 113, 0.35);
    text-shadow: 0 0 6px rgba(248, 113, 113, 0.9);
}

.film-status-neon.film-status-coming {
    color: #facc15;
    border-color: #facc15;
    background: rgba(234, 179, 8, 0.12);
    box-shadow: 0 0 6px rgba(250, 204, 21, 0.6),
                0 0 16px rgba(250, 204, 21, 0.4),
                inset 0 0 6px rgba(250, 204, 21, 0.35);
    text-shadow: 0 0 6px rgba(250, 204, 21, 0.9);
}

/* « Neons clignotants » desactives depuis Mon compte : la classe posee sur <html>
   par src/includes/header.php fige les badges de statut, la carte active et le
   bouton vert, qui gardent leur halo. */
html.neon-blink-off .film-status-neon,
html.neon-blink-off .film-card-active,
html.neon-blink-off .btn-neon-green {
    animation: none;
}

.film-status-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.film-status-pick {
    cursor: pointer;
    font-family: inherit;
    animation: none;
    opacity: 0.45;
    filter: saturate(0.6);
    transition: opacity 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.film-status-pick:hover {
    opacity: 0.75;
    filter: saturate(0.9);
}

.film-status-pick.is-selected {
    opacity: 1;
    filter: saturate(1.2) brightness(1.15);
}

.poster-flags {
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 8px;
}

.film-card .poster-flags {
    top: 10px;
}

.poster-flag {
    width: 22px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
}

/* Reprend exactement la boite de .film-poster-link pour que les drapeaux
   restent poses sur l'affiche une fois sortis du lien (pas de <a> dans <a>). */
.film-poster-box {
    position: relative;
    width: 100%;
}

.poster-flag-link {
    display: inline-flex;
    line-height: 0;
    border-radius: 2px;
}

.poster-flag-link:hover .poster-flag,
.poster-flag-link:focus-visible .poster-flag {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    transform: scale(1.15);
}

.film-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.film-people {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-self: flex-start;
}

.film-person-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid rgba(83, 193, 245, 0.4);
    background: rgba(83, 193, 245, 0.12);
    transition: border-color 0.2s ease, transform 0.15s ease;
}

.film-person-avatar:hover {
    border-color: rgba(83, 193, 245, 0.9);
    transform: scale(1.08);
}

.film-person-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 2rem;
    color: var(--accent);
    cursor: pointer;
}

.film-synopsis {
    font-size: 0.84rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
    max-height: 6.3rem;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.film-synopsis::-webkit-scrollbar {
    width: 6px;
}

.film-synopsis::-webkit-scrollbar-track {
    background: transparent;
}

.film-synopsis::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 999px;
}

.film-synopsis::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

.film-poster-link {
    display: block;
    position: relative;
    line-height: 0;
}

.film-poster {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
}

/* Titre des card medias : bleu, comme .film-univers-title-link.
   Le survol brighten vers le blanc, sinon le bleu de base ne se verrait plus. */
.film-title-link {
    color: var(--accent);
    text-decoration: none;
}

.film-title-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

.film-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 22px;
    align-items: flex-start;
}

.film-detail-left {
    flex: 0 0 330px;
    min-width: 260px;
    display: flex;
    justify-content: center;
}

.film-detail-center {
    flex: 1 1 320px;
    min-width: 0;
}

.film-detail-right {
    flex: 0 1 330px;
    min-width: 260px;
}

.film-detail-right h2,
.film-detail-center h2 {
    margin: 22px 0 8px;
    font-size: 1.05rem;
    color: var(--accent);
}

.film-detail-center .film-detail-header {
    margin-bottom: 0;
}

.film-detail-header h1 {
    font-size: 1.9rem;
    line-height: 1.25;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.film-detail-center .film-detail-header {
    text-align: center;
}

.film-detail-center .film-detail-header .film-year {
    margin-top: 6px;
}

.film-detail-center .film-meta {
    justify-content: center;
}

.film-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.film-ext-links {
    margin-top: 22px;
}

.film-ext-links h2 {
    margin-bottom: 10px;
}

.film-ext-links-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.film-ext-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.film-ext-link:active,
.film-ext-link:hover {
    background: rgba(0, 0, 0, 0.95);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
}

.film-ext-logo {
    display: block;
    height: auto;
    flex-shrink: 0;
}

/* Le label est en capitales (« URL ») alors que `vertical-align: middle` cale le
   logo sur le milieu de l'oeil x : au-dessus de la ligne de base, le logo tombait
   donc ~1.5px sous le milieu optique des capitales. On le remonte de la moitie de
   la difference hauteur de capitale / hauteur d'oeil x, soit ~0.11em avec la
   police du site (0.86rem), pour rester juste si la taille change. */
.form-group label .film-ext-logo {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -0.11em;
}

/* Le SVG Allocine est noir sur fond transparent : sur le fond sombre des
   modales il disparaissait. Meme blanc que le badge .film-ext-link-allocine.
   content-box : le padding s'ajoute autour du logo au lieu de le retrecir,
   sinon il s'afficherait a 44px au lieu des 54px de ses voisins TMDB/IMDb. */
.form-group label .film-ext-logo[src*="logos_site/allocine"] {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 3px;
    padding: 3px 5px;
    box-sizing: content-box;
}

/* Badge Allocine : inverse des autres (logo noir -> fond blanc obligatoire).
   Le hover generique assombrit le fond, ce qui est invisible ici : 0.92 -> 1.0
   d'alpha blanc ne se voit pas. On inverse donc la polarite et on signale le
   survol par un anneau sombre, miroir du fond qui s'assombrit chez TMDB/IMDb. */
.film-ext-link-allocine {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(255, 255, 255, 0.85);
    color: #262626;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.film-ext-link-allocine:hover,
.film-ext-link-allocine:active {
    background: #fff;
    color: #262626;
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55), 0 3px 12px rgba(0, 0, 0, 0.45);
}

.film-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.film-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.film-detail-poster {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.film-detail-box {
    width: 100%;
    max-width: none;
    position: relative;
}

.film-detail-box .film-edit-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    margin: 0;
}

.film-poster-img {
    width: 330px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.film-detail-sensitive .film-poster-img {
    filter: blur(24px);
}

.film-detail-right h2,
.film-detail-right h3 {
    margin: 22px 0 8px;
    font-size: 1.05rem;
    color: var(--accent);
}

.film-detail-synopsis {
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.82);
    overflow-wrap: anywhere;
}

.film-univers {
    text-align: center;
    margin-top: 22px;
}

.film-univers-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin-top: 14px;
}

.film-univers-link {
    display: inline-block;
    text-decoration: none;
}

.film-univers-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 220px;
}

.film-univers-title-link {
    display: block;
    margin-top: 6px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}

.film-univers-title-link:hover {
    text-decoration: underline;
}

.film-univers-poster {
    max-height: 200px;
    width: auto;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.film-univers-link:hover .film-univers-poster {
    transform: translateY(-2px);
    border-color: rgba(83, 193, 245, 0.45);
}

.film-univers-name {
    display: inline-block;
    padding: 8px 16px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.film-univers-title {
    color: #ffffff;
}

.back-link {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 0.9rem;
}

.back-link-wrap {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}

.back-link-wrap .back-link {
    margin: 0;
}

/* Variante alignee a droite : sur genre.php et genre_jeux.php le seul lien de la
   ligne (passage a l'autre taxonomie) se pose a droite, au-dessus du selecteur.
   Le reste de la page garde le lien a gauche (film.php, a_venir.php, etc.). */
.back-link-wrap--right {
    justify-content: flex-end;
}

.univers-topbar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}

/* Pages artiste et pays : la barre ne contient plus que ses puces (types de
   media, compteurs par type), placees juste au-dessus des sections pour servir
   de filtres/ancres a celles-ci, centrees comme le selecteur qui les surplombe. */
.univers-topbar--center {
    justify-content: center;
}

.univers-topbar .back-link-wrap {
    width: auto;
    margin: 0;
    position: static;
    z-index: auto;
}

.genre-switcher,
.pays-switcher,
.annee-switcher {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.genre-switcher-label {
    color: rgba(139, 163, 191, 0.85);
    white-space: nowrap;
}

.genre-switcher select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 6px 34px 6px 14px;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--text);
    background: #0a1628;
    border: 1px solid rgba(83, 193, 245, 0.35);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.genre-switcher select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(83, 193, 245, 0.18);
}

.genre-switcher select option {
    color: var(--text);
    background: #0a1628;
}

.genre-select {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.genre-select-arrow {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--accent);
    font-size: 1rem;
    line-height: 1;
}

.genre-switcher--title,
.pays-switcher--title,
.annee-switcher--title {
    display: flex;
    width: 100%;
    justify-content: center;
    margin: 0 0 24px;
}

.genre-switcher--title .genre-switcher-label {
    font-size: 1.15rem;
}

.genre-switcher--title select {
    padding: 8px 44px 8px 22px;
    font-size: 1.3rem;
    border-color: rgba(83, 193, 245, 0.6);
}

.genre-switcher--title .genre-select-arrow {
    font-size: 1.35rem;
}

.univers-topbar .back-link {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: #0a1628;
    border: 1px solid rgba(83, 193, 245, 0.35);
}

.univers-topbar .log-badge {
    background: #0a1628;
}

.univers-topbar .count-link {
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.univers-page {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow: hidden;
    padding: 16px;
}

body.univers-locked {
    height: 100dvh;
    overflow: hidden;
}



.univers-page .univers-detail-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(83, 193, 245, 0.45) transparent;
    padding-right: 6px;
}

/* Titre « Univers : … » de la page univer.php.

   Le selecteur est volontairement descendance (.univers-detail-content …) pour
   passer devant `.films-box h1 { color: #ffffff }` : `.univers-main-title` seul
   a une specificite inferieure (une classe contre une classe + un element).
   Le libelle « Univers : » reste blanc, seul le nom de l'univers porte l'accent. */
.univers-detail-content .univers-main-title {
    color: var(--accent);
}

.univers-detail-content .univers-main-title .univers-title-label {
    color: #ffffff;
}

.univers-page .univers-detail-content::-webkit-scrollbar {
    width: 8px;
}

.univers-page .univers-detail-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 999px;
}

.univers-page .univers-detail-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(83, 193, 245, 0.55), rgba(47, 111, 219, 0.55));
    border-radius: 999px;
}

.univers-page .univers-detail-content::-webkit-scrollbar-thumb:hover {
    background: rgba(83, 193, 245, 0.75);
}

.univers-topbar .count-link:hover {
    border-color: rgba(83, 193, 245, 0.7);
}

.univers-topbar .count-link.count-link-active {
    color: #4ade80;
    background: rgba(22, 163, 74, 0.3);
    border-color: rgba(74, 222, 128, 0.6);
    box-shadow: 0 0 6px rgba(74, 222, 128, 0.6),
                0 0 16px rgba(74, 222, 128, 0.4),
                inset 0 0 6px rgba(74, 222, 128, 0.35);
    text-shadow: 0 0 6px rgba(74, 222, 128, 0.9);
}

.univers-topbar .count-link.count-link-active:hover {
    background: rgba(22, 163, 74, 0.45);
    border-color: rgba(74, 222, 128, 0.85);
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.85),
                0 0 24px rgba(74, 222, 128, 0.55),
                inset 0 0 8px rgba(74, 222, 128, 0.5);
    text-shadow: 0 0 10px rgba(74, 222, 128, 1),
                 0 0 20px rgba(74, 222, 128, 0.7);
}

.univers-topbar .count-link.count-link-inactive {
    color: #f87171;
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(248, 113, 113, 0.6);
    box-shadow: 0 0 6px rgba(248, 113, 113, 0.6),
                0 0 16px rgba(248, 113, 113, 0.4),
                inset 0 0 6px rgba(248, 113, 113, 0.35);
    text-shadow: 0 0 6px rgba(248, 113, 113, 0.9);
}

.univers-topbar .count-link.count-link-inactive:hover {
    background: rgba(239, 68, 68, 0.45);
    border-color: rgba(248, 113, 113, 0.85);
    box-shadow: 0 0 10px rgba(248, 113, 113, 0.85),
                0 0 24px rgba(248, 113, 113, 0.55),
                inset 0 0 8px rgba(248, 113, 113, 0.5);
    text-shadow: 0 0 10px rgba(248, 113, 113, 1),
                 0 0 20px rgba(248, 113, 113, 0.7);
}

.univers-detail-content .film-grid[id] {
    scroll-margin-top: calc(var(--topbar-h, 88px) + 40px);
}

/* annee.php uniquement : les cartes media doivent occuper toute la largeur de
   l'ecran, sans marge laterale residuelle.

   Ces grilles sont des `.saga-block`, or `.saga-block .film-grid` est un
   FLEXBOX (pas une grille CSS) pilote par --cols : 2 colonnes par defaut, puis
   4 / 5 / 6 / 7 selon la largeur (L3538 et ses media queries). A 1920px on
   veut donc 6 colonnes, mais `.saga-block .film-card` impose `min-width: 320px`
   qui, en CSS, l'emporte sur le `max-width` calcule. La 6e colonne ne rentre
   pas, il reste 182px de vide, et le `justify-content: center` les repartit en
   91px de chaque cote.

   On repasse donc ces sections en grille CSS : 320px de minimum, 1fr, ce qui
   donne un remplissage exact de la largeur a toutes les tailles d'ecran. Les
   deux selecteurs neutralisent aussi le pilotage flex des cartes (flex, et les
   min-width / max-width exprimes en --cols) qui n'a plus de sens ici. */
.univers-page .saga-block .annee-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    justify-content: stretch;
}

.univers-page .saga-block .annee-grid .film-card {
    flex: none;
    min-width: 0;
    max-width: none;
}

/* Sur grand ecran : 5 cartes par ligne, c'est demande.

   Le `auto-fill, minmax(320px, 1fr)` ci-dessusajoute des colonnes au fur et a
   mesure que la place augmente (6 des ~2070px, 7 au-dela de ~2400px, 8 en 4K),
   et n'en donne que 4 entre ~1200 et ~2000px. Or "5 par ligne" doit tenir sur
   un ecran de bureau courant, pas seulement sur un 4K : on fige donc 5 colonnes
   egales des 1200px de viewport.

   Le seuil est sur 1200px, et non 2000px, parce que la largeur CSS depend
   aussi de l'echelle Windows (1920px a 125% => 1536px de viewport) et du zoom
   navigateur : un reglage a 2000px laissait 4 colonnes sur ces machines.
   En dessous, l'adaptatif reste en place (1024px => 2 colonnes, 768 => 2,
   telephone => 1).

   Consequence assumee : sur un petit ecran la carte passe sous les 320px du
   minimum adaptatif (228px a 1280px de viewport, 260px a 1440px). C'est le
   prix de "5 par ligne" ; les colonnes restent en 1fr, donc toujours zero vide
   lateral. */
@media (min-width: 1200px) {
    .univers-page .saga-block .annee-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

}

.univers-topbar .back-link:hover {
    color: #ffffff;
    text-decoration: none;
}

.univers-topbar .neon-text {
    text-shadow: 0 0 6px rgba(83, 193, 245, 0.8),
                 0 0 14px rgba(83, 193, 245, 0.55),
                 0 0 28px rgba(83, 193, 245, 0.35);
}

.back-link-wrap .back-link.neon-text {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: #0a1628;
    border: 1px solid rgba(83, 193, 245, 0.35);
    text-shadow: 0 0 6px rgba(83, 193, 245, 0.8),
                 0 0 14px rgba(83, 193, 245, 0.55),
                 0 0 28px rgba(83, 193, 245, 0.35);
}

.back-link-wrap .back-link.neon-text:hover {
    color: #ffffff;
    text-decoration: none;
}

.film-edit-btn {
    display: inline-block;
    margin: 14px 0 0;
    padding: 7px 16px;
    font-size: 0.82rem;
    text-decoration: none;
    color: #ffab3d;
    border: 1px solid rgba(255, 160, 64, 0.4);
    border-radius: 999px;
    text-shadow: 0 0 6px rgba(255, 160, 64, 0.65),
                 0 0 14px rgba(255, 160, 64, 0.35);
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.film-edit-btn:hover {
    color: #ffc46b;
    border-color: rgba(255, 160, 64, 0.7);
    background: transparent;
    box-shadow: 0 0 14px rgba(255, 160, 64, 0.55),
                inset 0 0 8px rgba(255, 160, 64, 0.35);
    text-shadow: 0 0 6px rgba(255, 160, 64, 0.9),
                 0 0 16px rgba(255, 160, 64, 0.5);
}

.film-edit-section {
    margin-top: 20px;
}

.film-actions {
    width: 100%;
    margin-top: 18px;
}

.film-actions .back-link {
    display: block;
    margin: 0 0 12px;
}

.film-actions .film-edit-btn {
    display: inline-block;
}

@media (max-width: 640px) {
    .film-detail-left {
        flex-basis: 100%;
    }

    .film-poster-img {
        width: 100%;
        max-width: 330px;
    }
}

.logs-box h1 {
    margin-bottom: 6px;
    font-size: 1.5rem;
    color: #ffffff;
    text-align: center;
}

.logs-box p {
    margin-bottom: 22px;
    color: #ffffff;
}

/* Pagination des logs : une page par bloc de 100 entrees. Les numeros affiches
   sont ceux de la fenetre construite en PHP, l'ecart restant est.resume par
   un nombre de pages. */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
}

.pagination a,
.pagination span {
    display: inline-block;
    min-width: 38px;
    padding: 8px 12px;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.pagination a:hover {
    color: #ffffff;
    border-color: rgba(83, 193, 245, 0.45);
}

.pagination .pagination-active,
.pagination .pagination-active:hover {
    color: #0a1628;
    background: var(--accent);
    border-color: var(--accent);
}

.pagination .pagination-disabled {
    color: rgba(255, 255, 255, 0.25);
    background: transparent;
}

.pagination .pagination-gap {
    min-width: 0;
    padding: 8px 4px;
    color: rgba(255, 255, 255, 0.4);
    background: transparent;
    border-color: transparent;
}

.data-table {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.data-table th,
.data-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.data-table th {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.log-date {
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.65);
    font-variant-numeric: tabular-nums;
}

.log-detail {
    color: rgba(255, 255, 255, 0.75);
}

.log-meta {
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.75);
    font-variant-numeric: tabular-nums;
}

.log-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
    text-decoration: none;
    color: var(--accent);
    background: rgba(47, 111, 219, 0.16);
    border: 1px solid rgba(83, 193, 245, 0.35);
    border-radius: 999px;
}

.genre-badge {
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.genre-badge:hover {
    color: #ffffff;
    background: rgba(47, 111, 219, 0.3);
    border-color: rgba(83, 193, 245, 0.7);
    box-shadow: 0 0 8px rgba(83, 193, 245, 0.35);
}

.log-badge-danger {
    color: var(--danger-text);
    background: var(--danger-bg);
    border-color: var(--danger-border);
}

.log-badge-success {
    color: #58d68d;
    background: rgba(46, 204, 113, 0.14);
    border-color: rgba(88, 214, 141, 0.45);
}

.log-badge-warning {
    color: #f7b155;
    background: rgba(245, 166, 35, 0.14);
    border-color: rgba(247, 177, 85, 0.45);
}

.log-badge-label {
    white-space: normal;
    line-height: 1.45;
    border-radius: 12px;
    max-width: 100%;
}

.log-badge-sep {
    margin-right: 6px;
    opacity: 0.85;
}

.inline-form {
    display: inline-flex;
}

.demande-actions {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.btn-mini {
    padding: 4px 12px;
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
    font-family: inherit;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.btn-mini-danger {
    color: var(--danger-text);
}

.btn-mini-edit {
    display: inline-block;
    text-decoration: none;
    color: #ffab3d;
    text-shadow: 0 0 6px rgba(255, 160, 64, 0.65),
                 0 0 14px rgba(255, 160, 64, 0.35);
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-mini-edit:hover {
    color: #ffc46b;
    border-color: rgba(255, 160, 64, 0.7);
    background: transparent;
    box-shadow: 0 0 14px rgba(255, 160, 64, 0.55),
                inset 0 0 8px rgba(255, 160, 64, 0.35);
    text-shadow: 0 0 6px rgba(255, 160, 64, 0.9),
                 0 0 16px rgba(255, 160, 64, 0.5);
}

.btn-mini-danger:hover {
    color: #ffffff;
    background: #d64550;
    border-color: #d64550;
}

.btn-mini-success {
    color: #58d68d;
}

.btn-mini-success:hover {
    color: #0a1628;
    background: #58d68d;
    border-color: #58d68d;
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card h1 {
    margin-bottom: 26px;
    font-size: 1.35rem;
    text-align: center;
    color: #ffffff;
}

.card h1::after {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin: 12px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    color: #ffffff;
}

.form-group input {
    width: 100%;
    padding: 11px 14px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.form-group input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.form-group input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(83, 193, 245, 0.18);
}

/* Champ verrouille : le navigateur grise peu les <input disabled> et notre
   style impose deja un texte blanc, il faut le rendre visible nous-memes. */
.form-group input.input-locked,
.form-group input.input-locked:focus {
    color: #8a9bb4;
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 1;
}

.form-group textarea {
    width: 100%;
    min-height: 140px;
    padding: 12px 14px;
    font-size: 1rem;
    line-height: 1.6;
    font-family: inherit;
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    resize: vertical;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.form-group textarea:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(83, 193, 245, 0.18);
}

.textarea-counter {
    display: block;
    margin-top: 6px;
    text-align: right;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

.form-group select[multiple] {
    width: 100%;
    min-height: 132px;
    padding: 8px;
    font-size: 0.92rem;
    font-family: inherit;
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.form-group select[multiple]:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(83, 193, 245, 0.18);
}

.form-group select[multiple] option {
    padding: 3px 6px;
    border-radius: 6px;
}

.form-group select:not([multiple]) {
    width: 100%;
    padding: 11px 14px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.form-group select:not([multiple]):focus {
    outline: none;
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(83, 193, 245, 0.18);
}

.form-group select:not([multiple]) option {
    color: var(--text);
    background: #0a1628;
}

.form-group input + input {
    margin-top: 8px;
}

.image-source-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.form-group .image-source-row input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.image-upload-btn {
    flex: 0 0 auto;
    width: 46px;
    padding: 0;
    font-family: inherit;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1;
    color: var(--accent);
    cursor: pointer;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.image-upload-btn:hover {
    color: #ffffff;
    background: rgba(83, 193, 245, 0.18);
    border-color: var(--accent);
}

.image-upload-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(83, 193, 245, 0.35);
}

.image-upload-name {
    display: block;
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--accent);
    overflow-wrap: anywhere;
}

/* Neutralise le display: block ci-dessus quand l'attribut hidden est pose. */
.image-upload-name[hidden] {
    display: none;
}

.tag-field {
    margin-bottom: 18px;
}

.tag-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.86rem;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    color: #ffffff;
}

.tag-field-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.tag-field-head label {
    margin-bottom: 0;
    line-height: 22px;
}

.tag-create-btn {
    flex: 0 0 auto;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid rgba(46, 204, 113, 0.4);
    border-radius: 50%;
    background: rgba(46, 204, 113, 0.16);
    color: #2ecc71;
    font-size: 0;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, color 0.2s;
}

.tag-create-btn::before,
.tag-create-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
    border-radius: 1px;
    transform: translate(-50%, -50%);
}

.tag-create-btn::before {
    width: 11px;
    height: 2px;
}

.tag-create-btn::after {
    width: 2px;
    height: 11px;
}

.tag-create-btn:hover {
    background: rgba(46, 204, 113, 0.35);
    color: #ffffff;
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.45);
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 6px 0 12px;
    background: rgba(47, 111, 219, 0.16);
    border: 1px solid rgba(83, 193, 245, 0.35);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    color: var(--accent);
}

.tag-x {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 0;
    padding: 0;
    border-radius: 50%;
}

.tag-x::before,
.tag-x::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
    border-radius: 1px;
}

.tag-x::before {
    width: 10px;
    height: 2px;
    transform: translate(-50%, -50%) rotate(45deg);
}

.tag-x::after {
    width: 10px;
    height: 2px;
    transform: translate(-50%, -50%) rotate(-45deg);
}

.tag-x:hover {
    background: rgba(255, 31, 75, 0.18);
}

.tag-chrono {
    width: 52px;
    height: 26px;
    padding: 0 6px;
    font-size: 0.78rem;
    line-height: 1;
    font-family: inherit;
    text-align: center;
    color: var(--accent);
    background: rgba(47, 111, 219, 0.16);
    border: 1px solid rgba(83, 193, 245, 0.35);
    border-radius: 999px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.tag-chrono::placeholder {
    color: rgba(83, 193, 245, 0.5);
}

.tag-chrono:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(83, 193, 245, 0.18);
}

.tag-field[data-type="saga"] .tag {
    border-radius: 999px 0 0 999px;
}

.tag-field[data-type="saga"] .tag-chrono {
    border-radius: 0 999px 999px 0;
}

.tag-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tag-search-input {
    flex: 1;
    min-width: 0;
    padding: 11px 14px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.tag-search-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.tag-search-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(83, 193, 245, 0.18);
}

.tag-suggest {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 240px;
    overflow: auto;
    background: #0e1a2b;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.tag-suggest-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 7px 10px;
    font-size: 0.92rem;
    font-family: inherit;
    color: var(--text);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.tag-suggest-item:hover {
    background: rgba(83, 193, 245, 0.12);
    color: #ffffff;
}

.tag-suggest-avatar {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(83, 193, 245, 0.16);
    border: 1px solid rgba(83, 193, 245, 0.35);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent);
}

.tag-suggest-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tag-suggest-flag-img {
    flex-shrink: 0;
    display: block;
    width: 26px;
    height: 20px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid rgba(83, 193, 245, 0.35);
}

.tag-flag {
    flex-shrink: 0;
    display: block;
    width: 16px;
    height: 12px;
    object-fit: cover;
    border-radius: 2px;
}

.tag-suggest-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn {
    width: 100%;
    margin-top: 6px;
    padding: 13px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    font-family: inherit;
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(47, 111, 219, 0.25);
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.btn:hover {
    filter: brightness(1.12);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(83, 193, 245, 0.35);
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(83, 193, 245, 0.4), 0 6px 16px rgba(83, 193, 245, 0.35);
}

.btn:active {
    filter: brightness(0.9);
    transform: translateY(1px) scale(0.97);
    box-shadow: 0 2px 5px rgba(47, 111, 219, 0.3);
}

.link-discreet {
    display: block;
    margin-top: 18px;
    font-size: 0.86rem;
    text-align: center;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.55);
    transition: color 0.2s ease;
}

.link-discreet:hover {
    color: #ffffff;
    text-decoration: underline;
}

.info-text {
    margin-bottom: 24px;
    font-size: 0.92rem;
    line-height: 1.55;
    text-align: center;
    color: rgba(255, 255, 255, 0.78);
}

.card .btn-outline {
    display: block;
    width: fit-content;
    margin: 0 auto;
}

.btn-outline-blue,
.btn-outline-blue:hover {
    border-color: var(--accent);
}

.btn-outline-blue {
    color: var(--accent);
}

.btn-outline-blue:hover {
    color: #0a1628;
    background: var(--accent);
}

.alert {
    margin-bottom: 18px;
    padding: 10px 14px;
    font-size: 0.9rem;
    text-align: center;
    color: #ffffff;
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    border-radius: var(--radius);
}

.alert-success {
    background: rgba(46, 204, 113, 0.12);
    border-color: rgba(88, 214, 141, 0.45);
}

.dashboard-box h1 {
    margin-bottom: 6px;
    font-size: 1.5rem;
    color: #ffffff;
}

.dashboard-box p {
    margin-bottom: 22px;
    color: #ffffff;
}

.roles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin-bottom: 28px;
}

.roles li {
    padding: 5px 13px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #ffffff;
    background: rgba(47, 111, 219, 0.16);
    border: 1px solid rgba(83, 193, 245, 0.35);
    border-radius: 999px;
}

.btn-outline {
    display: inline-block;
    width: auto;
    padding: 10px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    color: #ffffff;
    border-color: var(--danger-text);
    background: transparent;
    border: 1px solid currentColor;
    border-radius: var(--radius);
    transition: background 0.2s, color 0.2s;
}

.btn-outline:hover {
    color: #fff;
    background: #d64550;
}



.univers-box {
    max-width: none;
    position: relative;
}

.univers-box h1 {
    margin-bottom: 22px;
    font-size: 1.5rem;
    text-align: center;
    color: #ffffff;
}

.back-link {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 0.88rem;
    color: var(--accent);
    text-decoration: none;
}

.back-link:hover {
    text-decoration: underline;
}

.univers-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.univers-tab {
    padding: 9px 18px;
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 999px;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.univers-tab:hover {
    color: #ffffff;
    border-color: rgba(83, 193, 245, 0.45);
}

.univers-tab-active,
.univers-tab-active:hover {
    color: #0a1628;
    background: var(--accent);
    border-color: var(--accent);
}

/* Les onglets sont partages par l'administration et la page compte : memes
   reglages, seules les classes changent. Les deux occupy toute la fenetre :
   la barre d'onglets comme la boite qui suit. */
.admin-tabs-wrap,
.account-tabs-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
}

.admin-tabs,
.account-tabs {
    display: flex;
    gap: 6px;
    padding: 0 16px;
}

.admin-tab,
.account-tab {
    padding: 12px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.admin-tab:hover,
.account-tab:hover {
    color: #ffffff;
    border-color: rgba(83, 193, 245, 0.45);
}

.admin-tab-active,
.admin-tab-active:hover,
.account-tab-active,
.account-tab-active:hover {
    color: #0a1628;
    background: var(--accent);
    border-color: var(--accent);
}

.admin-box,
.account-box {
    margin-top: 0;
}

/* La barre d'onglets occupe toute la largeur du conteneur : la boite doit
   suivre, sinon l'onglet actif déborde à droite d'un encadré étroit. */
.admin-tabs + .admin-box,
.account-tabs + .account-box {
    width: 100%;
    max-width: none;
}

/* Onglet « Mon compte » : le contenu se centre dans la boite en pleine largeur.
   L'onglet « Mes demandes » garde son tableau aligne a gauche. */
.account-box-centered > * {
    margin-left: auto;
    margin-right: auto;
}

.account-box-centered .account-section {
    width: 100%;
    max-width: 720px;
}

.account-box-centered h1,
.account-box-centered .alert {
    text-align: center;
}

/* Onglet « Tableau de bord » : la vue d'ensemble reprend la largeur de l'ancien
   stats-box (1080px), centrée dans la boîte pleine largeur du compte. */
.account-box .tableau-tab {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}

.admin-body {
    padding-top: 28px;
}

.admin-filters,
.account-filters,
.logs-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 20px;
}

.admin-filters .form-group,
.account-filters .form-group,
.logs-filters .form-group {
    flex: 1 1 170px;
    margin-bottom: 0;
}

/* La case a cocher vit dans la rangee de champs mais garde l'interrupteur des
   preferences : son groupe porte volontairement une autre classe que
   `.form-group`, dont la regle `input` s'appliquerait et lui donnerait la
   largeur et l'habillage d'un champ de saisie. */
.admin-filters .form-group-check {
    flex: 0 0 auto;
    margin-bottom: 0;
}

/* Bouton de filtre : il reste sur la ligne des champs. `.btn` etant pleine
   largeur par defaut, il se poserait sinon sur une ligne a lui tout seul. */
.admin-filters .btn,
.account-filters .btn,
.logs-filters .btn {
    flex: 0 0 auto;
    width: auto;
    margin-top: 0;
    white-space: nowrap;
}

.acteur-table {
    min-width: 520px;
}

/* Les editeurs n'ont pas de colonne photo : le tableau est plus etroit. */
.editeur-table {
    min-width: 420px;
}

.acteur-photo {
    display: block;
    width: 48px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
}

.dl-overlay:not([open]) {
    display: none;
}

.dl-overlay::backdrop {
    background: transparent;
}

.dl-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 14, 27, 0.72);
    backdrop-filter: blur(3px);
    border: none;
    margin: 0;
    padding: 0;
    max-width: none;
    max-height: none;
    width: 100vw;
    height: 100vh;
}

.dl-box {
    width: min(340px, 86vw);
    padding: 30px 28px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #12263f 0%, #0a1628 100%);
    border: 1px solid var(--border);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.dl-spinner {
    width: 44px;
    height: 44px;
    margin: 0 auto 16px;
    border-radius: 50%;
    border: 4px solid rgba(83, 193, 245, 0.25);
    border-top-color: var(--accent);
    animation: dl-spin 0.9s linear infinite;
}

@keyframes dl-spin {
    to { transform: rotate(360deg); }
}

.dl-title {
    margin: 0 0 14px;
    font-weight: 600;
    font-size: 15px;
    color: var(--text);
}

.dl-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    overflow: hidden;
}

.dl-bar {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transition: width 0.2s ease;
}

.dl-hint {
    margin: 12px 0 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
}

.univers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(345px, 1fr));
    gap: 18px;
}

@media (min-width: 1600px) {
    .univers-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (min-width: 1280px) and (max-width: 1599px) {
    .univers-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (min-width: 960px) and (max-width: 1279px) {
    .univers-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 640px) and (max-width: 959px) {
    .univers-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.univers-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 16px;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: border-color 0.2s ease, transform 0.15s ease;
}

.univers-card:hover {
    border-color: rgba(83, 193, 245, 0.45);
    transform: translateY(-2px);
}

.univers-name {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    color: #ffffff;
    overflow-wrap: anywhere;
    text-align: center;
}

.univers-count {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
}

.univers-counts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin-top: 2px;
}

.univers-counts .log-badge {
    font-size: 0.68rem;
    padding: 2px 8px;
}

.univers-poster-wrap {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
}

.univers-poster {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.jeux-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

.jeux-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
    text-align: center;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: border-color 0.2s ease, transform 0.15s ease;
}

.jeux-card:hover {
    border-color: rgba(83, 193, 245, 0.45);
    transform: translateY(-2px);
}

.jeux-poster-wrap {
    display: block;
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
}

.jeux-poster {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.jeux-name {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
    color: #ffffff;
    overflow-wrap: anywhere;
}

.univers-poster-thumb {
    width: 96px;
    aspect-ratio: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.univers-detail-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    margin-bottom: 20px;
}

.univers-detail-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
}

.univers-detail-counts {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.genre-title {
    text-align: center;
    margin: 0 0 24px;
    font-size: 1.6rem;
    letter-spacing: 0.3px;
    color: var(--accent);
}

.univers-fixed-poster-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    overflow: hidden;
}

.univers-fixed-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.univers-detail-content {
    position: relative;
    z-index: 1;
    background: rgba(15, 33, 56, 0.82);
}

/* Pages pays, genre et genre_jeux, annee et artiste : le selecteur et les medias
   reposent directement sur le fond de page — il n'y a plus de carte.

   Le conteneur garde .univers-detail-content : c'est lui qui porte le
   defilement interne (body.univers-locked) et qui sert de racine aux
   IntersectionObserver de pays-scroll.js, genre-scroll.js et annee-scroll.js.
   Seul son fond (la carte semi-opaque de .univers-detail-content) est neutralise :
   sinon les medias d'artiste.php, qui n'etaient plus dans aucune carte, se
   retrouveraient sur un panneau sombre. */
.pays-content,
.genre-content,
.genre-jeux-content,
.annee-content,
.artiste-content,
.media-en-ligne-content {
    background: none;
}

/* Pages annee, genre, genre_jeux et pays : la barre de defilement doit etre celle de la page
   artiste.php, ou c'est la fenetre qui defile (barre globale : 8px, piste
   sombre).

   Trois ecarts a corriger, le conteneur portant ici le defilement :
   - la piste est transparente par defaut sur .univers-detail-content (barre
     discrete) : on reprend la piste sombre de la « Scrollbar globale » ;
   - le conteneur s'arrete au padding de .univers-page (16px sur les quatre
     cotes) : la barre est donc en retrait du bord de la fenetre, et la piste
     demarre 16px sous le menu. Les marges negatives annulent ce padding sur les
     quatre cotes et le padding de 16px, identique partout, le rend au contenu ;
   - resultat : le contenu garde les cotes qu'il avait quand la fenetre defilait
     (16px de blanc de chaque cote, 16px entre les medias et la barre, 16px sous
     le menu). La barre, elle, occupe desormais la bande de droite entre le bas
     du menu et le bas de la fenetre, comme sur artiste.php (qui suit la meme
     regle, voir plus bas). */
.univers-page .annee-content,
.univers-page .genre-content,
.univers-page .genre-jeux-content,
.univers-page .pays-content {
    margin: -16px;
    padding: 16px;
    scrollbar-color: rgba(83, 193, 245, 0.45) rgba(8, 10, 16, 0.4);
}

.univers-page .annee-content::-webkit-scrollbar-track,
.univers-page .genre-content::-webkit-scrollbar-track,
.univers-page .genre-jeux-content::-webkit-scrollbar-track,
.univers-page .pays-content::-webkit-scrollbar-track {
    background: rgba(8, 10, 16, 0.4);
    border-radius: 999px;
}

/* Page artiste : la barre doit elle aussi s'arreter sous le menu. Ici, c'etait
   la fenetre qui defilait (barre sur toute la hauteur de la fenetre, a cote de
   l'en-tete) : on passe au meme modele que annee/pays, le conteneur portant le
   defilement (body.univers-locked dans artiste.php).

   .univers-page remplace le padding de 48px de `main` par 16px ; le conteneur
   annule ce padding par une marge negative et le restitue en padding (48px en
   haut et en bas, 16px sur les cotes) : le contenu ne bouge pas d'un pixel (le
   blanc au-dessus de la tete et sous les medias reste celui de `main`). Seule la
   barre change : elle va du bas du menu au bas de la fenetre, au lieu de courir
   sur toute la hauteur de la fenetre a cote de l'en-tete. */
.univers-page .artiste-content {
    margin: -16px;
    padding: 48px 16px;
    scrollbar-color: rgba(83, 193, 245, 0.45) rgba(8, 10, 16, 0.4);
}

.univers-page .artiste-content::-webkit-scrollbar-track {
    background: rgba(8, 10, 16, 0.4);
    border-radius: 999px;
}

/* Page « Medias en ligne » : meme demande que artiste.php, la barre doit
   s'arreter sous le menu ; c'est donc le conteneur qui defile
   (body.univers-locked dans media_en_ligne.php).

   Particularite : `main` n'a pas le padding uniforme des autres pages. La
   gouttiere laterale vient de .page-main.list-page (14px, comme l'ecart entre
   les vignettes) et .univers-page ajoute 16px en haut et en bas. Le conteneur
   reprend donc exactement ces valeurs (marges negatives de 16px en haut et en
   bas, 14px sur les cotes) et restitue en plus les 48px que `main` portait en
   bas : le contenu ne bouge pas d'un pixel, seule la barre change. */
.univers-page .media-en-ligne-content {
    margin: -16px -14px;
    padding: 16px 14px 48px;
    scrollbar-color: rgba(83, 193, 245, 0.45) rgba(8, 10, 16, 0.4);
}

.univers-page .media-en-ligne-content::-webkit-scrollbar-track {
    background: rgba(8, 10, 16, 0.4);
    border-radius: 999px;
}

/* Page « Univers » : meme demande que media_en_ligne.php, la barre doit
   s'arreter sous le menu. Ici il n'y a pas de conteneur dedie : c'est `main`
   lui-meme qui defile (il remplit deja la zone sous le menu). Son padding est
   conserve, donc le contenu ne bouge pas d'un pixel ; seule la barre change,
   avec la meme apparence que sur media_en_ligne.php (fine, piste sombre).

   `main` porte aussi .univers-detail-content : c'est le selecteur qu'attend
   univers-search.js pour sa pagination infinie (racine de l'IntersectionObserver).
   C'est aussi lui qui apporte le fond de carte, neutralise ici.

   La barre de la fenetre disparait au profit de celle de `main` : on reserve sa
   largeur en permanence pour que le contenu garde exactement la meme largeur.
   Sans ca, une page trop courte pour defiler (recherche sans resultat, par
   exemple) gagnerait les 10px de la barre de fenetre disparue et le contenu se
   decalerait. */
body.univers-locked main.univers-detail-content {
    background: none;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    scrollbar-color: rgba(83, 193, 245, 0.45) rgba(8, 10, 16, 0.4);
}

/* logs.php : `main` n'a pas .page-main, il garde donc le centrage vertical de la
   regle generale (align-items: center). Une fois `main` borne par
   body.univers-locked, ce centrage ferait passer le haut du contenu au-dessus de
   la zone visible des que ca deborde. Les marges automatiques donnent le meme
   resultat que le centrage quand il reste de la place, et ne decalent rien quand
   ca deborde : le contenu ne bouge donc dans aucun des deux cas. */
body.univers-locked main.logs-page > * {
    margin-top: auto;
    margin-bottom: auto;
}

body.univers-locked main.univers-detail-content::-webkit-scrollbar-track {
    background: rgba(8, 10, 16, 0.4);
    border-radius: 999px;
}

.saga-block + .saga-block {
    margin-top: 28px;
}

/* Les vignettes d'une meme saga/d'un meme bloc sont centrees : une ligne
   complete occupe toute la largeur (flex-grow), mais une ligne partielle (ex.
   7 medias avec 6 par ligne) est ramenee au centre au lieu de rester collee a
   gauche. */
.saga-block .film-grid {
    --cols: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    gap: 14px;
    width: 100%;
}

.saga-block .film-card {
    flex: 1 1 320px;
    min-width: 320px;
    max-width: calc((100% - ((var(--cols) - 1) * 14px)) / var(--cols));
}

@media (min-width: 990px) {
    .saga-block .film-grid {
        --cols: 4;
    }
}

@media (min-width: 1330px) {
    .saga-block .film-grid {
        --cols: 5;
    }
}

@media (min-width: 1665px) {
    .saga-block .film-grid {
        --cols: 6;
    }
}

@media (min-width: 2000px) {
    .saga-block .film-grid {
        --cols: 7;
    }
}

.saga-block .saga-sub-title {
    text-align: center;
}

.saga-sep {
    border: none;
    height: 2px;
    margin: 30px 0;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, rgba(83, 193, 245, 0.85), transparent);
    box-shadow: 0 0 10px rgba(83, 193, 245, 0.55);
}

.saga-group-label {
    color: #ffffff;
}

.saga-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 1.05rem;
    color: var(--accent);
}

/* Titre de groupe encadre par deux filets (sagas et « Autres medias » de la page
   univers) : ecarts internes de 10px, comme les titres de categorie de « Media de
   mon age », puis 14px avant les vignettes. */
.saga-title-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.saga-title-block > .saga-sep {
    margin: 0;
}

.saga-title-block > .saga-group-title {
    margin-bottom: 0;
    justify-content: center;
}

/* Page univers : le filet du haut appartient au bloc de titre, la respiration
   entre deux sagas se ramene donc a 10px, comme l'ecart autour du filet. */
.univers-page .saga-block + .saga-block {
    margin-top: 10px;
}

#genre-section .saga-block .film-grid--pending {
    min-height: 96px;
    align-items: center;
    justify-content: center;
    border: 1px dashed rgba(83, 193, 245, 0.28);
    border-radius: 12px;
}

#genre-section .saga-block .film-grid--pending::before {
    content: 'Plus de médias au défilement…';
    color: rgba(139, 163, 191, 0.65);
    font-size: 0.9rem;
}

.saga-sub-title {
    margin: 18px 0 12px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.media-age-section-title {
    grid-column: 1 / -1;
    margin: 10px 0 4px;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--accent);
}

.media-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.table-wrap {
    overflow-x: auto;
}

.media-table th,
.media-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.media-table th {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.media-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
}

.media-table td:first-child {
    color: rgba(255, 255, 255, 0.55);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
    header {
        padding: 10px 16px;
    }

    .main-nav ul {
        padding: 0 8px;
        gap: 0 1px;
    }

    .main-nav a {
        padding: 8px 9px;
        font-size: 0.78rem;
    }

    .logout-btn {
        padding: 5px 10px;
        font-size: 0.78rem;
    }

    .signal-btn {
        padding: 5px 10px;
        font-size: 0.78rem;
    }

    main {
        padding: 20px 14px;
    }

    .card,
    .dashboard-box {
        padding: 26px 20px;
    }

    .films-page-head,
    .films-body,
    .list-page-head,
    .list-body {
        padding: 0;
    }

    .user-chip {
        display: none;
    }

    .ip-chip {
        font-size: 0.78rem;
        padding: 5px 10px;
    }
}

.modal {
    position: fixed;
    left: 0;
    right: 0;
    top: 40px;
    margin: 0 auto;
    border: none;
    border-radius: 14px;
    padding: 0;
    max-width: 680px;
    width: 92%;
    max-height: 88vh;
    overflow-y: auto;
    background: #181b24;
    color: var(--text);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
}

#add-animation-modal {
    max-width: 860px;
}

#edit-animation-modal {
    max-width: 860px;
}

#add-film-modal {
    max-width: 860px;
}

#edit-film-modal {
    max-width: 860px;
}

#add-spectacle-modal {
    max-width: 860px;
}

#edit-spectacle-modal {
    max-width: 860px;
}

#add-documentaire-modal {
    max-width: 860px;
}

#edit-documentaire-modal {
    max-width: 860px;
}

#add-serie-modal {
    max-width: 860px;
}

#edit-serie-modal {
    max-width: 860px;
}

#edit-documentaire-serie-modal {
    max-width: 860px;
}

#add-jeu-modal {
    max-width: 860px;
}

#edit-jeu-modal {
    max-width: 860px;
}

.modal::backdrop {
    background: rgba(8, 10, 16, 0.72);
}

.modal-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: #1d212c;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px 14px 0 0;
}

.modal-head h2 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--accent);
}

.modal-close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 0;
    border-radius: 50%;
    border: none;
    color: var(--text);
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
}

.modal-close::before,
.modal-close::after,
.episode-form-remove::before,
.episode-form-remove::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
}

.modal-close::before,
.episode-form-remove::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.modal-close::after,
.episode-form-remove::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.modal-close:hover::before,
.modal-close:hover::after,
.tag-x:hover::before,
.tag-x:hover::after,
.episode-form-remove:hover::before,
.episode-form-remove:hover::after {
    filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 8px currentColor);
}

.modal-close,
.episode-form-remove,
.tag-x {
    background: transparent;
    color: #ff1f4b;
}

.modal-close:hover,
.tag-x:hover {
    color: #ff5c7d;
}

.episode-form-remove:hover {
    color: #ff8a92;
}

.modal-body {
    padding: 18px;
}

.modal-footer {
    padding: 12px 18px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Modale de signalement (en-tete partage) : plus etroite que les modales
   d'edition, elle ne porte qu'un type et un message. */
.signal-modal {
    max-width: 520px;
}

.signal-status {
    margin-top: 12px;
    font-size: 0.86rem;
    color: #58d68d;
}

.signal-status.is-error {
    color: var(--danger-text);
}

.birthday-modal {
    max-width: 460px;
    text-align: center;
}

.birthday-modal .modal-footer {
    justify-content: center;
}

.birthday-modal-head h2 {
    font-size: 1.2rem;
}

.birthday-modal-body {
    padding: 26px 18px;
    font-size: 1rem;
}

.birthday-modal-body p {
    margin: 10px 0;
    line-height: 1.6;
}

.btn-neon-green {
    color: #4ade80;
    text-shadow: 0 0 6px rgba(74, 222, 128, 0.9),
                 0 0 16px rgba(74, 222, 128, 0.5);
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    animation: neon-flicker 7s ease-in-out infinite;
}

.btn-neon-green:hover {
    color: #ffffff;
    border-color: rgba(74, 222, 128, 0.8);
    background: rgba(22, 163, 74, 0.25);
    box-shadow: 0 0 14px rgba(74, 222, 128, 0.6),
                inset 0 0 8px rgba(74, 222, 128, 0.35);
}

.btn-episode-add {
    width: 100%;
    margin-top: 6px;
    padding: 13px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #ffffff;
    background: linear-gradient(135deg, rgba(47, 111, 219, 0.22), rgba(83, 193, 245, 0.22));
    border: 1px solid rgba(83, 193, 245, 0.55);
    border-radius: 999px;
    cursor: pointer;
    text-shadow: 0 0 6px rgba(83, 193, 245, 0.85);
    box-shadow: inset 0 0 12px rgba(83, 193, 245, 0.25), 0 0 12px rgba(83, 193, 245, 0.35);
    transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-episode-add:hover {
    background: linear-gradient(135deg, rgba(47, 111, 219, 0.55), rgba(83, 193, 245, 0.55));
    border-color: rgba(83, 193, 245, 0.95);
    box-shadow: inset 0 0 16px rgba(83, 193, 245, 0.45), 0 0 24px rgba(83, 193, 245, 0.6);
    transform: translateY(-2px);
}

.btn-episode-add:active {
    background: linear-gradient(135deg, rgba(47, 111, 219, 0.35), rgba(83, 193, 245, 0.35));
    box-shadow: inset 0 0 18px rgba(83, 193, 245, 0.5), 0 0 12px rgba(83, 193, 245, 0.4);
    transform: translateY(1px) scale(0.98);
}

.btn-episode-add.is-disabled {
    opacity: 0.4;
    filter: grayscale(1);
    cursor: not-allowed;
    text-shadow: none;
    box-shadow: none;
    pointer-events: none;
}

.tag-create-dup-message {
    margin: 0 0 10px;
}

.tag-create-dup-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0 6px;
}

.tag-create-dup-photo {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.tag-create-dup-photo img {
    width: 56px;
    height: 56px;
    object-fit: cover;
}

.tag-create-dup-photo .film-person-initial {
    font-size: 1.4rem;
    cursor: default;
}

.tag-create-dup-name {
    font-weight: 600;
}

.tag-create-dup-actions {
    justify-content: flex-end;
}

.tag-create-error {
    margin: 10px 0 0;
    color: #ff5c7d;
    font-size: 0.9rem;
}

.tag-create-dup-actions .btn-episode-add {
    width: auto;
    margin-top: 0;
    padding: 10px 16px;
}

.tag-create-dup-error {
    margin-top: 0;
}

.add-film-bar {
    margin: 0;
}

.add-film-bar .film-edit-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    margin: 0;
    cursor: pointer;
    font-family: inherit;
    background: transparent;
}

.add-film-bar .film-edit-btn:hover {
    color: #ffc46b;
    border-color: rgba(255, 160, 64, 0.7);
    background: transparent;
    box-shadow: 0 0 14px rgba(255, 160, 64, 0.55),
                inset 0 0 8px rgba(255, 160, 64, 0.35);
    text-shadow: 0 0 6px rgba(255, 160, 64, 0.9),
                 0 0 16px rgba(255, 160, 64, 0.5);
}

/* Barre a plusieurs boutons : le position:absolute ci-dessus est prevu pour un
   seul bouton et les superpose. On ancre donc la barre entiere au meme endroit
   et on aligne ses boutons sur une rangee. */
.add-film-bar-multiple {
    position: absolute;
    top: 16px;
    right: 16px;
    max-width: calc(100% - 32px);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.add-film-bar-multiple .film-edit-btn {
    position: static;
}

/* Sur mobile et sur ecran etroit, les deux boutons n'atteignent pas le coin
   superieur droit de la boite sans recouvrir le titre centre : on les remet
   alors dans le flux, sous le titre et avant la recherche. */
@media (max-width: 1100px) {
    .add-film-bar-multiple {
        position: static;
        margin-bottom: 16px;
    }
}

/* --- Logiciels --- */

.logiciel-tags {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.film-detail-center .logiciel-tags {
    margin-top: 10px;
}

/* --- Scrollbar globale --- */

html {
    scrollbar-width: thin;
    scrollbar-color: rgba(83, 193, 245, 0.45) rgba(8, 10, 16, 0.4);
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: rgba(8, 10, 16, 0.4);
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(83, 193, 245, 0.55), rgba(47, 111, 219, 0.55));
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(83, 193, 245, 0.75);
}

/* --- Artiste --- */

/* Photo, selecteur d'artiste et badges de roles sont places au-dessus de la
   grille des medias, directement sur le fond de page. L'en-tete occupe donc
   toute la largeur de la ligne de .page-main (comme .univers-topbar et
   .artiste-media), et centre son contenu. */
.artiste-head {
    flex: 0 0 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 28px;
}

/* Les medias de l'artiste ne sont plus dans une carte (.dashboard-box) : ils
   reposent directement sur le fond et occupent la ligne entiere de .page-main,
   comme .artiste-head et le reste des listes du site. */
.artiste-media {
    flex: 0 0 100%;
    width: 100%;
}

.artiste-photo-wrap {
    flex-shrink: 0;
}

.artiste-info {
    text-align: center;
    min-width: 0;
    max-width: 100%;
}

/* Le selecteur d'artiste (search-picker) est centre sous la photo. Il reste
   borne par la largeur de .artiste-info : sans cela, la largeur intrinseque du
   champ elargit la page et fait apparaitre une barre de defilement horizontale. */
.artiste-info .genre-switcher {
    display: flex;
    justify-content: center;
    max-width: 100%;
}

.artiste-photo {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid rgba(83, 193, 245, 0.4);
    background: rgba(83, 193, 245, 0.12);
}

.artiste-photo-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 3.5rem;
    color: var(--accent);
}

.artiste-info h1 {
    margin: 0 0 12px;
}

.artiste-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.artiste-stats .role-link {
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.artiste-stats .role-link:hover {
    border-color: rgba(83, 193, 245, 0.7);
}

.artiste-stats .role-link.role-link-active {
    color: #4ade80;
    background: rgba(22, 163, 74, 0.3);
    border-color: rgba(74, 222, 128, 0.6);
    box-shadow: 0 0 6px rgba(74, 222, 128, 0.6),
                0 0 16px rgba(74, 222, 128, 0.4),
                inset 0 0 6px rgba(74, 222, 128, 0.35);
    text-shadow: 0 0 6px rgba(74, 222, 128, 0.9);
}

.artiste-stats .role-link.role-link-active:hover {
    background: rgba(22, 163, 74, 0.45);
    border-color: rgba(74, 222, 128, 0.85);
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.85),
                0 0 24px rgba(74, 222, 128, 0.55),
                inset 0 0 8px rgba(74, 222, 128, 0.5);
    text-shadow: 0 0 10px rgba(74, 222, 128, 1),
                 0 0 20px rgba(74, 222, 128, 0.7);
}

.artiste-stats .role-link.role-link-inactive {
    color: #f87171;
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(248, 113, 113, 0.6);
    box-shadow: 0 0 6px rgba(248, 113, 113, 0.6),
                0 0 16px rgba(248, 113, 113, 0.4),
                inset 0 0 6px rgba(248, 113, 113, 0.35);
    text-shadow: 0 0 6px rgba(248, 113, 113, 0.9);
}

.artiste-stats .role-link.role-link-inactive:hover {
    background: rgba(239, 68, 68, 0.45);
    border-color: rgba(248, 113, 113, 0.85);
    box-shadow: 0 0 10px rgba(248, 113, 113, 0.85),
                0 0 24px rgba(248, 113, 113, 0.55),
                inset 0 0 8px rgba(248, 113, 113, 0.5);
    text-shadow: 0 0 10px rgba(248, 113, 113, 1),
                 0 0 20px rgba(248, 113, 113, 0.7);
}

.film-person-link {
    text-decoration: none;
    border-radius: 50%;
}

.film-person-link:hover {
    filter: brightness(1.1);
}

.film-person-link .film-person-avatar:hover,
.film-person-link:hover .film-person-avatar {
    border-color: rgba(83, 193, 245, 0.9);
}

.film-role-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 8px 0 2px;
}

.film-role-director {
    color: #f7b155;
    background: rgba(245, 166, 35, 0.14);
    border-color: rgba(247, 177, 85, 0.45);
}

.film-role-actor {
    color: #58d68d;
    background: rgba(46, 204, 113, 0.14);
    border-color: rgba(88, 214, 141, 0.45);
}

@media (max-width: 560px) {
    .artiste-head {
        flex-direction: column;
        text-align: center;
    }

    .artiste-stats {
        justify-content: center;
    }
}

/* Selecteur a recherche (pays.php, artiste.php) : champ de saisie + propositions
   cliquables, a la place du <select> natif. La liste peut etre rendue par le PHP
   dans la page (seulement les pays qui ont au moins un media) ou venir d'un
   endpoint JSON (les 6983 artistes sont trop lourds a embarquer) ; search-picker.js
   filtre, positionne et pilote le tout au clavier. */
.search-picker {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}

.search-picker-input {
    width: 340px;
    max-width: 100%;
    padding: 8px 22px;
    font-size: 1.3rem;
    font-family: inherit;
    color: var(--text);
    background: #0a1628;
    border: 1px solid rgba(83, 193, 245, 0.6);
    border-radius: 999px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search-picker-input::placeholder {
    color: rgba(139, 163, 191, 0.85);
}

.search-picker-input:hover {
    border-color: var(--accent);
}

.search-picker-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(83, 193, 245, 0.18);
}

/* Visuel du libelle courant (drapeau du pays, photo de l'artiste) pose dans la
   pastille : la pastille s'elargit de sa place pour que le texte garde
   exactement la meme largeur utile (le visuel est en position absolue, il ne
   pousse donc pas le champ). */
.search-picker--lead .search-picker-input {
    width: 366px;
    padding-left: 48px;
}

/* fixed : le champ est dans .univers-detail-content (overflow-y: auto), une liste
   en absolute y serait rognee. Le JS calcule la position et la met a jour au scroll. */
.search-picker-list {
    position: fixed;
    z-index: 60;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
    background: #0a1628;
    border: 1px solid rgba(83, 193, 245, 0.45);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
    scrollbar-width: thin;
    scrollbar-color: rgba(83, 193, 245, 0.45) transparent;
}

.search-picker-list[hidden] {
    display: none;
}

.search-picker-list::-webkit-scrollbar {
    width: 8px;
}

.search-picker-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 999px;
}

.search-picker-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(83, 193, 245, 0.55), rgba(47, 111, 219, 0.55));
    border-radius: 999px;
}

.search-picker-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(83, 193, 245, 0.75), rgba(47, 111, 219, 0.75));
}

.search-picker-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    font-size: 0.95rem;
    color: var(--text);
    border-radius: 8px;
    cursor: pointer;
}

/* le JS masque les propositions filtrees par l'attribut hidden : sans cette
   regle, le display: flex ci-dessus l'emporterait sur le [hidden] du navigateur */
.search-picker-option[hidden] {
    display: none;
}

/* entree courante : meme accent que les puces actives */
.search-picker-option[aria-selected="true"] .search-picker-name {
    color: var(--accent);
    font-weight: 700;
}

/* survol souris et proposition active au clavier partagent le meme surlignage,
   comme .header-search-item : une seule ligne est mise en avant a la fois */
.search-picker-option:hover,
.search-picker-option.is-active {
    color: #ffffff;
    background: rgba(83, 193, 245, 0.18);
    box-shadow: inset 0 0 0 1px rgba(83, 193, 245, 0.45);
}

/* Drapeau de pays et photo d'artiste : meme largeur et meme liseré partout
   (ligne de liste comme visuel du champ). */
.search-picker-flag,
.search-picker-avatar {
    flex: 0 0 auto;
    width: 24px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
}

/* hauteur fixe : sans elle les <img> ne reservent aucune place, les lignes
   grandissent au chargement et la ligne active quitte le champ de vision */
.search-picker-flag {
    height: 16px;
    object-fit: contain;
    border-radius: 3px;
}

.search-picker-avatar {
    height: 24px;
    object-fit: cover;
    border-radius: 50%;
}

/* artiste sans photo : son initiale, comme la tete de artiste.php */
.search-picker-avatar--initial {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent);
}

/* Visuel du champ : pose dans la pastille comme le faisait l'ancien bouton des
   pays. Il laisse passer le clic pour que le champ prenne le focus meme si on
   clique dessus. */
.search-picker > .search-picker-flag,
.search-picker > .search-picker-avatar {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.search-picker-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-picker-empty {
    padding: 8px 10px;
    font-size: 0.95rem;
    color: rgba(139, 163, 191, 0.85);
}

.search-picker-empty[hidden] {
    display: none;
}

/* fallback sans JS : le champ reste un champ texte, l'autocompletion ne
   s'execute pas sans JS, il faut donc un bouton de soumission */
.pays-switcher-go,
.annee-switcher-go,
.genre-switcher-go {
    padding: 8px 18px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--text);
    background: #0a1628;
    border: 1px solid rgba(83, 193, 245, 0.6);
    border-radius: 999px;
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Page de resultats de la recherche globale (recherche.php).
   Meme esprit que le menu du header : lignes compactes (affiche + titre +
   sous-titre) regroupees par categorie. La tete reprend .list-page-head pour
   rester alignee sur les autres listes du site.
--------------------------------------------------------------------------- */

/* La page n'a pas de hauteur propre : avec l'align-content par defaut
   (stretch), les deux lignes de .page-main se partagent la hauteur restante et
   la liste se retrouve poussee vers le bas, comme centree verticalement. On
   colle donc les lignes en haut et on laisse le vide en bas. */
.search-page {
    align-content: flex-start;
}

.search-page-head {
    align-items: baseline;
}

.search-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
}

.search-page-count {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
}

.search-page-body {
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding-top: 10px;
}

/* Filets encadrant le titre de categorie : un au-dessus, un au-dessous. Le
   groupe est une colonne a ecarts de 10px (comme les titres de « Media de mon
   age »), donc les deux filets sont a 10px du titre ; l'ecart entre deux
   categories est porte par le gap du parent. */
.search-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.search-group > .search-group-sep {
    margin: 0;
}

.search-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.search-group-head h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--accent);
}

/* Meme pastille que le bouton « ← Retour aux univers » (fond #0a1628, bordure
   accent, halo neon) : le lien de categorie est un bouton, pas un lien texte. */
.search-group-all {
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.88rem;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
    background: #0a1628;
    border: 1px solid rgba(83, 193, 245, 0.35);
    border-radius: 999px;
    text-shadow: 0 0 6px rgba(83, 193, 245, 0.8),
                 0 0 14px rgba(83, 193, 245, 0.55),
                 0 0 28px rgba(83, 193, 245, 0.35);
}

.search-group-all:hover {
    color: #ffffff;
    text-decoration: none;
}

/* Cartes deux fois plus grandes que la version compacte d'origine (colonne de
   520px, affiche 42x60, titre 0.95rem) : la colonne et les ecarts sont doubles
   et l'affiche fait 30 % de plus que 42x60 (109x156). Les textes font 30 % de
   plus que la taille d'origine : titre 1.235rem (0.95 x 1.3), sous-titre
   1.04rem (0.8 x 1.3). */
.search-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(520px, 1fr));
    gap: 16px;
}

.search-result {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    color: var(--text);
    text-decoration: none;
    /* Sans cela, la largeur mini du titre (nowrap) impose sa taille a la piste
       de la grille et la carte deborde de l'ecran sur les petits ecrans. */
    min-width: 0;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.search-result:hover {
    color: #ffffff;
    background: rgba(83, 193, 245, 0.12);
    border-color: rgba(83, 193, 245, 0.45);
}

.search-result-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 109px;
    height: 156px;
    overflow: hidden;
    font-weight: 700;
    color: var(--accent);
    background: rgba(83, 193, 245, 0.12);
    border: 1px solid rgba(83, 193, 245, 0.3);
    border-radius: 12px;
}

.search-result-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-result-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.search-result-title {
    font-size: 1.235rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-sub {
    font-size: 1.04rem;
    color: rgba(255, 255, 255, 0.55);
}

/* Le champ du header se resserre avant le reste de la barre : il doit
   cohabiter avec le pseudo et le bouton de deconnexion sur petit ecran. */
@media (max-width: 1100px) {
    .header-search {
        max-width: 220px;
    }
}

@media (max-width: 820px) {
    .header-search {
        max-width: 170px;
    }

    .search-results {
        grid-template-columns: 1fr;
    }
}

/* Sous ~700px, le champ est trop a droite pour qu'un menu ancre sur sa droite
   tienne dans la fenetre : il deborderait par la gauche. On le detache alors de
   la boite du champ (position fixe sur la largeur de la fenetre). « top: auto »
   le laisse a sa position naturelle, juste sous la barre, qui est collante. */
@media (max-width: 700px) {
    .header-search-panel {
        position: fixed;
        top: auto;
        bottom: auto;
        left: 12px;
        right: 12px;
        width: auto;
        margin-top: 23px;
        max-height: min(60vh, 460px);
    }
}

@media (max-width: 560px) {
    .header-search {
        max-width: 130px;
    }

    .header-search-input {
        font-size: 0.82rem;
    }
}