.sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #F9F5F5; overflow-x: hidden; transition: 0.2s; padding-top: 50px; text-align: left; } 
    .sidenav a { padding: 15px 8px 8px 15px; text-decoration: none; font-size: 16px; color: black; display: block; transition: 0.1s;}
    .sidenav .active {color: #4995CF; font-weight: bold;}
    .sidenav a:hover, .offcanvas a:focus{ color: #4995CF;} 
    .sidenav .closebtn { position: absolute; top: 0; right: 15px; font-size: 30px; margin-left: 80px; color: #4995CF;}
    ul {
    list-style-type: none;
    margin: 0;
    margin-top: 10px;
    padding: 0;
    overflow: hidden;
    background-color: white;
    border-bottom: 1px solid #4995CF;
    }
    
    li {
    float: left;
    }
    
    li a {
    display: block;
    color: black;
    text-align: center;
    padding: 8px 10px;
    text-decoration: none;
    text-align:center;
    font-size: 0.9em;
    font-weight: bold;
    }
    
    li a:hover:not(.active) {color: #4995CF; }
    
    .liactive {
    color: #4995CF;
    }
    .fetichimgrand { width: 25px; height: 25px; margin-top:-2px;}
    body {
    font-size : 100%;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    background-color: white;
    .menuh {width: auto; height: 35px;  float: right; margin-top: -8px; margin-right: 10px;}
    
    }
     .tete {
     padding-top: 12px;
     background-color: white;
     border-bottom: 1px solid #4995CF;
     height: 40px;
     width: 100%;
     position : fixed;
     margin-bottom: 10px;
     }
     .tetescroll {
     padding-top: 12px;
     background-color: white;
     border-bottom: 1px solid #CCCCCC;
     height: 35px;
     width: 100%;
     position: absolute;
     margin-bottom: 10px;
     text-align: center;
     }
	 .logo {
	 width: auto;
	 height: 37px;
	 margin-top: -5px;
	 margin-left: 15px;
	 margin-right: 0px;
	 }
	 .log {
	 margin: 0 auto;
	 width: 35;
	 height: 35px;
	 margin-top: -55px;
	 margin-left: 30px;}
	.fetichimg {
	float: right; margin-right: 15px; margin-top: -22px; width: 30px; height: 30px;
	}
	.fetichbar { 
	width: 70%; 
	border: 2px solid #CCCCCC;
	border-radius: 10px;
	font-size: 0.9em; 
	padding: 10px;
	text-align: center;
	margin : 0 auto;
	float: center;
	height: 50px;
	}
	.iconbtn {
	width: 20px;
	height: 20px;
	margin-bottom: -4px;
	}
	.fdroite {
	width: 12px;
	height: 12px;
	margin-left: 5px;
	}
	.fleche-droite {
	width: 20px;
	height: auto;
	margin-left: 15px;
	margin-bottom: -4px;
	}
	.toutlire {
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 0.8em;
	font-weight: bold;
	width: 110px;
	height: 25px;
	text-decoration:none;
	color : black;
	background-color: #F1F1F1;
	float: right;
	margin : 10px;
	border-radius: 25px;
	}
	.plus {
	width: 50px;
	height: 50px;
	margin-left: 15px;
	margin-bottom: -3px;
	}
	.imgsearch {
	float: right;
	margin: 0 auto;
	width: 30px;
	height: 30px;
	margin-left:5px;
	margin-top: 5px;
	margin-bottom: 5px;
	}
	.okbar {text-align: center;font-size: 0.9em; margin: 0 auto; margin-left:-2px; background-color: #8B4513; color: white; height: 50px; width: 55px; border: 0; border-radius: 10px;}
	 a {
	 text-decoration: none;
	 color: #36006F;
	 }
	 .a8b{
	 text-decoration: none;
	 color: #8B4513;
	 }
	 .aaa {
	 text-decoration: none;
	 color: #BDBDBD;
	 font-size: 0.9em;
	 }
	 .aa {
	 text-decoration: none;
	 color: #FFFFFF;
	 font-size: 1em;
	 }
	 .a42 {text-decoration: none; color:#424242;}
	 .ac {
	 text-decoration: none;
	 color: #004444;
	 font-size: 1em;
	 font-weight: bold;
	 }
	 #menud {
	 text-align: left;
	 padding: 50%;
	 margin-top:3px;
	 background-color: #E7E7E7;
	 width: 47%;
	 height: 200px;
	 min-height:200px;
	 border: 1px solid #CCCCCC;
	 float: right;
	 }
	 .contenu{
	 text-align: left;
	 padding: 10px;
	 margin: 0 auto;
	 background: linear-gradient(#FFFFFF, #EEECEC, #FFFFFF);
	 width: auto;
	 height: auto;
	 border: none;
	 font-size: 1em;
	 }
	 .contenusans {
	 text-align: left;
	 color: black;
	 padding: 0;
	 margin : 0 auto;
	 width: auto;
	 height: auto;
	 border: 0;
	 background-color: white;
	 line-height: 1.7em;
	 }
	 .souscontenu {
	 margin-left: 3%;
	 }
	 .proposition {
	 border: 1px solid #4E342E;
	 border-radius: 10px;
	 background-color: #FFFFFF;
	 color: #263238;
	 font-size: 1em;
	 width : auto;
	 max-width: 20em;
	 height: auto;
	 min-height: 1.5em;
	 max-height: 3.3em;
	 padding: 1%;
	 text-align: left;
	 float: center;
	 margin: 0 auto;
	 line-height: 1em;
	 }
	 .central {
	 text-align: center;
	 margin: 0 auto; 
	 }
	 .autheur {
	font-size: 0.8em;
	color: #050019;
	text-align: left;
	margin: 0 auto;
	padding: 2px;
	line-height: 1em;
	font-weight: bold;
	 }
	 .sommaire {
	 padding : 4%;
	 font-size: 1em;
	 background-color: #F5F5F5;
	 text-align: left;
	 border-radius: 15px;
	 }
	 
	 .troispoints{
	 color: #8B4513;
	 text-align: center;
	 font-size: 1.3em;
	 }
	 h5 {
	 text-align:left;
	 text-decoration: none;
	 margin-left: 1em;
	 }
	 .bouton1 {
	 float: center;
	 margin: 0 auto;
	 width: auto;
	 max-width: 500px;
	 border-radius: 25px;
	 font-size: 1em; 
	 background-color: #616161;
	 padding: 10px;
	 text-align: center;
	 color: white;
	 }
	 .boutonorange {
	 float: center;
	 margin: 0 auto;
	 width: auto;
	 max-width: 500px;
	 border-radius: 25px;
	 font-size: 1em; 
	 background-color: #8B0000;
	 padding: 10px;
	 text-align: center;
	 color: white;
	 }
	 .bouton2 {
	 margin: 0 auto;
	 float: center;
	 width: auto; 
	 max-width: 400px;
	 height: 25px;
	 font-size: 1em; 
	 background-color: black;
	 padding: 8px;
	 text-align: center;
	 color : white;
	 border-radius: 25px;
	 }
	 .bouton4 {
	 float: center;
	 width: auto; 
	 max-width: 160px;
	 border-radius: 25px;
	 font-size: 1em; 
	 background-color: #000038;
	 padding: 6px;
	 text-align: center;
	 color : white;
	 margin: 0 auto;
	 }
	 .bouton5 {
	 float: center;
	 width: auto; 
	 max-width: 180px;
	 border-radius: 25px;
	 font-size: 1em; 
	 background-color: #501A30;
	 padding: 6px;
	 text-align: center;
	 color : white;
	 margin: 0 auto;
	 }
	 .bouton3 {
	 float: center;
	 margin: 0 auto;
	 border: 1px solid #263238;
	 width: auto;
	 max-width: 700px; 
	 font-size: 1em; 
	 background-color: #FFFFFF;
	 padding: 10px;
	 text-align: center;
	 color: #263238;
	 }
	 .bouton33 {
	 float: left;
	 text-align: center;
	 margin: 5px;
	 width: 40%;
	 max-width: 350px; 
	 font-size: 1em; 
	 background-color: #5F1657;
	 padding: 10px;
	 color: white;
	 border-radius: 5px;
	 }
	 .bouton332 {
	 float: left;
	 text-align: center;
	 margin: 5px;
	 width: 40%;
	 max-width: 350px; 
	 font-size: 1em; 
	 background-color: #180056;
	 padding: 10px;
	 color:white;
	 border-radius: 5px;
	 }
	 .boutonp1 {
	 float: center;
	 margin: 0 auto;
	 width: 300px;
	 height: 20px;
	 border-radius: 25px; 
	 font-size: 1.1em; 
	 background-color: #8B4513;
	 padding: 10px;
	 padding-bottom: 13px;
	 text-align: center;
	 color: white;
	 }
	 .boutonp0 {
	 float: center;
	 margin: 0 auto;
	 width: 40px;
	 height: 40px;
	 border-radius: 50%; 
	 font-size: 35px; 
	 background-color: #8B4513;
	 padding: 2px;
	 padding-top: 5px;
	 text-align: center;
	 color: white;
	 }
	 .parenthese{
	 font-size : 0.8em;
	 color: #B22222;
	 margin-top: 1px;
	 margin-bottom: 2px;
	 text-align: left;
	 }
	 .orange {
	 text-decoration: none;
	 color: #B22222;
	 }
	 .titre {
	 font-size: 1em;
	 color: black;
	 text-align: center;
	 font-weight: bold;
	 border-left: 0px solid #CCCCCC;
	 color: white;
	 }
	 .tit {
	 font-size: 1em;
	 color: #616161;
	 text-align: center;
	 }
	 .titrage {
	 font-size: 1em;
	 color: white;
	 text-align: center;
	 padding: 1%;
	 margin: 0 auto;
	 background-color: #616161;
	 }
	 .vido {
	 width: auto;
	 min-width: 18em;
	 height: 7em;
	 }
	 
	 .pd {
	 text-align: left;
	 text-decoration: none;
	 color: #263238;
	 font-size: 0.7em;
	 padding: 0;
	 margin: 0;}
	 
	 .mail {
	 float: left;
	 padding: 4px;
	 border-radius: 5px;
	 height: 35px;
	 margin: 0 auto;
	 border: 1px solid #CCCCCC;
	 width: 66%; 
	 font-size: 0.9em; 
	 background-color: #FFFFFF;
	 text-align: left;
	 color: black;
	 }
	 .submit {
	 float: left;
	 margin: 0 auto;
	 border-radius: 5px;
	 height: 35px;
	 width: 90px;
	 margin-left: 4px;
	 font-size: 0.9em; 
	 background-color: #06306D;
	 padding: 4px;
	 text-align: center;
	 color: white;
	 border: 1px solid #06306D;
	 }
	 .form {
	 padding : 5%;
	 background-color: #F4EACF;
	 text-align: center;
	 width: auto;
	 float: center;
	 height: auto;
	 margin:0 auto;
	 border-radius: 10px;
	 }
	 .divf {
	 padding : 5px;
	 background: linear-gradient(#CCCCCC, #FFFFFF, #FFFFFF);
	 margin: 0 auto;
	 width: auto;
	 float: center;
	 height: 1060px;
	 border-radius: 10px;
	 border-left: 1px solid #f5f5f5;
	 border-right: 1px solid #f5f5f5;
	 border-bottom: 2px solid #DFDFDF;
	 }
	.dat {
	text-align: left;
	width: 100%;
	height: auto;
	posotion: abslotue;
	margin-bottom: 0;
	font-size: 0.5em;
	letter-spacing: 1px;
	font-weight: bold;
	color: black;
	}
	.digi {
	text-align: left;
	width: 100%;
	height: auto;
	posotion: abslotue;
	margin-bottom: 0;
	font-size: 0.5em;
	letter-spacing: 1px;
	font-weight: bold;
	color: #180056;
	}
	.actu {
	text-align: left;
	width: 100%;
	height: auto;
	posotion: abslotue;
	margin-bottom: 0;
	font-size: 0.5em;
	letter-spacing: 1px;
	font-weight: bold;
	border-top: 0px solid #cccccc;
	color: #5F1657;
	}
	h3 {border-left: 5px solid #4995CF; padding: 5px;}
	 
@media screen and (max-width: 480px) {
     .presentation {text-align: justify;font-size: 0.8em; color: #254348; padding : 1em;}
     .navgrand {display:none;}
     .contenusans {font-size: 0.9em; padding: 3%;}
     .contenu {font-size: 0.9em; padding: 3%;}
     
     .titrage {font-size: 0.9em}
     h1 {font-size: 1.4em;}
     h2 {font-size: 1.3em;}
     h3 {font-size: 1.1em;}
     
	 .menu2 { font-size: 0.8em; }
	 .menexo {
	 text-align: center;
	 color: black;
	 padding: 1px;
	 margin-top: 1%;
	 width: auto;
	 height: auto;
	 font-size: 1em;
	 }
	 .tit {
	 font-size: 0.8em;
	 color: #616161;
	 text-align: center;
	 }

	}	 
@media screen and (min-width: 481px) and (max-width: 800px) {
	.tete {display:none;}
	 .tetescroll {display:none;}
	ul { text-align: center; font-size: 1em;}
	.logogrand { width: auto; height: 30px; margin-top: -9px;  margin-right: 40px; margin-left: 30px;}
	
	h1 {font-size: 1.5em; line-height: 50px;}
	h2 {font-size: 1.2em;}
	h3 {font-size: 1.1em;}
	h5 { font-size: 1.5em; text-align: center;}
	.presentation {text-align: left;font-size: 0.9em; color: #254348; margin-left: 10px; max-width: 300px; margin: 0 auto;}
	.contenusans {font-size: 1em; padding : 2%; float: center; max-width: 700px;}
	.contenu {font-size: 0.9em; padding : 2%; float: center; max-width: 700px;}
	
	.titrage {font-size: 1em}
	.menu {max-width: 10em; max-height: 2em; font-size: 1.2em; margin: 1%; margin-left: 5%; padding: 1%; text-alin: center;}
	.menu2 { font-size: 1.2em; }
	.menumenu {font-size: 1.3em;}
	.menug {font-size: 1.4em; width: 45px; height: 90px; border: none;}

	}
	 @media screen and (min-width: 801px) {
	 .tete {display:none;}
	 .tetescroll {display:none;}
	 .favigrand {width: 17px; height: 17px; margin-left: 20px; margin-top: 1px;}
	 .logogrand { width: auto; height: 37px; margin-top: -7px; margin-left: 40px; margin-right: 100px;}
	 .presentation {text-align: left;font-size: 0.9em; color: #254348; margin-left: 10px; max-width: 300px; margin: 0 auto;}
	 
	 h1 {font-size: 1.5em; line-height: 50px;}
	 h2 {font-size: 1.2em;}
	 h3 {font-size: 1.1em;}
	 h5 { font-size: 1em; text-align: center;}
	 .contenusans {font-size: 1.1em; padding : 2%; float: center; max-width: 700px;}
	 .contenu {font-size: 1.1em; padding : 2%; margin: float: center; max-width: 700px;}
	 .menu {max-width: 13em; max-height: 2em; font-size: 1.5em; margin: 1%; margin-left: 2%;padding: 1%;}
	 .menu2 { font-size: 1.2em; }
	 .menumenu {font-size: 1.3em; margin: 0 auto;}
	 .menug {font-size: 1.4em; width: 45px; height: 90px; border: none; margin: 0 auto;}
	
	 }