/* Conteneur principal qui gère la disposition */
.combat-stats-container {
    display: flex;
    flex-direction: column; /* Par défaut, les éléments sont empilés pour les mobiles */
    align-items: center;
    gap: 20px; /* Espace entre le graphique et la liste */
}

/* Règle pour les écrans de taille moyenne et plus */
@media (min-width: 768px) {
    .combat-stats-container {
        flex-direction: row; /* Enlève les colonnes et les met côte à côte */
        justify-content: left;
        align-items: flex-start; /* Aligne le haut des deux colonnes */
    }

    /* Le graphique a une largeur fixe de 200px sur les grands écrans */
    .combat-stats-container .chart-column {
        flex: none; /* Empêche le graphique de s'étirer */
        width: 200px; /* Largeur fixe */
        margin-right: 100px;
        margin-left: 100px;
    }

    /* La liste des statistiques prend l'autre moitié */
    .combat-stats-container .stats-column {
        flex: 1;
        max-width: 45%;
        margin-top: 25px;
    }
}

/* Styles pour la liste de statistiques */
.stats-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.stats-list li {
    padding: 0 0 5px 0;
}

/* Style de base pour la liste */
.profile-links {
    list-style-type: none;
    padding: 0;
}

/* Centrer le dernier lien de la liste */
.profile-links li:last-child {
    display: flex;
    justify-content: center;
}

/* Styles pour les grands écrans (par défaut) */
.fight-table {
    width: 100%;
    border-collapse: collapse; /* Permet aux bordures de se chevaucher */
    margin-bottom: 50px;
}

.fight-table thead th {
    background-color: #000;
    color: #fff;
    padding: 10px;
    text-align: left;
}

.fight-table tbody tr {
    border-bottom: 1px solid #ddd;
}

.fight-table tbody td {
    padding: 10px;
}

/* Règle pour retirer la bordure du bas de la dernière ligne */
.fight-table tbody tr:last-child {
    border-bottom: none;
}

/* Styles pour les petits écrans (responsive) */
@media (max-width: 767px) {
    .fight-table thead {
        display: none;
    }

    .fight-table,
    .fight-table tbody,
    .fight-table tr,
    .fight-table td {
        display: block;
        width: 100%;
    }

    .fight-table tr {
        margin-bottom: 1rem;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 1rem;
    }

    /* Assurez-vous que la dernière ligne responsive n'a pas de bordure inférieure non plus */
    .fight-table tr:last-child {
        border-bottom: 1px solid #ccc;
    }
    
    .fight-table td {
        text-align: right;
        padding-left: 50%;
        position: relative;
    }

    .fight-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 50%;
        padding-left: 1rem;
        font-weight: bold;
        text-align: left;
    }
}


/* Style de la galerie de médailles */
.medal-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    gap: 20px;
    max-width: 800px; /* Limite la largeur de la galerie pour un meilleur rendu sur les grands écrans */
    margin: 0 auto;
}

.medal-item {
    text-align: center;
    width: 100px; /* Largeur fixe pour chaque médaille */
}

/* Style de l'image de la médaille */
.medal-image {
    width: 100px; /* Largeur de l'image de la médaille */
    height: 100px; /* Hauteur de l'image de la médaille */
    object-fit: contain; /* S'assure que l'image est bien contenue dans ses dimensions */
    transition: filter 0.3s ease;
}

/* Applique le filtre de gris par défaut sur les médailles */
.grayscale-filter {
    filter: grayscale(100%);
}

/* Styles spécifiques au tableau d'athlètes */
.athlete-table {
    width: 100%;
    border-collapse: collapse;
    color: #000;
    text-align: left;
    margin-bottom: 100px;
}

.athlete-table thead {
    background-color: #000;
    color: #fff;
}

.athlete-table th, 
.athlete-table td {
    padding: 12px 24px;
    vertical-align: top;
    border-bottom: 1px solid #e2e8f0;
}

.athlete-table tbody tr:hover {
    background-color: #ececec;
}

/* Styles pour la photo */
.athlete-table .photo-container {
    display: flex;
    align-items: center;
}

.athlete-table .athlete-photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.athlete-table .placeholder-photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
}

.athlete-table .profile-link {
    color: red;
    text-decoration: none;
}

.athlete-table .profile-link:hover {
    text-decoration: underline;
}

/* Styles pour la réactivité sur les petits appareils */
@media (max-width: 768px) {
    .athlete-table, 
    .athlete-table thead, 
    .athlete-table tbody, 
    .athlete-table th, 
    .athlete-table td, 
    .athlete-table tr {
        display: block;
    }

    .athlete-table thead {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    .athlete-table tr {
        border: 1px solid #ccc;
        margin-bottom: 8px;
        border-radius: 8px;
    }

    .athlete-table td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
        text-align: right;
    }

    .athlete-table td:before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 50%;
        padding-left: 16px;
        font-weight: bold;
        text-align: left;
    }
}

/* Centrage de l'ensemble du formulaire */
.container-center {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh; /* S'assure que le conteneur prend toute la hauteur de l'écran */
}

/* Style et centrage du formulaire */
.registration-form-container {
    width: 100%;
    max-width: 600px;
    padding: 2rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.section-title {
    text-align: center;
    margin-bottom: 2rem;
}

/* Conteneur de la liste */
.form-list {
    list-style: none; /* Enlève les puces de la liste */
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem; /* Espace entre les lignes de la liste */
}

/* Style des champs sur une seule colonne */
.form-fill-li {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Style des champs sur la même ligne (flexbox) */
.form-row-li {
    flex: 1 1 calc(50% - 0.75rem); /* Prend 50% de la largeur du conteneur avec un ajustement pour le 'gap' */
    display: flex;
    flex-direction: column;
}

/* Style des labels et inputs */
.form-list label {
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.form-list input,
.form-list select {
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
}

/* Centrage du bouton */
.form-button-container {
    text-align: center;
    margin-top: 2rem;
}

.form-link-container {
    text-align: center;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.form-link-container p {
    font-size: 0.9rem;
    color: #666;
}

.login-link {
    color: red; /* Ou une couleur qui correspond au style de votre site */
    text-decoration: none;
    font-weight: bold;
}

.login-link:hover {
    text-decoration: underline;
}

.align-items-center {
    display: flex; /* Active Flexbox sur le conteneur */
    align-items: center; /* Aligne les éléments verticalement au centre */
}

/* Vous pouvez aussi ajouter un espace entre la checkbox et le texte */
.remember-me {
    margin-top: 1rem;
    gap: 0.5rem; /* Ajoute un espace entre la checkbox et le texte */
}

/* ================================================= */
/* Structure Générale de la Page */
/* ================================================= */

.event-page-container {
    padding: 2rem 1rem; /* py-8 px-4 */
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}

.event-wrapper {
    background-color: white;
    padding: 2rem; /* p-8 md:p-10 */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow-2xl */
    border: 1px solid #f3f4f6; /* gray-100 */
}

.section-divider {
    border: none;
    height: 1px;
    background-color: #e5e7eb; /* border-gray-200 */
    margin: 2rem 0;
}

/* ================================================= */
/* En-tête (event-header) */
/* ================================================= */

.event-header {
    display: grid;
    grid-template-columns: 1fr; /* 1 colonne par défaut (mobile) */
    gap: 1.5rem; /* gap-6 */
    align-items: center;
    padding-bottom: 1.5rem;
}

.event-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1f2937; /* text-gray-800 */
    margin-bottom: 0.5rem;
}

.event-date {
    font-size: 1.25rem;
    font-weight: 600;
    color: #dd0f0a; /* indigo-700 */
}

.event-icon {
    color: #dd0f0a; /* indigo-500 */
    margin-right: 0.5rem;
}

.event-image-container {
    margin-top: 1rem;
    max-width: 16rem;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.event-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.header-right {
    display: flex;
    justify-content: flex-start; /* Aligné à gauche sur mobile */
}

.download-button {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    border: 1px solid transparent;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    color: white;
    background-color: #10b981; /* green-600 */
    transition: background-color 0.15s ease-in-out;
    text-decoration: none;
}

.download-button:hover {
    background-color: #059669; /* green-700 */
}

/* Media Query pour Écrans Moyens (md/768px+) */
@media (min-width: 768px) {
    .event-header {
        grid-template-columns: 1fr 1fr; /* 2 colonnes */
    }
    .header-right {
        justify-content: flex-end; /* Aligné à droite sur desktop */
    }
}


/* ================================================= */
/* Informations Clés (info-grid) */
/* ================================================= */

.section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #4b5563; /* text-gray-700 */
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 0.5rem;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr; /* 1 colonne par défaut */
    gap: 1.5rem;
}

.info-card {
    padding: 1.25rem;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    background-color: #f0f4ff; /* indigo-50 */
    border-top: 4px solid #dd0f0a; /* indigo-600 */
}

.info-label {
    font-size: 0.875rem;
    color: #6b7280; /* text-gray-500 */
    font-weight: 500;
    margin-top: 0.25rem;
}

.info-value {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937; /* text-gray-800 */
}

/* Media Query pour Écrans Moyens (md/768px+) pour la grille d'infos */
@media (min-width: 768px) {
    .info-grid {
        grid-template-columns: 1fr 1fr 1fr; /* 3 colonnes */
    }
    /* La carte d'adresse prend deux colonnes (2/3) */
    .info-card-full {
        grid-column: span 2 / span 2;
    }
}


/* ================================================= */
/* Programme des Combats (bouts-list) */
/* ================================================= */

.bouts-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bout-item {
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb; /* border-gray-200 */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    background-color: white;
    transition: box-shadow 0.2s ease-in-out;
}

.bout-item:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.bout-title {
    font-weight: 800;
    font-size: 1.125rem;
    color: #1f2937; /* text-gray-800 */
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
}

.bout-number {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.75rem;
    text-align: center;
    line-height: 1.5rem;
    border-radius: 50%;
    background-color: #dd0f0a; /* indigo-500 */
    color: white;
    font-size: 0.875rem;
}

.bout-athletes {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr; /* 2/5 VS 1/5 2/5 */
    text-align: center;
    align-items: center;
}

.athlete-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.25rem;
}

.corner-label {
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
}

.red-corner .corner-label { color: #dc2626; } /* red-600 */
.blue-corner .corner-label { color: #2563eb; } /* blue-600 */

.athlete-photo-frame {
    width: 4rem; /* 64px */
    height: 4rem;
    margin-bottom: 0.5rem;
    border-radius: 50%;
    overflow: hidden;
    background-color: #e5e7eb;
    border: 2px solid;
}

.red-corner .athlete-photo-frame { border-color: #dc2626; } /* red-600 */
.blue-corner .athlete-photo-frame { border-color: #2563eb; } /* blue-600 */

.athlete-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.athlete-name {
    font-size: 1rem;
    font-weight: 600;
    transition: color 0.15s ease-in-out;
    text-decoration: none;
}

.red-corner .athlete-name { color: #dc2626; } /* red-700 */
.blue-corner .athlete-name { color: #2563eb; } /* blue-700 */

.athlete-name:hover {
    text-decoration: underline;
}

.vs-separator {
    font-size: 1.125rem;
    font-weight: 800;
    color: #9ca3af; /* gray-400 */
}

.bout-details {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: #4b5563; /* text-gray-600 */
    border-top: 1px solid #e5e7eb;
    padding-top: 0.5rem;
    text-align: center;
}

.empty-state {
    padding: 1.5rem;
    background-color: #fffbeb; /* yellow-50 */
    border: 1px solid #fde68a; /* yellow-200 */
    color: #b45309; /* yellow-800 */
    border-radius: 0.5rem;
}

.empty-message {
    font-weight: 500;
}

.btn-red {
    background-color: #dd0f0a!important;
    color: white;
    border: none!important;
}

.btn-red:hover {
    background-color: #bb0c08!important;
    color: white;
}