/* Fichier : style.css */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f4f4f9;
    color: #333;
    margin: 0;
    padding: 20px;
}

header {
    width: 100%;
    /* Ajoutez cette ligne : */
    box-sizing: border-box; 

    /* Vos autres styles existants pour le header (background, padding, etc.) */
    background-color: #2c3e50; 
    padding: 10px 20px; /* Exemple de padding */
    /* ... */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.container-footer {
    max-width: 1200px;
    margin: 0 auto;
    background-color: transparent;
    padding: 20px;
    border-radius: 8px;
}
tr.highlight td {
    background-color: #d4edda; /* Un vert clair */
    font-weight: bold;
}
h1, h2 {
    color: #2c3e50;
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}

th, td {
    padding: 12px;
    border: 1px solid #ddd;
    text-align: left;
}

th {
    background-color: #3498db;
    color: white;
    text-align: center;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

a {
    color: #3498db;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Couleurs pour les résultats des matchs */
.result-g { background-color: #d4edda !important; } /* Vert pour une victoire */
.result-n { background-color: #fff3cd !important; } /* Jaune pour un nul */
.result-p { background-color: #f8d7da !important; } /* Rouge pour une défaite */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}
.stat-box {
    background-color: #ecf0f1;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
}
.stat-box h3 {
    margin-top: 0;
    color: #7f8c8d;
}
.stat-box p {
    font-size: 24px;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 0;
}
/* AJOUTS POUR LES NOUVELLES STATS */
.stats-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.stats-list li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}
.stats-list li:last-child {
    border-bottom: none;
}

.goal-table {
    width: 100%;
}
.goal-table th {
    background-color: transparent;
    color: #333;
    text-align: left;
    width: 70px;
    border: none;
}
.goal-table td {
    border: none;
}
.bar {
    height: 20px;
    background-color: #2ecc71;
    border-radius: 3px;
    min-width: 1px;
}
.bar-conceded {
    background-color: #e74c3c;
}
/* AJOUT POUR METTRE EN AVANT L'ÉQUIPE DANS LES CLASSEMENTS */
tr.highlight td {
    background-color: #d4edda; /* Un vert clair */
    font-weight: bold;
}
.stats-grid-full {
    display: grid;
    grid-template-columns: 1fr; /* Une colonne pour que les tableaux s'étendent */
    gap: 20px;
    margin-bottom: 20px;
}
.mini-table {
    font-size: 0.9em;
}
tr.highlight-red td {
    background-color: #f8d7da; /* Un rouge clair */
}
.player-suspended a {
    color: #e74c3c !important; /* Rouge pour le lien du joueur suspendu */
    font-weight: bold;
}
.goal-table td:nth-child(2) {
    width: 120px; /* Réduit la largeur de la colonne du texte */
    white-space: nowrap; /* Empêche le texte de passer à la ligne */
}
/* Style pour les icônes de cartes */
.card-yellow, .card-red, .card-yellow-red {
    display: inline-block;
    width: 12px;
    height: 16px;
    border-radius: 2px;
    margin: 0 2px;
    vertical-align: middle;
}
.card-yellow {
    background-color: #f1c40f; /* Jaune */
}
.card-red {
    background-color: #e74c3c; /* Rouge */
}
.card-yellow-red {
    background: linear-gradient(135deg, #f1c40f 50%, #e74c3c 50%); /* Moitié jaune, moitié rouge */
}
/* Forme du moment sur index.php */
.form-cell span {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
    color: white;
    font-weight: bold;
    margin: 0 2px;
}
.form-v { background-color: #2ecc71; } /* Vert */
.form-n { background-color: #f39c12; } /* Orange */
.form-d { background-color: #e74c3c; } /* Rouge */

/* Pour centrer le texte dans les cellules de stats */
td.center {
    text-align: center;
}

/* Stat box pour l'analyse en infériorité */
.stat-box {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
}
/* Style pour la colonne Forme */
.form-cell span {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: white;
    font-weight: bold;
    border-radius: 50%;
    margin: 0 2px;
    font-size: 0.8em;
}
.form-v { background-color: #2ecc71; } /* Vert */
.form-n { background-color: #f1c40f; } /* Jaune */
.form-d { background-color: #e74c3c; } /* Rouge */

/* Style pour les icônes de cartes (si pas déjà présent) */
.card-yellow, .card-red, .card-yellow-red {
    display: inline-block;
    width: 12px;
    height: 16px;
    border-radius: 2px;
    margin-right: 5px;
    vertical-align: middle;
}
.card-yellow { background-color: #f1c40f; }
.card-red { background-color: #e74c3c; }
.card-yellow-red { background: linear-gradient(135deg, #f1c40f 50%, #e74c3c 50%); }

/* Style pour la modale en TIMELINE (remplace l'ancien style .modal) */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
}
.modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px 30px;
    border: 1px solid #888;
    width: 90%;
    max-width: 500px;
    border-radius: 8px;
    position: relative;
}
.close-button {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.match-result-link {
    font-weight: bold;
    cursor: pointer;
    color: #2980b9;
}
.match-result-link:hover {
    text-decoration: underline;
}
/* NOUVEAU : Style de la timeline */
#modalBody {
    position: relative;
    padding: 10px 0 10px 30px; /* Espace à gauche pour la ligne */
    max-height: 400px;
    overflow-y: auto;
}
#modalBody::before { /* La ligne verticale de la timeline */
    content: '';
    position: absolute;
    left: 10px;
    top: 15px;
    bottom: 15px;
    width: 4px;
    background-color: #e9ecef;
    border-radius: 2px;
}
#modalBody p {
    position: relative;
    margin: 15px 0;
    display: flex;
    align-items: center;
    font-size: 0.9em;
}
#modalBody p::before { /* Le cercle sur la ligne */
    content: '';
    position: absolute;
    left: -28px; /* Centre le cercle sur la ligne */
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #3498db;
    border: 3px solid white;
    z-index: 1;
}
#modalBody p i {
    color: #7f8c8d;
    margin-left: 8px;
}

/* Style pour le titre avec infobulle */
.title-with-tooltip {
    display: flex;
    align-items: center;
    gap: 10px; /* Espace entre le titre et l'icône */
}

/* Conteneur de l'infobulle */
.tooltip {
    position: relative;
    display: inline-block;
}

/* L'icône '?' */
.tooltip .tooltip-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    background-color: #bdc3c7; /* Gris clair */
    color: white;
    text-align: center;
    font-weight: bold;
    cursor: help;
}

/* Le texte de l'infobulle (caché par défaut) */
.tooltip .tooltip-text {
    visibility: hidden;
    width: 250px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Position au-dessus de l'icône */
    left: 50%;
    margin-left: -125px; /* Pour centrer */
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.9em;
    font-weight: normal;
}

/* Petite flèche sous l'infobulle */
.tooltip .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Afficher l'infobulle au survol */
.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Style pour le lien d'information (?) */
.info-link {
    display: inline-block;
    font-weight: bold;
    color: white;
    background-color: rgba(255, 255, 255, 0.3);
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    font-size: 0.8em;
    text-decoration: none;
    transition: background-color 0.2s;
}
.info-link:hover {
    background-color: rgba(255, 255, 255, 0.5);
    color: white;
}
/* Style pour les flèches d'évolution */
.evo-up {
    color: #27ae60; /* Vert */
    font-weight: bold;
}
.evo-down {
    color: #c0392b; /* Rouge */
    font-weight: bold;
}
.evo-stable {
    color: #95a5a6; /* Gris */
}



/* ============================================= */
/* ==         ASSISTANT TACTIQUE (SETUP)      == */
/* ============================================= */
.setup-form { margin-top: 20px; }
.form-row { display: flex; gap: 20px; margin-bottom: 20px; }
.form-group { flex: 1; }
.button-primary { background-color: #27ae60; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 1em; }
.coach-choice { margin-top: 25px; padding-top: 15px; border-top: 1px solid #ddd; }
.coach-choice h3 { margin-bottom: 10px; }
.coach-choice label { margin-right: 20px; font-size: 1.1em; }
.setup-container { display: flex; gap: 30px; align-items: flex-start; }
.team-setup-column { flex: 1; background-color: #f4f4f9; padding: 15px; border-radius: 8px; }
.add-player-form { display: flex; gap: 10px; margin-top: 10px; }

/* ============================================= */
/* == ASSISTANT TACTIQUE (PAGE MATCH) == */
/* ============================================= */
.assistant-body {
    background-color: #34495e;
    color: white;
    font-family: sans-serif;
    padding: 0;
}

.assistant-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.control-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #2c3e50;
    flex-shrink: 0;
}

.timer { font-size: 2.5em; font-weight: bold; font-family: 'Courier New', Courier, monospace; width: 150px; text-align: center; }
.scoreboard { text-align: center; flex-grow: 1; }
.score { font-size: 2.2em; font-weight: bold; margin: 0 20px; }
.timer-controls { width: 150px; text-align: center; }
.timer-controls button { padding: 10px 15px; font-size: 1em; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; width: 120px; }
.match-status { font-size: 0.8em; font-weight: bold; color: #bdc3c7; margin-top: 5px; }

.main-panel {
    flex-grow: 1;
    display: flex;
    gap: 20px;
    padding: 20px;
    overflow: hidden;
}

.team-column, .center-column {
    background-color: #2c3e50;
    padding: 15px;
    border-radius: 8px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.center-column { flex: 0.8; }

.action-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.action-btn { padding: 10px; border: none; border-radius: 5px; cursor: pointer; color: white; font-weight: bold; }
.goal-for { background-color: #27ae60; }
.goal-against { background-color: #c0392b; }
.substitution { background-color: #2980b9; }
.yellow-card { background-color: #f1c40f; }
.red-card { background-color: #e74c3c; }

.ai-suggestions p.suggestion { border-left: 4px solid #f1c40f; padding-left: 10px; margin-top: 10px; }
.ai-suggestions .alert, .ai-suggestions .analysis {
    background-color: #e8f4fd;
    border-left: 5px solid #3498db;
    padding: 15px;
    border-radius: 4px;
    color: #34495e;
}

/* --- Tableau Tactique --- */
.tactical-board { margin-bottom: 20px; flex-shrink: 0; }
.pitch {
    position: relative;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><defs><pattern id="p" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M0 0h20v20H0zm20 20h20v20H20z" fill="%232c7a36"/></pattern></defs><rect width="100%" height="100%" fill="%2334983e"/><rect width="100%" height="100%" fill="url(%23p)"/></svg>');
    background-size: 40px 40px;
    border: 2px solid #fff;
    height: 400px;
    border-radius: 8px;
}
.position-slot {
    position: absolute; width: 60px; height: 60px;
    border: 2px dashed rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.position-slot .player-item {
    width: 100%; height: 100%; border-radius: 50%; display: flex; flex-direction: column;
    justify-content: center; align-items: center; color: white; font-weight: bold;
    cursor: grab; padding: 2px; text-align: center; box-sizing: border-box; line-height: 1.2;
}
.position-slot .player-item.home-player { background-color: #3498db; border: 2px solid #2980b9; }
.position-slot .player-item.away-player { background-color: #e74c3c; border: 2px solid #c0392b; }
.player-item .player-name { font-size: 0.7em; display: none; }
.position-slot .player-item .player-name { display: block; text-transform: uppercase; }
.position-slot .player-item b { display: none; }
.position-slot .player-item .shirt-number { display: block; font-size: 1.4em; }
.player-item.sortable-ghost { opacity: 0.4; background: #a2cffe; }

/* ============================================= */
/* ==   LAYOUT FLEXIBLE (FINAL & DÉFINITIF)   == */
/* ============================================= */
.team-column {
    min-width: 0; /* Empêche le contenu de déborder de sa colonne */
}

.player-roster {
    flex-grow: 1; /* Prend toute la place verticale restante */
    display: flex;
    flex-direction: column;
    min-height: 0; /* Essentiel pour que le scroll interne fonctionne */
  	overflow-y:auto;
}

.player-list {
    flex-grow: 1;
    max-height: none; /* Annule les anciennes hauteurs fixes */
    min-height: 80px; /* Essentiel pour le scroll */
    overflow-y: auto;
    background-color: #ecf0f1;
    border-radius: 5px;
    padding: 5px;
    border: 1px solid #bdc3c7;
  	
}

.player-list .player-item {
    color: #333;
    background-color: #f0f0f0;
    padding: 8px 12px;
    margin: 4px 0;
    border-radius: 4px;
    cursor: grab;
    font-size: 0.9em;
}

.player-list .player-item:hover {
    background-color: #e0e0e0;
}


/* ============================================= */
/* ==     MODALES ET AUTRES COMPOSANTS        == */
/* ============================================= */
/* STYLE POUR LA MODALE EN TIMELINE DOUBLE (remplace l'ancien style .modal) */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0; top: 0;
    width: 100%; height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
}
.modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    max-width: 700px;
    position: relative;
}
.close-button {
    color: #aaa;
    position: absolute;
    top: 10px; right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.match-result-link {
    font-weight: bold;
    cursor: pointer;
    color: #2980b9;
}
.match-result-link:hover {
    text-decoration: underline;
}

/* NOUVEAU STYLE POUR LA MODALE EN TIMELINE SYNCHRONISÉE */
#modalBody p {
    background-color: #f8f9fa; /* Fond très clair, presque blanc */
    color: #212529;           /* Texte noir/gris foncé */
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    margin-left: 10px; /* Petit espace par rapport au cercle de la timeline */
}

/* On s'assure aussi que le nom de l'équipe est lisible */
#modalBody p i {
    color: #6c757d; /* Gris plus clair pour le nom de l'équipe */
    margin-left: 8px;
}
.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    max-width: 800px; /* On l'élargit un peu */
    position: relative;
}
.modal-body-timeline {
    display: flex;
    padding: 20px 0;
    max-height: 500px;
    overflow-y: auto;
}
.timeline-column {
    width: 50%;
    position: relative;
}
.timeline-column.home {
    text-align: right;
    padding-right: 40px;
}
.timeline-column.away {
    padding-left: 40px;
}
.timeline-axis {
    width: 4px;
    background-color: #e9ecef;
    border-radius: 2px;
}
.timeline-event {
    position: relative;
    min-height: 40px; /* Hauteur minimale pour l'alignement */
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.timeline-column.home .timeline-event {
    justify-content: flex-end;
}
.timeline-column.away .timeline-event {
    justify-content: flex-start;
}
/* Le cercle sur la ligne centrale */
.timeline-event::after { 
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #bdc3c7;
    border: 3px solid white;
    z-index: 1;
}
.timeline-event2 {
    position: relative;
    min-height: 40px; /* Hauteur minimale pour l'alignement */
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.timeline-event2::after { 
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #e9ecef;
    border: 3px solid white;
    z-index: 1;
}
.timeline-column.home .timeline-event2 {
    justify-content: flex-end;
}
.timeline-column.away .timeline-event2 {
    justify-content: flex-start;
}
.timeline-column.home .timeline-event::after {
    right: -49px;
}
.timeline-column.away .timeline-event::after {
    left: -49px;
}
/* On colore le cercle s'il y a un vrai événement */
.timeline-event.has-event::after {
    background-color: #e9ecef;
}

.event-details {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.event-minute {
    font-weight: bold;
}
.timeline-column.home .event-details {
    flex-direction: row-reverse; /* Icône à droite du nom */
}
.modal-content { background-color: #fefefe; margin: 10% auto; padding: 20px 30px; border: 1px solid #888; width: 90%; max-width: 500px; border-radius: 8px; position: relative; }
.close-button { color: #aaa; position: absolute; top: 10px; right: 20px; font-size: 28px; font-weight: bold; cursor: pointer; }

/* --- Stats dans la modale --- */
.player-stats-modal-content,
.player-stats-modal-content h3,
.player-stats-modal-content h4,
.player-stats-modal-content p {
    color: #333;
}
.player-stats-modal-content h4 { border-bottom: 1px solid #eee; padding-bottom: 5px; margin-top: 25px; font-size: 1.1em; color: #2c3e50; }
.stats-grid-modal { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stats-grid-modal div b { font-size: 1.2em; color: #3498db; }
.player-stats-modal-content b[style*="color: #27ae60;"] { font-size: 1.3em; }

/* --- Tableau de comparaison dans l'IA --- */
.stats-comparison-table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 0.9em; }
.stats-comparison-table th, .stats-comparison-table td { border: 1px solid #bdc3c7; padding: 6px; text-align: center; color: black; }
.stats-comparison-table th { background-color: #ecf0f1; }

/* --- Timeline --- */
.timeline-container { background-color: #2c3e50; color: #ecf0f1; padding: 15px; border-radius: 8px; margin-top: 20px; max-width:300px }
#timeline { max-height: 300px; overflow-y: auto; padding-right: 10px; }

/* ================================================= */
/* == NOUVEAU STYLE POUR TIMELINE & SUGGESTIONS == */
/* ================================================= */

/* Le nouveau grand conteneur du bas pour les suggestions de l'IA */
.suggestions-container {
    background-color: #2c3e50;
    color: #ecf0f1;
    padding: 15px;
    border-radius: 8px;
    margin: 0 20px 20px 20px; /* Marge pour l'aligner avec le panneau principal */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.suggestions-container h3 {
    margin-top: 0;
    border-bottom: 2px solid #34495e;
    padding-bottom: 10px;
    color: white; /* S'assurer que le titre est blanc */
}

/* Style pour le panneau des suggestions lui-même */
.ai-suggestions {
  	max-width:400px;
    margin-top: 0;
    padding: 0;
    background-color: transparent; /* Le fond est maintenant sur le parent */
    height: 300px; /* Hauteur fixe pour la zone de suggestion */
    overflow-y: auto;
}

/* La timeline, maintenant dans la colonne centrale */
.timeline-container {
    /* Doit grandir pour occuper l'espace restant dans la colonne centrale */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Essentiel pour le scroll */
    margin-top: 20px;
}
.timeline-container h3 {
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #34495e;
    color: white;
}

/* La liste des événements de la timeline */
#timeline {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 10px; /* Espace pour la barre de scroll */
}

/* Style pour un événement individuel dans la timeline */
.timeline-event {
    display: flex;
    align-items: center;
    background-color: #34495e;
    padding: 8px 12px;
    border-radius: 5px;
    margin-bottom: 8px;
    font-size: 0.9em;
}
.event-icon { font-size: 1.2em; margin-right: 10px; }
.event-details { flex-grow: 1; }

/* ============================================= */
/* ==      RÈGLES RESPONSIVES (FINALES)       == */
/* ============================================= */
@media (max-width: 1366px) {
    .pitch { height: 320px; }
    .position-slot { width: 55px; height: 55px; }
    .position-slot .player-item .shirt-number { font-size: 1.3em; }
}
@media (max-width: 1024px) {
    .pitch { height: 280px; }
    .position-slot { width: 50px; height: 50px; }
    .position-slot .player-item .shirt-number { font-size: 1.2em; }
    .position-slot .player-item .player-name { font-size: 0.6em; }
}


/* =================================
   STYLES POUR LES FORMULAIRES (Connexion, Inscription)
   ================================= */
.form-container {
    max-width: 500px;
    margin: 40px auto;
    padding: 30px;
}

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

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #222;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* Important pour que le padding n'augmente pas la largeur */
    font-size: 1em;
}

/* =================================
   STYLES POUR LES MESSAGES D'ALERTE
   ================================= */
.error-box {
    background-color: #f8d7da;
    color: #721c24;
    padding: 15px;
    border: 1px solid #f5c6cb;
    border-radius: 5px;
    margin-bottom: 20px;
}
.error-box p {
    margin: 0;
}

.success-box {
    background-color: #d4edda;
    color: #155724;
    padding: 15px;
    border: 1px solid #c3e6cb;
    border-radius: 5px;
    margin-bottom: 20px;
}
.success-box p {
    margin: 0;
}
/* =================================
   BANNIÈRE DE NAVIGATION (NAVBAR)
   ================================= */
.navbar {
    background-color: #2c3e50; /* Bleu marine foncé */
    padding: 10px 30px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.navbar-brand {
    font-size: 1.5em;
    font-weight: bold;
    color: white;
    text-decoration: none;
}
.navbar-nav {
    display: flex;
    align-items: center;
    gap: 20px; /* Espace entre les éléments */
}
.navbar-nav label {
    font-weight: bold;
    margin-right: 5px;
}
.navbar-nav select,
.navbar-nav a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s;
}
.navbar-nav a:hover {
    color: #3498db; /* Bleu plus clair au survol */
}
.nav-separator {
    border-left: 1px solid #7f8c8d;
    height: 20px;
}
.championship-card {
    display: block;
    background-color: #ecf0f1;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    color: #2c3e50;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}
.championship-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.championship-card h3 {
    margin-top: 0;
}
#champ-select{
  	color:black;
}

/* =================================
   MODALE (FENÊTRE POP-UP) pour CLASSEMENT.PHP
   ================================= */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0; top: 0;
    width: 100%; height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);

}
.modal-content {
    background-color: #34495e;
    margin: 10% auto;
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    max-width: 800px;
    position: relative;
  	color:white;
}
.close-button {
    color: #aaa;
    position: absolute;
    top: 10px; right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.match-result-link {
    font-weight: bold;
    cursor: pointer;
    color: #2980b9;
}
.match-result-link:hover {
    text-decoration: underline;
}

/* NOUVEAU STYLE POUR LA TIMELINE SYNCHRONISÉE */
.modal-body-timeline {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    max-height: 800px;
    overflow-y: auto;
}
.timeline-column {
    width: 45%;
}
.timeline-column.home {
    text-align: right;
    padding-right: 30px;
}
.timeline-column.away {
    padding-left: 30px;
}
.timeline-axis {
    width: 4px;
    background-color: #e9ecef;
    border-radius: 2px;
}
.timeline-event {
    position: relative;
    min-height: 35px; /* Hauteur minimale pour l'alignement */
    margin-bottom: 4px;
    display: flex;
    align-items: center;
}
.timeline-column.home .timeline-event {
    justify-content: flex-end;
}
.timeline-column.away .timeline-event {
    justify-content: flex-start;
}
/* Le cercle sur la ligne centrale */
.timeline-event.has-event::after { 
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #3498db;
    border: 3px solid white;
    z-index: 1;
}
.timeline-column.home .timeline-event.has-event::after {
    right: -39px;
}
.timeline-column.away .timeline-event.has-event::after {
    left: -39px;
}

.event-details {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /*background-color: #f8f9fa;*/
    color: white;
    padding: 5px 10px;
    border-radius: 6px;
    /*border: 1px solid #dee2e6;*/
}
.event-minute {
    font-weight: bold;
}
.timeline-column.home .event-details {
    flex-direction: row-reverse;
}
.modal-timeline-event {
    position: relative;
    min-height: 35px; /* On réduit aussi un peu la hauteur minimale */
    margin-bottom: 10px; /* <-- Nouvel espacement réduit */
    display: flex;
    align-items: center;
}
/* STYLES POUR LA PAGE HEAD-TO-HEAD */
.h2h-selection-grid {
    display: flex;
    align-items: center;
    gap: 20px;
}
.h2h-vs {
    font-size: 1.5em;
    font-weight: bold;
    color: #7f8c8d;
    margin-top: 20px;
}
.h2h-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    margin-bottom: 30px;
}
.h2h-team {
    width: 40%;
}
.h2h-vs-title {
    width: 20%;
    font-size: 2em;
    font-weight: bold;
}
/* --- Style général pour les sections H2H --- */
.h2h-section {
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.h2h-section h3 {
    margin-top: 0;
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
    margin-bottom: 20px;
    color: #333;
}
.h2h-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-size: 1.1em;
}
/* --- 1. Style pour la section "Confrontations Directes" --- */

/* Style pour le résumé V-N-D */
.h2h-summary {
    display: flex;
    justify-content: space-around;
    text-align: center;
    gap: 15px;
    margin-bottom: 25px;
}

.h2h-summary > div {
    padding: 15px;
    border-radius: 8px;
    background-color: #f8f9fa;
    flex-basis: 30%;
    border-bottom: 4px solid #ccc;
}

/* Couleur pour l'équipe 1 (bleu) */
.h2h-summary > div:first-child {
    border-color: #3498db;
}
/* Couleur pour les nuls (gris) */
.h2h-summary > div:nth-child(2) {
    border-color: #95a5a6;
}
/* Couleur pour l'équipe 2 (rouge) */
.h2h-summary > div:last-child {
    border-color: #e74c3c;
}


.summary-value {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.summary-label {
    font-size: 0.9rem;
    color: #6c757d;
}
/* Style pour la liste des matchs passés */
.match-history-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.match-history-item {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto;
    align-items: center;
    gap: 15px;
    padding: 12px;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    font-size: 0.95rem;
}

.match-history-item span:nth-child(2) { text-align: right; } /* Nom équipe domicile */
.match-history-item span:nth-child(4) { text-align: left; }  /* Nom équipe extérieur */

.match-history-item .score {
    font-weight: bold;
    background-color: #34495e;
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 4px;
    white-space: nowrap;
}
.stat-label {
    text-align: center;
    font-weight: bold;
    color: #34495e;
}
.stat-value {
    width: 30%;
    padding: 8px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1.2em;
}
.stat-value.team1 {
    text-align: right;
}
.stat-value.team2 {
    text-align: left;
}
/* Style pour l'avantage */
.stat-value.advantage {
    background-color: #d4edda; /* Vert clair */
    color: #155724;
}
.stat-value.disadvantage {
    background-color: #f8d7da; /* Rouge clair */
    color: #721c24;
}

/* Style pour la table de comparaison des buts H2H */
.h2h-section .goal-table td {
    text-align: center;
    font-weight: bold;
}
.h2h-section .goal-table td.advantage {
    background-color: #d4edda;
}
/* Fichier : style.css */

.h2h-grid-2-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.scorers-list, .recent-matches-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scorer-item, .recent-match-item {
  display: flex;
  justify-content: space-between;
  padding: 8px;
  border-radius: 4px;
  background-color: #f9f9f9;
  border-left: 3px solid #ccc;
}

.scorers-list:first-child .scorer-item {
  border-left-color: #3498db; /* Couleur équipe 1 */
}

.scorers-list:last-child .scorer-item {
  border-left-color: #e74c3c; /* Couleur équipe 2 */
}

.scorer-name, .recent-match-opponent {
  font-weight: 500;
}

.scorer-goals, .recent-match-result {
  font-weight: bold;
}

/* --- 2. Correction de couleur pour "5 Derniers Matchs" --- */

.recent-match-item {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    border-radius: 4px;
    background-color: #f9f9f9;
    border-left: 3px solid #ccc;
}

.recent-match-result {
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 15px;
    color: #ffffff !important; /* Force la couleur du texte en blanc */
    min-width: 50px;
    text-align: center;
}

/* On définit un fond ET une couleur de texte pour chaque résultat */
.recent-match-result.form-v {
    background-color: #2ecc71; /* Vert */
}
.recent-match-result.form-n {
    background-color: #f39c12; /* Orange */
}
.recent-match-result.form-d {
    background-color: #e74c3c; /* Rouge */
}

/* Fichier : style.css */

/* --- Style pour la mise en évidence des classements spécifiques --- */

.specific-ranking .team-name-cell {
    text-align: left;
    font-weight: 500;
    padding-left: 10px;
    max-width: 150px; /* Évite que les noms longs ne prennent trop de place */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.specific-ranking .highlighted-row {
    background-color: #eaf4fc; /* Fond bleu clair pour la ligne */
    font-weight: bold;
}

/* On met en valeur le rang de l'équipe principale avec une pastille de couleur */
.specific-ranking .highlighted-row td:first-child {
    background-color: #3498db;
    color: #ffffff;
    border-radius: 4px;
}

/* Ajustement pour la deuxième équipe */
.h2h-grid-2-col > div:last-child .specific-ranking .highlighted-row {
    background-color: #fdedec; /* Fond rouge clair */
}
.h2h-grid-2-col > div:last-child .specific-ranking .highlighted-row td:first-child {
    background-color: #e74c3c; /* Pastille rouge */
}

/* Fichier : style.css */

/* --- Style pour les Cartes Statistiques --- */

.stat-card {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    background: #fdfdfd;
    /* La bordure supérieure colorée sert de repère visuel */
    border-top: 5px solid #3498db; /* Bleu pour l'équipe 1 par défaut */
}

/* On cible la deuxième carte pour lui donner la couleur de l'équipe 2 */
.h2h-grid-2-col > .stat-card:last-child {
    border-top-color: #e74c3c; /* Rouge pour l'équipe 2 */
}

.card-rank {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    color: #34495e;
}

.card-points {
    font-size: 1.5rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
}

/* AJOUTEZ CE NOUVEAU CODE À VOTRE CSS */
.card-stats-horizontal {
    display: flex;
    justify-content: space-around; /* Distribue les éléments uniformément */
    align-items: center;
    width: 100%;
}

.stat-item {
    text-align: center;
}

.stat-value {
    display: block;
    font-size: 1.75rem; /* Chiffre plus grand */
    font-weight: 700;
    color: #34495e;
}

.stat-label {
    font-size: 0.8rem;
    color: #7f8c8d; /* Texte plus doux */
    text-transform: uppercase; /* Style plus pro */
}

/* Fichier: style.css */

.star-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 1.5rem; /* Rend l'étoile plus grande et cliquable */
    color: #f39c12;    /* Couleur jaune/orange de l'étoile */
    line-height: 1;
    transition: transform 0.2s ease;
}

/* Fichier: style.css */

/* --- Style pour la page de recherche de joueur --- */
.search-form {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
}

.search-form input[type="text"] {
    flex-grow: 1; /* Le champ prend toute la place disponible */
    padding: 12px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 6px;
}

.search-form button {
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
    border: none;
    background-color: #3498db;
    color: white;
    border-radius: 6px;
}

.search-results h2 {
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

.results-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.results-table th, .results-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.results-table th {
    background-color: #f8f9fa;
    color: #495057; /* Couleur de texte foncée ajoutée */
    text-transform: uppercase; /* Bonus : met le texte en majuscules pour un look plus net */
    font-size: 0.85em; /* Bonus : police légèrement plus petite pour l'en-tête */
    letter-spacing: 0.5px; /* Bonus : espace un peu les lettres */
}

.results-table tbody tr:hover {
    background-color: #f1f1f1;
}

.star-btn:hover {
    transform: scale(1.2); /* Effet de zoom au survol */
}

/* Optionnel : pour centrer l'étoile dans sa colonne */
.results-table .favorite-col,
.results-table .favorite-form {
    text-align: center;
}

/* Fichier: style.css */

.player-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.player-card {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    overflow: hidden; /* Pour que les coins arrondis s'appliquent bien */
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 15px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.player-info h3 {
    margin: 0;
    font-size: 1.1rem;
}
.player-info h3 a {
    text-decoration: none;
    color: #34495e;
}
.player-info p {
    margin: 5px 0 0;
    font-size: 0.9rem;
    color: #6c757d;
}

.card-body {
    padding: 15px;
}

.match-recap {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    text-align: center;
    font-size: 1rem;
    margin-bottom: 15px;
}
.match-recap .team-home { text-align: right; }
.match-recap .team-away { text-align: left; }
.match-recap .score {
    font-weight: bold;
    font-size: 1.2rem;
    padding: 0 10px;
}

.player-match-stats {
    display: flex;
    justify-content: space-around;
    background-color: #f8f9fa;
    padding: 10px;
    border-radius: 6px;
    font-size: 0.9rem;
    text-align: center;
}
.player-match-stats span {
    font-weight: 500;
}

.no-match {
    text-align: center;
    color: #95a5a6;
    padding: 20px 0;
}

/* Section spéciale pour la page d'accueil */
.favorites-dashboard {
    margin-bottom: 40px;
}

/* --- Style pour les CARTES de championnats --- */
.championship-cards {
    display: grid;
    /* Crée une grille responsive : les cartes font au moins 250px et s'adaptent */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px; /* Espace entre les cartes */
    margin-bottom: 30px;
}

.championship-cards .card {
    display: block;
    padding: 25px;
    text-align: center;
    text-decoration: none;
    color: #34495e;
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.2s ease-in-out;
}

.championship-cards .card h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #34495e;
}

.championship-cards .card:hover {
    transform: translateY(-5px); /* Effet de "lévitation" au survol */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Style pour la carte du championnat ACTIF */
.championship-cards .card.active {
    border-color: #3498db;
    background-color: #f8f9fa;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.2);
}

.championship-cards .card.active h3 {
    color: #3498db; /* Le titre prend la couleur active */
}

/* Fichier: style.css */

.account-info {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.status-badge {
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.9em;
    font-weight: bold;
    color: white;
}
.status-active { background-color: #2ecc71; /* Vert */ }
.status-trialing { background-color: #2ecc71; /* Vert */ }
.status-canceled { background-color: #e74c3c; /* Rouge */ }
.status-past_due { background-color: #f39c12; /* Orange */ }
.status-inactive { background-color: #95a5a6; /* Gris */ }

.subscription-management h2 {
    margin-top: 30px;
}

/* Fichier: style.css */

.championship-selector-form {
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
}

.championship-selector-form label {
    font-weight: 500;
}

.championship-selector-form select {
    padding: 8px 12px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    min-width: 250px; /* Donne une largeur minimale au sélecteur */
    cursor: pointer;
}

/* Fichier: style.css */

/* --- Style pour le sélecteur de championnat DANS LE HEADER --- */

/* On rend le formulaire transparent pour ne voir que le sélecteur */
.header-champ-form {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    height: 100%;
}

/* Le style principal du sélecteur pour qu'il ressemble à un lien de menu */
.header-champ-select {
    /* On enlève tous les styles par défaut du navigateur */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: transparent;
    border: none;
    
    /* On lui donne le même style que les autres liens du menu */
    font-family: inherit; /* Utilise la même police que le reste du site */
    font-size: 1em; /* Même taille de police que les liens */
    font-weight: 500;
    color: #34495e; /* Couleur du texte des liens */
    padding: 10px 30px 10px 10px; /* Espace pour la flèche */
    margin: 0;
    cursor: pointer;

    /* On ajoute une flèche personnalisée simple */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334495e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 1em;
}

/* Style au survol, comme les autres liens */
.header-champ-select:hover {
    color: #3498db;
}

/* Fichier: style.css */

.access-denied-page {
    max-width: 600px;
    margin: 50px auto;
    text-align: center;
    padding: 40px;
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.access-denied-page .lock-icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

.access-denied-page h1 {
    font-size: 2rem;
    color: #34495e;
}

.access-denied-page p {
    color: #6c757d;
    line-height: 1.6;
}

.access-denied-page .button-primary {
    margin-top: 20px;
    display: inline-block;
}

.access-denied-page .secondary-link {
    display: block;
    margin-top: 15px;
    font-size: 0.9em;
    color: #7f8c8d;
}


/* --- Style pour les cartes d'abonnement --- */

/* La grille qui contient les cartes */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Grille responsive */
    gap: 30px; /* Espace entre les cartes */
    margin-top: 30px;
}

/* Style de base pour chaque carte */
.pricing-card {
    position: relative; /* Nécessaire pour le badge "Populaire" */
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

/* Titre de la formule */
.pricing-card h3 {
    font-size: 1.4rem;
    color: #34495e;
    margin-top: 0;
}

/* Prix */
.pricing-card .price {
    font-size: 2.8rem;
    font-weight: 700;
    color: #3498db;
    margin: 15px 0;
}

.pricing-card .price span {
    font-size: 1rem;
    font-weight: 400;
    color: #7f8c8d;
}

/* Petite description sous le prix */
.pricing-card .description {
    font-size: 0.9rem;
    color: #6c757d;
    min-height: 60px; /* Assure que les cartes ont la même hauteur */
}

/* Liste des avantages */
.pricing-card ul {
    list-style: none;
    padding: 0;
    margin: 25px 0;
    text-align: left;
}

.pricing-card ul li {
    margin-bottom: 12px;
    color: #555;
}

/* Bouton d'abonnement */
.pricing-card .subscribe-btn {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    background-color: #3498db;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.pricing-card .subscribe-btn:hover {
    background-color: #2980b9;
}


/* --- Styles spécifiques pour les cartes --- */

/* Style pour la carte "Populaire" */
.pricing-card.popular {
    border-color: #3498db;
    transform: scale(1.05); /* La rend légèrement plus grande */
    box-shadow: 0 8px 20px rgba(52, 152, 219, 0.2);
}

.pricing-card .badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: #e74c3c;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
}

/* Style pour la carte désactivée (Bientôt disponible) */
.pricing-card.disabled {
    opacity: 0.7;
    background-color: #f8f9fa;
}

.pricing-card.disabled .subscribe-btn {
    background-color: #bdc3c7;
    cursor: not-allowed;
}

/* Fichier: style.css */

.info-banner {
    background-color: #eaf4fc; /* Fond bleu clair */
    border-left: 5px solid #3498db; /* Bordure d'accentuation bleue */
    padding: 15px 20px;
    margin: 20px 0;
    border-radius: 0 8px 8px 0;
}

.info-banner p {
    margin: 0;
    color: #2c3e50; /* Texte foncé pour un bon contraste */
    line-height: 1.5;
}

/* Fichier: style.css */

.report-section {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #eee;
  	color:black;
}

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

.report-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
  	color:black;
}

.report-form input[type="text"],
.report-form select,
.report-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
}

.report-form textarea {
    resize: vertical; /* Permet à l'utilisateur de redimensionner verticalement */
}

/* Vous avez probablement déjà ces styles, mais au cas où : */
.success-box {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
}
.error-box {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
}

/* Fichier: style.css */

/* --- Style pour le Footer --- */

footer {
    background-color: #2c3e50; /* Bleu marine foncé, classique pour un footer */
    color: #bdc3c7; /* Texte gris clair */
    padding: 40px 0;
    margin-top: 50px; /* Espace entre le contenu principal et le footer */
    border-top: 3px solid #3498db; /* Ligne d'accentuation bleue */
}

.footer-content {
    display: flex;
    justify-content: space-between; /* Pousse les éléments aux extrémités */
    align-items: center;
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne sur petits écrans */
    gap: 20px; /* Espace entre les éléments quand ils sont l'un sur l'autre */
}

.footer-copyright p {
    margin: 0;
    font-size: 0.9em;
}

.footer-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px 25px; /* Espace vertical et horizontal entre les liens */
}

.footer-links a {
    color: #ecf0f1; /* Texte des liens en blanc cassé */
    text-decoration: none;
    font-size: 0.9em;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: #3498db; /* Couleur bleue au survol */
}

/* Fichier: style.css */

.form-group-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.form-group-checkbox input[type="checkbox"] {
    /* Rend la case à cocher un peu plus grande et facile à cliquer */
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.form-group-checkbox label {
    margin: 0;
    font-size: 0.9em;
}

.form-group-checkbox a {
    text-decoration: underline;
    color: #3498db;
}

/* Fichier: style.css */

.player-status-recap {
    background-color: #ecf0f1;
    color: #7f8c8d;
    padding: 10px;
    border-radius: 6px;
    font-size: 0.9em;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
}

.player-status-recap.status-suspendu {
    background-color: #e74c3c; /* Rouge */
    color: white;
}

/* Fichier: style.css */

/* On s'assure que la carte est un référentiel pour la position absolue */
.player-card {
    position: relative;
}

/* Style de la pastille du score d'influence */
.card-influence-score {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2; /* Pour être au-dessus du header de la carte */
    
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Pour faire un cercle */
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-size: 1.1rem;
    font-weight: bold;
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    border: 2px solid white;
}

/* Couleurs dynamiques en fonction du score */
.card-influence-score.positive {
    background-color: #27ae60; /* Vert */
}

.card-influence-score.neutral {
    background-color: #7f8c8d; /* Gris */
}

.card-influence-score.negative {
    background-color: #c0392b; /* Rouge */
}


/* Fichier: style.css */

.weekend-matches {
    margin: 40px 0;
    padding: 20px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
}

.matches-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    text-align: center;
}

.matches-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: #34495e;
}

.matches-header h2 span {
    font-size: 0.9rem;
    font-weight: 400;
    color: #7f8c8d;
}

.nav-arrow {
    font-size: 2rem;
    text-decoration: none;
    color: #3498db;
    padding: 0 10px;
    transition: transform 0.2s;
}

.nav-arrow:hover {
    transform: scale(1.2);
}

.matches-list {
    display: grid;
    gap: 10px;
}

.match-item {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    gap: 15px;
    align-items: center;
    background-color: #fff;
    padding: 12px 15px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.match-item .match-time {
    font-size: 0.85em;
    color: #7f8c8d;
    font-weight: 500;
}

.match-item .team-home {
    text-align: right;
    font-weight: bold;
}

.match-item .team-away {
    text-align: left;
    font-weight: bold;
}

.match-item .score {
    font-weight: bold;
    font-size: 1.1em;
    background-color: #34495e;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
}

.no-matches {
    text-align: center;
    color: #7f8c8d;
    padding: 20px 0;
}

/* Fichier: style.css */

/* --- Correction pour l'affichage de la colonne "Forme" --- */

/* 1. On transforme la cellule en conteneur flexible */
.form-cell {
    display: flex;
    justify-content: center; /* Centre les pastilles horizontalement */
    align-items: center;    /* Centre les pastilles verticalement (ce qui corrige votre problème) */
    gap: 4px;               /* Ajoute un petit espace entre chaque pastille */
}

/* 2. On stylise chaque pastille (V, N, D) */
.form-cell span {
    display: inline-flex; /* Permet d'utiliser align-items/justify-content sur la lettre elle-même */
    align-items: center;
    justify-content: center;
    
    width: 22px;        /* Largeur fixe */
    height: 22px;       /* Hauteur fixe */
    border-radius: 50%; /* Pour un rendu circulaire parfait */
    
    font-size: 0.8em;
    font-weight: bold;
    color: white;
}

/* 3. On définit les couleurs de fond */
.form-cell .form-v {
    background-color: #2ecc71; /* Vert */
}

.form-cell .form-n {
    background-color: #f39c12; /* Orange */
}

.form-cell .form-d {
    background-color: #e74c3c; /* Rouge */
}

/* Fichier: style.css */

.player-team-name {
    font-size: 0.8em;
    color: #7f8c8d; /* Gris clair */
    margin-left: 5px;
    font-style: italic;
}

/* Fichier: style.css */

/* --- Style pour l'indicateur de statut sur les cartes de championnat --- */

.championship-status {
    display: block; /* Prend toute la largeur */
    margin-top: 10px;
    padding: 5px 10px;
    font-size: 0.8em;
    font-weight: bold;
    border-radius: 15px; /* Forme de pilule */
    text-align: center;
}

/* Vert pour "À jour" */
.championship-status.status-complete {
    background-color: #d4edda; /* Fond vert pâle */
    color: #155724; /* Texte vert foncé */
    border: 1px solid #c3e6cb;
}

/* Orange pour "Incomplet" */
.championship-status.status-incomplete {
    background-color: #fff3cd; /* Fond jaune pâle */
    color: #856404; /* Texte brun/orange */
    border: 1px solid #ffeeba;
}

/* Gris pour "Pas de données" */
.championship-status.status-nodata {
    background-color: #e2e3e5; /* Fond gris pâle */
    color: #6c757d; /* Texte gris */
    border: 1px solid #d6d8db;
}

/* On ajuste la carte pour que le contenu soit bien aligné */
.championship-cards .card {
    display: flex;
    flex-direction: column; /* Met le titre et le statut l'un sous l'autre */
    justify-content: space-between; /* Pousse le statut vers le bas */
}

.championship-cards .card h3 {
    flex-grow: 1; /* Permet au titre de prendre l'espace */
    margin-bottom: 10px; /* Espace avant le statut */
}


.championship-status.status-inprogress {
    background-color: #eaf4fc; /* Fond bleu très pâle */
    color: #34495e; /* Texte bleu/gris foncé */
    border: 1px solid #d6eaf8;
}

/* Reset minimal pour enlever les marges par défaut */
body, html {
    margin: 0;
    padding: 0;
}

/* Optionnel: S'assurer que header et footer prennent toute la largeur */
header, footer {
    width: 100%;
    /* Vous pouvez ajouter box-sizing pour inclure padding/border dans la largeur si besoin */
    /* box-sizing: border-box; */
}

/* Fichier: style.css */

.goal-table .trend-cell {
    width: 30px; /* Espace pour la flèche */
    text-align: center;
    font-size: 1.2em; /* Taille de la flèche */
    padding-left: 10px;
}

.trend-up {
    color: #27ae60; /* Vert */
}

.trend-down {
    color: #c0392b; /* Rouge */
}

.trend-stable {
    color: #7f8c8d; /* Gris */
}

/* Fichier: style.css */

/* Style pour l'en-tête de la colonne Tendance */
.goal-table .trend-header {
    width: 80px; /* Ajustez si besoin */
    text-align: center;
    vertical-align: middle; /* Centre verticalement */
}

/* Style pour l'icône d'information (?) */
.info-icon {
    display: inline-block;
    background-color: #bdc3c7; /* Gris clair */
    color: white;
    font-weight: bold;
    font-size: 0.7em;
    width: 16px;
    height: 16px;
    line-height: 16px; /* Centre verticalement le '?' */
    text-align: center;
    border-radius: 50%; /* Cercle */
    cursor: help; /* Curseur d'aide au survol */
    margin-left: 4px;
    vertical-align: middle; /* Aligne avec le texte */
} 


/* Ajoute ceci à ton fichier style.css */

/* Style pour les cartes individuelles (tu devrais déjà avoir ça) */
.card-yellow {
    display: inline-block;
    width: 12px;
    height: 16px;
    background-color: #fdd835; /* Jaune */
    border: 1px solid #333;
    border-radius: 2px;
}

.card-red {
    display: inline-block;
    width: 12px;
    height: 16px;
    background-color: #e53935; /* Rouge */
    border: 1px solid #333;
    border-radius: 2px;
}

/* NOUVEAU : Style pour la carte Jaune-Rouge (2ème jaune) */
.card-yellow-red {
    display: inline-block;
    position: relative;
    width: 15px; /* Un peu plus large pour voir les deux */
    height: 16px;
    /* On utilise :before et :after pour créer les deux cartes */
}

.card-yellow-red::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 12px;
    height: 16px;
    background-color: #fdd835; /* Jaune */
    border: 1px solid #333;
    border-radius: 2px;
    z-index: 1;
    transform: rotate(-10deg); /* Légère rotation */
}

.card-yellow-red::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 12px;
    height: 16px;
    background-color: #e53935; /* Rouge */
    border: 1px solid #333;
    border-radius: 2px;
    z-index: 2;
    transform: rotate(10deg); /* Légère rotation */
}