/* Shortcode [fle2026_contact_form] — src/shortcodes/contact-form.php */

/* Honeypots — hors-écran plutôt que display:none (certains bots ignorent
   les champs display:none/visibility:hidden mais lisent la position). */
.fle2026-contact-form__hp {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Fond gris en pleine largeur d'écran — même principe que fle2026/chapo
   (blocks/chapo/style.css) : le shortcode n'est pas un bloc Gutenberg
   "align:full" (pas de contrôle d'alignement possible depuis l'éditeur),
   donc on reproduit nous-mêmes le débordement que WP applique normalement
   aux blocs alignfull (annule le padding d'entry-content des deux côtés). */
.fle2026-contact-form__bg {
    background: #E5E5EA;
    padding-block: 2.5rem;
    /* !important + max-width:none : sans ça, la règle générique de WP pour
       les enfants "is-layout-constrained" (max-width:content-size +
       margin:auto, elle-même en !important) l'emporte et empêche tout
       débordement — même mécanisme que .fle2026-contact-form plus bas. */
    max-width: none !important;
    margin-left: calc(-1 * var(--wp--style--root--padding-right, 0px)) !important;
    margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px)) !important;
    width: calc(100% + 2 * var(--wp--style--root--padding-right, 0px));
}

/* .fle2026-contact-form__notice (message de succès/erreur) est un frère du
   <form>, pas un enfant — même repositionnement pour rester sur la même
   colonne que le formulaire plutôt que de s'étaler sur toute la largeur du
   fond ci-dessus. */
.fle2026-contact-form,
.fle2026-contact-form__notice {
    /* En dessous de la largeur "wide", laisse au moins le padding racine de
       chaque côté (comme .fle2026-chapo__text) plutôt que de toucher les
       bords une fois le fond passé en pleine largeur ci-dessus. */
    max-width: min(40rem, 100% - 2 * var(--wp--style--root--padding-right, 0px));
    /* .fle2026-contact-form__bg déborde jusqu'au bord réel de l'écran
       (ci-dessus) : le contenu doit donc se repositionner par rapport au
       VIEWPORT entier pour retomber sur le bord de la colonne "wide", comme
       le texte de fle2026/chapo (formule identique, sans le terme
       "- padding" de la version précédente puisque le parent ne l'a plus). */
    margin-left: max(var(--wp--style--root--padding-right, 0px), (100vw - var(--wp--style--global--wide-size, 1200px)) / 2);
    margin-right: auto;
}

.fle2026-contact-form {
    font-size: var(--wp--preset--font-size--medium);
}

.fle2026-contact-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    margin: 0 0 1.75rem;
}

.fle2026-contact-form__field label {
    font-weight: 400;
    color: var(--wp--preset--color--gris);
}

.fle2026-contact-form__field input,
.fle2026-contact-form__field textarea {
    border: none;
    padding: 0.75em 1em;
    font: inherit;
    color: inherit;
    background: var(--wp--preset--color--blanc, #fff);
}

.fle2026-contact-form__field textarea {
    resize: vertical;
}

.fle2026-contact-form__submit {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: var(--wp--preset--spacing--40, 1.5rem);
}

.fle2026-contact-form__submit button {
    text-transform: none;
    font-size: var(--wp--preset--font-size--normal) !important;
    font-weight: 600;
    padding: 0.6em 1.5em !important;
    border-radius: 0;
    letter-spacing: normal;
    /* Même gris que le fond du formulaire plutôt que le blanc par défaut de
       .fle-btn-bord — les boutons se fondent dans le fond au lieu de
       ressortir en blanc. */
    background: #E5E5EA;
}

/* .fle-btn-bord--rouge (components.css) ne teinte que la bordure, pas le
   texte — repris en rouge ici uniquement pour "Valider" plutôt que dans la
   classe partagée, pour ne pas changer son usage ailleurs (sejours-by-region.php). */
.fle2026-contact-form__submit .fle-btn-bord--rouge {
    color: var(--wp--preset--color--rouge);
}

.fle2026-contact-form__notice {
    padding: 0.75em 1em;
    margin-bottom: var(--wp--preset--spacing--40, 1.5rem);
    border-radius: 4px;
    font-weight: 600;
}

.fle2026-contact-form__notice--ok {
    background: #eaf7ea;
    color: #1e7e1e;
    border: 1px solid #1e7e1e;
}

.fle2026-contact-form__notice--error {
    background: #fff3f3;
    color: #c0202d;
    border: 1px solid var(--wp--preset--color--rouge);
}