body {
    background: #F0F8FF 0% 0% no-repeat padding-box;

}

/* ── Hero ── */
.hero {
    text-align: center;
    margin-bottom: 32px;
    margin-top: 50px;
}
.hero h1 {
    font-size: calc(1* var(--basePX) + 22px);
    font-weight: bold;
    font-family: "Poppins-Bold", sans-serif;
    letter-spacing: 0px;
    line-height: 1.2;
    color: var(--main-color_paragraphe);
    margin-bottom: 12px;
}
.hero p {
    font-size: calc(1* var(--basePX) + 6px);
    font-family: "Poppins-Medium", sans-serif;
    letter-spacing: 0px;
    line-height: 1.2;
    color: var(--black);
    max-width: 600px;
    margin: 0 auto;
}

/* ── Feature cards ── */
.features {
    display: flex;
    gap: 14px;
    margin-bottom: 40px;
}
.feature-card {
    flex: 1;
    background: var(--white);
    border: 1px solid var(--main-color_esn-forfait);
    border-radius: 9px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0px 3px 6px #00000029;
}
.feature-icon {
    width: 42px;
    height: 42px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--main-color_esn-forfait);
    box-shadow: 0px 3px 6px #00000029;
}
.feature-text .feature-title {
    font-size: calc(1* var(--basePX) + 5px);
    font-family: "Poppins-Medium", sans-serif;
    letter-spacing: 0px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 4px;
}
.feature-text .feature-desc {
    font-size: calc(1* var(--basePX) + 5px);
    font-family: "Poppins-Regular", sans-serif;
    letter-spacing: 0px;
    line-height: 1.2;
    color: var(--black);
    margin: 0;
}
/* ── Form section ── */
.form-section {
    text-align: center;
    margin-bottom: 24px;
}
.form-section h2 {
    font-size: calc(1* var(--basePX) + 15px);
    font-family: "Poppins-Bold", sans-serif;
    letter-spacing: 0px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--main-color_paragraphe);
    margin-bottom: 8px;
}
.form-section p {
    font-size: calc(1* var(--basePX) + 6px);
    font-family: "Poppins-Medium", sans-serif;
    letter-spacing: 0px;
    line-height: 1.2;
    color: var(--black);
    margin: 0;
}


.form-label {
    font-family: "Poppins-Bold", sans-serif;
    font-size: calc(1* var(--basePX) + 4px);
    font-weight: 600;
    letter-spacing: 0px;
    color: var(--black);
    margin-bottom: 6px;
    display: block;
    text-align: center;
    text-transform: uppercase;
}

.form-control::placeholder { 
    color: #707070; 
    text-align: center;
}

input.form-control,
select.form-control {
    border: 1px solid #e0e0e0;
    border-radius: 28px;
    padding: 10px 18px;
    background: var(--white) 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    transition: border-color 0.2s;
    height: 55px;
    text-align: center;
}
.form-control:focus {
    border-color: var(--main-color_esn-forfait);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(26,107,186,0.1);
}


select.form-control {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 44px;
    cursor: pointer;
}
select.form-control:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231a6bba' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

.creneau-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.creneau-wrapper .input-icon {
    position: absolute;
    left: 14px;
    display: flex;
    align-items: center;
    pointer-events: none;
    color: var(--main-color_esn-forfait);;
}

.custom--svg_calendar md-datepicker button.md-datepicker-button {
    height: 55px;
}

.error-feedback {
    text-align: center;
}

/* ── Submit button ── */
.btn-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: var(--main-color_esn-forfait);
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 16px 24px;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.2s;
}
.btn-submit:hover { 
    background: var(--white);
    color: var(--main-color_esn-forfait);
    border: 1px solid var(--main-color_esn-forfait);
}
.btn-submit svg { flex-shrink: 0; }

#creneau option:not([disabled]):not([value=""]) {
  font-weight: bold;
}

@media (max-width: 575.98px) {
    
    .hero h1 { font-size: calc(1* var(--basePX) + 14px); }
}

@media (max-width: 767.98px) {
    .features { flex-direction: column; }
}

body.dark .form-label,
body.dark .form-section p,
body.dark .feature-text .feature-title,
body.dark .feature-text .feature-desc,
body.dark .hero p {
    color: var(--white);
}

body.dark .feature-card {
    background: var(--dark-gray);
}