/* BALISES GENERIQUES */

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
line-height:1em;
}

body{
margin: 0;
padding: 0;
height:100%;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
margin: 0;
color: black;
height:100%;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
overflow-x: scroll;
-ms-overflow-x: scroll;
letter-spacing:0.02em;

/* modifications possibles */
font-size: 1em;
line-height: 2;
font-weight: 400;

}

h1{
line-height: 2;
font-weight: 400;
font-size: 1em;
margin: 0;
padding-bottom:0em;
text-align:left;
}

h2 {
line-height: 2;
font-weight: 400;
font-size: 0.3em;
margin: 0;
padding-bottom:0em;
text-align:justify;


}

h3{
font-size: 1em;
text-align:justify;
line-height: 2;
font-weight: 400;

}

h31{
font-size: 0.6em;
text-align:right;
float:right;
padding-right:0.5em;

}

h32{
font-size: 0.8em;
text-align:center;
}


h33{
font-size: 0.5em;
text-align:center;
margin:0;
padding:0;
}

h4{
font-size:inherit;
margin: 0;
padding-bottom:1em;
text-align:left;
color:black;
}


h5{
line-height: 1em;
margin: 0;

display:block;	

/* modifications possibles */
font-size: 1em;	
}


h6 {
font-size: 1em;
text-align:left;
font-style:normal;
padding-bottom:1em;
}


h7{
font-size: 0.9em;
margin: 0;
padding-bottom:1em;
text-align:center;
color:black;
line-height: 2;
font-weight: 400;



}



p {

font-weight: 400;
line-height: 1.2em;
margin: 10;
padding-bottom:1em;
text-align:justify;
letter-spacing:0.02em;

/* modifications possibles */
font-size: 1.3em;
}

a {
line-height: auto;
margin: 10;
padding-bottom:1em;

/* modifications possibles */
color:black;
text-decoration:none;
font-size: 1em;
}

a:hover {
line-height: inherit;
margin: 10;

/* modifications possibles */

}

li {
list-style-type :none;	
text-align:left;
font-size:1.2em;
}

li a {
margin: 10;
padding-bottom:1em;
text-align:justify;

/* modifications possibles */
line-height: 1em;
font-size: 1em;

}



/* CONTENU CENTRAL */

#wrap{
position: relative;
height:100%;
margin:0;
padding:0;
}


/* MENU CENTRAL */

#nav {
display:inline;
position: relative;
border-bottom: 0px solid #ddd;
width: 100%;
margin-left: auto;
margin-right: auto;
line-height: 4em;
top:-500px;
padding:0px;
z-index:99999;

/* modifications possibles */
background-color:rgba(0,0,0,0.6);
text-align: center;
font-size: 14px;
font-style:normal;
}


#nav1 {
display:inline-block;
position:relative;
margin-left:5vw;
margin-right:5vw;

}


#nav2 {
display:inline-block;
position:absolute;
margin-right:0;
margin-left:0;
right:2vw;

}


#nav3 {
display:inline-block;
position:absolute;
margin-right:0;
margin-left:0;
left:2vw;
COLOR:WHITE;
font-size: 1.8em;
background-color:rgba(255,255,255,0);
}


.link, .link2, .linkfa { 
padding:5px 15px 5px 15px;
line-height:2em;
cursor:pointer;
white-space:nowrap;

/* modifications possibles */
color:rgba(255,255,255,1);
border-radius: 0px;
 font-variant: small-caps;

}




.linkactive,  .link2:active {
color:rgba(255,255,255,1);
border-bottom:1px;
border-bottom-color:white;
border-bottom-style:solid;

border-top:1px;
border-top-color:white;
border-top-style:solid;

}

.linkfa:active{
		transform: scale(1.5) ;

}




.link:hover, .link2:hover {
/* modifications possibles */
color:rgba(255,255,255,1);

border-bottom:1px;
border-bottom-color:white;
border-bottom-style:solid;

border-top:1px;
border-top-color:white;
border-top-style:solid;

}




/* BLOC D'ACCUEIL */
#header{
background:url(../images/ImagesFond/ImageFond-Page0.jpg) fixed; /* modification possible */
background-size : cover;
background-repeat : no-repeat;
background-position : 80%;
height:100vh;
padding:50px 0;
width: 100%;
z-index:9999;
padding-top:100px;
padding-bottom:100px;


/* modifications possibles */
font-size: 4em;
text-align: center;

}




.arrowbot {
/* modifications possibles */
color : white;
z-index:999;
}

#title {
padding-top:15vh;
height:90%;
text-align: justify;
visibility:relative;
margin-left:10vw;
margin-right:10vw;
   color: white;
    text-shadow: 1px 1px 1px #000000;
		 font-variant: small-caps;
}

#title h1 {
	line-height:1.2em;
	 font-variant: small-caps;
}



#title h2 {
	line-height:1.2em;
	 font-variant: small-caps;
}




/* BLOC PAGE */

#page{
z-index: 9999;
padding-top:relative;
margin:0;
bottom:0;
position: relative;
overflow:hidden;
font-size: 0.7em;
text-align: left; 
min-height:100vh;
}


.pageX, .pageALT {
z-index: 9999;
padding-top:10vh;
margin:0;
bottom:0;
position: relative;
width:100vw;
overflow:hidden;
min-height:100vh;
text-align:center;
padding-bottom:100px;
border-bottom:0px;
border-bottom-color:black;
border-bottom-style:solid;


}



/* SPECIFIC - PAGES 1 A 6 */

#page1{
	display:block;
/* modifications possibles */

background:url(../images/ImagesFond/ImageFond-Page1.jpg) fixed  ; 
background-color: white;
background-repeat : no-repeat;
 background-attachment: fixed;
max-height: 100%;
max-width: 100%;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
z-index:9999;


}

.active {
font-weight: bold;
color:rgba(161,40,0,0.7);
}
.active a {
  
  font-weight: bold;
color:rgba(161,40,0,1);
}

#page2{
display:block;
background:url(../images/ImagesFond/ImageFond-Page2.jpg) fixed ; 
/* modifications possibles */
background-color: white;
background-repeat : no-repeat;
max-height: 100%;
max-width: 100%;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
z-index:9999;

}

#page3{
display:block;
background:url(../images/ImagesFond/ImageFond-Page3.jpg) fixed ; 
background-color: white;
background-repeat : no-repeat;
max-height: 100%;
max-width: 100%;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
z-index:9999;

}

#page4{
display:block;
background:url(../images/ImagesFond/ImageFond-Page4.jpg) fixed ; 
/* modifications possibles */
background-color: white;
background-repeat : no-repeat;
max-height: 100%;
max-width: 100%;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
z-index:9999;


}

#page5{
display:block;
background:url(../images/ImagesFond/ImageFond-Page5.jpg) fixed ; 
/* modifications possibles */
background-color: white;
background-repeat : no-repeat;
max-height: 100%;
max-width: 100%;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
z-index:9999;

}

#page6{
display:block;
background:url(../images/ImagesFond/ImageFond-Page6.jpg) fixed ; 
/* modifications possibles */

background-color: white;
background-repeat : no-repeat;
max-height: 100%;
max-width: 100%;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
z-index:9999;
}

#page7{

/* modifications possibles */
background:url(../images/ImagesFond/ImageFond-Page7.jpg) ; 
background-color: white;
background-repeat : no-repeat;
max-height: 100%;
max-width: 100%;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
}



#page_groupes {
display:block;
/* modifications possibles */
max-height: 100%;
max-width: 100%;
background-color:black;
z-index:9999;
}


/* Liens de page à page */



/* BALISES GENERIQUES - PAGE */

/* Les pages - autres que les pages de lecteur audio et video - sont construites sur le même modele avec des blocs inner et aside.
Les blocs .inner intégrent les contenus. Les blocs .aside permettent d'afficher des images. */

.inner{
position:relative;
width:60vw;
min-width:100px;
float:left;
padding:1em;
margin-bottom:1em;
margin-left:10vw;
margin-right:10vw;

line-height:1em;
overflow-wrap:normal;

/* modifications possibles */
background:rgba(250,250,250,0.8);
color:rgba(0,0,0,0.8);

border-color:rgba(0,0,0,1);
border:0px;
border-style:solid;

 border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;

z-index:1;

}


.inner_projet {
position:relative;
width:60vw;
min-width:100px;
float:left;
padding:1em;
margin-bottom:0em;
margin-left:10vw;
margin-right:10vw;

line-height:1em;
overflow-wrap:normal;

/* modifications possibles */
background:rgba(250,250, 250,0.8);
color:rgba(0,0,0,0.8);
border-color:rgba(0,0,0,0.8);
border-style:none;
border-radius:0em;
z-index:1;

}


.inner_projet h1 {
margin-top:0em;
font-size:1.5em;	
text-align:left;
padding-bottom:0.8em;
line-height:1em;
text-align:justify;
	
	
}

.aside {
position:static;
width:6vw;

float:left;
padding:1em;
margin-bottom:1em;
margin-left:10vw;
margin-right:10vw;

line-height:1em;


/* modifications possibles */
background:rgba(250,250, 250,0.8);
color:rgba(0,0,0,0.8);
border-color:rgba(0,0,0,0.8);
border-style:none;
border-radius:0em;
z-index:2;
}


	


.innertitle{
position:relative;
width:60vw;
min-width:100px;
float:left;
padding-left:1em;


margin-left:10vw;
margin-right:10vw;
margin-top:10vh;
overflow-wrap:normal;

/* modifications possibles */
background:rgba(250,250, 250,0.8);
color:rgba(0,0,0,1);
text-transform:uppercase;
text-align:left;
font-size:2em;


border-color:rgba(0,0,0,1);
border:0px;
border-style:solid;
border-bottom-color: rgba(0,0,0,1);
border:0;
border-bottom-style:solid;


 border-top-left-radius: 3px;
  border-top-right-radius: 3px;

padding-top:0.5em;
padding-bottom:0em;
}





.soustitre {
font-size:1em;	
text-align:justify;
padding:1em;
margin-left:8em;

}

.soustitre h1 {
font-size:1.5em;	
text-align:left;
padding-bottom:0.8em;
line-height:1em;
text-align:justify;
}

.soustitre li a {
font-size:0.8em;	
text-align:left;
padding-bottom:0.5em;
text-align:justify;

}




.agenda_container {
display:flex;
display: -webkit-flex;

-webkit-flex-flow: row wrap; 
flex-flow: row wrap;
width:60vw;


float:left;
padding:1em;
margin-bottom:1em;
margin-left:10vw;
margin-right:10vw;

line-height:1em;
overflow-wrap:normal;

/* modifications possibles */
background:rgba(250,250, 250,0.8);
color:rgba(0,0,0,0.8);
border-color:rgba(0,0,0,0.8);
border-style:none;
border-radius:0em;
z-index:1;
}





.inner_agenda {
flex: 1 1 auto;
-webkit-flex :  1 1 auto;
margin: 1em;
width:100vw;
min-width:100px;
}

.inner_agenda .inside img {
position:relative;
width: 8em;
height: auto;
overflow:hidden;
float:left;


/* modifications possibles */

}

.inner_agenda:hover {
	background:rgba(250,250, 250,0.3);
	
}


.soustitre_agenda {
font-size:1em;	
text-align:justify;
padding:1em;
margin-left:9em;

}

.soustitre_agenda h1 {
font-size:1.2em;	
text-align:justify;
padding-bottom:0.5em;
line-height:1em;

}


.soustitre_agenda h4 {
font-size:1.2em;	
text-align:justify;
padding-bottom:0.5em;
line-height:1em;

}




.inner_projet2 {
position:relative;
width:60vw;
min-width:100px;
float:left;
padding:1em;
margin-bottom:0em;
margin-left:10vw;
margin-right:10vw;

line-height:1em;
overflow-wrap:normal;

/* modifications possibles */
background:rgba(250,250, 250,0.8);
color:rgba(0,0,0,0.8);
border-color:rgba(0,0,0,0.8);
border-style:solid;
border:0;
z-index:1;

}




.soustitre2 {
font-size:1.1em;	
text-align:justify;
padding:1em;
border-bottom-color: rgba(255,255,255,1);
border:1;
border-bottom-style:solid;

}

.soustitre2:first-child {
border-top-color: rgba(255,255,255,1);
border:0;
border-top-style:solid;
}

.soustitre2:last-child{
border-bottom-color: rgba(255,255,255,1);
border:0;
border-bottom-style:solid;
}


.nomciegroup{
text-transform: uppercase;
font-weight:bold;
}


.inner a {
line-height: auto;
margin: 10;
padding-bottom:1em;

/* modifications possibles */
color:black;
text-decoration:underline;
font-size: 1em;
}

.inner a:hover {
line-height: auto;
margin: 10;
padding-bottom:1em;

/* modifications possibles */
color:black;
text-decoration:none;
font-size: 1em;
}



.inner li {
line-height: auto;
margin: 10;
padding-bottom:0.8em;

/* modifications possibles */
color:black;
text-decoration:none;
font-size: 1.2em;
}



.aside img {
position:relative;
width: 12em;
height: 12em;
overflow:hidden;
float:right;

/* modifications possibles */
border-radius:0em; /* gestion de l'arrondi du carré */
-webkit-border-radius:0em;
-moz-border-radius:0em;
border-color:rgba(0,0,0,0.8); /* couleur bordure */
border-style:ridge; /* style bordure */
filter: sepia(0.3);
-webkit-filter: sepia(0.3);
filter: brightness(0.9);
-webkit-filter: brightness(0.9);
filter: contrast(0.9);
-webkit-filter: contrast(0.9);
}

.inside {
position:relative;

float:left;
margin-left:0;
margin-right:0;

padding:0.5em;
padding-bottom:1em;
z-index:1000;

/* modifications possibles */
color:rgba(0,0,0,0.8);


}

.inside img {
position:relative;
width: 8em;
height: auto;
overflow:hidden;
float:left;


/* modifications possibles */
border-radius:0em; /* gestion de l'arrondi du carré */
-webkit-border-radius:0em;
-moz-border-radius:0em;
border-color:rgba(0,0,0,0.8); /* couleur bordure */
border-style:none; /* style bordure */
filter: sepia(0.3);
-webkit-filter: sepia(0.3);
filter: brightness(0.9);
-webkit-filter: brightness(0.9);
filter: contrast(0.9);
-webkit-filter: contrast(0.9);
}


.mur_albums_container {
display:flex;
display: -webkit-flex;
-webkit-flex-flow: row wrap; 
flex-flow: row wrap;
width:60vw;	
 padding:0em;
margin-left:10vw;
margin-right:10vw;


/* modifications possibles */
color:rgba(0,0,0,0.8);

z-index:1;
}

.mur_albums {
flex: 1 1 auto;
-webkit-flex :  1 1 auto;

z-index:0;

/* modifications possibles */
color:rgba(0,0,0,0.8);
 position: relative;
 padding:0;
 margin:0;
 float:left;
}

.mur_albums img {
	display:block;
	min-width:40px;
max-width: 20vw;
width:20vw;
height: auto;
margin:0;
background:transparent;
padding:0.5em;
}

.overlay {
  position: absolute;
  bottom: 0;

  color: #f1f1f1;
  width: 20vw;
  transition: .2s ease;
  opacity:0;
  color: white;
  font-size: 1.7em;
  text-align: center;
  height:0%;
  padding-top:30%;
  
  text-shadow: 1.5px 1.5px 2.5px black; 


}



.overlay h1 {
font-size: 1em;
text-align:center;
line-height:0.8em;
padding-bottom:1em;
 font-variant: small-caps;


}


.overlay a {
font-size: 1em;
text-align:center;
line-height:0.8em;
padding-bottom:1em;
color : white;

}



.overlay h2 {
font-size: 0.8em;
text-align:center; 

	
}

.overlay h3 {
font-size: 0.6em;
text-align:center; 
	
}


	

/* When you mouse over the container, fade in the overlay title */
.mur_albums:hover .overlay {
  opacity: 1;
  height:100%;

}

.mur_albums:hover img {
	display:block;
	min-width:40px;
max-width: 20vw;
width:20vw;
height: auto;
padding:0em;
border:0;
 transition: .2s ease;
  -webkit-filter: brightness(110%); /* Safari */
    filter: brightness(110%);
 
}


.mur_albums:nth-child(odd) .overlay {
  background:rgba(0,0,0,0.6);
}



.mur_albums:nth-child(even) .overlay {
  background:rgba(0,0,0,0.6);
}




#footer {
display:block;
position : fixed;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
margin-top:0;
margin-bottom:0;
padding:0;
height:auto;
bottom:0;
z-index:99990;
overflow:hidden;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;

/* modifications possibles */  
width:100%; /* largeur du lecteur */
background-color:rgba(255,255,255,0.6);
border-radius:0; /* gestion de l'arrondi des coins du lecteur */  
text-align:center;
color:black;
}


#footer a, .footer {
color: white;
cursor:pointer;	
}

#footer a:hover {
	color:rgba(255,125,0,1);

}

#footer a:active {
	color:rgba(255,125,0,1);

}



#actualites {
display:block;
position : fixed;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
margin-top:0;
margin-bottom:0;
padding:0;
height:0vh;
bottom:0;
z-index:99990;
overflow:hidden;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;

/* modifications possibles */  
height:5vh;
width:100%; /* largeur du lecteur */
background-color:rgba(0,0,0,1); /* couleur du lecteur */ 
border-radius:0; /* gestion de l'arrondi des coins du lecteur */  
text-align:center;
}








/* A TRIER */




.boutonplus
{
 font-size: 1em;
text-align:left;
font-style:normal;
padding-bottom:1em;
text-decoration:underline;
cursor:pointer;
width:inherit;

}
.boutonplus:hover
{
   
}
.texte
{
display:none;
padding-left:8em;

  
}
.texte:hover
{
 
}


.fancybox-slide--video .fancybox-content {
	width  : auto;
	height : auto;
	max-width  : 80%;
	max-height : 80%;
z-index:999999;
}



/* Lecteur Audio */

#footer_audio {
	
display:block;
position : fixed;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
margin-top:0;
margin-bottom:0;
padding:0;
height:auto;
bottom:-400px;
z-index:99990;
overflow:hidden;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
	
}



#video-fond {
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
#video-fond > video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
/* 1. Pas de support d'object-fit */
@media (min-aspect-ratio: 16/9) {
  #video-fond > video {
    height: 300%;
    top: -100%;
  }
}
@media (max-aspect-ratio: 16/9) {
  #video-fond > video {
    width: 300%;
    left: -100%;
  }
}
/* 2. En cas de support d'object-fit, écrase les règles en (1) */
@supports (object-fit: cover) {
  #video-fond > video {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
  }
}


.fa-info-circle, .fa-headphones, .fa-video, .fa-plus {
font-size:1.5em;
padding-left:0.5em;
padding-right:0.5em;
}
.fa-info-circle:hover, .fa-headphones:hover, .fa-video:hover, .fa-plus:hover, .fa-home:hover, .fa-angle-double-left:hover, .fa-facebook:hover, .fa-globe:hover {
	transform: scale(1.5) ;
}

.fa-globe {
font-size:1.7em;	
}

.titre_accordeon
{
	
position:relative;
width:60vw;
min-width:100px;
float:left;
padding:1em;
margin-top:1em;
margin-bottom:0em;
margin-left:10vw;
margin-right:10vw;

line-height:1em;
overflow-wrap:normal;

/* modifications possibles */
background:rgba(250,250,250,0.8);
color:rgba(0,0,0,0.8);


border-color:rgba(0,0,0,1);
border:0px;
border-style:solid;
border-bottom-color: rgba(0,0,0,1);
border:0;
border-bottom-style:solid;


 border-top-left-radius: 3px;
  border-top-right-radius: 3px;





z-index:1;
}

.titre_accordeon h1 {
font-size : 1.5em;	
}

.accordeon {
display:none;	
position:relative;
width:60vw;
min-width:100px;
float:left;
padding:0em;
margin-top:0em;

margin-bottom:1em;
line-height:1em;
overflow-wrap:normal;

/* modifications possibles */


border-color:rgba(0,0,0,1);
border:0px;
border-style:solid;

 border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;


z-index:1;


}

.accordeon_on {

display:block;	
position:relative;
width:60vw;
min-width:100px;
float:left;
padding:0em;
margin-top:0em;

margin-bottom:1em;
line-height:1em;
overflow-wrap:normal;

/* modifications possibles */


border-color:rgba(0,0,0,1);
border:0px;
border-style:solid;

 border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;


z-index:1;


}

.link:hover::after {

 animation : changeLetter 2s linear infinite alternate;
}


@keyframes changeLetter {
  0% {
    content: 'A';
  }
  100% {
    content: 'B';
  }
}