/* ============================================================
   MELGEEK.FR DESIGN SYSTEM — global entry point
   "Intuitive aesthetics, infinite precision" — Mel × Geek
   Consumers link THIS file only. Tokens + fonts + base utilities.
   ============================================================ */
@import url("tokens/fonts.css");
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/effects.css");
@import url("base.css");
@import url("tokens/themes.css");   /* 多版本换肤：[data-mg-theme] 覆盖中性 token + honey accent，全站级联 */

/* mobile-only cutout keyboard (second screen); hidden on desktop */
.mg-mobile-kb { display: none; }
.mg-mobile-kb__frame { position: relative; display: block; }
.mg-mobile-kb__frame > img { display: block; width: 100%; height: auto; filter: drop-shadow(0 16px 40px rgba(0,0,0,0.5)); }
/* light-strip "流光" — one comet sweeping left -> top -> right (skips the bottom edge, which has no strip) */
.mg-kb-glow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.mg-kb-comet { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 18 165; animation: mg-kb-sweep 4.4s linear infinite; }
.mg-kb-comet--halo { stroke: #8c62ff; stroke-width: 30; opacity: 0.8; }
.mg-kb-comet--core { stroke: #e6dbff; stroke-width: 10; }
@keyframes mg-kb-sweep { from { stroke-dashoffset: 183; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .mg-kb-comet { animation: none; opacity: 0; } }

/* ============================================================
   RESPONSIVE — mobile/tablet optimization (≤768px)
   Redefine fluid tokens (fonts/large spacing) + collapse fixed 2-col grids.
   No JSX edits: token vars cascade everywhere; [style*=] overrides inline grids.
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --mg-step-4: 1.875rem;   /* 40 -> 30 */
    --mg-step-5: 2.125rem;   /* 56 -> 34 */
    --mg-step-6: 2.75rem;    /* 80 -> 44 */
    --mg-step-7: 3.5rem;     /* 112 -> 56 */
    --mg-space-8: 40px;      /* 64 -> 40 */
    --mg-space-9: 52px;      /* 96 -> 52 */
    --mg-space-10: 60px;     /* 128 -> 60 */
    --mg-space-11: 88px;     /* 192 -> 88 */
  }
  /* collapse fixed 2-col feature grids (text|image, EVA image pair) -> single column */
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* keep centered-flex children (maxWidth > narrow viewport) inside the container — fixes EmailTeaser clip */
  [style*="align-items: center"] > * { max-width: 100% !important; }
  /* flexbox min-width:auto trap — let flex items shrink below content so text wraps instead of forcing container wide */
  [style*="display: flex"] > * { min-width: 0 !important; }
  h1, h2, h3, p { overflow-wrap: break-word; }
  /* safety net against residual horizontal overflow (e.g. nowrap labels) */
  html, body { overflow-x: hidden; }
  /* mobile nav: hamburger button shows, inline nav becomes a dropdown */
  .mg-burger { display: inline-flex !important; }
  .mg-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column !important; gap: 0 !important; margin-left: 0 !important; flex: none !important;
    background: rgba(10,10,11,0.97); border-bottom: 1px solid var(--mg-slate);
    padding: 4px 0; display: none !important; backdrop-filter: blur(12px);
  }
  .mg-nav--open { display: flex !important; }
  .mg-nav .mg-nav-link { padding: 13px var(--mg-gutter) !important; opacity: 1 !important; width: 100%; }
  /* footer 4-col (1.4fr + 3) -> 2-col so link columns fit narrow screens */
  [style*="1.4fr repeat"] { grid-template-columns: 1fr 1fr !important; }
  /* PDP product-hero 2-col (image|info) -> stack so product image is full-width */
  [style*="0.8fr 1.2fr"], [style*="1.1fr 0.9fr"] { grid-template-columns: 1fr !important; }
  /* hero foreground keyboard: on mobile flow inline (above text) instead of overlapping it */
  .mg-hero-sec { display: flex !important; flex-direction: column !important; }
  .mg-hero-content { order: 1 !important; }
  /* mobile hero = vertical KV filling first screen (ring reaches screen bottom) */
  .mg-cosmos__nebula { display: none !important; }
  .mg-hero-sec { background: #0A0A0B url("assets/img/centauri80-kv-vertical.webp") center / cover no-repeat !important; min-height: 90vh !important; }
  .mg-hero-content { justify-content: flex-start !important; padding-top: var(--mg-space-9) !important; min-height: 0 !important; }
  .mg-hero-scrim { background: linear-gradient(180deg, rgba(10,10,11,0.92) 0%, rgba(10,10,11,0.60) 30%, rgba(10,10,11,0.12) 60%, transparent 100%) !important; }
  .mg-hero-content h1, .mg-hero-content p { text-shadow: 0 2px 14px rgba(0,0,0,0.9), 0 1px 3px rgba(0,0,0,0.95) !important; }
  .mg-hero-content p { color: #fff !important; }
  .mg-hero-kb { display: none !important; }
  /* mobile second screen = cutout keyboard, its TOP edge butted FLUSH against the
     nebula bottom (no gap / no black line / no added glow-pool) */
  .mg-mobile-kb {
    display: block !important;
    position: relative;
    margin-top: 0 !important;
    padding: 0 0 var(--mg-space-8) 0 !important;
    background: var(--mg-void) !important;
  }
}

/* Texte en dégradé (cyan→violet, par thème via --mg-kb-grad-text) — signature MelGeek, partagé pour titres de section / accents. Tian 2026-07-05 : les titres PDP doivent porter le dégradé signature de l'accueil. */
.mg-grad-text { background: var(--mg-kb-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* Bouton « verre » primaire (dégradé translucide du clavier, par thème via --mg-btn-glass-*) — signature accueil, partagé toutes pages. Tian 2026-07-05 : boutons PDP doivent porter le style verre de l'accueil. Tian 2026-07-05 (2) : AUCUNE ombre portée derrière les boutons — seul le liseré verre inset reste. */
.mg-btn-x-primary { background: var(--mg-btn-glass-bg) !important; border:none !important; -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.22) !important; }
.mg-btn-x-primary, :root .mg-btn-x-primary > * { color:var(--mg-btn-glass-ink) !important; -webkit-text-fill-color:var(--mg-btn-glass-ink) !important; }
.mg-btn-x-primary:hover:not([disabled]) { background: var(--mg-btn-glass-bg) !important; filter: brightness(1.05); box-shadow:inset 0 1px 0 rgba(255,255,255,0.30) !important; }