/********************************************
* *****************  VARS  ******************
* ******************************************/
@property --property-color-redLight {
  syntax: '<color>';
  initial-value: #FF8B70;
  inherits: false;
}

@property --property-color-redHight {
  syntax: '<color>';
  initial-value: #FF3000;
  inherits: false;
}

:root{
    --color-greyStrong: #667085;
    --color-greyLight: #eeeeee;
    --color-greyultraLight: #FAFAFA;
    --color-greyHight: #79869F;
    --color-greyUltraHight: #D0D5DD;
    --color-greyUltraHightAlpha: #52648733;
    --color-blue: #007FFF;
    --color-blue10: #007FFF1A;
    --color-bluelight: #F4F9FF;
    --font-family: "Inter", sans-serif;
    --color-redUltraLight : #F4CCCCFF;
    --color-redLight : #FF8B70;
    --color-redHight : #FF3000;
    --color-redUltraHight : #E06666;
    --color-blackLight : #344054;
    --color-red5 : #FF30000D;
    --color-red50 : #FF300080;
    --color-violet : #E8E1F6FF;
    --color-violehight : #B89DD4;
    --color-orange : #fef2e5ff;
    --color-orangehight : #ffcc80;
    --color-green : #d8f4f0ff;
    --color-greenHight : #94E9E0;

}
body.dark{
                                                  
}
/********************************************
* *****************  GENERAL  ***************
* ******************************************/
body, html{height:100%}
body, main > *{
  font-family: var(--font-family);
  font-size: 2rem;
}
a{
  text-decoration: none; 
}
a:not('.button'):hover{
  text-decoration: underline; 
  color:var(--color-white);
}

/********************************************
* *******************  SVG  *****************
* ******************************************/

/********************************************
* *****************  SHADOW  ****************
* ******************************************/


/********************************************
* ***************  BACKGROUND  **************
* ******************************************/
                            

/********************************************
* ***************  BORDER  **************
* ******************************************/



/********************************************
* ****************  DIMENSIONS  *************
* ******************************************/



/********************************************
* *****************  FONT  ******************
* ******************************************/



 /********************************************
 * ****************  ACCORDION ***************
 * ******************************************/

 /********************************************
 * ****************  COLORS ***************
 * ******************************************/
.ftgreyHight{color:var(--color-greyHight);}
.ftBlue{color:var(--color-blue);}
.ftRed{color:var(--color-redHight);}
.ftRedUltraHight{color:var(--color-redUltraHight);}
.ftviolet{color:var(--color-violehight);}
.ftorange{color:var(--color-orangehight);}
.ftgreen{color:var(--color-greenHight);}

.strokegrey{stroke:var(--color-greyStrong);}

.backgreylight{background-color: var(--color-greyLight);}
.backgreyUltralight{background-color: var(--color-greyultraLight);}
.backblue{background-color: var(--color-blue);}
.backblue10{background-color: var(--color-blue10);}
.backbluelight{background-color: var(--color-bluelight);}
.backredhight{background-color: var(--color-redHight);}
.backredultralight{background-color: var(--color-redUltraLight);}
.backgrey{background-color:var(--color-greyLight);}
.backviolet{background-color:var(--color-violet);}
.backorange{background-color:var(--color-orange);}
.backgreen{background-color:var(--color-green);}


.fillgreyHight{fill:var(--color-greyHight);}
.fillBlue{fill:var(--color-blue);}

/********************************************
* **************  AUTOCOMPLETE  *************
* ******************************************/



/********************************************
* **************  PROGRESS BAR  *************
* ******************************************/


/********************************************
* ******************  CTA  ******************
* ******************************************/
.btnAction:hover .strokegrey{ stroke:var(--color-blue); }
.CTA{
  border-radius:10px;
  padding: 16px 20px;
}
.CTA1{
  border-radius:10px;
  padding: 16px 50px;
}
.CTA2{
  border-radius:10px;
  padding: 5px;
  display: inline-block;
}
.CTARedLight{
  background: linear-gradient(0.25turn, var(--property-color-redLight), var(--property-color-redHight));
  color:var(--color-white);
  transition: --property-color-redLight .5s, --property-color-redHight .5s;
}
.CTARedLight:hover{
  --property-color-redLight: #FF3000;
  --property-color-redHight: #FF3000;
  color:var(--color-white);
}

.CTAWhite{
  background: var(--color-white);
  color:var(--color-blackLight);
  border:2px solid var(--color-greyUltraHight);
}
.CTAWhite:hover{
  background: var(--color-blue10);
  color:var(--color-blue);
  border:2px solid var(--color-white);
}

.CTABlue{
  background: var(--color-blue);
  color:var(--color-white);
  border:2px solid var(--color-blue);
}
.CTABlue:hover{
  background: var(--color-white);
  color:var(--color-blackLight);
  border:2px solid var(--color-greyUltraHight);
}

.CTAGreen{
  background: var(--color-green);
  color:var(--color-black);
  border:2px solid var(--color-green);
}
.CTAGreen:hover{
  background: var(--color-white);
  color:var(--color-blackLight);
  border:2px solid var(--color-greyUltraHight);
}

.CTAGrey{
  background: var(--color-greyLight);
  color:var(--color-black);
  border:1px solid var(--color-greyLight);
}
.CTAGrey:hover{
  background: var(--color-white);
  color:var(--color-blackLight);
  border:1px solid var(--color-greyUltraHight);
}

.CTAGreylight{
  background: var(--color-greyultraLight);
  color:var(--color-black);
  border:1px solid var(--color-greyultraLight);
}
.CTAGreylight:hover{
  background: var(--color-white);
  color:var(--color-blackLight);
  border:1px solid var(--color-greyUltraHight);
}
a.ftgreyHight:hover, .menuActiv{color:var(--color-blue);}

a:hover .svgClass .fillgreyHight, a.menuActiv .svgClass .fillgreyHight{fill:var(--color-blue);}

/********************************************
* *****************  ELEMENT ****************
* ******************************************/

.transitionned{transition: 0.5s;}

#topBloc{
  z-index:990;
  position: fixed;
  width:calc(100% - 250px);
}
#leftBloc{
  width:250px;
  top:80px;
  height:calc(100% - 80px);
  z-index:1020;
  position: fixed;
}
#centerBloc{
  width:calc(100% - 250px);
  top:75px;
  left:250px;
  position: relative;
}
#rightBloc{
  width:360px;
  top:120px;
  height:calc(100% - 180px);
  position: absolute;
}
#centerBloc .blocTR{width:calc(100% - 366px);}
.locked {
  pointer-events: none;
  opacity: .4;
}

.specialimmat::after {
  content: " ";
  background: #007FFF;
  width: 20px;
  height: 30px;
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 0 10px 10px 0;
}
.specialimmat::before {
  content: " ";
  background: #007FFF;
  width: 20px;
  height: 30px;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 10px 0 0 10px;
}
.specialimmat input, .specialbonus select {
  border: 2px solid #007FFF !important;
  text-align: center;
  color: #007FFF;
}
.blocvehicule {
  transition: 0.5s;
}

.separator{height:1px; background: var(--color-greyUltraHight);margin: 10px 0;}
/********************************************
* *****************  DROPZONE ***************
* ******************************************/



/********************************************
* *******************  MODAL ****************
* ******************************************/
.modal-header, .modal-footer {
  border: 0 none;
}


/********************************************
* ******************  FIELD *****************
* ******************************************/
.fieldoutline{border: 1px solid var(--color-greyUltraHightAlpha);padding: 15px; border-radius: 10px; font-size: 16px; color:var(--color-greyHight); background:var(--color-white)}

.fieldCard{padding: 20px; border: 1px solid var(--color-greyUltraHightAlpha);border-radius: 10px;min-height:118px}
.error{border: 1px solid var(--color-red50);background:var(--color-red5)}

.fieldcomplited{border: 1px solid transparent;background:var(--color-blue10); color:var(--color-blue)}

label.radiofield {position:relative;}
label.radiofield input, label.checkfield input{
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

label.checkfield input:checked ~ .checkmarkbox::before {
    content:"\f00c";
    color: #007FFF ;
}
label.checkfield input.error ~ .checkmarkbox {
    border: 2px solid var(--color-red50);
}


label.radiofield input:checked ~ .checkmark::after {
    background: #007FFF;
}
label.radiofield.radiofieldgreen input:checked ~ .checkmark::after {
    background: #007FFF ;
}

.checkmark {
  font-family: "Font Awesome 5 Free";
  content: '\f0c8';
  font-size: 1rem;  
  margin-right: 0.3rem  ;
  width: 17px;
  height: 17px;
  display: inline-block;
  font-weight: 900;
  border: var(--color-black) solid 2px;
  border-radius: 50%;
  position:relative;
}
 input.error ~ .checkmark {
  border: var(--color-red50) solid 2px;
}
.checkmarkbox {
  font-family: "Font Awesome 5 Free";
  content: '\f0c8';
  font-size: 1rem;  
  margin-right: 0.3rem  ;
  width: 17px;
  height: 17px;
  display: inline-block;
  font-weight: 900;
  border: #1B243F solid 2px;
}
label.checkfield input:checked ~ .checkmarkbox::before {
    top: 1px;
    left: 1px;
    position: relative
}
.markboxchecked{
    background-image: url("/content/static/picto_checked.svg");
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    display: inline-block;
}
label.radiofield input:checked ~ .checkmark::before {
    display: block;
}
label.radiofield .checkmark::before {
    left: 0px;
    width: 18px;
    height: 18px;
    background: transparent;
    content: "";
    position: absolute;
}

label.radiofield input:checked ~ .checkmark {
  border: var(--color-blue) solid 2px;
}


label.radiofield input:checked ~ .checkmark::after {
    top: 2px;
    left: 2px;
    width: 9px;
    height: 9px;
    content: "";
    position: absolute;
    border-radius: 50%;
}


.inputBox{position: relative;}
.inputBox input, .inputBox textarea, .inputBox select{
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: none;
  transition: 0.5s;
}
.inputBox textarea{
  white-space: break-spaces;
}

.inputBox span {
  position: absolute;
  left: 0;
  padding: 15px;
  pointer-events: none;
  font-size: 1.6rem;
  color: #666;
  transition: 0.5s;
}

.inputBox input:valid ~ span, .inputBox textarea:valid ~ span, .inputBox select:valid ~ span,
.inputBox input:focus ~ span, .inputBox textarea:focus ~ span, .inputBox select:focus ~ span{
  color: #000;
  transform: translateX(10px) translateY(-7px);
  font-size: 0.8em;
  padding: 2px 15px;
  background: #FFF;
  /*border-left: 1px solid #000;
  border-right: 1px solid #000;*/ 
}

.inputBox:nth-child(2) input:valid ~ span,
.inputBox:nth-child(2) input:focus ~ span{
background :#000; 
color: var(--color-white);
border-radius: 2px;
}

/*.inputBox input:valid, .inputBox textarea:valid, .inputBox select:valid
.inputBox input:focus, .inputBox textarea:focus, .inputBox select:focus{
  border : 1px solid #ccc;
}*/


/********************************************
* ***************  photon-input ************
* ******************************************/
.photon-input{width:100%;box-sizing: border-box !important;}
.photon-input:focus {
  width: 100% !important;
}
.photon-autocomplete {padding:0}
.photon-autocomplete li{display: block;}
.photon-autocomplete li:hover, .photon-autocomplete li:focus{color:var(--color-white);}

/********************************************
* ***************  MEDIA QUERIES ************
* ******************************************/
/*X-Small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {  }

/* Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {  }

/*SM devices (portrait phones, less than 576px)*/
@media (max-width: 991.98px) {
    #leftBloc, #rightBloc{display: none;}
    #centerBloc{left: 0;width:100%}
    #centerBloc .blocTR{width:100%;}
    #topBloc{width:100%}
    .margT120-sm{margin-top: 120px}
    .alignR-sm{text-align: right;}
}

/*MD devices (portrait phones, less than 576px)*/
@media (max-width: 1199.98px) {  }

/*LG devices (portrait phones, less than 576px)*/
@media (max-width: 1399.98px) {  }

.animlogo{
    animation: loader-loading 1000ms infinite;
}

@keyframes loader-loading{
    0% {
        transform: scaleX(0);
        opacity: .1;
    }
    10% {
        transform: scaleX(.25);
    }
    20% {
        transform: scaleX(.50);
    }
    30% {
        transform: scaleX(.75);
    }
    40% {
        opacity: 1;
        transform: scaleX(1);
    }
    50% {
        transform: scaleX(1);
    }
    60% {
        opacity: 1;
        transform: scaleX(1);
    }
    70% {
        transform: scaleX(.75);
    }
    80% {
        transform: scaleX(.50);
    }
    90% {
        transform: scaleX(.25);
    }
    100% {
        transform: scaleX(0);
        opacity: .1;
    }
}