@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Mystery+Quest&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600;700&display=swap');
body{
margin: 0;
}

#journal{
  z-index: 1;
  position: relative;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  background-color: rgb(245, 222, 179, 0.8);
    padding-bottom: 50px;
    box-shadow: 0 0 30px rgba(0,0,0,0.8);
}

.picture{
  width: 50%;
}

.imagecentre{
  text-align: center;
}
.cadrestage{
  width: 100%;
  text-align: center;
/*  position: absolute;*/
top: 100px;
}

.imgprincipale{
  width: 1200px;
  margin: auto;
}

.book{
  width: 99%;
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

.elmtprincipal{
  width: 50%;
  height: 100px;
}

.listelement{
width: 50%;
height: 100px;
}

.elementprincipal{
  width: 100%;
}

.petiteimage{
  width: 10%;
}

.textestage{
  width: 90%;
  margin: auto;

  font-size: 25px;
  font-family: 'Cormorant Garamond'; /*
  background-color: rgb(245, 222, 179, 0.8);
    padding-bottom: 50px;
    box-shadow: 0 0 30px rgba(0,0,0,0.8);*/
}

#news{
  z-index: 1;
  position: relative;
  width: 1200px;
  margin: auto;
/*  text-align: center;*/
  display: flex;
}

.imgnews{
  width: 50%;
}

.stageimg{
  width: 75%;
  margin: 0 50px;
}
.stageimg img{
  width: 100%;
}
h4{
  color: white;
}


.diapo, .casevideo{
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.diapo{
  display: table;
}
.casevideo{
  text-align: center;
}
.diapoimg{
  display: inline-table; padding: 5px;width: 300px;
height: 300px;
text-align: center;
}
.miniimg{
  width: auto;
  height: 225px;
}

.videodanse{
  width: 1200px;
}

.espace2{
  height: 300px;
}
h2.texteLienStage{
  width: 100%;
  }

  .texteLienStage a{
background-color: rgb(245, 222, 179, 0.8);
box-shadow: 0 0 30px rgba(0,0,0,0.8);
padding: 5px 20px;
  text-decoration: none;
    color: black;
  }
    .texteLienStage a:hover{
background-color: rgb(0, 0, 0, 0.8);
box-shadow: 0 0 30px rgba(245,222,179,0.8);
color: white;
  }

@media only screen and (max-width : 1200px) {
 .imgprincipale{
  width: 95%;
}
#news{
  width: 100%;
  display: flex;
}

}
@media only screen and (max-width : 768px) {
#news{
    width: 95%;
    display: block;
  }
  .stageimg {
  margin: auto;
  }