/**
 * ==========================================================
 * IFRELO
 * Connexion - Version 2
 * ==========================================================
 */


/*************************************************
PAGE
*************************************************/

.ifrelo-login-page{

    background:var(--ifrelo-fond);

    margin:0;

    overflow:hidden;

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

}



/*************************************************
LAYOUT
*************************************************/

.ifrelo-login-wrapper{

    display:flex;

    height:100vh;

}



/*************************************************
COLONNE GAUCHE
*************************************************/

.ifrelo-login-left{

    width:420px;

    background:#ffffff;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:45px;

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

    z-index:5;

}



/*************************************************
LOGO
*************************************************/

.ifrelo-logo{

    font-size:36px;

    font-weight:700;

    letter-spacing:5px;

    color:var(--ifrelo-rouge);

    margin-bottom:35px;

}



/*************************************************
FORMULAIRE
*************************************************/

.ifrelo-form-group{

    margin-bottom:18px;

}



.ifrelo-label{

    display:block;

    font-size:14px;

    margin-bottom:6px;

    font-weight:600;

}



.ifrelo-input{

    width:100%;

    height:46px;

    padding:0 14px;

    border:1px solid #d7d7d7;

    border-radius:8px;

    font-size:15px;

    transition:.2s;

}



.ifrelo-input:focus{

    outline:none;

    border-color:var(--ifrelo-rouge);

}



/*************************************************
MOT DE PASSE OUBLIE
*************************************************/

.ifrelo-forgot{

    text-align:right;

    margin-top:5px;

    margin-bottom:20px;

}



.ifrelo-forgot a{

    font-size:12px;

    color:#888;

    text-decoration:none;

}



.ifrelo-forgot a:hover{

    color:var(--ifrelo-rouge);

}



/*************************************************
SE SOUVENIR
*************************************************/

.ifrelo-remember{

    margin-bottom:25px;

    font-size:14px;

}



.ifrelo-remember label{

    cursor:pointer;

}



.ifrelo-remember input{

    margin-right:6px;

}



/*************************************************
BOUTON PRINCIPAL
*************************************************/

.ifrelo-btn{

    width:100%;

    height:48px;

}



/*************************************************
CREATION ESPACE
*************************************************/

.ifrelo-register{

    margin-top:28px;

    text-align:center;

}



.ifrelo-register .ifrelo-btn{

    background:white;

    color:var(--ifrelo-rouge);

    border:2px solid var(--ifrelo-rouge);

    text-decoration:none;

}



.ifrelo-register .ifrelo-btn:hover{

    background:var(--ifrelo-rouge);

    color:white;

    text-decoration:none;

}



/*************************************************
COLONNE DROITE
*************************************************/

.ifrelo-login-right{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:45px;

}



/*************************************************
CARROUSEL
*************************************************/

.ifrelo-carousel{

    width:100%;

    max-width:700px;

}



.ifrelo-carousel-container{

    position:relative;

    overflow:hidden;

    min-height:330px;

}



/*************************************************
SLIDES
*************************************************/

.ifrelo-slide{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    background:white;

    border-radius:18px;

    padding:50px;

    box-shadow:var(--ifrelo-shadow);

    opacity:0;

    transform:translateX(40px);

    transition:

        opacity .7s ease,

        transform .7s ease;

}



.ifrelo-slide.active{

    opacity:1;

    transform:translateX(0);

}



.ifrelo-slide-icon{

    font-size:46px;

    margin-bottom:22px;

}



.ifrelo-slide h2{

    color:var(--ifrelo-rouge);

    margin-bottom:16px;

    font-size:30px;

}



.ifrelo-slide p{

    max-width:470px;

    line-height:1.7;

    color:#666;

    font-size:17px;

}



/*************************************************
POINTS
*************************************************/

.ifrelo-carousel-dots{

    position:absolute;

    bottom:20px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    gap:10px;

}



.ifrelo-carousel-dots span{

    width:8px;

    height:8px;

    border-radius:50%;

    background:#cccccc;

    transition:.3s;

}



.ifrelo-carousel-dots span.active{

    background:var(--ifrelo-rouge);

}



/*************************************************
RESPONSIVE
*************************************************/

@media(max-width:900px){

    .ifrelo-login-wrapper{

        flex-direction:column;

        overflow:auto;

    }

    .ifrelo-login-left{

        width:auto;

        box-shadow:none;

        padding:35px;

    }

    .ifrelo-login-right{

        padding:25px;

    }

}