body
{
    width:100%;
    font-family:"Century Gothic","Comic sans MS",Verdana,serif;
    font-size: 1.2vw;
    background-color:whitesmoke ;
    padding:0px;
	margin:0px;
}
/*******************************************************************************************************
* section                                                                                              *
********************************************************************************************************/
.section1
{
    background-color:whitesmoke;
    border: 5px solid darkgoldenrod;
    border-radius:15px;
    height:auto;
    font-size: 2vw;
    padding-bottom: 2vw;

}
/********************************************************************************************************
*header                                                                                                 *
*********************************************************************************************************/
.container
{
    display: flex;
    align-items: center;
    justify-content:space-between;
    height:fit-content;
    padding: 0.5vw;
    margin: 0.5vw;
    border:5px solid darkgoldenrod;
    border-radius:15px;
    background-color:whitesmoke;
}
.logo
{
    flex:1;
}
.bandeau
{
    flex:3;
    text-align: center;
}
.logoChorale
{
    width:5vw;
}
.bandeauChorale
{
    width:15vw;
}
nav
{
    margin-bottom: 0vw;
    padding:1vw;
    display:inline-flex;
    width: 30vw;
    justify-content: space-between;
    /*border: 1px solid black;*/
    height:0.5vw;
    font-size: 2vw;
}
a
{
    display:flex-end;
    line-height: 5vw;
}


/*******************************************************************************************************************
* Accueil                                                                                                           
********************************************************************************************************************/
.dessin-accueil
{
	display:block;
	width:90%;
	height:auto;
	margin-left: auto;
	margin-right:auto;
}
.message-bienvenue
{
    display:block;
    width:80%;
    height:auto;
    margin-left:auto;
    margin-right: auto;
    text-align: center;
    font-size: 90%;
    font-style: italic;
}
em
{
    font-size: 60%;
    font-style: italic;
}
/*******************************************************************************************************************
*l'association                                                                                                     *
********************************************************************************************************************/
.le-groupe
{
    display: block;
    height:fit-content;
    padding-left:2%;
    padding-right:2%;
    margin-left:0%;
    margin-right:0%;
    margin-bottom:0%;
    margin-top:3%;
    text-align: justify;
}
.association
{
    margin-left:2%;
    text-align: center;
    font-size:150%;
}
.photo-association
{
	display:block;
	width:60%;
	height:auto;
	margin-left: auto;
	margin-right:auto;
}
.asso-membre
{
    position: relative;
}
.p-asso-membre
{
    position:relative;
    font-size: 150%;
    font-weight: bold;
    text-align: center;
}
.div-asso-bureau
{
    position:relative;
    margin-top: -3vw;
    display: inline-block;
    margin-left:2%;
}
.div1-asso
{
    display:inline-block;
    margin-right: 6vw;
}
/****************************************************************************************************************
*La chorale                                                                                                     *
*****************************************************************************************************************/
.la-chorale
{
    display: block;
    height:fit-content;
    padding-left:2%;
    padding-right:2%;
    margin-left:0%;
    margin-right:0%;
    margin-bottom:0%;
    margin-top:3%;
    text-align: justify;
}
.chorale
{
    margin-left:2%;
    text-align: center;
    font-size:150%;
}
.photo-chorale
{
	display:block;
	width:60%;
	height:auto;
	margin-left: auto;
	margin-right:auto;
}
strong
{
    font-weight: bold;

}

/*************************************************************************************************************
*les photos                                                                                                  *
**************************************************************************************************************/
.les-photos
{
    display: block;
    height:fit-content;
    padding-left:2%;
    padding-right:2%;
    margin-left:0%;
    margin-right:0%;
    margin-bottom:0%;
    margin-top:3%;
    text-align: justify;
}
.photo
{
    margin-left:2%;
    text-align: center;
    font-size:150%;
}
.div-photo-slider
 {
     position:relative;
 
 }
.slider-p 
{
    width: 60%;
    height: auto;
    overflow: hidden;
    border-radius: 10px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 3%;
}
.slides-p
{
    width: 800%;
    height: auto;
    display:flex;
}
.input-p
{
    display: none;
}

.slide-p 
{
    width:12.5%;
    height: auto;
    transition: 2s;
}


.slide-p img 
{
    max-width: 100%;
    height: auto;

}


.navigation-manual-p
{
    position: relative;
    width: 20vw;
    padding-top: 2vw;
    display: flex;
    justify-content: center;
    margin:auto;

}

.manual-btn-p 
{
    border: 2px solid #40d3dc;
    padding: 5px;
    border-radius: 10px;
    cursor: pointer;
    transition: 1s;
}

/* espacement des boutons entre eux*/
.manual-btn-p:not(:last-child) 
{
    margin-right: 2vw;
}
/* changement de la couleur du bouton au survol*/
.manual-btn-p:hover 
{
    background: #dc4043;
}


#radio1-p:checked ~ .first 
{
    margin-left: 0px;
}

#radio2-p:checked ~ .first
{
    margin-left: -12.5%;
}

#radio3-p:checked ~ .first 
{
    margin-left: -25%;
}

#radio4-p:checked ~ .first 
{
    margin-left: -37.5%;
}
#radio5-p:checked ~ .first 
{
    margin-left: -50%;
}

#radio6-p:checked ~ .first 
{
    margin-left: -62.5%;
}

#radio7-p:checked ~ .first 
{
    margin-left: -75%;
}

#radio8-p:checked ~ .first 
{
    margin-left: -87.5%;
}
 
/*********************************************************************************************************
*Les videos                                                                                              *
**********************************************************************************************************/
.les-videos
{
    display: block;
    height:fit-content;
    padding-left:2%;
    padding-right:2%;
    margin-left:0%;
    margin-right:0%;
    margin-bottom:0%;
    margin-top:3%;
    text-align: justify;
}
.video
{
    margin-left:2%;
    text-align: center;
    font-size:150%;
}
.div-video-slider
 {
     position:relative;
 }
.slider-v 
{
    width: 60%;
    height: auto;
    overflow: hidden;
    border-radius: 10px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 3%;
}
.slides-v
{
    width: 800%;
    height: auto;
    display:flex;
}
.input-v
{
    display: none;
}

.slide-v 
{
    width:12.5%;
    height: auto;
    transition: 2s;
}


.slide-v img 
{
    max-width: 100%;
    height: auto;
}
.video-container
{
  width: 100%; /* Largeur souhaitée de la vidéo*/
  /*height:24.43vw;*/ /* Hauteur souhaitée de la vidéo*/
}
.navigation-manual-v
{
    position: relative;
    width: 20vw;
    padding-top: 2vw;
    display: flex;
    justify-content: center;
    margin:auto;

}

.manual-btn-v 
{
    border: 2px solid #40d3dc;
    padding: 5px;
    border-radius: 10px;
    cursor: pointer;
    transition: 1s;
}

/* espacement des boutons entre eux*/
.manual-btn-v:not(:last-child) 
{
    margin-right: 2vw;
}
/* changement de la couleur du bouton au survol*/
.manual-btn-v:hover 
{
    background: #dc4043;
}


#radio1-v:checked ~ .first 
{
    margin-left: 0px;
}

#radio2-v:checked ~ .first
{
    margin-left: -12.5%;
}

#radio3-v:checked ~ .first 
{
    margin-left: -25%;
}

#radio4-v:checked ~ .first 
{
    margin-left: -37.5%;
}
#radio5-v:checked ~ .first 
{
    margin-left: -50%;
}

#radio6-v:checked ~ .first 
{
    margin-left: -62.5%;
}

#radio7-v:checked ~ .first 
{
    margin-left: -75%;
}

#radio8-v:checked ~ .first 
{
    margin-left: -87.5%;
}
 
/*****************************************************************************************************
*Le calendrier                                                                                       *
******************************************************************************************************/
.div-calendrier
{
    display: block;
    height:fit-content;
    padding-left:2%;
    padding-right:2%;
    margin-left:0%;
    margin-right:0%;
    margin-bottom:0%;
    margin-top:3%;
    text-align: justify;
}
.calendrier
{
    margin-left:2%;
    text-align: center;
    font-size:150%;
}
.table-calendrier
{
    margin-top: 5%;
    margin-left:auto;
    margin-right: auto;
    width: 95%;
    font-size: 1.5vw;
    border: 1px solid black;
}
thead
{
    background-color: aqua;
    text-align: center;
}
.tbody-calendrier
{
    text-align: center;
    line-height: 2;
}
.td-date
{
    width:10%;
}
.td-heure
{
    width:10%;
}
.td-lieu
{
    width:25%;
}
.td-representation
{
    width:40%;
}
.td-participation
{
    width:15%;
}
/*********************************************************************************************************
*Nous contacter                                                                                          *
**********************************************************************************************************/
.div-contact
{
    position:relative;
    padding-top: 3vw;
    padding-left: 1vw;
    padding-right: 1vw;
    font-size:2vw;
}
.h1-contact
{
    margin-left:2%;
    text-align: center;
    font-size:150%;
    color:red;
}
#contact
{
    border: 1px solid black;
}
#message
{
    width: 70vw;
    height:30vh;
}
#email
{
    width:30%;
}
#button-contact
{
    width:10%;
    font-size: 2vw;
}

/********************************************************************************************************
*Inscription                                                                                            *
*********************************************************************************************************/
.div-inscription
{
    position:relative;
    padding-top: 3vw;
    padding-left: 1vw;
    padding-right: 1vw;
    font-size:2vw;
}
.inscription
{
    text-align: center;
    font-size:3vw;
    line-height:2;
}
.texte_italique
{
    color:orange;
    line-height: 4vw;
}
.texte_italique:hover
{
    color:red;
}
#message, #email, #name
{
    font-size: 2vw;
}

/*********************************************************************************************************
*Adherent                                                                                                *
**********************************************************************************************************/
.div-adherent
{
    position:relative;
    padding-top: 3vw;
    padding-left: 1vw;
    padding-right: 1vw;
    font-size:2vw;
}
.h1-adherent
{
    text-align: center;
    font-size:3vw;
    color:red;
}

#button-adherent
{
    width:15%;
    font-size:2vw;
    margin-bottom: 2vw;
}
#password
{
    font-size: 2vw;
}
.password-container
{
    position: relative;
    width: 300px;
}
.password-container input 
{
    width: 100%;
    padding-right: 40px;
}
.password-container .toggle-password
{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

/*********************************************************************************************************
Espace adherent                                                                                          *
**********************************************************************************************************/
.div-espace-adherent
{
    position:relative;
    padding-top: 3vw;
    padding-left: 1vw;
    padding-right: 1vw;
}
.h1-espace-adherent
{
    text-align: center;
    font-size:3vw;
    color:red;
}
.p-espace-adherent
{
    font-size: 2vw;
}
label
{
    font-size: 2vw; 
}
#categories, #subcategories
{
    font-size: 2vw;
}
.audioBtn,.audioPlayer
{
    font-size: 2vw;
    margin-top: 2vw;
    margin-bottom: 2vw; 
}
.audioPlayer
{
    width:7vw;
    height:auto;
}