/*_________________________________________
____________________________________________*/


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


/*——————— GENERAL —————*/

*{
    box-sizing: border-box;
}

body{

  font-family: "mrs-eaves", serif;
  font-weight: 400;
  font-style: normal;

  background-color: #24445c ;
  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%);

  width:100vw;
  height: 100vh;

  overflow-x:hidden;

}



/*———————  tous les textes ————————*/

/*/// menu haut ///*/

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

  z-index:1000;
}

/*
h1{
  font-family:'OpticianSans';
  color:whitesmoke;
  font-size: min(max(14px, 1.3vw), 20px);
}

h1 a{
  text-decoration: none;
  color:whitesmoke;
  cursor:pointer;
  transition:all 1.5s;

}*/

h1 a:hover{
 /* color:lightgoldenrodyellow;*/
}

header a{
  font-family:'OpticianSans';
  color:whitesmoke;
  font-size: min(max(14px, 1.3vw), 20px);
  text-decoration: none;
  color: whitesmoke;
  cursor: pointer;
  transition: all 1.5s;
}


.imgMenu{
  height:2.5vh;
  width:auto;
  transition: background-color 1.5s;

}

.imgMenu:hover{
  cursor:cursor;
  background-color: whitesmoke;

}



/*/// couleur  par page et menu page active ///*/

.Salle{
  color:rgba(255, 105, 180,1) !important;
}

.Artistes{
  color: rgba(150, 255, 210,1) !important;
}

.Concerts{
  color: rgba(150, 255, 210,1) !important;
}

.Masterclasses{
  color:rgba(0, 255, 255,1) !important;
}

.Masterclasses{
  color:rgba(0, 255, 255,1) !important;
}

.enregistrements{
  color:rgba(255, 195, 0, 1.0) !important;
}


/*
.Salle{
  color:rgba(255, 105, 180,1);
}

.Artistes{
  color: rgba(150, 255, 210,1);
}

.Concerts{
  color: rgba(150, 255, 210,1);
}

.Masterclasses{
  color:rgba(0, 255, 255,1);
}

.Masterclasses{
  color:rgba(0, 255, 255,1);
}

.enregistrements{
  color:rgba(255, 195, 0, 1.0);
}*/

/* couleur liens enregistrements*/

.Enregistrements a{
  color:lightcyan;
  transition: color 1.5s;
}


.Enregistrements a:hover{
  color:rgba(255, 195, 0, 1.0);
}

/*———————————————————————————————————
—————////  textes courants ///———————
———————————————————————————————————*/

h2{
  display:inline-block;
  font-family:'OpticianSans';
  /*font-size: 1.5vw;*/
  color:#24445c;
  font-size: min(max(14px, 1.3vw), 20px);

}

h3{
  font-family:'OpticianSans';
  color:#24445c;
  font-size: min(max(24px, 2vw), 32px);

}


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

}

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

.prusse{
  color:#24445c;
  font-size: min(max(13px, 1.3vw), 16px);
}

.prusseBas{
  color:#24445c;
  font-size: min(max(16px, 1.3vw), 20px);
}


.bprusse{
  color:#24445c;
}

.optician{
  margin:0;
  font-family:'OpticianSans';

}


p{
  margin-left:4vw;
  margin-top: 1vw;
  line-height: min(max(24px, 2.5vw), 70px);

  color:whitesmoke;
  width:40%;
  font-size: min(max(16px, 1.5vw), 60px);

}


a{
  text-decoration: none;
  color:lightcyan;
  cursor:pointer;
}



h2 a:hover{
  text-decoration : blink;
  color: #24445c;
  background-color: whitesmoke;

}

a:hover{
  /*text-decoration : blink;
  color: #24445c;*/

}


/*———————————————————————————————————
——————/// container principal et # pages ///————
———————————————————————————————————*/

.container {
  top:0vh;
  width: 100vw;
  height: 100vh;
  margin: 0 auto;
  transition: all 1s ease;

}

/*#accueil::-webkit-scrollbar {
    width: 5px;
    background-color:rgba(36,68,92,0.8);
    border-radius: 5px;
    background-color: whitesmoke;
}

#accueil::-webkit-scrollbar-thumb:hover {
    background-color: hotpink;
}*/

.contenu{
/*#accueil, #salle, #concerts, #artistes, #masterclasses, #enregistrements {*/  
  position:fixed;
  top:5vw;
  margin-top: 3vw ;
  margin-left:12vw;
  height:75%;
  width:100%;
  overflow-y: scroll;
  overflow-x: hidden;
  cursor:all-scroll;
}



/* tous le pragraphes */

.pages{
    /*  background: linear-gradient(164deg, rgba(250,250,250,1) 0%, rgba(36,68,92,0.8) 75%,  rgba(20,50,70,1) 90%);

    background: linear-gradient(164deg, rgba(250,250,250,1) 0%, rgba(250,250,250,1) 30%, rgba(255, 105, 180,0.8) 75%,  rgb(255, 20, 147,1) 90%);
background:whitesmoke;*/
}

/*fonds dégradés #parties*/
#pageSalle{
      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, 105, 180,1)  88%,  rgba(255, 105, 180,1)  90%);

}

#pageArtistes{
        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(150, 255, 210,1)  82%,  rgba(150, 255, 210,1)  90%);

    }
#pageArtistes, #pageArtistesBis{
        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(150, 255, 210,1)  88%,  rgba(150, 255, 210,1)  90%);

    }

#pageConcerts{
      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(150, 255, 210,1)  88%,  rgba(150, 255, 210,1)  90%);

}

#pageMasterclasses{
      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(0, 255, 255,1)  88%,  rgba(0, 255, 255,1)  90%);

}

#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, 195, 0, 1.0)  88%,  rgba(255, 195, 0, 1.0)  90%);

}

/* paragraphes par #parties*/
#salle p,
#masterclasses p,
#enregistrements p,
#concerts p,
#artistes p{

  width:35%;

  margin-top:1vw;
  margin-right:55vw;

  line-height: min(max(24px, 2.5vw), 70px);
  font-size: min(max(16px, 1.5vw), 60px);

  color:whitesmoke;

}



#artistes p{
  line-height: min(max(20px, 2.1vw), 60px);

 }

#concerts p{
  text-shadow:1px 1px 1px 1px rgba(36,68,92,1);
}

/* page artistes */

#containerArtistes {
  top:0vh;
  display: grid;
  width: 100vw;
  height: 100vh;
  gap:0vw;
  margin: 0 auto;
  grid-template-columns:1fr;
  transition: all 1s ease;
  position:fixed;
  overflow-x:scroll;
  overflow-y:hidden;

}

/* grille étoiles*/
#LesArtistes{
  margin-top:10vh;
  display:grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows:1fr 1fr 1fr 1fr 1fr 1fr 7fr ;
  gap:1vw;
  overflow-y: hidden;
  overflow-x: hidden;
  width:310%;
  height:80%;
  align-content:center;
  justify-content:center;

}

#aigle{
grid-area: 1 / 1 / 7 / 2;

}
#belier{
 grid-area: 1 / 2 / 7 / 3;
}
#bouvier{
    grid-area: 1 / 3 / 7 / 4;

}
#castor{
    grid-area: 1 / 4 / 7 / 5;
}
#corbeau{
    grid-area: 1 / 5 / 7 / 6;
}
#grandeourse{
    grid-area: 1 / 6 / 7 / 7;
}
#lievre{
    grid-area: 1 / 7 / 7 / 8;
}
#loup{
    grid-area: 1 / 8 / 7 / 9;
}
#lynx{
    grid-area:  1 / 9 / 7 / 10;
}
#petiteourse{
    grid-area: 1 / 10 / 7 / 11;
}
/* étoiles*/

.stars {
    margin:2vh;
   /* display: flex;
    justify-content: center;
    align-items: center;*/
}
.stars svg{
  width:50%;
  height:auto;
  overflow: visible;
  z-index:300;
}

/* noms artistes étoiles*/

.titreBelier {
  display:block;
  width:12vw;
  align-self: end;
  justify-self: center;
  z-index:2000;
  text-shadow: 1px 1px 1px  #24445c;

}

.titreBelier a:hover{
  text-shadow: 0px 0px 0px  #24445c;

}


      .cls-1 {
        fill: rgba(253,253,253,0.9);

      }

/* texte lien vers bio artiste */
.texteBelier{
  bottom:0;
  left:0;
  display:flex;
  justify-content:center;
  align-items:flex-end;

}

.info{
  top:0;
  left:0;
  width:80%;
  display:none ;
  /*visibility:hidden;*/
  opacity:0;
  transition-property: display opacity;
  transition-duration: 1.8s;
  transition-behavior: allow-discrete;

  z-index:200;
}

.show {
  display: block;
  opacity: 1;

   @starting-style {
    opacity: 0;
  }

}




p.texteArtiste{
width:80%;
font-size: 1.3vw;
line-height: 1.6vw;
margin:1vw;
text-shadow: 1px -1px 0px  #24445c;
color:rgba(220, 255, 245,1) ;


}

p#delgado{
  width:70%;
  font-size: 1.2vw;

}

.liensArtistes{
  font-family:'OpticianSans';
  cursor:pointer;
  text-align: right;
  font-size: 1.2vw;
  z-index:1000;
}

.liensArtistes:hover{
  text-decoration : blink;
  background-color:  rgba(150, 255, 210,1) ;
  color:#24445c;
  cursor:pointer;
}

/*page concerts*/

.leConcert{
  position: fixed;
  top:0;
  left:0;
  padding-left:12vw;
  padding-top:5vh;
  width:100vw;
  height:auto;
  background-color:rgba(10,40,60,1);

}

#concerts{
  padding-top: 4vh;
}


/* ligne info bas*/

#description{
  position:fixed;
  bottom:7vh;
  left:3vw;
  z-index:20;
  width:500vw;
  text-align: left;
  pointer-events: none;
}
#description p{
  font-size: 1.2vw;
  line-height: 1.9vw;
}

.affiche{
opacity:1;}


/* page bio artiste */

#artistes{
  width:100%;
  margin-top: 13vh;
  margin-left: 12vw;

}





#artistes p.refs{
  line-height: 2.2vw; !important
}

#photo{
  width:30%;
  height:auto;
  position:fixed;
  bottom:5vh;
  right:0vw;
  opacity:0.7;
}


h2.nomArtistes{
  color:rgba(150, 255, 210,1);
  font-size:1.7vw;
  position: fixed;
  display:block;
  left:10vw;
  top:8vw;
  z-index:100;
}

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



/*———————————————————————————————————
——————/// pied de page ///————
———————————————————————————————————*/

#blockLogo {
  display:flex;
  position:fixed;
  align-items: center;
  justify-content: right;
  width:100vw;
  opacity:0.9;
  bottom:0;
  pointer-events: none;
  z-index:1000;

}

#menuBas{
  position:fixed;
  height:5vh;
  width:70vw;
  background-color:rgba(255,255,255,0.9);
  bottom: 0;
  left:0;
  display:inline-flex;
  justify-content:space-evenly;
  align-items: end;
  padding-bottom: 10px;
  z-index: 1000;
}

#menuBas h2{
  color:black;
  cursor:pointer;
}


#menuBas h2:hover{
  text-decoration : blink;
  color:whitesmoke;
  background-color: #24445c ;
  cursor:pointer;
}


img{
  width:30%;
  height:auto;
  overflow: auto;
}



#acces{
  position:fixed;
  height:90vh;
  width:57vw;
  background-color:rgba(250,250,255,0.9);
  bottom: -105vh;
  left:0;
  overflow-y: scroll;
  overflow-x:hidden;
  transition: all 2s ease-in-out;
  z-index:600;

}

#acces p{
  font-size: 1.5vw;
  line-height: 1.8vw;
  color: #24445c;
  width:60%;
}

#contact{
  position:fixed;
  height:15vh;
  width:57vw;
  background-color:rgba(250,250,255,0.9);
  bottom: -15vh;
  left:0;
  overflow-y: scroll;
  padding-left: 25vw;
  transition: all 1.2s ease-in-out;
  z-index:600;

}


p.bas{
  margin:0;
  width:20vw;
  margin-top: 2vw;
  color:#24445c;
  font-size: 1.5vw;
  line-height: 1.8vw;
}



.bas a{
  color:#24445c;
  cursor:pointer;
  text-decoration: underline;
}

#carte{
  width: 100%;
  margin-left:4vw;
  height:auto;
  filter: grayscale(100%);
  margin-top:4vw;

}

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

#croixA, #croixC{
  font-family:'OpticianSans';
  color:#24445c;
  font-size: min(max(22px, 2.4vw), 28px);
  position:absolute;
  top:2vw;
  right:2vw;
  text-align: right;
  margin:0;
  cursor:pointer;
  width:auto;

}

#croixA{
  position:fixed;
  top:8vh;
  left:54vw;
  text-align: left;

  display:none;

}





  /* Sidenav menu */
.sidenav {
  display:block;
  height: 100%;
  width: 40vw;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 100vw;
  background-color: #e8e8e8;
  padding-top: 15vh;
  transition: left 0.5s ease;
}

/* Sidenav menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #111;
}

.sidenav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

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

/* Close btn */
.sidenav .close {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
}

/* Icône burger */
.burger-icon span {
  display: block;
  position:fixed;
  width: 35px;
  height: 5px;
  background-color: pink;
  top: 0;
  left:0;
  z-index:1000;

}