/*DEBUT global -----------------------------------------------------*/
main {
    padding-bottom: 0;
}
.container {
    text-align: center;
    flex-direction: row;
    gap: 40px;
    margin-bottom: 5%;
}
/*FIN global*/

/*DEBUT bureau-contact -----------------------------------------------------*/
#info {
    width: 80%;
}
#bureau {
    display: flex;
    flex-direction: row;
    gap: 40px;
}
#bureau img {
    width: 100%;
    height: auto;
    margin-top: 20px;
}
#bureau h3 {
    text-align: left;
    font-size: 1.5em;
    font-weight: 400;
    margin-top: 15px;
    margin-bottom: 1px;
    color: black;
}
#mini-barres {
    position: relative;
    width: 100%;
    height: 3px;
    background: linear-gradient(
        to right,
        rgba(220,0,0,0.7) 50%,
        rgba(220,0,0,0.7) 50%,
        rgba(255,255,255,0.5) 90%,
        rgba(255,255,255,0.5) 90%,
        rgba(255,255,255,0) 100%
    );
    opacity: 0.85;
    border: none;
    z-index: 1000;
    margin-bottom: 10px;
}
/*FIN bureau-contact*/


/*DEBUT formulaire-contact -----------------------------------------------------*/
#formu {
    width: 35%;
}
#formucontact {
    margin-bottom: 30px;
}
#formu input,
#formu textarea {
    width: 100%;
    padding: 10px 0 10px 0;
    text-indent: 10px; 
    margin-bottom: 10px;
    border: none;
    background-color: rgb(187, 65, 68, 0.50);
    color: black;
    resize: none;
}
#formu input::placeholder,
#formu textarea::placeholder {
    color: rgb(219, 219, 219);
    opacity: 1;
}
#formu input:focus,
#formu textarea:focus {
    outline: 2px solid #bb4144;
    caret-color: #bb4144;
}
form::after {
    content: "";
    position: fixed; 
    right: -2%;
    top: 52%;
    transform: translateY(-100%);
    width: 12px;
    height: 80px;
    background: 
        radial-gradient(circle at center, #bb4144 30%, transparent 30%) 0 0/12px 12px,
        radial-gradient(circle at center, #c85659 30%, transparent 30%) 0 16px/12px 12px,
        radial-gradient(circle at center, #d56b6e 30%, transparent 30%) 0 32px/12px 12px,
        radial-gradient(circle at center, #e28083 30%, transparent 30%) 0 48px/12px 12px,
        radial-gradient(circle at center, #f0d5d7 30%, transparent 30%) 0 64px/12px 12px;
    background-repeat: no-repeat;
    z-index: 100;
    pointer-events: none;
}
#formu button {
    width: 50%;
    background-color: #bb4144;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 0.9em;
    margin-bottom: 100px; 
}
.g-recaptcha{
    margin-bottom: 20px !important;
    padding: 10px !important;
}
.grecaptcha-badge {
    visibility: hidden;
}
#recaptcha-info a {
    text-decoration: none;
    color: rgb(187, 65, 68);
    font-weight: bold;
    margin-top: 0 !important;
}
#recaptcha-info p {
    margin-top: 0 !important;
    font-size: xx-small !important;
    text-align: center;
}
/* FIN formulaire */


/*DEBUT responsive contact -----------------------------------------------------*/
@media screen and (max-width: 1465px) {
    .container {
        flex-direction: column;
        width: 90%;
    }
    #info {
        width: 100%;
    }

    #formu {
        width: 100%;
    }
    form::after {
        right: -4%;
    }
}
/*FIN responsive contact*/