/* =========================================================
   GLYMP · glymp.css
   Variables globales + reset partagés + particules
   v3 — Palette rose/violet (style YUKO/TikTok)
   ========================================================= */

:root{
  /* ---------- BACKGROUNDS ---------- */
  --bg-0:        #000000;
  --bg-1:        #0a0a0a;
  --bg-2:        #141414;
  --bg-3:        #1c1c1c;

  --border:      rgba(255,255,255,0.08);
  --border-hi:   rgba(255,255,255,0.16);
  --border-max:  rgba(255,255,255,0.32);

  --text:        #ffffff;
  --text-dim:    rgba(255,255,255,0.55);
  --text-mute:   rgba(255,255,255,0.35);
  --text-faint:  rgba(255,255,255,0.18);

  --danger:      #ef4444;
  --success:     #10b981;

  /* ---------- ACCENT YUKO/TIKTOK (rose + violet) ---------- */
  --violet:        #9146ff;
  --violet-soft:   #a78bfa;
  --pink:          #ec4899;
  --pink-hot:      #fe2c55;

  /* Gradient signature */
  --gradient-cta:       linear-gradient(90deg, #9146ff 0%, #ec4899 100%);
  --gradient-cta-hover: linear-gradient(90deg, #a366ff 0%, #f256a8 100%);
  --gradient-text:      linear-gradient(135deg, #9146ff 0%, #ec4899 60%, #fe2c55 100%);

  /* Alias */
  --accent:      var(--pink);

  /* ---------- GLOWS ---------- */
  --glow-cta:    0 6px 20px rgba(236,72,153,0.35);
  --glow-cta-hi: 0 8px 28px rgba(236,72,153,0.55);

  /* ---------- RADIUS ---------- */
  --r-sm:        6px;
  --r-md:        8px;
  --r-lg:        12px;
  --r-xl:        20px;
  --r-pill:      999px;

  /* ---------- TYPO ---------- */
  --font-body:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:'Inter', sans-serif;

  /* ---------- SAFE AREA ---------- */
  --safe-top:    env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}

/* =========================================================
   RESET
   ========================================================= */
*,*::before,*::after{ box-sizing: border-box; }

html,body{
  margin: 0; padding: 0;
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

html{ height: 100%; }
body{ min-height: 100vh; min-height: 100dvh; }

button{
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

a{ color: var(--text); text-decoration: none; }
img{ display: block; max-width: 100%; }

/* =========================================================
   LOGO GLYMP — texte gradient violet→rose
   ========================================================= */
.glymp-logo{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -0.045em;
  line-height: 1;
  display: inline-block;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  user-select: none;
}
.glymp-logo::before{ content: 'GLYMP'; }

.glymp-logo--sm{ font-size: 18px; }
.glymp-logo--md{ font-size: 24px; }
.glymp-logo--lg{ font-size: 42px; }

/* =========================================================
   PARTICULES ASCENDANTES (rose + violet)
   <div class="bg-particles"><span></span> × 18</div>
   ========================================================= */
.bg-particles{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.bg-particles span{
  position: absolute;
  bottom: -10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236,72,153,0.85) 0%, rgba(236,72,153,0) 70%);
  filter: blur(0.5px);
  opacity: 0;
  animation: gParticleRise 18s linear infinite;
}

/* Mix rose + violet : 1 sur 3 est violet */
.bg-particles span:nth-child(3n){
  background: radial-gradient(circle, rgba(167,139,250,0.75) 0%, rgba(124,58,237,0) 70%);
}

.bg-particles span:nth-child(1)  { left: 4%;  width: 3px; height: 3px; animation-duration: 16s; animation-delay: 0s;    }
.bg-particles span:nth-child(2)  { left: 11%; width: 5px; height: 5px; animation-duration: 22s; animation-delay: 3s;    }
.bg-particles span:nth-child(3)  { left: 18%; width: 2px; height: 2px; animation-duration: 12s; animation-delay: 1.5s;  }
.bg-particles span:nth-child(4)  { left: 25%; width: 6px; height: 6px; animation-duration: 26s; animation-delay: 6s;    }
.bg-particles span:nth-child(5)  { left: 32%; width: 3px; height: 3px; animation-duration: 18s; animation-delay: 2s;    }
.bg-particles span:nth-child(6)  { left: 38%; width: 4px; height: 4px; animation-duration: 20s; animation-delay: 8s;    }
.bg-particles span:nth-child(7)  { left: 45%; width: 2px; height: 2px; animation-duration: 14s; animation-delay: 4s;    }
.bg-particles span:nth-child(8)  { left: 52%; width: 5px; height: 5px; animation-duration: 24s; animation-delay: 9s;    }
.bg-particles span:nth-child(9)  { left: 58%; width: 3px; height: 3px; animation-duration: 17s; animation-delay: 1s;    }
.bg-particles span:nth-child(10) { left: 64%; width: 4px; height: 4px; animation-duration: 21s; animation-delay: 7s;    }
.bg-particles span:nth-child(11) { left: 71%; width: 6px; height: 6px; animation-duration: 28s; animation-delay: 11s;   }
.bg-particles span:nth-child(12) { left: 77%; width: 2px; height: 2px; animation-duration: 13s; animation-delay: 2.5s;  }
.bg-particles span:nth-child(13) { left: 83%; width: 4px; height: 4px; animation-duration: 19s; animation-delay: 5s;    }
.bg-particles span:nth-child(14) { left: 88%; width: 3px; height: 3px; animation-duration: 23s; animation-delay: 10s;   }
.bg-particles span:nth-child(15) { left: 92%; width: 5px; height: 5px; animation-duration: 25s; animation-delay: 0.5s;  }
.bg-particles span:nth-child(16) { left: 96%; width: 2px; height: 2px; animation-duration: 15s; animation-delay: 12s;   }
.bg-particles span:nth-child(17) { left: 8%;  width: 4px; height: 4px; animation-duration: 20s; animation-delay: 13s;   }
.bg-particles span:nth-child(18) { left: 75%; width: 3px; height: 3px; animation-duration: 18s; animation-delay: 14.5s; }

@keyframes gParticleRise{
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.7; }
  50%  { transform: translateY(-50vh) translateX(20px); opacity: 0.9; }
  90%  { opacity: 0.4; }
  100% { transform: translateY(-105vh) translateX(-10px); opacity: 0; }
}

/* =========================================================
   BOUTONS GLOBAUX
   ========================================================= */

/* Primaire = gradient violet → rose (YUKO) */
.g-btn-primary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  padding: 0 20px;
  border-radius: var(--r-md);
  border: none;
  background: var(--gradient-cta);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.25s, background 0.25s;
  box-shadow: var(--glow-cta);
  position: relative;
  overflow: hidden;
}
.g-btn-primary::before{
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.22) 50%, transparent 100%);
  animation: gShineSweep 3.5s ease-in-out infinite;
}
.g-btn-primary:hover{
  background: var(--gradient-cta-hover);
  box-shadow: var(--glow-cta-hi);
}
.g-btn-primary:active{ transform: scale(0.985); }
.g-btn-primary:disabled{
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.g-btn-primary:disabled::before{ display: none; }

@keyframes gShineSweep{
  0%   { left: -100%; }
  100% { left: 120%; }
}

/* Ghost / secondaire */
.g-btn-ghost{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 46px;
  padding: 0 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-hi);
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.g-btn-ghost:hover{
  background: rgba(255,255,255,0.04);
  border-color: var(--border-max);
}
.g-btn-ghost:active{ transform: scale(0.985); }

/* =========================================================
   ALERTS
   ========================================================= */
.alert{
  padding: 12px 14px;
  border-radius: var(--r-md);
  font-size: 14px;
  margin-bottom: 16px;
  border: 1px solid transparent;
}
.alert-error{
  background: rgba(239,68,68,0.08);
  border-color: rgba(239,68,68,0.3);
  color: #fecaca;
}

/* =========================================================
   TOAST
   ========================================================= */
.toast{
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 200;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: rgba(20,20,20,0.96);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5), 0 0 0 1px var(--border);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), opacity 0.3s ease;
}
.toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast.error{
  background: rgba(239,68,68,0.96);
  color: #fff;
}
.toast svg{ width: 16px; height: 16px; }

/* =========================================================
   SHAKE
   ========================================================= */
.shake{ animation: gShake 0.3s cubic-bezier(.36,.07,.19,.97); }
@keyframes gShake{
  10%,90%{ transform: translateX(-1px); }
  20%,80%{ transform: translateX(2px); }
  30%,50%,70%{ transform: translateX(-4px); }
  40%,60%{ transform: translateX(4px); }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .bg-particles span,
  .g-btn-primary::before{ animation: none; }
  .shake{ animation: none; }
}