/* =========================================================================
   🎨 DESIGN SYSTEM PREMIUM & CONFIGURATION MARQUE BLANCHE
   ========================================================================= */
   :root {
    /* --- Couleurs Officielles ASM Clermont Auvergne --- */
    --primary-color: #002F6C;
    --primary-rgb: 0, 47, 108;
    --secondary-color: #FEE900;
    --secondary-rgb: 252, 209, 22;
    --tertiary-color: #FCD116;
    
    /* --- Nuances Thématiques --- */
    --bg-deep: #040d1a;
    --emerald: #10b981; /* Utilisé pour les bonnes réponses */
    --amber: var(--tertiary-color); 
    --slate: #94a3b8;
    --white: #f8fafc;
    --red: #e70202; /* Utilisé pour les mauvaises réponses */
    
   /* --- Composants Dynamiques épurés pour le jaune --- */
--card-bg: rgba(255, 255, 255, 0.45); /* 🤍 Un fond blanc translucide magnifique */
--input-bg: #FFFFFF;                  /* 🎯 Des champs de saisie blancs et nets */

    /* 🛡️ ASSETS VISUELS */
    --watermark-image: url('bx-asm-nega.svg');
}

/* ==========================================================================
   ⚡ SÉCURITÉ ANTI-FLASH AU CHARGEMENT (Cascade & Spécificité Naturelles)
   ========================================================================== */

/* 🚫 Règle 1 : Sélecteur très général (Spécificité faible : 0,0,1)
   Toutes les images de la page sont masquées par défaut dès le chargement. */
   img {
    display: none;
    max-width: 100%;
    height: auto;
}

/* 🔓 Règle 2 : Sélecteur ciblé (Spécificité forte : 1,0,1)
   On réactive naturellement les images dès qu'elles sont à l'intérieur du viewport du jeu.
   L'ID (#game-viewport) écrase mathématiquement la règle générale ci-dessus. */
#game-viewport img {
    display: block;
}

/* 🔓 Règle 3 : Sélecteur pour les images inline (Spécificité forte : 1,1,1)
   On restaure l'affichage en ligne pour les petits logos/icônes insérés dans le texte. */
#game-viewport img.inline-icon,
#game-viewport img.inline-fixed,
#game-viewport .pitch-lead-local img {
    display: inline-block;
    vertical-align: middle;
    margin-top: -3px;
}

/* =========================================================================
   🟥 COMPOSANT UNIFIÉ : MESSAGES DE DÉFAITE (Version Épurée & Sans Traces)
   ========================================================================= */

   #question-text.defeat-zone {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 200px;
    border: none;
    margin: 0 auto;
    padding: 15px;
    background: transparent;
    box-shadow: none;
}

/* 🛡️ LE NETTOYEUR : Supprime les fonds gris, ombres et paddings parasites du thème */
#question-text.defeat-zone div {
    background: transparent;
    background-color: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
    margin: 0;
}

/* Ligne 1 : Le gros titre ROUGE géant */
#question-text.defeat-zone div.loss-title {
    color: var(--red); 
    font-weight: 900;
    font-size: 56px;
    text-transform: uppercase;
    font-family: 'Impact', 'Arial Black', sans-serif;
    line-height: 1.1;
    letter-spacing: -1px;
    width: 100%;
    margin-bottom: 15px; /* Un espace simple, propre et naturel */
}

/* Lignes 2 et 3 : Les mentions bleues classiques l'une sous l'autre */
#question-text.defeat-zone div.loss-subtitle {
    color: var(--primary-color);
    font-weight: 900;
    font-size: 22px;
    line-height: 1.4;
    width: 100%;
    margin-bottom: 6px;
}

/* =========================================================================
   👑 COMPOSANT MASTER - BOUTON STANDARD MARQUE BLANCHE (UNIFIÉ)
   ========================================================================= */
   .btn-primary-outline {
    width: 100%;
    padding: 12px;
    background-color: var(--primary-color);  /* 💙 Repos : Fond Bleu */
    color: var(--secondary-color);           /* 💛 Repos : Texte Jaune */
    border: 2px solid var(--secondary-color); /* 💛 Repos : Filet Jaune */
    border-radius: 50px;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    line-height: 1.2;
    transition: all 0.2s ease; 
}

/* 🎯 Effet au survol universel */
.btn-primary-outline:hover {
    background-color: var(--secondary-color); /* 💛 Survol : Fond Jaune */
    color: var(--primary-color);              /* 💙 Survol : Texte Bleu */
    border-color: var(--primary-color);        /* 💙 Survol : Filet Bleu */
    box-shadow: none;            
}

/* ==========================================================================
   🎮 CADRAGE DES ÉCRANS & INDÉPENDANCE DU FOND (CORRIGÉ !)
   ========================================================================== */

/* 1. RÈGLES PAR DÉFAUT (Mobile d'abord et structure globale) */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: var(--secondary-color); /* 💛 CORRIGÉ : L'application démarre instantanément en Jaune ASM */
    font-family: 'Urbanist', sans-serif;
    color: var(--primary-color);              /* 🔵 CORRIGÉ : Le texte par défaut passe en bleu marine pour être lisible sur le jaune */
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

/* 📦 Conteneur d'ancrage Maître de l'Application */
#game-viewport {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: var(--secondary-color); /* 💛 Sécurité pour le conteneur */
    overflow: hidden; /* ✂️ LE VIDEUR DU STADE : Rien ne sort d'ici ! */
}


/* ==========================================================================
   📱 ÉCRAN ONBOARDING : TITRES & TEXTES (Harmonisés & Rapprochés)
   ========================================================================== */

/* Le grand titre extérieur (PRÉPARE TOI...) */
.main-onboarding-header {
    font-size: 24px;          
    font-weight: 800;         
    color: #1a1a1a;
    text-align: center;
    
    /* 🎯 CORRECTION CHIRURGICALE DES MARGES */
    margin-top: 4px;         /* 📉 On passe de 25px à 4px pour supprimer le vide du haut */
    margin-bottom: 10px;      /* 📉 On passe de 20px à 10px pour remonter le pavé de saisie */
    
    padding: 0 16px;
    text-transform: uppercase; 
    line-height: 1.3;
}

/* ==========================================================================
   Tracks: CHEMIN DE FER & BADGES (VERSION PROPRE ET DYNAMIQUE)
   ========================================================================== */

   .stepper-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    padding: 0 32px;
    margin: 10px 0 25px 0;
}

/* 🧵 Le filet bleu qui relie toutes les pastilles */
.stepper-container::before {
    content: '';
    position: absolute;
    top: 18px; /* Pile au milieu des cercles de 36px */
    left: 55px;
    right: 55px;
    height: 3px;
    background-color: var(--primary-color, #002F6C); /* Le bleu du club */
    z-index: 1; 
}

/* Alignement individuel de chaque étape */
.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2; 
    flex: 1;
}

/* 🔵 ÉTAT INACTIF PAR DÉFAUT 
   Pastille bleue, chiffre jaune, texte gris */
.stepper-container .step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--primary-color, #002F6C); 
    border: 3px solid var(--primary-color, #002F6C);  
    color: var(--tertiary-color, #FCD116);            
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 900;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.stepper-container .step-label {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #888888; 
    text-align: center;
    transition: all 0.3s ease;
}

/* 🟡 ÉTAT ACTIF COHÉRENT (Basé uniquement sur la classe HTML .active) 
   Pastille jaune, contour bleu, chiffre bleu, texte noir et bold */
.stepper-container .step-item.active .step-circle {
    background-color: var(--tertiary-color, #FCD116); 
    border: 3px solid var(--primary-color, #002F6C);  
    color: var(--primary-color, #002F6C);             
    transform: scale(1.1); 
}

.stepper-container .step-item.active .step-label {
    color: #1a1a1a;            
    font-weight: 800;          
}


/* --- 🎯 GRANDE PASTILLE NUMÉRIQUE DES CARTES (ÉTAPES 1 & 2) --- */
.step-number-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    box-sizing: border-box;
    
    /* Style actif officiel (Jaune ASM, contour bleu, chiffre bleu) */
    background-color: var(--tertiary-color, #FCD116); 
    border: 3px solid var(--primary-color, #002F6C);  
    color: var(--primary-color, #002F6C);             
    
    font-size: 22px;
    font-weight: 900;
    border-radius: 50%;
    margin: 5px auto 10px auto; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Le titre à l'intérieur du pavé (Installe la web app...) */
.onboarding-title {
    font-weight: 900;
    color: var(--primary-color, #002F6C);
    text-transform: uppercase;
    text-align: center;
    
    /* 📐 Compacté au maximum pour resserrer la hauteur */
    margin: 4px 0 8px 0; 
    line-height: 1.15;
    width: 100%;
    
    /* La taille s'adapte : elle baisse sur petit écran pour rester sur 2-3 lignes max */
    font-size: clamp(16px, 5.2vw, 20px);
}

/* Le paragraphe descriptif */
.onboarding-subtitle {
    font-size: 13.5px;
    font-weight: 500;
    color: #444444; 
    line-height: 1.35;
    
    /* 👈 Aligné proprement à gauche */
    text-align: left; 
    
    margin-bottom: 15px; 
    padding: 0 10px;
    
    /* 📐 S'assure que le bloc prend toute la largeur pour un alignement parfait */
    width: 100%; 
    box-sizing: border-box;
}

/* ==========================================================================
   🗂️ STRUCTURE DE L'ACCORDÉON & BOUTONS
   ========================================================================== */
/* --- 🗂️ ACCORDÉONS JAUNE ASM DYNAMIQUE (100%) --- */

.accordion-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 16px;
}

/* Le conteneur de chaque tiroir */
.accordion-item {
    /* 🖤 On passe sur une bordure noire nette de 2px pour un look très "Club" et affirmé */
    border: 0px solid #000000; 
    border-radius: 12px;
    background-color: #ffffff;
    overflow: hidden;
}

/* Les boutons-barres (Comment faire sur...) */
.btn-device {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding: 12px 20px;
    font-size: 18px;
    font-weight: 700;
    border: none;
    
    /* 🟡 Jaune ASM à 100% (Variable ou fallback jaune or #FCD116) */
    background-color: var(--tertiary-color, #FCD116);
    
    color: #000000; /* Texte noir pur pour un contraste parfait */
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s ease;
}

/* Effet de pression au clic */
.btn-device:active {
    /* 🪄 Au clic, on fonce légèrement le jaune en y mêlant 15% de noir pour créer un effet de bouton physique enfoncé */
    background-color: color-mix(in srgb, var(--tertiary-color, #FCD116) 85%, #000000 15%);
}

/* --- 🎨 LOGOS SVG EN NOIR PUR --- */
.btn-device-logo {
    height: 36px;
    width: auto;
    flex-shrink: 0;
    display: block;
    filter: none; /* Pas de filtre, noir d'origine */
}

/* --- 🎨 LOGOS SVG : TAILLE, COULEUR JAUNE ET EFFET RELIEF EN CREUX --- */
/* --- 🎨 LOGOS SVG : TAILLE NETTE ET COULEUR NOIRE D'ORIGINE --- */
.btn-device-logo {
    height: 36px;             /* 🔎 On garde la taille "grosse" demandée */
    width: auto;
    flex-shrink: 0;           /* Empêche le logo de se faire écraser */
    display: block;
    
    /* 💥 CORRECTION : On supprime tous les filtres complexes (couleur et relief).
       Tes logos images/apple_logo_black.svg et logo-android-black.svg
       vont s'afficher dans leur noir d'origine, parfaitement nets. */
    filter: none; 
}


/* --- 📥 CONTENU DES TIROIRS (MIS À JOUR) --- */
.drawer {
    display: none;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    background-color: #ffffff;
    padding: 24px 16px;
    animation: slideDown 0.2s ease-out;
}

.drawer.open {
    display: block;
}

/* On nettoie la liste à puces par défaut pour faire notre propre mise en page */
.instructions-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    display: flex;
    flex-direction: column;
    gap: 16px; /* Espace aéré entre les étapes */
}

.instructions-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    color: #222222;
    line-height: 1.4;
    text-align: left;
}

/* Petites pastilles pour les numéros d'étapes (Jaune ASM) */
.step-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background-color: var(--tertiary-color, #FCD116);
    color: #000000;
    font-size: 13px;
    font-weight: 800;
    border-radius: 50%;
    margin-top: 2px;
}

/* Pastille noire pour la toute dernière action */
.step-badge.badge-black {
    background-color: #000000;
    color: var(--tertiary-color, #FCD116);
}

/* Style pour les petites icônes insérées dans le texte */
.inline-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 14px;
    margin: 0 2px;
    border: 1px solid #e0e0e0;
}

/* --- 📦 BOX DE SUCCÈS (Mise à jour pour l'icône image) --- */
.installation-success-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background-color: color-mix(in srgb, var(--tertiary-color, #FCD116) 10%, transparent); /* Fond jaune très doux */
    border-left: 4px solid var(--tertiary-color, #FCD116);
    padding: 14px 16px;
    border-radius: 0 12px 12px 0;
    margin-bottom: 20px;
    text-align: left;
}

.installation-success-box p {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #333333;
    line-height: 1.4;
}

/* L'icône de l'app (images/asm-phonicon-180x180.png) */
.success-app-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 8px; /* Un petit arrondi sympa pour l'icône */
}

/* --- 🚀 ÉTAPE DE RELANCE FINALE --- */
.relaunch-step {
    background-color: #f9f9f9;
    border: 1px solid #eeeeee;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    text-align: left;
}

.relaunch-header {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: #000000;
    margin-bottom: 8px;
}

.relaunch-text {
    margin: 0;
    padding-left: 36px; /* Aligné sous le texte du header */
    font-size: 14px;
    color: #555555;
    line-height: 1.4;
}

/* --- 🔵 LE NOUVEAU BOUTON DE CONFIRMATION (Étape 1) --- */
.btn-confirmation-onboarding {
    width: 100%;
    padding: 18px 24px;
    background-color: var(--primary-color, #002F6C); /* Bleu Club */
    color: var(--tertiary-color, #FCD116); /* Chiffre/Texte Jaune */
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 20px;
    transition: background-color 0.2s ease, transform 0.1s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.btn-confirmation-onboarding:active {
    transform: translateY(2px); /* Effet d'enfoncement au clic */
    background-color: color-mix(in srgb, var(--primary-color, #002F6C) 85%, #000000 15%);
}

/* Illustration (Conservée intacte pour tes futurs visuels) */
.drawer-illustration {
    margin-top: 16px;
    padding: 25px;
    background-color: #fdfdfd;
    border-radius: 8px;
    font-size: 13px;
    color: #777777;
    text-align: center;
    border: 1px dashed #cccccc;
}


/* ==========================================================================
   🟨 POP-UP / CARTON JAUNE (VERSION FINALE CENTRÉE)
   ========================================================================= */

   .warning-overlay {
    display: none; /* Géré par le JS */
    position: fixed; /* Reste au centre de l'écran */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.85); /* Voile noir */
    backdrop-filter: blur(8px); /* Flou */
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto; /* Sécurité pour petits téléphones */
}

.warning-card {
    background-color: #ffffff;
    border: 3px solid var(--primary-color, #002F6C);
    border-radius: 20px;
    padding: 25px 20px; 
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    max-width: 360px; 
    width: 100%;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    box-sizing: border-box;
}

/* 🟢 NOUVEAU : Header pour centrer l'icône */
.warning-icon-header {
    display: flex;
    justify-content: center;
    margin-bottom: 20px; /* Espace entre l'icône et le titre "Presque prêt" */
}

/* 🟢 NOUVEAU : Style de l'icône centrée (Taille "Juste Milieu") */
.warning-app-icon-centered {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Le grand titre (ex: Presque prêt !) */
.warning-card h3 {
    font-size: 22px; 
    font-weight: 800;
    color: #000000;
    margin-top: 0;
    margin-bottom: 12px; 
}

/* Le texte explicatif de base */
.warning-card p {
    font-size: 17px; 
    color: #1a1a1a;
    line-height: 1.4;
    margin-bottom: 15px; 
}

/* L'encadré Jaune (La consigne cruciale) */
.warning-highlight {
    background-color: rgba(252, 209, 22, 0.1);
    border-left: 4px solid var(--tertiary-color, #FCD116);
    padding: 12px; 
    border-radius: 0 10px 10px 0;
    font-size: 17px; 
    font-weight: 600;
    line-height: 1.5;
    text-align: left;
    color: #000000;
}

/* Le bouton capsule "Fermer" */
.btn-warning-close {
    display: inline-block;
    width: 100%;
    max-width: 220px;
    padding: 14px 28px; 
    margin-top: 20px; 
    
    background-color: var(--primary-color, #002F6C);
    color: var(--tertiary-color, #FCD116);
    
    border: none;
    border-radius: 50px;     /* Capsule */
    
    font-size: 17px; 
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Effet au clic (Inversion) */
.btn-warning-close:active,
.btn-warning-close:hover {
    background-color: var(--tertiary-color, #FCD116);
    border: 3px solid var(--primary-color, #002F6C);
    color: var(--primary-color, #002F6C);
    padding: 11px 25px; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@keyframes popIn {
    from { transform: scale(0.95) translateY(10px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}


/* ==========================================================================
   💻 2. LE CORRECTIF DESKTOP INDÉPENDANT (S'active uniquement sur ordinateur)
   ========================================================================== */
@media (min-width: 768px) {
    html, body {
        background-color: #FFFFFF; /* 🎨 Gère la couleur hors-limite de ton iMac */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* On applique les restrictions de taille au Maître de l'Application sur Desktop */
    #game-viewport { 
        max-width: 430px;  /* Devient une fenêtre de smartphone en largeur */
        max-height: 932px; /* Devient une fenêtre de smartphone en hauteur */
        box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.08); /* Joli ombrage */
        border-radius: 12px; /* Optionnel : arrondit légèrement les angles */
    }
}

/* =========================================================================
   🛡️ ARCHITECTURE DE GESTION DES ÉCRANS (Moteur de Navigation)
   ========================================================================= */
.screen {
    display: none;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
    overflow-y: auto;
    background-color: var(--primary-color);
}

.screen.active {
    display: flex;
    flex-direction: column;
}



/* =========================================================================
   📦 DESIGN SYSTEM GLOBAL : COMPOSANTS REUTILISABLES (UI KIT)
   ========================================================================= */

/* --- Formulaires & Inputs Adaptatifs --- */
.form-group {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.form-group label { 
    font-size: 12px; 
    text-transform: uppercase; 
    color: var(--slate); 
}
.form-group input, .form-group select, .form-group textarea {
    background: var(--input-bg);
    border: 1px solid rgba(var(--secondary-rgb), 0.2);
    color: var(--white);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    font-family: 'Urbanist', sans-serif;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}
.form-group select { cursor: pointer; }
.form-group textarea { resize: vertical; min-height: 60px; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--secondary-color); }

.form-group input[type="checkbox"],
.form-group input[type="radio"] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    margin: 0;
    cursor: pointer;
    display: inline-block;
}

/* --- Boutons Standards & Fermetures de fenêtres --- */
.btn {
    background: transparent; 
    border: 2px solid var(--secondary-color); 
    color: var(--secondary-color);
    padding: 12px 30px; 
    font-size: 18px; 
    font-weight: 700; 
    border-radius: 50px;
    cursor: pointer; 
    text-transform: uppercase; 
    transition: 0.3s; 
    width: 100%; 
    text-align: center;
}
.btn:hover { 
    background: var(--secondary-color); 
    color: var(--primary-color); 
    box-shadow: 0 0 30px rgba(var(--secondary-rgb), 0.4); 
}

/* --- Cartes Graphiques Génériques --- */
.auth-card, .leaderboard-card {
    background: var(--card-bg);
    border: 1px solid rgba(var(--secondary-rgb), 0.15);
    border-radius: 16px;
    padding: 25px;
    text-align: left;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.auth-card h3, .leaderboard-card h3 {
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    color: var(--white);
    border-bottom: 2px solid var(--secondary-color);
    padding-bottom: 6px;
    display: inline-block;
}

/* --- Système d'Information Info-bulles (Tooltips) --- */
.rank-tooltip { position: relative; display: inline-block; cursor: pointer; z-index: 99; }
.rank-pastille {
    font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 900;
    width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: transform 0.2s ease-in-out;
}
.pastille-blue-yellow { background-color: var(--primary-color); color: var(--secondary-color); border: none; }
.rank-tooltip:hover .rank-pastille { transform: scale(1.15); }

.rank-tooltip-box {
    visibility: hidden; width: 220px; background-color: var(--bg-tooltip-dark); color: #FFFFFF;
    text-align: center; border: 1px solid rgba(var(--secondary-rgb), 0.3); border-radius: 8px;
    padding: 10px 12px; font-size: 12px; line-height: 1.4; font-family: 'Urbanist', sans-serif;
    font-weight: 600; text-transform: none; letter-spacing: 0; position: absolute;
    bottom: 140%; right: 50%; transform: translateX(50%); opacity: 0;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out; pointer-events: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6); z-index: 999999;
}
.rank-tooltip-box::after {
    content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px;
    border-width: 5px; border-style: solid; border-color: var(--bg-tooltip-dark) transparent transparent transparent;
}
.rank-tooltip:hover .rank-tooltip-box { visibility: visible; opacity: 1; transform: translateX(50%) translateY(-2px); }

/* Verrous Premium Génériques (Marque Blanche Protection) */
.premium-box-locked { position: relative; overflow: hidden; transition: transform 0.2s ease-in-out; }
.premium-box-locked button, .premium-box-locked .btn { cursor: not-allowed; pointer-events: none; }
.premium-box-locked::after {
    content: var(--lock-message); /* 👈 Géré dynamiquement par le :root */
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(var(--primary-rgb), 0.98); color: #FFFFFF;
    display: flex; align-items: center; justify-content: center; text-align: center;
    padding: 20px; box-sizing: border-box; font-family: 'Poppins', sans-serif; font-weight: 700;
    font-size: 14px; line-height: 1.5; text-transform: none; letter-spacing: 0;
    opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    z-index: 10; border-radius: inherit;
}
.premium-box-locked:hover::after { opacity: 1; visibility: visible; }
.premium-box-locked:hover { transform: scale(1.02); }

/* --- Popups de vérification d'images (Modals globales) --- */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); display: flex; justify-content: center; align-items: center; z-index: 9999; opacity: 1; transition: opacity 0.3s ease; }
.modal-content-image { position: relative; width: 90%; max-width: 500px; background: transparent; }
.modal-img { width: 100%; height: auto; max-height: 80vh; object-fit: contain; border-radius: 12px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5); display: block; }
.modal-close-btn { position: absolute; top: -40px; right: 0; background: none; border: none; font-size: 35px; cursor: pointer; color: #ffffff; transition: transform 0.2s; }
.modal-close-btn:hover { transform: scale(1.2); }
.modal-overlay.hidden { display: none; opacity: 0; }


/* =========================================================================
   🏠 CONFIGURATION SPECIFIQUE : SCREEN WELCOME (ACCUEIL & ARENE)
   ========================================================================= */
#screen-welcome {
    background-image: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
    background-color: var(--secondary-color); 
}
#screen-welcome::before, #screen-welcome::after { background: transparent; background-image: none; box-shadow: none; }

/* 1️⃣ Sécurité Haut de page (Cas 1 : joueur déconnecté, évite le choc avec le hamburger) */
#game-viewport #screen-welcome {
    padding-top: 80px; 
    box-sizing: border-box;
}

/* 2️⃣ Marge de sécurité pour le scroll (Cas 2 : bloque le scroll 100px au-dessus de la pelouse) */
#game-viewport #bloc-entree-joueurs {
    scroll-margin-top: 100px; 
}

.landing-section {
    min-height: 100%; width: 100%; display: flex; flex-direction: column;
    padding: 15px 40px 40px 40px; justify-content: center; align-items: center; flex-shrink: 0; box-sizing: border-box;
}
.welcome-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; width: 100%; max-width: 920px; margin-top: 10px; }

#welcome-landing .matrice-title, #welcome-landing .by-8seconds, #welcome-landing .pitch-lead, #welcome-arena > div:first-child { 
    color: var(--primary-color); 
}
#welcome-landing .subtitle, #welcome-landing p { color: var(--text-muted-dark); }
#welcome-landing .partners-intro { color: rgba(var(--primary-rgb), 0.6); }


/* Grille de Partenaires / Écosystème Sponsoring */
.partners-container { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-top: 10px; margin-bottom: 30px; width: 100%; max-width: 1100px; }
.partners-intro { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; color: rgba(255, 255, 255, 0.4); margin-bottom: 5px; }
.partners-row { display: flex; justify-content: center; align-items: center; gap: 45px; width: 100%; flex-wrap: wrap; }
.partner-logo { height: 46px; width: auto; object-fit: contain; transition: all 0.3s ease-in-out; }
.logo-color { filter: grayscale(100%) brightness(1.6) opacity(0.75); }
.logo-color:hover { filter: grayscale(0%) brightness(1) opacity(1); transform: scale(1.04); }
.logo-dark { filter: brightness(0) invert(1) brightness(0.9) opacity(0.75); }
.logo-dark:hover { filter: brightness(0) invert(1) brightness(1) opacity(1); transform: scale(1.04); }
.logo-asm { height: 120px; width: auto; margin: 8px 0; }

#welcome-landing .partner-logo { filter: none; opacity: 0.85; height: 38px; }
#welcome-landing .partner-logo:hover { filter: none; opacity: 1; transform: scale(1.05); }

/* MARQUE BLANCHE: Utilisez la classe .logo-wide sur vos images HTML allongées pour remplacer l'ancien ciblage par nom d'image */
#welcome-landing .partner-logo.logo-wide { height: 38px; }


/* ==========================================================================
     🟨 ÉCRAN DE SAISIE DU CODE (VERSION PROPRE SANS TRICHE)
   ========================================================================== */

/* On force le fond jaune ASM sur la boîte extérieure de cet écran via l'ID */
#screen-game-code .stade-outer-box {
    background-color: var(--secondary-color, #fce303);
}

/* On nettoie la carte intérieure pour la rendre transparente sur cet écran */
#screen-game-code .stade-inner-card {
    background: transparent;
    border: none;
    box-shadow: none;
}

.game-title {
    font-size: 26px;
    font-weight: 900;
    color: #000000;
    text-align: center;
    margin-top: 10px;
    line-height: 1.2;
    text-transform: uppercase;
}

.text-navy {
    color: var(--primary-color, #002F6C);
}

.game-avatar-block {
    margin: 20px 0;
    text-align: center;
}

.game-profile-label {
    font-size: 14px;
    font-weight: 700;
    margin-top: 10px;
    text-transform: uppercase;
    color: var(--primary-color, #002F6C);
}

.code-section {
    margin: 30px 0;
    text-align: center;
}

.code-instruction {
    font-size: 16px;
    margin-bottom: 20px;
    line-height: 1.4;
    color: #000000;
}

/* Grille des 4 inputs de code */
.code-input-container {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.code-digit {
    width: 55px;
    height: 70px;
    background: #ffffff;
    border: 3px solid var(--primary-color, #002F6C);
    border-radius: 12px;
    font-size: 32px;
    font-weight: 900;
    text-align: center;
    color: var(--primary-color, #002F6C);
}

/* Nettoyage des flèches par défaut des inputs de type number */
.code-digit::-webkit-inner-spin-button,
.code-digit::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Le bouton GO hérite de la couleur primaire (Bleu) */
#screen-game-code .btn-navy {
    background-color: var(--primary-color, #002F6C);
    color: #ffffff;
    margin-top: 20px;
}

/* =========================================================================
   🎮 CONFIGURATION MOTORISÉE : SCREEN GAME (MOTEUR DE QUIZ)
   ========================================================================= */
#screen-game { 
    background-image: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%); 
    background-color: var(--secondary-color);
    overflow: hidden; 
}
#screen-game > div { position: relative; z-index: 2; }

/* 🛡️ SÉCURITÉ MARQUE BLANCHE : Filigrane de fond dynamique */
#screen-game::before {
    content: ''; position: absolute; top: -140px; right: -200px; width: 1200px; height: 1200px;            
    background-image: var(--watermark-image); /* 👈 Géré proprement par la variable du :root */
    background-size: contain; background-repeat: no-repeat; background-position: right top; opacity: 0.2; z-index: 1; pointer-events: none;      
}

/* Zone d'affichage des Questions */
#question-text {
    font-family: 'Poppins', sans-serif; font-size: 30px; font-weight: 700; line-height: 1.2; margin-bottom: 25px;
    padding-left: 25px; border-left: 10px solid var(--primary-color); min-height: 70px; display: flex; align-items: center;
}
#screen-game #question-text, #screen-game #question-text span { color: var(--primary-color); border-left-color: var(--primary-color); }
#screen-game #question-text div > div { background: rgba(var(--primary-rgb), 0.05); border-color: rgba(var(--primary-rgb), 0.15); }

/* Affichages HUD & Badges de statistiques */
.hud { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; gap: 15px; }
.badge {
    background: var(--primary-color); border: 1px solid rgba(var(--primary-rgb), 0.2); border-radius: 50px;
    font-size: 18px; font-weight: 700; text-transform: uppercase; display: flex; align-items: center; gap: 12px; color: var(--secondary-color);
}
.badge-lvl { color: var(--secondary-color); width: 160px; justify-content: center; }
.badge-timer { background: #FFFFFF; border-color: var(--primary-color); color: var(--primary-color); font-family: 'Poppins', sans-serif; font-size: 24px; width: 140px; justify-content: center; font-variant-numeric: tabular-nums; }
.badge-score { width: 180px; justify-content: center; color: var(--white); }
#ui-score { font-variant-numeric: tabular-nums; }
#ui-angle-badge { border-width: 2px; flex-grow: 1; max-width: 320px; justify-content: center; background: rgba(var(--primary-rgb), 0.08); border-color: var(--primary-color); color: var(--primary-color); }

#screen-game .hud .badge { background: var(--primary-color); color: var(--secondary-color); border: 1px solid rgba(var(--primary-rgb), 0.2); }
#screen-game .hud .badge-timer { background: #FFFFFF; color: var(--primary-color); border: 2px solid var(--primary-color); }
#screen-game #ui-angle-badge { background: #000000; border-color: var(--theme-color, var(--primary-color)); }
#screen-game #ui-angle-text { color: var(--theme-color, var(--secondary-color)); font-weight: 700; }
#screen-game #ui-angle-icon, #screen-game #ui-angle-icon i, #screen-game #ui-angle-icon svg { color: var(--theme-color, var(--secondary-color)); fill: var(--theme-color, var(--secondary-color)); }

/* Grille de Réponses (Mécanique QCM) */
#answer-grid { display: grid; gap: 12px; flex-grow: 1; width: 100%; margin-bottom: 20px; }
.grid-layout-2 { grid-template-columns: repeat(2, 1fr); }
.grid-layout-3 { grid-template-columns: repeat(3, 1fr); }
.grid-layout-4 { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.grid-layout-5, .grid-layout-6 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
.grid-layout-7, .grid-layout-8 { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); }

.answer-card {
    background: var(--primary-color); border: 2px solid var(--primary-color); border-radius: 50px; 
    display: flex; align-items: center; justify-content: center; padding: 15px; font-size: 20px; font-weight: 700; 
    text-align: center; cursor: pointer; transition: all 0.2s; 
    color: var(--secondary-color);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.1);

    /* 🚨 LA RÉPARATION CHIRURGICALE : */
    min-height: 75px;  /* Hauteur minimale idéale pour tes réponses courtes sur 1 ligne */
    height: auto;      /* Permet à la carte de s'agrandir si le texte fait 4 lignes */
}

#screen-game .answer-card { position: relative; z-index: 2; background: var(--primary-color); border: 2px solid var(--primary-color); color: var(--secondary-color); font-weight: 700; opacity: 1; box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.1); }
#screen-game .answer-card:hover { background: var(--secondary-color); color: var(--primary-color); border-color: var(--primary-color); }
#screen-game .answer-card.correct, #screen-game .answer-card.success { background: var(--emerald); border-color: var(--emerald); color: #FFFFFF; }
#screen-game .answer-card.wrong, #screen-game .answer-card.error { background: var(--red); border-color: var(--red); color: #FFFFFF; }

/* Zone Compacte Optionnelle des Réponses */
#answer-grid.compact-zone { 
    flex-grow: 0; 
    flex-basis: auto; 
    margin-bottom: 25px; 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
}

#answer-grid.compact-zone .answer-card { 
    padding: 14px 20px; 
    font-size: 16px; 
    
    /* 🚨 LA RÉPARATION DANS LA ZONE COMPACTE : */
    min-height: 55px;  /* Conserve la petite taille de base de 55px pour les textes courts */
    height: auto;      /* Autorise la carte à grandir verticalement si le texte fait 4 lignes */
}

/* =========================================================================
   ✍️ ZONE TEXTE DE LA QUESTION (Zéro !important, Haute Spécificité)
   ========================================================================= */
   #screen-game #question-text {
    display: block;
    width: 100%;
    box-sizing: border-box; /* Force le texte à rester dans le cadre */
    padding: 15px 25px; /* Écart parfait et identique pour tout le monde, sans tricher */
    margin-bottom: 20px;
    
    /* Sécurités anti-débordement */
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;

    /* Le dévoilement progressif zen */
    opacity: 0;
    transform: translateY(-15px);
    transition: opacity 0.9s ease-in-out, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 🚀 Quand la question est prête, elle s'allonge et se cale à GAUCHE */
#screen-game #question-text.reveal {
    opacity: 1;
    transform: translateY(0);
    text-align: left; 
}

/* 🟥 Sécurité centrage pour les messages hors-jeu (Fin de match, En-avant...) */
#screen-game #question-text:not(.reveal) {
    text-align: center;
}


/* Erreurs Applicatives du moteur */
.err-msg-title { font-size: 22px; color: var(--red); }
.err-msg-body { font-size: 15px; }

/* Formulaire Sélection du club */
#club-selection-form label:has(input:checked) { border-color: var(--secondary-color); background: rgba(var(--secondary-rgb), 0.08); }

/* =========================================================================
   💛 ÉCRAN DE CLÔTURE (FIN DE PARTIE) - CALIBRAGE PIXEL-PERFECT
   ========================================================================= */
   #game-viewport #screen-end.screen {
    display: none; 
    padding: 40px 20px 120px 20px; /* 🚨 SÉCURITÉ : On passe le padding du bas à 120px */
    height: 100%; 
    min-height: 100%;
    box-sizing: border-box;
    text-align: center;
    background-image: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
    background-color: var(--secondary-color); 
    position: relative; 
    
    /* 📱 SÉCURITÉ MOBILE : Si l'écran est trop petit, on本 autorise le scroll propre */
    overflow-y: auto; 
}

/* On garde le flex au cas où, mais le layout est désormais sécurisé pour les deux modes */
#game-viewport #screen-end.screen.active {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

#game-viewport #screen-end.screen::before, 
#game-viewport #screen-end.screen::after { 
    background: transparent; 
    background-image: none; 
    box-shadow: none; 
}

/* =========================================================================
   🎯 ÉLÉMENTS INTERNES : TEXTES, SCORES ET GEOMÉTRIE VARIÉE
   ========================================================================= */

/* 1️⃣ LE TITRE "MATCH TERMINÉ" (XXL et lourd) */
#game-viewport #screen-end.screen #end-title { 
    font-family: 'Poppins', sans-serif;
    font-size: 54px; 
    font-weight: 900; 
    color: var(--primary-color);
    letter-spacing: 1px; 
    line-height: 1.1; 
    margin: 0 0 6px 0; 
    text-transform: uppercase; 
}

/* 2️⃣ LA RAISON DE LA FIN ("En-avant !...") */
#game-viewport #screen-end.screen #end-reason { 
    font-family: 'Poppins', sans-serif;
    color: var(--primary-color);   
    font-size: 18px;                 
    font-weight: 800;                 
    margin: 0 0 50px 0; /* ↕️ Grande marge pour pousser le bloc score vers le centre exact */
    text-transform: uppercase;
}

/* 3️⃣ LE LABEL "NOMBRE DE POINTS" */
#game-viewport #screen-end.screen .score-label { 
    font-family: 'Poppins', sans-serif;
    font-size: 14px; 
    text-transform: uppercase; 
    letter-spacing: 1.5px; 
    font-weight: 500; /* 💡 On adoucit le gras pour laisser respirer le chiffre */                
    color: var(--primary-color);     
    margin: 0 0 2px 0; 
}

/* 4️⃣ LE GROS CHIFFRE DU SCORE (Retour au format Monumental) */
#game-viewport #screen-end.screen #ui-final-score { 
    font-size: 130px; 
    font-weight: 900; 
    color: var(--primary-color); 
    margin: 0 0 45px 0; /* ↕️ Marge pour isoler le score et pousser le résumé vers le bas */
    line-height: 1; 
}

/* 5️⃣ TEXTES ET CITATIONS INTERMÉDIAIRES (Centrés dans la zone basse) */
#game-viewport #screen-end.screen #summary-citation { 
    font-family: 'Poppins', sans-serif; 
    font-size: 18px; 
    font-weight: 800; 
    color: var(--primary-color);
    text-transform: uppercase; 
    margin: 0 0 10px 0; 
}

/* =========================================================================
   📺 ÉCRAN DE FIN - CONFIGURATION VISUELLE GLOBALE
   ========================================================================= */

/* A. LE CONTENEUR DE L'ÉCRAN : On l'active pour accueillir le filigrane */
#game-viewport #screen-end.screen {
    position: relative; 
    overflow: hidden;   
}

/* B. LE FILIGRANE GÉANT : Copie conforme de ta page Question */
#game-viewport #screen-end.screen::before {
    content: ''; 
    position: absolute; 
    top: -140px; 
    right: -200px; 
    width: 1200px; 
    height: 1200px;            
    background-image: var(--watermark-image); 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: right top; 
    opacity: 0.2; 
    z-index: 1; 
    pointer-events: none;      
}

/* 1. LE PANNEAU DE TEXTE : On ajoute la sécurité pour passer DEVANT le logo */
#game-viewport #screen-end.screen #ui-daily-summary { 
    font-family: 'Urbanist', sans-serif; 
    max-width: 650px; 
    width: 100%; 
    margin: 0 auto;
    position: relative; /* 👈 Ajout sécurité */
    z-index: 2;         /* 👈 Ajout sécurité */
}

/* 2. LES LIGNES DE TEXTE : Version 18px en gras */
#game-viewport #screen-end.screen #ui-daily-summary p { 
    font-size: 18px;             
    font-weight: 700;            
    line-height: 1.6;            
    color: var(--primary-color); 
    margin: 14px 0;              
}

/* 3. LES VALEURS NUMÉRIQUES : Poussées en ultra-gras */
#game-viewport #screen-end.screen #ui-daily-summary p strong {
    font-weight: 900; 
}

/* =========================================================================
   🚨 ÉTIQUETTES ALERTE ROUGE (Façon "Sens Interdit" / Look Athlétique)
   ========================================================================= */
   #game-viewport #screen-end.screen .unverified-badge {
    display: block;
    width: 100%;
    max-width: 320px;          
    margin: 12px auto;         
    padding: 12px 20px;
    
    background-color: #D90429; /* Rouge alerte pur */
    color: #FFFFFF;            
    border: none;              /* ❌ Filet rouge foncé supprimé ! */
    border-radius: 14px;       
    
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 900;          
    letter-spacing: 1px;
    text-transform: uppercase;
    box-sizing: border-box;
    box-shadow: none; 
}


/* 6️⃣ LE BOUTON MASTER : Cloué chirurgicalement au sol */
#game-viewport #screen-end.screen .btn-primary-outline { 
    position: absolute;
    bottom: 50px; /* À 50px du bas de ton cadre de jeu */
    left: 50%;
    transform: translateX(-50%); /* Centrage horizontal parfait */
    width: 100%;
    max-width: 300px; 
    margin: 0;
}

/* Fond semi-transparent spécifique à l'alerte */
.custom-alert-bg {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    display: flex; justify-content: center; align-items: center;
    z-index: 10000;
}

/* 🔐 Masquage propre grâce à la double classe */
.custom-alert-bg.hidden {
    display: none;
}

/* La boîte d'alerte rouge (Look Athlétique "Endgame") */
.custom-alert-box {
    background-color: #D90429; /* Ton rouge alerte pur */
    color: #FFFFFF;            
    border: none;              
    border-radius: 14px;       
    padding: 25px 30px; 
    max-width: 360px; 
    width: 85%;
    text-align: center; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}

#custom-alert-message {
    color: #FFFFFF; 
    font-size: 16px;
    font-weight: 700; /* Épais et visible, juste au-dessus des lignes */
    line-height: 1.5; 
    margin-bottom: 22px;
    letter-spacing: 0.5px;
}

/* Le bouton OK style "badge inversé" */
#custom-alert-btn {
    background: #FFFFFF; 
    color: #D90429; 
    font-weight: 900;
    text-transform: uppercase;
    border: none; 
    padding: 10px 35px; 
    font-size: 14px;
    border-radius: 8px; 
    cursor: pointer; 
    transition: transform 0.1s;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 1px;
}
#custom-alert-btn:active { transform: scale(0.95); }


/* 🏆 ÉCRAN DE FIN : Style général du pavé d'avertissement */
#endgame-verification-block {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    box-sizing: border-box;
}

.endgame-verification-wrapper {
    width: 100%;
    box-sizing: border-box;
}

.endgame-verification-text {
    font-family: 'Urbanist', sans-serif;
    font-size: 18px; 
    font-weight: 700; 
    color: var(--primary-color); 
    margin: 0 0 20px 0; 
    line-height: 1.5;
    text-align: center;
}



/* =========================================================================
   💻 CONFIGURATION DESKTOP : L'ÉCRIN RECADRÉ (Écrans larges >= 1024px)
   ========================================================================= */
   @media (min-width: 1024px) {
    body {
        background-color: #ffffff;
        display: flex; justify-content: center; align-items: center;
    }
    #game-viewport {
        width: 95%; max-width: 1150px; height: 90vh; max-height: 850px; min-height: 620px;
        border-radius: 20px; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15); overflow: hidden; 
    }
    .screen { padding: 30px; }
}

/* =========================================================================
   🖥️ AJUSTEMENTS ADDITIONNELS POUR ECRANS DE BUREAU LARGE (>= 992px)
   ========================================================================= */
@media (min-width: 992px) {
    .err-msg-title { font-size: 38px; }
    .err-msg-body { font-size: 20px; }

    #question-text {
        min-height: 165px; display: flex; align-items: center; justify-content: center;
        margin-bottom: 30px; font-size: 30px; transition: font-size 0.15s ease;
    }
    #question-text.small-question { font-size: 22px; line-height: 1.3; }

    /* 🔓 DEBUT DE LA ZONE LIBÉRÉE DES VERROUS */
    #answer-grid.compact-zone {
        display: flex; 
        flex-direction: row; 
        justify-content: center; 
        gap: 20px; 
        margin-bottom: 50px; 
        max-height: none;     /* 🔓 Fait sauter le plafond des 75px */
        align-items: stretch; /* 🤝 Force les boutons voisins à s'aligner sur le plus grand */
    }
    #answer-grid.compact-zone .answer-card {
        flex: 1; 
        max-width: 290px; 
        font-size: 17px; 
        padding: 10px 15px; 
        border-radius: 50px;
        min-height: 65px;     /* Garde la jolie taille de base */
        height: auto;         /* 🔓 S'étire vers le bas si le texte fait 4 lignes */
        display: flex;        /* Centrage du texte si la carte devient grande */
        align-items: center;
        justify-content: center;
    }
    /* 🔓 FIN DE LA ZONE MODIFIÉE */

    /* 🏠 LES STYLES DE L'ACCUEIL REVIENNENT À LA MAISON ICI : */
    #welcome-arena .arena-column-title {
        font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 700;
        text-transform: uppercase; letter-spacing: 1px; color: var(--primary-color);
        text-align: center; width: 100%;
    }
    #welcome-landing .partners-container { gap: 45px; }
    #welcome-landing .partner-logo { opacity: 0.6; height: 30px; transition: all 0.2s ease-in-out; }
    #welcome-landing .partner-logo:hover { opacity: 1; transform: scale(1.05); }
}

/* =========================================================================
   💛 MODULE GLOBAL PARCOURS STADE - TOUT NOTRE TRAVAIL REGROUPÉ
   ========================================================================= */

/* --- 1. LE CONTENEUR ET L'ARRIÈRE-PLAN DE PROD (Halo radial) --- */
#screen-welcome::before,
#screen-welcome::after {
    content: none;
    display: none;
    background: transparent;
    background-image: none;
    box-shadow: none;
}

#game-viewport #screen-welcome.screen {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: 20px;       
    padding-bottom: 100px;   
    box-sizing: border-box;
    background-image: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
    background-color: var(--secondary-color);
    overflow-y: auto;
    overscroll-behavior-y: contain; 
    -webkit-overflow-scrolling: touch; 
}

/* --- 2. SÉCURITÉ TYPOGRAPHIQUE (Bleu ASM brut) --- */
#screen-welcome,
#screen-welcome h1,
#screen-welcome h2,
#screen-welcome h3,
#screen-welcome p,
#screen-welcome label,
#screen-welcome span {
    color: var(--primary-color);
}

/* --- 3. ÉLÉMENTS DE L'EN-TÊTE DE MARQUE CENTRÉS --- */
.brand-container-local {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    text-align: center;
}

.matrice-title-local {
    font-family: 'Poppins', sans-serif;
    font-size: 34px;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    margin: 0;
}

.subtitle-local {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 8px;
    font-weight: 700;
}

.pitch-lead-local {
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
    margin: 25px 0 10px 0;
}

/* 🎯 Logo Top 14 calé proprement juste en dessous */
html body #game-viewport #screen-welcome .pitch-lead-local img.top14-inline-fixed {
    height: 35px;          /* S'aligne sur les 24px de ton titre */
    width: auto;           /* Conserve les proportions */
    max-width: none;       /* Annule les blocages */
    display: inline-block; /* Reste sur la même ligne */
    vertical-align: middle;/* Aligne horizontalement avec les lettres */
    margin-left: 8px;      /* Donne de l'air entre le texte et le logo */
}

.hub-description {
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
    max-width: 600px;
    margin: 0 auto 25px auto;
    font-weight: 600;
}

/* --- 4. LES CARTES EN VOILE BLANC TRANSLUCIDE --- */

/* ==========================================================================
   🧼 NETTOYAGE CHIRURGICAL (Sans effet grenade)
   ========================================================================== */

/* On rend transparent UNIQUEMENT les deux enveloppes de texte intermédiaires,
   sans toucher aux badges, aux tiroirs ou à la boîte intérieure. */
   .stade-inner-card > #onboarding-step-start,
   #onboarding-step-start > #step-install {
       background: transparent;
       background-color: transparent;
       box-shadow: none;
       border: none;
   }
   
   
   /* ==========================================================================
   📦 LE SYSTÈME DOUBLE BOÎTE ÉTAPE 1 (CONTRÔLE & OPACITÉ AJUSTÉE)
   ========================================================================== */

/* 1. LA BOÎTE EXTÉRIEURE (Élargie vers les bords de l'écran - Version propre) */
.stade-outer-box {
    background-color: rgba(255, 255, 255, 0.22); 
    border: none; 
    border-radius: 20px;
    margin: 10px 12px; 
    width: calc(100% - 24px); 
    padding: 14px; 
    box-sizing: border-box;
}

/* 2. LA BOÎTE INTÉRIEURE (Version propre) */
.stade-inner-card {
    background-color: rgba(255, 255, 255, 0.45); 
    border: none;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); 
    width: 100%; 
    padding: 12px 10px; 
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Sécurité globale des boîtes */
.stade-outer-box *,
.stade-inner-card * {
    box-sizing: border-box;
}
   
   /* ==========================================================================
      📦 LA CARTE BLANCHE CLASSIQUE (Conservée pour l'Étape 2 / Hub de jeu)
      ========================================================================== */
   .stade-action-card {
       background-color: #FFFFFF;
       border-radius: 14px;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
       margin: 8px auto; 
       width: calc(100% - 16px); 
       padding: 16px 12px; 
       display: flex;
       flex-direction: column;
       align-items: center;
       position: relative;
       box-sizing: border-box;
   }
   
   .stade-action-card * {
       box-sizing: border-box;
   }
   
   /* ==========================================================================
      🔌 L'ACCORDÉON
      ========================================================================== */
   .accordion-stack {
       width: 100%;
       margin-top: 12px;
       display: flex;
       flex-direction: column;
       gap: 8px;
       box-sizing: border-box;
   }
   
   /* ==========================================================================
   🎯 TEXTES & TITRES COMPACTS (MIS À JOUR ÉTAPE 2)
   ========================================================================== */

/* Le gros titre extérieur "PRÉPARE-TOI À JOUER..." */
#screen-onboarding-profile .main-onboarding-header {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    margin: 15px 0 10px 0; /* Marges très faibles pour serrer le bloc vers le haut */
    color: var(--primary-color, #002F6C);
}

/* Les titres à l'INTÉRIEUR de la double boîte (ex: "Saisis un pseudo !") */
#screen-onboarding-profile .stade-inner-card .onboarding-title {
    font-family: 'Poppins', sans-serif;
    font-size: 24px; 
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    margin: 5px 0 12px 0; 
    color: var(--primary-color, #002F6C);
}

#screen-onboarding-profile .stade-instruction {
    font-size: 15px; 
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 15px;
    text-align: center;
    color: var(--primary-color, #002F6C);
}

#display-player-pseudo {
    text-transform: uppercase;
    font-weight: 900;
    color: inherit;
}

/* Pastille numérique (Parfaitement centrée) */
.step-number-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    box-sizing: border-box;
    background-color: var(--tertiary-color, #FCD116); 
    border: 3px solid var(--primary-color, #002F6C);  
    color: var(--primary-color, #002F6C);             
    font-size: 22px;
    font-weight: 900;
    border-radius: 50%;
    margin: 5px auto 10px auto; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
   
   /* ==========================================================================
      🍏 ANCHORS & ICONS
      ========================================================================== */
   .onboarding-install-box {
       display: flex;
       align-items: center;
       gap: 15px;
       background: rgba(255, 255, 255, 0.7);
       border-radius: 12px;
       padding: 14px;
       margin-bottom: 15px;
       box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
   }
   
   .onboarding-install-box .install-icon {
       font-size: 32px;
       line-height: 1;
       flex-shrink: 0;
   }
   
   .onboarding-install-box .install-text {
       font-size: 13px;
       line-height: 1.5;
       color: var(--primary-color);
   }
   
   .ios-share-icon {
       display: inline-block;
       width: 18px;
       height: 18px;
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath fill='%23007AFF' d='M30 15v-5H20v5h-2v-7h14v7z'/%3E%3Cpath fill='%23007AFF' d='M24 3v30h2V3z'/%3E%3Cpath fill='%23007AFF' d='M20 8l5-5 5 5-1.4 1.4L25 5.8l-3.6 3.6z'/%3E%3Crect x='10' y='18' width='30' height='26' rx='5' fill='none' stroke='%23007AFF' stroke-width='4'/%3E%3C/svg%3E");
       background-size: contain;
       background-repeat: no-repeat;
       vertical-align: middle;
       margin: 0 4px;
   }
   
   .ios-add-icon {
       display: inline-block;
       font-size: 11px;
       background: #e5e5ea;
       border-radius: 4px;
       padding: 1px 5px;
       color: #000;
       font-weight: 900;
       vertical-align: middle;
   }
   
   .android-menu-icon {
       display: inline-block;
       font-weight: 900;
       font-size: 16px;
       color: #5f6368;
       background: #f1f3f4;
       border-radius: 50%;
       width: 20px;
       height: 20px;
       line-height: 18px;
       text-align: center;
       vertical-align: middle;
       margin: 0 4px;
       border: 1px solid #dadce0;
   }
   
   /* Frise chronologique */
   .onboarding-steps-timeline {
       list-style: none;
       padding: 0;
       margin: 10px 0;
       display: flex;
       flex-direction: column;
       gap: 12px;
   }
   
   .onboarding-steps-timeline li {
       display: flex;
       align-items: center;
       gap: 12px;
       font-size: 14px;
       line-height: 1.3;
       color: var(--primary-color);
   }
   
   .onboarding-steps-timeline .timeline-num {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 24px;
       height: 24px;
       background: var(--primary-color);
       color: var(--secondary-color);
       border-radius: 50%;
       font-size: 13px;
       font-weight: 900;
       flex-shrink: 0;
   }

/* --- Légende de la barre de menu basse --- */
.onboarding-menu-guide {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    color: var(--primary-color);
    line-height: 1.4;
    background: rgba(255, 255, 255, 0.4);
    padding: 10px 14px;
    border-radius: 10px;
}

/* --- 5. FORMULAIRES & BOUTONS D'ACTION INTERNES --- */
#screen-welcome .stade-form-group {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrage horizontal des champs */
    gap: 10px;           /* Espace régulier entre le pseudo et le mot de passe */
    width: 100%;
    margin-bottom: 5px;
}

#screen-welcome .stade-form-group input {
    background: #FFFFFF;
    border: none; 
    box-shadow: none;
    outline: none;
    color: #000000; 
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 16px;
    
    /* 🎯 Modif : Largeur bloquée à 50% max du pavé et centrée */
    width: 100%;
    max-width: 50%; 
    text-align: center; 
    
    /* 🎯 Modif : Texte interne maigre (300) et en italique */
    font-weight: 300; 
    font-style: italic; 
    box-sizing: border-box;
}

/* Boutons Call To Action Centrés (Taille du texte + 20px de chaque côté) */
.btn-stade-primary {
    background: var(--primary-color);
    color: var(--secondary-color);  
    border: 2px solid transparent; 
    padding: 14px 20px; 
    font-size: 15px;
    font-weight: 900;
    text-transform: uppercase;
    border-radius: 50px;
    
    width: auto;
    display: block;
    margin: 20px auto 0 auto; 
    
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-stade-primary:hover,
.btn-stade-primary:active {
    background: var(--secondary-color);
    border-color: var(--primary-color);
    color: var(--primary-color);
}



/* --- 7. LA BARRE DE NAVIGATION BASSE (Format Master Desktop) --- */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 430px; 
    height: 75px; 
    background: var(--primary-color); 
    border-top: 3px solid var(--secondary-color); 
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
    z-index: 9999;
    
    /* 🎯 Ajout : Un peu de jeu pour créer le cadre autour des touches */
    padding: 6px; 
}

.bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    cursor: pointer;
    color: #FFFFFF;
    opacity: 0.5;
    transition: all 0.2s ease;

    /* Optimisation de la taille du texte pour 4 boutons */
.bottom-nav .nav-icon {
    font-size: 20px; /* Taille d'émoji idéale */
    margin-bottom: 2px;
}

.bottom-nav .nav-label {
    font-size: 11px; /* 📈 Légèrement réduit pour que "Paramètres" tienne sur une ligne */
    font-weight: 700;
    text-align: center;
    white-space: nowrap; /* Empêche le texte de se couper en deux */
}

    /* 🎯 Le secret de l'effet gravé en touches indépendantes : */
    margin: 0 4px;                  /* Sépare les 3 boutons */
    border-radius: 12px;            /* Arrondit les angles des touches */
    background: rgba(0, 30, 70, 0.4); /* Fond de touche plus sombre que la barre */
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.5); /* Ombre interne pour l'effet "creux" */
}

/* État de la touche active (Enfoncée / Allumée) */
.bottom-nav .nav-item.active {
    color: var(--secondary-color);
    opacity: 1;
    background: rgba(0, 20, 50, 0.6);
    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.6);
}

/* =========================================================================
   📱 INTEGRATION MOBILE CRITIQUE & COHÉRENCE RESPONSIVE (<= 768px)
   ========================================================================= */
@media (max-width: 768px) {
    html, body { overflow: hidden; overflow-x: hidden; height: 100%; width: 100%; max-width: 100%; }
    #game-viewport { height: 100dvh; max-height: 100dvh; border: none; box-shadow: none; overflow: hidden; }
    .screen { padding: 25px 30px; height: 100%; }
    
    /* Zone de sécurité basse pour mobile */
    .screen { padding-bottom: 100px; }
    
    #screen-welcome { padding: 0; }
    .landing-section { padding: 10px 15px 20px 15px; display: block; overflow-y: auto; text-align: center; }
    
    h1 { font-size: 42px; margin-top: 10px; }
    .subtitle { font-size: 11px; letter-spacing: 3px; margin-bottom: 15px; }
    .pitch-lead { font-size: 22px; }
    
    .program-container { padding: 20px 15px; text-align: left; }
    .program-item-title { font-size: 16px; }
    .program-item-desc { font-size: 14px; }
    
    .welcome-grid { grid-template-columns: 1fr; gap: 15px; text-align: left; }
    
    #screen-transition h2 { font-size: 44px; }
    #screen-transition p { font-size: 18px; }
    #trans-spec { font-size: 13px; white-space: nowrap; text-align: center; }
    #trans-right-image { display: block; height: 120px; max-height: 120px; margin-bottom: 10px; } 
    
    .hud { gap: 6px; margin-bottom: 15px; flex-grow: 0; flex-shrink: 0; }
    .badge { padding: 6px 10px; font-size: 11px; width: auto; flex: 1; justify-content: center; border-radius: 10px; }
    .badge-timer { font-size: 16px; flex: 0 0 90px; width: 90px; font-variant-numeric: tabular-nums; font-family: monospace; text-align: center; }
    
    #question-text { 
        font-size: 17px; 
        text-align: center; 
        margin-bottom: 20px; 
        line-height: 1.3; 
        flex-grow: 0; 
        flex-shrink: 0; 
        padding-left: 0; 
        border-left: none; 
        border-bottom: none; 
        padding-bottom: 8px; 
        color: var(--primary-color);
        height: 120px; 
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #quiz-image { max-height: 150px; }

    #quiz-image[src=""], 
    #quiz-image:not([src]) {
        display: none !important;
    }
    
    #answer-grid { gap: 10px; width: 100%; margin-top: 5px; flex-grow: 0; flex-shrink: 0; }
    .answer-card { 
        height: auto; min-height: 48px; padding: 12px 15px; font-size: 15px; flex: none; box-sizing: border-box; 
        outline: none; -webkit-tap-highlight-color: transparent; background: var(--primary-color); color: var(--secondary-color); border: 2px solid var(--primary-color); font-weight: 700;
    }
    
    .grid-layout-3, .grid-layout-2 { grid-template-columns: 1fr; }
    .grid-layout-4, .grid-layout-5, .grid-layout-6, .grid-layout-7, .grid-layout-8 { grid-template-columns: repeat(2, 1fr); }
    
    /* Rigole de sécurité mobile pour nos pavés */
    #screen-welcome .stade-action-card {
        margin: 0 15px 20px 15px; 
    }

    /* La barre prend toute la largeur sur pur mobile */
    .bottom-nav {
        max-width: 100%;
        position: fixed;
        padding-bottom: env(safe-area-inset-bottom); 
        height: calc(70px + env(safe-area-inset-bottom));
    }
}

/* =========================================================================
   🛠️ BLOC CORRECTIFS ÉCRAN FIN & DÉFAITE
   ========================================================================= */
@media (max-width: 768px) {
    #endgame-verification-block {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;    
        justify-content: center;
        margin: 15px auto;
        padding: 0;
    }
    #endgame-verification-block .endgame-verification-wrapper {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 24px;        
    }
    #endgame-verification-block .endgame-verification-text {
        font-size: 14px;
        line-height: 1.4;
        text-align: center;
        margin: 0 0 15px 0;
    }

    #screen-game #question-text.defeat-zone {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;             
        padding: 5px 10px;    
        height: 120px;
        box-sizing: border-box;
    }
    #screen-game #question-text.defeat-zone .loss-title {
        font-size: 52px;      
        font-weight: 800;
        margin: 0;            
        padding: 0;           
        line-height: 1.2;
        text-align: center;
        color: #dc3545;
    }
    #screen-game #question-text.defeat-zone .loss-subtitle {
        font-size: 18px;      
        margin: 0;            
        padding: 0;
        line-height: 1.3;
        text-align: center;
    }
}

/* =========================================================================
   🎯 SÉCURITÉ PORTRAIT OBLIGATOIRE (Détecteur de paysage)
   ========================================================================= */
.orientation-lock {
    display: none; 
}

@media (orientation: landscape) and (max-height: 550px) {
    html body .orientation-lock {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: var(--primary-color); 
        z-index: 100000; 
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        padding: 30px;
    }
    .lock-content {
        text-align: center;
        max-width: 500px;
    }
    .orientation-lock h2 {
        font-family: 'Poppins', sans-serif;
        font-size: 24px;
        font-weight: 900;
        color: var(--secondary-color); 
        margin: 0 0 10px 0;
        letter-spacing: 0.5px;
    }
    .orientation-lock p {
        font-size: 15px;
        font-weight: 600;
        color: #FFFFFF; 
        line-height: 1.4;
        margin: 0 0 20px 0;
    }
    .lock-icon {
        font-size: 40px;
        animation: rotateDevice 2s infinite ease-in-out;
    }
}

@keyframes rotateDevice {
    0% { transform: rotate(90deg); }
    50% { transform: rotate(0deg); }
    100% { transform: rotate(90deg); }
}

/* =========================================================================
   📱 COMPORTEMENT HOVER ET CEINTURES DERNIER RECOURS
   ========================================================================= */
@media (max-width: 768px) and (hover: hover) {
    .answer-card:hover { 
        border-color: var(--primary-color); 
        background: var(--secondary-color); 
        color: var(--primary-color); 
    }
}

#answer-grid.grid-force-vertical {
    grid-template-columns: 1fr;
}

/* ==========================================================================
   🦖 DOMPTEUR DE LOGOS (Sain, fluide et sans raccourci)
   ========================================================================== */

/* En associant le conteneur parent (#splash, #loading...) et la balise img,
   on obtient une excellente spécificité naturelle. */
   #splash img,
   #loading img,
   .splash-screen img,
   .loading-screen img,
   .splash-logo,
   .loading-logo {
       max-width: 180px; /* 👈 Limite physique saine */
       width: 100%;
       height: auto;
       margin: 0 auto;
       display: block;
       object-fit: contain;
   }

   /* ==========================================================================
   🎯 CADRAGE DES NOUVELLES ICÔNES SVG DANS LA BARRE DU BAS
   ========================================================================== */

/* On cible précisément l'image avec sa classe dans la bottom-nav */
.bottom-nav .nav-icon {
    width: 24px;          /* 📐 Largeur idéale pour le pouce sur mobile */
    height: 24px;         /* 📐 Hauteur carrée parfaite */
    display: block;
    margin: 0 auto 4px auto; /* Centre l'icône et crée un petit espace avec le texte */
    object-fit: contain;  /* S'assure que le SVG ne soit jamais déformé */
}

/* ==========================================================================
   🎨 COLORISATION ET DYNAMISME DES ICÔNES DE LA BARRE DU BAS
   ========================================================================== */

/* ⚪ 1. ÉTAT AU REPOS (Icône blanche)
   On applique ce style par défaut à toutes les icônes de la barre.
   L'astuce : "brightness(0)" rend l'image 100% noire (sécurité), 
   puis "invert(1)" inverse le noir en blanc pur (#FFFFFF). */
   .bottom-nav .nav-item .nav-icon {
    width: 24px;
    height: 24px;
    display: block;
    margin: 0 auto 4px auto;
    object-fit: contain;
    
    /* ✨ La magie du blanc propre et net */
    filter: brightness(0) invert(1);
    
    /* Petit effet de transition fluide pour le changement de couleur */
    transition: filter 0.2s ease-in-out; 
}

/* 🟡 2. ÉTAT ACTIF (Jaune ASM #FCD116)
   Quand le JavaScript ajoute la classe ".active" sur le "nav-item",
   on applique une formule mathématique de filtres qui transforme le noir d'origine
   en ton jaune officiel de la Yellow Army. */
.bottom-nav .nav-item.active .nav-icon {
    /* ✨ La formule magique pour obtenir le Jaune ASM exact à partir du noir */
    filter: invert(80%) sepia(75%) saturate(2000%) hue-rotate(345deg) brightness(100%) contrast(101%);
}

/* ==========================================================================
   🍎 ICÔNES INLINE DU TIROIR IPHONE (GRIS FONCÉ 70%)
   ========================================================================== */

/* On cible précisément la nouvelle classe de nos images dans la liste */
.instructions-list .ios-inline-icon {
    height: 18px;          /* 📐 Hauteur idéale pour s'intégrer dans la ligne de texte */
    width: auto;
    display: inline-block;
    vertical-align: middle; /* 🎯 Alignement vertical parfait sur la ligne du texte */
    margin-left: 6px;      /* Petit espace de respiration après le mot en gras */
    margin-right: 2px;
    object-fit: contain;

    /* ✨ La formule magique pour le Gris Foncé (Noir 70% / #4D4D4D) :
       Puisque tes SVG sont noirs d'origine (0%), on demande au navigateur 
       d'inverser la couleur à hauteur de 30% vers le blanc. */
    filter: invert(30%);
}

/* ==========================================================================
   🏉 ÉTAPE 2 : TOUT LE CODE DU PROFIL (GROUPÉ, SÉCURISÉ & ALIGNÉ)
   ========================================================================== */


/* 📍 ZONE 1 : LE RESET DE L'ÉCRAN (Pour éliminer le vide géant)
   -------------------------------------------------------------------------- */
   #screen-onboarding-profile {
    display: block;    /* 🎯 Coupe l'élastique flexbox de la marque blanche */
    height: auto;      /* 🎯 Supprime la hauteur forcée de 100% de l'iMac */
    min-height: 0;     /* Sécurité anti-étirement */
    padding: 10px 0;   /* Une légère marge interne propre en haut/bas */
}


/* 📍 ZONE 2 : LA DOUBLE BOÎTE TRANSPARENTE (Copie conforme de l'Étape 1)
   -------------------------------------------------------------------------- */
.stade-outer-box-step2 {
    background-color: rgba(255, 255, 255, 0.22); /* Même transparence que l'étape 1 */
    border-radius: 20px;
    margin: 10px auto; /* Centrage automatique parfait à gauche et à droite */
    width: calc(100% - 24px); 
    max-width: 450px; 
    padding: 14px; 
    box-sizing: border-box;
}

.stade-inner-card-step2 {
    background-color: rgba(255, 255, 255, 0.45); /* Même fond intérieur que l'étape 1 */
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); 
    width: 100%; 
    padding: 12px 10px; 
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* ==========================================================================
   📍 ZONE 3 : LE FORMULAIRE (STRUCTURE + VOS TEXTES HARMONISÉS)
   ========================================================================== */

/* Conteneur général du formulaire */
.profile-form {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}

/* Bloc vertical pour chaque champ (Label + Input) */
.form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 12px;
}

/* 🎯 Intitulés des champs : MON PSEUDO / MOT DE PASSE (Plus gros et ultra Bold) */
.form-group label {
    font-size: 15px;
    font-weight: 900; /* Gras maximal demandé */
    color: var(--primary-color, #002F6C);
    text-transform: uppercase;
    margin-bottom: 6px;
    letter-spacing: 0.6px;
    display: block;
    width: 100%;
}

/* 🎯 Le texte "(facultatif)" calqué sur le bleu et la taille des présentations */
.label-optional {
    color: var(--primary-color, #002F6C); 
    font-size: 14px; 
    font-weight: 500;
    text-transform: none; /* Reste en minuscules */
    margin-left: 4px;
}

/* 🎯 Textes de présentation et explicatifs harmonisés (Bleu club) */
.onboarding-field-instruction, 
.form-helper-text {
    font-size: 14px; 
    line-height: 1.4;
    color: var(--primary-color, #002F6C); 
    margin-top: 4px;
    margin-bottom: 10px;
    text-align: left;
    font-weight: 500;
}

/* Alignement horizontal du champ pseudo et de son bouton vérifier */
.input-with-button {
    display: flex;
    width: 100%;
    gap: 8px;
}

/* Le rectangle blanc de saisie (Pseudo et Mot de passe) */
.form-group input {
    display: block;
    width: 100%;
    height: 48px; /* Hauteur tactile idéale */
    background-color: #FFFFFF;
    color: #2D3748;
    border: 2px solid #CBD5E0;
    border-radius: 10px;
    padding: 0 14px;
    font-size: 15px;
    font-weight: 600;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

/* Quand le joueur clique dans un champ (Filet bleu ASM, pas de halo jaune) */
.form-group input:focus {
    border-color: var(--primary-color, #002F6C);
    box-shadow: none;
}

/* 🎯 Les textes d'exemples dans les champs (Gris clair et Italique) */
.form-group input::placeholder {
    color: #A0AEC0 !important; /* Gris clair propre */
    font-style: italic;        /* Italique demandée */
    font-weight: 500;
}

/* Messages d'erreur ou de succès sous le pseudo */
.form-feedback {
    font-size: 12px;
    font-weight: 700;
    margin-top: 6px;
}
.form-feedback.success { color: #2F855A; } /* Vert si libre */
.form-feedback.error { color: #C53030; }   /* Rouge si déjà pris */


/* ==========================================================================
   🎯 ZONE 4 : LES BOUTONS D'ACTION (VÉRIFIER & VALIDER) - VERSION CORRIGÉE
   ========================================================================== */

/* A. Le petit bouton bleu "Vérifier" à côté du pseudo */
.btn-check-pseudo {
    height: 48px;
    padding: 0 18px;
    background-color: var(--primary-color, #002F6C);
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.btn-check-pseudo:hover {
    background-color: #001f47;
}


/* 🔵 B. LE BOUTON PRINCIPAL DE CONFIRMATION UNIFIÉ (Étape 1 & Étape 2)
   -------------------------------------------------------------------------- */

/* ÉTAT AU REPOS : Fond Bleu, texte Jaune (Avec les grandes dimensions d'origine) */
.btn-confirmation-onboarding {
    width: 100%;
    padding: 18px 24px;                               
    background-color: var(--primary-color, #002F6C);  /* 🔵 Fond Bleu ASM */
    color: var(--secondary-color, #FCD116);           /* 🟡 Texte Jaune ASM */
    
    /* Contour bleu invisible au repos pour éviter que le bouton ne saute au survol */
    border: 3px solid var(--primary-color, #002F6C);  
    box-sizing: border-box; 
    
    border-radius: 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;                                  
    font-weight: 850;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ÉTAT SURVOL & CLIC (ACTIF) : Fond Jaune, contour Bleu, texte Bleu */
.btn-confirmation-onboarding:hover {
    background-color: var(--secondary-color, #FCD116); /* 🟡 Fond Jaune ASM */
    border-color: var(--primary-color, #002F6C);       /* 🔵 Contour Bleu ASM */
    color: var(--primary-color, #002F6C);              /* 🔵 Texte Bleu ASM */
    transform: translateY(-2px);                       
    box-shadow: 0 6px 16px rgba(252, 209, 22, 0.3);
}

/* ÉTAT ENFONCÉ (Le clic physique) */
.btn-confirmation-onboarding:active {
    background-color: var(--secondary-color, #FCD116);
    border-color: var(--primary-color, #002F6C);
    color: var(--primary-color, #002F6C);
    transform: translateY(1px);                        
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}


/* ==========================================================================
   調整 ZONE 5 : LA GRILLE DE PROFILS (BOUTONS INTERACTIFS FERRÉS À GAUCHE)
   ========================================================================== */
   .profile-badge-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

/* Style d'une tuile au repos */
.btn-profile-badge {
    background: #FFFFFF;
    border: 2px solid transparent; 
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    
    /* 🎯 FERRÉ À GAUCHE */
    justify-content: flex-start; 
    text-align: left;            
    
    gap: 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color, #002F6C);
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
    width: 100%;
}

/* 🎯 ÉTAT "CHOISI" : Fond Jaune, contour Bleu, texte Bleu (Idem boutons action) */
.btn-profile-badge.selected {
    background: var(--secondary-color, #FCD116); /* Fond Jaune ASM */
    border-color: var(--primary-color, #002F6C);   /* Contour Bleu ASM */
    color: var(--primary-color, #002F6C);          /* Texte Bleu ASM */
}

/* Les ronds noirs/verts (Lettres blanches obligatoires) 
   L'ID #screen-onboarding-profile donne le poids nécessaire pour se passer du !important */
   #screen-onboarding-profile .btn-profile-badge .badge-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 15px; 
    font-weight: 900;
    
    /* 🎯 LETTRES BLANCHES NATURELLES */
    color: #FFFFFF; 
    
    flex-shrink: 0;
}

.badge-black { background-color: #000000; }
.badge-green { background-color: #28a745; }


/* 🏉 Version Clean & Colorée : Le Hub aux couleurs de l'ASM */
body #screen-hub.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    
    background: #f4f6f9; /* Fond gris clair/off-white */
    color: #002f6c;      /* 🔵 Force le texte général en bleu marine ASM */
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
}

/* On force le titre et le sous-titre à être bien visibles */
body #screen-hub .hub-header h2 {
    color: #002f6c;
    margin-bottom: 5px;
}
body #screen-hub .hub-subtitle {
    color: #555555; /* Gris foncé pour le sous-titre */
}

/* Sécurisation du texte des boutons d'action */
body #screen-hub .btn-hub-action {
    background: #ffffff;
    border: 2px solid #002f6c;
    color: #002f6c; /* Texte du bouton en bleu */
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    width: 100%;
    max-width: 400px;
    cursor: pointer;
}

body #screen-hub .btn-text span {
    color: #666666; /* Petit texte descriptif sous les boutons en gris */
}

/* ==========================================
   🏉 HUB PRINCIPAL - CADRAGE ET STRUCTURATION
   ========================================== */

/* 1. Le conteneur principal (Ajusté en mode sandwich) */
html body div#screen-hub {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    
    /* 🌟 COMPROMIS DE CHOC : Plus haut que les pastilles, mais plus bas que la bottom bar */
    z-index: 10; 
    
    background-image: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
    background-color: var(--secondary-color); 
    padding: 24px 16px 80px 16px; 
    box-sizing: border-box;
    overflow-y: auto;
}

/* Structure des blocs (Welcome, Match, Rules) */
html body div#screen-hub .hub-welcome-box,
html body div#screen-hub .hub-match-card,
html body div#screen-hub .hub-rules-section {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto 20px auto; /* Centre le bloc lui-même et crée l'espace en bas */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
    text-align: left; /* Le contenu des cartes reste aligné à gauche pour la lecture */
}

/* 👥 LE HUBLOT : Le conteneur qui sert de masque circulaire */
html body div#screen-hub .hub-avatar-centered-container {
    display: block;
    width: 200px;
    height: 200px;
    margin: 20px auto 25px auto; /* Centré dans la page, espace en bas */
    
    border: 16px solid var(--primary-color); /* Le gros contour bleu marine de ton exemple */
    border-radius: 50%; /* Découpe un cercle parfait */
    
    /* 🌟 LE SECRET INDISPENSABLE */
    overflow: hidden; /* Devient un masque : tout ce qui dépasse du cercle est invisible */
    
    position: relative;
    box-sizing: border-box;
    background-color: #ffffff; /* Fond blanc de sécurité */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* Légère ombre douce sous le cercle */
}

/* 👥 1. LE HUBLOT (Le conteneur qui fait le masque circulaire) */
html body div#screen-hub .hub-avatar-centered-container {
    display: block;
    width: 200px;
    height: 200px;
    margin: 20px auto 25px auto;
    
    /* Ta configuration validée à 16px */
    border: 16px solid var(--primary-color); 
    border-radius: 50%;
    overflow: hidden; 
    
    position: relative;
    box-sizing: border-box;
    background-color: #ffffff; /* Fond blanc qui meuble pendant le chargement */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* 📸 2. LA PHOTO (À l'intérieur, zoomée et sécurisée contre le flash) */
html body div#screen-hub #display-hub-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    
    /* 🚀 TES RÉGLAGES PILE-POIL (Préservés à 100%) */
    transform: scale(1.20); 
    transform-origin: center center; 
    
    /* 🌟 L'ANTI-FLASH INTELLIGENT */
    /* La photo démarre invisible dans le hublot blanc et apparaît en fondu */
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
}

/* =========================================================================
   📊 BLOC INFOS VARIABLES (Compact, ferré à gauche & anti-centrage global)
   ========================================================================= */

/* On force le bloc et TOUS ses enfants directs à s'aligner à gauche quoi qu'il arrive */
html body div#screen-hub .hub-player-profile-block,
html body div#screen-hub .hub-player-profile-block strong,
html body div#screen-hub .hub-player-profile-block span {
    text-align: left !important; /* Le voilà le seul important de secours contre l'app parent ! */
}

/* 2. Le nouveau bloc des infos Firestore (Pseudo, Profil, Match...) */
html body div#screen-hub .hub-player-profile-block {
    display: block;
    width: 100%;
    max-width: 400px;
    margin: 15px auto 20px auto; /* Centre le bloc sur l'écran */
    text-align: left;            /* Mais écrit le texte à gauche */
    font-size: 14px;
    line-height: 1.45;
    box-sizing: border-box;
    color: var(--primary-color); /* Écrit en Bleu Marine */
}

/* 3. Le nouveau bloc pour le rappel "Souviens-toi..." */
html body div#screen-hub .hub-reminder-block {
    display: block;
    width: 100%;
    max-width: 400px;
    margin: 0 auto 20px auto; /* Aligné sur le bloc du dessus */
    text-align: left;
    font-size: 13px;
    line-height: 1.4;
    box-sizing: border-box;
    color: var(--primary-color); /* Écrit en Bleu Marine */
}

/* 4. Le séparateur discret */
html body div#screen-hub .hub-divider {
    border: 0;
    height: 1px;
    background: var(--primary-color);
    opacity: 0.15;
    max-width: 400px;
    margin: 20px auto;
}

/* Section Règles */
html body div#screen-hub .hub-rules-section h3 {
    font-size: 16px;
    font-weight: 800;
    color: #002F6C;
    margin: 0 0 4px 0;
    text-align: center;
}
html body div#screen-hub .hub-rules-subtitle {
    font-size: 13px;
    font-weight: 700;
    color: #B7791F;
    margin: 0 0 16px 0;
    text-align: center;
}
html body div#screen-hub .hub-rules-section p {
    font-size: 14px;
    line-height: 1.6;
    color: #2D3748;
    margin: 0 0 12px 0;
}

/* Focus sur le fonctionnement des clics */
html body div#screen-hub .hub-gameplay-box {
    background: #F7FAFC;
    border-left: 4px solid #002F6C;
    padding: 12px;
    margin: 16px 0;
    border-radius: 0 8px 8px 0;
}
html body div#screen-hub .hub-gameplay-box p {
    font-size: 13px;
    margin: 0 0 8px 0;
}
html body div#screen-hub .hub-gameplay-box p:last-child {
    margin: 0;
}

/* Bouton d'action et bas de page */
html body div#screen-hub .hub-footer-call {
    max-width: 400px;
    margin: 24px auto 0 auto;
    padding-bottom: 40px; /* Espace pour respirer sur mobile */
    touch-action: pan-y;  /* Force le scroll vertical */
    
    /* 🚀 LES DEUX LIGNES MAGIQUES ANTI-LAG IOS : */
    transform: translateZ(0); 
    will-change: transform;
}
html body div#screen-hub .hub-footer-call h3 {
    font-size: 18px;
    font-weight: 900;
    margin: 0 0 16px 0;
}
html body div#screen-hub .btn-hub-start {
    background: #002F6C;
    color: #ffffff;
    border: none;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 16px 24px;
    border-radius: 30px;
    width: 100%;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 47, 108, 0.2);
    transition: transform 0.1s ease;
}
html body div#screen-hub .btn-hub-start:active {
    transform: scale(0.98);
}


/* =========================================================================
   💛 HARMONISATION DIRECTE (SANS TOUCHER À L'INDEX.HTML)
   ========================================================================= */

/* 1. Le fond Jaune ASM et le Halo blanc pour les DEUX écrans */
#game-viewport #screen-welcome,
#game-viewport #screen-welcome-profile {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: 20px;       
    padding-bottom: 100px;   
    box-sizing: border-box;
    background-image: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
    background-color: var(--secondary-color); /* Force le Jaune ASM */
    overflow-y: auto;
    overscroll-behavior-y: contain; 
    -webkit-overflow-scrolling: touch; 
}

/* 🔒 SÉCURITÉ ACCUEIL : La page 2 attend le signal du routeur pour s'ouvrir */
#game-viewport #screen-welcome-profile {
    display: none;
}

/* 💛 LE COMPLÉMENT MAGIQUE : On l'allume dès que le routeur lui donne la classe active */
#game-viewport #screen-welcome-profile.active {
    display: flex;
}

/* 2. Tout le texte passe en Bleu Marine ASM sur les deux écrans */
#game-viewport #screen-welcome,
#game-viewport #screen-welcome h1,
#game-viewport #screen-welcome h2,
#game-viewport #screen-welcome h3,
#game-viewport #screen-welcome p,
#game-viewport #screen-welcome label,
#game-viewport #screen-welcome span,
#game-viewport #screen-welcome-profile,
#game-viewport #screen-welcome-profile h1,
#game-viewport #screen-welcome-profile h2,
#game-viewport #screen-welcome-profile h3,
#game-viewport #screen-welcome-profile p,
#game-viewport #screen-welcome-profile label,
#game-viewport #screen-welcome-profile span {
    color: var(--primary-color);
}

/* 3. Les 3 grands titres de saisie du profil : Plus gros et Ultra-Bold */
#game-viewport #screen-welcome-profile .form-group label {
    font-size: 17px;
    font-weight: 900; 
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 0.6px;
}

/* 4. Les Boutons de choix (Jaunard...) : Imposants, ferrés à gauche et sans halo */
#game-viewport #screen-welcome-profile .btn-profile-badge {
    background-color: #FFFFFF;
    border: 2px solid transparent; 
    border-radius: 12px;
    padding: 16px 20px; /* Volume généreux au doigt */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Ferré à gauche */
    text-align: left;            
    gap: 14px;
    font-size: 17px; 
    font-weight: 800; 
    color: var(--primary-color);
    width: 100%;
    cursor: pointer;
    outline: none; /* Supprime le halo du navigateur */
    box-shadow: none;
    transition: all 0.2s ease-in-out;
}

/* État de la tuile sélectionnée : Bleu ASM */
#game-viewport #screen-welcome-profile .btn-profile-badge.selected {
    background-color: var(--primary-color); 
    color: var(--secondary-color);   
}

/* 5. Les Pastilles de profil : Rondes, épurées, bleues et sans texte */
#game-viewport #screen-welcome-profile .btn-profile-badge .badge-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%; /* Cercle parfait */
    background-color: var(--primary-color); 
    color: transparent; /* Cache la lettre interne */
    font-size: 0;       /* Neutralise l'espace de la lettre */
    flex-shrink: 0;
}

/* La pastille devient jaune quand la tuile est sélectionnée */
#game-viewport #screen-welcome-profile .btn-profile-badge.selected .badge-dot {
    background-color: var(--secondary-color);
}

/* =========================================================================
   ⚡ CORRECTIF LOGO TOP 14 EXCLUSIF PAGE 2 (RÉDUCTION DE TAILLE)
   ========================================================================= */
   #game-viewport #screen-welcome-profile .top14-inline-fixed {
    height: 35px; /* Reduit le logo pour qu'il tienne sur la ligne de texte sans 'tout écraser' */
    width: auto;
    vertical-align: middle;
    display: inline-block;
    margin-left: 8px; /* Un peu de respiration avec le texte à gauche */
}



/* =========================================================================
   📦 ZONE 2 : OPTIMISATION LARGEUR DES BOÎTES (ÉTAPE 2)
   ========================================================================= */
   #game-viewport .stade-outer-box-step2 {
    background-color: rgba(255, 255, 255, 0.22);
    border-radius: 20px;
    margin: 10px auto;
    
    /* 🔄 ÉLARGISSEMENT : On passe à 16px de vide global (au lieu de 24px) */
    width: calc(100% - 16px); 
    max-width: 450px; 
    
    /* 📉 COMPACTAGE : On passe de 14px à 10px pour donner de l'air aux boutons */
    padding: 10px; 
    box-sizing: border-box;
}

#game-viewport .stade-inner-card-step2 {
    background-color: rgba(255, 255, 255, 0.45);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); 
    width: 100%; 
    
    /* 📉 COMPACTAGE : On réduit à 8px sur les côtés pour gagner de précieux pixels */
    padding: 12px 8px; 
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* =========================================================================
   🎛️ ZONE 5 : LA GRILLE DE PROFILS ET BOUTONS COMPACTÉS
   ========================================================================= */
#game-viewport .profile-badge-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 8px; /* 📉 On gratte 2px sur l'espace entre les boutons */
    width: 100%;
    box-sizing: border-box;
}

#game-viewport #screen-welcome-profile .btn-profile-badge {
    background-color: #FFFFFF;
    border: 2px solid transparent; 
    border-radius: 12px;
    
    /* 📉 LE SAUVEUR : Marges intérieures optimisées (12px haut/bas, 10px gauche/droite) */
    padding: 12px 10px; 
    
    display: flex;
    align-items: center;
    justify-content: flex-start; 
    text-align: left;            
    
    /* 📉 On rapproche la pastille du texte */
    gap: 8px; 
    
    /* 📉 Sécurité typo pour que les longs mots (Mini-Jaunarde) ne cassent pas la boîte */
    font-size: 15px; 
    font-weight: 800; 
    color: var(--primary-color);
    width: 100%;
    cursor: pointer;
    outline: none; 
    box-shadow: none;
    transition: all 0.2s ease-in-out;
    box-sizing: border-box;
}
/* =========================================================================
   📦 ZONE 2 : ÉLARGISSEMENT MAXIMAL DES BOX (ÉTAPE 2)
   ========================================================================= */
   #game-viewport .stade-outer-box-step2 {
    background-color: rgba(255, 255, 255, 0.80);
    border-radius: 20px;
    margin: 12px auto;
    
    /* 🚀 Largeur optimale : laisse juste 8 petits pixels de sécurité de chaque côté */
    width: calc(100% - 16px); 
    max-width: 100%; 
    
    padding: 10px; 
    box-sizing: border-box;
}

#game-viewport .stade-inner-card-step2 {
    background-color: rgba(255, 255, 255, 0.00);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); 
    width: 100%; 
    
    /* On redonne du confort à l'intérieur maintenant qu'on a de la place */
    padding: 16px 12px; 
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* =========================================================================
   🎛️ ZONE 5 : BOUTONS LARGEUR MAX + CONTRASTE JAUNE (SÉLECTIONNÉ)
   ========================================================================= */
#game-viewport .profile-badge-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
}

/* ÉTAT AU REPOS : Bouton Blanc, Texte Bleu ASM */
#game-viewport #screen-welcome-profile .btn-profile-badge {
    background-color: #FFFFFF;
    border: 2px solid transparent; 
    border-radius: 12px;
    padding: 14px 10px; 
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Ferré à gauche */
    text-align: left;            
    gap: 8px; 
    font-size: 15px; 
    font-weight: 800; 
    color: var(--primary-color); /* Texte Bleu Marine */
    width: 100%;
    cursor: pointer;
    outline: none; 
    box-shadow: none;
    transition: all 0.15s ease-in-out;
    box-sizing: border-box;
}

/* 🎯 ÉTAT SÉLECTIONNÉ : Le bouton devient Jaune 100%, le texte et le contour passent au Bleu ASM */
#game-viewport #screen-welcome-profile .btn-profile-badge.selected {
    background-color: var(--tertiary-color); /* 💛 Jaune ASM 100% */
    color: var(--primary-color);             /* 💙 Le texte reste Bleu Marine (Super contraste !) */
    border-color: var(--primary-color);       /* Un fin liseré bleu pour asseoir le bouton */
}

/* 🔵 LA PASTILLE SIGNATURE : Reste Bleue ASM au repos COMME en état sélectionné */
#game-viewport #screen-welcome-profile .btn-profile-badge .badge-dot,
#game-viewport #screen-welcome-profile .btn-profile-badge.selected .badge-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%; 
    background-color: var(--primary-color); /* 🔵 Toujours Bleue ASM */
    color: transparent; 
    font-size: 0;       
    flex-shrink: 0;
}
/* =========================================================================
   💥 DESTRUCTION DE LA CEINTURE INVISIBLE (LIBÈRE LES BORDS DE L'ÉCRAN)
   ========================================================================= */
   #game-viewport #screen-welcome-profile {
    /* On supprime les 30px de marge forcés sur les côtés par ton CSS global */
    padding-left: 0;
    padding-right: 0;
}
/* =========================================================================
   📦 AJUSTEMENT DE L'OPACITÉ DES BOX (CIBLE TOUTES LES CLASSES)
   ========================================================================= */
   #screen-welcome-profile .stade-outer-box,
   #screen-welcome-profile .stade-outer-box-step2 {
       /* Valeur de test extrême à modifier : 0.0 pour invisible, 0.8 pour très blanc */
       background-color: rgba(255, 255, 255, 0.32); 
   }
   
   #screen-welcome-profile .stade-inner-card,
   #screen-welcome-profile .stade-inner-card-step2 {
       /* Valeur de test extrême à modifier : 0.0 pour invisible, 0.8 pour très blanc */
       background-color: rgba(255, 255, 255, 0.15); 
   }
   /* =========================================================================
   🎨 FOND JAUNE SOUTENU (ON ASSOMBRE LE PROJECTEUR BLANC)
   ========================================================================= */
#game-viewport #screen-welcome-profile {
    /* Au repos on avait 0.8 et 0.4. En passant à 0.4 et 0.1, le blanc s'estompe et le jaune explose ! */
    background-image: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 100%);
    background-color: var(--secondary-color); 
}

/* =========================================================================
   🧵 MASTER MODULE : STEPPERS UNIFIÉS (ÉTAPES 1, 2 & FUTURES)
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. LE SQUELETTE GÉOMÉTRIQUE (Commun à tous les steppers)
   ------------------------------------------------------------------------- */

/* Le conteneur Flexbox horizontal */
.stepper-container, 
.stepper-p2 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    padding: 0 32px;
    margin: 15px 0 25px 0;
    width: 100%;
    box-sizing: border-box;
}

/* Le filet de liaison en arrière-plan */
.stepper-container::before, 
.stepper-p2::before {
    content: '';
    position: absolute;
    top: 18px; 
    left: 55px;
    right: 55px;
    height: 3px;
    background-color: var(--primary-color);
    z-index: 1; 
}

/* L'alignement vertical de chaque bloc (Rond + Texte) */
.step-item, 
.step-item-p2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2; 
    flex: 1;
}

/* Le rond parfait de base */
.step-circle, 
.circle-p2 {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 900;
    transition: all 0.25s ease-in-out;
}

/* Le texte descriptif sous le rond */
.step-label, 
.label-p2 {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    transition: all 0.25s ease-in-out;
}


/* -------------------------------------------------------------------------
   2. LE THÈME DE COULEURS AU REPOS (Style Bleu ASM par défaut)
   ------------------------------------------------------------------------- */
.step-circle, 
.circle-p2 {
    background-color: var(--primary-color); 
    border: 3px solid var(--primary-color);  
    color: var(--tertiary-color);            
}

.step-label, 
.label-p2 {
    color: rgba(0, 47, 108, 0.5); /* Magnifique bleu marine estompé à 50% */
}


/* -------------------------------------------------------------------------
   3. LE RETOUR VISUEL DE L'ÉTAPE ACTIVE (L'allumage Jaune ASM)
   ------------------------------------------------------------------------- */

/* Grossissement et bascule de couleur du rond actif */
.step-item.active .step-circle,
.step-item-p2.active .circle-p2 {
    background-color: var(--tertiary-color); 
    border-color: var(--primary-color);  
    color: var(--primary-color);              
    transform: scale(1.1); 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Le texte actif passe en mode Ultra-Bold et Bleu Marine lisible */
.step-item.active .step-label,
.step-item-p2.active .label-p2 {
    color: var(--primary-color);            
    font-weight: 800;          
}

/* ==========================================================================
   💛 NETTOYAGE ET HARMONISATION SAAS (VERSION PROPRE SANS IMPORTANT)
   ========================================================================== */

/* Force le fond jaune et le texte bleu marine par défaut via la spécificité */
html body #game-viewport {
    background-color: var(--secondary-color);
    background: var(--secondary-color);
    background-image: none;
    color: var(--primary-color);
}

/* Caché par défaut au tout premier chargement */
html body #game-viewport #screen-welcome-profile {
    display: none;
}

/* S'ouvre proprement en flexbox jaune au signal du routeur */
html body #game-viewport #screen-welcome-profile.active {
    display: flex;
}

/* Les petits textes de conseils en Bleu Marine ASM */
html body #game-viewport #screen-welcome-profile .form-group p.onboarding-field-instruction,
html body #game-viewport #screen-welcome-profile .form-group p.form-helper-text {
    color: var(--primary-color);
}