/* ============================================================
 * Mobile Sprint Phase 1 — Hover-guard + safe-area + touch polish.
 *
 * 1) Hover-guard : sur les devices touch (no hover, coarse pointer),
 *    on neutralise les transforms/shadows liées à :hover qui restent
 *    "collés" après un tap sur iOS Safari.
 *
 * 2) Safe-area utilities : `env(safe-area-inset-*)` pour gérer le
 *    notch et le home indicator iPhone sans toucher chaque sticky CTA.
 *
 * 3) Touch target bumps : .btn-sm / .btn-xs étaient < 40px. On les
 *    bump à 40 / 36px en pointer:coarse. Le .btn parent reste 44px
 *    dans touch_optimizations.css.
 * ============================================================ */

/* ---- Hover-guard sur devices touch -------------------------- */
@media (hover: none) and (pointer: coarse) {
  .card:hover,
  .card-flat:hover,
  .card-premium:hover,
  .card-selected:hover,
  .selection-card:hover,
  .hover-lift:hover,
  .btn:hover,
  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-outline:hover,
  .btn-ghost:hover,
  .btn-coral:hover,
  .btn-accent:hover {
    transform: none !important;
  }

  /* On laisse les ombres légères mais on neutralise les translates
     et scales qui sont les vrais coupables du "stuck hover" iOS. */
  .hover-lift:hover {
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
  }
}

/* ---- Safe-area utilities ----------------------------------- */
.safe-area-bottom {
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

.safe-area-top {
  padding-top: max(1rem, env(safe-area-inset-top));
}

.safe-area-x {
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}

/* Pour les CTAs sticky en bas de viewport (landings, modals) */
.sticky-bottom-safe {
  position: sticky;
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Pour les sidebars sticky (streaming generation, dashboard widgets) */
.sticky-top-safe {
  position: sticky;
  top: max(1rem, env(safe-area-inset-top));
}

/* ---- Touch target bumps pour btn-sm / btn-xs --------------- */
@media (pointer: coarse) {
  .btn-sm {
    min-height: 40px;
  }
  .btn-xs {
    min-height: 36px;
  }
}

/* ---- Fixed-width safety -----------------------------------
   Garde-fou : tout élément avec width arbitraire `w-[Npx]`
   ne doit jamais déborder du viewport. Ajout d'un max-width
   100% défensif sans casser le layout desktop. */
@media (max-width: 639px) {
  [class*="w-["][class*="px]"] {
    max-width: 100%;
  }
}