html,body{
  margin:0px;
  padding:0px;
  width:100%;
  background-color:black;
  /*scrollbar-color:grey black;*/
 }

 a[class="texte"]{color:red;}
 a[class="calli"]{text-decoration: none; margin:10px; color:#DDD; font-family : Aguafina Script, cursive;}
 a[class="retour"]{color:#333;text-decoration: none;font-weight:bold;}
 a[class="admin"]{color:black; font-weight:bold;text-decoration:none;}
 p{color:#DDD; margin:10px;font-size:18px;font-family : Aguafina Script, cursive;}


 h1,h2{text-align:center;color:#DDD;font-weight:bold; }
 h3{font-size : 18px;}
 h3[id = "inverse"]{font-size : 14px;}
 
 h1[class=baratin]{font-size:40px;font-family : Arizonia, cursive; font-weight : bold;font-style:italic;   line-height : 40px;}
 h2[class="baratin"]{font-size:30px; font-style:italic; }
 


 h1::first-letter{text-transform:uppercase;}
 h2::first-letter{text-transform:uppercase;}
 p::first-letter{text-transform:uppercase;}
  

 
 .titreh2{
  /*margin-left : 15px;
  margin-right : 15px;
  margin-bottom : 30px;
  font-size : 18px;
  line-height: 16px;flexibiliser*/
 }
 
 .h1{
  font-size : 34px;
  font-weight:bold;
  width : auto;
 }
 
 .h2{
   font-size : 28px;
 }
 
 .black{
   display : inline-block;
   color:black;
 }
 
 .white{
   color:white;
 }

 .bidouille{
  display : inline-block;
  position : absolute;
 }
 

 
 .gauch{
  text-align : left;
  float:left;
 }
 
 .centr{
  text-align : justify;
 }
 
 .droit{
  text-align : right;
  /*float:right;*/
 }
 
 
 .droite{
  position : absolute;
  display : inline-block;
  clear : left;
  text-align : right;
  bottom : 0px;
  right : 60px;
 }
 
 .fix{
  display : inline-block;
  position : relative;
  clear : left;
  float : left;
  left : 8px;
  top : 4px;
  line-height : 20px;
  text-align : center;
  font-size:18px; 
  z-index : 1000;

 }
 
 .recherche{
  display : inline-block;
  position : relative;
  float : left;
  left : 3%;
  top : -120px;

 }
 
 .calli{
  display : inline-block;
  position : relative;
  text-decoration: none;
  float : left;
  font-family : Aguafina Script, cursive;
  font-size : 18px;
  line-height: 8px;
 }
 
 #onvayarriver{
  display : inline-block;
  position : relative;
  float : left;
  left : -25px;
  top : -8px;
  text-align : left;

 }
 
 
 .controle{
  position : fixed;
  background-color : white;
  top : -10px;
  left : 10px;
  width : 20px;
  height : 20px;
  z-index:1000;
 }
 
 .enhaut{
 position :fixed;
 }
 
 /* dans le header*/
 .en-tete{
   position:fixed; 
  	width : 100%;
   height: 100px;
   margin-top:0px;
   margin-left : 0px;
   z-index:900;
 }
 
  .picto{
    position:fixed;
    text-align: left;
    width:160px;
    right:20px;
    top : 30px;
    z-index:901;
 }

 .picto2{
    width:25px;
    height:20px;
    z-index:901;
 }

 .espoir{
   display:inline;
   position:fixed;
   margin-top: 0px;
   left:0px;
   top : 20px;
   z-index:901;
 }
 
.filigrane{
   display:inline;
   position:fixed;
   margin-top: 0px;
   left:0px;
   top : 90px;
   z-index:901;
 }
 
 .baratin{
   position: relative;
   display:inline;
   margin-top:0px;
   height:auto;
   left:40px;
   color : gold;
   z-index : 902;
 }
 
 .baratin2{
   position: relative;
   display:inline;
   color:gold;
   font-size:40px;
   font-style:italic;
   top : 20px;
   margin-top:10px;
   height:auto;
   left:40px;
   opacity:0.55;
   z-index : 902;
 }

 .menu{
    position: fixed;
    float:left;
    display:inline-block;
    width:78%;
    height: auto;
    top : 95px;
    padding: 2px 2px 2px 2px;
    margin-left:15%;
    margin-right:15%;
    border-radius:10px;
    z-index:999;
 }

 .onglet{
    position:relative;
    display:inline-block;
    float:left;
    width:17.6%;
    height:auto;
    left:4%;
    margin-left : 2.5%;
    border : 2%;
    height:auto;
    background : #283C78;
    color:#59E6E8;
    font-weight:bold;
    border-radius: 10px;
    padding : 1px ;
    margin : 2px;
    text-align:center;
    text-transform: uppercase;
    text-decoration:none;
    opacity: 1.0;
    z-index:1000;
 }



 .drapeau{
    position:relative;
    display: inline-block;
    clear:left;
    float:left;
    width : 40%;
    left : 30%;
    z-index : 800;
 }
 
.cadrage{
    position : relative;
    display: block;
    clear : left;
    z-index : 790;


}

 .titre{
   position:relative;
   display:inline-block;
   clear : both;
   font-weight:bold;
   color: #DDD;
   height:auto;
   text-align : center;
   font-size : 18px;
   z-index:800;
 }
 
  .poeme{
    position: relative;
    display:inline-block;
    clear : left;
    float : left;
    width:50%;
    top : -20px;
    left : 25%;
    color:#DDD;
    height : auto;
    font-weight:bold;
    text-align:left;
    font-style:italic;
    z-index : 800;
 }
 
.signe{
   position:relative;
   display:inline-block;
   clear : left;
   float :right;
   font-weight:bold;
   color: #DDD;
   right : 10%;
   bottom : 10px;
   height:auto;
   font-size : 18px;
   line-height: 20px;
   z-index : 800;
 }

  .oeuvre{
    position : relative;
    display : block;
    clear:left;
    margin : 30px 0px 50px 0px;

 }
 
 .positionne{
  position : absolute;
  display : inline-block; 
  clear : left;
  width : 100%;

 }
 
  .titrepage{
    position:relative;
    display:inline-block;
    width:80%;
    height:auto;
    margin-left:10%;
    margin-right:10%;
    line-height:80px;
    /*border-top:3px solid #DDD;
    border-bottom:3px solid #DDD;*/
    text-align:center;
    color:#DDD;
    /*text-transform:uppercase;*/
    font-weight: bold;
    font-size : 40px;
 }
 
 .saute{


  
 }
 
 .nouvelle{
  display : inline-block;
  background-color:#DDD;
  clear : left;
  height:auto;
  width:80%;
  left : 50px;
  border : 3px solid #999;
  padding:5px 30px 5px 30px;
  margin-left:50px;
  margin-right:auto;
  text-align:left;
  color:black;
 }
 
 .label{
    position : relative;
    display : inline-block;
    clear : left;
    float :left;
    width : 20%;
    left : 40%;
    height: 20px;
    overflow : visible;
    color:#DDD;
    text-align: center;
    margin-bottom : 10px;
    z-index:500;
 }
 
 .toto{
   clear:left;
 }
 
 .remonte{
  height : auto;
  clear : left;
  float : left;
  top : -200px;
 }

 .visu{
    position:relative;
    display: inline-block;
    clear : left;
    float:left;
    top : -40px;
    height : auto;
    transform-origin: center;
    z-index:740;
 }
 
 .ambiance{
  position : relative;
 display:inline-block;
 clear : left;
 width : 40%;
 left : 30%;
 }
 
 .photo{
  clear : left;
  display : inline-block;
  
 }
 
 .complete{
   position : absolute;
   display: inline-block;
   float : left;
   height : auto;
   z-index:880;
   text-align : center;
 }
 
 .taille{
    position : relative;
    display : inline-block;
    clear: left;
    float : left;
    top : -15px;
    height: 20px;
    width : 20%;
    left : 40%;
    margin-top : 30px;
    color:#DDD;
    text-align: center;
    font-style:italic;
    z-index:500;
    overflow-x: visible;

 }
 
 .renverse{
  position : absolute;
  display : inline-block;
  top : 0px;
  border-radius: 5px;
  height : auto;
  width : auto;
  color : white;
  font-weight : bold;
  font-style : italic;
  padding : 0px 2px 0px 2px;
  margin : 3px 10px 3px 10px;
  background-color :#666;
  float:right;
  font-size : 12px;
  border : 2px solid #999;
 }
 
  .prix{
    position : relative;
    display : inline-block;
    width : 40%;
    left : 30%;
    clear:left;
    float : left;
    height: 20px;
    top : -40px;
    /*overflow-x: visible;*//*supprimer les retours à la ligne*/
    margin-top : 30px;
    color:#DDD;
    text-align: center;
    font-style:italic;
    z-index:500;


 }
 
 .misajcont{
  background-color : #333;
  float : left;
  color : #DDD;
  font-size : 12px;
  height : 20px;
 }
 
 .misajposlabel{
  position : absolute;
  display : inline-block; 
  top : 80px;
  height : 20px;
  padding-left : 5px;
  z-index:520;
 }
 
 .misajposcomment{
  position : absolute;
  float : left;
  display : inline-block; 
  overflow-Y : scroll;
  right : 20px;
  bottom : 0px;
  top : 55px;
  padding-left : 5px;
  width : 33%;
  z-index:520;
 }
 
 .misajpostaille{
  position : absolute;
  display : inline-block;
  margin-top : 15px;
  padding-left : 5px;
  z-index:520;
 }
 
 .presmots{
  position : relative;
  display : none;
  clear:both;
  margin-top :30px;
  width : 300px;
  height:200px;
  z-index : 900px;
 }
 
 .bloque{
  display : block;
  position : sticky;
  top : 190px;
  height : auto;
  width : 120%;
  left : 10px;
  z-index : 999;
  }
 
 .encadre{
  position : fixed;
  width : 38%;
  top : -200px;
  bottom : 60px;
  right : 90px;
  border : 1px solid red;
  z-index : 460;
 }
 
 .interroge{
  display : inline-block;
  float : right;
  text-align:right;
  font-size : 10px;
  margin : 0px;
  padding : 0px;
  z-index : 100;
 }
 
 .interrogation{
  clear : left;
 }

 
 .rosace{
  position : fixed;
  display : none;
  width : 40%;
  clear : left;
  float : left;
  left : 10px;
  margin-left:10px;
  padding : 3px;
  z-index : 1000;
  transform : translate(0px, 100px);
 }

 
 .repos{
  display : none;
  position : fixed;
  width : auto;
  left : 80%;
  top : 145px;
  padding : 3px;
  font-family : Aguafina Script cursive;
  font-style : italic;
  font-size : 18px;
  z-index : 890;
 }
 
 .float{
  display : inline-block;
  position : relative;
  clear : left;
  float : left;
  left : 0px;
  color : #AAA;
  font-weight : bolder;
  background-color: #222;
  text-decoration : underline;
  /*transform : translate(-8px,-16px);*/
  font-size:18px; 
     z-index : 100;
 }
 
 .banalise{
  text-decoration: none;
    font-family : Aguafina Script, cursive;
    font-style: italic;
 }
 
 .recale{
  display : inline-block;`
  position : relative;
  clear : left;
  float : left;
  z-index :800;
  
 }
 
 
 .presente{
  display : inline-block;
  position : relative;
  clear:left;
  float :left;
  height:40px;
  width:90%;
  border : 2px;
  z-index : 800;
  text-align:left;
 }
 
 .bouton{
  display : inline-block;
  padding : 2px;
  z-index : 810;
 }
 
 .affiche{
  display : inline-block;
  position : relative;
  float:left;
  width : auto;
  z-index : 800;
 }
 
 .picore{
  position : relative;
  float : left;
  width : auto;
  background-color : yellow;
  font-size : 10px;
  line-height : 12px;
  color : black;
  text-align:center;
  z-index : 800;
  padding :1px;
  margin :3px;

 }

 
 .planque{
  position : absolute;
  left : 5px;
  z-index : 50;
 }
 
 .planqueur{
  display : none;
  position : relative;
  top : 10px;
  left : -5%;
 }

 
  .ligne{
  display : inline-block;
  position : absolute;
  clear:left;
  line-height : 16px;
  left : 140px;
  color : black;
 }
 
 .titreg{
  position : relative;
  display : inline-block;
  width: 50px;
  margin-left: 110px;
  text-align : center;
  font-size: 14px;
  color : black;
  line-height : 16px;
  transform : rotate(-45deg);

 }
 
 .titrec{
  position:relative;
  display : inline-block;
  width:50px;
  text-align:center;    
  font-size : 14px;
  color : black;
  line-height : 16px;
  transform : rotate(-45deg);
  
 }
 
 
 .choixg{
  display : inline-block;
  margin-left : 110px;
  width : 50px;
 text-align : center;
 line-height : 16px;
 }
 
 .choixc{
  display : inline-block;
  position : relative;
  width : 50px;
  text-align : center;
 line-height : 16px;
 }
 
 .valmots{
  position :relative;
  display : none;
 }
 
 .admin{
  font-size:16px;
  font-weight:bold;
  width : auto;
  }
  
 .valide{
  position : relative;
  display :inline-block;
  color: red;
  clear : left;
  float : left;
  width : auto;
  font-size : 10px;
  padding :1px 3px 1px 3px;
  height : auto;
  background-color : yellow;
  text-decoration : none;
  text-align :center;
  border-radius : 7px;
  z-index : 600;
 }
 
 .gauche{
    position: relative;
    float:left;
    width:30%;
    height : 350px;
    background-color:#222;
    color:#DDD;
    margin-left:2.5%;
    margin-top : 20px;
    z-index : 800;
 }
 
 .affichage{
   display : inline-block;
   position : relative;
   clear : left;
   z-index : 700;
   text-align : justify;

 }
 
.inspirations{
    clear:both;
    position:relative;
    padding:10px;
    width:60%;
    display:block;
    margin-left:auto;
    margin-right:auto;
    z-index:500;
}

.texte{
    position:relative;
    display:block;
    margin-left:auto;
    margin-right:auto;
    color: #DDD;
    text-align:center;
 }

.avenir{
   color: #DDD;
   clear : left;
   margin-left : 20px;
   text-align: left;
 }
   
 .retour{
    position : absolute;
    float : right;
    display : inline-block;
    margin-right:50px;
    background-color: #AAA;
    height: auto;
    margin:6px 20px 6px 20px;
    padding: 2px 8px 2px 8px;
    border-radius:10px;
    border : 3px solid #999;
    font-size:16px;
    text-align:center;
    text-decoration : none;

 }
 
  .tourne{
    position : absolute;
    float : right;
    display : inline-block;
    margin-right:50px;
    background-color: #AAA;
    height: auto;
    margin:6px 20px 6px 20px;
    padding: 2px 8px 2px 8px;
    border-radius:10px;
    border : 3px solid #999;
    font-size:16px;
    text-align:center;
    text-decoration : none;
 }
  
 .avatar{
    position : relative;
    display: inline-block;
    margin-left: 200px;
    width:200px;
 }
 
 
 .zut{
  position : relative;
  display : inline-block;

  width : 230px;
  clear : left;
  float:left;
 }
 
 .zutzut{
  position : relative;
  display : inline-block;
  float : left;
 }
 
 .yellow{
  background-color: yellow;
 }
 
 .explore{
  position : relative;
  display : none;
  background-color: white;
  width : auto;
  height : 100px;
  top : -60px;
  line-height : 10px;
  font-size : 12px;
  overflow-y: scroll;
 }
 
 .explorer{
  position : absolute;
  display : none;
  width : 50%;
  height : 100px;
  left : 40%;
  font-size: 10px;
  line-height : 10px;
  clear :left;
  float:left;
  overflow-y: scroll;
 }
 
 .aparait{
  display : none;
  position : absolute;
  clear : left;
  top : -150px;
  width : auto;
  background-color : yellow;

 }
 
 .preuve{
  display :none;
  width : 80%;
  color : black;
 }
 
 .formtexte{
  position : relative;
  display : inline-block;
  text-align: left;
  width : 60%;
 }
 
 .discret{
  position : relative;
  display : none;
  clear:left;
  float : left;
  width : 90%;
 }
 
 .rentrer{
   display : inline-block;
 }
 
 .enclin{
  display : inline-block;
  position : relative;
  float :left;
  left : 400px;
 }
 
 .presart{
  display : inline-block;
  position : relative;
  float : left;`

 }
 
 .pres0{
  clear:left;
  width : 30%;
  text-align : left;
  height : auto;
  overflow : hidden;
 }
 
 .pres1{
  width : 38%;
  top :15px;
  text-align : left;
  height : 18px;
  overflow : hidden;
 }
 
 .pres2{
  width : 25%;
  text-align : center;
  float:left;
  left : 40px;
  height : 18px;
  overflow : visible;
 }
 
 .pres3{
  position : relative;
  right : 0px;
  margin-top : -4px;
  text-align : left;
  height : 18px;

 }
 
 .pres4{
  width : auto;
  float : right;
  right : -10px;
  text-align : right;
  height : 18px;
 }
 
 
 .validici{
  display : inline-block;
  position : relative;
  float : right;
  top : -10px;
  right : -20px;
  bottom : -20px;
  background-color : yellow;

 }
 
 .aligne{    
  display : inline-block;
  clear : left;
  float : left;
  height : 40px;
  width : 95%;

 }
 
.footer{
    position:fixed;
    display:block;
    clear:both;
    float: left;
    width: 100%;
    bottom: 0px;
    height: 50px;
    background-color: #B7CDFF;
    font-size:18px;
    opacity:0.9;
    z-index:998;
 }
 
 .escamote{
  background-color: blue;
  opacity : 0;
 }
 
 .logo_soc{
  position : relative;
  display : inline-block;
  float : left;
  left:1%;
  top : 15%;
  
  height :60%;
  margin :0px;
  z-index:1000;
 }
 
 .sociaux{
  position : relative;
  float:left;
  display : inline-block;
  top:6px;
  left : 0%;
  width : auto;
  color:black;
  text-align:left;

  font-size : 14px;
  font-style : normal;

  line-height:20px;
  z-index:1000;
 }
 
 .avis{
  position : relative;
  display : inline-block;
  float : left;
  font-size : 14px;
  color : black;
  font-style: italic;
  text-align:center;
  width : 20%;
  left : -4%;

  height : 30px;
  margin-left :5%;
  margin-top : 1px;
 }
 
 .mail{
  position : relative;
  display : inline-block;
  left  : -4%;
  width :27%;
  font-size : 14px;
  color:black;
  text-align:center;
  z-index:1000;
 }
 
 .noversion{
  font-size : 7px;
  position : relative;
  display : inline-block;
  float :right;
  width : 15%;
  right : 2%;
  text-align : right;
  color : #555;
  z-index : 1000;
 }