/* ========================================================= */
/* 1. RESET & SURCHARGES DU THÈME (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; 
}

.entry-content, .ast-container, .site-main { padding-top: 0 !important; margin-top: 0 !important; }
header.entry-header { margin-bottom: 0 !important; padding-bottom: 0 !important; display: none !important; }
h1.entry-title, h1.wp-block-post-title, .page-title, .ast-page-title { display: none !important; }
.site-header, .header-main { display: none !important; }

.va2-hub-wrap img.emoji, .va2-hub-wrap img.wp-smiley,
table.va2-leaderboard img.emoji, table.va2-results img.emoji {
    pointer-events: none !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; outline: none !important;
}

/* ========================================================= */
/* 2. STRUCTURE GLOBALE DU HUB                               */
/* ========================================================= */

.va2-hub-wrap {
    display: grid; grid-template-columns: 310px 1fr 310px; gap: 30px; width: 95vw !important; max-width: 1600px !important; 
    position: relative; left: 50%; transform: translateX(-50%); margin: 100px 0 0 0; align-items: start;
    color: var(--blanc-texte) !important; font-size: 21px !important; background: transparent !important;
}

.va2-hub-card {
    background: var(--noir-VA) !important; border: 1px solid var(--gris-border) !important; border-radius: 12px; padding: 20px; box-shadow: 0 4px 15px var(--shadow-30) !important;
}

.va2-hub-card h3, .va2-pronos-section-title, .va2-ranking-hub-title {
    font-size: 0.95em; font-weight: 700; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid var(--gris-border) !important; color: var(--blanc-texte) !important; white-space: nowrap; text-transform: uppercase;
}
.va2-pronos-section-title, .va2-ranking-hub-title { font-size: 0.75em !important; font-weight: 500 !important; color: var(--gris-texte) !important; border: none !important; margin: 0 0 15px 0; }

.va2-hub-banner {
    width: 100%; 
    max-width: 2560px; /* La bannière ne dépassera JAMAIS 2560px de large */
    aspect-ratio: 2560 / 550 !important; /* Force mathématiquement la hauteur à 550px quand la largeur est à 2560px */
    margin: 0 auto 20px auto; /* "auto" permet de centrer la bannière si l'écran est plus grand que 2560px */
    border-radius: 12px; 
    overflow: hidden; 
    position: relative; 
    box-shadow: 0 2px 12px var(--shadow-30) !important; 
    background-color: var(--noir-VA) !important; 
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.va2-hub-banner img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; /* Remplit la boîte 2560x550 sans jamais déformer ton image */
    display: block; 
}

.va2-banner-actions { position: absolute; top: 15px; right: 15px; display: flex; gap: 8px; z-index: 10; }

.va2-hub-wrap .va2-banner-actions .va2-banner-btn {
    background: var(--cyan-VA) !important; color: var(--blanc-pur) !important; border-radius: 50% !important;
    width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    cursor: pointer !important; border: 2px solid var(--blanc-pur) !important; transition: transform 0.2s !important; padding: 0 !important; font-size: 16px !important;
}
.va2-hub-wrap .va2-banner-actions .va2-banner-btn:hover { transform: scale(1.1) !important; }
.va2-hub-wrap .va2-banner-actions .va2-banner-delete { background: var(--rouge-clair) !important; }


/* ========================================================= */
/* 3. NAVIGATION ET ONGLETS (Tabs)                           */
/* ========================================================= */

.va2-hub-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;
}

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

.va2-hub-tab span { position: relative; z-index: 2; }
.va2-hub-tab:hover { color: var(--cyan-VA) !important; }
.va2-hub-tab.active { color: var(--cyan-VA) !important; font-weight: 700 !important; }

.va2-tab-slider { position: absolute; bottom: 0; height: 5px; background-color: var(--cyan-VA); border-radius: 4px; z-index: 1; transition: left 0.3s cubic-bezier(0.25, 1, 0.5, 1), width 0.3s cubic-bezier(0.25, 1, 0.5, 1); }

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

.va2-header-profil-link {
    background-color: var(--noir-VA) !important; color: var(--blanc-texte) !important; padding: 8px 16px !important; border-radius: 50px !important;
    text-decoration: none !important; font-size: 0.85em !important; font-weight: 600 !important; border: 1px solid var(--gris-fonce) !important; transition: all 0.3s ease !important; display: flex !important; align-items: center !important; gap: 8px !important;
}
.va2-header-profil-link:hover { background-color: var(--bleu-menu) !important; border-color: var(--bleu-menu) !important; }
.va2-header-profil-link i { color: var(--bleu-icone) !important; }


/* ========================================================= */
/* 4. CARTES DE MATCHS (Prédictions)                         */
/* ========================================================= */

.va2-match-card {
    background: var(--noir-VA) !important; border: 1px solid var(--gris-border) !important; padding: 0 !important; box-shadow: 0 4px 15px var(--shadow-30) !important; border-radius: 12px; margin-bottom: 30px !important;
}

.va2-match-card > div:first-child { background-color: var(--cyan-VA) !important; border-bottom: 1px solid var(--gris-border) !important; border-radius: 12px 12px 0 0 !important; }
.va2-match-teams { display: flex; align-items: center; justify-content: center; gap: 12px; }
.va2-team { flex: 1; text-align: center; font-weight: 700; font-size: 1em; }
.va2-flag-big { font-size: 2.8em; line-height: 1; }

.va2-team-name, .va2-match-card div[style*="font-weight: 800; font-size: 1.1em;"] { font-weight: 700 !important; font-size: 0.95em; text-align: center; color: var(--blanc-texte) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }

.va2-score-inputs input[type="number"], .va2-match-card input[type="number"] {
    width: 52px; height: 52px; text-align: center; font-size: 1.3em; font-weight: 700; border: 2px solid var(--gris-fonce) !important; background: var(--noir-VA) !important; color: var(--blanc-texte) !important;
    border-radius: 8px; outline: none; transition: border-color 0.2s; box-shadow: none !important;
}
.va2-match-card input[type="number"]:focus { border-color: var(--cyan-VA) !important; }
.va2-match-card input[type="number"]:disabled { background: var(--noir-VA) !important; color: var(--gris-desactive) !important; border-color: var(--gris-border) !important; }

.va2-match-closed { text-align: center; font-size: 0.8em; color: var(--rouge-ferme) !important; margin-top: 10px; font-style: italic; }

.va2-badge-x2 { background-color: var(--badge-playoffs); color: var(--blanc-pur); font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; display: inline-block; line-height: 1.2; box-shadow: 0 2px 4px var(--shadow-50); }


/* ========================================================= */
/* 5. TABLEAUX ET CLASSEMENTS                                */
/* ========================================================= */

.va2-leaderboard, .va2-results, .va2-equipes-table { width: 100%; border-collapse: collapse; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px var(--shadow-30) !important; }
.va2-leaderboard th, .va2-leaderboard td, .va2-results th, .va2-results td, .va2-equipes-table th, .va2-equipes-table td { border: none !important; vertical-align: middle !important; }

.va2-leaderboard thead, .va2-results thead { background: var(--cyan-VA); color: var(--blanc-texte); }
.va2-leaderboard thead th, .va2-results thead th { padding: 12px 16px; font-size: 0.85em; font-weight: 600; text-align: left; }

.va2-leaderboard tbody tr, .va2-results tbody tr { border-bottom: 1px solid var(--gris-border) !important; background: var(--noir-VA) !important; transition: background 0.15s; }
.va2-leaderboard tbody td, .va2-results tbody td { padding: 12px 16px; font-size: 0.9em; color: var(--blanc-texte); }

.va2-leaderboard tbody tr.va2-me { background-color: var(--cyan-rgba-15) !important; }
.va2-leaderboard tbody tr.va2-me td:first-child { box-shadow: inset 4px 0 0 0 var(--cyan-VA) !important; }
.va2-leaderboard tbody tr.va2-me td a { color: var(--blanc-texte) !important; font-weight: 700 !important; }

.va2-leaderboard tbody td a, .va2-leaderboard tbody td span, .va2-leaderboard tbody td img.emoji { display: inline-block !important; vertical-align: middle !important; line-height: 1 !important; margin: 0 !important; }

table.va2-leaderboard tbody tr td:first-child img.emoji { 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; }

.va2-row-highlight { background-color: var(--bg-highlight-jaune) !important; }
.va2-row-highlight td { font-weight: 700; color: var(--blanc-texte) !important; }
.va2-row-highlight td:first-child { border-left: 4px solid var(--profil-classement); }
.va2-row-highlight td a { color: var(--profil-classement) !important; }

.va2-results td strong, .va2-results td span { display: inline-block; vertical-align: middle; margin: 0 !important; }

/* --- Tableau: Classement des Équipes --- */
.va2-equipes-table { box-shadow: none !important; font-size: 0.82em; }
.va2-equipes-table thead { background: transparent !important; color: var(--gris-texte) !important; }
.va2-equipes-table thead tr { border-bottom: 2px solid var(--gris-border) !important; }
.va2-equipes-table thead th { padding: 4px 6px; text-align: center; font-weight: 600; font-size: 0.85em; }
.va2-equipes-table thead th:nth-child(2) { text-align: left; }
.va2-equipes-table tbody tr { border-bottom: 1px solid var(--gris-border) !important; background: transparent !important; }
.va2-equipes-table tbody tr:last-child { border-bottom: none !important; }
.va2-equipes-table tbody td { padding: 8px 4px !important; height: 45px !important; color: var(--blanc-texte); }

.va2-equipes-table th:nth-child(1), .va2-equipes-table td:nth-child(1) { width: 45px !important; padding-right: 10px !important; }
.va2-equipes-table th:nth-child(3), .va2-equipes-table td:nth-child(3), 
.va2-equipes-table th:nth-child(4), .va2-equipes-table td:nth-child(4) { width: 25px !important; text-align: center !important; }
.va2-equipes-table th:nth-child(5), .va2-equipes-table td:nth-child(5) { width: 45px !important; text-align: center !important; }

.va2-eq-pos { text-align: center; font-weight: 700; color: var(--gris-texte); width: 20px; padding: 8px 5px !important; }
.va2-pos-box { display: inline-flex !important; vertical-align: middle !important; margin: 0 !important; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; font-weight: bold; font-size: 0.9em; background-color: var(--noir-VA) !important; color: var(--blanc-texte) !important; }
.va2-pos-playoffs { background-color: var(--bleu-playoffs) !important; }
.va2-pos-relegation { background-color: var(--rouge-relegation) !important; }

.va2-eq-nom { display: table-cell !important; padding: 6px 4px; font-weight: 500; color: var(--blanc-texte) !important; }
.va2-eq-nom span { display: inline-block !important; vertical-align: middle !important; line-height: 1 !important; margin-top: 0 !important; transform: translateY(-2px); }
.va2-eq-stat { text-align: center; padding: 6px 4px; color: var(--gris-texte) !important; }
.va2-eq-pts { text-align: center; padding: 6px 4px; font-weight: 700; font-size: 18px; color: var(--bleu-points) !important; }

/* --- Top 10 --- */
.va2-top10 { list-style: none; margin: 0; padding: 0; }
.va2-top10 li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--gris-border) !important; font-size: 0.88em; }
.va2-top10 li:last-child { border-bottom: none !important; }
.va2-top10-me { background: var(--bg-highlight-bleu) !important; border-radius: 6px; padding: 4px 6px !important; margin: 0 -6px; }
.va2-top10-rank { font-weight: 700; color: var(--gris-texte); width: 24px; text-align: center; flex-shrink: 0; }
.va2-rank-1 { color: var(--profil-classement); }
.va2-rank-2 { color: var(--medaille-argent); }
.va2-rank-3 { color: var(--medaille-bronze); }
.va2-top10-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gris-texte) !important; }
.va2-top10-pts { font-weight: 700; color: var(--bleu-menu) !important; flex-shrink: 0; margin-right: 8px !important; }

/* --- En-tête Classement --- */
.va2-ranking-header { display: flex; justify-content: space-between; align-items: flex-end !important; margin-bottom: 20px; padding-bottom: 6px !important; border-bottom: 2px solid var(--gris-border) !important; }
.va2-ranking-header .va2-ranking-hub-title { margin: 0; }

.va2-hub-wrap #va2-ranking-search {
    padding: 5px 12px 5px 30px !important; border: 1px solid var(--gris-fonce) !important; border-radius: 6px; font-size: 0.8em; width: 210px; 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: 8px center; 
}
#va2-ranking-search:focus { border-color: var(--cyan-VA) !important; outline: none; box-shadow: 0 0 0 2px var(--cyan-rgba-40); }

/* --- Badges de Résultats --- */
.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; }
.va2-res-badge { display: inline-block; padding: 4px 10px; border-radius: 6px; font-weight: 800; font-size: 0.9em; min-width: 60px; text-align: center; }
.va2-res-badge small { font-size: 0.75em; opacity: 0.8; margin-left: 2px; }
.va2-res-badge.is-perfect { background: var(--or-rgba-15) !important; color: var(--profil-classement) !important; border: 1px solid var(--or-rgba-40) !important; }
.va2-res-badge.is-good { background: var(--vert-rgba-15) !important; color: var(--vert-positif) !important; border: 1px solid var(--vert-rgba-40) !important; }
.va2-res-badge.is-bad { background: var(--rouge-rgba-15) !important; color: var(--rouge-clair) !important; border: 1px solid var(--rouge-rgba-40) !important; }


/* ========================================================= */
/* 6. FORMULAIRES, BOUTONS ET PAGINATION                     */
/* ========================================================= */

.va2-submit { text-align: center; margin-top: 20px; margin-bottom: 100px !important; }
.va2-submit button[type="submit"] {
    background: var(--cyan-VA); color: var(--blanc-texte); border: none; padding: 12px 32px; border-radius: 8px; font-size: 1em; font-weight: 800; cursor: pointer; transition: all 0.3s ease; margin-bottom: -10px;
}
.va2-submit button[type="submit"]:hover { background: var(--cyan-VA); color: var(--bleu-menu) !important; transform: translateY(-2px); box-shadow: 0 4px 12px var(--cyan-rgba-40); }
.va2-submit button:disabled { background: var(--gris-fonce) !important; color: var(--gris-moyen) !important; cursor: not-allowed; }

.va2-rules-btn {
    width: 100%; background: var(--noir-VA) !important; border: 1px solid var(--gris-fonce) !important; color: var(--blanc-texte) !important;
    padding: 10px; border-radius: 8px; font-size: 0.85em; font-weight: 600; cursor: pointer; transition: all 0.2s; text-align: center;
    box-shadow: none !important; outline: none !important;
}
.va2-rules-btn:hover, .va2-rules-btn:focus { background: var(--gris-border) !important; border-color: var(--cyan-VA) !important; color: var(--cyan-VA) !important; box-shadow: none !important; outline: none !important; }

.va2-submit .va2-login-action-btn {
    display: inline-block; background: var(--jaune-bouton) !important; color: var(--noir-VA) !important; padding: 12px 25px !important;
    border-radius: 8px !important; border: none !important; font-size: 0.9em !important; font-weight: 700 !important; cursor: pointer;
    box-shadow: 0 4px 8px var(--jaune-rgba-30) !important; transition: all 0.3s ease !important;
}
.va2-submit .va2-login-action-btn:hover { transform: scale(1.05) translateY(-2px) !important; background: var(--jaune-bouton-hover) !important; color: var(--noir-VA) !important; box-shadow: 0 6px 10px var(--jaune-rgba-50) !important; }

/* Pagination */
.va2-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 30px !important; margin-bottom: 50px !important; }
.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-hover) !important; color: var(--cyan-VA) !important; }
.va2-page-btn.active { background: var(--cyan-VA) !important; border-color: var(--cyan-hover) !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; }


/* ========================================================= */
/* 7. MODALES (Login, Conditions, Règlement)                 */
/* ========================================================= */

.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 5vh auto !important; padding: 30px; width: 90% !important; max-width: 800px !important; max-height: none !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-rules-modal .va2-modal-content p, #va2-rules-modal .va2-modal-content li, #va2-rules-modal .va2-modal-content div,
#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; }

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

/* Boîte Playoffs x2 (Modale Règlement) */
#va2-rules-modal .va2-modal-content div[style*="background: var(--reglement-x2-playoffs)"] { background: var(--or-rgba-15) !important; border: 1px solid var(--profil-classement) !important; }
#va2-rules-modal .va2-modal-content div[style*="background: var(--reglement-x2-playoffs)"] h3 { color: var(--profil-classement) !important; }
#va2-rules-modal .va2-modal-content div[style*="background: var(--reglement-x2-playoffs)"] p { color: var(--blanc-texte) !important; }

/* 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; }


/* ========================================================= */
/* LISIBILITÉ DES POURCENTAGES (Ombre pour les fonds clairs) */
/* ========================================================= */
.va2-match-card .va2-match-body > div:last-child span {
    text-shadow: 0 1px 4px var(--shadow-50), 0 0 2px var(--shadow-60) !important;
}

/* ========================================================= */
/* 8. MESSAGES D'ALERTE (AJAX)                               */
/* ========================================================= */

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

#va2-pronos-message { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; text-align: center; font-weight: 600; font-size: 0.95em; opacity: 0; transition: opacity 0.3s ease-in-out; }
#va2-pronos-message.show { opacity: 1; }
.va2-msg-success { background-color: var(--vert-rgba-20) !important; color: var(--vert-positif) !important; border: 1px solid var(--vert-succes-border) !important; }
.va2-msg-error { background-color: var(--rouge-rgba-20) !important; color: var(--rouge-erreur) !important; border: 1px solid var(--cancel-button) !important; }


/* ========================================================= */
/* 9. PIED DE PAGE (Footer Hub)                              */
/* ========================================================= */

.va2-footer-signature { 
    display: flex !important; 
    flex-wrap: wrap !important;
    align-items: center !important; 
    justify-content: center !important;
    text-align: center !important;
    gap: 10px !important; 
    margin: 0 auto 30px auto !important; 
    padding-top: 15px !important;
    color: var(--gris-texte); 
    font-size: 0.9em; 
    border-top: 1px solid var(--shadow-05); 
    width: 100% !important; 
    grid-column: 1 / -1 !important; /* 👈 LA VRAIE LIGNE MAGIQUE POUR LA GRILLE ! */
}
/* Empêche le nom "Houel" de se couper tout seul sur une nouvelle ligne */
.va2-footer-signature span {
    white-space: nowrap !important;
}
.va2-footer-separator { color: var(--gris-texte); }
.va2-footer-socials { display: flex; gap: 8px; align-items: center; }
.va2-social-icon { color: var(--gris-icone-hover); transition: all 0.2s ease; display: flex; align-items: center; }
.va2-social-icon.github:hover { color: var(--noir-border); transform: scale(1.1); }
.va2-social-icon.linkedin:hover { color: var(--linkedin-color); transform: scale(1.1); }

/* 1. Cachée par défaut sur PC */
.va2-mobile-divider {
    display: none !important;
}

.va2-pub-tel-flexible {
    display: none !important;
}

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

@media (max-width: 1000px) {

    /* ========================================================= */
    /* 1. LAYOUT GLOBAL & STRUCTURE DE LA PAGE                   */
    /* ========================================================= */

    /* On cache la colonne des équipes et la carte Top 10 */
    .va2-sidebar-left,
    .va2-top10-card { 
        display: none !important; 
    }

    /* Conteneur principal : passage en colonne */
    .va2-hub-wrap { 
        display: flex; 
        flex-direction: column; 
        width: 100% !important; 
        padding: 0 10px; 
        box-sizing: border-box;
        margin-top: 60px;
        gap: 15px;
    }

    /* Zone centrale (Matchs) : Prend toute la place et passe en 1er */
    .va2-hub-main {
        order: 1;
        width: 100% !important;
        margin: 0 auto !important;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Panneaux à l'intérieur du Hub */
    .va2-hub-panel { 
        width: 100%; 
    }

    /* Colonne de droite (Classement/Règlement) : passe en 2ème sous les matchs */
    .va2-sidebar-right { 
        order: 2; 
        width: 100%; 
        height: auto !important; 
        min-height: unset !important;
        font-size: 0.75em !important;
        margin-top: -20px !important;
        margin-bottom: -70px !important;
    }

    /* Signature du footer tout en bas */
    .va2-footer-signature {
        order: 999;
        align-self: center;
    }


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

    .va2-hub-banner {
        margin-top: 45px;
    }

    .va2-profile-icon,
    .va2-profile-avatar {
        position: relative !important;
        right: unset !important;
        margin-right: 50px !important;
    }


    /* ========================================================= */
    /* 3. ONGLETS DE NAVIGATION                                  */
    /* ========================================================= */

    .va2-hub-tabs {
        height: auto !important;
        padding: 4px !important;
        margin-bottom: 20px !important;
    }
    
    .va2-hub-tab {
        font-size: 0.65em !important;
    }


    /* ========================================================= */
    /* 4. PANNEAU : CLASSEMENT GÉNÉRAL                           */
    /* ========================================================= */

    .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-hub-title {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        align-self: center !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;
    }

    /* Barre de recherche du classement */
    #va2-ranking-search {
        width: 40px !important;
        font-size: 0.85em !important;
        padding: 8px !important;
        transition: width 0.3s ease !important;
        overflow: hidden !important;
    }

    #va2-ranking-search:focus {
        width: 170px !important;
    }

    /* Style du tableau de classement */
    #va2-panel-classement,
    #va2-panel-classement .va2-hub-panel {
        font-size: 0.75em !important;
        padding: 0 0 !important;
    }

    #va2-panel-classement table {
        width: 100% !important;
        table-layout: fixed !important;
    }

    #va2-panel-classement th,
    #va2-panel-classement td {
        padding: 6px 4px !important;
        font-size: 0.78em !important;
        word-break: break-word !important;
    }

    /* Tailles des colonnes du classement */
    #va2-panel-classement th:nth-child(1), #va2-panel-classement td:nth-child(1) { width: 8% !important; }
    #va2-panel-classement th:nth-child(2), #va2-panel-classement td:nth-child(2) { width: 35% !important; }
    #va2-panel-classement th:nth-child(3), #va2-panel-classement td:nth-child(3) { width: 19% !important; }
    #va2-panel-classement th:nth-child(4), #va2-panel-classement td:nth-child(4) { width: 19% !important; }
    #va2-panel-classement th:nth-child(5), #va2-panel-classement td:nth-child(5) { width: 19% !important; }

    /* Ajustement de la colonne # (rang) */
    #va2-panel-classement td:nth-child(1) {
        font-size: 1em !important;
        text-align: center !important;
    }

    /* Miniature des drapeaux dans le classement */
    table.va2-leaderboard 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;
    }


    /* ========================================================= */
    /* 5. PANNEAU : RÉSULTATS (Tableau Scrollable)               */
    /* ========================================================= */

    #va2-panel-resultats table {
        display: table !important; 
        width: 100% !important;
        min-width: max-content !important;
        table-layout: auto !important;
        border-collapse: collapse !important;
    }

    #va2-panel-resultats th,
    #va2-panel-resultats td {
        padding: 10px 8px !important;
        font-size: 0.6em !important;
        white-space: nowrap !important;
        word-break: normal !important;
    }

    /* Colonne Matchs (largeur libre) */
    #va2-panel-resultats th:nth-child(1),
    #va2-panel-resultats td:nth-child(1) {
        width: auto !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    /* Alignement parfait : Équipe A - VS - Équipe B */
    .va2-results td > div:nth-child(2) {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: max-content !important;
        margin: 0 auto !important;
    }

    .va2-results td > div:nth-child(2) > span:not(.va2-vs-label) {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        line-height: 1 !important;
    }

    .va2-results td > div:nth-child(2) > span img.emoji {
        margin: 0 !important;
    }


    /* ========================================================= */
    /* 6. CARTES DES MATCHS (Miniaturisation Mobile)             */
    /* ========================================================= */

    .va2-pronos-section-title {
        font-size: 0.6em !important;
    }

    /* --- En-tête des Matchs (Barre Bleue) --- */
    .va2-match-card > div:first-child {
        padding: 8px 10px !important;
    }

    /* Bloc Gauche : Logo et Nom de compétition */
    .va2-match-card > div:first-child > div:nth-child(1) { gap: 6px !important; }
    .va2-match-card > div:first-child > div:nth-child(1) > div:first-child { width: 28px !important; height: 28px !important; }
    .va2-match-card > div:first-child > div:nth-child(1) span:first-of-type { font-size: 0.65em !important; letter-spacing: 0 !important; }
    .va2-match-card > div:first-child > div:nth-child(1) span:last-of-type { font-size: 0.55em !important; }

    /* Bloc Central : Date */
    .va2-match-card > div:first-child > div:nth-child(2) { font-size: 0.6em !important; padding: 3px 8px !important; letter-spacing: 0 !important; }

    /* Bloc Droit : Badge Ouvert/Fermé */
    .va2-match-card > div:first-child > div:nth-child(3) { display: flex !important; align-items: center !important; justify-content: flex-end !important; }
    .va2-match-card > div:first-child > div:nth-child(3) span { display: inline-flex !important; align-items: center !important; line-height: 1 !important; font-size: 0.65em !important; padding: 6px !important; }

    /* --- Corps des Matchs (Scores, Équipes, Tendances) --- */
    .va2-match-body { padding: 15px 10px !important; }

    /* Drapeaux */
    .va2-match-card .va2-match-body div[style*="font-size: 2.8em"] { font-size: 2em !important; margin-bottom: 5px !important; }
    
    /* Nom des équipes */
    .va2-match-card .va2-match-body div[style*="font-size: 0.9em; text-transform: uppercase;"] { font-size: 0.75em !important; }
    
    /* Cases de score */
    .va2-match-card .va2-match-body input[type="number"] { width: 40px !important; height: 40px !important; font-size: 1.2em !important; border-radius: 8px !important; }
    
    /* Tiret central */
    .va2-match-card .va2-match-body span[style*="font-size: 1.5em"] { font-size: 1.2em !important; margin: 0 4px !important; }
    
    /* Barre de pourcentage/tendances */
    .va2-match-card .va2-match-body > div:last-child { height: 16px !important; margin-top: 15px !important; }
    .va2-match-card .va2-match-body > div:last-child > div > span { font-size: 0.55em !important; }
    
    /* Badge Points x2 */
    .va2-match-card .va2-match-body .va2-badge-x2 { font-size: 9px !important; padding: 2px 6px !important; }
    .va2-match-card .va2-match-body div[style*="top: -35px"] { top: -32px !important; }


    /* ========================================================= */
    /* MESSAGES VIDES UNIFIÉS (0 match, 0 joueur...)             */
    /* ========================================================= */
    
    /* Base commune pour le texte */
    #va2-panel-pronos > p:only-child,
    #va2-panel-classement > p:only-child,
    #va2-panel-resultats > p:only-child {
        font-size: 16px !important; 
        margin: 0 !important;
        text-align: center !important;
        line-height: 1.5 !important;
    }

    /* L'onglet Résultats n'a pas de padding sur le conteneur, on met donc 40px ici */
    #va2-panel-pronos > p:only-child,
    #va2-panel-resultats > p:only-child {
        padding: 30px !important; 
    }

    #va2-panel-classement > p:only-child {
        padding: 20px !important;
        transform: translateY(-10px);
    }

    /* ========================================================= */
    /* 7. BOUTONS ET MODALES                                     */
    /* ========================================================= */

    .va2-submit {
        margin-bottom: 30px !important;
    }
    
    .va2-submit button[type="submit"] {
        padding: 10px 20px !important;
        font-size: 0.85em !important;
        border-radius: 6px !important;
        width: auto !important;
    }

    #va2-rules-modal .va2-modal-content {
        width: 95vw !important;
        max-width: 95vw !important;
        padding: 15px !important;
    }

    .va2-mobile-divider {
        display: block !important;
        width: 100% !important;
        height: 2px !important; /* Épaisseur de la ligne */
        background-color: var(--noir-border) !important; /* Couleur de la ligne (un peu plus claire pour bien la voir) */
        margin: 15px 0 10px 0 !important; /* Espacement au-dessus et en-dessous */
    }

    .va2-pub-container,
    .va2-pub-flexible {
        display: none !important;
    }

    .va2-pub-tel-flexible {
        display: flex !important
    }

    .va2-hub-card {
        margin-bottom: 80px !important;
    }

    /* ========================================================= */
    /* 7. AJUSTEMENT DES TABLEAUX SUR MOBILE (Sans scroll)       */
    /* ========================================================= */
    
    /* On force le tableau à tenir dans l'écran */
    #va2-panel-classement table,
    table.va2-leaderboard {
        width: 100% !important;
        table-layout: fixed !important;
        word-wrap: break-word !important;
    }

    /* COLONNE 1 (Les numéros de classement : on donne plus de place et on réduit la police) */
    #va2-panel-classement th:nth-child(1), #va2-panel-classement td:nth-child(1),
    table.va2-leaderboard th:nth-child(1), table.va2-leaderboard td:nth-child(1) {
        width: 18% !important; /* On élargit cette colonne pour les nombres à 3 chiffres (ex: 100) */
        font-size: 0.75em !important; /* On réduit la police des numéros */
        white-space: nowrap !important; /* La règle magique : interdit formellement de couper le nombre en deux */
        padding-left: 2px !important;
        padding-right: 2px !important;
        text-align: center !important;
    }

    /* COLONNES DES POINTS (Souvent la dernière colonne, on réduit aussi un peu) */
    table.va2-leaderboard th:last-child, table.va2-leaderboard td:last-child,
    #va2-panel-classement th:last-child, #va2-panel-classement td:last-child {
        width: 22% !important;
        font-size: 0.75em !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    /* COLONNE CENTRALE (Le nom du joueur/équipe prend tout le reste de la place) */
    #va2-panel-classement th:nth-child(2), #va2-panel-classement td:nth-child(2),
    table.va2-leaderboard th:nth-child(2), table.va2-leaderboard td:nth-child(2) {
        width: 60% !important;
        font-size: 0.75em !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important; /* Ajoute des "..." si le pseudo est vraiment trop long */
    }

    /* ========================================================= */
    /* CORRECTION : PAGINATION SUR MOBILE                        */
    /* ========================================================= */
    
    .va2-pagination {
        flex-wrap: wrap !important; /* Autorise le retour à la ligne */
        gap: 5px !important; /* Réduit l'espace entre les boutons */
        padding: 10px 5px !important; 
        margin-bottom: 30px !important;
    }
    
    .va2-page-btn {
        padding: 5px 10px !important; /* Réduit un peu les marges internes du bouton */
        font-size: 0.85em !important; /* Réduit très légèrement le texte */
    }
}


@media (max-width: 600px) {

    /* ========================================================= */
    /* 1. SCROLL PARFAIT (Uniquement pour les Résultats/Matchs)  */
    /* ========================================================= */

    .va2-table-scroll {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 5px !important;
    }

    /* Le tableau des résultats s'étire jusqu'au bout */
    .va2-table-scroll table,
    .va2-pronos-list table {
        display: table !important;
        width: 100% !important;
        min-width: max-content !important; 
        border-collapse: separate !important; 
        border-spacing: 0 !important;
        border-radius: 8px !important;
    }

    .va2-table-scroll th, .va2-table-scroll td,
    .va2-pronos-list th, .va2-pronos-list td {
        width: auto !important;
        min-width: max-content !important;
        white-space: nowrap !important;
        word-break: normal !important;
        padding: 10px 12px !important;
    }

    /* ========================================================= */
    /* 2. TABLEAUX FIXES (Pour les Classements Hub & Profil)     */
    /* ========================================================= */

    /* On annule le scroll si le classement a été mis dans une boîte scrollable */
    #va2-panel-classement,
    #va2-panel-classement .va2-table-scroll {
        overflow-x: visible !important;
        padding-bottom: 0 !important;
    }

    /* Le tableau du classement se fige et s'adapte à l'écran */
    #va2-panel-classement table,
    table.va2-leaderboard {
        display: table !important;
        width: 100% !important;
        min-width: unset !important; /* Annule l'étirement infini */
        table-layout: fixed !important; /* Force le tableau à rester dans l'écran */
    }

    /* On autorise le texte à passer à la ligne et on réduit les marges */
    #va2-panel-classement th, #va2-panel-classement td,
    table.va2-leaderboard th, table.va2-leaderboard td {
        white-space: normal !important; 
        word-break: break-word !important;
        padding: 8px 4px !important; 
        font-size: 0.75em !important; 
    }

    /* Tailles parfaites pour les 5 colonnes du Classement HUB */
    table.va2-leaderboard th:nth-child(1), table.va2-leaderboard td:nth-child(1) { width: 12% !important; }
    table.va2-leaderboard th:nth-child(2), table.va2-leaderboard td:nth-child(2) { width: 38% !important; }
    table.va2-leaderboard th:nth-child(3), table.va2-leaderboard td:nth-child(3) { width: 16% !important; }
    table.va2-leaderboard th:nth-child(4), table.va2-leaderboard td:nth-child(4) { width: 16% !important; }
    table.va2-leaderboard th:nth-child(5), table.va2-leaderboard td:nth-child(5) { width: 18% !important; }

    /* ========================================================= */
    /* 3. AJUSTEMENTS GLOBAUX                                    */
    /* ========================================================= */
    
    .va2-hub-main {
        align-items: stretch !important;
    }

    /* Exception : Visiteurs non connectés (Résultats fixes) */
    .va2-table-scroll.va2-logged-out {
        overflow-x: visible !important;
        padding-bottom: 0 !important;
    }
    .va2-table-scroll.va2-logged-out table.va2-results {
        table-layout: fixed !important;
        min-width: unset !important;
    }
    .va2-table-scroll.va2-logged-out table.va2-results th,
    .va2-table-scroll.va2-logged-out table.va2-results td {
        white-space: normal !important;
        min-width: unset !important;
        padding: 10px 8px !important;
    }

    #va2-ranking-search:focus {
        width: 120px !important;
    }
}