.formV3{
  --fv3_couleurContourForm: currentColor;
  --fv3_couleurSoulignForm: #000;
  --fv3_couleurTextForm: #000;
  --fv3_spaceBetweenForm: 15px;
  --fv3_couleurBG_Outside: #000;
  --fv3_couleurBG_Inside: transparent;
  --fv3_radiusInput:0px;
}


main.page{overflow: clip}

.bg_choice[style*="color"] .formV3{mix-blend-mode: hard-light;}

.bg_choice[style*="color"] .formV3 form .textarea>label::before,
.bg_choice[style*="color"] .formV3 form .input>label::before,
.bg_choice[style*="color"] .formV3 .select .nice-select .list{background-color: gray;}

.bg_choice[style*="color"] .formV3 form input[type="checkbox"] ~ label.case::before,
.bg_choice[style*="color"] .formV3 form input[type="checkbox"] ~ label.case::after,
.bg_choice[style*="color"] .formV3 form input[type="radio"] ~ label.radio::before{background:currentColor;}
.bg_choice[style*="color"] .formV3 form input[type="radio"] ~ label.radio::after{border-color:currentColor;}


.bg_choice[style*="color"] .formV3 form .btn{
  --c1Btn: currentColor;
  --c2Btn: currentColor;
}

.formV3 .input input, .formV3 .select select, .formV3 textarea{font-weight: inherit; color: currentColor;border-radius: var(--fv3_radiusInput); border:1px solid var(--fv3_couleurContourForm);-webkit-border-radius: var(--fv3_radiusInput);-moz-border-radius: var(--fv3_radiusInput); text-indent: calc(1rem + (var(--fv3_radiusInput)*0.5))}

.formV3 form .select select{text-indent: 1rem; background-color: var(--fv3_couleurBG_Inside); color:inherit; font-weight: normal;width: 100%; padding: 1rem; font-family: inherit; min-height: 45px;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
-webkit-appearance: none;background-position: calc(100% - 2rem);background-size: auto 40%;background-repeat: no-repeat; }
.formV3 form .input, 
.formV3 form .textarea{position: relative; padding: 1rem; padding-left:calc(1rem + (var(--fv3_radiusInput) * 0.5)); text-align: left; min-height: 0 !important;}
.formV3 form .textarea{height:calc(30px * 4)}
.formV3 form .input>input, .formV3 form .textarea>textarea{position: absolute; top: 0;left: 0;width: 100%;height: 100%;overflow: hidden; -moz-appearance:textfield;}
.formV3 form .input>input::-webkit-outer-spin-button,
.formV3 form .input>input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
.formV3 form .input>input:required + label .valid::after,
.formV3 form .textarea>textarea:required + label .valid::after{z-index: 3;position: absolute; top:50%; right: 0; transform:translateY(-50%) ;display: inline-block;font-size: 3em;font-weight: bold;-webkit-text-fill-color: currentColor;font-family: Arial, sans-serif;}
.formV3 form .input>input:required:invalid + label .valid::after,
.formV3 form .textarea>textarea:required:invalid + label .valid::after{color: #c92424; content:"*"; margin-top: 0.2em }
.formV3 form .input>input:required:is(:valid) + label .valid::after,
.formV3 form .textarea>textarea:required:is(:valid) + label .valid::after{color: #16c91f; content:"✓"; margin-left: 0.2em; font-size: 2em;}

.formV3 form .input>label, 
.formV3 form .textarea>label{pointer-events:none;position: relative;z-index: 1;display: inline-block; vertical-align: middle; max-width: calc(100% - 5rem); transition-property: transform; transition-duration: 0.3s; transform-origin:left}
.formV3 form .input>input:required + label, .formV3 form .textarea>textarea:required + label{ padding-right:2em }
.formV3 form .input>label::before,
.formV3 form .textarea>label::before{ background-color:#FFF;position: absolute;z-index: -1;content:"";  top:0/*calc(64% - 1px)*/; border-radius: calc(var(--fv3_radiusInput) * 0.5); left:-0.5em; right: -0.5em; bottom: 0}
.formV3 form .input>label>p,
.formV3 form .textarea>label>p{padding-right: 0; padding-left: 0;margin-bottom: 0;display: -webkit-box;-webkit-line-clamp: 1; line-clamp:1;text-overflow: ellipsis;-webkit-box-orient: vertical;overflow: hidden;}
.formV3 form .input>input:focus + label, 
.formV3 form .input>input:hover + label,
.formV3 form .textarea>textarea:focus + label, 
.formV3 form .textarea>textarea:hover + label,
.formV3 form .input>input:not(:placeholder-shown) + label,
.formV3 form .textarea>textarea:not(:placeholder-shown) + label{transform: translateZ(0) translateY(-webkit-calc(-100% + 0.5em )) scale(0.7); transform: translateZ(0) translateY(calc(-100% + 0.5em )) scale(0.7); }

.formV3 form .input>.effect, .formV3 form .inputFileString>.effect,.formV3 form .textarea>.effect{transform: translateZ(0); z-index: 2;pointer-events:none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.formV3 form span.effect::after{ width:0;transform: translateZ(0); background-color: var(--color1); mix-blend-mode: multiply; opacity: 0.5;display: block; content: ""; position: absolute;  bottom: .5em; top:.5em; right: -webkit-calc(100% - .5em);right: calc(100% - .5em); left: .5em;border-radius:var(--fv3_radiusInput);}
.formV3 form .input>input:focus ~ .effect::after, 
.formV3 form .input>input:hover ~ .effect::after,
.formV3 form .textarea>textarea:focus ~ .effect::after, 
.formV3 form .textarea>textarea:hover ~ .effect::after,
.formV3 form .inputFile:hover  .effect::after{width:auto; transform: translateZ(0); animation-name: focusMe; animation-duration:0.5s; animation-fill-mode: forwards;}

@keyframes focusMe{
  0%{left:.5em;right: -webkit-calc(100% - .5em);right: calc(100% - .5em);opacity: 0}
  50%{left:.5em;right: .5em;opacity: 0.1}
  100%{right: .5em;left: -webkit-calc(100% - .5em);left: calc(100% - .5em); opacity: 0}
}
.formV3 form label.case, .formV3 form label.radio, .formV3 form .check_or_radio input{ position: relative;display: inline-block; width:30px; height:30px; margin-right: 15px;background-color:var(--fv3_couleurBG_Inside); border:1px solid var(--fv3_couleurContourForm); text-align: center;font-size: 0.8em ;; position: absolute; left: 0;top: 0;}
.formV3 form .check_or_radio input{opacity: 0}
.formV3 form label.radio{border-radius: 100%;}
.formV3 form input[type="text"], .formV3 form textarea, .formV3 form input[type="email"], .formV3 form input[type="number"], .formV3 form input[type="tel"],
.formV3 form .tokenfield{width:100%; background: transparent; background-color: var(--fv3_couleurBG_Inside); padding: 10px;}
.formV3 form textarea{height: 6em;resize: none;}



.formV3 form .check_or_radio{padding-left: 45px;position: relative;;}
.formV3 form input[type="checkbox"] ~ label.case::before, .formV3 form input[type="checkbox"] ~ label.case::after{z-index: 5;position:absolute; top:40%; left:50%;content:""; width: 0; height: 1em; background:var(--color1); transform-origin:0 -100%; transform:rotate(-320deg); }
.formV3 form input[type="checkbox"] ~ label.case::after{transform:rotate(-50deg);  margin-left: -1.2em; margin-top: 1.8em;}
.formV3 form input[type="checkbox"]:checked ~ label.case::before{width:2.4em;transition-property: width; transition-duration: .15s;margin-top: 0.05em;margin-left: -0.30em;}
.formV3 form input[type="checkbox"]:checked ~ label.case::after{transition-delay:.15s;transition-property: width; transition-duration: .15s;width:5em;}



.formV3 form input ~ label:is(.radio, .case)>span{ position: absolute; top: 50%;left: 50%; transform:translate(-50%, -50%);  width: 0; height: 0; background: var(--color1);z-index: -2;
  transition-property: width, height, opacity; transition-duration: 0.3s; opacity: 0.1; border-radius: 50%}

.formV3 form input[type="checkbox"] + label:hover + label>span,
.formV3 form input[type="checkbox"] ~ label.case:hover>span, 
.formV3 form input[type="radio"] + label:hover + label>span,
.formV3 form input[type="radio"] ~ label.radio:hover>span{ width:calc(100% + 30px); height:calc(100% + 30px); opacity: 0.15}




.formV3 form input[type="radio"] ~ label.radio::before, .formV3 form input[type="radio"] ~ label.radio::after{z-index: 5;position:absolute; top:50%; left:50%;content:""; transform: translate(-50%, -50%); width: 0; height: 0; background:var(--color1); border-radius: 100%; transition-property: width, height; transition-duration: .15s}
.formV3 form input[type="radio"]:checked ~ label.radio::before{width: 2em; height: 2em; }
.formV3 form input[type="radio"]:checked ~ label.radio::after{width: calc(100% + 1px); height: calc(100% + 1px); background:transparent; border: 2px solid var(--color1)}



.formV3 form .checks_or_radios.formPart{text-align: left; margin-top: calc(var(--fv3_spaceBetweenForm) * 2);}
.formV3 form .checks_or_radios>div{display: inline-block; width: 250px; vertical-align: top; white-space: nowrap; text-align: left; margin-bottom: 15px; margin-left: 25px}
.formV3 form .checks_or_radios label{cursor: pointer; user-select: none; }
.formV3 form .checks_or_radios p{padding: 0;padding-right: 0; padding-left: 0;}
.formV3 form .checks_or_radios>div *:not(input){ white-space: normal;display: inline-block; vertical-align: middle; }
.formV3 form .checks_or_radios .label{font-size: 1.5rem; margin-bottom: 15px; margin-top: 50px; font-weight: 500;}
.formV3 form .checks_or_radios>p{font-weight: bold;}



.formV3 form .formPart{margin-top: var(--fv3_spaceBetweenForm);}
.formV3 form .formPart .bloc2{margin-top:0; margin-bottom: 0; width:calc(50% - ( var(--fv3_spaceBetweenForm) * .5));margin-left: 0; margin-right: var(--fv3_spaceBetweenForm)}
.formV3 form .formPart .bloc2~.bloc2{margin-right: 0; }
.formV3 form button{background: transparent; border: none;}

.formV3 form input[type="file"]+label+label::before{background: currentColor;padding: 0;margin: 0;margin-right:15px;content: "";mask-position: center center; mask-repeat: no-repeat; width: 35px; height: 43px; display: inline-block; vertical-align: middle;
-webkit-mask-position: center center; -webkit-mask-repeat: no-repeat;
-webkit-mask-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2217%22%20viewBox%3D%220%200%2020%2017%22%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M10%200l-5.2%204.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3%2011.5l-3.2-2.1h-2l3.4%202.6h-3.5c-.1%200-.2.1-.2.1l-.8%202.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2%202.1c-.4.3-.7%201-.6%201.5l.6%203.1c.1.5.7.9%201.2.9h16.3c.6%200%201.1-.4%201.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E%0A");
mask-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2217%22%20viewBox%3D%220%200%2020%2017%22%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M10%200l-5.2%204.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3%2011.5l-3.2-2.1h-2l3.4%202.6h-3.5c-.1%200-.2.1-.2.1l-.8%202.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2%202.1c-.4.3-.7%201-.6%201.5l.6%203.1c.1.5.7.9%201.2.9h16.3c.6%200%201.1-.4%201.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E%0A");
}
.formV3 form .inputFile label{background-color: var(--fv3_couleurBG_Inside);display: inline-block; vertical-align: middle;padding: 0;margin: 0;}
.formV3 form input[type="file"]+label+label{  background-color:transparent; padding-right: 15px; padding-left: 15px;}
.formV3 form input[type="file"]+label+label p{display: inline-block;}
.formV3 form .inputFile{display: flex; flex-wrap: nowrap; min-height: 45px;position: relative;}
.formV3 form .inputFile>*:not(i){width: 100%;}
.formV3 form .inputFile>input + label+label{width: 50%;text-align: center;}
.formV3 form .inputFile label{height: auto;font-size: 1.8em;text-align: left; padding-left: 1em; padding-right: 1em; display: flex; align-items: center; justify-content: start;}
.formV3 form .inputFile input{position: absolute;top: 0;left: 0;height: 100%;opacity: 0;z-index: 2;}
.formV3 form .inputFile label{border: 1px solid var(--fv3_couleurContourForm); }
.formV3 form .inputFileString{position: relative;border-top-left-radius:var(--fv3_radiusInput);border-bottom-left-radius:var(--fv3_radiusInput)}
.formV3 form .inputFile input + label+label{border-top-right-radius:var(--fv3_radiusInput);border-bottom-right-radius:var(--fv3_radiusInput)}

.formV3 form .formV3 button{margin-top: 30px;}
.formV3 form .inputFile label p{font-size: 1em;margin-bottom: 0;pointer-events: none;}

.formV3 form .inputFile label.inputFileString{border-right: none;}


.formV3 form .btn{
  margin-top: var(--fv3_spaceBetweenForm);
  --c1Btn: var(--color1);
  --c2Btn: var(--color1);
}

.formV3 form .btn >.bg_choice, 
.formV3 form .btn >.bg_choice:hover{border: 1px solid currentColor;}
.formV3 form .btn >.bg_choice{color: currentColor;background: transparent; border-radius: var(--fv3_radiusInput); position: relative;  overflow: hidden}
.formV3 form .btn >.bg_choice p{font-size: 1.5em;}
.formV3 form .btn >.bg_choice:hover p{filter: invert(1)}
.formV3 form .btn >.bg_choice p::after{display: none;}
.formV3 form .btn >.bg_choice::after{content:"";display: block;background:var(--c1Btn);position: absolute; top: 0;left: 0;transition-property: width;transition-duration: 0.2s; width: 0; height: 100%}

.formV3 form .btn >.bg_choice:hover::after{width: 100%; height: 100%}

.formV3 .select span.current{--myC: currentColor;}
.formV3 .select .nice-select, .formV3 .select .nice-select .list{border-radius: var(--fv3_radiusInput)}
.formV3 .select .nice-select span.current{display: block; padding-left:calc(1rem + (var(--fv3_radiusInput) * 0.5))}
/********************************************************
 *              
 *******************************************************/




.formV3.shapeChange[data-shape="1"]{
  --fv3_radiusInput:25px;
}
.formV3.shapeChange[data-shape="1"] form input[type="checkbox"] ~ label.case::before, .formV3.shapeChange[data-shape="1"] form input[type="checkbox"] ~ label.case::after{border-radius: 5px}
.formV3.shapeChange[data-shape="1"] .select .nice-select .list{margin-top: 0;}

/********************************************************
 *              
 *******************************************************/

.editableZone .formV3 form .input>label{pointer-events: auto;}
.editableZone .formV3.bg_choiceWrap .bg_choice.hover::after{content:"formulaire"}
.editableZone .formV3 form .inputFile label p{pointer-events: auto;}

.editableZone .formV3 form .select .nice-select ul li:hover i{display: inline-block !important;}
.editableZone .formV3 .select select[style*="display"]{display: block !important; opacity: 0; position: absolute;z-index: -1; top: 0;left: 0;height: 100%; width: 100%}



.editableZone .formV3 form button{pointer-events: none;}
.editableZone .formV3 form button>p{pointer-events: auto;}
.editableZone .formV3 form .headerForm{color: #FFF; padding-right: 80px;font-size: 14px;
  padding: 0;overflow: hidden; max-height: 0; transition-property: max-height; transition-duration: 0.3s;position: relative;}
.editableZone .formV3 form .headerForm::before{position: absolute; content: ""; font: normal normal normal 14px/1 FontAwesome; content: "\f013"; font-size: 80px; top: 10px ;left: 10px; color: #FFF; opacity: 0.6;}
.editableZone .formV3 form:hover .headerForm{max-height: 500px;padding: 5px;}
.editableZone .formV3 form .headerForm select{background-color: #FFF;}
.editableZone .formV3 form .check_or_radio .bloc>i{display: none;}
.editableZone .formV3 form .check_or_radio .bloc:hover>i{display: block;}
.editableZone .formV3 form .headerForm input.form_infos,
.editableZone .formV3 form .headerForm select{ min-width: 250px; max-width: 30vw; width: auto;}
.editableZone .formV3 form .headerForm>div{margin-top: 5px;margin-bottom: 5px;}

.editableZone .formV3 form .check_or_radio input + label + label{pointer-events: none;}
.editableZone .formV3 form .check_or_radio input + label + label>p{pointer-events: auto;