/* ============================================================
   KAIROBOT DASHBOARD V2 — système de design « épuré sombre pro »
   Chargé UNIQUEMENT par les pages du dashboard (.dash-page) :
   le site public garde son style v1 intact.
   Principe : mêmes classes/IDs que la v1 (le JS ne change pas),
   seules les définitions visuelles changent.
   ============================================================ */

/* ---------- Jetons ---------- */
.dash-page {
  /* Un SEUL accent, légèrement désaturé pour se fondre dans les neutres */
  --accent: #6672e8;
  --accent-2: #6672e8;
  --accent-deep: #4d59c9;
  --accent-soft: rgba(102, 114, 232, 0.13);

  --font-display: 'Outfit', 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Rayons resserrés : contenants doux, éléments internes nets */
  --radius-lg: 14px;
  --radius: 10px;
  --radius-sm: 7px;

  --transition: 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

[data-theme='dark'] .dash-page {
  --bg: #0a0a10;
  --bg-2: #0d0d14;
  --surface: #101017;
  --surface-2: #16161f;
  --border: rgba(255, 255, 255, 0.065);
  --border-strong: rgba(255, 255, 255, 0.12);
  --text: #e9eaf2;
  --text-2: #8b8d9d;
  --nav-bg: rgba(10, 10, 16, 0.82);
}
[data-theme='light'] .dash-page {
  --bg: #fafafa;
  --bg-2: #f4f4f6;
  --surface: #ffffff;
  --surface-2: #f1f1f4;
  --border: rgba(15, 15, 25, 0.09);
  --border-strong: rgba(15, 15, 25, 0.17);
  --text: #17181f;
  --text-2: #6d6f7c;
  --nav-bg: rgba(250, 250, 250, 0.85);
}

.dash-page {
  background: var(--bg);
  color: var(--text);
  font-feature-settings: 'cv02', 'cv03';
}
/* Halo d'ambiance unique, très discret — la seule « texture » de la page */
.dash-page::before {
  content: '';
  position: fixed;
  inset: 0 0 auto 0;
  height: 380px;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(560px 300px at 18% -60px, var(--accent-soft), transparent 70%);
  opacity: 0.55;
}
.dash-page ::selection { background: var(--accent-soft); }

/* ---------- Barre du haut : fine, discrète ---------- */
.dash-page .navbar {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}
.dash-page .nav-container { height: 54px; }
.dash-page .nav-logo span { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.dash-page .nav-link {
  font-size: 0.86rem;
  color: var(--text-2);
  border-radius: var(--radius-sm);
  padding: 6px 11px;
  transition: color var(--transition), background var(--transition);
}
.dash-page .nav-link:hover { color: var(--text); background: var(--surface-2); }
.dash-page .nav-link.active { color: var(--text); background: var(--surface-2); }
.dash-page .navbar .btn-secondary { border-color: var(--border); background: transparent; }

/* ---------- Ossature ---------- */
.dash-page .manage,
.dash-page .dash { padding-top: 88px; }
.dash-page .manage-layout {
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 40px;
}
.dash-page .manage-content { max-width: 880px; }

/* ---------- Sidebar : à plat, façon Linear ---------- */
.dash-page .side {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 4px 2px;
  top: 84px;
  max-height: calc(100dvh - 104px);
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.dash-page .side-guild {
  padding: 8px 10px 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.dash-page .side-guild-name { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; }
.dash-page .guild-avatar { border-radius: 10px; }

.dash-page .side-group { margin-bottom: 2px; }
.dash-page .side-group-head {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-2);
  text-transform: none;
  padding: 10px 10px 4px;
  opacity: 0.85;
}
.dash-page .side-group-head i { font-size: 0.6rem; opacity: 0.6; }
.dash-page .side-item {
  position: relative;
  height: 34px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--text-2);
  gap: 10px;
  border: 0;
  transition: background var(--transition), color var(--transition);
}
.dash-page .side-item i {
  width: 17px;
  font-size: 0.8rem;
  opacity: 0.75;
  transition: opacity var(--transition);
}
.dash-page .side-item:hover { background: var(--surface-2); color: var(--text); }
.dash-page .side-item.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 550;
}
.dash-page .side-item.active i { opacity: 1; }
/* Rail d'accent pleine hauteur sur l'entrée courante — même langage que
   dashboard.css (.side-item.active::before), posé ici pour de vrai : cette
   feuille est chargée en dernier et ses sélecteurs `.dash-page` sont plus
   spécifiques, donc c'est ELLE qui gagne la cascade sur manage.html/
   admin.html, pas dashboard.css seul (bug du 25/09 : un premier essai avait
   modifié dashboard.css sans vérifier que v2.css ne l'écrasait pas déjà). */
.dash-page .side-item.active::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 0 3px 3px 0; background: var(--accent);
}
/* Pied de menu (thème/liens/déconnexion) : caché en desktop, où #nav-menu
   suffit déjà — réactivé dans le bloc mobile plus bas. */
.dash-page .side-collapse-bas { display: none; }
.dash-page .side-refresh,
.dash-page .srv-switch-btn {
  border: 1px solid var(--border);
  background: transparent;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: var(--text-2);
  transition: border-color var(--transition), color var(--transition);
}
.dash-page .side-refresh:hover,
.dash-page .srv-switch-btn:hover { border-color: var(--border-strong); color: var(--text); }
.dash-page .srv-switch-menu {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 16px 48px -16px rgba(0, 0, 0, 0.6);
}

/* ---------- Titres de section ---------- */
.dash-page .section-head { margin-bottom: 22px; }
.dash-page .section-head h1,
.dash-page .dash-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.2;
  border: 0;
  padding: 0;
}
/* dashboard.css pose un trait d'accent devant chaque titre de section
   (.section-head h1::before, 4px de large) avec un padding-left assorti
   pour lui laisser la place. Ce fichier retire le padding (design épuré,
   sans trait) mais le sélecteur du trait n'est pas scopé .dash-page : il
   restait actif et chevauchait le texte, faute de retrait pour lui. */
.dash-page .section-head h1::before { display: none; }
.dash-page .dash-title { font-size: 1.7rem; }
.dash-page .section-head p,
.dash-page .dash-sub {
  color: var(--text-2);
  font-size: 0.9rem;
  margin-top: 6px;
  max-width: 62ch;
  text-wrap: pretty;
}

/* ---------- Panneaux : UNE seule emphase — la bordure ---------- */
.dash-page .panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
  padding: 22px 24px;
  transition: border-color var(--transition);
}
.dash-page .panel:hover { border-color: var(--border-strong); }
/* .spotlight gardait un dégradé v1 : neutralisé, la classe reste pour le JS */
.dash-page .panel.spotlight,
.dash-page .spotlight {
  background: var(--surface);
  background-image: none;
}
.dash-page .panel-head { margin-bottom: 14px; gap: 10px; }
.dash-page .panel-head h2 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.dash-page .panel-head .emoji { font-size: 1rem; }
.dash-page .panel-desc { font-size: 0.875rem; color: var(--text-2); max-width: 65ch; text-wrap: pretty; }
.dash-page .hint { font-size: 0.8rem; color: var(--text-2); }
.dash-page .warn-text {
  font-size: 0.84rem;
  border: 1px solid rgba(240, 169, 59, 0.25);
  background: rgba(240, 169, 59, 0.07);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  color: var(--text);
}

/* ---------- Boutons ---------- */
.dash-page .btn {
  height: 36px;
  padding: 0 15px;
  border-radius: var(--radius-sm);
  font-size: 0.865rem;
  font-weight: 550;
  letter-spacing: 0;
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform 120ms ease;
}
.dash-page .btn:active { transform: scale(0.98); }
.dash-page .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.dash-page .btn-primary {
  background: var(--accent);
  border: 1px solid transparent;
  box-shadow: none;
}
.dash-page .btn-primary:hover { background: var(--accent-deep); transform: none; box-shadow: none; }
.dash-page .btn-secondary,
.dash-page .btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.dash-page .btn-secondary:hover,
.dash-page .btn-ghost:hover { border-color: var(--border-strong); background: var(--surface-2); }
.dash-page .btn-danger {
  background: transparent;
  border: 1px solid rgba(224, 85, 106, 0.35);
  color: #e0556a;
}
.dash-page .btn-danger:hover { background: rgba(224, 85, 106, 0.1); border-color: #e0556a; }
.dash-page .btn-sm { height: 30px; padding: 0 11px; font-size: 0.8rem; }

/* ---------- Champs ---------- */
.dash-page .input,
.dash-page select.input,
.dash-page textarea.input {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  min-height: 36px;
  padding: 7px 11px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.dash-page .input:hover { border-color: var(--border-strong); }
.dash-page .input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}
.dash-page .field { margin-bottom: 14px; }
.dash-page .field > label {
  font-size: 0.8rem;
  font-weight: 550;
  color: var(--text-2);
  margin-bottom: 6px;
  display: block;
}
.dash-page .field > label .muted { font-weight: 400; }

/* ---------- Interrupteurs ---------- */
/* Bloc retiré le 27/09 : `.dash-page .toggle .track` (0,3,0 de spécificité)
   collisionnait avec `.toggle .track` de dashboard.css (0,2,0) — v2.css
   l'emportait sur width/height/border-radius mais ne redéfinissait jamais
   `position: relative` ni `::before` (resté celui, plus récent et soigné,
   de dashboard.css — centrage par transform, variables --sw-w/--sw-s). Le
   curseur restait calculé pour une piste de 44px alors que v2.css l'avait
   réduite à 34px : il débordait de sa piste et chevauchait visuellement le
   texte du label suivant (bug remonté par le propriétaire sur le toggle
   « Horodatage » du Créateur d'embed, mais présent partout où .dash-page
   habille un .toggle — admin.html, dashboard.html, manage.html).
   dashboard.css est la version entretenue (commentaires de correction du
   27/08 sur le centrage) ; celle-ci était un résidu jamais nettoyé d'une
   V2 antérieure du dashboard. */

/* ---------- Pastilles multi-sélection ---------- */
.dash-page .xchip {
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 999px;
  font-size: 0.8rem;
  padding: 4px 11px;
  color: var(--text-2);
  transition: all var(--transition);
}
.dash-page .xchip:hover { border-color: var(--border-strong); color: var(--text); }
.dash-page .xchip.on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.dash-page .chip-multi { gap: 6px; }

/* ---------- Badges & compteurs ---------- */
.dash-page .count-badge {
  font-size: 0.68rem;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 7px;
  letter-spacing: 0.01em;
}

/* ---------- Listes / rangées (serveurs, membres, articles…) ---------- */
.dash-page .mb-row {
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  padding: 12px 4px;
  transition: background var(--transition);
}
.dash-page .mb-row:last-child { border-bottom: 0; }
.dash-page .mb-row:hover { background: var(--surface-2); border-radius: var(--radius-sm); }
.dash-page .mb-tag { font-weight: 550; font-size: 0.9rem; }
.dash-page .mb-row-sub { font-size: 0.78rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.dash-page .mb-avatar { border-radius: 9px; }

/* ---------- Vue d'ensemble : cartes de stats ---------- */
.dash-page .overview-grid { gap: 12px; }
.dash-page .ov-card h3,
.dash-page .ov-card .ov-num,
.dash-page .sh-stat b,
.dash-page .ab-pill b {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.dash-page .ov-icon {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius-sm);
}

/* ---------- Onglets (tickets…) ---------- */
.dash-page .tk-tabs {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 0;
  gap: 2px;
}
.dash-page .tk-tab {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  font-size: 0.86rem;
  color: var(--text-2);
  padding: 9px 13px;
  margin-bottom: -1px;
  transition: color var(--transition), border-color var(--transition);
}
.dash-page .tk-tab:hover { color: var(--text); background: transparent; }
.dash-page .tk-tab.is-active {
  color: var(--text);
  border-bottom-color: var(--accent);
  background: transparent;
  font-weight: 550;
  /* Cette règle (chargée après dashboard.css, spécificité supérieure)
     neutralise déjà le fond bleu de l'ancien style « onglet plein » — mais
     ne redéfinissait jamais box-shadow, qui restait donc celui de
     dashboard.css (un halo diffus, capture d'écran du 12/09/2026) même après
     la 1re correction de sa valeur : le VRAI style actif ici est le
     soulignement plat, l'ombre n'a jamais eu de raison d'exister sur ce
     style. Trouvé lors de l'audit dashboard du 12/09/2026 en vérifiant pour
     de vrai (jsdom) quelle déclaration gagnait réellement — pas en relisant
     juste le CSS. */
  box-shadow: none;
}

/* ---------- Cartes « Mes serveurs » ---------- */
.dash-page .guild-grid { gap: 14px; }
.dash-page .guild-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
  transition: border-color var(--transition), transform var(--transition);
}
.dash-page .guild-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.dash-page .guild-name { font-family: var(--font-display); font-weight: 550; letter-spacing: -0.01em; }
.dash-page .guild-card .btn { width: 100%; }

/* ---------- Toast ---------- */
.dash-page .toast {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.55);
  font-size: 0.875rem;
}

/* ---------- Journal / erreurs ---------- */
.dash-page .errlog-item,
.dash-page .audit-item { border-color: var(--border); }
.dash-page .errlog-msg { font-size: 0.78rem; }
.dash-page .audit-ic { border-radius: var(--radius-sm); background: var(--surface-2); }
.dash-page .audit-time { font-variant-numeric: tabular-nums; }

/* ---------- Squelettes de chargement ---------- */
.dash-page .skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  border-radius: var(--radius);
}

/* ---------- Entrée des sections : cascade discrète ---------- */
.dash-page .section { animation: v2SectionIn 0.32s cubic-bezier(0.23, 1, 0.32, 1); }
.dash-page .section .panel { animation: v2PanelIn 0.4s cubic-bezier(0.23, 1, 0.32, 1) backwards; }
.dash-page .section .panel:nth-child(2) { animation-delay: 40ms; }
.dash-page .section .panel:nth-child(3) { animation-delay: 80ms; }
.dash-page .section .panel:nth-child(4) { animation-delay: 120ms; }
@keyframes v2SectionIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes v2PanelIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dash-page .section,
  .dash-page .section .panel { animation: none; }
}

/* ---------- Barres de défilement ---------- */
.dash-page ::-webkit-scrollbar { width: 10px; height: 10px; }
.dash-page ::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 99px;
  border: 3px solid var(--bg);
}
.dash-page ::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   MOBILE — pensé comme un vrai usage, pas un rétrécissement
   ============================================================ */
@media (max-width: 980px) {
  .dash-page .manage,
  .dash-page .dash { padding-top: 70px; }

  /* Menu latéral sur mobile (refonte du 25/09, référence Nexora) : GLISSE
     depuis la GAUCHE au clic sur un bouton « trois barres », plutôt que de
     remonter du bas en feuille modale (rejeté explicitement par le
     propriétaire — « ce truc dégueulasse »). Cachée par défaut, une seule
     colonne de contenu tant qu'elle est fermée. */
  .dash-page .manage-layout { grid-template-columns: 1fr; gap: 0; }

  .dash-page .side-guild { display: none; }
  .dash-page .side-refresh { display: none; }
  .dash-page .srv-switch { display: none; }

  /* Bouton « trois barres » : même rôle que .side-mobile-toggle d'origine
     (déjà câblé en JS — aria-expanded, ouverture/fermeture de .side via
     .nav-open — rien à toucher côté script), redessiné en icône compacte
     plutôt qu'en sélecteur affichant la section courante. Le libellé de
     section reste dans le DOM (accessibilité), juste masqué visuellement. */
  .dash-page .side {
    position: static;
    background: transparent; border: 0; padding: 0; margin-bottom: 14px;
  }
  .dash-page .side-mobile-toggle {
    display: flex;
    width: 42px; height: 42px;
    align-items: center; justify-content: center;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius-sm);
    padding: 0;
  }
  .dash-page .side-mobile-toggle .smt-label > i:first-child { color: var(--text); font-size: 1rem; }
  .dash-page .side-mobile-toggle #side-mobile-label,
  .dash-page .side-mobile-toggle .smt-caret { display: none; }

  /* Le voile assombrit le contenu pendant que le menu est ouvert — comme un
     vrai menu latéral, pas une feuille de formulaire. */
  .dash-page .side-voile { background: rgb(0 0 0 / 0.55); }

  /* Le panneau lui-même : ancré à GAUCHE, hors écran par défaut, glisse au
     lieu de remonter. dashboard.css pose la géométrie du tiroir « feuille du
     bas » (position: fixed, left/right/bottom, border-radius du haut) ; ici
     on la remplace entièrement plutôt que de la retoucher partiellement —
     deux dessins du même menu qui ne s'accordent qu'à moitié ont déjà causé
     un bug réel sur ce fichier (cf. commentaire plus haut, section 2 des
     tests). */
  .dash-page .side-collapse {
    display: block;
    position: fixed; top: 0; bottom: 0; left: 0; right: auto;
    width: min(300px, 84vw);
    max-height: none; height: 100dvh; overflow-y: auto;
    margin: 0;
    padding: 0 14px calc(14px + env(safe-area-inset-bottom, 0));
    border-radius: 0; border-top: 0; border-right: 1px solid var(--border);
    transform: translateX(-100%);
    transition: transform 0.25s var(--ease-out, ease);
    animation: none;
  }
  .dash-page .side.nav-open .side-collapse,
  .dash-page .side-collapse.open { transform: translateX(0); }
  /* Le menu doit passer AU-DESSUS de la barre de navigation (z-index 100) :
     .side-collapse est un enfant de .side, c'est donc .side qu'on élève,
     et seulement pendant l'ouverture. */
  .dash-page .side.nav-open { z-index: 120; }
  .dash-page .side-collapse-tete {
    background: var(--surface); border-bottom-color: var(--border);
  }

  /* Items pleine largeur, avec leur libellé — c'est un vrai menu ouvert, pas
     une bande d'icônes : rien à masquer ici. */
  .dash-page .side-collapse .side-item { height: 44px; font-size: 0.92rem; padding: 0 12px; }

  /* Un seul bouton « trois barres » sur mobile (demande du 25/09/2026) : le
     menu du haut (#nav-toggle/#nav-menu — thème, liens, déconnexion) faisait
     doublon visuel avec celui de la sidebar (#side-mobile-toggle), empilés
     l'un sous l'autre. Le bouton du haut disparaît ; son contenu est repris
     dans .side-collapse-bas, pied du même menu qui glisse déjà depuis la
     gauche — un seul bouton, un seul panneau. */
  .dash-page .nav-toggle,
  .dash-page .nav-menu { display: none !important; }
  .dash-page .side-collapse-bas {
    display: flex; flex-direction: column; gap: 1px;
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
  }
  .dash-page .side-collapse-bas .side-item-danger { color: #e0556a; }
  .dash-page .side-collapse-bas .side-item-danger i { color: #e0556a; }

  /* Contenu : panneaux pleine largeur, respiration réduite mais réelle */
  .dash-page .manage-content { max-width: none; }
  .dash-page .panel { padding: 16px; border-radius: var(--radius); }
  .dash-page .section-head h1 { font-size: 1.25rem; }

  /* Boutons d'action confortables au pouce */
  .dash-page .btn { height: 42px; }
  .dash-page .btn-sm { height: 34px; }
  .dash-page .panel-actions { flex-direction: column; align-items: stretch; }
  .dash-page .panel-actions .btn { width: 100%; justify-content: center; }
  /* Taille mobile du toggle retirée avec le bloc de base (voir note plus
     haut) : dashboard.css gère déjà sa propre variante mobile pour
     .toggle .track (variables --sw-w/--sw-s), pas de doublon à recréer. */
  .dash-page .input,
  .dash-page select.input,
  .dash-page textarea.input { min-height: 42px; font-size: 16px; } /* 16px = pas de zoom iOS */

  /* Onglets tickets : défilement horizontal net */
  .dash-page .tk-tabs { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
  .dash-page .tk-tabs::-webkit-scrollbar { display: none; }
  .dash-page .tk-tab { white-space: nowrap; padding: 11px 13px; }

  /* Cartes serveurs : 2 colonnes lisibles */
  .dash-page .guild-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .dash-page .overview-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* Halo d'ambiance réduit */
  .dash-page::before { height: 220px; opacity: 0.4; }

  /* Menu burger (thème / langue / déconnexion) : le style v1 (fond translucide
     + flou) reste correct pour le site public, mais sur le thème sombre épuré
     du dashboard, la teinte d'origine (tokens v1) tranchait avec le reste de
     la page et le flou laissait deviner le contenu qui défile derrière — un
     mélange qui donnait une impression de menu mal posé plutôt que d'un menu
     ouvert proprement. Fond opaque et cohérent avec les tokens .dash-page,
     comme la sidebar mobile juste au-dessus (même doctrine, même raison :
     lisibilité avant tout sur un petit écran). */
  .dash-page .nav-menu {
    background: var(--bg-2);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: var(--border-strong);
  }
}

@media (max-width: 420px) {
  .dash-page .guild-grid { grid-template-columns: 1fr 1fr; }
  .dash-page .panel { padding: 14px; }
}

/* ===========================================================================
   Cibles tactiles
   ===========================================================================
   La règle est 44 px, chez Apple comme chez Google : c'est la largeur moyenne
   d'un doigt posé. En dessous, on rate — et on rate d'autant plus que les
   boutons se touchent, ce qui est le cas partout ici.

   Le critère est « pointer: coarse », pas une largeur d'écran : c'est le mode
   de saisie qui décide, pas la taille. Une tablette au doigt a exactement le
   même besoin qu'un téléphone, et une petite fenêtre sur un ordinateur n'en a
   aucun. Régler ça au « max-width » aurait grossi les boutons de qui rétrécit
   sa fenêtre et laissé les tablettes de côté. */
@media (pointer: coarse) {
  .dash-page .btn,
  .dash-page .btn-sm { min-height: 44px; }
  .dash-page .side-item { min-height: 44px; }
  .dash-page .srv-switch-btn,
  .dash-page .side-refresh { min-height: 44px; }
  /* La taille tactile du toggle vit dans dashboard.css (--sw-w/--sw-s sous
     sa propre media query) — retiré d'ici avec le reste du bloc, voir la
     note plus haut. */
  /* Les champs : sous 44 px, iOS zoome à la mise au point et déforme la page. */
  .dash-page .input,
  .dash-page select.input { min-height: 44px; font-size: max(1rem, 0.9rem); }
}