/***************************************************************************************************************************** */
/* Qu'est-ce-qui va pas ? 
/* 1 - Le treillis de petits points gris ("carre-gris.png") qui ne collent pas tout en haut de la page, sous la banière, si tu ne mets pas de bordure noire de 1px à #wrapper
/* 2 - Le début du texte, qui pour être décalé sous la banière a demandé des manipulations louches sur la balise <section> et qui, surtout ne s'aligne pas où il faut en
			fonction du zoom du navigateur. A 100%, ça marche, à 90%, 80%, etc. le titre " véloconnect : vos coursiers à vélo " passe sous le header ... Et ça empire avec le
			dézoom.
/* 3 - Pas de médias querries top
/* 4 - Un design peut-être un peu vieux jeu pour le corps de page, en particulier ce qui est des titres. AS TU UNE PROPOSITION A NOUS FAIRE ?
/* 5 - Appliquer la suggestion de Nico : sur les smartphones, faire en sorte que le clic sur le n° de téléphone sur la bannière compose le n°



/* **************** STRUCTURE *********************** */
.panda {float:right; margin-top:20px}

.panda img {float:left}

.toutunvelo{float:left;color:#fff; text-align: center; font-family: Trebuchet MS, Helvetica, Arial, sans-serif; font-size:16px; margin-top:10px; margin-left:10px}

.num {font-family: Trebuchet MS, Helvetica, Arial, sans-serif; color:#e72f84; font-size:35px; top:45px;position:absolute; left: 50%; margin-left: -129px; width: 258px;}

.num a{text-decoration: none; color:#e72f84}

.bandeau {text-decoration: none;}

.bandeau img{margin-bottom:10px; float:left}


#burger {position:absolute; right: 15px; top:15px; display:none; cursor:pointer;}


#fermer {position:absolute; right: 15px; top:15px; display:none; cursor:pointer}

#burger_menu {display:none; background: #000; position: absolute; opacity: 0; width: 100%; font-size: 20px; color: #fff; text-align: center; z-index:20}

#burger_menu li {list-style:none;border:1px solid white;}

#burger_menu a {text-decoration: none; color:#fff;font-variant:small-caps;}


html{font-size:100%;height:100%;margin:0;padding:0;} /*IE*/
body{font-family: Trebuchet MS, Helvetica, Arial, sans-serif;
	font-size:1.0em; line-height:1.2em; /* "Interligne" */ padding:0;margin:0;height:100%;/*border:1px solid green;*/}   
	
em{font-weight:normal;font-style:normal;}

#wrapper{display:block;background-image:url("carre-gris.png");background-attachment:fixed;background-size:3px 3px;
		padding:0;margin:0;border:1px solid black}
		
header {position:fixed;
	top:0;
	z-index:2;*/ }

section{display:block;width:75%;min-width:660px;/*max-width:800px;/*line-height:1.1em;*/
	padding:0; margin:auto; margin-top:180px;
	/* position:absolute;top:150px; */
	}

#wrapper-inner{display:block;width:100%;}

/* *********************************************** *//* *********************************************** *//* *********************************************** */
/* **************** HEADER *********************** *//* *********************************************** *//* *********************************************** */
/* *********************************************** *//* *********************************************** *//* *********************************************** */

header{width:100%;background-color:rgba(0,0,0,1);padding:0;padding-top:0.2em;padding-bottom:0.2em;margin:0;}

#header_haut{margin:auto;width: 65%;
padding-top:0.3em; padding-bottom:0.3em;}



/* **************** MENU *********************** */

#header_menu{width:100%;margin:0;padding:0;border-top:10px solid black;border-bottom:none;}

nav{display:block;
	padding:0; margin:0;margin:auto;
	text-align:center;
	font-variant:small-caps;
	font-size:1.2em;
	}
	
nav ul {display:inline-block;width:98%;
	line-height:1.2em;
	margin:0;
	padding:0;
	text-align:center;}

nav li{display:inline;
	list-style:none;
	background-color:rgb(255,255,255);border-radius:5px;
	margin:0; padding:0}

nav a {display:inline-block;
	margin: 0 4%;}


nav a {font-size:1.0em;line-height:2.0em;text-decoration:none;color:black;font-weight:bold;}
nav a:hover {font-size:1.0em;line-height:2.0em;text-decoration:none;color:rgb(255,0,123);font-weight:bold;}


/* *********************************************** *//* *********************************************** *//* *********************************************** */
/* **************** SECTION ********************** *//* *********************************************** *//* *********************************************** */
/* *********************************************** *//* *********************************************** *//* *********************************************** */

.subsection{padding:0;margin:0;margin-bottom:1.8em;
	background-color:rgba(255,255,255,0.8);
	border-radius:8px;}

/* Titre dans un bandeau noir, encadré de blanc, type "maillot", écriture blanc */	
.arrow_box{padding:0;margin:0;}

h1{    width: 100%;
    line-height: 1.8em;
    font-size: 1.8em;
    font-weight: bold;
    font-variant: small-caps;
    /* background-color: rgb(0,0,0); */
    color: #000;
    /* border-top: 5px solid white; */
    border-bottom: 5px solid white;}
	
h1 span{margin-left:4%;}  /* gère la marge gauche du titre comme la marge du corps de texte valeur = (100-92)/2 */

.texte{display:block;width:92%;/*max-width:650px;*/
	padding:0;margin:0;margin:auto;
	padding-bottom:1.0em;
	text-align:justify;}
	
.texte img{display:block;
	width:100%;max-width:650px;
	margin:auto;margin-bottom:1.3em;}
	

.texte .image400px{max-width:400px;}

.texte #imagetarifs{width:564px;}

.texte .colonne {display:inline-block;padding:1%;border:1px solid green;}

h5{font-variant:small-caps;margin-bottom:0,5em;}

p,ul{font-size:0.9em;}

.rose, .rose strong{color:rgb(245,43,132); font-weight:bold;}
.smallcaps, .smallcaps strong{font-variant:small-caps;font-weight:bold;font-size:1.0em;}
h3, h3 strong{font-weight:bold;font-size:0.9em;}

.imgright{margin:0;float:right;padding-left:3%;}
.imgleft{margin:0;float:left;padding-right:3%;}

.telephone{height:275px;}

.p-marge0{margin-top:0;padding-top:0;}

.numero{font-size:1.3em;}

section a {text-decoration:none;color:rgb(245,43,132);}
section a:hover{text-decoration:underline;}

b strong{font-weight:bold;}

.liste{line-height:1.5em;}

h4{font-variant:small-caps;font-weight:bold;font-size:1.2em;}

.smallcaps{font-variant:smallcaps}

.gallerie {margin-top:1,5em;margin-bottom:1,5em;}


/* ** Ils nous font confiance ***/
#confiance{width:100%;margin-top:1.0em;margin-bottom:1.2em;
	/*background-color:rgba(0,0,0,0.55);color:white;*/
	padding-top:0;padding-bottom:0.2em;
	border-radius:5px;
	}
#confiance p {margin:0;padding:0;text-align:center;}
#confiance a {text-decoration:none;color:rgb(250,250,250)}
#confiance a:hover {text-decoration:underline;color:rgb(250,250,250)} 

.confiance-logo{display:inline-block;height:55px;width:auto;padding-left:4%;padding-right:4%;vertical-align:middle;margin-bottom:0.9em}
#confiance .titre{font-variant:small-caps;font-weight:bold}


/* *********************************************** *//* *********************************************** *//* *********************************************** */
/* **************** FOOTER ********************** *//* *********************************************** *//* ************************************************ */
/* *********************************************** *//* *********************************************** *//* *********************************************** */


footer{width:100%;margin-top:1.6em;margin-bottom:1.2em;
	background-color:rgba(0,0,0,0.55);color:white;
	padding-top:0.2em;padding-bottom:0.2em;
	font-size:0.7em;}
footer p {margin-left:25px;margin-right:25px;text-align:center;}
footer a{text-decoration:none;color:rgb(250,250,250)}
footer a:hover{text-decoration:underline;color:rgb(250,250,250)} 

#presse {display:block;width:90%;margin:auto;font-size:1.3em; font-weight:bold;margin-bottom:1.5em;border-bottom:1px solid rgb(220,220,220);}
#presse p{text-align:center}
.presse-logo{display:inline-block;width:90px;padding-left:4%;padding-right:4%;vertical-align:middle;}
#presse .titre{font-variant:small-caps;}

footer ul{list-style-type:none;}
footer ul li{margin-bottom:1.3em;}
.titre-liste{font-size:1.2em;font-weight:bold;}
.inside-footer-wrapper-3-colonnes{display:inline-block;width:33%;border:1px solid green;}
.inside-footer-wrapper-3-colonnes img{margin-right:3%;width:15px;}


/* Commentaires **/
.commentaire-client{display:block;width:16%;position:fixed;top:370px;left:20px;
	background-color:rgba(0,0,0,0.8);color:white;border-radius:5px;
	text-align:justify;
	padding-bottom:0.6em;}
.commentaire-client p {width:80%;margin:auto;font-size:0.8em;padding-top:0;}
.client-nom{font-size:0.6em;font-weight:bold;text-align:center;}
.guillemet{text-align:center;}
.guillemet img{margin-bottom:-16px;}



/* *********************************************** *//* *********************************************** *//* *********************************************** */
/* **************** DIVERS ********************** *//* *********************************************** *//* ************************************************ */
/* *********************************************** *//* *********************************************** *//* *********************************************** */

/*Placement des ID (fonctionnalité de la naviguation) */
#services, #tarifs, #fonctionnement{position:relative;top:-130px;}
.ancre{color:rgba(255,255,255,0);font-size:0.1em;}




/* *********************************************** *//* *********************************************** *//* *********************************************** */
/* **************** MEDIA QUERRIES ********************** *//* *********************************************** *//* **************************************** */
/* *********************************************** *//* *********************************************** *//* *********************************************** */
/* *********************************************** *//* *********************************************** *//* *********************************************** */
/* **************** ******* ********************** *//* *********************************************** *//* *********************************************** */
/* *********************************************** *//* *********************************************** *//* *********************************************** */






@media screen and (max-width: 1300px)
{
	
	.bandeau {text-decoration: none; width:100%; text-align: center}
	
	.bandeau img{float:none}
	
	section {margin-top: 200px;}
	
	#header_haut{width:95%}
}



@media screen and (max-width: 1024px)
{

		/* #wrapper{height:3900px;} */
	
	
		/* *** Responsive Section **/
		#marge-gauche-section{display:inline-block;min-width:100px;}
		section{width:65%;min-width:450px;}
		section img, .texte #imagetarifs{display:block;width:90%;}
	



		/* *** Responsive header **/
		header{min-width:590px;}
		#header_gauche, #header_droit{height:100px; vertical-align:middle;}
		#header_contacts{height:55%;}
		#header_menu{height:42%;}
		#header_gauche{display:inline-block;min-width:100px;}
		#header_droit{display:inline-block;min-width:450px;}
		#header_gauche img{display:inline-block;width:95%;min-width:100px;}

		#header_contacts{background-image:url("telephone-pictos.png");background-size:contain;background-repeat:no-repeat;}

		nav a {margin: 0 3%;}
		nav li {margin:0 0.1%;}


		/* ** Tampon "Offre" *** */
		#debut{display:none;}
		#debut-small{display:block;width:20%;min-width:100px;
			position:absolute;top:156px;}
			
		/* Placement des ID * */
		#services, #tarifs, #fonctionnement{padding-top:100px;}
	

	
	
}

/* @media screen and (max-width: 900px)
{
		body{font-size:0.9em;}
		#wrapper{height:3580px;}
} */






@media screen and (max-width: 860px)
{
	#header_menu{display:none}
	
	#burger {display:block;}
	
	.panda {display:none}
	
	.bandeau {float:left}
	
	.num{
	font-family: Trebuchet MS, Helvetica, Arial, sans-serif;
    color: #e72f84;
    font-size: 40px;
    top: 0; 
    position:relative;
    left: 0; 
    margin-left: 0; 
    float: left;
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
	
	}
	
	section{margin-top: 200px;}
	
	h1 {font-size:1.2em}
	
}



@media screen and (max-width: 800px)
{
		/* body{font-size:0.9em;}
		#wrapper{height:3580px;} */
	
		#header_gauche img{display:none;}
		#header_gauche{background-image:url('logo-veloconnect-coursier-velo-ecran-moyen.png');
			background-size:contain;background-repeat:no-repeat;}
			
		.texte .video iframe{display:block; width:100%; height:330px; max-width:650px;margin:auto;}
	
	.imgleft, .imgright{float:none}
}




@media screen and (max-width: 703px)
{
	#header_haut {width:100%}
	
	.imgleft, .imgright{float:none}
}







/* Ecrans de petits mobiles **/
@media all and (max-width:600px)  
{
		body{font-size:1.0em;}
		/* #wrapper{height:3000px;} */

		/* *** Responsive Section **/
		#marge-gauche-section{display:none;}
		section{width:100%;max-width:600px;min-width:270px;
			top:110px;}
		section img, .texte #imagetarifs{display:block;width:90%;}
		
		.texte .video iframe{display:block; width:100%; height:305px; max-width:650px;margin:auto;}


		/* *** Responsive header **/
		header{display:block;width:100%;min-width:270px;max-width:600px;}
		#header_gauche, #header_droit{height:90px; vertical-align:middle;}
		#header_contacts{height:55%;}
		#header_menu{height:42%;}
		#header_gauche{display:none;}
		#header_droit{display:block;width:90%;min-width:250px;margin:auto;}

		#header_contacts{background-image:url("telephone-pictos.png");background-size:contain;background-repeat:no-repeat;}
			/*Menu*/
		nav{width:100%;}
		nav ul {;width:100%;}
		nav a {margin: 0 2%;}
		nav li {margin:0%;}

		/* ** Tampon "début d'activité" *** */
		#debut-small{display:none;}
			
		/* Placement des ID * */
		#services, #tarifs, #fonctionnement{padding-top:80px;}	
		
		footer{/* display:none; */
		font-size:0.6em;}
		
		/*Bandeau "presse" */
		.presse-logo{width:70px;}
		#presse .titre{font-size:1.0em}
		
		.imgleft, .imgright{float:none}
}

@media all and (max-width:500px)  
{
		.texte .video iframe{display:block; width:100%; height:250px; max-width:650px;margin:auto;}
	
	.panda{width:100%; text-align: center; float:left; margin-left: 80px; margin-bottom:15px}
	
	.panda img{float:left;}
	
	h1 {font-size:1.2em}
	
	.imgleft, .imgright{float:none}
	
}

@media all and (max-width:420px) 
{
	nav a {margin: 0 1%;}
	/* #wrapper{height:3800px;} */
	
	.texte .video iframe{display:block; width:100%; height:210px; max-width:650px;margin:auto;}
	
	.imgleft, .imgright{float:none}
	
}

@media all and (max-width:360px)  
{
	body{font-size:0.7em;}
	/* #wrapper{height:3500px;} */
	#header_gauche, #header_droit{height:60px; vertical-align:middle;}
	#header_contacts{height:30px;}
	#header_menu{height:25px;}
	.texte{font-size:1.1em;}
	nav a {margin: 0 1%;}
	nav li{line-height:1.3em;}
	
	section{top:75px;}
	#services, #tarifs, #fonctionnement{padding-top:62px;}	
	
	.imgleft, .imgright{display:none}
}