/* ═══════════════════════════════════════════════════════════════════════════
   PANEL V3 — Direction artistique (version sobre)
   Injecté sur TOUTES les pages HTML par start/branding-inject.cjs (avant </head>).
   Préfixe html.v3 pour passer devant les CSS historiques des pages.
   Animations : /v3/motion.js
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

html.v3 {
  --v3-bg:      #1a1d2b;
  --v3-surface: #242839;
  --v3-surface-2: #2d3247;
  --v3-line:    rgba(255,255,255,.10);
  --v3-line-2:  rgba(255,255,255,.18);
  --v3-txt:     #f4f5fb;
  --v3-txt-2:   #d2d5e4;
  --v3-muted:   #a3a8be;
  --v3-accent:  #8577ff;
  --v3-accent-2:#4cc9f0;
  --v3-ok:      #34d399;
  --v3-danger:  #f0566e;
  --v3-danger-txt: #ff9aaa;
  --v3-surface-3: #363c55;
  --v3-input:   #1c2030;
  --v3-log:     #151826;
  --v3-hover:   rgba(255,255,255,.05);
  --v3-overlay: rgba(10,12,20,.5);
  --v3-shadow:  rgba(0,0,0,.6);
  --v3-scroll:  rgba(255,255,255,.18);
  --v3-on-accent: #fff;
  --v3-mix: #fff; --v3-mix-pct: 35%;
  --v3-halo-1: #8577ff; --v3-halo-2: #4cc9f0;
  --v3-bg-grad: linear-gradient(160deg, #1f2234 0%, #1a1d2b 45%, #171a26 100%);
  --v3-r:    12px;
  --v3-r-lg: 16px;
  --v3-ease: cubic-bezier(.22,1,.36,1);
  --v3-font: 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Compat variables historiques */
  --bg: var(--v3-bg); --panel: var(--v3-surface); --txt: var(--v3-txt); --muted: var(--v3-muted);
  --stroke: var(--v3-line-2);
  --c1a:#8b7bff; --c1b:#6a55f0;  --c2a:#34d399; --c2b:#14a37f;
  --c3a:#5b8cff; --c3b:#3a63e0;  --c4a:#ff7a6b; --c4b:#f0566e;
  --c5a:#a98bff; --c5b:#7c3aed;  --c6a:#ffa24c; --c6b:#e57a14;
  --c7a:#f472b6; --c7b:#d6336c;  --c8a:#4cc9f0; --c8b:#1597b8;
  --c9a:#facc15; --c9b:#ca8a04;

  color-scheme: dark;
  scrollbar-color: var(--v3-scroll) transparent;
  scrollbar-width: thin;
}

/* ═══ Base ═══ */
html.v3 body {
  font-family: var(--v3-font) !important;
  color: var(--v3-txt);
  background: var(--v3-bg) !important;
  animation: none !important;
  -webkit-font-smoothing: antialiased;
}
html.v3 body::before { display: none !important; }
html.v3 ::selection { background: color-mix(in srgb, var(--v3-accent) 40%, transparent); }
html.v3 :focus-visible { outline: 2px solid var(--v3-accent); outline-offset: 2px; }
html.v3 .muted { color: var(--v3-muted) !important; }
html.v3 .ambient, html.v3 body > .fx, html.v3 .ribbon, html.v3 .floaters { display: none !important; }

/* Fond : dégradé de base + deux halos.
   Pas de filter: blur() (il pixellise et crée des bandes quand il bouge) : les halos sont de simples
   dégradés radiaux à fondu long, déplacés uniquement en translate sur leur propre calque GPU. */
html.v3 body { background: var(--v3-bg-grad) fixed !important; }
.v3-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.v3-bg .v3-blob {
  position: absolute; border-radius: 50%;
  /* fixe : un fond animé pixellise (surtout en Bureau à distance) */
}
.v3-bg .b1 { width: 70vmax; height: 70vmax; left: -25vmax; top: -30vmax;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--v3-halo-1) 30%, transparent), color-mix(in srgb, var(--v3-halo-1) 14%, transparent) 45%, transparent 100%);
  }
.v3-bg .b2 { width: 64vmax; height: 64vmax; right: -24vmax; bottom: -28vmax;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--v3-halo-2) 22%, transparent), color-mix(in srgb, var(--v3-halo-2) 10%, transparent) 45%, transparent 100%);
  }



html.v3 .topbar, html.v3 .layout, html.v3 .content, html.v3 .footerbar, html.v3 main, html.v3 .hero, html.v3 body > footer { position: relative; z-index: 2; }
html.v3 .topbar { position: sticky; z-index: 40; }
html.v3 .sidebar { z-index: 45; }

/* ═══ Topbar ═══ */
html.v3 .topbar {
  height: 58px !important; padding: 0 18px !important; gap: 14px !important;
  background: var(--v3-surface) !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 1px solid var(--v3-line) !important;
  box-shadow: none !important;
  transition: background .3s;
}
html.v3.v3-scrolled .topbar { box-shadow: 0 6px 20px -10px var(--v3-shadow) !important; }
html.v3 .topbar::after { display: none !important; }
html.v3 .brand {
  font-weight: 600 !important; font-size: 15px !important; letter-spacing: 0 !important; text-transform: none !important;
  display: flex; align-items: center; gap: 10px; color: var(--v3-txt) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
html.v3 .brand::before {
  content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 3px;
  background: linear-gradient(135deg, var(--v3-accent), var(--v3-accent-2));
}
html.v3 .icon-btn {
  width: 38px !important; height: 38px !important; padding: 0 !important;
  display: grid !important; place-items: center; align-content: center;
  border-radius: 10px !important; background: transparent !important;
  border: 1px solid var(--v3-line-2) !important; color: var(--v3-txt); cursor: pointer;
  transition: background .2s;
}
html.v3 .icon-btn:hover { background: var(--v3-surface-2) !important; }
html.v3 .icon-btn .bar { width: 16px !important; height: 2px !important; margin: 2px 0 !important; background: var(--v3-txt) !important; border-radius: 2px; }
html.v3 .userbox { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--v3-txt-2); }

/* ═══ Sidebar ═══ */
html.v3 .sidebar {
  background: var(--v3-surface) !important;
  border: none !important; border-right: 1px solid var(--v3-line) !important;
  box-shadow: 12px 0 40px -16px var(--v3-shadow);
  transition: transform .35s var(--v3-ease) !important;
}
html.v3 .sidebar-head {
  font-size: 11px !important; font-weight: 600 !important; letter-spacing: .12em !important;
  text-transform: uppercase; color: var(--v3-muted) !important; padding: 4px 12px;
}
html.v3 .navlist { gap: 2px !important; }
html.v3 .navlink {
  color: var(--v3-txt-2) !important; font-weight: 500 !important; font-size: 14px !important;
  padding: 10px 12px !important; border-radius: 10px !important;
  border: none !important; background: transparent !important; box-shadow: none !important; outline: none !important;
  transform: none !important; transition: background .2s, color .2s !important;
}
html.v3 .navlink:hover { color: var(--v3-txt) !important; background: var(--v3-surface-2) !important; }
html.v3 .navlink[aria-current="page"], html.v3 .navlink.active { color: var(--v3-txt) !important; background: color-mix(in srgb, var(--v3-accent) 18%, transparent) !important; }
html.v3 .sidebar-foot { font-size: 12px; color: var(--v3-muted); padding: 10px 12px; border-top: 1px solid var(--v3-line); }
html.v3 .backdrop { background: var(--v3-overlay) !important; }

/* ═══ Contenu ═══ */
html.v3 .content { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; }

/* ═══ Cartes de navigation ═══ */
html.v3 .action-pill { --acc: var(--v3-accent); }
html.v3 .color-1{--acc:var(--c1a)} html.v3 .color-2{--acc:var(--c2a)} html.v3 .color-3{--acc:var(--c3a)}
html.v3 .color-4{--acc:var(--c4b)} html.v3 .color-5{--acc:var(--c5a)} html.v3 .color-6{--acc:var(--c6a)}
html.v3 .color-7{--acc:var(--c7a)} html.v3 .color-8{--acc:var(--c8a)} html.v3 .color-9{--acc:var(--c9a)}
html.v3 .color-10{--acc:#38bdf8} html.v3 .color-11{--acc:#4ade80} html.v3 .color-12{--acc:#a3e635}
html.v3 .color-13{--acc:#fb923c} html.v3 .color-14{--acc:#f87171} html.v3 .color-15{--acc:#f472b6}
html.v3 .color-16{--acc:#c084fc} html.v3 .color-17{--acc:#60a5fa} html.v3 .color-18{--acc:#2dd4bf}
html.v3 .color-19{--acc:#fbbf24} html.v3 .color-20{--acc:#22c55e} html.v3 .color-21{--acc:#e879f9}
html.v3 .color-22{--acc:#818cf8} html.v3 .color-23{--acc:#fda4af} html.v3 .color-24{--acc:#6ee7b7}
html.v3 .color-25{--acc:#3b82f6} html.v3 .color-26{--acc:#e879f9} html.v3 .color-27{--acc:#d4a373}
html.v3 .color-28{--acc:#67e8f9} html.v3 .color-29{--acc:#fca5a5}

html.v3 .action-pill {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start !important;
  text-align: left !important;
  min-height: 84px;
  padding: 16px 52px 16px 18px !important;
  color: var(--v3-txt) !important;
  background: var(--v3-surface) !important;
  border: 1px solid var(--v3-line) !important;
  border-radius: var(--v3-r-lg) !important;
  box-shadow: none !important; filter: none !important;
  text-decoration: none !important;
  transition: transform .25s var(--v3-ease), border-color .2s, background .2s !important;
}
html.v3 .action-pill::before, html.v3 .action-pill::after { display: none !important; }
html.v3 .action-pill:hover {
  transform: translateY(-2px);
  background: var(--v3-surface-2) !important;
  border-color: color-mix(in srgb, var(--acc) 45%, transparent) !important;
}
html.v3 .pill-title {
  font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0 !important;
  text-shadow: none !important; color: var(--v3-txt) !important; margin-bottom: 3px;
}
html.v3 .action-pill .pill-title::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 8px; height: 8px; margin: -2px 9px 0 0; border-radius: 50%; background: var(--acc);
}
html.v3 .pill-sub { color: var(--v3-muted) !important; font-size: 13px !important; line-height: 1.4; opacity: 1 !important; }
html.v3 a.action-pill .v3-arrow {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  color: var(--v3-muted); font-size: 15px; transition: transform .25s var(--v3-ease), color .2s;
}
html.v3 a.action-pill:hover .v3-arrow { transform: translate(3px, -50%); color: var(--acc); }

html.v3 .actions-stack { gap: 12px !important; }
html.v3 .actions-stack.two-col { max-width: 980px !important; }

/* Groupes de cartes (hubs) */
html.v3 .v3-groups { max-width: 1040px; margin: 0 auto; padding: 28px 20px 40px; display: flex; flex-direction: column; gap: 30px; text-align: left; }
html.v3 .v3-group-title {
  margin: 0 0 12px 4px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--v3-muted);
  display: flex; align-items: center; gap: 10px;
}
html.v3 .v3-group-title::after { content: ""; flex: 1; height: 1px; background: var(--v3-line); }
html.v3 .v3-group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
html.v3 .v3-group-grid .action-pill { width: 100% !important; }
html.v3 .layout > .content:has(.v3-groups) { grid-column: 1 / -1; width: 100%; }
/* Badges de statut dans une carte (ex. Farming) : dans le flux, sous le texte */
html.v3 .action-pill .pill-status {
  position: static !important; transform: none !important; inset: auto !important;
  display: inline-flex; margin: 8px 6px 0 0;
}
html.v3 .action-pill:has(.pill-status) { flex-direction: row; flex-wrap: wrap; align-items: center !important; align-content: center; }
html.v3 .action-pill:has(.pill-status) > .pill-title, html.v3 .action-pill:has(.pill-status) > .pill-sub { flex: 0 0 100%; }
/* Groupe dont toutes les cartes sont masquées par le rôle → on masque le titre aussi */
html.v3 .v3-group:not(:has(.action-pill:not(.hidden):not([hidden]))) { display: none; }

/* ═══ Boutons ═══ */
html.v3 .btn, html.v3 .btn-neon, html.v3 .btn-ghost, html.v3 .btn-primary, html.v3 .btn-secondary, html.v3 .tfb-btn {
  font-family: var(--v3-font) !important; font-weight: 600 !important;
  border-radius: 10px !important; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, opacity .2s !important;
}
html.v3 .btn {
  background: var(--v3-surface-2) !important; color: var(--v3-txt) !important;
  border: 1px solid var(--v3-line-2) !important; box-shadow: none !important;
}
html.v3 .btn:hover { background: var(--v3-surface-3) !important; }
html.v3 .btn:disabled, html.v3 .btn[disabled] { opacity: .45 !important; cursor: not-allowed; }
html.v3 .btn-neon, html.v3 .btn-primary, html.v3 .btn.primary, html.v3 .tfb-btn.primary, html.v3 .btn.login {
  background: var(--v3-accent) !important; color: var(--v3-on-accent) !important; border: 1px solid transparent !important; box-shadow: none !important;
}
html.v3 .btn-neon:hover, html.v3 .btn-primary:hover, html.v3 .btn.primary:hover, html.v3 .tfb-btn.primary:hover, html.v3 .btn.login:hover { background: color-mix(in srgb, var(--v3-accent) 85%, #fff) !important; }
html.v3 .btn-ghost, html.v3 .btn-secondary, html.v3 .btn.secondary, html.v3 .tfb-btn.secondary, html.v3 .btn.ghost {
  background: transparent !important; color: var(--v3-txt-2) !important; border: 1px solid var(--v3-line-2) !important; box-shadow: none !important;
}
html.v3 .btn-ghost:hover, html.v3 .btn-secondary:hover, html.v3 .btn.secondary:hover, html.v3 .tfb-btn.secondary:hover, html.v3 .btn.ghost:hover {
  color: var(--v3-txt) !important; background: var(--v3-surface-2) !important;
}
html.v3 .btn-danger, html.v3 .btn.danger, html.v3 .btn-stop {
  background: transparent !important; color: var(--v3-danger-txt) !important; border: 1px solid color-mix(in srgb, var(--v3-danger) 45%, transparent) !important; box-shadow: none !important;
}
html.v3 .btn-danger:hover, html.v3 .btn.danger:hover, html.v3 .btn-stop:hover { background: var(--v3-danger) !important; color: #fff !important; }
html.v3 .topbar .btn-danger { padding: 7px 12px !important; font-size: 13px !important; }

/* Boutons colorés (Démarrer / Arrêter / …) */
html.v3 .btn[class*="color-"], html.v3 button[class*="color-"]:not(.action-pill) {
  background: color-mix(in srgb, var(--acc, var(--v3-accent)) 12%, var(--v3-surface)) !important;
  color: color-mix(in srgb, var(--acc, var(--v3-accent)) var(--v3-mix-pct), var(--v3-mix)) !important;
  border: 1px solid color-mix(in srgb, var(--acc, var(--v3-accent)) 40%, transparent) !important;
  box-shadow: none !important; text-shadow: none !important; filter: none !important;
}
html.v3 .btn[class*="color-"]:hover, html.v3 button[class*="color-"]:not(.action-pill):hover {
  background: color-mix(in srgb, var(--acc, var(--v3-accent)) 24%, var(--v3-surface)) !important;
}
html.v3 .btn.pill::before, html.v3 .btn.pill::after, html.v3 .btn.neon::after, html.v3 .btn.login::after { display: none !important; }

/* ═══ Onglets ═══ */
html.v3 .tabs-bar { background: var(--v3-surface) !important; border: 1px solid var(--v3-line) !important; border-radius: 12px !important; padding: 4px !important; }
html.v3 .tab { border-radius: 8px !important; color: var(--v3-muted) !important; font-weight: 500 !important; background: transparent !important; box-shadow: none !important; }
html.v3 .tab:hover { color: var(--v3-txt) !important; }
html.v3 .tab.active { color: var(--v3-txt) !important; background: var(--v3-surface-2) !important; box-shadow: inset 0 0 0 1px var(--v3-line-2) !important; }

/* ═══ Panneaux / cartes ═══ */
html.v3 .panel, html.v3 .card, html.v3 .stat-card, html.v3 .service-card, html.v3 .stat-box,
html.v3 .box, html.v3 .table-wrap, html.v3 .hero, html.v3 .summary-card {
  background: var(--v3-surface) !important;
  border: 1px solid var(--v3-line) !important;
  border-radius: var(--v3-r-lg) !important;
  box-shadow: none !important;
}
html.v3 .panel.neon::after, html.v3 .neon:not(.action-pill):not(.btn)::after { display: none !important; }
html.v3 .panel-head, html.v3 .modal-header, html.v3 .page-header { border-color: var(--v3-line) !important; }
html.v3 .panel-head h2, html.v3 .panel-title, html.v3 .section-title { font-weight: 600 !important; letter-spacing: 0 !important; text-shadow: none !important; }
html.v3 .badge, html.v3 .counter-badge, html.v3 .chip {
  border-radius: 99px !important; background: var(--v3-surface-2) !important; border: 1px solid var(--v3-line-2) !important; color: var(--v3-txt-2) !important;
}
html.v3 .status { border-radius: 99px !important; background: var(--v3-surface-2) !important; border: 1px solid var(--v3-line) !important; }
html.v3 .logbox, html.v3 pre.logbox {
  background: var(--v3-log) !important; color: var(--v3-txt-2); border: 1px solid var(--v3-line) !important; border-radius: var(--v3-r) !important; font-size: 12.5px !important;
}

/* ═══ Formulaires ═══ */
html.v3 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([hidden]),
html.v3 select, html.v3 textarea {
  font-family: var(--v3-font);
  background: var(--v3-input) !important; color: var(--v3-txt) !important;
  border: 1px solid var(--v3-line-2) !important; border-radius: 10px !important; outline: none !important;
  transition: border-color .2s !important;
}
html.v3 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus, html.v3 select:focus, html.v3 textarea:focus {
  border-color: var(--v3-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--v3-accent) 22%, transparent) !important;
}
html.v3 input::placeholder, html.v3 textarea::placeholder { color: var(--v3-muted) !important; }
html.v3 select option { background: var(--v3-surface); color: var(--v3-txt); }

/* Champ mot de passe + bouton œil (motion.js) */
.v3-pwd { position: relative; display: block; width: 100%; }
.v3-pwd > input { width: 100% !important; padding-right: 44px !important; box-sizing: border-box; }
.v3-pwd-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--v3-muted, #808599);
  cursor: pointer; transition: color .2s, background .2s;
}
.v3-pwd-toggle:hover { color: var(--v3-txt, #eceef6); background: var(--v3-hover); }
.v3-pwd-toggle:focus-visible { outline: 2px solid var(--v3-accent, #7c6cff); outline-offset: 0; }
html.v3 input[type="checkbox"], html.v3 input[type="radio"], html.v3 input[type="range"] { accent-color: var(--v3-accent); }

/* ═══ Tableaux ═══ */
html.v3 table th {
  font-size: 11px !important; font-weight: 600 !important; letter-spacing: .08em !important; text-transform: uppercase;
  color: var(--v3-muted) !important; background: transparent !important; border-bottom: 1px solid var(--v3-line) !important;
}
html.v3 table td { border-bottom: 1px solid var(--v3-line) !important; }
html.v3 table tbody tr:hover { background: var(--v3-hover) !important; }

/* ═══ Modales, menus, toasts ═══ */
html.v3 .modal-backdrop, html.v3 .pm-backdrop { background: var(--v3-overlay) !important; }
html.v3 .modal-dialog, html.v3 .pm-dialog, html.v3 .modal-box, html.v3 .tfb-panel, html.v3 .tfb-modal-box, html.v3 .mmodal-dialog {
  background: var(--v3-surface) !important; border: 1px solid var(--v3-line-2) !important;
  border-radius: 16px !important; box-shadow: 0 30px 80px -20px var(--v3-shadow) !important;
}
html.v3 .modal[aria-hidden="false"] .modal-dialog, html.v3 .tfb-modal .tfb-panel { animation: v3-pop .3s var(--v3-ease) both !important; }
@keyframes v3-pop { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
html.v3 .notif-dropdown, html.v3 .dropdown-menu {
  background: var(--v3-surface) !important; border: 1px solid var(--v3-line-2) !important; border-radius: 12px !important;
  box-shadow: 0 20px 60px -20px var(--v3-shadow) !important;
}
html.v3 .notif-badge { background: var(--v3-danger) !important; color: #fff !important; }
html.v3 .toast, html.v3 .notif-toast { background: var(--v3-surface-2) !important; border: 1px solid var(--v3-line-2) !important; border-radius: 12px !important; }

/* ═══ Footer ═══ */
html.v3 .footerbar, html.v3 body > footer {
  background: transparent !important; border-top: 1px solid var(--v3-line) !important;
  color: var(--v3-muted) !important; font-size: 12px;
}

/* ═══ Page publique ═══ */
html.v3 .hero { padding: 44px 40px !important; }
html.v3 .hero h1 { font-weight: 700 !important; letter-spacing: -.02em !important; text-shadow: none !important; color: var(--v3-txt) !important; background: none !important; }
html.v3 .hero .ring { display: none !important; }
html.v3 .hero .sub { color: var(--v3-txt-2) !important; }

/* ═══ Animations d'entrée (motion.js) ═══ */
html.v3.v3-boot body { opacity: 0; }
html.v3 body { transition: opacity .3s ease; }
html.v3.v3-leaving body { opacity: 0; transition-duration: .15s; }
html.v3 .v3-reveal:not(.v3-in) { opacity: 0; }
html.v3 .v3-reveal.v3-in { animation: v3-reveal .6s var(--v3-ease) backwards; animation-delay: calc(var(--v3-i, 0) * 60ms); }
@keyframes v3-reveal { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }

/* Titres de groupes : glissent en place */
html.v3 .v3-group-title { animation: v3-title-in .6s var(--v3-ease) backwards; }
html.v3 .v3-group-title::after { transform-origin: left; animation: v3-line-in .9s var(--v3-ease) .15s backwards; }
@keyframes v3-title-in { from { opacity: 0; translate: -10px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes v3-line-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Pastille des cartes : léger battement au survol */
html.v3 .action-pill:hover .pill-title::before { animation: v3-dot 1.2s ease-in-out infinite; }
@keyframes v3-dot { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc) 50%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } }

/* Bouton enfoncé */
html.v3 .btn:active, html.v3 .action-pill:active, html.v3 .tfb-btn:active { translate: 0 1px; transition: translate .1s; }

/* Topbar : descend à l'ouverture de la page */
html.v3 .topbar { animation: v3-top-in .5s var(--v3-ease) backwards; }
@keyframes v3-top-in { from { opacity: 0; translate: 0 -12px; } to { opacity: 1; translate: 0 0; } }

/* Les classes de masquage des pages gardent toujours le dernier mot */
html.v3 .hidden, html.v3 .is-hidden { display: none !important; }

/* Mouvement réduit / désactivé */
html.v3.v3-motion-off *, html.v3.v3-motion-off *::before, html.v3.v3-motion-off *::after { animation: none !important; transition: none !important; }
html.v3.v3-motion-off .v3-reveal:not(.v3-in) { opacity: 1; }
/* (le réglage système « mouvement réduit » n'est pas appliqué : Windows Server le force par défaut) */

/* ═══ Mobile ═══ */
@media (max-width: 700px) {
  html.v3 .topbar { height: 54px !important; padding: 0 12px !important; gap: 10px !important; }
  html.v3 .brand { font-size: 13px !important; }
  html.v3 .v3-groups { padding: 18px 12px 30px; gap: 22px; }
  html.v3 .v3-group-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THÈMES — choisis via le sélecteur (motion.js), mémorisé dans localStorage['v3-theme']
   Ardoise = valeurs par défaut ci-dessus.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Minuit — très sombre, contrasté */
html.v3[data-v3-theme="minuit"] {
  --v3-bg: #0a0b11; --v3-surface: #12141d; --v3-surface-2: #1a1d29; --v3-surface-3: #232736;
  --v3-input: #0e1017; --v3-log: #07080c;
  --v3-line: rgba(255,255,255,.08); --v3-line-2: rgba(255,255,255,.14);
  --v3-txt: #eef0f7; --v3-txt-2: #c0c4d6; --v3-muted: #8a8fa6;
  --v3-accent: #7c6cff; --v3-halo-1: #7c6cff; --v3-halo-2: #3fb6e0;
  --v3-bg-grad: linear-gradient(160deg, #10121b 0%, #0a0b11 60%, #08090d 100%);
}

/* Océan — bleu marine, accent cyan */
html.v3[data-v3-theme="ocean"] {
  --v3-bg: #10223a; --v3-surface: #18304f; --v3-surface-2: #203b5f; --v3-surface-3: #2a4870;
  --v3-input: #142944; --v3-log: #0d1c30;
  --v3-line: rgba(160,210,255,.12); --v3-line-2: rgba(160,210,255,.22);
  --v3-txt: #f0f7ff; --v3-txt-2: #cfe0f5; --v3-muted: #93abc9;
  --v3-accent: #1fb8e6; --v3-accent-2: #5eead4; --v3-on-accent: #04202c;
  --v3-halo-1: #1fb8e6; --v3-halo-2: #3b82f6;
  --v3-bg-grad: linear-gradient(160deg, #143052 0%, #10223a 50%, #0c1a2d 100%);
}

/* Forêt — vert profond, accent émeraude */
html.v3[data-v3-theme="foret"] {
  --v3-bg: #15231d; --v3-surface: #1e3229; --v3-surface-2: #273e33; --v3-surface-3: #314b3f;
  --v3-input: #192b23; --v3-log: #101b16;
  --v3-line: rgba(190,255,220,.10); --v3-line-2: rgba(190,255,220,.20);
  --v3-txt: #f0fbf5; --v3-txt-2: #cfe7da; --v3-muted: #94b4a3;
  --v3-accent: #2ecf8f; --v3-accent-2: #a3e635; --v3-on-accent: #06251a;
  --v3-halo-1: #2ecf8f; --v3-halo-2: #84cc16;
  --v3-bg-grad: linear-gradient(160deg, #1a2d25 0%, #15231d 50%, #101b16 100%);
}

/* Crépuscule — tons chauds, accent orange */
html.v3[data-v3-theme="crepuscule"] {
  --v3-bg: #241a20; --v3-surface: #31242b; --v3-surface-2: #3c2d35; --v3-surface-3: #48363f;
  --v3-input: #2a1f25; --v3-log: #1b1317;
  --v3-line: rgba(255,220,200,.10); --v3-line-2: rgba(255,220,200,.20);
  --v3-txt: #fff5f0; --v3-txt-2: #ecd6cc; --v3-muted: #bb9e94;
  --v3-accent: #ff8a4c; --v3-accent-2: #f472b6; --v3-on-accent: #2b1206;
  --v3-halo-1: #ff8a4c; --v3-halo-2: #ec4899;
  --v3-bg-grad: linear-gradient(160deg, #2e1f27 0%, #241a20 50%, #1c1418 100%);
}

/* Franco-Belge — bleu nuit, accents bleu / jaune / rouge */
html.v3[data-v3-theme="francobelge"] {
  --v3-bg: #131a2e; --v3-surface: #1b2440; --v3-surface-2: #232e4f; --v3-surface-3: #2c3960;
  --v3-input: #172038; --v3-log: #0f1526;
  --v3-line: rgba(200,215,255,.11); --v3-line-2: rgba(200,215,255,.21);
  --v3-txt: #f3f6ff; --v3-txt-2: #d2dbf2; --v3-muted: #97a3c4;
  --v3-accent: #3b6cff; --v3-accent-2: #ffd43b;
  --v3-halo-1: #3b6cff; --v3-halo-2: #ef3340;
  --v3-bg-grad: linear-gradient(160deg, #182245 0%, #131a2e 50%, #0f1525 100%);
}
html.v3[data-v3-theme="francobelge"] .brand::before { background: linear-gradient(90deg, #2552d9 0 33%, #ffd43b 33% 66%, #ef3340 66%); width: 18px; border-radius: 3px; }
html.v3[data-v3-theme="francobelge"] .topbar { box-shadow: inset 0 -2px 0 0 transparent !important; border-image: linear-gradient(90deg, #2552d9, #fff 33%, #ef3340 50%, #111 66%, #ffd43b 83%, #ef3340) 1 !important; }

/* Clair — fond gris clair, cartes blanches (bêta : certaines pages anciennes ont du texte blanc codé en dur) */
html.v3[data-v3-theme="clair"] {
  color-scheme: light;
  --v3-bg: #eef0f6; --v3-surface: #ffffff; --v3-surface-2: #f4f5fa; --v3-surface-3: #e8eaf2;
  --v3-input: #ffffff; --v3-log: #f6f7fb;
  --v3-line: rgba(20,24,40,.09); --v3-line-2: rgba(20,24,40,.16);
  --v3-txt: #1b1e2c; --v3-txt-2: #3d4258; --v3-muted: #6b7088;
  --v3-accent: #6655f0; --v3-accent-2: #0ea5e9; --v3-on-accent: #fff;
  --v3-danger: #e0384f; --v3-danger-txt: #c62c43;
  --v3-hover: rgba(20,24,40,.04); --v3-overlay: rgba(30,34,50,.35); --v3-shadow: rgba(30,34,60,.18);
  --v3-scroll: rgba(20,24,40,.25);
  --v3-mix: #000; --v3-mix-pct: 70%;
  --v3-halo-1: #8b7bff; --v3-halo-2: #38bdf8;
  --v3-bg-grad: linear-gradient(160deg, #f4f5fb 0%, #eef0f6 50%, #e7eaf2 100%);
}

/* ═══ Sélecteur de thème (motion.js) ═══ */
.v3-theme-btn {
  position: fixed; left: 16px; bottom: 56px; z-index: 9000;
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--v3-surface-2); color: var(--v3-txt); border: 1px solid var(--v3-line-2);
  box-shadow: 0 8px 24px -8px var(--v3-shadow); cursor: pointer;
  transition: transform .25s var(--v3-ease), background .2s;
}
.v3-theme-btn:hover { transform: rotate(-20deg) scale(1.06); background: var(--v3-surface-3); }
.v3-theme-panel {
  position: fixed; left: 16px; bottom: 108px; z-index: 9001; width: 250px;
  background: var(--v3-surface); border: 1px solid var(--v3-line-2); border-radius: 16px;
  box-shadow: 0 24px 60px -20px var(--v3-shadow); padding: 12px;
  animation: v3-pop .25s var(--v3-ease) both;
}
.v3-theme-panel[hidden] { display: none; }
.v3-theme-panel h4 { margin: 2px 6px 10px; font: 600 11px var(--v3-font); letter-spacing: .12em; text-transform: uppercase; color: var(--v3-muted); }
.v3-theme-opt {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border-radius: 10px;
  border: 1px solid transparent; background: transparent; color: var(--v3-txt); cursor: pointer;
  font: 500 14px var(--v3-font); text-align: left; transition: background .15s;
}
.v3-theme-opt:hover { background: var(--v3-hover); }
.v3-theme-opt[aria-pressed="true"] { border-color: var(--v3-accent); background: color-mix(in srgb, var(--v3-accent) 12%, transparent); }
.v3-theme-sw { flex: 0 0 auto; width: 34px; height: 22px; border-radius: 6px; border: 1px solid rgba(128,128,128,.35); }
.v3-theme-opt small { display: block; color: var(--v3-muted); font-size: 11px; font-weight: 400; }
html.v3.v3-theme-anim, html.v3.v3-theme-anim * { transition: background-color .35s, color .35s, border-color .35s !important; }

/* Pas de transformations 3D sur la carte d'accueil (le texte se déforme / pixellise) */
html.v3 .hero { transform: none !important; }

/* ═══ Recherche dans les hubs ═══ */
html.v3 .v3-search {
  position: relative; display: flex; align-items: center;
  margin: 0 4px; max-width: 560px; width: 100%; align-self: center;
}
html.v3 .v3-search-ico { position: absolute; left: 14px; color: var(--v3-muted); pointer-events: none; }
html.v3 .v3-search .v3-search-input {
  width: 100% !important; height: 46px; padding: 0 44px 0 42px !important;
  font-size: 15px !important; border-radius: 14px !important;
  background: var(--v3-surface) !important;
}
html.v3 .v3-search-kbd {
  position: absolute; right: 12px; min-width: 22px; height: 22px; display: grid; place-items: center;
  font: 600 12px var(--v3-font); color: var(--v3-muted);
  border: 1px solid var(--v3-line-2); border-radius: 6px; background: var(--v3-surface-2);
  pointer-events: none; transition: opacity .2s;
}
html.v3 .v3-search-input:focus ~ .v3-search-kbd { opacity: 0; }
html.v3 .v3-search-input::-webkit-search-cancel-button { cursor: pointer; }
html.v3 .v3-search-empty { text-align: center; color: var(--v3-muted); margin: 10px 0 0; }
html.v3 .v3-search-empty span { color: var(--v3-txt); font-weight: 600; }
html.v3 .action-pill.v3-nomatch, html.v3 .v3-group.v3-nomatch { display: none !important; }
/* Pendant une recherche, pas d'animation d'apparition (affichage instantané des résultats) */
html.v3 .v3-searching .v3-reveal:not(.v3-in) { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD (Panneau admin)
   ═══════════════════════════════════════════════════════════════════════════ */
html.v3 .v3-dash-page { max-width: 1180px; margin: 0 auto; padding: 24px 20px 40px !important; }
html.v3 .v3-dash { display: flex; flex-direction: column; gap: 16px; text-align: left; }
html.v3 .v3-dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
html.v3 .v3-dash-title { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--v3-txt); }
html.v3 .v3-dash-sub { margin: 4px 0 0; font-size: 13px; color: var(--v3-muted); }
html.v3 .v3-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
html.v3 .v3-kpi {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px;
  padding: 16px; border-radius: 16px; text-decoration: none; color: var(--v3-txt);
  background: var(--v3-surface); border: 1px solid var(--v3-line);
  transition: transform .25s var(--v3-ease), border-color .2s;
}
html.v3 .v3-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--k, var(--v3-accent)); }
html.v3 a.v3-kpi:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--k) 45%, transparent); }
html.v3 .v3-kpi-label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--v3-muted); }
html.v3 .v3-kpi-value { font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--k, var(--v3-txt)); font-variant-numeric: tabular-nums; }
html.v3 .v3-kpi-small { font-size: 20px; }
html.v3 .v3-kpi-sub { font-size: 12px; color: var(--v3-muted); }
html.v3 .v3-kpi-bar { height: 5px; border-radius: 99px; background: var(--v3-surface-3); overflow: hidden; margin: 2px 0; }
html.v3 .v3-kpi-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--v3-ok); transition: width .8s var(--v3-ease); }
html.v3 .v3-dash-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
html.v3 .v3-dash-card { background: var(--v3-surface); border: 1px solid var(--v3-line); border-radius: 16px; padding: 16px; min-width: 0; }
html.v3 .v3-dash-h { margin: 0 0 12px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--v3-muted); }
html.v3 .v3-dash-h a { font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--v3-accent); text-decoration: none; }
html.v3 .v3-dash-empty { margin: 6px 0; color: var(--v3-muted); font-size: 13px; }
html.v3 .v3-dash-section { max-width: 1040px; margin: 30px auto 0; padding: 0 20px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--v3-muted); text-align: left; }
html.v3 .v3-srv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
html.v3 .v3-srv {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "dot name players" "dot game players";
  column-gap: 10px; align-items: center; padding: 9px 12px; border-radius: 10px; text-decoration: none;
  background: var(--v3-surface-2); border: 1px solid transparent; transition: border-color .2s, background .2s;
}
html.v3 .v3-srv:hover { border-color: var(--v3-line-2); background: var(--v3-surface-3); }
html.v3 .v3-srv-dot { grid-area: dot; width: 9px; height: 9px; border-radius: 50%; }
html.v3 .v3-srv-dot.on { background: var(--v3-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--v3-ok) 25%, transparent); }
html.v3 .v3-srv-dot.off { background: var(--v3-muted); opacity: .6; }
html.v3 .v3-srv-name { grid-area: name; font-size: 13px; font-weight: 600; color: var(--v3-txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.v3 .v3-srv-game { grid-area: game; font-size: 11px; color: var(--v3-muted); }
html.v3 .v3-srv-players { grid-area: players; font-size: 12px; color: var(--v3-txt-2); white-space: nowrap; }
html.v3 .v3-todo { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "tag title" "tag meta"; column-gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--v3-line); text-decoration: none; }
html.v3 .v3-todo:last-child { border-bottom: 0; }
html.v3 .v3-todo-tag { grid-area: tag; align-self: center; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; }
html.v3 .v3-todo-tag.tk { background: color-mix(in srgb, #ffb547 18%, transparent); color: #ffcb7a; }
html.v3 .v3-todo-tag.bg { background: color-mix(in srgb, #f472b6 18%, transparent); color: #f9a8d4; }
html.v3[data-v3-theme="clair"] .v3-todo-tag.tk { color: #a15c00; }
html.v3[data-v3-theme="clair"] .v3-todo-tag.bg { color: #b0306f; }
html.v3 .v3-todo-title { grid-area: title; font-size: 13px; font-weight: 600; color: var(--v3-txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.v3 .v3-todo-meta { grid-area: meta; font-size: 11px; color: var(--v3-muted); }
html.v3 .v3-act { display: flex; gap: 12px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--v3-line); font-size: 13px; }
html.v3 .v3-act:last-child { border-bottom: 0; }
html.v3 .v3-act-ts { flex: 0 0 96px; font-size: 11px; color: var(--v3-muted); font-variant-numeric: tabular-nums; }
html.v3 .v3-act-user { flex: 0 0 110px; font-weight: 600; color: var(--v3-accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.v3 .v3-act-desc { flex: 1; min-width: 0; color: var(--v3-txt-2); overflow-wrap: anywhere; }

/* ═══ Favoris (étoile) ═══ */
html.v3 .action-pill .v3-fav {
  position: absolute; top: 8px; right: 8px; z-index: 2; width: 26px; height: 26px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--v3-muted); cursor: pointer;
  opacity: 0; transition: opacity .2s, color .2s, background .2s, transform .25s var(--v3-ease);
}
html.v3 .action-pill:hover .v3-fav, html.v3 .action-pill .v3-fav:focus-visible { opacity: 1; }
html.v3 .action-pill .v3-fav:hover { background: var(--v3-hover); color: #ffd43b; transform: scale(1.12); }
html.v3 .action-pill .v3-fav.on { opacity: 1; color: #ffd43b; }
html.v3 .v3-group-fav .v3-group-title { color: #e8b923; }
@media (hover: none) { html.v3 .action-pill .v3-fav { opacity: .55; } }

/* ═══ Récemment visités ═══ */
html.v3 .v3-recent { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 4px; }
html.v3 .v3-recent-label { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--v3-muted); margin-right: 4px; }
html.v3 .v3-chip {
  display: inline-flex; align-items: center; max-width: 220px; padding: 6px 12px; border-radius: 99px;
  font-size: 13px; color: var(--v3-txt-2); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--v3-surface); border: 1px solid var(--v3-line); cursor: pointer; transition: border-color .2s, color .2s, background .2s;
}
html.v3 .v3-chip:hover { color: var(--v3-txt); border-color: var(--v3-line-2); background: var(--v3-surface-2); }
html.v3 .v3-chip-clear { padding: 6px 9px; color: var(--v3-muted); font: inherit; font-size: 11px; }
html.v3 .v3-recent.v3-nomatch { display: none; }

/* ═══ Badges live ═══ */
html.v3 .action-pill > .v3-badge {
  position: absolute; top: 10px; right: 40px; z-index: 1;
  padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; white-space: nowrap;
  background: var(--v3-surface-3); color: var(--v3-txt-2); border: 1px solid var(--v3-line-2);
  animation: v3-badge-in .4s var(--v3-ease) backwards;
}
html.v3 .action-pill > .v3-badge.ok { color: var(--v3-ok); border-color: color-mix(in srgb, var(--v3-ok) 40%, transparent); background: color-mix(in srgb, var(--v3-ok) 12%, var(--v3-surface)); }
html.v3 .action-pill > .v3-badge.off { color: var(--v3-muted); }
html.v3 .action-pill > .v3-badge.warn { color: #ffb547; border-color: color-mix(in srgb, #ffb547 45%, transparent); background: color-mix(in srgb, #ffb547 14%, var(--v3-surface)); }
html.v3 .action-pill > .v3-badge.pink { color: #f472b6; border-color: color-mix(in srgb, #f472b6 45%, transparent); background: color-mix(in srgb, #f472b6 14%, var(--v3-surface)); }
html.v3 .action-pill > .v3-badge.danger { color: var(--v3-danger); border-color: color-mix(in srgb, var(--v3-danger) 45%, transparent); background: color-mix(in srgb, var(--v3-danger) 14%, var(--v3-surface)); }
@keyframes v3-badge-in { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }
html.v3 .action-pill:has(> .v3-badge) .pill-title { padding-right: 84px; }

/* ═══ Toasts V3 ═══ */
.v3-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 10000; display: flex; flex-direction: column; gap: 8px; width: min(360px, calc(100vw - 32px)); }
.v3-toast {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px 12px 14px; border-radius: 14px;
  background: var(--v3-surface-2, #2d3247); color: var(--v3-txt, #fff); border: 1px solid var(--v3-line-2, rgba(255,255,255,.18));
  border-left: 3px solid var(--v3-accent, #8577ff); box-shadow: 0 18px 40px -16px var(--v3-shadow, rgba(0,0,0,.6));
  font-family: var(--v3-font); animation: v3-toast-in .4s var(--v3-ease) both;
}
.v3-toast.sev-success { border-left-color: var(--v3-ok, #34d399); }
.v3-toast.sev-warning { border-left-color: #ffb547; }
.v3-toast.sev-danger  { border-left-color: var(--v3-danger, #f0566e); }
.v3-toast.out { animation: v3-toast-out .25s ease forwards; }
.v3-toast-ico { font-size: 18px; line-height: 1.2; }
.v3-toast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.v3-toast-body strong { font-size: 14px; }
.v3-toast-body span { color: var(--v3-txt-2, #ccc); overflow-wrap: anywhere; }
.v3-toast-x { border: 0; background: transparent; color: var(--v3-muted, #999); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
@keyframes v3-toast-in { from { opacity: 0; translate: 24px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes v3-toast-out { to { opacity: 0; translate: 24px 0; } }
html.v3 .notif-toast { border-left-width: 3px !important; animation: v3-toast-in .4s var(--v3-ease) both !important; }

/* ═══ Bandeau MODE DEV ═══ */
.v3-devbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 99990; height: 26px; line-height: 16px; padding: 5px 12px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
  font: 500 12px var(--v3-font, sans-serif); color: #1b1400;
  background: repeating-linear-gradient(45deg, #ffd43b 0 14px, #ffcc1a 14px 28px);
  border-bottom: 1px solid rgba(0,0,0,.25);
}
.v3-devbar strong { font-weight: 800; letter-spacing: .08em; }

/* ═══ Mobile ═══ */
.v3-mnav { display: none; }
@media (max-width: 760px) {
  html.v3 .v3-dash-cols { grid-template-columns: 1fr; }
  html.v3 .v3-kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  html.v3 .v3-kpi { padding: 12px; }
  html.v3 .v3-kpi-value { font-size: 22px; }
  html.v3 .v3-dash-page { padding: 16px 12px 24px !important; }
  html.v3 .v3-dash-title { font-size: 21px; }
  html.v3 .v3-srv-list { grid-template-columns: 1fr; }
  html.v3 .v3-act { flex-wrap: wrap; gap: 2px 10px; }
  html.v3 .v3-act-ts, html.v3 .v3-act-user { flex: 0 0 auto; }
  html.v3 .v3-act-desc { flex: 0 0 100%; }
  html.v3 .userbox #greeting { display: none !important; }
  html.v3 .action-pill { min-height: 72px; padding: 14px 48px 14px 16px !important; }
  html.v3 .v3-search .v3-search-input { height: 44px; }
  html.v3 input, html.v3 select, html.v3 textarea { font-size: 16px !important; } /* 16px : pas de zoom auto iOS */
  html.v3 .v3-search-kbd { display: none; }
  html.v3 .v3-chip { max-width: 160px; }
  html.v3 .modal-dialog, html.v3 .pm-dialog, html.v3 .tfb-panel { width: calc(100vw - 24px) !important; max-width: none !important; max-height: calc(100dvh - 32px); overflow: auto; }

  /* Barre de navigation en bas (pages admin) */
  .v3-mnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 8500;
    display: grid; grid-template-columns: repeat(5, 1fr);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: var(--v3-surface, #242839); border-top: 1px solid var(--v3-line-2, rgba(255,255,255,.18));
    box-shadow: 0 -10px 30px -12px var(--v3-shadow, rgba(0,0,0,.6));
  }
  .v3-mnav a, .v3-mnav button {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0;
    border: 0; background: transparent; color: var(--v3-muted, #a3a8be); text-decoration: none;
    font: 500 10.5px var(--v3-font, sans-serif); cursor: pointer; border-radius: 10px;
  }
  .v3-mnav a.on { color: var(--v3-accent, #8577ff); }
  .v3-mnav a:active, .v3-mnav button:active { background: var(--v3-hover, rgba(255,255,255,.05)); }
  html.v3-has-mnav body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  html.v3-has-mnav .footerbar { display: none !important; }
  html.v3-has-mnav .v3-theme-btn { bottom: calc(76px + env(safe-area-inset-bottom)); left: 12px; width: 38px; height: 38px; }
  html.v3-has-mnav .v3-theme-panel { bottom: calc(122px + env(safe-area-inset-bottom)); left: 12px; }
  html.v3-has-mnav .v3-toasts { bottom: calc(76px + env(safe-area-inset-bottom)); }
  html.v3-has-mnav .notif-toast-container { bottom: calc(76px + env(safe-area-inset-bottom)) !important; }
  .v3-devbar { font-size: 11px; padding: 4px 8px; }
}

/* Mobile : bouton de déconnexion compact sur une ligne */
@media (max-width: 760px) { html.v3 .topbar .btn-danger { white-space: nowrap; padding: 6px 10px !important; font-size: 12px !important; } html.v3 .topbar { gap: 8px !important; } }

/* ═══════════════════════════════════════════════════════════════════════════
   HARMONISATION des pages qui imposent leur propre style (ex. /public, /status…)
   ═══════════════════════════════════════════════════════════════════════════ */
/* Police unique : les pages qui forcent Rajdhani / Share Tech Mono / Orbitron… repassent en Inter
   (les zones de code/logs gardent leur police monospace) */
html.v3 :is(.brand, .pill-title, .pill-sub, .section-title, .navlink, .sidebar-head, .sidebar-foot, .userbox, #greeting,
  .btn-logout, .footerbar, .footerbar *, .mono, .role, .tab, .btn, .page-title, .page-sub, .panel-title, .card-title,
  h1, h2, h3, h4, h5, h6, p, li, label, button, input, select, textarea, table, th, td, .badge, .chip, .stat-label, .stat-value) {
  font-family: var(--v3-font) !important;
}

/* Décors animés propres aux pages (grilles, scanlines…) : remplacés par le fond V3 */
html.v3 :is(.grid-bg, .scanlines, .bg-grid, .bg-anim, .particles, .stars) { display: none !important; }

/* Bouton de déconnexion des pages « espace public » */
html.v3 .btn-logout {
  padding: 7px 12px !important; border-radius: 10px !important; font-size: 13px !important; font-weight: 600 !important;
  background: transparent !important; color: var(--v3-danger-txt) !important;
  border: 1px solid color-mix(in srgb, var(--v3-danger) 45%, transparent) !important; cursor: pointer;
  transition: background .2s, color .2s !important;
}
html.v3 .btn-logout:hover { background: var(--v3-danger) !important; color: #fff !important; }

/* Titre de section « // XXX » en tête de contenu → même style que les titres de groupes */
html.v3 .content > .section-title {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px 4px !important;
  font-size: 12px !important; font-weight: 600 !important; letter-spacing: .12em !important; text-transform: uppercase;
  color: var(--v3-muted) !important; text-shadow: none !important;
}
html.v3 .content > .section-title::after { content: ""; flex: 1; height: 1px; background: var(--v3-line); }

/* Pages à barre latérale fixe dans le flux (ex. /public) : mêmes marges que le reste */
html.v3 .layout > .sidebar:not(.collapsed) .sidebar-head { margin: 4px 0 8px; }
html.v3 .layout > .sidebar .navlink { margin: 0 8px; }
html.v3 .layout > .content > .actions-stack:not(:has(> :not(.action-pill))) { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px !important; max-width: 1200px; }
html.v3 .brand > span { color: inherit !important; text-shadow: none !important; }

/* Bandeau DEV fixe : on décale la page et la topbar collante */
html.v3-dev body { padding-top: 26px !important; }
html.v3-dev .topbar { top: 26px !important; }
html.v3-dev .sidebar { top: calc(56px + 26px) !important; }

/* ═══ Annonces (bandeau sous la barre du haut) ═══ */
.v3-ann { position: relative; z-index: 30; display: flex; flex-direction: column; }
.v3-ann-item {
  --a: #4cc9f0;
  display: flex; align-items: center; gap: 10px; padding: 9px 16px;
  font: 500 14px var(--v3-font, sans-serif); color: var(--v3-txt, #fff);
  background: color-mix(in srgb, var(--a) 16%, var(--v3-surface, #242839));
  border-bottom: 1px solid color-mix(in srgb, var(--a) 40%, transparent);
  animation: v3-ann-in .45s var(--v3-ease, ease) both;
}
.v3-ann-item.lv-success { --a: var(--v3-ok, #34d399); }
.v3-ann-item.lv-warning { --a: #ffb547; }
.v3-ann-item.lv-danger  { --a: var(--v3-danger, #f0566e); }
.v3-ann-item.out { animation: v3-ann-out .25s ease forwards; }
.v3-ann-ico { flex: 0 0 auto; }
.v3-ann-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.v3-ann-text a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.v3-ann-x { flex: 0 0 auto; border: 0; background: transparent; color: inherit; opacity: .7; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.v3-ann-x:hover { opacity: 1; }
@keyframes v3-ann-in { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }
@keyframes v3-ann-out { to { opacity: 0; translate: 0 -8px; } }

/* ═══ Statut public : boutons partage + mode TV ═══ */
html.v3 .v3-share { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
html.v3-tv .topbar, html.v3-tv .sidebar, html.v3-tv .footerbar, html.v3-tv .v3-theme-btn, html.v3-tv .v3-theme-panel,
html.v3-tv .v3-mnav, html.v3-tv .v3-ann, html.v3-tv .v3-toasts, html.v3-tv .notif-toast-container, html.v3-tv .backdrop,
html.v3-tv .v3-share, html.v3-tv #pushPrompt, html.v3-tv [class*="push-"] { display: none !important; }
html.v3-tv body { cursor: none; }
html.v3-tv body:hover { cursor: default; }
html.v3-tv .content { max-width: none !important; padding: 28px 40px 40px !important; zoom: 1.15; }
html.v3-tv .page-title { font-size: 40px !important; }
.v3-tv-clock { position: fixed; top: 22px; right: 32px; z-index: 50; text-align: right; font-family: var(--v3-font); color: var(--v3-txt); }
.v3-tv-clock b { display: block; font-size: 44px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.v3-tv-clock span { font-size: 14px; color: var(--v3-muted); text-transform: capitalize; }
.v3-tv-exit { position: fixed; left: 16px; bottom: 16px; z-index: 50; font: 500 12px var(--v3-font); color: var(--v3-muted); text-decoration: none; opacity: 0; transition: opacity .3s; }
html.v3-tv body:hover .v3-tv-exit { opacity: 1; }

/* ═══ Dashboard : mode personnalisation ═══ */
html.v3 .v3-dash-actions { display: flex; gap: 8px; flex-wrap: wrap; }
html.v3 .v3-dash-hidden { display: none !important; }
html.v3 .v3-dash-edit .v3-dash-hidden { display: flex !important; opacity: .4; }
html.v3 .v3-dash-edit .v3-dash-card.v3-dash-hidden { display: block !important; }
html.v3 .v3-dash-edit .v3-kpi { cursor: grab; outline: 2px dashed color-mix(in srgb, var(--v3-accent) 45%, transparent); outline-offset: 2px; }
html.v3 .v3-dash-edit .v3-kpi.dragging { opacity: .35; cursor: grabbing; }
html.v3 .v3-dash-edit .v3-dash-card { outline: 2px dashed color-mix(in srgb, var(--v3-accent) 30%, transparent); outline-offset: 2px; position: relative; }
html.v3 .v3-dash-eye {
  position: absolute; top: 8px; right: 8px; z-index: 3; padding: 3px 8px; border-radius: 8px; cursor: pointer;
  font: 600 11px var(--v3-font); color: var(--v3-txt); background: var(--v3-surface-3); border: 1px solid var(--v3-line-2);
}
html.v3 .v3-dash-eye[hidden] { display: none; }

html.v3 .v3-kpi > .v3-dash-eye { top: 6px; right: 6px; padding: 1px 6px; }

/* ═══════════════════════════════════════════════════════════════════════════
   MENU HAMBURGER V3 (barre latérale en tiroir, identique sur toutes les pages)
   ═══════════════════════════════════════════════════════════════════════════ */
/* Bouton : 3 barres → ✕ */
html.v3 #btnSidebar .bar, html.v3 label[for="navToggle"].icon-btn .bar {
  transition: transform .3s var(--v3-ease), opacity .2s, width .3s var(--v3-ease) !important; transform-origin: center;
}
html.v3.v3-nav-open #btnSidebar .bar:nth-child(1), html.v3.v3-nav-open label[for="navToggle"].icon-btn .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
html.v3.v3-nav-open #btnSidebar .bar:nth-child(2), html.v3.v3-nav-open label[for="navToggle"].icon-btn .bar:nth-child(2) { opacity: 0; }
html.v3.v3-nav-open #btnSidebar .bar:nth-child(3), html.v3.v3-nav-open label[for="navToggle"].icon-btn .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
html.v3.v3-nav-open #btnSidebar, html.v3.v3-nav-open label[for="navToggle"].icon-btn { background: var(--v3-surface-2) !important; border-color: var(--v3-line-2) !important; }

/* Tiroir : même position et taille partout, quel que soit le CSS de la page */
html.v3 .sidebar.v3-nav {
  position: fixed !important; left: 0 !important; top: 58px !important; bottom: 0 !important; height: auto !important;
  width: 290px !important; min-width: 0 !important; max-width: 86vw;
  display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 0 !important; overflow: hidden !important;
  z-index: 8000 !important; border-radius: 0 !important;
  background: var(--v3-surface) !important; border: none !important; border-right: 1px solid var(--v3-line) !important;
  box-shadow: 24px 0 60px -24px var(--v3-shadow) !important;
  transform: translateX(-105%); visibility: hidden;
  transition: transform .38s var(--v3-ease), visibility 0s linear .38s !important;
}
html.v3.v3-nav-open .sidebar.v3-nav { transform: none; visibility: visible; transition: transform .38s var(--v3-ease), visibility 0s !important; }
html.v3-dev .sidebar.v3-nav { top: calc(58px + 26px) !important; }
/* La barre ne réserve plus de colonne dans la mise en page */
html.v3 .layout:has(> .sidebar.v3-nav) { display: block !important; padding-left: 0 !important; grid-template-columns: none !important; }
/* Éléments d'origine remplacés par la version V3 (gardés dans le DOM pour les scripts des pages) */
html.v3 .sidebar.v3-nav > .sidebar-head, html.v3 .sidebar.v3-nav > nav, html.v3 .sidebar.v3-nav > .navlist,
html.v3 .sidebar.v3-nav > .sidebar-foot { display: none !important; }
html.v3 .sidebar.v3-nav ~ .backdrop, html.v3 .backdrop[for="navToggle"] { display: none !important; }

/* Fond flouté */
.v3-nav-backdrop {
  position: fixed; inset: 0; z-index: 7990; background: rgba(8,10,18,.45);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
html.v3-nav-open .v3-nav-backdrop { opacity: 1; pointer-events: auto; }

/* Carte utilisateur + recherche */
html.v3 .v3-nav-head { padding: 16px 14px 12px; border-bottom: 1px solid var(--v3-line); display: flex; flex-direction: column; gap: 12px; }
html.v3 .v3-nav-user { display: flex; align-items: center; gap: 12px; }
html.v3 .v3-nav-av {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 17px; color: #fff; background: linear-gradient(135deg, var(--v3-accent), var(--v3-accent-2));
  box-shadow: 0 0 0 3px var(--v3-surface), 0 0 0 4px color-mix(in srgb, var(--v3-accent) 45%, transparent);
}
html.v3 .v3-nav-who { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
html.v3 .v3-nav-who b { font-size: 15px; color: var(--v3-txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.v3 .v3-nav-who span { font-size: 12px; color: var(--v3-muted); }
html.v3 .v3-nav-role { align-self: flex-start; padding: 1px 8px; border-radius: 99px; font-weight: 600; text-transform: capitalize;
  color: var(--v3-accent) !important; background: color-mix(in srgb, var(--v3-accent) 15%, transparent); }
html.v3 .v3-nav-search { position: relative; display: block; }
html.v3 .v3-nav-search .v3-nav-search-ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--v3-muted); pointer-events: none; }
html.v3 .v3-nav-search input { width: 100% !important; height: 38px; padding: 0 12px 0 36px !important; font-size: 14px !important; border-radius: 10px !important; }

/* Groupes et liens */
html.v3 .v3-nav-groups { flex: 1; overflow-y: auto; padding: 8px 10px 12px; overscroll-behavior: contain; }
html.v3 .v3-nav-group { padding: 6px 0; }
html.v3 .v3-nav-group + .v3-nav-group { border-top: 1px solid var(--v3-line); margin-top: 4px; padding-top: 10px; }
html.v3 .v3-nav-title { padding: 4px 10px 6px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--v3-muted); }
html.v3 .sidebar.v3-nav a.v3-nav-link {
  position: relative; display: flex !important; align-items: center; gap: 12px; margin: 1px 0 !important;
  padding: 9px 10px !important; border-radius: 10px !important; font-size: 14px !important; font-weight: 500 !important;
  color: var(--v3-txt-2) !important; text-decoration: none;
}
html.v3 .sidebar.v3-nav a.v3-nav-link[hidden] { display: none !important; }
html.v3 .v3-nav-ico { flex: 0 0 auto; color: var(--v3-muted); transition: color .2s, transform .25s var(--v3-ease); }
html.v3 .sidebar.v3-nav a.v3-nav-link:hover { background: var(--v3-surface-2) !important; color: var(--v3-txt) !important; }
html.v3 .sidebar.v3-nav a.v3-nav-link:hover .v3-nav-ico { color: var(--v3-accent); transform: translateX(2px); }
html.v3 .sidebar.v3-nav a.v3-nav-link.active { background: color-mix(in srgb, var(--v3-accent) 16%, transparent) !important; color: var(--v3-txt) !important; font-weight: 600 !important; }
html.v3 .sidebar.v3-nav a.v3-nav-link.active .v3-nav-ico { color: var(--v3-accent); }
html.v3 .sidebar.v3-nav a.v3-nav-link.active::before {
  content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--v3-accent);
}
/* Apparition en cascade à l'ouverture */
html.v3.v3-nav-open .sidebar.v3-nav a.v3-nav-link { animation: v3-nav-in .4s var(--v3-ease) backwards; animation-delay: calc(var(--i, 0) * 22ms + 60ms); }
@keyframes v3-nav-in { from { opacity: 0; translate: -12px 0; } to { opacity: 1; translate: 0 0; } }

/* Pied : thème + déconnexion */
html.v3 .v3-nav-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--v3-line); }
html.v3 .v3-nav-act {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 38px; border-radius: 10px; cursor: pointer;
  font: 600 13px var(--v3-font); color: var(--v3-txt-2); background: var(--v3-surface-2); border: 1px solid var(--v3-line);
  transition: background .2s, color .2s, border-color .2s;
}
html.v3 .v3-nav-act:hover { color: var(--v3-txt); background: var(--v3-surface-3); }
html.v3 .v3-nav-act.danger { color: var(--v3-danger-txt); border-color: color-mix(in srgb, var(--v3-danger) 35%, transparent); background: transparent; }
html.v3 .v3-nav-act.danger:hover { color: #fff; background: var(--v3-danger); }
html.v3 .v3-nav-act .v3-nav-ico { color: currentColor; }

/* Mobile : tiroir sous la barre, au-dessus de la navigation du bas */
@media (max-width: 760px) {
  html.v3 .sidebar.v3-nav { top: 54px !important; width: 84vw !important; }
  html.v3-dev .sidebar.v3-nav { top: calc(54px + 26px) !important; }
  html.v3-has-mnav .sidebar.v3-nav { bottom: calc(64px + env(safe-area-inset-bottom)) !important; }
}

/* Le menu ne doit pas être enfermé dans le contexte d empilement de .layout (z-index 2) */
html.v3 .layout:has(> .sidebar.v3-nav) { z-index: auto !important; }
/* Barre du haut nette et cliquable (bouton ✕) au-dessus du fond flouté */
html.v3.v3-nav-open .topbar { z-index: 8001 !important; }
html.v3.v3-nav-open .v3-theme-btn { opacity: 0; pointer-events: none; }
html.v3.v3-nav-open #pushToggle, html.v3.v3-nav-open .push-toggle { opacity: 0 !important; pointer-events: none !important; }

/* ── Bouton « ❤️ Soutenir le serveur » (topbar) ── */
.v3-support-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; margin-left: auto; margin-right: 8px;
  border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
  color: #fff; background: linear-gradient(135deg, #e91e63, #ff5c8a); box-shadow: 0 4px 14px rgba(233, 30, 99, .28);
  transition: transform .15s ease, box-shadow .15s ease; }
.v3-support-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(233, 30, 99, .38); color: #fff; }
.v3-support-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.v3-support-heart { display: inline-block; animation: v3-heartbeat 2.4s ease-in-out infinite; }
@keyframes v3-heartbeat { 0%, 60%, 100% { transform: scale(1); } 15% { transform: scale(1.22); } 30% { transform: scale(1); } 45% { transform: scale(1.14); } }
.v3-nav-act.v3-nav-support { color: #ff5c8a; text-decoration: none; }
@media (max-width: 760px) { .v3-support-txt { display: none; } .v3-support-btn { width: 34px; padding: 0; justify-content: center; } }

/* ── Modales V3 (remplacent alert / confirm / prompt du navigateur) ── */
.v3-modal-back { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 16px;
  background: rgba(6, 8, 18, .55); backdrop-filter: blur(6px); opacity: 0; transition: opacity .18s ease; }
.v3-modal-back.open { opacity: 1; }
.v3-modal { width: min(460px, 100%); border-radius: 18px; background: var(--v3-surface, #1a1d2e); color: var(--v3-txt, #eef3ff);
  border: 1px solid var(--v3-line, rgba(255,255,255,.12)); box-shadow: 0 30px 80px rgba(0,0,0,.45);
  transform: translateY(10px) scale(.97); transition: transform .2s cubic-bezier(.2,.9,.3,1.2); overflow: hidden; text-align: left; }
.v3-modal-back.open .v3-modal { transform: none; }
.v3-modal-h { padding: 16px 20px 6px; font-size: 16px; font-weight: 700; }
.v3-modal-b { padding: 4px 20px 14px; font-size: 14px; line-height: 1.55; color: var(--v3-txt-2, #c9d2ea); overflow-wrap: anywhere; max-height: 50vh; overflow: auto; }
.v3-modal-in { display: block; width: calc(100% - 40px); margin: 0 20px 14px; height: 42px; padding: 0 12px; border-radius: 10px; font-size: 15px;
  background: var(--v3-surface-2, #11131f); color: inherit; border: 1px solid var(--v3-line-2, rgba(255,255,255,.18)); }
.v3-modal-in:focus { outline: 2px solid var(--v3-accent, #8577ff); outline-offset: 1px; }
.v3-modal-f { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 20px 18px; }
.v3-modal-btn { height: 38px; padding: 0 18px; border-radius: 10px; font-weight: 600; font-size: 14px; cursor: pointer; border: 1px solid transparent; }
.v3-modal-btn.primary { background: var(--v3-accent, #8577ff); color: #fff; }
.v3-modal-btn.danger { background: var(--v3-danger, #ef4444); color: #fff; }
.v3-modal-btn.ghost { background: transparent; color: inherit; border-color: var(--v3-line-2, rgba(255,255,255,.18)); }
.v3-modal-btn:focus-visible { outline: 2px solid var(--v3-txt, #fff); outline-offset: 2px; }

/* ── Saisons (v3/seasons.js) ── */
.v3-season-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9000; }
html[data-v3-season] .topbar { box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--v3-season) 70%, transparent); }
html[data-v3-season] .topbar .brand::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%;
  background: var(--v3-season); box-shadow: 0 0 10px var(--v3-season); vertical-align: middle; }
html[data-v3-season="halloween"] body { background-image: radial-gradient(1200px 500px at 85% -10%, rgba(255, 140, 26, .10), transparent 60%); }
html[data-v3-season="noel"] body { background-image: radial-gradient(1200px 500px at 15% -10%, rgba(230, 57, 70, .08), transparent 60%), radial-gradient(900px 400px at 90% 0%, rgba(46, 204, 113, .07), transparent 60%); }
.v3-garland { position: absolute; left: 0; right: 0; bottom: -7px; height: 12px; display: flex; justify-content: space-around; pointer-events: none; z-index: 2; }
.v3-garland i { width: 7px; height: 10px; border-radius: 50% 50% 45% 45%; background: #ffd43b; box-shadow: 0 0 8px currentColor; color: #ffd43b; animation: v3-blink 1.6s ease-in-out infinite; }
.v3-garland i:nth-child(4n+1) { background: #e63946; color: #e63946; animation-delay: .2s; }
.v3-garland i:nth-child(4n+2) { background: #2ecc71; color: #2ecc71; animation-delay: .5s; }
.v3-garland i:nth-child(4n+3) { background: #4cc9f0; color: #4cc9f0; animation-delay: .9s; }
@keyframes v3-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.topbar { position: relative; }

/* ── Œufs de Pâques cachés (chasse aux œufs) ── */
.v3-egg { position: fixed; z-index: 9500; width: 38px; height: 38px; border: 0; padding: 0; background: none; cursor: pointer; font-size: 26px; line-height: 38px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); animation: v3-egg-bob 2.6s ease-in-out infinite; transform-origin: 50% 90%; }
.v3-egg:hover { transform: scale(1.25) rotate(-8deg); }
.v3-egg.found { animation: v3-egg-found .6s ease forwards; }
@keyframes v3-egg-bob { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) translateY(-3px); } }
@keyframes v3-egg-found { to { transform: scale(2.2) rotate(20deg); opacity: 0; } }

.v3-nav-count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--v3-accent, #8577ff); color: #fff; font-size: 11px; font-weight: 800; display: inline-grid; place-items: center; }

/* ── Confort de lecture (Paramètres → Affichage) ── */
html[data-v3-text="lg"] body { zoom: 1.12; }
html[data-v3-text="xl"] body { zoom: 1.25; }
html[data-v3-contrast="1"] {
  --v3-muted: color-mix(in srgb, var(--v3-txt) 82%, transparent);
  --v3-txt-2: var(--v3-txt);
  --v3-line: color-mix(in srgb, var(--v3-txt) 34%, transparent);
  --v3-line-2: color-mix(in srgb, var(--v3-txt) 52%, transparent);
}
html[data-v3-contrast="1"] a:not(.btn):not(.action-pill):not(.navlink) { text-decoration: underline; }
html[data-v3-contrast="1"] :focus-visible { outline: 3px solid var(--v3-txt) !important; outline-offset: 2px; }
/* ── Message de bienvenue (Réglages du panel) ── */
.v3-welcome { max-width: 780px; margin: 16px auto 0; padding: 14px 18px; border-radius: 14px; display: flex; gap: 12px; align-items: flex-start;
  background: var(--v3-surface); border: 1px solid var(--v3-line); font-size: 14.5px; line-height: 1.55; color: var(--v3-txt); white-space: pre-line; }
.v3-welcome .ico { font-size: 22px; line-height: 1.1; }
.v3-welcome.info { border-left: 4px solid #4cc9f0; } .v3-welcome.success { border-left: 4px solid var(--v3-ok, #34d399); }
.v3-welcome.warning { border-left: 4px solid #ffb547; } .v3-welcome.event { border-left: 4px solid #e040fb; }

/* ── Appli Android : bandeau « Nouvelle version disponible » ── */
.v3-appupd { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 2147483000;
  max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px;
  border-radius: 16px; background: var(--v3-surface); color: var(--v3-txt); border: 1px solid var(--v3-accent, #8577ff);
  box-shadow: 0 14px 40px rgba(0,0,0,.45); animation: v3-appupd-in .35s var(--v3-ease, ease) both; }
.v3-appupd .ico { font-size: 24px; }
.v3-appupd .txt { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; line-height: 1.4; }
.v3-appupd .txt span { color: var(--v3-muted); font-size: 12.5px; }
.v3-appupd .btn { text-decoration: none; white-space: nowrap; }
.v3-appupd .later { background: none; border: 0; color: var(--v3-muted); cursor: pointer; font: inherit; font-size: 13px; padding: 6px; }
@keyframes v3-appupd-in { from { opacity: 0; transform: translateY(20px); } }

/* ── Fenêtre « Mises à jour des jeux disponibles » (équipe) ── */
.v3-modal.v3-maj { box-sizing: border-box; width: min(620px, calc(100% - 24px)); max-height: calc(100% - 48px); display: flex; flex-direction: column; }
.v3-maj-body { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; white-space: normal; }
.v3-maj-intro { margin: 0 0 4px; color: var(--v3-txt-2); font-size: 13.5px; line-height: 1.5; }
.v3-maj-note { margin: 6px 0 0; color: var(--v3-muted); font-size: 12px; }
.v3-maj-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--v3-surface-2); border: 1px solid var(--v3-line); cursor: pointer; }
.v3-maj-row.warn { border-color: rgba(255,181,71,.45); }
.v3-maj-row input { margin-top: 4px; accent-color: var(--v3-accent, #8577ff); width: 16px; height: 16px; flex: 0 0 auto; }
.v3-maj-ico { font-size: 18px; line-height: 1.3; }
.v3-maj-txt { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: var(--v3-txt); min-width: 0; }
.v3-maj-txt small { color: var(--v3-muted); font-weight: 500; }
.v3-maj-txt > span { color: var(--v3-txt-2); font-size: 12.5px; }
.v3-maj-why { color: #ffb547 !important; }
.v3-maj-total { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--v3-surface-3, #363c55); margin-bottom: 4px; }
.v3-maj-total > div:first-child { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--v3-txt); }
.v3-maj-total span { color: var(--v3-txt-2); font-size: 12.5px; }
.v3-maj-bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 6px; }
.v3-maj-bar.big { height: 10px; margin-top: 0; }
.v3-maj-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--v3-accent, #8577ff), var(--v3-accent-2, #4cc9f0)); transition: width .6s var(--v3-ease, ease); }
.v3-maj-bar.ok i { background: #34d399; } .v3-maj-bar.warn i { background: #ffb547; }
.v3-maj-row.cur { border-color: var(--v3-accent, #8577ff); }
.v3-maj-row.wait { opacity: .55; cursor: default; }