/* ------------------   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(--bodycolor); /* Couleur de fond */
    font-family: var(--fontfamily);
}

/*=======================  GALERIE  ==============================*/
.galerie-box-1{
    padding: 10px;
    margin-right: 10%;
    margin-left: 10%;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    color: var(--maincolor1);
    background-color: white;
    border-radius: 10px;
}
.galerie-box-2{
    margin-bottom: 10px;
    margin-top: 10px;
    margin-left: 2%;
    margin-right: 2%;
    padding: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.galerie-box-2-item{
    margin: 10px;
    padding: 10px;
    height: 160px;
    width: 200px;
}
.image_galerie{
    height: 160px;
    width: 200px;
}



/*=======================  AIDE  ==============================*/
.aide-box-1{
    padding: 10px;
    margin-right: 10%;
    margin-left: 10%;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    color: var(--maincolor1);
    background-color: white;
    border-radius: 10px;
}
.aide-box-2{
    margin-bottom: 10px;
    margin-top: 10px;
    margin-left: 10%;
    margin-right: 10%;
    padding: 20px;
    font-family: Arial, Helvetica, sans-serif;
}
.aide-box-2-item{
    margin: 10px;
    padding: 20px;
    color: black;
    background-color: white;
    font-size: 95%;
    text-align: justify;
    border-radius: 10px;
}
.aide-box-2-titre{
    color: var(--maincolor1);
    padding: 10px;
}



/*=======================  ITEM  ==============================*/
.page{
    margin: 20px 10% 20px 10%;
    font-family: Arial, Helvetica, sans-serif;
}
.pagetitre{
    padding: 5px;
    font-size: 140%;
    font-weight: bold;
    text-align: center;
    color: var(--maincolor1);
    font-family: "Comic Sans MS", Verdana, Arial;
}
.pagesoustitre{
    text-align: center;
    color: black;
}
.item{
    margin: 20px;
    padding: 20px;
    color: black;
    background-color: white;
    font-size: 95%;
    text-align: justify;
    border-radius: 15px;

}
.itemtitre{
    font-size: 120%;
    color: var(--maincolor1);
    padding: 10px;
    font-weight: bold;
}

@media all and (max-width: 1024px) {
    .page{
        margin: 20px 1% 20px 1%;
    }


}




/*=======================  CONTACT  ==============================*/
.contact-box-1 {
    margin-bottom: 10px;
    margin-top: 10px;
    margin-left: 10%;
    margin-right: 10%;
    padding: 20px;
    color: black;
    background-color: white;
    font-size: 80%;
    text-align: center;
    border-radius: 15px;
    font-family: Arial, Helvetica, sans-serif;
}
.contact-box-1 table, .contact-box-2-membre table {
    border-collapse: collapse;
    width: 100%;
}
.contact-box-1 th, .contact-box-1 td, .contact-box-2-membre th, .contact-box-2-membre td {
    border: 2px solid var(--maincolor4);
    text-align: left;
    padding: 5px;
}
.contact-box-1 tr:nth-child(even), .contact-box-2-membre tr:nth-child(even) {
    background-color: var(--maincolor5);
}
.contact-box-1 tr:hover, .contact-box-2-membre tr:hover {
    background-color: var(--maincolor3);
    color: white;
}
.contact-box-1 th, .contact-box-2-membre th {
    background-color: var(--maincolor3);
    padding-top: 10px;
    padding-bottom: 10px;
    color: white;
}

.contact-box-2 {
    margin-bottom: 10px;
    margin-top: 10px;
    margin-left: 10%;
    margin-right: 10%;
    padding: 20px;
    color: black;
    background-color: white;
    font-size: 80%;
    text-align: left;
    border-radius: 15px;
    font-family: Arial, Helvetica, sans-serif;
}
.contact-box-2-head{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    margin: 5px;
}
.contact-box-2-head div{
    padding-left: 10px;
}
.contact-box-2-img {
    width: 100px;
    height: 80px;
}
.contact-box-2 th, td{
    padding-left: 10px;
    padding-right: 10px
}
.contact-box-2 td:first-child{
    font-weight: bold;
}

.contact-box-2-membre{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    margin-top: 50px;
    margin-bottom: 50px;
    border-top: solid 2px rgb(100, 100, 100);
    text-align: center;
}

/*=======================  ABOUT  ==============================*/
.about-box-central {
    margin-right: 2%;
    margin-left: 2%;
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
}
.about-box-1 {
    width: 50%;
    margin: 20px;
    padding: 20px;
    background-color: white;
    border-radius: 15px;
    font-family: Arial, Helvetica, sans-serif;
}
.about-box-1-1 {
    margin-left: 10px;
    padding: 10px;
    color: black;
    font-size: 13px;
    text-align: left;  
}
.about-box-1-1-parag_title{
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}
/*-----*/
.about-box-2 {
    width: 50%;
    margin: 20px;
    padding: 20px;
    background-color: white;
    border-radius: 15px;
    font-family: Arial, Helvetica, sans-serif;
}

.about-box-2-picture{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.about-box-2-title, .box-2-text {
    margin: 10px;
    padding: 10px;
    font-size: 100%;
    text-align: justify;
    background-color: white;
}

.about-box-2-title p {
    color: rgb(10, 41, 66);
    font-size: 130%;
    text-align: center;
}

.about-box-2-text p {
    color: rgb(49, 31, 31);
    font-size: 100%;
    text-align: left;
}

/*============================   COMITE LECTURE   ======================*/
.comite-lecture-box-1{
    margin-bottom: 10px;
    margin-top: 10px;
    margin-left: 10%;
    margin-right: 10%;
    padding: 20px;
    color: black;
    background-color: white;
    font-size: 110%;
    text-align: left;
    border-radius: 15px;
    font-family: Arial, Helvetica, sans-serif;
}
.comite-lecture-box-2{
    margin-bottom: 50px;
    margin-top: 20px;
    margin-left: 1%;
    margin-right: 1%;
    padding: 20px;
    color: black;
    background-color: white;
    font-size: 90%;
    text-align: left;
    border-radius: 15px;
    font-family: Arial, Helvetica, sans-serif;
}
.comite-lecture-box-2 h2{
    text-align: center;
}
.comite-lecture-box-2 table{
    border: solid 2px var(--maincolor1);
}
.comite-lecture-box-2 table th{
    width: 25%;
    border: solid 2px var(--maincolor1);
    padding: 5px;
    background-color: var(--maincolor5);
}
.comite-lecture-box-2 table td{
    border: solid 1px var(--maincolor1);
    padding: 5px;
}