@font-face {
	font-family: "Arial";
	src: url('fonts/arial.ttf');	
}
@font-face {
	font-family: "Dubai Light";
	src: url('fonts/dubai-light.ttf');	
}

html {
	margin:auto;
	padding:auto;

}
body {
	font-family: Arial;
	font-size:  18px; 
	text-align: justify;
	letter-spacing: 0.5px;
	color: #000000;
	line-height: 1.6;
	margin:auto;
	padding:2%;
	width: 100%;
}
*{
	box-sizing: border-box;
}
h1 {
	color: #00007e;
	font-size: 28px; 
	margin-bottom: 30px;
	margin-top: 50px;
}
h1 a{
	color:#00007e;
	text-decoration: none;
}
h2 {
	color: #6599fe;
	font-size: 22px; 
}
h2 a {
	color: #6599fe;
	text-decoration: none;
}
h3 {
	color: #6599fe;
	font-size: 20px; 
}
img{
	max-width:100%;
	height:auto;
}
.entete img{
	width:100%;
	height:auto;
	float:center;
	clear: both;
	margin: 0px;
	padding-top: 10px;
	position:relative;
}
.legende {
	font-family: Arial; /*-------*/
	font-style: italic;
	font-weight: bold;
}
.legende_figure {
	font-family: Arial; /*-------*/
	font-style: italic;
	font-size:  14px;		
}
.ensavoirplus {
	color: #000000;
	font-weight : bold;
	padding-left: 10px;
	border: 1px solid;  
	border-color: #ff4c01;
	padding: 5px;
}
.ensavoirplus a {
	color: #000000;
}
.souligne {
	text-decoration: underline; 
}
.reference {
	font-size:  14px;	
}
.colonne_unique {
	width: 100%;
	padding:10px;
	margin-bottom: 50px;
	flex-direction: column;
	display: flex;
	align-items:center;
}
.colonne_unique img{
	text-align: right;
	width: 60%;
	height:auto;
}
.colonne_unique_bleue {
	width: 100%;
	padding:10px;
	margin-bottom: 5px;
	flex-direction: column;
	display: flex;
	align-items:center;
	background-color: #00007e;
	color: #ffffff;
	font-size: 24px;
	font-family: Dubai Light;
}
.colonne_unique_bleue h1{  
	color: #ffffff;  
}
.colonne_unique_bleue a {  
	color: #ffffff; 
	text-decoration: underline;
}
.colonne_unique_news {
	width: 100%;
	padding:10px;
	margin-bottom: 5px;
	flex-direction: column;
	display: flex;
	align-items:justify;
}
.colonne_unique_news a {  
color: black;  
text-decoration: underline;
}

.multi_justify{
	width: 100%;
	padding:0px;
	display: flex;
	align-items: justify;
	justify-content: space-around;
	flex-wrap: wrap;
}

/*----------------------------------------------Texte à gauche photo à droite qui remonte en mobile-------------------------------------------*/
.text_left_img_right {                
	width: 100%;
	height:auto;
	margin: 0px; 
	padding: 5px;
	float:left;
}
.text_left_img_right img{
	width:40%;
	height:auto;
	margin-top: 2%;
	padding: 5px;
	float: right;
}
.info {
	width:60%;
	padding-right:1%; 
	float: left;
}
.info h1 {
	font-size: 26px;
}
.info h2 {
	font-size: 22px;
}
/*----------------------------------------------2 colonnes image left, text justifie - pas de modif en mobile-------------------------------------------*/
.multi_stretch {
	width: 100%;
	gap:2%;
	display: flex;
	align-items: stretch;
}
.multi_stretch_encadre {
	width: 100%;
	gap:2%;
	display: flex;
	align-items: stretch;
	padding : 0.5%;
	border : solid;
	border-color : rgba(88, 88, 88, 0.5);
	border-width:thin;	
}
.multi_colonnes_justifie {
	/*width: 100%;*/
	max-width:46%;	
	margin: 0px;
	padding: 5px;
}
.multi_colonnes_justifie img{
	max-width:80%;
	margin: 0px;
	padding: 0px;
}
.info_moitie {
	width:100%;
}
.info_moitie h1 {
	font-size: 26px;
}
.info_moitie h2 {
	font-size: 22px;
}


/*----------------------------------------------Panneau de plusieurs types de cartes - en ligne en mobile-------------------------------------------*/
.panneau {
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
	display: flex;
	align-items: stretch; 
	justify-content: center;
}

.info_carte { 
	color: white;
	background-color: #808080;
	text-align: center;
	padding: 2px;
	margin: 10px 2px;
}
.info_carte h2 {
	color: #ffffff; 
	font-size: 22px;
}
.info_carte_blanche_center {
	width: 45%;
	margin: 10px;
	padding : 0.5%;
	border : solid;
	border-color : rgba(88, 88, 88, 0.5);
	border-width:thin;	
	text-align: center;
}
.info_carte_blanche_center h1 {
	text-align: center;
}
.info_carte_blanche {
	width: 45%;
	margin: 10px;
	padding : 0.5%;
	border : solid;
	border-color : rgba(88, 88, 88, 0.5);
	border-width:thin;	
}
.info_carte_blanche img{
	width: 100%;
	height:auto;
}
.info_carte_blanche video{
	width: 100%;
	height:auto;
}
.info_carte_blanche h2{
	text-align: center;
}
.info_carte_blanche_double {
	width: 90%;
	margin: 10px;
	padding : 0.5%;
	border : solid;
	border-color : rgba(88, 88, 88, 0.5);
	border-width:thin;	
}
.info_carte_blanche_double img{
	width: 100%;
	height:auto;
}
.panneau_logo {
	width: 90%;
	margin-top: 10px;
	margin-bottom: 10px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: baseline;
	gap: 2%;
}
.info_carte_logo {
	text-align: center;
	vertical-align : middle;
	padding: 2px;
	margin: 10px 2px;
	width: 20%;
	display: inline-block;
}
.info_carte_logo img{
	width: 50%;
	height:auto;
}
.info_carte_logo p, a{
	color: #000000; 
	text-decoration: none;
}
#tableau35 { 
		width: 70%;
}
div article {
	align: center;
}
/*-------------------------------------------MOBILE*/
@media only screen and (max-width: 960px) {
		h1 {
		font-size: 22px;
		}

		.sectiondouble { 
			flex-direction: column;
		}	
		.panneau {
			flex-direction: column;
		}	
		.panneau_logo {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: stretch;			
		}
		.info_carte_logo {
			width: 40%;
		}
		.info_carte_logo img{
			width: 40%;
			height:auto;
		}
		.text_left_img_right {
			float:none;
		}
		.text_left_img_right img{
			width:60%;
			height:auto;
			float:left;
			clear: both;
			margin-left: 20%;
			margin-right: 20%
		}
		.info{
			width:100%;	
			margin: 0px;
			padding-right:0px;
			float:center;
			clear: both;
		}					
		.info h1{
			font-size: 22px;
		}
		.info_moitie{
			width:100%;	
		}
		.info_moitie h1 {
			font-size: 22px;
		}
		.info_moitie h2 {
			font-size: 20px;
		}
		.info_carte_blanche {
		width: 100%;
		margin:2px 2px 0px Opx ;
		}
		.info_carte_blanche_center {
		width: 100%;
		margin:0;
		}
		#tableau35 { 
		width: 50%;
		}
}
/*------------------------------------------------------Menu haut -----------*/
header {
  width: 100%;
  	letter-spacing: 0px;
}
header img {
	float:left;
	margin: 0 0 0 5px;
	max-width: 20%;
	width: auto;
	height: auto;
}
#menu {	
	max-width:75%;
	float: right;
	list-style-type: none;
	font-size: 18px;
	line-height:30px;
	margin: 0;
	padding: 0;
	border: 0;
	position: relative;
	z-index: 200;
}
#menu li {
	float: left;
	list-style-type: none;
	text-align:center;
	margin: 10px;
	padding: 10px;
	position: relative;
}
#menu li a:link, #menu li a:visited {
	display: block;
	margin: 0;
	padding: 5px 5px;
	color:#00007e;
	text-decoration: none;
}
#menu li a:hover { 
	background-color:#00007e;
	color: #FFFFFF;
}
#menu li a:active { 
	color: #5F879D; 
}
#menu .sousmenu {
	display: none;
	list-style-type: none;
	font-size: 16px;
	letter-spacing: 0.2px;
	word-spacing: 0.8px;
	margin: 0;
	padding: 0;
	border: 0;
	position:absolute;
	z-index: 200;
}
#menu .sousmenu li {
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
}
#menu .sousmenu li a:link, #menu .sousmenu li a:visited {
	background-color: rgba(255, 255, 255, 0.9);
	color: #6599fe;
	margin-top: 0px;
	border: 0;
	text-decoration: none;
}
#menu .sousmenu li a:hover {
	background-color:#00007e;
	color: #FFFFFF;
}
#menu li:hover > .sousmenu { display: block; }

label {
  margin: 0 40px 0 0;
  font-size: 19px;
  line-height: 50px;
  display: none;
  width: 26px;
  float: right;
}
#hamburger {
  display: none;
}
/*-------------------------------------------MOBILE*/
@media only screen and (max-width: 960px) {
label {
    display: flex;
  }
#menu {
    width: 70%;
	font-size: 18px;
	color: #FFFFFF;
	background-color: #FFFFFF;
    display: none;
	flex-direction: column;
    clear: both;
  }

#menu li {
	text-align:left;
	margin: 10px;
	padding: 10px;
	border-bottom: 1px solid #6599fe;
	position:relative;
}
#menu a {
    clear: right;
    display: flex;
    margin: 0;
  } 
#menu .sousmenu {
	display:block;
	position:relative;
	left: 40px;
}
#hamburger:checked + #menu {
    display: flex;
  }
}
/*------------------------------------------------------fin menu haut -----------*/
/*------------------------------------------------------Menu bas -----------*/
footer {
	letter-spacing: 0px;
	margin: 0;
	padding-top : 5px;
	border-top:2px ridge #00007e;
}

.menubas {
	color: #00007e;
	float:right;
		
}
.menubas a:link{
	text-decoration:none;
	color: #00007e;
	font-size: 14px;

}
.menubas a:visited {
	color:  #00007e;
}
.menubas a:hover {
	color: #ff4c01;
}

#renvoihautpage{
	float:left;
	width:30px;	
}

#copyright {
	width:100%;
	text-align:center;
	color:  #00007e;
}
/*------------------------------------------------------fin menu bas -----------*/
/*---Page sitemap*/
#sitemap_menu{
	list-style-type:square;
	text-decoration:none;
	text-align:left;
}
#sitemap_menu a:link{
	text-decoration:none;
	color: #00007e;
}
#sitemap_menu a:visited{
	text-decoration:none;
	color: #6599fe;
}
#sitemap_menu a:hover {
	color: #ff4c01;
}
.sitemap_sousmenu{
	list-style-type: circle;
	font-size: small;
	font-weight: lighter;
	color: #00007e;
	text-decoration:none;
	text-align:left;
}
.sitemap_sousmenu a:link{
	text-decoration:none;
	color: #00007e;
}
.sitemap_sousmenu a:hover {
	color: #ff4c01;
}
/*---FIN Page sitemap*/

/*------------------------------------------------------------------------------Page Index ------------------*/
.slider-container {
	width:100%;
	float:center;
	clear: both;
	margin: 0px;
	padding-top: 10px;
	position:relative;
	overflow: hidden;  
 }
 .slider-container .slider {
	 display : flex; 
	 animation: versdroite 13s infinite; /*ease-in-out; */
 }
 .slider p {
	flex-shrink : 0;  
	padding: 0;
	width: 100%;
	text-align: center;
 }
@keyframes versdroite {
	0%, 20% { transform: translateX(0);} 
	25%, 45% { transform: translateX(-100%);}  
	50%, 70% { transform: translateX(-200%);} 
	75%, 95% { transform: translateX(-300%);}
	100% { transform: translateX(-400%);}
}

/*------------------------------------------------------------------------------Animation photos ------------------*/
#element11 {
      transition: 500ms linear; 
    }
#element11:hover {
	   transform: scale(1.5);
    }
#element12 {
      transition: 500ms linear; 
    }
#element12:hover {
	   transform: scale(1.5);
    }
#element13 {
      transition: 500ms linear; 
    }
#element13:hover {
	   transform: scale(1.5);
    }
#element14 {
      transition: 500ms linear; 
    }
#element14:hover {
	   transform: scale(1.5);
    }
#element15 {
      transition: 500ms linear; 
    }
#element15:hover {
	   transform: scale(1.5);
    }
#element16 {
      transition: 500ms linear; 
    }
#element16:hover {
	   transform: scale(1.5);
    }
#element17 {
      transition: 500ms linear; 
    }
#element17:hover {
	   transform: scale(1.5);
    }
#element2 {
      transition: 500ms linear; 
    }
#element2:hover {
	   transform: scale(1.1);
    }
#element3 {
      transition: 500ms linear; 
    }
#element3:hover {
	   transform: translateY(100px);
    }
#element4 {
      transition: 500ms linear; 
    }
#element4:hover {
	   transform: translateX(100px);
    }
#element51 {
    transition: border-width 0.5s ease, 500ms linear ; 
	border-width : thin;
    }
#element51:hover {
	   border-width:thick;
	   transform: scale(1.1);
    }
#element52 {
    transition: border-width 0.5s ease, 500ms linear ; 
	border-width : thin;
    }
#element52:hover {
	   border-width:thick;
	   transform: scale(1.1);
    }
#element53 {
    transition: border-width 0.5s ease, 500ms linear ; 
	border-width : thin;
    }
#element53:hover {
	   border-width:thick;
	   transform: scale(1.1);
    }
#element54 {
    transition: border-width 0.5s ease, 500ms linear ; 
	border-width : thin;
    }
#element54:hover {
	   border-width:thick;
	   transform: scale(1.1);
    }
#element55 {
    transition: border-width 0.5s ease, 500ms linear ; 
	border-width : thin;
    }
#element55:hover {
	   border-width:thick;
	   transform: scale(1.1);
    }
#element56 {
    transition: border-width 0.5s ease, 500ms linear ; 
	border-width : thin;
    }
#element56:hover {
	   border-width:thick;
	   transform: scale(1.1);
    }
#element6 {
      transition: background-color 0.5s ease; 
	  background-color: #ffffff; 
    }
#element6:hover {
	   background-color:#ff4c01;
    }
#element7 {
    transition: border-color 0.5s ease; 
	border-color : rgba(88, 88, 88, 0.5);
    }
#element7:hover {
	   border-color: #ff4c01;
    }
#element8 {
    transition: border-width 0.5s ease; 
	border-width : thin;
    }
#element8:hover {
	   border-width:thick;
    }