/* ============================================================
   e-KOPIA
   PAGE DE CONNEXION
   ============================================================ */


/* ============================================================
   RESET
============================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* ============================================================
   HTML
============================================================ */

html {

    width: 100%;

    min-height: 100%;

}


/* ============================================================
   BODY
============================================================ */

body {

    width: 100%;

    min-height: 100vh;

    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: #f4f7fb;

    color: #14213d;

    overflow-x: hidden;

    /*
       Espace réservé au footer fixe
    */

    padding-bottom: 78px;

}


/* ============================================================
   HEADER
============================================================ */

.connexion-header {

    position: relative;

    width: 100%;

    height: 88px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 68px;

    background: #ffffff;

    border-bottom: 1px solid #dce4ee;

    z-index: 10;

}


/* ============================================================
   LIEN RETOUR
============================================================ */

.back-link {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: #0866d6;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    transition:
        color 0.2s ease,
        transform 0.2s ease;

}


.back-link:hover {

    color: #0757b7;

    transform: translateX(-2px);

}


.back-arrow {

    font-size: 18px;

    line-height: 1;

}


/* ============================================================
   LOGO
============================================================ */

.connexion-logo {

    position: absolute;

    top: 40px;

    right: 68px;

    z-index: 20;

    width: 106px;

    height: 106px;

    object-fit: contain;

    background: #ffffff;

}


/* ============================================================
   PAGE DE CONNEXION
============================================================ */

.connexion-page {

    width: 100%;

    min-height:
        calc(100vh - 166px);

    display: flex;

    justify-content: center;

    align-items: flex-start;

    padding:
        48px
        20px
        45px;

}


/* ============================================================
   CONTAINER
============================================================ */

.connexion-container {

    width: 100%;

    max-width: 500px;

}


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

.connexion-title {

    width: 100%;

    text-align: center;

    margin-bottom: 27px;

}


/* ============================================================
   MARQUE e-KOPIA
============================================================ */

.connexion-brand {

    display: block;

    margin-bottom: 8px;

    color: #0874e8;

    font-size: 14px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1.5px;

}


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

.connexion-title h1 {

    margin: 0 0 8px;

    color: #14213d;

    font-size: 34px;

    line-height: 1.2;

    font-weight: 800;

}


/* ============================================================
   SOUS-TITRE
============================================================ */

.connexion-title p {

    margin: 0;

    color: #687890;

    font-size: 15px;

    line-height: 1.5;

}


/* ============================================================
   MESSAGE ERREUR
============================================================ */

.connexion-error {

    width: 100%;

    margin-bottom: 20px;

    padding: 13px 16px;

    display: flex;

    flex-direction: column;

    gap: 3px;

    background: #fff5f5;

    border: 1px solid #ffb7b7;

    border-radius: 9px;

    color: #d62828;

    text-align: center;

    font-size: 13px;

    line-height: 1.5;

}


.error-title {

    font-weight: 700;

}


.error-message {

    font-weight: 400;

}


/* ============================================================
   CARTE DE CONNEXION
============================================================ */

.connexion-card {

    width: 100%;

    padding: 34px 36px;

    background: #ffffff;

    border: 1px solid #d9e3ef;

    border-radius: 16px;

    box-shadow:
        0 12px 32px rgba(
            31,
            55,
            86,
            0.08
        );

}


/* ============================================================
   FORMULAIRE
============================================================ */

.connexion-form {

    width: 100%;

}


/* ============================================================
   GROUPE
============================================================ */

.form-group {

    width: 100%;

    margin-bottom: 22px;

}


/* ============================================================
   LABEL
============================================================ */

.form-group label {

    display: block;

    margin-bottom: 8px;

    color: #14213d;

    font-size: 14px;

    font-weight: 700;

}


.required {

    color: #e63946;

    margin-left: 2px;

}


/* ============================================================
   INPUT IDENTIFIANT
============================================================ */

.form-group > input {

    display: block;

    width: 100%;

    height: 50px;

    padding:
        0
        14px;

    border:
        1px
        solid
        #cbd7e6;

    border-radius: 8px;

    background: #ffffff;

    color: #14213d;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 15px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;

}


.form-group > input:focus {

    border-color: #0874e8;

    background: #ffffff;

    box-shadow:
        0 0 0 3px
        rgba(
            8,
            116,
            232,
            0.10
        );

}


.form-group > input::placeholder {

    color: #9aa7b8;

}


/* ============================================================
   AIDE IDENTIFIANT
============================================================ */

.field-help {

    display: block;

    margin-top: 7px;

    color: #748197;

    font-size: 12px;

    line-height: 1.4;

}


/* ============================================================
   WRAPPER MOT DE PASSE
============================================================ */

.password-wrapper {

    position: relative;

    width: 100%;

    height: 50px;

    display: flex;

    align-items: center;

}


/* ============================================================
   INPUT MOT DE PASSE
============================================================ */

.password-wrapper input {

    display: block;

    width: 100%;

    height: 50px;

    padding:
        0
        100px
        0
        14px;

    border:
        1px
        solid
        #cbd7e6;

    border-radius: 8px;

    background: #ffffff;

    color: #14213d;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 15px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


.password-wrapper input:focus {

    border-color: #0874e8;

    box-shadow:
        0 0 0 3px
        rgba(
            8,
            116,
            232,
            0.10
        );

}


.password-wrapper input::placeholder {

    color: #9aa7b8;

}


/* ============================================================
   BOUTON AFFICHER / CACHER
============================================================ */

.toggle-password {

    position: absolute;

    top: 50%;

    right: 7px;

    transform: translateY(-50%);

    z-index: 20;

    width: 82px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    padding: 0;

    margin: 0;

    border:
        1px
        solid
        #c6d5e6;

    border-radius: 6px;

    background: #f2f6fb;

    color: #0866d6;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;

    font-weight: 700;

    line-height: 1;

    cursor: pointer;

    visibility: visible;

    opacity: 1;

    outline: none;

    box-shadow: none;

    appearance: none;

    -webkit-appearance: none;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.1s ease;

}


/* ============================================================
   ICÔNE DU BOUTON
============================================================ */

.toggle-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 15px;

    height: 15px;

    font-size: 13px;

    line-height: 1;

}


/* ============================================================
   TEXTE DU BOUTON
============================================================ */

.toggle-text {

    display: inline-block;

    white-space: nowrap;

}


/* ============================================================
   SURVOL
============================================================ */

.toggle-password:hover {

    background: #e6f0fb;

    border-color: #0866d6;

    color: #0757b7;

}


/* ============================================================
   CLIC
============================================================ */

.toggle-password:active {

    transform:
        translateY(-50%)
        scale(0.97);

}


/* ============================================================
   FOCUS CLAVIER
============================================================ */

.toggle-password:focus-visible {

    box-shadow:
        0 0 0 3px
        rgba(
            8,
            102,
            214,
            0.15
        );

}


/* ============================================================
   BOUTON SE CONNECTER
============================================================ */

.btn-connexion {

    display: block;

    width: 100%;

    height: 50px;

    margin-top: 3px;

    padding: 0 20px;

    border: none;

    border-radius: 8px;

    background: #0866d6;

    color: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    outline: none;

    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.1s ease;

}


.btn-connexion:hover {

    background: #0757b7;

    box-shadow:
        0 6px 16px
        rgba(
            8,
            102,
            214,
            0.20
        );

}


.btn-connexion:active {

    transform:
        translateY(1px);

}


/* ============================================================
   FOOTER FIXE
============================================================ */

.connexion-footer {

    position: fixed;

    left: 0;

    bottom: 0;

    width: 100%;

    min-height: 72px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        12px
        60px;

    background: #101d31;

    border-top:
        1px
        solid
        #1d2d45;

    z-index: 9999;

    box-shadow:
        0 -5px 18px
        rgba(
            0,
            0,
            0,
            0.08
        );

}


/* ============================================================
   NOM ENTREPRISE FOOTER
============================================================ */

.footer-brand {

    color: #ffffff;

    font-size: 13px;

    font-weight: 700;

    white-space: nowrap;

}


/* ============================================================
   CONTACTS FOOTER
============================================================ */

.footer-contacts {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 20px;

}


.footer-contacts a {

    color: #d5deea;

    text-decoration: none;

    font-size: 12px;

    line-height: 1.4;

    white-space: nowrap;

    transition:
        color 0.2s ease;

}


.footer-contacts a:hover {

    color: #ffffff;

    text-decoration: underline;

}


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

@media (max-width: 850px) {


    .connexion-header {

        padding:
            0
            30px;

    }


    .connexion-logo {

        right: 30px;

    }


    .connexion-footer {

        padding:
            12px
            30px;

    }


    .footer-contacts {

        gap: 13px;

    }


}


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

@media (max-width: 650px) {


    body {

        padding-bottom: 125px;

    }


    .connexion-header {

        height: 76px;

        padding:
            0
            18px;

    }


    .back-link {

        font-size: 13px;

    }


    .connexion-logo {

        width: 82px;

        height: 82px;

        right: 14px;

        top: 35px;

    }


    .connexion-page {

        min-height:
            calc(100vh - 201px);

        padding:
            42px
            14px
            30px;

    }


    .connexion-title {

        margin-bottom: 22px;

    }


    .connexion-title h1 {

        font-size: 29px;

    }


    .connexion-title p {

        font-size: 14px;

    }


    .connexion-card {

        padding:
            27px
            20px;

        border-radius: 13px;

    }


    /*
       Footer mobile fixe
    */

    .connexion-footer {

        min-height: 110px;

        flex-direction: column;

        justify-content: center;

        gap: 8px;

        padding:
            12px
            15px;

        text-align: center;

    }


    .footer-brand {

        font-size: 12px;

    }


    .footer-contacts {

        width: 100%;

        justify-content: center;

        gap:
            5px
            14px;

    }


    .footer-contacts a {

        font-size: 11px;

    }

}


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

@media (max-width: 430px) {


    body {

        padding-bottom: 150px;

    }


    .connexion-page {

        padding:
            38px
            10px
            25px;

    }


    .connexion-card {

        padding:
            24px
            16px;

    }


    .connexion-title h1 {

        font-size: 27px;

    }


    .connexion-brand {

        font-size: 13px;

    }


    .form-group > input {

        height: 48px;

    }


    .password-wrapper {

        height: 48px;

    }


    .password-wrapper input {

        height: 48px;

        padding-right: 92px;

    }


    .toggle-password {

        width: 76px;

        right: 6px;

    }


    .footer-contacts {

        flex-direction: column;

        gap: 3px;

    }


    .connexion-footer {

        min-height: 135px;

    }

}