/**
 * Thème Rouge & Blanc - Flambeau des Démocrates
 * Applique les couleurs rouge et blanc du logo sur tout le site
 */

/* ============================================
   VARIABLES DE THÈME ROUGE
   ============================================ */
:root {
    /* Palette Rouge Flambeau */
    --flambeau-red: #dc2626;
    --flambeau-red-dark: #991b1b;
    --flambeau-red-darker: #7f1d1d;
    --flambeau-red-light: #ef4444;
    --flambeau-red-lighter: #fca5a5;
}

/* ============================================
   OVERRIDE DES CLASSES UTILITAIRES
   ============================================ */

/* Backgrounds rouges */
.bg9 {
    background-color: var(--flambeau-red) !important;
}

/* Textes rouges */
.cl10 {
    color: var(--flambeau-red) !important;
}

/* Liens et survol */
.hov-cl10:hover {
    color: var(--flambeau-red) !important;
}

/* Bordures */
.bocl12 {
    border-color: var(--flambeau-red) !important;
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */

/* Loader animé */
.loader05 {
    border-color: var(--flambeau-red) !important;
}

/* Menu de navigation */
.wrap-main-nav .main-nav > li > a:hover {
    color: var(--flambeau-red) !important;
}

.wrap-main-nav .main-nav > li.mega-menu-item:hover > a::before {
    background-color: var(--flambeau-red) !important;
}

/* Barre active sous les items du menu */
.main-menu > li.main-menu-active > a::before {
    background-color: var(--flambeau-red) !important;
}

.main-menu > li > a:hover::before {
    background-color: var(--flambeau-red) !important;
}

/* Menu mobile */
.main-menu-m > li > a {
    background-color: transparent !important;
}

.main-menu-m > li > a:hover {
    background-color: var(--flambeau-red) !important;
}

/* Barre de recherche */
.how2-cl2::before {
    background-color: var(--flambeau-red) !important;
}

.how2-cl4::before {
    background-color: var(--flambeau-red) !important;
}

/* ============================================
   BOUTONS & CTA
   ============================================ */

/* Boutons principaux */
.btn1 {
    background-color: var(--flambeau-red) !important;
}

.btn1:hover {
    background-color: var(--flambeau-red-dark) !important;
}

/* Boutons avec bordure */
.hov-btn1:hover {
    background-color: var(--flambeau-red) !important;
    border-color: var(--flambeau-red) !important;
}

/* ============================================
   BADGES & CATÉGORIES
   ============================================ */

/* Badges de catégories */
.f1-s-2 {
    transition: all 0.3s ease;
}

.bo-all-1.bocl0:hover {
    background-color: rgba(220, 38, 38, 0.9) !important;
}

/* ============================================
   ARTICLES & CARTES
   ============================================ */

/* Titres d'articles au survol */
.how-txt1:hover {
    color: var(--flambeau-red-light) !important;
}

/* Liens dans les articles */
.f1-s-7:hover {
    color: var(--flambeau-red) !important;
}

/* ============================================
   SIDEBAR & WIDGETS
   ============================================ */

/* Numéros des articles populaires */
.size-a-8.bg9 {
    background-color: var(--flambeau-red) !important;
}

/* Liens sidebar */
.f1-s-5:hover {
    color: var(--flambeau-red) !important;
}

/* ============================================
   FOOTER
   ============================================ */

/* Liens footer au survol */
footer .f1-s-5:hover {
    color: var(--flambeau-red-light) !important;
}

footer .hov-cl10:hover {
    color: var(--flambeau-red-light) !important;
}

/* ============================================
   PAGINATION
   ============================================ */

/* Pagination active */
.pagination .active a {
    background-color: var(--flambeau-red) !important;
    border-color: var(--flambeau-red) !important;
}

.pagination a:hover {
    background-color: var(--flambeau-red-light) !important;
    border-color: var(--flambeau-red-light) !important;
    color: white !important;
}

/* ============================================
   RÉSEAUX SOCIAUX
   ============================================ */

/* Boutons sociaux */
.bg-facebook:hover {
    background-color: var(--flambeau-red) !important;
}

.bg-twitter:hover {
    background-color: var(--flambeau-red) !important;
}

.bg-youtube:hover {
    background-color: var(--flambeau-red) !important;
}

/* ============================================
   FORMULAIRES
   ============================================ */

/* Bouton de recherche */
.flex-c-c.size-a-1:hover {
    color: var(--flambeau-red) !important;
}

/* Focus sur les inputs */
input:focus,
textarea:focus {
    border-color: var(--flambeau-red) !important;
    outline-color: var(--flambeau-red) !important;
}

/* Boutons de formulaire */
button[type="submit"],
input[type="submit"] {
    background-color: var(--flambeau-red) !important;
    transition: all 0.3s ease;
}

button[type="submit"]:hover,
input[type="submit"]:hover {
    background-color: var(--flambeau-red-dark) !important;
}

/* ============================================
   SECTIONS SPÉCIALES
   ============================================ */

/* Tab titles */
.tab01-title {
    position: relative;
}

.tab01-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: var(--flambeau-red);
}

/* Section headers */
.section-header {
    border-bottom-color: var(--flambeau-red) !important;
}

/* ============================================
   ANIMATIONS & TRANSITIONS
   ============================================ */

/* Effet de survol sur les images */
.wrap-pic-w::before {
    background: linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.7));
}

/* ============================================
   ÉLÉMENTS INTERACTIFS
   ============================================ */

/* Bouton retour en haut */
.btn-back-to-top {
    background-color: var(--flambeau-red) !important;
}

.btn-back-to-top:hover {
    background-color: var(--flambeau-red-dark) !important;
}

/* Scrollbar personnalisée (Chrome/Edge) */
::-webkit-scrollbar-thumb {
    background: var(--flambeau-red);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--flambeau-red-dark);
}

/* ============================================
   GRADIENT & OVERLAY
   ============================================ */

/* Gradients rouges pour overlays */
.bg-img1::before {
    background: linear-gradient(to bottom, transparent 0%, rgba(220, 38, 38, 0.1) 50%, rgba(220, 38, 38, 0.3) 100%);
}

/* ============================================
   ACCENTS & HIGHLIGHTS
   ============================================ */

/* Sélection de texte */
::selection {
    background-color: var(--flambeau-red);
    color: white;
}

::-moz-selection {
    background-color: var(--flambeau-red);
    color: white;
}

/* Focus visible */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--flambeau-red);
    outline-offset: 2px;
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */
@media (max-width: 768px) {
    /* Menu mobile */
    .mobile-menu-toggle:hover {
        color: var(--flambeau-red) !important;
    }

    /* Navigation mobile active */
    .mobile-menu a.active {
        color: var(--flambeau-red) !important;
        border-left-color: var(--flambeau-red) !important;
    }
}

/* ============================================
   MODE SOMBRE (Optionnel)
   ============================================ */
@media (prefers-color-scheme: dark) {
    :root {
        --flambeau-red: #ef4444;
        --flambeau-red-dark: #dc2626;
        --flambeau-red-light: #f87171;
    }
}