:root {
  --svh: 1svh;
}

/* Ordinateur / Mobile */
.ordinateur{
  display:none;
}
.mobile{
  display:block;
}



body{
  padding: 0;
  margin: 0;
  min-height: 100svh;
  min-height: calc(var(--svh, 1svh) * 100);
  background-color:whitesmoke ;
  
}



header{
  position:fixed;
  display: flex;
  justify-content: left;
  align-items: center;
  top:0;
  width:100%;
  height:5svh;
  background-color: black;
  padding:1.2vw;

  z-index:500;
}

header span{
    font-family: 'OpticianSans';
    color: whitesmoke;
    font-size: min(max(14px, 1.3vw), 20px);
    padding-left: 1.5svh;
    padding-top: 1.4svh;
}

.imgMenu:hover{
  background-color: lightblue;

}

h2{
    font-size: 3vw;

}
#contact{
  padding-left: 13vw;
}
.bas{
  width:90%;
}

p.bas{

  font-size: 4svh;
}


.prusse{
  font-size: min(max(20px, 3vw), 32px);
}

#artistes p,
#salle p,
#masterclasses p,
#enregistrements p,
#concerts p,
#artistes p,
p{
  margin:0vw;
  margin-top:4vw;
  color:whitesmoke;
  width:82%;
  /*line-height: min(max(34px, 6vw), 80px);
  font-size: min(max(24px, 4.5vw), 60px);*/

  line-height: min(max(29px, 5.4vw), 80px);
  font-size: min(max(24px, 4.5vw), 60px);

}



em{
  font-family:'OpticianSans';
  font-size: 5vw;
  color:whitesmoke;

}

.mini{
  display:inline-block;
  font-size:4.2vw;
  transform:rotate(-7deg) translateY(-0.3vw);
}



#container{
  position:fixed;
  top:5svh;
  width:100vw;
  height: 95svh;
  overflow:hidden;
  grid-template-columns:1fr;
  grid-template-rows: repeat(7, 1fr);
  transition: all 1s ease;
  gap:0;
}





/*#pageAccueil, #pageSalle, #pageConcerts, #pageArtistes,#pageBio, #pageMasterclasses, #pageEnregistrements {*/
.contenu-fond{

  position:fixed;
  top:5svh;
  left:0;
  height:95svh;
  width:100%;
  overflow-y: scroll;
  overflow-x: hidden;
  cursor:all-scroll;


}

body#pageAccueil,
body#pageSalle,
body#pageConcerts,
body#pageArtistes,
body#pageBio,
body#pageMasterclasses,
body#pageEnregistrements {
  background: linear-gradient(164deg, rgba(10,40,60,1) 0%, rgba(10,40,60,1) 20%,rgba(36,68,92,0.8) 55%,  rgba(36,68,92,0.8) 75%, rgba(255, 255, 255,1)  80%,  rgba(255, 255, 255,1)  90%);
}

#pageAccueil .contenu-fond{
  background: linear-gradient(164deg, rgba(10,40,60,1) 0%,rgba(10,40,60,1) 20%, rgba(36,68,92,0.8) 55%,  rgba(36,68,92,0.8) 85%, rgba(255, 255, 255,1)  88%,  rgba(255, 255, 255,1)  93%);
}
#pageSalle .contenu-fond{
  background: linear-gradient(164deg, rgba(10,40,60,1) 0%,rgba(10,40,60,1) 20%, rgba(36,68,92,0.8) 55%,  rgba(36,68,92,0.8) 85%, rgba(255, 105, 180,1)  88%,  rgba(255, 105, 180,1)  93%);
}

#pageArtistes .contenu-fond{
  background: linear-gradient(164deg, rgba(10,40,60,1) 0%, rgba(10,40,60,1) 20%,rgba(36,68,92,0.8) 55%,  rgba(36,68,92,0.8) 85%, rgba(150, 255, 210,1)  88%,  rgba(150, 255, 210,1)  93%);
}

#pageBio .contenu-fond{
  background: linear-gradient(164deg, rgba(10,40,60,1) 0%,rgba(10,40,60,1) 20%, rgba(36,68,92,0.8) 55%,  rgba(36,68,92,0.8) 85%, rgba(150, 255, 210,1)  88%,  rgba(150, 255, 210,1)  93%);
}

#pageConcerts .contenu-fond{
  background: linear-gradient(164deg, rgba(10,40,60,1) 0%,rgba(10,40,60,1) 20%, rgba(36,68,92,0.8) 55%,  rgba(36,68,92,0.8) 85%, rgba(150, 255, 210,1)  88%,  rgba(150, 255, 210,1)  93%);
}

#pageMasterclasses .contenu-fond{
  background: linear-gradient(164deg, rgba(10,40,60,1) 0%, rgba(10,40,60,1) 20%,rgba(36,68,92,0.8) 55%,  rgba(36,68,92,0.8) 85%, rgba(0, 255, 255,1)  88%,  rgba(0, 255, 255,1) 93%);
}

#pageEnregistrements .contenu-fond{
  background: linear-gradient(164deg, rgba(10,40,60,1) 0%,rgba(10,40,60,1) 20%, rgba(36,68,92,0.8) 55%,  rgba(36,68,92,0.8) 85%, rgba(255, 195, 0, 1.0)  88%,  rgba(255, 195, 0, 1.0) 93%);
}


.contenu{
/*#accueil, #salle, #concerts, #artistes,#bio, #masterclasses, #enregistrements {*/
  margin-left:8vw;
  height:95%;
  width:100%;
  overflow-y: scroll;
  overflow-x: hidden;
  cursor:all-scroll;
  padding-top: 5vw;

}

/*page artiste*/
#containerArtistes{
height:90svh;
top:5svh;
background: linear-gradient(165deg, rgba(10,40,60,1) 0%, rgba(36,68,92,0.8) 45%,  rgba(36,68,92,0.8) 89%, rgba(150, 255, 210,1)  92%,  rgba(150, 255, 210,1)  97%);


}
#LesArtistes {
  margin-top:0;
  width:430%;
  height:85%;
  top:5svh;
  padding-top: 5vw;

}

p.texteArtiste{
  width:100%;
  font-size: 3vw;
  line-height: 4vw;
}
.liensArtistes{
  font-size: 3.2vw;
}

.stars svg{
  width:90%;
}

#description{
position:fixed;
top:87svh;
left:3vw;
width:100vw;
height:auto;
}

#description p{
font-size:3vw;
line-height:3.3vw;
}




/*page bio*/
#bio  {
  position:fixed;
  top:5svh;
  width:100%;
  height:85svh;
  margin-right:4vw;
  margin-top: 15vh;
}
#bio p{

width:82%;
margin-right:12vw;

}
.optician.Artistes{
  font-size:3vw;
}

h2.nomArtistes{
  position:fixed;
  top:12svh;
  left:8vw;
  font-size:4.5vw;
}
#portrait{
  height:90%;
  width:auto;
}
#portrait #photo{
  position:relative;
  display:flex;
width:100%
 }

/*page concerts*/
#annonceConcert{
  position:fixed;
  top:5svh;
  width:100%;
  height:auto;
  background-color: rgba(10,40,60,1);
  z-index:1200;
  /*margin-left:7vw;*/
  margin-left:0vw;

}
#concerts{
margin-top:8svh;
}



/* menu bas*/

#menuBas{
  width:60vw;
  height:5svh;
  padding-bottom: 1svh;
}

#blockLogo img{
width :40vw;
z-index:2000;

}
 #lienContact, #lienAcces{
  font-size:3vw;
}

#acces{
  position:fixed;
  width:100vw;
  height:95svh;
  scroll-y:auto;
  bottom:-110svh;
}

#contact{
  position:fixed;
  width:60vw;
  height:18svh;
  padding-left:2vw;
  padding-bottom: 7vw;
  bottom:-50svh;

}

#acces p, #contact p{
  margin-left: 5vw;
  font-size: 4.2vw;

  line-height: 5vw;
  width:80%;
}

#contact p{
margin-left: 2vw;
width:100%;

}

iframe{
  background: #24445c;
  width:80%;
}


.prusseBas{
  font-size: 4vw;
}

#croixA, #croixC{

    font-size: 6vw;

    height: 6vw;
    width: 6vw;
    text-align: center;
    right:1vw;

}

#croixC{
    height: 6vw;
    width: 6vw;
    text-align: right;
    padding-right:1vw;
  }

#croixA{
  position:fixed;
  height: 6vw;
  width: 6vw;
  text-align: left;
  padding-left: 40vw;
  display:none;

}



/* Sidenav menu links */
.sidenav {
  top:5svh;
  height: 90svh;
  width: 40vw;
  position: fixed;
  z-index: 600;
  left: 100vw;
  background-color:rgba(255,255,255,0.9);
  padding-top: 10svh;
  transition: left 0.5s ease;
}
/* Sidenav menu */

/* Sidenav menu links */
.sidenav a {
  font-family: 'OpticianSans';
  color: whitesmoke;
  font-size: min(max(14px, 1.3vw), 20px);

  padding-left: 1.5svh;
  padding-top: 1svh;
  padding-bottom: 4svh;
  text-decoration: none;
  font-size: 3vw;
  line-height: 3vw;

  color:#24445c;
  display: block;
  transition: 0.3s;
}



/* Active class */
.sidenav.active {
  left: 60vw;
}

/* Close btn */
.sidenav .close {
  position: absolute;
  top: 0;
  right: 2vw;
  font-size: 4vw;
}

#openBtn{
  display:block;
  position:fixed;
  top:1svh;
  right:1.5vw;
  width:5vw;
  height:4svh;
  z-index: 600;
}

a#openBtn {
  display:block;
  position:fixed;
  top:1svh;
  right:1.5vw;
  width:5vw;
  height:4svh;
  z-index: 600;
  background-color: black;
  cursor:pointer;
}




/* Icône burger */

.burger-icon span {
  display: block;
  position:relative;
  width: 5vw;
  height: 0.5svh;
  background-color: whitesmoke;
  margin: 0.4svh 0;
  z-index:1000;

}
/*
.burger-icon span:hover {
  display: block;
  position:relative;
  width: 5vw;
  height: 0.5svh;
  background-color: lightblue;
  margin: 0.4svh 0;
  z-index:1000;

}*/