/* ==========================================================================
   modal.css — Fenêtre modale (popup) accessible, CSP-safe (zéro style inline).
   --------------------------------------------------------------------------
   Popup du formulaire « Rester en contact » (CTA nav). Ouverture/fermeture
   pilotées par modal.js via la classe .is-open (aucun style inline injecté).
   Respecte prefers-reduced-motion. Aligné DS ICyam v1.2.
   ========================================================================== */

/* Verrou du scroll de la page quand une modale est ouverte (classe posée par modal.js). */
body.has-modal-open { overflow: hidden; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
}
.modal.is-open { display: flex; }

.modal__overlay {
  position: absolute;
  inset: 0;
  /* Bleu Foncé #0F2438 à 55 % — backdrop de modale (hors charte assumé). */
  background: rgba(15, 36, 56, 0.55);
}

.modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 2 * var(--space-sm));
  overflow-y: auto;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-md);
}

@media (prefers-reduced-motion: no-preference) {
  .modal.is-open .modal__dialog { animation: modal-in 220ms ease-out; }
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.modal__close {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--color-gray-mid);
  border-radius: var(--radius);
  cursor: pointer;
}
.modal__close:hover { background: var(--color-gray-light); color: var(--color-blue); }
.modal__close svg { width: 22px; height: 22px; }

.modal__title { color: var(--color-blue); padding-right: var(--space-md); margin-bottom: 0.5rem; }
.modal__lead  { color: var(--color-gray-mid); margin-bottom: var(--space-sm); }

/* Écran de confirmation après envoi AJAX (basculé par modal.js). */
.modal__success { text-align: center; padding: var(--space-sm) 0; }
.modal__success svg { width: 56px; height: 56px; color: var(--color-green); margin-bottom: var(--space-sm); }
.modal__success h2  { color: var(--color-blue); margin-bottom: 0.5rem; }
.modal__success p   { color: var(--color-gray-mid); margin-bottom: var(--space-sm); }

/* Erreur globale injectée en AJAX. */
.modal .form-inscription__global-error { margin-bottom: var(--space-sm); }