/* ==========================================================================
   Thérèse Kayikwamba Wagner - Site biographique
   Feuille de styles personnalisée (extraite de index.html)
   ========================================================================== */

/* === VARIABLES CSS GLOBALES === */
:root {
    --bleu-nuit: #003A75;
    --bleu: #007FFF;
    --rouge: #CE1126;
    --or: #F7D918;
    --gradient-hero: linear-gradient(135deg, rgba(0,58,117,0.90) 0%, rgba(0,127,255,0.75) 60%, rgba(0,90,181,0.85) 100%);
}

html {
    /* Empêche tout débordement horizontal sans casser position:sticky (contrairement à hidden) */
    overflow-x: clip;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #F8F9FA;
    color: #343A40;
    overflow-x: clip;
}

/* === ÉCHELLE TYPOGRAPHIQUE === */
.text-display { font: 700 clamp(2.5rem, 6vw, 5rem)/1.1 'Playfair Display', serif; }
.text-h1      { font: 700 clamp(2rem, 4vw, 3.5rem)/1.2 'Playfair Display', serif; }
.text-h2      { font: 600 clamp(1.5rem, 3vw, 2.25rem)/1.3 'Playfair Display', serif; }
.text-h3      { font: 600 1.25rem/1.4 'Playfair Display', serif; }
.text-body-lg { font: 400 1.125rem/1.75 'Inter', sans-serif; }
.text-body    { font: 400 1rem/1.6 'Inter', sans-serif; }
.text-label   { font: 600 0.75rem/1.2 'Inter', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }

/* === GLASSMORPHISME === */
.glass-card {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.50);
    border-radius: 1.25rem;
    box-shadow: 0 8px 32px rgba(0, 58, 117, 0.12);
}

.glass-card-blue {
    background: rgba(0, 58, 117, 0.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 1.25rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.20);
    color: #FFFFFF;
}

.glass-nav {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

/* État sticky nav */
#site-header.scrolled .glass-nav {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 127, 255, 0.12);
    box-shadow: 0 2px 20px rgba(0, 58, 117, 0.08);
}

#site-header:not(.scrolled) .nav-link { color: rgba(255,255,255,0.9); }
#site-header.scrolled .nav-link { color: #343A40; }

#site-header:not(.scrolled) .logo-text-1 { color: #FFFFFF; }
#site-header.scrolled .logo-text-1 { color: #003A75; }

/* Sous-titre du logo "Ministre d'État · RDC" : blanc au-dessus du héros, rouge une fois scrollé */
#site-header:not(.scrolled) .logo-text-2 { color: #FFFFFF; }
#site-header.scrolled .logo-text-2 { color: #CE1126; }

/* Bouton menu mobile : lisible quel que soit l'état du header (était toujours blanc) */
#site-header:not(.scrolled) #menu-toggle { color: #FFFFFF; }
#site-header.scrolled #menu-toggle { color: #003A75; }

/* Lien de nav actif (page courante) - classe ajoutée par main.js */
#site-header:not(.scrolled) .nav-link.active { color: #F7D918; }
#site-header.scrolled .nav-link.active { color: #007FFF; background: #E8F4FD; }

/* === BOUTONS === */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #CE1126;
    color: #FFFFFF;
    font: 600 0.9375rem/1 'Inter', sans-serif;
    border-radius: 0.75rem;
    transition: all 0.25s ease;
    box-shadow: 0 4px 14px rgba(206, 17, 38, 0.28);
}
.btn-primary:hover {
    background: #A50E1F;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(206, 17, 38, 0.36);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 2px solid #F7D918;
    color: #003A75;
    font: 600 0.9375rem/1 'Inter', sans-serif;
    border-radius: 0.75rem;
    transition: all 0.25s ease;
    background: transparent;
}
.btn-secondary:hover {
    background: #F7D918;
    color: #003A75;
    transform: translateY(-2px);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1.5px solid rgba(255,255,255,0.6);
    color: #FFFFFF;
    font: 600 0.9375rem/1 'Inter', sans-serif;
    border-radius: 0.75rem;
    transition: all 0.25s ease;
    background: rgba(255,255,255,0.08);
}
.btn-ghost:hover {
    background: rgba(255,255,255,0.18);
    border-color: #F7D918;
    color: #F7D918;
}

/* === BADGES === */
.badge-bleu  { background:#E8F4FD; color:#005AB5; font:600 0.7rem/1 'Inter'; padding:0.35rem 0.75rem; border-radius:999px; text-transform:uppercase; letter-spacing:0.06em; }
.badge-or    { background:#F7D918; color:#003A75; font:600 0.7rem/1 'Inter'; padding:0.35rem 0.75rem; border-radius:999px; text-transform:uppercase; letter-spacing:0.06em; }
.badge-rouge { background:#CE1126; color:#FFFFFF;  font:600 0.7rem/1 'Inter'; padding:0.35rem 0.75rem; border-radius:999px; text-transform:uppercase; letter-spacing:0.06em; }

/* Utils */
.text-balance { text-wrap: balance; }

/* === ICÔNES LUCIDE - alignement en ligne avec le texte =====================
   Tailwind preflight applique `svg { display:block }`, ce qui fait tomber les
   icônes en ligne sur leur propre ligne et casse l'alignement avec le texte.
   On force le rendu inline + un centrage vertical propre UNIQUEMENT pour les
   icônes placées directement dans un élément de texte (les icônes décoratives
   en bloc, dans un <div> centré par ex., ne sont pas affectées). */
:where(p, span, a, li, label, cite, h1, h2, h3, h4, h5, strong, em, b, button, blockquote, dt, dd, time)
    > svg.lucide,
:where(p, span, a, li, label, cite, h1, h2, h3, h4, h5, strong, em, b, button, blockquote, dt, dd, time)
    > i[data-lucide] {
    display: inline-block;
    vertical-align: -0.18em;
}