.elementor-581 .elementor-element.elementor-element-79e2b02{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-lottie{--caption-color:var( --e-global-color-text );}.elementor-widget-lottie .e-lottie__caption{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-581 .elementor-element.elementor-element-13ba2cd{width:var( --container-widget-width, 30% );max-width:30%;--container-widget-width:30%;--container-widget-flex-grow:0;}.elementor-581 .elementor-element.elementor-element-13ba2cd.elementor-element{--align-self:center;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-581 .elementor-element.elementor-element-ctc0001{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(max-width:767px){.elementor-581 .elementor-element.elementor-element-13ba2cd{--container-widget-width:224px;--container-widget-flex-grow:0;width:var( --container-widget-width, 224px );max-width:224px;}}/* Start custom CSS *//* =====================================================================
   Formulaire de contact — style du site
   =====================================================================
   A coller dans Elementor : Reglages de page > CSS personnalise
   (ou dans l onglet Avance du widget qui porte le formulaire).
   `body.elementor-page-581` est le mot-cle d Elementor : il designe automatiquement
   l element choisi — ne pas le remplacer.
   ===================================================================== */

body.elementor-page-581 .mairie-formulaire { margin: 20px 0 40px; }

/* --- Le thème du formulaire passe par les VARIABLES de WPForms --------
   WPForms 2.0 (« rendu moderne ») ne style plus ses champs par des règles
   figées : il pose des variables CSS sur `:root` et s'en sert partout,
   avec des sélecteurs longs du type
   `div.wpforms-container-full .wpforms-form input`.
   Lutter à coups de sélecteurs plus spécifiques serait sans fin — et
   casserait à la première mise à jour. On REDÉFINIT donc ces variables
   sur notre conteneur : elles héritent, et tout le formulaire suit, y
   compris les états que l'on ne voit pas d'ordinaire (erreur, focus,
   listes déroulantes, cases à cocher).
   -------------------------------------------------------------------- */
body.elementor-page-581 .mairie-formulaire .wpforms-container {
    /* champs */
    --wpforms-field-border-radius: 8px;
    --wpforms-field-border-size: 1px;
    --wpforms-field-border-color: #c9cedb;
    --wpforms-field-background-color: #ffffff;
    --wpforms-field-text-color: #151c43;
    --wpforms-field-size-input-height: 50px;
    --wpforms-field-size-padding-h: 16px;
    --wpforms-field-size-font-size: 18px;
    --wpforms-field-size-line-height: 24px;
    --wpforms-field-size-input-spacing: 20px;
    /* libellés */
    --wpforms-label-color: #151c43;
    --wpforms-label-sublabel-color: #707287;
    --wpforms-label-error-color: #d10a12;
    --wpforms-label-size-font-size: 20px;
    --wpforms-label-size-line-height: 26px;
    /* bouton */
    --wpforms-button-border-radius: 999px;
    --wpforms-button-border-size: 2px;
    --wpforms-button-border-color: #f3c42e;
    --wpforms-button-background-color: #25819f;
    --wpforms-button-text-color: #ffffff;
    --wpforms-button-size-font-size: 20px;
    --wpforms-button-size-padding-h: 40px;
    --wpforms-button-size-margin-top: 24px;
    /* séparateurs de page, barres de progression */
    --wpforms-page-break-color: #177a99;
}

/* Deux champs par ligne (Nom/Prénom, Objet/Email), message en pleine
   largeur. La classe `mairie-moitie` est posée sur les champs concernés
   depuis la configuration du formulaire. */
body.elementor-page-581 .mairie-formulaire .wpforms-field { padding: 10px 0; }
@media (min-width: 768px) {
    .mairie-formulaire .wpforms-field-container { display: flex; flex-wrap: wrap; gap: 0 30px; }
    .mairie-formulaire .wpforms-field { flex: 1 1 100%; }
    .mairie-formulaire .mairie-moitie { flex: 1 1 calc(50% - 15px); max-width: calc(50% - 15px); }
}
body.elementor-page-581 .mairie-formulaire .wpforms-field-label {
    font-family: 'helvetica', Arial, sans-serif; font-weight: 400; margin-bottom: 8px;
}
body.elementor-page-581 .mairie-formulaire .wpforms-required-label { color: #d10a12; }

/* Ce que les variables ne couvrent pas : les états au doigt et à l'œil.
   Sélecteur à quatre niveaux, calé sur celui de WPForms, sinon ses
   propres règles de survol reprennent la main. */
body.elementor-page-581 .mairie-formulaire div.wpforms-container-full .wpforms-form input:not([type="submit"]),
body.elementor-page-581 .mairie-formulaire div.wpforms-container-full .wpforms-form select,
body.elementor-page-581 .mairie-formulaire div.wpforms-container-full .wpforms-form textarea {
    font-family: 'helvetica', Arial, sans-serif;
    transition: border-color .25s ease, box-shadow .25s ease;
}
/* Le champ survolé s'annonce avant même le clic : sur un formulaire long,
   c'est ce qui permet de suivre où l'on en est. */
body.elementor-page-581 .mairie-formulaire div.wpforms-container-full .wpforms-form input:not([type="submit"]):hover,
body.elementor-page-581 .mairie-formulaire div.wpforms-container-full .wpforms-form select:hover,
body.elementor-page-581 .mairie-formulaire div.wpforms-container-full .wpforms-form textarea:hover { border-color: #177a99; }
/* Champ actif : l'anneau bleu du site, doublé d'un halo léger. Le halo
   seul ne suffirait pas — il disparaît en contraste élevé, l'anneau non. */
body.elementor-page-581 .mairie-formulaire div.wpforms-container-full .wpforms-form input:not([type="submit"]):focus,
body.elementor-page-581 .mairie-formulaire div.wpforms-container-full .wpforms-form select:focus,
body.elementor-page-581 .mairie-formulaire div.wpforms-container-full .wpforms-form textarea:focus {
    outline: 2px solid #177a99; outline-offset: 1px; border-color: #177a99;
    box-shadow: 0 0 0 4px rgba(23, 122, 153, .12);
}
body.elementor-page-581 .mairie-formulaire div.wpforms-container-full .wpforms-form ::placeholder { color: #9a9db0; opacity: 1; }
body.elementor-page-581 .mairie-formulaire div.wpforms-container-full .wpforms-form textarea { min-height: 260px; resize: vertical; }

/* La liste déroulante affiche la flèche du système : dépareillée d'un
   navigateur à l'autre. On la remplace par un chevron dessiné, aux
   couleurs de la page — un SVG en fond, net à toute taille et sans
   requête réseau. */
body.elementor-page-581 .mairie-formulaire div.wpforms-container-full .wpforms-form select {
    -webkit-appearance: none; appearance: none;
    padding-right: 44px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23151c43' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center;
}

/* Erreur : le champ prend un fond très légèrement teinté, l'erreur se
   repère donc sans avoir à lire. */
body.elementor-page-581 .mairie-formulaire div.wpforms-container-full .wpforms-form input.wpforms-error,
body.elementor-page-581 .mairie-formulaire div.wpforms-container-full .wpforms-form select.wpforms-error,
body.elementor-page-581 .mairie-formulaire div.wpforms-container-full .wpforms-form textarea.wpforms-error {
    border-color: #d10a12; background-color: #fdf5f5;
}
body.elementor-page-581 .mairie-formulaire div.wpforms-container-full .wpforms-form em.wpforms-error {
    display: block; margin-top: 7px;
    font-style: normal; font-size: 15px; font-weight: 700; color: #d10a12;
}

/* Message de confirmation : le vert générique de WPForms devient le bleu
   du site, avec un filet jaune qui l'accroche au reste de la page. */
body.elementor-page-581 .mairie-formulaire .wpforms-confirmation-container-full {
    margin: 0; padding: 20px 24px;
    background: #eef2f7; border: 0; border-left: 5px solid #f3c42e; border-radius: 6px;
    color: #151c43; font-family: 'helvetica', Arial, sans-serif; font-size: 18px; line-height: 1.55;
}
body.elementor-page-581 .mairie-formulaire .wpforms-confirmation-container-full p:last-child { margin-bottom: 0; }

/* --- Bouton d'envoi ---------------------------------------------------
   Strictement le même bouton que « S'inscrire à la gazette » du pied de
   page : remplissage jaune balayé depuis la gauche, libellé qui bascule
   au bleu nuit, chevron qui avance de 3px au survol. Seul le fond au
   repos change — teal ici, transparent sur le bleu du pied de page —
   parce que le libellé blanc doit rester lisible sur le blanc de cette
   page. Contraste du libellé : 4,8:1 au repos, 7,3:1 une fois rempli.

   Le sélecteur reprend celui de WPForms (quatre niveaux) : le sien pose
   déjà couleur et fond sur le bouton, un sélecteur plus court perdrait. */
body.elementor-page-581 .mairie-formulaire div.wpforms-container-full .wpforms-form button[type="submit"] {
    display: inline-flex; align-items: center; gap: 12px;
    width: auto; height: auto; padding: 14px 40px; cursor: pointer;
    font-family: 'helvetica', Arial, sans-serif; font-size: 20px; font-weight: 700;
    background-image: linear-gradient(#f3c42e, #f3c42e);
    background-repeat: no-repeat; background-position: left center; background-size: 0% 100%;
    transition: background-size .38s cubic-bezier(.4, 0, .2, 1),
                color .38s cubic-bezier(.4, 0, .2, 1), transform .25s ease, box-shadow .25s ease;
}
body.elementor-page-581 .mairie-formulaire div.wpforms-container-full .wpforms-form button[type="submit"]::after {
    content: ""; flex: 0 0 auto; width: 8px; height: 8px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .38s cubic-bezier(.4, 0, .2, 1);
}
body.elementor-page-581 .mairie-formulaire div.wpforms-container-full .wpforms-form button[type="submit"]:hover,
body.elementor-page-581 .mairie-formulaire div.wpforms-container-full .wpforms-form button[type="submit"]:focus-visible {
    background-size: 100% 100%; color: #243664; background-color: #25819f;
    transform: translateY(-2px); box-shadow: 0 8px 20px rgba(243, 196, 46, .35);
}
body.elementor-page-581 .mairie-formulaire div.wpforms-container-full .wpforms-form button[type="submit"]:hover::after,
body.elementor-page-581 .mairie-formulaire div.wpforms-container-full .wpforms-form button[type="submit"]:focus-visible::after {
    transform: rotate(-45deg) translate(3px, 3px);
}
body.elementor-page-581 .mairie-formulaire div.wpforms-container-full .wpforms-form button[type="submit"]:focus-visible {
    outline: 3px solid #243664; outline-offset: 3px;
}
body.elementor-page-581 .mairie-formulaire div.wpforms-container-full .wpforms-form button[type="submit"]:active {
    transform: translateY(0); box-shadow: none;
}
/* Pendant l'envoi, WPForms désactive le bouton : il doit cesser d'inviter
   au clic, sinon on tape deux fois et le message part en double. */
body.elementor-page-581 .mairie-formulaire div.wpforms-container-full .wpforms-form button[type="submit"]:disabled {
    opacity: .55; cursor: default; transform: none; box-shadow: none;
}/* End custom CSS */