BODY {margin:0;padding:0;text-align:center;background-color:#ffffff; font-family: Roboto,tahoma;  min-height:100%;}
/* debut autocomplete */
a.item {color:#2d83b3;}
.icone {float: left; margin: 2px 10px 0px 10px;}
.nice-item-highlight {color:#be7b07;}

.ui-autocomplete {
	z-index     : 1000;
	max-height  : 400px;
	max-width   : 430px;
  overflow-y  : auto;
  overflow-x  : hidden;
	white-space	: nowrap;
}
.ui-menu-item { /* 1 ligne de résultat */
	padding 		    : 12px 0;
	border-bottom		: 1px solid #c3caeb;
	text-align:left;
}

.ui-menu .ui-menu-item a.ui-state-active { /* ligne active au survol */
	background-color : white;
	border				   : 1px solid white;
	color				     : #be7b07;
  font-weight	: normal;
	background  : #fff;
}
/* fin autocomplete */

.toggle{
  --uiToggleSize: var(--toggleSize, 20px);
  --uiToggleIndent: var(--toggleIndent, .4em);
  --uiToggleBorderWidth: var(--toggleBorderWidth, 2px);
  --uiToggleColor: var(--toggleColor, #000);
  --uiToggleDisabledColor: var(--toggleDisabledColor, #868e96);
  --uiToggleBgColor: var(--toggleBgColor, #fff);
  --uiToggleArrowWidth: var(--toggleArrowWidth, 2px);
  --uiToggleArrowColor: var(--toggleArrowColor, #53176d);

  --toggleColor: #ceeafe;
  --toggleBgColor: #9b59b6;
  --toggleSize: 22px;

  display: inline-block;
  position: relative;
}

.toggle__input{
  position: absolute;
  left: -99999px;
}

.toggle__label{
  display: inline-flex;
  cursor: pointer;
  min-height: var(--uiToggleSize);
  padding-left: calc(var(--uiToggleSize) + var(--uiToggleIndent));
  padding-right :5px;
}

.toggle__label:before, .toggle__label:after{
  content: "";
  box-sizing: border-box;  
  width: 1em;
  height: 1em;
  font-size: var(--uiToggleSize);

  position: absolute;
  left: 0;
  top: 0;
}

.toggle__label:before{
  border: var(--uiToggleBorderWidth) solid var(--uiToggleColor);
  z-index: 1;
}

.toggle__input:disabled ~ .toggle__label:before{
  border-color: var(--uiToggleDisabledColor);
}

.toggle__input:focus ~ .toggle__label:before{
  box-shadow: 0 0 0 0px var(--uiToggleBgColor), 0 0 0 1px var(--uiToggleColor);
}

.toggle__input:not(:disabled):checked:focus ~ .toggle__label:after{
  box-shadow: 0 0 0 0px var(--uiToggleBgColor), 0 0 0 1px var(--uiToggleColor);
}

.toggle__input:not(:disabled) ~ .toggle__label:after{
  background-color: var(--uiToggleColor);
  opacity: 0;
}

.toggle__input:not(:disabled):checked ~ .toggle__label:after{
  opacity: 1;
}

.toggle__text{
  margin-top: auto;
  margin-bottom: auto;
  margin-left:5px;
}

/*
The arrow size and position depends from sizes of square because I needed an arrow correct positioning from the top left corner of the element toggle
*/

.toggle__text:before{
  content: "";
  box-sizing: border-box;
  width: 0;
  height: 0;
  font-size: var(--uiToggleSize);

  border-left-width: 0;
  border-bottom-width: 0;
  border-left-style: solid;
  border-bottom-style: solid;
  border-color: var(--uiToggleArrowColor);

  position: absolute;
  top: .5428em;
  left: .2em;
  z-index: 1;

  transform-origin: left top;
  transform: rotate(-40deg) skew(10deg);
}

.toggle__input:not(:disabled):checked ~ .toggle__label .toggle__text:before{
  width: .5em;
  height: .25em;
  border-left-width: var(--uiToggleArrowWidth);
  border-bottom-width: var(--uiToggleArrowWidth);
  will-change: width, height;
  transition: width .1s ease-out .2s, height .2s ease-out;
}

.toggle__label:before, .toggle__label:after{
  border-radius: 1px;
}

/* 
The animation of switching states
*/

.toggle__input:not(:disabled) ~ .toggle__label:before,
.toggle__input:not(:disabled) ~ .toggle__label:after{
  opacity: 1;
  transform-origin: center center;
  will-change: transform;
  transition: transform .2s ease-out;
}

.toggle__input:not(:disabled) ~ .toggle__label:before{
  transform: rotateY(0deg);
  transition-delay: .2s;
}

.toggle__input:not(:disabled) ~ .toggle__label:after{
  transform: rotateY(90deg);
}

.toggle__input:not(:disabled):checked ~ .toggle__label:before{
  transform: rotateY(-90deg);
  transition-delay: 0s;
}

.toggle__input:not(:disabled):checked ~ .toggle__label:after{
  transform: rotateY(0deg);
  transition-delay: .2s;
}

.toggle__text:before{
  opacity: 0;
}

.toggle__input:not(:disabled):checked ~ .toggle__label .toggle__text:before{
  opacity: 1;
  transition: opacity .1s ease-out .3s, width .1s ease-out .5s, height .2s ease-out .3s;
}

/* fin checkbox */

.err {margin:0; border-bottom:1px solid white; background-color:#f26363;}
.err_txt {width:95%; max-width:750px; padding:20px; margin:0 auto; color:#ffffff; font-weight: bold;}

.choix {max-width:1070px; box-sizing: border-box; display:block; margin:auto; padding:0; text-align:left;}
.choix1 {padding:15px 55px; display:inline-block; font-size:18px; color:#ffffff; background: rgba(54, 91, 156, 0.85); border-radius:7px 7px 0 0; transition: all .5s ease-in-out; cursor:pointer;}
.choix2 {padding:15px 45px; display:inline-block; font-size:18px; color:#ffffff; background: rgba(82, 145, 200, 0.85); border-radius:7px 7px 0 0; transition: all .5s ease-in-out; cursor:pointer;}
.choix3 {padding:15px 45px; display:inline-block; font-size:18px; color:#ffffff; background: rgba(99, 158, 209, 0.85); border-radius:7px 7px 0 0; transition: all .5s ease-in-out; cursor:pointer;}
.choix1:hover {color:#f6ee0d; opacity: 1;}
.choix2:hover {color:#3b3f75; opacity: 1;}
.choix3:hover {color:#3b3f75; opacity: 1;}

.back {height:620px;width:100%;background-image:url(/img/route-usa.jpg); background-repeat:no-repeat; background-position:center; background-size: cover;}
h1 {margin:35px 0;font-size:2.7em; color:#ffffff; text-shadow:1px 1px 2px #252525;font-weight:400;}
.cadre {width:910px; display:inline-block; padding:30px 80px 25px; box-shadow: 1px 1px 3px #555555; background: rgba(54, 91, 156, 0.85); transition: all .5s ease-in-out; text-align:center;}
.cadre:hover {background: rgba(54, 91, 156, 0.9);}

.bloc_g {display:inline-block; float:left; text-align:left; border:0px solid pink;}
.bloc_d {display:inline-block; margin:21px 0 0 30px; border:0px solid pink;}

.infos_g {display:inline-block; float:left; text-align:left; margin:0 40px 20px 0; border:0px solid yellow;}
.infos_d {display:inline-block; float:left; text-align:left; margin-bottom:20px; border:0px solid white;}
.tit {margin-bottom:3px; font-size:16px; color:#fdfdfd;}
.tt {margin-top:15px}
.dater {float:left;}

.box_cta {font-family:Roboto,tahoma;font-size:15px;color:#2d83b3;line-height:19px;}

.box_age {display:inline-block; float:left; max-width:300px; font-size:16px; font-weight:normal; color:#fdfdfd; border:0px solid white;}
.inp-age {font-size:18px; color:#4662a3; border:1px solid #BEBEBE; width:60px; text-align:center; padding:10px 7px; border-radius:4px; background:#fafafa;}
.inp-age:hover {border:1px solid #575757; color:black;}
.driver-age {margin:20px 0 0 50px;}
::placeholder {color: #bebebe; opacity:1;}

.box_fide {display:inline-block; float:right; max-width:300px; font-size:16px; font-weight:normal; color:#fee014; border:0px solid yellow;}
.inp-emc {font-size:18px; color:#4662a3; width:290px; margin-top:10px; padding:5px; }
.inp-emc:hover {color:black;}
.em_clt {margin-top:20px; color:#ffffff; text-align:left; border:0px solid white;}

.inp_ag {
background:url(/img_us/pictos/gps.png) no-repeat left center; background-position:7px 12px; margin-bottom:9px;
width:300px; padding:10px 0 10px 30px; background-color:#ffffff; font-family: Roboto,tahoma; font-size:16px; color:#2d83b3;
border: 1px solid #CCCCCC; border-radius: 5px; line-height: 1.5; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
}

.inp_d {
    width:156px; height:46px; line-height:46px; padding-left:45px; margin-right:5px; background-color:#ffffff; font-family:arial; font-size:16px; color:#2d83b3; font-weight: bold; 
    background:url('/img/picto/cal-css.png') no-repeat left center;  border: 1px solid #CCCCCC; border-radius: 4px; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
}

.inp_h {
background:url(/img_us/pictos/clock.png) no-repeat left center; background-position: 7px 12px;
width:135px; height:46px; line-height:46px; padding-left:30px; font-family:arial; background-color:#ffffff; font-size:16px; color:#2d83b3; font-weight: bold;
border: 1px solid #CCCCCC; border-radius: 4px;  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset; -webkit-appearance: none;
}

.inp_m {
width:110px; height:40px; line-height:40px; padding-left:20px; margin-left:10px; font-family:arial; background-color:#ffffff; font-size:16px; color:#2d83b3; font-weight: bold;
border: 1px solid #CCCCCC; border-radius: 4px;  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset; -webkit-appearance: none;
}

.inp_ag:hover, .inp_d:hover, .inp_h:hover { box-shadow: 0px 0px 2px #CCCCCC; cursor:pointer;}

input[type="text"] {background-color : #ffffff; }

.btn {
	width:210px; height:100px; box-shadow:inset 0px 1px 0px 0px #fed897; padding:10px 0;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f6b33d), color-stop(1, #d29105) );
	background:-moz-linear-gradient( center top, #f6b33d 5%, #d29105 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6b33d', endColorstr='#d29105');
	background-color:#f6b33d;	border-radius:5px; border:1px solid #eda933; cursor:pointer;
	color:#ffffff; font-family:Roboto,Tahoma; font-size:24px;	font-weight:400;
	text-decoration:none;	text-align:center; text-shadow:1px 1px 0px #cd8a15;
}

.btn:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d29105), color-stop(1, #f6b33d) );
	background:-moz-linear-gradient( center top, #d29105 5%, #f6b33d 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d29105', endColorstr='#f6b33d');
	background-color:#d29105;
}
.btn:active {	position:relative; top:3px;}

.logos {width:845px; height:44px; margin:50px auto; background-image:url(/img/logos-loueurs.png); background-repeat:no-repeat;}

.bspauto {width:930px; margin:45px auto; transition: all .5s ease-in-out;}
.bspauto:hover {transform: scale(1.05);}
.bspauto .tr1 {width:730px; margin:0; padding:5px 15px; background-color:#66a7e0; border-radius:5px; font-size:26px; font-weight:400; color:#ffffff; text-align:left;}
.bspauto .tr2 {margin:10px 0 10px 10px; padding:5px 15px 5px 15px; background-color: #0140A2; border-radius:5px; font-size:26px; color:#ffffff; font-weight:400; text-align:left; transform: translateY(-11px) rotate(-1deg); -webkit-transform: translateY(-11px) rotate(-1deg);}
.bspauto .tr2:hover {color:yellow;}

.cadre3 {display:inline-block; width:100%; padding:50px 0; background-color:#f5f5f5; margin:auto; border-width:1px 0; border-color:#cecece;}
.cadre3b {max-width:940px; margin:auto; text-align:center;}
.review {min-width:280px; max-width:280px; float:left; margin:0 15px; background-color:#ffffff; border:1px solid #a1c8f2; border-radius:10px; padding:20px 0; text-align:center;}
.review:hover {border:1px solid #598dc4; position:relative; bottom:3px; text-decoration: none;}
.review a {text-decoration: none;}
.rev_i {width:200px; height:76px; margin:auto;}
.rev_t {margin-top:15px;font-size:14px;color:#749ae1;}

.clear {clear:both;}

.ctxt {display:inline-block;width:90%;max-width:1050px; margin:auto; margin-top:50px; text-align:justify;}
.ctxt_g {display:inline-block; width:48%; float:left; box-sizing:border-box;}
.ctxt_d {display:inline-block; width:48%; float:right; box-sizing:border-box;}
.ctxt h2 {font-size:1.6em; color:#66a7e0; font-weight:bold;}
.ctxt h3 {color:#66a7e0; font-weight:bold;margin:0;}
.ctxt p {font-size:1.1em; line-height:1.4em; color:#727272;}
.ctxt a {color:#2c6291; font-weight:bold; text-decoration:underline;}
.ctxt a:hover {color:#66a7e0;}
.ctxt p em {font-size:14px;line-height:1.1em;}

.footer {margin-top:100px;}
.footer .box1 {margin:0;  background-color:#f5f5f5; padding: 1rem; font-size:14px; color:#4e4b45; border-top:1px #bababa solid;}
.footer .box1 p {margin:3px 0;}
.footer .box1 a{font-size:14px; color:#798ce2; line-height:25px; padding-right:20px;}
.footer .box1 a:hover{color:#975515;}
.footer .box2 {padding:10px; border-top:1px #dadada solid;}
.footer .box2 .cb {padding-left:20px;}

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

.header, .choix, h1, .logos, .bspauto {display: none;}
.cadre {width:90%; max-width:420px; clear:both;  margin:20px 0; padding:10px; transition: all .5s ease-in-out;}
.infos_g, .infos_d, .box_age, .box_fide {float:none; margin:15px 0 0 0;}
.tit {margin-bottom:3px; font-size:18px; font-weight: bold; text-shadow:1px 1px 1px #000000;}
.tt {margin-top:10px}

.bloc_g {display:inline-block; float:none; text-align:center;}
.bloc_d {margin:25px 0 0 0;}
.btn {height:55px; line-height:55px; width:300px; padding:0; margin:0; clear:both;}

.ctxt {margin-top:15px;}
.ctxt_g, .ctxt_d {width:100%; float:none;}

.cadre3 {padding:30px 0 0 0;}
.review {float:none; min-width:380px; margin:auto; margin-bottom:30px;}

}