/*======================================
      INFORMATIONS
======================================*/
.information-sm {
    display: none;
}

.information-lg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("/img/contact/banniere.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: center;
}

.information-lg .zone-information {
    color: white;
    position: absolute;
    top: 50%;
    left: 60%;
    transform: translate(-50%, -50%);
    width: 30rem;
}

.zone-texte {
    border-left: 1px solid #ffffffb4;
    padding-left: 1rem;
}

.ligne-top {
    display: inline-flex;
}

.ligne-top .icone {
    font-size: 1.5rem;
}

.ligne-top .titre {
    font-size: 1.5rem;
    margin-left: 1.5rem;
}

.ligne-bottom {
    font-size: 1.2rem;
    margin-top: 0.5rem;
    margin-bottom: 5rem;
}

/*======================================
      FORMULAIRE
======================================*/
.formulaire {
    padding: 1rem 3rem 4rem 3rem;
}

.formulaire .titre {
    padding: 2rem;
    text-align: center;
}

.formulaire .titre {
    font-size: 3.5rem;
}

.formulaire .btn-form {;
    color: white;
    font-size: 1.1em;
    background: var(--color-bleu-light);
    border-radius: 10px;
    transition: all 0.2s ease-in-out;
}

.formulaire .btn-form:hover {
    background: var(--color-bleu-strong);
    transition: all 0.2s ease-in-out;
}

/*======================================
      RESPONSIVE
======================================*/

/* Extra large devices (large desktops, 1200px and down) */
@media (max-width: 1200px) {
    .formulaire {
        padding: 0 1rem;
    }

    .information-lg .zone-information {
        left: 70%;
    }

    .ligne-top .icone {
        font-size: 1.2rem;
    }

    .ligne-top .titre {
        font-size: 1.2rem;
        margin-left: 1.2rem;
    }

    .information-lg .ligne-bottom {
        font-size: 1rem;
        margin-top: 0.5rem;
        margin-bottom: 5rem;
    }
}

/* Large devices (desktops, 992px and down) */
@media (max-width: 992px) {
    .formulaire {
        padding: 0 0.5rem;
    }

    .information-lg {
        display: none;
    }

    .information-sm {
        display: block;
        padding-top: 2rem;
        background-color: #f5f5f5;
    }

    .zone-texte {
        border-left: 1px solid #4e4e4e;
    }

    .ligne-bottom {
        padding-bottom: 0.7rem;
        margin-bottom: 1.4rem;
    }

    .formulaire {
        padding: 0 2.5rem;
        border-top: none;
    }
}

/* Medium devices (tablets, 768px and down) */
@media (max-width: 768px) {
    .zone-information {
        display: none;
    }
}

/* Small devices (landscape phones, 576px and down) */
@media (max-width: 576px) {
    .bottom-form .btn-form {
        width: 270px;
    }

    .formulaire {
        padding: 0 1rem;
    }

    .formulaire .titre {
        padding: 1rem;
        font-size: 2.5rem;
    }
}