.bg_gris  ::-webkit-input-placeholder, .bg_gris_fonce  ::-webkit-input-placeholder  {
   color: #fff;
}

.bg_gris  :-moz-placeholder, .bg_gris_fonce  :-moz-placeholder { /* Firefox 18- */
   color: #fff;  
}

.bg_gris  ::-moz-placeholder, .bg_gris_fonce  ::-moz-placeholder   {  /* Firefox 19+ */
   color: #fff;  
}

.bg_gris  :-ms-input-placeholder , .bg_gris_fonce  :-ms-input-placeholder {  
   color: #fff;  
}

fieldset .legende  {
	text-transform : uppercase; 
	margin : 30px 0 10px;
}
/* input */
.mt-input {
    display: block;
    width: 100%;
    border: none;
    padding: 8px 0;
    font-family: inherit;
    outline: 0;
}

.bg_gris .mt-input {
  background : #5c5c5c;
}

.bg_gris_fonce .mt-input {
	background : #58585a;
  color : #fff;
}


.bg_gris_fonce input.mt-input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #58585a inset !important;
    -webkit-text-fill-color : #fff !important;
}


    .mt-input[type="text"],select.mt-input {
       min-height: 2.2em;
    }
    
    .mt-border {
        display: block;
        content: '';
        height: 2px;
        width: 100%;
        background: #ccc;
    }

    .mt-input:focus+.mt-border {
    	animation-duration: 0.5s;
        animation-name: getfocus;
        animation-fill-mode: forwards;
    }

    @keyframes getfocus {
      
      0% {
        width: 0%;
      }

      100% {
        background: #2196F3;
        width: 100%;
      }
    }

    select.mt-input:-moz-focusring {
        color: transparent;
        text-shadow: 0 0 0 #000;
    }

    @supports 
      (-webkit-appearance: none) or
      (-moz-appearance: none) or
      (appearance: none) {
        
        select.mt-input {
            padding-left: 0;
            padding-right: 0;
            -webkit-appearance: none; 
            -moz-appearance: none;
            appearance: none;
            /* https://www.iconfinder.com/iconsets/google-material-design-icons  */
            background-color: white;
            background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAM0lEQVRIiWNgGAWjYBQMf9DAwMDwnwBuoKUlFBuOzxKqGY7NEqobjmwJzQwfBaNgFJAJAA9IGO3rEoqTAAAAAElFTkSuQmCC');
            background-repeat: no-repeat;
            background-position: 95% center ;
            background-size: contain;
        }
        
        select.mt-input option:not(.placeholder) {color: #000;}

        select.mt-input option.placeholder,
        select.mt-input.mt-placeholder-on {
            color: #9A9A9A;
        }
        select.mt-input.mt-placeholder-on:-moz-focusring {
            color: transparent;
            text-shadow: 0 0 0 #9A9A9A;
        }

    }

/* label */
.mt-label {
    display: block;
    padding: 8px 0 0 0;
    font-size: 80%;
    color: #000000;
    opacity: 0.38;
    visibility: hidden;
}

.bg_gris_fonce .mt-label {color : #f4f4f4;}
    .mt-label.mt-label-on {
        visibility: visible;
    }

/* helper */

.mt-helper[data-aide]::after,
.mt-helper[data-erreur]::after {
    display: block;
    width: 100%;
    padding: 4px 0;
    font-size: 80%; 
}

    .mt-helper[data-aide]::after {
        content: attr(data-aide);
        color: #000000;
        opacity: 0.38;
    }

    .mt-helper[data-erreur]::after {
        content: attr(data-erreur);
        /*color: #D50000;*/
        color: #F08927;
        opacity: 1;
    }

    .mt-helper[data-erreur] {
        background: #D50000;
    }
    
/* bouton */
.mt-submit {
	background : #F08927; 
	padding : 5px 20px;
	color : #fff!important;
	border-radius : 7px;
	text-align : center;
	line-height : 1em;
	text-transform : uppercase;
	font-weight : 600;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	transition: all 1s ease;
	float: right;
    cursor: pointer;
    border : none;
}

    .mt-js-required {
        opacity: 0.5;
        pointer-events: none;
    }

        .mt-js-required::before {
            display: block;
            padding: 8px 0;
            content: attr(data-label-off);
        }

        .js-isActive .mt-js-required {
            opacity: 1;
            pointer-events: auto;
        }

        .js-isActive .mt-js-required::before {
            content: attr(data-label-on);
        }

.mt-radio {
    display: inline-block;
    margin-top: 10px;
}
.mt-radio + label {
    display: inline-block;
    margin-left: 10px;
}

#tri  {
	margin-bottom : 15px;
}
#tri li {
	margin : 10px 5px;
	text-transform : lowercase;
	font-size : 120%;
	border : 1px solid;
}

#tri li.checkNoActive {
	border : 1px solid #B9B7B8;
	color : #B9B7B8!important;
}


 /* 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-right: 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; box-sizing : border-box; width : 100%;} 
	/*[type="radio"]:not(:checked) + label, */
    [type="radio"]:checked + label  { color : #000;    font-weight: 600;} 
	
		[type="radio"]:not(:checked) + label{ color : #B9B7B8;}
	
	    /* 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: '';
	  font-weight : normal;	   
      position: absolute;  
	  top: 6px; left: 3px;  
      width: 15px; height: 15px; /* dim. de la case */  
	  font-size: 16px; 
		/* border: 1px solid #aaa;  */
	  background : #fff;
      border-radius: 2px; /* angles arrondis */  
	  margin-top: 0px;
	  color : #B9B7B8;
      /*box-shadow: inset 0 1px 3px rgba(0,0,0,.3) *//* légère ombre interne */  
    }  
	
	.cms-root-references [type="checkbox"]:not(:checked) + label:before, .cms-root-references  [type="radio"]:not(:checked) + label:before  
    /*,[type="checkbox"]:checked + label:before, [type="radio"]:checked + label:before */ {  
      content: '\f067';
		font-family : fontAwesome;
	  font-weight : normal;	   
      position: absolute;  
	  top: 6px; right: 3px;  left : inherit; 
      width: 15px; height: 15px; /* dim. de la case */  
	  font-size: 16px; 
		/* border: 1px solid #aaa;  */
	  background : #fff;
      border-radius: 2px; /* angles arrondis */  
	  margin-top: 0px;
	  color : #B9B7B8;
      /*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 : #fff;
		border-radius: 5px;
		width: 10px; height: 10px;
		margin-top: 5px;
		top : 3px;
	}
	
	.cms-root-references [type="radio"]:not(:checked) + label:before,
	.cms-root-references  [type="radio"]:checked + label:before {
		top : 0;
	}
	
	[type="radio"]:not(:checked) + label:before,
	[type="radio"]:checked + label:before {
		background : #B9B7B8;
		border : 1px solid #B9B7B8;
		width: 8px; height: 8px;
	 }
	.cms-root-references [type="radio"]:not(:checked) + label:before,
	.cms-root-references  [type="radio"]:checked + label:before {
		background : #fff;
		border : 1px solid #fff;
		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: '✔';  */
      content: '\f00d'; 
	  font-family : fontAwesome;
	  font-weight : normal;	  
      position: absolute;
		width: 15px; height: 15px; /* dim. de la case */  	  
      top: 4px; right: 3px;  
      font-size: 16px;  
      color: #000;  
      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 : 9px;
		font-size : 0;
	}
	
	.cms-root-references [type="radio"]:not(:checked) + label:after, .cms-root-references [type="radio"]:checked + label:after { 
		left : 0;
		top : 5px;
	}
    /* 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 */  
    }