/* ————————————————————— BASE ————————————————————— */
*, *::before, *::after { box-sizing: border-box; }
body {
  background: radial-gradient(circle at 30% 20%, #102030, #06090f 70%);
  color: #d9faff;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  margin: 0; padding: 30px;
  display: flex; flex-direction: column; align-items: center;
  transition: background 0.5s, color 0.5s;
  position: relative;
  overscroll-behavior: none;
}
body.night {
  background: radial-gradient(circle at 30% 20%, #0a0f1a, #1b0d36, #08122b);
  color: #a0f0ff;
}

/* ————————————————————— PARTICULES HOLOGRAPHIQUES ————————————————————— */
#particleCanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
body:not(.night) #particleCanvas { display: none; }

h1 {
  text-align: center; font-size: clamp(26px, 5vw, 64px);  font-weight: 900; color: #6ff3ff;
  margin-bottom: 8px; letter-spacing: 4px;
  text-shadow: 0 0 12px #3fdcff; animation: glowPulse 3.5s infinite ease-in-out; z-index:1;
}
body.night h1 { text-shadow: 0 0 12px #6ff3ffaa, 0 0 24px #3fdcffaa, 0 0 36px #6ff3ff88; }
@keyframes glowPulse {
  0%, 100% { text-shadow: 0 0 12px #3fdcff; }
  50% { text-shadow: 0 0 24px #8fffff; }
}
p.subtitle { text-align:center; margin-bottom:30px; font-style:italic; color:#8ee5ff; z-index:1; }

/* ————————————————————— BUTTON ————————————————————— */
#toggleOrderBtn, #toggleNightBtn {
  background: linear-gradient(135deg,#4df3ff,#2ec1d0);
  border:none; color:#00151c; padding:14px 38px; font-size:1.15rem;
  font-weight:800; border-radius:40px; cursor:pointer; box-shadow:0 0 18px #4df3ff88;
  transition: transform .2s, filter .2s; margin-bottom:20px; z-index:1;
}
#toggleOrderBtn:hover, #toggleNightBtn:hover { transform: scale(1.05); filter: brightness(1.15); }

/* ————————————————————— TABLE ————————————————————— */
.table-wrapper {
  width:100%; max-width:1100px; background: rgba(20,26,40,0.75); border-radius:20px;
  padding:10px; backdrop-filter:blur(8px); box-shadow:0 0 28px #47e8ff55;
  animation:fadeIn .7s ease; transition: background .5s; z-index:1; position:relative;
}
body.night .table-wrapper { background: rgba(10,15,25,0.85); box-shadow:0 0 28px #3fdcff55; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

table { width:100%; border-collapse:collapse; }
thead th {
  background: rgba(10,15,25,0.85); padding:18px 14px; color:#6ff3ff; letter-spacing:.1em;
  font-size:.95rem; text-transform:uppercase; position:sticky; top:0; z-index:2;
}
tbody tr { position: relative; transition: background .35s, transform .25s, box-shadow .3s, opacity .35s; cursor:pointer; border-left:6px solid transparent; padding-left:16px; }
tbody tr:hover { transform: scale(1.015); }
td { padding:14px 16px; font-size:.95rem; color:inherit; position:relative; }
td.icon { display:flex; align-items:center; gap:8px; font-weight:700; }

/* ————————————————————— ARC NARRATIF ————————————————————— */
.arc-accord     { border-left: 6px solid #4F46E5; }
.arc-Avant-accord     { border-left: 6px solid #8037ed; }
.arc-mira       { border-left: 6px solid #EC4899; }
.arc-elyan      { border-left: 6px solid #10B981; }
.arc-hackers    { border-left: 6px solid #F59E0B; }
.arc-virus      { border-left: 6px solid #EF4444; }
tbody tr:hover.arc-accord  { background:#4F46E522; box-shadow:0 0 18px #4F46E5aa; }
tbody tr:hover.arc-Avant-accord  { background:#4F46E522; box-shadow:0 0 18px #8037ed; }
tbody tr:hover.arc-mira    { background:#EC489922; box-shadow:0 0 18px #EC4899aa; }
tbody tr:hover.arc-elyan   { background:#10B98122; box-shadow:0 0 18px #10B981aa; }
tbody tr:hover.arc-hackers { background:#F59E0B22; box-shadow:0 0 18px #F59E0Baa; }
tbody tr:hover.arc-virus   { background:#EF444422; box-shadow:0 0 18px #EF4444aa; }


/* ————————————————————— MODAL HOLOGRAPHIQUE ————————————————————— */
#imageModal {
  display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:99999;
  background: rgba(10,15,25,0.9); backdrop-filter: blur(6px); justify-content:center; align-items:center;
  animation:fadeIn 0.3s ease forwards;
}
#imageModal img { max-width:80%; max-height:80%; border-radius:16px; box-shadow:0 0 28px #3fdcffaa; animation:modalGlow 2s infinite alternate; }
#imageModal .closeBtn {
  position:absolute; top:20px; right:30px; font-size:2rem; color:#6ff3ff; cursor:pointer;
  text-shadow:0 0 12px #3fdcff; transition: transform .2s;
}
#imageModal .closeBtn:hover { transform:scale(1.2); }
@keyframes modalGlow { 0%{box-shadow:0 0 28px #3fdcffaa;} 100%{box-shadow:0 0 48px #6ff3ffbb;} }

/* Masquer le curseur système partout */
* {
  cursor: none !important;
}

/* Curseur personnalisé animé type gemme */
#customCursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  pointer-events: none;
  background: url('images/sourisEquinoxe2.png') center center no-repeat;
  background-size: contain;
  transform: translate(-50%, -50%) scale(1);
  z-index: 99999;
  animation: pulseCursor 2s infinite ease-in-out;
  transition: width 0.2s, height 0.2s, transform 0.2s;
}

/* Animation pulsation */
@keyframes pulseCursor {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50%  { transform: translate(-50%, -50%) scale(1.15); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* Trail lumineux */
.trail-dot {
  position: fixed;
  width: 6px;
  height: 6px;
  pointer-events: none;
  border-radius: 50%;
  background: #6ff3ff;
  opacity: 0.8;
  transform: translate(-50%, -50%) scale(1);
  animation: pulseTrail 1.5s infinite ease-in-out;
  will-change: transform, opacity;
  z-index: 99998;
  box-shadow: 0 0 12px #6ff3ff88, 0 0 20px #6ff3ff55;
}

@keyframes pulseTrail {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
  50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.5; }
}


/* Scintillement fort sur hover */
@keyframes pulseHover {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50%  { transform: translate(-50%, -50%) scale(1.3); opacity: 1; filter: brightness(1.5); }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; filter: brightness(1.2); }
}

/* Couleurs par arc narratif */
.cursor-arc-accord { filter: drop-shadow(0 0 18px #4F46E5) drop-shadow(0 0 28px #4F46E588); }
.cursor-arc-Avant-accord { filter: drop-shadow(0 0 18px #8037ed) drop-shadow(0 0 28px #8037ed); }
.cursor-arc-mira   { filter: drop-shadow(0 0 18px #EC4899) drop-shadow(0 0 28px #EC489988); }
.cursor-arc-elyan  { filter: drop-shadow(0 0 18px #10B981) drop-shadow(0 0 28px #10B98188); }
.cursor-arc-hackers{ filter: drop-shadow(0 0 18px #F59E0B) drop-shadow(0 0 28px #F59E0B88); }
.cursor-arc-virus  { filter: drop-shadow(0 0 18px #EF4444) drop-shadow(0 0 28px #EF444488); }

.gemParticle {
  position: fixed;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #6ff3ff;
  pointer-events: none;
  opacity: 0.8;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
  z-index: 100000; /* toujours au-dessus */
  box-shadow: 0 0 8px #6ff3ff88, 0 0 12px #6ff3ff55;
}

td a {
  color: #6ff3ff;       /* couleur cyan holographique */
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s, text-shadow 0.3s;
}

td a:hover {
  color: #ffffff;
  text-shadow: 0 0 8px #6ff3ff;
}

/* Colonne personnages : liens cliquables */
.characters a {
  margin-right: 15px;      /* espace entre les noms */
  text-decoration: none;
  color: #6ff3ff;
  transition: color 0.3s, transform 0.2s;
}

.characters a:hover {
  color: #a0f0ff;
  transform: scale(1.1);
  cursor: pointer;
}

/* Pour le mode nuit */
body.night .characters a {
  color: #8ee5ff;
}
body.night .characters a:hover {
  color: #d0f8ff;
}

/* Colonne lieux : liens cliquables */
.locations a {
  text-decoration: none;
  color: #6ff3ff;
  transition: color 0.3s, transform 0.2s;
}

.locations a:hover {
  color: #ffffff;
  transform: scale(1.1);
  cursor: pointer;
}

/* Mode nuit */
body.night .locations a {
  color: #8ee5ff;
}
body.night .locations a:hover {
  color: #d0f8ff;
}

.locations a {
  display: block;      /* Chaque lieu sur sa propre ligne */
  margin-bottom: 8px;  /* Espacement vertical */
  text-decoration: none;
  color: #6ff3ff;
  transition: color 0.3s, transform 0.2s;
}


/* Colonne Lieux : plus large et texte non coupé */
th:last-child {
  width: 260px;        /* tu peux augmenter librement (ex : 300, 350…) */
  min-width: 200px;
}

td.locations {
  white-space: normal;  /* autorise le retour à la ligne */
  line-height: 1.6;     /* espace entre les lieux */
}

/* Lieux : espacés verticalement */
td.locations a {
  display: block;       /* force l'aération : 1 lieu = 1 ligne */
  margin-bottom: 6px;
}
body {
  /* ... ton style existant ... */
  padding-left: calc(30px + 72px); /* espace pour la barre */
}

/* ————————————————————— MUSIC BUTTON */


  #musicBtn {
  background: linear-gradient(135deg, #00ffff, #2ec1d0);
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  cursor: pointer;
  box-shadow: 0 0 10px #00ffff66, 0 0 18px #00ffff33;
  font-size: 1rem;
  color: #00151c;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, box-shadow 0.3s;
  animation: pulseMusicBtn 2s infinite ease-in-out;
  z-index: 1;
}

  #musicBtn:hover {
    transform: scale(1.15);
    box-shadow: 0 0 28px #00ffffcc, 0 0 48px #2ec1d0aa;
  }

  @keyframes pulseMusicBtn {
    0%, 100% { transform: scale(1); box-shadow: 0 0 16px #00ffff88, 0 0 28px #00ffff55; }
    50% { transform: scale(1.1); box-shadow: 0 0 28px #00ffffcc, 0 0 48px #2ec1d0aa; }
  }


/* ————————————————————— BARRE FUTURISTE HOLOGRAPHIQUE ————————————————————— */
.nav-left {
  position: fixed;
  top: 0;
  left: 0;
  width: 80px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px 10px;
  background: linear-gradient(180deg, rgba(10,20,35,0.45), rgba(5,10,20,0.35));
  backdrop-filter: blur(12px) saturate(140%);
  border-right: 1px solid rgba(111,243,255,0.25);
  box-shadow: 0 0 40px rgba(71,232,255,0.35), inset 0 0 20px rgba(111,243,255,0.15);
  z-index: 99990;
}

.nav-item {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  color: #6ff3ff;
  text-decoration: none;
  font-weight: 700;
  background: radial-gradient(circle at 30% 30%, rgba(111,243,255,0.25), rgba(20,30,40,0.35));
  box-shadow: 0 0 18px rgba(111,243,255,0.35), inset 0 0 12px rgba(111,243,255,0.25);
  transition: transform .25s, box-shadow .25s, color .25s;
  position: relative;
}

.nav-item:hover {
  transform: scale(1.2) rotate(8deg);
  color: #fff;
  box-shadow: 0 0 28px rgba(111,243,255,0.55), inset 0 0 18px rgba(111,243,255,0.35);
  cursor: pointer;
}

/* Effet pulsation néon */
.nav-item::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(111,243,255,0.25);
  animation: neonPulse 2.8s infinite ease-in-out;
}
@keyframes neonPulse {
  0%,100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.2); opacity: 1; }
}

/* PIED DE PAGE */
.footer {
  text-align: center;
  padding: 20px 0 6px;
  margin-top: 40px;
  color: #6ff3ff;
  font-size: 0.9rem;
}
.footer-links {
  text-align: center;
  padding: 0 0 80px; /* 80px pour ne pas être caché par la barre nav mobile */
  font-size: 0.8rem;
}
.footer-links a {
  color: rgba(111,243,255,0.55);
  text-decoration: none;
  margin: 0 10px;
  transition: color .18s;
}
.footer-links a:hover {
  color: #6ff3ff;
  text-decoration: underline;
}

/* ————————————————————— Désactiver curseur & effets souris sur mobile ————————————————————— */
@media (max-width: 768px) {
  * {
    cursor: auto !important;
  }

  #customCursor,
  .trail-dot,
  .gemParticle,
  canvas,
  #particleCanvas {
    display: none !important;
  }
}

/* ————————————————————— Sidebar → barre basse mobile ————————————————————— */
@media (max-width: 768px) {
  body {
    padding-left: 16px;
    padding-right: 16px;
  }

  .nav-left {
    flex-direction: row;
    position: fixed;
    bottom: 0;
    top: auto;
    left: 0;
    width: 100%;
    height: 72px;
    justify-content: space-around;
    padding: 8px 0;
    border-right: none;
    border-top: 1px solid rgba(111,243,255,0.25);
    z-index: 99999;
  }

  .nav-item {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
  }
}


/* ————————————————————— Table → cartes verticales cartes empilées————————————————————— */

@media (max-width: 768px) {
  table, thead, tbody, th, tr, td {
    display: block;
    width: 100%;
  }

  thead {
    display: none;
  }

  tbody tr {
    margin-bottom: 20px;
    border-radius: 16px;
    padding: 16px;
    background: rgba(20,26,40,0.85);
    box-shadow: 0 0 18px rgba(71,232,255,0.35);
    transform: none !important;
  }

  td {
    padding: 8px 0;
    font-size: 0.95rem;
  }

  td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6ff3ff;
    margin-bottom: 4px;
    opacity: 0.8;
  }
}

/* ————————————————————— Boutons adaptés au tactile————————————————————— */
@media (max-width: 768px) {
  #toggleOrderBtn,
  #toggleNightBtn {
    width: 100%;
    max-width: 320px;
    padding: 14px;
    font-size: 1rem;
    margin-bottom: 12px;
  }
}


/* ————————————————————— Modale image plein écran mobile————————————————————— */
@media (max-width: 768px) {
  #imageModal img {
    max-width: 92%;
    max-height: 75%;
  }

  #imageModal .closeBtn {
    top: 12px;
    right: 16px;
    font-size: 2.5rem;
  }
}

/* ————————————————————— Musique & sélecteur langue————————————————————— */



/* 🔒 Empêche la nav de recouvrir le footer */
body {
  padding-bottom: 90px; /* hauteur nav + marge */
}

footer,
.footer-equinoxe {
  position: relative;
  z-index: 5;
}


/* Séparateur "/" automatique pour personnages et lieux */
td[data-label="Personnages"] a::after,
td[data-label="Lieux"] a::after {
  content: " /";
  color: rgba(111,243,255,0.6);
}

/* Ne pas afficher le / après le dernier élément */
td[data-label="Personnages"] a:last-child::after,
td[data-label="Lieux"] a:last-child::after {
  content: "";
}


/* Masquer tous les tomes sauf le 1 */
tbody tr[data-lecture]:not([data-lecture="1"]) {          /*pour afficher les autres sans oublier le JS: tbody tr[data-lecture]:not([data-lecture="1"]):not([data-lecture="2"]) { display: none;} */
  display: none;
}


/* Version plus clean visuellement */
#languageSelector {
  background: rgba(10,20,35,0.72);
  border: 1px solid rgba(111,243,255,0.35);
  color: #6ff3ff;
  padding: 4px 8px;
  border-radius: 7px;
  backdrop-filter: blur(6px);
  cursor: pointer;
  font-size: 0.82rem;
  height: 34px;
  min-width: 58px;
  box-shadow: 0 0 10px rgba(111,243,255,0.18);
}

/* media query mobile Musique & sélecteur langue */
@media (max-width: 768px) {
  #musicControlWrapper {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 100001 !important;
    transform: none !important;
  }

  #languageSelectorWrapper {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
    left: 12px !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 100001 !important;
    transform: none !important;
  }

  #musicBtn {
  width: 40px;
  height: 40px;
  font-size: 0.9rem;
}

#languageSelector {
  font-size: 0.78rem;
  height: 25px;
  min-width: 54px;
  padding: 0px 7px;
}
}

#floatingUI {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  z-index: 100000;
  pointer-events: none;
}

#floatingUI * {
  pointer-events: auto;
}

#musicControlWrapper {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  right: 10px;
}

#languageSelectorWrapper {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: 90px;
}