/* ==========================================================================
   style.css — refonte propre + corrections
   Auteur: ChatGPT (GPT-5 Thinking)
   Date: 2025-08-16
   Remarques:
   - Conflits résolus: .menu (toolbar) vs .picker .menu
   - États focus visibles et accessibilité améliorés
   - Variables unifiées, ombres, rayons, transitions
   - Animations respectent prefers-reduced-motion
   ========================================================================== */

/* ===========================
   Variables et tokens
   =========================== */
:root {
  /* Couleurs */
  --accent-color: #d4af37; /* or gold */
  --accent-color-2: #ffcc4d;
  --bg-0: #0f1221;
  --bg-1: #1e1e2f;
  --bg-2: #20243b;
  --bg-3: #2b2e5d;
  --muted: #343a7e;
  --border: #444a7a;
  --text-0: #ffffff;
  --text-1: #f5f5f5;
  --text-2: #cccccc;
  --text-3: #a8a8bf;
  --success: #28a745;
  --danger: #dc3545;
  --warning: #ffc107;
  --info: #0d6efd;

  /* UI */
  --radius-xs: .25rem;
  --radius-sm: .375rem;
  --radius-md: .5rem;
  --radius-lg: .75rem;
  --shadow-1: 0 2px 10px rgba(0,0,0,.25);
  --shadow-2: 0 10px 25px rgba(0,0,0,.35);
  --ring: 0 0 0 .2rem color-mix(in oklab, var(--accent-color) 35%, transparent);

  /* Typo & rythme */
  --leading: 1.6;
  --transition-fast: .2s ease;
  --transition-mid: .3s ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}

/* ===========================
   Reset de base
   =========================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  padding-top: 70px;
  background: linear-gradient(135deg, var(--bg-1), var(--muted));
  color: var(--text-1);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* Focus visible accessible */
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-xs);
}

/* Réduction des animations si demandé */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ===========================
   Animations
   =========================== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in { opacity: 0; animation: fadeInUp .8s forwards; }

/* ===========================
   Flash messages
   =========================== */
.flashes { list-style: none; padding: 0; margin: 0; }
.flash {
  padding: .5rem 1rem;
  margin-bottom: .5rem;
  border-radius: var(--radius-xs);
  color: #111;
}
.flash.success { background-color: #d1e7dd; }
.flash.danger  { background-color: #f8d7da; }
.flash.warning { background-color: #fff3cd; }

/* ===========================
   Navigation
   =========================== */
.navbar-dark .navbar-nav .nav-link {
  color: #eaeaea;
  transition: color var(--transition-fast);
}
.navbar-dark .navbar-nav .nav-link:hover { color: #fff; }

.navbar-dark.bg-dark {
  background-color: var(--bg-3) !important;
  border-bottom: 2px solid var(--accent-color);
}

header {
  position: fixed; top: 0; width: 100%; z-index: 1000; transition: top .3s;
}

/* ===========================
   Cartes, listes, formulaires
   =========================== */
.card,
.list-group-item,
.form-control,
.form-select {
  background-color: var(--bg-3);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text-1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
}

.form-control::placeholder { color: #bbb; }

/* Select minimaliste */
.form-select {
  border-radius: var(--radius-md);
  padding-right: 2.5rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23d4af37'%3e%3cpath d='M3 6l5 5 5-5H3z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 1rem;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.form-select:focus { box-shadow: var(--ring); border-color: var(--accent-color); }
.form-select option { background-color: var(--bg-3); color: var(--text-1); }

/* Inputs */
.form-control,
.form-select { transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.form-control:focus, .form-select:focus {
  border-color: var(--accent-color);
  box-shadow: var(--ring);
}

/* Switchs globaux pour .form-check-input */
.form-check-input {
  width: 2.5em; height: 1.4em;
  background-color: var(--bg-2);
  border: 1px solid #444;
  border-radius: 1em;
  appearance: none;
  position: relative;
  cursor: pointer;
  transition: background-color .4s, border .4s;
}
.form-check-input::before {
  content: "";
  position: absolute;
  height: 1.2em; width: 1.2em;
  border-radius: 50%; left: .1em; top: .1em;
  background-color: #fff;
  box-shadow: 0 2px 5px #9999;
  transition: transform .4s;
}
.form-check-input:checked { background-color: var(--accent-color); border-color: transparent; }
.form-check-input:checked::before { transform: translateX(1.1em); }

/* ===========================
   Boutons
   =========================== */
.btn-primary {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: #111;
}
.btn-primary:hover { background-color: var(--accent-color-2); border-color: var(--accent-color-2); }
.btn-primary:disabled, .btn-primary.disabled { opacity: .6; }

.btn-scale { transition: transform var(--transition-fast); }
.btn-scale:hover { transform: scale(1.05); }

/* ===========================
   Hero
   =========================== */
.hero {
  position: relative; padding: 6rem 2rem; color: #fff; text-align: center;
  background: url('img/hero-bg.svg') no-repeat center/cover, linear-gradient(135deg, var(--bg-1), var(--bg-3));
  border-radius: var(--radius-md);
  border-bottom: 2px solid var(--accent-color);
  box-shadow: var(--shadow-2);
}
.hero-icon { width: 80px; height: 80px; margin-inline: auto; }

/* ===========================
   Features
   =========================== */
.features .col-md-4 { opacity: 0; transform: translateY(20px); animation: fadeInUp .8s forwards; }
.features .col-md-4:nth-child(1) { animation-delay: .2s; }
.features .col-md-4:nth-child(2) { animation-delay: .4s; }
.features .col-md-4:nth-child(3) { animation-delay: .6s; }
.features h3 { color: #fff; position: relative; }
.features h3::after {
  content: ""; display: block; width: 40px; height: 3px;
  background: var(--accent-color); margin: .5rem auto 0;
}
.features p { color: #d0d0e0; }

/* ===========================
   Titres
   =========================== */
h2 { position: relative; }
h2::after { content: ""; display: block; width: 50px; height: 3px; background: var(--accent-color); margin: .5rem 0; }

/* ===========================
   Footer
   =========================== */
footer { font-size: .875rem; color: var(--text-2); }

/* ===========================
   Serveurs et états
   =========================== */
.server-item { transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
.server-item:hover { transform: scale(1.02); box-shadow: var(--shadow-1); }
.server-item.owner  { border: 2px solid #ffd700; border-radius: var(--radius-md); }
.server-item.admin  { border: 2px solid var(--accent-color); border-radius: var(--radius-md); }
.server-item.member { border: 2px solid gray; border-radius: var(--radius-md); }

/* Sidebar */
.sidebar-card { background-color: var(--bg-2); border: none; border-radius: var(--radius-md); box-shadow: var(--shadow-1); }

/* Bot banner */
.bot-banner {
  width: 100%; color: #fff; display: flex; align-items: center; padding: 0 1rem;
  background-size: cover; background-position: center;
}

/* Membres */
.member-item { position: relative; cursor: pointer; }
.member-info {
  display: none; position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  background-color: var(--bg-3); padding: .5rem; border-radius: var(--radius-md);
  white-space: nowrap; z-index: 1000; box-shadow: var(--shadow-1);
}
.member-item:hover .member-info { display: block; }
.status-dot { width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:4px; }
.status-online  { background-color: var(--success); }
.status-idle    { background-color: var(--warning); }
.status-dnd     { background-color: var(--danger); }
.status-offline { background-color: #6c757d; }

/* ===========================
   Sections décoratives
   =========================== */
.diagonal { position: relative; padding: 4rem 0; overflow: hidden; background-color: var(--bg-3); }
.diagonal:before {
  content: ""; position: absolute; top: -50px; left: 0; width: 100%; height: 100px;
  background-color: inherit; transform: skewY(-3deg); transform-origin: top left;
}
.diagonal.reverse:before { transform: skewY(3deg); transform-origin: top right; }
.full-width-section { width: 100%; margin-left: 0; margin-right: 0; }

/* ===========================
   Tree list
   =========================== */
.tree-list ul { list-style: none; padding-left: 1rem; }
.tree-list ul.collapsible { max-height: 0; overflow: hidden; transition: max-height var(--transition-mid); }
.tree-list li { margin-bottom: .25rem; cursor: pointer; }
.tree-list li.expanded > ul { max-height: 1000px; }
.tree-list{ overflow-y:auto; scrollbar-width:none; }
.tree-list::-webkit-scrollbar{ display:none; }
.tree-dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:.25rem; }

/* ===========================
   Commandes
   =========================== */
.command-item:hover { text-decoration: underline; color: var(--accent-color); }

/* ===========================
   Gestion de sections (builder)
   =========================== */
.manage-section.editable { border: 2px dashed var(--accent-color); border-radius: var(--radius-md); overflow: visible; }
.manage-section {
  position: absolute;
  transition: transform var(--transition-fast), opacity var(--transition-fast), width var(--transition-fast), height var(--transition-fast), left .05s ease, top .05s ease;
  box-sizing: border-box; overflow: hidden; border-radius: var(--radius-md);
  scrollbar-width: none; -ms-overflow-style: none;
  background: var(--bg-3);
}
.manage-section::-webkit-scrollbar { display: none; }
.manage-section.dragging { opacity: .6; transform: scale(1.05); transition: transform var(--transition-fast); cursor: grabbing; }
.manage-section.resizing { transition: none !important; }

.section-tools{
  position:absolute; top:calc(100% + .25rem); left:0; width:100%;
  display:none; justify-content:center; gap:.25rem; padding:.25rem 0; pointer-events:auto;
}
.manage-section.menu-open .section-tools{ display:flex; }
.section-tools .tool-btn{
  width:1.5rem; height:1.5rem; display:flex; align-items:center; justify-content:center;
  border-radius:.25rem; border:none; color:#fff; font-size:1rem;
}
.tool-delete{ background:var(--danger); }
.tool-duplicate{ background:#198754; }
.tool-drag{ background:var(--info); cursor:move; }

.delete-section {
  position: absolute; top: 0; right: 0; transform: translate(50%, -50%); z-index: 1010;
  width: 1.5rem; height: 1.5rem; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%;
}

.section-menu {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background-color: color-mix(in oklab, var(--bg-2) 95%, transparent);
  border: 1px solid #444; border-radius: var(--radius-md); box-shadow: var(--shadow-1);
  z-index: 5; padding: .5rem; display: none; overflow-y: auto; scrollbar-width: none;
  display: flex; flex-direction: column; gap: .25rem;
}
.section-menu::-webkit-scrollbar{ display:none; }

.section-option { padding: .25rem .5rem; cursor: pointer; border-radius: var(--radius-xs); text-align: center; background-color: #2a2d45; overflow: hidden; color: #fff; }
.section-option * { pointer-events: none; }
.section-option:hover { background-color: var(--accent-color); color: #111; }

.menu-options, .appearance-panel { display: flex; flex-direction: column; gap: .25rem; }
.appearance-panel { position: relative; }
.appearance-preview {
  display: none; position: absolute; top: .5rem; right: .5rem; width: 3rem; height: 3rem;
  border: 1px solid #fff; border-radius: var(--radius-xs); pointer-events: none;
}
.appearance-panel:hover .appearance-preview { display: block; }

.category-list { margin-top: .25rem; }
.color-picker { width: 100%; margin-bottom: .25rem; height: 2rem; border: none; border-radius: var(--radius-xs); }

.manage-section.editable.menu-open .section-menu { display: block; }

#addSection { position: fixed; bottom: 1rem; right: 1rem; z-index: 1000; }
#addMenu {
  position: fixed; bottom: 3.5rem; right: 1rem; z-index: 1000;
  background-color: color-mix(in oklab, var(--bg-2) 95%, transparent);
  border: 1px solid #444; border-radius: var(--radius-md); box-shadow: var(--shadow-1);
  padding: .5rem; width: 200px; display: none; display: flex; flex-direction: column; gap: .25rem;
}

.dashboard-link { position: fixed; top: 70px; left: 1rem; z-index: 1000; }
.dashboard-link .btn{ padding:.25rem .5rem; font-size:.875rem; }

#editToggle { position: fixed; top: 70px; right: 1rem; z-index: 1000; }

.drag-placeholder {
  border: 2px dashed var(--accent-color); margin-bottom: 1rem; visibility: visible;
  transition: width var(--transition-fast), height var(--transition-fast); box-sizing: border-box; border-radius: var(--radius-md);
}

/* Resizers */
.manage-section .resizer{ position:absolute; background:transparent; z-index:2; display:none; }
.manage-section .resizer.top, .manage-section .resizer.bottom{ left:-3px; width:calc(100% + 6px); height:6px; cursor:ns-resize; }
.manage-section .resizer.top{ top:-3px; }
.manage-section .resizer.bottom{ bottom:-3px; }
.manage-section .resizer.left, .manage-section .resizer.right{ top:-3px; height:calc(100% + 6px); width:6px; cursor:ew-resize; }
.manage-section .resizer.left{ left:-3px; }
.manage-section .resizer.right{ right:-3px; }
.manage-section .resizer.top-left, .manage-section .resizer.bottom-right{ width:12px; height:12px; border-radius:50%; border:1px solid #00a8ff; background:#fff; cursor:nwse-resize; }
.manage-section .resizer.top-left{ top:-6px; left:-6px; }
.manage-section .resizer.bottom-right{ bottom:-6px; right:-6px; }
.manage-section .resizer.top-right, .manage-section .resizer.bottom-left{ width:12px; height:12px; border-radius:50%; border:1px solid #00a8ff; background:#fff; cursor:nesw-resize; }
.manage-section .resizer.top-right{ top:-6px; right:-6px; }
.manage-section .resizer.bottom-left{ bottom:-6px; left:-6px; }
.manage-section.editable .resizer{ display:block; }

/* Conteneur de sections libres */
.grid-sections { position: relative; min-height: 600px; background: var(--bg-2); border-radius: var(--radius-md); }

/* ===========================
   Sidebar builder
   =========================== */
.sidebar-builder { max-height: 80vh; overflow-y: auto; overflow-x: visible; scrollbar-width: none; }
.sidebar-builder::-webkit-scrollbar { display: none; }

.sidebar .nav-tabs { display: flex; gap: .5rem; border-bottom: 1px solid #444; }
.sidebar .nav-tabs .nav-link {
  flex: 1; background: #343a40; color: var(--text-1); border: none;
  border-radius: 20px; padding: .25rem .5rem;
}
.sidebar .nav-tabs .nav-link.active { background: var(--accent-color); color: #111; }

.section-item {
  position: relative; cursor: pointer; background: #343a40; border: 1px solid #444; border-radius: var(--radius-xs);
  padding: .5rem; margin-bottom: .5rem; transition: background var(--transition-fast), transform var(--transition-fast); overflow: visible;
}
.section-item:hover { background: #3f465f; transform: scale(1.02); }

.element-item {
  position: relative; cursor: pointer; background: #343a40; border: 1px solid #444; border-radius: var(--radius-xs);
  padding: .25rem .5rem; margin-bottom: .5rem; color: #fff; display: flex; align-items: center; gap: .5rem; overflow: visible;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.element-item:hover { background: #3f465f; transform: scale(1.02); }

.section-actions { position: absolute; top: 2px; right: 2px; display: none; gap: .25rem; }
.section-actions button { background: #444; border: none; color: #fff; width: 1.2rem; height: 1.2rem; padding: 0; line-height: 1.2rem; font-size: .75rem; border-radius: var(--radius-xs); }
.section-item:hover .section-actions { display: flex; }

.section-preview {
  display: none; position: absolute; left: 100%; top: 0; margin-left: .5rem;
  background-color: var(--bg-3); border: 1px solid #444; border-radius: var(--radius-xs); padding: .5rem; z-index: 50; width: 200px;
}
.section-item:hover .section-preview { display: block; }

.section-item .section-name { display: block; color: #fff; font-size: .85rem; font-weight: 600; padding: .25rem; text-align: center; }

.add-section-btn {
  display: flex; align-items: center; justify-content: center; background: #343a40; color: #fff;
  border: none; border-radius: var(--radius-xs); width: 100%; height: 40px; cursor: pointer; margin-top: 10px;
}
.add-section-btn:hover { background: var(--accent-color); color: #111; }

.element-preview { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background-color: var(--bg-3); border-radius: 4px; flex-shrink: 0; overflow: hidden; }

#workspace { background-color: var(--bg-2); min-height: 400px; border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-md); }

/* Items dans l'aire de travail */
.workspace-item { position: absolute; cursor: move; transform-origin: center center; transform-box: fill-box; }
.workspace-item a, .workspace-item button, .workspace-item input, .workspace-item label, .workspace-item select, .workspace-item textarea { pointer-events: none; }
.workspace-item * { user-select: none; }
.workspace-item .resizer, .workspace-item .radius-handle { pointer-events: auto; }
.workspace-item .resizer, .group-box .resizer { position: absolute; background: transparent; z-index: 2; display: none; }
.workspace-item.selected .resizer, .group-box .resizer { display: block; }
.workspace-item .resizer.top, .workspace-item .resizer.bottom, .group-box .resizer.top, .group-box .resizer.bottom { left: -3px; width: calc(100% + 6px); height: 6px; cursor: ns-resize; }
.workspace-item .resizer.top, .group-box .resizer.top { top: -3px; }
.workspace-item .resizer.bottom, .group-box .resizer.bottom { bottom: -3px; }
.workspace-item .resizer.left, .workspace-item .resizer.right, .group-box .resizer.left, .group-box .resizer.right { top: -3px; height: calc(100% + 6px); width: 6px; cursor: ew-resize; }
.workspace-item .resizer.left, .group-box .resizer.left { left: -3px; }
.workspace-item .resizer.right, .group-box .resizer.right { right: -3px; }
.workspace-item .resizer.top-left, .workspace-item .resizer.bottom-right, .group-box .resizer.top-left, .group-box .resizer.bottom-right { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #00a8ff; background: #fff; cursor: nwse-resize; }
.workspace-item .resizer.top-left, .group-box .resizer.top-left { top: -6px; left: -6px; }
.workspace-item .resizer.bottom-right, .group-box .resizer.bottom-right { bottom: -6px; right: -6px; }
.workspace-item .resizer.top-right, .workspace-item .resizer.bottom-left, .group-box .resizer.top-right, .group-box .resizer.bottom-left { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #00a8ff; background: #fff; cursor: nesw-resize; }
.workspace-item .resizer.top-right, .group-box .resizer.top-right { top: -6px; right: -6px; }
.workspace-item .resizer.bottom-left, .group-box .resizer.bottom-left { bottom: -6px; left: -6px; }
.workspace-item .resizer.rotate { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #00a8ff; background: #11131f; top: -20px; left: 50%; transform: translate(-50%, 0); cursor: grab; }
.group-box .resizer.rotate { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #00a8ff; background: #11131f; top: -20px; left: 50%; transform: translate(-50%, 0); cursor: grab; }

.guide-x, .guide-y { position: absolute; background: rgba(0,168,255,.6); pointer-events: none; display: none !important; z-index: 9999; }
.guide-x { width: 1px; top: 0; bottom: 0; }
.guide-y { height: 1px; left: 0; right: 0; }

.context-menu { position: absolute; background: #343a40; color: #fff; border: 1px solid #444; border-radius: 4px; padding: 4px 0; display: none; z-index: 10000; }
.context-menu button { background: none; border: none; color: inherit; width: 100%; text-align: left; padding: 4px 12px; }
.context-menu button:hover { background: #495057; }

.group-box { position: absolute; border: 1px dashed #00a8ff; pointer-events: auto; z-index: 9999; }
.group-box .resizer { pointer-events: auto; }

/* Preview temporaire zone de texte */
.text-item.creating { border: 1px dashed #00a8ff; pointer-events: none; }

/* Parallélogrammes */
.shape-content { width: 100%; height: 100%; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); }
.shape.selected::after {
  content: ''; position: absolute; inset: 0; border: 1px dashed #00a8ff; pointer-events: none;
  -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); border-radius: inherit;
}
.selection-outline { position: absolute; inset: 0; pointer-events: none; }
.radius-handle { position: absolute; width: 8px; height: 8px; border: 1px solid #00a8ff; background: #fff; border-radius: 50%; cursor: pointer; }
.path-preview { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 5; }
.path-handles .path-handle { width: 8px; height: 8px; border: 1px solid #00a8ff; background: #fff; border-radius: 50%; position: absolute; cursor: pointer; }
.path-handles .control { background: #fffb; }

/* ===========================
   Layer panel
   =========================== */
.layer-list { list-style: none; padding-left: 0; margin: 0; font-size: .875rem; }
.layer-entry { display: flex; align-items: center; gap: .25rem; padding: .25rem .5rem; color: #fff; cursor: grab; background: none; border-bottom: 1px solid #444; }
.layer-entry:last-child { border-bottom: none; }
.layer-entry.dragging { opacity: .5; }
.layer-highlight { outline: 2px dashed #00a8ff; }
.layer-entry .layer-name { flex-grow: 1; }
.layer-entry .layer-eye, .layer-entry .layer-lock { cursor: pointer; }
.layer-collection > .collection-header { display: flex; align-items: center; gap: .25rem; background: #2b2e2e; border-radius: var(--radius-xs); padding: .25rem .5rem; margin-bottom: .25rem; color: #fff; cursor: pointer; }
.layer-collection ul { list-style: none; padding-left: 1rem; margin: 0; }
.layer-collection.collapsed > ul { display: none; }

#workspace-settings-btn{ position: fixed; top: calc(56px + 10px); right: 20px; z-index: 1060; }

/* ===========================
   Players
   =========================== */
.player-list { display: flex; flex-direction: column; gap: .5rem; }
.player-banner {
  display: flex; align-items: center; background-color: var(--bg-3); padding: .5rem 1rem; border-radius: var(--radius-md); color: #fff;
  box-shadow: var(--shadow-1);
}
.player-avatar, .avatar-round { width: 100px; height: 100px; border-radius: 50%; background-color: #444; object-fit: cover; }

.players-table { background-color: var(--bg-1); color: #fff; }
.players-table th, .players-table td { text-align: center; vertical-align: middle; border-color: #444; }
.players-table .category-row th { background-color: var(--bg-3); border-bottom: none; }
.badge-brown { background-color: #b8875b; color: #fff; }

/* ===========================
   Server page
   =========================== */
.server-header {
  --server-icon-size: 64px;
  display: flex; align-items: center; position: relative; padding: 1rem 0;
}
.server-header::after {
  content: ""; position: absolute; top: 50%; left: calc(var(--server-icon-size) + 1rem); right: 0; height: 3px;
  background-color: var(--accent-color); transform: translateY(-50%);
}
.server-icon { width: var(--server-icon-size); height: var(--server-icon-size); border-radius: 50%; margin-right: 1rem; }
.server-header-body { display: flex; align-items: center; width: 100%; transform: translateY(-50%); }
.server-title { font-size: 1.75rem; font-weight: bold; margin: 0; }

.server-nav { margin-left: auto; display: flex; gap: 1rem; }
.server-nav .nav-link { color: #cccccc; padding: .5rem 0; }
.server-nav .nav-link.active { border-bottom: 3px solid var(--accent-color); color: #fff; }
.server-nav .nav-link:hover { background-color: rgba(255,255,255,.1); color: #cccccc; }

.server-content { margin-top: 1rem; }
.server-section {
  background-color: var(--bg-3); border-radius: var(--radius-md); padding: 1.5rem; box-shadow: var(--shadow-1);
}
.server-section h2 { margin-top: 0; margin-bottom: 1rem; font-weight: 600; }

/* ===========================
   Database list
   =========================== */
.db-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .5rem; position: relative; }
.db-item {
  background-color: transparent; border-radius: var(--radius-xs); padding: .5rem .75rem; cursor: pointer;
  transition: transform var(--transition-mid), opacity var(--transition-mid), background-color var(--transition-fast);
}
.db-item:hover { background: rgba(255,255,255,.04); }
.db-item.db-selected { z-index: 10; }
.db-item.db-hide { opacity: 0; pointer-events: none; }

.db-selected-header {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem;
  opacity: 0; transform: translateY(-10px); transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.db-selected-header.show { opacity: 1; transform: translateY(0); }
.db-back { font-size: 1.25rem; }
.config-back { cursor: pointer; margin-bottom: .5rem; }
.db-path { font-size: .875rem; font-style: italic; color: #aaa; }

.config-container { display: flex; gap: 1rem; }

.config-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; justify-items: center; }
.config-card-grid .config-card { margin: 0; }
.config-card-grid .config-group-title {
  grid-column: 1 / -1;
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: .5rem;
}

.config-feature-list { flex: 0 0 200px; display: flex; flex-direction: column; gap: .8rem; }

.menu-card {
  display: flex; align-items: center; justify-content: flex-start; gap: 1rem; padding: 1rem;
  background: var(--bg-3); border: 2px solid var(--muted); border-radius: 20px; color: var(--text-1); cursor: pointer; width: 100%;
}
.menu-card .feature-content { display: flex; align-items: center; gap: 1rem; }
.menu-card .feature-icon { width: 38px; height: 38px; margin-right: .2rem; }
.menu-card .feature-name { font-size: 1.15rem; font-weight: 500; margin-left: 10px; }
.menu-card .feature-desc { display: none; }
.menu-card .toggler { position: static; margin-left: auto; transform: none; opacity: 1; }
.menu-card:hover { border-color: var(--accent-color); }
.menu-card[data-active="1"]:hover { border-color: #198754; }
.menu-card[data-active="0"]:hover { border-color: var(--danger); }
.menu-card.active { border-color: var(--accent-color); }

.config-card {
  width: 100%; height: auto; border-radius: 20px; background: var(--bg-3); position: relative;
  padding: 12px; border: 2px solid var(--muted); transition: var(--transition-mid); overflow: visible; cursor: pointer;
  text-align: left; color: var(--text-1); display: flex; flex-direction: column; justify-content: space-between;
}
.config-card .feature-content { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.config-card .feature-text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.config-card .feature-icon { width: 40px; height: 40px; margin-right: .5rem; }
.config-card .feature-name { font-size: 1.3em; font-weight: bold; }
.config-card .feature-desc { font-size: .875rem; color: #bbb; margin-top: .25rem; transition: opacity var(--transition-fast); }
.config-card:hover { border-color: var(--accent-color); box-shadow: 0 4px 18px rgba(0,0,0,.5); }
.config-card:hover .feature-desc { visibility: visible; opacity: 1; }
.config-card[data-active="1"]:hover { border-color: #198754; }
.config-card[data-active="0"]:hover { border-color: var(--danger); }
.config-card.active { border-color: var(--accent-color); }

.toggler { width: 72px; position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 125%); opacity: 0; transition: transform var(--transition-mid), opacity var(--transition-mid); }
.config-card-grid .config-card:hover .toggler { transform: translate(-50%, 50%); opacity: 1; }
.toggler input { display: none; }
.toggler label {
  display: block; position: relative; width: 54px; height: 30px;
  border: 1px solid #d6d6d6; border-radius: 36px; background: #e4e8e8; cursor: pointer;
}
.toggler label::after {
  display: block; border-radius: 100%; background-color: #d7062a; content: '';
  animation: toggler-size .15s ease-out forwards;
  position: absolute; top: 50%; left: 25%; width: 29px; height: 29px; transform: translate(-50%, -50%);
  transition: left .15s ease-in-out, background-color .2s ease-out, width .15s ease-in-out, height .15s ease-in-out;
}
.toggler input:checked + label::after { left: 75%; background-color: #50ac5d; animation-name: toggler-size2; }
@keyframes toggler-size { 0%,100% { width: 26px; height: 26px; } 50% { width: 20px; height: 20px; } }
@keyframes toggler-size2{ 0%,100% { width: 26px; height: 26px; } 50% { width: 20px; height: 20px; } }

/* ===========================
   Pages de config
   =========================== */
.config-feature-options { flex: 1; }
.config-feature-page { background-color: var(--bg-2); border-radius: var(--radius-md); padding: 1rem; width: 100%; }
.config-feature-page form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .75rem; max-width: none; margin: 0;
}
.config-feature-page form.two-col-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 768px) { .config-feature-page form.two-col-grid { grid-template-columns: 1fr; } }
.config-feature-page form .mb-3 { margin-bottom: 0; }
.config-feature-page .form-control, .config-feature-page .form-select { background-color: #2b2f4a; border-color: #444; color: #fff; }
.config-feature-page .form-control:focus, .config-feature-page .form-select:focus { background-color: #2b2f4a; color: #fff; border-color: var(--accent-color); box-shadow: 0 0 0 .2rem rgba(0,0,0,.2); }
.config-feature-page .option-group-title {
  grid-column: 1 / -1;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 1rem 0 .25rem;
}
.ticket-type { background-color: #202338; border: 1px solid #444; border-radius: 6px; }
.ticket-type .btn-close { filter: invert(1); }

/* ===========================
   Card editor
   =========================== */
#card_editor_canvas { border: 1px solid #ced4da; }
.card-editor-wrapper { width: 100%; overflow: auto; display: flex; justify-content: center; }
.card-editor-toolbar .link { margin-right: .25rem; }
#card_layers_list .layer-item { padding: 2px 4px; cursor: pointer; }
#card_layers_list .layer-item:hover { background-color: rgba(255,255,255,.1); }
.card-preview-overlay {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,.8);
  display: flex; align-items: center; justify-content: center; z-index: 2000;
}
.card-preview-overlay img { max-width: 90%; max-height: 90%; box-shadow: 0 0 10px #000; border-radius: .25rem; }

/* ===========================
   Wave input
   =========================== */
.wave-group { position: relative; }
.wave-group .input { font-size: 16px; padding: 10px 10px 10px 5px; display: block; width: 100%; border: none; color: white; border-bottom: 1px solid #515151; background: transparent; }
.wave-group .input:focus { outline: none; }
.wave-group .label { color: #999; font-size: 18px; font-weight: normal; position: absolute; pointer-events: none; left: 5px; top: 10px; display: flex; }
.wave-group .label-char { transition: .2s ease all; transition-delay: calc(var(--index) * .05s); }
.wave-group .input:focus ~ label .label-char, .wave-group .input:valid ~ label .label-char { transform: translateY(-20px); font-size: 14px; color: #5264AE; }
.wave-group .bar { position: relative; display: block; width: 100%; }
.wave-group .bar:before, .wave-group .bar:after { content: ''; height: 2px; width: 0; bottom: 1px; position: absolute; background: #5264AE; transition: .2s ease all; }
.wave-group .bar:before { left: 50%; }
.wave-group .bar:after { right: 50%; }
.wave-group .input:focus ~ .bar:before, .wave-group .input:focus ~ .bar:after { width: 50%; }

/* ===========================
   Toolbar menu (WELCOME FEATURE)
   =========================== */
.menu {
  padding: .5rem;
  background-color: var(--bg-2);
  position: relative;
  display: flex;
  justify-content: center;
  gap: .25rem;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0,0,0,.075);
}
.link {
  display: inline-flex; justify-content: center; align-items: center;
  width: 70px; height: 50px; border-radius: 8px; position: relative; z-index: 1;
  overflow: hidden; transform-origin: center left; transition: width .2s ease-in;
  text-decoration: none; color: var(--text-1); background: none; border: none;
}
.link::before {
  position: absolute; z-index: -1; content: ""; display: block; border-radius: 8px; width: 100%; height: 100%; top: 0;
  transform: translateX(100%); transition: transform .2s ease-in; transform-origin: center right; background-color: var(--accent-color);
}
.link:hover, .link:focus { outline: 0; width: 130px; }
.link:hover::before, .link:focus::before, .link:hover .link-title, .link:focus .link-title { transform: translateX(0); opacity: 1; }
.link-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; left: 18px; position: absolute; color: inherit; }
.link-title { transform: translateX(100%); transition: transform .2s ease-in; transform-origin: center right; display: block; text-align: center; text-indent: 28px; width: 100%; opacity: 0; }
.link.dropdown-toggle::after { display: none; }

/* ===========================
   Channel Picker (scopé pour éviter le conflit .menu)
   =========================== */
.picker { width: 280px; position: relative; }
.picker .trigger {
  width: 100%; padding: 10px 12px; border: 1px solid #444; border-radius: 8px; background: #161b22; color: #fff; cursor: pointer;
  display: flex; align-items: center; gap: 8px; transition: border-color .15s, box-shadow .15s, transform .06s;
}
.picker .trigger:focus-visible { outline: none; box-shadow: 0 0 0 3px #3b82f633; border-color: #3b82f6; }
.picker .trigger:active { transform: translateY(1px); }
.picker .caret { margin-left: auto; transition: transform .18s; }
.picker .caret.open { transform: rotate(180deg); }

/* === ancien .menu scindé et scopé === */
.picker .menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: #161b22; border: 1px solid #444; border-radius: 8px; overflow: clip;
  transform-origin: top; opacity: 0; transform: scaleY(.96) translateY(-4px); pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  display: flex; flex-direction: column;
}
.picker .menu.open { opacity: 1; transform: scaleY(1) translateY(0); pointer-events: auto; }

.picker .search {
  width: 100%; border: none; border-bottom: 1px solid #333; background: #0d1117; color: #fff; padding: 8px 10px; outline: none;
}

/* Scrollbar custom pour la liste du picker */
.picker .list { max-height: 260px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--accent-color) #161b22; }
.picker .list::-webkit-scrollbar { width: 8px; }
.picker .list::-webkit-scrollbar-track { background: #161b22; }
.picker .list::-webkit-scrollbar-thumb { background-color: var(--accent-color); border-radius: 8px; border: 2px solid #161b22; transition: background-color .2s ease; }
.picker .list::-webkit-scrollbar-thumb:hover { background-color: var(--accent-color-2); }

.picker .option {
  padding: 9px 10px; display: flex; align-items: center; gap: 8px; cursor: pointer;
  transition: background .12s, transform .12s;
}
.picker .option:hover { background: #21262d; transform: translateX(2px); }
.picker .pulse { animation: pulse .4s ease; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(59,130,246,.6); } 100% { box-shadow: 0 0 0 8px rgba(59,130,246,0); } }

/* ===========================
   Messages flottants
   =========================== */
.floating-message {
  position: fixed; top: 1rem; right: 1rem; padding: .75rem 1.25rem; border-radius: var(--radius-xs);
  color: #fff; z-index: 2000; display: none; opacity: 0; transition: opacity .5s ease; box-shadow: var(--shadow-1);
}
.floating-message.success { background-color: var(--success); }
.floating-message.error   { background-color: var(--danger); }