form {
background: #ffffff;
border-radius: 16px; width: 100%;  }
#form-catalogue {
width: 100%;
}
label {
font-weight: 500;
margin-top: 18px;
display: block;
}
#form-catalogue label {
font-weight: 500;
margin-top: 0;
margin-bottom: 6px;
display: block;
color: #131523;
}
.form-grid .consent label {
font-size: 12px;
font-weight: 400;
display: flex;
flex: 1 1 0;
min-width: 0;
align-items: center;
margin: 8px 0 8px 0;
}
.consent {
display: flex;
flex-wrap: wrap;
}
.consent input[type="checkbox"] {
margin-right: 12px;
width: 20px;
}
.consent .error-message {
flex-basis: 100%;
margin: 4px 0 8px 32px;
}
.captcha-area {
margin-top: 15px;
}
input,
textarea,
select {
width: 100%;
padding: 12px;
margin-top: 6px;
border-radius: 8px;
border: 1px solid #ccc;
font-size: 15px;
}
#submitBtn {
background-color: #f5a623;
color: white;
font-weight: bold;
cursor: pointer;
margin-top: 25px;
font-size: 18px;
border: none;
padding: 14px;
border-radius: 8px;
transition: .3s;
}
#submitBtn:hover {
background-color: #d87c15;
transition: .3s;
}
.demand-buttons {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 16px;
}
.demand-buttons button {
display: flex;
font-family: 'Poppins';
justify-content: center;
align-items: center;
padding: 16px;
font-size: 18px;
background-color: #f9f9f9;
border: 2px solid #ddd;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s;
}
.demand-buttons button:hover {
background-color: #f0f0f0;
border-color: #f5a623;
color: #131523;
}
.demand-buttons button.selected {
background-color: #f5a623;
color: white;
border-color: #f5a623;
}
.consent a {
text-decoration: underline #131523;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.hidden {
display: none;
}
.error-message {
color: #f74f4f;
font-size: 0.7em;
margin-top: 6px;
display: block;
height: auto; }
.error-message:empty {
display: none;
}
.input-error {
border-color: #f74f4f;
}
input[type="checkbox"] {
width: auto;
} .animated-toggle {
transition: opacity 0.3s;
opacity: 1;
}
.animated-toggle.hide {
opacity: 0;
}
.animated-toggle.gone {
display: none;
}
.scroll-margin {
scroll-margin: 90px;
}
@keyframes shake {
0% {
transform: translateX(0);
}
20% {
transform: translateX(-8px);
}
40% {
transform: translateX(8px);
}
60% {
transform: translateX(-6px);
}
80% {
transform: translateX(6px);
}
100% {
transform: translateX(0);
}
}
.input-error.shake,
.error-message.shake {
animation: shake 0.35s;
will-change: transform;
}
.error-message.shake {
animation: shake 0.35s;
will-change: transform;
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 20px; }
.d-flex {
display: flex;
} .form-grid .full-width {
grid-column: 1 / 3;
} .alert {
opacity: 0;
transform: translateY(-6px);
max-height: 0;
overflow: hidden;
pointer-events: none;
font-size: 17px;
margin-top: 24px;
transition:
opacity .35s ease,
transform .35s ease,
max-height .35s ease;
} .alert-show {
opacity: 1;
transform: translateY(0);
max-height: 160px; pointer-events: auto;
} .alert-success {
background: #e6ffed;
border: 1px solid #b7f5c9;
padding: 12px;
border-radius: 8px;
color: #007721;
text-align: center;
}
.alert-error {
background: #ffecec;
border: 1px solid #ffd0d0;
padding: 12px;
border-radius: 8px;
}
button[disabled],
.btn-locked {
opacity: .5;
cursor: not-allowed !important;
} @keyframes shake {
10%,
90% {
transform: translateX(-1px);
}
20%,
80% {
transform: translateX(2px);
}
30%,
50%,
70% {
transform: translateX(-4px);
}
40%,
60% {
transform: translateX(4px);
}
}
.shake {
animation: shake .35s;
} @media (prefers-reduced-motion: reduce) {
.alert {
transition: none;
transform: none;
}
.shake {
animation: none;
}
} @media (max-width: 700px) {
.form-grid {
grid-template-columns: 1fr;
gap: 18px 0;
}
.form-grid .full-width {
grid-column: 1;
}
} .form-grid label,
.form-grid input,
.form-grid select,
.form-grid textarea {
width: 100%;
box-sizing: border-box;
font-size: 16px;
font-family: 'Poppins';
}
.form-step {
color: #939393;
margin: 28px 0 8px 0;
font-size: 1rem;
font-weight: 200;
}
form {
background: #ffffff;
border-radius: 16px; width: 100%;  }
#form-catalogue {
width: 100%;
}
label {
font-weight: 500;
margin-top: 18px;
display: block;
}
.form-grid .consent label {
font-size: 12px;
font-weight: 400;
display: flex;
flex: 1 1 0;
min-width: 0;
align-items: center;
margin: 8px 0 8px 0;
}
.consent {
display: flex;
flex-wrap: wrap;
}
.consent input[type="checkbox"] {
margin-right: 12px;
width: 20px;
}
.consent .error-message {
flex-basis: 100%;
margin: 4px 0 8px 32px;
}
.captcha-area {
margin-top: 15px;
}
input,
textarea,
select {
width: 100%;
padding: 12px;
margin-top: 6px;
border-radius: 8px;
border: 1px solid #ccc;
font-size: 15px;
}
#submitBtn {
background-color: #f5a623;
color: white;
font-weight: bold;
cursor: pointer;
margin-top: 25px;
font-size: 18px;
border: none;
padding: 14px;
border-radius: 8px;
transition: .3s;
}
#submitBtn:hover {
background-color: #d87c15;
transition: .3s;
}
.demand-buttons {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 16px;
}
.demand-buttons button {
display: flex;
font-family: 'Poppins';
justify-content: center;
align-items: center;
padding: 16px;
font-size: 18px;
background-color: #f9f9f9;
border: 2px solid #ddd;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s;
}
.demand-buttons button:hover {
background-color: #f0f0f0;
border-color: #f5a623;
color: #131523;
}
.demand-buttons button.selected {
background-color: #f5a623;
color: white;
border-color: #f5a623;
}
.consent a {
text-decoration: underline #131523;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.hidden,
.is-hidden {
display: none;
}
.error-message {
color: #f74f4f;
font-size: 0.7em;
margin-top: 6px;
display: block;
height: auto; }
.error-message:empty {
display: none;
}
.input-error {
border-color: #f74f4f;
}
input[type="checkbox"] {
width: auto;
} .animated-toggle {
transition: opacity 0.3s;
opacity: 1;
}
.animated-toggle.hide {
opacity: 0;
}
.animated-toggle.gone {
display: none;
}
.scroll-margin {
scroll-margin: 90px;
}
@keyframes shake {
0% {
transform: translateX(0);
}
20% {
transform: translateX(-8px);
}
40% {
transform: translateX(8px);
}
60% {
transform: translateX(-6px);
}
80% {
transform: translateX(6px);
}
100% {
transform: translateX(0);
}
}
.input-error.shake,
.error-message.shake {
animation: shake 0.35s;
will-change: transform;
}
.error-message.shake {
animation: shake 0.35s;
will-change: transform;
}
.d-flex {
display: flex;
} .form-grid .full-width {
grid-column: 1 / 3;
} .alert {
opacity: 0;
transform: translateY(-6px);
max-height: 0;
overflow: hidden;
pointer-events: none;
font-size: 17px;
margin-top: 24px;
transition:
opacity .35s ease,
transform .35s ease,
max-height .35s ease;
} .alert-show {
opacity: 1;
transform: translateY(0);
max-height: 160px; pointer-events: auto;
} .alert-success {
background: #e6ffed;
border: 1px solid #b7f5c9;
padding: 12px;
border-radius: 8px;
color: #007721;
text-align: center;
}
.alert-error {
background: #ffecec;
border: 1px solid #ffd0d0;
padding: 12px;
border-radius: 8px;
}
button[disabled],
.btn-locked {
opacity: .5;
cursor: not-allowed !important;
} @keyframes shake {
10%,
90% {
transform: translateX(-1px);
}
20%,
80% {
transform: translateX(2px);
}
30%,
50%,
70% {
transform: translateX(-4px);
}
40%,
60% {
transform: translateX(4px);
}
}
.shake {
animation: shake .35s;
} @media (prefers-reduced-motion: reduce) {
.alert {
transition: none;
transform: none;
}
.shake {
animation: none;
}
} @media (max-width: 700px) {
.form-grid {
grid-template-columns: 1fr;
gap: 18px 0;
}
.form-grid .full-width {
grid-column: 1;
}
} .form-grid label,
.form-grid input,
.form-grid select,
.form-grid textarea {
width: 100%;
box-sizing: border-box;
font-size: 16px;
font-family: 'Poppins';
}
.form-step {
color: #939393;
margin: 28px 0 8px 0;
font-size: 1rem;
font-weight: 200;
} .form-section {
margin-top: 6px;
padding-top: 8px;
}
h3.form-section-title {
margin: 0 0 6px 0;
font-size: 16px;
line-height: 1.2;
font-weight: 400;
color: #919191;
}
p.form-section-help {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: #666;
}
.field-help {
display: block;
margin-top: 6px;
font-size: 13px;
line-height: 1.4;
color: #666;
} .form-grid {
gap: 16px 20px;
} .nested-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 20px;
}
.nested-grid .full-width {
grid-column: 1 / 3;
} #etablissementFields {
overflow: hidden;
opacity: 1;
transform: translateY(0);
max-height: 1200px;
transition:
opacity .25s ease,
transform .25s ease,
max-height .35s ease,
margin-top .25s ease;
}
#etablissementFields.is-hidden {
opacity: 0;
transform: translateY(-6px);
max-height: 0;
margin-top: 0;
pointer-events: none;
} #form-catalogue label {
font-weight: 500;
margin-top: 0;
margin-bottom: 0;
display: block;
color: #131523;
} #form-catalogue input:focus,
#form-catalogue textarea:focus,
#form-catalogue select:focus {
outline: none;
border-color: #f5a623;
box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.15);
} .consent {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 4px 0;
}
.consent input[type="checkbox"] {
margin: 3px 0 0 0;
width: 18px;
height: 18px;
flex: 0 0 auto;
}
.form-grid .consent label {
font-size: 13px;
line-height: 1.5;
font-weight: 400;
margin: 0;
display: block;
}
.consent .error-message {
flex-basis: 100%;
margin: 2px 0 0 30px;
} .captcha-area {
margin-top: 8px;
} @media (max-width: 700px) {
.nested-grid {
grid-template-columns: 1fr;
gap: 16px 0;
}
.nested-grid .full-width {
grid-column: 1;
}
.form-section-title {
font-size: 20px;
}
}
#form-catalogue select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-color: #ffffff !important;
color: #131523 !important;
font-family: 'Poppins', Arial, sans-serif !important;
font-size: 16px;
line-height: 1.4;
border: 1px solid #ccc;
border-radius: 8px;
padding: 12px 42px 12px 12px;
box-sizing: border-box;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23131523' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 14px;
}
#form-catalogue select option {
background-color: #ffffff;
color: #131523;
font-family: 'Poppins', Arial, sans-serif !important;
font-size: 16px;
}
#form-catalogue select:focus {
outline: none;
border-color: #f5a623;
box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.15);
}