/*
Structure du css

selecteur{
    propriété: "valeur";
    propriété: "valeur";
    propriété: "valeur";
    propriété: "valeur";
}
*/

/*
    https://www.w3.org/wiki/CSS/Properties/color/keywords
*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
html{
    --couleur-texte-clair: rgb(35, 35, 35);
    --couleur-ap-clair: rgb(255,255,255);
    --couleur-texte-sombre: rgb(255,255,255);
    --couleur-ap-sombre: rgb(68, 65, 65);
    --couleur-texte-violet-clair: rgb(75, 21, 136);
    --couleur-texte-violet-sombre: rgb(116, 41, 202);
}

*{
    
    padding: 0;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;

    scroll-behavior: smooth;
}

body.Clair{ 
    background-color: var(--couleur-ap-clair);
    color: var(--couleur-texte-clair);
}

body.Sombre{
    background-color: var(--couleur-ap-sombre);
    color: var(--couleur-texte-sombre);
}

.menu{
    
    
    margin: 16px 10px;

    /* margin: 10px; */
    /* margin: 10px 20px; première valeur haut et bas ; la seconde gauche et droite*/
    /* margin: 10px 20px 30px 40px; haut; droite; bas; gauche*/

    list-style-type:none ;
    
}
.menu a{
    color: inherit; /* Prends la valeur de la propriété parent */
    text-decoration: none;
    border-radius: 10px;
    user-select: none;
}

main{
    min-height: calc(100vh - 132px - 119px); /* toute la hauteur de l'écran - la hauteur du header - la hauteur du footer */
}

/*

100px
33%
1em

1vh (représente 1/100 de la hauteur)
1vw (représente 1/100 de la largeur)


*/
.menu .item{
    padding: 5px;
    border-radius: 10px;
    text-align: center;
}
.menu .item.selectionne,
.menu .item:hover{
    background-color: rgb(75, 21, 136);
    color: rgb(255, 255, 255);

    
}
.menu a.icon.selectionne,
.menu a.icon:hover{
    color: rgb(75, 21, 136) ;
}


.material-symbols-outlined {
  font-size: 30px !important;
}


ul img{
    width: 100px;
}
ul.menu{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
}
.menu .switch-JN{
    width: 68px;
    position: relative;
}


h1{
    transition: color 300ms;
    text-align: center;
    margin-bottom: 40px ;
}
h2{

    margin-top: 0;
    margin-bottom: 10px;

}

main {

    margin: 0px 200px;

}

main img{
    max-width: 90%;
    
    margin-left: 5%;
}

main p {
    text-align: justify;
}

main .image_et_texte{
    display: flex;
    margin-bottom: 40px;
}

main .image_et_texte .image{
    width: 40%;
    overflow: hidden;
}

main .image_et_texte .image img{
    width: 100%;
    height: 100%;
}


main .image_et_texte .texte{
    width: 60%;
    padding: 0 20px;
}

main .image_et_texte .texte p{
    margin-bottom: 30px;
}
.Logo_inge {

    text-align: center;

}
.Coupe {

    text-align: center;

}
footer{
    color: var(--couleur-texte-sombre) ;
    padding: 40px 0px; 
    background-color: rgb(75, 21, 136); 
    text-align: center;
    border-radius: 30px;
    margin: 10px;
}


/* Page d'accueil */
body.Clair
.prenom{
    color: var(--couleur-texte-violet-clair);
    font-size: 1.11em;
    font-weight: bold;
}
body.Sombre
.prenom{
    color: var(--couleur-texte-violet-sombre);
    font-size: 1.11em;
    font-weight: bold;
}

body.Clair
.violet{

    color: var(--couleur-texte-violet-clair);
    font-weight: bold;

}
body.Sombre
.violet{

    color: var(--couleur-texte-violet-sombre);
    font-weight: bold;

}
.tabulation{

    margin-left: 20px;

}
a{

    text-decoration: none;
    cursor: pointer;

}

.encadre{
    border: 1px solid rgb(75, 21, 136);
    padding: 20px;
    border-radius: 10px;
}
#logo-coupe-de-france{
    max-width: 100%;
}

@media (max-width: 840px){

 .menu img {

    width: 60px;

 }

 .menu {
    margin: 20px 10px;
 }

}
@media (max-width: 800px){
    main{
        margin: 0px 50px;
    }
    main .image_et_texte{
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
    }
    
    main .image_et_texte .image{
        width: 40%;
    }
    main .image_et_texte .texte{
        width: 100%;
    }
}

@media (max-width: 425px){
    main{
        margin: 0px 20px;
    }
    body{
        font-size: 14px;
    }
    main .image_et_texte .image{
        width: 60%;
    }
}

@media (max-width: 375px){
    body{
        font-size: 12px;
    }

}