body {
    color:black; /*couleur police par défaut*/
    background-color:white;
    background: linear-gradient(black 10%,#623100 20%,#FFDE73 35%,white);
    background-attachment: fixed;
    font-family: "times New Roman"serif; 
}
#broderie{
    position: fixed;top:7%;height: 93%;left: 0%; z-index: 10;  /*pour être au-dessus*/  
}
header {/*bloc en-tête horizontal*/
    display: flex; /*par rapport au wordart et à la navigation1*/flex-direction: row;
    justify-content: space-between; align-items: center;
    position: fixed; top: 0%;height: 10%; width:100%; background-color: rgba(0,0,0,0.5);
    z-index: 8;
}
#wordart{position: relative; height: 100%;}
#wordartimg{box-sizing: border-box; height :100%; padding-top: 3%; padding-left: 22%; }

#nav1{/*navigation horizontale*/position: relative; width: 70%;
}
#nav1 ul{list-style-type: none;/*pas en liste verticale*/display: flex;flex-direction: row;justify-content: space-around;}
#nav1 a{font-size: 1.2em; color: white;text-decoration: none;/*pas souligné, pas de puces*/ border-bottom: 2px solid white transparent;}
#nav1 a:hover{border-bottom: 1px solid white;}

#nav2{/*navigation verticale inactive*/display: none;}

#icones{/*commande navigation verticale inactive*/display: none;}

#conteneurmusique{
    position: absolute; top:10%;left:9%;width:90%;height: 89%;
    display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(4,1fr);   
}
#fond{grid-area: 1/1/5/4;align-self: center; justify-self: center;}
#fon{width:100%;transform: rotate(6deg); filter: drop-shadow(4px 4px 4px black);padding: 0%;margin-top: 10%;}

#concert{grid-area: 1/1/4/2; align-self: center; justify-self: center;}
#concer{width:75%;padding-top: 9%;padding-left: 8%; filter: drop-shadow(4px 4px 4px black);transform: rotate(-5deg);}

#isabelle{grid-area: 4/1/4/2; align-self:flex-start; justify-self: flex-start;z-index: 2;margin-top: -10%;}
#isabelle p{font-size: 1.6vw;text-align: right;}
#isabelle a{color:red;text-decoration: none;font-weight: bold;}
#isabelle p a:hover{border-bottom: 1px solid red;}

#trio{grid-area: 4/1/5/2;align-self: center; justify-self: center;}
#tri{width: 73%;padding:3%;padding-left: 0%; filter: drop-shadow(4px 4px 4px black);}

#historique{
    grid-area: 1/2/4/3;align-self: center; justify-self: center;width: 95%; margin: 3%;margin-left: 0%;margin-top: 0%;padding: 2%; padding-top: 3%; padding-bottom: 3%;
    background-color: white;border-radius: 3vw; border: 1px solid grey; filter: drop-shadow(4px 4px 4px black);}
#historique p{ font-size: 0.9vw;text-align: center;}

#folk {
    grid-area: 4/2/5/3;align-self: flex-end; justify-self: center;width: 95%;margin:3%;margin-left: 0%;
    background-color: white;border-radius: 2vw; border: 1px solid grey; filter: drop-shadow(4px 4px 4px black);}
#folk p{font-size: 1.4vw;text-align: center;}
#folk span{font-weight: bold;}

#conference{
    grid-area: 1/3/5/4;align-self: center; justify-self: center;width: 95%;margin:3%;padding-top: 1%; padding-bottom: 1%;
    background-color: white;border-radius: 3vw; border: 1px solid grey; filter: drop-shadow(4px 4px 4px black);}
#conference p{font-size: 0.9vw;text-align: center;}
#conference p a{color:red;text-decoration: none;font-weight: bold;}
#conference p a:hover{border-bottom: 1px solid red;}

#yves{width: 90%;}


/* Version tablette*/ @media (max-width:1388px)
    
{
#nav1{/*la navigation horizontale n'existe plus*/display: none;}
    
#icones{/*commande de navigation verticale*/
    display: flex; flex-direction: column; justify-content: space-between; align-items:flex-start;
    position: fixed; top:10px; height:7%;left:15px;
    z-index: 12;
}
#iconeburger{height: 70%;}
#hamburger{height:100%;}
#iconefermer{height: 25%;}
#fermer{box-sizing: border-box; height:100%; padding-left: 5px;}
    
#nav2:not(target){
    display: flex; flex-direction: row; justify-content: center;
    position: fixed; top:15%;width: 50%;height: 40%; left:-80%;
    background-color: black;
    border-radius: 4vw; border-color: 2px solid grey; filter: drop-shadow(4px 4px 4px black);
    z-index: 8;
}
#nav2:target{
    display: flex; flex-direction: row; justify-content: center;
    position: fixed; top:15%;width: 50%;height: 40%; left:12%;
    background-color: black;
    border-radius:4vw; border-color: 2px solid grey; filter: drop-shadow(4px 4px 4px black);
    z-index: 8;
}
#nav2{
    transition-property: all; transition-duration: 3s;    
}
#nav2 ul{display: flex; flex-direction: column; justify-content: space-around; align-items: center; text-align: center; list-style-type: none;}
#nav2 a{font-size: 1.1em; color: white; border-bottom: 2px solid white transparent; text-decoration: none;}
#nav2 a:hover{border-bottom: 1px solid white;}
    
#conteneurmusique{
    position: relative;margin-top:10%;left:9%;width:90%;height:89%;
    display: grid; grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(7,1fr);   
}
#fond{grid-area: 4/1/7/3;align-self:center; justify-self: center;margin-left: -20%;}
#fon{width:100%;transform: rotate(-30deg); filter: drop-shadow(4px 4px 4px black);padding: 0%;}

#concert{grid-area: 1/1/4/2; align-self:flex-start; justify-self: center;}
#concer{width:75%;padding-left: 8%; filter: drop-shadow(4px 4px 4px black);transform: rotate(-5deg);}

#isabelle{grid-area: 3/1/4/2; align-self:center; justify-self: flex-start;z-index: 11;}
#isabelle p{font-size: 1.8vw;text-align: right;}

#trio{grid-area: 4/1/5/2;align-self: flex-start; justify-self: center;margin-top: -8%;margin-left: 8%;}
#tri{width: 75%;padding:3%;filter: drop-shadow(4px 4px 4px black);transform: rotate(5deg);}

#historique{
    grid-area: 1/2/4/3;align-self:flex-start; justify-self: center;width: 95%; margin: 3%;margin-left: 0%;margin-top: 0%;padding: 2%; padding-top: 2%; padding-bottom: 2%;
    background-color: white;border-radius: 3vw; border: 1px solid grey; filter: drop-shadow(4px 4px 4px black);}
#historique p{ font-size: 1.6vw;text-align: center;}

#folk {
    grid-area: 6/1/7/2;align-self:centerjustify-self: center;width: 95%;margin:3%;margin-left: 0%;
    background-color: white;border-radius: 2vw; border: 1px solid grey; filter: drop-shadow(4px 4px 4px black);}
#folk p{font-size: 1.7vw;text-align: center;}


#conference{
    grid-area: 4/2/8/3;align-self: flex-start; justify-self: center;width: 95%;margin:3%;padding-top: 2%; padding-bottom: 2%;margin-top: -5%;
    background-color: white;border-radius: 3vw; border: 1px solid grey; filter: drop-shadow(4px 4px 4px black);}
#conference p{font-size: 1.4vw;text-align: center;}

}

/* Version telephone*/ @media (max-width:780px)
    
{
#broderie{z-index:-1;}
#wordart{position: relative; height: 85%;}
    
#icones{
    display: flex; flex-direction: column; justify-content: space-between; align-items:flex-start;
    position: fixed; top:5px; height:7%;left:5px;
    z-index: 12;
}
#iconeburger{height: 65%;}
#hamburger{height:100%;}
#iconefermer{height: 25%;}
#fermer{box-sizing: border-box; height:100%; padding-left: 5px;}
    
#nav2:not(target){
    display: flex; flex-direction: row; justify-content: center;
    position: fixed; top:15%;width: 50%;height: 70%; left:-80%;
    background-color: black; border-radius: 4vw; border-color: 2px solid grey; filter: drop-shadow(4px 4px 4px black);
    z-index: 8;
}
#nav2:target{
    display: flex; flex-direction: row; justify-content: center;
    position: fixed; top:15%;width: 50%;height: 70%; left:12%;
    background-color: black; border-radius: 4vw; border-color: 2px solid grey; filter: drop-shadow(4px 4px 4px black);
    z-index: 8;
}
#nav2{
    transition-property: all; transition-duration: 3s;    
}
#nav2 ul{display: flex; flex-direction: column; justify-content: space-around; align-items: center; text-align: center; list-style-type: none;margin-left: -5%;}
#nav2 a{font-size: 0.8em; color: white; border-bottom: 2px solid white transparent; text-decoration: none;}
#nav2 a:hover{border-bottom: 1px solid white;}
    
    
#conteneurmusique{
    position: relative;margin-top:10%;left:9%;width:90%;height:89%;
    display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(12,1fr);   
}
#fond{grid-area: 7/1/13/2;align-self:flex-end; justify-self:center;z-index: -2;}
#fon{width:80%;transform: rotate(5deg); filter: drop-shadow(4px 4px 4px black);padding: 2%;margin-top: 0%; margin-left:12%;}

#concert{grid-area: 1/1/4/2; align-self:center; justify-self: center;margin-top: 2%;}
#concer{width:75%;padding-left: 8%; filter: drop-shadow(4px 4px 4px black);transform: rotate(-5deg);}

#isabelle{grid-area: 3/1/4/2; align-self:flex-end; justify-self:flex-end;z-index: 11;}
#isabelle p{font-size: 3.4vw;text-align: right;}

#trio{grid-area: 4/1/5/2;align-self: center; justify-self: center;margin-top: -5%;}
#tri{width: 75%;padding:3%;filter: drop-shadow(4px 4px 4px black);transform: rotate(5deg);}

#historique{
    grid-area: 5/1/8/2;align-self:flex-start; justify-self: center;width: 95%; margin: 2%;margin-left: 0%;margin-top: 0%;padding: 2%; padding-top: 6%; padding-bottom: 6%;
    background-color: white;border-radius: 3vw; border: 1px solid grey; filter: drop-shadow(4px 4px 4px black);}
#historique p{ font-size: 3vw;text-align: center;white-space: nowrap;}

#folk {
    grid-area: 12/1/13/2;align-self:centerjustify-self: center;width: 95%;margin:3%;margin-left: 0%;z-index: -1;
    background-color: white;border-radius: 2vw; border: 1px solid grey; filter: drop-shadow(4px 4px 4px black);}
#folk p{font-size:3.8vw;text-align: center;}


#conference{
    grid-area: 8/1/12/2;align-self: flex-start; justify-self: center;width: 95%;margin:3%;padding-top: 2%; padding-bottom: 2%;margin-top: -5%;
    background-color: white;border-radius: 3vw; border: 1px solid grey; filter: drop-shadow(4px 4px 4px black);}
#conference p{font-size:3vw;text-align: center;}

}