* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Times New Roman", serif;
}

/* =========================================
   1. BACKGROUND & LUMIÈRES (OPTIMISÉ)
   ========================================= */

body {
  background-color: #000;
  background: #000;
  overflow: hidden;
}

.stage {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  perspective: 1200px;
  isolation: isolate;
}

/* LUMIÈRES AMBIANTES FIXES (NO LAG) */
.ambient-light,
.ambient-light-top-right {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  border-radius: 50%;
}

.ambient-light {
  bottom: -25vh;
  left: -25vw;
  width: 100vw;
  height: 100vw;
  background: radial-gradient(
    circle,
    rgba(0, 255, 120, 0.18) 0%,
    rgba(0, 255, 170, 0.05) 40%,
    transparent 70%
  );
}

.ambient-light-top-right {
  top: -30vh;
  right: -30vw;
  width: 110vw;
  height: 110vw;
  background: radial-gradient(
    circle,
    rgba(0, 255, 170, 0.15) 0%,
    rgba(120, 255, 210, 0.05) 45%,
    transparent 70%
  );
}

@media (max-width: 768px) {
  .ambient-light { width: 140vw; height: 140vw; opacity: 0.8; bottom: -15vh; left: -35vw; }
  .ambient-light-top-right { width: 130vw; height: 130vw; opacity: 0.8; top: -20vh; right: -40vw; }
}

/* =========================================
   2. GESTION DE LA CARTE (3D)
   ========================================= */

.card-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.2vh, 22px);
  z-index: 2;
  transform: translateZ(0);
}

@media (hover: hover) and (pointer: fine) {
  .card-stack {
    gap: clamp(35px, 0.9vh, 12px);
    transform: translateY(clamp(-22px, -2.6vh, -12px)) translateZ(0);
  }
}

.tilt-area {
  padding: clamp(16px, 4vw, 56px);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
  touch-action: none;
}

@media (hover: hover) and (pointer: fine) {
  .tilt-area {
    padding: clamp(40px, 8vw, 160px);
    margin-bottom: -40px;
  }
}

.card-container {
  width: clamp(280px, 60vw, 520px);
  aspect-ratio: 520 / 325;
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  -webkit-transform-style: preserve-3d;
  cursor: pointer;
  z-index: 2;
  box-shadow:
    0 0 12px rgba(255,255,255,0.16),
    0 20px 45px rgba(0,0,0,0.72);
  transform: perspective(1200px) rotateX(0deg) rotateY(0deg) translateZ(0);
  border-radius: 16px;
  background-color: #000;
}

@media (max-width: 480px) { .card-container { border-radius: 6px; } }
@media (pointer: coarse) { .card-container { transition: none; } }
@media (hover: hover) and (pointer: fine) { .card-container { transition: transform 0.10s ease-out; } }

.card-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: inherit;
}

.card-front {
  background-image: url("../assets/americanexpress.webp");
  background-size: cover;
  background-position: center;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  background-color: #1a1a1a; 
}

@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  .card-front {
    background-image: image-set(url("../assets/americanexpress.webp") type("image/webp"));
  }
}

/* =========================================
   3. EFFETS VISUELS (Reflets / Shine)
   ========================================= */

/* ✅ REFLET SPOTLIGHT (CORRIGÉ) */
.reflection {
  position: absolute;
  z-index: 50; /* Très haut pour passer devant */
  
  width: 500px;
  height: 500px;
  
  /* Centrage par défaut (important pour le JS) */
  top: 0;
  left: 0;
  margin-left: -250px;
  margin-top: -250px;
  
  border-radius: 50%;
  pointer-events: none;
  
  /* Dégradé puissant */
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 1.0) 0%,   /* Blanc pur au centre */
    rgba(255, 255, 255, 0.6) 25%, 
    rgba(255, 255, 255, 0.1) 60%, 
    transparent 85%
  );
  
  mix-blend-mode: overlay;
  
  opacity: 0;
  will-change: transform, opacity;
  transform: translateZ(5px); /* Surélévation pour visibilité */
  transition: opacity 0.3s ease-out;
}

/* Apparition au survol uniquement sur PC */
@media (hover: hover) and (pointer: fine) {
  .card-container:hover .reflection {
    opacity: 1;
  }
}

/* ❌ J'AI SUPPRIMÉ LE BLOC CONFLICTUEL ICI QUI UTILISAIT var(--px) */

/* EFFET SHINE (BANDE PASSANTE) */
.shine {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.14) 35%, rgba(255,255,255,0) 50%);
  transform: translateX(-120%);
  pointer-events: none;
  opacity: 0.9;
  z-index: 3;
}

@media (prefers-reduced-motion: no-preference) { .shine { animation: shine 12s infinite; } }
@media (prefers-reduced-motion: reduce) { .shine { animation: none; opacity: 0.25; } }

@keyframes shine {
  0% { transform: translateX(-120%) translateZ(2px); }
  30%, 100% { transform: translateX(120%) translateZ(2px); }
}

/* =========================================
   4. TEXTE GLITCH & TYPOGRAPHIE
   ========================================= */

.glitch-text {
  color: #b8fffb;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: clamp(16px, 3.2vw, 42px);
  letter-spacing: .22em;
  text-shadow: 0 0 18px rgba(43,255,243,.22);
  user-select: none;
  white-space: nowrap;
  position: relative;
  line-height: 1;
  pointer-events: all;
  
  /* 1. On garde l'agrandissement de la zone de clic */
  overflow: visible; 
  padding: 20px 30px; 
  margin: -20px -30px;
  cursor: pointer;
  transform: translateZ(0);

  /* ✅ NOUVEAU : On utilise Flexbox pour centrer le VRAI texte parfaitement au milieu du padding */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 480px) { .glitch-text { font-size: calc(clamp(14px, 3.2vw, 42px) * 1.3); } }

.glitch-text::before, .glitch-text::after {
  content: attr(data-text); 
  position: absolute; 
  inset: 0; 
  opacity: .75; 
  pointer-events: none;
  
  /* ✅ NOUVEAU : On force aussi le centrage du texte "fantôme" (Cyan/Magenta) */
  /* Comme ils remplissent toute la boîte (inset:0), il faut centrer leur contenu pour qu'il s'aligne avec le vrai texte */
  display: flex;
  align-items: center;
  justify-content: center;
}




.glitch-text::before { color: #2bfff3; transform: translate(2px,0); }
.glitch-text::after { color: #ff2bd6; transform: translate(-2px,0); }

@media (hover: hover) and (pointer: fine) {
  .tilt-area {
    --pad: clamp(40px, 8vw, 160px);
    padding: var(--pad);
    margin-bottom: calc(-1 * (var(--pad) - 10px));
  }
  #screen { position: relative; z-index: 5; }
}

/* Conteneur global pour aligner Logo + Texte */
.code-line-wrapper {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    position: relative;
    z-index: 10;

    /* --- AJUSTEMENT TAILLE CLIQUABLE --- */
    
    /* 1. On ajoute de l'épaisseur invisible autour (la zone de clic) */
    /* Haut/Bas: 40px, Gauche/Droite: 60px */
    padding: 40px 60px; 

    /* 2. On applique une marge négative équivalente vers le HAUT */
    /* Cela empêche le texte de descendre et conserve la distance exacte avec la carte */
    margin-top: -40px;
    
    /* 3. (Optionnel) Marge négative vers le BAS si tu ne veux pas pousser les éléments en dessous */
    margin-bottom: -40px;

    /* Décommente la ligne ci-dessous pour visualiser la zone cliquable en rouge temporairement */
    /* border: 1px solid red; */
}

/* Style du slot du logo PENDANT l'animation (les lettres qui défilent) */
.slot-char {
  /* 1. La même police que .glitch-text */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  
  /* 2. La même taille */
  font-size: clamp(16px, 3.2vw, 42px);
  
  /* 3. COULEUR & GLOW (C'est ça qui manquait pour l'effet néon) */
  color: #b8fffb;
  text-shadow: 0 0 18px rgba(43,255,243,.22);
  
  /* 4. Mise en page */
  min-width: 1em;
  text-align: center;
  display: inline-block; /* Assure que le transform fonctionne si besoin */
}

.discord-icon {
  height: 0.9em; /* Légèrement plus petit pour matcher la hauteur des majuscules */
  width: auto;
  display: inline-block;
  position: relative;
  top: 6px; /* Petit offset vertical pour centrer optiquement avec la police monospace */
  filter: drop-shadow(0 0 5px rgba(43, 255, 243, 0.6));
}

/* Ajustement du texte pour qu'il ne bouge pas */
#text-slot {
  margin: 0;
  padding: 0;
}