body {
	background:linear-gradient(white,#bcdef5);
/*	max-width: 1600px;  */
	margin-left: auto;
	margin-right: auto;
	width: 98%; /* largeur obligatoire pour être centré */
	min-width:600px;
	margin-left :1%;
	margin-right:1%;
	font-family: verdana;
	height : auto;
}
/* ------------------------------- Style du header ------------------------------------------------------- */
header{	
				/*
				border-width: 1px;
				border-style: ridge;
				border-color: #5087C5;
				border-radius : 10px; 
				*/
				padding-left: 1%;
				padding-right: 1%;
				padding-top : 10px;
				padding-bottom : 1px;
				
		/* --------- Style de la 1ere case gauche du header contenant le logo --------- */		
}			
		.head_1{
				display: inline-block; 		/*permet de placer ce 1er bloc côte à côte du 2nd */
				vertical-align: top;		/* aligne les 2 blocs au dessus */
				text-align: center;
				/*width : 22% ;*/
				width : 250px;
			/*------------encadrement pour réglage mise en page----------------*/
				/*
				border-width: 1px;
				border-style: ridge;
				border-color: #5087C5;
				border-radius : 10px; 
				padding-left: 1%;
				padding-right: 1%;
				padding-top : 10px;
				padding-bottom : 1px;
				*/
			/*------------------fin encadrement------------------------*/
			}
				.logo{						/* position logo haut*/
					width:150px;				
				}
		

		/* --------- Style de la 2eme case du header contenant le menu --------- */		
		.head_2{
				display: inline-block; 		/*permet de placer ce 2° bloc côte à côte du 1er */
				vertical-align: top;
				width: 70%;
				/*height: auto; */	
				height : auto;
				/*padding : 0% 0% 0% 0%;*/ /* haut | droit | bas | gauche */
				margin-top : 40px; 
				/*------------encadrement pour réglage mise en page----------------*/
					/*
					border-width: 1px;
					border-style: ridge;
					border-color: #5087C5;
					border-radius : 10px; 
					*/
					/*padding-left: 1%;
					padding-right: 1%;
					padding-top : 10px;
					padding-bottom : 1px;*/
				/*----------fin encadrement--------------*/
				
		}
			a {								/* couleur et soulignement texte menu  */
				color : #225699;
				text-decoration: underline;
			}
			a:hover {			/* changement couleur menu au survol souris */ 
			color:white;
			background-color: #FFA500;
			font-size : 1em;
			
			}
			nav ul.entete{ 						/* bandeau blanc du menu tout en haut */
					text-align: center; 		/* le texte du menu est centré */
					height : auto;
					color:white;					
		}
			nav li.entete{
					display:inline-block; 		/* affiche le menu sur une ligne */
					width:15%;
					vertical-align: middle;
					min-width : 120px;
					max-width : 150px;
					background-color: #FCF7EC; 
					/* color:white; */
					height : auto;
					font-size : 0.9em;
					/*
					border-width: 1px;
					border-style: ridge;
					*/
					border-color: #5087C5;
					border-radius : 2px; 
					padding-left: 0%;
					padding-right: 0%;
					padding-bottom :2px;
					padding-top : 0px;
			}
			nav li.entete_selection{            /* affiche en gros l'onglet en cours */
					display:inline-block; 		/* affiche le menu sur une ligne */
					width:15%;
					vertical-align: middle;
					min-width : 120px;
					max-width : 150px;
					background-color: #fcf3cf; /*#FAA44C;  orange foncé */
					/* background-color:#FCF7EC ; */ /* orange pâle */
					/* height : 20px; */
					/*color:red;*/
					height : auto;
					font-size : 0.9em;
					font-weight : bold;
					/* color: red; */
					/*
					border-width: 1px;
					border-style: ridge;
					*/
					border-color: #5087C5;
					border-radius : 2px; 
					padding-left: 0%;
					padding-right: 0%;
					padding-bottom :2px;
					padding-top : 0px;
			}
			nav li.espace{
					display:inline-block; 		/* espace entre les items du menu sur une ligne */
					width:0px;
					vertical-align: middle;
				}
			

			p.petiteLigneSousLogo{
					/*position : relative; 	*//* permet d'ajuster la position de la ligne */
					/*top:0px;	*/		 /* remonte de 10 px la ligne */
					text-align : center;
					font-size :0.7em;
						line-height: 6px;
					color: #5087C5;
			}
			p.text_sous_menu{
					position : relative; 	/* permet d'ajuster la position de la ligne */
					/* top:10px; */			 /* remonte de 10 px la ligne */
					text-align : center;
					font-size :0.9em;
						line-height: 10px;
					   color: #5087C5;  /* ------ bleu -----*/
					/* color: #FAA44C; */ /*----- orange ---- */
			}
			
			p.client_indication{
					/*position : relative; 	*//* permet d'ajuster la position de la ligne */
					/*top:-5px;		*/ 		/* remonte de 10 px la ligne */
					text-align : left;
					margin-left :2%;
					font-size :0.8em;
					line-height: 5px;
					color: #5087C5;
			} 
			.img_irve2{
					display: bloc;
					padding-left : 1.5%;
					padding-right :1.5%;
					width:auto;
					height :30px ;
					text-align:center
				}
/* ------------------------------- Style du corps ------------------------------------------------------- */
section{
	display: block; /* les blocs de section se positionnent les uns au dessus des autres */
	height : auto;
	width: 100%; /* largeur obligatoire pour être centré */

	padding-top : 20px;
	padding-bottom : 20px;
					/*
					border-width: 1px;
					border-style: ridge;
					border-color: #5087C5;		
					border-radius : 10px;
					*/
}
			.enonce{
					display: inline-block;
					vertical-align: top;						
					width: 40%; /* reglage a faire avec le width du bloc à droite (vid_automatisme) */
					position : relative; 	/* permet d'ajuster la position de la ligne */
					top:-10px;		 		/* remonte de xx px la ligne */
			}
		
						h1{
							text-align: left;
							padding-left: 2%;
							padding-right: 5%;
							font-size :1em;
							color: #226699;
							text-decoration: underline;
							font-family :arial;
							line-height: 5px;
						}
						h2{
							text-align: left;
							padding-left: 5%;
							padding-right: 5%;
							font-family :arial;
							font-size :0.9em;
							color: #226699;
							font-weight :bold;
							line-height: 25px;
							position : relative; 	/* permet d'ajuster la position de la ligne */
							top:-0px;		 		/* remonte de xx px la ligne */
						}
						h3{
							text-align: left;
							padding-left: 5%;
							padding-right: 5%;
							font-family :arial;
							font-size :0.9em;
							color: #226699;
							font-weight :bold;	
							line-height: 25px;
							position : relative; 	/* permet d'ajuster la position de la ligne */
							top:-15px;
						}
						.sanssautdeligne{
							white-space:nowrap; /* ne pas sauter de ligne*/
							padding-left: 2%;
							font-family :arial;
							font-size :0.1 em;
							color: #FAA44C;
							font-weight :normal;							/* font-weight :bold; */
						}

						ul.centre {
							position : relative; 	/* permet d'ajuster la position de la ligne */
							top:-15px;	
							list-style-position: inside;
							list-style-type: square;
							text-align: left;
							font-family :arial;
							padding-left: 10%;
							padding-right: 5%;
							font-size :0.8em;
							line-height: 22px;
							color: #226699;
						}
						
						ul.centre_bis {
							position : relative; 	/* permet d'ajuster la position de la ligne */
							top:-28px;	
							list-style-position: inside;
							list-style-type: square;
							text-align: left;
							font-family :arial;
							padding-left: 10%;
							padding-right: 5%;
							font-size :0.8em;
							line-height: 22px;
							color: #226699;
						}
						.images{
						display: bloc;
						padding-left : 0%;
						padding-right :0.5%;
						text-align:center
						}
						.images_distib{
						display: bloc;
						padding-left : 1.5%;
						padding-right :1.5%;
						text-align:center
						}
						.images_reseaux{
						display: bloc;
						padding-left : 1.5%;
						padding-right :1.5%;
						text-align:center
						}
						.img_dist{
						width:180px;
						height : auto;
						border-radius : 5px;
						
						}
								.img_dist:hover{  /* zoom au survol de l'image horizontale */
									border-width: 3px;
									border-style: outset;
									border-color: orange;
									
									
									width:230px;
									height : auto;
									border-radius : 5px;
								
								}
						
						.img_dist2{
							width: auto;
							height: 250px;
							
							border-radius : 5px;
						}
								.img_dist2:hover{	 /* zoom au survol de l'image verticale */
									border-width: 3px;
									border-style: outset;
									border-color: orange;
									border-radius : 10px;									
									
									height: 300px;
									width: auto;
									border-radius : 5px;
									
								}
						
						.img_dist3{
							height:200px;
							width: auto;
														
					
							border-radius : 5px;
						}
								
								.img_dist3:hover{  	 /* zoom au survol de l'image verticale */
									border-width: 3px;
									border-style: outset;
									border-color: orange;
									border-radius : 10px;
									
									
									
									height: 250px;
									width: auto;
									
								
								} 			

			.image_droite
			{
				display: inline-block; 	/* permet au bloc vid_automatisme de se positionner à droite du bloc précédent */
				vertical-align: top;
					width: 58%;  		/* reglage a faire avec le width du bloc à gauche (enonce) */
					/* margin-right:10px; */
					padding: 2px 10px 2px 2px; 
					/*padding-left: 1%;*/
					
					height : auto;
					/* BORDURES DE REGLAGES : NE PAS EFFACER ! */
					/*
					border-width: 1px;
					border-style: outset;
					border-color: orange;
					border-radius : 10px;
					*/
			}	
			.image_droite:hover{
			}
			.image_centre
			{
				display: block; 	/* permet au bloc vid_automatisme de se positionner à droite du bloc précédent */
				vertical-align: top;
					width: 96%;  		/* reglage a faire avec le width du bloc à gauche (enonce) */
					height : auto;
					padding-left: 2%;
					padding-right: 2%;
					text-align: center;
					
					/* margin-right:10px; */
					/* padding: 2px 2px 2px 2px; */
					/*padding-left: 1%;*/
					
					
					/* BORDURES DE REGLAGES : NE PAS EFFACER ! */
					/*
					border-width: 1px;
					border-style: outset;
					border-color: orange;
					border-radius : 10px;
					*/
			}	
			.video-responsive { 
					overflow:hidden;
					border-radius : 20px;
					position:relative;
					}

/* ------------------------------- Style du footer ------------------------------------------------------- */
	footer {
	/*	background:linear-gradient(white,#bcdef5);*/
	background-color:#5087C5;
	position: relative;
	color : #5087C5;
	height : auto;
	border-width: 1px;
	border-style: ridge;
	border-color: #5087C5;
	border-radius : 10px;
	padding-left: 3%;
	padding-right: 3%;
}
p.basdepage{
	text-align: center;
	position: relative;
	color : white;
	line-height: 1.1;
	font-size :0.8em;
}
p.petit {
	position: relative;
	font-size :0.6em;
	color : white;
	text-align: center;
}
@media all and (max-device-width: 1024px)  /* ---------------------------------- MISE EN PAGE  POUR MOBILES -----------------------------------------------*/
{
body {
	background:linear-gradient(white,#bcdef5);
	margin-left: auto;
	margin-right: auto;
	width: 98%; /* largeur obligatoire pour être centré */

	margin-left :1%;
	margin-right:1%;
	font-family: verdana;
	height : auto;
}
/* ------------------------------- Style du header ------------------------------------------------------- */
header{	
				
				/*
				border-width: 1px;
				border-style: ridge;
				border-color: #5087C5;
				border-radius : 10px; 
				*/
				padding-left: 1%;
				padding-right: 1%;
				padding-top : 10px;
				padding-bottom : 1px;
	
		/* --------- Style de la 1ere case gauche du header contenant le logo --------- */		
}			
		.head_1{
				display: inline-block; 		/*permet de placer ce 1er bloc côte à côte du 2nd */
				vertical-align: top;		/* aligne les 2 blocs au dessus */
				width: 36%;	
				/*width: 260px;*/					
			
				/* min-width : 130px; permet de ne pas écraser le logo quand on retrecit la fenetre */	
				height: auto;
				padding-top:5px;
								/*
						     	border-width: 1px;
								border-style: ridge;
								border-color: #5087C5;
								border-radius : 10px; 
								*/
				/*------------encadrement pour réglage mise en page----------------*/
				/*
				border-width: 1px;
				border-style: ridge;
				border-color: #5087C5;
				border-radius : 10px; 
				padding-left: 1%;
				padding-right: 1%;
				padding-top : 10px;
				padding-bottom : 1px;
				*/
				/*------------------fin encadrement------------------------*/
				} 
				.logo{						/* position logo haut*/
					/* width:160px;
					   padding-left: 40px; */
					width: 100%;
					padding-left :1%;
				}
						
	
		/* --------- Style de la 2eme case du header contenant le menu --------- */		
		.head_2{
				display: inline-block; 		/*permet de placer ce 2° bloc côte à côte du 1er */
				vertical-align: middle;
				width: 57%;
				/*height: 100px;*/	
				height: auto;	
				
				/*------------encadrement pour réglage mise en page----------------*/
				/*
				border-width: 1px;
				border-style: ridge;
				border-color: #5087C5;
				border-radius : 10px; 
				padding-left: 1%;
				padding-right: 1%;
				padding-top : 10px;
				padding-bottom : 1px;
				*/
				/*------------------fin encadrement------------------------*/
		}	
	
				p.petiteLigneSousLogo{
					display : none;
				}
				p.text_sous_menu{
				display : none;
				}
			nav ul.entete{ 						/* bandeau blanc du menu tout en haut */
					text-align: center; 		/* le texte du menu est centré */
					height : auto; 				
		}
			nav li.entete{
					display:inline-block; 		/* affiche le menu sur une ligne */
					width:70%;
					min-width : 80px;
					max-width : 500px;
					background-color:#FCF7EC ; 
					height : auto;
					font-size :2.5em;
					border-width: 3px;
					border-style: ridge;
					border-color: #5087C5;
					border-radius : 10px; 
					padding-left: 0%;
					padding-right: 0%;
					padding-bottom :6px;
					padding-top : 6px;
			}
			nav li.entete_selection{            /* affiche en gros l'onglet en cours */
					display:inline-block; 		/* affiche le menu sur une ligne */
					width:70%;
					min-width : 80px;
					max-width : 500px;
					background-color: #fcf3cf ; /*#FAA44C;  orange foncé */
					color:white;
					height : auto;
					font-size : 2.8em;
					font-weight : bold;
					border-width: 3px;
					border-style: ridge;
					border-color: #5087C5;
					border-radius : 10px; 
					padding-left: 0%;
					padding-right: 0%;
					padding-bottom :6px;
					padding-top : 6px;
			}
			a {								/* couleur et soulignement texte menu  */
				color : #225699;
				text-decoration: underline;
			}
			a:hover {			/* changement couleur menu au survol souris */ 
			color:white;
			text-decoration:none;
			background-color: tan;
			}
			

/* ------------------------------- Style du corps ------------------------------------------------------- */
section{
	display: block; /* les blocs de section se positionnent les uns au dessus des autres */
	height : auto;
	width: 100%; /* largeur obligatoire pour être centré */
	/*min-width:10px;
	margin-left :1%;
	padding-right:5%; */
	padding-top : 20px;
	padding-bottom : 20px;
					/*
					border-width: 1px;
					border-style: ridge;
					border-color: #5087C5;		
					border-radius : 10px;
					*/
					}
					.enonce{
					display: inline-block;
					vertical-align: top;						
					width: 100%; /* reglage a faire avec le width du bloc à droite (vid_automatisme) */
					position : relative; 	/* permet d'ajuster la position de la ligne */
					top:0px;		 		/* remonte de xx px la ligne */
					}
		
						h1{
							text-align: left;
							padding-left: 1%;
							padding-right: 5%;
							font-size :2.3em;
							color: #226699;
							text-decoration: underline;
							font-family :arial;
							line-height: 50px;
						}
						h2{
							text-align: left;
							padding-left: 2%;
							padding-right: 5%;
							font-family :arial;
							font-size :2em;
							color: #226699;
							font-weight :bold;
							line-height: 30px;
						}
						h3{
							text-align: left;
							padding-left: 3%;
							padding-right: 5%;
							font-family :arial;
							font-size :2em;
							color: #226699;
							font-weight :bold;							
							/*text-decoration: underline;*/
						}
						p.client_indication{
						/*position : relative; 	*//* permet d'ajuster la position de la ligne */
						/*top:-5px;		*/ 		/* remonte de 10 px la ligne */
						text-align : left;
						margin-left :2%;
						font-size :2em;
						line-height: 5px;
						color: #5087C5;
						} 
						.sanssautdeligne{
							white-space:nowrap; /* ne pas sauter de ligne*/
							padding-left: 2%;
							font-family :arial;
							font-size :0.1 em;
							color: #FAA44C;
							font-weight :normal;							/* font-weight :bold; */
						}

						ul.centre {
							text-align: left;
							font-family :arial;
							padding-left: 8%;
							padding-right: 5%;
							font-size :2em;
							line-height: 36px;
							color: #226699;
						}
						ul.centre_bis {
							text-align: left;
							font-family :arial;
							padding-left: 8%;
							padding-right: 5%;
							font-size :2em;
							line-height: 36px;
							color: #226699;
						}
						.images{
						display: bloc;
						padding-left : 0%;
						padding-right :0.5%;
						text-align:center
						}
						.images_distib{
						display: bloc;
						padding-left : 1.5%;
						padding-right :1.5%;
						text-align:center
						}
						.images_reseaux{
						display: bloc;
						padding-left : 1.5%;
						padding-right :1.5%;
						text-align:center
						}
						.img_dist{
						/* width:350px; */
						width: 30%;
						height : auto;
						border-radius : 15px;
						}
						.img_dist:hover{  
								width: 40%;
								height : auto;
								border-width: 6px;
								border-style: outset;
								border-color: orange;
								border-radius : 5px;
							}
								
							.img_dist2{
								height: 400px;
								width: auto;
								border-radius : 5px;
							}
								
							.img_dist2:hover{	 
								border-width: 6px;
								border-style: outset;
								border-color: orange;
								border-radius : 5px;
								
								height: 480px;
								width: auto;
									
							}
					
								
							.img_dist3{
								height: 350px;
								width: auto;
								border-radius : 5px;
							}
								
							.img_dist3:hover{	 
								border-width: 6px;
								border-style: outset;
								border-color: orange;
								border-radius : 5px;
								
								height: 400px;
								width: auto;
							}
								
			.image_droite
			{
				/*display: inline-block; */	/* permet au bloc vid_automatisme de se positionner à droite du bloc précédent */
				vertical-align: top;
				
					width: 99%;  		/* reglage a faire avec le width du bloc à gauche (enonce) */
					/* margin-right:10px; */
					padding: 5px 5px 5px 5px; /* reglage haut/droit/bas/gauche */
					
					/* BORDURES DE REGLAGES : NE PAS EFFACER ! */
					/*
					border-width: 1px;
					border-style: outset;
					border-color: orange;
					border-radius : 10px;
					*/
			}	
			.image_droite:hover{
				
			}
			.video-responsive { 
					overflow:hidden;
					border-radius : 20px;
					position:relative;
					}
				.img_irve2{
							display: bloc;
							padding-left : 1.5%;
							padding-right :1.5%;
							width:auto;
							height :60px;
							text-align:center;
							}
/* ------------------------------- Style du footer ------------------------------------------------------- */
	footer {
	/*	background:linear-gradient(white,#bcdef5);*/
		background-color:#5087C5;
		position: relative;
		color : white;
		height : auto;
		border-width: 1px;
		border-style: ridge;
		border-color: #5087C5;
		border-radius : 10px;
		padding-left: 3%;
		padding-right: 3%;
	}
	p.basdepage{
		text-align: center;
		position: relative;
		color : white;
		line-height: 1.2em;
		font-size :1.3em;
	}
	p.petit {
		position: relative;
		font-size :1.3em;
		color : white;
		text-align: center;
	}
}