/*** 
* pour toute modif dans ce fichier renommer-le avec l'ajout du N° de version dans le nom
* et modifierla reférence à ce fichier dans les fichiers concernés comme siem_head.php
* version 2.00
* 
*/

body {
	font-family:'Open Sans',sans-serif,arial,helvetica,verdana;
	/*font: 12px/19px  Arial, Helvetica, sans-serif;*/
	color: black; /*#6f6f6f;*/
	position:relative;
	/*min-width: 1025px;*/
	min-height:100%;
	padding:auto;
	margin: 20px 30px;
	background-color: #E6EFFF;
	background-image: url(../img/siemfond.jpg);
	background-repeat: repeat;
}
@media screen and (max-width: 768px) {
body {
  margin: 0; } 
}
      
/***** général ligne58-152**************/
h1, h2, h3, h4, h5, h6 {
	font-size: 18px;
	font-weight: normal;
	font-family: "Times New Roman", Georgia, Times, serif;
	color: #16446c;
}

h1 {
	font-size: 48px; /*36px;*/
	//line-height: 1em;
	text-transform:uppercase;	
}

h2 {
	font-size: 30px;
	line-height: 1em;
}

h3,h4 {
	font-size: 24px;
	line-height: 1em;
}
h5,h6{
	color: #0a223c;
}
p {margin-bottom: 19px;}
.text-info {color:#000;}
.lead {font-size:14px; color:#fe8948;}
p.lead {margin-bottom:10px;}
P.lang{
	font-size:12px;
	color:#000099;
}

ul {
	padding: 0;
	margin: 0;
	margin-left: 10px;
	list-style: none;
}
li{
	list-style-type: square;
	/*list-style-type: "#1F44D";*/ /*"\1F44D" thumbs up sign */
	margin : 0;
	/*margin-left: 10%;*/
}
ul.niv2 li{
	list-style-type: circle;
	margin : 0;
	margin-left: 15px;
}
ul.niv3 li{
	list-style-type: disc;
	margin : 0;
	margin-left: 25px;
}

ul.list li a{color: #6f6f6f;}
ul.list li a:hover{color: #fd6e43;}
/*links*/

ul.list li{
	/*background: url(../img/dot-black.gif) 0 6px no-repeat;
	list-style-type: circle;
	color: #6f6f6f;
	font-size:13px;
	margin-top:7px;
	padding-left: 27px;
	*/
	list-style-type: square;
	margin-left: 10%;
	color: #6f0000;
}

br #ullist {
background: url(./img/dot-orange.gif) 0 6px no-repeat;
}


a {
	text-decoration: none;
	color: #fe8948;
	outline: none;
	transition: 0.5s ease;
	-o-transition: 0.5s ease;
	-webkit-transition: 0.5s ease;
}

a:hover {color: #16445c;}


a.btn {
	display: inline-block;
	font-family:"Times New Roman", Times, serif;
	font-size:14px;
	line-height:1em;
	padding: 11px 30px 12px 30px; 
	color: #0000BC;
	text-transform:uppercase;
	margin-top: 33px;
}
a.btn_af {
	display: inline-block;
	font-family:"Times New Roman", Times, serif;
	font-size:14px;
	line-height:1em;
	padding: 11px 30px 12px 30px;
	background:  #CCCCFF;	/*différence avec a.btn */
	color: #0000BC;
	text-transform:uppercase;
	margin-top: 33px;
}
a.btn[disabled] {
	background:transparent;
	color: #555;
}
a.btn[disabled]:hover {
	background:transparent;
	color: #f00;
}
a.btn:hover {
	background:  #0000BC;
	color: #fff;
}

a.btn_af:hover {
	background:  #0000BC;
	color: #fff;
}
.slideTT{
	display: inline-block;
	font-family:"Times New Roman", Times, serif;
	color: #3232FF;
	font-size:22px;
	line-height:1em;
}


a.slide, a.slideTN {
	display: inline-block;
	font-family: "Times New Roman", Times, serif;
	color: #0A0A96;
}
a.slideTN {
	font-family: "Nadianne", "Times New Roman", Times, serif;
}

a.slide:hover, a.slideTN:hover {
	background:  #0000BC;
	color: #fe8948;
}

.zoneinfo{
	/*background:transparent;*/
	background-color: #E6EFFF;/* bleu clair */
	margin-top: 50px;
	padding-left:50px;
	padding-right:30px;
	padding-top:40px;
	padding-bottom:91px;
}
.zoneinfo-event1{
	/*background:transparent;*/
	background-color: rgba(230,239,255,0.5); /*#E6EFFF; bleu clair */
	margin-top: 50px;
	padding-left:50px;
	padding-right:30px;
	padding-top:40px;
	padding-bottom:91px;
}
.zoneinfo-event2{
	/*background:transparent;*/
	background-color: rgba(220,250,175,0.5); /*#DCFAAF;vert caki clair */
	margin-top: 50px;
	padding-left:50px;
	padding-right:30px;
	padding-top:40px;
	padding-bottom:91px;
}

.zonetitre H1{
	text-align:center;
	color: #ffff98;
	background-color: rgba(100,100,125,0.7);
	}
	
.zonetitre_events{
	/*background:transparent;*/
	background: url(../meeting/fondcongres.jpg) 0 0 no-repeat;
	background-size: 100% 100%;
	margin-top: 50px;
	padding-left:50px;
	padding-right:30px;
	padding-top:40px;
	padding-bottom:91px;
}
.zonetitre_events H1{
	text-align:center;
	color: #ffff98;
	background-color: rgba(100,100,125,0.7);
	}

	
.clear {clear: both;}
.wrap {overflow:hidden;}
.indent-1 {
	padding:10px 0 10px 0;
	font-size: 30px;
}
.indent-2 {padding:70px 0 25px 0;}

.top-1 {padding-top:91px;}
.bot-1 {padding-bottom:85px;}

/*----------- Back to top --------------*/
/*#toTop {
  display: none;
  width: 49px;
  height: 48px;
  overflow: hidden;
  background: url(../img/totop.png) 0 0 no-repeat;
  position: fixed;
  margin-right: -600px !important;
  right: 50%;
  bottom: 80px;
  z-index: 999;
}
#toTop:hover {
}
#toTop:active,
#toTop:focus {
  outline: none;
}*/
/***************************/
#content {background: url(../img/content-bg.jpg) 0 0 repeat-x #f7f7f7;}

.bg-1 {border-top:#c8cece 1px solid; border-bottom:#e0e0e0 1px solid; background: url(../img/bg-1.jpg) 0 0 repeat-x #f5f5f5;}
.bg-2 {background: #f1f1f1;}
.bg-3 {border-top:#dddddd 1px solid; border-bottom:#e2e2e2 1px solid;}
.border-1 {border-right:#d4d4d4 1px solid; padding-right:20px; padding-bottom:91px;}

.box-1 {margin-top:121px; margin-bottom:84px;}
.box-1 img {float:left;}
.box-1 h4 {overflow:hidden; padding-top:22px;}
.box-1 .wrap {padding-bottom:18px;}

.box-2 img {float:left; margin-right:20px;}

.list-news li {margin-top:45px;}
.list-news li:first-child {margin-top:0px;}
.list-news .wrap {padding-bottom:11px;}
.list-news .badge { background:#16445c; float:left; width:60px; padding:8px 0 8px 0; text-align:center; font-size:18px; line-height:1em; color:#fff; text-transform:uppercase; margin-right:20px;}
.list-news .badge span {display:block; font-size:10px;}

.list-people {margin-left:-20px; margin-top:-18px;}
.list-people li {float:left; margin-left:20px; margin-top:18px;}

.lists {overflow:hidden; margin-top:19px;}
.lists>div {float:left; width:160px;}

.list-project li {margin-top:91px;}
.list-project h4 {margin:39px 0 30px 0;}

.list-work li {margin-top:15px;}
.list-work li:first-child {margin-top:0px;}
/********************************************/
	.img80pc{
		width: 100%;
		height: 100%;
	}
	@media screen and (min-width: 768px) {
		.img80pc{
			width: 50%;
			height: 50%;
			}
	}
/*----------- Back to top --------------*/
#toTop {
  display: none;
  width: 49px;
  height: 48px;
  overflow: hidden;
  background: url(../img/totop.png) 0 0 no-repeat;
  position: auto ;/*fixed;*/
  margin-right: -600px !important;
  right: 50%;
  bottom: 80px;
  z-index: 999;
}
#toTop:hover {
}
#toTop:active,
#toTop:focus {
  outline: none;
}
/*header ligne 153-173*/

/*header {
	display: block;
	padding: 39px 0 0;
	z-index: 999;
	background:#242424;
}

header h1 {
	float: none;
	text-align:center;
	display:block;
	position: relative;
	z-index: 999;
	margin:0;
}
header h1 a {display: inline-block;}
header h1 a img {display: block;}*/

/*nav {background:#85ccd9; padding:23px 0 21px 0;}*/
	.cadrefooter {
		width: 100%;  /* ce paramétrage crée un conteneur dont la largeur est 100 % de celle du navigateur */
		height:300px;
    	background: transparent; /*#FFFFFF;*/
    }
/************ création carousel***********/
    .cadrecarousel {
		width: 100%;  /* ce paramétrage crée un conteneur dont la largeur est 100 % de celle du navigateur */
		height:400px;
    	background: transparent; /*#FFFFFF;*/
    	margin: 0 auto; /* les marges automatiques (et dotées d'une largeur positive) centrent la page */
    	border: 1px solid #000000;
    	text-align: left; /* ce paramétrage annule le paramètre text-align: center de l'élément body. */
    	padding: 0 10px;
   
	padding-top:40px; 
	padding-bottom:10px; 
	position:relative;
	height: 400px;

	}

    .cadrecarousel #container {
		width: 100%;  /* ce paramétrage crée un conteneur dont la largeur est 100 % de celle du navigateur */
		height:600;
    	background: transparent; /*#FFFFFF;*/
    	margin: 0 auto; /* les marges automatiques (et dotées d'une largeur positive) centrent la page */
    	/*border: 1px solid #000000;*/
    	text-align: left; /* ce paramétrage annule le paramètre text-align: center de l'élément body. */
    }
 
    .cadrecarousel #footer { 
    	padding: 0 10px; /* ce remplissage correspond à l'alignement à gauche des éléments des div qui apparaissent au-dessus. */
    	/*background:#DDDDDD; */
		background-color: #E6EFFF; /* #A6CFFF; bleu clair*/
    } 
    .cadrecarousel #footer p {
    	margin: 0; /* la mise à zéro de la marge du premier élément du pied de page permet d'éviter une possible disparition de la marge (espace entre les éléments div) */
    	padding: 10px 0; /* l'utilisation d'un remplissage pour cet élément crée un espace, tout comme une marge l'aurait fait, mais en évitant le risque de disparition de la marge */
    }
    
    .container-slider img {
		padding-right: 10px;
		padding-left: 0px;

	}

   .siemslick {
		cursor: default !important;
		overflow:hidden;
		text-align:center;	
	}

	/*.siemslick img {
		padding-right: 11px;
		padding-left: 11px;

	}*/
	.siemslick h4 {
		font-weight: normal;
		font-family: "Times New Roman", Georgia, Times, serif;

		font-size: 18px;
		line-height: 1em;

		text-transform:uppercase;
		color:#2222FF; 
		margin:20px 0 20px 0;  /*39px 0 30px 0;*/
		text-align:center;

		}

	.siemslick p {
		font: 12px/19px  Arial, Helvetica, sans-serif;
		color:#000066;  
		
		text-align:justify;
		/*padding-right: 10px;
		padding-left: 10px;*/
	} 
/** bouton next et previous pour le carousel ***************/ 
 a.prev1, a.next1 {
	width: 29px;
	height: 29px;
	top: 5px;
	position: relative; /*absolute; */
	display: block;
	z-index: 999;
	background:#3b708c;
}
a.next1 {
	top: -24px;
	left: 34px; /*right: 0px;*/
	background:url(../img/next.png) 0 0 no-repeat #3b708c;
}
a.prev1 {
	left: 0px; /*right: 34px;*/
	background:url(../img/prev.png) 0 0 no-repeat #3b708c;
}
a.next1:hover {background-color:#16445c;}
a.prev1:hover {background-color:#16445c;}

/*****************/   
    .listeproduit #container li
    {
		background-color: #E6EFFF; /* #A6CFFF; bleu clair*/
		/*padding : top right bottom  left */
		padding:20px 50px 20px 50px;
		border: 1px solid #000000;
    }
    .listeproduit #container p
    {
		background-color: #FFFFFF;  /*#E6EFFF; bleu clair*/
		/*padding : top right bottom  left */
		padding:20px 50px 20px 50px;
		border: 1px solid #000000;
    }
	
	 .listeproduit #container .detail
    {
		background-color: #FFFFFF;  /*#E6EFFF; bleu clair*/
		/*padding : top right bottom  left */
		padding:20px 50px 20px 50px;
		border: 1px solid #000000;
    }
    
/************ Un seul cadre image centrée ********/
   .imgcentred #containerimg {
		/*clear:both;*/
		width: 80%;
		padding-right: 10%;
		padding-left: 10%;
    	/* background: #0000FF;la couleur de l'arrière-plan est affichée sur la largeur du contenu de la colonne, mais pas au-delà */
    }
    @media screen and (min-width: 768px) {
		.imgcentred #containerimg  {
			width: 50%;
			padding-right: 25%;
			padding-left: 25%; 
			/* background: #FF0000; la couleur de l'arrière-plan est affichée sur la largeur du contenu de la colonne, mais pas au-delà */
		} 
    }
    
/************ création de 2 colonnes***********/
    .Colfloat #container { 
    	width: 100%;  /* ce paramétrage crée un conteneur dont la largeur est 100 % de celle du navigateur */
    	/*background: transparent; #FFFFFF;*/
    	margin: 0 auto; /* les marges automatiques (et dotées d'une largeur positive) centrent la page */
    	/*border: 1px solid #000000;*/
    	/*text-align: left;*/ /* ce paramétrage annule le paramètre text-align: center de l'élément body. */
    }  
    .Colfloat #cadre1, .Colfloat #cadre2, .Colfloat #cadre3 {
		/*clear:both;*/
		width: 100%;
    	padding-top: 15px 0; /* le remplissage en haut et en bas crée un espace visuel à l'intérieur de cet élément div  */
		padding-left: 10px;  /*l'utilisation de remplissage, au lieu d'une marge, permet d'éloigner l'élément des bords de l'élément div */
		
		font-size:18px;
		line-height:30px;
		text-align:center;
	}
    .Colfloat #cadre1{
		background-color: rgba(255, 200, 200, 0.40);
		
    }
    .Colfloat #cadre2{
		background-color: rgba(200, 255, 200, 0.40);

    }
    .Colfloat #cadre3{
		background-color: rgba(200, 200, 255, 0.40);

    }
    .Colfloat #cadre1 a{
		color:rgba(255, 50, 50, 1);
		
    }
    .Colfloat #cadre2 a{
		color:rgba(50, 255, 50, 1);
    }
    .Colfloat #cadre3 a{
		color:rgba(50, 50, 255, 1);
    }
    @media screen and (min-width: 768px) {
		.Colfloat #cadre1, .Colfloat #cadre2, .Colfloat #cadre3 {
			float: left; /* cet élément est flottant, il faut donc lui attribuer une largeur */
			width: 30%;
    	} 
    }   
/************ création de 2 colonnes***********/
    .twoColLiqRtHdr #container2col { 
    	width: 100%;  /* ce paramétrage crée un conteneur dont la largeur est 100 % de celle du navigateur */
    	/*background: transparent; #FFFFFF;*/
    	background-color: rgba(230, 240, 255, 0.65); /*#E5EFFF;*/
    	margin: 0 auto; /* les marges automatiques (et dotées d'une largeur positive) centrent la page */
    	/*border: 1px solid #000000;*/
    	text-align: left; /* ce paramétrage annule le paramètre text-align: center de l'élément body. */
    } 
    .twoColLiqRtHdr #header { 
    	background: #DDDDDD; 
    	padding: 0 10px;  /* ce remplissage correspond à l'alignement à gauche des éléments des div qui apparaissent en dessous. Si, au lieu de texte, c'est une image qui est insérée dans l'élément #header, il est conseillé de supprimer le remplissage. */
    } 
    .twoColLiqRtHdr #header h1 {
    	margin: 0; /* la mise à zéro de la marge du dernier élément du div #header permet d'éviter une disparition de la marge (espace inexplicable entre les éléments div). Si l'élément div est entouré d'une bordure, cette précaution n'est pas nécessaire, car la bordure évite également la disparition de la marge */
    	padding: 10px 0; /* l'utilisation de remplissage, au lieu d'une marge, permet d'éloigner l'élément des bords de l'élément div */
    }
     .twoColLiqRtHdr #cadrecarousel { 
		width: 100%;  /* ce paramétrage crée un conteneur dont la largeur est 100 % de celle du navigateur */
		height: 600;
    	background: transparent; 
    	/*padding: 0 10px;*/  /* ce remplissage correspond à l'alignement à gauche des éléments des div qui apparaissent en dessous. Si, au lieu de texte, c'est une image qui est insérée dans l'élément #header, il est conseillé de supprimer le remplissage. */
    } 
       
    /* Conseils pour sidebar1 :
    1. comme nous travaillons en pourcentages, il est préférable de ne pas utiliser de remplissage latéral pour l'encadré. Pour les navigateurs conformes aux standards, il sera ajouté à la largeur, créant ainsi une largeur réelle inconnue. 
    2. Pour créer un espace entre le côté de l'élément div et les éléments qu'il contient, attribuez une marge gauche et une marge droite à ces éléments, comme dans la règle ".twoColLiqRtHdr #sidebar1 p".
    3. Comme Internet Explorer calcule les largeurs après avoir restitué l'élément parent, des bogues inexpliquées peuvent parfois se produire pour les colonnes calculées en pourcentage. Pour obtenir des résultats plus prévisibles, il est donc préférable de dimensionner les colonnes en pixels.
    */
    .twoColLiqRtHdr #sidebar1 {
		/*clear:both;*/
		width: 100%;
    	background: #EBEBEB; /* la couleur de l'arrière-plan est affichée sur la largeur du contenu de la colonne, mais pas au-delà */
    	padding-top: 15px 0; /* le remplissage en haut et en bas crée un espace visuel à l'intérieur de cet élément div  */
		padding-left: 10px;  /*l'utilisation de remplissage, au lieu d'une marge, permet d'éloigner l'élément des bords de l'élément div */
    }
    @media screen and (min-width: 768px) {
		.twoColLiqRtHdr #sidebar1  {
			float: right; /* cet élément est flottant, il faut donc lui attribuer une largeur */
			width: 24%;
    	} 
    	}
    .twoColLiqRtHdr #sidebar1 h3, .twoColLiqRtHdr #sidebar1 p {
    	margin-left: 10px; /* il est conseillé d'attribuer des valeurs pour les marges gauche et droite de chaque élément qui sera placé dans les colonnes latérales */
    	margin-right: 10px;
    }
    
    /* Conseils pour mainContent :
    1. l'espace compris entre les éléments mainContent et sidebar1 est créé avec la marge droite de l'élément div mainContent.  Quelle que soit la taille du contenu dans l'élément div sidebar1, l'espace des colonnes reste préservé. Vous pouvez supprimer cette marge droite si vous souhaitez que le texte de l'élément div #mainContent remplisse l'espace de l'élément #sidebar1 lorsque le contenu de ce dernier se termine.
    2. pour éviter une perte de l'élément flottant à la résolution minimale prise en charge (800 x 600), la taille des éléments contenus par l'élément div mainContent doit être égale ou inférieure à 430 pixels (images comprises).
    3. dans le commentaire conditionnel pour Internet Explorer ci-dessous, la propriété zoom permet de donner à l'élément mainContent l'attribut "hasLayout." Cela évite l'apparition de plusieurs bogues spécifiques d'Internet Explorer.
    */
    .twoColLiqRtHdr #mainContent { 
    	margin: 0 26% 0 10px; /* La marge gauche doit être identique à celles de l'en-tête et du pîed de page pour qu'elles soient alignées correctement. */
    } 
    
    .twoColLiqRtHdr #footer { 
    	padding: 0 10px; /* ce remplissage correspond à l'alignement à gauche des éléments des div qui apparaissent au-dessus. */
    	background:#DDDDDD; 
    } 
    .twoColLiqRtHdr #footer p {
    	margin: 0; /* la mise à zéro de la marge du premier élément du pied de page permet d'éviter une possible disparition de la marge (espace entre les éléments div) */
    	padding: 10px 0; /* l'utilisation d'un remplissage pour cet élément crée un espace, tout comme une marge l'aurait fait, mais en évitant le risque de disparition de la marge */
    }
    
    /****** 2 Colonnes pour description ***************/
    /******1 image + texte ***********/
    
     /************ création de 2 colonnes***********/
    .twoColLiq #container2col { 
    	width: 100%;  /* ce paramétrage crée un conteneur dont la largeur est 100 % de celle du navigateur */
    	/*background: transparent; #FFFFFF;*/
    	/background-color: rgba(230, 240, 255, 0.35);*/ /*#E5EFFF;*/
    	margin: 0 auto; /* les marges automatiques (et dotées d'une largeur positive) centrent la page */
    	/*border: 1px solid #000000;*/
    	/*text-align: center; */ 
    	/*text-align: left;  ce paramétrage annule le paramètre text-align: center de l'élément body. */
    } 
    /* Conseils pour sidebarRt ou sidebarLft :
    1. comme nous travaillons en pourcentages, il est préférable de ne pas utiliser de remplissage latéral pour l'encadré. Pour les navigateurs conformes aux standards, il sera ajouté à la largeur, créant ainsi une largeur réelle inconnue. 
    2. Pour créer un espace entre le côté de l'élément div et les éléments qu'il contient, attribuez une marge gauche et une marge droite à ces éléments, comme dans la règle ".twoColLiqRt #sidebar1 p".
    3. Comme Internet Explorer calcule les largeurs après avoir restitué l'élément parent, des bogues inexpliquées peuvent parfois se produire pour les colonnes calculées en pourcentage. Pour obtenir des résultats plus prévisibles, il est donc préférable de dimensionner les colonnes en pixels.
    */
    .twoColLiq #sidebarRt {
		/*clear:both;*/
		width: 100%;
    	 /*background: #EBEBEB; la couleur de l'arrière-plan est affichée sur la largeur du contenu de la colonne, mais pas au-delà */
    	padding-top: 15px 0; /* le remplissage en haut et en bas crée un espace visuel à l'intérieur de cet élément div  */
		padding-left: 10px;  /*l'utilisation de remplissage, au lieu d'une marge, permet d'éloigner l'élément des bords de l'élément div */
		 /* background: #2222EB;test bleu*/
    }
    .twoColLiq #image50pc {
	width: 70%;
	padding: 0 15% 0 15%;
    }	
    @media screen and (min-width: 768px) {
		.twoColLiq #sidebarRt  {
			float: right; /* cet élément est flottant, il faut donc lui attribuer une largeur */
			width: 25%;
			padding-top: 15px 0; /* le remplissage en haut et en bas crée un espace visuel à l'intérieur de cet élément div  */
			padding-left: 10px;  /*l'utilisation de remplissage, au lieu d'une marge, permet d'éloigner l'élément des bords de l'élément div */
			/*background: #2222EB;  test bleu*/
    	}
    	.twoColLiq #image50pc {
		width: 100%;
		padding: 0 0 0 0; 
		/* background: #22EB22;test vert*/
		}
    }
    
    .twoColLiq #sidebarRt h3, .twoColLiq #sidebarRt p {
    	margin-left: 10px; /* il est conseillé d'attribuer des valeurs pour les marges gauche et droite de chaque élément qui sera placé dans les colonnes latérales */
    	margin-right: 10px;
    }
  
    
    .twoColLiq #UlRt li {
	  	padding-left: 20px;	 
		/*margin-left: 15px;  s'aligne sur le contenant : sidebarRt*/
    	list-style-type: square;
  
    }

   .twoColLiq #sidebarLft h3, .twoColLiq #sidebarLft p{
    	margin-left: 10px; /* il est conseillé d'attribuer des valeurs pour les marges gauche et droite de chaque élément qui sera placé dans les colonnes latérales */
    	margin-right: 10px;
    }
    
    .twoColLiq #sidebarLft {
		/*clear:both;*/
		width: 100%;
    	/* background: #EBEBEB; la couleur de l'arrière-plan est affichée sur la largeur du contenu de la colonne, mais pas au-delà */
    	padding-top: 15px 0; /* le remplissage en haut et en bas crée un espace visuel à l'intérieur de cet élément div  */
		padding-left: 10px;  /*l'utilisation de remplissage, au lieu d'une marge, permet d'éloigner l'élément des bords de l'élément div */
		text-align: center;
    }
    @media screen and (min-width: 768px) {
		.twoColLiq #sidebarLft  {
			float: left; /* cet élément est flottant, il faut donc lui attribuer une largeur */
			width: 25%;
			padding-top: 15px 0; /* le remplissage en haut et en bas crée un espace visuel à l'intérieur de cet élément div  */
			padding-left: 10px;  /*l'utilisation de remplissage, au lieu d'une marge, permet d'éloigner l'élément des bords de l'élément div */
    	} 
    	}
    .twoColLiq #sidebarLft h4 {
    	margin-left: 10px; /* il est conseillé d'attribuer des valeurs pour les marges gauche et droite de chaque élément qui sera placé dans les colonnes latérales */
    	margin-right: 10px;
		color: #9f0000;
    }
    .twoColLiq #UlLft li {
		/*margin: 0;  la mise à zéro de la marge du premier élément du pied de page permet d'éviter une possible disparition de la marge (espace entre les éléments div) */
    	margin-left: 35%;  /*s'aligne sur le contenant : sidebarLft*/
    	list-style-type: square;
		/*color: #ff0000;*/
    }

    /* Conseils pour mainContent :
    1. l'espace compris entre les éléments mainContent et sidebar1 est créé avec la marge droite de l'élément div mainContent.  Quelle que soit la taille du contenu dans l'élément div sidebar1, l'espace des colonnes reste préservé. Vous pouvez supprimer cette marge droite si vous souhaitez que le texte de l'élément div #mainContent remplisse l'espace de l'élément #sidebar1 lorsque le contenu de ce dernier se termine.
    2. pour éviter une perte de l'élément flottant à la résolution minimale prise en charge (800 x 600), la taille des éléments contenus par l'élément div mainContent doit être égale ou inférieure à 430 pixels (images comprises).
    3. dans le commentaire conditionnel pour Internet Explorer ci-dessous, la propriété zoom permet de donner à l'élément mainContent l'attribut "hasLayout." Cela évite l'apparition de plusieurs bogues spécifiques d'Internet Explorer.
    */
    
    .twoColLiq #mainContent { 
    	margin: 0 10px 0 10px; /* margin: 0 26% 0 10px; La marge gauche doit être identique à celles de l'en-tête et du pîed de page pour qu'elles soient alignées correctement. */
    } 
 
    .twoColLiq #mainContent p {
    	margin: 0; /* la mise à zéro de la marge du premier élément du pied de page permet d'éviter une possible disparition de la marge (espace entre les éléments div) */
    	padding: 10px 0; /* l'utilisation d'un remplissage pour cet élément crée un espace, tout comme une marge l'aurait fait, mais en évitant le risque de disparition de la marge */
		padding: 5% 5% 5% 5%;
    }
	/**********************************************/
    
    /****** 4 colonnes ***************/
    .QuatColLiq #container {
      width: 100%;  /* ce paramétrage crée un conteneur dont la largeur est 80 % de celle du navigateur */
	  /*height: 300px;*/
	  color: #ffffff;
      background: #065FA3;  /*#2A6EFF;*/
      text-align: left; /* ce paramétrage annule le paramètre text-align: center de l'élément body. */
	  padding:0;
	  margin: 0 auto; /* les marges automatiques (et dotées d'une largeur positive) centrent la page */
    }
    
    .QuatColLiq #container  p{
    font-family: Helvetica;
    font-size: 14px;
    line-height: 25px;
	}

    .QuatColLiq #container  a:hover {
    color: #fff;
    text-decoration: underline;
	}
	.QuatColLiq #container a:visited {
    color: #EFEF06;
    text-decoration: none;
	}	
	.QuatColLiq #container a{
    color: #fff;
    text-decoration: none;
	}
	.QuatColLiq #sidebar1 h3, .QuatColLiq #sidebar2 h3{
    color: #FFFF00;
    color: aquamarine;
    text-decoration: none;
	}

    /* Conseils pour les encadrés :
    1. Comme nous travaillons en pourcentages, il est préférable de ne pas utiliser de remplissage latéral pour les encadrés. Pour les navigateurs conformes aux standards, il sera ajouté à la largeur, créant ainsi une largeur réelle inconnue. 
    2. Pour créer un espace entre le côté de l'élément div et les éléments qu'il contient, attribuez une marge gauche et une marge droite à ces éléments, comme dans la règle ".QuatColLiq #sidebar1 p".
    3. Comme Internet Explorer calcule les largeurs après avoir restitué l'élément parent, des bogues inexpliquées peuvent parfois se produire pour les colonnes calculées en pourcentage. Pour obtenir des résultats plus prévisibles, il est donc préférable de dimensionner les colonnes en pixels.
    */
    .QuatColLiq #sidebar1 {
      width: 100%; /* cet élément est flottant, il faut donc lui attribuer une largeur */
      background: #065FA3;  /*#2A6EFF;*/
      padding: 0; /* le remplissage en haut et en bas crée un espace visuel à l'intérieur de cet élément div  */
    }
    @media screen and (min-width: 768px) {
		.QuatColLiq #sidebar1  {
			float: left; /* Cet élément doit précéder dans le code source tout élément à côté duquel il doit être positionné */
			width: 25%;
			height: 200px;
    	} 
    	}
    .QuatColLiq #sidebar2 {
	/*float: right;*/ /* Cet élément doit précéder dans le code source tout élément à côté duquel il doit être positionné */
	width: 100%; /* cet élément est flottant, il faut donc lui attribuer une largeur */
	background: #065FA3;  /*#2A6EFF;*/
	padding:0; /* le remplissage en haut et en bas crée un espace visuel à l'intérieur de cet élément div  */
    }
    @media screen and (min-width: 768px) {
		.QuatColLiq #sidebar2  {
			float: right; /* cet élément est flottant, il faut donc lui attribuer une largeur */
			width: 25%;
			height: 200px;
    	} 
    	}
    .QuatColLiq #sidebar1 p, .QuatColLiq #sidebar1 h3, .QuatColLiq #sidebar2 p, .QuatColLiq #sidebar2 h3 {
      margin-left: 10px; /* il est conseillé d'attribuer des valeurs pour les marges gauche et droite de chaque élément qui sera placé dans les colonnes latérales */
      margin-right: 10px;
    }
    /* Conseils pour mainContent :
    1. l'espace compris entre l'élément mainContent et les encadrés est créé avec les marges gauche et droite de l'élément div mainContent.
    2. pour éviter une perte de l'élément flottant à la résolution minimale prise en charge (800 x 600), la taille des éléments contenus par l'élément div mainContent doit être égale ou inférieure à 300 pixels (images comprises).
    3. dans le commentaire conditionnel pour Internet Explorer ci-dessous, la propriété zoom permet de donner à l'élément mainContent l'attribut "hasLayout." Cela évite l'apparition de plusieurs bogues spécifiques d'Internet Explorer.
    */
    .QuatColLiq #mainContent {
	margin-top: 0;
	margin-right: 10px;
	margin-bottom: 0;
	margin-left: 10px;
	padding:0;
    }
    /*.QuatColLiq #left legal-copy  {
		font-family: Helvetica;
		font-size: 14px;
		line-height: 25px;
		padding:0 15px 0 15px;
		margin-bottom: 15px;
		
    }*/
    
    /*********************************************************/
        /****** 4 colonnes sous bandeau ***************/
    
    .Offre4ColLiq #container {
      width: 98%;  /* ce paramétrage crée un conteneur dont la largeur est 98 % de celle du navigateur */
	  /*height: 1000px;*/
      /*background-color:#E6EFFF;*/
      background-color: rgba(230, 239, 255, 0.7);
      text-align: left; /* ce paramétrage annule le paramètre text-align: center de l'élément body. */
	  padding:0;
	  margin: 0 auto; /* les marges automatiques (et dotées d'une largeur positive) centrent la page */
	  /*border: 1px solid #1122CC;*/
	  /*padding:0; /* le remplissage en haut et en bas crée un espace visuel à l'intérieur de cet élément div  */
    }
    @media screen and (min-width: 768px) {
		.Offre4ColLiq #container {
		  width: 99%;  /* ce paramétrage crée un conteneur dont la largeur est 80 % de celle du navigateur */
		  /*height: 300px;*/
		}
    }
    
    .Offre4ColLiq #container  p{
		font-family: Helvetica;
		font-size: 14px;
		line-height: 25px;
	}
	Offre4ColLiq #container h1{
		text-align:center;
		color: #ffff98;
		background-color: rgba(100,100,125,0.7);
	}
    /*
    .Offre4ColLiq #container  a:hover {
    color: #FFC809; 
    text-decoration: underline;
	}
	.Offre4ColLiq #container a:visited {
    color: #C83200;
    text-decoration: none;
	}	
	.Offre4ColLiq #container a{
    color:#003C96;
    text-decoration: none;
	}
	*/
	
    /* Conseils pour les encadrés :
    1. Comme nous travaillons en pourcentages, il est préférable de ne pas utiliser de remplissage latéral pour les encadrés. Pour les navigateurs conformes aux standards, il sera ajouté à la largeur, créant ainsi une largeur réelle inconnue. 
    2. Pour créer un espace entre le côté de l'élément div et les éléments qu'il contient, attribuez une marge gauche et une marge droite à ces éléments, comme dans la règle ".Offre4ColLiq #sidebar1 p".
    3. Comme Internet Explorer calcule les largeurs après avoir restitué l'élément parent, des bogues inexpliquées peuvent parfois se produire pour les colonnes calculées en pourcentage. Pour obtenir des résultats plus prévisibles, il est donc préférable de dimensionner les colonnes en pixels.
    */
	.Offre4ColLiq #sidebar1 {
		width: 100%; /* cet élément est flottant, il faut donc lui attribuer une largeur */
		/*background: #E6EFFF ;  */
		padding: 0; /* le remplissage en haut et en bas crée un espace visuel à l'intérieur de cet élément div  */
		/* border: 1px solid #1122CC;*/
	}
    @media screen and (min-width: 768px) {
		.Offre4ColLiq #sidebar1  {
			float: left; /* Cet élément doit précéder dans le code source tout élément à côté duquel il doit être positionné */
			width: 25%;
			/*height: 300px;*/
			/*border: 1px solid #1122CC;*/
		} 
    }
    .Offre4ColLiq #sidebar2 {
	width: 100%; /* cet élément est flottant, il faut donc lui attribuer une largeur */
	/*background: #E6EFFF;*/
	padding:0; /* le remplissage en haut et en bas crée un espace visuel à l'intérieur de cet élément div  */
	/*border: 0px solid #1122CC;*/
	/*border-bottom-width:1px;*/
    }
    @media screen and (min-width: 768px) {
		.Offre4ColLiq #sidebar2  {
			float: right; /* cet élément est flottant, il faut donc lui attribuer une largeur */
			width: 25%;
			/*
			height: 300px;
			border: 0px solid #1122CC;
			border-left-width:1px;
			*/
    	} 
    }
	/*.Offre4ColLiq #sidebar1 p, .Offre4ColLiq #sidebar2 p ,.Offre4ColLiq #mainContent p{	
    color:#000066;
    }
    .Offre4ColLiq #sidebar1 h3, .Offre4ColLiq #sidebar2 h3 .Offre4ColLiq #mainContent h3{	
    color: #1122CC;
    }
    */	
    .Offre4ColLiq #sidebar1 p, .Offre4ColLiq #sidebar1 h3, .Offre4ColLiq #sidebar2 p, .Offre4ColLiq #sidebar2 h3 {
      margin-left: 10px; /* il est conseillé d'attribuer des valeurs pour les marges gauche et droite de chaque élément qui sera placé dans les colonnes latérales */
      margin-right: 10px;
    }
    
    .Offre4ColLiq #titreh1 h1{
    color: #ffff98; 
    text-decoration: none;
    text-align:center;
    background-color: rgba(100,100,125,0.6);
	}

    /* Conseils pour mainContent :
    1. l'espace compris entre l'élément mainContent et les encadrés est créé avec les marges gauche et droite de l'élément div mainContent.
    2. pour éviter une perte de l'élément flottant à la résolution minimale prise en charge (800 x 600), la taille des éléments contenus par l'élément div mainContent doit être égale ou inférieure à 300pixels (images comprises).
    3. dans le commentaire conditionnel pour Internet Explorer ci-dessous, la propriété zoom permet de donner à l'élément mainContent l'attribut "hasLayout." Cela évite l'apparition de plusieurs bogues spécifiques d'Internet Explorer.
    */
    .Offre4ColLiq #mainContent {
	margin-top: 0;
	margin-right: 10px;
	margin-bottom: 0;
	margin-left: 10px;
	padding:0;
    }
    
    .OffreOptional {
      display:none;
    }
    @media screen and (min-width: 768px) {
		.OffreOptional  {
			display:block;
		} 
    }
    .OffreBkground {
      background-color: rgba(230, 239, 255, 0.8);
    }
    /****** 4 colonnes sous bandeau ***************/
    
    .QuatInfos #container {
      width: 98%;  /* ce paramétrage crée un conteneur dont la largeur est 80 % de celle du navigateur */
	  height: 1000px;
	  
      background-color:#E6EFFF;
      /*color: #000;
      background: #065FA3;*/  /*#2A6EFF;*/
      text-align: left; /* ce paramétrage annule le paramètre text-align: center de l'élément body. */
	  padding:0;
	  margin: 0 auto; /* les marges automatiques (et dotées d'une largeur positive) centrent la page */
	  border: 1px solid #1122CC;
	  padding:0; /* le remplissage en haut et en bas crée un espace visuel à l'intérieur de cet élément div  */
	  /*padding : top right bottom  left padding:20px 50px 20px 50px;
	  border: 1px solid #000000;*/
    }
    @media screen and (min-width: 768px) {
		.QuatInfos #container {
		  width: 99%;  /* ce paramétrage crée un conteneur dont la largeur est 80 % de celle du navigateur */
		  height: 300px;
		}
    }
    
    .QuatInfos #container  p{
    font-family: Helvetica;
    font-size: 14px;
    line-height: 25px;
    
	}

    .QuatInfos #container  a:hover {
    color: #FFC809; /*#1122CC;*/
    text-decoration: underline;
	}
	.QuatInfos #container a:visited {
    color: #C83200;
    text-decoration: none;
	}	
	.QuatInfos #container a{
    color:#003C96;
    text-decoration: none;
	}

    /* Conseils pour les encadrés :
    1. Comme nous travaillons en pourcentages, il est préférable de ne pas utiliser de remplissage latéral pour les encadrés. Pour les navigateurs conformes aux standards, il sera ajouté à la largeur, créant ainsi une largeur réelle inconnue. 
    2. Pour créer un espace entre le côté de l'élément div et les éléments qu'il contient, attribuez une marge gauche et une marge droite à ces éléments, comme dans la règle ".QuatInfos #sidebar1 p".
    3. Comme Internet Explorer calcule les largeurs après avoir restitué l'élément parent, des bogues inexpliquées peuvent parfois se produire pour les colonnes calculées en pourcentage. Pour obtenir des résultats plus prévisibles, il est donc préférable de dimensionner les colonnes en pixels.
    */
    .QuatInfos #sidebar1 {
      width: 100%; /* cet élément est flottant, il faut donc lui attribuer une largeur */
      background: #E6EFFF ;  /*#065FA3;#2A6EFF;*/
      padding: 0; /* le remplissage en haut et en bas crée un espace visuel à l'intérieur de cet élément div  */
      border: 1px solid #1122CC;
    }
    @media screen and (min-width: 768px) {
		.QuatInfos #sidebar1  {
			float: left; /* Cet élément doit précéder dans le code source tout élément à côté duquel il doit être positionné */
			width: 25%;
			height: 300px;
			border: 1px solid #1122CC;
    	} 
    	}
    .QuatInfos #sidebar2 {
	/*float: right;*/ /* Cet élément doit précéder dans le code source tout élément à côté duquel il doit être positionné */
	width: 100%; /* cet élément est flottant, il faut donc lui attribuer une largeur */
	background: #E6EFFF; /*#065FA3; #2A6EFF; border: 1px solid #000000;*/
	padding:0; /* le remplissage en haut et en bas crée un espace visuel à l'intérieur de cet élément div  */
	border: 0px solid #1122CC;
	border-bottom-width:1px;
    }
    @media screen and (min-width: 768px) {
		.QuatInfos #sidebar2  {
			float: right; /* cet élément est flottant, il faut donc lui attribuer une largeur */
			width: 25%;
			height: 300px;
			border: 0px solid #1122CC;
			border-left-width:1px;
    	} 
    	}
	.QuatInfos #sidebar1 p, .QuatInfos #sidebar2 p ,.QuatInfos #mainContent p{	
    color:#000066;
    }
    .QuatInfos #sidebar1 h3, .QuatInfos #sidebar2 h3 .QuatInfos #mainContent h3{	
    color: #1122CC;
    }
    	
    .QuatInfos #sidebar1 p, .QuatInfos #sidebar1 h3, .QuatInfos #sidebar2 p, .QuatInfos #sidebar2 h3 {
      margin-left: 10px; /* il est conseillé d'attribuer des valeurs pour les marges gauche et droite de chaque élément qui sera placé dans les colonnes latérales */
      margin-right: 10px;
    }
    
    /* Conseils pour mainContent :
    1. l'espace compris entre l'élément mainContent et les encadrés est créé avec les marges gauche et droite de l'élément div mainContent.
    2. pour éviter une perte de l'élément flottant à la résolution minimale prise en charge (800 x 600), la taille des éléments contenus par l'élément div mainContent doit être égale ou inférieure à 300pixels (images comprises).
    3. dans le commentaire conditionnel pour Internet Explorer ci-dessous, la propriété zoom permet de donner à l'élément mainContent l'attribut "hasLayout." Cela évite l'apparition de plusieurs bogues spécifiques d'Internet Explorer.
    */
    .QuatInfos #mainContent {
	margin-top: 0;
	margin-right: 10px;
	margin-bottom: 0;
	margin-left: 10px;
	padding:0;
    }
    /*********************************************************/
    /****** Fond pour les pages pub matos ***************/
    .Cadre-vet #container {
      width: 100%;  /* ce paramétrage crée un conteneur dont la largeur est 80 % de celle du navigateur */
	  height: 100%;	/*2600px;*/
	  background: rgba(255,255,255,0.65); /*#C8E6C3;  vert pale*/
      text-align: left; /* ce paramétrage annule le paramètre text-align: center de l'élément body. */
	  padding:0;
	  margin: 0 auto; /* les marges automatiques (et dotées d'une largeur positive) centrent la page */ 
    }
    @media screen and (min-width: 768px) {
		.Cadre-vet #container  {
			background: url(../img/fond-vet.jpg) 0 0 no-repeat;
			background-size: 100% 100%;
			height: 100%;/*1500px;*/
    	} 
    }
    .Cadre-vet a.pub{
		display: inline-block;
		font-family:"Times New Roman", Times, serif;
		font-size:14px;
		line-height:1em;
		padding: 25px 30px 25px 10px; /*padding: 11px 30px 12px 30px;*/
		color: #0000BC;
		text-transform:uppercase;
		margin-top: 0px;
		background: url(../img/pubveto.jpg) 0 0 no-repeat; 
		background-size: 44px 60px;
	}

	.Cadre-vet a.pub:hover {
		background:  #0000BC;
		color: #fff;
	}
	
    .Cadre-vet h1 {
		font-size: 50px; /*36px;*/
		font-weight: normal;
		font-family: "Nadianne","Times New Roman", Georgia, Times, serif;
		color: #16446c;
		line-height: 1em;
		text-transform:none;	
	}
	.Cadre-aio #container,.Cadre-blanc #container,.Cadre-oph #container, .Cadre-labo #container, .Cadre-Env #container  {
      width: 100%;  /* ce paramétrage crée un conteneur dont la largeur est 80 % de celle du navigateur */
	  height: 100%;	/*2600px;*/
	  background: rgba(255,255,255,0.65); /*#C8E6C3;   vert pale*/
      text-align: left; /* ce paramétrage annule le paramètre text-align: center de l'élément body. */
	  padding:0;
	  margin: 0 auto; /* les marges automatiques (et dotées d'une largeur positive) centrent la page */
	 
    }
    @media screen and (min-width: 768px) {
		.Cadre-oph #container, .Cadre-labo #container, .Cadre-Env #container  {
			/*background: url(../img/fond-commun.jpg) 0 0 no-repeat;*/
			background-size: 100% 100%;
			height: 100%;	/*1500px;*/
			} 
    	}
     	
     .Cadre-aio a.pub,.Cadre-blanc a.pub,.Cadre-oph a.pub,.Cadre-labo a.pub{
		display: inline-block;
		font-family:"Times New Roman", Times, serif;
		font-size:14px;
		line-height:1em;
		padding: 25px 30px 25px 10px; /*padding: 11px 30px 12px 30px;*/
		color: #0000BC;
		text-transform:uppercase;
		margin-top: 0px;
		background: url(../img/pubveto.jpg) 0 0 no-repeat; 
		background-size: 44px 60px;
	}

	.Cadre-aio a.pub:hover,.Cadre-blanc a.pub:hover,.Cadre-oph a.pub:hover, .Cadre-labo a.pub:hover {
		background:  #0000BC;
		color: #fff;
	}

    .Cadre-aio h1,.Cadre-blanc h1, .Cadre-oph h1, .Cadre-labo h1, .Cadre-aio h4{
		font-size: 50px; /*36px;*/
		font-weight: normal;
		font-family: "Nadianne","Times New Roman", Georgia, Times, serif;
		color: #16446c;
		line-height: 1em;
		text-transform:none;	
	}  
	.Cadre-aio h1{
		color: #412B59;
	} 
	.Cadre-aio h3{
		font-size: 24px;
		text-align: center;
	}  
	.Cadre-aio h4{
		font-size: 20px;
		color: #4E4C8B;
		text-align: center;
	}
		  
	.Cadre-Env #container {
	  background: #FFF;  /*fond blanc*/
    }
    @media screen and (min-width: 768px) {
		.Cadre-Env #container {
			background: url(../img/monde.jpg) 0 0 no-repeat;
			background-size: 100% 100%;
			height: 100%;	/*1500px;*/
		} 
    }
    
    
    	
	.Cadre-Env h1, .Cadre-Env h2{
		font-weight: normal;
		font-family: "Times New Roman", Georgia, Times, serif;
		color : rgba(46, 150, 160, 1.0);
		font-size: 48px;
		line-height: 1em;
		text-transform:none;
		padding-left: 5%;
		
	} 
	 @media screen and (min-width: 768px) {
		 .Cadre-Env h1, .Cadre-Env h2{
			color : rgba(150, 225, 255, 1.0);
		} 
	 }	  
	
	.Cadre-Env h2{
		color : rgba(0, 65, 135, 1.0);
		font-size: 36px;
		line-height: 1em;
	}
	/*.Cadre-Env h1{
		background: url(../img/monde.jpg) 0 0 no-repeat;
		background-size: 100px 100px;
	}*/
				
	@media screen and (min-width: 768px) {
		.Cadre-Env h2{
			color : rgba(183, 235, 235, 1.0);
		}
		/*.Cadre-Env h1{
			background: none;
		}*/
	}
	.Cadre-Env .brillant{
		font-weight: bold;
		color : rgba(0, 32, 96, 1.0);
	}
	@media screen and (min-width: 768px) {
	.Cadre-Env .brillant{
		color: rgba(60, 230, 255, 1);
	}
	}
	
	
	.Cadre-Env .text-info{
		font-weight: normal;
		font-family: "Times New Roman", Georgia, Times, serif;
		color : rgba(0, 32, 96, 1.0);
		font-size: 20px;
		line-height: 1em;
		text-transform:none;
		display: inline-block;
		padding: 10px 5% 10px 5%;/*padding: 25px 30px 25px 10px;*/
		margin-top: 0px;
	}
	@media screen and (min-width: 768px) {
		.Cadre-Env .text-info{
			color : rgba(183, 235, 235, 1.0);
			padding: 10px 40% 10px 5%;/*padding: 25px 30px 25px 10px;*/
		}
	}
	 	
	.Cadre-Env ul {
		font-weight: normal;
		font-family: "Times New Roman", Georgia, Times, serif;
		font-size: 20px;
		line-height: 1em;
		color: rgba(0, 32, 96, 1);
		text-transform:none;
		display: inline-block;
		list-style: none;
	}
	.Cadre-Env ul li{
		padding-left: 16px;
		padding-right: 5%;
		margin-top:10px;			
	}
	.Cadre-Env ul.niv0 li{
		background: url(../img/dot-orange.gif) 0 6px no-repeat;
		color : rgba(0, 32, 96, 1);
		margin-left: 5%;
		font-weight: bold;
	}  
	.Cadre-Env ul.niv1 li{
		background: url(../img/dot-blue.gif) 0 6px no-repeat;
		color : rgba(0, 32, 96, 1.0);
		margin-left: 10%;
		font-weight: normal;
	} 
	.Cadre-Env ul.niv2 li{
		background: url(../img/dot-black.gif) 0 6px no-repeat;
		color : rgba(0, 32, 96, 1.0);
		margin-left: 15%;
		font-weight: normal
	} 
	@media screen and (min-width: 768px) {
		.Cadre-Env ul {
			color : rgba(200, 255, 255, 1.0);
		}
	
		.Cadre-Env ul li{
			padding-left: 16px;
			padding-right: 40%;			
		}
		.Cadre-Env ul.niv0 li{
			background: url(../img/dot-orange.gif) 0 6px no-repeat;
			color : rgba(255, 190, 90, 1.0);
			margin-left: 5%;
			font-weight: bold;
			
		}  
		.Cadre-Env ul.niv1 li{
			background: url(../img/dot-blue.gif) 0 6px no-repeat;
			color: rgba(200, 255, 255, 1);
			margin-left: 10%;
			font-weight: normal;
		} 
		.Cadre-Env ul.niv2 li{
			background: url(../img/dot-black.gif) 0 6px no-repeat;
			color: rgba(200, 255, 255, 1);
			margin-left: 15%;
			font-weight: normal
		} 
	}
	
	    /*********************************************************/

	
    /* Diverses classes à réutiliser */
    .fltrt { /* cette classe permet de rendre flottant le côté droit d'un élément dans la page. L'élément flottant doit précéder l'élément à côté duquel il doit se trouver dans la page. */
    	float: right;
    	margin-left: 8px;
    }
    .fltlft { /* cette classe permet de rendre flottant le côté gauche d'un élément dans la page L'élément flottant doit précéder l'élément à côté duquel il doit se trouver dans la page. */
    	float: left;
    	margin-right: 8px;
    }
    .clearfloat { /* cette classe doit être placée pour un élément div ou break et doit être l'élément final avant la balise de fin d'un conteneur qui doit contenir entièrement un élément flottant */
    	clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }
    /*********************************************************/	
    .Separezone{
	text-align:center;
	color: #ffff98;
	background-color: rgba(100,100,125,0.7);
	}