/* ==========================================================================
   theme-preview.css — feuille de style « aperçu » (beta design)
   --------------------------------------------------------------------------
   Chargée UNIQUEMENT pour les comptes listés dans DESIGN_BETA_IDS
   (ou via ?beta_design=<token>).

   Servie avec Cache-Control: no-store : une modification est visible au
   prochain rechargement, sans redémarrage de l'application.

   Elle est injectée APRÈS style.css : les règles écrites ici ont donc la
   priorité à spécificité égale.
   ========================================================================== */

:root {
    /* Marqueur d'activation : sert à vérifier que la feuille est bien chargée. */
    --design-preview: 1;
}

/* ==========================================================================
   1. INTRO TARDIS — surcouche plein écran au chargement
   ========================================================================== */

html.tw-intro-running,
html.tw-intro-running body {
    overflow: hidden;
}

.tw-intro {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: grid;
    place-items: center;
    background:
        radial-gradient(ellipse at 50% 38%, rgba(0, 90, 160, 0.35), transparent 62%),
        radial-gradient(ellipse at 50% 120%, rgba(0, 168, 232, 0.22), transparent 60%),
        #03070f;
    opacity: 1;
    transition: opacity 0.6s ease;
    will-change: opacity;
}

.tw-intro.is-leaving {
    opacity: 0;
    pointer-events: none;
}

.tw-intro__scene {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    transform: translateY(0);
    animation: tw-intro-in 0.55s ease both;
}

@keyframes tw-intro-in {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------------------------------------------------------------- TARDIS */
.tw-tardis {
    position: relative;
    width: 132px;
    height: 210px;
    perspective: 620px;
    filter: drop-shadow(0 18px 34px rgba(0, 140, 220, 0.35));
    transform: scale(1.08);
}

/* Lampe du toit */
.tw-tardis__lamp {
    position: absolute;
    top: -14px;
    left: 50%;
    width: 14px;
    height: 16px;
    transform: translateX(-50%);
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, #ffe9a3, #f7c948);
    box-shadow: 0 0 14px rgba(255, 214, 102, 0.85);
    animation: tw-lamp 1.1s ease-in-out infinite;
}

@keyframes tw-lamp {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 214, 102, 0.55); }
    50%      { box-shadow: 0 0 22px rgba(255, 224, 140, 1); }
}

/* Toit */
.tw-tardis__roof {
    position: absolute;
    top: 2px;
    left: 50%;
    width: 104px;
    height: 18px;
    transform: translateX(-50%);
    border-radius: 6px 6px 3px 3px;
    background: linear-gradient(180deg, #1c5d9c, #0d3b68);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.35);
}

/* Corps */
.tw-tardis__body {
    position: absolute;
    top: 18px;
    left: 50%;
    width: 104px;
    height: 178px;
    transform: translateX(-50%);
    transform-style: preserve-3d;
    border-radius: 4px;
    background: linear-gradient(180deg, #14508a, #0a2c4f);
    box-shadow:
        inset 0 0 0 2px rgba(120, 200, 255, 0.22),
        inset 0 0 24px rgba(0, 0, 0, 0.55);
}

/* Intérieur lumineux visible quand les portes s'ouvrent */
.tw-tardis__inside {
    position: absolute;
    inset: 6px;
    border-radius: 3px;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(190, 240, 255, 0.95), rgba(70, 170, 230, 0.55) 45%, rgba(6, 26, 46, 0.9) 78%),
        #04121f;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.55s ease 0.15s, transform 0.55s ease 0.15s;
    box-shadow: 0 0 28px rgba(120, 220, 255, 0.6);
}

.tw-intro.is-opening .tw-tardis__inside {
    opacity: 1;
    transform: scale(1);
}

/* Portes */
.tw-tardis__door {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(180deg, #175a95 0%, #0f3f6c 55%, #0a2b4a 100%);
    box-shadow: inset 0 0 0 1px rgba(150, 215, 255, 0.25);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: transform 0.85s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.tw-tardis__door--l {
    left: 0;
    transform-origin: left center;
    border-radius: 4px 0 0 4px;
    border-right: 1px solid rgba(0, 0, 0, 0.5);
}

.tw-tardis__door--r {
    right: 0;
    transform-origin: right center;
    border-radius: 0 4px 4px 0;
    border-left: 1px solid rgba(0, 0, 0, 0.5);
}

.tw-intro.is-opening .tw-tardis__door--l {
    transform: rotateY(-76deg);
    box-shadow: 0 0 0 1px rgba(120, 200, 255, 0.35), inset 0 0 18px rgba(0, 0, 0, 0.55);
}

.tw-intro.is-opening .tw-tardis__door--r {
    transform: rotateY(76deg);
    box-shadow: 0 0 0 1px rgba(120, 200, 255, 0.35), inset 0 0 18px rgba(0, 0, 0, 0.55);
}

/* Détails des portes : fenêtre + panneaux */
.tw-tardis__window {
    position: absolute;
    top: 20%;
    left: 50%;
    width: 62%;
    height: 20%;
    transform: translateX(-50%);
    border-radius: 2px;
    background:
        linear-gradient(180deg, rgba(190, 235, 255, 0.85), rgba(120, 190, 230, 0.55));
    box-shadow: 0 0 10px rgba(160, 225, 255, 0.5);
    opacity: 0.85;
}

.tw-tardis__panel {
    position: absolute;
    bottom: 9%;
    left: 50%;
    width: 68%;
    height: 46%;
    transform: translateX(-50%);
    border-radius: 2px;
    background-image:
        linear-gradient(rgba(140, 205, 245, 0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(140, 205, 245, 0.18) 1px, transparent 1px);
    background-size: 100% 33.33%, 50% 100%;
    box-shadow: inset 0 0 0 1px rgba(140, 205, 245, 0.18);
}

/* Enseigne */
.tw-tardis__sign {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 9px;
    border-radius: 3px;
    font-family: "Orbitron", "Inter", system-ui, sans-serif;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.14em;
    color: #d9f2ff;
    background: rgba(8, 40, 70, 0.9);
    box-shadow: 0 0 0 1px rgba(140, 205, 245, 0.4), 0 0 12px rgba(90, 190, 255, 0.45);
    text-shadow: 0 0 8px rgba(150, 220, 255, 0.8);
}

/* ---------------------------------------------------------------- Texte */
.tw-intro__title {
    margin: 0;
    font-family: "Orbitron", "Inter", system-ui, sans-serif;
    font-size: clamp(0.85rem, 2.2vw, 1.05rem);
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #bfe6ff;
    text-shadow: 0 0 18px rgba(0, 168, 232, 0.7);
    opacity: 0;
    animation: tw-fade-up 0.6s ease 0.35s forwards;
}

@keyframes tw-fade-up {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Points de chargement */
.tw-intro__dots {
    display: flex;
    gap: 8px;
    opacity: 0;
    animation: tw-fade-up 0.5s ease 0.5s forwards;
}

.tw-intro__dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00a8e8;
    box-shadow: 0 0 12px rgba(0, 168, 232, 0.8);
    animation: tw-dot 1.15s ease-in-out infinite;
}

.tw-intro__dots span:nth-child(2) { animation-delay: 0.15s; }
.tw-intro__dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes tw-dot {
    0%, 100% { transform: translateY(0); opacity: 0.45; }
    50%      { transform: translateY(-5px); opacity: 1; }
}

/* Respect de prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .tw-intro__scene,
    .tw-intro__title,
    .tw-intro__dots,
    .tw-tardis__lamp,
    .tw-intro__dots span {
        animation: none !important;
        opacity: 1 !important;
    }
    .tw-tardis__door {
        transition-duration: 0.3s;
    }
}

/* ==========================================================================
   2. MENUS DE NAVIGATION (beta)
   ========================================================================== */
.tw-nav { position: relative; display: inline-flex; }
.tw-nav__btn {
    display: inline-flex; align-items: center; gap: 0.45rem;
    cursor: pointer; white-space: nowrap;
}
.tw-nav__chev { font-size: 0.62em; opacity: 0.7; transition: transform 0.18s ease; }
.tw-nav.is-open .tw-nav__chev { transform: rotate(180deg); }
.tw-nav.is-open .tw-nav__btn {
    border-color: rgba(0, 168, 232, 0.65) !important;
    box-shadow: 0 0 0 2px rgba(0, 168, 232, 0.18);
}
.tw-nav__panel {
    position: absolute; top: calc(100% + 10px); left: 0; z-index: 1500;
    min-width: 210px; padding: 10px; border-radius: 14px;
    background: linear-gradient(160deg, rgba(11, 26, 44, 0.98), rgba(8, 18, 32, 0.98));
    border: 1px solid rgba(0, 168, 232, 0.28);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.55);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.tw-nav.is-open .tw-nav__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.tw-nav__panel--wide { min-width: 0; }
.tw-nav__icon-svg { width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -0.125em; }
.tw-nav__cols { display: flex; gap: 18px; }
.tw-nav__cols--others { display: grid; grid-template-columns: repeat(5, minmax(170px, 1fr)); gap: 12px 20px; max-width: min(1180px, 88vw); max-height: none; overflow: visible; }
.tw-nav__cols--others.tw-nav__cols--dense { grid-template-columns: repeat(5, minmax(170px, 1fr)); }
.tw-nav__col { min-width: 0; }
.tw-nav__col-title {
    margin: 0 0 6px; padding-bottom: 5px;
    font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: #7fd7ff; font-weight: 800; white-space: normal; overflow-wrap: anywhere; line-height: 1.25;
    border-bottom: 1px solid rgba(0, 168, 232, 0.18);
}
.tw-nav__col-title a { color: inherit; text-decoration: none; }
.tw-nav__col-title a:hover { color: #b7e8ff; }
.tw-nav__list { list-style: none; margin: 0; padding: 0; max-height: none; overflow: visible; }
.tw-nav__list li { margin: 0; }
.tw-nav__list a {
    display: block; padding: 5px 8px; border-radius: 8px;
    color: #d5e6f7; text-decoration: none; font-size: 0.84rem; white-space: nowrap;
}
.tw-nav__list a:hover { background: rgba(0, 168, 232, 0.16); color: #fff; }
.tw-nav__empty { color: rgba(255,255,255,0.35); font-size: 0.8rem; padding: 4px 8px; }
.tw-nav__item {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px; border-radius: 9px;
    color: #d5e6f7; text-decoration: none; font-size: 0.86rem; font-weight: 600;
}
.tw-nav__item i { width: 1.1rem; text-align: center; color: #7fd7ff; }
.tw-nav__item:hover { background: rgba(0, 168, 232, 0.16); color: #fff; }

@media (max-width: 900px) {
    .tw-nav__panel { position: fixed; left: 10px; right: 10px; top: auto; }
    .tw-nav__cols--others { grid-template-columns: repeat(2, minmax(120px, 1fr)); max-width: none; }
    .tw-nav__cols { flex-wrap: wrap; }
}
/* --- Interaction : survol = panneau visible, clic conservé --- */
.tw-nav__btn {
    transition: box-shadow 0.16s ease, filter 0.16s ease;
}
.tw-nav__btn:hover,
.tw-nav.is-open .tw-nav__btn {
    filter: brightness(1.12);
    box-shadow: 0 6px 18px rgba(0, 120, 200, 0.22);
}
.tw-nav:hover .tw-nav__chev,
.tw-nav.is-open .tw-nav__chev { transform: rotate(180deg); }

/* Ouverture gérée en JS (un seul menu à la fois) */
/* Pont invisible entre le bouton et le panneau (évite la fermeture au passage) */
.tw-nav__panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    height: 14px;
}
/* --- Menu « Autres séries » : sections + saisons en pastilles --- */
.tw-nav__panel--wide { padding: 14px 16px; }
.tw-sec + .tw-sec { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(0, 168, 232, 0.14); }
.tw-sec__title {
    margin: 0 0 8px;
    font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: #7fd7ff; font-weight: 800;
}
.tw-sec__list { display: grid; grid-template-columns: repeat(2, minmax(330px, 1fr)); gap: 4px 22px; }
.tw-series { display: flex; align-items: baseline; gap: 10px; padding: 4px 6px; border-radius: 8px; }
.tw-series:hover { background: rgba(0, 168, 232, 0.08); }
.tw-series__name {
    flex: 0 0 auto; min-width: 168px; max-width: 220px;
    font-size: 0.82rem; font-weight: 700; color: #e3f1ff; text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tw-series__name:hover { color: #54cfff; }
.tw-series__seasons { display: flex; flex-wrap: wrap; gap: 4px; }
.tw-chip {
    display: inline-block; padding: 2px 7px; border-radius: 6px;
    font-size: 0.72rem; font-weight: 700; text-decoration: none;
    color: #a9e4ff; background: rgba(0, 168, 232, 0.12);
    border: 1px solid rgba(0, 168, 232, 0.18);
}
.tw-chip:hover { background: rgba(0, 168, 232, 0.3); color: #fff; }
.tw-series__none { color: rgba(255,255,255,0.3); font-size: 0.75rem; }
@media (max-width: 1100px) { .tw-sec__list { grid-template-columns: 1fr; } }
/* Trigger = lien : neutraliser le soulignement */
.tw-nav__btn,
.tw-nav__btn:hover,
.tw-nav__btn:focus { text-decoration: none !important; }
/* Déclencheurs de menu : look « Accueil » sans cadre (icône + libellé) */
.tw-nav__btn,
.tw-nav__btn.catalog-title-btn {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 10px !important;
    padding: 7px 10px !important;
    color: #e8f4ff !important;
}
.tw-nav__btn:hover,
.tw-nav.is-open .tw-nav__btn,
.tw-nav__btn.catalog-title-btn:hover {
    background: rgba(0, 168, 232, 0.14) !important;
    border: 0 !important;
    color: #ffffff !important;
    filter: none !important;
    box-shadow: none !important;
}
/* --- Autres séries : même style que le menu Doctor Who (colonnes) --- */
.tw-sec__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(168px, 1fr));
    gap: 16px 26px;
}
.tw-col { min-width: 0; }
.tw-col__title {
    margin: 0 0 6px; padding-bottom: 5px;
    font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: #7fd7ff; font-weight: 800;
    border-bottom: 1px solid rgba(0, 168, 232, 0.18);
    white-space: normal; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    min-height: 2.4em; line-height: 1.2;
}
.tw-col__title a { color: inherit; text-decoration: none; }
.tw-col__title a:hover { color: #b7e8ff; }
.tw-col .tw-nav__list a { font-size: 0.82rem; padding: 4px 8px; }
@media (max-width: 1300px) { .tw-sec__grid { grid-template-columns: repeat(4, minmax(150px, 1fr)); } }
@media (max-width: 1000px) { .tw-sec__grid { grid-template-columns: repeat(3, minmax(140px, 1fr)); } }
/* ==========================================================================
   PAGE D'ACCUEIL — hero bienvenue + épisodes en cours
   ========================================================================== */
.tw-hero {
    position: relative;
    margin: 18px 0 26px;
    padding: 42px 24px 46px;
    text-align: center;
    border-radius: 20px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(0, 120, 200, 0.28), transparent 62%),
        linear-gradient(160deg, rgba(9, 22, 38, 0.95), rgba(6, 14, 26, 0.98));
    border: 1px solid rgba(0, 168, 232, 0.22);
    overflow: hidden;
}
.tw-hero::before {
    content: "";
    position: absolute;
    inset: -40% -10% auto -10%;
    height: 220px;
    background: radial-gradient(ellipse at 50% 50%, rgba(0, 168, 232, 0.22), transparent 70%);
    pointer-events: none;
}
.tw-hero__kicker {
    position: relative;
    margin: 0 0 8px;
    font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: #7fd7ff; font-weight: 800;
}
.tw-hero__title {
    position: relative;
    margin: 0;
    font-size: clamp(1.5rem, 3.4vw, 2.4rem);
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.01em;
}
.tw-hero__title span {
    background: linear-gradient(120deg, #54cfff, #6d5cff 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Ruban de section « Épisodes en cours » */
.tw-home-resume {
    position: relative;
    margin-top: 6px;
    padding-top: 0;
}
.tw-home-resume > h2,
.tw-home-resume .home-resume-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    margin: 0 0 14px;
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(0, 168, 232, 0.22), rgba(109, 92, 255, 0.12) 55%, transparent);
    border-left: 4px solid #00a8e8;
    font-size: 1.05rem !important;
    letter-spacing: 0.02em;
    color: #fff;
}
.tw-home-resume > h2::after {
    content: "en cours";
    margin-left: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 168, 232, 0.2);
    color: #9fe6ff;
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 800;
}
.tw-home-empty {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 34px 18px; margin: 0 0 18px; border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(0, 168, 232, 0.28);
    text-align: center;
}
.tw-home-empty i { font-size: 1.6rem; color: #54cfff; }
.tw-home-empty p { margin: 0; color: #8fa6bd; }
.tw-home-empty__cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: 10px; text-decoration: none; font-weight: 800;
    background: linear-gradient(135deg, #00a8e8, #6d5cff); color: #fff;
}
/* Accueil : épisodes en cours sans cadre, scroll horizontal + bordures latérales */
.tw-home-resume,
.tw-home-resume.home-resume {
    position: relative;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 16px !important;
    margin: 10px 0 24px !important;
    border-radius: 0 !important;
    border-left: 2px solid rgba(0, 168, 232, 0.45) !important;
    border-right: 2px solid rgba(0, 168, 232, 0.45) !important;
}
.tw-home-resume > h2,
.tw-home-resume .home-resume-head,
.tw-home-resume__head {
    background: none !important;
    border: 0 !important;
    border-left: 0 !important;
    box-shadow: none !important;
    padding: 0 0 10px 2px !important;
    margin: 0 0 6px !important;
    font-size: 0.98rem !important;
    letter-spacing: 0.02em;
    color: #dbeaf9;
    display: block !important;
}
.tw-home-resume > h2::after { display: none !important; }

/* zone scrollable : bordures visibles uniquement là où il y a des épisodes */
.tw-home-resume .home-resume-row,
.tw-home-resume .home-univers-scroll {
    position: relative;
    padding: 2px 18px !important;
    background: transparent !important;
}
.tw-home-resume .home-resume-row::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 26px;
    background: linear-gradient(270deg, rgba(3, 7, 15, 0.85), transparent);
    pointer-events: none;
}
/* La section ne doit jamais s''élargir au-delà de l''écran (sinon la bordure droite sort) */
.tw-home-resume {
    overflow: hidden !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
.tw-home-resume .home-resume-row,
.tw-home-resume .home-univers-scroll {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    box-sizing: border-box !important;
}
/* Accueil : rangée « Séries Doctor Who » */
.tw-who-row { margin: 26px 0 10px; }
.tw-who-row__title {
    margin: 0 0 12px; padding-left: 2px;
    font-size: 1rem; font-weight: 800; color: #dbeaf9;
    letter-spacing: 0.02em;
}
.tw-who-row__scroll {
    display: flex; gap: 16px; align-items: stretch;
    overflow-x: auto; padding: 2px 4px 10px;
    scrollbar-width: thin;
}
.tw-who-card {
    flex: 0 0 auto; width: 190px;
    display: flex; flex-direction: column;
    border-radius: 14px; overflow: hidden; text-decoration: none;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.tw-who-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 168, 232, 0.55);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}
.tw-who-card__art { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #0a1a2c; }
.tw-who-card__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tw-who-card__ph { display: grid; place-items: center; height: 100%; color: #54cfff; font-size: 1.6rem; }
.tw-who-card__body { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; }
.tw-who-card__name { color: #fff; font-weight: 800; font-size: 0.92rem; }
.tw-who-card__meta { color: #8fa6bd; font-size: 0.76rem; }
/* Séries (accueil) : cartes paysage 16:9, scroll à la molette sans barre */
.tw-who-card { width: 330px !important; }
.tw-who-card__art { aspect-ratio: 16 / 9 !important; }
.tw-who-card__name { font-size: 0.95rem !important; line-height: 1.2; }
.tw-who-row__scroll {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    cursor: grab;
}
.tw-who-row__scroll::-webkit-scrollbar { display: none !important; height: 0 !important; }
.tw-who-row__scroll.is-dragging { cursor: grabbing; }
/* Retour au format précédent des cartes de séries (portrait 3:4 + barre de scroll) */
.tw-who-card { width: 190px !important; }
.tw-who-card__art { aspect-ratio: 3 / 4 !important; }
.tw-who-row__scroll {
    scrollbar-width: thin !important;
    -ms-overflow-style: auto !important;
    cursor: default !important;
}
.tw-who-row__scroll::-webkit-scrollbar { display: block !important; height: 8px !important; }
.tw-who-row__scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 999px; }
/* Rangées de séries : pas de barre visible, scroll horizontal à la molette */
.tw-who-row__scroll,
.tw-home-resume .home-resume-row {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    cursor: grab;
}
.tw-who-row__scroll::-webkit-scrollbar,
.tw-home-resume .home-resume-row::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
.tw-who-row__scroll.is-dragging { cursor: grabbing; }
/* Garantir la scrollabilité des rangées */
.tw-who-row__scroll,
.tw-home-resume .home-resume-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-width: 100% !important;
    touch-action: pan-y;
}
.tw-who-row__scroll > *,
.tw-home-resume .home-resume-row > * { flex: 0 0 auto !important; }
/* Suppression du dégradé sombre de fin de rangée (bande noire parasite) */
.tw-home-resume .home-resume-row::after,
.tw-home-resume .home-univers-scroll::after,
.tw-who-row__scroll::after { display: none !important; content: none !important; background: none !important; }
/* Bordures latérales aussi sur les rangées de séries */
.tw-who-row {
    padding: 0 16px !important;
    border-left: 2px solid rgba(0, 168, 232, 0.45) !important;
    border-right: 2px solid rgba(0, 168, 232, 0.45) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    margin: 22px 0 14px !important;
}
.tw-who-row__title { margin: 0 0 10px !important; }
/* Empêche le rebond vertical pendant le défilement horizontal */
.tw-who-row__scroll,
.tw-home-resume .home-resume-row {
    overscroll-behavior: contain;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: none;
}
/* Épisodes en cours : même style de carte que les séries */
.tw-home-resume .home-resume-wrapper,
.tw-home-resume .univers-card-wrap {
    width: 190px !important;
    flex: 0 0 auto !important;
}
.tw-home-resume .home-resume-card,
.tw-home-resume .univers-card {
    border-radius: 14px !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.tw-home-resume .home-resume-card:hover,
.tw-home-resume .univers-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 168, 232, 0.55) !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}
.tw-home-resume .univers-card__thumb {
    aspect-ratio: 16 / 9 !important;
    border-radius: 0 !important;
}
.tw-home-resume .univers-card__title,
.tw-home-resume .home-resume-card__title {
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    color: #fff !important;
    padding: 10px 12px 4px !important;
    line-height: 1.2 !important;
}
.tw-home-resume .univers-card__meta,
.tw-home-resume .home-resume-card__meta {
    font-size: 0.76rem !important;
    color: #8fa6bd !important;
    padding: 0 12px 12px !important;
}
.tw-home-resume .univers-card__progress,
.tw-home-resume .home-resume-progress { border-radius: 0 !important; }
/* Cartes « épisode en cours » : même habillage que les séries, vignette 16:9 */
.tw-ep-card .tw-who-card__art { aspect-ratio: 16 / 9 !important; }
.tw-ep-card { width: 240px !important; }
.tw-ep-row { gap: 14px !important; }
/* Épisodes : image à la même taille/ratio que les séries (3:4, 190 px) */
.tw-ep-card { width: 190px !important; }
.tw-ep-card .tw-who-card__art { aspect-ratio: 3 / 4 !important; }
.tw-ep-card .tw-who-card__art img { object-fit: cover !important; }
/* Hero d'accueil : compact et sans fond */
.tw-hero {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 4px 0 8px !important;
    margin: 4px 0 10px !important;
    border-radius: 0 !important;
    text-align: left !important;
}
.tw-hero::before { display: none !important; content: none !important; }
.tw-hero__kicker { margin: 0 0 3px !important; font-size: 0.64rem !important; letter-spacing: 0.16em !important; }
.tw-hero__title { font-size: clamp(1.1rem, 2.2vw, 1.6rem) !important; line-height: 1.15; }
/* Cartes de séries : bordures internes supprimées (rendu plus net sous les images) */
.tw-who-card,
.tw-who-card.tw-ep-card {
    border: 0 !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.035) !important;
}
.tw-who-card:hover,
.tw-who-card.tw-ep-card:hover {
    border: 0 !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45) !important;
}
.tw-who-card__art,
.tw-who-card__body {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
.tw-who-card__body { padding: 9px 12px 11px !important; }
/* Épisodes : barre de progression + temps restant */
.tw-ep-bar {
    position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
    background: rgba(0, 0, 0, 0.45);
}
.tw-ep-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #00a8e8, #6d5cff); }
.tw-who-card__art { position: relative; }
.tw-ep-remain {
    display: block; margin-top: 2px;
    font-size: 0.72rem; font-weight: 700; color: #7fd7ff;
}
/* Hero d'accueil : recentré */
.tw-hero { text-align: center !important; }
.tw-hero__kicker,
.tw-hero__title { text-align: center !important; }
/* Titre « Épisodes en cours » aligné à gauche */
.tw-home-resume > h2,
.tw-home-resume .home-resume-head,
.tw-home-resume__head {
    text-align: left !important;
    justify-content: flex-start !important;
    display: block !important;
    width: 100% !important;
}
/* Le vrai conteneur du titre est .home-section-head (flex centré par le site) */
.tw-home-resume .home-section-head,
.tw-home-resume .home-section-head--compact {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: left !important;
    width: 100% !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}
.tw-home-resume .home-section-head > h2,
.tw-home-resume .home-section-head--compact > h2 {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}
/* Menu « Autres séries » : plus large, colonnes plus nombreuses → moins haut */
.tw-nav__panel--wide { max-width: min(1480px, 94vw) !important; }
.tw-sec__grid {
    grid-template-columns: repeat(7, minmax(150px, 1fr)) !important;
    gap: 12px 18px !important;
}
.tw-col .tw-nav__list a { font-size: 0.78rem !important; padding: 3px 7px !important; }
.tw-col__title { font-size: 0.62rem !important; min-height: 2.2em !important; margin-bottom: 4px !important; }
.tw-sec + .tw-sec { margin-top: 10px !important; padding-top: 8px !important; }
@media (max-width: 1500px) { .tw-sec__grid { grid-template-columns: repeat(6, minmax(145px, 1fr)) !important; } }
@media (max-width: 1200px) { .tw-sec__grid { grid-template-columns: repeat(4, minmax(140px, 1fr)) !important; } }
/* Colonnes : lien « +N saisons » + limite de hauteur du panneau */
.tw-col__more a { color: #7fd7ff !important; font-weight: 700 !important; font-size: 0.76rem !important; }
.tw-col__more a:hover { color: #b7e8ff !important; }
.tw-nav__panel--wide {
    max-height: calc(100vh - 150px) !important;
    overflow-y: auto !important;
}
/* Panneau centré sur son bouton */
.tw-nav__panel {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) translateY(-6px);
}
.tw-nav.is-open .tw-nav__panel {
    transform: translateX(-50%) translateY(0);
}
/* Le placement horizontal est désormais calculé en JS */
.tw-nav__panel { left: 0; }
/* Centrage des panneaux : sous le bouton pour les menus étroits,
   centré sur l'écran pour le très large menu « Autres séries » */
.tw-nav__panel {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) translateY(-6px) !important;
}
.tw-nav.is-open .tw-nav__panel {
    transform: translateX(-50%) translateY(0) !important;
}
.tw-nav--others .tw-nav__panel {
    position: fixed !important;
    top: calc(var(--tw-nav-top, 82px)) !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-6px) !important;
    z-index: 1600;
}
.tw-nav--others.is-open .tw-nav__panel {
    transform: translateX(-50%) translateY(0) !important;
}
@media (max-width: 900px) {
    .tw-nav--others .tw-nav__panel { position: absolute !important; top: calc(100% + 10px) !important; left: 0 !important; transform: none !important; }
}
/* Tous les panneaux : centrés sous leur bouton, pas de scroll interne */
.tw-nav--others .tw-nav__panel {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-6px) !important;
}
.tw-nav--others.is-open .tw-nav__panel {
    transform: translateX(-50%) translateY(0) !important;
}
.tw-nav__panel,
.tw-nav__panel--wide {
    max-height: none !important;
    overflow: visible !important;
}
/* Le positionnement est piloté par JS (plus de !important bloquant) */
.tw-nav__panel {
    left: 0 !important;
    transform: translateY(-6px) !important;
}
.tw-nav.is-open .tw-nav__panel {
    transform: translateY(0) !important;
}
/* Panneaux : alignés à gauche du bouton, toutes les saisons visibles */
.tw-nav__panel,
.tw-nav__panel--wide {
    max-height: calc(100vh - 90px) !important;
    overflow-y: auto !important;
}
/* Menu Doctor Who : plus de colonnes, pas de scroll */
.tw-nav--who .tw-nav__cols { gap: 16px 20px; }
.tw-nav--who .tw-nav__panel { max-height: none !important; overflow: visible !important; }
.tw-nav--who .tw-nav__list { max-height: none !important; overflow: visible !important; }
/* Menu Doctor Who : accents par série + colonne « suite » */
.tw-nav__col--gold .tw-nav__col-title { color: #ffd166 !important; border-bottom-color: rgba(255, 209, 102, .35) !important; }
.tw-nav__col--cyan .tw-nav__col-title { color: #54cfff !important; }
.tw-nav__col--violet .tw-nav__col-title { color: #b48cff !important; border-bottom-color: rgba(180, 140, 255, .32) !important; }
.tw-nav__col--gold .tw-nav__list a:hover { background: rgba(255, 209, 102, .14) !important; }
.tw-nav__col--violet .tw-nav__list a:hover { background: rgba(180, 140, 255, .16) !important; }

.tw-nav__col--cont { border-left: 1px solid rgba(255, 255, 255, .07); padding-left: 14px; }
.tw-nav__cont {
    font-size: 0.58rem; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(255, 255, 255, .28); font-weight: 700;
}
.tw-nav--who .tw-nav__list a { padding: 5px 9px !important; border-radius: 8px; }
.tw-nav--who .tw-nav__col-title { margin-bottom: 6px !important; }
/* Séparateur entre séries, pas dans la « suite » */
.tw-nav__col--cont { border-left: 0 !important; padding-left: 0 !important; }
.tw-nav__col--group-start {
    border-left: 1px solid rgba(255, 255, 255, .08);
    padding-left: 16px;
    margin-left: 4px;
}
/* Alignement vertical des colonnes : les titres occupent 2 lignes */
.tw-nav--who .tw-nav__col-title {
    display: flex !important;
    align-items: flex-end !important;
    min-height: 2.7em !important;
    line-height: 1.2 !important;
    padding-bottom: 5px !important;
    margin-bottom: 8px !important;
}
.tw-nav--who .tw-nav__list { margin-top: 0 !important; }
.tw-nav--who .tw-nav__col { display: flex; flex-direction: column; }
/* Menu Autres séries : colonnes façon Doctor Who */
.tw-sec__grid { grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)) !important; gap: 10px 16px !important; }
.tw-col--cont { border-left: 0 !important; padding-left: 0 !important; }
.tw-col--start { border-left: 1px solid rgba(255,255,255,.08); padding-left: 14px; }
.tw-col__title { min-height: 2.5em !important; display: flex !important; align-items: flex-end !important; }
.tw-col .tw-nav__list a { padding: 4px 8px !important; }
.tw-sec__title {
    display: flex; align-items: center; gap: 10px;
    font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
    color: #7fd7ff; font-weight: 800; margin: 0 0 10px;
}
.tw-nav--others .tw-nav__panel { max-height: none !important; overflow: visible !important; }
/* Largeur fixe du panneau « Autres séries » + 7 colonnes régulières */
.tw-nav--others .tw-nav__panel {
    width: min(1400px, 92vw) !important;
    max-width: 92vw !important;
}
.tw-sec__grid { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
/* Largeur ajustée pour tenir à droite du bouton */
.tw-nav--others .tw-nav__panel {
    width: min(1200px, 88vw) !important;
    max-width: 88vw !important;
}
/* Colonne « suite » : rattachée visuellement à sa série */
.tw-col--cont { border-left: 1px dashed rgba(255,255,255,.10) !important; padding-left: 12px !important; }
.tw-col--cont .tw-col__title { color: rgba(255,255,255,.35) !important; border-bottom-color: rgba(255,255,255,.08) !important; }
.tw-col--start { border-left: 1px solid rgba(255,255,255,.10) !important; padding-left: 14px !important; }
.tw-sec + .tw-sec { border-top: 1px solid rgba(0,168,232,.12); }
/* Panneau Autres séries : 8 colonnes compactes, un peu moins haut */
.tw-sec__grid { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; gap: 8px 14px !important; }
.tw-col .tw-nav__list a { font-size: 0.74rem !important; padding: 2px 6px !important; }
.tw-col__title { font-size: 0.6rem !important; min-height: 2.2em !important; }
.tw-sec + .tw-sec { margin-top: 8px !important; padding-top: 8px !important; }
.tw-nav--others .tw-nav__panel { padding: 12px 14px !important; }
/* Anti-flash : masquer l'ancien ruban tant que la nouvelle nav n'est pas prête */
html:not(.tw-nav-ready) .catalog-title-left > a.menu-btn,
html:not(.tw-nav-ready) .catalog-title-left > a.catalog-title-btn,
html:not(.tw-nav-ready) .catalog-title-left > button.menu-btn,
html:not(.tw-nav-ready) .catalog-title-left > button.catalog-title-btn {
    visibility: hidden !important;
    pointer-events: none !important;
}
/* les anciens liens isolés (Stats / Demandes / Soutenir / Discord) */
html:not(.tw-nav-ready) .catalog-title-left > a,
html:not(.tw-nav-ready) .catalog-title-left > button {
    visibility: hidden !important;
}
/* filet de sécurité : si le JS échoue, on réaffiche après 1,2 s (voir theme-preview.js) */
/* En-tête : recherche centrée, Soutenir groupé à droite */
.tw-hdr-tuned { position: relative; }
.tw-hdr-tuned .catalog-search-bar-container,
.tw-hdr-tuned .search-bar-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 !important;
    width: min(430px, 34vw);
}
.tw-hdr-tuned .catalog-title-actions { margin-left: auto; }
.tw-hdr-tuned .catalog-title-btn--soutenir { margin-right: 8px; }
@media (max-width: 1050px) {
    .tw-hdr-tuned .catalog-search-bar-container,
    .tw-hdr-tuned .search-bar-container {
        position: static;
        transform: none;
        width: auto;
        margin: 0 12px !important;
    }
}
/* En-tête : layout flex sans chevauchement */
.tw-hdr-tuned .catalog-title-bar {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.tw-hdr-tuned .catalog-title-left { flex: 0 0 auto !important; }
.tw-hdr-tuned .catalog-search-bar-container,
.tw-hdr-tuned .search-bar-container {
    position: static !important;
    transform: none !important;
    flex: 0 1 420px !important;
    width: auto !important;
    min-width: 180px !important;
    margin: 0 auto !important;
}
.tw-hdr-tuned .catalog-title-actions {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
/* Icône SVG des menus */
.tw-nav__icon-svg { width: 20px; height: 20px; flex: 0 0 auto; }
/* Anti-flash total : le ruban n'apparaît qu'une fois la nouvelle nav construite.
   Repli automatique après 1,2 s si le JS ne s'exécute pas. */
html:not(.tw-nav-ready) .catalog-title-bar {
    opacity: 0 !important;
    animation: twHdrFallback 0s linear 1.2s forwards !important;
}
@keyframes twHdrFallback { to { opacity: 1; } }



@media (max-width: 380px) {
  .tw-hdr-tuned .catalog-title-bar > .menu-btn,
  .tw-hdr-tuned .catalog-title-bar > .catalog-title-btn,
  .tw-hdr-tuned .catalog-title-bar > .catalog-mobile-auth__link,
  .tw-hdr-tuned .catalog-title-bar > .tw-nav {
    flex-basis: 30% !important;
    font-size: .58rem !important;
  }
}


@media (max-width: 380px) {
  .tw-hdr-tuned .catalog-title-bar > .menu-btn,
  .tw-hdr-tuned .catalog-title-bar > .tw-nav,
  .tw-hdr-tuned .catalog-title-bar > .catalog-mobile-auth__link {
    flex-basis: 30% !important;
    font-size: .56rem !important;
  }
}


@media (max-width: 380px) {
  #main-header .catalog-title-left > a,
  #main-header .catalog-title-left > .tw-nav,
  #main-header .catalog-title-actions > a,
  #main-header .catalog-mobile-auth > a,
  #main-header .catalog-mobile-auth > form > button { flex-basis: 30% !important; font-size: .56rem !important; }
}
/* ==========================================================================
   En-tete mobile - 2026-11-10
   Objectif : la barre de navigation remonte en haut (comme sur PC) et le bouton
   isole qui flottait sous la recherche disparait.
   - le dock mobile devient une barre fixe en haut (il etait en bas) ;
   - le header (recherche) reste juste en dessous, dans le flux ;
   - les actions desktop re-affichees par .tw-hdr-tuned sont masquees sur mobile.
   ========================================================================== */
@media (max-width: 820px) {
  /* le decalage du dock ne concerne que les pages qui l'affichent (pas la page lecteur) */
  body:has(> .mobile-dock) { padding-top: 54px !important; padding-bottom: 0 !important; }

  .mobile-dock {
    top: 0 !important;
    bottom: auto !important;
    height: 54px !important;
    padding: 4px 6px !important;
    border-top: 0 !important;
    border-bottom: 1px solid rgba(0, 162, 237, 0.28) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35) !important;
  }
  .mobile-dock__item {
    flex-direction: row !important;
    gap: 6px !important;
    font-size: .72rem !important;
    border-radius: 10px !important;
  }
  .mobile-dock__item i { font-size: 1rem !important; }

  /* la recherche reste juste sous la barre */
  #main-header { position: relative !important; }
  #main-header .tardis-stream-masthead { margin-top: 0 !important; }

  /* plus de bouton flottant sous la recherche */
  #main-header .catalog-title-actions { display: none !important; }
  #main-header .catalog-title-left { display: none !important; }

  /* marges du ruban un peu resserrees */
  #main-header .tardis-stream-masthead.catalog-title-frame {
    padding: 8px 12px 8px 12px !important;
  }
}
@media (max-width: 820px) {
  /* barre du haut : icone au-dessus du libelle, libelles courts */
  .mobile-dock__item {
    flex-direction: column !important;
    gap: 1px !important;
    font-size: .56rem !important;
    padding: 2px 1px !important;
    line-height: 1.1 !important;
  }
  .mobile-dock__item i { font-size: 1rem !important; }
  .mobile-dock__item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-dock { align-items: center !important; }
}
@media (max-width: 820px) {
  /* l'en-tete n'est plus superpose : le decalage de 92px n'a plus lieu d'etre */
  .donate-page .donate-main { margin-top: 14px !important; padding: 0.6rem 0.9rem 1.6rem !important; }
  .donate-hero-card { padding: 1.2rem 1rem 1.4rem !important; }
  .donate-h1 { font-size: 1.55rem !important; line-height: 1.2 !important; }
  .donate-sub p { font-size: .92rem !important; line-height: 1.5 !important; }
}
@media (max-width: 820px) {
  /* le ruban doit toujours etre visible (l'animation anti-flash peut le laisser transparent) */
  #main-header .catalog-title-bar { opacity: 1 !important; animation: none !important; }
  #main-header .catalog-search-bar-container,
  #main-header .search-bar-container {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}