/* ------------------------------------------------------------------
   MADEGEECO — habillage des formulaires sur-mesure.
   Ne decrit que ce que la maquette n'avait pas : consentement, erreurs,
   depot de fichiers, piege a robots. Le reste — .booking-form-shell,
   .field-grid, .field, .choice-grid, .choice, .steps, .step,
   .form-step, .step-actions — vient de la couche de fidelite, sans
   duplication : une seule feuille decrit chaque composant.
   ------------------------------------------------------------------ */

/* Piege a robots : hors ecran, jamais reduit a 1 px avec overflow cache —
   ce montage-la est une cause classique de debordement horizontal. */
body .elementor .mgc-piege {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
}

body .elementor .mgc-requis {
  color: var(--coral);
  margin-left: 2px;
}

body .elementor .mgc-aide {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

body .elementor .mgc-erreur-champ {
  margin: 6px 0 0;
  color: var(--coral);
  font-size: 13px;
}

body .elementor .mgc-en-erreur input,
body .elementor .mgc-en-erreur select,
body .elementor .mgc-en-erreur textarea {
  border-color: var(--coral);
}

body .elementor .mgc-alerte {
  margin: 0 0 24px;
  padding: 14px 18px;
  border: 1px solid var(--coral);
  border-radius: 14px;
  background: rgba(200, 94, 69, 0.07);
  color: var(--coral);
  font-size: 14px;
}

body .elementor .mgc-message .lead {
  margin: 12px 0 0;
}

/* Consentement : une carte de choix a l'horizontale, pour rester dans la
   grammaire des etapes plutot que d'inventer un composant de plus. */
body .elementor .mgc-consentement {
  margin-top: 28px;
}

body .elementor .choice-inline {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
}

body .elementor .choice-inline input {
  margin-top: 2px;
  flex: 0 0 auto;
}

body .elementor .choice-inline:hover {
  border-color: var(--turquoise);
}

/* Zone de depot. Le champ natif est illisible et impossible a styler d'un
   poste a l'autre : on le masque derriere la zone, et on affiche la liste
   des fichiers choisis — sans elle, rien ne distingue « aucun fichier »
   de « trois fichiers ». */
body .elementor .mgc-depot {
  position: relative;
  padding: 26px 20px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  background: var(--paper);
  text-align: center;
  cursor: pointer;
  transition: border-color 180ms var(--ease-ui), background 180ms var(--ease-ui);
}

body .elementor .mgc-depot.est-survolee,
body .elementor .mgc-depot:hover {
  border-color: var(--turquoise);
  background: var(--turquoise-soft);
}

body .elementor .mgc-depot-champ {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

body .elementor .mgc-depot-libelle {
  color: var(--muted);
  font-size: 14px;
}

body .elementor .mgc-depot-liste {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
  font-size: 13px;
  color: var(--ink);
}

body .elementor .mgc-depot-liste li {
  padding: 6px 0;
  border-top: 1px solid var(--line);
}

body .elementor .mgc-depot.a-des-fichiers {
  border-style: solid;
  border-color: var(--turquoise);
  background: var(--white);
}

/* Sur un formulaire d'une seule etape, l'entete d'etapes n'existe pas :
   les boutons restent alignes a droite comme dans la maquette. */
body .elementor .mgc-formulaire:not(.mgc-multi) .step-actions {
  margin-top: 28px;
}

/* La maquette masque toute etape qui n'est pas active — ce qui, sur un
   formulaire rendu par le serveur, revient a livrer un formulaire vide
   quand le script ne charge pas. Ici c'est l'inverse : tout est visible,
   et c'est le script qui masque, avec [hidden]. */
body .elementor .mgc-formulaire .form-step {
  display: block;
}
body .elementor .mgc-formulaire .form-step[hidden] {
  display: none;
}

/* Sans JavaScript, toutes les etapes sont rendues a la suite : on les
   separe pour que la lecture reste possible. */
body .elementor .mgc-multi .form-step + .form-step {
  margin-top: 44px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}

/* Des que le script prend la main, il n'en montre qu'une : la separation
   n'a plus lieu d'etre. */
body .elementor .mgc-multi .form-step.is-active + .form-step,
body .elementor .mgc-multi .form-step[hidden] {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Les choix multiples deviennent des pastilles sur deux colonnes : six
   cases empilees occupent toute la hauteur et se lisent comme une liste
   de courses. C'est deja la grille de la maquette — on ne fait que la
   garder sous le point de rupture telephone. */
@media (max-width: 560px) {
  body .elementor .mgc-formulaire .choice-grid {
    grid-template-columns: 1fr;
  }
  body .elementor .mgc-depot {
    padding: 20px 14px;
  }
}