/* Forminator habille aux classes az-form de site.css (le style integre de Forminator est coupe : form-style none).
   Charge apres site.css et avant adapt.css. Memes jetons (--s-*, --c-*, --t-*) que les maquettes ; ne vise que
   le balisage de Forminator (.forminator-*), jamais les classes az-form deja stylees par site.css.
   Pages qui portent un formulaire : devis (.az-devis), landings (.az-lp-hero, .az-contact--lp), contact (.az-contact). */

/* Forminator rend d'abord une boite d'attente (div.forminator-custom-form, retiree par son script) : sans effet visuel,
   sinon un plan sable vide se voit avant le formulaire et sans JavaScript. Seul le <form> est habille. */
div.forminator-custom-form[data-forminator-render] { display: none; }

/* ---------- Plan sable, champs soulignes (az-form) ---------- */
.forminator-custom-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--c-sand);
  border-radius: var(--radius);
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-size: var(--t-body);
}
/* Forminator pose display:none jusqu'a l'initialisation de son script : on laisse faire */
.forminator-custom-form[style*="display: none"] { display: none; }

/* Lignes de champs : deux colonnes cote a cote, une seule quand l'ecran se resserre (az-form__row) */
.forminator-custom-form .forminator-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: var(--s-4) var(--s-3);
}
.forminator-custom-form .forminator-col { min-width: 0; padding: 0; }
.forminator-custom-form .forminator-row.forminator-hidden { display: none; }
.forminator-custom-form .forminator-field { display: flex; flex-direction: column; gap: 0.25rem; }

.forminator-custom-form .forminator-label { font-size: var(--t-small); color: var(--c-ink-soft); }
.forminator-custom-form .forminator-field:focus-within .forminator-label { color: var(--c-ink); }
.forminator-custom-form .forminator-required { color: var(--c-ink-soft); }

.forminator-custom-form .forminator-input,
.forminator-custom-form .forminator-textarea,
.forminator-custom-form select {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.4rem 0;
  border: 0;
  border-bottom: 1px solid var(--c-ink-soft);
  border-radius: 0;
  background: transparent;
  color: var(--c-ink);
  font: inherit;
  font-size: var(--t-body);
  box-shadow: none;
}
.forminator-custom-form .forminator-input:focus-visible,
.forminator-custom-form .forminator-textarea:focus-visible,
.forminator-custom-form select:focus-visible {
  outline: none;
  border-bottom: 2px solid var(--c-ink);
}
.forminator-custom-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%232A2724' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 20px;
  cursor: pointer;
}
.forminator-custom-form .forminator-textarea {
  min-height: 7.5rem;
  padding-top: 0.6rem;
  line-height: 1.5;
  resize: vertical;
}

.forminator-custom-form .forminator-description {
  margin-top: 0.25rem;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--c-ink-soft);
}

/* Compteur de caracteres du champ Votre projet, colle a la description */
.forminator-custom-form .forminator-description [data-limit] { margin-left: 0.5em; white-space: nowrap; }

/* ---------- Erreurs : le message porte le sens, la couleur ne fait que l'appuyer ---------- */
.forminator-custom-form .forminator-has_error .forminator-input,
.forminator-custom-form .forminator-has_error .forminator-textarea,
.forminator-custom-form .forminator-has_error select,
.forminator-custom-form [aria-invalid="true"] {
  border-bottom: 2px solid var(--c-error);
}
.forminator-custom-form .forminator-error-message {
  margin-top: 0.35rem;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--c-error);
}
/* Message global d'erreur : visible tel quel (erreur serveur sans champ : nonce expire, envoi refuse). Quand des champs
   portent leur propre erreur il ne fait que les repeter : il reste pour les lecteurs d'ecran, masque a l'ecran. */
.forminator-custom-form .forminator-response-message.forminator-error {
  padding: 0;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--c-error);
}
.forminator-custom-form:has(.forminator-has_error) .forminator-response-message.forminator-error {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.forminator-custom-form .forminator-response-message[aria-hidden="true"]:empty { display: none; }

/* ---------- Photos : bouton natif en lien souligne, fichiers choisis en liste simple ---------- */
.forminator-custom-form .forminator-input-file {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0;
  border: 0;
  border-bottom: 1px solid var(--c-ink-soft);
  font-family: var(--f-sans);
  font-size: var(--t-small);
  color: var(--c-ink-soft);
  cursor: pointer;
}
.forminator-custom-form .forminator-input-file::file-selector-button {
  margin-right: var(--s-2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-ink);
  font: inherit;
  font-size: var(--t-body);
  text-decoration: underline;
  text-decoration-color: var(--c-clay);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  cursor: pointer;
}
.forminator-custom-form .forminator-uploaded-files { list-style: none; margin: 0; padding: 0; font-size: var(--t-small); }
.forminator-custom-form .forminator-upload--remove {
  border: 0;
  background: none;
  color: var(--c-ink);
  font: inherit;
  font-size: var(--t-small);
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- Consentement et bouton (az-form__consent, az-btn) ---------- */
.forminator-custom-form .az-form__consent { font-size: var(--t-small); line-height: 1.55; color: var(--c-ink-soft); }
.forminator-custom-form .az-form__consent .az-link { color: var(--c-ink); }
.forminator-custom-form .forminator-row-last { display: block; }
.forminator-custom-form .forminator-button-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 1.5rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--c-ink);
  color: var(--c-linen);
  font-family: var(--f-sans);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--ease);
}
/* Formulaire de contact (accueil, az-contact hors landings) : la maquette laisse le bouton a la largeur de son texte,
   au debut de la ligne, 8 px sous le dernier champ (.az-form__submit : align-self flex-start, margin-top --s-1) ;
   Forminator le pose dans div.forminator-field en flex colonne, qui l'etirait sur toute la largeur. Les landings
   (.az-contact--lp, plus bas) le gardent pleine largeur. */
.az-contact:not(.az-contact--lp) .forminator-button-submit { align-self: flex-start; margin-top: var(--s-1); }
/* Page devis : meme cause pour la largeur (.az-form__submit de devis.html : largeur du texte, sans marge haute). */
.az-devis__form .forminator-button-submit { align-self: flex-start; }
.forminator-custom-form .forminator-button-submit:hover { background: var(--c-ink-hover); }
.forminator-custom-form .forminator-button-submit:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }

/* ---------- Succes sur place (az-form-success) : le message prend la place du formulaire ---------- */
.forminator-custom-form .forminator-response-message.forminator-success {
  padding: 0;
  background: none;
}
/* Le message est dans le <form> de Forminator, qui est deja le plan sable avec son remplissage : .az-form-success (site.css)
   garde le sien pour la maquette (success posé seul dans la grille) et doublait le retrait (128 px au lieu de 64 a 1440). */
.forminator-custom-form .az-form-success {
  padding: 0;
  background: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
}
/* Cercle coché de devis.html (svg.az-form-success__icon, 40 px, vert sauge) : Forminator retire le <svg> du message de
   succès enregistré (filtre de balises), la coche est donc dessinée ici, mêmes dimensions, trait et couleur. */
.forminator-custom-form .az-form-success::before {
  content: "";
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--c-sage-deep);
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'><circle cx='12' cy='12' r='9.25'/><path d='M8 12.4l2.7 2.6L16 9.5'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'><circle cx='12' cy='12' r='9.25'/><path d='M8 12.4l2.7 2.6L16 9.5'/></svg>") center / contain no-repeat;
}
.forminator-custom-form .az-form-success__title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: var(--t-2xl);
  letter-spacing: -0.015em;
}
.forminator-custom-form .az-form-success__text { color: var(--c-ink-soft); }
.forminator-custom-form .az-form-success__text .az-link,
.forminator-custom-form .az-form-success__link { color: var(--c-ink); }

/* ---------- Formulaire court des landings (az-leadform) : Nom, Telephone, NPA sur une ligne, puis choix et bouton ----------
   Les lignes de Forminator se dissolvent (display: contents) pour que les champs prennent la grille a 6 colonnes
   de la maquette. Le parent de la page (.az-lp-hero__form ou .az-contact--lp) dit qu'il s'agit d'une landing. */
.az-lp-hero__form .forminator-custom-form,
.az-contact--lp .forminator-custom-form {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-3);
  padding: var(--s-4);
}
.az-lp-hero__form .forminator-custom-form[style*="display: none"],
.az-contact--lp .forminator-custom-form[style*="display: none"] { display: none; }
.az-lp-hero__form .forminator-row,
.az-contact--lp .forminator-row { display: contents; }
.az-lp-hero__form .forminator-row.forminator-hidden,
.az-contact--lp .forminator-row.forminator-hidden { display: none; }
.az-lp-hero__form .forminator-response-message,
.az-contact--lp .forminator-response-message { grid-column: 1 / -1; }
.az-lp-hero__form .forminator-col,
.az-contact--lp .forminator-col { grid-column: 1 / -1; }
.az-lp-hero__form #text-1, .az-contact--lp #text-1,
.az-lp-hero__form #phone-1, .az-contact--lp #phone-1,
.az-lp-hero__form #text-2, .az-contact--lp #text-2 { grid-column: span 2; }
.az-lp-hero__form #select-1, .az-contact--lp #select-1 { grid-column: span 3; }
.az-lp-hero__form .forminator-row-last, .az-contact--lp .forminator-row-last {
  display: flex;
  grid-column: span 3;
  align-self: end;
  order: 98;
}
.az-lp-hero__form .forminator-row-last .forminator-col,
.az-contact--lp .forminator-row-last .forminator-col,
.az-lp-hero__form .forminator-row-last .forminator-field,
.az-contact--lp .forminator-row-last .forminator-field { width: 100%; }
.az-lp-hero__form .forminator-button-submit, .az-contact--lp .forminator-button-submit { width: 100%; }
.az-lp-hero__form #html-1, .az-contact--lp #html-1 { order: 99; margin-top: -0.25rem; }

/* ---------- Placement : la grille du parent place le formulaire (comme .az-form dans les maquettes) ---------- */
.az-contact__grid > .forminator-custom-form { grid-column: 7 / 13; }
.az-devis .az-devis__grid > .forminator-custom-form { grid-column: 1 / 8; }

@media (max-width: 767px) {
  .forminator-custom-form { padding: var(--s-4) var(--s-3); }
  .az-lp-hero__form .forminator-custom-form, .az-contact--lp .forminator-custom-form { padding: var(--s-3); gap: var(--s-2); }
  .az-lp-hero__form #text-1, .az-contact--lp #text-1,
  .az-lp-hero__form #select-1, .az-contact--lp #select-1,
  .az-lp-hero__form .forminator-row-last, .az-contact--lp .forminator-row-last { grid-column: 1 / -1; }
  .az-lp-hero__form #phone-1, .az-contact--lp #phone-1 { grid-column: span 4; }
}
@media (max-width: 960px) {
  .az-contact__grid > .forminator-custom-form,
  .az-devis .az-devis__grid > .forminator-custom-form { grid-column: 1 / -1; }
}