/*### css ###*/

@media screen and (max-width:960px){
html {background:#fff}
body {overflow-x:hidden ; max-width:60em; font-size:12px; margin: 0 auto}
#conteneur	{
	width:auto;
	margin:0px auto;
	background:none;
	background-color:#CCCCCC;
	
}

#conteneur2	{
	width:60em;
	margin:0px auto;
	background:none;
	background-color:#fff;
}


#entete {height:200px; background:#fff}

#logo {float:none; margin:0 auto; text-align:center; width:auto; background:url(../charte/fond-logo-responsive.jpg) #fff no-repeat top center; height:80px;}
#slogan {display:block;float:none; margin:0 auto; text-align:center; width:auto; background:url(../charte/fond-slogan-responsive.jpg) #fff no-repeat top center; clear:both; height:120px;}
#slogan p{ font-size:18px; text-align:center; padding-top:20px; margin:0}

#ami {display:none}
#favoris {display:none}

nav	{width:100%; height:100%; background:#FF3E2C}


.dropmenu ul{
	width: 51.4em;
	background-color:#222222;
	position: absolute;
	display: none;
	padding: 0px;
	margin: 0px;
	z-index:20;
}
.dropmenu ul a {
/*######################################################################################################*/
	border: 1px solid #CCC;				/*taille et couleur de la bordure autour des sous-rubriques*/
/*######################################################################################################*/
	display:block;
}
.dropmenu ul a:hover {
/*######################################################################################################*/
	background-color: #FFF;				/*fond de couleur des sous-rubriques au survol*/
/*######################################################################################################*/
}



.image { width:100%; height:auto; padding:0em}

.dropmenu li{width:100%; border-top:1px solid white}
.dropmenu li a {color:#fff;padding:5px 20px;} 
.dropmenu li:first-child{border-top:none}
.btmenu {position:absolute; right:1.625em; top:1.625em; z-index:90; cursor:pointer}



section#integration {width:100%; max-width:960px;float:left;}
#integration p{/*text-align:justify*/}
#integration p.test{clear:both}

#slide {float:none; margin:10px auto;border:1px solid #1f1a17;width:300px;height:225px}
#slide img {max-width:100%;width:100%; height:auto}
.map {width:300px; height:247px}
ul.no-mobile {display:none}
div#pied ul li.no-liens {display:none}

#pied  {width:auto; padding:0 20px;max-width:960px;}

#logo-distributeur{display:none}
.encart {width:80%; min-height:80px; height:auto}
#facebook {position:absolute; margin:10px}
.btmenu {position:absolute; right:10px; top:10px; z-index:90; cursor:pointer}
.menu-open {position:absolute; float:right; display:block; right:0.625em; top:0.625em; z-index:90; cursor:pointer}

.encart-txt {width:auto; border-right:none; margin:0 auto; clear:both}

li.mobile {display:block}
li.mobile a {
	background-color:#fff;			/*fond de couleur des rubriques*/
	opacity:0.8;
	color:#35D4FE;	
}
.no-mobile {display:none}
.mobile {display:block}
.demi {width: 28em; margin:0.5em; float:left; }
.tiers {width:17.3em; margin:1em; float:left; }
.quarts {width:13.5em; margin:0.5em; float:left; background:#000}
.bloc60{width:36em; margin:0.5em; float:left; background:#000}
.bloc40{width:20em; margin:0.5em; float:left; background:#000}


#livre{display:none}

#integration a .deconnexion p{text-align:center}
#integration  .cercle{
	float:none;
		margin:0.5em auto 0 auto;
		width:17em; 
		height:17em; 
}
#integration .label-long{width:200px}
.thepet { background-color:#FFF}

#integration a .liste-vehicule{width:52em}
#integration a .liste-vehicule:hover{width:52em}
.liste-vehicule .prix-vehicule{float:none;width:95%}
.liste-vehicule .bloc-vehicule {
	float: right;
	width: 41em;
}
#integration .liste-vehicule .infos{
	width: 11em;
	margin-left: 0.5em;
	color:#000000;
	font-size:13px
}
#integration .encart-recherche .marge-recherche{margin-left:80px}
#integration .encart-recherche{width:52em}
#integration .encart-recherche .champ-recherche{margin-left:3.5em}
#integration .cat-vehicules{width:7em;}

.feedback1-input { padding:0px}

#integration a #categorie{width:12em;}
#pav ul li a{width:340px;}
#pav ul li a div.plus {margin:60px 0 0 300px;}

#animation	{
	height:auto;
	width:100%;
	clear:both;
	background:url(../charte/fond-animation.jpg) no-repeat top center;
	margin:0px auto 0; }

#masque {
    display:block;
    width:100%;
    height:100%;
	min-height:100%;
    overflow:hidden;

}
#pied	{width:700px;padding:0 10px}

#baspage	{width:700px;}
#scrollToTop a{
display:none
}
}
@media screen and (max-width:720px){
body {overflow-x:hidden ; max-width:60em; font-size:6px; margin: 0 auto}

#conteneur	{
	width:auto;
	margin:0px auto;
	background:url(../charte/fond-conteneur.jpg) repeat-y top center ;
}
#animation {display:none}
#masque {display:none}

#ami {display:none}
#favoris {display:none}


nav	{width:100%; min-height:40px; background:#FF3E2C}

.dropmenu ul{
	width: 25.7em;
	background-color:#222222;
	position: absolute;
	display: none;
	padding: 0px;
	margin: 0px;
}
.dropmenu ul a {
/*######################################################################################################*/
	border: 1px solid #CCC;				/*taille et couleur de la bordure autour des sous-rubriques*/
/*######################################################################################################*/
	display:block;
}
.dropmenu ul a:hover {
/*######################################################################################################*/
	background-color: #FFF;				/*fond de couleur des sous-rubriques au survol*/
/*######################################################################################################*/
}

.images { width:100%; height:auto; padding:0em}

.dropmenu li{width:100%; border-top:1px solid white}
.dropmenu li a {color:#fff;padding:5px 20px;} 
.dropmenu li:first-child{border-top:none}


section#integration { clear:both; width:100%; max-width:348px;border-top:3px solid #000}
#integration p{/*text-align:justify*/}
#integration p.test{clear:both}

#slide {float:none; margin:10px auto;border:1px solid #1f1a17;width:300px;height:225px}
#slide img {max-width:100%;width:100%; height:auto}
.map {width:300px; height:247px}
ul.no-mobile {display:none}
div#pied ul li.no-liens {display:none}

#pied  {width:auto; padding:0 20px;max-width:960px; height:150px;}

#logo-distributeur{display:none}
.encart {width:80%; min-height:80px; height:auto}
#facebook {position:absolute; margin:10px}
.btmenu {position:absolute; right:0.625em; top:0.625em; z-index:90; cursor:pointer}



li.mobile {display:block}
li.mobile a {
	background-color:#fff;			/*fond de couleur des rubriques*/
	opacity:0.8;
	color:#35D4FE;	
}
.no-mobile {display:none}
.mobile {display:block}

.menu-open {position:absolute; float:right; display:block; right:0.625em; top:0.625em; z-index:90; cursor:pointer}
.demi {width:51em; margin:1em; float:left; }
.quarts {width:28em; margin:1em 15em; float:left; background:#000}
.tiers {width:36em; margin:1em 11em; float:left;  }
.bloc60{width:50em; margin:1em 4em; float:left; background:#000}
.bloc40{width:44em; margin:1em 7em; float:left; background:#000}


a .encart-contact{width: 52em; margin:1em; float:left; padding:1em;}
#livre{display:none}
#actualite-charte{float:none;min-height:500px}
#integration .cercle{
		width:35em; 
		height:35em; 
	float:none;
		margin:0.5em auto 0 auto;
}
input{margin-left:10px}
textarea{margin-left:10px}

#integration label{margin-left: 20px;text-align: left;}
#integration .label-long{width:200px}
#integration .photo-catalogue{float:none;margin:auto;text-align:center}


#integration table { display: block; position: relative; width: 100%; }
#integration thead{ display: block;float: left;}
#integration tbody{ display: block;width: auto; position: relative; overflow-x: auto; white-space: nowrap;}
#integration tbody th { border:0.0625em solid #999 }

#integration thead tr { display: block;border:0.0625em solid #999 }
#integration th { display: block; min-height: 3em;padding:0 5px 0 5px }
#integration tbody tr { display: inline-block; vertical-align: top;border:0.0625em solid #999 }
#integration td { display: block; min-height: 3em;padding:0 5px 0 5px}

.thepet { background-color:#FFF}

#integration a .deconnexion{float:none;margin:auto;width:20em}
#integration a .deconnexion p{text-align:center}

#integration .bloc-gauche-catalogue{float:none;width:52em}
#integration .bloc-droit-catalogue{float:none;width:52em}

#integration .bloc-gauche-garagiste{width:50em;float:none;margin-left:10px}
#integration .bloc-droite-garagiste{width:50em;float:none}
#integration .bloc-vehicule {
	width: 100%;
	float:none;
}
#integration .liste-vehicule .bloc-vehicule {
	float: none;
	width: 50em;
	text-align:center
}
#integration .liste-vehicule .bloc-photo-vehicule {
	float: none;
	width: 50em;
	text-align:center;
}
#integration .liste-vehicule .prix-vehicule{float:none;text-align:center;width:95%}
#integration .liste-vehicule .bloc-vehicule .exclu {float:none;width:95%}
#integration .liste-vehicule .infos{width:95%}
#integration .encart-recherche .champ-recherche{width:20em;float:left;margin-top:1em}
#integration .encart-recherche input[type="submit"]{
	padding:0.5em;
	width:90%;
}

#integration .cat-vehicules{width:25em;height:10em}
#integration .encart-recherche .cat-vehicules label{
margin-left:0px}
#integration .photo-moto{height:140px}
#integration .exclu-moto{ width:92%;}
.feedback1-input { padding:0px}


#integration #privatif{
	width: 50em;
	height: auto;
	background:none #e7e7e7
}

#integration #privatif .login{
	width:48em;
	
}


#integration #privatif .login p{text-align:left}

#integration a #categorie{width:25em;margin-top:2em}
#pav { background:#fff}
#pav ul li a{width:320px; margin: 5px 20px}
#pav ul li a div.plus {display:none}
#pav ul li a:hover div.plus {display:block}
#pav ul li a div.plus {margin:60px 0 0 280px;}
#pied	{width:340px;padding:0 10px}

#baspage	{width:340px;}
	}