/* ============================================
   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::after { content: none; }   /* ni la frise d echiquier du projet, ni le filet degrade du socle : retires le 2026-10-10 (gruid #24195) ; un filet discret reste sur .header */
.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.
   ============================================ */
.header{ background:#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; }
}