:root {
    --primary: #0f3d6b;
    --accent: #c9d8f7;
    --bg: #f0f2f5;
    --card: #ffffff;
    --border: #e4e6eb;
}

body {
    margin: 0; font-family: 'Montserrat', sans-serif;
    background-color: var(--bg); color: #1c1e21;
    padding-bottom: 70px;
}

/* HEADER */
.main-header {
    background: var(--primary); color: white;
    padding: 12px 20px; position: sticky; top: 0; z-index: 1000;
}
.header-container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.logo { font-family: 'Barlow Condensed', sans-serif; font-size: 1.6rem; font-weight: 800; }
.logo span { color: var(--accent); }

/* DASHBOARD GRID */
.dashboard-grid {
    display: grid; grid-template-columns: 1fr 380px;
    gap: 20px; max-width: 1200px; margin: 20px auto; padding: 0 15px;
}

.card {
    background: var(--card); border-radius: 12px;
    border: 1px solid var(--border); overflow: hidden;
}
.card-header { background: #f8f9fa; padding: 12px 20px; border-bottom: 1px solid var(--border); }
.card-header h2 { margin: 0; font-size: 0.95rem; color: var(--primary); display: flex; align-items: center; gap: 10px; }

/* MATCH CARDS */
.match-card { display: flex; align-items: center; padding: 12px 20px; border-bottom: 1px solid #f0f2f5; }
.m-status { width: 70px; display: flex; flex-direction: column; }
.m-date { font-size: 0.7rem; color: #888; }
.m-hour { font-size: 0.85rem; font-weight: 700; }
.m-teams { flex: 1; }
.m-team { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 0.95rem; height: 25px; }
.team-logo-small { width: 20px; height: 20px; object-fit: contain; }
.m-scores { font-family: 'Barlow Condensed', sans-serif; font-size: 1.2rem; font-weight: 700; text-align: right; }
.live-text .m-hour { color: var(--accent); }

/* TABLEAU CLASSEMENT */
table { width: 100%; border-collapse: collapse; }
table th { text-align: left; font-size: 0.7rem; color: #888; padding: 10px; text-transform: uppercase; border-bottom: 1px solid var(--border); }
table td { padding: 10px; border-bottom: 1px solid #f9f9f9; font-size: 0.85rem; }
.team-cell-mini { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.top-rank { background-color: #f0f7ff; } /* Couleur légère pour les 3 premiers */
.txt-center { text-align: center; }
.font-bold { font-weight: 700; }

/* NAVIGATION BASSE */
.mobile-nav {
    position: fixed; bottom: 0; left: 0; right: 0; background: white;
    display: flex; justify-content: space-around; padding: 10px 0;
    border-top: 1px solid var(--border); z-index: 1001;
}
.nav-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #65676b; font-size: 0.65rem; font-weight: 600; }
.nav-item i { font-size: 1.3rem; margin-bottom: 4px; }
.nav-item.active { color: var(--primary); }

/* RESPONSIVE */
@media (max-width: 900px) {
    .dashboard-grid { grid-template-columns: 1fr; }
    .ranking { order: 2; }
}

/* --- TABLEAU RESPONSIVE AVEC COLONNE FIXE --- */
.table-responsive {
    width: 100%;
    overflow-x: auto; /* Permet le glissement horizontal */
    -webkit-overflow-scrolling: touch;
}

.rank-table {
    width: 100%;
    border-collapse: separate; /* Important pour le sticky */
    border-spacing: 0;
}

/* On fixe la colonne équipe (la 2ème colonne) */
.rank-table th:nth-child(2), 
.rank-table td:nth-child(2) {
    position: sticky;
    left: 0;
    background-color: white; /* Fond opaque pour ne pas voir le texte dessous */
    z-index: 10;
    min-width: 140px;
    border-right: 1px solid #eee;
    box-shadow: 2px 0 5px rgba(0,0,0,0.05); /* Petite ombre pour séparer */
}

.rank-table th { background-color: #f8f9fa; }

/* --- FORME : CARRÉS ARRONDIS SANS LETTRES --- */
.form-container {
    display: flex;
    gap: 5px; /* Espace entre les carrés */
    justify-content: center;
    align-items: center;
    height: 100%;
}

.form-dot {
    width: 10px;        /* Taille réduite car pas de lettre */
    height: 10px;
    border-radius: 3px;  /* Carrés arrondis */
    display: inline-block;
}

/* Couleurs Flashscore */
.form-V { background-color: #00c067; } /* Victoire - Vert */
.form-N { background-color: #888da8; } /* Nul - Gris/Bleu */
.form-D { background-color: #ff0046; } /* Défaite - Rouge */
.form-null { background-color: #e4e6eb; } /* Non joué - Gris clair */

/* Zebra stripes pour la lisibilité */
.rank-table tbody tr:nth-child(even) td { background-color: #fafafa; }
.rank-table tbody tr:nth-child(even) .col-sticky-1,
.rank-table tbody tr:nth-child(even) .col-sticky-2 { background-color: #fafafa !important; }


/* En-tête de Ligue style Flashscore */
.league-header-pro {
    background: #f8f9fa;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--primary);
}

.league-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.country-flag {
    width: 35px;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.country-name {
    font-size: 0.75rem;
    font-weight: 700;
    color: #888;
    display: block;
    margin-bottom: 2px;
}

.league-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--primary);
}

.league-season {
    font-weight: 700;
    color: #666;
    background: #eee;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
}

/* Groupement par date */
.date-group-header {
    background: #eee;
    padding: 8px 20px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #555;
    border-top: 1px solid #ddd;
}

.date-matches {
    background: white;
}

.date-matches .match-card {
    border-bottom: 1px solid #f0f0f0;
}

/* --- GRILLE DES ÉQUIPES --- */
#teams-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* 3 ou 4 colonnes sur PC */
    gap: 15px;
    padding: 20px;
    background-color: #f0f2f5;
}

.team-card-pro {
    background: white;
    border: 1px solid #e4e6eb;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 12px 15px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.team-card-pro:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.team-card-logo {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 6px;
    margin-right: 15px;
    flex-shrink: 0;
}

.logo-elegant {
    width: 30px; /* Taille élégante, ni trop petite ni trop grande */
    height: 30px;
    object-fit: contain;
}

.team-card-info {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.team-name-text {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--primary);
}

.arrow-icon {
    font-size: 0.8rem;
    color: #ccc;
    transition: color 0.2s;
}

.team-card-pro:hover .arrow-icon {
    color: var(--accent);
}

/* Responsive Mobile */
@media (max-width: 600px) {
    #teams-grid-container {
        grid-template-columns: 1fr; /* Une seule colonne sur mobile */
        padding: 10px;
    }
    .team-card-pro {
        padding: 10px;
    }
}

/* --- LAYOUT PROFIL ÉQUIPE --- */
.team-stats-layout {
    display: grid;
    grid-template-columns: 1fr 350px; /* Stats larges | Matchs étroits */
    gap: 20px;
    padding: 0 15px 20px 15px;
}

/* GRILLE KPI (Stats rapides) */
.stats-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 15px;
    margin: 0 15px 20px 15px;
}

.kpi-box {
    background: white;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #eee;
    text-align: center;
}

.kpi-value {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-primary);
    font-family: var(--font-title);
}

.kpi-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    font-weight: 700;
    color: #888;
}

/* GRAPHIQUES ET LISTES */
.charts-row, .rankings-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.chart-container {
    padding: 15px;
    height: 250px;
}

.stats-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.stats-list li {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    border-bottom: 1px solid #f5f5f5;
    font-size: 0.9rem;
}

.stats-list li:last-child { border-bottom: none; }

/* RESPONSIVE */
@media (max-width: 900px) {
    .team-stats-layout, .charts-row, .rankings-row {
        grid-template-columns: 1fr;
    }
}


.form-container-profile { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.form-dot { 
    width: 22px; height: 22px; border-radius: 4px; 
    display: flex; align-items: center; justify-content: center; 
    font-size: 0.7rem; font-weight: 800; color: white; 
}
.form-V { background-color: #00c067; } /* Victoire */
.form-N { background-color: #888da8; } /* Nul */
.form-D { background-color: #ff0046; } /* Défaite */
.winner { font-weight: 700; color: #000; }

/* Header Profil Équipe */
.team-header-card {
    background: linear-gradient(to right, var(--color-primary), #4a35c5);
    padding: 30px;
    border-radius: 12px;
    color: white;
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.team-logo-large {
    width: 90px;
    height: 90px;
    object-fit: contain;
    background: white;
    padding: 10px;
    border-radius: 15px;
    margin-right: 25px;
}

.league-context {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.league-context img { width: 18px; border-radius: 2px; }
.league-context span { font-size: 0.75rem; font-weight: 700; opacity: 0.9; text-transform: uppercase; }

.team-profile-name { font-size: 2rem; margin: 0; text-transform: uppercase; }

/* Table d'effectif */
.squad-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.squad-table th {
    text-align: left;
    padding: 12px;
    font-size: 0.75rem;
    color: var(--text-muted-color);
    border-bottom: 1px solid var(--border-color);
    text-transform: uppercase;
}

.squad-table td {
    padding: 15px 12px;
    border-bottom: 1px solid #f8f9fa;
    font-size: 0.95rem;
}

.player-number { font-weight: 800; color: var(--color-primary); width: 40px; }
.player-name-cell { font-weight: 600; }
.player-pos-cell { color: var(--text-muted-color); font-size: 0.85rem; }

.stat-badge {
    background: #f0edff;
    color: var(--color-primary);
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
}

/* Header Profil */
.team-header-card {
    background: linear-gradient(to right, #3521a6, #5d44ec);
    color: white; padding: 30px; border-radius: 12px;
    display: flex; align-items: center; margin-bottom: 25px;
}
.team-logo-large { 
    width: 85px; height: 85px; background: white; 
    padding: 10px; border-radius: 12px; margin-right: 20px; object-fit: contain; 
}
.league-context { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.league-context img { width: 18px; border-radius: 2px; }
.team-profile-name { font-size: 2rem; margin: 0; text-transform: uppercase; }

/* Table Squad */
.squad-table { width: 100%; border-collapse: collapse; margin-top: 15px; }
.squad-table th { text-align: left; padding: 10px; font-size: 0.75rem; color: var(--text-muted-color); border-bottom: 1px solid var(--border-color); }
.squad-table td { padding: 12px 10px; border-bottom: 1px solid #f8f9fa; }
.player-num { font-weight: 800; color: var(--color-primary); width: 30px; }
.player-name-bold { font-weight: 600; }

/* Form Dots */
.form-dots-container { display: flex; gap: 5px; margin-top: 5px; }
.form-dot {
    width: 24px; height: 24px; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    color: white; font-weight: 800; font-size: 0.75rem;
}
.form-V { background-color: #28a745; }
.form-N { background-color: #6c757d; }
.form-D { background-color: #dc3545; }

.stat-badge { background: #f0edff; color: #3521a6; padding: 2px 8px; border-radius: 4px; font-weight: 700; font-size: 0.85rem; }

/* Style pour la colonne de la photo */
.player-photo-cell {
    padding-right: 15px !important; /* Un peu d'espace avant le nom */
    text-align: center;
}

/* Style de la photo miniature */
.player-photo-mini {
    width: 45px;  /* Taille fixe */
    height: 45px; /* Taille fixe pour un carré parfait */
    border-radius: 50%; /* Rend l'image parfaitement ronde */
    object-fit: cover; /* Coupe l'image pour qu'elle remplisse le cercle sans être déformée */
    border: 2px solid #e9ecef; /* Petite bordure grise propre */
    background-color: #ddd; /* Couleur de fond pendant le chargement */
    display: block; /* Évite les espaces indésirables sous l'image */
}

/* Ajustement de l'alignement vertical dans le tableau */
.squad-table td {
    vertical-align: middle; /* Centre le nom et le poste par rapport à la photo */
}

/* --- NOUVELLE SECTION À PROPOS MODERNE --- */
.about-section-modern {
    margin-top: 50px;
    margin-bottom: 60px; /* Espace avant le bas de page */
    
    /* LIMITATION DE LA LARGEUR */
    max-width: 900px;    /* Tu peux baisser à 800px si tu le veux encore plus étroit */
    width: 95%;          /* Pour garder une marge sur les côtés sur tablette */
    margin-left: auto;   /* Centrage horizontal */
    margin-right: auto;  /* Centrage horizontal */
    
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    border-radius: 15px; /* On assure que les coins sont bien arrondis */
    overflow: hidden;
}

/* On s'assure que si c'est dans un Grid, ça ne force pas la largeur */
.dashboard-grid .about-section-modern {
    grid-column: auto; /* On annule le 1 / -1 si tu l'avais mis */
}

.about-modern-content {
    padding: 35px;
    background: #fff;
}

/* 1. Style du texte d'intro (Espace au début) */
.about-intro-styled {
    /* Créer l'espace visuel au début avec une bordure et du padding */
    border-left: 5px solid var(--color-primary);
    padding-left: 25px;
    margin-bottom: 40px;
}

.about-intro-styled p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #444;
    margin: 0;
    /* Optionnel: si tu veux vraiment un retrait de première ligne style livre :
    text-indent: 2rem; */
}

/* 2. Les 3 Carrés Arrondis (Features) */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes strictes */
    gap: 25px;
    margin-bottom: 40px;
}

.feature-box {
    background: #fff;
    padding: 25px 20px;
    border-radius: 20px; /* Carrés bien arrondis */
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Effet de relief */
    border: 1px solid #f0f0f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-box:hover {
    transform: translateY(-5px); /* Petit effet "hop" au survol */
    box-shadow: 0 8px 25px rgba(53, 33, 166, 0.15);
}

.feature-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: var(--color-primary);
    /* Fond coloré léger derrière l'icône */
    background: #f4f2ff;
    width: 70px;
    height: 70px;
    line-height: 70px;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
}

.feature-title {
    display: block;
    font-weight: 800;
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: #222;
}

.feature-desc {
    font-size: 0.85rem;
    color: #777;
}

/* Séparateur subtil */
.separator-modern {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #eee, transparent);
    margin: 40px 0;
}

/* 3. Section Équipe Moderne */
.team-title-modern {
    text-align: center;
    font-size: 1rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 35px;
}

.team-grid-modern {
    display: flex;
    justify-content: space-around; /* Espacement élégant */
    flex-wrap: wrap;
    gap: 30px;
}

.member-card-modern {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.member-photo-wrapper-modern {
    position: relative;
    width: 100px; /* Photos plus grandes */
    height: 100px;
    margin-bottom: 15px;
}

.member-img-modern {
    width: 100%;
    height: 100%;
    border-radius: 50%; /* Photos parfaitement rondes */
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.role-badge-modern {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: white;
    border: 3px solid #fff;
    font-size: 0.9rem;
}
.role-badge-modern.dev { background: var(--color-primary); }
.role-badge-modern.data { background: #00c067; }

.member-name-modern {
    font-weight: 800;
    font-size: 1.2rem;
    color: #222;
    display: block;
    margin-bottom: 5px;
}

.member-role-modern {
    font-size: 0.95rem;
    color: #666;
    background: #f8f9fa;
    padding: 4px 12px;
    border-radius: 12px;
}

/* Responsive pour le mobile */
@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: 1fr; /* Passe en 1 colonne sur mobile */
        gap: 15px;
    }
    .about-intro-styled {
        border-left-width: 3px;
        padding-left: 15px;
    }
    .team-grid-modern {
        flex-direction: column;
    }
}

/* --- AJUSTEMENTS DES TAILLES DE TEXTE (À PROPOS) --- */

/* 1. Le texte d'introduction */
.about-intro-styled p {
    font-size: 0.95rem; /* Passé de 1.1rem à 0.95rem */
    line-height: 1.6;
    color: #555;
}

/* 2. Les 3 carrés (Features) */
.feature-title {
    font-size: 0.95rem; /* Passé de 1.1rem à 0.95rem */
    font-weight: 700;
}

.feature-desc {
    font-size: 0.78rem; /* Passé de 0.85rem à 0.78rem */
    color: #888;
}

.feature-icon {
    font-size: 2rem; /* Légèrement plus petite aussi */
    width: 60px;
    height: 60px;
    line-height: 60px;
}

/* 3. La section Équipe */
.team-title-modern {
    font-size: 0.8rem; /* Plus discret */
    letter-spacing: 1.5px;
}

.member-name-modern {
    font-size: 1rem; /* Passé de 1.2rem à 1rem */
}

.member-role-modern {
    font-size: 0.8rem; /* Passé de 0.95rem à 0.8rem */
    padding: 3px 10px;
}

/* --- SECTION À PROPOS DÉFINITIVE --- */
.about-section-modern {
    margin-top: 50px;
    margin-bottom: 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.about-modern-content {
    padding: 30px;
}

/* Intro texte réduit */
.about-intro-styled {
    border-left: 4px solid var(--color-primary);
    padding-left: 20px;
    margin-bottom: 35px;
}

.about-intro-styled p {
    font-size: 0.92rem; /* Texte plus petit */
    line-height: 1.6;
    color: #555;
    margin: 0;
}

/* Grille des 3 carrés */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 35px;
}

.feature-box {
    background: #fcfcfd;
    padding: 20px 15px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid #f0f0f5;
    transition: transform 0.2s;
}

.feature-icon-small {
    font-size: 1.8rem;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.feature-title-small {
    display: block;
    font-weight: 700;
    font-size: 0.9rem;
    color: #333;
}

.feature-desc-small {
    font-size: 0.75rem;
    color: #888;
}

.separator-subtle {
    border: 0;
    height: 1px;
    background: #eee;
    margin: 30px 0;
}

/* Équipe style réduit */
.team-label {
    text-align: center;
    font-size: 0.75rem;
    color: #bbb;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 25px;
}

.team-grid-modern {
    display: flex;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
}

.member-card-mini {
    display: flex;
    align-items: center;
    gap: 15px;
}

.member-photo-circle {
    position: relative;
    width: 60px;
    height: 60px;
}

.img-fit {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.mini-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    color: white;
    border: 1.5px solid white;
}

.mini-badge.dev { background: var(--color-primary); }
.mini-badge.data { background: #00c067; }

.name-small {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
    color: #222;
}

.role-small {
    font-size: 0.78rem;
    color: #777;
}

.title-icon-small {
    font-size: 1rem;
    margin-right: 8px;
    color: var(--color-primary);
}

/* Mobile */
/* Ajustements pour le format Mobile */
@media (max-width: 700px) {
    
    /* On empile les éléments du grid 'À propos' */
    .features-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    /* --- C'EST ICI QUE LE CENTRAGE SE JOUE --- */
    .team-grid-modern {
        flex-direction: column; /* On met l'un sous l'autre */
        align-items: center;    /* ON CENTRE HORIZONTALEMENT */
        gap: 35px;             /* On laisse de l'espace entre les deux membres */
        text-align: center;
    }

    .member-card-modern {
        width: 100%;
        justify-content: center;
    }

    .about-intro-styled {
        padding-left: 15px;
        border-left-width: 3px;
    }
}