/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 10 version
*/

.formContainer {
    margin: 3.75rem auto;
    padding: 2rem;
}

/* Formulaire */
.formContainer form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 5rem;
}

/* Champs de saisie */
.formContainer input,
.formContainer textarea {
    padding: 1rem 1rem;
    font-family: inherit;
    font-size: max(2.5rem, 20px);
    background: #f5f2ef;
    color: #303030;
    border: none;
    border-bottom: 2px solid #bebebe;
}

/* Champ message */
.formContainer textarea {
    min-height: 5rem;
    resize: vertical;
}

/* Placeholder */
.formContainer input::-webkit-input-placeholder,
.formContainer textarea::-webkit-input-placeholder {
    color: #9aa0a6;
}

.formContainer input::-moz-placeholder,
.formContainer textarea::-moz-placeholder {
    color: #9aa0a6;
}

.formContainer input:-ms-input-placeholder,
.formContainer textarea:-ms-input-placeholder {
    color: #9aa0a6;
}

.formContainer input::-ms-input-placeholder,
.formContainer textarea::-ms-input-placeholder {
    color: #9aa0a6;
}

.formContainer input::placeholder,
.formContainer textarea::placeholder {
    color: #9aa0a6;
}

/* Focus */
.formContainer input:focus,
.formContainer textarea:focus {
    outline: none;
}

.formFlex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 5rem;
}

.formFlex * {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
}

.formAndLabel {
    display: -ms-grid;
    display: grid;
}

.formAndLabel label {
    font-size: max(2.5rem, 20px);
    -webkit-transform: translateY(calc(2.5rem + 1rem));
    -ms-transform: translateY(calc(2.5rem + 1rem));
    transform: translateY(calc(2.5rem + 1rem));
    padding-left: 1rem;
    -webkit-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease
}

.formContainer .formAndLabel:has(input:not(:-moz-placeholder-shown)) label,
.formContainer .formAndLabel:has(textarea:not(:-moz-placeholder-shown)) label {
    transform: translateY(0rem) !important;
    color: #bebebe;
}

.formContainer .formAndLabel:has(input:not(:-ms-input-placeholder)) label,
.formContainer .formAndLabel:has(textarea:not(:-ms-input-placeholder)) label {
    -ms-transform: translateY(0rem) !important;
    transform: translateY(0rem) !important;
    color: #bebebe;
}

.formContainer .formAndLabel:focus-within label,
.formContainer .formAndLabel:has(input:not(:placeholder-shown)) label,
.formContainer .formAndLabel:has(textarea:not(:placeholder-shown)) label {
    -webkit-transform: translateY(0rem) !important;
    -ms-transform: translateY(0rem) !important;
    transform: translateY(0rem) !important;
    color: #bebebe;
}

/* Boutons */
button {
    font-size: max(2.5rem, 20px);
    width: 50%;
    margin-top: 0.625rem;
    padding: 1rem;
    font-weight: 600;
    color: #ffffff;
    background: #303030;
    border: none;
    border-radius: 1rem;
    cursor: pointer;
    -webkit-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease;
}

/* Hover bouton */
.formContainer button:hover {
    background: #3f3f3f
}

/* Active bouton */
.formContainer button:active {
    background: #767676
}

@media only screen and (max-width: 600px) {
    .formFlex {
        display: -ms-grid;
        display: grid;
    }

    button {
        width: 100%;
        padding: 2rem 1rem;
    }
}