*{
    margin: 0px;
    padding: 0px;
    font-family: Roboto, "Lucida Sans", sans-serif;
	font-size: 16px;
	line-height: 1;
}
body {
	overflow-x: hidden;
	margin: 0 auto;
	padding: 10px;
}
header {
margin-right: -10px;
}
.tri {
	display: none;
	}
.photo {
	width: 100%;
	}
nav{
    width: 100%;
    margin: 0 auto;
    background-color: white;
    position: sticky;
    top: 0px;
}
.conteneur-nav{
    position: absolute;
    width: 100%;
    margin-top: -160px;
}
nav input[type=checkbox]{
    display: none;
}
nav label{ 
    display: inline-block;
    margin-left: 90%;
}
nav ul{
    display: none;
    list-style-type: none;
    background-color: black;
}
nav input[type=checkbox]:checked + ul{
    display: flex;
    flex-flow : column wrap;
}
nav ul li{
    flex: 1 1 auto;
    text-align: center;
    border-bottom: 1px solid gold;
}
nav > div > ul > li > a{
    color: white;
}
nav a{
    display: block;
    text-decoration: none;
    color: black;
    padding: 10px 0px;
}
.sous{
    display: flex;
    flex-flow: column wrap;
    z-index: 1000;
}
.sous li{
    flex: 1 1 auto;
    text-align: left;
}
.sous a{
    padding: 3px;
	background-color: gold;
}
.visible {
z-index: 1;
}
p {
text-align: justify;
}

/*footer*/
footer {
width: 100%;
padding: 5px;
background-image: linear-gradient(white, black 60px);
color: gold;
}
.vid {
margin-top: 15px;
}
.enba {
text-decoration: none;
color: gold;
text-shadow: 2px 2px black;
}

/*index*/
img {
padding-right: 8px;
}
.vide {
margin-top: 20px;
}
.gros {
font-size: 1.5em;
}
h3 {
text-decoration: underline;
}
.model {
font-size: 1.4em;
text-shadow: 2px 2px gold;
}
.centre {
text-align: center;
}
.penche {
font-style: italic;
font-size: .9em;
}
.elle {
display: none;
}
.elle2 {
display: block;
margin: auto;
}
.foto img {
max-width: 100%;
height: auto;
display: block;
}
.mini2 {
width: 100%;
}
.un {
width: 100%;
margin: 10px; 
}
.deux {
width: 100%;
margin: 10px;
}
.trois {
width: 100%;
margin: 10px;
}
.cache2 { 
margin-top: -350px;
margin-left: -90px;
z-index: 2;
}
.box {
position: relative;
top: 100px;
left: 48%;
transform: translate(-50%,-50%);
width: 300px;
height: 300px;
cursor: pointer;
color: gold;
}
.box .front, .box .back {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
transition: 0.5s;
backface-visibility: hidden;
}
.box .front {
transform: perspective(1000px) rotateY(0deg);
z-index: 2;
}
.box .back {
transform: perspective(1000px) rotateY(180deg);
z-index: 1;
}
.box:hover .front {
transform: perspective(1000px) rotateY(-180deg);
z-index: 2;
}
.box:hover .back {
transform: perspective(1000px) rotateY(0deg);
z-index:1;
}
.premiermod {
display:flex;
flex-flow: column wrap;
height: 300px;
margin: 10px auto;
box-sizing: border-box;
}
.gauche {
display: none;
flex: 1 1 20%;
}
.droite  {
flex: 1 1 90%;
max-width: 100%;
margin: 10px auto;
}
.boxm {
position: absolute;
top: 105%;
left: 14%;
transform: translate(-50%,-50%);
width: 300px;
height: 300px;
cursor: pointer;
color: gold;
}
.boxm .front, .boxm .back {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
transition: 0.5s;
backface-visibility: hidden;
}
.boxm .front {
transform: perspective(1000px) rotateY(0deg);
z-index: 2;
}
.boxm .back {
transform: perspective(1000px) rotateY(180deg);
z-index: 1;
}
.boxm:hover .front {
transform: perspective(1000px) rotateY(-180deg);
z-index: 2;
}
.boxm:hover .back {
transform: perspective(1000px) rotateY(0deg);
z-index:1;
}
.icond {
font-size: 1.8em;
margin-right: 25px;
color: gold;
text-shadow: 2px 2px black;
transform: scale(1);
transition: transform 400ms;
}
.icond:hover {
transform: scale(1.5);
}
.container {
display: flex;
width: 100%;
margin: 10px auto;
}
.taille {
flex: 3;
max-width: 65%;
height: 50%;
}
.bloc {
flex: 1;
margin: 0 20px;
}
.y {
background-color: gold;	
}
.b {
background-color: royalblue;	
}
.bj{
background-color: rgb(65,98,145);	
}
.bc {
background-color: dodgerblue;	
}
.bt {
background-color: rgb(188,230,255);
}
.n {
background-color: rgb(34,50,50);	
}
.s {
background-color: rgb(199,182,125);	
}
.sf {
background-color: burlywood;
}
.si {
background-color: silver;  
}
.vo {
background-color: rgb(214,208,109);
}
.v {
background-color: seagreen;	
}
.vt {
background-color: rgb(126,174,174);	
}
.vd {
background-color: palegreen;
}
.ve {
background-color: rgb(46,188,155);
}
.vef {
background-color: darkgreen;
}
.jt {
background-color: rgb(244,210,130);
}
.sau {
background-color: rgb(255,125,105);	
}
.ov {
background-color: rgb(233,165,7);	
}
.r {
background-color: rgb(218,111,173);	
}
.rv {
background-color: fuchsia;	
}
.rt {
background-color: pink;
}
.ro {
background-color: rgb(219,70,83);	
}
.rof {
background-color: maroon;
}
.vi {
background-color: rgb(143,115,156);	
}
.vif {
background-color: indigo;
}
.m {
background-color: rgb(120,60,60);	
}
.ma {
background-color: saddlebrown;
}
.o {
background-color: darkorange;
}
.ot {
background-color: rgba(255,125,105,.5);
}
.colMe {
background-image: url('ima/colMe.png');
background-repeat: repeat-x;
}
.colMu {
background-image: url('ima/colMu.png');
background-repeat: repeat-x;
}
.colG {
background-image: url('ima/colG.jpg');
background-repeat: repeat-x;
}
.colMo {
background-image: url('ima/colMo.png');
background-repeat: repeat-x;
}
.colN {
background-image: url('ima/colN.png');
background-repeat: repeat-x;
}
.colD {
background-image: url('ima/colD.png');
background-repeat: repeat-x;
}
.colA {
background-image: url('ima/colA.png');
background-repeat: repeat-x;
}
.colP {
background-image: url('ima/colP.png');
background-repeat: repeat-x;
}
.colBq {
background-image: url('ima/colBq.jpg');
background-repeat: repeat-x;
}
.colbi1 {
background-image: url('ima/colbi1.png');
background-repeat: repeat-x;
}
.colbi2 {
background-image: url('ima/colbi2.png');
background-repeat: repeat-x;
}
.colbi3 {
background-image: url('ima/colbi3.png');
background-repeat: repeat-x;
}
.colbi4 {
background-image: url('ima/colbi4.png');
background-repeat: repeat-x;
}
.colbi5 {
background-image: url('ima/colbi5.png');
background-repeat: repeat-x;
}
.colbi6 {
background-image: url('ima/colbi6.png');
background-repeat: repeat-x;
}
.l1 {
background-image: linear-gradient(white, crimson 50px);
}
.l2 {
background-image: linear-gradient(white, rgb(0,118,236) 50px);
}
.l3 {
background-image: linear-gradient(white, green 50px);
}
.l4 {
background-image: linear-gradient(white, indigo 50px);
}
.l5 {
background-image: linear-gradient(white, fuchsia 50px);
}
.l6 {
background-image: linear-gradient(white, rgb(255,122,0) 50px);
}
.l7 {
background-image: linear-gradient(white, saddlebrown 50px);
}
.l8 {
background-image: linear-gradient(white, rgb(34,50,50) 50px);
}
input {
width: 20px;
height: 20px;
}
.truc {
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid;	
margin: 10px;
padding: 10px;
}
.colo {
color: gold;
}
.transi {
margin: 10px;
padding: 10px;
color: white;
background-color: rgba(0,0,0,.9);
border: 1px groove gold;
border-radius: 20px;
text-align: center;
position: relative;
-webkit-animation: glis 0.3s ease;
-moz-animation: glis 0.3s ease;
-o-animation: glis 0.3s ease;
animation: glis 0.3s ease;
}
@-webkit-keyframes glis {
	from {left: -400px;}
    to {left: 0px;}
}
@-moz-keyframes glis {
	from {left: -400px;}
    to {left: 0px;}
}
@-o-keyframes glis {
	from {left: -400px;}
    to {left: 0px;}
}
@keyframes glis {
    from {left: -400px;}
    to {left: 0px;}
}
a {
background-color:transparent;
margin: 0;
padding: 0;
}
button {
width: 290px;
height: 50px;
margin: 0 3px 50px 3px;
padding: 2px;
background-image: linear-gradient(gold, white, gold 60px);
border: 1px solid gold;
border-radius: 10px;
cursor: pointer;
font-weight: bold;
}
#bond { /*NOUVEAU*/
width: 70px;
height: 20px;
margin: 40px auto;
margin-bottom: 40px;
padding: 10px;
border: 1px solid white;
border-radius: 40%;
-webkit-animation:bounce 5s ease infinite alternate;
-moz-animation:bounce 5s ease infinite alternate;
-o-animation:bounce 5s ease infinite alternate;
animation:bounce 5s ease infinite alternate;
}
@-webkit-keyframes bounce{
0% {transform: rotate(45deg) scale(1,1);
	background-image: radial-gradient(circle at center, white, gold);}
50% {transform: scale(2,2);
	background-image: radial-gradient(circle at top left, white, gold);}
100% {transform: scale(1,1);
	background-image: radial-gradient(circle at center, white, gold);}
}
@-moz-keyframes bounce{
0% {transform: rotate(45deg) scale(1,1);
	background-image: radial-gradient(circle at center, white, gold);}
50% {transform: scale(2,2);
	background-image: radial-gradient(circle at top left, white, gold);}
100% {transform: scale(1,1);
	background-image: radial-gradient(circle at center, white, gold);}
}
@-o-keyframes bounce{
0% {transform: rotate(45deg) scale(1,1);
	background-image: radial-gradient(circle at center, white, gold);}
50% {transform: scale(2,2);
	background-image: radial-gradient(circle at top left, white, gold);}
100% {transform: scale(1,1);
	background-image: radial-gradient(circle at center, white, gold);}
}
@keyframes bounce{
0% {transform: rotate(45deg) scale(1,1);
	background-image: radial-gradient(circle at center, white, gold);}
50% {transform: scale(2,2);
	background-image: radial-gradient(circle at top left, white, gold);}
100% {transform: scale(1,1);
	background-image: radial-gradient(circle at center, white, gold);}
}

.espacev {
margin-top: 120px;
margin-bottom: 80px;
}
.esp {
margin-right: 50px;
}
.dispo1, .dispo2, .dispo3, .dispo4, .dispo5 {
width: 90%;
}

.espace {
margin-right: 15px;
}

.ic::before { 
content: "\f152";
font-family: FontAwesome;
color: gold;
text-shadow: 2px 2px black;
margin-left: 5px;
margin-right: 20px;
}
.icf::before { 
content: "\f178";
font-family: FontAwesome;
color: gold;
text-shadow: 2px 2px black;
margin-left: 20px;
margin-right: 20px;
line-height: 1;
}
.inter {
line-height: 1;	
}
.cache {
margin-top: -390px;
margin-left: 32%;
z-index: 2;
}
.error {
color: red;
font-size: 22px;
}
.ok {
color: green;
}
.mil {
margin: 80px 20%;
}
.bou {
width: 184px;
height: 184px;
background-image: url('ima/prixflm.jpg');
}
.block {
position: relative;
margin: 30px auto 0;
width: 186px;
height: 186px;
background: linear-gradient(0deg, #000,#272727);
}
.block:before, .block:after {
content: '';
position :absolute;
left: -10px;
top: -10px;
background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000);
background-size: 400%;
width: calc(100% + 20px);
height: calc(100% + 20px);
z-index: -1;
animation: steam 20s linear infinite;
}
@keyframes steam {
 0% {
 	background-position: 0 0;
 }
 50% {
 	background-position: 400% 0;
 }
 100% {
 	background-position: 0 0;
 }
}
.block:after {
filter: blur(50px);
}
.tic {
width: 184px;
height: 184px;
z-index: -5;
-webkit-transition: height 2s;
-moz-transition: height 2s;
-o-transition: height 2s;
transition: height 2s;
}
#cliclm {
display: none;
}
.carte {
max-width: 80%;
margin: 50px auto;
padding: 20px;
background-color: gold;
border-radius: 10px;
color: white;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
cursor: pointer;
}
.close {
margin-left: 80%;
padding: 5px;
font-size: 2em;
}
.container5 {
display: flex;
overflow: hidden;
width: 100%;
padding-bottom: 2%;
background-color: rgba(255,215,0,.5);
color: gold;
text-shadow: 2px 2px black;
}
.mydefil {
white-space: nowrap;
font-size: 50px;
animation: defile 20s linear infinite;
}

@-webkit-keyframes defile {
	0%{
		transform: translate(0,0);
	}
	100%{
		transform: translate(-100%,0);
	}
}
.tabled {
max-width: 90%;
margin: 0 auto;
}
table {
max-width: 100%;
margin:0 auto;
box-shadow: 0 3px 3px #ccc;
}
th {
padding: 10px;
background-color: black;
color: white;
font-size: 1.5em;
}
td {
padding: 5px;
}
.dark {
background-color: orange;
}
.light {
background-color: gold;
}
.colof {
color: green;
text-shadow: 2px 2px white;
font-size: 2.5em;
}
.petit {
font-size: 20px;
}
.peti {
 font-size: 15px;
}
h1, form {
margin: 10px auto;
}
fieldset {
width: 100%;	
margin: 10px;	
padding: 2px;
border: none;
border-radius: 10px;
background-color: black;
color: white;
}
.ch {
width:30px;
height:30px;
margin-right: 30px;
background-color:gold;	
}
.chp, .chpe {
min-width: 90%;
height: 50px;
margin-right: 1%;
background-color: gold;
border: 1px solid white;
border-radius: 5px;	
}
.chp {
float: none;
}
.chpe {
cursor: pointer;
}
.chr {
width: 100px;
height: 30px;
margin-right: 1%;
background-color: gold;
border: 1px solid white;
border-radius: 5px;	
}
textarea {
float:none;
width: 250px;
height: 100px;
margin-right: 2%;
background-color: gold;
border: 1px solid white;
border-radius: 5px;	
}
.entre, .entr{
height: 50px;
}
.container3 {
display:flex;
flex-flow: column nowrap;
justify-content: flex-start;
height: 150px;
margin: 10px 1px;
box-sizing: border-box;
}
.element3 {
flex: 1 1 90%;
max-width: 200px;
margin: 10px 10%;
box-sizing: border-box;
}
.erro {
margin: 20px auto;
color: red;
font-style: italic;
}
.aide{
width:10px;
}
@media screen and (min-width: 500px) {
.premiermod {
display:flex;
flex-flow: column wrap;
height: 450px;
margin: 10px auto;
box-sizing: border-box;
}
.cache2 { 
margin-left: 12%;
}
.mil {
margin: 65px 30%;
}
}

@media screen and (min-width: 700px) {
.premiermod {
display:flex;
flex-flow: column wrap;
height: 730px;
margin: 10px auto;
box-sizing: border-box;
}
h1, form {
	margin: 80px auto;
	}
	fieldset {
	max-width: 60%;
	margin: auto;
	padding: 20px;
	}
	textarea {
	float:right;
	width: 280px;
	height: 200px;	
	}
	.chp, .chpe {
	max-width: 25%;
	}
	.chp {
	float: right;
	}
	.chr {
	height: 30px;
	}
	.entre {
	height: 250px;
	}
	.entr {
	height: 100px;	
	}
	#bond { 
	width: 90px;
  	}
}

@media screen and (min-width: 1100px) {
	body {
		max-width: 1700px;
	}
	* {
		font-size: 25px;
		line-height: 1.5;
		box-sizing: border-box;
	}
	header {
		background-image: repeating-linear-gradient(to bottom, rgba(217,217,222,.5), rgba(100,100,100,.6), rgba(60,60,60,.6), rgba(23,23,23,.6), rgba(7,7,7,0.6), rgba(2,2,2,0.7), rgba(0,0,0,.9)420px);
		text-align: center;
		height: 420px;
		margin-right: 0;
	}
	.tri {
		display: block;
		margin: -10px 0 0 0;
	}
	.rect {
	background: black;
	max-width: 1700px;
	height: 100px;
	}
	.boxi {
	width: 0;
	height: 0;
	border-left: 0px solid transparent;
	border-right: 1700px solid transparent;
	border-top: 35px solid black;
	}
	.photo {
	max-width: 1091px;
	min-height: 420px;
	max-height: 420px;
	}
    .conteneur-nav{
        position: static;
        margin-top: -95px;
    }
    nav label, nav input{
        display: none;
    }
    nav input[type=checkbox]:checked + ul, nav ul{
        display: flex;
        flex-flow: row wrap;
    }
    nav ul li{
        position: relative;
        border-bottom: none;
    }
    nav > div > ul > li > a{
        color: white;
    }
     nav a{
        border-bottom: 2px solid transparent;
    }
    nav a:hover{
        color: orange;
        border-bottom: 2px solid gold;
    }
    .sous{
        display: none;
        box-shadow: 0px 1px 2px #CCC;
        background-color: white;
        position: absolute;
        width: 100%;
    }
    nav > div > ul li:hover .sous{
        display: flex;
        flex-flow: column wrap;
    }
    .sous a{
        border-bottom: none;
        background-color: white;
    }
    .sous a:hover{
        border-bottom: none;
        background-color: rgba(200,200,200,0.1);
    }
    .deroulant > a::after{
        content:" ▼";
        font-size: 12px;
    }
    .vide {
	margin-top: 150px;
	}
    .foto {
    display: none;
	}
    .elle {
    display: block;
    }
    .elle2 {
    display: none;
    }
    .mini2 {
	position: relative;
	margin: 10px;
	height: 1100px;
	}
	.un {
	width: 250px;
	height: 285px; 
	position: absolute;
	z-index: 1;
	}
	.deux {
	width: 250px;
	height: 265px;
	top: 150px;
	left: 300px;
	position: absolute;
	z-index: 2;
	}
	.trois {
	width: 250px;
	height: 268px;
	left: 600px;
	top: 300px;
	position: absolute;
	z-index: 3;
	}
	.truc {
	width: 42px;
	height: 42px;
	padding: 5px 8px 8px 8px;
	}
	.container {
	display: flex;
	max-width: 900px;
	margin: 20px auto;
	}
	.premiermod {
	display:flex;
	flex-flow: row nowrap;
	height: 800px;
	margin: 50px auto;
	}
	.gauche {
	display: block;	
	flex: 1 1 40%;
	max-width: 40%;
	}
	.droite  {	
	flex: 3 1 60%;
	max-width: 80%;
	}
	fieldset {
	max-width: 50%;
	}
	.chr {
	height: 40px;
	}
	button {
	width: 650px;
	height: 100px;
	background-image: linear-gradient(gold, white, gold, 50px);
	}
	.ic::before {
	margin-left: 100px;
	}
	.icf::before {
	margin-left: 140px;
	}
	.mil {
	margin: 10px 40%;
	}
	.tic:hover {
	width: 184px;
	height: 400px;
	border: 1px solid transparent;
	border-radius: 0 0 50px 50px ;
	background: url('ima/prix.png') no-repeat;
	}
	.container3 {
	height: 300px;
	}
	.dispo1 {
	width: 40%;
	}
	.dispo2 {
	width: 37%;
	}
	.dispo3 {
	width: 45%;
	}
	.dispo4 {
	width: 47%;
	}
	.dispo5 {
	width: 38%;
	}
	#bond { 
	width: 140px;
	height: 60px;
	margin-top: -40px;
	margin-left: 65%;
	margin-bottom: 0;
	}
.container5 {
padding-bottom: 0;
text-shadow: 5px 5px black;	
}
.mydefil {
font-size: 180px;
}
.tabled {
max-width: 60%;
}
.aide{
width:25px;
}
}

@media screen and (min-width: 1600px) {
	
	.container3 {
	display:flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	height: 100px;
	}
	.element3 {
	flex: 1 1 90%;
	max-width: 200px;
	margin: 10px 15%;
	}

}