/*
Theme Name: GuinéeVision Pro
Theme URI: https://www.guineevision.info
Author: GuinéeVision & Leonel
Author URI: https://www.guineevision.info
Description: Thème WordPress officiel de nouvelle génération pour GuinéeVision.info. Design moderne avec fond Aurora en dégradé subtil (rose, bleu, violet transparent), barre animée fluide avec reflets doux et point live glowing, architecture à Deux Panneaux distincts (Grand Panneau et Petit Panneau), 100% responsive et ultra-léger sur mobile.
Version: 2.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: guineevision-pro
*/

:root {
    --gv-red: #cc1833;
    --gv-red-hover: #b31229;
    --gv-yellow: #fccf36;
    --gv-green: #109060;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --bg-surface: #ffffff;
    --bg-alt: #f8fafc;
    --border-color: #e2e8f0;
    --shadow-sm: 0 4px 18px rgba(0, 0, 0, 0.04);
    --radius-pill: 99px;
    --radius-panel: 24px;
    --radius-card: 18px;
    --radius-inner: 12px;
}

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

/* FOND MODERNE AURORA : ROSE, BLEU, VIOLET SUBTIL TRANSPARENT */
body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    background-color: #f8fafc;
    background-image: 
        radial-gradient(at 0% 0%, rgba(244, 114, 182, 0.18) 0px, transparent 48%),
        radial-gradient(at 100% 0%, rgba(96, 165, 250, 0.20) 0px, transparent 48%),
        radial-gradient(at 50% 40%, rgba(192, 132, 252, 0.16) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(244, 114, 182, 0.16) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(129, 140, 248, 0.18) 0px, transparent 50%);
    background-attachment: fixed;
    background-size: 100% 100%;
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
    transition: all 0.2s ease;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* CONTENEUR GLOBAL CENTRÉ SUR L'ÉCRAN */
.page-frame {
    max-width: 1360px;
    margin: 0 auto;
    padding: 16px 20px 40px;
}

/* =============================================================== */
/* BARRE D'EN-TÊTE SEULE : VERRE / VITRE BLEU VIOLET TRANSPARENT */
/* =============================================================== */
.topbar-card {
    background: linear-gradient(135deg, 
        rgba(219, 234, 254, 0.72) 0%, 
        rgba(233, 213, 255, 0.68) 50%, 
        rgba(199, 210, 254, 0.74) 100%);
    backdrop-filter: blur(22px) saturate(190%);
    -webkit-backdrop-filter: blur(22px) saturate(190%);
    border: 1px solid rgba(199, 210, 254, 0.70);
    border-top: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: var(--radius-pill);
    padding: 8px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    color: #1e1b4b;
    margin-bottom: 18px;
    box-shadow: 
        0 8px 30px rgba(129, 140, 248, 0.16),
        0 2px 8px rgba(99, 102, 241, 0.08),
        inset 0 1px 2px rgba(255, 255, 255, 0.90);
    position: relative;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reflet doux de lumière animée le long de la barre */
.topbar-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.55), 
        rgba(199, 210, 254, 0.45), 
        rgba(233, 213, 255, 0.45), 
        rgba(255, 255, 255, 0.55), 
        transparent);
    animation: barShimmer 6s infinite linear;
    pointer-events: none;
}

@keyframes barShimmer {
    0% { left: -100%; }
    100% { left: 200%; }
}

.topbar-card:hover {
    background: linear-gradient(135deg, 
        rgba(219, 234, 254, 0.85) 0%, 
        rgba(233, 213, 255, 0.80) 50%, 
        rgba(199, 210, 254, 0.86) 100%);
    box-shadow: 
        0 12px 36px rgba(129, 140, 248, 0.22),
        0 4px 12px rgba(99, 102, 241, 0.14),
        inset 0 1px 2px rgba(255, 255, 255, 0.95);
    transform: translateY(-1px);
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #312e81;
}

.topbar-left strong {
    color: #1e1b4b;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* POINT DIRECT ANIMÉ AVEC HALO GLOWING */
.live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--gv-red);
    border-radius: 50%;
    margin-right: 6px;
    position: relative;
    box-shadow: 0 0 0 0 rgba(204, 24, 51, 0.7);
    animation: pulseGlow 2s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes pulseGlow {
    0% { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(204, 24, 51, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(204, 24, 51, 0); }
    100% { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(204, 24, 51, 0); }
}

/* PILULES SOCIALES AVEC EFFET VERRE DÉPOLI ET MICRO-INTERACTIONS */
.social-pill {
    padding: 4px 11px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.70);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.85);
    font-size: 0.76rem;
    font-weight: 700;
    color: #312e81;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    transition: all 0.25s ease;
}
.social-pill svg {
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}
.social-pill:hover {
    background: rgba(255, 255, 255, 0.95);
    color: #0f172a;
    box-shadow: 0 4px 14px rgba(129, 140, 248, 0.22);
    transform: translateY(-1px);
}
.social-pill.wa-pill {
    background: rgba(220, 252, 231, 0.92);
    border: 1px solid rgba(187, 247, 208, 0.95);
    color: #15803d;
    font-weight: 800;
}
.social-pill.wa-pill:hover {
    background: #22c55e;
    color: #ffffff;
    border-color: #22c55e;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.40);
}
.social-pill.fb-pill:hover {
    background: #1877f2;
    color: #ffffff;
    border-color: #1877f2;
    box-shadow: 0 4px 14px rgba(24, 119, 242, 0.35);
}
.social-pill.tw-pill:hover {
    background: #000000;
    color: #ffffff;
    border-color: #000000;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.social-pill.ig-pill:hover {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(220, 39, 67, 0.35);
}
.social-pill.yt-live {
    background: rgba(254, 226, 226, 0.90);
    border: 1px solid rgba(254, 202, 202, 0.90);
    color: var(--gv-red);
    font-weight: 800;
}
.social-pill.yt-live:hover {
    background: var(--gv-red);
    color: #ffffff;
    border-color: var(--gv-red);
    box-shadow: 0 4px 14px rgba(204, 24, 51, 0.35);
}

/* ======================================================== */
/* DEUXIÈME BARRE D'EN-TÊTE : COMPACTE, ÉLÉGANTE, SANS VIDE */
/* THÈME CRISTAL NACRÉ & VERRE PUR HAUTE DÉFINITION         */
/* ======================================================== */
.header-card {
    position: relative;
    z-index: 1000;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 252, 0.85) 100%);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: var(--radius-card);
    padding: 8px 20px 6px;
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 
        0 6px 22px rgba(15, 23, 42, 0.04), 
        0 1px 2px rgba(0, 0, 0, 0.02),
        inset 0 1px 1px rgba(255, 255, 255, 0.95);
    margin-bottom: 18px;
    transition: all 0.3s ease;
}

/* LIGNE 1 : LOGO + FLASH INFO ÉTIRÉ (CENTRE) + RECHERCHE COMPACTE */
.header-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 6px;
    min-height: 38px;
}
.header-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.logo-img {
    height: 36px;
    width: auto;
    display: block;
}

/* BREAKING NEWS QUI PREND L'ESPACE CENTRAL (SUPPRIME LE VIDE GÉANT) */
.breaking-box {
    display: flex;
    align-items: center;
    background: rgba(241, 245, 249, 0.8);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: var(--radius-pill);
    padding: 3px 12px 3px 4px;
    flex: 1;
    max-width: 680px;
    margin: 0 10px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
    transition: all 0.25s ease;
}
.breaking-box:hover {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.breaking-badge {
    background: linear-gradient(135deg, var(--gv-red) 0%, #e11d48 100%);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    margin-right: 10px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(204, 24, 51, 0.28);
}
.breaking-headline {
    font-size: 0.80rem;
    color: var(--text-primary);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.breaking-headline a:hover {
    color: var(--gv-red);
}

/* RECHERCHE COMPACTE ÉLÉGANTE À DROITE */
.header-search-wrap {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.search-pill-form {
    display: flex;
    align-items: center;
    background: rgba(241, 245, 249, 0.75);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: var(--radius-pill);
    padding: 2px 3px 2px 10px;
    transition: all 0.25s ease;
}
.search-pill-form:focus-within {
    background: #ffffff;
    border-color: #94a3b8;
    box-shadow: 0 2px 8px rgba(96, 165, 250, 0.15);
}
.search-pill-input {
    border: none;
    background: transparent;
    font-size: 0.78rem;
    color: var(--text-primary);
    outline: none;
    width: 120px;
}
.search-pill-btn {
    background: var(--gv-red);
    border: none;
    color: #ffffff;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    transition: transform 0.2s;
}
.search-pill-btn:hover {
    transform: scale(1.06);
    background: var(--gv-red-hover);
}

/* LIGNE 2 : RUBRIQUES PARFAITEMENT ALIGNÉES + ACTION DIRECT */
.navbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(226, 232, 240, 0.7);
    padding-top: 6px;
    gap: 12px;
}
.navbar-links {
    display: flex;
    align-items: center;
    gap: 15px;
    list-style: none;
    overflow: visible;
}
.navbar-links a {
    font-size: 0.77rem;
    font-weight: 800;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.35px;
    padding: 5px 0 6px;
    white-space: nowrap;
    transition: all 0.2s ease;
    position: relative;
}
.navbar-links a:hover {
    color: var(--gv-red);
}
.navbar-links a.active, .navbar-links li.current-menu-item a {
    color: var(--gv-red);
}
.navbar-links a.active::after, .navbar-links li.current-menu-item a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2.5px;
    background: var(--gv-red);
    border-radius: 99px;
}

/* DROPDOWN DES MENUS AVEC SOUS-RUBRIQUES */
.has-dropdown, .menu-item-has-children {
    position: relative;
    display: inline-flex;
    align-items: center;
    z-index: 1002;
}
.has-dropdown .arrow-down, .menu-item-has-children > a::after {
    font-size: 0.58rem;
    margin-left: 4px;
    transition: transform 0.25s ease;
    display: inline-block;
    color: var(--text-muted);
}
.has-dropdown:hover .arrow-down, .has-dropdown.dropdown-open .arrow-down, .menu-item-has-children:hover > a::after {
    transform: rotate(180deg);
    color: var(--gv-red);
}
.dropdown-menu, .navbar-links .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 270px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: var(--radius-inner);
    padding: 8px 6px;
    list-style: none;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22), 0 4px 14px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 99999;
}
.dropdown-menu::before, .navbar-links .sub-menu::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
}
.has-dropdown:hover .dropdown-menu, .has-dropdown.dropdown-open .dropdown-menu, .menu-item-has-children:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(2px);
}
.dropdown-menu li, .navbar-links .sub-menu li {
    margin: 3px 0;
}
.dropdown-menu li a, .navbar-links .sub-menu li a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px !important;
    border-radius: 6px;
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    transition: all 0.2s ease !important;
}
.dropdown-menu li a::after, .navbar-links .sub-menu li a::after {
    display: none !important;
}
.dropdown-menu li a:hover, .navbar-links .sub-menu li a:hover {
    background: #fff1f2 !important;
    color: var(--gv-red) !important;
    transform: translateX(3px);
}
.cat-count {
    background: #f1f5f9;
    color: var(--text-secondary);
    font-size: 0.70rem;
    padding: 2px 7px;
    border-radius: 99px;
    font-weight: 800;
}
.dropdown-menu li a:hover .cat-count, .navbar-links .sub-menu li a:hover .cat-count {
    background: var(--gv-red);
    color: #ffffff;
}

/* BOUTON RTG DIRECT DANS LA LIGNE 2 */
.nav-rtg-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(254, 226, 226, 0.85);
    color: var(--gv-red);
    font-size: 0.74rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(254, 202, 202, 0.9);
    white-space: nowrap;
    transition: all 0.25s ease;
    flex-shrink: 0;
}
.nav-rtg-pill:hover {
    background: var(--gv-red);
    color: #ffffff;
    box-shadow: 0 3px 12px rgba(204, 24, 51, 0.3);
}

/* BURGER BOUTON MOBILE */
.burger-btn {
    display: none;
    background: rgba(248, 250, 252, 0.9);
    border: 1px solid #e2e8f0;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.burger-btn span {
    width: 20px;
    height: 2px;
    background: #0f172a;
    border-radius: 2px;
}

/* BADGES CATÉGORIES */
.badge-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* ======================================================== */
/* STRUCTURE DES DEUX PANNEAUX (GLASSMORPHISM & AIR)        */
/* ======================================================== */
.two-panels-grid {
    display: grid;
    grid-template-columns: 1.8fr 1.2fr;
    gap: 26px; /* ESPACE LÉGER AU MILIEU */
    align-items: start;
    margin-bottom: 36px;
    position: relative;
    z-index: 1;
}

/* 1. GRAND PANNEAU DE GAUCHE */
.panel-grand {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.84);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-panel);
    padding: 26px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 40px rgba(147, 51, 234, 0.06), 0 1px 3px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    gap: 28px;
    transition: box-shadow 0.3s;
}

/* 2. PETIT PANNEAU DE DROITE */
.panel-petit {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.84);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-panel);
    padding: 26px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 40px rgba(147, 51, 234, 0.06), 0 1px 3px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    gap: 28px;
    transition: box-shadow 0.3s;
}

/* ========================================================================= */
/* CARROUSEL / SLIDER AUTO DU GRAND PANNEAU (HAUTEUR RÉDUITE RECTANGULAIRE)  */
/* ========================================================================= */
.grand-hero-subgrid {
    display: grid;
    grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); /* CARROUSEL LARGE, PETIT LECTEUR */
    gap: 20px;
    align-items: stretch;
}

.hero-slider-wrap {
    position: relative;
    height: 300px; /* HAUTEUR EXACTE PARFAITEMENT ALIGNÉE AU LECTEUR */
    border-radius: var(--radius-card);
    overflow: hidden;
    background: #0f172a;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.hero-slider-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    transform: scale(1.02);
    z-index: 1;
}

.hero-slide.active {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
    z-index: 2;
}

.hero-slide-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 6s ease-out;
}

.hero-slide.active .hero-slide-img {
    transform: scale(1.04);
}

.hero-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.12) 15%, rgba(15, 23, 42, 0.88) 85%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px 20px 14px;
    color: #ffffff;
    z-index: 2;
}

.hero-slide-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.hero-slide-date {
    font-size: 0.72rem;
    color: #cbd5e1;
    font-weight: 600;
}

.hero-slide-title {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.26;
    margin: 4px 0 6px;
    color: #ffffff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-slide-title a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.2s;
}

.hero-slide-title a:hover {
    color: var(--gv-yellow);
}

.hero-slide-excerpt {
    font-size: 0.80rem;
    color: #e2e8f0;
    line-height: 1.42;
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.hero-slide-cta {
    color: #ffffff;
    font-weight: 800;
    font-size: 0.78rem;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s, transform 0.2s;
}

.hero-slide-cta:hover {
    color: var(--gv-yellow);
    transform: translateX(3px);
}

/* Boutons de contrôle du carrousel */
.hero-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.25s ease;
    opacity: 0;
    outline: none;
}

.hero-slider-wrap:hover .hero-slider-btn {
    opacity: 1;
}

.hero-slider-btn:hover {
    background: var(--gv-red);
    border-color: #fda4af;
    transform: translateY(-50%) scale(1.1);
}

.hero-slider-btn.prev { left: 12px; }
.hero-slider-btn.next { right: 12px; }

.hero-slider-dots {
    position: absolute;
    bottom: 12px;
    right: 18px;
    display: flex;
    gap: 6px;
    z-index: 10;
}

.hero-dot {
    width: 20px;
    height: 4px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hero-dot.active {
    width: 30px;
    background: var(--gv-red);
    box-shadow: 0 0 8px rgba(244, 63, 94, 0.8);
}

/* LECTEUR RTG LIVE DANS LE GADGET SOMBRE (HAUTEUR IDENTIQUE PARFAITEMENT ALIGNÉE 300PX) */
.rtg-gadget-box {
    background: #000;
    border-radius: var(--radius-card);
    padding: 0;
    color: #ffffff;
    height: 300px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.rtg-gadget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 8px;
    flex-wrap: wrap;
}

.rtg-gadget-title {
    font-size: 0.88rem;
    font-weight: 800;
    color: #f8fafc;
    display: flex;
    align-items: center;
    gap: 6px;
}

.rtg-live-badge {
    background: var(--gv-red);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.5px;
    animation: pulseLive 2s infinite ease-in-out;
}

@keyframes pulseLive {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.02); }
}

.rtg-channel-switcher {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(15, 23, 42, 0.75);
    padding: 3px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.rtg-tab-btn {
    background: transparent;
    color: #94a3b8;
    border: none;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.rtg-tab-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.rtg-tab-btn.active {
    background: var(--gv-red);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(204, 24, 51, 0.45);
}

.rtg-video-frame {
    position: relative;
    flex: 1;
    min-height: 0;
    background: #000;
    overflow: hidden;
}

.rtg-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.rtg-controls {
    background: #0f172a;
    border-radius: 6px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.72rem;
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, 0.06);
    gap: 8px;
}

/* LIGNE DES 3 CARTES BLANCHES DANS LE GRAND PANNEAU */
.grand-three-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.mini-white-card {
    background: #ffffff;
    border-radius: var(--radius-card);
    padding: 14px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 4px 18px rgba(0,0,0,0.035);
    display: flex;
    flex-direction: column;
    transition: all 0.25s ease;
}

.mini-white-card:hover {
    box-shadow: 0 8px 25px rgba(168, 85, 247, 0.08);
    transform: translateY(-2px);
    border-color: #cbd5e1;
}

.mini-white-thumb {
    height: 140px;
    border-radius: var(--radius-inner);
    overflow: hidden;
    background: #e2e8f0;
    margin-bottom: 10px;
}

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

.mini-white-title {
    font-size: 0.94rem;
    font-weight: 800;
    line-height: 1.35;
    margin: 8px 0 6px;
}

.mini-white-title a:hover {
    color: var(--gv-red);
}

.mini-white-excerpt {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.45;
    margin-bottom: 8px;
    flex-grow: 1;
}

/* ========================================================================= */
/* STYLES MOBILES DÉDIÉS : BARRE CATÉGORIES ET LOT D'ARTICLES HORIZONTAUX    */
/* (CONFORME À LA MAQUETTE VALIDÉE PAR LE CLIENT)                            */
/* ========================================================================= */
.mobile-cat-section {
    display: none;
}
.mobile-articles-batch {
    display: none;
}
.mobile-cat-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.mobile-cat-scroll::-webkit-scrollbar {
    display: none;
}
.mobile-cat-pill {
    display: inline-block;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: #e2e8f0;
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    transition: all 0.2s;
}
.mobile-cat-pill.active {
    background: #0f172a;
    color: #ffffff;
}
.mobile-article-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(226, 232, 240, 0.85);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.mobile-article-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.mobile-card-thumb {
    width: 84px;
    height: 68px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f1f5f9;
}
.mobile-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mobile-card-content {
    flex-grow: 1;
    min-width: 0;
}
.mobile-card-title {
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1.34;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mobile-card-title a {
    color: var(--text-primary);
    text-decoration: none;
}
.mobile-card-title a:hover {
    color: var(--gv-red);
}
.mobile-card-sub {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* FIL D'ACTUALITÉS CHRONOLOGIQUES */
.feed-item-card {
    display: flex;
    gap: 16px;
    padding: 14px;
    border-radius: var(--radius-inner);
    border: 1px solid rgba(226, 232, 240, 0.8);
    background: #ffffff;
    margin-bottom: 14px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.035);
    transition: all 0.2s;
}

.feed-item-card:hover {
    box-shadow: 0 8px 25px rgba(96, 165, 250, 0.08);
    border-color: #cbd5e1;
}

.feed-item-thumb {
    width: 160px;
    height: 110px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #e2e8f0;
}

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

.feed-item-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.feed-item-title {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
    margin: 4px 0;
}

.feed-item-title a:hover {
    color: var(--gv-red);
}

.feed-item-meta {
    font-size: 0.76rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.feed-item-excerpt {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.45;
    margin-bottom: 8px;
}

.feed-item-cta {
    display: inline-block;
    align-self: flex-start;
    background: #1e293b;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 4px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.2s;
}

.feed-item-cta:hover {
    background: var(--gv-red);
    color: #ffffff;
}

/* ÉLÉMENTS DU PETIT PANNEAU DE DROITE */
.side-lead-card {
    border-radius: var(--radius-card);
    /* Fond bleu - violet - rose néon, transparent et mat (sans brillance) */
    background: linear-gradient(135deg,
        rgba(59, 130, 246, 0.22) 0%,
        rgba(139, 92, 246, 0.24) 50%,
        rgba(236, 72, 153, 0.22) 100%);
    border: 1px solid rgba(139, 92, 246, 0.30);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.side-lead-title {
    font-size: 1.22rem;
    font-weight: 800;
    line-height: 1.32;
    margin: 10px 0 8px;
}

.side-lead-title a:hover {
    color: var(--gv-red);
}

.side-lead-excerpt {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 12px;
}

.side-lead-link {
    color: var(--gv-red);
    font-weight: 800;
    font-size: 0.82rem;
    text-transform: uppercase;
}

.side-two-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.side-tv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.side-tv-card {
    background: #ffffff;
    border-radius: var(--radius-inner);
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 4px 18px rgba(0,0,0,0.035);
}

.side-tv-thumb {
    position: relative;
    padding-bottom: 56.25%;
    background: #000;
}

.side-tv-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.side-tv-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    background: var(--gv-red);
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.side-tv-body {
    padding: 8px 10px;
}

.side-tv-title {
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 4px;
}

.side-tv-views {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.pop-list {
    list-style: none;
}

.pop-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f8fafc;
    font-size: 0.86rem;
    font-weight: 700;
}

.pop-item:hover a {
    color: var(--gv-red);
}

.pop-badge {
    background: #f1f5f9;
    color: var(--text-secondary);
    font-size: 0.74rem;
    padding: 2px 8px;
    border-radius: 99px;
    font-weight: 800;
}

/* ========================================================================= */
/* WIDGET POPULAR CATEGORY : ROSE FONCÉ - BLEU - VIOLET FLOU ANIMÉ           */
/* (APPLIQUÉ UNIQUEMENT À CE CADRE DU PANNEAU DE DROITE, SANS CHANGER LE RESTE)*/
/* ========================================================================= */
@keyframes auroraWidgetShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
@keyframes auroraWidgetGlow {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 0.75;
    }
    50% {
        transform: rotate(180deg) scale(1.15);
        opacity: 0.95;
    }
    100% {
        transform: rotate(360deg) scale(1);
        opacity: 0.75;
    }
}
.pop-category-widget {
    position: relative;
    border-radius: var(--radius-inner);
    padding: 22px 20px 20px;
    overflow: hidden;
    /* Fond dégradé animé : Rose foncé (#831843, #9f1239) - Bleu nuit (#1e3a8a, #1d4ed8) - Violet (#4c1d95, #581c87) */
    background: linear-gradient(135deg, 
        #3b0764 0%, 
        #831843 30%, 
        #1e3a8a 65%, 
        #581c87 100%);
    background-size: 300% 300%;
    animation: auroraWidgetShift 12s ease-in-out infinite alternate;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 
        0 16px 36px rgba(59, 7, 100, 0.28),
        0 4px 16px rgba(159, 18, 57, 0.22),
        inset 0 1px 1px rgba(255, 255, 255, 0.40);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    color: #ffffff;
    transition: all 0.3s ease;
}
.pop-category-widget:hover {
    box-shadow: 
        0 20px 44px rgba(59, 7, 100, 0.36),
        0 6px 20px rgba(159, 18, 57, 0.30),
        inset 0 1px 1px rgba(255, 255, 255, 0.55);
    transform: translateY(-2px);
}
/* Lueur floue animée en superposition */
.pop-category-widget::before {
    content: '';
    position: absolute;
    top: -60%;
    left: -60%;
    width: 220%;
    height: 220%;
    background: 
        radial-gradient(circle at 35% 35%, rgba(244, 63, 94, 0.40) 0%, transparent 45%),
        radial-gradient(circle at 65% 65%, rgba(59, 130, 246, 0.42) 0%, transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(192, 132, 252, 0.35) 0%, transparent 50%);
    filter: blur(28px);
    pointer-events: none;
    animation: auroraWidgetGlow 14s linear infinite;
    z-index: 1;
}
.pop-widget-inner {
    position: relative;
    z-index: 2;
}
.pop-widget-header {
    font-size: 0.90rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.pop-widget-stripe {
    display: inline-block;
    width: 4px;
    height: 16px;
    background: linear-gradient(180deg, #f43f5e 0%, #fbbf24 100%);
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(244, 63, 94, 0.9);
}
.pop-category-widget .pop-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.pop-category-widget .pop-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.86rem;
    font-weight: 700;
    transition: all 0.22s ease;
    border-radius: 6px;
}
.pop-category-widget .pop-item:last-child {
    border-bottom: none;
}
.pop-category-widget .pop-item a {
    color: rgba(255, 255, 255, 0.95);
    text-decoration: none;
    transition: all 0.2s ease;
}
.pop-category-widget .pop-item:hover {
    background: rgba(255, 255, 255, 0.14);
    padding-left: 10px;
}
.pop-category-widget .pop-item:hover a {
    color: #fecdd3;
    text-shadow: 0 0 8px rgba(254, 205, 211, 0.6);
}
.pop-category-widget .pop-badge {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    font-size: 0.72rem;
    padding: 2px 9px;
    border-radius: 99px;
    font-weight: 800;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}
.pop-category-widget .pop-item:hover .pop-badge {
    background: #f43f5e;
    border-color: #fda4af;
    box-shadow: 0 2px 10px rgba(244, 63, 94, 0.6);
    transform: scale(1.05);
}

/* ========================================================================= */
/* PIED DE PAGE : ROSE BLEU VIOLET TRANSPARENT ET FLOU (VERRE POLI MODERNE)  */
/* (SANS AFFECTER LE BANDEAU ROUGE EN BAS NI LE FOND DU SITE)                */
/* ========================================================================= */
@keyframes footerAuroraFlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
@keyframes footerGlowSpin {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 0.35;
    }
    50% {
        transform: rotate(180deg) scale(1.15);
        opacity: 0.55;
    }
    100% {
        transform: rotate(360deg) scale(1);
        opacity: 0.35;
    }
}
.footer-card {
    position: relative;
    background: linear-gradient(135deg, 
        rgba(8, 12, 22, 0.68) 0%, 
        rgba(15, 23, 42, 0.62) 25%, 
        rgba(24, 20, 38, 0.58) 50%, 
        rgba(35, 18, 32, 0.55) 75%, 
        rgba(10, 15, 26, 0.65) 100%);
    background-size: 300% 300%;
    animation: footerAuroraFlow 16s ease-in-out infinite alternate;
    color: #e2e8f0;
    border-radius: var(--radius-panel);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.20);
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.28), 
        0 4px 20px rgba(15, 23, 42, 0.25), 
        inset 0 1px 1px rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    transition: all 0.3s ease;
}
.footer-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(circle at 30% 30%, rgba(59, 130, 246, 0.20) 0%, transparent 45%),
        radial-gradient(circle at 75% 70%, rgba(244, 63, 94, 0.18) 0%, transparent 45%),
        radial-gradient(circle at 50% 40%, rgba(168, 85, 247, 0.18) 0%, transparent 50%),
        radial-gradient(circle at 85% 20%, rgba(15, 23, 42, 0.35) 0%, transparent 45%);
    filter: blur(35px);
    pointer-events: none;
    animation: footerGlowSpin 18s linear infinite;
    z-index: 1;
}
.footer-inner {
    position: relative;
    z-index: 2;
    padding: 38px 32px 26px;
    display: grid;
    grid-template-columns: 1.5fr 1.3fr 1fr;
    gap: 32px;
}
.footer-card .footer-badge-title {
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 9px;
    font-size: 0.85rem;
    color: #f1f5f9;
}
.footer-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.24);
    font-size: 0.82rem;
    flex-shrink: 0;
    color: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.footer-social-btn {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.24);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.footer-social-btn:hover {
    transform: translateY(-2px);
}
.footer-social-btn.wa-btn:hover {
    background: #22c55e;
    border-color: #86efac;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.50);
}
.footer-social-btn.fb-btn:hover {
    background: #1877f2;
    border-color: #93c5fd;
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.50);
}
.footer-social-btn.tw-btn:hover {
    background: #000000;
    border-color: #64748b;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.50);
}
.footer-social-btn.ig-btn:hover {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    border-color: #f472b6;
    box-shadow: 0 4px 12px rgba(220, 39, 67, 0.50);
}
.footer-social-btn.yt-btn:hover {
    background: var(--gv-red);
    border-color: #fda4af;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.50);
}
.footer-card .pop-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.85rem;
    font-weight: 600;
}
.footer-card .pop-item:last-child {
    border-bottom: none;
}
.footer-card .pop-item a {
    color: #f1f5f9;
    text-decoration: none;
    transition: all 0.2s ease;
}
.footer-card .pop-item:hover a {
    color: #93c5fd;
    padding-left: 4px;
    text-shadow: 0 0 8px rgba(147, 197, 253, 0.6);
}
.footer-card .pop-badge {
    background: rgba(59, 130, 246, 0.35);
    color: #ffffff;
    border: 1px solid rgba(147, 197, 253, 0.45);
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 99px;
    font-weight: 800;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.footer-card .pop-item:hover .pop-badge {
    background: #f43f5e;
    color: #ffffff;
    border-color: #fda4af;
    box-shadow: 0 2px 10px rgba(244, 63, 94, 0.6);
}
.footer-red-strip {
    position: relative;
    z-index: 2;
    background: var(--gv-red);
    color: #ffffff;
    padding: 13px 32px;
    font-size: 0.82rem;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
}
.footer-red-strip a {
    color: #ffffff;
    text-decoration: none;
    opacity: 0.92;
    transition: opacity 0.2s;
}
.footer-red-strip a:hover {
    opacity: 1;
    text-decoration: underline;
}

/* ======================================================== */
/* RESPONSIVE DESIGN FLUIDE (SANS DÉBORDEMENT SUR MOBILE)  */
/* MAQUETTE MOBILE EXACTE : CARROUSEL HAUT, LOT D'ARTICLES, */
/* ET LECTEUR POSITIONNÉ AU MILIEU                         */
/* ======================================================== */
@media (max-width: 1024px) {
    html, body { max-width: 100%; overflow-x: hidden; }
    .two-panels-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
    .panel-grand, .panel-petit { min-width: 0; max-width: 100%; }
    .panel-grand > *, .panel-petit > * { min-width: 0; max-width: 100%; }
    .mobile-cat-section { overflow: hidden; }
    .panel-grand {
        display: flex;
        flex-direction: column;
        padding: 16px 14px;
        gap: 16px;
    }
    /* Déclenche display: contents pour ordonner librement le carrousel, les articles et le lecteur */
    .grand-hero-subgrid {
        display: contents;
    }
    .hero-slider-wrap {
        order: 1;
        height: 240px;
        margin-bottom: 4px;
    }
    .mobile-cat-section {
        display: block !important;
        order: 2;
        margin-bottom: 6px;
    }
    .mobile-articles-batch {
        display: flex !important;
        flex-direction: column;
        gap: 10px;
        order: 3;
        margin-bottom: 14px;
    }
    .rtg-gadget-box {
        order: 4;
        height: 270px;
        margin-bottom: 18px;
    }
    .grand-three-section {
        order: 5;
    }
    .grand-feed-section {
        order: 6;
    }
    .panel-petit {
        order: 7;
        padding: 16px 14px;
    }
    .footer-inner {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .page-frame {
        padding: 10px 10px 24px;
    }
    
    /* BARRE SUPÉRIEURE ULTRA-COMPACTE RESPONSIVE SUR MOBILE */
    .topbar-card {
        padding: 6px 14px;
        font-size: 0.74rem;
        margin-bottom: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .topbar-left {
        font-size: 0.72rem;
        gap: 6px;
        overflow: hidden;
    }
    .topbar-right {
        gap: 6px;
    }
    .social-pill {
        padding: 3px 8px;
        font-size: 0.7rem;
    }
    .topbar-hide-mobile {
        display: none !important;
    }

    .navbar-row {
        display: none;
    }
    .header-top-row {
        flex-wrap: wrap;
    }
    .breaking-box {
        display: flex;
        width: 100%;
        margin-top: 8px;
        padding: 4px 10px;
        background: #fee2e2;
        border: 1px solid #fecaca;
        border-radius: 8px;
    }
    .breaking-badge {
        background: var(--gv-red);
        color: #ffffff;
        font-size: 0.66rem;
        padding: 2px 7px;
        border-radius: 4px;
        font-weight: 800;
        margin-right: 8px;
    }
    .breaking-headline {
        font-size: 0.74rem;
        font-weight: 700;
    }
    .search-pill-input {
        display: none;
    }
    .search-pill-form {
        background: transparent;
        border: none;
        padding: 0;
    }
    .search-pill-btn {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
    .burger-btn {
        display: flex;
        width: 32px;
        height: 32px;
    }
    .header-card {
        padding: 8px 12px 10px;
        border-radius: 14px;
        margin-bottom: 12px;
    }
    .logo-img {
        height: 30px;
    }
    .grand-three-cards {
        grid-template-columns: 1fr;
    }
    .side-two-cards-grid {
        grid-template-columns: 1fr;
    }
    .side-tv-grid {
        grid-template-columns: 1fr;
    }
    /* SECTION « DERNIÈRES ACTUALITÉS & ENQUÊTES » : cartes empilées, grandes et lisibles sur mobile */
    .grand-feed-section .feed-section-head {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 6px;
        font-size: 1.05rem !important;
    }
    .grand-feed-section .feed-section-head > span { font-size: 0.84rem !important; }
    .grand-feed-section .feed-item-card {
        flex-direction: column;
        padding: 14px;
        gap: 12px;
        margin-bottom: 18px;
    }
    .grand-feed-section .feed-item-thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        border-radius: 12px;
    }
    .grand-feed-section .feed-item-body { gap: 2px; }
    .grand-feed-section .feed-item-body .badge-pill { font-size: 0.78rem; padding: 4px 11px; }
    .grand-feed-section .feed-item-title {
        font-size: 1.25rem;
        line-height: 1.32;
        margin: 8px 0 6px;
    }
    .grand-feed-section .feed-item-meta {
        font-size: 0.86rem;
        display: flex;
        flex-wrap: wrap;
        gap: 4px 8px;
        margin-bottom: 8px;
    }
    .grand-feed-section .feed-item-excerpt {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: 12px;
    }
    .grand-feed-section .feed-item-body > a:last-child,
    .grand-feed-section .feed-item-cta {
        align-self: stretch !important;
        text-align: center;
        font-size: 0.9rem !important;
        padding: 12px 14px !important;
        border-radius: 8px !important;
    }
    .hero-slider-wrap {
        height: 230px;
    }
    .rtg-gadget-box {
        height: 260px;
    }
    .hero-slider-btn {
        opacity: 0.9;
        width: 28px;
        height: 28px;
        font-size: 0.95rem;
        top: 12px;
        transform: none;
    }
    .hero-slider-btn.prev { left: auto; right: 46px; }
    .hero-slider-btn.next { right: 12px; }
    .hero-slide-overlay { padding: 14px 14px 22px; }
    .hero-slide-title { font-size: 1.05rem; }
    .hero-slide-excerpt { font-size: 0.76rem; -webkit-line-clamp: 2; }
    .footer-inner {
        padding: 24px 18px 20px;
    }
    .footer-red-strip {
        padding: 12px 18px;
        text-align: center;
        justify-content: center;
    }
}


/* ======================================================== */
/* PAGES ARTICLES & ARCHIVES (SINGLE & CATEGORY)            */
/* ======================================================== */
.container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.gv-single-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 28px;
    margin-bottom: 40px;
    align-items: start;
    width: 100%;
    max-width: 100%;
}

.gv-single-layout > * {
    min-width: 0;
    max-width: 100%;
}

.gv-article-body {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(18px);
    border-radius: var(--radius-panel);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 40px rgba(147, 51, 234, 0.06);
    padding: 32px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.gv-article-body h1 {
    overflow-wrap: break-word;
    word-break: break-word;
}

.entry-content {
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.entry-content p {
    margin-bottom: 1.15em;
}

.entry-content img,
.entry-content figure,
.entry-content .wp-caption,
.entry-content iframe,
.entry-content video,
.entry-content embed,
.entry-content object,
.entry-content table {
    max-width: 100% !important;
    height: auto !important;
}

.entry-content iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
}

/* FORMULAIRE DE COMMENTAIRES WORDPRESS 100% RESPONSIVE */
#respond.comment-respond {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e2e8f0;
    max-width: 100%;
}

#respond .comment-reply-title {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.comment-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 100%;
}

.comment-form p {
    margin: 0;
    max-width: 100%;
}

.comment-form label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text-secondary);
}

.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.comment-form .comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.comment-form .comment-form-cookies-consent input[type="checkbox"] {
    margin-top: 4px;
    flex-shrink: 0;
}

.comment-form .comment-form-cookies-consent label {
    margin-bottom: 0;
    font-weight: 500;
    font-size: 0.82rem;
}

.comment-form .submit {
    background: var(--gv-red);
    color: #ffffff;
    border: none;
    padding: 12px 22px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s ease;
    width: auto;
    max-width: 100%;
}

.comment-form .submit:hover {
    background: var(--gv-red-hover);
}

.gv-share-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0 28px;
    padding: 12px 0;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
}

.gv-news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-bottom: 36px;
}

.gv-news-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    border-radius: var(--radius-card);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    transition: all 0.25s ease;
    min-width: 0;
}

.gv-news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(168, 85, 247, 0.10);
}

.gv-card-thumb-wrap {
    height: 180px;
    overflow: hidden;
    background: #e2e8f0;
}

.gv-card-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.gv-news-card:hover .gv-card-thumb {
    transform: scale(1.04);
}

.gv-card-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.gv-card-title {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.35;
    margin: 8px 0 6px;
}

.gv-card-title a:hover {
    color: var(--gv-red);
}

.gv-card-excerpt {
    font-size: 0.84rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 12px;
    flex-grow: 1;
}

.gv-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 0.76rem;
    color: var(--text-muted);
}

.gv-section-title {
    margin-bottom: 24px;
}

.gv-section-title h1 {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-primary);
    position: relative;
    padding-bottom: 8px;
}

.gv-section-title h1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 48px;
    height: 4px;
    background: var(--gv-red);
    border-radius: 2px;
}

@media (max-width: 900px) {
    .gv-single-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
    .gv-news-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .gv-article-body {
        padding: 18px 14px;
        border-radius: 16px;
    }
    .gv-article-body h1 {
        font-size: 1.45rem !important;
        line-height: 1.3 !important;
    }
    .entry-content {
        font-size: 0.98rem !important;
        line-height: 1.7 !important;
    }
}

@media (max-width: 600px) {
    .gv-news-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .gv-article-body {
        padding: 16px 12px;
    }
    .comment-form .submit {
        width: 100%;
        text-align: center;
    }
}

/* ======================================================== */
/* BOUTON FLOTTANT RETOUR RAPIDE EN HAUT (SCROLL TO TOP)     */
/* ======================================================== */
#scrollToTopBtn {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gv-red) 0%, #e11d48 100%);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 
        0 6px 20px rgba(204, 24, 51, 0.45), 
        0 2px 6px rgba(0, 0, 0, 0.20),
        inset 0 1px 1px rgba(255, 255, 255, 0.40);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(0.9);
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                visibility 0.3s, 
                background 0.25s,
                box-shadow 0.25s;
}
#scrollToTopBtn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
#scrollToTopBtn:hover {
    background: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
    box-shadow: 
        0 10px 28px rgba(204, 24, 51, 0.65), 
        0 3px 8px rgba(0, 0, 0, 0.25),
        inset 0 1px 2px rgba(255, 255, 255, 0.50);
    transform: translateY(-4px) scale(1.06);
}
#scrollToTopBtn:active {
    transform: translateY(-1px) scale(0.96);
}
@media (max-width: 768px) {
    #scrollToTopBtn {
        bottom: 20px;
        right: 20px;
        width: 42px;
        height: 42px;
    }
}