/*Reset CSS*/
*{
    margin: 0px;
    padding: 0px;
    font-family: Avenir, sans-serif;
}

body             { /* Page Body */
	max-width: 100%;
	margin-left: auto;
    margin-right: auto;
	background-color:#F7F7F7;
	font-size:18px;
	color:#505050;
	text-align: center;
	}
	
#date_heure {
	font-size:16px;
}
	
h1	{
	text-align:center;
	font-family: verdana;
	font-size:30px;
	color:black;
	font-style:italic;
	background-color:#F7F7F7;
}

h2{
	text-align:center;
	font: bold;
	font-size:24px;
	color:black;
}

h3{
	text-align:center;
	font-size:20px;
	color:black;
}

h5 {
	text-align:center;
	font-size:18x;
	color:#000000;
}	
	
.texte {
	margin-left: auto;
    margin-right: auto;
	text-align:left;
	color:#000000;
	font-size:16px;
	max-width:1000px;
	width:90%;
}

.textetitre {
	margin-left: auto;
    margin-right: auto;
	text-align:left;
	color:#000000;
	font-size:18px;
	max-width:1000px;
	width:90%;
}

.suite {
	text-align:center;
	color:#505050;
	font-size:16px;
	font-style:italic;
}

video {
	max-width:700px;
	width:90%;
}

fieldset {
	background-color:white;
	max-width:1000px;
	width:98%;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	}

.conteneur7 { 		
	width:100%;
	margin-left: auto;
    margin-right: auto;
	background-color:#F1f1f1;
	}
.conteneur7 	img {
	max-width:98%;
	
}	
.conteneur7 a{ 	
color:black;
}	
	
.conteneur8 { 
	width:100%;
	margin-left: 0px;
    margin-right: 0px;
	max-width: auto;
	background-color:#40E0D0;
	color: black;
	}
	
.conteneur9 { 
	width:100%;
	margin-left: 0px;
    margin-right: 0px;
	max-width: auto;
	background-color:#40e0d0;
	font-size:16px;
	font-stretch: ultra-condensed;
	color:black;
	}	
.conteneur9 a{ 	
color:black;
}
.conteneur9 	img {
	max-width:98%;
	
}
.conteneur10 fieldset {
	background-color:white;
	max-width:500px;
	width:98%;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	font-size:16px;
	font-stretch: ultra-condensed;
	color:black;	
	}	
	
.conteneur10 { 		
	width:100%;
	margin-left: auto;
    margin-right: auto;
	background-color:#F7F7F7;
	}
.conteneur10 a{ 	
color:black;
}	
.retour{
	text-align:center;
	color:white;
	font-size:16px;
	font-stretch: ultra-condensed;
	}
	
.retour a:hover{
	text-align:center;
	color:red;
	}	

.control {
	text-align:center;
	color:black;
	font-size:16px;
	font-stretch: ultra-condensed;
	}

/* Menu déroulant    Menu déroulant    Menu déroulant */
	
*	{
	margin:0px;
	padding:0px;
}

nav {
	width: 90%;
	max-width:1000px;
	margin: 0px auto;
	background-color:#40E0D0;
	position: sticky;
	top :0px;
}	
	
nav ul {
	list-style-type:none;
	text-align:center;

}	

nav ul li {
	float: left;
	width:33%;
	text-align:center;
	position: relative;


}

nav ul::after {
	content: "";
	display: table;
	clear: both;
}

nav a {
	display: block;
	text-decoration: none;
	color: black;
	border-bottom: 2px solid transparent;
	padding: 10px 0px;
}	

nav a:hover {
	color: blue;
	border-bottom: 2px solid gold;
}

.sous {
	display: none;
	box-shadow: 0px 1px 2px #CCC;
	background-color: #ffe599;
	position: absolute;
	width: 100%
	z-index: 1000;
	}

nav > ul li:hover .sous {
	display: block;
}

.sous li{
	float: none;
	width:100%;
	text-align: left;
	font-size:20px;
}

.sous a {
	padding:0px;
	border-bottom: none;
}

*sous a:hover {
	border-bottom: none;
	background-color: RGBa(200,200,200,0.1);	
	}

.deroulant > a::after{
    content:"";
    font-size: 12px;
}

.conteneur{
  margin: 50px 20px;
  height: 600px;
}
		
/* Fin déroulant */


/* Fondu fond d'écran */
.conteneur2{
	max-width: 600px;
	height: auto;
	margin: 50px auto;
	}
	
.d2{
	width: 90%;
	height: 0px;
	padding-top: 75%;
	margin: 50px auto;
	background-color: #505050;
	background-size: contain;
	animation: fondu 15s ease-in-out infinite both;
	border: 1px solid #505050;
	}
		
@keyframes fondu {
	0%{background-image:  url("https://www.jaclo.fr/c1.jpg");}
	20%{background-image: url("https://www.jaclo.fr/cad2.jpg");}
	40%{background-image: url("https://www.jaclo.fr/p3.jpg");}
	60%{background-image: url("https://www.jaclo.fr/a4.jpg");}
	80%{background-image: url("https://www.jaclo.fr/al5.jpg");}
	100%{background-image: url("https://www.jaclo.fr/ch1.jpg");}
	}

	/* Défilement    Défilement    Défilement    Défilement */
.d1{
	width: 1200px;
	height: 15px;
	background:url("https://www.jaclo.fr/jaclo123.jpg");
	background-size: contain;
	animation: defilement1 20s linear infinite;
	}
.conteneur1{
	overflow: hidden;
	max-width: 100%
	margin: 10px auto;
	}
	
@keyframes defilement1 {
	0%{transform: translate(0,0);}
	100%{transform: translate(-600px,0);}
	}
	/* Fin défilement */
	
	/* Images alignées */	
.conteneur3	{
	text-align: center;
	width: 90%;
	min-width: auto;
	max-width: auto;
    margin-left: auto;
	margin-right: auto;
	}
	
.prod {
	width: auto;
	height:auto;
		}
		
		/* Fin images alignées */
		
	
.conteneur4 {
    text-align: center;
	display :inline-block;
	font-size:16px;
	}
	
		
.info 	 { 
	text-align:center;
	color:#505050;
	font-family: Arial;
	font-size:16px;
		}
		
/*   SLIDER   */

#slider {
    position: relative;
    max-width: 100%;
    overflow: hidden;
    height: 400px;
}

#slides {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    max-height: 100%;
	    /*CSS3 keyframes animation*/
    animation-name: slide;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

#slides figure {
    display: inline-block;
    width: 100vw;
    max-height: 50%;
    margin: 0;
}

#slides figure img {
    width: 1000px;
    /*Centrer l'image verticalement si celle-ci ne peut être affichée totalement*/
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

#slides figure figcaption {
    position: absolute;
    bottom: 0;
    text-align: center;
    width: inherit;
    background-color: rgba(0,0,0,0.1);
    color: white;
}




@keyframes slide {
    0%, 15%, 100% {
        left: 0; /*1ère image*/
    }
    20%, 30% {
        left: -100vw; /*2ème image*/
    }
    35%, 45% {
        left: -200vw; /*3ème image*/
    }
    50%, 60% {
        left: -300vw; /*4ème image*/
    }
    65%, 75% {
        left: -400vw; /*5ème image*/
    }
    80%, 90% {
        left: -500vw; /*6ème image*/
    }







}