/* ================================================== */
/* 🎨 DESIGN SYSTEM BRAWL ATLAS (CHARTE GRAPHIQUE)  */
/* ================================================== */

:root {
    /* Couleurs de fond */
    --bg-main: #0f172a;       /* Bleu nuit très foncé (Fond de page) */
    --bg-card: #1e293b;       /* Bleu nuit moyen (Fond des cartes/boîtes) */
    --bg-header: #0b1121;     /* Bleu ultra sombre (Menu et Footer) */
    
    /* Couleurs de bordures */
    --border-color: #334155;  /* Bordure discrète */
    --border-accent: #f59e0b; /* Bordure sélectionnée (Orange/Jaune) */
    
    /* Couleurs de texte */
    --text-main: #f8fafc;     /* Blanc cassé (Texte principal) */
    --text-muted: #94a3b8;    /* Gris bleuté (Texte secondaire/infos) */
    
    /* Couleurs d'action (Boutons) */
    --bs-yellow: #ffd200;     /* Jaune officiel Brawl Stars */
    --bs-yellow-hover: #ffea00;
    --bs-blue: #3b82f6;       /* Bleu action */
    --bs-green: #22c55e;      /* Vert succès (Validation) */
    --bs-red: #ef4444;        /* Rouge erreur/alerte */
    
    /* Typographie */
    --font-title: 'Lilita One', sans-serif;
    --font-text: 'Rubik', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* --- TYPOGRAPHIE GLOBALE --- */
body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: var(--font-text);
}
h1, h2, h3, h4, .brawl-title {
    font-family: var(--font-title);
    letter-spacing: 1px;
    margin-top: 0;
}

/* --- EFFET TEXTE BRAWL STARS (Bordure noire autour du texte) --- */
.stroke-text {
    text-shadow: 
        -2px -2px 0 #000, 2px -2px 0 #000, 
        -2px 2px 0 #000, 2px 2px 0 #000,
        0px 3px 0 #000;
}

/* --- BOÎTES ET CARTES STANDARD (.brawl-card) --- */
.brawl-card {
    background-color: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.brawl-card:hover {
    border-color: var(--border-accent);
    transform: translateY(-3px);
}

/* --- BOUTONS STANDARD (.brawl-btn) --- */
.brawl-btn {
    display: inline-block;
    background-color: var(--bs-yellow);
    color: #000 !important;
    font-family: var(--font-title);
    font-size: 1.1rem;
    padding: 10px 20px;
    border: 2px solid #000;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 4px 0 #000; /* Effet bouton 3D */
    transition: all 0.1s ease;
}
.brawl-btn:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #000;
}
.brawl-btn:hover {
    background-color: var(--bs-yellow-hover);
}

/* --- CHAMP DE TEXTE STANDARD (.brawl-input) --- */
.brawl-input {
    background-color: var(--bg-main);
    color: var(--text-main);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 16px;
    font-family: var(--font-text);
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s ease;
}
.brawl-input:focus {
    border-color: var(--bs-yellow);
}


/* --- FORCE LE POSITIONNEMENT DU BANDEAU GLOBAL --- */
.global-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    z-index: 999999 !important; /* Passe par-dessus absolument tout */
}
/* Empêche le contenu de la page de passer sous le bandeau */
body {
    padding-top: 80px !important; 
}