/***********************************************
All screens
***********************************************/
body                  { 
	margin:0 0; 
	/*font-family: 'Titillium Web', sans-serif;*/
	font-family: 'Merriweather Sans', sans-serif;
	background-color: #e8ecf1;
	color :#2A4361;
}




.grid-highlight                            { margin-bottom:5px; }
.grid-highlight [class^="grid_"]                { line-height:30px; text-align:center; background-color:#F1F1F1; }



h1, .title {
    font-size: 30px;
    letter-spacing: 1.5px;
	padding-bottom: 20px;
	font-weight: bold;
	text-transform : uppercase;
	color : #2B4166;
}
.fond_sombre h1, .title  {
	color: white;
    text-shadow: 1px 1px 9px #111111;
	margin-top : 40px;
}
.header h1 {
    margin-top: 60px;
    font-size: 70px;
}


/************** HEADER TOTAL ***************/

/*** Menu navigation ***/
.bandeau_sup_fond {	
	background-color:#344c68; 
	height:70px;
	
    position: fixed;
    width: 100%;
    z-index: 2;
	top:0;
}

.bandeau_sup {
    font-weight: bold;
    line-height: 40px;
}

ul.nav { 
	margin : 15px 0;
	margin-right : 4px;
	position:relative;
	float : left;
}

.nav li {
    display: inline-block;
    font-size: 0.95em;
    text-align: center;
    margin: 0 10px;

	/*transition*/
	-webkit-transition: all .5s ease .1s;
	-moz-transition: all .5s ease .1s;
	-o-transition: all .5s ease .1s;
	transition: all .5s ease .1s;
}

.bandeau_sup a {	
	display: block;
	color: white;
    text-transform: uppercase;
	text-decoration : none;
	/*transition*/
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;

	text-shadow: 4px 4px 5px rgba(80, 80, 80, 0.5);
}

.nav li:hover a{
	transform: translateY(-5px);	  
 }

 
/*** animation style lavalamp ***/
	.underline, .underline_en { 
		position: absolute;	/* on le positionne en absolu où l'on veut */
/*		left : 0; */
		bottom: 1px;
/*		width: 103px;*/
		height: 3px;
		background-color:#1abc9c;
		/*background-color:#ccc; */
	}	
	/*
	inutile en mode twig 
	.under2 { 
		left : 128px; 
		width: 142px;
	}	
	.under3 { 
		left : 295px; 
		width: 53px;
	}*/
	
	.nav li:hover ~ .underline, .nav li:hover ~ .underline_en{
		background: #1abc9c;
		/* shadow */
		-moz-box-shadow: 0 0 5px #AFF3E6;
		-webkit-box-shadow: 0 0 5px #AFF3E6;
		-o-box-shadow: 0 0 5px #AFF3E6;
		box-shadow: 0 0 5px -1px #AFF3E6;
	}

	/* au hover sur chaque item li, on déplace le "underline"  */
	/* "~" signifie qui est frère mais placé après */
/*
	.nav li:nth-child(1):hover ~ .underline { left:0; width: 103px;} 
	.nav li:nth-child(2):hover ~ .underline { left:128px; width:142px;}
	.nav li:nth-child(3):hover ~ .underline { left:295px; width : 63px;}
	.nav li:nth-child(4):hover ~ .underline { left:382px; width : 53px;}	
	.nav li:nth-child(5):hover ~ .underline { left:460px; width : 72px;}	
	
	.nav li:nth-child(1):hover ~ .underline_en { left:0; width: 103px;} 
	.nav li:nth-child(2):hover ~ .underline_en { left:128px; width:77px;}
	.nav li:nth-child(3):hover ~ .underline_en { left:230px; width : 55px;}
	.nav li:nth-child(4):hover ~ .underline_en { left:310px; width : 55px;}
	.nav li:nth-child(5):hover ~ .underline_en { left:390px; width : 70px;}
*/
	
	.nav  li a:focus{
		 color:rgba(131, 201, 195, 1);
	}
/***********************************/


/*** le logo et les pictos langue *****/

	.bandeau_sup  img{ 
		float : left;
		/*transition*/
		margin-top : 12px;
		-webkit-transition: all .3s;
		-moz-transition: all .3s;
		-o-transition: all .3s;
		transition: all .3s;
	}
	.bandeau_sup  a > img:hover{ 
		transform:translateY(-5px) scale(1.05);
			/*animation: bounce 0.7s ease 2;*/
	}
	
	.bandeau_sup .logo {
		float: left;
		margin-top: -5px; 
		margin-right: 30px;
		width : 230px;
	}
		/** intéressant, à garder ****/
		/*@keyframes bounce{
			 from {transform:translateY(0) scale(1)}
			 50%  {transform:translateY(-5px) scale(1.1)}
			 to   {transform:translateY(0) scale(1);} 
		}
		*/
/***********************************/


/**** les boites admin et inscription *****/
	div.nav {
		width:130px;
		height:40px;
		line-height:40px;
		text-align : center;
		float: left;
		margin: 10px;
		padding-left : 10px;
		padding-right : 10px;
		font-size:12px;
		color : #F5F5F5;
		
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		/* shadow */
			-moz-box-shadow: 4px 4px 5px rgba(20, 20, 20, 0.5);
		 -webkit-box-shadow: 4px 4px 5px rgba(20, 20, 20, 0.5);
			  -o-box-shadow: 4px 4px 5px rgba(20, 20, 20, 0.5);
				 box-shadow: 4px 4px 5px rgba(20, 20, 20, 0.5);
		/*transition*/
		 -webkit-transition: all .3s;
			-moz-transition: all .3s;
			  -o-transition: all .3s;
				 transition: all .3s;
	}
	div.nav:hover {
		color:white;
		transform:translateY(-5px) scale(1.05);
	}
	.inscription { 
		background-color :#EDA43D;	/* Old browsers */
		background: -moz-linear-gradient(top, #f3c251 0%, #eda53e 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3c251), color-stop(100%,#eda53e)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #f3c251 0%,#eda53e 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #f3c251 0%,#eda53e 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #f3c251 0%,#eda53e 100%); /* IE10+ */
		background: linear-gradient(to bottom, #f3c251 0%,#eda53e 100%); /* W3C */
	}
	.admin { 
		background: #23d3bd; /* Old browsers */
		background: -moz-linear-gradient(top, #23d3bd 0%, #1abd9d 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#23d3bd), color-stop(100%,#1abd9d)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #23d3bd 0%,#1abd9d 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #23d3bd 0%,#1abd9d 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #23d3bd 0%,#1abd9d 100%); /* IE10+ */
		background: linear-gradient(to bottom, #23d3bd 0%,#1abd9d 100%); /* W3C */
	}

	.inscription:hover  {
		background: #e59f3d; /* Old browsers */
		background: -moz-linear-gradient(top, #e59f3d 0%, #fcd580 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e59f3d), color-stop(100%,#fcd580)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #e59f3d 0%,#fcd580 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #e59f3d 0%,#fcd580 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #e59f3d 0%,#fcd580 100%); /* IE10+ */
		background: linear-gradient(to bottom, #e59f3d 0%,#fcd580 100%); /* W3C */
	}
	.admin:hover  {
		background: #19b595; /* Old browsers */
		background: -moz-linear-gradient(top, #19b595 0%, #28e2bd 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#19b595), color-stop(100%,#28e2bd)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #19b595 0%,#28e2bd 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #19b595 0%,#28e2bd 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #19b595 0%,#28e2bd 100%); /* IE10+ */
		background: linear-gradient(to bottom, #19b595 0%,#28e2bd 100%); /* W3C */
	}
/***********************************/



/*** Le header ***/
.header {
	width : 100%;
	height : 667px;
	background-color:#3d6088;
	background:url('../images/PresentationBg.jpg') no-repeat;
	background-size:100%;
	margin-bottom : -50px;
	margin-top : 70px;
}

.header_int {
	width : 100%;
	height : 200px;
	background-color:#3d6088; 
	background:url('../images/interieurBg.jpg') no-repeat;
	background-size:100%;
	margin-top : 70px;
}
.header_int h1, .title  {
	font-size:70px;
	margin-top:60px;
}

.tablette_index {
    position: absolute;
    top: 20px;
    left: 40px;
    width: 500px;
}

.fond_tablette {
    position: absolute;
    top: 0px;
    left: 0px;
    /*width: 500px;*/
    width: 587px;
}

/*#header_rotation {
    width: 445px;
	height:350px;
	overflow: hidden;
	left: 68px;
    top: 75px;
}
*/


#header_rotation {
	position: absolute;
    width: 445px;
	height:278px;
	overflow: hidden;
	left: 68px;
    top: 75px;
}



.sur_tablette {
   /* position: absolute;
    left: 28px;
    top: 38px;*/
    width: 445px;
}
.hand {
    position: absolute;
    left: 325px;
    top: 235px;
    width: 300px;
	
			animation-delay: 12s;
	-webkit-animation-delay: 12s;
	   -moz-animation-delay: 12s;
	     -o-animation-delay: 12s;
	    -ms-animation-delay: 12s;
	
			animation-duration: 3s;
	-webkit-animation-duration: 3s;
    	  
			animation-fill-mode: both;
	-webkit-animation-fill-mode: both;
      
	  
			animation-name: fadeout;
	-webkit-animation-name: fadeout; 
       -moz-animation-name: fadeout;
        -ms-animation-name: fadeout; 
         -o-animation-name: fadeout;
}

@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

.fond_sombre h2  {
    color: white;
    text-shadow: 1px 1px 9px #111111;
	margin-top:-20px;
}

.fond_sombre p {
    color: white;
    line-height: 20px;
    font-size: 15px;
	text-align:justify;
}
.fond_sombre li {
    color: white;
}
.spot {
    width: 20px;
    height: 20px;
    background-color: #CDCDCD;
    float: left;
    border-radius: 50%;
    margin-right: 20px;
	color : darkslategray;
	padding-left : 5px;
	font-weight : bold;
}

.header_list {
	line-height:10px;
}

.markets {
	margin-left:50px;
}
.smartphone {
    width: 30px;
    margin-left: 15px;
    margin-top: 10px;
}
/******* FIN DU HEADER TOTAL ************/




/******** CONTENT *******/
.short_margin { margin-left:0; margin-right:0;}

.silhouette {
	position : absolute;
	margin-top : -190px;
	left : 150px;
}

.bluetitle {
	color:#4fbeff;
}

.pictodesc .grid_6 {
	/**/
}

.column { margin-bottom : 20px; }
.column .inner_cln {  width : 100%; height:180px;}

/** hexagon **/
.hexagon {
  position: relative;
  /*width: 17.32em; height: 10em;*/
  width: 130px; height: 81px;
  border-radius: .7em/1.2em;
  background: rgba(88, 167, 154, 1);
  transition: opacity .5s;
  margin-top:40px;
  margin-bottom:40px;
}
.hexagon:before, .hexagon:after {
  position: absolute;
  width: inherit; height: inherit;
  border-radius: inherit;
  background: inherit;
  content: '';
}
.hexagon:before {
    -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);

}
.hexagon:after {
    -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}

.picto_hexa {
	position:absolute;
	z-index:2;
}

.desc {
	font-size:13px;
}

.bigspot {
    width: 40px;
    height: 40px;
    background-color: #449d90;
    float: left;
    border-radius: 50%;
    margin-right: 20px;
    color : rgba(25, 72, 59, 1);
	padding-left : 12px;
	/*padding-top: 7px;*/
	font-size : 30px;
	font-weight : bold;
}
.biglist {
	height:55px;
	padding-left:60px;
}

.minibloc {
	float:left;
	width:30%;
	text-align:center;
	height:200px;
}

.minibloc p {
	text-align:center; 
	font-weight:bold;
}

.fancybox {
	display: block;

}
/********** les clients *********/
.references { 
    /*background-color: rgba(246, 248, 249, 1);*/
    background-color: white;
}
		/** intéressant, à garder ****/
		/*@keyframes bounce{
			 from {transform:translateY(0) scale(1)}
			 50%  {transform:translateY(-5px) scale(1.1)}
			 to   {transform:translateY(0) scale(1);} 
		}*/
		
				/** intéressant, à garder ****/
	@keyframes aller_retour {
		 0%,30% {transform:translateY(0);}
		70%,100% {transform:translateY(-210px);} 
	}
	
	@keyframes aller_retour_mobile {
		 0%,30% {transform:translateY(0);}
		70%,100% {transform:translateY(-420px);} 
	}
		
		
.references_logos { 
	height: 200px; 
	margin-bottom: 10px;
	overflow: hidden;
}
.logoclient  { 	
	position:relative;
	animation: aller_retour 5s ease 1s infinite alternate;
}
.logoclient img  { margin-right : 50px }

/********** les encarts *********/

h2 {
    font-size: 22px;
    line-height: 34px;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 25px;
}

.analyse {
	width : 100%;
	height : 667px;
	/*margin-top : 100px;*/
	position:relative;
	background-color:#3d6088;
	background:url('../images/AnalyseBg.jpg') no-repeat;
	background-size:100%;
	margin-bottom : -150px;
}

.analyse a.demo { margin-bottom: 40px; width: 26%;  }
	
.tablette_analys {
    margin-top: 60px;
	width:65%;
}

.creation {
	width : 100%;
	height : 560px;
	position:relative;
	background-color:#3d6088;
	background:url('../images/CreationBg.jpg') no-repeat;
	background-size: 100% 420px;
	margin-top : 80px;
}


.mac {
	margin-top : -80px;
	width:90%;
}

.demo_admin	{ position:absolute; }
.demo_admin	a.demo { line-height:30px; width: 35%; margin:0; }


/************* features **********/
.Envoivisu {
    margin-top: -80px;
    margin-left: 100px;
	width:110%;
}

.fonctions {
	width : 100%;
	height : 560px;
	position:relative;
	background-color:#3d6088;
	background:url('../images/fonctionsBg.jpg') no-repeat;
	background-size:cover;
	margin-top : 80px;
}

.fonction_admin {
	width : 100%;
	height : 560px;
	position:relative;
	background-color:#3d6088;
	background:url('../images/adminBg.jpg') no-repeat;
	background-size:120%;
	margin-top : 80px;
}

.fonction_admin .minibloc {
	height: 300px;
}
.fonction_admin .minibloc img{
	margin-bottom:15px;
    border: solid 15px #000;
    border-radius: 15px;
}

.demo {
    display: block; /*inline-block */
	width: 40%; 
    margin: 5%;
    padding: 8px 15px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 30px;
    transition: all 0.3s ease-out;
    box-shadow: inset 0px 1px 0px rgba(255,255,255,0.5), 0px 2px 2px rgba(0,0,0,0.3), 0px 0px 4px 1px rgba(0,0,0,0.2);
    text-decoration: none;
    text-shadow: 0px 1px #000;
	text-align: center; 
	color: white; 
	line-height: 50px; 
	font-size: 22px; 
	font-weight: bold; 
	position: relative; 
	background-color: rgba(67, 163, 120, 1);
}
.demo.extended { width : 35%;}
.demo1 {
    position: absolute;
    width: 200px;
    margin: 5%;
    top: 440px;
    left: 180px;
    line-height: 15px;
    font-size: 16px;
}


.demo:hover {
background-color: rgba(79, 191, 141, 1);
}
/******** FIN DU CONTENT *******/

.contact {
    width: 100%;
    height: 500px;
    position: relative;
    background-color: #6494B8;
    background-image: url('../images/ContactBg.jpg');
    background-repeat: no-repeat;
    margin-top: 50px;
    background-position: 20% 100px;
}

.ContactBorder {
	width : 100%;
	height : 50px;
	position:relative;
	top:-20px;
	background-color:#6494B8;
	background:url('../images/ContactBorderBg.png') no-repeat;
	background-size:100%;
}
/*
.formcontact {
	background-color: #334C6A;
}*/

.form_wrap.result {
	border:solid 1px;
	background-color: rgba(56, 112, 58, 1);
	color:white;
}
.form_wrap.result p{
	text-align: center;
	margin : 15px;
}

.footer {
	background-color : #567EA1;
}
.footer.navigation-top {
	display: none;
}


.grid_4 ul { margin : 0; }

/***** FONCTIONS ******/
.fonction_envoi {
	margin-top:50px;
}
.fonction_envoi img {
	width:90%;
}
.fonction_envoi img.bigger {
	width:120%;
}
.fonction_envoi .grid_12 {
	line-height:120px;
}
.fonction_envoi .grid_2 {
	margin:0;
	text-align:center;
}
.fonction_envoi .grid_4 {
	margin-right:3%;
	height: 130px;
}
.fonction_envoi p {
	line-height:normal;
	display : inline-block;
}
.fonction_envoi .decalhaut {
	position:relative;
	top:20px;
}

/***** TARIFS ****/
.analyse.bornes { margin-top:20px; }
.analyse.bornes .grid_12 { margin-top:-70px; }

.bornes  .row {	margin-top:30px; }
.bornes  img {
	margin-right:20px;
	width:110%;
}
.bornes  h1 {
	margin-top:0px;
}
.matos li {
		display : block;
		background-color:floralwhite;
		padding: 5px;
		border-radius: 10px 10px;
		color: darkslategrey;
		font-size:14px;
			
	   -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,.3);
    -moz-box-shadow: 2px 2px 8px rgba(0,0,0,.3);
    box-shadow: 2px 2px 8px rgba(0,0,0,.3);

}
.totem { margin-top:-200px;position:relative;z-index:-1 }



/********************** Articles bog (posts) **********************/
.entry-meta { font-size: 14px; color: #888; margin-bottom: 8px; }
article.type-post {     
	background: white;
    padding: 30px 0;
    border-top: solid 1px lightgray;
    border-bottom: solid 1px lightgray; 
}
header.entry-header {    margin-bottom: 30px; padding: 0 15px; }
h1.entry-title {
	margin: 0;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 28px;
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -.5px;
    color: #263741;
	border-bottom: solid 1px lightgray;
}
.entry-title a { text-decoration: none; }
.entry-excerpt {     font-size: 1.05em;    line-height: 1.5;    background: #e9f0f1;    padding: 30px 0; }
.entry-excerpt p {	text-align: center;    margin: 0; }
.post-thumbnail {    text-align: center; }
.post-thumbnail img {   max-width: 100%; max-height: 420px;  height: auto;    width: auto;   margin: 0; } 

.entry-content .post { padding: 0 20px; }
.entry-footer { margin-top: 30px; font-size: 14px; color: #888; }
.entry-footer span { margin-right: 15px; }

.post-navigation .nav-links, .pagination .nav-links { display: flex; justify-content: space-between; margin-top: 40px; }
.nav-subtitle { display: block; font-size: 13px; color: #888; }

/* ---- Articles : surtitre (ex. « Nouveau contrat · octobre 2026 ») ---- */
.entry-surtitre {     
	font-size: 0.8em;
    font-family: Arial, sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #2c7a6b;
    border-top: solid 1px lightgray;
	font-weight:700;
    border-bottom: solid 1px lightgray;
    padding: 0px 20px;
    line-height: 3; 
	}
.entry-surtitre a { color: inherit; text-decoration: none; }
.entry-surtitre a:hover { text-decoration: underline; }

/* ---- Liste d'articles : vignette recadrée (format 16/9, centrée) ---- */
.listing {     margin: 0 30px; }
.post-thumbnail-list {    margin-bottom: 30px; }
.post-thumbnail-list a { display: block; overflow: hidden; }
.post-thumbnail-list img {
	display: block;
	width: 70%;
	height: auto;
	aspect-ratio: 27 / 9;  
	object-fit: cover;      /* remplit le cadre en rognant l'excédent */
	object-position: center;/* zone conservée : top, bottom, 50% 30%… */
}
a.more-link {
    display: block;
    padding: 10px;
    background: #344c68;
    width: 30%;
    border-radius: 15px;
    color: white;
    text-align: center;
    text-decoration: none;
}



/***********************************************
Screen 1200px-1680px
***********************************************/
@media only screen and (min-width: 1200px) and (max-width: 1680px) {
	.header {
		width : 100%;
		background-position-x : -50px;
		height:600px;
		background-size:1730px;
	}
	.header_int { height : 160px;}
	.silhouette {
		margin-top:-110px;
	}
	.creation {
		background-size :160%;
	}
	.header_int {
		background-size :130%;
		background-position-x:-150px;
	}
	.header_int h1 {
		margin-top:45px;
	}
	.demo_admin	a.demo { 	margin-right: 120px;  }
	.demo { 	width : 50%; }
	.analyse { height: 467px; }
	.analyse a.demo { width: 30%; }
	
	/*******************************/
	.demo1 { top: 425px; left: 210px; width: 150px;}
	.fonctions, .fonction_admin {	background-size: cover; }
	
	.logoclient img  { margin-right : 30px; zoom : 95%; }
}

/***********************************************
Screen 960px - 1200px
***********************************************/
@media only screen and (min-width:960px) and (max-width: 1199px) {

	.header {
		width : 100%;
		height:550px;
		background-position-x:-350px;
		background-size:1680px;
	}
	.bandeau_sup_fond, .bandeau_sup {
		height:60px;
	}
	.bandeau_sup .logo {
		width:20%;
		margin-top:0;
		margin-right: 5px;
	}
	ul.nav {
		margin-right: 0;
	}
	div.nav {
		width:100px;
		padding:0px;
		font-size:9px;
		margin:5px;
	}
	
	.tablette_index {
		top :0;
		left:0;
	}
	.fond_tablette {
		width: 500px;
	}
	#header_rotation {
		top :63px;
		left:57px;
		width:380px;
	}
	.sur_tablette {
		width: 380px;
	}
	.hand {
		top :200px;
		left:280px;
	}
	.header h1 {
		margin-top: 20px;
		font-size: 60px;
	}

	h1 {
		font-size:27px;
	}
	h2 {
		font-size:18px;
		margin-top:0px;
	}
	p {
		font-size:0.9em;
		line-height:22px;
	}
	.demo, .demo_admin a.demo  {	width: 50%; 	font-size: 27px;}
	.demo1 {	top: 370px;	left: 135px;	width: 150px;}
	
	.silhouette { width: 60%; }
	.pictodesc .grid_6 {	height: auto;}
	.column .inner_cln { height: 210px; }

	.references_logos { height: 145px; }
	.logoclient img  { margin-right : 20px; zoom : 80%; }

	.analyse  { background-size: cover; height: auto; padding-bottom: 40px; }
	.analyse a.demo { margin-bottom: 20px;  width: 50%; font-size: 26px; }
	.creation {
		background-position-x:-400px;
		background-size: cover;
		height: 400px;
	}
	.Envoivisu { 	margin-top : 10px; margin-left:0px	}
	#formcontact p.button input {	font-size : 20px;	}
	/**********************************/
	.fonctions { background-size : cover; 	}
	.fonction_envoi { margin-top:50px; }
	.fonction_envoi  img { vertical-align: middle; width:90%; } 
	img.bornes { vertical-align: bottom;  max-height: 400px; }
	.fonction_admin { background-size:180%; }
}

/***********************************************
Tablet (Smaller than 959px)
***********************************************/
@media only screen and (max-width: 959px) { /*  and (min-width:768px) */

	.bandeau_sup_fond {
        position: initial;
	}
	.row {
		/*float:none;*/
		display:block;
		text-align:center;
	}
	.header {
		width : 100%;
		height:800px;
		background-position-x:-350px;
		background-size:1680px;
		margin-bottom:0px;
	}
	.bandeau_sup_fond {
		height:60px;
	}
	.bandeau_sup .logo {
		width:15%;
		margin-top:5px;
		margin-right: 5px;
	}
	ul.nav {
		margin-right: 0;
	}
	div.nav {
		position:absolute;
		width:90px;
		padding:0px;
		font-size:9px;
		margin:5px;
		margin-top: 25px;
	}
	div.inscription {
		top: 60px;
		right:110px;
	} 
	div.admin {
		top: 60px;
		right:8px;
	} 
	
	
	.demo { font-size : 19px; width: 50%; }
	.tablette_index {
		position: relative;
		zoom: 90%;
		top:60px;
		left:-40px;
		margin:auto;
	}
	.header h1 {
		position:absolute;
		top:-510px;
		margin-top:0;
	}
	.header h2 {
		position:absolute;
		top:-460px;
		margin-top:0;
	}
	.fond_sombre p, .fond_sombre li {
	color :inherit;
	}
	
	.markets img {
		position: absolute;
		top:-160px;
		right:-20px;
		width:20%;
	}
	.markets img.smartphone {width: 4%; top: -212px; } 
	
	.demo1 {
		top: 330px;
		right: -50px;
		left: -60px;
		width: 130px;
	}

	.silhouette {
		width: 190px;
		top: -240px;
		left: 100%;
	}
	
	.column .inner_cln { height: 250px; }
	.pictodesc .grid_6 { 
		width:45%;
		height:auto;
		vertical-align:top;
		text-align:center;
	}
	section.pictodesc > p {
		width: 90%;	
		margin: auto;
	}
	img.pictohexa {	margin-left:-20px; width: 110%;}
	

	.references_logos { height: 140px; }
	.logoclient img  { margin-right : 20px; zoom : 80%; }
	
	
	.analyse {
		height:470px;
		background-size : 160%;
	}
	.tablette_analys {
		margin-top : 30px;
	}
	.demo_admin	{ position:relative; }
	.demo_admin	a.demo { line-height:18px; width: 65%; margin:auto; font-size:23px; padding:23px; z-index:1;}
	.analyse a.demo { margin-bottom: 20px; width: 50%; }
	.mac {
		width:60%;
	}
	.creation {
		background-size: 140%;
		background-position-x: -200px;
	}
	.creation .grid_7 {
		height:300px;
	}
	.creation .fond_sombre h1 {
		color: inherit;
		text-shadow: none;
	}
	
	#borne .grid_4 {
		width: 320px;
    	display: inline-block;
		vertical-align: bottom;
	}
	img.bornes {
		max-height: 400px;
	}

	.Envoivisu {
		width:60%;
		margin-top:0;
	}
	.ContactBorder { top : 0px; }
	.contact .grid_4, .contact .grid_8 {
		width : 90%;
		text-align:left;
	}
	.form_wrap { width:100%; }
	
	/********************* page features *****************************/
	.header_int { 
		background-size : 250%;
		background-position-x:-250px;
	}
	.fonctions {	background-size : cover; height: 740px; }
	
    
	.minibloc.fond_sombre p {
	color : white;
	}
	.fonction_envoi .grid_8, .fonction_envoi .grid_4 { 
		width:90%;
		display : inline-block;
	}
	.fonction_envoi {
		margin-top:50px;
	}
	.fonction_envoi  img {
		width:180%;
	} 
	.fonction_envoi  img.bigger {
		width:230%;
	} 
	.fonction_envoi .decalhaut {
		top:0px;
	}
	.fonction_envoi .grid_12 {
		line-height:60px;
	}
	.fonction_admin {
		background-size:230%;
	}
	.bornes .fond_sombre h1 { color:inherit; text-shadow:none;}
	
	
	
}

/***********************************************
Mobile (landscape 768px)
***********************************************/
@media only screen and (max-width: 767px) { 
	/*** navigation ***/
	.bandeau_sup_fond { 	height:360px; position:relative; }
	.bandeau_sup { text-align: center; }
	.bandeau_sup .logo { width: 70%; margin-top: 0px; float:none; }
	div.nav {
		position: relative;
		text-align: center;
		float: right;
		width: 100px;
		font-size: 10px;
		margin-top: 10px;
	}
	ul.nav { margin: 0; margin-top:-14px; float:none; }
	.nav li { display: block;  border-bottom: dotted #CACACA 1px;}
	.nav li.underline, .nav li.underline_en { display:none; }
	
	div.inscription, div.admin { right:inherit; top:inherit;}
	
	/**** header ****/
	
	.row-max .grid_7 { height: auto; }
		
	.header {
		height: 720px;
		background-position-x: -800px;
		background-size: 850%;
		margin-top : 0px;
    }
	.fond_tablette, #header_rotation { left: 0;right:0;  margin: auto; }
	.header h1{
		position: relative;
		top: 10px;
		font-size:40px;
	}
	#header .header h1 {letter-spacing: 2px; }
	.header h2 { 
		position: relative;     
		top: -10px;
		margin-top: 0;
		margin-bottom: 30px;
		font-size: 15px;
		line-height:25px
	}
	.header_int  { margin-top : 0px; }
	
	.fond_sombre p, .fond_sombre li {
		color: white;
	}
	.spot {     margin-right: 8px; padding-left:0; } 
	.markets {
		position: relative;
		margin-left: 0px;
		top: -0px;
	}
	.markets img {
		position: relative;
		top: 0;
		right: 0;
		width: 50%;
	}
	.markets img.smartphone {
		width: 8%;
		top: 0;
	}
	
	.tablette_index {
		position: relative;
		zoom: 55%;
		top: -28px;
		left: auto;
		right: auto;
		width: 80%;
		margin:auto;
	}
	
	.hand { top: 250px; left: 55%; clip: rect(0px,260px,250px,0px); }
	
	
	/**** content ***/
	.row  { padding:0 15px; margin:0;	}
	.row-max , .row-max .grid_1, .row-max .grid_2, .row-max .grid_3, .row-max .grid_4, .row-max .grid_5, .row-max .grid_6, .row-max .grid_7, .row-max .grid_8, .row-max .grid_9, .row-max .grid_10, .row-max .grid_11, .row-max .grid_12 {
		padding:0; margin:0;
	}
	
	h1 { font-size: 21px;} 
	

	.demo {  line-height: 25px;  font-size: 18px;  width: 70%;  }
	.demo1 {
		position: relative;
		top: 480px;
		left: 0; right:0;
		width: 50%;
		margin: auto;
	}
	

	.silhouette_content {
		top: -240px;
	}
	.silhouette {
		position: relative;
		top: 0;
		width: 160px;
		left: auto;
		right:-35%;
	}
	.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
        display: inline;
	}
	.pictodesc { margin-top:-120px }
	.pictodesc .grid_6 {	height: auto;}
	.pictodesc h3 {	border: dashed 1px gray;    padding: 4px;    border-radius: 10px;}
	img.pictohexa {	margin-left:0; width: initial;}
	ul, ol {   padding-left: 15px; }
	
	.inner_cln:nth-child(even) .grid_2 {
		float: right;
		padding-left: 10px;
		padding-right: 0;
	} 
	
	.grid_2 {
	    display: inline;
		float: left;
		padding-left: 0;
		padding-right: 10px;
		margin-top: -10px;
		width : 40%;
	}
	

	.logoclient  { 	
		animation: aller_retour_mobile 10s ease-in-out infinite alternate;
		text-align:center;
	}
	.logoclient img {
		margin-right: 20px;
		zoom: 70%;
	}

	.column .inner_cln { height: auto;}
	.references_logos { height: 190px;}
	.analyse {    height: 270px;  background-size: 350%; background-position-x: -300px; padding-top: 40px;}
	
	.creation {  height: auto; margin-top:100px; background-position-x: -1000px;     background-size: 800%;}
	.creation .grid_7 {   height: 270px; }
	.creation .fond_sombre h1 {
		color:white;
		text-shadow: 1px 1px 9px #111111;
		margin-top: 0;
	}
	.Envoivisu {   width: 50%; margin-left:0;}
	
	img.bornes { width:50%; }
	
	/*** footer ***/
	
	.footer.navigation-top { display: block; 	}
	.footer.navigation-top .logo, .footer.navigation-top .admin, .footer.navigation-top .inscription { display: none; 	}
	.footer.navigation-top ul.nav { margin-top: 0;}
	.footer.navigation-top .bandeau_sup_fond { height: 140px;}

	.contact {  height: inherit; }
	.contact .grid_4, .contact .grid_8 {   width: 100%; }
	.mac {  margin-top: -120px; }
	.form_wrap {   width: 100%; }
	#formcontact p.button input {  width: 50%; } 
	
	
	.analyse a.demo { width: 50%; margin-bottom:20px; font-size:17px; }

	.totem { margin-top:0px; }
	
}

/***********************************************
Mobile (portrait 425px)
***********************************************/
@media only screen and (max-width:425px) {
	.bandeau_sup_fond { 	height:280px; }
	.header { height: 785px; }
	.tablette_index { width: 100%; right:0; left:0;}
	.demo1 {
		left: 0; right:0;
		width: 80%;
		margin:auto;
		top: 530px;
	}
	
	h1, .title { letter-spacing:0px;  line-height: 27px; margin-top:8px;}
	.silhouette { display: none; }
	
	.pictodesc {    margin-top: 0px;}
	
	.references_logos { height: 230px;}



	.logoclient.rang1  img{ position:initial; }
	.logoclient.rang2 img{ position:initial;  } /*  margin:10px 0 0 15px; */
	
	.analyse {  padding-top: 10px;  height: 210px; }
	.creation { height: 600px; margin-top:50px; }
	.creation .grid_7 {   height: 150px; }
	.mac {  margin-top: -80px; }
	.Envoivisu {  width: 100%; }

	
	.analyse a.demo { width: 80%; margin-bottom:20px; }
	
	img.bornes { width:60%; }
	
	
}