html {   }
body {letter-spacing:1px;  margin:auto;padding:0; color:black;background-color:#fff ; font-family: "condor",sans-serif;}
/* body { letter-spacing:1px;  margin:0;padding:0; font-family:verdana!important;color:black;background-color:#fdf9f3 } */

/* menu navigation */
a {
color:black;text-decoration:none; 
}


a:link {

}

a:visited {

}

a:focus {

}

a:hover { font-weight:bold

}

a:active {

}

.navigation {z-index:3000;margin:0 auto;width:100%; display:block;position:fixed;float:left; border-bottom: 1px solid black;
box-shadow: 0 0 5px 1px gray;     padding-top: 10px; background-color:#FFF;
    padding-bottom: 10px;}

/* navigation blockMenu {position:relative;float:left;display:block; width:100%; margin:0;} */
/*background-image:linear-gradient(to bottom, #aca39a , rgba(255,0,0,0) );*/

.fixe {position:fixed; }
.logo { position:relative;display:block;height:70px; float:left;}
/* .logo { position:absolute;display:block;width:30%;height:100px; left:50%;top:0; transform:translateX(-50%);} */
.logo img { max-height:90%; max-width:100%; position:relative;}

contenu {margin:auto; width:100%;display: block;position: relative; float:left; background-image:url('/include/images/fond_site.jpg');
background-size:contain;background-repeat:no-repeat; background-color : #f6f6f8;
 overflow:auto; }  
section { width:100%;display:block;position:relative;}
/*
float:none;margin:auto ;clear:both; 
} */ 

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

.menuPhone {  display:block; position:fixed;padding-top:2%;
  z-index:4000;	
 background : white;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; }
.menuPhone>ul {	position:relative;
    list-style: none;
    list-style-image: none;
	    display: block;
    display: grid;
    /* display: -webkit-flex; */
    /* display: -moz-flex; */
    justify-content: center;
    flex-wrap: wrap;
    height: auto;
    width: auto;
    max-width: none;
    padding: 0;
    overflow-y: inherit;
 }
.menuPhone>ul>li {
	position: relative;
    display: block;
    z-index: 1;
    text-align: center;
        margin-top: 0;
    margin-left: 0px;
    border-bottom: 1px solid #f6f6f6;
	    flex: 1 1 auto;
    border: none;
    white-space: nowrap;
	font-size:2em;
	padding:5% 0 5% 0;
}

.menu { color:#f6f6f6 ; display:block;float:left;position:relative;width:100%; border-top :1px solid black}



.menu>ul {
	position:relative;
    list-style: none;
    list-style-image: none;
	    display: block;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    justify-content: center;
    flex-wrap: wrap;
    height: auto;
    width: auto;
    max-width: none;
    padding: 0;
    overflow-y: inherit;
}

.menu>ul>li {
    position: relative;
    display: block;
    z-index: 1;
    text-align: left;
        margin-top: 0;
    margin-left: 20px;
    border-bottom: 1px solid #f6f6f6;
	    flex: 1 1 auto;
    border: none;
    white-space: nowrap;
}

.bt.small { display:none }	
.bt.mobile { display:none }	
.bt.large { display:block }

.bt, .bt:visited, .bt[type=submit] {
    float: left;
    padding: 13.33333px 20px;
	margin:5px;
    display: inline-flex;
    white-space: nowrap;
    align-items: center;
    cursor: pointer;
    background-repeat: no-repeat;
    line-height: 1.56em;
    appearance: none;
    outline: none;
    color: black;
    
    font-family: "bio-sans",sans-serif;
    font-size: 16px;
    letter-spacing: 1px;
    transition: all 100ms 0ms ease-in;
    background-color: #85e88e;
	border:1px solid black; 
	}

.bt:hover { background-color:white;border:1px solid #85e88e;  }	
	
.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;
}

.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 }
.titre { float:left;position:relative;display:block;width:98%; margin:1% 0% 1% 2% ;font-size: 2em;    font-weight: bold;    font-style: italic; }

.field.liste {
    flex-grow: 0;
    display: flex;
	width:44%;
    margin: 0.5% 1%;
	padding:1%;
    background-color: #FFF;
    cursor: pointer;
    border: 1px solid black;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;}
	
.field.liste:hover { border: 1px solid #85e88e; background-color : #DDD}
.field.liste>titre { position:relative;float:left;text-align:center;font-size:1.5em; font-weight:normal}
.field.liste>description { width:auto;display:block;position:relative;float:left;text-align:left;font-size:1.5em;font-weight:bold;  white-space: nowrap;}
.field.liste>visuel { width:auto;height:150px; display:flex;position:relative;float:left;}
.field.liste>visuel>img { max-width:98%; max-height:98%; display:block;position:relative;float:left;margin:1%  }

.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%}

.bt.action, .bt.action:visited, .bt[type=submit].action {
    font-size: 1.3em;
    background: transparent;
    /* color: #85e88e !important; */
	color:black;
    font-weight: bold;
    display: inline-flex;
	position:relative;
	float:right;
    align-items: center;
    font-variant-numeric: lining-nums;
	margin:2%
}
.bt.action:after, .bt[type=submit].action:after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 2px solid rgba(133,232,142,0.99);
    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;
}	

.bt.action span.cross {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transform: translate(50%, -50%);
}
.bt.action span.cross:before {
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #85e88e;
    position: absolute;
    content: "";
    width: 2px;
}
.bt.action span.cross:after {
    top: 0;
    bottom: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #85e88e;
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    height: 2px;
}

.bt.actionBig, .bt.actionBig:visited, .bt[type=submit].actionBig {
    font-size: 1.5em;
    
    /* color: #85e88e !important; */
	text-align:center;
    font-weight: bold;
    display: block;
	position:relative;
	float:left;
    align-items: center;
    font-variant-numeric: lining-nums;
	width:60%;
	margin:2% 20% 2% 20%;
}


.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;  } 

.categorie { width:300px;}

.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;
 }
.full { width:100%}
.description {  width:auto; max-width:48%;margin:1%;display:block;position:relative;float:left; font-size: 2em;}
.texte {  width:90%; margin:2% 5% 2% 5%;display:block;position:relative;float:left;font-size: 1.3em;}
.texte.titre { font-size: 1.5em; clear:both}
.visuel { height:100%; width:30%; margin:0;display:block;position:relative;float:left;background-color:white}
.visuel>img { max-width:100%; max-height:98%; display:block;float:left  }




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"], form input[type="number"] {
    font-size: 0.9375rem;
    border: none;
    color: #4e4e4e !important;
	background-color : #e8f0fe ;
    border-bottom: 1px solid rgba(78,78,78,0.5);
    width:90%;
	padding: 1.5rem 1em 0;
    /* background: transparent; */
    outline: 0;
    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;
}
/*
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;
}
*/
form input[type="number"] { text-align :center;}


*::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 label {
    user-select: none;
}
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;
}

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: 1500px)
{
	/* .field.catalog {flex-grow : 0;display:inline-block; width:45% ; margin:0; padding:0;  border: 1px solid black;} */
	/* .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: 1200px)
{
	.categorie { width:200px}
	.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)
{
	.categorie { width:150px}
	.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.vehicule {flex-grow : 0;display:inline-block; width:100% ; margin:2% 0% 2% 0%;background-color : #e7e4e4; cursor:pointer ;  border: 2px solid transparent;}
.field.vehicule>description { font-size:0.7em; width:40%;display:block;position:relative;float:left;}
.field.vehicule>visuel{  width:30%; margin:2%;display:block;position:relative;float:left;}
.field.vehicule>visuel>img { max-width:100%; max-height:98%; display:block;float:left  }

.field.vehicule>total { width:24%;padding:1%;display:block;position:relative;float:left;}
.field.vehicule>total>table {text-align:right; width:100%}
.field.vehicule>total>info { font-size:0.7em; width:100%;margin:5%;display:block;position:relative;float:left;}

.field.vehicule>bilan { width:60%;padding:1%;display:block;position:relative;float:right;}





.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 }



iframe { border : 0px solid white }




/*=================================================================
	slide #e7e4e4
=================================================================*/
/* pres { width:100%; display:block; position:relative;float:left;height:420px;  overflow:hidden;margin:1% 0 1% 0; background-color:whitesmoke } */
pres { width:100%; display:block; position:relative;float:left;height:300px;  overflow:hidden;margin:1% 0 1% 0; background-color:white ;
}
.arg { height:300px; }
pres visuel { width:25%;display:block; position:relative;float:left;height:100%}
pres visuel img { margin:0%;max-height:100%;max-width:100%;  display:block; position:absolute;left:50%; top:50%;transform:translate(-50%,-50%);}
pres .video { width:50%;height:100%;display:block; position:relative;float:left;}


slideshow { display:block;float:left;position:relative;float:left;height:100%;width:100%;margin:0;
 }


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:black; 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;}

*/

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


slideshow container {  display:block;float:left;position:relative;width:90%;background-color:transparent;height:90%;margin:0 5%0 5%;}

slideshow slide {  display:block;float:left;position:absolute;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} }

slideshow fond { display:block;position:absolute;top:0;left:0;height:100%; width:100%; }
slideshow fond img { bottom:0%;left:50%;transform:translateX(-50%);display:block;opacity:1;
position:absolute;width:100%;padding:0%;}

/*border-bottom:gray 1px solid;*/

/* slideshow slide visuel {display:block;height:100%;width:20%;position:absolute;left:0;top:0;} */
/* slideshow slide visuel img { top:50%;left:50%;transform:translate(-50%,-50%);display:block;opacity:1; */
/* position:absolute;max-height:100%;max-width:100%;padding:0%;} */
/* slideshow slide description { position:absolute;z-index:1000;top:25%;left:21%; width:78%;font-size:small;color:black;  } */

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:66%;margin:1%;padding:1%;float:left; font-size: 1.5em;overflow:hidden;text-overflow:ellipsis;}
slideshow slide visuel {  width:30%; height:100%;margin:0;padding:0%;display:block;position:relative;float:left}
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%;}	

.noDisplay { display:none}
formulaire {position:relative;float:left;width:90%;margin:5px 5% 5px 5%;padding:1%; background-color:#e5e5e559} /* #e2dfdc*/
.menuPhone>close { 
  display:block;position:absolute;top:0;right:0;width:60px;height:60px;color:white;font-size:large;background-color:#85e88e;z-index:500
}
.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;
}
.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; }
}

@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-dialog {
  /*display: table-cell;*/
  /*vertical-align: middle;*/
  
  position:fixed;
  margin-top:0%;
  width:100%;
}

.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;
}

/* The modal's content */
.modal-dialog .modal-content {
  /* min-height:30vh; */
  max-height:90vh;
  /* margin: auto; */
  background-color: white;
  position: fixed;
  top:50%;left:50%;transform:translate(-50%,-50%);
  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);
/*	max-height:90vh; min-height:40vh;*/
	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;
}

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;
}



.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}
	
}