/* ------------------   CSS ---------------------------*/
@import url("style_index_root.css");
@import url("style_header.css"); 

body {
	width: auto; /* Largeur in px or % */
	height: auto; /* Hauteur in px or % */
    margin: auto; /* Marge in px*/
	padding: auto; /* Marge interieure*/
	background-color: var(--bodycolor0); /* Couleur de fond */
    font-family: var(--fontfamily);
}

.info-page{
    margin: 10px 10% 20px 10%;
}
.info-page-titre{
    padding: 10px;
    color: var(--maincolor1);
    font-family: "Comic Sans MS", Verdana, Arial;
    text-align: center;
    background-color: var(--bodycolor);
    border-radius: 0px 0px 15px 15px;
}
.info-page-titre p{
    font-style: italic;
    margin: 0px 15% 10px 15%;
}

.info-page-corps{
    margin: 100px 0px 100px 0px;
    color: black;
    background-color: var(--bodycolor);
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 10px;
}
.info-page-corps-1{
    padding: 10px;
    color: black;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.info-page-corps-1-item{
    width: 45%;
    margin: 10px;
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}
.info-page-corps-1-item a{
    text-decoration: none;
    color: rgb(10,10,70);
    font-size: 110%;
}
.info-page-corps-1-item a:hover{
    color: rgb(10,30,150);
}
.info-page-corps-1-item img{
    width: 160px;
    height: auto;
    margin-right: 10px;
}

.info-page-corps-2{
    background-color: var(--maincolor1);
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.info-page-corps-2 p{
    border: 2px white solid;
    border-radius: 10px;
    padding: 5px 20px 5px 20px;
    color: white;
}
.info-page-corps-2 a{
    color: white;
    text-decoration: none;
}

.desactive {
    background-color: inherit;
    color: white;
}
.active {
    background-color: white;
    color: var(--maincolor1);
}

.set-cursor-pointer:hover{
    cursor: pointer;
}


/* ================================================================================================*/

@media all and (max-width: 1024px) {
    .info-page {
        margin: 10px;
        padding: 10px;
    }
    .info-page-corps{
        margin: 10px;
        padding: 10px;
        
    }
    .info-page-corps-item{
        width: 95%;

    }
	
}