@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=block');
/* ================================================== */
/* 🎨 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: 'Lilita One', sans-serif;
}
h1, h2, h3, h4, .brawl-title {
    font-family: 'Lilita One', sans-serif;
    letter-spacing: 1px;
    margin-top: 0;
}

/* --- EFFET TEXTE BRAWL STARS (Bordure noire autour du texte) --- */


/* --- 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: 'Lilita One', sans-serif;
    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: 'Lilita One', sans-serif;
    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: sticky !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: 0 !important; 
}


/* ================================================== */
/* 🛡️ BOUCLIER ANTI-SUPERPOSITION BRAWL ATLAS       */
/* ================================================== */

/* 1. Empêche le chevauchement causé par le nouveau body flex */
body > * {
    flex-shrink: 0 !important;
}

/* 2. Annule les hauteurs forcées à 100vh qui font déborder le contenu */
body > div:not(#brawlatlas-header):not(#brawlatlas-footer):not(#global-tooltip),
main, .app-layout, .quiz-container, .tools-container, .skins-container {
    height: auto !important; 
    min-height: calc(100vh - 180px) !important; /* S'étire intelligemment entre le header et le footer */
    box-sizing: border-box !important;
}

/* 3. Ramène les éléments flottants rebelles dans le flux naturel de la page */
/* (On exclut spécifiquement le header, le footer et les infobulles qui doivent flotter) */
div[class*="layout"]:not(.global-header):not(.global-footer),
section {
    position: relative !important;
    margin-top: 0 !important;
}


/* ================================================== */
/* 🌟 HARMONISATION GLOBALE FORCÉE (MASTER RESET)   */
/* ================================================== */

/* 1. Typographie universelle */
body, p, span, div, li, td, th {
    font-family: 'Lilita One', sans-serif;
}

h1, h2, h3, h4 {
    font-family: 'Lilita One', sans-serif;
    letter-spacing: 1px;
}

/* 2. Standardisation absolue de TOUS les boutons du site */
button, input[type="button"], input[type="submit"], .btn, .action-btn {
    background-color: var(--bs-yellow) !important;
    color: #000 !important;
    font-family: 'Lilita One', sans-serif;
    font-size: 1.1rem !important;
    padding: 10px 20px !important;
    border: 2px solid #000 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 0 #000 !important;
    transition: all 0.1s ease !important;
    text-transform: uppercase !important;
}
button:active, input[type="button"]:active, input[type="submit"]:active, .btn:active {
    transform: translateY(4px) !important;
    box-shadow: 0 0 0 #000 !important;
}
button:hover, input[type="button"]:hover, input[type="submit"]:hover, .btn:hover {
    background-color: #ffea00 !important;
}

/* 3. Standardisation des champs de texte et listes déroulantes */
input[type="text"], input[type="number"], input[type="email"], select, textarea {
    background-color: var(--bg-main) !important;
    color: var(--text-main) !important;
    border: 2px solid var(--border-color) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    outline: none !important;
    font-family: 'Lilita One', sans-serif;
}
input:focus, select:focus {
    border-color: var(--bs-yellow) !important;
}

/* 4. Nettoyage des fonds d'écrans rebelles */
html, body {
    background: var(--bg-main) !important;
    background-image: none !important; 
}


/* ================================================== */
/* 🚀 BRAWL ATLAS : HEADER PLEINE LARGEUR ABSOLUE   */
/* ================================================== */
body {
    margin: 0 !important; /* Retire les marges blanches par défaut du navigateur */
    padding: 0 !important;
}

.global-header {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important; /* Force 100% de la largeur de l'écran */
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 999999 !important;
    background-color: var(--bg-header, #0b1121) !important;
    border-bottom: 2px solid var(--border-color, #334155) !important;
    box-sizing: border-box !important;
}

/* On s'assure que le contenu intérieur reste bien centré et contenu */
.global-header .nav-container {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}


/* ================================================== */
/* 🔒 VERROUILLAGE DE LA MISE EN PAGE DU BANDEAU     */
/* ================================================== */

/* 1. Le conteneur principal : Logo à gauche, Liens à droite */
.global-header .nav-container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 10px 20px !important;
    box-sizing: border-box !important;
}

/* 2. Le Logo Brawl Atlas */
.global-header .brand-logo {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}
.global-header .logo-icon {
    height: 36px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
}

/* 3. Le conteneur des liens de navigation */
.global-header .nav-links {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 4. Les boutons de navigation individuels */
.global-header .nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1.1rem !important;
    text-decoration: none !important;
    white-space: nowrap !important; /* Empêche le texte de passer sur 2 lignes */
}

/* 5. Les icônes à côté des liens */
.global-header .nav-icon {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
}

/* --- OPTIMISATION TÉLÉPHONE (ÉCRANS ÉTROITS) --- */
@media (max-width: 900px) {
    .global-header .nav-container {
        flex-direction: column !important; /* On empile le logo et les liens */
        gap: 12px !important;
        padding: 10px !important;
    }
    .global-header .nav-links {
        flex-wrap: wrap !important; /* Les liens peuvent passer à la ligne s'il n'y a pas la place */
        justify-content: center !important;
        gap: 10px !important;
    }
    .global-header .nav-link {
        font-size: 0.95rem !important; /* Texte légèrement plus petit sur mobile */
    }
}


/* ================================================== */
/* 🚫 SUPPRESSION DES CERCLES ET FONDS (BANDEAU)     */
/* ================================================== */
.global-header .nav-link,
.global-header .nav-icon {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    outline: none !important;
}


/* ================================================== */
/* ⚓ PIED DE PAGE (GLOBAL-FOOTER) : 100% LARGEUR & BAS */
/* ================================================== */

/* 1. Transforme la page en colonne élastique */
body {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important; /* Minimum la taille de l'écran */
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. Le contenu principal grandit pour pousser le footer vers le bas */
body > *:not(.global-header):not(.global-footer):not(#brawlatlas-header):not(#brawlatlas-footer) {
    flex: 1 0 auto !important;
}

/* 3. Blindage du Footer fourni */
.global-footer {
    width: 100vw !important;           /* 100% de la largeur de l'écran */
    max-width: 100% !important;
    margin: 0 !important;
    margin-top: auto !important;       /* Repousse le footer TOUT EN BAS */
    padding: 30px 20px 20px !important;/* Espace confortable à l'intérieur */
    box-sizing: border-box !important;
    
    /* Design cohérent avec le haut de page */
    background-color: var(--bg-header, #0b1121) !important; 
    border-top: 3px solid var(--border-color, #334155) !important;
    
    /* On s'assure qu'il passe au-dessus des éléments flottants */
    position: relative !important;
    z-index: 100 !important;
    text-align: center !important;
}


/* ================================================== */
/* 🚑 CORRECTION SPÉCIFIQUE : PAGE QUIZ & APP-LAYOUT */
/* ================================================== */

/* 1. On libère la hauteur de l'application pour qu'elle pousse le footer */
.app-layout, .quiz-container {
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 2. On s'assure que le contenu du quiz grandit correctement */
.quiz-container {
    flex: 1 0 auto !important;
}

/* 3. On empêche l'infobulle de casser notre colonne élastique */
.global-floating-tooltip {
    position: fixed !important;
    flex: none !important;
    z-index: 99999 !important;
}


/* ================================================== */
/* 🎯 CIBLAGE DU CONTENEUR PARENT DU FOOTER           */
/* ================================================== */

/* C'est la boîte parente (#brawlatlas-footer) qui doit être poussée vers le bas */
#brawlatlas-footer {
    width: 100vw !important;
    max-width: 100% !important;
    margin-top: auto !important; /* La magie opère ici ! */
    flex-shrink: 0 !important;
    display: block !important;
    position: relative !important;
    z-index: 100 !important;
}

/* On s'assure que le contenu du Quiz pousse cette boîte vers le bas */
.app-layout {
    flex: 1 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}


/* ================================================== */



/* ================================================== */
/* 🖼️ ICÔNES ACCUEIL : TAILLE DYNAMIQUE ET HOVER 3D   */
/* ================================================== */
.page-icon, .home-icon, .card-icon, .nav-card img {
    width: 100% !important;
    max-width: 160px !important; /* Taille généreuse mais contrôlée */
    height: auto !important;
    aspect-ratio: 1 / 1 !important; /* Garde une forme parfaitement carrée */
    object-fit: contain !important; /* Empêche l'écrasement de l'image */
    display: block !important;
    margin: 0 auto 15px auto !important;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; /* Effet élastique */
    filter: drop-shadow(0 8px 12px rgba(0,0,0,0.4)) !important; /* Petite ombre sous l'icône */
}

/* Le petit effet "Waouh" au survol */
.page-icon:hover, .home-icon:hover, .card-icon:hover, .nav-card:hover img {
    transform: scale(1.15) translateY(-5px) !important; 
}


/* ================================================== */
/* 🖼️ ICÔNES ACCUEIL (TOOL-CARD) : TAILLE & ANIMATION */
/* ================================================== */

/* 1. La boîte qui contient l'icône ou l'émoji */
.tools-grid .tool-card .tool-icon {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 130px !important; /* On réserve une belle hauteur */
    margin-bottom: 10px !important;
    font-size: 100px !important; /* Essentiel pour faire grossir l'émoji 🧮 */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* 2. L'image de l'icône elle-même (qui écrase la règle des 24px du menu) */
.tools-grid .tool-card .tool-icon img {
    width: 100% !important;
    max-width: 120px !important;
    height: 120px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.5)) !important; /* Ombre 3D */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* 3. Animation au survol : L'icône bondit quand on passe la souris sur la carte */
.tools-grid .tool-card:hover .tool-icon img,
.tools-grid .tool-card:hover .tool-icon {
    transform: scale(1.15) translateY(-8px) !important;
}


/* ================================================== */
/* 🖋️ CORRECTION : CONTOUR DE TEXTE NET ET BRAWL STARS */
/* ================================================== */
.stroke-text {
    /* Un contour régulier parfait de 1.5 pixels */
    -webkit-text-stroke: 1.5px #000 !important;
    
    /* Une seule ombre portée nette vers le bas pour l'effet 3D */
    text-shadow: 0 4px 0 #000 !important;
    
    /* Empêche le contour noir de grignoter la couleur intérieure */
    paint-order: stroke fill !important;
}

/* Optionnel : Assurer que le texte dans les boutons reste bien lisible */
.btn-launch.stroke-text {
    letter-spacing: 1px !important;
}


/* ================================================== */
/* 🚫 SUPPRESSION DES OMBRES PORTÉES SUR LE TEXTE     */
/* ================================================== */
.stroke-text {
    text-shadow: none !important; /* Désactive toutes les ombres */
}


/* ================================================== */



/* ================================================== */


/* Si le contour noir (stroke) donne encore un aspect trop épais, on l'affine un peu */
.stroke-text {
    -webkit-text-stroke: 1px #000 !important; /* Affiné à 1px au lieu de 1.5px */
}


/* ================================================== */
/* 🚑 SAUVETAGE DE LISIBILITÉ (POLICE LILITA ONE)     */
/* ================================================== */

/* 1. On supprime les contours et ombres sur tous les éléments interactifs */
button, input, select, a, .nav-card, .filter-btn, .tool-badge {
    -webkit-text-stroke: 0 !important; /* Supprime le contour noir écrasant */
    text-shadow: none !important;      /* Supprime les ombres baveuses */
    letter-spacing: 1.5px !important;  /* Écarte les lettres pour qu'elles respirent */
}

/* 2. On rétablit un petit contour uniquement sur les très gros titres */
h1, h2, .hero-title, .settings-hero h1 {
    -webkit-text-stroke: 1.5px #000 !important;
}



/* ================================================== */

/* TEXTES DE LECTURE : Rubik (Propre, lisible, aéré) */
body, p, span, div, .setting-desc, select, input, .tool-desc {
    
    color: #f8fafc; /* Blanc cassé très lisible */
}

/* TITRES ET BOUTONS : Lilita One (Gros, cartoon, sans forcer le gras) */
h1, h2, h3, h4, button, .btn, .nav-card, #brawlatlas-header a, .tool-title, .hero-title {
    font-family: 'Lilita One', cursive !important;
    font-weight: normal !important; /* Laisse la police respirer */
    letter-spacing: 1px !important;
}

/* CORRECTION PAGE SETTINGS : Sous-titres bien blancs */
.setting-block h2 {
    color: #ffffff !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
    margin-bottom: 15px !important;
}

/* ================================================== */
/* 🎨 LILITA ONE ABSOLU ET LISIBILITÉ CORRIGÉE        */
/* ================================================== */

/* On force la police sur 100% des éléments du site */
* {
    font-family: 'Lilita One', cursive, sans-serif !important;
    font-weight: normal !important;
}

/* 🚑 SAUVETAGE DES PETITS TEXTES ET SOUS-TITRES */
/* On garantit que le texte de base est blanc, sans contour baveux, et un peu aéré */
body, p, span, div, label, select, input, .setting-desc, .setting-block h2 {
    color: #ffffff !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
    letter-spacing: 1px !important;
}

/* On garde le contour noir épais uniquement pour les gros titres et gros boutons */
h1, .hero-title, .stroke-text, .btn, .danger-btn {
    -webkit-text-stroke: 1.5px #000 !important;
}

/* ================================================== */
/* 🎨 LILITA ONE ABSOLU ET LISIBILITÉ CORRIGÉE        */
/* ================================================== */

/* On force la police sur 100% des éléments du site */
* {
    font-family: 'Lilita One', cursive, sans-serif !important;
    font-weight: normal !important;
}

/* 🚑 SAUVETAGE DES PETITS TEXTES ET SOUS-TITRES */
/* On garantit que le texte de base est blanc, sans contour baveux, et un peu aéré */
body, p, span, div, label, select, input, .setting-desc, .setting-block h2 {
    color: #ffffff !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
    letter-spacing: 1px !important;
}

/* On garde le contour noir épais uniquement pour les gros titres et gros boutons */
h1, .hero-title, .stroke-text, .btn, .danger-btn {
    -webkit-text-stroke: 1.5px #000 !important;
}


/* ================================================== */
/* 🛡️ DISTANCE DE SÉCURITÉ SOUS LE BANDEAU            */
/* ================================================== */

/* On force un espace vide en haut de la zone de contenu principale */
.app-layout {
    padding-top: 20px !important; /* Pousse tout le contenu vers le bas */
}

/* On s'assure que la boîte du quiz elle-même respire bien */
.quiz-container, .leaderboard-card {
    margin-top: 10px !important;
}


/* ================================================== */
/* 🏆 POP-UP SYSTÈME DE RANGS                         */
/* ================================================== */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8); z-index: 9999;
    display: flex; justify-content: center; align-items: center;
    opacity: 0; visibility: hidden; transition: 0.3s ease-in-out;
}
.modal-overlay.active {
    opacity: 1; visibility: visible;
}
.modal-content {
    background: #1e293b; border: 3px solid #334155; border-radius: 20px;
    padding: 30px; max-width: 500px; width: 90%; text-align: center;
    position: relative; transform: translateY(-20px) scale(0.95); transition: 0.3s ease-in-out;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}
.modal-overlay.active .modal-content {
    transform: translateY(0) scale(1);
}
.close-modal {
    position: absolute; top: 10px; right: 15px; font-size: 35px;
    background: none; border: none; color: #ef4444; cursor: pointer;
    -webkit-text-stroke: 1.5px #000; line-height: 1;
}
.close-modal:hover { color: #f87171; }

.ranks-list {
    display: flex; flex-direction: column; gap: 12px; margin-top: 20px;
    max-height: 55vh; overflow-y: auto; padding-right: 10px;
}
.rank-item {
    display: flex; align-items: center; justify-content: space-between;
    background: #0f172a; border: 2px solid #334155; padding: 10px 20px;
    border-radius: 12px;
}
.rank-item img { width: 50px; height: 50px; object-fit: contain; }
.rank-info { display: flex; align-items: center; gap: 15px; }
.rank-name { font-size: 1.3rem; color: #fff; text-transform: uppercase; }
.rank-req { color: #ffd200; font-size: 1.3rem; -webkit-text-stroke: 1.5px #000; }

/* Effet au survol de l'icône de rang sur le profil */
#rank-icon-img { cursor: pointer; transition: transform 0.2s; }
#rank-icon-img:hover { transform: scale(1.15) rotate(5deg); }

/* Custom Scrollbar pour la liste des rangs */
.ranks-list::-webkit-scrollbar { width: 8px; }
.ranks-list::-webkit-scrollbar-track { background: #0f172a; border-radius: 10px; }
.ranks-list::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }


/* ================================================== */
/* FIX : ALIGNEMENT DES TROPHÉES DANS LA POP-UP       */
/* ================================================== */
.rank-req {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 8px; /* Espace parfait entre le chiffre et l'icône */
}
.trophy-popup-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: drop-shadow(0px 2px 0px rgba(0,0,0,0.8)); /* Petite ombre pour incruster l'image */
}


/* ================================================== */
/* 🛠️ CORRECTIONS AFFICHAGE POP-UP & SÉCURITÉ BANDEAU */
/* ================================================== */

/* 1. Distance de sécurité avec le bandeau et gestion de l'écran */
.modal-overlay {
    padding-top: 45px !important; /* Distance de sécurité sous le bandeau */
    padding-bottom: 20px !important;
    align-items: flex-start !important; /* On arrête de centrer de force pour respecter le décalage haut */
    z-index: 100000 !important; /* On s'assure de passer au-dessus de TOUT (même du bandeau) */
}

/* 2. Boîte intelligente qui s'adapte sans déborder */
.modal-content {
    margin: 0 auto !important; /* Centre horizontalement */
    max-height: calc(100vh - 120px) !important; /* La boîte ne dépassera jamais l'écran */
    display: flex !important;
    flex-direction: column !important; /* Permet à la liste interne de scroller */
}

/* 3. La liste des rangs peut scroller proprement si l'écran est petit */
.ranks-list {
    overflow-y: auto !important;
    flex: 1 !important; 
    padding-right: 10px;
    margin-bottom: 10px;
}

/* 4. Anti-compression des images et textes */
.rank-info img, .trophy-popup-icon {
    flex-shrink: 0 !important; /* Interdit au navigateur d'écraser les images */
}

.rank-req {
    white-space: nowrap !important; /* Interdit aux trophées de passer à la ligne */
}

/* 5. Ajustement des textes internes pour Lilita One */
.rank-name {
    font-size: clamp(1.1rem, 4vw, 1.3rem) !important; /* S'adapte sur mobile */
    line-height: 1.2 !important;
}


/* ================================================== */
/* 🛡️ CORRECTION : ICÔNE TOUJOURS CLIQUABLE           */
/* ================================================== */
#rank-icon-img, .rank-badge {
    position: relative !important;
    z-index: 50 !important; /* Passe au-dessus des boîtes invisibles */
    pointer-events: auto !important; /* Force la réception du clic */
}


/* ================================================== */
/* 🖱️ CLIC SUR TOUT LE BADGE DE RANG                  */
/* ================================================== */
#rank-division-tag {
    cursor: pointer !important;
    transition: transform 0.2s;
    display: inline-flex; /* S'assure que la boîte englobe tout proprement */
}
#rank-division-tag:hover {
    transform: scale(1.05) rotate(2deg); /* Petit effet dynamique sur tout le badge */
}


/* ================================================== */
/* 🛡️ DISTANCE DE SÉCURITÉ AVEC LE PIED DE PAGE       */
/* ================================================== */
.app-layout {
    padding-bottom: 20px !important; /* Marge symétrique au padding-top */
}

.quiz-container, .leaderboard-card {
    margin-bottom: 20px !important; /* Décolle le dernier élément du footer */
}


/* ================================================== */
/* 🌐 RÉSEAUX SOCIAUX (FOOTER)                        */
/* ================================================== */
.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.social-links {
    display: flex;
    gap: 20px;
    margin-top: 10px;
    margin-bottom: 15px;
}

.social-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    background: #1e293b; /* Bleu très foncé */
    color: #f8fafc; /* Blanc */
    border-radius: 50%;
    font-size: 1.5rem;
    text-decoration: none;
    border: 2px solid #334155;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.social-btn:hover {
    background: #fbbf24; /* Jaune Brawl Stars */
    color: #000; /* Icône noire au survol */
    border-color: #fef08a;
    transform: translateY(-5px) scale(1.1); /* Petit bond au survol */
    box-shadow: 0 8px 15px rgba(251, 191, 36, 0.4); /* Halo lumineux jaune */
}


/* ================================================== */
/* 📂 MENU DÉROULANT CATALOG                          */
/* ================================================== */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #1e293b; /* Bleu sombre Brawl Stars */
    min-width: 150px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.8);
    z-index: 100000;
    border-radius: 12px;
    border: 3px solid #334155;
    overflow: hidden;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 5px;
}

.dropdown-content a {
    color: #f8fafc;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: center;
    border-bottom: 2px solid #334155;
    transition: all 0.2s ease;
    font-size: 1.1rem;
    white-space: nowrap;
}

.dropdown-content a:last-child {
    border-bottom: none;
}

/* Effet au survol des sous-menus */
.dropdown-content a:hover {
    background-color: #fbbf24; /* Jaune Brawl Stars */
    color: #000;
    transform: scale(1.05);
}

/* Affichage du sous-menu quand on survole le parent */
.dropdown:hover .dropdown-content {
    display: block;
}