/*==================================================================
    BORDER OPERATIONS
    LOGIN.CSS PREMIUM V4
===================================================================*/

/*==========================
    GOOGLE FONT
==========================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/*==========================
    VARIABLES
==========================*/

:root{

    --primary:#0A4DB8;
    --primary-dark:#06367F;

    --secondary:#F7941D;

    --white:#FFFFFF;

    --background:#F4F7FC;

    --text:#233044;

    --text-light:#6B7280;

    --border:#D9E2EC;

    --shadow:
        0 25px 70px rgba(0,0,0,.15);

    --radius:24px;

}

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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Inter',sans-serif;

    background:

    linear-gradient(
        135deg,
        #0A4DB8,
        #06367F
    );

    width:100%;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}

/*==========================
    PAGE
==========================*/

.login-page{

    width:100%;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

}

/*==========================
    CARTE
==========================*/

.login-card{

    width:1120px;

    max-width:95%;

    min-height:680px;

    height:auto;

    display:flex;

    overflow:hidden;

    border-radius:24px;

    background:#FFFFFF;

    box-shadow:var(--shadow);

    position:relative;

}

/*==========================
    PANNEAU GAUCHE
==========================*/

.left-panel{

    width:50%;

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    overflow:hidden;

}

/*==========================
    PHOTO
==========================*/

.background-image{

    position:absolute;

    inset:0;

    background:

        url("../images/login-background.jpeg")

        center center

        no-repeat;

    background-size:cover;

    z-index:1;

}

/*==========================
    OVERLAY
==========================*/

.overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        rgba(6,54,127,.45),

        rgba(4,30,92,.82)

    );

    z-index:2;

}

/*==========================
    CARTE DU MONDE
==========================*/

.world-map{

    position:absolute;

    width:115%;

    left:-8%;

    top:-25px;

    opacity:.28;

    z-index:3;

    pointer-events:none;

}

/*==========================
    CONTENU
==========================*/

.left-content{

    position:relative;

    z-index:5;

   padding:28px 28px 18px;

    color:#FFFFFF;

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

.logo{

    width:230px;

    display:block;

    margin:0 auto 20px;

    user-select:none;

    filter:
        drop-shadow(0 8px 18px rgba(0,0,0,.25));

}

/*=========================================================
    SLOGAN
=========================================================*/

.slogan{

    text-align:center;

    font-size:22px;

    font-weight:700;

    line-height:1.25;

    color:#FFFFFF;

    margin-bottom:12px;

    text-shadow:
        0 2px 10px rgba(0,0,0,.30);

}

.slogan span{

    color:#FFFFFF;

    font-weight:800;

}

/*=========================================================
    ETOILES
=========================================================*/

.stars{

    display:flex;

    justify-content:center;

    gap:10px;

    margin-bottom:20px;

}

.stars i{

    color:var(--secondary);

    font-size:14px;

}

/*=========================================================
    SERVICES
=========================================================*/

.services{

    display:flex;

    flex-direction:column;

    gap:10px;

}

/*=========================================================
    SERVICE
=========================================================*/

.service{

    display:flex;

    align-items:center;

    gap:18px;

    padding:6px 10px;

    border-radius:16px;

    transition:.35s;

}

.service:hover{

    background:rgba(255,255,255,.08);

    transform:translateX(8px);

}

/*=========================================================
    ICÔNES
=========================================================*/

.service-icon{

    width:46px;

    height:46px;

    min-width:46px;

    border-radius:50%;

    background:rgba(255,255,255,.15);

    border:1px solid rgba(255,255,255,.20);

    display:flex;

    justify-content:center;

    align-items:center;

    backdrop-filter:blur(10px);

}

.service-icon i{

    color:#FFFFFF;

    font-size:17px;

}

/*=========================================================
    TEXTE
=========================================================*/

.service-text{

    display:flex;

    flex-direction:column;

}

.service-text h4{

    margin:0;

    color:#FFFFFF;

    font-size:16px;

    font-weight:700;

    letter-spacing:.5px;

}

.service-text p{

    margin:3px 0 0;

    color:rgba(255,255,255,.78);

    font-size:11px;

    font-weight:400;

}

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

.left-footer{

    position:relative;

    z-index:10;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    padding:22px;

    background:rgba(0,0,0,.15);

    backdrop-filter:blur(12px);

    border-top:1px solid rgba(255,255,255,.10);

}

.left-footer span{

    color:#FFFFFF;

    font-size:13px;

    font-weight:500;

}

.separator-footer{

    opacity:.6;

}

/*=========================================================
    EFFETS DE LUMIÈRE
=========================================================*/

.left-panel::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    top:-180px;

    left:-180px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    filter:blur(80px);

    z-index:2;

}

.left-panel::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    bottom:-120px;

    right:-120px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

    filter:blur(70px);

    z-index:2;

}
/*=========================================================
    PANNEAU DROIT
=========================================================*/

.right-panel{

    width:50%;

    background:#FFFFFF;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    overflow:hidden;

}

/*=========================================================
    REFLET
=========================================================*/

.right-panel::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(10,77,184,.05);

    top:-180px;

    right:-180px;

    filter:blur(70px);

}

/*=========================================================
    CONTENU
=========================================================*/

.login-content{

    width:86%;

    margin:55px auto 0;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    position:relative;

    z-index:5;

}

/*=========================================================
    LANGUE
=========================================================*/

.language-box{

    position:absolute;

    top:22px;

    right:25px;

    z-index:20;

}

.language-btn{

    height:46px;

    padding:0 18px;

    display:flex;

    align-items:center;

    gap:10px;

    border:none;

    border-radius:12px;

    background:#F8FAFC;

    color:#374151;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    box-shadow:

        0 8px 20px rgba(0,0,0,.05);

    transition:.30s;

}

.language-btn:hover{

    background:#FFFFFF;

    color:var(--primary);

}

.language-btn i:first-child{

    color:var(--primary);

}

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

.login-title{

    text-align:center;

    font-size:36px;

    font-weight:800;

    color:var(--primary-dark);

    letter-spacing:1px;

    margin-bottom:8px;

}

/*=========================================================
    LIGNE
=========================================================*/

.title-line{

    width:65px;

    height:5px;

    border-radius:10px;

    margin:0 auto 25px;

    background:

        linear-gradient(

            90deg,

            var(--primary),

            #5AA9FF

        );

}

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

#loginForm{

    width:100%;

}

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

.form-group{

    margin-bottom:10px;

}

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

.form-label{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:6px;

    color:#334155;

    font-size:13px;

    font-weight:600;

}

.form-label i{

    color:var(--primary);

}
/*=========================================================
    INPUT GROUP
=========================================================*/

.input-group-custom{

    position:relative;

    width:100%;

}

/*=========================================================
    CHAMPS
=========================================================*/

.form-control{

    width:100%;

    height:52px;

    border:1px solid #D9E2EC;

    border-radius:14px;

    background:#FFFFFF;

    padding:0 60px 0 20px;

    font-size:14px;

    font-weight:500;

    color:#233044;

    transition:all .30s ease;

    box-shadow:none;

}

.form-control::placeholder{

    color:#9CA3AF;

}

.form-control:hover{

    border-color:var(--primary);

}

.form-control:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:

        0 0 0 4px rgba(10,77,184,.10);

}

/*=========================================================
    ICÔNE DANS LE CHAMP
=========================================================*/

.input-icon{

    position:absolute;

    right:18px;

    top:50%;

    transform:translateY(-50%);

    color:#94A3B8;

    font-size:16px;

    pointer-events:none;

}

/*=========================================================
    BOUTON MOT DE PASSE
=========================================================*/

.password-toggle{

    position:absolute;

    top:50%;

    right:14px;

    transform:translateY(-50%);

    width:38px;

    height:38px;

    border:none;

    border-radius:50%;

    background:transparent;

    color:#94A3B8;

    cursor:pointer;

    transition:.30s;

}

.password-toggle:hover{

    background:#EEF4FF;

    color:var(--primary);

}

/*=========================================================
    OPTIONS
=========================================================*/

.options{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:15px 0;

}

.remember{

    display:flex;

    align-items:center;

    gap:10px;

}

.remember input{

    width:18px;

    height:18px;

    accent-color:var(--primary);

    cursor:pointer;

}

.remember label{

    font-size:14px;

    color:#4B5563;

    cursor:pointer;

}

.forgot-link{

    font-size:14px;

    font-weight:600;

    color:var(--primary);

    transition:.30s;

}

.forgot-link:hover{

    color:var(--secondary);

}

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

.btn-login{

    width:100%;

    height:48px;

    border:none;

    border-radius:14px;

    background:

        linear-gradient(

            135deg,

            #0A4DB8,

            #1565FF

        );

    color:#FFFFFF;

    font-size:15px;

    font-weight:700;

    letter-spacing:.4px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    cursor:pointer;

    transition:.35s;

    box-shadow:

        0 15px 30px rgba(10,77,184,.28);

}

.btn-login:hover{

    transform:translateY(-2px);

    box-shadow:

        0 20px 40px rgba(10,77,184,.35);

}

.btn-login:active{

    transform:scale(.98);

}

/*=========================================================
    EFFET LUMINEUX
=========================================================*/

.btn-login{

    position:relative;

    overflow:hidden;

}

.btn-login::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:100%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.25),

            transparent

        );

    transition:.7s;

}

.btn-login:hover::before{

    left:120%;

}
/*=========================================================
    SÉPARATEUR
=========================================================*/

.divider{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:15px;

    margin:15px 0;

}

.divider span{

    flex:1;

    height:1px;

    background:#E2E8F0;

}

.divider p{

    margin:0;

    color:#94A3B8;

    font-size:13px;

    font-weight:600;

    letter-spacing:1px;

}

/*=========================================================
    BOUTON CONNEXION SÉCURISÉE
=========================================================*/

.btn-security{

    width:100%;

    height:46px;

    border:1px solid #D9E2EC;

    border-radius:14px;

    background:#FFFFFF;

    color:var(--primary);

    font-size:14px;

    font-weight:600;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    cursor:pointer;

    transition:.30s;

    box-shadow:0 8px 18px rgba(0,0,0,.05);

}

.btn-security:hover{

    border-color:var(--primary);

    background:#F8FBFF;

}

.btn-security i{

    font-size:18px;

}

/*=========================================================
    PLATEFORME SÉCURISÉE
=========================================================*/

.security-box{

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:10px;

    padding:12px 16px;

    border:1px solid #E8EDF5;

    border-radius:12px;

    background:#F8FAFD;

}

.security-icon{

    width:42px;

    height:42px;

    min-width:42px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,#0D6EFD,#0A58CA);

    color:#FFFFFF;

    box-shadow:0 4px 10px rgba(13,110,253,.25);

}

.security-icon i{

    font-size:18px;

    line-height:1;

}

.security-box h4{

    margin:0;

    font-size:15px;

    font-weight:700;

    color:#233044;

}

.security-box p{

    margin:4px 0 0;

    color:#64748B;

    font-size:13px;

}

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

.login-footer{

    margin-top:10px;

    text-align:center;

}

.login-footer p{

    margin:0;

    color:#94A3B8;

    font-size:13px;

    font-weight:500;

}

/*=========================================================
    ANIMATIONS
=========================================================*/

.login-card{

    animation:cardFade .8s ease;

}

.login-content{

    animation:contentFade .9s ease;

}

@keyframes cardFade{

    from{

        opacity:0;

        transform:scale(.96);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes contentFade{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=========================================================
    HOVER DE LA CARTE
=========================================================*/

.login-card:hover{

    box-shadow:
        0 35px 80px rgba(0,0,0,.20);

}

/*=========================================================
    SÉLECTION
=========================================================*/

::selection{

    background:var(--primary);

    color:#FFFFFF;

}
/*=========================================================
    RESPONSIVE - ÉCRANS ≤ 1400px
=========================================================*/

@media (max-width:1400px){

    .login-card{

        width:1000px;

        height:680px;

    }

    .logo{

        width:240px;

    }

    .slogan{

        font-size:30px;

    }

    .service-text h4{

        font-size:16px;

    }

    .service-text p{

        font-size:12px;

    }

}

/*=========================================================
    RESPONSIVE - ORDINATEURS PORTABLES
=========================================================*/

@media (max-width:1200px){

    .login-card{

        width:95%;

        height:auto;

    }

    .left-content{

        padding:40px;

    }

    .login-content{

        width:86%;

    }

}

/*=========================================================
    RESPONSIVE - TABLETTES
=========================================================*/

@media (max-width:992px){

    body{

        overflow:auto;

    }

    .login-page{

        padding:20px;

    }

    .login-card{

        flex-direction:column;

        width:100%;

        height:auto;

    }

    .left-panel{

        width:100%;

        min-height:420px;

    }

    .right-panel{

        width:100%;

        padding:45px 0;

    }

    .language-box{

        position:relative;

        top:auto;

        right:auto;

        display:flex;

        justify-content:center;

        margin-bottom:30px;

    }

    .login-content{

        width:90%;

    }

}

/*=========================================================
    RESPONSIVE - MOBILES
=========================================================*/

@media (max-width:768px){

    .left-content{

        padding:28px;

    }

    .logo{

        width:180px;

        margin-bottom:25px;

    }

    .slogan{

        font-size:22px;

        margin-bottom:20px;

    }

    .stars{

        margin-bottom:30px;

    }

    .service{

        padding:10px;

    }

    .service-icon{

        width:48px;

        height:48px;

        min-width:48px;

    }

    .service-icon i{

        font-size:18px;

    }

    .service-text h4{

        font-size:15px;

    }

    .service-text p{

        display:none;

    }

    .login-title{

        font-size:34px;

    }

    .form-control{

        height:56px;

    }

    .btn-login{

        height:58px;

    }

}

/*=========================================================
    PETITS SMARTPHONES
=========================================================*/

@media (max-width:480px){

    .login-page{

        padding:10px;

    }

    .login-card{

        border-radius:18px;

    }

    .logo{

        width:150px;

    }

    .slogan{

        font-size:19px;

    }

    .login-title{

        font-size:28px;

    }

    .language-btn{

        font-size:13px;

    }

    .btn-login{

        font-size:15px;

    }

}

/*=========================================================
    SCROLLBAR
=========================================================*/

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#EEF2F7;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

}

/*=========================================================
    TRANSITIONS
=========================================================*/

*{

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;

}

/*=========================================================
    FIN DU FICHIER
=========================================================*/