/* =============================================================================
 * ZIC Landing — MultiShop+ : fenêtre « Publie ton bien » (biens immobiliers),
 * COQUILLE de la popup, préfixe mre-pop (landing-multishop-realty.js).
 *
 * Le formulaire lui-même (champs, photos, conseils, barre d'actions, toast,
 * dialogue) est stylé par le cœur PARTAGÉ avec l'admin,
 * realty-listing-form.css (identique octet pour octet, préfixe mre-, jetons
 * --mre-* sur .mre-root). Ici : la couche, le panneau, l'en-tête, les états
 * chargement / erreur, la note invité, l'écran de succès et les réglages que
 * le cœur laisse à l'hôte (--mre-sticky-top, --mre-bleed).
 *
 * Pile landing : overlay MultiShop+ 1500 < .mre-pop 4000 < connexion 9999
 * (toast et dialogue de départ HORS du panneau ; le dialogue natif passe dans
 * la couche supérieure). Le bouton de messagerie (z 100) est recouvert et, par
 * sûreté, masqué tant que la fenêtre est ouverte (body.mre-pop-open).
 *
 * Paliers :
 * - ≥ 768 px : panneau centré, 1040 px au plus, min(92dvh, 960px) de haut,
 *   rayon 20, fond #f4f3fb (cartes blanches) ; au-delà de ~1024 px le
 *   conteneur du formulaire dépasse 824 px → 2 colonnes et carte de conseils
 *   collante (règle du cœur) ; barre d'actions collante en bas, sans débord ;
 * - < 768 px : feuille plein écran (inset 0, rayon 0, montée 240 ms), en-tête
 *   sous la zone sûre du haut, barre collante du cœur (débord 16 px, zone
 *   sûre du bas), toast au-dessus de la barre ;
 * - < 480 px : sous-titre masqué ;
 * - prefers-reduced-motion : aucune animation.
 * Thème clair seulement (comme le cœur). Aucun sélecteur hors du préfixe
 * mre- en dehors de body.mre-lock / body.mre-pop-open.
 * ============================================================================= */

/* Verrou de défilement de la page (jamais de style en ligne : la modale de
   connexion remet les siens à zéro en se fermant). */
body.mre-lock { overflow: hidden; }

/* Bouton de messagerie flottant : jamais par-dessus la fenêtre. */
body.mre-pop-open .zic-chat-fab-wrap,
body.mre-pop-open .zic-chat-fab-wrap * {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ============================================================ */
/* Couche                                                        */
/* ============================================================ */

.mre-pop {
  /* Jetons du cœur (mêmes valeurs que .mre-root, test d'égalité) : le
     toast, le dialogue et l'écran de succès vivent HORS de #mre-root. */
  --mre-accent: #5b7083;
  --mre-accent-strong: #3e5468;
  --mre-accent-dk: #2f4253;
  --mre-accent-soft: #eef2f6;
  --mre-ink: #3e5468;
  --mre-ink-dk: #2f4253;
  --mre-tile: #e9ecef;
  --mre-tile-hover: #dde2e7;
  --mre-tile-text: #2f4253;
  --mre-cta: #e11d48;
  --mre-cta-dk: #be123c;
  --mre-error: #dc2626;
  --mre-error-dk: #991b1b;
  --mre-error-soft: #fef2f2;
  --mre-line: #7c8b99;
  --mre-line-hover: #5f6e7c;
  --mre-line-faint: #d5dbe2;
  --mre-line-soft: rgba(31, 19, 64, 0.08);
  --mre-text: #1f1340;
  --mre-muted: #6b6383;
  --mre-surface: #ffffff;
  --mre-page: #f4f3fb;
  --mre-wa: #25d366;
  --mre-field-h: 50px;
  --mre-radius-card: 18px;
  --mre-display: "Space Grotesk", "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --mre-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mre-shadow: 0 2px 8px rgba(31, 19, 64, 0.06);
  --mre-ring: 0 0 0 3px rgba(91, 112, 131, 0.25);
  --mre-ring-error: 0 0 0 3px rgba(220, 38, 38, 0.16);

  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* Normalisation : la fenêtre est un enfant direct de <body>, sous des
     feuilles de page très différentes (9 hôtes). */
  font-family: var(--mre-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  color: var(--mre-text);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

.mre-pop[hidden],
.mre-pop [hidden] { display: none !important; }

.mre-pop *,
.mre-pop *::before,
.mre-pop *::after { box-sizing: border-box; }

/* Masquée pendant la modale de connexion (gate invité) : focus et clics
   rendus à la modale ; elle réapparaît si celle-ci se ferme sans connexion. */
.mre-pop--gated { visibility: hidden; }

.mre-pop-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 10, 35, 0.55);
  animation: mre-pop-fade 0.2s ease;
}

/* ============================================================ */
/* Panneau                                                       */
/* ============================================================ */

.mre-pop-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1040px;
  max-height: 92vh;
  max-height: min(92dvh, 960px);
  overflow: hidden;
  border-radius: 20px;
  background: var(--mre-page);
  box-shadow: 0 30px 80px -24px rgba(15, 10, 35, 0.55);
  animation: mre-pop-in 0.2s ease;
}

.mre-pop-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 16px 16px 22px;
  border-bottom: 1px solid var(--mre-line-soft);
  background: var(--mre-surface);
}

.mre-pop-tile {
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--mre-accent-strong);
  color: #ffffff;
}

.mre-pop-tile svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mre-pop-headtext { flex: 1 1 auto; min-width: 0; }

.mre-pop-title {
  margin: 0;
  padding: 0;
  font-family: var(--mre-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.3px;
  color: var(--mre-text);
}

.mre-pop-title:focus { outline: none; }

.mre-pop-sub {
  margin: 2px 0 0;
  padding: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--mre-muted);
}

.mre-pop-close {
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--mre-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.mre-pop-close svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mre-pop-close:focus-visible { outline: 2px solid var(--mre-accent); outline-offset: 2px; }

/* Corps = conteneur de défilement : carte de conseils collante (haut) et
   barre d'actions collante (bas) s'y accrochent. */
.mre-pop-body {
  --mre-sticky-top: 16px;
  --mre-bleed: 24px;
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 20px 24px 0;
}

/* Toujours un peu d'air sous l'écran de succès et les états. */
.mre-pop-body > .mre-pop-state,
.mre-pop-body > .mre-pop-success { margin-bottom: 32px; }

/* Note invité (connexion demandée pour les photos et la publication). */
.mre-pop-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  background: var(--mre-accent-soft);
  color: var(--mre-ink-dk);
  font-size: 14px;
  line-height: 1.5;
}

.mre-pop-note--gate { border-color: var(--mre-accent); }

.mre-pop-note-ic {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mre-pop-note-text { margin: 0; padding: 0; }

/* États : chargement, erreur. */
.mre-pop-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 480px;
  margin: 56px auto;
  text-align: center;
}

.mre-pop-state-text {
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--mre-muted);
}

.mre-pop-state-ic {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--mre-error);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mre-pop-state-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.mre-pop-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid var(--mre-line-faint);
  border-top-color: var(--mre-accent-strong);
  border-radius: 50%;
  animation: mre-pop-spin 0.8s linear infinite;
}

/* Écran de succès : le cœur (.mre-state) ; un peu plus serré ici. */
.mre-pop-success { margin-top: 32px; }

.mre-pop .mre-btn { font-family: inherit; }

/* Toast (enfant de .mre-pop, hors du panneau) : juste au-dessus de la barre
   d'actions collante du panneau centré. */
.mre-pop > .mre-toast {
  bottom: calc(50vh - min(46vh, 480px) + 96px);
  bottom: calc(50dvh - min(46dvh, 480px) + 96px);
  z-index: 3;
}

@media (hover: hover) {
  .mre-pop-close:hover { background: rgba(31, 19, 64, 0.06); color: var(--mre-text); }
}

/* ≥ 768 px : barre d'actions collante à toutes les largeurs (le cœur ne la
   colle que sous 768 px), dégradé, sans débord latéral. */
@media (min-width: 768px) {
  .mre-pop .mre-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 0;
    padding: 14px 0 18px;
    background: linear-gradient(to bottom, rgba(244, 243, 251, 0), var(--mre-page) 24%);
  }
  .mre-pop .mre-form :is(input, select, textarea, button, a) {
    scroll-margin-bottom: 104px;
  }
}

/* ============================================================ */
/* Mobile (< 768 px) : feuille plein écran                        */
/* ============================================================ */

@media (max-width: 767px) {
  .mre-pop { padding: 0; align-items: stretch; }

  .mre-pop-panel {
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    animation: mre-pop-up 0.24s ease;
  }

  .mre-pop-head {
    gap: 12px;
    padding: 10px 8px 10px 16px;
    padding-top: max(10px, env(safe-area-inset-top));
  }

  .mre-pop-tile { flex-basis: 38px; width: 38px; height: 38px; border-radius: 11px; }

  .mre-pop-title { font-size: 18px; }

  .mre-pop-body {
    --mre-bleed: 16px;
    padding: 16px 16px 0;
  }

  .mre-pop-state { margin: 40px auto; }

  /* Au-dessus de la barre collante (12 + 56 + 12 px) et de la zone sûre. */
  .mre-pop > .mre-toast { bottom: calc(108px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 479px) {
  .mre-pop-sub { display: none; }
}

/* ============================================================ */
/* Animations                                                     */
/* ============================================================ */

@keyframes mre-pop-fade { from { opacity: 0; } to { opacity: 1; } }

@keyframes mre-pop-in {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: none; }
}

@keyframes mre-pop-up {
  from { transform: translateY(32px); opacity: 0.6; }
  to { transform: none; opacity: 1; }
}

@keyframes mre-pop-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .mre-pop-backdrop,
  .mre-pop-panel { animation: none; }
  .mre-pop-spinner { animation-duration: 1.6s; }
  .mre-pop-close { transition: none; }
}