/*.xf * {}*/

.xf fieldset {
/* float: left;
 clear: left; */
 padding: 5px 0;
}

.xf legend {
	font-size: 1.5em;
    margin-bottom: 5px;
	font-family: 'Rokkitt',serif;
	  
	margin-bottom: 0.5em;
	
	font-weight: bold;
	text-transform: uppercase;
}

.xf legend.don{
	font-size: 2.5em;
	text-align: center;
}

.xf .ecArticleModelesList legend {margin : 0; padding : 0 3px 6px 0;}
.xf .ecArticleModelesList fieldset  {border-top : 1px solid;}

.xf label, .xf .photo, .xf .required,
.xf img, .xf .document, .xf .document a, .xf .info, .xf ol {
 float: left;
 margin: 4px 0px 0px 0px;
}

.xf input, .xf select, .xf textarea, .xf ol {
 float:left;
 margin: 4px 0px 10px 0px; 
}
.xf select, .xf option {
	font-family: "Red Hat Display", verdana, sans-serif;
}

	.xf input[type=file], .xf input[type=file]:focus {
		background-color: transparent;
		width: 70%;
		cursor: pointer;
		font-family: "Red Hat Display";
	}
	.xf input[type=file]::file-selector-button,
	.xf input[type=file]:focus::file-selector-button {
		font-family: "Red Hat Display";
		background-color: transparent;
		color: #fff;
		border: 1px solid #fff;
		box-shadow: none;
		font-size: 80%;
		font-weight: 900;
		padding: 5px 20px;
		text-transform: uppercase;
		margin-right: 10px;
		transition: 0.5s;
		cursor: pointer;
	}
	.xf input[type=file]:hover::file-selector-button,
	.xf input[type=file]:focus::file-selector-button {
		background-color: #fff;
		color: #000;
	}

	.xf input[type=checkbox] {margin-left: 0;}

.xf input:focus, .xf textarea:focus {
	outline: 0;
	border-color: var(--orange);
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(var(--orange-rvb),.6);
	-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(var(--orange-rvb),.6);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(var(--orange-rvb),.6);
	background-color: white;
}

.xf .groupCheckbox input, .xf .groupCheckbox label, .xf .groupHr li *, .xf ol li * {
 float: none;
 margin: 0;
}

.xf .CheckedListBox {
 list-style: none;
 overflow: auto;
 margin-left: 10px;
 line-height: 1.6
}
  
.xf .CheckedListBox label, .xf .CheckedListBox input {
 float: none;
 margin: 0;
}

.xf .CheckedListBox label {
 display: block;
 padding-left: 5px;
 width: auto;
}

.xf .CheckedListBox label:hover {
 background: #999;
 color: #fff;
}

.xf br, .xf li {clear: both;}
.xf .groupHr li {clear: none; display: inline; margin-right : 20px;}
.xf label {
 width: 30%;
 cursor: pointer;
 font-size: 1.0em;
 box-sizing : border-box;
}

	* html .xf label {width: 70px;}/* ie6 */

.xf label.tocheck, .xf input+label, .xf img+label {
 width: auto;
 margin-left: 10px;
 min-width: 0;
}


/* pied de formulaire */
.xf .footer, .sf .footer {
	text-align: right;
	position: relative;
	
}

.xf:not(.form_page) .btn_suite { float: right; }

/* pré-.xfatage */
.xf .numero {width: 3em;}
.xf .chiffre {width: 8em;}
.xf .date {width: 6em;}
.xf .mot {width: 10em;}
.xf .mots {/*width: 18em; */ width : 70%; }
.xf .phrase {width: 30em;}
.xf .email {width: 18em;  }
.xf textarea { width: 70%; height: 10em; resize: none; }
.xf.form_page .mots, .xf.form_page textarea,
#contact .xf .mots, #contact .xf textarea,
#service-client-garantie .xf .mots, #service-client-garantie .xf textarea { width : 100%; }

.xf .mot, .xf .mots, .xf .email, .xf .phrase, .xf .date, .xf .chiffre , .xf .numero, .xf select, .xf textarea {
	padding : 5px 15px; 
	/*border : 1px solid #ccc;*/
	border: none;
	border-radius : 0px;
	box-sizing : border-box;
	font-family: "Red Hat Display";
}
.xf .mots::placeholder, .xf select::placeholder, .xf textarea::placeholder {
	font-family: "Red Hat Display";
}

.bg_blanc .xf .mot,
.bg_blanc .xf .mots,
.bg_blanc .xf .email,
.bg_blanc .xf .phrase,
.bg_blanc .xf .date,
.bg_blanc .xf .chiffre ,
.bg_blanc .xf .numero,
.bg_blanc .xf select,
.bg_blanc .xf textarea {
	border: 1px solid var(--perle);
}

/* champs requis */
.xf .required, .xf .required2 {
 color: #F00;
 padding-left: 10px;
}

/* erreur */
.xf blockquote, .sf blockquote {
	margin-bottom: 0.3em;
	margin-left: 30%;
	line-height: 1em;
	font-size : 80%;
	font-weight: 300;color: #a94442;

}
.xf.form_page blockquote { margin-left: 0; }

.xf blockquote strong::before, .sf blockquote strong::before {
	content : '\f071';
	font-family : 'Font Awesome 5 Free'; 
	font-weight: bold;
	padding-right: 5px;
}
.xf input.has-error, .xf textarea.has-error, .xf select.has-error {
	border-color: #a94442;
	background : #D8D8D8;
}

.xf input.has-error:focus, .xf textarea.has-error:focus, .xf select.has-error:focus {
	border-color: #843534;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;
	-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;
}

.xf span.facultatif:before {
 content : "\0028";
}

.xf span.facultatif {
	font-size : 0.8em;
	color : #A0A0A0;
	display : block;
}

.xf span.facultatif:after {
 content : "\0029";
}

.input-comm {float : left;  margin: 4px 0 10px 0px;}
.xf .input-comm  input, .xf .input-comm  select, .xf .input-comm  textarea, .xf.input-comm   ol{float : none; margin : 0 0 2px 0;}

.xf .input-comm  span {
	font-size : 0.8em;
	color : #A0A0A0;
	display : block;
}

/* ie */
* html .xf legend {margin-left: -10px;}
* html .xf .CheckedListBox label {height: 1%;}

.xf .notification {
	border:3px solid #d55b5b;
	/*background-color: #ffcdcd;*/
	padding:5px;
}

.xf .status {
 float: left;
 color: red;
}
.xf input[type=checkbox] + label, .xf input[type=radio] + label {
	margin-top : 0;
}

.xf input[type=checkbox] + label {
	margin-left : 0;
}
	
@media all and (max-width: 620px) {
	.xf label, .xf .photo, .xf .required, .xf img, .xf .document, .xf .document a, .xf .info, 
	.xf input, .xf select, .xf textarea, .xf ol , .xf fieldset, .xf .input-comm {
		float : none;
		display : block;
		width : 100%;		
		box-sizing:border-box;
		-moz-box-sizing:border-box; 
	}
	.input-comm {margin-left : 0;}
	.xf input, .xf select, .xf textarea {margin : 0;}
	.xf input[type=checkbox], .xf input[type=radio] {
		float : left; 
		margin: 4px 10px 10px 0px;
		width : auto;
	}
	
	.xf .groupHr li {
		clear: left;
		display: block;
	}
	
	.xf .numero, 
	.xf .chiffre ,
	.xf .date ,
	.xf .mot,
	.xf .mots,
	.xf .phrase,
	.xf .email,
	.xf textarea {width:100%;}

	.xf blockquote, .sf blockquote {margin-left : 0;}


	} /**max 620px **/

	
	div.selectStyle {
	    overflow:hidden; /* this hides the select's drop button */
	    padding:0; 
	    margin:0;
	    background: #BDB4AC url(/style/ecommerce/fleche-select.png) no-repeat 95% center ;
	    /* this is the new drop button, in image form */
	    width:100%; 
		border-radius:2px;
	   /* box-shadow: 0 1px 3px rgba(0,0,0,0.2);
	    border: solid 1px #ccc;*/
	}

		
	.xf div.selectStyle select {
	    width:115%;
	    background-color:transparent;
	    background-image:none;
	    -webkit-appearance: none;
	    appearance: none;
	    border:none;
		color : #696363;
	    box-shadow:none;
	    padding:0.3em 0.5em; /* padding should be added to the select, not the div */
		margin : 0;
	}


    /* Cachons la case à cocher */  
    [type="checkbox"]:not(:checked), [type="radio"]:not(:checked),  
    [type="checkbox"]:checked, [type="radio"]:checked {  
      position: absolute;  
      left: -9999px; 
    }  
       
    /* on prépare le label */  
    [type="checkbox"]:not(:checked) + label, [type="radio"]:not(:checked) + label, 
    [type="checkbox"]:checked + label, [type="radio"]:checked + label  {  
      position: relative; /* permet de positionner les pseudo-éléments */  
      padding-left: 25px; /* fait un peu d'espace pour notre case à venir */  
      cursor: pointer;    /* affiche un curseur adapté */  
    }  
	
	[type="radio"]:not(:checked) + label, 
    [type="radio"]:checked + label  { margin-left : 0 !important; padding-left : 20px;} 
	/*[type="radio"]:not(:checked) + label, */
    [type="radio"]:checked + label  { color : #000;    font-weight: 600;} 
	    /* Aspect des checkboxes */  
    /* :before sert à créer la case à cocher */  
    [type="checkbox"]:not(:checked) + label:before, [type="radio"]:not(:checked) + label:before,  
    [type="checkbox"]:checked + label:before, [type="radio"]:checked + label:before {  
      content: '';  
      position: absolute;  
      left:0; top: 2px;  
      width: 15px; height: 15px; /* dim. de la case */  
     /* border: 1px solid #aaa;  */
     background : #BDB4AC;
      border-radius: 2px; /* angles arrondis */  
	  margin-top: 0px;
      /*box-shadow: inset 0 1px 3px rgba(0,0,0,.3) *//* légère ombre interne */  
    }  
	
	
	[type="radio"]:not(:checked) + label:before,
	[type="radio"]:checked + label:before {
		background : #BDB4AC;
		border-radius: 5px;
		width: 10px; height: 10px;
		margin-top: 5px;
		top : 0;
	}
	
	[type="radio"]:not(:checked) + label:before,
	 [type="radio"]:checked + label:before {
		background : #fff;
		border : 1px solid #BDB4AC;
		width: 8px; height: 8px;
	 }
       
    /* Aspect général de la coche */  
    [type="checkbox"]:not(:checked) + label:after, [type="radio"]:not(:checked) + label:after,  
    [type="checkbox"]:checked + label:after, [type="radio"]:checked + label:after {  
      /* content: 'X';  */
      content: '\f00c'; 
	  	font-weight : bold;	  
      position: absolute;  
      top: -2px; left: 0px;
      font-size: 14px;  
      color: #fff;
      font-family: "Font Awesome 5 Free";
      transition: all .2s; /* on prévoit une animation */   
    }  
	
	[type="radio"]:not(:checked) + label:after, [type="radio"]:checked + label:after {
		background : #000;
		border : 1px solid #000;
		border-radius: 5px;
		width: 7px; height: 7px;
		left : 0;
		top : 5px;
		font-size : 0;
	}
	
    /* Aspect si "pas cochée" */  
    [type="checkbox"]:not(:checked) + label:after,  [type="radio"]:not(:checked) + label:after {  
      opacity: 0; /* coche invisible */  
      transform: scale(0); /* mise à l'échelle à 0 */  
    }  
    /* Aspect si "cochée" */  
    [type="checkbox"]:checked + label:after, [type="radio"]:checked + label:after  {  
      opacity: 1; /* coche opaque */  
      transform: scale(1); /* mise à l'échelle 1:1 */  
    }