/* La fenêtre de demande — partagée par la réception, la visite et le contact.

   Andy, 05/08 : « 컨텍에 있는 메세지 보내기 기능 다른 것들처럼 팝업으로 처리하자 ».
   Trois formulaires, une seule fenêtre : deux copies d'une même modale, ce sont
   deux comportements qui divergent au premier ajustement, et le visiteur ne
   sait plus lequel il a devant lui.

   ⚠ L'accusé (`.mf-merci`) est le FRÈRE du corps, jamais son enfant. Le 04/08,
   le message de confirmation vivait DANS le formulaire : l'envoyer le cachait
   avec lui, et l'on ne savait pas si la demande était partie. Un test le
   vérifie maintenant, page par page. */
  /* ── Fenêtres de demande ────────────────────────────────────────────────
     Le formulaire complet tenait dans la page, sous l'intro : quinze champs
     déroulants avant d'atteindre le bouton, et sur téléphone on ne voyait
     jamais les deux bouts. En modale il occupe l'écran qu'il demande, et la
     page reste lisible. */
  .modale-form { border:none; padding:0; background:var(--surface); color:var(--encre);
    border-radius:16px; width:min(96vw, 780px); max-width:96vw;
    max-height:min(92dvh, 980px); overflow:hidden; }
  .modale-form::backdrop { background:rgba(35,38,26,.72); }
  /* ⛔ `overscroll-behavior: contain` : le geste qui atteint le bout du
     formulaire repartait dans la page derrière (chaînage). Le verrou de page
     de `modale-form.js` couvre le geste commencé ailleurs ; celui-ci couvre le
     geste qui SORT d'ici. Les deux, comme sur la fiche d'événement. */
  .modale-form .mf-corps { overflow-y:auto; max-height:min(92dvh, 980px);
    padding:clamp(1.2rem,3vw,2rem); overscroll-behavior:contain; }
  .modale-form .mf-corps > h3 { font-family:var(--f-display); font-weight:550;
    font-size:clamp(1.35rem,3vw,1.75rem); margin:0 0 1.1rem; padding-right:2.2rem; }
  .modale-form .form-carte { border:none; padding:0; margin:0; background:none;
    box-shadow:none; }
  /* L'anneau d'or est l'état de repos du ✕, et le focus ne le change pas :
     au téléphone `showModal()` le pose sur la croix, il ne doit rien dessiner.
     À la souris, le focus clavier prend la teinte du survol. Le focus à
     l'ouverture va au corps de la fenêtre (`modale-form.js`). */
  .mf-fermer { position:absolute; top:.7rem; right:.8rem; z-index:3;
    width:38px; height:38px; border-radius:50%; border:1px solid var(--bord);
    background:var(--surface); color:var(--encre); font-size:1.05rem;
    line-height:1; cursor:pointer; outline:3px solid var(--or); outline-offset:2px; }
  .mf-fermer:focus-visible { outline-color:var(--or); box-shadow:none; }
  .mf-fermer:hover { background:var(--vert-doux); }
  @media (hover:hover) and (pointer:fine) { .mf-fermer:focus-visible { background:var(--vert-doux); } }
  .modale-form .mf-corps:focus { outline:none; }
  /* L'accusé vit HORS du formulaire : le cacher ne doit plus l'emporter.
     Centré dans la hauteur — sur téléphone la fenêtre occupe tout l'écran, et
     un message tassé en haut d'un grand vide se lit comme une page à moitié
     chargée. */
  .mf-merci { padding:clamp(1.8rem,5vw,3rem) clamp(1.2rem,3vw,2rem); text-align:center;
    display:grid; align-content:center; min-height:min(62dvh, 420px); }
  /* ⚠ `display:grid` bat le `[hidden]` du navigateur. Sans cette ligne,
     l'accusé s'affiche SOUS le formulaire dès l'ouverture — sur la réception
     il passait inaperçu, poussé hors du cadre par le défilement du corps ;
     sur le contact, plus court, il se voyait. Un défaut caché par un hasard
     de mise en page finit toujours par sortir ailleurs. */
  .mf-merci[hidden] { display:none; }
  .mf-coche { width:62px; height:62px; margin:0 auto 1.1rem; border-radius:50%;
    background:var(--vert-doux); color:var(--vert); display:grid; place-items:center;
    font-size:1.9rem; }
  .mf-merci h3 { font-family:var(--f-display); font-weight:550;
    font-size:clamp(1.3rem,3vw,1.7rem); margin:0 0 .6rem; }
  .mf-merci p { color:var(--sourdine); max-width:38ch; margin:0 auto .5rem; }
  .mf-urgent { font-size:.9rem; }
  .mf-merci .envoyer { margin-top:1.4rem; width:auto; padding-inline:2.4rem; }
    color:var(--sourdine); border-radius:999px; font:500 .72rem/1 inherit;
    padding:.28rem .6rem; cursor:pointer; }
  .grp-opt .tout button:hover { background:var(--vert-doux); color:var(--vert-fonce);
    border-color:var(--olive); }
  @media (max-width:520px) {
    .modale-form { width:100vw; max-width:100vw; height:100dvh; max-height:100dvh;
      border-radius:0; }
    .modale-form .mf-corps { max-height:100dvh; }
  }

  .bloc-espaces { border:1px solid var(--bord); border-radius:10px;
    padding:.85rem .95rem; background:var(--fond); margin-bottom:1.1rem; }
  .bloc-espaces .cases { gap:.5rem 1.2rem; }

/* Le pied d'un formulaire, dans l'ordre des consoles : le bouton qui envoie
   d'abord, « Annuler » creux à sa droite — un « Annuler » n'existe qu'en paire
   d'un bouton qui envoie. */
.mf-actions { display:flex; gap:.6rem; align-items:stretch; margin-top:.6rem; }
/* Le bouton qui envoie prend la place, « Annuler » garde la sienne — la même
   ligne dans les trois fenêtres, quelle que soit la page qui dessine `.envoyer`. */
.mf-actions .envoyer { margin-top:0; flex:1 1 auto; }
.modale-form .envoyer { padding:1rem 1.6rem; font-size:.8rem; letter-spacing:.16em;
  font-weight:600; }
.mf-actions .annuler { flex:0 0 auto; padding:.85rem 1.3rem; border-radius:999px;
  border:1px solid var(--bord); background:var(--surface); color:var(--sourdine);
  font:inherit; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; cursor:pointer; }
.mf-actions .annuler:hover { border-color:var(--or); color:var(--vert-fonce); }
/* Au pouce, en pile : « Envoyer ma demande » ne tient pas à côté d'« Annuler »
   sur un téléphone — et le pouce trouve « Annuler » en bas, comme dans les
   dialogues des consoles. */
@media (max-width:520px) {
  .mf-actions { flex-direction:column; }
  .mf-actions .envoyer, .mf-actions .annuler { width:100%; }
}