/* ==========================================================================
   VANIX — Design system (cyan / bleu electrique, glassmorphism, 3D)
   ==========================================================================
   Le couple --accent-from / --accent-to est injecte par top.ejs depuis
   /admin/settings : changer les deux couleurs la-bas recolore tout le site.
   Les valeurs ci-dessous ne servent que de repli.

   La rampe --blue-50 -> --blue-700 est la rampe d'accent (du plus pale au plus
   profond) : bordures, icones, liens, etats actifs. Le texte courant utilise
   --navy, le texte secondaire --muted.
   ========================================================================== */

:root {
  --accent-from: #a855f7;
  --accent-to:   #c084fc;

  --blue-50:  #1a1329;
  --blue-100: #231838;
  --blue-200: #331f54;
  --blue-300: #d8b4fe;
  --blue-400: #c084fc;
  --blue-500: #a855f7;
  --blue-600: #9333ea;
  --blue-700: #7e22ce;
  --navy:     #f3e8ff;
  --muted:    #a89bb9;
  --white:    #ffffff;
  --bg:       #0c0817;

  --grad: linear-gradient(120deg, var(--accent-from), var(--accent-to));
  --grad-soft: linear-gradient(120deg, rgba(168,85,247,.22), rgba(192,132,252,.22));

  --glass: rgba(18, 13, 29, 0.75);
  --glass-border: rgba(168, 85, 247, 0.25);
  --shadow-sm: 0 6px 20px -8px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 18px 45px -18px rgba(0, 0, 0, 0.75);
  --shadow-lg: 0 30px 70px -25px rgba(0, 0, 0, 0.85);
  --glow: 0 0 0 1px rgba(168, 85, 247, 0.35), 0 10px 40px -8px rgba(168, 85, 247, 0.5);

  --radius: 18px;
  --radius-lg: 26px;
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nav-h: 72px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 20px); }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--navy);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--blue-400); color: #fff; }

/* ---------- Modern Minimalist Scrollbar ---------- */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(168, 85, 247, 0.45) transparent;
}

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: rgba(12, 8, 23, 0.6);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent-from), var(--accent-to));
  border-radius: 9999px;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #c084fc, #d8b4fe);
  box-shadow: 0 0 15px rgba(192, 132, 252, 0.8);
}

::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

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

a { color: var(--blue-600); text-decoration: none; }
img { max-width: 100%; display: block; }
code { font-family: "Cascadia Code", Consolas, monospace; font-size: .88em; }

.icon { flex-shrink: 0; vertical-align: middle; }

/* ---------- Fond : canvas 3D optionnel ---------- */

#bg3d { position: fixed; inset: 0; z-index: -2; pointer-events: none; }

.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--grad); z-index: 200; border-radius: 0 4px 4px 0;
  box-shadow: 0 0 12px rgba(168,85,247,.6);
}

/* ---------- Navigation ---------- */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .3s, box-shadow .3s, backdrop-filter .3s;
}
.nav.scrolled {
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 8px 30px -12px rgba(168,85,247,.18);
}
.nav-inner {
  max-width: 1240px; margin: 0 auto; padding: 0 28px;
  height: var(--nav-h); display: flex; align-items: center; gap: 28px;
}

.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark { color: var(--blue-700); filter: drop-shadow(0 4px 10px rgba(0,0,0,.2)); transition: color .25s, filter .25s; }
.brand-mark-shell { fill: currentColor; }
.brand-mark-letter { fill: #fff; }
.brand-logo-img { object-fit: contain; filter: brightness(0); transition: filter .25s; }
.brand-name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
  letter-spacing: .16em; color: var(--navy);
}

.nav-links { display: flex; align-items: center; gap: 6px; margin-left: 10px; }
.nav-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 12px; font-weight: 500; font-size: .95rem;
  color: var(--muted); transition: color .2s, background .2s;
}
.nav-link:hover { color: var(--blue-600); background: rgba(168,85,247,.10); }
.nav-link.active { color: var(--blue-600); background: rgba(168,85,247,.14); }

.nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* Modern Navbar Search Bar */
.nav-search-bar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 14px;
  border-radius: 12px;
  background: rgba(18, 12, 32, 0.75);
  border: 1.5px solid rgba(168, 85, 247, 0.35);
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 15px -5px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  outline: none;
}

.nav-search-bar:hover {
  border-color: rgba(192, 132, 252, 0.8);
  background: rgba(26, 17, 45, 0.95);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 0 20px -2px rgba(168, 85, 247, 0.45);
}

.nav-search-bar .icon {
  color: #c084fc;
  transition: transform 0.2s ease;
}

.nav-search-bar:hover .icon {
  transform: scale(1.1);
}

.nav-search-text {
  font-size: 0.88rem;
  font-weight: 500;
  color: #e2e8f0;
  letter-spacing: -0.01em;
}

.nav-search-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(35, 24, 56, 0.9);
  border: 1px solid rgba(168, 85, 247, 0.35);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  color: #d8b4fe;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

@media (max-width: 640px) {
  .nav-search-text, .nav-search-kbd {
    display: none;
  }
  .nav-search-bar {
    padding: 8px;
    border-radius: 10px;
  }
}

.burger { display: none; background: none; border: none; color: var(--navy); cursor: pointer; padding: 6px; }

/* Menu utilisateur */
.user-menu { position: relative; }
.user-menu summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 6px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--glass-border);
  transition: box-shadow .2s;
}
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary:hover { box-shadow: var(--shadow-sm); }
.user-menu .chev { transition: transform .25s; color: var(--muted); }
.user-menu[open] .chev { transform: rotate(180deg); }
.user-name { font-weight: 600; font-size: .92rem; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.avatar { border-radius: 50%; border: 2px solid var(--blue-200); background: var(--blue-100); }
.avatar-xl { width: 96px; height: 96px; border-width: 4px; box-shadow: var(--shadow-md); }

.menu {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border); border-radius: 16px;
  box-shadow: var(--shadow-md); padding: 8px; z-index: 110;
  animation: menuIn .18s ease;
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } }
.menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px; font-size: .93rem; font-weight: 500;
  color: var(--navy);
}
.menu-item:hover { background: rgba(168,85,247,.12); color: var(--blue-600); }
.menu-item.danger { color: #d33; }
.menu-item.danger:hover { background: rgba(221,51,51,.08); color: #b22; }
.menu-sep { height: 1px; background: var(--blue-100); margin: 6px 8px; }

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 11px 20px; border-radius: 14px; border: none; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: .95rem;
  color: var(--navy); background: rgba(255,255,255,.8);
  border: 1px solid var(--glass-border);
  transition: transform .2s, box-shadow .25s, background .2s, color .2s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled { opacity: .72; cursor: wait; transform: none; }
.btn-lg { padding: 14px 26px; font-size: 1.02rem; border-radius: 16px; }
.btn-block { width: 100%; }

.btn-primary {
  background: var(--grad); color: #fff; border: none;
  box-shadow: 0 10px 30px -8px rgba(168,85,247,.55);
}
.btn-primary:hover { box-shadow: var(--glow); }

.btn-discord { background: #5865f2; color: #fff; border: none; box-shadow: 0 10px 26px -10px rgba(0,0,0,.65); }
.btn-discord:hover { background: #4752c4; box-shadow: 0 14px 32px -10px rgba(88,101,242,.6); }

.btn-ghost { background: rgba(255,255,255,.7); }
.btn-ghost:hover { border-color: var(--blue-300); color: var(--blue-600); }

.btn-white { background: #fff; color: var(--blue-700); border: none; }
.btn-outline-white { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.6); }
.btn-outline-white:hover { background: rgba(255,255,255,.12); color: #fff; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 11px; border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.75); color: var(--muted); cursor: pointer;
  transition: all .2s;
}
.icon-btn:hover { color: var(--blue-600); border-color: var(--blue-300); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.icon-btn.danger:hover { color: #d33; border-color: rgba(221,51,51,.4); }

/* ---------- Toast Floating Pill ---------- */

.toast {
  position: fixed;
  top: calc(var(--nav-h) + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 12px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: -0.01em;
  color: #ffffff;
  background: rgba(18, 12, 32, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1.5px solid rgba(168, 85, 247, 0.4);
  box-shadow: 0 12px 35px -5px rgba(0, 0, 0, 0.6), 0 0 24px -2px rgba(168, 85, 247, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: min(92vw, 480px);
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.toast.hide {
  opacity: 0;
  transform: translateX(-50%) translateY(-16px) scale(0.95);
  transition: all 0.25s ease-in;
}

.toast-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(34, 197, 94, 0.18);
  border: 1px solid rgba(34, 197, 94, 0.45);
  color: #4ade80;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.3);
}

.toast-text {
  color: #f3e8ff;
  line-height: 1.3;
}

.toast-success .toast-icon-wrap {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.5);
  color: #4ade80;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.35);
}

.toast-error {
  border-color: rgba(239, 68, 68, 0.45);
  box-shadow: 0 12px 35px -5px rgba(0, 0, 0, 0.6), 0 0 24px -2px rgba(239, 68, 68, 0.3);
}
.toast-error .toast-icon-wrap {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
  color: #f87171;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.35);
}

.toast-warn {
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow: 0 12px 35px -5px rgba(0, 0, 0, 0.6), 0 0 24px -2px rgba(245, 158, 11, 0.3);
}
.toast-warn .toast-icon-wrap {
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.5);
  color: #fbbf24;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.35);
}

/* ---------- Structure ---------- */

main { position: relative; z-index: 1; }

.container { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.container-narrow { max-width: 880px; }

.section { padding: 90px 0; }
.section-tight { padding: 40px 0 90px; }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 42px; flex-wrap: wrap; }
.section-head.center { flex-direction: column; align-items: center; text-align: center; }
.section-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue-500); margin-bottom: 12px;
}
.section-title { font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 2.6rem); letter-spacing: -.02em; line-height: 1.15; }
.section-sub { color: var(--muted); max-width: 560px; margin-top: 12px; }

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- Hero ---------- */

.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--nav-h) + 40px) 0 40px; position: relative; }
.hero-inner {
  max-width: 1240px; margin: 0 auto; padding: 0 28px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center;
}

.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px; font-size: .85rem; font-weight: 600;
  background: var(--grad-soft); border: 1px solid var(--glass-border);
  color: var(--blue-600); margin-bottom: 26px;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5.4vw, 4.3rem);
  line-height: 1.06; letter-spacing: -.03em; font-weight: 700;
  margin-bottom: 24px;
}
.hero-sub { font-size: 1.13rem; color: var(--muted); max-width: 520px; margin-bottom: 34px; }

.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 34px; }

.hero-trust { display: flex; gap: 22px; flex-wrap: wrap; color: var(--muted); font-size: .9rem; font-weight: 500; }
.hero-trust span { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust .icon { color: var(--blue-500); }

/* Scene 3D du hero */
.hero-visual { perspective: 1200px; }
.tilt-scene { position: relative; transform-style: preserve-3d; transition: transform .15s ease-out; }

.glass-panel {
  background: var(--glass);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.main-panel { padding: 26px; position: relative; z-index: 2; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.panel-title { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 600; }
.panel-title .icon { color: var(--blue-500); }
.panel-dot { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.5); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }

.panel-list { display: flex; flex-direction: column; gap: 8px; }
.panel-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: 14px;
  background: rgba(255,255,255,.6); border: 1px solid rgba(168,85,247,.22);
  transition: transform .2s, box-shadow .2s;
}
.panel-row:hover { transform: translateX(5px); box-shadow: var(--shadow-sm); }
.panel-rank { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--blue-400); }
.panel-info { display: flex; flex-direction: column; min-width: 0; }
.panel-name { font-weight: 600; font-size: .95rem; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-sub { font-size: .78rem; color: var(--muted); }
.panel-dl { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--blue-600); }

.panel-progress { margin-top: 18px; height: 6px; border-radius: 6px; background: var(--blue-100); overflow: hidden; }
.panel-progress span { display: block; height: 100%; width: 40%; border-radius: 6px; background: var(--grad); animation: slideBar 2.6s ease-in-out infinite; }
@keyframes slideBar { 0% { transform: translateX(-110%); } 60%, 100% { transform: translateX(260%); } }

.glass-chip {
  position: absolute; z-index: 4;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 9999px;
  background: rgba(22, 15, 38, 0.88); backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border); box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.75);
  font-weight: 600; font-size: .84rem; white-space: nowrap;
  color: var(--navy);
}
.glass-chip .icon { color: var(--blue-400); }
.float-1 { top: -20px; right: 6%; animation: floatY 5.5s ease-in-out infinite; }
.float-2 { bottom: -20px; left: -2%; animation: floatY 6.5s ease-in-out infinite 1s; }
.float-3 { top: 46%; right: -56px; animation: floatY 7s ease-in-out infinite 2s; }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.orbit-ring {
  position: absolute; inset: -50px; z-index: 1; border-radius: 50%;
  border: 1.5px dashed rgba(168,85,247,.35);
  animation: spin 40s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.scroll-hint {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.8); border: 1px solid var(--glass-border);
  color: var(--blue-500); box-shadow: var(--shadow-sm);
  animation: bounceY 2.2s infinite;
}
@keyframes bounceY { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

/* ---------- Stats ---------- */

.stats-strip { padding: 30px 0 60px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stats-grid-4 { margin-top: 30px; }
.stat-card {
  background: var(--glass); backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border); border-radius: var(--radius);
  padding: 26px; text-align: center; box-shadow: var(--shadow-sm);
  transition: transform .25s, box-shadow .25s;
}
.stat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.stat-icon {
  width: 48px; height: 48px; margin: 0 auto 14px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad); color: #fff; box-shadow: 0 8px 20px -6px rgba(168,85,247,.55);
}
.stat-num { font-family: var(--font-display); font-size: 2rem; font-weight: 700; letter-spacing: -.02em; }
.stat-label { color: var(--muted); font-size: .88rem; margin-top: 2px; }

/* ---------- Cartes de ressources ---------- */

.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 26px; }

.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--glass); backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: box-shadow .3s, border-color .3s;
  transform-style: preserve-3d;
}
.card:hover { box-shadow: var(--shadow-lg); border-color: var(--blue-300); }

.card-cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--blue-100); }
.card-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.card:hover .card-cover img { transform: scale(1.06); }
.card-cover-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: var(--grad);
}
.card-cover-fallback span { font-family: var(--font-display); font-size: 3.4rem; font-weight: 700; color: rgba(255,255,255,.9); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  font-size: .78rem; font-weight: 600;
  background: rgba(255,255,255,.85); border: 1px solid var(--glass-border);
  color: var(--navy);
}
.chip .icon { color: var(--blue-500); }
.chip-cover { position: absolute; top: 12px; left: 12px; backdrop-filter: blur(8px); }
.chip-version { position: absolute; top: 12px; right: 12px; backdrop-filter: blur(8px); color: var(--blue-600); }
.chip-blue { background: var(--grad-soft); color: var(--blue-400); border-color: rgba(168,85,247,.4); }
.chip-warn { background: rgba(234,179,8,.12); color: #a16207; border-color: rgba(234,179,8,.35); font-size: .72rem; padding: 3px 9px; }

.card-body { padding: 20px 22px 8px; flex: 1; }
.card-title { font-family: var(--font-display); font-size: 1.22rem; letter-spacing: -.01em; }
.card-title a { color: var(--navy); }
.stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card-tagline {
  color: var(--muted); font-size: .92rem; margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.meta-dl { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--blue-600); }

.card-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; margin-top: 12px;
  border-top: 1px solid rgba(168,85,247,.2); font-size: .85rem;
}
.card-size { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); }
.card-go { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--blue-500); transition: gap .2s; }
.card:hover .card-go { gap: 10px; color: var(--blue-600); }

/* Etoiles */
.stars { display: inline-flex; align-items: center; gap: 7px; }
.stars-track { position: relative; display: inline-flex; line-height: 0; }
.stars-row { display: inline-flex; gap: 2px; white-space: nowrap; }
.stars-empty .icon { color: #d4e3f5; }
.stars-filled { position: absolute; top: 0; left: 0; overflow: hidden; }
.stars-filled .icon { color: #f59e0b; }
.stars-count { font-size: .82rem; color: var(--muted); font-weight: 500; }

/* ---------- Etapes (pages premium) ---------- */

.steps-grid { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 18px; align-items: center; }
.step-card {
  position: relative; text-align: center; padding: 36px 26px;
  background: var(--glass); backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.step-num {
  position: absolute; top: 16px; right: 20px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.6rem;
  color: rgba(168,85,247,.28);
}
.step-icon {
  width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad); color: #fff; box-shadow: 0 10px 24px -8px rgba(168,85,247,.6);
}
.step-card h3 { font-family: var(--font-display); margin-bottom: 8px; }
.step-card p { color: var(--muted); font-size: .92rem; }
.step-link { color: var(--blue-300); display: flex; justify-content: center; }

/* ---------- Pages internes ---------- */

.page-hero { padding: calc(var(--nav-h) + 60px) 0 30px; }
.page-title { font-family: var(--font-display); font-size: clamp(2.1rem, 4.4vw, 3.2rem); letter-spacing: -.03em; line-height: 1.1; margin-bottom: 10px; }
.page-sub { color: var(--muted); font-size: 1.05rem; max-width: 640px; }

/* ---------- Page produit du Loader ---------- */
/* Aucun halo ni nappe floue : panneaux nets, bordures 1px, fonds pleins. */

.app-hero { padding: calc(var(--nav-h) + 56px) 0 10px; }
.app-hero-copy { width: min(780px, 100%); }

.app-badge {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--glass-border); background: var(--blue-50);
  color: var(--blue-500); font-size: .78rem; font-weight: 700;
}
.app-title {
  font-family: var(--font-display); font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  font-weight: 700; line-height: 1; letter-spacing: -.045em; margin-bottom: 18px;
}
.app-sub { max-width: 560px; color: var(--muted); font-size: 1.04rem; line-height: 1.7; }

/* Fiche de telechargement : le bloc qui porte l'action principale */
.dl-card { display: flex; flex-direction: column; border: 1px solid var(--glass-border); border-radius: 22px; background: var(--glass); overflow: hidden; }
.dl-card-head { display: flex; align-items: center; gap: 13px; padding: 20px; border-bottom: 1px solid var(--glass-border); }
.dl-card-icon {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad); color: #06121f;
}
.dl-card-id { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dl-card-id strong { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: -.01em; }
.dl-card-id small { color: var(--muted); font-size: .76rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dl-card-body { flex: 1; display: flex; flex-direction: column; padding: 20px; }
.dl-card-note { display: flex; align-items: flex-start; gap: 7px; margin-top: 12px; color: var(--muted); font-size: .78rem; line-height: 1.5; }
/* Rappel des atouts : il absorbe l'espace laisse par l'etirement de la fiche */
.dl-card-perks { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 11px; margin-top: 20px; list-style: none; }
.dl-card-perks li { display: flex; align-items: flex-start; gap: 9px; color: var(--navy); font-size: .83rem; line-height: 1.45; }
.dl-card-perks .icon { flex: 0 0 auto; margin-top: 2px; color: #34d399; }
.dl-card-note .icon { color: var(--blue-400); flex: 0 0 auto; margin-top: 2px; }
.dl-card-meta { margin-top: auto; list-style: none; padding: 6px 20px 18px; }
.dl-card-meta li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid var(--glass-border); font-size: .84rem; }
.dl-card-meta li span { color: var(--muted); flex: 0 0 auto; }
.dl-card-meta li b { min-width: 0; font-weight: 600; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Capture a gauche, fiche de telechargement a droite, alignees par le haut */
/* Capture a gauche, fiche a droite. Les deux cellules s'etirent sur la hauteur
   de la ligne : les bas s'alignent quel que soit le contenu le plus haut.
   Le cadre centre son image verticalement, pour que le surplus eventuel se
   repartisse en haut et en bas plutot que de tomber d'un seul cote. */
.app-showcase {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  column-gap: 24px; row-gap: 20px;
}
.app-showcase > .loader-image-frame {
  grid-column: 1; display: flex; flex-direction: column; justify-content: center;
}
.app-showcase > .dl-card { grid-column: 2; }
/* Sans capture, la fiche reprend sa taille normale, centree */
.app-showcase.is-solo { grid-template-columns: minmax(0, 420px); justify-content: center; }
.app-showcase.is-solo > .dl-card { grid-column: 1; }
.loader-image-frame {
  width: 100%; padding: 8px;
  border: 1px solid var(--glass-border); border-radius: 22px; background: var(--glass);
}
.loader-image-crop { position: relative; border-radius: 15px; overflow: hidden; }
.loader-page-image { display: block; width: 100%; height: auto; }
/* Beaucoup de captures sont exportees avec une marge transparente autour du
   visuel. main.js la mesure et renseigne ces variables pour que le cadre colle
   au bord reel ; sans marge (ou sans JS) l'image reste intacte. */
.loader-image-frame.is-cropped .loader-image-crop { aspect-ratio: var(--crop-ratio); }
.loader-image-frame.is-cropped .loader-page-image {
  position: absolute; max-width: none;
  width: var(--crop-w); height: var(--crop-h); left: var(--crop-x); top: var(--crop-y);
}

/* Fonctionnalites */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feat {
  padding: 24px; border: 1px solid var(--glass-border); border-radius: 20px; background: var(--glass);
  transition: border-color .25s, transform .25s;
}
.feat:hover { border-color: var(--blue-300); transform: translateY(-3px); }
.feat-icon {
  width: 42px; height: 42px; margin-bottom: 15px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--glass-border); background: var(--blue-50); color: var(--blue-500);
}
.feat h3 { font-family: var(--font-display); font-size: 1.04rem; margin-bottom: 7px; letter-spacing: -.01em; }
.feat p { color: var(--muted); font-size: .89rem; line-height: 1.65; }

/* Installation : une colonne d'etapes reliees par un filet vertical */
.install { position: relative; list-style: none; padding-left: 4px; }
.install::before { content: ''; position: absolute; left: 21px; top: 12px; bottom: 12px; width: 1px; background: var(--glass-border); }
.install-step { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 18px; align-items: start; padding: 0 0 26px; }
.install-step:last-child { padding-bottom: 0; }
.install-num {
  position: relative; z-index: 1;
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--glass-border); background: var(--bg);
  color: var(--blue-500); font-family: var(--font-display); font-weight: 700; font-size: .92rem;
}
.install-body { padding-top: 4px; }
.install-body h3 { font-family: var(--font-display); font-size: 1.06rem; margin-bottom: 6px; letter-spacing: -.01em; }
.install-body p { max-width: 680px; color: var(--muted); font-size: .92rem; line-height: 1.7; }
.install-body code, .check-list code { padding: 1px 7px; border-radius: 6px; border: 1px solid var(--glass-border); background: var(--blue-50); color: var(--blue-600); }

/* Configuration requise + authenticite */
.duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: start; }
.panel { padding: 26px; border: 1px solid var(--glass-border); border-radius: 22px; background: var(--glass); }
.panel-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: -.01em; }
.panel-heading .icon { color: var(--blue-400); }
.panel-lead { margin-bottom: 14px; color: var(--muted); font-size: .9rem; line-height: 1.65; }
.panel-warn { border-color: rgba(234,179,8,.34); }
.panel-warn .panel-heading .icon { color: #eab308; }
.panel-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--blue-500); font-size: .84rem; font-weight: 600; }
.panel-link:hover { color: var(--blue-700); }

.spec-table { width: 100%; border-collapse: collapse; }
.spec-table tr + tr th, .spec-table tr + tr td { border-top: 1px solid var(--glass-border); }
.spec-table th { width: 38%; padding: 11px 12px 11px 0; color: var(--muted); font-size: .84rem; font-weight: 600; text-align: left; vertical-align: top; }
.spec-table td { padding: 11px 0; color: var(--navy); font-size: .88rem; }

.check-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.check-list li { display: flex; align-items: flex-start; gap: 9px; color: var(--navy); font-size: .88rem; line-height: 1.55; }
.check-list .icon { flex: 0 0 auto; margin-top: 3px; color: #34d399; }
.check-list .is-bad, .check-list li.is-bad { color: var(--muted); }
.check-list li.is-bad .icon { color: #f87171; }

/* Empreinte du fichier : bloc technique, monospace, copiable */
.hash-box { margin-top: 18px; padding: 14px; border: 1px solid var(--glass-border); border-radius: 14px; background: var(--blue-50); }
.hash-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.hash-head > span { color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.hash-copy {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
  border: 1px solid var(--glass-border); border-radius: 8px; background: transparent;
  color: var(--blue-500); font: 600 .72rem var(--font-body); cursor: pointer;
  transition: border-color .2s, color .2s;
}
.hash-copy:hover { border-color: var(--blue-300); color: var(--blue-700); }
.hash-value { display: block; padding: 0; border: 0; background: none; color: var(--navy); font-size: .74rem; line-height: 1.6; word-break: break-all; }
.hash-help { margin-top: 10px; color: var(--muted); font-size: .76rem; line-height: 1.6; }
.hash-help code { word-break: break-all; }

/* Barre de telechargement collante : relais de la fiche une fois defilee */
.dl-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  border-top: 1px solid var(--glass-border); background: var(--bg);
  transform: translateY(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.dl-bar.is-shown { transform: translateY(0); }
.dl-bar-inner {
  max-width: 1240px; margin: 0 auto; padding: 12px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.dl-bar-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dl-bar-icon {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad); color: #06121f;
}
.dl-bar-text { min-width: 0; display: flex; flex-direction: column; }
.dl-bar-text strong { font-family: var(--font-display); font-size: .94rem; letter-spacing: -.01em; }
.dl-bar-text small { color: var(--muted); font-size: .76rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dl-bar .btn { flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { .dl-bar { transition: none; } }
@media (max-width: 640px) {
  .dl-bar-inner { padding: 10px 18px; gap: 12px; }
  .dl-bar-text small { display: none; }
  .dl-bar .btn span { display: none; }
  .dl-bar .btn { padding: 11px 14px; }
}

@media (max-width: 980px) {
  .app-showcase, .app-showcase.is-solo { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
  .app-showcase > .loader-image-frame,
  .app-showcase > .dl-card { grid-column: 1; }
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .duo { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .app-hero { padding-top: calc(var(--nav-h) + 34px); }
  .feat-grid { grid-template-columns: 1fr; }
  .install-step { grid-template-columns: 34px minmax(0, 1fr); gap: 14px; }
  .install::before { left: 17px; }
  .install-num { width: 28px; height: 28px; font-size: .82rem; }
  .spec-table th { width: 44%; }
}

.loader-admin-image-preview { display: block; width: min(340px, 100%); aspect-ratio: 16 / 9; object-fit: cover; margin: 4px 0 12px; border: 2px solid rgba(255,255,255,.85); border-radius: 18px; box-shadow: 0 0 0 1px rgba(168,85,247,.7), 0 0 18px rgba(168,85,247,.3); }

.toolbar { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.search-box {
  flex: 1; min-width: 240px;
  display: flex; align-items: center; gap: 11px;
  background: rgba(255,255,255,.8); backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border); border-radius: 15px;
  padding: 0 18px; color: var(--muted);
  transition: border-color .2s, box-shadow .2s;
}
.search-box:focus-within { border-color: var(--blue-400); box-shadow: 0 0 0 4px rgba(168,85,247,.15); }
.search-box input {
  flex: 1; border: none; outline: none; background: none;
  padding: 14px 0; font-family: var(--font-body); font-size: .98rem; color: var(--navy);
}
.sort-box {
  display: flex; align-items: center; gap: 10px; padding: 0 16px;
  background: rgba(255,255,255,.8); border: 1px solid var(--glass-border);
  border-radius: 15px; color: var(--muted);
}
.sort-box select {
  border: none; outline: none; background: none; padding: 14px 0;
  font-family: var(--font-body); font-size: .95rem; font-weight: 500; color: var(--navy); cursor: pointer;
}

.chips-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.chip-filter { cursor: pointer; padding: 8px 16px; font-size: .87rem; transition: all .2s; }
.chip-filter:hover { border-color: var(--blue-400); color: var(--blue-600); }
.chip-filter.active { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 6px 18px -6px rgba(168,85,247,.6); }
.chip-filter.active .icon { color: #fff; }

/* Navigation du catalogue par categorie */
.downloads-hero { padding-bottom: 20px; }
.downloads-browser { padding-top: 22px; }
.downloads-section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.downloads-section-head h2, .category-view-title h2 { font-family: var(--font-display); font-size: clamp(1.45rem, 2.4vw, 2rem); letter-spacing: -.02em; }
.downloads-section-head p { color: var(--muted); font-size: .9rem; }
.category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.category-card {
  min-height: 112px; padding: 22px; display: flex; align-items: center; gap: 16px; text-align: left;
  font-family: var(--font-body); color: var(--navy); cursor: pointer;
  background: var(--glass); backdrop-filter: blur(16px); border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.category-card:hover, .category-card:focus-visible { transform: translateY(-4px); border-color: var(--blue-400); box-shadow: var(--shadow-md); outline: none; }
.category-card-icon, .category-view-icon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 16px; color: #fff; background: var(--grad);
  box-shadow: 0 9px 22px -8px rgba(168,85,247,.65);
}
.category-card-image { flex: 0 0 auto; width: 72px; height: 72px; overflow: hidden; border-radius: 16px; background: var(--grad-soft); }
.category-card-image img { width: 100%; height: 100%; object-fit: cover; }
.category-card.has-image { padding: 14px; }
.admin-categories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; margin-top: 24px; }
.admin-category-card { padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.admin-category-preview { height: 145px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 16px; color: var(--blue-500); background: var(--grad-soft); }
.admin-category-preview img { width: 100%; height: 100%; object-fit: cover; }
.admin-category-form { display: flex; flex-direction: column; gap: 14px; }
.admin-category-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.category-delete { width: 100%; color: #dc2626; }
.category-delete:disabled { opacity: .45; cursor: not-allowed; }
.field-file.compact { padding: 12px; }
.compact-check { font-size: .84rem; }
.category-card-content { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 5px; }
.category-card-content strong { font-family: var(--font-display); font-size: 1.08rem; overflow-wrap: anywhere; }
.category-card-content small { color: var(--muted); font-size: .82rem; }
.category-card-arrow { display: inline-flex; color: var(--blue-500); transition: transform .2s; }
.category-card:hover .category-card-arrow { transform: translateX(4px); }
.category-view-head { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; margin-bottom: 2px; }
.category-back {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; color: var(--blue-600); background: var(--grad-soft);
  border: 1px solid rgba(168,85,247,.3); border-radius: 12px; transition: transform .2s, border-color .2s;
}
.category-back:hover { transform: translateX(-3px); border-color: var(--blue-400); }
.category-view-title { display: flex; align-items: center; gap: 15px; }
.category-view-title span:not(.category-view-icon) { color: var(--muted); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.category-view-icon { width: 48px; height: 48px; border-radius: 14px; }
.downloads-toolbar { margin-top: 24px; margin-bottom: 26px; }
.downloads-items-grid { scroll-margin-top: calc(var(--nav-h) + 18px); }

.empty-state {
  text-align: center; padding: 70px 20px; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.empty-state .icon { color: var(--blue-300); }
.empty-state h3 { font-family: var(--font-display); color: var(--navy); }
.empty-state.small { padding: 34px 16px; font-size: .93rem; }
.hidden { display: none !important; }

/* ---------- Page ressource ---------- */

.item-hero { position: relative; padding: calc(var(--nav-h) + 46px) 0 30px; overflow: hidden; }
.item-hero-bg {
  display: none; /* fond flouté de la pochette (halo coloré) désactivé */
}

.breadcrumb { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--muted); margin-bottom: 26px; flex-wrap: wrap; }
.breadcrumb a { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-weight: 500; }
.breadcrumb a:hover { color: var(--blue-600); }
.breadcrumb span { color: var(--navy); font-weight: 600; }

.item-hero-grid {
  display: grid; grid-template-columns: 1fr 360px;
  grid-template-areas: "head card";
  column-gap: 44px; align-items: start;
}
/* Avec des captures : le titre passe en pleine largeur, puis carrousel + carte alignés par le haut */
.item-hero-grid.has-media {
  grid-template-areas: "head head" "media card";
  row-gap: 30px;
}
.item-hero-head { grid-area: head; }
.item-hero-media { grid-area: media; min-width: 0; }
.item-hero-head .chips-row { margin: 0 0 18px; }

.item-meta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.meta-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px; font-size: .88rem; font-weight: 500;
  background: rgba(255,255,255,.75); border: 1px solid var(--glass-border); color: var(--navy);
}
.meta-pill .icon { color: var(--blue-500); }
.meta-pill-link:hover { border-color: var(--blue-400); }

.download-card { grid-area: card; padding: 24px; position: sticky; top: calc(var(--nav-h) + 20px); display: flex; flex-direction: column; gap: 16px; }
.dl-file { display: flex; align-items: center; gap: 14px; }
.dl-file-icon {
  width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-soft); color: var(--blue-600); border: 1px solid rgba(168,85,247,.3);
}
.dl-file-info { display: flex; flex-direction: column; min-width: 0; }
.dl-file-name { font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-file-meta { font-size: .82rem; color: var(--muted); }

.dl-note { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: .84rem; color: var(--muted); text-align: center; }
.dl-note.ok { color: #15803d; }
.dl-note .icon { flex-shrink: 0; }

.dl-stats { display: flex; justify-content: space-around; padding: 12px 0; border-top: 1px solid rgba(168,85,247,.2); border-bottom: 1px solid rgba(168,85,247,.2); }
.dl-stats span { display: inline-flex; align-items: center; gap: 7px; font-size: .87rem; font-weight: 600; color: var(--navy); }
.dl-stats .icon { color: var(--blue-500); }

.item-grid { display: grid; grid-template-columns: 1fr 340px; gap: 44px; align-items: start; }

.content-block {
  background: var(--glass); backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
  padding: 34px; box-shadow: var(--shadow-sm); margin-bottom: 30px;
}
.block-title { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-size: 1.35rem; margin-bottom: 20px; letter-spacing: -.01em; }
.block-title .icon { color: var(--blue-500); }

.prose p { margin-bottom: 14px; color: #3d4b59; }
.prose p:last-child { margin-bottom: 0; }

.changelog {
  font-family: "Cascadia Code", Consolas, monospace; font-size: .88rem;
  background: rgba(242,251,255,.8); border: 1px solid var(--blue-100);
  border-radius: 14px; padding: 20px; white-space: pre-wrap; color: #3d4b59;
  overflow-x: auto;
}

/* Avis */
.rating-summary {
  display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center;
  padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid rgba(168,85,247,.2);
}
.rating-big { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rating-value { font-family: var(--font-display); font-size: 3.4rem; font-weight: 700; line-height: 1; }
.rating-count { font-size: .85rem; color: var(--muted); }

.rating-bars { display: flex; flex-direction: column; gap: 7px; }
.rating-bar-row { display: flex; align-items: center; gap: 12px; }
.rb-label { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; font-weight: 600; width: 34px; color: var(--muted); }
.rb-label .icon { color: #f59e0b; }
.rb-track { flex: 1; height: 8px; border-radius: 8px; background: var(--blue-100); overflow: hidden; }
.rb-fill { height: 100%; border-radius: 8px; background: linear-gradient(90deg, #fbbf24, #f59e0b); transition: width 1s ease; }
.rb-num { font-size: .82rem; color: var(--muted); width: 26px; text-align: right; }

.review-form { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: var(--radius); background: rgba(242,251,255,.7); border: 1px solid var(--blue-100); margin-bottom: 26px; }
.review-form h3 { font-family: var(--font-display); font-size: 1.05rem; }
.review-form textarea {
  resize: vertical; min-height: 80px; padding: 14px 16px;
  border-radius: 13px; border: 1px solid var(--glass-border);
  font-family: var(--font-body); font-size: .95rem; color: var(--navy);
  background: rgba(255,255,255,.85); outline: none; transition: border-color .2s, box-shadow .2s;
}
.review-form textarea:focus { border-color: var(--blue-400); box-shadow: 0 0 0 4px rgba(168,85,247,.14); }
.review-form .btn { align-self: flex-start; }
.review-open { margin-bottom: 26px; }
.review-form-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.review-form { animation: reviewIn .28s ease; }
@keyframes reviewIn { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .review-form { animation: none; } }

.star-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.star-input input { position: absolute; opacity: 0; pointer-events: none; }
.star-input label { cursor: pointer; color: #cfe0f4; transition: color .15s, transform .15s; line-height: 0; }
.star-input label:hover { transform: scale(1.15); }
.star-input label:hover, .star-input label:hover ~ label,
.star-input input:checked ~ label { color: #f59e0b; }

.review-login {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 20px 24px; border-radius: var(--radius);
  background: rgba(242,251,255,.7); border: 1px dashed var(--blue-300);
  color: var(--muted); font-size: .94rem; margin-bottom: 26px;
}
.review-login .btn { margin-left: auto; }

.reviews-list { display: flex; flex-direction: column; gap: 18px; }
.review { display: flex; gap: 14px; padding: 18px; border-radius: var(--radius); background: rgba(255,255,255,.6); border: 1px solid rgba(168,85,247,.2); }
.review-body { flex: 1; min-width: 0; }
.review-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.review-author { font-weight: 700; font-size: .95rem; color: var(--navy); }
.review-date { font-size: .8rem; color: var(--muted); }
.review-delete { margin-left: auto; }
.review-delete .icon-btn { width: 30px; height: 30px; border-radius: 9px; }
.review-text { margin-top: 8px; font-size: .93rem; color: #3d4b59; overflow-wrap: anywhere; }

/* Sidebar ressource */
.side-block {
  background: var(--glass); backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
  padding: 22px; box-shadow: var(--shadow-sm); margin-bottom: 24px;
}
.side-title { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 1rem; margin-bottom: 16px; }
.side-title .icon { color: var(--blue-500); }

.mini-card {
  display: flex; align-items: center; gap: 12px; padding: 10px;
  border-radius: 14px; transition: background .2s; color: var(--navy);
}
.mini-card:hover { background: rgba(168,85,247,.1); }
.mini-card img, .mini-card .mini-cover, .history-row img, .history-row .mini-cover, .admin-thumb {
  width: 52px; height: 40px; border-radius: 10px; object-fit: cover; flex-shrink: 0;
}
.mini-cover {
  display: flex; align-items: center; justify-content: center;
  background: var(--grad); color: #fff; font-family: var(--font-display); font-weight: 700;
}
.mini-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mini-name { font-weight: 600; font-size: .92rem; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-name:hover { color: var(--blue-600); }
.mini-meta { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); }
.mini-card > .icon { color: var(--blue-300); }

/* ---------- Profil ---------- */

.profile-hero { padding-bottom: 10px; }
.profile-card { overflow: hidden; }
.profile-banner { height: 120px; background: var(--grad); position: relative; }
.profile-banner::after {
  content: ""; position: absolute; inset: 0; opacity: .2;
  background-image:
    linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
  background-size: 36px 36px;
}
.profile-main { display: flex; align-items: flex-end; gap: 22px; padding: 0 34px; margin-top: -44px; flex-wrap: wrap; position: relative; }
.profile-id { flex: 1; min-width: 200px; padding-bottom: 4px; }
.profile-id h1 { font-family: var(--font-display); font-size: 1.7rem; letter-spacing: -.02em; }
.profile-username { color: var(--muted); font-size: .95rem; display: block; margin: 2px 0 10px; }
.profile-main .btn { margin-bottom: 8px; }
.profile-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(168,85,247,.2); margin-top: 24px;
}
.pstat { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 20px; }
.pstat .icon { color: var(--blue-500); margin-bottom: 4px; }
.pstat strong { font-family: var(--font-display); font-size: 1.1rem; }
.pstat span { font-size: .82rem; color: var(--muted); }

.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }

.history-list { display: flex; flex-direction: column; gap: 10px; }
.history-row { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.6); border: 1px solid rgba(168,85,247,.2); }

/* ---------- Admin ---------- */

.admin-table { padding: 12px; }
.admin-row {
  display: flex; align-items: center; gap: 18px;
  padding: 14px 16px; border-radius: 16px; transition: background .2s;
}
.admin-row:hover { background: rgba(168,85,247,.07); }
.admin-row + .admin-row { border-top: 1px solid rgba(168,85,247,.15); }
.admin-thumb { width: 72px; height: 48px; border-radius: 12px; }
.admin-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.admin-name { font-weight: 700; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-meta { font-size: .84rem; color: var(--muted); }
.admin-nums { display: flex; gap: 18px; }
.admin-nums span { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 600; color: var(--muted); }
.admin-nums .icon { color: var(--blue-500); }
.admin-actions { display: flex; gap: 8px; align-items: center; }
.admin-help { display: flex; align-items: center; gap: 10px; margin-top: 22px; color: var(--muted); font-size: .92rem; }
.admin-help .icon { color: var(--blue-500); flex-shrink: 0; }

/* Formulaire admin */
.admin-form { padding: 36px; display: flex; flex-direction: column; gap: 22px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
/* Reseaux sociaux : beaucoup de champs courts, on serre la grille. */
.social-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px 22px; }
.field { display: flex; flex-direction: column; gap: 9px; }
.field-label { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 600; color: var(--navy); }
.field-label .icon { color: var(--blue-500); }
.field input[type="text"], .field input[type="url"], .field input[type="number"], .field input[type="search"],
.field-input, .version-link-form input, .field textarea, .ticket-search input {
  padding: 13px 16px; border-radius: 14px; border: 1px solid var(--glass-border);
  background: var(--blue-50); font-family: var(--font-body); font-size: .95rem;
  color: var(--navy); outline: none; transition: border-color .2s, box-shadow .2s, background .2s;
}
.field input[type="text"]:focus, .field input[type="url"]:focus, .field input[type="number"]:focus, .field input[type="search"]:focus,
.field-input:focus, .version-link-form input:focus, .field textarea:focus, .ticket-search input:focus {
  border-color: var(--blue-400); box-shadow: 0 0 0 4px rgba(168,85,247,.2);
}
.field input:disabled { opacity: .7; cursor: not-allowed; }
.field textarea { resize: vertical; }
.input-with-btn { display: flex; gap: 10px; align-items: stretch; }
.input-with-btn input { flex: 1 1 auto; min-width: 0; }
.field-check { flex-direction: row; align-items: center; gap: 12px; padding-top: 10px; cursor: pointer; user-select: none; }
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 6px;
  background: rgba(26, 17, 43, 0.95);
  border: 1.5px solid rgba(168, 85, 247, 0.45);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.2s ease;
  vertical-align: middle;
  outline: none;
  margin: 0;
}
input[type="checkbox"]:hover {
  border-color: #c084fc;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.35);
}
input[type="checkbox"]:checked {
  background: linear-gradient(135deg, #a855f7, #6366f1);
  border-color: #c084fc;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.5);
}
input[type="checkbox"]:checked::after {
  content: '';
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-bottom: 2px;
  display: block;
}
.custom-switch-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.custom-switch-toggle input {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  pointer-events: none;
}
.switch-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: rgba(35, 24, 56, 0.9);
  border: 1.5px solid rgba(168, 85, 247, 0.4);
  transition: .25s ease;
  border-radius: 24px;
}
.switch-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 2.5px;
  background-color: #d8b4fe;
  transition: .25s ease;
  border-radius: 50%;
}
.custom-switch-toggle input:checked + .switch-slider {
  background: linear-gradient(135deg, #a855f7, #6366f1);
  border-color: #c084fc;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.5);
}
.custom-switch-toggle input:checked + .switch-slider:before {
  transform: translateX(20px);
  background-color: #ffffff;
}
.field input[type="file"] {
  padding: 12px; border-radius: 13px; border: 1.5px dashed var(--blue-300);
  background: rgba(242,251,255,.6); font-size: .88rem; color: var(--muted); cursor: pointer;
  transition: border-color .2s, background .2s;
}
.field input[type="file"]:hover { border-color: var(--blue-500); background: rgba(224,244,253,.8); }
.field input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 8px 14px; border: none; border-radius: 10px;
  background: var(--grad); color: #fff; font-weight: 600; font-family: var(--font-body);
  cursor: pointer; font-size: .85rem;
}
.field-hint { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--muted); }
.field code {
  padding: 2px 6px; border-radius: 7px;
  background: rgba(168,85,247,.1); color: var(--blue-700); font-size: .78rem;
}
.field-separator {
  display: inline-flex; align-items: center; gap: 6px; font-size: .8rem;
  color: var(--muted); margin: -2px 0;
}
.field-download .field-select { width: 100%; }
/* Source d'une version : le selecteur montre un champ (lien ou fichier) a la fois */
.source-pane { display: flex; flex-direction: column; gap: 9px; }
.source-pane[hidden] { display: none; }
.source-pane input { width: 100%; }
.form-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 6px; }

/* ---------- Setup ---------- */

.setup-checks { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.check-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: 999px; font-size: .85rem; font-weight: 600;
  background: rgba(220,38,38,.07); border: 1px solid rgba(220,38,38,.25); color: #b91c1c;
}
.check-pill.ok { background: rgba(22,163,74,.08); border-color: rgba(22,163,74,.3); color: #15803d; }

.setup-steps { display: flex; flex-direction: column; gap: 22px; }
.setup-step { display: flex; gap: 22px; padding: 28px; }
.setup-num {
  width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  box-shadow: 0 8px 20px -6px rgba(168,85,247,.5);
}
.setup-body { flex: 1; min-width: 0; }
.setup-body h3 { font-family: var(--font-display); margin-bottom: 8px; }
.setup-body p { color: #3d4b59; font-size: .95rem; margin-bottom: 10px; }
.setup-body p:last-child { margin-bottom: 0; }
.setup-body a { font-weight: 600; }

.code-line {
  display: flex; align-items: center; gap: 12px;
  background: #161616; color: #c4c4c4;
  border-radius: 13px; padding: 14px 18px; margin: 10px 0 14px;
  overflow-x: auto;
}
.code-line code { flex: 1; white-space: nowrap; line-height: 1.7; }
.code-line .icon-btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); color: #dce7f0; }
.code-line .icon-btn:hover { color: #fff; border-color: rgba(255,255,255,.4); }

/* ---------- Erreur ---------- */

.error-section { min-height: 80vh; display: flex; align-items: center; padding-top: var(--nav-h); }
.error-box { text-align: center; max-width: 560px; margin: 0 auto; }
.error-code { font-family: var(--font-display); font-size: clamp(6rem, 16vw, 10rem); font-weight: 700; line-height: 1; letter-spacing: -.04em; }
.error-box h1 { font-family: var(--font-display); font-size: 1.8rem; margin: 10px 0 12px; }
.error-box p { color: var(--muted); margin-bottom: 30px; }
.error-box .hero-cta { justify-content: center; margin: 0; }

/* ---------- Footer ---------- */

.footer { position: relative; z-index: 1; margin-top: 40px; background: rgba(255,255,255,.6); backdrop-filter: blur(16px); border-top: 1px solid var(--glass-border); }
.footer-inner {
  max-width: 1240px; margin: 0 auto; padding: 56px 28px 40px;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px;
}
.footer-tagline { color: var(--muted); font-size: .92rem; margin-top: 16px; max-width: 320px; line-height: 1.6; }
.footer-col h4 { font-family: var(--font-display); font-size: .95rem; margin-bottom: 16px; color: var(--navy); font-weight: 600; }
.footer-col a { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: .92rem; padding: 6px 0; transition: color .2s, transform .2s; }
.footer-col a:hover { color: #f3e8ff; transform: translateX(3px); }
.footer-col .icon { color: var(--blue-400); transition: color .2s; }
.footer-col a:hover .icon { color: var(--blue-300); }
.footer-bar {
  max-width: 1240px; margin: 0 auto; padding: 20px 28px;
  border-top: 1px solid rgba(168,85,247,.2);
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  color: var(--muted); font-size: .86rem;
}
/* Icones des reseaux sociaux : carres discrets qui s'allument a l'accent. */
.footer-socials { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.footer-socials a {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); border: 1px solid var(--glass-border); border-radius: 11px;
  background: rgba(255,255,255,.45);
  transition: color .2s, border-color .2s, background .2s, transform .2s;
}
.footer-socials a:hover {
  color: var(--blue-600); border-color: var(--blue-400);
  background: var(--grad-soft); transform: translateY(-2px);
}
.footer-socials a:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; }

/* ---------- Animations d'apparition ---------- */

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 70px; }
  .hero-visual { max-width: 520px; margin: 0 auto; width: 100%; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: 1fr; }
  .step-link { transform: rotate(90deg); }
  .item-hero-grid, .item-grid { grid-template-columns: 1fr; }
  .item-hero-grid, .item-hero-grid.has-media { grid-template-areas: "head" "media" "card"; row-gap: 24px; }
  .download-card { position: static; }
  .profile-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .nav-links {
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: rgba(255,255,255,.96); backdrop-filter: blur(20px);
    padding: 16px 20px 22px; border-bottom: 1px solid var(--glass-border);
    box-shadow: var(--shadow-md);
    transform: translateY(-130%); transition: transform .3s ease;
  }
  .nav-links.open { transform: translateY(0); }
  .nav-link { padding: 13px 16px; }
  .burger { display: inline-flex; }
  .user-name { display: none; }
  .features-grid, .form-grid { grid-template-columns: 1fr; }
  .field-check { padding-top: 0; }
  .rating-summary { grid-template-columns: 1fr; gap: 24px; }
  .admin-nums { display: none; }
  .section { padding: 60px 0; }
  .cta-panel { padding: 50px 24px; }
  .setup-step { flex-direction: column; gap: 14px; }
  .glass-chip { display: none; }
  .orbit-ring { display: none; }
}

@media (max-width: 560px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat-card { padding: 18px 12px; }
  .stat-num { font-size: 1.4rem; }
  .container, .nav-inner { padding-left: 18px; padding-right: 18px; }
  .hero-cta .btn { width: 100%; }
  .footer-inner { grid-template-columns: 1fr; gap: 26px; }
  .admin-row { flex-wrap: wrap; }
  .review-login .btn { margin-left: 0; }
  .downloads-section-head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .category-grid { grid-template-columns: 1fr; gap: 13px; }
  .category-card { min-height: 94px; padding: 17px; }
  .downloads-toolbar .sort-box { width: 100%; }
  .downloads-toolbar .sort-box select { flex: 1; }
}

/* ==========================================================================
   V2 — Nouveaux composants
   ========================================================================== */

/* ---------- Outils de la nav (recherche, theme, cloche) ---------- */

.nav-tool { position: relative; width: 38px; height: 38px; border-radius: 12px; }


/* Annule les styles pilule de .user-menu summary : la cloche est un bouton outil comme les autres */
.bell-menu summary {
  list-style: none;
  padding: 0; gap: 0; justify-content: center;
  border-radius: 12px; background: rgba(255,255,255,.75);
}
.bell-menu summary::-webkit-details-marker { display: none; }
.bell-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  background: linear-gradient(120deg, #f43f5e, #e11d48); color: #fff;
  font-size: .66rem; font-weight: 700; line-height: 17px; text-align: center;
  box-shadow: 0 3px 8px -2px rgba(225,29,72,.6);
}

.menu-notifications { min-width: 330px; max-width: 92vw; max-height: 420px; overflow-y: auto; }
.menu-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px 10px; font-family: var(--font-display); font-weight: 600; font-size: .92rem;
  border-bottom: 1px solid var(--blue-100); margin-bottom: 6px;
}
.link-btn { background: none; border: none; color: var(--blue-600); font-family: var(--font-body); font-size: .8rem; font-weight: 600; cursor: pointer; padding: 0; }
.link-btn:hover { text-decoration: underline; }
.menu-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 16px; color: var(--muted); font-size: .88rem; text-align: center; }
.menu-empty .icon { color: var(--blue-300); }

.notif { display: flex; gap: 11px; padding: 10px 12px; border-radius: 12px; align-items: flex-start; }
.notif:hover { background: rgba(168,85,247,.1); }
.notif.unread { background: rgba(168,85,247,.08); }
.notif.unread .notif-text { font-weight: 600; }
.notif-icon {
  width: 30px; height: 30px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad-soft); color: var(--blue-600); border: 1px solid rgba(168,85,247,.3);
}
.notif-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-text { font-size: .86rem; color: var(--navy); line-height: 1.4; }
.notif-date { font-size: .75rem; color: var(--muted); }

.banned-banner {
  position: sticky; top: var(--nav-h); z-index: 90;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 20px; font-size: .9rem; font-weight: 500;
  background: rgba(220,38,38,.09); border-bottom: 1px solid rgba(220,38,38,.25); color: #b91c1c;
  backdrop-filter: blur(10px);
}
.banned-banner a { color: #b91c1c; text-decoration: underline; }

/* ---------- Palette de recherche (Ctrl+K) ---------- */

.palette-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(25,25,25,.4); backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 20px 20px;
  animation: fadeIn .18s ease;
}
@keyframes fadeIn { from { opacity: 0; } }
.palette {
  width: 100%; max-width: 640px;
  background: rgba(255,255,255,.97); backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border); border-radius: 20px;
  box-shadow: var(--shadow-lg); overflow: hidden;
  animation: paletteIn .22s cubic-bezier(.2,.9,.3,1.15);
}
@keyframes paletteIn { from { opacity: 0; transform: translateY(-14px) scale(.98); } }
.palette-input { display: flex; align-items: center; gap: 13px; padding: 18px 20px; border-bottom: 1px solid var(--blue-100); color: var(--muted); }
.palette-input input { flex: 1; border: none; outline: none; background: none; font-family: var(--font-body); font-size: 1.05rem; color: var(--navy); }
.palette-kbd {
  font-size: .72rem; font-weight: 600; color: var(--muted);
  border: 1px solid var(--glass-border); border-radius: 7px; padding: 3px 8px;
  background: rgba(242,251,255,.8);
}
.palette-results { max-height: 380px; overflow-y: auto; padding: 10px; }
.palette-hint { display: flex; align-items: center; gap: 10px; padding: 14px 12px; color: var(--muted); font-size: .88rem; }
.palette-hint .icon { color: var(--blue-400); }
.palette-empty { padding: 30px 16px; text-align: center; color: var(--muted); font-size: .92rem; }
.palette-item {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 13px; border-radius: 13px; cursor: pointer; color: var(--navy);
}
.palette-item:hover, .palette-item.active { background: rgba(168,85,247,.12); }
.palette-item-icon {
  width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad-soft); color: var(--blue-600); border: 1px solid rgba(168,85,247,.3);
}
.palette-item-body { display: flex; flex-direction: column; min-width: 0; }
.palette-item-label { font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette-item-sub { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Chips d'etat ---------- */

.chip-state { position: absolute; bottom: 12px; left: 12px; backdrop-filter: blur(8px); }
.chip-hot { background: linear-gradient(120deg, #fb923c, #ef4444); color: #fff; border-color: transparent; }
.chip-hot .icon { color: #fff; }
.chip-new { background: var(--grad); color: #fff; border-color: transparent; }
.chip-new .icon { color: #fff; }
.chip-guild { background: rgba(88,101,242,.14); color: #3b45b5; border-color: rgba(88,101,242,.4); }
.chip-guild .icon { color: #525252; }
.chip-danger { background: rgba(220,38,38,.1); color: #b91c1c; border-color: rgba(220,38,38,.3); }
.chip-danger .icon { color: #dc2626; }
.chip-verified { background: rgba(22,163,74,.09); color: #15803d; border-color: rgba(22,163,74,.3); font-size: .7rem; padding: 3px 9px; cursor: help; }
.chip-verified .icon { color: #16a34a; }
[data-theme="dark"] .chip-verified { background: rgba(22,163,74,.16); color: #86efac; border-color: rgba(22,163,74,.35); }

/* ---------- Favoris ---------- */

.fav-form { margin-left: auto; }
.fav-btn .fav-on { display: none; line-height: 0; }
.fav-btn .fav-off { line-height: 0; }
.fav-btn.active { color: #e11d48; border-color: rgba(225,29,72,.4); background: rgba(225,29,72,.07); }
.fav-btn.active .fav-on { display: inline-flex; }
.fav-btn.active .fav-off { display: none; }
.fav-btn:hover { color: #e11d48; border-color: rgba(225,29,72,.4); }

/* ---------- Galerie + visionneuse ---------- */

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gallery-thumb {
  position: relative; border: 1px solid var(--glass-border); border-radius: 14px;
  overflow: hidden; cursor: zoom-in; padding: 0; background: var(--blue-100);
  aspect-ratio: 16 / 9;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.gallery-thumb:hover img { transform: scale(1.06); }
.gallery-zoom {
  position: absolute; right: 10px; bottom: 10px;
  width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.85); color: var(--blue-600);
  opacity: 0; transition: opacity .2s;
}
.gallery-thumb:hover .gallery-zoom { opacity: 1; }

.lightbox {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(7,15,31,.88); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; padding: 40px;
  animation: fadeIn .2s ease; cursor: zoom-out;
}
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 16px; box-shadow: 0 40px 120px -20px rgba(0,0,0,.7); }
.lightbox-close {
  position: absolute; top: 22px; right: 22px;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.12); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-close:hover { background: rgba(255,255,255,.22); }

/* ---------- Versions ---------- */

.versions-list { display: flex; flex-direction: column; gap: 14px; }
.version-row { border: 1px solid rgba(168,85,247,.25); border-radius: 16px; padding: 16px 18px; background: rgba(255,255,255,.5); }
.version-row.latest { border-color: var(--blue-300); background: rgba(224,244,253,.45); }
.version-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.version-num { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; display: inline-flex; align-items: center; gap: 10px; }
.version-meta { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--muted); flex: 1; flex-wrap: wrap; }
.version-meta .icon { color: var(--blue-400); }
.version-row .changelog { margin-top: 12px; padding: 14px 16px; font-size: .84rem; }
/* Correction du lien d'une version deja publiee */
.version-link-form { display: flex; align-items: flex-end; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.version-link-form .field-download { flex: 1; min-width: 240px; }
.version-link-form input { flex: 1; min-width: 240px; }
.version-link-form .btn { flex: none; padding: 9px 14px; font-size: .85rem; }
.version-add { margin-top: 22px; padding: 22px; border-radius: var(--radius); background: rgba(242,251,255,.7); border: 1px dashed var(--blue-300); box-shadow: none; }

/* ---------- Reponses de l'equipe ---------- */

.review-reply {
  margin-top: 12px; padding: 13px 16px; border-radius: 12px;
  background: rgba(224,244,253,.55); border-left: 3px solid var(--blue-400);
}
.review-reply p { font-size: .9rem; color: #3d4b59; margin-top: 5px; }
.reply-head { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 700; color: var(--blue-600); }
.reply-head .icon { color: var(--blue-500); }
.review-reply .link-btn { margin-top: 8px; font-size: .78rem; color: var(--muted); }

.reply-form-wrap { margin-top: 10px; }
.reply-form-wrap summary {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: .84rem; font-weight: 600; color: var(--blue-600); list-style: none;
}
.reply-form-wrap summary::-webkit-details-marker { display: none; }
.reply-form { display: flex; gap: 10px; margin-top: 10px; align-items: flex-end; flex-wrap: wrap; }
.reply-form textarea {
  flex: 1; min-width: 220px; padding: 11px 14px; border-radius: 12px;
  border: 1px solid var(--glass-border); background: rgba(255,255,255,.85);
  font-family: var(--font-body); font-size: .9rem; color: var(--navy); outline: none; resize: vertical;
}
.reply-form textarea:focus { border-color: var(--blue-400); box-shadow: 0 0 0 4px rgba(168,85,247,.14); }

/* ---------- Badges de profil ---------- */

.badges-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.badge-pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px 9px 9px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--glass-border);
  font-weight: 600; font-size: .88rem; box-shadow: var(--shadow-sm);
  cursor: help; transition: transform .2s, box-shadow .2s;
}
.badge-pill:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.badge-icon {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad); color: #fff;
}
.profile-stats { grid-template-columns: repeat(4, 1fr); }


.prose-lg p { font-size: 1.02rem; line-height: 1.75; }

/* ---------- FAQ ---------- */

.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item { border-radius: var(--radius-lg); overflow: hidden; }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; cursor: pointer; list-style: none; font-weight: 600;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q { display: inline-flex; align-items: center; gap: 12px; font-size: 1rem; }
.faq-q .icon { color: var(--blue-500); flex-shrink: 0; }
.faq-item .chev { color: var(--muted); transition: transform .25s; flex-shrink: 0; }
.faq-item[open] .chev { transform: rotate(180deg); }
.faq-a { padding: 0 24px 20px 60px; }
.faq-a p { color: #3d4b59; font-size: .95rem; }
.faq-item[open] summary { color: var(--blue-600); }

/* ---------- Contact ---------- */

.contact-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 26px; align-items: start; }
.contact-as {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 13px;
  background: rgba(242,251,255,.7); border: 1px solid var(--blue-100);
  font-size: .93rem; color: var(--muted);
}
.side-text { color: var(--muted); font-size: .9rem; margin-bottom: 14px; }
.side-discord .side-text { margin-top: -4px; }

/* ---------- Shell admin ---------- */

.admin-app-shell {
  max-width: 1440px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 18px) 22px 40px;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: start;
}
.admin-sidebar {
  position: sticky;
  top: calc(var(--nav-h) + 18px);
  height: calc(100svh - var(--nav-h) - 42px);
  display: flex;
  flex-direction: column;
  padding: 14px 2px 14px 14px;
  border: 1px solid rgba(168,85,247,.24);
  border-right: 0;
  border-radius: 18px 0 0 18px;
  background: rgba(255,255,255,.76);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-sm);
}
.admin-workspace-clean {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 14px;
  margin-right: 22px;
  border-bottom: 1px solid rgba(168,85,247,.16);
}
.admin-workspace {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px;
  border-radius: 10px;
  color: var(--navy);
  border: 1px solid rgba(168,85,247,.18);
  background: linear-gradient(120deg, rgba(242,251,255,.95), rgba(255,255,255,.7));
}
.admin-workspace:hover { border-color: var(--blue-300); box-shadow: var(--shadow-sm); }
.admin-workspace-mark {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #fff;
  background: var(--grad);
  box-shadow: 0 10px 20px -10px rgba(168,85,247,.65);
  overflow: hidden;
}
.admin-workspace-mark img { width: 100%; height: 100%; object-fit: cover; }
.admin-workspace-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.admin-workspace-copy strong {
  font-family: var(--font-display);
  font-size: .98rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-workspace-copy small,
.admin-operator small {
  color: var(--muted);
  font-size: .74rem;
  font-weight: 600;
}
.admin-workspace-caret { color: var(--muted); }
.admin-side-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 0;
  margin-right: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(168, 85, 247, 0.45) transparent;
}
.admin-side-nav::-webkit-scrollbar {
  width: 5px;
}
.admin-side-nav::-webkit-scrollbar-track {
  background: transparent;
}
.admin-side-nav::-webkit-scrollbar-thumb {
  background: rgba(168, 85, 247, 0.4);
  border-radius: 99px;
}
.admin-side-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(168, 85, 247, 0.75);
}
.admin-side-group {
  padding: 4px 0 8px;
  margin-right: 22px;
}
.admin-side-label {
  display: block;
  padding: 6px 10px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.admin-side-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-side-link {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 650;
  transition: color .2s, background .2s, border-color .2s, transform .2s;
}
.admin-side-link-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-side-link-main span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-side-link .icon { color: rgba(168,85,247,.9); }
.admin-side-link:hover {
  color: var(--blue-600);
  background: rgba(168,85,247,.08);
  border-color: rgba(168,85,247,.16);
}
.admin-side-link:hover .icon { color: var(--blue-500); }
.admin-side-link.active {
  color: var(--navy);
  background: rgba(168,85,247,.13);
  border-color: rgba(168,85,247,.26);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}
.admin-side-link.active .icon { color: var(--blue-600); }
.admin-side-arrow {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .2s, transform .2s;
}
.admin-side-link:hover .admin-side-arrow,
.admin-side-link.active .admin-side-arrow {
  opacity: 1;
  transform: translateX(0);
}
.admin-side-link.danger:hover {
  color: #dc2626;
  background: rgba(220,38,38,.08);
  border-color: rgba(220,38,38,.18);
}
.admin-side-link.danger:hover .icon { color: #dc2626; }
.admin-sidebar-bottom {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 12px;
  margin-right: 22px;
  border-top: 1px solid rgba(168,85,247,.16);
}
.admin-operator {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(168,85,247,.16);
  background: rgba(242,251,255,.65);
}
.admin-operator span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.admin-operator strong {
  color: var(--navy);
  font-size: .88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-main-panel {
  min-width: 0;
  min-height: calc(100svh - var(--nav-h) - 42px);
  border: 1px solid rgba(168,85,247,.24);
  border-radius: 0 18px 18px 0;
  background: rgba(255,255,255,.54);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.admin-panel-topbar {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(168,85,247,.16);
  background: rgba(255,255,255,.76);
}
.admin-top-crumb {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 600;
}
.admin-top-crumb strong {
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-search-pill {
  min-width: 250px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 10px 0 14px;
  border: 1.5px solid rgba(168, 85, 247, 0.35);
  border-radius: 12px;
  background: rgba(18, 12, 32, 0.85);
  color: #cbd5e1;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 15px -5px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  outline: none;
}
.admin-search-pill:hover {
  border-color: rgba(192, 132, 252, 0.85);
  background: rgba(28, 18, 48, 0.95);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 0 20px -2px rgba(168, 85, 247, 0.45);
}
.admin-search-pill .icon {
  color: #c084fc;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.admin-search-pill:hover .icon {
  transform: scale(1.1);
}
.admin-search-pill span {
  flex: 1;
  text-align: left;
  color: #e2e8f0;
  letter-spacing: -0.01em;
}
.admin-search-pill kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(35, 24, 56, 0.9);
  border: 1px solid rgba(168, 85, 247, 0.4);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  color: #d8b4fe;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
  line-height: 1;
}
.admin-panel-scroll {
  max-height: calc(100svh - var(--nav-h) - 100px);
  overflow: auto;
  padding: 26px;
  scrollbar-gutter: stable;
}
.admin-page-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 24px;
}
.admin-page-heading .section-kicker { margin-bottom: 4px; }
.admin-page-heading h1 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.4vw, 2.35rem);
  line-height: 1.1;
  letter-spacing: 0;
}
.admin-panel-scroll .section,
.admin-panel-scroll .section-tight {
  padding: 0;
}
.admin-panel-scroll .section > .container {
  max-width: none;
  padding: 0;
}
.admin-panel-scroll .section > .container.container-narrow {
  max-width: 960px;
}
.admin-panel-scroll .stats-grid-4 { margin-top: 0; }
.admin-panel-scroll .section-head { margin-bottom: 24px; }
.admin-panel-scroll .content-block,
.admin-panel-scroll .glass-panel {
  border-radius: 16px;
}

/* ---------- Dashboard ---------- */

.chart-card { padding: 28px; margin: 30px 0; }
.dl-chart { width: 100%; height: 220px; }
.dl-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; margin-bottom: 30px; }

.msg-row { padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.55); border: 1px solid rgba(168,85,247,.2); margin-bottom: 10px; }
.msg-row.unread { border-left: 3px solid var(--blue-400); background: rgba(224,244,253,.45); }
.msg-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .92rem; }
.msg-subject { display: inline-flex; align-items: center; gap: 7px; color: var(--blue-600); font-weight: 600; font-size: .88rem; }
.msg-body { color: #3d4b59; font-size: .92rem; margin-top: 8px; overflow-wrap: anywhere; }

.messages-list { display: flex; flex-direction: column; gap: 16px; }
.msg-card { padding: 22px; }
.msg-card.unread { border-left: 4px solid var(--blue-400); }
.msg-card .msg-head { margin-bottom: 4px; }
.msg-card .msg-subject { margin: 6px 0; }
.msg-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.btn-danger-ghost:hover { color: #d33; border-color: rgba(221,51,51,.4); }

/* ---------- Galerie admin ---------- */

.gallery-admin { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gallery-admin-thumb { position: relative; border-radius: 13px; overflow: hidden; border: 1px solid var(--glass-border); aspect-ratio: 16 / 9; background: var(--blue-100); }
.gallery-admin-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-admin-thumb form { position: absolute; top: 8px; right: 8px; }
.gallery-admin-thumb .icon-btn { width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,.9); }

/* ---------- Responsive v2 ---------- */

@media (max-width: 1120px) {
  .admin-app-shell {
    grid-template-columns: 230px minmax(0, 1fr);
    padding-left: 16px;
    padding-right: 16px;
  }
  .admin-search-pill { min-width: 190px; }
}

@media (max-width: 900px) {
  .admin-app-shell {
    grid-template-columns: 1fr;
    padding: calc(var(--nav-h) + 12px) 14px 30px;
  }
  .admin-sidebar {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    border-right: 1px solid rgba(168,85,247,.24);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
  }
  .admin-side-nav {
    overflow: visible;
    padding-bottom: 6px;
  }
  .admin-side-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-sidebar-bottom {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-operator { grid-column: 1 / -1; }
  .admin-main-panel {
    min-height: 0;
    border-radius: 0 0 18px 18px;
  }
  .admin-panel-scroll {
    max-height: none;
    overflow: visible;
    padding: 22px;
  }
}

@media (max-width: 640px) {
  .admin-panel-topbar {
    align-items: stretch;
    flex-direction: column;
    padding: 12px;
  }
  .admin-top-actions,
  .admin-search-pill {
    width: 100%;
  }
  .admin-side-links,
  .admin-sidebar-bottom {
    grid-template-columns: 1fr;
  }
  .admin-panel-scroll { padding: 18px; }
  .admin-page-heading h1 { font-size: 1.65rem; }
}

/* ---------- Cartes de categories publiques, style affiche ---------- */
.downloads-section-head { max-width: 980px; align-items: flex-end; }
.downloads-section-head > div { display: flex; flex-direction: column; align-items: flex-start; }
.downloads-section-head .section-kicker { margin-bottom: 7px; font-size: .66rem; }
.downloads-section-head h2 { font-size: clamp(1.65rem, 3vw, 2.25rem); line-height: 1.08; }
.category-heading-sub { margin-top: 8px; color: var(--muted); font-size: .85rem; }
.category-grid { max-width: 980px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.category-card,
.category-card.has-image {
  position: relative; isolation: isolate; aspect-ratio: 1 / 1; min-height: 0; padding: 0;
  display: block; overflow: hidden; text-align: left; cursor: pointer; color: #fff;
  border: 1px solid rgba(168,85,247,.34); border-radius: 13px;
  background: #161616; box-shadow: none; transform: none;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.category-card:hover,
.category-card:focus-visible {
  transform: translateY(-4px); outline: none; border-color: rgba(180,180,180,.75);
  box-shadow: 0 18px 45px -20px rgba(168,85,247,.55);
}
.category-card-visual { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.8,.2,1), filter .3s; }
.category-card:hover .category-card-visual { transform: scale(1.045); filter: saturate(1.08); }
.category-card-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,8,8,.02) 38%, rgba(9,9,9,.3) 64%, rgba(8,8,8,.92) 100%); }
.category-card-content { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 13px; display: flex; flex-direction: column; gap: 1px; color: #fff; }
.category-card-content strong { color: #fff; font-family: var(--font-display); font-size: .94rem; line-height: 1.1; text-shadow: 0 2px 8px rgba(0,0,0,.75); }
.category-card-content small { color: rgba(255,255,255,.72); font-size: .68rem; font-weight: 600; }
.category-card-fallback { position: absolute; inset: 0; z-index: -2; display: flex; align-items: center; justify-content: center; overflow: hidden; color: rgba(200,200,200,.68); background: radial-gradient(circle at 70% 18%, rgba(168,85,247,.38), transparent 42%), linear-gradient(145deg, #17293c, #08111c 72%); }
.category-card-fallback::before, .category-card-fallback::after { content: ''; position: absolute; width: 75%; height: 150%; border: 1px solid rgba(200,200,200,.14); transform: rotate(-18deg); }
.category-card-fallback::after { left: 58%; background: rgba(168,85,247,.07); }
.category-card-fallback > span { position: absolute; right: 12px; bottom: 26px; color: rgba(255,255,255,.06); font-family: var(--font-display); font-size: 8rem; font-weight: 800; }
@media (max-width: 800px) {
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .downloads-section-head > p { display: none; }
  .category-grid { grid-template-columns: 1fr; gap: 14px; }
  .category-card, .category-card.has-image { aspect-ratio: 4 / 3; }
}

/* ---------- Choix des couleurs d'accent (/admin/settings) ---------- */
.accent-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.accent-pick { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.accent-pick input[type="color"] { width: 52px; height: 40px; padding: 3px; border: 1px solid var(--glass-border); border-radius: 11px; background: var(--glass); cursor: pointer; }
.accent-pick small { font-size: .72rem; color: var(--muted); }
.accent-preview {
  flex: 1; min-width: 150px; padding: 11px 16px; border-radius: 12px;
  background: var(--grad); color: #fff; font-size: .85rem; font-weight: 700;
  text-align: center; text-shadow: 0 1px 6px rgba(0,0,0,.35);
}
.accent-presets { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.accent-preset {
  padding: 7px 13px; border: 1px solid var(--glass-border); border-radius: 99px;
  color: #fff; font-family: var(--font-body); font-size: .74rem; font-weight: 700;
  cursor: pointer; text-shadow: 0 1px 5px rgba(0,0,0,.4); transition: transform .18s, box-shadow .18s;
}
.accent-preset:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }

@media (max-width: 420px) {
  .admin-search-pill span { display: none; }
  .admin-search-pill kbd { margin-left: auto; }
}

@media (max-width: 1024px) {
  .trend-row { grid-template-columns: 1fr; }
  .dash-cols { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-admin { grid-template-columns: repeat(2, 1fr); }
  .profile-stats { grid-template-columns: repeat(2, 1fr); }
  .faq-a { padding-left: 24px; }
  .menu-notifications { position: fixed; left: 12px; right: 12px; top: calc(var(--nav-h) + 8px); min-width: 0; }
}

/* ---------- Parametres du site (admin) ---------- */

.settings-form { display: flex; flex-direction: column; }
.form-grid-3 { grid-template-columns: repeat(3, 1fr); }

.field-select {
  padding: 13px 16px; border-radius: 13px; border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.85); font-family: var(--font-body); font-size: .95rem;
  color: var(--navy); outline: none; cursor: pointer;
}
.field-select:focus { border-color: var(--blue-400); box-shadow: 0 0 0 4px rgba(168,85,247,.14); }

.color-field input[type="color"] {
  width: 100%; height: 48px; padding: 5px; cursor: pointer;
  border: 1px solid var(--glass-border); border-radius: 13px; background: rgba(255,255,255,.85);
}
.color-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 3px; }
.color-field input[type="color"]::-webkit-color-swatch { border: none; border-radius: 9px; }

.accent-preview {
  border-radius: 14px; padding: 18px 22px; margin: 6px 0 18px;
  color: #fff; font-weight: 600; font-size: .92rem;
  box-shadow: 0 10px 28px -10px rgba(168,85,247,.55);
}

.logo-row { display: flex; align-items: center; gap: 14px; }
.logo-row input[type="file"] { flex: 1; }
.logo-preview { width: 52px; height: 52px; border-radius: 13px; object-fit: contain; background: rgba(242,251,255,.8); border: 1px solid var(--glass-border); padding: 6px; flex-shrink: 0; }
.brand-logo-img { width: 34px; height: 34px; border-radius: 9px; object-fit: contain; }
.field-check-inline { padding: 6px 0 0; }

/* Interrupteurs */
.switch-row {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 14px 16px; border-radius: 14px; cursor: pointer;
  border: 1px solid rgba(168,85,247,.22); background: rgba(255,255,255,.5);
  margin-bottom: 10px; transition: border-color .2s, background .2s;
}
.switch-row:hover { border-color: var(--blue-300); }
.switch-info { display: flex; align-items: center; gap: 13px; font-weight: 600; font-size: .95rem; }
.switch-info .icon { color: var(--blue-500); flex-shrink: 0; }
.switch-info span { display: flex; flex-direction: column; gap: 1px; }
.switch-info small { font-weight: 400; font-size: .8rem; color: var(--muted); }
.switch-danger .switch-info .icon { color: #dc2626; }

.switch { position: relative; flex-shrink: 0; width: 46px; height: 26px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; }
.switch .slider {
  position: absolute; inset: 0; border-radius: 999px;
  background: #dedede; transition: background .25s;
}
.switch .slider::before {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 6px rgba(25,25,25,.25); transition: transform .25s cubic-bezier(.2,.9,.3,1.2);
}
.switch input:checked + .slider { background: var(--grad); }
.switch input:checked + .slider::before { transform: translateX(20px); }
.switch input:focus-visible + .slider { box-shadow: 0 0 0 4px rgba(168,85,247,.25); }

.save-bar {
  position: sticky; bottom: 16px; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px 22px; border-radius: 18px; margin-bottom: 30px;
  background: rgba(255,255,255,.88); backdrop-filter: blur(18px);
  border: 1px solid var(--glass-border); box-shadow: var(--shadow-lg);
}

/* ---------- Panneau des annonces Discord ---------- */
/* Une ligne par type d'annonce : icone, libelle + etiquette de destination,
   description, interrupteur eventuel, puis le salon avec son bouton Test. */

.ann-warning { display: flex; align-items: flex-start; gap: 14px; border-color: rgba(234,179,8,.45); }
.ann-warning > .icon { color: #eab308; flex-shrink: 0; margin-top: 2px; }
.ann-warning strong { display: block; margin-bottom: 4px; }

.ann-list { display: flex; flex-direction: column; gap: 12px; }
.ann-row {
  display: flex; gap: 14px; padding: 16px 18px; border-radius: 16px;
  border: 1px solid rgba(168,85,247,.22); background: rgba(255,255,255,.5);
  transition: border-color .2s, background .2s;
}
.ann-row:hover { border-color: var(--blue-300); }
.ann-icon {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--blue-600); background: var(--grad-soft); border: 1px solid rgba(168,85,247,.28);
}
.ann-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ann-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ann-head strong { font-size: .97rem; }
.ann-desc { color: var(--muted); font-size: .86rem; margin: -4px 0 0; }

.ann-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; border: 1px solid currentColor;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.ann-tag .icon { flex-shrink: 0; }
.ann-tag-own { color: #16a34a; background: rgba(22,163,74,.1); }
.ann-tag-fallback { color: var(--blue-600); background: var(--grad-soft); }
.ann-tag-off { color: var(--muted); background: rgba(91,114,134,.1); }

.ann-toggle { display: inline-flex; align-items: center; gap: 11px; cursor: pointer; font-size: .87rem; font-weight: 600; }

@media (max-width: 560px) {
  .ann-row { flex-direction: column; }
  .ann-row .input-with-btn { flex-direction: column; align-items: stretch; }
}

.danger-zone { border-color: rgba(220,38,38,.3); }
.danger-zone .block-title .icon { color: #dc2626; }
.danger-row {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 16px 0; border-top: 1px solid rgba(168,85,247,.18);
}
.danger-row:first-of-type { border-top: none; }
.danger-row strong { font-size: .95rem; }
.danger-row .field-hint { margin-top: 3px; max-width: 480px; }

/* Bannière maintenance (vue admin) */
.maint-banner { background: rgba(234,179,8,.12); border-color: rgba(234,179,8,.35); color: #a16207; }
.maint-banner a { color: #a16207; text-decoration: underline; }

/* Page de maintenance publique — bordures 1px, aucun halo ni flou */
.maint-body { min-height: 100vh; background: var(--bg); overflow: hidden; }

/* Fond anime : grille qui derive + traits qui descendent. Uniquement des
   formes nettes, rien qui vienne voiler le texte. */
.maint-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.maint-grid {
  position: absolute; inset: -60px;
  background-image:
    linear-gradient(rgba(192,132,252,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(192,132,252,.07) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, #000, rgba(0,0,0,.35) 55%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000, rgba(0,0,0,.35) 55%, transparent);
  animation: maintGrid 9s linear infinite;
}
@keyframes maintGrid { to { transform: translate(56px, 56px); } }

.maint-bg i {
  position: absolute; top: 0; width: 1px; height: 26vh;
  background: linear-gradient(to bottom, transparent, var(--accent-from), transparent);
  opacity: .5;
  animation-name: maintStreak; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes maintStreak {
  0%   { transform: translateY(-30vh); }
  100% { transform: translateY(130vh); }
}

/* Le contenu passe devant le fond */
.maint-progress, .maint-page { position: relative; z-index: 1; }
.maint-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; overflow: hidden; background: var(--blue-50); }
.maint-progress span { display: block; width: 34%; height: 100%; background: var(--grad); animation: slideBar 2.4s ease-in-out infinite; }

.maint-page {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 26px; padding: 40px 24px;
}
.maint-card {
  width: min(560px, 100%); padding: 44px 40px 38px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  border: 1px solid var(--glass-border); border-radius: 26px; background: var(--glass);
}

/* Tuile du logo : le fichier televerse a souvent un fond opaque, le cadre
   arrondi l'assume au lieu de laisser un carre brut. */
.maint-logo {
  width: 96px; height: 96px; margin-bottom: 22px; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--glass-border); border-radius: 24px;
}
.maint-logo img { width: 100%; height: 100%; object-fit: cover; }
.maint-logo svg { width: 62px; height: 62px; }

.maint-pill {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(234,179,8,.34); background: rgba(234,179,8,.1);
  color: #fbbf24; font-size: .76rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}
.maint-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #fbbf24; flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(251,191,36,.5); animation: pulse 2.4s infinite;
}

.maint-title { font-family: var(--font-display); font-size: clamp(1.5rem, 3.4vw, 2rem); letter-spacing: -.03em; line-height: 1.15; margin-bottom: 12px; }
.maint-message { max-width: 420px; color: var(--muted); font-size: .96rem; line-height: 1.7; }

.maint-facts { width: 100%; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--glass-border); list-style: none; display: flex; flex-direction: column; gap: 12px; }
.maint-facts li { display: flex; align-items: flex-start; gap: 10px; text-align: left; color: var(--navy); font-size: .87rem; line-height: 1.5; }
.maint-facts .icon { flex: 0 0 auto; margin-top: 1px; color: var(--blue-400); }

.maint-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 26px; }

.maint-foot { display: flex; align-items: center; gap: 16px; color: var(--muted); font-size: .8rem; }
.maint-socials { display: flex; gap: 8px; }
.maint-socials a {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--glass-border); border-radius: 9px; color: var(--muted);
  transition: color .2s, border-color .2s;
}
.maint-socials a:hover { color: var(--blue-600); border-color: var(--blue-300); }

@media (max-width: 560px) {
  .maint-card { padding: 34px 24px 30px; border-radius: 22px; }
  .maint-actions { width: 100%; flex-direction: column; }
  .maint-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .maint-progress span, .maint-dot, .maint-grid { animation: none; }
  .maint-progress span { width: 100%; }
  .maint-bg i { display: none; }
}

@media (max-width: 768px) {
  .form-grid-3 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Theme sombre
   ========================================================================== */

:root[data-theme="dark"] {
  --bg: #0d1420;
  --navy: #e9f2f9;
  --muted: #ababab;
  --glass: rgba(22,32,47, 0.62);
  --glass-border: rgba(168,85,247, 0.30);
  --grad-soft: linear-gradient(120deg, rgba(168,85,247,.16), rgba(168,85,247,.16));
  --shadow-sm: 0 6px 20px -8px rgba(12,12,12, 0.5);
  --shadow-md: 0 18px 45px -18px rgba(12,12,12, 0.65);
  --shadow-lg: 0 30px 70px -25px rgba(12,12,12, 0.75);
}

[data-theme="dark"] body { background: var(--bg); }

[data-theme="dark"] ::-webkit-scrollbar-track { background: #101827; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { border-color: #101827; }

[data-theme="dark"] .nav.scrolled { background: rgba(14,20,31,.82); box-shadow: 0 8px 30px -12px rgba(0,0,0,.5); }
[data-theme="dark"] .brand-name { color: var(--navy); }
[data-theme="dark"] .brand-mark { color: #fff; filter: drop-shadow(0 4px 10px rgba(255,255,255,.12)); }
[data-theme="dark"] .brand-mark-letter { fill: #0d1420; }
[data-theme="dark"] .brand-logo-img { filter: brightness(0) invert(1); }
[data-theme="dark"] .nav-link:hover, [data-theme="dark"] .nav-link.active { background: rgba(168,85,247,.14); }
[data-theme="dark"] .nav-links { background: transparent; }
[data-theme="dark"] .menu { background: rgba(22,32,47,.96); }
[data-theme="dark"] .menu-head { border-color: rgba(168,85,247,.25); }
[data-theme="dark"] .palette { background: rgba(18,26,39,.97); }
[data-theme="dark"] .palette-input { border-color: rgba(168,85,247,.25); }
[data-theme="dark"] .palette-kbd { background: rgba(30,43,62,.8); }

[data-theme="dark"] .btn { background: rgba(30,43,62,.7); color: var(--navy); }
[data-theme="dark"] .btn-primary { background: var(--grad); color: #fff; }
[data-theme="dark"] .btn-discord { background: #5865f2; color: #fff; }
[data-theme="dark"] .btn-white { background: #fff; color: #06121f; }
[data-theme="dark"] .btn-outline-white { background: transparent; color: #fff; }
[data-theme="dark"] .btn-ghost { background: rgba(30,43,62,.55); }
[data-theme="dark"] .icon-btn { background: rgba(30,43,62,.7); }

[data-theme="dark"] .panel-row,
[data-theme="dark"] .review,
[data-theme="dark"] .history-row,
[data-theme="dark"] .msg-row,
[data-theme="dark"] .version-row { background: rgba(28,40,58,.55); border-color: rgba(168,85,247,.22); }
[data-theme="dark"] .version-row.latest { background: rgba(39,55,78,.4); border-color: rgba(168,85,247,.4); }
[data-theme="dark"] .msg-row.unread, [data-theme="dark"] .msg-card.unread { background: rgba(39,55,78,.4); }

[data-theme="dark"] .chip { background: rgba(30,43,62,.75); color: var(--navy); }
[data-theme="dark"] .chip-blue { background: rgba(168,85,247,.18); color: #d8b4fe; border-color: rgba(168,85,247,.35); }
[data-theme="dark"] .glass-chip { background: rgba(25,36,52,.85); }
[data-theme="dark"] .meta-pill { background: rgba(30,43,62,.7); }
[data-theme="dark"] .search-box, [data-theme="dark"] .sort-box { background: rgba(25,36,52,.75); }
[data-theme="dark"] .search-box input, [data-theme="dark"] .sort-box select { color: var(--navy); }
[data-theme="dark"] .sort-box select option { background: #16202f; }

[data-theme="dark"] .field input[type="text"],
[data-theme="dark"] .field input[type="url"],
[data-theme="dark"] .field input[type="number"],
[data-theme="dark"] .version-link-form input,
[data-theme="dark"] .field textarea,
[data-theme="dark"] .review-form textarea,
[data-theme="dark"] .reply-form textarea { background: rgba(18,26,39,.8); color: var(--navy); }
[data-theme="dark"] .field input[type="file"] { background: rgba(25,36,52,.6); }
[data-theme="dark"] .field code { background: rgba(168,85,247,.18); color: #dce7f0; }
[data-theme="dark"] .review-form, [data-theme="dark"] .version-add, [data-theme="dark"] .contact-as { background: rgba(25,36,52,.5); border-color: rgba(168,85,247,.28); }
[data-theme="dark"] .review-login { background: rgba(25,36,52,.5); }
[data-theme="dark"] .review-reply { background: rgba(39,55,78,.35); }

[data-theme="dark"] .prose p, [data-theme="dark"] .review-text, [data-theme="dark"] .msg-body,
[data-theme="dark"] .setup-body p, [data-theme="dark"] .faq-a p, [data-theme="dark"] .review-reply p { color: #cfdbe6; }
[data-theme="dark"] .changelog { background: rgba(14,20,31,.8); border-color: rgba(168,85,247,.22); color: #c6d3e0; }
[data-theme="dark"] .stars-empty .icon { color: #3f5163; }
[data-theme="dark"] .rb-track, [data-theme="dark"] .panel-progress { background: rgba(38,54,76,.8); }
[data-theme="dark"] .card-cover, [data-theme="dark"] .gallery-thumb { background: rgba(30,43,62,.6); }
[data-theme="dark"] .avatar { border-color: rgba(168,85,247,.4); background: rgba(30,43,62,.8); }

[data-theme="dark"] .footer { background: rgba(14,20,31,.7); }
[data-theme="dark"] .step-num { color: rgba(168,85,247,.35); }
[data-theme="dark"] .mini-card:hover, [data-theme="dark"] .admin-row:hover, [data-theme="dark"] .notif:hover { background: rgba(168,85,247,.09); }
[data-theme="dark"] .notif.unread { background: rgba(168,85,247,.08); }
[data-theme="dark"] .badge-pill { background: rgba(25,36,52,.75); }
[data-theme="dark"] .admin-sidebar,
[data-theme="dark"] .admin-main-panel,
[data-theme="dark"] .admin-panel-topbar {
  background: rgba(18,26,39,.78);
  border-color: rgba(168,85,247,.24);
}
[data-theme="dark"] .admin-workspace,
[data-theme="dark"] .admin-operator {
  background: rgba(25,36,52,.72);
  border-color: rgba(168,85,247,.24);
}
[data-theme="dark"] .admin-side-link.active {
  background: rgba(168,85,247,.16);
  border-color: rgba(168,85,247,.3);
}
[data-theme="dark"] .banned-banner { background: rgba(150,20,30,.25); color: #fda4af; border-color: rgba(220,38,38,.35); }
[data-theme="dark"] .banned-banner a { color: #fda4af; }
[data-theme="dark"] .check-pill { background: rgba(150,20,30,.18); color: #fda4af; }
[data-theme="dark"] .check-pill.ok { background: rgba(20,120,60,.18); color: #86efac; }
[data-theme="dark"] .scroll-hint { background: rgba(25,36,52,.8); }
[data-theme="dark"] .gallery-admin-thumb .icon-btn { background: rgba(22,32,47,.9); }
[data-theme="dark"] .lightbox-close { background: rgba(255,255,255,.1); }
[data-theme="dark"] .user-menu summary { background: rgba(25,36,52,.75); }
[data-theme="dark"] .bell-menu summary { background: rgba(30,43,62,.7); }
[data-theme="dark"] .palette-kbd { color: var(--muted); }
[data-theme="dark"] .switch-row { background: rgba(28,40,58,.55); border-color: rgba(168,85,247,.22); }
[data-theme="dark"] .switch .slider { background: #3f5163; }
[data-theme="dark"] .field-select { background: rgba(18,26,39,.8); color: var(--navy); }
[data-theme="dark"] .field-select option { background: #16202f; }
[data-theme="dark"] .color-field input[type="color"] { background: rgba(18,26,39,.8); }
[data-theme="dark"] .save-bar { background: rgba(18,26,39,.9); }
[data-theme="dark"] .logo-preview { background: rgba(30,43,62,.7); }
[data-theme="dark"] .maint-banner { background: rgba(160,120,10,.2); color: #fcd34d; border-color: rgba(234,179,8,.3); }
[data-theme="dark"] .maint-banner a { color: #fcd34d; }

/* ---------- Lecteur video (presentation d'une ressource) ---------- */

/* Presentation YouTube : cadre 16/9 fluide */
.video-embed {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  border-radius: 18px; overflow: hidden;
  background: #0c0c0c; box-shadow: var(--shadow-md);
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video-player {
  position: relative; border-radius: 18px; overflow: hidden;
  background: #0c0c0c; box-shadow: var(--shadow-md);
}
.video-player .vp-video { display: block; width: 100%; max-height: 480px; background: #000; cursor: pointer; }

.vp-controls {
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  max-width: 560px; margin: 0 auto; padding: 12px 14px;
  background: rgba(15,15,15,.74); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(168,85,247,.28); border-radius: 16px;
  display: flex; flex-direction: column; gap: 8px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.video-player:hover .vp-controls,
.video-player.paused .vp-controls,
.video-player.show-controls .vp-controls,
.vp-controls:focus-within { opacity: 1; visibility: visible; transform: none; }

.vp-time-row { display: flex; align-items: center; gap: 10px; }
.vp-time-row span { color: #fff; font-size: .8rem; font-variant-numeric: tabular-nums; min-width: 34px; }
.vp-current { text-align: right; }

.vp-slider { position: relative; height: 5px; border-radius: 999px; background: rgba(255,255,255,.22); cursor: pointer; touch-action: none; }
.vp-slider::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; }
.vp-seek { flex: 1; }
.vp-slider-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: inherit; background: #fff; pointer-events: none; }
.vp-seek .vp-slider-fill { background: var(--grad); }

.vp-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vp-left { display: flex; align-items: center; gap: 8px; }
.vp-volume { width: 90px; }
.vp-right { display: flex; align-items: center; gap: 3px; }

.vp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px; border: none;
  background: transparent; color: #fff; cursor: pointer;
  transition: background .2s, transform .15s;
}
.vp-btn:hover { background: rgba(255,255,255,.14); }
.vp-btn:active { transform: scale(.92); }
.vp-ic { display: inline-flex; line-height: 0; }

.vp-speed {
  border: none; background: transparent; color: #fff; cursor: pointer;
  font-family: var(--font-body); font-size: .78rem; font-weight: 600;
  padding: 7px 8px; border-radius: 9px; transition: background .2s;
}
.vp-speed:hover { background: rgba(255,255,255,.14); }
.vp-speed.active { background: rgba(168,85,247,.5); }

.video-player:fullscreen { border-radius: 0; display: flex; align-items: center; }
.video-player:fullscreen .vp-video { max-height: none; width: 100%; }

@media (max-width: 560px) {
  .vp-volume { display: none; }
  .vp-controls { left: 8px; right: 8px; bottom: 8px; padding: 10px 11px; gap: 6px; }
  .vp-actions { flex-wrap: wrap; }
  .vp-btn { width: 30px; height: 30px; }
  .vp-btn .icon { width: 16px; height: 16px; }
  .vp-speed { padding: 5px 5px; font-size: .72rem; }
  .vp-right { gap: 2px; }
  .vp-left { gap: 5px; }
}

/* ---------- Carrousel de captures (hero) ---------- */

.hero-carousel {
  position: relative;
  border-radius: 18px; overflow: hidden;
  background: #0c0c0c; border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-md); outline: none;
}
.hero-carousel:focus-visible { box-shadow: 0 0 0 3px rgba(168,85,247,.55), var(--shadow-md); }
.hc-viewport { overflow: hidden; touch-action: pan-y; }
.hc-track { display: flex; transition: transform .45s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.hc-slide { flex: 0 0 100%; aspect-ratio: 16 / 9; background: #000; }
.hc-slide img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }

.hc-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(12,12,12,.55); color: #fff; border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .2s, transform .15s;
}
.hc-arrow:hover { background: rgba(12,12,12,.85); }
.hc-arrow:active { transform: translateY(-50%) scale(.9); }
.hc-prev { left: 14px; }
.hc-next { right: 14px; }

.hc-zoom {
  position: absolute; top: 14px; right: 14px;
  width: 38px; height: 38px; border-radius: 11px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(12,12,12,.55); color: #fff; border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .2s, transform .15s;
}
.hc-zoom:hover { background: rgba(12,12,12,.85); }
.hc-zoom:active { transform: scale(.9); }

.hc-dots {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 999px;
  background: rgba(12,12,12,.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hc-dot { width: 8px; height: 8px; padding: 0; border-radius: 999px; border: none; cursor: pointer; background: rgba(255,255,255,.45); transition: width .25s, background .25s; }
.hc-dot.active { width: 22px; background: #fff; }

.hc-counter {
  position: absolute; top: 14px; left: 14px;
  padding: 5px 11px; border-radius: 999px; font-size: .78rem; font-weight: 600; color: #fff;
  background: rgba(12,12,12,.55); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* ---------- Configuration système / compatibilité + tag coloré ---------- */

/* Grille de compatibilité (page publique) */
.req-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.req-cell {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 14px;
  background: rgba(255,255,255,.6); border: 1px solid var(--glass-border);
}
.req-ic {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--grad-soft); color: var(--blue-600); border: 1px solid rgba(168,85,247,.28);
}
.req-text { font-weight: 600; font-size: .92rem; color: var(--navy); }

/* Tag coloré (fond + texte définis en ligne via badgeStyle) */
.chip-custom { border-width: 1px; border-style: solid; }
.chip-badge { position: absolute; bottom: 12px; right: 12px; backdrop-filter: blur(8px); }

/* Éditeur de compatibilité (admin) */
.req-editor { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 12px; }
.req-row { display: flex; align-items: center; gap: 8px; }
.req-row .req-icon { flex: 0 0 42%; max-width: 220px; }
.req-row .req-label {
  flex: 1 1 auto; min-width: 0;
  padding: 11px 14px; border-radius: 12px; border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.85); font-family: var(--font-body); font-size: .93rem; color: var(--navy);
}
.req-row .req-label:focus { outline: none; border-color: var(--blue-400); box-shadow: 0 0 0 4px rgba(168,85,247,.14); }
.req-row .req-remove { flex-shrink: 0; }
.btn-add-req { align-self: flex-start; }

/* Tag coloré (admin) : sélecteur de couleur + pastilles + aperçu */
.badge-color-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.badge-color-row input[type="color"] {
  width: 46px; height: 42px; padding: 4px; border-radius: 12px;
  border: 1px solid var(--glass-border); background: rgba(255,255,255,.85); cursor: pointer; flex-shrink: 0;
}
.badge-swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.badge-swatch {
  width: 26px; height: 26px; border-radius: 8px; border: 2px solid rgba(255,255,255,.7);
  box-shadow: 0 2px 6px rgba(0,0,0,.18); cursor: pointer; transition: transform .15s;
}
.badge-swatch:hover { transform: scale(1.14); }
.badge-preview { margin-top: 10px; align-self: flex-start; }

[data-theme="dark"] .req-cell { background: rgba(30,43,62,.55); }
[data-theme="dark"] .req-row .req-label { background: rgba(18,26,39,.8); }
[data-theme="dark"] .badge-color-row input[type="color"] { background: rgba(18,26,39,.8); }

/* ==========================================================================
   Mobile — navbar compacte et confort tactile
   (en fin de fichier pour l'emporter sur les composants V2 et le theme sombre)
   ========================================================================== */

@media (max-width: 768px) {
  /* Le panneau burger reprend la marge desktop de .nav-links : on l'annule */
  .nav-links { margin-left: 0; }
  /* Bouton Connexion de la navbar : icone Discord seule (le texte depasse de l'ecran) */
  .nav-right .btn-discord span { display: none; }
  .nav-right .btn-discord { padding: 10px 13px; border-radius: 12px; }
  /* Panneau du menu burger : fond opaque aussi en theme sombre */
  [data-theme="dark"] .nav-links {
    background: rgba(16,24,37,.97);
    border-bottom-color: rgba(168,85,247,.25);
  }
}

@media (max-width: 560px) {
  :root { --nav-h: 62px; }
  .nav-inner { gap: 12px; }
  .nav-right { gap: 8px; }
  .brand { gap: 8px; }
  .brand-name { font-size: 1.08rem; letter-spacing: .12em; }
  .brand-mark, .brand-logo-img { width: 30px; height: 30px; }
  .nav-tool { width: 34px; height: 34px; border-radius: 10px; }
  .bell-menu summary { border-radius: 10px; }
  .user-menu summary { padding: 3px; }
  .user-menu .chev { display: none; }
  .user-menu .avatar { width: 30px; height: 30px; }
  .bell-badge { top: -4px; right: -4px; min-width: 16px; height: 16px; line-height: 16px; }
  /* iOS zoome sur les champs < 16px : on force 1rem sur mobile */
  input[type="text"], input[type="search"], input[type="email"], input[type="url"],
  input[type="number"], textarea, select, .field-input, .field-select { font-size: 1rem; }

  /* Alignements : plus d'elements orphelins ou de largeurs depareillees */
  .section-head { margin-bottom: 30px; gap: 16px; }
  .section-head > .btn { width: 100%; justify-content: center; }
  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions .btn { width: 100%; }
  .hero-trust { gap: 12px 20px; }
  .stat-label { font-size: .8rem; }

  /* Infos d'une ressource : grille 2 colonnes au lieu de pilules en drapeau */
  .item-meta-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 22px; }
  .item-meta-row .meta-pill { justify-content: center; padding: 9px 8px; font-size: .82rem; }

  /* Compatibilité : une colonne, et éditeur admin empilé */
  .req-grid { grid-template-columns: 1fr; }
  .req-row { flex-wrap: wrap; }
  .req-row .req-icon { flex: 1 1 100%; max-width: none; }
  .req-row .req-label { flex: 1 1 auto; }

  /* Carrousel : flèches compactes */
  .hc-arrow { width: 38px; height: 38px; }
  .hc-prev { left: 8px; }
  .hc-next { right: 8px; }
  .hc-zoom { width: 34px; height: 34px; top: 10px; right: 10px; }
  .hc-counter { top: 10px; left: 10px; }
  .hc-dots { bottom: 10px; }
}

@media (max-width: 360px) {
  .brand-name { display: none; }
}

/* ---------- Accessibilite ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Boutique ---------- */

.shop-price { font-family: var(--font-display); font-weight: 700; color: var(--blue-500); font-size: 1.05rem; }
.shop-price-lg { font-family: var(--font-display); font-weight: 700; font-size: 2rem; color: var(--navy); margin: 6px 0 16px; }
.shop-card .card-cover { min-height: 150px; }

.shop-buy-form { display: flex; flex-direction: column; gap: 12px; }
.shop-qty { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; color: var(--navy); font-size: .92rem; }
.shop-qty input {
  width: 90px; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.85); color: var(--navy); font-family: var(--font-body); text-align: center;
}
[data-theme="dark"] .shop-qty input { background: rgba(18,26,39,.8); color: var(--navy); }

/* Livraison (cles / comptes) */
.delivery-list { display: flex; flex-direction: column; gap: 10px; }
.delivery-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 13px; border: 1px solid var(--glass-border); background: var(--grad-soft); }
.delivery-index { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; background: var(--blue-400); color: #fff; }
.delivery-code { flex: 1 1 auto; min-width: 0; overflow-x: auto; white-space: nowrap; font-family: var(--font-mono, monospace); font-size: .95rem; color: var(--navy); padding: 4px 0; }
.delivery-row .btn { flex: 0 0 auto; }

.success-badge { width: 74px; height: 74px; margin: 0 auto 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #22c55e, #16a34a); box-shadow: 0 14px 40px -12px rgba(34,197,94,.5); }
.success-badge.pending { background: linear-gradient(135deg, #eab308, #ca8a04); box-shadow: 0 14px 40px -12px rgba(234,179,8,.5); }

.order-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.order-meta { color: var(--muted); font-size: .9rem; font-weight: 600; }

/* Admin : gestion du stock */
.stock-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.stock-row { display: flex; align-items: center; gap: 10px; }
.stock-row input { flex: 1 1 auto; min-width: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--glass-border); background: rgba(255,255,255,.85); color: var(--navy); font-family: var(--font-body); }
[data-theme="dark"] .stock-row input { background: rgba(18,26,39,.8); }
.stock-bulk { margin: 16px 0; }
.stock-bulk summary { cursor: pointer; font-weight: 600; color: var(--blue-500); display: inline-flex; align-items: center; gap: 8px; }
.stock-bulk textarea { width: 100%; margin-top: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--glass-border); background: rgba(255,255,255,.85); color: var(--navy); font-family: var(--font-mono, monospace); resize: vertical; }
[data-theme="dark"] .stock-bulk textarea { background: rgba(18,26,39,.8); }

.stock-list { display: flex; flex-direction: column; gap: 8px; }
.stock-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--glass-border); background: rgba(255,255,255,.5); }
[data-theme="dark"] .stock-item { background: rgba(28,40,58,.4); }
.stock-item.is-sold { opacity: .6; }
.stock-status { flex: 0 0 auto; }
.stock-value { flex: 1 1 auto; min-width: 0; overflow-x: auto; white-space: nowrap; font-family: var(--font-mono, monospace); font-size: .9rem; color: var(--navy); }

/* Boutique : instructions de paiement manuel (PayPal) */
.pay-steps { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }
.pay-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 13px; border: 1px solid var(--glass-border); background: rgba(255,255,255,.5); flex-wrap: wrap; }
[data-theme="dark"] .pay-row { background: rgba(28,40,58,.4); }
.pay-label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--muted); font-size: .88rem; min-width: 160px; }
.pay-value { flex: 1 1 auto; min-width: 0; overflow-x: auto; white-space: nowrap; font-family: var(--font-mono, monospace); font-size: 1rem; font-weight: 600; color: var(--navy); }
.pay-row .btn { flex: 0 0 auto; }

/* Popup annonce */
.announcement-admin-preview {
  display: block; width: 100%; max-width: 520px; aspect-ratio: 16 / 5;
  object-fit: cover; border-radius: 12px; border: 1px solid var(--glass-border);
  margin: 8px 0 12px; background: rgba(255,255,255,.08);
}
.announcement-overlay {
  position: fixed; inset: 0; z-index: 700; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(0,0,0,.78); backdrop-filter: blur(3px);
}
.announcement-modal {
  position: relative; width: min(1260px, 86vw); background: #050505;
  box-shadow: 0 28px 90px rgba(0,0,0,.65); overflow: visible;
}
.announcement-modal img {
  display: block; width: 100%; aspect-ratio: 16 / 4.6; object-fit: cover;
}
.announcement-strip {
  min-height: 24px; display: flex; align-items: center; justify-content: center;
  padding: 4px 14px; background: var(--blue-400); color: #070707;
  font-weight: 800; font-size: .9rem; text-align: center; text-transform: uppercase;
}
.announcement-close {
  position: absolute; top: 12px; right: 14px; z-index: 2; width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center; border: 0;
  background: transparent; color: #fff; cursor: pointer; filter: drop-shadow(0 2px 5px rgba(0,0,0,.7));
}
.announcement-close:hover { transform: scale(1.06); }
@media (max-width: 680px) {
  .announcement-overlay { padding: 14px; }
  .announcement-modal { width: 100%; }
  .announcement-modal img { aspect-ratio: 16 / 7; }
  .announcement-strip { font-size: .78rem; }
}

/* ---------- Gestionnaire de categories admin ---------- */
.category-manager-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 24px; margin-bottom: 24px; border: 1px solid rgba(168,85,247,.2);
  border-radius: 18px; background: rgba(255,255,255,.52);
}
.category-manager-toolbar h2 { font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 4px; }
.category-manager-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 1280px) {
  .category-manager-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 880px) {
  .category-manager-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .category-manager-grid { grid-template-columns: 1fr; }
}
  overflow: hidden; border: 1px solid rgba(168,85,247,.2); border-radius: 18px;
  background: rgba(255,255,255,.7); box-shadow: 0 10px 30px -24px rgba(39,55,78,.55);
  transition: transform .22s, border-color .22s, box-shadow .22s;
}
.category-manager-card:hover { transform: translateY(-3px); border-color: var(--blue-400); box-shadow: var(--shadow-md); }
.category-manager-cover { position: relative; height: 150px; overflow: hidden; background: linear-gradient(135deg, rgba(168,85,247,.17), rgba(168,85,247,.06)); }
.category-manager-cover > img { width: 100%; height: 100%; object-fit: cover; }
.category-cover-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--blue-500); }
.category-cover-fallback::before { content: ''; position: absolute; width: 110px; height: 110px; border-radius: 50%; background: rgba(168,85,247,.1); }
.category-cover-fallback .icon { position: relative; }
.category-count { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 99px; color: #fff; background: rgba(14,20,31,.72); backdrop-filter: blur(9px); font-size: .75rem; font-weight: 700; }
.category-manager-body { display: flex; align-items: center; gap: 14px; padding: 17px 18px; }
.category-manager-copy { min-width: 0; flex: 1; }
.category-manager-copy > span, .category-dialog-head span { display: block; margin-bottom: 3px; color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.category-manager-copy h3 { overflow: hidden; color: var(--navy); font-family: var(--font-display); font-size: 1.03rem; white-space: nowrap; text-overflow: ellipsis; }
.category-edit-trigger { background: var(--grad-soft); color: var(--blue-600); border-color: rgba(168,85,247,.22); }
.category-manager-empty { padding: 54px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.category-manager-empty > span { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 18px; color: var(--blue-500); background: var(--grad-soft); }
.category-manager-empty h3 { font-family: var(--font-display); }
.category-manager-empty p { color: var(--muted); margin-bottom: 8px; }
.category-dialog { width: min(560px, calc(100% - 28px)); max-height: calc(100svh - 32px); padding: 0; overflow: auto; color: var(--navy); border: 1px solid rgba(168,85,247,.32); border-radius: 22px; background: var(--bg); box-shadow: 0 30px 90px rgba(10,10,10,.45); }
.category-dialog::backdrop { background: rgba(10,10,10,.68); backdrop-filter: blur(5px); }
.category-dialog[open] { position: fixed; inset: 0; z-index: 1000; margin: auto; }
.category-dialog[open]::after { content: ''; position: fixed; inset: 0; z-index: -1; background: rgba(0,0,0,.68); }
.category-dialog-shell { padding: 24px; }
.category-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid rgba(168,85,247,.16); }
.category-dialog-head h2 { font-family: var(--font-display); font-size: 1.3rem; }
.category-dialog-form { display: flex; flex-direction: column; gap: 18px; padding-top: 20px; }
.category-dialog-preview { height: 170px; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 15px; color: var(--muted); background: var(--grad-soft); }
.category-dialog-preview img { width: 100%; height: 100%; object-fit: cover; }
.category-dialog-preview span { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: .82rem; }
.category-upload-zone { position: relative; min-height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 18px; cursor: pointer; color: var(--blue-500); text-align: center; border: 1.5px dashed rgba(168,85,247,.48); border-radius: 15px; background: rgba(168,85,247,.06); transition: border-color .2s, background .2s; }
.category-upload-zone:hover { border-color: var(--blue-400); background: rgba(168,85,247,.1); }
.category-upload-zone strong { color: var(--navy); font-size: .88rem; }
.category-upload-zone small { color: var(--muted); font-size: .74rem; }
.category-upload-zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.category-remove-image { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: .82rem; }
.category-remove-image input { width: 17px; height: 17px; accent-color: var(--blue-500); }
.category-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 2px; }
.category-danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 20px; margin-top: 22px; border-top: 1px solid rgba(239,68,68,.18); }
.category-danger-zone > div { display: flex; flex-direction: column; gap: 3px; }
.category-danger-zone strong { font-size: .84rem; color: #ef4444; }
.category-danger-zone small { color: var(--muted); font-size: .73rem; }
.category-danger-zone .btn-danger:disabled { opacity: .4; cursor: not-allowed; }
.category-danger-zone .btn-danger { color: #fff; background: #dc2626; border-color: #dc2626; }
.category-danger-zone .btn-danger:not(:disabled):hover { background: #b91c1c; border-color: #b91c1c; }
[data-theme="dark"] .category-manager-toolbar, [data-theme="dark"] .category-manager-card { background: rgba(25,36,52,.68); }
[data-theme="dark"] .category-dialog { background: #101010; }
@media (max-width: 640px) {
  .category-manager-toolbar { align-items: flex-start; flex-direction: column; padding: 18px; }
  .category-manager-toolbar .btn { width: 100%; }
  .category-manager-grid { grid-template-columns: 1fr; }
  .category-dialog-shell { padding: 19px; }
  .category-danger-zone { align-items: stretch; flex-direction: column; }
  .category-danger-zone .btn { width: 100%; }
}

/* ---------- Centrage de la page telechargements ---------- */
.downloads-hero .container { display: flex; flex-direction: column; align-items: center; text-align: center; }
.downloads-hero .page-sub { margin-left: auto; margin-right: auto; }
.downloads-section-head {
  width: min(980px, 100%); margin-left: auto; margin-right: auto;
  align-items: center; flex-direction: column; gap: 8px; text-align: center;
}
.downloads-section-head > div { align-items: center; }
.downloads-section-head > p { margin-top: 4px; }
.category-grid { width: min(980px, 100%); margin-left: auto; margin-right: auto; }
#categoryItemsView { width: 100%; }
#categoryItemsView .category-view-head,
#categoryItemsView .downloads-toolbar,
#categoryItemsView .downloads-items-grid,
#categoryItemsView > .empty-state { width: min(1100px, 100%); margin-left: auto; margin-right: auto; }
#categoryItemsView .category-view-head { align-items: center; text-align: center; }
#categoryItemsView .category-view-title { justify-content: center; }

/* ==========================================================================
   Support — tickets membres et panel de l'equipe
   ========================================================================== */

/* Pastilles de compteur (lien Support de la barre de navigation et du menu) */
.nav-badge, .menu-item-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: linear-gradient(120deg, #f43f5e, #e11d48); color: #fff;
  font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center;
}
.menu-item-badge { margin-left: auto; }

.back-link {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
  color: var(--muted); font-size: .9rem; font-weight: 500;
}
.back-link:hover { color: var(--blue-600); }

.hidden-form { display: none; }

/* ---------- Barre d'outils ---------- */
.ticket-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.ticket-toolbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ticket-search { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ticket-search input {
  padding: 11px 15px; border-radius: 12px; min-width: 240px;
  border: 1px solid var(--glass-border); background: rgba(255,255,255,.75);
  font-family: var(--font-body); font-size: .92rem; color: var(--navy);
}
.ticket-search input:focus { outline: none; border-color: var(--blue-400); box-shadow: 0 0 0 4px rgba(168,85,247,.14); }

/* ---------- Etat d'un ticket ---------- */
.ticket-state {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px; border: 1px solid var(--glass-border);
  font-size: .74rem; font-weight: 600; white-space: nowrap;
}
.ticket-state .icon { flex-shrink: 0; }
.ticket-state-open { background: rgba(234,179,8,.14); color: #a16207; border-color: rgba(234,179,8,.35); }
.ticket-state-answered { background: var(--grad-soft); color: var(--blue-600); border-color: rgba(168,85,247,.4); }
.ticket-state-closed { background: rgba(22,163,74,.1); color: #15803d; border-color: rgba(22,163,74,.3); }
.ticket-danger-text { color: #b91c1c; font-weight: 600; }

/* ---------- Liste des tickets ---------- */
.ticket-list { display: flex; flex-direction: column; gap: 14px; }
.ticket-card {
  display: flex; align-items: center; gap: 16px; padding: 18px 20px;
  border-radius: var(--radius); color: inherit;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.ticket-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--blue-300); }
.ticket-card.unread { border-left: 3px solid var(--blue-500); }
/* Panel support : la carte contient un lien + un bouton, le lien porte la mise en page */
.ticket-card-link { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 16px; color: inherit; }
.ticket-card-delete { flex: 0 0 auto; display: flex; }
.ticket-card-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ticket-card-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ticket-ref {
  font-family: "Cascadia Code", Consolas, monospace; font-size: .78rem;
  font-weight: 600; color: var(--muted); letter-spacing: .02em;
}
.ticket-subject {
  font-family: var(--font-display); font-size: 1.02rem; color: var(--navy);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ticket-preview {
  color: var(--muted); font-size: .87rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ticket-card-side {
  display: flex; flex-direction: column; align-items: flex-end; gap: 7px;
  flex-shrink: 0; text-align: right;
}
.ticket-date { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .78rem; }
.ticket-date .icon { color: var(--blue-300); }

/* ---------- Bandeau equipe support ---------- */
.ticket-staff-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; padding: 18px 20px; border-radius: var(--radius); margin-bottom: 22px;
}
.ticket-staff-member { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ticket-staff-member span { display: flex; flex-direction: column; min-width: 0; }
.ticket-staff-member strong { font-size: .96rem; }
.ticket-staff-member small { color: var(--muted); font-size: .78rem; overflow-wrap: anywhere; }
.ticket-staff-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ticket-priority-form { display: flex; align-items: center; gap: 8px; }
.ticket-priority-form .field-select { padding: 9px 14px; font-size: .86rem; }

/* ---------- Fil de discussion ---------- */
.ticket-thread { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.ticket-msg { display: flex; gap: 14px; align-items: flex-start; }
.ticket-msg .avatar { flex-shrink: 0; }
.ticket-msg-body {
  flex: 1 1 auto; min-width: 0; padding: 16px 20px;
  border: 1px solid var(--glass-border); border-radius: var(--radius);
  background: rgba(255,255,255,.6);
}
.ticket-msg.from-staff .ticket-msg-body { background: var(--grad-soft); border-color: rgba(168,85,247,.4); }
.ticket-msg-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ticket-msg-head strong { font-size: .93rem; }
.ticket-msg-text { color: #3d4b59; font-size: .94rem; overflow-wrap: anywhere; }
.ticket-msg-text p + p { margin-top: 10px; }

.ticket-closed-note {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px;
  border-radius: var(--radius); margin-bottom: 20px; color: var(--muted); font-size: .92rem;
}
.ticket-closed-note .icon { color: #16a34a; flex-shrink: 0; }

.ticket-reply { padding: 24px; border-radius: var(--radius); display: flex; flex-direction: column; gap: 16px; }

@media (max-width: 720px) {
  .ticket-toolbar { align-items: stretch; }
  .ticket-card { align-items: flex-start; flex-wrap: wrap; }
  .ticket-card-link { flex-wrap: wrap; gap: 12px; }
  /* Le bouton passe sous la carte : on le cale a droite plutot qu'a gauche */
  .ticket-card-delete { margin-left: auto; }
  .ticket-card-side { flex-direction: row; align-items: center; width: 100%; text-align: left; }
  .ticket-subject { white-space: normal; }
  /* Apercu limite a deux lignes : les cartes restent parcourables au pouce */
  .ticket-preview {
    white-space: normal; display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  }
  /* La barre d'outils passe en colonne : recherche pleine largeur, boutons a cote */
  .ticket-toolbar-actions { width: 100%; flex-wrap: wrap; }
  /* Pleine largeur : les libelles restent sur une seule ligne */
  .ticket-toolbar-actions > .btn { flex: 1 1 100%; justify-content: center; }
  .ticket-search { flex: 1 1 100%; }
  .ticket-search input { flex: 1 1 140px; min-width: 120px; }
  .ticket-search .btn { flex: 0 1 auto; }
  .ticket-staff-bar { flex-direction: column; align-items: stretch; }
  .ticket-staff-actions > form { flex: 1 1 auto; }
  .ticket-staff-actions .btn { width: 100%; justify-content: center; }
  .ticket-priority-form { flex: 1 1 100%; }
  .ticket-priority-form .field-select { flex: 1 1 auto; min-width: 0; }
  .ticket-msg { gap: 10px; }
  .ticket-msg-body { padding: 14px 16px; }
}

/* ---------- Theme sombre ---------- */
[data-theme="dark"] .ticket-card,
[data-theme="dark"] .ticket-staff-bar,
[data-theme="dark"] .ticket-closed-note,
[data-theme="dark"] .ticket-reply { background-color: rgba(19,28,43,.9); border-color: rgba(168,85,247,.2); }
[data-theme="dark"] .ticket-msg-body { background: rgba(25,36,52,.6); border-color: rgba(168,85,247,.28); }
[data-theme="dark"] .ticket-msg.from-staff .ticket-msg-body { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); }
[data-theme="dark"] .ticket-msg-text { color: #cfcfcf; }
[data-theme="dark"] .ticket-search input { background: rgba(18,26,39,.8); border-color: rgba(255,255,255,.16); color: var(--navy); }
[data-theme="dark"] .ticket-state-open { background: rgba(234,179,8,.16); color: #fcd34d; border-color: rgba(234,179,8,.4); }
[data-theme="dark"] .ticket-state-closed { background: rgba(22,163,74,.16); color: #6ee7a5; border-color: rgba(22,163,74,.4); }
[data-theme="dark"] .ticket-danger-text { color: #f87171; }

/* ============================================================
   Premium : formules, statut et cles
   ============================================================ */

/* Bandeau d'etat (page /premium et profil) */
.premium-status {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 20px; margin-top: 22px;
  border: 1px solid rgba(34,197,94,.35); border-radius: var(--radius);
  background: linear-gradient(120deg, rgba(34,197,94,.14), rgba(168,85,247,.12));
}
.premium-status-icon {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: linear-gradient(135deg, #22c55e, #16a34a);
}
.premium-status-copy { flex: 1 1 240px; display: flex; flex-direction: column; gap: 4px; }
.premium-status-copy strong { font-family: var(--font-display); font-size: 1.05rem; }
.premium-status-copy span { color: var(--muted); font-size: .92rem; }
.premium-status .btn { flex: 0 0 auto; }

/* Grille des formules */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; align-items: stretch; }
.plan-card {
  position: relative; display: flex; flex-direction: column; gap: 16px;
  padding: 26px 24px; border-radius: var(--radius-lg);
  transition: transform .25s ease, box-shadow .25s ease;
}
.plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.plan-featured { border-color: rgba(168,85,247,.5); box-shadow: var(--glow); }
.plan-flag {
  position: absolute; top: -12px; left: 24px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px; font-size: .74rem; font-weight: 700;
  color: #fff; background: linear-gradient(120deg, var(--accent-from), var(--accent-to));
}
.plan-head { display: flex; flex-direction: column; gap: 8px; }
.plan-icon {
  width: 42px; height: 42px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--blue-500); background: var(--grad-soft);
}
.plan-name { font-family: var(--font-display); font-size: 1.25rem; margin: 0; }
.plan-duration { color: var(--muted); font-size: .88rem; font-weight: 600; }
.plan-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plan-price strong { font-family: var(--font-display); font-size: 2.1rem; line-height: 1; }
.plan-price span { color: var(--muted); font-size: .86rem; }
.plan-tagline { color: var(--muted); font-size: .93rem; margin: 0; }
.plan-features { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; }
.plan-features li { display: flex; align-items: flex-start; gap: 9px; font-size: .91rem; }
.plan-features .icon { color: #16a34a; flex-shrink: 0; margin-top: 2px; }
.plan-features code { font-size: .86rem; }
.plan-stock { margin-top: auto; }

/* Champ avec unite collee dedans (2,99 €  /  30 jours) */
.field-unit { position: relative; display: flex; }
/* Selecteurs avec [type] : meme specificite que la regle generale des champs,
   et declares plus bas, donc c'est bien ce padding-right qui s'applique. */
.field-unit input[type="text"], .field-unit input[type="number"] {
  flex: 1 1 auto; width: 100%; min-width: 0; padding-right: 62px;
}
.field-unit .unit {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; pointer-events: none;
  font-size: .84rem; font-weight: 600; color: var(--muted);
}
.field-unit .unit .icon { color: var(--blue-500); }
/* Fleches natives retirees : le champ reste net, la saisie clavier suffit */
.field-unit input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.field-unit input[type="number"]::-webkit-outer-spin-button,
.field-unit input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Admin : formule choisie au moment de donner le premium (liste des membres) */
.grant-premium-form { display: flex; align-items: center; gap: 8px; }
.grant-premium-form .field-select { padding: 8px 12px; font-size: .84rem; }

/* Admin : proprietaire d'une cle dans la liste du stock */
.stock-owner { flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }

@media (max-width: 720px) {
  .premium-status { flex-direction: column; align-items: flex-start; }
  .premium-status .btn { width: 100%; justify-content: center; }
  .grant-premium-form { flex-wrap: wrap; }
  .stock-owner { max-width: 100%; white-space: normal; }
}

/* ---------- Theme sombre ---------- */
[data-theme="dark"] .premium-status { background: linear-gradient(120deg, rgba(34,197,94,.16), rgba(168,85,247,.12)); border-color: rgba(34,197,94,.4); }
[data-theme="dark"] .plan-features .icon { color: #6ee7a5; }

/* Bouton « publier » d'une ressource ou d'un produit encore en brouillon :
   l'icone cadenas s'ambre pour reperer d'un coup d'oeil ce qui n'est pas en ligne */
.icon-btn.is-draft { border-color: rgba(234,179,8,.45); }
.icon-btn.is-draft .icon { color: #ca8a04; }
[data-theme="dark"] .icon-btn.is-draft .icon { color: #fcd34d; }

/* Apercu de la video hebergee dans le formulaire d'une ressource */
.video-admin-preview {
  width: 100%; max-height: 220px; border-radius: 13px;
  border: 1px solid var(--glass-border); background: #000;
}
/* Case a cocher collee sous un apercu : pas de decalage vertical a rattraper */
.field-check.compact-check { padding-top: 8px; }

/* Formules premium : bouton « Plus d'infos » et fiche detaillee */
.plan-more {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  padding: 0; border: none; background: none; cursor: pointer;
  font-family: var(--font-body); font-size: .89rem; font-weight: 600; color: var(--blue-500);
  border-bottom: 1px solid transparent; transition: border-color .2s, color .2s;
}
.plan-more:hover { color: var(--blue-600); border-bottom-color: currentColor; }
.plan-more .icon { color: currentColor; }

.plan-modal {
  position: fixed; inset: 0; z-index: 120; padding: 20px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 12, 22, .72); backdrop-filter: blur(4px);
  animation: planFade .18s ease;
}
.plan-modal[hidden] { display: none; }
@keyframes planFade { from { opacity: 0; } to { opacity: 1; } }
.plan-modal-box {
  width: min(620px, 100%); max-height: min(80vh, 720px); overflow-y: auto;
  border-radius: var(--radius-lg); padding: 26px 28px;
  display: flex; flex-direction: column; gap: 18px;
}
.plan-modal-head { display: flex; align-items: center; gap: 14px; }
.plan-modal-head h2 { font-family: var(--font-display); font-size: 1.25rem; margin: 0; }
.plan-modal-head .icon-btn { margin-left: auto; flex-shrink: 0; }
.plan-modal-body { color: var(--muted); font-size: .95rem; line-height: 1.7; }
.plan-modal-body p + p { margin-top: 12px; }
.plan-modal-foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-top: 16px; border-top: 1px solid var(--glass-border);
}
.plan-modal-foot > form { flex: 1 1 auto; }
.plan-modal-foot .btn-lg { width: 100%; justify-content: center; }
/* Plus de defilement derriere la fiche ouverte */
body.modal-open { overflow: hidden; }

/* Admin : bloc depliant « Ajouter une formule » */

@media (max-width: 720px) {
  .plan-modal { padding: 12px; }
  .plan-modal-box { padding: 20px; max-height: 88vh; }
  .plan-modal-foot .btn { width: 100%; justify-content: center; }
}

/* Profil : cle premium livree, en attente d'activation sur Discord */
.key-callout {
  display: flex; flex-direction: column; gap: 16px;
  padding: 20px 22px; margin-bottom: 20px;
  border: 1px solid rgba(168,85,247,.4); border-radius: var(--radius);
  background: var(--grad-soft);
}
.key-callout-head { display: flex; align-items: flex-start; gap: 14px; }
.key-callout-head > div { display: flex; flex-direction: column; gap: 4px; }
.key-callout-head strong { font-family: var(--font-display); font-size: 1.05rem; }
.key-callout-head span { color: var(--muted); font-size: .92rem; }
.key-callout-icon {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: linear-gradient(135deg, var(--accent-from), var(--accent-to));
}
.key-callout .delivery-row { background: rgba(255,255,255,.55); }
[data-theme="dark"] .key-callout .delivery-row { background: rgba(13,20,32,.55); }
.key-callout > .btn { align-self: flex-start; }

@media (max-width: 720px) {
  .key-callout { padding: 16px; }
  .key-callout > .btn { width: 100%; justify-content: center; }
  .key-callout .delivery-row { flex-wrap: wrap; }
  .key-callout .delivery-row .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   Téléchargement : gratuit (avec pub) et premium (sans pub)
   ============================================================ */

/* Libellé sur deux lignes dans un bouton : action + précision */
.btn-stack { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.2; text-align: left; }
.btn-stack strong { font-weight: 700; }
.btn-stack small { font-size: .78rem; font-weight: 500; opacity: .85; }
.btn-block .btn-stack { align-items: center; text-align: center; }

/* Bouton « sans publicité » : doré, pour le distinguer du bouton gratuit */
.btn-premium {
  background: linear-gradient(120deg, #f5b544, #e08a1e);
  color: #2a1d05; border: none;
  box-shadow: 0 10px 30px -8px rgba(224,138,30,.5);
}
.btn-premium:hover { box-shadow: 0 0 0 1px rgba(245,181,68,.5), 0 12px 34px -8px rgba(224,138,30,.6); color: #2a1d05; }
.btn-premium .icon { color: #2a1d05; }
.download-card .btn + .btn { margin-top: 10px; }

/* Version secondaire d'une release : icône éclair verrouillée pour les non-premium */
.icon-btn.is-premium-locked { border-color: rgba(224,138,30,.45); }
.icon-btn.is-premium-locked .icon { color: #e08a1e; }

/* Admin : deux emplacements de fichier par version */
.version-link-form + .version-link-form { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--glass-border); }
.chip-premium { background: rgba(224,138,30,.14); color: #b26a10; border-color: rgba(224,138,30,.4); }
.chip-premium .icon { color: #e08a1e; }
[data-theme="dark"] .chip-premium { background: rgba(245,181,68,.16); color: #f5b544; border-color: rgba(245,181,68,.4); }
.btn-ghost.danger { color: #dc2626; }
.btn-ghost.danger:hover { border-color: rgba(220,38,38,.5); color: #b91c1c; }
[data-theme="dark"] .btn-ghost.danger { color: #f87171; }

/* ==========================================================================
   ACCUEIL — page Loader (hero, chiffres, bento, installation, CTA)
   ==========================================================================
   Utilise uniquement par views/home.ejs. Les couleurs passent par les jetons
   du theme (--grad, --glass, --navy...) : changer l'accent dans
   /admin/settings recolore aussi cette page.
   ========================================================================== */

.section-band { padding: 0 0 20px; margin-top: -46px; position: relative; z-index: 3; }

/* ---------- Hero ---------- */

.hero-v2 {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: max(720px, 100svh);
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--nav-h) + 48px) 24px 128px;
}
.hero-v2-canvas { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-v2-grid {
  position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(circle at 50% 38%, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 38%, #000 10%, transparent 72%);
}
/* Deux colonnes : le discours a gauche, la capture du Loader a droite */
.hero-split-inner {
  width: min(1240px, 100%); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px; align-items: center;
}
.hero-split-copy { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }

.hero-pill {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px;
  padding: 7px 15px; border-radius: 999px;
  border: 1px solid var(--glass-border); background: var(--glass);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: var(--navy); font-size: .8rem; font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.hero-pill-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #34d399; flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(52,211,153,.55); animation: pulse 2.4s infinite;
}

.hero-v2-title {
  margin-bottom: 20px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.6rem, 4.4vw, 4.1rem); line-height: 1; letter-spacing: -.045em;
  color: var(--navy);
}
.hero-v2-title-accent {
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

.hero-v2-sub {
  max-width: 520px; margin-bottom: 28px;
  color: var(--muted); font-size: clamp(.96rem, 1.3vw, 1.06rem); line-height: 1.7;
}

.hero-split-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.btn-glass {
  background: var(--glass); color: var(--navy);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.btn-glass:hover { border-color: var(--blue-300); color: var(--blue-700); }
/* Loader pas encore en ligne : le bouton reste visible mais inerte */
.btn.is-disabled { opacity: .55; cursor: default; pointer-events: none; box-shadow: none; }

/* Compteur d'ouverture (/admin/countdown) : le bouton inerte porte le temps
   restant sur une deuxieme ligne, donc un peu plus lisible que le bouton nu. */
.btn.btn-countdown { opacity: .82; padding-top: 9px; padding-bottom: 9px; }
.btn-countdown .countdown-copy {
  display: inline-flex; flex-direction: column; align-items: center; line-height: 1.2;
}
.btn-countdown .countdown-time {
  font-size: .82em; font-weight: 700; letter-spacing: .05em;
  font-variant-numeric: tabular-nums; opacity: .9;
}
.btn-countdown .countdown-time[hidden] { display: none; }
.countdown-preview { font-variant-numeric: tabular-nums; letter-spacing: .03em; }

.hero-split-note {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 28px;
  color: var(--muted); font-size: .82rem;
}
.hero-split-note .icon { color: var(--blue-400); flex: 0 0 auto; }

.hero-v2-trust {
  display: flex; flex-wrap: wrap; gap: 10px 20px; list-style: none;
  color: var(--muted); font-size: .84rem; font-weight: 500;
}
.hero-v2-trust li { display: inline-flex; align-items: center; gap: 7px; }
.hero-v2-trust .icon { color: var(--blue-400); }

/* Capture de l'application : cadre en verre, halo d'accent, leger relief */
.hero-split-visual { position: relative; perspective: 1400px; }
.shot-frame {
  position: relative; padding: 10px; border-radius: 20px;
  border: 1px solid var(--glass-border); background: var(--glass);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-lg);
  transform: perspective(1400px) rotateY(-7deg) rotateX(3deg);
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.hero-split-visual:hover .shot-frame { transform: perspective(1400px) rotateY(-2deg) rotateX(1deg) translateY(-6px); }
.shot-frame img {
  width: 100%; height: auto; border-radius: 13px; display: block;
  border: 1px solid rgba(192,132,252,.14);
}
.hero-v2-scroll {
  position: absolute; left: 50%; bottom: 78px; transform: translateX(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--glass-border); background: var(--glass);
  color: var(--blue-400); box-shadow: var(--shadow-sm);
  animation: bounceY 2.4s infinite;
}

/* Repli quand aucune capture n'est televersee dans /admin/settings */
.loader-window {
  border-radius: 18px; overflow: hidden;
  border: 1px solid var(--glass-border); background: rgba(9,15,25,.86);
  box-shadow: var(--shadow-lg);
  transform: perspective(1400px) rotateY(-7deg) rotateX(3deg);
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.hero-split-visual:hover .loader-window { transform: perspective(1400px) rotateY(-2deg) rotateX(1deg) translateY(-6px); }
.loader-window-bar {
  display: flex; align-items: center; gap: 7px; padding: 11px 15px;
  border-bottom: 1px solid rgba(192,132,252,.14); background: rgba(255,255,255,.03);
}
.loader-window-bar span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.2); }
.loader-window-bar span:first-child { background: #ff5f57; }
.loader-window-bar span:nth-child(2) { background: #febc2e; }
.loader-window-bar span:nth-child(3) { background: #28c840; }
.loader-window-bar em {
  margin-left: auto; font-style: normal; letter-spacing: .12em;
  color: rgba(233,242,249,.5); font-size: .64rem; font-weight: 800;
}
.loader-window-body { padding: 18px; display: flex; flex-direction: column; gap: 9px; }
.loader-line {
  display: flex; align-items: center; gap: 10px; padding: 11px 13px;
  border-radius: 12px; border: 1px solid rgba(192,132,252,.12); background: rgba(255,255,255,.03);
  color: rgba(233,242,249,.78); font-size: .82rem;
}
.loader-line b { margin-left: auto; color: var(--blue-600); font-size: .8rem; }
.loader-line-head { background: rgba(52,211,153,.08); border-color: rgba(52,211,153,.24); color: #a7f3d0; font-weight: 600; }
.loader-dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52,211,153,.5); animation: pulse 2.2s infinite; }
.loader-chip {
  width: 24px; height: 24px; border-radius: 8px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad-soft); color: var(--blue-500);
}
.loader-progress { height: 5px; margin-top: 4px; border-radius: 6px; background: rgba(192,132,252,.12); overflow: hidden; }
.loader-progress span { display: block; height: 100%; width: 38%; border-radius: 6px; background: var(--grad); animation: slideBar 2.8s ease-in-out infinite; }

/* ---------- Barre de chiffres ---------- */

.metric-bar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--glass-border); border-radius: 22px;
  background: var(--glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-md); overflow: hidden;
}
.metric {
  position: relative; padding: 24px 26px;
  display: grid; grid-template-columns: 40px minmax(0, 1fr);
  grid-template-areas: "icon value" "icon label"; align-items: center;
  column-gap: 14px; transition: background .25s;
}
.metric + .metric::before {
  content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px;
  background: var(--glass-border);
}
.metric:hover { background: rgba(255,255,255,.035); }
.metric-icon {
  grid-area: icon; width: 40px; height: 40px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad); color: #06121f;
  box-shadow: 0 8px 20px -8px rgba(168,85,247,.6);
}
.metric-value {
  grid-area: value; min-width: 0;
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 700;
  letter-spacing: -.03em; line-height: 1.1; color: var(--navy);
}
/* Valeurs textuelles (« Windows », « 4,2 Mo ») : plus petites que les nombres */
.metric-value-sm { font-size: 1.28rem; }
.metric-label {
  grid-area: label; min-width: 0; overflow: hidden;
  color: var(--muted); font-size: .82rem; white-space: nowrap; text-overflow: ellipsis;
}

/* ---------- Bento « Ce que fait le Loader » ---------- */

.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.bento-card {
  position: relative; overflow: hidden; padding: 26px;
  border-radius: 22px; border: 1px solid var(--glass-border);
  background: var(--glass); backdrop-filter: blur(16px); box-shadow: var(--shadow-sm);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.bento-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(340px 200px at 50% 0%, rgba(255,255,255,.055), transparent 70%);
  opacity: 0; transition: opacity .35s;
}
.bento-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--blue-300); }
.bento-card:hover::after { opacity: 1; }
.bento-card h3 { position: relative; z-index: 2; font-family: var(--font-display); font-size: 1.08rem; margin-bottom: 8px; letter-spacing: -.01em; }
.bento-card p { position: relative; z-index: 2; color: var(--muted); font-size: .9rem; line-height: 1.65; }
.bento-icon {
  position: relative; z-index: 2;
  width: 44px; height: 44px; margin-bottom: 16px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad-soft); color: var(--blue-500);
  border: 1px solid rgba(168,85,247,.25);
}
.bento-lead {
  grid-column: span 2; grid-row: span 2;
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  padding: 32px;
}
.bento-lead-art { position: relative; height: 190px; display: flex; align-items: center; justify-content: center; }
.bento-ring { position: absolute; border-radius: 50%; border: 1px dashed rgba(168,85,247,.3); animation: spin 26s linear infinite; }
.bento-ring:nth-child(1) { width: 190px; height: 190px; }
.bento-ring:nth-child(2) { width: 140px; height: 140px; animation-duration: 18s; animation-direction: reverse; border-style: solid; border-color: rgba(168,85,247,.2); }
.bento-ring:nth-child(3) { width: 92px; height: 92px; animation-duration: 12s; }
.bento-core {
  position: relative; width: 62px; height: 62px; border-radius: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad); color: #fff;
  box-shadow: 0 16px 40px -12px rgba(168,85,247,.7);
}
.bento-lead-copy h3 { font-size: 1.32rem; }
.bento-stat {
  position: relative; z-index: 2; display: inline-flex; align-items: baseline; gap: 8px; margin-top: 16px;
  color: var(--muted); font-size: .85rem;
}
.bento-stat strong { font-family: var(--font-display); font-size: 1.5rem; color: var(--navy); letter-spacing: -.02em; }
.bento-wide { grid-column: span 2; }

/* ---------- Installation ---------- */

.flow { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; }
.flow::before {
  content: ''; position: absolute; top: 52px; left: 16%; right: 16%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-border) 15%, var(--glass-border) 85%, transparent);
}
.flow-step {
  position: relative; padding: 30px 26px; text-align: center;
  border-radius: 22px; border: 1px solid var(--glass-border);
  background: var(--glass); backdrop-filter: blur(16px); box-shadow: var(--shadow-sm);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.flow-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--blue-300); }
.flow-num {
  position: absolute; top: 16px; right: 20px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: rgba(168,85,247,.3);
}
.flow-icon {
  width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad); color: #fff;
  box-shadow: 0 12px 28px -10px rgba(168,85,247,.7);
}
.flow-step h3 { font-family: var(--font-display); font-size: 1.08rem; margin-bottom: 8px; }
.flow-step p { color: var(--muted); font-size: .9rem; line-height: 1.6; }
.flow-step code { padding: 1px 6px; border-radius: 6px; background: var(--blue-100); color: var(--blue-700); }

/* ---------- CTA ---------- */

.cta-v2 {
  position: relative; overflow: hidden; text-align: center;
  padding: 68px 40px; border-radius: 32px;
  border: 1px solid rgba(168,85,247,.35);
  background: linear-gradient(135deg, #1e1035, #140b24 55%, #0e071a);
  box-shadow: 0 30px 80px -24px rgba(0,0,0,.85), 0 0 50px -10px rgba(168,85,247,.25);
  color: #fff;
}
.cta-v2-grid {
  position: absolute; inset: 0; opacity: .08;
  background-image:
    linear-gradient(rgba(255,255,255,.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.4) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at center, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at center, #000, transparent 72%);
}
.cta-v2-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.cta-v2-kicker {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(168,85,247,.35); background: rgba(168,85,247,.12);
  color: #e9d5ff; font-size: .74rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.cta-v2 h2 {
  font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  letter-spacing: -.03em; line-height: 1.12; margin-bottom: 12px; color: #fff;
}
.cta-v2 p { max-width: 520px; margin: 0 auto 30px; color: #d8b4fe; font-size: .98rem; line-height: 1.7; }
.cta-v2-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-v2 .btn-white { background: var(--grad); color: #fff; border: 1px solid transparent; box-shadow: 0 10px 25px -5px rgba(168,85,247,.5); }
.cta-v2 .btn-white:hover { filter: brightness(1.1); color: #fff; }
.cta-v2 .btn-outline-white { background: rgba(18,13,29,.6); color: #fff; border: 1px solid rgba(168,85,247,.45); }
.cta-v2 .btn-outline-white:hover { background: rgba(168,85,247,.2); border-color: rgba(168,85,247,.8); color: #fff; }

/* ---------- Responsive accueil ---------- */

@media (max-width: 1080px) {
  .hero-v2 { min-height: 0; padding: calc(var(--nav-h) + 46px) 24px 118px; }
  .hero-split-inner { grid-template-columns: 1fr; gap: 44px; }
  .hero-split-copy { align-items: center; text-align: center; }
  .hero-v2-sub { margin-left: auto; margin-right: auto; }
  .hero-split-actions, .hero-v2-trust { justify-content: center; }
  .shot-frame, .loader-window { transform: none; }
  .hero-split-visual:hover .shot-frame,
  .hero-split-visual:hover .loader-window { transform: translateY(-4px); }
  .hero-v2-scroll { display: none; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-lead { grid-column: span 2; grid-row: auto; }
}

@media (max-width: 860px) {
  .metric-bar { grid-template-columns: repeat(2, 1fr); }
  .metric:nth-child(2n+1)::before { display: none; }
  .metric-bar .metric:nth-child(n+3) { border-top: 1px solid var(--glass-border); }
  .flow { grid-template-columns: 1fr; }
  .flow::before { display: none; }
}

@media (max-width: 700px) {
  .hero-v2 { padding: calc(var(--nav-h) + 34px) 18px 92px; }
  .hero-v2-title { font-size: clamp(2.3rem, 11vw, 3.2rem); }
  .hero-split-actions { width: 100%; flex-direction: column; }
  .hero-split-actions .btn { width: 100%; }
  .hero-v2-trust { gap: 8px 16px; font-size: .78rem; }
  .section-band { margin-top: -34px; }
  .bento { grid-template-columns: 1fr; }
  .bento-lead, .bento-wide { grid-column: span 1; }
  .cta-v2 { padding: 48px 24px; border-radius: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-v2-scroll, .bento-ring, .loader-progress span, .panel-progress span, .glass-chip, .orbit-ring { animation: none !important; }
}

/* ============================================================
   AC PATCHER'S — HERO 3D WIDGET & LOADER APP FRAME
   ============================================================ */

.hero-v2-purple {
  background:
    radial-gradient(ellipse 65% 55% at 75% 15%, rgba(168, 85, 247, 0.22), transparent 70%),
    radial-gradient(ellipse 50% 50% at 20% 80%, rgba(99, 102, 241, 0.15), transparent 60%),
    var(--bg);
}

.hero-visual-3d {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1200px;
}

.hero-visual-3d .tilt-scene {
  position: relative;
  width: min(480px, 100%);
  transform-style: preserve-3d;
  will-change: transform;
}

.hero-visual-3d .main-panel {
  background: rgba(18, 14, 32, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8), 0 0 35px -5px rgba(168, 85, 247, 0.2);
  position: relative;
  z-index: 2;
  transform-style: preserve-3d;
  will-change: transform, box-shadow;
}

.hero-visual-3d .panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-visual-3d .panel-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}

.hero-visual-3d .panel-title .icon {
  color: #c084fc;
}

.hero-visual-3d .panel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 10px #22c55e;
  animation: pulse 2s infinite;
}

.hero-visual-3d .panel-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero-visual-3d .panel-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(30, 22, 54, 0.65);
  border: 1px solid rgba(168, 85, 247, 0.2);
  color: #fff;
  text-decoration: none;
  transition: all 0.25s ease;
}

.hero-visual-3d .panel-row:hover {
  transform: translateX(6px);
  background: rgba(45, 32, 80, 0.85);
  border-color: rgba(168, 85, 247, 0.5);
  box-shadow: 0 8px 25px -5px rgba(168, 85, 247, 0.35);
}

.hero-visual-3d .panel-rank {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: #c084fc;
  min-width: 26px;
}

.hero-visual-3d .panel-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.hero-visual-3d .panel-name {
  font-weight: 700;
  font-size: 0.96rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-visual-3d .panel-sub {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
}

.hero-visual-3d .panel-dl {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #c084fc;
  flex-shrink: 0;
}

.hero-visual-3d .panel-progress {
  margin-top: 18px;
  height: 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.hero-visual-3d .panel-progress span {
  display: block;
  height: 100%;
  width: 45%;
  border-radius: 99px;
  background: linear-gradient(90deg, #a855f7, #6366f1);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.8);
  animation: slideBar 2.8s ease-in-out infinite;
}

.hero-visual-3d .glass-chip {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(22, 16, 42, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(168, 85, 247, 0.35);
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.7), 0 0 20px rgba(168, 85, 247, 0.25);
  color: #fff;
  font-weight: 600;
  font-size: 0.84rem;
  white-space: nowrap;
}

.hero-visual-3d .glass-chip .icon {
  color: #c084fc;
}

.hero-visual-3d .float-1 {
  top: -18px;
  right: -10px;
  animation: floatY 5.5s ease-in-out infinite;
}

.hero-visual-3d .float-2 {
  bottom: -16px;
  left: -14px;
  animation: floatY 6.5s ease-in-out infinite 1s;
}

.hero-visual-3d .float-3 {
  top: 50%;
  right: -24px;
  transform: translateY(-50%);
  animation: floatY 7s ease-in-out infinite 2s;
}

.hero-visual-3d .orbit-ring {
  position: absolute;
  inset: -36px;
  z-index: 1;
  border-radius: 50%;
  border: 1.5px dashed rgba(168, 85, 247, 0.3);
  animation: spin 35s linear infinite;
  pointer-events: none;
}

/* ---------- Loader App Mockup Frame (Image 2) ---------- */
.app-mockup-frame {
  position: relative;
  background: #090e17;
  border: 1px solid rgba(34, 211, 238, 0.25);
  border-radius: 20px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.85), 0 0 50px rgba(34, 211, 238, 0.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #e2e8f0;
}

.mockup-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: #060a10;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mockup-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
}

.mockup-brand svg {
  color: #22d3ee;
}

.mockup-top-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mockup-tuto-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #f87171;
  font-size: 0.74rem;
  font-weight: 700;
  text-decoration: none;
}

.mockup-user-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #94a3b8;
}

.mockup-user-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #22d3ee;
}

.mockup-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #64748b;
}

.mockup-body {
  display: grid;
  grid-template-columns: 56px 1fr;
  min-height: 400px;
}

.mockup-sidebar {
  background: #060a10;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
  gap: 18px;
}

.mockup-nav-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
}

.mockup-nav-icon.active, .mockup-nav-icon:hover {
  background: rgba(34, 211, 238, 0.15);
  color: #22d3ee;
}

.mockup-flags {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mockup-flag {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mockup-content {
  padding: 20px;
  background: #0b111c;
}

.mockup-crumb {
  font-size: 0.8rem;
  color: #64748b;
  margin-bottom: 16px;
}

.mockup-crumb span {
  color: #94a3b8;
}

.mockup-products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.mockup-product-card {
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mockup-product-card.has-glow {
  border-color: rgba(34, 211, 238, 0.4);
  box-shadow: 0 0 25px rgba(34, 211, 238, 0.18);
}

.mockup-card-badges {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mockup-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 99px;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #4ade80;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.mockup-status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
}

.mockup-access-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  font-size: 0.68rem;
  font-weight: 600;
}

.mockup-access-badge.active {
  background: rgba(34, 211, 238, 0.15);
  border-color: rgba(34, 211, 238, 0.4);
  color: #38bdf8;
}

.mockup-card-preview {
  height: 80px;
  border-radius: 8px;
  background: #080d14;
  border: 1px solid rgba(255, 255, 255, 0.04);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mockup-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mockup-card-foot h4 {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.mockup-card-foot small {
  color: #64748b;
  font-size: 0.7rem;
}

.mockup-play-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #38bdf8, #2563eb);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.5);
  cursor: pointer;
}

.mockup-bottom-hint {
  display: flex;
  justify-content: flex-end;
  font-size: 0.72rem;
  color: #64748b;
  padding-top: 10px;
}

.mockup-bottom-hint strong {
  color: #38bdf8;
}

@media (max-width: 768px) {
  .mockup-products-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   VANIX — Modale de Confirmation Personnalisée (Remplacement window.confirm)
   ========================================================================== */
.vanix-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(8, 4, 16, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.vanix-confirm-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.vanix-confirm-box {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: rgba(19, 13, 31, 0.95);
  border: 1.5px solid rgba(239, 68, 68, 0.38);
  border-radius: 24px;
  padding: 28px 26px;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.95), 0 0 40px -5px rgba(239, 68, 68, 0.25);
  transform: scale(0.92) translateY(12px);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease;
  overflow: hidden;
}

.vanix-confirm-overlay.is-open .vanix-confirm-box {
  transform: scale(1) translateY(0);
}

.vanix-confirm-glow {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  height: 120px;
  background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0.4) 0%, rgba(168, 85, 247, 0.2) 50%, transparent 80%);
  pointer-events: none;
  filter: blur(22px);
}

.vanix-confirm-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  position: relative;
}

.vanix-confirm-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(239, 68, 68, 0.15);
  border: 1.5px solid rgba(239, 68, 68, 0.45);
  color: #f87171;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.25);
  animation: pulse-confirm-icon 2s infinite alternate;
}

@keyframes pulse-confirm-icon {
  0% { transform: scale(1); box-shadow: 0 0 15px rgba(239, 68, 68, 0.2); }
  100% { transform: scale(1.05); box-shadow: 0 0 25px rgba(239, 68, 68, 0.45); }
}

.vanix-confirm-titles {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.vanix-confirm-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.01em;
}

.vanix-confirm-badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #f87171;
  letter-spacing: 0.04em;
}

.vanix-confirm-body {
  margin-bottom: 24px;
  position: relative;
}

.vanix-confirm-text {
  font-size: 0.94rem;
  color: #cbd5e1;
  line-height: 1.6;
  margin: 0;
  word-break: break-word;
}

.vanix-confirm-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  position: relative;
}

.vanix-confirm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border: none;
  outline: none;
}

.vanix-confirm-btn-cancel {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e2e8f0;
}

.vanix-confirm-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  transform: translateY(-1px);
}

.vanix-confirm-btn-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(239, 68, 68, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.vanix-confirm-btn-danger:hover {
  background: linear-gradient(135deg, #f87171, #ef4444);
  box-shadow: 0 6px 25px rgba(239, 68, 68, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.vanix-confirm-btn-danger:active,
.vanix-confirm-btn-cancel:active {
  transform: translateY(0);
}

/* ==========================================================================
   SHOWCASE BENTO SECTION — INTERACTIVE & ANIMATED (ACCUEIL)
   ========================================================================== */

.vanix-bento-showcase {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 1180px;
  margin: 0 auto;
}

.vanix-bento-top {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.vanix-bento-bottom {
  display: grid;
  grid-template-columns: 2fr 1.12fr;
  gap: 24px;
}

@media (max-width: 980px) {
  .vanix-bento-top {
    grid-template-columns: 1fr;
  }
  .vanix-bento-bottom {
    grid-template-columns: 1fr;
  }
}

.vanix-bento-box {
  background: rgba(14, 9, 26, 0.94);
  border: 1.5px solid rgba(168, 85, 247, 0.28);
  border-radius: 24px;
  padding: 26px 24px;
  box-shadow: 0 16px 40px -15px rgba(0, 0, 0, 0.9), 0 0 30px -10px rgba(168, 85, 247, 0.2);
  backdrop-filter: blur(28px);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.vanix-bento-box:hover {
  transform: translateY(-3px);
  border-color: rgba(192, 132, 252, 0.5);
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.95), 0 0 35px -5px rgba(168, 85, 247, 0.35);
}

.vanix-bento-header {
  margin-top: auto;
  padding-top: 18px;
}

.vanix-bento-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

.vanix-bento-desc {
  font-size: 0.84rem;
  color: #94a3b8;
  line-height: 1.5;
  margin: 0;
}

/* Card 1 : Pro Cyber Delivery Hub */
.vanix-delivery-widget {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(18, 12, 34, 0.75);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 18px;
  padding: 14px;
}

.vanix-delivery-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(168, 85, 247, 0.15);
  padding-bottom: 8px;
}

.vanix-delivery-order-id {
  font-family: monospace;
  font-size: 0.72rem;
  font-weight: 800;
  color: #cbd5e1;
  letter-spacing: 0.05em;
}

.vanix-delivery-speed-pill {
  font-size: 0.68rem;
  font-weight: 800;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.vanix-progress-ring-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  position: relative;
}

.vanix-progress-ring-glow {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.4) 0%, transparent 70%);
  animation: vanixRingPulse 3s ease-in-out infinite alternate;
}

.vanix-progress-ticks-bg {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 1px dashed rgba(168, 85, 247, 0.25);
  animation: spin 30s linear infinite;
}

@keyframes vanixRingPulse {
  0% { transform: scale(0.9); opacity: 0.5; }
  100% { transform: scale(1.2); opacity: 0.9; filter: blur(6px); }
}

.vanix-progress-circle-svg {
  width: 155px;
  height: 155px;
  transform: rotate(-90deg);
  position: relative;
  z-index: 1;
}

.vanix-progress-circle-bg {
  fill: none;
  stroke: rgba(168, 85, 247, 0.12);
  stroke-width: 10;
}

.vanix-progress-circle-bar {
  fill: none;
  stroke: url(#vanixProgressGrad);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 402;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.1s linear;
}

.vanix-progress-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 2;
  pointer-events: none;
  width: 85%;
}

.vanix-circle-label {
  font-size: 0.62rem;
  color: #c084fc;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1px;
}

.vanix-circle-num {
  font-size: 2rem;
  font-weight: 900;
  color: #ffffff;
  font-family: var(--font-display);
  line-height: 1;
  margin: 1px 0;
  text-shadow: 0 0 16px rgba(168, 85, 247, 0.6);
}

.vanix-live-pill {
  font-size: 0.64rem;
  color: #4ade80;
  font-weight: 700;
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.35);
  border-radius: 999px;
  padding: 2px 9px;
  transition: all 0.25s ease;
  white-space: nowrap;
}

/* Delivery Mini Steps List */
.vanix-delivery-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid rgba(168, 85, 247, 0.15);
  padding-top: 10px;
}

.vanix-del-step {
  display: flex;
  align-items: center;
  font-size: 0.72rem;
  color: #cbd5e1;
  font-weight: 600;
  padding: 5px 8px;
  background: rgba(12, 8, 22, 0.6);
  border-radius: 8px;
  border: 1px solid rgba(168, 85, 247, 0.12);
}

.vanix-del-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px #4ade80;
  display: inline-block;
  margin-right: 8px;
  flex-shrink: 0;
}

.vanix-del-val {
  font-family: monospace;
  font-size: 0.68rem;
  font-weight: 700;
  color: #4ade80;
  margin-left: auto;
}

/* Card 2 : Key Redeemer Mockup with Typing & Shimmer */
.vanix-redeem-mockup {
  background: rgba(22, 14, 40, 0.7);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.vanix-pulse-dot-green {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px #4ade80;
  animation: vanixGreenPulse 1.8s infinite;
}

@keyframes vanixGreenPulse {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 12px #4ade80; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

.vanix-key-input-box {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 8, 22, 0.95);
  border: 1.5px solid rgba(168, 85, 247, 0.4);
  border-radius: 12px;
  padding: 10px 14px;
  height: 48px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 15px rgba(168, 85, 247, 0.2);
  gap: 2px;
}

.vanix-typing-text {
  font-family: monospace;
  font-size: 0.92rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.08em;
}

.vanix-typing-cursor {
  font-family: monospace;
  font-size: 1.1rem;
  color: #c084fc;
  font-weight: 800;
  animation: vanixBlink 0.8s infinite;
}

@keyframes vanixBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* HWID Verification Box Simulation */
.vanix-hwid-verify-box {
  background: rgba(10, 6, 20, 0.95);
  border: 1.5px solid rgba(168, 85, 247, 0.45);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: vanixPanelFade 0.25s ease;
  box-shadow: inset 0 0 15px rgba(0,0,0,0.8), 0 0 15px rgba(168, 85, 247, 0.2);
}

.vanix-hwid-step-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #c084fc;
}

.vanix-hwid-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(192, 132, 252, 0.3);
  border-top-color: #c084fc;
  animation: spin 0.8s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}

.vanix-hwid-bar-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  overflow: hidden;
}

.vanix-hwid-bar-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #a855f7, #38bdf8, #4ade80);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.vanix-hwid-log {
  font-family: monospace;
  font-size: 0.68rem;
  color: #94a3b8;
  letter-spacing: 0.04em;
  text-align: left;
}

.vanix-redeem-btn {
  background: linear-gradient(90deg, #9333ea, #c084fc, #7c3aed, #9333ea);
  background-size: 200% 100%;
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.86rem;
  padding: 12px 16px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(168, 85, 247, 0.5);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  animation: vanixBtnShimmer 4s ease infinite;
}

@keyframes vanixBtnShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.vanix-redeem-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(168, 85, 247, 0.8);
}

.vanix-redeem-btn.activated {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  box-shadow: 0 4px 18px rgba(16, 185, 129, 0.6) !important;
}

/* Card 3 : Live Sequential Animated Chat */
.vanix-chat-mockup {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
  min-height: 190px;
}

.vanix-chat-item {
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: none;
}

.vanix-chat-item.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  display: block;
}

.vanix-chat-bot {
  background: rgba(30, 20, 52, 0.85);
  border: 1px solid rgba(168, 85, 247, 0.2);
  color: #e2e8f0;
  border-radius: 14px 14px 14px 4px;
  padding: 8px 12px;
  font-size: 0.78rem;
  align-self: flex-start;
  max-width: 90%;
  line-height: 1.4;
}

.vanix-chat-user {
  background: linear-gradient(135deg, #9333ea, #6b21a8);
  color: #ffffff;
  border-radius: 14px 14px 4px 14px;
  padding: 8px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  align-self: flex-end;
  max-width: 85%;
  box-shadow: 0 4px 14px rgba(147, 51, 234, 0.4);
  line-height: 1.4;
}

.vanix-chat-resolved {
  border-color: rgba(74, 222, 128, 0.35) !important;
  background: rgba(18, 38, 28, 0.9) !important;
  box-shadow: 0 0 15px rgba(74, 222, 128, 0.2) !important;
}

.vanix-chat-typing {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 12px;
  width: fit-content;
  background: rgba(30, 20, 52, 0.6);
  border: 1px solid rgba(168, 85, 247, 0.2);
}

.vanix-chat-typing.show {
  display: flex;
}

.vanix-chat-typing.user-typing {
  align-self: flex-end;
  background: rgba(147, 51, 234, 0.3);
}

.vanix-chat-typing span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c084fc;
  animation: vanixTypingBounce 1.2s infinite ease-in-out;
}

.vanix-chat-typing span:nth-child(1) { animation-delay: 0s; }
.vanix-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.vanix-chat-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes vanixTypingBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-5px); opacity: 1; }
}

/* Card 4 : Interactive In-Game Menu Cheat */
.vanix-menu-frame {
  background: rgba(18, 12, 34, 0.95);
  border: 1.5px solid rgba(168, 85, 247, 0.35);
  border-radius: 18px;
  padding: 20px;
  min-height: 380px;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8), 0 0 25px rgba(168, 85, 247, 0.2);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vanix-mock-panel {
  animation: vanixPanelFade 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes vanixPanelFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.vanix-mock-keybind {
  background: rgba(168, 85, 247, 0.18);
  border: 1px solid rgba(168, 85, 247, 0.45);
  color: #c084fc;
  font-family: monospace;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 8px;
  letter-spacing: 0.05em;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.2);
  cursor: pointer;
  transition: all 0.2s ease;
}

.vanix-mock-keybind:hover {
  background: #a855f7;
  color: #ffffff;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.6);
  transform: scale(1.05);
}

.vanix-menu-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(168, 85, 247, 0.2);
  padding-bottom: 12px;
  flex-wrap: nowrap;
  gap: 10px;
  width: 100%;
}

.vanix-menu-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.vanix-menu-tab {
  background: rgba(30, 20, 52, 0.7);
  border: 1px solid rgba(168, 85, 247, 0.2);
  color: #cbd5e1;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.vanix-menu-tab:hover {
  border-color: rgba(192, 132, 252, 0.5);
  color: #ffffff;
}

.vanix-menu-badge {
  font-size: 0.72rem;
  font-weight: 800;
  color: #a855f7;
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.35);
  padding: 5px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.vanix-menu-tab.active {
  background: #a855f7;
  border-color: #c084fc;
  color: #ffffff;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.6);
}

.vanix-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 600px) {
  .vanix-menu-grid {
    grid-template-columns: 1fr;
  }
}

.vanix-menu-col {
  background: rgba(12, 8, 22, 0.8);
  border: 1px solid rgba(168, 85, 247, 0.18);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vanix-menu-col-title {
  font-size: 0.68rem;
  font-weight: 800;
  color: #a855f7;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom: 1px solid rgba(168, 85, 247, 0.15);
  padding-bottom: 6px;
}

/* Custom Interactive Mock Switch */
.vanix-mock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  color: #e2e8f0;
  font-weight: 600;
  user-select: none;
  cursor: pointer;
}

.vanix-mock-switch {
  width: 38px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  position: relative;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.vanix-mock-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.vanix-mock-switch.active {
  background: #a855f7;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.6);
}

.vanix-mock-switch.active::after {
  transform: translateX(18px);
}

/* Custom Interactive Range Slider */
.vanix-mock-slider-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vanix-mock-slider-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.76rem;
  color: #cbd5e1;
  font-weight: 600;
}

.vanix-mock-slider-val {
  color: #c084fc;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
}

.vanix-mock-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  outline: none;
  cursor: pointer;
}

.vanix-mock-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #c084fc;
  box-shadow: 0 0 8px #a855f7;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.vanix-mock-range::-webkit-slider-thumb:hover {
  transform: scale(1.25);
}

/* Card 5 : Radar Scanner Cyber & Sécurité Animée */
.vanix-radar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 0 16px;
  position: relative;
}

.vanix-radar-core {
  width: 145px;
  height: 145px;
  border-radius: 50%;
  border: 1.5px solid rgba(168, 85, 247, 0.35);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.18) 0%, rgba(12, 8, 22, 0.6) 80%);
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.25), inset 0 0 20px rgba(168, 85, 247, 0.15);
}

.vanix-radar-grid-lines {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image: 
    linear-gradient(rgba(168, 85, 247, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.12) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: center center;
}

.vanix-radar-ring-2 {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1px dashed rgba(168, 85, 247, 0.4);
  animation: vanixRingSpinCW 20s linear infinite !important;
  transform-origin: center center !important;
}

@keyframes vanixRingSpinCW {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.vanix-radar-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg at 50% 50%, rgba(192, 132, 252, 0.8) 0deg, rgba(168, 85, 247, 0.4) 45deg, transparent 90deg, transparent 360deg);
  animation: vanixRadarSweep 2.2s linear infinite !important;
  transform-origin: center center !important;
  pointer-events: none;
  z-index: 2;
}

@keyframes vanixRadarSweep {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.vanix-radar-shield {
  position: relative;
  z-index: 3;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: rgba(26, 16, 46, 0.95);
  border: 1.5px solid #c084fc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c084fc;
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.6), inset 0 0 10px rgba(168, 85, 247, 0.3);
  animation: vanixShieldPulse 2.5s ease-in-out infinite alternate !important;
}

@keyframes vanixShieldPulse {
  0% { transform: scale(1); box-shadow: 0 0 16px rgba(168, 85, 247, 0.4); }
  100% { transform: scale(1.08); box-shadow: 0 0 28px rgba(192, 132, 252, 0.85); color: #ffffff; }
}

/* Satellite Blips & Expanding Ping Waves */
.vanix-radar-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c084fc;
  box-shadow: 0 0 10px #c084fc;
  z-index: 3;
  animation: vanixDotBeacon 2.2s ease-in-out infinite !important;
}

@keyframes vanixDotBeacon {
  0% { transform: scale(0.9); opacity: 0.5; box-shadow: 0 0 6px #c084fc; }
  50% { transform: scale(1.35); opacity: 1; box-shadow: 0 0 16px #4ade80; background: #4ade80; }
  100% { transform: scale(0.9); opacity: 0.5; box-shadow: 0 0 6px #c084fc; }
}

.vanix-radar-ping {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid #4ade80;
  animation: vanixPingRipple 2.2s cubic-bezier(0, 0.2, 0.8, 1) infinite !important;
}

@keyframes vanixPingRipple {
  0% { transform: scale(0.6); opacity: 1; border-color: #4ade80; }
  100% { transform: scale(3.5); opacity: 0; border-color: #c084fc; }
}

.vanix-radar-dot-1 { top: 24px; right: 28px; animation-delay: 0s !important; }
.vanix-radar-dot-1 .vanix-radar-ping { animation-delay: 0s !important; }

.vanix-radar-dot-2 { bottom: 30px; left: 24px; animation-delay: 0.8s !important; }
.vanix-radar-dot-2 .vanix-radar-ping { animation-delay: 0.8s !important; }

.vanix-radar-dot-3 { top: 72px; left: 18px; animation-delay: 1.5s !important; }
.vanix-radar-dot-3 .vanix-radar-ping { animation-delay: 1.5s !important; }

/* Real-time Status Monitor Ticker */
.vanix-radar-status-bar {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(22, 14, 40, 0.8);
  border: 1px solid rgba(74, 222, 128, 0.3);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #e2e8f0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.vanix-radar-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px #4ade80;
  animation: vanixGreenPulse 1.5s infinite;
}

/* Security Modules List */
.vanix-radar-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.vanix-radar-item-interactive {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  color: #e2e8f0;
  font-weight: 600;
  background: rgba(20, 13, 36, 0.7);
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid rgba(168, 85, 247, 0.18);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.vanix-radar-item-interactive:hover,
.vanix-radar-item-interactive.scanning-active {
  background: rgba(35, 22, 58, 0.95);
  border-color: #4ade80;
  transform: translateX(4px);
  box-shadow: 0 0 16px rgba(74, 222, 128, 0.3);
}

.vanix-radar-item-interactive:active {
  transform: translateX(2px) scale(0.99);
}

.vanix-sec-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.vanix-radar-item-interactive:hover .vanix-sec-icon,
.vanix-radar-item-interactive.scanning-active .vanix-sec-icon {
  transform: scale(1.2);
}

.vanix-sec-badge {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   SECTION COMPARATIF QUALITÉ / VS SECTION (COMPACT & COULEURS DU SITE)
   ========================================================================== */

.vs-section {
  padding-top: 45px;
  padding-bottom: 55px;
  position: relative;
}

.vs-main-title {
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-transform: none;
  margin-bottom: 8px;
}

.vs-highlight-text {
  background: linear-gradient(135deg, #c084fc 0%, #a855f7 50%, #ec4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 25px rgba(168, 85, 247, 0.5);
}

.vs-sub-text {
  font-size: 0.94rem;
  color: #94a3b8;
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.5;
}

.vs-container {
  max-width: 880px;
  margin: 0 auto;
  position: relative;
}

.vs-card-outer {
  background: rgba(14, 9, 26, 0.95);
  border: 1.5px solid rgba(168, 85, 247, 0.28);
  border-radius: 22px;
  box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.95), 0 0 30px -10px rgba(168, 85, 247, 0.2);
  backdrop-filter: blur(20px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  overflow: hidden;
}

@media (max-width: 768px) {
  .vs-card-outer {
    grid-template-columns: 1fr;
  }
}

/* Colonne Pro (Gauche) */
.vs-col-pro {
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  background: radial-gradient(circle at 10% 20%, rgba(168, 85, 247, 0.08) 0%, transparent 60%);
}

/* Colonne Other (Droite) */
.vs-col-other {
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: rgba(9, 6, 18, 0.65);
  border-left: 1px solid rgba(168, 85, 247, 0.12);
}

@media (max-width: 768px) {
  .vs-col-other {
    border-left: none;
    border-top: 1px solid rgba(168, 85, 247, 0.12);
  }
}

.vs-col-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vs-col-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
}

.vs-title-other {
  color: #94a3b8;
}

.vs-col-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: #c084fc;
  letter-spacing: 0.03em;
}

.vs-badge-other {
  color: #64748b;
}

/* Score Box */
.vs-score-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vs-score-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vs-score-label {
  font-size: 0.65rem;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vs-score-num {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
}

.vs-score-pro {
  color: #c084fc;
}

.vs-score-other {
  color: #f87171;
}

.vs-score-bar-track {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.vs-score-bar-fill {
  height: 100%;
  border-radius: 999px;
}

.vs-fill-pro {
  width: 100%;
  background: linear-gradient(90deg, #9333ea, #c084fc);
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.6);
}

.vs-fill-other {
  width: 35%;
  background: linear-gradient(90deg, #f87171, #ef4444);
}

/* Central Floating VS Badge */
.vs-divider-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #140c26;
  border: 2px solid #a855f7;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.6), inset 0 0 10px rgba(168, 85, 247, 0.3);
}

@media (max-width: 768px) {
  .vs-divider-badge {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin: -24px auto;
  }
}

.vs-badge-glow {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.4) 0%, transparent 70%);
  animation: vanixRingPulse 3s ease-in-out infinite alternate;
}

.vs-badge-text {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.05em;
  text-shadow: 0 0 8px rgba(168, 85, 247, 0.8);
  position: relative;
  z-index: 2;
}

/* VS Items List */
.vs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.vs-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.vs-item-pro {
  background: rgba(22, 14, 38, 0.7);
  border: 1px solid rgba(168, 85, 247, 0.16);
}

.vs-item-pro:hover {
  background: rgba(32, 20, 56, 0.9);
  border-color: rgba(192, 132, 252, 0.4);
  transform: translateX(3px);
  box-shadow: 0 2px 12px rgba(168, 85, 247, 0.2);
}

.vs-item-other {
  background: rgba(15, 10, 24, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.vs-item-other:hover {
  background: rgba(22, 15, 34, 0.6);
  transform: translateX(2px);
}

.vs-icon-wrap {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vs-icon-check {
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.35);
  color: #4ade80;
}

.vs-icon-cross {
  background: rgba(248, 113, 113, 0.15);
  border: 1px solid rgba(248, 113, 113, 0.35);
  color: #f87171;
}

.vs-icon-warn {
  background: rgba(251, 146, 60, 0.15);
  border: 1px solid rgba(251, 146, 60, 0.35);
  color: #fb923c;
  font-weight: 900;
  font-size: 0.78rem;
  font-family: monospace;
}

.vs-item-text {
  font-size: 0.79rem;
  font-weight: 600;
  color: #e2e8f0;
}

.vs-item-other .vs-item-text {
  color: #94a3b8;
}

/* ==========================================================================
   PAGE MON PROFIL V2 (CYBER NEON MODERNISÉ)
   ========================================================================== */

.profile-v2-section {
  padding-top: calc(var(--nav-h) + 40px);
  padding-bottom: 70px;
}

.profile-v2-card {
  border-radius: 26px;
  background: rgba(14, 9, 26, 0.94);
  border: 1.5px solid rgba(168, 85, 247, 0.28);
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.95), 0 0 35px -10px rgba(168, 85, 247, 0.22);
  overflow: hidden;
  position: relative;
}

.profile-v2-banner {
  height: 140px;
  background: linear-gradient(135deg, rgba(88, 28, 135, 0.7) 0%, rgba(20, 10, 36, 0.95) 100%);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(168, 85, 247, 0.2);
}

.profile-v2-banner-glow {
  position: absolute;
  top: -50px;
  right: 15%;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(192, 132, 252, 0.4) 0%, transparent 70%);
  filter: blur(25px);
  pointer-events: none;
}

.profile-v2-banner-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(168, 85, 247, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.8;
}

.profile-v2-banner-badge {
  position: absolute;
  top: 16px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(14, 9, 26, 0.8);
  border: 1px solid rgba(74, 222, 128, 0.35);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.7rem;
  font-weight: 800;
  color: #e2e8f0;
  letter-spacing: 0.05em;
  backdrop-filter: blur(10px);
}

.profile-v2-online-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px #4ade80;
  animation: vanixGreenPulse 1.5s infinite;
}

.profile-v2-main {
  padding: 0 28px 24px;
  display: flex;
  align-items: flex-end;
  gap: 22px;
  margin-top: -52px;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
}

.profile-v2-avatar-wrap {
  position: relative;
  width: 104px;
  height: 104px;
  flex-shrink: 0;
}

.profile-v2-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3.5px solid #0e091a;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8);
  position: relative;
  z-index: 2;
}

.profile-v2-avatar-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid #a855f7;
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.6);
  z-index: 1;
}

.profile-v2-rank-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e11d48, #be123c);
  border: 2.5px solid #0e091a;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.profile-v2-info {
  flex: 1;
  min-width: 220px;
  padding-bottom: 4px;
}

.profile-v2-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  line-height: 1.2;
}

.profile-v2-tag {
  font-size: 0.84rem;
  color: #94a3b8;
  font-weight: 600;
  display: block;
  margin-top: 2px;
}

.profile-v2-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.chip-owner {
  background: rgba(225, 29, 72, 0.2) !important;
  color: #fb7185 !important;
  border: 1px solid rgba(225, 29, 72, 0.45) !important;
  font-weight: 800;
}

.chip-admin {
  background: rgba(168, 85, 247, 0.2) !important;
  color: #c084fc !important;
  border: 1px solid rgba(168, 85, 247, 0.45) !important;
  font-weight: 800;
}

.chip-premium {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.25), rgba(236, 72, 153, 0.25)) !important;
  color: #f472b6 !important;
  border: 1px solid rgba(236, 72, 153, 0.45) !important;
  font-weight: 800;
  box-shadow: 0 0 10px rgba(236, 72, 153, 0.25);
}

.chip-discord {
  background: rgba(88, 101, 242, 0.18) !important;
  color: #818cf8 !important;
  border: 1px solid rgba(88, 101, 242, 0.35) !important;
  font-weight: 700;
}

.profile-v2-chips .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  border-radius: 8px;
  font-size: 0.73rem;
  font-weight: 700;
}

.profile-v2-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 6px;
}

.profile-header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
}

.profile-btn-discord {
  background: #5865F2;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 16px rgba(88, 101, 242, 0.35);
}

.profile-btn-discord:hover {
  background: #4752c4;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(88, 101, 242, 0.55);
  color: #ffffff !important;
}

.profile-btn-logout {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5 !important;
  border: 1.5px solid rgba(239, 68, 68, 0.35);
}

.profile-btn-logout:hover {
  background: rgba(239, 68, 68, 0.22);
  border-color: rgba(239, 68, 68, 0.6);
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.25);
}

/* Stats Bento Bar */
.profile-v2-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  padding: 18px 24px;
  background: rgba(10, 6, 18, 0.7);
  border-top: 1px solid rgba(168, 85, 247, 0.15);
}

@media (max-width: 900px) {
  .profile-v2-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .profile-v2-stats {
    grid-template-columns: 1fr;
  }
}

.profile-v2-stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(22, 14, 38, 0.6);
  border: 1px solid rgba(168, 85, 247, 0.12);
}

.profile-v2-stat-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.profile-v2-stat-copy {
  display: flex;
  flex-direction: column;
}

.profile-v2-stat-label {
  font-size: 0.68rem;
  color: #94a3b8;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.profile-v2-stat-val {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
}

/* Badges Bar */
.profile-v2-badges-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 14px 20px;
  border-radius: 18px;
  background: rgba(18, 12, 32, 0.75);
  border: 1px solid rgba(168, 85, 247, 0.2);
  flex-wrap: wrap;
}

.profile-v2-badges-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: #c084fc;
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile-v2-badges-list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.profile-v2-badge {
  background: rgba(30, 20, 52, 0.8) !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
  color: #e2e8f0 !important;
  font-size: 0.75rem;
  padding: 4px 10px;
}

/* Cyber Pending Key Card */
.profile-v2-key-card {
  padding: 22px 24px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(30, 15, 50, 0.95), rgba(18, 10, 32, 0.98));
  border: 1.5px solid #a855f7;
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.35);
}

.profile-v2-key-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.profile-v2-key-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(168, 85, 247, 0.2);
  border: 1px solid rgba(168, 85, 247, 0.4);
  color: #c084fc;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.3);
}

.profile-v2-key-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-v2-key-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(12, 8, 22, 0.85);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 12px;
  flex-wrap: wrap;
  gap: 10px;
}

.profile-v2-key-badge-icon {
  color: #c084fc;
}

.profile-v2-key-code {
  font-family: monospace;
  font-size: 0.92rem;
  font-weight: 800;
  color: #ffffff;
  background: rgba(168, 85, 247, 0.15);
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.06em;
}

.profile-v2-alert-box {
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(251, 146, 60, 0.1);
  border: 1px solid rgba(251, 146, 60, 0.3);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  color: #fed7aa;
}

/* 2-Column Content Grid */
.profile-v2-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 900px) {
  .profile-v2-content-grid {
    grid-template-columns: 1fr;
  }
}

.profile-v2-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.profile-v2-box {
  border-radius: 20px;
  background: rgba(14, 9, 26, 0.9);
  border: 1.5px solid rgba(168, 85, 247, 0.2);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}

.profile-v2-box-head {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(168, 85, 247, 0.15);
  background: rgba(20, 13, 36, 0.6);
}

.profile-v2-box-head h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-v2-box-body {
  padding: 20px;
}

.profile-v2-premium-banner {
  padding: 16px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(88, 28, 135, 0.3), rgba(20, 10, 36, 0.6));
  border: 1px solid rgba(168, 85, 247, 0.35);
}

.profile-v2-mini-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.profile-v2-mini-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Orders List */
.profile-v2-orders-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-v2-order-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(20, 13, 36, 0.6);
  border: 1px solid rgba(168, 85, 247, 0.14);
}

.profile-v2-order-row.failed {
  opacity: 0.6;
}

.profile-v2-order-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.profile-v2-order-icon.check {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.35);
}

.profile-v2-order-icon.cross {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.35);
}

.profile-v2-order-info {
  flex: 1;
  min-width: 0;
}

.profile-v2-order-name {
  font-size: 0.84rem;
  color: #ffffff;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-v2-order-meta {
  font-size: 0.72rem;
  color: #94a3b8;
  display: block;
}

.profile-v2-order-price {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  color: #4ade80;
}

/* History List */
.profile-v2-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-v2-history-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(20, 13, 36, 0.6);
  border: 1px solid rgba(168, 85, 247, 0.14);
}

.profile-v2-thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.profile-v2-thumb-fallback {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.profile-v2-history-info {
  flex: 1;
  min-width: 0;
}

.profile-v2-history-title {
  font-size: 0.84rem;
  font-weight: 700;
  color: #e2e8f0;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}

.profile-v2-history-title:hover {
  color: #c084fc;
}

.profile-v2-history-time {
  font-size: 0.72rem;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Reviews List */
.profile-v2-reviews-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profile-v2-review-item {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(20, 13, 36, 0.6);
  border: 1px solid rgba(168, 85, 247, 0.15);
}

.profile-v2-review-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.profile-v2-review-target {
  font-size: 0.84rem;
  font-weight: 800;
  color: #c084fc;
  text-decoration: none;
}

.profile-v2-review-target:hover {
  text-decoration: underline;
}

.profile-v2-review-text {
  font-size: 0.82rem;
  color: #e2e8f0;
  margin: 4px 0 0;
  line-height: 1.4;
}

.profile-v2-review-reply {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(168, 85, 247, 0.1);
  border-left: 3px solid #a855f7;
}

.profile-v2-reply-head {
  font-size: 0.72rem;
  font-weight: 800;
  color: #c084fc;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px;
}

.profile-v2-reply-body {
  font-size: 0.8rem;
  color: #cbd5e1;
  margin: 0;
}