/*
Theme Name: Le Bulletin Économique
Theme URI: https://bulletineconomique.com
Description: Thème enfant premium pour Le Bulletin Économique - Média d'information économique en Afrique de l'Ouest
Author: Bulletin Économique
Author URI: https://bulletineconomique.com/
Template: generatepress
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bulletin-economique
*/

/* ============================================
   VARIABLES CSS - IDENTITÉ VISUELLE
   ============================================ */
:root {
    /* Couleurs principales */
    --be-primary: #0A2463;        /* Bleu nuit institutionnel */
    --be-primary-light: #3E92CC;  /* Bleu dynamique */
    --be-accent-gold: #D4AF37;    /* Or premium */
    --be-accent-green: #00A878;   /* Vert croissance */
    
    /* Couleurs fonctionnelles */
    --be-success: #10B981;        /* Hausse / Positif */
    --be-danger: #EF4444;         /* Baisse / Négatif */
    --be-warning: #F59E0B;        /* Alerte */
    --be-info: #3B82F6;           /* Information */
    
    /* Neutres (Light Mode) */
    --be-bg-primary: #FFFFFF;
    --be-bg-secondary: #F8FAFC;
    --be-bg-tertiary: #E2E8F0;
    --be-text-primary: #1E293B;
    --be-text-secondary: #64748B;
    --be-border: #CBD5E1;
    
    /* Typographie */
    --be-font-display: 'Sora', sans-serif;
    --be-font-body: 'Inter', sans-serif;
    --be-font-mono: 'JetBrains Mono', monospace;
    
    /* Espacements (système 8px) */
    --be-space-xs: 0.5rem;    /* 8px */
    --be-space-sm: 1rem;      /* 16px */
    --be-space-md: 1.5rem;    /* 24px */
    --be-space-lg: 2rem;      /* 32px */
    --be-space-xl: 3rem;      /* 48px */
    --be-space-2xl: 4rem;     /* 64px */
    
    /* Rayons de bordure */
    --be-radius-sm: 4px;
    --be-radius-md: 8px;
    --be-radius-lg: 12px;
    --be-radius-xl: 16px;
    --be-radius-full: 9999px;
    
    /* Ombres */
    --be-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --be-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --be-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --be-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
    
    /* Transitions */
    --be-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --be-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --be-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Mode (Auto) */
@media (prefers-color-scheme: dark) {
    :root {
        --be-bg-primary: #0F172A;
        --be-bg-secondary: #1E293B;
        --be-bg-tertiary: #334155;
        --be-text-primary: #F1F5F9;
        --be-text-secondary: #94A3B8;
        --be-border: #475569;
    }
}

/* ============================================
   TYPOGRAPHIE GOOGLE FONTS
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ============================================
   STYLES GLOBAUX
   ============================================ */
body {
    font-family: var(--be-font-body);
    color: var(--be-text-primary);
    background-color: var(--be-bg-primary);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--be-font-display);
    font-weight: 700;
    line-height: 1.2;
    color: var(--be-text-primary);
}

/* Liens */
a {
    color: var(--be-primary-light);
    text-decoration: none;
    transition: color var(--be-transition-fast);
}

a:hover {
    color: var(--be-primary);
}

/* Boutons */
.button, .wp-block-button__link, input[type="submit"] {
    background-color: var(--be-primary-light);
    color: white;
    padding: var(--be-space-sm) var(--be-space-lg);
    border-radius: var(--be-radius-md);
    font-weight: 600;
    transition: all var(--be-transition-base);
    border: none;
    cursor: pointer;
}

.button:hover {
    background-color: var(--be-primary);
    transform: translateY(-2px);
    box-shadow: var(--be-shadow-md);
}

/* ============================================
   HEADER PERSONNALISÉ
   ============================================ */
.site-header {
    background-color: var(--be-bg-primary);
    border-bottom: 1px solid var(--be-border);
    box-shadow: var(--be-shadow-sm);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.site-logo img {
    max-height: 50px;
    width: auto;
}

/* ============================================
   BARRE D'INDICATEURS (À venir)
   ============================================ */


/* ============================================
   CARTES D'ARTICLES
   ============================================ */
.article-card {
    background: var(--be-bg-primary);
    border-radius: var(--be-radius-lg);
    overflow: hidden;
    box-shadow: var(--be-shadow-md);
    transition: all var(--be-transition-base);
}

.article-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--be-shadow-xl);
}

.article-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.article-card-content {
    padding: var(--be-space-md);
}

.article-card-title {
    font-size: 1.25rem;
    margin-bottom: var(--be-space-sm);
}

.article-card-excerpt {
    color: var(--be-text-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    :root {
        font-size: 14px;
    }
    
    .article-card {
        margin-bottom: var(--be-space-md);
    }
}

/* ============================================
   UTILITAIRES
   ============================================ */
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-1 { margin-top: var(--be-space-xs); }
.mt-2 { margin-top: var(--be-space-sm); }
.mt-3 { margin-top: var(--be-space-md); }
.mb-1 { margin-bottom: var(--be-space-xs); }
.mb-2 { margin-bottom: var(--be-space-sm); }
.mb-3 { margin-bottom: var(--be-space-md); }


/* =============================================================================
   MASTER HEADER STACK (4 ÉTAGES FIGÉS)
   ============================================================================= */

:root {
    /* --- HAUTEURS DES ÉTAGES (Ajustez ces valeurs si nécessaire) --- */
    --h-flash: 50px;       /* Étage 1 : Flash News */
    --h-ticker: 48px;      /* Étage 2 : Ticker Bourse */
    --h-main: 90px;        /* Étage 3 : Logo & Menu Principal (Ajustez selon votre logo) */
    --h-cat: 56px;         /* Étage 4 : Menu Catégories */
    
    /* Calcul automatique de la hauteur totale */
    --h-total-header: calc(var(--h-flash) + var(--h-ticker) + var(--h-main) + var(--h-cat));
}

/* --- 1. CONFIGURATION DU BODY (Pour pousser le contenu) --- */
body {
    padding-top: var(--h-total-header) !important;
}

/* --- 2. ORCHESTRATION DES POSITIONS --- */

/* Étage 1 : Flash News (Tout en haut) */
.flash-news-wrapper {
    position: fixed !important;
    top: 0;
    z-index: 10000;
    height: var(--h-flash);
}

/* Étage 2 : Ticker (Sous le Flash) */
.economic-ticker-wrapper {
    position: fixed !important;
    top: var(--h-flash);
    z-index: 9999;
    height: var(--h-ticker);
    transition: top 0.3s ease;
}

/* Étage 3 : Menu Principal (Sous le Ticker) */
.site-header {
    position: fixed !important;
    top: calc(var(--h-flash) + var(--h-ticker));
    width: 100%;
    z-index: 9998;
    height: var(--h-main); /* Force la hauteur pour éviter les sauts */
    transition: top 0.3s ease;
}

/* Étage 4 : Menu Catégories (Sous le Menu Principal) */
.be-category-nav {
    position: fixed !important;
    top: calc(var(--h-flash) + var(--h-ticker) + var(--h-main));
    width: 100%;
    z-index: 9997;
    height: var(--h-cat);
    margin: 0 !important; /* On retire les marges pour coller parfaitement */
    transition: top 0.3s ease;
}

/* =============================================================================
   GESTION DE LA FERMETURE DU FLASH NEWS
   ============================================================================= */
/* Quand on ferme le flash, tout remonte de 50px (var(--h-flash)) */

body.has-flash-news.flash-closed .economic-ticker-wrapper {
    top: 0;
}

body.has-flash-news.flash-closed .site-header {
    top: var(--h-ticker);
}

body.has-flash-news.flash-closed .be-category-nav {
    top: calc(var(--h-ticker) + var(--h-main));
}

body.has-flash-news.flash-closed {
    padding-top: calc(var(--h-ticker) + var(--h-main) + var(--h-cat)) !important;
}

/* =============================================================================
   GESTION DE LA BARRE ADMIN WORDPRESS (Mode Connecté)
   ============================================================================= */
/* La barre admin ajoute 32px en haut, il faut tout décaler */

body.admin-bar .flash-news-wrapper { top: 32px; }
body.admin-bar .economic-ticker-wrapper { top: calc(32px + var(--h-flash)); }
body.admin-bar .site-header { top: calc(32px + var(--h-flash) + var(--h-ticker)); }
body.admin-bar .be-category-nav { top: calc(32px + var(--h-flash) + var(--h-ticker) + var(--h-main)); }

/* Admin Bar + Flash Fermé */
body.admin-bar.has-flash-news.flash-closed .economic-ticker-wrapper { top: 32px; }
body.admin-bar.has-flash-news.flash-closed .site-header { top: calc(32px + var(--h-ticker)); }
body.admin-bar.has-flash-news.flash-closed .be-category-nav { top: calc(32px + var(--h-ticker) + var(--h-main)); }

/* =============================================================================
   OPTIMISATION MOBILE (Vital pour ne pas manger tout l'écran)
   ============================================================================= */
@media (max-width: 768px) {
    :root {
        /* On réduit la hauteur du menu principal sur mobile */
        --h-main: 60px; 
        --h-ticker: 0px; /* Astuce : On cache souvent le ticker sur mobile pour gagner de la place */
    }
    
    /* Si vous voulez cacher le ticker sur mobile pour aérer : */
    .economic-ticker-wrapper { display: none; }
    
    /* Recalcul des tops mobile sans le ticker */
    .site-header { top: var(--h-flash); }
    .be-category-nav { top: calc(var(--h-flash) + var(--h-main)); }
    
    /* Recalcul Admin bar mobile (elle est plus grande, 46px) */
    body.admin-bar .flash-news-wrapper { top: 46px; }
    body.admin-bar .site-header { top: calc(46px + var(--h-flash)); }
    body.admin-bar .be-category-nav { top: calc(46px + var(--h-flash) + var(--h-main)); }
}





/* FORCE MAJEURE POUR L'ACCUEIL */
body.home .grid-container {
    max-width: 100% !important; /* Débloque la largeur */
}

body.home .site-main .container.grid-container {
    max-width: 1200px !important; /* Rétablit la largeur du contenu */
    margin: 0 auto !important;
}