/* ali aboudou — la page Contact (S11, étape 6, A-78) : le formulaire natif d'Elementor 4 (e-form) et l'enregistreur du
   message vocal (bloc HTML, contact.js). Les règles de maquette-v6/assets/pages.css (« Contact »), chargées seulement sur
   cette page (charte.php), après les feuilles de Hello, précédées de ce qu'il faut pour annuler ses styles et ceux par
   défaut des éléments de formulaire d'Elementor : formulaire en ligne (flex), marges internes des blocs, champs gris
   à bordure carrée, bouton d'envoi gris foncé, messages de réussite verts, boutons roses (#c36) de Hello. */
html .elementor .cform{display:block;margin-top:56px;max-width:880px;padding:0;text-align:left}
html .elementor .cform :is(.e-div-block-base,.elementor-widget-html){padding:0}
html .elementor .cform p{margin:0}

/* Les champs : trait bas en --ink-2 (contour d'un champ à 3:1 au moins, WCAG 1.4.11), libellé au-dessus, focus bleu */
html .elementor .cform__grid{display:grid;grid-template-columns:1fr 1fr;gap:28px var(--pad)}
html .elementor .field{display:flex;flex-direction:column;gap:8px}
html .elementor .field--wide{grid-column:1 / -1}
html .elementor .cform :is(.e-form-label-base,.cform__legend){font-size:14px;font-weight:500;line-height:1.55;color:var(--ink)}
html .elementor .cform :is(.e-form-label-base,.cform__legend) span{font-weight:400;color:var(--ink-2);margin-left:6px}
html .elementor .cform :is(.e-form-input-base,.e-form-textarea-base){height:auto;font:inherit;font-size:17px;line-height:1.55;color:var(--ink);
  background:var(--white);border:0;border-bottom:1px solid var(--ink-2);border-radius:var(--radius-focus) var(--radius-focus) 0 0;padding:12px 14px;width:100%;
  box-shadow:none;transition:border-color .2s ease}
html .elementor .cform .e-form-textarea-base{resize:vertical;min-height:150px;line-height:1.55}
html .elementor .cform :is(.e-form-input-base,.e-form-textarea-base):focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-bottom-color:var(--blue)}
html .elementor .field__help{font-size:13px;line-height:1.5;color:var(--ink-2)}
/* le champ fichier natif reçoit l'enregistrement de contact.js : il n'a pas à être vu */
html .elementor .cform input[type=file]{display:none}

/* Groupes : message vocal (bloc HTML, fieldset) et « Être rappelé » (role="group", posé par contact.js) */
html .elementor .cform :is(.rec,.cform__group){border:0;margin:40px 0 0;padding:28px 0 0;border-top:1px solid var(--line);min-width:0}
html .elementor .cform .rec legend{float:left;width:100%;padding:0;margin-bottom:16px;font-size:14px;font-weight:500;line-height:1.55;color:var(--ink)}
html .elementor .cform .rec legend span{font-weight:400;color:var(--ink-2);margin-left:6px}
html .elementor .cform .rec legend + *{clear:both}
html .elementor .cform .cform__legend{margin-bottom:16px}
html .elementor .cform [hidden]{display:none!important}
html .elementor .rec__bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
html .elementor .rec button.btn{white-space:nowrap}
html .elementor .rec__go::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--blue)}
html .elementor .rec.is-rec .rec__go::before{animation:rec-pulse 1s ease-in-out infinite}
@keyframes rec-pulse{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){html .elementor .rec.is-rec .rec__go::before{animation:none}}
html[data-a11y-pause] .elementor .rec.is-rec .rec__go::before{animation:none}
html .elementor .rec__time{font-size:15px;font-variant-numeric:tabular-nums;color:var(--ink-2)}
html .elementor .rec__audio{display:block;width:100%;max-width:420px;margin-top:16px}
html .elementor .rec__after{display:flex;gap:24px;margin-top:12px}
html .elementor .rec .rec__link,html .elementor .rec .rec__link:where(:hover,:focus){font:inherit;font-size:14px;color:var(--ink);background:none;border:0;border-radius:0;
  padding:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer;box-shadow:none}
html .elementor .rec__status{margin:12px 0 0;font-size:14px;color:var(--ink-2)}
html .elementor .rec__status:empty{display:none}

/* Champ piège : hors de l'écran (role et tabindex posés par contact.js) */
html .elementor .cform__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Rendez-vous : le bouton aligné à gauche, comme la maquette */
html .elementor .cta__btns--left{justify-content:flex-start;margin-top:36px;padding:0}

/* Envoi et messages */
html .elementor .cform__send{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
html .elementor .cform__send .btn{border-radius:999px;padding:16px 30px;font-size:15px;font-weight:500;line-height:1.2}
html .elementor .cform__note{font-size:14px;line-height:1.55;color:var(--ink-2);max-width:44ch}
html .elementor .cform__note a{color:inherit;text-decoration:underline;text-underline-offset:3px}
html .elementor .cform__msg{margin:28px 0 0;padding:18px 22px;border-radius:var(--radius-card);background:var(--white);color:var(--ink);
  border-left:3px solid var(--blue);font-size:17px;line-height:1.5;text-align:left}
html .elementor .cform__msg a{color:inherit;text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){html .elementor .cform__grid{grid-template-columns:1fr}}

/* La légende de la sonnette de l'en-tête (créée par contact.js) : un bouton qui se lit comme une légende, sans le rose de Hello */
html .elementor .sonner,html .elementor .sonner:where(:hover,:focus){font:inherit;font-size:13px;color:var(--ink);background:none;border:0;border-radius:0;
  padding:4px 0;cursor:pointer;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;transition:text-decoration-color .2s ease}
@media (hover:hover) and (pointer:fine){html .elementor .sonner:hover{text-decoration-color:currentColor}}