.artselect {
            background-color: inherit;
            height: auto;
            width: 98%;
            padding: 0;
            margin: 5px;
           }


.pages {
text-align: center;
font-size : 1.1em;
color: #8B4513;
padding: 5px;
border-radius: 5px;
width: 30px;
height: 25px;
text-decoration: none;
background-color: #F1F1F1;
margin: 0 auto;
float: right;
margin-right: 5px;
font-weight: bold;}
#pageactive {color: black;}

   
 .contain {
 clear: both;
 height: auto;
 display: block;
 clear: both;
   }

.ablack {
 text-decoration: none;
 color: black;
 }
 .aorange{
 text-decoration: none;
 color: orange;
 font-size: 1em;
 }
.ateal {
 text-decoration: none;
 color: #004D40;
 font-size: 1em
}
.chip { 
display: inline-block; 
padding: 0 25px; 
height: 200px; 
font-size: 200px; 
line-height: 200px; 
border: 2px solid #CCCCCC;
border-radius: 50%; 
background-color: #37474F;
text-align: center;
} 
.chip-img { 
float: center; 
margin: 0 10px 0 -25px; 
height: 200px; 
width: 200px; 
border-radius: 50%; 
}
.divcenter {
width: 80%;
height:auto;
margin-left: 9%;
margin-right: 9%;
border: 1px solid #CCCCCC;
border-radius: 10px;
background-color: #FFFFFF;
padding: 2%;
}
.imgblog {height: 170px; width: 100%;}
.divteal {
width: auto;
height:auto;
margin-left: 5%;
margin-right: 5%;
border: 1px solid #004D40;
color: #004D40;
border-radius: 10px;
background-color: #FFFFFF;
padding: 2%;
text-align: center;
}
.minidivblack {
width: auto;
height:auto;
margin-left: 5%;
margin-right: 5%;
color: #FFFFFF;
border-radius: 5px;
background-color: #757575;
padding: 2%;
text-align: center;
position: relative; 
max-width: 13em;
font-size: 1em;
float: left;
margin: 0 auto;
margin-left: 1%;
margin-top: 1%;
}
.divblack {
width: auto;
height:auto;
margin-left: 5%;
margin-right: 5%;
border: 1px solid black;
color: black;
border-radius: 10px;
background-color: #FFFFFF;
padding: 2%;
text-align: center;
}
.divcontain1 {
width: auto;
max-width: 35em;
height:20em;
margin:0 auto;
border: 1px solid #616161;
color: black;
border-radius: 10px;
background-color: #FAFAFA;
padding: 2%;
text-align: left;
float: center;
}
.divcontain2 {
width: auto;
height:12em;
margin-left: 5%;
margin-right: 5%;
border: 1px solid #F5F5F5;
color: black;
border-radius: 10px;
background-color: #F5F5F5;
padding: 2%;
text-align: center;
}
.note {
font-size:1em;
background-color: #FFF3E0;
border-left: 3px solid orange;
border-right: 3px solid orange;
padding: 10px;
width: auto;
height: auto;
text-align:left;
}
.citer {
font-size:1em;
background-color: #F1F1F1;
border-left: 4px solid #CCCCCC;
padding: 10px;
width: auto;
height: auto;
text-align:left;
margin: 10px;
}

.firstaffiche {
font-size: 1.1em;
background-color: indigo;
color : white;
padding: 30px;
width: auto;
height: 400px;
text-align: center;
}
.postheader {
margin: 0 auto;
padding: 2%;
width : 45%;
text-align: left;
float: left;
}
.imgexpo {width: 100px; height: 100px; margin: 0 auto;}
.idexpo {font-size:0.8em; color: #8B0000; margin-top: 1px; margin-bottom: -5px; text-align: left;}
.divexpo {
  text-align: left;
  color: black;
  padding: 5px;
  margin-top: 15px;
  width: auto;
  max-width: 400px;
  height: 100px;
  border: 1px solid #cccccc;
  border-radius: 10px;
  line-height : 17px;
  font-size:1em;
  font-weight: bold;
  background-color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  #exo {padding-left:0; height: 120px;}
  .ethiquette {font-size: 0.7em; margin:0; font-weight:none;}
  .divimgexpo {
  text-align: left;
  margin-right: 60px;
  color: #BDBDBD;
  width: 50px;
  height:108px;
  border: none;
  float: left;}
  .latcolor1 {
  margin-right: 10px;
  background-color: #8B004F;
  width: 3px;
  height: 120px;
  border: none;
  float: left;}
  .latcolor2 {
  margin-right: 10px;
  background-color: #8b4513;
  width: 3px;
  height:120px;
  border: none;
  float: left;}
  .latcolor3 {
  margin-right: 10px;
  background-color: #083AB6;
  width: 3px;
  height:120px;
  border: none;
  float: left;}
  .divimgexpo {
  text-align: left;
  margin-right: 60px;
  color: #BDBDBD;
  width: 50px;
  height:108px;
  border: none;
  float: left;}
  .imgintro {width: 100%; height: auto; max-height: 300px; margin: 0 auto; margin-top: 5px;}
  .divintro {
  text-align: left;
  margin: 0 auto;
  width: 100%;
  height: auto;
  max-height: 300px;
  color : #424242;
  float: center;
  }
  .titrexpo {
  text-align: left;
  margin-left: 10px;
  margin: 0 auto;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 1.2em;
  }
.menuexpo {
text-align: left;
color: #424242;
background-color: #FFFFFF;
width: auto;
max-width: 500px;
height: auto;
border: 1px solid #BDBDBD;
border-radius: 10px;
font-size: 1em;
float: center;
margin: 0 auto;
padding: 5px 5px;
margin-top: 10px;
}



.divblog {
   text-align: left;
   padding: 0;
   margin : 0 auto;
   margin-bottom: 30px;
   width: auto;
   height: 260px;
   border-bottom: 0px solid #cccccc;
   font-size:0.7em;
   float: center;
   display: block;
   clear: both;
   }
  .divimgblog {
    width: 100%;              /* L'image prend toute la largeur du conteneur */
    height: auto;             /* La hauteur s'ajuste automatiquement pour respecter le ratio */
    max-height: 250px;        /* Limiter la hauteur maximale de l'image */
    margin: 0 auto;           /* Centrer horizontalement */
    background-color: white;  /* Couleur de fond pour la div */
    overflow: hidden;         /* Masquer l'excédent de l'image si nécessaire */
}

.imgblog {
    width: 100%;              /* L'image prend toute la largeur du conteneur */
    height: 100%;             /* L'image prend toute la hauteur disponible (par rapport à l'élément parent) */
    object-fit: cover;        /* L'image remplira l'espace sans déformation */
    border-radius: 10px;      /* Arrondir les coins de l'image */
}

   .imgblogeur {width: 25px; height: 25px; margin-right: 5px; margin-top: 3px; border: 2px solid #8b004f; border-radius: 50%;}
   .blogeur {float: left; color: #0E0414; font-weight: bold;}
   .vues {margin-left: 10%; font-weight: bold;}
   .date {margin-left: 13%; text-align: right; font-weight: bold;}
   .hrp2 {width: 50px; height: 3px; background-color: #8b004f; border-radius: 50px;}
   .hrp3 {width: 150px; height: 2px; background-color: #4C0F2A; border-radius: 50px; margin: 0 auto; float:center;}
   
   .highlight {
      color: #7c0b6d;
      font-weight: bold;
      }
   
  
   .divori {
   text-align: left;
   color: black;
   padding: 15px;
   margin : 0 auto;
   margin-bottom: 15px;
   width: auto;
   max-width: 350px;
   height: 100px;
   background-color: white;
   border-radius: 15px;
   font-size:0.9em;
   float:center;
   line-height: 20px;
   }
   .divimgori {
   text-align: left;
   margin-right:0px;
   color: #BDBDBD;
   width: 80px;
   height:100px;
   float: left;
   margin-right: 20px;
   }
   .imgori {width: auto; max-height: 100px; margin: 0 auto;}
   
   .boutonori {
   float: right;
   margin: 0 auto;
   width: 80px;
   height: 22px;
   border-radius: 15px; 
   font-size: 0.9em; 
   background: linear-gradient(#8E2C6F, #5C1948);
   padding: 5px;
   text-align: center;
   color: white;
   }
   
   .divori1 {
   text-align: left;
   color: black;
   padding: 10px;
   margin : 0 auto;
   margin-bottom: 15px;
   width: auto;
   height: 110px;
   background-color: white;
   border-radius: 15px;
   font-size: 1em;
   float:center;
   line-height: 19px;
   font-weight: bold;
   overflow: hidden;
   clear: both;
   }
   .divimgori1 {
   text-align: left;
   margin-right:0px;
   color: #BDBDBD;
   width: 100px;
   height:110px;
   float: left;
   margin-right: 20px;
   }
   .imgori1 {width: 100px; max-height: 100px; margin: 0 auto; border-radius: 7px;}
   
.sociaux {
  width: 120px;
  height: auto;
  margin: 0 auto;
  padding: 4px;
  float: center;
  text-align: center;
  background-color: #FCF5F2;
  border-radius: 25px;
  }
 
  
  .partager {
  width: 115px;
  height: 25px;
  margin: 0 auto;
  padding : 0;
  float: center;
  text-align: center;
  font-size: 0.8em;
  clear: both;
  color: #062A2F;
  background-color: #F5F5F5;
  border-radius: 15px;
  }
  
  .partager2 {
  width: 180px;
  height: 25px;
  margin: 0 auto;
  padding : 0;
  float: center;
  text-align: left;
  font-size: 0.8em;
  font-weight: bold;
  line-height: 15px;
  clear: both;
  color: #062A2F;
  background-color: #F5F5F5;
  border-left: 5px solid #F6F6F6;
  border-radius: 15px;
  }
  
  
  .socialt {margin: 0 auto; float:left; padding: 4px; padding-right:0;}
  .socialp {margin: 0 auto; float: center; width: auto; height: 17px; padding: 4px;}
  
  
  .suivre {
  width: 170px;
  height: 25px;
  margin: 0 auto;
  padding : 0;
  float: right;
  text-align: left;
  font-size: 0.8em;
  line-height: 15px;
  clear: both;
  color: #062A2F;
  background-color: none;
  }





.fleched {margin-left: 2px; height: 10px; width: 10px;}


#akhabach{ color:#CCCCCC;}
.trait { border-top: 1px solid #CCCCCC; margin-top: 5px;}
.contact {float: right; margin-right: 20px; margin-top: -23px; width: 30px; height: 30px;}

.sociale { margin: 0 auto; padding: 1%; width: 27px; height: 27px;}
.centrec {  text-align: justify; width: 80%; margin-left: 10%; margin-right: 10%;}

table {
 border-collapse: collapse;
 margin : 0 auto;
 width : 100%;
 text-align: left;
 font-size: 13px;
}



#tdleft {
padding: 10px; 
padding-left: 20px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
font-weight: bold;
}

#tdright {padding: 10px; 
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;

}


.td1 {background-color: #E1E9EC;}
.td2 {background-color: white;}

h1 {
 text-align: left;
 line-height: 30px;
 line-height: 30px;
 color: #0C023D;
}
	

h4 {
	 color: #5C1948;
	 text-align: left;
	 font-size: 1.2em;
	 margin-top: 40px;
	 }
	 
	 .contain {
	 clear: both;
	 height: auto;
	 display: block;
	 clear: both;
	 }
	 
 .pre {
   text-align: justify;
   font-size: 13px;
   font-weight: bold;
   color: #254348;
   padding : 1em;
   width: 80%;
   max-width: 480px;
   height: 250px;
   
   }
   
   .imgcorps{
   width: auto;
   max-width: 330px;
   height: auto;
   max-height: 300px;
   border-radius: 3px;
   border-left: 3px solid #611A42;
   }
   
   .contenu400 {width: auto; max-width: 380px; float: left;}
   .iconintro {width: 15px; height: 15px; margin: 0 auto; margin-right: 5px; margin-bottom: -3px;}
   .divintro {
   text-align: left;
   color: black;
   background: linear-gradient(#C1DDD2, #C2ECCF);
   padding: 25px;
   margin : 0 auto;
   margin-bottom: 10px;
   width: auto;
   max-width: 94%;
   height: 90px;
   border-radius: 15px;
   font-size:0.9em;
   float:center;
   line-height: 20px;
   font-weight: bold;
   
   }
  
   
   .divintro2 {
   text-align: left;
   color: black;
   padding: 15px;
   margin : 0 auto;
   width: 49%;
   height: 110px;
   background: linear-gradient(#C1DDD2, #EAC9C8 );
   border-radius: 15px;
   font-size:0.9em;
   float:left;
   line-height: 20px;
   font-weight: bold;
   }
   
   
   .divintro3 {
   text-align: left;
   color: black;
   padding: 15px;
   margin : 0 auto;
   margin-left: 10px;
   width: 30%;
   height: 110px;
   background-color: #C2ECCF;
   border-radius: 15px;
   font-size:0.9em;
   float:left;
   line-height: 20px;
   font-weight: bold;
   }
   .blogpub {
	 width: 250px;
	 height: 300px;
	 margin:0 auto;
	 margin-left: 15px;
	 margin-bottom: 15px;
	 float: right;
	
	 }
   .divblog {
   text-align: left;
   padding: 0;
   margin : 0 auto;
   margin-bottom: 30px;
   width: auto;
   max-width: 500px;
   height: 260px;
   border-bottom: 0px solid #cccccc;
   font-size:0.7em;
   float: center;
   display: block;
   clear: both;
   }
   .divimgblog {
   width: 100%;
   height:auto;
   margin: 0 auto;
   margin-bottom: 5px;
   float: center;
   background-color: white;
   border: 0px solid #cccccc;
   }
   .imgblog {width: 100%; height: auto; max-height: 250px;border-radius: 10px;}
   .imgblogeur {width: 25px; height: 25px; border-radius: 50%; margin-right: 5px; margin-top: 3px;}
   .blogeur {float: left; color: #0E0414;}
   .date {float: right;}
   .hrp1 {width: 60px; height: 3px; background: radial-gradient(#7F0988, #7F0988); border-radius: 50px; margin-top: 15px; margin-bottom: 15px; clear: both;}
   .hrp2 {width: 50px; height: 3px; background-color: #0b4513; border-radius: 50px;}
   .hrp3 {width: 150px; height: 2px; background: radial-gradient(#3600FF, #EA3E28); border-radius: 50px; margin: 0 auto; margin-top: 20px; margin-bottom: 20px; float:center; clear: both;}
   
   
   
   
   
   .divori {
   text-align: left;
   color: black;
   padding: 15px;
   margin : 0 auto;
   margin-bottom: 15px;
   width: auto;
   max-width: 350px;
   height: 100px;
   background-color: white;
   border-radius: 15px;
   font-size:0.9em;
   float:center;
   line-height: 20px;
   }
   .divimgori {
   text-align: left;
   margin-right:0px;
   color: #BDBDBD;
   width: 80px;
   height:100px;
   float: left;
   margin-right: 20px;
   }
   .imgori {width: auto; max-height: 100px; margin: 0 auto;}
   
   .boutonori {
   float: right;
   margin: 0 auto;
   width: 80px;
   height: 22px;
   border-radius: 15px; 
   font-size: 0.9em; 
   background: linear-gradient(#8E2C6F, #5C1948);
   padding: 5px;
   text-align: center;
   color: white;
   }
   
   .divori1 {
   text-align: left;
   color: black;
   padding: 10px;
   margin : 0 auto;
   margin-bottom: 15px;
   width: auto;
   max-width: 350px;
   height: 110px;
   background-color: white;
   border-radius: 15px;
   font-size:0.9em;
   float:center;
   line-height: 18px;
   font-weight: bold;
   overflow: hidden;
   }
   .divimgori1 {
   text-align: left;
   margin-right:0px;
   color: #BDBDBD;
   width: 100px;
   height:110px;
   float: left;
   margin-right: 20px;
   }
   .imgori1 {width: 100px; max-height: 100px; margin: 0 auto; border-radius: 7px;}
   
  
   
   
   
  .imgexpoo {width: 160px; max-height: 160px; margin: 0 auto; border-radius:5px;}
  
  .icon {width: 15px; height: 15px; margin: 0 auto; margin-right: 5px; margin-bottom: -3px;}
  .divexpoo {
  text-align: left;
  color: white;
  padding: 20px;
  margin : 0 auto;
  margin-bottom: 10px;
  width: auto;
  max-width: 380px;
  height: 160px;
  background: linear-gradient(#2A4554, #56194A);
  border-radius: 20px;
  border: 0px solid #EDE7E7;
  font-size:0.7em;
  font-weight: bold;
  float:center;
  line-height: 23px;
  }
  .divimgexpoo {
  text-align: center;
  color: #BDBDBD;
  width: 160px;
  height:160px;
  float: left;
  margin-right: 10px;
  
  }
  
  
  .imgexpoo2 {width: auto; height: 120px; margin: 0 auto;}
  .icon2 {width: 12px; height: 12px; margin-left: 0; margin-right: 5px; margin-bottom: -3px;}
  .divexpoo2 {
  text-align: left;
  color: black;
  padding: 5px;
  padding-left: 0;
  margin : 0 auto;
  margin-bottom: 15px;
  width: auto;
  max-width: 350px;
  height: 120px;
  background-color: white;
  font-size: 12px;
  font-weight: bold;
  float: center;
  border: 1px solid #CCCCCC;
  border-radius: 15px;
  }
  
  .divimgexpoo2 {
  text-align: left;
  margin-right:5px;
  margin-left:5px;
  color: #BDBDBD;
  width: 100px;
  height: 120px;
  float: left;}
  .pexpoo2 {
  color: #1C234C;
  margin-left: 2px;
  margin-top: 10px;
  margin: 0 auto;
  width : 110px;
  height: 80px;
  padding: 0;
  border: none;
  float: left;
  font-size: 9px;
  font-weight: bold;
  }
  
  
  .divexpoo3 {
  text-align: left;
  color: black;
  padding: 5px;
  padding-bottom: 15px;
  margin : 0 auto;
  margin-bottom: 10px;
  width: auto;
  max-width: 360px;
  height: 100px;
  background-color: white;
  font-size:1em;
  font-weight: bold;
  float:center;
  border-bottom: 1px solid #CCCCCC;
  }
  
  .divimgexpoo3 {
  text-align: left;
  color: #BDBDBD;
  width: 100px;
  height: 100px;
  float: left;
  font-size: 16px;
  font-weight: bold;
  margin-right: 20px;
  }
  .imgexpoo3 {width: 100px; height: 100px; margin: 0 auto; border-radius:15px;}
  
  .divspub {
  padding: 0;
  margin : 0 auto;
  margin-bottom: 15px;
  width: auto;
  max-width: 350px;
  height: 325px;
  }
  .divspub2 {
  padding: 0;
  margin : 0 auto;
  margin-bottom: 15px;
  width: auto;
  max-width: 100px;
  height: 100px
  background-color: black;
  }
  
  
  .divspec {
  text-align: center;
  color: black;
  padding: 1px;
  margin : 0 auto;
  margin-bottom: 15px;
  width: auto;
  height: 325px;
  background-color: #F3EEEE;
  font-size:1.1em;
  font-weight: bold;
  float:center;
  border-bottom: 1px solid #D5CECE;
  border-bottom-left-radius : 15px;
  border-bottom-right-radius : 15px;
  }
  .imgspec {
   width: 100%;
   height: auto;
   max-height: 250px;
   margin: 0 auto;
   margin-bottom: 2px;
   text-align: center;
  }
  .pspec {
  margin: 0 auto;
  margin-left: 5%;
  width: auto;
  max-width : 45%;
  height: 80px;
  padding: 5px;
  float: left;
  font-size: 10px;
  font-weight: bold;
  text-align: left;
  }
  
  
  
  .divart2 {
  margin: 0 auto;
  margin-left: 7px;
  margin-right: 7px;
  margin-bottom: 14px;
  width: auto;
  max-width: 45%;
  height: 250px;
  max-height: 250px;
  float: left;
  background-color: #E8EBF2;
  border-radius: 15px;
  border: 0px solid #CCCCCC;
  text-align: center;
  color: black;
  text-align: left;
  font-size: 1em;
  }
  .imgart2 {
  width: 97.4%;
  height: 100px;
  padding: 2px;
  float:center;
  border-radius: 15px;
  }
  .part2 {
  width: auto;
  height : auto;
  padding: 10px;
  padding-top:0;
  float: center;
  font-size: 13px ;
  text-align: left;
  line-height: 16px;
  }
  
  .divart {
  width: auto;
  min-width: 330px;
  max-width: 350px;
  text-align: left;
  color: black;
  padding: 5px;
  margin : 0 auto;
  margin-top: 7px;
  margin-bottom: 7px;
  height: 120px;
  background-color: #E8EBF2;
  float:left;
  border-radius: 15px;
  border: 0px solid #CCCCCC;
  clear: both;
  }
  .imgart {
  width: 120px;
  height: 100%;
  max-height: 400px;
  margin: 0 auto;
  margin-bottom: 2px;
  float: right;
  border-radius: 13px;
  }
  .part {
  width: 200px;
  height : 120px;
  padding: 5px;
  float: left;
  font-size: 13px ;
  text-align: left;
  line-height: 17px;
  }
  
 
  
  .divmark {
  text-align: center;
  color: black;
  padding: 10px;
  margin : 0 auto;
  width: 100px;
  height: 80px;
  background-color: #EEF0F6;
  border-radius: 12px;
  float: left ;
  margin-bottom: 5%;
  margin-left: 5%;
  }
  
  .imgmark {
  width: auto;
  height:70px;
  float:center;
  }
  
  .divmarkk {
  text-align: center;
  color: black;
  padding: 10px;
  margin : 0 auto;
  width: 100px;
  height: auto;
  max-height: 100px;
  background-color: #EEF0F6;
  border-radius: 15px;
  float: left ;
  margin-bottom: 5%;
  margin-left: 5%;
  }
  
 .imgmarkk {
   width: auto;
   height:90px;
   float:center;
  }
  

  .milieu {
  width: auto;
  max-width: 500px;
  float: center;
  margin: 0 auto;
  height: auto;
  background-color: ;
  }

.profil { width: 200px; height: 200px; float: center;}

.fleched {margin-left: 2px; height: 10px; width: 10px;}



  .sociaux {
  width: 120px;
  height: 30px;
  margin: 0 auto;
  padding: 4px;
  float: center;
  text-align: center;
  background-color: #FCF5F2;
  border-radius: 25px;
  }
  
  .partager {
  width: 135px;
  height: 25px;
  margin: 0 auto;
  padding : 0;
  float: center;
  text-align: left;
  font-size: 0.8em;
  font-weight: bold;
  line-height: 15px;
  clear: both;
  color: #062A2F;
  background-color: #F5F5F5;
  border-left: 5px solid #F6F6F6;
  border-radius: 15px;
  }
  .socialt {margin: 0 auto; float:left; padding: 4px; padding-right:0;}
  .socialp {margin: 0 auto; float:right; width: auto; height: 17px; padding: 4px;}
  
  .suivre {
  width: 170px;
  height: 25px;
  margin: 0 auto;
  padding : 0;
  float: right;
  text-align: left;
  font-size: 0.8em;
  line-height: 15px;
  clear: both;
  color: #062A2F;
  background-color: none;
  }

.pages {
text-align: center;
font-size : 1.1em;
color: #8B4513;
padding: 5px;
border-radius: 5px;
width: 30px;
height: 25px;
text-decoration: none;
background-color: #F1F1F1;
margin: 0 auto;
float: right;
margin-right: 5px;
font-weight: bold;}
#pageactive {color: black;}

.ablack {
 text-decoration: none;
 color: black;
 }
 .aorange{
 text-decoration: none;
 color: orange;
 font-size: 1em;
 }
.ateal {
 text-decoration: none;
 color: #004D40;
 font-size: 1em
}
.chip { 
display: inline-block; 
padding: 0 25px; 
height: 200px; 
font-size: 200px; 
line-height: 200px; 
border: 2px solid #CCCCCC;
border-radius: 50%; 
background-color: #37474F;
text-align: center;
} 
.chip-img { 
float: center; 
margin: 0 10px 0 -25px; 
height: 200px; 
width: 200px; 
border-radius: 50%; 
}
.divcenter {
width: 80%;
height:auto;
margin-left: 9%;
margin-right: 9%;
border: 1px solid #CCCCCC;
border-radius: 10px;
background-color: #FFFFFF;
padding: 2%;
}
.divteal {
width: auto;
height:auto;
margin-left: 5%;
margin-right: 5%;
border: 1px solid #004D40;
color: #004D40;
border-radius: 10px;
background-color: #FFFFFF;
padding: 2%;
text-align: center;
}
.minidivblack {
width: auto;
height:auto;
margin-left: 5%;
margin-right: 5%;
color: #FFFFFF;
border-radius: 5px;
background-color: #757575;
padding: 2%;
text-align: center;
position: relative; 
max-width: 13em;
font-size: 1em;
float: left;
margin: 0 auto;
margin-left: 1%;
margin-top: 1%;
}
.divblack {
width: auto;
height:auto;
margin-left: 5%;
margin-right: 5%;
border: 1px solid black;
color: black;
border-radius: 10px;
background-color: #FFFFFF;
padding: 2%;
text-align: center;
}
.divcontain1 {
width: auto;
max-width: 35em;
height:20em;
margin:0 auto;
border: 1px solid #616161;
color: black;
border-radius: 10px;
background-color: #FAFAFA;
padding: 2%;
text-align: left;
float: center;
}
.divcontain2 {
width: auto;
height:12em;
margin-left: 5%;
margin-right: 5%;
border: 1px solid #F5F5F5;
color: black;
border-radius: 10px;
background-color: #F5F5F5;
padding: 2%;
text-align: center;
}
.note {
font-size:1em;
background-color: #FFF3E0;
border-left: 3px solid orange;
border-right: 3px solid orange;
padding: 10px;
width: auto;
height: auto;
text-align:left;
}
.citer {
font-size:1em;
background-color: #F1F1F1;
border-left: 4px solid #CCCCCC;
padding: 10px;
width: auto;
height: auto;
text-align:left;
margin: 10px;
}

#akhabach{ color:#CCCCCC;}
.trait { border-top: 1px solid #CCCCCC; margin-top: 5px;}
.contact {float: right; margin-right: 20px; margin-top: -23px; width: 30px; height: 30px;}
.social-container {
  display: flex;
  gap: 25px;
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin-top: 20px;
}
.social {
  width: auto;
  height: 25px;
}
.sociale { margin: 0 auto; padding: 1%; width: 27px; height: 27px}
.centrec {  text-align: justify; width: 80%; margin-left: 10%; margin-right: 10%;}
.prefooter {
background-color: #12071E;
color : white;
width: auto;
margin: 0;
clear: both;
}

.footer {
font-size: 0.8em;
color: black;
padding: 2%;
margin : 0 auto;
width: auto;
height: auto;
text-align: center;
clear: both;
}


@media screen and (max-width: 500px) {
#divgrand {display: none;}
.centrec {  text-align: justify; width: 95%; margin-left: 2%; margin-right: 2%;}
.divcenter {
width: 84%;
margin-left: 7%;
margin-right: 7%;
}


.divori1 {font-size:1.1em;}

.prefooter {
font-size:1em;
padding: 2%;
width: auto;
height: 32em;
margin: 0;
clear: both;
}
.prefootere {
margin: 0 auto;
padding-top: 5%;
padding-left: 2%;
width : 48%;
text-align: left;
float: left;
}






@media screen and (min-width: 501px) and (max-width: 800px) {
#divpetit {display: none;}
.divexpo {
  text-align: left;
  margin-left: 10px;
  margin-top: 10px;
  width: 45%;
  height: 100px;
  border-radius: 5px;
  border: 1px solid #BDBDBD;
  float: left;
  background-color: white;
  font-size: 0.8em;
  line-height: 20px;
  }
  .divexpub {
  margin-top: 20px;
  margin-left: 10px;
  margin: 0 auto;
  width: 45%;
  height: 100px;
  float:left;
   }
#divmouchotin {
margin-top: 280px;}
.prefooter {
height: 44em; 
font-size: 1em;
padding: 2%;
width: auto;
height: 18em;
clear: both;
}
.prefootere {
margin: 0 auto;
padding: 1%;
width : 30%;
text-align: left;
float: left;
}

.divexpoo2 {
  text-align: left;
  color: black;
  margin-bottom: 14px;
  margin-left: 7px;
  margin-right: 7px;
  width: 314px;
  height: 120px;
  font-size: 12px;
  font-weight: bold;
  float: left;
  }
.pexpoo2 { font-size: 9px; width : 100px; height: 80px; }

.divart2 {max-width: 22%;}
.divart {width: 47% ; margin-right: 7px; margin-left: 7px;}
.divintro { width: 36%; height: 110px; float:left; margin-right: 10px; padding: 15px;}
.divintro2 { width: 27%;}
.divintro3 { width: 21%;}
.divori { max-width: 300px; height: 100px; float: left; margin: 0 auto; margin-left: 7px; margin-right: 7px; margin-bottom: 14px;}
.divori1 { max-width: 300px; height: 110px; float: left; margin: 0 auto; margin-left: 7px; margin-right: 7px; margin-bottom: 14px;}

.divspec {
  text-align: center;
  color: black;
  padding: 0;
  margin : 0 auto;
  margin-bottom: 15px;
  width: 45%;
  height: 310px;
  float:left;
 }
 
 .divspub {
 padding: 0;
 margin : 0 auto;
 margin-left: 15px;
 margin-bottom: 15px;
 width: 45%;
 height: 310px;
 float:left;
 }

.divblog {
   text-align: left;
   padding: 0;
   margin-right: 20px;
   margin-bottom: 30px;
   width: 100%;
   height: 300px;
   border-bottom: 0px solid #cccccc;
   font-size:0.7em;
   float: left;
   }
   .divimgblog {
   width: 100%;
   height:250;
   margin: 0 auto;
   margin-bottom: 5px;
   float: left;
   background-color: white;
   border: 0px solid #cccccc;
   }
   .imgblog {width: 100%; height: 250px; border-radius: 10px;}
   

}
@media screen and (min-width: 801px) {
#divpetit {display: none;}
.divexpo {
  text-align: left;
  margin-left: 15px;
  margin-top: 15px;
  width: 45%;
  height: 100px;
  border-radius: 5px;
  border: 1px solid #BDBDBD;
  float: left;
  background-color: white;
  font-size: 0.8em;
  line-height: 20px;
  }
  .divexpub {
  margin-top: 20px;
  margin-left: 10px;
  margin: 0 auto;
  width: 45%;
  height: 100px;
  float:left;
  }
#divmouchotin {
margin-top: 300px;}
.proposition {
border: 1px solid #4E342E;
border-radius: 10px;
background-color: #FFFFFF;
color: #0F0500;
font-size: 1em;
width : auto;
max-width: 22em;
height: auto;
min-height: 1.5em;
max-height: 3.3em;
margin: 0 auto;
padding: 1%;
text-align: left;
letter-spacing: 1px;
float: center;
line-height: 1em;
}
.prefooter {
height: 44em;
font-size: 1em;
padding: 2%;
width: auto;
height: 18em;
clear: both;
 }
.prefootere {
margin: 0 auto;
padding: 0;
width : 30%;
text-align: left;
float: left;
padding: 1%;
border-radius: 25px;
}



.divart2 {max-width: 20%;}


.divmark {
  text-align: center;
  color: black;
  padding: 10px;
  margin : 0 auto;
  width: 100px;
  height: 80px;
  background-color: #EEF0F6;
  border-radius: 15px;
  float: left ;
  margin-bottom: 20px;
  margin-left: 20px;
  }
  
  .imgmark {
  width: auto;
  height:70px;
  float:center;
  }
  
  .divmarkk {
  text-align: center;
  color: black;
  padding: 10px;
  margin : 0 auto;
  width: 100px;
  height: auto;
  max-height: 100px;
  background-color: #EEF0F6;
  border-radius: 15px;
  float: left ;
  margin-bottom: 20px;
  margin-left: 20px;
  }
  
 .imgmarkk {
   width: auto;
   height:90px;
   float:center;
  }


.divexpoo2 {
  text-align: left;
  color: black;
  padding: 5px;
  margin : 0 auto;
  margin-bottom: 14px;
  margin-left: 7px;
  margin-right: 7px;
  width: 320px;
  height: 120px;
  font-size: 0.9em;
  font-weight: bold;
  float: left;
  }

.pexpoo2 {
  color: #1C234C;
  margin-left: 2px;
  margin-top: 10px;
  margin: 0 auto;
  width : 100px;
  height: 80px;
  padding: 0;
  border: none;
  float: left;
  font-size: 9px;
  font-weight: bold;
  }


.divintro { width: 35%; height: 100px; float:left; margin-right: 10px; padding: 15px;}
.divintro2 { width: 25%; height: 100px;}
.divintro3 { width: 20%; height: 100px;}
.divart {width: 46%; margin-right: 7px; margin-left: 7px;}


.divspec {
  text-align: center;
  color: black;
  padding: 0;
  margin : 0 auto;
  margin-bottom: 15px;
  width: 46%;
  height: 330px;
  float:left;
 }
 
 .divspub {
 padding: 0;
 margin : 0 auto;
 margin-left: 15px;
 margin-bottom: 15px;
 width: 46%;
 height: 330px;
 float:left;}
 
 .divspub2 {
 width: 20%;
 height: px;
 float:left;
 }

.divori { max-width: 300px; height: 110px; float: left; margin: 0 auto; margin-left: 7px; margin-right: 7px; margin-bottom: 14px;}
.divori1 { max-width: 300px; height: 110px; float: left; margin: 0 auto; margin-left: 7px; margin-right: 7px; margin-bottom: 14px;}

.divblog {
   text-align: left;
   padding: 0;
   margin-right: 0;
   margin-bottom: 30px;
   width: 100%;
   height: 300px;
   border-bottom: 0px solid #cccccc;
   font-size:0.7em;
   float: left;
   }
   .divimgblog {
   width: 100%;
   height:250px;
   margin: 0 auto;
   margin-bottom: 5px;
   float: left;
   background-color: white;
   border: 0px solid #cccccc;
   }
   .imgblog {width: 100%; height: 250px; border-radius: 10px;}
   


}