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.975rem;
font-weight:500;
color:var(--beige);
margin-bottom:0.5rem;
transition:color 0.2s ease
}

.rowWrap > label.errorForm {
color:var(--error-color);
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:var(--error-color);
background-color:color-mix(in srgb, var(--error-color) 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(--input-bg);
border:1px solid var(--input-border);
border-radius:var(--radius-sm);
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(--input-focus)
}

.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(--input-border);
border-radius:0.25rem;
transition:all 0.2s ease;
cursor:pointer;
margin-top:0.125rem;
}

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

.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;
color:var(--label-color);
cursor:pointer
}

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

.rowWrap > input:required:valid:not(:placeholder-shown),
.rowWrap > textarea:required:valid:not(:placeholder-shown) {
border-color:var(--success-color)
}

.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
}

#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
}

.devis_section_title {
display:flex;
align-items:center;
gap:12px;
width:100%;
font-size:clamp(1rem, 0.9rem + 0.5vw, 1.2rem);
font-weight:700;
color:var(--beige);
margin:2rem 0 1.2rem 0;
padding:0
}

.devis_section_title:first-of-type { margin-top:0.5rem }

.devis_section_number {
display:inline-flex;
align-items:center;
justify-content:center;
flex-shrink:0;
width:32px;
height:32px;
background-color:var(--subColorA);
border-radius:50%;
font-size:0.85rem;
font-weight:700;
color:var(--black)
}

.devis_formules_grid {
display:flex;
flex-direction:column;
gap:10px;
width:100%;
margin-bottom:1.5rem
}

.devis_formule_card {
display:block;
position:relative;
background:color-mix(in srgb, var(--white) 5%, transparent);
border:2px solid color-mix(in srgb, var(--beige) 20%, transparent);
border-radius:var(--radius-sm);
cursor:pointer;
transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
padding:1rem 1.2rem
}

.devis_formule_card:hover {
background:color-mix(in srgb, var(--subColorA) 8%, transparent);
border-color:color-mix(in srgb, var(--subColorA) 50%, transparent)
}

.devis_formule_card:has(input:checked) {
background:color-mix(in srgb, var(--subColorA) 12%, transparent);
border-color:var(--subColorA);
box-shadow:0 0 0 1px var(--subColorA)
}

.devis_formule_radio {
position:absolute;
opacity:0;
width:0;
height:0;
pointer-events:none
}

.devis_formule_inner {
display:flex;
flex-direction:column;
gap:6px
}

.devis_formule_header {
display:flex;
align-items:center;
justify-content:space-between;
gap:12px
}

.devis_formule_nom {
font-size:clamp(0.9rem, 0.85rem + 0.3vw, 1.05rem);
font-weight:600;
color:var(--beige)
}

.devis_formule_nom i {
color:var(--subColorA);
margin-right:6px
}

.devis_formule_tarif {
flex-shrink:0;
font-size:0.95rem;
font-weight:700;
color:var(--subColorA);
white-space:nowrap
}

.devis_formule_tarif small {
font-weight:400;
font-size:0.75rem;
color:color-mix(in srgb, var(--beige) 60%, transparent)
}

.devis_formule_resume {
font-size:0.8rem;
color:color-mix(in srgb, var(--beige) 70%, transparent);
line-height:1.5;
margin:0
}

.devis_custom_wrap { margin-top:0 }

.devis_contact_prefs {
display:flex;
flex-wrap:wrap;
gap:10px;
width:100%;
margin-bottom:1.5rem
}

.devis_contact_option {
display:flex;
align-items:center;
gap:8px;
background:color-mix(in srgb, var(--white) 5%, transparent);
border:2px solid color-mix(in srgb, var(--beige) 20%, transparent);
border-radius:var(--radius-sm);
cursor:pointer;
transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
padding:0.7rem 1.2rem
}

.devis_contact_option:hover {
border-color:color-mix(in srgb, var(--subColorA) 50%, transparent)
}

.devis_contact_option:has(input:checked) {
background:color-mix(in srgb, var(--subColorA) 12%, transparent);
border-color:var(--subColorA)
}

.devis_contact_option input[type="radio"] {
appearance:none;
width:16px;
height:16px;
border:2px solid color-mix(in srgb, var(--beige) 40%, transparent);
border-radius:50%;
transition:all 0.2s ease;
margin:0
}

.devis_contact_option input[type="radio"]:checked {
border-color:var(--subColorA);
background:var(--subColorA);
box-shadow:inset 0 0 0 3px var(--black)
}

.devis_contact_option span {
display:flex;
align-items:center;
gap:8px;
font-size:0.875rem;
font-weight:500;
color:var(--beige)
}

.devis_contact_option span i {
font-size:0.8rem;
color:var(--subColorA)
}

@media(max-width:768px) {
	.devis_formule_header {
	flex-direction:column;
	align-items:flex-start;
	gap:4px
	}

	.devis_contact_prefs {
	flex-direction:column
	}

	.devis_contact_option {
	width:100%
	}
}