html {font-size: clamp(14px, 9px + 0.5vw, 16px);}

body {
  background:url('../images/image31.png') #D6DED5;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;}

/*Prise en compte header et footer fixed*/
.content{
   margin-top:2.0rem;
   margin-bottom:2rem;}
   
footer{
    margin: auto;
    width: 100%;
    position: fixed;
    bottom: 0;
    list-style-type: none;
    text-align: center;}
   
footer>div{ 
       display:inline-block;
       padding-top:0.2rem;
       padding-left:1rem;
       padding-right:1rem;
       color: #1A365D;
       background-color: #D3D3EB;
       border-radius: 10px;
       border: 1px ridge #827A76;}

footer a{
    padding-left:0.5rem;
    padding-right:0.5rem;}
    
footer a:focus {
     outline: none;
     background-color:#90CCE8;
     color:#801A12;
     border-radius: 5px;}
 
footer>div>li>a:hover{
     border-radius: 5px;
     background-color:#EDF5F5;
     color:#801A12;}
     
footer>div>li>a.selected{
    outline: none;
    text-decoration: none;
    border-radius: 5px;
    background-color: #8185bc;
    color:white;}
 
footer>div>li>a.selected:hover,footer>div>li .selected:focus{ 
    box-shadow: inset 0 0 0 2px black;
    border-radius:5px;}
    
h1 {
    margin:0;
    text-align: center;
    color: #1A365D;
    font-size: 3.5rem;
    font-family: "Goudy Old Style","Gabriola","Brush Script MT","Times New Roman";}
   
nav {
    top: 0px;
    left: 0;
    right: 0;
    padding: 0rem;
    position : fixed;
    z-index:10;}

.nav-links {
    display: flex;
    margin:auto;
    padding:0;
    top: 0px;
    left: 0;
    list-style-type: none;
    z-index:10;
    background-color: #D3D3EB;
    border-radius: 5px;
    width: fit-content;}

nav ul li a ,label.burger{
    padding: 0px 15px 0px 15px;
    text-decoration: none;
    color: #1A365D;
    font-size: 1.6rem;
    border-radius: 5px;}  


nav ul li .selected{
    outline: none;
    border-radius: 5px;
    background-color: #8185bc;
    color: white;}

nav ul li .selected:hover,nav ul li .selected:focus{ 
    box-shadow: inset 0 0 0 2px black;
    border-radius:5px;} 
    
nav ul li a:not(.selected):hover, .concerts a:hover,.innerLink:hover{
     border-radius: 5px;
     background-color:#EDF5F5;
     color:#801A12;
     outline:none;}
     
nav ul li a:not(.selected):focus ,.concerts a:focus,.innerLink:focus{
     outline: none;
     background-color:#90CCE8;
     color:#801A12;}

/* Cacher l'input de type checkbox */
input[type=checkbox] {display: none;}

.burger:after{content:"\25BC";}

/* Cacher l'icône burger sur les écrans d'ordinateur */
.burger {display: none;}

.accueil  , .historique , .mentionLegales{
    display:flex;
    justify-content: center;
    align-items: center;
}

.historique,.accueil {position:relative;}

.accueil  div ,  .historique div , .mentionLegales>div{
     background-color: #D3D3EB;
     background-color:rgba(211,211,235,0.5);
     border-radius: 1rem;
     border: 1px ridge #827A76;
   /*  backdrop-filter: contrast(1.5);*/
}
 
 .mentionLegales>div{background-color: #D3D3EB;}
 
.mentionLegales a:visited {text-decoration: none;}

     
.accueil  p{
      text-align: center;
      font-size: 1.5rem;
      color: #101585;
      padding: 1rem;
     font-weight: bold;
    /* backdrop-filter: contrast(1.5);
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);*/
}
.historique h2{
     color: #101585;
     padding:0 2rem 0 2rem;
}
.historique p{
     text-align: center;
     font-size: 1.5rem;
     color: #101585;
     padding:0 1rem 0 1rem;
     font-weight: bold;
    /* text-shadow: 1px 1px 1px rgba(0,0,0,0.4);*/
}

 .mentionLegales>div {
      font-size: 1.3rem;
      line-height:1.8rem;
      color: #101585;
      padding: 1rem;
      font-weight: bold;
     /* text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);*/
 }
 
 .contact{
     display:flex;
     justify-content: center;
     padding-top:0.5rem;}
     
 .contact>div{ 
     display:flex;
     justify-content: center;
      align-items: center;
      background-color: #D3D3EB;
      background-color:rgba(211,211,235,0.5);
      font-size: 1.3rem;
      line-height:1.8rem;
      color: #101585;
      border: 2px ridge #827A76;
      border-radius: 1rem;
      font-weight: bold; }

.contact-text{padding-left:2rem;}

 .contact img{
    display: block;
    margin:0px;
    max-height: 620px;
    border-radius: 15px;
    border: 3px groove #827A76;
    /* filter: contrast(85%);*/
 }
 
.concerts h2{
    font-size: 1.6rem;
    margin:0 0 0.5rem 2rem;}

.titreclosed h2{
    display:inline-block;}
    
 .closedBt{  
     font-size: 1.2rem;
     padding:0 5px 0 5px;
     margin:auto;}
     
 .concerts{
        position:absolute;
        top:0;}
        
.concerts>div{ 
    padding-left:2rem;
    font-size: 1rem;}

.innerLink{
   border-radius: 5px;
   text-align:center;
   color:#801A12;}

.titreclosed{
    display:flex;
    padding-top:5px;}

.closedBt:hover{
     border-radius: 10px;}
     
.closedBt{
    text-decoration: none;
    width:7rem;
    margin-right:0.3rem;
    background-color:#D3D3EB;
    border-radius: 10px;}

.boutonConcert {
    display:block;
    width:6rem;
    text-align: center;}
    
#concert {
    display: none;
    background-color: #f0f0f0;
    font-size: 1.2rem;
     color: #101585;}
     
 #concert:target {display:block;}
 
 .repertoire_accueil{padding:1rem 3rem 0 0;}
 
 #repertoire {
    display: none;
    background-color: #f0f0f0;
    font-size: 1.2rem;
     color: #101585;}
     
 #repertoire:target {display:block;}
 
 .cadreListe{
    margin-top:5.5rem;
    background-color: #D3D3EB;
    background-color:rgba(211,211,235,0.75);
    border-radius: 10px;
 }
 
 .cadreListe h2{
     text-align:center;
      color:#101585;
 }
 .listcontent{
     padding:1rem;
     display: flex;
     flex-wrap: wrap;}
     
itemList{min-width:20rem;}

itemList>span{
    border-radius: 5px;
    color:#101585;
     font-size: 1.2rem;
    text-decoration: none;
    padding:0px 5px;}
 
itemList>span.selected:hover, itemList>span.selected:focus{ 
    box-shadow: inset 0 0 0 2px black;
    border-radius: 5px;}

itemList>span:hover {
     outline:none;
     background-color:#EDF5F5;
     color:#801A12;}
     
itemList>span:hover {
    outline:none;
    background-color: #90CCE8;/*7A7977;*/
}
   

.messagedefilant {
  width:100%;
  display: block;
  overflow: hidden;
  position: relative;}
 
.messagedefilant div {
 /*  border-radius: 10px;
    background-color: #90CCE8;
     background-color:rgba(211,211,235,0.5);*/
   color: #1A365D;
   color:#82498A;/*2757F5;*/
   color:#8A494F;
   color:#7A0606;
   text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
   font-size: 4.5rem;
      
   font-family: "Goudy Old Style","Gabriola","Brush Script MT","Times New Roman";
    font-weight: bold;}

.messagedefilant div span, 
.messagedefilant div:after {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  padding:0 1rem 0 1rem;
}
 
.messagedefilant div span {
  animation: scroll-left 15s infinite linear;}
 
.messagedefilant div:after {
  position: absolute;
  top:0px; left:0;
  content:attr(data-text);
  animation: scroll-left2 15s infinite linear;}

  /* Animation continue */
  @keyframes scroll-left {
    0% { transform: translateX(0);}
    100% {transform: translateX(-100%);}
  }
  
   @keyframes scroll-left2 {
    0% { transform: translateX(100%);}
    100% {transform: translateX(0);}
  }
  
/* Responsive styles */
@media only screen and (max-width: 880px) {
     h1 { padding:0;margin:0;font-size: 2.0rem;}
     
   .contact img{max-width:90vw;}
   
  .accueil  div ,  .historique div , .mentionLegales>div{
     background-color: #D3D3EB;
     background-color:rgba(211,211,235,0.70);}
     
    .accueil  p{padding:0;}
    
    .contact,.contact>div{ flex-direction: column;}
    
    .nav-links {display: none;}
    
    .messagedefilant div {
        font-size: 3.5rem;
        margin-top:0rem;
        padding-top:0;}

    .burger {
        display: block;
        cursor: pointer;
        color: #1A365D;
        font-size: 1.2rem;
        background-color: #D3D3EB;
        border-radius: 10px;
        width: fit-content;}
    
   input[type=checkbox]:checked~ .burger:after{
    content:"\25B2";}
        
   input[type=checkbox]:checked ~ .nav-links {
        display: flex;
        flex-direction: column;
        position: absolute;
        top:2.5rem;/*Prise en compte header*/
        left:0.5rem;
        background-color:#D3D3EB;
		border-radius: 5px;
		border: 1px solid #827A76;
		gap:0.5rem;}
  }