/** Styles perso */
body { 
background:rgb(27,63,149) url("img/test5.png") no-repeat center center fixed;
-webkit-background-size: cover; /* pour Chrome et Safari */
  -moz-background-size: cover; /* pour Firefox */
  -o-background-size: cover; /* pour Opera */
  background-size: cover; /* version standardisée */ 
  font-family: "Raleway", sans-serif; 
  
  min-height: 100vh; /* toute la hauteur du viewport (compatible IE9+) */
}

nav{
    width: 90%;
    margin: 0 auto;
    background:#ffea00;
    position: fixed;
    top: 0px;
	z-index:200;
}
.conteneur-nav{
    position: absolute;
    width: 100%;
	border-radius:5px;
}
nav input[type=checkbox]{
    display: none;
}
nav label{
    display: inline-block;
    width: 100%;
    padding: 10px 0px;
    text-align: center;
    background-color: #ffea00;
}
nav ul{
    display: none;
    list-style-type: none;
    background-color: rgba(27,63,149,0.95);
}
nav input[type=checkbox]:checked + ul{
    display: flex;
    flex-flow : column wrap;
}
nav ul li{
    flex: 1 1 auto;
    text-align: left;
}
nav > div > ul > li > a{
    color: #ffea00;
}
nav a{
    display: block;
    text-decoration: none;
    color: rgb(27,63,149);
    padding: 10px 0px;
}
nav a:hover{ color:whitesmoke; }
.sous{
    display: flex;
    flex-flow: column wrap;
    z-index: 1000;
}

.sous li{
    flex: 1 1 auto;
    text-align: left;
}
.sous a{
    padding: 10px;
    background-color: #ffea00;
}

@media screen and (min-width: 980px){
    .conteneur-nav{
        position: static;
    }
    nav label, nav input{
        display: none;
    }
    nav input[type=checkbox]:checked + ul, nav ul{
        display: flex;
        flex-flow: row wrap;
        background-color: rgba(255, 255, 255, 0.9);
    }
    nav ul li{
        position: relative;
    }
    nav > div > ul > li > a{
        color: rgb(27,63,149);
		font-size:1.8rem;
		font-weight:600;
    }
    nav a{
        border-bottom: 2px solid transparent;
		transition: all 1s ease-out;
		
    }
    nav a:hover{
        background-color: rgba(255,234,0,0.5);
		color:rgb(27,63,149);
        border-bottom: 2px solid rgb(27,63,149);
		text-decoration:none;
    }
    .sous{
        display: none;
        box-shadow: 0px 1px 2px #CCC;
        background-color: white;
        position: absolute;
        width: 100%;
    }
    nav > div > ul li:hover .sous{
        display: flex;
        flex-flow: column wrap;
    }
    .sous a{
        border-bottom: none;
        background-color: white;
    }
    .sous a:hover{
        border-bottom: none;
        background-color: RGBa(200,200,200,0.1);
    }
    .deroulant > a::after{
        content:" ▼"; 
    }
}


iframe { border:none;}


	.bleu { color:#1D3E94; } /** rgb(29, 62, 148) **/
	.jauneb { color:#ECE30D; } /** rgb(236, 227, 13); **/
	.jaune { color:#FFFFCC; } /** rgb(255, 255, 204) **/
	.gris { color:#566A6F; } /** rgb(86, 106, 111) **/
	.grisVert { color:#838F51; } /** rgb(131, 143, 81) **/
	.grisBleu { color:#647C6C; }  /** rgb(100, 124, 108) **/
	.archives { background:rgba(204, 204, 204,0.5); } /** rgb (204, 204, 204) **/
.warning { background:orangered; padding:5px; }
.hr { background:#ECE30D; }

#entete { position:fixed; top:70px; }
#entete h1 { font-size:4rem;}
.slogan { font-size:2rem;}
#entete h1, .slogan { color:#ffea00;  text-shadow: 1px 1px 0px rgba(240, 255, 255, 1); }

 .mabox {
  display: flex;
  align-items: center;
}



#container { 
  height:100%; position: relative; top:16em; }
  
  
#wrapper { width:90%; background:rgba(255, 255, 255, 0.9); border-radius:10px; padding:2.5rem;  }

#wrapper h1 { font-size:2.2rem; color:#1D3E94; font-family: "Righteous", cursive; text-shadow: 1px 1px 0px rgba(240, 255, 255, 0.8); border-bottom:2px solid #1B3F95;}

#wrapper h2 { font-size:2rem; color:#1D3E94; font-family: "Righteous", cursive;}

.titre { font-size:1.4em; color:#ECE30D;}
.titreAntenne {font-size:1.4em; font-family: "Righteous", cursive;}

li.lienbeforeM a { 
text-decoration:none;
background-color:#FFFFCC; color:#1D3E94; font-size:1.6rem; padding:2px;
transition-property: background-color;
transition-duration: 1s;
}
li.lienbeforeM a:hover  { 
background-color:rgba(29, 62, 148,0.8); color:#FFFFCC;
}


@media screen and (max-width: 600px) {
#wrapper { width:100%;  border-radius:5px; padding:1.5rem;  }	
#wrapper h1 { font-size:1.8rem; }
#wrapper h2 { font-size:1.6rem; } 
.lienbeforeM a {font-size:1.4rem;}

}

.fondBleu { border:1px solid #1D3E94; border-radius:0.5em; padding:1em;}
.fondJaune { border:1px solid #ECE30D; border-radius:1em; padding:1em;}
.fondNoir { background: #1D3E94; color:#FFF8DC; border-radius:1em; padding:1em;}
.fondNoir2 { background: #1a1a1a; color:#FFF8DC; }

.fondBlanc { background:rgba(255, 255, 255, 0.9); border-radius:10px; padding:2.5rem;}

.thumb { width:100px; }
.thumb2 { width:50px;}

.ytplayer { width:480px; max-width:100%;
height:270px; border:none;}

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
.video-wrapper { width: 480px; max-width: 480px;
height:270px; }
	

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border:none;
}

/* LE POP UP */
.cModal {
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
 
  background: rgba(0, 0, 0, 0.8);
  opacity:0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
  overflow: scroll;
}
 
.cModal:target {
  opacity:1;
  pointer-events: auto;
}
 
.cModal:target > div {
  margin: 1% auto;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}
 
.cModal > div {
  max-width: 80%;
  position: relative;
  margin: 1% auto;
  padding: 8px 8px 8px 8px;
  border-radius: 5px;
  background: #eee;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}	

@media screen and (max-width: 600px) {
.cModal > div { max-width:100%; }	
}


.card {
    border: 1px solid #bac6d3;
    border-radius: 8px;
    padding: 1rem;
}

/********************************
* Carousel styles
*********************************/
.carousel-items {
    display: flex;
    overflow-x: scroll;
    padding: 1rem 0;
    scroll-snap-type: x mandatory;
}

.carousel-item {
    flex: 1 0 250px;
    margin-left: 1rem;
    scroll-snap-align: start;
}
li.carousel-item { list-style:none;}

::-webkit-scrollbar-track {
    background-color: #F5F5F5;
}

::-webkit-scrollbar {
    height: 6px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb {
    background-color: #3d4852;
    border-radius: 3px;
}

/********************************
* Breakpoints
*********************************/
@media screen and (min-width: 576px) {
    .carousel-item {
        flex-basis: 300px;
    }
}

@media screen and (min-width: 992px) {

    .carousel-item {
    flex-basis: 325px;
    }
}

@media screen and (min-width: 1280px) {
    .carousel-item {
    flex-basis: 450px;
    }
}