/**------------------------------------------------------------------------------------------------------------------**/
/**	CSS principal du site
/**     - le design est réalisé pour mobile afin de ne pas charger inutilement des éléments que seuls les grands écrans utilisent.
/**     - les modifications à apporter pour grands écrans sont contenues dans des medias queries en fin de document.
/**------------------------------------------------------------------------------------------------------------------**/


/**------------------------------------------------------------------------------------------------------------------**/
/**	HTML 5 																									   		 **/
/**------------------------------------------------------------------------------------------------------------------**/
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
	display: block; 
}

/**------------------------------------------------------------------------------------------------------------------**/
/** CODES COULEUR
/**------------------------------------------------------------------------------------------------------------------**/
/**	#000099;	bleu foncé

/** #6699ff;    bleu clair

/** #eec900;    jaune

/**------------------------------------------------------------------------------------------------------------------**/
/** DECLARATIONS DE BASE
/** Placer dans cette section toutes les déclarations de base communes aux sites
/**------------------------------------------------------------------------------------------------------------------**/
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0; 
	border: 0; 
	font-size: 100%; 
		/** Mais pourquoi ce font-size: 100% sur l'élément html, alors que cela devrait être inutile ? 
		Il s'agit en fait d'un correctif pour un bug d'Internet Explorer Windows, 
		bug qui rend « anarchique » le redimensionnement du texte à la volée dans ce navigateur [3]. 
		IE/Win a du mal à gérer des tailles de texte en em si aucune déclaration en pourcentages ne les précède
		Source : http://www.alsacreations.com/article/lire/563-gerer-la-taille-du-texte-avec-les-em.html **/
	vertical-align: baseline; 
	background: transparent;
}

img {
	/** Empêche les images de dépasser de leur contenant (par ex DIV) **/
	max-width:100%;
	/** Eviter un petit espace sous une image plaçée seule dans un DIV 
		Source : http://www.alsacreations.com/astuce/lire/52-espaces-sous-les-images.html **/
	vertical-align: bottom;
}

/** Listes sans puces par défaut **/
ol, ul { 
	list-style: none; 
}

/** Définir le style du texte à l'intérieur des champs de formulaire **/
input, textarea  {
	font-family:Palatino, Verdana, sans-serif;
	font-size: 0.9em;
}
   
body {
	font-family: Verdana, sans-serif;
	font-size: 0.9em;
	color:#333;
	text-align:justify;
	
	background-image: url(../images/lgrey088.gif); /** 008.jpg - 011.jpg - 015.jpg - 088.gif*/
	background-repeat: repeat;
	background-position:top left;
	
	/**background-color:#ccc;**/
}




/*
.acceleration {
	float:left;
	width:50%;
	background-color:white;
	text-align:right;
	animation-duration: 3s;
    animation-name: slideAcceleration;
}

.excellence {
	float:right;
	width:50%;
	background-color:gray;
	animation-duration: 3s;
    animation-name: slideExcellence;
}

@-moz-keyframes slideAcceleration {
    from {
      margin-left: -50%;
    }
    
    to {
      margin-left: 0%;
    }
   } 
   
@-moz-keyframes slideExcellence {
    from {
      margin-right: -50%;
    }
    
    to {
      margin-right: 0%;
    }
   }    

.venture {
	background-color:lightgray;
	text-align:center;
}
*/

/**------------------------------------------------------------------------------------------------------------------**/
/** TITRES
/** Placer dans cette section tous les hn 
/**------------------------------------------------------------------------------------------------------------------**/

/** les H1 sont nécessaires pour la sémantique du site, or ils sont redondants avec le contenu des <nav>, 
    donc on les rend invisibles par le CSS **/
h1 {
	display:none;
}

/** Certains H2 seront également redondants et donc rendus invisibles par CSS **/
h2 {
	display:none;
}

/** Les H2 communs sont les sous-titres présents dans les articles **/
h2.article_sous_titre, h2.AccelerationToExcellence {
	display:block;
	margin-bottom:2%;
	font-weight:bold;
	text-align:center;
}

	h2.AccelerationToExcellence {
		margin-bottom:3%;
		font-size:1.3em;
		color:#555;
		letter-spacing:0.25em;
		/*background-color:pink;*/
	}

/** D'autres H2 sont des titres de catégories d'infos **/
h2.titre_cat {
	display:block;
}

/** D'autres H2 sont le nom des collaborateurs **/
h2.cv_nom {
	display:block;
}


/**------------------------------------------------------------------------------------------------------------------**/
/** CADRES ARRONDIS
/** Placer dans cette section tous les éléments qui ont des coins arrondis
/**------------------------------------------------------------------------------------------------------------------**/
.cv_form fieldset, 
.cv_form input, 
.cv_form textarea {
	-moz-border-radius:0.4em;
	-khtml-border-radius:0.4em;
	-webkit-border-radius:0.4em;
	border-radius: 0.4em;	
}

/**------------------------------------------------------------------------------------------------------------------**/
/** BORDURES GENERALES
/** Placer dans cette section tous les éléments qui ont des bordures
/**------------------------------------------------------------------------------------------------------------------**/
.cv_form fieldset, 
.cv_form input, 
.cv_form textarea {
	border:1px solid #000; 
}

.menu_ter,
.photo {
	border :1px solid #000099;
}

header {
	border-bottom:1px solid #999;
}	

article.article_newsletter {
	border:1px solid #999;
}	

.newsletter_url, .newsletter_pdf {
	border-top:1px solid #999;
}

article {
}

article > article {
	border:none;
}


.infos_cat_titre {
	border-top:1px solid #00299f;
}

.infos_cat_sous_titre {
	border-bottom:1px solid #00299f;
}

.info_contenu {
	border-left:1px solid #00299f;
}	

/**------------------------------------------------------------------------------------------------------------------**/
/** TRANSITIONS
/** Placer dans cette section tous les éléments qui ont des transitions
/**------------------------------------------------------------------------------------------------------------------**/
.logo p, 
p.logo_titre,
.galerie_vignette img {
	   -moz-transition-property	: font-size;  
 	   -moz-transition-duration	: 1s;  
 	-webkit-transition-property	: font-size;  
 	-webkit-transition-duration	: 1s;  
 	     -o-transition-property	: font-size;  
 	     -o-transition-duration	: 1s;  
    	-ms-transition-property	: font-size;  
 	    -ms-transition-duration	: 1s;  
	        transition-property	: font-size;  
 	        transition-duration	: 1s;  	
}

/**------------------------------------------------------------------------------------------------------------------**/
/** OMBRAGES
/** Placer dans cette section tous les éléments qui ont des ombrages
/**------------------------------------------------------------------------------------------------------------------**/
/** ajouter cette class directement sur le tage IMG concerné dans le HTML **/
/** pour supprimer les ombrages sur les images du site, enlever la class dans le HTML ou vider celle du CSS **/

/** http://viti-vino.blogspot.com/2010/07/ombrer-boites-box-shadow.html**/
.ombrage {
	/*-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.15);
	-moz-box-shadow: 0 3px 6px rgba(0,0,0,.15);
	box-shadow: 0 3px 6px #000000;*/
}

article {
/**	-webkit-box-shadow: 0 3px 6px rgba(136,136,136,.15);
	   -moz-box-shadow: 0 3px 6px rgba(136,136,136,.15);
	        box-shadow: 0 3px 6px #888888;
	        **/
}
	
	/** A RAJOUTER DS LES COMMENTAIRES CONDITIONNELS
	<!--[if lte IE 8]> 
	  <style type="text/css"> 
	  .ombrage { 
	    filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=12); 
	    zoom: 1; 
	  } 
	  </style> 
	<![endif]--> 
	**/	
	
.logo p {
	text-shadow: 2px 2px 4px #000;
}	

.lang, 
.menu_sec, 
.menu_ter /*,
.AccelerationToExcellence*/ {
	text-shadow: 1px 1px 2px #000;
}

/**------------------------------------------------------------------------------------------------------------------**/
/** LIENS																									   		 **/
/**------------------------------------------------------------------------------------------------------------------**/
a { 
	text-decoration:none;
	margin:0;
	padding:0;
	color:#000099; 
	/** fait disparaître le cadre FX autour des liens "active" en le colorant en transparent **/	
	outline-color:transparent;
}

a:link:hover, 
a:visited:hover {
	color:#6699ff; 
}

/** Spécification des liens externes au site - mise en place d'une image indiquant que le lien est externe **/
a[href^="http:"] {
	background-color: transparent;
	background-image : url(../images/lienext.gif);
	background-repeat: no-repeat;
	background-position: right;	   
	padding-right: 10px;
}
	
a[href^="http://www.axxeleo.com/"], a[href^="http://www.axxeleo.com"], a[href^="http://www.google.com/"], a[href^="http://www.facebook.com/"], a[href^="http://www.linkedin.com/"], a[href^="http://maps.google.com/"], a.nolienext {
	background-color: transparent;   
	background-image : none;
	padding-right: 0px;	
}	

a:link:active, 
a:visited:active, 
a:link:focus, 
a:visited:focus {
	color:#fff;	
}

/** Liens du plan du site **/
.plan_chap,
.plan_page,
.plan_annexe,
.plan_sous_annexe {
	display:block;
}

/** Attention, cas particulier : il ne s'agit pas d'un lien mais d'un span **/
.plan_chap {
	font-weight:bold;
	/**background-color:pink;**/
}

.plan_page {
	margin:0.5em 0 0.5em 2em;
	/**background-color:lightgreen;**/
}

.plan_annexe {
	margin:0.5em 0 0.5em 4em;
	/**background-color:yellow;**/
}

.plan_sous_annexe {
	margin:0.5em 0 0.5em 6em;
	/**background-color:lightblue;**/
}

/**------------------------------------------------------------------------------------------------------------------**/
/** STRUCTURE GENERALE 
/**------------------------------------------------------------------------------------------------------------------**/
/**/
/**/		/** CADRE CENTRAL QUI PERMET LE CENTRAGE HORIZONZONTAL DE TOUT LE SITE 
/**/		/**----------------------------------------------------------------------------------------------------------**/
/**/		#conteneur {
/**/			width: 300px;	
/**/			margin: 0px auto;             /** centrage horizontale automatique **/
/**/			background-color:tranparent;  /** pour les old IE qui ne supportent pas les gradient **/
/**/		}
/**/
			/** Problème :
			_______________________________
			|  ________    _______________ |
			|__|      |____|             |_|
			   |      |    |_____________|
			   |______|
	
			Faire en sorte que le conteneur corps englobe les 2 div flottants qui sont à l intérieur de lui 		
			_______________________________
			|  ________    _______________ |
			|  |      |    |             | |
			|  |      |    |_____________| |
			|  |______|                    |
			|______________________________|
			
			Source : http://www.alsacreations.com/tuto/lire/7
			**/	
/**/		
/**/		/** Faire en sorte que le conteneur "englobe" les 2 div flottants qu'il contient **/
/**/		#conteneur:after {
/**/			content: ""; /** Important, sinon l'élément n'est pas généré. **/
/**/			display: block;
/**/			clear: both;
/**/		}		
/**/		/** ou overflow:hidden sur le corps **/	
/**/
/**/		/** HEADER DU SITE CONTENANT LE LOGO, UNE IMAGE, etc 
/**/		/**----------------------------------------------------------------------------------------------------------**/
/**/		/** header standard, parfaitement flexible **/
/**/		header {
/**/			/*text-align:center;*/
/**/			margin:10px auto 20px auto; /** ajouter margin-bottom avec valeur pour séparer visuellement les 2 blocs pour test **/
/**/		}
/**/
/**/			header:after {
/**/				content:"";
/**/				display:block;
/**/				clear:both;
/**/			}
/**/
/**/		/** header au contenu HTML identique au précédent, mais positionné en fixe (pile poil par dessus le 1er header). **/
/**/		/** Surcharge de code HTML (redondance...) mais seul moyen actuel pour que le header fixed ne déborde pas sur les divs suivants **/
/**/		/** en cas d'augmentaton importante du zoom **/
/**/			.header_bis {
/**/				position:fixed;
/**/				top:0;
/**/				width:90%;
/**/				/** couleur de fond obligatoire car sinon, on voit en transparence le header "du dessous" lors du scroll **/
/**/				background-color:#eeeeee; 	 /** gris très pâle de fond **/	
/**/			}
/**/			
/**/		/** NAV(s) - 1 ou plusieurs barres de menus 
/**/		/**----------------------------------------------------------------------------------------------------------**/
/**/					
/**/		
/**/		
/**/		/** ARTICLE 
/**/		/**----------------------------------------------------------------------------------------------------------**/
/**/		article {
/**/			float:none;
/**/			width:auto;
/**/			
/**/			margin:0 0 3% 0; 
/**/			padding:1.5% 0;
/**/			text-align:justify;
/**/			/*background : rgb(255,255,255); /** pour les IE8 et inf... **/
/**/			/**background : rgba(255,255,255,.65);**/
/**/			overflow:hidden;
/**/		}	
/**/		
/**/		article > article {
/**/			float:none;
/**/			width:auto;
/**/
/**/			margin:0 0 2% 0;
/**/			padding:0;
/**/		}
/**/
/**/		article p {
/**/			padding:0 0 0 0;
/**/		}
/**/		
/**/		/** FOOTER DU SITE COMPRENANT LE COPYRIGHT, DIVERS LIENS, LA DATE DE MODIFICATION 
/**/		/**----------------------------------------------------------------------------------------------------------**/
/**/		footer {
/**/			float:none;
/**/			/*position:fixed;
/**/			/*bottom:0;
/**/			
/**/			margin:3% 0 0 0; 
/**/			padding:0;
/**/			
/**/			font-size: 0.8em;
/**/			color:#fff;
/**/			
/**/			background-color:#666666/**0C3183**/;
/**/			border-bottom:3px solid #000;
/**/			overflow:hidden;
/**/		}		
/**/



/**------------------------------------------------------------------------------------------------------------------**/
/** MISE EN PAGE SPECIFIQUE 
/**------------------------------------------------------------------------------------------------------------------**/

/** pour cacher des éléments dans les petits écrans et les faire apparaître sur grands écrans **/
.cache {
	display:none;
}

/** HEADER DU SITE CONTENANT LE LOGO, UNE IMAGE, etc 
/**------------------------------------------------------------------------------------------------------------------**/

.bande_som {
	height:20px;
	background: #0C3183;
}

#image {
	background-color:#transparent;
}

	.lang {
		position:absolute;
		top:0;
		left:10px;
		width:40%;
		margin:0;
		padding:0;
		text-align:left;
		/*background-color:purple;*/
	}
	
		.lang a {
			display:inline-block;
			margin:0;
			padding:0 7% 0 0;
			font-weight:bold;
			color:#000099;
			/*background-color:yellow;*/
		}

	.logo {
		margin:0 ;
		overflow:hidden;
		vertical-align:baseline;
	}		
		/** contient le titre du site **/
		p.logo_titre {
			text-align:center;
			padding:5px;
			margin-bottom:3%;
			/*border:1px solid red;*/
		}

/**
	.photo {
		display:none;
		background-color:#transparent;
		margin-top:1px;
		text-align:right;
		padding:4px;
		height:150px;
	}
**/

/** NAV(s) - 1 ou plusieurs barres de menus 
/**------------------------------------------------------------------------------------------------------------------**/
/* Mise en place du caractère unicode pour indiquer le menu déroulant sur mobile */
[data-icon]:before {
	content: attr(data-icon);
}

.logo label,.logo [type=checkbox] {
	cursor: pointer;
}

/* Cacher le checkbox utilisé pour dérouler le menu par clic sur mobile */
.logo [type=checkbox] {
	display: none;
}	

/* Styliser le 'bouton' d'accès au menu sur mobile - en haut à droite */
.logo label {
		position: absolute; 
		top: 7px; 
		right: 7px;
		z-index: 2000;
		padding: 0.1em 0.3em 0.2em 0.3em;
		font-size: 2.4em;
    	font-weight: bold;
    	line-height: .7em;
		text-shadow: 1px 1px 0 #000;
		background-color:#999;
		border-radius: 4px;
		color: #fff;
	}
	
ul#menu, #menu ul, #menu li {
	padding:0;
	margin:0;
}

/* Styliser le menu en général */
ul#menu {
	background: /*#2D2D2D*/#666;
	position: absolute;
		top: 0; 
		left: -100%;
		z-index: 1337;
	width:250px;
	
	/* Bordure bas et droit autour du bloc menu */
	border-bottom: 1px solid #121214;
	border-right: 1px solid #121214;
	border-radius: 0 0 6px 0;
	-webkit-transition: left .4s;
	   -moz-transition: left .4s;
	    -ms-transition: left .4s;
	        transition: left .4s;
}

/* Si le inupt est checked - soit cliqué - on ramène le menu à la marge de gauche */
.logo input:checked + ul#menu {
	left: 0;
}

/*
.logo label input:checked {
	background-color:red;
	}
*/	

/* Styliser les éléments de liste du menu */
/* -------------------------------------- */
	#menu li a {
		display:inline-block;
		position:relative;
		width:233px;
		padding: .9em .6em;
		/*color: rgba(255,255,255,.6);*/
		border-top: 1px solid /*#424242*/#999;
		border-bottom: 1px solid /*#121214*/#333;
		color:white;
	}
	
	/*#navigation*//*#menu li a:not(:only-child):after {*/
	#menu li a.menu_mobile_fleche:not(:only-child):after {
		content: "›";
		float: right;
		font-size: 1.2em;
		font-weight:normal;
		color: #fff;
		margin-right: .4em;
		line-height: 1;
	}
	
	#menu li a + a {
		/*display:none;*/
		position:absolute;
		left:0;
		border:none;
		width:233px;
		height:1.6em;
	}
		
	/*#navigation*/#menu li:last-child a {
		border-bottom: 0;
	}
	
	/*#navigation*/#menu li a:hover, /*#navigation*/#menu li a:active {
		background: rgba(0,0,0,.35);
		color:#999;
	}
	
	/*#navigation*/#menu li ul li a:hover, /*#navigation*/#menu li ul li a:active {
		background: rgba(0,0,0,.55);
	}
	
	
	
/* Styliser les éléments de liste du sous-menu */
/* ------------------------------------------- */
	/*#navigation*/#menu ul {
		max-height: 0;
		overflow: hidden;
		background: rgba(255,255,255,.3);
		-webkit-transition: .4s max-height;
	       -moz-transition: .4s max-height;
		     -o-transition: .4s max-height;
		    -ms-transition: .4s max-height;
		        transition: .4s max-height;
	}
	
	/*#navigation*/#menu li:hover > ul {
		max-height: 25em;
	}
	
	/* Faire tourner le > au moment du hover sur li */
	/*#navigation*/#menu li:hover a:not(:only-child):after {
		-webkit-transform: rotate(90deg);
		   -moz-transform: rotate(90deg);
		     -o-transform: rotate(90deg);
		    -ms-transform: rotate(90deg);
		        transform: rotate(90deg);
	}
	/*#navigation*/#menu /*ul*/ ul a:before {
		display: none;
	}






















 	
 	a.sous-menu {
 		display:none;
 		margin-top:0px;
 		font-size:0.9em;
 	}

/** ARTICLE 
/**----------------------------------------------------------------------------------------------------------**/
.article_centre {
	text-align:center;
}	

.liens_lateraux {
}

.liens_lateraux h2 {
}

.autres_titres {
	display:block;
	text-align:left;
	margin:0 0 2% 30%;
}

.autres_titres img {
	margin-right:10px;
	border:1px solid #fff;
}

.autres_titres > img {
	border:1px solid #999;
}

.img_centree {
	text-align:center;
	padding:2% 0 2% 0;
}

	.img_centree img {
	}
	
	/** p qui suit immédiatement le div class=img_centrée **/
	.img_centree + p {
		
	}

.date {
	padding:3% 0 0 0;
	font-size: 0.9em;
	text-align:left;
}

.image_droite { 
	width:100%;
	padding-bottom:5%;
	text-align:center;
}
	.image_droite img { 
		padding:1.5%;
		text-align:right;
		/*background-color:white;*/
		/*border:1px solid black;*/
	}

.image_gauche { 
	width:100%;
	padding-bottom:5%;
	text-align:center;
}	
	
	.image_gauche img { 
		padding:1.5%;
		/*border:1px solid black;*/
	}
	
/** SLIDER D'IMAGES
/**----------------------------------------------------------------------------------------------------------**/
input#slide1, input#slide2 {
	display: none;
}

#slide1:checked ~ #slides .inner { margin-left:0; }
#slide2:checked ~ #slides .inner { margin-left:-100%; }
/*#slide3:checked ~ #slides .inner { margin-left:-200%; }
#slide4:checked ~ #slides .inner { margin-left:-300%; }
#slide5:checked ~ #slides .inner { margin-left:-400%; }*/

#overflow {
	width: 100%;
	overflow: hidden;
}

#slides .inner {
	width:500%;
	line-height: 0;
}

#slides figure {
	position:relative; /* nécessaire pour ombrer l'image au moyen de la pseudo class :after */
	padding:0px; 
	margin:0;
	width: 20%;
	float: left;
	background-color:white;
}

/* ajouter un ombrage intérieur de l'image */
#slides figure:after {
	position: absolute;  
    display:block;  
    content: " ";  
    top:0; left:0;  
    width: 100%; height: 100%;  
    box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
}

/* Styliser les contrôles du slider */
#controls {
	margin: -9% 0 0 0;
	padding:0 0 0 5%;
	width: 90%;
	height: 25px;
	/*border:1px solid #000;*/
}

#controls label { 
	/*display: none;*/
	width: 25px;
	height: 25px;
	opacity: 0.3;
}

#active {
	margin:3% 0 2% 0;
	text-align: center;
}

#active label {
	-webkit-border-radius: 5px;
	   -moz-border-radius: 5px;
	        border-radius: 5px;
	display:inline-block;
	margin:0 10px; /* pour séparer les boutons radio sur mobile */
	width:10px;
	height:10px;
	background: rgba(0,0,153,.25); /* couleur du rond clair */
}

#active label:hover {
	background: #6699ff; /* couleur du rond trèèèès clair */
	border-color: #777 !important;
}

#controls label:hover {
	opacity: 0.8;
}

#slide1:checked ~ #controls label:nth-child(2), 
#slide2:checked ~ #controls label:nth-child(3), 
#slide3:checked ~ #controls label:nth-child(4), 
#slide4:checked ~ #controls label:nth-child(5),
#slide5:checked ~ #controls label:nth-child(1) {
	background: url('../images/next_25.png') no-repeat;
	float: right;
	margin: 0;
	display: block;
}

#slide1:checked ~ #controls label:nth-child(5),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3),
#slide5:checked ~ #controls label:nth-child(4) {
	background: url('../images/prev_25.png') no-repeat;
	float: left;
	margin: 0;
	display: block;
}

#slide1:checked ~ #active label:nth-child(1),
#slide2:checked ~ #active label:nth-child(2),
#slide3:checked ~ #active label:nth-child(3),
#slide4:checked ~ #active label:nth-child(4),
#slide5:checked ~ #active label:nth-child(5) {
	background: #000099; /* couleur du rond foncé = sélectionné */
	border-color: #000099 !important;
}

/* Styliser le bloc d'infos en surimpression sur le slider */
.info, .info2 {
	position: absolute;
	top:5%;
	max-width:35%;
	padding: 1% 2%;
	line-height: 12px;
	font-style: italic;
	font-size:0.75em;
	color: #000;
	text-align: justify;
	opacity: 0;
	/*background:rgba(120,120,120,0.75);*/	
	background:rgba(255,255,255,0.75);
	z-index:500;
}
	.info {
		left:2%;
	}

	.info2 {
		right:2%;
	}

.info h3, .info2 h3 {
	color: #333;
	margin: 0 0 5px;
	font-weight: normal;
	font-style: normal;
	font-size:1.1em;
	text-align:left;
}

.info span, .info2 span {
	display:none;
}

.read_more_txt {
	margin:5px 0 0 0;
	text-align:right;
}

/* Slider Styling */

#slides {
	margin: /*45px 0 0*/ 0;
	padding:0;
	/*-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;*/
	/*box-shadow: 1px 1px 4px #666;*/
	/**background: #fff;**/	
}

/* Animations */

/* fonction d'animation, n'oubliez pas de prefixer ! */  
    @-moz-keyframes slider {  
        0%, 20%, 100%   { left: 0 }  
        25%, 45%        { left: -100% }  
       /* 50%, 70%        { left: -200% }  
        75%, 95%        { left: -300% }  */
    }  

#slides .inner {
	-webkit-transform: translateZ(0);
	-webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
	   -moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
        -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
         -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
            transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */

	-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
	   -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
        -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
         -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
            transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */        
}

#slider {
	 -webkit-transform: translateZ(0);
	-webkit-transition: all 0.5s ease-out;
	   -moz-transition: all 0.5s ease-out;
	     -o-transition: all 0.5s ease-out;
	        transition: all 0.5s ease-out;
}

#controls label {
	 -webkit-transform: translateZ(0);
	-webkit-transition: opacity 0.2s ease-out;
	   -moz-transition: opacity 0.2s ease-out;
	     -o-transition: opacity 0.2s ease-out;
	        transition: opacity 0.2s ease-out;
}

#slide1:checked ~ #slides figure:nth-child(1) .info,
#slide1:checked ~ #slides figure:nth-child(1) .info2,
#slide2:checked ~ #slides figure:nth-child(2) .info,
#slide2:checked ~ #slides figure:nth-child(2) .info2,
#slide3:checked ~ #slides figure:nth-child(3) .info,
#slide3:checked ~ #slides figure:nth-child(3) .info2,
#slide4:checked ~ #slides figure:nth-child(4) .info,
#slide4:checked ~ #slides figure:nth-child(4) .info2,
#slide5:checked ~ #slides figure:nth-child(5) .info,
#slide5:checked ~ #slides figure:nth-child(5) .info2 {
	opacity: 1;
	-webkit-transition: all 1s ease-out 0.6s;
	   -moz-transition: all 1s ease-out 0.6s;
	     -o-transition: all 1s ease-out 0.6s;
      	    transition: all 1s ease-out 0.6s;
}

#slide1:checked ~ #slides figure:nth-child(1) img,
#slide2:checked ~ #slides figure:nth-child(2) img {
	animation: slider 6s infinite;
}

.info, .info2, #controls, #slides, #active, #active label, .info h3, .info2 h3, .desktop, .tablet, .mobile {
	 -webkit-transform: translateZ(0);
	-webkit-transition: all 0.5s ease-out;
	   -moz-transition: all 0.5s ease-out;
	     -o-transition: all 0.5s ease-out;
	        transition: all 0.5s ease-out;
}	
	
/** 3 BLOCS 
/**----------------------------------------------------------------------------------------------------------**/	
.groupe_blocs, .groupe_blocs_read {
	width:/*65%*/300px;
	margin:0 auto;
	font-size:0.9em;
	text-align:justify;
	overflow:hidden;
	/*background-color:pink;*/
}

.groupe_blocs img {
	padding:0/* 30%*/;
	width:100%;
}

.groupe_blocs .bloc_img_ombrage {
	position:relative;
	border:1px solid transparent;
}

/*.groupe_blocs .bloc_img_ombrage:after {
	position: absolute;  
    display:block;  
    content: " ";  
    top:0; left:0;  
    width: 100%; height: 100%;  
    box-shadow: 0 0 65px rgba(0,0,0, 0.25) inset;
}*/

.groupe_blocs .bloc_img_ombrage:hover {
	border:1px solid #999;
}

.groupe_blocs_read {
	display:none;
}

	.groupe_blocs_titre {
		font-weight:bold;
		padding: 10px 0;
		/*background-color:lightgray;*/
	}
	
.bloc_gauche, .bloc_centre, .bloc_droit {
	margin-bottom:8%; /* Pour créer un espace entre le texte des blocs et l'image suivante */
}

.bloc_gauche2 {
	margin-bottom:8%;
}
	
.read_more {
	margin:0.2% 0 3% 0;	
	padding:3% 3% 3% 0;
	font-size:0.8em;
	/*background-color:#000099;*/
}

.read_more a {
	background-color: white;
	background-image : url(../images/readmore.png);
	background-repeat: no-repeat;
	background-position: right;	   

	padding:3px 22px 3px 5px;
	/*background:rgba(0,0,153,.75);*/
	/*color:#6699ff;*/
	color:#00009;
	border:2px solid #000099;
	border-radius: 5px;
	font-weight:bold;
}

.read_more a:hover {
	background-image : url(../images/readmore_hover.png);
	color:#6699ff;
	border:2px solid #6699ff;
}

/*
.bloc_gauche, .bloc_gauche2 {
	background-color:lightgreen;
}
	
.bloc_centre {
	background-color:lightblue;
}

.bloc_droit, .bloc_droit2 {
	background-color:yellow;
}
*/

/** FORMULAIRE
/**----------------------------------------------------------------------------------------------------------**/
/** Forcer le form a commencer sous le tag qui le précède, même si ce dernier contient des float **/
form:before {
	content:"";
	display:block;
	clear:both;
}

/** Fieldset **/
.cv_form fieldset {
	padding:1em; 		     /** pour décoller le cadre du fieldset des éléments qu'il contient **/
	margin-bottom:2em;       /** Pour décoller les fieldset les uns des autres **/
	border-color:#fff;       /** écraser la couleur par défaut (bleu plus sombre) définie dans les généralités **/
	background:rgb(255,255,255);
	background:rgba(255,255,255,0.4);
}

fieldset legend {
	padding:0.2em 0.8em;
	font-weight:bold;
	/** ombrage du texte **/
	/** text-shadow: 0 1px 1px #0b77b7; **/		
}

fieldset legend em {
	display:block;
	font-size:0.9em;
}

/** pour la petite image, par ex dans le form du Ritz **/
fieldset img {
	float:left;
	margin-right:2%;
	width:3em;
}

/** lien téléphone cliquable pour mobile **/
fieldset a {
	float:none;
	padding:0;
	background-image:none;
	font-weight:normal;
	font-style:normal;
}

/** contient les avertissements de remplissage erroné pour l'envoi de mail **/
fieldset p {
	margin:2em 0 0 0;
	font-style:italic;
	font-size:0.9em;
	/**background-color:lightgreen;**/
}	
	
/** Label des input **/
.cv_form label {
	display:block;
	float:none;
	width:auto;
	/**margin-bottom:1em; /** pour décaler verticalement les lignes de form **/
	margin-left:0;
	padding-bottom:0.5em;
	text-align:left;
	font-weight:bold;
	font-size:0.9em;
}
	
/** Input et Textarea **/	
.cv_form input,  .cv_form textarea {
	width:95%;
	margin-left:0;
	padding:0.25em;
	border-color:#ddd;  /** écraser la couleur par défaut (bleu plus sombre) définie dans les généralités **/
	background:#fafafa; /** couleur de fonds des input **/ /** gris très très pâle **/
}
	
.cv_form textarea {
	min-height:75px;
	resize:vertical;
}
		
.cv_form input:hover,  .cv_form textarea:hover,
.cv_form input:focus,  .cv_form textarea:focus {
	border-color:#aaa;
	background:#eee; 
}

.cv_form input.input_erreur,  .cv_form textarea.input_erreur {
	border:1px solid rgba(0,0,153,0.5);;
	background:rgba(102,153,255,0.1);
}

.cv_form input.input_erreur:hover,  .cv_form textarea.input_erreur:hover,
.cv_form input.input_erreur:focus,  .cv_form textarea.input_erreur:focus {
	border:1px solid rgba(0,0,153,0.9);;
	background:rgba(102,153,255,0.2);
}

/** messages d'erreur **/
.cv_form span {
	display:block;
	
	width:auto;
	margin-left:0;		
	
	padding:0.5em 0 0.5em 0em;
	font-size:0.9em;
	color:#000099;
}
	
.cv_form span:after {
	content: ""; 
	display: block;
	clear: both;
}			

/* Bouton du formulaire de contact */
.bouton_centre {
	margin:0 0 0 50%;
	text-align:center;
}

.message_transmis {
	margin:2.5% 0 2.5% 0;
	font-weight:bold;
	color:#6699ff;
	text-align:center;
}

/** NEWLETTER
/**----------------------------------------------------------------------------------------------------------**/
article.article_newsletter {
	padding:2%;
	/**padding-bottom:0; /* pour écraser le padding bottom habituel de .article qui est à 1.5% */
	background:rgb(255,255,255);
	background:rgba(255,255,255,0.4);
}
	.article_newsletter .article_sous_titre {
	}
	
	.article_newsletter_contenu {
		overflow:hidden;
	}
	
	.article_newsletter_contenu img {
			padding-bottom:1.5%;
		}

	/* pour 1 seule image */
	.image_droite_newsletter {
		padding:1.5% 0;
		text-align:center;
	}
	
	/* pour 2 images */
	.images_2_newsletter {
		padding:1.5% 0;
		text-align:center;
	}
	
	/* pour 3 images */
	.images_3_newsletter {
		padding:1.5% 0;
		text-align:center;
	}
		
.newsletter_url {
	margin-top:10px;
	padding-top:10px;
}
	.newsletter_url a {
		display:inline-block;
	}
	
	.newsletter_url a:active,
	.newsletter_url a:focus {
		color:#000099;
	}
	
	.newsletter_url p {
		display:block;
		padding-left:2%;
		padding-bottom:1%;
	}
	
	p.newsletter_info {
		padding:0;
		margin-top:-10px;
		margin-bottom:10px;
		color:#666;
	}
	
.newsletter_pdf {
	margin-top:10px;
	padding-top:10px;
}	
	.newsletter_pdf a {
		display:block;
	}
	
.article_newsletter .date {
	clear:both;
	padding-top:1.5%;
	text-align:right; /* pour écraser le text-align habituel de .date qui est left */
}

/** INFOS
/**----------------------------------------------------------------------------------------------------------**/
.infos {
}

/** Contient la description des catégories **/
.infos p {
	margin-bottom:1em;
	padding:0 0 0 0.3em;
	font-style:italic;
}

/** Titre de catégorie (=label) **/
.infos_cat_titre {
	display:block;
	margin:2em 0 1em 0;
	padding:0.3em 0 0.3em 0.3em;

	font-weight:bold;
	color:#00299f;
	
	background-color:#b9cafd;
}

/** supprimer le margin top du 1er lable unqiuement **/
.infos > li:first-of-type label {
	margin-top:0;
}

/** Titre de sous-catégorie (=label) **/
.infos_cat_sous_titre {
	display:block;
	margin-top:0.5em;
	margin-bottom:0.5em;
	padding:0 0 0 0.3em;
	color:#00299f;
}

/** Titre de sous-catégorie (=label) **/
.infos_texte {
	display:block;
	margin-top:0.5em;
	margin-bottom:0.5em;
	padding:0 0 0 0.3em;
	color:#00299f;
}

/** Créer un hover pour simuler un lien à l'emplacement des radio **/
.infos_cat_titre:hover {
	color:#ffffff; 
}

.infos_cat_sous_titre:hover,
.infos_texte:hover {
	color:#66cccc; /** vert moyen **/
}

.ul_radio, .ul_radio2 {
	display:none;
}

.ul_radio > li {
}

/**.ul_radio > li:last-of-type {
	margin-bottom:2em;
}
**/

/** Titre et Texte de l'info **/
.infos_texte {
	margin-left:0.3em;
	padding:0 0 0 1.4em;
	
	background-image:url(../images/fleche.png);
	background-position: left;	
	background-repeat: no-repeat;
}

.radio_checked {
	display:none;
}

.info_contenu {
	margin-left:1.7em;
	padding:0.5em;
	background-color:#edf0fa;
}

.info_contenu, .info_contenu p {
	display:none;
}

.radio_checked:checked + ul,
.radio_checked:checked + p {
	display: block;
}

.ancre_retour {
	display:block;
	margin:1em 0 0 0;
	text-align:right;
	font-size: 0.8em;
}

/** LIENS
/**----------------------------------------------------------------------------------------------------------**/
.lien_titre {
	padding:0;
}

.lien_commentaire {
	padding:0.5% 0 2% 2%;
	font-style:italic;
}

.liens_a {
	margin-left:0.3em;
	padding:0 0 0 1.4em;
	
	background-image:url(../images/fleche.png);
	background-position:left;	
	background-repeat: no-repeat;
}

/** MODULE ASSOCIES 
/**----------------------------------------------------------------------------------------------------------**/
.article_cache {
	display:none;
}

#id_associe:target {
	display:block;
}

/* Fichette individuelle de cv */
.cv {
	float:left;
	width:47.5%;
	/*width:455px;
	margin:0 2% 5% 0;*/
	margin:0 5% 5% 0;
	overflow:hidden;
	font-size:0.85em;
	/**background-color:pink;**/
}

.cv:nth-child(even){
	margin-right:0;
}

/* Contient la photo de l'employé et le lien 'en savoir plus' */
.cv_img_lien {
	float:left;
	/*width:110px;*/
	width:30%;
	padding:0;
	margin:0;
	min-height:145px; /** pour empêcher le chevauchement des fichettes **/
	border-right:1px solid transparent;
	/*background-color:red;*/
	}
	
	.cv_img_lien img {
		/*padding:0 8px 8px 0;*/
		width:95%;
		padding:0 5% 5% 0;
		background-color:/*white*/ transparent;
		border-right:1px solid #000099;
		border-bottom:1px solid #000099;		
	}
	
	.cv_img_lien a {
		display:block;
		margin-top:6px;
		margin-bottom:6px;
		padding-left:20px;
		background-image:url(../images/fleche.png);
		background-position: top left;	
		background-repeat: no-repeat;	
		font-size:0.8em;
	}

/* Contient le texte de l'employé */
.cv_texte {
	float:right;
	width:70%;
	margin-left:-1px;
	/*width:342px;*/
	/** Coupe les mots trop longs qui auraient tendance à dépasser d'un DIV quand celui-ci est réduit
		Source : http://www.alsacreations.com/tuto/lire/1038-gerer-debordement-contenu-css.html#max-width **/
	word-wrap:break-word;
	/*background-color:green;*/
}

	.cv_texte .cv_nom {
		margin:0;
		padding:0.3em 0 0.3em 1em;
		border-top:1px solid #00299f;
		font-weight:bold;
		color:#000099;
		text-align:left;
		background-color:#transparent; /* old IE **/
		background:rgb(203, 214, 234);
		background:rgba(102, 153, 255, 0.2);
	}	

	/** contient les domaines **/
	/**.cv_texte**/ ul {
		margin:0;
		padding:0.5em 0 0 1em;
		/**background-color:pink;**/
	}	

	/**.cv_texte**/ ul li {
		margin:0;
		padding:0.25em 0 0.25em 0;
		font-weight:bold;
		/**background-color:lightblue;**/
	}	
	
	.cv_texte ul li ul {
		display:none;
		padding:0 0 0 1.5em;
		/**background-color:red;**/
	}
	
	/**.cv_texte**/ ul li ul li {
		/*padding:0*/
		padding:0 0 2% 0;
		font-weight:normal;
		/*background-color:green;*/
	}

/** CV INDIVIDUEL ASSOCIES + FORMULAIRE DE CONTACT
/**----------------------------------------------------------------------------------------------------------**/
	dl.dl_cv {
		/*background-color:lightgreen;*/
		
		/** Coupe les mots trop longs qui auraient tendance à dépasser d'un DIV quand celui-ci est réduit
			Source : http://www.alsacreations.com/tuto/lire/1038-gerer-debordement-contenu-css.html#max-width **/
		word-wrap:break-word;
	}
	
	/** Mise sur une ligne d'un couple dt dd **/
	/**-------------------------------------------**/	
	/** sous-titre de la ligne-couple, ex: né en **/
	dl.dl_cv dt {
		float:left;
		width:30%;
		font-weight:bold;
		text-align:right;
		/*background-color:lightblue;*/
	}
		
	/** contenu de la ligne-couple, ex: 1946 **/
	dl.dl_cv dd {
		margin-left:30%;      /** à gauche, le dd ne commence qu'après le dt **/
		margin-bottom:0.75em; /** espace les lignes-couples verticalement **/
		padding:0 0 0 1%;
		text-align:left;
		/*background-color:gray;*/
	}

	/** pour éviter que le chevauchement des lignes de couples dt dd **/
	dl.dl_cv dd:after {
		content: ""; 
		display: block;
		clear: both;
	}	
	
	dl.dl_cv dd:first-of-type {
		padding:0;
		/*background-color:yellow;*/
	}
	
	/** cas particulier des titres principaux de rubriques. ex: Activtés, Expériences, etc **/
	dl.dl_cv dt.titre {
		float:none;  /** ne flotte pas à gauche, car il est seul sur sa ligne **/ 
		/** width:100%;  /** en occupe toute la largueur **/
		padding:0.35em 70% 0.35em 0; /** pas de width:100% si on met un padding-right:70% **/
		margin:1.5em 0 0.5em 0;
		border-bottom:1px solid #000099;
		/**background-color:#b9cafd;**/
		font-weight:bold;
		color:#000099;
		text-align:right;
		/**background-color:red;**/
	}
		
	/** Photo + nom + domaines **/
	/**-------------------------------------------**/	
	/** la photo se situe dans le 1er enfant de dl, soit, dans le cas précis un dt **/
	
	/** 1er enfant de dl, quel qu'il soit 	
	:first-child est le 1er enfant de son parent. La pseudo-class ne tient compte ni du type, ni de la class. Le 1er enfant QUEL QU'IL SOIT ! 
	dt:first-child permet d'appliquer une règle sur le 1er dt, mais par hasard car, dans ce cas précis, dt est le 1er enfant. 
	Si le dt était précédé d'un autre tag, par ex un dd, la règle appliquée à dt:first-child ne fonctionnerait pas. 
	Ecrire la règle ainsi peut donc s'avérer trompeur et peu approprié. 
	Il vaut mieux utiliser dl > *:first-child, soit n'importe quel (*) enfant de dl qui soit le premier enfant. **/
	/**
	dl.dl_cv  > *:first-child {		
									
	}								
	**/	
		dl.dl_cv dt:first-of-type img {
			background-color:transparent;
			width:95%;
			padding:0 5% 5% 0;
			border-width:1px;
			border-color:#000099;
			border-style:none solid solid none;
		}
		
	/** 1er dd qui contient le nom et les domaines **/
	dl.dl_cv dd:first-of-type {
		padding-left:0; /** écrase la règle des dd **/
		/**background-color:purple;**/
	}
		
		/** nom **/
		dl.dl_cv dd:first-of-type h2 {
			display:block; /** car les h2 de base sont en display:none **/
			margin:0;
			padding:0.35em 0 0.25em 1em;
			font-size:1em;
			color:#000099;
			border-top:1px solid #6981c6;
			background-color:#transparent; /* old IE */
			background:rgba(102, 153, 255, 0.2)
		}
		
		/** liste de domaines **/		
		dl ul li ul {
		padding:0;
		/**background-color:red;**/
		}
		
		/** lien pour faire apparaître le formulaire de contact **/
		dl.dl_cv dd a {
			float:right;
			padding:0.35em 1em.25em 22px; /** padding-left en px pour éviter trop grand espace entre icône et texte en cas de zoom **/
			font-weight:bold;
			font-style:italic;
			
			background-image:url(../images/tel3.svg); /** h 64px / l 50px **/ 
			background-position: left center;	
			background-repeat: no-repeat;	
		}	
		
		dl.dl_cv dd a:visited {
			color:#000099;
		}
		
		dl.dl_cv dd a:link:hover, dd a:visited:hover {
			background-color:transparent;
		}
		
	/** DD qui contient le formulaire **/	
	/**-------------------------------------------**/	
	/** pour les class générique, voir sous formulaire **/
	
	dl.dl_cv dd.cv_form {
		display:none;  /** faire disparaître le formulaire s'il n'est pas target **/
		margin-left:0; /** supprimer la margin-left de 30% par défaut sur les dd **/
		padding:0;     /** supprimer le padding par défaut sur les dd **/
		
		/**background-color:yellow;**/
	}
		
	/** faire apparaître le dd lors de l'appel par l'ancre **/	
	dl.dl_cv dd.cv_form:target {
		display:block;
		/**background-color:pink;**/
	}

	.cv input:checked ~ dl.dl_cv dd.cv_form {
		display:block;
	}
	
/** GOOGLE
/**----------------------------------------------------------------------------------------------------------**/
.iframe {
	border:none;
	width:100%;
	max-height:160px;
	overflow:hidden;
}

iframe {
	width:100%;
	max-height:160px;
	border:none;
}

/** FOOTER DU SITE COMPRENANT LE COPYRIGHT, DIVERS LIENS, LA DATE DE MODIFICATION 
/**----------------------------------------------------------------------------------------------------------**/
footer a {
	color:#fff;
}

footer .groupe_blocs {
	padding:2% 0 1% 0;
	background-color:#bbb;
	border-bottom:1px solid #000;
}

	footer .groupe_blocs ul, footer .groupe_blocs li {
		margin:0;
		padding:0;
	}

		footer .groupe_blocs p {
			padding:0 0 10px 20px;
		}
		
		footer .groupe_blocs_titre {
			padding:0 0 0 5px;
			font-size:1.2em;
		}

footer .groupe_blocs img {
	padding:0;
	width:auto;
	background-color:transparent;
}

footer .read_more {
	display:inline-block;
	margin:0;
	padding-bottom:6px;
	padding-left:15px;
}

	footer .read_more a {
		color:#000099;
	}
	
	footer li img {
		vertical-align:bottom;
	}

footer .copy {
	margin:1%;
	/*background-color:yellow;*/
}

footer .derniere_modif {
	margin:1%;
	/*background-color:green;*/
}

footer .liste_liens {
	clear:both;
	margin-top:2em;
	text-align:center;
}	

footer .liste_liens a {
	padding:0 2.5%;
}













/**------------------------------------------------------------------------------------------------------------------**/		
/**------------------------------------------------------------------------------------------------------------------**/		
/**------------------------------------------------------------------------------------------------------------------**/		
/**------------------------------------------------------------------------------------------------------------------**/		
/** MEDIA QUERY's 
/**------------------------------------------------------------------------------------------------------------------**/	
/**------------------------------------------------------------------------------------------------------------------**/		
/**------------------------------------------------------------------------------------------------------------------**/		
/**------------------------------------------------------------------------------------------------------------------**/		


/* Les règles précendentes sont destinées aux mobiles en mode portrait soit pour une largeur de 320px **/


/** Fenêtre : mobile au format paysage soit dès 321px jusqu'à 480px
/**------------------------------------------------------------------------------------------------------------------**/	
@media screen and (min-width:321px)
{
	#conteneur {
		width:85%;
		/*background-color:lightgreen;*/
	}
	
	/** 3 BLOCS 
	/**-------------------------------------------**/	
	.groupe_blocs, .groupe_blocs_read {
		width:auto;
	}
}

/** Fenêtre : tablette au format portrait soit dès 481px jusqu'à 768 px
/**------------------------------------------------------------------------------------------------------------------**/	
@media screen and (min-width:481px)
{
	#conteneur {
		/*background-color:lightblue;*/
	}
	
	/** SLIDER 
	/**-------------------------------------------**/		
	#controls {
		margin: -9% 0 0 0;
	}
	
	#active {
		margin:6.5% 0 2% 0;
	}
		
	.info, .info2 {
		line-height: 14px;
	}
	
	.info h3, .info2 h3 {
		font-size:1.3em;
	}	
	
	.info span, .info2 span {
		display:block;
	}
	
	/** 3 BLOCS 
	/**-------------------------------------------**/	
/*	.groupe_blocs, .groupe_blocs_read {
		width:auto;
	}*/
}

/** Fenêtre : tablette au format paysage soit dès 769px et jusqu'à 1200px (mais effectivement 1024px)
/**------------------------------------------------------------------------------------------------------------------**/	
@media screen and (min-width:769px)
{
	#conteneur {
		/*background-color:orange;*/
	}
	
	/** TITRES 
	/**-------------------------------------------**/
	h2.article_sous_titre {
		text-align:left;
	}
	
	/** SLIDER 
	/**-------------------------------------------**/		
	.info, .info2 {
		line-height: 18px;
	}
	
	.info h3, .info2 h3 {
		font-size:1.4em;
	}
	
	/** ARTICLE 
	/**-------------------------------------------**/		
	.autres_titres {
		display:inline-block;
		margin:0 2% 0 0;
	}
	
	.image_droite {
		float:right;
		width:auto;
		max-width:40%;
		padding:0 0 1% 2%;
		text-align:right;
		/*width:30%; /** auto**/
	}
	
	.image_gauche { 
		float:left;
		width:auto;
		max-width:40%; /** auto**/
		padding:0 2% 1% 0;
		text-align:left;
	}
	
	/** 3 BLOCS 
	/**-------------------------------------------**/		
	.groupe_blocs, .groupe_blocs_read {
		width:auto; /* pour annuler le width:420px d'origine */
		margin-bottom:1%;
	}
	
	.groupe_blocs img {
		padding:0/* 10%*/;
		width:100%;
	}
	
	.groupe_blocs_read {
		display:block;
	}

	.bloc_gauche, .bloc_centre, .bloc_droit {
		margin:0;
		padding:0;
	}
	
	.bloc_gauche, 
	.bloc_gauche2 {
		float:left;
		width:30%;
		margin:0 5% 0 0;
	}
		.bloc_gauche2 {
			width:47.5%;
		}
	
	.bloc_centre {
		float:left;
		width:30%;
		margin:0 5% 0 0;
	}
	
	.bloc_droit,
	.bloc_droit2 {
		float:left;
		width:30%;
	}	
		.bloc_droit2 {
			width:47.5%;
		}
	
	/** NEWLETTER
	/**-------------------------------------------**/		
	.newsletter_texte {
		float:left;
		width:60%;
	}
	
	.newsletter_2_texte {
	}
	
	/* pour 1 seule image */
	.image_droite_newsletter {
		float:right;
		width:36%;
		padding:0 0 1.5% 3%;
		text-align:right;
	}
	
	/* pour 2 images */
	.images_2_newsletter {
		padding:10px 0;
	}
	
		.images_2_newsletter a {
			float:left;
			max-width:50%;
		}
		
		.images_2_newsletter a + a {
			float:right;
			max-width:50%;
		}
		
	/* pour 3 images */
	.images_3_newsletter {
		padding:10px 0;
		text-align:center;
	}
	
		.images_3_newsletter a {
			float:left;
			max-width:32.3%;
			padding-right:1%;
		}
		.images_3_newsletter a + a {
			float:left;
			max-width:32.3%;
			padding:0;
		}
		
		.images_3_newsletter a + a + a {
			float:right;
			max-width:32.3%;
			padding-left:1%;
		}
	
	.newsletter_url {
		float:left;
		width:48%;
	}

	.newsletter_pdf {
		float:right;
		width:48%;
	}
	
	/** FOOTER
	/**-------------------------------------------**/		
	footer .copy {
		float:left;
		width:48%;
		margin:1%;
		/*background-color:yellow;*/
	}

	footer .derniere_modif {
		float:right;
		width:48%;	
		margin:1%;
		text-align:right;
		/*background-color:green;*/
	}
	
}

/** Fenêtre : Ordi (uniquement ! les tablettes prennent la media query précédente) dès 769px et jusqu'à 900px
/**------------------------------------------------------------------------------------------------------------------**/	
@media screen and (min-width:769px) and (min-device-width:1024px)
{	
	/** CADRE CENTRAL QUI PERMET LE CENTRAGE HORIZONZONTAL DE TOUT LE SITE 
	/**-------------------------------------------**/		
	#conteneur {
		/*background-color:red;*/
	}	
	
	/** HEADER
	/**-------------------------------------------**/		
	header {
		text-align:center;
	}
	
	p.logo_titre {
		margin-bottom:0;
	}
	
	/** NAV(s) - 1 ou plusieurs barres de menus 
	/**-------------------------------------------**/		
	/* faire disparaître le 'bouton' d'accès au menu sur mobile */
	.logo label {
		display:none;
	}

	/* Liste utilisée pour la création du menu */
	ul#menu {
		display:inline;		
		/*font-family:Verdana, sans-serif;*/
		font-weight:bold;
		font-size : 0.9em; 		
		z-index:998;
		/* On neutralise les déclarations de la version mobile */
		background-color:transparent;
		position:static;
		width:auto; 
		max-width: none;
		border:none;
		/* --- */
	}

	#menu a
	{
		display : inline-block; 
		color : #000099;
		padding:0;
		margin:0;
		border-bottom:2px solid transparent; /* bordure transparente pour assurer le même décalage que les a de menu_selectionne */
	}

		#menu a:hover
		{
			color: #6699ff; /* On change la couleur du texte en bleu clair */
		}

	#menu li a {
		/* On neutralise les déclarations de la version mobile */
		position:static;
		display:block;
		width:auto;
		padding:15px 0 11px 0;
		margin:0;
		color : #000099;
		border:none;
		text-shadow:none;
		/* --- */
		border-bottom:2px solid transparent;
	}
	
		#menu li a.menu_selectionne /* spécificité de l'élément du menu sur lequel on se trouve */ 
		{
			color:#6699ff; 
			border-bottom:2px solid #6699ff;
		}
	
	/* On neutralise les déclarations de la version mobile */
	#menu li a + a {
		display:none;
	}
	
	#menu li a:not(:only-child):after {
		display:none;
	}
	
	#menu li a:hover, /*#navigation*/#menu li a:active {
		background:transparent;
		color:#6699ff;
	}
	
	#menu li ul li a:hover, /*#navigation*/#menu li ul li a:active {
		background: none;
	}
	/* --- */
	
	#menu li 
	{ 
		display:inline-block;
		padding:0 20px 0 0; /* pour décaler les éléments du menu les uns des autres horizontalement */
		/* pour IE qui ne reconnaît pas "transparent" */
		border-right : 3px solid #fff; /* on met une bordure blanche à droite de chaque élément */
	}	
	
		/* Pour annuler le décalage à droite de la dernière li et ainsi respecter l'alignement droit du site */
		#menu li:last-of-type {
			padding-right:0;
		}

	/* IE ne reconnaissant pas le sélecteur ">" */
	html>body #menu li
	{
		border-right: 2px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
	}

	#menu li ul /* Sous-listes */
	{ 
		position: absolute; 
		left: -999em; /* On les envoie loin du champ de vision */		
		min-width: 130px; /* Largeur des sous-listes */
		/**margin-top:2px;**/
		border:1px solid #999;
		border-top:2px solid transparent; /* pour remonter le lul et qu'il soit collé à la ligne grise du header */
		/**padding-bottom:25px;**/
		z-index:995;
		/* On neutralise les déclarations de la version mobile */
		background:none;
		/* --- */
	}

	#menu li ul li /* Éléments de sous-listes */
	{	
		display:block;
		margin:0;
		padding:0;
		/* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
		border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
		min-width:130px;
		/*background:rgba(102,153,255,.4);*/
		/*background:rgba(102,102,102,.4);*/
		background:rgba(255,255,255,.8);
		text-align:left;
	}
	
	#menu li ul li a 
	{		
		padding:10px 0 10px 10px;
		margin:0;
	}	

	/* IE ne reconnaissant pas le sélecteur ">" */
	html>body #menu li ul li                
	{
		border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
	}
	
	#menu li ul ul 
	{
		margin    : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ 
		/* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
		border-left     : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */      
	}
	
	/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
	html>body #menu li ul ul                
	{
		border-left     : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
	}
		
	#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
	{
		left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
		
	}
	
	
	#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
	{
		left: auto; /* Repositionnement normal */
		min-height: 0; /* Corrige un bug sous IE */
	}
	
	/** SLIDER 
	/**-------------------------------------------**/		
	#controls {
		margin: -9% 0 0 0;
	}
	
	#active {
		margin:6.5% 0 2% 0;
	}
	
	#active label {
		margin:0; /* Pour rapprocher les boutons radio */
	}	
}

/** Fenêtre : Ordi uniquement soit dès 900px
/**------------------------------------------------------------------------------------------------------------------**/	
@media screen and (min-width:900px) and (min-device-width:1024px)
{	
	.cache {
		display:block;
	}
	
	/** TITRES
	/**-------------------------------------------**/
	h2.AccelerationToExcellence {	
		letter-spacing:0.5em;
	}
	
	/** CADRE CENTRAL QUI PERMET LE CENTRAGE HORIZONZONTAL DE TOUT LE SITE 
	/**-------------------------------------------**/		
	#conteneur {
		width:90%;	
		/*background-color:pink;*/
	}
	
	/** HEADER
	/**-------------------------------------------**/
	header {
		position:relative;
		text-align:left;
	}
	
		.lang {
			left:auto;
			right:0;
			text-align:right;
		}	
			.lang a {
				padding:0 0 0 2%;
			}
	
	p.logo_titre {
		display:inline-block;
		margin-bottom:5px;
		/**width:25%;**/
		/*border:1px solid red;*/
	}

	/** ARTICLE
	/**-------------------------------------------**/
	article {
		margin: 0 0 1.5% 0; 
	}
	
	/** NAV(s) - 1 ou plusieurs barres de menus 
	/**-------------------------------------------**/
	ul#menu {
		margin-left:30%; /** pour empêcher le menu de passer par dessus le logo en cas de redimensionnement **/
		position:absolute;
		/* On neutralise les déclarations de la version mobile */
		top:auto;
		left:auto;
		/* --- */
		right:0;
		bottom:0;
		vertical-align:bottom;
	}

	#menu a /* liens des menus */
	{
		margin:0 0 0 10px; /* margin latérale à droite pour décaler les liens les uns des autres */
	}	

	/** SLIDER 
	/**-------------------------------------------**/		
	.info, .info2 {
		line-height: 20px;
		padding:2%;
	}
	
	.info h3, .info2 h3 {
		font-size:1.3em;
	}	
	
	.info span, .info2 span {
		display:block;
	}
	
	/** FORMULAIRE
	/**-------------------------------------------**/		
	.cv_form label {
		float:left;
		width:29%;
		padding-top:0.3em;
		padding-bottom:0em;
		
		text-align:right;
	}
	
	.cv_form input,  .cv_form textarea {
		width:60%;
		margin-left:1em;
	}
	
	.cv_form span {
		width:60%;
		margin-left:29%;
		padding:0.5em 0 0.5em 1.25em;
	}
	
	/** FOOTER
	/**-------------------------------------------**/	
	footer .bloc_droit {
		text-align:right;
	}
	
	footer .copy, footer .derniere_modif {
		margin:0.5% 0.5% 2% 0.5%;
	}	
}

/** Fenêtre : Ordi uniquement soit dès 1000px
/**------------------------------------------------------------------------------------------------------------------**/	
@media screen and (min-width:1000px) and (min-device-width:1024px)
{	
	#controls {
		margin: -8.5% 0 0 0;
	}
}

/** Très grande fenêtre 
/**------------------------------------------------------------------------------------------------------------------**/	
@media screen and (min-width:1200px)
{
	#conteneur {
		max-width: 1200px;
	}
}

/** mobile (320x480) (480x320)
/** petite tablette (600x800) (800x600)
/** tablette (768x1024) (1024x768)