/*
creme: fdf8f0
red: ef112c
grey:343434
*/

body {
    background-color: #fdf8f0;
    color: #343434;
    padding: 0;
    margin: 0;
}

.logo_large {
    max-width: clamp(100px, 50% , 400px); 
    width: 100%;     /* Rend le logo responsive */
    height: auto;    /* Conserve les proportions */
    display: block;  /* Permet de centrer l'image avec margin: auto */
    margin: 5px auto 20px auto;  /* Centre l'image horizontalement */
}

nav {
    width: 100%;            /* Prend toute la largeur de la page */
    box-sizing: border-box; /* Inclut le padding dans la largeur totale */
/*    display: flex;          /* Utilise Flexbox pour la mise en page */*/
    justify-content: space-between; /* Espace le contenu */
    align-items: center;    /* Centre le contenu verticalement */
    font-size: clamp(0.4rem, 2vw , 1rem);
}

h1 {
    width: 100%;            /* Prend toute la largeur de la page */
    box-sizing: border-box; /* Inclut le padding dans la largeur totale */
    align-items: center;    /* Centre le contenu verticalement */
    font-size: clamp(1rem, 8vw , 2.2rem);
    margin: 1px 1px 1px 1px;  /* Centre l'image horizontalement */
}

main {
    padding: clamp(0.5rem, 5vw , 1.8rem);     /* Ajoute de l'espace autour du contenu */
}



header {
    padding: clamp(0.4rem, 5vw , 1.8rem) clamp(0.4rem, 5vw , 2rem) 0px clamp(0.4rem, 5vw , 2rem);     /* Ajoute de l'espace autour du contenu */
}


aside {
    width: 100%;            /* Prend toute la largeur de la page */
    padding: 5px 5px;     /* Ajoute de l'espace autour du contenu */
    box-sizing: border-box; /* Inclut le padding dans la largeur totale */
    align-items: center;    /* Centre le contenu verticalement */
    font-size: clamp(0.8rem, 3vw , 1rem);
    margin: 1px 1px 1px 1px;  /* Centre l'image horizontalement */
    font-style: italic;
}

h3 {
    color: #ef112c;
}

.not_active {
    background-color: #8a4300;
    color: #fdf8f0;
    padding: clamp(0.1rem, 1vw , 0.5rem);
    font-size: clamp(0.3rem, 1vw , 0.6rem);
    margin: 0; 
}

.active {
    background-color: #0d9900;
    color: #fdf8f0;
    padding: clamp(0.1rem, 1vw , 0.5rem);
    font-size: clamp(0.3rem, 1vw , 0.6rem);
    margin: 0; 
}


footer {
    background-color: #343434;
    color: #fdf8f0;
    padding: clamp(0.5rem, 2vw , 1rem);
    font-size: clamp(0.6rem, 2vw , 0.9rem);
    width: 100%;                /* Prend toute la largeur de la page */
    margin: 0; 
}

footer .aikos_legal {
    font-style: italic;
}

.matches_details {
    width: 100%;            /* Prend toute la largeur de la page */
    box-sizing: border-box; /* Inclut le padding dans la largeur totale */
    justify-content: space-between; /* Espace le contenu */
    align-items: center;    /* Centre le contenu verticalement */
    font-size: clamp(0.6rem, 3vw , 0.8rem);
}

a:link, a:visited {
    color: #ef112c;
    /*font-weight: bold;       /* Texte en gras */*/
}

a:hover{
    color: #343434;
    /*font-weight: bold;       /* Texte en gras */
}

@media screen and (min-width: 850px) {
    body {
      max-width: 800px; /* Limite la largeur du texte */
      margin: 0 auto; /* Centre le texte horizontalement */
    }
  }