/* ==========================================================================
   BASE — variables de thème, reset, éléments globaux
   ========================================================================== */
:root, [data-theme="dark"]{
  --void:#000000; --surface:#0a0a0d; --surface2:#0e0e12; --surface3:#151519;
  /* Contours relevés : à .08 les bordures de tableau étaient au seuil du
     visible sur écran peu contrasté. */
  --line:rgba(255,255,255,.14); --line-strong:rgba(255,255,255,.24);
  --ink:#e8ecf4; --mist:#7c88a6; --mist-dim:#525c76;
  --ember:linear-gradient(135deg, #071237, #42648d, #68c5fbd5);
  /* `--ember` est un DÉGRADÉ : parfait comme fond, inutilisable partout où il
     faut une couleur (color, border-color, color-mix). D'où `--accent`, sa
     contrepartie solide — toujours une vraie couleur, dans les deux thèmes. */
  --accent:#68c5fb;
  /*--ember:rgb(219, 8, 8); --ember-ink:#1a1102;*/
  --danger:#e2574c; --success:#43d17c;
  --shadow:0 24px 70px rgba(0,0,0,.5); --backdrop:rgba(3,4,9,.62);
  --scrim:rgba(5,7,13,.55);
}
[data-theme="light"]{
  --void:#f2f4f9; --surface:#ffffff; --surface2:#f8f9fc; --surface3:#eef0f6;
  --line:rgba(10,15,30,.15); --line-strong:rgba(10,15,30,.26);
  --ink:#12141c; --mist:#5b6478; --mist-dim:#8b93a7;
  --ember:#d97e33; --ember-ink:#fff7ec; --accent:#c96f21;
  --danger:#c8392f; --success:#1f9d5c;
  --shadow:0 24px 60px rgba(20,25,40,.14); --backdrop:rgba(20,25,40,.4);
  --scrim:rgba(230,232,240,.6);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:pan-x pan-y;}
body{
  background:var(--void); color:var(--ink);
  font-family:'Inter',-apple-system,'Segoe UI',sans-serif;
  -webkit-tap-highlight-color:transparent;
  transition:background .4s ease,color .4s ease;
}
.font-display{font-family:'Space Grotesk','Inter',sans-serif;}
.font-mono{font-family:'IBM Plex Mono','Consolas',monospace;}
button,input,select,textarea{font-family:inherit;color:inherit;}
button{cursor:pointer;}
::selection{background:var(--ember);color:var(--ember-ink);}
:focus-visible{outline:2px solid var(--ember);outline-offset:2px;border-radius:4px;}
a{color:inherit;}

@media (prefers-reduced-motion:reduce){
  #panel, #modal, .tree-children-outer, .icon-btn, .btn{transition:none !important;}
}

/* ---------- TOOLTIPS ---------- */
[data-tooltip]{position:relative;}
[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;left:50%;top:calc(100% + 9px);transform:translate(-50%,-4px);
  background:var(--surface3);color:var(--ink);border:1px solid var(--line-strong);
  font-size:11.5px;font-weight:600;white-space:nowrap;padding:5px 9px;border-radius:7px;
  box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transition:opacity .12s ease,transform .12s ease;
  transition-delay:.15s;
  z-index:80;
}
[data-tooltip]:hover::after,[data-tooltip]:focus-visible::after{
  opacity:1;transform:translate(-50%,0);
}
@media (prefers-reduced-motion:reduce){
  [data-tooltip]::after{transition:none;}
}

/* --------------------------------------------------- Bandeau rôle test
   Barre fixe en haut, impossible à manquer : on ne reste jamais coincé dans
   un rôle inférieur sans le voir. */
#bandeau-role-test{
  position:fixed;top:0;left:0;right:0;z-index:2000;
  background:linear-gradient(90deg,#845316,#c8862f);
  color:#fff;box-shadow:0 2px 12px rgba(0,0,0,.35);
}
.brt-inner{
  max-width:1400px;margin:0 auto;padding:8px 18px;
  display:flex;align-items:center;gap:12px;font-size:13.5px;
}
.brt-ico{display:flex}.brt-ico svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2}
.brt-txt{flex:1}
.brt-retour{
  background:#fff;color:#7a4a12;border:0;border-radius:8px;
  padding:6px 14px;font-weight:600;font-size:13px;cursor:pointer;white-space:nowrap;
}
.brt-retour:hover{background:#fff5e8}
/* Le bandeau pousse la page vers le bas plutôt que de la recouvrir. */
body.a-role-test{padding-top:40px}
body.a-role-test #topbar{top:40px}

/* Sélecteur de rôle test dans la fenêtre « Modifier l'utilisateur ». */
.role-test-choix{display:flex;gap:8px;flex-wrap:wrap}
.role-test-btn{
  flex:1;min-width:100px;padding:10px;border-radius:10px;cursor:pointer;
  background:var(--surface2);border:1px solid var(--line);color:var(--ink);
  font-size:13.5px;font-weight:500;transition:background .12s,border-color .12s;
}
.role-test-btn:hover{background:var(--surface3);border-color:var(--line-strong)}
.role-test-btn.actif{border-color:var(--accent);color:var(--accent)}