/*******************************************MENU HAMBURGER***************************************/
/* @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,700,800); */

/* *,html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,label,fieldset,input,p,blockquote,th,td { */
    /* margin: 0; */
    /* padding: 0; */
/* } */
			
/* article,aside,figure,footer,header,hgroup,nav,section { */
    /* display: block; */
/* } */

/* * { */
    /* -webkit-box-sizing: border-box; */
    /* -moz-box-sizing: border-box; */
    /* box-sizing: border-box; */
/* } */

/* html { */
    /* -webkit-font-smoothing: antialiased; */
/* } */

/* a { */
    /* color: #BA0707; */
    /* text-decoration: none; */
/* } */

/* a:hover { */
    /* color: #F5DEB3; */
/* } */

/* body { */
    /* background: #e5e5e5; */
    /* color: #2c3e50; */
    /* font: 14px "Open Sans",Helvetica,Arial,sans-serif; */
    /* -webkit-font-smoothing: antialiased; */
    /* line-height: 1; */
    /* width: 100%; */
/* } */

/***************************************MENU 2 AVEC SLIDE**************************************************************/




* {margin:0; padding:0; font-size:1em; box-sizing:border-box;}
a img {border:0;}
body {font-family:'Gobold', sans-serif; font-weight:100;background-color: rgb(122,22,50); }
/* body {font-family:'Exo', sans-serif; font-weight:300;} */

#index{ text-align: center;}
#index h1 { font-size:300%;color: rgb(253,253,253)}
#index h2 { font-size:150%;color: rgb(253,253,253)}
#index h3 { font-size:150%;color: lightgray}
@media only screen and (max-width: 1025px) {
#index h1 { font-size:250%;}
#index h2 { font-size:125%;}
#index h3 { font-size:125%;margin-bottom:1em;}
}


/* #fondImage {background:url('velos.png') no-repeat; background-size:cover; width:100%; padding-top:8em; line-height:14em; text-align:center; position:relative;} */
#fondImage {background:url('0-images/ia2018.jpg') no-repeat; background-size:cover;background-attachment:fixed;}
#fondImage2 {background:url('CaptureP.png') no-repeat; background-size:cover;}
#fondImage3 {background:url('pexels-photo-686230.jpeg') no-repeat; background-size:cover;background-attachment:fixed;}
#fondImage4 {background:url('pexels-photo-248762.jpeg') no-repeat; background-size:cover;background-attachment:fixed;}
/* #fondImage {background:url('png-clipart-artificial-neural-network-neuron-deep-learning-artificial-intelligence-neural-computer-network-neuron.png') no-repeat; background-size:cover;} */

#header>a>img{
    /* width: 700px; */
    width: 100%;
}
@media (max-width: 777px){
	#header>a>img{
		width: 100%
	}
}
/* Header */
/* #header {background:url('images/banner.png') no-repeat; background-size:cover; width:100%; padding-top:8em; line-height:14em; text-align:center; position:relative;} */
/* #header { z-index: 98; background:rgb252,125,74; background-size:cover; width:100%; margin-top:-4em;padding-top:12em; line-height:14em; text-align:center; position:relative;} */
/* #header { z-index: 98; background-image: linear-gradient(to bottom right, #842E1B, rgb252,125,74); background-size:cover; width:100%; margin-top:-4em;padding-top:12em; line-height:14em; text-align:center; position:relative;} */

/* #header { z-index: 98; background-image: linear-gradient(to bottom right, rgba(132,46,27,0.9), rgba(157,62,12,0.8)); background-size:cover; width:100%; margin-top:-4em;padding-top:12em; line-height:14em; text-align:center; position:relative;} */
#header { z-index: 98; background-color: transparent; background-size:cover; width:100%; margin-top:-4em;padding-top:2em; line-height:14em; text-align:center; position:relative;	}
#header2 { z-index: 98; background:linear-gradient(to bottom right, rgb(122,22,50) , rgb(63,10,26)); background-size:cover; width:100%; margin-top:-4em;padding-top:4em; line-height:14em; text-align:center; position:relative;}


#container {background:rgb(122,22,50);}
#containerContact {background:rgb(122,22,50);}

.container-partenaire {margin-left:50%;}

/* Contents */
	/* Main-Block */
	#main-block {padding:0% 0%;opacity:.99;background:transparent;}
	#main-block #main-title {margin-top:3em;margin-bottom:3em;}
	#main-block #main-title p {text-align:center;color:white;font-family:'Regular', sans-serif;}
	/* #main-block #main-title h1 {font-size:1.8em; text-align:center; color:#121212; text-transform:uppercase; margin-bottom:.2em; font-family:'Alegreya Sans SC', sans-serif;} */
	/* #main-block #main-title h1 {font-size:1.8em; text-align:center; color:rgb(254,247,218); text-transform:uppercase; margin-bottom:.2em; font-family:'Alegreya Sans SC', sans-serif;} */
	#main-block #main-title h1 {font-size:1.8em; text-align:center; color:rgb(252,125,74); text-transform:uppercase; margin-bottom:.2em; font-family:'Regular', sans-serif;}
	#main-block #main-title h2 {font-size:1.2em; text-align:center; color:#fff;}
	#main-block #main-title h2::after {content:""; display:block; height:2px; width:10%; margin:1em auto 0; background:#f1c40f;}
	
	#main-block p,
	#main-block img,
	#main-block ul,
	#main-block ol {margin-bottom:1em; color:rgb(254,247,218);}

	#main-blockContact {padding:3% 6%;opacity:.99;background:transparent;margin-left:30%;}
	#main-blockContact #main-title {margin-top:3em;}
	#main-blockContact #main-title p {text-align:center;}
	#main-blockContact #main-title h1 {font-size:1.8em; text-align:center; color:rgb(252,125,74); text-transform:uppercase; margin-bottom:.2em; font-family:'Regular', sans-serif;}
	#main-blockContact p,
	#main-blockContact img,
	#main-blockContact ul,
	#main-blockContact ol {margin-bottom:1em; color:#fff;}
	
	#main-block form {display:block; width: 100%; color:#fff; text-decoration:none; font-weight:700; background:rgb(63,10,26); transition:background .5s; padding:1em; text-align:center; margin-bottom:.5em; box-shadow:0px 0px 0 #666;border-radius:5px;}
	input {padding:1em;border-radius:5px;}
	input[type="submit"]{ cursor:pointer; text-transform:uppercase; }
	::-webkit-input-placeholder {text-align: center;}
	:-moz-placeholder { /* Firefox 18- */text-align: center;}
	::-moz-placeholder {  /* Firefox 19+ */text-align: center;}
	:-ms-input-placeholder {text-align: center;}

	#illustrLogo  {width:auto;height:15em;}
	#illustrLogoPaiement  {width:auto;height:15em;}
	#illustrLogo2  {width:auto;height:35em;padding:6em;}
	#illustrPhoto {width:auto;height:35em;right:0px;position:absolute;}
	#illustr1     {width:auto;height:40em;position:absolute;left:50px;top:8em;z-index:99;}
	#illustr2     {width:auto;height:32em;position:absolute;right:60px;top:6em;}
	#illustr2b    {width:auto;height:0em;position:absolute;right:60px;top:6em;z-index:99;}
	#main-block2 #illustr3     {width:auto;height:32em;right:0px;position:absolute;margin-top:-22em;}
	#illustr4     {width:auto;height:45%;position:absolute;left:10px;margin-top:33em;z-index:99;}
	#illustrDiv1   {background-color:rgb(122,22,50);height:20em;width:100%;text-align:center}
	#illustrDiv1Checkout   {background-color:rgb(63,10,26));height:20em;width:100%;text-align:center}
	#illustrDiv2   {background:rgb(245,245,247);width:100%;height:35em;}
	#illustrDivContact   {background:transparent;float:left; width:30%;}
	#illustrDivContact #illustr1  {height:10em;margin-left:35%;margin-top:15em;}
	#illustrDivContact #illustr2  {height:9em;margin-right:5%;margin-top:17em;}

	
	#main-block2 {padding:3% 6%;opacity:.99;background-color:transparent;}
	#main-block2 #main-title {margin-top:3em;}
	#main-block2 #main-title p {text-align:center;color:white}
	#main-block2 #main-title h1 {font-size:1.8em; text-align:center; color:rgb(252,125,74); text-transform:uppercase; margin-bottom:.2em; font-family:'Regular', sans-serif;}
	#main-block2 #main-title h2 {font-size:1.2em; text-align:center; color:white;}
	#main-block2 p,
	#main-block2 img,
	#main-block2 ul,
	#main-block2 ol {margin-bottom:1em; color:rgb(254,247,218);}

	
	/* Second-Block */
	#second-block {padding:0% 0%; background:rgb(63,10,26);background-size:cover; display:flex; flex-flow:row wrap;opacity:.99;}
	#second-block #cmd_partenaire {width:100%; margin-left:5%; margin-right:5%;}
	#second-block #cmd_client {width:38%; margin:5%;}
	#second-block #google-maps {width:38%; margin-left:10%;color:white;}
	#second-block #google-maps iframe {width:100%; box-shadow:2px 2px 0 #ddd;}
	#second-block #google-maps #map {width:100%; box-shadow:2px 2px 0 #ddd;opacity:.99}
	/* #second-block #contact-form {width:100%; font-size:.9em;} */
	#second-block #contact-form {width:38%; font-size:1em;}
	#second-block #contact-form p {margin-top:1em;}
	/* #second-block #contact-form .form-header h2 {font-family:'Alegreya Sans SC', sans-serif; font-size:1.8em;} */
	/* #second-block #contact-form .form-header h2::after {content:""; display:block; height:2px; width:10%; margin:.5em 0 1em; background:#f1c40f;} */
	/* #second-block #contact-form .form-header p {font-size:.9em; color:#444; margin-bottom:2em;} */
	/* #second-block #contact-form .form-block {margin-top:1em; display:flex; flex-flow:row wrap;} */
	/* #second-block #contact-form .form-block label {width:30%; padding-top:.5em;} */
	/* #second-block #contact-form .form-block input[type="text"], */
	/* #second-block #contact-form .form-block input[type="tel"], */
	/* #second-block #contact-form .form-block textarea {font-family:'Exo', sans-serif; font-weight:300; font-size:.9em; border:0; box-shadow:2px 2px 0 #ddd; padding:.5em; min-width:70%; width:70%;} */
	/* #second-block #contact-form .form-block.form-button {float:right; margin-top:1.5em;} */
	/* #second-block #contact-form .form-block.form-button input {padding:.4em .8em; font-family:'Alegreya Sans SC', sans-serif; font-weight:bold; background:#f1c40f; border:0; box-shadow:2px 2px 0 #ddd;} */
	/* #second-block #contact-form .form-block.form-button input:hover {background:#e74c3c; transition:1s;} */
	#second-block #boite0 {width: 29%;margin:2%;box-shadow:0px 0px 0 #ddd;background:rgb(63,10,26);text-align:center;padding:2%;margin-bottom:5%;border: solid transparent;border-radius: 5px;}
	#second-block #boite {width:20em;height:22em;margin:auto;box-shadow:0px 0px 0 #ddd;text-align:center;margin-top:1em;margin-bottom:5em;background:transparent;border: solid transparent;border-radius: 5px;}
	#second-block #boite1 {width: 46%;margin:2%;color:white;background:rgb(63,10,26);text-align:center;padding:2%;margin-bottom:5%;border: solid transparent;border-radius: 5px;font-size:4vmin;}
	#second-block #boite  h1 {font-size:1.8em; text-align:center; color:rgb(252,125,74); text-transform:uppercase; margin:.2em; font-family:'Alegreya Sans SC', sans-serif;}
	/* #second-block #boite0 h1 {font-size:1.8em; text-align:center; color:rgb252,125,74; text-transform:uppercase; margin:.2em; font-family:'Alegreya Sans SC', sans-serif;} */
	#second-block #boite0 h1 {font-size:1.8em;padding:1em;text-align:center; color:rgb(254,247,218); text-transform:uppercase; margin:.2em; font-family:'Roboto', sans-serif;}
	#second-block #boite1 h1 {font-size:150%; text-align:center; color:rgb(254,247,218); text-transform:uppercase; font-family:'Roboto', sans-serif;}
	#second-block #boite0 h2 {font-size:1.1em; text-align:center; color:rgb(254,247,218); margin:.2em; font-family:'Roboto', sans-serif;}
	#second-block #boite  input {background:transparent; color:#fff;}
	#second-block #boite  .img0 {width:20em;height:20em;border: solid transparent;border-radius: 7px;}
	#second-block #boite0 img {width:90%; height:90%;border: solid transparent;border-radius: 5px;}
	#second-block #boite1 img {width:90%; height:90%;border: solid transparent;border-radius: 10px;}
	#second-block #boite .produits {height:6.5em;width:60%;float:left;padding:1em;text-align:left;}
	#second-block .nomproduits {font-weight:600;}
	#second-block .description {font-weight:100;}
	#second-block #boite .photoproduits {height:6.5em;width:40%;margin-left:60%;margin-top:0;}
	#second-block #boite .produits p {color:#fff;text-transform:capitalize;font-size:1.2em;}
	#second-block #boite .img1 {height:auto;width:100%;border-radius: 5px;}
	#second-block #boite .prixPanier {height:2em;margin-left:60%;width:40%;padding:0.5em;}
	#second-block #boite .prixPanier p {float:left;width:70%;color:#fff;font-weight:700;}
	#second-block #boite .prixPanier .panier {margin-left:70%; margin-top:-0.5em;	}
	#second-block #boite #enseigne {width:100%; border:0;text-transform: uppercase; text-decoration:none; font-weight:700;font-size:1.2em;}
	#second-block #boite .boutiques {color:background:#EDEDED;box-shadow:2px 2px 0 #ddd;width:20%;font-size:50%;}
	
	#titre {margin-top:3em;width:100%; color:#fff; border:0;text-transform: uppercase; text-decoration:none; font-weight:700;font-size:1.8em;text-align:center;}
	
.bloctest {
  position: relative;background-color: red; width: 100%;
}
  
.bloctest::after {
  content: '';display: block; padding-bottom: 100%;
}
.bloctest .content {
  position: absolute;width: 100%;height: 100%;
}

/* Footer */
	#footer {background:rgb(63,10,26);height:7em;width:100%;position:absolute;}
	#footer #main-titleCGV  {margin-top:2em;margin-left:50%;} /*bas de la premiere page, ou il y a les CGV*/
	#footer #main-titleCGV a {color:white;text-decoration:none;font-weight:700;padding:1em;display:inline;} /*bas de la premiere page, ou il y a les CGV*/
	#footer #main-titleCGV a:hover {color:rgb(252,125,74);}
	
	
/*================================*/
/*=== Partie sur le Swipe Menu ===*/
/*================================*/
/* Menu burger */
#menu-burger {position:absolute; top:4em; right:3.5em; display:inline-block; cursor:pointer;}
#menu-burger .bar1,
#menu-burger .bar2,
#menu-burger .bar3 {width:32px; height:5px; background-color:white; margin:6px 0; transition:0.4s;}
#menu-burger:hover {opacity:.75; transition:.5s;}
#menu-burger.clicked .bar1 {-webkit-transform:rotate(-45deg) translate(-8px, 8px); transform:rotate(-45deg) translate(-8px, 8px);}
#menu-burger.clicked .bar2 {opacity: 0;}
#menu-burger.clicked .bar3 {-webkit-transform:rotate(45deg) translate(-8px, -8px); transform:rotate(45deg) translate(-8px, -8px);}
#menu-burger.burger-partenaire {display:none;}

/* Main menu (slide) */
#menu2 {position:absolute; z-index:9999; left:0%; top:4em; color:white; background:linear-gradient(to top right, rgb(122,22,50) , rgb(63,10,26)); padding:4em 8em; width:50%; min-height:100%; box-shadow:1px 0 1px #9A2519;}
#menu2 ul li {list-style:none;}
#menu2 ul li a {display:block; color:#fff; text-decoration:none; font-weight:700; background:#2c3e50; transition:background .5s; padding:1em; text-align:center; margin-bottom:.5em; box-shadow:1px 1px 0 #666}
#menu2 ul li form input{display:block; width: 100%; color:#fff; text-decoration:none; font-weight:700; background:#2c3e50; transition:background .5s; padding:1em; text-align:center; margin-bottom:.5em; box-shadow:1px 1px 0 #666}
#menu2 ul li a:hover {background:#A9A9A9; transition:background .5s;}
#menu2 ul li form input:hover {background:#A9A9A9; transition:background .5s;}
#menu2.visible {animation:.5s slideRight ease-in forwards; transition-delay:0;}
#menu2.invisible {animation:1s slideLeft ease-out forwards; transition-delay:0;}

/* Animations pour le menu slide */
/* @keyframes slideRight { */
	/* from {left:-50%;} */
	/* to {left:0%;} */
/* } */
/* @-webkit-keyframes slideRight { */
	/* from {left:-50%;} */
	/* to {left:0%;} */
/* } */
/* @keyframes slideLeft { */
	/* from {left:0%;} */
	/* to {left:-50%;} */
/* } */
/* @-webkit-keyframes slideLeft { */
	/* from {left:0%;} */
	/* to {left:-50%;} */
/* } */
@keyframes slideRight {
	from {left:0%;}
	to {left:-50%;}
}
@-webkit-keyframes slideRight {
	from {left:0%;}
	to {left:-50%;}
}
@keyframes slideLeft {
	from {left:-50%;}
	to {left:0%;}
}
@-webkit-keyframes slideLeft {
	from {left:-50%;}
	to {left:0%;}
}
/* Responsive design */
@media (min-width: 768px) and (max-width: 979px) {

.container-partenaire {margin-left:0%;}

	#menu2 {left:0%; width:88%;}
	/* #menu-burger.clicked {position:fixed;} */
	#menu-burger.burger-partenaire {display:inline-block;}
	#main-block,
	#second-block {padding:2% 4%;}
	#second-block #boite  {width: 180px;margin-top:4em;}
	#second-block #boite0 {width: 180px;margin-top:4em;}
	
	/* Animations pour le menu slide */
	@keyframes slideRight {
		from {left:0%;}
		to {left:-88%;}
	}
	@-webkit-keyframes slideRight {
		from {left:0%;}
		to {left:-88%;}
	}
	@keyframes slideLeft {
		from {left:-88%;}
		to {left:0%;}
	}
	@-webkit-keyframes slideLeft {
		from {left:-88%;}
		to {left:0%;}
	}
}



@media (max-width: 1025px) {

#header {   margin-top:-12em;padding-top:6em;line-height:6em; }

#container {margin-top:2em;width:100%;}
.container-partenaire {margin-left:0%;}

	#main-block {padding:0.1em 0.2em;}
	#main-block #main-title {margin-top:1em;}
	#main-block img {height:5em;width;auto;}
	#menu-burger {top:4em; right:2em; z-index:9999;}
	#menu2 {left:-100%; width:100%;padding:4em 1em;}
	#menu2 ul li form input {font-size:85%;}
	#menu-burger.burger-partenaire {display:inline-block;}
	#second-block {padding:0.5% 1%;}
	#second-block #cmd_client {width:90%; margin:5%;}
	#second-block #google-maps {width:90%; margin:5%;}

	#second-block #contact-form {width:100%; margin-top:2em;}
	#second-block #boite  {width:100%; margin-top:1em;}
	#second-block #boite1 {width:100%; margin-top:0em;margin-bottom:-1em;}
	#second-block #boite0 {width:100%; margin-top:1em;}
	#second-block #boite  img {width:90%; height:90%;}
	#second-block #boite0 img {width:90%; height:90%;}
		/* #second-block #boite .img1 {height:140px;margin:1%;float:left;width:40%;} */
		/* #second-block #boite .img2 {margin-left:40%;margin-top:1em;width:60%;} */
		/* #second-block #boite .img3 {margin-left:40%;margin-top:1.5em;width:60%;} */
	#second-block #boite .boutiques {color:background:#EDEDED;box-shadow:2px 2px 0 #ddd;width:100%;font-size:50%;}

	#titre {margin-bottom:4em;font-weight:600;font-size:1.2em;}

	#footer {height:15em;width:100%;position:absolute;}
	#footer #main-titleCGV  {margin-left:20%;} /*bas de la premiere page, ou il y a les CGV*/
	#footer #main-titleCGV a {display:block;}


	#illustrLogo  {width:auto;height:8em;}
	#illustrLogoPaiement  {width:auto;height:8em;margin-top:1em;}
	#illustrLogo2  {height:8em;padding:0em;}
	#illustrPhoto {height:8em;}
	#illustr1     {height:5em;margin-left:-1em;top:53em;}
	#illustr2     {height:5em;margin-right:-5em;top:4em;}
	#illustr2b    {height:5em;left:1em;top:115em;}
	#main-block2 #illustr3     {height:5em;right:20px;top:107em;}
	#illustr4     {height:8em;left:8px;margin-top:1em;}
	#illustrDiv1   {height:11em;margin-top:-2em;}
	#illustrDiv1Checkout   {height:auto;margin:auto;margin-top:1em;}
	#illustrDiv2   {height:8em;}
	#illustrDivContact  {width:99%;height:auto;position:absolute;}
	#illustrDivContact #illustrLogo2  {display:block;margin:auto;margin-bottom:3em;}	
	#illustrDivContact #illustr1  {display:none;margin-left:0%;}
	#illustrDivContact #illustr2  {display:none;margin-right:0%;}
	#main-blockContact {position:absolute;width:99%;height:auto;display:block;margin:auto;margin-top:8em;}


	/* Animations pour le menu slide */
	@keyframes slideRight {
		from {left:-100%;}
		to {left:0%;}
	}
	@-webkit-keyframes slideRight {
		from {left:-100%;}
		to {left:0%;}
	}
	@keyframes slideLeft {
		from {left:0%;}
		to {left:-100%;}
	}
	@-webkit-keyframes slideLeft {
		from {left:0%;}
		to {left:-100%;}
	}
}
@media (max-width: 370px) {
	#illustrLogo  {width:auto;height:7.5em;}
}
/*********************************************************************************************************/

/*         Menu : celui en haut à gauche, MenuC : celui en haut à droite, MenuL : Menu latéral           */

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

.bloc-debut {
	position:relative;
  /* border:solid 0px; */
  top:0px;
  left:0px;
  width:100%;
  height:4em;
  font-family:'Gobold', sans-serif; letter-spacing: 3px;
  background:transparent; 
  /* background:RGBa(44,62,80,0.5); */
 /* line-height:100px; */
	z-index:99999;opacity:1;
}
nav {
    /* display: block; */
    background: transparent; 
}
.nav1 {
    display: inline-block;position: absolute;
    float: left;
}
.nav2 {
    display: inline-block;right:0;position: absolute;
    float: right;
}

#navPanier {margin-top:1em;}
.menu {
    display: block;
	margin-left:2em;
	border-radius: 5px;
	
}
.menuC {
    display: block;
    background:rgb(63,10,26); /* couleur grenat foncé DU FOND du mots Comptes quand la plage est déployée, pas sur un telephone { */
	border: solid transparent; 
	border-radius: 5px;
	margin-right:2em;
}

.menu li {
    margin-right:2em;
}

.menu li,
.menuC li {
    display: inline-block;
    position: relative;
    z-index: 100;
}


.menu li:first-child,
.menuC li:first-child {
    margin-left: 0px;
}

.menu li a,
/* .menuL li a, */
.menuC li a {
	font-weight: 600;
    text-decoration: none;
    padding: 1em 15px ;
    display: block;
    color: #fff; /* couleur des lettres du mot Comptes quand la plage est déployée, pas sur un telephone { */ 
    transition: all 0.2s ease-in-out 0s;
}

.menu li a:hover,.menu li:hover>a,
.menuC li a:hover,.menuC li:hover>a { /* couleur des lettres du mot Comptes quand la plage est déployée EN HOVER ou sur un telephone { */ 
    color: rgb(252,125,74);	

    /* background: #20B2AA; */
    /* background: #D3D3D3; */
    /* background: #DAA520; */
    /* background: #FFD700; */
    /* background: #B22222; */
    /* background: #8B008B; */
    /* background: #556B2F; */
    /* background: #008B8B; */
    /* background: #D2691E; */
    /* background: #A52A2A; */
    /* background: #A9A9A9; /* aussi dans menu ul li a:hover,.menu ul li:hover>a { */ 
    /*background: transparent; /* aussi dans menu ul li a:hover,.menu ul li:hover>a { */

}

.menu ul,
.menuC ul{
    visibility: hidden;
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 190px;
    position: absolute;
	top: 3em;
    background: #fff; /* blanc, mais ne se voit pas car visibility: hidden */
    z-index: 99;
    transform: translate(0,20px);
    transition: all 0.2s ease-out;
	border: solid transparent; 
	border-radius: 5px; /* bord arrondi du menu boutique et comptes */
}

.menu ul {
    left: 0px;
}

.menuC ul {
    right: 0px;
}

.menu ul:after,
.menuC ul:after {
    bottom: 100%;
    border: solid transparent;    
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: transparent; /* correspond à la couleur du contenant de la pointe du sous-menu (boutique, comptes) */
    border-bottom-color: #fff; /* correspond à la couleur de la pointe du sous-menu */
	border-width: 10px;
}
.menu ul:after{
    left: 20%;
    margin-left: -6px;
}

.menuC ul:after {
    right: 20%;
    margin-right: -6px;
}
.menu ul li,
.menuC ul li {
    display: block;
    float: none;
    background: none;
    margin: 0;
    padding: 0;
}
.menu ul li a,
.menuC ul li a {
  
	font-size: 17px;
    font-weight: normal;
    display: block;
    color: #797979;
    background: #fff;	 /* couleur du fond du sous menu affichant boutique et contact */
}

.menu ul li a:hover,.menu ul li:hover>a,
.menuC ul li a:hover,.menuC ul li:hover>a {
    background: #fff; /* blanc */
    color: rgb(252,125,74); /* orange, couleur des lettres du sous menu affichant boutique et contact et de leurs descendants*/
}

.menu li:hover>ul,
.menuC li:hover>ul {
    visibility: visible;
    opacity: 1;
    transform: translate(0,0);
}

.menu ul ul,
.menuC ul ul {
    top: 0px;
    visibility: hidden;
    opacity: 0;
    transform: translate(20px,20px);
    transition: all 0.2s ease-out;
}

.menu ul ul  {
    left: 169px;
}
.menuC ul ul {
    right: 169px;
}
.menu ul ul:after,
.menuC ul ul:after {
    top: 10%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0); /* correspond à la couleur du contenant de la pointe du sous-sous-menu (epicerie ...)*/
    border-right-color: #fff;
    border-width: 6px;

	/* border-radius: 5px; */
    margin-top: -6px;
}
.menu ul ul:after {
    left: -6px;
}
.menuC ul ul:after {
    right: -6px;
}
.menu li>ul ul:hover,
.menuC li>ul ul:hover {
    visibility: visible;
    opacity: 1;
    transform: translate(0,0);
}

.responsive-menu,
.responsive-menuC {
    display: none;
    width: 100%;
    padding: 20px 15px;
    background: transparent;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
}

.responsive-menu:hover,
.responsive-menuC:hover {
    background: transparent;
    color: #fff;
    text-decoration: none;
}

a.homer {
    background: transparent;
}

.nav3 {
    display: inline-block;
    position:absolute; 
	margin-top:-6em; 
	left:4em; 
	width:30%;
	background: transparent;
}
.menuL {
	font-size:250%;
	margin-top : -0.5em;
	text-align : center;
}
.menuL li {
	display: inline-block;
	list-style-type:none; /* sans puces */
	position: relative;
    z-index: 100;
	/* font-size:250%;  */
}
.menuL ul li ul {
	 display: none;
}

.menuL ul li:hover>ul {
	display:block;
	
}

.menuL li:first-child {
    margin-left: 0px;
}
.menuL li a {
        display : block;
		padding: 1em ;
		margin-left: 0px;
		float: left;
		text-decoration:none;
		color: rgb(252,125,74);
}

.menuL li a:hover,.menuL li:hover>a {
    color: #797979; /* menuL seulement */
}

.menuL ul{
    visibility: hidden;
    /* opacity: 0; */
    width: 190px;
    position: absolute;
	top: 3em;
    background: #fff; /* blanc, mais ne se voit pas car visibility: hidden */
    z-index: 99;
    transform: translate(0,20px);
    transition: all 0.2s ease-out;
	border: solid transparent; 
	border-radius: 5px; /* bord arrondi du menu boutique et comptes */
}
.menuL ul{
    left: -1.5em;
}

.menuL ul:after {
    bottom: 100%;
    border: solid transparent;    
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: transparent; /* correspond à la couleur du contenant de la pointe du sous-menu (boutique, comptes) */
    border-bottom-color: #fff; /* correspond à la couleur de la pointe du sous-menu */
	border-width: 10px;
}
.menuL ul ul:after {
    border-bottom-color: transparent; /* correspond à la couleur de la pointe du sous-menu */
}
.menuL ul:after {
    right: 20%;
    margin-right: -6px;
}
.menuL ul li {
    display: inline-block;
}
.menuL ul li a {
  
	font-size: 17px;
    font-weight: normal;
    /* display: block; */
    color: #797979;
    background: #fff;	 /* couleur du fond du sous menu affichant boutique et contact */
}
.menuL ul li a:hover,.menuL ul li:hover>a {
    background: #fff; /* blanc */
    color: rgb(252,125,74); /* orange, couleur des lettres du sous menu affichant boutique et contact et de leurs descendants*/
}
.menuL li:hover>ul {
    visibility: visible;
    opacity: 1;
    transform: translate(0,0);
}

.menuL ul ul{
    /* visibility: visible; */
    /* opacity: 0; */
    width: 190px;
    position: static;
	margin-left:185px;
    background: #fff; /* blanc, mais ne se voit pas car visibility: hidden */
    z-index: 99;
    transform: translate(0,20px);
    transition: all 0.2s ease-out;
	border: solid transparent; 
	border-radius: 5px; /* bord arrondi du menu boutique et comptes */
}

@media (min-width: 768px) and (max-width: 979px) {
    .mainWrap {
        width: 768px;
    }
.nav3 {
	left:0.75em;
}
    .menu ul,
    .menuC ul {
        top: 56px;
    }

    .menu li a,
    .menuC li a {
        font-size: 14px;
    }

    a.homer {
        background: transparent;
    }
}

@media (max-width: 1025px) {
    .mainWrap {
        width: auto;
        padding: 50px 20px;
    }
	
#navPanier {margin-top:1em;}
#VotrePanier{margin-top:2em;}
    .menu {
        display: none;
		position:absolute;
		background:#fff;
    }


    .menuC {
        display: block;
		text-transform:uppercase;
		margin-right:0px; 
		background: transparent;
		color: #fff;
		text-decoration: none; z-index:99;opacity:1;
    }

    .sub-menuC {
		text-transform:none;
    }
.bloc-debut {
	position:relative;z-index:99999;opacity:1;
}
    .responsive-menu {
        display: block;
		background: transparent;
		color: #fff;
		text-decoration: none; z-index:99;opacity:1;
			
    }

    .menu {
        /* margin-left: 3em;		 */
        left:-3em; /* on decale le sousmenu vers la droite et dans le li a on lui donne un width large pour etre sur que ca prenne toute la largeur quelque soit l'ecran */
		background: #fff;
		border-radius:5px;
		height:100em;
    }
    nav {
        margin: 0;
        background: transparent;
    }
    .nav3 {
        	left:0em;
			width: 100%;z-index:98;
    }	
	.menuL {
		text-align:center;
	}
	.menuL li{
		
	}
	.menuL li a{
		
	}
	/* .nav3 a { /* pour centrer les icones sous le nom de la boutique */ */
		/* display:inline-block; */
		/* margin: 0 0.5em; */
	/* }   */
    .menu li {
        display: block;
        margin: 0;
    }
    .menu li a {
        background: #fff; /* couleur du fond du Menu déplié*/
        color:#797979 ;
		font-weight: normal;
		margin-left:0.5em;
		border-radius:5px ;width:174vw;
    }
	
    .menuC li {
        display: block;
        margin: 0;
		border-radius:5px;
    }

    .menuC li a {
        background: transparent; /* couleur du fond du mot Comptes */
        color:#fff ;
    }

    .menu li a:hover,.menu li:hover>a,
    .menuC li a:hover,.menuC li:hover>a {
        background: rgb(252,125,74); /* citrouille */
        color: #fff;
    }

    .menu ul,
    .menuC ul {
        visibility: hidden;
        opacity: 0;
        top: 0;
        left: 0;
        width: 100%;
        transform: initial;
    }

    .menu li:hover>ul,
    .menuC li:hover>ul {
        visibility: visible;
        opacity: 1;
        position: relative;
        transform: initial;

    }
    .menu li a:hover,.menu li:hover>a,
    .menuC li a:hover,.menuC li:hover>a {
        background: transparent; /* couleur du fond du mot Comptes lorsqu'il est déployé avec son sous menu sur le telephone */
        color: #fff;
		margin-right:0px;
    }
	
.menuC ul li a {
  
	font-size: 17px;
    font-weight: normal;
    display: block;
    color: #797979;
    background: #fff;	 /* couleur du fond du sous menu affichant boutique et contact */
}	
    .menu ul ul,
    .menuC ul ul {
        left: 0;
        transform: initial;
    }

    .menu li>ul ul:hover,
    .menuC li>ul ul:hover {
        transform: initial;	
    }
}

@media (max-width: 480px) {
}

@media (max-width: 320px) {
}
/**********************************************************************************************/

/* body{ */
	/* background-color:AliceBlue;   */
	/* font-style:italic; */
	/* letter-spacing:.1em;*/ */
	/* font-family:sylfaen,serif; */
	/* font-size:100%; */
	/* } */
/* .bloc-debut { */
 /* position:fixed; */
  /* border:solid 0px; */
  /* top:0px; */
  /* left:0px; */
  /* width:100%; */
  /* height:100px; */
  /* font-size:150%; */
    /* background-color:gray; */
		/* line-height:100px; */
/* } */

.bloc-fixe1 {
 border:solid 0px;
   margin-left: auto;
  margin-right: auto;
  width: 1000px	;
  text-align: center;
  z-index : 99;
}
#global {
 position:relative;
 border:solid 0px;
   margin-top:100px;
   margin-left: auto;
  margin-right: auto;
  width: 1000px	;
    height:1900px;
  z-index : 1;
}
/*************************************************************************/
.p0 { 
/* background:#ccc;  */
width:25%;
height:300px;
line-height:260px;
text-align:center; /* centrage horizontal d'un élément en-ligne */ 
}
img { 
/* vertical-align:middle; */
/*  */
}
/**************************************************************************/
.p1 { 
/* background:#ccc;  */
width:100%;
height:300px;
line-height:250px;
text-align:center; /* centrage horizontal d'un élément en-ligne */ 
padding:0px;
}
.span1 { 
width:100px; /* largeur de la zone de texte */
padding:15px; /* aération interne de la zone de texte */
border:1px solid #fff;
vertical-align:middle;
display:inline-block;
line-height:1.2; /* on rétablit le line-height */
text-align:left; /* ... et l'alignement du texte */ 
}
.bloc {
 position:absolute;
 border:solid 0px;
 width: 25%	;
 height:300px;
 text-align: center;
}
.bloc2 {
  margin-top:50px;
  margin-left: 6.25%;
  background-color:#fff;
}
.bloc.bloc2:hover {
  background-color:#FF4500;
}
.bloc3 {
  margin-top:50px;	
  margin-left: 37.5%;
  background-color:gray;
}
.bloc4 {
  margin-top:50px;	
  margin-left: 68.75%;
  background-color:gray;
  color:#fff;
}
.bloc.bloc4:hover {
  background-color:#fff;
  color : gray;
}
.p2 { 
/* background:#ccc;  */
width:100%;
height:300px;
line-height:250px;
text-align:center; /* centrage horizontal d'un élément en-ligne */ 
padding:0px;
}
.span2 { 
width:200px; /* largeur de la zone de texte */
padding:0px; /* aération interne de la zone de texte */
border:0px solid #fff;
vertical-align:middle;
display:inline-block;
line-height:2.2; /* on rétablit le line-height */
text-align:center; /* ... et l'alignement du texte */ 
  font-size:115%;
}

.bloctest {
  position: relative;
  background-color: red;
  width: 100%;
}
  
.bloctest::after {
  content: '';
  display: block;
  padding-bottom: 100%;
}
.bloctest .content {
  position: absolute;
  width: 100%;
  height: 100%;
}
.bloc-fin {
 position:absolute;
  border:solid 0px;
  top:1900px;
  left:0px;
  width:100%;
  height:350px;
  /* height: 80px; */
  font-size:200%;
  z-index : 0;
  text-align: center;
  background-color:transparent;
  color : #fff;
  line-height:5px;
  font-size:100%;
}
/********************************** debut table produit (dans dispatch5_produit_% */

table { margin-left:auto;margin-right:auto;background-color:#F5F5DC	;border-collapse:collapse;color:#000;border:0px solid; border-color:#696969	;border-style: ridge;text-align:center }
table .liste1 {  width:100%; }
/* table tr { background-color:red; } */
table th { background-color:#A9A9A9;color:white;color:#000;border:0px solid; border-color:#696969	;border-style: ridge; }
table td, .liste1 th { width:20%;padding:5px;border:0;color:#000;border:0px solid; border-color:#696969	;border-style: ridge;  }
table td, .liste2 th { width:11%;padding:5px;border:0;color:#000;border:0px solid; border-color:#696969	;border-style: ridge;  }
table td { border-bottom:1px dotted #F0F8FF;color:#000;border:0px solid; border-color:#696969	;border-style: ridge;  }
table tr:hover {background-color: #f5f5f5;}
@media (max-width: 1025px) {
table td {font-size:120%;}	
}
@media (max-width: 667px) {
table td {font-size:100%;}	
}
@media (max-width: 420px) {
table td {font-size:75%;}	
}
@media (min-width: 321px) and (max-width: 370px) {
table td {width:90%;font-size:70%;}
#main-block form {width: 99%;}
}
@media (max-width: 320px) {
table td {width:90%;}	
table td {font-size:50%;}
#main-block form {width: 99%;}
}

/********************************** fin table produit (dans dispatch5_produit_% */

input {text-align:center;}

.typeCommande {
	text-align:center; 
	float: left; 
	width:30%;
	margin:1%;
}

@media (max-width: 1025px) {
	.typeCommande {
		float: none; 
		width:100%;
		margin-bottom: 3em;
	}
.inscription {
	margin-left:12.5%;
}
#formPanier table{
	margin-top:2em;margin-bottom:2em;
}
@media (max-width: 1025px) {
#formPanier table {margin-top:0em;margin-bottom:0em;}	
}
.inscription {
	margin-left:0%;
}
}
.bouton {
	text-align:center;	
}
.bouton button {
	background-color:#F5F5DC; /* jaune clair (bouton Suivre ma commande)*/ 
	padding:2%;
	border: solid 2px rgb(122,22,50); 
	border-radius: 5px;
	/* text-decoration:none; */
}
.bouton button a{
	text-decoration:none;
	color:rgb(122,22,50);
	font-family:'Roboto', sans-serif;
}
@media (max-width: 370px) {
.bouton {font-size:80%;}
}

#boutonPoursuivre {display:block;margin:auto;padding:1.2em;border-radius:10px;}
@media (max-width: 1025px) {
	#boutonPoursuivre {font-size:60%;}
}
@media (max-width: 370px) {
#boutonPoursuivre {font-size:40%;}
}

#boutonPaiement, .boutonHeureLiv {padding:1.2em;border-radius:10px;background-color:#F5F5DC	;}
#boutonPaiement a, .boutonHeureLiv a {text-decoration:none;color:rgb(63,10,26)}
@media (max-width: 1025px) {
	#boutonPaiement {font-size:60%;}
}
@media (max-width: 370px) {
#boutonPaiement {font-size:50%;}
}

#boutonPanier {display:block;margin:auto;padding:1.2em 5.2em;border-radius:10px;background:rgb(63,10,26);}
#boutonPanier a {text-decoration:none;color:white;text-transform:uppercase;}

/* pour s'inscrire ou commander un coursier */
.boutonCoursier {display:block;margin:auto;padding:1.2em;border-radius:10px;background:rgb(122,22,50);color:white;}
.boutonCoursier a {text-decoration:none;color:white;text-transform:uppercase;text-align:center;}
@media (max-width: 1025px) {
	.boutonCoursier {font-size:90%;}
}

@media (max-width: 370px) {
#boutonCmd {font-size:70%;}
}

#Recherche p {text-align:center;font-size:125%;}
@media (max-width: 1025px) {
	#Recherche p {font-size:110%;}
}
@media (max-width: 320px) {
#Recherche {font-size:80%;}
}
#Recherche p input {padding:1em;border: solid gray;}
#Recherche p button {padding:1em;margin-left:-0.5em;border: solid gray;border-top-right-radius:5px;border-bottom-right-radius:5px;color:rgb(63,10,26);background:lightgray;}
#Recherche p button:hover{background:gray;color:white;}