/* ==========================================================================
   Thème « Classique », habillage Épure (2026-11-09)
   --------------------------------------------------------------------------
   Chargé par les 4 vues du thème (pages/shows/themes/classique/{details,episode},
   pages/movies/themes/classique/{details,watch}) et limité à body.theme-classique :
   les thèmes Disney+, JustWatch et Bande-annonce auto ne le voient jamais.

   Aucune couleur écrite en dur : tout vient des réglages de l'exploitant que
   site_app.blade.php injecte (--primary-color, --detail-bg, --primary-text-color,
   --font-titles). Un exploitant vert garde des boutons verts.

   Les feuilles color-style/style-*.css posent des !important et des sélecteurs
   par id (#tab1:checked~nav …) : les règles qui doivent les battre les reprennent.
   ========================================================================== */

body.theme-classique {
    --tc-text: var(--primary-text-color, #f4f1fa);
    --tc-muted: color-mix(in srgb, var(--tc-text) 62%, transparent);
    --tc-line: color-mix(in srgb, var(--tc-text) 14%, transparent);
    --tc-surface: color-mix(in srgb, var(--tc-text) 5%, transparent);
    --tc-primary-soft: color-mix(in srgb, var(--primary-color) 16%, transparent);
    --tc-primary-ink: color-mix(in srgb, var(--primary-color) 72%, var(--tc-text));
    --tc-secondary-soft: color-mix(in srgb, var(--secondary-color, var(--primary-color)) 22%, transparent);
    --tc-secondary-ink: color-mix(in srgb, var(--secondary-color, var(--primary-color)) 70%, var(--tc-text));
    --tc-radius: 16px;
}

/* ---------- Scène : lecteur ou visuel à gauche, colonne de côté à droite ---------- */

body.theme-classique .tc-scene {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 32px;
    width: 95%;
    max-width: 1480px;
    margin: 0 auto;
    align-items: start;
}

body.theme-classique .tc-scene-main {
    min-width: 0;
}

body.theme-classique .tc-scene-main > .container-fluid {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 991px) {
    body.theme-classique .tc-scene {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
}

/* ---------- Lecteur : plus de cadre, coins arrondis, ombre douce ---------- */

body.theme-classique .container-fluid.video-player-base,
body.theme-classique .container-fluid.video-player-base.bgdiva {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 8px 0 0 !important;
    max-width: none !important;
    width: 100% !important;
    border-radius: 0 !important;
}

/* Lecteur en 16:9 à toute largeur. responsive.css pose, par tranche d'écran, une hauteur de
   450 px (attribut height du <video>, repris par video.js) et des padding-top de 39 à 50 %
   pensés pour le lecteur de 800 px d'avant : dans la colonne d'Épure, cela donnait 647 × 450
   à 1 073 px et 348 × 450 sur mobile. Même chose pour les vidéos intégrées (Vimeo). */
body.theme-classique .video-player-base .video-js.vjs-16-9 {
    height: 0 !important;
    padding-top: 56.25% !important;
}
body.theme-classique .video-player-base .video-posts-video .embed-responsive {
    height: auto !important;
    aspect-ratio: 16 / 9;
}

body.theme-classique .video-player-base .video-posts-video {
    border-radius: var(--tc-radius);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35), 0 0 0 1px var(--tc-line);
}

/* Précédent / Suivant passent sous le lecteur (liens .tc-pas) : on masque les
   boutons posés sur l'image par video_scripts.blade.php, pour ce thème seulement. */
body.theme-classique.tc-pas-actif .video-js .vjs-control-bar .vjs-button.vjs-nav-prev,
body.theme-classique.tc-pas-actif .video-js .vjs-control-bar .vjs-button.buttonClass {
    display: none !important;
}

body.theme-classique .tc-pas {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

body.theme-classique .tc-pas a,
body.theme-classique .tc-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid var(--tc-line);
    background: var(--tc-surface);
    color: var(--tc-text);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: border-color .15s, background-color .15s;
}

body.theme-classique .tc-pas a:hover,
body.theme-classique .tc-pas a:focus-visible {
    border-color: var(--primary-color);
    color: var(--tc-text);
}

body.theme-classique .tc-pas .tc-pas-suivant {
    margin-left: auto;
}

/* ---------- Fiche : titre, méta, pastilles ---------- */

body.theme-classique .video-post-wrapper,
body.theme-classique .video-posts-data,
body.theme-classique .video-post-info,
body.theme-classique .video-post-info.poster-dtl-item {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

body.theme-classique .tc-scene .video-post-info {
    max-width: none;
    padding: 24px 0 8px;
}

body.theme-classique .tc-scene .video-post-info h2 {
    font-family: var(--font-titles);
    font-weight: 800;
    font-size: clamp(24px, 2.4vw, 32px);
    letter-spacing: -.01em;
    text-transform: none;
}

body.theme-classique .poster-dtl-item ul.dtl-list-link li {
    border-right: 0;
}

/* Page épisode : la ligne « saison / épisode / durée » est un fil de lecture, pas des pastilles. */
body.theme-classique .poster-dtl-item ul.dtl-list-link.no-border li a {
    border: 0 !important;
    background: none !important;
    padding: 0 !important;
}

/* Pages de présentation : genres, bienfaits, niveau et langue en pastilles discrètes. */
body.theme-classique .poster-dtl-item ul.dtl-list-link:not(.no-border) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
}

body.theme-classique .poster-dtl-item ul.dtl-list-link:not(.no-border) li {
    margin: 0;
    padding: 0;
}

body.theme-classique .poster-dtl-item ul.dtl-list-link:not(.no-border) li a,
body.theme-classique .poster-dtl-item ul.dtl-list-link:not(.no-border) li a.bgdiva {
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
    padding: 6px 12px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--tc-primary-soft) !important;
    color: var(--tc-primary-ink) !important;
    font-size: 13px;
    font-weight: 600;
}

body.theme-classique .poster-dtl-item ul.dtl-list-link:not(.no-border) li a:hover {
    background: color-mix(in srgb, var(--primary-color) 28%, transparent) !important;
    color: var(--tc-text) !important;
}

body.theme-classique .video-post-info ul.actor-video-link {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 16px 0;
}

body.theme-classique .video-post-info ul.actor-video-link li {
    border-left: 0 !important;
    padding: 0 !important;
}

body.theme-classique .video-post-info ul.actor-video-link li a,
body.theme-classique .video-post-info ul.actor-video-link li a.bgdiva {
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
    padding: 6px 12px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--tc-primary-soft) !important;
    color: var(--tc-primary-ink) !important;
    font-size: 13px;
    font-weight: 600;
    height: auto !important;
}

body.theme-classique .video-post-info ul.actor-video-link li a:hover {
    background: color-mix(in srgb, var(--primary-color) 28%, transparent) !important;
    color: var(--tc-text) !important;
}

/* Bienfaits (a.bgdiva sur les 4 pages) : couleur secondaire de l'exploitant, pour les
   distinguer des genres, niveaux et langue. */
body.theme-classique .poster-dtl-item ul.dtl-list-link:not(.no-border) li a.bgdiva,
body.theme-classique .video-post-info ul.actor-video-link li a.bgdiva {
    background: var(--tc-secondary-soft) !important;
    color: var(--tc-secondary-ink) !important;
}

body.theme-classique .poster-dtl-item ul.dtl-list-link:not(.no-border) li a.bgdiva:hover,
body.theme-classique .video-post-info ul.actor-video-link li a.bgdiva:hover {
    background: color-mix(in srgb, var(--secondary-color, var(--primary-color)) 34%, transparent) !important;
    color: var(--tc-text) !important;
}

/* ---------- Boutons d'action : lisibles, jamais l'air éteint ---------- */

body.theme-classique .video-watch-share-item {
    gap: 10px;
}

body.theme-classique .video-watch-share-item .btn-watchlist a,
body.theme-classique .video-watch-share-item .btn-share a,
body.theme-classique .video-watch-share-item .subscribe-btn-item a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 16px !important;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    text-transform: none;
    transition: border-color .15s, background-color .15s;
}

body.theme-classique .video-watch-share-item .btn-watchlist a {
    background: var(--primary-color);
    color: var(--on-primary-color, #fff);
    border: 1px solid var(--primary-color);
}

body.theme-classique .video-watch-share-item .btn-share a,
body.theme-classique .video-watch-share-item .subscribe-btn-item a {
    background: var(--tc-surface) !important;
    color: var(--tc-text) !important;
    border: 1px solid var(--tc-line) !important;
}

body.theme-classique .video-watch-share-item .btn-share a:hover,
body.theme-classique .video-watch-share-item .btn-share a:focus-visible,
body.theme-classique .video-watch-share-item .subscribe-btn-item a:hover {
    border-color: var(--primary-color) !important;
}

/* « Donner mon avis » (sous le lecteur et dans l'onglet des avis) : couleur secondaire. */
body.theme-classique .btn-share a.nav-link[data-bs-target="#review"],
body.theme-classique .btn-share a.nav-link[data-bs-target="#review"]:hover {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    background: var(--secondary-color) !important;
    color: var(--on-secondary-color, #1d2025) !important;
    border: 1px solid var(--secondary-color) !important;
    font-size: 14px !important;
    font-weight: 700;
    text-transform: none !important;
}

body.theme-classique .btn-share a.nav-link[data-bs-target="#review"]:hover,
body.theme-classique .btn-share a.nav-link[data-bs-target="#review"]:focus-visible {
    background: color-mix(in srgb, var(--secondary-color) 86%, var(--tc-text)) !important;
}

/* « Télécharger » : discret, un lien plutôt qu'un bouton plein (style-one.css le peint en
   couleur secondaire, survol compris, avec des !important). */
body.theme-classique .subscribe-btn-item .dropdown > a.dropdown-toggle,
body.theme-classique .subscribe-btn-item .dropdown > a.dropdown-toggle:hover {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 10px 12px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--tc-muted) !important;
    font-size: 14px !important;
    font-weight: 600;
    text-transform: none !important;
    box-shadow: none !important;
}

body.theme-classique .subscribe-btn-item .dropdown > a.dropdown-toggle:hover,
body.theme-classique .subscribe-btn-item .dropdown > a.dropdown-toggle:focus-visible,
body.theme-classique .subscribe-btn-item .dropdown > a.dropdown-toggle.show {
    color: var(--tc-text) !important;
    border-color: var(--tc-line) !important;
}

/* Avis vide : le texte suivait text-white, illisible sur un fond clair. */
body.theme-classique .tc-avis-vide {
    color: var(--tc-muted);
}

body.theme-classique .video-watch-share-item .btn-watchlist a i,
body.theme-classique .video-watch-share-item .btn-share a i {
    margin: 0;
}

/* Menu de téléchargement : surface du thème au lieu du vert écrit en dur. */
body.theme-classique .dropdown-menu.show {
    background: color-mix(in srgb, var(--detail-bg, #0d0620) 88%, var(--tc-text));
    border: 1px solid var(--tc-line);
}

/* ---------- Onglets soulignés au lieu de remplis ---------- */

body.theme-classique .vfx-tabs-item nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    border-bottom: 1px solid var(--tc-line);
}

body.theme-classique .vfx-tabs-item ul li label,
body.theme-classique .vfx-tabs-item ul li label:hover,
body.theme-classique .vfx-tabs-item ul li label:active {
    width: auto;
    min-height: 0;
    float: none;
    margin: 0;
    padding: 12px 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    color: var(--tc-muted) !important;
    font-size: 16px;
    font-weight: 700 !important;
    box-shadow: none;
}

body.theme-classique .vfx-tabs-item ul li label:hover {
    color: var(--tc-text) !important;
}

body.theme-classique .vfx-tabs-item #tab1:checked ~ nav .tab1 label,
body.theme-classique .vfx-tabs-item #tab2:checked ~ nav .tab2 label,
body.theme-classique .vfx-tabs-item #tab3:checked ~ nav .tab3 label,
body.theme-classique .vfx-tabs-item #tab4:checked ~ nav .tab4 label {
    background: none !important;
    color: var(--tc-text) !important;
    box-shadow: inset 0 -3px 0 var(--primary-color);
}

body.theme-classique .vfx-tabs-item section {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 20px 0;
    color: var(--tc-text);
}

body.theme-classique .vfx-tabs-item section .description-detail-item p {
    max-width: 780px;
    line-height: 1.65;
    color: color-mix(in srgb, var(--tc-text) 86%, transparent);
}

/* ---------- Colonne de côté : « À suivre » et liste, ou « Vous pourriez aimer » ---------- */

/* Colonne dans un cadre arrondi ; son titre en est l'en-tête et reste visible pendant que la
   liste défile (2026-11-09, demande de Sébastien). */
body.theme-classique .tc-aside {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    padding: 0 10px 10px;
    border: 1px solid var(--tc-line);
    border-radius: var(--tc-radius);
    background: var(--tc-surface);
}

@media (min-width: 992px) {
    body.theme-classique .tc-aside {
        position: sticky;
        top: 96px;
        max-height: calc(100vh - 112px);
        overflow-y: auto;
        scrollbar-width: thin;
    }
}

body.theme-classique .tc-aside-titre {
    margin: 0 -10px 2px;
    padding: 14px 16px 12px 18px;
    border-bottom: 1px solid var(--tc-line);
    border-radius: var(--tc-radius) var(--tc-radius) 0 0;
    background: color-mix(in srgb, var(--detail-bg, #0d0620) 94%, var(--tc-text));
    box-shadow: inset 4px 0 0 var(--primary-color);
    color: var(--tc-text);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: .02em;
}

/* En-tête flottant : dans la colonne qui défile (grand écran), le titre reste en haut du cadre. */
@media (min-width: 992px) {
    body.theme-classique .tc-aside-titre {
        position: sticky;
        top: 0;
        z-index: 3;
    }
}

body.theme-classique .tc-a-suivre {
    display: block;
    padding: 14px;
    border-radius: 14px;
    background: var(--tc-primary-soft);
    border: 1px solid color-mix(in srgb, var(--primary-color) 40%, transparent);
    color: var(--tc-text);
    text-decoration: none;
}

body.theme-classique .tc-a-suivre:hover,
body.theme-classique .tc-a-suivre:focus-visible {
    border-color: var(--primary-color);
    color: var(--tc-text);
}

body.theme-classique .tc-a-suivre small {
    display: block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tc-muted);
}

body.theme-classique .tc-a-suivre strong {
    display: block;
    margin-top: 4px;
    font-weight: 800;
}

body.theme-classique .tc-item {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid transparent;
    color: var(--tc-text);
    text-decoration: none;
    transition: background-color .15s, border-color .15s;
}

body.theme-classique .tc-item:hover,
body.theme-classique .tc-item:focus-visible {
    background: var(--tc-surface);
    border-color: var(--tc-line);
    color: var(--tc-text);
}

body.theme-classique .tc-item.is-current {
    background: var(--tc-surface);
    border-color: var(--primary-color);
}

body.theme-classique .tc-item-image {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: var(--tc-surface);
}

body.theme-classique .tc-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.theme-classique .tc-item-badge {
    position: absolute;
    left: 6px;
    bottom: 6px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--primary-color);
    color: var(--on-primary-color, #fff);
    font-size: 11px;
    font-weight: 800;
}

body.theme-classique .tc-item-progres {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: color-mix(in srgb, #000 40%, transparent);
}

body.theme-classique .tc-item-progres span {
    display: block;
    height: 100%;
    background: var(--primary-color);
}

/* Camembert d'avancement en haut à droite de la vignette (comme les autres apparences), coche
   au-delà de 96 %. Couleur secondaire de l'exploitant, comme l'ancien camembert du thème. */
body.theme-classique .tc-item-camembert {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: conic-gradient(var(--secondary-color, var(--primary-color)) var(--progress, 0%), rgba(255, 255, 255, .85) 0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

body.theme-classique .tc-item-camembert.is-fini {
    background: var(--secondary-color, var(--primary-color));
}

body.theme-classique .tc-item-camembert i {
    color: var(--on-secondary-color, #fff);
    font-size: 9px;
}

/* Mention « ✓ vu » sous le titre, quand le réglage Vignettes de l'accueil est allumé. */
body.theme-classique .tc-item-vu {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    color: var(--tc-secondary-ink);
    font-size: 12px;
    font-weight: 700;
}

body.theme-classique .tc-item-titre {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

body.theme-classique .tc-item small {
    display: block;
    margin-top: 2px;
    color: var(--tc-muted);
    font-size: 12px;
}

/* ---------- Mouvement (2026-11-09) ----------
   Registre calme, à l'image d'une séance : une seule courbe (sortie douce), trois durées
   (180 ms survol, 360 ms éléments, 520 ms scène). Entrée de la scène au chargement, puis la
   colonne et ses épisodes en cascade (45 ms, 8 au plus) ; les rangées du bas apparaissent en
   arrivant à l'écran (_particles/tc_mouvement.blade.php pose html.tc-anime, --i et .tc-visible).
   Seuls transform et opacity bougent. Sans html.tc-anime (« réduire les animations », navigateur
   sans IntersectionObserver, script absent), rien n'est masqué ni animé. */
@keyframes tc-monte {
    from { opacity: 0; transform: translateY(14px); }
}
@keyframes tc-glisse {
    from { opacity: 0; transform: translateX(18px); }
}

html.tc-anime body.theme-classique .tc-scene-main {
    animation: tc-monte .52s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
html.tc-anime body.theme-classique .tc-scene > .tc-aside {
    animation: tc-glisse .52s cubic-bezier(0.22, 1, 0.36, 1) .09s backwards;
}
html.tc-anime body.theme-classique .tc-aside > .tc-item,
html.tc-anime body.theme-classique .tc-aside > .tc-a-suivre {
    animation: tc-monte .36s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: calc(.18s + var(--i, 0) * 45ms);
}

html.tc-anime body.theme-classique .tc-rangee .px-header,
html.tc-anime body.theme-classique .tc-rangee .owl-item {
    transition: opacity .36s cubic-bezier(0.22, 1, 0.36, 1), transform .36s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i, 0) * 50ms);
}
html.tc-anime body.theme-classique .tc-rangee:not(.tc-visible) .px-header,
html.tc-anime body.theme-classique .tc-rangee:not(.tc-visible) .owl-item {
    opacity: 0;
    transform: translateY(16px);
}

/* Survol (souris seulement) : la vignette s'avance d'un rien, le titre prend la couleur du site. */
@media (hover: hover) and (pointer: fine) {
    body.theme-classique .tc-item-image img {
        transition: transform .18s cubic-bezier(0.22, 1, 0.36, 1);
    }
    body.theme-classique .tc-item:hover .tc-item-image img {
        transform: scale(1.04);
    }
    body.theme-classique .tc-item-titre {
        transition: color .18s ease-out;
    }
    body.theme-classique .tc-item:hover .tc-item-titre {
        color: var(--tc-primary-ink);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.theme-classique .tc-item-image img,
    body.theme-classique .tc-item:hover .tc-item-image img {
        transition: none;
        transform: none;
    }
}

/* Pages cours et épisode : sous le lecteur, le titre, la ligne d'infos, les étiquettes
   (une à une, --i), les boutons puis les onglets arrivent en cascade. */
html.tc-anime body.theme-classique .video-post-info .dtl-title-block,
html.tc-anime body.theme-classique .video-post-info .diva_subtitle,
html.tc-anime body.theme-classique .video-post-info .video-post-date,
html.tc-anime body.theme-classique .video-post-info ul.actor-video-link > li,
html.tc-anime body.theme-classique .video-post-info .video-watch-share-item,
html.tc-anime body.theme-classique .vfx-tabs-item {
    animation: tc-monte .36s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
html.tc-anime body.theme-classique .video-post-info .dtl-title-block { animation-delay: .14s; }
html.tc-anime body.theme-classique .video-post-info .diva_subtitle { animation-delay: .18s; }
html.tc-anime body.theme-classique .video-post-info .video-post-date { animation-delay: .22s; }
html.tc-anime body.theme-classique .video-post-info ul.actor-video-link > li {
    animation-delay: calc(.26s + var(--i, 0) * 35ms);
}
html.tc-anime body.theme-classique .video-post-info .video-watch-share-item { animation-delay: .36s; }
html.tc-anime body.theme-classique .vfx-tabs-item { animation-delay: .42s; }

/* Onglet ouvert : son contenu monte en fondu, les avis arrivent un à un (--i). */
html.tc-anime body.theme-classique .vfx-tabs-item #tab1:checked ~ section .tab1,
html.tc-anime body.theme-classique .vfx-tabs-item #tab2:checked ~ section .tab2,
html.tc-anime body.theme-classique .vfx-tabs-item #tab3:checked ~ section .tab3,
html.tc-anime body.theme-classique .vfx-tabs-item #tab4:checked ~ section .tab4 {
    animation: tc-monte .26s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
html.tc-anime body.theme-classique .vfx-tabs-item #tab4:checked ~ section .allreviews > * {
    animation: tc-monte .26s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: calc(.06s + var(--i, 0) * 45ms);
}

/* Trait de l'onglet actif : il se déploie depuis le centre au lieu d'apparaître d'un coup,
   et s'esquisse au survol. Remplace l'ombre intérieure posée plus haut. */
body.theme-classique .vfx-tabs-item ul li label {
    position: relative;
    transition: color .18s ease-out;
}
body.theme-classique .vfx-tabs-item ul li label::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--primary-color);
    transform: scaleX(0);
    transition: transform .24s cubic-bezier(0.22, 1, 0.36, 1);
}
body.theme-classique .vfx-tabs-item #tab1:checked ~ nav .tab1 label,
body.theme-classique .vfx-tabs-item #tab2:checked ~ nav .tab2 label,
body.theme-classique .vfx-tabs-item #tab3:checked ~ nav .tab3 label,
body.theme-classique .vfx-tabs-item #tab4:checked ~ nav .tab4 label {
    box-shadow: none;
}
body.theme-classique .vfx-tabs-item #tab1:checked ~ nav .tab1 label::after,
body.theme-classique .vfx-tabs-item #tab2:checked ~ nav .tab2 label::after,
body.theme-classique .vfx-tabs-item #tab3:checked ~ nav .tab3 label::after,
body.theme-classique .vfx-tabs-item #tab4:checked ~ nav .tab4 label::after {
    transform: scaleX(1);
}

/* Survol (souris seulement) : étiquettes et boutons d'action se soulèvent d'un rien. */
@media (hover: hover) and (pointer: fine) {
    body.theme-classique .vfx-tabs-item ul li label:hover::after {
        transform: scaleX(.4);
    }
    body.theme-classique .video-post-info ul.actor-video-link li a,
    body.theme-classique .video-post-info ul.actor-video-link li a.bgdiva {
        transition: background-color .18s ease-out, color .18s ease-out, transform .18s cubic-bezier(0.22, 1, 0.36, 1);
    }
    body.theme-classique .video-post-info ul.actor-video-link li a:hover {
        transform: translateY(-2px);
    }
    body.theme-classique .video-watch-share-item .btn-watchlist a,
    body.theme-classique .video-watch-share-item .btn-share a {
        transition: border-color .15s, background-color .15s, transform .18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .18s cubic-bezier(0.22, 1, 0.36, 1);
    }
    body.theme-classique .video-watch-share-item .btn-watchlist a:hover,
    body.theme-classique .video-watch-share-item .btn-share a:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--primary-color) 55%, transparent);
    }
    body.theme-classique .video-watch-share-item .btn-watchlist a:active,
    body.theme-classique .video-watch-share-item .btn-share a:active {
        transform: translateY(0) scale(.98);
        transition-duration: .1s;
    }
}

/* ---------- Onglet des avis : pastille du nombre (2026-11-09) ----------
   _particles/tc_onglet_avis.blade.php : pastille dès 2 avis ; au-delà de 10, couleur pleine,
   étoile, et un halo qui s'en éloigne comme les ondes du bouton de lecture, quatre fois (~11 s). Le halo et
   l'étoile s'arrêtent dès que l'onglet est ouvert : l'invitation a servi. */
body.theme-classique .tc-compte-avis {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 22px;
    height: 22px;
    margin-left: 8px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--tc-primary-soft);
    color: var(--tc-primary-ink);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    vertical-align: 2px;
    font-variant-numeric: tabular-nums;
}
body.theme-classique .tc-compte-avis--vif {
    background: var(--primary-color);
    color: var(--on-primary-color, #fff);
}
body.theme-classique .tc-compte-avis--vif .fa-star {
    display: inline-block;
    font-size: 10px;
}
body.theme-classique .tc-compte-avis--vif::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--primary-color);
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
}

@keyframes tc-pastille {
    from { opacity: 0; transform: scale(.85); }
}
@keyframes tc-halo {
    0% { opacity: .7; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.35, 1.8); }
}
@keyframes tc-scintille {
    0%, 70%, 100% { transform: none; }
    80% { transform: scale(1.3) rotate(36deg); }
    90% { transform: scale(1) rotate(72deg); }
}

html.tc-anime body.theme-classique .tc-compte-avis {
    animation: tc-pastille .42s cubic-bezier(0.34, 1.56, 0.64, 1) .6s backwards;
}
html.tc-anime body.theme-classique .tc-compte-avis--vif::before {
    animation: tc-halo 2.8s cubic-bezier(0.22, 1, 0.36, 1) 1.1s 4;
}
html.tc-anime body.theme-classique .tc-compte-avis--vif .fa-star {
    animation: tc-scintille 2.8s ease-in-out 1.1s 4;
}
html.tc-anime body.theme-classique .vfx-tabs-item #tab4:checked ~ nav .tc-compte-avis--vif::before,
html.tc-anime body.theme-classique .vfx-tabs-item #tab4:checked ~ nav .tc-compte-avis--vif .fa-star {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    body.theme-classique .vfx-tabs-item ul li label::after,
    body.theme-classique .video-post-info ul.actor-video-link li a,
    body.theme-classique .video-watch-share-item .btn-watchlist a,
    body.theme-classique .video-watch-share-item .btn-share a {
        transition: none;
    }
    body.theme-classique .video-post-info ul.actor-video-link li a:hover,
    body.theme-classique .video-watch-share-item .btn-watchlist a:hover,
    body.theme-classique .video-watch-share-item .btn-share a:hover,
    body.theme-classique .video-watch-share-item .btn-watchlist a:active,
    body.theme-classique .video-watch-share-item .btn-share a:active {
        transform: none;
    }
}

/* Scène sans colonne (magazine, multi-vidéo, rien à proposer) : toute la largeur. */
body.theme-classique .tc-scene.tc-scene--seule {
    grid-template-columns: minmax(0, 1fr);
}

/* ---------- Pages de présentation : affiche et bloc des avis ---------- */

body.theme-classique .container-fluid > .tc-scene {
    width: 100%;
}

body.theme-classique .tc-scene .dtl-poster-img img,
body.theme-classique .tc-scene .detail-poster-area img {
    border-radius: var(--tc-radius);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35), 0 0 0 1px var(--tc-line);
}

body.theme-classique .tc-scene .poster-dtl-item h2,
body.theme-classique .tc-scene .poster-dtl-item h2 a {
    font-family: var(--font-titles);
    font-weight: 800;
    letter-spacing: -.01em;
}

/* Mobile : les onglets restent sur une ligne et défilent, au lieu de s'empiler. */
@media (max-width: 575px) {
    body.theme-classique .vfx-tabs-item nav ul {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 22px;
        scrollbar-width: none;
    }

    body.theme-classique .vfx-tabs-item ul li label {
        white-space: nowrap;
    }
}

/* Clavier : un contour visible sur tout ce qui se parcourt à la tabulation. */
body.theme-classique .tc-pas a:focus-visible,
body.theme-classique .tc-a-suivre:focus-visible,
body.theme-classique .tc-item:focus-visible,
body.theme-classique .video-watch-share-item a:focus-visible,
body.theme-classique .video-post-info ul.actor-video-link li a:focus-visible,
body.theme-classique .poster-dtl-item ul.dtl-list-link li a:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Pastille d'un genre, bienfait ou niveau supprimé : l'id reste sur le contenu mais
   son nom est vide. On ne montre pas une pastille sans texte. */
body.theme-classique ul.actor-video-link li:has(> a:empty),
body.theme-classique ul.dtl-list-link li:has(> a:empty) {
    display: none !important;
}