/* BASES */

	header, nav, section, article, aside, footer, hgroup {
		display: block;
	}
	fieldset{ border: 0; padding: 0;}
	nav {
		margin: auto;
		width: 100%;
	}
	ul {		margin:0;	padding:0;}
	li{		list-style: none;	}
	
	*, *::before, *::after {
		box-sizing: border-box;
	}
	
/* BASES CUSTOMS */	
  /* Texte */
	body {
		background-color: #fff;
		color: #000;
		font-family: "Raleway", Arial, basic;
		font-size: 15px;
		margin: auto;
	}
	h1 {    	line-height: 35px;   		 	margin: 15px 0 7px; }
	h2{	    padding: 40px 0 10px; 			margin:0;	}
	
	h2{		text-transform: uppercase;
			font-size: 1.5em;
			font-weight: 400;
			margin:0; padding:0;
			padding-top: 28px;
	}
	h3 {    padding: 30px 0 5px;    font-size: 1.4em;	font-weight: 500;}
	
	a {		color: #b92423;		outline:0;		text-decoration: none;		transition: color 0.2s;	}
	a:hover {		color: #951c1b;		text-decoration: underline;	}
	a:focus{    outline: 1px dotted;}
  /* Form */	
	input,  textarea{
		outline:0;	
		border: 1px solid #aaa;
		background: transparent;		
		font-size: 1.05em;
		font-weight: 300;
		resize:none;
		padding: 5px;
		font-family: "Raleway", Arial, basic;
	}
	input[type=submit]{		cursor: pointer;}
	textarea{		width: 100%;	}
	button{		outline:0;		}

/*** MISE EN PAGE ***/
	.center{		text-align: center;	}
	.left_text{		text-align: left;	}
	.right_text{	text-align: right;	}
	
	.bg_white{	background: white;		}
	.bg_gris{	background: #f4f4f4;		}
	.white_a{	color: white;}			.white_a:hover{	color: white;}
	
	
 /* Gestion colonnes */
	.col25{		width: 25%;	}
	.col30{		width: 30%;	}
	.col33{		width: 33%;	}
	.col40{		width: 40%;	}
	.col50{		width: 50%;	}
	.col60{		width: 60%;	}
	.col66{		width: 66%;	}
	.col70{		width: 70%;	}
	.col80{		width: 80%;	}
	.col100{	width: 100%;}

	.row {	float: left; width: 100%;		margin: 0;}
	
	.col25, .col30, .col33, .col40, .col50, .col60, .col66, .col70, .col80, .col100  {		float: left;	}	
	
	@media (max-width: 800px) {
		.col25, .col30, .col33, .col40, .col50, .col60, .col66, .col70, .col80  {		width: 100%;	}
	}
	
	.left{	float: left;	}
	.right{	float: right;	}
	.clear{clear: both;}
	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0,0,0,0);
		white-space: nowrap;
		border: 0;
	}
 /* Padding */	
	.pad5{	padding: 5px;	}
	.pad10{	padding: 10px;	}
	.SectionPad{		padding: 55px 0 80px;} 	 

	
 /*Mise en page */
 .container{	padding-right: 0;		padding-left: 0;	}
	.largeur{
		max-width: 1200px; 
		width: 100%;	
		margin: 0 auto;
		position: relative;
	}
	.largeur850{max-width: 850px ;}
	
	.medium_font{		font-size: 1.08em;	}
	.medium_font_plus{	font-size: 1.2em;	}
	
	@media (max-width: 800px) {
		.font_control {		font-size: 12px;}
	}
	
	.max-w-100{		max-width: 100%; }
 /* Titres */
 
	.references02 h3{	padding-bottom: 20px;	letter-spacing:-1px; 	font-size: 1.8em;	}
	.references02 h3 span{	font-weight:300;	}
	
	.TitreSection{
		text-transform: uppercase;
		font-size: 2.3em;
		padding-bottom: 0;
		letter-spacing: 1px;
	}
	.Titre_type01{
		text-transform: uppercase;
		font-size: 2.3em;
		padding-bottom: 0;
		margin-bottom: 30px;
		letter-spacing: -1px;
	}
	.sousTitre{
		font-size: 1.1em;
		max-width: 800px;
		margin: auto;
		padding-bottom:30px;
	}	

	.TitreBlock{
		margin:	 	0 auto 0.6em;
		padding:	 0 0 0.5em;
		border-bottom: 1px solid #aaa;
		text-align: center;
		max-width: 700px;
		line-height:1.01;
		text-transform: uppercase;
	}
	.TitreBlock span{		font-weight: 200;	}	

/*******************/
/****    ANIMATIONS / APPARITION   ****/
.header-content .TitreBlock{	opacity: 1 ;	transition: 2s opacity ease;		transition-delay: 0s;	}
.chargement .header-content .TitreBlock{	opacity: 0;}
.liste-points{	opacity: 1 ;	transition: 0.7s opacity ease;		transition-delay: 1.5s;	}
.chargement .liste-points{	opacity: 0;	}
.header-icons-group{	opacity: 1 ;	transition: 0.7s opacity ease;		transition-delay: 2s;	}
.chargement .header-icons-group{	opacity: 0;	}

.accueil .app0{	opacity: 1 ;	transition: 1s opacity ease;		transition-delay: 0;	}
.accueil .app1{	opacity: 1 ;	transition: 0.5s opacity ease;		transition-delay: 0.4s;	}
.accueil .app2{	opacity: 1 ;	transition: 0.5s opacity ease;		transition-delay: 0.6s;	}
.accueil .app3{	opacity: 1 ;	transition: 0.5s opacity ease;		transition-delay: 0.8s;	}
.accueil .app4{	opacity: 1 ;	transition: 0.5s opacity ease;		transition-delay: 1s;	}

.accueil .app0{	margin-left:0;  transition: 1s margin-left ease;		transition-delay: 0;	}
.accueil .app1{	margin-left:0; 	transition: 0.5s margin-left ease;		transition-delay: 0.4s;	}
.accueil .app2{	margin-left:0; 	transition: 0.5s margin-left ease;		transition-delay: 0.6s;	}
.accueil .app3{	margin-left:0; 	transition: 0.5s margin-left ease;		transition-delay: 0.8s;	}
.accueil .app4{	margin-left:0; 	transition: 0.5s margin-left ease;		transition-delay: 1s;	}
.accueil .cache .app0, .accueil .cache .app1, .accueil .cache .app2, .accueil .cache .app3, .accueil .cache .app4 { /*opacity:0.5;*/
margin-left:-5%; 
}


.fadeInUp{			opacity: 1;			transition:  0.8s all; 	transition-delay: 0s;		transform: translateY(0);}
.cache .fadeInUp{	opacity: 0;		transform: translateY(30px);		}

	.app-big-bulle{	
		position:absolute; 	top: -20px; 	right: -40px;	
		opacity: 1 ;	transition: 0.5s all ease;		transition-delay: 1.2s;	
	}
	.cache .col50 .app-big-bulle{right: -100%;	}
 
 
 /* CONTACT animation form */
	.accueil #contact{	transition: 1s all ;		margin-left:0;}
	.accueil .cache #contact{	margin-left: -10%;	}


/*******************/
 /****	HEADER	*****/
 
 
	#top {
		position: relative;
	}
	
	.header{
		background-color: #333;
		color: #ffffff;
		overflow: hidden;
		position: relative;
		text-align: center;
		padding: 22px 4px 30px;
		text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
	}
	.header{
		height:400px;	
		background: url(../img/vid/busy.jpg) no-repeat;
		background-position: center center;
		background-color: #333;
		background-size: cover;
		-webkit-background-size: cover; /* pour Chrome et Safari */
		-moz-background-size: cover; /* pour Firefox */
		-o-background-size: cover; /* pour Opera */
		/*background-attachment: fixed;*/
		transition: background-image 2s;
		width: 100%;
	}
	.accueil .header{ 	height:500px;	}
	
	.header_bar{					/* Barre Header */
		position: relative;
		background-color: #951c1b;
		color: #ffffff;
		overflow: hidden;
		text-align: center;
		padding: 5px;
		min-height: 55px;
	}
	
	.TopMenu{
		width:100%;
		z-index: 201;
		position: relative;
	}
	.responsive-on  .TopMenu{	padding-bottom: 5px;	position: fixed;}
	
	.logo {
		float: left;
		width:15%;
		opacity:1;
		position: relative;
		transition: all 0.5s ease-out;
		margin-top: 7px;
	}
	.logo  img{transition: all 0.5s;}
	.responsive-on .logo{	width: 100%;	opacity: 0.5;}
	
	@media (max-width: 800px) { 
		.logo img{	width: 100px;	}
		.header{	background-attachment: scroll; }
	}
	
	.respMenu{
		position: absolute;
		right: 0;
	}

	.header-content{
		position: relative;
		z-index: 10;
		margin-top: 6em;
		transition: margin-top 2s ease-out;
	}
	
	.accueil .header-content	{ 		margin-top: 8.5em;		}
	.chargement .header-content	{	margin-top: 300px; 	/*opacity: 0.02*/}
	
	.header-content .headerTitle {
		font-size:2.5em;
		text-transform: none; 
		font-weight: 400;
		letter-spacing:-1px; 
		color: #eee;
		padding-bottom: 10px;
		margin-top: 15px;
		line-height: 1.1em;
		/*opacity: 1;*/
	 }
	.header-content .headerTitle .grosTitre{
		display: block;
		text-transform: uppercase;
		font-size: 1.6em;
		line-height: 1.1em;
		font-weight: 700;
		letter-spacing:0; 
		color: #000;
		padding: 18px 0;
	}

	.chargement .header-content .subtitle{	margin-top: -40px;	margin-bottom: 0;}

	.header-content p{
		font-size: 1.2em;
		font-weight: 400;
	}

	.header .boutonRouge2{
		line-height: 50px;
		height: 50px;
		padding: 0 50px;	
	}

/* Header Vidéo*/
	#acc-video {
		position: absolute;
		min-width: 100%;
		min-height: 100%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);		-webkit-transform: translate(-50%, -50%);		-ms-transform: translate(-50%, -50%);
	}
	
	@media (max-width: 800px) { 
		#acc-video {display: none;}
	}
	
	.bg-points{
		content: '';
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		background: url(../img/pics/points.png);
		opacity: 0.7;
		transition: opacity 7s ease-in-out;
	}
/**/
	.header-icons-group {	font-size: 28px; color:#ce2827; padding-top: 0px;	}
	.header-icons-group a{		color: inherit; 	text-decoration: none;		}
	.header-icons-group a:hover{	 color: #b92423; 	text-decoration: none;		}
	.header-icons-group i{		padding: 10px;		}
	
	.liste-points a{	color: #fff;}
	.liste-points a:hover{	text-decoration: none;}
	.liste-points a::before {
		content: ".";
		font-size: 30px;
		color: #ce2827;
		position: relative;
		bottom: 2px;
		margin: 0 6px;
		font-weight: 500;
		font-family: Arial
	}


/** Triangle vers le bas (coté du triangle blanc)*/
.intA, .intB{	
  content:'';
  height: 0px;
  width: 50%;
  display: block;		float:left;
  border-left: 20px solid transparent;		border-bottom: 20px solid white;
  background: none;
  margin:0;	  	padding:0;
  margin-top: -18px;
  position: relative;
  z-index: 10;
}
.intA{   border-right: 20px solid transparent;  border-left:0  }


/**********/

/*******/
	
	#service h2{		min-height: 60px;	}    /* utilisée ?? */
	
	.referenceSection{		padding: 55px 0 80px;} 	 /* A EFF double usage */
	
	.paragraphePresentation {
		max-width: 700px;
		line-height: 1.2em;
		margin: auto;
		font-weight: 400;
		color: #333;
		padding-bottom: 30px;
		font-size: 1.25em;
	}

	.fiche{
		/*background: rgba(255,255,255,1);*/
		background: white;
		padding: 40px;		max-width: 800px;
	}
	.fondSection{
		background: url(../img/bg_project_management.jpg) no-repeat;
		background-color: #333;
		background-position: top center;
		background-size: cover;
		-webkit-background-size: cover; /* pour Chrome et Safari */
		-moz-background-size: cover; /* pour Firefox */
		-o-background-size: cover; /* pour Opera */
		background-repeat: no-repeat;
		background-attachment: fixed;
		width: 100%;
		height: 100%;
		overflow: hidden;
		color: #fff;
	}
	@media (max-width: 800px) { 
		#presentation {	padding: 100px 20px;}
		.fiche{		padding: 20px;	}
		.fondSection{	background-attachment: scroll;}
	}

/***********/
/*ETUDE DE CAS / CSS*/
	.colonneTxt {    padding: 5px;    padding-right: 40px; }   /* Voir si réutilisation ?? (étude de cas)*/
	.avecpoints li {    list-style: inside;}   					/* Voir si réutilisation ?? (étude de cas)*/
	.fond_plein {
		height: 100%;
		background: #fff url(../img/etude/hivernage-mobile.jpg);
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		width: 100%;
		overflow: hidden;
		padding: 60px 0;
	}

	.temoignage::before {		/* Repris sur le site hotel */
		position: absolute;
		top: 25px;		left: 60px;
		content: '';
		background-image: url(http://webdi.fr/site1/wp-content/uploads/2017/03/quote.png);
		background-size: contain;
		background-repeat: no-repeat;
		height: 100px;
		width: 100px;
	}
	.temoignage {       padding: 30px 25px;    font-size: 1.4em;    background: #fff;    color: #555;	line-height: 1.5em;	}
	.temoignage .author {    font-weight: 200;    padding-top: 20px;    font-size: 0.9em;}
	.temoignage .guillemet {    font-size: 36px;    font-family: initial;    font-weight: 700;    line-height: 0;}
	


/***********/


/* Les Bulles*/

.mini_icone {						/*utilisé dans SERVICE dans accueil */
    font-size: 35px;
    padding: 30px;
    display: inline-block;
    border: 4px solid #eee;
    border-radius: 50%;
    margin-bottom: 25px;
    background: rgba(255,255,255,0.1);
}

	.groupe_type01{					/* groupe de bulles 1*/
		text-transform: uppercase;
		font-size: 13px;
		font-weight: 700;
		padding-top: 40px;
	}
	.bulle, .bulle_big{
		height: 150px;
		width: 150px;
		border-radius: 50%;
		background: white;
		margin:20px auto;
		text-align: center;
	}

	.bulle img{	
		height: 70px;
		width: auto;
		margin-top: 40px;
	}
	.bulle_big{								/*Grande bulle (verte d'origine) */
		height: 180px;		width: 180px;
		padding: 23px;		margin: 30px;
		font-weight: 700;
		text-transform: uppercase;
		border: 6px solid #71c24e;
		color: #71c24e;
		background: rgba(255,255,255,0.9);
	}
	.bulle_big span{	
		font-size: 70px;
		display: block; 
		line-height: 1em;
		text-transform: initial;
	}
	
	.bulle_blanc{	/*avec fond transparent*/
		color: #fff;
		background: none;
		border-color: #fff;
		margin: 30px auto;	
	}
	.bulle_blanc01{		/*avec fond plein*/
		color: #333;background: white;
		border-color: #fff;
		margin: 30px auto;	
	}


/* Les boutons*/
	#contact input[type=submit], .boutonRouge{
		display: inline-block;
		background: transparent;
		color: #e7484a;
		border: 1px solid #e7484a;
		border-radius: 30px;
		height: 40px;
		line-height: 40px;
		text-transform: uppercase;
		padding: 0 30px;
		margin: 10px auto;
		cursor: pointer; 
		transition: all 0.2s;
	}
	#contact input[type=submit]:hover, .boutonRouge:hover{	background: #e7484a; 		color:white;	text-decoration: none;}
	
	
	
	
	

h3 {margin: 0}
.groupe_type01{	padding-top: 0;}
.headerTitle span{	font-weight: 200;}
.header{text-shadow: none;}

h2 span{font-weight: 200;}


.service02{
	background-image: url(../img/pics/bg-puzzle.jpg);
	color: white;
	padding: 60px 5px;
}
.service02 a{	color:#fff;}
.service02 a:hover{	text-decoration: none;}

.service02 .case01{
	padding: 2em 1em 0.66em;
	transition: background 0.5s ease-out;
}
.service02 .case01:hover{
	background-color: rgba(231,72,74, 0.50);
	background-image: url(../img/pics/patern-red2.png);
	background-position: center;
	background-repeat: repeat;
}
.service02 .case01 p{ 	padding: 0 1.66em; 	font-weight: 400; 	line-height: 1.8em; }

@media (max-width: 800px) {
	.service02 .case01 p{	padding:0;	}
}

.BoutonType02{
	background: rgba(50,50,50,0.35);
	display: inline-block;
	border-radius: 30px;
	height: 40px;
	line-height: 40px;
	text-transform: uppercase;
	padding: 0 30px;
	margin: 10px auto;
	cursor: pointer;
	transition: all 0.2s;
	letter-spacing:1px;
	font-weight: 600;
	font-size: 10px;
	outline:0;
}
.BoutonType02:hover{background: #333;}



#creationsWeb  img{	max-width: 100%;}
p{line-height: 1.5em;}


.references02 ul i{
color: #4aa12d;
padding:5px;
bottom:-1px;
}
.references02 ul li{
padding-bottom: 10px;
}


/*** ACCUEIL - LES SOLUTIONS (chapitre) ***/
	
#solutions{
	background-color: #293339;
	color: #fff;
	text-align: center;
	padding: 30px 10px 60px 10px;
}
#solutions .logo_solutions{	padding: 20px 0;	}
#solutions .logo_solutions img{	margin: 5px;		background-color: rgba(255, 255, 255, 0.2); transition: all 0.3s;	}

/*** CONTACT (Chapitre) ***/

	#contact{		padding-bottom: 30px; background: white;	}
	#contact form{
		width: 100%;
		max-width: 560px;
		margin: auto;
		padding: 8px;
		padding-top: 30px;
	}
	
	#contact input, #contact textarea, .inputligne{
		border-radius: 0; border: 2px solid #333; background: transparent;	border-width: 0 0 1px 0;
		transition: 0.5s all;
		padding-left: 0;
		margin-bottom: 20px;
		margin-right: 15px;			
		font-size: 1.05em;
		font-weight: 300;
		resize:none;
		max-width: 515px;
	}


	#contact input{		width: 250px;	}
	#contact input:focus, #contact textarea:focus{		border-color: #e7484a; outline:0;}
	#contact input[type=submit], .boutonRouge{
		display: inline-block;
		background: transparent;
		color: #e7484a;
		border: 1px solid #e7484a;
		border-radius: 30px;
		height: 40px;
		line-height: 40px;
		text-transform: uppercase;
		padding: 0 30px;
		margin: 10px auto;
		cursor: pointer; 
		transition: all 0.2s;
	}
	#contact input[type=submit]:hover, .boutonRouge:hover{	background: #e7484a; 		color:white;	text-decoration: none;}

	.BtRougeOpaque{	
		background: #b92423; 
		border-color:  transparent; 	
		color:white;
		text-shadow: none;
	}
	.BtRougeOpaque:hover{		background: #941c1c; }
	
	@media (max-width: 800px) {
		#contact textarea{	width: 90%;		}
	}
	@media (max-width: 500px) {
		#contact textarea{	width: 250px;	}
	}

.apercu a{					text-decoration: none; color:#111;	}
.encadre-image{				max-width:450px; 	width: 100%; height: 230px; 	display: inline-block; 	overflow: hidden; }
.encadre-image img{    	 	width: 100%; transition: all 0.8s	}
.encadre-image img:hover{	transform: scale(1.03);				}
.encadre-image-titre{		padding-top: 10px;					}	


/******************/
/*MISE EN FORME*/
 /* Background */

.bg_red, .bg_blue {
    background: #195ca3;
    color: #fff;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.bg_red{ 	background: #b92423;	}

 /* Padding */ 
.colPad1 {    padding: 15px 30px;}

/******************/
/* Icones liste */
  /* box icone dans visibilité */
	.box_type01{
		position: relative;
		padding:0 5px 5px 55px;
	}
	.box_type01 i{
		color: #b92324;
		font-size: 32px;
		position: absolute;
		top: 2px;
		left: 5px;
	}
	.box_type01 h3{padding:0}
	.box_type01 p{	margin-top:5px;}

	/* Box icone dans Création-site-web */
	.box_type02, .box_type02b{
		position: relative;
		padding-right: 40px;
		padding-bottom: 30px;
	}
	.box_type02b{			padding-right: 0px; padding-left: 40px;}
	.box_type02 i, .box_type02b i {
		position: absolute;
		right: 4px; top: 0px;
		font-size: 25px;
	}
	.box_type02b i {left: 4px;}	

	.box_type02 h3, .box_type02b h3 {	text-transform: uppercase; padding:0; margin:0;}
	.box_type02 p,  .box_type02b  p  {	    margin-top: 5px;}
		
  /* Check box (Verts)*/
	.checks-verts i {
		color: #4aa12d;
		padding: 5px;
		bottom: -1px;
	}
	.checks-verts li{		padding-bottom: 10px;}
	
	
/***********************/
/* DIVERS */
/* Ligne de chronologie */

	.ligne001{	position: relative;}		/* ligne pour chronologie */
	.ligne001::before {
		background: none;
		content:'';
		width: 100%;
		height: 67px;
		display: block;
		position: absolute;
		border-bottom: 2px solid #eee;
	}
	
	.chronologie .mini_icone { 			background: white; }
	.chronologie h3 {					padding-top: 5px; 	text-align: center;}
	.bg_blue .chronologie .mini_icone, .bg_red .chronologie .mini_icone   {	color: #000; border-color: #fff }
	
/***************************/	
/* MESSAGE d'avertissement ou confirmation */
	#resultat{	
		position: fixed;
		top: 0;
		left: 0;
		text-align: center;
		width: 100%;
		z-index: 1000;
		overflow: hidden;
		display: none;
	}
	#MessageAvertissement {
		background: #e7484a;
		line-height: 50px;
		color: white;
		font-size: 18px;
		padding: 0 5px;
		cursor:pointer;
	}
	.messageShow {		transition: max-height 0.8s ease-out; 	max-height:100px;  }
	.messageCacher{		max-height: 0%; }



/** MENU Responsive (full screen) **/

	#MenuFullScreen{
		background: #293339;		color: #fff;
		z-index: 200;
		position: fixed;
		top:0;		left:2000px;
		height: 100%;		width: 100%;
		opacity:0;
		transition: all 2s;
		display: none;
	}
	
	#MenuFullScreen .navMenu{		width: 100%;		height: 100%;	}
	
	#MenuFullScreen ul{
		margin: 0;
		text-align: center;
		position: relative;
		opacity:0;
		top: 50%;
		transform: translateY(-50%);			-webkit-transform: translateY(-50%);    -ms-transform: translateY(-50%);
	}


	#MenuFullScreen li{			margin: 5px 20px;		}
	#MenuFullScreen a{			color: #fff;}
	#MenuFullScreen a:hover{		color: #e95455; 	text-decoration: none;}

	#MenuFullScreen a{
		padding: 10px;
		font-size: 22px;
		line-height: 1.8em;
		transition: color 0.2s;
	}


	.responsive-on #MenuFullScreen{
		display: block;
		opacity:1; left:0px; 
		animation-name: apparition;		-webkit-animation-name: apparition; 
		animation-duration: 0.3s;		-webkit-animation-duration: 0.3s;
		animation-delay: 0s;			-webkit-animation-delay: 0s;
		animation-timing-function: ease-out;		-webkit-animation-timing-function: ease-out
	}
	.responsive-on #MenuFullScreen ul{
		animation-name: apparition;		-webkit-animation-name: apparition;
		animation-duration: 0.8s;		-webkit-animation-duration: 0.8s;
		animation-delay: 0s;			-webkit-animation-delay: 0s;
		opacity:1;
	}
	@keyframes apparition {
		0%   {opacity:0; left:2000px; }
		100% {opacity:1; left:0px; 		}
	}


	.responsive-on  #MenuFullScreen li{
		animation-name: apparition2;		-webkit-animation-name: apparition2;
		animation-duration: 0.3s;			-webkit-animation-duration: 0.3s;
		animation-delay: 0.5s;				-webkit-animation-delay: 0.5s;
		transform: rotateX(0deg);			-webkit-transform: rotate(0deg);    -ms-transform: rotate(0deg);
		opacity:1; 
		}
	@keyframes apparition2 {
		0%   {margin-left: 100px; }
		100% {margin-left: 20px; 	}
	}


	@media (min-width: 800px) {  /*	Valable uniquement INFERIEUR a 800px*/
		#MenuFullScreen li{		display: inline-block; 	}
	}


i.icone-rouge{	color:#e7484a;}
	

/**** FOOTER ****/
	#footer, #footer a,  #footer a:hover {		color: #999;		overflow: hidden;}

	#footer li a{	display: inline-block;}
	
	#footer h3{	padding: 0;	font-size: 1.1em;	}
	#footer h3, #footer h4{	color: #fff;	position:relative;}
	#footer h4{	
		font-size: 1.1em;
		padding: 7px 0;
		margin: 0 0 25px 0;
		font-weight: 500;
	}
	#footer h4::after{	
		position:absolute; content:'';
		top:0; left:0;
		height: 110%; width: 30px;
		border-bottom: 1px solid #b92423;	
	}
	@media (max-width: 800px) {
		#footer li a:not(.ico-sociaux){	padding: 3px 0;}
	}

 /* Footer 1er */
	.footer_primaire{
	  background: #222222;
	  padding: 30px 7px;
	  min-height: 200px;
	  font-size: 14px;
	  line-height: 22px;
	}
	.footer_primaire .col25{		padding-bottom: 15px;	}
	
  /* icones réseaux sociaux*/
  .liste_RSociaux{				padding: 10px 0;	}
  #footer .liste_RSociaux li{		display: inline-block;}
  #footer .liste_RSociaux a{		color: #fff;}
  #footer .liste_RSociaux a:hover{		text-decoration:none;	}
	
	.ico-sociaux{
	  display: inline-block;
	  margin-right: 5px;
	  background: #444;
		font-size: 21px;
		padding: 10px ;
		border-radius: 50%;
	  transition: all 0.2s;
	}
	
	.ico-sociaux:hover{
	  background: #111;
	}
	
  /* Newsletter */
	.formNewletter {		
		border: 1px solid #b92423;
		height:32px;
		max-width: 280px;
		padding:1px;
		margin-bottom: 20px;
		position: relative;
		overflow: hidden;
	}
	.formNewletter input{		border: 0;		color: #fff;		border-radius: 0;	}
	.formNewletter .champ_newsletter{			}
	.formNewletter .valid_newsletter{	
		border: none;		
		position: absolute;
		top:0;
		right:0;
		height:31px;
	}
	
	
 /*Footer 2nd*/
	.footer_secondaire{
	  background: #2a2a2a;
	  color: #9ba2a6;
	  padding: 7px;
	  font-size: 12px;
	}
	.footer_secondaire .largeur{
	  padding: 0 15px;
	  text-align: center;
	}

	
	

/*-----------------------------------------------------------------------------------------------*/
/***********************************************	PARTIE GRAPHIQUE 	***************************/

/****** BOUTON MENU responsive (burger) *******/
	.trigger {
		position: relative;
		width: 50px;
		height: 50px;
		border: 0;
		background: none;
		cursor: pointer;

		overflow: hidden;
		text-indent: 100%;
		color: transparent;
		white-space: nowrap;
	}

	.trigger span,
	.trigger span::before,
	.trigger span::after {
	  position: absolute;
	  width: 44px;
	  height: 2px;
	  background: #fff;
	  border-radius: 4px;
	  box-shadow: 0 0 1px 1px rgba(0,0,0,.2);
	}

	.trigger span {
		top: 25px;
		left: 5px;	/* si calc() non supporté */
		top: calc(50% - 2px);
		left: calc(50% - 22px);
		transition: transform 0.3s, background 0.2s;
	}
	.trigger span::before,
	.trigger span::after {
	  content: "";
	  left: 0;
	  transition: transform 0.4s, width 0.4s, opacity 0.1s, background 0.2s;
	}
	.trigger span::before {  	bottom: 12px;	}
	.trigger span::after {  		top: 12px;		}
	
	@media (min-width: 800px) { /* /!\  Pour une largeur de >800px  !!*/
    /** Flèche **/
		.fleche .trigger:hover span {
		  transform: rotate(180deg);			-webkit-transform: rotate(180deg);    -ms-transform: rotate(180deg);
		}
		.fleche .trigger:hover span::before {
		  transform: translate(26px, 4px) rotate(+45deg);
		  -webkit-transform: translate(26px, 4px) rotate(+45deg);    -ms-transform: translate(26px, 4px) rotate(+45deg);
		  width: 50%;
		}
		.fleche .trigger:hover span::after {
		  transform: translate(26px, -5px) rotate(-45deg);
		  -webkit-transform: translate(26px, -5px) rotate(-45deg);    -ms-transform: translate(26px, -5px) rotate(-45deg);
		  width: 50%;
		}
	}
	

 /** Croix **/
	.responsive-on .trigger span, .responsive-on .trigger:hover  span {
	  transform: rotate(135deg);
	  -webkit-transform: rotate(135deg);   -ms-transform: rotate(135deg);
	  background: #e7484a;
	}
	.responsive-on .trigger span::before, .responsive-on .trigger:hover  span::before {
	  transform: translate(0px, 12px) rotate(-90deg);
	  -webkit-transform: translate(0px, 12px) rotate(-90deg);    -ms-transform: translate(0px, 12px) rotate(-90deg);
	  width: 100%;
	  opacity:0;
	}
	.responsive-on .trigger span::after, .responsive-on .trigger:hover  span::after {
	  transform: translate(0px, -12px) rotate(90deg);
	  -webkit-transform: translate(0px, -12px) rotate(90deg);    -ms-transform: translate(0px, -12px) rotate(90deg);
	  width: 100%;
	  opacity: 1;
	  background: #e7484a;
	}
	
 /* Pour la barre de menu */
	.header_bar .trigger span,	.header_bar .trigger span::before,	.header_bar .trigger span::after {
		box-shadow: none;
	}


	
/******** Titre avec les triangles dessus *********/

	.max-titre{
	  position: relative;
	  text-align: center;
	}
	.max-titre::after{
	  content: '';
	  position: absolute;
	  bottom: 0;
	  left: 50%;
	  transform: translate(-50%,0);
	  -webkit-transform: translate(-50%,0);
	  height: 3px;
	  width: 140px;
	  background-color: #b92423;
	}
	
	/* t1 t2 triangles barre de titre */
	.t1, .t2{	position: absolute;		left: 50%;		bottom:-10px;}
	.t1::before, .t1::after, .t2::before, .t2::after {
	  content: '';
	  position: absolute;
	  bottom: 0px;
	  left: -16px;
	  width: 0;	  height: 0;
	  border-left: 12px solid transparent !important;
	  border-right: 12px solid transparent !important;
	  border-top: 20px solid #b92423;
	  z-index: 2;
	}
	.t1::after, .t2::after{
	  left: -3px;
	  bottom: 5px;
	  border-left: 7px solid transparent !important;
	  border-right: 7px solid transparent !important;
	  border-top: 12px solid #fff !important;
	}
	.t2::before{ left: -8px; }
	.t1::after{    left: -11px;	}
	/*
	.max-titre h2::before, .max-titre h2::after,
	.triangle::before, .triangle::after {
	  content: '';
	  position: absolute;
	  bottom: -10px;
	  left: 49.7%;
	  width: 0;
	  height: 0;
	  border-left: 12px solid transparent !important;
	  border-right: 12px solid transparent !important;
	  border-top: 20px solid #b92423;
	  z-index: 2;
	  -webkit-transform: translate(-50%);
	  transform: translate(-50%);
	}
	.max-titre h2::after{
	  width: 0;
	  height: 0;
	  bottom: -5px;
	  background-color: transparent;
	  border: 0;
	  border-left: 7px solid transparent !important;
	  border-right: 7px solid transparent !important;
	  border-top: 12px solid #fff !important;
	  -webkit-transform: translate(-50%) rotate(0);
	  transform: translate(-50%) rotate(0);
	}
	.triangle::before, .triangle::after {
	  content: '';
	  position: absolute;
	  bottom: -10px;
	  left: 50.3%;
	  width: 0;
	  height: 0;
	  border-left: 12px solid transparent !important;
	  border-right: 12px solid transparent !important;
	  border-top: 20px solid #b92423;
	  z-index: 2;
	  -webkit-transform: translate(-50%);
	  transform: translate(-50%);
	}
	.triangle::after{
	  width: 0;
	  height: 0;
	  bottom: -5px;
	  background-color: transparent;
	  border: 0;
	  border-left: 7px solid transparent !important;
	  border-right: 7px solid transparent !important;
	  border-top: 12px solid #fff !important;
	  -webkit-transform: translate(-50%) rotate(0);
	  transform: translate(-50%) rotate(0);
	}*/
	.max-titre .TitreBlock{
		border:0;
		margin-bottom:40px;
		padding-bottom:35px;
	}
	
	
/************-----------------------------------------------------------------------***/
/* APERCUS DES ARTICLES */

	.actualites a {    text-decoration: none;    outline: 0;}

	.mini-article {    background: white;    color: #777;    margin: 5px;    text-align: left;    border: 1px solid #dbdbdb;}
	.mini-article img {    width: 100%;    height: auto;}

	.apercu_txt::before {
		content: '';
		position: absolute;
		width: 30px;
		height: 10px;
		left: 30px;
		margin-top: -38px;
		display: block;
		border-style: solid;
		border-width: 0 20px 20px 20px;
		border-color: transparent transparent #fff transparent;
	}
	.apercu_txt {
		padding: 15px;
		position: relative;
		font-size: 13px;
		min-height: 135px;
	}
	.apercu_categorie {
		text-transform: uppercase;
		font-weight: 600;
		margin: 7px 0;
		font-size: 1.03em;
	}
	.apercu_titre {
		color: #333;
		text-transform: uppercase;
		font-weight: bold;
		font-size: 1.5em;
		margin: 0;
		padding: 0;
	}
	.mini-article p {    margin-bottom: 20px;}

	.col50 .apercu_txt {    min-height: 190px;}
	.col33 .apercu_txt p{display: none;}

	.actualites a:hover > .mini-article{ 					background: #e7484a;	color: #fff;}
	.actualites a:hover > .mini-article .apercu_titre{ 		color: #fff;}
	.actualites a:hover > .mini-article .apercu_txt::before{ 		border-color: transparent transparent #e7484a transparent;}

		


/* ARTICLE */

	#page{margin-top: 50px;}
	.mainColonne{  max-width: 800px; width: 100%;padding: 10px 10px 20px 100px; }
	.secondColonne{max-width: 400px;}

	.article{ 		font-weight:500;	padding-bottom: 50px;		}
	.article h1{ 	font-size: 47px;	line-height: 1.2em;		font-weight: 600;}
	.image-article img {		max-width: 100%;			}
	.article .introduction {	font-size: 18px;	line-height: 1.4em;}
	.article img{	max-width: 100%;}

	.article h2::before {    color: #e6102b; 	content: "> ";}
	.article h2{    			font-weight: 500;    font-size: 26px;}
	.article h5{	font-size: 1.2em;}
	
	.categorie {
		background: #b92423;
		color: #fff;
		text-transform: uppercase;
		font-size: 15px;
		padding: 5px 16px;
		font-weight: 600;
		display: inline-block;
	}
	.espaceCommentaires{ border-top: 1px solid #ccc; margin-top: 30px; padding: 20px;}

	#skyscraper{margin-top: 50px; padding: 20px;}
	.sommaire{	border: 10px solid #eee; 	padding: 0 20px 20px; 	text-transform: uppercase;	text-align: center;}
	.sommaire h4{ margin: 15px 0 10px;	color: #b92423;		font-size: 19px;	}
	.sommaire li {font-size: 12px; font-weight: 400; border-top: 1px solid #eee; padding: 5px;}
	.sommaire li a{color: #333; }
	/*.sommaire li:hover::before {    color: #e6102b;    content: "> ";}*/
	.list-points li {	list-style: inside;	padding: 1px 20px;	}

/* Espace commentaire*/
.commentaire{	padding: 7px;}
.user-avatar{	float: left;    width: 15%;    text-align: center;	}
.user-avatar img{	    max-width: 70%;	}
.commentaire-info .nom-auteur{	font-weight:700;		}
.commentaire-info time{			font-style:italic;		}
.message-com{   background: #e7484a;    color: white;    padding: 20px;    font-size: 18px;    margin-top: 20px;	}
.message-com.vert{	background: #5cb85c;}



/**/
.sociaux a {
    color: white;
    display: inline-block;
    height: 15px;
    padding: 7px 57px 21px 32px;
    text-decoration: none;
    width: 60px;
    margin: 0 5px 5px;
	font-size: 12px;
}	
.facebook2 {    	background: #3b5998 url("../img/facebook-ico.png") no-repeat scroll 10px center;	}	
.twitter2 {    	background: #5bc0de url("../img/twitter-ico.png") no-repeat scroll 8px center;		}

@media (max-width: 800px) {
	.mainColonne{padding-left: 10px;}
}
 /**/

/**/
/* Tableau */
.bicolor{border-collapse: collapse;}
.bicolor th, .bicolor td { border: 1px solid #d4d4d4; padding:8px;}
.bicolor tr:nth-child(2n) {    background-color: #f1f1f1;}
/**/
.codage{  background: #f5f5f5;  padding: 20px;}


/********** MAJ menu normal ***/
.TopMenu a{			color: #fff;	}
.respMenu {top: 0; display: none;}
.normalMenu{	position: absolute; top:0; right: 0;	display: block;	z-index: 150;}
.normalMenu li{  	display: inline-block;	}
.normalMenu ul{  	text-align: right;	}
.normalMenu .BlockLine{
	padding: 0 16px;
	line-height: 50px;
	margin: 7px 0;
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 600;
}
.normalMenu li a{ text-decoration: none;}
.normalMenu .BlockLine::after{
	bottom: 0;
	content: '';
	display: block;
	height: 2px;
	margin-top: -2px;
	position: relative;
	width: 100%;
	background: transparent;
}
.normalMenu .BlockLine:hover::after{		background: white;	}
.normalMenu .BlockEncadre{
	border: 1px solid white;
    line-height: 35px;
    border-radius: 50px;
    margin-left: 20px;
    padding: 0 30px;
}

.normalMenu .BlockEncadre:hover{			background: rgba(0,0,0,0.2);	}
.normalMenu .BlockEncadre:hover::after{		background: transparent;	}

@media (max-width: 800px) {
	.respMenu {			display: block;	}
	.normalMenu {		display: none;	}
}
.responsive-on .normalMenu{display: none;}

/** Page 'creation de site'*/

.image_type01 {		overflow:hidden; 	position: relative;	}
.image_type01 img{	max-width: 90%;}

.prix01{padding: 30px 50px; background: #eee;	}
.prix01 .mini_icone {background: white;	color:#b92423;	}

#type-de-site a{					color: inherit;		}
#type-de-site a:hover{			text-decoration: none;	}
#type-de-site a:hover .prix01{	background: #ddd;		}