/* ============================================
   COMPONENTS — Buttons, glass, neu, cards
   Style néomorphique premium avec dégradé LED
   ============================================ */

/* ===== Base button ===== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  font-family: var(--f-body);
  font-size: var(--fs-2);
  font-weight: 500;
  color: var(--c-text);
  background: transparent;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 300ms var(--ease), background 300ms var(--ease), border-color 300ms var(--ease), box-shadow 400ms var(--ease), transform 400ms var(--ease);
  will-change: transform;
  user-select: none;
  isolation: isolate;
}

.btn i {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 400ms var(--ease);
}

.btn__label {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn__label em {
  font-family: var(--f-hand);
  font-size: 1.4em;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
}

.btn--lg {
  padding: 18px 30px;
  font-size: var(--fs-3);
  gap: 12px;
}

.btn--lg i {
  width: 18px;
  height: 18px;
}

/* ============================================
   BOUTON PREMIUM — Dégradé LED + néomorphisme
   Utilisé pour les CTA importants
   ============================================ */
.btn--premium {
  position: relative;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  color: var(--c-dark);
  background: var(--grad-led);
  font-weight: 600;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.10) inset,
    0 8px 24px -8px rgba(0, 0, 0, 0.5),
    0 0 0 0 rgba(124, 255, 0, 0);
  transition: transform 400ms var(--ease), box-shadow 400ms var(--ease);
  overflow: hidden;
}

.btn--premium::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 800ms var(--ease);
  pointer-events: none;
  mix-blend-mode: overlay;
}

.btn--premium .btn__label,
.btn--premium i {
  color: var(--c-dark);
  position: relative;
  z-index: 2;
}

.btn--premium .btn__label em {
  color: var(--c-dark);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.btn--premium:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.15) inset,
    0 12px 32px -8px rgba(0, 0, 0, 0.6),
    0 0 32px -4px rgba(124, 255, 0, 0.5),
    0 0 60px -10px rgba(0, 255, 127, 0.3);
}

.btn--premium:hover::before {
  transform: translateX(100%);
}

.btn--premium:hover i {
  transform: translate(2px, -2px) rotate(20deg);
}

.btn--premium:active {
  transform: translateY(0) scale(0.98);
}

/* ============================================
   BOUTON NÉOMORPHIQUE (subtil, fond sombre)
   ============================================ */
.btn--neu {
  background: var(--c-bg-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--c-text);
  border-radius: var(--r-pill);
  box-shadow:
    8px 8px 20px rgba(0, 0, 0, 0.45),
    -6px -6px 16px rgba(255, 255, 255, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  transition: box-shadow 300ms var(--ease), transform 200ms;
}

.btn--neu:hover {
  box-shadow:
    4px 4px 10px rgba(0, 0, 0, 0.45),
    -3px -3px 8px rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(124, 255, 0, 0.10),
    0 0 24px -8px rgba(124, 255, 0, 0.4);
  color: var(--c-text);
}

.btn--neu:active {
  box-shadow:
    inset 6px 6px 12px rgba(0, 0, 0, 0.4),
    inset -4px -4px 8px rgba(255, 255, 255, 0.05);
  transform: translateY(1px);
}

/* ============================================
   GHOST BUTTON
   ============================================ */
.btn--ghost {
  border: 1px solid var(--c-text-line);
  background: transparent;
  color: var(--c-text);
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--c-accent);
  color: var(--c-text);
  box-shadow: 0 0 24px -6px rgba(124, 255, 0, 0.4);
}

.btn--ghost i {
  transition: transform 400ms var(--ease);
}

.btn--ghost:hover i {
  transform: translateY(3px);
}

/* ============================================
   ALIAS rétrocompatibilité (anciens boutons glass → premium)
   ============================================ */
.btn--glass {
  position: relative;
  border-radius: var(--r-pill);
  border: 1px solid rgba(124, 255, 0, 0.25);
  color: var(--c-dark);
  background: var(--grad-led);
  font-weight: 600;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.10) inset,
    0 8px 24px -8px rgba(0, 0, 0, 0.5),
    0 0 32px -8px rgba(124, 255, 0, 0.35);
  overflow: hidden;
  transition: transform 400ms var(--ease), box-shadow 400ms var(--ease);
}

.btn--glass::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 800ms var(--ease);
  pointer-events: none;
  mix-blend-mode: overlay;
}

.btn--glass .btn__label,
.btn--glass i {
  color: var(--c-dark);
  position: relative;
  z-index: 2;
}

.btn--glass .btn__label em {
  color: var(--c-dark);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.btn--glass:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.15) inset,
    0 12px 32px -8px rgba(0, 0, 0, 0.6),
    0 0 40px -4px rgba(124, 255, 0, 0.5),
    0 0 80px -10px rgba(0, 255, 127, 0.3);
}

.btn--glass:hover::before {
  transform: translateX(100%);
}

.btn--glass:hover i {
  transform: translate(2px, -2px) rotate(20deg);
}

.btn--glass:active {
  transform: translateY(0) scale(0.98);
}

.btn--glass.btn--lg {
  padding: 18px 32px;
}

/* ============================================
   NEUMORPHIC SURFACES
   ============================================ */
.neu {
  background: var(--c-bg-2);
  border-radius: var(--r-lg);
  box-shadow:
    12px 12px 30px rgba(0, 0, 0, 0.45),
    -10px -10px 24px rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.neu-inset {
  background: var(--c-bg);
  border-radius: var(--r-md);
  box-shadow:
    inset 6px 6px 14px rgba(0, 0, 0, 0.5),
    inset -4px -4px 10px rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.neu-card {
  position: relative;
  background: linear-gradient(145deg, #131313, #070707);
  border-radius: var(--r-lg);
  box-shadow: var(--neu-card-shadow);
  border: none;
  transition: box-shadow 400ms var(--ease), transform 400ms var(--ease);
}

.neu-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--neu-card-hover-shadow);
}

/* Carte avec LED : effet lumineux vert pomme → fluo → blanc autour */
.neu-card--led {
  position: relative;
  background: linear-gradient(145deg, #131313, #070707);
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform 400ms var(--ease), box-shadow 400ms var(--ease);
}

.neu-card--led::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad-led);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 400ms;
}

.neu-card--led::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: var(--grad-led);
  filter: blur(20px);
  opacity: 0;
  z-index: -1;
  transition: opacity 400ms;
  pointer-events: none;
}

.neu-card--led:hover {
  transform: translateY(-4px);
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.6),
    0 0 40px -10px rgba(124, 255, 0, 0.5);
}

.neu-card--led:hover::before {
  opacity: 1;
}

.neu-card--led:hover::after {
  opacity: 0.35;
}

/* ============================================
   LIQUID GLASS — EXACT shadcn LiquidButton dark mode
   Ombres + backdrop-filter avec SVG filter container-glass
   ============================================ */
.neu-glass {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(145deg, #1C1C1C, #0E0E0E);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-shadow);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: box-shadow 300ms var(--ease), transform 300ms var(--ease), border-color 300ms var(--ease);
}

.neu-glass:hover {
  box-shadow: var(--glass-shadow-hover);
  border-color: rgba(255, 255, 255, 0.10);
}

.neu-glass:active {
  transform: translateY(1.5px) scale(0.99);
  box-shadow: var(--glass-shadow-pressed);
}

/* ============================================
   SURFACE MÉTAL — EXACT shadcn MetalButton default
   Couches: outer (bordure) → inner (reflet) → face (bouton)
   ============================================ */
.neu-metal {
  position: relative;
  display: inline-flex;
  padding: 1.25px;
  border-radius: 6px;
  background: var(--metal-outer);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
  transition: transform 250ms cubic-bezier(0.1, 0.4, 0.2, 1), box-shadow 250ms cubic-bezier(0.1, 0.4, 0.2, 1);
}

.neu-metal__inner {
  position: absolute;
  inset: 1px;
  border-radius: 8px;
  background: var(--metal-inner);
  transition: filter 250ms cubic-bezier(0.1, 0.4, 0.2, 1);
}

.neu-metal__face {
  position: relative;
  z-index: 10;
  margin: 1px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 24px;
  background: var(--metal-face);
  color: white;
  text-shadow: var(--metal-text-shadow);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border: none;
  outline: none;
  transition: transform 250ms cubic-bezier(0.1, 0.4, 0.2, 1), filter 250ms cubic-bezier(0.1, 0.4, 0.2, 1);
}

.neu-metal:hover {
  transform: translateY(0) scale(1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.neu-metal:hover .neu-metal__inner {
  filter: brightness(1.05);
}

.neu-metal:active {
  transform: translateY(2.5px) scale(0.99);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.neu-metal:active .neu-metal__face {
  transform: scale(0.97);
}

/* Shine effect on press */
.neu-metal__shine {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  border-radius: 6px;
  opacity: 0;
  transition: opacity 300ms;
}

.neu-metal:active .neu-metal__shine {
  opacity: 0.20;
}

.neu-metal__shine::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent, rgb(245 245 245 / 1), transparent);
}

/* ============================================
   BOUTON LIQUID GLASS — EXACT shadcn LiquidButton dark
   ============================================ */
.btn--neu-glass {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: transparent;
  color: var(--c-text);
  border: none;
  border-radius: var(--r-pill);
  box-shadow: var(--glass-shadow);
  transition: box-shadow 300ms var(--ease), transform 200ms;
}

/* Quand btn--glass est combiné avec btn--neu-glass, garde le fond vert + bordure */
.btn--glass.btn--neu-glass {
  background: var(--grad-led);
  border: 1px solid rgba(124, 255, 0, 0.25);
}

.btn--neu-glass .btn__label,
.btn--neu-glass i {
  color: var(--c-text);
  position: relative;
  z-index: 1;
}

.btn--neu-glass:hover {
  transform: scale(1.05);
  box-shadow: var(--glass-shadow-hover);
}

.btn--neu-glass:active {
  transform: translateY(2.5px) scale(0.99);
  box-shadow: var(--glass-shadow-pressed);
}

/* ============================================
   BOUTON MÉTAL — EXACT shadcn MetalButton default
   ============================================ */
.btn--neu-metal {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  padding: 1.25px;
  border-radius: 6px;
  background: var(--metal-outer);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
  transition: transform 250ms cubic-bezier(0.1, 0.4, 0.2, 1), box-shadow 250ms cubic-bezier(0.1, 0.4, 0.2, 1);
}

.btn--neu-metal::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 8px;
  background: var(--metal-inner);
  z-index: 0;
  transition: filter 250ms cubic-bezier(0.1, 0.4, 0.2, 1);
}

.btn--neu-metal .btn__label,
.btn--neu-metal i {
  position: relative;
  z-index: 10;
  margin: 1px;
  border-radius: 6px;
  padding: 8px 24px;
  background: var(--metal-face);
  color: white;
  text-shadow: var(--metal-text-shadow);
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn--neu-metal:hover {
  transform: translateY(0) scale(1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.btn--neu-metal:hover::before {
  filter: brightness(1.05);
}

.btn--neu-metal:active {
  transform: translateY(2.5px) scale(0.99);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.btn--neu-metal:active .btn__label,
.btn--neu-metal:active i {
  transform: scale(0.97);
}

/* ============================================
   Magnet helper
   ============================================ */
[data-magnet] {
  transition: transform 300ms var(--ease);
}

/* ============================================
   Lucide icons inline
   ============================================ */
i[data-lucide] {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}