

.bloc-formulaire-contact {background-color: var(--couleur-secondaire-light); padding: 2rem; border-radius: 3rem; box-shadow: rgba(137, 108, 74, 0.4) 4px 4px;}
.bloc-formulaire-contact h2 {text-transform: none; font-weight: 400;}
.bloc-fc-select-wrapper { text-align: center;}
.bloc-formulaire-contact .form-motif-contact {position: relative; width: fit-content; padding: 2rem; margin: 3rem auto;}
.bloc-formulaire-contact .form-motif-contact .bloc-fc-select {display: inline-block;  border: none; cursor: pointer; appearance: none; -webkit-appearance: none; background-color: var(--couleur-principale);  box-shadow: #A82D23 3px 3px; font-size: 1.8rem; color: #fff; padding: 1rem 2.5rem 1rem 1.5rem; border-radius: .6rem; transform: rotate(-3deg) scale(1.1); text-align: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");  background-repeat: no-repeat;  background-position: right .3rem center; background-size: 20px; position: relative; z-index: 1; transition: var(--transition);}
.bloc-formulaire-contact .form-motif-contact .bloc-fc-select:focus {outline: none; box-shadow: #942e25 5px 5px; }




/* ── Panneaux formulaires 
*/
.bloc-fc-panels {
    margin-top: 16px;
}

.bloc-formulaire-contact .bloc-fc-panel {animation: bfc-fadein 0.3s ease;}

@keyframes bfc-fadein {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Ordre des éléments du formulaire CF7 : Turnstile (Cloudflare) juste au-dessus du bouton d'envoi,
   au lieu d'en haut (CF7 l'insère en premier enfant du <form>). */
.bloc-formulaire-contact .wpcf7-form {display: flex; flex-direction: column;}
.bloc-formulaire-contact .wpcf7-form > * {order: 1;}
.bloc-formulaire-contact .wpcf7-form > .wpcf7-turnstile {order: 2; margin-bottom: 1.6rem;}
.bloc-formulaire-contact .wpcf7-form > .form-row:has(.wpcf7-submit) {order: 3;}
.bloc-formulaire-contact .wpcf7-form > .akismet-fields-container,
.bloc-formulaire-contact .wpcf7-form > .wpcf7-response-output {order: 4;}

.bloc-formulaire-contact .form-row { display: flex; gap: 1.6rem; flex-wrap: wrap; margin-bottom: 1.6rem;}

.bloc-formulaire-contact .form-column {
    flex: 1 1 calc(50% - 8px);
    min-width: 200px;
    display: flex;
    flex-direction: column;
}

.bloc-formulaire-contact .form-column>p {margin: 0;}

.bloc-formulaire-contact .form-column input,
.bloc-formulaire-contact .form-column textarea,
.bloc-formulaire-contact .form-column select { width: 100%; padding: 1rem; border: .2rem solid var(--couleur-secondaire); border-radius: .6rem;  font-family: inherit; background-color: #fff; font-size: 1.8rem;}
.bloc-formulaire-contact .form-column input:focus,
.bloc-formulaire-contact .form-column textarea:focus,
.bloc-formulaire-contact .form-column select:focus {outline-color: var(--couleur-principale);}

.bloc-formulaire-contact .form-column label {font-weight: 400; color: var(--couleur-secondaire);}
.bloc-formulaire-contact .form-column input[type="date"] { color: #757575;}

.bloc-formulaire-contact .form-column.help-indic {position: relative;}
.bloc-formulaire-contact .form-column.help-indic .help {color: var(--couleur-secondaire); cursor: help;}
.bloc-formulaire-contact .form-column.help-indic.help-dlc .help {position: absolute; right: 0; top: -0.5rem;}
.bloc-formulaire-contact .form-column.help-indic.help-cb .help, .bloc-formulaire-contact .form-column.help-indic.help-lot .help {margin-left: auto; margin-bottom: .5rem;}
.bloc-formulaire-contact .form-column.help-indic .help::after {display: block; position: absolute; width: 0; top: 100%; right: 0; opacity: 0; z-index: 1; transition: var(--transition);}
.bloc-formulaire-contact .form-column.help-indic.help-dlc .help::after {content: url(../../../images/Aconsommeravant.jpg);}
.bloc-formulaire-contact .form-column.help-indic.help-cb .help::after {content: url(../../../images/Codebarre.jpg);}
.bloc-formulaire-contact .form-column.help-indic.help-lot .help::after {content: url(../../../images/Numlot.jpg);}
 .bloc-formulaire-contact .form-column.help-indic .help:hover::after {width: 20rem; opacity: 1;}


.bloc-formulaire-contact .form-column textarea {min-height: 6rem; resize: vertical;}

.bloc-formulaire-contact .full-width {
    width: 100%;
}

.bloc-formulaire-contact .form-row .wpcf7-submit,
.bloc-formulaire-contact .form-row input[type="submit"] {width: 100%; padding: 1rem 1.5rem; border-radius: .6rem; background: var(--couleur-principale); color: #fff; border: none; font-size: 2rem; text-transform: uppercase; letter-spacing: .05rem; cursor: pointer; transition: var(--transition)}
.bloc-formulaire-contact .form-row input[type="submit"] {box-shadow: #A82D23 3px 3px}
.bloc-formulaire-contact .form-row.midrow {width: calc(50% - 8px);}

.bloc-formulaire-contact .form-note {font-size: 1.4rem; font-weight: 400; margin: 0;}

/* ── Champ fichier traduit (bouton natif masqué, cf. functions.php) */
.bloc-formulaire-contact .mngs-file {position: relative; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; cursor: pointer; width: 100%;}
.bloc-formulaire-contact .mngs-file input[type="file"] {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap;}
.bloc-formulaire-contact .mngs-file-btn {display: inline-block; padding: .8rem 1.5rem; border: .2rem solid var(--couleur-secondaire); border-radius: .6rem; background-color: #fff; color: var(--couleur-secondaire); font-size: 1.6rem; transition: var(--transition);}
.bloc-formulaire-contact .mngs-file-name {font-size: 1.4rem; font-weight: 400; overflow-wrap: anywhere;}
.bloc-formulaire-contact .mngs-file input[type="file"]:focus-visible + .mngs-file-btn {outline: .2rem solid var(--couleur-principale); outline-offset: .2rem;}


.bloc-formulaire-contact .wpcf7-list-item {margin: 0;}
.bloc-formulaire-contact .wpcf7-list-item label {display: flex; gap: .8rem; cursor: pointer; align-items: center; font-size: 1.4rem; font-weight: 400;}
.bloc-formulaire-contact .wpcf7-list-item input[type="checkbox"] {width: fit-content;  margin-top: 3px; flex-shrink: 0; accent-color: var(--couleur-principale);}

@media (hover: hover) {
    .bloc-formulaire-contact .mngs-file:hover .mngs-file-btn {background-color: var(--couleur-secondaire); color: #fff;}
    .bloc-formulaire-contact .form-row .wpcf7-submit:hover {transform: rotate(-4deg) scale(1.03); box-shadow: #942e25 5px 5px;}
    .bloc-formulaire-contact .form-motif-contact .bloc-fc-select:hover { transform: scale(1.35);}

}

@media (min-width: 1025px) {
    .bloc-formulaire-contact {max-width: 90rem; margin-left: auto; margin-right: auto;}
    .bloc-formulaire-contact form {margin-top: 6rem;}
    .bloc-formulaire-contact {padding: 3rem 5rem;}
    .bloc-formulaire-contact .form-motif-contact .bloc-fc-select {transform: scale(1.3);}
    .bloc-formulaire-contact h2 {font-size: 3rem;}
    .bloc-formulaire-contact .form-column.help-indic.help-dlc .help {top: 0;}
    .bloc-formulaire-contact .form-column.help-indic.help-cb .help, .bloc-formulaire-contact .form-column.help-indic.help-lot .help {margin-bottom: 0;}
    .bloc-formulaire-contact .form-column.help-indic .help::after {top: 0; left: calc(100% + 1rem); right: auto;}


}