/* ============================================================================
   ZIC Landing — Mobile foundation
   ----------------------------------------------------------------------------
   Tokens (breakpoints + spacings mobile), reset doux specifique mobile,
   helpers .zh-only-mobile / .zh-only-desktop, focus-visible accessible.
   Cette feuille est chargee EN PREMIER dans base.html : elle definit les
   variables consommees par les autres feuilles et applique un reset minimal
   sans casser l'existant desktop.
   ============================================================================ */

:root {
  /* Breakpoints canoniques (en px). Utilisables via media queries comme
     @media (max-width: 768px). Pour les `var()` JS-side : getComputedStyle. */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;

  /* Echelle d'espacement mobile (4px base). On nomme `mb` pour Mobile-Base
     afin de ne pas entrer en collision avec d'eventuels `--space-*` desktop. */
  --space-mb-1: 4px;
  --space-mb-2: 8px;
  --space-mb-3: 12px;
  --space-mb-4: 16px;
  --space-mb-5: 24px;
  --space-mb-6: 32px;
  --space-mb-7: 48px;
  --space-mb-8: 64px;

  /* Touch target minimum recommande par Apple HIG / Material : 44px. */
  --touch-target-min: 44px;

  /* Hauteurs reservees pour patterns mobiles globaux. */
  --zh-mobile-nav-h: 64px;
  --zh-sticky-cta-h: 72px;

  /* Safe area iOS notch (mis a 0 si non supporte). */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

/* Empeche iOS Safari d'agrandir les textes en mode paysage. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Garantit qu'aucune image ne deborde son conteneur (cause #1 de scroll
   horizontal sur mobile). */
img,
video,
svg {
  max-width: 100%;
  height: auto;
}

/* Focus accessible : visible uniquement pour la navigation clavier, pas au
   clic souris (UX desktop preservee). */
:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Helpers de visibilite. Ces classes sont consommables dans les templates
   pour basculer un bloc entre mobile / desktop sans dupliquer le markup. */
.zh-only-mobile {
  display: none;
}
.zh-only-desktop {
  display: revert;
}

@media (max-width: 768px) {
  .zh-only-mobile {
    display: revert;
  }
  .zh-only-desktop {
    display: none !important;
  }
}

/* Touch target garantissant 44x44 minimum sur boutons critiques (utilisable
   sur tout `<button>` ou `<a>` qu'on declare comme cible tactile). */
.zh-touch-target {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Verrou de scroll global (drawer ouvert / modal plein ecran). Utilise par
   landing-home.js et auth-modal.js. Equivalent du body[overflow:hidden] mais
   neutre vis-a-vis du compositing. */
body.zh-scroll-locked {
  overflow: hidden;
  touch-action: none;
}

/* Meilleur comportement par defaut pour les containers de scroll horizontal
   utilises par les vitrines mobiles (drops, artists, shop catalog, etc.). */
.zh-mobile-scroller {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.zh-mobile-scroller::-webkit-scrollbar {
  display: none;
}

/* Reduire les animations pour les utilisateurs qui le demandent (a11y).
   N'affecte pas les transitions UI critiques (ex: ouverture drawer). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   Auto-hide scrollbar (style macOS overlay) sur la page landing.
   - Par defaut : scrollbar transparente (invisible mais reserve la gutter pour
     eviter le decalage de layout via `scrollbar-gutter: stable`)
   - Au hover de la page OU pendant un scroll actif (classe `.zh-is-scrolling`
     ajoutee par landing-scrollbar.js) : le pouce devient visible
   - Sur tactile (mobile/tablette), on cache totalement la scrollbar :
     le scroll inertiel iOS/Android gere deja un indicateur natif
   ============================================================================ */
html {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

html::-webkit-scrollbar {
  width: 10px;
}
html::-webkit-scrollbar-track {
  background: transparent;
}
html::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background-color 0.25s ease;
}

html:hover,
html.zh-is-scrolling {
  scrollbar-color: rgba(31, 19, 64, 0.32) transparent;
}
html:hover::-webkit-scrollbar-thumb,
html.zh-is-scrolling::-webkit-scrollbar-thumb {
  background-color: rgba(31, 19, 64, 0.32);
}
html::-webkit-scrollbar-thumb:hover {
  background-color: rgba(31, 19, 64, 0.55);
}

@media (hover: none), (pointer: coarse) {
  html { scrollbar-width: none; }
  html::-webkit-scrollbar { display: none; }
}