/* ============================================================
   Socle UX mobile/tablette (Phase 1) — mouvement, cibles tactiles, anti-zoom.
   RÈGLE : animations UNIQUEMENT transform/opacity (composées par le GPU, zéro reflow).
   Jamais d'animation de width/height/top/left/margin.
   ============================================================ */

:root {
  --ux-dur-fast: 130ms;
  --ux-dur: 190ms;
  --ux-dur-slow: 280ms;
  --ux-ease: cubic-bezier(0.22, 0.61, 0.36, 1);       /* easeOut doux */
  --ux-ease-spring: cubic-bezier(0.34, 1.28, 0.64, 1); /* léger overshoot */
  --ux-tap-min: 48px;     /* cible tactile minimale (iOS 44 / Material 48) */
  --ux-tap-min-lg: 56px;  /* actions primaires sur tablette */
}

/* ── Apparitions (transform/opacity uniquement) ── */
@keyframes ux-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ux-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ux-pop  { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }

.ux-rise { animation: ux-rise var(--ux-dur) var(--ux-ease) both; }
.ux-fade { animation: ux-fade var(--ux-dur) var(--ux-ease) both; }
.ux-pop  { animation: ux-pop var(--ux-dur) var(--ux-ease-spring) both; }

/* Squelettes de chargement (pulsation d'opacité = léger, GPU). */
@keyframes ux-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.skel { background: #e9edf3; border-radius: 8px; animation: ux-pulse 1.2s ease-in-out infinite; }
.sd-skeleton { display: flex; flex-direction: column; gap: 14px; padding: 10px 0; }
.sd-skeleton .skel-line { height: 16px; }
.sd-skeleton .skel-block { height: 96px; }
.sd-skeleton .skel-gauge { width: 150px; height: 150px; border-radius: 50%; align-self: center; }
.sd-skeleton .skel-tabs { height: 72px; }

/* Apparition échelonnée sans JS : décalage par rang (listes courtes/moyennes). */
.ux-stagger > * { animation: ux-rise var(--ux-dur) var(--ux-ease) both; }
.ux-stagger > *:nth-child(1) { animation-delay: 20ms; }
.ux-stagger > *:nth-child(2) { animation-delay: 55ms; }
.ux-stagger > *:nth-child(3) { animation-delay: 90ms; }
.ux-stagger > *:nth-child(4) { animation-delay: 125ms; }
.ux-stagger > *:nth-child(5) { animation-delay: 160ms; }
.ux-stagger > *:nth-child(6) { animation-delay: 195ms; }
.ux-stagger > *:nth-child(n+7) { animation-delay: 220ms; }

/* ── Retour tactile : léger enfoncement au touché (transform = GPU, pas de reflow). ── */
button, a, [role="button"], summary { -webkit-tap-highlight-color: transparent; }
.app-shell button:active,
.app-shell .nav2-pill:active,
.app-shell .showcase-btn:active,
.app-shell .remc-level:active,
.app-shell .ext-tile:active,
.app-shell .smgr-btn:active,
.eleve-app button:active,
.eleve-app .eleve-tab:active,
.eleve-app .eleve-bar:active {
  transform: scale(0.97);
}

/* Transitions douces (couleur/scale only) sur les éléments interactifs récurrents. */
.app-shell .nav2-pill,
.app-shell .showcase-btn,
.app-shell .remc-level,
.app-shell .smgr-btn,
.eleve-app .eleve-tab {
  transition: background-color var(--ux-dur-fast) var(--ux-ease),
              border-color var(--ux-dur-fast) var(--ux-ease),
              color var(--ux-dur-fast) var(--ux-ease),
              transform var(--ux-dur-fast) var(--ux-ease);
}

/* ── Cibles tactiles ≥ 48px sur appareils tactiles (sans grossir le visuel : min-height + padding existant). ── */
@media (pointer: coarse) {
  .app-shell .nav2-pill,
  .app-shell .showcase-btn,
  .app-shell .remc-level,
  .app-shell .smgr-btn,
  .eleve-app .eleve-tab,
  .eleve-app .eleve-logout {
    min-height: var(--ux-tap-min);
  }
  .app-shell .pl-quick { min-width: 38px; min-height: 38px; }
}

/* ── Anti-zoom iOS : un champ < 16px déclenche le zoom auto au focus sur iPhone/iPad. ── */
@media (max-width: 820px) {
  .app-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  .app-shell select,
  .app-shell textarea,
  .eleve-app input:not([type="checkbox"]):not([type="radio"]),
  .eleve-app select,
  .eleve-app textarea,
  .login-card input,
  .auth-card input {
    font-size: 16px;
  }
}

/* ── Respect total de « réduire les animations » (accessibilité + batterie). ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}