/* ===== FONT ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ===== RESET ===== */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', sans-serif;
    background:
        linear-gradient(rgba(255, 35, 55, 0.13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 35, 55, 0.13) 1px, transparent 1px),
        radial-gradient(circle at 50% 20%, rgba(255, 35, 55, 0.08), transparent 45%),
        #0a0a0f;
    background-size: 46px 46px, 46px 46px, 100% 100%, auto;
    background-position: 0 0, 0 0, center, center;
    background-attachment: fixed;
    color: #c8d0d8;
    min-height: 100vh;
    overflow-x: hidden;
    animation: redGridMove 12s linear infinite;
}

@keyframes redGridMove {
    from {
        background-position: 0 0, 0 0, center, center;
    }
    to {
        background-position: 46px 46px, 46px 46px, center, center;
    }
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 40, 60, 0.035) 50%,
            transparent 100%
        );
    animation: redGlowSweep 7s ease-in-out infinite;
}

@keyframes redGlowSweep {
    0%, 100% { opacity: 0.25; transform: translateX(-8%); }
    50% { opacity: 1; transform: translateX(8%); }
}
img { animation: imgFadeIn 0.35s ease; }
@keyframes imgFadeIn { from { opacity:0; transform:scale(0.98); } to { opacity:1; transform:scale(1); } }
.loading-pulse { animation: loadingPulse 1.3s ease-in-out infinite; }
@keyframes loadingPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ===== LE SITE ===== */
/* Colonne pleine hauteur : en-tete, contenu extensible, pied de page.
   Sans cela, sur une page courte (Collections, A propos, Ma liste), le pied
   s'arretait la ou le contenu s'arretait et le fond du body occupait tout le
   reste de l'ecran — un grand vide sombre sous le pied de page, sur presque
   toutes les pages. Le contenu prend desormais la place restante et pousse
   le pied en bas de la fenetre. */
#site-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    opacity: 1;
}
/* .main-wrap est un bloc ordinaire : l'etirer ne deforme aucun de ses enfants,
   la barre laterale reste en align-self: flex-start. */
.main-wrap { flex: 1 0 auto; }

/* ===== STYLES DU SITE ===== */
a { color: #c8d0d8; text-decoration: none; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #0a0a0f; }
::-webkit-scrollbar-thumb { background: #2a2a36; border-radius: 4px; }

header {
    background: #0a0a0a;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 14px 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    position: sticky;
    top: 0;
    z-index: 100;
}
.site-logo {
    height: 36px;
    width: 36px;
    cursor: pointer;
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--theme-accent, #ff3b4e) 25%, transparent));
    transition: transform 0.2s ease;
    display: none;
}
.site-logo:hover { transform: scale(1.05); }
.site-logo-text {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #f4f6f8;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
}
/* Les deux "o" du mot-logo portent l'accent : le nom reste lisible en blanc,
   la couleur de marque ressort sans écraser le reste de l'en-tête. */
.logo-accent { color: var(--theme-accent, #ff3b4e); }

.header-top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sidebar-toggle-arrow { display: none; }
.nav-toggle {
    display: none;
    background: transparent;
    border: none;
    color: #d0d6dc;
    font-size: 1.3rem;
    line-height: 1;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.nav-toggle:active { background: rgba(255,255,255,0.08); }

nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 26px;
    align-items: center;
}
nav a {
    font-family: 'Inter', sans-serif;
    color: #a8b0b8;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 0;
    border-bottom: 1px solid transparent;
    transition: all 0.25s ease;
}
nav a:hover { color: #ffffff; }
nav a.active-link { color: #ffffff; font-weight: 700; }

.header-actions { display: flex; align-items: center; gap: 14px; }
.search-toggle-btn {
    background: transparent;
    border: none;
    color: #d0d6dc;
    font-size: 1.1rem;
    cursor: pointer;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
}
.search-toggle-btn:hover { background: rgba(255,255,255,0.06); color: var(--theme-accent, #ff3b4e); }
.btn-header-login {
    color: #d0d6dc !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.btn-header-login:hover { color: #ffffff !important; }
.btn-header-register {
    background: var(--theme-accent, #ff3b4e);
    color: #ffffff !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: 9px 20px;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s ease, transform 0.2s ease;
}
.btn-header-register:hover { background: #0fb89e; transform: translateY(-1px); }

.search-header { display: none; gap: 4px; width: 100%; max-width: 100%; margin: 10px 0 0; background: #0d0d16; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 30px; padding: 2px 4px 2px 16px; position: relative; 
    order: 10;

}
.search-header.search-open { display: flex; }
.search-suggestions {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #0d0d16;
    border: 1px solid #1a1a26;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.55);
    max-height: 400px;
    overflow-y: auto;
    z-index: 200;
}
.search-suggestions.open { display: block; }
.search-suggestion-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.search-suggestion-item:hover { background: color-mix(in srgb, var(--theme-accent, #ff3b4e) 8%, transparent); }
.search-suggestion-item img, .search-suggestion-item .ssi-placeholder {
    width: 34px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    background: #08080c;
    flex-shrink: 0;
}
.search-suggestion-item .ssi-info { min-width: 0; }
.search-suggestion-item .ssi-titre {
    font-size: 0.75rem; color: #c8d0d8;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-suggestion-item .ssi-meta { font-size: 0.6rem; color: #5a6a7a; margin-top: 1px; }
.search-suggestions .ssi-voir-tout {
    padding: 10px 12px;
    font-size: 0.65rem;
    color: var(--theme-accent, #ff3b4e);
    text-align: center;
    cursor: pointer;
    border-top: 1px solid #14141e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.search-suggestions .ssi-voir-tout:hover { background: color-mix(in srgb, var(--theme-accent, #ff3b4e) 6%, transparent); }
.search-suggestions p { padding: 12px; font-size: 0.7rem; }
.search-header input {
    flex: 1;
    padding: 6px 0;
    background: transparent;
    border: none;
    color: #c8d0d8;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    outline: none;
}
.search-header input::placeholder { color: #3a4a5a; }
.search-header button {
    padding: 6px 16px;
    background: var(--theme-accent, #ff3b4e);
    border: none;
    border-radius: 30px;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.65rem;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s;
}
.search-header button:hover {
    background: #0fb89e;
    box-shadow: 0 0 30px color-mix(in srgb, var(--theme-accent, #ff3b4e) 20%, transparent);
}

#userBadge {
    /* inline-flex et non inline : la pastille porte une puce de couleur, et il faut
       pouvoir la centrer verticalement avec le texte. Le script pose la meme valeur
       quand il affiche le badge. */
    display: none;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 10px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
    color: #c8d0d8;
    font-family: 'Inter', sans-serif;
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    line-height: 1.6;
    white-space: nowrap;
}

/* Puce de couleur : elle porte l'information d'un coup d'oeil, ce qui permet au
   texte de rester discret au lieu d'etre colore en entier — c'est ce qui donnait
   cet aspect delave. Le halo tres doux la detache du fond sombre. */
#userBadge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
    flex-shrink: 0;
}

#userBadge.badge-admin {
    color: #ff7a6a;
    border-color: rgba(255, 122, 106, 0.42);
    background: linear-gradient(180deg, rgba(255, 122, 106, 0.18), rgba(255, 122, 106, 0.07));
}
#userBadge.badge-mod {
    color: #6ab8ff;
    border-color: rgba(106, 184, 255, 0.42);
    background: linear-gradient(180deg, rgba(106, 184, 255, 0.18), rgba(106, 184, 255, 0.07));
}
#userBadge.badge-user {
    color: #9fb0c0;
    border-color: rgba(159, 176, 192, 0.3);
    background: linear-gradient(180deg, rgba(159, 176, 192, 0.14), rgba(159, 176, 192, 0.05));
}
#userBadge.badge-premium {
    color: #f0c945;
    border-color: rgba(240, 201, 69, 0.42);
    background: linear-gradient(180deg, rgba(240, 201, 69, 0.18), rgba(240, 201, 69, 0.07));
}

/* Largeur de page.
   À 1440 px, sur un écran de 1900, le contenu laissait plus de 200 px vides de chaque
   côté alors que l'en-tête, lui, allait d'un bord à l'autre : le logo se retrouvait
   très à gauche et le contenu semblait poussé vers la droite. Les deux partagent
   désormais la même largeur et le même retrait, si bien que le logo, la barre de
   recherche et le contenu s'alignent quelle que soit la taille de l'écran.
   1800 px plutôt qu'aucune limite : au-delà, les lignes de texte deviennent trop
   longues pour être lues confortablement. */
/* width:100% etait pose par la regle :has() juste dessous, qui enumere les
   pages une par une. Toute page absente de cette liste — Films, Ma liste, les
   pages legales... — voyait donc .main-wrap se dimensionner sur son contenu.
   Sur un ecran de 320 px, la page Films faisait 874 px et etait coupee : la
   recherche, le tri et les filtres devenaient inatteignables. On le pose ici
   pour toutes les pages ; l enumeration ne peut plus rien oublier. */
.main-wrap { width: 100%; max-width: 1800px; margin: 16px auto; padding: 0 32px; }

#site-content:has(#page-home.active, #page-animes.active, #page-series.active, #page-collections.active, #page-demandes.active, #page-admin.active, #page-profil.active) > .main-wrap {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}
#page-home.active { align-items: stretch; }

.sidebar-wrap { display: flex; gap: 24px; }
.sidebar {
    flex: 0 0 190px;
    position: sticky;
    top: 100px;
    align-self: flex-start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    background: linear-gradient(180deg, #0d0d14, #0a0a10);
    border: 1px solid #15151e;
    border-radius: 14px;
    padding: 18px 14px;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: #1a1a26; border-radius: 4px; }
.sidebar h3 {
    color: #8a9aaa;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 20px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #14141e;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sidebar h3:first-of-type { margin-top: 0; }
.sidebar ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.sidebar ul li {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    color: #8a9aaa;
    transition: background 0.18s ease, color 0.18s ease;
}
.sidebar ul li:hover {
    color: #e8eef4;
    background: color-mix(in srgb, var(--theme-accent, #ff3b4e) 6%, transparent);
}
.sidebar ul li.active {
    color: var(--theme-accent, #ff3b4e);
    background: color-mix(in srgb, var(--theme-accent, #ff3b4e) 10%, transparent);
    font-weight: 700;
}

.content { flex: 1; min-width: 0; }

.hero-banner {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 28px;
    height: 460px;
    background-size: cover;
    background-position: top center;
    background-color: #111114;
    background-repeat: no-repeat;
}
.hero-banner-gradient {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(8,8,9,0.97) 0%, rgba(8,8,9,0.82) 32%, rgba(8,8,9,0.25) 62%, rgba(8,8,9,0.05) 100%),
        linear-gradient(0deg, rgba(8,8,9,0.9) 0%, rgba(8,8,9,0) 45%);
}
.hero-banner-content {
    position: relative;
    z-index: 1;
    max-width: 580px;
    height: 100%;
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}
.hero-banner-content h1 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.08;
}
.hero-banner-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.85rem;
    color: #c8d0d8;
}
.hero-rating-ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid #e8b800;
    color: #e8b800;
    font-weight: 700;
    font-size: 0.78rem;
    flex-shrink: 0;
}
.hero-banner-content p {
    color: #c0c8d0;
    font-size: 0.92rem;
    line-height: 1.6;
    max-width: 520px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.btn-hero-watch {
    align-self: flex-start;
    background: #14e8c8;
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 13px 30px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    transition: all 0.25s ease;
}
.btn-hero-watch:hover { background: #0fb89e; transform: translateY(-2px); }
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(20,20,20,0.55);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.hero-arrow:hover { background: rgba(20,232,200,0.75); }
.hero-arrow-left { right: 18px; top: calc(50% - 46px); transform: none; }
.hero-arrow-right { right: 18px; top: calc(50% + 6px); transform: none; }
.hero-banner-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
}
.hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    cursor: pointer;
    transition: all 0.25s ease;
}
.hero-dot.active { background: #14e8c8; width: 24px; border-radius: 4px; }

/* ===== TUILES CATÉGORIES ===== */
.category-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px,1fr));
    gap: 16px;
    margin-bottom: 32px;
}
.category-tile {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    height: 110px;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    background-color: #14141a;
    border: 1px solid #1c1c26;
    transition: transform 0.25s ease, border-color 0.25s ease;
}
.category-tile:hover { transform: translateY(-3px); border-color: rgba(20,232,200,0.3); }
.category-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(6,6,8,0.92) 10%, rgba(6,6,8,0.35) 70%);
}
.category-tile-body {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 12px 14px;
}
.category-tile-body h4 {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
}
.category-tile-body span {
    color: #b8c0c8;
    font-size: 0.68rem;
    margin-top: 1px;
}

.section-title {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:24px 0 12px;
    border-bottom:1px solid #12121c;
    padding-bottom:4px;
}
.section-title h2 {
    font-size:0.9rem;
    font-weight:600;
    color:#8a9aaa;
    text-transform:uppercase;
    letter-spacing:1.5px;
}
.section-title a {
    font-size:0.6rem;
    color:var(--theme-accent, #ff3b4e);
    cursor:pointer;
    opacity:0.6;
    transition:opacity 0.2s;
    text-transform:uppercase;
    letter-spacing:0.5px;
}
.section-title a:hover { opacity:1; }

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

.stream-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 16px;
}
.stream-toolbar label {
    font-size: 0.65rem;
    color: #6a7a8a;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.stream-toolbar select {
    background: #0d0d16;
    color: #c8d0d8;
    border: 1px solid #1a1a26;
    border-radius: 8px;
    padding: 6px 12px;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    cursor: pointer;
    outline: none;
}
.stream-toolbar select:focus { border-color: var(--theme-accent, #ff3b4e); }

.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 28px;
}
.pagination-bar span {
    font-size: 0.7rem;
    color: #6a7a8a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pagination-bar button {
    background: #0d0d16;
    color: #c8d0d8;
    border: 1px solid #1a1a26;
    border-radius: 30px;
    padding: 8px 20px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.pagination-bar button:hover:not(:disabled) { border-color: color-mix(in srgb, var(--theme-accent, #ff3b4e) 30%, transparent); color: var(--theme-accent, #ff3b4e); }
.pagination-bar button:disabled { opacity: 0.35; cursor: default; }

.card {
    background: #0d0d16;
    border-radius:10px;
    overflow:hidden;
    transition: all 0.3s ease;
    cursor:pointer;
    border:1px solid #14141e;
}
.card:hover {
    transform:translateY(-4px);
    box-shadow:0 8px 30px rgba(0,0,0,0.6), 0 0 0 1px color-mix(in srgb, var(--theme-accent, #ff3b4e) 8%, transparent);
    border-color: color-mix(in srgb, var(--theme-accent, #ff3b4e) 10%, transparent);
}
.card img { width:100%; height:200px; object-fit:cover; background:#08080c; }
.card iframe { width:100%; height:100px; border:none; background:#08080c; pointer-events:none; border-radius:8px 8px 0 0; }
.card-media { position: relative; }
.card-locked-placeholder {
    width:100%; height:200px; display:flex; align-items:center; justify-content:center;
    font-size:2.2rem; background:#08080c; cursor:pointer;
}
.premium-badge {
    position:absolute; top:8px; left:8px;
    background:rgba(232,184,0,0.15); color:#e8b800;
    border:1px solid rgba(232,184,0,0.3);
    font-size:0.55rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;
    padding:2px 10px; border-radius:20px;
}
.top-badge {
    position:absolute; top:8px; left:8px; right:8px;
    background:color-mix(in srgb, var(--theme-accent, #ff3b4e) 15%, transparent); color:var(--theme-accent, #ff3b4e);
    border:1px solid color-mix(in srgb, var(--theme-accent, #ff3b4e) 35%, transparent);
    font-size:0.55rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;
    padding:3px 10px; border-radius:20px;
    text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.unlocked-badge {
    position:absolute; top:8px; right:8px;
    background:rgba(46,204,113,0.18); color:#2ecc71;
    border:1px solid rgba(46,204,113,0.4);
    font-size:0.55rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;
    padding:2px 10px; border-radius:20px;
}
.quality-badge {
    position:absolute; bottom:8px; left:8px;
    font-size:0.55rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;
    padding:2px 10px; border-radius:20px;
    background:rgba(10,10,15,0.75); color:#8a9aaa; border:1px solid rgba(255,255,255,0.1);
}
.quality-badge.quality-cam {
    background:rgba(255,60,60,0.18); color:#ff6a5a; border:1px solid rgba(255,60,60,0.4);
    animation: pulseCam 1.6s ease-in-out infinite;
}
@keyframes pulseCam { 0%,100% { opacity:1; } 50% { opacity:0.6; } }
.cam-warning {
    display:flex; align-items:center; gap:8px;
    background:rgba(255,60,60,0.1); border:1px solid rgba(255,60,60,0.3);
    color:#ff8a7a; font-size:0.7rem; padding:10px 16px; border-radius:8px;
    margin:10px 0;
}
.lock-overlay {
    position:absolute; inset:0;
    background:rgba(5,5,8,0.55);
    display:flex; align-items:center; justify-content:center;
    font-size:1.8rem; color:#e8b800;
    pointer-events:none;
}
.card .info { padding:10px 12px 12px; }
.card .info h4 {
    font-size:0.8rem;
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    color:#c8d0d8;
}
.card .info .cat {
    font-size:0.55rem;
    color:#5a6a7a;
    margin-top:1px;
    display:inline-block;
    background:#11111c;
    padding:0 8px;
    border-radius:20px;
    border:1px solid #181824;
}
/* ================================================================
   BOUTONS D'ACTION SOUS UNE CARTE
   Des pastilles allongees de 3 px de haut : sur mobile, ou la carte ne
   fait que 132 px, quatre d'entre elles se serraient en bouillie et la
   cible de touche etait bien en dessous du minimum confortable. Ce sont
   desormais des ronds de taille fixe, avec une vraie surface tactile.
   ================================================================ */
.card .info .actions {
    margin-top: 9px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.card .info .actions button {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.card .info .actions button svg { width: 15px; height: 15px; }
.card .info .actions button:hover { transform: translateY(-1px); }
.card .info .actions button:active { transform: scale(0.94); }

.btn-play {
    background: var(--theme-accent, #ff3b4e);
    color: #ffffff;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--theme-accent, #ff3b4e) 35%, transparent);
}
.btn-play:hover { background: #ff5566; box-shadow: 0 6px 18px color-mix(in srgb, var(--theme-accent, #ff3b4e) 45%, transparent); }

/* Les trois autres partagent le meme fond discret : elles sont secondaires,
   seule la lecture doit attirer l'oeil. La couleur n'arrive qu'au survol. */
.btn-fav, .btn-edit, .btn-del {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
    color: #8b939b;
}
.btn-fav:hover { background: rgba(240, 201, 69, 0.16); border-color: rgba(240, 201, 69, 0.45); color: #f0c945; }
/* Deja dans la liste : l'icone est pleine, la pastille reste allumee. */
.btn-fav.actif { background: rgba(240, 201, 69, 0.16); border-color: rgba(240, 201, 69, 0.5); color: #f0c945; }
.btn-edit:hover { background: rgba(106, 184, 255, 0.16); border-color: rgba(106, 184, 255, 0.45); color: #6ab8ff; }
.btn-del:hover { background: color-mix(in srgb, var(--theme-accent, #ff3b4e) 16%, transparent); border-color: color-mix(in srgb, var(--theme-accent, #ff3b4e) 45%, transparent); color: #ff6a5a; }

@media (max-width: 620px) {
    /* 132 px de carte : deux ronds de 32 px et leur ecart tiennent largement,
       les boutons de gestion passent a la ligne plutot que de tout ecraser. */
    .card .info .actions { gap: 5px; margin-top: 7px; }
    .card .info .actions button { width: 34px; height: 34px; }
    .card .info .actions button svg { width: 15px; height: 15px; }
}

/* ===== COLLECTIONS ===== */
.collection-card {
    background: #0d0d16;
    border: 1px solid #14141e;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}
.collection-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.6);
    border-color: color-mix(in srgb, var(--theme-accent, #ff3b4e) 10%, transparent);
}
.collection-cover {
    position: relative;
    height: 120px;
    background: linear-gradient(135deg, #1a1a26, #0d0d16);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #2a3a4a;
}
.collection-info { padding: 10px 12px 12px; }
.collection-info h4 { font-size: 0.8rem; color: #c8d0d8; margin-bottom: 2px; }
.collection-info span { font-size: 0.7rem; color: #5a6a7a; }
.btn-retirer-collection { background:#2a1a0a; color:#e8b800; }

.page { display:none; animation:fadeUp 0.4s ease; }
.page:not(.active) { display:none !important; }
.page.active { display:block; }
.page:not(#page-home) .hero-banner,
.page:not(#page-home) .hero-banner-content,
.page:not(#page-home) .hero-banner-dots,
.page:not(#page-home) .hero-fleches,
.page:not(#page-home) .hero-banner-gradient,
.page:not(#page-home) .hero-banner-image {
    display: none !important;
}
@keyframes fadeUp {
    from { opacity:0; transform:translateY(12px); }
    to { opacity:1; transform:translateY(0); }
}

.login-container { display:flex; gap:30px; flex-wrap:wrap; margin-top:16px; justify-content:center; }
.login-box {
    background: #0d0d16;
    padding:28px 26px;
    border-radius:12px;
    flex:1;
    min-width:240px;
    max-width:380px;
    border:1px solid #15151e;
}
.login-box h3 { color:#e8eef4; font-size:0.9rem; margin-bottom:14px; font-weight:600; text-transform:uppercase; letter-spacing:1px; }
.login-box input {
    display:block;
    width:100%;
    padding:10px 14px;
    margin:6px 0;
    background:#0a0a12;
    border:1px solid #1a1a26;
    border-radius:8px;
    color:#c8d0d8;
    font-size:0.8rem;
    outline:none;
    font-family: 'Inter', sans-serif;
    transition: border 0.3s;
}
.login-box input:focus { border-color:var(--theme-accent, #ff3b4e); }

/* ===== CHAMP MOT DE PASSE AVEC BASCULE VISIBILITÉ ===== */
.password-field { position: relative; }
.password-field input {
    padding-right: 42px !important;
    margin: 6px 0 !important;
    width: 100%;
}
.password-toggle {
    position: absolute;
    top: 50%;
    right: 2px;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    color: #6a7a8a;
    transition: color 0.2s ease;
}
.password-toggle:hover { color: var(--theme-accent, #ff3b4e); }
.password-toggle svg { display: block; }
/* Chrome force un fond clair sur les champs autoremplis, en contradiction avec le thème sombre
   du site : on le neutralise avec le vieux hack du box-shadow inset (pas de propriété standard
   pour ça) et on force la couleur du texte à celle du site. */
.password-field input:-webkit-autofill,
.password-field input:-webkit-autofill:hover,
.password-field input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #0a0a12 inset !important;
    -webkit-text-fill-color: #c8d0d8 !important;
    caret-color: #c8d0d8;
    transition: background-color 9999s ease-in-out 0s;
}
.login-box button {
    width:100%;
    padding:11px;
    border:none;
    border-radius:8px;
    font-size:0.8rem;
    font-weight:700;
    cursor:pointer;
    transition: all 0.3s ease;
    margin-top:6px;
    font-family: 'Inter', sans-serif;
    text-transform:uppercase;
    letter-spacing:0.5px;
}
.btn-login { background:var(--theme-accent, #ff3b4e); color:#ffffff; }
.btn-login:hover { box-shadow:0 4px 20px color-mix(in srgb, var(--theme-accent, #ff3b4e) 20%, transparent); transform:translateY(-2px); }
.btn-register { background:#1a2a3a; color:#8a9aaa; }
.btn-register:hover { background:#1f2f4a; transform:translateY(-2px); }
#authMessage {
    margin-top:12px;
    padding:10px;
    border-radius:8px;
    background:#0a0a12;
    text-align:center;
    color:#c8d0d8;
    font-weight:500;
    font-size:0.75rem;
    border:1px solid rgba(255,255,255,0.05);
}

.admin-table-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.admin-table {
    width:100%;
    min-width:560px;
    border-collapse:collapse;
    margin-top:12px;
    background:#0a0a12;
    border-radius:10px;
    overflow:hidden;
    font-size:0.7rem;
}
.admin-table th {
    background:#0d0d16;
    color:#8a9aaa;
    padding:10px 14px;
    text-align:left;
    font-size:0.55rem;
    text-transform:uppercase;
    letter-spacing:1.2px;
}
.admin-table td { padding:8px 14px; border-bottom:1px solid #12121c; }
.admin-table select {
    background:#0a0a12;
    color:#c8d0d8;
    border:1px solid #1a1a26;
    border-radius:4px;
    padding:3px 8px;
    font-family: 'Inter', sans-serif;
    font-size:0.65rem;
}
.admin-table button {
    background:var(--theme-accent, #ff3b4e);
    color:#ffffff;
    border:none;
    border-radius:4px;
    padding:3px 12px;
    cursor:pointer;
    font-weight:700;
    font-size:0.6rem;
    font-family: 'Inter', sans-serif;
    transition: background 0.2s;
}
.admin-table button:hover { background:#0fb89e; }

.add-panel {
    background: #0d0d16;
    padding:24px;
    border-radius:12px;
    border:1px solid #15151e;
    margin-bottom:24px;
}
.add-panel input, .add-panel textarea {
    display:block;
    width:100%;
    max-width:400px;
    padding:10px 14px;
    margin:5px 0;
    background:#0a0a12;
    border:1px solid #1a1a26;
    border-radius:8px;
    color:#c8d0d8;
    font-size:0.8rem;
    outline:none;
    font-family: 'Inter', sans-serif;
    transition: border 0.3s;
}
.add-panel input:focus, .add-panel textarea:focus { border-color:var(--theme-accent, #ff3b4e); }
.add-panel button {
    padding:10px 30px;
    background:var(--theme-accent, #ff3b4e);
    color:#ffffff;
    border:none;
    border-radius:8px;
    font-weight:700;
    cursor:pointer;
    transition: all 0.3s ease;
    margin-top:6px;
    font-family: 'Inter', sans-serif;
    text-transform:uppercase;
    letter-spacing:0.5px;
    font-size:0.7rem;
}
.add-panel button:hover { transform:translateY(-2px); box-shadow:0 4px 20px color-mix(in srgb, var(--theme-accent, #ff3b4e) 15%, transparent); }

.tmdb-result {
    background:#0a0a12;
    padding:10px 16px;
    border-radius:8px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border:1px solid #14141e;
    margin-bottom:4px;
    font-size:0.75rem;
    transition: border 0.2s;
}
.tmdb-result:hover { border-color: color-mix(in srgb, var(--theme-accent, #ff3b4e) 10%, transparent); }
.tmdb-result button {
    background:#1a3a4a;
    color:var(--theme-accent, #ff3b4e);
    border:none;
    border-radius:6px;
    padding:4px 14px;
    cursor:pointer;
    font-weight:600;
    font-size:0.6rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s;
}
.tmdb-result button:hover { background:#1a4a5a; }

/* ===== DÉTAIL FILM ===== */
.detail-hero {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 24px;
    background: linear-gradient(145deg, #0d0d14, #0f0f18);
    border: 1px solid #15151e;
}
.detail-hero-backdrop {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(24px) brightness(0.35);
    transform: scale(1.15);
    z-index: 0;
}
.detail-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    padding: 30px;
}
.detail-poster {
    flex: 0 0 220px;
    border-radius: 10px;
    overflow: hidden;
    background: #08080c;
    border: 1px solid #1a1a26;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.detail-poster img { width:100%; height:320px; object-fit:cover; display:block; }
.detail-info { flex:1; min-width:260px; }
.detail-meta-top { display:flex; gap:14px; font-size:0.75rem; color:#8a9aaa; margin-bottom:8px; }
.detail-info h2 { font-size:1.8rem; font-weight:800; color:#e8eef4; margin-bottom:10px; }
.detail-badges { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.detail-badge {
    background: rgba(255, 255, 255, 0.08);
    color:#e8eef4;
    border:1px solid rgba(255, 255, 255, 0.15);
    padding:4px 14px;
    border-radius:20px;
    font-size:0.7rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.5px;
}
#detailDescription { color:#8a9aaa; line-height:1.6; font-size:0.85rem; max-width:640px; margin-bottom:18px; }
.detail-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.detail-actions button {
    padding:10px 22px;
    border:none;
    border-radius:30px;
    font-family:'Inter', sans-serif;
    font-weight:700;
    font-size:0.75rem;
    cursor:pointer;
    transition: all 0.25s ease;
}
.detail-actions button:hover { transform:translateY(-2px); }
.btn-vote { background:#1a1a26 !important; color:#8a9aaa; padding:10px 16px !important; font-size:0.9rem !important; }
.btn-vote.active-vote { background:color-mix(in srgb, var(--theme-accent, #ff3b4e) 15%, transparent) !important; color:var(--theme-accent, #ff3b4e); }
.btn-list { background:#1a1a26; color:#8a9aaa; }
.btn-list.active-list { background:color-mix(in srgb, var(--theme-accent, #ff3b4e) 15%, transparent); color:var(--theme-accent, #ff3b4e); }
#detailEditBtn, #detailDelBtn { padding:10px 18px !important; font-size:0.65rem !important; }
.detail-deblocage-timer {
    margin-top: 12px;
    color: #2ecc71;
    font-size: 0.72rem;
    font-weight: 600;
}

.detail-body { display:flex; gap:24px; flex-wrap:wrap; margin-top:8px; }
.detail-main { flex:1; min-width:280px; }
.detail-tabs { display:flex; gap:24px; border-bottom:1px solid #14141e; margin-bottom:16px; }
.detail-tab {
    padding:8px 2px 12px;
    font-size:0.75rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
    color:#4a5a6a;
    cursor:pointer;
    border-bottom:2px solid transparent;
}
.detail-tab.active-tab { color:var(--theme-accent, #ff3b4e); border-bottom-color:var(--theme-accent, #ff3b4e); }
.trailer-embed {
    position:relative; width:100%; max-width:640px;
    aspect-ratio:16/9; border-radius:10px; overflow:hidden; background:#000;
}
.trailer-embed iframe { width:100%; height:100%; border:none; }
.comment-form { display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.comment-form textarea {
    flex:1;
    min-width:220px;
    padding:12px 16px;
    background:#0d0d16;
    border:1px solid #1a1a26;
    border-radius:10px;
    color:#c8d0d8;
    font-family:'Inter', sans-serif;
    font-size:0.75rem;
    resize:vertical;
}
.comment-form textarea:focus { border-color:var(--theme-accent, #ff3b4e); outline:none; }
.comment-form button {
    background:var(--theme-accent, #ff3b4e);
    color:#ffffff;
    border:none;
    border-radius:8px;
    padding:0 26px;
    font-weight:700;
    cursor:pointer;
    font-family:'Inter', sans-serif;
    font-size:0.7rem;
}
.comment-item {
    background:#0d0d16;
    border:1px solid #14141e;
    border-radius:10px;
    padding:12px 16px;
    margin-bottom:8px;
}
.comment-item .comment-head { display:flex; justify-content:space-between; margin-bottom:4px; }
.comment-item .comment-head strong { color:#e8eef4; font-size:0.75rem; }
.comment-item .comment-head span { color:#4a5a6a; font-size:0.6rem; }
.comment-item p { color:#c8d0d8; font-size:0.75rem; line-height:1.5; }

.detail-sidebar { flex:0 0 220px; }
.detail-sidebar h3 { color:#8a9aaa; font-size:0.65rem; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:12px; }
.detail-stats-grid { display:flex; gap:10px; }
.stat-box {
    flex:1;
    background:#0d0d16;
    border:1px solid #14141e;
    border-radius:10px;
    padding:14px;
    text-align:center;
}
.stat-box strong { display:block; font-size:1.4rem; margin-bottom:2px; }
.stat-box span { font-size:0.6rem; color:#6a7a8a; text-transform:uppercase; letter-spacing:0.5px; }
.stat-like strong { color:#2ecc71; }
.stat-dislike strong { color:#ff6a5a; }

@media (max-width:820px) {
    .detail-hero-content { flex-direction:column; align-items:center; text-align:center; }
    .detail-poster { flex:0 0 auto; width:180px; }
    .detail-poster img { height:260px; }
    .detail-badges, .detail-actions { justify-content:center; }
    .detail-body { flex-direction:column; }
    .detail-sidebar { flex:0 0 auto; }
}

.player-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    flex-direction: column;
    background: #000;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}
.player-overlay.active { display: flex; }
.player-box {
    width: min(100vw, 1440px);
    height: min(calc(100vh - 70px), 810px);
    aspect-ratio: 16 / 9;
    position: relative;
    background: #000;
}
.player-box iframe { width:100%; height:100%; border:none; display:block; }
.player-plein-ecran {
    position: fixed;
    right: 24px;
    bottom: 18px;
    top: auto;
    z-index: 10000;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    color: #e8eef4;
    cursor: pointer;
}
.player-plein-ecran:hover { background: var(--theme-accent, #ff3b4e); }
.player-plein-ecran svg { width: 20px; height: 20px; }
.close-btn {
    position: fixed;
    top: 16px;
    right: 24px;
    font-size: 28px;
    color: #6a7a8a;
    cursor: pointer;
    z-index: 10000;
    opacity: 0.6;
    transition: all 0.3s ease;
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    width: 44px; height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.05);
    font-family: Arial, sans-serif;
}
.close-btn:hover { opacity:1; transform:rotate(90deg); background:rgba(255,255,255,0.05); }

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* ===== MODAL D'ÉDITION ===== */
.edit-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}
.edit-modal.active { display: flex; animation: modalBgFadeIn 0.25s ease; }
.edit-modal .modal-box {
    background: #0d0d16;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 30px 34px;
    max-width: 480px;
    width: 92%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 80px rgba(0,0,0,0.8);
    animation: modalBoxPopIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalBgFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalBoxPopIn { from { opacity: 0; transform: scale(0.94) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.edit-modal .modal-box h2 {
    color: #e8eef4;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 16px;
    font-weight: 700;
}
.edit-modal .modal-box input, .edit-modal .modal-box textarea {
    display: block;
    width: 100%;
    padding: 10px 14px;
    margin: 6px 0;
    background: #0a0a12;
    border: 1px solid #1a1a26;
    border-radius: 8px;
    color: #c8d0d8;
    font-size: 0.8rem;
    outline: none;
    font-family: 'Inter', sans-serif;
    transition: border 0.3s;
}
.edit-modal .modal-box input:focus, .edit-modal .modal-box textarea:focus { border-color: var(--theme-accent, #ff3b4e); }
.edit-modal .modal-box .modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.edit-modal .modal-box .modal-actions button {
    padding: 10px 28px;
    border: none;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.edit-modal .modal-box .modal-actions .btn-save {
    background: var(--theme-accent, #ff3b4e);
    color: #ffffff;
}
.edit-modal .modal-box .modal-actions .btn-save:hover {
    box-shadow: 0 4px 20px color-mix(in srgb, var(--theme-accent, #ff3b4e) 20%, transparent);
    transform: translateY(-2px);
}
.edit-modal .modal-box .modal-actions .btn-cancel {
    background: #1a1a26;
    color: #6a7a8a;
}
.edit-modal .modal-box .modal-actions .btn-cancel:hover { background: #2a2a3a; transform: translateY(-2px); }

/* ===== NOTIFICATIONS (remplace alert/confirm) ===== */
#toastContainer {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 20000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 320px;
}
.toast {
    background: #0d0d16;
    border: 1px solid #1a1a26;
    border-left: 3px solid #4a9aea;
    border-radius: 8px;
    padding: 12px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #c8d0d8;
    white-space: pre-line;
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast-success { border-left-color: #2ecc71; }
.toast-error { border-left-color: #ff6a5a; }
.toast-warning { border-left-color: #e8b800; }
.toast-info { border-left-color: #4a9aea; }

.confirm-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(8px);
    z-index: 20001;
    display: none;
    align-items: center;
    justify-content: center;
}
.confirm-modal.active { display: flex; animation: modalBgFadeIn 0.2s ease; }
.confirm-modal .confirm-box {
    background: #0d0d16;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 26px 30px;
    max-width: 380px;
    width: 90%;
    box-shadow: 0 20px 80px rgba(0,0,0,0.8);
    animation: fadeUp 0.25s ease forwards;
}
.confirm-modal .confirm-box p {
    color: #c8d0d8;
    font-size: 0.8rem;
    line-height: 1.5;
    margin-bottom: 18px;
    white-space: pre-line;
}
.confirm-modal .confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.confirm-modal .confirm-actions button {
    padding: 9px 22px;
    border: none;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}
.confirm-modal .btn-confirm-yes { background: var(--theme-accent, #ff3b4e); color: #ffffff; }
.confirm-modal .btn-confirm-yes:hover { box-shadow: 0 4px 20px color-mix(in srgb, var(--theme-accent, #ff3b4e) 20%, transparent); transform: translateY(-2px); }
.confirm-modal .btn-confirm-no { background: #1a1a26; color: #6a7a8a; }
.confirm-modal .btn-confirm-no:hover { background: #2a2a3a; transform: translateY(-2px); }

/* ===== POP-UP DISCORD ===== */
.discord-popup {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(8px);
    z-index: 20002;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.discord-popup.active { display: flex; animation: modalBgFadeIn 0.25s ease; }
.discord-popup .discord-box {
    background: #0d0d16;
    border: 1px solid rgba(88, 101, 242, 0.25);
    border-radius: 16px;
    padding: 32px 30px;
    max-width: 380px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 80px rgba(0,0,0,0.8);
    animation: fadeUp 0.3s ease forwards;
    position: relative;
}
.discord-popup .discord-close {
    position: absolute;
    top: 14px; right: 14px;
    color: #4a5a6a;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    transition: color 0.2s ease;
}
.discord-popup .discord-close:hover { color: #c8d0d8; }
.discord-popup .discord-icon {
    width: 56px; height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: rgba(88, 101, 242, 0.12);
    border: 1px solid rgba(88, 101, 242, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}
.discord-popup h3 {
    color: #e8eef4;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.discord-popup p {
    color: #8a9aaa;
    font-size: 0.78rem;
    line-height: 1.55;
    margin-bottom: 20px;
}
.discord-popup .discord-actions { display: flex; flex-direction: column; gap: 8px; }
.discord-popup .btn-discord-join {
    background: #5865f2;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 11px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    text-decoration: none;
    display: block;
    transition: all 0.2s ease;
}
.discord-popup .btn-discord-join:hover { background: #4752c4; transform: translateY(-2px); }
.discord-popup .btn-discord-later {
    background: transparent;
    color: #5a6a7a;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    cursor: pointer;
    padding: 4px;
    text-decoration: underline;
}
.discord-popup .btn-discord-later:hover { color: #8a9aaa; }

/* ===== POP-UP RECRUTEMENT (bas à gauche, apparition différée aléatoire) ===== */
.recrutement-popup {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 19000;
    width: 300px;
    max-width: calc(100vw - 40px);
    background: #0d0d16;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #ff3b4e) 25%, transparent);
    border-radius: 14px;
    padding: 20px 20px 22px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    display: none;
    transform: translateY(16px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.recrutement-popup.active { display: block; }
.recrutement-popup.active.show { transform: translateY(0); opacity: 1; }
.recrutement-close {
    position: absolute;
    top: 12px; right: 14px;
    color: #4a5a6a;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    transition: color 0.2s ease;
}
.recrutement-close:hover { color: #c8d0d8; }
.recrutement-icon {
    width: 44px; height: 44px;
    margin-bottom: 10px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--theme-accent, #ff3b4e) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--theme-accent, #ff3b4e) 30%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}
.recrutement-popup h4 { color: #e8eef4; font-size: 0.9rem; font-weight: 700; margin-bottom: 6px; }
.recrutement-popup p { color: #8a9aaa; font-size: 0.75rem; line-height: 1.5; margin-bottom: 14px; }
.recrutement-popup p strong { color: var(--theme-accent, #ff3b4e); }
.btn-recrutement-join {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--theme-accent, #ff3b4e);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 9px 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-recrutement-join:hover { background: #0fb89e; transform: translateY(-2px); }
@media (max-width: 480px) {
    .recrutement-popup { left: 12px; bottom: 12px; width: 260px; }
}

/* ===== POP-UP DISCORD (bas à gauche, apparition différée aléatoire) ===== */
/* Empilée au-dessus de la pop-up recrutement (même coin) : bottom plus grand pour ne jamais
   se chevaucher si les deux sont visibles en même temps. */
.discord-bottom-popup {
    position: fixed;
    bottom: 240px;
    left: 20px;
    z-index: 19000;
    width: 300px;
    max-width: calc(100vw - 40px);
    background: #0d0d16;
    border: 1px solid rgba(88, 101, 242, 0.3);
    border-radius: 14px;
    padding: 20px 20px 22px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    display: none;
    transform: translateY(16px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.discord-bottom-popup.active { display: block; }
.discord-bottom-popup.active.show { transform: translateY(0); opacity: 1; }
.discord-bottom-close {
    position: absolute;
    top: 12px; right: 14px;
    color: #4a5a6a;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    transition: color 0.2s ease;
}
.discord-bottom-close:hover { color: #c8d0d8; }
.discord-bottom-icon {
    width: 44px; height: 44px;
    margin-bottom: 10px;
    border-radius: 50%;
    background: rgba(88, 101, 242, 0.15);
    border: 1px solid rgba(88, 101, 242, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}
.discord-bottom-popup h4 { color: #e8eef4; font-size: 0.9rem; font-weight: 700; margin-bottom: 6px; }
.discord-bottom-popup p { color: #8a9aaa; font-size: 0.75rem; line-height: 1.5; margin-bottom: 14px; }
.btn-discord-bottom-join {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #5865f2;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-discord-bottom-join:hover { background: #4752c4; transform: translateY(-2px); }
@media (max-width: 480px) {
    .discord-bottom-popup { left: 12px; bottom: 200px; width: 260px; }
}

/* ===== DÉBLOCAGE PREMIUM PAR LA PUBLICITÉ (page dédiée) ===== */
.deblocage-page-box {
    max-width: 420px;
    margin: 20px auto 0;
    background: #0d0d16;
    border: 1px solid #1a1a26;
    border-radius: 16px;
    padding: 32px 30px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.deblocage-icon {
    width: 56px; height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: rgba(46,204,113,0.12);
    border: 1px solid rgba(46,204,113,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}
.deblocage-page-box h3 {
    color: #e8eef4;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.deblocage-page-box p {
    color: #8a9aaa;
    font-size: 0.78rem;
    line-height: 1.55;
    margin-bottom: 20px;
}
.deblocage-page-box p.deblocage-note {
    color: #5a6a7a;
    font-size: 0.68rem;
    line-height: 1.5;
    margin-top: -12px;
}
.deblocage-actions { display: flex; flex-direction: column; gap: 8px; }
.btn-deblocage-primary {
    background: var(--theme-accent, #ff3b4e);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 11px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    display: block;
    width: 100%;
    transition: all 0.2s ease;
}
.btn-deblocage-primary:hover { background: #0fb89e; transform: translateY(-2px); }
.btn-deblocage-annuler {
    background: transparent;
    color: #5a6a7a;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    cursor: pointer;
    padding: 4px;
    text-decoration: underline;
}
.btn-deblocage-annuler:hover { color: #8a9aaa; }
.debloque-progression { margin-bottom: 18px; }
.debloque-progression-barre {
    width: 100%;
    height: 8px;
    background: #16161f;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #1a1a26;
}
.debloque-progression-remplie {
    height: 100%;
    background: linear-gradient(90deg, var(--theme-accent, #ff3b4e), #ff7a86);
    border-radius: 20px;
    transition: width 0.4s ease;
}
.debloque-progression-texte {
    margin: 8px 0 0;
    color: #6a7a8a;
    font-size: 0.7rem;
    text-align: center;
}
.debloque-pub-conteneur {
    min-height: 90px;
    background: #08080d;
    border: 1px solid #1a1a26;
    border-radius: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.debloque-minuteur {
    color: #e8b800;
    font-size: 0.72rem;
    text-align: center;
    margin-bottom: 14px;
}
#debloqueActionBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

.demande-panel {
    background: linear-gradient(180deg, #0d0d16, #0b0b12);
    border: 1px solid #15151e;
    border-radius: 14px;
    padding: 22px 24px;
    max-width: 640px;
    margin-bottom: 18px;
}
.demande-step { display: flex; gap: 14px; align-items: flex-start; }
.demande-step-num {
    flex: 0 0 26px;
    height: 26px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--theme-accent, #ff3b4e) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--theme-accent, #ff3b4e) 25%, transparent);
    color: var(--theme-accent, #ff3b4e);
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.demande-step-body { flex: 1; min-width: 0; }
.demande-step-body h3 {
    color: #e8eef4;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 10px;
}
.demande-row { display: flex; gap: 8px; flex-wrap: wrap; }
.demande-row input {
    flex: 1;
    min-width: 180px;
    padding: 10px 14px;
    background: #0a0a12;
    border: 1px solid #1a1a26;
    border-radius: 8px;
    color: #c8d0d8;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    outline: none;
    transition: border 0.2s;
}
.demande-row input:focus { border-color: var(--theme-accent, #ff3b4e); }
.demande-btn-primary, .demande-btn-secondary {
    padding: 10px 22px;
    border: none;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.demande-btn-primary { background: var(--theme-accent, #ff3b4e); color: #ffffff; }
.demande-btn-primary:hover { box-shadow: 0 4px 20px color-mix(in srgb, var(--theme-accent, #ff3b4e) 20%, transparent); }
.demande-btn-secondary { background: #1a1a26; color: #8a9aaa; }
.demande-btn-secondary:hover { color: #c8d0d8; background: #20202e; }
#demandeSearchResults:not(:empty) { margin-top: 10px; }
.demande-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0;
    color: #3a4a5a;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.demande-divider::before, .demande-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #14141e;
}
.demande-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    max-width: 640px;
}
.demande-filter {
    padding: 6px 14px;
    background: #0d0d16;
    border: 1px solid #14141e;
    border-radius: 20px;
    color: #6a7a8a;
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.demande-filter:hover { color: #c8d0d8; border-color: #1a1a26; }
.demande-filter.active {
    background: color-mix(in srgb, var(--theme-accent, #ff3b4e) 10%, transparent);
    border-color: color-mix(in srgb, var(--theme-accent, #ff3b4e) 30%, transparent);
    color: var(--theme-accent, #ff3b4e);
}
.demande-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    background: #0d0d16;
    border: 1px solid #14141e;
    border-left: 3px solid #22222e;
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 6px;
    font-size: 0.75rem;
    color: #c8d0d8;
    transition: border-color 0.2s ease;
}
.demande-item.statut-en_attente { border-left-color: #e8b800; }
.demande-item.statut-ajoute { border-left-color: #2ecc71; }
.demande-item.statut-refuse { border-left-color: #ff6a5a; }
.demande-item select {
    background: #0a0a12;
    color: #c8d0d8;
    border: 1px solid #1a1a26;
    border-radius: 4px;
    padding: 2px 6px;
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
}
.demande-item .btn-del-demande {
    background: #1a0a0a;
    color: #ff6a5a;
    border: none;
    border-radius: 4px;
    padding: 3px 10px;
    cursor: pointer;
    font-size: 0.6rem;
    font-family: 'Inter', sans-serif;
}
.demande-item .btn-play-demande {
    background: var(--theme-accent, #ff3b4e);
    color: #ffffff;
    border: none;
    border-radius: 20px;
    padding: 3px 14px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.6rem;
    font-family: 'Inter', sans-serif;
}
#demandeHint {
    font-size: 0.65rem;
    margin: -2px 0 8px;
}
#demandeHint .found {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: rgba(46,204,113,0.08);
    border: 1px solid rgba(46,204,113,0.2);
    border-radius: 6px;
    padding: 6px 10px;
    color: #2ecc71;
}
#demandeHint .found button {
    background: #2ecc71;
    color: #ffffff;
    border: none;
    border-radius: 20px;
    padding: 3px 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.55rem;
    cursor: pointer;
}

.stats-bar {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    background: #0a0a12;
    border-radius: 10px;
    padding: 12px 20px;
    border: 1px solid #12121c;
    margin-top: 16px;
}
.stats-bar .stat-item {
    font-size: 0.7rem;
    color: #6a7a8a;
}
.stats-bar .stat-item strong {
    color: #e8eef4;
    font-size: 0.9rem;
}

/* ===== BANDE DÉFILANTE D'AFFICHES ===== */
.poster-marquee {
    width: 100%;
    overflow: hidden;
    background: #0d0d14;
    border-bottom: 1px solid #15151e;
    padding: 10px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.poster-marquee-track {
    display: flex;
    gap: 12px;
    width: max-content;
}
.poster-marquee-track.poster-marquee-ready {
    animation: posterMarqueeScroll 50s linear infinite;
}
.poster-marquee-track:hover { animation-play-state: paused; }
.poster-marquee-track img {
    height: 76px;
    width: auto;
    border-radius: 6px;
    border: 1px solid #1a1a26;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.poster-marquee-track img:hover { transform: scale(1.08); border-color: color-mix(in srgb, var(--theme-accent, #ff3b4e) 30%, transparent); }
@keyframes posterMarqueeScroll {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-1 * var(--marquee-distance, 50%))); }
}
@media (prefers-reduced-motion: reduce) {
    .poster-marquee-track { animation: none; }
}

/* ===== PAGES LÉGALES ===== */
.legal-content { background:#0d0d16; border:1px solid #1a1a26; border-radius:12px; padding:28px; margin-top:16px; max-width:760px; }
.legal-content h3 { color:#e8eef4; font-size:0.85rem; margin:20px 0 8px; text-transform:uppercase; letter-spacing:0.8px; }
.legal-content h3:first-child { margin-top:0; }
.legal-content p { color:#8a9aaa; font-size:0.75rem; line-height:1.7; margin-bottom:10px; }
.legal-content ul { color:#8a9aaa; font-size:0.75rem; line-height:1.7; margin:0 0 10px 18px; }
.legal-content li { margin-bottom:4px; }
.legal-content strong { color:#c8d0d8; }
.legal-content .maj { color:#4a5a6a; font-size:0.65rem; margin-top:20px; }

/* ===== FOOTER ===== */
.site-footer {
    width: 100%;
    background: #0a0a0f;
    border-top: 1px solid #15151e;
    margin-top: 48px;
    padding: 40px 24px 20px;
}
.footer-inner {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: space-between;
}
.footer-col { flex: 1; min-width: 160px; max-width: 320px; }
.footer-col.footer-brand { max-width: 340px; }
.footer-logo { height: 36px; width: 36px; margin-bottom: 10px; }
.footer-logo-text {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #f4f6f8;
    text-transform: uppercase;
}
.footer-col p {
    color: #5a6a7a;
    font-size: 0.7rem;
    line-height: 1.6;
}
.footer-col h4 {
    color: #8a9aaa;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 12px;
    font-weight: 700;
}
.footer-col a {
    display: block;
    color: #5a6a7a;
    font-size: 0.72rem;
    margin-bottom: 8px;
    cursor: pointer;
    transition: color 0.18s ease;
    width: fit-content;
}
.footer-col a:hover { color: var(--theme-accent, #ff3b4e); }
.footer-bottom {
    max-width: 1440px;
    margin: 32px auto 0;
    padding-top: 16px;
    border-top: 1px solid #14141e;
    color: #3a4a5a;
    font-size: 0.62rem;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    justify-content: space-between;
}

/* ===== RESPONSIVE ===== */
/* Palier tablette + mobile : header compact, nav en menu déroulant,
   catégories en barre repliable au lieu de la sidebar fixe. */
@media (max-width:1024px) {
    header { flex-direction:column; align-items:stretch; gap:6px; padding:10px 20px; }
    .header-top-row { gap:8px; }
    .header-actions { width:100%; justify-content:center; order:5; }
    .search-header { max-width:100%; margin:2px 0; order:10; }
    .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
    nav {
        display: none;
        justify-content: center;
        width: 100%;
        padding-top: 8px;
        border-top: 1px solid #14141e;
        margin-top: 4px;
    }
    nav.nav-open { display: flex; }
    .sidebar-toggle { cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
    .sidebar-toggle-arrow { display: inline; transition: transform 0.2s ease; }
    .sidebar-toggle.open .sidebar-toggle-arrow { transform: rotate(180deg); }
    #categoriesList { display: none; width: 100%; }
    #categoriesList.open { display: flex; }
    .sidebar-wrap { flex-direction:column; }
    .sidebar {
        position:relative; top:0; max-height:none;
        display:block;
        padding:12px; border-radius:12px; margin-bottom:6px;
    }
    .sidebar h3 { margin:4px 0; }
    .sidebar ul { display:flex; flex-wrap:wrap; gap:2px 8px; }
    .sidebar ul li { padding:5px 8px; }
}
/* Palier mobile uniquement : on empile ce qui tenait encore côte à côte sur tablette. */
@media (max-width:680px) {
    .site-footer { padding:32px 16px 16px; margin-top:32px; }
    .footer-inner { gap:24px; }
    .footer-bottom { justify-content:flex-start; }
    .poster-marquee-track img { height:52px; }
    .hero-banner { height:380px; }
    .hero-banner-content { padding:28px 24px; max-width:100%; }
    .hero-banner-content h1 { font-size:1.7rem; }
    .hero-banner-content p { -webkit-line-clamp:2; font-size:0.8rem; }
    .hero-arrow { width:34px; height:34px; font-size:1.1rem; }
    .grid { grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); }
    .edit-modal .modal-box { padding:24px 20px; }
}
@media (max-width:480px) {
    .grid { grid-template-columns:repeat(auto-fill, minmax(110px,1fr)); }
    .hero-banner { height:320px; }
    .hero-banner-content h1 { font-size:1.4rem; }
    .login-container { flex-direction:column; align-items:center; }
    .login-box { max-width:100%; }
    .add-panel input, .add-panel textarea { max-width:100%; }
    .close-btn { top:10px; right:12px; width:36px; height:36px; font-size:22px; }
    .player-plein-ecran { right:58px; bottom:10px; width:36px; height:36px; }
    .site-logo { height:38px; width:38px; }
    .edit-modal .modal-box { padding:20px 16px; }
    .edit-modal .modal-box .modal-actions button { padding:8px 20px; font-size:0.65rem; }
}
/* Cibles tactiles : sur un écran tactile (pas de souris), on agrandit un peu
   les éléments cliquables pour qu'ils restent faciles à toucher, sans alourdir
   l'interface desktop (souris = précision, écran tactile = doigt). */
@media (pointer: coarse) {
    .sidebar ul li { min-height:36px; }
    nav a { padding:8px 4px; }
    .admin-table button, .admin-table select { min-height:32px; }
}

/* ===== PAGE SOUTIEN (tarifs Premium payant) ===== */
.offre-card {
    position: relative;
    background: #0d0d16;
    border: 1px solid #1a1a26;
    border-radius: 14px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
}
.offre-card.offre-populaire {
    border-color: var(--theme-accent, #ff3b4e);
    box-shadow: 0 0 0 1px var(--theme-accent, #ff3b4e), 0 8px 28px color-mix(in srgb, var(--theme-accent, #ff3b4e) 12%, transparent);
}
.offre-badge {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--theme-accent, #ff3b4e);
    color: #ffffff;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 4px 12px;
    border-radius: 20px;
}
.offre-card h3 {
    color: #e8eef4;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 6px;
}
.offre-prix {
    color: #e8eef4;
    font-size: 1.8rem;
    font-weight: 800;
}
.offre-duree {
    color: #6a7a8a;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}
.offre-avantages {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    flex: 1;
}
.offre-avantages li {
    color: #8a9aaa;
    font-size: 0.72rem;
    line-height: 2;
}
.offre-payer {
    display: block;
    background: #1a1a26;
    color: #c8d0d8;
    border: none;
    border-radius: 30px;
    padding: 11px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    cursor: pointer;
    transition: background 0.15s;
}
.offre-populaire .offre-payer {
    background: var(--theme-accent, #ff3b4e);
    color: #ffffff;
}
.offre-payer:hover {
    filter: brightness(1.1);
}

/* =========================================================================
   DIRECTION ARTISTIQUE KINOO
   Placé en fin de feuille : ces règles priment sur les anciennes sans avoir
   à les supprimer une par une. Fond très sombre, accent rouge, en-tête
   compact sur une ligne, affiches au format portrait.
   ========================================================================= */

/* ---- Fond réactif au curseur ----
   Nappe de lumière diffuse : un halo chaud qui suit le curseur avec du retard
   (voir suivreCurseurLueur dans app.js) posé sur deux nappes fixes qui dérivent
   lentement. Aucun motif géométrique — l'ambiance reste celle d'une salle sombre. */
.lueur-fond {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(520px circle at var(--lueur-x, 50%) var(--lueur-y, 35%), color-mix(in srgb, var(--theme-accent, #ff3b4e) 16%, transparent), transparent 62%),
        radial-gradient(760px circle at 12% 8%, rgba(150, 30, 60, 0.12), transparent 60%),
        radial-gradient(680px circle at 88% 92%, rgba(60, 40, 120, 0.10), transparent 62%);
    animation: derive-lueur 26s ease-in-out infinite alternate;
}
@keyframes derive-lueur {
    from { background-position: 0 0, 0 0, 0 0; }
    to   { background-position: 0 0, 3% 4%, -3% -3%; }
}
@media (prefers-reduced-motion: reduce) {
    .lueur-fond { animation: none; }
}
#site-content { position: relative; z-index: 1; }

/* ---- En-tête ---- */
header {
    padding: 10px 32px;
    gap: 8px 18px;
    background: rgba(8, 8, 10, 0.92);
    backdrop-filter: blur(10px);
    flex-wrap: nowrap;
}
.site-logo-text { font-size: 1.45rem; letter-spacing: 1px; }

nav { gap: 4px; flex-wrap: nowrap; }
nav a,
.nav-explorer-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #9aa4ae;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}
nav a svg,
.nav-explorer-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
nav a:hover,
.nav-explorer-btn:hover { background: rgba(255, 255, 255, 0.06); color: #ffffff; }
nav a.active-link { background: color-mix(in srgb, var(--theme-accent, #ff3b4e) 12%, transparent); color: #ffffff; font-weight: 600; }
.caret { font-size: 0.6rem; opacity: 0.7; }

/* Menus déroulants de l'en-tête (Explorer et compte) : même boîte, même ouverture. */
.nav-explorer, .compte { position: relative; }
.nav-explorer-menu, .compte-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 232px;
    padding: 8px;
    background: #12121a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
    display: none;
    z-index: 200;
}
.nav-explorer-menu { left: 0; right: auto; }
.nav-explorer-menu.ouvert, .compte-menu.ouvert { display: block; }
.nav-explorer-menu a, .compte-item {
    display: block;
    padding: 10px 12px;
    border-radius: 9px;
    color: #c2c9d0;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.nav-explorer-menu a:hover, .compte-item:hover { background: rgba(255, 255, 255, 0.06); color: #ffffff; }
.compte-item-sortie { color: #ff6a78; }

.profil-entete {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--theme-accent, #ff3b4e) 12%, transparent), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
}
.profil-avatar {
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 84px;
    background: #171722 center/cover no-repeat;
    border: 2px solid color-mix(in srgb, var(--theme-accent, #ff3b4e) 55%, transparent);
    border-radius: 50%;
    color: #ffffff;
    font-size: 2rem;
    font-weight: 800;
}
.profil-identite { flex: 1; min-width: 0; }
.profil-surtitre { color: #ff6070; font-size: 0.62rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }
.profil-identite h2 { margin: 5px 0 5px; color: #f4f7fa; font-size: 1.5rem; }
.profil-role { color: #9aa4ae; font-size: 0.72rem; }
.profil-photo-btn { height: 38px; padding: 0 16px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 9px; color: #e8eef4; font-family: 'Inter', sans-serif; font-size: 0.72rem; cursor: pointer; }
.profil-photo-btn:hover { background: var(--theme-accent, #ff3b4e); border-color: var(--theme-accent, #ff3b4e); }
.profil-vide { padding: 28px 0; color: #6d757e; font-size: 0.76rem; text-align: center; }
#page-profil { width: 100%; }
#page-profil #profilHistoriqueGrid { width: 100%; }

@media (max-width: 620px) {
    .profil-entete { align-items: flex-start; flex-wrap: wrap; padding: 18px; }
    .profil-avatar { width: 64px; height: 64px; flex-basis: 64px; font-size: 1.5rem; }
    .profil-identite h2 { font-size: 1.2rem; }
    .profil-photo-btn { width: 100%; }
}

/* ---- Barre de recherche intégrée ---- */
.search-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 340px;
    margin: 0 0 0 auto;
    padding: 0 14px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: border-color 0.18s ease, background 0.18s ease;
}
.search-header:focus-within { border-color: color-mix(in srgb, var(--theme-accent, #ff3b4e) 50%, transparent); background: rgba(255, 255, 255, 0.07); }
.search-header-icon { width: 16px; height: 16px; color: #7c858f; flex-shrink: 0; }
.search-header input {
    flex: 1;
    min-width: 0;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: #e8eef4;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
}
.search-header input::placeholder { color: #6d757e; }
.search-toggle-btn { display: none; }

/* ---- Pastille de compte ---- */
.header-actions { gap: 8px; }
.compte-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 6px 12px 6px 6px;
    background: transparent;
    border: none;
    border-radius: 30px;
    color: #e8eef4;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease;
}
.compte-btn:hover { background: rgba(255, 255, 255, 0.06); }
.compte-avatar {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.09);
    color: #c2c9d0;
}
.compte-avatar svg { width: 17px; height: 17px; }
.compte-menu-intro {
    padding: 6px 12px 12px;
    color: #8a929b;
    font-size: 0.72rem;
    line-height: 1.5;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    margin-bottom: 8px;
}
.compte-action {
    display: block;
    margin-top: 6px;
    padding: 11px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: #e8eef4;
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: filter 0.15s ease, background 0.15s ease;
}
.compte-action:hover { background: rgba(255, 255, 255, 0.1); }
.compte-action-primary { background: var(--theme-accent, #ff3b4e); color: #ffffff; }
.compte-action-primary:hover { filter: brightness(1.08); background: var(--theme-accent, #ff3b4e); }
.compte-menu-tete { padding: 4px 12px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); margin-bottom: 6px; }

/* ---- Titres de section ---- */
.section-title {
    border-bottom: none;
    margin: 32px 0 14px;
    padding-bottom: 0;
}
.section-title h2 {
    position: relative;
    padding-bottom: 9px;
    color: #f2f5f8;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 1px;
}
/* Le petit trait rouge sous le titre : repère visuel répété sur toute la page. */
.section-title h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 3px;
    border-radius: 2px;
    background: var(--theme-accent, #ff3b4e);
}

/* ---- Cartes : affiche au format portrait ---- */
.grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 20px 16px; }
.card {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
}
.card:hover { transform: none; box-shadow: none; border-color: transparent; }
.card-media {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #101018;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover .card-media {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7), 0 0 0 2px color-mix(in srgb, var(--theme-accent, #ff3b4e) 55%, transparent);
}
.card img,
.card-locked-placeholder { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.card iframe { height: 160px; border-radius: 12px 12px 0 0; }
.card .info { padding: 10px 2px 0; }
.card .info h4 { font-size: 0.8rem; font-weight: 600; color: #eef2f6; }
.card .info .cat { font-size: 0.65rem; color: #79828c; }

/* Étiquette de type (FILM / SÉRIE), en haut à gauche de l'affiche */
.type-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(8, 8, 12, 0.82);
    backdrop-filter: blur(4px);
    color: #e9edf1;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    z-index: 2;
}
.quality-badge { border-radius: 6px; }

/* Vignettes de séries et collections : même traitement que les cartes de films */
.collection-cover { border-radius: 12px; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.collection-card:hover .collection-cover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7), 0 0 0 2px color-mix(in srgb, var(--theme-accent, #ff3b4e) 55%, transparent);
}

/* ---- Bannière d'accueil ---- */
.hero-banner { border-radius: 18px; overflow: hidden; }
.hero-banner-content h1 { font-size: 2.4rem; font-weight: 800; line-height: 1.1; }
#page-home .hero-badges { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; margin-bottom: 14px; }
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    color: #eaeef2;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.hero-badge-note { background: rgba(232, 184, 0, 0.16); color: #ffd24a; }
#page-home .hero-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px; margin-top: 18px; }
.btn-hero-watch,
.btn-hero-info {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 26px;
    border: none;
    border-radius: 32px;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.18s ease, background 0.18s ease;
}
.btn-hero-watch { background: var(--theme-accent, #ff3b4e); color: #ffffff; }
.btn-hero-watch:hover { filter: brightness(1.1); }
.btn-hero-info { background: rgba(255, 255, 255, 0.13); color: #f0f3f6; backdrop-filter: blur(6px); }
.btn-hero-info:hover { background: rgba(255, 255, 255, 0.2); }

@media (max-width: 900px) {
    header { flex-wrap: wrap; padding: 10px 16px; }
    .search-header { flex: 1 1 100%; order: 3; margin-left: 0; }
    .hero-banner-content h1 { font-size: 1.6rem; }
    .lueur-fond { animation: none; }
}

/* ---- Champs de formulaire : cohérence et lisibilité ---- */

/* Chrome impose un fond blanc aux champs autoremplis, ce qui trouait le thème sombre
   (le pseuda apparaissait en clair au milieu de champs noirs). L'ancienne règle ne visait
   que les champs mot de passe : elle couvre désormais tous les champs du site. Pas de
   propriété standard pour ça, d'où le box-shadow interne qui recouvre le fond imposé. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #0a0a12 inset !important;
    -webkit-text-fill-color: #e2e8ee !important;
    caret-color: #e2e8ee;
    border: 1px solid #1a1a26 !important;
    transition: background-color 9999s ease-in-out 0s;
}

/* ---- Bascule d'affichage du mot de passe ----
   Le conteneur devient une boîte flex : les marges du champ ne s'échappent plus vers
   l'extérieur, donc le bouton se centre réellement sur la hauteur du champ (il était
   décalé vers le haut et collé au bord). */
.password-field {
    position: relative;
    display: block;
    width: 100%;
    margin: 10px 0;
}
.password-field input {
    display: block;
    width: 100%;
    padding-right: 46px !important;
    margin: 0 !important;
}
.password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #6f7a85;
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease;
}
.password-toggle:hover { color: #e8eef4; background: rgba(255, 255, 255, 0.07); }
.password-toggle:focus-visible { outline: 2px solid var(--theme-accent, #ff3b4e); outline-offset: 2px; }
.password-toggle svg { display: block; width: 17px; height: 17px; }

/* ---- Formulaires de connexion et d'inscription ---- */
.login-container { gap: 22px; }
.login-box {
    background: #0e0e17;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    padding: 30px 28px;
}
.login-box h3 { font-size: 0.95rem; letter-spacing: 1.2px; margin-bottom: 18px; }
.login-box input {
    padding: 12px 14px;
    margin: 10px 0;
    background: #0a0a12;
    border: 1px solid #1c1c28;
    border-radius: 10px;
    color: #e2e8ee;
    font-size: 0.82rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.login-box input::placeholder { color: #6d757e; }
.login-box input:focus {
    border-color: color-mix(in srgb, var(--theme-accent, #ff3b4e) 65%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent, #ff3b4e) 12%, transparent);
}
.login-box button {
    margin-top: 6px;
    padding: 13px;
    border-radius: 10px;
    font-size: 0.82rem;
    letter-spacing: 0.4px;
}
.btn-login { background: var(--theme-accent, #ff3b4e); color: #ffffff; }
.btn-login:hover { filter: brightness(1.08); }

/* ---- Mêmes règles pour les autres formulaires du site ---- */
.add-panel input,
.add-panel textarea,
.edit-modal .modal-box input,
.edit-modal .modal-box textarea {
    border-radius: 10px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.add-panel input:focus,
.add-panel textarea:focus,
.edit-modal .modal-box input:focus,
.edit-modal .modal-box textarea:focus {
    border-color: color-mix(in srgb, var(--theme-accent, #ff3b4e) 65%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent, #ff3b4e) 12%, transparent);
}

/* ---- Listes déroulantes ----
   Le contrôle lui-même est arrondi et reçoit son propre chevron (la flèche native est
   masquée via appearance:none, sinon on se retrouve avec deux flèches superposées).
   Le panneau qui s'ouvre au clic est dessiné par le système d'exploitation : ses coins
   ne sont pas stylables en CSS, il faudrait une liste maison en HTML pour les arrondir. */
select,
.stream-toolbar select,
.admin-table select,
.demande-item select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #0e0e17;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c858f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 14px 14px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    padding: 9px 34px 9px 14px;
    color: #dbe2e9;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    cursor: pointer;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
select:hover { background-color: #14141f; }
select:focus,
.stream-toolbar select:focus {
    border-color: color-mix(in srgb, var(--theme-accent, #ff3b4e) 65%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent, #ff3b4e) 12%, transparent);
}
/* Le rendu des options reste natif, mais la plupart des navigateurs respectent
   au moins ces couleurs : on évite la liste blanche sur thème sombre. */
select option {
    background: #12121a;
    color: #dbe2e9;
}
.admin-table select { padding: 7px 30px 7px 12px; font-size: 0.7rem; border-radius: 10px; }
.demande-item select { padding: 7px 30px 7px 12px; font-size: 0.7rem; border-radius: 10px; }

/* La distinction "meilleur de la plateforme" partageait le coin haut-gauche avec
   l'etiquette de type (FILM / SERIE) : les deux se chevauchaient. Elle passe en
   bandeau bas, ou elle ne peut croiser aucun autre badge. */
.top-badge {
    top: auto;
    bottom: 8px;
    left: 8px;
    right: 8px;
    text-align: center;
    background: rgba(8, 8, 12, 0.78);
    backdrop-filter: blur(6px);
    border-color: color-mix(in srgb, var(--theme-accent, #ff3b4e) 50%, transparent);
    border-radius: 8px;
    z-index: 2;
}

/* ---- Champ mot de passe : structure en grille ----
   Les tentatives precedentes posaient le bouton en absolu par-dessus le champ, ce qui
   dependait de la largeur exacte de l'enveloppe : selon le formulaire, l'oeil se
   retrouvait au milieu du texte. Ici l'enveloppe porte la boite visuelle (fond, bordure,
   coins) et distribue deux colonnes : le champ, puis le bouton. Aucun recouvrement
   possible, quelle que soit la largeur disponible. */
.password-field {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    width: 100% !important;
    margin: 10px 0 !important;
    padding: 0 6px 0 0 !important;
    background: #0a0a12 !important;
    border: 1px solid #1c1c28 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.password-field:focus-within {
    border-color: color-mix(in srgb, var(--theme-accent, #ff3b4e) 65%, transparent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent, #ff3b4e) 12%, transparent) !important;
}
/* Le champ ne dessine plus sa propre boite : c'est l'enveloppe qui la porte. */
.password-field input,
.login-box .password-field input {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 12px 8px 12px 14px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}
.password-field input:focus { box-shadow: none !important; border: none !important; }
/* Le fond impose par l'autoremplissage de Chrome doit reprendre celui de l'enveloppe. */
.password-field input:-webkit-autofill,
.password-field input:-webkit-autofill:hover,
.password-field input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #0a0a12 inset !important;
    border: none !important;
}
.password-toggle {
    position: static !important;
    grid-column: 2 !important;
    transform: none !important;
    width: 34px !important;
    height: 34px !important;
    flex-shrink: 0;
}

/* ---- Transitions ----
   L'ancien reglage (fondu + glissement vertical de 12px sur 400ms) faisait "gabarit
   par defaut" : trop long, trop appuye, et le contenu qui monte attire l'oeil au mauvais
   endroit. Ici le changement de page est un simple fondu court, avec une courbe qui
   demarre vite et ralentit a l'arrivee : on percoit la transition sans l'attendre. */
.page {
    animation: apparition-page 130ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes apparition-page {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Les affiches se posaient avec un petit zoom : remplace par un fondu seul, plus discret
   quand une grille entiere se charge d'un coup. */
img { animation: apparition-image 180ms ease-out both; }
@keyframes apparition-image {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Fenetres modales : le rebond (scale 0.94) faisait jouet. Reduit a un ecart a peine
   visible, sur une duree courte. */
@keyframes modalBoxPopIn {
    from { opacity: 0; transform: scale(0.99); }
    to   { opacity: 1; transform: scale(1); }
}
.edit-modal .modal-box,
.confirm-modal .modal-box { animation-duration: 140ms; animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); }

/* ---- Corrections relevees en inspectant la page ---- */

/* La zone de message d'authentification reservait une bande vide sous les formulaires
   meme sans message a afficher. */
#authMessage:empty { display: none; }

/* Boutons j'aime / je n'aime pas : ils utilisaient des emoji, dont le rendu change selon
   le systeme. Passes en SVG comme le reste du site, donc a dimensionner ici. */
.btn-vote { display: inline-flex; align-items: center; justify-content: center; }
.btn-vote svg { width: 17px; height: 17px; display: block; }

@media (max-width: 900px) {
    /* Le champ de recherche se tassait a 29px de haut une fois passe sur sa propre ligne. */
    .search-header { min-height: 42px; }
}

/* ---- En-tête de catalogue (page Films) ---- */
.catalogue-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin: 26px 0 20px;
}
.catalogue-surtitre {
    color: #7c858f;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.catalogue-titre {
    color: #f4f7fa;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
}
.catalogue-compte { color: #8a929b; font-size: 0.76rem; margin-top: 6px; }
.catalogue-compte strong { color: #f4f7fa; font-weight: 700; }
.catalogue-outils { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.catalogue-recherche {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 44px;
    padding: 0 16px;
    min-width: 260px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    transition: border-color 0.18s ease;
}
.catalogue-recherche:focus-within { border-color: color-mix(in srgb, var(--theme-accent, #ff3b4e) 55%, transparent); }
.catalogue-recherche svg { width: 16px; height: 16px; color: #7c858f; flex-shrink: 0; }
.catalogue-recherche input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: #e8eef4;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
}
.catalogue-recherche input::placeholder { color: #6d757e; }
.catalogue-outils select { height: 44px; border-radius: 14px; font-size: 0.78rem; }

/* ---- Panneau de filtres ---- */
.panneau-filtres {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    padding: 18px 20px;
    margin-bottom: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.filtre-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.filtre-intitule {
    min-width: 108px;
    color: #7c858f;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.filtre-pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.filtre-pastille {
    padding: 8px 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 30px;
    color: #b9c1c9;
    font-family: 'Inter', sans-serif;
    font-size: 0.74rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.filtre-pastille:hover { background: rgba(255, 255, 255, 0.09); color: #ffffff; }
.filtre-pastille.active {
    background: var(--theme-accent, #ff3b4e);
    border-color: var(--theme-accent, #ff3b4e);
    color: #ffffff;
    font-weight: 600;
}

/* ---- Note affichée sur l'affiche ---- */
.note-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 9px;
    border-radius: 7px;
    background: rgba(8, 8, 12, 0.82);
    backdrop-filter: blur(4px);
    color: #ffd24a;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    z-index: 2;
}
/* Quand les deux coexistent, la qualité descend d'un cran pour ne pas croiser la note. */
.note-badge ~ .quality-badge { top: 38px; }

/* ---- Méga-menu "Explorer" ---- */
.nav-explorer-menu {
    min-width: 720px;
    padding: 22px 24px;
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px 24px;
}
.nav-explorer-menu.ouvert { display: grid; }
.mega-colonne { display: flex; flex-direction: column; gap: 6px; }
.mega-titre {
    color: #7c858f;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.mega-item {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 10px !important;
    border-radius: 12px !important;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease;
}
.mega-item:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.09); }
.mega-icone {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}
.mega-icone svg { width: 18px; height: 18px; }
.mega-icone-rouge { background: color-mix(in srgb, var(--theme-accent, #ff3b4e) 14%, transparent); color: #ff6070; }
.mega-icone-violet { background: rgba(150, 110, 255, 0.14); color: #a98bff; }
.mega-icone-bleu { background: rgba(70, 140, 255, 0.14); color: #74a6ff; }
.mega-icone-vert { background: rgba(60, 200, 130, 0.14); color: #5fd79b; }
.mega-icone-jaune { background: rgba(232, 184, 0, 0.14); color: #f0c945; }
.mega-icone-gris { background: rgba(255, 255, 255, 0.08); color: #b9c1c9; }
.mega-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mega-texte strong { color: #eef2f6; font-size: 0.79rem; font-weight: 600; }
.mega-texte em {
    color: #838c95;
    font-size: 0.68rem;
    font-style: normal;
    line-height: 1.35;
}

@media (max-width: 900px) {
    .nav-explorer-menu { min-width: 0; width: calc(100vw - 32px); grid-template-columns: 1fr; }
    .catalogue-titre { font-size: 1.5rem; }
    .catalogue-outils { width: 100%; }
    .catalogue-recherche { flex: 1 1 100%; min-width: 0; }
    .filtre-intitule { min-width: 0; flex: 1 1 100%; }
}

/* ---- Badge de rang du Top 10 ----
   Place en bas a gauche de l'affiche : le coin haut gauche porte deja l'etiquette de
   type et le coin haut droit la note, donc aucun des trois ne se croise. */
.rang-badge {
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--theme-accent, #ff3b4e);
    color: #ffffff;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--theme-accent, #ff3b4e) 35%, transparent);
    z-index: 3;
}

/* ---- Mega-menu : version sobre ----
   La premiere version donnait une icone de couleur differente par entree (rouge, violet,
   bleu, vert, jaune, gris) : effet sapin de Noel, et aucune de ces couleurs ne voulait dire
   quoi que ce soit. Tout passe en gris neutre, l'accent rouge n'apparait qu'au survol,
   sur l'element reellement pointe. Espacements resserres au passage. */
.nav-explorer-menu {
    min-width: 0;
    padding: 16px;
    gap: 4px 12px;
    grid-template-columns: repeat(3, minmax(190px, 1fr));
}
.mega-colonne { gap: 2px; }
.mega-titre {
    font-size: 0.58rem;
    letter-spacing: 1px;
    color: #6f7780;
    margin: 0 0 6px 10px;
}
.mega-item {
    gap: 10px;
    padding: 8px 10px !important;
    border: none;
    border-radius: 10px !important;
}
.mega-item:hover { background: rgba(255, 255, 255, 0.055); border-color: transparent; }
.mega-icone,
.mega-icone-rouge,
.mega-icone-violet,
.mega-icone-bleu,
.mega-icone-vert,
.mega-icone-jaune,
.mega-icone-gris {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.06);
    color: #9aa3ac;
    transition: background 0.16s ease, color 0.16s ease;
}
.mega-icone svg { width: 16px; height: 16px; }
.mega-item:hover .mega-icone { background: color-mix(in srgb, var(--theme-accent, #ff3b4e) 14%, transparent); color: #ff6070; }
.mega-texte strong { font-size: 0.76rem; font-weight: 600; }
.mega-texte em { font-size: 0.65rem; color: #79818a; }

@media (max-width: 900px) {
    .nav-explorer-menu { grid-template-columns: 1fr; width: calc(100vw - 32px); }
}

/* Les glyphes typographiques (fleche entree, i cercle) servaient d'icones : rendu
   different selon la police installee, et souvent mal aligne. Remplaces par des SVG,
   a dimensionner et centrer ici. */
.btn-hero-info svg, .btn-hero-watch svg { width: 17px; height: 17px; flex-shrink: 0; }
.admin-table button svg { width: 14px; height: 14px; display: block; }
.admin-table button { display: inline-flex; align-items: center; justify-content: center; }

/* ---- Mega-menu : debordement du texte ----
   Les colonnes etaient definies en "1fr", qui ne descend jamais sous la largeur du plus
   long mot/ligne : la description restait sur une ligne et debordait sur la colonne
   voisine. "minmax(0, 1fr)" autorise la colonne a retrecir, et le texte passe alors a la
   ligne normalement. min-width:0 est necessaire sur chaque niveau imbrique pour la meme
   raison (un element flex/grid refuse de retrecir sous son contenu par defaut). */
.nav-explorer-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega-colonne { min-width: 0; }
.mega-item { min-width: 0; align-items: flex-start; }
.mega-texte { min-width: 0; flex: 1; }
.mega-texte strong,
.mega-texte em {
    display: block;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}
.mega-texte em { line-height: 1.3; }

@media (max-width: 900px) {
    .nav-explorer-menu { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Mega-menu : largeur du panneau ----
   Le panneau est positionne en absolu : sans largeur explicite, il se dimensionne sur son
   contenu et, avec des colonnes "minmax(0, 1fr)" qui peuvent tomber a zero, il s'effondrait
   a la largeur du bouton "Explorer" (115px de large pour 1483px de haut, tout empile).
   Une largeur fixe donne a la grille de quoi repartir ses trois colonnes, et le texte y
   passe a la ligne au lieu de deborder. */
.nav-explorer-menu {
    width: 700px;
    max-width: calc(100vw - 32px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
    .nav-explorer-menu { width: calc(100vw - 32px); grid-template-columns: minmax(0, 1fr); }
}

/* ================================================================
   AFFICHAGE TÉLÉPHONE
   Mesuré sur 375 x 812. Trois défauts corrigés ici :
   - l'en-tête occupait 161 px, soit un cinquième de l'écran, sur trois lignes ;
   - les deux flèches du carrousel étaient empilées à droite, par-dessus le texte ;
   - les boutons du hero débordaient de leur cadre et passaient sous les pastilles.
   ================================================================ */
@media (max-width: 760px) {

    /* ---- En-tête : deux lignes au lieu de trois ---- */
    /* L'en-tête était en colonne, donc chacun de ses trois blocs occupait une ligne
       entière. En ligne avec retour automatique, le logo garde sa ligne et la recherche
       partage la suivante avec le bouton de compte. */
    header {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        padding: 10px 16px;
        gap: 8px;
    }
    .header-top-row { flex: 1 1 100%; }
    .site-logo-text { font-size: 1.35rem; }

    /* La recherche et le compte partagent la deuxième ligne. */
    .search-header {
        order: 2;
        flex: 1 1 auto;
        width: auto;
        max-width: none;
        min-height: 40px;
        margin: 0;
    }
    .header-actions { order: 3; width: auto; flex: 0 0 auto; justify-content: flex-end; gap: 8px; }

    /* Le bouton de compte garde son icône mais perd son libellé : sur 375 px,
       « Connexion » et sa flèche prenaient 141 px, soit 40 % de la ligne. */
    .compte-btn { padding: 0; width: 40px; height: 40px; justify-content: center; }
    .compte-btn #compteLabel, .compte-btn .compte-caret { display: none; }

    /* ---- Hero ---- */
    /* Hauteur fixe remplacée par une hauteur minimale : le contenu ne peut plus
       déborder du cadre quel que soit la longueur du titre ou du résumé. */
    .hero-banner { height: auto; min-height: 320px; }
    .hero-banner-content { padding: 20px 18px 54px; }
    .hero-banner-content h1 { font-size: 1.5rem; }

    /* Les deux boutons côte à côte : empilés, ils faisaient 103 px de haut et
       recouvraient les pastilles de navigation. */
    .hero-actions { flex-wrap: nowrap; gap: 10px; margin-top: 14px; align-items: stretch; }
    .hero-actions > button { flex: 1 1 0; min-width: 0; justify-content: center; }
    /* Hauteur imposée aux deux : « Plus d'infos » porte une bordure que « Lecture »
       n'a pas, ce qui lui donnait 44 px contre 40 et décalait les deux boutons
       l'un par rapport à l'autre. */
    .btn-hero-watch, .btn-hero-info {
        height: 44px;
        padding: 0 10px;
        margin-top: 0;
        align-self: stretch;
        font-size: 0.78rem;
        white-space: nowrap;
    }

    /* La paire de flèches se resserre dans le coin bas droit, les pastilles restent
       alignées a gauche sous les boutons. */
    .hero-fleches { right: 14px; bottom: 12px; gap: 8px; }
    .hero-arrow { width: 34px; height: 34px; }
    .hero-arrow svg { width: 17px; height: 17px; }
    .hero-banner-dots { bottom: 22px; left: 18px; }

    /* ---- Bandeau d'affiches ---- */
    .poster-marquee-track img { height: 46px; }
}

/* ---- Navigation d'épisodes dans le lecteur ---- */
.player-nav {
    position: fixed;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 12;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px;
    background: #0b1220;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 6px;
    max-width: calc(100vw - 180px);
}
.player-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #e8eef4;
    font-family: 'Inter', sans-serif;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.16s ease, color 0.16s ease;
}
.player-nav-btn:hover:not(:disabled) { background: var(--theme-accent, #ff3b4e); border-color: var(--theme-accent, #ff3b4e); color: #ffffff; }
/* Désactivé plutôt que masqué : la barre garde la même largeur du premier au dernier
   épisode, donc le bouton encore actif ne se déplace pas d'un épisode à l'autre. */
.player-nav-btn:disabled { opacity: 0.32; cursor: default; }
.player-nav-label {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #b9c1c9;
    font-size: 0.72rem;
    font-weight: 500;
.player-nav-last { min-width: 188px; justify-content: center; background: #182333; }

    padding: 0 4px;
}

@media (max-width: 760px) {
    /* Sur téléphone, le titre de l'épisode est sacrifié : les deux boutons et la croix
       ne tiennent pas sur 375 px avec lui. */
    .player-box { width: 100vw; height: min(calc(100vh - 62px), 56.25vw); }
    .player-nav-last { min-width: 0; }
    .player-nav { bottom: 4px; left: 8px; right: 8px; transform: none; justify-content: space-between; max-width: none; }
    .player-nav-label { display: none; }
    .player-nav-btn { flex: 1 1 0; justify-content: center; }
}

/* ---- Menu burger : liste verticale ---- */
/* Ouvert, le menu était une rangée horizontale centrée et sans retour à la ligne :
   ses cinq entrées mesuraient 473 px pour 380 px disponibles, donc elles débordaient
   des DEUX côtés à cause du centrage — « Accueil » commençait à -39 px, hors écran.
   Sur un téléphone, une liste verticale est de toute façon la bonne forme. */
@media (max-width: 760px) {
    header nav {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        gap: 2px;
        width: 100%;
        padding: 8px 0 4px;
    }
    header nav > a,
    header nav > .nav-explorer,
    header nav > .nav-explorer > button {
        width: 100%;
    }
    header nav > a,
    header nav > .nav-explorer > button {
        justify-content: flex-start;
        gap: 12px;
        min-height: 46px;
        padding: 0 12px;
        border-radius: 10px;
    }
    header nav > a.active-link { background: rgba(255, 255, 255, 0.06); }
    header nav > a:active { background: rgba(255, 255, 255, 0.04); }

    /* Le panneau « Explorer » se déploie sous son bouton, sur toute la largeur. */
    .nav-explorer-menu { left: 0; right: 0; width: auto; max-width: none; }
}

/* ================================================================
   AJOUTER AU CATALOGUE
   L'ancienne page empilait cinq encadrés aux couleurs et aux tailles de
   texte toutes différentes (violet, jaune, rouge, polices de 0.55rem),
   chacun avec ses styles écrits dans le HTML. Tout passe ici, sur une
   seule grammaire : une étape numérotée, un titre, une phrase d'aide,
   des champs étiquetés.
   ================================================================ */

.ajout-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}
.ajout-surtitre {
    color: #7c858f;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.ajout-titre {
    color: #f4f7fa;
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.1;
}
.ajout-compteurs { display: flex; flex-wrap: wrap; gap: 8px; }
.ajout-compteur {
    padding: 7px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 30px;
    color: #8a929b;
    font-size: 0.72rem;
}
.ajout-compteur strong { color: #f4f7fa; font-weight: 700; }

/* ---- Onglets ---- */
.ajout-onglets {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
}
.ajout-onglet {
    flex: 1 1 0;
    min-width: 0;
    height: 40px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: #8a929b;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}
.ajout-onglet:hover { color: #e8eef4; }
.ajout-onglet.active { background: var(--theme-accent, #ff3b4e); color: #ffffff; }

.ajout-volet { display: none; }
.ajout-volet.active { display: block; }

/* ---- Étapes ---- */
.ajout-etape {
    display: flex;
    gap: 16px;
    padding: 20px;
    margin-bottom: 14px;
    background: rgba(255, 255, 255, 0.022);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
}
.ajout-etape-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--theme-accent, #ff3b4e) 14%, transparent);
    border-radius: 50%;
    color: #ff6070;
    font-size: 0.78rem;
    font-weight: 800;
}
.ajout-etape-corps { flex: 1 1 auto; min-width: 0; }
.ajout-etape-corps h3 {
    color: #f4f7fa;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 5px;
}
.ajout-aide {
    color: #838c95;
    font-size: 0.75rem;
    line-height: 1.55;
    margin-bottom: 14px;
}
.ajout-aide strong { color: #b9c1c9; font-weight: 600; }
.ajout-aide a { color: #ff6070; cursor: pointer; text-decoration: underline; }

/* ---- Recherche ---- */
.ajout-recherche { display: flex; flex-wrap: wrap; gap: 8px; }
.ajout-recherche input {
    flex: 1 1 200px;
    min-width: 0;
    height: 42px;
    padding: 0 14px;
    background: #0a0a12;
    border: 1px solid #1c1c28;
    border-radius: 11px;
    color: #e8eef4;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    outline: none;
}
.ajout-recherche input:focus { border-color: color-mix(in srgb, var(--theme-accent, #ff3b4e) 50%, transparent); }

.ajout-btn-principal {
    height: 42px;
    padding: 0 22px;
    background: var(--theme-accent, #ff3b4e);
    border: none;
    border-radius: 11px;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.16s ease;
}
.ajout-btn-principal:hover { background: #ff5566; }
.ajout-btn-secondaire {
    height: 42px;
    padding: 0 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 11px;
    color: #b9c1c9;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.ajout-btn-secondaire:hover { background: rgba(255, 255, 255, 0.09); color: #ffffff; }

/* ---- Résultats de recherche ---- */
.ajout-resultats { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.ajout-resultat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 11px;
}
.ajout-resultat-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ajout-resultat-texte strong {
    color: #eef2f6;
    font-size: 0.82rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ajout-resultat-texte span { color: #7c858f; font-size: 0.68rem; }
.ajout-resultat button {
    flex-shrink: 0;
    height: 32px;
    padding: 0 16px;
    background: color-mix(in srgb, var(--theme-accent, #ff3b4e) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--theme-accent, #ff3b4e) 30%, transparent);
    border-radius: 9px;
    color: #ff6070;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
}
.ajout-resultat button:hover { background: var(--theme-accent, #ff3b4e); border-color: var(--theme-accent, #ff3b4e); color: #ffffff; }

.ajout-vide { color: #6d757e; font-size: 0.74rem; padding: 6px 0; }
.ajout-succes { color: #5fd79b; }
.ajout-erreur { color: #ff6a5a; }

/* ---- Formulaire ---- */
.ajout-grille {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
.ajout-apercu {
    position: relative;
    aspect-ratio: 2 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: #0a0a12;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    overflow: hidden;
}
.ajout-apercu img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: none; }
.ajout-apercu-vide { color: #5a626b; font-size: 0.68rem; text-align: center; }

.ajout-champs { display: flex; flex-direction: column; gap: 12px; }
.ajout-ligne { display: flex; flex-wrap: wrap; gap: 12px; }
.ajout-ligne > .ajout-champ { flex: 1 1 140px; min-width: 0; }
.ajout-ligne > .ajout-champ-etroit { flex: 0 1 120px; }

.ajout-champ { display: flex; flex-direction: column; gap: 6px; }
.ajout-champ label {
    color: #7c858f;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}
.ajout-champ label em {
    color: #5a626b;
    font-size: 0.6rem;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.6px;
    text-transform: none;
}
.ajout-champ input,
.ajout-champ select,
.ajout-champ textarea {
    width: 100%;
    padding: 11px 13px;
    background: #0a0a12;
    border: 1px solid #1c1c28;
    border-radius: 10px;
    color: #e8eef4;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    outline: none;
}
.ajout-champ textarea { resize: vertical; line-height: 1.5; }
.ajout-champ input:focus,
.ajout-champ select:focus,
.ajout-champ textarea:focus { border-color: color-mix(in srgb, var(--theme-accent, #ff3b4e) 50%, transparent); }

/* Le lien de lecture décide de la visibilité publique de la fiche : il est
   signalé visuellement pour qu'on ne publie pas sans lui par distraction. */
.ajout-champ-cle label { color: #ff6070; }
.ajout-champ-cle label em { color: #ff6070; opacity: 0.7; }
.ajout-champ-cle input { border-color: color-mix(in srgb, var(--theme-accent, #ff3b4e) 35%, transparent); background: color-mix(in srgb, var(--theme-accent, #ff3b4e) 4%, transparent); }

.ajout-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

.ajout-select-large {
    width: 100%;
    max-width: 420px;
    padding: 11px 13px;
    background: #0a0a12;
    border: 1px solid #1c1c28;
    border-radius: 10px;
    color: #e8eef4;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    outline: none;
}
.ajout-resume { margin-top: 10px; color: #8a929b; font-size: 0.75rem; }
.ajout-resume-alerte { color: #f0c945; }

.ajout-episode-form { display: flex; flex-direction: column; gap: 12px; }
.ajout-recents { margin-top: 16px; }
.ajout-recents-titre {
    color: #7c858f;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.ajout-recent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 13px;
    margin-bottom: 5px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    color: #c8d0d8;
    font-size: 0.76rem;
}
.ajout-recent button {
    background: transparent;
    border: none;
    color: #7c858f;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    cursor: pointer;
    text-decoration: underline;
}
.ajout-recent button:hover { color: #ff6070; }

/* ---- Bannière « tu complètes une demande » ---- */
.demande-cible-banner {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 16px;
    margin-bottom: 14px;
    background: rgba(116, 166, 255, 0.08);
    border: 1px solid rgba(116, 166, 255, 0.25);
    border-radius: 12px;
    color: #74a6ff;
    font-size: 0.74rem;
}
.demande-cible-banner a { color: #8a929b; cursor: pointer; text-decoration: underline; white-space: nowrap; }

/* ---- Outils repliables ---- */
.ajout-outils { display: flex; flex-direction: column; gap: 8px; margin-top: 26px; }
.ajout-outil {
    background: rgba(255, 255, 255, 0.022);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    overflow: hidden;
}
.ajout-outil > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    color: #e8eef4;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.ajout-outil > summary::-webkit-details-marker { display: none; }
.ajout-outil > summary:hover { background: rgba(255, 255, 255, 0.03); }
.ajout-outil[open] > summary { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.ajout-outil-corps { padding: 16px 18px 18px; }
.ajout-pastille {
    min-width: 24px;
    padding: 3px 9px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    color: #b9c1c9;
    font-size: 0.68rem;
    font-weight: 700;
    text-align: center;
}
.ajout-pastille-alerte { background: rgba(240, 201, 69, 0.15); color: #f0c945; }

.ajout-filtre {
    width: 100%;
    max-width: 320px;
    padding: 9px 12px;
    margin-bottom: 12px;
    background: #0a0a12;
    border: 1px solid #1c1c28;
    border-radius: 10px;
    color: #e8eef4;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    outline: none;
}
.ajout-sous-outil { margin-top: 14px; }
.ajout-sous-outil > summary {
    color: #7c858f;
    font-size: 0.7rem;
    cursor: pointer;
}
.ajout-liste { display: flex; flex-direction: column; gap: 6px; }

.ajout-ligne-outil { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ajout-ligne-outil label {
    color: #7c858f;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}
.ajout-ligne-outil select {
    padding: 8px 12px;
    background: #0a0a12;
    border: 1px solid #1c1c28;
    border-radius: 9px;
    color: #e8eef4;
    font-family: 'Inter', sans-serif;
    font-size: 0.76rem;
}
.ajout-boutons-import { display: flex; flex-wrap: wrap; gap: 8px; }
.ajout-boutons-import button {
    height: 36px;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    color: #c8d0d8;
    font-family: 'Inter', sans-serif;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
}
.ajout-boutons-import button:hover { background: color-mix(in srgb, var(--theme-accent, #ff3b4e) 14%, transparent); border-color: color-mix(in srgb, var(--theme-accent, #ff3b4e) 30%, transparent); color: #ff6070; }

.ajout-section-titre {
    margin: 30px 0 14px;
    color: #f4f7fa;
    font-size: 0.95rem;
    font-weight: 700;
}
.ajout-section-titre span { color: #7c858f; font-weight: 500; }

@media (max-width: 760px) {
    .ajout-titre { font-size: 1.35rem; }
    .ajout-etape { flex-direction: column; gap: 12px; padding: 16px; }
    .ajout-grille { grid-template-columns: minmax(0, 1fr); }
    /* L'aperçu passe en bandeau large : une colonne de 150 px à côté des champs
       ne laisserait plus rien pour les champs eux-mêmes. */
    .ajout-apercu { aspect-ratio: auto; height: 160px; order: -1; }
    .ajout-apercu img { width: auto; max-width: 100%; object-fit: contain; }
    .ajout-onglet { font-size: 0.75rem; }
    .ajout-ligne > .ajout-champ,
    .ajout-ligne > .ajout-champ-etroit { flex: 1 1 100%; }
}

/* ================================================================
   ÉPISODES D'UNE SÉRIE
   Avant : une liste à plat, toutes saisons mélangées, chaque ligne
   réduite à « Épisode 4 » avec un bouton rouge. Rien n'indiquait où
   on en était ni où reprendre. Ici : onglets de saison, avancement,
   et l'épisode entier est cliquable.
   ================================================================ */

.serie-episodes { margin-top: 28px; }

.serie-episodes-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}
.serie-episodes-titres h3 {
    color: #f4f7fa;
    font-size: 1.15rem;
    font-weight: 700;
}
.serie-episodes-titres p { color: #7c858f; font-size: 0.74rem; margin-top: 3px; }

.serie-episodes-actions { display: flex; align-items: center; gap: 14px; }
.serie-btn-reprendre {
    height: 42px;
    padding: 0 22px;
    background: var(--theme-accent, #ff3b4e);
    border: none;
    border-radius: 30px;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.16s ease;
}
.serie-btn-reprendre:hover { background: #ff5566; }
.serie-lien-admin {
    color: #7c858f;
    font-size: 0.74rem;
    cursor: pointer;
    text-decoration: underline;
    white-space: nowrap;
}
.serie-lien-admin:hover { color: #e8eef4; }

/* ---- Avancement ---- */
.serie-progression { display: none; align-items: center; gap: 12px; margin-bottom: 16px; }
.serie-progression-barre {
    flex: 1 1 auto;
    height: 4px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 3px;
    overflow: hidden;
}
.serie-progression-barre span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--theme-accent, #ff3b4e);
    border-radius: 3px;
    transition: width 0.3s ease;
}
.serie-progression-texte { color: #7c858f; font-size: 0.7rem; white-space: nowrap; }

/* ---- Onglets de saison ---- */
.serie-saisons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

/* ---- Liste des épisodes ---- */
.serie-episodes-liste { display: flex; flex-direction: column; gap: 6px; }
/* Un épisode déjà vu s'efface sans disparaître : on doit pouvoir le retrouver
   pour le revoir, mais il ne doit pas concurrencer ceux qui restent à voir. */
.serie-episode.vu { opacity: 0.55; }

.serie-aucun-episode { color: #6d757e; font-size: 0.78rem; padding: 18px 0; }

@media (max-width: 760px) {
    .serie-episodes-entete { align-items: stretch; }
    .serie-episodes-actions { width: 100%; justify-content: space-between; }
    .serie-btn-reprendre { flex: 1 1 auto; }
}

/* ================================================================
   BADGE « SANS LIEN DE LECTURE » (visible du staff seulement)
   Il réutilisait le style du badge Premium avec des retouches écrites
   dans le HTML, ce qui le plaçait en haut à droite — exactement sous
   la note. Les deux se chevauchaient et le texte était tronqué.
   Il descend en bas de l'affiche, où rien d'autre ne se pose.
   ================================================================ */
.badge-a-completer {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 2;
    padding: 5px 8px;
    background: rgba(10, 10, 16, 0.88);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(240, 201, 69, 0.35);
    border-radius: 7px;
    color: #f0c945;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-align: center;
    text-transform: uppercase;
}

/* ================================================================
   BARRE LATÉRALE SUR TÉLÉPHONE
   Elle gardait sa colonne verticale : un rectangle étroit et très haut,
   presque vide, qui poussait le catalogue loin sous la ligne de flottaison.
   Sur téléphone elle devient une bande horizontale repliable.
   ================================================================ */
@media (max-width: 900px) {
    .sidebar-wrap {
        position: static;
        width: 100%;
        max-height: none;
        margin-bottom: 18px;
    }
    .sidebar {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 14px;
        width: 100%;
    }
    /* Les genres défilent horizontalement au doigt au lieu de s'empiler
       sur quinze lignes. */
    /* La liste était masquée derrière un « Catégories ▾ » à déplier. Une bande qui
       défile au doigt est visible en permanence et coûte un geste de moins, donc
       le dépliant n'a plus lieu d'être (son titre est masqué juste en dessous). */
    #categoriesList {
        display: flex !important;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 4px;
        margin: 0;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .sidebar > .sidebar-toggle { display: none; }
    .sidebar-titre-stats { margin-top: 4px; }
    #categoriesList::-webkit-scrollbar { display: none; }
    #categoriesList li {
        flex: 0 0 auto;
        margin: 0;
        padding: 8px 14px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 30px;
        font-size: 0.74rem;
        white-space: nowrap;
    }
    #categoriesList li.active {
        background: var(--theme-accent, #ff3b4e);
        border-color: var(--theme-accent, #ff3b4e);
        color: #ffffff;
    }
    /* Les statistiques passent sur une ligne : elles n'ont pas besoin
       d'un bloc à elles sur un écran de téléphone. */
    .sidebar-stats { display: flex; gap: 18px; align-items: center; }
    .sidebar-stats .stat-row { margin: 0; }
}

/* Le bloc « Stats » perd ses styles écrits dans le HTML. */
.sidebar-stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 2px 2px 4px;
    font-size: 0.7rem;
    color: #7c858f;
}
.sidebar-stats .stat-row { display: flex; justify-content: space-between; gap: 10px; }
.sidebar-stats .stat-row span { color: #e8eef4; font-weight: 700; }

/* La règle de base de .sidebar-stats ayant été ajoutée après la requête média
   ci-dessus, c'est elle qui l'emporte sur flex-direction : on repose donc
   explicitement la disposition en ligne pour les petits écrans. */
@media (max-width: 900px) {
    .sidebar-stats { flex-direction: row; gap: 18px; align-items: center; }
    .sidebar-stats .stat-row { justify-content: flex-start; gap: 6px; }
}

/* ================================================================
   FOND ANIMÉ
   Trois masses colorées très floues qui dérivent derrière le contenu.
   Choix volontaires :
   - durées premières entre elles (43 s, 67 s, 89 s) pour que les trois
     ne repassent jamais ensemble au même endroit — sinon le fond se met
     à battre à intervalle régulier, et ça se voit tout de suite ;
   - déplacements courts (quelques pourcents de l'écran) : le mouvement
     doit être perçu du coin de l'œil, pas regardé ;
   - aucune pulsation d'opacité, qui est ce qui donne l'air « animation
     de démo » à ce genre de fond.
   ================================================================ */
.fond-anime {
    position: fixed;
    inset: -12%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.fond-masse {
    position: absolute;
    display: block;
    border-radius: 50%;
    /* Le flou est ce qui coûte le plus cher à dessiner : on le fixe une fois
       et on n'anime que translate/scale, qui restent sur le compositeur. */
    filter: blur(90px);
    will-change: transform;
}
.fond-masse-1 {
    width: 46vw;
    height: 46vw;
    top: -6%;
    left: -4%;
    background: radial-gradient(circle, color-mix(in srgb, var(--theme-accent, #ff3b4e) 16%, transparent), transparent 70%);
    animation: derive-masse-1 43s ease-in-out infinite alternate;
}
.fond-masse-2 {
    width: 38vw;
    height: 38vw;
    bottom: -8%;
    right: -2%;
    background: radial-gradient(circle, rgba(120, 60, 200, 0.13), transparent 70%);
    animation: derive-masse-2 67s ease-in-out infinite alternate;
}
.fond-masse-3 {
    width: 30vw;
    height: 30vw;
    top: 42%;
    left: 52%;
    background: radial-gradient(circle, rgba(200, 40, 90, 0.10), transparent 70%);
    animation: derive-masse-3 89s ease-in-out infinite alternate;
}

@keyframes derive-masse-1 {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(7vw, 5vh, 0) scale(1.12); }
}
@keyframes derive-masse-2 {
    from { transform: translate3d(0, 0, 0) scale(1.08); }
    to   { transform: translate3d(-6vw, -7vh, 0) scale(1); }
}
@keyframes derive-masse-3 {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-9vw, 6vh, 0) scale(1.18); }
}

/* Sur téléphone : deux masses au lieu de trois et un flou deux fois moins large.
   Un blur de 90 px sur trois surfaces plein écran fait tomber le défilement
   sous les 60 images par seconde sur un appareil d'entrée de gamme. */
@media (max-width: 760px) {
    .fond-masse { filter: blur(50px); }
    .fond-masse-1 { width: 70vw; height: 70vw; }
    .fond-masse-2 { width: 60vw; height: 60vw; }
    .fond-masse-3 { display: none; }
}

/* Un fond qui bouge en permanence est exactement ce que ce réglage système
   demande d'éviter (gêne vestibulaire, troubles de l'attention). */
@media (prefers-reduced-motion: reduce) {
    .fond-masse { animation: none; }
}
/* ================================================================
   FENÊTRE D'AJOUT
   Remplace une page de 18 écrans. Contrainte tenue : tout doit rester
   visible d'un coup d'œil, donc la boîte est plafonnée à 88 % de la
   hauteur de l'écran et seule la zone centrale peut défiler.
   ================================================================ */
.ajout-modal {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(4, 4, 8, 0.72);
    backdrop-filter: blur(4px);
}
.ajout-modal.ouvert { display: flex; }

.ajout-modal-boite {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 840px;
    max-height: 88vh;
    background: #0d0d14;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    overflow: hidden;
    animation: ajout-apparition 160ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes ajout-apparition {
    from { opacity: 0; transform: translateY(8px) scale(0.99); }
    to   { opacity: 1; transform: none; }
}

/* ---- Tête ---- */
.ajout-modal-tete {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.ajout-modal-titre {
    flex: 1 1 auto;
    color: #7c858f;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    text-align: right;
}
.ajout-modal-onglets {
    display: flex;
    gap: 3px;
    padding: 3px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 11px;
}
.ajout-modal-onglet {
    height: 32px;
    padding: 0 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #8a929b;
    font-family: 'Inter', sans-serif;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease;
}
.ajout-modal-onglet:hover { color: #e8eef4; }
.ajout-modal-onglet.active { background: var(--theme-accent, #ff3b4e); color: #ffffff; }

.ajout-modal-fermer {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 9px;
    color: #7c858f;
    cursor: pointer;
}
.ajout-modal-fermer:hover { background: rgba(255, 255, 255, 0.07); color: #ffffff; }

/* ---- Corps ---- */
.ajout-volet { display: none; flex-direction: column; min-height: 0; }
.ajout-volet.active { display: flex; }

.ajout-chercher {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 16px 0;
    padding: 0 14px;
    height: 44px;
    background: #08080e;
    border: 1px solid #1c1c28;
    border-radius: 12px;
    flex-shrink: 0;
}
.ajout-chercher:focus-within { border-color: color-mix(in srgb, var(--theme-accent, #ff3b4e) 50%, transparent); }
.ajout-chercher svg { width: 16px; height: 16px; color: #6d757e; flex-shrink: 0; }
.ajout-chercher input,
.ajout-chercher select {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: #e8eef4;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
}
.ajout-chercher select option { background: #0d0d14; }
.ajout-chercher-etat { flex-shrink: 0; color: #6d757e; font-size: 0.68rem; white-space: nowrap; }

/* Les résultats sont des vignettes qui défilent horizontalement : une liste
   verticale de douze lignes mangerait toute la hauteur disponible, et l'affiche
   permet de reconnaître le bon film sans lire. */
.ajout-vignettes {
    display: flex;
    gap: 10px;
    padding: 12px 16px 0;
    overflow-x: auto;
    scrollbar-width: thin;
    flex-shrink: 0;
}
.ajout-vignettes:empty { display: none; }
.ajout-vignette {
    flex: 0 0 92px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
}
.ajout-vignette-image {
    display: block;
    width: 92px;
    height: 138px;
    background: #14141c center/cover no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    transition: border-color 0.14s ease, transform 0.14s ease;
}
.ajout-vignette:hover .ajout-vignette-image { border-color: var(--theme-accent, #ff3b4e); transform: translateY(-2px); }
.ajout-vignette-titre {
    color: #e8eef4;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ajout-vignette-meta { color: #6d757e; font-size: 0.63rem; }

/* ---- Formulaire ---- */
.ajout-form {
    display: flex;
    gap: 16px;
    padding: 14px 16px;
    overflow-y: auto;
    min-height: 0;
}
.ajout-form-episode { display: block; }

.ajout-affiche {
    flex: 0 0 104px;
    position: relative;
    height: 156px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #08080e;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 11px;
    overflow: hidden;
}
.ajout-affiche img { width: 100%; height: 100%; object-fit: cover; display: none; }
.ajout-affiche span { color: #5a626b; font-size: 0.66rem; }

.ajout-form-champs { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ajout-form-champs label { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ajout-form-champs label > span {
    color: #7c858f;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.ajout-form-champs input,
.ajout-form-champs select,
.ajout-form-champs textarea {
    width: 100%;
    padding: 10px 12px;
    background: #08080e;
    border: 1px solid #1c1c28;
    border-radius: 10px;
    color: #e8eef4;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    outline: none;
}
.ajout-form-champs textarea { resize: vertical; line-height: 1.5; }
.ajout-form-champs input:focus,
.ajout-form-champs select:focus,
.ajout-form-champs textarea:focus { border-color: color-mix(in srgb, var(--theme-accent, #ff3b4e) 50%, transparent); }

/* Sans lien de lecture, la fiche est enregistrée mais invisible du public :
   le champ est signalé pour qu'on ne publie pas sans lui par distraction. */
.ajout-cle > span { color: #ff6070; }
.ajout-cle input { border-color: color-mix(in srgb, var(--theme-accent, #ff3b4e) 35%, transparent); background: color-mix(in srgb, var(--theme-accent, #ff3b4e) 5%, transparent); }

.ajout-trio { display: flex; gap: 10px; }
.ajout-trio > label { flex: 1 1 0; }
.ajout-trio > .ajout-large { flex: 2 1 0; }

.ajout-plus > summary {
    color: #7c858f;
    font-size: 0.7rem;
    cursor: pointer;
    padding: 2px 0;
}
.ajout-plus[open] > summary { margin-bottom: 8px; }
.ajout-plus label { margin-bottom: 8px; }

/* ---- Pied ---- */
.ajout-modal-pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.015);
}
.ajout-modal-pied > div { display: flex; gap: 8px; }
.ajout-astuce { color: #6d757e; font-size: 0.68rem; }

.ajout-btn-principal {
    height: 38px;
    padding: 0 20px;
    background: var(--theme-accent, #ff3b4e);
    border: none;
    border-radius: 10px;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.14s ease;
}
.ajout-btn-principal:hover { background: #ff5566; }
.ajout-btn-secondaire {
    height: 38px;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    color: #b9c1c9;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}
.ajout-btn-secondaire:hover { background: rgba(255, 255, 255, 0.09); color: #ffffff; }

.ajout-entete-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

@media (max-width: 760px) {
    .ajout-modal { padding: 0; }
    .ajout-modal-boite { max-width: none; max-height: 100vh; height: 100vh; border-radius: 0; border: none; }
    .ajout-modal-tete { flex-wrap: wrap; }
    .ajout-modal-titre { display: none; }
    .ajout-modal-onglets { flex: 1 1 auto; }
    .ajout-modal-onglet { flex: 1 1 0; padding: 0 8px; }
    /* L'affiche passe au-dessus des champs : une colonne de 104 px à côté d'eux
       ne laisserait plus de place pour taper sur 375 px. */
    .ajout-form { flex-direction: column; }
    .ajout-affiche { flex: none; width: 100%; height: 120px; }
    .ajout-affiche img { object-fit: contain; }
    .ajout-trio { flex-wrap: wrap; }
    .ajout-trio > label { flex: 1 1 90px; }
    .ajout-astuce { display: none; }
    .ajout-modal-pied > div { flex: 1 1 auto; }
    .ajout-modal-pied .ajout-btn-principal { flex: 1 1 auto; }
}

/* ---- Suggestions ---- */
/* La raison est la seule chose qui distingue ces cartes de celles du catalogue :
   elle remplace la ligne d'actions et reste volontairement discrète. */
.suggestion-raison {
    margin-top: 4px;
    color: #7c858f;
    font-size: 0.58rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.similaires { margin-top: 36px; }

/* ---- Notifications ---- */
.toast { display: flex; align-items: center; gap: 9px; }
.toast-icone { display: inline-flex; flex-shrink: 0; }
.toast-success .toast-icone { color: #5fd79b; }
.toast-error .toast-icone { color: #ff6070; }
.toast-info .toast-icone { color: #74a6ff; }

/* ---- Boutons d'action des cartes ---- */
/* Les icônes sont passées du caractère au SVG : il faut donc centrer un enfant
   au lieu d'aligner du texte. */
.actions button { display: inline-flex; align-items: center; justify-content: center; }
.card-locked-placeholder { display: flex; align-items: center; justify-content: center; color: #5a626b; }

/* ================================================================
   NAVIGATION AU CLAVIER
   Mesuré : aucun des 60 éléments interactifs testés n'affichait
   d'indicateur de focus. En naviguant à la tabulation, on ne savait
   pas où on se trouvait — le site était inutilisable sans souris.
   :focus-visible et non :focus : le navigateur ne dessine le contour
   que pour une navigation au clavier, jamais après un clic de souris.
   ================================================================ */
:focus-visible {
    outline: 2px solid var(--theme-accent, #ff3b4e);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Lien d'évitement : premier élément atteint à la tabulation, il permet de sauter
   l'en-tête et le bandeau d'affiches pour aller droit au contenu. Invisible tant
   qu'il n'a pas le focus. */
.lien-evitement {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 10001;
    padding: 10px 18px;
    background: var(--theme-accent, #ff3b4e);
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 0 0 10px 10px;
    text-decoration: none;
    transition: top 0.15s ease;
}
.lien-evitement:focus { top: 0; }

/* ================================================================
   RÉDUCTION DES ANIMATIONS — BLOC FINAL
   Placé en dernier pour l'emporter sur toutes les règles précédentes.
   Ce réglage système est demandé par des personnes sujettes au mal des
   transports, aux migraines ou aux troubles de l'attention : un bandeau
   qui défile en boucle et un badge qui pulse sont exactement ce qui
   déclenche la gêne, et ils échappaient encore au réglage.
   Les animations d'apparition sont conservées mais ramenées à une durée
   négligeable : les supprimer ferait apparaître les éléments d'un coup,
   ce qui est déroutant sans être plus confortable.
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    /* Mouvements continus : supprimés. */
    .poster-marquee-track,
    .lueur-fond,
    .fond-masse,
    .tri,
    .quality-badge.quality-cam,
    .cam-warning {
        animation: none !important;
    }

    /* Apparitions et transitions : raccourcies, pas supprimées. */
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ================================================================
   OPTIMISATION TÉLÉPHONE
   Mesures de départ sur 375 x 812 :
     - en-tête 109 px sur deux lignes, soit 13 % de l'écran ;
     - accueil de 10 907 px, soit 13,4 écrans de défilement ;
     - une seule colonne de 327 px, donc une affiche de 490 px par
       carte : 578 px par film, 5 581 px pour les dix du Top 10.
   Ce bloc est placé en dernier pour l'emporter sur les précédents.
   ================================================================ */
@media (max-width: 760px) {

    /* ---- 1. En-tête sur une seule ligne ----
       display:contents fait disparaître la boîte .header-top-row sans toucher
       au HTML : le logo et le bouton burger deviennent des enfants directs de
       l'en-tête, et peuvent donc être réordonnés avec le reste. C'est le seul
       moyen en CSS de réorganiser des éléments qui n'ont pas le même parent. */
    header {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 0 14px;
        min-height: 60px;
    }
    .header-top-row { display: contents; }

    .site-logo-text { order: 1; margin-right: auto; font-size: 1.3rem; }
    .header-actions { order: 2; width: auto; flex: 0 0 auto; gap: 2px; }
    .nav-toggle { order: 3; margin: 0; }
    nav { order: 4; }
    .search-header { order: 5; }

    /* La recherche n'occupe plus une ligne en permanence : elle se déplie sous
       l'en-tête quand on touche la loupe. C'était l'intention d'origine du code
       (toggleSearchBar existait déjà), qu'une règle plus récente avait annulée
       en masquant le bouton. */
    .search-toggle-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }
    .search-header { display: none; }
    .search-header.search-open {
        display: flex;
        flex: 1 1 100%;
        width: 100%;
        margin: 0 0 10px;
        min-height: 42px;
    }
    .compte-btn { padding: 0; width: 40px; height: 40px; justify-content: center; }
    .compte-btn #compteLabel, .compte-btn .caret { display: none; }

    /* ---- 2. Rangées qui défilent horizontalement ----
       Une grille qui enroule empile les cartes une par une : dix films font
       5 581 px de haut. En rangée, les mêmes dix tiennent sur 280 px et se
       parcourent au pouce, comme sur n'importe quelle application de vidéo. */
    #page-home .grid,
    #page-series .grid,
    #page-animes .grid,
    .similaires .grid {
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        /* Le défilement s'arrête proprement sur une carte au lieu de finir
           entre deux, ce qui donne cette impression de liste « molle ». */
        scroll-snap-type: x mandatory;
        /* La rangée déborde des marges de la page pour aller bord à bord, et
           retrouve sa marge en padding : les cartes semblent sortir de l'écran
           plutôt que s'arrêter net contre une bordure invisible. */
        margin-left: -16px;
        margin-right: -16px;
        padding: 2px 16px 10px;
        scrollbar-width: none;
    }
    #page-home .grid::-webkit-scrollbar,
    #page-series .grid::-webkit-scrollbar,
    #page-animes .grid::-webkit-scrollbar,
    .similaires .grid::-webkit-scrollbar { display: none; }

    #page-home .grid > *,
    #page-series .grid > *,
    #page-animes .grid > *,
    .similaires .grid > * {
        flex: 0 0 132px;
        width: 132px;
        scroll-snap-align: start;
    }

    /* Dans une rangée, les boutons d'action ne tiennent pas sous 132 px et
       n'ont pas d'intérêt : un appui sur la carte ouvre la fiche, qui les
       propose tous en grand. */
    #page-home .grid .actions,
    #page-series .grid .actions,
    #page-animes .grid .actions,
    .similaires .grid .actions { display: none; }

    #page-home .grid .info,
    .similaires .grid .info { padding: 8px 2px 0; }
    #page-home .grid .info h4,
    .similaires .grid .info h4 {
        font-size: 0.74rem;
        line-height: 1.25;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    #page-home .grid .info .cat,
    .similaires .grid .info .cat { font-size: 0.6rem; }

    /* ---- 3. Le catalogue garde une grille, mais à deux colonnes ----
       C'est une page où l'on parcourt : la grille a du sens. Une seule colonne
       n'en avait pas. */
    #page-stream .grid,
    #page-watchlist .grid,
    #page-collections .grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 10px;
    }
    #page-stream .card .actions { gap: 4px; }
    #page-stream .card .actions button { width: 34px; height: 34px; }

    /* ---- 4. Titres de section ----
       Plus lisibles, avec un trait d'accent : sur un écran étroit, c'est ce qui
       découpe la page en sections identifiables pendant qu'on fait défiler. */
    .section-title { margin: 26px 0 12px; align-items: baseline; }
    .section-title h2 {
        position: relative;
        padding-bottom: 8px;
        font-size: 1.05rem;
        font-weight: 800;
        letter-spacing: -0.2px;
    }
    .section-title h2::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 34px;
        height: 3px;
        background: var(--theme-accent, #ff3b4e);
        border-radius: 2px;
    }
    .section-title a { font-size: 0.72rem; }
}

/* ---- Catalogue : éléments partagés films / séries ---- */
.catalogue-lien-staff {
    color: #7c858f;
    font-size: 0.74rem;
    cursor: pointer;
    text-decoration: underline;
    white-space: nowrap;
}
.catalogue-lien-staff:hover { color: #e8eef4; }
.catalogue-vide { color: #6d757e; font-size: 0.8rem; padding: 26px 0; }

/* ================================================================
   LISTE D'ÉPISODES
   Rangées à vignette, comme sur les plateformes de vidéo : image 16/9,
   numéro, titre, durée, résumé. Jusqu'ici la liste n'affichait que
   « Épisode 1, 2, 3… » — la base ne contenait ni titre, ni image, ni
   résumé d'épisode ; ils viennent d'être récupérés depuis TMDB.
   ================================================================ */
.serie-select-saison {
    height: 42px;
    min-width: 260px;
    padding: 0 14px;
    margin-bottom: 18px;
    background: #0d0d16;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #e8eef4;
    font-family: 'Inter', sans-serif;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    outline: none;
}
.serie-select-saison:focus { border-color: color-mix(in srgb, var(--theme-accent, #ff3b4e) 50%, transparent); }
.serie-select-saison option { background: #0d0d16; }

.serie-episodes-liste { display: flex; flex-direction: column; gap: 2px; }

.episode {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 12px;
    border-radius: 12px;
    cursor: pointer;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.16s ease;
}
.episode:first-child { border-top: none; }
.episode:hover { background: rgba(255, 255, 255, 0.045); }
/* Un épisode déjà vu s'efface sans disparaître : il doit rester retrouvable
   pour être revu, sans concurrencer ceux qui restent à voir. */
.episode.vu { opacity: 0.55; }
.episode.vu:hover { opacity: 1; }

.episode-vignette {
    position: relative;
    flex: 0 0 168px;
    aspect-ratio: 16 / 9;
    background: #14141c center/cover no-repeat;
    border-radius: 8px;
    overflow: hidden;
}
.episode-lire {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 8, 12, 0.35);
    color: #ffffff;
    opacity: 0;
    transition: opacity 0.16s ease;
}
.episode:hover .episode-lire { opacity: 1; }
.episode-vu-marque {
    position: absolute;
    left: 6px;
    bottom: 6px;
    padding: 2px 7px;
    background: rgba(8, 8, 12, 0.82);
    border-radius: 5px;
    color: #5fd79b;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.episode-corps { flex: 1 1 auto; min-width: 0; padding-top: 2px; }
.episode-ligne { display: flex; align-items: baseline; gap: 10px; }
.episode-num {
    flex-shrink: 0;
    color: #6d757e;
    font-size: 0.95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.episode-ligne h4 {
    flex: 1 1 auto;
    min-width: 0;
    color: #eef2f6;
    font-size: 0.88rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.episode-duree { flex-shrink: 0; color: #7c858f; font-size: 0.7rem; }
.episode-resume {
    margin-top: 5px;
    color: #8a929b;
    font-size: 0.76rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.episode-outils { flex-shrink: 0; display: flex; align-items: center; gap: 4px; padding-top: 2px; }
.episode-bouton-vu,
.episode-bouton-suppr {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 9px;
    color: #5a626b;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}
.episode-bouton-vu:hover { background: rgba(95, 215, 155, 0.12); color: #5fd79b; }
.episode.vu .episode-bouton-vu { color: #5fd79b; }
.episode-bouton-suppr:hover { background: color-mix(in srgb, var(--theme-accent, #ff3b4e) 12%, transparent); color: #ff6070; }

@media (max-width: 760px) {
    /* La vignette passe en bandeau au-dessus du texte : à 375 px, une image de
       168 px à côté du titre ne laisse plus rien pour lire le résumé. */
    .episode { flex-wrap: wrap; gap: 10px; padding: 12px 8px; }
    .episode-vignette { flex: 0 0 116px; }
    .episode-corps { flex: 1 1 140px; }
    .episode-resume { -webkit-line-clamp: 3; font-size: 0.72rem; }
    .episode-ligne h4 { font-size: 0.82rem; white-space: normal; }
    .serie-select-saison { width: 100%; min-width: 0; }
    /* Trois cibles tactiles sur une ligne étroite, c'est l'assurance d'appuyer à
       côté : l'épisode se marque de toute façon tout seul à la lecture. */
    .episode-bouton-vu { display: none; }
}

/* ---- Avancement de lecture ---- */
/* Barre fine au bas de la vignette, comme sur les plateformes de vidéo : elle indique
   où l'on en était sans occuper de place dans la rangée. */
.episode-barre {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.18);
}
.episode-barre > span { display: block; height: 100%; background: var(--theme-accent, #ff3b4e); }

.episode-reprise {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    color: #ff6070;
    font-size: 0.7rem;
    font-weight: 600;
}
.episode-reprise-zero {
    background: transparent;
    border: none;
    color: #7c858f;
    font-family: 'Inter', sans-serif;
    font-size: 0.66rem;
    cursor: pointer;
    text-decoration: underline;
}
.episode-reprise-zero:hover { color: #e8eef4; }

/* ================================================================
   FICHE SÉRIE — BANDEAU
   L'image large occupe toute la largeur et se fond dans la page par
   un dégradé, le texte se pose dessus. L'ancienne version alignait
   une affiche verticale et un bloc de texte dans un cadre étroit :
   l'image ne servait à rien et la largeur de l'écran restait vide.
   ================================================================ */
.fiche-hero {
    position: relative;
    /* Le bloc garde la largeur de la colonne de contenu : c'est SEULEMENT son image
       de fond qui traverse la page (voir .fiche-hero-image ci-dessous). Une première
       version élargissait le bloc lui-même à 100vw ; comme il est dans une colonne
       en flex, il l'étirait avec lui — la liste d'épisodes passait de 1154 à 1410 px
       et ne s'alignait plus sur l'affiche. En ne déplaçant que des éléments
       positionnés en absolu, la mise en page n'est pas touchée du tout. */
    margin: -24px 0 0;
    padding: 0 0 28px;
    min-height: 440px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    isolation: isolate;
}
/* left et width sont réécrits en JavaScript par calerBandeauFiche() pour que l'image
   parte du bord gauche de la fenêtre, alors qu'elle appartient à une colonne décalée
   par la barre latérale. Les valeurs ci-dessous servent de repli tant que la mesure
   n'a pas eu lieu : l'image occupe alors simplement la largeur de la colonne. */
.fiche-hero-image {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: -2;
    background: #0d0d14 center 22% / cover no-repeat;
}
/* Deux dégradés : l'un vers le bas pour que le texte se détache et que l'image
   rejoigne la page sans couture, l'autre vers la droite pour que le texte reste
   lisible même sur une image claire. */
.fiche-hero-voile {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: -1;
    background:
        linear-gradient(to top, #08080c 2%, rgba(8, 8, 12, 0.75) 32%, rgba(8, 8, 12, 0.25) 70%, rgba(8, 8, 12, 0.55) 100%),
        linear-gradient(to right, rgba(8, 8, 12, 0.88) 0%, rgba(8, 8, 12, 0.5) 46%, transparent 78%);
}

.fiche-retour {
    position: absolute;
    top: 18px;
    left: 26px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 13px 7px 9px;
    background: rgba(8, 8, 12, 0.55);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    color: #c8d0d8;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
}
.fiche-retour:hover { color: #ffffff; border-color: rgba(255, 255, 255, 0.22); }

/* Le bandeau est pleine fenêtre, mais son contenu doit rester aligné sur le reste
   de la page : même largeur maximale, même centrage. Sinon le titre se retrouverait
   collé au bord de l'écran, décalé par rapport aux sections qui le suivent. */
.fiche-hero-contenu {
    display: flex;
    align-items: flex-end;
    gap: 26px;
    width: 100%;
    /* Aucun rembourrage latéral : le contenu s'aligne exactement sur la liste
       d'épisodes qui le suit, puisqu'ils partagent la même colonne. */
    padding: 0;
}
.fiche-affiche {
    flex: 0 0 168px;
    width: 168px;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}
.fiche-texte { flex: 1 1 auto; min-width: 0; max-width: 640px; }
.fiche-texte h1 {
    color: #ffffff;
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.8px;
    margin-bottom: 12px;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}
.fiche-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 14px;
    color: #c8d0d8;
    font-size: 0.8rem;
    font-weight: 600;
}
.fiche-note { color: #f0c945; }
.fiche-pastille {
    padding: 4px 11px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.fiche-resume {
    color: #d5dbe1;
    font-size: 0.88rem;
    line-height: 1.6;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

.fiche-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fiche-btn-lecture {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 46px;
    padding: 0 28px;
    background: var(--theme-accent, #ff3b4e);
    border: none;
    border-radius: 30px;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.16s ease, transform 0.16s ease;
}
.fiche-btn-lecture:hover { background: #ff5566; transform: translateY(-1px); }
.fiche-btn-second {
    height: 46px;
    padding: 0 20px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 30px;
    color: #e8eef4;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}
.fiche-btn-second:hover { background: rgba(255, 255, 255, 0.2); }
.fiche-btn-danger { color: #ff8a8a; border-color: color-mix(in srgb, var(--theme-accent, #ff3b4e) 35%, transparent); }
.fiche-btn-danger:hover { background: color-mix(in srgb, var(--theme-accent, #ff3b4e) 22%, transparent); color: #ffffff; }

@media (max-width: 900px) {
    .fiche-hero { margin: -16px 0 0; min-height: 360px; padding-bottom: 20px; }
    .fiche-hero-contenu { padding: 0; gap: 16px; }
    .fiche-affiche { flex-basis: 108px; width: 108px; }
    .fiche-texte h1 { font-size: 1.6rem; }
}

@media (max-width: 620px) {
    /* L'affiche disparaît : à côté d'elle il ne reste plus assez de place pour le
       titre et le résumé, et l'image large du fond joue déjà ce rôle. */
    .fiche-affiche { display: none; }
    .fiche-hero { min-height: 300px; }
    .fiche-texte h1 { font-size: 1.45rem; }
    .fiche-resume { font-size: 0.8rem; -webkit-line-clamp: 3; }
    .fiche-btn-lecture { flex: 1 1 100%; justify-content: center; }
    .fiche-btn-second { flex: 1 1 auto; }
    .fiche-retour { top: 12px; left: 16px; }
}

/* ================================================================
   PHOTO DE PROFIL
   ================================================================ */
.photo-modal {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(4, 4, 8, 0.72);
    backdrop-filter: blur(4px);
}
.photo-modal.ouvert { display: flex; }
.photo-boite {
    width: 100%;
    max-width: 480px;
    background: #0d0d14;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    overflow: hidden;
}
.photo-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.photo-tete h2 { color: #f4f7fa; font-size: 0.95rem; font-weight: 700; }
.photo-fermer {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none; border-radius: 9px;
    color: #7c858f; cursor: pointer;
}
.photo-fermer:hover { background: rgba(255, 255, 255, 0.07); color: #ffffff; }

.photo-corps { display: flex; gap: 18px; padding: 20px 18px; align-items: flex-start; }
/* Aperçu rond : c'est la forme sous laquelle la photo apparaîtra dans l'en-tête,
   autant la montrer telle quelle plutôt qu'en carré. */
.photo-apercu {
    flex: 0 0 96px;
    width: 96px; height: 96px;
    display: flex; align-items: center; justify-content: center;
    background: #14141c center/cover no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: #7c858f;
    font-size: 2rem;
    font-weight: 800;
    overflow: hidden;
}
.photo-controles { flex: 1 1 auto; min-width: 0; }
.photo-aide { color: #838c95; font-size: 0.73rem; line-height: 1.5; margin-bottom: 12px; }

.photo-choisir { display: inline-block; }
/* Le champ natif est masqué mais reste atteignable au clavier : c'est le label qui
   est stylé, et cliquer dessus ouvre bien le sélecteur de fichiers. */
.photo-choisir input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.photo-choisir span {
    display: inline-block;
    height: 38px; line-height: 38px;
    padding: 0 18px;
    background: var(--theme-accent, #ff3b4e);
    border-radius: 10px;
    color: #ffffff;
    font-size: 0.79rem;
    font-weight: 700;
    cursor: pointer;
}
.photo-choisir span:hover { background: #ff5566; }
.photo-choisir input:focus-visible + span { outline: 2px solid var(--theme-accent, #ff3b4e); outline-offset: 2px; }

.photo-retirer {
    display: block;
    margin-top: 10px;
    background: transparent; border: none;
    color: #7c858f;
    font-family: 'Inter', sans-serif; font-size: 0.73rem;
    cursor: pointer; text-decoration: underline;
}
.photo-retirer:hover { color: #ff6070; }
.photo-message { margin-top: 10px; min-height: 18px; color: #8a929b; font-size: 0.73rem; }
.photo-erreur { color: #ff6070; }
.photo-succes { color: #5fd79b; }

/* Pastille de l'en-tête quand une photo est définie. */
.compte-avatar-photo {
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

@media (max-width: 620px) {
    .photo-corps { flex-direction: column; align-items: center; text-align: center; }
    .photo-controles { width: 100%; }
}

/* ---- Champ de série à complétion (onglet Épisode) ---- */
.ajout-combo { position: relative; margin: 14px 16px 0; }
.ajout-combo .ajout-chercher { margin: 0; }
.ajout-suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 20;
    display: none;
    max-height: 280px;
    overflow-y: auto;
    background: #10101a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.5);
}
.ajout-suggestions.ouverte { display: block; }
.ajout-suggestion {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    color: #e8eef4;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    text-align: left;
    cursor: pointer;
}
.ajout-suggestion span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ajout-suggestion em { flex-shrink: 0; color: #6d757e; font-size: 0.68rem; font-style: normal; }
/* .survolee suit les flèches du clavier ; :hover suit la souris. Les deux doivent
   se ressembler, sinon on ne sait plus laquelle des deux fait foi. */
.ajout-suggestion:hover,
.ajout-suggestion.survolee { background: color-mix(in srgb, var(--theme-accent, #ff3b4e) 16%, transparent); color: #ffffff; }
.ajout-suggestion-vide { padding: 12px 14px; color: #6d757e; font-size: 0.76rem; }


/* ================================================================
   ALIGNEMENT DE L'EN-TÊTE SUR LE CONTENU
   Le contenu est plafonné à 1800 px et centré ; l'en-tête, lui, allait d'un bord
   à l'autre. Sur un écran large, le logo se retrouvait tout à gauche pendant que
   le contenu commençait 200 px plus loin — c'est ce désaccord qui donnait
   l'impression que tout était décalé vers la droite.
   La même formule de centrage est reprise ici : au-delà de 1800 px, l'en-tête
   prend le même retrait supplémentaire que le contenu ; en dessous, les deux
   gardent simplement leurs 32 px de marge.
   On utilise 100% (largeur du corps) et non 100vw, qui inclut la barre de
   défilement et décalerait l'en-tête de quelques pixels.
   ================================================================ */
/* Limité aux écrans larges : ce bloc se trouve après la mise en page téléphone dans
   le fichier, et à spécificité égale c'est l'ordre qui tranche — sans cette borne il
   écraserait la marge de 14 px prévue pour les petits écrans. */
@media (min-width: 761px) {
    header {
        padding-left: max(32px, calc((100% - 1800px) / 2 + 32px));
        padding-right: max(32px, calc((100% - 1800px) / 2 + 32px));
    }
}

/* ================================================================
   GROS CHIFFRES DU CLASSEMENT
   Le rang s'écrit en très grand derrière l'affiche et déborde à gauche.
   Contour plutôt que remplissage plein : le chiffre reste lisible sur
   une affiche claire comme sur une sombre, sans voiler l'image.
   ================================================================ */
#popularGrid {
    /* La grille doit laisser sortir les chiffres, et reserver leur place : a gauche
       pour le premier, et entre les colonnes pour les suivants, sinon chaque chiffre
       mordrait sur l'affiche de sa voisine. */
    overflow: visible;
    padding-left: 46px;
    column-gap: 50px;
}
.carte-classee { position: relative; overflow: visible; }
.rang-chiffre {
    position: absolute;
    left: -36px;
    /* Cale sur le bas de l'AFFICHE, pas de la carte : sous la carte entiere, le
       chiffre retombait sur le titre et le resume. Zero et pas une valeur negative :
       le pave du glyphe depasse deja de quelques pixels et mordrait sur le titre. */
    bottom: 0;
    /* z-index 0 : au-dessus du fond de l'affiche, sous l'image elle-meme (z-index 1).
       Le chiffre passe donc derriere l'affiche et n'en cache aucune partie. */
    z-index: 0;
    font-family: 'Inter', sans-serif;
    font-size: 6.2rem;
    font-weight: 900;
    line-height: 0.78;
    letter-spacing: -6px;
    color: #08080c;
    -webkit-text-stroke: 3px color-mix(in srgb, var(--theme-accent, #ff3b4e) 90%, transparent);
    text-stroke: 3px color-mix(in srgb, var(--theme-accent, #ff3b4e) 90%, transparent);
    pointer-events: none;
    user-select: none;
}
/* Le dixieme a deux chiffres : il deborde davantage et doit se serrer un peu. */
.rang-chiffre:not(:empty) { white-space: nowrap; }

@media (max-width: 760px) {
    /* En rangee horizontale, les cartes font 132 px : un chiffre de 6,2rem
       recouvrirait la carte precedente. */
    #page-home .grid#popularGrid { padding-left: 30px; column-gap: 32px; }
    .rang-chiffre {
        font-size: 3.6rem;
        left: -22px;
        bottom: 0;
        letter-spacing: -3px;
        -webkit-text-stroke-width: 2px;
    }
}

/* ================================================================
   PANNEAU AU SURVOL DES CARTES SUGGEREES
   Le panneau est ancre au bas de L'AFFICHE, pas de la carte : ancre a
   la carte entiere, il recouvrait le titre et debordait de la vignette.
   Le titre reste donc lisible sous l'affiche et le panneau n'ajoute que
   ce qui manque : note, annee, genre et resume.
   @media (hover: hover) : sur un ecran tactile il n'y a pas de survol,
   et un appui laisserait la carte figee en etat agrandi.
   ================================================================ */
.carte-suggestion .card-media {
    position: relative;
    /* visible : le chiffre du classement sort a gauche de l'affiche. L'arrondi est
       donc porte par l'image et par le panneau eux-memes, plus par un rognage. */
    overflow: visible;
    border-radius: 12px;
}
.carte-suggestion .card-media > img {
    position: relative;
    z-index: 1;
    border-radius: 12px;
}
.carte-survol {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    padding: 40px 11px 11px;
    background: linear-gradient(to top, #07070c 26%, rgba(7, 7, 12, 0.88) 58%, transparent);
    border-radius: 0 0 12px 12px;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.carte-survol-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 9px;
    margin-bottom: 5px;
    color: #c8d0d8;
    font-size: 0.66rem;
    font-weight: 700;
}
.carte-survol-note { color: #f0c945; }
.carte-survol p {
    color: #a8b0b8;
    font-size: 0.66rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (hover: hover) {
    .carte-suggestion:hover .carte-survol {
        opacity: 1;
        transform: none;
    }
    .carte-classee {
        transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
        transform-origin: center bottom;
    }
    .carte-classee:hover {
        transform: scale(1.05);
        /* Passe devant ses voisines, y compris devant leurs gros chiffres. */
        z-index: 6;
    }
    .carte-classee:hover .card-media { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6); }
    /* Le chiffre s'efface sous la carte survolee : il chevauchait le panneau. */
    .carte-classee:hover .rang-chiffre { opacity: 0; transition: opacity 0.16s ease; }
}

@media (prefers-reduced-motion: reduce) {
    .carte-classee:hover { transform: none; }
    .carte-survol { transition: none; }
}

/* ================================================================
   FICHE FILM — BOUTONS SECONDAIRES DANS LE BANDEAU
   La fiche film reprend le bandeau de la fiche serie, mais garde ses
   propres boutons (vote, ma liste, moderation) parce que leur etat
   actif passe par des classes que le script bascule. On aligne donc
   seulement leur gabarit sur celui des boutons du bandeau, sans
   toucher a leurs couleurs ni a leurs etats.
   ================================================================ */
.fiche-actions .btn-vote,
.fiche-actions .btn-list,
.fiche-actions .btn-edit,
.fiche-actions .btn-del {
    height: 46px;
    min-height: 46px;
    margin: 0;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.fiche-actions .btn-vote { width: 46px; padding: 0; }
.fiche-actions .btn-vote svg { width: 19px; height: 19px; }
.fiche-actions .btn-list,
.fiche-actions .btn-edit,
.fiche-actions .btn-del { padding: 0 20px; }

@media (max-width: 620px) {
    /* Le bouton principal prend toute la largeur, les autres se partagent la ligne
       suivante : a cinq sur une seule ligne, ils devenaient illisibles. */
    .fiche-actions .btn-list,
    .fiche-actions .btn-edit,
    .fiche-actions .btn-del { flex: 1 1 auto; }
}

/* ================================================================
   PASTILLE "BIENTOT"
   Remplace la mention "Sans lien de lecture", qui etait une note de
   gestion affichee a tout le monde et occupait toute la largeur de
   l'affiche. 124 des 177 films sont dans ce cas : la pastille doit
   informer sans defigurer la vignette.
   ================================================================ */
.badge-bientot {
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 3;
    padding: 4px 9px;
    background: rgba(10, 10, 16, 0.82);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(240, 201, 69, 0.4);
    border-radius: 30px;
    color: #f0c945;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    pointer-events: none;
}

/* Bouton de lecture d'un titre pas encore disponible : il reste lisible
   mais annonce clairement qu'il n'y a rien a lancer. */
.fiche-btn-indispo,
.fiche-btn-indispo:hover {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #9aa2aa;
    cursor: not-allowed;
    transform: none;
}

/* ================================================================
   RESULTAT DE RECHERCHE DEJA AU CATALOGUE
   Rien ne distinguait un titre deja importe d'un nouveau dans la
   liste de resultats : c'est ainsi que le catalogue a recu deux fois
   le meme film, et trois fois la meme serie.
   ================================================================ */
.ajout-vignette-doublon { opacity: 0.55; }
.ajout-vignette-doublon:hover { opacity: 0.85; }
.ajout-vignette-image { position: relative; }
.ajout-vignette-marque {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 4px 9px;
    background: rgba(8, 8, 12, 0.88);
    border: 1px solid rgba(240, 201, 69, 0.45);
    border-radius: 30px;
    color: #f0c945;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ================================================================
   BANDEAU D ECHEC DE CHARGEMENT
   Une panne du serveur se traduisait par une page entierement vide,
   sans aucun message : impossible de savoir s il fallait attendre,
   recharger, ou se reconnecter.
   ================================================================ */
.bandeau-hors-ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 18px;
    padding: 13px 16px;
    background: color-mix(in srgb, var(--theme-accent, #ff3b4e) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--theme-accent, #ff3b4e) 30%, transparent);
    border-radius: 12px;
    color: #ffd0d4;
    font-size: 0.8rem;
    font-weight: 600;
}
.bandeau-reessayer {
    padding: 8px 16px;
    background: var(--theme-accent, #ff3b4e);
    border: none;
    border-radius: 30px;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
}
.bandeau-reessayer:hover:not(:disabled) { background: #ff5566; }
.bandeau-reessayer:disabled { opacity: 0.6; cursor: wait; }

/* ================================================================
   ETAT VIDE
   Remplace les phrases grises isolees (\u00ab Aucun film. \u00bb, \u00ab Watchlist
   vide. \u00bb) : elles n expliquaient ni la cause ni la suite, et se
   perdaient en haut a gauche d une page par ailleurs vide.
   ================================================================ */
.etat-vide {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 54px 24px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.09);
    border-radius: 16px;
}
.etat-vide-icone { width: 42px; height: 42px; color: #3d4752; }
.etat-vide h4 {
    color: #e8eef4;
    font-size: 0.98rem;
    font-weight: 700;
}
.etat-vide p {
    max-width: 380px;
    color: #8b939b;
    font-size: 0.8rem;
    line-height: 1.55;
}
.etat-vide-action {
    margin-top: 6px;
    padding: 11px 22px;
    background: var(--theme-accent, #ff3b4e);
    border: none;
    border-radius: 30px;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}
.etat-vide-action:hover { background: #ff5566; }

/* ================================================================
   LECTEUR NATIF
   Utilise quand le lien pointe vers un FICHIER video. Les liens qui
   pointent vers la page d un hebergeur restent dans l iframe : le
   navigateur interdit d atteindre le contenu d un autre domaine, donc
   aucun bouton a nous ne peut y agir.
   ================================================================ */
.lecteur {
    position: absolute;
    inset: 0;
    background: #000;
    overflow: hidden;
}
.lecteur video {
    width: 100%;
    height: 100%;
    display: block;
    background: #000;
    object-fit: contain;
}

/* Zone de clic pleine image : jouer/pause au clic, plein ecran au double-clic.
   Sous la barre de commandes, pour ne jamais lui voler un clic. */
.lecteur-zone {
    position: absolute;
    inset: 0 0 76px 0;
    width: 100%;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

/* Barre de commandes. Elle se retire pendant la lecture et revient au moindre
   mouvement : une barre permanente ampute l image en 16/9 sur un portable. */
.lecteur-barres {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 34px 14px 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 18%, rgba(0, 0, 0, 0.45) 62%, transparent);
    opacity: 1;
    transform: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.lecteur-masque .lecteur-barres {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}
.lecteur-masque { cursor: none; }

/* ---- Barre de progression ---- */
.lecteur-progression {
    position: relative;
    height: 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
    touch-action: none;
}
.lecteur-progression::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255, 255, 255, 0.24);
    border-radius: 3px;
    transition: height 0.14s ease;
}
.lecteur-tampon,
.lecteur-jouee {
    position: absolute;
    left: 0;
    height: 4px;
    border-radius: 3px;
    transition: height 0.14s ease;
}
/* Ce qui est deja telecharge : sans cette indication, une video qui se remplit
   lentement passe pour une video bloquee. */
.lecteur-tampon { background: rgba(255, 255, 255, 0.34); width: 0; }
.lecteur-jouee { background: var(--theme-accent, #ff3b4e); width: 0; }
.lecteur-tete {
    position: absolute;
    left: 0;
    width: 13px;
    height: 13px;
    margin-left: -6.5px;
    border-radius: 50%;
    background: var(--theme-accent, #ff3b4e);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.14s ease;
    pointer-events: none;
}
.lecteur-progression:hover::before,
.lecteur-progression:hover .lecteur-tampon,
.lecteur-progression:hover .lecteur-jouee,
.lecteur-progression.saisie::before,
.lecteur-progression.saisie .lecteur-tampon,
.lecteur-progression.saisie .lecteur-jouee { height: 6px; }
.lecteur-progression:hover .lecteur-tete,
.lecteur-progression:focus-visible .lecteur-tete,
.lecteur-progression.saisie .lecteur-tete { opacity: 1; }

/* Horodatage suivant le curseur : savoir ou l on va AVANT de lacher. */
.lecteur-infobulle {
    position: absolute;
    bottom: 20px;
    transform: translateX(-50%);
    padding: 3px 7px;
    background: rgba(8, 8, 12, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 5px;
    color: #ffffff;
    font-size: 0.66rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}
.lecteur-progression:hover .lecteur-infobulle,
.lecteur-progression.saisie .lecteur-infobulle { opacity: 1; }

/* ---- Rangee de boutons ---- */
.lecteur-commandes {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}
.lecteur-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #ffffff;
    cursor: pointer;
    transition: background 0.14s ease;
}
.lecteur-btn:hover { background: rgba(255, 255, 255, 0.14); }
.lecteur-btn svg { width: 22px; height: 22px; fill: currentColor; }
.lecteur-saut { width: 42px; font-size: 0.7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.lecteur-vitesse {
    height: 34px;
    min-width: 58px;
    padding: 0 7px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 7px;
    background: rgba(15, 15, 20, 0.82);
    color: #f3f5f7;
    font: 600 0.72rem 'Inter', sans-serif;
    cursor: pointer;
}
.lecteur-vitesse:focus-visible { outline: 2px solid var(--theme-accent, #ff3b4e); outline-offset: 2px; }
.lecteur-espace { flex: 1 1 auto; }

.lecteur-temps {
    margin-left: 6px;
    color: #e8eef4;
    font-size: 0.8rem;
    font-weight: 600;
    /* Chiffres de largeur fixe : sans eux la ligne tressaute a chaque seconde. */
    font-variant-numeric: tabular-nums;
}

/* ---- Volume ---- */
.lecteur-volume { display: flex; align-items: center; }
.lecteur-glissiere {
    width: 0;
    height: 4px;
    margin-left: 0;
    opacity: 0;
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    cursor: pointer;
    transition: width 0.18s ease, opacity 0.18s ease, margin 0.18s ease;
}
/* La glissiere se deplie au survol : toujours visible, elle occupe une place
   qu il vaut mieux laisser a l image sur un petit ecran. */
.lecteur-volume:hover .lecteur-glissiere,
.lecteur-glissiere:focus-visible { width: 72px; opacity: 1; margin-left: 4px; }
.lecteur-glissiere::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
}
.lecteur-glissiere::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: none;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
}

/* ---- Attente et panne ---- */
.lecteur-chargement {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.lecteur-occupe .lecteur-chargement { display: flex; }
.lecteur-chargement span {
    width: 46px;
    height: 46px;
    border: 3px solid rgba(255, 255, 255, 0.22);
    border-top-color: var(--theme-accent, #ff3b4e);
    border-radius: 50%;
    animation: lecteurTourne 0.9s linear infinite;
}
@keyframes lecteurTourne { to { transform: rotate(360deg); } }

.lecteur-erreur {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 420px;
    padding: 16px 20px;
    background: rgba(8, 8, 12, 0.9);
    border: 1px solid color-mix(in srgb, var(--theme-accent, #ff3b4e) 40%, transparent);
    border-radius: 12px;
    color: #ffd0d4;
    font-size: 0.84rem;
    line-height: 1.5;
    text-align: center;
}

@media (max-width: 620px) {
    .lecteur-barres { padding: 28px 8px 8px; }
    .lecteur-zone { inset: 0 0 68px 0; }
    .lecteur-btn { width: 36px; height: 36px; }
    .lecteur-btn svg { width: 20px; height: 20px; }
    .lecteur-saut { display: none; }
    .lecteur-temps { font-size: 0.72rem; margin-left: 2px; }
    /* Au doigt il n y a pas de survol : la glissiere resterait inatteignable. */
    .lecteur-volume .lecteur-glissiere { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lecteur-barres { transition: none; }
    .lecteur-chargement span { animation-duration: 2.4s; }
}

/* Choix de la source dans le lecteur. Pose en haut a gauche, loin de la
   fermeture et de la navigation d episodes qui occupent la droite. */
.choix-lecteur {
    position: fixed;
    top: 18px;
    left: 24px;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 8px;
}
.choix-lecteur label {
    color: #8b939b;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.choix-lecteur select {
    padding: 8px 12px;
    background: rgba(8, 8, 12, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
}
.choix-lecteur select:hover { border-color: rgba(255, 255, 255, 0.35); }

@media (max-width: 620px) {
    .choix-lecteur { top: 14px; left: 14px; gap: 5px; }
    .choix-lecteur label { display: none; }
    .choix-lecteur select { padding: 6px 9px; font-size: 0.7rem; }
}

/* ================================================================
   CARTE SERIE
   Les series reprennent la carte des films (.card). Il ne reste donc
   ici que ce qui leur est propre : la carte entiere est cliquable, et
   le nombre d episodes s ajoute sous le genre.
   ================================================================ */
.carte-serie { cursor: pointer; }
.serie-compte-episodes {
    margin-top: 1px;
    color: #5f6873;
    font-size: 0.62rem;
    font-weight: 600;
}

/* Mention « facultatif » a cote d un intitule de champ, pour dire ce qui peut
   rester vide sans avoir a essayer pour le decouvrir. */
.ajout-facultatif {
    margin-left: 5px;
    color: #6a737d;
    font-size: 0.56rem;
    font-weight: 600;
    font-style: normal;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* ================================================================
   FICHIERS VIDEO HEBERGES SUR LE SERVEUR
   Liste depliable sous le champ du lien : un clic pose l adresse du
   fichier au lieu de la retaper.
   ================================================================ */
.ajout-fichiers { margin-top: 6px; }
.ajout-fichiers-btn {
    padding: 5px 11px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 30px;
    color: #a8b0b8;
    font-family: 'Inter', sans-serif;
    font-size: 0.64rem;
    font-weight: 600;
    cursor: pointer;
}
.ajout-fichiers-btn:hover { background: rgba(255, 255, 255, 0.12); color: #e8eef4; }
.ajout-fichiers-liste { display: none; }
.ajout-fichiers-liste.ouverte {
    display: block;
    max-height: 168px;
    overflow-y: auto;
    margin-top: 7px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9px;
    background: rgba(8, 8, 12, 0.5);
}
.ajout-fichier {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 8px 11px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #d5dbe1;
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    text-align: left;
    cursor: pointer;
}
.ajout-fichier:last-child { border-bottom: none; }
.ajout-fichier:hover { background: color-mix(in srgb, var(--theme-accent, #ff3b4e) 14%, transparent); color: #ffffff; }
.ajout-fichier em { flex-shrink: 0; color: #6a737d; font-style: normal; font-size: 0.62rem; }
.ajout-fichiers-vide { padding: 10px 11px; color: #6a737d; font-size: 0.66rem; }
.ajout-fichiers-vide code { color: #a8b0b8; }

/* Duree du film dans la ligne d informations de la fiche. */
.fiche-duree { color: #c8d0d8; font-weight: 600; }

/* ================================================================
   VOTE SUR LES DEMANDES
   Une voix par personne, reprise par un second clic. Le compte est
   ce qui permet de trier par « les plus demandes » : sans lui, la
   file d attente etait un simple ordre d arrivee.
   ================================================================ */
.demandes-tri { display: flex; gap: 6px; margin-left: auto; }
.demande-vote {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 30px;
    color: #a8b0b8;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.demande-vote:hover { background: rgba(255, 255, 255, 0.12); color: #e8eef4; }
.demande-vote.a-vote {
    background: color-mix(in srgb, var(--theme-accent, #ff3b4e) 16%, transparent);
    border-color: color-mix(in srgb, var(--theme-accent, #ff3b4e) 50%, transparent);
    color: #ff7285;
}
.demande-vote.a-vote:hover { background: color-mix(in srgb, var(--theme-accent, #ff3b4e) 24%, transparent); }

@media (max-width: 620px) {
    .demandes-tri { width: 100%; margin: 6px 0 0; }
    .demande-vote { padding: 5px 9px; font-size: 0.66rem; }
}

/* ================================================================
   VERSIONS (VF / VOSTFR)
   Deduites des etiquettes posees devant chaque lien de lecture.
   ================================================================ */
.fiche-versions { display: inline-flex; gap: 6px; }
.fiche-version {
    padding: 3px 9px;
    background: rgba(46, 204, 113, 0.14);
    border: 1px solid rgba(46, 204, 113, 0.32);
    border-radius: 6px;
    color: #57d98b;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Aide de saisie sous le champ du lien. Le placeholder ne se lit pas : il
   disparait des qu on tape, et personne ne decouvre la syntaxe. */
.ajout-aide-lien {
    margin: 5px 0 0;
    color: #6a737d;
    font-size: 0.64rem;
    line-height: 1.6;
}
.ajout-aide-lien strong { color: #a8b0b8; font-weight: 700; }
.ajout-aide-lien code {
    padding: 1px 5px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 4px;
    color: #c8d0d8;
    font-size: 0.62rem;
}

/* ================================================================
   ASSISTANT DE SUGGESTION
   Bulle repliee en bas a gauche. Les trois anciennes pop-ups qui occupaient
   ce coin ont ete retirees : l assistant y est desormais seul.
   ================================================================ */
.assistant { position: fixed; bottom: 20px; left: 20px; z-index: 19000; }

.assistant-bulle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    background: rgba(13, 13, 22, 0.94);
    backdrop-filter: blur(8px);
    border: 1px solid color-mix(in srgb, var(--theme-accent, #ff3b4e) 35%, transparent);
    border-radius: 30px;
    color: #e8eef4;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: border-color 0.16s ease, transform 0.16s ease;
}
.assistant-bulle:hover { border-color: color-mix(in srgb, var(--theme-accent, #ff3b4e) 70%, transparent); transform: translateY(-2px); }
.assistant-bulle svg { color: #ff5566; flex-shrink: 0; }

.assistant-panneau {
    width: 300px;
    max-width: calc(100vw - 40px);
    margin-bottom: 10px;
    background: #0d0d16;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65);
    overflow: hidden;
}
.assistant-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    color: #e8eef4;
    font-size: 0.76rem;
    font-weight: 700;
}
.assistant-fermer {
    display: inline-flex;
    padding: 4px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #6a737d;
    cursor: pointer;
}
.assistant-fermer:hover { color: #e8eef4; background: rgba(255, 255, 255, 0.08); }

.assistant-corps { display: flex; gap: 11px; padding: 13px 14px; }
.assistant-affiche {
    flex: 0 0 62px;
    width: 62px;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 7px;
    background: #101018;
}
.assistant-infos { min-width: 0; }
.assistant-infos h5 {
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 4px;
}
.assistant-meta { color: #8b939b; font-size: 0.66rem; font-weight: 600; margin-bottom: 5px; }
.assistant-raison {
    color: #9aa2aa;
    font-size: 0.66rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.assistant-vide { padding: 16px 14px; color: #8b939b; font-size: 0.72rem; line-height: 1.5; }

.assistant-pied {
    display: flex;
    gap: 8px;
    padding: 0 14px 14px;
}
.assistant-btn-second,
.assistant-btn-principal {
    flex: 1 1 0;
    padding: 9px 10px;
    border-radius: 30px;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
}
.assistant-btn-second {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #c8d0d8;
}
.assistant-btn-second:hover { background: rgba(255, 255, 255, 0.15); color: #ffffff; }
.assistant-btn-principal { background: var(--theme-accent, #ff3b4e); border: none; color: #ffffff; }
.assistant-btn-principal:hover { background: #ff5566; }

@media (max-width: 620px) {
    /* Sur mobile la barre de navigation basse occupe le bord : on remonte. */
    .assistant { bottom: 14px; left: 14px; }
    .assistant-bulle { padding: 9px 13px; font-size: 0.72rem; }
    .assistant-panneau { width: calc(100vw - 28px); }
}

@media (prefers-reduced-motion: reduce) {
    .assistant-bulle:hover { transform: none; }
}

/* ================================================================
   ETAT DU SITE + PULSATION DES PUCES
   Le point ne clignote pas en tout ou rien : il respire. Une pulsation
   douce se remarque sans agresser, la ou un clignotement franc devient
   vite fatigant sur une page qu on garde ouverte.
   ================================================================ */
@keyframes pulsationPoint {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 currentColor; opacity: 1; }
    50%      { transform: scale(1.15); box-shadow: 0 0 9px 1px currentColor; opacity: 0.75; }
}

.statut-site {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: 14px;
    padding: 4px 11px 4px 9px;
    border-radius: 30px;
    border: 1px solid rgba(46, 204, 113, 0.35);
    background: rgba(46, 204, 113, 0.1);
    color: #3ddc84;
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}
.statut-point {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    animation: pulsationPoint 2.2s ease-in-out infinite;
}
/* Le catalogue ne repond plus : meme pastille, autre couleur et autre mot. */
.statut-site.hors-ligne {
    border-color: color-mix(in srgb, var(--theme-accent, #ff3b4e) 40%, transparent);
    background: color-mix(in srgb, var(--theme-accent, #ff3b4e) 12%, transparent);
    color: #ff6a7d;
}

/* Maintenance : ambre, et non rouge. Le rouge dit « quelque chose est casse »,
   alors qu'une maintenance est une fermeture voulue. La distinction compte pour
   l'admin, qui est le seul a voir cette pastille pendant une maintenance. */
.statut-site.maintenance {
    border-color: rgba(240, 201, 69, 0.45);
    background: rgba(240, 201, 69, 0.14);
    color: #f0c945;
}

/* La puce des badges de role respire de la meme facon, pour que les deux
   indicateurs se ressemblent au lieu de se concurrencer. */
#userBadge::before { animation: pulsationPoint 2.6s ease-in-out infinite; }

@media (max-width: 760px) {
    /* En-tete etroit : on garde le point, qui porte l information, et on retire
       le mot qui prendrait la place du logo.

       order: 1 est indispensable. A ce palier, .header-top-row passe en
       display:contents : ses enfants deviennent enfants directs de l'en-tete, ou
       le logo est en order 1 et les actions en order 2. Sans order explicite, la
       pastille reste a 0 et se retrouve AVANT le logo.

       La poussee margin-right:auto passe du logo a la pastille : elle doit
       s'appliquer au dernier element du groupe de gauche, sinon elle separerait
       le logo de sa pastille. */
    .statut-site {
        order: 1;
        margin-left: 9px;
        margin-right: auto;
        padding: 4px;
        border-radius: 50%;
    }
    .site-logo-text { margin-right: 0; }
    .statut-texte { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .statut-point, #userBadge::before { animation: none; }
}

/* ===== ESPACE DEMANDES ===== */
#page-demandes { width: 100%; }
#page-demandes > .section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
#page-demandes > .section-title h2 { font-size: 1.2rem; }
#countDemandes {
    padding: 4px 9px;
    border: 1px solid #262630;
    border-radius: 20px;
    color: #a8b0b8 !important;
    background: #111117;
    font-size: 0.75rem !important;
    white-space: nowrap;
}
#page-demandes > p { max-width: none !important; margin: 0 0 18px !important; font-size: 0.82rem !important; color: #86919d !important; }
#page-demandes .demandes-tri { margin-left: auto; }
#page-demandes > .demande-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
    gap: 14px;
    width: 100%;
    max-width: none;
    margin-bottom: 18px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}
#page-demandes .demande-divider { display: none; }
#page-demandes .demande-step {
    min-width: 0;
    padding: 16px;
    background: #101017;
    border: 1px solid #20202a;
    border-radius: 8px;
}
#page-demandes .demande-step-body h3 {
    margin: 2px 0 12px;
    color: #dfe4e9;
    font-size: 0.82rem;
    text-transform: uppercase;
}
#page-demandes .demande-row { flex-wrap: nowrap; }
#page-demandes .demande-row input { min-width: 0; min-height: 42px; font-size: 0.84rem; }
#page-demandes .demande-btn-primary,
#page-demandes .demande-btn-secondary { flex: 0 0 auto; min-height: 42px; padding-inline: 18px; font-size: 0.76rem; }
#page-demandes #demandeSearchResults:not(:empty) { display: grid; gap: 6px; }
#page-demandes > .demande-filters {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    max-width: none;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #1b1b24;
}
#page-demandes .demande-filter { padding: 8px 13px; font-size: 0.75rem; }
#page-demandes .demandes-tri .filtre-pastille { min-height: 36px; font-size: 0.75rem; }
#page-demandes #demandesList {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: none !important;
    margin-top: 0 !important;
}
#page-demandes .demande-item {
    width: 100%;
    min-height: 72px;
    margin: 0;
    padding: 10px 14px;
    gap: 14px;
    border: 1px solid #1d1d27;
    border-left: 3px solid #33333e;
    border-radius: 8px;
    background: #0f0f15;
}
#page-demandes .demande-item > div:first-child { flex: 1 1 auto; min-width: 0; gap: 12px !important; }
#page-demandes .demande-item > div:last-child { flex: 0 0 auto; flex-wrap: wrap; }
#page-demandes .demande-item > div:first-child img { width: 40px !important; height: 56px !important; }
#page-demandes .demande-item > div:first-child span:not(.premium-badge) { color: #8994a0 !important; font-size: 0.74rem !important; }
#page-demandes .demande-item > div:last-child > span { font-size: 0.76rem !important; font-weight: 600; }
#page-demandes .demande-item strong { color: #e8edf2; font-size: 0.88rem; }
#page-demandes .demande-item select { min-height: 36px; padding: 6px 28px 6px 10px; font-size: 0.75rem; }
#page-demandes .demande-item .demande-vote { min-height: 36px; font-size: 0.76rem; }
#page-demandes .demande-item .btn-del-demande { min-width: 36px; min-height: 36px; font-size: 0.72rem; }
#page-demandes .demande-item .btn-play-demande { min-height: 34px; padding: 6px 12px; font-size: 0.72rem; }
body:has(#page-demandes.active) .fond-anime,
body:has(#page-demandes.active) .triangles-fond { display: none; }

@media (max-width: 900px) {
    #page-demandes > .demande-panel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
    #page-demandes > .section-title { flex-wrap: wrap; }
    #page-demandes .demandes-tri { width: 100%; margin: 4px 0 0; }
    #page-demandes > .demande-panel { padding: 0; }
    #page-demandes .demande-step { padding: 12px; }
    #page-demandes .demande-item { align-items: flex-start; flex-direction: column; }
    #page-demandes .demande-item > div:last-child { width: 100%; justify-content: flex-start; }
    #page-demandes > .demande-filters { overflow-x: auto; flex-wrap: nowrap; }
    #page-demandes .demande-filter { flex: 0 0 auto; }
}

/* ===== CONSOLE ADMIN ===== */
#page-admin { width: 100%; }
.admin-console { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.admin-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #20202a;
}
.admin-surtitre { margin: 0 0 5px; color: #8994a0; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; }
.admin-entete h2 { color: #f1f3f5; font-size: 1.35rem; font-weight: 700; }
.admin-entete > div > p:last-child { margin-top: 5px; color: #8994a0; font-size: 0.78rem; }
.admin-catalogue { min-height: 38px; padding: 0 14px; border: 1px solid #34343e; border-radius: 7px; background: #15151c; color: #e2e6eb; font-size: 0.75rem; font-weight: 600; cursor: pointer; }
.admin-catalogue:hover { background: #20202a; border-color: #555560; }
.admin-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.admin-metric { display: grid; gap: 4px; min-width: 0; padding: 14px 16px; border: 1px solid #24242e; border-radius: 8px; background: #101016; }
.admin-metric > span { color: #aab2bb; font-size: 0.76rem; font-weight: 600; }
.admin-metric strong { color: #f1f3f5; font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.admin-metric small { color: #747f8b; font-size: 0.68rem; }
.admin-workspace { display: grid; grid-template-columns: 204px minmax(0, 1fr); gap: 20px; align-items: start; }
.admin-nav { display: flex; flex-direction: column; gap: 4px; padding-right: 12px; border-right: 1px solid #20202a; }
.admin-nav button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 40px; padding: 0 11px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #9aa4af; font-size: 0.76rem; text-align: left; cursor: pointer; }
.admin-nav button:hover { background: #121219; color: #e5e8ec; }
.admin-nav button.active { border-color: #29232a; background: #17141a; color: #ff6476; }
.admin-nav button span { min-width: 22px; padding: 2px 6px; border-radius: 12px; background: #24212a; color: #d9c8cb; font-size: 0.65rem; text-align: center; }
.admin-contenu { min-width: 0; }
.admin-vue[hidden] { display: none !important; }
.admin-section-entete { display: flex; align-items: center; justify-content: space-between; margin: 1px 0 12px; }
.admin-section-entete h3 { color: #eef0f3; font-size: 0.95rem; }
.admin-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.admin-overview-block { min-width: 0; padding: 15px; border: 1px solid #24242e; border-radius: 8px; background: #101016; }
.admin-overview-block h3 { margin-bottom: 9px; color: #e4e8ed; font-size: 0.8rem; }
.admin-raccourcis { display: flex; flex-direction: column; gap: 6px; }
.admin-raccourci { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 58px; padding: 9px 10px; border: 1px solid #24242e; border-radius: 7px; background: #0d0d13; color: #e4e8ed; text-align: left; cursor: pointer; }
.admin-raccourci:hover { border-color: #44444e; background: #14141b; }
.admin-raccourci > span:last-child { display: grid; gap: 3px; }
.admin-raccourci strong { font-size: 0.76rem; }
.admin-raccourci small { color: #828d99; font-size: 0.68rem; }
.admin-raccourci-icone { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border: 1px solid #33333e; border-radius: 7px; color: #c8d0d8; font-weight: 700; }
.admin-raccourci-icone.admin-alerte { border-color: rgba(255,106,90,.35); color: #ff8477; }
.admin-maintenance { display: grid; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #24242e; }
.admin-maintenance-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-maintenance-head h3 { color: #e8edf2; font-size: 0.82rem; }
.maintenance-etat { padding: 4px 9px; border: 1px solid #2b4336; border-radius: 20px; background: #111a14; color: #72d49b; font-size: 0.68rem; font-weight: 700; }
.maintenance-etat.active { border-color: #5a3133; background: #201214; color: #ff8790; }
.admin-maintenance-toggle { display: flex; align-items: center; gap: 9px; color: #d5dbe1; font-size: 0.76rem; cursor: pointer; }
.admin-maintenance-toggle input { width: 17px; height: 17px; margin: 0; accent-color: var(--theme-accent, #ff3b4e); }
.admin-maintenance-label { color: #8b96a2; font-size: 0.7rem; }
.admin-maintenance textarea { width: 100%; min-height: 64px; padding: 9px 11px; resize: vertical; border: 1px solid #292933; border-radius: 7px; background: #0d0d13; color: #e8eef4; font: 0.75rem/1.45 'Inter', sans-serif; }
.admin-maintenance textarea:focus-visible { outline: 2px solid var(--theme-accent, #ff3b4e); outline-offset: 2px; }
.admin-maintenance-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-maintenance-actions > span { color: #8994a0; font-size: 0.68rem; }
.admin-maintenance-save { min-height: 34px; padding: 0 13px; border: 1px solid var(--theme-accent, #ff3b4e); border-radius: 6px; background: var(--theme-accent, #ff3b4e); color: #fff; font-size: 0.72rem; font-weight: 700; cursor: pointer; }
.admin-maintenance-save:disabled { opacity: 0.55; cursor: wait; }
.admin-vue > .add-panel { margin-bottom: 12px !important; padding: 18px; border-radius: 8px; }
.admin-vue > .add-panel:last-child { margin-bottom: 0 !important; }
.admin-vue > h2 { margin: 0 0 10px; color: #eef0f3 !important; font-size: 0.95rem !important; letter-spacing: 0 !important; }
#adminVueUsers #userList { margin-top: 10px !important; }

@media (max-width: 900px) {
    .admin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-workspace { grid-template-columns: 170px minmax(0, 1fr); gap: 14px; }
    .admin-overview-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
    .admin-entete { align-items: flex-start; flex-direction: column; }
    .admin-metrics { gap: 7px; }
    .admin-metric { padding: 11px 12px; }
    .admin-workspace { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .admin-nav { flex-direction: row; overflow-x: auto; padding: 0 0 8px; border-right: 0; border-bottom: 1px solid #20202a; }
    .admin-nav button { flex: 0 0 auto; width: auto; padding: 0 10px; white-space: nowrap; }
    .admin-vue > .add-panel { padding: 14px; }
}
/* ================================================================
   BANNIÈRE D'ACCUEIL — REFONTE VISUELLE
   Placé en fin de feuille pour l'emporter sur les anciennes règles,
   sans toucher au HTML ni à app.js (qui pilotent le carrousel,
   les flèches et les pastilles).
   ================================================================ */

.hero-banner {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 9;
    min-height: 380px;
    max-height: 620px;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 32px;
    background-color: #0a0a0f;
    isolation: isolate;
}

/* --- Les deux calques d'image (fondu enchaîné piloté par app.js) --- */
.hero-banner-image {
    position: absolute;
    inset: 0;
    background-color: #0a0a0f;
    background-size: cover;
    background-position: center 20%;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.9s ease;
    z-index: 0;
}
.hero-banner-image.hero-image-visible {
    opacity: 1;
}

/* --- Gradient : sombre à gauche, transparent à droite --- */
.hero-banner-gradient {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            90deg,
            rgba(8, 8, 10, 0.96) 0%,
            rgba(8, 8, 10, 0.85) 26%,
            rgba(8, 8, 10, 0.5) 55%,
            rgba(8, 8, 10, 0.05) 88%,
            transparent 100%
        ),
        linear-gradient(
            to top,
            rgba(8, 8, 10, 0.7) 0%,
            transparent 38%
        );
    pointer-events: none;
}

/* --- Contenu texte : posé à gauche --- */
.hero-banner-content {
    position: relative;
    z-index: 3;
    height: 100%;
    max-width: 620px;
    padding: 56px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}

/* --- Titre --- */
.hero-banner-content h1 {
    margin: 0;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55);
}

/* --- Badges (FILM / 2026 / ★ 7.5 / DRAME) --- */
.hero-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    order: -1;
    margin-bottom: 4px;
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    color: #f0f3f6;
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    line-height: 1;
}
.hero-badge-note {
    background: rgba(232, 184, 0, 0.22);
    border-color: rgba(232, 184, 0, 0.45);
    color: #ffd24a;
}

/* --- Résumé --- */
.hero-banner-content p,
#heroDesc {
    margin: 4px 0 0;
    color: #d5dbe1;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 540px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}

/* --- Boutons --- */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
}
.btn-hero-watch,
.btn-hero-info {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 48px;
    padding: 0 26px;
    border: none;
    border-radius: 30px;
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease, filter 0.18s ease;
}
.btn-hero-watch {
    background: var(--theme-accent, #ff3b4e);
    color: #ffffff;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--theme-accent, #ff3b4e) 35%, transparent);
}
.btn-hero-watch:hover {
    background: #ff5566;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--theme-accent, #ff3b4e) 50%, transparent);
}
.btn-hero-info {
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #f0f3f6;
}
.btn-hero-info:hover {
    background: rgba(255, 255, 255, 0.26);
    transform: translateY(-2px);
}
.hero-actions svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

/* --- Flèches : plus discrètes, à droite, verticalement centrées --- */
.hero-fleches {
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.hero-arrow {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 14, 0.65);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    transition: background 0.16s ease, transform 0.16s ease;
}
.hero-arrow:hover {
    background: color-mix(in srgb, var(--theme-accent, #ff3b4e) 85%, transparent);
    transform: scale(1.06);
}
.hero-arrow svg {
    width: 18px;
    height: 18px;
}

/* --- Pastilles de navigation en bas, dans une petite barre translucide --- */
.hero-banner-dots {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(10, 10, 14, 0.62);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 30px;
}
.hero-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: all 0.25s ease;
}
.hero-dot.active {
    width: 26px;
    border-radius: 4px;
    background: #ffffff;
}

/* --- Masquer le bloc meta vide qui prenait de la place --- */
.hero-banner-meta { display: none !important; }

/* --- Responsive --- */
@media (max-width: 900px) {
    .hero-banner {
        aspect-ratio: auto;
        min-height: 420px;
        max-height: none;
    }
    .hero-banner-content {
        padding: 40px 28px 80px;
        max-width: 100%;
    }
    .hero-banner-content h1 {
        font-size: 2rem;
        letter-spacing: 0.12em;
    }
    .hero-banner-content p,
    #heroDesc {
        font-size: 0.85rem;
        -webkit-line-clamp: 2;
    }
    .hero-fleches {
        right: 14px;
        gap: 8px;
    }
    .hero-arrow { width: 38px; height: 38px; }
}

@media (max-width: 620px) {
    .hero-banner { min-height: 360px; }
    .hero-banner-content { padding: 28px 20px 76px; gap: 12px; }
    .hero-banner-content h1 { font-size: 1.6rem; letter-spacing: 0.08em; }
    .hero-actions { gap: 8px; margin-top: 8px; }
    .btn-hero-watch,
    .btn-hero-info {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        padding: 0 14px;
        font-size: 0.8rem;
        height: 44px;
    }
    .hero-banner-dots { bottom: 14px; padding: 6px 12px; }
    .hero-fleches { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-banner-image { transition: none; }
    .btn-hero-watch:hover,
    .btn-hero-info:hover { transform: none; }
}
/* ================================================================
   BANNIÈRE — POSITIONNEMENT DU CONTENU
   Corrige l'alignement du titre, des badges, du résumé et des
   boutons. Ce bloc est placé en dernier pour l'emporter sur toutes
   les règles précédentes, y compris les @media du dessus.
   ================================================================ */

.hero-banner-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 18px !important;
    max-width: 640px !important;
    height: 100% !important;
    padding: 56px 60px 56px 64px !important;   /* ← padding gauche plus généreux */
    box-sizing: border-box !important;
}

/* Ordre visuel : badges, puis titre, puis résumé, puis boutons */
.hero-banner-content .hero-badges      { order: 1 !important; margin: 0 0 4px 0 !important; }
.hero-banner-content h1                 { order: 2 !important; margin: 0 !important; }
.hero-banner-content #heroDesc,
.hero-banner-content p                  { order: 3 !important; margin: 0 !important; }
.hero-banner-content .hero-actions      { order: 4 !important; margin: 12px 0 0 0 !important; }

/* Les badges ne doivent pas être décalés */
.hero-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Les boutons ne doivent pas être collés au bord */
.hero-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
}

/* Le bloc meta vide est caché et ne doit pas casser la mise en page */
.hero-banner-meta { display: none !important; }

/* Responsive : marges plus raisonnables sur mobile */
@media (max-width: 900px) {
    .hero-banner-content {
        padding: 40px 32px 80px !important;
        max-width: 100% !important;
        gap: 14px !important;
    }
}

@media (max-width: 620px) {
    .hero-banner-content {
        padding: 28px 22px 76px !important;
        gap: 12px !important;
    }
    .hero-actions { width: 100% !important; }
    .hero-actions .btn-hero-watch,
    .hero-actions .btn-hero-info {
        flex: 1 1 0 !important;
        justify-content: center !important;
    }
}
/* ================================================================
   BANNIÈRE — FLÈCHES SUPPRIMÉES
   Les boutons existent toujours dans le HTML (app.js peut les référencer
   via heroPrev()/heroNext()), mais ne sont plus visibles et ne prennent
   plus de place. Le carrousel défile tout seul.
   Placé en tout dernier pour gagner sur les règles plus haut dans le
   fichier, y compris celles dans les @media.
   ================================================================ */
.hero-arrow,
.hero-arrow-left,
.hero-arrow-right,
.hero-fleches {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
/* ================================================================
   BANNIÈRE — ALIGNEMENT FINAL (placé en tout dernier pour gagner)
   Force l'alignement à gauche du contenu, avec une marge régulière
   et un espacement vertical propre entre titre, badges, résumé et
   boutons. Les !important contournent toutes les règles plus
   anciennes sans avoir à les supprimer.
   ================================================================ */

/* Conteneur : texte à gauche, centré verticalement, avec du souffle */
.hero-banner-content {
    position: relative !important;
    z-index: 3 !important;
    height: 100% !important;
    max-width: 640px !important;
    padding: 0 64px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 16px !important;
    box-sizing: border-box !important;
}

/* Le titre ne doit pas avoir de marge parasite */
.hero-banner-content h1,
.hero-banner-content #heroTitle {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.05 !important;
    text-align: left !important;
}

/* Les badges : collés au titre, pas de marge extérieure */
.hero-banner-content .hero-badges {
    margin: 0 !important;
    padding: 0 !important;
    order: -1 !important;
}

/* Le bloc meta vide : on le neutralise complètement */
.hero-banner-content .hero-banner-meta,
.hero-banner-content .hero-banner-meta[style] {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Le résumé : pas de marge parasite */
.hero-banner-content p,
.hero-banner-content #heroDesc {
    margin: 4px 0 0 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

/* Le conteneur des boutons : positionné proprement sous le résumé */
.hero-banner-content .hero-actions {
    margin: 14px 0 0 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    order: 10 !important;
}

/* Les boutons eux-mêmes */
.hero-actions .btn-hero-watch,
.hero-actions .btn-hero-info {
    height: 48px !important;
    padding: 0 26px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    border-radius: 30px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

/* L'icône à l'intérieur du bouton reste centrée */
.hero-actions .btn-hero-watch svg,
.hero-actions .btn-hero-info svg {
    width: 17px !important;
    height: 17px !important;
    flex-shrink: 0 !important;
    display: block !important;
}

/* Responsive */
@media (max-width: 900px) {
    .hero-banner-content { padding: 0 32px !important; gap: 14px !important; }
}
@media (max-width: 620px) {
    .hero-banner-content { padding: 0 22px !important; gap: 12px !important; }
    .hero-banner-content .hero-actions { width: 100% !important; }
    .hero-actions .btn-hero-watch,
    .hero-actions .btn-hero-info {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding: 0 14px !important;
    }
}
/* ================================================================
   RESPONSIVE GLOBAL — AJUSTEMENTS MOBILES
   Bloc placé en dernier pour corriger les principaux défauts
   observés sur petits écrans, sans toucher aux règles existantes.
   Ne remplace pas les media queries déjà en place : il les complète.
   ================================================================ */

/* ----------------------------------------------------------------
   1. BASE : éviter les débordements horizontaux
   ---------------------------------------------------------------- */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Tous les éléments média ne dépassent jamais leur conteneur */
img, video, iframe, svg {
    max-width: 100%;
    height: auto;
}

/* Les conteneurs avec padding ne dépassent pas non plus */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ----------------------------------------------------------------
   2. TABLETTE (jusqu'à 1024px)
   ---------------------------------------------------------------- */
@media (max-width: 1024px) {
    .main-wrap {
        padding: 0 20px;
    }

    /* La sidebar passe au-dessus du contenu */
    .sidebar-wrap {
        flex-direction: column;
        gap: 16px;
    }
    .sidebar {
        position: static;
        max-height: none;
        width: 100%;
        padding: 14px;
    }

    /* Grille films/séries un peu plus dense */
    .grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 14px;
    }

    /* Bannière : moins haute */
    .hero-banner {
        aspect-ratio: auto;
        min-height: 380px;
        max-height: 480px;
    }
    .hero-banner-content {
        padding: 40px 32px;
        max-width: 100%;
    }
    .hero-banner-content h1 {
        font-size: 2rem;
        letter-spacing: 0.12em;
    }
}

/* ----------------------------------------------------------------
   3. GRAND MOBILE (jusqu'à 760px)
   ---------------------------------------------------------------- */
@media (max-width: 760px) {

    /* --- En-tête --- */
    header {
        padding: 10px 14px;
        gap: 8px;
    }
    .site-logo-text { font-size: 1.3rem; }

    /* Le nav est caché par défaut, ouvert par le burger */
    header nav {
        display: none;
        flex-direction: column;
        width: 100%;
        padding-top: 10px;
        border-top: 1px solid rgba(255,255,255,0.08);
        margin-top: 8px;
    }
    header nav.nav-open {
        display: flex;
    }
    header nav > a,
    header nav > .nav-explorer,
    header nav > .nav-explorer > button {
        width: 100%;
        justify-content: flex-start;
        min-height: 46px;
        padding: 0 12px;
        border-radius: 10px;
    }
    .nav-explorer-menu {
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
    }

    /* Le toggle burger devient visible */
    .nav-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 10px;
        background: rgba(255,255,255,0.05);
    }

    /* --- Bannière --- */
    .hero-banner {
        aspect-ratio: auto;
        min-height: 340px;
        max-height: none;
        border-radius: 14px;
        margin-bottom: 22px;
    }
    .hero-banner-content {
        padding: 24px 20px 60px;
        max-width: 100%;
        gap: 12px;
    }
    .hero-banner-content h1 {
        font-size: 1.5rem;
        letter-spacing: 0.08em;
    }
    .hero-banner-content p {
        font-size: 0.82rem;
        -webkit-line-clamp: 3;
        max-width: 100%;
    }
    .hero-badges { gap: 6px; }
    .hero-badge {
        padding: 5px 9px;
        font-size: 0.6rem;
    }
    .hero-actions {
        flex-wrap: nowrap;
        gap: 8px;
        margin-top: 10px;
        width: 100%;
    }
    .hero-actions .btn-hero-watch,
    .hero-actions .btn-hero-info {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        height: 44px;
        padding: 0 12px;
        font-size: 0.8rem;
    }

    /* La barre de contrôle en bas reste accessible */
    .hero-banner-dots {
        bottom: 14px;
        padding: 6px 12px;
        gap: 5px;
    }

    /* --- Grilles --- */
    .grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 12px;
    }
    .card .info h4 { font-size: 0.78rem; }
    .card .info .cat { font-size: 0.62rem; }

    /* Certaines grilles passent en rangée horizontale scrollable */
    #page-home .grid:not(#popularGrid),
    #page-series .grid,
    #page-animes .grid,
    .similaires .grid {
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 2px 0 10px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    #page-home .grid:not(#popularGrid)::-webkit-scrollbar,
    #page-series .grid::-webkit-scrollbar,
    #page-animes .grid::-webkit-scrollbar,
    .similaires .grid::-webkit-scrollbar { display: none; }

    #page-home .grid:not(#popularGrid) > *,
    #page-series .grid > *,
    #page-animes .grid > *,
    .similaires .grid > * {
        flex: 0 0 132px;
        width: 132px;
        scroll-snap-align: start;
    }

    /* Le catalogue principal garde une grille 2 colonnes */
    #page-stream .grid,
    #page-watchlist .grid,
    #page-collections .grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 10px;
    }

    /* --- Titres de section --- */
    .section-title {
        margin: 24px 0 12px;
    }
    .section-title h2 {
        font-size: 1rem;
        padding-bottom: 8px;
    }
    .section-title a {
        font-size: 0.7rem;
    }

    /* --- Sidebar mobile en bande horizontale --- */
    .sidebar {
        padding: 12px;
        border-radius: 12px;
    }
    .sidebar h3 {
        margin: 8px 0 6px;
        font-size: 0.55rem;
    }
    #categoriesList {
        display: flex !important;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 6px;
        scrollbar-width: none;
    }
    #categoriesList::-webkit-scrollbar { display: none; }
    #categoriesList li {
        flex: 0 0 auto;
        padding: 8px 14px;
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 30px;
        font-size: 0.75rem;
        white-space: nowrap;
    }
    #categoriesList li.active {
        background: var(--theme-accent, #ff3b4e);
        border-color: var(--theme-accent, #ff3b4e);
        color: #fff;
    }
    .sidebar > .sidebar-toggle { display: none; }

    /* --- Fiches film/série --- */
    .fiche-hero {
        margin: -12px 0 0;
        min-height: 320px;
        padding-bottom: 20px;
    }
    .fiche-hero-contenu {
        padding: 0 16px;
        gap: 14px;
    }
    .fiche-affiche {
        flex-basis: 110px;
        width: 110px;
    }
    .fiche-texte h1 { font-size: 1.5rem; }
    .fiche-meta { gap: 6px 10px; font-size: 0.75rem; }
    .fiche-resume {
        font-size: 0.82rem;
        -webkit-line-clamp: 4;
    }
    .fiche-actions {
        gap: 8px;
        width: 100%;
    }
    .fiche-btn-lecture {
        flex: 1 1 100%;
        justify-content: center;
        height: 46px;
        font-size: 0.85rem;
    }
    .fiche-btn-second,
    .fiche-actions .btn-vote,
    .fiche-actions .btn-list {
        height: 44px;
        padding: 0 16px;
        font-size: 0.78rem;
    }

    /* --- Épisodes --- */
    .episode {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 10px;
    }
    .episode-vignette {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .episode-corps {
        flex: 1 1 100%;
    }
    .episode-ligne h4 {
        font-size: 0.82rem;
        white-space: normal;
    }
    .episode-resume {
        font-size: 0.75rem;
        -webkit-line-clamp: 3;
    }
    .episode-bouton-vu { display: none; }

    /* --- Formulaires --- */
    .login-container {
        flex-direction: column;
        align-items: center;
    }
    .login-box {
        max-width: 100%;
        width: 100%;
        padding: 24px 20px;
    }
    .add-panel input,
    .add-panel textarea {
        max-width: 100%;
    }
    .demande-panel {
        padding: 16px;
        border-radius: 12px;
    }
    .demande-step {
        flex-direction: column;
        gap: 10px;
    }
    .demande-step-num {
        align-self: flex-start;
    }
    .demande-row {
        flex-wrap: wrap;
    }
    .demande-row input {
        min-width: 100%;
    }
    .demande-row button {
        width: 100%;
    }

    /* --- Filtres --- */
    .panneau-filtres {
        padding: 14px 16px;
        border-radius: 14px;
    }
    .filtre-ligne {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .filtre-intitule {
        min-width: auto;
        font-size: 0.6rem;
    }
    .filtre-pastille {
        padding: 7px 12px;
        font-size: 0.72rem;
    }

    /* --- Catalogue : header --- */
    .catalogue-entete {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin: 20px 0 16px;
    }
    .catalogue-titre { font-size: 1.5rem; }
    .catalogue-outils {
        width: 100%;
        flex-direction: column;
        gap: 10px;
    }
    .catalogue-recherche {
        width: 100%;
        min-width: 0;
    }
    .catalogue-outils select {
        width: 100%;
    }

    /* --- Lecteur vidéo --- */
    .lecteur-barres {
        padding: 28px 10px 10px;
    }
    .lecteur-zone {
        inset: 0 0 70px 0;
    }
    .lecteur-btn {
        width: 38px;
        height: 38px;
    }
    .lecteur-btn svg {
        width: 20px;
        height: 20px;
    }
    .lecteur-temps { font-size: 0.72rem; }
    .lecteur-volume .lecteur-glissiere { display: none; }
    .player-nav {
        top: 10px;
        right: 76px;
        left: 12px;
        max-width: none;
        justify-content: space-between;
    }
    .player-nav-label { display: none; }
    .player-nav-btn { flex: 1 1 0; justify-content: center; }

    /* --- Modales --- */
    .edit-modal .modal-box,
    .confirm-modal .confirm-box {
        padding: 20px 16px;
        width: 95%;
    }
    .edit-modal .modal-box .modal-actions button {
        padding: 9px 18px;
        font-size: 0.68rem;
    }

    /* --- Footer --- */
    .site-footer {
        padding: 28px 16px 16px;
        margin-top: 32px;
    }
    .footer-inner { gap: 24px; }
    .footer-bottom {
        justify-content: flex-start;
        font-size: 0.6rem;
    }

    /* --- Modale d'ajout --- */
    .ajout-modal { padding: 0; }
    .ajout-modal-boite {
        max-width: none;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
        border: none;
    }
    .ajout-form { flex-direction: column; }
    .ajout-affiche {
        flex: none;
        width: 100%;
        height: 120px;
    }
    .ajout-affiche img { object-fit: contain; }
    .ajout-trio { flex-wrap: wrap; }
    .ajout-trio > label { flex: 1 1 90px; }
    .ajout-modal-pied .ajout-btn-principal { flex: 1 1 auto; }
}

/* ----------------------------------------------------------------
   4. TRÈS PETIT MOBILE (jusqu'à 480px)
   ---------------------------------------------------------------- */
@media (max-width: 480px) {
    .main-wrap { padding: 0 14px; }

    .hero-banner { min-height: 300px; }
    .hero-banner-content { padding: 20px 16px 56px; }
    .hero-banner-content h1 {
        font-size: 1.3rem;
        letter-spacing: 0.06em;
    }
    .hero-banner-content p {
        font-size: 0.78rem;
        -webkit-line-clamp: 2;
    }
    .hero-badge {
        padding: 4px 8px;
        font-size: 0.55rem;
    }
    .hero-actions .btn-hero-watch,
    .hero-actions .btn-hero-info {
        height: 42px;
        font-size: 0.76rem;
        padding: 0 10px;
    }

    .grid { grid-template-columns: repeat(2, 1fr); gap: 10px 8px; }
    .card .info h4 { font-size: 0.74rem; }
    .card .info .cat { font-size: 0.58rem; }

    .section-title h2 { font-size: 0.92rem; }

    .fiche-texte h1 { font-size: 1.3rem; }
    .fiche-resume { font-size: 0.78rem; }

    .login-box { padding: 20px 16px; }

    .edit-modal .modal-box .modal-actions button {
        padding: 8px 14px;
        font-size: 0.65rem;
    }

    .footer-col { max-width: 100%; }
}

/* ----------------------------------------------------------------
   5. CIBLES TACTILES (écrans tactiles, pas souris)
   ---------------------------------------------------------------- */
@media (pointer: coarse) {
    nav a,
    .nav-explorer-btn {
        min-height: 46px;
    }
    button:not(.hero-dot):not(.dot),
    a[onclick], [role="button"] {
        min-height: 40px;
    }
    .card .info .actions button {
        width: 38px;
        height: 38px;
    }
    .episode-bouton-vu,
    .episode-bouton-suppr {
        width: 38px;
        height: 38px;
    }
}

/* ----------------------------------------------------------------
   6. RÉDUCTION DES ANIMATIONS (si l'utilisateur le demande)
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ================================================================
   EN-TETE TRANSPARENT
   L en-tete laisse voir la page au lieu de poser une barre noire.
   Deux precautions, sans lesquelles « transparent » devient illisible :

   1. UN VOILE DEGRADE. En haut de page, le contenu qui passe derriere
      peut etre une affiche claire. Un degrade sombre tres doux, du haut
      vers le bas, garde le logo et les liens lisibles sans qu on percoive
      une barre. Il disparait des qu un vrai fond prend le relais.

   2. UN FOND AU DEFILEMENT. Des qu on descend, les cartes defilent sous
      l en-tete : la transparence totale rendrait la navigation illisible.
      On remet alors un fond translucide floute, avec une transition pour
      que le changement ne soit pas brutal.
   ================================================================ */
header {
    background: transparent;
    backdrop-filter: none;
    border-bottom-color: transparent;
    transition: background 0.25s ease, backdrop-filter 0.25s ease, border-color 0.25s ease;
}

/* Le voile est un pseudo-element positionne, jamais un enfant de la
   disposition : l en-tete est en flex, un enfant reel y deviendrait une
   colonne et deplacerait le logo. */
header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(6, 6, 10, 0.72), rgba(6, 6, 10, 0.28) 60%, transparent);
    transition: opacity 0.25s ease;
}

header.entete-defilee {
    background: rgba(8, 8, 10, 0.82);
    backdrop-filter: blur(14px);
    border-bottom-color: rgba(255, 255, 255, 0.07);
}
header.entete-defilee::before { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    header, header::before { transition: none; }
}

/* ================================================================
   PIED DE PAGE SUR MOBILE
   Quatre colonnes a min-width 160px et 32px d ecart : sur 375 px il
   n en tient qu une par ligne, et le pied devenait plus haut que le
   contenu de la page. La reserve en bas laisse la place a la bulle
   de l assistant, qui sinon masque le dernier lien en permanence.
   ================================================================ */
@media (max-width: 620px) {
    .site-footer { margin-top: 32px; padding: 26px 18px 76px; }
    .footer-inner { gap: 20px 14px; }
    .footer-col { flex: 1 1 calc(50% - 7px); min-width: 0; max-width: none; }
    .footer-col.footer-brand { flex: 1 1 100%; }
    .footer-col.footer-brand p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .footer-col h4 { margin-bottom: 8px; }
    .footer-col a { margin-bottom: 6px; font-size: 0.7rem; }
    .footer-bottom { margin-top: 20px; padding-top: 12px; }
}

/* ================================================================
   PAS DE SURVOL SUR ECRAN TACTILE
   Sur un ecran tactile, :hover reste accroche a l element touche
   jusqu a ce qu on touche ailleurs : apres un simple appui, la carte
   gardait son anneau rouge, comme si elle restait selectionnee.
   ================================================================ */
@media (hover: none) {
    .card:hover .card-media,
    .collection-card:hover .collection-cover {
        transform: none;
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
    }
    .card:hover, .collection-card:hover { transform: none; }
}

/* ================================================================
   PAGE PROFIL
   Une banniere, une identite, quatre reperes chiffres, puis la reprise.
   L ancienne version alignait trois nombres sur une bande grise : elle
   ne disait rien de la personne et n invitait a rien.
   ================================================================ */
.profil-banniere {
    position: relative;
    margin-bottom: 22px;
    border-radius: 18px;
    overflow: hidden;
    min-height: 258px;
    display: flex;
    align-items: flex-end;
    background: #0d0d16;
    isolation: isolate;
}
.profil-banniere-image {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: #0d0d16 center 28% / cover no-repeat;
}
/* Deux degrades : vers le bas pour detacher le texte, vers la droite pour
   qu il reste lisible meme si l image est claire de ce cote. */
.profil-banniere-voile {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to top, #0a0a10 4%, rgba(10, 10, 16, 0.72) 42%, rgba(10, 10, 16, 0.3) 100%),
        linear-gradient(to right, rgba(10, 10, 16, 0.88) 0%, rgba(10, 10, 16, 0.4) 58%, transparent 92%);
}
.profil-banniere-contenu {
    display: flex;
    align-items: flex-end;
    gap: 22px;
    width: 100%;
    padding: 26px;
}

.profil-avatar {
    flex: 0 0 116px;
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background: #15151f center / cover no-repeat;
    border: 3px solid color-mix(in srgb, var(--theme-accent, #ff3b4e) 55%, transparent);
    box-shadow: 0 0 0 5px rgba(10, 10, 16, 0.75), 0 10px 30px rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff6a7d;
    font-size: 2.4rem;
    font-weight: 800;
}

.profil-identite { min-width: 0; flex: 1 1 auto; }
.profil-ligne-nom { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; }
.profil-ligne-nom h2 {
    color: #ffffff;
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: -0.6px;
    line-height: 1.1;
}
.profil-role {
    padding: 4px 12px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #ff3b4e) 45%, transparent);
    border-radius: 30px;
    background: color-mix(in srgb, var(--theme-accent, #ff3b4e) 13%, transparent);
    color: #ff7a8a;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    white-space: nowrap;
}
.profil-sous-titre { margin: 5px 0 15px; color: #9aa2aa; font-size: 0.8rem; }

.profil-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.profil-btn-principal,
.profil-btn-second {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 20px;
    border-radius: 30px;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.16s ease, transform 0.16s ease;
}
.profil-btn-principal { background: var(--theme-accent, #ff3b4e); border: none; color: #ffffff; }
.profil-btn-principal:hover { background: #ff5566; transform: translateY(-1px); }
.profil-btn-second {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #e8eef4;
    backdrop-filter: blur(4px);
}
.profil-btn-second:hover { background: rgba(255, 255, 255, 0.18); }

/* ---- Les quatre reperes ----
   Disposition horizontale : icone a gauche, chiffre et libelle a droite.
   En colonne centree, chaque carte s etirait sur toute la largeur et
   devenait un bandeau presque vide avec une icone perdue au milieu.
   Une teinte par repere, pour qu on les distingue d un coup d oeil. */
.profil-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 30px;
}
.profil-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    transition: border-color 0.18s ease, transform 0.18s ease;
}
.profil-stat:hover { border-color: rgba(255, 255, 255, 0.16); transform: translateY(-2px); }

.profil-stat-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--theme-accent, #ff3b4e) 22%, transparent);
    color: #ff8795;
}
.profil-stat-icone svg { width: 22px; height: 22px; }

/* Une couleur par repere. L ordre suit celui du balisage. */
.profil-stat:nth-child(2) .profil-stat-icone { background: rgba(106, 184, 255, 0.22); color: #8ac8ff; }
.profil-stat:nth-child(3) .profil-stat-icone { background: rgba(240, 201, 69, 0.2); color: #f5d56b; }
.profil-stat:nth-child(4) .profil-stat-icone { background: rgba(167, 139, 250, 0.24); color: #bba4fb; }

/* Colonne du texte : min-width 0 pour qu un genre long soit tronque par
   l ellipse au lieu d elargir la carte. */
.profil-stat-texte { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.profil-stat strong {
    display: block;
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profil-stat-nom {
    color: #7f8891;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profil-compte { margin-left: auto; color: #6a737d; font-size: 0.7rem; }

@media (max-width: 860px) {
    .profil-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .profil-stat { padding: 13px 14px; gap: 11px; }
    .profil-stat-icone { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; }
    .profil-stat-icone svg { width: 18px; height: 18px; }
    .profil-stat strong { font-size: 1.2rem; }
}
@media (max-width: 620px) {
    .profil-banniere { min-height: 0; }
    /* En colonne : cote a cote, l avatar ne laisse pas la place au nom. */
    .profil-banniere-contenu { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px; }
    .profil-avatar { flex-basis: 84px; width: 84px; height: 84px; font-size: 1.8rem; }
    .profil-ligne-nom h2 { font-size: 1.5rem; }
    .profil-actions { width: 100%; }
    .profil-btn-principal, .profil-btn-second { flex: 1 1 0; justify-content: center; padding: 0 12px; }
    .profil-stat { padding: 16px 10px; }
    .profil-stat strong { font-size: 1.4rem; }
}

@media (max-width: 460px) {
    .profil-stats { grid-template-columns: 1fr; }
}

/* ===== MOBILE : LISIBILITE ET COUPES PROPRES =====
   Corrections issues d'une mesure du DOM a 375x812, pas d'un reglage a vue. */

/* Le resume du bandeau est un enfant flex (.hero-banner-content lui applique
   « order »). Or un enfant flex declare en display:-webkit-box est blockifie
   par le navigateur en flow-root, ce qui neutralise -webkit-line-clamp : le
   texte etait bien limite a deux lignes par overflow:hidden, mais sans les
   points de suspension, donc coupe en plein mot. Plutot que de remanier la
   mise en page flex, on fait disparaitre la derniere ligne en fondu : la
   coupe redevient intentionnelle, et ca marche partout. */
#heroDesc.est-tronque {
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 100%);
}

@media (max-width: 620px) {
    /* Mesure : badges a 8.8px, categories et compteurs a 9.3px, notes a 9.6px.
       En dessous de ~11px un texte devient penible a lire sur telephone. Les
       hausses restent modestes pour ne pas faire deborder les cartouches. */
    .note-badge, .type-badge { font-size: 0.7rem; }
    .card .cat { font-size: 0.7rem; }
    .categorie-carte span { font-size: 0.7rem; }

    /* Les puces du bandeau faisaient 6px de large : on elargit la zone
       cliquable sans grossir la puce elle-meme. */
    /* Zone de visee agrandie en hauteur. Pas en largeur : les puces ne sont
       espacees que de quelques pixels, et un calque large recouvrait la
       voisine — cliquer une puce selectionnait la diapositive suivante. On
       ecarte donc un peu les puces, et le calque reste en deca du pas. */
    #heroDots { gap: 11px; }
    .hero-dot { position: relative; }
    .hero-dot::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: calc(100% + 9px);
        height: 30px;
        transform: translate(-50%, -50%);
    }

    /* Un lien de 14px de haut est difficile a viser au doigt. */
    .footer a[href^="mailto:"] { display: inline-block; padding: 6px 0; }
}

/* ===== MARQUE : SYMBOLE + MOT =====
   Le symbole accompagne desormais le mot dans l'en-tete et le pied de page.
   Il est en SVG en ligne : net a toute taille, aucune requete, et il garde
   ses couleurs propres quel que soit le theme autour. */
.site-logo-text,
.footer-logo-text {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
.logo-marque {
    display: inline-flex;
    flex: 0 0 auto;
    width: 1.15em;
    height: 1.15em;
}
.logo-marque svg { width: 100%; height: 100%; display: block; }
.logo-mot { display: inline-block; }

/* Le symbole porte deja la couleur de la marque : le mot peut rester blanc
   sans que l'ensemble paraisse eteint. L'accent rouge sur « oo » est garde,
   il fait le lien avec le carre. */
@media (max-width: 620px) {
    .site-logo-text { gap: 7px; }
    .logo-marque { width: 1.05em; height: 1.05em; }
}

/* ===== PANNEAU DE TRAFIC (administration) =====
   Graphiques en HTML/CSS : ce ne sont que des barres et des jauges, importer
   une bibliotheque de graphiques couterait plus au visiteur que ca n'apporte. */
.trafic-periode { display: inline-flex; gap: 4px; padding: 3px; background: #0c0c14; border: 1px solid #1b1b28; border-radius: 9px; }
.trafic-periode button {
    padding: 5px 12px; border: none; border-radius: 6px; background: transparent;
    color: #8a929b; font-size: 0.74rem; font-weight: 600; cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.trafic-periode button:hover { color: #e6eaee; }
.trafic-periode button.actif { background: var(--theme-accent, #ff3b4e); color: #ffffff; }

.trafic-reperes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 16px 0 20px; }
.trafic-repere {
    display: flex; flex-direction: column; gap: 3px;
    padding: 14px 16px; background: #0d0d16; border: 1px solid #181824; border-radius: 12px;
}
.trafic-repere-nom { color: #7f8891; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; }
.trafic-repere strong { color: #ffffff; font-size: 1.55rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.5px; }
.trafic-sous { color: #6d757e; font-size: 0.68rem; }
.trafic-evol { font-size: 0.68rem; font-weight: 700; }
.trafic-evol.hausse { color: #2ecc71; }
.trafic-evol.baisse { color: #ff6a7d; }
.trafic-evol.stable { color: #7f8891; }

.trafic-bloc { margin-bottom: 14px; padding: 16px; background: #0d0d16; border: 1px solid #181824; border-radius: 12px; }
.trafic-bloc-titre { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.trafic-bloc-titre h4 { margin: 0; color: #e6eaee; font-size: 0.86rem; font-weight: 700; }
.trafic-bloc-titre span { color: #6d757e; font-size: 0.68rem; }

/* Graphe quotidien : deux barres superposees, total et visiteurs uniques.
   Superposees et non cote a cote, parce que les uniques sont toujours un
   sous-ensemble du total — les juxtaposer suggererait deux grandeurs
   independantes. */
.trafic-graphe { display: flex; align-items: flex-end; gap: 4px; height: 150px; }
.trafic-barre { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; gap: 6px; min-width: 0; height: 100%; }
.trafic-barre-corps { position: relative; flex: 1 1 auto; width: 100%; max-width: 38px; background: rgba(255, 255, 255, 0.035); border-radius: 4px; }
.trafic-barre-corps i { position: absolute; left: 0; bottom: 0; width: 100%; border-radius: 4px; }
.trafic-barre-total { background: color-mix(in srgb, var(--theme-accent, #ff3b4e) 38%, transparent); }
.trafic-barre-uniques { background: var(--theme-accent, #ff3b4e); }
.trafic-barre-nom { overflow: hidden; color: #6d757e; font-size: 0.6rem; text-overflow: ellipsis; white-space: nowrap; }

.trafic-heures { display: flex; align-items: flex-end; gap: 2px; height: 90px; }
.trafic-heure { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; gap: 5px; height: 100%; }
.trafic-heure-corps { position: relative; flex: 1 1 auto; width: 100%; background: rgba(255, 255, 255, 0.035); border-radius: 3px; }
.trafic-heure-corps i { position: absolute; left: 0; bottom: 0; width: 100%; background: #6ab8ff; border-radius: 3px; }
.trafic-heure-nom { color: #6d757e; font-size: 0.55rem; }

.trafic-colonnes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.trafic-liste { display: flex; flex-direction: column; gap: 8px; }
.trafic-ligne { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; align-items: center; gap: 10px; }
.trafic-ligne-nom { overflow: hidden; color: #c3cad1; font-size: 0.74rem; text-overflow: ellipsis; white-space: nowrap; }
.trafic-ligne-jauge { height: 6px; background: #14141f; border-radius: 3px; }
.trafic-ligne-jauge i { display: block; height: 100%; background: var(--theme-accent, #ff3b4e); border-radius: 3px; }
.trafic-ligne-nb { color: #8a929b; font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.trafic-vide { margin: 0; color: #6d757e; font-size: 0.74rem; }
.trafic-note { margin: 4px 0 0; color: #6d757e; font-size: 0.68rem; line-height: 1.6; }

@media (max-width: 760px) {
    .trafic-reperes { grid-template-columns: repeat(2, 1fr); }
    .trafic-colonnes { grid-template-columns: 1fr; }
    .admin-section-entete { flex-wrap: wrap; gap: 10px; }
    /* Sur un telephone, 30 ou 90 barres deviennent des traits illisibles : on
       laisse defiler horizontalement plutot que de les ecraser. */
    .trafic-graphe { overflow-x: auto; }
    .trafic-barre { flex: 0 0 22px; }
    .trafic-ligne { grid-template-columns: minmax(0, 1fr) 56px auto; }
}

/* Classement de titres : rang, nom, jauge, chiffres. Le nom peut etre long,
   d'ou minmax(0,1fr) pour qu'il soit tronque au lieu d'elargir la grille. */
.trafic-titre { display: grid; grid-template-columns: 18px minmax(0, 1fr) 64px 72px; align-items: center; gap: 9px; }
.trafic-titre-rang { color: #5c646d; font-size: 0.68rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.trafic-titre-nom { overflow: hidden; color: #c3cad1; font-size: 0.74rem; text-overflow: ellipsis; white-space: nowrap; }
.trafic-titre-chiffres { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.trafic-titre-chiffres b { color: #e6eaee; font-size: 0.76rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.trafic-titre-chiffres small { color: #6d757e; font-size: 0.6rem; white-space: nowrap; }

@media (max-width: 760px) {
    .trafic-titre { grid-template-columns: 16px minmax(0, 1fr) 40px 64px; gap: 7px; }
}

/* ===== BOUTONS POSES SUR L'AFFICHE =====
   La lecture et la mise en liste etaient dans une rangee sous la carte. Les
   remonter sur l'affiche rapproche l'action de son sujet et libere une ligne
   de hauteur par carte. La rangee du bas ne garde que l'edition, reservee aux
   responsables : elle disparait donc pour tout le monde d'autre. */
.card-media { position: relative; }

.carte-play,
.carte-fav {
    position: absolute;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    cursor: pointer;
    transition: transform 0.16s ease, background 0.16s ease, opacity 0.16s ease;
}

/* Lecture : au centre, la ou le pouce et le regard vont naturellement. */
.carte-play {
    top: 50%;
    left: 50%;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--theme-accent, #ff3b4e) 95%, transparent);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.carte-play svg { width: 19px; height: 19px; margin-left: 2px; }
.carte-play:hover { background: var(--theme-accent, #ff3b4e); transform: scale(1.08); }

/* Etoile : en haut a droite, hors du chemin des pastilles de note et de type
   qui occupent deja le haut gauche et le coin oppose selon les pages. */
.carte-fav {
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(10, 10, 16, 0.6);
    backdrop-filter: blur(6px);
    color: #e6eaee;
}
.carte-fav svg { width: 15px; height: 15px; }
.carte-fav:hover { background: rgba(10, 10, 16, 0.85); transform: scale(1.08); }
.carte-fav.actif { background: rgba(232, 184, 0, 0.9); color: #1a1a00; }

/* La pastille de note occupe deja ce coin : on la decale sous l'etoile plutot
   que de les superposer. */
.card-media .note-badge { top: 44px; }

/* Sur un ecran a souris, les deux boutons n'apparaissent qu'au survol : une
   affiche doit d'abord se voir. Sur tactile il n'y a pas de survol, donc ils
   restent visibles — sinon ils seraient inatteignables. */
@media (hover: hover) {
    .carte-play, .carte-fav { opacity: 0; }
    .card:hover .carte-play,
    .card:hover .carte-fav,
    .carte-play:focus-visible,
    .carte-fav:focus-visible { opacity: 1; }
    .card:hover .note-badge { opacity: 0; }
}

@media (hover: none) {
    .carte-play { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
    .carte-play svg { width: 16px; height: 16px; }
    .carte-fav { top: 6px; right: 6px; width: 28px; height: 28px; }
}

/* Animation du clic sur l'etoile : une pulsation courte, plus un halo qui
   s'ecarte quand on ajoute. Le retour visuel remplace le rechargement de la
   grille qui servait, avant, a confirmer que le clic avait pris. */
@keyframes carte-fav-pulsation {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.35); }
    60%  { transform: scale(0.92); }
    100% { transform: scale(1); }
}
@keyframes carte-fav-halo {
    0%   { opacity: 0.55; transform: scale(1); }
    100% { opacity: 0; transform: scale(2.1); }
}
.carte-fav-pop { animation: carte-fav-pulsation 0.34s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Le halo est porte par ::before pour ne pas gener le dessin du bouton. */
.carte-fav { position: absolute; }
.carte-fav::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(232, 184, 0, 0.75);
    opacity: 0;
    pointer-events: none;
}
.carte-fav-pop.actif::before { animation: carte-fav-halo 0.5s ease-out; }

/* Le survol agrandit deja le bouton : pendant l'animation, la transformation
   de l'animation doit l'emporter, sinon les deux se contredisent. */
.carte-fav-pop:hover { transform: none; }

@media (prefers-reduced-motion: reduce) {
    .carte-fav-pop { animation: none; }
    .carte-fav-pop.actif::before { animation: none; }
}

/* ===== COMPTE DISCORD SUR LE PROFIL ===== */
.profil-discord { margin-bottom: 26px; }

.discord-invite {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #0d0d16;
    border: 1px solid #181824;
    border-radius: 14px;
}
.discord-invite > div { flex: 1 1 auto; min-width: 0; }
.discord-invite h3 { margin: 0 0 2px; color: #e6eaee; font-size: 0.9rem; font-weight: 700; }
.discord-invite p { margin: 0; color: #7f8891; font-size: 0.74rem; line-height: 1.5; }
.discord-logo { display: inline-flex; flex: 0 0 42px; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 12px; background: rgba(88, 101, 242, 0.18); color: #8b9bff; }
.discord-logo svg { width: 24px; height: 24px; }

.discord-bouton {
    flex: 0 0 auto;
    padding: 9px 16px;
    border-radius: 9px;
    background: #5865f2;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease;
}
.discord-bouton:hover { background: #4752c4; transform: translateY(-1px); }

/* Carte du compte relie : la banniere Discord sert de fond, assombrie par un
   voile pour que le texte reste lisible quelle que soit l'image. */
.discord-lie {
    position: relative;
    overflow: hidden;
    border: 1px solid #181824;
    border-radius: 14px;
    background-color: #0d0d16;
    background-position: center;
    background-size: cover;
}
.discord-voile { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 8, 13, 0.94), rgba(8, 8, 13, 0.74)); }
.discord-identite { position: relative; display: flex; align-items: center; gap: 13px; padding: 16px 18px; }
.discord-avatar { flex: 0 0 52px; width: 52px; height: 52px; border: 2px solid #2a2a3a; border-radius: 50%; object-fit: cover; }
.discord-texte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.discord-texte strong { overflow: hidden; color: #ffffff; font-size: 1rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.discord-sous { color: #6d757e; font-size: 0.7rem; }

.discord-statut { display: inline-flex; align-items: center; gap: 6px; overflow: hidden; color: #c3cad1; font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }
.discord-statut i { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; }

.discord-delier {
    flex: 0 0 auto;
    padding: 7px 13px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: #c3cad1;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.discord-delier:hover { background: color-mix(in srgb, var(--theme-accent, #ff3b4e) 16%, transparent); color: #ff8795; }

.discord-note { margin: 8px 0 0; color: #6d757e; font-size: 0.68rem; line-height: 1.6; }
.discord-note a { color: #8b9bff; }

@media (max-width: 620px) {
    .discord-invite { flex-wrap: wrap; }
    .discord-bouton { width: 100%; text-align: center; }
    .discord-identite { flex-wrap: wrap; }
    .discord-delier { width: 100%; }
}

/* La note quittait l'affiche avec les pastilles : elle rejoint la ligne
   genre/annee pour les series et les suggestions, qui ne l'affichaient nulle
   part ailleurs. Les films l'avaient deja sous leur titre. */
.cat-note { color: #e8b800; white-space: nowrap; }

/* Etat « a configurer », visible par l'admin seul. Teinte differente pour
   qu'il ne soit pas confondu avec une fonctionnalite active. */
.discord-a-configurer { border-color: rgba(240, 201, 69, 0.28); background: rgba(240, 201, 69, 0.05); }
.discord-a-configurer .discord-logo { background: rgba(240, 201, 69, 0.16); color: #f0c945; }
.discord-a-configurer code {
    padding: 1px 5px; border-radius: 4px; background: rgba(255, 255, 255, 0.07);
    color: #e6eaee; font-family: ui-monospace, monospace; font-size: 0.92em; word-break: break-all;
}
.discord-a-configurer a { color: #8b9bff; }

/* Statut Discord dans le bandeau du profil, a la place de « Membre de Kinoo ». */
.profil-statut { display: inline-flex; align-items: center; gap: 6px; }
.profil-statut i { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; }
.profil-activite { color: #8a929b; }
.profil-activite::before { content: "· "; }

/* Encart reduit a la commande : l'identite est desormais dans le bandeau. */
.discord-rattache {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(88, 101, 242, 0.07);
    border: 1px solid rgba(88, 101, 242, 0.24);
    border-radius: 14px;
}
.discord-rattache > div { flex: 1 1 auto; min-width: 0; }
.discord-rattache h3 { margin: 0 0 2px; color: #e6eaee; font-size: 0.86rem; font-weight: 700; }
.discord-rattache p { margin: 0; color: #7f8891; font-size: 0.72rem; line-height: 1.5; }
.discord-rattache a { color: #8b9bff; }

@media (max-width: 620px) {
    .discord-rattache { flex-wrap: wrap; }
    .discord-rattache .discord-delier { width: 100%; }
}

/* ===== MORCEAU EN COURS, DANS LE BANDEAU DU PROFIL ===== */
/* Posee en haut a droite du bandeau plutot qu entre le statut et les boutons,
   ou elle ecrasait la colonne d identite et repoussait les actions vers le bas.
   L espace y est libre, et la carte ne cree plus de hauteur dans le flux. */
.profil-musique {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    max-width: 300px;
    padding: 8px 12px 8px 8px;
    background: rgba(10, 10, 16, 0.55);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
}
.musique-pochette { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 7px; object-fit: cover; }
.musique-vide { background: rgba(255, 255, 255, 0.07); }

/* min-width 0 : sans lui, un titre long elargit le bloc au lieu d'etre tronque. */
.musique-texte { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.musique-entete { color: #1db954; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; }
.musique-titre,
.musique-artiste { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.musique-titre { color: #ffffff; font-size: 0.8rem; font-weight: 700; }
.musique-artiste { color: #a9b2bb; font-size: 0.68rem; }

.musique-barre { margin-top: 5px; height: 3px; background: rgba(255, 255, 255, 0.14); border-radius: 2px; }
.musique-barre i { display: block; width: 0; height: 100%; background: #1db954; border-radius: 2px; transition: width 1s linear; }

.musique-lien { flex: 0 0 auto; color: #8a929b; font-size: 0.95rem; text-decoration: none; }
.musique-lien:hover { color: #1db954; }

@media (max-width: 620px) {
    .profil-musique { max-width: 100%; width: 100%; }
}

@media (max-width: 860px) {
    /* Bandeau trop etroit pour deux colonnes : la carte repasse dans le flux. */
    .profil-musique {
        position: static;
        width: 100%;
        max-width: 100%;
        margin: 12px 0 0;
    }
}

/* ===== CORRECTIONS ISSUES DE L'AUDIT RESPONSIVE (mesures a 320 px) ===== */

/* Le champ de recherche du catalogue retombait a 18 px de haut sur la page
   Films — inutilisable au doigt — alors que le meme composant fait bien 44 px
   sur la page Series. Je n'ai pas reussi a identifier la regle qui l'ecrase :
   verifie que seule une declaration !important restaure la hauteur. On pose
   donc la contrainte explicitement, sur les deux pages, plutot que de laisser
   le composant dependre d'une cascade qu'on ne maitrise pas. */
.catalogue-recherche {
    min-height: 44px !important;
}
.catalogue-recherche input {
    min-height: 24px;
}

/* Le lien de contact du pied de page faisait 14 px de haut sur toutes les
   pages : trop fin pour etre vise au doigt. La regle precedente ciblait
   « .footer », or la classe est « .site-footer » — elle ne s'appliquait
   nulle part. */
.site-footer a[href^="mailto:"] {
    display: inline-block;
    padding: 7px 0;
}

/* Titres et liens du pied de page sous le seuil de lecture confortable
   (9,6 px mesures sur chaque page). */
.site-footer h4 { font-size: 0.72rem; }
.site-footer a,
.site-footer p { font-size: 0.74rem; }

/* Pastilles de qualite et d'offre, mesurees a 8,8 px. */
.quality-badge,
.premium-badge { font-size: 0.68rem; }

/* Note sous le titre d'une carte. Elle portait un style en ligne a 0.55rem
   (8,8 px) : insensible a toute regle CSS, donc impossible a corriger
   ailleurs que dans le JS qui la genere. */
.carte-note { color: #e8b800; font-size: 0.68rem; }

/* Raison d'une suggestion, mesuree a 9,3 px. */
.suggestion-raison { font-size: 0.7rem; }

/* Intitule d'un groupe de filtres, mesure a 9,6 px. */
.filtre-intitule { font-size: 0.68rem; }

/* Le champ de recherche doit remplir son cadre de 44 px, sinon seul un ruban
   de 24 px est reellement cliquable au doigt. */
.catalogue-recherche input { align-self: stretch; }

/* Compteur d'episodes sous une carte de serie, mesure a 9,9 px. */
.serie-compte-episodes { font-size: 0.7rem; }

/* Les liens dans le corps des pages legales faisaient 14 px de haut :
   difficiles a viser au doigt entre deux lignes de texte. */
#page-mentions-legales a,
#page-cgu a,
#page-confidentialite a { display: inline-block; padding: 4px 0; }

/* Le repere « en ce moment » est le seul qui bouge en direct : une pastille
   verte qui bat le distingue des chiffres figes a cote. */
.trafic-repere-direct { border-color: rgba(46, 204, 113, 0.28); }
.trafic-repere-direct strong { color: #2ecc71; }
.trafic-repere-direct .trafic-repere-nom::before {
    content: "";
    display: inline-block;
    width: 7px; height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: #2ecc71;
    animation: trafic-battement 2s ease-in-out infinite;
}
@keyframes trafic-battement {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
    .trafic-repere-direct .trafic-repere-nom::before { animation: none; }
}

/* Bloc rendu par le serveur pour les moteurs de recherche, retire par
   l'application des qu'elle a charge. Il contient exactement ce que la fiche
   finit par afficher : ce n'est donc pas du camouflage. Visible une fraction
   de seconde, il doit rester presentable. */
.rendu-serveur {
    display: flex;
    gap: 20px;
    max-width: 900px;
    margin: 90px auto 0;
    padding: 0 20px;
    color: #c3cad1;
    font-size: 0.86rem;
    line-height: 1.6;
}
.rendu-serveur img { border-radius: 10px; object-fit: cover; }
.rendu-serveur h1 { margin: 0 0 6px; color: #ffffff; font-size: 1.6rem; }
.rendu-serveur-meta { margin: 0 0 10px; color: #8a929b; font-size: 0.76rem; }
@media (max-width: 620px) {
    .rendu-serveur { flex-direction: column; margin-top: 70px; }
}

/* Pastille de classification d'age sur une fiche. Discrete par defaut :
   c'est un reperage, pas une alerte. Au-dela de 16 ans elle passe en rouge,
   parce que l'information devient un avertissement. */
.fiche-age {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 5px;
    color: #c3cad1;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.fiche-age-fort {
    border-color: color-mix(in srgb, var(--theme-accent, #ff3b4e) 50%, transparent);
    background: color-mix(in srgb, var(--theme-accent, #ff3b4e) 12%, transparent);
    color: #ff8795;
}

/* ===== CHAINES TV (administration) ===== */
.chaines-recherche {
    width: 100%;
    height: 38px;
    margin-bottom: 12px;
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 9px;
    color: #e6eaee;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
}
.chaines-recherche:focus { border-color: color-mix(in srgb, var(--theme-accent, #ff3b4e) 50%, transparent); outline: none; }

.chaines-liste { display: flex; flex-direction: column; gap: 6px; max-height: 520px; overflow-y: auto; }

/* Une ligne active est soulignee par une barre verte a gauche : repere plus
   rapide a balayer qu'un changement de fond, quand on parcourt deux cents
   lignes pour en trouver quelques-unes. */
.chaine-ligne {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 110px 92px;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-left: 3px solid transparent;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
}
.chaine-ligne.active { border-left-color: #2ecc71; background: rgba(46, 204, 113, 0.07); }

.chaine-logo { width: 34px; height: 24px; object-fit: contain; }
.chaine-logo-vide { display: block; background: rgba(255, 255, 255, 0.06); border-radius: 4px; }
.chaine-nom { overflow: hidden; color: #e6eaee; font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.chaine-cat { overflow: hidden; color: #6d757e; font-size: 0.66rem; text-overflow: ellipsis; white-space: nowrap; }

.chaine-bascule {
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 7px;
    background: transparent;
    color: #a9b2bb;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.chaine-bascule:hover { background: rgba(255, 255, 255, 0.07); color: #e6eaee; }
.chaine-bascule.active { border-color: rgba(46, 204, 113, 0.45); background: rgba(46, 204, 113, 0.14); color: #2ecc71; }
.chaine-bascule:disabled { opacity: 0.5; cursor: default; }

@media (max-width: 760px) {
    .chaine-ligne { grid-template-columns: 28px minmax(0, 1fr) 80px; }
    .chaine-cat { display: none; }
}

/* ===== CHAINES TV EN DIRECT ===== */
.tv-lecteur { margin-bottom: 24px; background: #000000; border: 1px solid #181824; border-radius: 14px; overflow: hidden; }
.tv-lecteur video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000000; }

.tv-lecteur-barre { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #0d0d16; }
.tv-lecteur-barre strong { flex: 1 1 auto; min-width: 0; overflow: hidden; color: #ffffff; font-size: 0.88rem; text-overflow: ellipsis; white-space: nowrap; }

/* La pastille bat pour distinguer un direct d'une lecture a la demande :
   sur un direct, la position ne veut rien dire et il n'y a rien a reprendre. */
.tv-direct { display: inline-flex; align-items: center; gap: 6px; color: var(--theme-accent, #ff3b4e); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.8px; }
.tv-direct i { width: 7px; height: 7px; border-radius: 50%; background: var(--theme-accent, #ff3b4e); animation: tv-battement 1.6s ease-in-out infinite; }
@keyframes tv-battement { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.tv-fermer { padding: 6px 12px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px; background: transparent; color: #c3cad1; font-size: 0.72rem; cursor: pointer; }
.tv-fermer:hover { background: rgba(255, 255, 255, 0.07); }

.tv-erreur { margin: 0; padding: 10px 14px; background: color-mix(in srgb, var(--theme-accent, #ff3b4e) 10%, transparent); color: #ff8795; font-size: 0.76rem; }

.tv-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 12px; }
.tv-carte {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 104px;
    padding: 14px 10px;
    background: #0d0d16;
    border: 1px solid #181824;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.16s ease, transform 0.16s ease;
}
.tv-carte:hover { border-color: color-mix(in srgb, var(--theme-accent, #ff3b4e) 45%, transparent); transform: translateY(-2px); }
/* Les logos de chaines sont de tailles et de fonds tres variables :
   object-fit les contient sans les deformer. */
.tv-carte img { width: 72px; height: 40px; object-fit: contain; }
.tv-carte-vide { width: 72px; height: 40px; background: rgba(255, 255, 255, 0.06); border-radius: 6px; }
.tv-carte-nom { overflow: hidden; width: 100%; color: #c3cad1; font-size: 0.72rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 620px) {
    .tv-grille { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 9px; }
    .tv-carte { min-height: 88px; padding: 10px 7px; }
    .tv-carte img, .tv-carte-vide { width: 58px; height: 32px; }
}

/* ===== STATISTIQUES COMMUNAUTAIRES SUR UNE FICHE =====
   Trois chiffres agreges. Le bloc est masque tant que tout vaut zero :
   afficher « 0, 0, 0 » sur un titre que personne n'a encore vu donne
   l'impression d'un site desert, alors que l'information n'existe
   simplement pas encore. */
.stats-communaute {
    display: flex;
    gap: 10px;
    margin: 18px 0;
}
.stat-communaute {
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    gap: 1px;
    min-width: 86px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px;
}
.stat-communaute strong { color: #ffffff; font-size: 1.2rem; font-weight: 800; line-height: 1.1; }
.stat-communaute span { color: #7f8891; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; }
.stat-communaute.positif strong { color: #2ecc71; }
.stat-communaute.negatif strong { color: #ff8795; }

@media (max-width: 620px) {
    .stats-communaute { gap: 7px; }
    .stat-communaute { min-width: 0; flex: 1 1 0; padding: 9px 10px; }
    .stat-communaute strong { font-size: 1.05rem; }
    .stat-communaute span { font-size: 0.58rem; }
}


/* ===== BANDEAU D'ANNONCE ===== */
/* Entre « tout va bien » et le mode maintenance qui ferme le site, il n'y avait
   rien. Ce bandeau couvre le cas courant : un hebergeur de videos tombe, et il
   faut le dire sans fermer le catalogue. Rendu par le serveur (annonce.php). */
.annonce-site {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 40px;
    font-size: 0.82rem;
    line-height: 1.45;
    /* Pas de position: sticky ici. L'en-tete est deja collant : deux bandes
       collees l'une sur l'autre mangeraient un tiers d'un ecran de telephone. */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.annonce-texte { flex: 1 1 auto; min-width: 0; }
.annonce-fermer {
    flex: 0 0 auto;
    background: none;
    border: 0;
    color: inherit;
    opacity: 0.6;
    font-size: 1.3rem;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
    /* 28px de cote : une croix de 13px est intouchable au pouce. */
    min-width: 28px;
    min-height: 28px;
}
.annonce-fermer:hover { opacity: 1; }

/* Trois tons seulement. Au-dela, tout finit en rouge et le rouge ne veut plus
   rien dire le jour ou le site est vraiment casse. */
.annonce-info      { background: #10243a; color: #cfe4fb; }
.annonce-attention { background: #3a2c10; color: #fbe6c0; }
.annonce-panne     { background: #3a1216; color: #fbd0d5; }

@media (max-width: 620px) {
    .annonce-site { padding: 10px 16px; gap: 10px; font-size: 0.76rem; }
}


/* ===== DERNIERS EPISODES ===== */
/* Flux au niveau de l’episode : ajouter l’episode 12 d’une serie deja presente
   ne faisait rien remonter dans « Derniers ajouts », qui travaille par titre. */
.episodes-recents {
    display: grid;
    /* auto-fill plutot qu’un nombre fixe de colonnes : la liste s’adapte de
       trois colonnes sur grand ecran a une seule sur telephone, sans palier. */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px;
}
.episode-recent {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    background: #11111b;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 8px 12px 8px 8px;
    color: #e8eef4;
    cursor: pointer;
}
.episode-recent:hover {
    background: #171724;
    border-color: rgba(255, 255, 255, 0.14);
}
.episode-recent img,
.episode-recent-vide {
    flex: 0 0 auto;
    width: 38px;
    height: 56px;
    border-radius: 6px;
    object-fit: cover;
    background: #1d1d2b;
}
.episode-recent-infos {
    flex: 1 1 auto;
    /* min-width: 0 est indispensable : sans lui un titre long refuse de se
       reduire et pousse la date hors de la carte. */
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.episode-recent-infos strong {
    font-size: 0.82rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.episode-recent-num { font-size: 0.68rem; color: #9aa6b5; }
.episode-recent-date {
    flex: 0 0 auto;
    font-size: 0.64rem;
    color: #7e8b9c;
    white-space: nowrap;
}

@media (max-width: 620px) {
    .episodes-recents { grid-template-columns: 1fr; }
    .episode-recent { padding: 7px 10px 7px 7px; gap: 10px; }
}

/* ===== Barre de chargement ===== */
/* Changer de page déclenche des appels réseau : sans repère, le site paraît figé.
   Elle n'apparaît qu'au-delà de 120 ms d'attente (seuil géré dans app.js), pour
   qu'un affichage instantané ne produise pas un clignotement inutile. */
#barreChargement {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--theme-accent, #ff3b4e);
    box-shadow: 0 0 10px color-mix(in srgb, var(--theme-accent, #ff3b4e) 60%, transparent);
    border-radius: 0 2px 2px 0;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: width 0.2s ease-out, opacity 0.25s ease;
}
#barreChargement.visible { opacity: 1; }

/* Une barre qui glisse en permanence gêne les personnes sensibles au mouvement :
   on garde l'information, on retire l'animation de progression. */
@media (prefers-reduced-motion: reduce) {
    #barreChargement { transition: opacity 0.15s linear; }
}

/* Pastille de comptage d'épisodes sur les vignettes de séries.
   Même position et même forme que « Bientôt », qu'elle remplace dès qu'au moins un
   épisode existe : les deux ne peuvent jamais s'afficher ensemble. Teinte neutre —
   le jaune de « Bientôt » signale une attente, un décompte n'a rien d'un avertissement. */
.badge-episodes {
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 3;
    padding: 4px 9px;
    background: rgba(10, 10, 16, 0.82);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(232, 238, 244, 0.22);
    border-radius: 30px;
    color: #e8eef4;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    pointer-events: none;
}

/* ===== Calendrier des animés ===== */
/* Une liste par jour plutôt qu'une grille : on y cherche ce qui est paru depuis la
   dernière visite, pas un catalogue à parcourir. */
.calendrier-animes { margin: 0 0 28px; }

.calendrier-titre {
    margin: 0 0 14px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7c858f;
}

.calendrier-jour { margin-bottom: 18px; }

.calendrier-jour-titre {
    margin: 0 0 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #c8d0d8;
    /* Première lettre en capitale : toLocaleDateString rend « samedi 4 octobre ». */
    text-transform: capitalize;
}

.calendrier-liste { list-style: none; margin: 0; padding: 0; }

.calendrier-ligne {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    background: rgba(26, 26, 38, 0.6);
    border: 1px solid rgba(232, 238, 244, 0.06);
    margin-bottom: 6px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.calendrier-ligne:hover {
    background: color-mix(in srgb, var(--theme-accent, #ff3b4e) 10%, transparent);
    border-color: color-mix(in srgb, var(--theme-accent, #ff3b4e) 35%, transparent);
}

.calendrier-serie { font-weight: 600; color: #e8eef4; }

/* Une seule phrase à droite du titre : « 12 épisodes · S1 E1 → S1 E12 », ou le
   repère et le nom quand il n'y en a qu'un. Elle est tronquée plutôt que de pousser
   le titre de la série hors de la ligne. */
.calendrier-detail {
    margin-left: auto;
    color: #7c858f;
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .calendrier-serie { font-size: 0.88rem; }
    .calendrier-detail { font-size: 0.74rem; }
}