/* ==========================================================================
 * KINOO — COUCHE DE DESIGN
 *
 * Refonte visuelle complète de la façade : ossature, héros, rangées,
 * affiches, blocs saisonniers, pied de page.
 *
 * POURQUOI UN FICHIER À PART plutôt que des retouches dans refonte.css :
 * quatre feuilles se disputaient déjà la mise en page (style.css,
 * mobile-fix.css, le thème saisonnier, refonte.css). Ajouter une cinquième
 * couche de rustines donnait un résultat incohérent — c'est précisément le
 * reproche. Ici, un seul fichier décide de l'apparence de la façade, chargé
 * en dernier, et il se retire d'une ligne s'il ne convient pas.
 *
 * CE QU'IL NE FAIT PAS : aucun HTML, aucun JS. Le lecteur, les favoris,
 * l'administration et l'import ne peuvent pas en souffrir.
 *
 * L'identité reste celle de Kinoo : les couleurs viennent toutes de
 * var(--theme-accent), donc les quatre thèmes suivent sans règle dédiée.
 * ========================================================================== */

html[data-theme] {
    /* --- Échelle d'espacement : une seule progression pour tout le site,
       c'est ce qui donne l'impression d'ensemble. --- */
    --k-gap-xs: 6px;
    --k-gap-s: 10px;
    --k-gap-m: 16px;
    --k-gap-l: 26px;
    --k-gap-xl: 44px;

    --k-rayon-s: 8px;
    --k-rayon-m: 12px;
    --k-rayon-l: 18px;

    /* --- Profondeur : trois niveaux, pas davantage. --- */
    --k-ombre-1: 0 2px 10px rgba(0, 0, 0, .35);
    --k-ombre-2: 0 10px 30px rgba(0, 0, 0, .5);
    --k-ombre-3: 0 26px 64px rgba(0, 0, 0, .6);

    /* --- Surfaces : des gris très sombres, jamais du noir pur, qui écrase
       les affiches. --- */
    --k-fond: #07070b;
    --k-surface: #101016;
    --k-surface-haute: #16161f;
    --k-trait: rgba(255, 255, 255, .07);
    --k-trait-fort: rgba(255, 255, 255, .14);

    --k-texte: #eef2f7;
    --k-texte-doux: #a7b0bc;
    --k-texte-faible: #727c88;

    --k-accent: var(--theme-accent, #ff3b4e);
}

/* ==========================================================================
 * 1. FOND ET RYTHME GÉNÉRAL
 * ========================================================================== */

html[data-theme] body {
    background-color: var(--k-fond);
    background-attachment: fixed;
    background-image:
        radial-gradient(1100px 560px at 10% -8%, color-mix(in srgb, var(--k-accent) 8%, transparent), transparent 62%),
        radial-gradient(820px 480px at 96% 4%, color-mix(in srgb, var(--k-accent) 4%, transparent), transparent 58%);
    color: var(--k-texte);
}

/* ==========================================================================
 * 2. LE HÉROS
 *
 * Il donne le ton de la page, donc il décide de tout le reste : hauteur
 * mesurée pour que la première rangée dépasse en bas de l'écran — c'est ce
 * débord qui fait comprendre qu'il y a un catalogue en dessous.
 * ========================================================================== */

html[data-theme] .hero-banner {
    height: clamp(380px, 56vh, 580px);
    border-radius: var(--k-rayon-l);
    margin-bottom: var(--k-gap-l);
    box-shadow: var(--k-ombre-3);
    overflow: hidden;
}

html[data-theme] .hero-banner-gradient {
    background:
        linear-gradient(90deg, rgba(5, 5, 8, .97) 0%, rgba(5, 5, 8, .9) 24%, rgba(5, 5, 8, .5) 54%, rgba(5, 5, 8, .04) 88%),
        linear-gradient(0deg, rgba(5, 5, 8, .92) 0%, rgba(5, 5, 8, .25) 34%, rgba(5, 5, 8, 0) 60%),
        linear-gradient(0deg, rgba(5, 5, 8, .12), rgba(5, 5, 8, .12));
}

html[data-theme] .hero-banner-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    height: 100%;
    max-width: min(600px, 58%);
    padding: 0 0 clamp(22px, 4vh, 40px) clamp(20px, 3.4vw, 48px);
    gap: var(--k-gap-s);
}

html[data-theme] .hero-banner-content h1 {
    margin: 0;
    font-size: clamp(1.9rem, 3.6vw, 3.1rem);
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -.028em;
    text-wrap: balance;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}

/* Les repères : une seule ligne, jamais repliée. Repliés, ils plaçaient la
   puce de séparation en début de ligne, ce qui se lit comme une faute. */
html[data-theme] .hero-badges {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 9px;
    margin: 0;
}
html[data-theme] .hero-badge {
    background: none;
    border: 0;
    padding: 0;
    white-space: nowrap;
    min-width: 0;
    color: var(--k-texte-doux);
    font-size: .84rem;
    font-weight: 600;
}
html[data-theme] .hero-badge + .hero-badge::before {
    content: '•';
    margin-right: 9px;
    color: var(--k-texte-faible);
}
html[data-theme] .hero-badge-note { color: var(--k-accent); font-weight: 800; }
/* Le genre est le plus long et le moins décisif : c'est lui qu'on tronque. */
html[data-theme] #heroCategorie { overflow: hidden; text-overflow: ellipsis; }

html[data-theme] .hero-banner-content #heroDesc {
    margin: 0;
    max-width: 52ch;
    color: var(--k-texte-doux);
    font-size: .94rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

html[data-theme] .hero-actions {
    display: flex;
    align-items: center;
    gap: var(--k-gap-s);
    margin-top: var(--k-gap-xs);
}

/* Un bouton ne coupe jamais son libellé : c'est ce qui transformait
   « Ma liste » en pavé sur deux lignes. */
html[data-theme] .btn-hero-watch,
html[data-theme] .btn-hero-info,
html[data-theme] .btn-hero-liste {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 22px;
    border-radius: var(--k-rayon-s);
    font-size: .95rem;
    font-weight: 700;
    white-space: nowrap;
    flex: 0 0 auto;
    cursor: pointer;
    transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
html[data-theme] .btn-hero-watch {
    border: 0;
    background: var(--k-accent);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--k-accent) 32%, transparent);
}
html[data-theme] .btn-hero-info,
html[data-theme] .btn-hero-liste {
    border: 1px solid var(--k-trait-fort);
    background: rgba(16, 16, 22, .6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--k-texte);
}
html[data-theme] .btn-hero-watch:hover,
html[data-theme] .btn-hero-info:hover,
html[data-theme] .btn-hero-liste:hover { transform: translateY(-1px); }
html[data-theme] .btn-hero-info:hover,
html[data-theme] .btn-hero-liste:hover { border-color: var(--k-accent); }
html[data-theme] .btn-hero-liste[aria-pressed="true"] { border-color: var(--k-accent); color: var(--k-accent); }

html[data-theme] .hero-fleches .hero-arrow {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--k-trait);
    background: rgba(8, 9, 13, .55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity .18s ease;
}
html[data-theme] .hero-banner:hover .hero-arrow { opacity: 1; }

html[data-theme] .hero-banner-dots span,
html[data-theme] .hero-banner-dots button {
    width: 20px; height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .26);
    transition: width .2s ease, background .2s ease;
}
html[data-theme] .hero-banner-dots .active,
html[data-theme] .hero-banner-dots [aria-current="true"] {
    width: 32px;
    background: var(--k-accent);
}

/* ==========================================================================
 * 3. TITRES DE SECTION
 * ========================================================================== */

html[data-theme] .section-title,
html[data-theme] .halloween-heading {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: var(--k-gap-m);
    margin: var(--k-gap-xl) 0 var(--k-gap-m);
}
html[data-theme] .section-title h2,
html[data-theme] .halloween-heading h2 {
    margin: 0;
    font-size: clamp(1.1rem, 1.5vw, 1.38rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--k-texte);
}
html[data-theme] .section-title a,
html[data-theme] .halloween-selection-link {
    margin-left: auto;
    font-size: .8rem;
    font-weight: 700;
    color: var(--k-accent);
    cursor: pointer;
    opacity: .75;
    transition: opacity .16s ease;
}
html[data-theme] .section-title:hover a,
html[data-theme] .halloween-heading:hover .halloween-selection-link { opacity: 1; }

/* ==========================================================================
 * 4. LES RANGÉES
 *
 * Sur l'accueil on parcourt, on ne cherche pas : une rangée qui défile
 * montre plus de titres par écran qu'une grille. Le catalogue garde sa
 * grille, qui reste le bon format quand on sait ce qu'on veut.
 * ========================================================================== */

html[data-theme] #page-home .grid,
html[data-theme] .halloween-film-grid {
    display: flex;
    grid-template-columns: none;
    gap: var(--k-gap-s);
    overflow-x: auto;
    /* Pas de `overflow-y: visible` ici : dès qu'un axe passe en `auto`,
       l'autre y est forcé aussi. La règle serait ignorée en silence et la
       rangée rognerait le haut de la tuile agrandie. On réserve donc la
       place dans le rembourrage : une affiche agrandie à 1,07 dépasse
       d'environ 11 px de chaque côté, plus 8 px de soulèvement. */
    scroll-snap-type: x proximity;
    /* De quoi loger l'ombre portee et le soulevement, rien de plus. */
    padding: 12px 14px 16px;
    margin-bottom: var(--k-gap-m);
    scrollbar-width: none;
    -ms-overflow-style: none;
}
html[data-theme] #page-home .grid::-webkit-scrollbar,
html[data-theme] .halloween-film-grid::-webkit-scrollbar { display: none; }

html[data-theme] #page-home .grid > *,
html[data-theme] .halloween-film-grid > * {
    flex: 0 0 clamp(124px, 12.5vw, 168px);
    scroll-snap-align: start;
}

/* ==========================================================================
 * 5. LES AFFICHES
 * ========================================================================== */

html[data-theme] .card,
html[data-theme] .halloween-poster {
    background: transparent;
    border: 0;
    overflow: visible;
    transition: transform .2s cubic-bezier(.2, .7, .3, 1);
}

html[data-theme] .card .card-media,
html[data-theme] .halloween-poster {
    border-radius: var(--k-rayon-m);
    box-shadow: var(--k-ombre-1);
    outline: 1px solid var(--k-trait);
    outline-offset: -1px;
    transition: box-shadow .2s ease, outline-color .2s ease;
}
html[data-theme] .card .card-media { overflow: hidden; background: #0a0a10; }

/* Une affiche est au format 2:3. Une hauteur fixe en coupait le haut ou le
   bas selon la source. */
html[data-theme] .card .card-media img,
html[data-theme] .card .card-locked-placeholder,
html[data-theme] .halloween-poster img {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    display: block;
}

html[data-theme] .card:hover,
html[data-theme] .halloween-poster:hover {
    transform: translateY(-5px) scale(1.03);
    z-index: 3;
}
html[data-theme] .card:hover .card-media,
html[data-theme] .halloween-poster:hover {
    box-shadow: var(--k-ombre-2);
    outline-color: color-mix(in srgb, var(--k-accent) 55%, transparent);
}

html[data-theme] .card .info { padding: 8px 2px 0; }
html[data-theme] .card .info h4 {
    margin: 0;
    overflow-wrap: anywhere;
    font-size: .83rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--k-texte);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
html[data-theme] .card .info .cat {
    margin-top: 2px;
    font-size: .71rem;
    color: var(--k-texte-faible);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html[data-theme] .card .carte-note { font-size: .71rem; font-weight: 700; color: var(--k-accent); }

/* Le titre gravé sur l'affiche du thème saisonnier : il doublait le titre
   sous la carte et saturait la rangée. */
html[data-theme] .halloween-poster-title {
    font-size: clamp(10px, .9vw, 13px);
    padding: 34px 9px 10px;
}

@media (hover: hover) and (pointer: fine) {
    html[data-theme] .card .carte-fav,
    html[data-theme] .card .carte-play {
        opacity: 0;
        transition: opacity .18s ease;
    }
    html[data-theme] .card:hover .carte-fav,
    html[data-theme] .card:hover .carte-play,
    html[data-theme] .card:focus-within .carte-fav,
    html[data-theme] .card:focus-within .carte-play,
    html[data-theme] .card .carte-fav.actif { opacity: 1; }
}

html[data-theme] .quality-badge,
html[data-theme] .badge-bientot,
html[data-theme] .halloween-count {
    border-radius: 6px;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 3px 7px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ==========================================================================
 * 6. BLOCS SAISONNIERS
 * ========================================================================== */

html[data-theme] .halloween-collections {
    display: flex;
    gap: var(--k-gap-m);
    overflow-x: auto;
    padding-bottom: var(--k-gap-s);
    scrollbar-width: none;
}
html[data-theme] .halloween-collections::-webkit-scrollbar { display: none; }
html[data-theme] .halloween-collection {
    flex: 0 0 clamp(240px, 26vw, 340px);
    min-height: 200px;
    border-radius: var(--k-rayon-m);
    border-color: var(--k-trait);
    box-shadow: var(--k-ombre-1);
    transition: transform .2s ease, box-shadow .2s ease;
}
html[data-theme] .halloween-collection:hover {
    transform: translateY(-4px);
    box-shadow: var(--k-ombre-2);
}

html[data-theme] .halloween-filters { margin: var(--k-gap-l) 0; }

/* ==========================================================================
 * 7. TÉLÉPHONE
 *
 * Ce fichier est chargé APRÈS mobile-fix.css : ses règles l'emportent, y
 * compris sur ses !important, à condition d'en porter aussi.
 * ========================================================================== */

@media (max-width: 760px) {
    html[data-theme] .hero-banner {
        height: clamp(320px, 48vh, 430px) !important;
        border-radius: var(--k-rayon-m) !important;
    }
    html[data-theme] .hero-banner-content {
        max-width: 100% !important;
        padding: 0 16px 18px !important;
        gap: 8px !important;
    }
    html[data-theme] .hero-banner-content h1 { font-size: clamp(1.4rem, 6.2vw, 1.85rem) !important; }
    html[data-theme] .hero-badge { font-size: .74rem !important; }
    /* Le genre saute : c'est lui qui faisait déborder la ligne sur 375 px. */
    html[data-theme] #heroCategorie { display: none !important; }
    html[data-theme] .hero-banner-content #heroDesc { display: none !important; }

    html[data-theme] .hero-actions { gap: 8px !important; width: 100% !important; flex-wrap: nowrap !important; }
    html[data-theme] .btn-hero-watch,
    html[data-theme] .btn-hero-liste { height: 42px !important; padding: 0 16px !important; font-size: .86rem !important; }
    html[data-theme] .btn-hero-watch { flex: 1 1 auto !important; }
    html[data-theme] .btn-hero-info { display: none !important; }
    /* Le libellé se coupait : l'icône seule se comprend et le bouton garde
       son aire tactile. */
    html[data-theme] .btn-hero-liste span { display: none !important; }
    html[data-theme] .btn-hero-liste { width: 42px !important; padding: 0 !important; }
    html[data-theme] .hero-fleches { display: none !important; }

    html[data-theme] #page-home .grid,
    html[data-theme] .halloween-film-grid {
        gap: 9px !important;
        padding: 6px 0 12px !important;
        margin-bottom: var(--k-gap-m) !important;
    }
    html[data-theme] #page-home .grid > *,
    html[data-theme] .halloween-film-grid > * { flex: 0 0 37vw !important; }
    html[data-theme] .halloween-collection { flex: 0 0 74vw !important; }

    html[data-theme] .section-title,
    html[data-theme] .halloween-heading { margin: var(--k-gap-l) 0 var(--k-gap-s) !important; }

    /* Pas d'agrandissement au doigt : il n'y a pas de survol, et la carte
       sortirait du cadre pendant le défilement. */
    html[data-theme] .card:hover,
    html[data-theme] .halloween-poster:hover { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme] .card,
    html[data-theme] .halloween-poster,
    html[data-theme] .halloween-collection,
    html[data-theme] .btn-hero-watch,
    html[data-theme] .btn-hero-info,
    html[data-theme] .btn-hero-liste { transition: none !important; }
    html[data-theme] .card:hover,
    html[data-theme] .halloween-poster:hover,
    html[data-theme] .halloween-collection:hover { transform: none !important; }
}

/* ==========================================================================
 * 8. TUILES — D'APRÈS LA REFONTE 2025 DES GRANDES PLATEFORMES
 *
 * Trois partis pris repris de la refonte Netflix de mai 2025, décrits par la
 * presse spécialisée : des tuiles nettement plus grandes (on fait défiler
 * davantage, mais chaque titre se lit mieux), de l'information CONTEXTUELLE
 * posée sur la tuile — récemment ajouté, classement, qualité — et un survol
 * qui agrandit la tuile et révèle le détail.
 *
 * Ce sont des principes d'agencement, pas une copie : ni leur typographie,
 * ni leur rouge, ni leurs libellés. L'accent reste celui du thème Kinoo.
 * ========================================================================== */

/* ---- Des tuiles plus grandes ----
   124 px, c'était une vignette : le titre gravé sur l'affiche devenait
   illisible et il fallait s'approcher pour reconnaître un film. */
html[data-theme] #page-home .grid > *,
html[data-theme] .halloween-film-grid > * {
    flex: 0 0 clamp(150px, 15vw, 212px);
    /* `min-width: 0` est indispensable : un element flex a `min-width: auto`
       par defaut, ce qui lui interdit de descendre sous la largeur de son
       contenu. Un titre long imposait alors sa largeur — 304 px au lieu de
       212 — et l'affiche suivait, cassant la ligne de base de la rangee. */
    min-width: 0;
    max-width: 212px;
}

/* ---- Le survol agrandit et éclaire ----
   L'agrandissement est plus franc qu'avant (1.07) parce que c'est lui qui
   porte le geste : on survole, la tuile se détache de la rangée. Les voisines
   ne bougent pas — les décaler rendrait le pointage impossible. */
/* Partout ailleurs : un soulevement net, sans empietement. */
html[data-theme] .card:hover {
    transform: translateY(-4px);
}
/* L'agrandissement franc est reserve aux rangees, ou le rembourrage lui
   reserve la place. */
/* PAS d'agrandissement dans les rangees, essaye puis retire.
   Il a cause trois defauts successifs : tuile rognee en haut, premiere
   tuile coupee a gauche, puis de nouveau rognee en haut une fois l'origine
   de la transformation placee en bas. Chaque correction en appelait une
   autre : l'effet ne tient pas dans un conteneur qui defile, lequel rogne
   par construction ce qui sort de ses bords. Le soulevement, l'ombre et
   l'anneau d'accent suffisent a designer la tuile survolee. */
html[data-theme] #page-home .grid > .card:hover,
html[data-theme] .halloween-film-grid > .card:hover,
html[data-theme] .halloween-poster:hover {
    transform: translateY(-6px);
}
html[data-theme] .card:hover .card-media,
html[data-theme] .halloween-poster:hover {
    box-shadow: var(--k-ombre-3);
    outline-color: color-mix(in srgb, var(--k-accent) 70%, transparent);
}

/* Un voile apparaît au survol sur le bas de l'affiche : il prépare l'œil au
   détail qui monte, et il détache la tuile survolée des autres. */
html[data-theme] .card .card-media::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 55%;
    background: linear-gradient(to top, rgba(5, 5, 9, .92), rgba(5, 5, 9, 0));
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
    z-index: 1;
}
html[data-theme] .card:hover .card-media::after { opacity: 1; }

/* ---- Le détail qui monte ----
   Le bloc existe déjà dans le HTML des suggestions (.carte-survol) : on lui
   donne le geste plutôt que d'en inventer un autre. */
html[data-theme] .carte-survol {
    transform: translateY(12px);
    opacity: 0;
    transition: opacity .2s ease, transform .2s cubic-bezier(.2, .7, .3, 1);
    z-index: 2;
}
html[data-theme] .card:hover .carte-survol,
html[data-theme] .card:focus-within .carte-survol {
    transform: none;
    opacity: 1;
}
html[data-theme] .carte-survol p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    font-size: .72rem;
    line-height: 1.45;
    color: var(--k-texte-doux);
}
html[data-theme] .carte-survol-note { color: var(--k-accent); }

/* ---- L'information contextuelle sur la tuile ----
   Elle sert à décider sans ouvrir la fiche : la qualité, le classement, et
   « Bientôt » quand le lien manque encore. */
html[data-theme] .quality-badge {
    position: absolute;
    /* Les deux cotes inutilises sont annules explicitement : la regle de
       base posait `bottom` et `left`, et les laisser en place etirait la
       pastille sur toute la carte. */
    top: 8px;
    right: 8px;
    bottom: auto;
    left: auto;
    z-index: 2;
    background: rgba(8, 9, 13, .78);
    border: 1px solid var(--k-trait-fort);
    color: var(--k-texte);
}
html[data-theme] .quality-badge.quality-cam {
    border-color: color-mix(in srgb, #e8b800 45%, transparent);
    color: #f0c419;
}
html[data-theme] .badge-bientot {
    position: absolute;
    top: 8px;
    left: 8px;
    bottom: auto;
    right: auto;
    z-index: 2;
    background: color-mix(in srgb, var(--k-accent) 86%, #000);
    color: #fff;
    border: 0;
}

/* ---- Le classement, en grand ----
   Un chiffre posé à cheval sur l'affiche se lit d'un coup d'œil et donne du
   relief à la rangée, là où une pastille numérotée se confond avec le reste. */
html[data-theme] #popularGrid .rang-chiffre {
    position: absolute;
    left: -6px;
    bottom: -8px;
    top: auto;
    right: auto;
    z-index: 3;
    font-size: clamp(2.6rem, 4.2vw, 4rem);
    font-weight: 900;
    line-height: .8;
    letter-spacing: -.06em;
    color: #0b0b11;
    -webkit-text-stroke: 2px color-mix(in srgb, var(--k-accent) 85%, #fff);
    text-shadow: 0 4px 14px rgba(0, 0, 0, .7);
    pointer-events: none;
}
/* La tuile classée doit laisser dépasser son chiffre. */
html[data-theme] #popularGrid .card,
html[data-theme] #popularGrid .card-media { overflow: visible; }
html[data-theme] #popularGrid .card-media img { border-radius: var(--k-rayon-m); }

/* ---- Les boutons d'action, plus lisibles au survol ---- */
html[data-theme] .card .carte-play {
    z-index: 3;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
html[data-theme] .card .carte-fav { z-index: 3; }

@media (max-width: 760px) {
    /* Sur téléphone on garde des tuiles généreuses — deux et demie à
       l'écran — sans aller jusqu'à l'agrandissement, qui n'a pas de sens
       au doigt. */
    html[data-theme] #page-home .grid > *,
    html[data-theme] .halloween-film-grid > * { flex: 0 0 40vw !important; }
    html[data-theme] .carte-survol { display: none !important; }
    html[data-theme] #popularGrid .rang-chiffre {
        font-size: 2.2rem !important;
        left: -2px !important;
        bottom: -4px !important;
    }
}

/* ==========================================================================
 * 9. FLÈCHES DE DÉFILEMENT DES RANGÉES
 *
 * Masquer la barre de défilement sans mettre de commande à la place rendait
 * les rangées inutilisables à la souris. Le cadre est posé par
 * js/rangees.js autour de chaque rangée ; ici on ne fait que l'habiller.
 * ========================================================================== */

html[data-theme] .k-rangee {
    position: relative;
}

html[data-theme] .k-rangee-fleche {
    position: absolute;
    top: 0;
    bottom: 34px;          /* s'arrête au-dessus des titres sous les affiches */
    width: 54px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0;
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity .18s ease, background .18s ease;
}
html[data-theme] .k-rangee-arriere {
    left: 0;
    right: auto;
    border-radius: var(--k-rayon-m) 0 0 var(--k-rayon-m);
    background: linear-gradient(to right, rgba(5, 5, 9, .88), rgba(5, 5, 9, 0));
}
html[data-theme] .k-rangee-avant {
    right: 0;
    left: auto;
    border-radius: 0 var(--k-rayon-m) var(--k-rayon-m) 0;
    background: linear-gradient(to left, rgba(5, 5, 9, .88), rgba(5, 5, 9, 0));
}

/* Visibles à l'approche, et toujours au clavier : une commande qu'on ne
   peut atteindre qu'à la souris n'existe pas pour tout le monde. */
html[data-theme] .k-rangee:hover .k-rangee-fleche,
html[data-theme] .k-rangee-fleche:focus-visible { opacity: 1; }
html[data-theme] .k-rangee-fleche:hover { color: var(--k-accent); }
html[data-theme] .k-rangee-fleche[hidden] { display: none; }

/* Sur écran tactile il n'y a pas de survol, et le glissement latéral suffit :
   les flèches ne feraient que masquer une affiche. */
@media (hover: none), (max-width: 760px) {
    html[data-theme] .k-rangee-fleche { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme] .k-rangee-fleche { transition: none; }
}

/* ==========================================================================
 * 10. LES FICHES — FILM ET SÉRIE
 *
 * Même grammaire que l'accueil : une image plein cadre, un voile qui monte
 * du bas, un titre large, une ligne de repères, et une action principale
 * qu'on ne peut pas manquer. Film et série partagent les mêmes classes
 * (.fiche-*), donc la même règle habille les deux.
 * ========================================================================== */

html[data-theme] .fiche-hero {
    min-height: clamp(380px, 56vh, 560px);
    /* Les quatre coins, comme le heros de laccueil. La page impose un
       retrait lateral a tout son contenu ; avec des coins carres en haut,
       ce retrait se lisait comme un defaut dalignement plutot que comme un
       panneau pose dans la page. On assume donc le retrait au lieu de
       forcer un plein cadre en 100vw, qui inclut la barre de defilement et
       provoquerait un debordement horizontal. */
    border-radius: var(--k-rayon-l);
    overflow: hidden;
    margin-top: var(--k-gap-s);
    box-shadow: var(--k-ombre-3);
}

/* Le voile, en trois couches comme sur l'accueil : sombre en bas où vit le
   texte, dégradé sur la gauche, et un léger voile général qui tient le
   contraste quand l'image de fond est claire. */
html[data-theme] .fiche-hero-voile {
    background:
        linear-gradient(0deg, rgba(5, 5, 8, .97) 0%, rgba(5, 5, 8, .72) 32%, rgba(5, 5, 8, 0) 72%),
        linear-gradient(90deg, rgba(5, 5, 8, .88) 0%, rgba(5, 5, 8, .35) 46%, rgba(5, 5, 8, 0) 80%),
        linear-gradient(0deg, rgba(5, 5, 8, .14), rgba(5, 5, 8, .14));
}

html[data-theme] .fiche-hero-contenu {
    gap: clamp(18px, 2.4vw, 34px);
    padding-bottom: clamp(22px, 4vh, 40px);
}

/* L'affiche : un objet posé sur l'image, pas un cadre blanc découpé. */
html[data-theme] .fiche-affiche {
    border-radius: var(--k-rayon-m);
    border: 0;
    box-shadow: var(--k-ombre-3);
    outline: 1px solid var(--k-trait);
    outline-offset: -1px;
}

html[data-theme] .fiche-texte h1,
html[data-theme] .fiche-texte h2 {
    font-size: clamp(1.7rem, 3.2vw, 2.9rem);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -.028em;
    text-wrap: balance;
    margin: 0 0 10px;
}

/* Les repères sur une ligne, séparés par des points — comme sur l'accueil,
   pour que les deux pages se lisent de la même façon. */
html[data-theme] .fiche-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-bottom: 12px;
}
html[data-theme] .fiche-note { color: var(--k-accent); font-weight: 800; }
html[data-theme] .fiche-pastille,
html[data-theme] .fiche-age,
html[data-theme] .fiche-duree {
    border-radius: 6px;
    padding: 3px 9px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .07);
    border: 1px solid var(--k-trait);
    color: var(--k-texte-doux);
}

html[data-theme] .fiche-resume {
    max-width: 62ch;
    color: var(--k-texte-doux);
    font-size: .95rem;
    line-height: 1.6;
}

/* ---- Les actions ----
   Toutes à la même hauteur : la rangée de boutons de hauteurs et de rayons
   différents était ce qui donnait son air bricolé à la fiche. */
html[data-theme] .fiche-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--k-gap-s);
    margin-top: var(--k-gap-m);
}
html[data-theme] .fiche-btn-lecture,
html[data-theme] .fiche-btn-second {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 20px;
    border-radius: var(--k-rayon-s);
    font-size: .94rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
html[data-theme] .fiche-btn-lecture {
    border: 0;
    padding: 0 26px;
    background: var(--k-accent);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--k-accent) 32%, transparent);
}
html[data-theme] .fiche-btn-second {
    border: 1px solid var(--k-trait-fort);
    background: rgba(18, 18, 24, .6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--k-texte);
}
html[data-theme] .fiche-btn-lecture:hover,
html[data-theme] .fiche-btn-second:hover { transform: translateY(-1px); }
html[data-theme] .fiche-btn-second:hover { border-color: var(--k-accent); }
/* Supprimer ne doit jamais ressembler aux autres : c'est irréversible. */
html[data-theme] .fiche-btn-danger:hover {
    border-color: var(--theme-danger, #dc143c);
    color: var(--theme-danger, #dc143c);
}

html[data-theme] .fiche-retour {
    border-radius: 999px;
    border: 1px solid var(--k-trait-fort);
    background: rgba(8, 9, 13, .6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ---- Les onglets ---- */
html[data-theme] .detail-tabs {
    gap: var(--k-gap-l);
    border-bottom: 1px solid var(--k-trait);
}
html[data-theme] .detail-tabs > * {
    padding-bottom: 12px;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--k-texte-faible);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .16s ease, border-color .16s ease;
}
html[data-theme] .detail-tabs > *:hover { color: var(--k-texte-doux); }
html[data-theme] .detail-tabs > .active,
html[data-theme] .detail-tabs > [aria-selected="true"] {
    color: var(--k-texte);
    border-bottom-color: var(--k-accent);
}

/* ---- Les épisodes ----
   Une liste d'épisodes se parcourt de haut en bas : on garde la liste, on
   lui donne de l'air et une vignette qui se détache.  */
html[data-theme] .episode {
    border-radius: var(--k-rayon-m);
    border: 1px solid transparent;
    transition: background .16s ease, border-color .16s ease;
}
html[data-theme] .episode:hover {
    background: rgba(255, 255, 255, .04);
    border-color: var(--k-trait);
}
html[data-theme] .episode-vignette {
    border-radius: var(--k-rayon-s);
    outline: 1px solid var(--k-trait);
    outline-offset: -1px;
}
html[data-theme] .episode-barre span { background: var(--k-accent); }

@media (max-width: 760px) {
    html[data-theme] .fiche-hero {
        min-height: clamp(300px, 46vh, 420px) !important;
        border-radius: var(--k-rayon-m) !important;
    }
    html[data-theme] .fiche-texte h1,
    html[data-theme] .fiche-texte h2 { font-size: clamp(1.3rem, 5.8vw, 1.8rem) !important; }
    html[data-theme] .fiche-resume {
        display: -webkit-box !important;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    html[data-theme] .fiche-btn-lecture { flex: 1 1 auto !important; }
    html[data-theme] .detail-tabs { gap: var(--k-gap-m) !important; overflow-x: auto; }
}

/* Le bouton de reprise de serie serrait son libelle : « Commencer S1 E1 »
   se chevauchait. */
html[data-theme] .fiche-reprise,
html[data-theme] .serie-commencer,
html[data-theme] .btn-commencer {
    white-space: nowrap;
    gap: 8px;
    padding: 0 20px;
    height: 44px;
    display: inline-flex;
    align-items: center;
}

/* ==========================================================================
 * 11. LES BOUTONS DE LA FICHE FILM
 *
 * La fiche film et la fiche serie ne partagent pas leurs classes de
 * boutons : la serie utilise .fiche-btn-second, le film utilise .btn-vote,
 * .btn-list, .btn-edit et .btn-del. La regle precedente n'habillait donc
 * que la serie, et le film gardait ses pastilles de hauteurs et de rayons
 * disparates.
 *
 * Les boutons a icone SEULE restent ronds — c'est leur forme juste, et elle
 * les distingue des actions nommees. Les boutons a libelle prennent le meme
 * rayon que « Regarder », pour que la rangee se lise comme un ensemble.
 * ========================================================================== */

html[data-theme] .fiche-actions .btn-vote,
html[data-theme] .fiche-actions .btn-list,
html[data-theme] .fiche-actions .btn-edit,
html[data-theme] .fiche-actions .btn-del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    border: 1px solid var(--k-trait-fort);
    background: rgba(18, 18, 24, .6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--k-texte);
    font-size: .94rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .14s ease, border-color .14s ease, color .14s ease;
}

/* Icone seule : un cercle. La forme dit « action breve », et evite un
   rectangle presque carre qui aurait l'air d'un bouton rate. */
html[data-theme] .fiche-actions .btn-vote {
    width: 46px;
    padding: 0;
    border-radius: 50%;
}

/* Avec un libelle : meme rayon que le bouton principal. */
html[data-theme] .fiche-actions .btn-list,
html[data-theme] .fiche-actions .btn-edit,
html[data-theme] .fiche-actions .btn-del {
    padding: 0 20px;
    border-radius: var(--k-rayon-s);
}

html[data-theme] .fiche-actions .btn-vote:hover,
html[data-theme] .fiche-actions .btn-list:hover,
html[data-theme] .fiche-actions .btn-edit:hover {
    transform: translateY(-1px);
    border-color: var(--k-accent);
    color: var(--k-accent);
}

/* Un vote deja donne est un etat, pas une action a decouvrir. */
html[data-theme] .fiche-actions .btn-vote.actif,
html[data-theme] .fiche-actions .btn-list.actif,
html[data-theme] .fiche-actions .btn-vote[aria-pressed="true"],
html[data-theme] .fiche-actions .btn-list[aria-pressed="true"] {
    border-color: var(--k-accent);
    color: var(--k-accent);
}

/* Supprimer ne doit jamais ressembler aux autres : c'est irreversible. */
html[data-theme] .fiche-actions .btn-del:hover {
    transform: translateY(-1px);
    border-color: var(--theme-danger, #dc143c);
    color: var(--theme-danger, #dc143c);
}

/* Les actions reservees au staff s'effacent un peu : elles ne sont pas ce
   qu'un visiteur vient faire sur la fiche. */
html[data-theme] .fiche-actions .btn-edit,
html[data-theme] .fiche-actions .btn-del {
    font-size: .86rem;
    font-weight: 600;
    color: var(--k-texte-doux);
    border-color: var(--k-trait);
}

@media (max-width: 760px) {
    html[data-theme] .fiche-actions .btn-vote,
    html[data-theme] .fiche-actions .btn-list,
    html[data-theme] .fiche-actions .btn-edit,
    html[data-theme] .fiche-actions .btn-del { height: 42px !important; }
    html[data-theme] .fiche-actions .btn-vote { width: 42px !important; }
}

/* ==========================================================================
 * 12. LA BARRE DU LECTEUR
 *
 * Avant : quatre blocs en position fixed, chacun place a la main. Le bloc
 * d'etat et le texte d'aide se chevauchaient, d'ou la phrase coupee en
 * plein milieu. On passe a UNE barre en flux : plus de coordonnees, donc
 * plus de recouvrement possible.
 *
 * Elle se lit sur deux lignes : la source et son etat d'abord, parce que
 * c'est ce qu'on vient chercher quand un lecteur ne demarre pas ; l'aide
 * ensuite, en retrait.
 * ========================================================================== */

html[data-theme] .player-barre {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;            /* sinon la barre s'etire sur toute la hauteur */
    z-index: 10001;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    /* 84 px a droite : la croix de fermeture vit la. */
    padding: 14px 84px 18px 20px;
    pointer-events: none;    /* le voile laisse passer le clic vers la video */
    background: linear-gradient(to bottom, rgba(4, 4, 8, .92) 0%, rgba(4, 4, 8, .62) 55%, rgba(4, 4, 8, 0) 100%);
}
html[data-theme] .player-barre > * { pointer-events: auto; }

/* Les trois blocs reprennent leur place dans le flux. */
html[data-theme] .player-barre .choix-lecteur,
html[data-theme] .player-barre .reader-status,
html[data-theme] .player-barre .lecteur-aide,
html[data-theme] .player-barre .player-nav {
    position: static !important;
    inset: auto !important;
    margin: 0;
    max-width: none;
}

/* ---- Le choix de la source ---- */
html[data-theme] .player-barre .choix-lecteur {
    display: flex;
    align-items: center;
    gap: 9px;
}
html[data-theme] .player-barre .choix-lecteur label {
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--k-texte-faible, #8b8b99);
}
html[data-theme] .player-barre .choix-lecteur select {
    height: 34px;
    padding: 0 30px 0 12px;
    border-radius: var(--k-rayon-s, 8px);
    border: 1px solid var(--k-trait-fort, rgba(255, 255, 255, .18));
    background: rgba(16, 16, 22, .9);
    color: var(--k-texte, #f2f2f5);
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
}
html[data-theme] .player-barre .choix-lecteur select:hover {
    border-color: var(--k-accent, #ff3b4e);
}

/* ---- L'etat du lecteur ----
   Une pastille coloree porte l'information ; les trois boutons ne sont la
   que pour la corriger, donc ils s'effacent jusqu'au survol. */
html[data-theme] .player-barre .reader-status {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 34px;
    padding: 0 12px;
    border-radius: var(--k-rayon-s, 8px);
    border: 1px solid var(--k-trait, rgba(255, 255, 255, .1));
    background: rgba(16, 16, 22, .82);
    font-size: .78rem;
    color: var(--k-texte-doux, #c9c9d4);
    white-space: nowrap;
}
html[data-theme] .player-barre .reader-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: #8b8b99;
}
html[data-theme] .player-barre .reader-status[data-state="ok"] .reader-status-dot { background: #37d07a; }
html[data-theme] .player-barre .reader-status[data-state="error"] .reader-status-dot { background: var(--theme-danger, #e23c54); }

html[data-theme] .player-barre .reader-status-actions {
    display: flex;
    gap: 6px;
    opacity: .5;
    transition: opacity .15s ease;
}
html[data-theme] .player-barre .reader-status:hover .reader-status-actions,
html[data-theme] .player-barre .reader-status:focus-within .reader-status-actions { opacity: 1; }
html[data-theme] .player-barre .reader-status-actions button {
    height: 24px;
    padding: 0 9px;
    border-radius: 6px;
    border: 1px solid var(--k-trait, rgba(255, 255, 255, .1));
    background: rgba(255, 255, 255, .05);
    color: var(--k-texte-doux, #c9c9d4);
    font-size: .7rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}
html[data-theme] .player-barre .reader-status-actions button:hover {
    background: rgba(255, 255, 255, .11);
    border-color: var(--k-accent, #ff3b4e);
    color: var(--k-texte, #f2f2f5);
}

/* ---- La navigation d'episodes, a droite ---- */
html[data-theme] .player-barre .player-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto !important;
}
html[data-theme] .player-barre .player-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-radius: var(--k-rayon-s, 8px);
    border: 1px solid var(--k-trait-fort, rgba(255, 255, 255, .18));
    background: rgba(16, 16, 22, .9);
    color: var(--k-texte, #f2f2f5);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
html[data-theme] .player-barre .player-nav-btn:hover { border-color: var(--k-accent, #ff3b4e); }
html[data-theme] .player-barre .player-nav-btn:disabled { opacity: .35; cursor: default; }

/* ---- L'aide, sur sa propre ligne ----
   flex-basis 100 % la renvoie a la ligne : c'est du texte explicatif, il ne
   doit pas disputer sa place aux commandes. */
html[data-theme] .player-barre .lecteur-aide {
    flex: 1 0 100%;
    font-size: .76rem;
    line-height: 1.45;
    color: var(--k-texte-faible, #8b8b99);
    padding: 0;
    background: none;
    border: 0;
}
html[data-theme] .player-barre .lecteur-aide[hidden] { display: none; }
html[data-theme] .player-barre .lecteur-aide a {
    color: var(--k-accent, #ff3b4e);
    font-weight: 600;
    text-decoration: none;
    margin-left: 6px;
}
html[data-theme] .player-barre .lecteur-aide a:hover { text-decoration: underline; }

/* ---- Les deux boutons de coin ---- */
html[data-theme] .player-overlay .close-btn,
html[data-theme] .player-overlay .player-plein-ecran {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--k-trait, rgba(255, 255, 255, .1));
    background: rgba(12, 12, 18, .72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--k-texte, #f2f2f5);
    cursor: pointer;
    z-index: 10002;
    transition: background .14s ease, border-color .14s ease;
}
html[data-theme] .player-overlay .close-btn:hover {
    background: var(--theme-danger, #e23c54);
    border-color: transparent;
}
html[data-theme] .player-overlay .player-plein-ecran:hover {
    background: rgba(255, 255, 255, .14);
    border-color: var(--k-accent, #ff3b4e);
}

@media (max-width: 760px) {
    html[data-theme] .player-barre {
        padding: 10px 62px 14px 12px !important;
        gap: 8px 10px !important;
    }
    /* Au doigt, les trois boutons de correction prennent plus de place que
       la video : on garde la pastille et le libelle, qui informent. */
    html[data-theme] .player-barre .reader-status-actions { display: none !important; }
    html[data-theme] .player-barre .lecteur-aide { font-size: .7rem !important; }
    html[data-theme] .player-barre .player-nav { margin-left: 0 !important; flex: 1 0 100%; }
    html[data-theme] .player-barre .player-nav-btn {
        flex: 1 1 0;
        justify-content: center;
        padding: 0 8px !important;
        font-size: .74rem !important;
    }
}

/* ---- Retouches mesurees apres coup ----
   Le lien « Signaler sur Discord » heritait d'un fond bleu Discord sur lequel
   mon accent orange devenait illisible, et il ressemblait a un bouton d'action
   alors que c'est le dernier recours d'une phrase d'aide. On le rend au texte.
   La croix de fermeture, elle, etait a 60 % d'opacite : trop discrete pour la
   seule sortie du lecteur. */
html[data-theme] .player-barre .lecteur-aide a {
    background: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}
html[data-theme] .player-overlay .close-btn { opacity: 1 !important; }

/* ==========================================================================
 * 13. POPUP COMMUNAUTE
 *
 * En bas a DROITE : le bouton « Une idee ? » occupe deja le coin gauche.
 * Elle reste etroite et sans fond opaque plein ecran — une invitation n'a
 * pas a bloquer la page.
 * ========================================================================== */

html[data-theme] .communaute-popup {
    position: fixed;
    right: 20px;
    bottom: 20px;
    left: auto;              /* sinon le bloc s'etire sur toute la largeur */
    top: auto;
    z-index: 9000;           /* sous le lecteur (9999), au-dessus du reste */
    width: min(320px, calc(100vw - 40px));
    padding: 18px 18px 16px;
    border-radius: var(--k-rayon-m, 14px);
    border: 1px solid var(--k-trait-fort, rgba(255, 255, 255, .18));
    background: rgba(14, 14, 20, .94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--k-ombre-3, 0 18px 50px rgba(0, 0, 0, .55));
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .24s ease, transform .24s cubic-bezier(.2, .7, .3, 1);
}
html[data-theme] .communaute-popup.communaute-visible {
    opacity: 1;
    transform: none;
}

/* Une barre d'accent en haut, comme les conteneurs d'annonce Discord. */
html[data-theme] .communaute-popup::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    border-radius: var(--k-rayon-m, 14px) var(--k-rayon-m, 14px) 0 0;
    background: var(--k-accent, #ff3b4e);
}

html[data-theme] .communaute-fermer {
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: auto;
    left: auto;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    color: var(--k-texte-faible, #8b8b99);
    font-size: .72rem;
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}
html[data-theme] .communaute-fermer:hover {
    background: rgba(255, 255, 255, .13);
    color: var(--k-texte, #f2f2f5);
}

html[data-theme] .communaute-surtitre {
    margin: 0 0 6px;
    padding-right: 26px;      /* la croix vit la */
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--k-accent, #ff3b4e);
}
html[data-theme] .communaute-message {
    margin: 0 0 14px;
    font-size: .86rem;
    line-height: 1.5;
    color: var(--k-texte-doux, #c9c9d4);
}

html[data-theme] .communaute-boutons {
    display: flex;
    gap: 8px;
}
html[data-theme] .communaute-btn {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 38px;
    padding: 0 12px;
    border-radius: var(--k-rayon-s, 8px);
    border: 1px solid transparent;
    font-size: .84rem;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    transition: transform .14s ease, filter .14s ease;
}
html[data-theme] .communaute-btn:hover { transform: translateY(-1px); filter: brightness(1.12); }
/* Les deux couleurs de marque : c'est a elles qu'on reconnait le service
   d'un coup d'oeil, bien plus qu'au libelle. */
html[data-theme] .communaute-btn-discord { background: #5865f2; }
html[data-theme] .communaute-btn-telegram { background: #229ed9; }

@media (max-width: 760px) {
    html[data-theme] .communaute-popup {
        right: 12px !important;
        left: 12px !important;
        /* Au-dessus du bouton « Une idee ? », qui vit en bas a gauche. */
        bottom: 76px !important;
        width: auto !important;
    }
}

/* ==========================================================================
 * 9. IDENTITÉ ORIGINALE — KINOO, ENTRE CINE-CLUB ET CATALOGUE
 *
 * Le rouge et la trame restent propres à Kinoo ; la navigation nette, le
 * carrousel cinématographique et les repères en pastilles rapprochent l'accueil
 * des références sans reprendre leur identité.
 * ========================================================================== */

html[data-theme="original"] body {
    background-color: #08080d !important;
    background-image:
        linear-gradient(rgba(255, 35, 55, .014) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 35, 55, .014) 1px, transparent 1px),
        radial-gradient(ellipse at 50% -12%, rgba(255, 35, 55, .11), transparent 56%),
        linear-gradient(#08080d, #08080d) !important;
    background-size: 72px 72px, 72px 72px, 100% 900px, auto !important;
    background-position: 0 0, 0 0, center top, center !important;
    background-attachment: fixed !important;
}

html[data-theme="original"] #site-content > header {
    background: rgba(8, 8, 13, .88);
    border-bottom-color: rgba(255, 255, 255, .08);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .2);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

html[data-theme="original"] #mainNav a,
html[data-theme="original"] #mainNav .nav-explorer-btn {
    border-radius: 999px;
    transition: color .18s ease, background-color .18s ease;
}

html[data-theme="original"] #mainNav a.active-link {
    padding-right: 12px;
    padding-left: 12px;
    background: rgba(255, 59, 78, .11);
    color: #fff;
}

html[data-theme="original"] #mainNav a.active-link::after {
    content: none;
}

html[data-theme="original"] #mainNav a:hover,
html[data-theme="original"] #mainNav .nav-explorer-btn:hover {
    color: #fff;
}

@media (min-width: 761px) and (max-width: 1640px) {
    html[data-theme="original"] #site-content > header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto auto;
        align-items: center;
        gap: 8px 16px;
        padding: 10px 24px;
    }

    html[data-theme="original"] #site-content > header > .header-top-row {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        justify-content: flex-start;
    }

    html[data-theme="original"] #site-content > header > #mainNav {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    html[data-theme="original"] #site-content > header > #mainNav::-webkit-scrollbar {
        display: none;
    }

    html[data-theme="original"] #mainNav > * {
        flex: 0 0 auto;
    }

    html[data-theme="original"] #site-content > header > .search-header {
        grid-column: 1 / -1;
        grid-row: 3;
        width: 100%;
        max-width: none;
        min-width: 0;
        margin: 0;
    }

    html[data-theme="original"] #site-content > header > .header-actions {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }
}

@media (min-width: 1440px) and (max-width: 1640px) {
    html[data-theme="original"] #site-content > header {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    html[data-theme="original"] #mainNav a,
    html[data-theme="original"] #mainNav .nav-explorer-btn {
        gap: 5px;
        padding: 7px 8px;
        font-size: .76rem;
    }

    html[data-theme="original"] #mainNav a.active-link {
        padding-right: 9px;
        padding-left: 9px;
    }

    html[data-theme="original"] #site-content > header > #mainNav {
        grid-column: 2;
        grid-row: 1;
    }

    html[data-theme="original"] #site-content > header > .header-actions {
        grid-column: 3;
    }

    html[data-theme="original"] #site-content > header > .search-header {
        grid-row: 2;
    }
}

html[data-theme="original"] .hero-banner {
    height: clamp(460px, 64svh, 660px);
    min-height: 460px;
    margin-bottom: clamp(28px, 4vw, 54px);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 20px;
    background-color: #111116;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .46);
}

html[data-theme="original"] .hero-banner-gradient {
    background:
        linear-gradient(90deg, rgba(5, 5, 8, .97) 0%, rgba(5, 5, 8, .88) 27%, rgba(5, 5, 8, .5) 55%, rgba(5, 5, 8, .04) 86%),
        linear-gradient(0deg, rgba(5, 5, 8, .92) 0%, rgba(5, 5, 8, .34) 34%, transparent 68%);
}

html[data-theme="original"] #heroFondA,
html[data-theme="original"] #heroFondB {
    background-position: center 35%;
}

html[data-theme="original"] .hero-banner-content {
    max-width: min(700px, 58%);
    padding: 0 0 clamp(38px, 5vw, 72px) clamp(28px, 5.4vw, 82px);
    gap: 16px;
}

html[data-theme="original"] .hero-banner-content::before {
    content: 'À LA UNE  /  SÉLECTION KINOO';
    display: block;
    order: 0;
    margin: 0 0 2px;
    color: #ff7180;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
}

html[data-theme="original"] .hero-banner-content h1 {
    order: 1 !important;
    max-width: 14ch;
    font-size: clamp(2.45rem, 4.8vw, 4.35rem);
    line-height: .99;
    letter-spacing: -.045em;
    text-transform: none;
}

html[data-theme="original"] .hero-banner-content .hero-badges {
    order: 2 !important;
    flex-wrap: wrap;
    gap: 8px;
    overflow: visible;
}

html[data-theme="original"] .hero-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 8px;
    background: rgba(15, 15, 21, .66);
    color: #e7e8ed;
    font-size: .74rem;
    font-weight: 700;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

html[data-theme="original"] .hero-badge + .hero-badge::before {
    content: none;
}

html[data-theme="original"] #heroCategorie {
    max-width: min(34ch, 40vw);
}

html[data-theme="original"] .hero-badge-note {
    border-color: rgba(255, 190, 61, .28);
    background: rgba(255, 190, 61, .12);
    color: #ffd369;
}

html[data-theme="original"] .hero-banner-content #heroDesc {
    order: 3;
    max-width: 58ch;
    color: rgba(241, 242, 247, .82);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

html[data-theme="original"] .hero-actions {
    order: 4;
    gap: 11px;
    margin-top: 4px;
}

html[data-theme="original"] .btn-hero-watch,
html[data-theme="original"] .btn-hero-info,
html[data-theme="original"] .btn-hero-liste {
    height: 52px;
    padding: 0 24px;
    border-radius: 12px;
    font-size: .95rem;
}

html[data-theme="original"] .btn-hero-watch {
    background: linear-gradient(120deg, #ff4357, #e51e3b);
    box-shadow: 0 10px 28px rgba(255, 45, 66, .3);
}

html[data-theme="original"] .btn-hero-watch:hover {
    box-shadow: 0 12px 34px rgba(255, 45, 66, .44);
}

@media (min-width: 901px) {
    html[data-theme="original"] #page-home .hero-fleches {
        position: absolute !important;
        top: 50% !important;
        right: 28px !important;
        bottom: auto !important;
        left: auto !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        width: auto !important;
        transform: translateY(-50%) !important;
        opacity: .82;
        transition: opacity .2s ease;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    html[data-theme="original"] #page-home .hero-banner:hover .hero-fleches,
    html[data-theme="original"] #page-home .hero-banner:focus-within .hero-fleches,
    html[data-theme="original"] #page-home .hero-fleches:hover {
        opacity: 1;
    }

    html[data-theme="original"] #page-home .hero-arrow {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: inline-flex !important;
        visibility: visible !important;
        pointer-events: auto !important;
        flex: 0 0 48px !important;
        width: 48px;
        height: 48px;
        border: 1px solid rgba(255, 255, 255, .22);
        background: rgba(10, 10, 14, .72);
        opacity: 1;
        transform: none !important;
    }

    html[data-theme="original"] #page-home .hero-arrow:hover {
        background: var(--k-accent);
        transform: scale(1.05) !important;
    }
}

@media (min-width: 901px) and (hover: none) {
    html[data-theme="original"] #page-home .hero-fleches {
        opacity: .95;
    }
}

html[data-theme="original"] .section-title h2::before {
    width: 3px;
    height: 1em;
    box-shadow: 0 0 18px rgba(255, 59, 78, .42);
}

html[data-theme="original"] #page-home.active {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

html[data-theme="original"] #page-home > .encart-demande {
    order: 20;
    margin-top: 52px;
    border-radius: 16px;
}

html[data-theme="original"] #page-home > .section-title {
    margin: 34px 0 10px;
    padding: 0 0 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

html[data-theme="original"] #page-home > .section-title h2 {
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    letter-spacing: -.035em;
}

html[data-theme="original"] #page-home .grid {
    gap: clamp(14px, 1.6vw, 22px);
    padding: 14px 2px 22px;
    margin-bottom: 8px;
}

html[data-theme="original"] #page-home .grid > * {
    flex-basis: clamp(148px, 14vw, 196px);
}

html[data-theme="original"] #page-home .card .card-media {
    border-radius: 12px;
    outline: 0;
    border-color: rgba(255, 255, 255, .09);
    box-shadow: 0 8px 25px rgba(0, 0, 0, .34);
}

html[data-theme="original"] #page-home .card:hover .card-media {
    border-color: rgba(255, 59, 78, .62);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .46), 0 0 22px rgba(255, 59, 78, .1);
}

html[data-theme="original"] #page-home .card .info {
    padding: 10px 2px 0;
}

html[data-theme="original"] #page-home .card .info h4 {
    font-size: .9rem;
    letter-spacing: -.01em;
}

html[data-theme="original"] #page-home .category-tiles {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin: 18px 0 28px;
}

html[data-theme="original"] #page-home .category-tile {
    height: 104px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    box-shadow: 0 7px 20px rgba(0, 0, 0, .22);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

html[data-theme="original"] #page-home .category-tile::before {
    background: linear-gradient(0deg, rgba(6, 6, 10, .95), rgba(6, 6, 10, .08) 88%);
}

html[data-theme="original"] #page-home .category-tile:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 59, 78, .55);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .36);
}

html[data-theme="original"] #page-home .category-tile-body {
    padding: 13px 14px;
}

html[data-theme="original"] #page-home .category-tile-body h4 {
    font-size: .94rem;
    letter-spacing: -.01em;
}

html[data-theme="original"] #page-home .category-tile-body span {
    color: rgba(235, 237, 243, .72);
    font-size: .72rem;
}

@media (max-width: 760px) {
    html[data-theme="original"] .hero-banner {
        min-height: 0;
        margin-bottom: 28px;
        border-radius: 14px;
    }

    html[data-theme="original"] .hero-banner-content {
        gap: 8px;
    }

    html[data-theme="original"] .hero-banner-content::before {
        font-size: .58rem;
        letter-spacing: .12em;
    }

    html[data-theme="original"] .hero-banner-content h1 {
        max-width: 18ch;
        letter-spacing: -.035em;
    }

    html[data-theme="original"] .hero-banner-content #heroDesc {
        font-size: .84rem;
    }

    html[data-theme="original"] .btn-hero-watch,
    html[data-theme="original"] .btn-hero-info,
    html[data-theme="original"] .btn-hero-liste {
        height: 42px;
        border-radius: 10px;
    }

    html[data-theme="original"] .hero-badge {
        min-height: 24px;
        padding: 3px 8px;
        font-size: .69rem;
    }

    html[data-theme="original"] #page-home > .section-title {
        margin-top: 26px !important;
        padding-bottom: 9px;
    }

    html[data-theme="original"] #page-home .grid {
        padding-right: 1px;
        padding-left: 1px;
    }

    html[data-theme="original"] #page-home .category-tiles {
        gap: 8px;
        margin-bottom: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme="original"] #mainNav a,
    html[data-theme="original"] #mainNav .nav-explorer-btn,
    html[data-theme="original"] #page-home .hero-fleches,
    html[data-theme="original"] #page-home .category-tile {
        transition: none;
    }
}

/* ==========================================================================
 * 10. SIGNATURE KINOO — UNE AFFICHE, UNE FICHE ÉDITORIALE
 *
 * Le hero quitte la composition plein cadre des plateformes de streaming :
 * l'image devient un panneau de film et les informations ont leur propre
 * surface éditoriale.
 * ========================================================================== */

html[data-theme="original"] body {
    background-color: #0b090d !important;
    background-image:
        radial-gradient(ellipse at 84% 2%, rgba(150, 28, 44, .14), transparent 38%),
        linear-gradient(135deg, rgba(255, 255, 255, .012) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .012) 50%, rgba(255, 255, 255, .012) 75%, transparent 75%) !important;
    background-size: auto, 7px 7px !important;
}

html[data-theme="original"] #site-content > header {
    border-bottom-color: rgba(255, 59, 78, .28);
    box-shadow: 0 5px 22px rgba(0, 0, 0, .36);
}

html[data-theme="original"] #mainNav a,
html[data-theme="original"] #mainNav .nav-explorer-btn {
    border-radius: 3px;
}

html[data-theme="original"] #mainNav a.active-link {
    padding-right: 10px;
    padding-left: 10px;
    border-bottom: 2px solid #ff4357;
    background: transparent;
    color: #fff;
}

html[data-theme="original"] #mainNav a.active-link::after {
    content: none;
}

html[data-theme="original"] .search-header {
    border-radius: 5px;
}

html[data-theme="original"] .hero-banner {
    display: block;
    height: clamp(450px, 58vw, 590px);
    min-height: 450px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-top: 3px solid #e8364a;
    border-radius: 5px 24px 5px 5px;
    background: #171219;
    box-shadow: 0 26px 64px rgba(0, 0, 0, .48);
}

html[data-theme="original"] #heroFondA,
html[data-theme="original"] #heroFondB {
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    width: 61%;
    height: 100%;
    background-position: center 36%;
    clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
}

html[data-theme="original"] .hero-banner-gradient {
    background:
        linear-gradient(90deg, transparent 28%, rgba(16, 12, 17, .08) 38%, rgba(16, 12, 17, .88) 53%, #171219 64%, #171219 100%),
        linear-gradient(0deg, rgba(8, 6, 10, .42), transparent 34%);
}

html[data-theme="original"] .hero-banner-content {
    width: 43%;
    max-width: none;
    height: 100%;
    margin-left: auto;
    padding: 42px clamp(28px, 3.2vw, 48px) 54px 12px;
    justify-content: center;
    gap: 17px;
}

html[data-theme="original"] .hero-banner-content::before {
    content: 'KINOO  /  SÉLECTION DU JOUR';
    margin-bottom: 4px;
    color: #ff6b78;
    font-size: .68rem;
    letter-spacing: .18em;
}

html[data-theme="original"] .hero-banner-content h1 {
    max-width: 12ch;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(2.4rem, 4.15vw, 4.2rem);
    font-weight: 700;
    line-height: .98;
    letter-spacing: -.045em;
    text-shadow: none;
}

html[data-theme="original"] .hero-banner-content .hero-badges {
    flex-wrap: wrap;
    gap: 5px 0;
    overflow: visible;
}

html[data-theme="original"] .hero-banner-content .hero-badge {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(241, 235, 240, .72);
    font-size: .73rem;
    font-weight: 700;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html[data-theme="original"] .hero-banner-content .hero-badge + .hero-badge::before {
    content: '•';
    margin: 0 9px;
    color: #e9485a;
}

html[data-theme="original"] .hero-banner-content .hero-badge-note {
    color: #f2bd63;
}

html[data-theme="original"] #heroCategorie {
    max-width: min(30ch, 100%);
}

html[data-theme="original"] .hero-banner-content #heroDesc {
    max-width: 42ch;
    color: rgba(240, 232, 239, .74);
    font-size: .92rem;
    line-height: 1.7;
    -webkit-line-clamp: 4;
    line-clamp: 4;
}

html[data-theme="original"] .hero-actions {
    width: 100% !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    margin-top: 8px;
}

html[data-theme="original"] .btn-hero-watch,
html[data-theme="original"] .btn-hero-info,
html[data-theme="original"] .btn-hero-liste {
    height: 48px;
    border-radius: 4px;
    font-size: .88rem;
}

html[data-theme="original"] .btn-hero-watch {
    background: #e8364a;
    box-shadow: none;
}

html[data-theme="original"] .btn-hero-watch:hover {
    background: #ff4357;
    box-shadow: 0 8px 24px rgba(232, 54, 74, .24);
}

html[data-theme="original"] .btn-hero-info,
html[data-theme="original"] .btn-hero-liste {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .035);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

@media (min-width: 901px) {
    html[data-theme="original"] #page-home .hero-fleches {
        top: 28px !important;
        right: 28px !important;
        transform: none !important;
    }

    html[data-theme="original"] #page-home .hero-arrow {
        flex-basis: 38px !important;
        width: 38px;
        height: 38px;
        border-radius: 4px;
        border-color: rgba(255, 255, 255, .22);
        background: rgba(14, 10, 15, .78);
    }

    html[data-theme="original"] #page-home .hero-banner-dots {
        left: 24px !important;
        right: auto !important;
        bottom: 24px !important;
        transform: none !important;
        gap: 8px !important;
        justify-content: flex-start;
    }

    html[data-theme="original"] #page-home .hero-dot-vignette {
        width: 43px !important;
        height: 62px !important;
        border: 1px solid rgba(255, 255, 255, .24);
        border-radius: 3px;
        filter: saturate(.7);
        opacity: .74;
        transition: width .18s ease, height .18s ease, opacity .18s ease, border-color .18s ease;
    }

    html[data-theme="original"] #page-home .hero-dot-vignette.active {
        width: 49px !important;
        height: 70px !important;
        border-color: #ff4357;
        box-shadow: 0 0 0 2px rgba(232, 54, 74, .24);
        filter: none;
        opacity: 1;
    }
}

html[data-theme="original"] #page-home > .section-title {
    border-bottom-color: rgba(255, 255, 255, .12);
}

html[data-theme="original"] #page-home > .section-title h2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    letter-spacing: -.02em;
}

@media (min-width: 761px) and (max-width: 1100px) {
    html[data-theme="original"] .hero-banner-content {
        width: 49%;
        padding-right: 26px;
    }

    html[data-theme="original"] .hero-actions {
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }

    html[data-theme="original"] .btn-hero-watch,
    html[data-theme="original"] .btn-hero-info,
    html[data-theme="original"] .btn-hero-liste {
        padding: 0 14px !important;
        font-size: .82rem !important;
    }

    html[data-theme="original"] #page-home .hero-banner-dots {
        display: none !important;
    }
}

@media (max-width: 900px) {
    html[data-theme="original"] .hero-banner {
        height: clamp(400px, 68vh, 540px);
        min-height: 400px;
        border-radius: 5px 18px 5px 5px;
    }

    html[data-theme="original"] #heroFondA,
    html[data-theme="original"] #heroFondB {
        right: 0;
        width: 100%;
        clip-path: none;
    }

    html[data-theme="original"] .hero-banner-gradient {
        background:
            linear-gradient(90deg, rgba(13, 9, 14, .78), rgba(13, 9, 14, .12) 100%),
            linear-gradient(0deg, #100c11 0%, rgba(16, 12, 17, .94) 15%, rgba(16, 12, 17, .22) 70%);
    }

    html[data-theme="original"] .hero-banner-content {
        width: 100%;
        max-width: min(610px, 88%) !important;
        margin: 0;
        padding: 0 0 44px clamp(22px, 5vw, 48px);
        justify-content: flex-end;
    }

    html[data-theme="original"] .hero-banner-content h1 {
        font-size: clamp(2.2rem, 6vw, 3.5rem);
    }
}

@media (max-width: 760px) {
    html[data-theme="original"] .hero-banner {
        height: clamp(360px, 54svh, 430px) !important;
        min-height: 360px;
        max-height: none !important;
        margin-bottom: 28px;
    }

    html[data-theme="original"] .hero-banner-content {
        max-width: 100% !important;
        padding: 0 16px 22px !important;
        gap: 9px;
    }

    html[data-theme="original"] .hero-banner-content::before {
        font-size: .58rem;
    }

    html[data-theme="original"] .hero-banner-content h1 {
        max-width: 17ch;
        font-size: clamp(2rem, 8vw, 2.7rem);
    }

    html[data-theme="original"] .hero-banner-content #heroDesc {
        display: -webkit-box !important;
        max-width: 48ch;
        font-size: .8rem;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    html[data-theme="original"] .hero-banner-content .hero-badge {
        font-size: .66rem;
    }

    html[data-theme="original"] .hero-actions {
        margin-top: 4px;
    }

    html[data-theme="original"] .btn-hero-watch,
    html[data-theme="original"] .btn-hero-info,
    html[data-theme="original"] .btn-hero-liste {
        height: 42px;
        padding-right: 13px;
        padding-left: 13px;
    }

    html[data-theme="original"] #page-home .hero-banner-dots {
        right: auto !important;
        bottom: 6px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme="original"] #page-home .hero-dot-vignette {
        transition: none;
    }
}

/* Police unique : remplace Inter, y compris dans les styles en ligne. */
body,
body *:not(i):not(svg):not(code):not(pre):not([style*="monospace"]),
button,
input,
select,
textarea {
    font-family: 'Poppins', sans-serif !important;
}