/* ESPACE UTILISATEUR PUBLIC */

body {
    background:var(--blanc);
}

.bloc_gauche {
    position:relative;
    min-height:100vh;
    padding:60px 8%;
    overflow:hidden;
    background:var(--creme);
}

.bloc_gauche:before {
    content:"";
    position:absolute;
    inset:0;
    opacity:.08;
    pointer-events:none;
    background-image:
        linear-gradient(rgba(36,60,53,.15) 1px,transparent 1px),
        linear-gradient(90deg,rgba(36,60,53,.15) 1px,transparent 1px);
    background-size:45px 45px;
}

.bloc_gauche:after {
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    right:-180px;
    bottom:-210px;
    opacity:.05;
    border:1px solid var(--vert);
    border-radius:50%;
    box-shadow:0 0 0 70px var(--vert),0 0 0 140px var(--vert);
    pointer-events:none;
}

.bloc_gauche .contenu {
    position:relative;
    z-index:1;
    width:100%;
    max-width:560px;
    margin-top:12vh;
    animation:apparition_gauche .3s ease-out;
}

.bloc_gauche .logo {
    margin-bottom:55px;
}

.bloc_gauche .logo img {
    display:block;
    width:230px;
    height:auto;
}

.bloc_gauche h1 {
    max-width:480px;
    margin-bottom:25px;
    font-size:3.2rem;
    font-weight:800;
    line-height:1.08;
    letter-spacing:-2px;
}

.bloc_gauche h1:after {
    content:"";
    display:block;
    width:65px;
    height:3px;
    margin-top:28px;
    border-radius:20px;
    background:var(--dore);
}

.bloc_gauche .texte {
    max-width:520px;
    margin-bottom:40px;
    color:var(--texte-secondaire);
    font-size:16px;
    line-height:1.7;
}

.avantage {
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:16px;
    color:var(--vert);
    font-size:15px;
    font-weight:600;
}

.avantage i {
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    flex:0 0 44px;
    border-radius:50%;
    background:rgba(143,174,157,.16);
    color:var(--vert);
    font-size:17px;
}

.col-lg-7 {
    border-left:1px solid rgba(36,60,53,.04);
    background:var(--blanc);
}

.zone_utilisateur {
    width:100%;
    animation:apparition_droite .3s ease-out;
}

.zone_utilisateur h2 {
    margin-bottom:10px;
    font-size:2.4rem;
    letter-spacing:-1px;
}

.zone_utilisateur .sous_titre {
    margin-bottom:35px;
    color:var(--texte-secondaire);
}

.zone_utilisateur .input-group {
    transition:.2s;
}

.zone_utilisateur .input-group-text {
    width:50px;
    justify-content:center;
    border-right:0;
}

.zone_utilisateur .input-group .form-control {
    border-left:0;
}

.zone_utilisateur .input-group .btn {
    width:52px;
    border-color:var(--bordure);
    background:var(--blanc);
    color:var(--texte-secondaire);
}

.zone_utilisateur .input-group .btn:hover {
    background:#FAFBFA;
    color:var(--vert);
}

.zone_utilisateur .input-group:focus-within {
    border-radius:var(--rayon);
    box-shadow:0 0 0 4px rgba(143,174,157,.15);
}

.zone_utilisateur .input-group:focus-within .form-control,
.zone_utilisateur .input-group:focus-within .input-group-text,
.zone_utilisateur .input-group:focus-within .btn {
    border-color:var(--vert-sauge);
}

.zone_utilisateur .bouton_principal {
    min-height:50px;
}

.aide_formulaire {
    margin-top:8px;
    color:var(--texte-secondaire);
    font-size:13px;
}

.separation {
    position:relative;
    margin:28px 0;
    text-align:center;
}

.separation:before {
    content:"";
    position:absolute;
    top:50%;
    left:0;
    right:0;
    height:1px;
    background:var(--bordure);
}

.separation span {
    position:relative;
    z-index:1;
    padding:0 15px;
    background:var(--blanc);
    color:var(--texte-secondaire);
    font-size:13px;
}

.bouton_google {
    min-height:50px;
    border:1px solid var(--bordure);
    background:#FCFDFC;
    color:var(--texte-secondaire);
    font-weight:500;
}

.bouton_google:hover {
    border-color:#BCC7C1;
    background:#F8FAF9;
    color:var(--vert);
}

.bouton_google i {
    font-size:16px;
}

.logo_mobile {
    margin-bottom:40px;
    text-align:center;
}

.logo_mobile img {
    width:190px;
    height:auto;
}

@keyframes apparition_gauche {
    from { opacity:0; transform:translateY(15px); }
    to { opacity:1; transform:translateY(0); }
}

@keyframes apparition_droite {
    from { opacity:0; transform:translateY(15px); }
    to { opacity:1; transform:translateY(0); }
}

@media (max-width:1199px) {
    .bloc_gauche { padding:55px 6%; }
    .bloc_gauche h1 { font-size:2.9rem; }
}

@media (max-width:991px) {
    .col-lg-7 { border-left:0; }

    .zone_utilisateur {
        max-width:560px;
        padding:45px 35px;
    }

    .zone_utilisateur h2,
    .zone_utilisateur .sous_titre {
        text-align:center;
    }
}

@media (max-width:575px) {
    .zone_utilisateur { padding:35px 24px; }
    .zone_utilisateur h2 { font-size:2rem; }
    .logo_mobile img { width:170px; }
}