@import url('background.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');


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

html, body {

    margin:0;
    padding:0;

    height:100%;

    font-family:"Poppins",sans-serif;

}


/* =========================
   SECTION
========================= */

section {

    display:flex;

    width:100%;

    height:100vh;

    overflow:hidden;

}



/* =========================
   PARTIE GAUCHE
========================= */

.form-container {

    width:50%;

    background:#ffffff;

    color:#0b0e1f;


    display:flex;

    justify-content:center;

    align-items:center;


    padding:50px 40px;

    box-sizing:border-box;


    border-radius:0;


    box-shadow:

        10px 0 40px rgba(0,0,0,.08);


    position:relative;

}



/* LOGO */

.logo {

    width:60px;

    position:absolute;

    top:30px;

    left:30px;

    z-index:5;

}




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


.formulaire {

    width:320px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}



.formulaire h1 {

    font-size:2.5em;

    font-weight:700;

    margin:0 0 20px 0;

    color:#0b0e1f;

    letter-spacing:-.5px;

}



.formulaire form {

    width:100%;

    display:flex;

    flex-direction:column;

    gap:12px;

}



/* =========================
   CHAMPS LIQUID GLASS
========================= */


.champsRemplissage {

    width:100%;

    padding:13px 15px;


    font-size:15px;


    border-radius:16px;


    border:

        1px solid rgba(220,220,220,.8);


    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.95),
            rgba(245,245,250,.8)
        );


    backdrop-filter:blur(15px);

    -webkit-backdrop-filter:blur(15px);


    box-shadow:

        inset 0 1px 3px rgba(255,255,255,.9),

        0 8px 25px rgba(0,0,0,.06);


    outline:none;


    box-sizing:border-box;


    transition:.3s ease;

}



.champsRemplissage:focus {

    border-color:#0096ff;


    box-shadow:

        0 0 0 4px rgba(0,150,255,.12),

        0 15px 35px rgba(0,150,255,.18);

}



/* =========================
   PASSWORD
========================= */


.password-container {

    width:100%;

    position:relative;

}



.password-container input {

    padding-right:45px;

}



.password-container .toggle-password {

    position:absolute;

    right:15px;

    top:50%;

    transform:translateY(-50%);


    cursor:pointer;

    font-size:16px;

    color:#333;

}



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


.google-btn {

    display:flex;

    align-items:center;

    justify-content:center;


    gap:10px;


    width:100%;


    padding:12px 0;


    font-size:15px;


    font-weight:600;


    border-radius:16px;


    border:

        1px solid rgba(220,220,220,.8);



    background:

        rgba(255,255,255,.75);


    backdrop-filter:blur(15px);


    color:#0b0e1f;


    text-decoration:none;


    box-shadow:

        0 8px 25px rgba(0,0,0,.06);


    transition:.3s ease;

}



.google-btn:hover {

    transform:translateY(-2px);


    border-color:#0096ff;


    box-shadow:

        0 15px 35px rgba(0,150,255,.18);

}



.google-btn .google-icon 
{

    width:22px;
    height:22px;
}



/* =========================
   SEPARATEUR
========================= */


.separator {

    width:100%;

    display:flex;

    align-items:center;


    margin:18px 0;


    color:#999;

    font-size:13px;

}



.separator::before,
.separator::after {

    content:"";

    flex:1;

    border-bottom:1px solid #ddd;

}



.separator span {

    padding:0 12px;

}




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


.sendBtn {

    width:100%;
    padding:10px 0;
    font-size: 18px;
    font-weight:600;
    border:none;
    border-radius:16px;
    color:white;
    cursor:pointer;
    font-family:"Poppins",sans-serif;
    background: linear-gradient(100deg, #0096ff, #8c00ff);
    box-shadow:0 15px 35px rgba(0,150,255,.35);
    transition:.3s ease;

}



.sendBtn:hover {

    transform:translateY(-3px);


    box-shadow:

        0 20px 45px rgba(140,0,255,.35);

}



.sendBtn:disabled {

    opacity:.5;

    cursor:not-allowed;

}



/* =========================
   LIENS
========================= */


.liens {

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;


    gap:12px;


    margin-top:20px;

}



.signup-block {

    display:flex;

    gap:5px;

}



.signup-block p {

    margin:0;

    color:#555;

    font-size:14px;

}



.signup-block a,
.terms-info a {

    color:#8c00ff;

    text-decoration:none;

    font-weight:500;

}



.signup-block a:hover,
.terms-info a:hover {

    color:#0096ff;

}



.terms-info {

    width:100%;

    text-align:center;

    font-size: 7px;

    color:#999;

}



/* =========================
   PARTIE DROITE
========================= */


.text-container {

    width:50%;


    display:flex;

    justify-content:center;

    align-items:center;


    padding:80px 100px;


    color:white;


    background:

        radial-gradient(
            circle at 20% 20%,
            rgba(0,150,255,.3),
            transparent 50%
        ),

        radial-gradient(
            circle at 80% 80%,
            rgba(140,0,255,.25),
            transparent 50%
        ),

        #0b0e1f;

}



/* =========================
   SLIDER
========================= */


.slider-container {

    width:100%;

    max-width:520px;


    display:flex;

    flex-direction:column;

    align-items:center;

}



.slider-container img {

    width:100%;


    border-radius:25px;


    object-fit:cover;


    box-shadow:

        0 25px 60px rgba(0,0,0,.45);


    transition:opacity .4s ease;

}



.slider-buttons {

    display:flex;

    gap:10px;

    margin-top:25px;

}



.slider-btn {

    width:35px;

    height:5px;


    border:none;

    border-radius:10px;


    background:

        rgba(255,255,255,.45);


    cursor:pointer;


    transition:.3s ease;

}



.slider-btn.active {

    width:55px;

    background:white;

}




/* =========================
   TABLET
========================= */


@media(max-width:992px){


    section {

        flex-direction:column;

    }


    .form-container,
    .text-container {

        width:100%;

    }


    .text-container {

        display:none;

    }

}




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


@media(max-width:768px){


    .form-container {


        width:100%;

        height:100vh;


        padding:

            120px 25px 40px;


        box-shadow:none;


        align-items:center;

    }



    .formulaire {


        width:100%;

        max-width:320px;


        align-items:center;

    }



    .formulaire h1 {


        font-size:2em;


        text-align:center;


        width:100%;

    }



    .logo {


        width:55px;


        top:30px;


        left:50%;


        transform:translateX(-50%);

    }



    .champsRemplissage {


        font-size:16px;

        padding:14px 15px;

    }



    .sendBtn {

        font-size:16px;

    }



    .google-btn {

        font-size:16px;

    }

}



/* =========================
   PETITS TELEPHONES
========================= */


@media(max-height:700px) and (max-width:768px){


    .form-container {

        padding-top:90px;

    }



    .logo {

        top:20px;

    }



    .formulaire h1 {

        font-size:1.8em;

    }



    .liens {

        margin-top:12px;

    }

}