@charset "UTF-8";
/* CSS Document */
/* on declare les styles pour les balises html courantes */
body {
	margin: 0; /* suppression des marges externes des navigateurs */
	padding: 0; /* suppression des marges internes des navigateurs */
	font-family: Arial, Helvetica, Verdana, Sans-Serif;
	background-color:#000;
	font-size: 100%;
	}
/* ici le style des liens par defaut "a href" */
a:visited { color: #FFFFFF; text-decoration:none; margin:0 auto; }
a:link { color: #FFFFFF; text-decoration: none;  margin:0 auto;}
a:hover { color: #FFFFFF; text-decoration: none; margin:0 auto; }
a:active { color: #FFFFFF; text-decoration: none;  margin:0 auto;}

ol ul li {
	font-family: Arial, Helvetica, Verdana, Sans-Serif;
	font-size: 1em;
	}
p {
	font-family: Arial, Helvetica, Verdana, Sans-Serif; 
	font-size: 1em;
}
td {
	font-family: Arial, Helvetica, Verdana, Sans-Serif;
}

.titre{
	margin: 0 auto; 
	padding: 0px 0px Opx 0px;
	text-align:center;
	color:#FFF;
	position: absolute;
	display: block;
	bottom: -8px; 
	left: 140px;
	}
.legal{
	margin: 0 auto;
	padding: 0px 0px 0px 0px;
	text-align: right;
	}

h1 {
	font-family:helvetica;
	font-size: 1.2em;
	font-weight:lighter;
	color:#FFF; /* blanc */
	}
h2 {
	font-family: Helvetica, Verdana, Sans-Serif;
	font-size: 1.3em;
	font-weight: lighter;
	color: #cc0000; /* rouge */
	}
h3 {
	font-family: Helvetica, Verdana, Sans-Serif;
	font-size: 1.2em;
	font-weight: lighter;
	color: #cc0000; /* rouge */
	}
h4 {
	font-family: Helvetica, Verdana, Sans-Serif;v
	font-size: 0.9em;
	font-weight: lighter;
	color: #65041b; /* rouge footer*/
	}
h5 {
	margin:0px;
	padding: 0px 15px 5px 0px;
	font-family:Helvetica, Verdana, Sans-Serif;
	font-size: 0.9em;
	font-weight: lighter;
	color: #e40a3d; /* rouge Audi */
	}
h6 {
	font-family: Helvetica, Verdana, Sans-Serif;
	font-size: 0.8em;
	font-weight: lighter;
	color: #cc0000; /* rouge */
	}
hr { color: #cccccc; 
	background-color: #cccccc; 
	height: 1px; 
	border: #cccccc; 
	}
sup, sub { font-size: 0.65em; }

/* ensuite nos styles à nous */
.separation { clear: both; visibility: hidden; }
.droite { float:right; display:block; position:relative; }
.gauche { float:left; display:block; position:relative; }
.page {
	margin:0 auto; 
	padding: 0;	
	}
.boutonbas {
	position: absolute;
	bottom:0px; right: 0px;
	}
.apparition {
	opacity: 0.5;
	}
.apparition:visited {
	opacity: 0.5;
	}
.apparition:link {
	opacity: 0.5;
	}
.apparition:hover {
	opacity: 1.0;
	}
.apparition:active {
	opacity: 0.75;
	}
	
.espacedessous{
	margin-bottom:4px;
	}
	
.ssmargeverticale{
	margin-top:0px;
	margin-bottom:0px;
	}
.ssmargeverticale2{
	margin-top:-2px;
	margin-bottom:-2px;
	}
	
.ssmargeverticale3{
	margin:2px 0px 50px 0px;
	
	}

.box{
	background-image: url(images/images/image__20_2.png);
	background-size: cover;
	background-repeat: no-repeat;
	height: 345px;
	}
.box2 {
	background-image:url(images/images/Audi__18.png);
	background-repeat: no-repeat;
	height: 75px;
}
.box3 {
	background-image:url(images/images/image__07.png);
	background-repeat: no-repeat;
	background-size: cover;
	height: 350px;
}
.centremenu{
	margin:0px 10px 0px 10px;
	padding-top:90px;
	}
.bouton-menu{
	margin: 20px 0px 20px 0px; 
	padding: 10px 0px 7px 15px;
	font-size: 0.8em;
	background-image: url(images/images/bouton-menu-off.png);
	background-repeat: no-repeat;
	background-size:cover;
	text-align: left;
	font-family:helvetica;
	font-weight:lighter;
	//position: absolute;
	//display: block;
	//bottom: 4px; 
	//right: 0px;
	width: 100%;
}
.bouton-menu:visited{
	color: #FFFFFF;
}
.bouton-menu:link { 
	color:#FFFFFF;
	}
.bouton-menu:hover{
	color:#FFFFFF;
	background-image:url(images/images/bouton-menu-on.png)
	}


.bouton-footer{
	margin: 0px;
	padding: 0 10px 0 10px;
	color: #65041b;
	}
.bouton-footer:visited{
	color: #65041b;
}
.bouton-footer:link { 
	color:#65041b;
	}
.bouton-footer:hover{
	color: #e40a3d; /* rouge Audi */
	}

.bouton-rouge-col2{
	margin: 0; 
	padding: 20px 0px 5px 0px;
	font-size: 1em;
	background-image: url(images/images/boutoncol2.png);
	background-repeat: no-repeat;
	text-align: right;
	position: absolute;
	display: block;
	bottom: 4px; 
	right: 0px;
	width: 100%;
	}
.bouton-rouge-col2:visited, .bouton-rouge-col2:link { 
	opacity: 1;
	}
.bouton-rouge-col2:hover { 
	opacity: 0.5;
	}

.bouton-rouge-col3{
	margin: 0; 
	padding: 20px 0px 5px 0px;
	font-size: 1em;
	background-image: url(images/images/boutoncol3.png);
	background-repeat: no-repeat;
	text-align: right;
	position: absolute;
	display: block;
	bottom: 2px; 
	right: 0px;
	width: 100%;
	}
.bouton-rouge-col3:visited, .bouton-rouge-col3:link { 
	opacity: 0.8;
	}
.bouton-rouge-col3:hover { 
	opacity: 0.5;
	}

.bouton-rouge-col4{
	margin: 0;
	padding: 20px 0px 5px 0px;
	font-size: 1em;
	background-image: url(images/images/boutoncol4.png);
	background-repeat: no-repeat;
	text-align: right;
	position: absolute;
	display: block;
	bottom: 0px;
	right: -1px;
	width: 100%;
	}
.bouton-rouge-col4:visited, .bouton-rouge-col4:link { 
	opacity: 1;
	}
.bouton-rouge-col4:hover { 
	opacity: 0.5;
	}
.bouton-rouge-col5{
	margin: 0; 
	padding: 20px 0px 5px 0px;
	font-size: 1em;
	background-image: url(images/images/boutoncol5.png);
	background-repeat: no-repeat;
	text-align: right;
	position: absolute;
	display: block;
	bottom: 4px; 
	right: 0px;
	width: 100%;
	}

.bouton-rouge-col5:visited, .bouton-rouge-col5:link { 
	opacity: 0.9;
	}
.bouton-rouge-col5:hover { 
	opacity: 0.5;
	}
.bouton-rouge3_2{
	margin: 0; 
	padding: 20px 0px 5px 0px;
	font-size: 1em;
	background-image: url(images/images/boutoncol3.png);
	background-repeat: no-repeat;
	text-align: right;
	position: absolute;
	display: block;
	bottom: 0px; 
	right: 0px;
	width: 100%;
	}
.bouton-rouge3_2:visited, .bouton-rouge3_2:link { 
	opacity: 1;
	}
.bouton-rouge3_2:hover { 
	opacity: 0.5;
	}

/* LAPTOP 960 */
@media screen and (min-width: 960px) {
.page {	
	width:960px;
	}

.laptop-mask {	
	display: none;
	}
	
}

/* TABLETTE */
@media screen and (min-width: 480px) and (max-width: 960px){
.page {	
	/* on decolle legerement la page des bords lateraux du navigateur */
	/*margin-left: 10px;
	margin-right: 20px;*/
	margin:auto;
	width: 760px;
	}

.centremenu{
	margin:0px 10px 0px 10px;
	padding-top:45px;
	}
	
.tablet-mask {	
	display: none;
	}
	
.box{
	background-image: url(images/images/image__20_2.png);
	background-size: cover;
	background-repeat: no-repeat;
	height: 273px;
}
.box2 {
	/*background-image:url(images/images/Audi__18.png);
	background-repeat: no-repeat;*/
	height: 75px;
}
.box3 {
	background-image:url(images/images/image__07.png);
	background-repeat: no-repeat;
	background-size: cover;
	height: 358px;
}

.colonne7 {	
	margin: 0.5208333333%;
	padding: 0;
	width: 73.9583333333%; /* = ((70x9) colonnes + (5x2)x8 marges intercolonne)/960*100  La colonne 7 passe en col 9*/
	}

.toto{
	margin-top: -1px;
	height: 44px;
}
h4 {
	font-family: Helvetica, Verdana, Sans-Serif;
	font-size: 0.8em;
	font-weight: lighter;
	color: #65041b; /* rouge footer*/
	}
.legal{
	margin: 0 auto;
	padding: 0px 0px 0px 0px;
	text-align: right;
	/*
	color: #FFF;
	position: absolute;
	display: block;
	bottom: 6px;
	right: 11px;
	*/
	}

}

/* MOBILE */
@media screen and (max-width: 480px) {
.page {	
	/* on decolle legerement la page des bords lateraux du navigateur */
	width:100%;
	}
.colonne1, .colonne2, .colonne3, .colonne4, .colonne5, .colonne6, .colonne7, .colonne8, .colonne9, .colonne10, .colonne11, .colonne12 {	
	margin: 0.5208333333%;
	padding: 0;
	width: 98.9583333333%; /* = ((70x12) colonnes + (5x2)x11 marges intercolonne)/960*100 */
	
	}
.mobile-mask {	
	display: none;
	}

.change-image1{
	background-image:url(images/images/image__26_mobile.png);
}

h1 {
	font-family:helvetica;
	font-size: 1.2em;
	font-weight:lighter;
	color:#FFF; /* blanc */
	}
	
.titre{
	margin: 0 auto; 
	padding: 0px 0px Opx 0px;
	text-align:center;
	color:#FFF;
	position: absolute;
	display: block;
	bottom: -10px; 
	left: 0px;
	width:100%;
	}
.box{
	background-image: url(images/images/image__20_2-mobile.png);
	background-size: cover;
	background-repeat: no-repeat;
	height: 170px;
}

.box3 {
	background-image:url(images/images/image__07.png);
	background-repeat: no-repeat;
	background-size: cover;
	height: 160px;
}
.centremenu{
	margin:0px 10px 0px 10px;
	padding-top:0px;
	}
.bouton-menu{
	margin: 8px 0px 8px 0px; 
	padding: 10px 0px 7px 15px;
	font-size: 0.8em;
	background-image: url(images/images/bouton-menu-off.png);
	background-repeat: no-repeat;
	/*background-size:cover;*/
	text-align: center;
	font-family:helvetica;
	font-weight:lighter;
	width: 100%;
}
/*.bloc-size-mobile{
	margin-bottom: 10px;
	height:170px; */
	
.bouton-rouge-col2{
	margin: 0; 
	padding: 20px 0px 5px 0px;
	font-size: 1em;
	background-image: url(images/images/bigbutton.png);
	background-repeat: no-repeat;
	background-size: cover;
	text-align: right;
	position: absolute;
	display: block;
	bottom: 4px; 
	right: 0px;
	width: 100%;
	}

.bouton-rouge-col3{
	margin: 0; 
	padding: 20px 0px 5px 0px;
	font-size: 1em;
	background-image: url(images/images/bigbutton.png);
	background-repeat: no-repeat;
	background-size: cover;
	text-align: right;
	position: absolute;
	display: block;
	bottom: 2px; 
	right: 0px;
	width: 100%;
	}

.bouton-rouge-col4{
	margin: 0; 
	padding: 20px 0px 5px 0px;
	font-size: 1em;
	background-image: url(images/images/bigbutton.png);
	background-repeat: no-repeat;
	background-size: cover;
	text-align: right;
	position: absolute;
	display: block;
	bottom: 0px; 
	right: 0px;
	width: 100%;
	}

.bouton-rouge-col5{
	margin: 0; 
	padding: 20px 0px 5px 0px;
	font-size: 1em;
	background-image: url(images/images/bigbutton.png);
	background-repeat: no-repeat;
	background-size: cover;
	text-align: right;
	position: absolute;
	display: block;
	bottom: 4px; 
	right: 0px;
	width: 100%;
	}	
.bouton-rouge3_2{
	margin: 0; 
	padding: 20px 0px 5px 0px;
	font-size: 1em;
	background-image: url(images/images/bigbutton.png);
	background-repeat: no-repeat;
	background-size: cover;
	text-align: right;
	position: absolute;
	display: block;
	bottom: 0px; 
	right: 0px;
	width: 100%;
	}
h4 {
	font-family: Helvetica, Verdana, Sans-Serif;
	font-size: 0.6em;
	font-weight: lighter;
	color: #65041b; /* rouge footer*/
}
.legal{
	margin: 0 auto;
	padding: 0px 0px 0px 0px;
	text-align: right;
	
	}
}