:root {
  --bg:#0f1115;
  --card:#1a1d23;
  --accent:#00b4ff;
  --text:#e5e5e5;
  --border:#2a2d33;
}
*{box-sizing:border-box;}
body{font-family:'Roboto',sans-serif;background:var(--bg);color:var(--text);margin:0;}

header{text-align:center;background:linear-gradient(90deg,#101318,#171b22);border-bottom:2px solid var(--accent);padding:30px 10px;}
header h1{color:var(--accent);margin-bottom:10px;}
header p{color:#ccc;}
.lang-switch{text-align:right;margin:15px;}
.lang-btn{cursor:pointer;border:none;background:var(--accent);color:#fff;font-weight:bold;padding:6px 12px;margin-left:5px;border-radius:5px;transition:0.2s;}
.lang-btn:hover{background:#0090d6;}

header .header-menu {
  margin-top: 15px;
}

header .header-menu a {
  margin: 0 12px;
  color: var(--accent);
  text-decoration: none;
  font-weight: bold;
  transition: 0.2s;
}

header .header-menu a:hover {
  color: var(--text);
}

.header-menu a:target, .header-menu a.active {
  color: var(--text);
  font-weight: bold;
}

html{
scroll-behavior: smooth;
}
nav{
  background:#14171c;
  padding:20px;
  border-bottom:1px solid var(--border);
  text-align:center;
}
nav h2{
  color:var(--accent);
  margin-bottom:15px;
}
#toc-list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 15px;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 1200px;
  text-align: left;
}
#toc-list > li{
  background: var(--card);
  padding: 15px;
  border-radius: 8px;
  border: 1px solid var(--border);
  box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}
#toc-list strong{
  display:block;
  font-size:1.1em;
  margin-bottom:8px;
  color: var(--accent);
  text-align:center;
}
#toc-list ul{list-style:none;padding:0;margin:0;}
#toc-list li ul li{margin:5px 0;}
#toc-list a{color:var(--text);text-decoration:none;transition:0.2s;}
#toc-list a:hover{color:var(--accent);}
#toc-list em {
  font-size:0.85em;
  color:#bbb;
}

section{padding:0 10%;}
h2{color:var(--accent);margin-top:5px;border-bottom:1px solid var(--border);padding-bottom:5px;}
.addon{background:var(--card);padding:20px;border-radius:10px;border:1px solid var(--border);margin:20px 0;box-shadow:0 4px 10px rgba(0,0,0,0.3);transition:0.3s;}
.addon:hover{transform:translateY(-3px);}
.addon h3{margin-top:0;}
.addon ul{padding-left:20px;}

.content{background:var(--card);padding:20px;border-radius:10px;border:1px solid var(--border);margin:20px 0;box-shadow:0 4px 10px rgba(0,0,0,0.3);transition:0.3s;}
.content:hover{transform:translateY(-3px);}
.content h3{margin-top:0;}
.content ul{padding-left:20px;}

/* Blocs de code avec langage (```js, ```lua, etc.) */
pre code[class^="language-"] {
  display: block;
  color: #dcdcdc;
}

/* Code inline (`code`) */
code {
  background-color: #1e1f22;
  color: #c9d1d9;
  font-family: "Consolas", "Courier New", monospace;
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 0.9em;
  border: 1px solid #2f3136;
}

/* === QUOTES (Discord style >) === */
blockquote {
  border-left: 3px solid var(--accent);
  padding: 0 10px;
  margin: 0;
background-color: #2b2d31;
  color: #dcddde;
  font-style: italic;
}

blockquote + blockquote {
  border-top: none;
  margin-top: 0;
}

/* Spoilers Discord (||texte||) */
.spoiler {
  background-color: #202225;
  color: transparent;
  border-radius: 4px;
  transition: color 0.2s ease, background-color 0.2s ease;
  cursor: pointer;
  padding: 0 4px;
}
.spoiler:hover {
  background-color: #5865f2;
  color: #ffffff;
}

blockquote.multi {
  border-left: 3px solid #ccc;
  padding-left: 10px;
  margin-left: 0;
}

.download-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  text-decoration: none;
  color: #0066cc;
  font-weight: 500;
  transition: color 0.2s;
}

.download-link:hover {
  color: #004999;
}

.download-icon {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  filter: invert(25%) sepia(85%) saturate(240%) hue-rotate(180deg);
}

#back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #222;
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  padding: 10px 14px;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  opacity: 0.7;
  transition: opacity 0.3s, transform 0.2s;
  z-index: 1000;
}

#back-to-top:hover {
  opacity: 1;
  transform: translateY(-3px);
}

.top {
    color: #00b4ff; 
}

/* Liens normaux (non visités) */
a {
    color: var(--accent); /* Couleur de base */
    text-decoration: none;
    transition: 0.2s;
}

/* Liens visités */
a:visited {
    color: #ff9900; /* Par exemple, orange pour les liens visités */
}

/* Au survol */
a:hover {
    color: #00ffcc; /* Couleur au hover */
}

@media (max-width: 600px) {
  #back-to-top {
    font-size: 18px;
    padding: 8px 12px;
  }
}

footer{text-align:center;background:#14171c;color:#999;padding:20px;border-top:1px solid var(--border);font-size:0.9em;}
@media(max-width:768px){section{padding:0 5%;}}


main { padding: 1rem; }
.zone { background: #fff; padding: 0.75rem; margin-bottom: 0.75rem; border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.zone h2 { margin-top: 0; }
pre { white-space: pre-wrap; word-break: break-word; }
footer { padding: 0.5rem 1rem; font-size: .85rem; color: #666; }