/* ==========================================================
   LAMA WORLDS — STYLE GLOBAL (CLEAN)
   Organisation :
   1. RESET & BASE
   2. HEADER & NAVIGATION
   3. HERO (Accueil + Star Citizen)
   4. BOUTONS
   5. SECTIONS GÉNÉRIQUES
   6. GALERIE
   7. EVENTS (glow cards)
   8. CTA PANELS (Discord / Organisation)
   9. TEAM (À propos)
   10. TWITCH PANEL
   11. TIMELINE (+ modales)
   12. INTRO (Logo)
   13. ACTUALITÉS
   14. STATS
   15. VISION
   16. VALEURS
   17. FOOTER
   18. BACKGROUND STARS
   19. RESPONSIVE
   20. LANG SWITCHER
   21. CURSEUR PERSO
   22. BOUTON RETOUR HAUT
   23. TRANSITION HOLOGRAPHIQUE
   24. MODE STELLAIRE
========================================================== */


/* ========================================
   1. RESET & BASE
======================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #0b1d2a;
  color: #dce3ec;
  opacity: 0;
  transition: opacity 0.8s ease;
  padding-top: 90px;
  /* décale le contenu sous le header fixe */
}

body.ready {
  opacity: 1;
}

a {
  text-decoration: none;
  color: inherit;
}

p {
  text-align: center;
}


/* ========================================
   2. HEADER & NAVIGATION (verre + sticky + nav active)
======================================== */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 12px 40px;
  background: rgba(10, 25, 45, 0.65);
  border-bottom: 1px solid rgba(0, 255, 255, 0.15);
  backdrop-filter: blur(14px);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
  transition: all 0.4s ease, backdrop-filter 0.3s ease;
  animation: headerFadeIn 0.6s ease;
}

header.scrolled {
  background: rgba(10, 25, 45, 0.9);
  box-shadow: 0 0 35px rgba(0, 255, 255, 0.35);
  border-bottom-color: rgba(0, 255, 255, 0.3);
  backdrop-filter: blur(18px);
}

@keyframes headerFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.logo {
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 2px;
  justify-self: start;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

nav {
  justify-self: center;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 40px;
  margin: 0;
  padding: 0;
}

nav ul li a {
  color: #bfe1ff;
  font-weight: 500;
  font-size: 18px;
  position: relative;
  padding: 6px 0;
  transition: color 0.3s ease;
}

nav ul li a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: #00bfff;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

nav ul li a:hover {
  color: #00bfff;
}

nav ul li a:hover::after,
nav ul li a.active::after {
  width: 60%;
}

nav ul li a.active {
  color: #00ffff;
  text-shadow: 0 0 8px #00ffff, 0 0 20px rgba(0, 255, 255, 0.4);
}

header:hover {
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.25), 0 0 60px rgba(0, 255, 255, 0.05);
}

/* Burger menu */
.burger {
  display: none;
  width: 26px;
  height: 22px;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  z-index: 1100;
}

.burger span {
  display: block;
  height: 3px;
  width: 100%;
  background: #00c8ff;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.burger.active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.burger.active span:nth-child(2) {
  opacity: 0;
}

.burger.active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* Mobile nav (mode compact) */
@media (max-width: 900px) {
  header {
    padding: 10px 18px;
  }

  nav ul {
    position: fixed;
    top: 70px;
    right: 0;
    width: 220px;
    height: calc(100vh - 70px);
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background: rgba(10, 20, 40, 0.92);
    border-left: 1px solid rgba(0, 200, 255, 0.2);
    box-shadow: -6px 0 25px rgba(0, 200, 255, 0.15);
    padding: 20px;
    transform: translateX(100%);
    transition: transform .3s ease;
  }

  nav ul.active {
    transform: translateX(0);
  }

  nav ul li {
    width: 100%;
    margin: 10px 0;
  }

  nav a {
    display: block;
    width: 100%;
    padding: 8px 0;
    color: #cdeaff;
    font-size: 1.1rem;
  }

  .burger {
    display: flex;
  }

  .lang-switch {
    position: absolute;
    right: 65px;
  }
}

/* Lang switch */
.lang-switch {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Login button in header */
.glass-btn-small {
  background: rgba(255, 255, 255, 0.08);
  color: #b9d6f2;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}

.glass-btn-small:hover {
  background: rgba(86, 176, 255, 0.15);
  color: #56b0ff;
  border-color: rgba(86, 176, 255, 0.3);
}

/* Modal centering */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.modal[style*="display: block"],
.modal.show {
  display: flex !important;
}

.modal-content {
  position: relative;
  max-width: 500px;
  width: 90%;
}


/* ========================================
   3. HERO (Accueil + Star Citizen)
======================================== */
.hero {
  background: url("../src/Logo_BG/background.png") no-repeat center/cover;
  height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  padding: 0 20px;
  color: #fff;
}

.hero h1 {
  font-size: 50px;
  margin-bottom: 20px;
}

.hero p {
  font-size: 20px;
  margin-bottom: 30px;
}

/* STAR CITIZEN — HERO IMAGE (centrage) */
.hero-starcitizen {
  position: relative;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
  background:
    linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.35)),
    url("../src/StarCitizen/picture/perseus1.png") no-repeat center 60% / cover;
  border-bottom: 2px solid rgba(86, 176, 255, 0.1);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 0 20px;
  animation: fadeZoom 1.2s ease-out both;
}

.hero-content h1 {
  font-size: clamp(30px, 5vw, 50px);
  margin-bottom: 20px;
  text-shadow: 0 0 12px rgba(86, 176, 255, .8), 0 0 22px rgba(86, 176, 255, .4);
}

.hero-content p {
  font-size: 20px;
  margin-bottom: 30px;
  opacity: 0.9;
}

@keyframes fadeZoom {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(15px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Carrousel cinématique */
.cinematic-carousel {
  position: relative;
  max-width: 1000px;
  margin: 60px auto;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 25px rgba(86, 176, 255, 0.15);
}

.carousel-track {
  position: relative;
  width: 100%;
  height: 520px;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.slide.active {
  opacity: 1;
  z-index: 2;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.9);
  transition: transform 2.5s ease, filter 1.5s ease;
}

.slide.active img {
  transform: scale(1.03);
  filter: brightness(1);
}

.caption {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10, 25, 45, 0.75);
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 600;
  color: #dcefff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 12px rgba(86, 176, 255, 0.25);
  opacity: 0;
  transition: opacity 1.5s ease;
}

.slide.active .caption {
  opacity: 1;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(10, 25, 45, 0.6);
  border: none;
  color: #56b0ff;
  font-size: 32px;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
  z-index: 10;
}

.carousel-btn:hover {
  background: rgba(86, 176, 255, 0.25);
  transform: translateY(-50%) scale(1.1);
}

.carousel-btn.prev {
  left: 15px;
}

.carousel-btn.next {
  right: 15px;
}

/* CTA Discord / Organisation SC */
.sc-section .cta-panel {
  background: #0e2435;
  border-radius: 16px;
  padding: 28px;
  text-align: center;
  max-width: 700px;
  margin: 60px auto;
  box-shadow: 0 0 15px rgba(86, 176, 255, .25);
  position: relative;
  z-index: 2;
}

.sc-section .cta-links img {
  height: 70px;
  transition: transform 0.3s, filter 0.3s;
}

.sc-section .cta-links img:hover {
  transform: scale(1.15);
  filter: drop-shadow(0 0 15px #56b0ff);
}


/* ========================================
   4. BOUTONS
======================================== */
.btn-cta {
  background: #1a8cff;
  padding: 12px 28px;
  border-radius: 8px;
  font-weight: bold;
  color: #fff;
  transition: all 0.3s;
  display: inline-block;
  cursor: pointer;
}

.btn-cta:hover {
  background: #56b0ff;
  box-shadow: 0 0 10px #56b0ff, 0 0 20px #56b0ff;
}


/* ========================================
   5. SECTIONS GÉNÉRIQUES
======================================== */
section {
  padding: 60px 80px;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

section.visible {
  opacity: 1;
  transform: translateY(0);
}

section.instant {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

section h2 {
  font-size: 32px;
  margin-bottom: 20px;
  color: #56b0ff;
}

section p {
  font-size: 18px;
  line-height: 1.6;
  max-width: 900px;
  margin: 0 auto;
}


/* ========================================
   6. GALERIE
======================================== */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.gallery img {
  width: 100%;
  border-radius: 8px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.gallery img:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px #56b0ff;
}


/* ========================================
   7. EVENTS (glow cards)
======================================== */
.sc-ops {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.glow-card {
  background: #0e2435;
  border-radius: 14px;
  padding: 22px;
  border: 1px solid rgba(86, 176, 255, .15);
  box-shadow: 0 0 12px rgba(86, 176, 255, .25);
  transition: transform .2s ease, box-shadow .2s ease;
}

.glow-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 25px rgba(86, 176, 255, .35);
}

.glow-card h3 {
  margin-bottom: 10px;
}

.badge {
  display: inline-block;
  font-size: 12px;
  color: #bfe1ff;
  background: rgba(86, 176, 255, .12);
  border: 1px solid rgba(86, 176, 255, .25);
  padding: 5px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}


/* ========================================
   8. CTA PANELS (Discord / Organisation)
======================================== */
.cta-panel {
  background: #0e2435;
  border-radius: 16px;
  padding: 28px;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  box-shadow: 0 0 15px rgba(86, 176, 255, .25);
}

.cta-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.discord-logo {
  height: 80px;
  transition: transform 0.3s, filter 0.3s;
}

.discord-logo:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px #56b0ff);
}


/* ========================================
   9. TEAM (À propos)
======================================== */
.team {
  padding: 60px 20px;
  text-align: center;
}

.team h2 {
  font-size: 32px;
  margin-bottom: 40px;
  color: #56b0ff;
}

.team-grid {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.team-card {
  background: #0e2435;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(86, 176, 255, .25);
  width: 220px;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}

.team-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 25px rgba(86, 176, 255, .45);
}

.team-card img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 15px;
  border: 3px solid #56b0ff;
}

.team-card h3 {
  color: #fff;
  margin-bottom: 5px;
}

.team-card p {
  font-size: 14px;
  color: #bfe1ff;
}


/* ========================================
   10. TWITCH PANEL
======================================== */
.twitch-panel {
  background: #0e2435;
  padding: 30px;
  border-radius: 12px;
  max-width: 1000px;
  margin: 50px auto;
  text-align: center;
  box-shadow: 0 0 15px rgba(86, 176, 255, 0.6);
}

.twitch-panel h3 {
  color: #56b0ff;
  margin-bottom: 20px;
}

#StriikzLeLama {
  width: 100%;
  height: 550px;
  border-radius: 8px;
  overflow: hidden;
}


/* ========================================
   12. INTRO (Logo)
======================================== */
#intro {
  text-align: center;
  padding: 100px 20px 60px;
}

#intro .intro-logo {
  width: clamp(120px, 20vw, 180px);
  height: auto;
  margin: 0 auto 16px;
  filter: drop-shadow(0 0 10px rgba(86, 176, 255, 0.3));
  animation: float 5s ease-in-out infinite, fadeIn 1.2s ease forwards;
  opacity: 0;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}




/* ========================================
   14. STATS
======================================== */
#stats {
  padding: 80px 20px;
  text-align: center;
}

.stats-grid {
  display: flex;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap;
  margin-top: 40px;
}

.stat {
  background: #0e2435;
  border-radius: 12px;
  padding: 30px 40px;
  box-shadow: 0 0 15px rgba(86, 176, 255, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 25px rgba(86, 176, 255, 0.35);
}

.stat h3 {
  color: #56b0ff;
  font-size: 36px;
  margin-bottom: 10px;
}

.stat p {
  font-size: 16px;
  opacity: 0.85;
}


/* ========================================
   15. VISION
======================================== */
#vision {
  padding: 100px 20px;
  text-align: center;
  color: #dce3ec;
  position: relative;
}

#vision::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 20%, rgba(86, 176, 255, 0.08), transparent 60%);
  z-index: 0;
}

#vision h2,
#vision p {
  position: relative;
  z-index: 1;
}

#vision h2 {
  color: #56b0ff;
  margin-bottom: 20px;
}

#vision p {
  font-size: 18px;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
}


/* ========================================
   16. VALEURS
======================================== */
#valeurs {
  padding: 80px 20px;
  text-align: center;
}

.valeurs-grid {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 40px;
}

.valeur {
  background: #0e2435;
  border-radius: 12px;
  padding: 30px;
  width: 260px;
  box-shadow: 0 0 15px rgba(86, 176, 255, 0.2);
}

.valeur h3 {
  color: #56b0ff;
  margin-bottom: 10px;
}

.valeur p {
  font-size: 15px;
  opacity: 0.85;
}


/* ========================================
   17. FOOTER
======================================== */
footer {
  background: #0e2435;
  text-align: center;
  padding: 30px 15px;
  margin-top: 40px;
  font-size: 14px;
  color: #b7c5d0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

footer a {
  color: #56b0ff;
  font-weight: 500;
  margin: 0 5px;
}

footer a:hover {
  text-decoration: underline;
}

footer .credit {
  font-size: 13px;
  color: #8695a3;
  margin-top: 10px;
}


/* ========================================
   18. BACKGROUND STARS
======================================== */
.lw-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1200px 700px at 50% -20%, rgba(255, 0, 0, 0.13), transparent 60%),
    radial-gradient(900px 500px at 80% 20%, rgba(0, 200, 255, 0.09), transparent 60%),
    linear-gradient(180deg, #071326 0%, #071a27 100%);
  overflow: hidden;
}

.lw-bg::before {
  content: "";
  position: absolute;
  inset: -50% -50%;
  background-image: radial-gradient(#ffffffa6 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: 0.08;
  animation: twinkle 12s linear infinite;
}

@keyframes twinkle {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  100% {
    transform: translate3d(-50px, -50px, 0) rotate(0.01turn);
  }
}


/* ========================================
   19. RESPONSIVE (regroupé)
======================================== */
@media (max-width: 1024px) {
  section {
    padding: 40px 20px;
  }
}

@media (max-width: 768px) {
  .hero-starcitizen {
    min-height: 45vh;
  }

  .hero-content h1 {
    font-size: 28px;
  }

  .hero-content p {
    font-size: 16px;
  }

  .btn-cta {
    width: 100%;
    max-width: 250px;
  }

  .gallery {
    grid-template-columns: 1fr;
  }

  #StriikzLeLama {
    height: 400px;
  }

  .slide img {
    height: 300px;
  }

  .caption {
    font-size: 14px;
    bottom: 20px;
  }

  .carousel-btn {
    font-size: 22px;
    padding: 8px 10px;
  }

  .timeline::after {
    left: 20px;
  }

  .event {
    width: 100%;
    padding-left: 50px;
    text-align: left;
    left: 0;
    transform: none;
  }

  .event.left::before,
  .event.right::before {
    left: 20px;
  }

  .event .content {
    margin: 0 0 30px;
    text-align: left;
  }
}

@media (max-width: 480px) {
  section h2 {
    font-size: 22px;
  }

  section p {
    font-size: 15px;
  }

  .discord-logo {
    height: 60px;
  }

  #StriikzLeLama {
    height: 250px;
  }
}


/* ========================================
   20. LANG SWITCHER
======================================== */
.lang-switch {
  justify-self: end;
}

#lang-toggle {
  background: rgba(255, 255, 255, 0.08);
  color: #b9d6f2;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}

#lang-toggle:hover {
  background: rgba(86, 176, 255, 0.15);
  color: #56b0ff;
  transform: scale(1.05);
}


/* ========================================
   21. CURSEUR PERSONNALISÉ (HALO + PULSE)
======================================== */
/* cache le curseur d'origine partout */
body,
a,
button,
#back-to-top {
  cursor: none !important;
}

/* curseur principal */
#cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 100000 !important;
  /* au-dessus de tout */
  background: radial-gradient(circle, rgba(0, 200, 255, 0.9) 0%, rgba(0, 150, 255, 0.3) 60%, transparent 80%);
  box-shadow: 0 0 12px rgba(0, 200, 255, 0.6), 0 0 30px rgba(0, 200, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: background 0.2s ease, box-shadow 0.2s ease, width 0.1s ease, height 0.1s ease, transform 0.08s linear;
  mix-blend-mode: lighten;
}

/* halo (liens, boutons) */
#cursor.halo {
  width: 28px;
  height: 28px;
  background: radial-gradient(circle, rgba(0, 255, 255, 0.6) 0%, rgba(0, 255, 255, 0.2) 50%, transparent 80%);
  border: 1px solid rgba(0, 255, 255, 0.6);
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.8), 0 0 50px rgba(0, 255, 255, 0.4);
  animation: haloPulse 1.2s infinite alternate;
}

@keyframes haloPulse {
  from {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.9;
  }

  to {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 0.6;
  }
}

/* pulse (clic) */
#cursor.click {
  animation: cursorClick 0.25s ease-out;
}

@keyframes cursorClick {
  0% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.9), 0 0 60px rgba(0, 255, 255, 0.5);
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 12px rgba(0, 200, 255, 0.6), 0 0 30px rgba(0, 200, 255, 0.3);
  }
}

/* évite que le curseur passe sous les éléments interactifs */
a,
button {
  position: relative;
  z-index: 10;
}

.lw-bg {
  z-index: -2;
}

/* --- Fix curseur sur la timeline --- */
.event .content,
.timeline-modal,
.timeline-modal * {
  cursor: none !important;
}

.event .content:hover~#cursor {
  /* forcer halo en mode lien */
  width: 28px;
  height: 28px;
  background: radial-gradient(circle, rgba(0, 255, 255, 0.6) 0%, rgba(0, 255, 255, 0.2) 50%, transparent 80%);
  border: 1px solid rgba(0, 255, 255, 0.6);
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.8), 0 0 50px rgba(0, 255, 255, 0.4);
}


/* ========================================
   22. BOUTON RETOUR HAUT
======================================== */
#back-to-top {
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: rgba(10, 30, 50, 0.6);
  border: 1px solid rgba(0, 255, 255, 0.4);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
  backdrop-filter: blur(8px);
  color: #00eaff;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0;
  pointer-events: none;
  z-index: 9998;
}

#back-to-top:hover {
  background: rgba(0, 255, 255, 0.1);
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.8);
  transform: scale(1.1);
}

#back-to-top.visible {
  opacity: 1;
  pointer-events: all;
}


/* ========================================
   23. TRANSITION HOLOGRAPHIQUE (fade + halo)
======================================== */
#page-transition {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0, 255, 255, 0.08), rgba(0, 0, 0, 0.95) 80%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
  z-index: 99999;
}

#page-transition::after {
  content: "";
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 255, 255, 0.5) 0%, rgba(0, 150, 255, 0.1) 70%, transparent 100%);
  filter: blur(25px);
  opacity: 0;
  transform: scale(0.6);
  transition: all 0.8s ease;
}

#page-transition.active {
  opacity: 1;
  pointer-events: all;
}

#page-transition.active::after {
  opacity: 1;
  transform: scale(1.4);
  animation: holoPulse 1.5s infinite ease-in-out alternate;
}

@keyframes holoPulse {
  from {
    filter: blur(20px) brightness(1);
    transform: scale(1.1);
  }

  to {
    filter: blur(30px) brightness(1.6);
    transform: scale(1.5);
  }
}


/* ========================================
   24. MODE STELLAIRE (Easter Egg)
======================================== */
/* bouton toggle (dans footer) */
#stellar-toggle {
  position: relative;
  display: inline-block;
  margin: 15px auto 0;
  padding: 8px 14px;
  font-size: 14px;
  color: #fff;
  background: rgba(10, 25, 45, 0.6);
  border: 1px solid rgba(255, 0, 255, 0.35);
  border-radius: 8px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 10px rgba(255, 0, 255, 0.4);
  text-align: center;
  transition: all 0.3s ease;
}

#stellar-toggle:hover {
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.6);
  transform: scale(1.05);
}

footer #stellar-toggle {
  display: block;
}

/* particules */
#stellar-particles {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 1s ease;
}

#stellar-particles span {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 0, 255, 0.55);
  box-shadow: 0 0 12px rgba(255, 0, 255, 0.85);
  opacity: 0.7;
  animation: stellarMove 10s linear infinite;
}

@keyframes stellarMove {
  from {
    transform: translateY(0);
    opacity: 0.9;
  }

  to {
    transform: translateY(-120vh);
    opacity: 0;
  }
}

/* teinte active */
body.stellar-active {
  --lw-cyan: #ff4df0;
  --lw-cyan-bright: #ff80ff;
  --lw-glow: rgba(255, 80, 255, 0.45);
  --lw-shadow-strong: rgba(255, 105, 255, 0.45);
  transition: color 0.6s ease, background 0.6s ease, box-shadow 0.6s ease, text-shadow 0.6s ease;
}

body.stellar-active #stellar-toggle {
  border-color: rgba(255, 150, 255, 0.7);
  box-shadow: 0 0 20px rgba(255, 150, 255, 0.7);
}

/* ========================================
   25. NEWS & ADMIN
======================================== */
#news {
  padding: 60px 20px;
  text-align: center;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
  max-width: 1000px;
  margin: 40px auto 0;
}

.news-card {
  background: #0e2435;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(86, 176, 255, 0.15);
  box-shadow: 0 0 15px rgba(86, 176, 255, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: left;
}

.news-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 25px rgba(86, 176, 255, 0.25);
}

.news-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.news-content {
  padding: 20px;
}

.news-date {
  font-size: 12px;
  color: #56b0ff;
  margin-bottom: 8px;
  display: block;
}

.news-card h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #fff;
}

.news-card p {
  font-size: 14px;
  color: #dce3ec;
  line-height: 1.6;
  text-align: left;
}

.delete-btn {
  background: rgba(255, 50, 50, 0.2);
  color: #ff5050;
  border: 1px solid rgba(255, 50, 50, 0.4);
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 10px;
  font-size: 12px;
}


.auth-form input {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(86, 176, 255, 0.2);
  border-radius: 8px;
  color: #fff;
}

.auth-form button {
  width: 100%;
  margin-top: 10px;
}

.auth-switch {
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 80px;
}

.auth-container {
  width: 100%;
  max-width: 400px;
  perspective: 1000px;
}

.auth-box-page {
  background: rgba(11, 29, 42, 0.8);
  border: 1px solid rgba(86, 176, 255, 0.3);
  border-radius: 16px;
  padding: 40px;
  text-align: center;
  box-shadow: 0 0 30px rgba(86, 176, 255, 0.15);
  backdrop-filter: blur(10px);
  animation: fadeIn 0.5s ease;
}

.auth-box-page h2 {
  color: #56b0ff;
  margin-bottom: 30px;
  font-size: 2em;
}

.input-group {
  position: relative;
  margin-bottom: 20px;
  text-align: left;
}

.input-group input {
  width: 100%;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(86, 176, 255, 0.2);
  border-radius: 8px;
  color: #fff;
  outline: none;
  transition: border-color 0.3s;
}

.input-group input:focus {
  border-color: #56b0ff;
}

.input-group label {
  position: absolute;
  left: 12px;
  top: 12px;
  color: #aaa;
  pointer-events: none;
  transition: all 0.3s ease;
  font-size: 14px;
}

.input-group input:focus+label,
.input-group input:not(:placeholder-shown)+label {
  top: -10px;
  left: 8px;
  font-size: 12px;
  color: #56b0ff;
  background: #0b1d2a;
  padding: 0 4px;
}

.auth-switch {
  margin-top: 20px;
  font-size: 14px;
  color: #ccc;
}

.auth-switch a {
  color: #56b0ff;
  text-decoration: none;
  font-weight: bold;
}

.auth-switch a:hover {
  text-decoration: underline;
}

/* ========================================
   27. PROFILE PAGE
======================================== */
.profile-page {
  padding: 120px 20px 60px;
  max-width: 1100px;
  margin: 0 auto;
}

.profile-container {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
}

@media (max-width: 768px) {
  .profile-container {
    grid-template-columns: 1fr;
  }
}

/* Sidebar */
.profile-sidebar {
  background: rgba(14, 36, 53, 0.6);
  border: 1px solid rgba(86, 176, 255, 0.2);
  border-radius: 16px;
  padding: 30px;
  text-align: center;
  height: fit-content;
  backdrop-filter: blur(10px);
}

.profile-avatar-wrapper {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 20px;
}

#profile-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #56b0ff;
  box-shadow: 0 0 20px rgba(86, 176, 255, 0.3);
}

.edit-avatar-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #56b0ff;
  color: #000;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-weight: bold;
  transition: transform 0.2s;
}

.edit-avatar-btn:hover {
  transform: scale(1.1);
}

.profile-role {
  display: inline-block;
  background: rgba(86, 176, 255, 0.2);
  color: #56b0ff;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  margin: 10px 0;
  border: 1px solid rgba(86, 176, 255, 0.3);
}

.profile-joined {
  font-size: 13px;
  color: #888;
  margin-bottom: 20px;
}

.btn-danger {
  background: rgba(255, 50, 50, 0.15);
  color: #ff5050;
  border: 1px solid rgba(255, 50, 50, 0.3);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  transition: background 0.3s;
}

.btn-danger:hover {
  background: rgba(255, 50, 50, 0.3);
}

/* Content */
.profile-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.profile-section {
  background: rgba(14, 36, 53, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 25px;
}

.profile-section h3 {
  color: #fff;
  margin-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 10px;
}

#profile-bio-input {
  width: 100%;
  height: 100px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #ddd;
  padding: 10px;
  resize: vertical;
  font-family: inherit;
}

#profile-bio-input:disabled {
  background: transparent;
  border: none;
  padding: 0;
  resize: none;
  color: #bbb;
}

.badges-grid {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.badge-item {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: help;
  transition: transform 0.2s;
}

.badge-item:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.1);
}

.badge-item.locked {
  opacity: 0.3;
  filter: grayscale(1);
}