/* ========== VARIABLES & RESET ========== */
:root{
  --bg1:#ff4db2;--bg2:#4db8ff;--text:#f6f9fd;--muted:#9fb0c4;
  --dark-1:#04050a;--dark-2:#0c0f18;--neutral-bg:#0f1720;--radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:Inter,ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial;color:var(--text);background:linear-gradient(180deg,var(--dark-1),var(--dark-2));-webkit-font-smoothing:antialiased}

/* neon bg */
.bg-neon{position:fixed;inset:0;z-index:-2;background:
  radial-gradient(circle at 18% 28%, rgba(255,0,150,0.14), transparent 18%),
  radial-gradient(circle at 82% 72%, rgba(0,200,255,0.10), transparent 22%),
  linear-gradient(180deg,#03030a,#0b0f16);filter:blur(60px) saturate(140%)}

/* container */
.container{width:min(1100px,calc(100% - 40px));margin:0 auto;padding:0 20px}

/* header/island */
/* ---------- Header / island responsive ---------- */
.island {
  margin: 20px auto;
  width: min(1100px, calc(100% - 40px));
  padding: 12px 18px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  border-radius: calc(var(--radius) * 2);
  background: linear-gradient(360deg, rgba(255,255,255,0.096), rgba(0,0,0,0.048));
  box-shadow: 0 14px 36px rgba(0,0,0,0.6), 0 0 28px rgba(77,184,255,0.03);
  border: 1px solid rgba(255,255,255,0.11);
  position: relative;
  z-index: 30;
}

/* cells */
.island-left  { display:flex; align-items:center; gap:12px; justify-self:start; }
.island-center{ display:flex; align-items:center; justify-self:center; position:relative; gap:12px; }
.island-right { display:flex; align-items:center; gap:10px; justify-self:end; }

/* brand */
.brand-wrap { display:flex; align-items:center; gap:10px; }
.brand-desktop { display:flex; } /* visible by default */
.brand-mobile  { display:none; } /* shown on small screens via media query */
.logo { width:44px; height:44px; border-radius:10px; object-fit:cover; }
.brand { font-weight:800; font-size:1.05rem; }

/* desktop nav */
.nav { display:flex; gap:14px; align-items:center; }
.nav-link {
  color: var(--text);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 10px;
  font-weight: 700;
  transition: background .15s, transform .12s;
}
.nav-link:hover, .nav-link:focus { background: rgba(255,255,255,0.03); transform: translateY(-2px); outline: none; }

/* mobile nav (details) hidden on desktop */
.nav-summary { display:none; position:relative; }
.nav-summary summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--text);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.04);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav-summary summary svg { fill: currentColor; opacity: 0.95; }
.nav-summary summary:focus { outline: none; box-shadow: 0 0 0 3px rgba(77,184,255,0.12); }

/* dropdown panel */
.nav-summary .nav-list {
  margin: 8px 0 0;
  padding: 8px;
  min-width: 160px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 10px 26px rgba(0,0,0,0.5);
}
.nav-summary .nav-list a {
  display: block;
  padding: 8px 10px;
  text-decoration: none;
  color: var(--text);
  border-radius: 6px;
  font-weight: 700;
}
.nav-summary .nav-list a:hover, .nav-summary .nav-list a:focus {
  background: rgba(255,255,255,0.03);
  outline: none;
}

/* language select (base visual) */
.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* By default (desktop) we visually detach it from the header using fixed positioning.
     On mobile we'll override to make it static inside .island again. */
  position: fixed;
  top: 16px;
  right: 20px;
  z-index: 60;
  /* visual styling so it looks like a small floating pill */
  padding: 6px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.04));
  border: 1px solid rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 26px rgba(0,0,0,0.45);
}
.lang-switch:focus-within { box-shadow: 0 10px 30px rgba(77,184,255,0.12); }

/* style the select itself */
.lang-select {
  background: transparent;
  border: none;
  color: var(--text);
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 800;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* small caret spacing (pure CSS no extra markup) */
.lang-select::-ms-expand { display: none; }

/* ensure invite button vertically centered */
.island-right .btn.invite {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- RESPONSIVE ---------- */

/* collapse nav at <= 860px (adjust as you prefer) */
@media (max-width: 860px) {
  .nav { display: none; }           /* hide desktop nav */
  .nav-summary { display: block; }  /* show compact menu */
  .brand-desktop { display: none; } /* hide left brand */
  .brand-mobile  { display: flex; } /* show centered brand */
  .island-center { justify-self: center; position:static; }
  /* On tablets / small screens we still keep the lang floating pill visible at top-right.
     We only inject it inside the island at phone sizes (see the 520px rule). */
}

/* very small screens: simplify layout */
@media (max-width: 520px) {
  .island { grid-template-columns: 1fr auto; padding: 10px 12px; }
  .island-left { display: none; }
  .island-right { gap: 8px; }
  /* IMPORTANT: on small (phone) screens we put the language select back inside the island */
  .lang-switch {
    position: static; /* now part of the island layout */
    top: auto;
    right: auto;
    margin-left: 8px;
    padding: 0; /* let .lang-select handle spacing inside */
    background: transparent;
    border: none;
    box-shadow: none;
  }
  /* if you want the language select to look like a normal element on phones: tweak .lang-select */
  .lang-switch .lang-select {
    padding: 8px;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    background: transparent;
  }
  /* hide invite button on very small screens to save space */
  .island-right .btn.invite { display: none; }
  .brand-mobile { gap: 8px; }
  .logo { width: 40px; height: 40px; }
}

/* If you prefer the invite button visible for landscape phones, increase the threshold (e.g. 720px) */
@media (max-width: 720px) {
  /* optional: keep invite hidden for very narrow devices */
  /* .island-right .btn.invite { display:none; } */
}

/* Accessibility focus styles */
.nav-summary summary:focus, .nav-link:focus, .nav-summary .nav-list a:focus {
  box-shadow: 0 0 0 3px rgba(77,184,255,0.12), 0 6px 18px rgba(0,0,0,0.5);
  outline: none;
}

/* ---------- HERO / centered card : titre "choc" + logos dessous ---------- */

/* HERO / layout */
.hero-viewport {
  min-height: calc(100vh - 88px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}
.hero-center {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative; /* important pour #particle-layer */
}

/* Centered card: structure unique, responsive, centrée verticalement */
.centered-card {
  position: relative;
  z-index: 3;
  width: min(920px, 94%);
  max-width: 1000px;
  min-height: 540px;                 /* hauteur principale pour effet présentation */
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 48px 44px;
  justify-content: center;           /* centre verticalement le bloc texte */
  align-items: center;               /* aligne contenu horizontalement */
  border-radius: calc(var(--radius) * 2);
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(0,0,0,0.05));
  border: 1px solid rgba(255,255,255,0.11);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 30px 70px rgba(0,0,0,0.66), 0 0 42px rgba(77,184,255,0.03);
  color: var(--text);
  text-align: center;
  overflow: visible;
  transition: transform 280ms ease, box-shadow 280ms ease;
}
.centered-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 80px rgba(0,0,0,0.68);
}

/* Title wrapper: remplit l'espace et centre le contenu */
.card-title-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  width: 100%;
}

/* Petit slogan au-dessus */
.card-slogan {
  font-size: 0.95rem;
  color: var(--muted);
  opacity: 0.95;
  letter-spacing: 0.2px;
  margin: 0;
}

/* TITRE très grand et responsive */
.shock-title {
  font-weight: 900;
  margin: 4px 0 6px;
  line-height: 0.92;
  color: var(--text);
  font-size: clamp(2.8rem, 8vw, 5.2rem);
  letter-spacing: -0.8px;
  text-shadow:
    0 6px 30px rgba(2,6,23,0.45),
    0 0 32px rgba(77,184,255,0.03);
  word-break: break-word;
}



/* Intro / lead (sous le titre) */
.card-lead {
  font-size: 1.05rem;
  color: var(--muted);
  margin-top: 6px;
  max-width: 78%;
}

/* Actions (boutons) */
.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  z-index: 4;
  margin-top: 8px;
}

/* Buttons base */
.btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 800;
  cursor: pointer;
}
.btn.invite {
  background: linear-gradient(90deg, var(--bg1), var(--bg2));
  color: #07121a;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.btn.ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text);
}

/* ---------- Invite button: shine sweep + tiny star twinkles (CSS only) ---------- */

/* prerequisite: .btn.invite must be position:relative; overflow:hidden; */
.btn.invite {
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* keep label above effects */
.btn.invite .btn-label {
  position: relative;
  z-index: 4;
  pointer-events: none;
}

/* ---- big glossy sweep (diagonal) ---- */
.btn.invite::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -90%;
  left: -90%;
  width: 260%;
  height: 260%;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.14) 42%,
    rgba(255,255,255,0.36) 50%,
    rgba(255,255,255,0.14) 58%,
    rgba(255,255,255,0) 100%
  );
  transform: rotate(24deg) translateX(-120%);
  filter: blur(6px) saturate(120%);
  mix-blend-mode: screen;
  opacity: 0.95;
  animation: invite-shine 2.8s linear infinite;
  pointer-events: none;
}

/* sweep animation */
@keyframes invite-shine {
  0%   { transform: rotate(24deg) translateX(-120%); opacity: 0.0; }
  30%  { opacity: 0.9; transform: rotate(24deg) translateX(-20%); }
  45%  { opacity: 1; transform: rotate(24deg) translateX(6%); }
  70%  { opacity: 0.7; transform: rotate(24deg) translateX(40%); }
  100% { transform: rotate(24deg) translateX(140%); opacity: 0.0; }
}

/* ---- twinkling stars layer (many tiny radial-gradients) ---- */
.btn.invite::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(circle at 8% 18%, rgba(255,255,255,0.95) 0.6px, rgba(255,255,255,0.0) 1.6px),
    radial-gradient(circle at 22% 70%, rgba(255,255,255,0.92) 0.7px, rgba(255,255,255,0.0) 1.8px),
    radial-gradient(circle at 35% 40%, rgba(255,255,255,0.9) 0.5px, rgba(255,255,255,0.0) 1.6px),
    radial-gradient(circle at 48% 12%, rgba(255,255,255,0.95) 0.6px, rgba(255,255,255,0.0) 1.6px),
    radial-gradient(circle at 62% 55%, rgba(255,255,255,0.88) 0.6px, rgba(255,255,255,0.0) 1.6px),
    radial-gradient(circle at 78% 26%, rgba(255,255,255,0.9) 0.5px, rgba(255,255,255,0.0) 1.5px),
    radial-gradient(circle at 88% 72%, rgba(255,255,255,0.82) 0.6px, rgba(255,255,255,0.0) 1.6px),
    radial-gradient(circle at 54% 82%, rgba(255,255,255,0.85) 0.5px, rgba(255,255,255,0.0) 1.6px);
  background-size: auto;
  opacity: 0.6;
  filter: blur(0.4px) saturate(120%);
  animation:
    invite-twinkleA 4.6s cubic-bezier(.2,.8,.2,1) infinite,
    invite-twinkleB 6.1s cubic-bezier(.3,.85,.25,1) infinite;
  transform-origin: center;
}

/* twinkle animations change opacity (and tiny translate) at different rhythms */
@keyframes invite-twinkleA {
  0%   { opacity: 0.18; transform: translateY(0); }
  20%  { opacity: 0.95; transform: translateY(-2px) scale(1.02); }
  40%  { opacity: 0.25; transform: translateY(1px) scale(0.98); }
  60%  { opacity: 0.75; transform: translateY(-1px); }
  100% { opacity: 0.18; transform: translateY(0); }
}
@keyframes invite-twinkleB {
  0%   { opacity: 0.12; transform: translateX(0); }
  25%  { opacity: 0.6; transform: translateX(1px) scale(1.01); }
  50%  { opacity: 0.18; transform: translateX(-1px) scale(0.98); }
  75%  { opacity: 0.85; transform: translateX(0.5px) scale(1.02); }
  100% { opacity: 0.12; transform: translateX(0); }
}

/* add small sparkle points on hover for emphasis (optional) */
.btn.invite:hover::after {
  animation-duration: 3.2s, 4.0s;
  opacity: 0.9;
}

/* keep button accessible: reduce distractions for prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .btn.invite::before,
  .btn.invite::after {
    animation: none !important;
    transition: none !important;
    opacity: 0.0 !important;
  }
}

/* =========================
   RESPONSIVE ADJUSTMENTS
   ========================= */
@media (max-width: 980px) {
  .centered-card { min-height: 480px; padding: 36px 28px; }
  .card-lead { max-width: 90%; font-size: 1rem; }
  .bot-logo, .discord-logo { width: 88px; height: 88px; }
  .shock-title { font-size: clamp(2.0rem, 9vw, 3.4rem); }
}
@media (max-width: 520px) {
  .shock-title { font-size: clamp(1.6rem, 9vw, 2.2rem); line-height: 1.02; }
  .centered-card { min-height: 360px; padding: 20px; }
  .bot-logo, .discord-logo { width: 72px; height: 72px; }
  .card-lead { font-size: 0.95rem; max-width: 100%; }
}

/* ========== ABOUT (screen 2 full) ========== */

/* section wrapper */
.section-about {
  min-height: calc(100vh - 88px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  transition: background-color .45s ease;
  z-index: 2;
}

.about-viewport { width: 100%; max-width: 1100px; padding: 0 20px;}

#about-heading { margin-bottom: 8px; text-align: center; font-weight: 2000; font-size: 4.6rem; }
.about-lead { text-align: center; color: var(--muted); margin-bottom: 20px; max-width: 820px; margin-left: auto; margin-right: auto; }

/* grid 3 colonnes */
.about-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
  margin-top: 18px;
}

/* carte */
.about-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
  padding: 22px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
  text-align: center;
  transition: transform .34s cubic-bezier(.2,.9,.25,1), box-shadow .34s ease, background .34s ease, border-color .34s ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: flex-start;
  min-height: 220px;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* icon */
.about-icon {
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin: 0 auto;
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  padding: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.45), inset 0 -2px 6px rgba(0,0,0,0.12);
}

/* TITRE : plus gros et responsive */
.about-card h3 {
  margin: 6px 0;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem); /* plus gros tout en restant responsive */
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.2px;
}

/* texte court visible */
.about-card .about-body > p { margin: 0; color: var(--muted); }

/* texte étendu caché par défaut (ouvert uniquement pour la carte survolée / focusée) */

.about-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
  padding: 26px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.082);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* animation douce */
}

.about-card:hover {
  transform: scale(1.05); /* léger zoom */
  box-shadow: 0 14px 40px rgba(77, 184, 255, 0.6); /* effet lumineux */
  border-color: rgba(77, 184, 255, 0.4); /* bord plus visible */
}

/* responsive : 2 colonnes / 1 colonne */
@media (max-width: 980px) {
  .about-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 640px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-card { min-height: fit-content; padding: 18px; }
  #about-heading { font-size: 1.4rem; }
}

/* =========================
   SCREEN 3 — COMMANDS (full screen)
   ========================= */
.section-commands {
  min-height: calc(100vh - 88px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 64px 20px;
  background: var(--neutral-bg);
  z-index: 2;
}

/* inner panel */
.section-commands .commands-bg{
  width: 100%;
  max-width: 1100px;
  padding: 36px 28px;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.01);
}

/* main title + lead */
.section-commands h2 {
  font-size: 2.9rem;
  margin: 4px 0 12px;
  letter-spacing: -0.4px;
  text-align: center;
  font-weight: 800;
}
.section-commands p {
  color: var(--muted);
  text-align: center;
  margin-bottom: 28px;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* sub-section headings */
.section-commands h3 {
  font-size: 1.35rem;
  margin-top: 28px;
  margin-bottom: 12px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.2px;
}

/* grid: ensure top-aligned cards and equal heights */
.commands-list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 12px;
  align-items: start;   /* keep items top-aligned in the grid */
}

/* make grid children stretch to equal heights */
.commands-list > * {
  align-self: stretch;
}

/* card: same height, left-aligned content */
.command-card{
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(0,0,0,0.24));
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(230, 230, 230, 0.281); /* gris clair, faible opacité */
  box-shadow: 0 14px 34px rgba(0,0,0,0.55);
  transition: transform .22s cubic-bezier(.22,.9,.3,1), box-shadow .22s ease, border-color .22s ease;
  overflow: visible;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* push usage block to bottom if present */
  gap: 12px;
  text-align: left; /* IMPORTANT: text not centered */
}

/* hover */
.command-card:hover,
.command-card:focus-within {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 28px 66px rgba(0,0,0,0.66), 0 0 24px rgba(77,184,255,0.02);
  border-color: rgba(255, 255, 255, 0.062);
}

/* title & description (left aligned) */
.command-card h4 {
  margin: 0 0 6px 0;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.12;
  text-align: left;
}
.command-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
  text-align: left;
}

/* usage block (placed at bottom because of justify-content: space-between) */
.command-usage {
  margin-top: 8px;
  font-family: monospace;
  font-size: 0.95rem;
  background: rgba(255,255,255,0.02);
  padding: 8px;
  border-radius: 8px;
  display: inline-block;
  color: var(--text);
}

/* badge (pastille) - always visible */
.command-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 9px;
  border-radius: 999px;
  color: #07121a;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.45);
}

/* badge colors */
.command-badge.user {
  background: linear-gradient(90deg, #78ffb4, #3cd2a0);
}
.command-badge.admin {
  background: linear-gradient(90deg, #ffbe78, #ff825a);
}

/* legend under the grid */
.commands-legend{
  margin-top: 28px;
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:center;
  color: var(--muted);
  font-size: 0.95rem;
  flex-wrap:wrap;
}
.commands-legend .legend-item{
  display:flex;
  gap:8px;
  align-items:center;
}
.commands-legend .legend-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  box-shadow: 0 6px 12px rgba(0,0,0,0.45);
}
.commands-legend .legend-dot.user { background: linear-gradient(90deg,#78ffb4,#3cd2a0); }
.commands-legend .legend-dot.admin { background: linear-gradient(90deg,#ffbe78,#ff825a); }

/* small screens */
@media (max-width: 720px) {
  .section-commands { padding: 36px 12px; min-height: calc(100vh - 72px); }
  .section-commands h2 { font-size: 1.8rem; }
  .commands-list { gap: 14px; }
  .command-badge { top: 8px; right: 8px; padding:5px 7px; font-size:10px; }
  .command-card { padding: 12px; min-height: 160px; }
}

/* ========== WIDGET (screen 4) ========== */
.section-widget{padding:48px 0;background:linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.03));}
.widget-wrap{display:flex;justify-content:center;align-items:flex-start;padding:20px;gap:20px;flex-wrap:wrap}

/* footer */
.site-footer{background:var(--neutral-bg);padding:60px 20px;text-align:center;color:#f1f1f1}
.site-footer .footer-container{max-width:980px;margin:0 auto}
.site-footer p{font-size:14px;line-height:1.8;margin-bottom:30px;color:#bbb}
.footer-nav ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:40px}
.footer-nav a{font-size:16px;font-weight:500;color:#fff;text-decoration:none;transition:color .3s ease}
.footer-nav a:hover{color:#00bcd4}

/* responsive */
@media (max-width:980px){.about-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){
  .about-grid{grid-template-columns:1fr;gap:12px;padding:0 12px}
  .centered-card{min-height:360px;padding:18px}
  .bot-logo,.discord-logo{width:64px;height:64px}
  .card-title-wrap h1{font-size:1.5rem}
  .nav{gap:8px}
  .island{grid-template-columns:auto 1fr;padding:10px 14px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* === Mobile dropdown overlay — coller en fin de style.css === */

/* s'assurer que l'island laisse l'overlay dépasser */
.island { overflow: visible !important; }

/* nav-summary container (déjà présent) — garder position relative */
.nav-summary { position: relative; }

/* masquer par défaut le panneau et le rendre en overlay */
.nav-summary .nav-list {
  display: none;                 /* affiché uniquement quand <details> est ouvert */
  position: absolute;            /* passe par-dessus l'island */
  top: calc(100% + 10px);        /* juste en dessous du summary */
  left: 50%;
  transform: translateX(-50%);   /* centré sous le bouton summary */
  z-index: 200;                  /* au-dessus du header */
  min-width: 160px;
  width: min(260px, 90vw);       /* limite largeur sur petits écrans */
  padding: 8px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 14px 40px rgba(0,0,0,0.5);
  pointer-events: auto;
}

/* afficher quand le <details> est ouvert */
.nav-summary[open] .nav-list { display: block; }

/* rendre les liens plus lisibles en overlay */
.nav-summary .nav-list a {
  display: block;
  padding: 10px 12px;
  text-decoration: none;
  color: var(--text);
  border-radius: 8px;
  font-weight: 800;
}
.nav-summary .nav-list a + a { margin-top: 6px; }

/* si le summary est proche du bord (ex: island très à droite), forcer align left */
@media (max-width: 520px) {
  /* si tu préfères aligner le menu sur la gauche du summary plutôt qu'au centre */
  /* .nav-summary .nav-list { left: 0; transform: none; } */
}