:root {
    --couleur1: 117, 119, 105;
    --rouge: 255, 0, 0;
    --orange: 220, 146, 34;
    --vert: 0, 128, 0;
    --noir: 0, 0, 0;
    --blanc: 255, 255, 255;
}

img { max-width: 100%; }
.container { max-width: 700px;}
.fs-7 { font-size: 0.8rem; }

.width100 { width: 100%!important; }

a { color:rgba(var(--noir)); }

/*************************************************************************************************************************************************************/
/************************************************************** FORMULAIRE ***********************************************************************************/
/*************************************************************************************************************************************************************/

.btn { display: flex; width: fit-content; padding: 5px 15px; margin: 7px 0px; border:none; font-weight: 500; border-radius:10px!important; align-items: center; }
.btn:not(.hover), .btn:not(.hover):hover { cursor: text!important; }
.btn.hover:hover { text-decoration:none!important; }
.btn.center { margin-left: auto; margin-right: auto; }
.btn + .btn { margin-left:20px; }
.btn.couleur1 { background:rgba(var(--couleur1),0.9)!important; border-color:rgba(var(--couleur1),0.9)!important; color: rgba(var(--blanc))!important; }
.btn.couleur1.hover:hover { background:rgba(var(--couleur1))!important; border-color:rgba(var(--couleur1))!important; color: rgba(var(--blanc))!important; }

.custom-checkbox-radio-fields { margin-top:1.7rem; }
.custom-checkbox-radio-fields .custom-checkbox-radio-field { display:flex; align-items:center; margin-top:5px; cursor: pointer; }
.custom-checkbox-radio-fields .custom-checkbox-radio-field input { display:none; }
.custom-checkbox-radio-fields .custom-checkbox-radio-field input ~ i { color:rgba(var(--vert)); }
.custom-checkbox-radio-fields .custom-checkbox-radio-field input ~ i.checked { display:none; }
.custom-checkbox-radio-fields .custom-checkbox-radio-field input:checked ~ i.nochecked { display:none; }
.custom-checkbox-radio-fields .custom-checkbox-radio-field input:checked ~ i.checked { display:inline-block; }

.switch,
.switch * {
 -webkit-tap-highlight-color:transparent;
 user-select:none;
 display: inline-block;
}

.switch + .switch { margin-left: 30px; }

.switch label { cursor: pointer; padding-left: 60px; }
.switch label :is(input[type=checkbox],input[type=radio]) {
 opacity:0;
 width:0;
 height:0
}
.switch label :is(input[type=checkbox],input[type=radio]):checked+.lever {
 background-color:rgba(var(--couleur1),0.5);
}
.switch label :is(input[type=checkbox],input[type=radio]):not(:disabled) + .lever:hover { cursor: pointer; }
.switch label :is(input[type=checkbox],input[type=radio]):checked+.lever:after,
.switch label :is(input[type=checkbox],input[type=radio]):checked+.lever:before {
 left:18px
}
.switch label :is(input[type=checkbox],input[type=radio]):checked+.lever:after {
 background-color:rgba(var(--orange));
}
.switch label .lever {
 content:"";
 display:inline-block;
 position:relative;
 width:36px;
 height:14px;
 background-color:rgba(0,0,0,.38);
 border-radius:15px;
 transition:background .3s ease;
 vertical-align:middle;
 margin:0 16px 0 0;
 margin-left: -60px;
}
.switch label .lever:after,
.switch label .lever:before {
 content:"";
 position:absolute;
 display:inline-block;
 width:20px;
 height:20px;
 border-radius:50%;
 left:0;
 top:-3px;
 transition:left .3s ease,background .3s ease,box-shadow .1s ease,transform .1s ease
}
.switch label .lever:before {
 background-color:rgba(38,166,154,.15)
}
.switch label .lever:after {
 background-color:#f1f1f1;
 box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)
}
:is(input[type=checkbox],input[type=radio]):checked.tabbed:focus~.lever:before,
:is(input[type=checkbox],input[type=radio]):checked~.lever:active:before {
 transform:scale(2.4);
 background-color:rgba(38,166,154,.15)
}
:is(input[type=checkbox],input[type=radio]).tabbed:focus~.lever:before,
:is(input[type=checkbox],input[type=radio])~.lever:active:before {
 transform:scale(2.4);
 background-color:rgba(0,0,0,.08)
}
.switch :is(input[type=checkbox],input[type=radio])[disabled]+.lever {
 opacity: 0.5;
}

.switch-field { display: flex; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 4px; }
.switch-field input { position: absolute !important; clip: rect(0, 0, 0, 0); height: 1px; width: 1px; border: 0; overflow: hidden; }
.switch-field label { background-color: rgba(var(--noir)); color: rgba(var(--noir),0.5); line-height: 1; text-align: center; padding: 8px 16px; margin-right: -1px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); transition: all 0.1s ease-in-out; }
.switch-field label:hover {cursor: pointer; }
.switch-field input:checked + label { background-color: rgba(var(--noir)); box-shadow: none; color:rgba(var(--blanc)); }

span.span-explication { display: block; width: 100%; bottom: -19px; font-size: 0.8rem; font-style: italic; color: #888; }
.select2-container .select2-choice { color:rgba(var(--noir)); }
.form-field { position: relative; display: flex; flex-wrap: wrap; align-items: start; margin-top: 1.7rem; }
.form-field.just-label { margin-top: 0.5rem; }
td.form-field { margin-top: 0; display: table-cell; }
.form-field.explication, .form-field.file { margin-bottom: 20px; }
.form-field.file.with-value { margin-bottom: 50px; }
.form-field.file.with-value .actual-file { position: absolute; left: 40px; bottom: -40px; font-size: 0.8rem; }
.form-field.file.with-value .actual-file a { font-style: italic; color:#222222; }
.form-field.file.with-value .actual-file a + span { margin-left: 40px;  }
.form-field > label { color: #666666; font-size: 1rem; cursor: text; transition: transform .2s ease-out,color .2s ease-out; transform-origin: 0 100%; text-align: initial; transform: translateY(1rem);  top: -14px; left:10px; position: relative; margin-top: 5px; }
.form-field:not(.just-label) > label { position: absolute; top: -8px; margin-bottom: 0px; margin-top: 0px; }
.form-field.just-label > label { left: 0;}
.form-field[class*="col"]:not(.just-label,.animation) > label { left:20px; }
.form-field[class*="col"]:not(.just-label) > *:is(input,select,textarea):focus + .password-eye + label, .form-field[class*="col"]:not(.just-label) *:is(input,select,textarea):focus + label { left:20px; }
.form-field span.span-explication { position: absolute; }
.form-field i.prefix { color:rgba(var(--noir)); }
.form-field i.prefix ~ input:not([type=radio], [type=checkbox], [type=submit], [type=button]),
.form-field i.prefix ~ input:not([type=radio], [type=checkbox], [type=submit], [type=button]),
.form-field i.prefix ~ .valeur,
.form-field i.prefix ~ .select2-container,
.form-field i.prefix ~ select,
.form-field i.prefix ~ textarea,
.form-field i.prefix ~ .switch-field,
.form-field i.prefix ~ .form-field-file { margin-left:6px; }
.form-field i.prefix ~ span.span-explication { left:40px; }
.form-field i.prefix ~ label { left:42px; }
.form-field > label span { font-size:0.625rem; }
.form-field span.span-obligatoire { color:#ff0000; font-size: 1rem; }
.form-field input:not([type=radio], [type=checkbox], [type=submit], [type=button]), .form-field .valeur { display: block; width: 100%; padding: 6px 5px; outline: none; background: rgba(var(--blanc)); border: 1px solid rgba(var(--couleur1)); transition: 0.4s ease-out; font-size:1rem; border-radius:5px; color:rgba(var(--noir)); min-height: 38px; }
.form-field input:not([type=radio], [type=checkbox], [type=submit], [type=button]):focus { border: 2px solid rgba(var(--noir)); }
.form-field .valeur { min-height: 33px; background-color: rgba(var(--noir)); }
.form-field input[type=password] { padding-right: 50px; }
.form-field .password-eye { position: absolute; right: 20px; top:5px; cursor: pointer; }
.password-control { width: 100%; background: rgba(var(--noir)); padding: 15px 40px; margin-top: 10px; display: flex; flex-direction: column; }
.password-control li.ok { color: rgba(var(--vert)); }
.form-field select, .form-field .select2-container { background: no-repeat; border: 1px solid rgba(var(--noir));font-size:1rem; border-radius:5px; color:rgba(var(--noir)); }
.form-field .ui-autocomplete { top:35px!important; right: 0!important; width: 100%!important; }
.form-field .select2-container { width: 100%!important; font-size: 1rem; }
.select2-container { margin: 0; }
.select2-container .select2-choice, .select2-container-active .select2-choice { background: rgba(var(--blanc)); border: none; box-shadow: none; padding: 5px 0px; min-height: 36px; }
.select2-container .select2-choice abbr { top:10px; }
.select2-container .select2-choice .select2-arrow { border:none; background: none; top:7px; }
.select2-container .select2-choice .select2-arrow b { background-size: 105px 70px !important; background-position: left -6px top -10px; }
.select2-drop-active { border-color:rgba(var(--noir)); border-top:2px solid rgba(var(--couleur1)); }
.form-field select { width: 100%!important; padding: 7.5px 5px;font-size:1rem; }
textarea { background-color: transparent; border: 1px solid rgba(var(--noir)); border-radius: 8px; outline: none; min-height: 100px; width: 100%; margin: 0 0 8px 0; box-shadow: none; box-sizing: content-box; transition: box-shadow .3s,border .3s; resize:vertical; padding: 5px;font-size:1rem; color:rgba(var(--noir)); }
textarea.moyen { min-height: 150px; }
textarea.grand { min-height: 235px; }
.form-field.rgpd { font-size: 0.75rem; font-style: italic; color:rgba(var(--noir),0.5); }
.form-field.rgpd a { color: rgba(var(--noir),0.7);}


.form-field-file { width: 100%;}
.form-field-file input[type=file] { display: none; }

input:not([type="radio"], [type="checkbox"], [type="submit"]).error, select.error, textarea.error, .form-field-file.error input, .select2-container.error, .mce-container.error { border-color:red!important; }
.form-field input:not([type="radio"], [type="checkbox"], [type="submit"]).error + label, .form-field select.error + label, .form-field textarea.error + label, .form-field-file.error + label { color:red; }
.form-field .form-field-item { margin: 5px 30px 5px 0; }
.form-field .form-field-item::last-child { margin-right: 0px; }
.form-field .form-field-item .switch label .lever { margin-right: 7px; }
.form-field .form-field-item input:is([type=radio], [type=checkbox]) { display: none; }
.form-field .form-field-item input:is([type=radio], [type=checkbox]) + label { position: relative; padding-left: 1.7rem; }
.form-field .form-field-item input:is([type=radio], [type=checkbox]) + label::before { display: block; position: absolute; box-sizing: border-box; top: 5px; left: 0; content:''; width: 1rem; height: 1rem; }
.form-field .form-field-item input:is([type=radio], [type=checkbox]) + label::after { display: block; position: absolute; box-sizing: border-box; top: 11px; left: 0; }
.form-field .form-field-item input:is([type=radio]) + label::before, .form-field .form-field-item input:is([type=radio]) + label::after { border-radius: 1rem;}
.form-field .form-field-item input:is([type=radio], [type=checkbox]) + label::before { border: 1px solid #666666; }
.form-field .form-field-item input:is([type=radio], [type=checkbox]):checked + label::before { border: 1px solid rgba(var(--noir)); }
.form-field .form-field-item input:is([type=radio], [type=checkbox]):checked + label::after { display: block; position: absolute; box-sizing: border-box; top: -6px; left: -2px; content: "check"; font-family: 'Material Symbols Outlined'; font-weight: bold; font-size: 1.5rem; color:rgba(var(--couleur1)); }

.form-field:not(.file):focus-within > label, .form-field.file .form-field-file:focus-within + label, .form-field.animation > label { top: 0px; transform: translateY(-100%); transform-origin: 0 0; font-size: 0.8rem; left: 20px; }
.form-field.animation textarea, .form-field:focus-within textarea { border:1px solid rgba(var(--noir)); padding: 5px; }
.form-field:not(.file):focus-within input:not([type=radio], [type=checkbox], [type=submit], [type=button]), .form-field.file .form-field-file:focus-within input:not([type=radio], [type=checkbox], [type=submit], [type=button]), .form-field:focus-within textarea, .form-field:focus-within select, .form-field.hover { border-bottom: 2px solid; }

.form-field.rgpd { display: block; }

.form-field-group { display: flex; align-items: center; }
.form-field-group .form-field { width: 100%; }
.form-field-group .form-field + .form-field { margin-left: 5px; }