/* Style global */
/* Use a free alternative similar to DraftBot: Poppins from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: 'Poppins', Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #f5f5f5;
  color: #333;
}

/* Ensure main/content areas grow so footer stays at the bottom */
main, .container, .docs-container, main.docs-container {
  flex: 1 0 auto;
}

nav {
  background: #222;
  padding: 15px;
  text-align: center;
}

nav a {
  color: white;
  margin: 0 15px;
  text-decoration: none;
  font-weight: bold;
}

nav a:hover {
  color: #aaa;
}

h1 {
  color: #ffffff;
}

h2 {
  color: #333;
}

/* Container principal de la doc */
.docs-container {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  padding: 45px;
}

/* Sidebar à gauche */
.docs-sidebar {
  flex: 1;
  /* Make sidebar an internal scroll area instead of sticky on the page
     so it scrolls independently of the right content. */
  position: relative;
  background: #f9f9f9;
  padding: 20px;
  border-right: 1px solid #ddd;
  height: 100%;
  overflow: auto;
}

.docs-sidebar h2 {
  font-size: 18px;
  margin-bottom: 10px;
}

.docs-sidebar input {
  width: 100%;
  padding: 8px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.docs-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  /* provide bottom padding so the last item isn't flush against the container
     when the sidebar is scrolled to the bottom */
  padding-bottom: 20px;
  padding-top: 30px;
}

.docs-sidebar li {
  margin: 8px 0;
}

.docs-sidebar a {
  text-decoration: none;
  color: #333;
}

/* Contenu principal */
.docs-content {
  flex: 3;
  padding-left: 30px;
  /* make content area scroll independently */
  height: 100%;
  overflow: auto;
}

.module-section {
  margin-bottom: 54px;
  background: #f3f6fd;
  border-radius: 12px;
  box-shadow: 0 1px 8px rgba(35,41,70,0.06);
  padding: 24px 28px 18px 28px;
  border: 1.5px solid #e0e7ff;
}

.module-section h2 {
  border-bottom: 2px solid #eebbc3;
  padding-bottom: 7px;
  margin-bottom: 12px;
  font-size: 1.3em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.module-section code {
  background: #e0e7ff;
  color: #232946;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 1em;
}

/* Example screenshot blocks (docs) */
.example-screen summary {
  cursor: pointer; /* show hand like sidebar links */
  font-weight: 600;
  color: #232946;
}
.example-screen summary:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(238,187,195,0.12);
}
.example-screen .example-img img {
  border-radius: 12px; /* rounded corners */
  box-shadow: 0 8px 24px rgba(35,41,70,0.06); /* subtle shadow */
  transition: transform 160ms ease, box-shadow 160ms ease;
  display: block;
}
.example-screen .example-img img:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(35,41,70,0.10);
}

/* Pour les autres pages (index, terms, privacy) */
.container {
  margin: 40px auto;
  padding: 20px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* Spécial: page patchnotes — rendre le container plus large (approx. 2x) */
.patch-page .container {
  min-width: 50%;
  max-width: 1400px; /* wider than default */
  margin: 40px auto;
  padding: 28px 32px;
}

/* Patchnotes specific styles */
.patch-list { display: flex; flex-direction: column; gap: 14px; }
.patch-card {
  background: linear-gradient(180deg, #ffffff 0%, #fbfbff 100%);
  border: 1px solid rgba(35,41,70,0.06);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(35,41,70,0.06);
  overflow: hidden;
}
.patch-card .patch-toggle {
  display: flex;
  gap: 12px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  background: linear-gradient(90deg, rgba(238,187,195,0.04), rgba(224,231,255,0.02));
  border: none;
  cursor: pointer;
  text-align: left;
}
.patch-card .patch-toggle:focus { outline: none; box-shadow: 0 0 0 4px rgba(238,187,195,0.12); }
.patch-meta { display:flex; gap:12px; align-items:baseline; }
.patch-version { background: #232946; color: #fff; padding:6px 10px; border-radius:8px; font-weight:700; font-size:0.95em; }
.patch-version-wow { background: #167bbe; color: #fff; padding:6px 10px; border-radius:8px; font-weight:700; font-size:0.95em; }
.patch-title { font-size:1.05em; font-weight:700; color:#232946; }
.patch-date { color:#7b84a9; font-size:0.95em; margin-left:10px; }
.patch-summary { color:#5b647d; margin-left: 12px; flex:1; }
.chevron { margin-left: 12px; color:#7b84a9; font-size:1.2em; transition: transform 220ms ease; }
.patch-body { padding: 18px 22px 22px 22px; border-top: 1px solid rgba(35,41,70,0.03); animation: fadeIn 240ms ease; }
.patch-body[hidden] { display: none; }
.patch-card.open .chevron { transform: rotate(180deg); }

@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }


/* Header modernisé */
.docs-header {
  position: relative;
  background: #232946;
  color: #fff;
  padding: 0 0 10px 0;
  box-shadow: 0 2px 8px rgba(35,41,70,0.08);
}

/* Guild panel layout: full-height sidebar (10%) and main config area (90%) */
.guild-layout {
  display: flex;
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* subtract header height (approx). If header/footer differ adjust accordingly. */
  min-height: calc(100vh - 120px);
}

/* Server row (list of manageable servers) displayed between header and guild layout */
.server-row {
  display: flex;
  gap: 16px;
  padding: 12px 20px;
  align-items: center;
  justify-content: center; /* center the server pills */
  overflow-x: auto;
  overflow-y: visible; /* allow tooltip to overflow vertically */
  position: relative; /* create stacking context for tooltip */
  z-index: 1200; /* keep server-row above config panels */
  background: #2f375a;
  border-bottom: 1px solid rgba(35,41,70,0.06);
  min-height: 100px; /* ensure at least 100px tall */
  box-shadow: 0 2px 6px rgba(35,41,70,0.03) inset;
}

/* Dashboard version badge (bottom-right) */
.dashboard-version {
  position: fixed;
  right: 16px;
  bottom: 16px;
  background: rgba(35,41,70,0.92);
  color: #ffffff;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(35,41,70,0.18);
  z-index: 99999;
  opacity: 0.98;
  pointer-events: none;
}

/* Guild title server name style */
.guild-title-name {
  color: #167bbe; /* blue */
  font-weight: 700;
  margin-left: 6px;
}
.server-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px; /* larger pill to make icons take more space */
  height: 84px;
  padding: 0;
  background: #232946;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 8px 24px rgba(35,41,70,0.06);
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.server-pill:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(35,41,70,0.10); }
.server-icon { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: block; }
.server-fallback { width: 72px; height: 72px; border-radius: 50%; background: #eef; display: flex; align-items: center; justify-content: center; color: #333; font-weight: 700; font-size: 1.05rem }
.server-name { display:none !important; }

/* explanatory text when no guild selected */
.empty-panel-explainer { padding: 20px; max-width: 820px; margin: 8px auto; color: #2d3340; }
.empty-panel-explainer h2 { margin: 0 0 8px 0; font-size: 1.25rem; }
.empty-panel-explainer p { margin: 6px 0; color: #4b5563; line-height: 1.45; }

/* Active/current server visual: stronger shadow below + subtle halo */
.server-pill.active {
  transform: translateY(-6px);
  box-shadow: 0 18px 48px rgba(35,41,70,0.16), 0 6px 18px rgba(120,92,200,0.08) inset;
}
.server-pill.active::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -8px;
  width: 56px;
  height: 8px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.18), rgba(0,0,0,0.2));
  border-radius: 50%;
  z-index: 5;
}

/* Tooltip removed: hover name display intentionally disabled */

#cfg-categories ul { list-style: none; margin: 0; padding: 0; }
#cfg-categories li { margin: 6px 0; }
#cfg-categories .cat-item { width: 100%; box-sizing: border-box; text-align: left; }

main.container {
  flex: 1 1 auto;
  width: calc(100% - 10%);
  margin: 0;
  padding: 24px;
  border-radius: 0;
}

/* Ensure config rows have no outer spacing that creates gaps */
.config-row { margin-bottom: 10px; }
.category-panel { margin-bottom: 12px; }


/* Hamburger button (mobile) — positionné DANS le header, non superposé au titre si top/left ajustés */
.hamburger {
  display: none;
  position: absolute;
  left: 12px;
  top: 14px;
  width: 44px;
  height: 44px;
  border: none;
  background: rgba(255,255,255,0.06);
  color: #fff;
  cursor: pointer;
  z-index: 60;
  /* make bars stack vertically so the hamburger shows 3 lines */
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 8px;
}
.hamburger:focus { outline: none; box-shadow: 0 0 0 3px rgba(238,187,195,0.12); }
.hamburger .bar {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  /* remove vertical margins (we use gap on the parent) and round edges */
  margin: 0;
  border-radius: 2px;
  transition: transform 0.18s ease, opacity 0.12s ease;
}

/* SUPPORT button (top-right) */
.support-btn {
  position: absolute;
  right: 12px;
  top: 14px;
  z-index: 65;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #2e6da9;
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1.3rem;
  transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}
.support-btn:focus { outline: none; box-shadow: 0 0 0 4px rgba(120,92,200,0.12); }

@media (max-width: 900px) {
  /* on small screens keep it visible but slightly smaller and move a bit left to avoid overlap with nav toggle */
  .support-btn { padding: 7px 10px; font-size: 1.1rem; right: 12px; }
}

/* Animate hamburger when open */
.hamburger.open .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.open .bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Navigation links wrapper (default desktop behavior) */
.docs-header nav .nav-links {
  display: flex;
  gap: 0px;
  align-items: center;
  /* position logout in the top-right corner */
  position: absolute;
  right: 18px;
  top: 18px;
}

/* MOBILE: hide links by default, show only when nav has .open */
@media (max-width: 900px) {
  .hamburger { display: flex; }
  .lang-switcher { right: 16px; top: 12px; }
  .docs-header nav .nav-links { display: none; }

  .docs-header nav.open .nav-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    background: linear-gradient(180deg, rgba(35,41,70,0.98), rgba(35,41,70,0.96));
    position: absolute;
    left: 0;
    right: 0;
    top: 64px; /* drop-down under header */
    padding: 12px 16px 18px 16px;
    z-index: 55;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
  }
  .docs-header nav.open .nav-links a {
    padding: 10px 12px;
    background: transparent;
    color: #fff;
    border-radius: 8px;
    text-align: left;
  }
  .docs-header nav.open .nav-links a:hover {
    background: rgba(255,255,255,0.06);
  }
}

/* Homepage: use banner as full-page background (header + main) but keep footer distinct */
.home-page {
  background: url('banniere.avif') center/cover no-repeat fixed;
}
.home-page .docs-header {
  background: transparent; /* header sits on top of banner */
  box-shadow: none;
}

/* Hero area on homepage */
.home-hero {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1px 1px; /* ensure some spacing above footer */
  color: #fff;
}
.logo-large {
  /* make homepage logo very large and responsive */
  width: 20%;
  height: auto;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
  max-width: 95%;
}
.home-tagline {
  margin-top: 22px;
  font-size: 1.8rem;
  color: #fff;
  text-shadow: 0 6px 20px rgba(35,41,70,0.6);
}
.btn-cta {
  display: inline-block;
  margin-top: 18px;
  background: linear-gradient(90deg, #5865F2 0%, #7B61FF 100%);
  color: #fff;
  padding: 30px 60px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(91,74,255,0.18);
  transition: transform 160ms ease, box-shadow 160ms ease;
  font-size: 1.8em;
}
.btn-cta:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(91,74,255,0.22); }

@media (max-width: 900px) {
  .btn-cta { padding: 12px 18px; font-size: 0.95rem; }
}
.btn-cta2 {
  display: inline-block;
  margin: 0 12px;
  color: #232946; /* black text on white background */
  background: #ffffff; /* white background */
  border: none; /* remove any black border */
  box-shadow: none;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 1.08em;
  transition: background 0.15s ease, color 0.15s ease, transform 120ms ease;
  cursor: pointer; /* show hand on hover */
}
.btn-cta2:hover, .btn-cta2:focus {
  background: #eebbc3; /* match nav-links hover */
  color: #232946;
  transform: translateY(-2px);
}

/* Categories sidebar tweaks */
#cfg-categories h3 { font-size: 1.12rem; margin-bottom: 12px; text-align: center; font-weight:700; }
/* Categories sidebar tweaks — consolidated and unified with main container */
#cfg-categories {
  padding: 20px;
  min-width: 160px;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.98));
  border-right: 1px solid rgba(0,0,0,0.04);
}
#cfg-categories .premium-warning {
  background: #fff7ed;
  color: #663c00;
  border: 1px solid #ffe8c2;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 10px;
}
#cfg-categories h3 { font-size: 1.12rem; margin: 0 0 12px 0; text-align: center; font-weight:700; }
#cfg-categories .cat-item {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-size: 1.04rem;
  padding: 10px 12px;
  text-align: left;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.06);
  background: transparent;
  cursor: pointer;
  transition: background 180ms ease, transform 120ms ease, box-shadow 120ms ease;
}
/* Hover / focus style — match the right-side save button behavior */
#cfg-categories .cat-item:hover, #cfg-categories .cat-item:focus {
  background: #eebbc3;
  color: #232946;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(238,187,195,0.12);
  font-weight:700;
}
#cfg-categories .cat-item.premium-locked {
  opacity: 0.48;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
#cfg-categories .cat-item.premium-locked .cat-lock { margin-left: 6px; }

/* Prevent hover/focus animations for locked premium category */
#cfg-categories .cat-item.premium-locked:hover,
#cfg-categories .cat-item.premium-locked:focus {
  background: transparent !important;
  color: inherit !important;
  transform: none !important;
  box-shadow: none !important;
  font-weight: 400 !important;
}
#cfg-categories .cat-item:active { transform: translateY(0); }
/* match btn-cta2 hover style */
#cfg-categories .cat-item:hover, #cfg-categories .cat-item:focus { background: #eebbc3; color: #232946; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(238,187,195,0.12); font-weight:700; }

/* Autocomplete dropdown */
.autocomplete-menu { font-size: 0.95rem; }
.autocomplete-menu div { padding: 6px 8px; border-bottom: 1px solid #f0f0f0; }
.autocomplete-menu div:hover { background: #f2f6ff; }

/* Role color badge in dropdown */
.role-color { display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:8px;vertical-align:middle;border:1px solid rgba(0,0,0,0.06); }
/* Channel icon in dropdown (hash / speaker) */
.channel-icon { display:inline-block; width:20px; text-align:center; font-weight:700; vertical-align:middle; margin-right:6px; }

/* Toast notifications */
.toast-container { position: fixed; right: 20px; /* raised so it's above the dashboard version badge */ bottom: 72px; z-index: 100000; display: flex; flex-direction: column; gap: 8px; }
.toast { background: #232946; color: #fff; padding: 10px 14px; border-radius: 8px; box-shadow: 0 6px 18px rgba(35,41,70,0.12); opacity: 0; transform: translateY(10px); transition: opacity 220ms ease, transform 220ms ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { background: #2f9e44; }
.toast.error { background: #d9534f; }

/* Premium: global presentation panel shown under the premium grid */
.bfy-global-panel {
  width: 80%;
  max-width: 1200px;
  margin: 18px auto 0 auto; /* centered under the white grid */
  background: transparent; /* transparent to show the surrounding white grid */
  display: none;
  padding: 12px 0 28px 0;
  /* min-height: calc(100vh - 80px); */
}

/* Dashboard-specific additions (extracted from templates) */
.logo-fallback{display:inline-block;width:40px;height:40px;background:transparent;color:#fff;border-radius:6px;padding:6px;font-weight:700;vertical-align:middle}
.bfy-global-panel-list{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:18px}
.bfy-item{display:flex;align-items:center;gap:12px;margin:12px 0;max-width:720px;width:100%}
.guild-icon{width:56px;height:56px;border-radius:12px;background:#fff;border:1px solid #eee;display:inline-block;overflow:hidden;flex-shrink:0}
.guild-icon img{width:100%;height:100%;object-fit:cover;display:block}
.guild-placeholder{width:56px;height:56px;border-radius:12px;background:#f4f6fb;border:1px solid #e6e9f8;display:flex;align-items:center;justify-content:center;color:#666;font-weight:700}

/* Page background banner matching main site */
body { background-image: url('/public/banniere.avif'); background-size: cover; background-position: center top; background-repeat: no-repeat; }

/* Add a subtle overlay on content area so text remains readable */
.main.docs-container { background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.98)); padding: 28px; margin-top: 24px; border-radius: 12px; box-shadow: 0 6px 24px rgba(20,20,40,0.06); }
#cfg-categories {
  flex: 0 0 15%;
  width: 10%;
  min-width: 160px;
  height: 100%;
  margin: 0;
  padding: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.98));
  border-right: 1px solid rgba(0,0,0,0.04);
  border-radius: 0;
  box-shadow: none;
}

/* Guild card meta */
.guild-meta { flex: 1; }
.guild-name { font-weight: 700; }

/* Page container for single-guild panel */
.container { 
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.98)); 
  padding: 24px;
  margin-top: 28px; 
  border-radius: 12px; 
  box-shadow: 0 6px 24px rgba(20,20,40,0.06); 
}

/* Form layout helpers used in guild panel */
.config-row { display:flex; gap:8px; align-items:center; margin-bottom:10px; }
.config-label { min-width:260px; margin:0; }
.config-input {
  flex: 1 1 340px;
  min-width: 340px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #dcdff5;
  font-size: 0.98rem;
  box-sizing: border-box;
  height: 40px;
  line-height: 1.2;
  appearance: none;
}

/* Multi-role token autocomplete wrapper */
.multi-role-wrapper {
  align-items: center;
  min-height: 40px;
  padding: 6px 8px;
  gap: 6px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #dcdff5;
  box-sizing: border-box;
}

/* Stronger selector to ensure any input/select/textarea inside a config row
   uses the same visual style even if created dynamically or missing class. */
.config-row .config-input, .config-row input, .config-row select, .config-row textarea {
  flex: 1 1 340px;
  min-width: 340px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #dcdff5;
  font-size: 0.98rem;
  box-sizing: border-box;
  height: 40px;
  line-height: 1.2;
  appearance: none;
}
.toggle-wrapper { display:flex; align-items:center; }
.toggle-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:999px;
  padding:8px 12px;
  border:1px solid #dcdff5;
  background:#fff;
  color:#232946;
  cursor:pointer;
  font-weight:700;
}
.toggle-btn[aria-pressed="true"] { background:#16a34a; color:#fff; border-color:transparent; }
.toggle-btn:disabled { opacity:0.6; cursor:not-allowed; }
/* sanction toggle specific style left minimal — default colors set inline in JS */
.sanction-toggle { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:999px; padding:8px 14px; border:1px solid #dcdff5; color:#fff; font-weight:700; cursor:pointer; }
.sanction-toggle:disabled { opacity:0.6; cursor:not-allowed; }
.multi-role-wrapper .role-token { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 999px; background:#eef; font-size:0.95rem; }
.multi-role-wrapper .role-token button { background:transparent;border:none;cursor:pointer;padding:0 4px;color:#444 }
.multi-role-placeholder { min-width: 340px; }
.bfy-global-panel .bfy-slide img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 36px rgba(35,41,70,0.08);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.bfy-global-panel .bfy-slide img:hover { transform: translateY(-4px); box-shadow: 0 18px 48px rgba(35,41,70,0.12); }


@media (max-width: 900px) {
  .btn-cta2 { padding: 8px 10px; font-size: 0.95rem; margin: 0 6px; }
}
.logo-title {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 0 10px 0;
  justify-content: center;
}
.logo-titre {
  width: 48px;
  height: 48px;
  /* display logo as-is in header */
  border-radius: 0;
  box-shadow: none;
}
.docs-header nav {
  background: transparent;
  text-align: center;
  padding: 0 0 10px 0;
}
.docs-header nav a {
  color: #fff;
  margin: 0 12px;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.08em;
  padding: 6px 12px;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
}
.docs-header nav a.active, .docs-header nav a:hover {
  background: #eebbc3;
  color: #232946;
}

/* Lang switcher (FR/EN) */
.lang-switcher {
  position: absolute;
  right: 18px;
  top: 18px;
  display: flex;
  gap: 8px;
}
.lang-switcher button {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.95em;
  transition: background 0.18s, color 0.18s, transform 0.08s;
}
.lang-switcher button:hover { transform: translateY(-1px); }
.lang-switcher button.active,
.lang-switcher button:hover {
  background: #eebbc3;
  color: #232946;
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(238,187,195,0.12);
}
.lang-switcher button:focus { outline: none; box-shadow: 0 0 0 3px rgba(238,187,195,0.14); }

.docs-header nav {
  background: transparent;
  text-align: center;
  padding: 0 0 10px 0;
}

/* Main docs container: set a viewport-based height so both columns can scroll internally.
   The 200px subtracted below is a reasonable default to keep header/footer visible; adjust
   if your header/footer sizes differ significantly. */
main.docs-container {
  display: flex;
  max-width: 1200px;
  margin: 30px auto 0 auto;
  padding-top: 20px;
  padding-left: 20px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 32px rgba(35,41,70,0.10);
  gap: 32px;
  height: calc(100vh - 20px);
  overflow: hidden; /* prevent page scroll inside this box; internal panes will scroll */
}

.docs-sidebar {
  flex: 1;
  /* internal scrolling instead of sticky page position */
  position: relative;
  background: #f3f6fd;
  padding: 10px 20px 10px 20px;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(35,41,70,0.06);
  height: 100%;
  overflow: auto;
  min-width: 220px;
  border: 1.5px solid #e0e7ff;
}

/* Add a non-interactive spacer at the end of the scrollable sidebar so
   the last menu item is not hidden behind the scrollbar or rounded corner
   when scrolled to the bottom. This lives inside the scrollable area. */
.docs-sidebar::after {
  content: "";
  display: block;
  width: 1px; /* minimal width, only height matters */
  pointer-events: none;
}
.docs-sidebar h2 {
  font-size: 20px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.docs-sidebar input {
  width: 100%;
  box-sizing: border-box; /* ensures padding/border are included in width */
  display: block;
  padding: 10px 12px;
  margin: 0 0 18px 0; /* keep top=0, bottom=18px, aligned with container padding */
  border: 1.5px solid #b8c1ec;
  border-radius: 7px;
  font-size: 1em;
  background: #fff;
  transition: border 0.2s;
}
.docs-sidebar input:focus {
  border: 1.5px solid #eebbc3;
  outline: none;
}
.docs-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  /* ensure there's space after the last item even when scrolled to bottom */
  min-height: 100vh;
}
.docs-sidebar li {
  margin: 12px 0;
}
.docs-sidebar a {
  text-decoration: none;
  color: #232946;
  font-size: 1.07em;
  padding: 7px 10px;
  border-radius: 6px;
  display: block;
  transition: background 0.18s, color 0.18s;
}
.docs-sidebar a:hover {
  background: #eebbc3;
  color: #232946;
  font-weight: 600;
}

/* Responsive */
@media (max-width: 900px) {
  main.docs-container {
    flex-direction: column;
    padding: 18px 4vw 30px 4vw;
    gap: 18px;
  }
  .docs-sidebar {
    min-width: unset;
    margin-right: 1%;
    margin-bottom: 18px;
    position: static;
  }
  .docs-content {
    padding-left: 0;
  }

}

/* Status page styles */
.status-card {
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
  padding: 18px 22px;
  border-radius: 12px;
  border: 1px solid #e6eefc;
  box-shadow: 0 6px 20px rgba(35,41,70,0.06);
  max-width: 720px;
  margin-top: 14px;
}
.status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.status-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.status-indicator {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #d1d5db;
  box-shadow: 0 1px 4px rgba(35,41,70,0.08);
}
.status-online { background: #34d399; box-shadow: 0 4px 14px rgba(52,211,153,0.14); }
.status-offline { background: #ef4444; box-shadow: 0 4px 14px rgba(239,68,68,0.14); }
.status-restarting { background: #f59e0b; box-shadow: 0 4px 14px rgba(245,158,11,0.14); }
.status-unknown { background: #9ca3af; box-shadow: 0 4px 14px rgba(156,163,175,0.14); }

/* Footer styles */
.site-footer {
  background: linear-gradient(180deg, #232946 0%, #1b2033 100%);
  color: #e6eefc;
  padding: 36px 20px;
  margin-top: 40px;
}
.site-footer .footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 28px;
  align-items: flex-start;
}
.footer-brand {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.footer-brand img {
  width: 140px;
  height: auto;
  border-radius: 12px;
  padding: 8px;
}
.footer-brand p {
  margin: 0;
  color: #cbd6ff;
  font-size: 0.95em;
}
.footer-lists {
  display: flex;
  gap: 40px;
  flex: 1 1 auto;
}
.footer-column h4 {
  margin: 0 0 10px 0;
  color: #fff;
}
.footer-column ul { list-style: none; padding: 0; margin: 0; }
.footer-column li { margin: 8px 0; }
.footer-column a { color: #cbd6ff; text-decoration: none; }
.footer-column a:hover { color: #fff; }
.footer-bottom { text-align: center; color: #98a0d8; font-size: 0.9em; margin-top: 18px; }

@media (max-width: 900px) {
  .site-footer .footer-inner { flex-direction: column; align-items: center; text-align: center; }
  .footer-brand { align-items: center; }
  .footer-lists { flex-direction: column; gap: 18px; }
  .footer-lists .footer-column { width: 100%; }
}
.status-restarting { background: #f59e0b; box-shadow: 0 4px 14px rgba(245,158,11,0.14); }
.status-unknown { background: #9ca3af; box-shadow: 0 4px 14px rgba(156,163,175,0.14); }

/* Footer styles */
.site-footer {
  background: linear-gradient(180deg, #232946 0%, #1b2033 100%);
  color: #e6eefc;
  padding: 36px 20px;
  margin-top: 40px;
}
.site-footer .footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 28px;
  align-items: flex-start;
}
.footer-brand {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.footer-brand img {
  width: 140px;
  height: auto;
  border-radius: 12px;
  padding: 8px;
}
.footer-brand p {
  margin: 0;
  color: #cbd6ff;
  font-size: 0.95em;
}
.footer-lists {
  display: flex;
  gap: 40px;
  flex: 1 1 auto;
}
.footer-column h4 {
  margin: 0 0 10px 0;
  color: #fff;
}
.footer-column ul { list-style: none; padding: 0; margin: 0; }
.footer-column li { margin: 8px 0; }
.footer-column a { color: #cbd6ff; text-decoration: none; }
.footer-column a:hover { color: #fff; }
.footer-bottom { text-align: center; color: #98a0d8; font-size: 0.9em; margin-top: 18px; }

@media (max-width: 900px) {
  .site-footer .footer-inner { flex-direction: column; align-items: center; text-align: center; }
  .footer-brand { align-items: center; }
  .footer-lists { flex-direction: column; gap: 18px; }
  .footer-lists .footer-column { width: 100%; }
}

/* Section "Ce bot est fait pour toi" */
.bot-for-you {
  max-width: 1100px;
  margin: 60px auto 40px auto;
  padding: 24px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(35, 41, 70, 0.08);
  text-align: center;
}

.bot-for-you h2 {
  font-size: 2rem;
  margin-bottom: 28px;
  color: #232946;
  text-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.bot-for-you-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.bfy-item {
  background: #ffffff;
  border: 1.5px solid #e0e7ff;
  border-radius: 14px;
  box-shadow: 0 3px 12px rgba(35, 41, 70, 0.06);
  padding: 20px;
  text-align: left;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.bfy-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(35, 41, 70, 0.12);
}

.bfy-item h3 {
  margin: 0 0 8px 0;
  font-size: 1.2rem;
  color: #232946;
  display: flex;
  align-items: center;
  gap: 6px;
}

.bfy-item p {
  margin: 0;
  font-size: 0.95rem;
  color: #5b647d;
  line-height: 1.4;
}

/* Expandable feature panels in premium page */
.bfy-card { border-radius: 12px; overflow: hidden; }
.bfy-item { position: relative; padding-bottom: 12px; }
.bfy-toggle {
  margin-top: 12px;
  background: transparent;
  border: 1px solid #e0e7ff;
  color: #232946;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}
.bfy-toggle:hover { background: #f3f6fd; }
.bfy-panel {
  background: linear-gradient(180deg,#ffffff,#fbfbff);
  border-top: 1px solid #eef2ff;
  padding: 14px;
  transition: max-height 220ms ease, opacity 220ms ease;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(35,41,70,0.04);
  max-height: 0;
}
.bfy-panel[hidden] { display: block; /* keep in flow for max-height animation */ opacity: 0; }
.bfy-panel:not([hidden]) { opacity: 1; }
.bfy-carousel { display:flex; align-items:center; gap:12px; justify-content:center; }
.bfy-slide { width: 100%; max-width: 520px; display:block; }
.bfy-slide img { width:100%; height:auto; display:block; border-radius:10px; box-shadow:0 10px 30px rgba(35,41,70,0.08); }
.bfy-prev, .bfy-next { background:#eebbc3; border:none; color:#232946; padding:8px 10px; border-radius:8px; cursor:pointer; font-weight:700; }
.bfy-prev:hover, .bfy-next:hover { transform: translateY(-2px); }
.bfy-panel-note { margin-top:8px; font-size:0.9rem; color:#6b7280; text-align:center; }
.bfy-panel-empty { padding:20px; color:#6b7280; text-align:center; }

/* Responsive adjustments */
@media (max-width: 600px) {
  .bot-for-you {
    padding: 16px;
  }
  .bfy-item h3 {
    font-size: 1rem;
  }
  .bfy-item p {
    font-size: 0.9rem;
  }
}

/* Mobile: ensure the first module section is fully visible, then stack remaining sections
   Remove fixed viewport-height scrolling so the first part isn't clipped inside an
   internally scrolling box on small screens. This makes the page flow naturally on mobile. */
@media (max-width: 900px) {
  /* Let the main docs container grow with content on mobile instead of a fixed height */
  main.docs-container {
    height: auto; /* allow natural page height */
    overflow: visible; /* let page scroll normally so the first module is fully visible */
    padding-top: 12px;
  }

  /* Disable internal scrolling for sidebar/content on mobile so sections flow vertically */
  .docs-sidebar, .docs-content {
    height: auto;
    overflow: visible;
  }

  /* Avoid forcing the sidebar list to at least 100vh on mobile (was hiding content) */
  .docs-sidebar ul {
    min-height: 0;
  }

  /* Ensure module sections are full-width stacked, and make the first one clearly separated */
  .module-section {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 20px;
    padding: 18px;
  }

  /* Give the first module-section a little more visual emphasis and ensure it's fully visible */
  .module-section:first-of-type {
    margin-top: 6px;
    /* keep it in the normal flow but visually prominent */
  }

  /* Content padding adjustments for small screens */
  .docs-content {
    padding-left: 0;
    padding-right: 4vw;
  }
}