.elementor-28972 .elementor-element.elementor-element-7b6eccf .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:17px;}.elementor-28972 .elementor-element.elementor-element-7b6eccf .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-17px;}.elementor-28972 .elementor-element.elementor-element-7b6eccf .elementor-field-group.recaptcha_v3-bottomleft, .elementor-28972 .elementor-element.elementor-element-7b6eccf .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-28972 .elementor-element.elementor-element-7b6eccf .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-28972 .elementor-element.elementor-element-7b6eccf .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-28972 .elementor-element.elementor-element-7b6eccf .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}body.rtl .elementor-28972 .elementor-element.elementor-element-7b6eccf .elementor-labels-inline .elementor-field-group > abbr{padding-left:0px;}body:not(.rtl) .elementor-28972 .elementor-element.elementor-element-7b6eccf .elementor-labels-inline .elementor-field-group > abbr{padding-right:0px;}body .elementor-28972 .elementor-element.elementor-element-7b6eccf .elementor-labels-above .elementor-field-group > abbr{padding-bottom:0px;}.elementor-28972 .elementor-element.elementor-element-7b6eccf .elementor-field-type-html{padding-bottom:0px;}.elementor-28972 .elementor-element.elementor-element-7b6eccf .dce-signature-wrapper{text-align:left;--canvas-width:400px;}.elementor-28972 .elementor-element.elementor-element-7b6eccf .dce-signature-canvas{border-radius:3px 3px 3px 3px;border-width:1px 1px 1px 1px;background-color:#ffffff;}.elementor-28972 .elementor-element.elementor-element-7b6eccf .dce-signature-button-clear{color:#e62626;}.elementor-28972 .elementor-element.elementor-element-7b6eccf .dce-signature-button-clear i{color:#e62626;font-size:16px;}.elementor-28972 .elementor-element.elementor-element-7b6eccf .dce-signature-button-clear svg{fill:#e62626;width:16px;height:16px;}.elementor-28972 .elementor-element.elementor-element-7b6eccf .elementor-field-group .elementor-field:not(.elementor-select-wrapper){border-radius:5px 5px 5px 5px;}.elementor-28972 .elementor-element.elementor-element-7b6eccf .elementor-field-group .elementor-select-wrapper select{border-radius:5px 5px 5px 5px;}.elementor-28972 .elementor-element.elementor-element-7b6eccf .elementor-field-group .elementor-select-wrapper .select2{border-radius:5px 5px 5px 5px;}.elementor-28972 .elementor-element.elementor-element-7b6eccf .elementor-field-group .elementor-select-wrapper .select2 .elementor-field-textual{border-radius:5px 5px 5px 5px;}.elementor-28972 .elementor-element.elementor-element-7b6eccf .elementor-field-group .mce-panel{border-radius:5px 5px 5px 5px;}.elementor-28972 .elementor-element.elementor-element-7b6eccf .e-form__buttons__wrapper__button-next:hover{background-color:#D3B26C;color:#ffffff;}.elementor-28972 .elementor-element.elementor-element-7b6eccf .elementor-button[type="submit"]:hover{background-color:#D3B26C;color:#ffffff;}.elementor-28972 .elementor-element.elementor-element-7b6eccf .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-28972 .elementor-element.elementor-element-7b6eccf .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-28972 .elementor-element.elementor-element-7b6eccf .elementor-button{border-radius:5px 5px 5px 5px;}.elementor-28972 .elementor-element.elementor-element-7b6eccf .elementor-field-label-description .elementor-field-label{display:inline-block;}.elementor-28972 .elementor-element.elementor-element-7b6eccf .elementor-field-label-description:after{content:'?';display:inline-block;border-radius:50%;padding:2px 0;height:1.2em;line-height:1;font-size:80%;width:1.2em;text-align:center;margin-left:0.2em;color:#ffffff;background-color:#777777;}.elementor-28972 .elementor-element.elementor-element-7b6eccf .elementor-message.elementor-message-success{color:#FFFFFF;}.elementor-28972 .elementor-element.elementor-element-7b6eccf .elementor-message.elementor-message-danger{color:#FF0000;}.elementor-28972 .elementor-element.elementor-element-7b6eccf{--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}.elementor-28972 .elementor-element.elementor-element-7b6eccf .elementor-field-type-amount.elementor-field-group .dce-amount-visible{opacity:1;}.elementor-28972 .elementor-element.elementor-element-7b6eccf .elementor-field-type-dce_range input{opacity:1;}/* Start custom CSS for form, class: .elementor-element-7b6eccf *//* ═══════════════════════════════════════════════════════════════════
   SUMMEX · HABILLAGE DU WIDGET « FORMULAIRE » D'ELEMENTOR
   Reproduit le style du gabarit (champs soulignés, étiquettes laiton,
   bouton encre pleine largeur) SANS toucher au markup ni au mappage Zoho.

   INSTALLATION — aucune classe à ajouter
   Le widget porte déjà la classe .contact_form : la portée s'y accroche
   toute seule. Coller ce fichier dans la CSS du gabarit de formulaire
   (ou Elementor → Réglages du site → CSS personnalisé).
   .smx-form reste accepté comme portée de rechange.

   Sélecteurs relevés dans le DOM réel de summex.ca, pas devinés :
   • le chevron du menu déroulant est .select-caret-down-wrapper
     (et NON .elementor-select-caret-down-wrapper) → double chevron sinon ;
   • les étiquettes sont .elementor-screen-only (masquées, placeholders
     à la place) → ne jamais leur forcer display:block, sinon elles
     réapparaissent par-dessus les champs.

   Les !important sont nécessaires — Elementor injecte ses propres styles
   depuis les contrôles du widget, avec une spécificité élevée.
   ═══════════════════════════════════════════════════════════════════ */

:is(.contact_form,.smx-form){
  --smx-ink:#1A1815;
  --smx-ink-2:#514C45;
  --smx-soft:#8C867D;
  --smx-brass:#8A6F3A;
  --smx-cream-2:#F1ECE3;
  --smx-line:rgba(26,24,21,.2);
  --smx-sn:'Karla',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* ── Grille : gouttière de 20px, comme .r2/.r3 du gabarit ──────────
   On neutralise le padding de colonne d'Elementor et on repasse en
   column-gap, donc les largeurs doivent être recalculées.           */
:is(.contact_form,.smx-form) .elementor-form-fields-wrapper{
  margin:0 !important;
  column-gap:20px;
  row-gap:0}
:is(.contact_form,.smx-form) .elementor-field-group{
  padding:0 !important;
  margin-bottom:20px !important}
:is(.contact_form,.smx-form) .elementor-field-group.elementor-col-100{width:100% !important}
:is(.contact_form,.smx-form) .elementor-field-group.elementor-col-50 {width:calc(50% - 10px) !important}
:is(.contact_form,.smx-form) .elementor-field-group.elementor-col-33 {width:calc(33.333% - 13.34px) !important}
:is(.contact_form,.smx-form) .elementor-field-group.elementor-col-66 {width:calc(66.666% - 6.67px) !important}
:is(.contact_form,.smx-form) .elementor-field-group.elementor-col-25 {width:calc(25% - 15px) !important}

/* Sous 560px : tout passe sur une seule colonne */
@media(max-width:559px){
  :is(.contact_form,.smx-form) .elementor-field-group[class*="elementor-col-"]{width:100% !important}
}

/* ── Étiquettes ─────────────────────────────────────────────────── */
:is(.contact_form,.smx-form) .elementor-field-label:not(.elementor-screen-only){
  display:block !important;
  font-family:var(--smx-sn) !important;
  font-size:.5625rem !important;
  font-weight:500 !important;
  letter-spacing:.22em !important;
  text-transform:uppercase !important;
  line-height:1.6 !important;
  color:var(--smx-brass) !important;
  margin-bottom:9px !important;
  padding:0 !important}
:is(.contact_form,.smx-form) .elementor-mark-required,
:is(.contact_form,.smx-form) .elementor-field-required > .elementor-field-label::after{
  color:var(--smx-brass) !important}

/* ── Champs : soulignés uniquement, fond transparent ────────────── */
:is(.contact_form,.smx-form) .elementor-field-textual,
:is(.contact_form,.smx-form) input[type="text"].elementor-field,
:is(.contact_form,.smx-form) input[type="email"].elementor-field,
:is(.contact_form,.smx-form) input[type="tel"].elementor-field,
:is(.contact_form,.smx-form) input[type="url"].elementor-field,
:is(.contact_form,.smx-form) input[type="number"].elementor-field,
:is(.contact_form,.smx-form) input[type="date"].elementor-field,
:is(.contact_form,.smx-form) textarea.elementor-field,
:is(.contact_form,.smx-form) select.elementor-field{
  width:100% !important;
  font-family:var(--smx-sn) !important;
  font-size:.9375rem !important;
  font-weight:300 !important;
  line-height:1.7 !important;
  color:var(--smx-ink) !important;
  background:transparent !important;
  background-color:transparent !important;
  padding:11px 0 !important;
  border:none !important;
  border-bottom:1px solid var(--smx-line) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  min-height:45px !important;
  transition:border-color .3s !important}

:is(.contact_form,.smx-form) .elementor-field-textual:focus,
:is(.contact_form,.smx-form) textarea.elementor-field:focus,
:is(.contact_form,.smx-form) select.elementor-field:focus{
  outline:none !important;
  box-shadow:none !important;
  border-bottom-color:var(--smx-brass) !important}

:is(.contact_form,.smx-form) .elementor-field-textual::placeholder{
  color:var(--smx-soft) !important;opacity:1 !important;font-weight:300}

:is(.contact_form,.smx-form) textarea.elementor-field{
  resize:vertical !important;
  min-height:84px !important}

/* ── Menu déroulant ────────────────────────────────────────────────
   Noms de classes relevés dans le DOM réel :
     <div class="elementor-select-wrapper remove-before">
       <div class="select-caret-down-wrapper"><i class="eicon-caret-down"></i></div>
   On masque le chevron d'Elementor ET la flèche native, puis on trace
   le nôtre. Sans cela : double chevron.                             */
:is(.contact_form,.smx-form) .elementor-select-wrapper{position:relative}
:is(.contact_form,.smx-form) .elementor-select-wrapper select{
  appearance:none !important;-webkit-appearance:none !important;
  -moz-appearance:none !important;
  background-image:none !important;
  padding-right:26px !important;cursor:pointer}
:is(.contact_form,.smx-form) .elementor-select-wrapper select::-ms-expand{display:none !important}
:is(.contact_form,.smx-form) .select-caret-down-wrapper,
:is(.contact_form,.smx-form) .elementor-select-caret-down-wrapper,
:is(.contact_form,.smx-form) .e-font-icon-svg-container,
:is(.contact_form,.smx-form) .eicon-caret-down{display:none !important}
:is(.contact_form,.smx-form) .elementor-select-wrapper::after{
  content:'';position:absolute;right:3px;top:50%;
  width:7px;height:7px;margin-top:-6px;pointer-events:none;
  border-right:1px solid var(--smx-brass);
  border-bottom:1px solid var(--smx-brass);
  transform:rotate(45deg)}
:is(.contact_form,.smx-form) select.elementor-field option{
  background:var(--smx-cream-2);color:var(--smx-ink)}

/* ── Case à cocher (acceptation / consentement) ─────────────────── */
:is(.contact_form,.smx-form) .elementor-field-type-acceptance .elementor-field-subgroup,
:is(.contact_form,.smx-form) .elementor-field-type-checkbox  .elementor-field-subgroup{margin-top:6px}
:is(.contact_form,.smx-form) .elementor-field-option{
  display:flex !important;align-items:flex-start !important;gap:12px !important}
:is(.contact_form,.smx-form) .elementor-field-option + .elementor-field-option{margin-top:12px}

:is(.contact_form,.smx-form) input[type="checkbox"],
:is(.contact_form,.smx-form) input[type="radio"],
:is(.contact_form,.smx-form) .elementor-acceptance-field{
  width:16px !important;height:16px !important;
  min-height:16px !important;
  margin:4px 0 0 !important;padding:0 !important;
  flex:0 0 auto !important;
  border:none !important;border-bottom:none !important;
  accent-color:var(--smx-brass);
  cursor:pointer}

:is(.contact_form,.smx-form) .elementor-field-option label,
:is(.contact_form,.smx-form) .elementor-field-type-acceptance .elementor-field-label{
  font-family:var(--smx-sn) !important;
  font-size:.8125rem !important;
  font-weight:300 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  line-height:1.6 !important;
  color:var(--smx-soft) !important;
  margin:0 !important;cursor:pointer}
:is(.contact_form,.smx-form) .elementor-field-option a,
:is(.contact_form,.smx-form) .elementor-field-type-acceptance a{
  color:var(--smx-brass) !important;text-decoration:underline}

/* ── Bouton d'envoi : encre pleine largeur, s'inverse au survol ─── */
:is(.contact_form,.smx-form) .elementor-field-type-submit,
:is(.contact_form,.smx-form) .e-form__buttons{
  width:100% !important;margin-top:6px !important}
:is(.contact_form,.smx-form) .e-form__buttons{justify-content:stretch !important}

:is(.contact_form,.smx-form) .elementor-button[type="submit"],
:is(.contact_form,.smx-form) .e-form__buttons__wrapper .elementor-button{
  display:inline-flex !important;
  align-items:center !important;justify-content:center !important;
  width:100% !important;
  font-family:var(--smx-sn) !important;
  font-size:.6875rem !important;
  font-weight:500 !important;
  letter-spacing:.2em !important;
  text-transform:uppercase !important;
  padding:18px 38px !important;
  min-height:54px !important;
  color:#FAF8F3 !important;
  background:var(--smx-ink) !important;
  background-color:var(--smx-ink) !important;
  border:1px solid var(--smx-ink) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  cursor:pointer;
  transition:background-color .3s,color .3s,border-color .3s !important}

:is(.contact_form,.smx-form) .elementor-button[type="submit"]:hover,
:is(.contact_form,.smx-form) .elementor-button[type="submit"]:focus{
  background:transparent !important;
  background-color:transparent !important;
  color:var(--smx-ink) !important;
  border-color:var(--smx-ink) !important}

:is(.contact_form,.smx-form) .elementor-button-content-wrapper{gap:0 !important}
:is(.contact_form,.smx-form) .elementor-button-text{font:inherit !important;letter-spacing:inherit !important}

/* ── Messages de validation / succès ────────────────────────────── */
:is(.contact_form,.smx-form) .elementor-message{
  font-family:var(--smx-sn) !important;
  font-size:.875rem !important;font-weight:300 !important;
  line-height:1.7 !important;margin-top:14px !important;padding:0 !important}
:is(.contact_form,.smx-form) .elementor-message.elementor-message-success{color:#4F6146 !important}
:is(.contact_form,.smx-form) .elementor-message.elementor-message-danger {color:#8E4433 !important}
:is(.contact_form,.smx-form) .elementor-field-group.elementor-error .elementor-field-textual{
  border-bottom-color:#8E4433 !important}
:is(.contact_form,.smx-form) .elementor-error .elementor-message{font-size:.75rem !important;margin-top:7px !important}

/* ── Remplissage automatique du navigateur ──────────────────────────
   Sans ceci, Chrome peint un fond blanc/jaune et casse le champ
   souligné sur le fond crème de la section.                        */
:is(.contact_form,.smx-form) input:-webkit-autofill,
:is(.contact_form,.smx-form) input:-webkit-autofill:hover,
:is(.contact_form,.smx-form) input:-webkit-autofill:focus,
:is(.contact_form,.smx-form) textarea:-webkit-autofill,
:is(.contact_form,.smx-form) select:-webkit-autofill{
  -webkit-text-fill-color:var(--smx-ink) !important;
  -webkit-box-shadow:0 0 0 60px var(--smx-cream-2) inset !important;
          box-shadow:0 0 0 60px var(--smx-cream-2) inset !important;
  caret-color:var(--smx-ink) !important;
  transition:background-color 9999s ease-in-out 0s}

/* ── Accessibilité ──────────────────────────────────────────────── */
:is(.contact_form,.smx-form) :focus-visible{outline:1px solid var(--smx-brass);outline-offset:4px}

@media(prefers-reduced-motion:reduce){
  :is(.contact_form,.smx-form) *,:is(.contact_form,.smx-form) *::before,:is(.contact_form,.smx-form) *::after{transition:none !important}
}/* End custom CSS */