.formulaire-annuaire-wrapper {
  --field-width: 375px;
  --label-width: 300px;
  --gap-label-field: 10px;
  --submit-margin: calc(var(--label-width) + var(--gap-label-field));
}

.formulaire-annuaire-wrapper div.label-message .acf-label{
    width:100% !important;
    margin:20px 0 30px 0 !important;
    text-align:left !important;
}

.formulaire-annuaire-wrapper div.label-message .acf-label label{
    font-family: 'Poppins', sans-serif;
    font-size:20px;
    font-weight:600 !important;
}

.formulaire-annuaire-wrapper .frontend-form .legende-mentions-legales{
    margin-top:20px !important;
}

.formulaire-annuaire-wrapper .frontend-form .legende-mentions-legales label{
    font-size: 20px;
}

/* Tous les champs ACF dans ton formulaire spécifique */
.formulaire-annuaire-wrapper .frontend-form .acf-field {
    display: flex;
    align-items: center; /* aligne label et champ verticalement */
    gap: var(--gap-label-field); /* espace entre label et champ */
    margin-bottom:10px !important;
}

/* Label prend une largeur fixe */
.formulaire-annuaire-wrapper .frontend-form .acf-field .acf-label {
    width: var(--label-width); 
    margin: 0;
    text-align:right;
}

.formulaire-annuaire-wrapper .frontend-form .acf-field .acf-label label{
    font-family: 'Poppins', sans-serif;
    font-size:20px;
    font-weight:400;
}

/* Champ prend largeur fixe de 375px */
.formulaire-annuaire-wrapper .frontend-form .acf-field .acf-input input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
.formulaire-annuaire-wrapper .frontend-form .acf-field .acf-input select,
.formulaire-annuaire-wrapper .frontend-form .acf-field .acf-input textarea,
.formulaire-annuaire-wrapper .frontend-form .acf-field .acf-input .select2-selection,
.formulaire-annuaire-wrapper .frontend-form .acf-field .acf-input .acf-relationship {
    width: var(--field-width);
    max-width: 100%; /* pour éviter que ça déborde sur mobile */
    box-sizing: border-box; /* inclut padding et border dans la largeur */
    font-size: 18px;
    border-radius: 5px;
    border: 1px solid lightgray;
}

/* Limiter la largeur de l'éditeur WYSIWYG à var(--field-width) */
.formulaire-annuaire-wrapper .frontend-form .acf-field-wysiwyg .acf-editor-wrap {
    width: var(--field-width);
    max-width: 100%;
    box-sizing: border-box; /* inclut padding et border dans la largeur */
    height: 200px; /* remplace par la hauteur souhaitée */
    max-height: 400px; /* facultatif, limite maximale */
    margin-bottom:20px;
}

/* S'assurer que l'iframe de TinyMCE suit la même largeur */
.formulaire-annuaire-wrapper .frontend-form .acf-field-wysiwyg iframe, 
.formulaire-annuaire-wrapper .frontend-form .acf-field-wysiwyg .wp-editor-container {
    width: var(--field-width) !important;
    max-width: 100%;
    height: 200px !important; /* doit correspondre à la hauteur souhaitée */
}

/* Bouton d'envoi du formulaire */
.formulaire-annuaire-wrapper .frontend-form .acf-field-submit-button{
    margin-left:310px !important;
    margin-top:30px !important;
    width:var(--field-width) !important;
}

.formulaire-annuaire-wrapper .frontend-form .acf-field-submit-button .fea-submit-button{
    width:100%;
}

/* Traitement des libellés séparateurs de sections */
.formulaire-annuaire-wrapper .section-formulaire-annuaire {
    height:75px;
}

.formulaire-annuaire-wrapper .section-formulaire-annuaire .acf-label label{
    color:var(--ast-global-color-0) !important;
    font-weight:600 !important;
}

.formulaire-annuaire-wrapper .section-formulaire-annuaire .acf-message{
    width:var(--field-width);
    text-align:left;
}

.formulaire-annuaire-wrapper .section-formulaire-annuaire .acf-message::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--ast-global-color-0);
    transform: translateY(-50%);
}


/* ============================================
   RESPONSIVE : ADAPTATION MOBILE (smartphone)
   ============================================ */

@media screen and (max-width: 768px) {
    
    /* Passage en disposition verticale (colonne) */
    .formulaire-annuaire-wrapper .frontend-form .acf-field {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        margin-bottom: 20px !important;
    }
    
    /* Label prend toute la largeur et aligné à gauche */
    .formulaire-annuaire-wrapper .frontend-form .acf-field .acf-label {
        width: 100%;
        text-align: left;
    }
    
    .formulaire-annuaire-wrapper .frontend-form .acf-field .acf-label label {
        font-size: 16px;
    }
    
    /* Champs et conteneur acf-input prennent toute la largeur disponible */
    .formulaire-annuaire-wrapper .frontend-form .acf-field .acf-input {
        width: 100%;
    }
    
    .formulaire-annuaire-wrapper .frontend-form .acf-field .acf-input input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
    .formulaire-annuaire-wrapper .frontend-form .acf-field .acf-input select,
    .formulaire-annuaire-wrapper .frontend-form .acf-field .acf-input textarea,
    .formulaire-annuaire-wrapper .frontend-form .acf-field .acf-input .select2-selection,
    .formulaire-annuaire-wrapper .frontend-form .acf-field .acf-input .acf-relationship {
        width: 100% !important;
        font-size: 16px;
    }
    
    /* Éditeur WYSIWYG en pleine largeur */
    .formulaire-annuaire-wrapper .frontend-form .acf-field-wysiwyg .acf-editor-wrap {
        width: 100%;
    }
    
    .formulaire-annuaire-wrapper .frontend-form .acf-field-wysiwyg iframe,
    .formulaire-annuaire-wrapper .frontend-form .acf-field-wysiwyg .wp-editor-container {
        width: 100% !important;
    }
    
    /* Bouton d'envoi sans marge gauche */
    .formulaire-annuaire-wrapper .frontend-form .acf-field-submit-button {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    /* Sections séparateurs */
    .formulaire-annuaire-wrapper .section-formulaire-annuaire .acf-message {
        width: 100%;
    }
    
    /* Messages et légendes */
    .formulaire-annuaire-wrapper div.label-message .acf-label label {
        font-size: 18px;
    }
    
    .formulaire-annuaire-wrapper .frontend-form .legende-mentions-legales label {
        font-size: 16px;
    }
}