: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;
}

/* LIMIT BADGE */
.limit-badge { 
	background: rgba(0,0,0,0.3);
	padding: 8px 15px;
	border-radius: 20px;
	font-size: 0.9rem;
	border: 1px solid rgba(255,255,255,0.1); 
}
.limit-badge strong {
	color: var(--accent);
}
.section-header { display: flex; justify-content: space-between; align-items: center; margin: 2rem 0 1rem 0; border-left: 4px solid var(--primary); padding-left: 10px; }
.section-header h2 { margin: 0; font-size: 1.5rem; color: #fff; border-left: none; padding-left: 0; }

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

/* --- ALIGNEMENT PC POUR LE GROUPE LANGUE + PROFIL --- */
.nav-auth-buttons {
    display: flex;
    align-items: center;
    gap: 20px; /* Conserve le même espacement qu'avant entre la langue et le profil */
}

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

/* Conteneur du nom d'utilisateur */
.user-name-wrapper {
    display: flex;
    align-items: center;
    font-weight: bold;
}

/* Badge d'abonnement dans le header */
.plan-badge {
    font-size: 0.65rem;
    background: var(--primary);
    color: #000;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Badge d'environnement dans le header (LOCAL / DEV / PROD) -- couleur définie inline
   par header.php selon getAppEnv(), voir includes/db_connect.php */
.env-badge {
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: transparent;
}
@media (max-width: 768px) {
    .env-badge { display: none; }
}

/* NOTIFICATIONS ICON */
.nav-icon-btn { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: 0.2s; 
    position: relative; 
    color: white;
    margin-right: 15px; /* Espace avant le dropdown des langues */
}
.nav-icon-btn:hover { 
    color: var(--primary); 
    transform: scale(1.1); 
}
.notif-badge { 
    position: absolute; 
    top: -6px; 
    right: -8px; 
    background: #e74c3c; 
    color: white; 
    font-size: 0.7rem; 
    font-weight: bold; 
    padding: 2px 5px; 
    border-radius: 10px; 
    line-height: 1; 
    border: 2px solid rgba(15, 23, 42, 0.8); /* Contour couleur de la navbar */
}

/* --- 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: 750; /* IMPORTANT: Plus petit que .navbar (1000) 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):not(.tos-container) {
        transition: padding-left 0.3s ease;
    }

    body.menu-open > *:not(.navbar):not(.menu-sidebar):not(.global-notification):not(.modal-overlay):not(.tos-container) {
        transform: none;
        padding-left: 250px;
    }

    /* .tos-container (pages en/ et fr/ : contact, terms, about, etc.) est un cadre à
       largeur fixe centré via "margin: auto" -- lui appliquer le même padding-left
       que ci-dessus l'élargirait et écraserait son contenu vers la droite au lieu de
       le déplacer. On le recentre plutôt dans l'espace restant en le décalant de la
       moitié de la largeur du menu (250px / 2), ce qui recentre le cadre sans jamais
       toucher à sa largeur ni à celle de son contenu. */
    .tos-container {
        transition: transform 0.3s ease;
    }

    body.menu-open .tos-container {
        transform: translateX(125px);
    }
}

/* 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: 1999; /* 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: 1500;
        /*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;
    }
	
	/* 5. Ajustement du sélecteur de langue dans le menu mobile */
    .nav-auth-buttons .custom-lang-dropdown {
        width: 100%;
        display: flex;
        justify-content: flex-end; /* Aligne le bouton à droite comme le reste */
        margin-bottom: 5px;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* Petite ligne de séparation propre */
    }

    /* 6. S'assurer que le sous-menu des langues s'ouvre du bon côté sur mobile */
    .nav-auth-buttons .custom-lang-dropdown .lang-menu {
        right: 0;
        top: 100%;
    }
}

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

/* -------------- BLOG ------------------- */
.btn-blog-read {
    background-color: var(--primary);
    color: #ffffff !important;
    padding: 10px 24px;
    border-radius: 8px;
    text-decoration: none;
    display: inline-block;
    font-weight: 600;
    font-size: 0.95rem;
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-blog-read:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); /* Ajuste la couleur rgba selon la valeur hex exacte de ton --primary */
}

/* =========================================
   TERMS OF SERVICE / CONDITIONS D'UTILISATION
   ========================================= */

.tos-container {
    max-width: 900px;
    margin: 40px auto;
    padding: 50px;
    background: var(--bg-card); /* Utilisation de ton fond Slate Blue-ish */
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.tos-header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.tos-header h1 {
    color: var(--text-main);
    font-size: 2.5rem;
    margin-bottom: 10px;
    font-weight: 800;
}

.tos-header p {
    color: var(--primary); /* L'Emerald Green pour faire ressortir la date */
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tos-section {
    margin-bottom: 35px;
    scroll-margin-top: 100px; /* Évite que la navbar sticky (~78px) ne masque le titre visé par un lien #ancre */
}

.tos-section h2 {
    color: var(--text-main);
    font-size: 1.4rem;
    margin-bottom: 15px;
    padding-left: 12px;
    border-left: 4px solid var(--primary); /* Rappel de tes section-headers */
    line-height: 1.2;
}

.tos-section p {
    color: var(--text-dim);
    line-height: 1.7;
    font-size: 1rem;
    margin-bottom: 15px;
}

.tos-section strong {
    color: var(--text-main);
    font-weight: 600;
}

/* Mise en évidence des éléments techniques comme les noms de fichiers */
.tos-section code {
    background: var(--bg-dark);
    color: var(--accent); /* Amber pour les éléments de code ou liens internes */
    padding: 3px 8px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.9em;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

/* Liens dans les blocs de texte légaux (ToS, Privacy, table des matières, etc.) --
   remplace le bleu/violet par défaut du navigateur par les couleurs du thème.
   Réutilisable pour toute future page utilisant .tos-section. */
.tos-section a {
    color: var(--primary);
    text-decoration: none;
}
.tos-section a:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}
.tos-section a:visited {
    color: var(--primary);
}

/* --- RESPONSIVE POUR MOBILE --- */
@media screen and (max-width: 768px) {
    .tos-container {
        margin: 20px 15px;
        padding: 30px 20px;
    }
    
    .tos-header h1 {
        font-size: 2rem;
    }

    .tos-section h2 {
        font-size: 1.2rem;
    }
    
    .tos-section p {
        font-size: 0.95rem;
    }
}

/* 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: 3000;
    
    /* 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;
    text-decoration: none;
    text-align: center;
    display: block;
}

.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);
}

/* --- COULEURS DES OVERALL (OVR) --- */
.ovr-90 { background-color: #3b82f6 !important; color: #ffffff !important; } /* Bleu */
.ovr-80 { background-color: #15803d !important; color: #ffffff !important; } /* Vert foncé */
.ovr-70 { background-color: var(--primary) !important; color: #000000 !important; } /* Vert (Primary) */
.ovr-60 { background-color: #eab308 !important; color: #000000 !important; } /* Jaune */
.ovr-50 { background-color: #f97316 !important; color: #ffffff !important; } /* Orange */
.ovr-40 { background-color: #ef4444 !important; color: #ffffff !important; } /* Rouge (49-) */


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

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

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

/* Modificateurs de taille pour les inputs de recherche et listes */
.team-logo.mini { 
    width: 24px !important;
    height: 24px !important; 
    border-width: 1px !important; /* Bordure plus fine sur les petits formats */
    flex-shrink: 0 !important;
	--stripe-1: 4px;
    --stripe-2: 6px;
}
.team-logo.medium { 
    width: 29px !important; 
    height: 29px !important; 
    border-width: 2px !important;
    flex-shrink: 0 !important;
	--stripe-1: 5px;
    --stripe-2: 7px;
}

.team-logo.big { 
	--stripe-1: 9px;
    --stripe-2: 14px;
}

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

/* Provenance d'une équipe dans les résultats de recherche : dataset (vert) vs ligue (or) */
.team-badge { font-weight: 600; }
.team-badge.badge-dataset { color: var(--primary); }
.team-badge.badge-league { color: var(--accent); }
.res-item:hover .team-badge { color: var(--bg-dark); }

/* SUPER LEAGUE SHOWCASE */
.showcase-table { width: 100%; border-collapse: collapse; background: rgba(0,0,0,0.2); border-radius: 8px; overflow: hidden; margin-top: 1.5rem; }
.showcase-table th { background: rgba(0,0,0,0.4); color: var(--text-dim); padding: 12px 10px; text-align: center; font-size: 0.85rem; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,0.1); }
.showcase-table td { padding: 12px 10px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.05); color: var(--text-main); font-weight: bold; }
.showcase-table tr:hover td { background: rgba(255,255,255,0.05); }
.showcase-table th:nth-child(2), .showcase-table td:nth-child(2) { text-align: left; }

/* STATS */
/*.stats-section { padding: 50px 5%; }*/
.stats-section {
	 max-width: 1200px;
	 margin: 2rem auto;
	 padding: 50px 1.5rem;
}
.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;
}*/
.dropzone {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 575px; /* Aligne la hauteur max sur environ 11 joueurs */
    overflow-y: auto;  /* Active le scroll vertical si ça dépasse */
    padding-right: 5px; /* Évite que le scroll colle aux cartes de joueurs */
}

/* Optionnel : Rend la barre de défilement discrète et moderne */
.dropzone::-webkit-scrollbar { width: 6px; }
.dropzone::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); border-radius: 4px; }
.dropzone::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }
.dropzone::-webkit-scrollbar-thumb:hover { background: var(--primary); }

.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);
}

.player-card .p-name {
    flex-grow: 1; 
    text-align: left; 
    margin-left: 10px; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-card .p-ovr {
    flex-shrink: 0;
}

.player-card .p-pos {
    flex-shrink: 0;
    text-align: right;
    min-width: 30px; /* Assure que "CAM" et "ST" prennent la même largeur visuelle */
}

/* Badge OVR/ATT/MID/DEF unifié -- couleur de fond fournie par getOvrColorClass() (voir
   moteur_quick_func.php / assets/js/func.js), qui ajoute une classe .ovr-90..ovr-40 à côté.
   .p-ovr = badge compact accolé au nom d'un joueur dans une liste/carte ; .ovr-badge = badge
   autonome (stat d'équipe, tableau, tirage au sort). Anciennement redéfini séparément (et de
   façon incohérente) dans 10 fichiers -- centralisé ici. */
.p-ovr, .ovr-badge {
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block;
    min-width: 25px;
    text-align: center;
}
.p-ovr { margin-right: 10px; }

.card-locked .p-ovr, .card-locked .ovr-badge {
    background: rgba(255,255,255,0.2) !important;
    color: var(--text-dim) !important;
}

/* Badge de note (MatchRating/AvgRating) dans Player Stats -- même forme carrée/coin arrondi que
   .ovr-badge, fond fourni par .rating-excellent/good/average/poor (voir plus bas, couleur
   partagée avec les bulles de note du simulateur dans getRatingHtml() / assets/js/func.js).
   Couleur de texte fixée par palier (même paire que les .ovr-XX équivalents) avec !important :
   sans ça, quand la colonne est triée, le .active-sort-col de la <td> parente (color !important)
   rend le chiffre illisible sur fond vert (vert sur vert) -- même logique que pour l'overall,
   qui gagne toujours grâce à la même technique sur .ovr-90..ovr-40. */
/* Badge -15% par rapport à .ovr-badge (padding/min-width/font-size) : la note affiche
   désormais 2 décimales (ex: 7.23) et prend plus de place que l'OVR à 2 chiffres. */
.rating-badge {
	color: #fff;
	font-size: 0.85em;
	padding: 2.5px 6.8px;
	min-width: 21px;
}
.rating-badge.rating-excellent { color: #ffffff !important; } /* Vert foncé (primary-hover) */
.rating-badge.rating-good { color: #000000 !important; } /* Vert (primary), comme .ovr-70 */
.rating-badge.rating-average { color: #ffffff !important; } /* Orange, comme .ovr-50 */
.rating-badge.rating-poor { color: #ffffff !important; } /* Rouge, comme .ovr-40 */

.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; 
}
.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;
    min-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 */
}
/* On cache le bouton Pitch pour mobile par défaut */
.mobile-pitch-btn {
    display: none;
}
/* 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;
}

/* Le widget CookieYes est injecté en DOM léger (pas de Shadow DOM), donc notre
   règle globale "button {}" ci-dessus (padding/border-radius/transition) lui est
   appliquée par erreur et déforme son icône flottante (ovale au lieu du rond).
   On neutralise ces propriétés sur tout élément CookieYes pour lui laisser son
   propre style intact.
   ATTENTION : [class^="cky-"] et [class*=" cky-"] sont volontairement ancrés
   (début de chaîne, ou précédé d'un espace) pour ne matcher qu'un vrai token de
   classe "cky-...". Un [class*="cky-"] non ancré (comme sur la ligne "button"
   ci-dessous avant correctif) matche N'IMPORTE QUEL nom de classe contenant la
   sous-chaîne "cky-" au milieu d'un mot - ex: "has-sti[cky-]ad" (classe posée sur
   <body> par includes/footer.php quand la pub sticky est affichée) - et comme
   <body> est l'ancêtre de tous les boutons du site, ça neutralisait le style de
   TOUS les boutons dès que la pub sticky était visible. */
[class^="cky-"] button,
[class*=" cky-"] button,
[class^="cky-"],
[class*=" cky-"] {
	padding: revert;
	border-radius: revert;
	transition: revert;
}

/* Empêche tout chevauchement visuel entre la bulle CookieYes et le menu latéral
   quand celui-ci est ouvert (mobile comme desktop) */
body.menu-open .cky-btn-revisit-wrapper {
	display: none !important;
}

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

/* 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;
    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 2px 4px rgba(0,0,0,0.5)) !important;
}
*/

/* =========================================
   FLS - TEAM LOGO SYSTEM
   ========================================= */
.team-logo { 
    width: 41px; 
    height: 41px; 
    border-radius: 50%; /* Fallback par défaut */
    background: var(--logo-bg, #cccccc); 
    border: 2px solid var(--logo-border-color, transparent);
    box-sizing: border-box;
    transition: all 0.3s ease;
    display: inline-block;
    background-size: cover;
    background-position: center;
	--stripe-1: 7px;
    --stripe-2: 10px;
}

/* Formes standards */
.circle { border-radius: 50% !important; }
.square { border-radius: 4px !important; }
.shield { border-radius: 2px 2px 50% 50% !important; }

/* Forme Crest (clip-path) avec gestion de bordure interne */
.crest { 
    /* 1. Le bloc parent devient la bordure solide */
    background: var(--logo-border-color, transparent) !important; 
    clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 50% 100%, 0% 70%) !important; 
    border-radius: 0 !important; 
    border: none !important; 
    position: relative; /* Essentiel pour positionner l'intérieur */
}

/* 2. Le pseudo-élément devient l'intérieur du logo avec le motif/couleur */
.crest::after {
    content: "";
    position: absolute;
    /* L'espacement (inset) définit l'épaisseur de ta bordure, ici 2px */
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: var(--logo-bg); /* Applique la couleur ou les rayures */
    clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 50% 100%, 0% 70%);
    display: block;
}

.crest.big::after {
	top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
}

/* Forme Crest (clip-path) */
/*.crest { 
    clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 50% 100%, 0% 70%) !important; 
    border-radius: 0 !important; 
    border: none !important; 
    filter: 
        drop-shadow(2px 0 0 var(--logo-border-color)) 
        drop-shadow(-2px 0 0 var(--logo-border-color)) 
        drop-shadow(0 2px 0 var(--logo-border-color)) 
        drop-shadow(0 -2px 0 var(--logo-border-color));
}*/

.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 scoreFlashAnim {
	0% { background-color: #e74c3c; }
	100% { background-color: #000; }
}
@keyframes flashShootout {
	0% { background-color: var(--primary-hover); color: white; }
	100% { background-color: var(--bg-card); color: var(--text-main); }
}
@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 */
@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;
    }
}

@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, mais RESPECTE la hauteur de l'écran pour scroller */
    .left-panel {
        width: 100% !important;
        flex: 1 !important; /* Prend l'espace disponible au lieu de "none" */
        height: 100% !important; /* Force la limite de hauteur */
        border-right: none !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important; /* Empêche le débordement global */
    }

    /* 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;
    }
	
	/* 6. Annule le 100% de hauteur du left-panel quand on regarde le pitch (right-panel) */
	.left-panel.pitch-mode {
        flex: none !important;
        height: auto !important;
    }
}

@media screen and (max-width: 768px) {
	.nav-links a {
		margin-left: 1rem;
	}
	
    .lang-select {
        margin-left: 5px;
    }
	
	.user-name-wrapper {
        flex-direction: column;      /* On empile les éléments verticalement */
        align-items: flex-end;       /* Aligne tout à droite (ajuste à 'flex-start' ou 'center' selon ton design) */
        line-height: 1.2;
    }

    .plan-badge {
        margin-left: 0;              /* On enlève la marge de gauche */
        margin-top: 2px;             /* On ajoute un petit espace au-dessus */
        font-size: 0.6rem;           /* Optionnel : on rapetisse un tout petit peu le badge sur mobile */
    }
	
	/* 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;
    }
}

@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: 532px) {
    .team-logo {
        --stripe-1: 4px;
        --stripe-2: 6px;
    }
	.team-logo.score-mini-logo {
        --stripe-1: 6px;
        --stripe-2: 9px;
    }
}