/* MMEA — Formulaire guidé « une question à la fois ».
   Intégré à la section contact du thème : aligné à gauche, sans carte
   centrée. Réutilise les tokens du thème (--trait, --encre, --taupe-t,
   --r, --rouge, --rouge-halo, --lin, --ff-*). Préfixé .mmea-etapes. */

.mmea-etapes{
  font-family:var(--ff-body,sans-serif); color:var(--noyer,#2C231B); margin-top:34px;
  /* Fond de la section qui accueille le formulaire : sert à la barre de
     navigation collée en bas, qui doit s'y fondre. */
  --etapes-fond:var(--copeau,#F2EBDD);
}
.contact .mmea-etapes{ --etapes-fond:var(--copeau-d,#EBE2CF); }
.mmea-etapes *{ box-sizing:border-box; }

/* Barre de progression */
.mmea-etapes .progress{ display:flex; align-items:center; gap:16px; margin-bottom:26px; }
.mmea-etapes .count{
  font-family:var(--ff-body,sans-serif); font-weight:700; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--chene-t,#86592C); white-space:nowrap;
}
.mmea-etapes .track{ position:relative; flex:1; height:2px; background:var(--trait,#DDD2BE); border-radius:2px; overflow:hidden; }
.mmea-etapes .fill{ position:absolute; top:0; left:0; bottom:0; width:25%; background:var(--rouge,#DA291C); transition:width .45s cubic-bezier(.22,1,.36,1); }

/* Étapes */
.mmea-etapes .step{ display:none; }
.mmea-etapes .step.is-active{ display:block; animation:mmeaFade .4s ease both; }
@keyframes mmeaFade{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

.mmea-etapes .q{
  font-family:var(--ff-display,sans-serif); font-weight:620;
  font-size:clamp(1.5rem,3.4vw,2rem); line-height:1.12; color:var(--noyer,#2C231B); margin:0 0 .35rem;
}
.mmea-etapes .q-sub{ color:var(--taupe-t,#6E6353); font-size:1rem; margin:0 0 1.5rem; }

/* Choix (type, ampleur, précisions) */
.mmea-etapes .choices{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mmea-etapes .choice{
  position:relative; font-family:var(--ff-body,sans-serif); font-size:15.5px; font-weight:500;
  text-align:left; color:var(--noyer,#2C231B); background:var(--lin,#FAF7F1);
  border:1px solid var(--trait,#DDD2BE); border-radius:var(--r,14px); padding:15px 18px;
  cursor:pointer; overflow:hidden; transition:border-color .2s ease, background .2s ease;
}
.mmea-etapes .choice .sub{ display:block; font-size:13px; color:var(--taupe-t,#6E6353); font-weight:400; margin-top:3px; }
.mmea-etapes .choice::after{
  content:""; position:absolute; left:18px; bottom:0; height:2px; width:0;
  background:var(--rouge,#DA291C); transition:width .4s cubic-bezier(.22,1,.36,1);
}
/* Le survol n'existe qu'au pointeur : sur écran tactile, iOS garde le
   :hover sur la dernière tuile touchée et y laissait un bout de trait
   rouge après le passage à l'étape suivante. */
@media (hover:hover){
  .mmea-etapes .choice:hover{ border-color:var(--chene,#B5824A); }
  .mmea-etapes .choice:hover::after{ width:32%; }
}
.mmea-etapes .choice.is-selected{ border-color:var(--noyer,#2C231B); background:#fff; }
.mmea-etapes .choice.is-selected::after{ width:calc(100% - 36px); }
.mmea-etapes .choice:focus-visible{ outline:2px solid var(--rouge,#DA291C); outline-offset:2px; }

/* Coordonnées */
.mmea-etapes .fields{ display:grid; gap:18px; }
.mmea-etapes .frow{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.mmea-etapes .field{ display:flex; flex-direction:column; }
.mmea-etapes .field label{
  font-family:var(--ff-body,sans-serif); font-weight:700; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--chene-t,#86592C); margin-bottom:8px;
}
.mmea-etapes .field .req{ color:var(--rouge,#DA291C); }
.mmea-etapes .field input,
.mmea-etapes .field textarea{
  font-family:var(--ff-body,sans-serif); font-size:15.5px; color:var(--noyer,#2C231B);
  background:var(--lin,#FAF7F1); border:1px solid var(--trait,#DDD2BE); border-radius:var(--r,14px);
  padding:12px 14px; width:100%;
}
.mmea-etapes .field textarea{ resize:vertical; min-height:104px; line-height:1.55; }
.mmea-etapes .field input:focus,
.mmea-etapes .field textarea:focus{
  outline:none; border-color:var(--rouge,#DA291C); box-shadow:0 0 0 3px var(--rouge-halo,rgba(218,41,28,.16));
}

/* Récapitulatif */
.mmea-etapes .recap{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.mmea-etapes .tag{
  font-size:12.5px; color:var(--taupe-t,#6E6353); border:1px solid var(--trait,#DDD2BE);
  border-radius:20px; padding:5px 13px 5px 22px; position:relative; background:var(--lin,#FAF7F1);
}
.mmea-etapes .tag::before{
  content:""; position:absolute; left:10px; top:50%; width:9px; height:2px;
  background:var(--rouge,#DA291C); transform:translateY(-50%);
}

/* Navigation — toujours au même endroit.
   Le nombre de réponses change à chaque question ; sans cela, « Retour »
   et « Continuer » se déplaçaient d'une étape à l'autre et il fallait
   aller les rechercher. La barre se colle donc au bas de la fenêtre tant
   que l'étape la dépasse, et reprend sa place quand tout tient à l'écran. */
.mmea-etapes .nav{
  position:sticky; bottom:0; z-index:3;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 16px;
  margin-top:28px; padding:14px 0 calc(14px + env(safe-area-inset-bottom, 0px));
  background:var(--etapes-fond);
}
/* L'indication passe au-dessus des boutons : sans cela elle se coinçait
   entre les deux et repoussait « Continuer » vers le centre. */
.mmea-etapes .hint{ order:-1; flex-basis:100%; }
.mmea-etapes .nav::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:var(--trait,#DDD2BE);
}
/* Bouton éteint tant que la réponse attendue manque. */
.mmea-etapes .go.is-off{ opacity:.42; cursor:default; }
.mmea-etapes .back{
  font-family:var(--ff-body,sans-serif); font-size:14.5px; color:var(--taupe-t,#6E6353);
  background:none; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px; padding:6px 0; visibility:hidden;
}
.mmea-etapes .back.show{ visibility:visible; }
.mmea-etapes .back::before{ content:"\2190"; }
.mmea-etapes .back:hover{ color:var(--noyer,#2C231B); }
.mmea-etapes .go[hidden]{ display:none; }
.mmea-etapes .go.is-busy{ opacity:.6; cursor:default; }
.mmea-etapes .hint{ font-size:13px; color:var(--taupe-t,#6E6353); }
.mmea-etapes .hint[hidden]{ display:none; }

.mmea-etapes .err{ color:var(--rouge,#DA291C); font-size:14px; margin-top:14px; }
.mmea-etapes .err:empty{ margin:0; }

/* Confirmation (aligné à gauche, cohérent) */
.mmea-etapes .done{ padding:8px 0; }
.mmea-etapes .done .mark{ width:44px; height:2px; background:var(--rouge,#DA291C); margin-bottom:18px; }
.mmea-etapes .done h3{ font-family:var(--ff-display,sans-serif); font-weight:620; font-size:1.5rem; margin:0 0 .4rem; color:var(--noyer,#2C231B); }
.mmea-etapes .done p{ color:var(--taupe-t,#6E6353); }

.mmea-etapes .hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

@media (max-width:640px){
  .mmea-etapes .choices{ grid-template-columns:1fr; }
  .mmea-etapes .frow{ grid-template-columns:1fr; }
  /* Sur téléphone, le formulaire occupe au moins la hauteur de l'écran et
     la barre est poussée tout en bas : « Retour » et « Continuer » se
     retrouvent au même endroit à chaque question, qu'elle propose trois
     réponses ou huit — plus besoin d'aller les rechercher. */
  .mmea-etapes{ display:flex; flex-direction:column; min-height:calc(100svh - 125px); }
  .mmea-etapes .nav{ margin-top:auto; }
}
@media (prefers-reduced-motion:reduce){
  .mmea-etapes *{ animation:none !important; transition:none !important; }
}