/* Style global */
body {
    background-color: #0A0A0A; /* Fond noir */
    color: #fff; /* Texte blanc */
    font-family: 'Open Sans', sans-serif; /* Utiliser Open Sans comme police principale */
    margin: 0;
}

.section p {
    margin: 20px; /* Supprime les marges par défaut */
}

h2 {
    text-transform: uppercase;
}

.welcome-section {
    margin-left: 20px;
    margin-right: 20px;
}
.about-section {
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 30px;
}

.intro-image img{
    width: 90vw;
}



/* Header */



header .site-logo {
    display: inline-block;
    font-size: 24px; /* Taille du logo */
    font-weight: bold;
}

nav {
    display: flex;
    justify-content: space-between; /* Espacement entre logo et menu */
    align-items: center; /* Alignement vertical */
}

/* Menu Hamburger */
.menu-toggle {
    display: none; /* Masquer par défaut */
    flex-direction: column; /* Alignement vertical */
    cursor: pointer; /* Curseur de pointeur */
}

.menu-toggle div {
    width: 25px; /* Largeur des barres */
    height: 3px; /* Hauteur des barres */
    background-color: #fff; /* Couleur des barres */
    margin: 4px 0; /* Espacement entre les barres */
}

/* Section Hero */
.hero-section {
    
    position: relative;
    height: 80vh; /* Hauteur de la section Hero */
    background-size: cover; /* Couvre toute la section */
    background-position: center; /* Centre l'image */
    display: flex; /* Utilise flexbox pour centrer le contenu */
    align-items: end; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
    text-align: center; /* Centre le texte */
    color: #fff; /* Texte blanc */
    padding: 20px; /* Espacement intérieur */
    mix-blend-mode: screen;
}
.hero-content {
    display: flex; /* Utilise flexbox pour centrer le contenu */
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
    text-align: center; /* Centre le texte */
    flex-direction: column;
    color: #fff; /* Texte blanc */
    padding: 20px; /* Espacement intérieur */
}

.hero-content h1 {
    font-size: 24px; /* Taille de police pour le titre */
    margin-bottom: 20px; /* Espacement sous le titre */
}

.hero-content .btn {
    background-color: #e63946; /* Couleur rouge pour le bouton */
    color: #fff; /* Texte blanc */
    padding: 15px 45px; /* Espacement intérieur */
    border: none; /* Pas de bordure */
    border-radius: 5px; /* Coins arrondis */
    text-decoration: none; 
    
    transition: background-color 0.3s ease; /* Transition pour un effet de survol */
}
.create-team-section .btn {
    width: 50%;
    background-color: #e63946; /* Couleur rouge pour le bouton */
    color: #fff; /* Texte blanc */
    padding: 15px 45px; /* Espacement intérieur */
    border: none; /* Pas de bordure */
    border-radius: 5px; /* Coins arrondis */
    text-decoration: none; 
    
    transition: background-color 0.3s ease; /* Transition pour un effet de survol */
}


.create-team-section{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;

}
.hero-content .btn:hover {
    background-color: #d62839; /* Couleur plus foncée au survol */
}

/* Section de Bienvenue, À Propos et Dernières Nouvelles */
.welcome-section .about-section  {
    
    text-align: center;
    background-color: #0A0A0A; /* Couleur de fond pour les sections */
}
.news-section {
    padding: 40px 20px;
    text-align: center;
    background-color: #111111; /* Couleur de fond pour les sections */
}

h2 {
    font-size: 36px; /* Taille des titres */
    margin-bottom: 20px; /* Espacement sous les titres */
    width: 60%;
}

p {
    font-size: 18px; /* Taille de la police pour le texte */
    margin: 10px 0; /* Espacement autour des paragraphes */
}

/* Dernières Nouvelles */
.news-items {
    display: flex; /* Utilisation de flexbox */
    flex-direction: column; /* Alignement vertical sur mobile */
    gap: 20px; /* Espacement entre les articles */
}

.news-item {
    background-color: #161616; /* Fond pour chaque article */
    padding: 15px;
    border-radius: 5px;
    transition: transform 0.2s; /* Transition pour l'animation */
}

.news-item:hover {
    transform: scale(1.02); /* Agrandissement au survol */
}

.news-item h3 {
    margin: 10px 0; /* Espacement autour des titres d'articles */
    font-size: 24px; /* Taille de la police pour les titres d'articles */
}

/* Media Queries pour les écrans plus larges */
@media (min-width: 768px) {
    
    .match-list{
    width: 50%;
}
    .hero-content h1 {
        font-size: 40px; /* Taille de police pour écrans plus grands */
    }

    section {
        padding: 60px 40px; /* Plus d'espacement sur les grands écrans */
    }

    .news-items {
        flex-direction: row; /* Affichage en ligne sur les écrans plus larges */
        flex-wrap: wrap; /* Permet de passer à la ligne si nécessaire */
    }

    .news-item {
        flex: 1 1 calc(50% - 20px); /* 50% de la largeur, avec un espacement */
    }

    .mobile-menu-content{
        display: none;
    }

    .intro-image img{
        width: auto;
        height: 50vh;
    }
    
}

.site-header {
    background-color: #0A0A0A;
    padding: 22px 15px 15px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


button {
    background: none;
    border: none;
    cursor: pointer;
}

.logo img {
    max-height: 35px;
    z-index: 10;
}

.main-navigation .menu-items {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-navigation .menu-items li a {
    color: #FAFAFA;
    font-size: 14px;
    text-decoration: none;
}

.login-button .btn-login, 
.login-button .btn-logout {
    background-color: #e63946;
    color: #010A13;
    padding: 8px 16px;
    border-radius: 5px;
    text-decoration: none;
}


.header-container {
    display: flex;
    justify-content: space-around;
    gap: 10%;
    align-items: center;
    width: 100%;
}

/* Responsive styles */
@media (max-width: 768px) {

    .header-container {
        display: flex;
        justify-content: flex-end;
        gap: 10%;
        align-items: center;
        width: 100%;
    }
    
    .main-navigation {
        display: none;
        
    }

    .burger-menu {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px;
        background-color: #0A0A0A;
        border-radius: 8px;
    }

    .burger-icon, .close-overlay {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .burger-icon span, .close-overlay span {
        display: block;
        width: 25px;
        height: 3px;
        background-color: #FAFAFA;
    }

    .close-overlay {
        font-size: 30px;
        cursor: pointer;
        display: none;
        color: #FAFAFA;
    }

    /* Overlay menu */
    .mobile-menu-overlay {
        display: none;
        overflow: hidden;
        
        flex-direction: column;
        position: absolute;
        top: 8%;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: #0A0A0A;
        z-index: 2;
    }
    .mobile-menu-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
        width: 100%;
        
    }

    .mobile-menu-content .mobile-menu-items {
        list-style: none;
        padding: 10px;
    }

    .mobile-menu-content .mobile-menu-items li a {
        color: #FAFAFA;
        text-decoration: none;
        font-size: 16px;
        display: flex;
        padding: 13px 0;
        justify-content: center;
        align-items: center;
    }

    /* Active overlay with cross icon */
    .burger-menu.active .burger-icon {
        display: none;
    }

    .burger-menu.active .close-overlay {
        display: block;
    }

    /* Show mobile menu when active */
    .mobile-menu-overlay.active {
        display: flex;
    }
}


/* Footer Navigation */
footer {
    margin-top: 10%;
    margin-bottom: 10%;
}

.footer-nav {
    display: flex; /* Utilise flexbox */
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne */
    justify-content: center; /* Centre le contenu horizontalement */
    margin-bottom: 20px; /* Espacement en bas */
}

.footer-nav ul {
    list-style: none; /* Pas de puces */
    padding: 0; /* Pas de padding */
    margin: 0; /* Pas de marges */
    display: flex; /* Utilise flexbox */
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne */
    justify-content: center; /* Centre le contenu */
}

.footer-nav ul li {
    margin: 5px; /* Espacement entre les éléments */
}

.footer-nav ul li a {
    color: #FAFAFA; /* Couleur des liens */
    font-size: 16px; /* Taille de la police */
    text-decoration: none; /* Pas de soulignement */
    display: block; /* Affiche en bloc pour le padding */
    padding: 10px 15px; /* Espacement autour des liens */
    transition: color 0.3s; /* Transition pour les effets de survol */
}

.footer-nav ul li a:hover {
    color: #e63946; /* Couleur au survol */
}

.footer-info{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 20px;
}
.footer-info p {
    color: #FAFAFA; /* Couleur des liens */
    font-size: 16px; /* Taille de la police */
    text-decoration: none; /* Pas de soulignement */
    display: block; /* Affiche en bloc pour le padding */
    padding: 10px 15px; /* Espacement autour des liens */
    transition: color 0.3s; /* Transition pour les effets de survol */
}

.social-icons{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    margin-top: 20px;
    gap: 10%;
}


.news-section {
    
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #111111; /* Couleur de fond pour la section */
    text-decoration: none;
}

.news-section h2 {
    font-size: 36px; /* Taille des titres */
    margin-bottom: 20px; /* Espacement sous le titre */
    color: #ffffff; /* Couleur blanche pour le titre */
    
}

.news-items {
    display: flex; /* Utilisation de flexbox pour le layout */
    justify-content: center; /* Centre les articles */
    align-items: center;
    gap: 20px; /* Espacement entre les articles */
    
}

.news-item {
    background-color: #444; /* Couleur de fond pour chaque article */
    border-radius: 10px; /* Coins arrondis */
    overflow: hidden; /* Cache le débordement */
    transition: transform 0.2s; /* Transition pour l'effet hover */
    width: 300px; /* Largeur fixe pour chaque article */
}

.news-item:hover {
    transform: scale(1.05); /* Agrandissement au survol */
}

.news-item img {
    width: 100%; /* Image prend toute la largeur */
    height: auto; /* Hauteur automatique pour garder le ratio */
}

.news-item h3 {
    margin: 15px; /* Espacement autour du titre */
    font-size: 20px; /* Taille de police pour le titre d'article */
    color: #ffffff; /* Couleur blanche pour le titre */
    text-decoration: none; 
}

.news-items {
    display: flex; /* Utilisation de flexbox pour le layout */
    flex-wrap: wrap; /* Permet de passer à la ligne pour les petites écrans */
    justify-content: center; /* Centre les articles */
    gap: 20px; /* Espacement entre les articles */
}

.news-item {
    background-color: #161616; /* Couleur de fond pour chaque article */
    border-radius: 10px; /* Coins arrondis */
    overflow: hidden; /* Cache le débordement */
    transition: transform 0.2s; /* Transition pour l'effet hover */
    width: 100%; /* 50% de la largeur pour deux colonnes avec espacement */
    height: 50%;
    max-width: 300px; /* Limite la largeur maximale des cartes */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Ombre pour un effet de profondeur */
}

.news-item:hover {
    transform: scale(1.05); /* Agrandissement au survol */
}

.news-item img {
    width: 100%; /* Image prend toute la largeur */
    height: auto; /* Hauteur automatique pour garder le ratio */
}

.news-item h3 {
    margin: 10px; /* Espacement autour du titre */
    font-size: 20px; /* Taille de police pour le titre d'article */
    text-decoration: none; 
}

.news-item p {
    margin: 0 10px 10px; /* Espacement autour du texte */
    font-size: 14px; /* Taille de police pour le texte */
    color: #dddddd; /* Couleur gris clair pour le texte */
    max-height: 50px; /* Limite la hauteur du texte pour éviter un débordement */
    overflow: hidden; /* Cache le texte débordant */
    text-overflow: ellipsis; /* Ajoute des points de suspension si le texte est trop long */
    
}


.news-section .btn {
    background-color: #e63946; /* Couleur rouge pour le bouton */
    color: #fff; /* Texte blanc */
    padding: 10px 20px; /* Espacement intérieur */
    border: none; /* Pas de bordure */
    border-radius: 5px; /* Coins arrondis */
    text-transform: uppercase; /* Majuscules pour le texte */
    transition: background-color 0.3s ease; /* Transition pour un effet de survol */
    margin-top: 20px; /* Espacement au-dessus du bouton */
    text-decoration: none; 
}

.news-section .btn:hover {
    background-color: #d62839; /* Couleur plus foncée au survol */

}

.nojq {
    display: none;
}


/* Style global pour les équipes */
.toutes-les-equipes {
    padding: 40px 20px; /* Espacement autour de la section */
    text-align: center; /* Centre le texte */
    background-color: #0A0A0A; /* Fond noir */
}

.equipe-card {
    background-color: none; /* Fond pour chaque carte d'équipe */
    border-radius: 10px; /* Coins arrondis */
    padding: 20px; /* Espacement intérieur */
    margin: 10px; /* Espacement extérieur entre les cartes */
    transition: transform 0.2s; /* Transition pour l'effet hover */
    display: inline-block; /* Affiche les cartes en ligne */
    width: calc(50% - 20px); /* 50% de la largeur pour deux cartes par ligne */
    max-width: 300px; /* Largeur maximale pour les cartes */ /* Ombre pour un effet de profondeur */
}

.equipe-card:hover {
    transform: scale(1.05); /* Agrandissement au survol */
}

.equipe-logo {
    width: 80px; /* Largeur du logo */
    height: auto; /* Hauteur automatique pour garder le ratio */
    margin-bottom: 10px; /* Espacement sous le logo */
    border-radius: 100%; 
}

.equipe-title {
    font-size: 20px; /* Taille du titre de l'équipe */
    margin: 0; /* Pas de marges autour du titre */
}


/* Media Queries pour les écrans plus larges */
@media (min-width: 768px) {
    .equipe-card {
        width: calc(33.33% - 20px); /* 3 cartes par ligne sur grands écrans */
    }
}
.equipe-link {
    text-decoration: none; /* Pas de soulignement sur le lien */
    color: inherit; /* Hérite de la couleur du texte parent */
    display: flex; /* Utilise flexbox pour le contenu de la carte */
    flex-direction: column; /* Aligne les éléments verticalement */
    align-items: center; /* Centre les éléments horizontalement */
    height: 100%; /* Prend toute la hauteur de la carte */
}


.equipe-container {
    padding: 20px;
    background-color: #0A0A0A;
    color: #FFFFFF;
}

.equipe-thumbnail {
    height: 200px; /* Hauteur du thumbnail */
    background-size: cover;
    background-position: center;
    margin-bottom: 20px; /* Espacement en bas */
}

.equipe-header {
    display: flex; /* Alignement horizontal */
    align-items: center; /* Centrer verticalement */
}

.equipe-title {
    font-size: 36px;
    margin-bottom: 20px;
}

.equipe-logo {
    max-width: 50px; /* Ajuster la taille du logo */
    height: auto;
    margin-right: 15px; /* Espacement à droite du logo */
}

.equipe-stats {
    background-color: #161616; /* Fond pour les stats de l'équipe */
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px; /* Espacement en bas */
}

.membres-list {
    list-style: none; /* Pas de puces */
    padding: 0; /* Pas de remplissage */
}

.membres-list li {
    background-color: #161616; /* Fond pour les membres */
    margin: 20px;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 5px; /* Espacement entre les membres */
}

.match-list {
    list-style: none; /* Pas de puces */
    padding: 0; /* Pas de remplissage */
    
}



.match-item {
    background-color: #161616; /* Fond pour chaque match */
    
    margin-bottom: 30px; /* Espacement entre les matchs */
    transition: background-color 0.3s ease; /* Transition pour effet de survol */
}

.match-item-top {
    
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.match-item:hover {
    background-color: #161616; /* Changement de couleur au survol */
}

.match-item a {
    text-decoration: none; /* Pas de soulignement pour les liens */
    color: #FAFAFA; /* Couleur du texte des liens */
}


.match-item-bottom {
    padding: 5px 5px 5px 20px;
    background-color: #e63946;
    border-radius: 0px 0px 12px 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    
}
.match-item-bottom p{
   font-size: 16px;
   
}

.matches-container{
    margin: 20px;
}


.match-container {
    padding: 20px;
}

.match-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}

.match-details {
    margin-bottom: 20px;
}

.team-members {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    flex-direction: column;
   
}

.team ul {
    list-style: none;
}

.team {
    flex: 1; /* Permet aux équipes d'occuper un espace égal */
    margin-bottom: 20px; /* Espacement entre les équipes */
}

.team:last-child {
    margin-bottom: 0; /* Supprime l'espacement pour la dernière équipe */
}

.team-logo {
    max-width: 100%; /* S'assure que le logo s'adapte à la largeur */
    height: auto;
}

.team h3 {
    margin: 10px 0;
}

.match-status {
    margin-top: 20px;
    color: #ccc; /* Couleur du texte pour le statut */
}

.score-header {
    background-color: #161616; /* Couleur de fond noire */
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
}

.team-score {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* S'étend sur toute la largeur */
}

.team-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.team-abbr {
    font-weight: bold; /* Mettre en gras l'abréviation de l'équipe */
    font-size: 14px; /* Taille de la police pour l'abréviation */
}

.team-name {
    font-size: 12px; /* Taille de la police pour le nom de l'équipe */
    color: #aaa; /* Couleur pour le nom de l'équipe */
}

.score {
    color: #FFFFFF;
    font-size: 20px; /* Taille du score */
    margin: 0 15px; /* Marges autour du score */
    font-weight: bold; /* Mettre le score en gras */
}


/* Style global pour la page classement */
.classement-container {
    padding: 20px;
    color: #FAFAFA; /* Texte en blanc */
    background-color: #191919; /* Fond noir */
}

.classement-container h1 {
    font-size: 32px; /* Taille du titre principal */
    margin-bottom: 20px; /* Espace en dessous du titre */
}

.classement-container p {
    font-size: 18px; /* Taille de la date */
    margin: 10px 0; /* Espace autour des paragraphes */
}

/* Style pour le tableau de classement */
.classement-table {
    width: 100%; /* Largeur complète */
    border-collapse: collapse; /* Fusionne les bordures */
}

.classement-table th,
.classement-table td {
    padding: 10px; /* Espace intérieur pour chaque cellule */
    text-align: left; /* Alignement du texte à gauche */
}

.classement-table th {
    background-color: #e63946; /* Couleur d'arrière-plan pour les en-têtes */
    color: #fff; /* Couleur du texte des en-têtes */
}

.classement-table tbody tr:nth-child(even) {
    background-color: #353535; /* Couleur de fond pour les lignes paires */
}

.classement-table tbody tr:hover {
    background-color: #e63946; /* Couleur de fond au survol */
    color: #fff; /* Texte en blanc au survol */
}

/* Style pour le rang */
.classement-table tbody tr td:first-child {
    font-weight: bold; /* Mettre le rang en gras */
}

/* Media Queries pour les écrans plus larges */
@media (min-width: 768px) {
    .classement-container {
        padding: 40px; /* Plus de rembourrage sur les écrans plus larges */
    }

    .classement-table th,
    .classement-table td {
        padding: 15px; /* Plus d'espace dans le tableau */
    }

    .classement-table {
        font-size: 18px; /* Taille de police plus grande pour les écrans larges */
    }
}

/* Style global pour la page de connexion */
.connexion-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrer horizontalement */
    justify-content: center; /* Centrer verticalement */
    height: 100vh; /* Hauteur complète de la vue */
    background-color: #0A0A0A; /* Fond noir */
    color: #FAFAFA; /* Texte en blanc */
    padding: 20px; /* Espacement intérieur */
    box-sizing: border-box; /* Inclure padding dans la largeur totale */
}
form {
    background-color: #353535; /* Fond gris foncé pour le formulaire */
    padding: 30px; /* Espacement intérieur */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /* Ombre autour du formulaire */
    width: 80%; /* Largeur complète pour la responsivité */

    margin: 0 auto; /* Centrer le formulaire */
}

/* Style pour les labels et les champs de saisie */
label {
    display: block; /* Chaque label occupe une ligne */
    margin-bottom: 5px; /* Espace sous le label */
    font-size: 16px; /* Taille du texte des labels */
    
}

input[type="text"],
input[type="email"],
textarea {
    width: 100%; /* Largeur complète des champs */
    padding: 10px; /* Espacement intérieur */
    margin-bottom: 15px; /* Espace sous les champs */
    border: none; /* Pas de bordure */
    border-radius: 5px; /* Coins arrondis */
    background-color: #1C1C1C; /* Fond des champs de saisie */
    color: #FAFAFA; /* Texte en blanc */
    font-size: 16px; /* Taille du texte */
}

textarea {
    height: 100px; /* Hauteur du champ texte */
    resize: none; /* Désactiver le redimensionnement */
}

input[type="submit"] {
    background-color: #e63946; /* Couleur rouge pour le bouton */
    color: #FAFAFA; /* Texte en blanc */
    padding: 10px 20px; /* Espacement intérieur */
    border: none; /* Pas de bordure */
    border-radius: 5px; /* Coins arrondis */
    text-transform: uppercase; /* Majuscules pour le texte */
    cursor: pointer; /* Curseur en pointeur */
    transition: background-color 0.3s ease; /* Transition pour un effet de survol */
}

input[type="submit"]:hover {
    background-color: #d62839; /* Couleur plus foncée au survol */
}

/* Style pour les messages d'erreur et de succès */
.error {
    background-color: #FF0019; /* Rouge pour les erreurs */
    color: #FFF; /* Texte en blanc */
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px; /* Espace sous le message d'erreur */
    text-align: center; /* Centre le texte */
}

.success {
    background-color: #28a745; /* Vert pour les succès */
    color: #FFF; /* Texte en blanc */
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px; /* Espace sous le message de succès */
    text-align: center; /* Centre le texte */
}

/* Styles pour les pages légales */
.legal-container, .cgu-container, .privacy-container {
    max-width: 800px; /* Largeur maximale du conteneur */
    margin: 0 auto; /* Centrer le conteneur */
    padding: 20px; /* Espacement intérieur */
    background-color: #1a1a1a; /* Couleur de fond */
    color: #fff; /* Couleur du texte */
}

 h2 {
    color: #e63946; /* Couleur des titres */
}

.error, .success {
    color: #FF0019; /* Couleur rouge pour les erreurs */
}

.success {
    color: #00FF00; /* Couleur verte pour les succès */
}

/* Liens */
a {
    color: #e63946; /* Couleur des liens */
    text-decoration: none; /* Pas de soulignement */
}

a:hover {
    text-decoration: underline; /* Souligner au survol */
}

/* Styles pour les articles de blog */
.single-article-container {
    max-width: 800px; /* Largeur maximale du conteneur */
    margin: 0 auto; /* Centrer le conteneur */
    padding: 20px; /* Espacement intérieur */
    background-color: #1A1A1A; /* Couleur de fond */
    color: #FFF; /* Couleur du texte */
}

.single-article {
    margin-bottom: 40px; /* Espacement entre les articles */
}

.single-article h1 {
    font-size: 2.5rem; /* Taille de la police pour le titre */
    margin-bottom: 20px; /* Espacement sous le titre */
}

.article-meta {
    font-size: 0.9rem; /* Taille de la police pour les métadonnées */
    color: #D8D8D8; /* Couleur des métadonnées */
    margin-bottom: 10px; /* Espacement sous les métadonnées */
}

.article-thumbnail img {
    width: 100%; /* Image responsive */
    height: auto; /* Conserver le ratio d'aspect */
    border-radius: 8px; /* Coins arrondis */
}

.article-content {
    font-size: 1.1rem; /* Taille de la police pour le contenu */
    line-height: 1.6; /* Espacement entre les lignes */
    margin: 20px 0; /* Espacement autour du contenu */
}

.article-tags {
    margin-top: 20px; /* Espacement au-dessus des tags */
    font-size: 1rem; /* Taille de la police pour les tags */
}

.article-tags strong {
    color: #e63946; /* Couleur pour le mot "Tags" */
}

a {
    color: #e63946; /* Couleur des liens */
    text-decoration: none; /* Pas de soulignement */
}

a:hover {
    text-decoration: underline; /* Souligner au survol */
}

/* Styles pour l'archive des articles */
.archive-container {
    max-width: 1200px; /* Largeur maximale du conteneur */
    margin: 0 auto; /* Centrer le conteneur */
    padding: 20px; /* Espacement intérieur */
}

.article-cards {
    display: flex; /* Utiliser flexbox pour les cartes */
    flex-wrap: wrap; /* Permettre aux cartes de se déplacer à la ligne */
    gap: 20px; /* Espacement entre les cartes */
}

.article-card {
    background-color: #333; /* Couleur de fond pour les cartes */
    border-radius: 8px; /* Coins arrondis */
    overflow: hidden; /* Masquer le débordement */
    transition: transform 0.3s; /* Transition pour l'effet au survol */
    flex: 1 1 calc(33.333% - 20px); /* Trois cartes par ligne avec espacement */
    text-align: center; /* Centre le texte à l'intérieur de la carte */
}

.article-card:hover {
    transform: scale(1.02); /* Agrandissement au survol */
}

.card-thumbnail img {
    width: 100%; /* Image responsive */
    height: auto; /* Conserver le ratio d'aspect */
}

.article-card h2 {
    font-size: 1.5rem; /* Taille de la police pour le titre */
    margin: 15px 0; /* Espacement autour du titre */
    color: #e63946; /* Couleur du titre */
}

.article-card p {
    padding: 0 15px; /* Espacement autour du texte */
    color: #D8D8D8; /* Couleur du texte */
}


.tournament-container {
    max-width: 800px; /* Largeur maximale du conteneur */
    margin: 0 auto; /* Centrer le conteneur */
    padding: 20px; /* Espacement intérieur */
    background-color: #1F1F1F; /* Fond sombre */
    border-radius: 8px; /* Coins arrondis */
}

.tournament-container h1 {
    font-size: 32px; /* Taille du titre principal */
    margin-bottom: 20px; /* Espacement sous le titre */
    color: #e63946; /* Couleur du titre */
}

.tournament-date {
    font-size: 20px; /* Taille du texte pour les dates */
    margin-bottom: 20px; /* Espacement sous la date */
}

.tournament-description,
.tournament-status,
.tournament-prize,
.tournament-regulation {
    margin-bottom: 20px; /* Espacement entre les sections */
    padding: 10px; /* Espacement intérieur */
    background-color: #333; /* Fond pour les sections */
    border-radius: 5px; /* Coins arrondis pour les sections */
}

.tournament-status .status {
    font-weight: bold; /* Met en gras le statut */
    color: #00ff00; /* Couleur verte pour le statut ouvert */
}

.tournament-status .status.closed {
    color: #ff0000; /* Couleur rouge pour le statut fermé */
}

.tournament-description h2,
.tournament-status h2,
.tournament-prize h2,
.tournament-regulation h2 {
    font-size: 24px; /* Taille des sous-titres */
    margin-bottom: 10px; /* Espacement sous les sous-titres */
    color: #e63946; /* Couleur des sous-titres */
}

.tournament-description p,
.tournament-status p,
.tournament-prize p,
.tournament-regulation p {
    font-size: 16px; /* Taille du texte */
    color: #D8D8D8; /* Couleur du texte */
}

.tournament-thumbnail {
    width: 100%; /* Prendre toute la largeur de la page */
    height: 300px; /* Hauteur de l'image, vous pouvez l'ajuster selon vos besoins */
    background-size: cover; /* Couvre toute la section */
    background-position: center; /* Centre l'image */
    position: relative; /* Position relative pour le contenu superposé */
}

.tournament-title-overlay {
    position: absolute; /* Position absolue pour superposer le texte */
    bottom: 20px; /* Espacement du bas */
    left: 20px; /* Espacement à gauche */
    color: #fff; /* Couleur du texte */
    background: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
    padding: 10px; /* Espacement intérieur */
    border-radius: 5px; /* Coins arrondis */
}

.tournament-title-overlay h1 {
    font-size: 36px; /* Taille du titre */
    margin: 0; /* Pas de marge */
}

.tournament-title-overlay .tournament-date {
    font-size: 20px; /* Taille du texte pour les dates */
    margin: 5px 0 0; /* Espacement sous le titre */
}


.profil-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #1a1a1a; /* Fond de la page */
    color: #fff; /* Couleur du texte */
    border-radius: 8px; /* Coins arrondis */
}

.profil-container h1, .profil-container h2 {
    color: #e63946; /* Couleur des titres */
}

.profil-details {
    margin-top: 20px;
}

.profil-details p {
    font-size: 16px; /* Taille du texte */
    margin: 10px 0; /* Espacement entre les paragraphes */
}

.profil-details input[type="password"] {
    width: 100%; /* Champ de mot de passe prend toute la largeur */
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #e63946; /* Bordure du champ */
    border-radius: 5px; /* Coins arrondis pour le champ */
}

.profil-details input[type="submit"] {
    background-color: #e63946; /* Couleur du bouton */
    color: #fff; /* Texte en blanc */
    padding: 10px 15px; /* Espacement interne */
    border: none; /* Pas de bordure */
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer; /* Curseur de pointeur */
    transition: background-color 0.3s; /* Transition pour l'effet au survol */
}

.profil-details input[type="submit"]:hover {
    background-color: #d62839; /* Couleur plus foncée au survol */
}

.success {
    background-color: #4CAF50; /* Couleur de fond pour le message de succès */
    color: white; /* Couleur du texte */
    padding: 10px; /* Espacement interne */
    margin-top: 10px; /* Espacement au-dessus */
    border-radius: 5px; /* Coins arrondis */
}