/* ============================================================
 * Breakpoints — Source de vérité unique (Phase 10, Sprint 0)
 *
 * Mirror exact de la config `screens` dans `config/tailwind.config.js`.
 * Tout fichier CSS app DOIT utiliser ces variables ou les media queries
 * équivalentes. Plus de seuils ad-hoc (700px, 1023px, 1100px) dans le
 * codebase à partir de cette release.
 *
 * Convention :
 *   --bp-xs  = 375px  (iPhone SE+)
 *   --bp-sm  = 640px  (tablette portrait, large phone landscape)
 *   --bp-md  = 768px  (iPad portrait)
 *   --bp-lg  = 1024px (sidebar desktop switch — single source of truth)
 *   --bp-xl  = 1280px (desktop confort)
 *   --bp-2xl = 1536px (wide desktop)
 *
 * Lecture en CSS :
 *   @media (min-width: 1024px) { ... }   ← OK (lg+)
 *   @media (max-width: 1023.98px) { ... } ← OK (sub-lg)
 *   @media (min-width: 1023px) { ... }   ← KO, breakpoint non aligné
 *
 * En JS (Stimulus, util) :
 *   const lg = window.matchMedia('(min-width: 1024px)')
 *   if (lg.matches) { ... }
 *
 * Container queries (CSS natif, supporté Chrome 105+, Safari 16+, FF 110+) :
 *   .panel { container-type: inline-size; container-name: panel; }
 *   @container panel (min-width: 480px) { .panel-card { ... } }
 *
 * ============================================================ */

:root {
  /* Breakpoints en valeurs brutes pour usage JS (lecture via getComputedStyle) */
  --bp-xs: 375px;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;

  /* Touch target minima (WCAG 2.5.5 + Apple HIG + Material Design 3) */
  --touch-target-min: 44px;
  --touch-target-comfy: 48px;

  /* Mobile content rythme — utilisé par .prose-mobile et page padding */
  --mobile-page-px: 1rem;     /* 16px */
  --tablet-page-px: 1.5rem;   /* 24px */
  --desktop-page-px: 2rem;    /* 32px */
}

/* ---- Helpers display utilities cohérents avec breakpoints ----
 * Préférer Tailwind (.lg:hidden, .lg:block) dans le HTML quand possible.
 * Ces classes existent pour les CSS pages qui n'ont pas accès à Tailwind
 * (ex: emails inline, GrapeJS rendered HTML).
 */
.mobile-only { display: block; }
.desktop-only { display: none; }
@media (min-width: 1024px) {
  .mobile-only { display: none; }
  .desktop-only { display: block; }
}

/* ---- Container queries — pattern global réutilisable -------- */
.cq-inline { container-type: inline-size; }
.cq-size { container-type: size; }