html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
}

body {
    min-height: 100vh;
}

* {
    box-sizing: border-box;
}


/*  PAGE DE CONNEXION */

.login-page {
    position: relative;
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 24px;
    overflow: hidden;
    background: radial-gradient( circle at 18% 18%, rgba(27, 177, 167, 0.22), transparent 24rem ), radial-gradient( circle at 82% 78%, rgba(18, 52, 86, 0.10), transparent 24rem ), linear-gradient( 180deg, #f8fcfc 0%, #edf7f6 100% );
    color: #123456;
}

    .login-page::before {
        position: absolute;
        top: -170px;
        right: -130px;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        background: rgba(27, 177, 167, 0.14);
        content: "";
    }

    .login-page::after {
        position: absolute;
        bottom: -190px;
        left: -150px;
        width: 460px;
        height: 460px;
        border-radius: 50%;
        background: rgba(18, 52, 86, 0.07);
        content: "";
    }


/* PANEL */

.login-panel {
    position: relative;
    z-index: 1;
    width: min(100%, 410px);
    padding: 38px 36px 36px;
    overflow: hidden;
    border: 1px solid rgba(190, 224, 221, 0.95);
    border-radius: 8px;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.96), rgba(250, 254, 253, 0.92) );
    box-shadow: 0 26px 70px rgba(18, 52, 86, 0.14), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
    backdrop-filter: blur(16px);
}

    .login-panel::before {
        position: absolute;
        inset: 0 0 auto;
        height: 4px;
        border-radius: 8px 8px 0 0;
        background: linear-gradient( 90deg, #1bb1a7, #7fd5c8 );
        content: "";
    }

    .login-panel::after {
        position: absolute;
        inset: 4px 0 auto;
        height: 1px;
        background: rgba(255, 255, 255, 0.92);
        content: "";
    }


/* LOGO */

.login-brand {
    display: grid;
    justify-items: center;
    gap: 13px;
    margin-bottom: 32px;
    text-align: center;
}

    .login-brand img {
        width: 72px;
        height: 72px;
        padding: 8px;
        border: 1px solid #d6ebe9;
        border-radius: 8px;
        background: #ffffff;
        box-shadow: 0 15px 34px rgba(18, 52, 86, 0.14);
    }

    .login-brand .brand-name-logo {
        display: block;
        width: min(100%, 115px);
        height: auto;
        margin-top: 2px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        object-fit: contain;
    }


/*  FORMULAIRE */

.login-form {
    display: grid;
    gap: 17px;
    justify-items: stretch;
}

.login-field {
    position: relative;
    display: grid;
    gap: 11px;
    margin: 0;
}

    .login-field + .login-field {
        margin-top: 8px;
    }

    .login-field > span:first-child {
        color: #607b84;
        font-size: 0.72rem;
        font-weight: 800;
        text-transform: uppercase;
    }


    /*  INPUTS*/

    .login-field input {
        width: 100%;
        min-height: 42px;
        padding: 0 12px;
        border: 1px solid #cfe2e5;
        border-radius: 8px;
        background: linear-gradient( 180deg, #ffffff 0%, #f8fcfb 100% );
        color: #123456;
        font-size: 0.9rem;
        font-weight: 650;
        outline: none;
        box-shadow: 0 9px 18px rgba(18, 52, 86, 0.045), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
        transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease, transform 150ms ease;
    }

        .login-field input::placeholder {
            color: #e4eaec;
            font-weight: 400;
            opacity: 1;
        }

        .login-field input:hover {
            border-color: #b7deda;
            background: #ffffff;
        }

        .login-field input:focus {
            border-color: #1bb1a7;
            background: #ffffff;
            box-shadow: 0 0 0 4px rgba(27, 177, 167, 0.14), 0 12px 24px rgba(18, 52, 86, 0.08);
            transform: translateY(-1px);
        }

    .login-field:focus-within > span:first-child {
        color: #1b8f87;
    }


/*  MOT DE PASSE */

.login-password-wrapper {
    position: relative;
    display: grid;
}

    .login-password-wrapper input {
        padding-right: 46px;
    }

.password-toggle {
    position: absolute;
    top: 50%;
    right: 7px;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #607b84;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

    .password-toggle:hover,
    .password-toggle:focus-visible {
        border-color: #cfe2e5;
        background: #f1fbfa;
        color: #1b8f87;
        outline: none;
    }

    .password-toggle svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2;
    }


/*  VALIDATION */

.login-validation {
    display: block;
    margin-top: -3px;
    color: #b64242;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
}

    .login-validation:empty {
        display: none;
    }

.login-error {
    padding: 11px 12px;
    border: 1px solid #efc5c5;
    border-radius: 8px;
    background: #fff7f7;
    color: #a43d3d;
    font-size: 0.88rem;
    font-weight: 700;
}

    .login-error:empty {
        display: none;
    }


/* BOUTON LOGIN */

.login-actions {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
}

.login-button {
    display: inline-grid;
    place-items: center;
    width: min(100%, 132px);
    min-height: 42px;
    margin: 0 auto;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient( 135deg, #1bb1a7, #38c2b8 );
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 14px 28px rgba(27, 177, 167, 0.24);
    transition: background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

    .login-button:hover,
    .login-button:focus-visible {
        background: linear-gradient( 135deg, #159a92, #2eb1a8 );
        color: #ffffff;
        text-decoration: none;
        outline: none;
        transform: translateY(-1px);
        box-shadow: 0 18px 36px rgba(27, 177, 167, 0.32);
    }


/*  PAGE DE SELECTION DU SERVICE */

.service-header {
    margin: -5px 0 27px;
    text-align: center;
}

.service-title {
    margin: 0;
    color: #123456;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.3;
}

.service-subtitle {
    margin: 10px 0 0;
    color: #71868d;
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.5;
}



.service-actions {
    display: grid;
    gap: 14px;
    width: 100%;
}

.service-button {
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 0 20px;
    font-size: 0.88rem;
}



    .service-button:active {
        transform: translateY(0);
        box-shadow: 0 8px 18px rgba(27, 177, 167, 0.22);
    }


/* MOBILE*/

@media (max-width: 520px) {

    .login-page {
        padding: 16px;
    }

    .login-panel {
        padding: 32px 22px 30px;
    }

    .login-button {
        width: 100%;
    }

    .service-title {
        font-size: 1.12rem;
    }
}