/* ========================================================= */
/* 1. RESET ET FOCUS (Accessibilité)                         */
/* ========================================================= */

a:focus:not(:focus-visible), 
button:focus:not(:focus-visible), 
input:focus:not(:focus-visible), 
select:focus:not(:focus-visible), 
textarea:focus:not(:focus-visible), 
[tabindex]:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

a:focus-visible, 
button:focus-visible, 
input:focus-visible, 
select:focus-visible, 
textarea:focus-visible, 
[tabindex]:focus-visible {
    outline: 2px solid var(--cyan-VA) !important; 
    outline-offset: 2px !important; 
}


/* ========================================================= */
/* 2. STRUCTURE GLOBALE ET EN-TÊTE DU PROFIL                 */
/* ========================================================= */

.va2-profil-wrap {
    max-width: 800px; margin: 100px auto !important; position: relative !important;
}

.va2-profil-top {
    display: flex; align-items: center; gap: 24px; background: var(--noir-VA) !important; 
    border: 1px solid var(--gris-border) !important; border-radius: 12px; padding: 30px; margin-bottom: 24px; box-shadow: 0 4px 15px var(--shadow-30) !important;
}

.va2-profil-avatar-wrap { position: relative; flex-shrink: 0; }

#va2-avatar-img {
    width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid var(--cyan-VA) !important; box-shadow: 0 4px 10px var(--shadow-10); padding: 3px !important;
}

.va2-profil-info { flex: 1; }
.va2-profil-username { font-size: 1.8em; font-weight: 700; color: var(--blanc-texte); margin: 0 0 10px; }
.va2-profil-meta { display: flex; flex-direction: column; gap: 8px; font-size: 0.95em; color: var(--gris-texte) !important; }


/* ========================================================= */
/* 3. NAVIGATION (Onglets du Profil)                         */
/* ========================================================= */

.va2-profil-tabs {
    position: relative; display: flex; gap: 4px; margin-bottom: 20px; background-color: var(--noir-VA) !important; 
    padding: 8px; border-radius: 10px; border: 1px solid var(--gris-border) !important; box-shadow: 0 2px 8px var(--shadow-30) !important;
}

.va2-profil-tab {
    flex: 1; display: flex; justify-content: center; align-items: center; padding: 10px 15px; font-size: 1em; font-weight: 600 !important; color: var(--blanc-texte) !important;           
    cursor: pointer; transition: all 0.3s ease; white-space: nowrap; border-radius: 8px;
    background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: none !important; outline: none !important;
}

.va2-profil-tab span { position: relative; z-index: 2; }

.va2-profil-tab:hover, .va2-profil-tab:focus, .va2-profil-tab:focus-visible { 
    color: var(--cyan-VA) !important; background: transparent !important; box-shadow: none !important; outline: none !important;
}

.va2-profil-tab.active { color: var(--cyan-VA) !important; font-weight: 700 !important; background: transparent !important; }

.va2-profil-panel        { display: none; }
.va2-profil-panel.active { display: block; }


/* ========================================================= */
/* 4. MODE LECTURE (Détails du Profil)                       */
/* ========================================================= */

.va2-profil-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.va2-profil-section-card {
    background: var(--noir-VA) !important; border: 1px solid var(--gris-border); border-radius: 10px; padding: 16px 20px; box-shadow: 0 2px 8px var(--shadow-30) !important;
}

.va2-section-label { font-size: 0.8em; font-weight: 700; color: var(--gris-texte) !important; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.va2-section-value { font-size: 1em; color: var(--blanc-texte); font-weight: 500; line-height: 1.6; }
.va2-empty { text-align: center; color: var(--gris-texte); padding: 40px 0; font-style: italic; }


/* ========================================================= */
/* 5. MODE ÉDITION (Formulaire)                              */
/* ========================================================= */

.va2-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.va2-form-group { display: flex; flex-direction: column; gap: 6px; }
.va2-form-group label { font-size: 0.85em !important; font-weight: 600 !important; color: var(--gris-texte) !important; }

.va2-form-group input, .va2-form-group textarea, .va2-form-group select { 
    padding: 9px 12px; border: 1px solid var(--border-no-shadow) !important; border-radius: 8px !important; font-size: 0.95em;
    outline: none; transition: border-color 0.2s; font-family: inherit; background-color: var(--noir-VA) !important; color: var(--blanc-texte) !important; cursor: text;
}

.va2-form-group input:focus, .va2-form-group textarea:focus, .va2-form-group select:focus {
    border-color: var(--cyan-VA) !important; box-shadow: 0 0 5px var(--cyan-rgba-30) !important; 
}

/* Sélecteurs avec Recherche */
.va2-dropdown-selector { position: relative; }

.va2-dropdown-display {
    padding: 9px 12px; border: 1px solid var(--border-no-shadow); border-radius: 8px; font-size: 0.95em; cursor: pointer; 
    background: var(--noir-VA); user-select: none; transition: border-color 0.2s;
}

.va2-dropdown-display:hover { border-color: var(--cyan-VA); }
.va2-dropdown-display.open  { border-color: var(--cyan-VA); border-radius: 8px 8px 0 0; }

.va2-dropdown-dropdown {
    display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--noir-VA); border: 1px solid var(--border-no-shadow); border-top: none; border-radius: 0 0 8px 8px; z-index: 100; box-shadow: 0 4px 12px var(--shadow-10);
}

.va2-dropdown-dropdown.open { display: block; }

.va2-dropdown-search { width: 100%; padding: 8px 12px; border: none; border-bottom: 1px solid var(--border-no-shadow); font-size: 0.9em; outline: none; box-sizing: border-box; }
.va2-dropdown-list { list-style: none; margin: 0; padding: 0; max-height: 200px; overflow-y: auto; }
.va2-dropdown-item { padding: 8px 12px; font-size: 0.9em; cursor: pointer; transition: background 0.15s; }
.va2-dropdown-item:hover    { background: var(--noir-VA); }
.va2-dropdown-item.selected { background: var(--noir-VA); font-weight: 600; }

/* Sélection AVATAR */
.va2-avatar-label { cursor: pointer; display: inline-block; transition: transform 0.2s ease; }
.va2-avatar-label:hover { transform: scale(1.05); }

.va2-avatar-preview {
    width: 80px !important; height: 80px !important; border-radius: 50% !important; object-fit: cover !important; border: 3px solid transparent !important; 
    box-shadow: 0 2px 5px var(--shadow-10) !important; overflow: hidden !important; background-color: var(--noir-VA) !important; 
}

.va2-avatar-radio:checked + .va2-avatar-preview { border-color: var(--cyan-VA) !important; box-shadow: 0 0 10px var(--cyan-rgba-40) !important; }
.va2-avatar-google { display: flex !important; align-items: center !important; justify-content: center !important; font-weight: bold !important; font-size: 20px !important; letter-spacing: -0.5px !important; color: var(--gris-texte) !important; }


/* ========================================================= */
/* 6. TABLEAUX (Prédictions & Classement Général)            */
/* ========================================================= */

.va2-pronos-list { width: 100%; border-collapse: collapse; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px var(--shadow-30) !important; background-color: var(--noir-VA) !important; }

.va2-pronos-list thead { background: var(--cyan-VA) !important; color: var(--blanc-texte) !important; }
.va2-pronos-list thead th { padding: 12px 16px; font-size: 1em; font-weight: 700; text-align: center; border: none !important; }
.va2-pronos-list thead th:first-child { text-align: left; }

.va2-pronos-list tbody tr { border-bottom: 1px solid var(--gris-border) !important; transition: background 0.15s; background: transparent !important; }
.va2-pronos-list tbody tr:hover { background: var(--black-rgba-05) !important; }

.va2-pronos-list tbody td { padding: 12px 16px; font-size: 0.95em; color: var(--blanc-texte) !important; vertical-align: middle !important; text-align: center; border: none !important; }
.va2-pronos-list tbody td:first-child { text-align: left; color: var(--gris-texte) !important; font-weight: 500; }

.va2-vs-label {
    font-size: 0.5em; text-transform: uppercase; background: var(--gris-border); color: var(--gris-moyen); padding: 2px 5px; border-radius: 4px; font-weight: 800; letter-spacing: 0.5px;
    display: inline-block !important; vertical-align: middle !important; margin: 0 5px !important; transform: translateY(-2px) !important; 
}

.va2-badge-exact { background: var(--or-rgba-10) !important; color: var(--profil-classement) !important; border: 1px solid var(--profil-classement) !important; }
.va2-badge-good  { background: var(--vert-rgba-10) !important; color: var(--vert-positif) !important; border: 1px solid var(--vert-positif) !important; }
.va2-badge-bad   { background: var(--rouge-rgba-10) !important; color: var(--rouge-erreur) !important; border: 1px solid var(--rouge-erreur) !important; }
.va2-badge-exact, .va2-badge-good, .va2-badge-bad { padding: 4px 10px !important; border-radius: 6px !important; font-weight: 700 !important; font-size: 0.9em !important; display: inline-block; text-align: center; }

.va2-pts-wait { color: var(--gris-texte) !important; }

table.va2-pronos-list tbody tr td:first-child img.emoji, table.va2-pronos-list tbody tr td:first-child img.wp-smiley { 
    width: 26px !important; height: 26px !important; min-width: 26px !important; min-height: 26px !important; max-width: 26px !important; max-height: 26px !important; display: inline-block !important; vertical-align: middle !important; margin-top: -4px !important; 
}

/* En-tête Classement et Recherche */
.va2-ranking-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid var(--gris-border) !important; }
.va2-ranking-section-title { margin: 0; font-size: 0.95em !important; font-weight: 600; color: var(--gris-texte) !important; text-transform: uppercase; }

.va2-profil-wrap #va2-ranking-search {
    padding: 8px 12px 8px 32px !important; border: 1px solid var(--gris-fonce) !important; border-radius: 6px; font-size: 0.9em; width: 220px; transition: all 0.3s ease; background-color: var(--noir-VA) !important; color: var(--blanc-texte) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: 10px center; 
}
#va2-ranking-search:focus { border-color: var(--cyan-VA) !important; outline: none !important; box-shadow: 0 0 0 2px var(--cyan-rgba-30) !important; }

table.va2-pronos-list tbody tr.va2-row-highlight { background-color: var(--or-rgba-15) !important; }
table.va2-pronos-list tbody tr.va2-row-highlight td { font-weight: 700 !important; color: var(--blanc-texte) !important; }
table.va2-pronos-list tbody tr.va2-row-highlight td:first-child { border-left: 4px solid var(--profil-classement) !important; }
table.va2-pronos-list tbody tr.va2-row-highlight td a { color: var(--profil-classement) !important; text-shadow: 0 0 10px var(--or-rgba-25) !important; }


/* ========================================================= */
/* 7. PAGINATION                                             */
/* ========================================================= */

.va2-pagination { display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: 15px; }

.va2-page-btn {
    background: var(--noir-VA) !important; border: 1px solid var(--gris-fonce) !important; color: var(--blanc-texte) !important; padding: 6px 12px;
    border-radius: 6px; font-size: 0.9em; font-weight: 600; cursor: pointer; transition: all 0.2s; box-shadow: none !important; outline: none !important;
}

.va2-page-btn:hover:not(:disabled) { background: var(--gris-border) !important; border-color: var(--cyan-VA) !important; color: var(--cyan-VA) !important; }
.va2-page-btn.active { background: var(--cyan-VA) !important; border-color: var(--cyan-VA) !important; color: var(--blanc-texte) !important; }
.va2-page-btn:disabled { opacity: 0.5; cursor: not-allowed; background: var(--noir-VA) !important; color: var(--gris-desactive) !important; border-color: var(--gris-border) !important; }
.va2-page-dots { color: var(--gris-texte) !important; padding: 0 5px; font-weight: bold; }


/* ========================================================= */
/* 8. BOUTONS & MESSAGES (Alertes, Actions)                  */
/* ========================================================= */

.va2-form-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 8px; }

.va2-edit-btn { 
    position: absolute; top: 30px; right: 30px; transition: all 0.2s ease; outline: none !important; border: 1px solid var(--bleu-menu); 
}
.va2-edit-btn:hover, .va2-edit-btn:focus, .va2-edit-btn:active {
    color: var(--bleu-menu) !important; transform: translateY(-2px); outline: none !important; box-shadow: none !important;
}

.va2-btn-save {
    background: var(--cyan-VA) !important; color: var(--blanc-texte) !important; border: 1px solid var(--bleu-menu) !important;
    padding: 10px 24px !important; border-radius: 8px !important; font-size: 0.95em !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.2s !important;
}
.va2-btn-save:hover { background: var(--cyan-VA) !important; color: var(--bleu-menu) !important; transform: translateY(-2px); box-shadow: 0 2px 8px var(--cyan-rgba-40); }

.va2-btn-cancel {
    background: none !important; border: 1px solid var(--gris-bordure-claire) !important; color: var(--gris-moyen) !important; padding: 10px 24px !important;
    border-radius: 8px !important; font-size: 0.95em !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.2s !important;
}
.va2-btn-cancel:hover, .va2-btn-cancel:focus, .va2-btn-cancel:active { border-color: var(--cancel-button) !important; color: var(--cancel-button) !important; box-shadow: 0 0 10px var(--rouge-rgba-30) !important; outline: none !important; }

#va2-delete-account-btn {
    background: transparent !important; border: 1px solid var(--gris-bordure-claire) !important; color: var(--gris-moyen) !important; padding: 10px 24px !important;
    border-radius: 8px !important; font-size: 0.95em !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.2s !important; box-shadow: none !important; outline: none !important;
}
#va2-delete-account-btn:hover, #va2-delete-account-btn:focus, #va2-delete-account-btn:active {
    border-color: var(--cancel-button) !important; color: var(--cancel-button) !important; background: transparent !important; box-shadow: 0 0 15px var(--rouge-rgba-40) !important; outline: none !important;    
}

.va2-hub-message { text-align: center; padding: 10px; border-radius: 8px; margin-bottom: 12px; font-weight: 600; display: none; }
.va2-hub-message.success { background: var(--vert-rgba-10) !important; color: var(--vert-positif) !important; border: 1px solid var(--vert-positif) !important; }
.va2-hub-message.error   { background: var(--rouge-rgba-10) !important; color: var(--cancel-button) !important; border: 1px solid var(--cancel-button) !important; }


/* ========================================================= */
/* 9. MODALES (Bienvenue, CGU, Login Google)                 */
/* ========================================================= */

.va2-modal, .va2-modal-overlay {
    display: none; position: fixed !important; z-index: 9999999 !important; left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; height: 100% !important; background-color: var(--black-rgba-80) !important; backdrop-filter: blur(5px); overflow-y: auto !important;
}

#va2-terms-modal, #va2-rules-modal { z-index: 99999999 !important; }

.va2-modal { align-items: center; justify-content: center; } 
.va2-modal-overlay { transition: opacity 0.3s ease; opacity: 0; align-items: center; justify-content: center; } 
.va2-modal-overlay.open { display: flex; opacity: 1; }

.va2-modal-content, .va2-modal-box { background-color: var(--noir-VA) !important; color: var(--blanc-texte) !important; border: 1px solid var(--noir-border) !important; border-radius: 12px; position: relative; box-shadow: 0 10px 40px var(--shadow-50) !important; }
.va2-modal-content { margin: 5vh auto !important; padding: 30px; width: 90% !important; max-width: 800px !important; overflow: visible !important; animation: modalFadeIn 0.3s ease; }
.va2-modal-box { width: 90%; max-width: 400px; padding: 30px; transform: translateY(20px); transition: transform 0.3s ease; text-align: center; }
.va2-modal-overlay.open .va2-modal-box { transform: translateY(0); }
.va2-modal-body { max-height: 70vh; overflow-y: auto; padding-right: 10px; }

#va2-terms-modal .va2-modal-box p, #va2-terms-modal .va2-modal-box li, #va2-terms-modal .va2-modal-box div, #va2-terms-modal .va2-modal-box strong { color: var(--blanc-texte) !important; }

.va2-modal h2, .va2-modal-box h2 { margin-top: 0; color: var(--cyan-VA) !important; border-bottom-color: var(--cyan-VA) !important; }
.va2-modal h2 { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid var(--gris-border) !important; }
#va2-terms-modal .va2-modal-box h3 { color: var(--cyan-VA) !important; }
.va2-modal p, .va2-modal li { font-size: 0.95em; line-height: 1.6; }
.va2-modal ul { margin-bottom: 15px; padding-left: 20px; }

.va2-modal-close { position: absolute; top: 20px; right: 25px; color: var(--blanc-texte) !important; font-size: 28px; font-weight: bold; cursor: pointer; transition: color 0.2s; line-height: 1; }
.va2-modal-close:hover, .va2-modal-close:focus { color: var(--cyan-VA) !important; text-decoration: none; }

#va2-close-welcome-btn { transition: all 0.3s !important; }
#va2-close-welcome-btn:not(:disabled):hover { color: var(--bleu-menu) !important; filter: brightness(1.1); }

@keyframes modalFadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }

/* Bouton Google */
div.nsl-container { display: flex !important; justify-content: center !important; width: 100% !important; }
div.nsl-container .nsl-button-google { background-color: var(--google-btn) !important; border-radius: 50px !important; box-shadow: 0 4px 15px var(--google-rgba-40) !important; border: none !important; padding: 8px 24px !important; margin: 0 !important; transition: all 0.3s ease !important; width: fit-content !important; min-width: 250px !important; }
div.nsl-container .nsl-button-google:hover { background-color: var(--google-btn-hover) !important; transform: translateY(-2px) !important; box-shadow: 0 3px 10px var(--google-rgba-60) !important; }
div.nsl-container .nsl-button-google .nsl-button-label-container { color: var(--blanc-pur) !important; font-weight: 700 !important; font-size: 16px !important; font-family: inherit !important; text-align: center !important; margin-left: 10px !important; }
div.nsl-container .nsl-button-google svg { filter: brightness(0) invert(1) !important; width: 20px !important; height: 20px !important; }


/* ========================================================= */
/* 10. AVATAR D'EN-TÊTE (Shortcode [va2_avatar])             */
/* ========================================================= */

.va2-profile-avatar, .va2-profile-icon {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 45px !important; height: 45px !important; border-radius: 50%; padding: 3px !important; 
    border: 3px solid var(--cyan-VA) !important; box-sizing: border-box !important; vertical-align: middle;
    transition: transform 0.2s, background-color 0.2s; background-color: transparent !important;
}

.va2-profile-avatar:hover { transform: scale(1.05); }
.va2-profile-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; border-radius: 50% !important; margin: 0 !important; padding: 0 !important; }

.va2-profile-icon { background-color: var(--noir-VA) !important; color: var(--gris-icone); background-clip: content-box !important; }
.va2-profile-icon:hover { background-color: var(--noir-VA) !important; color: var(--bleu-menu); transform: scale(1.05); }
.va2-profile-icon svg { margin: 0 !important; display: block !important; }


/* ========================================================= */
/* 11. FORCER LE MENU (HEADER) À RESTER AU-DESSUS DU SITE    */
/* ========================================================= */

header, 
.site-header, 
.elementor-location-header, 
[data-elementor-type="header"] {
    position: relative !important;
    z-index: 999 !important;
}

/* ========================================================= */
/* 12. RESPONSIVE DESIGN (Mobiles et Tablettes)              */
/* ========================================================= */

@media (max-width: 1000px) {

    /* ========================================================= */
    /* 1. STRUCTURE GLOBALE & LAYOUT                             */
    /* ========================================================= */

    .va2-profil-wrap {
        margin: 110px auto 50px auto !important;
        padding: 0 15px;
    }

    .va2-profil-sections,
    .va2-form-grid { 
        grid-template-columns: 1fr; /* Formulaire sur une seule colonne */
    }

    .va2-modal-content, 
    .va2-modal-box { 
        width: 95% !important; 
        padding: 20px !important; 
    }


    /* ========================================================= */
    /* 2. EN-TÊTE DU PROFIL (AVATAR & INFOS)                     */
    /* ========================================================= */

    .va2-profil-top { 
        flex-direction: column; 
        text-align: center; 
        padding: 15px !important;
        gap: 10px !important;
    }

    #va2-avatar-img { 
        width: 120px; 
        height: 120px; 
    }

    /* Conteneur principal des infos */
    .va2-profil-info {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* Le Pseudo et le Drapeau */
    .va2-profil-info h2 {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 auto 12px auto !important;
        gap: 8px !important; 
    }

    .va2-profil-info h2 > span {
        position: static !important; 
        display: inline-flex !important;
        align-items: center !important;
        margin-left: 0 !important; 
        font-size: 1em !important;
    }

    .va2-profil-info h2 > span img.emoji {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        margin: 0 !important;
    }

    /* Conteneur des Stats (Membre depuis + Prédictions) */
    .va2-profil-info > div {
        align-items: center !important;
        width: 100% !important;
        gap: 10px !important;
        margin-bottom: 5px;
    }

    /* Ligne des Prédictions et Points */
    .va2-profil-info > div > div {
        justify-content: center !important;
        width: 100% !important;
    }

    /* Emojis des statistiques */
    .va2-profil-info > div span {
        display: inline-flex !important;
        align-items: center !important;
    }

    .va2-profil-info > div span img.emoji {
        margin-right: 5px !important;
    }

    /* Joueur + équipe préférés */
    .va2-section-label { font-size: 0.7em !important; }
    .va2-section-value { font-size: 0.85em !important; }


    /* ========================================================= */
    /* 3. BOUTON MODIFIER & CACHE DES ONGLETS EN ÉDITION         */
    /* ========================================================= */

    .va2-edit-btn { 
        position: static; 
        margin-top: 18px; 
        width: 45%; 
        padding: 12px !important;
        background: var(--cyan-VA) !important;
    }

    /* Si la boîte principale contient le mode édition visible, on cache les onglets */
    .va2-profil-wrap:has(#va2-edit-mode:not([style*="none"])) .va2-profil-tabs {
        display: none !important;
    }


    /* ========================================================= */
    /* 4. ONGLETS DE NAVIGATION (SCROLLABLES SUR MOBILE)         */
    /* ========================================================= */

    .va2-profil-tabs { 
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; 
        justify-content: flex-start !important; 
        gap: 15px !important; 
        padding: 4px !important; 
        overflow-x: auto !important; 
        -webkit-overflow-scrolling: touch !important; 
        scrollbar-width: none; /* Firefox */
    }

    .va2-profil-tabs::-webkit-scrollbar {
        display: none !important; /* Chrome/Safari */
    }
    
    .va2-profil-tab { 
        background: var(--noir-VA) !important; 
        flex: 0 0 auto !important; 
        padding: 12px 18px !important; 
        font-size: 0.8em !important; 
        white-space: nowrap !important; 
        margin-bottom: 0 !important; 
        text-align: center !important;
    }


    /* ========================================================= */
    /* 5. PANNEAU : HISTORIQUE DES PRONOS (SCROLLABLE)           */
    /* ========================================================= */

    .va2-pronos-list {
        display: block; 
        overflow-x: auto; 
        white-space: nowrap; 
        -webkit-overflow-scrolling: touch;
        font-size: 0.75em !important;
    }

    .va2-pronos-list thead th {
        font-size: 1.05em !important; 
    }


    /* ========================================================= */
    /* 6. PANNEAU : CLASSEMENT GÉNÉRAL (FIXE)                    */
    /* ========================================================= */

    /* En-tête du classement et recherche */
    .va2-ranking-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        margin-bottom: 10px !important;
        min-height: 40px !important;
    }

    .va2-ranking-section-title {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        align-self: center !important;
        font-size: 0.8em !important;
    }

    .va2-ranking-header h2,
    .va2-ranking-header h3,
    .va2-ranking-title {
        text-align: left !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

    #va2-ranking-search {
        width: 100%; /* S'adapte à l'espace restant */
        max-width: 40px !important; /* Taille de base */
        font-size: 0.85em !important;
        padding: 8px !important;
        transition: max-width 0.3s ease !important;
        overflow: hidden !important;
    }

    #va2-ranking-search:focus {
        max-width: 150px !important; /* S'étire au clic */
    }

    /* Style global du panneau classement */
    #va2-profil-tab-classement,
    #va2-profil-tab-classement .va2-profil-panel {
        font-size: 0.9em !important;
        padding: 5px !important;
    }

    #va2-profil-tab-classement p {
        padding: 20px 0 !important;
    }

    /* Le Tableau de classement (Fixe avec angles arrondis) */
    #va2-profil-tab-classement table {
        display: table !important; 
        width: 100% !important;
        table-layout: fixed !important;
        border-collapse: separate !important; 
        border-spacing: 0 !important;
        border-radius: 8px !important; 
        overflow: hidden !important; 
    }

    #va2-profil-tab-classement th,
    #va2-profil-tab-classement td {
        padding: 6px 4px !important;
        word-break: break-word !important; 
        white-space: normal !important;
    }

    #va2-profil-tab-classement th { font-size: 0.9em !important; }
    #va2-profil-tab-classement td { font-size: 0.8em !important; }

    /* Tailles des colonnes */
    #va2-profil-tab-classement th:nth-child(1), #va2-profil-tab-classement td:nth-child(1) { width: 13% !important; }
    #va2-profil-tab-classement th:nth-child(2), #va2-profil-tab-classement td:nth-child(2) { width: 37% !important; }
    #va2-profil-tab-classement th:nth-child(3), #va2-profil-tab-classement td:nth-child(3) { width: 25% !important; }
    #va2-profil-tab-classement th:nth-child(4), #va2-profil-tab-classement td:nth-child(4) { width: 25% !important; }

    /* Ajustement de la colonne # (rang) */
    #va2-profil-tab-classement th:nth-child(1) {
        padding: 6px 4px 6px 15px !important; /* Marge à gauche pour "Pos." */
    }

    #va2-profil-tab-classement td:nth-child(1) {
        font-size: 1em !important;
        text-align: center !important;
    }

    /* Miniature des drapeaux dans les tableaux de classement/pronos */
    table.va2-pronos-list tbody tr td:first-child img.emoji {
        width: 15px !important;
        height: 15px !important;
        min-width: 15px !important;
        min-height: 15px !important;
        max-width: 15px !important;
        max-height: 15px !important;
    }
}


/* ========================================================= */
/* TÉLÉPHONES TRÈS ÉTROITS (< 400px) : TOUT EST SCROLLABLE   */
/* ========================================================= */
@media (max-width: 400px) {
    
    /* 1. On force TOUS les tableaux à devenir des blocs de défilement */
    #va2-profil-tab-classement table,
    .va2-pronos-list table,
    #va2-panel-classement table,
    #va2-panel-resultats table:not(.va2-logged-out *),
    table.va2-leaderboard {
        display: block !important; /* Casse la structure rigide du tableau */
        width: 100% !important;
        min-width: 100% !important; /* Évite le fameux "trou noir" sur la droite ! */
        overflow-x: auto !important; /* Active le défilement horizontal */
        -webkit-overflow-scrolling: touch !important; /* Défilement ultra-fluide sur iOS */
        
        /* On désactive les angles arrondis car ils buggent avec le défilement */
        border-collapse: separate !important; 
        border-radius: 8px !important;
    }

    /* 2. On libère les largeurs forcées et on interdit au texte de se couper */
    #va2-profil-tab-classement th,
    #va2-profil-tab-classement td,
    .va2-pronos-list th,
    .va2-pronos-list td,
    #va2-panel-classement th,
    #va2-panel-classement td,
    #va2-panel-resultats th,
    #va2-panel-resultats td,
    table.va2-leaderboard th,
    table.va2-leaderboard td {
        width: auto !important; /* Annule les 13%, 37%, 25%, etc. */
        min-width: max-content !important; /* Laisse la case prendre la taille exacte du texte */
        white-space: nowrap !important; /* Interdit le retour à la ligne pour déclencher le scroll */
        word-break: normal !important;
        padding: 10px 12px !important; /* Ajoute un peu de confort pour la lecture au doigt */
    }

    /* 3. On réajuste juste l'en-tête "Pos." de ton classement pour l'harmoniser */
    #va2-profil-tab-classement th:nth-child(1) {
        padding-left: 12px !important;
    }
}