/* css/style.css (Version avec correctif affichage mobile) */
:root { --primary-color: #006233; --secondary-color: #E8B400; --light-gray: #F5F5DC; --dark-text: #333; --border-color: #ddd; --white-bg: rgba(255, 255, 255, 0.85); }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: var(--light-gray); background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><g fill="%23006233" fill-opacity="0.04"><path d="M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm44 44c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm44-44c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zM11 82c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7z"/><path d="M50 2c-26.4 0-48 21.6-48 48s21.6 48 48 48 48-21.6 48-48S76.4 2 50 2zm0 88c-22 0-40-18-40-40s18-40 40-40 40 18 40 40-18 40-40 40z"/></g></svg>'); color: var(--dark-text); display: flex; justify-content: center; padding: 20px 10px; margin: 0; }
.main-container { width: 100%; max-width: 1100px; position: relative; }
.header-container { text-align: center; margin-bottom: 20px; }
h1 { color: var(--primary-color); margin-bottom: 10px; font-size: 2em; font-family: "Georgia", serif; }
h2 { text-align: center; border-bottom: 2px solid var(--primary-color); padding-bottom: 10px; margin-top: 0; margin-bottom: 20px; }
.container { margin-bottom: 25px; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); background-color: var(--white-bg); backdrop-filter: blur(5px); }
.action-button { background-color: var(--secondary-color); color: var(--primary-color); border: 1px solid var(--primary-color); padding: 10px 20px; border-radius: 5px; font-size: 1em; cursor: pointer; transition: all 0.3s; font-weight: bold; }
.action-button:hover { background-color: var(--primary-color); color: white; }
.tabs-nav { display: flex; flex-wrap: wrap; border-bottom: 2px solid var(--primary-color); margin-bottom: 20px; }
.tab-btn { padding: 10px 15px; cursor: pointer; border: none; background-color: transparent; font-size: 1em; font-weight: bold; color: var(--primary-color); opacity: 0.7; border-bottom: 3px solid transparent; transition: all 0.3s ease; }
.tab-btn.active { opacity: 1; border-bottom-color: var(--secondary-color); }
.tab-content { display: none; }
.tab-content.active { display: block; }
.table-responsive { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 5px; text-align: center; vertical-align: middle; }
th { background-color: rgba(0, 98, 51, 0.1); font-size: 0.9em; }
.ranking-table th, .ranking-table td { border: 1px solid var(--border-color); }
.matches-table, .knockout-match-container { margin-bottom: 10px; }
.matches-table table { border-collapse: separate; border-spacing: 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color); }
.matches-table tr:not(:last-child) { border-bottom: 1px solid var(--border-color); }
.matches-table td { border: none; padding: 12px 8px; }
.team-flag { width: 24px; height: auto; vertical-align: middle; margin-right: 10px; border: 1px solid #f0f0f0; }
.vs { font-weight: bold; }
.score-input { width: 40px; height: 30px; text-align: center; font-size: 1.1em; border: 1px solid #ccc; border-radius: 4px; }
.score-input:disabled { background-color: #f0f0f0; cursor: not-allowed; }
.score-input { -moz-appearance: textfield; appearance: none; }
.score-input::-webkit-outer-spin-button, .score-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@media (min-width: 1024px) { .score-input { -moz-appearance: auto; appearance: auto; } .score-input::-webkit-outer-spin-button, .score-input::-webkit-inner-spin-button { -webkit-appearance: auto; } }
footer { text-align: center; font-size: 0.8em; color: #777; margin-top: 30px; }
footer a { color: #555; text-decoration: none; }
.penalty-selector { display: none; align-items: center; justify-content: center; gap: 8px; padding: 8px; background-color: #fff8e1; border-radius: 5px; margin-top: -10px; border: 1px solid var(--border-color); border-top: none; }
.penalty-winner-btn { padding: 4px 8px; border: 1px solid var(--border-color); background-color: white; cursor: pointer; border-radius: 4px; font-size: 0.9em; }
.penalty-winner-btn.active { background-color: var(--primary-color); color: white; border-color: var(--primary-color); font-weight: bold; }



/* =================================================================== */
/* Responsive pour les smartphones (max-width: 768px)                  */
/* =================================================================== */
@media (max-width: 768px) {

    /* --- Optimisation du Tableau de Classement --- */
    .ranking-table th:first-child,
    .ranking-table td:first-child {
        display: none;
    }
    .ranking-table th,
    .ranking-table td {
        padding-left: 4px;
        padding-right: 4px;
        font-size: 0.9em;
    }
    .ranking-table td:nth-child(2) {
        text-align: left;
        white-space: nowrap;
    }
    
    /* --- Affichage "Carte" pour la Liste des Matchs --- */
    .matches-table-container .matches-table {
        border: none;
        background: none;
    }
    .matches-table-container .matches-table table, 
    .knockout-match-container .matches-table table {
        border: 1px solid var(--border-color);
        border-radius: 8px;
        margin-bottom: 0;
        display: block;
        padding: 10px;
    }
    .matches-table-container .matches-table tr, 
    .knockout-match-container .matches-table tr {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas:
            "date date date"
            "teamA vs teamB"
            "scoreA vs scoreB";
        gap: 10px 5px;
        align-items: center;
    }
    .matches-table-container .matches-table td, 
    .knockout-match-container .matches-table td {
        display: flex;
        justify-content: center; /* CORRECTION: On centre tout */
        align-items: center;
        width: 100% !important;
        text-align: center !important;
        padding: 5px 0 !important;
    }
    
    /* On assigne chaque cellule à sa zone dans la grille */
    .matches-table-container td:nth-child(1), .knockout-match-container td:nth-child(1) { grid-area: date; font-size: 0.9em; color: #555; border-bottom: 1px solid #eee; padding-bottom: 10px !important; }
    .matches-table-container td:nth-child(2), .knockout-match-container td:nth-child(2) { grid-area: teamA; font-size: 1.1em; /* CORRECTION: On retire justify-content: flex-end; */ }
    .matches-table-container td:nth-child(3), .knockout-match-container td:nth-child(3) { grid-area: scoreA; }
    .matches-table-container td:nth-child(4), .knockout-match-container td:nth-child(4) { grid-area: vs; }
    .matches-table-container td:nth-child(5), .knockout-match-container td:nth-child(5) { grid-area: scoreB; }
    .matches-table-container td:nth-child(6), .knockout-match-container td:nth-child(6) { grid-area: teamB; font-size: 1.1em; /* CORRECTION: On retire justify-content: flex-start; */ }

    .knockout-match-container .penalty-selector {
        justify-content: center;
        border-radius: 0 0 8px 8px;
        margin-bottom: 15px;
    }
}


/* --- Styles pour le lieu du match (Ville/Stade) --- */

/* Dans la liste mobile */
.match-venue {
    display: block;
    font-size: 0.75em;
    color: #666;
    margin-top: 4px;
    font-style: italic;
    line-height: 1.2;
}

/* Dans le Poster (Tableau de bord) */
.poster-venue {
    display: block;
    font-size: 0.65em;
    color: #888;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px; /* Évite que le nom du stade casse la colonne */
}

/* Nouveau style pour les dates */
.date-bloc {
    display: flex;
    flex-direction: column; /* L'un en dessous de l'autre */
    align-items: flex-start; /* Aligné à gauche */
    justify-content: center;
    line-height: 1.4; /* Espacement entre les deux lignes */
}

.date-ligne {
    font-weight: 600; /* Un peu gras */
    color: #444;      /* Gris foncé */
    font-size: 0.95rem;
    text-transform: capitalize; /* Force la majuscule */
}

.heure-ligne {
    font-weight: bold;
    color: #000;      /* Noir pour l'heure */
    font-size: 1.1rem; /* L'heure un peu plus grosse */
}

/* --- CORRECTIF CENTRAGE DATE ET HEURE --- */

/* 1. Force le centrage de la première colonne (la case date) */
.matches-table td:first-child {
    text-align: center !important; /* Force le texte au milieu */
    padding-left: 0 !important;    /* Enlève le décalage à gauche */
    vertical-align: middle !important; /* Centre en hauteur */
}

/* 2. Centre l'heure sous la date */
.date-bloc {
    display: flex;
    flex-direction: column; /* Empile date et heure */
    align-items: center;    /* Centre l'alignement vertical */
    justify-content: center;
    width: 100%;            /* Prend toute la largeur dispo */
}

.date-ligne {
    font-weight: bold;
    margin-bottom: 2px;     /* Petit espace entre date et heure */
    text-transform: capitalize;
}

.heure-ligne {
    font-weight: normal;
    color: #000;
}