/* =======================================================
   Mystic VirtualPlay — Wiki Docsify Style (v3.3.2)
   Thème complet révisé, sidebar FIX no-limit
   ======================================================= */

@import url('https://fonts.googleapis.com/css2?family=Marcellus+SC&family=Inter:wght@400;500;600&display=swap');

:root {
  --bg0: #030813;
  --bg1: #050b16;
  --glass: #ffffff10;
  --stroke: #89dcff44;
  --accent: #89dcff;
  --text: #e9f3ff;
  --muted: #a8b3c7;
  --glow: rgba(137,220,255,0.35);
  --ease: cubic-bezier(.2,.8,.2,1);
}

/* =======================================================
   ✦ Base du thème Mystic
   ======================================================= */

html, body {
  margin: 0;
  height: 100%;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text);
  background-color: var(--bg0);
  background-image:
    url("https://mystic-virtualplay.fr/dev/images/background8.png"),
    radial-gradient(80% 120% at 50% -10%,
      rgba(10,28,50,0.8) 0%,
      rgba(5,11,22,0.7) 40%,
      rgba(3,8,19,0.9) 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  overflow-x: hidden;
}

/* =======================================================
   ✦ Blobs lumineux
   ======================================================= */

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.3;
  animation: blobMove 25s infinite alternate ease-in-out;
}

body::before {
  width: 600px;
  height: 600px;
  left: 15%;
  top: 25%;
  background: #89dcff22;
}

body::after {
  width: 500px;
  height: 500px;
  right: 10%;
  bottom: 20%;
  background: #1fb6ff22;
}

@keyframes blobMove {
  from { transform: translateY(0px) translateX(0px); }
  to   { transform: translateY(50px) translateX(-30px); }
}

/* =======================================================
   ✦ Structure générale
   ======================================================= */

main {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

/* =======================================================
   ✦ Sidebar Mystic (FIX HEIGHT)
   ======================================================= */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;               /* hauteur plein écran */
  width: 325px;
  min-width: 325px;
  background: rgba(5, 14, 25, 0.8);
  backdrop-filter: blur(16px);
  border-right: 1px solid var(--stroke);
  box-shadow: inset 0 0 30px rgba(137,220,255,.15);
  overflow-y: auto !important;  /* 🔥 FIX — scroll illimité */
  overflow-x: hidden;
  z-index: 1000;
  transition: transform .4s var(--ease), opacity .4s var(--ease);
}

.sidebar.closed {
  transform: translateX(-100%);
  opacity: 0;
}

/* =======================================================
   ✦ Bouton de toggle
   ======================================================= */

.toggle-btn {
  position: fixed;
  top: 20px;
  left: calc(16.5vw + 10px);
  width: 42px;
  height: 42px;
  background: rgba(8,20,35,0.8);
  border: 1px solid rgba(137,220,255,0.4);
  border-radius: 50%;
  color: #aee4ff;
  font-size: 20px;
  cursor: pointer;
  z-index: 1100;
  backdrop-filter: blur(8px);
  box-shadow: 
    0 0 12px rgba(137,220,255,0.25),
    inset 0 0 15px rgba(137,220,255,0.1);
  transition: left .5s var(--ease),
              transform .3s ease,
              box-shadow .3s ease;
}

.sidebar.closed ~ .toggle-btn {
  left: 20px;
}

.toggle-btn:hover {
  box-shadow:
    0 0 20px rgba(137,220,255,0.5),
    inset 0 0 25px rgba(137,220,255,0.3);
  transform: scale(1.1);
  color: #dff9ff;
}

/* =======================================================
   ✦ Zone de contenu
   ======================================================= */

.content {
  flex: 1;
  margin-left: 16.5vw;
  padding: 40px;
  transition: margin-left .4s var(--ease);
}

.sidebar.closed ~ .content {
  margin-left: 0;
}

/* =======================================================
   ✦ Bloc principal (markdown-section)
   ======================================================= */

.markdown-section {
  background: rgba(5, 14, 25, 0.55);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  box-shadow:
    inset 0 0 40px rgba(137,220,255,0.08),
    0 0 25px rgba(137,220,255,0.12);
  padding: 40px 60px;
  margin: 40px;
  color: var(--muted);
  line-height: 1.6;
  border: 1px solid rgba(137,220,255,0.15);
}

.markdown-section h1,
.markdown-section h2,
.markdown-section h3 {
  font-family: 'Marcellus SC', serif;
  color: var(--accent);
  text-shadow: 0 0 12px var(--glow);
}

.markdown-section p {
  font-size: 1.05rem;
  max-width: 900px;
}

/* =======================================================
   ✦ Images générales (hors sidebar & hors galerie)
   ======================================================= */

.markdown-section img {
  max-width: 100%;
  display: block;
  margin: 30px auto;
  border-radius: 16px;
  box-shadow: 0 0 25px rgba(137,220,255,0.25);
}

.markdown-section img.no-style {
  box-shadow: none !important;
  margin: 0 !important;
  border-radius: inherit !important;
}

/* Empêche les styles globaux d’affecter la sidebar ou la galerie */
.sidebar img,
.gallery img {
  box-shadow: none !important;
  margin: 0 !important;
  border-radius: inherit !important;
}

/* =======================================================
   ✦ Navbar Sidebar — Accordéon & Navigation (partie 1)
   ======================================================= */

/* Sous-menus fermés par défaut */
.sidebar-nav ul ul {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s var(--ease), opacity .3s var(--ease);
  opacity: 0;
  margin-left: 10px;
  border-left: 1px solid rgba(137,220,255,0.15);
  padding-left: 10px;
}

/* Sous-menus ouverts */
.sidebar-nav li.open > ul {
  max-height: 1000px;
  opacity: 1;
}

/* Titres cliquables */
.sidebar-nav > ul > li > strong,
.sidebar-nav > ul > li > em {
  cursor: pointer;
  display: block;
  padding: 8px 14px;
  color: #89dcff;
  font-weight: 600;
  border-radius: 8px;
  transition: all .3s var(--ease);
  position: relative;
}

.sidebar-nav > ul > li > strong:hover,
.sidebar-nav > ul > li > em:hover {
  background: rgba(137,220,255,0.08);
  box-shadow: inset 0 0 15px rgba(137,220,255,0.15);
  text-shadow: 0 0 10px rgba(137,220,255,0.6);
}

/* Flèches */
.sidebar-nav > ul > li > strong::after,
.sidebar-nav > ul > li > em::after {
  content: "▸";
  position: absolute;
  right: 10px;
  top: 8px;
  font-size: .9rem;
  opacity: .6;
  transition: transform .3s ease, opacity .3s ease;
}

.sidebar-nav li.open > strong::after,
.sidebar-nav li.open > em::after {
  transform: rotate(90deg);
  opacity: 1;
  color: #dff9ff;
}

/* Liens */
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  margin: 3px 0;
  border-radius: 6px;
  color: #a6c9ff;
  font-weight: 500;
  text-decoration: none;
  transition: all .3s ease;
}

.sidebar-nav a:hover {
  background: rgba(70, 100, 200, 0.25);
  color: #e8f1ff;
  text-shadow: 0 0 8px #8fc9ff;
  box-shadow: inset 0 0 10px rgba(120,160,255,0.3);
}

/* =======================================================
   ✦ FIX — Images dans la sidebar (têtes Minecraft)
   ======================================================= */

/* Empêche les styles globaux d’affecter les avatars du menu */
.sidebar img {
  max-width: none !important;
  max-height: none !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  margin: 0 !important;
  display: inline-block !important;
  object-fit: contain !important;
}

.sidebar-nav a img {
  vertical-align: middle;
}

/* =======================================================
   ✦ Ouverture TOTALE des menus (Wiki)
   ======================================================= */

/* IMPORTANT :
   • On n’utilise plus max-height:1000px (trop petit)
   • On enlève TOUTE limite → les sous-menus s’adaptent à leur contenu
*/

.sidebar-nav ul ul {
  max-height: none !important;   /* ← AUCUNE LIMITE */
  opacity: 1 !important;         /* ← Toujours visible */
  overflow: visible !important;  /* ← Affiche tout (aucun cut) */
  padding-top: 0 !important;
}

/* Le UL interne doit avoir sa hauteur naturelle */
.sidebar-nav li > ul {
  display: block !important;
  height: auto !important;
}

/* On corrige la marge pour que la liste soit bien lisible */
.sidebar-nav ul ul li {
  margin: 2px 0;
}

/* =======================================================
   ✦ Galerie — Album Mystic (isolation totale)
   ======================================================= */

.gallery {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 15px !important;
  padding: 20px 0 !important;
}

.gallery a {
  display: block !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  aspect-ratio: 1 / 1 !important;
  position: relative !important;
}

.gallery img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 12px !important;
  margin: 0 !important;
  max-width: none !important;
}

@media (hover:hover) {
  .gallery a:hover img {
    transform: scale(1.08) !important;
    filter: brightness(1.15) !important;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

/* Large écrans */
@media (min-width: 1600px) {
  .gallery {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 18px;
  }
}

@media (min-width: 2000px) {
  .gallery {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 22px;
  }
}

/* Lightbox */
.lb-data .lb-caption {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #e9f3ff !important;
}

.lb-image {
  border-radius: 12px !important;
}

/* =======================================================
   ✦ HR Cristal Magique
   ======================================================= */

.markdown-section hr,
.sidebar hr,
.content hr,
hr {
  border: none !important;
  height: 3px !important;
  width: 80% !important;
  margin: 35px auto !important;
  background: linear-gradient(90deg, transparent, #89dcff, transparent) !important;
  box-shadow: 0 0 15px #89dcff88, 0 0 25px #89dcff55;
  border-radius: 4px;
  opacity: 0.9;
  animation: hrGlow 5s ease-in-out infinite;
}

@keyframes hrGlow {
  0%   { box-shadow: 0 0 8px #89dcff66, 0 0 18px #89dcff33; opacity: .7; }
  50%  { box-shadow: 0 0 20px #89dcffcc, 0 0 40px #89dcffaa; opacity: 1; }
  100% { box-shadow: 0 0 8px #89dcff66, 0 0 18px #89dcff33; opacity: .7; }
}

/* =======================================================
   ✦ Scrollbar Mystique
   ======================================================= */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(3, 8, 19, 0.6);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #89dcff55, #1fb6ff55);
  border-radius: 10px;
  box-shadow: 0 0 6px #89dcff66;
  transition: all .3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #89dcff, #1fb6ff);
  box-shadow: 0 0 10px #89dcffcc;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* =======================================================
   ✦ Images globales (hors sidebar + hors galerie)
   ======================================================= */

.markdown-section img {
  max-width: 100%;
  display: block;
  margin: 30px auto;
  border-radius: 16px;
  box-shadow: 0 0 25px rgba(137,220,255,0.25);
}

/* Pas de style sur sidebar / galerie / exceptions */
.markdown-section img.no-style,
.sidebar img,
.gallery img {
  box-shadow: none !important;
  margin: 0 !important;
  border-radius: inherit !important;
}

/* =======================================================
   ✦ Cards larges
   ======================================================= */

.card {
  max-width: 1500px;
  width: 100%;
  margin: 0 auto;
}

@media (max-width: 1500px) {
  .card {
    max-width: 100%;
    grid-column: 1 / -1;
    margin-left: auto;
    margin-right: auto;
  }
}

/* =======================================================
   ✦ Typographies globales
   ======================================================= */

h1, h2, h3, h4 {
  font-family: 'Marcellus SC', serif !important;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .03em;
}

em, ol {
  font-family: 'Marcellus SC', serif !important;
  font-size: 16px;
  line-height: 1.75;
  color: #e8f1ff;
}

.pagination-mystic {
  margin: 40px auto 20px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.pagination-mystic a {
  padding: 10px 18px;
  border-radius: 10px;
  background: rgba(137,220,255,0.08);
  color: #aee6ff;
  font-weight: 600;
  text-decoration: none;
  box-shadow: inset 0 0 10px rgba(137,220,255,0.25);
  transition: 0.3s ease;
  border: 1px solid rgba(137,220,255,0.25);
}

.pagination-mystic a:hover {
  background: rgba(137,220,255,0.18);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(137,220,255,0.5),
              inset 0 0 12px rgba(137,220,255,0.35);
}

.pagination-mystic a.active {
  background: rgba(137,220,255,0.3);
  border-color: rgba(137,220,255,0.5);
  color: white;
  box-shadow: 0 0 15px rgba(137,220,255,0.7),
              inset 0 0 15px rgba(137,220,255,0.5);
  cursor: default;
}

/* === Modal image Mystic === */
#mystic-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999999;
}

#mystic-modal img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 10px;
  box-shadow: 0 0 25px #89dcff;
}

/* Bouton fermer */
#mystic-modal-close {
  position: absolute;
  top: 25px;
  right: 25px;
  width: 45px;
  height: 45px;
  background: rgba(255,255,255,0.15);
  border: 2px solid #89dcff;
  border-radius: 50%;
  cursor: pointer;
  font-size: 26px;
  color: #89dcff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 15px #89dcffaa;
  transition: 0.2s;
}

#mystic-modal-close:hover {
  background: rgba(255,255,255,0.3);
  transform: scale(1.1);
}


/* --- RESPONSIVE MOBILE FIX --- */

@media (max-width: 800px) {

  /* Sidebar : cachée par défaut */
  .sidebar {
    width: 240px !important;
    min-width: 240px !important;
    transform: translateX(-100%);
    opacity: 0;
  }

  .sidebar.open {
    transform: translateX(0);
    opacity: 1;
  }

  /* Bouton menu */
  .toggle-btn {
    left: 15px !important;
    top: 15px;
    z-index: 2000;
  }

  /* Le contenu utilise toute la largeur */
  .content {
    margin-left: 0 !important;
    padding: 20px !important;
  }

  .markdown-section {
    padding: 25px !important;
    margin: 20px 0 !important;
  }

  /* Galerie mobile : 2 colonnes */
  .gallery {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .gallery a {
    aspect-ratio: 1 / 1 !important;
  }
}

/* Très petits écrans */
@media (max-width: 620px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
}
@media (max-width: 1000px) {

  /* Le layout doit devenir vertical */
  main {
    flex-direction: column !important;
  }

  /* Sécurité : pas de largeur imposée */
  .markdown-section {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Enlève toute marge latérale large */
  .markdown-section,
  .content {
    margin: 0 !important;
  }
}