html, body {
      height: 100%;
      overflow-x: hidden;
      font-family: 'sans-serif';
      background: linear-gradient(to bottom right, #000000, #1f2937, #111827);
      color: white;
    }

    .particles-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -10;
    }

    .big-gradient-title {
  font-size: 5rem;
  font-weight: 900;
  background: linear-gradient(90deg, #00ffff, #38bdf8, #a855f7, #ec4899);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientFlow 6s ease infinite;
  text-align: center;
  text-shadow: none; 
  line-height: 1.25; 
  padding-bottom: 0.3em; 
  overflow-wrap: break-word;

}
.text-gradient-title {
  background: linear-gradient(90deg, #60a5fa, #a78bfa, #f472b6);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientFlow 6s ease infinite;
  line-height: 1.25;
  padding-bottom: 0.25em;
}


    @keyframes gradientFlow {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
  html {
    scroll-behavior: smooth;
  }

@keyframes smoothBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
}

.arrow-bounce {
  animation: smoothBounce 1.6s infinite ease-in-out;
}

h2, h3 {
  line-height: 1.25;
  padding-bottom: 0.2em;
  margin-bottom: 0.75em;
  overflow-wrap: break-word;
}

h2 {
  font-size: 2.25rem; /* équivaut à text-4xl */
  font-weight: 800;
}

h3 {
  font-size: 1.5rem; /* équivaut à text-2xl */
  font-weight: 700;
}

section {
  overflow: visible;
}
/* 1) Quand on scroll, on épaissit le header */
#main-header.scrolled {
  background-color: rgba(17, 24, 39, 0.85);
}

/* 2) Nav caché par défaut (opacity+pointer-events) */
/*    On ne touche plus au display pour pouvoir animer en douceur */
#menu {
  /* déjà géré par les classes Tailwind ci-dessous */
}
html {
  scroll-behavior: smooth;
}

  @keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
}

.arrow-bounce {
  animation: bounce 2s infinite;
}

/* ---------- Guides tabs (no @apply; plain CSS so it works with CDN) ---------- */
.guide-tab{
  padding:.5rem 1rem;border-radius:.75rem;font-size:.875rem;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.06);
  transition:background .2s,border-color .2s,color .2s
}
.guide-tab:hover{background:rgba(255,255,255,.10)}
.guide-tab.active{background:#0891b2;border-color:#06b6d4;color:#fff}

.subtab{
  padding:.375rem .75rem;border-radius:9999px;font-size:.75rem;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.06);
  transition:background .2s,border-color .2s,color .2s
}
.subtab:hover{background:rgba(255,255,255,.10)}
.subtab.active{background:#7c3aed;border-color:#8b5cf6;color:#fff}

/* ---------- Code boxes ---------- */
.codebox{
  position:relative;
  background:rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.08);
  border-radius:.75rem;
  padding:2.25rem .875rem .875rem; /* top padding leaves room for badges/buttons */
  color:#e5e7eb;
  font-size:.825rem;
  overflow-x:auto;
}
.codebox code{
  display:block; white-space:pre; /* keep formatting */
}

/* language chip (uses data-lang attr) */
.codebox::before{
  content: attr(data-lang);
  position:absolute; top:.5rem; left:.5rem;
  font-size:.625rem; letter-spacing:.06em; text-transform:uppercase;
  color:#94a3b8; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  padding:.125rem .375rem; border-radius:.375rem;
  pointer-events:none;
}

/* “Copier” button goes top-right, off the code area */
.codebox .copy-btn{
  position:absolute; top:.5rem; right:.5rem;
  font-size:.70rem; padding:.15rem .45rem;
  border-radius:.375rem;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.10);
  color:#e5e7eb;
}
.codebox .copy-btn:hover{ background:rgba(255,255,255,.15) }

.tab1, .tab2{
  padding:.45rem .9rem;border-radius:.8rem;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  color:#cbd5e1;font-size:.9rem
}
.tab1.active{background:#06b6d4;color:#0b1220;border-color:#0891b2}
.tab2.active{background:#a855f7;color:#0b1220;border-color:#7c3aed}



/* Mini badge statut dans le header (basé sur data-state) */
#status-badge {
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
}
#status-badge[data-state="ok"]        { color: #86efac; border-color: rgba(16,185,129,.35); background: rgba(6,78,59,.25); }
#status-badge[data-state="degraded"]  { color: #fde68a; border-color: rgba(217,119,6,.35);  background: rgba(69,26,3,.25); }
#status-badge[data-state="down"]      { color: #fecaca; border-color: rgba(239,68,68,.35);  background: rgba(76,5,25,.3); }
#status-badge[data-state="unknown"]   { color: #cbd5e1; border-color: rgba(148,163,184,.35);background: rgba(30,41,59,.35); }
#status-badge[data-state] > span:first-child { display:inline-block; }
#status-badge[data-state="ok"]       > span:first-child { background:#10b981; }
#status-badge[data-state="degraded"] > span:first-child { background:#f59e0b; }
#status-badge[data-state="down"]     > span:first-child { background:#ef4444; }
#status-badge[data-state="unknown"]  > span:first-child { background:#94a3b8; }