/* /assets/css/signup-modal.css — fenêtre « Crée ton compte » (includes/signup-modal.php), 01/10/2026.
   Chargée par l'accueil (thème clair seul) et /offres (suit le mode sombre via les variables de
   offre.css) : les couleurs de texte/fond passent par les variables de la page, avec repli.
   Les boutons pleins restent en #047857 fixe : --green-ink devient vert clair en mode sombre,
   illisible sous du texte blanc (voir CLAUDE.md, « ne pas utiliser un token -ink comme fond »). */

/* Convention CLAUDE.md : display:none sur la classe, display:flex seulement hors [hidden]. */
.lmp-modal { display: none; }
.lmp-modal:not([hidden]) {
  display: flex; align-items: center; justify-content: center;
  position: fixed; inset: 0; z-index: 1000; padding: 16px;
  background: rgba(15, 23, 42, 0.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  overflow-y: auto;
}
.lmp-modal-panel {
  position: relative; width: 100%; max-width: 440px; margin: auto;
  background: var(--surface, #FFFFFF); color: var(--ink, #0F172A);
  border-radius: 20px; padding: 28px;
  box-shadow: 0 30px 60px -20px rgba(15, 23, 42, 0.45);
  font-family: var(--font-body, 'DM Sans', sans-serif); text-align: left;
}
.lmp-modal-close {
  position: absolute; top: 10px; right: 10px;
  width: 44px; height: 44px; border-radius: 12px; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--ink-soft, #475569);
}
.lmp-modal-close:hover { background: var(--bg, #F1F5F9); color: var(--ink, #0F172A); }

.lmp-modal-pill {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px;
  padding: 6px 12px; border-radius: 99px;
  background: var(--green-soft, #ECFDF5); color: var(--green-ink, #047857);
  font-size: 13px; font-weight: 700;
}
.lmp-modal-panel h2 {
  font-family: var(--font-display, 'Outfit', sans-serif); font-weight: 800; font-size: 24px;
  letter-spacing: -0.02em; line-height: 1.2; margin: 0 44px 8px 0; color: var(--ink, #0F172A);
}
.lmp-modal-panel h2:focus { outline: none; }
.lmp-modal-sub { margin: 0 0 18px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft, #475569); }
.lmp-modal-sub strong { color: var(--ink, #0F172A); }

.lmp-modal-error {
  margin: 0 0 14px; padding: 10px 14px; border-radius: 12px;
  background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; font-size: 14px; line-height: 1.5;
}
.lmp-modal-error a { color: #991B1B; font-weight: 700; }

.lmp-modal-form { display: flex; flex-direction: column; gap: 12px; }
.lmp-modal-row { display: flex; gap: 10px; flex-wrap: wrap; }
.lmp-modal-row .lmp-modal-field { flex: 1 1 150px; }
.lmp-modal-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.lmp-modal-field label { font-size: 13.5px; font-weight: 700; color: var(--ink, #0F172A); }
.lmp-modal-field input {
  min-height: 48px; padding: 0 14px; border-radius: 12px; width: 100%;
  border: 1.5px solid var(--line, #E2E8F0); background: var(--surface, #FFFFFF); color: var(--ink, #0F172A);
  font-family: inherit; font-size: 16px; /* 16px : évite le zoom automatique d'iOS au focus */
}
.lmp-modal-field input:focus { outline: none; border-color: #047857; box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.15); }
.lmp-modal-field input[aria-invalid="true"] { border-color: #DC2626; }
.lmp-modal-hint { font-size: 12.5px; color: var(--ink-soft, #475569); line-height: 1.5; }
.lmp-modal-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lmp-modal-toggle {
  align-self: flex-start; min-height: 44px; padding: 0; border: none; background: none; cursor: pointer;
  color: var(--green-ink, #047857); font-family: inherit; font-size: 14px; font-weight: 700;
}
.lmp-modal-toggle[aria-expanded="true"] span { display: inline-block; transform: rotate(180deg); }

.lmp-modal-submit {
  min-height: 52px; width: 100%; border: none; border-radius: 12px; cursor: pointer;
  background: #047857; color: #FFFFFF;
  font-family: var(--font-display, 'Outfit', sans-serif); font-weight: 700; font-size: 17px;
}
.lmp-modal-submit:hover:not(:disabled) { background: #065F46; }
.lmp-modal-submit:disabled { opacity: 0.7; cursor: progress; }

.lmp-modal-legal { margin: 0; font-size: 12.5px; color: var(--ink-soft, #475569); line-height: 1.5; text-align: center; }
.lmp-modal-legal a, .lmp-modal-foot a { color: var(--green-ink, #047857); font-weight: 700; }
.lmp-modal-foot { margin: 16px 0 0; font-size: 14px; color: var(--ink-soft, #475569); text-align: center; }

.lmp-modal-check {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 0 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--green-soft, #ECFDF5); color: var(--green-ink, #047857);
}
.lmp-modal-note {
  margin: 0 0 18px; padding: 12px 14px; border-radius: 12px;
  background: var(--bg, #F8FAFC); border: 1px solid var(--line, #E2E8F0);
  font-size: 14px; line-height: 1.55; color: var(--ink-soft, #475569);
}
.lmp-modal-note a { color: var(--green-ink, #047857); font-weight: 700; }

/* Petit rappel sous la barre de recherche quand « Créer une alerte » est cliqué sans critère. */
.lmp-search-hint {
  margin: 10px 0 0; font-size: 14px; font-weight: 600; color: var(--green-ink, #047857);
}
.lmp-search-hint[hidden] { display: none; }

@media (max-width: 420px) {
  .lmp-modal-panel { padding: 22px 18px; border-radius: 18px; }
  .lmp-modal-panel h2 { font-size: 21px; }
}