/**
 * drag-handle.css — Indicateur modal pour écrans formulaires
 *
 * Composant visuel universel mobile signalant qu'un écran est temporaire
 * et peut être fermé par swipe. Présent sur screen-form et S2-dépense.
 *
 * Comportements :
 *   - Animation slide-up à l'apparition de l'écran
 *   - Swipe-down depuis le handle → ferme l'écran (via swipe.js)
 */

/* ── Animation d'entrée ───────────────────────────────────────────────────── */

@keyframes dh-slide-up {
  from { transform: translateY(100%); opacity: 0.6; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Classe appliquée aux écrans modaux (screen-form, S2) */
.screen-modal {
  animation: dh-slide-up 0.38s cubic-bezier(0.32, 0.72, 0, 1) both;
}

/* Respect du choix utilisateur : pas d'animation si prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .screen-modal { animation: none; }
}

/* ── Handle visuel ────────────────────────────────────────────────────────── */

.drag-handle {
  display: flex;
  justify-content: center;
  /* Zone de tap agrandie pour le swipe-down */
  padding: 14px 0 10px;
  background: var(--c-surface);
  /* Signal "grabbable" sur desktop */
  cursor: grab;
  touch-action: none; /* le JS gère le touch pour éviter le scroll */
}

.drag-handle:active { cursor: grabbing; }

.drag-handle-bar {
  width: 36px;
  height: 4px;
  border-radius: 100px;
  background: var(--c-border);
  transition: background 0.15s ease;
}

/* Le handle s'assombrit légèrement quand on le touche */
.drag-handle:active .drag-handle-bar {
  background: var(--c-ink-3);
}