/* ============================================
   SITE MODELE VCR — style.css (sites/vcr-base/modele/)
   ============================================
   Le socle du design : copie par la recette a l'etape 8.0 de chaque
   nouveau projet, jamais le style du projet precedent (SOCLE-VCR.md § 2).
   Variables en gris neutre, structure complete (header, menu, cartes,
   filtres, selecteur de langue). L'etape design d'un projet regle :root,
   puis ecrit le reste dans UN bloc a son nom, a la fin (SOCLE-VCR.md § 2.2 d).
   ============================================ */

/* Google Fonts - Inter (police neutre par defaut, seule du socle) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Marcellus&display=swap');

:root {
    /* Palette neutre du socle : gris purs (r=g=b), aucune couleur de marque.
       L'etape design d'un projet choisit ses propres valeurs ici. Le reste de
       son design va dans un bloc a son nom en fin de fichier, pas au milieu. */
    --bg-main: #2c2a27;        /* chess-video : gris chaud sombre (2026-10-10, gruid #24213 ; avant : feutre) */
    --text-main: #f4f2ea;      /* ivoire froid (2026-10-10 : l or retire, gruid #24195) */
    --accent-primary: #86b85a;  /* argent (avant : buis verni #d9b56c ; vert et or = casino, gruid #24195) */
    --accent-secondary: #ece8cf; /* creme */
    --accent-gradient: linear-gradient(120deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    --accent-gradient-reverse: linear-gradient(120deg, var(--accent-secondary) 0%, var(--accent-primary) 100%);
    --font-impact: 'Marcellus', 'Times New Roman', serif;
    /* Le texte pose SUR le degrade d'accent (le bandeau du titre de la page video). A regler avec
       les deux accents : il doit rester lisible aux DEUX bouts du degrade, le plus sombre comme le
       plus clair (hockey, 2026-10-04 : un titre clair tombait a 1,45 au bout clair). Sombre par
       defaut, parce que les accents d'un site a fond sombre sont le plus souvent clairs.
       #0a0a0a et pas le #101010 du fond : sur le gris du socle, 4,62 contre 4,43 (seuil 4,5,
       le titre fait 18 px). C'est deja la couleur du bouton de recherche, pose sur le meme degrade. */
    --on-accent: #18230f;
    /* Les 5 variables du moteur (SOCLE-VCR.md § 2.2 e) : reprises par la barre de
       filtres v2 et par la jauge de duree. Reglees par l'etape design comme les
       7 ci-dessus ; tant qu'elles ne le sont pas, le moteur se replie sur
       --accent-primary (var(--x, var(--accent-primary))), jamais sur une couleur du moteur. */
    --accent-live: #86b85a;
    --accent-hover-jauge: #86b85a;
    --accent-pays: #ece8cf;
    --accent-search: #86b85a;
    --accent-feature: #86b85a;
}

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-main);
    color: var(--text-main);
    line-height: 1.6;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ==================== HEADER ==================== */
.header {
    /* Pas d'image de fond : un degrade CSS suffit, dans la palette du theme. */
    background:
        radial-gradient(ellipse 900px 260px at 50% -40%, color-mix(in srgb, var(--accent-primary) 35%, transparent) 0%, rgba(11,18,16,0) 70%),
        linear-gradient(180deg, rgba(11,18,16,0.55) 0%, rgba(11,18,16,0.92) 100%);
    padding: 12px 24px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header::before {
    content: '';
    display: block;
    height: 2px;
    margin: -12px -24px 12px;
    background: var(--accent-gradient);
}

.header::after {
    content: '';
    display: block;
    height: 1px;
    margin: 13px -24px -12px;
    background: var(--accent-gradient-reverse);
}

.header-content {
    max-width: 1800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    white-space: nowrap;
    padding: 6px 16px;
    border-radius: 8px;
    border: 1px solid var(--accent-primary);
    box-shadow: 0 0 16px color-mix(in srgb, var(--accent-primary) 30%, transparent);
    background: #131313;
}

.logo-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.logo-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.logo-name {
    font-family: var(--font-impact);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Cache "VCR" : litteral en dur dans core/templates/index.php pour les
   sites sans habillage de theme, pas un flag -- masque ici comme le
   bouton Videos et le menu #1.."#5". */
.logo-name span {
    display: none;
}

.tagline {
    font-size: 11px;
    color: #888;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==================== HEADER WITH BANNER ==================== */
.header-banner {
    position: relative;
    background: none;
    padding: 0;
    min-height: 200px;
}

.header-banner .banner-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.6);
    z-index: 0;
}

.header-banner .header-content {
    position: relative;
    z-index: 2;
    padding: 40px 24px;
    min-height: 200px;
    align-items: center;
}

.header-banner::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(transparent, #0a0a0a);
    z-index: 1;
}

/* ==================== SEARCH ==================== */
.search-form {
    max-width: 250px;
    display: flex;
    margin-left: auto;
}

.search-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #303030;
    border-radius: 20px;
    background: #121212;
    color: #f1f1f1;
    font-size: 13px;
}

.search-input:focus {
    outline: none;
    border-color: var(--accent-search, var(--accent-primary));
}

.search-btn {
    display: none;
}

/* ==================== FILTERS ==================== */
.filters {
    background: #181818;
    padding: 15px 20px;
    border-bottom: 1px solid #303030;
}

.filters-content {
    max-width: 1800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.filter-select {
    padding: 8px 12px;
    border: 1px solid #303030;
    border-radius: 8px;
    background: #0f0f0f;
    color: #f1f1f1;
    font-size: 14px;
    cursor: pointer;
}

.filter-select:focus {
    outline: none;
    border-color: var(--accent-search, var(--accent-primary));
}

.filter-reset {
    padding: 8px 16px;
    border: 1px solid #303030;
    border-radius: 8px;
    background: transparent;
    color: #aaa;
    cursor: pointer;
}

.filter-reset:hover {
    background: #222;
    color: #f1f1f1;
}

.results-count {
    color: #aaa;
    font-size: 14px;
    margin-left: auto;
}

/* ==================== MAIN ==================== */
.main {
    max-width: 1800px;
    margin: 0 auto;
    padding: 20px;
}

/* ==================== LIVE BANNER ==================== */
.live-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent-live, var(--accent-primary)) 15%, transparent) 0%, transparent 100%);
    border: 1px solid color-mix(in srgb, var(--accent-live, var(--accent-primary)) 30%, transparent);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 24px;
    overflow: hidden;
}

.live-banner-label {
    background: var(--accent-live, var(--accent-primary));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
    animation: live-pulse 2s ease-in-out infinite;
}

.live-banner-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.live-banner-scroll::-webkit-scrollbar {
    display: none;
}

.live-card {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    padding: 6px;
    border-radius: 8px;
    transition: background 0.2s;
}

.live-card:hover {
    background: rgba(255,255,255,0.05);
}

.live-thumb {
    position: relative;
    width: 120px;
    min-width: 120px;
    aspect-ratio: 16/9;
    border-radius: 6px;
    overflow: hidden;
}

.live-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.live-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    background: var(--accent-live, var(--accent-primary));
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    animation: live-pulse 2s ease-in-out infinite;
}

.live-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 120px;
    max-width: 180px;
}

.live-title {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.live-channel {
    font-size: 11px;
    color: #aaa;
    margin-top: 4px;
}

@media (max-width: 768px) {
    .live-banner {
        padding: 10px 12px;
    }

    .live-thumb {
        width: 100px;
        min-width: 100px;
    }

    .live-info {
        min-width: 100px;
        max-width: 140px;
    }

    .live-title {
        font-size: 12px;
    }
}

/* ==================== VIDEO GRID ==================== */
.video-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

/* Column selector options */
.video-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.video-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.video-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }

/* Column selector UI */
.col-selector {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 15px;
}

.col-selector-label {
    color: #666;
    font-size: 12px;
    margin-right: 6px;
}

.col-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #303030;
    border-radius: 6px;
    background: #0f0f0f;
    color: #888;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.col-btn:hover {
    background: #222;
    color: #f1f1f1;
}

.col-btn.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
}

@media (max-width: 1400px) {
    .video-grid:not(.cols-3):not(.cols-4):not(.cols-5) {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1100px) {
    .video-grid:not(.cols-3) {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 800px) {
    .video-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .col-selector {
        display: none;
    }
}

.video-card {
    background: #0f0f0f;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 0 0 1px #252525;
}

.video-card:hover {
    box-shadow: 0 0 0 1.5px var(--accent-primary), 0 8px 24px color-mix(in srgb, var(--accent-primary) 25%, transparent);
    transform: translateY(-4px);
}

.video-thumb {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 3;
    background: rgba(0,0,0,0.85);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.video-duration.live {
    background: var(--accent-live, var(--accent-primary));
    animation: live-pulse 2s ease-in-out infinite;
}

@keyframes live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* video-title/video-channel-top sont maintenant DANS .video-overlay, en
   surimpression du thumb (structure reelle de core/templates/index.php,
   differente de la maquette .video-info d origine -- voir JOURNAL.md). */
.video-overlay {
    /* etape 8 yoga-vcr (amnor) : le badge de duree (jusqu a 46px, pose a 8px du bord) mangeait
       la fin des titres sur 2e ligne -- 64px laisse la place pour une duree "1:00:00". Meme
       defaut deja present sur tennis, volley et formula1 (herite avant ce correctif). */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px 64px 8px 10px;
    background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 60%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

.video-channel-top {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--accent-primary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 2px;
    white-space: nowrap;   /* relecture 8.7 formula1 (amnor) : un nom de chaine long passait sur
                               2 lignes et mangeait tout le clamp-2-lignes du titre, qui disparaissait */
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-info {
    padding: 12px;
}

.video-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #f1f1f1;
}

.video-channel {
    font-size: 12px;
    color: #aaa;
    margin-bottom: 4px;
}

.video-channel:hover {
    color: #f1f1f1;
}

.video-meta {
    font-size: 12px;
    color: #aaa;
}

/* ==================== PAGINATION ==================== */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.pagination a, .pagination span {
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
}

.pagination a {
    background: #222;
    color: #f1f1f1;
}

.pagination a:hover {
    background: #333;
}

.pagination span.current {
    background: var(--accent-primary);
    color: #fff;
    font-weight: 500;
}

.pagination .dots {
    color: #666;
}

/* ==================== NO RESULTS ==================== */
.no-results {
    text-align: center;
    padding: 60px 20px;
    color: #aaa;
}

.no-results h2 {
    margin-bottom: 10px;
    color: #f1f1f1;
}

/* ==================== VIDEO PAGE ==================== */
.main-video {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 24px;
}

.back-btn {
    padding: 8px 16px;
    background: #222;
    border-radius: 8px;
    color: #f1f1f1;
    font-size: 14px;
}

.back-btn:hover {
    background: #333;
}

.player-container {
    background: #000;
    border-radius: 12px;
    overflow: hidden;
}

.player {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-info-full {
    padding: 16px 0;
}

.video-title-full {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
    line-height: 1.3;
}

.video-meta-full {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #303030;
}

.video-date {
    color: #aaa;
    font-size: 14px;
}

.video-duration-tag {
    background: #303030;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
}

.video-duration-tag.live {
    background: var(--accent-live, var(--accent-primary));
    animation: live-pulse 2s ease-in-out infinite;
}

.channel {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.channel-avatar {
    width: 48px;
    height: 48px;
    background: var(--accent-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
}

.channel-name {
    font-size: 16px;
    font-weight: 500;
}

.channel-link {
    font-size: 13px;
    color: var(--accent-search, var(--accent-primary));
}

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

.yt-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--accent-primary);
    color: #fff;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    margin-top: 12px;
}

.yt-btn:hover {
    filter: brightness(0.85);
}

.description {
    background: #181818;
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
}

.description-title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 12px;
    color: #aaa;
}

.description-text {
    font-size: 14px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ==================== SIDEBAR ==================== */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sidebar-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
}

.related-card {
    display: flex;
    gap: 12px;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s;
}

.related-card:hover {
    background: #222;
}

.related-thumb {
    position: relative;
    width: 168px;
    min-width: 168px;
    aspect-ratio: 16/9;
    border-radius: 8px;
    overflow: hidden;
}

.related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-duration {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 11px;
}

.related-duration.live {
    background: var(--accent-live, var(--accent-primary));
    animation: live-pulse 2s ease-in-out infinite;
}

.related-info {
    flex: 1;
    min-width: 0;
}

.related-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-channel {
    font-size: 12px;
    color: #aaa;
    margin-bottom: 2px;
}

.related-date {
    font-size: 12px;
    color: #aaa;
}

/* ==================== RELATED FULLWIDTH ==================== */
.related-fullwidth {
    max-width: 1800px;
    margin: 0 auto;
    padding: 40px 20px;
}

.related-fullwidth .video-grid {
    padding: 0;
}

/* ==================== FOOTER ==================== */
.footer {
    background: #0f0f0f;
    border-top: 1px solid #303030;
    padding: 30px 20px;
    margin-top: 40px;
    text-align: center;
}

.footer-content {
    max-width: 1800px;
    margin: 0 auto;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.footer-links a {
    color: #aaa;
    font-size: 14px;
}

.footer-links a:hover {
    color: #f1f1f1;
}

.footer p {
    color: #666;
    font-size: 13px;
}

.footer-disclaimer {
    max-width: 640px;
    margin: 0 auto 18px;
}

.footer-disclaimer p {
    color: #666;
    font-size: 12px;
    line-height: 1.6;
    margin-bottom: 6px;
}

.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 16px;
    z-index: 99;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #151515;
    border: 1px solid var(--accent-primary);
    color: var(--accent-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    text-decoration: none;
}

.back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
}

.back-to-top:hover {
    background: color-mix(in srgb, var(--accent-primary) 15%, transparent);
}

/* ==================== CHANNELS ==================== */
.channels-section {
    margin-bottom: 30px;
}

.channels-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
}

.channels-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.channel-tag {
    padding: 8px 16px;
    background: #222;
    border-radius: 20px;
    color: #f1f1f1;
    font-size: 14px;
    transition: all 0.2s;
}

.channel-tag:hover {
    background: var(--accent-primary);
}

.channel-tag.active {
    background: var(--accent-primary);
}

/* ==================== FEATURED ==================== */
.featured-section {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid #303030;
}

.featured-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #f1f1f1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.featured-title::before {
    content: '★';
    color: var(--accent-feature, var(--accent-primary));
}

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

.featured-card {
    border: 1px solid var(--accent-feature, var(--accent-primary));
    background: var(--bg-main);
}

.featured-card:hover {
    border-color: var(--accent-feature, var(--accent-primary));
}

.featured-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--accent-feature, var(--accent-primary));
    color: #000;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1200px) {
    .main-video {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        align-items: stretch;
    }

    .search-form {
        max-width: 100%;
    }

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

    .video-title {
        font-size: 13px;
    }

    .main-video {
        padding: 12px;
    }

    .video-title-full {
        font-size: 16px;
    }

    .related-thumb {
        width: 120px;
        min-width: 120px;
    }

    .related-title {
        font-size: 13px;
    }

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

/* ============================================
   NAVIGATION / FILTRES / TITRES DE SECTION
   ============================================
   Ces classes sont utilisees par le VRAI markup de core/templates/index.php
   et video.php (menu, filtres duree, recherche, separateurs de date),
   absentes de base_template.css -- verifie sur un rendu reel, pas
   seulement sur le code.
   Volontairement langue-agnostique : aucun texte en dur, seulement du
   style sur des classes deja generiques dans le template partage.
   ============================================ */

.header-top-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 14px 16px 8px;
    position: relative;
    flex-wrap: wrap;
}

.header-top-line .logo {
    padding: 0;
}

/* Selecteur de langue (a-multilingue, SPEC #20256, yego) -- place dans .header-top-line
   (index.php) et .header-content (video.php) : les deux parents sont deja flex, le
   composant n'a besoin que de sa propre position:relative. Rendu uniquement quand
   vcrLangues() renvoie un tableau (site rattache a un projet multilingue actif) ;
   sortie inchangee sinon, comme le hreflang d'amnor dans le <head>. <details>/<summary>
   natif : le menu s'ouvre et se ferme sans une ligne de JS. Couleurs et typo reprises
   telles quelles de .menu-item juste en dessous, pour rester dans le meme langage visuel
   que le reste du header plutot que d'ajouter un widget etranger. */
.lang-switcher {
    position: relative;
}

.lang-switcher-current {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid #252525;
    background: #131313;
    color: #b0b0b0;
    font-family: var(--font-impact);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: color 0.2s, border-color 0.2s;
}

.lang-switcher-current::-webkit-details-marker {
    display: none;
}

.lang-switcher-current::after {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    margin-left: 2px;
}

.lang-switcher[open] .lang-switcher-current,
.lang-switcher-current:hover {
    color: #f1f1f1;
    border-color: var(--accent-primary);
}

.lang-switcher-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 160px;
    background: #131313;
    border: 1px solid #252525;
    border-radius: 8px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 110;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.lang-switcher-item {
    padding: 8px 10px;
    border-radius: 6px;
    color: #b0b0b0;
    font-family: var(--font-impact);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.lang-switcher-item:hover {
    color: #f1f1f1;
    background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 768px) {
    .lang-switcher-menu {
        right: auto;
        left: 0;
    }
}

@media (max-width: 420px) {
    /* etape 12 formula1 (ecran) : un code de langue plus long que 2 lettres (ex. "PT-BR")
       peut faire passer .lang-switcher-current a la ligne sous le logo dans .header-top-line
       (flex-wrap: wrap, justify-content: center). Reduit sa taille pour garder les deux sur
       la meme ligne. */
    .lang-switcher-current {
        padding: 6px 8px;
        font-size: 11px;
        gap: 2px;
    }
}

/* Cache : demande @gruid 2026-09-25 -- bouton Videos a gauche du logo.
   Rendu par core/templates/index.php pour un site sans habillage de theme,
   pas de flag pour le desactiver a la source, donc masque ici. Selecteur qualifie par
   .header-top-line (specificite > .menu-item, defini plus bas) sinon la
   regle .menu-item { display:flex } qui suit dans le fichier l ecrase. */
.header-top-line .menu-item-videos {
    display: none;
}

/* Menu de l en-tete. Depuis 20261009LIENSMORTS, le moteur n ecrit plus de
   <nav> pour un site sans menu (avant : 5 liens morts « #1 ».. « #5 », d ou
   un display:none ici, retire). Ces regles ne servent donc que le jour ou un
   projet recoit un menu -- choix de produit laisse a @gruid ; ce jour-la, ses
   boutons devront se reperer par leur NOM, jamais par leur rang (nth-child). */
.header-menu {
    display: flex;   /* le menu des rubriques (etape 7) : des boutons cote a cote, pas un par ligne (20261009RUBRIQUES) */
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 16px 12px;
    border-bottom: 1px solid #252525;
}

/* VCR_HEADER_SEARCH (gruid #21402, point 3) : @amnor a deplace le formulaire
   dans .header-top-line (livrable HEADERSEARCH2, mesure sur une page
   composee : la nav .header-menu ne le porte plus, donc le :has() precedent
   n'a plus d'objet -- retire plutot que garde mort. Couleurs grises a la
   place du degrade sombre du moteur (en dur dans templates/index.php
   l.608-611) -- 3 classes de specificite contre 2 pour ce bloc, donc ces
   regles gagnent quel que soit l'ordre de chargement des deux feuilles. */
.header-top-line .vcr-header-search .vhs-input,
.header-top-line .vcr-header-search .vhs-btn {
    background: #131313;
    border: 1px solid #252525;
    color: #ccc;
}

.header-top-line .vcr-header-search .vhs-input::placeholder {
    color: #888;
}

.header-top-line .vcr-header-search .vhs-input:focus {
    border-color: var(--accent-primary);
    box-shadow: none;
    color: #f1f1f1;
}

.header-top-line .vcr-header-search .vhs-btn:hover {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
    box-shadow: none;
}

/* La meme recherche sur la PAGE VIDEO : son gabarit n'a pas de .header-top-line et n'ecrit pas le style que l'accueil
   ecrit dans son corps, donc le champ y restait nu (ferrari, 2026-10-06). Visee par .vcr-entete-v3, le conteneur de
   l'en-tete de la page video SEULEMENT : sans lui, la meme regle decalait la recherche de l'accueil de 3 px (mesure). */
.vcr-entete-v3 .vcr-header-search {
    display: flex;
    align-items: center;
    gap: 6px;
}

.vcr-entete-v3 .vcr-header-search .vhs-input,
.vcr-entete-v3 .vcr-header-search .vhs-btn {
    padding: 8px 12px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    background: #131313;
    border: 1px solid #252525;
    border-radius: 6px;
    color: #ccc;
}

.vcr-entete-v3 .vcr-header-search .vhs-input {
    width: 170px;
    min-width: 0;
}

.vcr-entete-v3 .vcr-header-search .vhs-input::placeholder {
    color: #888;
}

.vcr-entete-v3 .vcr-header-search .vhs-btn {
    cursor: pointer;
}

/* Nouvel en-tete v3 (SPEC 20261001ENTETE, amnor #21465) : ALL / ALL EN / fleche
   de langue. Classes NON prefixees par leur parent -- vcrBoutonsAll() rend le
   meme HTML trois fois (header-top-line, header-content.vcr-entete-v3 et la
   copie .vcr-all-mobile dans la barre de filtres, R5) : une regle commune
   evite de la tripler. Le widget fleche reprend le langage visuel de
   .lang-switcher juste au-dessus -- deux dropdowns <details>/<summary> cote a
   cote ne doivent pas avoir l'air de deux composants differents. */
.vcr-all,
.vcr-all-langue-lien {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid #252525;
    background: #131313;
    color: #b0b0b0;
    font-family: var(--font-impact);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
}

.vcr-all:hover,
.vcr-all.active,
.vcr-all-langue-lien:hover,
.vcr-all-langue-lien.active {
    color: #f1f1f1;
    border-color: var(--accent-primary);
}

.vcr-all-langue {
    display: flex;
    align-items: center;
    gap: 6px;
}

.vcr-lang-fleche {
    position: relative;
}

.vcr-lang-fleche > summary {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #252525;
    background: #131313;
    color: #b0b0b0;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: color 0.2s, border-color 0.2s;
}

.vcr-lang-fleche > summary::-webkit-details-marker {
    display: none;
}

/* Releve @amnor (REVIEW, page composee 3 langues) : le moteur ecrit deja
   le caractere ▾ dans le <summary> (&#9662;) -- ce ::after en dessinait une
   2e en bordures, double fleche "▾⌄". Retire : celle du moteur reste visible
   meme si cette feuille ne charge pas, et le summary garde son aria-label. */

.vcr-lang-fleche[open] > summary,
.vcr-lang-fleche > summary:hover {
    color: #f1f1f1;
    border-color: var(--accent-primary);
}

.vcr-lang-fleche-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 160px;
    background: #131313;
    border: 1px solid #252525;
    border-radius: 8px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 110;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.vcr-lang-fleche-menu a {
    padding: 8px 10px;
    border-radius: 6px;
    color: #b0b0b0;
    font-family: var(--font-impact);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.vcr-lang-fleche-menu a:hover {
    color: #f1f1f1;
    background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 768px) {
    .vcr-lang-fleche-menu {
        right: auto;
        left: 0;
    }
}

/* Ordinateur : ALL / ALL EN / fleche dans la ligne du logo (header-top-line,
   ou header-content.vcr-entete-v3 sur la page de lecture). Telephone : cette
   instance se cache, et c'est la copie .vcr-all-mobile (dans la barre de
   filtres) qui s'affiche -- jamais les deux a la fois (a-vcrmobile). */
@media (max-width: 768px) {
    .header-top-line > .vcr-all,
    .header-top-line > .vcr-all-langue,
    .header-content.vcr-entete-v3 > .vcr-all,
    .header-content.vcr-entete-v3 > .vcr-all-langue {
        display: none;
    }
}

.vcr-all-mobile {
    display: flex;
    align-items: center;
    gap: 6px;
}

@media (min-width: 769px) {
    .vcr-all-mobile {
        display: none;
    }
}

/* Codes de langue a la place des drapeaux (gruid, decision 689) : meme usage
   que .pays-flag (20x13, un img) mais du texte -- un fond et une bordure le
   gardent lisible a cette taille, au lieu de laisser le navigateur choisir. */
.pays-code,
.card-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 15px;
    padding: 0 3px;
    border-radius: 3px;
    border: 1px solid #333;
    background: #1a1a1a;
    color: #999;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3px;
    vertical-align: -2px;
}

/* Deplace ici depuis la fin du fichier (@amnor, correctif rapide #21491) :
   le style des filtres v2, ecrit par le moteur pour TOUS les sites v2, cache
   le drapeau du gros bouton (.pays-btn-wrap>.pays-flag) et masque tout <span>
   d'une pastille (.pays-dropdown-item span, l'ancien texte accessible du
   drapeau). Il ne connait pas .pays-code : le code du bouton restait seul, et
   les pastilles etaient vides. Corrige ICI (specificite 0,3,0 > 0,1,1), pas
   dans le moteur : son <style> est dans le HTML des autres sites. */
@media (min-width: 769px) {
    .duration-filters .pays-btn-wrap > .pays-code {
        display: none;
    }
    .duration-filters .pays-dropdown-item .pays-code {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
    }
}

/* Page de lecture en v3 : la meme 1re ligne que la liste (ALL / ALL EN /
   fleche / logo / recherche), centree comme .header-top-line -- sans ca le
   flex-start par defaut de .header-content l'aurait collee a gauche,
   asymetrique sans 2e ligne pour la compenser (amnor #21460, "logo centre"). */
.header-content.vcr-entete-v3 {
    justify-content: center;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid #252525;
    background: #131313;
    color: #b0b0b0;
    font-family: var(--font-impact);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}

.menu-item:hover {
    color: #f1f1f1;
    border-color: var(--accent-primary);
}

.menu-item.active {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent-primary) 35%, transparent);
}

.menu-icon {
    display: flex;
    align-items: center;
    opacity: 0.85;
}

/* ---- Barre de filtres (duree, lives termines, recherche) ---- */
.duration-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
}

.duration-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    background: #131313;
    color: #b0b0b0;
    font-family: var(--font-impact);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid #252525;
    transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
    cursor: pointer;
    white-space: nowrap;   /* etape 8.8 formula1 (allemand) : une langue plus longue que l'anglais
                               casse le label sur 2 lignes et decale la rangee de filtres. Coherent
                               avec le defilement horizontal deja accepte sur mobile. */
    flex-shrink: 0;
}

.duration-btn:hover {
    color: #f1f1f1;
    border-color: var(--accent-primary);
}

.duration-btn.active {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent-primary) 35%, transparent);
}

/* Boutons LIVE (VCR_LIVES_V2, SOCLELIVE) -- ordinateur garde 2 boutons separes : "LIVE (n)"
   (lives en cours, affiche seulement si $vcrLiveNowCount > 0) et le bouton "lives termines"
   existant, inchange. Mobile n'affiche qu'un seul bouton fusionne, .live-mobile-btn (voir plus
   bas) : desktop le cache par defaut ici. Repris d'un projet existant (gruid #21613), en classes
   de theme au lieu des couleurs fixes de ce projet. */
.live-mobile-btn,
.live-mobile-sep {
    display: none;
}

.duration-btn[data-filter="live-now"],
.duration-btn[data-filter="live-all"] {
    gap: 6px;
}

.duration-btn[data-filter="live-now"].active,
.duration-btn[data-filter="live-all"].active {
    color: var(--accent-live, var(--accent-primary));
    border-color: var(--accent-live, var(--accent-primary));
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent-live, var(--accent-primary)) 35%, transparent);
}

.live-now-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-live, var(--accent-primary));
    animation: live-pulse 2s ease-in-out infinite;
}

@media (max-width: 768px) {
    /* Fusion mobile : un seul bouton LIVE remplace les 2 boutons desktop. live-desktop-sep (le
       separateur de LIVE (n)) se cache avec lui. live-mobile-sep n'a pas besoin d'etre force ici :
       il porte aussi la classe .filter-sep du gabarit, donc il suit deja sa regle (cachee pour une
       langue, visible sur le hub) -- la forcer ici l'aurait aussi montre sur les pages de langue,
       ou aucun separateur ne doit apparaitre sur mobile (piege trouve sur un autre projet, #21621).
    */
    /* Garde (ubou, relecture SOCLELIVE) : ne cacher le bouton "lives termines" que si son
       remplacant est bien dans la barre. VCR_LIVES_V2 eteint : le gabarit n'ecrit jamais
       .live-mobile-btn, donc cette regle ne mord pas -- le bouton "lives termines" reste seul,
       comme avant ce chantier. Allume : le remplacant existe, la fusion s'applique. */
    .duration-filters:has(.live-mobile-btn) .duration-btn[data-filter="live"],
    .duration-filters:has(.live-mobile-btn) .duration-btn[data-filter="live-now"],
    .duration-filters:has(.live-mobile-btn) .live-desktop-sep {
        display: none !important;
    }
    .live-mobile-btn {
        display: flex !important;
    }
}

.filter-icon {
    display: flex;
    align-items: center;
    width: 14px;
    height: 14px;
}

.duration-dropdown-wrap {
    position: relative;
}

.duration-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background: #151515;
    border: 1px solid #252525;
    border-radius: 10px;
    padding: 4px;
    min-width: 140px;
    z-index: 200;
    flex-direction: column;
    gap: 2px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

.duration-dropdown-wrap.open .duration-dropdown {
    display: flex;
}

.dropdown-item {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    color: #b0b0b0;
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
}

.dropdown-item:hover,
.dropdown-item.active {
    background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
    color: var(--accent-primary);
}

.search-btn-wrap {
    position: relative;
}

.search-btn-wrap .duration-btn {
    cursor: pointer;
}

.search-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: #151515;
    border: 1px solid #252525;
    border-radius: 10px;
    padding: 6px;
    z-index: 200;
    flex-direction: row;
    gap: 4px;
    min-width: 220px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

.search-btn-wrap.open .search-dropdown {
    display: flex;
}

.filter-search-input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    background: #0a0a0a;
    border: 1px solid #252525;
    border-radius: 6px;
    color: #f1f1f1;
    font-size: 13px;
    outline: none;
}

.filter-search-input:focus {
    border-color: var(--accent-primary);
}

.filter-search-btn {
    padding: 8px 14px;
    background: var(--accent-gradient);
    color: #0a0a0a;
    border: none;
    border-radius: 6px;
    font-family: var(--font-impact);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
}

/* ---- Filtre pays (page principale d'un projet du socle, VCR_PROJET_HUB) ----
   Regle de base absente jusqu'ici (yego, 2026-09-29) : le moteur (templates/index.php)
   ne fait que NEUTRALISER cette regle sur ordinateur (>=769px) ; la base -- panneau
   ferme par defaut, ouvert au clic -- vit dans la feuille du site, jamais dans le
   moteur, pour ne pas changer le rendu d'un projet plus ancien qui utilise un autre
   motif (HUB_SITES, boutons en ligne, pas de dropdown). Position fixed : le JS du
   moteur pose left/top/bottom en px viewport (meme mecanique que .vcr-jauge).
   Couleurs alignees sur .duration-dropdown et .search-dropdown (memes gris). */
.pays-btn-wrap {
    position: relative;
}

.pays-flag {
    width: 20px;
    height: 13px;
    border-radius: 2px;
    vertical-align: -2px;
}

.pays-btn-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.pays-dropdown {
    display: none;
    position: fixed;
    z-index: 1000;
    flex-direction: column;
    gap: 2px;
    min-width: 150px;
    padding: 4px;
    background: #151515;
    border: 1px solid #252525;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

.pays-btn-wrap.open .pays-dropdown {
    display: flex;
}

.pays-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    color: #b0b0b0;
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
}

.pays-dropdown-item:hover,
.pays-dropdown-item.active {
    background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
    color: var(--accent-primary);
}

/* ---- Titres de section + separateurs de date ---- */
.section-title,
.section-title-centered {
    font-family: var(--font-impact);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #f1f1f1;
    text-transform: uppercase;
    padding: 0 16px;
    margin: 20px 0 4px;
}

/* Le nom "centered" ne l'etait pas : meme regle que .section-title, jamais de
   text-align (gruid #21402, socle). Le div qui porte cette classe n'entoure
   QUE le titre "ALL VIDEOS" (templates/index.php, .section-title-centered),
   jamais un autre contenu -- centrer le texte ici ne deplace rien d'autre. */
.section-title-centered {
    text-align: center;
}

.section-count {
    /* Porté du fix volley (etape 8.2, 2026-09-30) au socle : le compteur ("N VIDEOS") pouvait
       se couper sur mobile quand le titre du groupe de dates est long ("TODAY (date) + YESTERDAY"),
       vu sur un petit vivier de chaines. Il reste sur une ligne et passe sous le titre si la place
       manque (voir .grid-date-separator, flex-wrap). Absent du socle jusqu'ici : seul le projet
       volley l'avait, tennis en a hérité sans -- porté ici pour que les prochains projets l'aient
       d'office (debrief volley, 2026-09-30). */
    color: #888;
    font-weight: 500;
    text-transform: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.count-number {
    color: var(--accent-primary);
    font-weight: 700;
    margin-right: 4px;
}

.section-today {
    color: var(--accent-primary);
}

.grid-date-separator {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    /* Le compteur ("N VIDEOS") a droite, le titre de la periode a gauche
       (gruid #21402, socle) : justify-content ne bouge rien du garde-fou
       4d de banc-socle.sh (flex-wrap sur ce bloc, nowrap sur .section-count),
       tous les deux restent presents plus bas. */
    justify-content: space-between;
    gap: 4px 8px;
    padding: 16px 16px 0;
    margin-top: 8px;
}

.grid-date-separator:first-of-type {
    margin-top: 0;
}

.date-separator-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #f1f1f1;
    text-transform: uppercase;
}

.grid-date-separator-today .date-separator-title {
    color: var(--accent-primary);
}

.no-transitions,
.no-transitions * {
    transition: none !important;
}

@media (max-width: 800px) {
    .header-menu {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .duration-filters {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
    }
}

/* ============================================
   PAGE VIDEO (video.php) -- ajoute le 2026-09-25 (@yego)
   Correction du 2026-09-29 (etape 8.4) : le bandeau violet/cyan du titre
   etait en style inline dans core/templates/video.php (L308). Je l avais
   laisse en pensant que ce fichier etait le moteur partage de toute la
   flotte VCR -- FAUX pour ce pilote : build/core est NOTRE copie
   (confirme par amnor sur la cle 18+, #20153), elle ne rejoint le moteur
   commun qu a l etape 17. Remplace par les classes ci-dessous, sur la
   palette piste 1.
   ============================================ */

/* Deux classes, expres : un bloc de projet qui ecrit « .section-title { color: … } » (tous le font) arrivait apres
   « .video-title-band », de meme poids, et remettait le titre en clair sur l'accent (ferrari, 2026-10-06 : 1,46). */
.section-title.video-title-band,
.video-title-band {
    margin: 0;
    background: var(--accent-gradient);
    /* tout le bandeau dans UNE couleur, celle du texte pose sur l'accent : avant, le titre gardait
       le clair de .section-title sur un degrade qui s'eclaircit, et s'effacait vers la droite */
    color: var(--on-accent);
}

/* le nom de la chaine n'a plus sa propre couleur : un filet le separe du titre */
.section-title.video-title-band .video-title-channel,
.video-title-band .video-title-channel {
    color: var(--on-accent);
    border-right: 2px solid var(--on-accent);
    padding-right: 10px;
    margin-right: 6px;
}

/* ==================== PAGE D'ERREUR (404.php) ====================
   Elle n'avait aucune regle : chaque projet devait l'ecrire (hockey, 2026-10-05). Centree, avec
   les variables de :root seulement, donc habillee d'office par le design du projet. */
.error-page {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
}

.error-box .error-code {
    font-family: var(--font-impact);
    font-size: 96px;
    font-weight: 700;
    line-height: 1;
    color: var(--accent-secondary);
    border-bottom: 4px solid var(--accent-primary);
    padding-bottom: 8px;
    margin-bottom: 16px;
}

.error-box h1 {
    font-family: var(--font-impact);
    font-size: 26px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.error-box a {
    display: inline-block;
    margin-top: 18px;
    padding: 8px 16px;
    border: 1px solid var(--accent-primary);
    border-radius: 6px;
    color: var(--text-main);
}

.recommended-label {
    border: 1.5px solid var(--accent-primary);
    border-left: none;
    margin-bottom: 12px;
    margin-left: -20px;
}

.more-from-label {
    border: 1.5px solid var(--accent-primary);
    border-left: none;
    margin-bottom: 12px;
    margin-left: -15px;
}

.more-from-channel {
    color: #fff;
}

/* Badge de date/age sur chaque vignette (accueil, page video). Sans cette
   classe (VCR_THEME_CLASSES absent ou faux), le moteur sert un style en
   dur a la place -- voir SOCLE-VCR.md § 2.1. Neutre ici, comme le reste. */
.video-date-badge {
    background: rgba(10, 14, 20, 0.75);
    color: var(--text-main);
    font-family: var(--font-impact);
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 9px;
    padding: 2px 5px 1px;
    line-height: 1;
    border-radius: 3px;
    animation: none;
    box-shadow: none;
    text-shadow: none;
    border: 1px solid var(--accent-primary);
}

/* Pastilles du bandeau "live"/"past streams" : meme defaut que le badge
   de date (SOCLE-VCR.md § 2.1), couleur laissee par le gabarit. */
.live-viewer-count {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    gap: 3px;
    color: var(--bg-main);
    font-size: 10px;
    font-weight: 700;
    z-index: 3;
    background: var(--accent-primary);
    padding: 1px 5px;
    border-radius: 3px;
}

.ended-duration-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 3;
    background: rgba(0, 0, 0, 0.7);
    color: var(--accent-primary);
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
}

.video-page-layout {
    display: flex;
    gap: 24px;
    padding: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.video-page-player {
    flex: 1 1 640px;
    min-width: 0;
}

.video-sidebar {
    flex: 0 1 340px;
    min-width: 280px;
}

.video-title-row {
    margin-bottom: 12px;
}

.video-meta-row-mobile,
.video-meta-row-desktop {
    padding: 10px 0;
    color: #b0b0b0;
    font-size: 13px;
}

/* au telephone, la rangee « chaine sur YouTube + date » ne passait pas a la ligne : page de 393 px pour 390
   (hockey puis ferrari, 2026-10-06) */
.video-meta-row-mobile {
    flex-wrap: wrap;
    row-gap: 6px;
}

.yt-link-btn-center {
    display: inline-block;
    padding: 8px 16px;
    background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
    border: 1px solid var(--accent-primary);
    border-radius: 20px;
    color: var(--accent-primary);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.yt-link-btn-center:hover {
    background: color-mix(in srgb, var(--accent-primary) 22%, transparent);
}

.video-duration-btn {
    color: #b0b0b0;
}

/* Description repliable : .collapsed = replie (texte cache, bouton "voir") */
.description {
    margin-top: 16px;
    background: #0f0f0f;
    border-radius: 12px;
    padding: 12px 16px;
}

.description-toggle {
    display: inline-flex;
    align-items: center;
    color: var(--accent-primary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    cursor: pointer;
    user-select: none;
}

.toggle-hide {
    display: inline;
}

.description.collapsed .toggle-hide {
    display: none;
}

.description:not(.collapsed) .toggle-show {
    display: none;
}

.description-content {
    margin-top: 10px;
}

.description.collapsed .description-content {
    display: none;
}

.description-text {
    color: #b0b0b0;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-line;
}

/* Cartes de la sidebar (memes chaine / suggestions) */
.sidebar-card {
    display: flex;
    gap: 10px;
    padding: 6px 0;
    text-decoration: none;
    color: inherit;
}

.sidebar-thumb {
    /* le repere de ses pastilles (date, duree) : sans lui elles s'empilaient dans les coins de la PAGE (ferrari, 2026-10-06) */
    position: relative;
    flex: 0 0 120px;
    aspect-ratio: 16/9;
    border-radius: 8px;
    overflow: hidden;
    background: #151515;
}

.sidebar-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-info {
    min-width: 0;
    font-size: 13px;
    line-height: 1.4;
    color: #f1f1f1;
}

.sidebar-channel {
    display: block;
    font-size: 11px;
    color: #888;
    margin-top: 4px;
}

.mobile-channel-section {
    display: none;
}

@media (max-width: 900px) {
    .video-page-layout {
        flex-direction: column;
    }

    .video-sidebar {
        flex-basis: auto;
        width: 100%;
    }
}

/* ============================================
   PAGES LEGALES (legal.php / privacy.php) -- @yego, 2026-09-25
   ============================================ */

.legal-container {
    max-width: 700px;
    margin: 0 auto;
    padding: 30px 20px 100px;
}

.legal-title {
    font-family: var(--font-impact);
    font-size: 28px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 24px;
    text-align: center;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.legal-section {
    margin-bottom: 26px;
}

.legal-section h2 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #f1f1f1;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #252525;
}

.legal-section p,
.legal-section li {
    font-size: 13px;
    line-height: 1.7;
    color: #b0b0b0;
}

.legal-section ul {
    padding-left: 20px;
    margin-top: 6px;
}

.legal-section a {
    color: var(--accent-primary);
    text-decoration: none;
}

.legal-section a:hover {
    text-decoration: underline;
}

/* Pas de bouton dans le bouton (gruid #21492) : dans un bouton de pays, le code n'a ni cadre ni fond, il prend le
   texte du bouton (comme SHORTS ou PAST STREAMS). Le petit cadre reste sur les cartes (.card-code), seul comme le drapeau. */
.pays-btn-wrap .pays-code {
    border: none;
    background: none;
    min-width: 0;
    height: auto;
    padding: 0;
    color: inherit;
    font-size: 12px;
    letter-spacing: 0.5px;
    vertical-align: baseline;
}

/* Les boutons de pays ont le style des autres boutons de la barre (gruid #21494) : le moteur leur donne, sur ordinateur,
   un degrade sombre (.pays-dropdown-item, dans son <style>) ; ici, le meme style que .duration-btn plus haut. */
@media (min-width: 769px) {
    .duration-filters .pays-dropdown .pays-dropdown-item {
        display: flex;
        align-items: center;
        padding: 8px 14px;
        border-radius: 8px;
        background: #131313;
        border: 1px solid #252525;
        color: #b0b0b0;
        font-family: var(--font-impact);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        text-decoration: none;
        box-shadow: none;
        transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
    }
    .duration-filters .pays-dropdown .pays-dropdown-item:hover {
        color: #f1f1f1;
        border-color: var(--accent-primary);
        box-shadow: none;
    }
    .duration-filters .pays-dropdown .pays-dropdown-item.active {
        color: var(--accent-primary);
        border-color: var(--accent-primary);
        box-shadow: 0 0 12px color-mix(in srgb, var(--accent-primary) 35%, transparent);
    }
}

/* ==================== TELEPHONE (SPEC 20261003SOCLEMOBILE, gruid b-socle3) ====================
   Repris d'un projet existant, en version neutre. Trois choses, toutes sous 769 px ou au toucher. */

/* 1. Ecran tactile : apres un appui, le bouton Duree garde l'etat « survole » meme une fois ferme
   (le moteur ecrit ce survol en !important, dans le style de la jauge). Sans souris, il ne s'allume
   donc que s'il est OUVERT ou si une duree est choisie. Les 3 valeurs sont celles de .duration-btn
   au repos, plus haut : si le design change le bouton au repos, changer aussi ces lignes. */
@media (hover: none) {
    .duration-filters .duration-btn.vcr-jauge-wrap:hover:not(.open):not(.active) {
        color: #b0b0b0 !important;
        border-color: #252525 !important;
        box-shadow: none !important;
    }
    .duration-filters .duration-btn.vcr-jauge-wrap:hover:not(.open):not(.active) .filter-icon {
        color: inherit !important;
        fill: currentColor !important;
    }
}

@media (max-width: 768px) {
    /* 2. Miniatures plus grandes : la grille des listes va a 3 px des bords de l'ecran au lieu des
       20 px de .main. 17 px = 20 px de marge de .main - 3 px. Si .main change de marge, refaire le calcul. */
    .main > .video-grid {
        margin-left: -17px;
        margin-right: -17px;
    }
    /* 3. Dates et compteurs plus pres des bords : 8 px (3 px de la grille + 5 px ici) au lieu de 36. */
    .main > .video-grid .grid-date-separator {
        padding-left: 5px;
        padding-right: 5px;
    }
}

/* ============================================
   CHESS-VIDEO — piste « Buis et feutre » (etape 8 ; choix « ok, la piste B » de random par delegation de gruid, #23545)
   L'objet : les pieces en buis verni posees sur le feutre vert, et la bordure de l'echiquier.
   Les couleurs et la police sont dans le :root du haut. Ici : ce que le socle ecrit en dur et la forme propre au projet.
   Pas le vert et le creme en aplat de l'echiquier de tournoi : c'est l'habit de la plus grosse plateforme du sujet.
   ============================================ */
:root { --p-card:#211f1d; --p-ring:#47433e; --p-radius:10px; --p-radius-s:8px; }
.header { background: linear-gradient(180deg, color-mix(in srgb, var(--accent-secondary) 9%, var(--bg-main)) 0%, var(--bg-main) 100%); border-bottom: 1px solid var(--p-ring); }
/* le trait a elle : sous l'en-tete, la bordure d'un echiquier, cases de buis et cases de feutre */
.header::before { content: none; }   /* le trait du haut (degrade du socle, 2px) retire (gruid #24384, 2026-10-10) */
.header::after { content: ''; display: block; height: 1px; margin: 13px -24px -12px; background: var(--accent-gradient); }   /* le meme trait, descendu sous l'en-tete, a 1px */
.video-card { background: var(--p-card); box-shadow: 0 0 0 1px var(--p-ring); border-radius: var(--p-radius); }
.menu-item, .duration-btn, .vcr-all-langue, .vhs-input, .vhs-btn, .vcr-all-langue-lien, .header-top-line .vcr-header-search .vhs-input, .header-top-line .vcr-header-search .vhs-btn { background: var(--p-card); border-color: var(--p-ring); border-radius: var(--p-radius-s); }
.logo { background: transparent; border-color: transparent; box-shadow: none; }
.video-title, .section-title, .section-title-centered, .date-separator-title { color: var(--text-main); }
.section-title, .section-title-centered { font-size: 26px; font-weight: 400; letter-spacing: 1px; }
.logo-name { font-size: 30px; font-weight: 400; letter-spacing: 2px; }
.date-separator-title { font-family: var(--font-impact); font-weight: 400; font-size: 17px; letter-spacing: .5px; text-transform: none; }
.footer { background: color-mix(in srgb, #000 22%, var(--bg-main)); border-top-color: var(--p-ring); }
.menu-item.active { color: var(--on-accent); background: var(--accent-primary); border-color: var(--accent-primary); box-shadow: none; }
.section-title.video-title-band, .section-title.video-title-band .video-title-channel { color: var(--on-accent); }
@media (max-width: 768px) { .section-title, .section-title-centered { font-size: 22px; } .logo-name { font-size: 25px; } }

/* --- lisibilite (etape 8, point 9 ; sonde du 2026-10-09 sur l'apercu) --- */
/* le pied de page et la pagination gardaient les gris du socle (#666) : 3,26 et 3,10 sur le feutre */
.footer p, .footer-disclaimer, .footer-content p, .footer a { color: #a9b8ac; }
.pagination a, .pagination .dots { color: #b9c6bb; border-color: var(--p-ring); }
/* la page courante : texte blanc sur buis = 1,94 ; le texte sur l'accent est --on-accent */
.pagination span.current { color: var(--on-accent); background: var(--accent-primary); border-color: var(--accent-primary); }
/* les boutons au repos : le gris #b0b0b0 du socle, hors palette, devient un buis eteint */
.menu-item, .duration-btn, .vcr-all-langue-lien { color: #c5ccd0; }
/* les cartes : le nom de la chaine et le titre sont poses sur la miniature. Le voile du socle laissait passer les
   zones claires d'une miniature (1,13 mesure sur une fausse miniature blanche) : voile plus haut et plus dense,
   couleur du feutre, et le nom de la chaine en feutre clair plutot qu'en buis (plus lumineux a 11 px) */
.video-overlay { padding-top: 16px; background: linear-gradient(to top, rgba(7,13,10,.93) 0%, rgba(7,13,10,.80) 50%, rgba(7,13,10,.45) 82%, rgba(7,13,10,0) 100%); }   /* le fondu ne prend que les 20 % du haut, au-dessus du texte : un titre de trois lignes y mordait (1,15) */
.video-channel-top { color: #cfe9d8; text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 2px rgba(0,0,0,.9); }
.video-title { text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 2px rgba(0,0,0,.9); }
/* la pastille de date : 9 px en Marcellus sur un fond a 75 % laissait passer une miniature blanche (1,58).
   Fond presque plein, et la police du texte courant : une capitale gravee ne se lit pas a 9 px */
.live-badge.video-date-badge, .live-badge.video-date { background: rgba(7,13,10,.93); font-family: 'Inter', sans-serif; letter-spacing: .3px; }

/* la case de recherche de l'en-tete : le moteur la fixe a 110 px (72 de place pour le texte), « Rechercher... » (100)
   et « Pesquisar... » (85) y etaient coupes (vu par random a l'etape 16, mesure a 1280). 150 px : 112 de place. */
.header-top-line .vcr-header-search .vhs-input { width: 150px; }

/* 2026-10-10 (gruid #24195, site ouvert en anglais) : argent a la place de l or, frise retiree, voile des cartes allege
   (il couvrait les deux tiers d une miniature ; il ne couvre plus que les lignes de texte, le titre garde une ombre). */

/* ============================================
   CHESS-VIDEO, palette chaude (2026-10-10, gruid #24213 : des couleurs plus chaudes, le vert present, inspirees de
   chess.com, boutons compris). Gris chauds sombres, un vert pour ce qui est choisi, creme pour le reste. Les valeurs
   sont les notres, pas les leurs. Les couleurs sont dans les deux :root plus haut ; ici, la forme des boutons
   (rectangles arrondis, bord bas plus sombre) et ce que les regles d avant ecrivaient en vert feutre.
   Les !important tiennent tete au style que le moteur ecrit dans la page.
   ============================================ */
/* l image de fond n est plus ecrite ici : c est le fichier images/entete-fond.jpg a la RACINE du site, pose par le moteur
   (mecanisme du socle, une image pour toutes les langues ; gruid a-uneimage #24701). Ici : la couleur sous l image, et le voile. */
:root{ --entete-voile: rgba(36,34,32,.66); }   /* voile uni, leger (gruid a-voile #24727 ; avant : un degrade de 55 a 92 %) */
.header{ background-color:#242220 !important; border-bottom:1px solid #1b1a18 !important; }
.menu-item, .duration-btn, .vcr-all-langue-lien, .vhs-btn, .header-top-line .vcr-header-search .vhs-btn{
  background:#3b3835 !important; border-color:#3b3835 !important; border-radius:8px !important; color:#e6e2d9 !important; box-shadow:0 3px 0 #1d1b19 !important; }
.vcr-all-langue{ background:transparent !important; border-color:transparent !important; box-shadow:none !important; }
.menu-item.active, .duration-btn.active, .vcr-all-langue-lien.active, .vhs-btn, .header-top-line .vcr-header-search .vhs-btn{
  background:#86b85a !important; border-color:#86b85a !important; color:#18230f !important; box-shadow:0 3px 0 #5f8f3f !important; }
.vhs-input, .header-top-line .vcr-header-search .vhs-input{ box-shadow:none !important; background:#1f1d1b !important; border-color:#47433e !important; border-radius:8px !important; color:#f4f2ea !important; }
.footer{ background:#242220 !important; }
.footer p, .footer-disclaimer, .footer-content p, .footer a{ color:#b9b4ab !important; }
.pagination a, .pagination .dots{ color:#cfcac0 !important; }
.video-overlay{ background:linear-gradient(to top, rgba(22,20,18,.93) 0%, rgba(22,20,18,.80) 50%, rgba(22,20,18,.45) 82%, rgba(22,20,18,0) 100%) !important; }
.video-channel-top{ color:#cfe3b4 !important; }
.live-badge.video-date-badge, .live-badge.video-date{ background:rgba(24,22,20,.93) !important; }

/* ============================================
   CHESS-VIDEO, telephone : la rangee des filtres est FIXE (2026-10-10, gruid #24218, #24220, #24221).
   Elle ne glisse plus : des boutons de meme largeur, sur une ligne, en haut. Dans l ordre : ALL (toutes les langues,
   ecrit par le moteur des qu il y a 2 langues ouvertes), Shorts, Past streams, Duration, ALL XX et sa fleche de langue.
   ALL et ALL XX sont ceux du moteur, inchanges. Sortent de la rangee sur telephone : la recherche, et le bouton LIVE
   fusionne (remplace par Past streams, demande de gruid).
   ============================================ */
@media (max-width: 768px) {
  html body header.header .duration-filters { display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 5px; overflow: visible !important; padding-left: 0 !important; padding-right: 0 !important; }
  html body header.header .duration-filters .vcr-all-mobile { display: contents !important; }
  html body header.header .duration-filters .filter-sep, html body header.header .duration-filters .duration-btn.search-btn-wrap, html body header.header .duration-filters .duration-btn.live-mobile-btn,
  html body header.header .duration-filters .duration-btn[data-filter="live-now"] { display: none !important; }
  html body header.header .duration-filters .duration-btn[data-filter="live"] { display: flex !important; }
  html body header.header .duration-filters .duration-btn, html body header.header .duration-filters a.vcr-all, html body header.header .duration-filters .vcr-all-langue-lien {
    flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; width: auto; height: 52px; margin: 0 !important; padding: 4px 2px !important;
    font-size: 10px !important; line-height: 1.1; letter-spacing: .2px; text-align: center; white-space: normal; }
  html body header.header .duration-filters .duration-btn > span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  html body header.header .duration-filters a.vcr-all { order: 1; display: flex !important; font-size: 12px !important; }
  html body header.header .duration-filters > a.duration-btn:not([data-filter]) { order: 2; }
  html body header.header .duration-filters > a.duration-btn[data-filter="live"] { order: 3; }
  html body header.header .duration-filters .duration-btn.vcr-jauge-wrap { order: 4; }
  html body header.header .duration-filters .vcr-all-langue { order: 5; display: flex !important; gap: 2px; min-width: 0; }
  html body header.header .duration-filters .vcr-all-langue-lien { flex: 1 1 auto; font-size: 12px !important; }
  html body header.header .duration-filters .vcr-lang-fleche > summary { height: 52px; padding: 0 6px; display: flex; align-items: center; }
  html body header.header .duration-filters .vcr-lang-fleche-menu { right: 0; left: auto; }
}
/* les deux boutons du moteur que la palette chaude n avait pas habilles : ALL (toutes les langues) et la fleche */
.vcr-all, .vcr-lang-fleche > summary { background: #3b3835 !important; border-color: #3b3835 !important; border-radius: 8px !important; color: #e6e2d9 !important; box-shadow: 0 3px 0 #1d1b19 !important; }
.vcr-all.active { background: #86b85a !important; border-color: #86b85a !important; color: #18230f !important; box-shadow: 0 3px 0 #5f8f3f !important; }
.vcr-lang-fleche-menu { background: #211f1d !important; border-color: #47433e !important; }
/* telephone, suite (gruid #24223, #24224) : sur l accueil general le bouton de pays (EN) vient APRES Duration ; la rangee prend
   toute la largeur de l ecran (l en-tete a 24 px de marge de chaque cote : la rangee en reprend 18). */
@media (max-width: 768px) {
  html body header.header .duration-filters .duration-btn.pays-btn-wrap { order: 5; }
  html body header.header .duration-filters { margin-left: -18px !important; margin-right: -18px !important; }
}

/* ============================================
   CHESS-VIDEO, ligne de filtres comme fortnite.video (VCR_FILTRES_MONDE, 2026-10-10, gruid #24229 #24231).
   Le moteur ecrit sur la ligne : ALL (WORLD) , ALL (XX) , Shorts , Past lives , Duration. Ici : leur ordre sur telephone
   (WORLD en premier, la langue en dernier : la liste de gruid #24218) et le bouton du monde habille comme les autres.
   ============================================ */
@media (max-width: 768px) {
  html body header.header .duration-filters.vcr-filtres-monde .duration-btn.vcr-monde { order: 1; }
  html body header.header .duration-filters.vcr-filtres-monde .duration-btn[data-filter="shorts"] { order: 2; }
  html body header.header .duration-filters.vcr-filtres-monde .duration-btn[data-filter="live"] { order: 3; }
  html body header.header .duration-filters.vcr-filtres-monde .duration-btn.vcr-jauge-wrap { order: 4; }
  html body header.header .duration-filters.vcr-filtres-monde .duration-btn.vcr-monde-langue { order: 5; }
}

/* telephone (gruid #24246) : WORLD a gauche du nom du site, comme sur fortnite.video ; ALL (XX) au DEBUT de la rangee */
@media (max-width: 768px) {
  html body header.header { position: relative; }
  html body header.header .duration-filters.vcr-filtres-monde { position: static !important; }
  html body header.header .duration-filters.vcr-filtres-monde .duration-btn.vcr-monde { position: absolute; top: 12px; left: 6px; width: 66px; height: 40px; gap: 2px; padding: 3px 2px !important; font-size: 9px !important; z-index: 3; }
  html body header.header .duration-filters.vcr-filtres-monde .duration-btn.vcr-monde .filter-icon { width: 13px; height: 13px; }
  html body header.header .duration-filters.vcr-filtres-monde .duration-btn.vcr-monde-langue { order: 1; }
  html body header.header .duration-filters.vcr-filtres-monde .duration-btn[data-filter="shorts"] { order: 2; }
  html body header.header .duration-filters.vcr-filtres-monde .duration-btn[data-filter="live"] { order: 3; }
  html body header.header .duration-filters.vcr-filtres-monde .duration-btn.vcr-jauge-wrap { order: 4; }
  /* page de lecture : le nom du site est a gauche, il laisse la place du bouton */
  html body header.header .header-content.vcr-entete-v3 > .logo { margin-left: 56px; }
  /* liste : le nom du site se centre dans la place qui reste a droite du bouton */
  html body header.header .header-top-line { padding-left: 52px; }
}
@media (max-width: 360px) {
  /* petit telephone, page de lecture : le nom du site tient a cote du bouton WORLD */
  html body header.header .header-content.vcr-entete-v3 > .logo .logo-name { font-size: 21px !important; letter-spacing: 1px !important; }
}

/* ============================================
   CHESS-VIDEO, UN seul style pour un bouton actif (2026-10-10, gruid #24261) : celui de Past Lives, partout, ordinateur et
   telephone. Avant : ALL et Shorts en vert plein, Past Lives en sombre a contour vert, Duration en vert sur vert (illisible).
   Fond sombre, texte et contour verts, halo leger : les valeurs que le moteur donne au bouton des lives passes.
   ============================================ */
html body header.header .duration-filters .duration-btn.active,
html body header.header .duration-filters .duration-btn.vcr-jauge-wrap.open,
html body header.header .duration-filters .vcr-all-langue-lien.active,
html body header.header .duration-filters a.vcr-all.active,
html body header.header .vcr-all-langue-lien.active,
html body header.header a.vcr-all.active,
html body header.header .menu-item.active,
html body header.header .duration-filters .pays-dropdown-item.active {
  background: linear-gradient(180deg, #32363f 0%, #1a1d22 100%) !important;
  color: var(--accent-live, #86b85a) !important;
  border: 1px solid var(--accent-live, #86b85a) !important;
  box-shadow: 0 0 8px rgba(0, 229, 255, .25) !important;
}
html body header.header .duration-filters .duration-btn.active .filter-icon,
html body header.header .duration-filters .duration-btn.vcr-jauge-wrap.open .filter-icon,
html body header.header .duration-filters .duration-btn.active > span { color: var(--accent-live, #86b85a) !important; fill: currentColor; }
html body header.header .duration-filters .vcr-all-langue-lien.active::before { background: var(--accent-live, #86b85a) !important; }

/* ============================================
   CHESS-VIDEO, le MEME en-tete sur toutes les pages (2026-10-10, gruid #24269) : le nom du site au centre, a la meme
   place et a la meme taille sur la liste, la page de lecture et la page toutes langues ; la recherche a sa droite sans
   le pousser ; la ligne des filtres centree, page toutes langues comprise.
   ============================================ */
@media (min-width: 769px) {
  html body header.header .header-top-line,
  html body header.header .header-content.vcr-entete-v3 { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 16px; max-width: none; margin: 0; padding: 14px 16px 8px !important; }
  html body header.header .header-top-line > .logo,
  html body header.header .header-content.vcr-entete-v3 > .logo { grid-column: 2; justify-self: center; margin: 0 !important; padding: 0 !important; }
  html body header.header .header-top-line > .vcr-header-search,
  html body header.header .header-content.vcr-entete-v3 > .vcr-header-search { grid-column: 3; justify-self: start; margin: 0 !important; }
  html body header.header .duration-filters.vcr-hub.vcr-hub.vcr-hub { justify-content: center !important; }
  html body header.header .duration-filters.vcr-hub.vcr-hub.vcr-hub.vcr-hub > * { margin-right: 0 !important; margin-left: 0 !important; }
}
/* le nom du site : memes mesures partout (la page de lecture l ecrit dans un .logo-text, plus grand) */
html body header.header .logo .logo-name { font-size: 30px !important; line-height: 1.4 !important; letter-spacing: 2px !important; }
html body header.header .logo .logo-text { display: block; line-height: 1; }
html body header.header .vcr-header-search .vhs-input,
html body header.header .vcr-header-search .vhs-btn { height: 38px; box-sizing: border-box; font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-style: normal !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; line-height: 1 !important; padding: 0 14px !important; }
html body header.header .vcr-header-search .vhs-input { width: 170px !important; }
html body header.header .vcr-header-search { display: flex; align-items: center; gap: 6px !important; }
/* la pastille de langue de la page toutes langues : habillee comme les autres boutons */
html body header.header .duration-filters .pays-dropdown-item { background: #3b3835 !important; border: 1px solid #3b3835 !important; border-radius: 8px !important; color: #e6e2d9 !important; box-shadow: 0 3px 0 #1d1b19 !important; }
@media (max-width: 768px) {
  html body header.header .logo .logo-name { font-size: 25px !important; }
  /* page de lecture : comme la liste (pas de recherche dans l en-tete, le nom centre a droite du bouton WORLD) */
  html body header.header .header-content.vcr-entete-v3 { display: flex !important; justify-content: center; padding: 14px 16px 8px 52px !important; }
  html body header.header .header-content.vcr-entete-v3 > .logo { margin: 0 !important; padding: 0 !important; flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; }
  html body header.header .header-content.vcr-entete-v3 > .logo, html body header.header .header-content.vcr-entete-v3 > .logo .logo-text { justify-content: center; text-align: center; }
  html body header.header .header-top-line { padding: 14px 16px 8px 52px !important; }
  html body header.header .header-content.vcr-entete-v3 > .vcr-header-search { display: none !important; }
}
@media (max-width: 360px) {
  /* petit telephone : le nom garde la taille de la liste sur la page de lecture (annule la reduction posee plus haut) */
  html body header.header .header-content.vcr-entete-v3 > .logo .logo-name { font-size: 25px !important; letter-spacing: 2px !important; }
}

/* la jauge de duree a la meme hauteur que les autres boutons de la ligne (gruid #24281 : elle faisait 26 px pour 37) */
@media (min-width: 769px) {
  html body header.header .duration-filters .duration-btn.vcr-jauge-wrap { min-height: 37px; box-sizing: border-box; align-self: center; padding-top: 0 !important; padding-bottom: 0 !important; }
}

/* page toutes langues, ordinateur : le CONTENEUR des pastilles de langue n est pas un bouton. Quand une langue est choisie il
   prenait le style actif (cadre vert autour de toutes les pastilles, capture de gruid #24287) : seules les pastilles le portent. */
@media (min-width: 769px) {
  html body header.header .duration-filters .duration-btn.pays-btn-wrap,
  html body header.header .duration-filters .duration-btn.pays-btn-wrap.active,
  html body header.header .duration-filters .duration-btn.pays-btn-wrap.open { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; min-height: 0; }
}

/* ============================================
   CHESS-VIDEO, le bloc des directs (2026-10-11, capture de gruid #24323). Le site modele du socle n avait presque aucune regle
   pour ce bloc (2, contre 32 dans la feuille de fortnite.video) : les vignettes s empilaient en colonne et le titre de la liste
   etait ecrit deux fois. Ici : les vignettes sur UNE ligne qui defile, comme sur fortnite.video, et le titre une seule fois.
   ============================================ */
.section-header-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 10px; }
/* le titre de la liste est ecrit deux fois par le moteur (dans ce bandeau, et centre sous le bloc) : on garde celui du dessous.
   Celui du bandeau reste dans la page pour les moteurs de recherche (c est le h1), hors de l ecran. */
.section-header-row .section-title { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.desktop-only-title { display: flex; justify-content: center; }
.live-section-title { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-impact); font-size: 17px; font-weight: 400; letter-spacing: .5px; text-transform: uppercase; color: var(--text-main); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-primary); box-shadow: 0 0 6px var(--accent-primary); flex: 0 0 8px; }
.live-border-line { display: none; }
.live-scroll-wrapper { position: relative; }
.live-scroll { display: flex; gap: 10px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding: 2px 0 6px; }
.live-scroll::-webkit-scrollbar { display: none; }
.live-card { flex: 0 0 auto; width: calc((100% - 20px) / 2.2); text-decoration: none; }
.live-thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--p-radius); overflow: hidden; background: var(--p-card); box-shadow: 0 0 0 1px var(--p-ring); }
.live-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.live-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 6px; background: linear-gradient(to top, rgba(22,20,18,.93) 0%, rgba(22,20,18,.6) 65%, rgba(22,20,18,0) 100%); }
.live-channel { font-size: 11px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: #cfe3b4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0,0,0,.95); }
.live-title { font-size: 13px; font-weight: 500; line-height: 1.25; color: var(--text-main); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 3px rgba(0,0,0,.95); }
.live-nav-btn { display: none; }
@media (min-width: 769px) {
  .live-card { width: calc((100% - 50px) / 6); min-width: 170px; }
  .live-nav-btn { display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 34px; height: 46px; padding: 0; cursor: pointer;
    background: #3b3835; color: #e6e2d9; border: 1px solid var(--p-ring); box-shadow: 0 3px 0 #1d1b19; }
  .live-nav-btn:hover { color: var(--accent-primary); }
  .live-nav-prev { left: 0; border-radius: 0 8px 8px 0; }
  .live-nav-next { right: 0; border-radius: 8px 0 0 8px; }
}

/* ============================================
   CHESS-VIDEO, au survol : la bordure d un bouton du menu prend la couleur de la jauge (2026-10-11, gruid #24469). Avant, seule
   la jauge " Duration " le faisait (style ecrit par le moteur) : la palette chaude fixait la bordure des autres en !important.
   Le conteneur des pastilles de langue n est pas un bouton : il reste sans bordure.
   Seulement avec une souris (hover: hover) : sur un ecran tactile le survol reste colle apres un appui, c est la raison de la
   regle du socle qui eteint la jauge sous (hover: none), plus haut.
   ============================================ */
@media (hover: hover) {
html body header.header .duration-filters .duration-btn:not(.pays-btn-wrap):hover,
html body header.header .duration-filters a.vcr-all:hover,
html body header.header .duration-filters .vcr-all-langue-lien:hover,
html body header.header .duration-filters .pays-dropdown-item:hover,
html body header.header .duration-filters .vcr-lang-fleche > summary:hover,
html body header.header a.vcr-all:hover,
html body header.header .vcr-all-langue-lien:hover,
html body header.header .menu-item:hover { border-color: var(--accent-hover-jauge, var(--accent-primary)) !important; }
}

/* ============================================
   CHESS-VIDEO, boutons " marbre vert " (2026-10-11, gruid #24479 puis choix d-boutons) : les boutons ressortaient mal au repos
   sur l image de fond. Au repos : vert sombre, comme les pieces de l image, lisere vert, texte ivoire. Allume : vert PLEIN,
   texte sombre, sans halo (adouci le 2026-10-11, gruid : un peu moins vif). Remplace le " UN seul style pour un bouton actif " plus haut :
   il n y a toujours qu une forme allumee. Le bouton OK garde la forme allumee ; le champ de recherche prend le fond sombre.
   Le triple .header donne a ce bloc le dernier mot sur les regles en !important qui le precedent.
   ============================================ */
html body header.header.header .duration-filters .duration-btn:not(.pays-btn-wrap),
html body header.header.header .duration-filters a.vcr-all,
html body header.header.header .duration-filters .vcr-all-langue-lien,
html body header.header.header .duration-filters .pays-dropdown-item,
html body header.header.header .duration-filters .vcr-lang-fleche > summary {
  background: linear-gradient(180deg, #24493a 0%, #14291f 100%) !important; border: 1px solid #4f8a6c !important; border-radius: 8px !important;
  box-shadow: 0 3px 0 #0b1711, inset 0 1px 0 rgba(255,255,255,.12) !important; color: #eef3e6 !important; }
html body header.header.header .duration-filters .duration-btn:not(.active):not(.open):not(.pays-btn-wrap) > span,
html body header.header.header .duration-filters .duration-btn:not(.active):not(.open):not(.pays-btn-wrap) .filter-icon,
html body header.header.header .duration-filters .pays-dropdown-item:not(.active) span { color: #eef3e6 !important; fill: currentColor !important; }
html body header.header.header .duration-filters .duration-btn.active:not(.pays-btn-wrap),
html body header.header.header .duration-filters .duration-btn.vcr-jauge-wrap.open,
html body header.header.header .duration-filters a.vcr-all.active,
html body header.header.header .duration-filters .vcr-all-langue-lien.active,
html body header.header.header .duration-filters .pays-dropdown-item.active {
  background: linear-gradient(180deg, #8fbf68 0%, #62923f 100%) !important; border: 1px solid #a9cf88 !important;
  box-shadow: 0 3px 0 #3a6026 !important; color: #0f1c07 !important; }
html body header.header.header .duration-filters .duration-btn.active:not(.pays-btn-wrap) > span,
html body header.header.header .duration-filters .duration-btn.active:not(.pays-btn-wrap) .filter-icon,
html body header.header.header .duration-filters .duration-btn.active:not(.pays-btn-wrap) span,
html body header.header.header .duration-filters .duration-btn.vcr-jauge-wrap.open > span,
html body header.header.header .duration-filters .duration-btn.vcr-jauge-wrap.open .filter-icon,
html body header.header.header .duration-filters .pays-dropdown-item.active span { color: #122008 !important; fill: currentColor !important; }
html body header.header.header .duration-filters .vcr-all-langue-lien.active::before { background: #122008 !important; }
/* au survol (souris seulement) : le lisere s eclaircit, comme la regle " au survol " plus haut */
@media (hover: hover) {
  html body header.header.header .duration-filters .duration-btn:not(.pays-btn-wrap):not(.active):not(.open):hover,
  html body header.header.header .duration-filters a.vcr-all:not(.active):hover,
  html body header.header.header .duration-filters .vcr-all-langue-lien:not(.active):hover,
  html body header.header.header .duration-filters .pays-dropdown-item:not(.active):hover,
  html body header.header.header .duration-filters .vcr-lang-fleche > summary:hover { border-color: #a6d67a !important; }
}
/* la jauge allumee : ses chiffres, son rail et ses poignees passent en sombre, sinon ils sont verts sur vert */
html body header.header.header .duration-filters .duration-btn.vcr-jauge-wrap.active .vcr-jauge-val,
html body header.header.header .duration-filters .duration-btn.vcr-jauge-wrap.open .vcr-jauge-val,
html body header.header.header .duration-filters .duration-btn.vcr-jauge-wrap.active .vcr-jauge-val span,
html body header.header.header .duration-filters .duration-btn.vcr-jauge-wrap.open .vcr-jauge-val span { color: #122008 !important; }
html body header.header.header .duration-filters .duration-btn.vcr-jauge-wrap.active .vcr-jauge-track::before,
html body header.header.header .duration-filters .duration-btn.vcr-jauge-wrap.open .vcr-jauge-track::before { background: rgba(18,32,8,.38) !important; }
html body header.header.header .duration-filters .duration-btn.vcr-jauge-wrap.active .vcr-jauge-track input[type=range]::-webkit-slider-thumb,
html body header.header.header .duration-filters .duration-btn.vcr-jauge-wrap.open .vcr-jauge-track input[type=range]::-webkit-slider-thumb { background: #122008 !important; border-color: #c9eda6 !important; }
html body header.header.header .duration-filters .duration-btn.vcr-jauge-wrap.active .vcr-jauge-track input[type=range]::-moz-range-thumb,
html body header.header.header .duration-filters .duration-btn.vcr-jauge-wrap.open .vcr-jauge-track input[type=range]::-moz-range-thumb { background: #122008 !important; border-color: #c9eda6 !important; }
/* au repos, les chiffres de la jauge en ivoire (le moteur les met a 50 % de blanc) */
html body header.header.header .duration-filters .duration-btn.vcr-jauge-wrap:not(.active):not(.open) .vcr-jauge-val { color: #d5dfd0 !important; }
/* telephone : le bouton de pays de l accueil EST un bouton (sur ordinateur c est un simple conteneur de pastilles) */
@media (max-width: 768px) {
  html body header.header.header .duration-filters .duration-btn.pays-btn-wrap {
    background: linear-gradient(180deg, #24493a 0%, #14291f 100%) !important; border: 1px solid #4f8a6c !important; border-radius: 8px !important;
    box-shadow: 0 3px 0 #0b1711, inset 0 1px 0 rgba(255,255,255,.12) !important; color: #eef3e6 !important; }
  html body header.header.header .duration-filters .duration-btn.pays-btn-wrap > span,
  html body header.header.header .duration-filters .duration-btn.pays-btn-wrap > .pays-btn-label { color: #eef3e6 !important; }
  html body header.header.header .duration-filters .duration-btn.pays-btn-wrap.active {
    background: linear-gradient(180deg, #8fbf68 0%, #62923f 100%) !important; border: 1px solid #a9cf88 !important;
    box-shadow: 0 3px 0 #3a6026 !important; color: #0f1c07 !important; }
  html body header.header.header .duration-filters .duration-btn.pays-btn-wrap.active > span,
  html body header.header.header .duration-filters .duration-btn.pays-btn-wrap.active > .pays-btn-label { color: #122008 !important; }
}
/* au survol d un bouton ALLUME (souris seulement) : un halo apparait (gruid, choix b-survolactif, 2026-10-11). Au repos il n y en a
   pas : c est ce qui rendait l allume trop vif. Un clic sur un bouton allume le desactive : l effet dit " je reagis ". */
@media (hover: hover) {
  html body header.header.header .duration-filters .duration-btn.active:not(.pays-btn-wrap):hover,
  html body header.header.header .duration-filters .duration-btn.vcr-jauge-wrap.open:hover,
  html body header.header.header .duration-filters a.vcr-all.active:hover,
  html body header.header.header .duration-filters .vcr-all-langue-lien.active:hover,
  html body header.header.header .duration-filters .pays-dropdown-item.active:hover,
  html body header.header.header .vcr-header-search .vhs-btn:hover { box-shadow: 0 3px 0 #3a6026, 0 0 14px rgba(134,184,90,.6) !important; }
}
/* la recherche : le champ sur fond sombre, le bouton OK dans la forme allumee */
html body header.header.header .vcr-header-search .vhs-input { background: rgba(11,23,17,.78) !important; border: 1px solid #4f8a6c !important; color: #eef3e6 !important; }
html body header.header.header .vcr-header-search .vhs-input::placeholder { color: #b9c9bb !important; opacity: 1; }
html body header.header.header .vcr-header-search .vhs-btn { background: linear-gradient(180deg, #8fbf68 0%, #62923f 100%) !important; border: 1px solid #a9cf88 !important; box-shadow: 0 3px 0 #3a6026 !important; color: #0f1c07 !important; }

/* ============================================
   CHESS-VIDEO, fond de page : un damier dans l ombre, eclaire par QUATRE lueurs qui s allument l une apres l autre
   (2026-10-11, gruid #24516, #24519, #24527, puis : plus lentes, moins lumineuses, aucune en meme temps).
   Le fond est un vert presque noir. Quatre calques fixes derriere la page portent chacun de grandes cases a peine marquees, visibles
   seulement dans UN halo. Un tour complet dure 24 secondes : chaque lueur a 6 secondes a elle (elle monte, bat deux fois lentement,
   s eteint), puis c est la suivante ; entre-temps elle reste a une trace tres faible. Rien n est telecharge : tout est dessine en CSS.
   Qui a demande moins d animations a son appareil (prefers-reduced-motion) voit le damier fixe, sans battement.
   Le fond uni est porte par <html>, et <body> est transparent : sinon le fond de <body> se peint PAR-DESSUS les calques
   (z-index negatif) et on ne voit rien - mesure a l essai du 2026-10-11.
   ============================================ */
html { background: #0e1411 !important; }
html body { background: transparent !important; }
html body::before, html body::after, html::before, html::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .08;
  animation: chess-battement 24s ease-in-out infinite; will-change: opacity; }
html body::before { animation-delay: 0s;
  background: radial-gradient(560px 420px at 20% 36%, rgba(104,170,126,.20) 0%, rgba(104,170,126,0) 70%), conic-gradient(rgba(236,243,230,.085) 25%, rgba(0,0,0,0) 0 50%, rgba(236,243,230,.085) 0 75%, rgba(0,0,0,0) 0) 0 0 / 128px 128px;
  -webkit-mask-image: radial-gradient(620px 460px at 20% 36%, #000 0%, rgba(0,0,0,0) 72%);
          mask-image: radial-gradient(620px 460px at 20% 36%, #000 0%, rgba(0,0,0,0) 72%); }
html body::after { animation-delay: -18s;
  background: radial-gradient(560px 420px at 74% 24%, rgba(104,170,126,.20) 0%, rgba(104,170,126,0) 70%), conic-gradient(rgba(236,243,230,.085) 25%, rgba(0,0,0,0) 0 50%, rgba(236,243,230,.085) 0 75%, rgba(0,0,0,0) 0) 0 0 / 128px 128px;
  -webkit-mask-image: radial-gradient(620px 460px at 74% 24%, #000 0%, rgba(0,0,0,0) 72%);
          mask-image: radial-gradient(620px 460px at 74% 24%, #000 0%, rgba(0,0,0,0) 72%); }
html::before { animation-delay: -12s;
  background: radial-gradient(560px 420px at 80% 74%, rgba(104,170,126,.20) 0%, rgba(104,170,126,0) 70%), conic-gradient(rgba(236,243,230,.085) 25%, rgba(0,0,0,0) 0 50%, rgba(236,243,230,.085) 0 75%, rgba(0,0,0,0) 0) 0 0 / 128px 128px;
  -webkit-mask-image: radial-gradient(620px 460px at 80% 74%, #000 0%, rgba(0,0,0,0) 72%);
          mask-image: radial-gradient(620px 460px at 80% 74%, #000 0%, rgba(0,0,0,0) 72%); }
html::after { animation-delay: -6s;
  background: radial-gradient(560px 420px at 28% 88%, rgba(104,170,126,.20) 0%, rgba(104,170,126,0) 70%), conic-gradient(rgba(236,243,230,.085) 25%, rgba(0,0,0,0) 0 50%, rgba(236,243,230,.085) 0 75%, rgba(0,0,0,0) 0) 0 0 / 128px 128px;
  -webkit-mask-image: radial-gradient(620px 460px at 28% 88%, #000 0%, rgba(0,0,0,0) 72%);
          mask-image: radial-gradient(620px 460px at 28% 88%, #000 0%, rgba(0,0,0,0) 72%); }
@keyframes chess-battement { 0% { opacity: .08; } 6% { opacity: .72; } 11% { opacity: .42; } 16% { opacity: .64; } 25% { opacity: .08; } 100% { opacity: .08; } }
@media (max-width: 768px) {
  html body::before, html body::after, html::before, html::after { background-size: auto, 84px 84px; }
}
@media (prefers-reduced-motion: reduce) {
  html body::before, html body::after, html::before, html::after { animation: none; opacity: .3; }
}
/* le pied de page laisse voir le damier et ses lueurs : un voile leger seulement (a 86 % il les cachait, gruid #24631), un filet
   vert sombre au-dessus */
html body .footer { background: rgba(9,14,11,.28) !important; border-top: 1px solid #1f3328 !important; }

/* LES CARTES VIDEO (zone 8 du design, gruid « D » #24840 puis « c-pastilles » #24844, 2026-10-11) : le titre et le nom de la
   chaine passent SOUS l'image, sur un bandeau du vert sombre des boutons au repos ; l'image reste entiere (plus de voile).
   Le moteur ecrit le bandeau (.video-overlay) et les deux pastilles DANS .video-thumb : on rend donc .video-thumb a sa
   hauteur naturelle, l'image garde seule le 16/9, et les pastilles se placent par rapport a la LARGEUR de la carte
   (56.25cqw = la hauteur de l'image) : sans cela elles tomberaient en bas du bandeau.
   Pastilles « marbre » : la date en vert sombre (11 px ; a 9 px elle ne se lisait pas), la duree en vert allume.
   Un direct en cours (.video-duration.live) garde sa couleur. */
html body .video-card { box-shadow: 0 0 0 1px #4f8a6c !important; border-radius: 8px !important; }
html body .video-card .video-thumb { aspect-ratio: auto !important; overflow: visible !important; container-type: inline-size; }
html body .video-card .video-thumb img { aspect-ratio: 16 / 9; height: auto !important; display: block; }
html body .video-card .video-overlay { position: static !important; padding: 9px 10px 10px !important; min-height: 66px;
  background: linear-gradient(180deg, #24493a, #14291f) !important; border-top: 1px solid #4f8a6c; }
html body .video-card .video-title, html body .video-card .video-channel-top { text-shadow: none !important; }
html body .video-card .video-channel-top { color: #a9cf88 !important; }
html body .video-card .video-duration { bottom: auto !important; top: calc(56.25cqw - 29px); padding: 3px 7px !important;
  border-radius: 5px !important; line-height: 1.1 !important; }
html body .video-card .video-duration:not(.live) { background: linear-gradient(180deg, #8fbf68, #62923f) !important; color: #0f1c07 !important;
  font-weight: 700 !important; border: 1px solid #a9cf88; }
html body .video-card .live-badge.video-date-badge { animation: none !important; box-shadow: none !important; text-shadow: none !important;
  font-family: 'Inter', sans-serif !important; text-transform: uppercase; line-height: 1 !important; font-size: 11px !important;
  font-weight: 600 !important; padding: 4px 7px !important; border-radius: 5px !important; letter-spacing: .3px !important;
  background: linear-gradient(180deg, #24493a, #14291f) !important; border: 1px solid #4f8a6c !important; color: #eef4e8 !important; }

/* LE BLOC DES DIRECTS (zone 9 du design, gruid « b-directs », 2026-10-11) : le meme habillage que les cartes video (titre
   sous l image sur le bandeau vert sombre, date en vert sombre, duree en vert allume). L image d un direct termine n est plus
   assombrie (le moteur ecrit opacity .6 dans la balise). Corrige aussi : sur telephone, les deux pastilles etaient en haut et se
   chevauchaient (6 cartes sur 7 mesurees) ; la duree descend en bas de l image. Un direct EN COURS garde sa pastille du moteur. */
html body .live-card{border:1px solid #4f8a6c;border-radius:8px;overflow:hidden;box-sizing:border-box;background:#14291f}
html body .live-card .live-thumb{aspect-ratio:auto!important;overflow:visible!important;border-radius:0!important;box-shadow:none!important;background:none!important;container-type:inline-size}
html body .live-card .live-thumb img{aspect-ratio:16/9;height:auto!important;opacity:1!important}
html body .live-card .live-overlay{position:static!important;padding:8px 9px 9px!important;min-height:58px;background:linear-gradient(180deg,#24493a,#14291f)!important;border-top:1px solid #4f8a6c}
html body .live-card .live-channel,html body .live-card .live-title{text-shadow:none!important}
html body .live-card .live-channel{color:#a9cf88!important}
html body .live-card .ended-duration-badge{position:absolute!important;right:8px!important;left:auto!important;bottom:auto!important;top:calc(56.25cqw - 29px)!important;z-index:3;background:linear-gradient(180deg,#8fbf68,#62923f)!important;color:#0f1c07!important;font-weight:700!important;font-size:12px!important;border:1px solid #a9cf88!important;padding:3px 7px!important;border-radius:5px!important;line-height:1.1!important}
html body .live-card .live-badge.video-date-badge{animation:none!important;box-shadow:none!important;text-shadow:none!important;font-family:'Inter',sans-serif!important;text-transform:uppercase;line-height:1!important;font-size:11px!important;font-weight:600!important;padding:4px 7px!important;border-radius:5px!important;letter-spacing:.3px!important;background:linear-gradient(180deg,#24493a,#14291f)!important;border:1px solid #4f8a6c!important;color:#eef4e8!important}

/* LA PAGE DE LECTURE (zone 11 du design, gruid « d-lecture », 2026-10-11) : le bandeau du titre passe du vert clair au vert
   sombre des cartes (c etait la seule tache claire du site ; sur telephone 3 lignes -> 2), la duree en pastille verte, la date
   et le bouton de la chaine en vert sombre, les videos de la liste de droite dans des cartes vertes.
   ATTENTION : la classe video-page est sur <body> : les selecteurs sont « html body.video-page … ». */
html body.video-page .section-title.video-title-band{background:linear-gradient(180deg,#24493a,#14291f)!important;border:1px solid #4f8a6c!important;border-radius:8px!important;color:#f4f2ea!important;box-shadow:0 3px 0 #0d1a14}
html body.video-page .section-title.video-title-band .video-title-channel{color:#a9cf88!important;border-color:#4f8a6c!important}
@media (max-width:768px){html body.video-page .section-title.video-title-band{font-size:18px!important;line-height:1.35!important;padding:9px 12px!important}
html body.video-page .section-title.video-title-band .video-title-channel{font-size:18px!important}}
html body.video-page .video-meta-row-mobile .date-separator-title{background:linear-gradient(180deg,#8fbf68,#62923f)!important;color:#0f1c07!important;border:1px solid #a9cf88!important;border-radius:6px!important;padding:5px 10px 5px 8px!important;font-family:'Inter',sans-serif!important;font-weight:700!important;font-size:14px!important;margin-left:16px}
html body.video-page .video-meta-row-mobile .section-count{background:linear-gradient(180deg,#24493a,#14291f)!important;border:1px solid #4f8a6c!important;color:#eef4e8!important;border-radius:6px!important;padding:6px 10px!important;font-weight:600!important;font-size:12px!important;margin-right:16px}
html body.video-page .yt-link-btn-center{background:linear-gradient(180deg,#24493a,#14291f)!important;border:1px solid #4f8a6c!important;color:#eef4e8!important;border-radius:8px!important;box-shadow:0 3px 0 #0d1a14!important}
html body.video-page .sidebar-card{background:linear-gradient(180deg,#24493a,#14291f)!important;border:1px solid #4f8a6c!important;border-radius:8px!important;overflow:hidden;padding:0!important}
html body.video-page .sidebar-card .sidebar-info{padding:8px 10px!important}
html body.video-page .sidebar-card .sidebar-thumb{border-radius:0!important}
html body.video-page .description-toggle{color:#a9cf88!important}
/* le nom de la chaine dans la liste de droite : son gris passait a 3,88 sur la carte verte (sonde, juste apres l envoi 53) */
html body.video-page .sidebar-card .sidebar-channel { color: #a9cf88 !important; }
/* page de lecture, deux retouches de gruid (#24899) : la date sous le lecteur (« 7 OCT ») prend EXACTEMENT le style de la pastille
   de date des cartes ; le bouton de la chaine prend une bordure verte au survol (souris seulement), comme les boutons du menu. */
html body.video-page .video-meta-row-mobile .section-count { animation: none !important; box-shadow: none !important; text-shadow: none !important;
  font-family: 'Inter', sans-serif !important; text-transform: uppercase; line-height: 1 !important; font-size: 11px !important;
  font-weight: 600 !important; padding: 4px 7px !important; border-radius: 5px !important; letter-spacing: .3px !important;
  background: linear-gradient(180deg, #24493a, #14291f) !important; border: 1px solid #4f8a6c !important; color: #eef4e8 !important; }
@media (hover: hover) {
  html body.video-page .yt-link-btn-center:hover { border-color: var(--accent-hover-jauge, var(--accent-primary)) !important; }
}
/* PAGE DE LECTURE, RELIEE AU RESTE DU SITE (gruid #24910, 2026-10-11) — remplace les deux regles du bloc precedent sur la date.
   1. Sous le lecteur, la DATE et la DUREE sont UNE seule regle (un selecteur groupe) : changer l une change l autre.
   2. Le titre « videos recommandees » n a plus son cadre a lui : il prend la forme du separateur de date des listes (meme classe
      .date-separator-title, donc meme police ; ici on retire son cadre et on l aligne comme sur l accueil : 16 px a droite du bord
      des cartes sur ordinateur, 5 px sur telephone). TOUTE retouche future du separateur de date doit viser les deux :
      « .grid-date-separator .date-separator-title » ET « .recommended-label ». */
html body.video-page .video-meta-row-mobile .date-separator-title,
html body.video-page .video-meta-row-mobile .section-count {
  background: linear-gradient(180deg, #8fbf68, #62923f) !important; color: #0f1c07 !important; border: 1px solid #a9cf88 !important;
  border-radius: 6px !important; padding: 5px 10px 5px 8px !important; font-family: 'Inter', sans-serif !important; font-weight: 700 !important;
  font-size: 14px !important; line-height: 1.37 !important; letter-spacing: normal !important; text-transform: uppercase; box-shadow: none !important; }
html body.video-page .video-meta-row-mobile .section-count { padding-left: 10px !important; }
html body.video-page .recommended-label, html body.video-page .more-from-label {
  border: 0 !important; margin: 0 0 20px 0 !important; padding: 0 16px !important; background: none !important; }
@media (max-width: 768px) {
  html body.video-page .recommended-label, html body.video-page .more-from-label { padding: 0 5px !important; margin-bottom: 12px !important; }
}
/* la liste de droite de la page de lecture : ses deux pastilles prennent le style de celles des cartes (meme declarations que
   « LES CARTES VIDEO », zone 8) : elles etaient restees a l ancien style (vu sur ma capture apres l envoi 57 ; gruid #24910 :
   « les elements de cette page lies avec le reste du site »). Leur place ne change pas. */
html body.video-page .sidebar-card .video-duration:not(.live) { background: linear-gradient(180deg, #8fbf68, #62923f) !important; color: #0f1c07 !important;
  font-weight: 700 !important; border: 1px solid #a9cf88; padding: 3px 7px !important; border-radius: 5px !important; line-height: 1.1 !important; }
html body.video-page .sidebar-card .live-badge.video-date-badge { animation: none !important; box-shadow: none !important; text-shadow: none !important;
  font-family: 'Inter', sans-serif !important; text-transform: uppercase; line-height: 1 !important; font-size: 11px !important;
  font-weight: 600 !important; padding: 4px 7px !important; border-radius: 5px !important; letter-spacing: .3px !important;
  background: linear-gradient(180deg, #24493a, #14291f) !important; border: 1px solid #4f8a6c !important; color: #eef4e8 !important; }
/* LE BORD SOUS LES BOUTONS AU REPOS (gruid « c-bord », 2026-10-11) : vert sombre #1b3a2c au lieu du presque noir #0b1711, qui
   ressortait comme une ligne noire sur le voile allege de l en-tete. Memes selecteurs que le bloc « marbre vert » (un bouton
   allume garde son bord a lui : ses regles portent .active et passent devant). Et, pour que la page de lecture reste liee au
   reste : le bandeau du titre et le bouton de la chaine prennent le meme bord. */
html body header.header.header .duration-filters .duration-btn:not(.pays-btn-wrap),
html body header.header.header .duration-filters a.vcr-all,
html body header.header.header .duration-filters .vcr-all-langue-lien,
html body header.header.header .duration-filters .pays-dropdown-item,
html body header.header.header .duration-filters .vcr-lang-fleche > summary {
  box-shadow: 0 3px 0 #1b3a2c, inset 0 1px 0 rgba(255,255,255,.12) !important; }
@media (max-width: 768px) {
  html body header.header.header .duration-filters .duration-btn.pays-btn-wrap {
    box-shadow: 0 3px 0 #1b3a2c, inset 0 1px 0 rgba(255,255,255,.12) !important; }
}
html body.video-page .section-title.video-title-band, html body.video-page .yt-link-btn-center { box-shadow: 0 3px 0 #1b3a2c !important; }
/* LE BORD SOUS LES BOUTONS AU REPOS, 2e choix de gruid (« fais d-bord en fait », 2026-10-11) : un bord FIN, 1 px au lieu de 3,
   dans le sombre d origine (#0b1711). Remplace le bloc « c-bord » juste au-dessus (memes selecteurs, il passe apres). */
html body header.header.header .duration-filters .duration-btn:not(.pays-btn-wrap),
html body header.header.header .duration-filters a.vcr-all,
html body header.header.header .duration-filters .vcr-all-langue-lien,
html body header.header.header .duration-filters .pays-dropdown-item,
html body header.header.header .duration-filters .vcr-lang-fleche > summary {
  box-shadow: 0 1px 0 #0b1711, inset 0 1px 0 rgba(255,255,255,.12) !important; }
@media (max-width: 768px) {
  html body header.header.header .duration-filters .duration-btn.pays-btn-wrap {
    box-shadow: 0 1px 0 #0b1711, inset 0 1px 0 rgba(255,255,255,.12) !important; }
}
html body.video-page .section-title.video-title-band, html body.video-page .yt-link-btn-center { box-shadow: 0 1px 0 #0b1711 !important; }
/* LA PAGINATION (zone 12 du design, gruid « b-pages », 2026-10-11) : le meme bouton que dans l en-tete. Au repos : vert sombre,
   filet vert, bord fin dessous (d-bord). La page courante : le vert allume, SANS trait dessous (gruid : « retirer le trait vert
   en dessous du bouton actif »). Bordure verte au survol, souris seulement. */
html body .pagination a { background: linear-gradient(180deg, #24493a 0%, #14291f 100%) !important; border: 1px solid #4f8a6c !important; color: #eef3e6 !important;
  border-radius: 8px !important; box-shadow: 0 1px 0 #0b1711 !important; }
html body .pagination span.current { background: linear-gradient(180deg, #8fbf68 0%, #62923f 100%) !important; border: 1px solid #a9cf88 !important; color: #0f1c07 !important;
  border-radius: 8px !important; box-shadow: none !important; font-weight: 700 !important; }
@media (hover: hover) {
  html body .pagination a:hover { border-color: var(--accent-hover-jauge, var(--accent-primary)) !important; }
}
/* LES BOUTONS ALLUMES SANS TRAIT DESSOUS (gruid « a-trait », 2026-10-11) : comme la page courante de la pagination. Memes selecteurs
   que la forme allumee du bloc « marbre vert » ; le bouton OK de la recherche suit. Au survol (souris), il reste le halo seul. */
html body header.header.header .duration-filters .duration-btn.active:not(.pays-btn-wrap),
html body header.header.header .duration-filters .duration-btn.vcr-jauge-wrap.open,
html body header.header.header .duration-filters a.vcr-all.active,
html body header.header.header .duration-filters .vcr-all-langue-lien.active,
html body header.header.header .duration-filters .pays-dropdown-item.active,
html body header.header.header .vcr-header-search .vhs-btn { box-shadow: none !important; }
@media (max-width: 768px) {
  html body header.header.header .duration-filters .duration-btn.pays-btn-wrap.active { box-shadow: none !important; }
}
@media (hover: hover) {
  html body header.header.header .duration-filters .duration-btn.active:not(.pays-btn-wrap):hover,
  html body header.header.header .duration-filters .duration-btn.vcr-jauge-wrap.open:hover,
  html body header.header.header .duration-filters a.vcr-all.active:hover,
  html body header.header.header .duration-filters .vcr-all-langue-lien.active:hover,
  html body header.header.header .duration-filters .pays-dropdown-item.active:hover,
  html body header.header.header .vcr-header-search .vhs-btn:hover { box-shadow: 0 0 14px rgba(134,184,90,.6) !important; }
}
/* LA JAUGE SUR TELEPHONE et LA RECHERCHE (zones 5 et 6 du design, 2026-10-11).
   Telephone : la jauge ouverte est un PANNEAU sombre sous l en-tete ; les regles du bouton allume (poignees et rail presque noirs,
   faits pour le vert clair de l ordinateur) s y appliquaient aussi : poignees sombres sur fond sombre, rail invisible.
   Ici : le panneau en vert sombre des cartes, le rail visible, les poignees en vert allume.
   Recherche : un halo vert quand on ecrit dans le champ (il n avait aucun signe de saisie). */
@media (max-width: 768px) {
  html body header.header.header .duration-filters .duration-btn.vcr-jauge-wrap .vcr-jauge {
    background: linear-gradient(180deg, #24493a 0%, #14291f 100%) !important; border: 1px solid #4f8a6c !important; border-radius: 10px !important; }
  html body header.header.header .duration-filters .duration-btn.vcr-jauge-wrap.open .vcr-jauge-track::before,
  html body header.header.header .duration-filters .duration-btn.vcr-jauge-wrap.active .vcr-jauge-track::before { background: rgba(238,243,230,.38) !important; }
  html body header.header.header .duration-filters .duration-btn.vcr-jauge-wrap.open .vcr-jauge-track input[type=range]::-webkit-slider-thumb,
  html body header.header.header .duration-filters .duration-btn.vcr-jauge-wrap.active .vcr-jauge-track input[type=range]::-webkit-slider-thumb {
    background: #8fbf68 !important; border-color: #eef3e6 !important; }
  html body header.header.header .duration-filters .duration-btn.vcr-jauge-wrap.open .vcr-jauge-track input[type=range]::-moz-range-thumb,
  html body header.header.header .duration-filters .duration-btn.vcr-jauge-wrap.active .vcr-jauge-track input[type=range]::-moz-range-thumb {
    background: #8fbf68 !important; border-color: #eef3e6 !important; }
  html body header.header.header .duration-filters .duration-btn.vcr-jauge-wrap .vcr-jauge-phrase { color: #a9cf88 !important; }
}
html body header.header.header .vcr-header-search .vhs-input:focus { border-color: #a9cf88 !important; box-shadow: 0 0 0 3px rgba(134,184,90,.35) !important; outline: none !important; }
/* le code de langue des cartes de l accueil toutes langues (« EN », « DE », 9 px) : son gris sur gris etait a 4,43 pour un seuil de
   4,5 (sonde, 2026-10-11). Il prend le vert sombre et l ivoire de la pastille de date. */
html body .card-code { background: #14291f !important; border-color: #4f8a6c !important; color: #eef4e8 !important; }
/* le filet du code de langue des cartes : #4f8a6c donnait 3,61 contre son propre texte ivoire (la sonde lit aussi le filet d une
   boite de 24 x 15 px) ; un vert plus sombre, 7,02. Le fond et le texte ne changent pas (13,71). */
html body .card-code { border-color: #2f5a45 !important; }