/* FORMULAIRES.CSS - styles propres aux formulaires */

/* gabarit formulaires */
.form-box { padding-left: var(--bs-gutter-x); padding-right: var(--bs-gutter-x); border-bottom-right-radius: 2.5em; }
.form-box div.row { --bs-gutter-y: 1.875rem; }
.form-box, .styled-input, .styled-select { font-size: 1.125rem; }
.form-box label, .form-box span, .form-box strong { display: block; margin-bottom: 0.25em; line-height: 1.33; color: var(--gris-3); }
.form-box label em, .form-box span em, .form-box strong em, .form-box span.important { font-style: normal; font-weight: 500; color: var(--rouge); }
/* titres */
.form-box .form-title { padding-left: var(--bs-gutter-x); padding-right: var(--bs-gutter-x); margin-left: calc(var(--bs-gutter-x) * -1); margin-right: calc(var(--bs-gutter-x) * -1); }
/* blocs types textfield/select/textarea */
.txt-field input:not([type=file]), .txt-field textarea, .txt-field select, .styled-input, .styled-select select { display: inline-block; width: 100%; height: 2.5em; line-height: 2.5em; padding: 0.4em 10px 0.2em; margin: 0; border: 2px solid var(--gris-3); border-radius: 0; font: inherit; letter-spacing: 0.02em; background: var(--blanc); color: var(--vert); box-shadow: none; outline: none; -webkit-appearance: none; -moz-appearance: none; }
.txt-field input:not([type=file]):focus, .txt-field textarea:focus, .txt-field select:focus, .styled-input:focus, .styled-select select:focus, .icheck-item.hover { border-color: var(--orange); }
.txt-field input[disabled], .txt-field textarea[disabled], .txt-field select[disabled], .styled-input[disabled], .styled-select select[disabled], .icheck-item.disabled { opacity: 0.575; }
.txt-field textarea { height: auto; }
/* wrapper pour styling selects */
.txt-field .select-wrapper { width: auto; max-width: 100%; }
.styled-select.select-wrapper { display: inline-block; max-width: 100%; }
/* boutons inline */
.inline-buttons .bt-action { height: 2.5em; line-height: 2.5em; margin: 0 var(--inner-gutter) 0 0; padding: 0 2em 0 1em; border-width: 2px; font-size: 100%; }
.inline-buttons .bt-action.no-corner { padding-right: 1em; }
.inline-buttons .bt-action:last-child { margin-right: 0; }
/* blocs types radio/checkbox */
.radio-btn input[type=radio], .radio-btn input[type=checkbox], .radio-btn .icheck-item { position: absolute; }
.radio-btn label { display: inline-block; margin: 0 1em 0 0; padding-left: 1.5em; max-width: 100%; }
.radio-btn .icheckbox ~ label { padding-left: 1.75em; }
/* radiobutton et checkboxlists .net */
.chk-list span.aspNetDisabled { margin: 0; line-height: inherit; }
/* checkboxes/radios restylés */
.icheck-item { position: relative; display: inline-block; vertical-align: middle; border: 2px solid var(--gris-3); background: var(--blanc); color: var(--vert); font-size: 100%; cursor: pointer; }
.icheck-item:before { display: block; visibility: hidden; min-height: 1em; min-width: 1em; text-align: center; }
.icheck-item.checked:before { color: inherit; visibility: visible; }
.icheck-item.iradio, .icheck-item.iradio:before { border-radius: 100%; font-size: 100%; }
.icheck-item.iradio:before { content: ""; font-size: 50%; background-color: var(--vert); margin: 3px; }
.icheck-item.disabled { pointer-events: none; }
.icheck-item.disabled input { visibility: hidden; }
.icheck-item.disabled + label { color: rgba(var(--noir-rgb), 0.66); }


/* validations */
/* validator callout (erreurs champs inline) */
.txt-field input.vceHighlight, .txt-field input.vceHighlight:focus, 
.txt-field textarea.vceHighlight, .txt-field textarea.vceHighlight:focus, 
.styled-input.vceHighlight, .styled-input.vceHighlight:focus { border-color: var(--rouge); }
/* validator callout extender (popup, desktop seulement) */
.vcePopup { z-index: 3; width: 5.75em; min-height: 2.44em; margin: 0 0 0 -5.75em; box-sizing: border-box; background-color: var(--rouge); color: var(--blanc); font-size: inherit; }
.vcePopup:before { content: ""; position: absolute; right: 100%; top: 50%; width: 0; height: 0; margin-top: -0.5em; border: 0.5em solid transparent; border-right-color: var(--rouge); }
.ajax__validatorcallout_popup_table { display: none; border: none; background-color: transparent; padding: 0; }
.ajax__validatorcallout_popup_table_row { vertical-align: top; height: 100%; background-color: transparent; padding: 0; }
.ajax__validatorcallout_callout_cell { width: 20px; height: 100%; text-align: right; vertical-align: top; border: none; background-color: transparent; padding: 0; }
.ajax__validatorcallout_callout_table { height: 100%; border: none; background-color: transparent; padding: 0; }
.ajax__validatorcallout_callout_table_row { background-color: transparent; padding: 0; }
.ajax__validatorcallout_callout_arrow_cell, .ajax__validatorcallout_callout_cell, .ajax__validatorcallout_icon_cell, .ajax__validatorcallout_close_button_cell img { display: none; }
.ajax__validatorcallout_error_message_cell { width: 100%; height: 100%; vertical-align: middle; padding: 0.425em 0.33em 0.33em 0.66em; border-right: none; font-size: 0.75rem; font-weight: 300; line-height: 1; }
.ajax__validatorcallout_close_button_cell { vertical-align: top; padding: 0; border-left: none; }
.ajax__validatorcallout_innerdiv { position: relative; margin: 0.33em 0.33em 0 0; color: var(--gris-1); text-align: center; cursor: pointer; }
.ajax__validatorcallout_innerdiv:before { font-size: 0.75rem; }
/* recaptcha */
.form-recaptcha { max-width: 304px; }
.form-recaptcha-iframe { position: relative; left: 50%; width: 304px; min-height: 80px; margin-left: -151px; }
.form-box .form-recaptcha-error { display: inline-block; margin-top: 0.5em; color: var(--rouge); }


/* incitatif magalogue */
.chk-magalogue { position: relative; display: block; padding: 1.5rem calc(var(--bs-gutter-x) / 2); margin: 1.5rem calc(var(--bs-gutter-x) / -2); background: var(--blanc); }
.chk-magalogue .sub-indent { margin-top: 1em; padding-left: 1.75em; padding-right: calc(var(--bs-gutter-x) / 2); }
.img-magalogue { position: absolute; width: 20%; top: 50%; right: calc(var(--bs-gutter-x) * -0.5); -webkit-transform: translate(0,-50%); transform: translate(0,-50%); }
.img-magalogue .img-wrapper { padding-bottom: 64.961%; background: transparent; }



/* dislaimer GEI */
.form-box .gei-disclaimer { display: inline; }
.form-box .gei-disclaimer a { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: inherit; }
.form-box .gei-disclaimer a:hover { text-decoration-color: transparent; }
.form-box .gei-disclaimer.full { display: none; }


/* media queries */

/* flèche select custom pour webkit/moz */
@media 
	screen and (-webkit-min-device-pixel-ratio: 0),
	screen and (min--moz-device-pixel-ratio: 0) { 
		.select-wrapper { position: relative; }
		.select-wrapper select, .styled-select.select-wrapper select { padding-right: 2em; }
		.select-wrapper:after { position: absolute; right: 0.66em; top: 50%; margin-top: -0.5em; color: var(--vert); pointer-events: none; }
		.select-wrapper:has([disabled]):after { color: var(--gris-2); }
}

@media (max-width: 74.99875rem) { /* XL- */
	.form-box, .styled-input, .styled-select { font-size: 1rem; }
	.ajax__validatorcallout_error_message_cell, .ajax__validatorcallout_innerdiv:before { font-size: 0.6875rem; }
}

@media (max-width: 61.99875rem) { /* LG- */
	.form-box:not(.mx-auto) { width: auto; margin-left: calc(var(--bs-gutter-x) * -1); margin-right: calc(var(--bs-gutter-x) * -1); }
}

@media (max-width: 47.99875rem) { /* MD- */
	.form-box div.row { --bs-gutter-y: 1rem; }
	.form-box, .styled-input, .styled-select { font-size: 0.9375rem; }
	.vcePopup { display: none; }
	.chk-magalogue { margin: 1.5rem calc(var(--bs-gutter-x) * -1); padding: 1.5rem var(--bs-gutter-x); }
	.img-magalogue { right: calc(var(--bs-gutter-x) / 2); }
}