/* ========================================
CONFIRMATION DE FORMULAIRE
======================================== */

.form-confirmation-page {
    width: 100%;
    min-height: calc(100vh - 180px);

    margin: 0;

    padding:
        60px
        24px
        90px;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;
}


.form-confirmation {
    width: 100%;

    margin: 0;

    text-align: center;
}


/* ========================================
ICÔNE
======================================== */

.form-confirmation-icon {
    width: 64px;
    height: 64px;

    margin:
        0
        auto
        24px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--green-soft);
    color: var(--green-dark);

    font-family:
        "Segoe UI",
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 30px;
    font-weight: 700;
}


/* ========================================
TITRE
======================================== */

.form-confirmation .section-label {
    display: block;

    width: 100%;

    margin:
        0
        0
        14px;

    text-align: center;
}


.form-confirmation h1 {
    width: 100%;

    margin:
        0
        0
        26px;

    padding: 0;

    text-align: center;

    font-size: clamp(
        42px,
        7vw,
        68px
    );

    line-height: .98;

    letter-spacing: -2.8px;

    overflow-wrap: normal;
}


.form-confirmation h1::after {
    content: "";

    display: block;

    width: 66px;
    height: 7px;

    margin:
        20px
        auto
        0;

    border-radius: 20px;

    background: var(--header-green);
}


/* ========================================
TEXTES
======================================== */

.form-confirmation-text {
    width: 100%;
    max-width: 620px;

    margin:
        0
        auto;

    color: #5f6963;

    font-family:
        "Segoe UI",
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 17px;
    font-weight: 450;

    line-height: 1.6;

    text-align: center;
}


.form-confirmation-note {
    width: 100%;
    max-width: 620px;

    margin:
        16px
        auto
        0;

    color: #7a837d;

    font-family:
        "Segoe UI",
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 14px;
    font-weight: 450;

    line-height: 1.45;

    text-align: center;
}


/* ========================================
BOUTON
======================================== */

.form-confirmation-button {
    min-height: 56px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    margin-top: 30px;

    padding:
        0
        28px;

    border-radius: 7px;

    background: var(--coral);
    color: #fff;

    font-family:
        "Segoe UI",
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 16px;
    font-weight: 700;

    text-decoration: none;

    transition:
        transform .15s ease,
        filter .15s ease,
        box-shadow .15s ease;
}


.form-confirmation-button:hover {
    transform: translateY(-2px);

    filter: brightness(.97);

    box-shadow:
        0
        6px
        14px
        rgba(0, 0, 0, .07);
}


/* ========================================
TABLETTE
======================================== */

@media (max-width: 1024px) {

    .form-confirmation-page {
        padding:
            56px
            24px
            80px;
    }

    .form-confirmation h1 {
        font-size: clamp(
            46px,
            6vw,
            60px
        );

        letter-spacing: -2.4px;
    }

    .form-confirmation-text {
        max-width: 600px;
    }
}


/* ========================================
MOBILE
======================================== */

@media (max-width: 760px) {

    .form-confirmation-page {
        min-height: auto;

        padding:
            46px
            16px
            70px;
    }

    .form-confirmation-icon {
        width: 58px;
        height: 58px;

        margin-bottom: 21px;

        font-size: 27px;
    }

    .form-confirmation .section-label {
        margin-bottom: 12px;
    }

    .form-confirmation h1 {
        font-size: clamp(
            38px,
            11vw,
            48px
        );

        line-height: 1.02;

        letter-spacing: -2px;
    }

    .form-confirmation h1::after {
        width: 58px;
        height: 6px;

        margin-top: 18px;
    }

    .form-confirmation-text {
        max-width: 100%;

        font-size: 16px;
        line-height: 1.55;
    }

    .form-confirmation-note {
        max-width: 100%;

        font-size: 14px;
    }

    .form-confirmation-button {
        width: 100%;

        min-height: 54px;

        box-sizing: border-box;

        margin-top: 28px;

        padding:
            0
            22px;
    }
}


/* ========================================
PETITS MOBILES
======================================== */

@media (max-width: 480px) {

    .form-confirmation-page {
        padding:
            38px
            12px
            56px;
    }

    .form-confirmation-icon {
        width: 54px;
        height: 54px;

        margin-bottom: 18px;

        font-size: 25px;
    }

    .form-confirmation h1 {
        font-size: 36px;

        line-height: 1.04;

        letter-spacing: -1.6px;
    }

    .form-confirmation-text {
        font-size: 15px;
    }

    .form-confirmation-button {
        min-height: 52px;

        font-size: 15px;

        gap: 14px;

        margin-top: 26px;
    }
}