input, button, textarea, select { font:inherit }

.stick {
display:inline-block;
position:relative;
width:100%;
height:2px;
background-color:#1b315a;
margin:50px 0;
padding:0	
}

.stick50 {
display:inline-block;
position:relative;
width:50%;
height:2px;
background-color:var(--mainColorA);
margin:25px 25%;
padding:0
}

.formRow {
position:relative;
display:flex;
flex-wrap:wrap;
gap:1.5rem;
margin-bottom:1.5rem
}

.rowWrap {
position:relative;
flex:1;
min-width:250px
}

.rowWrap.halfRow {
flex:0 0 calc(50% - 0.75rem);
max-width:calc(50% - 0.75rem)
}

.rowWrap.full { flex:0 0 100% }

.rowWrap > label {
display:block;
font-size:0.875rem;
font-weight:500;
color:var(--mainColorB);
margin-bottom:0.5rem;
transition:color 0.2s ease
}

.rowWrap > label.errorForm {
color:#a30000;
animation:shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both
}

.rowWrap > label.errorForm + input,
.rowWrap > label.errorForm + select,
.rowWrap > label.errorForm + textarea {
border-color:#a30000;
background-color:color-mix(in srgb, #a30000 5%, white)
}

@keyframes shake {
	0%, 100% { transform:translateX(0) }
	20%, 60% { transform:translateX(-5px) }
	40%, 80% { transform:translateX(5px) }
}

.rowWrap > input,
.rowWrap .passwordWrap input,
.rowWrap > select,
.rowWrap > textarea {
width:100%;
background-color:var(--white);
border:1px solid var(--taupe);
border-radius:12px;
font-size:0.875rem;
line-height:1.5;
transition:all 0.2s ease;
color:#212427;
padding:0.625rem 0.875rem
}

.rowWrap > input:hover,
.rowWrap .passwordWrap input:hover,
.rowWrap > select:hover,
.rowWrap > textarea:hover {
border-color:color-mix(in srgb, var(--input-focus) 50%, var(--input-border))
}

.rowWrap > input:focus,
.rowWrap .passwordWrap input:focus,
.rowWrap > select:focus,
.rowWrap > textarea:focus {
outline:none;
border-color:var(--evenement)
}

.passwordWrap { position:relative }

.passwordWrap input {
width:100%;
border:none;
box-sizing:border-box;
background-color:#f2f2f2;
padding:10px
}

.toggle-password {
position:absolute;
transform:translateY(-50%);
cursor:pointer;
z-index:2;
right:10px;
top:50%
}

.rowWrap > textarea {
min-height:150px;
resize:vertical
}

.formRowCheckbox {
display:flex;
align-items:center;
gap:0.75rem;
margin-top:1.5rem
}

.formRowCheckbox input[type="checkbox"] {
display:inline-block;
position:relative;
appearance:none;
flex-shrink:0; 
min-width:1.125rem;
width:1.125rem;
height:1.125rem;
border:2px solid var(--bordeaux);
border-radius:0.25rem;
transition:all 0.2s ease;
cursor:pointer;
margin-top:0.125rem;
}

.formRowCheckbox input[type="checkbox"]:checked {
background-color:var(--orange);
border-color:var(--bordeaux)
}

.formRowCheckbox input[type="checkbox"]:checked::after {
content:"";
position:absolute;
top:45%;
left:50%;
transform:translate(-50%, -50%) rotate(45deg);
width:0.25rem;
height:0.5rem;
border:solid white;
border-width:0 2px 2px 0
}

.formRowCheckbox label {
font-size:0.75rem;
cursor:pointer
}

.rowWrap > input:required:invalid:not(:placeholder-shown),
.rowWrap > textarea:required:invalid:not(:placeholder-shown) {
border-color:#a30000;
background-color:color-mix(in srgb, #a30000 2%, white)
}

.rowWrap > input:required:valid:not(:placeholder-shown),
.rowWrap > textarea:required:valid:not(:placeholder-shown) { border-color:#1fa300 }

.rowWrap > input:disabled,
.rowWrap > textarea:disabled,
.rowWrap > select:disabled {
background-color:#f3f4f6;
cursor:not-allowed;
opacity:0.7
}

.rowWrap > input::placeholder,
.rowWrap > textarea::placeholder {
color:#9ca3af;
opacity:1
}

#submitForm,
#submitButton,
#submitPro,
#disableSPAM {
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
min-height:2.5rem;
background:var(--evenement2);
color:#FFF;
font-size:0.875rem;
font-weight:600;
letter-spacing:0.05em;
text-transform:uppercase;
border:none;
border-radius:12px;
transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
cursor:pointer;
transform:translateY(0);
will-change:transform, box-shadow;
backface-visibility:hidden;
-webkit-font-smoothing:antialiased;
padding:0.5rem 4rem
}

#submitForm:hover,
#submitButton:hover,
#submitPro:hover,
#disableSPAM:hover {
background:var(--bordeaux);
transform:translateY(-2px)
}

#submitForm:active,
#submitButton:active,
#submitPro:active,
#disableSPAM:active {
transform:translateY(1px);
box-shadow:0 2px 4px -1px rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1), 0 0 0 2px rgb(255 255 255 / 0.1) inset
}

#submitForm i,
#submitButton i,
#submitPro i,
#disableSPAM i {
display:inline-flex;
align-items:center;
margin-right:0.5rem;
font-size:1em
}

#submitForm:focus-visible,
#submitButton:focus-visible,
#submitPro:focus-visible,
#disableSPAM:focus-visible {
outline:2px solid var(--mainColorA, #3B82F6);
outline-offset:2px
}

#closePostuler {
display:inline-block;
position:relative;
width:auto;
background:none;
border:none;
font-size:2.4rem;
color:var(--subColorA);
cursor:pointer;
margin:0;
padding:0
}

.profileSelector {
display:flex;
gap:2rem;
background:#f8f9fa;
border-radius:var(--radius-sm);
margin-bottom:2rem;
padding:1rem
}

.profileOption {
display:flex;
align-items:center;
gap:0.5rem;
cursor:pointer;
}

.profileOption input[type="radio"] {
width:1.125rem;
height:1.125rem;
margin:0
}

.profileOption label {
font-weight:500;
color:var(--mainColorA);
cursor:pointer;
margin:0
}

.dynamicFields {
opacity:0;
max-height:0;
overflow:hidden;
transition:all 0.3s ease
}

.dynamicFields.show {
opacity:1;
max-height:2000px
}

.footer_newsletter_hp { position:absolute; left:-9999px; opacity:0; height:0; width:0 }