/* ============================================================================
   zz-etape-app.css — MODALE « Ajouter / modifier une étape » (voyage.php #stepModal)
   Reskin SOMBRE charte app (navy/cyan/ambre) de la modale d'étape (maquettes cachées
   14→17, normalisées en sombre). La modale est DÉJÀ un formulaire sombre (brun/or codé
   en inline) → on la re-teinte vers --ar-*. 100% additif, scopé html.apprefonte #stepModal.
   !important obligatoire car la boîte + certains champs ont des styles INLINE.
   ============================================================================ */

@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (display-mode: standalone) and (max-width: 1366px) {

  /* Fond de la modale. */
  html.apprefonte #stepModal { background: rgba(4, 12, 20, .72) !important; }

  /* Boîte (enfant direct, style inline brun → navy). */
  html.apprefonte #stepModal > div {
    background: var(--ar-surface) !important;
    border: 1px solid var(--ar-hairline) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.5) !important;
  }

  /* Titre + libellés. */
  html.apprefonte #stepModal #stepModalTitle,
  html.apprefonte #stepModal h2,
  html.apprefonte #stepModal h3 {
    color: var(--ar-ink) !important; font-family: 'Inter', system-ui, sans-serif !important; font-weight: 800 !important;
  }
  html.apprefonte #stepModal .form-field > label,
  html.apprefonte #stepModal label {
    color: var(--ar-ink) !important; font: 600 13px/1.2 'Inter', system-ui, sans-serif !important;
    letter-spacing: .01em !important; text-transform: none !important;
  }
  html.apprefonte #stepModal .muted,
  html.apprefonte #stepModal small,
  html.apprefonte #stepModal p { color: var(--ar-ink-soft) !important; }

  /* Champs. */
  html.apprefonte #stepModal input[type="text"],
  html.apprefonte #stepModal input[type="date"],
  html.apprefonte #stepModal input[type="time"],
  html.apprefonte #stepModal input[type="number"],
  html.apprefonte #stepModal input:not([type]),
  html.apprefonte #stepModal select,
  html.apprefonte #stepModal textarea {
    background: var(--ar-bg) !important; color: var(--ar-ink) !important;
    border: 1px solid var(--ar-hairline) !important; border-radius: 14px !important;
    font-size: 16px !important; min-height: 50px !important; padding: 11px 14px !important;
  }
  html.apprefonte #stepModal textarea { min-height: 96px !important; }
  html.apprefonte #stepModal input:focus,
  html.apprefonte #stepModal select:focus,
  html.apprefonte #stepModal textarea:focus {
    outline: 2px solid var(--ar-cyan) !important; outline-offset: 1px; border-color: var(--ar-cyan) !important;
  }

  /* Carte Leaflet arrondie. */
  html.apprefonte #stepModal .leaflet-container,
  html.apprefonte #stepModal [id*="ap"][class*="map"],
  html.apprefonte #stepModal .step-map { border-radius: 14px !important; overflow: hidden !important; border: 1px solid var(--ar-hairline) !important; }

  /* Boutons secondaires (.btn-mini) : contour sombre ; le ✕ en rond discret. */
  html.apprefonte #stepModal .btn.btn-mini {
    background: transparent !important; color: var(--ar-ink) !important;
    border: 1px solid var(--ar-border, var(--ar-hairline)) !important; border-radius: 12px !important;
    min-height: 44px !important; font: 600 14px/1 'Inter', sans-serif !important;
  }
  /* Bouton principal (« Ajouter l'étape ») : ambre plein. */
  html.apprefonte #stepModal .btn.btn-primary {
    background: var(--ar-amber) !important; background-image: none !important; color: var(--ar-on-accent) !important;
    border: 0 !important; box-shadow: none !important; text-shadow: none !important;
    border-radius: 12px !important; min-height: 48px !important; font: 800 15px/1 'Inter', sans-serif !important;
  }

}