/* ============================================================================
   nexus-ui.css — Design system Nexus (aligné sur Consent Overview / CloseLoop).
   Restyle les CLASSES MAISON, scopé sous « .gx » (nav-shell jamais affecté).
   N'invente AUCUN token : réutilise ceux de nexus.css (--green, --border,
   --radius-lg, --shadow, --font-title, --blue, --amber, --text-muted, …).
   Convertir une page = ajouter class="gx" + charger ce fichier.  MàJ 2026-08-12.
   ============================================================================ */

.gx { font-family:var(--font-body); color:var(--text); -webkit-font-smoothing:antialiased; }
.gx, .gx *, .gx *::before, .gx *::after { box-sizing:border-box; }

/* ── En-tête de page uniforme injecté par le shell (nav-shell.js) — NON scopé .gx,
      car injecté hors du markup des pages. Calqué sur Consent/CloseLoop. ────────── */
.nx-pagehead { padding:2px 2px 10px; }
.nx-pretitle { font-family:var(--font-body); font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--text-muted); font-weight:700; }
.nx-title { font-family:var(--font-title); font-size:17px; font-weight:700; color:var(--text); line-height:1.3; margin:2px 0 0; }

/* Icône d'en-tête (ajoutée par le nav-shell depuis la config du menu) — verte, alignée,
   uniforme sur TOUS les types de titre (nx-title, page-title, ov-title, cl h2 ; cs a la sienne). */
.nx-title, .gx .page-title, .gx .ov-title, .gx .cl-pagehead-title h2 { display:flex; align-items:center; gap:9px; }
.nx-title > i.ti, .gx .page-title > i.ti, .gx .ov-title > i.ti, .gx .cl-pagehead-title h2 > i.ti { color:var(--green); font-size:18px; flex-shrink:0; }
/* ============================================================================
   CANVAS COMMUN (2026-08-13) — rendu par le shell (nav-shell.js), identique sur
   TOUTES les pages. La page ne fournit que son contenu ; le shell ajoute l'en-tête
   (icône + pré-titre + titre + slot actions) et le container. Une page opte in via
   `#app-screen[data-nx-canvas]`. Voir _renderCanvas dans nav-shell.js.
     data-nx-canvas          → flux normal (le body défile via le navigateur)
     data-nx-canvas="explorer" → cadre fixe (filtres + résultats à scroll interne)
   ============================================================================ */
.gx #app-screen[data-nx-canvas] { display:flex; flex-direction:column; }

/* En-tête commun */
/* Sélecteur incluant #app-screen[data-nx-canvas] : le padding doit primer sur un reset
   agressif de page du type `#app-screen * { padding:0 }` (spécificité à 1 id), sinon le
   contenu du canvas se colle au sidebar. */
.gx #app-screen[data-nx-canvas] .nx-canvas-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:18px 26px 12px; }
/* ELEMENT#1 exactement comme la page Template : pré-titre + titre empilés, SANS icône. */
.gx .nx-canvas-head .nx-ch-main { min-width:0; }
.gx .nx-canvas-head .nx-ch-pretitle { font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--text-muted); font-weight:700; }
.gx .nx-canvas-head .nx-ch-title { font-family:var(--font-title); font-size:17px; font-weight:700; color:var(--text); line-height:1.3; margin-top:2px; }
.gx .nx-canvas-head .nx-ch-meta { font-size:11px; font-weight:600; color:var(--text-muted); margin-left:8px; }
.gx .nx-canvas-head .nx-ch-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.gx .nx-canvas-head .nx-ch-actions:empty { display:none; }

/* Container de contenu (padding standard, défilement navigateur). Sélecteur avec
   #app-screen[data-nx-canvas] pour primer sur les resets de page `#app-screen *`. */
.gx #app-screen[data-nx-canvas] .nx-canvas-body { padding:14px 26px 40px; }

/* Variante explorateur : cadre fixe, le contenu remplit sous l'en-tête (scroll interne assumé) */
/* Cadre fixe = hauteur du viewport MOINS la top-bar du shell (.adsnav-topbar = 56px),
   sinon la page dépasse de 56px et une 2e scrollbar (page) apparaît. */
.gx #app-screen[data-nx-canvas="explorer"] { height:calc(100vh - 56px); overflow:hidden; }
.gx #app-screen[data-nx-canvas="explorer"] .nx-canvas-body { flex:1; min-height:0; overflow:hidden; padding:14px 26px 16px; display:flex; flex-direction:column; }

/* En-tête injecté dans un shell à onglets : aligner le padding sur celui des pages normales (.main). */
.gx .tabmgr-shell > .nx-pagehead { padding:18px 26px 12px; }
.gx .tabmgr-shell > .cltabs { margin:2px 26px 0; }
.gx .tabmgr-shell > #tabmgr-panel { padding:14px 0 0; }
/* Contenu monté dans un tab-shell (sous-page) : forcer le rail 26px pour aligner avec les onglets,
   quel que soit le wrapper de la sous-page (.shell=32, .main-wrap=18, etc.). 2026-08-24. */
#tabmgr-panel .shell, #tabmgr-panel .main-wrap, #tabmgr-panel .main, #tabmgr-panel .nx-canvas-body {
  padding-left: 26px !important; padding-right: 26px !important; }

/* ── En-tête de page (cf. .cs-pagehead : pré-titre + titre simple + meta) ─── */
.gx .page-header { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:2px 2px 4px; }
.gx .page-pretitle { font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--text-muted); font-weight:700; }
.gx .page-title { font-family:var(--font-title); font-size:17px; font-weight:700; color:var(--text); line-height:1.3; margin:2px 0 0; }
.gx .page-title span { color:inherit; font-weight:inherit; }
.gx .page-title .page-meta { font-size:11px; font-weight:600; color:var(--text-muted); margin-left:9px; white-space:nowrap; }
.gx .page-subtitle { font-size:11px; color:var(--text-muted); font-weight:600; margin-top:3px; }
.gx .page-actions { display:flex; gap:8px; align-items:center; }

/* EN-TÊTE UNIFORME (2026-08-12) — pré-titre (groupe) + titre (page) affichés sur TOUTES
   les pages, calqués sur la page Template (System → Template). Les pages sans en-tête
   propre reçoivent un .nx-pagehead injecté par le nav-shell ; celles à .page-header
   affichent le leur. Pré-titre/titre stylés plus haut (.gx .page-* / .nx-*). */
.gx .nx-pagehead, .nx-pagehead { display:block; }

/* ── Cartes / sections (cf. .cscard) ─────────────────────────────────────── */
.gx .card, .gx .section { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden; }
.gx .card-header, .gx .cscard-h { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; border-bottom:1px solid var(--border); background:var(--bg-soft,#f8fafc); }
.gx .card-title { font-family:var(--font-body); font-size:12.5px; font-weight:600; color:var(--text); display:flex; align-items:center; gap:8px; }
.gx .card-title i { color:var(--text); font-size:15px; }
.gx .card-subtitle { font-size:11px; color:var(--text-muted); font-weight:600; margin-top:2px; }
.gx .section-toolbar { display:flex; gap:12px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--border); background:var(--bg-soft,#f8fafc); }

/* ── KPI strip (cf. .cs-strip) ───────────────────────────────────────────── */
.gx .kpi-strip { display:flex; flex-wrap:wrap; }
.gx .kpi-strip .cell { flex:1 1 150px; padding:14px 22px; border-right:1px solid var(--border); }
.gx .kpi-strip .cell:last-child { border-right:none; }
.gx .kpi-strip .kl { display:flex; align-items:center; gap:6px; font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); font-weight:600; }
.gx .kpi-strip .kv { margin-top:6px; font-family:var(--font-title); font-size:26px; font-weight:800; letter-spacing:-.7px; font-variant-numeric:tabular-nums; color:var(--text); }
.gx .kpi-strip .kv .u { font-size:13px; font-weight:600; color:var(--text-muted); margin-left:4px; }

/* ── Recherche / champ inline ────────────────────────────────────────────── */
.gx .search-wrap { position:relative; flex:1; max-width:400px; }
.gx .search-wrap i { position:absolute; top:50%; left:11px; transform:translateY(-50%); color:var(--text-muted); font-size:15px; }
.gx .search-wrap input, .gx input[type=search] {
  width:100%; height:36px; padding:0 12px 0 32px; font:inherit; font-size:13px; color:var(--text);
  background:var(--white); border:1px solid var(--border-strong); border-radius:var(--radius);
  outline:none; transition:border-color .15s, box-shadow .15s;
}
.gx .search-wrap input:focus, .gx input[type=search]:focus { border-color:var(--green); box-shadow:0 0 0 3px var(--green-lighter); }

/* ── Tables maison (.users-table / .results-table) — en-têtes SANS fond ──── */
.gx .users-table, .gx .results-table, .gx table.data-table { width:100%; border-collapse:collapse; font-size:13px; }
.gx .users-table th, .gx .results-table th {
  text-align:left; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.4px;
  color:var(--text-muted); background:transparent; border-bottom:1px solid var(--border-strong);
  padding:10px 14px; white-space:nowrap;
}
.gx .users-table td, .gx .results-table td { padding:11px 14px; border-bottom:1px solid var(--border); color:var(--text-secondary,#626d7d); vertical-align:middle; }
.gx .users-table tbody tr:hover, .gx .results-table tbody tr:hover { background:var(--bg-soft,#f8fafc); }
.gx .users-table tbody tr:last-child td, .gx .results-table tbody tr:last-child td { border-bottom:none; }
.gx .col-username { color:var(--text); font-weight:600; }
.gx tr.inactive .col-username { color:var(--text-muted); }

/* ── Pills d'accès (maison : .access-pill) — tokens Nexus ─────────────────── */
.gx .access-cell { display:flex; flex-wrap:wrap; gap:4px; }
.gx .access-pill { display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:600; line-height:1.7; }
.gx .access-pill i { font-size:12px; }
.gx .access-pill.admin  { background:#ede9fe; color:#6d28d9; }
.gx .access-pill.editor { background:var(--green-light); color:var(--green-dark); }
.gx .access-pill.viewer { background:var(--blue-lt); color:#1d4ed8; }
.gx .access-pill.custom { background:var(--info-light); color:#075985; }
.gx .access-pill.mixed  { background:var(--warn-light); color:var(--warn); }
.gx .access-pill.none   { background:var(--bg-soft,#f8fafc); color:var(--text-muted); }

/* ── Statut (maison : .status-badge) ─────────────────────────────────────── */
.gx .status-badge { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; }
.gx .status-badge .dot { width:8px; height:8px; border-radius:50%; }
.gx .status-badge.active { color:var(--green-dark); } .gx .status-badge.active .dot { background:var(--green); }
.gx .status-badge.inactive { color:var(--text-muted); } .gx .status-badge.inactive .dot { background:#cbd5e1; }

/* ── Boutons maison (.btn + variantes) — scopés, n'affectent pas le shell ── */
.gx .btn { display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; padding:7px 13px; border:1px solid var(--border-strong); border-radius:var(--radius); background:var(--white); color:var(--text); transition:background .12s,border-color .12s,color .12s,box-shadow .12s; white-space:nowrap; }
.gx .btn:hover { background:var(--bg-soft,#f8fafc); }
.gx .btn i { font-size:15px; }
.gx .btn-sm { padding:5px 9px; font-size:12px; }
.gx .btn-primary { background:var(--green); color:#fff; border-color:var(--green-dark); }
.gx .btn-primary:hover { background:var(--green-dark); }
.gx .btn-ghost { background:transparent; border-color:transparent; color:var(--text-muted); }
.gx .btn-ghost:hover { background:var(--bg-soft,#f8fafc); color:var(--text); }
.gx .btn-danger { background:var(--danger); color:#fff; border-color:#b91c1c; }
.gx .btn-danger:hover { filter:brightness(.96); }

/* ── Segmented control maison (.role-seg) ────────────────────────────────── */
.gx .role-seg { display:inline-flex; gap:2px; padding:3px; background:var(--bg-soft,#f8fafc); border:1px solid var(--border-strong); border-radius:var(--radius); }
.gx .role-seg button { display:inline-flex; align-items:center; gap:6px; padding:7px 15px; font:inherit; font-size:12.5px; font-weight:600; color:var(--text-muted); background:transparent; border:none; border-radius:var(--radius-sm); cursor:pointer; transition:background .12s,color .12s; }
.gx .role-seg button:hover { color:var(--text); }
.gx .role-seg button.active { background:var(--green); color:#fff; }
.gx .role-seg button:disabled { opacity:.55; cursor:not-allowed; }
.gx .role-seg button i { font-size:14px; }

/* ── Modales maison (.modal-overlay / .modal) ────────────────────────────── */
.gx.modal-overlay, .gx .modal-overlay { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(30,38,51,.45); }
.gx.modal-overlay.open, .gx .modal-overlay.open { display:flex; }
.gx .modal { width:100%; background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden; }
.gx .modal.modal-lg { max-width:560px; } .gx .modal.modal-sm { max-width:420px; }
.gx .modal-header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border); }
.gx .modal-header h3 { font-family:var(--font-title); font-size:15px; font-weight:700; color:var(--text); }
.gx .modal-body { padding:18px; max-height:72vh; overflow-y:auto; display:flex; flex-direction:column; gap:14px; }
.gx .modal-footer { display:flex; justify-content:flex-end; gap:8px; padding:14px 18px; border-top:1px solid var(--border); }

/* ── Champs de formulaire maison (.form-field) ───────────────────────────── */
.gx .form-field { display:flex; flex-direction:column; gap:6px; }
.gx .form-field label { font-size:12px; font-weight:600; color:var(--text); }
.gx .form-field input, .gx .form-field select, .gx .form-field textarea {
  width:100%; height:38px; padding:0 12px; font:inherit; font-size:13px; color:var(--text);
  background:var(--white); border:1px solid var(--border-strong); border-radius:var(--radius);
  outline:none; transition:border-color .15s, box-shadow .15s;
}
.gx .form-field textarea { height:auto; min-height:80px; padding:10px 12px; }
.gx .form-field input:focus, .gx .form-field select:focus, .gx .form-field textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px var(--green-lighter); }
.gx .form-field input:disabled { background:var(--bg-soft,#f8fafc); color:var(--text-muted); }
.gx .form-field .hint, .gx .hint { font-size:11px; color:var(--text-muted); }
.gx .password-wrap { position:relative; } .gx .password-wrap input { padding-right:38px; }
.gx .password-toggle { position:absolute; right:8px; top:50%; transform:translateY(-50%); border:none; background:none; color:var(--text-muted); cursor:pointer; padding:4px; }
.gx .password-toggle:hover { color:var(--text); }

/* ── Overrides matrix / bannières ────────────────────────────────────────── */
.gx details.overrides { border:1px solid var(--border-strong); border-radius:var(--radius); overflow:hidden; }
.gx details.overrides > summary { display:flex; align-items:center; gap:8px; padding:10px 14px; font-size:12px; font-weight:700; color:var(--text); background:var(--bg-soft,#f8fafc); cursor:pointer; list-style:none; }
.gx details.overrides > summary::-webkit-details-marker { display:none; }
.gx details.overrides > summary .chev { margin-left:auto; transition:transform .15s; }
.gx details.overrides[open] > summary .chev { transform:rotate(180deg); }
.gx .matrix-row { display:grid; grid-template-columns:1fr 72px 72px 72px; align-items:center; padding:8px 14px; border-top:1px solid var(--border); }
.gx .matrix-row.matrix-head { background:var(--bg-soft,#f8fafc); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--text-muted); }
.gx .matrix-head-cell { display:flex; flex-direction:column; align-items:center; gap:2px; }
.gx .matrix-app { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text); }
.gx .matrix-app i { color:var(--green); font-size:16px; }
.gx .matrix-note { padding:10px 14px; font-size:11px; color:var(--text-muted); border-top:1px solid var(--border); }
.gx .admin-lock { display:flex; align-items:center; gap:10px; padding:12px 14px; background:#ede9fe; color:#6d28d9; border-radius:var(--radius); font-size:13px; }
.gx .admin-lock[hidden] { display:none; }
.gx .warning-banner { display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--warn-light); color:var(--warn); border-radius:var(--radius); font-size:13px; font-weight:600; }

/* ── Tables matrices (.rmatrix — Roles & Access, audit) ──────────────────── */
.gx .rmatrix { width:100%; border-collapse:collapse; font-size:13px; }
.gx .rmatrix th { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; color:var(--text-muted); background:transparent; border-bottom:1px solid var(--border-strong); padding:10px 12px; text-align:center; }
.gx .rmatrix th.col-page { text-align:left; min-width:240px; }
.gx .rmatrix td { padding:10px 12px; border-bottom:1px solid var(--border); color:var(--text); vertical-align:middle; }
.gx .rmatrix td.cell { text-align:center; }
.gx .rmatrix tbody tr:hover td { background:var(--bg-soft,#f8fafc); }
.gx .rmatrix tbody tr:last-child td { border-bottom:none; }
.gx .rmatrix th .rl { display:inline-flex; align-items:center; gap:6px; }
.gx .rmatrix th .role-del { border:none; background:none; cursor:pointer; color:var(--text-muted); padding:2px 4px; border-radius:var(--radius-sm); }
.gx .rmatrix th .role-del:hover { color:var(--danger); background:var(--danger-light); }
.gx .rmatrix-wrap { overflow-x:auto; }

/* ── Bannières info / dirty-dot ──────────────────────────────────────────── */
.gx .info-banner { display:flex; align-items:flex-start; gap:10px; padding:11px 14px; background:var(--info-light); border:1px solid #7dd3fc; color:#075985; border-radius:var(--radius); font-size:12.5px; line-height:1.5; }
.gx .info-banner i { font-size:16px; flex-shrink:0; margin-top:1px; }
.gx .error-banner { display:flex; align-items:flex-start; gap:10px; padding:11px 14px; background:var(--danger-light,#fef2f2); border:1px solid #fca5a5; color:var(--danger,#dc2626); border-radius:var(--radius); font-size:12.5px; line-height:1.5; font-weight:600; }
.gx .error-banner i { font-size:16px; flex-shrink:0; margin-top:1px; }
/* [hidden] doit primer sur display:flex : une bannière ne s'affiche QUE s'il y a un message. */
.gx .info-banner[hidden], .gx .warning-banner[hidden], .gx .error-banner[hidden] { display:none; }
/* Bouton de fermeture (X) — commun aux 3 bannières, poussé à droite. */
.gx .info-banner .banner-close, .gx .warning-banner .banner-close, .gx .error-banner .banner-close {
  margin-left:auto; flex-shrink:0; border:none; background:transparent; cursor:pointer; color:inherit;
  opacity:.55; padding:2px; border-radius:var(--radius-sm); display:inline-flex; align-items:center; line-height:1; }
.gx .info-banner .banner-close:hover, .gx .warning-banner .banner-close:hover, .gx .error-banner .banner-close:hover { opacity:1; }
.gx .info-banner .banner-close i, .gx .warning-banner .banner-close i, .gx .error-banner .banner-close i { font-size:15px; margin:0; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.gx .empty-state { padding:48px 24px; text-align:center; color:var(--text-muted); font-size:14px; }
.gx .empty-state i { display:block; font-size:30px; opacity:.5; margin-bottom:10px; }

/* ── Layout léger ────────────────────────────────────────────────────────── */
.gx .main, .gx.main { padding:14px 26px 40px; display:flex; flex-direction:column; gap:14px; }

/* ============================================================================
   DASHBOARD — bibliothèque de composants réutilisables (validée sur GAM Overview).
   Scopée « .gx », tokens nexus.css uniquement. Préfixe « dash- » pour éviter toute
   collision avec .card / .kpi-strip. Un dashboard = markup + ces classes, zéro CSS
   par page. Voir _DOCS/DASHBOARD_COMPONENTS.md pour le squelette de markup.
   Palette JS de référence (barres/listes/donut colorés PAR RANG) :
     PALETTE = ['#1ABB9C','#3b82f6','#f59e0b','#ae3ec9','#0ea5e9','#ec4899','#14b8a6','#6366f1']
     Run-rate par fenêtre : {7d:#0ea5e9, 30d:#1ABB9C, 90d:#3b82f6, 365d:#ae3ec9}
     Pistes de barres = gris neutre #eef0f4 ; donut = 4 teintes de tête + gris "Other".
   Rappel : PAS de height:100vh/overflow ici — la page défile via le navigateur.
   ============================================================================ */

/* grilles types */
.gx .dash-grid-5  { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.gx .dash-grid-3  { display:grid; grid-template-columns:1.6fr 1fr 1.2fr; gap:16px; }
.gx .dash-grid-21 { display:grid; grid-template-columns:1.7fr 1fr; gap:16px; }
@media (max-width:1100px){ .gx .dash-grid-5{grid-template-columns:repeat(2,1fr);} .gx .dash-grid-3,.gx .dash-grid-21{grid-template-columns:1fr;} }

/* KPI carte : valeur + sparkline + variation */
.gx .dash-kpi { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:14px 16px; box-shadow:var(--shadow); }
.gx .dash-kpi .lbl { display:flex; align-items:center; gap:6px; font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); font-weight:700; }
.gx .dash-kpi .lbl i { color:var(--green); font-size:13px; }
.gx .dash-kpi .lbl small { font-weight:600; text-transform:none; letter-spacing:0; }
.gx .dash-kpi .ktop { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; margin-top:8px; }
.gx .dash-kpi .val { font-size:25px; font-weight:800; font-family:var(--font-title); letter-spacing:-.5px; line-height:1; }
.gx .dash-kpi .spark { width:56px; height:22px; flex-shrink:0; }
.gx .dash-kpi .kd { font-size:10px; font-weight:700; display:inline-flex; align-items:center; gap:4px; margin-top:9px; }
.gx .dash-kpi .kd.up { color:var(--green-dark); }
.gx .dash-kpi .kd.dn { color:var(--danger); }
.gx .dash-kpi .kd.fl { color:var(--text-muted); }
.gx .dash-kpi .kd .cap { color:var(--text-muted); font-weight:600; }

/* carte de chart (titre discret + corps) */
.gx .dash-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden; }
/* En-tête de carte = element#8 (bande soft + trait bas, titre corps 12.5px/600 sombre,
   icône sombre, pas de majuscules). Convention validée (Arc/Segments/GAM) — CENTRALISÉE :
   toutes les cartes .dash-card de toutes les pages l'utilisent. */
.gx .dash-card > h3 { font-size:12.5px; text-transform:none; letter-spacing:normal; color:var(--text); font-weight:600; padding:12px 16px; background:var(--bg-soft,#f8fafc); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; }
.gx .dash-card > h3 i { color:var(--text); font-size:15px; }
.gx .dash-card > h3 .sub { margin-left:auto; text-transform:none; letter-spacing:0; font-weight:600; color:var(--text-muted); font-size:11px; }
.gx .dash-card .cbody { padding:14px 16px; }

/* table + barres colorées par rang */
.gx table.dash-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.gx table.dash-table th, .gx table.dash-table td { padding:8px 4px; text-align:left; border-top:1px solid var(--border); }
.gx table.dash-table thead th { border-top:none; font-size:10px; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); font-weight:700; }
.gx table.dash-table td.num, .gx table.dash-table th.num { text-align:right; font-variant-numeric:tabular-nums; }
.gx table.dash-table .tdot { width:8px; height:8px; border-radius:3px; display:inline-block; margin-right:8px; vertical-align:middle; }
.gx .dash-bar { height:6px; border-radius:3px; background:#eef0f4; position:relative; }
.gx .dash-bar > i { position:absolute; left:0; top:0; bottom:0; border-radius:3px; background:var(--green); }

/* donut (conic-gradient + centre + légende chiffrée) */
.gx .dash-donut-wrap { display:flex; align-items:center; gap:16px; }
.gx .dash-donut { width:104px; height:104px; border-radius:50%; flex-shrink:0; position:relative; }
.gx .dash-donut::after { content:""; position:absolute; inset:27%; border-radius:50%; background:var(--white); }
.gx .dash-donut .dc { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.gx .dash-donut .dc .dl { font-size:8.5px; color:var(--text-muted); font-weight:700; text-transform:uppercase; }
.gx .dash-donut .dc .dv { font-size:14px; font-weight:800; }
.gx .dash-legend { display:flex; flex-direction:column; gap:8px; flex:1; }
.gx .dash-legend .li { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--text-muted); }
.gx .dash-legend .li b { color:var(--text); margin-left:auto; font-weight:700; font-variant-numeric:tabular-nums; }
.gx .dash-legend .dot { width:9px; height:9px; border-radius:3px; flex-shrink:0; }

/* top-liste (nom + valeur + barre pleine largeur) */
.gx .dash-list { display:flex; flex-direction:column; gap:11px; }
.gx .dash-list .ru { display:grid; grid-template-columns:1fr auto; gap:3px 10px; align-items:center; }
.gx .dash-list .rn { font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:center; gap:7px; }
.gx .dash-list .rn .ldot { width:8px; height:8px; border-radius:3px; flex-shrink:0; }
.gx .dash-list .rv { font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; }
.gx .dash-list .dash-bar { grid-column:1 / -1; }

/* run-rate : barres verticales par fenêtre (active mise en avant) */
.gx .dash-rr { display:flex; align-items:flex-end; gap:14px; height:120px; padding:8px 4px 0; }
.gx .dash-rr .col { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end; }
.gx .dash-rr .bk { width:100%; max-width:46px; border-radius:6px 6px 0 0; background:var(--green-light); }
.gx .dash-rr .col.on .bk { background:var(--green); }
.gx .dash-rr .bv { font-size:10px; font-weight:700; font-variant-numeric:tabular-nums; }
.gx .dash-rr .col.on .bv { color:var(--green-dark); }
.gx .dash-rr .bl { font-size:10px; color:var(--text-muted); font-weight:600; display:inline-flex; align-items:center; gap:5px; }
.gx .dash-rr .bl .ddot { width:7px; height:7px; border-radius:50%; display:inline-block; }

/* onglets de breakdown (dans une carte) */
.gx .dash-tabs { display:flex; gap:4px; padding:8px 12px 0; border-bottom:1px solid var(--border); }
.gx .dash-tab { font-size:11px; font-weight:600; color:var(--text-muted); background:none; border:none; cursor:pointer; padding:7px 12px; border-bottom:2px solid transparent; font-family:inherit; }
.gx .dash-tab.on { color:var(--green); border-bottom-color:var(--green); }

/* panneau latéral (concentration / fraîcheur / statuts) */
.gx .dash-side { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:16px; }
.gx .dash-side .st { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); font-weight:700; margin-bottom:2px; }
.gx .dash-side .srow { display:flex; align-items:center; gap:8px; padding:9px 0; border-top:1px solid var(--border); font-size:12px; }
.gx .dash-side .st + .srow { border-top:none; }
.gx .dash-side .sv { margin-left:auto; font-weight:700; font-variant-numeric:tabular-nums; text-align:right; }
.gx .dash-pill { font-size:10px; font-weight:600; padding:2px 9px; border-radius:20px; background:var(--green-lighter); color:var(--green-dark); }

/* mini-cartes de synthèse */
.gx .dash-mini { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.gx .dash-mcard { background:var(--bg-soft,#f9fafb); border:1px solid var(--border); border-radius:var(--radius); padding:11px 13px; }
.gx .dash-mcard .ml { font-size:9px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); font-weight:700; }
.gx .dash-mcard .mv { font-size:16px; font-weight:800; margin-top:3px; }
.gx .dash-mcard .mm { font-size:10px; color:var(--text-muted); margin-top:1px; }

/* état vide compact (dans une carte de dashboard) */
.gx .dash-empty { padding:34px; text-align:center; color:var(--text-muted); }
.gx .dash-empty i { font-size:32px; display:block; margin-bottom:10px; }

/* ============================================================================
   CANVAS WIREFRAME (2026-08-13) — classes .cm-* pour les pages "modèle" (Canvas
   Master + p_canvas_template_*). Chaque zone est un container pointillé numéroté
   (container#N) ; le header groupe titre + actions + status. Centralisé ici pour
   que les pages modèle ne portent AUCUN CSS de composant en propre.
   ============================================================================ */
.gx .cm-wire { display:flex; flex-direction:column; gap:16px; counter-reset:cont; }
.gx .cm-row { display:grid; grid-template-columns:2fr 1fr; gap:16px; }
.gx .cm-grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.gx .cm-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* Container générique (zone pointillée + badge container#N) */
.gx .cm-c { counter-increment:cont; position:relative; border:1.5px dashed var(--border-strong,#cbd5e1); border-radius:var(--radius-lg,12px); background:repeating-linear-gradient(135deg,transparent,transparent 10px,rgba(148,163,184,.06) 10px,rgba(148,163,184,.06) 20px); min-height:120px; display:flex; align-items:center; justify-content:center; text-align:center; padding:26px 20px; }
.gx .cm-c.cm-sm { min-height:70px; }
.gx .cm-c.cm-lg { min-height:200px; }
.gx .cm-c.cm-tall { min-height:320px; }
.gx .cm-c::before { content:"container#" counter(cont); position:absolute; top:10px; left:12px; font:700 10px/1 var(--font-body,'Inter'); color:#fff; background:var(--blue,#3b82f6); padding:4px 8px; border-radius:999px; letter-spacing:.2px; }
.gx .cm-c .h { font-family:var(--font-title,'Inter'); font-weight:700; font-size:13px; color:var(--text,#1e2633); }
.gx .cm-c .s { font-size:11.5px; color:var(--text-muted,#7e8896); margin-top:4px; }

/* Zone parent "header" (titre + status à gauche, actions à droite) */
.gx .cm-header { position:relative; border:1.5px solid var(--border-strong,#cbd5e1); border-radius:var(--radius-lg,12px); padding:24px 14px 14px; }
.gx .cm-header::before { content:"header"; position:absolute; top:-9px; left:14px; font:700 10px/1 var(--font-body,'Inter'); color:#fff; background:var(--text,#1e2633); padding:4px 9px; border-radius:999px; letter-spacing:.3px; }
.gx .cm-hgrid { display:grid; grid-template-columns:1fr 280px; grid-template-areas:"title actions" "status actions"; gap:14px; }

@media (max-width:900px){
  .gx .cm-row, .gx .cm-grid3, .gx .cm-grid2 { grid-template-columns:1fr; }
  .gx .cm-hgrid { grid-template-columns:1fr; grid-template-areas:"title" "status" "actions"; }
}

/* ============================================================================
   TABLES GENTELELLA v4 (2026-08-13) — types de tables repris À L'IDENTIQUE du
   template de référence (template.nexus.kasis.io/gentelella, production/tables*.html).
   Classes .table / .cell-* / .status / .chip / .card-opt-btn. Isolées sous .tplg
   pour ne PAS écraser la palette Nexus (les tokens Gentelella — --green #2fb344,
   --blue #066fd1, --primary, --azure, --purple… — ne sont (re)définis QUE dans .tplg).
   ============================================================================ */
.gx .tplg {
  --primary:#1ABB9C; --primary-lt:rgba(26,187,156,0.06); --primary-dk:#169f85;
  --azure:#4299e1; --purple:#ae3ec9; --yellow:#f59f00; --red:#d63939; --green:#2fb344; --blue:#066fd1;
  --purple-lt:rgba(174,62,201,0.06);
  --bg-surface:#ffffff; --bg-surface-secondary:#f9fafb; --body-bg:#f5f7fb;
  --border-color:#e6e7eb; --border-color-light:#eff0f3;
  --text:#1e2633; --text-secondary:#626d7d; --text-muted:#7e8896; --text-disabled:#c0c7cf;
  --font-mono:'SF Mono',Monaco,Consolas,'Liberation Mono',monospace;
  --font-weight-medium:500; --font-weight-bold:600;
  --space-1:4px; --space-2:8px; --radius-sm:4px;
}
.gx .tplg .table-responsive { overflow-x:auto; }
.gx .tplg table.table { width:100%; border-collapse:collapse; font-size:13px; }
.gx .tplg table.table th { text-align:left; padding:8px 16px; font-size:11px; font-weight:var(--font-weight-bold); text-transform:uppercase; letter-spacing:0.3px; color:var(--text-muted); background:var(--bg-surface-secondary); border-bottom:1px solid var(--border-color); }
.gx .tplg table.table td { padding:8px 16px; border-bottom:1px solid var(--border-color-light); color:var(--text-secondary); vertical-align:middle; }
.gx .tplg table.table tr:last-child td { border-bottom:none; }
.gx .tplg table.table tbody tr { transition:background 80ms; }
.gx .tplg table.table tbody tr:hover { background:var(--bg-surface-secondary); }
.gx .tplg .cell-strong { color:var(--text); font-weight:var(--font-weight-medium); }
.gx .tplg .cell-mono { font-family:var(--font-mono); font-size:12px; color:var(--text); font-weight:var(--font-weight-medium); }
.gx .tplg .cell-customer { display:flex; align-items:center; gap:var(--space-2); }
.gx .tplg .cell-avatar { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:600; color:#fff; flex-shrink:0; }
.gx .tplg .status { display:inline-flex; align-items:center; gap:var(--space-1); font-size:11.5px; font-weight:var(--font-weight-medium); }
.gx .tplg .status::before { content:''; width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.gx .tplg .status-green { color:var(--green); } .gx .tplg .status-green::before { background:var(--green); }
.gx .tplg .status-yellow { color:#b45309; } .gx .tplg .status-yellow::before { background:var(--yellow); }
.gx .tplg .status-blue { color:var(--blue); } .gx .tplg .status-blue::before { background:var(--blue); }
.gx .tplg .status-red { color:var(--red); } .gx .tplg .status-red::before { background:var(--red); }
.gx .tplg .card-opt-btn { width:26px; height:26px; border:none; background:transparent; border-radius:var(--radius-sm); cursor:pointer; color:var(--text-muted); display:flex; align-items:center; justify-content:center; transition:background 100ms,color 100ms; }
.gx .tplg .card-opt-btn:hover { background:var(--body-bg); color:var(--text-secondary); }
.gx .tplg .card-opt-btn svg { width:14px; height:14px; }
.gx .tplg .chip { display:inline-flex; align-items:center; gap:var(--space-1); height:22px; padding:0 8px; font-size:11.5px; font-weight:var(--font-weight-medium); color:var(--text-secondary); background:var(--bg-surface-secondary); border:1px solid var(--border-color); border-radius:11px; white-space:nowrap; }
.gx .tplg .chip-purple { color:var(--purple); background:var(--purple-lt); border-color:rgba(174,62,201,0.2); }

/* ============================================================================
   COMPOSANTS PARTAGÉS — repris de l'Arc Tree (design validé) et CENTRALISÉS (2026-08).
   Chargé après nexus.css → surcharge les bases. Concerne toutes les pages qui utilisent
   ces classes : chips (matrix, segments, IAB, custom-targeting, arc) et onglets de période
   (matrix, signals, infosum managers, arc). Le SIZING (flex/largeur/marges) reste géré par
   chaque page ; ici on ne centralise que le DESIGN.
   ============================================================================ */

/* ── Chips harmonisées : même hauteur, coins 8px, sans pastille. !important pour primer
   sur les styles inline posés par le JS de chaque page (couleurs conservées). */
.crit-chip, .active-chip, .avail-chip, .dnd-chip {
  box-sizing:border-box; height:22px !important; min-height:0 !important;
  padding:0 8px !important; border-radius:8px !important;
  font-size:11px !important; font-weight:600 !important; line-height:1 !important;
  display:inline-flex !important; align-items:center; gap:5px; white-space:nowrap;
}
.crit-chip .dot { display:none !important; }

/* ── Onglets de période : conteneur = carte (design element#13, blanc/bordé/12px/ombre),
   onglets = boîtes vertes (design element#9 en vert), sélectionné = fond vert clair. */
.period-tabs-row, .gam-period-tabs {
  gap:8px; padding:8px;
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg,12px); box-shadow:var(--shadow);
}
.period-tab, .gam-tab {
  padding:8px 6px; border-radius:8px; text-align:center;
  background:var(--white); border:1px solid var(--green,#1ABB9C); color:var(--green-dark,#169f85);
}
.period-tab:hover, .gam-tab:hover { background:var(--green-lighter,#e9faf6); color:var(--green-dark,#169f85); }
.period-tab.active, .gam-tab.active { background:var(--green-light,#d1f3ec); color:var(--green-dark,#169f85); box-shadow:none; }


/* ── Onglets de PAGE standard (.cltabs) — modèle bordé validé (infosum_cl_dashboard),
      centralisé 2026-08-24. Onglets de navigation de page (≠ .seg = période in-card). ── */
.gx .cltabs { display:flex; gap:4px; border-bottom:1px solid var(--border); margin:2px 0 0; }
.gx .cltab { display:flex; align-items:center; gap:8px; padding:9px 16px; font-family:var(--font-title); font-size:13.5px; font-weight:600; color:var(--text-muted); background:transparent; border:1px solid transparent; border-top-left-radius:8px; border-top-right-radius:8px; cursor:pointer; position:relative; top:1px; line-height:1; }
.gx .cltab i { font-size:15px; }
.gx .cltab:hover { color:var(--text); }
.gx .cltab.active { color:var(--text); background:var(--white,#fff); border-color:var(--border); border-bottom-color:var(--white,#fff); }
.gx .cltab.active i { color:var(--green); }
.gx .cltab-count { font-size:11px; background:#eef1f5; color:var(--text-muted); border-radius:20px; padding:1px 7px; font-weight:700; }
.gx .tabpane { display:flex; flex-direction:column; gap:14px; }
.gx .tabpane[hidden] { display:none; }


/* ── Sélecteur de période segmenté (.seg) — standard période in-card (GAM Overview),
      centralisé 2026-08-24. Groupe de .btn ; l'actif est surligné. ── */
.gx .seg { display:inline-flex; gap:6px; }
.gx .seg .btn.active { background:var(--border,#eff0f3); border-color:var(--border-strong); color:var(--text); font-weight:700; }


/* ── Cartes EXPLORER (criteria / results / detail) — CENTRALISÉ 2026-08-24 ──────
   Look validé = Audience Segments : panneau blanc bordé, en-tête #8 (fond soft,
   trait bas fin, titre corps 12.5px/600 sombre, icône sombre), corps/chips soft.
   Remplace le défaut gris #e7e5e4 de nexus.css sur TOUS les explorers (.gx). */
.gx .criteria-panel,
.gx #results-layout > .results-card { background:var(--white,#fff); border:1px solid var(--border); }
.gx .criteria-body,
.gx .criteria-chips-strip { background:var(--bg-soft,#f8fafc); }
.gx .criteria-header,
.gx .results-header,
.gx .detail-header { background:var(--bg-soft,#f8fafc); border-bottom:1px solid var(--border); }
.gx .criteria-header h2,
.gx .results-header h2 { font-family:var(--font-body); font-weight:600; font-size:12.5px; color:var(--text); text-transform:none; letter-spacing:normal; }
.gx .criteria-header h2 i,
.gx .results-header h2 i { color:var(--text); }
.gx .detail-title { font-family:var(--font-body); font-weight:600; font-size:12.5px; color:var(--text); }