.match-page-container { 
max-width: 1800px; 
margin: 10px auto; 
padding: 0 15px; 
}
.match-section { 
background-color: #2c2c2e; 
border: 1px solid #444; 
border-radius: 5px; 
padding: 20px; 
margin-bottom: 25px; 
}
.match-section h2 { 
color: #4CAF50; 
border-bottom: 2px solid #444; 
padding-bottom: 10px; 
margin-top: 0; 
}


/* Style pour la liste des cartes de match */
.match-history-list {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espace entre chaque carte de match */
}

.match-card {
    display: flex;
    align-items: center;
    background-color: #3a3a3c;
    border: 1px solid #555;
    border-radius: 8px;
    padding: 15px;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s;
}

.match-card:hover {
	background-color: #4a4a4c;
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.guild-info {
    flex: 1; /* Prend l'espace disponible */
    display: flex;
    align-items: center;
}
.guild-info.guild-1 {
    justify-content: flex-start; /* Aligne les éléments à gauche */
}
.guild-info.guild-2 {
    justify-content: flex-end; /* Aligne les éléments à droite */
    text-align: right;
}

.guild-info .emblem {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #666;
}

.guild-info .name {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}
.guild-info.guild-1 .name { margin-left: 15px; }
.guild-info.guild-2 .name { margin-right: 15px; }
.guild-info .name:hover { color: #4CAF50; }

.match-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 20px; /* Espace autour du "VS" */
}

/* NOUVEAU : On transforme la ligne du score en conteneur flex pour un alignement parfait */
.score-line {
    display: flex;
    align-items: center; /* Aligne verticalement le score et l'image VS */
    justify-content: center;
}

.match-center .vs-image {
    width: 50px; /* Ajustez la taille de votre image VS */
    height: auto;
	margin-left: 15px;
    margin-right: 15px;
}

.match-center .date {
    font-size: 12px;
    color: #aaa;
    margin-top: 5px;
}

.points-display {
    font-size: 22px;
    font-weight: bold;
}
.points-display.win { color: #66bb6a; } /* Vert pour la victoire */
.points-display.loss { color: #ef5350; } /* Rouge pour la défaite */
.points-display.draw { color: #ffa726; } /* Orange pour l'égalité */


/* Conteneur pour nos boutons d'action */
.section-header-actions {
    display: flex;
    align-items: center;
    gap: 15px; /* Espace entre les boutons */
	margin-left: auto; /* Pousse les boutons à droite */
}



/* Style générique pour les boutons d'action */
.section-header {
    display: flex;
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne */
    justify-content: space-between; /* Espace le titre et les boutons */
    align-items: center;
    margin-bottom: 20px;
}

.section-header h2 {
    margin: 0; /* On enlève la marge par défaut du h2 */
}

/* --- Conteneur des boutons d'action --- */
.section-header-actions {
    display: flex;
    flex-wrap: wrap; /* Permet aux boutons de passer à la ligne */
    justify-content: center; /* CENTRE LES BOUTONS DANS LEUR CONTENEUR */
    align-items: center;
    gap: 15px;
}


/* --- VOS STYLES DE BOUTONS (légèrement adaptés pour la flexibilité) --- */

/* Style de base partagé par tous les boutons d'action */
.section-header-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.2s ease-in-out;
    border: none;
    cursor: pointer;
    font-size: 16px;
	text-shadow: 0 0 8px rgba(0,0,0,0.3);
}

/* Bouton "Règlement" - j'utilise votre nom de classe spécifique */
main a.button-tertiary-rules {
    background-color: #444c56; /* Un gris neutre pour le différencier */
    color: #adbac7;
}
main a.button-tertiary-rules:hover {
    background-color: #586069;
    color: #fff;
	text-decoration: none;
}

/* Bouton "Mes Défis" */
.section-header-actions .button-secondary {
    background-color: #388bfd; /* Bleu */
    color: #fff;
}
.section-header-actions .button-secondary:hover {
    background-color: #529dfd;
	text-decoration: none;
}

/* Bouton "Lancer un défi" */
.section-header-actions .button-primary {
    background-color: #4CAF50; /* Vert */
    color: #fff;
}
.section-header-actions .button-primary:hover {
    background-color: #5cd662;
	text-decoration: none;
}

/* Wrapper pour le bouton animé (gardé pour la position de l'image VS) */
.challenge-button-wrapper {
    position: relative;
}

/* On définit l'animation de l'ombre */
@keyframes pulse-shadow {
    0% {
        box-shadow: 0 0 10px 0px rgba(76, 175, 80, 0.4);
    }
    50% {
        box-shadow: 0 0 25px 10px rgba(76, 175, 80, 0.8);
    }
    100% {
        box-shadow: 0 0 10px 0px rgba(76, 175, 80, 0.4);
    }
}

.animated-challenge-button {
    /* Applique l'animation au bouton */
    animation: pulse-shadow 2s infinite ease-in-out;
}

.challenge-button-vs-image {
    position: absolute;
    top: -15px;      /* Ajustez pour le positionnement parfait */
    right: -15px;    /* Ajustez pour le positionnement parfait */
    width: 40px;     /* Taille de votre image */
    height: auto;
    pointer-events: none; /* Pour que l'image ne bloque pas le clic sur le bouton */
    transition: opacity 0.5s; /* Pour une apparition/disparition douce */
    opacity: 0; /* Cachée par défaut */
}
/* --- FIN DE LA SECTION D'ANIMATION --- */



/* =================================================================== */
/* ===                MEDIA QUERIES POUR LE RESPONSIVE             === */
/* =================================================================== */

/* Pour les tablettes et les écrans plus petits (en dessous de 800px) */
@media (max-width: 800px) {
    .match-card {
        /* On passe à une disposition en colonne */
        flex-direction: column;
        padding: 20px;
    }

    .guild-info {
        /* Chaque guilde prend toute la largeur */
        width: 100%;
        margin-bottom: 10px;
    }

    .guild-info.guild-2 {
        /* On ré-aligne à gauche pour la vue mobile */
        justify-content: flex-start;
        text-align: left;
        /* On inverse l'ordre visuel pour garder EMBLEME puis NOM */
        flex-direction: row-reverse;
    }
    .guild-info.guild-2 .name {
        margin-right: 0; /* On annule la marge de droite */
        margin-left: 15px; /* On ajoute la marge à gauche */
    }

    .match-center {
        /* Le centre prend aussi toute la largeur */
        width: 100%;
        margin: 15px 0; /* Espacement vertical */
    }
    
    .score-line {
        width: 100%;
        justify-content: space-around; /* On espace les scores sur toute la largeur */
    }
}


/* Pour les smartphones (en dessous de 480px) */
@media (max-width: 480px) {
    .guild-info .name {
        /* On réduit la taille de la police pour les très petits écrans */
        font-size: 16px;
    }

    .points-display {
        font-size: 20px;
    }
    
    .match-center .vs-image {
        width: 40px; /* On réduit un peu l'image VS */
    }
}

/* =================================================================== */
/* ===                STYLES POUR LE CLASSEMENT ATG                === */
/* =================================================================== */

.ranking-list {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Espace entre chaque ligne de classement */
}

.ranking-card {
    display: flex;
    align-items: center;
    background-color: #3a3a3c;
    border: 1px solid #555;
    border-radius: 8px;
    padding: 10px 15px;
    transition: background-color 0.2s;
}

.ranking-card:hover {
    background-color: #4a4a4c;
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);	
	
}

.ranking-card-header {
    flex-grow: 1; /* C'est lui qui s'étire maintenant */
    display: flex;
    align-items: center;
}


.ranking-card .rank-position {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    margin-right: 15px;
	flex-shrink: 0;
}

.ranking-card .rank-medal {
    width: 49px; /* Taille de la médaille */
    height: 56px;
    margin-right: -10px; /* chevauchement léger sur le numéro */
    z-index: 2;
}

.ranking-card .guild-details {
    flex-grow: 1; /* Prend le reste de l'espace */
    display: flex;
    align-items: center;
	margin-left: 15px;
}

.ranking-card .guild-emblem {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 15px;
	flex-shrink: 0;
}

.ranking-card .guild-name {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}
.ranking-card .guild-name:hover {
    color: #4CAF50;
}

.ranking-card .rank-stats {
    display: flex;
    align-items: center;
    gap: 40px; /* Espace entre les stats */
	flex-shrink: 0;
    margin-left: 20px; /* Pousse les stats tout à droite */
}

.ranking-card .stat-item {
    text-align: center;
    color: #ccc;
    font-size: 14px;
    min-width: 80px;
}

.ranking-card .stat-item .stat-value {
    display: block;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}
.ranking-card .stat-item .stat-label {
    font-size: 12px;
    color: #aaa;
}

/* Pour les tablettes et les écrans plus petits (en dessous de 800px) */
@media (max-width: 800px) {
    .ranking-card {
        /* On passe toujours en colonne, c'est la meilleure approche */
        flex-direction: column;
        align-items: flex-start; /* On aligne tout au début */
    }

    /* === NOUVELLE RÈGLE POUR L'EN-TÊTE DE LA CARTE === */
    .ranking-card-header {
        /* display: flex; --- On rend l'en-tête (rang + guilde) flexible */
        /* align-items: center; --- */
        width: 100%;
        margin-bottom: 15px; /* Espace avant les stats */
		flex-grow: 0;
    }

    .ranking-card .rank-stats {
        width: 100%;
        margin-left: 0;
        justify-content: space-around;
        padding-top: 15px;

        /* --- LA CORRECTION EST ICI --- */
        /* On retire la bordure directe */
        border-top: none; 
        /* On utilise une pseudo-classe pour créer une ligne qui respecte le padding */
        position: relative; 
    }

    /* On crée notre ligne de séparation avec ::before */
    .ranking-card .rank-stats::before {
        content: ''; /* Obligatoire pour qu'un pseudo-élément s'affiche */
        position: absolute;
        top: 0;
        left: 0; /* Aligné à gauche du conteneur .rank-stats */
        right: 0; /* Aligné à droite du conteneur .rank-stats */
        height: 1px;
        background-color: #555;
    }
}


/* Pour les smartphones (en dessous de 480px) */
@media (max-width: 480px) {
    .ranking-card-header .guild-name {
        /* On peut réduire la police si le nom est trop long */
        font-size: 16px;
    }

    .ranking-card .rank-stats {
        /* On réduit l'espace entre les stats sur les très petits écrans */
        gap: 10px;
    }

    .ranking-card .stat-item {
        min-width: 70px; /* On réduit la largeur minimum */
    }
}

.pagination-container {
    margin-top: 25px;
    display: flex;
    justify-content: center;
}
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
    list-style: none;
}
ul.pagination li {
    display: inline;
}
ul.pagination li a, ul.pagination li span {
    color: #f1f1f1;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #444;
    margin: 0 2px;
    border-radius: 4px;
}
ul.pagination li.active span {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}
ul.pagination li a:hover:not(.active) {
    background-color: #555;
}
ul.pagination li.disabled span {
    color: #666;
    cursor: not-allowed;
}