/* ddj-access console — styles applicatifs, bâtis PAR-DESSUS les design tokens DDJ.
   Les tokens (:root) vivent désormais dans le fichier VENDORÉ ./tokens.css (copie verbatim
   de ddj-design/tokens.css, source canonique — cf. ddj-design/ADOPTION.md). Ce fichier
   ne RETAPE aucune valeur : il consomme var(--color-*, --space-*, --font-*, ...).
   tokens.css est lié AVANT style.css dans le shell (render_shell). Vanilla, 0 CDN.

   Polices : auto-hébergées en local dans ./fonts/ (TTF), @font-face locaux ci-dessous.
   Fallback serif/sans système pour que rien ne casse si une police ne charge pas. */

/* ---------- Brand fonts — self-hosted (extraits du kit, servis par /static/fonts/) ---------- */
@font-face {
  font-family: 'DM Sans';
  src: url("/static/fonts/DMSans-Regular.ttf") format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url("/static/fonts/DMSans-Medium.ttf") format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url("/static/fonts/DMSans-Bold.ttf") format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url("/static/fonts/Fraunces-Regular.ttf") format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url("/static/fonts/Fraunces-SemiBold.ttf") format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ====================================================================
   Tokens (:root) = ./tokens.css VENDORÉ (lié avant ce fichier). Aucune
   valeur n'est redéclarée ici — tout passe par var(--…). Fork supprimé
   (BO-D2c pas 2a : l'ancien :root inline partiel divergeait du canonique).
   ==================================================================== */

/* ====================================================================
   Base — d'après les styles sémantiques du kit.
   ==================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
code { font-family: var(--font-mono); font-size: 0.9em; }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- Header / marque ---------- */
header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-5) var(--space-7);
}
.headleft { display: flex; align-items: center; gap: var(--space-3); }
.railtoggle {
  background: var(--color-surface); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-btn); padding: var(--space-1) var(--space-3);
  font-size: var(--fs-h4); line-height: 1; color: var(--color-fg-muted); cursor: pointer;
}
.railtoggle:hover { background: var(--color-bg-deep); color: var(--color-fg); }
.brand { display: flex; flex-direction: row; align-items: center; gap: var(--space-3); }
/* width:auto + flex-none : garde le ratio du logo, pas d'étirement dans le flex */
.logo { height: 40px; width: auto; flex: none; display: block; }
header h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  color: var(--color-fg);
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
}
.badge[hidden] { display: none; }   /* sinon .badge{display:inline-block} écrase l'attribut hidden (déconnexion / non-admin) */
.badge {
  font-family: var(--font-sans);
  display: inline-block;
  background: var(--color-primary-tint);
  border: 1px solid var(--ddj-bordeaux-90);
  color: var(--color-primary-press);
  border-radius: var(--radius-pill);
  padding: 2px 11px;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

main { max-width: 1320px; margin: var(--space-6) auto; padding: 0 var(--space-7) var(--space-8); }
/* app ouverte dans le cadre → pleine largeur (la console, elle, reste centrée à 1320px) */
body.app-open main { max-width: none; margin-top: var(--space-4); padding: 0 var(--space-4) var(--space-4); }

/* ---------- Barre utilisateur ---------- */
.userbar {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3);
  font-size: var(--fs-meta); color: var(--color-fg-muted);
}
.userbar .who strong { color: var(--color-fg); font-weight: 600; }
.linkbtn {
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  color: var(--color-fg);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  font-family: var(--font-sans);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard);
}
.linkbtn:hover { background: var(--color-bg-deep); }
/* lien texte simple (mot de passe oublié / annuler) — sobre, sur la marque, sans cadre */
.linkplain { color: var(--color-primary); text-decoration: underline; cursor: pointer; font-size: var(--fs-small); }
.linkplain:hover { opacity: .8; }

/* ---------- Volet gauche : lanceur d'apps (réordonnable au glisser-déposer) ---------- */
.withrail { display: flex; gap: var(--space-5); align-items: flex-start; }
.railmain { flex: 1; min-width: 0; }
.rail { width: 200px; flex: none; position: sticky; top: var(--space-4); transition: width .18s cubic-bezier(.2,0,0,1); }
.rail-label {
  font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--color-fg-subtle);
  margin: 0 0 var(--space-2) var(--space-1);
}
.brandlink { display: inline-flex; text-decoration: none; }
a.railitem { text-decoration: none; color: inherit; }
.railitem {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2);
  border: 1px solid var(--color-border); border-radius: var(--radius-btn);
  background: var(--color-surface); cursor: grab;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.railitem:hover { border-color: var(--color-border-strong); }
.railitem .grip { color: var(--color-fg-subtle); font-size: var(--fs-small); cursor: grab; line-height: 1; }
.raillabel { font-size: var(--fs-meta); font-weight: 500; color: var(--color-primary); flex: 1; }
.railitem.active { background: var(--color-primary-tint); border-color: var(--ddj-bordeaux-90); }
.railitem.active .raillabel { color: var(--color-primary-press); font-weight: 600; }
.railitem.disabled { opacity: 0.75; cursor: default; }
.railitem.disabled .raillabel { color: var(--color-fg-subtle); }
.railitem.dragging { opacity: 0.4; }
/* Sous-menu (1 lien gauche → plusieurs cockpits, ex. pipeline → CAR | Pivots). Pas un 2e railitem. */
.subrail { display: none; flex-direction: column; margin: 2px 0 6px 18px; gap: 2px; }  /* replié par défaut */
.subrail.open { display: flex; }  /* déplié au clic (accordéon) */
a.subitem { text-decoration: none; color: var(--color-fg-subtle); font-size: var(--fs-small); 
  padding: 4px 8px; border-radius: 6px; border-left: 2px solid var(--color-border); }
a.subitem:hover { color: var(--color-primary); border-left-color: var(--color-primary); }
a.subitem.active { color: var(--color-primary-press); border-left-color: var(--ddj-bordeaux-90); font-weight: 600; }
.railitem.has-submenu { cursor: pointer; }
/* Couleur du porteur (« Cockpit / Pipeline ») : allumé (look .railitem.active) quand LUI-MÊME est actif
   (sa vue d'accueil est ouverte → .active posée par openApp, couvert par .railitem.active) OU quand une de
   ses sous-entrées est active. Ce :has couvre le 2e cas : porteur suivi d'un .subrail contenant une
   sous-entrée active (porteur et subrail sont frères dans le DOM). */
.railitem.has-submenu:has(+ .subrail .subitem.active) {
  background: var(--color-primary-tint); border-color: var(--ddj-bordeaux-90);
}
.railitem.has-submenu:has(+ .subrail .subitem.active) .raillabel {
  color: var(--color-primary-press); font-weight: 600;
}
.has-submenu .chevron { margin-left: auto; font-size: 10px; color: var(--color-fg-subtle); transition: transform .15s; }
.has-submenu .chevron::before { content: "\25B8"; }            /* ▸ replié */
.has-submenu.open .chevron::before { content: "\25BE"; }       /* ▾ déplié */
body.rail-collapsed .subrail { display: none; }   /* rail replié : on masque les sous-entrées */

/* Vue interne « accueil pipeline » (zone de droite, PAS une iframe) — montrée au clic sur le porteur. */
.pipehome-h { margin: 0 0 var(--space-1); }
.pipegrid { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
.pipecard {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  min-width: 200px; padding: var(--space-3) var(--space-4); text-align: left; font: inherit;
  border: 1px solid var(--color-border); border-radius: var(--radius-btn);
  background: var(--color-surface); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.pipecard:hover { border-color: var(--ddj-bordeaux-90); box-shadow: var(--shadow-sm); }
.pipecard-t { font-weight: 600; color: var(--color-primary); }
.pipecard-d { font-size: var(--fs-small); color: var(--color-fg-subtle); }
.pipecard.disabled { cursor: default; opacity: 0.6; }                    /* « bientôt » (Coffres) → non cliquable */
.pipecard.disabled:hover { border-color: var(--color-border); box-shadow: none; }

/* ---- volet repliable « façon Cloudflare » : un seul bouton ferme ET rouvre, au même endroit ---- */
/* Bouton de repli en tête du volet (remplace le burger). Ouvert : icône + « Mes apps » à l'horizontale. */
.railbtn {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; cursor: pointer; border: 0;
  background: transparent; color: var(--color-fg-subtle);
  font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  padding: 0 var(--space-1) var(--space-2); margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.railbtn:hover { color: var(--color-primary); }
.rico { flex: none; }
/* La BARRE de l'icône « panneau » glisse selon l'état (la touche Cloudflare). */
.rbar { transition: transform .22s cubic-bezier(.2,0,0,1); }
.rail .rbar { transform: translateX(-3px); }                  /* ouvert : barre à gauche */
body.rail-collapsed .rail .rbar { transform: translateX(3px); }   /* replié : barre à droite */

/* État REPLIÉ : volet → rail étroit (le bouton reste visible) ; items masqués ; label vertical. */
body.rail-collapsed .rail { width: 19px; min-width: 19px; }
body.rail-collapsed .withrail { gap: var(--space-2); }   /* gouttière repliée : réduire l'espace rail↔contenu (état replié seul) */
body.rail-collapsed .rail .railitem { display: none; }

/* apps SANS accès (voie users) : grisées, non cliquables, pas de poignée — clic = « demander un accès » */
.railitem.locked { opacity: 0.55; cursor: default; background: var(--color-bg); }
.railitem.locked .raillabel { color: var(--color-fg-subtle); font-weight: 500; }
.railitem.locked .grip { visibility: hidden; }
.railitem.locked:hover { border-color: var(--color-border); }
body.rail-collapsed .railbtn { flex-direction: column; gap: var(--space-2); border-bottom: 0; margin: 0; padding: var(--space-2) 0; }
body.rail-collapsed .railbtn .rlabel { writing-mode: vertical-rl; text-orientation: mixed; }

/* cadre intégré : une app affichée dans la console (+ repli « ouvrir dans un onglet ») */
.appframewrap { display: flex; flex-direction: column; gap: var(--space-2); }
.appframewrap[hidden] { display: none; }   /* sinon display:flex écrase l'attribut hidden */
.appframebar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.appframename { font-family: var(--font-serif); font-size: var(--fs-h4); font-weight: 600; color: var(--color-fg); }
/* le cadre remplit la hauteur dispo (− en-tête + barre + marges) au lieu d'un 76vh qui laissait du vide */
.appframe { width: 100%; height: calc(100vh - 130px); min-height: 420px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); }

/* ---------- Cartes / bandeaux ---------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.banner {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  color: var(--color-fg-muted);
  border-radius: var(--radius-card);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--fs-meta);
}
.warnbanner {
  background: var(--color-warning-tint);
  border: 1px solid var(--color-warning);
  color: var(--color-warning);
  border-radius: var(--radius-card);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--fs-meta);
}
.meta { color: var(--color-fg-muted); font-size: var(--fs-meta); margin-bottom: var(--space-4); }
.empty { color: var(--color-fg-subtle); font-style: italic; }

/* ---------- Formulaire grant ---------- */
.grant { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin: var(--space-1) 0 var(--space-4); }
.grant input, .grant select, .grant button {
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-btn);
  background: var(--color-surface);
  color: var(--color-fg);
}
.grant input { min-width: 240px; }
.grant input:focus, .grant select:focus, .login input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-tint);
}
button { font-family: var(--font-sans); cursor: pointer; }
.grant button[type="submit"], button.primary {
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  color: var(--color-fg-on-primary);
  font-weight: 600;
  transition: background var(--dur-fast) var(--ease-standard);
}
.grant button[type="submit"]:hover, button.primary:hover { background: var(--color-primary-hover); }
.grant button[type="submit"]:active, button.primary:active { background: var(--color-primary-press); }
button:disabled { opacity: 0.55; cursor: progress; }

/* ---------- Table de données (peut s'élargir — pas d'étranglement à 760px) ---------- */
table {
  border-collapse: collapse; width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
th, td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-meta);
}
th {
  background: var(--color-surface-alt);
  font-weight: 600;
  color: var(--color-fg);
  letter-spacing: var(--tracking-tight);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--color-bg-deep); }
button.rm {
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  color: var(--color-primary);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  transition: background var(--dur-fast) var(--ease-standard);
}
button.rm:hover { background: var(--color-primary-tint); border-color: var(--color-primary); }
.warn { color: var(--color-accent); font-size: var(--fs-small); font-weight: 700; }

/* ---------- Écran de connexion (centré) ---------- */
.login { max-width: 360px; margin: 12vh auto 0; }
.login h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-1);
}
.login p.hint { color: var(--color-fg-muted); font-size: var(--fs-meta); margin-bottom: var(--space-3); }
.login input {
  display: block; width: 100%;
  padding: var(--space-2) var(--space-3); margin: var(--space-2) 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-btn);
  font-size: var(--fs-body);
  font-family: var(--font-sans);
  background: var(--color-surface);
  color: var(--color-fg);
}
.login button { width: 100%; padding: var(--space-2); margin-top: var(--space-1); }
.loginmsg { color: var(--color-accent); min-height: 1.2em; font-size: var(--fs-meta); margin-top: var(--space-2); }

/* ---------- Toast (retours inline non bloquants) ---------- */
.toast {
  position: fixed; left: 50%; bottom: var(--space-6); transform: translateX(-50%) translateY(20px);
  max-width: 90vw; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card); font-size: var(--fs-meta);
  background: var(--color-fg); color: var(--color-fg-on-primary);
  box-shadow: var(--shadow-pop);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.ok  { background: var(--color-success); }
.toast.err { background: var(--color-primary); }

/* ====================================================================
   Vue par-utilisateur — deux panneaux (BO-D2c pas 2b). Tout en var(--…).
   ==================================================================== */
.console-grid {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: var(--space-4);
  align-items: start;
}
/* Toggle fix (BO-D2c): the inactive axis MUST be hidden. `.console-grid{display:grid}`
   (0,1,0) otherwise beats the UA `[hidden]{display:none}` (0,0,1) and both axes paint.
   `.axisview[hidden]` is (0,2,0) → wins, no !important. JS sets `.hidden` to toggle. */
.axisview[hidden] { display: none; }
.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.panelhead {
  display: flex; gap: var(--space-2); align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}
#user-search {
  flex: 1; min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-btn);
  font-family: var(--font-sans); font-size: var(--fs-meta);
  background: var(--color-surface); color: var(--color-fg);
}
#user-search:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-tint);
}
.panelhead .primary { white-space: nowrap; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-btn); font-size: var(--fs-small); }

.userlist { list-style: none; max-height: 70vh; overflow-y: auto; }
.useritem {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}
.useritem:last-child { border-bottom: none; }
.useritem:hover { background: var(--color-bg-deep); }
.useritem.selected { background: var(--color-primary-tint); }
.useritem.selected .uemail { color: var(--color-primary-press); font-weight: 600; }
.useritem .uemail { font-size: var(--fs-meta); word-break: break-all; }
.useritem .empty { cursor: default; }
.countbadge {
  flex: none;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-strong);
  color: var(--color-fg-muted);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-2); min-width: 22px; text-align: center;
  font-size: var(--fs-small); font-variant-numeric: tabular-nums;
}

.editor { padding: var(--space-5) var(--space-6); }
.editor > .empty { color: var(--color-fg-subtle); font-style: italic; }
.editorhead {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-bottom: var(--space-4); padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.editoractions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.invite-user { color: var(--color-primary); }
.invite-user:hover { background: var(--color-primary-tint); border-color: var(--color-primary); }
.editorhead h3 {
  font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 600;
  letter-spacing: var(--tracking-tight); word-break: break-all;
}
.approws { display: flex; flex-direction: column; gap: var(--space-2); }
.approw {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  background: var(--color-bg);
}
.applabel { font-size: var(--fs-meta); font-weight: 500; color: var(--color-fg); }
/* Clé technique (access_control.app) affichée en SOUS-TEXTE discret sous le libellé lisible —
   utile à l'admin (les grants portent sur la clé). Purement cosmétique : la clé n'est pas renommée. */
.appkey { display: block; font-family: var(--font-mono); font-size: var(--fs-small);
  font-weight: 400; color: var(--color-fg-subtle); letter-spacing: 0; }

/* ---------- Rôle en radios (cellule, les deux axes) ---------- */
.roleradios { display: inline-flex; gap: var(--space-1); flex-wrap: wrap; }
.roleradios .radio {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-small); color: var(--color-fg-muted);
  padding: 2px var(--space-2);
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  cursor: pointer; user-select: none;
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.roleradios .radio:hover { background: var(--color-bg-deep); }
.roleradios input[type=radio] { accent-color: var(--color-primary); margin: 0; cursor: pointer; }
/* checked pill: bordeaux outline (the brand signal stays bordeaux, not magenta) */
.roleradios .radio:has(input:checked) {
  border-color: var(--color-primary); background: var(--color-primary-tint); color: var(--color-primary-press);
  font-weight: 600;
}
.roleradios input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }

/* ---------- Barre « Tout » (éditeur par utilisateur) ---------- */
.allbar {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  margin-bottom: var(--space-3); padding-bottom: var(--space-3);
  border-bottom: 1px dashed var(--color-border);
}
.alllabel { font-size: var(--fs-meta); font-weight: 600; color: var(--color-fg-muted); }
.all-role {
  font-family: var(--font-sans); font-size: var(--fs-small);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-fg);
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.all-role:hover { background: var(--color-primary-tint); border-color: var(--color-primary); color: var(--color-primary-press); }
.all-dash { color: var(--color-fg-subtle); }
.all-dash:hover { background: var(--color-bg-deep); border-color: var(--color-border-strong); color: var(--color-fg); }

/* ---------- Sélecteur d'axe (toggle) ---------- */
.axistoggle {
  display: inline-flex; gap: 0; margin-bottom: var(--space-4);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill);
  overflow: hidden; background: var(--color-surface);
}
.axisbtn {
  font-family: var(--font-sans); font-size: var(--fs-meta);
  padding: var(--space-2) var(--space-4);
  border: none; background: transparent; color: var(--color-fg-muted);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.axisbtn.selected { background: var(--color-primary); color: var(--color-fg-on-primary); font-weight: 600; }
.axisbtn:not(.selected):hover { background: var(--color-bg-deep); color: var(--color-fg); }

/* ---------- Mode « par app » ---------- */
.panellabel {
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--color-fg-muted);
}
.applist { list-style: none; }
.appitem {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer; transition: background var(--dur-fast) var(--ease-standard);
}
.appitem:last-child { border-bottom: none; }
.appitem:hover { background: var(--color-bg-deep); }
.appitem.selected { background: var(--color-primary-tint); }
.appitem.selected .aname { color: var(--color-primary-press); font-weight: 600; }
.appitem .aname { font-size: var(--fs-meta); }
.userrows { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.userrow {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-btn);
  background: var(--color-bg);
}
.urole-email { font-size: var(--fs-meta); word-break: break-all; }
.addrow {
  display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap;
  padding-top: var(--space-3); border-top: 1px solid var(--color-border);
}
.add-email {
  flex: 1; min-width: 200px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-btn);
  font-family: var(--font-sans); font-size: var(--fs-meta);
  background: var(--color-surface); color: var(--color-fg);
}
.add-email:focus, .add-role:focus {
  outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-tint);
}
.add-role {
  font-family: var(--font-sans); font-size: var(--fs-meta);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-btn);
  background: var(--color-surface); color: var(--color-fg);
}
.add-to-app { padding: var(--space-2) var(--space-4); border-radius: var(--radius-btn); font-size: var(--fs-small); }

/* ---------- Pied de liste : ajouter un utilisateur (séparé du filtre) ---------- */
.listfooter { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); }
.addbtn {
  width: 100%;
  font-family: var(--font-sans); font-size: var(--fs-meta);
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--color-border-strong); border-radius: var(--radius-btn);
  background: var(--color-surface); color: var(--color-primary);
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.addbtn:hover { background: var(--color-primary-tint); border-color: var(--color-primary); }

/* ---------- Modales maison (sur tokens, 0 dépendance) ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(26, 26, 26, 0.45); padding: var(--space-4);
}
.modal {
  background: var(--color-surface); color: var(--color-fg);
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop);
  width: 100%; max-width: 420px; padding: var(--space-5) var(--space-6);
}
.modal-title {
  font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 600;
  letter-spacing: var(--tracking-tight); margin-bottom: var(--space-3);
}
.modal.danger .modal-title { color: var(--color-primary); }
.modal-msg { font-size: var(--fs-meta); color: var(--color-fg-muted); margin-bottom: var(--space-4); line-height: var(--lh-base); }
.modal-msg strong { color: var(--color-fg); }
.modal-msg .muted { color: var(--color-fg-subtle); }
.modal-input {
  display: block; width: 100%; margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-btn);
  font-family: var(--font-sans); font-size: var(--fs-body);
  background: var(--color-surface); color: var(--color-fg);
}
.modal-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-tint); }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
.modal-actions button { padding: var(--space-2) var(--space-4); border-radius: var(--radius-btn); font-size: var(--fs-meta); }
.danger-btn {
  background: var(--color-primary); border: 1px solid var(--color-primary);
  color: var(--color-fg-on-primary); font-weight: 600;
  transition: background var(--dur-fast) var(--ease-standard);
}
.danger-btn:hover { background: var(--color-primary-hover); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .console-grid { grid-template-columns: 1fr; }
  .userlist, .applist { max-height: 38vh; overflow-y: auto; }
}
@media (max-width: 640px) {
  header { padding-left: var(--space-4); padding-right: var(--space-4); }
  main { padding-left: var(--space-4); padding-right: var(--space-4); }
  header h1 { font-size: var(--fs-h2); }
  .grant { flex-direction: column; align-items: stretch; }
  .grant input { min-width: 0; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}