:root {
    --bg-dark: #0f172a;        /* Midnight Navy */
    --bg-card: #1e293b;       /* Slate Blue-ish */
    --primary: #10b981;       /* Emerald Green */
    --primary-hover: #059669;
    --accent: #f59e0b;        /* Amber for highlights */
    --text-main: #f8fafc;
    --text-dim: #94a3b8;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--bg-dark);
    color: var(--text-main);
	transition: padding-left 0.3s ease;
}

/* Notification Globale (Email sent, etc.) */
.global-notification {
    background-color: #10b981; /* Vert succès */
    color: white;
    text-align: center;
    padding: 15px;
    font-weight: bold;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 9999; /* Au-dessus de tout */
}

.close-notif {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

/* NAVBAR */
.navbar {
    padding: 1rem 2%;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    position: sticky;
    top: 0; z-index: 100;
}
.nav-container { display: flex; justify-content: space-between; align-items: center; }
.brand-name { font-size: 1.5rem; font-weight: 800; letter-spacing: -1px; }
.brand-name span { color: var(--primary); }

/* Groupe Hamburger + Logo à gauche */
.nav-left {
    display: flex;
    align-items: center;
    gap: 15px; /* Espace entre le bouton et ton logo */
}

/* Bouton Hamburger */
.menu-toggle {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 8px;
    margin-left: -8px; /* On le colle bien à gauche */
    border-radius: 50%; /* Bouton encerclé au survol */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}
.menu-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* --- STRUCTURE DU MENU --- */
.menu-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    height: 100vh;
    background-color: var(--bg-card);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 90; /* IMPORTANT: Plus petit que .navbar (100) pour glisser en dessous */
    padding-top: 75px; /* IMPORTANT: Laisse l'espace pour ta navbar (Ajuste si le haut des textes est coupé) */
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    box-shadow: 2px 0 10px rgba(0,0,0,0.3);
}
.menu-open .menu-sidebar {
    transform: translateX(0);
}

/* --- INTÉRIEUR DU MENU --- */
.menu-section {
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.menu-section h4 {
    color: var(--text-muted, #9ca3af);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
    margin: 0 0 10px 0;
}
.menu-section a {
    display: block;
    color: var(--text-main, #f3f4f6);
    text-decoration: none;
    padding: 8px 0;
    font-size: 1rem;
    font-weight: 500;
    transition: color 0.2s, padding-left 0.2s;
}
.menu-section a:hover {
    color: var(--primary);
    padding-left: 5px;
}

/* =========================================
   COMPORTEMENT RESPONSIVE (PUSH VS OVERLAY)
   ========================================= */

/* Évite la barre de défilement horizontale pendant l'animation */
body {
    overflow-x: hidden;
}

/* DESKTOP (> 768px): Effet Push avec recentrage fluide */
@media screen and (min-width: 769px) {
    /* On utilise padding-left : la largeur reste à 100%, aucun trou n'apparaît à droite */
    body > *:not(.navbar):not(.menu-sidebar):not(.global-notification):not(.modal-overlay) {
        transition: padding-left 0.3s ease;
    }
    
    body.menu-open > *:not(.navbar):not(.menu-sidebar):not(.global-notification):not(.modal-overlay) {
        transform: none; 
        padding-left: 250px;
    }
}

/* MOBILE (<= 768px): Effet Overlay */
@media screen and (max-width: 768px) {
    body.menu-open {
        overflow: hidden; /* Empêche de scroller le site derrière le menu */
    }
    
    .menu-sidebar {
        z-index: 999; /* Sur mobile, le menu passe au-dessus de tout, y compris la navbar */
        padding-top: 20px; /* Moins de padding car il ne se cache plus sous la navbar */
    }
}

/* --- NAV RIGHT SIDE --- */
.nav-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* --- LE BOUTON AVATAR (Hors mobile) --- */
.btn-avatar {
    background: none;
    border: 2px solid var(--text-dim);
    color: var(--text-dim);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    margin-left: 10px; /* Espace entre le menu langue et l'avatar */
    transition: all 0.2s ease;
}

.btn-avatar:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* --- AJUSTEMENTS DU HEADER POUR MOBILE --- */
@media screen and (max-width: 768px) {
    .nav-right {
        position: relative; /* Ancre pour le menu déroulant */
    }

    /* 1. On affiche le bouton Avatar */
    .btn-avatar {
        display: flex !important; 
    }

    /* 2. On transforme ta div nav-auth-buttons en menu caché */
    .nav-auth-buttons {
        display: none !important; /* Caché par défaut */
        position: absolute;
        top: 50px; 
        right: 0;
        background-color: var(--bg-card);
        border: 1px solid #334155;
        border-radius: 8px;
        padding: 15px;
        flex-direction: column; 
        align-items: flex-end; 
        box-shadow: 0 4px 15px rgba(0,0,0,0.5);
        z-index: 1000;
        /*min-width: 160px;*/
        gap: 12px;
    }

    /* 3. La classe qui rendra le menu visible au clic */
    .nav-auth-buttons.show {
        display: flex !important; 
    }

    /* 4. On s'assure que ton user-profile s'empile bien sur mobile */
    .nav-auth-buttons .user-profile {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 10px;
    }
}

/* LOGO */
.logo-area {
    display: flex;
    align-items: center;
    gap: 12px;
}
.nav-logo {
    /* On force une taille carrée et propre */
    height: 45px; 
    width: 45px;
    object-fit: cover; /* Garde les proportions même si l'image est un peu décalée */
    border-radius: 4px; /* Un petit arrondi rend souvent mieux */
    
    /* ASTUCE : Si ton logo a un fond noir/très sombre qui ne matche pas tout à fait, 
       cette ligne tente de fusionner les noirs avec le fond de la page */
    mix-blend-mode: screen; 
}

/* --- CUSTOM LANG DROPDOWN --- */
.custom-lang-dropdown {
    position: relative;
    font-size: 0.9rem;
    font-weight: 500;
}
.lang-btn-current {
    background: rgba(255, 255, 255, 0.05); /* Légère transparence sur fond dark */
    border: 1px solid var(--text-dim);      /* Utilisation de ta variable dim */
    color: var(--text-main);
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.2s;
}
.lang-btn-current:hover {
    border-color: var(--primary); /* Emerald Green au survol */
    color: var(--primary);
}
.lang-btn-current .arrow-down {
    font-size: 0.7em;
    opacity: 0.7;
}
.lang-menu {
    position: absolute;
    top: 100%; right: 0;
    margin-top: 5px;
    background: var(--bg-card); /* Slate Blue-ish */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 101;
    min-width: 120px;
    overflow: hidden;
}
.custom-lang-dropdown.open .lang-menu { display: block; }
.lang-option {
    padding: 10px 15px;
    cursor: pointer;
    transition: 0.2s;
    color: var(--text-dim);
    border-bottom: 1px solid rgba(255,255,255,0.02);
}
.lang-option:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-main);
    padding-left: 20px; /* Petit effet de glissement */
}

/* --- User Profile (Connecté) --- */
.user-profile {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.9rem;
}
.currency-display {
    color: var(--accent); /* Amber for highlights (Tokens) */
    font-weight: bold;
    background: rgba(245, 158, 11, 0.1); /* Amber très dilué */
    padding: 5px 10px;
    border-radius: 20px;
    border: 1px solid rgba(245, 158, 11, 0.2);
}
.user-name {
    color: var(--text-main);
    font-weight: 600;
}

/* AUTH MODALS */
/* --- Fond obscur (Overlay) --- */
.modal-overlay {
    position: fixed;        /* Obligatoire pour être par-dessus */
    top: 0; left: 0;
    width: 100%; height: 100%;
    
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(8px);
    z-index: 2000;
    
    /* MODIFICATION IMPORTANTE : */
    display: none;          /* Caché par défaut (et non flex + opacity 0) */
    justify-content: center; /* Centrage pour quand le JS l'activera */
    align-items: center;
}

.modal-container {
    background: var(--bg-card); /* Slate Blue-ish */
    width: 400px;
    max-width: 90%;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    position: relative;
    transform: translateY(20px);
    animation: slideIn 0.3s forwards;
}

.modal-close {
    position: absolute;
    top: 15px; right: 15px;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-dim);
    z-index: 10;
    transition: 0.2s;
}
.modal-close:hover { color: var(--text-main); }

/* --- Header & Tabs --- */
.modal-header {
    display: flex;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.tab-auth {
    flex: 1;
    padding: 15px;
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    border-bottom: 2px solid transparent;
}

.tab-auth:hover { color: var(--text-main); }

.tab-auth.active {
    color: var(--primary); /* Emerald Green */
    border-bottom: 2px solid var(--primary);
    background: linear-gradient(to top, rgba(16, 185, 129, 0.1), transparent);
}

/* --- Formulaires --- */
.auth-form {
    padding: 30px;
    display: none;
}
.auth-form.active { display: block; }

.form-group { margin-bottom: 20px; }

.form-group label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-bottom: 8px;
}

.form-group input {
    width: 100%;
    padding: 12px;
    background: var(--bg-dark); /* Midnight Navy (plus sombre que la carte) */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: var(--text-main);
    font-family: inherit;
    transition: 0.2s;
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15); /* Lueur Emerald */
}

/* Annule le style global pour les radios et checkboxes */
.form-group input[type="radio"],
.form-group input[type="checkbox"] {
    width: auto;
    padding: 0;
    margin-right: 8px; /* Donne un peu d'air entre le bouton et le texte */
    background: transparent;
    border: none;
    box-shadow: none;
    cursor: pointer;
}

/* Enlève la grosse lueur verte au focus pour ces éléments spécifiques */
.form-group input[type="radio"]:focus,
.form-group input[type="checkbox"]:focus {
    box-shadow: none;
    outline: 1px solid var(--primary); /* Une bordure plus discrète */
}

/* --- Feedback Live Check --- */
.input-feedback {
    display: block;
    margin-top: 5px;
    font-size: 0.8rem;
    font-weight: bold;
    min-height: 18px;
}
.feedback-taken { color: #ef4444; } /* Rouge (pas de var pour rouge, je le laisse hardcodé) */
.feedback-ok { color: var(--primary); } /* Emerald Green */

/* --- Boutons --- */
.btn-full {
    width: 100%;
    padding: 12px;
    background: transparent;
    border: 1px solid var(--text-dim);
    color: var(--text-main);
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
    margin-top: 10px;
}
.btn-full:hover {
    border-color: var(--text-main);
    background: rgba(255,255,255,0.05);
}

.btn-highlight {
    background: var(--primary);
    border: 1px solid var(--primary);
    color: white; /* Texte blanc sur fond vert */
}
.btn-highlight:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.small-note {
    font-size: 0.75rem;
    color: var(--text-dim);
    text-align: center;
    margin-top: 20px;
}
.small-note strong { color: var(--accent); }

/* --- Messages d'erreur/succès --- */
.form-msg {
    margin-bottom: 15px;
    font-size: 0.9rem;
    padding: 10px;
    border-radius: 6px;
    display: none;
    text-align: center;
}
.msg-error {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}
.msg-success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--primary);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

/* HERO SECTION */
.hero {
    padding: 100px 5%;
    background: radial-gradient(circle at top right, rgba(16, 185, 129, 0.1), transparent);
    text-align: center;
}
.hero h1 { font-size: 3.5rem; margin-bottom: 1rem; }
.hero h1 span { color: var(--primary); }
.hero p { color: var(--text-dim); font-size: 1.2rem; max-width: 740px; margin: 0 auto 3rem; }

/* QUICK MATCH BOX */
.quick-match-box {
    background: var(--bg-card);
    padding: 2rem;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    max-width: 900px;
    margin: 0 auto;
    border: 1px solid rgba(255,255,255,0.05);
}
/* --- SELECTEUR DE TYPE (CLUB/NATION) --- */
.type-selector-container {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
}
.type-selector {
    display: flex;
    gap: 0;
}
.type-btn {
    background: var(--bg-card);
    border: 1px solid #334155;
    color: var(--text-dim);
    padding: 10px 25px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
}
.type-btn:first-child { border-radius: 8px 0 0 8px; }
.type-btn:last-child { border-radius: 0 8px 8px 0; border-left: none; }
.type-btn:hover { color: var(--text-main); }
.type-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* --- CUSTOM CHECKBOX HOME ADVANTAGE --- */
.label-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.label-flex > label {
    margin-bottom: 0; /* Enlève la marge par défaut pour le centrage vertical */
}
.custom-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--text-dim);
    user-select: none;
}
.custom-checkbox input {
    display: none; /* Cache la checkbox native */
}
.custom-checkbox .checkmark {
    width: 14px;
    height: 14px;
    background-color: var(--bg-card);
    border: 1px solid #334155;
    border-radius: 3px;
    margin-right: 6px;
    display: inline-block;
    position: relative;
    transition: all 0.2s ease-in-out;
}
/* État coché : on utilise la couleur verte primaire de ton site */
.custom-checkbox input:checked + .checkmark {
    background-color: var(--primary);
    border-color: var(--primary);
}
/* Création du "V" à l'intérieur de la case */
.custom-checkbox input:checked + .checkmark::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 3px;
    height: 7px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.search-row { display: flex; align-items: center; gap: 20px; margin-bottom: 2rem; }
.input-group { flex: 1; text-align: left; position: relative; }
.input-group label { display: block; margin-bottom: 8px; font-size: 0.8rem; color: var(--text-dim); text-transform: uppercase; }
.input-group input {
    width: 100%;
    background: #0f172a;
    border: 1px solid #334155;
    padding: 15px;
    border-radius: 10px;
    color: white;
    outline: none;
    transition: 0.3s;
}
.input-group input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(16,185,129,0.2); }
.input-wrapper input {
    width: 100%;
    background: #0f172a;
    border: 1px solid #334155;
    padding: 15px;
    border-radius: 10px;
    color: white;
    outline: none;
    transition: all 0.2s;
    padding-right: 40px; /* Espace pour le X */
}
.input-wrapper_bak input {
    padding-right: 40px; /* Espace pour le X */
    transition: all 0.2s;
}
.input-wrapper input.has-selection {
    padding-left: 50px; /* Espace pour le logo */
}
.input-wrapper input[readonly] {
    cursor: default;         /* Curseur flèche standard au lieu de la barre de texte */
    caret-color: transparent; /* Cache le trait clignotant si l'utilisateur clique quand même */
    user-select: none;       /* Empêche de sélectionner le texte bleu au triple-clic */
    background: rgba(15, 23, 42, 0.6); /* Un peu plus sombre pour montrer que c'est fixé */
}

/* Positionnement du logo choisi */
.selected-logo {
    position: absolute;
    left: 12px;
    display: none;
    z-index: 2;
}

/* Bouton supprimer (X) */
.clear-btn {
    position: absolute;
    right: 12px;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-dim);
    display: none;
    line-height: 1;
    z-index: 10; /* Force le passage au premier plan */
}
.clear-btn_bak {
    position: absolute;
    right: 12px;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-dim);
    display: none;
    line-height: 1;
}
.clear-btn:hover { color: var(--accent); }
.vs-divider-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 40px;
}

.btn-swap {
    background: var(--bg-dark);
    border: 1px solid #334155;
    color: var(--text-dim);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.btn-swap:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: rotate(180deg); /* Petit effet visuel sympa */
    background: rgba(16, 185, 129, 0.1);
}

.btn-swap svg {
    display: block;
	width: 20px;
    height: 20px;
}

/* Rendu des logos (Formes) */
.logo-render {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255,255,255,0.2);
	flex-shrink: 0;
}
.logo-render.medium { width: 28px; height: 28px; }
.logo-circle { border-radius: 50%; }
.logo-crest { 
    clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 50% 100%, 0% 70%); 
    border-radius: 0;
}

.vs-divider { font-weight: 900; color: #334155; font-style: italic; }

.btn-main-action {
    background: var(--primary);
    color: white;
    border: none;
    padding: 18px 50px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    font-size: 1.1rem;
    transition: 0.3s transform, 0.3s background;
}
.btn-main-action:hover { background: var(--primary-hover); transform: translateY(-3px); }

.btn-secondary {
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s ease-in-out;
    font-size: 0.9rem;
}
.btn-secondary:hover {
    background: var(--primary);
    color: #ffffff;
}
.btn-match-options {
    background: var(--bg-dark);
    border: 1px solid #334155;
    color: var(--text-dim);
    padding: 0 15px;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: 0.3s;
}
.btn-match-options:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.actions-row {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.match-top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    background: rgba(0,0,0,0.3);
}

.btn-quit {
    color: var(--text-dim);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: bold;
}

.btn-quit:hover { color: var(--primary); }

.live-dot {
    color: #ef4444; /* Rouge live */
    font-weight: 800;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.live-dot::before {
    content: '';
    width: 8px; height: 8px;
    background: #ef4444;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

/* DROPDOWN */
.dropdown-results {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #1e293b;
    border-radius: 10px;
    margin-top: 5px;
    z-index: 10;
    display: none;
    max-height: 200px; overflow-y: auto;
    border: 1px solid #334155;
}
.res-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    transition: 0.2s;
}
.res-item:hover { background: var(--primary); }
.res-item span { font-size: 0.9rem; }

/* STATS */
.stats-section { padding: 50px 5%; }
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}
.stat-card {
    background: var(--bg-card);
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    /*cursor: pointer;*/
}
.stat-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 10px;
    font-variant-numeric: tabular-nums; /* Pour que les chiffres ne bougent pas */
}
.stat-label {
    color: var(--text-dim);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    font-weight: 600;
}
/* La carte doit être en position relative pour que l'overlay se cale dessus */
.stat-card.matches-card {
    position: relative;
    padding-bottom: 40px; /* On ajoute un peu d'espace en bas pour pas que l'overlay cache le label */
}
.stat-growth-overlay {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
}
.growth-graph-icon {
    font-size: 1.4rem; /* L'icône du petit graphique */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.growth-value {
    font-size: 0.75rem;
    font-weight: 800;
    margin-top: 2px;
}
/* Couleurs dynamiques */
.stat-growth-overlay.up {
    color: #10b981; /* Vert Emerald */
}
.stat-growth-overlay.down {
    color: #ef4444; /* Rouge Rose */
}
/* Optionnel : petite animation de flottement pour attirer l'oeil */
.stat-growth-overlay {
    animation: floatBadge 3s ease-in-out infinite;
}

/* LEAGUES GRID */
.leagues-section { padding: 50px 5%; }
.leagues-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}
.league-card {
    background: var(--bg-card);
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    transition: 0.3s;
    cursor: pointer;
}
.league-card:hover { transform: translateY(-10px); border-color: var(--primary); }
.league-img {
    width: 80px; height: 80px;
    margin: 0 auto 15px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; font-weight: bold;
}

/* --- MATCH OPTIONS LAYOUT --- */
.options-container {
    background: var(--bg-card);
    padding: 20px;
    border-radius: 8px;
    margin: 20px auto;
    max-width: 800px;
    border: 1px solid #334155;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

.option-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.subs-inputs {
    display: flex;
    gap: 10px;
    align-items: center;
}

.subs-inputs input {
    width: 60px;
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #334155;
    background: var(--bg-dark);
    color: var(--text-main);
    text-align: center;
}

.team-controls {
    display: flex;
    gap: 15px;
    align-items: center;
}

/* Onglets (similaires à simulator.php) */
.team-tabs {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.team-tabs button {
    background: var(--bg-card);
    color: var(--text-dim);
    border: 1px solid #334155;
    padding: 10px 30px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.2s;
}

.team-tabs button.active {
	color: var(--text-main);
    background: var(--primary);
    border-color: var(--primary);
}

.team-tabs button:hover {
	color: var(--text-main);
}

.team-tabs button:first-child {
    border-radius: 8px 0 0 8px;
}

.team-tabs button:last-child {
    border-radius: 0 8px 8px 0;
}

.team-view {
    display: none;
}

.team-view.active {
    display: block;
}

.changed-pos {
    animation: pulsePosition 0.5s ease-in-out;
    display: inline-block; /* Requis pour que le transform: scale fonctionne sur un span */
}
/* --- SQUAD COLUMNS & DRAG AND DROP --- */
.squad-columns {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: flex-start;
    margin-top: 20px;
    width: 100%;
}

.squad-col {
    background: var(--bg-card);
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 10px;
    width: 30%;
    min-height: 400px;
	max-width: 350px;
    display: flex;
    flex-direction: column;
}

.squad-col h4 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--primary);
    border-bottom: 1px solid #334155;
    padding-bottom: 5px;
}

.dropzone {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.player-slot {
    display: flex;
    align-items: center;
    background: var(--bg-dark);
    border: 1px dashed #334155;
    border-radius: 4px;
    padding: 5px;
    min-height: 40px;
}

.pos-label {
    width: 40px;
    text-align: center;
    font-weight: bold;
    font-size: 0.8rem;
    color: var(--text-dim);
    border-right: 1px solid #334155;
    margin-right: 8px;
}

.player-card {
    flex-grow: 1;
    background: #1e293b;
    border: 1px solid #475569;
    border-radius: 4px;
    padding: 5px 10px;
    cursor: grab;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    transition: transform 0.1s;
}

.player-card:active {
    cursor: grabbing;
    transform: scale(0.98);
}

.p-ovr { font-weight: bold; color: var(--accent); }
.p-name { flex-grow: 1; margin: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-pos { font-size: 0.75rem; color: var(--text-dim); }

/* SIMULATOR */
.main-scoreboard-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
	margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}
.broadcast-scoreboard {
    display: flex;
    height: 75px; 
    background: linear-gradient(to bottom, #1a1a1a, #0a0a0a);
    border: 2px solid #333;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    align-items: center;
}
.sb-team {
    flex: 1;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    padding: 0 20px;
}
.home {
    justify-content: flex-end; /* On pousse le contenu vers le score */
}
.home .score-mini-logo { 
    order: -1;      /* Force le logo à passer devant le texte */
    margin-right: 18px; /* Espace entre logo et nom */
    margin-left: 0;
}
#scoreLogoH {
    margin-right: 15px; /* Espace entre logo et nom */
    order: 1; /* On s'assure qu'il est au début */
}
#nameH_display, #nameH_code {
    order: 2;
    white-space: nowrap;
}
.away {
    justify-content: flex-start; /* On pousse le contenu vers le score */
}
.away .score-mini-logo { 
    margin-left: 18px;  /* Espace entre nom et logo */
    margin-right: 0;
}
#nameA_display, #nameA_code {
    order: 1;
    white-space: nowrap;
}

#scoreLogoA {
    margin-left: 15px; /* Espace entre nom et logo */
    order: 2;
}
.team-name-full {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.team-name-code {
    display: none;
    white-space: nowrap;
}
.score-mini-logo {
    width: 32px;
    height: 32px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
/* ZONE DU SCORE */
.sb-score-zone {
	display: flex;
	flex-direction: column; /* NOUVEAU : On empile à la verticale */
	align-items: center;
	justify-content: center;
	background: #000;
	height: 100%;
	min-width: 180px; 
	border-left: 2px solid #333;
	border-right: 2px solid #333;
	flex-shrink: 0; 
}
/* Animation pour le changement de score */
@keyframes scoreFlashAnim {
	0% { background-color: #e74c3c; }
	100% { background-color: #000; }
}
.score-flash-anim {
	animation: scoreFlashAnim 0.8s ease-out;
}
/* Enveloppe du score principal pour le garder à l'horizontale */
.score-main-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

/* Style pour les tirs au but */
.score-pen-row {
	color: var(--accent); /* Ton magnifique Gold/Amber */
	font-family: monospace; /* Pour que les chiffres soient bien alignés */
	font-size: 14px;
	font-weight: bold;
	margin-top: -2px; /* Rapproche légèrement le texte des gros chiffres */
	letter-spacing: 1px;
}
.score-digit {
    font-size: 48px; /* Gros chiffres */
    font-weight: 900;
    color: #fff;
    width: 60px; /* Largeur fixe par chiffre */
    text-align: center;
    line-height: 1; /* Empêche les décalages verticaux */
}
.score-split {
    color: #444;
    font-size: 16px;
    font-weight: bold;
    margin: 0 10px;
}
/* BOX SCOREBOARD LIVE / TIMER (LOOK SOMBRE) */
.sb-timer-box, .sb-live-box {
    width: 110px;
    height: 100%;
    background: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: bold;
    color: #00d2ff;
    flex-shrink: 0;
}
/* LIVE BOX */
.sb-timer-box {
	border-right: 2px solid #333;
}
.sb-live-box {
    border-left: 2px solid #333;
}
/* Style spécifique quand on est en mode REPLAY */
.status-replay {
    font-size: 14px !important;  /* Beaucoup plus petit et subtil */
    letter-spacing: 2px;         /* Espacement élégant */
    font-weight: 600 !important; /* Un peu moins "lourd" que le bold standard */
}
/* LA CONSOLE DE CONTROLE (COLLÉE AU SCOREBOARD) */
.controls-console {
    background: #222;
    border: 2px solid #444;
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 10px;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.console-btn {
    background: #333;
    border: 1px solid #555;
    color: #eee;
    padding: 8px 20px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 11px;
    transition: all 0.2s;
}
.console-btn:hover {
    background: #444;
    border-color: #888;
}
.stop-btn {
    color: #ff4d4d;
    border-color: #600;
}
.stop-btn:hover {
    background: #600;
    color: #fff;
}
.save-btn, .back-btn {
    background: #27ae60 !important; /* Vert */
    border-color: #219150 !important;
}
.save-btn:hover, .back-btn:hover {
    background: #2ecc71 !important;
    border-color: #27ae60 !important;
}
#postMatchControls {
    display: none; /* Géré par le JS */
    gap: 10px;
}
.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}
.content-split {
    display: flex;
    /* Hauteur Fixe */
    height: 830px; 
    border-bottom: 1px solid #ccc; /* Pour fermer visuellement le bas */
}
/* Panneau Gauche */
.left-panel {
    width: 65%;
    background: #f0f2f5;
    display: flex;
    flex-direction: column; /* Pour empiler les onglets et le contenu */
    border-right: 2px solid #ccc;
    height: 100%; /* Prend toute la hauteur de 400px */
    overflow: hidden; /* Empêche le panneau lui-même de dépasser */
}
/* Panneau Droite */
.right-panel {
    width: 35%;
    background: #2e7d32;
    display: flex;
    flex-direction: column; /* Force les onglets À ALLER AU DESSUS du terrain */    
    height: 100%;
    overflow: hidden;
    position: relative;
}
.pitch-container {
    width: 95%; 
    /* Retire "flex: 1" pour stopper l'écrasement */
    flex-shrink: 0; 
    min-height: 455px; /* Ajoute une hauteur minimale fixe (ajuste cette valeur selon la taille originale de ton terrain) */
    margin: 10px auto; 
    /* ... (garde le reste de tes bordures et background) ... */
    border: 3px solid rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
    position: relative; 
    overflow: hidden;
}
.pitch-container::before {
    content: '';
    position: absolute;
    top: -15%; /* On le fait remonter pour n'en voir que la moitié */
    left: 30%; /* Centrage approximatif (30% + 40% largeur = centré) */
    width: 40%;
    height: 30%; /* Une hauteur pour créer l'ovale */
    border: 2px solid rgba(255,255,255,0.4);
    border-radius: 50%; /* Rend le rectangle rond */
    z-index: 0; /* Derrière les joueurs */
}
.pitch-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%; /* Centrage (20% + 60% largeur = centré) */
    width: 60%;
    height: 25%; /* Hauteur de la surface */
    border: 2px solid rgba(255,255,255,0.4);
    border-bottom: none; /* Pas de ligne en bas car collé au bord du terrain */
    z-index: 0;
}
.pitch-placeholder-text { 
	color: white; 
	font-size: 20px; 
	font-weight: bold;
}
.pitch-view {
    display: none; 
    width: 100%;
    flex-direction: column;
    position: relative;
    overflow-y: auto; /* Active le défilement */
    overflow-x: hidden;
    height: 100%; /* S'assure de prendre toute la hauteur du right-panel */
}

.pitch-view.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* flex-start pour éviter que le terrain ne sorte par le haut de l'écran quand on rajoute le banc en dessous */
}
.pitch-view_bak {
    display: none; /* Caché par défaut */
    flex: 1;
    width: 100%;
	flex-direction: column;
    position: relative;
}
.pitch-view_bak.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.bench-container {
    width: 95%;
    margin: 5px auto 10px auto; /* Marge réduite */
    background: var(--bg-card, rgba(30, 41, 59, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px; /* Coins un peu plus serrés */
    padding: 6px 8px;   /* Padding intérieur réduit */
    display: flex;
    flex-direction: column;
    gap: 3px; /* Écart réduit entre les joueurs */
}

.bench-title {
    color: var(--primary, #10b981);
    font-size: 0.8rem; /* Titre plus petit */
    font-weight: bold;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 4px;
    margin-bottom: 2px;
    text-transform: uppercase;
}

.bench-player-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    padding: 4px 6px; /* Très peu d'espace pour condenser */
    border-radius: 3px;
    font-size: 0.75rem; /* Police plus petite (environ 12px) */
    color: var(--text-main, #f8fafc);
}

.bench-player-info {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* Prend juste la place nécessaire pour le nom */
}

.bench-player-pos {
    color: var(--accent, #f59e0b); /* Doré */
    font-weight: bold;
    font-size: 0.7rem; /* Encore un peu plus petit pour le poste */
    width: 25px; /* Largeur fixe pour que tous les noms s'alignent parfaitement */
    margin-right: 4px;
    text-align: left;
}

.bench-player-name {
    font-weight: 500;
    /* Retrait du text-overflow: ellipsis et overflow: hidden */
}

.bench-player-events {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-left: 10px; /* Petit espace fixe entre le nom et les icônes */
    flex-wrap: wrap; /* Retour à la ligne si vraiment trop d'icônes */
}

.bench-player-events svg,
.bench-player-events span {
    width: 15px;  
    height: 15px; 
    display: flex;
    align-items: center;
    justify-content: center; /* S'assure que le SVG est bien centré dans son espace */
}

.bench-player-rating {
    margin-left: auto;
    display: flex;
    justify-content: flex-end; /* Force l'alignement à droite de son contenu */
    align-items: center;
    min-width: 35px; /* Largeur fixe pour un alignement vertical parfait */
    flex-shrink: 0;
}
.rating-empty {
    font-weight: bold;
    color: var(--text-dim, #94a3b8);
    background: rgba(255, 255, 255, 0.1);
	margin-right: 7px;
    padding: 2px 5px;
    border-radius: 3px;
    min-width: 30px;
    text-align: center;
    font-size: 0.75rem;
}

/* --- GRILLE TACTIQUE DYNAMIQUE --- */
.pitch-squad-grid {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%; /* Prend tout le terrain */
	min-height: 455px;
    display: flex;
    flex-direction: column; /* Empile verticalement */
    justify-content: space-evenly; /* Répartit l'espace équitablement */
    padding: 2% 0; /* Petite marge haut/bas pour ne pas coller aux bords */
    box-sizing: border-box;
}
/* Les lignes tactiques */
.formation-line {
    display: flex;
    align-items: center; /* Centre les joueurs verticalement dans leur zone */
    justify-content: space-around; /* Répartit les joueurs horizontalement */
    width: 100%;
    flex: 1; /* Chaque ligne visible prendra une part égale de l'espace disponible */
    /* Optionnel : pour voir les zones pendant le debug, ajoutez 
	border: 1px dashed red; */
}
/* Hauteurs spécifiques pour chaque zone tactique */
.line-fw  { height: 15%; } /* Attaquants */
.line-am  { height: 15%; } /* Milieux Offensifs */
.line-cm  { height: 20%; } /* Milieux Centraux/Wide */
.line-dm  { height: 15%; } /* Milieux Défensifs */
.line-df  { height: 20%; align-items: center; } /* Défenseurs (un peu plus bas) */
.line-gk  { height: 15%; align-items: center; padding-top: 10px; } /* Gardien */


/* --- LE SLOT DU JOUEUR (Conteneur global) --- */
.pitch-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 65px; 
    cursor: pointer;
    z-index: 10;
}

/* --- DESIGN DU MAILLOT --- */
.jersey {
    width: 27px;
    height: 36px;
    background-color: #d32f2f; /* Par défaut */
    position: relative;
    border-radius: 2px 2px 1px 1px;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.3);
    z-index: 2;
    margin-top: 10px; /* Espace pour les bulles */
    margin-bottom: 5px; 
}

/* Manches (Héritent de la couleur via background: inherit) */
.jersey::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 48px; height: 12px;
    background: inherit;
    clip-path: polygon(0% 100%, 20% 0%, 80% 0%, 100% 100%);
    z-index: -1;
}

/* Col */
.jersey::after {
    content: '';
    position: absolute;
    top: 0; left: 50%; 
    transform: translateX(-50%);
    width: 14px; height: 6px;
    background: rgba(0, 0, 0, 0.05); 
    border: 1.5px solid rgba(0, 0, 0, 0.3);
    border-top: none;
    border-radius: 0 0 6px 6px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* --- ÉTIQUETTE INFOS (En dessous) --- */
.player-info {
    text-align: center;
    background: rgba(15, 23, 42, 0.85);
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 9px;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.player-info .pos { font-weight: bold; color: var(--accent); margin-right: 3px; }

/* --- BULLES DE STATS (Au dessus) --- */
.stats-bubbles {
    position: absolute;
    top: 32px; 
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
    /* On a retiré le gap négatif invalide */
}

.pitch-slot:hover .stats-bubbles {
    /*gap: 3px;*/
    top: 27px; 
}
.pitch-slot:hover .stat-bubble:not(.bubble-rating) + .stat-bubble:not(.bubble-rating) {
    /* Au survol, on écarte les icônes pour bien les voir */
    margin-left: -5px; 
}
/* Spécificité pour le Rating (Chiffre) - Totalement séparé */
.bubble-rating {
    font-size: 12px;
    width: auto;
    min-width: 32px;
    padding: 2px 8px;
    border-radius: 12px;
    z-index: 20 !important;
    margin-right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* 9 - 10 : Vert Primary */
.rating-excellent { background-color: var(--primary-hover) !important; }

/* 7 - 8.9 : Vert Hover */
.rating-good { background-color: var(--primary) !important; }

/* 5 - 6.9 : Orange */
.rating-average { background-color: #f97316 !important; }

/* < 5 : Rouge */
.rating-poor { background-color: #ef4444 !important; }

/* Homme du Match (MOTM) : Bleu clair */
.rating-motm { 
    background-color: #0ea5e9 !important; /* Un beau bleu ciel/clair (Sky Blue) */
	padding: 0px 20px;
    /*border: 1px solid var(--accent) !important; /* Petite bordure dorée pour le prestige */
}

/* La petite étoile dorée du MOTM */
.motm-star {
    width: 10px;
    height: 10px;
    margin-right: 3px;
	margin-left: 1px;
    fill: var(--accent); /* Utilise ton ambre/or */
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
}

/* Le chevauchement magique SEULEMENT pour les icônes (pas le rating) */
.stat-bubble:not(.bubble-rating) + .stat-bubble:not(.bubble-rating) {
    margin-left: -12px; /* Tire l'icône vers la gauche sous la précédente */
    transition: margin 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Par défaut, le HTML met l'élément de droite sur celui de gauche. */
/* On inverse ça manuellement pour les 6 premiers éléments possibles */
.stat-bubble:nth-child(1) { position: relative; z-index: 10; }
.stat-bubble:nth-child(2) { position: relative; z-index: 9; }
.stat-bubble:nth-child(3) { position: relative; z-index: 8; }
.stat-bubble:nth-child(4) { position: relative; z-index: 7; }
.stat-bubble:nth-child(5) { position: relative; z-index: 6; }
.stat-bubble:nth-child(6) { position: relative; z-index: 5; }

/* Style de base des bulles */
.stat-bubble {
    width: 22px;  
    height: 22px; 
    border-radius: 33%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: white;
    border: 1px solid rgba(0,0,0,0.4);
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    user-select: none;
    background-color: #334155; 
}

/* Spécificité pour les Icônes (Emojis) */
.bubble-goal, .bubble-assist, .bubble-yellow, .bubble-red {
    font-size: 16px; /* On monte fort pour les emojis */
    background: none; /* On peut enlever le fond pour un look plus "stickers" */
    border: none;
    box-shadow: none;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.8)); /* Ombre portée sur l'emoji lui-même */
}

.stats-bubbles.hidden { display: none; }

/* --- BULLES DE STATUT (En haut à gauche : Blessure, SubOut) --- */
.status-bubbles {
    position: absolute;
    top: 3px; /* Aligné vers le haut */
    left: 5px; /* Décalé vers la gauche */
    display: flex;
    flex-direction: column; /* On les empile de haut en bas si y en a plusieurs */
    gap: 2px;
    z-index: 15;
}

.pitch-slot:hover .status-bubbles {
    /*gap: 3px;*/
    top: 8px; 
}

/* Style spécifique pour ces petites icônes de statut */
.status-bubble {
    width: 16px;  /* Plus petit que les bulles de stats classiques */
    height: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
}

.status-bubbles.hidden { display: none; }

/* --- TABS SYSTEM --- */
.tabs-nav {
    display: flex;
    background: var(--bg-card);
    border-top: 1px solid var(--primary);
	border-bottom: 1px solid var(--primary);
    flex: 0 0 auto; /* Ne grandit pas, hauteur fixe selon le texte */
}
.tab-btn {
    flex: 1; 
	padding: 10px; 
	cursor: pointer; 
	border: none; 
	background: transparent; 
    font-weight: 600; 
	color: #555; 
	border-bottom: 3px solid transparent;
}
.tab-btn:hover {
    background: var(--primary-hover);
}
.tab-btn.active { 
	background: var(--bg-dark); 
	color: var(--primary); 
	border-bottom-color: var(--primary);
}
.tab-content {
    display: none;
    flex: 1; /* Prend tout l'espace restant sous les boutons d'onglets */
    overflow-y: auto; /* Active le SCROLL vertical si le contenu dépasse */
    /*padding: 15px;*/
    background: var(--bg-card);
    height: 100%; /* Force à remplir le parent */
    box-sizing: border-box; /* Inclut le padding dans la hauteur */
}
.tab-content.active { 
	display: block;
}
.right-panel .tabs-nav {
    background: rgba(0,0,0,0.2); /* Fond sombre transparent */
    border-bottom: solid 1px;
}
.right-panel .tab-btn {
    color: #fff; /* Texte blanc sur fond vert */
    opacity: 0.7;
    border-bottom: 3px solid transparent;
}
.right-panel .tab-btn.active {
    background: rgba(255,255,255,0.2);
    color: #fff;
    opacity: 1;
    border-bottom: 3px solid #fff;
}
.formation-bar {
    width: 100%;
    text-align: center;
    padding: 8px 0;
    color: white;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.2); /* Fond sombre léger pour contraste */
    font-size: 14px;
    flex: 0 0 auto; /* Ne s'étire pas, garde sa hauteur fixe */
}
.match-log {
    width: 100%;
}
.event-item {
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    line-height: 1.4;
    display: flex; /* Aligne le temps et le texte */
    align-items: center;
}
.top-controls {
    flex-wrap: wrap;
}
.controls { 
	margin-bottom: 15px; 
	display: flex; 
	gap: 10px; 
	align-items: center;
}
.sb-team { 
	width: 35%; 
	text-align: center; 
	font-size: 1.2rem;
}
.sb-team.home { 
	text-align: right;
}
.sb-team.away { 
	text-align: left;
}
.sb-score { 
    width: 20%; 
	text-align: center; 
    font-size: 2rem; 
	font-weight: bold; 
    background: #333; 
	padding: 5px 15px; 
	border-radius: 8px;
}
.live-controls {
    display: flex;
    gap: 10px;
}
#timer { 
	font-size: 1rem; 
	color: #4ade80; 
	margin-top: 5px;
}
button { 
	cursor: pointer; 
	padding: 10px 20px; 
	border-radius: 5px; 
	border: none; 
	font-weight: bold; 
	transition: 0.2s;
}
.btn-action { 
	background: #6c757d; 
	color: white;
}
#btnSimulate { 
	background: #28a745; 
	color: white;
}
#btnQuickSim { 
	background: #17a2b8; 
	color: white;
}
#btnStop { 
	background: #dc3545; 
	color: white;
}
button:hover { 
	opacity: 0.8;
}
select { 
	padding: 8px; 
	border-radius: 5px; 
	border: 1px solid #ccc;
}

/* COULEURS SELON EVENTS */
/* Mi-temps et Fin de match */
.event-time {
	background: var(--bg-dark);
	color: var(--primary);
	border-left: 5px solid var(--primary-hover);
}
/* Carton Jaune */
.event-yellow {
	background: #fff3cd; /* Jaune pâle */
	color: #856404;            /* Jaune foncé texte */
	border-left: 5px solid #ffc107;
}

/* Rouge (Carton Rouge, 2e Jaune, Blessure, Sub Sortant) */
.event-red {
	background: #f8d7da; /* Rouge pâle */
	color: #721c24;            /* Rouge foncé texte */
	border-left: 5px solid #dc3545;
}

/* Vert (Sub Entrant) */
.event-green {
	background: #d4edda; /* Vert pâle */
	color: #155724;            /* Vert foncé texte */
	border-left: 5px solid #28a745;
}
/* Style de base d'un but (Noir et Blanc) */
.goal-base {
	background: white;
	color: black;
	font-weight: bold;
	border-left: 5px solid #bbb;
}
.goal-flash {
	animation: flashGoal 1.5s ease-out;
}
/* Penalty Réussi : Shootout_Goal */
.event-shootout-goal {
	background: var(--bg-card);
	color: var(--text-main);
	font-weight: bold;
	border-left: 5px solid var(--primary);
}

/* Flash plus doux (vert) au lieu du gros flash blanc pour le direct */
.shootout-flash {
	animation: flashShootout 1s ease-out;
}
@keyframes flashShootout {
	0% { background-color: var(--primary-hover); color: white; }
	100% { background-color: var(--bg-card); color: var(--text-main); }
}

/* Penalty Raté/Arrêté : Style "éteint" / tamisé pour marquer la déception */
.event-shootout-miss {
	background: var(--bg-card);
	color: var(--text-dim);      /* Texte grisé */
	font-style: italic;
	border-left: 5px solid #475569; /* Gris sombre Slate */
	opacity: 0.85;               /* Léger effet de transparence */
}

/* --- STYLE DES SQUADS --- */
.squad-container {
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
	gap: 20px;
}
.team-col {
	width: 48%;
	background: white;
	padding: 15px;
	border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.team-col h3 { 
	margin-top: 0; 
	border-bottom: 2px solid #eee; 
	padding-bottom: 10px;
}
.squad-section-title { 
	font-size: 14px; 
	color: #666; 
	font-weight: bold; 
	margin-top: 15px; 
	text-transform: uppercase;
}
.player-row {
	display: flex;
	justify-content: space-between;
	padding: 5px 0;
	border-bottom: 1px solid #f9f9f9;
	font-size: 14px;
}
.player-pos { 
	font-weight: bold; 
	width: 40px; 
	display: inline-block;
}

/* Le "Mini-Logo" dans la liste */
.mini-logo {
    width: 26px;
    height: 26px;
    display: inline-block;
    position: relative;
    flex-shrink: 0;
    border: none !important;
    /* Ombre portée pour détacher la forme sur fond blanc */
    /*filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4));*/
}
/* Formes universelles pour les logos des équipes */
.circle { 
    border-radius: 50% !important; 
}
.square { 
    border-radius: 2px !important; 
}
.shield { 
    border-radius: 2px 2px 50% 50% !important; 
}
.crest { 
    clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 50% 100%, 0% 70%) !important; 
    border-radius: 0 !important; /* On annule l'arrondi pour le clip-path */
}
/* Bordure pour les formes standards (Circle, Square, Shield) */
.low-contrast-border {
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    box-sizing: border-box;
}

/* Bordure spécifique pour le Crest (car clip-path coupe les bordures) */
.crest.low-contrast-border {
    border: none !important;
    /* On ajoute une lueur blanche nette qui fait office de contour */
    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 2px 4px rgba(0,0,0,0.5)) !important;
}
.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* --- SUMMARY TAB STYLES --- */
/* On applique le Flex UNIQUEMENT quand l'onglet a la classe .active */
#tab-summary.active {
    display: flex;
    flex-direction: column;
    /*padding: 10px;*/
    gap: 8px;
	width: 100%;
}

/* Sécurité : On s'assure qu'il est bien caché sinon */
#tab-summary:not(.active) {
    display: none !important;
}

#summary-events {
	background: var(--bg-dark);
    max-width: 575px;    
    margin: 0 auto;      
    width: 100%;         
    display: flex;
    flex-direction: column;
	padding: 20px 10px;
    gap: 5px;
	border-radius: 10px;
}

.summary-row {
    display: flex;
    gap: 10px; /* Espace crucial n°1 */
    margin-bottom: 8px; /* Espace entre chaque événement du résumé */
}

/* Alignement Home (Gauche) */
.summary-row.home {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
}

/* Alignement Away (Droite) */
.summary-row.away {
    flex-direction: row-reverse; /* Inverse l'ordre pour mettre le contenu à droite */
    justify-content: flex-start;
    text-align: right;
}
.summary-row.away .sum-line {
    flex-direction: row-reverse; /* Met l'icône à droite du texte */
}
/* La Minute */
.sum-minute {
    display: flex;           /* Flexbox pour aligner */
    flex-direction: column;  /* Empiler verticalement */
    justify-content: center; /* Centrer verticalement */
    align-items: center;     /* Centrer horizontalement */
    
    font-weight: bold;
    font-size: 0.9rem;
    color: var(--text-dim);
    min-width: 45px;         /* Un peu plus large pour être sûr */
    height: 40px;            /* Hauteur fixe pour éviter que la ligne bouge */
    line-height: 1;          /* Réduire l'espacement des lignes */
    
    background: rgba(255,255,255,0.05);
    padding: 0 4px;
    border-radius: 4px;
    margin: 0 10px;
}
.info-box {
    width: 100%;
	padding: 15px;
}

/* Le temps normal régulier */
.min-reg {
    font-size: 1em;
}
/* Le temps normal extra */
.min-extra {
    font-size: 0.7em;       /* Plus petit */
    /*color: var(--accent);   /* Couleur accent (orange/jaune) pour ressortir */
    margin-top: 2px;        /* Petit espace avec le chiffre du haut */
}

/* L'icône de l'événement */
.sum-icon,
.line-icon {
    width: 20px; /* Ajuste selon la taille de tes SVG (ex: 20px) */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0; /* Empêche l'icône de s'écraser */
}

/* Détails (Nom joueur, type event) */
.sum-details {
    display: flex;
    flex-direction: column;
	
	justify-content: center;
}
.sum-line {
    display: flex;
    align-items: center;
    gap: 10px; /* Espace crucial n°2 (DOIT être identique au gap de .summary-row) */
}
.sum-player {
    font-weight: 700;
    color: var(--text-main);
}

.sum-sub-text {
    font-size: 0.8rem;
    color: var(--text-dim);
}

/* --- LIVE STATS --- */
#stats-events {
	background: var(--bg-dark);
	max-width: 750px;
	margin: 0 auto;
	width: 100%;
	border-radius: 10px;
	
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    overflow-y: auto;
}

.stat-events-row {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 5px;
}

/* Valeurs numériques */
.stat-events-val {
    width: 30px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
}
.stat-events-val.home-val { justify-content: flex-end; margin-right: 10px; }
.stat-events-val.away-val { justify-content: flex-start; margin-left: 10px; }

/* Conteneur visuel */
.stat-events-visual {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
}

/* Label Central */
.stat-events-label {
    width: 110px;
    text-align: center;
    font-size: 0.70rem;
    color: var(--text-dim);
    text-transform: uppercase;
    font-weight: 600;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8); /* Petit ombrage pour lisibilité sur les barres */
}

/* Zone de la barre (Fond vide) */
.bar-wrapper {
    flex: 1;
    height: 8px;
    /* La progress bar vide est de couleur "pale" */
    background: rgba(255, 255, 255, 0.1); 
    border-radius: 4px;
    display: flex;
    overflow: hidden;
}

.bar-wrapper.home-wrapper { justify-content: flex-end; } 
.bar-wrapper.away-wrapper { justify-content: flex-start; }

/* La barre remplie */
.stat-events-bar {
    height: 100%;
    width: 0%;
    transition: width 0.4s ease-out, background-color 0.3s;
    
    /* 2. Couleur de base (PALE) pour les deux équipes */
    background-color: var(--primary-hover);
    opacity: 0.7;
}

/* 2. Si une équipe est meilleure, la couleur devient plus foncée */
.stat-events-bar.dominant {
    background-color: var(--primary);
    opacity: 1;
}

/* On surcharge les anciennes classes de couleur d'équipe si elles existent encore */
.stat-events-bar.home-bar, .stat-bar.away-bar {
    /* On laisse la classe générique gérer la couleur maintenant */
}

/* KEYFRAMES */
@keyframes floatBadge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
@keyframes pulse {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes flashGoal {
	0% { background: yellow; color: black; transform: scale(1.05); }
	50% { background: orange; color: black; transform: scale(1.02); }
	100% { background: white; color: black; transform: scale(1); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    to { transform: translateY(0); }
}
@keyframes pulsePosition {
    0% { 
        transform: scale(1); 
        color: var(--text-dim);
    }
    50% { 
        transform: scale(1.3); 
        color: var(--primary); /* Devient vert vif */
        font-weight: 900;
    }
    100% { 
        transform: scale(1); 
        color: var(--text-dim);
    }
}

/* MODIFICATIONS POUR AFFICHAGE MOBILE */
/* =========================================
   PALIER 1 : TABLETTES & PETITS PC (< 1108px)
   Chrono en haut, mais on GARDE les noms
========================================= */
@media screen and (max-width: 1108px) {
    /* On cache uniquement le LIVE pour gagner de l'espace */
    .broadcast-scoreboard .sb-live-box {
        display: none !important;
    }

    /* On transforme le conteneur principal (Chrono passe en haut) */
    .broadcast-scoreboard {
        position: relative !important;
        height: auto !important;
        padding: 25px 10px 10px 10px !important; 
        justify-content: center !important; 
    }

    /* Le Chrono se place tout en haut au centre */
    .sb-timer-box {
        position: absolute !important;
        top: 5px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        border: none !important;
        font-size: 14px !important; 
        color: #aaa !important; 
    }

    /* On fond la zone de score avec le reste */
    .sb-score-zone {
        min-width: auto !important;
        border: none !important;
        background: transparent !important;
        padding: 0 15px !important; /* Un peu d'espace avec les noms */
    }
    .score-digit {
        font-size: 40px !important; 
        width: 45px !important;
    }

    /* On s'assure que les boutons puissent s'empiler */
    .controls-console {
        flex-wrap: wrap !important;
    }
}

/* =========================================
   PALIER 2 : TÉLÉPHONES MOBILES (< 690px)
   On CACHE les noms pour ne garder que les logos
========================================= */
@media screen and (max-width: 690px) {
    /* Remplace noms d'équipes par codes */
    .broadcast-scoreboard .team-name-full {
        display: none !important;
    }
	.broadcast-scoreboard .team-name-code {
        display: inline-block !important;
    }
	
    /* On compacte les logos vu qu'ils sont tout seuls */
    .sb-team {
        flex: 1 !important;
        padding: 0 10px !important; 
    }
    
    .sb-team .score-mini-logo {
        margin: 0 8px !important;
        width: 36px !important; /* Un poil plus gros */
        height: 36px !important;
    }
    
    /* On resserre la zone de score */
    .sb-score-zone {
        padding: 0 !important; 
    }
}

@media screen and (max-width: 768px) {
	.nav-links a {
		margin-left: 1rem;
	}
	
    .lang-select {
        margin-left: 5px;
    }
	
	/* On passe la boîte de recherche en colonne */
    .search-row {
        flex-direction: column; /* Empile les éléments */
        align-items: stretch;   /* Force la largeur maximale */
        gap: 10px;              /* Espace entre les champs */
    }

    /* On ajuste le "VS" pour qu'il soit bien centré au milieu */
    .vs-divider {
        text-align: center;
        padding: 5px 0;
        font-size: 1.2rem;
        width: 100%;
    }

    /* On s'assure que les groupes d'input prennent 100% de la largeur */
    .input-group {
        width: 100%;
        margin-bottom: 5px;
    }

    /* Réduire un peu le padding de la grosse boîte sur mobile */
    .quick-match-box {
        padding: 20px;
    }
	
	/* On laisse la largeur nécessaire */
	.dropdown-results {
		right: auto;
	}
	
	.vs-divider-container {
        flex-direction: row;
        justify-content: center;
        width: 100%;
        margin: 10px 0;
    }
	
	/* Formation, Tactique et Bouton chacun sur leur ligne */
    .team-controls {
        flex-direction: column;
        align-items: center;
        width: 100%;
		padding: 0 20px; 
        box-sizing: border-box;
    }
	
	.team-controls select,
    .team-controls button {
        width: 100%; 
        max-width: 225px; /* Empêche les éléments de s'étirer à l'infini */
    }

    /* Empiler Starting XI, Bench et Reserve */
    .squad-columns {
        display: flex; 
        flex-direction: column;
        gap: 20px; /* Un peu d'air entre chaque section */
    }

    .squad-col {
        width: 100%; /* S'assure que chaque section prend toute la largeur de l'écran */
		margin-left: 5px;
    }
}


/* PC - On cache le bouton Pitch par défaut */
.mobile-pitch-btn {
    display: none;
}

/* MOBILE (< 900px pour englober les tablettes et téléphones) */
@media screen and (max-width: 900px) {
    /* 1. On affiche le 4e bouton */
    .mobile-pitch-btn {
        display: inline-block !important; 
    }

    /* 2. On casse la hauteur fixe de 830px et on empile les panneaux */
    .content-split {
        flex-direction: column !important;
        height: calc(100vh - 120px) !important; /* Hauteur dynamique ! */
        border-bottom: none !important;
    }

    /* 3. Le panneau gauche prend toute la largeur. Sa hauteur va s'écraser s'il est vide. */
    .left-panel {
        width: 100% !important;
        height: auto !important; 
        flex: none !important;
        border-right: none !important;
    }

    /* 4. Le panneau droit (Terrain) est caché par défaut sur mobile */
    .right-panel {
        width: 100% !important;
        display: none !important; 
        flex: 1 !important; /* S'il est affiché, il prend tout l'espace sous les onglets */
    }

    /* 5. La classe qui sera activée par JS pour afficher le terrain */
    .right-panel.show-on-mobile {
        display: flex !important;
    }
}