html {   }
body {letter-spacing:1px;  margin:auto;padding:0; color:#FFFFFF;background-color:#0D101B ; font-family: 'arial';max-width:1600px;}
/* body { letter-spacing:1px;  margin:0;padding:0; font-family:verdana!important;color:black;background-color:#fdf9f3 } */

/* menu navigation */
a { text-decoration:none; color:white}
a:link {}
a:visited {}
a:focus {}
a:hover { font-weight:bold}
a:active {font-weight:bold}



.noDisplay { display:none}


.menuPhone {  display:flex;flex-direction: column; align-content : center; align-items:center;position:fixed;padding:32px;
  z-index:4000;	  position: fixed;  right: 0;  top: 0;   background-color : #161B2D;}
/* .menuPhone>close { display:flex;} */
/* .menuPhone>close::after {	content: '\002716';	font-size:3em;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);} */
/* .menuPhone>close:hover, */
/* .menuPhone>close:focus { */
  /* color: #000; */
  /* text-decoration: none; */
  /* cursor: pointer; */
/* } */
  
contenu {width: 100%;    display: flex;    position: relative;    float: left;    overflow: auto;
    flex-direction: column;    flex-wrap: nowrap;    align-content: center;    justify-content: center;
align-items: center;} 

section { width:100%;display: flex;    flex-direction: column;     align-items: center;}

.contenu  { width:80%;display:flex;float:inline-start;flex-direction: column;    align-items: center;}
.menu { margin:1% ; display:flex;float:inline-start;width:auto;flex-direction:column;align-items:center;align-content:center}
.menu>form { display:none}
.menu.full { border-top:1px white solid;border-bottom:1px white solid;margin:1% 2% ; display:flex;float:inline-start;width:98%;flex-direction:row;align-items:center;align-content:center;justify-content:center}
.menu.full>a {width: 33%;    display: flex;    justify-content: center;    align-items: center;    align-content: center;    flex-direction: column;
padding:1%;font-size:xx-large; text-align:center}


.titre { margin:1% 0% 1% 2% ;width:98%;font-size: xx-large;  font-weight: bold;    font-style: italic; }

close {  display:block;position:absolute;top:0;right:0;width:32px;height:32px;color:white;font-size:large;background-color:grey;z-index:500
}
close::after {	content: '\002716';	font-size:larger;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
close:hover,
close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-dialog {  position:fixed;  margin-top:0%;  width:100%;}

.modal-content { display:flex;flex-direction:column;align-items:center; max-height:90vh;  position: fixed;  top:50%;left:50%;transform:translate(-50%,-50%);
  padding: 1%;  outline: 0; border: 1px solid #646A8A;background-color: #161B2D;  text-align: justify;  width: 90%; background-color : 
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  overflow:auto;  -webkit-animation-name: example; -webkit-animation-duration: 0.5s; animation-name: example;  animation-duration: 0.5s;}

.modal-content>texte {  width: 90%;
    margin: 2%;
    display: flex;
    font-size: x-large;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;}
	
.texte {  margin: 2%;flex:1 96%;
    display: flex;
    font-size: x-large;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;}	
	
resultat {  width: 100%;  margin : 0; display:flex;flex-direction: row;    flex-wrap: wrap;    align-content: center;}	
.elt { display:block;margin:1%;background-color:#2B3255;border:1px #EEEEF6 solid;border-radius:10px;padding:1%;cursor:pointer}
.elt:hover { background-color:#646A8A;border:1px #EEEEF6 solid; }
.elt>form {display:none}
.elt>titre { text-align:center ; width:100%;display:block;float:left;padding:1%;font-size:large}
.elt>description { text-align:left ; width:100%;display:block;float:left;position:relative;padding:1%;font-size:large}
.elt>visuel { width: 100%; display: flex; height: 100%;align-content:center;justify-content:center;}
.elt>visuel>img { max-width:98%; max-height:50px;  }

.article {  text-align:center;   display: flex;    margin: 1%;    background-color: #2B3255;
    border: 1px #EEEEF6 solid;    border-radius: 10px;    padding: 1%;    cursor: pointer;    flex-direction: row;
    flex-wrap: nowrap;    align-content: center;    justify-content: center;    align-items: center;    width: 97%;
}

.article:hover { background-color:#646A8A;border:1px #EEEEF6 solid; }
.article>form {display:none}
.article>titre { text-align:center ; width:100%;display:block;float:left;padding:1%;font-size:large}
.article>description { text-align:left ; width:100%;display:block;float:left;position:relative;padding:1%;font-size:large}
.article>visuel { width: 100%; display: flex; height: 100%;align-content:center;justify-content:center;}
.article>visuel>img { max-width:98%; max-height:100px;  }	

.article.edition {  text-align:center;   display: flex;    margin: 1%;    background-color: #2B3255;
    border: 1px #EEEEF6 solid;    border-radius: 10px;    padding: 1%;    cursor: pointer;    flex-direction: row;
    flex-wrap: nowrap;    align-content: center;    justify-content: center;    align-items: center;    width: 97%;
}

.article.edition>form {display:block}
.article.edition>titre { text-align:center ; width:100%;display:block;float:left;padding:1%;font-size:large}
.article.edition>description { text-align:left ; width:100%;display:block;float:left;position:relative;padding:1%;font-size:large}
.article.edition>visuel { width: 100%; display: flex; height: 100%;align-content:center;justify-content:center;}
.article.edition>visuel>img { max-width:98%; max-height:100px;  }	

form {display:flex;flex-direction: column;width:50%;
    align-content: center;
    justify-content: center;
    align-items: center;margin:0 auto}	

form.full {width:100%}
form .titre { font-size: 1.3em;}

form label {
    display:flex;flex-direction: column;width:30%;  align-content: center;    justify-content: center;    align-items: center;
}

form input[type="text"],form input[type="password"], form input[type="email"],form input[type="number"], form textarea, form select {
    font-size: 0.9375rem;    border:0px solid #646A8A ;	border-radius:20px;    	background-color : #293255 ; color:white;
     width:77%;	padding:0.8rem 1rem ; 	margin:1%; outline: 0;display:block;float:left;position:relative;
    transition: box-shadow 0.3s;-moz-appearance: none; -webkit-appearance: none; appearance: none;}

select.classic {
  background-image:
    linear-gradient(45deg, transparent 50%, #848b98 50%),
    linear-gradient(135deg, #848b98 50%, transparent 50%),
    linear-gradient(to right, #e0e8f5, #e0e8f5);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    100% 0;
  background-size:
    5px 5px,
    5px 5px,
    2.5em 3em;
  background-repeat: no-repeat;
}

form input[type="number"] { text-align :center;width:100px}

.formulaire { background-color : transparent ; display:flex;flex-direction:column;  width:100%;}

.login { display:flex;flex-direction:row;width:50%;margin:auto; padding: 2%;    list-style: none;  align-items: center;  justify-content: center;
  background-color:#121421 ; flex-wrap:wrap; flex:1 1 100%;}
.login>block { text-align:center ; width:50%;display:flex;flex-direction:row;align-items:center;padding:1%;font-size:x-large}
.formulaire.full { margin:0%}
.formulaire.full>input[type="password"],.formulaire.full>input[type="email"]{ width:97%; }


.formulaire.validation{ font-size: small; width:98%;margin:1%;  text-align:center;  transition: box-shadow 0.3s;-moz-appearance: none; -webkit-appearance: none; appearance: none;}

.row {  width: 100%;  margin : 0; display:flex;flex-direction: row;    flex-wrap: nowrap;    align-content: center; justify-content:center}

.row>a {  align-items: center; justify-content: center; display:block;text-align:center;}



.bt, .bt:visited, .bt[type=submit] { display: flex; justify-content:center;  white-space: nowrap;   align-items: center;  cursor: pointer; line-height: 1.56em;
    appearance: none;   outline: none;    color: white; font-size: larger; letter-spacing: 1px;  transition: all 100ms 0ms ease-in;
    border:0px solid white; border-radius: 30px;	padding:5px 20px;	margin : 10px;	}
.bt.small {display:none}
.bt.action, .bt.action:visited, .bt[type=submit].action {    
    background: transparent;    background-image: linear-gradient(to right, #1D4FAA 0%, #3A8CD0 51%);
	background-size: 200% auto;   font-weight: bold;    display: flex;	align-items: center;	justify-content :center;
    border-radius: 30px;	padding:5px 20px;	margin : 10px;border:0}
.bt.action:hover { background-position: right center;text-decoration: none; /* change the direction of the change here */ }

.bt.action.menu, .bt.action.menu:visited { width:90% ;}
.bt.action.menu.categorie, .bt.action.menu.categorie:visited { width:90% ; font-size:small;font-weight:normal;padding:5px;margin:5px}
         

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color:transparent ;
  /* background-color:#0D101B#0D101B ; */
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
} 
.avantage {   flex-grow: 1;    display: flex;	width:100%;    margin: 0.5% 1%;	/*padding:1%;*/
	    cursor: pointer;    border: 1px solid black;    flex-direction: column;    flex-wrap: nowrap;
    align-content: center;        align-items: center;background-color:#161B2D;} 
.avantage>visuel { max-width:100%; max-height:150px;display:flex;position:relative;float:left;background-color:#161B2D;
}
.avantage>visuel>img { max-width:98%; max-height:98%; display:block;position:relative;float:none;margin:auto  }
.avantage>description {width:100%;padding:2% 0%;text-align:center;
font-size:large;font-weight:bold;text-align:center;  background-color:#161B2D;}

.colonne {  width: auto;  margin : 0; display:flex;flex-direction: column;    flex-wrap: nowrap;    align-content: center; justify-content:center;align-items:flex-start}

.lien {  flex-grow: 1;    display: flex;	width:97%;    margin: 1%;	/*padding:1%;*/
	    cursor: pointer;    border: 1px solid white;    flex-direction: column;    flex-wrap: nowrap;
    align-content: center;        align-items: center;background-color:#161B2D;} 
.lien>titre { text-align:center ; width:100%;display:block;float:left;padding:1%;font-size:larger}
.lien>visuel { width: 100%; display: flex; align-content:center;justify-content:center;}
.lien>visuel>img { max-width:98%; max-height:100px;  }

.virtualTour { width:100%;height:80vh }

.accueil {     display: flex;    flex-direction: column;flex:1 47%;    
    margin: 1%;border : 1px solid #121421;    flex-wrap: wrap;    align-content: center;    justify-content: flex-start;    align-items: center;background-color:#121421 ;}
.accueil:hover { border : 1px solid white; background-color:#646A8A ;cursor:pointer}
.accueil>titre { text-align:center ; width:100%;display:block;float:left;padding:1%;font-size:xxx-large}
.accueil>.ligne {background-image:url('/include/images/fond_vignette.png');background-size: cover; background-repeat: no-repeat; background-position: center;}
.accueil>.ligne>visuel { margin :2%}


.categorie {     display: flex;    flex-direction: row; flex: 1 47%;
    margin: 1%;    flex-wrap: wrap;    align-content: center;    justify-content: flex-start;    align-items: flex-start;}
.categorie>titre { text-align:center ; width:100%;display:block;float:left;padding:1%;font-size:xxx-large}
.categorie.container {  padding: 2%;  margin: 1%;  list-style: none;  display: flex; flex-direction:row; align-items: center;  justify-content: center;
  background-color:#121421 ; flex-wrap:wrap; flex:1 1 100%;}
.categorie>.vignette>visuel { width:auto;height:150px; display:flex;position:relative;float:left;
background-image:url('/include/images/fond_vignette.png');background-size: cover; background-repeat: no-repeat; background-position: center;}
.vignette {    flex:1 1 18%;    display: flex;	margin: 0.5% 1%;  cursor: pointer;
   flex-direction: column;    flex-wrap: nowrap;    align-content: center;    justify-content: center;    align-items: center;
     /* Centers the image */
/*background-attachment: fixed; /* Keeps image fixed during scroll */
    cursor: pointer;background-color:#161B2D; border : 1px solid #161B2D;
   }
	
.vignette:hover { border : 1px solid white}
.vignette>titre {white-space: nowrap;width:100%;padding:2% 0%;text-align:center;font-size:xx-large; font-weight:normal}
.vignette>description {width:100%;padding:2% 0%;display:block;position:relative;float:left;text-align:center;
font-size:large;font-weight:bold;text-align:center;  white-space: nowrap;}
.vignette>visuel { width:auto;height:150px; display:flex;position:relative;float:left;

}
.vignette>visuel>img { max-width:100%; max-height:100%; display:flex  }
 
 
.contact { display:flex;flex-direction:column;width:90%;margin:1% 5%;}
.contact>titre { text-align:center ; width:100%;display:block;float:left;padding:1%;font-size:xxx-large}
.contact.container {  padding: 2%;  margin: 1%;  list-style: none;  display: flex; flex-direction:column; align-items: center;  justify-content: center;
  background-color:#121421 ; flex-wrap:wrap; flex:1 1 100%;}




.ligne {  width: 100%;  margin : 0; display:flex;flex-direction: row;    flex-wrap: nowrap;    align-content: center; justify-content:center;align-items:flex-start}
.ligne>form {flex-direction:row; width:100%; flex-wrap:wrap; justify-content: flex-start;    align-items: normal;}
.ligne>format {display:flex;flex:1 1 25%;flex-direction:row; flex-wrap:wrap; justify-content: flex-start;    align-items: stretch;}
/* .ligne>format>logo { flex:1 1 30%; } */
.ligne>format>logo>img { max-width:100%;height:50px;}
/* .ligne>format>a {flex:1 1 30%;} */
.ligne>visuel { display:flex}
.ligne>visuel>img {  max-height:100px;  }

.navigation {z-index:3000;margin:0;width:100%; background-color:#0D101B;    }
.fixe {position:fixed; }
.ligne>format.nowrap { flex-wrap:nowrap}

.option {flex: 0 46%; display:flex;flex-direction:column;align-items:center;flex-wrap:wrap;justify-content:center;text-align:center;margin: 5px 1%;
background-color:#161B2D;border:0px #EEEEF6 solid;border-radius:10px;padding:1%;}
/* .option:hover { background-color:#646A8A;border:0px #EEEEF6 solid; } */
.option>form {display:none}

.option>prix {white-space: nowrap;width:100%;padding:2% 0%; position:relative;float:left;text-align:center;font-size:larger; font-weight:normal}
.option>titre { text-align:center ; width:100%;display:block;float:left;padding:1%;font-size:larger}
.option>description { padding:2%;font-size:medium; }
.option>visuel { width: 100%; display: flex; height: 100%;align-content:center;justify-content:center;}
.option>visuel>img {  max-height:150px;  }

.argument {flex: 1 1 45%; display:flex;flex-direction:column;align-items:center;margin:1%;background-color:#161B2D;border:1px #EEEEF6 solid;border-radius:10px;padding:1%;cursor:pointer}
.argument:hover { background-color:#646A8A;border:1px #EEEEF6 solid; }
.argument>form {display:none}

.argument>prix {white-space: nowrap;width:100%;padding:2% 0%; position:relative;float:left;text-align:center;font-size:larger; font-weight:normal}
.argument>titre { text-align:center ; width:100%;display:block;float:left;padding:1%;font-size:x-large}
.argument>description { padding:2%;font-size:medium; }
.argument>visuel { width: 100%; display: flex; height: 100%;align-content:center;justify-content:center;}
.argument>visuel>img {  max-height:150px;  }

.miniature {  float:left; flex: 1 1 98%;    display: flex;	margin:2% 0;
	        border: 0px solid black;    flex-direction: row;    flex-wrap: nowrap;
    align-content: left;    align-items: left; overflow:overlay} 
.miniature.container {  margin: 5px; display: contents;}  
.miniature>form { display:none}
.miniature>visuel { flex: 1 1 auto; display:flex;margin:5px;}
.miniature>visuel>img {  max-height:120px; cursor: pointer; }

.description {  float:left; flex: 1 1 98%;    display: flex; margin: 0; padding-left:2%;
	       border: 0px solid black;flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    font-size: larger;
    justify-content: space-around;    overflow:auto; background-color:#121421; } 




.visuel { width:auto; display:flex;}
.visuel>img { max-width:98%; max-height:150px;  }


/*.miniature>description {width:100%;padding:2% 0%;display:block;position:relative;float:left;text-align:center;
font-size:large;font-weight:bold;text-align:center;  white-space: nowrap;background-color:#161B2D;}
*/
.couleur {  float:left; flex: 1 1 100%;    display: flex;	width:48%;    margin: 0.5% 1%;
	    cursor: pointer;    border: 0px solid white;   flex-direction: column-reverse;    flex-wrap: nowrap;
    align-content: center;    justify-content: center;    align-items: left;background-color:#121421; overflow : hidden ; } 
.couleur>titre { text-align:center ; width:100%;display:block;float:left;padding:1%;font-size:xxx-large}	
.couleur>pres { width:100%; display:flex; position:relative;float:left;height: -webkit-fill-available;}

slideshow { display:flex;float:left;position:relative;height:100%;width:100%;margin:0; }
slideshow container {  display:flex;  width:100%}
/*=================================================================
	slide #e7e4e4
=================================================================*/
pres { width:100%; display:flex; 
 	 }
.arg { height:300px; }
.presentation { display:flex;width:100%;margin:0;flex-direction:row; margin:auto; align-items:center;}
.info { display:flex;width:50%;margin:0;flex-direction:column;align-items:center;}
.info>titre { text-align:left ; width:95%;margin:0%;padding:1% 1% 1% 3%;font-size:xxx-large;white-space:nowrap}
.info>prix {width:95%;padding:1% 1% 1% 3%;display:block;position:relative;float:left;margin:0;font-size:xx-large;white-space:nowrap}
.presentation>visuel { width:50%; display: flex;flex-direction:row-reverse; align-items:center;
background-position: right;height:auto;background-image:url('/include/images/fond.png');
background-size: cover;background-repeat: no-repeat;background-position: right;}
.presentation>visuel>img { float:right; max-width:100%; max-height:400px;  }
.presentation>.info>description {width:95%;padding:1% 1% 1% 3%;display:block;position:relative;float:left;margin:0;font-size:x-large;}


slideshow argumentList { display:block;position:absolute;bottom:0;left:50%;transform:translateX(-50%); width:max-content;height:35px}
slideshow slideNavig { display:block;position:relative;float:left;width:50%; }
slideshow slideNavig table { width:100%; }
slideshow argument { cursor:pointer;background-color:white; width:15px;display: block;position:relative;
float:left;margin:15px;border-radius: 50%;height: 15px; content:' ';border:1px solid black; }
/*
slideshow button {  display: block;position:absolute;right:10%;bottom:5%;
   cursor:pointer;  width: 20%;line-height: 45px;  border: 2px solid black;    background: black;    color: #fff;  font-size: 20px;   margin:0 1% 0 1%;   
display:block; text-align:center	; padding:0;border-radius: 10px;}

slideshow button:hover {background-color:black}*/
/*
slideshow .arginit {  display:block;float:left;position:relative;width:100%;background-color:white;border-bottom:gray 1px solid;padding:2% 0 2% 0;height:auto;margin:0 ; text-indent:1%;
font-size:medium;font-weight:bold;cursor:pointer;}

*/

.argover {background-color:#5bc8bf;}
.showit {  display:block;}
.hideit {  display:none;}

slide {  display:flex;width:100%;
padding:0;height:100%;margin:0 ; overflow:hidden;animation:showImageLeft 1s 1; }
@keyframes showImageLeft {  0% {left:-50%;opacity:0}  100% {left:0%; opacity:1} }

/* slide>.info>description>form { display : none } */

/* slideshow slide description { position:relative;float:left; width:66%; margin:1%;padding:1%; font-size:1em;color:black; overflow:hidden;text-overflow:ellipsis; } */
/* slideshow slide titre {width:100%;margin:1%;padding:1%;float:left; font-size: xx-larger;overflow:hidden;text-overflow:sellipsis;} */
/* slideshow slide visuel {  width:30%; height:100%;margin:0;padding:0%;display:block;position:relative;float:right} */
/* slideshow slide visuel img {max-width:100%;max-height:90%; position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);} */
/* slideshow .full { height:95%;width:50%;float:left }	 */
/* slideshow .fullColor { height:95%;width:100%;}	 */

/* slideshow slide titre { text-align:left ; width:65%;display:block;float:left;margin:0%;padding:1% 1% 1% 3%;font-size:xx-large} */
/* slideshow slide visuel { width: 50%; display: block;   position: absolute; right: 0;  height: 100%;} */
/* slideshow slide visuel>img { max-width:98%; max-height:98%; display:block;float:right  } */
/* slideshow slide description {width:40%;padding:1% 1% 1% 3%;display:block;position:relative;float:left;margin:0; */
/* font-size:large;} */



/*.download { display:flex;flex-direction:row;width:34%;margin:1% ; max-height:200px;}
.miniature.container {  margin: 5px; display: contents;} 

*/

.picto { display:flex;flex-direction:row;width:100%;margin:1% 0%;max-height:200px;}

.video { display:flex;flex-direction:column;width:auto;margin:1%;flex: 1 1 100%;}
.video>titre { text-align:center ; width:100%;display:block;float:left;padding:1%;font-size:xx-large}
.video>iframe { border : 0px solid white ;height:50vh;}

vehicule {flex:1 1 100%; justify-content: center; align-items:stretch;  display:flex;flex-direction:row;flex-wrap:wrap; width:100% ; margin:1% 0%;background-color : #161B2D; }
vehicule>form { display:none}
vehicule>description {flex:1 1 31%;width:auto; flex-wrap: wrap;padding:0%;margin:1%;   display:flex;flex-direction:column;}

vehicule>description>.row { width:100%; align-items: baseline;}
vehicule>description>.row>label {padding:5px;font-weight:bold; font-size:medium;   display:flex;flex-direction: column;    width: 30%;    font-size: larger;    align-items: flex-end;}

vehicule>description>.row>champ { padding:5px;width:70%;font-size:small; flex-wrap:wrap;align-items: flex-start;align-content:flex-start;justify-content:flex-end}

vehicule>description>visuel{ width:47%; margin:0;}
vehicule>description>visuel>img { max-width:100%; max-height:100%;   }
vehicule>visuel{ width:auto; margin:0;flex:1 1 31%;}
vehicule>visuel>img { max-width:100%; max-height:200px; margin:auto;display:flex  }

vehicule>total { padding:0%;width:auto;margin:1%;display:flex; flex-direction:column; flex:1 1 31%;}
vehicule>total>table { white-space:nowrap}
vehicule>total>.row { width:80%;margin:auto}
vehicule>total>.row>label {font-weight:bold;    display:flex;flex-direction: column;    width: 50%;    font-size: larger;    align-items: flex-end;}
vehicule>total>.row>champ { width:50%;display:flex; flex-wrap:nowrap;align-items: flex-start;align-content:flex-end;justify-content:flex-end}

vehicule>total>info { font-size:small; width:100%;margin:5%;}

vehicule>bilan { padding:0%;width:auto;margin:1%;flex:1 1 48%;}

@media only screen and (max-width: 1200px)
{
	/* .bt, .bt:visited, .bt[type=submit] { font-size:medium} */
	.menu.full>a { font-size:larger }
	.ligne>format.nowrap { flex-wrap:wrap;}
	.contact>titre {font-size:xx-large}
	.accueil>titre {font-size:xx-large}
}

@media only screen and (max-width: 1000px)
{
	/* .bt, .bt:visited, .bt[type=submit] { font-size:small} */
	
}

@media only screen and (max-width: 900px)
{
	/* .bt, .bt:visited, .bt[type=submit] { font-size:small} */
	
	.navigation>logo { width:150px; }
	.menu.full>a { font-size:large }
	.categorie>titre { font-size:xx-large}
	.bt.large { display:none}
	.bt.small { display:flex;font-size:larger; float:right}
	
	/* .presentation>visuel { background-size:cover} */
	/* .presentation>visuel>img { margin-bottom:8%} */
	
	/* vehicule {flex-direction:column}	 */
	/* vehicule>visuel {width:40%} */
	vehicule>description {width:57%}
	/* vehicule>total {width:100%} */
	vehicule>bilan {flex:none}
	.description { width:98%;}
	
	
	
	.info { width:97%}
	.info>titre {font-size:x-large} 
	
	.presentation>visuel { width:100%;margin:0}
	/* .presentation>visuel>img {max-width:100%;max-height:100% }  */
	.presentation>visuel>img { height:250px}
	.presentation>.info>description {width:98%;font-size:large}
	form { width:90%}
	
}

@media only screen and (max-width: 700px)
{
	.presentation { flex-direction:column}
	.ligne {flex-wrap:wrap}
	.accueil {flex:1 97%}
	.accueil>.ligne {flex-wrap:nowrap}
	.option {flex: 0 96%; }
}

@media only screen and (max-width: 600px)
{
	.navigation>logo { width:auto; }
	.categorie>titre { font-size:x-large}
	.argument { flex :1 1 90%}
	.avantage>description { font-size:small}
	
	
	.ligne>format { justify-content:center}
	
	/* slideshow container { min-height : 450px } */
	.presentation>visuel>img { height:250px}
	
	vehicule>visuel {flex:1 1 100%}
	vehicule>description {flex:1 1 100%}
	vehicule>total {flex:1 1 96%;padding:2%}
	vehicule>bilan {flex:1 1 96%;padding:2%}
	
}

@media only screen and (max-width: 500px)
{
	/* .ligne>format>logo { flex:1 1 100%} */
	/* .ligne>format>logo>img { height:75px; margin:auto; display:flex} */
	slideshow container { min-height : 400px }
	/* .categorie>titre { font-size:large} */
	/* .presentation>visuel { width:70%;margin:0 auto} */
	pres { background-size:cover}
	.presentation>.info>prix { font-size:larger }
	.presentation>.info>description { font-size:large }
	.presentation>visuel>img { height:200px}
	.contact { width:unset;margin:0}
	form { width:100%}
	form label { width:50%}
	.vignette { flex: 1 1 47%}
}

@media only screen and (max-width: 400px)
{
	slideshow container { min-height : 350px }
	/* .categorie>titre { font-size:large} */
	/* .presentation>visuel { width:80%;margin:0 auto} */
	
	
	
}


.fond { width:100%; display:block; position:relative;float:left;overflow:hidden;margin:0; background-color:transparent ;
}

	
.bt.phone, .bt:visited.phone, .bt[type=submit].phone {
    font-size: 1.3em;
    background: transparent;
    color: #85e88e !important;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    font-variant-numeric: lining-nums;
	float:right;
}	
.bt.lien, .bt.lien, .bt[type=submit].lien {
    font-size: 1.3em;
    background: transparent;
    /* color: #85e88e !important; */
	color:black;
    font-weight: bold;
    display: inline-flex;
	position:relative;
	float:left;
    align-items: center;
    font-variant-numeric: lining-nums;
	margin:2%;
	border: 2px solid grey;
}

.center { text-align:center }

.maxsize { display : block; width:calc(100% - 10px);text-overflow: ellipsis;    white-space: nowrap;    overflow: hidden; font-size: 0.8em;    padding: 5px; line-height:normal;margin :1px 0 1px 0;}
/*
.bt.lien:after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 2px solid grey;
    content: "";
    clip-path: polygon(0 0, 100% 0, 100% 20%, 70% 20%, 70% 80%, 100% 80%, 100% 100%, 0 100%);
    transition: all ease 0.4s;
}
*/
/* modification le 04/2025 */

.video-responsive { overflow:hidden; padding-bottom:26%; position:relative; height:0;}
.video-responsive.full { overflow:hidden; padding-bottom:56%; position:relative; height:0;}
.video-responsive iframe {left:0; top:0; height:100%;width:100%;position:absolute;}

.moit {float:unset;display: inline-block;	margin:2%; width:46%}
.left { float:left}
.retour { clear:both }


/*
.field.argument {flex-grow : 0;display:inline-block; width:auto ; margin:1%;padding:1%; cursor:pointer ;  border: 2px solid grey;background-color:white}
.field.argument:hover { border: 2px solid #85e88e; }
.field.argument>titre { position:relative;float:left;text-align:center;font-size:1.5em;font-weight:bold; }
.field.argument>description { display:none}
.field.argument>visuel { display:none}
.field.argument>visuel>img { display:none}
 
.field.argument.view {flex-grow : 0;display:inline-block; width:90% ; margin:1% 5% 1% 5%; cursor:pointer ;  border: 2px solid grey;}
.field.argument.view>description { width:69%;display:block;position:relative;float:left;text-align:left;font-size:1.5em;font-weight:bold; padding:0; margin:0.5%}
.field.argument.view>visuel { width:30%; display:block;position:relative;float:left;background-color:white}
.field.argument.view>visuel>img { max-width:100%; max-height:98%; display:block;position:relative;float:none;margin:auto  }

.field.mosaique {flex-grow : 1;display:flex; width:98% ; margin:1%; cursor:pointer ;  }
.field.mosaique>visuel { width:100%; display:block;position:relative;float:left;background-color:white}
.field.mosaique>visuel>img { max-width:100%; max-height:98%; display:block;position:relative;float:none;margin:auto  }
*/

.footer {margin:2% 0 0 0;width:100%;float:left;display: block;position: relative;  background-color:black;color:white; padding:0%;}
.footer>info { display:block;position:relative;float:left; margin:1%; width:31%;}
.footer>info>titre { font-size:1.3em;}
.footer>info>p>a { color:white!important}


 
/* ancien style */ 
.actionLigne {position:relative; float:right;display: inline-block;	margin-top:2%; width:60%}



.alignRight { float:right!important}
.alignCenter { float:none!important; margin:auto}

.liste {display:block; position:relative;float:left;margin:1% 0% 1% 0%; width:100%}
/*.liste>titre {     font-size: 2em;   font-weight: bold;    font-style: italic;display:block; position:relative;float:left;width:100%; margin-top:2%;margin-bottom:2%}
.liste>description {  width:60%;margin:1% 5% 1% 5%; display:block;position:relative;float:left;font-size: 1.3em;  } 
.liste>visuel {  width:30%; margin:0%;display:block;position:relative;float:left;}
.liste>visuel>img { max-width:100%;max-height:100%; display:block;margin:auto; }
*/
.liste>ul {
    display: block;
	padding:0;margin:0
}
.liste>ul>li {
    flex: 1 1 auto;
    width: 100%;
    
    position: relative;
}


.field.marque {cursor:pointer;display:block;position:relative;float:left;
width:26%;  margin:2%; padding:2%; background-color:white; border : 2px solid grey}
/*.marque:hover{ box-shadow: 8px 8px 8px 0px black;}*/
/* .marque>visuel { height:100%; width:30%; margin:0;display:block;position:absolute;left:0;bottom:0;} */
.field.marque>visuel { height:200px; width:100%; margin:0;display:block;position:relative;float:left;}
.field.marque>visuel>img { max-width:100%; max-height:98%; display:block;float:none;margin:auto  }
.field.marque>description>p { margin:0; }
.field.marque>titre {  float:left;position:relative;display:block;width:100%; margin:1% 0 1% 0;font-size: 3em;
    font-weight: bold;
    font-style: italic;}
.field.marque>description {  width:90%;margin:1% 5% 1% 5%; display:block;position:relative;float:left;font-size: 2em;  } 



.catalog { display:block;margin:1%!important; float:left;width:calc( 98% - 340px);}
.catalog.titre { width:100%!important ; font-size:1.2em!important; margin : 0!important;}


.field.catalog {flex-grow : 0;display:inline-block; width:45% ; margin:0; padding:0;  border: 1px solid black;background-color:white}
.field.catalog>visuel { height:100px; width:25%; margin:1%;display:block;position:relative;float:left;background-color:white}
.field.catalog>visuel>img { max-width:100%; max-height:98%; display:block;position:relative;float:none;margin:auto  }
.field.catalog>titre { position:relative;float:left;width:50%;text-align:left;font-size:1em;font-weight:bold; padding:2%; margin:0}
.field.catalog>description { font-size:0.7em; width:50%;display:block;position:relative;float:left;padding:2%; margin:0}
.field.catalog>addPanier { width:15%;display:block;position:relative;float:right;padding:1%; margin:1%}
.field.catalog>addPanier>.bt { padding:5px;width:calc( 100% - 12px );text-align:center;display:block }
.field.catalog>addPanier>form input[type="number"] { padding:5px;width:calc( 100% - 12px );text-align:center;display:block }

.field.catalog.edition {flex-grow : 0;display:inline-block; width:96% ; margin:1%; padding:1%; border: 2px solid grey; }
.field.catalog.edition>visuel {  width:25%; margin:1%;display:block;position:relative;float:left;background-color:white}


 
 .important { float:left;position:relative;display:block;width:100%; margin:2% 0 2% 0;font-size: 2em;
    font-weight: bold;
    font-style: italic;
 }






   
/*
select.classic:focus {
  background-image:
    linear-gradient(45deg, white 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, white 50%),
    linear-gradient(to right, gray, gray);
  background-position:
    calc(100% - 15px) 1em,
    calc(100% - 20px) 1em,
    100% 0;
  background-size:
    5px 5px,
    5px 5px,
    2.5em 2.5em;
  background-repeat: no-repeat;
  border-color: grey;
  outline: 0;
}
*/



*::selection {
    background: #85e88e;
    color: #fff;
    text-shadow: none !important;
}
form ul {
    display: block;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    flex-wrap: wrap;
}
form li {
    flex: 1 1 auto;
    width: 100%;
    margin-bottom: 10px;
    margin: 4px 0;
    position: relative;
}



form .field {
    display: flex;
    flex-direction: column-reverse;
}
form .field label {
    position: absolute;
    top: 0;
    left: 0.5rem;
    /* transform: translateY(-50%); */
    /* color: rgba(78,78,78,0.7); */
    padding: 0 0.5rem;
    width: max-content;
    pointer-events: none;
    z-index: 21;
    transition: 0.15s ease;
}

.select {display:block; position:relative;float:left;margin:1% 0% 1% 0%; width:100%}
.select>ul {
    display: block;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    flex-wrap: wrap;
}
.select>ul>li {
    flex: 1 1 auto;
    width: 100%;
    margin-bottom: 10px;
    margin: 4px 0;
    position: relative;
}

.select>form>ul {
    display: block;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    flex-wrap: wrap;
}
.select>form>ul>li {
    flex: 1 1 auto;
    width: 100%;
    margin-bottom: 10px;
    margin: 4px 0;
    position: relative;
}

/* .formulaire { background-color : white ; display:block;position:relative;float:left; width:98% ; margin:1% 0% 1% 0%;} */
.formulaire>ul {
    display: block;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    flex-wrap: wrap;
	
}
.formulaire>ul>li {
    flex: 1 1 auto;
    width: 100%;
    margin-bottom: 10px;
    margin: 4px 0;
    position: relative;
}
.formulaire>form>ul {
    display: block;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    flex-wrap: wrap;
}
.formulaire>form>ul>li {
    flex: 1 1 auto;
    width: 100%;
    margin-bottom: 10px;
    margin: 4px 0;
    position: relative;
}

.champ {margin:5px;text-align:left;width:auto;   position:relative; float:left;display: inline-flex;flex: 1 1 auto;
    }
	/* flex-direction: row-reverse;flex-flow:column */
.champ>img { max-width:100%; max-height:98%; display:block;float:none;margin:auto  }
.champ.action	{ width:30%;border:1px solid black; padding:0.5rem}
.champ.full	{ width:96%;margin:1%; display:flex; background-color:white;float:left;}
.champ.textarea	{ min-width : 40%}
.champ.moit	{ width:48%; }
.champ.tabTitre { font-weight:bold; }
.champ.tabValeur {margin:0; font-weight:bold;font-size:1.1em; text-align :right;display:block}
.champ.block { display:block}
.champ.tier	{ width:31%;margin:1%; display:inline-block; background-color:white; }
.champ.tier2	{ width:62%;margin:0; display:inline-block; background-color:white;}
.champ.number	{ width:80px;}
.champ label {
    position: absolute;
    top: 0;
    left: 0.5rem;
    /* transform: translateY(-50%); */
    /* color: rgba(78,78,78,0.7); */
    padding: 0 0.5rem;
    width: max-content;
    pointer-events: none;
    z-index: 21;
    transition: 0.15s ease;
	font-weight:bold;
}	

.champ input[type="text"], .champ input[type="submit"]:not(.bt),.champ input[type="date"],  .champ select, .champ input[type="password"], .champ input[type="email"] {
    font-size: 0.9375rem;
    border: none;
    color: #4e4e4e !important;
	background-color : #e8f0fe ;
    border-bottom: 1px solid rgba(78,78,78,0.5);
    padding: 1rem 0 0 0.7rem;
    /* background: transparent; */
    outline: 0;
    transition: box-shadow 0.3s;
	width:calc(100% - 1rem);
}



.champ input[type="number"] { text-align :right;
 font-size: 0.9375rem;
    border: none;
    color: #4e4e4e !important;
	background-color : #e8f0fe ;
    border-bottom: 1px solid rgba(78,78,78,0.5);
       padding: 1rem 0 0 0.7rem;
    /* background: transparent; */
    outline: 0;
    transition: box-shadow 0.3s;}
/* .champ select {padding: 1.1rem 1rem;} */
/* .champ textarea { width:400px} */
/* .champ select { max-width:200px} */
/* .champ {margin:0;text-align:left;width:100%;float:left;   position:relative;}	 */
/* form .titre { font-size: 1.3em;} */

/*form input[type="text"], form input[type="submit"]:not(.bt), form textarea, form select, form input[type="password"], form input[type="email"] {
    font-size: 0.9375rem;
    border: none;
    color: #4e4e4e !important;
	background-color : #e8f0fe ;
    border-bottom: 1px solid rgba(78,78,78,0.5);
    padding: 0.8rem 1rem;
  
    outline: 0;
    transition: box-shadow 0.3s;
}
*/
/*form input[type="number"] { text-align :right;
 font-size: 0.9375rem;
    border: none;
    color: #4e4e4e !important;
	background-color : #e8f0fe ;
    border-bottom: 1px solid rgba(78,78,78,0.5);
    padding: 0.8rem 1rem;
  
    outline: 0;
    transition: box-shadow 0.3s;}*/


form input[type="text"]:not(select), form input[type="submit"]:not(.bt):not(select), form textarea:not(select), form select:not(select), form input[type="password"]:not(select), form input[type="email"]:not(select) {
    /* padding: 1.5rem 1rem 0.8rem; */
}

listPage { display:block;margin:1% auto 1% auto;position:relative;float:none;clear:both;width:100%}
listPage pageGauche {display:block; position:relative;float:left;width:30%}
listPage pageCentre {display:block; position:relative;float:left;width:40%}
listPage pageDroite {display:block; position:relative;float:left;width:30%}
resultat select {	padding: 0.8rem 1rem; 
	width: 100%; 	height: auto;	 		letter-spacing:1px;	border-radius: 0;	overflow: hidden;	text-overflow: ellipsis;
        color:black;    	outline:none;       cursor:pointer;		 font-family:arial;font-weight:bold;text-align:center
}


@media only screen and (max-width: 1200px)
{
	
	.catalog { width:calc( 98% - 200px);}
	/* .field.catalog {width:100% ; } */
	/* .field.catalog>visuel { height:100px; width:25%; margin:1%;display:block;position:relative;float:left;background-color:white} */
	/* .field.catalog>visuel>img { max-width:100%; max-height:98%; display:block;position:relative;float:none;margin:auto  } */
	/* .field.catalog>titre { width:40%;}  */
	/* .field.catalog>description { width:40%;} */
	/* .field.catalog>addPanier { width:20%;display:block;position:relative;float:right;padding:1%; margin:1%} */
	/* .field.catalog>addPanier>.bt { padding:5px;width:calc( 100% - 12px );text-align:center;display:block } */
	/* .field.catalog>addPanier>form input[type="number"] { padding:5px;width:calc( 100% - 12px );text-align:center;display:block } */

}

@media only screen and (max-width: 900px)
{
	
	.catalog { width:calc( 98% - 150px ); }
	/* .menu.categorie { display : block } */
	.field.catalog { width:100%}
}




.field.univers {flex-grow : 1;display:inline-block; height:150px; width:20% ; margin:1%;padding:1%;background-color : white; cursor:pointer ;  border: 2px solid black}
.field.univers:hover {background-color : transparent; border: 2px solid rgba(133,232,142,0.99); }
.field.univers.checked {background-color : transparent; border: 2px solid rgba(133,232,142,0.99); }
.field.univers>titre { text-align:center;    font-size: 1em;   font-weight: bold;    font-style: italic;display:block; position:relative;float:left;width:100%; }
.field.univers>description {  width:44%;margin:1% 5% 1% 5%; display:block;position:relative;float:left;font-size: 1.3em;  } 
.field.univers>visuel {  width:100%; height:80%;margin:0%;display:block;position:relative;float:left;overflow:hidden}
.field.univers>visuel>img { height:100%; display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:auto; }



.field.vignette {flex-grow : 1;display:block; width:20% ; margin:1%;padding:1%;background-color : #e7e4e4; cursor:pointer ;  border: 2px solid transparent}
.field.vignette:hover {background-color : transparent; border: 2px solid rgba(133,232,142,0.99); }
.field.vignette.checked {background-color : transparent; border: 2px solid rgba(133,232,142,0.99); }
.field.vignette>titre { text-align:center;    font-size: 1.5em;   font-weight: bold;    font-style: italic;display:block; position:relative;float:left;width:100%; }
.field.vignette>description {  width:44%;margin:1% 5% 1% 5%; display:block;position:relative;float:left;font-size: 1.3em;  } 
.field.vignette>visuel {  width:100%; height:80%;margin:0%;display:block;position:relative;float:left;}
.field.vignette>visuel>img { max-width:100%;max-height:150px; display:block;margin:auto; }


.field.couleur {flex-grow : 0;display:block; width:22% ; margin:1%;background-color : #e7e4e4; cursor:pointer ;  border: 2px solid transparent}
.field.couleur:hover {background-color : transparent; border: 2px solid rgba(133,232,142,0.99); }
.field.couleur.checked {background-color : transparent; border: 2px solid rgba(133,232,142,0.99); }
.field.couleur>titre { position:absolute;left:0;top:1%;width:100%;text-align:left}
.field.couleur>visuel { height:100%; width:100%; margin:0;display:block;position:relative;float:left;}
.field.couleur>visuel>img { max-width:100%; max-height:98%; display:block;float:left  }

.field.option {flex-grow : 0;display:block; width:47% ; margin:1%;background-color : #e7e4e4; cursor:pointer ;  border: 2px solid transparent;}
.field.option>titre { position:relative;float:left;width:96%;text-align:left;font-size:1.5em;font-weight:bold; padding:2%}
.field.option .liste>description { font-size:1em}
.field.option:hover {background-color : transparent; border: 2px solid rgba(133,232,142,0.99); }
.field.option.checked {background-color : transparent; border: 2px solid rgba(133,232,142,0.99); }
.field.option>visuel { height:auto; width:30%; margin:0;display:block;position:relative;float:left;}
.field.option>visuel>img { max-width:100%; max-height:98%; display:block;float:left  }
.field.option>description {  width:65%;margin:1% 0% 1% 5%; display:block;position:relative;float:left;font-size: 1.3em;  } 
.check {  height: 25px;  width: 25px;  background-color: white;  border:1px solid black;    display: block; 
 position:absolute;left:2%;top:50%;transform:translateY(-50%);  }
.aligneRadio { margin:5%}
.field.option .alignCheck{ width:80%;display:block;position:relative;float:right; font-size:1em;font-weight:bold;padding:2%}






.field.actualite {flex-grow : 0;display:inline-block; width:96% ; margin:2%;background-color : white;   border: 2px solid grey;}
.field.actualite>titre { position:relative;float:left;width:96%;text-align:left;font-size:1.5em;font-weight:bold; padding:2%}
.field.actualite>description { font-size:1em; width:60%;display:block;position:relative;float:left;margin:2%}
.field.actualite>visuel { height:100px; width:30%; margin:2%;display:block;position:relative;float:left;background-color:white}
.field.actualite>visuel>img { max-width:100%; max-height:98%; display:block;position:relative;float:none;margin:auto  }

.field.devis {flex-grow : 0;display:inline-flex; width:90% ; margin:1%; padding:1%;  border: 2px solid grey;}
.field.devis>doc { position:relative;float:left;width:30%;text-align:center;font-size:1em;font-weight:bold; padding:0%; margin:1% ;     white-space: nowrap;
}
.field.devis>date { position:relative;float:left;width:30%;text-align:center;font-size:1em;font-weight:bold; padding:0%; margin:1%  ;  white-space: nowrap;
}
.field.devis>statut { position:relative;float:left;width:30%;text-align:center;font-size:1em;font-weight:bold; padding:0%; margin:1%;    white-space: nowrap;
}
.field.devis>action { position:relative;float:left;width:30%;text-align:center;font-size:1em;font-weight:bold; padding:0%; margin:1%;    white-space: nowrap;
}

.field.action {flex-grow : 0;display:inline-table; width:45% ; margin:1%; padding:1%;  border: 2px solid grey;}
.field.action>description { position:relative;float:left;width:98%;text-align:center;font-size:1em;font-weight:bold; padding:0%; margin:1% ;     }
.field.action .bt { margin: auto;    float: none;    display: table;}

form .inputErreur { background-color : #dbb4b4!important }











/*
formulaire {position:relative;float:left;width:90%;margin:5px 5% 5px 5%;padding:1%; background-color:#e5e5e559} /* #e2dfdc*/
/*.champ50 {text-align:left;width:44%;margin: 1%;min-height:150px;padding:2%; float:left;background-color : #e7e4e4;  }


.espaceTablo  {width:100%;height:5vh;position:relative;float:left;display:block;border:0px solid red;clear:both}

@media only screen and (min-width: 480px)
{
	form li.input--contact:nth-of-type(even) {
		margin-left: 10px;
		width: calc(50% - 10px);
	}
	
	form li.input--contact {
    width: 50%;
    margin: 0 0 10px 0;
	}
}

@media screen and (max-width:1100px) 
{
	.marque>description {font-size: 1.3em;}
	.bt.lien, .bt.lien, .bt[type=submit].lien {padding:5px; font-size:1em}
	/*section  { width:96%;margin:0 2% 0 2%;}*/
/*	.field.marque>titre { font-size:2.5em }
	.field.marque>description { font-size:1.5em; width:100%; margin:2% 0 2% 0; }
	.field.liste {width:44%}
}

@media screen and (max-width:900px) 
{
	slideshow container { margin:0;width:100%}
	.menu { display:none}
	
	.bt.mobile { display:block }	
	.bt.large { display:none }
	
	.important { width:100%;font-size:1.5em}
	
	/*.titre { font-size:2.5em}*/
	/*.marque>titre { font-size:2.5em}
	.marque>visuel { width:70%; margin:0 15% 0 15%}
	.marque>description { width:100%; margin:2% 0 2% 0 } 
	/* .liste>titre { font-size:2.5em} */
	/* .liste>visuel { width:70%; margin:0 15% 0 15%} */
	/* .liste>description { width:100%; margin:2% 0 2% 0 }  */
	/* .visuel { width:70%; margin:0 15% 0 15%} */
	/*.formulaire { width:100%;margin:0}
	.champ50 { width:98%}
	form ul { padding:1px }
	.select>ul { padding:1px}
	.field.couleur { width:30%}
	.field.option { width:97%}
	.field.vehicule>description {  width:30%;}
	.field.vehicule>total {width:29%;}
	.field.vehicule>bilan {width:90%;}
	
	.field.marque {width:90%;}
	.field.marque>visuel {width:40%;}
	.field.marque>description {width:60%;}
	
	
	slideshow slide description { font-size:1em;color:black;  }
	slideshow slide titre {font-size: 1.2em;font-weight:bold}
	slideshow slide visuel {}
	
	.field.actualite>description { font-size:1em; width:96%;display:block;position:relative;float:left;margin:2%}
	.field.actualite>visuel { height:100px; width:96%; margin:2%;display:block;position:relative;float:left;background-color:white}
	
	.moit { width:100%}
	
}

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


.field.vehicule>total {width:33%;}
.field.univers { width:96%}


}
@media screen and (max-width:700px) 
{
	/*.field.liste { width:95%}*/
	/*
	slideshow argument { margin:5px 2px 5px 2px}
	.bt.phone { display:none }
	.field.couleur { width:45%}
	.field.vignette { width:45%}
	.field.action { width:90%}
	
	.bt.actionBig, .bt.actionBig:visited, .bt[type=submit].actionBig { width:80%; margin:2% 10% 2% 10%; font-size:1.2em}
}

@media screen and (max-width:650px) 
{
	.logo { height:60px; float:none; margin:auto}
	.logo>img {float:none; margin:auto; display:block}
	.field.vehicule>visuel {width:40%;}
	.field.vehicule>description {width:55%;}
	.field.vehicule>total {width:90%;}
	
	/* .field.actualite>titre { position:relative;float:left;width:96%;text-align:left;font-size:1.5em;font-weight:bold; padding:2%} */
	/*
	
}

@media screen and (max-width:500px) 
{
	.bt.mobile { display:none }
	.bt.small { display:block } 
	.bt, .bt:visited, .bt[type=submit] { padding:5px;}
	/*.titre { font-size:2em}*/
	/*.marque>titre { font-size:2em}
	.liste>titre { font-size:1.5em}
	li {    flex: 1 1 auto;    width: 100%;    margin-bottom: 10px;    margin: 4px 0;    position: relative;}
	.footer>info { width:80%; margin:2% 10% 2% 10%}
	.field.option { margin:2%}
	.field.couleur { width:95%}
	.field.vignette { width:95%}
	
	.field.vehicule>visuel {width:90%;margin:1% 5% 1% 5%;}
	.field.vehicule>description {width:90%;margin:1% 5% 1% 5%;font-size:1em;}
	
	.field.marque>visuel {width:90%;}
	.field.marque>description {width:90%;}
	
	
	
	/* ajout nouvelle version 3.0 */
	/* .video-responsive { padding-bottom:57%} */
	/* .field.liste {width:100%} */
	/* .field.liste>visuel { width:100%; margin:0} */
	/* .field.liste>description { width:90%; margin:0 5% 0 5% } */
	/*.bt.actionBig, .bt.actionBig:visited {  width:90%; margin:5%}
	
	
	slideshow slide description { position:relative;float:left; width:98%; margin:1%; font-size:1em;color:black;  }
	slideshow slide titre {font-size: 1.2em;font-weight:bold;width:100%}
	slideshow slide visuel { width:90%; margin:1%; height:180px}
}

/*====================================
	popup et message
========================================*/

popup {
 display: table;
  padding-top:2%;
  z-index:4000;	
 
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

/* Display the modal when targeted */
popup:target {  display: table;  position: fixed;  z-index:10000;}

popup lineAction {width:75%;float:none;margin:2% auto 2% auto;}
popup img {max-width:100%;height:100px}
popup table { width:90%;margin:5% auto 5% auto;border-collapse: collapse; }
/*popup table tr:nth-child(even) {background-color: #CCC}
popup table tr:nth-child(odd) {background-color: #FFF}
*/
/*
popup table tr {border: 1px solid black }
popup table td { width:50%;padding:1%;text-align:center}
*/
popup th { background-color:#565252;text-transform:uppercase;color:white;font-family:arial;text-align:center }
popup tr { font-size:larger;height:auto  }
popup td {text-align:left; }

/*popup img { height:50px;max-width:100%}
/*popup button 	{cursor:pointer; display:block;position:relative;float:left;   width: 51px;height: 45px;  border: 1px solid #b3c618;    background: #b3c618;    color: #fff;  font-size: 20px;   margin: 0;    padding: 0;	}


/* The modal box */


.modal-edit { 
	 margin: 1% 5% 1% 5%  ;
  background-color: white;
  position: fixed;
  padding: 1%;
  outline: 0;
  border: 1px #777 solid;
  text-align: justify;
  width: 90%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	height:90%; 
	overflow:auto;
  /* Add animation */
  -webkit-animation-name: example; /* Chrome, Safari, Opera */
  -webkit-animation-duration: 0.5s; /* Chrome, Safari, Opera */
  animation-name: example;
  animation-duration: 0.5s;
}





.message { font-family:verdana;font-weight:bold; font-size: medium ; color: black ;  
text-align:center; width:75%;margin:auto;display:block;position:relative;line-height:40px;vertical-align:middle;clear:both} 

.erreur {font-family:verdana; font-weight:bold; font-size: large ; color: red ;  
text-align:center; width:100%;margin:auto;display:block;position:relative;float:left;padding:2%;} 
	
	
zoom img {top:50%;left:50%;transform:translate(-50%,-50%);display:block;
position:absolute;max-height:100%;padding:1%}
zoom {
    width: 100%;
    height: 100%;
	 overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    padding: 0px 0;
    margin: 0;
    box-sizing: border-box;
    text-align: center;
    background: black;
    z-index: 90000;
}
zoom photo { max-width:90%; height:90%;position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}
zoom .close {
						position: absolute;
						left: 50%;
						top: 20px;
						margin-left: -50px;
						width: 150px;
						background: rgba(250, 250, 250, .9);
						color: #333;
						border-radius: 15px;
						text-decoration: none;
						padding: 6px 6px 6px 25px;
						-webkit-box-sizing: border-box;
						-moz-box-sizing: border-box;
						box-sizing: border-box;
						text-transform: uppercase;
						-webkit-transition: .5s;
						transition: .5s;
						 z-index: 100000;
					}

zoom .close:before {
		content: "X";
		color: #fff;
		font-family: Arial;
		font-weight: bold;
		position: absolute;
		padding-top: 3px;
		top: 3px;
		left: 5px;
		width: 24px;
		height: 21px;
		background: #666;
		border-radius: 50%;
	}

zoom .close:hover {
	background: #fff;
}	

cadreVideo {display:block;position:relative;float:left;width:90% ; ; margin:1% 5% 1% 5%;}  
cadreVideo titre { margin:0;position:relative; float:left ; width:100%;  text-align:center; vertical-align:middle; font-weight:bold; 
background-color:transparent;color:black;font-size:small}
cadreVideo titre:after { border-bottom:0px solid black}
.videoMax { display:block;width:100%;height:50vh}
photo { display:block; position:relative; float:left; width:80%; height:50vh;margin:1% 10% 1% 10%; overflow:hidden}
/* photo img { height:100%;  display:block; position:relative; float:left; margin:auto;box-shadow: 0 0 5px 1px gray;} */
photo img { height:100%;  display:block; position:absolute; top:50%;left:50%; transform:translate(-50%,-50%);box-shadow: 0 0 5px 1px gray;}

@media screen and (max-width:900px) {
	photo { width:98%; margin:1%}
}

@media screen and (max-width:800px) {
/* cadreVideo { height:40vh} */
}

@media screen and (max-width:430px) {
	/* cadreVideo { height:30vh} */
	zoom photo { max-width:90%; height:50%; position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}
	
}