/* NAVICORE — UI kit / thème de la coquille.
 * Identité visuelle de référence (dossier __IDENTITE VISUELLE) :
 * thème CLAIR, bleu NAVICORE + marine, accents cyan/magenta/orange/violet/vert,
 * cartes blanches arrondies, ombres douces, emblème « cœur » (orbe + boussole).
 * Les VARIABLES ci-dessous pilotent le thème (marque blanche possible). */
:root {
  /* Fond / surfaces — palette officielle JOOMA (brand sheet) */
  --nc-bg: #eef2f8;
  --nc-surface: #ffffff;
  --nc-surface-2: #f5f8fc;
  --nc-text: #16223e;          /* marine (titres, texte) */
  --nc-muted: #64748b;
  --nc-border: #e6ebf4;
  /* Marque — PRIMAIRE = TEAL JOOMA */
  --nc-primary: #00B8C9;       /* teal JOOMA */
  --nc-primary-600: #0093a3;
  --nc-primary-contrast: #ffffff;
  --nc-navy: #0D111C;
  --nc-navy-700: #1a2233;
  --nc-danger: #ef4444;
  /* Accents (badges de catégories / modules) */
  --nc-teal: #00B8C9;
  --nc-blue: #2563eb;
  --nc-magenta: #FF2D7A;
  --nc-orange: #f59e0b;
  --nc-violet: #7c3aed;
  --nc-green: #16a34a;
  /* Barre latérale MARINE JOOMA */
  --nc-sidebar-bg: #0D111C;
  --nc-sidebar-text: #c3cbda;
  --nc-sidebar-hover: rgba(255, 255, 255, .08);
  --nc-sidebar-active: #00B8C9;
  /* Forme */
  --nc-radius: 14px;
  --nc-radius-sm: 10px;
  --nc-shadow: 0 1px 3px rgba(22, 34, 62, .05);
  --nc-shadow-sm: 0 1px 2px rgba(22, 34, 62, .04);
  --nc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--nc-font);
  color: var(--nc-text);
  background: var(--nc-bg);
  font-size: 15px;
  line-height: 1.45;
}
.boot { padding: 48px; color: var(--nc-muted); text-align: center; }
.boot::before {
  content: ""; display: block; width: 44px; height: 44px; margin: 0 auto 14px;
  background: url('/navicore-logo.svg') center/contain no-repeat;
}

/* --- Connexion --- */
.login-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 24px; gap: 18px;
  background: var(--nc-bg);
}
.login-wrap::after {
  content: 'Powered by JOOMCORE';
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--nc-muted); opacity: .75;
}
.login-card {
  width: 100%; max-width: 372px; background: var(--nc-surface);
  border: 1px solid var(--nc-border); border-radius: 16px;
  box-shadow: var(--nc-shadow); padding: 30px;
}
.login-card h1 { margin: 0 0 10px; text-align: center; }
.login-card h1 .login-logo { height: 46px; width: auto; display: block; margin: 0 auto; }
.login-card .sub { color: var(--nc-muted); margin: 0 0 20px; font-size: 13px; text-align: center; }

/* ===== Tunnel d'inscription (choix métier → formulaire) ===== */
.signup-tunnel { max-width: 480px; position: relative; }
.signup-close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--nc-border); background: #fff; color: var(--nc-muted); font-size: 15px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; z-index: 2; transition: background .15s, color .15s; }
.signup-close:hover { background: #f4f7fb; color: var(--nc-navy); }
.signup-brand { text-align: center; margin-bottom: 12px; }
.signup-brand .login-logo { height: 44px; width: auto; display: block; margin: 0 auto 8px; }
.signup-tag { font-size: 12px; color: var(--nc-muted); }
.tunnel-steps { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 16px; }
.tunnel-steps .tstep { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: #eef2f7; color: #8b97a8; }
.tunnel-steps .tstep.on { background: var(--nc-primary); color: #fff; }
.tunnel-steps .tbar { width: 40px; height: 3px; border-radius: 3px; background: #eef2f7; }
.tunnel-steps .tbar.on { background: var(--nc-primary); }
.tunnel-h2 { text-align: center; font-size: 20px; font-weight: 800; color: var(--nc-navy); margin: 0 0 4px; }
.metier-grid { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.metier-card { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; background: #fff; border: 1px solid var(--nc-border); border-radius: 14px; padding: 12px 14px; cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .1s; font: inherit; }
.metier-card:hover { border-color: var(--nc-primary); box-shadow: 0 8px 22px rgba(0, 184, 201, .14); transform: translateY(-1px); }
.metier-card.soon { cursor: default; opacity: .58; background: #f6f8fb; }
.metier-card.soon:hover { border-color: var(--nc-border); box-shadow: none; transform: none; }
.metier-orb { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; }
.metier-orb svg { width: 22px; height: 22px; }
.metier-orb.g-green { background: #e4f1ea; color: #1e7a46; }
.metier-orb.g-magenta { background: #fbe9f2; color: #b83280; }
.metier-orb.g-blue { background: #e3eefb; color: #1f6fb2; }
.metier-orb.g-amber { background: #fbf0da; color: #9a6a00; }
.metier-orb.g-teal { background: #dcf1f3; color: #0093a3; }
.metier-orb.g-purple { background: #ece4f6; color: #5b3b8c; }
.metier-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.metier-name { font-weight: 800; color: var(--nc-navy); font-size: 15px; }
.metier-desc { font-size: 12.5px; color: var(--nc-muted); }
.metier-go { flex: 0 0 auto; color: var(--nc-primary); font-weight: 800; font-size: 20px; }
.metier-soon { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; color: #8b97a8; background: #eef2f7; border-radius: 999px; padding: 3px 10px; text-transform: uppercase; letter-spacing: .3px; }
.metier-chip { display: flex; align-items: center; gap: 12px; background: #f5f9fc; border: 1px solid #d9e6f2; border-radius: 14px; padding: 10px 12px; margin-bottom: 14px; }
.metier-chip .metier-orb { width: 38px; height: 38px; }
.btn.link.small { font-size: 12.5px; padding: 2px 6px; }

/* --- Coquille applicative --- */
.shell { display: flex; flex-direction: column; min-height: 100vh; }
.topbar { display: flex; align-items: center; gap: 16px; height: 58px; padding: 0 16px; background: var(--nc-sidebar-bg); position: sticky; top: 0; z-index: 30; }
.topbar-brand { flex: 0 0 auto; display: flex; align-items: center; }
.topbar-brand .brand-logo { height: 28px; width: auto; display: block; }
.topbar .user { margin-left: auto; color: #aeb8c8; font-size: 13px; display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.topbar .user .btn.link { color: #cdd6e4; }
/* nav JOOMA horizontale dans la barre du haut */
.topnav { flex-direction: row !important; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; overflow-x: auto; height: 58px; }
/* tous les items de la barre du haut : même boîte, parfaitement alignés (on neutralise les marges/bordures héritées de la sidebar verticale) */
.topnav a { color: #cdd6e4; height: 38px; padding: 0 12px !important; margin: 0 !important; border: none !important; box-sizing: border-box; white-space: nowrap; align-items: center; line-height: 1; align-self: center; }
.topnav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.topnav a.active { background: var(--nc-sidebar-active); color: #fff; box-shadow: none; }
.topnav a.nav-top { background: rgba(22, 179, 199, .16); }
.topnav .nav-ico svg { width: 17px; height: 17px; }
.topnav .empty { display: none; }
/* SQUELETTE D'APPLICATION : menu app à gauche, contenu à droite (sous la barre JOOMA) */
/* Module : plus de 2e sidebar — les sections deviennent des ONGLETS en haut (une seule nav = la coquille). */
.app-shell { display: flex; flex-direction: column; margin: 0; min-height: 0; }
.app-side { background: transparent; padding: 0 0 12px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; border-bottom: 1px solid var(--nc-border, #e7ecf4); margin-bottom: 18px; }
.app-side .app-title { color: var(--nc-navy, #16223e); font-weight: 800; font-size: 19px; padding: 0; margin-right: 8px; width: 100%; }
.app-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 11px; color: var(--nc-muted, #7c8aa0); text-decoration: none; font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.app-link:hover { background: #f1f5fa; color: var(--nc-navy, #16223e); }
.app-link.active { background: linear-gradient(135deg, #17c4dc, #1391bf); color: #fff; box-shadow: 0 6px 16px rgba(23, 196, 220, .3); }
.app-ico { width: 17px; height: 17px; display: grid; place-items: center; flex: 0 0 auto; } .app-ico svg { width: 17px; height: 17px; stroke: currentColor; }
.app-link-l { min-width: 0; }
.app-badge { background: #ff3b6b; color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 700; }
.app-main { padding: 0; overflow: visible; min-width: 0; }
.app-shell.flat-nav .app-side { display: none; }
.sidebar {
  grid-area: side; color: var(--nc-sidebar-text); padding: 16px 12px;
  background: var(--nc-sidebar-bg);
  display: flex; flex-direction: column;
}
.sidebar-foot {
  margin-top: auto; padding: 14px 10px 4px; font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: #8a93a6; opacity: .8;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.sidebar .brand {
  padding: 6px 10px 18px; display: flex; align-items: center;
}
.sidebar .brand .brand-logo { height: 30px; width: auto; display: block; }
.sidebar .brand-hidden::before {
  content: ""; width: 30px; height: 30px; flex: 0 0 auto;
  background: url('/navicore-logo.svg') center/contain no-repeat;
}
.nav { display: flex; flex-direction: column; gap: 3px; }
.nav a { color: var(--nc-sidebar-text); text-decoration: none; padding: 9px 12px; border-radius: var(--nc-radius-sm); display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; transition: background .12s, color .12s; }
.nav a:hover { background: var(--nc-sidebar-hover); color: #fff; }
.nav a.active { background: var(--nc-sidebar-active); color: #fff; box-shadow: none; }
.nav .empty { color: #8a93a6; font-size: 13px; padding: 9px 12px; }
.nav a.nav-top { font-weight: 700; color: #fff; background: rgba(22, 179, 199, .16); margin-bottom: 8px; }
.nav a.nav-top:hover { background: rgba(22, 179, 199, .26); }
.nav a.nav-top.active { background: var(--nc-sidebar-active); }
.nav a.nav-top + a { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 12px; }
.nav .nav-ico { width: 18px; height: 18px; flex: 0 0 auto; display: grid; place-items: center; opacity: .82; }
.nav .nav-ico svg { width: 18px; height: 18px; }
.nav a:hover .nav-ico, .nav a.active .nav-ico { opacity: 1; }
.nav .nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav a.nav-admin { margin-top: 8px; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 12px; }
.main { grid-area: main; padding: 26px; overflow: auto; }

/* --- Composants UI kit --- */
.card { background: var(--nc-surface); border: 1px solid var(--nc-border); border-radius: var(--nc-radius); box-shadow: var(--nc-shadow); padding: 20px; }
.placeholder { color: var(--nc-muted); border: 1px dashed var(--nc-border); border-radius: var(--nc-radius); padding: 44px; text-align: center; background: var(--nc-surface); }
h2.view-title { margin: 0 0 18px; font-size: 21px; color: var(--nc-navy); }
.nc-pagehead { margin: 0 0 18px; }
.nc-pagehead .view-title { margin: 0 0 4px; }
.nc-pagesub { margin: 0; color: var(--nc-muted); font-size: 14px; line-height: 1.45; }
.nc-stat-hint { font-size: 12px; color: var(--nc-muted); }

label.field { display: block; margin-bottom: 14px; font-size: 13px; color: var(--nc-muted); }
label.field span { display: block; margin-bottom: 6px; }
input, select, textarea {
  width: 100%; padding: 10px 12px; font: inherit; color: var(--nc-text);
  border: 1px solid var(--nc-border); border-radius: var(--nc-radius-sm); background: #fff;
}
/* Cases à cocher / radios : jamais 100% de large (sinon elles écrasent le texte à côté). */
input[type="checkbox"], input[type="radio"] { width: auto; min-width: 0; padding: 0; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--nc-primary); box-shadow: 0 0 0 3px rgba(22, 179, 199, .18); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 17px; font: inherit; font-weight: 600; border: 1px solid transparent; border-radius: var(--nc-radius-sm); cursor: pointer; background: #eef2f9; color: var(--nc-text); transition: filter .12s, box-shadow .12s; }
.btn:hover { filter: brightness(.98); }
.btn.primary { background: var(--nc-primary); color: var(--nc-primary-contrast); box-shadow: none; }
.btn.cta { background: var(--nc-magenta); color: #fff; box-shadow: none; }
.btn.cta:hover { filter: brightness(.96); }
.btn.primary:hover { background: var(--nc-primary-600); }
.btn.ghost { background: transparent; border-color: var(--nc-border); }
.btn.link { background: none; border: none; color: var(--nc-primary); padding: 0; cursor: pointer; }
.btn.danger { background: var(--nc-danger); color: #fff; }
.btn[disabled] { opacity: .55; cursor: default; box-shadow: none; }
.btn:focus-visible { outline: 2px solid var(--nc-primary); outline-offset: 2px; }

table.grid { width: 100%; border-collapse: collapse; background: var(--nc-surface); border: 1px solid var(--nc-border); border-radius: var(--nc-radius); overflow: hidden; box-shadow: var(--nc-shadow-sm); }
table.grid th, table.grid td { text-align: left; padding: 11px 13px; border-bottom: 1px solid var(--nc-border); font-size: 14px; }
table.grid th { background: var(--nc-surface-2); color: var(--nc-muted); font-weight: 600; }
table.grid tr:last-child td { border-bottom: none; }
table.grid tbody tr:hover td { background: var(--nc-surface-2); }
/* Conteneur scrollable : la table garde ses colonnes au lieu de se tasser/rogner. */
.doc-table-wrap { overflow-x: auto; border-radius: 14px; -webkit-overflow-scrolling: touch; }
.doc-table-wrap table.grid { min-width: 720px; }
/* Rangée d'actions : alignement vertical homogène (texte + icônes + menu ⋯). */
td.row-actions { vertical-align: middle; }
td.row-actions > * { vertical-align: middle; }
.row-actions .btn { padding: 7px 11px; font-size: 13px; line-height: 1; }
.row-actions .btn svg { display: block; }

.notice { padding: 11px 14px; border-radius: var(--nc-radius-sm); font-size: 13px; margin-bottom: 16px; }
.notice.error { background: #fef3f2; color: var(--nc-danger); border: 1px solid #fecdca; }
.notice.warn { background: #fffaeb; color: #b54708; border: 1px solid #fedf89; }
.notice.info { background: #eff6ff; color: var(--nc-primary-600); border: 1px solid #bfdbfe; }

/* --- Bandeau « fin d'essai / abonnement » affiché en tête de la zone contenu --- */
.trial-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--nc-radius-sm); font-size: 14px; margin: 0 0 18px; border: 1px solid transparent; }
.trial-banner .tb-text { flex: 1; min-width: 0; line-height: 1.35; }
.trial-banner .tb-text strong { font-weight: 700; }
.trial-banner.amber { background: #fffaeb; color: #b54708; border-color: #fedf89; }
.trial-banner.red { background: #fef3f2; color: var(--nc-danger); border-color: #fecdca; }
.trial-banner .tb-cta { flex: none; }
.trial-banner .tb-dismiss { flex: none; background: transparent; border: none; cursor: pointer; font-size: 18px; line-height: 1; color: inherit; opacity: .6; padding: 2px 6px; border-radius: 6px; }
.trial-banner .tb-dismiss:hover { opacity: 1; }

/* --- Utilitaires (optionnels) : pastilles de catégories façon « écosystème » --- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #eef2f9; color: var(--nc-muted); }
.badge.blue { background: #e7efff; color: var(--nc-primary-600); }
.badge.teal { background: #e0f7fb; color: #0e7490; }
.badge.magenta { background: #fde7f1; color: #be1f6a; }
.badge.orange { background: #fef3e2; color: #b45309; }
.badge.violet { background: #f1eafe; color: #6d28d9; }
.badge.green { background: #e7f7ec; color: #15803d; }
.badge.red { background: #fde8e8; color: #b91c1c; }
/* icône de catégorie (carré arrondi coloré, façon maquette) */
.cat-icon { width: 38px; height: 38px; border-radius: 11px; display: inline-grid; place-items: center; color: #fff; }
.cat-icon.blue { background: var(--nc-primary); }
.cat-icon.teal { background: var(--nc-teal); }
.cat-icon.magenta { background: var(--nc-magenta); }
.cat-icon.orange { background: var(--nc-orange); }
.cat-icon.violet { background: var(--nc-violet); }
.cat-icon.green { background: var(--nc-green); }

/* --- Menu : entrée Accueil --- */
.nav a.nav-home { font-weight: 700; color: #fff; }

/* --- Tableau de bord (accueil) --- */
.nc-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.nc-hello-h { font-size: 22px; font-weight: 800; color: var(--nc-navy); }
.nc-hello-sub { color: var(--nc-muted); font-size: 14px; margin-top: 2px; }
.nc-core { position: relative; width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; color: #fff; text-align: center; flex: 0 0 auto;
  background: var(--nc-teal);
  box-shadow: none; }
.nc-core-name { font-weight: 800; letter-spacing: .5px; }
.nc-core-dot { position: absolute; top: 14px; right: 20px; width: 11px; height: 11px; border-radius: 50%; background: var(--nc-magenta); box-shadow: none; }

.nc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.nc-stat { display: flex; align-items: center; gap: 14px; text-align: left; background: var(--nc-surface); border: 1px solid var(--nc-border); border-radius: var(--nc-radius); box-shadow: var(--nc-shadow); padding: 16px 18px; cursor: pointer; font: inherit; color: var(--nc-text); transition: box-shadow .15s, border-color .15s, transform .15s; }
.nc-stat:hover:not(:disabled) { box-shadow: 0 2px 6px rgba(14,34,64,.07); border-color: var(--nc-teal); transform: none; }
.nc-stat:focus-visible { outline: 2px solid var(--nc-primary); outline-offset: 2px; }
.nc-stat:disabled { cursor: default; }
.nc-stat-ico { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto; }
.nc-stat-ico svg { width: 22px; height: 22px; }
.nc-stat-ico.blue { background: #e8f0fe; color: #2563eb; }
.nc-stat-ico.teal { background: #e0f7fb; color: #0e8da0; }
.nc-stat-ico.green { background: #e7f7ec; color: #16a34a; }
.nc-stat-ico.amber { background: #fef3e2; color: #d97706; }
.nc-stat-ico.red { background: #fde8e8; color: #dc2626; }
.nc-stat-ico.purple { background: #f1eafe; color: #7c3aed; }
.nc-stat-ico.magenta { background: #fde7f1; color: #be1f6a; }
.nc-stat-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nc-stat-label { font-size: 13px; color: var(--nc-muted); }
.nc-stat-num { font-size: 22px; font-weight: 800; color: var(--nc-navy); line-height: 1.1; }
/* Cartes du hub Administration */
.nc-tile { display: flex; align-items: center; gap: 14px; text-align: left; background: var(--nc-surface); border: 1px solid var(--nc-border); border-radius: var(--nc-radius); box-shadow: var(--nc-shadow); padding: 16px 18px; cursor: pointer; font: inherit; color: var(--nc-text); transition: box-shadow .15s, border-color .15s, transform .15s; }
.nc-tile:hover { box-shadow: 0 2px 6px rgba(14,34,64,.07); border-color: var(--nc-teal); transform: none; }
.nc-tile:focus-visible { outline: 2px solid var(--nc-primary); outline-offset: 2px; }
.nc-tile .nc-stat-ico { width: 44px; height: 44px; border-radius: 12px; }
.nc-tile-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.nc-tile-title { font-size: 15px; font-weight: 700; color: var(--nc-navy); line-height: 1.15; }
.nc-tile-desc { font-size: 12.5px; color: var(--nc-muted); line-height: 1.35; }
.nc-tile-arrow { color: var(--nc-muted); font-size: 18px; flex: 0 0 auto; transition: transform .15s, color .15s; }
.nc-tile:hover .nc-tile-arrow { color: var(--nc-teal); transform: translateX(3px); }

@media (max-width: 720px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-side { flex-direction: row; overflow-x: auto; gap: 6px; }
  .app-side .app-title { display: none; }
}

/* ---- JoomStore : tuiles « liquid glass » (App Store) ---- */
.jstore-wrap { /* conteneur (fond paramétrable via Design du Store) */ }
.jstore-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--jstile-w, 240px), 1fr)); gap: 18px; }
.jstore-grid.hide-price .jstile-price { display: none; }
.jstore-grid.hide-status .jstile-status { display: none; }
.jstile { position: relative; height: var(--jstile-h, 178px); border-radius: var(--jstile-r, 14px); overflow: hidden; padding: 16px; display: flex; flex-direction: column; justify-content: flex-end; color: var(--nc-text); isolation: isolate; border: 1px solid rgba(0,0,0,.08); box-shadow: var(--nc-shadow); background: #fff; }
/* variante plate (sans verre dépoli ni reflet) */
.jstore-flat .jstile { box-shadow: var(--nc-shadow); }
.jstore-flat .jstile::before, .jstore-flat .jstile::after { display: none; }
.jstile::before { content: none; }
.jstile::after { content: none; }
.jstile { transition: box-shadow .15s, border-color .15s; }
.jstile:hover { box-shadow: 0 2px 6px rgba(13,17,28,.07); border-color: rgba(0,0,0,.14); }
.jstile > * { position: relative; z-index: 2; }
.jstile-ico { position: absolute; top: 13px; right: 13px; width: 46px; height: 46px; border-radius: 13px; z-index: 3; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, #fff); border: 1px solid color-mix(in srgb, var(--accent) 20%, #fff); box-shadow: none; }
.jstile-ico svg { width: 25px; height: 25px; }
.jstile-status { position: absolute; top: 14px; left: 14px; z-index: 3; font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: #eef2f9; color: #41506b; }
.jstile-cat { font-size: 12px; font-weight: 700; color: var(--nc-muted); }
.jstile-name { font-size: 18px; font-weight: 800; margin: 2px 0 10px; letter-spacing: -.01em; color: var(--nc-navy); }
.jstile-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.jstile-price { font-size: 12.5px; color: #5b6472; font-weight: 700; }
.jstile-get { border: none; cursor: pointer; font-weight: 800; font-size: 12.5px; padding: 7px 15px; border-radius: 999px; color: #fff; background: var(--accent); box-shadow: none; }
.jstile-get.alt { background: #eef2f9; color: var(--nc-text); }
.jstile-sec { margin-top: 6px; font-size: 11.5px; color: #5b6472; background: none; border: none; cursor: pointer; text-decoration: underline; align-self: flex-start; }

/* ===== Page d'accueil standard d'un module (nc.ui.appHome) ===== */
.jhome { max-width: 1000px; }
.jhome-hero { border-radius: 18px; padding: 26px 28px; margin-bottom: 16px; }
.jhome-hello { font-size: 26px; font-weight: 800; color: var(--jt-text); }
.jhome-tag { color: var(--jt-muted); font-size: 15px; margin-top: 4px; }
.jhome-searchwrap { display: flex; align-items: center; gap: 8px; background: var(--jt-card); border: 1px solid var(--jt-border); border-radius: 14px; padding: 0 14px; margin-bottom: 16px; box-shadow: var(--nc-shadow); transition: border-color .12s, box-shadow .12s; }
.jhome-searchwrap:focus-within { border-color: var(--jt-accent); box-shadow: 0 0 0 3px var(--jt-border-accent); }
.jhome-search { flex: 1; border: none; outline: none; background: transparent; font: inherit; font-size: 15px; padding: 13px 0; color: var(--jt-text); }
.jhome-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.jhome-tile { display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; background: var(--jt-card); border: 1px solid var(--jt-border); border-radius: 14px; box-shadow: var(--nc-shadow); padding: 18px; cursor: pointer; font: inherit; color: var(--jt-text); transition: box-shadow .15s, border-color .15s, transform .15s; }
.jhome-tile:hover { box-shadow: 0 2px 6px rgba(14,34,64,.07); border-color: var(--jt-accent); transform: none; }
.jhome-tile:focus-visible { outline: 2px solid var(--jt-accent); outline-offset: 2px; }
.jhome-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: 0 0 auto; }
.jhome-ico svg { width: 24px; height: 24px; }
.jhome-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jhome-t { font-weight: 800; font-size: 16px; }
.jhome-d { font-size: 13px; color: var(--jt-muted); }
.jhome-arrow { color: var(--jt-muted); font-size: 18px; transition: transform .15s; }
.jhome-tile:hover .jhome-arrow { transform: translateX(3px); }

/* ===== Apparence des modules (Administration) ===== */
.jtheme-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--nc-border); }
.jtheme-row:last-child { border-bottom: none; }
.jtheme-swatch { width: 22px; height: 22px; border-radius: 7px; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.jtheme-name { flex: 1; font-weight: 700; }

/* ===== Console JOOMA — Catalogue & Tarifs ===== */
.pill { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.pill.ok { background: #E4F7EC; color: #0f7a45; }
.pill.warn { background: #FFF1DC; color: #9a6300; }
.jcat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.jcat-card { background: var(--nc-surface, #fff); border: 1px solid var(--nc-border); border-radius: 14px; box-shadow: var(--nc-shadow); padding: 16px; transition: box-shadow .15s, border-color .15s; }
.jcat-card:hover { box-shadow: 0 2px 6px rgba(14,34,64,.07); border-color: var(--nc-border); }
.jcat-head { display: flex; align-items: center; gap: 11px; }
.jcat-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; }
.jcat-ico svg { width: 22px; height: 22px; }
.jcat-name { font-weight: 800; font-size: 16px; color: var(--nc-navy); }
.jcat-cat { font-size: 12.5px; color: var(--nc-muted); }
.jcat-badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #EEF2FF; color: #4338ca; }
.jcat-price { margin-top: 12px; font-size: 26px; font-weight: 800; color: var(--nc-navy); }
.jcat-per { font-size: 14px; font-weight: 600; color: var(--nc-muted); }
.jcat-plans { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.jcat-plan { font-size: 12px; padding: 4px 9px; border-radius: 8px; background: var(--nc-bg); color: #41506b; }
.jcat-plan.pop { background: #EEF2FF; color: #4338ca; font-weight: 700; }
.jcat-trial { margin-top: 8px; font-size: 13px; color: #0f7a45; }
.jcat-edit-plan { display: flex; align-items: center; gap: 10px; margin: 6px 0; flex-wrap: wrap; }

/* ===== Joom'Site — éditeur Site & Templates ===== */
.jsite-ed { min-height: 320px; padding: 22px 24px; line-height: 1.6; overflow: auto; outline: none; }
.jsite-tools-wrap { margin: 12px 0; }
.jsite-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.jsite-tools .btn { font-size: 12.5px; padding: 6px 11px; }
.jsite-frame { border: 1px solid var(--nc-border); border-radius: 14px; overflow: hidden; box-shadow: var(--nc-shadow); background: #fff; }
/* Galerie de templates (Apparence) */
.tpl-h { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.tpl-card { text-align: left; background: var(--nc-surface, #fff); border: 1px solid var(--nc-border); border-radius: 14px; padding: 0; overflow: hidden; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.tpl-card:hover { transform: translateY(-2px); box-shadow: var(--nc-shadow); }
.tpl-card.on { border-color: var(--nc-brand, #16b3c7); box-shadow: 0 0 0 2px color-mix(in srgb, var(--nc-brand, #16b3c7) 40%, transparent); }
.tpl-thumb { height: 96px; display: flex; align-items: flex-end; padding: 12px; color: #fff; font-weight: 800; letter-spacing: .01em; }
.tpl-thumb.tpl-aurora { background: linear-gradient(135deg, #00B8C9, #0f83c9); }
.tpl-thumb.tpl-nocturne { background: linear-gradient(135deg, #141a2e, #4f7cff); }
.tpl-thumb.tpl-editorial { background: linear-gradient(135deg, #111418, #6b7178); }
.tpl-meta { padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.tpl-meta strong { font-size: 15px; }
.tpl-cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--nc-brand, #16b3c7); }
.tpl-desc { font-size: 12.5px; color: var(--nc-muted); }
.pal-row { display: flex; flex-wrap: wrap; gap: 14px; }
.pal-cell { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 66px; }
.pal-sw { width: 40px; height: 40px; border-radius: 10px; border: 2px solid var(--nc-border); cursor: pointer; padding: 0; }
.pal-sw.on { border-color: #111; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--nc-brand, #16b3c7); }
.pal-name { font-size: 11px; color: var(--nc-muted); text-align: center; line-height: 1.2; }
.tpl-preview { width: 100%; height: 560px; border: 1px solid var(--nc-border); border-radius: 12px; background: #fff; }
.jsite-pv-nav { display: flex; gap: 4px; flex-wrap: wrap; padding: 10px 16px; background: #0e2a52; }
.jsite-pv-nav a { color: rgba(255,255,255,.78); text-decoration: none; font-weight: 600; font-size: 14px; padding: 6px 12px; border-radius: 8px; }
.jsite-pv-nav a.on, .jsite-pv-nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.jsite-pv-body { padding: 26px 30px; min-height: 260px; background: #fff; color: #1a1a1a; line-height: 1.6; }
.jsite-pv-body.dark { background: #11141d; color: #e8ecf4; }

/* ===== Console → Clients (fiche client) ===== */
.jrow { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--nc-border); flex-wrap: wrap; }
.jrow:last-child { border-bottom: none; }

/* ===== Tableau de bord d'accueil (vendeur) ===== */
.ov-cta { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.ov-step { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--nc-border); }
.ov-step:first-of-type { border-top: none; }
.ov-step-n { width: 28px; height: 28px; border-radius: 50%; background: var(--nc-primary); color: #fff; font-weight: 800; display: grid; place-items: center; flex: 0 0 auto; }
.jhome-cta { font-size: 12.5px; font-weight: 800; padding: 5px 12px; border-radius: 999px; border: 1.5px solid; white-space: nowrap; }
.jhome-grid + .jhome-grid { margin-top: 12px; }

/* ===== Dashboard accueil : espacement + hero sobre (sans ballon) ===== */
.ov-wrap { display: flex; flex-direction: column; gap: 22px; }
.ov-hero2 { padding: 4px 2px 2px; }
.ov-hero2 .nc-hello-h { font-size: 24px; }
.ov-wrap > .card { margin: 0; }
.ov-wrap > .nc-grid { margin: 0; }

/* ===== JoomStore : groupe d'actions + badge essai ===== */
.jstile-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.jstile-trial { font-size: 11.5px; font-weight: 800; padding: 5px 9px; border-radius: 999px; background: #FFF1DC; color: #9a6300; white-space: nowrap; }
.jstile-status.trial { background: #FFF1DC; color: #9a6300; }

/* ===== Réseaux sociaux : aperçu en direct ===== */
.social-preview { background: #fff; border: 1px solid var(--nc-border); border-radius: 14px; padding: 14px; box-shadow: var(--nc-shadow); max-width: 460px; }
.sp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sp-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--nc-primary); color: #fff; font-weight: 800; display: grid; place-items: center; }
.sp-text { white-space: pre-wrap; line-height: 1.5; font-size: 14.5px; }
.sp-img { width: 100%; border-radius: 10px; margin-top: 10px; display: block; }

/* ===== Responsive : grilles en 1 colonne + respiration mobile ===== */
@media (max-width: 640px) {
  .main, .app-main { padding: 18px; }
  .ov-wrap { gap: 18px; }
  .jhome-hero { padding: 20px 18px; }
  .jhome-hello { font-size: 22px; }
  .nc-grid,
  .jhome-grid,
  .jcat-grid,
  .jstore-grid { grid-template-columns: 1fr; gap: 14px; }
  .nc-hero { margin-bottom: 18px; }
  .social-preview { max-width: 100%; }
}

/* Tunnel de vente / checkout (FunnelKit-like) : 2 colonnes + récap sticky. */
.funnel-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.funnel-aside { position: sticky; top: 16px; align-self: start; }
@media (max-width: 860px) {
  .funnel-grid { grid-template-columns: 1fr; }
  .funnel-aside { position: static; }
}

/* Modale JOOMA (confirm/alert stylés) — flat, sobre. */
.ncm-overlay { position: fixed; inset: 0; background: rgba(12, 22, 38, .46); display: grid; place-items: center; z-index: 10006; padding: 20px; animation: ncmIn .12s ease; }
.ncm-card { background: #fff; color: #1a2433; border-radius: 14px; max-width: 430px; width: 100%; box-shadow: 0 12px 32px rgba(0, 0, 0, .14); border: 1px solid var(--nc-border); overflow: hidden; }
.ncm-title { font-weight: 800; font-size: 17px; padding: 18px 22px 0; }
.ncm-msg { padding: 16px 22px; font-size: 15px; line-height: 1.55; color: #36434f; white-space: pre-line; }
.ncm-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid #eef1f5; }
.btn.danger { background: #e24b4a; color: #fff; border: 0; }
.btn.danger:hover { background: #cf3e3d; }
@keyframes ncmIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Standard maison « POPUP 70% » (openPanel) — panneau responsive + scroll interne. */
/* Règle GÉNÉRALE (toutes les popups du site) : backdrop sombre + flou isolant façon « verre fumé ». */
.ncp-overlay { position: fixed; inset: 0; background: rgba(2, 6, 18, .72); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); display: grid; place-items: center; z-index: 9998; padding: 24px; animation: ncmIn .12s ease; }
.ncp-panel { position: relative; width: min(1240px, 92vw); max-width: 1240px; max-height: 92vh; background: var(--nc-bg, #eef2f7); border-radius: 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); display: flex; flex-direction: column; overflow: hidden; }
.ncp-head { display: flex; align-items: center; gap: 12px; padding: 15px 20px; background: var(--nc-surface, #fff); border-bottom: 1px solid var(--nc-border, #e6ebf4); flex: 0 0 auto; }
.ncp-title { flex: 1; font-weight: 800; font-size: 18px; color: var(--nc-navy, #16223e); }
.ncp-close { border: 0; background: transparent; font-size: 17px; cursor: pointer; color: var(--nc-muted, #64748b); width: 34px; height: 34px; border-radius: 10px; }
.ncp-close:hover { background: var(--nc-surface-2, #f1f5f9); }
.ncp-body { padding: 20px; overflow: auto; flex: 1 1 auto; }
.ncp-top { position: absolute; right: 18px; bottom: 18px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--nc-primary, #16b3c7); color: #fff; font-size: 20px; cursor: pointer; display: none; place-items: center; box-shadow: 0 8px 20px rgba(0, 0, 0, .22); z-index: 2; }
.ncp-fs { border: 0; background: transparent; cursor: pointer; color: var(--nc-muted, #64748b); width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.ncp-fs:hover { background: var(--nc-surface-2, #f1f5f9); }
.ncp-fs svg { width: 18px; height: 18px; }
.ncp-panel.ncp-fullscreen { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
.ncp-overlay.ncp-overlay-full { padding: 0; }
@media (max-width: 860px) { .ncp-panel { width: 95%; max-height: 88vh; } .ncp-body { padding: 14px; } }

/* Cloche de notifications (barre du haut). */
.bell-wrap { position: relative; display: inline-flex; }
.bell-btn { position: relative; background: transparent; border: 0; cursor: pointer; color: #cdd6e4; font-size: 18px; width: 36px; height: 36px; border-radius: 9px; }
.bell-btn:hover { background: rgba(255, 255, 255, .08); }
.bell-badge { display: none; position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--nc-magenta, #FF2D7A); color: #fff; font-size: 10px; font-weight: 800; place-items: center; }
.bell-menu { display: none; position: absolute; right: 0; top: 44px; width: 340px; max-width: 90vw; max-height: 60vh; overflow: auto; background: var(--nc-surface, #fff); color: var(--nc-navy, #16223e); border: 1px solid var(--nc-border, #e6ebf4); border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, .22); z-index: 60; }
.bell-head { padding: 12px 16px; font-weight: 800; border-bottom: 1px solid var(--nc-border, #e6ebf4); position: sticky; top: 0; background: var(--nc-surface, #fff); }
.bell-item { display: flex; gap: 10px; padding: 11px 16px; border-bottom: 1px solid rgba(0, 0, 0, .05); }
.bell-item:last-child { border-bottom: 0; }
/* Bouton « Alertes » (remplace la cloche) — pilule blanche assortie à la gélule présence. */
.alerts-wrap { position: relative; display: inline-flex; flex: 0 0 auto; }
.alerts-btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--nc-border, #e7ecf4); background: #fff; border-radius: 999px; padding: 6px 14px; cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--nc-navy, #16223e); transition: border-color .2s, box-shadow .2s, background .2s; white-space: nowrap; }
.alerts-btn:hover { border-color: rgba(25, 195, 214, .5); box-shadow: 0 0 0 3px rgba(25, 195, 214, .12); }
.alerts-btn svg { width: 16px; height: 16px; stroke: currentColor; }
.alerts-btn.has { border-color: #19c3d6; color: #0e7c8b; background: #ecfbfd; }
.alerts-btn .bell-badge { position: static; display: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 100px; background: var(--nc-magenta, #FF2D7A); color: #fff; font-size: 11px; font-weight: 800; align-items: center; justify-content: center; top: auto; right: auto; }

/* ============================================================
   RELOOKING « IONOS » — cartes centrées, icône en haut, blanc net.
   Surcharge CSS pure (aucun changement de markup). Store + Admin.
   ============================================================ */
/* --- Tuiles du JoomStore : carte verticale centrée --- */
.jstore-grid { gap: 20px; }
.jstile {
  height: auto;
  min-height: var(--jstile-h, 210px);
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 28px 18px 20px;
  gap: 4px;
  border-radius: 18px;
  border: 1px solid #e7ecf4;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 40, 80, .04);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.jstile:hover {
  box-shadow: 0 12px 30px rgba(16, 40, 80, .11);
  border-color: #d2ddec;
  transform: translateY(-3px);
}
.jstile-ico {
  position: static;
  order: 1;
  width: 66px; height: 66px;
  margin: 0 auto 8px;
  border-radius: 18px;
  border: none;
  background: color-mix(in srgb, var(--accent) 13%, #fff);
}
.jstile-ico svg { width: 31px; height: 31px; }
.jstile-name { order: 2; font-size: 17px; margin: 4px 0 1px; }
.jstile-cat { order: 3; font-weight: 600; color: var(--nc-muted); font-size: 12.5px; }
.jstile-row {
  order: 4;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 16px;
}
.jstile-price { font-size: 13px; }
.jstile-actions { justify-content: center; width: 100%; }
.jstile-get { padding: 9px 20px; }
.jstile-status { background: #eef2f9; color: #51607b; }

/* --- Tuiles d'Administration : même carte centrée --- */
.nc-tile {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 24px 16px;
  border-radius: 18px;
  border: 1px solid #e7ecf4;
  box-shadow: 0 1px 2px rgba(16, 40, 80, .04);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.nc-tile:hover {
  box-shadow: 0 12px 30px rgba(16, 40, 80, .11);
  border-color: #d2ddec;
  transform: translateY(-3px);
}
.nc-tile .nc-stat-ico { width: 58px; height: 58px; border-radius: 17px; }
.nc-tile .nc-stat-ico svg { width: 29px; height: 29px; }
.nc-tile-body { align-items: center; flex: 0 0 auto; gap: 4px; }
.nc-tile-title { font-size: 15.5px; }
.nc-tile-desc { font-size: 12.5px; }
.nc-tile-arrow { display: none; }

/* --- Polish général « IONOS » : respiration, cartes, boutons, champs, tableaux --- */
.main { padding: 28px 30px; }
.appmaincol .main { padding: 24px; }
.app-main { padding: 0; }
.card { padding: 22px; border-color: #e8edf5; box-shadow: 0 1px 3px rgba(16, 40, 80, .045); }
.nc-pagehead { margin-bottom: 22px; }
h2.view-title { font-size: 22px; font-weight: 700; letter-spacing: -.012em; }
.nc-pagesub { font-size: 14px; color: var(--nc-muted); }

.btn { padding: 10px 18px; border-radius: 10px; font-weight: 600; transition: filter .12s, box-shadow .12s, transform .06s; }
.btn:active { transform: translateY(.5px); }
.btn.primary { box-shadow: 0 1px 2px rgba(0, 184, 201, .22); }
.btn.ghost { border-color: #dde5ef; background: #fff; }
.btn.ghost:hover { background: #f5f8fc; border-color: #c9d5e4; }

input, select, textarea { padding: 11px 13px; border-radius: 10px; border-color: #dde5ef; transition: border-color .12s, box-shadow .12s; }
input:hover, select:hover, textarea:hover { border-color: #c4d1e2; }

table.grid { border-radius: 14px; border-color: #e8edf5; }
table.grid th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .035em; padding: 12px 14px; background: #f5f8fc; }
table.grid td { padding: 12px 14px; }

.notice { border-radius: 10px; }
.jcat-card { border-radius: 16px; border-color: #e8edf5; box-shadow: 0 1px 3px rgba(16, 40, 80, .045); transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease; }
.jcat-card:hover { box-shadow: 0 10px 26px rgba(16, 40, 80, .09); border-color: #d2ddec; transform: translateY(-2px); }

/* Fond clair et aéré pour la zone store quand aucun fond personnalisé n'est défini */
.jstore-wrap { border-radius: 18px; }

/* ============================================================
   COCKPIT (accueil radial) — cœur JOOMA central + tuiles modules
   reliées par des lignes d'énergie animées. Identité visuelle JOOMA.
   ============================================================ */
.jck-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.jck-stage { position: relative; height: 600px; background: radial-gradient(circle at 50% 50%, #fff, #eef2f8 70%); border: 1px solid var(--nc-border); border-radius: 20px; box-shadow: var(--nc-shadow); overflow: hidden; }
.jck-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.jck-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 168px; height: 168px; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #103a5e, #0a2138 60%, #081a2e); display: grid; place-items: center; z-index: 3; box-shadow: 0 0 50px rgba(25, 150, 200, .42), 0 16px 36px rgba(8, 26, 46, .35); }
.jck-core::before, .jck-core::after { content: ""; position: absolute; border-radius: 50%; border: 2px solid rgba(26, 214, 232, .55); }
.jck-core::before { inset: 28px; animation: jckring 3.4s ease-in-out infinite; }
.jck-core::after { inset: 50px; border-color: rgba(26, 214, 232, .85); box-shadow: 0 0 22px rgba(26, 214, 232, .75); animation: jckring 3.4s ease-in-out infinite .4s; }
.jck-core .k { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle, #bff6fc, #1fd0e6); margin: 0 auto 7px; box-shadow: 0 0 20px rgba(26, 214, 232, .9); animation: jckpulse 2.8s ease-in-out infinite; }
.jck-core .nm { color: #fff; font-size: 18px; font-weight: 800; text-align: center; }
.jck-core .op { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 5px; font-size: 10.5px; color: #bfeede; }
.jck-core .op i { width: 7px; height: 7px; border-radius: 50%; background: #2fe08a; box-shadow: 0 0 8px #2fe08a; }
.jck-core .label { position: relative; z-index: 2; }
.jck-tile { position: absolute; width: 190px; background: #fff; border: 1px solid #eaf0f7; border-radius: 16px; padding: 13px 14px; box-shadow: 0 10px 24px rgba(18, 38, 63, .10); cursor: pointer; transition: transform .2s, box-shadow .2s; z-index: 4; text-align: left; }
.jck-tile:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(18, 38, 63, .16); }
.jck-tile .ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 7px; }
.jck-tile .ic svg { width: 20px; height: 20px; }
.jck-tile h4 { font-size: 15px; color: var(--nc-navy); margin: 0 0 2px; }
.jck-tile p { font-size: 12px; color: var(--nc-muted); margin: 0; line-height: 1.35; }
.jck-stage.perso .jck-tile { cursor: default; outline: 1.5px dashed rgba(25, 211, 230, .55); outline-offset: 2px; }
.jck-stage.perso .jck-tile:hover { transform: none; }
.jck-tile.dim { opacity: .42; }
.jck-tctrl { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; }
.jck-tctrl button { width: 23px; height: 23px; border: 0; border-radius: 7px; background: rgba(20, 40, 60, .09); color: var(--nc-navy); cursor: pointer; font-size: 11px; line-height: 1; display: grid; place-items: center; padding: 0; }
.jck-tctrl button:hover { background: rgba(25, 211, 230, .22); }
.btn.ghost.on { background: var(--nc-primary); color: #fff; border-color: var(--nc-primary); }
.jck-tile.disc { background: #fafcfe; border-style: dashed; border-color: #d9e2ee; box-shadow: 0 6px 16px rgba(18, 38, 63, .06); }
.jck-tile.disc h4, .jck-tile.disc p { opacity: .82; }
.jck-disc { position: absolute; top: 9px; right: 10px; font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--nc-primary); background: rgba(25, 211, 230, .12); border-radius: 100px; padding: 2px 8px; }
.jck-qa { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.jck-qabtn { display: flex; align-items: center; gap: 8px; border: 1px solid var(--nc-border); border-radius: 12px; padding: 10px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--nc-navy); background: #fff; text-align: left; transition: .15s; }
.jck-qabtn:hover { border-color: var(--nc-primary); background: #f3fcfd; }
.jck-qabtn .e { font-size: 16px; line-height: 1; }

/* ===== Cockpit : sidebar rétractable + topbar + widgets ajustables ===== */
.jckx-page { margin: -26px; padding: 22px; min-height: calc(100vh - 58px); background: var(--nc-bg); }
.jckx-shell { display: flex; gap: 18px; align-items: stretch; min-height: calc(100vh - 104px); }
.jckx-nav { flex: 0 0 234px; width: 234px; background: linear-gradient(180deg, #0d2440, #091627); border-radius: 18px; padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; overflow: hidden; transition: flex-basis .22s, width .22s; min-height: 560px; }
.jckx-shell.collapsed .jckx-nav { flex: 0 0 64px; width: 64px; }
.jckx-brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 16px; color: #fff; }
.jckx-brand .mk { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle, #16e6f4, #0c9fc0 55%, #0a3a52); box-shadow: 0 0 14px rgba(25, 211, 230, .55); flex: 0 0 auto; }
.jckx-brand .nm { font-size: 18px; font-weight: 800; white-space: nowrap; }
.jckx-shell.collapsed .jckx-brand .nm { display: none; }
.jckx-collapse { margin-left: auto; background: rgba(255, 255, 255, .09); border: 0; color: #cfe0ee; width: 27px; height: 27px; border-radius: 8px; cursor: pointer; font-size: 13px; flex: 0 0 auto; }
.jckx-collapse:hover { background: rgba(255, 255, 255, .18); }
.jckx-shell.collapsed .jckx-brand { justify-content: center; padding: 4px 0 12px; }
.jckx-shell.collapsed .jckx-collapse { margin: 0 auto; width: 42px; height: 42px; font-size: 19px; background: linear-gradient(135deg, #17c4dc, #1391bf); color: #fff; box-shadow: 0 6px 16px rgba(23, 196, 220, .42); }
.jckx-navlist { display: flex; flex-direction: column; gap: 3px; }
.jckx-navlist a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px; color: #aebccf; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: .15s; }
.jckx-navlist a .i { display: grid; place-items: center; flex: 0 0 auto; }
.jckx-navlist a svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.jckx-navlist a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.jckx-navlist a.active { background: linear-gradient(135deg, #17c4dc, #1391bf); color: #fff; box-shadow: 0 8px 20px rgba(23, 196, 220, .35); }
.jckx-shell.collapsed .jckx-navlist a .lbl { display: none; }
.jckx-shell.collapsed .jckx-navlist a { justify-content: center; padding: 10px 0; }
.jckx-assist { margin-top: auto; background: linear-gradient(160deg, rgba(25, 211, 230, .16), rgba(25, 211, 230, .04)); border: 1px solid rgba(25, 211, 230, .25); border-radius: 14px; padding: 13px; }
.jckx-assist .ai { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle, #1ce6f4, #0b7e9c); box-shadow: 0 0 16px rgba(25, 211, 230, .6); margin-bottom: 8px; }
.jckx-assist h5 { color: #fff; font-size: 13px; margin: 0 0 2px; }
.jckx-assist p { color: #9fb2c8; font-size: 11.5px; line-height: 1.4; margin: 0; }
.jckx-shell.collapsed .jckx-assist { display: none; }
.jckx-main { flex: 1; min-width: 0; }
.jckx-top { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--nc-border); border-radius: 16px; padding: 8px 12px; box-shadow: var(--nc-shadow); margin-bottom: 16px; }
.jckx-tab { padding: 8px 15px; border-radius: 11px; font-size: 13.5px; font-weight: 700; color: var(--nc-muted); }
.jckx-tab.active { background: linear-gradient(135deg, #17c4dc, #1391bf); color: #fff; }
.jckx-sp { flex: 1; }
.jckx-panel { position: relative; }
.jckx-phead { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.jckx-phead h3 { font-size: 15px; margin: 0; flex: 1; color: var(--nc-navy); }
.jckx-grip { cursor: grab; color: #c2ccd9; font-size: 14px; }
.jckx-px { width: 22px; height: 22px; border: 0; border-radius: 7px; background: #f1f4f9; color: #9aa6b6; cursor: pointer; opacity: 0; transition: .15s; }
.jckx-panel:hover .jckx-px { opacity: 1; }
.jckx-px:hover { background: #ffe2e2; color: #e8467a; }
.jckx-panel.drag { opacity: .4; }
.jckx-panel.over { outline: 2px dashed var(--nc-primary); outline-offset: 3px; }
.jckx-ov { position: fixed; inset: 0; background: rgba(10, 20, 35, .5); display: none; place-items: center; z-index: 1000; padding: 24px; }
.jckx-ov.show { display: grid; }
.jckx-lib { background: #fff; border-radius: 18px; width: 620px; max-width: 100%; max-height: 84vh; overflow: auto; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); position: relative; }
.jckx-lib-h { position: sticky; top: 0; background: #fff; padding: 18px 22px 12px; border-bottom: 1px solid var(--nc-border); }
.jckx-lib-h h3 { margin: 0; font-size: 18px; }
.jckx-lib-h p { margin: 3px 0 0; font-size: 13px; color: var(--nc-muted); }
.jckx-libx { position: absolute; top: 16px; right: 18px; border: 0; background: #f1f4f9; width: 32px; height: 32px; border-radius: 9px; cursor: pointer; font-size: 15px; color: #5a6b80; }
.jckx-lib-b { padding: 16px 22px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.jckx-lc { display: flex; align-items: center; gap: 11px; border: 1px solid var(--nc-border); border-radius: 13px; padding: 12px; }
.jckx-lc .lt { flex: 1; min-width: 0; }
.jckx-lc .lt b { display: block; font-size: 13.5px; }
.jckx-lc .lt span { font-size: 12px; color: var(--nc-muted); }
.jckx-lc .add { border: 0; background: rgba(25, 211, 230, .14); color: var(--nc-primary); font-weight: 700; border-radius: 9px; padding: 7px 12px; cursor: pointer; font-size: 13px; }
.jckx-lc .add.in { background: #eef2f7; color: #9aa6b6; cursor: default; }
.jckx-tk { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13.5px; cursor: pointer; }
.jckx-tk .bx { width: 18px; height: 18px; border-radius: 6px; border: 2px solid #cfd9e6; flex: 0 0 auto; display: grid; place-items: center; }
.jckx-tk.done .bx { background: #1faa5a; border-color: #1faa5a; }
.jckx-tk.done .bx::after { content: "✓"; color: #fff; font-size: 11px; font-weight: 700; }
.jckx-tk.done span { text-decoration: line-through; color: var(--nc-muted); }
.jckx-ai-log { background: #f5f8fc; border-radius: 11px; padding: 11px; font-size: 13px; line-height: 1.5; color: var(--nc-navy); min-height: 48px; margin-bottom: 9px; }
.jckx-ai-in { display: flex; gap: 7px; }
.jckx-ai-in input { flex: 1; border: 1px solid var(--nc-border); border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 13px; }
.jckx-ai-in button { border: 0; background: linear-gradient(135deg, #17c4dc, #1391bf); color: #fff; border-radius: 9px; padding: 0 13px; font-weight: 700; cursor: pointer; }
@media (max-width: 980px) { .jckx-nav { display: none; } }

/* ===== JoomStore : GALAXIE des métiers (fidèle à la maquette) ===== */
.jgal { position: relative; overflow: hidden; background: radial-gradient(1200px 800px at 50% 42%, #0e2138 0%, #0a1526 45%, #060a14 100%); padding: 6px 0 22px; min-height: 100vh; display: flex; flex-direction: column; }
.jgal-tools { position: absolute; top: 14px; right: 18px; z-index: 8; display: flex; gap: 8px; }
.jgal-tool { width: 38px; height: 38px; border-radius: 11px; border: 1px solid rgba(140,170,210,.25); background: rgba(255,255,255,.06); color: #cfe0f5; cursor: pointer; font-size: 16px; display: grid; place-items: center; backdrop-filter: blur(4px); }
.jgal-tool:hover { border-color: #1ad6e8; background: rgba(26,214,232,.14); }
.jgal .stars { position: absolute; inset: 0; z-index: 0; }
.jgal .star { position: absolute; background: #bfe9ff; border-radius: 50%; opacity: .5; animation: gtw 3s ease-in-out infinite; }
@keyframes gtw { 0%, 100% { opacity: .2; } 50% { opacity: .9; } }
.jgal .chips { position: relative; z-index: 5; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 16px 24px 6px; }
.jgal .chip { border: 1px solid rgba(140, 170, 210, .25); background: rgba(255, 255, 255, .03); color: #cfe0f5; border-radius: 100px; padding: 7px 15px; font-size: 13px; font-weight: 600; cursor: pointer; transition: .2s; display: inline-flex; align-items: center; }
.jgal .chip:hover { border-color: #1ad6e8; color: #fff; }
.jgal .chip .cdot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 8px; }
.jgal .chip.on { background: linear-gradient(135deg, #17c4dc, #1391bf); border-color: transparent; color: #fff; box-shadow: 0 6px 18px rgba(23, 196, 220, .4); }
.jgal .actcount { font-size: 12.5px; color: #9fb2c8; display: inline-flex; align-items: center; gap: 7px; margin-left: 4px; }
.jgal .actcount i { width: 8px; height: 8px; border-radius: 50%; background: #2fe08a; box-shadow: 0 0 8px #2fe08a; display: inline-block; }
.jgal .stage { position: relative; z-index: 2; width: 100%; max-width: 1320px; margin: auto; aspect-ratio: 1300/720; }
.jgal .lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.jgal .l-flow { stroke: url(#jgal-lg); stroke-width: 2.2; fill: none; stroke-dasharray: 3 10; filter: url(#jgal-glow); animation: gflow 1.5s linear infinite; }
.jgal .l-base { stroke: rgba(26, 160, 200, .16); stroke-width: 2; fill: none; }
@keyframes gflow { to { stroke-dashoffset: -30; } }
.jgal .orbit { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgba(26, 214, 232, .10); transform: translate(-50%, -50%); z-index: 1; }
.jgal .core { --ac: #1ad6e8; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 210px; height: 210px; border-radius: 50%; z-index: 4; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #16466e, #0b2742 60%, #071a2e); box-shadow: 0 0 90px rgba(26, 180, 220, .5), 0 0 30px rgba(26, 214, 232, .6) inset; transition: box-shadow .6s ease; }
.jgal .core::before, .jgal .core::after { content: ""; position: absolute; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--ac) 55%, transparent); transition: border-color .6s ease; }
.jgal .core::before { inset: 34px; animation: gring 3.6s ease-in-out infinite; }
.jgal .core::after { inset: 62px; border-color: color-mix(in srgb, var(--ac) 90%, transparent); box-shadow: 0 0 26px color-mix(in srgb, var(--ac) 80%, transparent), 0 0 26px color-mix(in srgb, var(--ac) 45%, transparent) inset; animation: gring 3.6s ease-in-out infinite .4s; }
@keyframes gring { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
.jgal .core .k { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle, #dffbff, var(--ac)); margin: 0 auto 9px; box-shadow: 0 0 26px color-mix(in srgb, var(--ac) 88%, transparent); animation: gpulse 2.8s ease-in-out infinite; }
@keyframes gpulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.14); opacity: .82; } }
.jgal .core .nm { text-align: center; font-size: 23px; font-weight: 800; color: #fff; }
.jgal .core .op { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; font-size: 11px; color: #bfeede; }
.jgal .core .op .d { width: 7px; height: 7px; border-radius: 50%; background: #2fe08a; box-shadow: 0 0 8px #2fe08a; }
.jgal .core .lab { position: relative; z-index: 2; }
.jgal .node { position: absolute; z-index: 3; width: 138px; margin-left: -69px; margin-top: -58px; text-align: center; cursor: pointer; transition: transform .25s; animation: gfloat 6s ease-in-out infinite; }
.jgal .node:hover { transform: translateY(-6px); z-index: 9; }
@keyframes gfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.jgal .node .orb { width: 74px; height: 74px; border-radius: 22px; margin: 0 auto; display: grid; place-items: center; position: relative; background: rgba(255, 255, 255, .06); border: 1px solid rgba(170, 200, 235, .18); backdrop-filter: blur(4px); transition: .25s; }
.jgal .node .orb svg { width: 32px; height: 32px; stroke-width: 1.8; fill: none; }
.jgal .node:hover .orb { transform: scale(1.06); border-color: rgba(26, 214, 232, .6); }
.jgal .node h3 { font-size: 14px; font-weight: 700; margin-top: 9px; color: #eaf3ff; }
.jgal .node .st { font-size: 11.5px; color: #8aa0bb; margin-top: 1px; }
.jgal .node .st.act { color: #2fe08a; font-weight: 700; }
.jgal .node.owned .orb { box-shadow: 0 0 26px rgba(26, 214, 232, .35); }
.jgal .node.dim { opacity: .32; filter: grayscale(.3); }
.jgal .g-blue .orb { box-shadow: 0 0 24px rgba(47, 123, 246, .45); } .jgal .g-blue .orb svg { stroke: #7fb0ff; }
.jgal .g-teal .orb { box-shadow: 0 0 24px rgba(11, 180, 199, .5); } .jgal .g-teal .orb svg { stroke: #56e6f2; }
.jgal .g-pink .orb { box-shadow: 0 0 24px rgba(236, 72, 153, .45); } .jgal .g-pink .orb svg { stroke: #ff90c0; }
.jgal .g-purple .orb { box-shadow: 0 0 24px rgba(139, 92, 246, .45); } .jgal .g-purple .orb svg { stroke: #bda4ff; }
.jgal .g-green .orb { box-shadow: 0 0 24px rgba(31, 170, 90, .45); } .jgal .g-green .orb svg { stroke: #73e6a4; }
.jgal .g-orange .orb { box-shadow: 0 0 24px rgba(245, 158, 11, .45); } .jgal .g-orange .orb svg { stroke: #ffc35a; }
.jgal .g-red .orb { box-shadow: 0 0 24px rgba(232, 70, 122, .45); } .jgal .g-red .orb svg { stroke: #ff8aa6; }
/* Grandes cartes (zoom d'une constellation) */
.jgal .node.big { width: 300px; margin-left: -150px; margin-top: -168px; text-align: left; animation: none; background: rgba(11, 24, 42, .84); border: 1px solid rgba(120, 160, 210, .22); border-radius: 22px; padding: 18px 20px; backdrop-filter: blur(10px); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.jgal .node.big:hover { transform: translateY(-12px); z-index: 30; box-shadow: 0 30px 70px rgba(0, 0, 0, .6), 0 0 28px rgba(26, 214, 232, .25); }
.jgal .node.big .orb { width: 54px; height: 54px; border-radius: 15px; margin: 0 0 11px; }
.jgal .node.big .orb svg { width: 26px; height: 26px; }
.jgal .node.big h3 { font-size: 18px; margin: 0; color: #eaf3ff; }
.jgal .node.big .cat { font-size: 11px; color: #56e6f2; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-top: 3px; }
.jgal .node.big .bdesc { font-size: 13px; color: #aebfd6; line-height: 1.5; margin: 10px 0; }
.jgal .node.big .feat { list-style: none; margin: 6px 0 4px; padding: 0; }
.jgal .node.big .feat li { font-size: 12.5px; color: #c8d6ea; padding: 3px 0 3px 19px; position: relative; }
.jgal .node.big .feat li::before { content: "✦"; position: absolute; left: 0; color: #1ad6e8; }
.jgal .node.big .bpr { font-size: 19px; font-weight: 800; color: #fff; margin: 11px 0 13px; }
.jgal .node.big .bact { display: flex; gap: 8px; }
.jgal .mini { border: none; border-radius: 11px; padding: 9px 16px; font-size: 13px; font-weight: 700; cursor: pointer; }
.jgal .mini.primary { background: linear-gradient(135deg, #17c4dc, #1391bf); color: #fff; box-shadow: 0 6px 16px rgba(23, 196, 220, .4); }
.jgal .mini.off { background: rgba(232, 70, 122, .16); color: #ff8aa6; border: 1px solid rgba(232, 70, 122, .4); }
/* Tiroir bas (fiche avant Stripe) */
.jgal-drawer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; transform: translateY(110%); transition: transform .35s cubic-bezier(.2, .8, .2, 1); background: linear-gradient(180deg, rgba(11, 24, 40, .98), rgba(7, 15, 26, .99)); border-top: 1px solid rgba(26, 214, 232, .3); border-radius: 24px 24px 0 0; box-shadow: 0 -20px 60px rgba(0, 0, 0, .55); padding: 22px 30px 24px; }
.jgal-drawer.show { transform: translateY(0); }
.jgal-drawer .dw { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.jgal-drawer .big { width: 66px; height: 66px; border-radius: 18px; display: grid; place-items: center; flex: 0 0 auto; background: rgba(255, 255, 255, .06); border: 1px solid rgba(170, 200, 235, .18); }
.jgal-drawer .big svg { width: 32px; height: 32px; stroke-width: 1.8; fill: none; }
.jgal-drawer .dt { flex: 1; min-width: 220px; }
.jgal-drawer .dt .c { font-size: 12px; color: #56e6f2; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.jgal-drawer .dt h2 { font-size: 23px; margin: 2px 0 4px; color: #fff; }
.jgal-drawer .dt p { font-size: 14px; color: #8aa0bb; line-height: 1.5; max-width: 560px; }
.jgal-drawer .act { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.jgal-drawer .pr { font-size: 22px; font-weight: 800; color: #fff; margin-right: 6px; }
.jgal-btn { border: none; border-radius: 13px; padding: 13px 22px; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.jgal-btn.primary { background: linear-gradient(135deg, #17c4dc, #1391bf); color: #fff; box-shadow: 0 8px 22px rgba(23, 196, 220, .45); }
.jgal-btn.ghost { background: rgba(255, 255, 255, .07); color: #cfe0f5; border: 1px solid rgba(140, 170, 210, .25); }
.jgal-btn.off { background: rgba(232, 70, 122, .16); color: #ff8aa6; border: 1px solid rgba(232, 70, 122, .4); }
.jgal-btn.close { background: rgba(255, 255, 255, .07); color: #cfe0f5; padding: 13px 16px; }
/* Hyperespace (warp) */
.jgal-warp { position: fixed; inset: 0; z-index: 1500; pointer-events: none; overflow: hidden; }
.jgal-warp::before { content: ""; position: absolute; left: 50%; top: 46%; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, rgba(180, 240, 255, .7) 35%, rgba(120, 210, 255, 0) 70%); transform: translate(-50%, -50%) scale(0); animation: jgwflash .62s ease-out forwards; }
@keyframes jgwflash { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0); } 18% { opacity: .95; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(30); } }
.jgal-warp i { position: absolute; left: 50%; top: 46%; width: 2.4px; height: 9vh; background: linear-gradient(to bottom, #d6f3ff, rgba(180, 240, 255, 0)); transform-origin: top center; transform: rotate(var(--a)) translateY(0) scaleY(.2); animation: jgwstreak .55s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes jgwstreak { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(62vh) scaleY(2.6); } }
/* Comètes */
.jgal .jgal-shoot { position: absolute; width: 3px; height: 3px; background: #dff2ff; border-radius: 50%; box-shadow: 0 0 8px #cfefff; animation: jgshoot 1.1s ease-out forwards; z-index: 1; }
.jgal .jgal-shoot::after { content: ""; position: absolute; right: 2px; top: 50%; width: 90px; height: 1.4px; background: linear-gradient(90deg, rgba(207, 239, 255, 0), #cfefff); transform: translateY(-50%); }
@keyframes jgshoot { 0% { opacity: 0; transform: translate(0, 0); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(220px, 150px); } }
@media (max-width: 760px) { .jgal .stage { aspect-ratio: 1/1.05; } .jgal .core { width: 150px; height: 150px; } .jgal .node.big { width: 240px; margin-left: -120px; } }
.jckflow { stroke: url(#jcklg); stroke-width: 2; fill: none; stroke-dasharray: 3 9; filter: url(#jckglow); animation: jckflow 1.4s linear infinite; }
.jckbase { stroke: rgba(25, 160, 200, .18); stroke-width: 2; fill: none; }
.jck-side { display: flex; flex-direction: column; gap: 16px; }
.jck-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f1f4f9; }
.jck-row:last-child { border-bottom: 0; padding-bottom: 0; }
.jck-row.link { cursor: pointer; }
.jck-row.link:hover .jck-rt b { color: var(--nc-primary); }
.jck-rt { flex: 1; } .jck-rt b { display: block; font-size: 14px; color: var(--nc-navy); }
.jck-rt span { font-size: 19px; font-weight: 800; color: var(--nc-navy); }
.jck-bottom { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; background: #fff; border: 1px solid var(--nc-border); border-radius: 16px; padding: 16px 22px; box-shadow: var(--nc-shadow); margin-top: 18px; }
.jck-wdg b { display: block; font-size: 13px; color: var(--nc-navy); } .jck-wdg span { font-size: 12px; color: var(--nc-muted); }
@keyframes jckring { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes jckpulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: .82; } }
@keyframes jckflow { to { stroke-dashoffset: -26; } }
@media (max-width: 1100px) { .jck-wrap { grid-template-columns: 1fr; } .jck-stage { height: 520px; } }

/* ===== Cockpit : CLONE FIDÈLE de la maquette (système de widgets) ===== */
.jck2-page { margin: -26px; background: #dfe5ee; min-height: calc(100vh - 58px); }
.jck2 { --cyan: #19d3e6; --ink: #1d2b3a; --muted: #7c8aa0; --bg: #f4f6fa; --card: #fff; --bd: #e9eef5; --shadow: 0 10px 30px rgba(18,38,63,.07); display: flex; min-height: calc(100vh - 58px); max-width: 1480px; margin: 0 auto; background: var(--bg); color: var(--ink); font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.jck2 svg { stroke-linecap: round; stroke-linejoin: round; }
.jck2 .side { width: 248px; flex: 0 0 248px; background: linear-gradient(180deg,#0d2440,#091627); color: #cdd9ea; display: flex; flex-direction: column; padding: 22px 16px; }
.jck2 .brand { display: flex; align-items: center; gap: 11px; padding: 6px 10px 26px; }
.jck2 .brand .mark { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle,#16e6f4,#0c9fc0 55%,#0a3a52); position: relative; box-shadow: 0 0 16px rgba(25,211,230,.6); }
.jck2 .brand .mark::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: #0a1830; box-shadow: 0 0 0 3px rgba(255,255,255,.18) inset; }
.jck2 .brand .name { font-size: 21px; font-weight: 700; color: #fff; }
.jck2 .nav { display: flex; flex-direction: column; gap: 4px; }
.jck2 .nav a { display: flex; align-items: center; gap: 13px; padding: 11px 14px; border-radius: 13px; color: #aebccf; text-decoration: none; font-size: 14.5px; font-weight: 500; transition: .2s; }
.jck2 .nav a svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.9; flex: 0 0 auto; }
.jck2 .nav a .badge { margin-left: auto; background: #ff3b6b; color: #fff; font-size: 11px; font-weight: 700; border-radius: 100px; padding: 1px 7px; }
.jck2 .nav a:hover { background: rgba(255,255,255,.07); color: #fff; transform: translateX(2px); }
.jck2 .nav a.active { background: linear-gradient(135deg,#17c4dc,#1391bf); color: #fff; box-shadow: 0 8px 20px rgba(23,196,220,.4); }
.jck2 .assist { margin-top: auto; background: linear-gradient(160deg,rgba(25,211,230,.16),rgba(25,211,230,.04)); border: 1px solid rgba(25,211,230,.25); border-radius: 16px; padding: 15px; }
.jck2 .assist .ai { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle,#1ce6f4,#0b7e9c); box-shadow: 0 0 18px rgba(25,211,230,.7); margin-bottom: 9px; animation: jck2pulse 2.6s ease-in-out infinite; }
.jck2 .assist h4 { color: #fff; font-size: 14px; margin-bottom: 3px; }
.jck2 .assist p { color: #9fb2c8; font-size: 12px; line-height: 1.45; }
.jck2 .assist .stat { display: flex; align-items: center; gap: 7px; margin-top: 11px; font-size: 12px; color: #bfe9f0; }
.jck2 .assist .dot { width: 8px; height: 8px; border-radius: 50%; background: #2fe08a; box-shadow: 0 0 8px #2fe08a; }
.jck2 .content { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 16px 24px 18px; }
.jck2 .topbar { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--bd); border-radius: 18px; padding: 9px 14px; box-shadow: var(--shadow); margin-bottom: 16px; }
.jck2 .tab { padding: 9px 16px; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; border: none; background: none; display: flex; align-items: center; gap: 7px; transition: .2s; }
.jck2 .tab:hover { background: #f1f5fa; color: var(--ink); }
.jck2 .tab.active { background: linear-gradient(135deg,#17c4dc,#1391bf); color: #fff; box-shadow: 0 6px 16px rgba(23,196,220,.34); }
.jck2 .tab .pill { background: #ff3b6b; color: #fff; font-size: 11px; font-weight: 700; border-radius: 100px; padding: 1px 7px; }
.jck2 .topbar .sp { flex: 1; }
.jck2 .addw { display: flex; align-items: center; gap: 7px; border: none; background: linear-gradient(135deg,#17c4dc,#1391bf); color: #fff; font-weight: 600; font-size: 13.5px; padding: 10px 15px; border-radius: 12px; cursor: pointer; box-shadow: 0 6px 16px rgba(23,196,220,.34); }
.jck2 .addw svg { width: 17px; height: 17px; stroke: #fff; fill: none; stroke-width: 2.2; }
.jck2 .ic-btn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--bd); background: #fff; display: grid; place-items: center; cursor: pointer; color: #5a6b80; }
.jck2 .ic-btn:hover { background: #f1f5fa; }
.jck2 .ic-btn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.jck2 .avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg,#2f7bf6,#1baedf); color: #fff; font-weight: 700; font-size: 14px; display: grid; place-items: center; }
.jck2 .board { display: grid; grid-template-columns: minmax(0,1fr) 322px; gap: 20px; align-items: start; }
.jck2 .cockpit { position: relative; height: 724px; background: radial-gradient(circle at 50% 50%,#fff,#eef2f8 70%); border-radius: 24px; border: 1px solid var(--bd); box-shadow: var(--shadow); overflow: hidden; }
.jck2 .links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.jck2 .flowline { stroke: url(#jck2-lg); stroke-width: 2; fill: none; stroke-dasharray: 3 9; filter: url(#jck2-glow); animation: jck2flow 1.4s linear infinite; }
.jck2 .flowbase { stroke: rgba(25,160,200,.18); stroke-width: 2; fill: none; }
.jck2 .core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 188px; height: 188px; border-radius: 50%; background: radial-gradient(circle at 50% 42%,#103a5e,#0a2138 60%,#081a2e); display: grid; place-items: center; z-index: 3; box-shadow: 0 0 60px rgba(25,150,200,.45),0 18px 40px rgba(8,26,46,.4); }
.jck2 .core::before, .jck2 .core::after { content: ""; position: absolute; border-radius: 50%; border: 2px solid rgba(25,211,230,.55); }
.jck2 .core::before { inset: 30px; animation: jck2ring 3.4s ease-in-out infinite; }
.jck2 .core::after { inset: 54px; border-color: rgba(25,211,230,.85); box-shadow: 0 0 24px rgba(25,211,230,.8),0 0 24px rgba(25,211,230,.5) inset; animation: jck2ring 3.4s ease-in-out infinite .4s; }
.jck2 .core .knob { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle,#bff6fc,#1fd0e6); margin: 0 auto 8px; box-shadow: 0 0 22px rgba(25,211,230,.9); }
.jck2 .core .nm { color: #fff; font-size: 21px; font-weight: 700; text-align: center; }
.jck2 .core .op { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 7px; font-size: 11px; color: #bfeede; }
.jck2 .core .op .d { width: 7px; height: 7px; border-radius: 50%; background: #2fe08a; box-shadow: 0 0 8px #2fe08a; }
.jck2 .core .label { position: relative; z-index: 2; }
.jck2 .halo { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 340px; height: 340px; border-radius: 50%; z-index: 2; border: 1px solid rgba(25,211,230,.18); }
.jck2 .halo.h2 { width: 470px; height: 470px; border-color: rgba(25,211,230,.1); }
.jck2 .mod { position: absolute; z-index: 4; width: 202px; background: rgba(255,255,255,.93); border: 1px solid #eaf0f7; border-radius: 18px; padding: 13px 15px; box-shadow: 0 12px 28px rgba(18,38,63,.10); transition: transform .22s,box-shadow .22s; }
.jck2 .mod:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(18,38,63,.16); }
.jck2 .mod .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 7px; }
.jck2 .mod .ic svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.jck2 .mod h3 { font-size: 15.5px; color: var(--ink); margin-bottom: 2px; }
.jck2 .mod p { font-size: 12px; color: var(--muted); line-height: 1.35; min-height: 30px; }
.jck2 .mod .ct { display: inline-block; margin-top: 9px; font-size: 11.5px; font-weight: 700; padding: 3px 11px; border-radius: 100px; }
.jck2 .mod .x { position: absolute; top: 9px; right: 10px; width: 22px; height: 22px; border-radius: 7px; border: none; background: #f1f4f9; color: #9aa6b6; cursor: pointer; font-size: 14px; line-height: 1; opacity: 0; transition: .15s; }
.jck2 .mod:hover .x { opacity: 1; }
.jck2 .mod .x:hover { background: #ffe2e2; color: #e8467a; }
/* Pastilles d'état LIVE sur les tuiles du cockpit */
.jck2 .mod .sdot { position: absolute; top: 13px; left: 13px; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255,255,255,.95); z-index: 5; }
.jck2 .mod .sdot.lv-ok { background: #22c55e; }
.jck2 .mod .sdot.lv-attention { background: #f59e0b; }
.jck2 .mod .sdot.lv-urgent { background: #ef4444; animation: sdotpulse 1.7s infinite; }
@keyframes sdotpulse { 0%,100% { box-shadow: 0 0 0 3px rgba(255,255,255,.95), 0 0 0 4px rgba(239,68,68,.4); } 50% { box-shadow: 0 0 0 3px rgba(255,255,255,.95), 0 0 0 9px rgba(239,68,68,0); } }
.jck2 .mod .cbadge { position: absolute; top: 9px; left: 28px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 800; border-radius: 100px; padding: 1px 7px; z-index: 5; box-shadow: 0 2px 6px rgba(239,68,68,.4); }
.jck2 .mod .cbadge.lv-attention { background: #f59e0b; box-shadow: 0 2px 6px rgba(245,158,11,.4); }
.jck2 .mod .cbadge.lv-ok { display: none; }
.jck2 .c-blue { background: #e9f1ff; color: #2f7bf6; } .jck2 .c-orange { background: #fff1e0; color: #e8870f; } .jck2 .c-green { background: #e6f8ee; color: #1faa5a; }
.jck2 .c-red { background: #ffe9ef; color: #e8467a; } .jck2 .c-purple { background: #efeaff; color: #7a5cf0; } .jck2 .c-teal { background: #e0f7fa; color: #0bb4c7; }
.jck2 .c-slate { background: #eef2f7; color: #5a6b80; }
.jck2 .col { display: flex; flex-direction: column; gap: 18px; min-height: 40px; }
.jck2 .panel { background: #fff; border: 1px solid var(--bd); border-radius: 20px; padding: 16px 18px; box-shadow: var(--shadow); position: relative; }
.jck2 .panel.drag { opacity: .4; } .jck2 .panel.over { outline: 2px dashed var(--cyan); outline-offset: 3px; }
.jck2 .phead { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.jck2 .phead h4 { font-size: 15px; color: var(--ink); flex: 1; }
.jck2 .phead .grip { cursor: grab; color: #c2ccd9; font-size: 15px; }
.jck2 .phead .px { width: 22px; height: 22px; border-radius: 7px; border: none; background: #f1f4f9; color: #9aa6b6; cursor: pointer; opacity: 0; transition: .15s; }
.jck2 .panel:hover .px { opacity: 1; } .jck2 .phead .px:hover { background: #ffe2e2; color: #e8467a; }
.jck2 .row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f1f4f9; }
.jck2 .row:last-child { border-bottom: 0; padding-bottom: 0; }
.jck2 .row .ric { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; }
.jck2 .row .ric svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.jck2 .row .t { flex: 1; min-width: 0; } .jck2 .row .t b { display: block; font-size: 13.5px; color: var(--ink); } .jck2 .row .t span { font-size: 12px; color: var(--muted); }
.jck2 .row .go { font-size: 12px; font-weight: 700; border: 1px solid var(--bd); border-radius: 9px; padding: 5px 11px; color: #5a6b80; cursor: pointer; background: #fff; }
.jck2 .row .go:hover { background: #f1f5fa; } .jck2 .row .chev { color: #c2ccd9; font-size: 18px; cursor: pointer; }
.jck2 .tk { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 13.5px; cursor: pointer; }
.jck2 .tk .box { width: 19px; height: 19px; border-radius: 6px; border: 2px solid #cfd9e6; flex: 0 0 auto; display: grid; place-items: center; }
.jck2 .tk.done .box { background: #1faa5a; border-color: #1faa5a; } .jck2 .tk.done .box::after { content: "✓"; color: #fff; font-size: 12px; font-weight: 700; }
.jck2 .tk.done span { text-decoration: line-through; color: var(--muted); }
.jck2 .qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.jck2 .qa { display: flex; align-items: center; gap: 9px; border: 1px solid var(--bd); border-radius: 12px; padding: 10px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink); background: #fff; transition: .15s; }
.jck2 .qa:hover { border-color: var(--cyan); background: #f3fcfd; }
.jck2 .qa .qi { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto; } .jck2 .qa .qi svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.jck2 .stat-v { font-size: 30px; font-weight: 800; color: var(--ink); } .jck2 .stat-s { font-size: 12.5px; color: #1faa5a; font-weight: 600; }
.jck2 .ai-log { background: #f5f8fc; border-radius: 12px; padding: 12px; font-size: 13px; color: var(--ink); line-height: 1.5; min-height: 54px; margin-bottom: 10px; }
.jck2 .ai-in { display: flex; gap: 8px; } .jck2 .ai-in input { flex: 1; border: 1px solid var(--bd); border-radius: 10px; padding: 9px 11px; font: inherit; font-size: 13px; }
.jck2 .ai-in button { border: none; background: linear-gradient(135deg,#17c4dc,#1391bf); color: #fff; border-radius: 10px; padding: 0 14px; font-weight: 700; cursor: pointer; }
.jck2 .msg { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f1f4f9; cursor: pointer; }
.jck2 .msg:last-child { border-bottom: 0; }
.jck2 .msg .av { width: 32px; height: 32px; border-radius: 50%; background: #e9f1ff; color: #2f7bf6; font-weight: 700; font-size: 12px; display: grid; place-items: center; flex: 0 0 auto; }
.jck2 .msg .mt b { font-size: 13px; display: block; } .jck2 .msg .mt span { font-size: 12px; color: var(--muted); }
.jck2 .msg-reply { margin-top: 8px; display: none; gap: 8px; } .jck2 .msg-reply.show { display: flex; }
.jck2 .msg-reply input { flex: 1; border: 1px solid var(--bd); border-radius: 9px; padding: 8px; font: inherit; font-size: 12.5px; }
.jck2 .msg-reply button { border: none; background: var(--cyan); color: #04323a; font-weight: 700; border-radius: 9px; padding: 0 12px; cursor: pointer; }
.jck2 .bottombar { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; background: #fff; border: 1px solid var(--bd); border-radius: 20px; padding: 16px 22px; box-shadow: var(--shadow); margin-top: 16px; }
.jck2 .wdg { display: flex; align-items: center; gap: 13px; } .jck2 .wdg .wic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; } .jck2 .wdg .wic svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.jck2 .wdg b { display: block; font-size: 13px; } .jck2 .wdg span { font-size: 12px; color: var(--muted); }
.jck2-page .lib-ov { position: fixed; inset: 0; background: rgba(10,20,35,.5); display: none; place-items: center; z-index: 1000; padding: 24px; }
.jck2-page .lib-ov.show { display: grid; }
.jck2-page .lib { background: #fff; border-radius: 22px; width: 760px; max-width: 100%; max-height: 86vh; overflow: auto; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.jck2-page .lib-h { position: sticky; top: 0; background: #fff; padding: 20px 24px 14px; border-bottom: 1px solid var(--bd, #e9eef5); }
.jck2-page .lib-h h3 { font-size: 19px; color: #1d2b3a; } .jck2-page .lib-h p { font-size: 13px; color: #7c8aa0; margin-top: 3px; }
.jck2-page .lib-h .close { position: absolute; top: 18px; right: 20px; border: none; background: #f1f4f9; width: 34px; height: 34px; border-radius: 10px; cursor: pointer; font-size: 16px; color: #5a6b80; }
.jck2-page .lib-b { padding: 18px 24px 24px; }
.jck2-page .lib-cat { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #0bb4c7; margin: 16px 0 10px; }
.jck2-page .lib-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.jck2-page .lib-card { display: flex; align-items: center; gap: 12px; border: 1px solid #e9eef5; border-radius: 14px; padding: 13px; transition: .15s; }
.jck2-page .lib-card:hover { border-color: #19d3e6; box-shadow: 0 8px 20px rgba(18,38,63,.08); }
.jck2-page .lib-card .li { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto; } .jck2-page .lib-card .li svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.jck2-page .lib-card .lt { flex: 1; min-width: 0; } .jck2-page .lib-card .lt b { font-size: 13.5px; display: block; } .jck2-page .lib-card .lt span { font-size: 12px; color: #7c8aa0; }
.jck2-page .lib-card .add { border: none; background: #e0f7fa; color: #0bb4c7; font-weight: 700; border-radius: 9px; padding: 7px 12px; cursor: pointer; font-size: 13px; }
.jck2-page .lib-card .add.in { background: #eef2f7; color: #6b7787; cursor: pointer; transition: background .15s, color .15s; }
.jck2-page .lib-card .add.in:hover { background: #fdecea; color: #c0392b; }
/* Cockpit — zone du bas configurable : chips compactes + bulle ovale au survol */
.jck2 .bottombar { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.jck2 .bottombar .wdg { position: relative; flex: 1 1 auto; min-width: 150px; }
.jck2 .bottombar .wdg .wlbl b { font-size: 13px; }
.jck2 .bottombar .wdg .wtip { position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%) translateY(5px); background: #0e2240; color: #fff; font-size: 12.5px; font-weight: 600; padding: 7px 15px; border-radius: 999px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; box-shadow: 0 10px 26px rgba(0, 0, 0, .28); z-index: 40; }
.jck2 .bottombar .wdg:hover .wtip { opacity: 1; transform: translateX(-50%) translateY(0); }
.jck2 .bottombar .wdg .wtip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #0e2240; }
.jck2 .bottombar .wdg .wx { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border: 0; border-radius: 50%; background: #0e2240; color: #fff; font-size: 12px; line-height: 1; cursor: pointer; opacity: 0; transition: .15s; }
.jck2 .bottombar .wdg.wremovable:hover .wx { opacity: 1; }
.jck2 .bottombar .wdg.wclick { border-radius: 12px; padding: 6px 10px; margin: -6px -10px; transition: background .15s, transform .15s; }
.jck2 .bottombar .wdg.wclick:hover { background: #f1f6fb; transform: translateY(-1px); }
/* Modes Synthèse / Analyses (onglets du cockpit) */
.jck2-mode { margin-top: 2px; }
.jck2 .syn-head { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 16px; }
.jck2 .syn-head h2 { font-size: 22px; color: var(--ink); }
.jck2 .syn-head span { color: var(--muted); text-transform: capitalize; font-size: 14px; }
.jck2 .syn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; align-items: stretch; }
.jck2 .syn-card { background: #fff; border: 1px solid var(--bd); border-radius: 20px; padding: 20px 22px; box-shadow: var(--shadow); min-height: 200px; display: flex; flex-direction: column; }
.jck2 .syn-card h4 { font-size: 15px; color: var(--ink); margin-bottom: 12px; }
.jck2 .syn-card .pbody { flex: 1; }
.jck2 .ana-demo { background: #fff8e6; border: 1px solid #ffe3a3; color: #8a6400; font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 12px; margin-bottom: 16px; }
.jck2 .ana-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; align-items: stretch; }
.jck2 .ana-card { background: #fff; border: 1px solid var(--bd); border-radius: 20px; padding: 22px 24px; box-shadow: var(--shadow); }
.jck2 .ana-card h4 { font-size: 15px; color: var(--ink); margin-bottom: 14px; }
.jck2 .ana-wide { margin-bottom: 20px; }
.jck2 .ana-wide svg { width: 100%; max-height: 260px; display: block; }
.jck2 .ana-conv { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 240px; }
.jck2 .ana-conv svg { flex: 0 0 auto; }
.jck2 .ana-conv-sub { color: var(--muted); font-size: 13px; margin-top: 8px; }
.jck2 .ana-top { display: flex; flex-direction: column; gap: 11px; }
.jck2 .ana-top-row { display: flex; align-items: center; gap: 12px; }
.jck2 .ana-top-l { width: 150px; font-size: 13px; color: var(--ink); flex: 0 0 auto; }
.jck2 .ana-top-bar { flex: 1; height: 12px; background: #eef2f8; border-radius: 100px; overflow: hidden; }
.jck2 .ana-top-bar i { display: block; height: 100%; background: linear-gradient(90deg, #19c3d6, #7c5cff); border-radius: 100px; }
.jck2 .ana-top-v { width: 90px; text-align: right; font-size: 13px; font-weight: 700; color: var(--ink); flex: 0 0 auto; }
@media (max-width: 920px) { .jck2 .syn-grid, .jck2 .ana-grid { grid-template-columns: 1fr; } }
/* Agenda externe (connexion OAuth) */
.jck2 .agenda-connect { padding: 4px 2px; }
.jck2 .agenda-connect p { color: var(--muted); font-size: 13px; margin-bottom: 12px; }
.jck2 .agenda-connect .ag-btn { display: flex; align-items: center; gap: 9px; width: 100%; margin-bottom: 9px; padding: 11px 14px; border: 1px solid var(--bd); background: #fff; border-radius: 12px; font-size: 13.5px; font-weight: 700; color: var(--ink); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.jck2 .agenda-connect .ag-btn:hover { border-color: #19c3d6; box-shadow: 0 0 0 3px rgba(25, 195, 214, .12); }
.jck2 .agenda-connect .ag-soon { margin-top: 6px; background: #eef6ff; border: 1px solid #cfe3f7; color: #2563a8; font-size: 12.5px; font-weight: 600; padding: 9px 12px; border-radius: 10px; }
.jck2 .agenda-connect .ag-ical-toggle { background: none; border: 0; color: #1397a7; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 6px 2px; text-decoration: underline; }
.jck2 .ag-ical { margin-top: 10px; }
.jck2 .ag-ical label { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); margin-bottom: 5px; }
.jck2 .ag-ical-row { display: flex; gap: 8px; }
.jck2 .ag-ical-row input { flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid var(--bd); border-radius: 10px; font-size: 13px; }
.jck2 .ag-ical-row .ag-go { padding: 9px 14px; border: 0; border-radius: 10px; background: #19c3d6; color: #fff; font-weight: 700; cursor: pointer; }
.jck2 .ag-ical-row .ag-go:disabled { opacity: .6; }
.jck2 .ag-ical .ag-hint { color: var(--muted); font-size: 11.5px; margin-top: 7px; line-height: 1.4; }
.jck2 .ag-ical .ag-err { margin-top: 7px; background: #fdeaea; border: 1px solid #f5b9b9; color: #b3261e; font-size: 12.5px; font-weight: 600; padding: 8px 11px; border-radius: 10px; }
.jck2 .ag-disc { margin-top: 10px; background: none; border: 0; color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: underline; padding: 4px 2px; }
.jck2 .ag-disc:hover { color: #b3261e; }
.jck2 .ag-acts { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.jck2 .ag-newbtn { border: 0; border-radius: 10px; padding: 8px 13px; font-size: 12.5px; font-weight: 800; cursor: pointer; background: linear-gradient(90deg, #19c3d6, #12a9bd); color: #fff; box-shadow: 0 6px 14px rgba(25, 195, 214, .26); }
.jck2 .ag-newbtn:hover { transform: translateY(-1px); }
.jck2 .ag-new { display: flex; flex-direction: column; gap: 4px; padding: 2px; }
.jck2 .ag-new label { font-size: 12px; font-weight: 700; color: var(--ink); margin-top: 6px; }
.jck2 .ag-new .ag-f { padding: 8px 10px; border: 1px solid var(--bd); border-radius: 9px; font-size: 13px; }
.jck2 .ag-new-acts { display: flex; gap: 8px; margin-top: 12px; }
.jck2 .ag-new-acts .ag-go { flex: 1; border: 0; border-radius: 10px; padding: 9px; font-weight: 800; color: #fff; cursor: pointer; background: linear-gradient(90deg, #19c3d6, #12a9bd); }
.jck2 .ag-new-acts .ag-cancel { border: 1px solid var(--bd); background: #fff; border-radius: 10px; padding: 9px 14px; font-weight: 700; cursor: pointer; color: var(--muted); }
.jck2 .ag-new .ag-err { margin-top: 8px; background: #fdeaea; border: 1px solid #f5b9b9; color: #b3261e; font-size: 12.5px; font-weight: 600; padding: 8px 11px; border-radius: 10px; }
/* ===== Devis / Factures — saisie rapide des lignes ===== */
.ql-list { display: flex; flex-direction: column; gap: 8px; }
.ql-empty { color: #94a3b8; font-size: 13px; padding: 16px; text-align: center; border: 1.5px dashed #dbe3ec; border-radius: 12px; }
.ql-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid #e8edf5; border-radius: 12px; background: #fff; transition: border-color .12s, box-shadow .12s, transform .1s; }
.ql-row:hover { border-color: var(--accent, #16b3c7); box-shadow: 0 6px 16px rgba(18, 38, 63, .07); }
.ql-row.editing { border-color: var(--accent, #16b3c7); background: color-mix(in srgb, var(--accent, #16b3c7) 6%, #fff); }
.ql-row-main { flex: 1; min-width: 0; }
.ql-row-des { font-weight: 700; font-size: 14px; color: #16223e; }
.ql-row-sub { font-size: 12px; color: #7c8aa0; margin-top: 2px; }
.ql-row-tot { font-weight: 800; font-size: 14.5px; color: #16223e; white-space: nowrap; }
.ql-row-tot span { font-size: 11px; color: #94a3b8; font-weight: 600; }
.ql-row-x { flex: 0 0 auto; width: 26px; height: 26px; border: 0; border-radius: 8px; background: #f1f4f9; color: #9aa6b6; cursor: pointer; font-size: 13px; }
.ql-row-x:hover { background: #ffe2e2; color: #e8467a; }
.ql-form { margin-top: 12px; border: 1.5px solid var(--accent, #16b3c7); border-radius: 16px; padding: 16px; background: color-mix(in srgb, var(--accent, #16b3c7) 4%, #fff); }
.ql-grid { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; align-items: flex-start; }
.ql-fld { flex: 1; min-width: 130px; }
.ql-lbl { display: block; font-weight: 700; font-size: 11px; color: #94a3b8; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 4px; }
.ql-form-acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.ql-more { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.ql-mode { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ql-mode-lbl { font-size: 12.5px; font-weight: 700; color: #64748b; }
.ql-mode-btn { border: 1.5px solid #dbe3ec; background: #fff; color: #64748b; border-radius: 999px; padding: 5px 16px; font-size: 13px; font-weight: 800; cursor: pointer; transition: .12s; }
.ql-mode-btn.on { border-color: var(--accent, #16b3c7); background: var(--accent, #16b3c7); color: #fff; }
.ql-ac { position: absolute; z-index: 30; left: 0; right: 0; background: #fff; border: 1px solid #e7ecf4; border-radius: 10px; box-shadow: 0 8px 24px rgba(18, 38, 63, .14); overflow: hidden; }
.ql-ac-it { padding: 8px 12px; cursor: pointer; }
.ql-ac-it:hover { background: #f3f7fb; }
/* ===== Moyens de paiement — cartes à icône SVG ===== */
.solodoc-pm { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pm-card { display: flex; align-items: center; gap: 10px; border: 1.5px solid #e7ecf4; border-radius: 14px; padding: 11px 13px; font-size: 13.5px; font-weight: 700; color: #475569; cursor: pointer; background: #fff; transition: border-color .12s, background .12s, transform .1s; text-align: left; }
.pm-card:hover { border-color: var(--accent, #16b3c7); transform: translateY(-1px); }
.pm-card.on { border-color: var(--accent, #16b3c7); background: color-mix(in srgb, var(--accent, #16b3c7) 10%, #fff); color: #16223e; }
.pm-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent, #16b3c7) 12%, #fff); color: var(--accent, #16b3c7); flex: 0 0 auto; }
.pm-ic svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.pm-lbl { flex: 1; min-width: 0; }
.pm-check { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: var(--accent, #16b3c7); opacity: 0; transition: opacity .12s; flex: 0 0 auto; }
.pm-card.on .pm-check { opacity: 1; }
/* ===== Wizard devis/factures — barre d'action collante (le bouton Suivant n'est jamais coupé) ===== */
.wiz-nav { display: flex; gap: 8px; justify-content: space-between; align-items: center; margin-top: 16px; position: sticky; bottom: 0; background: #fff; padding: 12px 0 4px; z-index: 6; border-top: 1px solid #f1f4f9; }
/* En mode éditeur, l'aperçu document ne force plus une hauteur minimale (popup qui s'ajuste au contenu). */
.wiz-solo .solodoc-doc { min-height: 0; }
.jck2 .ana-empty { text-align: center; padding: 48px 20px; background: #fff; border: 1px solid var(--bd); border-radius: 18px; box-shadow: var(--shadow); }
.jck2 .ana-empty-ic { font-size: 34px; margin-bottom: 8px; }
.jck2 .ana-empty b { display: block; font-size: 16px; color: var(--ink); margin-bottom: 6px; }
.jck2 .ana-empty p { color: var(--muted); font-size: 13.5px; max-width: 420px; margin: 0 auto; line-height: 1.5; }
/* Comptes connectés (hub OAuth) */
.conn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.conn-card { background: var(--nc-surface, #fff); border: 1px solid var(--nc-border, #e7ecf4); border-radius: 16px; padding: 18px 18px 16px; box-shadow: 0 8px 22px rgba(18, 38, 63, .06); }
.conn-head { display: flex; align-items: center; gap: 12px; }
.conn-badge { width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 18px; flex: 0 0 auto; }
.conn-name { font-weight: 800; font-size: 16px; color: var(--nc-navy, #16223e); }
.conn-acct { font-size: 12.5px; color: var(--nc-muted, #66707d); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conn-svc { list-style: none; margin: 13px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.conn-svc li { position: relative; padding-left: 20px; font-size: 13px; color: #46566b; }
.conn-svc li::before { content: '✓'; position: absolute; left: 0; color: #16a34a; font-weight: 800; }
.conn-msg { margin-top: 12px; background: #eef6ff; border: 1px solid #cfe3f7; color: #2563a8; font-size: 12.5px; font-weight: 600; padding: 9px 12px; border-radius: 10px; }
/* Banque — onglets par compte (gestion Pro / Perso) */
.bk-acct-tabs { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; margin-top: 12px; }
.bk-acct-wrap { display: inline-flex; align-items: stretch; border: 1.5px solid var(--nc-border, #e7ecf4); border-radius: 13px; overflow: hidden; background: #fff; transition: border-color .12s, box-shadow .12s; }
.bk-acct-wrap.active { border-color: var(--accent, #16b3c7); box-shadow: 0 4px 14px rgba(22, 179, 199, .15); }
.bk-acct-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 9px 14px; background: transparent; border: 0; cursor: pointer; text-align: left; font: inherit; color: #475569; min-width: 92px; }
.bk-acct-tabs > .bk-acct-tab { border: 1.5px solid var(--nc-border, #e7ecf4); border-radius: 13px; background: #fff; transition: border-color .12s, box-shadow .12s; }
.bk-acct-tab:hover { background: #f6f9fd; }
.bk-acct-tab.active, .bk-acct-wrap.active .bk-acct-tab { color: #16223e; }
.bk-acct-tabs > .bk-acct-tab.active { border-color: var(--accent, #16b3c7); box-shadow: 0 4px 14px rgba(22, 179, 199, .15); }
.bk-acct-name { font-weight: 800; font-size: 13.5px; line-height: 1.2; }
.bk-acct-sub { font-size: 11.5px; color: var(--nc-muted, #7c8aa0); font-weight: 600; }
.bk-acct-edit { border: 0; background: transparent; color: var(--nc-muted, #9aa6b6); cursor: pointer; padding: 0 10px; font-size: 13px; border-left: 1px solid var(--nc-border, #eef2f7); }
.bk-acct-edit:hover { color: var(--accent, #16b3c7); background: #f6f9fd; }
/* Banque — justificatifs & pièces (import PDF/photo/capture) */
.bk-quota { display: flex; flex-direction: column; gap: 3px; min-width: 150px; }
.bk-quota-track { height: 6px; border-radius: 6px; background: #eef2f7; overflow: hidden; }
.bk-quota-fill { height: 100%; background: var(--accent, #16b3c7); border-radius: 6px; transition: width .2s; }
.bk-quota-fill.danger { background: #e67e22; }
.bk-quota-txt { font-size: 11px; color: var(--nc-muted, #7c8aa0); font-weight: 600; }
.bk-drop { margin-top: 12px; border: 2px dashed #d4ddea; border-radius: 14px; padding: 18px; display: flex; align-items: center; gap: 14px; color: #46566b; transition: border-color .12s, background .12s; }
.bk-drop.over { border-color: var(--accent, #16b3c7); background: color-mix(in srgb, var(--accent, #16b3c7) 7%, #fff); }
.bk-drop-ic { width: 40px; height: 40px; border-radius: 11px; background: #eef6ff; color: #2563a8; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; flex: 0 0 auto; }
.btn-link { background: none; border: 0; color: var(--accent, #16b3c7); font-weight: 700; cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }
.bk-pieces { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.bk-piece { display: flex; align-items: center; gap: 12px; padding: 9px 11px; border: 1px solid #e7ecf4; border-radius: 13px; background: #fff; }
.bk-piece-thumb { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; flex: 0 0 auto; border: 1px solid #e7ecf4; }
.bk-piece-ic { display: inline-flex; align-items: center; justify-content: center; background: #f1f5fb; color: #6b7a90; font-weight: 800; font-size: 12px; letter-spacing: .5px; }
.bk-dest { flex: 1; min-width: 130px; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; border: 1.5px solid #e7ecf4; border-radius: 12px; padding: 10px 12px; background: #fff; cursor: pointer; transition: border-color .12s, background .12s; }
.bk-dest:hover { border-color: var(--accent, #16b3c7); }
.bk-dest.on { border-color: var(--accent, #16b3c7); background: color-mix(in srgb, var(--accent, #16b3c7) 9%, #fff); }
.bk-dest.disabled { opacity: .5; cursor: not-allowed; }
.bk-f { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.bk-f-l { font-weight: 700; font-size: 12.5px; color: var(--nc-navy, #16223e); }
/* Travaux — barres d'avancement + panneau latéral */
.tv-bar { flex: 1; min-width: 80px; height: 8px; border-radius: 6px; background: #eef2f7; overflow: hidden; }
.tv-bar-fill { height: 100%; border-radius: 6px; transition: width .25s ease; }
@keyframes tvslide { from { transform: translateX(24px); opacity: .6; } to { transform: translateX(0); opacity: 1; } }
.tv-panel .btn.small, .bk-piece .btn.small, .pil-rel .btn.small { padding: 5px 10px; font-size: 12.5px; }
/* Pilotage — tableau de bord workflow */
.pil-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.pil-kpi { border: 1px solid var(--nc-border, #e7ecf4); border-radius: 14px; padding: 16px 18px; background: var(--nc-surface, #fff); }
.pil-kpi-v { font-size: 26px; font-weight: 800; line-height: 1.1; }
.pil-kpi-l { font-weight: 700; font-size: 13px; color: var(--nc-navy, #16223e); margin-top: 4px; }
.pil-kpi-s { color: var(--nc-muted, #7c8aa0); font-size: 12px; margin-top: 2px; }
.pil-rel { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--nc-border, #e7ecf4); border-radius: 12px; margin-bottom: 8px; }
.pil-rel:last-child { margin-bottom: 0; }
/* ===== Écran Abonnement — habillage premium cohérent ===== */
.sub-screen .card { border-radius: 18px; }
.sub-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #ffffff, #f6fbfd); border: 1px solid #e3eef2; box-shadow: 0 14px 36px rgba(18, 38, 63, .08); }
.sub-hero::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, #19c3d6, #7c5cff); }
.sub-detail .grid { width: 100%; border-collapse: separate; border-spacing: 0; }
.sub-detail .grid th { color: #8a98ab; font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; font-weight: 800; padding-bottom: 6px; }
.sub-detail .grid td { padding-top: 13px; padding-bottom: 13px; border-top: 1px solid #eef2f8; }
.addopt-btn { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; padding: 13px 20px; border: 1.5px dashed #19c3d6; background: linear-gradient(90deg, rgba(25, 195, 214, .08), rgba(124, 92, 255, .08)); color: #0e7c8b; border-radius: 14px; font-weight: 800; font-size: 14.5px; cursor: pointer; transition: background .15s, transform .12s, box-shadow .2s; }
.addopt-btn:hover { background: linear-gradient(90deg, rgba(25, 195, 214, .17), rgba(124, 92, 255, .17)); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(25, 195, 214, .2); }
.addopt-btn .nc-ic svg, .addopt-btn svg { width: 18px; height: 18px; }
.addopt-btn em { font-style: normal; font-weight: 600; font-size: 12.5px; color: #5aa6b3; }
.sub-pay { background: linear-gradient(180deg, #ffffff, #fafcfe); }
/* ===== Cartes de formules (Changer de formule) ===== */
.plan-section { margin-top: 22px; }
.plan-section-h { font-weight: 800; font-size: 18px; color: var(--nc-navy, #16223e); }
.plan-section-h span { display: block; font-weight: 500; font-size: 13px; color: var(--nc-muted, #66707d); margin-top: 3px; }
.plan-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 18px; margin-top: 14px; }
.plan-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid #e7ecf4; border-radius: 20px; padding: 24px 22px; box-shadow: 0 10px 30px rgba(18, 38, 63, .07); transition: transform .2s, box-shadow .2s, border-color .2s; overflow: hidden; }
.plan-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, #19c3d6, #7c5cff); opacity: 0; transition: opacity .2s; }
.plan-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(18, 38, 63, .15); }
.plan-card:hover::before { opacity: 1; }
.plan-card.popular { border-color: #19c3d6; box-shadow: 0 18px 42px rgba(25, 195, 214, .2); }
.plan-card.popular::before { opacity: 1; }
.plan-card.current { border-color: #cfe0e6; background: linear-gradient(180deg, #f6fdfe, #fff); }
.plan-ribbon { position: absolute; top: 15px; right: -36px; transform: rotate(45deg); background: linear-gradient(90deg, #19c3d6, #7c5cff); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .3px; padding: 5px 42px; box-shadow: 0 6px 14px rgba(0, 0, 0, .15); }
.plan-name { font-weight: 800; font-size: 19px; color: var(--nc-navy, #16223e); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plan-cur { font-size: 11px; font-weight: 800; color: #0e7c8b; background: #d6f5fa; padding: 3px 10px; border-radius: 100px; }
.plan-price { margin: 12px 0 2px; color: var(--nc-navy, #16223e); }
.plan-price b { font-size: 31px; font-weight: 900; letter-spacing: -.5px; }
.plan-price span { font-size: 14px; color: var(--nc-muted, #66707d); font-weight: 600; }
.plan-tagline { font-size: 13px; color: var(--nc-muted, #64748b); margin-top: 4px; line-height: 1.4; }
.plan-billing { display: inline-flex; border: 1px solid var(--nc-border, #e6ebf4); border-radius: 10px; overflow: hidden; }
.plan-billing .btn { border: 0; border-radius: 0; }
.plan-feats { list-style: none; margin: 16px 0 22px; padding: 16px 0 0; border-top: 1px solid #eef2f8; display: flex; flex-direction: column; gap: 11px; }
.plan-feats li { position: relative; padding-left: 29px; font-size: 14px; color: #38465a; line-height: 1.35; }
.plan-feats li::before { content: '✓'; position: absolute; left: 0; top: -1px; width: 20px; height: 20px; border-radius: 50%; background: #e3f8fb; color: #0e9bb0; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.plan-cta { display: block; margin-top: auto; text-align: center; text-decoration: none; padding: 13px 16px; border-radius: 13px; font-size: 15px; font-weight: 800; cursor: pointer; border: 0; transition: transform .12s, box-shadow .2s; background: linear-gradient(90deg, #19c3d6, #12a9bd); color: #fff; box-shadow: 0 10px 22px rgba(25, 195, 214, .28); }
.plan-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(25, 195, 214, .38); }
.plan-card.popular .plan-cta { background: linear-gradient(90deg, #7c5cff, #19c3d6); box-shadow: 0 10px 22px rgba(124, 92, 255, .3); }
.plan-cta.cur { background: #eef3f7; color: #5b6b7e; box-shadow: none; cursor: default; }
.plan-cta.cur:hover { transform: none; box-shadow: none; }
/* ===== Fenêtre « Ajouter une option » ===== */
.optadd-ov { position: fixed; inset: 0; background: rgba(10, 20, 35, .55); display: grid; place-items: center; z-index: 2000; padding: 22px; }
.optadd-panel { width: 560px; max-width: 100%; max-height: 84vh; overflow: auto; background: #fff; border-radius: 20px; box-shadow: 0 30px 70px rgba(0, 0, 0, .3); padding: 22px 24px; }
.optadd-head h3 { margin: 0 0 4px; font-size: 20px; color: var(--nc-navy, #16223e); }
.optadd-head p { margin: 0 0 16px; color: var(--nc-muted, #66707d); font-size: 13.5px; line-height: 1.45; }
/* Forfaits (console) — réordonnancement glisser-déposer */
.jcat-drag { cursor: grab; }
.jcat-drag.dragging { opacity: .5; cursor: grabbing; }
.jcat-drag.drag-over { outline: 2px dashed var(--nc-primary, #16b3c7); outline-offset: 3px; }

/* Panier — modules inclus dans un forfait (profil) */
.inc-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 100px; border: 1px solid var(--nc-border, #e6ebf4); background: #fff; font-size: 13px; font-weight: 600; }
.inc-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.inc-b { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.inc-b svg { color: #1f9d76; flex: 0 0 auto; }

/* Coupons & promos — vue cartes / lignes + densité */
.coupon-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; }
.coupon-toolbar .seg { display: inline-flex; border: 1px solid var(--nc-border, #e6ebf4); border-radius: 10px; overflow: hidden; }
.coupon-toolbar .seg .btn { border: 0; border-radius: 0; }
.coupon-cols { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--nc-muted, #64748b); }
.btn.btn-sm { padding: 7px 13px; font-size: 13px; }
.coupon-grid { display: grid; gap: 10px; }
.coupon-card { background: #fff; border: 1px solid var(--nc-border, #e6ebf4); border-radius: 14px; padding: 14px 16px; cursor: pointer; transition: box-shadow .15s, transform .15s; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.coupon-card:hover { box-shadow: 0 12px 28px rgba(18, 38, 63, .12); transform: translateY(-2px); }
.coupon-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.coupon-card .coupon-code { font-size: 15px; }
.coupon-card .coupon-val { font-size: 20px; font-weight: 800; color: var(--nc-navy, #16223e); }
.coupon-meta { font-size: 12.5px; color: var(--nc-muted, #64748b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coupon-card-f { display: flex; justify-content: flex-end; margin-top: 2px; }
.coupon-row { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--nc-border, #e6ebf4); border-radius: 10px; padding: 9px 14px; cursor: pointer; transition: box-shadow .12s; min-width: 0; }
.coupon-row:hover { box-shadow: 0 4px 14px rgba(18, 38, 63, .08); }
.coupon-row .coupon-code { flex: 0 0 auto; min-width: 96px; }
.coupon-row .coupon-type, .coupon-row .coupon-tgt { color: var(--nc-muted, #64748b); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.coupon-row .coupon-val { font-weight: 700; flex: 0 0 auto; }
.coupon-row .coupon-del { margin-left: auto; padding: 5px 9px; flex: 0 0 auto; }
.optadd-list { display: flex; flex-direction: column; gap: 12px; }
.optadd-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid #e7ecf4; border-radius: 16px; transition: border-color .15s, box-shadow .15s, transform .12s; }
.optadd-item:hover { border-color: #19c3d6; box-shadow: 0 10px 26px rgba(25, 195, 214, .14); transform: translateY(-2px); }
.optadd-ic { width: 44px; height: 44px; border-radius: 13px; flex: 0 0 auto; display: grid; place-items: center; background: linear-gradient(135deg, rgba(25, 195, 214, .16), rgba(124, 92, 255, .16)); color: #0e7c8b; }
.optadd-ic svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.optadd-name { font-weight: 800; font-size: 15px; color: var(--nc-navy, #16223e); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.optadd-badge { font-size: 10.5px; font-weight: 800; color: #7c5cff; background: #efeaff; padding: 2px 8px; border-radius: 100px; }
.optadd-desc { color: var(--nc-muted, #66707d); font-size: 12.5px; margin-top: 2px; line-height: 1.35; }
.optadd-trial { color: #16a34a; font-size: 12px; font-weight: 700; margin-top: 3px; }
.optadd-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 auto; }
.optadd-price { font-weight: 800; font-size: 14.5px; color: var(--nc-navy, #16223e); white-space: nowrap; }
.optadd-cta { border: 0; border-radius: 11px; padding: 9px 16px; font-weight: 800; font-size: 13.5px; cursor: pointer; background: linear-gradient(90deg, #19c3d6, #12a9bd); color: #fff; box-shadow: 0 8px 18px rgba(25, 195, 214, .28); transition: transform .12s, box-shadow .2s; white-space: nowrap; }
.optadd-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(25, 195, 214, .36); }
.optadd-cta:disabled { opacity: .6; cursor: default; }
.optadd-foot { text-align: right; margin-top: 16px; }
@media (max-width: 560px) { .optadd-item { flex-wrap: wrap; } .optadd-right { width: 100%; flex-direction: row; justify-content: space-between; } }
.jck2-page .lib-card .lib-acts { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.jck2-page .lib-card .addbtm { border: 1px solid #dbe3ec; background: #fff; color: #46566b; font-weight: 600; border-radius: 9px; padding: 5px 10px; cursor: pointer; font-size: 12px; white-space: nowrap; }
.jck2-page .lib-card .addbtm:hover { border-color: #19d3e6; color: #0bb4c7; }
.jck2-page .lib-card .addbtm.in { background: #eef2f7; color: #6b7787; }
.jck2-page .lib-card .addbtm.in:hover { background: #fdecea; color: #c0392b; border-color: #fdecea; }
.jck2-page .c-blue { background: #e9f1ff; color: #2f7bf6; } .jck2-page .c-orange { background: #fff1e0; color: #e8870f; } .jck2-page .c-green { background: #e6f8ee; color: #1faa5a; }
.jck2-page .c-red { background: #ffe9ef; color: #e8467a; } .jck2-page .c-purple { background: #efeaff; color: #7a5cf0; } .jck2-page .c-teal { background: #e0f7fa; color: #0bb4c7; } .jck2-page .c-slate { background: #eef2f7; color: #5a6b80; }
.jck2-page .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: #0d2440; color: #fff; padding: 12px 20px; border-radius: 12px; font-size: 14px; font-weight: 500; box-shadow: 0 16px 40px rgba(0,0,0,.3); opacity: 0; transition: .25s; z-index: 1100; }
.jck2-page .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@keyframes jck2pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: .82; } }
@keyframes jck2ring { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes jck2flow { to { stroke-dashoffset: -26; } }
@media (max-width: 1180px) { .jck2 .board { grid-template-columns: 1fr; } }
@media (max-width: 920px) { .jck2 .side { display: none; } .jck2 .cockpit { height: 720px; } }

/* ===== Cockpit interne d'un module métier (cœur radial) ===== */
.enthub { position: relative; min-height: 560px; border-radius: 20px; background: radial-gradient(circle at 50% 46%, #f4f8ff, #eef2f8 72%); border: 1px solid var(--nc-border, #e7ecf4); overflow: hidden; }
.enthub-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.entln { stroke: rgba(25, 160, 200, .22); stroke-width: 2; fill: none; }
.enthub-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #103a5e, #0a2138 60%, #081a2e); display: grid; place-items: center; z-index: 3; box-shadow: 0 0 56px rgba(25, 150, 200, .45), 0 14px 34px rgba(8, 26, 46, .4); color: #fff; text-align: center; }
.enthub-core .knb { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle, #bff6fc, #1fd0e6); margin: 0 auto 6px; box-shadow: 0 0 20px rgba(25, 211, 230, .9); }
.enthub-core .nm { font-size: 16px; font-weight: 800; }
.enthub-core .sub { font-size: 10px; color: #bfeede; margin-top: 3px; }
.entnode { position: absolute; transform: translate(-50%, -50%); width: 150px; background: #fff; border: 1px solid #e7ecf4; border-radius: 14px; padding: 11px 13px; box-shadow: 0 10px 24px rgba(18, 38, 63, .10); cursor: pointer; z-index: 2; text-align: left; transition: transform .18s, box-shadow .18s; }
.entnode:hover { transform: translate(-50%, -50%) translateY(-3px); box-shadow: 0 16px 34px rgba(18, 38, 63, .16); }
.entnode .em { line-height: 1; color: var(--nc-brand, #16b3c7); display: inline-flex; }
.entnode .em svg { width: 22px; height: 22px; }
.entnode.common .em { color: var(--nc-navy, #16223e); }
.entnode h4 { font-size: 13.5px; margin: 6px 0 1px; color: var(--nc-navy, #16223e); }
.entnode p { font-size: 11px; color: var(--nc-muted, #7c8aa0); margin: 0; }
.entnode.common { border-style: dashed; border-color: #cfe0f5; }
@media (max-width: 820px) { .enthub { min-height: auto; padding: 10px; display: flex; flex-wrap: wrap; gap: 10px; } .enthub-core, .enthub-svg { position: static; transform: none; margin: 6px auto; } .entnode { position: static; transform: none; width: calc(50% - 10px); } }

/* ===== Éditeur de document SOLO (devis / factures) — aperçu live + accordéons ===== */
.solodoc { display: grid; grid-template-columns: minmax(0, 1fr) 392px; gap: 18px; align-items: start; }
.solodoc-doc { background: #fff; border: 1px solid var(--nc-border, #e7ecf4); border-radius: 16px; box-shadow: 0 12px 34px rgba(18, 38, 63, .10); padding: 30px 32px; min-height: 520px; font-size: 13px; color: #1d2b3a; position: sticky; top: 16px; align-self: start; max-height: calc(100vh - 96px); overflow: auto; }
.solodoc-doc::-webkit-scrollbar { width: 8px; } .solodoc-doc::-webkit-scrollbar-thumb { background: #d6dee8; border-radius: 8px; }
@media (max-width: 980px) { .solodoc-doc { position: static; max-height: none; overflow: visible; } }
.solodoc-doc .dh { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-top: 4px solid var(--accent, #16b3c7); padding-top: 16px; }
.solodoc-doc .dh .logo { max-height: 64px; max-width: 180px; object-fit: contain; }
.solodoc-doc .dh h2 { font-size: 24px; margin: 0; color: var(--accent, #16b3c7); text-transform: uppercase; letter-spacing: .5px; }
.solodoc-doc .meta { font-size: 12px; color: #64748b; text-align: right; line-height: 1.6; }
.solodoc-doc .parties { display: flex; justify-content: space-between; gap: 20px; margin: 22px 0; }
.solodoc-doc .party { font-size: 12.5px; line-height: 1.5; max-width: 48%; }
.solodoc-doc .party b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #94a3b8; margin-bottom: 3px; }
.solodoc-doc table.lines { width: 100%; border-collapse: collapse; margin: 8px 0; }
.solodoc-doc table.lines th { background: var(--accent, #16b3c7); color: #fff; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; padding: 8px 10px; text-align: left; }
.solodoc-doc table.lines th.r, .solodoc-doc table.lines td.r { text-align: right; }
.solodoc-doc table.lines td { padding: 8px 10px; border-bottom: 1px solid #eef2f7; font-size: 12.5px; }
.solodoc-doc .totals { margin-left: auto; width: 268px; margin-top: 10px; }
.solodoc-doc .totals .tr { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
.solodoc-doc .totals .disc { color: #1faa5a; }
.solodoc-doc .totals .ttc { border-top: 2px solid var(--accent, #16b3c7); margin-top: 6px; padding-top: 8px; font-size: 17px; font-weight: 800; color: #1d2b3a; }
.solodoc-doc .foot { margin-top: 22px; font-size: 11.5px; color: #64748b; line-height: 1.6; border-top: 1px solid #eef2f7; padding-top: 12px; }
.solodoc-edit { display: flex; flex-direction: column; gap: 12px; }
.solodoc-edit .field span { font-size: 12.5px; font-weight: 600; color: #64748b; }
.solodoc-acc { border: 1px solid var(--nc-border, #e7ecf4); border-radius: 14px; background: #fff; box-shadow: 0 6px 18px rgba(18, 38, 63, .06); overflow: hidden; }
.solodoc-acc[open] { box-shadow: 0 10px 28px rgba(18, 38, 63, .09); }
.solodoc-acc > summary { padding: 14px 16px; font-weight: 800; font-size: 14px; color: var(--nc-navy, #16223e); cursor: pointer; list-style: none; display: flex; align-items: center; gap: 9px; }
.solodoc-acc[open] > summary { border-bottom: 1px solid #f1f4f9; }
.solodoc-acc > summary::-webkit-details-marker { display: none; }
.solodoc-acc > summary::before { content: "▸"; color: var(--accent, #16b3c7); transition: transform .15s; }
.solodoc-acc[open] > summary::before { transform: rotate(90deg); }
.solodoc-acc .ab { padding: 4px 15px 15px; display: flex; flex-direction: column; gap: 10px; }
.solodoc-line { display: grid; grid-template-columns: 1fr 60px 74px 64px 28px; gap: 6px; align-items: center; }
.solodoc-line input, .solodoc-line select { margin: 0; }
.solodoc-pm { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.solodoc-pm label { display: flex; align-items: center; gap: 9px; border: 1.5px solid var(--nc-border, #e7ecf4); border-radius: 12px; padding: 9px 12px; font-size: 13px; font-weight: 600; color: #475569; cursor: pointer; transition: border-color .12s, background .12s; }
.solodoc-pm label:hover { border-color: var(--accent, #16b3c7); }
.solodoc-pm label.on { border-color: var(--accent, #16b3c7); background: color-mix(in srgb, var(--accent, #16b3c7) 9%, #fff); color: #16223e; }
.solodoc-pm label span { flex: 1; min-width: 0; }
.solodoc input[type="checkbox"] { width: 17px; height: 17px; flex: 0 0 auto; margin: 0; accent-color: var(--accent, #16b3c7); }
.solodoc-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
@media (max-width: 980px) { .solodoc { grid-template-columns: 1fr; } }

/* ===== Coquille : menu À GAUCHE + barre haute fine + menu utilisateur ===== */
.appshell { display: flex; min-height: 100vh; background: var(--nc-bg); }
.appside { width: 238px; flex: 0 0 238px; background: linear-gradient(180deg, #0d2440, #091627); color: #cdd9ea; display: flex; flex-direction: column; padding: 18px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.appmaincol { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.nav-burger { display: none; }
.nav-backdrop { display: none; }
/* JoomStore : alertes + présence inutiles sur la galaxie */
.appshell.store-mode .apptop .alerts-btn, .appshell.store-mode .apptop .nc-presence { display: none !important; }
/* Licence expirée : app FLOUTÉE + popup de renouvellement (Yann 18/07) */
body.lic-blurred .appshell { filter: blur(6px); pointer-events: none; user-select: none; }
.lic-exp-ov { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(8, 16, 30, .40); }
.lic-exp-panel { background: #fff; border-radius: 20px; max-width: 440px; width: 100%; padding: 34px 30px; text-align: center; box-shadow: 0 30px 90px rgba(0, 0, 0, .4); }
.lic-exp-badge { font-size: 42px; line-height: 1; margin-bottom: 8px; }
.lic-exp-t { margin: 6px 0 10px; font-size: 21px; font-weight: 800; color: #16223e; }
.lic-exp-d { margin: 0 0 22px; font-size: 14px; line-height: 1.55; color: #5a6a85; }
.lic-exp-btn { width: 100%; }
.lic-exp-note { font-size: 13px; color: #8a97ad; margin: 0; }
/* JoomStore : menu de gauche REPLIÉ par défaut (tiroir via le burger) → galaxie plein cadre (Yann 18/07) */
.appshell.store-mode .appside { position: fixed; top: 0; left: 0; height: 100vh; width: 280px; max-width: 86vw; z-index: 1000; transform: translateX(-100%); transition: transform .25s ease; box-shadow: 12px 0 40px rgba(0, 0, 0, .45); }
.appshell.store-mode.nav-open .appside { transform: translateX(0); }
.appshell.store-mode.nav-open .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(6, 12, 22, .5); z-index: 999; }
.appshell.store-mode .nav-burger { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: #cdd9ea; cursor: pointer; flex: 0 0 auto; padding: 0; }
.appshell.store-mode .nav-burger svg { width: 22px; height: 22px; }
/* ===== MOBILE : sidebar → tiroir coulissant vertical (hamburger) ===== */
@media (max-width: 820px) {
  /* Panneau : forcé fixe, vertical, à gauche, sur toute la hauteur. */
  .appshell .appside {
    position: fixed !important; top: 0 !important; left: 0 !important;
    height: 100vh !important; width: 280px !important; max-width: 86vw !important; flex-basis: 280px !important;
    z-index: 10050 !important; transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: 12px 0 40px rgba(0, 0, 0, .45);
    display: flex !important; flex-direction: column !important; overflow-y: auto !important; align-items: stretch !important;
  }
  .appshell.nav-open .appside { transform: translateX(0) !important; }
  .appshell.nav-open .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(6, 12, 22, .5); z-index: 10049; }
  /* Le tiroir passe au-dessus des pastilles flottantes (voice-fab 9990, jt-fab 900) qui le masquaient. */
  .appshell.nav-open .voice-fab, .appshell.nav-open .jt-fab { display: none !important; }
  /* Nav du tiroir : colonne pleine largeur (écrase le style « topnav » horizontal). */
  .appshell .appside .nav, .appshell .appside .nav.topnav {
    flex-direction: column !important; height: auto !important; overflow: visible !important;
    align-items: stretch !important; width: 100% !important; flex: 0 0 auto !important; gap: 3px !important;
  }
  .appshell .appside .nav a, .appshell .appside .topnav a {
    width: 100% !important; height: auto !important; justify-content: flex-start !important;
    padding: 12px 13px !important; margin: 0 !important; border-radius: 12px !important; box-sizing: border-box;
  }
  .nav-burger { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--nc-border, #e7ecf4); background: #fff; color: var(--nc-navy, #16223e); cursor: pointer; flex: 0 0 auto; padding: 0; }
  .nav-burger svg { width: 22px; height: 22px; }
  .apptop { gap: 8px; padding-left: 12px !important; padding-right: 12px !important; }
  .apptop .nc-presence { display: none; }
  .appmaincol .main { padding: 14px 12px; }
  .view-title { font-size: 20px; }
  /* Cartes & tableaux : respiration mobile + pas de débordement */
  .card { padding: 14px; }
  table.grid { min-width: 0; }
  .doc-table-wrap table.grid { min-width: 620px; }
}
/* ===== MOBILE : galaxies (cockpit + JoomStore) → grille verticale ===== */
@media (max-width: 820px) {
  /* Cockpit (.jck2) : TIMELINE verticale (comme le store) */
  .jck2 { display: block !important; }
  .jck2 .side { display: none !important; }
  .jck2 .cockpit { height: auto !important; min-height: 0 !important; overflow: visible !important; background: transparent !important; border: none !important; box-shadow: none !important; display: flex !important; flex-direction: column !important; padding: 6px 16px 24px !important; }
  .jck2 .cockpit > svg, .jck2 .cockpit .flowline, .jck2 .cockpit .flowbase { display: none !important; }
  .jck2 .core { order: -1; position: relative !important; left: auto !important; top: auto !important; transform: none !important; margin: 4px auto 16px !important; width: 132px !important; height: 132px !important; }
  .jck2 .core .nm { font-size: 18px !important; }
  .jck2 .mod { position: relative !important; left: auto !important; top: auto !important; width: auto !important; z-index: auto !important; display: flex !important; align-items: center !important; gap: 12px; margin: 0 0 14px !important; padding: 12px 14px 12px 42px !important; }
  .jck2 .mod:hover { transform: none !important; }
  .jck2 .mod::after { content: ''; position: absolute; left: 18px; top: 0; bottom: -14px; width: 2px; background: linear-gradient(rgba(25, 211, 230, .5), rgba(25, 211, 230, .3)); box-shadow: 0 0 8px rgba(25, 211, 230, .35); z-index: 1; }
  .jck2 .mod:first-child::after { top: 50%; }
  .jck2 .mod:last-child::after { bottom: 50%; }
  .jck2 .mod::before { content: ''; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 2px solid #19d3e6; box-shadow: 0 0 12px rgba(25, 211, 230, .6); z-index: 2; }
  .jck2 .mod .ic { margin: 0 !important; flex: 0 0 auto; }
  .jck2 .mod h3 { margin: 0 !important; flex: 1; min-width: 0; }
  .jck2 .mod p { display: none !important; }
  .jck2 .mod .ct { margin: 0 !important; flex: 0 0 auto; }
  .jck2 .mod .x { opacity: 1 !important; top: 8px !important; right: 8px !important; }
  /* JoomStore mobile : TIMELINE verticale lumineuse (nœuds à gauche) */
  .jgal .stage { aspect-ratio: auto !important; height: auto !important; max-width: 100% !important; display: block !important; padding: 6px 16px 30px !important; }
  .jgal .stage .orbit { display: none !important; }
  .jgal .lines { display: none !important; }
  .jgal .core { position: relative !important; left: auto !important; top: auto !important; transform: none !important; margin: 4px auto 16px !important; width: 132px !important; height: 132px !important; }
  .jgal .core .nm { font-size: 18px !important; }
  /* Base commune : placement dans le flux + pastille + ligne lumineuse */
  .jgal .node { position: relative !important; left: auto !important; top: auto !important; width: auto !important; margin: 0 0 14px !important; margin-left: 0 !important; margin-top: 0 !important; z-index: auto !important; animation: none !important; }
  .jgal .node:hover { transform: none !important; }
  .jgal .node::after { content: ''; position: absolute; left: 18px; top: 0; bottom: -14px; width: 2px; background: linear-gradient(rgba(26, 214, 232, .55), rgba(26, 214, 232, .35)); box-shadow: 0 0 8px rgba(26, 214, 232, .4); z-index: 1; }
  .jgal .node:first-child::after { top: 34px; }
  .jgal .node:last-child::after { bottom: auto; height: 34px; }
  .jgal .node::before { content: ''; position: absolute; left: 12px; top: 34px; width: 15px; height: 15px; border-radius: 50%; background: #0b2742; border: 2px solid #1ad6e8; box-shadow: 0 0 12px rgba(26, 214, 232, .7); z-index: 2; }
  .jgal .node.owned::before { border-color: #2fe08a; box-shadow: 0 0 0 4px rgba(47, 224, 138, .16), 0 0 14px #2fe08a; }
  .jgal .node.owned { border-color: rgba(47, 224, 138, .4) !important; }

  /* Nœud simple ("Tous les univers") = carte horizontale compacte */
  .jgal .node:not(.big) { display: flex !important; align-items: center !important; gap: 12px; text-align: left !important; padding: 12px 14px 12px 42px !important; background: rgba(255, 255, 255, .05); border: 1px solid rgba(170, 200, 235, .16); border-radius: 15px; }
  .jgal .node:not(.big) .orb { width: 44px !important; height: 44px !important; margin: 0 !important; flex: 0 0 auto; border-radius: 13px; }
  .jgal .node:not(.big) .orb svg { width: 22px !important; height: 22px !important; }
  .jgal .node:not(.big) h3 { margin: 0 !important; flex: 1; min-width: 0; text-align: left !important; font-size: 15px; }
  .jgal .node:not(.big) .st { margin: 0 !important; flex: 0 0 auto; white-space: nowrap; font-size: 12.5px; font-weight: 700; }
  .jgal .node:not(.big) .node-ribbon { position: absolute; top: -8px; right: 12px; font-size: 10px; }

  /* Nœud détaillé (univers sélectionné) = carte verticale pleine largeur */
  .jgal .node.big { display: block !important; text-align: left !important; padding: 16px 18px 16px 44px !important; }
  .jgal .node.big .orb { width: 46px !important; height: 46px !important; margin: 0 0 10px !important; }
  .jgal .node.big h3 { font-size: 17px !important; }
  .jgal .node.big .bdesc { margin: 8px 0 !important; }
  .jgal .node.big .bpr { margin: 10px 0 !important; }
  .jgal .node.big .bact { display: flex !important; gap: 8px; flex-wrap: wrap; }
  .jgal .node.big .bact .mini { flex: 1 1 auto; }

  /* Sélection des univers : rangée unique qui défile horizontalement (swipe) */
  .jgal .chips { flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden; -webkit-overflow-scrolling: touch; gap: 8px !important; padding: 14px 14px 10px !important; scrollbar-width: none; }
  .jgal .chips::-webkit-scrollbar { display: none; }
  .jgal .chip { flex: 0 0 auto; white-space: nowrap; }
  .jgal .actcount { flex: 0 0 auto; white-space: nowrap; }
}
.appside-brand { display: flex; align-items: center; gap: 11px; padding: 6px 8px 20px; }
.appside-mark { width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto; }
.appside-name { font-size: 20px; font-weight: 800; color: #fff; letter-spacing: .4px; }
.appside .nav, .appside .nav.topnav { display: flex !important; flex-direction: column !important; gap: 3px !important; flex: 0 0 auto !important; height: auto !important; align-items: stretch !important; overflow: visible !important; min-width: 0; }
.appside .nav a { display: flex !important; align-items: center !important; align-self: stretch !important; justify-content: flex-start !important; width: 100% !important; text-align: left !important; gap: 12px; height: auto !important; padding: 11px 13px !important; margin: 0 !important; border-radius: 12px !important; color: #aebccf; text-decoration: none; font-weight: 600; font-size: 14px; white-space: nowrap; transition: .15s; }
.appside .nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.appside .nav a.active { background: linear-gradient(135deg, #6d5ae6, #8b5cf6); color: #fff; box-shadow: 0 8px 20px rgba(124, 92, 255, .38); }
.appside .nav .nav-ico { display: grid; place-items: center; flex: 0 0 auto; }
.appside .nav .nav-ico svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.appside .nav .empty { color: #7c8aa0; font-size: 13px; padding: 8px 12px; }
.appmaincol { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.apptop { display: flex; align-items: center; gap: 10px; justify-content: flex-end; padding: 12px 24px; background: #fff; border-bottom: 1px solid var(--nc-border, #e7ecf4); position: sticky; top: 0; z-index: 50; }
.apptop .apptop-sp { flex: 1; }
.apptop-left { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; overflow-x: auto; }
/* Gélule « Qui est en ligne » (présence temps réel) */
.nc-presence { position: relative; flex: 0 0 auto; }
.nc-presence-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--nc-border, #e7ecf4); background: #fff; border-radius: 999px; padding: 5px 13px 5px 11px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--nc-navy, #16223e); transition: border-color .2s, box-shadow .2s; white-space: nowrap; }
.nc-presence-btn:hover { border-color: rgba(22, 163, 74, .45); box-shadow: 0 0 0 3px rgba(22, 163, 74, .1); }
.nc-presence-dot { width: 9px; height: 9px; border-radius: 50%; background: #16a34a; flex: 0 0 auto; box-shadow: 0 0 0 0 rgba(22, 163, 74, .5); animation: ncpresencepulse 2s infinite; }
@keyframes ncpresencepulse { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .5); } 70% { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); } }
.nc-presence-stack { display: inline-flex; align-items: center; }
.nc-presence-stack .av { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; margin-left: -7px; display: inline-flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 700; color: #fff; flex: 0 0 auto; }
.nc-presence-stack .av:first-child { margin-left: 0; }
.nc-presence-stack .av.more { background: #64748b; }
.nc-presence-txt { white-space: nowrap; }
.nc-presence-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 248px; max-height: 60vh; overflow: auto; background: #fff; border: 1px solid var(--nc-border, #e7ecf4); border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .16); padding: 8px; display: none; z-index: 80; }
.nc-presence-menu.show { display: block; }
.nc-presence-head { font-weight: 700; font-size: 13px; padding: 6px 8px 8px; color: var(--nc-navy, #16223e); }
.nc-presence-row { display: flex; align-items: center; gap: 11px; padding: 7px 8px; border-radius: 10px; }
.nc-presence-row:hover { background: #f5f8fc; }
.nc-presence-row .av { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; flex: 0 0 auto; position: relative; }
.nc-presence-row .av::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: #16a34a; border: 2px solid #fff; }
.nc-presence-name { font-weight: 600; font-size: 13.5px; color: var(--nc-navy, #16223e); }
.nc-presence-role { color: var(--nc-muted); font-size: 12px; }
.appshell.store-mode .nc-presence { display: none !important; }
.apptop-left .ctabs { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.apptop-left .ctab { padding: 8px 15px; border-radius: 11px; font-size: 13.5px; font-weight: 700; color: var(--nc-muted); background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.apptop-left .ctab:hover { background: #f1f5fa; color: var(--nc-navy); }
.apptop-left .ctab.active { background: linear-gradient(135deg, #17c4dc, #1391bf); color: #fff; box-shadow: 0 6px 16px rgba(23, 196, 220, .34); }
.apptop-left .ctab .pill { background: #ff3b6b; color: #fff; font-size: 11px; font-weight: 700; border-radius: 100px; padding: 1px 7px; }
.apptop-left .caddw { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; border: 0; background: linear-gradient(135deg, #17c4dc, #1391bf); color: #fff; font-weight: 700; font-size: 13.5px; padding: 10px 16px; border-radius: 12px; cursor: pointer; box-shadow: 0 6px 16px rgba(23, 196, 220, .34); white-space: nowrap; }
/* Recherche globale du cockpit (déclencheur de la palette) */
.apptop-left .ccpk-search { display: inline-flex; align-items: center; gap: 8px; min-width: 210px; max-width: 300px; border: 1px solid var(--nc-border, #e6ebf4); background: var(--nc-bg, #f1f5fb); color: var(--nc-muted, #66707d); font-size: 13px; font-weight: 500; padding: 9px 12px; border-radius: 12px; cursor: text; white-space: nowrap; }
.apptop-left .ccpk-search:hover { border-color: #b9c6da; background: #fff; }
.apptop-left .ccpk-search .ccpk-search-t { flex: 1; text-align: left; }
.apptop-left .ccpk-search .ccpk-search-kbd { font-size: 11px; font-weight: 700; color: #9aa6b6; background: var(--nc-surface, #fff); border: 1px solid var(--nc-border, #e6ebf4); border-radius: 6px; padding: 1px 6px; }
@media (max-width: 900px) { .apptop-left .ccpk-search .ccpk-search-t, .apptop-left .ccpk-search .ccpk-search-kbd { display: none; } .apptop-left .ccpk-search { min-width: 0; } }
.appmaincol .main { flex: 1; padding: 24px; }
.appmaincol.no-apptop .apptop { display: none; }
.appmaincol.no-apptop .main { padding: 0; }
/* Menu gauche : alignement uniforme (neutralise les séparateurs/indentations de l'ancienne nav) */
.appside .nav a.nav-home, .appside .nav a.nav-top, .appside .nav a.nav-admin, .appside .nav a.nav-top + a { margin: 0 !important; border-top: 0 !important; padding-top: 11px !important; }
.appside .nav a.nav-top { margin-bottom: 4px !important; }
.appside .nav a.nav-admin { margin-top: 4px !important; }
.appside .nav .nav-ico { opacity: 1; width: 20px; }
.appside .nav .nav-label { flex: 1; }
/* Bouton « + » au survol d'une ligne de menu : insérer un menu au-dessus/en-dessous */
.appside .nav a { position: relative; }
.nav-add { position: absolute; right: 8px; left: auto; top: 50%; transform: translateY(-50%) scale(.6); width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; font-size: 15px; font-weight: 700; line-height: 1; opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s, background .12s; z-index: 6; }
.appside .nav a:hover .nav-add { opacity: 1; transform: translateY(-50%) scale(1); pointer-events: auto; }
.nav-add:hover { background: rgba(255,255,255,.3); }
.appside .nav a.active .nav-add { background: rgba(255,255,255,.22); }
.appside .nav a.active .nav-add:hover { background: rgba(255,255,255,.4); }
.nav-addpop { position: fixed; z-index: 1200; width: 244px; max-height: 70vh; overflow: auto; background: #12203a; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 9px; box-shadow: 0 18px 44px rgba(0,0,0,.5); color: #e7eef8; }
.nav-addpop-h { font-size: 12px; font-weight: 800; letter-spacing: .3px; color: #a9b7cd; text-transform: uppercase; padding: 2px 4px 8px; }
.nav-addpop-seg { display: flex; gap: 6px; margin-bottom: 8px; }
.nav-addpop-seg button { flex: 1; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #cdd9ea; border-radius: 8px; padding: 7px 8px; font-size: 12.5px; font-weight: 700; font-family: inherit; cursor: pointer; }
.nav-addpop-seg button.on { background: linear-gradient(135deg,#6d5ae6,#8b5cf6); color: #fff; border-color: transparent; }
.nav-addpop-list { display: flex; flex-direction: column; gap: 2px; }
.nav-addpop-opt { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; cursor: pointer; font-size: 13.5px; }
.nav-addpop-opt:hover { background: rgba(255,255,255,.09); }
.nav-addpop-ic { display: grid; place-items: center; width: 20px; flex: 0 0 auto; color: #aebccf; }
.nav-addpop-ic svg { width: 17px; height: 17px; }
.nav-addpop-empty { color: #8fa0b8; font-size: 13px; padding: 8px 6px; line-height: 1.5; }
.nav-addpop-opt .nav-addpop-x { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(226,82,82,.16); color: #ff8f8f; font-size: 16px; font-weight: 700; line-height: 1; flex: 0 0 auto; }
.nav-addpop-opt.rm:hover { background: rgba(226,82,82,.14); }
.nav-addpop-opt.rm:hover .nav-addpop-x { background: rgba(226,82,82,.32); color: #fff; }
.usermenu { position: relative; }
.usav { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #2f7bf6, #1baedf); color: #fff; font-weight: 700; font-size: 14px; border: 0; cursor: pointer; display: grid; place-items: center; }
.usav:hover { filter: brightness(1.06); }
.uspop { position: absolute; top: 50px; right: 0; width: 268px; background: #fff; border: 1px solid var(--nc-border, #e7ecf4); border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .18); padding: 14px; z-index: 1000; display: none; }
.uspop.show { display: block; }
.uspop .usp-head { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.uspop .usp-av { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #2f7bf6, #1baedf); color: #fff; font-weight: 700; display: grid; place-items: center; flex: 0 0 auto; }
.uspop .usp-name { font-weight: 800; color: var(--nc-navy, #16223e); }
.uspop .usp-role { display: inline-block; margin-top: 2px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: #0e7490; background: rgba(22, 179, 199, .12); border-radius: 100px; padding: 2px 9px; }
.uspop .usp-line { font-size: 12.5px; color: var(--nc-muted, #7c8aa0); padding: 3px 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uspop .usp-sep { height: 1px; background: var(--nc-border, #eef2f7); margin: 10px 0; }
.uspop .usp-item { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; text-align: left; padding: 9px 8px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--nc-navy, #16223e); cursor: pointer; }
.uspop .usp-item:hover { background: #f3f6fb; }
.uspop .usp-item.danger { color: #c0392b; }
.uspop .usp-item .ic { width: 18px; text-align: center; }
/* Menu compte (dropdown header) : suit le thème actif — sinon fond blanc figé + texte remappé clair = illisible. */
body.jt-theme .uspop { background: var(--jt-card) !important; border: 1px solid var(--jt-border) !important; box-shadow: 0 18px 50px rgba(0,0,0,.45) !important; }
body.jt-theme .uspop .usp-name { color: var(--jt-text) !important; }
body.jt-theme .uspop .usp-line { color: var(--jt-muted) !important; }
body.jt-theme .uspop .usp-sep { background: var(--jt-border) !important; }
body.jt-theme .uspop .usp-item { color: var(--jt-text) !important; }
body.jt-theme .uspop .usp-item:hover { background: var(--jt-hover) !important; }
body.jt-theme .uspop .usp-item.danger { color: var(--jt-danger, #e5544b) !important; }
body.jt-theme .uspop .usp-role { color: var(--jt-accent2) !important; background: color-mix(in srgb, var(--jt-accent) 16%, transparent) !important; }
/* Cockpit : pas de double menu — sa sidebar/chrome interne s'efface (la coquille fournit déjà le menu) */
.jck2 .side { display: none; }
.jck2 .topbar .ic-btn, .jck2 .topbar .avatar { display: none; }
.jck2 { min-height: calc(100vh - 130px); }
@media (max-width: 860px) {
  .appshell { flex-direction: column; }
  .appside { width: auto; flex: none; height: auto; position: static; flex-direction: row; align-items: center; gap: 6px; overflow-x: auto; padding: 8px 16px; }
  .appside-brand { padding: 0 12px 0 2px; flex: 0 0 auto; }
  .appside .nav, .appside .nav.topnav { flex-direction: row !important; gap: 6px !important; flex: 1 1 auto !important; }
  .appside .nav a { padding: 9px 13px !important; }
  .appside .nav a.nav-home, .appside .nav a.nav-top, .appside .nav a.nav-admin, .appside .nav a.nav-top + a { margin: 0 !important; border: 0 !important; padding-top: 9px !important; }
  .appmaincol .main { padding: 16px; }
  .appmaincol.no-apptop .main { padding: 0; }
}

/* ===== Popup « outil » du Cockpit (70% de large) ===== */
.ncpanel-ov { position: fixed; inset: 0; background: rgba(10, 20, 35, .5); display: grid; place-items: center; z-index: 2000; padding: 22px; }
.ncpanel { width: 70vw; max-width: 1200px; height: 84vh; background: var(--nc-bg, #eef2f8); border-radius: 18px; box-shadow: 0 30px 90px rgba(0, 0, 0, .42); display: flex; flex-direction: column; overflow: hidden; }
.ncpanel-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; background: #fff; border-bottom: 1px solid var(--nc-border, #e7ecf4); font-weight: 800; font-size: 16px; color: var(--nc-navy, #16223e); }
.ncpanel-x { border: 0; background: #f1f4f9; width: 34px; height: 34px; border-radius: 10px; cursor: pointer; font-size: 15px; color: #5a6b80; flex: 0 0 auto; }
.ncpanel-x:hover { background: #e6ebf2; }
.ncpanel-b { flex: 1; overflow: auto; padding: 18px; }
@media (max-width: 900px) { .ncpanel { width: 94vw; height: 88vh; } }

/* ===== Écran « Choisissez votre métier » (règle §12) ===== */
.metier-ov { position: fixed; inset: 0; z-index: 3000; background: radial-gradient(900px 600px at 50% 30%, #102a4a, #0a1526 60%, #060a14); display: grid; place-items: center; padding: 24px; }
.metier-panel { width: 100%; max-width: 920px; }
.metier-h { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; color: #fff; }
.metier-mark { width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle, #16e6f4, #0c9fc0 55%, #0a3a52); box-shadow: 0 0 22px rgba(25, 211, 230, .6); flex: 0 0 auto; }
.metier-h h2 { font-size: 24px; margin: 0 0 4px; }
.metier-h p { margin: 0; color: #aebfd6; font-size: 14px; line-height: 1.5; max-width: 640px; }
.metier-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.metier-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; background: rgba(255, 255, 255, .97); border: 1px solid rgba(255, 255, 255, .5); border-radius: 16px; padding: 18px; cursor: pointer; transition: transform .15s, box-shadow .15s; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); }
.metier-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--accent, #16b3c7), 0 18px 40px rgba(0, 0, 0, .35); }
.metier-card .mc-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 8px; }
.metier-card .mc-ic svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.metier-card .mc-name { font-size: 16px; font-weight: 800; color: #16223e; }
.metier-card .mc-cat { font-size: 12px; color: #7c8aa0; }

/* ===== Réglages du menu (réordonner + masquer) ===== */
.navset-row { display: flex; align-items: center; gap: 12px; padding: 11px 6px; border-bottom: 1px solid #f1f4f9; background: #fff; }
.navset-row.drag { opacity: .4; } .navset-row.over { outline: 2px dashed var(--nc-primary, #16b3c7); outline-offset: -2px; background: #f3f9fc; }
.navset-row.dim .navset-l { color: #94a3b8; }
.navset-grip { cursor: grab; color: #c2ccd9; font-size: 15px; }
.navset-ic { width: 22px; display: grid; place-items: center; color: var(--nc-muted, #7c8aa0); } .navset-ic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.navset-l { flex: 1; font-weight: 700; color: var(--nc-navy, #16223e); }
.navset-l .navset-g { font-weight: 500; color: var(--nc-muted, #7c8aa0); font-size: 12px; }
.navset-eye { border: 1px solid var(--nc-border, #e7ecf4); background: #fff; border-radius: 100px; padding: 6px 13px; font-size: 12.5px; font-weight: 700; color: #1faa5a; cursor: pointer; white-space: nowrap; }
.navset-eye.off { color: #94a3b8; background: #f6f8fb; }
.navset-eye:disabled { opacity: .5; cursor: default; }
/* JoomStore dans la barre haute du Cockpit */
.apptop .cstore { position: relative; display: inline-flex; align-items: center; gap: 9px; border: 1px solid rgba(26, 214, 232, .45); background: linear-gradient(135deg, #0c1f3a 0%, #103a5e 55%, #0c1f3a 100%); color: #dff3ff; font-weight: 700; font-size: 13.5px; padding: 9px 16px 9px 13px; border-radius: 12px; cursor: pointer; white-space: nowrap; overflow: hidden; box-shadow: 0 0 16px rgba(26, 214, 232, .2), inset 0 0 18px rgba(26, 214, 232, .07); transition: box-shadow .2s, transform .12s, border-color .2s; }
.apptop .cstore::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120px 40px at 18% 50%, rgba(86, 230, 242, .22), transparent 70%); pointer-events: none; }
.apptop .cstore:hover { border-color: rgba(86, 230, 242, .8); transform: translateY(-1px); box-shadow: 0 0 26px rgba(26, 214, 232, .45), inset 0 0 22px rgba(26, 214, 232, .14); }
.apptop .cstore .cstore-orb { width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto; position: relative; background: radial-gradient(circle at 50% 38%, #ffffff, #9cf2fb 35%, #1ad6e8 60%, #0c6f8c 100%); box-shadow: 0 0 12px rgba(26, 214, 232, .9); animation: cstorepulse 2.4s ease-in-out infinite; }
.apptop .cstore .cstore-orb::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(86, 230, 242, .5); }
@keyframes cstorepulse { 0%, 100% { box-shadow: 0 0 9px rgba(26, 214, 232, .65); } 50% { box-shadow: 0 0 18px rgba(86, 230, 242, 1); } }
/* ===== JoomStore plein écran : la nav passe EN HAUT (fond sombre), espace max pour le store ===== */
.appshell.store-mode { flex-direction: column; position: relative; }
.appshell.store-mode .appside { flex: 0 0 auto; width: 100%; height: auto; flex-direction: row; align-items: center; gap: 4px; padding: 10px 70px 10px 18px; position: sticky; top: 0; z-index: 60; }
.appshell.store-mode .appside-brand { padding: 0 16px 0 2px; }
.appshell.store-mode .appside .nav, .appshell.store-mode .appside .nav.topnav { flex-direction: row !important; gap: 4px !important; flex: 1 1 auto !important; overflow-x: auto; }
.appshell.store-mode .appside .nav a { padding: 8px 13px !important; }
/* Store zen : ne garder que le bouton Cockpit pour quitter */
.appshell.store-mode .appside .nav a { display: none !important; }
.appshell.store-mode .appside .nav a[data-route="/cockpit"] { display: inline-flex !important; }
.appshell.store-mode .appside .nav .nav-group { display: none !important; }
.ncp-panel.ncp-wide { width: 90%; max-width: 1400px; }
/* Pied de version du menu de gauche */
.appside-version { margin-top: auto; padding: 12px 10px 4px; font-size: 11px; color: rgba(205, 217, 234, .55); border-top: 1px solid rgba(255, 255, 255, .08); display: flex; flex-direction: column; gap: 5px; }
.appside-version-in { display: flex; flex-direction: column; gap: 1px; line-height: 1.35; }
.appside-version-in b { color: rgba(205, 217, 234, .82); font-weight: 600; }
.appside-upd { color: #ffd27d; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.appside-upd:hover { color: #ffe1a3; }
.appshell.store-mode .appside-version { display: none; }
/* Icônes SVG inline (consigne : icônes SVG partout, jamais d'emoji/image) */
.nc-ic { display: inline-flex; align-items: center; justify-content: center; vertical-align: -0.16em; line-height: 0; }
.nc-ic svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }
.btn .nc-ic { margin-right: 4px; }
.btn .nc-ic:only-child { margin-right: 0; }
/* Store — statut de publication (badges galaxie) */
.jgal .node .node-ribbon { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); background: #1ad6e8; color: #06303a; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 2px 9px; border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 10px rgba(26, 214, 232, .55); z-index: 4; }
.jgal .node.featured { box-shadow: 0 0 0 2px rgba(26, 214, 232, .5), 0 12px 30px rgba(0, 0, 0, .45); }
.jgal .node.soon { opacity: .9; }
.jgal .node.big .bbadge { display: inline-block; align-self: flex-start; color: #fff; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 3px 9px; border-radius: 999px; margin-bottom: 6px; }
.jgal .node.big .btag { font-size: 12px; color: #9fb2cd; font-style: italic; margin: 1px 0 4px; }
.jgal .node.big.featured { box-shadow: 0 0 0 2px rgba(26, 214, 232, .45), 0 24px 60px rgba(0, 0, 0, .55); }
/* Assistant Devis (wizard) */
.wiz-progress { height: 6px; background: #eef2f7; border-radius: 4px; overflow: hidden; }
.wiz-progress-bar { height: 100%; background: var(--accent, #16b3c7); border-radius: 4px; transition: width .25s ease; }
.solodoc .wiz-chip { border: 1px solid #dbe3ec; background: #fff; color: #46566b; border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 600; cursor: pointer; transition: .12s; }
.solodoc .wiz-chip:hover { border-color: var(--accent, #16b3c7); color: var(--accent, #16b3c7); background: #f3fcfd; }
.solodoc .wiz-line { border: 1px solid #e8edf5; border-radius: 12px; padding: 12px; margin-bottom: 10px; background: #fff; }
.solodoc .wiz-preview-toggle { display: none; }
@media (max-width: 900px) {
  .solodoc.wiz-solo .solodoc-doc { display: none; }
  .solodoc.wiz-solo.show-preview .solodoc-doc { display: block; }
  .solodoc .wiz-preview-toggle { display: inline-flex; }
}
/* Groupe repliable du menu de gauche (ex. Comptabilité) */
.appside .nav .nav-group { display: flex; flex-direction: column; }
.appside .nav .nav-group-h { display: flex; align-items: center; gap: 11px; width: 100%; background: none; border: 0; cursor: pointer; padding: 9px 12px; color: inherit; font: inherit; font-weight: 600; border-radius: 10px; text-align: left; }
.appside .nav .nav-group-h:hover { background: rgba(255, 255, 255, .07); }
.appside .nav .nav-group-h .nav-ico { display: inline-flex; opacity: .85; }
.appside .nav .nav-group-h .nav-ico svg { width: 18px; height: 18px; }
.appside .nav .nav-group-l { flex: 1; }
.appside .nav .nav-group-car { opacity: .6; font-size: 11px; transition: transform .15s; }
.appside .nav .nav-group:not(.open) .nav-group-car { transform: rotate(-90deg); }
.appside .nav .nav-group-body { display: none; margin: 2px 0 4px 16px; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, .1); }
.appside .nav .nav-group.open .nav-group-body { display: flex; flex-direction: column; gap: 2px; }
.appshell.store-mode .appmaincol .apptop { position: fixed; top: 9px; right: 18px; background: transparent; border: 0; padding: 0; z-index: 70; }
.appshell.store-mode .appmaincol .main { padding: 0; }
.appshell.store-mode .jgal { min-height: calc(100vh - 58px); }

/* ===== Store mobile : pas de tiroir → barre = bouton Cockpit + avatar ===== */
@media (max-width: 820px) {
  /* Le tiroir est inutile dans le store : on affiche l'appside comme une barre en haut */
  .appshell.store-mode .appside {
    position: sticky !important; top: 0 !important; left: auto !important; transform: none !important;
    width: 100% !important; max-width: none !important; height: auto !important;
    flex: 0 0 auto !important; flex-basis: auto !important; min-height: 0 !important; overflow: visible !important;
    flex-direction: row !important; align-items: center !important; gap: 8px !important;
    padding: 8px 60px 8px 12px !important;
    background: rgba(7, 13, 24, .82) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-right: 0 !important; border-bottom: 1px solid rgba(170, 200, 235, .12) !important;
    box-shadow: none !important; z-index: 60 !important;
  }
  .appshell.store-mode .appside .nav, .appshell.store-mode .appside .nav.topnav { flex-direction: row !important; overflow: visible !important; }
  .appshell.store-mode .appside-brand { display: none !important; }
  /* Bouton Cockpit bien visible dans la barre */
  .appshell.store-mode .appside .nav a[data-route="/cockpit"] {
    display: inline-flex !important; align-items: center; gap: 8px;
    background: rgba(26, 214, 232, .12); border: 1px solid rgba(26, 214, 232, .4);
    color: #dff3ff !important; border-radius: 999px; padding: 9px 18px !important; font-weight: 700;
  }
  /* Plus de hamburger ni de fond de tiroir dans le store */
  .appshell.store-mode .nav-burger { display: none !important; }
  .appshell.store-mode .nav-backdrop { display: none !important; }
  /* apptop = juste l'avatar, flottant en haut à droite au-dessus de la barre */
  .appshell.store-mode .appmaincol .apptop {
    position: fixed !important; top: 7px !important; right: 14px !important; left: auto !important;
    display: flex !important; justify-content: flex-end !important;
    background: transparent !important; border: 0 !important; padding: 0 !important; z-index: 85 !important;
  }
  .appshell.store-mode .appmaincol .apptop .apptop-left { display: none !important; }
  .appshell.store-mode .jgal .chips { padding-top: 12px !important; }
  /* Scroll libre : plus de clip vertical qui bloque / renvoie en haut */
  .appshell.store-mode { height: auto !important; min-height: 100vh; }
  .appshell.store-mode .appmaincol { overflow: visible !important; }
  .appshell.store-mode .appmaincol .main { overflow: visible !important; }
  .jgal { overflow: visible !important; min-height: 0 !important; }
  .appshell.store-mode .jgal { min-height: auto !important; }
}

/* ===== Cockpit mobile : haut épuré + « Ajouter un widget » flottant ===== */
@media (max-width: 820px) {
  /* Retire les onglets Cockpit / Synthèse / Analyses de la barre du haut */
  .apptop-left .ctab { display: none !important; }
  .apptop-left .ctabs { flex: 0 1 auto !important; }
  /* Bouton « Ajouter un widget » en pastille flottante en bas à droite */
  .apptop-left .caddw {
    position: fixed !important; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    margin: 0 !important; z-index: 95;
    border-radius: 999px !important; padding: 13px 20px !important;
    box-shadow: 0 10px 28px rgba(19, 145, 191, .5) !important;
  }
}

/* ===== Barre flottante « dock de groupe » (navigation entre modules frères d'un hub) ===== */
.group-dock { position: fixed; right: 12px; top: 50%; transform: translateY(-50%); z-index: 60; display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid var(--nc-border, #e7ecf4); border-radius: 16px; padding: 7px; box-shadow: 0 14px 38px rgba(18, 38, 63, .16); }
.group-dock-h { display: flex; align-items: center; gap: 9px; background: linear-gradient(135deg, #17c4dc, #1391bf); color: #fff; border: 0; border-radius: 11px; padding: 9px 10px; font-weight: 800; cursor: pointer; font-size: 13px; margin-bottom: 3px; }
.group-dock-i { display: flex; align-items: center; gap: 10px; background: none; border: 0; border-radius: 10px; padding: 9px 10px; cursor: pointer; color: var(--nc-navy, #16223e); font-weight: 600; font-size: 13px; text-align: left; white-space: nowrap; transition: background .12s; }
.group-dock-i:hover { background: #f1f5fa; }
.group-dock-i.active { background: rgba(23, 196, 220, .14); color: #0e7d93; }
.group-dock .gd-ic { display: inline-flex; flex: 0 0 auto; }
.group-dock .gd-ic svg { width: 19px; height: 19px; }
/* Repliée : icônes seules ; au survol de la barre, les libellés glissent (footprint minimal). */
.group-dock .gd-l, .group-dock .gd-t { max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; transition: max-width .18s ease, opacity .15s ease; }
.group-dock:hover .gd-l, .group-dock:hover .gd-t { max-width: 150px; opacity: 1; }
/* Quand le dock est affiché : on décale le contenu pour ne pas cacher les boutons de droite (desktop). */
@media (min-width: 821px) { .appshell.has-dock .appmaincol .main { padding-right: 84px; } }
@media (max-width: 820px) {
  /* Sur mobile : barre horizontale en bas, icônes seules, défilement latéral. */
  .group-dock { right: 8px; left: 8px; top: auto; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); transform: none; flex-direction: row; overflow-x: auto; max-width: none; gap: 2px; padding: 6px; }
  .group-dock::-webkit-scrollbar { display: none; }
  .group-dock .gd-l, .group-dock .gd-t { display: none; }
  .group-dock-h, .group-dock-i { padding: 10px 12px; flex: 0 0 auto; margin: 0; }
}

/* ===== Mobile : UN SEUL scroll (le document) — corrige le tremblement / scroll bloqué =====
   Cause : `html,body{height:100%}` verrouille la page à la hauteur de l'écran et
   `.main{overflow:auto}` crée un 2ᵉ conteneur de défilement interne. Sur iOS les deux
   se disputent le toucher → ça tremble et il faut forcer. On laisse le document scroller. */
@media (max-width: 820px) {
  html { height: auto !important; }
  body { height: auto !important; min-height: 100%; overflow-x: hidden; overscroll-behavior-y: none; -webkit-overflow-scrolling: touch; }
  .appshell { min-height: 100vh; height: auto !important; overflow: visible !important; }
  .appmaincol { overflow: visible !important; height: auto !important; min-height: 0 !important; }
  .appmaincol .main, .main { overflow: visible !important; height: auto !important; }
}

/* ===== Mobile : tableaux → cartes empilées (tout visible, plus de débordement) ===== */
@media (max-width: 820px) {
  .doc-table-wrap { overflow-x: visible !important; }
  .doc-table-wrap table.grid, table.grid { min-width: 0 !important; width: 100% !important; border: 0 !important; }
  table.grid, table.grid tbody, table.grid tr, table.grid td { display: block !important; width: 100% !important; }
  table.grid thead, table.grid colgroup, table.grid .grid-headrow { display: none !important; }
  table.grid tr {
    background: #fff; border: 1px solid var(--nc-border, #e7ecf4); border-radius: 14px;
    padding: 10px 14px; margin: 0 0 10px; box-shadow: 0 4px 14px rgba(18, 38, 63, .05);
  }
  table.grid tr:last-child { margin-bottom: 0; }
  table.grid td {
    padding: 7px 0 !important; border: 0 !important; border-bottom: 1px solid rgba(18, 38, 63, .06) !important;
    text-align: left !important; white-space: normal !important; min-height: 0 !important;
    display: flex !important; justify-content: space-between; align-items: center; gap: 14px;
  }
  table.grid td:last-child { border-bottom: 0 !important; }
  table.grid td::before {
    content: attr(data-label); flex: 0 0 auto; align-self: center;
    font-weight: 700; color: var(--nc-muted, #6b7a90); font-size: 11.5px;
    text-transform: uppercase; letter-spacing: .3px;
  }
  table.grid td:not([data-label])::before, table.grid td[data-label=""]::before { display: none; }
  table.grid td > * { text-align: right; }
}

/* ===== Mobile : page Produits & services rangée ===== */
@media (max-width: 820px) {
  /* Barre d'outils : recherche pleine largeur, actions secondaires 2 par ligne, primaire pleine largeur */
  .prodbar .field { flex: 1 1 100% !important; min-width: 0 !important; }
  .prodbar .btn { flex: 1 1 calc(50% - 4px); min-width: 0; justify-content: center; text-align: center; white-space: normal; line-height: 1.2; font-size: 12.5px; padding: 10px 10px; }
  .prodbar .btn.primary { flex: 1 1 100%; font-size: 14px; padding: 12px; }
  /* Catégories : une seule ligne qui défile horizontalement (swipe) */
  .prodpills { flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
  .prodpills::-webkit-scrollbar { display: none; }
  .prodpills > button { flex: 0 0 auto; }
}

/* ===== Palette de commande universelle (Ctrl/Cmd-K) ===== */
.cmdk-ov { position: fixed; inset: 0; background: rgba(12,22,38,.5); backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; z-index: 10000; }
.cmdk { width: min(640px, 92vw); background: #fff; border-radius: 16px; box-shadow: 0 30px 80px rgba(10,25,55,.35); overflow: hidden; display: flex; flex-direction: column; max-height: 70vh; }
.cmdk-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #eef2f7; }
.cmdk-head svg { width: 18px; height: 18px; stroke: #7c8aa0; flex: 0 0 auto; }
.cmdk-input { flex: 1; border: 0; outline: 0; font-size: 16px; color: #16223e; background: transparent; }
.cmdk-list { overflow: auto; padding: 6px; }
.cmdk-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.cmdk-item.on { background: #eef7fb; }
.cmdk-ic { width: 30px; height: 30px; border-radius: 8px; background: #f1f5f9; display: grid; place-items: center; flex: 0 0 auto; }
.cmdk-ic svg { width: 16px; height: 16px; stroke: #46566b; }
.cmdk-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cmdk-t b { font-size: 14px; color: #16223e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-t span { font-size: 12px; color: #7c8aa0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-tag { font-size: 11px; font-weight: 700; color: #5a6b80; background: #f1f5f9; border-radius: 100px; padding: 3px 9px; flex: 0 0 auto; }
.cmdk-empty { padding: 22px; text-align: center; color: #94a3b8; font-size: 14px; }
.cmdk-foot { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid #eef2f7; font-size: 11.5px; color: #94a3b8; }

/* ===== Bandeau « Annuler » (undo après suppression douce) ===== */
.undo-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: #16223e; color: #fff; border-radius: 12px; padding: 12px 16px; display: flex; align-items: center; gap: 16px; box-shadow: 0 16px 40px rgba(10,25,55,.4); z-index: 10001; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; font-size: 14px; }
.undo-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.undo-btn { background: transparent; border: 1px solid rgba(255,255,255,.3); color: #7fe6f0; font-weight: 700; border-radius: 8px; padding: 6px 14px; cursor: pointer; font-family: inherit; font-size: 13px; }
.undo-btn:hover { background: rgba(255,255,255,.1); }

/* Référence client (pied du menu gauche) */
.appside-ref { margin-top: 6px; font-size: 11px; color: var(--nc-muted, #8294a8); letter-spacing: .02em; font-weight: 600; opacity: .85; }

/* Fil de vie contact (Historique) */
.tl { position: relative; padding: 6px 2px 6px 6px; }
.tl-item { position: relative; padding: 0 0 18px 26px; }
.tl-item::before { content: ""; position: absolute; left: 6px; top: 14px; bottom: -4px; width: 2px; background: #e6edf5; }
.tl-item:last-child::before { display: none; }
.tl-dot { position: absolute; left: 0; top: 4px; width: 13px; height: 13px; border-radius: 50%; box-shadow: 0 0 0 3px #fff; z-index: 1; }
.tl-body { background: #f8fafc; border: 1px solid #eef2f7; border-radius: 12px; padding: 10px 12px; }
.tl-item[style*="cursor"] .tl-body:hover { background: #eef7fb; }
.tl-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tl-top b { color: var(--nc-navy, #16223e); font-size: 14px; }
.tl-date { color: #94a3b8; font-size: 12px; white-space: nowrap; }
.tl-sub { color: #46566b; font-size: 13px; margin-top: 3px; }
.tl-meta { color: #64748b; font-size: 12.5px; font-weight: 600; margin-top: 4px; }

/* Toasts SYSOP (owner) — événements plateforme */
.sysop-toasts { position: fixed; top: 16px; right: 16px; z-index: 10002; display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
.sysop-toast { display: flex; align-items: flex-start; gap: 10px; background: #fff; border: 1px solid #e3e9f1; border-left: 4px solid #22c55e; border-radius: 12px; padding: 12px 14px; box-shadow: 0 14px 34px rgba(10,25,55,.18); cursor: pointer; opacity: 0; transform: translateX(16px); transition: opacity .2s, transform .2s; }
.sysop-toast.show { opacity: 1; transform: translateX(0); }
.sysop-toast .st-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto; background: #22c55e; }
.sysop-toast .st-dot.st-attention { background: #e67e22; }
.sysop-toast .st-dot.st-urgent { background: #c0392b; }
.sysop-toast .st-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sysop-toast .st-b b { font-size: 14px; color: #16223e; }
.sysop-toast .st-b span { font-size: 12.5px; color: #64748b; }
.sysop-toast .st-x { background: transparent; border: 0; color: #b6c0cd; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.sysop-toast .st-x:hover { color: #64748b; }

/* Menu de gauche : glisser-déposer pour réordonner */
.appside .nav.topnav > a, .appside .nav.topnav > .nav-group { cursor: grab; }
.appside .nav.topnav > a:active, .appside .nav.topnav > .nav-group:active { cursor: grabbing; }
.appside .nav.topnav .nav-dragging { opacity: .5; }
.appside .nav.topnav > *[draggable="true"] { transition: opacity .12s; }

/* ===== Carte « Leia · IA » (mascotte animée) — bas du menu de gauche ===== */
.appside .leia-card { margin: auto 10px 12px; padding: 13px 13px 12px; border-radius: 16px; background: linear-gradient(160deg, rgba(26,214,232,.10), rgba(12,33,64,.55)); border: 1px solid rgba(86,230,242,.22); box-shadow: inset 0 0 22px rgba(26,214,232,.06); cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .12s; }
.appside .leia-card:hover { border-color: rgba(86,230,242,.55); box-shadow: 0 8px 26px rgba(10,25,55,.35), inset 0 0 26px rgba(26,214,232,.12); transform: translateY(-1px); }
.appside .leia-top { display: flex; align-items: center; gap: 11px; }
.appside .leia-avatar { position: relative; width: 52px; height: 52px; flex: 0 0 auto; display: grid; place-items: center; }
.appside .leia-halo { position: absolute; inset: -3px; border-radius: 50%; background: radial-gradient(circle, rgba(86,230,242,.55), rgba(26,214,232,.12) 55%, transparent 72%); filter: blur(2px); animation: leiaHalo 3.2s ease-in-out infinite; }
.appside .leia-mascot { position: relative; width: 50px; height: 50px; border-radius: 50%; object-fit: cover; box-shadow: 0 3px 8px rgba(0,0,0,.45), 0 0 0 2px rgba(86,230,242,.4); animation: leiaFloat 4.2s ease-in-out infinite; user-select: none; -webkit-user-drag: none; }
.appside .leia-eyes { transform-box: fill-box; transform-origin: center; animation: leiaBlink 5.6s ease-in-out infinite; }
.appside .leia-name { font-weight: 800; font-size: 14px; color: #eaf7ff; letter-spacing: .01em; }
.appside .leia-sub { font-size: 11.5px; line-height: 1.35; color: rgba(219,240,248,.7); margin-top: 2px; }
.appside .leia-status { display: flex; align-items: center; gap: 8px; margin-top: 11px; font-size: 12px; color: #34d399; font-weight: 600; }
.appside .leia-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.5); animation: leiaPulse 2s ease-out infinite; }
@keyframes leiaFloat { 0%,100% { transform: translateY(-2.5px) rotate(-1.2deg); } 50% { transform: translateY(2.5px) rotate(1.2deg); } }
@keyframes leiaHalo { 0%,100% { opacity: .55; transform: scale(.96); } 50% { opacity: .95; transform: scale(1.06); } }
@keyframes leiaBlink { 0%,92%,100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@keyframes leiaPulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); } 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
@media (prefers-reduced-motion: reduce) { .appside .leia-mascot, .appside .leia-halo, .appside .leia-eyes, .appside .leia-dot { animation: none; } }

/* ===== Sections accordéon (page Leia · IA) ===== */
.acc { background: var(--nc-surface, #fff); border: 1px solid var(--nc-border, #e6edf5); border-radius: 16px; margin-bottom: 14px; overflow: hidden; box-shadow: 0 1px 3px rgba(18,38,63,.06); }
.acc > .acc-h { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 18px; font-weight: 800; font-size: 16px; color: var(--nc-navy, #16223e); user-select: none; }
.acc > .acc-h::-webkit-details-marker { display: none; }
.acc > .acc-h:hover { background: var(--nc-surface-2, #f8fafc); }
.acc-chev { color: #94a3b8; display: inline-flex; transition: transform .2s; }
.acc[open] > .acc-h .acc-chev { transform: rotate(180deg); }
.acc-body { padding: 2px 18px 18px; }

/* ===== Vue calendrier mensuel (page Agenda) ===== */
.agc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.agc-title { font-size: 18px; font-weight: 800; color: var(--nc-navy, #16223e); text-transform: capitalize; min-width: 150px; }
.agc-nav { width: 32px; height: 32px; border-radius: 8px; border: 1px solid #e6edf5; background: #fff; cursor: pointer; font-size: 18px; color: #46566b; line-height: 1; }
.agc-nav:hover { background: #f1f5f9; }
.agc-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.agc-dow > div { text-align: center; font-size: 11.5px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .03em; }
.agc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.agc-cell { min-height: 98px; background: linear-gradient(160deg, #ffffff, #f3f8fd); border: 1px solid #e4edf6; border-radius: 12px; padding: 6px 6px 4px; cursor: pointer; overflow: hidden; box-shadow: 0 2px 5px rgba(18,38,63,.05); transition: transform .12s, box-shadow .12s, border-color .12s; }
.agc-cell:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(18,38,63,.13); border-color: #b9e3ee; }
.agc-cell.weekend { background: linear-gradient(160deg, #fbfaff, #eef1fb); }
.agc-cell.out { background: #f6f8fb; box-shadow: none; opacity: .7; }
.agc-cell.out .agc-num { color: #c3ccd8; }
.agc-cell.today { background: linear-gradient(160deg, #e7fbff, #d3f2f8); border-color: #19c3d6; box-shadow: 0 6px 18px rgba(25,195,214,.28); }
.agc-num { font-size: 12.5px; font-weight: 800; color: #46566b; margin-bottom: 4px; }
.agc-cell.today .agc-num { color: #0b7f9c; }
.agc-cell.today .agc-num::after { content: ""; }
.agc-ev { font-size: 11.5px; line-height: 1.3; font-weight: 600; border-radius: 6px; padding: 2px 7px; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; box-shadow: 0 1px 2px rgba(18,38,63,.08); transition: filter .1s, transform .1s; }
.agc-ev:hover { filter: brightness(.97); transform: translateX(1px); }
.agc-ev b { font-weight: 800; opacity: .85; }
.agc-ev.ev-c0 { background: linear-gradient(135deg, #dcefff, #c5e4ff); color: #0e4d84; border-left: 3px solid #2f7fe0; }
.agc-ev.ev-c1 { background: linear-gradient(135deg, #d7f7ec, #bff0dd); color: #0b6b4e; border-left: 3px solid #16a37a; }
.agc-ev.ev-c2 { background: linear-gradient(135deg, #ffe9d6, #ffd9b8); color: #8a4b16; border-left: 3px solid #f08c3a; }
.agc-ev.ev-c3 { background: linear-gradient(135deg, #f0e4ff, #e2ccff); color: #5b2b9e; border-left: 3px solid #8b5cf6; }
.agc-ev.ev-c4 { background: linear-gradient(135deg, #ffe0ec, #ffc9de); color: #9b2456; border-left: 3px solid #e6437e; }
.agc-ev.ev-c5 { background: linear-gradient(135deg, #d6f6fb, #bfeef7); color: #0b697e; border-left: 3px solid #17c0da; }
.agc-more { font-size: 11px; color: #64748b; font-weight: 700; padding: 1px 4px; }
@media (max-width: 720px) { .agc-cell { min-height: 66px; } .agc-ev { font-size: 10.5px; padding: 1px 5px; } .agc-title { font-size: 16px; min-width: 120px; } }

/* ===== Pastille vocale flottante (commander Leia à la voix) ===== */
.voice-fab { position: fixed; left: 20px; bottom: 20px; width: 46px; height: 46px; border-radius: 50%; border: 0; display: none; align-items: center; justify-content: center; background: linear-gradient(135deg, #1ac6d8, #0e8fb0); color: #fff; cursor: pointer; box-shadow: 0 8px 22px rgba(14,143,176,.4); z-index: 9990; transition: transform .12s, box-shadow .2s; }
.voice-fab:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 12px 28px rgba(14,143,176,.5); }
.voice-fab svg { width: 20px; height: 20px; position: relative; z-index: 1; }
.voice-fab .voice-ring { position: absolute; inset: 0; border-radius: 50%; }
.voice-fab.listening { background: linear-gradient(135deg, #ef4444, #b91c1c); box-shadow: 0 8px 22px rgba(239,68,68,.5); }
.voice-fab.listening .voice-ring { animation: voicePulse 1.2s ease-out infinite; }
@keyframes voicePulse { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,.55); } 70% { box-shadow: 0 0 0 14px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } }
@media (max-width: 820px) { .voice-fab { left: 14px; bottom: 78px; } }

/* ===== Interrupteurs (page Fonctionnalités) ===== */
.feat-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 4px; border-bottom: 1px solid #eef2f7; cursor: pointer; }
.feat-row:last-child { border-bottom: 0; }
.feat-lbl { font-weight: 700; color: var(--nc-navy, #16223e); font-size: 15px; }
.feat-desc { font-size: 13px; color: #7c8aa0; margin-top: 2px; }
.feat-sw { position: relative; width: 46px; height: 26px; flex: 0 0 auto; }
.feat-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.feat-slider { position: absolute; inset: 0; background: #cbd5e1; border-radius: 999px; transition: background .2s; }
.feat-slider::before { content: ''; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.feat-sw input:checked + .feat-slider { background: linear-gradient(135deg, #1ac6d8, #0e8fb0); }
.feat-sw input:checked + .feat-slider::before { transform: translateX(20px); }

/* ===== Agenda — tableau de bord (maquette juillet 2026) ===== */
.ag-topcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 16px; }
.ag-tc { padding: 16px 18px; }
.ag-tc-h { font-size: 12.5px; color: #7c8aa0; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.ag-occ { background: linear-gradient(120deg, #ffffff 58%, #ffe9ef); }
.ag-main { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.ag-left { flex: 1; min-width: 320px; }
.ag-right { width: 300px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 1100px) { .ag-right { width: 100%; } }
.ag-today { border-radius: 16px; padding: 18px 20px; color: #fff; background: linear-gradient(135deg, #3b3f7a, #6d5aa8 55%, #c98aa6); box-shadow: 0 12px 30px rgba(60, 50, 120, .28); }
.ag-right .card h4 { font-size: 14px; color: #16223e; }
.ag-leia-bar { margin-top: 16px; background: linear-gradient(120deg, #0f1e3a, #152a52); color: #fff; border-radius: 18px; padding: 15px 18px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; box-shadow: 0 14px 34px rgba(15, 30, 58, .28); }
.ag-leia-btn { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: #dfe9ff; border-radius: 12px; padding: 9px 14px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; transition: .15s; }
.ag-leia-btn:hover { background: rgba(255, 255, 255, .18); }
.ag-leia-field { display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; padding: 4px 4px 4px 12px; min-width: 220px; flex: 1; }
.ag-leia-input { flex: 1; background: transparent; border: 0; outline: 0; color: #fff; font-size: 13.5px; font-family: inherit; }
.ag-leia-input::placeholder { color: rgba(255, 255, 255, .55); }
.ag-leia-send { width: 36px; height: 36px; border-radius: 10px; border: 0; background: linear-gradient(135deg, #7c5cff, #5a6bff); color: #fff; cursor: pointer; display: grid; place-items: center; flex: 0 0 auto; }
.ag-leia-send svg { width: 18px; height: 18px; stroke: #fff; fill: none; }

/* ===== Comptabilité — tableau de bord (maquette juillet 2026) ===== */
.cp-hero { border-radius: 20px; padding: 22px 24px; color: #fff; background: linear-gradient(120deg, #5b54d6 0%, #7b6cf0 45%, #9d7ff0 100%); box-shadow: 0 16px 40px rgba(90, 70, 200, .28); margin-bottom: 22px; }
.cp-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cp-hello { font-size: 24px; font-weight: 800; }
.cp-hero-sub { opacity: .88; font-size: 13.5px; margin-top: 2px; }
.cp-search-wrap { position: relative; min-width: 260px; flex: 0 1 340px; }
.cp-search { width: 100%; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .16); color: #fff; padding: 11px 14px 11px 40px; font-size: 13.5px; font-family: inherit; outline: 0; }
.cp-search::placeholder { color: rgba(255, 255, 255, .7); }
.cp-search-ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: rgba(255, 255, 255, .85); display: grid; place-items: center; }
.cp-search-ic svg { width: 16px; height: 16px; }
.cp-hero-body { display: flex; align-items: center; gap: 20px; margin-top: 18px; }
.cp-hero-illus { flex: 0 0 210px; width: 210px; }
.cp-hero-illus svg { width: 100%; height: auto; display: block; }
@media (max-width: 960px) { .cp-hero-illus { display: none; } }
.cp-kpis { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 780px) { .cp-kpis { grid-template-columns: repeat(2, 1fr); } }
.cp-kpi { background: #fff; border: 1px solid rgba(255, 255, 255, .6); border-radius: 14px; padding: 13px 14px; box-shadow: 0 8px 22px rgba(40, 30, 90, .12); }
.cp-kpi-l { font-size: 11.5px; color: #7c8aa0; }
.cp-kpi-v { font-size: 20px; font-weight: 800; color: #16223e; margin-top: 4px; }
.cp-kpi-s { font-size: 11px; color: #94a3b8; margin-top: 6px; }
.cp-kpi-ic { width: 36px; height: 36px; border-radius: 10px; background: #f1eefb; display: grid; place-items: center; flex: 0 0 auto; }
.cp-h { font-size: 15px; color: #16223e; margin: 4px 0 12px; font-weight: 800; }
.cp-qgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 24px; }
.cp-qt { background: #fff; border: 1px solid #eef1f6; border-radius: 14px; padding: 16px; cursor: pointer; transition: .15s; display: flex; flex-direction: column; }
.cp-qt:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(30, 40, 80, .1); border-color: #e0e5ee; }
.cp-qt-ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 12px; }
.cp-qt-t { font-weight: 800; color: #16223e; font-size: 14.5px; }
.cp-qt-d { font-size: 12.5px; color: #7c8aa0; margin-top: 4px; flex: 1; }
.cp-qt-cta { margin-top: 12px; font-size: 12.5px; font-weight: 700; color: #5b54d6; border-top: 1px solid #f0f3f8; padding-top: 10px; }
.cp-wrow { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; margin-bottom: 22px; }
@media (max-width: 1050px) { .cp-wrow { grid-template-columns: 1fr; } }
.cp-w-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cp-w-head h4 { margin: 0; font-size: 14.5px; color: #16223e; }
.cp-w-link { font-size: 12.5px; color: #5b54d6; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; }
.cp-w-sub { font-size: 12px; color: #94a3b8; margin: 2px 0 8px; }
.cp-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 1px solid #f2f4f8; }
.cp-w-head + .cp-row, .cp-w-sub + div .cp-row:first-child { border-top: 0; }
.cp-row-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto; }
.cp-row-t { font-weight: 700; color: #16223e; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-row-s { font-size: 11.5px; color: #94a3b8; }
.cp-date { width: 42px; flex: 0 0 auto; text-align: center; background: #f5f7fb; border-radius: 9px; padding: 5px 0; line-height: 1.1; }
.cp-date b { display: block; font-size: 16px; color: #16223e; }
.cp-date span { font-size: 10px; color: #94a3b8; font-weight: 700; }
.cp-badge { display: inline-block; margin-top: 3px; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.cp-badge.red { background: #fdecec; color: #c0392b; }
.cp-badge.amber { background: #fff4e5; color: #d97706; }
.cp-badge.blue { background: #eef4ff; color: #2563eb; }
.cp-leia { background: linear-gradient(120deg, #efeafe, #f4effe); border: 1px solid #e6dffb; border-radius: 18px; padding: 18px 20px; display: grid; grid-template-columns: 1.1fr 2fr; gap: 18px; align-items: center; margin-bottom: 24px; }
@media (max-width: 900px) { .cp-leia { grid-template-columns: 1fr; } }
.cp-leia-head { display: flex; align-items: flex-start; gap: 12px; }
.cp-leia-av { width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto; }
.cp-leia-btn { background: linear-gradient(135deg, #6d5ae6, #8b5cf6); color: #fff; border: 0; border-radius: 11px; padding: 9px 16px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.cp-leia-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 700px) { .cp-leia-cards { grid-template-columns: 1fr; } }
.cp-leia-card { background: #fff; border: 1px solid #ece7fb; border-radius: 13px; padding: 13px 14px; cursor: pointer; transition: .15s; }
.cp-leia-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(90, 70, 200, .12); }
.cp-leia-cic { width: 34px; height: 34px; border-radius: 9px; background: #f1edfd; color: #6d5ae6; display: grid; place-items: center; margin-bottom: 9px; }
.cp-leia-ct { font-weight: 800; color: #16223e; font-size: 13.5px; }
.cp-leia-cd { font-size: 12px; color: #7c8aa0; margin: 3px 0 8px; }
.cp-leia-clink { font-size: 12.5px; font-weight: 700; color: #6d5ae6; }

/* ===== Administration — tableau de bord (maquette juillet 2026) ===== */
.ad-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 20px; }
.ad-kpi { background: #fff; border: 1px solid #eef1f6; border-radius: 15px; padding: 15px 16px; display: flex; gap: 12px; align-items: flex-start; }
.ad-kpi-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto; }
.ad-kpi-l { font-size: 12px; color: #7c8aa0; }
.ad-kpi-v { font-size: 26px; font-weight: 800; color: #16223e; line-height: 1.1; margin-top: 2px; }
.ad-kpi-s { font-size: 11.5px; color: #94a3b8; margin-top: 4px; }
.ad-kpi-s.up { color: #16a34a; font-weight: 700; }
.ad-crow { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; margin-bottom: 22px; }
@media (max-width: 1000px) { .ad-crow { grid-template-columns: 1fr; } }
.ad-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ad-chart-head h4 { margin: 0; font-size: 15px; color: #16223e; }
.ad-link { font-size: 12.5px; color: #5b54d6; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; }
.ad-h { font-size: 15px; color: #16223e; margin: 4px 0 12px; font-weight: 800; }
.ad-qgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 13px; margin-bottom: 24px; }
.ad-qt { background: #fff; border: 1px solid #eef1f6; border-radius: 14px; padding: 15px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: .15s; }
.ad-qt:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(30, 40, 80, .1); border-color: #e0e5ee; }
.ad-qt-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto; }
.ad-qt-t { font-weight: 800; color: #16223e; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-qt-d { font-size: 11.5px; color: #7c8aa0; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-qt-arw { color: #b7c0d0; flex: 0 0 auto; display: grid; place-items: center; }
.ad-qt-arw svg { width: 18px; height: 18px; }
.ad-qt:hover .ad-qt-arw { color: #5b54d6; }
.ad-brow { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 18px; }
@media (max-width: 1000px) { .ad-brow { grid-template-columns: 1fr; } }
.ad-help { border-radius: 18px; padding: 20px; color: #fff; position: relative; overflow: hidden; background: radial-gradient(120% 120% at 85% 15%, #7b5cff 0%, #5b3fe0 45%, #3a2bb0 100%); }
.ad-help-av { position: absolute; right: 10px; bottom: 8px; width: 96px; height: 96px; border-radius: 50%; opacity: .95; }
.ad-help-btn { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); color: #fff; border-radius: 11px; padding: 9px 15px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; }
.ad-help-btn:hover { background: rgba(255, 255, 255, .26); }
.ad-strip { background: #f6f4fe; border: 1px solid #e9e4fb; border-radius: 14px; padding: 13px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ad-strip-ic { width: 32px; height: 32px; border-radius: 9px; background: #ece7fb; color: #6d5ae6; display: grid; place-items: center; flex: 0 0 auto; }
.ad-strip-btn { margin-left: auto; background: #fff; border: 1px solid #e0dcf3; color: #5b54d6; border-radius: 10px; padding: 9px 15px; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; }
.ad-strip-btn:hover { background: #f2effd; }

/* ===== Produits & services — catalogue (maquette juillet 2026) ===== */
.pv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 4px 0 18px; }
.pv-kpi { background: #fff; border: 1px solid #eef1f6; border-radius: 15px; padding: 15px 16px; display: flex; gap: 12px; align-items: flex-start; }
.pv-kpi-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto; }
.pv-kpi-l { font-size: 12px; color: #7c8aa0; }
.pv-kpi-v { font-size: 24px; font-weight: 800; color: #16223e; line-height: 1.1; margin-top: 2px; }
.pv-kpi-s { font-size: 11.5px; color: #94a3b8; margin-top: 4px; }
.pv-kpi-s.up { color: #16a34a; font-weight: 700; }
.pv-bar { padding: 14px 16px; }
.pv-bar-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pv-search-wrap { position: relative; flex: 1; min-width: 220px; }
.pv-search-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: #94a3b8; }
.pv-search-ic svg { width: 16px; height: 16px; }
.pv-search { width: 100%; border: 1px solid #e3e8f0; border-radius: 11px; padding: 10px 12px 10px 36px; font-size: 13.5px; font-family: inherit; outline: 0; background: #fff; }
.pv-search:focus { border-color: #c9bef7; box-shadow: 0 0 0 3px rgba(124, 92, 255, .12); }
.pv-fsel, .pv-fbtn { border: 1px solid #e3e8f0; background: #fff; border-radius: 11px; padding: 9px 13px; font-size: 13px; font-weight: 600; color: #46566b; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.pv-fsel:hover, .pv-fbtn:hover { border-color: #c9bef7; color: #5b3fe0; }
.pv-primary { border: 0; background: linear-gradient(135deg, #6d5ae6, #8b5cf6); color: #fff; border-radius: 11px; padding: 10px 16px; font-size: 13.5px; font-weight: 700; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.pv-primary:hover { filter: brightness(1.05); }
.pv-vtoggle { display: inline-flex; border: 1px solid #e3e8f0; border-radius: 11px; overflow: hidden; }
.pv-vbtn { border: 0; background: #fff; color: #94a3b8; padding: 8px 11px; cursor: pointer; display: grid; place-items: center; }
.pv-vbtn svg { width: 18px; height: 18px; }
.pv-vbtn.on { background: #f1edfd; color: #5b3fe0; }
.pv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 4px; }
.pv-card { position: relative; display: flex; flex-direction: column; gap: 8px; border: 1px solid #eef1f6; border-radius: 16px; padding: 15px; background: #fff; cursor: pointer; transition: box-shadow .15s, border-color .15s, transform .15s; }
.pv-card:hover { box-shadow: 0 12px 26px rgba(30, 40, 80, .1); border-color: #e0e5ee; transform: translateY(-2px); }
.pv-card.sel { border-color: #8b5cf6; box-shadow: 0 0 0 2px rgba(139, 92, 246, .18); }
.pv-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.pv-avatar { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: 0 0 auto; }
.pv-avatar.sm { width: 32px; height: 32px; border-radius: 9px; }
.pv-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pv-b { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.pv-b.svc { background: #eef4ff; color: #2563eb; }
.pv-b.good { background: #eafaf0; color: #16a34a; }
.pv-b.bad { background: #fdecec; color: #c0392b; }
.pv-title { font-weight: 800; color: #16223e; font-size: 14.5px; line-height: 1.3; }
.pv-cattag { align-self: flex-start; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 8px; }
.pv-desc { font-size: 12.5px; color: #7c8aa0; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 34px; }
.pv-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.pv-price b { font-size: 15px; color: #16223e; }
.pv-vat { font-size: 11.5px; color: #94a3b8; }
.pv-tiers { font-size: 10.5px; font-weight: 700; background: #f3efff; color: #7c5cff; padding: 2px 7px; border-radius: 999px; }
.pv-actions { display: flex; align-items: center; gap: 4px; border-top: 1px solid #f0f3f8; padding-top: 10px; margin-top: 4px; }
.pv-cb { width: 16px; height: 16px; margin: 0 6px 0 2px; accent-color: #8b5cf6; cursor: pointer; }
.pv-act { border: 0; background: transparent; color: #94a3b8; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; transition: .12s; }
.pv-act svg { width: 16px; height: 16px; }
.pv-act:hover { background: #f1edfd; color: #5b3fe0; }
.pv-act.danger:hover { background: #fdecec; color: #c0392b; }
.pv-newcard { align-items: center; justify-content: center; text-align: center; border: 2px dashed #d7dbe6; background: #fafbfe; gap: 6px; min-height: 220px; }
.pv-newcard:hover { border-color: #b9a9f5; background: #f7f4fe; box-shadow: none; }
.pv-new-plus { width: 44px; height: 44px; border-radius: 50%; background: #f1edfd; color: #6d5ae6; display: grid; place-items: center; }
.pv-new-plus svg { width: 22px; height: 22px; }
.pv-new-t { font-weight: 800; color: #16223e; font-size: 14px; }
.pv-new-d { font-size: 12px; color: #94a3b8; max-width: 200px; }
.pv-list { display: flex; flex-direction: column; gap: 8px; }
.pv-row { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #eef1f6; border-radius: 12px; padding: 11px 14px; }
.pv-row:hover { border-color: #e0e5ee; }
.pv-row-t { font-weight: 700; color: #16223e; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-row-s { font-size: 11.5px; color: #94a3b8; }
.pv-row-price { font-weight: 800; color: #16223e; font-size: 13.5px; white-space: nowrap; }
.pv-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.pv-page-info { font-size: 12.5px; color: #7c8aa0; }
.pv-page-nav { display: flex; align-items: center; gap: 4px; }
.pv-page { min-width: 34px; height: 34px; border: 1px solid #e3e8f0; background: #fff; border-radius: 9px; font-size: 13px; font-weight: 600; color: #46566b; cursor: pointer; font-family: inherit; }
.pv-page:hover:not(.dis) { border-color: #c9bef7; color: #5b3fe0; }
.pv-page.on { background: linear-gradient(135deg, #6d5ae6, #8b5cf6); color: #fff; border-color: transparent; }
.pv-page.dis { opacity: .4; cursor: default; }
.pv-dots { padding: 0 4px; color: #94a3b8; }

/* ===== Produits & services — compléments maquette finale ===== */
/* Compact : on neutralise le select{width:100%} global qui empilait les filtres. */
.pv-bar-row .pv-fsel { width: auto; min-width: 96px; flex: 0 0 auto; margin: 0; }
.pv-fsel { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }
.pv-sortwrap, .pv-perpage { display: inline-flex; align-items: center; gap: 8px; }
.pv-perpage .pv-fsel, .pv-sortwrap .pv-fsel { width: auto; min-width: 120px; flex: 0 0 auto; margin: 0; }
.pv-search-wrap { flex: 1 1 240px; min-width: 200px; }
.pv-bar-row { row-gap: 10px; }
.pv-sort-l { font-size: 12.5px; color: #7c8aa0; white-space: nowrap; }
.pv-morepill { border: 1px solid #e3e8f0; background: #fff; color: #7c8aa0; border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 700; cursor: pointer; }
.pv-morepill:hover { border-color: #c9bef7; color: #5b3fe0; }
.pv-more-wrap { position: relative; display: inline-flex; }
.pv-menu { position: absolute; right: 0; bottom: 38px; background: #fff; border: 1px solid #e8edf5; border-radius: 12px; box-shadow: 0 14px 34px rgba(20, 30, 60, .16); padding: 6px; min-width: 168px; display: none; z-index: 40; }
.pv-more-wrap.open .pv-menu { display: block; }
.pv-mitem { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: transparent; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: #33415a; font-family: inherit; cursor: pointer; text-align: left; }
.pv-mitem:hover { background: #f1edfd; color: #5b3fe0; }
.pv-mitem.danger:hover { background: #fdecec; color: #c0392b; }
.pv-mic { display: grid; place-items: center; width: 16px; height: 16px; }
.pv-mic svg { width: 16px; height: 16px; }
.pv-rail { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid #eef1f6; border-radius: 16px; padding: 8px 6px; box-shadow: 0 12px 30px rgba(20, 30, 60, .1); z-index: 30; }
.pv-rail-b { border: 0; background: transparent; color: #94a3b8; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; transition: .12s; }
.pv-rail-b svg { width: 19px; height: 19px; }
.pv-rail-b:hover { background: #f1edfd; color: #5b3fe0; }
@media (max-width: 1280px) { .pv-rail { display: none; } }

/* ===== Coffre-fort — tableau de bord (maquette juillet 2026) ===== */
.cf-hero { background: radial-gradient(120% 140% at 78% 20%, #241a4a 0%, #14162b 55%, #0c0e1c 100%); border-radius: 20px; padding: 30px 32px; color: #fff; display: flex; align-items: center; gap: 20px; overflow: hidden; margin-bottom: 20px; box-shadow: 0 18px 46px rgba(15, 10, 40, .35); }
.cf-hero-txt { flex: 1; min-width: 260px; }
.cf-hero-img { flex: 0 0 300px; max-width: 320px; }
.cf-hero-img svg { width: 100%; height: auto; display: block; }
/* Photo réelle du coffre — visible mais discrète une fois déverrouillé */
img.cf-hero-img { width: 300px; height: 200px; object-fit: cover; border-radius: 16px; opacity: .78; box-shadow: 0 14px 34px rgba(0,0,0,.5), inset 0 0 0 1px rgba(139,92,255,.25); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%); mask-image: linear-gradient(90deg, transparent 0%, #000 26%); }
/* État VERROUILLÉ : ambiance « Fort Knox » — coffre imposant, mis en pleine lumière */
.cf-hero-lock { padding: 40px 40px; min-height: 340px; }
.cf-hero-lock .cf-hero-txt { flex: 1 1 340px; }
.cf-hero-lock img.cf-hero-img { flex: 0 0 440px; width: 440px; height: 300px; max-width: 46%; opacity: 1; box-shadow: 0 22px 60px rgba(0,0,0,.6), 0 0 60px rgba(139,92,255,.35), inset 0 0 0 1px rgba(139,92,255,.35); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%); mask-image: linear-gradient(90deg, transparent 0%, #000 18%); animation: cfVaultGlow 5s ease-in-out infinite; }
@keyframes cfVaultGlow { 0%,100% { box-shadow: 0 22px 60px rgba(0,0,0,.6), 0 0 46px rgba(139,92,255,.3), inset 0 0 0 1px rgba(139,92,255,.3); } 50% { box-shadow: 0 22px 60px rgba(0,0,0,.6), 0 0 78px rgba(139,92,255,.5), inset 0 0 0 1px rgba(139,92,255,.45); } }
@media (max-width: 820px) { .cf-hero-img { display: none; } }
.cf-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(139, 92, 255, .22); border: 1px solid rgba(139, 92, 255, .4); color: #cdbcff; font-size: 11px; font-weight: 800; letter-spacing: .4px; padding: 5px 11px; border-radius: 999px; }
.cf-hero-title { font-size: 30px; font-weight: 800; margin: 14px 0 8px; }
.cf-hero-hl { color: #9d8bff; }
.cf-hero-sub { color: rgba(255, 255, 255, .72); font-size: 14px; max-width: 460px; margin: 0 0 18px; line-height: 1.5; }
.cf-hero-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.cf-hero-note { font-size: 12.5px; color: rgba(255, 255, 255, .7); margin-top: 8px; }
.cf-hero-note.err { color: #ff9b9b; }
.cf-btn { border: 0; border-radius: 12px; padding: 12px 20px; font-size: 13.5px; font-weight: 700; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.cf-btn.primary { background: linear-gradient(135deg, #7c5cff, #9d5cff); color: #fff; box-shadow: 0 10px 24px rgba(124, 92, 255, .4); }
.cf-btn.primary:hover { filter: brightness(1.06); }
.cf-btn.ghost { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); color: #fff; }
.cf-btn.ghost:hover { background: rgba(255, 255, 255, .16); }
.cf-pw { width: 100%; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); border-radius: 12px; padding: 11px 14px; color: #fff; font-size: 13.5px; font-family: inherit; outline: 0; }
.cf-pw::placeholder { color: rgba(255, 255, 255, .5); }
.cf-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
@media (max-width: 820px) { .cf-kpis { grid-template-columns: repeat(2, 1fr); } }
.cf-kpi { background: #fff; border: 1px solid #eef1f6; border-radius: 15px; padding: 15px 16px; display: flex; gap: 12px; align-items: flex-start; }
.cf-kpi-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto; }
.cf-kpi-l { font-size: 12px; color: #7c8aa0; }
.cf-kpi-v { font-size: 24px; font-weight: 800; color: #16223e; line-height: 1.1; margin-top: 3px; }
.cf-kpi-s { font-size: 11.5px; color: #94a3b8; margin-top: 4px; }
.cf-sec-head { display: flex; align-items: center; justify-content: space-between; }
.cf-h { font-size: 15px; color: #16223e; margin: 4px 0 14px; font-weight: 800; }
.cf-spaces { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-bottom: 22px; }
.cf-space { background: #fff; border: 1px solid #eef1f6; border-radius: 16px; padding: 16px; cursor: pointer; transition: .15s; text-align: left; display: flex; flex-direction: column; gap: 4px; font-family: inherit; }
.cf-space:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(30, 40, 80, .1); border-color: #e0e5ee; }
.cf-safe { width: 92px; height: 84px; border-radius: 14px; margin-bottom: 10px; display: grid; place-items: center; background: radial-gradient(130% 120% at 50% 20%, var(--c) 0%, #1b1e33 48%, #10131f 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 8px 18px rgba(0, 0, 0, .2); }
.cf-safe .vault-door { transform: scale(.62); }
.cf-space-t { font-weight: 800; color: #16223e; font-size: 14.5px; }
.cf-space-s { font-size: 12px; color: #7c8aa0; }
.cf-space-link { font-size: 12.5px; font-weight: 700; color: #5b54d6; margin-top: 8px; }
.cf-newspace { align-items: center; justify-content: center; text-align: center; border: 2px dashed #d7dbe6; background: #fafbfe; }
.cf-newspace:hover { border-color: #b9a9f5; background: #f7f4fe; box-shadow: none; }
.cf-plus { width: 48px; height: 48px; border-radius: 50%; background: #f1edfd; color: #6d5ae6; display: grid; place-items: center; margin-bottom: 8px; }
.cf-plus svg { width: 22px; height: 22px; }
.cf-brow { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 20px; }
@media (max-width: 1000px) { .cf-brow { grid-template-columns: 1fr; } }
.cf-panel-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.cf-panel-h h4 { margin: 0; font-size: 14.5px; color: #16223e; }
.cf-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 1px solid #f2f4f8; }
.cf-panel-h + div .cf-row:first-child { border-top: 0; }
.cf-row-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto; }
.cf-row-t { font-weight: 700; color: #16223e; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-row-s { font-size: 11.5px; color: #94a3b8; }
.cf-empty { color: #94a3b8; font-size: 13px; padding: 14px 0; }
.cf-donut-wrap { position: relative; width: 150px; height: 150px; margin: 6px auto 0; }
.cf-donut svg { width: 150px; height: 150px; }
.cf-donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.cf-donut-c b { font-size: 14px; color: #16223e; }
.cf-donut-c span { font-size: 11.5px; color: #94a3b8; }
.cf-leg { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #46566b; padding: 3px 0; }
.cf-leg-d { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.cf-storage-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 10px; border-top: 1px solid #f2f4f8; font-size: 12.5px; color: #7c8aa0; }
.cf-link { color: #5b54d6; font-weight: 700; cursor: pointer; text-decoration: none; }
.cf-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) { .cf-strip { grid-template-columns: repeat(2, 1fr); } }
.cf-feat { background: #fff; border: 1px solid #eef1f6; border-radius: 14px; padding: 15px; display: flex; gap: 11px; align-items: flex-start; }
.cf-feat-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; }
.cf-feat-t { font-weight: 800; color: #16223e; font-size: 13.5px; }
.cf-feat-d { font-size: 12px; color: #7c8aa0; margin-top: 3px; line-height: 1.4; }

/* ===== JoomStore V2 — page sombre, menu conservé (maquette juillet 2026) ===== */
.appshell.store2-mode .appmaincol .main { background: linear-gradient(180deg, #0d2440, #091627); padding: 0; }
.appshell.store2-mode .apptop { background: #0d2440; border-bottom: 1px solid rgba(255,255,255,.05); }
.js2 { padding: 22px 26px 40px; color: #d6e0f5; background: radial-gradient(70% 55% at 62% 6%, rgba(48,74,150,.22) 0%, rgba(13,36,64,0) 60%), linear-gradient(180deg, #0d2440, #091627); min-height: 100%; }
.js2 .placeholder { color: #9fb0d0; }
.js2-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.js2-head-ic { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg,#7c5cff,#5a6bff); color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.js2-head-ic svg { width: 22px; height: 22px; }
.js2-title { font-size: 24px; font-weight: 800; color: #fff; }
.js2-sub { font-size: 13px; color: #93a2c4; margin-top: 2px; }
.js2-searchwrap { position: relative; width: 340px; max-width: 40vw; }
.js2-search { width: 100%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 11px 44px 11px 38px; color: #e6ecfb; font-size: 13.5px; font-family: inherit; outline: 0; }
.js2-search::placeholder { color: #6b7a9c; }
.js2-search-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: #7c8aa8; }
.js2-search-ic svg { width: 16px; height: 16px; }
.js2-kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 11px; color: #7c8aa8; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 6px; padding: 2px 6px; }
.js2-tabs { display: inline-flex; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 4px; gap: 4px; margin-bottom: 18px; }
.js2-tab { border: 0; background: transparent; color: #9fb0d0; padding: 9px 18px; border-radius: 9px; font-size: 13.5px; font-weight: 700; font-family: inherit; cursor: pointer; }
.js2-tab.on { background: linear-gradient(135deg,#6d5ae6,#8b5cf6); color: #fff; box-shadow: 0 6px 16px rgba(124,92,255,.4); }
.js2-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
/* Dropdown « Univers » maison (remplace les chips js2-pill) */
.js2-univdd { position: relative; }
.js2-univ-trig { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: #d6e0f5; border-radius: 10px; padding: 8px 12px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: .15s; }
.js2-univ-trig:hover { border-color: rgba(124,92,255,.5); }
.js2-univdd.open .js2-univ-trig { border-color: rgba(56,189,248,.55); }
.js2-univ-ic { display: grid; place-items: center; width: 16px; height: 16px; flex: 0 0 auto; }
.js2-univ-ic svg { width: 16px; height: 16px; }
.js2-univ-chev { display: grid; place-items: center; color: #7c88a8; transition: transform .18s; }
.js2-univ-chev svg { width: 13px; height: 13px; }
.js2-univdd.open .js2-univ-chev { transform: rotate(180deg); }
.js2-univ-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 216px; background: rgba(17,22,42,.97); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.1); border-radius: 13px; padding: 6px; box-shadow: 0 18px 40px rgba(0,0,0,.45); display: none; }
.js2-univdd.open .js2-univ-pop { display: block; }
.js2-univ-opt { display: flex; align-items: center; gap: 10px; width: 100%; background: transparent; border: 0; color: #c4d0ea; border-radius: 9px; padding: 9px 11px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; transition: .12s; }
.js2-univ-opt:hover { background: rgba(255,255,255,.06); }
.js2-univ-opt.on { background: rgba(56,189,248,.14); color: #dbeafe; }
.js2-univ-optlbl { flex: 1; }
.js2-sort { display: inline-flex; align-items: center; gap: 8px; color: #93a2c4; font-size: 13px; }
.js2-sortsel { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: #d6e0f5; border-radius: 10px; padding: 8px 12px; font-family: inherit; font-size: 13px; width: auto; }
.js2-main { display: flex; gap: 20px; align-items: flex-start; }
.js2-center { flex: 1 1 auto; min-width: 0; }
.js2-right { width: 320px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 1150px) { .js2-main { flex-direction: column; } .js2-right { width: 100%; flex-direction: row; flex-wrap: wrap; } .js2-right > * { flex: 1 1 260px; } }
/* --- Constellation --- */
.js2-stage { position: relative; height: 560px; border-radius: 18px; background: radial-gradient(60% 60% at 50% 50%, rgba(40,60,140,.16), rgba(10,14,30,0) 70%); overflow: hidden; }
.js2-rays { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.js2-ray { animation: js2dash 2.4s linear infinite; filter: drop-shadow(0 0 2px currentColor); }
@keyframes js2dash { to { stroke-dashoffset: -14; } }
.js2-planet { position: absolute; left: 50%; top: 50%; width: 154px; height: 154px; transform: translate(-50%,-50%); display: grid; place-items: center; }
.js2-planet-core { width: 128px; height: 128px; border-radius: 50%; background: radial-gradient(38% 34% at 40% 32%, #7fdcff 0%, #2f7fe6 34%, #1b3aa8 70%, #0e1e6b 100%); box-shadow: 0 0 46px 10px rgba(58,120,246,.55), inset 0 0 30px rgba(160,210,255,.5); display: grid; place-items: center; text-align: center; animation: js2breathe 4s ease-in-out infinite; }
@keyframes js2breathe { 0%,100% { box-shadow: 0 0 40px 8px rgba(58,120,246,.5), inset 0 0 30px rgba(160,210,255,.45); } 50% { box-shadow: 0 0 60px 16px rgba(80,150,255,.7), inset 0 0 34px rgba(190,225,255,.6); } }
.js2-planet-ring { position: absolute; inset: -14px 6px; border-radius: 50%; border: 2px solid rgba(120,180,255,.4); border-top-color: transparent; border-bottom-color: transparent; transform: rotate(-24deg); box-shadow: 0 0 18px rgba(90,150,255,.3); animation: js2spin 9s linear infinite; }
@keyframes js2spin { to { transform: rotate(336deg); } }
.js2-planet-name { font-size: 21px; font-weight: 800; color: #fff; letter-spacing: .5px; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.js2-planet-st { font-size: 11px; color: #bfe0ff; display: flex; align-items: center; gap: 5px; justify-content: center; margin-top: 3px; }
.js2-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; display: inline-block; }
.js2-node { position: absolute; transform: translate(-50%,-50%); width: 128px; background: rgba(17,22,42,.72); border: 1.5px solid var(--nc); border-radius: 16px; padding: 12px 10px 10px; display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; font-family: inherit; backdrop-filter: blur(4px); box-shadow: 0 0 0 1px rgba(255,255,255,.03), 0 0 22px -6px var(--nc); transition: transform .18s, box-shadow .18s; animation: js2float 6s ease-in-out infinite; }
.js2-node:hover { transform: translate(-50%,-50%) scale(1.06); box-shadow: 0 0 30px -4px var(--nc); z-index: 5; }
.js2-node.dim { opacity: .32; filter: saturate(.5); }
@keyframes js2float { 0%,100% { margin-top: 0; } 50% { margin-top: -6px; } }
.js2-node-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg,#6d5ae6,#8b5cf6); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .4px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; box-shadow: 0 4px 12px rgba(124,92,255,.5); }
.js2-node-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--nc); background: color-mix(in srgb, var(--nc) 18%, #0c1126); }
.js2-node-ic svg { width: 22px; height: 22px; }
.js2-node-name { font-size: 13px; font-weight: 800; color: #eef3ff; text-align: center; line-height: 1.15; }
.js2-node-st { font-size: 10.5px; color: #8ea0c4; display: flex; align-items: center; gap: 4px; }
/* --- Panneaux droite --- */
.js2-panel { background: rgba(17,22,42,.6); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 16px; }
.js2-panel-t { font-size: 14px; font-weight: 800; color: #eef3ff; margin-bottom: 12px; }
.js2-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.js2-stat { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 11px; }
.js2-stat-ic { width: 30px; height: 30px; border-radius: 9px; background: rgba(56,189,248,.12); display: grid; place-items: center; flex: 0 0 auto; }
.js2-stat-ic svg { width: 17px; height: 17px; }
.js2-stat-n { font-size: 18px; font-weight: 800; color: #fff; }
.js2-stat-l { font-size: 10.5px; color: #93a2c4; }
.js2-grow { background: linear-gradient(160deg,#201a4c 0%,#31287f 48%,#4a34c4 100%); border-radius: 18px; padding: 22px; position: relative; overflow: hidden; min-height: 300px; }
.js2-grow::after { content: ''; position: absolute; right: -30px; bottom: -30px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(139,92,255,.5), transparent 70%); }
.js2-grow-img { position: absolute; z-index: 1; }
img.js2-grow-img { width: 250px; max-width: 62%; right: 4px; bottom: -18px; mix-blend-mode: screen; filter: brightness(1.05) saturate(1.05); animation: js2rocket2 5s ease-in-out infinite; }
@keyframes js2rocket2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
div.js2-grow-img { top: 40px; right: -12px; width: 210px; transform: rotate(24deg); filter: drop-shadow(0 12px 26px rgba(0,0,0,.45)); animation: js2rocket 5s ease-in-out infinite; }
@keyframes js2rocket { 0%,100% { transform: rotate(24deg) translateY(0); } 50% { transform: rotate(24deg) translateY(-8px); } }
.js2-grow-t { position: relative; z-index: 2; font-size: 20px; font-weight: 800; color: #fff; max-width: 180px; line-height: 1.22; }
.js2-grow-d { position: relative; z-index: 2; font-size: 12.5px; color: rgba(255,255,255,.84); margin: 12px 0 18px; max-width: 175px; line-height: 1.45; }
.js2-grow-btn { position: relative; z-index: 2; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 11px; padding: 11px 18px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.js2-grow-btn:hover { background: rgba(255,255,255,.26); }
.js2-help { background: rgba(17,22,42,.6); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 16px; display: flex; gap: 12px; align-items: center; }
.js2-help-av { width: 54px; height: 54px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 2px rgba(124,92,255,.4); }
.js2-help-t { font-size: 14px; font-weight: 800; color: #eef3ff; }
.js2-help-d { font-size: 11.5px; color: #93a2c4; margin: 3px 0 10px; }
.js2-help-btn { background: linear-gradient(135deg,#6d5ae6,#8b5cf6); border: 0; color: #fff; border-radius: 10px; padding: 8px 13px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
/* --- Populaires / options --- */
.js2-sec-h { display: flex; align-items: center; justify-content: space-between; margin: 24px 0 14px; }
.js2-sec-h h3 { margin: 0; font-size: 16px; color: #eef3ff; font-weight: 800; }
.js2-voir { color: #8ba6ff; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.js2-pops { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.js2-optgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 14px; }
@media (max-width: 1250px) { .js2-pops { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .js2-pops { grid-template-columns: repeat(2, 1fr); } }
.js2-pop { background: rgba(17,22,42,.66); border: 1px solid rgba(255,255,255,.08); border-radius: 15px; padding: 15px; display: flex; flex-direction: column; gap: 7px; transition: .15s; }
.js2-pop:hover { border-color: rgba(124,92,255,.45); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.35); }
.js2-pop-top { display: flex; align-items: center; justify-content: space-between; min-height: 20px; }
.js2-pop-badge { font-size: 9.5px; font-weight: 800; letter-spacing: .3px; padding: 3px 8px; border-radius: 999px; }
.js2-pop-badge.pop { background: rgba(59,130,246,.18); color: #7db0ff; }
.js2-pop-badge.new { background: rgba(34,197,94,.18); color: #63e29a; }
.js2-pop-arrow { color: #5c6b8c; }
.js2-pop-arrow svg { width: 16px; height: 16px; }
.js2-pop-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: var(--nc); background: color-mix(in srgb, var(--nc) 16%, #0c1126); margin: 2px auto 4px; }
.js2-pop-ic svg { width: 24px; height: 24px; }
.js2-pop-t { font-size: 14px; font-weight: 800; color: #eef3ff; text-align: center; }
.js2-pop-d { font-size: 11.5px; color: #8ea0c4; text-align: center; line-height: 1.4; flex: 1; }
.js2-pop-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.js2-pop-price { font-size: 15px; font-weight: 800; color: #fff; }
.js2-pop-plus { width: 32px; height: 32px; border-radius: 10px; border: 0; background: linear-gradient(135deg,#6d5ae6,#8b5cf6); color: #fff; cursor: pointer; display: grid; place-items: center; }
.js2-pop-plus svg { width: 17px; height: 17px; }
/* Accent par option (couleur du module/option) + badges + features */
.js2-pop { position: relative; }
.js2-pop::before { content: ''; position: absolute; top: 0; left: 18px; right: 18px; height: 2px; border-radius: 0 0 3px 3px; background: var(--nc, #3b82f6); opacity: .85; }
.js2-pop-badge.prem { background: color-mix(in srgb, var(--nc,#7c5cff) 24%, transparent); color: color-mix(in srgb, var(--nc,#7c5cff) 65%, #fff); }
.js2-pop-badge.opt { background: rgba(56,189,248,.16); color: #7fd3f7; }
.js2-pop-badge.free { background: rgba(34,197,94,.18); color: #63e29a; }
.js2-pop-feats { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: 1px; }
.js2-pop-feat { font-size: 10px; font-weight: 600; color: #b7c4e0; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 999px; padding: 3px 8px; }

/* ===== JoomStore V2 — refinement « constellation vivante » (carte stellaire premium) ===== */
.appshell.store2-mode .appmaincol .main { background: radial-gradient(90% 70% at 60% -5%, #0C2144 0%, #081B35 45%, #060D1D 100%); }
.appshell.store2-mode .apptop { background: #071326; }
.js2 { background: radial-gradient(70% 55% at 62% 4%, rgba(66,200,255,.10) 0%, rgba(12,33,68,0) 55%), linear-gradient(180deg, #071326 0%, #081B35 50%, #0C2144 100%); }
/* Fond stellaire */
.js2-space { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side at 22% 30%, rgba(120,90,255,.10), transparent 70%), radial-gradient(closest-side at 78% 64%, rgba(50,200,255,.10), transparent 70%), radial-gradient(closest-side at 55% 88%, rgba(255,120,200,.06), transparent 70%); }
.js2-space::before, .js2-space::after { content: ''; position: absolute; inset: -20%; background-repeat: repeat; background-size: 260px 260px;
  background-image: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.55), transparent), radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,.45), transparent), radial-gradient(1px 1px at 80% 20%, rgba(180,220,255,.5), transparent), radial-gradient(1.5px 1.5px at 35% 80%, rgba(255,255,255,.4), transparent), radial-gradient(1px 1px at 12% 62%, rgba(200,220,255,.4), transparent), radial-gradient(1px 1px at 90% 48%, rgba(255,255,255,.4), transparent); }
.js2-space::after { background-size: 420px 420px; opacity: .5; animation: js2drift 140s linear infinite; }
@keyframes js2drift { to { transform: translateY(-46px); } }
.js2-comet { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #cdeeff; box-shadow: 0 0 8px 2px rgba(150,220,255,.85); opacity: 0; }
.js2-comet::after { content: ''; position: absolute; right: 2px; top: 50%; width: 130px; height: 1px; transform: translateY(-50%); background: linear-gradient(90deg, rgba(150,220,255,.7), transparent); }
.js2-comet.c1 { top: 14%; left: -12%; animation: js2comet 26s linear infinite; animation-delay: 7s; }
.js2-comet.c2 { top: 58%; left: -12%; animation: js2comet 36s linear infinite; animation-delay: 22s; }
@keyframes js2comet { 0% { opacity: 0; transform: translate(0,0) rotate(17deg); } 2% { opacity: 1; } 11% { opacity: 1; } 15%, 100% { opacity: 0; transform: translate(122vw, 26vh) rotate(17deg); } }
.js2-impulse { position: absolute; width: 6px; height: 6px; border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; z-index: 1; }
/* Cœur JOOMA vivant */
.js2-planet-core { background: radial-gradient(38% 34% at 42% 34%, #c6f7ff 0%, #67E7FF 30%, #42C8FF 62%, #1f7fd6 100%); box-shadow: 0 0 58px 14px rgba(66,200,255,.32), 0 0 120px 30px rgba(66,200,255,.12), inset 0 0 34px rgba(180,240,255,.5); animation: js2breathe 7s ease-in-out infinite; position: relative; overflow: hidden; }
.js2-planet-core::before { content: ''; position: absolute; inset: -30%; background: conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,.16) 42deg, transparent 96deg, transparent 360deg); animation: js2reflect 15s linear infinite; }
@keyframes js2reflect { to { transform: rotate(360deg); } }
@keyframes js2breathe { 0%,100% { box-shadow: 0 0 50px 12px rgba(66,200,255,.28), 0 0 108px 26px rgba(66,200,255,.10), inset 0 0 30px rgba(180,240,255,.45); } 50% { box-shadow: 0 0 78px 20px rgba(66,200,255,.44), 0 0 152px 40px rgba(66,200,255,.16), inset 0 0 38px rgba(205,245,255,.6); } }
.js2-planet-name, .js2-planet-st { position: relative; z-index: 2; }
/* Cartes-modules — glassmorphism */
.js2-node { background: rgba(15,25,45,.82); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 0 0 1px rgba(255,255,255,.02), 0 0 26px -8px var(--nc); }
.js2-node:hover { transform: translate(-50%,-50%) translateY(-3px) scale(1.02); box-shadow: 0 0 34px -3px var(--nc), 0 12px 32px rgba(0,0,0,.42); }
.js2-node-name { color: #FFFFFF; }
.js2-node-st { color: #A8B8D8; }
/* Panneaux & cartes — glassmorphism + texte identité */
.js2-panel, .js2-help { background: rgba(15,25,45,.82); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-color: rgba(255,255,255,.08); }
.js2-pop { background: rgba(15,25,45,.82); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-color: rgba(255,255,255,.08); }
.js2-stat { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.07); }
.js2-panel-t, .js2-help-t, .js2-title, .js2-stat-n, .js2-pop-t, .js2-pop-price { color: #FFFFFF; }
.js2-sub, .js2-stat-l, .js2-help-d, .js2-node-st { color: #A8B8D8; }
.js2-pop-d { color: #6F87A8; }

/* JoomStore V2 — menu SANS fond propre : même fond que la page centrale (fusion totale) */
.appshell.store2-mode { background: linear-gradient(180deg, #071326 0%, #081B35 50%, #0C2144 100%); }
.appshell.store2-mode .appside { background: transparent !important; box-shadow: none !important; border-right: 0 !important; }
.appshell.store2-mode .appmaincol .main { background: transparent; }
.appshell.store2-mode .appside .leia-card { background: rgba(15,25,45,.55); border-color: rgba(255,255,255,.08); }

/* JoomStore V2 — pas de barre du haut (apptop masquée) */
.appshell.store2-mode .apptop { display: none !important; }

/* JoomStore V2 — popup détail module au thème du Store (sombre / verre) */
.js2-modal .ncp-panel { background: linear-gradient(180deg, #0b1830 0%, #0a1428 100%); color: #d6e0f5; border: 1px solid rgba(255,255,255,.09); box-shadow: 0 24px 70px rgba(0,0,0,.55); }
.js2-modal .ncp-head { background: rgba(13,25,48,.7); border-bottom: 1px solid rgba(255,255,255,.08); }
.js2-modal .ncp-title { color: #ffffff; }
.js2-modal .ncp-close, .js2-modal .ncp-head button { color: #c4d0ea; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.js2-modal .ncp-close:hover, .js2-modal .ncp-head button:hover { background: rgba(255,255,255,.14); }
.js2-modal .ncp-body { color: #c3d0ea; }
.js2-modal .ncp-body .notice.info { background: rgba(66,200,255,.1); border: 1px solid rgba(66,200,255,.28); color: #bfe6ff; }
.js2-modal .ncp-body .btn.ghost { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); color: #dbe6fb; }
.js2-modal .ncp-body .btn.ghost:hover { background: rgba(255,255,255,.14); }

/* JoomStore V2 — lignes « Nouveautés » (popup) */
.js2-nvrow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); cursor: pointer; margin-bottom: 10px; font-family: inherit; transition: .15s; }
.js2-nvrow:hover { background: rgba(255,255,255,.08); border-color: rgba(124,92,255,.45); transform: translateY(-1px); }

/* JoomStore V2 — tuiles populaires entièrement cliquables */
.js2-pop-click { cursor: pointer; }
.js2-pop-click:focus-visible { outline: 2px solid rgba(124,92,255,.7); outline-offset: 2px; }
.js2-pop-arrow svg { width: 16px; height: 16px; }
.js2-pop-click:hover .js2-pop-arrow { color: #8ba6ff; }

/* ===== Panier V2 — stepper vertical sombre glassmorphism (Exemple 2) ===== */
.co2 { margin: -24px; padding: 26px 30px 44px; min-height: calc(100vh - 58px); color: #d6e0f5; background: radial-gradient(70% 55% at 60% 0%, rgba(66,200,255,.08), transparent 55%), linear-gradient(180deg, #071326 0%, #081B35 50%, #0C2144 100%); }
@media (max-width: 900px) { .co2 { margin: -16px -12px; padding: 18px 14px 34px; } }
.co2 .placeholder { color: #9fb0d0; }
.co2-title { font-size: 24px; font-weight: 800; color: #fff; }
.co2-titlesub { font-size: 13.5px; color: #93a2c4; margin-top: 2px; }
.co2-head { margin-bottom: 22px; }
.co2-grid { display: grid; grid-template-columns: 236px 1fr 300px; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .co2-grid { grid-template-columns: 1fr; } }
/* Stepper vertical */
.co2-steps { display: flex; flex-direction: column; gap: 6px; }
.co2-step { display: flex; align-items: center; gap: 12px; padding: 12px 13px; border-radius: 14px; background: rgba(15,25,45,.55); border: 1px solid rgba(255,255,255,.06); cursor: pointer; font-family: inherit; text-align: left; transition: .15s; }
.co2-step:hover { border-color: rgba(124,92,255,.4); }
.co2-step.on { background: rgba(124,92,255,.16); border-color: rgba(139,92,255,.5); }
.co2-step-num { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; background: rgba(255,255,255,.08); color: #9fb0d0; }
.co2-step.on .co2-step-num { background: linear-gradient(135deg,#6d5ae6,#8b5cf6); color: #fff; }
.co2-step.done .co2-step-num { background: rgba(34,197,94,.22); color: #63e29a; }
.co2-step.done .co2-step-num svg { width: 15px; height: 15px; }
.co2-step-l { font-weight: 800; color: #eef3ff; font-size: 13.5px; }
.co2-step-s { font-size: 11.5px; color: #93a2c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Panneau central */
.co2-panel { background: rgba(15,25,45,.72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 22px; }
.co2-h { font-size: 17px; font-weight: 800; color: #fff; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; }
.co2-hint { font-size: 12.5px; color: #93a2c4; margin: 0 0 16px; }
.co2-opt-facul { font-size: 11px; font-weight: 700; color: #9fb0d0; background: rgba(255,255,255,.08); padding: 2px 9px; border-radius: 999px; }
/* Forfait */
.co2-toggle { display: inline-flex; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 4px; gap: 4px; margin-bottom: 16px; }
.co2-tg { border: 0; background: transparent; color: #9fb0d0; padding: 9px 18px; border-radius: 9px; font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 7px; }
.co2-tg.on { background: linear-gradient(135deg,#6d5ae6,#8b5cf6); color: #fff; }
.co2-tg-badge { font-size: 10px; font-weight: 800; background: rgba(34,197,94,.25); color: #7bf0a8; padding: 1px 6px; border-radius: 999px; }
.co2-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 640px) { .co2-plans { grid-template-columns: 1fr; } }
.co2-plan { position: relative; background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,255,255,.1); border-radius: 16px; padding: 18px 14px; cursor: pointer; font-family: inherit; text-align: center; transition: .15s; }
.co2-plan:hover { border-color: rgba(124,92,255,.5); transform: translateY(-2px); }
.co2-plan.on { border-color: #8b5cf6; background: rgba(124,92,255,.14); box-shadow: 0 0 0 1px rgba(139,92,255,.4), 0 10px 26px rgba(124,92,255,.2); }
.co2-plan-reco { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg,#6d5ae6,#8b5cf6); color: #fff; font-size: 10px; font-weight: 800; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.co2-plan-name { font-weight: 800; color: #fff; font-size: 15px; }
.co2-plan-price { font-weight: 800; color: #8ecbff; font-size: 18px; margin: 6px 0 4px; }
.co2-plan-sub { font-size: 11.5px; color: #93a2c4; }
/* Métiers */
.co2-metiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.co2-metier { background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,255,255,.1); border-radius: 16px; padding: 16px 12px; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; align-items: center; gap: 7px; transition: .15s; }
.co2-metier:hover { transform: translateY(-2px); border-color: var(--nc); }
.co2-metier.on { border-color: var(--nc); background: color-mix(in srgb, var(--nc) 14%, transparent); box-shadow: 0 0 22px -6px var(--nc); }
.co2-metier.dis { opacity: .5; cursor: not-allowed; }
.co2-metier-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; }
.co2-metier-ic svg { width: 24px; height: 24px; }
.co2-metier-n { font-weight: 800; color: #eef3ff; font-size: 13px; text-align: center; }
.co2-metier-p { font-size: 11.5px; color: #93a2c4; }
.co2-chip { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.08); color: #9fb0d0; }
.co2-chip.ok { background: rgba(34,197,94,.2); color: #63e29a; }
/* Options / packs */
.co2-opts { display: flex; flex-direction: column; gap: 10px; }
.co2-opt { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,255,255,.1); border-radius: 14px; padding: 13px; cursor: pointer; font-family: inherit; transition: .15s; }
.co2-opt:hover { border-color: rgba(124,92,255,.45); }
.co2-opt.on { border-color: #8b5cf6; background: rgba(124,92,255,.12); }
.co2-opt-ic { width: 38px; height: 38px; border-radius: 11px; background: rgba(124,92,255,.16); color: #b3a4ff; display: grid; place-items: center; flex: 0 0 auto; }
.co2-opt-ic svg { width: 19px; height: 19px; }
.co2-opt-t { font-weight: 800; color: #eef3ff; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co2-opt-s { font-size: 11.5px; color: #8ea0c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co2-opt-p { font-weight: 800; color: #fff; font-size: 14px; white-space: nowrap; }
.co2-opt-add { width: 30px; height: 30px; border-radius: 9px; background: rgba(124,92,255,.2); color: #fff; display: grid; place-items: center; font-weight: 800; flex: 0 0 auto; }
.co2-opt.on .co2-opt-add { background: linear-gradient(135deg,#6d5ae6,#8b5cf6); }
/* Navigation + boutons */
.co2-nav { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.co2-btn { border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #dbe6fb; border-radius: 12px; padding: 11px 18px; font-weight: 700; font-size: 13.5px; cursor: pointer; font-family: inherit; }
.co2-btn:hover { background: rgba(255,255,255,.12); }
.co2-btn.primary { border: 0; background: linear-gradient(135deg,#6d5ae6,#8b5cf6); color: #fff; box-shadow: 0 10px 24px rgba(124,92,255,.36); }
.co2-btn.hide { visibility: hidden; }
.co2-btn.off { opacity: .5; }
/* Aside récap + Leia */
.co2-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.co2-recap { background: rgba(15,25,45,.72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 18px; }
.co2-recap-h { font-size: 15px; font-weight: 800; color: #fff; margin-bottom: 12px; }
.co2-rrow { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; padding: 5px 0; color: #c3d0ea; }
.co2-rempty { color: #8093b4; font-size: 13px; margin: 4px 0; }
.co2-total { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; border-top: 1px solid rgba(255,255,255,.1); margin-top: 10px; padding-top: 12px; }
.co2-total span { font-size: 12.5px; color: #93a2c4; }
.co2-total b { font-size: 22px; color: #fff; }
.co2-pay { width: 100%; margin-top: 14px; border: 0; border-radius: 12px; padding: 13px; font-size: 15px; font-weight: 800; color: #fff; cursor: pointer; font-family: inherit; background: linear-gradient(135deg,#6d5ae6,#8b5cf6); box-shadow: 0 12px 28px rgba(124,92,255,.4); }
.co2-pay.off { opacity: .5; cursor: not-allowed; }
.co2-secure { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; color: #8ea0c4; }
.co2-secure span { display: flex; align-items: center; gap: 6px; }
.co2-recap-full { display: block; }
.co2-promo-row { display: flex; gap: 8px; margin-top: 14px; }
.co2-promo { flex: 1; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 10px 12px; color: #fff; font-family: inherit; text-transform: uppercase; }
.co2-leia { background: rgba(15,25,45,.72); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 16px; display: flex; gap: 12px; align-items: center; }
.co2-leia-av { width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 2px rgba(124,92,255,.4); }
.co2-leia-t { font-weight: 800; color: #eef3ff; font-size: 14px; }
.co2-leia-d { font-size: 11.5px; color: #93a2c4; margin: 3px 0 9px; }
.co2-leia-btn { background: linear-gradient(135deg,#6d5ae6,#8b5cf6); border: 0; color: #fff; border-radius: 10px; padding: 8px 13px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }

/* Panier V2 — barre du haut sombre (couleur de la page) + responsive + dédup */
.appshell.cart2-mode .apptop { background: #0d2440; border-bottom: 1px solid rgba(255,255,255,.05); }
.appshell.cart2-mode .appmaincol .main { background: linear-gradient(180deg, #071326, #0C2144); }
.co2 { overflow-x: hidden; }
.co2-panel, .co2-aside { min-width: 0; }
.co2-opt.incl { opacity: .6; }
.co2-opt.incl .co2-opt-add { background: rgba(34,197,94,.25); color: #7bf0a8; }
@media (max-width: 1280px) and (min-width: 1101px) { .co2-grid { grid-template-columns: 210px 1fr 270px; gap: 16px; } }
@media (max-width: 1100px) { .co2-aside { position: static; } }

/* ===== Cockpit — cœur JOOMA « vivant » (porté depuis le Joom'Store) ===== */
.jck2 .core { background: radial-gradient(38% 34% at 42% 34%, #c6f7ff 0%, #67E7FF 30%, #42C8FF 62%, #1f7fd6 100%); overflow: hidden; animation: jck2breathe 7s ease-in-out infinite; box-shadow: 0 0 56px 12px rgba(66,200,255,.4), 0 18px 40px rgba(8,26,46,.22); }
.jck2 .core::before { content: ""; position: absolute; inset: -30%; border: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,.18) 42deg, transparent 96deg, transparent 360deg); animation: jck2reflect 15s linear infinite; }
.jck2 .core::after { content: ""; position: absolute; inset: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: transparent; border-bottom-color: transparent; border-radius: 50%; box-shadow: 0 0 16px rgba(120,220,255,.5); animation: jck2spin 9s linear infinite; }
@keyframes jck2breathe { 0%,100% { box-shadow: 0 0 50px 12px rgba(66,200,255,.32), 0 18px 40px rgba(8,26,46,.2); } 50% { box-shadow: 0 0 82px 20px rgba(66,200,255,.5), 0 18px 40px rgba(8,26,46,.2); } }
@keyframes jck2reflect { to { transform: rotate(360deg); } }
@keyframes jck2spin { to { transform: rotate(360deg); } }
.jck2 .core .knob { background: radial-gradient(circle, #ffffff, #bff6fc); box-shadow: 0 0 20px rgba(255,255,255,.9); }
.jck2 .core .nm { text-shadow: 0 2px 10px rgba(0,40,80,.4); }
.jck2 .core .op { color: #eaf6ff; }
.jck2 .core .label { position: relative; z-index: 4; }

/* ===== Cockpit — ambiance HUD « poste de pilotage » (fond + décor, widgets intacts) ===== */
.jck2 .cockpit {
  background:
    linear-gradient(rgba(25,180,220,.045) 1px, transparent 1px) 0 0 / 100% 42px,
    linear-gradient(90deg, rgba(25,180,220,.045) 1px, transparent 1px) 0 0 / 42px 100%,
    radial-gradient(72% 72% at 50% 47%, #f7fbfe 0%, #e9eff8 74%);
}
/* Balayage radar lent derrière le cœur */
.jck2 .cockpit::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 980px; height: 980px; transform: translate(-50%,-50%);
  background: conic-gradient(from 0deg, rgba(25,200,235,.16), rgba(25,200,235,0) 30%, transparent 100%);
  border-radius: 50%; z-index: 1; pointer-events: none; animation: jck2radar 8s linear infinite;
  /* Fond du faisceau dégradé aux bords → plus de coupure nette contre les panneaux */
  -webkit-mask: radial-gradient(circle, #000 0%, #000 42%, transparent 60%);
  mask: radial-gradient(circle, #000 0%, #000 42%, transparent 60%);
}
@keyframes jck2radar { to { transform: translate(-50%,-50%) rotate(360deg); } }
/* Réticules HUD aux 4 coins */
.jck2 .cockpit::after {
  content: ""; position: absolute; inset: 12px; z-index: 2; pointer-events: none;
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2319c8e6' stroke-width='2' stroke-linecap='round' opacity='.5'><path d='M4 20V4h16'/></svg>"),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2319c8e6' stroke-width='2' stroke-linecap='round' opacity='.5'><path d='M4 4h16v16'/></svg>"),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2319c8e6' stroke-width='2' stroke-linecap='round' opacity='.5'><path d='M20 20H4V4'/></svg>"),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2319c8e6' stroke-width='2' stroke-linecap='round' opacity='.5'><path d='M4 20h16V4'/></svg>");
  background-position: top left, top right, bottom left, bottom right; background-repeat: no-repeat; background-size: 30px 30px;
}
/* Halo intérieur = cadran gradué (tirets) qui tourne très lentement */
.jck2 .halo { border: 1px dashed rgba(25,200,235,.34); animation: jck2dial 46s linear infinite; }
.jck2 .halo.h2 { border-style: solid; border-color: rgba(25,200,235,.12); animation: none; }
@keyframes jck2dial { to { transform: translate(-50%,-50%) rotate(360deg); } }

/* ===== Coffre-fort — PAGE VERROUILLÉE plein écran (Fort Knox, sans barre du haut) ===== */
.appshell.coffre-lock-mode .apptop { display: none; }
.appshell.coffre-lock-mode .appmaincol .main { padding: 0; }
.cf-lock { min-height: 100vh; color: #e7ecf6; padding: 22px 30px 60px; box-sizing: border-box;
  background: radial-gradient(80% 60% at 74% 8%, rgba(139,92,255,.30), transparent 55%), radial-gradient(60% 55% at 16% 92%, rgba(66,120,255,.16), transparent 62%), linear-gradient(160deg, #221b42 0%, #141126 46%, #0b0a16 100%); }
.cf-lock-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cf-lock-brand { display: flex; align-items: center; gap: 9px; font-weight: 800; color: #d9cffb; font-size: 14px; }
.cf-lock-brand svg { width: 18px; height: 18px; }
.cf-lock-back { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #dfe6fb; border-radius: 10px; padding: 8px 13px; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.cf-lock-back:hover { background: rgba(255,255,255,.16); }
.cf-lock-wrap { max-width: 940px; margin: 0 auto; text-align: center; }
.cf-lock-safe { margin: 6px auto 2px; width: min(430px, 78vw); filter: drop-shadow(0 32px 74px rgba(139,92,255,.45)); animation: cfLockFloat 6s ease-in-out infinite; }
@keyframes cfLockFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.cf-lock-safe img, .cf-lock-safe svg { width: 100%; height: auto; display: block; border-radius: 20px; }
.cf-lock-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(139,92,255,.2); border: 1px solid rgba(139,92,255,.42); color: #cdbcff; font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
.cf-lock-title { font-size: 42px; font-weight: 800; color: #fff; margin: 14px 0 8px; letter-spacing: -.6px; }
.cf-lock-title .hl { color: #F3DE9E; }
.cf-lock-sub { font-size: 15px; color: #b7c0da; max-width: 640px; margin: 0 auto 24px; line-height: 1.65; }
.cf-lock-acts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cf-lock-pwrow { display: flex; justify-content: center; margin-top: 12px; }
.cf-lock-pwrow .cf-pw { width: min(360px, 82vw); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: 12px; padding: 12px 14px; color: #fff; font-family: inherit; outline: 0; }
.cf-lock-pwrow .cf-pw::placeholder { color: rgba(255,255,255,.5); }
.cf-lock-note { font-size: 13px; color: #b7c0da; margin-top: 10px; min-height: 18px; }
.cf-lock-note.err { color: #ff9b9b; }
.cf-lock-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 44px auto 0; text-align: left; }
@media (max-width: 880px) { .cf-lock-cards { grid-template-columns: 1fr; } .cf-lock-title { font-size: 32px; } }
.cf-lock-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; padding: 20px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: .15s; }
.cf-lock-card:hover { border-color: rgba(243,222,158,.35); transform: translateY(-3px); }
.cf-lock-card-ic { width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(135deg, rgba(139,92,255,.32), rgba(66,120,255,.24)); color: #d7c9ff; display: grid; place-items: center; margin-bottom: 12px; }
.cf-lock-card-ic svg { width: 22px; height: 22px; }
.cf-lock-card h3 { margin: 0 0 6px; font-size: 16px; font-weight: 800; color: #F3DE9E; }
.cf-lock-card p { margin: 0; font-size: 13px; color: #b7c0da; line-height: 1.6; }
.cf-lock-plans { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.cf-lock-plan { display: flex; justify-content: space-between; gap: 8px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 9px 12px; font-size: 12.5px; }
.cf-lock-plan b { color: #eef2fb; }
.cf-lock-plan span { color: #9fb0d0; }
.cf-lock-card ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.cf-lock-card ul li { margin: 0; }
.cf-lock-chip { display: inline-block; background: rgba(243,222,158,.12); border: 1px solid rgba(243,222,158,.3); color: #f0e0b0; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.cf-lock-foot { text-align: center; margin: 36px auto 0; font-size: 12.5px; color: #8ea0c4; display: flex; align-items: center; justify-content: center; gap: 7px; }

/* ===== Cockpit — SOCLE nouveau design : fond spatial + vraie planète PNG ===== */
/* Scène centrale en fond spatial (tokens du pack) */
.jck2 .cockpit { background:
  radial-gradient(58% 58% at 50% 42%, rgba(66,200,255,.12), transparent 62%),
  radial-gradient(40% 40% at 18% 88%, rgba(123,77,255,.14), transparent 60%),
  linear-gradient(135deg, #060D1D 0%, #081326 46%, #0C2144 100%); }
/* Le cœur = la vraie Terre photoréaliste (PNG transparent), non redessinée */
.jck2 .core { width: 440px; height: 300px; border-radius: 0; overflow: visible; box-shadow: none;
  background: url("/img/cockpit/planet-core.png") center/contain no-repeat; animation: jck2planet 7s ease-in-out infinite; }
.jck2 .core::before, .jck2 .core::after { display: none !important; }
.jck2 .core .knob { display: none; }
.jck2 .core .label { position: absolute; left: 50%; top: 47%; transform: translate(-50%,-50%); z-index: 4; }
.jck2 .core .nm { font-size: 32px; letter-spacing: .5px; text-shadow: 0 2px 16px rgba(0,20,50,.65); }
.jck2 .core .op { color: #d7ecff; margin-top: 8px; }
.jck2 .core .op .d { background: #69FF7B; box-shadow: 0 0 8px #69FF7B; }
@keyframes jck2planet { 0%,100% { filter: drop-shadow(0 0 30px rgba(103,231,255,.42)); } 50% { filter: drop-shadow(0 0 56px rgba(103,231,255,.72)); } }
/* Halos → anneaux orbitaux cyan discrets autour de la planète */
.jck2 .halo { border: 1px solid rgba(103,231,255,.22); }
.jck2 .halo.h2 { border-color: rgba(103,231,255,.12); animation: none; }

/* Cockpit — anneaux orbitaux (SVG) derrière la planète + glow large (détails planche 3) */
.jck2 .halo.h2 { width: 780px; height: 400px; border: 0 !important; background: url("/img/cockpit/planet-rings.svg") center/contain no-repeat; z-index: 1; opacity: .9; }
.jck2 .halo:not(.h2) { width: 560px; height: 560px; border: 0 !important; z-index: 1;
  background: radial-gradient(circle, rgba(66,200,255,.16) 0%, rgba(66,200,255,.05) 40%, transparent 66%); }

/* Cockpit — MIX planète + CORE du Store : anneau d'énergie cyan incliné qui tourne autour de la Terre */
.jck2 .core::before { display: block !important; content: ""; position: absolute; left: 50%; top: 47%; width: 262px; height: 262px; transform: translate(-50%,-50%) rotate(-18deg); border-radius: 50%; border: 2px solid rgba(103,231,255,.55); border-top-color: transparent; border-bottom-color: transparent; box-shadow: 0 0 20px rgba(103,231,255,.4); animation: jck2coreSpin 11s linear infinite; pointer-events: none; }
.jck2 .core::after { display: block !important; content: ""; position: absolute; left: 50%; top: 47%; width: 210px; height: 210px; transform: translate(-50%,-50%) rotate(26deg); border-radius: 50%; border: 1.5px solid rgba(155,92,255,.4); border-left-color: transparent; border-right-color: transparent; animation: jck2coreSpin2 15s linear infinite; pointer-events: none; }
@keyframes jck2coreSpin { to { transform: translate(-50%,-50%) rotate(342deg); } }
@keyframes jck2coreSpin2 { to { transform: translate(-50%,-50%) rotate(-334deg); } }

/* ===== Cockpit — THÈME SOMBRE SPATIAL (bloc 2) : reskin via variables + glass sur cartes ===== */
.jck2 { --cyan:#67E7FF; --ink:#FFFFFF; --muted:#7E91B5; --bg:#060D1D; --card:rgba(15,27,55,.72); --bd:rgba(138,180,255,.16); --shadow:0 18px 60px rgba(0,0,0,.42);
  background: radial-gradient(60% 46% at 50% 0%, rgba(66,200,255,.06), transparent 55%), linear-gradient(135deg,#060D1D 0%,#081326 46%,#0C2144 100%) !important; color:#C7D7F5; }
.jck2 .side { background: rgba(9,18,38,.75) !important; border-right: 1px solid var(--bd); }
.jck2 .brand .name { color:#fff; }
.jck2 h1,.jck2 h2,.jck2 h3,.jck2 h4,.jck2 .phead b,.jck2 .stat-v,.jck2 .ana-top-v { color:#fff; }
.jck2 .content,.jck2 .board { background:transparent !important; }
.jck2 .wdg,.jck2 .panel,.jck2 .syn-card,.jck2 .ana-card,.jck2 .qa,.jck2 .mod,.jck2 .topbar,.jck2 .phead,.jck2 .assist,.jck2 .ai-log,.jck2 .ai-in,.jck2 .msg {
  background: linear-gradient(180deg, rgba(20,36,70,.74), rgba(8,17,38,.68)) !important;
  border: 1px solid var(--bd) !important; color:#C7D7F5 !important; box-shadow: var(--shadow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.jck2 .wdg:hover,.jck2 .qa:hover,.jck2 .ana-card:hover,.jck2 .syn-card:hover { border-color: rgba(103,231,255,.32) !important; box-shadow: var(--shadow), 0 0 32px rgba(103,231,255,.18); }
.jck2 .nav a { color:#C7D7F5; }
.jck2 .nav a.active,.jck2 .nav a:hover { background: rgba(103,231,255,.14) !important; color:#fff !important; }
.jck2 .muted,.jck2 .stat-s,.jck2 .ana-top-l,.jck2 .ana-conv-sub { color:#7E91B5 !important; }
.jck2 .assist h4 { color:#fff; } .jck2 .assist p { color:#C7D7F5; }

/* Cockpit — rayons planète → cartes : teintes du pack (cyan) + halo énergie */
.jck2 #jck2-links stop { stop-color: #67E7FF; }
.jck2 #jck2-lineGroup line, .jck2 #jck2-lineGroup path { filter: drop-shadow(0 0 3px rgba(103,231,255,.6)); }
.jck2 .flowline { stroke: #67E7FF; }
.jck2 .flowbase { stroke: rgba(103,231,255,.22); }

/* Cockpit — icônes de tuiles/rangées : fonds sombres teintés + icône couleur du pack (au lieu des carrés clairs) */
.jck2 .c-blue   { background: rgba(66,200,255,.16) !important;  color:#67E7FF !important; }
.jck2 .c-teal   { background: rgba(103,231,255,.16) !important; color:#67E7FF !important; }
.jck2 .c-green  { background: rgba(105,255,123,.16) !important; color:#69FF7B !important; }
.jck2 .c-red    { background: rgba(255,77,109,.18) !important;  color:#FF4D6D !important; }
.jck2 .c-orange { background: rgba(255,179,71,.16) !important;  color:#FFB347 !important; }
.jck2 .c-purple { background: rgba(155,92,255,.18) !important;  color:#9B5CFF !important; }
.jck2 .c-pink   { background: rgba(255,116,201,.18) !important; color:#FF74C9 !important; }
.jck2 .c-slate  { background: rgba(138,180,255,.14) !important; color:#C7D7F5 !important; }
/* la petite étiquette catégorie (.ct) reste lisible sur fond teinté */
.jck2 .mod .ct { font-weight: 700; }

/* Cockpit — sweep final : onglets, boutons, hovers restants → sombre / couleurs pack */
.jck2 .tab { color:#C7D7F5; }
.jck2 .tab:hover { background: rgba(255,255,255,.06) !important; color:#fff; }
.jck2 .tab.active { background: linear-gradient(135deg,#7B4DFF,#42C8FF) !important; color:#fff !important; box-shadow: 0 6px 16px rgba(66,200,255,.3) !important; }
.jck2 .tab .pill, .jck2 .nav a .badge { background:#FF4D6D; }
.jck2 .addw, .jck2 .ai-in button, .jck2 .nav a.active { background: linear-gradient(135deg,#7B4DFF,#42C8FF) !important; color:#fff !important; box-shadow: 0 8px 20px rgba(66,200,255,.32) !important; }
.jck2 .addw svg { stroke:#fff; }
.jck2 .ic-btn { background: rgba(15,27,55,.6) !important; border:1px solid var(--bd) !important; color:#C7D7F5 !important; }
.jck2 .ic-btn:hover { background: rgba(255,255,255,.08) !important; }
.jck2 .row .go { background: rgba(255,255,255,.06) !important; color:#C7D7F5 !important; border-color: var(--bd) !important; }
.jck2 .row .go:hover { background: rgba(103,231,255,.12) !important; }
.jck2 .qa:hover { background: rgba(103,231,255,.08) !important; }
.jck2 .mod .x { background: rgba(255,255,255,.08); color:#9fb0d0; }
.jck2 .mod .x:hover { background: rgba(255,77,109,.2); color:#FF74C9; }
.jck2 .msg .av { background: rgba(66,200,255,.16); color:#67E7FF; }
.jck2 .tk .box { border-color: rgba(138,180,255,.4); }
.jck2 .tk.done .box { background:#69FF7B; border-color:#69FF7B; }
.jck2 .row .chev { color:#5c6b8c; }

/* Cockpit — barre du bas : glass sombre (fini le liseré blanc) */
.jck2 .bottombar { background: linear-gradient(180deg, rgba(20,36,70,.74), rgba(8,17,38,.68)) !important; border: 1px solid var(--bd) !important; box-shadow: var(--shadow) !important; }

/* Cockpit — FIX rangement Synthèse/Analyses : le wrap .jck2 imbriqué réappliquait display:flex + max-width → grille compressée */
.jck2-mode { width: 100%; padding: 20px 28px 44px; }
.jck2.synthese, .jck2.analyses { display: block !important; max-width: none !important; margin: 0 !important; min-height: 0 !important; background: transparent !important; }
.jck2 .syn-grid, .jck2 .ana-grid { width: 100%; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important; }
.jck2 .syn-head { margin: 0 0 18px; }

/* Cockpit — Agenda (et panneaux latéraux) : scroll interne pour ne pas s'étirer */
.jck2 .col .panel .pbody { max-height: 360px; overflow-y: auto; padding-right: 4px; }
.jck2 .col .panel .pbody::-webkit-scrollbar { width: 8px; }
.jck2 .col .panel .pbody::-webkit-scrollbar-thumb { background: rgba(103,231,255,.25); border-radius: 8px; }
.jck2 .col .panel .pbody::-webkit-scrollbar-track { background: transparent; }


/* ===== Cockpit — FOND SPATIAL UNIFIÉ (menu + haut + centre partagent le même background) ===== */
/* Fond « comme le JoomStore » : dégradé bleu nuit UNIFORME + nébuleuses (sombre partout, pas d'horizon lumineux). Une image sélectionnée vient éventuellement PAR-DESSUS. */
.appshell.cockpit-mode { background-color: #060D1D !important;
  background-image:
    var(--cockpit-bg, none),
    radial-gradient(closest-side at 20% 28%, rgba(123,77,255,.12), transparent 70%),
    radial-gradient(closest-side at 82% 64%, rgba(66,200,255,.12), transparent 70%),
    radial-gradient(closest-side at 55% 92%, rgba(255,116,201,.06), transparent 70%),
    linear-gradient(160deg, #071326 0%, #081B35 50%, #0C2144 100%) !important;
  background-size: cover, auto, auto, auto, auto !important;
  background-position: center, center, center, center, center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important; }
.appshell.cockpit-mode .appside { background: transparent !important; border-right: 0 !important; box-shadow: none !important; }
.appshell.cockpit-mode .apptop { background: transparent !important; border-bottom: 0 !important; box-shadow: none !important; }
.appshell.cockpit-mode .appmaincol .main { background: transparent !important; }
.appshell.cockpit-mode .jck2-page { background: transparent !important; }
.appshell.cockpit-mode .jck2 { background: transparent !important; }
.appshell.cockpit-mode .jck2 .side { background: transparent !important; border: 0 !important; }
/* Comme le JoomStore : la scène centrale ne forme PAS de boîte — transparente, sans bordure, elle révèle le MÊME fond spatial que les côtés (continu). */
.appshell.cockpit-mode .jck2 .cockpit { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.appshell.cockpit-mode .jck2 .cockpit::after { display: none !important; }
.appshell.cockpit-mode .jck2 .content, .appshell.cockpit-mode .jck2 .board { background: transparent !important; }

/* ===== Apparence & templates — sélecteur d'arrière-plan ===== */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.tpl-card { background: transparent; border: 0; padding: 0; cursor: pointer; font-family: inherit; text-align: left; }
.tpl-thumb { display: block; height: 130px; border-radius: 14px; border: 2px solid var(--nc-border, #e6ebf4); background-size: cover; background-position: center; position: relative; transition: .15s; }
.tpl-card:hover .tpl-thumb { border-color: #7c5cff; transform: translateY(-2px); }
.tpl-card.on .tpl-thumb { border-color: #7c5cff; box-shadow: 0 0 0 3px rgba(124,92,255,.25); }
.tpl-check { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg,#6d5ae6,#8b5cf6); color: #fff; display: grid; place-items: center; }
.tpl-check svg { width: 15px; height: 15px; }
.tpl-label { display: block; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--nc-navy, #16223e); }

/* ===== Cockpit — cartes-widgets : glass profond + halo coloré PAR MODULE au survol ===== */
.jck2 .mod { background: linear-gradient(180deg, rgba(24,42,80,.82), rgba(9,18,40,.8)) !important; border: 1px solid rgba(138,180,255,.16) !important; box-shadow: 0 14px 40px rgba(0,0,0,.42) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.jck2 .mod:hover { transform: translateY(-4px) !important; box-shadow: 0 22px 50px rgba(0,0,0,.5), 0 0 34px rgba(103,231,255,.18) !important; border-color: rgba(103,231,255,.3) !important; }
.jck2 .mod:has(.c-red):hover    { box-shadow: 0 22px 50px rgba(0,0,0,.5), 0 0 38px rgba(255,77,109,.34) !important; border-color: rgba(255,77,109,.45) !important; }
.jck2 .mod:has(.c-green):hover  { box-shadow: 0 22px 50px rgba(0,0,0,.5), 0 0 38px rgba(105,255,123,.30) !important; border-color: rgba(105,255,123,.45) !important; }
.jck2 .mod:has(.c-purple):hover { box-shadow: 0 22px 50px rgba(0,0,0,.5), 0 0 38px rgba(155,92,255,.34) !important; border-color: rgba(155,92,255,.45) !important; }
.jck2 .mod:has(.c-blue):hover, .jck2 .mod:has(.c-teal):hover { box-shadow: 0 22px 50px rgba(0,0,0,.5), 0 0 38px rgba(66,200,255,.30) !important; border-color: rgba(66,200,255,.45) !important; }
.jck2 .mod:has(.c-pink):hover   { box-shadow: 0 22px 50px rgba(0,0,0,.5), 0 0 38px rgba(255,116,201,.30) !important; border-color: rgba(255,116,201,.45) !important; }
.jck2 .mod:has(.c-orange):hover { box-shadow: 0 22px 50px rgba(0,0,0,.5), 0 0 38px rgba(255,179,71,.30) !important; border-color: rgba(255,179,71,.45) !important; }
.jck2 .mod .ic { box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.jck2 .mod h3 { color: #FFFFFF !important; }
.jck2 .mod p { color: #7E91B5 !important; }

/* ===== Cockpit — colonne droite (Aujourd'hui / Agenda) : finition sombre au style plaquette ===== */
.jck2 .col .panel { background: linear-gradient(180deg, rgba(24,42,80,.82), rgba(9,18,40,.8)) !important; border: 1px solid rgba(138,180,255,.16) !important; border-radius: 18px !important; padding: 15px 17px !important; box-shadow: 0 14px 40px rgba(0,0,0,.4) !important; }
.jck2 .col .phead { margin-bottom: 10px; }
.jck2 .col .phead h4 { color: #fff !important; font-weight: 800; }
.jck2 .col .phead .grip { color: rgba(138,180,255,.32) !important; }
.jck2 .col .phead .px { background: rgba(255,255,255,.08) !important; color: #9fb0d0 !important; }
.jck2 .col .phead .px:hover { background: rgba(255,77,109,.2) !important; color: #FF74C9 !important; }
.jck2 .col .row { border-bottom: 1px solid rgba(138,180,255,.1) !important; padding: 11px 0 !important; }
.jck2 .col .row:last-child { border-bottom: 0 !important; }
.jck2 .col .row .go { background: rgba(255,255,255,.06) !important; color: #C7D7F5 !important; border-color: rgba(138,180,255,.18) !important; }
.jck2 .col .row .go:hover { background: rgba(103,231,255,.14) !important; }
.jck2 .col .row b, .jck2 .col .row strong { color: #eef3ff; }

/* ===== Cockpit — barre du bas (puces) + Synthèse/Analyses (graphes) au thème pack ===== */
/* Barre du bas : chips en glass + survol coloré */
.jck2 .bottombar .wdg { background: rgba(255,255,255,.04); border: 1px solid rgba(138,180,255,.14); border-radius: 12px; padding: 9px 12px; transition: .15s; }
.jck2 .bottombar .wdg:hover { background: rgba(103,231,255,.1); border-color: rgba(103,231,255,.35); }
.jck2 .bottombar .wdg .wlbl b, .jck2 .bottombar .wdg b { color: #eef3ff !important; }
/* Graphes Synthèse/Analyses : textes lisibles + couleurs pack (CSS bat les attributs SVG) */
.jck2 .ana-card svg text, .jck2 .syn-card svg text { fill: #C7D7F5 !important; }
.jck2 .ana-conv svg text { fill: #FFFFFF !important; }
.jck2 .ana-wide svg line, .jck2 .ana-card svg line { stroke: rgba(138,180,255,.16) !important; }
.jck2 .ana-wide svg rect { fill: #67E7FF !important; }
.jck2 .ana-conv svg circle { stroke: rgba(138,180,255,.14) !important; }
.jck2 .ana-conv svg circle:nth-of-type(2) { stroke: #9B5CFF !important; }
.jck2 .ana-empty-ic svg { stroke: #67E7FF !important; }
.jck2 .ana-top-bar { background: rgba(138,180,255,.12) !important; }
.jck2 .ana-top-bar i { background: linear-gradient(90deg, #42C8FF, #7B4DFF) !important; }
/* Synthèse : dividers + boutons + cases au thème sombre */
.jck2 .syn-card .row { border-bottom: 1px solid rgba(138,180,255,.1) !important; }
.jck2 .syn-card .row:last-child { border-bottom: 0 !important; }
.jck2 .syn-card .go { background: rgba(255,255,255,.06) !important; color: #C7D7F5 !important; border-color: rgba(138,180,255,.18) !important; }
.jck2 .syn-card .go:hover { background: rgba(103,231,255,.14) !important; }
.jck2 .syn-card .tk .box { border-color: rgba(138,180,255,.4) !important; }
.jck2 .syn-card h4, .jck2 .ana-card h4 { color: #fff !important; }

/* ===== Coffre-fort — même squelette que le Cockpit : FOND SPATIAL UNIFORME (menu + haut + centre + bas), sans planète ni animation ===== */
/* Coffre : suit le thème choisi (tokens --jt-*), avec repli sombre « vault » par défaut */
.appshell.coffre-mode { background-color: var(--jt-bg, #060D1D) !important;
  background-image:
    radial-gradient(closest-side at 20% 28%, color-mix(in srgb, var(--jt-accent, #7b4dff) 14%, transparent), transparent 70%),
    radial-gradient(closest-side at 82% 64%, color-mix(in srgb, var(--jt-accent2, #42c8ff) 14%, transparent), transparent 70%),
    linear-gradient(160deg, var(--jt-bg, #071326) 0%, var(--jt-bg2, #081B35) 55%, var(--jt-panel, #0C2144) 100%) !important;
  background-size: cover !important; background-position: center !important; background-attachment: fixed !important; background-repeat: no-repeat !important; }
.appshell.coffre-mode .appside { border-right: 0 !important; box-shadow: none !important; }
.appshell.coffre-mode .apptop { background: transparent !important; border-bottom: 0 !important; box-shadow: none !important; }
.appshell.coffre-mode .appmaincol .main { background: transparent !important; }
/* Cartes du tableau de bord Coffre → surface du thème */
.appshell.coffre-mode .cf-kpi, .appshell.coffre-mode .cf-space, .appshell.coffre-mode .cf-panel, .appshell.coffre-mode .cf-feat, .appshell.coffre-mode .main .card { background: var(--jt-card, linear-gradient(180deg, rgba(20,36,70,.74), rgba(8,17,38,.68))) !important; border: 1px solid var(--jt-border, rgba(138,180,255,.16)) !important; box-shadow: 0 14px 40px rgba(0,0,0,.28) !important; }
.appshell.coffre-mode .cf-newspace { background: var(--jt-card2, rgba(15,25,45,.4)) !important; border: 2px dashed var(--jt-border-accent, rgba(138,180,255,.28)) !important; }
.appshell.coffre-mode .cf-kpi-v, .appshell.coffre-mode .cf-space-t, .appshell.coffre-mode .cf-panel-h h4, .appshell.coffre-mode .cf-row-t, .appshell.coffre-mode .cf-feat-t, .appshell.coffre-mode .cf-recap-h, .appshell.coffre-mode .cf-h { color: var(--jt-text, #fff) !important; }
.appshell.coffre-mode .cf-kpi-l, .appshell.coffre-mode .cf-kpi-s, .appshell.coffre-mode .cf-space-s, .appshell.coffre-mode .cf-row-s, .appshell.coffre-mode .cf-feat-d, .appshell.coffre-mode .cf-empty, .appshell.coffre-mode .cf-leg, .appshell.coffre-mode .cf-storage-foot { color: var(--jt-muted, #8ea0c4) !important; }
.appshell.coffre-mode .cf-row { border-top-color: var(--jt-border, rgba(138,180,255,.1)) !important; }
.appshell.coffre-mode .cf-space-link, .appshell.coffre-mode .cf-link { color: var(--jt-accent, #8ba6ff) !important; }
/* En-tête de page (titre + sous-titre) selon le thème */
.appshell.coffre-mode .main .nc-pagehead h1, .appshell.coffre-mode .main .pagehead h1, .appshell.coffre-mode .main .ph-title { color: var(--jt-text, #fff) !important; }
.appshell.coffre-mode .main .nc-pagehead p, .appshell.coffre-mode .main .pagehead p, .appshell.coffre-mode .main .ph-sub { color: var(--jt-muted, #9fb0d0) !important; }
/* Tiroir/pop-up Travaux (.tv-panel) : suit le thème (sinon fond blanc illisible sur thème sombre) */
body.jt-theme .tv-panel { background: var(--jt-card, #fff) !important; color: var(--jt-text, #16223e) !important; }
body.jt-theme .tv-panel [style*="background:#fff"], body.jt-theme .tv-panel [style*="background: #fff"], body.jt-theme .tv-panel [style*="background:#ffffff"] { background: var(--jt-card, #fff) !important; }
body.jt-theme .tv-panel .card, body.jt-theme .tv-panel [style*="background:#f8fafc"], body.jt-theme .tv-panel [style*="background:#f3f5f8"], body.jt-theme .tv-panel [style*="background:#f5f8fc"] { background: var(--jt-card2) !important; border-color: var(--jt-border) !important; }
body.jt-theme .tv-panel h1, body.jt-theme .tv-panel h2, body.jt-theme .tv-panel h3, body.jt-theme .tv-panel h4, body.jt-theme .tv-panel b, body.jt-theme .tv-panel strong { color: var(--jt-text) !important; }
body.jt-theme .tv-panel .help, body.jt-theme .tv-panel [style*="color:#64748b"], body.jt-theme .tv-panel [style*="color:#7c8aa0"], body.jt-theme .tv-panel [style*="color:#6b7280"], body.jt-theme .tv-panel [style*="color:#94a3b8"] { color: var(--jt-muted) !important; }
body.jt-theme .tv-panel [style*="color:#16223e"], body.jt-theme .tv-panel [style*="color:#0e2a52"], body.jt-theme .tv-panel [style*="color:#1d2b3a"] { color: var(--jt-text) !important; }
body.jt-theme .tv-panel .field, body.jt-theme .tv-panel input:not([type=checkbox]):not([type=radio]), body.jt-theme .tv-panel select, body.jt-theme .tv-panel textarea { background: var(--jt-card2) !important; color: var(--jt-text) !important; border-color: var(--jt-border) !important; }
/* Modale d'alerte/confirmation (ncModal .ncm-*) : suit le thème (sinon boîte blanche sur thème sombre) */
body.jt-theme .ncm-card { background: var(--jt-card, #fff) !important; color: var(--jt-text, #1a2433) !important; border: 1px solid var(--jt-border) !important; }
body.jt-theme .ncm-title { color: var(--jt-text) !important; }
body.jt-theme .ncm-msg { color: var(--jt-muted, #36434f) !important; }
body.jt-theme .ncm-actions { border-top-color: var(--jt-border) !important; }

/* ===== Comptabilité — menu teinté à la palette de la page (violet, compatible thème compta) ===== */
.appshell.compta-mode .appside { background: linear-gradient(180deg, #3b2f78 0%, #271c56 55%, #201a46 100%) !important; border-right: 1px solid rgba(139,92,246,.18) !important; box-shadow: none !important; }
.appshell.compta-mode .appside .nav a.active { background: linear-gradient(135deg, #8b5cf6, #a78bfa) !important; box-shadow: 0 8px 20px rgba(139,92,246,.4) !important; }
.appshell.compta-mode .appside .nav a:hover { background: rgba(139,92,246,.16) !important; }
.appshell.compta-mode .appside .leia-card { background: rgba(139,92,246,.14); border-color: rgba(139,92,246,.24); }

/* ===== Comptabilité — PAGE comme le Cockpit (fond spatial sombre) — remplace le menu violet ===== */
.appshell.compta-mode { background-color:#060D1D !important;
  background-image:
    radial-gradient(closest-side at 20% 28%, rgba(123,77,255,.10), transparent 70%),
    radial-gradient(closest-side at 82% 64%, rgba(215,155,58,.10), transparent 70%),
    linear-gradient(160deg, #071326 0%, #081B35 50%, #0C2144 100%) !important;
  background-size:cover !important; background-position:center !important; background-attachment:fixed !important; background-repeat:no-repeat !important; }
.appshell.compta-mode .appside { background: transparent !important; border-right:0 !important; box-shadow:none !important; }
.appshell.compta-mode .apptop { background: transparent !important; border-bottom:0 !important; box-shadow:none !important; }
.appshell.compta-mode .appmaincol .main { background: transparent !important; }
.appshell.compta-mode .cp-kpi, .appshell.compta-mode .cp-qt, .appshell.compta-mode .cp-w, .appshell.compta-mode .main .card, .appshell.compta-mode .nc-tile, .appshell.compta-mode .cp-leia-card { background: linear-gradient(180deg, rgba(20,36,70,.74), rgba(8,17,38,.68)) !important; border:1px solid rgba(138,180,255,.16) !important; box-shadow:0 14px 40px rgba(0,0,0,.4) !important; backdrop-filter: blur(16px); }
.appshell.compta-mode .cp-kpi-v, .appshell.compta-mode .cp-qt-t, .appshell.compta-mode .cp-w-head h4, .appshell.compta-mode .cp-row-t, .appshell.compta-mode .cp-h, .appshell.compta-mode .nc-tile-title { color:#fff !important; }
.appshell.compta-mode .cp-kpi-l, .appshell.compta-mode .cp-qt-d, .appshell.compta-mode .cp-w-sub, .appshell.compta-mode .cp-row-s, .appshell.compta-mode .help, .appshell.compta-mode .nc-tile-desc { color:#8ea0c4 !important; }
.appshell.compta-mode .main .nc-pagehead h1, .appshell.compta-mode .main .ph-title, .appshell.compta-mode .main h1 { color:#fff !important; }
.appshell.compta-mode .cp-row { border-top-color: rgba(138,180,255,.1) !important; }

/* ===== Comptabilité — PAGE aux teintes de la popup (cuivre/or), skeleton Cockpit ===== */
.appshell.compta-mode { background-image:
  radial-gradient(closest-side at 22% 26%, rgba(215,155,58,.12), transparent 70%),
  radial-gradient(closest-side at 80% 70%, rgba(231,184,96,.07), transparent 70%),
  linear-gradient(160deg, #0c0f18 0%, #12141f 52%, #17130c 100%) !important; }
.appshell.compta-mode .cp-hero { background: linear-gradient(120deg, #241a0e 0%, #16130f 55%, #101018 100%) !important; border: 1px solid rgba(215,155,58,.26) !important; box-shadow: 0 18px 50px rgba(0,0,0,.4) !important; }
.appshell.compta-mode .cp-hero .cp-hello, .appshell.compta-mode .cp-hero-sub { color: #F4F6FB !important; }
.appshell.compta-mode .cp-kpi, .appshell.compta-mode .cp-qt, .appshell.compta-mode .cp-w, .appshell.compta-mode .main .card, .appshell.compta-mode .nc-tile { background: #161C2D !important; border: 1px solid rgba(255,255,255,.07) !important; }
.appshell.compta-mode .cp-kpi:hover, .appshell.compta-mode .cp-qt:hover, .appshell.compta-mode .nc-tile:hover, .appshell.compta-mode .cp-w:hover { border-color: rgba(215,155,58,.42) !important; }
.appshell.compta-mode .cp-qt-cta, .appshell.compta-mode .cp-w-link, .appshell.compta-mode .cp-leia-clink { color: #E7B860 !important; }
.appshell.compta-mode .cp-qt-ic svg, .appshell.compta-mode .cp-kpi-ic svg { color: #D79B3A !important; stroke: #D79B3A !important; }
.appshell.compta-mode .cp-search { background: #1C2234 !important; border-color: rgba(255,255,255,.1) !important; color: #F4F6FB !important; }

/* ===== Comptabilité — DESIGN VALIDÉ (maquette) : full dark 100% + cuivre/or, cartes verre fumé ===== */
.appshell.compta-mode { background-color: #05070d !important; background-image:
  radial-gradient(closest-side at 80% 18%, rgba(215,155,58,.11), transparent 58%),
  radial-gradient(closest-side at 14% 82%, rgba(215,155,58,.05), transparent 60%),
  linear-gradient(160deg, #060810 0%, #0a0c15 52%, #0e0b07 100%) !important; }
.appshell.compta-mode .cp-hero { background: radial-gradient(120% 130% at 88% 20%, rgba(215,155,58,.14), transparent 52%), linear-gradient(120deg, #14110b 0%, #100e12 60%, #0b0d16 100%) !important; border: 1px solid rgba(215,155,58,.28) !important; box-shadow: 0 18px 50px rgba(0,0,0,.45) !important; }
.appshell.compta-mode .cp-hero .cp-hello, .appshell.compta-mode .cp-hero-sub { color: #F4F6FB !important; }
.appshell.compta-mode .cp-kpi, .appshell.compta-mode .cp-qt, .appshell.compta-mode .cp-w, .appshell.compta-mode .main .card, .appshell.compta-mode .nc-tile { background: #12141f !important; border: 1px solid rgba(255,255,255,.06) !important; box-shadow: 0 10px 30px rgba(0,0,0,.4) !important; }
.appshell.compta-mode .cp-kpi:hover, .appshell.compta-mode .cp-qt:hover, .appshell.compta-mode .nc-tile:hover, .appshell.compta-mode .cp-w:hover { border-color: rgba(215,155,58,.45) !important; }
.appshell.compta-mode .cp-qt-ic, .appshell.compta-mode .cp-kpi-ic { background: rgba(215,155,58,.12) !important; }
.appshell.compta-mode .cp-qt-ic svg, .appshell.compta-mode .cp-kpi-ic svg { color: #E7B860 !important; stroke: #E7B860 !important; }
.appshell.compta-mode .cp-qt-cta, .appshell.compta-mode .cp-w-link, .appshell.compta-mode .cp-leia-clink, .appshell.compta-mode .cp-voir { color: #E7B860 !important; }
.appshell.compta-mode .cp-w svg path, .appshell.compta-mode .cp-w svg circle { stroke: #D79B3A !important; }
.appshell.compta-mode .cp-w svg [fill]:not([fill="none"]) { fill: rgba(215,155,58,.18) !important; }
.appshell.compta-mode .cp-search { background: #12141f !important; border-color: rgba(255,255,255,.08) !important; color: #F4F6FB !important; }
.appshell.compta-mode .cp-leia { background: #12141f !important; border: 1px solid rgba(215,155,58,.22) !important; }
.appshell.compta-mode .cp-leia-btn, .appshell.compta-mode .cp-hero .cp-btn.primary { background: linear-gradient(180deg, #D8A04B, #B8771D) !important; color: #fff !important; }

/* Comptabilité — item de menu actif en cuivre (cohérent design compta) */
.appshell.compta-mode .appside .nav a.active { background: linear-gradient(135deg, #D8A04B, #B8771D) !important; box-shadow: 0 8px 20px rgba(215,155,58,.4) !important; color: #fff !important; }
.appshell.compta-mode .appside .nav a:hover { background: rgba(215,155,58,.16) !important; }
.appshell.compta-mode .appside .leia-card { background: rgba(215,155,58,.12) !important; border-color: rgba(215,155,58,.24) !important; }

/* ==================================================================================
   COMPTABILITÉ — thème DÉFINITIF « finance premium » : bleu nuit + cuivre/or, élégant.
   (override des blocs compta precedents + du wrapper .cpx injecte)
   ================================================================================== */
.appshell.compta-mode {
  --bg-main:#08111F; --bg-panel:#0E1728; --bg-card:#121B2D; --bg-card-soft:#162033;
  --c-border:#273348; --c-border-gold:rgba(214,164,79,.35);
  --c-text:#F7F4EE; --c-muted:#A9B1C2; --c-accent:#D6A44F; --c-accent-strong:#F0B94D; --c-accent-dark:#8A5A18;
  --c-success:#31C978; --c-danger:#FF5C5C;
  background: linear-gradient(180deg, #08111F 0%, #0a1526 100%) !important; background-attachment: fixed !important; }
.appshell.compta-mode .appside { background: linear-gradient(180deg, #0b1526 0%, #081120 100%) !important; border-right: 1px solid rgba(214,164,79,.12) !important; box-shadow: none !important; }
.appshell.compta-mode .appside .nav a.active { background: linear-gradient(135deg, #D6A44F, #8A5A18) !important; color: #14100a !important; box-shadow: 0 8px 20px rgba(214,164,79,.3) !important; }
.appshell.compta-mode .appside .nav a:hover { background: rgba(214,164,79,.14) !important; }
.appshell.compta-mode .appside .leia-card { background: rgba(214,164,79,.1) !important; border-color: rgba(214,164,79,.2) !important; }
.appshell.compta-mode .apptop { background: transparent !important; border-bottom: 0 !important; box-shadow: none !important; }
.appshell.compta-mode .appmaincol .main { background: transparent !important; }
.appshell.compta-mode .cpx { background: transparent !important; }
.appshell.compta-mode .nc-pagehead h1 { color: var(--c-text) !important; }
.appshell.compta-mode .nc-pagehead p, .appshell.compta-mode .nc-pagehead .sub { color: var(--c-muted) !important; }
/* HERO — subtil, léger, bordure cuivre fine, glow discret (pas de gros bloc marron) */
.appshell.compta-mode .cp-hero { background: linear-gradient(120deg, #0E1728 0%, #121B2D 62%, #0F1A2C 100%) !important; border: 1px solid var(--c-border-gold) !important; box-shadow: 0 0 40px rgba(214,164,79,.07), 0 16px 44px rgba(0,0,0,.32) !important; }
.appshell.compta-mode .cp-hero .cp-hello, .appshell.compta-mode .cp-hero-sub { color: var(--c-text) !important; }
/* CARTES — #121B2D, bordure cuivre discrète, radius 20, ombre douce, hover léger */
.appshell.compta-mode .cp-kpi, .appshell.compta-mode .cp-qt, .appshell.compta-mode .cp-w, .appshell.compta-mode .main .card, .appshell.compta-mode .nc-tile { background: var(--bg-card) !important; border: 1px solid rgba(214,164,79,.18) !important; border-radius: 20px !important; box-shadow: 0 8px 26px rgba(0,0,0,.26) !important; }
.appshell.compta-mode .cp-kpi:hover, .appshell.compta-mode .cp-qt:hover, .appshell.compta-mode .cp-w:hover, .appshell.compta-mode .nc-tile:hover { border-color: var(--c-border-gold) !important; box-shadow: 0 10px 30px rgba(0,0,0,.3) !important; transform: translateY(-2px); }
.appshell.compta-mode .cp-kpi-v, .appshell.compta-mode .cp-qt-t, .appshell.compta-mode .cp-w-head h4, .appshell.compta-mode .cp-row-t, .appshell.compta-mode .cp-h, .appshell.compta-mode .nc-tile-title { color: var(--c-text) !important; }
.appshell.compta-mode .cp-kpi-l, .appshell.compta-mode .cp-qt-d, .appshell.compta-mode .cp-w-sub, .appshell.compta-mode .cp-row-s, .appshell.compta-mode .help, .appshell.compta-mode .nc-tile-desc { color: var(--c-muted) !important; }
/* Icônes cuivre + liens or */
.appshell.compta-mode .cp-qt-ic, .appshell.compta-mode .cp-kpi-ic { background: rgba(214,164,79,.12) !important; }
.appshell.compta-mode .cp-qt-ic svg, .appshell.compta-mode .cp-kpi-ic svg { color: var(--c-accent) !important; stroke: var(--c-accent) !important; }
.appshell.compta-mode .cp-qt-cta, .appshell.compta-mode .cp-w-link, .appshell.compta-mode .cp-leia-clink, .appshell.compta-mode .cp-voir { color: var(--c-accent-strong) !important; }
/* Graphiques cuivre, grille discrète */
.appshell.compta-mode .cp-w svg path, .appshell.compta-mode .cp-w svg polyline, .appshell.compta-mode .cp-w svg circle { stroke: var(--c-accent) !important; }
.appshell.compta-mode .cp-w svg [fill]:not([fill="none"]) { fill: rgba(214,164,79,.15) !important; }
.appshell.compta-mode .cp-w svg line { stroke: rgba(255,255,255,.06) !important; }
/* Recherche, Leia, boutons */
.appshell.compta-mode .cp-search { background: var(--bg-card-soft) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }
.appshell.compta-mode .cp-leia { background: var(--bg-card) !important; border: 1px solid var(--c-border-gold) !important; }
.appshell.compta-mode .cp-leia-btn, .appshell.compta-mode .cp-hero .cp-btn.primary { background: linear-gradient(180deg, #F0B94D, #B8771D) !important; color: #1a1206 !important; }
.appshell.compta-mode .cp-up, .appshell.compta-mode .up { color: var(--c-success) !important; }
.appshell.compta-mode .cp-down, .appshell.compta-mode .neg { color: var(--c-danger) !important; }

/* ============================================================
   COMPTABILITÉ — correctifs lisibilité v2 (titres, Leïa, icônes cuivre,
   menu survol, barre du haut). Bloc final : gagne la cascade.
   ============================================================ */

/* — Titre de page (pageHead = h2.view-title / p.nc-pagesub) — */
.appshell.compta-mode .cpx .view-title,
.appshell.compta-mode .nc-pagehead .view-title { color: var(--c-text) !important; -webkit-text-fill-color: var(--c-text) !important; }
.appshell.compta-mode .cpx .nc-pagesub,
.appshell.compta-mode .nc-pagehead .nc-pagesub { color: var(--c-muted) !important; }

/* — Bandeau « Le conseil de Leïa » : fond sombre + textes clairs — */
.appshell.compta-mode .cp-leia { background: linear-gradient(180deg, rgba(20,29,48,.9), rgba(14,22,38,.9)) !important; border: 1px solid var(--c-border-gold) !important; }
.appshell.compta-mode .cp-leia-head div,
.appshell.compta-mode .cp-leia-head b { color: var(--c-text) !important; }
.appshell.compta-mode .cp-leia-head div div,
.appshell.compta-mode .cp-leia-head [style*="opacity"] { color: var(--c-muted) !important; opacity: 1 !important; }

/* — Cartes Leïa (Importez / Scannez / Exports) — */
.appshell.compta-mode .cp-leia-card { background: var(--bg-card-soft) !important; border: 1px solid rgba(214,164,79,.18) !important; }
.appshell.compta-mode .cp-leia-card:hover { border-color: var(--c-border-gold) !important; box-shadow: 0 10px 28px rgba(0,0,0,.32) !important; }
.appshell.compta-mode .cp-leia-ct { color: var(--c-text) !important; }
.appshell.compta-mode .cp-leia-cd { color: var(--c-muted) !important; }
.appshell.compta-mode .cp-leia-clink { color: var(--c-accent-strong) !important; }
.appshell.compta-mode .cp-leia-cic { background: rgba(214,164,79,.14) !important; color: var(--c-accent) !important; }
.appshell.compta-mode .cp-leia-cic svg { color: var(--c-accent) !important; stroke: var(--c-accent) !important; }

/* — Icônes des tuiles « Tous les outils » : pastel → cuivre — */
.appshell.compta-mode .nc-stat-ico,
.appshell.compta-mode .nc-tile .nc-stat-ico { background: rgba(214,164,79,.12) !important; color: var(--c-accent) !important; box-shadow: inset 0 0 0 1px rgba(214,164,79,.16) !important; }
.appshell.compta-mode .nc-stat-ico svg { color: var(--c-accent) !important; stroke: var(--c-accent) !important; }
.appshell.compta-mode .nc-tile-arrow { color: var(--c-accent-strong) !important; }

/* — Icônes accès rapide + KPI : cuivre malgré styles inline — */
.appshell.compta-mode .cp-qt-ic { background: rgba(214,164,79,.12) !important; }
.appshell.compta-mode .cp-qt-ic svg { color: var(--c-accent) !important; stroke: var(--c-accent) !important; }
.appshell.compta-mode .cp-kpi-ic { color: var(--c-accent) !important; }
.appshell.compta-mode .cp-kpi-ic svg { color: var(--c-accent) !important; stroke: var(--c-accent) !important; }

/* — Menu latéral : survol & item actif lisibles — */
.appshell.compta-mode .appside .nav a,
.appshell.compta-mode .appside .nav a span,
.appshell.compta-mode .appside .nav a .app-link-l { color: #E8ECF5 !important; }
.appshell.compta-mode .appside .nav a svg { color: currentColor !important; stroke: currentColor !important; }
.appshell.compta-mode .appside .nav a:hover { background: rgba(214,164,79,.14) !important; }
.appshell.compta-mode .appside .nav a:hover,
.appshell.compta-mode .appside .nav a:hover span { color: #FCE9C6 !important; }
.appshell.compta-mode .appside .nav a.active,
.appshell.compta-mode .appside .nav a.active:hover { background: linear-gradient(135deg, #F0B94D, #B8771D) !important; }
.appshell.compta-mode .appside .nav a.active,
.appshell.compta-mode .appside .nav a.active span,
.appshell.compta-mode .appside .nav a.active svg { color: #1a1206 !important; stroke: #1a1206 !important; }

/* — Barre du haut : pastilles au thème page — */
.appshell.compta-mode .nc-presence-btn,
.appshell.compta-mode .alerts-btn { background: rgba(18,27,45,.72) !important; border: 1px solid rgba(214,164,79,.28) !important; color: var(--c-text) !important; box-shadow: 0 6px 18px rgba(0,0,0,.3) !important; }
.appshell.compta-mode .nc-presence-btn *,
.appshell.compta-mode .alerts-btn * { color: var(--c-text) !important; }
.appshell.compta-mode .alerts-btn svg,
.appshell.compta-mode .nc-presence-btn svg { color: var(--c-accent) !important; stroke: var(--c-accent) !important; }
.appshell.compta-mode .nc-presence-dot,
.appshell.compta-mode .presence-dot { background: var(--c-success) !important; }
.appshell.compta-mode .alerts-badge { background: var(--c-danger) !important; color: #fff !important; }
.appshell.compta-mode .cstore { border: 1px solid rgba(214,164,79,.3) !important; }

/* ============================================================
   PAGE CLIENTS — CRM/finance premium (bleu nuit + cuivre/or)
   Auto-portée : fonctionne en pleine page ET dans une popup.
   ============================================================ */
.cx-clients { --cxpanel:#0E1728; --cxcard:#121B2D; --cxcard2:#162033; --cxbd:#273348; --cxgold:rgba(214,164,79,.35); --cxtx:#F7F4EE; --cxmut:#A9B1C2; --cxacc:#D6A44F; --cxacc2:#F0B94D; --cxok:#31C978; color: var(--cxtx); }
.cx-clients .nc-pagehead .view-title { color: var(--cxtx) !important; -webkit-text-fill-color: var(--cxtx) !important; }
.cx-clients .nc-pagehead .nc-pagesub, .cx-clients .nc-pagesub { color: var(--cxmut) !important; }

/* Toolbar */
.cx-clients .cx-toolbar { display:flex; gap:10px; align-items:center; justify-content:flex-end; margin:4px 0 18px; flex-wrap:wrap; }
.cx-clients .cx-search-wrap { position:relative; flex:0 1 440px; min-width:220px; }
.cx-clients .cx-search { width:100%; height:44px; border-radius:14px; border:1px solid var(--cxbd); background:var(--cxcard); color:var(--cxtx); padding:0 14px 0 42px; font-size:14px; outline:none; transition:border-color .15s, box-shadow .15s; }
.cx-clients .cx-search::placeholder { color:#7f8aa3; }
.cx-clients .cx-search:focus { border-color:var(--cxgold); box-shadow:0 0 0 3px rgba(214,164,79,.12); }
.cx-clients .cx-search-ic { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--cxacc); pointer-events:none; display:grid; place-items:center; }
.cx-clients .cx-search-ic svg { width:17px; height:17px; }
.cx-clients .cx-iconbtn { width:44px; height:44px; flex:none; border-radius:14px; border:1px solid var(--cxbd); background:var(--cxcard); color:var(--cxacc); display:grid; place-items:center; cursor:pointer; transition:border-color .15s; }
.cx-clients .cx-iconbtn svg { width:18px; height:18px; }
.cx-clients .cx-iconbtn:hover { border-color:var(--cxgold); }

/* KPI cards */
.cx-clients .cx-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }
.cx-clients .cx-kpi { position:relative; overflow:hidden; background:linear-gradient(180deg, var(--cxcard), #0f1826); border:1px solid rgba(214,164,79,.14); border-radius:18px; padding:16px 18px 16px; min-height:118px; box-shadow:0 8px 26px rgba(0,0,0,.26); }
.cx-clients .cx-kpi.danger { border-color:rgba(255,122,122,.22); }
.cx-clients .cx-kpi-top { display:flex; align-items:center; gap:9px; color:var(--cxmut); font-size:13px; font-weight:600; }
.cx-clients .cx-kpi-ic { width:30px; height:30px; border-radius:9px; background:rgba(214,164,79,.12); color:var(--cxacc); display:grid; place-items:center; flex:none; }
.cx-clients .cx-kpi-ic svg { width:17px; height:17px; color:var(--cxacc); stroke:var(--cxacc); }
.cx-clients .cx-kpi-v { font-size:26px; font-weight:800; color:var(--cxtx); margin-top:12px; letter-spacing:.2px; position:relative; z-index:1; }
.cx-clients .cx-kpi.danger .cx-kpi-v { color:#FF9B9B; }
.cx-clients .cx-kpi-spark { position:absolute; left:0; right:0; bottom:0; height:46px; opacity:.85; }
.cx-clients .cx-spark { width:100%; height:46px; display:block; }

/* Tabs + export */
.cx-clients .cx-tabs-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.cx-clients .cx-tabs { display:inline-flex; gap:6px; background:var(--cxpanel); border:1px solid var(--cxbd); border-radius:14px; padding:5px; }
.cx-clients .cx-tab { border:0; background:transparent; color:var(--cxmut); font-weight:600; font-size:13.5px; padding:8px 16px; border-radius:10px; cursor:pointer; transition:color .15s, background .15s; }
.cx-clients .cx-tab:hover { color:var(--cxtx); }
.cx-clients .cx-tab.active { background:linear-gradient(135deg, #E9B85C, #B8771D); color:#1a1206; box-shadow:0 4px 14px rgba(214,164,79,.28); }
.cx-clients .cx-export { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--cxgold); background:transparent; color:var(--cxacc2); font-weight:600; font-size:13.5px; padding:9px 16px; border-radius:12px; cursor:pointer; transition:background .15s; }
.cx-clients .cx-export:hover { background:rgba(214,164,79,.1); }
.cx-clients .cx-export svg { width:15px; height:15px; }

/* Panel + table */
.cx-clients .cx-panel { background:linear-gradient(180deg, var(--cxpanel), #0b1322); border:1px solid var(--cxbd); border-radius:18px; padding:4px 10px 8px; box-shadow:0 10px 30px rgba(0,0,0,.28); }
.cx-clients .cx-table { width:100%; border-collapse:collapse; font-size:14px; }
.cx-clients .cx-table th { text-align:left; font-size:11px; letter-spacing:.6px; text-transform:uppercase; color:#7f8aa3; font-weight:700; padding:18px 14px 12px; border-bottom:1px solid var(--cxbd); }
.cx-clients .cx-table th.num, .cx-clients .cx-table td.num { text-align:right; }
.cx-clients .cx-table td { padding:16px 14px; border-bottom:1px solid rgba(39,51,72,.55) !important; color:var(--cxtx) !important; vertical-align:middle; background:transparent; }
.cx-clients .cx-table tbody tr:last-child td { border-bottom:0 !important; }
.cx-clients .cx-table tbody tr { transition:background .12s; }
.cx-clients .cx-table tbody tr:hover td { background:rgba(214,164,79,.05) !important; }
.cx-clients .cx-ref { color:var(--cxacc) !important; font-weight:700; font-size:13px; letter-spacing:.3px; }
.cx-clients .cx-name { color:var(--cxtx) !important; font-weight:600; }
.cx-clients .cx-name.cx-link { color:var(--cxtx) !important; cursor:pointer; }
.cx-clients .cx-name.cx-link:hover { text-decoration:underline; }
.cx-clients .cx-kpi.cx-clk { cursor:pointer; }
.cx-clients .cx-kpi.cx-clk:hover { border-color:var(--cxgold) !important; box-shadow:0 10px 26px rgba(0,0,0,.28) !important; transform:translateY(-2px); }

/* Fiche client (popup) — consomme les jetons du thème actif */
.cx-fiche { display:flex; flex-direction:column; gap:16px; }
.cx-fiche .cx-fi-head { display:flex; align-items:center; gap:14px; }
.cx-fiche .cx-fi-av { width:52px; height:52px; border-radius:14px; flex:none; display:grid; place-items:center; font-weight:800; font-size:22px; color:var(--jt-on); background:linear-gradient(135deg,var(--jt-accent),var(--jt-accent3)); }
.cx-fiche .cx-fi-name { font-weight:800; font-size:18px; color:var(--jt-text); }
.cx-fiche .cx-fi-sub { color:var(--jt-muted); font-size:13px; margin-top:2px; }
.cx-fiche .cx-fi-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px 22px; background:color-mix(in srgb, var(--jt-text) 4%, transparent); border:1px solid var(--jt-border); border-radius:14px; padding:15px 18px; }
.cx-fiche .cx-fi-row { display:flex; flex-direction:column; gap:2px; min-width:0; }
.cx-fiche .cx-fi-l { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--jt-muted); font-weight:700; }
.cx-fiche .cx-fi-v { color:var(--jt-text); font-size:14px; word-break:break-word; }
.cx-fiche .cx-fi-link { display:inline-block; text-align:left; padding:0; margin:0; border:0; background:transparent; font-family:inherit; font-size:14px; cursor:pointer; color:var(--jt-accent2) !important; }
.cx-fiche .cx-fi-link:hover { text-decoration:underline; }
/* Garder les infos cliquables de la fiche en « lien » (pas en bouton) malgré le thème popup */
body.jt-theme .ncp-body .cx-fiche .cx-fi-link { background:transparent !important; border:0 !important; padding:0 !important; color:var(--jt-accent2) !important; }
body.jt-theme .ncp-body .cx-fiche .cx-fi-link:hover { background:transparent !important; text-decoration:underline !important; }
.cx-fiche .cx-fi-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.cx-fiche .cx-fi-stat { background:var(--jt-card); border:1px solid var(--jt-border); border-radius:12px; padding:12px 14px; text-align:center; }
.cx-fiche .cx-fi-sv { font-weight:800; font-size:18px; color:var(--jt-text); }
.cx-fiche .cx-fi-sv.due { color:var(--jt-accent2); }
.cx-fiche .cx-fi-sv.late { color:var(--jt-danger); }
.cx-fiche .cx-fi-sl { font-size:11.5px; color:var(--jt-muted); margin-top:3px; }
.cx-fiche .cx-fi-acts { display:flex; gap:10px; flex-wrap:wrap; margin-top:2px; }
@media (max-width:560px){ .cx-fiche .cx-fi-grid{ grid-template-columns:1fr; } .cx-fiche .cx-fi-stats{ grid-template-columns:repeat(2,1fr); } }
.cx-clients .cx-amt { color:var(--cxtx) !important; font-weight:700; white-space:nowrap; }
.cx-clients .cx-soft { color:var(--cxmut) !important; }
.cx-clients .cx-table td.cx-due, .cx-clients .cx-table td.cx-late { white-space:nowrap; }
.cx-clients .cx-table td.cx-due { color:var(--cxacc2) !important; font-weight:700; }
.cx-clients .cx-table td.cx-late { color:#FF9B9B !important; font-weight:800; }
.cx-clients .cx-table td.act { text-align:right; }
.cx-clients .cx-hist { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--cxgold); background:transparent; color:var(--cxacc2); font-weight:600; font-size:13px; padding:7px 13px; border-radius:10px; cursor:pointer; transition:background .15s; }
.cx-clients .cx-hist:hover { background:rgba(214,164,79,.1); }
.cx-clients .cx-hist-ic { display:grid; place-items:center; }
.cx-clients .cx-hist svg { width:14px; height:14px; color:var(--cxacc); stroke:var(--cxacc); }
.cx-clients .cx-relance { display:inline-flex; align-items:center; border:0; background:linear-gradient(180deg,#F0B94D,#B8771D); color:#1a1206; font-weight:700; font-size:13px; padding:8px 15px; border-radius:10px; cursor:pointer; margin-right:8px; }
.cx-clients .cx-relance:hover { filter:brightness(1.05); }

.cx-clients .cx-empty-note { padding:28px; text-align:center; color:var(--cxmut); font-size:14px; }
.cx-clients .cx-empty-note.cx-ok { color:var(--cxok); }

/* Top clients & stats */
.cx-clients .cx-card { background:var(--cxcard); border:1px solid rgba(214,164,79,.14); border-radius:16px; padding:16px 18px; }
.cx-clients .cx-card-t { font-weight:800; color:var(--cxtx); margin-bottom:10px; }
.cx-clients .cx-bar-track { height:9px; border-radius:6px; background:rgba(214,164,79,.12); margin-top:4px; }
.cx-clients .cx-bar-fill { height:9px; border-radius:6px; background:linear-gradient(90deg,#C98A2E,#F0B94D); }
.cx-clients .cx-mbar { background:linear-gradient(180deg,#F0B94D,#C98A2E); }

/* Footer premium */
.cx-clients .cx-foot { text-align:center; padding:34px 16px 30px; }
.cx-clients .cx-foot-illus { width:132px; margin:0 auto 12px; }
.cx-clients .cx-foot-t { color:var(--cxacc2); font-weight:700; font-size:16px; }
.cx-clients .cx-foot-s { color:var(--cxmut); font-size:13.5px; margin-top:4px; }

@media (max-width:900px){ .cx-clients .cx-kpis{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .cx-clients .cx-kpis{ grid-template-columns:1fr;} }

/* ============================================================
   PAGE VENTES — tableau de bord commercial premium (2 variantes)
   Variante A (cyan) = défaut ; Variante B (indigo/violet) = .vx-b
   Toggle vit sur .appshell (ventes-mode) ET sur le wrapper .vx
   ============================================================ */
/* Palettes (variables) */
.appshell.ventes-mode, .vx {
  --vbg:#07111F; --vcard:#101B2D; --vhover:#15233A; --vpanel:#0C1626; --vborder:rgba(255,255,255,.07);
  --vtx:#F7F9FC; --vmut:#A5B3C7; --vacc:#28D6FF; --vacc2:#5CEBFF; --vacc3:#0099CC; --vok:#34D399; --vdanger:#FF5A5A;
}
.appshell.ventes-mode.vx-b, .vx.vx-b {
  --vbg:#08111F; --vcard:#111C30; --vhover:#1A2540; --vpanel:#0D1730; --vborder:rgba(255,255,255,.08);
  --vtx:#F6F8FB; --vmut:#B1BDD3; --vacc:#6C63FF; --vacc2:#A78BFA; --vacc3:#8B5CF6; --vok:#36D399; --vdanger:#FF6666;
}

/* Fond de page + coque (comme cockpit/compta : sidebar + topbar sombres) */
.appshell.ventes-mode { background:#07111F !important; background-image: radial-gradient(120% 90% at 80% -10%, rgba(40,214,255,.06), transparent 55%) !important; }
.appshell.ventes-mode.vx-b { background:#08111F !important; background-image: radial-gradient(120% 90% at 80% -10%, rgba(108,99,255,.08), transparent 55%) !important; }
.appshell.ventes-mode .appside { background:linear-gradient(180deg,#0a1524,#070f1c) !important; border-right:1px solid var(--vborder) !important; box-shadow:none !important; }
.appshell.ventes-mode .appside .nav a, .appshell.ventes-mode .appside .nav a span { color:#E6EDF6 !important; }
.appshell.ventes-mode .appside .nav a svg { color:currentColor !important; stroke:currentColor !important; }
.appshell.ventes-mode .appside .nav a:hover { background:rgba(255,255,255,.05) !important; }
.appshell.ventes-mode .appside .nav a.active, .appshell.ventes-mode .appside .nav a.active:hover { background:linear-gradient(135deg,var(--vacc),var(--vacc3)) !important; color:#04121b !important; box-shadow:0 8px 22px color-mix(in srgb, var(--vacc) 35%, transparent) !important; }
.appshell.ventes-mode.vx-b .appside .nav a.active { color:#0f0a26 !important; }
.appshell.ventes-mode .appside .nav a.active span, .appshell.ventes-mode .appside .nav a.active svg { color:inherit !important; stroke:currentColor !important; }
.appshell.ventes-mode .apptop { background:transparent !important; border-bottom:0 !important; box-shadow:none !important; }
.appshell.ventes-mode .appmaincol .main { background:transparent !important; }
/* Pastilles top-bar au thème */
.appshell.ventes-mode .nc-presence-btn, .appshell.ventes-mode .alerts-btn { background:rgba(16,27,45,.72) !important; border:1px solid var(--vborder) !important; color:var(--vtx) !important; box-shadow:0 6px 18px rgba(0,0,0,.3) !important; }
.appshell.ventes-mode .nc-presence-btn *, .appshell.ventes-mode .alerts-btn * { color:var(--vtx) !important; }
.appshell.ventes-mode .alerts-btn svg, .appshell.ventes-mode .nc-presence-btn svg { color:var(--vacc) !important; stroke:var(--vacc) !important; }
.appshell.ventes-mode .cstore { border:1px solid var(--vborder) !important; }

/* Titre de page */
.vx .nc-pagehead .view-title { color:var(--vtx) !important; -webkit-text-fill-color:var(--vtx) !important; }
.vx .nc-pagehead .nc-pagesub, .vx .nc-pagesub { color:var(--vmut) !important; }

/* Toolbar : recherche + switch de variante */
.vx .vx-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:2px 0 18px; flex-wrap:wrap; }
.vx .vx-search-wrap { position:relative; flex:0 1 440px; min-width:220px; }
.vx .vx-search { width:100%; height:44px; border-radius:14px; border:1px solid var(--vborder); background:var(--vcard); color:var(--vtx); padding:0 14px 0 42px; font-size:14px; outline:none; transition:border-color .15s, box-shadow .15s; }
.vx .vx-search::placeholder { color:#6f7f97; }
.vx .vx-search:focus { border-color:var(--vacc); box-shadow:0 0 0 3px color-mix(in srgb, var(--vacc) 16%, transparent); }
.vx .vx-search-ic { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--vacc); display:grid; place-items:center; pointer-events:none; }
.vx .vx-search-ic svg { width:17px; height:17px; }
.vx .vx-switch { display:inline-flex; gap:4px; background:var(--vpanel); border:1px solid var(--vborder); border-radius:13px; padding:4px; }
.vx .vx-sw-opt { display:inline-flex; align-items:center; gap:8px; border:0; background:transparent; color:var(--vmut); font-weight:600; font-size:13px; padding:8px 14px; border-radius:9px; cursor:pointer; transition:all .15s; }
.vx .vx-sw-opt.on { background:var(--vcard); color:var(--vtx); box-shadow:0 2px 8px rgba(0,0,0,.3); }
.vx .vx-sw-dot { width:10px; height:10px; border-radius:50%; }
.vx .vx-sw-dot.a { background:#28D6FF; box-shadow:0 0 8px rgba(40,214,255,.7); }
.vx .vx-sw-dot.b { background:#6C63FF; box-shadow:0 0 8px rgba(108,99,255,.7); }

.vx .vx-loading { padding:30px; color:var(--vmut); }

/* KPIs */
.vx .vx-kpis { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:22px; }
.vx .vx-kpi { position:relative; overflow:hidden; background:linear-gradient(180deg,var(--vcard),color-mix(in srgb,var(--vcard) 80%, #060d18)); border:1px solid var(--vborder); border-radius:16px; padding:13px 15px; min-height:98px; box-shadow:0 6px 18px rgba(0,0,0,.22); transition:border-color .18s, transform .18s; }
.vx .vx-kpi:hover { border-color:color-mix(in srgb,var(--vacc) 40%, transparent); transform:translateY(-2px); }
.vx .vx-kpi-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.vx .vx-kpi-l { color:var(--vmut); font-size:12.5px; font-weight:600; }
.vx .vx-kpi-ic { width:34px; height:34px; border-radius:10px; background:color-mix(in srgb,var(--vacc) 14%, transparent); color:var(--vacc); display:grid; place-items:center; flex:none; }
.vx .vx-kpi-ic svg { width:18px; height:18px; }
.vx .vx-kpi-v { font-size:21px; font-weight:800; color:var(--vtx); margin-top:7px; letter-spacing:.2px; position:relative; z-index:1; }
.vx .vx-kpi-sub { font-size:12px; color:var(--vmut); margin-top:3px; min-height:16px; position:relative; z-index:1; }
.vx .vx-kpi-sub.up { color:var(--vok); }
.vx .vx-kpi-sub.down { color:var(--vdanger); }
.vx .vx-kpi-chart { margin-top:6px; }
.vx .vx-kpi-chart.wide { position:absolute; left:0; right:0; bottom:0; height:56px; opacity:.9; margin:0; }
.vx .vx-kpi-chart.donut { position:absolute; right:16px; bottom:14px; width:56px; height:56px; margin:0; }
.vx .vx-kpi-chart.bars { position:absolute; right:16px; bottom:14px; width:96px; height:44px; margin:0; }
.vx .vx-spk { width:100%; height:56px; display:block; }
.vx .vx-spk-line { fill:none; stroke:var(--vacc); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.vx .vx-spk-area { fill:var(--vacc); opacity:.13; stroke:none; }
.vx .vx-donut { width:56px; height:56px; }
.vx .vx-donut-bg { stroke:rgba(255,255,255,.1); }
.vx .vx-donut-fg { stroke:var(--vacc); }
.vx .vx-bars { width:96px; height:44px; }
.vx .vx-bar { fill:var(--vacc); opacity:.85; }

/* Accès rapide — cartes premium */
.vx .vx-h { color:var(--vtx); font-size:15px; font-weight:700; margin:4px 0 12px; }
.vx .vx-cards { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:24px; }
.vx .vx-card { display:flex; align-items:center; gap:16px; text-align:left; background:var(--vcard); border:1px solid var(--vborder); border-radius:20px; padding:22px 22px; min-height:104px; cursor:pointer; transition:transform .18s, border-color .18s, box-shadow .18s, background .18s; }
.vx .vx-card:hover { transform:translateY(-3px); background:var(--vhover); border-color:color-mix(in srgb,var(--vacc) 45%, transparent); box-shadow:0 14px 36px rgba(0,0,0,.4), 0 0 26px color-mix(in srgb,var(--vacc) 16%, transparent); }
.vx .vx-card-ic { width:56px; height:56px; border-radius:16px; flex:none; display:grid; place-items:center; background:color-mix(in srgb,var(--vacc) 15%, transparent); color:var(--vacc); }
.vx .vx-card-ic svg { width:27px; height:27px; }
.vx .vx-card-ic svg { width:24px; height:24px; }
.vx .vx-card:hover .vx-card-ic { background:color-mix(in srgb,var(--vacc) 24%, transparent); }
.vx .vx-card-body { display:flex; flex-direction:column; gap:3px; min-width:0; }
.vx .vx-card-t { color:var(--vtx); font-weight:700; font-size:16px; }
.vx .vx-card-d { color:var(--vmut); font-size:12.5px; line-height:1.35; }

/* Panneaux dashboard */
.vx .vx-panels { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:14px; }
.vx .vx-panel { min-width:0; background:linear-gradient(180deg,var(--vpanel),color-mix(in srgb,var(--vpanel) 82%, #050c16)); border:1px solid var(--vborder); border-radius:18px; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.3); }
.vx .vx-p-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.vx .vx-p-head h4 { color:var(--vtx); font-size:14px; font-weight:700; margin:0; }
.vx .vx-p-link { border:0; background:transparent; color:var(--vacc); font-size:12px; font-weight:600; cursor:pointer; }
.vx .vx-p-link:hover { color:var(--vacc2); }
.vx .vx-empty { color:var(--vmut); font-size:13px; padding:12px 2px; }

/* Rows */
.vx .vx-row { display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid rgba(255,255,255,.05); }
.vx .vx-row-clk { cursor:pointer; border-radius:8px; transition:background .12s; padding-left:6px; padding-right:6px; margin:0 -6px; }
.vx .vx-row-clk:hover { background:color-mix(in srgb, var(--vacc) 9%, transparent); }
.vx .vx-panel .vx-row-main { min-width:0; }
.vx .vx-row-ref, .vx .vx-row-sub { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vx .vx-row:first-child { border-top:0; }
.vx .vx-row-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.vx .vx-row-ref { color:var(--vtx); font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vx .vx-row-sub { color:var(--vmut); font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vx .vx-row-right { display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex:none; }
.vx .vx-row-amt { color:var(--vtx); font-weight:700; font-size:13px; }
.vx .vx-row-day { color:var(--vmut); font-size:11px; }
.vx .vx-row-date { width:36px; flex:none; text-align:center; line-height:1; }
.vx .vx-row-date b { display:block; color:var(--vtx); font-size:15px; font-weight:800; }
.vx .vx-row-date span { color:var(--vmut); font-size:10px; }

/* Badges */
.vx .vx-badge { font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:100px; white-space:nowrap; }
.vx .vx-badge.ok { background:color-mix(in srgb,var(--vok) 18%, transparent); color:var(--vok); }
.vx .vx-badge.no { background:color-mix(in srgb,var(--vdanger) 18%, transparent); color:var(--vdanger); }
.vx .vx-badge.wait { background:color-mix(in srgb,var(--vacc) 16%, transparent); color:var(--vacc); }
.vx .vx-badge.draft { background:rgba(255,255,255,.09); color:var(--vmut); }

/* Funnel */
.vx .vx-funnel { margin:4px 0 8px; }
.vx .vx-fn-row { display:flex; align-items:center; gap:10px; margin:7px 0; }
.vx .vx-fn-lbl { width:88px; flex:none; color:var(--vmut); font-size:12.5px; }
.vx .vx-fn-barwrap { flex:1; display:flex; justify-content:center; }
.vx .vx-fn-bar { height:16px; border-radius:5px; background:linear-gradient(90deg,var(--vacc3),var(--vacc)); }
.vx .vx-fn-val { width:26px; flex:none; text-align:right; color:var(--vtx); font-weight:700; font-size:12.5px; }
.vx .vx-fn-total { color:var(--vmut); font-size:12px; text-align:center; margin-top:8px; padding-top:8px; border-top:1px solid rgba(255,255,255,.05); }

@media (max-width:1200px){ .vx .vx-kpis{ grid-template-columns:repeat(3,1fr);} .vx .vx-cards{ grid-template-columns:repeat(3,1fr);} .vx .vx-panels{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:760px){ .vx .vx-kpis{ grid-template-columns:repeat(2,1fr);} .vx .vx-cards{ grid-template-columns:1fr 1fr;} .vx .vx-panels{ grid-template-columns:1fr;} }

/* ============================================================
   PAGE AGENDA — grille hebdo premium, 3 teintes (Cyan / Indigo / Sable clair)
   Sélecteur en haut ; vit sur .appshell.agenda-mode + wrapper .av (av-a/b/c)
   ============================================================ */
/* --- Palettes --- */
.appshell.agenda-mode.av-a, .av.av-a { --abg:#0A1420; --acard:#101B2D; --apanel:#0C1626; --ahover:#15233A; --abd:rgba(255,255,255,.08); --atx:#F7F9FC; --amut:#9DB0C8; --aacc:#28D6FF; --aacc2:#5CEBFF; --aacc3:#0099CC; --agrid:rgba(255,255,255,.06); }
.appshell.agenda-mode.av-b, .av.av-b { --abg:#0A1020; --acard:#111C30; --apanel:#0D1730; --ahover:#1A2540; --abd:rgba(255,255,255,.09); --atx:#F6F8FB; --amut:#AEBAD2; --aacc:#8B5CF6; --aacc2:#A78BFA; --aacc3:#6C63FF; --agrid:rgba(255,255,255,.06); }
.appshell.agenda-mode.av-c, .av.av-c { --abg:#F4F1EA; --acard:#FFFFFF; --apanel:#FFFFFF; --ahover:#FBF3E7; --abd:#EAE2D2; --atx:#2A2A2E; --amut:#8C8577; --aacc:#E8912F; --aacc2:#F5A94C; --aacc3:#C9741A; --agrid:#EFE9DB; }
.av.av-a, .av.av-b { --nc-navy:#F7F9FC; }

/* --- Coque (fond, sidebar, top-bar) --- */
.appshell.agenda-mode { background:var(--abg) !important; }
.appshell.agenda-mode.av-a { background-image:radial-gradient(120% 90% at 82% -10%, rgba(40,214,255,.06), transparent 55%) !important; }
.appshell.agenda-mode.av-b { background-image:radial-gradient(120% 90% at 82% -10%, rgba(139,92,246,.08), transparent 55%) !important; }
.appshell.agenda-mode.av-c { background-image:none !important; }
.appshell.agenda-mode .appside { background:linear-gradient(180deg,#0b1524,#0a111e) !important; border-right:1px solid var(--abd) !important; box-shadow:none !important; }
.appshell.agenda-mode.av-c .appside { background:#FBFAF6 !important; border-right:1px solid #ECE5D6 !important; }
.appshell.agenda-mode .appside .nav a, .appshell.agenda-mode .appside .nav a span { color:#E6EDF6 !important; }
.appshell.agenda-mode.av-c .appside .nav a, .appshell.agenda-mode.av-c .appside .nav a span { color:#4A4A50 !important; }
.appshell.agenda-mode .appside .nav a svg { color:currentColor !important; stroke:currentColor !important; }
.appshell.agenda-mode .appside .nav a:hover { background:rgba(255,255,255,.05) !important; }
.appshell.agenda-mode.av-c .appside .nav a:hover { background:rgba(232,145,47,.1) !important; }
.appshell.agenda-mode .appside .nav a.active, .appshell.agenda-mode .appside .nav a.active:hover { background:linear-gradient(135deg,var(--aacc),var(--aacc3)) !important; color:#04121b !important; box-shadow:0 8px 22px color-mix(in srgb, var(--aacc) 35%, transparent) !important; }
.appshell.agenda-mode.av-c .appside .nav a.active { color:#3a2408 !important; }
.appshell.agenda-mode .appside .nav a.active span, .appshell.agenda-mode .appside .nav a.active svg { color:inherit !important; stroke:currentColor !important; }
.appshell.agenda-mode .apptop { background:transparent !important; border-bottom:0 !important; box-shadow:none !important; }
.appshell.agenda-mode .appmaincol .main { background:transparent !important; }
.appshell.agenda-mode .view-title { color:var(--atx) !important; -webkit-text-fill-color:var(--atx) !important; }
.appshell.agenda-mode .nc-pagesub { color:var(--amut) !important; }
.appshell.agenda-mode .nc-presence-btn, .appshell.agenda-mode .alerts-btn { background:rgba(16,27,45,.72) !important; border:1px solid var(--abd) !important; color:var(--atx) !important; }
.appshell.agenda-mode.av-c .nc-presence-btn, .appshell.agenda-mode.av-c .alerts-btn { background:#fff !important; border:1px solid #ECE5D6 !important; color:#2A2A2E !important; }
.appshell.agenda-mode .nc-presence-btn *, .appshell.agenda-mode .alerts-btn * { color:inherit !important; }
.appshell.agenda-mode .alerts-btn svg, .appshell.agenda-mode .nc-presence-btn svg { color:var(--aacc) !important; stroke:var(--aacc) !important; }
.appshell.agenda-mode .cstore { border:1px solid var(--abd) !important; }

/* --- Contenu (.av) --- */
.av .card { background:var(--apanel) !important; border:1px solid var(--abd) !important; color:var(--atx); border-radius:16px; box-shadow:none; }
.av .av-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:2px 0 16px; }
.av .av-tb-left, .av .av-tb-right { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.av .av-tbtn { border:1px solid var(--abd); background:var(--acard); color:var(--atx); border-radius:10px; padding:9px 14px; font-size:13px; font-weight:600; cursor:pointer; }
.av .av-tbtn:hover { border-color:var(--aacc); }
.av .av-navwrap { display:flex; align-items:center; gap:6px; background:var(--acard); border:1px solid var(--abd); border-radius:10px; padding:4px 6px; }
.av .av-nav { width:28px; height:30px; border:0; background:transparent; color:var(--atx); font-size:18px; cursor:pointer; border-radius:7px; }
.av .av-nav:hover { background:var(--ahover); }
.av .av-range { color:var(--atx); font-weight:700; font-size:13px; min-width:150px; text-align:center; }
.av .av-views { display:inline-flex; gap:4px; background:var(--acard); border:1px solid var(--abd); border-radius:11px; padding:4px; }
.av .ag-vtab { border:0; background:transparent; color:var(--amut); font-weight:600; font-size:13px; padding:8px 14px; border-radius:8px; cursor:pointer; transition:all .15s; }
.av .ag-vtab:hover { color:var(--atx); }
.av .ag-vtab.active { background:linear-gradient(135deg,var(--aacc),var(--aacc3)); color:#04121b; }
.av.av-c .ag-vtab.active { color:#3a2408; }
.av .btn.ghost { background:transparent; border:1px solid var(--abd); color:var(--amut); }

/* Sélecteur de teinte */
.av .av-switch { display:inline-flex; gap:4px; background:var(--apanel); border:1px solid var(--abd); border-radius:12px; padding:4px; }
.av .av-sw-opt { display:inline-flex; align-items:center; gap:7px; border:0; background:transparent; color:var(--amut); font-weight:600; font-size:12.5px; padding:7px 12px; border-radius:9px; cursor:pointer; }
.av .av-sw-opt.on { background:var(--acard); color:var(--atx); box-shadow:0 2px 8px rgba(0,0,0,.22); }
.av .av-sw-dot { width:10px; height:10px; border-radius:50%; }
.av .av-sw-dot.a { background:#28D6FF; box-shadow:0 0 8px rgba(40,214,255,.7); }
.av .av-sw-dot.b { background:#8B5CF6; box-shadow:0 0 8px rgba(139,92,246,.7); }
.av .av-sw-dot.c { background:#F5A94C; box-shadow:0 0 8px rgba(245,169,76,.7); }

/* KPIs */
.av .av-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }
.av .av-kpi { position:relative; overflow:hidden; background:var(--acard); border:1px solid var(--abd); border-radius:18px; padding:16px 18px; min-height:96px; box-shadow:0 8px 24px rgba(0,0,0,.22); }
.av.av-c .av-kpi { box-shadow:0 6px 18px rgba(150,130,90,.10); }
.av .av-kpi-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.av .av-kpi-l { color:var(--amut); font-size:12.5px; font-weight:600; }
.av .av-kpi-ic { width:34px; height:34px; border-radius:10px; background:color-mix(in srgb,var(--aacc) 15%, transparent); color:var(--aacc); display:grid; place-items:center; flex:none; }
.av .av-kpi-ic svg { width:18px; height:18px; }
.av .av-kpi-v { font-size:24px; font-weight:800; color:var(--atx); margin-top:8px; }
.av .av-kpi-sub { font-size:12px; color:var(--amut); margin-top:2px; }
.av .av-kpi-chart { position:absolute; right:16px; bottom:12px; width:52px; height:52px; }
.av .av-donut { width:52px; height:52px; }
.av .av-donut-bg { stroke:color-mix(in srgb,var(--amut) 28%, transparent); }
.av .av-donut-fg { stroke:var(--aacc); }

/* Layout principal */
.av .av-main { display:grid; grid-template-columns:1fr 322px; gap:16px; align-items:start; }
.av .av-left { min-width:0; }
.av .av-right { display:flex; flex-direction:column; gap:14px; }

/* Grille SEMAINE */
.av .agw { background:var(--apanel); border:1px solid var(--abd); border-radius:16px; overflow:hidden; }
.av .agw-head { display:grid; grid-template-columns:56px repeat(7,1fr); border-bottom:1px solid var(--abd); }
.av .agw-dh { padding:9px 4px 8px; text-align:center; border-left:1px solid var(--agrid); }
.av .agw-dh-n { display:block; font-size:11px; letter-spacing:.5px; color:var(--amut); font-weight:700; }
.av .agw-dh-d { display:inline-grid; place-items:center; width:26px; height:26px; margin-top:3px; color:var(--atx); font-weight:700; font-size:13.5px; border-radius:50%; }
.av .agw-dh-d.today { background:var(--aacc); color:#04121b; }
.av.av-c .agw-dh-d.today { color:#3a2408; }
.av .agw-body { display:grid; grid-template-columns:56px 1fr; }
.av .agw-hour { font-size:11px; color:var(--amut); text-align:right; padding:0 8px; border-top:1px solid var(--agrid); transform:translateY(-7px); }
.av .agw-cols { display:grid; grid-template-columns:repeat(7,1fr); }
.av .agw-col { position:relative; border-left:1px solid var(--agrid); }
.av .agw-col.weekend { background:color-mix(in srgb,var(--amut) 6%, transparent); }
.av .agw-col.today { background:color-mix(in srgb,var(--aacc) 6%, transparent); }
.av .agw-slot { border-top:1px solid var(--agrid); }
.av .agw-ev { position:absolute; left:4px; right:4px; border-radius:8px; padding:5px 8px; overflow:hidden; cursor:pointer; background:color-mix(in srgb,var(--ec) 24%, var(--acard)); border-left:3px solid var(--ec); box-shadow:0 2px 8px rgba(0,0,0,.22); transition:transform .12s, filter .12s; z-index:1; }
.av .agw-ev:hover { transform:translateY(-1px); filter:brightness(1.08); z-index:3; }
.av .agw-ev-t { display:block; font-weight:700; font-size:12px; color:var(--atx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.av .agw-ev-h { display:block; font-size:10.5px; color:var(--amut); }
.av .agw-ev-loc { display:block; font-size:10px; color:var(--amut); }
.av.av-c .agw-ev { background:color-mix(in srgb,var(--ec) 15%, #fff); }
.av.av-c .agw-ev-t { color:#2A2A2E; }
.av .agw-allday { position:absolute; top:2px; left:4px; right:4px; z-index:2; display:flex; flex-direction:column; gap:2px; }
.av .agw-ad { font-size:10px; padding:2px 6px; border-radius:5px; background:color-mix(in srgb,var(--ec) 26%, var(--acard)); border-left:2px solid var(--ec); color:var(--atx); cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* couleurs d'événement */
.av .ev-c0 { --ec:#3B82F6; } .av .ev-c1 { --ec:#22D3EE; } .av .ev-c2 { --ec:#8B5CF6; } .av .ev-c3 { --ec:#34D399; } .av .ev-c4 { --ec:#F59E0B; } .av .ev-c5 { --ec:#EC4899; }

/* Mini-mois */
.av .av-mini-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; color:var(--atx); font-weight:700; font-size:13.5px; }
.av .av-mini-nav button { width:24px; height:24px; border:0; background:transparent; color:var(--amut); cursor:pointer; font-size:15px; border-radius:6px; }
.av .av-mini-nav button:hover { background:var(--ahover); }
.av .av-mini-dow { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px; }
.av .av-mini-dow span { text-align:center; font-size:10.5px; color:var(--amut); }
.av .av-mini-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.av .av-mini-c { position:relative; aspect-ratio:1; border:0; background:transparent; color:var(--atx); font-size:12px; border-radius:8px; cursor:pointer; display:grid; place-items:center; }
.av .av-mini-c.out { color:color-mix(in srgb,var(--amut) 55%, transparent); }
.av .av-mini-c.inwk { background:color-mix(in srgb,var(--aacc) 12%, transparent); }
.av .av-mini-c.today { background:var(--aacc); color:#04121b; font-weight:800; }
.av.av-c .av-mini-c.today { color:#3a2408; }
.av .av-mini-c:hover { background:var(--ahover); }
.av .av-mini-dot { position:absolute; bottom:3px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:var(--aacc); }
.av .av-mini-c.today .av-mini-dot { background:#04121b; }

/* Panneau "à venir" + nouvel événement */
.av .av-panel { background:var(--acard); border:1px solid var(--abd); border-radius:16px; padding:14px; }
.av .av-panel-h h4 { margin:0 0 8px; color:var(--atx); font-size:14px; }
.av .av-up-row { display:flex; gap:10px; padding:9px 2px; border-top:1px solid var(--abd); cursor:pointer; }
.av .av-up-row:first-child { border-top:0; }
.av .av-up-dot { width:9px; height:9px; border-radius:50%; margin-top:5px; flex:none; }
.av .av-up-main { min-width:0; }
.av .av-up-time { font-size:11px; color:var(--amut); }
.av .av-up-t { font-weight:700; color:var(--atx); font-size:13px; }
.av .av-up-s { font-size:11.5px; color:var(--amut); }
.av .av-empty { color:var(--amut); font-size:13px; padding:8px 2px; }
.av .av-new { width:100%; border:0; border-radius:12px; padding:12px; font-weight:700; font-size:14px; cursor:pointer; background:linear-gradient(135deg,var(--aacc),var(--aacc3)); color:#04121b; }
.av.av-c .av-new { color:#3a2408; }
.av .av-new:hover { filter:brightness(1.05); }

/* Vue MOIS (agc) re-teintée */
.av .agc-title { color:var(--atx); }
.av .agc-nav { color:var(--atx); background:transparent; border:1px solid var(--abd); }
.av .agc-dow { color:var(--amut); }
.av .agc-cell { background:var(--apanel); border-color:var(--agrid); color:var(--atx); }
.av .agc-cell.out { opacity:.5; }
.av .agc-num { color:var(--atx); }

/* Barre Leia re-teintée */
.av .ag-leia-bar { margin-top:16px; background:var(--acard); border:1px solid var(--abd); color:var(--atx); border-radius:16px; }
.av .ag-leia-input { background:var(--apanel); border:1px solid var(--abd); color:var(--atx); }
.av .ag-leia-btn { background:color-mix(in srgb,var(--aacc) 14%, transparent); color:var(--aacc); border:1px solid var(--abd); }

@media (max-width:1080px){ .av .av-main{ grid-template-columns:1fr; } .av .av-kpis{ grid-template-columns:repeat(2,1fr); } }

/* ============================================================
   THÈME DE COULEUR GLOBAL — Cuivre / Cyan / Indigo / Sable
   Un seul choix (classe .theme-* sur .appshell) piloté par le sélecteur
   .jt-switch présent sur chaque page. La coque (.appshell.jt) et le contenu
   de chaque page consomment les variables canoniques --jt-*.
   ============================================================ */
/* --- Variables canoniques par teinte --- */
/* ⚙️ THEME ENGINE — source unique de vérité. Les jetons vivent sur le BODY (portée
   globale de session) : appshell, popups, modales, drawers, tooltips… en héritent tous. */
body.theme-cuivre, .appshell.theme-cuivre { --jt-bg:#08111F; --jt-bg2:#0a1526; --jt-card:#121B2D; --jt-card2:#162033; --jt-panel:#0E1728; --jt-hover:#182338; --jt-border:#273348; --jt-border-accent:rgba(214,164,79,.35); --jt-text:#F7F4EE; --jt-muted:#A9B1C2; --jt-accent:#D6A44F; --jt-accent2:#F0B94D; --jt-accent3:#8A5A18; --jt-ok:#31C978; --jt-danger:#FF5C5C; --jt-grid:rgba(255,255,255,.06); --jt-on:#1a1206; --jt-side:linear-gradient(180deg,#0b1526,#081120); --jt-sidetx:#E8ECF5; }
body.theme-cyan, .appshell.theme-cyan { --jt-bg:#07111F; --jt-bg2:#0a1626; --jt-card:#101B2D; --jt-card2:#15233A; --jt-panel:#0C1626; --jt-hover:#15233A; --jt-border:rgba(255,255,255,.08); --jt-border-accent:rgba(40,214,255,.35); --jt-text:#F7F9FC; --jt-muted:#9DB0C8; --jt-accent:#28D6FF; --jt-accent2:#5CEBFF; --jt-accent3:#0099CC; --jt-ok:#34D399; --jt-danger:#FF5A5A; --jt-grid:rgba(255,255,255,.06); --jt-on:#04121b; --jt-side:linear-gradient(180deg,#0b1524,#0a111e); --jt-sidetx:#E6EDF6; }
body.theme-indigo, .appshell.theme-indigo { --jt-bg:#08111F; --jt-bg2:#0d1730; --jt-card:#111C30; --jt-card2:#1A2540; --jt-panel:#0D1730; --jt-hover:#1A2540; --jt-border:rgba(255,255,255,.09); --jt-border-accent:rgba(139,92,246,.4); --jt-text:#F6F8FB; --jt-muted:#AEBAD2; --jt-accent:#8B5CF6; --jt-accent2:#A78BFA; --jt-accent3:#6C63FF; --jt-ok:#36D399; --jt-danger:#FF6666; --jt-grid:rgba(255,255,255,.06); --jt-on:#0f0a26; --jt-side:linear-gradient(180deg,#141033,#0c0a22); --jt-sidetx:#E7E3FB; }
body.theme-sable, .appshell.theme-sable { --jt-bg:#F4F1EA; --jt-bg2:#EFE9DD; --jt-card:#FFFFFF; --jt-card2:#FBF3E7; --jt-panel:#FFFFFF; --jt-hover:#FBF3E7; --jt-border:#EAE2D2; --jt-border-accent:rgba(232,145,47,.4); --jt-text:#2A2A2E; --jt-muted:#8C8577; --jt-accent:#E8912F; --jt-accent2:#F5A94C; --jt-accent3:#C9741A; --jt-ok:#2FA968; --jt-danger:#E0574F; --jt-grid:#EFE9DB; --jt-on:#3a2408; --jt-side:#FBFAF6; --jt-sidetx:#4A4A50; }
/* GRAPHITE — sobre & professionnel (inspiration Navilio) : contenu clair + sidebar graphite foncée + bleu. */
body.theme-graphite, .appshell.theme-graphite { --jt-bg:#F5F7FB; --jt-bg2:#EEF2F7; --jt-card:#FFFFFF; --jt-card2:#F8FAFD; --jt-panel:#FFFFFF; --jt-hover:#F8FAFD; --jt-border:#D7DEE8; --jt-border-accent:rgba(61,106,242,.32); --jt-text:#202A36; --jt-muted:#66758A; --jt-accent:#3D6AF2; --jt-accent2:#4D78F7; --jt-accent3:#2C55D8; --jt-ok:#33C27F; --jt-danger:#E25757; --jt-grid:#E6ECF3; --jt-on:#FFFFFF; --jt-side:#182230; --jt-sidetx:#C7D2E0; }
/* NUIT PROFONDE (noir bleuté, accent bleu-violet) — importé West Coast */
body.theme-midnight, .appshell.theme-midnight { --jt-bg:#080b16; --jt-bg2:#16203c; --jt-card:#141a30; --jt-card2:#10162a; --jt-panel:#171d36; --jt-hover:#1d2542; --jt-border:#242c48; --jt-border-accent:rgba(91,75,245,.42); --jt-text:#e6e9f2; --jt-muted:#9aa3bd; --jt-accent:#5b4bf5; --jt-accent2:#a99cff; --jt-accent3:#7b3ff5; --jt-ok:#2ecc71; --jt-danger:#f15a5a; --jt-grid:rgba(255,255,255,.05); --jt-on:#ffffff; --jt-side:#090d1c; --jt-sidetx:#c2cbe4; }
/* SOMBRE (DISCORD) — anthracite, accent blurple — importé West Coast */
body.theme-discord, .appshell.theme-discord { --jt-bg:#1e1f22; --jt-bg2:#232428; --jt-card:#2b2d31; --jt-card2:#1e1f22; --jt-panel:#2b2d31; --jt-hover:#303237; --jt-border:#3a3c42; --jt-border-accent:rgba(88,101,242,.45); --jt-text:#dbdee1; --jt-muted:#b5bac1; --jt-accent:#5865f2; --jt-accent2:#8b93f8; --jt-accent3:#4752c4; --jt-ok:#3ba55d; --jt-danger:#f15a5a; --jt-grid:rgba(255,255,255,.05); --jt-on:#ffffff; --jt-side:#111214; --jt-sidetx:#c7ccd2; }
/* Thème « Classique » (clair, bleu marine + turquoise) — charte CHARTE-COULEUR-Classique.md */
body.theme-classique, .appshell.theme-classique { --jt-bg:#eef2f8; --jt-bg2:#e6ecf5; --jt-card:#ffffff; --jt-card2:#f7faff; --jt-panel:#ffffff; --jt-hover:#f2f6fc; --jt-border:#e7edf5; --jt-border-accent:rgba(20,164,180,.34); --jt-text:#0e2a52; --jt-muted:#6b7a90; --jt-accent:#14a4b4; --jt-accent2:#1f7bb8; --jt-accent3:#0e8a99; --jt-ok:#2e9e5b; --jt-danger:#e0574f; --jt-grid:#e6ecf3; --jt-on:#ffffff; --jt-side:#0e2a52; --jt-sidetx:#cdd8ea; }
/* PONT --nc-* → --jt-* SCOPÉ AU CONTENU (Yann 20/07 : pages type Accueil qui restaient claires).
   Les surfaces/textes/bordures de la colonne principale suivent le thème SANS toucher la sidebar
   (thémée à part via --jt-side) NI l'accent de marque (teal --nc-primary/--nc-teal conservés).
   En classique les valeurs --jt-* correspondent aux --nc-* → aucun changement visible. */
.appshell[class*="theme-"] .appmaincol {
  --nc-surface: var(--jt-card); --nc-card: var(--jt-card); --nc-bg: var(--jt-bg);
  --nc-border: var(--jt-border); --nc-text: var(--jt-text); --nc-ink: var(--jt-text);
  --nc-navy: var(--jt-text); --nc-muted: var(--jt-muted);
}
/* « Encre & Ivoire » — thème CLAIR : encre (charbon #4A4A4A) + ivoire (#FFFFE3) + bleu grisé (#6D8196) + gris froid (#CBCBCB). */
body.theme-encre, .appshell.theme-encre { --jt-bg:#ECEEF0; --jt-bg2:#E4E7EA; --jt-card:#FFFFFF; --jt-card2:#FBFAF0; --jt-panel:#FFFFFF; --jt-hover:#F4F4EC; --jt-border:#E3E4E1; --jt-border-accent:rgba(109,129,150,.38); --jt-text:#43464B; --jt-muted:#8A8E94; --jt-accent:#6D8196; --jt-accent2:#849AB0; --jt-accent3:#566A7D; --jt-ok:#4F9E77; --jt-danger:#C0685C; --jt-grid:#E5E6E1; --jt-on:#FFFFFF; --jt-side:#4A4A4A; --jt-sidetx:#F2F1DD; }
/* SAUGE & TERRACOTTA — Joom'Budget (design validé Yann). Contenu clair chaleureux + sidebar sauge foncée. */
body.theme-sauge, .appshell.theme-sauge { --jt-bg:#F4F3ED; --jt-bg2:#EEECE2; --jt-card:#FFFEFB; --jt-card2:#EFF2EA; --jt-panel:#FFFEFB; --jt-hover:#E8F0E9; --jt-border:#E3E5DF; --jt-border-accent:rgba(121,168,137,.35); --jt-text:#263D37; --jt-muted:#6B7671; --jt-accent:#6E9A7E; --jt-accent2:#79A889; --jt-accent3:#577E65; --jt-ok:#4E7A5E; --jt-danger:#C05656; --jt-grid:#E7E9E1; --jt-on:#ffffff; --jt-side:linear-gradient(180deg,#2F4B45,#243C37); --jt-sidetx:#E8ECF5; }
/* ARDOISE & OR — variante 2. */
body.theme-ardoise, .appshell.theme-ardoise { --jt-bg:#EEF2F5; --jt-bg2:#E6EBEF; --jt-card:#FFFFFF; --jt-card2:#F4F7FA; --jt-panel:#FFFFFF; --jt-hover:#E3EDF1; --jt-border:#DEE5EA; --jt-border-accent:rgba(79,127,145,.35); --jt-text:#233546; --jt-muted:#66727E; --jt-accent:#4F7F91; --jt-accent2:#5E93A6; --jt-accent3:#375E6D; --jt-ok:#3E7D63; --jt-danger:#C05B54; --jt-grid:#E4EAEF; --jt-on:#ffffff; --jt-side:linear-gradient(180deg,#273B4F,#1F3041); --jt-sidetx:#E6EDF4; }
/* PRUNE & ABRICOT — variante 3. */
body.theme-prune, .appshell.theme-prune { --jt-bg:#F5F1F6; --jt-bg2:#EEE8F0; --jt-card:#FFFFFF; --jt-card2:#F7F2F8; --jt-panel:#FFFFFF; --jt-hover:#F0E6F3; --jt-border:#E8E0EA; --jt-border-accent:rgba(155,107,168,.35); --jt-text:#382B3D; --jt-muted:#77697C; --jt-accent:#9B6BA8; --jt-accent2:#AC80B8; --jt-accent3:#744E81; --jt-ok:#4E7A5E; --jt-danger:#C0566C; --jt-grid:#EBE3ED; --jt-on:#ffffff; --jt-side:linear-gradient(180deg,#3E2948,#32213A); --jt-sidetx:#EFE7F3; }
/* Alias « design tokens » documentés (API pour tout futur composant : var(--color-*)). */
body.jt-theme, .appshell.jt { --color-primary:var(--jt-accent); --color-primary-hover:var(--jt-accent2); --color-secondary:var(--jt-accent3); --color-accent:var(--jt-accent2); --color-surface:var(--jt-panel); --color-surface-alt:var(--jt-card2); --color-surface-hover:var(--jt-hover); --color-background:var(--jt-bg); --color-card:var(--jt-card); --color-card-hover:var(--jt-hover); --color-sidebar:var(--jt-side); --color-sidebar-text:var(--jt-sidetx); --color-border:var(--jt-border); --color-border-light:color-mix(in srgb, var(--jt-border) 55%, transparent); --color-border-accent:var(--jt-border-accent); --color-text:var(--jt-text); --color-text-secondary:var(--jt-muted); --color-on-accent:var(--jt-on); --color-success:var(--jt-ok); --color-warning:var(--jt-accent2); --color-error:var(--jt-danger); --color-danger:var(--jt-danger); --color-shadow:rgba(0,0,0,.3); --color-chart-1:var(--jt-accent); --color-chart-2:var(--jt-accent2); --color-chart-3:var(--jt-ok); --color-chart-4:var(--jt-accent3); --color-chart-5:#8B6DF5; }

/* --- Coque unifiée (fond, sidebar, top-bar, titre, pastilles) --- */
.appshell.jt { background: var(--jt-bg) !important; background-image: radial-gradient(120% 90% at 82% -8%, color-mix(in srgb, var(--jt-accent) 8%, transparent), transparent 55%) !important; }
.appshell.jt.theme-sable { background-image:none !important; }
.appshell.jt .appside { background: var(--jt-side) !important; border-right:1px solid var(--jt-border) !important; box-shadow:none !important; }
.appshell.jt .appside .nav a, .appshell.jt .appside .nav a span, .appshell.jt .appside .nav a .app-link-l { color: var(--jt-sidetx) !important; }
.appshell.jt .appside .nav a svg { color: currentColor !important; stroke: currentColor !important; }
.appshell.jt .appside .nav a:hover { background: color-mix(in srgb, var(--jt-accent) 12%, transparent) !important; }
.appshell.jt .appside .nav a:hover span, .appshell.jt .appside .nav a:hover .app-link-l { color: color-mix(in srgb, var(--jt-sidetx) 55%, #fff) !important; }
.appshell.jt .appside .nav a.active, .appshell.jt .appside .nav a.active:hover { background: linear-gradient(135deg, var(--jt-accent), var(--jt-accent3)) !important; color: var(--jt-on) !important; box-shadow:0 8px 22px color-mix(in srgb, var(--jt-accent) 32%, transparent) !important; }
.appshell.jt .appside .nav a.active span, .appshell.jt .appside .nav a.active .app-link-l, .appshell.jt .appside .nav a.active svg { color: var(--jt-on) !important; stroke: currentColor !important; }
.appshell.jt .apptop { background: transparent !important; border-bottom:0 !important; box-shadow:none !important; }
.appshell.jt .appmaincol .main { background: transparent !important; }
.appshell.jt .view-title, .appshell.jt .nc-pagehead .view-title { color: var(--jt-text) !important; -webkit-text-fill-color: var(--jt-text) !important; }
.appshell.jt .nc-pagesub, .appshell.jt .nc-pagehead p { color: var(--jt-muted) !important; }
.appshell.jt .nc-presence-btn, .appshell.jt .alerts-btn { background: color-mix(in srgb, var(--jt-card) 82%, transparent) !important; border:1px solid var(--jt-border) !important; color: var(--jt-text) !important; box-shadow:0 6px 18px rgba(0,0,0,.22) !important; }
.appshell.jt .nc-presence-btn *, .appshell.jt .alerts-btn * { color: inherit !important; }
.appshell.jt .alerts-btn svg, .appshell.jt .nc-presence-btn svg { color: var(--jt-accent) !important; stroke: var(--jt-accent) !important; }
.appshell.jt .cstore { border:1px solid var(--jt-border) !important; }
/* Sidebar en teinte claire (sable) : textes/marque lisibles */
.appshell.jt.theme-sable .appside-name, .appshell.jt.theme-sable .appside-brand { color:#2A2A2E !important; }
.appshell.jt.theme-sable .appside-version, .appshell.jt.theme-sable .appside-version-in, .appshell.jt.theme-sable .appside-ref { color:#8C8577 !important; }
.appshell.jt.theme-sable .appside .leia-card { background:#FBF3E7 !important; border-color:#EEE1CC !important; color:#4A4A50 !important; }

/* --- Sélecteur .jt-switch --- */
.jt-switch { display:inline-flex; gap:3px; padding:4px; border-radius:12px; background: color-mix(in srgb, var(--jt-card,#101B2D) 70%, transparent); border:1px solid var(--jt-border,rgba(255,255,255,.08)); flex-wrap:nowrap; }
.jt-opt { display:inline-flex; align-items:center; gap:6px; border:0; background:transparent; color:var(--jt-muted,#9DB0C8); font-size:12px; font-weight:600; padding:6px 10px; border-radius:8px; cursor:pointer; transition:background .15s, color .15s; }
.jt-opt:hover { color:var(--jt-text,#fff); }
.jt-opt.on { background: var(--jt-card,#101B2D); color: var(--jt-text,#F7F9FC); box-shadow:0 2px 8px rgba(0,0,0,.25); }
.jt-dot { width:11px; height:11px; border-radius:50%; flex:none; }
.jt-dot.jt-classique { background:#14a4b4; box-shadow:0 0 7px rgba(20,164,180,.6); }
.jt-dot.jt-cuivre { background:#D6A44F; box-shadow:0 0 7px rgba(214,164,79,.7); }
.jt-dot.jt-cyan { background:#28D6FF; box-shadow:0 0 7px rgba(40,214,255,.7); }
.jt-dot.jt-indigo { background:#8B5CF6; box-shadow:0 0 7px rgba(139,92,246,.7); }
.jt-dot.jt-sable { background:#E8912F; box-shadow:0 0 7px rgba(232,145,47,.7); }
.jt-dot.jt-graphite { background:#3D6AF2; box-shadow:0 0 7px rgba(61,106,242,.6); }
.jt-dot.jt-midnight { background:linear-gradient(135deg,#5b4bf5,#7b3ff5); box-shadow:0 0 7px rgba(123,63,245,.7); }
.jt-dot.jt-discord { background:#5865f2; box-shadow:0 0 7px rgba(88,101,242,.7); }
.jt-dot.jt-encre { background:#6D8196; box-shadow:0 0 7px rgba(109,129,150,.55); }
.jt-dot.jt-sauge { background:#79A889; box-shadow:0 0 7px rgba(121,168,137,.65); }
.jt-dot.jt-ardoise { background:#4F7F91; box-shadow:0 0 7px rgba(79,127,145,.6); }
.jt-dot.jt-prune { background:#9B6BA8; box-shadow:0 0 7px rgba(155,107,168,.6); }
/* GRAPHITE : item de menu actif en dégradé bleu → cyan (fidèle à l'esprit Navilio). */
.appshell.jt.theme-graphite .appside .nav a.active, .appshell.jt.theme-graphite .appside .nav a.active:hover { background: linear-gradient(135deg, #3D6AF2, #4CC8F1) !important; color: #fff !important; }
.appshell.jt.theme-graphite .appside .nav a.active span, .appshell.jt.theme-graphite .appside .nav a.active svg { color: #fff !important; }
/* NUIT PROFONDE : fond en dégradé radial bleuté (fidèle West Coast) + menu actif bleu→violet. */
.appshell.jt.theme-midnight { background: #080b16 !important; background-image: radial-gradient(120% 80% at 50% -12%, #16203c 0%, #080b16 55%) !important; }
.appshell.jt.theme-midnight .appside .nav a.active, .appshell.jt.theme-midnight .appside .nav a.active:hover { background: linear-gradient(135deg, #3b5bff, #7b3ff5) !important; color:#fff !important; box-shadow:0 6px 18px rgba(91,75,245,.45) !important; }
.appshell.jt.theme-midnight .appside .nav a.active span, .appshell.jt.theme-midnight .appside .nav a.active svg { color:#fff !important; }
/* DISCORD : menu actif blurple plein. */
.appshell.jt.theme-discord .appside .nav a.active, .appshell.jt.theme-discord .appside .nav a.active:hover { background:#5865f2 !important; color:#fff !important; box-shadow:0 6px 16px rgba(88,101,242,.4) !important; }
.appshell.jt.theme-discord .appside .nav a.active span, .appshell.jt.theme-discord .appside .nav a.active svg { color:#fff !important; }
/* ENCRE & IVOIRE : barre charbon, texte ivoire, menu actif bleu grisé. */
.appshell.jt.theme-encre { background:#ECEEF0 !important; background-image:none !important; }
.appshell.jt.theme-encre .appside-name, .appshell.jt.theme-encre .appside-brand { color:#F2F1DD !important; }
.appshell.jt.theme-encre .appside-version, .appshell.jt.theme-encre .appside-version-in, .appshell.jt.theme-encre .appside-ref { color:#B9BAAF !important; }
.appshell.jt.theme-encre .appside .nav a.active, .appshell.jt.theme-encre .appside .nav a.active:hover { background:#6D8196 !important; color:#fff !important; box-shadow:0 6px 16px rgba(109,129,150,.4) !important; }
.appshell.jt.theme-encre .appside .nav a.active span, .appshell.jt.theme-encre .appside .nav a.active svg { color:#fff !important; }
.appshell.jt.theme-sauge .appside .nav a.active, .appshell.jt.theme-sauge .appside .nav a.active:hover { background:#79A889 !important; color:#fff !important; box-shadow:0 6px 16px rgba(121,168,137,.4) !important; }
.appshell.jt.theme-sauge .appside .nav a.active span, .appshell.jt.theme-sauge .appside .nav a.active svg { color:#fff !important; }
.appshell.jt.theme-ardoise .appside .nav a.active, .appshell.jt.theme-ardoise .appside .nav a.active:hover { background:#4F7F91 !important; color:#fff !important; box-shadow:0 6px 16px rgba(79,127,145,.4) !important; }
.appshell.jt.theme-ardoise .appside .nav a.active span, .appshell.jt.theme-ardoise .appside .nav a.active svg { color:#fff !important; }
.appshell.jt.theme-prune .appside .nav a.active, .appshell.jt.theme-prune .appside .nav a.active:hover { background:#9B6BA8 !important; color:#fff !important; box-shadow:0 6px 16px rgba(155,107,168,.4) !important; }
.appshell.jt.theme-prune .appside .nav a.active span, .appshell.jt.theme-prune .appside .nav a.active svg { color:#fff !important; }
/* Pastille « Modules » (switcher à la volée) dans le bandeau du haut — remplace le JoomStore. */
.mod-switch { position:relative; display:inline-flex; }
.mod-switch-pill { display:inline-flex; align-items:center; gap:8px; background:var(--jt-accent,#0e7c86); color:var(--jt-on,#fff); border:none; border-radius:999px; padding:8px 15px; font-weight:700; font-size:13.5px; cursor:pointer; font-family:inherit; line-height:1; }
.mod-switch-pill svg { stroke:currentColor; }
.mod-switch-pill:hover { filter:brightness(1.07); }
.mod-switch-pop { position:absolute; top:calc(100% + 8px); right:0; min-width:224px; background:var(--jt-card,#fff); border:1px solid var(--jt-border,#e6ebf2); border-radius:14px; box-shadow:0 14px 40px rgba(0,0,0,.28); padding:6px; z-index:200; }
.mod-switch-msg { padding:12px 14px; color:var(--jt-muted,#8a97a8); font-size:13px; }
.mod-switch-item { display:flex; align-items:center; gap:10px; width:100%; background:none; border:none; border-radius:10px; padding:10px 12px; cursor:pointer; font-family:inherit; font-size:14px; font-weight:600; color:var(--jt-text,#16223e); text-align:left; }
.mod-switch-item:hover { background:var(--jt-hover,#f2f6f9); }
.mod-switch-dot { width:10px; height:10px; border-radius:50%; flex:0 0 auto; }
.mod-switch-nm { min-width:0; }
/* Aperçus de thème (gestionnaire dans Fonctionnalités) */
.ff .ff-mod-ic.ff-sw-classique { background:linear-gradient(135deg,#14a4b4,#1f7bb8) !important; }
.ff .ff-mod-ic.ff-sw-cuivre { background:linear-gradient(135deg,#D6A44F,#8A5A18) !important; }
.ff .ff-mod-ic.ff-sw-cyan { background:linear-gradient(135deg,#28D6FF,#0099CC) !important; }
.ff .ff-mod-ic.ff-sw-indigo { background:linear-gradient(135deg,#8B5CF6,#6C63FF) !important; }
.ff .ff-mod-ic.ff-sw-sable { background:linear-gradient(135deg,#F5A94C,#C9741A) !important; }
.ff .ff-mod-ic.ff-sw-graphite { background:linear-gradient(135deg,#3D6AF2,#4CC8F1) !important; }
.ff .ff-mod-ic.ff-sw-midnight { background:linear-gradient(135deg,#3b5bff,#7b3ff5) !important; }
.ff .ff-mod-ic.ff-sw-discord { background:linear-gradient(135deg,#2b2d31,#5865f2) !important; }
@media (max-width:1100px){ .jt-opt .jt-lbl{ display:none; } .jt-opt{ padding:7px; } }

/* --- Mapping du contenu de chaque page vers les vars canoniques --- */
.appshell.compta-mode { --c-accent:var(--jt-accent); --c-accent-strong:var(--jt-accent2); --c-border:var(--jt-border); --c-border-gold:var(--jt-border-accent); --c-text:var(--jt-text); --c-muted:var(--jt-muted); --c-success:var(--jt-ok); --c-danger:var(--jt-danger); --bg-main:var(--jt-bg); --bg-card:var(--jt-card); --bg-card-soft:var(--jt-card2); }
.cx-clients { --cxpanel:var(--jt-panel); --cxcard:var(--jt-card); --cxcard2:var(--jt-card2); --cxbd:var(--jt-border); --cxgold:var(--jt-border-accent); --cxtx:var(--jt-text); --cxmut:var(--jt-muted); --cxacc:var(--jt-accent); --cxacc2:var(--jt-accent2); --cxok:var(--jt-ok); }
.vx { --vbg:var(--jt-bg); --vcard:var(--jt-card); --vhover:var(--jt-hover); --vpanel:var(--jt-panel); --vborder:var(--jt-border); --vtx:var(--jt-text); --vmut:var(--jt-muted); --vacc:var(--jt-accent); --vacc2:var(--jt-accent2); --vacc3:var(--jt-accent3); --vok:var(--jt-ok); --vdanger:var(--jt-danger); }
.av { --abg:var(--jt-bg); --acard:var(--jt-card); --apanel:var(--jt-panel); --ahover:var(--jt-hover); --abd:var(--jt-border); --atx:var(--jt-text); --amut:var(--jt-muted); --aacc:var(--jt-accent); --aacc2:var(--jt-accent2); --aacc3:var(--jt-accent3); --agrid:var(--jt-grid); }
.appshell.jt:not(.theme-sable) .av { --nc-navy:var(--jt-text); }

/* --- Correctifs de littéraux (couleurs codées en dur → thème) --- */
/* Comptabilité */
.appshell.compta-mode.jt { background: linear-gradient(180deg, var(--jt-bg), var(--jt-bg2)) !important; }
.appshell.compta-mode.jt .cp-hero { background: linear-gradient(120deg, var(--jt-card), var(--jt-card2)) !important; border:1px solid var(--jt-border-accent) !important; box-shadow:0 0 40px color-mix(in srgb, var(--jt-accent) 7%, transparent), 0 16px 44px rgba(0,0,0,.28) !important; }
.appshell.compta-mode.jt .cp-kpi, .appshell.compta-mode.jt .cp-qt, .appshell.compta-mode.jt .cp-w, .appshell.compta-mode.jt .main .card, .appshell.compta-mode.jt .nc-tile { background: var(--jt-card) !important; border:1px solid color-mix(in srgb, var(--jt-accent) 20%, transparent) !important; }
.appshell.compta-mode.jt .cp-leia-btn, .appshell.compta-mode.jt .cp-hero .cp-btn.primary { background: linear-gradient(180deg, var(--jt-accent2), var(--jt-accent3)) !important; color: var(--jt-on) !important; }
.appshell.compta-mode.jt.theme-sable .cp-leia { background:#FFFFFF !important; }
/* Clients */
.cx-clients .cx-kpi { background: var(--jt-card) !important; border-color: color-mix(in srgb, var(--jt-accent) 16%, transparent) !important; }
.cx-clients .cx-panel { background: var(--jt-panel) !important; }
.cx-clients .cx-card { background: var(--jt-card) !important; border-color: color-mix(in srgb, var(--jt-accent) 14%, transparent) !important; }
.cx-clients .cx-tab.active { background: linear-gradient(135deg, var(--jt-accent), var(--jt-accent3)) !important; color: var(--jt-on) !important; }
.cx-clients .cx-relance { background: linear-gradient(180deg, var(--jt-accent2), var(--jt-accent3)) !important; color: var(--jt-on) !important; }
.cx-clients .cx-bar-fill { background: linear-gradient(90deg, var(--jt-accent3), var(--jt-accent2)) !important; }
.cx-clients .cx-mbar { background: linear-gradient(180deg, var(--jt-accent2), var(--jt-accent3)) !important; }
.cx-clients .cx-spk-a { fill: var(--jt-accent2); opacity:.26; stroke:none; }
.cx-clients .cx-spk-l { stroke: var(--jt-accent); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
/* Agenda : texte sur accent + événements en teinte claire */
.av .agw-dh-d.today, .av .av-mini-c.today, .av .ag-vtab.active, .av .av-new { color: var(--jt-on) !important; }
.av .av-mini-c.today .av-mini-dot { background: var(--jt-on) !important; }
.appshell.theme-sable .av .agw-ev { background: color-mix(in srgb, var(--ec) 15%, #fff) !important; }
.appshell.theme-sable .av .agw-ev-t { color:#2A2A2E !important; }
.appshell.theme-sable .av .agw-ev-h, .appshell.theme-sable .av .agw-ev-loc { color:#8C8577 !important; }

/* ============================================================
   PAGE FONCTIONNALITÉS — cartes premium + grille modules (thème global)
   Consomme directement les variables canoniques --jt-*.
   ============================================================ */
.ff { color: var(--jt-text); }
.ff .ff-topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.ff .ff-topbar .nc-pagehead { margin:0; }
.ff .view-title { color: var(--jt-text) !important; -webkit-text-fill-color: var(--jt-text) !important; }
.ff .nc-pagesub { color: var(--jt-muted) !important; }

/* Cartes d'options (rangées) */
.ff .ff-card { display:flex; align-items:center; gap:16px; background: var(--jt-card); border:1px solid var(--jt-border); border-radius:18px; padding:18px 20px; margin-bottom:14px; box-shadow:0 6px 22px rgba(0,0,0,.20); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.ff .ff-card:hover { transform: translateY(-2px); border-color: var(--jt-border-accent); box-shadow:0 12px 34px rgba(0,0,0,.28), 0 0 24px color-mix(in srgb, var(--jt-accent) 12%, transparent); }
.ff .ff-card-ic { width:46px; height:46px; border-radius:13px; flex:none; display:grid; place-items:center; background: color-mix(in srgb, var(--jt-accent) 14%, transparent); color: var(--jt-accent); }
.ff .ff-card-ic svg { width:22px; height:22px; }
.ff .ff-card-body { flex:1; min-width:0; }
.ff .ff-card-t { font-weight:700; color: var(--jt-text); font-size:15px; }
.ff .ff-card-sub { font-weight:600; color: var(--jt-text); font-size:13.5px; margin-top:2px; }
.ff .ff-card-d { color: var(--jt-muted); font-size:13px; margin-top:3px; line-height:1.4; }

/* Boutons */
.ff .ff-btn { display:inline-flex; align-items:center; gap:8px; border:0; border-radius:12px; padding:11px 18px; font-weight:700; font-size:13.5px; cursor:pointer; background: linear-gradient(135deg, var(--jt-accent), var(--jt-accent3)); color: var(--jt-on); white-space:nowrap; transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; box-shadow:0 4px 14px color-mix(in srgb, var(--jt-accent) 24%, transparent); }
.ff .ff-btn:hover { transform: scale(1.03); filter: brightness(1.04); }
.ff .ff-btn-ic { display:grid; place-items:center; }
.ff .ff-btn-ic svg { width:15px; height:15px; }
.ff .ff-btn.ghost { background: transparent; color: var(--jt-accent); border:1px solid var(--jt-border-accent); box-shadow:none; }
.ff .ff-btn.ghost:hover { background: color-mix(in srgb, var(--jt-accent) 10%, transparent); }

/* Section modules */
.ff .ff-h { font-size:16px; font-weight:800; color: var(--jt-text); margin:26px 0 4px; }
.ff .ff-sub { color: var(--jt-muted); font-size:13px; margin-bottom:14px; }
.ff .ff-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.ff .ff-mod { display:flex; align-items:flex-start; gap:12px; background: var(--jt-card); border:1px solid var(--jt-border); border-radius:16px; padding:16px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.ff .ff-mod:hover { transform: translateY(-3px); border-color: var(--jt-border-accent); box-shadow:0 12px 30px rgba(0,0,0,.3), 0 0 22px color-mix(in srgb, var(--jt-accent) 14%, transparent); }
.ff .ff-mod-ic { width:40px; height:40px; border-radius:11px; flex:none; display:grid; place-items:center; background: color-mix(in srgb, var(--jt-accent) 14%, transparent); color: var(--jt-accent); }
.ff .ff-mod-ic svg { width:20px; height:20px; }
.ff .ff-mod-main { flex:1; min-width:0; }
.ff .ff-mod-t { font-weight:700; color: var(--jt-text); font-size:14px; }
.ff .ff-mod-d { color: var(--jt-muted); font-size:12px; margin-top:2px; line-height:1.35; }

/* Bas de page */
.ff .ff-bottom { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px; }
.ff .ff-info { display:flex; align-items:center; gap:14px; background: var(--jt-panel); border:1px solid var(--jt-border); border-radius:16px; padding:18px 20px; }

/* Interrupteurs modernes (scopés .ff) */
.ff .feat-sw { position:relative; display:inline-block; width:44px; height:26px; flex:none; }
.ff .feat-sw input { position:absolute; opacity:0; width:0; height:0; }
.ff .feat-slider { position:absolute; inset:0; cursor:pointer; border-radius:100px; background: color-mix(in srgb, var(--jt-muted) 42%, transparent); transition: background .25s ease; }
.ff .feat-slider::before { content:''; position:absolute; width:20px; height:20px; left:3px; top:3px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.35); transition: transform .25s ease; }
.ff .feat-sw input:checked + .feat-slider { background: linear-gradient(135deg, var(--jt-accent), var(--jt-accent3)); }
.ff .feat-sw input:checked + .feat-slider::before { transform: translateX(18px); }

.ff .tpl-grid { margin-top:4px; }
.ff .tpl-label { color: var(--jt-text) !important; }
@media (max-width:1100px){ .ff .ff-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .ff .ff-grid{ grid-template-columns:1fr; } .ff .ff-bottom{ grid-template-columns:1fr; } .ff .ff-card{ flex-wrap:wrap; } }

/* ============================================================
   PAGE STATISTIQUES — KPIs + barres (thème global, vars --jt-*)
   ============================================================ */
.st { color: var(--jt-text); }
.st .st-topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:12px; }
.st .st-topbar .nc-pagehead { margin:0; }
.st .view-title { color: var(--jt-text) !important; -webkit-text-fill-color: var(--jt-text) !important; }
.st .nc-pagesub { color: var(--jt-muted) !important; }
.st .st-yearrow { display:flex; align-items:center; gap:10px; margin:6px 0 18px; }
.st .st-yearlbl { color: var(--jt-muted); font-size:13px; font-weight:600; }
.st .st-year { width:auto !important; max-width:130px !important; background: var(--jt-card); color: var(--jt-text); border:1px solid var(--jt-border); border-radius:10px; padding:8px 12px; font-size:13.5px; font-weight:600; outline:none; cursor:pointer; }
.st .st-yearrow { flex-wrap:wrap; }
.st .st-year:focus { border-color: var(--jt-accent); }
.st .st-loading { color: var(--jt-muted); padding:16px; }

/* KPIs */
.st .st-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }
.st .st-kpi { position:relative; overflow:hidden; background: var(--jt-card); border:1px solid var(--jt-border); border-radius:16px; padding:16px 18px; min-height:96px; box-shadow:0 8px 24px rgba(0,0,0,.2); transition: transform .25s ease, border-color .25s ease; }
.st .st-kpi:hover { transform: translateY(-2px); border-color: var(--jt-border-accent); }
.st .st-kpi-l { color: var(--jt-muted); font-size:12.5px; font-weight:600; }
.st .st-kpi-v { color: var(--jt-text); font-size:23px; font-weight:800; margin-top:8px; position:relative; z-index:1; }
.st .st-kpi-s { color: var(--jt-muted); font-size:12px; margin-top:3px; position:relative; z-index:1; }
.st .st-kpi-chart.wide { position:absolute; left:0; right:0; bottom:0; height:40px; opacity:.85; }
.st .st-kpi-chart.donut { position:absolute; right:16px; top:14px; width:48px; height:48px; }
.st .st-spk { width:100%; height:40px; display:block; }
.st .st-spk-l { fill:none; stroke: var(--jt-accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.st .st-spk-a { fill: var(--jt-accent); opacity:.13; stroke:none; }
.st .st-do { width:48px; height:48px; }
.st .st-do-bg { stroke: color-mix(in srgb, var(--jt-muted) 28%, transparent); }
.st .st-do-fg { stroke: var(--jt-accent); }

/* Cartes / barres */
.st .st-card { background: var(--jt-card); border:1px solid var(--jt-border); border-radius:16px; padding:18px 20px; margin-bottom:14px; box-shadow:0 8px 24px rgba(0,0,0,.2); }
.st .st-card-t { margin:0 0 14px; color: var(--jt-text); font-size:14.5px; font-weight:700; }
.st .st-bars { display:flex; flex-direction:column; gap:11px; }
.st .st-bar { display:flex; align-items:center; gap:12px; }
.st .st-bar-l { width:160px; flex:none; font-size:13px; color: var(--jt-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st .st-bar-track { flex:1; height:14px; background: color-mix(in srgb, var(--jt-muted) 16%, transparent); border-radius:100px; overflow:hidden; }
.st .st-bar-fill { display:block; height:100%; border-radius:100px; background: linear-gradient(90deg, var(--jt-accent3), var(--jt-accent)); transition: width .5s ease; }
.st .st-bar-v { width:110px; flex:none; text-align:right; font-size:13px; font-weight:700; color: var(--jt-text); }

@media (max-width:1100px){ .st .st-kpis{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .st .st-kpis{ grid-template-columns:1fr; } .st .st-bar-l{ width:110px; } .st .st-bar-v{ width:80px; } }

/* ============================================================
   PAGE ADMINISTRATION — console SaaS premium (thème global --jt-*)
   Reskin des blocs .ad-* existants ; aucune logique modifiée.
   ============================================================ */
.adx { color: var(--jt-text); }
.appshell.jt.theme-cuivre .adx, .appshell.jt.theme-cyan .adx, .appshell.jt.theme-indigo .adx { --nc-navy: var(--jt-text); }
.adx .adx-topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.adx .adx-topbar .nc-pagehead { margin:0; }
.adx .view-title { color: var(--jt-text) !important; -webkit-text-fill-color: var(--jt-text) !important; }
.adx .nc-pagesub { color: var(--jt-muted) !important; }
.adx .placeholder { color: var(--jt-muted); }

/* Cartes génériques */
.adx .card, .adx .ad-kpi, .adx .ad-chart, .adx .ad-qt { background: var(--jt-card) !important; border:1px solid var(--jt-border) !important; color: var(--jt-text); border-radius:16px; box-shadow:0 6px 20px rgba(0,0,0,.18); }
.appshell.jt.theme-sable .adx .card, .appshell.jt.theme-sable .adx .ad-kpi, .appshell.jt.theme-sable .adx .ad-chart, .appshell.jt.theme-sable .adx .ad-qt { box-shadow:0 6px 16px rgba(150,130,90,.10); }

/* KPI */
.adx .ad-kpi-ic { background: color-mix(in srgb, var(--jt-accent) 15%, transparent) !important; color: var(--jt-accent) !important; }
.adx .ad-kpi-ic svg { color: var(--jt-accent) !important; stroke: var(--jt-accent) !important; }
.adx .ad-kpi-l { color: var(--jt-muted) !important; }
.adx .ad-kpi-v { color: var(--jt-text) !important; }
.adx .ad-kpi-s { color: var(--jt-muted) !important; }
.adx .ad-kpi-s.up { color: var(--jt-ok) !important; }

/* Titres / liens */
.adx .ad-h, .adx .ad-chart-head h4 { color: var(--jt-text) !important; }
.adx .ad-link { color: var(--jt-accent) !important; cursor:pointer; }
.adx .ad-link:hover { color: var(--jt-accent2) !important; }

/* Accès rapide — cartes agrandies (comme Ventes) + titres/descriptions sur plusieurs lignes */
.adx .ad-qgrid { grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)) !important; gap: 14px !important; }
.adx .ad-qt { padding: 20px 22px !important; min-height: 100px; gap: 15px !important; align-items: center; }
.adx .ad-qt-ic { width: 52px !important; height: 52px !important; border-radius: 15px !important; }
.adx .ad-qt-ic svg { width: 24px !important; height: 24px !important; }
.adx .ad-qt-t { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; font-size: 15px !important; line-height: 1.25; }
.adx .ad-qt-d { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; font-size: 12.5px !important; line-height: 1.35; margin-top: 3px; }
.adx .ad-qt-ic { background: color-mix(in srgb, var(--jt-accent) 13%, transparent) !important; color: var(--jt-accent) !important; }
.adx .ad-qt-ic svg { color: var(--jt-accent) !important; stroke: var(--jt-accent) !important; }
.adx .ad-qt-t { color: var(--jt-text) !important; }
.adx .ad-qt-d { color: var(--jt-muted) !important; }
.adx .ad-qt-arw { color: var(--jt-muted) !important; }
.adx .ad-qt:hover { transform: translateY(-2px); border-color: var(--jt-border-accent) !important; box-shadow:0 12px 28px rgba(0,0,0,.3), 0 0 22px color-mix(in srgb, var(--jt-accent) 12%, transparent) !important; }
.adx .ad-qt:hover .ad-qt-arw { color: var(--jt-accent) !important; }

/* Donut : couleur du texte central */
.adx .ad-donut-wrap { color: var(--jt-text); }

/* Notifications (réutilise .cp-row) */
.adx .cp-row-t { color: var(--jt-text) !important; }
.adx .cp-row-s { color: var(--jt-muted) !important; }
.adx .cp-row { border-top-color: var(--jt-border) !important; }

/* Bandeau Leia (help) + strip conseil */
.adx .ad-help { background: linear-gradient(150deg, color-mix(in srgb, var(--jt-accent) 20%, var(--jt-card)), var(--jt-card)) !important; border: 1px solid var(--jt-border-accent) !important; box-shadow: 0 0 34px color-mix(in srgb, var(--jt-accent) 12%, transparent) !important; color: var(--jt-text) !important; }
.adx .ad-help h1, .adx .ad-help h2, .adx .ad-help h3, .adx .ad-help b, .adx .ad-help strong, .adx .ad-help div { color: var(--jt-text) !important; }
.adx .ad-help-btn { background: color-mix(in srgb, var(--jt-accent) 16%, transparent) !important; border: 1px solid var(--jt-border-accent) !important; color: var(--jt-text) !important; }
.adx .ad-help-btn:hover { background: color-mix(in srgb, var(--jt-accent) 26%, transparent) !important; }

/* Comptabilité (thème sombre) : pastilles d'icônes de lignes en teinte SOMBRE subtile
   (au lieu du pastel clair qui « pique » sur fond foncé) — on garde la couleur de l'icône. */
.appshell.compta-mode .cp-row-ic, .appshell.compta-mode .cp-leia-cic { background: color-mix(in srgb, currentColor 16%, transparent) !important; }
/* Infos-bulles (ⓘ) sur les KPI Comptabilité */
.cp-kpi-info { margin-left: 6px; font-size: 11px; opacity: .5; cursor: help; vertical-align: middle; }
.cp-kpi-info:hover { opacity: .85; }
.adx .ad-strip { background: var(--jt-card) !important; border:1px solid var(--jt-border) !important; }
.adx .ad-strip-ic { background: color-mix(in srgb, var(--jt-accent) 15%, transparent) !important; color: var(--jt-accent) !important; }
.adx .ad-strip b { color: var(--jt-text) !important; }
.adx .ad-strip-btn { background: transparent !important; border:1px solid var(--jt-border-accent) !important; color: var(--jt-accent) !important; }
.adx .ad-strip-btn:hover { background: color-mix(in srgb, var(--jt-accent) 12%, transparent) !important; }

/* Rattrapage des couleurs inline (texte sombre/muet) pour lisibilité toutes teintes */
.adx [style*="#16223e"], .adx [style*="#33415a"], .adx [style*="var(--nc-navy"], .adx [style*="#46566b"] { color: var(--jt-text) !important; }
.adx [style*="#7c8aa0"], .adx [style*="#94a3b8"], .adx [style*="#64748b"] { color: var(--jt-muted) !important; }
.adx [style*="#eef2f7"] { background: color-mix(in srgb, var(--jt-muted) 16%, transparent) !important; }

/* ============================================================
   COCKPIT — tuning : interrupteur radar, popups sombres/compactes, gélules
   ============================================================ */
/* Radar OFF : fige toutes les animations ET masque le calque radar (halos + liens) */
.jck2.noradar, .jck2.noradar *, .jck2.noradar *::before, .jck2.noradar *::after { animation: none !important; }
.jck2.noradar .halo, .jck2.noradar .halo.h2, .jck2.noradar .h2, .jck2.noradar .links { display: none !important; opacity: 0 !important; }
/* Désactivation INDIVIDUELLE des animations du cockpit */
.jck2.anim-off-halos .halo, .jck2.anim-off-halos .h2 { display: none !important; }
.jck2.anim-off-rings .core::before, .jck2.anim-off-rings .core::after { animation: none !important; display: none !important; opacity: 0 !important; }
.jck2.anim-off-links .links { display: none !important; }
.jck2.anim-off-pulse .core, .jck2.anim-off-pulse .knob, .jck2.anim-off-pulse .knb, .jck2.anim-off-pulse .d, .jck2.anim-off-pulse .dot, .jck2.anim-off-pulse .op .d { animation: none !important; }
/* Balayage RADAR : faisceau conique rotatif centré sur le cœur */
.jck2 #jck2-cockpit { position: relative; }
.jck2 .jck2-radar { position: absolute; left: 50%; top: 50%; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; pointer-events: none; z-index: 0; opacity: .85;
  background: conic-gradient(from 0deg, rgba(25,211,230,0) 0deg, rgba(25,211,230,.03) 24deg, rgba(25,211,230,.22) 58deg, rgba(120,235,255,.32) 70deg, rgba(25,211,230,0) 82deg);
  -webkit-mask: radial-gradient(circle, transparent 24%, #000 27%, #000 60%, transparent 66%);
  mask: radial-gradient(circle, transparent 24%, #000 27%, #000 60%, transparent 66%);
  animation: jck2radarspin 5.5s linear infinite; }
@keyframes jck2radarspin { to { transform: rotate(360deg); } }
.jck2.anim-off-radar .jck2-radar, .jck2.noradar .jck2-radar,
.jck2.anim-off-radar .cockpit::before, .jck2.noradar .cockpit::before { display: none !important; animation: none !important; }
/* Cœur du cockpit : masqué (tuiles seules) ou remplacé par une image personnalisée */
.jck2.core-off .core, .jck2.core-off .halo { display: none !important; }
.jck2.core-img .core { width: 200px !important; height: 200px !important; min-width: 200px !important; min-height: 200px !important; border-radius: 50% !important; overflow: hidden !important; background: #060b16 var(--jck2-core-img) center/contain no-repeat !important; box-shadow: 0 0 26px rgba(25,211,230,.4), inset 0 0 0 2px rgba(25,211,230,.4) !important; animation: none !important; }
.jck2.core-img .core::before, .jck2.core-img .core::after { display: none !important; }
.jck2.core-img .core::before, .jck2.core-img .core::after, .jck2.core-img .core .label, .jck2.core-img .halo.h2 { display: none !important; }
/* Mode « tuiles seules » (cœur masqué) : on abandonne la constellation autour du cœur
   → grille propre et centrée, sans les traits de connexion qui pointaient vers le centre. */
.jck2.core-off #jck2-cockpit { display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: 18px; padding: 30px; overflow: auto; }
.jck2.core-off #jck2-cockpit .mod { position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; transform: none !important; margin: 0 !important; }
.jck2.core-off #jck2-cockpit .links { display: none !important; }
/* Affichage des menus DU COCKPIT (contrôle « Affichage » en haut) */
.appshell.cockpit-mode.jck-hide-left .appside { display: none !important; }
.jck2.hide-bottom .bottombar { display: none !important; }
.jck2.hide-side .col { display: none !important; }
/* Panneau droit masqué → le cockpit occupe toute la largeur (globe recentré). */
.jck2.hide-side .board { grid-template-columns: 1fr !important; }
.cdisp-wrap { position: relative; display: inline-flex; }
.cdisp.caddw { display: inline-flex; align-items: center; gap: 6px; }
.cdisp-pop { display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 80; min-width: 210px; background: var(--nc-surface, #fff); color: var(--nc-navy, #16223e); border: 1px solid var(--nc-border, #e6ebf4); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.22); padding: 8px; }
.cdisp-wrap.open .cdisp-pop { display: block; }
.cdisp-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.cdisp-row:hover { background: var(--nc-bg, #f1f5fb); }
.cdisp-row input { width: 16px; height: 16px; accent-color: #19c3d6; }
@media (max-width: 700px){ .jck2 .jck2-radar { width: 380px; height: 380px; margin: -190px 0 0 -190px; } }
/* Bibliothèque de widgets du cockpit : sombre (fini le grand modal blanc qui pique) */
.jck2-page .lib { background: #0b1522 !important; color: #c3d3e6 !important; border: 1px solid rgba(25,211,230,.3) !important; box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 40px rgba(25,211,230,.12) !important; }
.jck2-page .lib-h { background: #0b1522 !important; border-bottom: 1px solid rgba(255,255,255,.07) !important; }
.jck2-page .lib-cat { color: #33E1FF !important; }
.jck2-page .lib-h h3 { color: #EAF3FB !important; }
.jck2-page .lib-h p { color: #8fa3bd !important; }
.jck2-page .lib-h .close { background: rgba(255,255,255,.06) !important; color: #aebdd0 !important; border: 1px solid rgba(255,255,255,.1) !important; }
.jck2-page .lib-card { background: #101b2d !important; border-color: rgba(255,255,255,.08) !important; }
.jck2-page .lib-card:hover { border-color: rgba(25,211,230,.45) !important; box-shadow: 0 8px 20px rgba(0,0,0,.35) !important; }
.jck2-page .lib-card .lt b { color: #EAF3FB !important; }
.jck2-page .lib-card .lt span { color: #8fa3bd !important; }
.jck2-page .lib-card .li { background: rgba(25,211,230,.14) !important; color: #33E1FF !important; }
.jck2-page .lib-card .add, .jck2-page .lib-card .addbtm { background: rgba(25,211,230,.16) !important; color: #7FEBFF !important; border-color: rgba(255,255,255,.14) !important; }
.jck2-page .lib-card .add.in, .jck2-page .lib-card .addbtm.in { background: rgba(255,255,255,.06) !important; color: #9fb0c6 !important; }
/* Lignes d'interrupteurs d'animation (Fonctionnalités) */
.ff .ff-anim-rows { display:flex; flex-direction:column; gap:2px; border-top:1px solid var(--jt-border); padding-top:8px; }
.ff .ff-anim-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 2px; }
.ff .ff-anim-txt { min-width:0; }
.ff .ff-anim-t { color:var(--jt-text); font-weight:600; font-size:13.5px; }
.ff .ff-anim-d { color:var(--jt-muted); font-size:12px; margin-top:1px; }

/* Popups ouvertes depuis le cockpit — thème SOMBRE complet (cyan), cohérent avec le cockpit.
   S'applique aux tuiles centrales (Factures, Gestion, Devis, Produits, Contacts…) ET aux
   popups widget (.jck2). Modèle éprouvé des popups Comptabilité, teinté cyan. */
body.cockpit-route .ncp-overlay { background: rgba(2,6,18,.72) !important; backdrop-filter: blur(22px) !important; -webkit-backdrop-filter: blur(22px) !important; }
body.cockpit-route .ncp-panel { background: #0b1522 !important; border: 1px solid rgba(25,211,230,.42) !important; border-radius: 22px !important; box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 40px rgba(25,211,230,.14) !important; color: #A7B7CD !important; --nc-navy:#EAF3FB !important; --nc-ink:#EAF3FB !important; --nc-title:#EAF3FB !important; --nc-text:#EAF3FB !important; --nc-dark:#EAF3FB !important; --nc-heading:#EAF3FB !important; }
body.cockpit-route .ncp-panel:has(.jck2) { width: min(720px, 94vw) !important; max-width: 720px !important; }
body.cockpit-route .ncp-panel.ncp-fullscreen { width: 100vw !important; max-width: 100vw !important; }
body.cockpit-route .ncp-head { background: #0e1a28 !important; border-bottom: 1px solid rgba(255,255,255,.07) !important; }
body.cockpit-route .ncp-title { color: #EAF3FB !important; }
body.cockpit-route .ncp-close, body.cockpit-route .ncp-head button { background: rgba(255,255,255,.06) !important; color: #A7B7CD !important; border: 1px solid rgba(255,255,255,.1) !important; }
body.cockpit-route .ncp-close:hover, body.cockpit-route .ncp-head button:hover { background: rgba(25,211,230,.2) !important; color: #7FEBFF !important; }
body.cockpit-route .ncp-body { color: #A7B7CD !important; }
body.cockpit-route .ncp-body h1, body.cockpit-route .ncp-body h2, body.cockpit-route .ncp-body h3, body.cockpit-route .ncp-body h4, body.cockpit-route .ncp-body b, body.cockpit-route .ncp-body strong { color: #EAF3FB !important; }
body.cockpit-route .ncp-body .card, body.cockpit-route .ncp-body .nc-tile, body.cockpit-route .ncp-body .coupon-card { background: #121c2b !important; border: 1px solid rgba(255,255,255,.07) !important; color: #A7B7CD !important; box-shadow: none !important; border-radius: 16px !important; }
body.cockpit-route .ncp-body .card:hover, body.cockpit-route .ncp-body .nc-tile:hover { border-color: rgba(25,211,230,.45) !important; }
body.cockpit-route .ncp-body .card svg, body.cockpit-route .ncp-body .nc-tile svg, body.cockpit-route .ncp-body .cat-icon svg { stroke: #33E1FF !important; color: #33E1FF !important; }
body.cockpit-route .ncp-body select, body.cockpit-route .ncp-body input, body.cockpit-route .ncp-body textarea, body.cockpit-route .ncp-body .field { background: #0e1a28 !important; color: #EAF3FB !important; border: 1px solid rgba(255,255,255,.1) !important; }
body.cockpit-route .ncp-body input::placeholder, body.cockpit-route .ncp-body textarea::placeholder { color: #7E92AE !important; }
body.cockpit-route .ncp-body .btn.primary, body.cockpit-route .ncp-body button.primary { background: linear-gradient(180deg, #22C9E3, #0E8FB0) !important; color: #04121b !important; border: 0 !important; }
body.cockpit-route .ncp-body .btn.ghost, body.cockpit-route .ncp-body .btn.light, body.cockpit-route .ncp-body .btn:not(.primary), body.cockpit-route .ncp-body button:not(.primary):not(.ncp-close):not(.ncp-fs):not(.ag-newbtn) { background: rgba(255,255,255,.06) !important; color: #7FEBFF !important; border: 1px solid rgba(255,255,255,.12) !important; }
body.cockpit-route .ncp-body a { color: #33E1FF !important; }
body.cockpit-route .ncp-body .help, body.cockpit-route .ncp-body .sub { color: #7E92AE !important; }
body.cockpit-route .ncp-body table, body.cockpit-route .ncp-body td, body.cockpit-route .ncp-body th { background: transparent !important; color: #A7B7CD !important; border-color: rgba(255,255,255,.07) !important; }
body.cockpit-route .ncp-body th { color: #7E92AE !important; }
body.cockpit-route .ncp-body .notice.success, body.cockpit-route .ncp-body .pill.ok { color: #4BC46D !important; }
body.cockpit-route .ncp-body .notice.error { color: #F15A5A !important; background: rgba(241,90,90,.1) !important; border-color: rgba(241,90,90,.3) !important; }
body.cockpit-route .ncp-body .notice.info { background: rgba(25,211,230,.08) !important; border-color: rgba(25,211,230,.25) !important; color: #7FEBFF !important; }
/* Rattrapage des textes/pastilles codés en sombre (modèle général popup) */
body.cockpit-route .ncp-body [style*="--nc-navy"], body.cockpit-route .ncp-body [style*="#16223e"], body.cockpit-route .ncp-body [style*="#16233e"], body.cockpit-route .ncp-body [style*="#0f172a"], body.cockpit-route .ncp-body [style*="#1e293b"] { color: #EAF3FB !important; }
body.cockpit-route .ncp-body .cp-row-t, body.cockpit-route .ncp-body .nc-tile-title, body.cockpit-route .ncp-body .view-title, body.cockpit-route .ncp-body .list-title, body.cockpit-route .ncp-body .row-title, body.cockpit-route .ncp-body .item-title, body.cockpit-route .ncp-body dt { color: #EAF3FB !important; }
/* Petits blocs "stat" à fond clair (ex. compteurs de la Gestion) */
body.cockpit-route .ncp-body [style*="#f6f0e8"], body.cockpit-route .ncp-body [style*="#eef2f7"], body.cockpit-route .ncp-body [style*="#f7f"], body.cockpit-route .ncp-body [style*="#eaf"] { background: rgba(255,255,255,.05) !important; }
body.cockpit-route .ncp-body .ag-manage { background: rgba(255,255,255,.07) !important; color: #7FEBFF !important; border: 1px solid rgba(255,255,255,.14) !important; }

/* Popups (Cockpit + Comptabilité) : page PRODUITS (.pv-*) — cartes/KPI à fond blanc → sombre.
   (Les inputs/selects .pv-search/.pv-fsel sont déjà couverts par la règle input/select générale.) */
body.cockpit-route .ncp-body .pv-kpi, body.compta-route .ncp-body .pv-kpi,
body.cockpit-route .ncp-body .pv-card, body.compta-route .ncp-body .pv-card { background: #121c2b !important; border-color: rgba(255,255,255,.08) !important; }
body.cockpit-route .ncp-body .pv-card:hover, body.compta-route .ncp-body .pv-card:hover { border-color: rgba(255,255,255,.18) !important; }
body.cockpit-route .ncp-body .pv-kpi-v, body.compta-route .ncp-body .pv-kpi-v,
body.cockpit-route .ncp-body .pv-title, body.compta-route .ncp-body .pv-title,
body.cockpit-route .ncp-body .pv-price b, body.compta-route .ncp-body .pv-price b { color: #EAF3FB !important; }
body.compta-route .ncp-body .pv-kpi-v, body.compta-route .ncp-body .pv-title, body.compta-route .ncp-body .pv-price b { color: #F7F4EE !important; }
body.cockpit-route .ncp-body .pv-actions, body.compta-route .ncp-body .pv-actions { border-top-color: rgba(255,255,255,.08) !important; }
body.cockpit-route .ncp-body .pv-morepill, body.compta-route .ncp-body .pv-morepill { background: rgba(255,255,255,.06) !important; color: #c3d3e6 !important; border-color: rgba(255,255,255,.12) !important; }
body.cockpit-route .ncp-body .pv-vbtn.on { background: rgba(25,211,230,.18) !important; color: #7FEBFF !important; }
body.compta-route .ncp-body .pv-vbtn.on { background: rgba(214,164,79,.18) !important; color: #F0B94D !important; }
/* Blocs inline à fond blanc (ex. barre d'actions groupées) */
body.cockpit-route .ncp-body [style*="background:#fff"], body.compta-route .ncp-body [style*="background:#fff"] { background: #121c2b !important; border-color: rgba(255,255,255,.08) !important; }

/* Gélules de la barre du haut sur le cockpit : verre cohérent avec « JoomStore » */
.appshell.cockpit-mode .nc-presence-btn, .appshell.cockpit-mode .alerts-btn { background: rgba(10,22,40,.55) !important; border: 1px solid rgba(120,180,220,.28) !important; color: #EAF3FB !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 4px 16px rgba(0,0,0,.3) !important; }
.appshell.cockpit-mode .nc-presence-btn *, .appshell.cockpit-mode .alerts-btn * { color: #EAF3FB !important; }
.appshell.cockpit-mode .alerts-btn svg, .appshell.cockpit-mode .nc-presence-btn svg { color: #33E1FF !important; stroke: #33E1FF !important; }
.appshell.cockpit-mode .nc-presence-dot, .appshell.cockpit-mode .presence-dot { box-shadow: 0 0 0 3px rgba(10,22,40,.6), 0 0 0 4px rgba(34,197,94,.35) !important; }
/* Corbeille : icône discrète en pied de sidebar (ouvre la popup) */
.appside-trash { display:inline-flex; align-items:center; gap:9px; margin:4px 14px; padding:8px 12px; border:0; background:transparent; color:#8ea0b8; font-size:12.5px; font-weight:600; font-family:inherit; border-radius:10px; cursor:pointer; opacity:.7; transition:opacity .15s, background .15s, color .15s; align-self:flex-start; }
.appside-trash:hover { opacity:1; background:rgba(255,255,255,.06); color:#d3e2f2; }
.appside-trash-ic { display:grid; place-items:center; }
.appside-trash-ic svg { width:17px; height:17px; }
.appshell.jt .appside-trash { color:var(--jt-sidetx); }
.appshell.jt .appside-trash:hover { background:color-mix(in srgb, var(--jt-accent) 12%, transparent); color:color-mix(in srgb, var(--jt-sidetx) 55%, #fff); }
.appshell.jt.theme-sable .appside-trash:hover { background:rgba(232,145,47,.12); }

/* Cockpit : item de menu actif en CYAN (identité cockpit), plus de violet. */
.appshell.cockpit-mode .appside .nav a.active, .appshell.cockpit-mode .appside .nav a.active:hover { background: linear-gradient(135deg, #28D6FF, #0E8FB0) !important; color: #04121b !important; box-shadow: 0 8px 22px rgba(40,214,255,.3) !important; }
.appshell.cockpit-mode .appside .nav a.active span, .appshell.cockpit-mode .appside .nav a.active .app-link-l, .appshell.cockpit-mode .appside .nav a.active svg { color: #04121b !important; stroke: currentColor !important; }

/* ============================================================
   GESTIONNAIRE DE TÂCHES & NOTES (/taches) — thème global --jt-*
   ============================================================ */
.tkm { color: var(--jt-text); }
.tkm .tkm-topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.tkm .tkm-topbar .nc-pagehead { margin:0; }
.tkm .view-title { color: var(--jt-text) !important; -webkit-text-fill-color: var(--jt-text) !important; }
.tkm .nc-pagesub { color: var(--jt-muted) !important; }
.tkm .tkm-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.tkm .tkm-addwrap { display:flex; gap:8px; flex:1 1 380px; min-width:240px; }
.tkm .tkm-add-in { flex:1; height:44px; border-radius:13px; border:1px solid var(--jt-border); background: var(--jt-card); color: var(--jt-text); padding:0 14px; font-size:14px; outline:none; }
.tkm .tkm-add-in::placeholder { color:#7f8aa3; }
.tkm .tkm-add-in:focus { border-color: var(--jt-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--jt-accent) 14%, transparent); }
.tkm .tkm-add-btn { border:0; border-radius:13px; padding:0 18px; font-weight:700; font-size:14px; cursor:pointer; background: linear-gradient(135deg, var(--jt-accent), var(--jt-accent3)); color: var(--jt-on); white-space:nowrap; }
.tkm .tkm-add-btn:hover { filter: brightness(1.05); }
.tkm .tkm-tools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tkm .tkm-search { height:40px; border-radius:11px; border:1px solid var(--jt-border); background: var(--jt-card); color: var(--jt-text); padding:0 14px; font-size:13.5px; outline:none; min-width:160px; }
.tkm .tkm-search:focus { border-color: var(--jt-accent); }
.tkm .tkm-filters { display:inline-flex; gap:4px; background: var(--jt-panel); border:1px solid var(--jt-border); border-radius:11px; padding:4px; }
.tkm .tkm-fl { border:0; background:transparent; color: var(--jt-muted); font-weight:600; font-size:13px; padding:7px 13px; border-radius:8px; cursor:pointer; }
.tkm .tkm-fl:hover { color: var(--jt-text); }
.tkm .tkm-fl.on { background: linear-gradient(135deg, var(--jt-accent), var(--jt-accent3)); color: var(--jt-on); }

.tkm .tkm-grid { columns: 4 250px; column-gap:14px; }
.tkm .tkm-card { break-inside: avoid; margin:0 0 14px; background: var(--jt-card); border:1px solid var(--jt-border); border-radius:16px; padding:14px 16px; cursor:pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; box-shadow:0 6px 18px rgba(0,0,0,.16); }
.tkm .tkm-card:hover { transform: translateY(-2px); border-color: var(--jt-border-accent); box-shadow:0 12px 28px rgba(0,0,0,.26), 0 0 20px color-mix(in srgb, var(--jt-accent) 12%, transparent); }
.tkm .tkm-card.done { opacity:.62; }
.tkm .tkm-card-top { display:flex; align-items:flex-start; gap:10px; }
.tkm .tkm-check { width:20px; height:20px; flex:none; margin-top:1px; border-radius:50%; border:2px solid color-mix(in srgb, var(--jt-muted) 55%, transparent); cursor:pointer; position:relative; transition: all .18s ease; }
.tkm .tkm-check:hover { border-color: var(--jt-accent); }
.tkm .tkm-check.on { background: linear-gradient(135deg, var(--jt-accent), var(--jt-accent3)); border-color: transparent; }
.tkm .tkm-check.on::after { content:''; position:absolute; left:6px; top:2.5px; width:5px; height:9px; border:solid var(--jt-on); border-width:0 2px 2px 0; transform: rotate(45deg); }
.tkm .tkm-card-t { flex:1; min-width:0; font-weight:700; color: var(--jt-text); font-size:14.5px; line-height:1.3; word-break:break-word; }
.tkm .tkm-card.done .tkm-card-t { text-decoration: line-through; color: var(--jt-muted); }
.tkm .tkm-card-n { color: var(--jt-muted); font-size:12.5px; margin-top:8px; line-height:1.4; white-space:pre-wrap; word-break:break-word; max-height:96px; overflow:hidden; }
.tkm .tkm-card-f { color: color-mix(in srgb, var(--jt-muted) 80%, transparent); font-size:11px; margin-top:10px; }
.tkm .tkm-empty { color: var(--jt-muted); font-size:14px; padding:40px 10px; text-align:center; }
.tkm .tkm-lab { display:block; margin-bottom:12px; }
.tkm .tkm-lab > span { display:block; font-size:12px; color:#7c8aa0; margin-bottom:4px; }

@media (max-width:640px){ .tkm .tkm-grid{ columns:1; } .tkm .tkm-tools{ width:100%; } }

/* ============================================================
   PAGE CORBEILLE (/corbeille) — thème global --jt-*
   ============================================================ */
.cb { color: var(--jt-text); }
.cb .cb-topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.cb .cb-topbar .nc-pagehead { margin:0; }
.cb .view-title { color: var(--jt-text) !important; -webkit-text-fill-color: var(--jt-text) !important; }
.cb .nc-pagesub { color: var(--jt-muted) !important; }
.cb .cb-panel { background: var(--jt-panel); border:1px solid var(--jt-border); border-radius:16px; padding:6px 14px; box-shadow:0 8px 24px rgba(0,0,0,.18); }
.cb .cb-loading { color: var(--jt-muted); padding:18px 4px; }
.cb .cb-row { display:flex; align-items:center; gap:12px; padding:14px 4px; border-top:1px solid var(--jt-border); }
.cb .cb-row:first-child { border-top:0; }
.cb .cb-ic { width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center; background: color-mix(in srgb, var(--jt-accent) 13%, transparent); color: var(--jt-accent); }
.cb .cb-ic svg { width:19px; height:19px; }
.cb .cb-main { flex:1; min-width:0; }
.cb .cb-t { font-weight:700; color: var(--jt-text); font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cb .cb-s { font-size:12px; color: var(--jt-muted); margin-top:2px; }
.cb .cb-acts { display:flex; gap:8px; flex:none; flex-wrap:wrap; justify-content:flex-end; }
.cb .cb-btn { border:1px solid var(--jt-border-accent); background:transparent; color: var(--jt-accent2); font-weight:600; font-size:13px; padding:8px 14px; border-radius:10px; cursor:pointer; white-space:nowrap; transition: background .15s ease; }
.cb .cb-btn:hover { background: color-mix(in srgb, var(--jt-accent) 12%, transparent); }
.cb .cb-btn.danger { border-color: color-mix(in srgb, var(--jt-danger) 55%, transparent); color: var(--jt-danger); }
.cb .cb-btn.danger:hover { background: color-mix(in srgb, var(--jt-danger) 14%, transparent); }
.cb .cb-btn:disabled { opacity:.5; cursor:default; }
.cb .cb-empty { text-align:center; padding:42px 16px; }
.cb .cb-empty-ic { display:inline-grid; place-items:center; width:64px; height:64px; border-radius:18px; background: color-mix(in srgb, var(--jt-muted) 14%, transparent); color: var(--jt-muted); margin-bottom:12px; }
.cb .cb-empty-t { color: var(--jt-text); font-weight:700; font-size:15px; }
.cb .cb-empty-s { color: var(--jt-muted); font-size:13px; margin-top:4px; }
@media (max-width:560px){ .cb .cb-row{ flex-wrap:wrap; } .cb .cb-acts{ width:100%; } }

/* ============================================================
   ⚙️ THEME ENGINE — POPUPS / MODALES / OVERLAYS GLOBAUX
   Toute fenêtre ouverte (depuis n'importe quelle page, à n'importe quelle
   profondeur) hérite AUTOMATIQUEMENT du thème actif via les jetons --jt-*.
   Aucune couleur codée en dur : tout passe par les variables.
   ============================================================ */
body.jt-theme .ncp-overlay { background: rgba(2,6,18,.72) !important; backdrop-filter: blur(22px) !important; -webkit-backdrop-filter: blur(22px) !important; }
body.jt-theme .ncp-panel { background: var(--jt-panel) !important; border: 1px solid var(--jt-border-accent) !important; border-radius: 22px !important; box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 40px color-mix(in srgb, var(--jt-accent) 12%, transparent) !important; color: var(--jt-muted) !important; --nc-navy: var(--jt-text); --nc-ink: var(--jt-text); --nc-title: var(--jt-text); --nc-text: var(--jt-text); --nc-dark: var(--jt-text); --nc-heading: var(--jt-text); }
body.jt-theme .ncp-head { background: var(--jt-card) !important; border-bottom: 1px solid var(--jt-border) !important; }
body.jt-theme .ncp-title { color: var(--jt-text) !important; }
body.jt-theme .ncp-close, body.jt-theme .ncp-head button { background: color-mix(in srgb, var(--jt-text) 6%, transparent) !important; color: var(--jt-muted) !important; border: 1px solid var(--jt-border) !important; }
body.jt-theme .ncp-close:hover, body.jt-theme .ncp-head button:hover { background: color-mix(in srgb, var(--jt-accent) 18%, transparent) !important; color: var(--jt-accent2) !important; }
body.jt-theme .ncp-body { color: var(--jt-muted) !important; }
body.jt-theme .ncp-body h1, body.jt-theme .ncp-body h2, body.jt-theme .ncp-body h3, body.jt-theme .ncp-body h4, body.jt-theme .ncp-body b, body.jt-theme .ncp-body strong { color: var(--jt-text) !important; }
body.jt-theme .ncp-body .card, body.jt-theme .ncp-body .nc-tile, body.jt-theme .ncp-body .coupon-card, body.jt-theme .ncp-body .pv-kpi, body.jt-theme .ncp-body .pv-card, body.jt-theme .ncp-body .plan-card, body.jt-theme .ncp-body .bk-acct-tab, body.jt-theme .ncp-body .bk-acct-wrap, body.jt-theme .ncp-body .pil-kpi { background: var(--jt-card) !important; border: 1px solid var(--jt-border) !important; color: var(--jt-muted) !important; box-shadow: none !important; border-radius: 14px !important; }
body.jt-theme .ncp-body .pil-kpi-l { color: var(--jt-text) !important; }
body.jt-theme .ncp-body .pil-kpi-s { color: var(--jt-muted) !important; }
body.jt-theme .ncp-body .notice.warn { background: color-mix(in srgb, var(--jt-accent2) 12%, transparent) !important; border-color: color-mix(in srgb, var(--jt-accent2) 30%, transparent) !important; color: var(--jt-accent2) !important; }
/* Composants bespoke à texte propre : forfaits + onglets banque */
body.jt-theme .ncp-body .plan-name, body.jt-theme .ncp-body .plan-price, body.jt-theme .ncp-body .plan-price b, body.jt-theme .ncp-body .bk-acct-name, body.jt-theme .ncp-body .plan-feats li { color: var(--jt-text) !important; }
body.jt-theme .ncp-body .plan-tagline, body.jt-theme .ncp-body .bk-acct-sub, body.jt-theme .ncp-body .plan-price span { color: var(--jt-muted) !important; }
body.jt-theme .ncp-body .plan-cta { background: color-mix(in srgb, var(--jt-text) 6%, transparent) !important; color: var(--jt-accent2) !important; border: 1px solid var(--jt-border-accent) !important; }
body.jt-theme .ncp-body .plan-card.popular, body.jt-theme .ncp-body .plan-card.current, body.jt-theme .ncp-body .bk-acct-tab.active, body.jt-theme .ncp-body .bk-acct-wrap.active { border-color: var(--jt-border-accent) !important; }
body.jt-theme .ncp-body .plan-card.current .plan-cta.cur { background: linear-gradient(180deg, var(--jt-accent2), var(--jt-accent3)) !important; color: var(--jt-on) !important; border: 0 !important; }
body.jt-theme .ncp-body .card:hover, body.jt-theme .ncp-body .nc-tile:hover, body.jt-theme .ncp-body .pv-card:hover { border-color: var(--jt-border-accent) !important; }
body.jt-theme .ncp-body .card svg, body.jt-theme .ncp-body .nc-tile svg, body.jt-theme .ncp-body .cat-icon svg { stroke: var(--jt-accent) !important; color: var(--jt-accent) !important; }
body.jt-theme .ncp-body .pv-kpi-v, body.jt-theme .ncp-body .pv-title, body.jt-theme .ncp-body .pv-price b { color: var(--jt-text) !important; }
body.jt-theme .ncp-body select, body.jt-theme .ncp-body input, body.jt-theme .ncp-body textarea, body.jt-theme .ncp-body .field { background: var(--jt-card2) !important; color: var(--jt-text) !important; border: 1px solid var(--jt-border) !important; }
body.jt-theme .ncp-body input::placeholder, body.jt-theme .ncp-body textarea::placeholder { color: var(--jt-muted) !important; }
body.jt-theme .ncp-body .btn.primary, body.jt-theme .ncp-body button.primary { background: linear-gradient(180deg, var(--jt-accent2), var(--jt-accent3)) !important; color: var(--jt-on) !important; border: 0 !important; }
body.jt-theme .ncp-body .btn.ghost, body.jt-theme .ncp-body .btn.light, body.jt-theme .ncp-body .btn:not(.primary), body.jt-theme .ncp-body button:not(.primary):not(.ncp-close):not(.ncp-fs):not(.ag-newbtn) { background: color-mix(in srgb, var(--jt-text) 6%, transparent) !important; color: var(--jt-accent2) !important; border: 1px solid var(--jt-border) !important; }
body.jt-theme .ncp-body a { color: var(--jt-accent) !important; }
body.jt-theme .ncp-body .help, body.jt-theme .ncp-body .sub { color: var(--jt-muted) !important; }
body.jt-theme .ncp-body table, body.jt-theme .ncp-body td, body.jt-theme .ncp-body th { background: transparent !important; color: var(--jt-muted) !important; border-color: var(--jt-border) !important; }
body.jt-theme .ncp-body th { color: var(--jt-muted) !important; }
body.jt-theme .ncp-body .notice.success, body.jt-theme .ncp-body .pill.ok { color: var(--jt-ok) !important; }
body.jt-theme .ncp-body .notice.error { color: var(--jt-danger) !important; background: color-mix(in srgb, var(--jt-danger) 12%, transparent) !important; border-color: color-mix(in srgb, var(--jt-danger) 30%, transparent) !important; }
body.jt-theme .ncp-body .notice.info { background: color-mix(in srgb, var(--jt-accent) 8%, transparent) !important; border-color: color-mix(in srgb, var(--jt-accent) 25%, transparent) !important; color: var(--jt-accent2) !important; }
body.jt-theme .ncp-body [style*="--nc-navy"], body.jt-theme .ncp-body [style*="#16223e"], body.jt-theme .ncp-body [style*="#16233e"], body.jt-theme .ncp-body [style*="#0f172a"], body.jt-theme .ncp-body [style*="#1e293b"], body.jt-theme .ncp-body [style*="#0e2240"], body.jt-theme .ncp-body [style*="#0f2240"], body.jt-theme .ncp-body [style*="#1f2733"], body.jt-theme .ncp-body [style*="#33415a"], body.jt-theme .ncp-body [style*="#0b1a33"], body.jt-theme .ncp-body [style*="#16223f"] { color: var(--jt-text) !important; }
body.jt-theme .ncp-body [style*="background:#fff"], body.jt-theme .ncp-body [style*="background: #fff"],
body.jt-theme .ncp-body [style*="#f5f8fc"], body.jt-theme .ncp-body [style*="#f1f5f9"], body.jt-theme .ncp-body [style*="#eef2f7"],
body.jt-theme .ncp-body [style*="#f8fafc"], body.jt-theme .ncp-body [style*="#eef1f6"], body.jt-theme .ncp-body [style*="#f6f0e8"],
body.jt-theme .ncp-body [style*="#f7fbfd"], body.jt-theme .ncp-body [style*="#f5f7fa"],
body.jt-theme .ncp-body [style*="#f5f8fb"], body.jt-theme .ncp-body [style*="#f6f8fb"], body.jt-theme .ncp-body [style*="#f3f5f8"] { background: color-mix(in srgb, var(--jt-text) 6%, var(--jt-card)) !important; border-color: var(--jt-border) !important; }
body.jt-theme .ncp-body .pv-vbtn.on { background: color-mix(in srgb, var(--jt-accent) 18%, transparent) !important; color: var(--jt-accent2) !important; }
/* Produits (popup) : icônes & badges pastel clairs → teinte sombre dérivée de leur couleur */
body.jt-theme .ncp-body .pv-kpi-ic, body.jt-theme .ncp-body .pv-avatar { background: color-mix(in srgb, currentColor 16%, transparent) !important; }
body.jt-theme .ncp-body .pv-cattag, body.jt-theme .ncp-body .pv-badges > * { background: color-mix(in srgb, currentColor 20%, transparent) !important; }
body.jt-theme .ncp-body .pv-desc { color: var(--jt-muted) !important; }
/* Segments (Particulier / Professionnel, etc.) : l'actif doit ressortir clairement */
body.jt-theme .ncp-body .jt-segwrap { border-color: var(--jt-border) !important; }
body.jt-theme .ncp-body .jt-seg { background: transparent !important; color: var(--jt-muted) !important; border: 0 !important; }
body.jt-theme .ncp-body .jt-seg:hover { color: var(--jt-text) !important; }
body.jt-theme .ncp-body .jt-seg.on { background: linear-gradient(135deg, var(--jt-accent), var(--jt-accent3)) !important; color: var(--jt-on) !important; }
/* Aperçu de document (devis/facture « SOLO ») = papier blanc volontaire → EXEMPTÉ du thème :
   on re-déclare les jetons de texte en foncé + fond blanc, quel que soit le thème actif. */
body.jt-theme .ncp-body .solodoc-doc { background:#fff !important; color:#33415a !important; --nc-navy:#1f2733; --nc-ink:#1f2733; --nc-title:#1f2733; --nc-text:#33415a; --nc-dark:#1f2733; --nc-heading:#1f2733; --nc-muted:#8a94a6; }
body.jt-theme .ncp-body .solodoc-doc h1, body.jt-theme .ncp-body .solodoc-doc h2, body.jt-theme .ncp-body .solodoc-doc h3, body.jt-theme .ncp-body .solodoc-doc h4, body.jt-theme .ncp-body .solodoc-doc b, body.jt-theme .ncp-body .solodoc-doc strong, body.jt-theme .ncp-body .solodoc-doc td, body.jt-theme .ncp-body .solodoc-doc th { color:#1f2733 !important; -webkit-text-fill-color:#1f2733 !important; }
body.jt-theme .ncp-body .solodoc-doc .help, body.jt-theme .ncp-body .solodoc-doc [style*="#7c8aa0"], body.jt-theme .ncp-body .solodoc-doc [style*="#94a3b8"] { color:#8a94a6 !important; -webkit-text-fill-color:#8a94a6 !important; }
body.jt-theme .ncp-body .solodoc-doc [style*="#16223e"], body.jt-theme .ncp-body .solodoc-doc [style*="#0e2240"], body.jt-theme .ncp-body .solodoc-doc [style*="--nc-navy"], body.jt-theme .ncp-body .solodoc-doc [style*="#1f2733"] { color:#1f2733 !important; -webkit-text-fill-color:#1f2733 !important; }
/* Éditeur devis/facture « SOLO » (.solodoc) = surface d'édition CLAIRE cohérente → exemptée du thème
   (sinon : panneaux blancs + texte éclairci = en-têtes illisibles hors Graphite). */
body.jt-theme .ncp-body .solodoc { --nc-navy:#1f2733; --nc-ink:#1f2733; --nc-title:#1f2733; --nc-text:#33415a; --nc-dark:#1f2733; --nc-heading:#1f2733; --nc-muted:#7a8496; color:#33415a; }
body.jt-theme .ncp-body .solodoc h1, body.jt-theme .ncp-body .solodoc h2, body.jt-theme .ncp-body .solodoc h3, body.jt-theme .ncp-body .solodoc h4, body.jt-theme .ncp-body .solodoc summary, body.jt-theme .ncp-body .solodoc b, body.jt-theme .ncp-body .solodoc strong, body.jt-theme .ncp-body .solodoc label, body.jt-theme .ncp-body .solodoc .solodoc-acc > summary { color:#1f2733 !important; -webkit-text-fill-color:#1f2733 !important; }
body.jt-theme .ncp-body .solodoc input, body.jt-theme .ncp-body .solodoc select, body.jt-theme .ncp-body .solodoc textarea, body.jt-theme .ncp-body .solodoc .field { background:#fff !important; color:#1f2733 !important; -webkit-text-fill-color:#1f2733 !important; border:1px solid #d7dee8 !important; }
body.jt-theme .ncp-body .solodoc input::placeholder, body.jt-theme .ncp-body .solodoc textarea::placeholder { color:#9aa6b6 !important; -webkit-text-fill-color:#9aa6b6 !important; }
body.jt-theme .ncp-body .solodoc .help, body.jt-theme .ncp-body .solodoc [style*="#7c8aa0"], body.jt-theme .ncp-body .solodoc [style*="#94a3b8"] { color:#7a8496 !important; -webkit-text-fill-color:#7a8496 !important; }

/* COCKPIT : identité CYAN fixe — on remappe simplement les jetons sur son panneau,
   toutes les règles ci-dessus se résolvent alors en cyan (quel que soit le thème global). */
body.cockpit-route .ncp-panel { --jt-panel:#0b1522; --jt-card:#101B2D; --jt-card2:#0e1a28; --jt-hover:#15233A; --jt-border:rgba(255,255,255,.09); --jt-border-accent:rgba(25,211,230,.42); --jt-text:#EAF3FB; --jt-muted:#A7B7CD; --jt-accent:#33E1FF; --jt-accent2:#7FEBFF; --jt-accent3:#0E8FB0; --jt-ok:#4BC46D; --jt-danger:#F15A5A; --jt-on:#04121b; }
body.cockpit-route .ncp-panel:has(.jck2) { width: min(720px, 94vw) !important; max-width: 720px !important; }

/* ============ NORME UI — liens dynamiques + fiche en popup (contacts, historique) ============ */
.cc-cell-link, .cc-namebtn { background:none; border:none; padding:0; margin:0; font:inherit; text-align:left; cursor:pointer; color:var(--jt-accent, #0b8ca6); }
.cc-cell-link:hover { text-decoration:underline; }
.cc-namebtn { font-weight:700; color:var(--jt-text, #1d2b3a); }
.cc-namebtn:hover { color:var(--jt-accent, #0b8ca6); text-decoration:underline; }
tr.cc-tr { cursor:pointer; transition:background .12s; }
tr.cc-tr:hover { background:var(--jt-hover, rgba(11,140,166,.06)); }
.cc-card { display:flex; flex-direction:column; gap:16px; }
.cc-head { display:flex; align-items:center; gap:14px; }
.cc-av { width:52px; height:52px; border-radius:15px; flex:0 0 auto; display:grid; place-items:center; font-weight:800; font-size:20px; color:var(--jt-on, #fff); background:linear-gradient(135deg, var(--jt-accent, #0b8ca6), var(--jt-accent3, #0e6f85)); }
.cc-name { font-size:18px; font-weight:800; color:var(--jt-text, #1d2b3a); line-height:1.15; }
.cc-sub { font-size:12.5px; color:var(--jt-muted, #7c8aa0); margin-top:2px; }
.cc-grid { display:flex; flex-direction:column; gap:2px; }
.cc-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 2px; border-bottom:1px solid var(--jt-border, #eef2f7); }
.cc-row:last-child { border-bottom:none; }
.cc-l { font-size:12.5px; color:var(--jt-muted, #7c8aa0); font-weight:600; flex:0 0 auto; }
.cc-v { font-size:14px; color:var(--jt-text, #1d2b3a); text-align:right; min-width:0; word-break:break-word; }
.cc-link { background:none; border:none; padding:0; margin:0; font:inherit; cursor:pointer; color:var(--jt-accent, #0b8ca6); font-weight:600; }
.cc-link:hover { text-decoration:underline; }
.cc-acts { display:flex; gap:10px; flex-wrap:wrap; }
.cx-hl-row { display:flex; gap:10px; padding:11px 6px; border-bottom:1px solid var(--jt-border, #eef2f7); align-items:flex-start; border-radius:9px; }
.cx-hl-row:last-child { border-bottom:none; }
.cx-hl-clk { cursor:pointer; transition:background .12s; }
.cx-hl-clk:hover { background:var(--jt-hover, rgba(11,140,166,.06)); }
.cx-hl-go { flex:0 0 auto; align-self:center; color:var(--jt-muted, #94a3b8); opacity:.6; }
.cx-hl-go svg { width:16px; height:16px; }
.cx-hl-clk:hover .cx-hl-go { color:var(--jt-accent, #0b8ca6); opacity:1; }

/* ============ Cockpit — Actions rapides configurables + Calculette + Météo ============ */
.qa-top { display:flex; justify-content:flex-end; margin-bottom:8px; }
.qa-cfg { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); color:#aebdd0; border-radius:8px; padding:4px 10px; font-size:12px; cursor:pointer; transition:.12s; }
.qa-cfg:hover { color:#33E1FF; border-color:rgba(25,211,230,.5); }
/* Popup config des raccourcis */
.qacfg-h { color:var(--jt-muted,#7c8aa0); font-size:13px; margin:0 0 14px; }
.qacfg-sec { margin-bottom:16px; }
.qacfg-cat { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--jt-accent,#0bb4c7); margin:6px 0 9px; }
.qacfg-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.qacfg-item { display:flex; align-items:center; gap:9px; padding:9px 11px; border:1px solid var(--jt-border,#e9eef5); border-radius:11px; cursor:pointer; transition:.12s; }
.qacfg-item:hover { border-color:var(--jt-accent,#19d3e6); }
.qacfg-item input { width:16px; height:16px; accent-color:var(--jt-accent,#16b3c7); flex:0 0 auto; margin:0; }
.qacfg-ic { width:26px; height:26px; border-radius:8px; display:grid; place-items:center; flex:0 0 auto; background:color-mix(in srgb, var(--jt-accent,#19d3e6) 16%, transparent); color:var(--jt-accent,#0bb4c7); }
.qacfg-ic svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.9; }
.qacfg-lb { font-size:13px; color:var(--jt-text,#1d2b3a); min-width:0; }
.qacfg-foot { display:flex; gap:10px; margin-top:8px; }
@media (max-width:520px){ .qacfg-grid { grid-template-columns:1fr; } }
/* Calculette */
.calc { max-width:330px; margin:0 auto; }
.calc-disp { width:100%; box-sizing:border-box; text-align:right; font-size:26px; font-weight:700; padding:14px; border-radius:12px; border:1px solid var(--jt-border,#e9eef5); background:var(--jt-card2,#f6f8fb); color:var(--jt-text,#1d2b3a); margin-bottom:12px; }
.calc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.calc-k { border:1px solid var(--jt-border,#e9eef5); background:var(--jt-card,#fff); color:var(--jt-text,#1d2b3a); border-radius:12px; padding:15px 0; font-size:17px; font-weight:600; cursor:pointer; transition:.12s; }
.calc-k:hover { border-color:var(--jt-accent,#19d3e6); }
.calc-k.op { color:var(--jt-accent,#0bb4c7); }
.calc-k.fn { color:var(--jt-muted,#7c8aa0); }
.calc-k.eq { background:var(--jt-accent,#0bb4c7); color:var(--jt-on,#fff); border-color:transparent; }
.calc-k.eq:hover { filter:brightness(1.06); }
/* Météo (cockpit — contexte sombre) */
.mto { display:flex; flex-direction:column; gap:3px; }
.mto-top { display:flex; align-items:center; gap:12px; }
.mto-emo { font-size:40px; line-height:1; }
.mto-temp { font-size:42px; font-weight:800; color:#EAF3FB; line-height:1; }
.mto-lbl { font-size:14px; color:#EAF3FB; font-weight:600; margin-top:4px; }
.mto-place { font-size:12.5px; color:#8fa3bd; }
.mto-meta { font-size:12px; color:#8fa3bd; margin-top:5px; }
.mto-acts { display:flex; gap:8px; margin-top:11px; flex-wrap:wrap; }
.mto-acts button { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); color:#aebdd0; border-radius:8px; padding:5px 10px; font-size:12px; cursor:pointer; transition:.12s; }
.mto-acts button:hover { color:#33E1FF; border-color:rgba(25,211,230,.5); }
.mc-res { display:flex; flex-direction:column; max-height:320px; overflow:auto; }

/* ============ Palette de recherche globale (cmdk) — héritage du thème sombre ============ */
body.jt-theme .cmdk-ov { background: rgba(4,10,20,.6) !important; }
body.jt-theme .cmdk { background: var(--jt-card) !important; border: 1px solid var(--jt-border) !important; box-shadow: 0 30px 80px rgba(0,0,0,.6) !important; }
body.jt-theme .cmdk-head { border-bottom: 1px solid var(--jt-border) !important; }
body.jt-theme .cmdk-head svg { stroke: var(--jt-accent) !important; }
body.jt-theme .cmdk-input { color: var(--jt-text) !important; }
body.jt-theme .cmdk-input::placeholder { color: var(--jt-muted) !important; }
body.jt-theme .cmdk-item.on { background: color-mix(in srgb, var(--jt-accent) 16%, transparent) !important; }
body.jt-theme .cmdk-ic { background: color-mix(in srgb, var(--jt-accent) 15%, transparent) !important; }
body.jt-theme .cmdk-ic svg { stroke: var(--jt-accent) !important; }
body.jt-theme .cmdk-t b { color: var(--jt-text) !important; }
body.jt-theme .cmdk-t span { color: var(--jt-muted) !important; }
body.jt-theme .cmdk-tag { color: var(--jt-accent2) !important; background: color-mix(in srgb, var(--jt-accent) 16%, transparent) !important; }
body.jt-theme .cmdk-empty { color: var(--jt-muted) !important; }
body.jt-theme .cmdk-foot { border-top: 1px solid var(--jt-border) !important; color: var(--jt-muted) !important; }

/* ============ Couche générique : pages modules standard héritent du thème sombre (jt-generic) ============ */
.appshell.jt-generic .main { color: var(--jt-text); --nc-navy: var(--jt-text); --nc-ink: var(--jt-text); --nc-title: var(--jt-text); --nc-text: var(--jt-text); --nc-dark: var(--jt-text); --nc-muted: var(--jt-muted); --nc-surface: var(--jt-card); --nc-surface-2: var(--jt-card2); --nc-bg: var(--jt-bg); --nc-border: var(--jt-border); }
.appshell.jt-generic .main .card { background: var(--jt-card) !important; border: 1px solid var(--jt-border) !important; color: var(--jt-text) !important; box-shadow: 0 10px 30px rgba(0,0,0,.28) !important; }
.appshell.jt-generic .main h1, .appshell.jt-generic .main h2, .appshell.jt-generic .main h3, .appshell.jt-generic .main h4, .appshell.jt-generic .main .view-title { color: var(--jt-text) !important; -webkit-text-fill-color: var(--jt-text) !important; }
.appshell.jt-generic .main p, .appshell.jt-generic .main label, .appshell.jt-generic .main li, .appshell.jt-generic .main td, .appshell.jt-generic .main strong { color: var(--jt-text); }
.appshell.jt-generic .main .help, .appshell.jt-generic .main .muted, .appshell.jt-generic .main small { color: var(--jt-muted) !important; }
/* Champs */
.appshell.jt-generic .main .field, .appshell.jt-generic .main input:not([type=checkbox]):not([type=radio]), .appshell.jt-generic .main select, .appshell.jt-generic .main textarea { background: var(--jt-card2) !important; border: 1px solid var(--jt-border) !important; color: var(--jt-text) !important; }
.appshell.jt-generic .main .field::placeholder, .appshell.jt-generic .main input::placeholder, .appshell.jt-generic .main textarea::placeholder { color: var(--jt-muted) !important; }
.appshell.jt-generic .main .field:focus, .appshell.jt-generic .main input:focus, .appshell.jt-generic .main select:focus, .appshell.jt-generic .main textarea:focus { border-color: var(--jt-accent) !important; outline: none !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--jt-accent) 22%, transparent) !important; }
/* Tables .grid */
.appshell.jt-generic .main table.grid { color: var(--jt-text) !important; }
.appshell.jt-generic .main table.grid th { color: var(--jt-muted) !important; background: transparent !important; border-color: var(--jt-border) !important; }
.appshell.jt-generic .main table.grid td { color: var(--jt-text) !important; border-color: var(--jt-border) !important; }
.appshell.jt-generic .main table.grid tr { border-color: var(--jt-border) !important; }
.appshell.jt-generic .main table.grid tbody tr:hover td, .appshell.jt-generic .main table.grid tr:hover td { background: var(--jt-hover) !important; }
/* Boutons */
.appshell.jt-generic .main .btn { background: var(--jt-card2) !important; border: 1px solid var(--jt-border) !important; color: var(--jt-text) !important; }
.appshell.jt-generic .main .btn:hover { border-color: var(--jt-border-accent) !important; }
.appshell.jt-generic .main .btn.primary { background: linear-gradient(135deg, var(--jt-accent), var(--jt-accent3)) !important; border-color: transparent !important; color: var(--jt-on) !important; }
.appshell.jt-generic .main .btn.ghost { background: transparent !important; }
/* Notices / codes / réf client */
.appshell.jt-generic .main .notice { background: var(--jt-card2) !important; color: var(--jt-text) !important; border-color: var(--jt-border) !important; }
.appshell.jt-generic .main code, .appshell.jt-generic .main .cli-ref { background: var(--jt-card2) !important; color: var(--jt-muted) !important; }
/* Onglets/pills à fond blanc inline (ex. Demandes) */
.appshell.jt-generic .main button[style*="background:#fff"] { background: var(--jt-card2) !important; border-color: var(--jt-border) !important; color: var(--jt-text) !important; }
.appshell.jt-generic .main [style*="background:#eef2f7"] { background: var(--jt-hover) !important; color: var(--jt-muted) !important; }
/* Recouvrement des couleurs FIGÉES inline (fonds blancs / textes foncés / gris) → thème */
.appshell.jt-generic .main [style*="background:#fff"], .appshell.jt-generic .main [style*="background: #fff"], .appshell.jt-generic .main [style*="background:#ffffff"], .appshell.jt-generic .main [style*="background:white"], .appshell.jt-generic .main [style*="background:#f5f8fc"], .appshell.jt-generic .main [style*="background:#f6f0e8"], .appshell.jt-generic .main [style*="background:#f6f2ec"], .appshell.jt-generic .main [style*="background:#f4eee6"], .appshell.jt-generic .main [style*="background:#f1f5f9"], .appshell.jt-generic .main [style*="background:#eef4ff"], .appshell.jt-generic .main [style*="background:#fbfdff"], .appshell.jt-generic .main [style*="background: #fbfdff"], .appshell.jt-generic .main [style*="background:#f1edfd"], .appshell.jt-generic .main [style*="background:#eef1f6"], .appshell.jt-generic .main [style*="background:#f3f5f8"] { background: var(--jt-card2) !important; }
.appshell.jt-generic .main [style*="color:#16223e"], .appshell.jt-generic .main [style*="color: #16223e"], .appshell.jt-generic .main [style*="color:#0e2a52"], .appshell.jt-generic .main [style*="color:#0f172a"], .appshell.jt-generic .main [style*="color:#1e293b"], .appshell.jt-generic .main [style*="color:#111827"] { color: var(--jt-text) !important; -webkit-text-fill-color: var(--jt-text) !important; }
.appshell.jt-generic .main [style*="color:#64748b"], .appshell.jt-generic .main [style*="color:#6b7280"], .appshell.jt-generic .main [style*="color:#94a3b8"], .appshell.jt-generic .main [style*="color:#9aa6b6"], .appshell.jt-generic .main [style*="color:#7c8aa0"], .appshell.jt-generic .main [style*="color:#6b7a90"], .appshell.jt-generic .main [style*="color:#46566b"] { color: var(--jt-muted) !important; -webkit-text-fill-color: var(--jt-muted) !important; }
/* Onglets appLayout (SYSOP, etc.) : hover clair figé → thème (sinon texte clair invisible sur fond blanc au survol) */
.appshell.jt-generic .main .app-link:hover { background: var(--jt-hover) !important; color: var(--jt-text) !important; }
.appshell.jt-generic .main .app-link:hover .app-link-l { color: var(--jt-text) !important; }
/* Exemptions : surfaces document (papier/éditeur devis-facture SOLO) = surface CLAIRE volontaire.
   L'éditeur .solodoc est rendu EN PLEINE PAGE (.main), donc la règle générique (fields → --jt-card2
   sombre) le rendait illisible. On rétablit ici le papier blanc + texte foncé, comme en pop-up. */
.appshell.jt-generic .main .solodoc-doc { background:#fff !important; color:#33415a !important; --nc-navy:#1f2733; --nc-ink:#1f2733; --nc-title:#1f2733; --nc-text:#33415a; --nc-dark:#1f2733; --nc-heading:#1f2733; --nc-muted:#8a94a6; }
.appshell.jt-generic .main .solodoc-doc h1, .appshell.jt-generic .main .solodoc-doc h2, .appshell.jt-generic .main .solodoc-doc h3, .appshell.jt-generic .main .solodoc-doc h4, .appshell.jt-generic .main .solodoc-doc b, .appshell.jt-generic .main .solodoc-doc strong, .appshell.jt-generic .main .solodoc-doc td, .appshell.jt-generic .main .solodoc-doc th { color:#1f2733 !important; -webkit-text-fill-color:#1f2733 !important; }
.appshell.jt-generic .main .solodoc { --nc-navy:#1f2733; --nc-ink:#1f2733; --nc-title:#1f2733; --nc-text:#33415a; --nc-dark:#1f2733; --nc-heading:#1f2733; --nc-muted:#7a8496; color:#33415a; }
.appshell.jt-generic .main .solodoc h1, .appshell.jt-generic .main .solodoc h2, .appshell.jt-generic .main .solodoc h3, .appshell.jt-generic .main .solodoc h4, .appshell.jt-generic .main .solodoc summary, .appshell.jt-generic .main .solodoc b, .appshell.jt-generic .main .solodoc strong, .appshell.jt-generic .main .solodoc label, .appshell.jt-generic .main .solodoc .solodoc-acc > summary { color:#1f2733 !important; -webkit-text-fill-color:#1f2733 !important; }
.appshell.jt-generic .main .solodoc input, .appshell.jt-generic .main .solodoc select, .appshell.jt-generic .main .solodoc textarea, .appshell.jt-generic .main .solodoc .field { background:#fff !important; color:#1f2733 !important; -webkit-text-fill-color:#1f2733 !important; border:1px solid #d7dee8 !important; }
.appshell.jt-generic .main .solodoc input::placeholder, .appshell.jt-generic .main .solodoc textarea::placeholder { color:#9aa6b6 !important; -webkit-text-fill-color:#9aa6b6 !important; }
.appshell.jt-generic .main .solodoc .help, .appshell.jt-generic .main .solodoc [style*="#7c8aa0"], .appshell.jt-generic .main .solodoc [style*="#94a3b8"], .appshell.jt-generic .main .solodoc [style*="#64748b"] { color:#7a8496 !important; -webkit-text-fill-color:#7a8496 !important; }
.appshell.jt-generic .main .solodoc-doc .help, .appshell.jt-generic .main .solodoc-doc [style*="#64748b"], .appshell.jt-generic .main .solodoc-doc [style*="#7c8aa0"] { color:#8a94a6 !important; -webkit-text-fill-color:#8a94a6 !important; }

/* ============ Sélecteur de thèmes — version discrète repliable ============ */
.jt-switch.jt-collapsible { position:relative; display:inline-flex; padding:0 !important; border:0 !important; background:transparent !important; }
.jt-switch.jt-collapsible .jt-toggle { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--jt-border,rgba(255,255,255,.14)); background:color-mix(in srgb, var(--jt-card,#101B2D) 70%, transparent); color:var(--jt-text,#EAF3FB); font-size:12.5px; font-weight:600; padding:7px 11px; border-radius:10px; cursor:pointer; transition:border-color .15s; }
.jt-switch.jt-collapsible .jt-toggle:hover { border-color:var(--jt-border-accent,rgba(255,255,255,.3)); }
.jt-switch.jt-collapsible .jt-chev { display:inline-flex; transition:transform .18s; opacity:.75; }
.jt-switch.jt-collapsible .jt-chev svg { width:14px; height:14px; }
.jt-switch.jt-collapsible.open .jt-chev { transform:rotate(180deg); }
.jt-switch.jt-collapsible .jt-opts { position:absolute; top:calc(100% + 6px); left:0; right:auto; z-index:60; display:none; flex-direction:column; gap:2px; padding:6px; border-radius:12px; background:var(--jt-card,#101B2D); border:1px solid var(--jt-border,rgba(255,255,255,.1)); box-shadow:0 16px 40px rgba(0,0,0,.5); min-width:210px; max-width:min(280px, 84vw); }
.jt-switch.jt-collapsible.open .jt-opts { display:flex; }
.jt-switch.jt-collapsible .jt-opt { display:flex !important; align-items:center; gap:9px; border:0; background:transparent; color:var(--jt-muted,#9DB0C8); font-size:13px; font-weight:600; padding:8px 10px; border-radius:8px; cursor:pointer; text-align:left; width:100%; box-shadow:none; }
.jt-switch.jt-collapsible .jt-opt:hover { color:var(--jt-text,#fff); background:color-mix(in srgb, var(--jt-accent,#19d3e6) 12%, transparent); }
.jt-switch.jt-collapsible .jt-opt.on { color:var(--jt-text,#fff); background:color-mix(in srgb, var(--jt-accent,#19d3e6) 18%, transparent); }
.jt-switch.jt-collapsible .jt-opt .jt-lbl { display:inline-flex !important; }
@media (max-width:720px){ .jt-switch.jt-collapsible .jt-tglbl { display:none; } }

/* ============ Clients — barre de filtres rapides (chips) ============ */
.cx-clients .cx-iconbtn.on, .cx-clients .cx-iconbtn.has { border-color:var(--cxacc) !important; color:var(--cxacc) !important; }
.cx-clients .cx-chips { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin:-4px 0 14px; padding:12px 14px; border:1px solid var(--cxbd); border-radius:14px; background:var(--cxcard2); }
.cx-clients .cx-chip-grp { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cx-clients .cx-chip-lb { font-size:12px; font-weight:700; color:var(--cxmut); text-transform:uppercase; letter-spacing:.4px; margin-right:2px; }
.cx-clients .cx-chip { border:1px solid var(--cxbd); background:transparent; color:var(--cxtx); font-size:13px; font-weight:600; padding:6px 13px; border-radius:999px; cursor:pointer; transition:.12s; }
.cx-clients .cx-chip:hover { border-color:var(--cxacc); }
.cx-clients .cx-chip.on { background:var(--cxacc); border-color:var(--cxacc); color:var(--jt-on,#fff); }

/* ============ Chips de filtres rapides (Factures / Devis) ============ */
.flt-chips { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:-4px 0 14px; }
.flt-lb { font-size:12px; font-weight:700; color:var(--jt-muted,#7c8aa0); text-transform:uppercase; letter-spacing:.4px; margin-right:2px; }
.flt-sep { width:1px; align-self:stretch; min-height:20px; background:var(--jt-border,#dbe3ec); margin:0 4px; }
.flt-chip { border:1px solid var(--jt-border,#dbe3ec); background:var(--jt-card2,#fff); color:var(--jt-text,#46566b); font-size:13px; font-weight:600; padding:6px 13px; border-radius:999px; cursor:pointer; transition:.12s; }
.flt-chip:hover { border-color:var(--jt-accent,#19d3e6); }
.flt-chip.on { background:var(--jt-accent,#16b3c7); border-color:var(--jt-accent,#16b3c7); color:var(--jt-on,#fff); }
/* Sur pages génériques thémées, garder la cohérence (pas d'override .btn) */
.appshell.jt-generic .main .flt-chip { background:var(--jt-card2) !important; color:var(--jt-text) !important; border-color:var(--jt-border) !important; }
.appshell.jt-generic .main .flt-chip.on { background:var(--jt-accent) !important; color:var(--jt-on) !important; border-color:var(--jt-accent) !important; }

/* ============ Coffre — bouton Ajouter + carte Coffre + ============ */
.cf-sec-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.cf-adddoc { display:inline-flex; align-items:center; gap:6px; background:linear-gradient(135deg,#7c5cff,#6c3ff5); color:#fff; border:0; border-radius:10px; padding:9px 15px; font-weight:700; font-size:13.5px; cursor:pointer; box-shadow:0 8px 20px rgba(124,92,255,.35); transition:filter .12s; }
.cf-adddoc svg { width:16px; height:16px; }
.cf-adddoc:hover { filter:brightness(1.07); }
.cf-plus-card { display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin:20px 0; padding:20px 22px; border-radius:18px; background:linear-gradient(120deg,#1b1540 0%,#2a1d5c 60%,#3a2170 100%); color:#fff; border:1px solid rgba(157,120,255,.4); box-shadow:0 14px 40px rgba(124,92,255,.24); }
.cf-plus-badge { align-self:flex-start; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; background:rgba(157,120,255,.32); border:1px solid rgba(198,178,255,.6); color:#F3E1A8; padding:6px 13px; border-radius:999px; }
.cf-plus-body { flex:1; min-width:220px; }
.cf-plus-t { font-size:18px; font-weight:800; }
.cf-plus-s { font-size:13.5px; color:rgba(255,255,255,.82); margin-top:3px; }
.cf-plus-price { font-size:13.5px; color:rgba(255,255,255,.9); margin-top:8px; }
.cf-plus-price b { color:#F3E1A8; }
.cf-plus-cta { background:#fff; color:#3a2170; border:0; border-radius:11px; padding:11px 18px; font-weight:800; font-size:14px; cursor:pointer; white-space:nowrap; box-shadow:0 8px 20px rgba(0,0,0,.25); transition:transform .12s; }
.cf-plus-cta:hover { transform:translateY(-1px); }
/* ============ Wizard « Ajouter un document » (popup thémé) ============ */
.cfw { display:flex; flex-direction:column; gap:16px; }
.cfw-steps { display:flex; gap:6px; }
.cfw-step { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; }
.cfw-step .cfw-num { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:13px; background:var(--jt-card2,#f1f5f9); color:var(--jt-muted,#94a3b8); border:1px solid var(--jt-border,#e5e9f0); }
.cfw-step .cfw-lb { font-size:12px; color:var(--jt-muted,#94a3b8); font-weight:600; }
.cfw-step.on .cfw-num { background:var(--jt-accent,#7c5cff); color:var(--jt-on,#fff); border-color:transparent; }
.cfw-step.on .cfw-lb { color:var(--jt-text,#16223e); }
.cfw-step.done .cfw-num { background:color-mix(in srgb, var(--jt-accent,#7c5cff) 22%, transparent); color:var(--jt-accent2,#a99cff); border-color:transparent; }
.cfw-body { min-height:180px; }
.cfw-lead { font-size:14px; color:var(--jt-text,#16223e); margin:0 0 12px; font-weight:600; }
.cfw-note { font-size:12px; color:var(--jt-muted,#94a3b8); margin:12px 0 0; }
.cfw-drop { border:2px dashed var(--jt-border,#cbd5e1); border-radius:16px; padding:26px; text-align:center; transition:.15s; }
.cfw-drop.over { border-color:var(--jt-accent,#7c5cff); background:color-mix(in srgb, var(--jt-accent,#7c5cff) 8%, transparent); }
.cfw-drop-ic { font-size:34px; }
.cfw-drop-t { font-weight:700; color:var(--jt-text,#16223e); margin-top:6px; }
.cfw-drop-s { font-size:13px; color:var(--jt-muted,#94a3b8); }
.cfw-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
.cfw-tile { display:flex; flex-direction:column; align-items:center; gap:5px; padding:15px 10px; border:1px solid var(--jt-border,#e5e9f0); border-radius:13px; background:var(--jt-card2,#fafbfd); cursor:pointer; transition:.12s; }
.cfw-tile:hover { border-color:var(--jt-accent,#7c5cff); }
.cfw-tile-ic { font-size:24px; }
.cfw-tile-t { font-weight:700; font-size:13.5px; color:var(--jt-text,#16223e); }
.cfw-tile-s { font-size:11.5px; color:var(--jt-muted,#94a3b8); text-align:center; }
.cfw-files { display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.cfw-file { display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--jt-border,#e5e9f0); border-radius:11px; background:var(--jt-card2,#fafbfd); }
.cfw-file-ic { font-size:18px; }
.cfw-file-n { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--jt-text,#16223e); font-size:13.5px; font-weight:600; }
.cfw-file-s { font-size:12px; color:var(--jt-muted,#94a3b8); white-space:nowrap; }
.cfw-file-x { border:0; background:transparent; color:var(--jt-muted,#94a3b8); cursor:pointer; font-size:14px; }
.cfw-file-x:hover { color:var(--jt-danger,#e25757); }
.cfw-cats { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.cfw-cat { display:flex; align-items:center; gap:11px; padding:13px 14px; border:1px solid var(--jt-border,#e5e9f0); border-radius:13px; background:var(--jt-card2,#fafbfd); cursor:pointer; transition:.12s; text-align:left; }
.cfw-cat:hover { border-color:var(--c,#7c5cff); }
.cfw-cat.on { border-color:var(--c,#7c5cff); background:color-mix(in srgb, var(--c,#7c5cff) 12%, transparent); }
.cfw-cat-dot { width:12px; height:12px; border-radius:50%; background:var(--c,#7c5cff); flex:0 0 auto; }
.cfw-cat-t { flex:1; font-weight:600; font-size:13.5px; color:var(--jt-text,#16223e); }
.cfw-cat-ck { color:var(--c,#7c5cff); font-weight:800; }
.cfw-opts { display:flex; flex-direction:column; gap:10px; }
.cfw-opt { display:flex; align-items:center; gap:13px; padding:14px 15px; border:1px solid var(--jt-border,#e5e9f0); border-radius:13px; background:var(--jt-card2,#fafbfd); cursor:pointer; transition:.12s; text-align:left; }
.cfw-opt:hover { border-color:var(--jt-accent,#7c5cff); }
.cfw-opt.on { border-color:var(--jt-accent,#7c5cff); background:color-mix(in srgb, var(--jt-accent,#7c5cff) 10%, transparent); }
.cfw-opt-ic { font-size:22px; flex:0 0 auto; }
.cfw-opt-tx { flex:1; min-width:0; display:flex; flex-direction:column; }
.cfw-opt-t { font-weight:700; font-size:14px; color:var(--jt-text,#16223e); }
.cfw-opt-s { font-size:12.5px; color:var(--jt-muted,#94a3b8); }
.cfw-opt-rd { width:20px; height:20px; border-radius:50%; border:2px solid var(--jt-border,#cbd5e1); flex:0 0 auto; }
.cfw-opt.on .cfw-opt-rd { border-color:var(--jt-accent,#7c5cff); background:radial-gradient(circle at center, var(--jt-accent,#7c5cff) 0 6px, transparent 7px); }
.cfw-foot { display:flex; align-items:center; gap:10px; margin-top:6px; }
.cfw-progress { color:var(--jt-muted,#94a3b8); font-size:13px; padding:8px 0; }
@media (max-width:560px){ .cfw-tiles { grid-template-columns:1fr; } .cfw-cats { grid-template-columns:1fr; } }

/* Sélecteur de thèmes — indice « mémorisé pour cette page » */
.jt-switch.jt-collapsible .jt-opts-foot { border-top:1px solid var(--jt-border,rgba(255,255,255,.1)); margin-top:5px; padding-top:8px; display:flex; flex-direction:column; gap:6px; }
.jt-switch.jt-collapsible .jt-opts-hint { font-size:11.5px; color:var(--jt-muted,#9DB0C8); padding:0 4px; }
.jt-switch.jt-collapsible .jt-opts-hint.on { color:var(--jt-accent2,#7FEBFF); font-weight:600; }
.jt-switch.jt-collapsible .jt-opts-reset { border:1px solid var(--jt-border,rgba(255,255,255,.14)); background:transparent; color:var(--jt-muted,#9DB0C8); font-size:12px; font-weight:600; padding:6px 10px; border-radius:8px; cursor:pointer; text-align:center; }
.jt-switch.jt-collapsible .jt-opts-reset:hover { color:var(--jt-text,#fff); border-color:var(--jt-border-accent,rgba(255,255,255,.3)); }

/* Coffre — CTA « Ajouter un document » mis en avant dans le hero */
.cf-btn.cf-btn-add { background:linear-gradient(135deg,#ffffff,#efe8ff) !important; color:#3a2170 !important; border:0 !important; font-weight:800 !important; box-shadow:0 12px 30px rgba(124,92,255,.5), inset 0 0 0 1px rgba(255,255,255,.5) !important; }
.cf-btn.cf-btn-add svg { width:17px; height:17px; stroke:#3a2170 !important; color:#3a2170 !important; }
.cf-btn.cf-btn-add:hover { transform:translateY(-1px); filter:brightness(1.03); }

/* Fix débordement des « Actions rapides » (libellés longs) */
.jck2 .qa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jck2 .qa { min-width: 0; overflow-wrap: anywhere; }

/* Sélecteur de thèmes — case « Appliquer à tout le site » */
.jt-switch.jt-collapsible .jt-allrow { display:flex; align-items:center; gap:8px; padding:4px 4px 2px; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--jt-text,#EAF3FB); }
.jt-switch.jt-collapsible .jt-allrow input { width:15px; height:15px; accent-color:var(--jt-accent,#19d3e6); margin:0; flex:0 0 auto; }

/* ===== Sélecteur de thème FLOTTANT rétractable (bas-droite) =====
   Auto-thémé via les tokens --jt-* → suit le thème actif. z-index:900 :
   au-dessus du contenu mais SOUS les pop-ups .ncp-overlay (9998) pour ne pas masquer les modales. */
.jt-fab { position:fixed; right:20px; bottom:20px; z-index:900; display:flex; flex-direction:column-reverse; align-items:flex-end; gap:10px; font-family:inherit; }
.jt-fab-toggle { display:inline-flex; align-items:center; gap:10px; background:var(--jt-card,#101B2D); border:1px solid var(--jt-border,rgba(255,255,255,.12)); border-radius:999px; padding:7px 14px 7px 8px; box-shadow:0 14px 38px rgba(6,12,26,.32); cursor:pointer; font-family:inherit; font-size:13px; font-weight:700; color:var(--jt-text,#EAF3FB); transition:border-color .15s, box-shadow .15s; }
.jt-fab-toggle:hover { border-color:var(--jt-border-accent,rgba(255,255,255,.28)); box-shadow:0 16px 42px rgba(6,12,26,.4); }
.jt-fab-cur { width:26px; height:26px; border-radius:50%; box-shadow:inset 0 0 0 2px rgba(255,255,255,.35), 0 0 0 1px rgba(0,0,0,.08); }
.jt-fab-chev { display:inline-flex; color:var(--jt-muted,#9DB0C8); transition:transform .18s; }
.jt-fab-chev svg { width:15px; height:15px; }
.jt-fab.open .jt-fab-chev { transform:rotate(180deg); }
.jt-fab-pop { display:none; background:var(--jt-card,#101B2D); border:1px solid var(--jt-border,rgba(255,255,255,.1)); border-radius:16px; box-shadow:0 22px 54px rgba(6,12,26,.42); padding:8px; width:248px; }
.jt-fab.open .jt-fab-pop { display:block; }
.jt-fab-h { font-size:11px; font-weight:700; color:var(--jt-muted,#9DB0C8); text-transform:uppercase; letter-spacing:.04em; padding:6px 8px; }
.jt-fab-list { display:flex; flex-direction:column; gap:2px; max-height:46vh; overflow:auto; }
.jt-fab-opt { display:flex; align-items:center; gap:11px; width:100%; background:transparent; border:0; border-radius:10px; padding:9px 10px; cursor:pointer; font-family:inherit; font-size:13px; font-weight:600; color:var(--jt-muted,#9DB0C8); text-align:left; box-shadow:none; }
.jt-fab-opt:hover { color:var(--jt-text,#fff); background:color-mix(in srgb, var(--jt-accent,#19d3e6) 12%, transparent); }
.jt-fab-opt.on { color:var(--jt-text,#fff); background:color-mix(in srgb, var(--jt-accent,#19d3e6) 18%, transparent); }
.jt-fab-opt .jt-dot { width:20px; height:20px; border-radius:50%; }
.jt-fab-nm { flex:1; min-width:0; }
.jt-fab-chk { display:inline-flex; flex:0 0 auto; color:var(--jt-accent,#19d3e6); opacity:0; }
.jt-fab-opt.on .jt-fab-chk { opacity:1; }
.jt-fab-chk svg { width:17px; height:17px; }
.jt-fab-foot { border-top:1px solid var(--jt-border,rgba(255,255,255,.1)); margin-top:5px; padding-top:7px; }
.jt-fab-all { width:100%; background:transparent; border:0; border-radius:9px; padding:8px 10px; cursor:pointer; font-family:inherit; font-size:12px; font-weight:600; color:var(--jt-muted,#9DB0C8); text-align:center; }
.jt-fab-all:hover { color:var(--jt-accent2,#7FEBFF); }
@media (max-width:560px){ .jt-fab-lbl { display:none; } .jt-fab-pop { width:min(248px, 84vw); } }

/* Factures — gélule de statut cliquable (actions rapides) */
.fx-status-clk { cursor:pointer; transition:filter .12s, box-shadow .12s; }
.fx-status-clk:hover { filter:brightness(1.07); box-shadow:0 0 0 3px rgba(0,0,0,.08); }
.fx-status-car { font-size:.82em; opacity:.85; }

/* ===== Tunnel d'inscription — plus large + couleurs officielles JOOMA ===== */
.login-wrap .signup-tunnel{
  max-width:620px;
  background:linear-gradient(180deg,#E9F8F9 0%,#F5FDFD 24%,#FFFFFF 58%);
  border:1px solid #CDECEF;
  box-shadow:0 34px 90px rgba(12,42,82,.22), 0 0 0 1px rgba(0,184,201,.06);
  overflow:hidden;
}
.login-wrap .signup-tunnel::before{
  content:"";position:absolute;top:0;left:0;right:0;height:6px;
  background:linear-gradient(90deg,#00B8C9 0%,#19D6D6 55%,#30E0E6 100%);
}
.login-wrap .signup-tunnel .signup-brand{padding-top:6px}
.login-wrap .signup-tunnel .signup-tag{color:#0093A3;font-weight:600}
.login-wrap .signup-tunnel .tunnel-h2{color:#0c1a2b}
.login-wrap .signup-tunnel .metier-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.login-wrap .signup-tunnel .metier-card{box-shadow:0 8px 22px rgba(12,42,82,.10)}
.login-wrap .signup-tunnel .metier-card:hover{box-shadow:0 0 0 2px #00B8C9,0 14px 32px rgba(0,184,201,.20)}
@media(max-width:560px){.login-wrap .signup-tunnel .metier-grid{grid-template-columns:1fr}}

/* ===== Logo officiel JOOMA — wordmark aux yeux (Baloo 2, teal + pupille magenta, clignement) ===== */
.jlogo-eyes{display:inline-flex;align-items:center;gap:0;font-family:'Baloo 2',system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:800;line-height:1;letter-spacing:-.01em}
.jlogo-eyes .j{margin-right:-.04em}
.jlogo-eyes .oo{width:.80em;height:.80em;border-radius:50%;display:inline-block;position:relative;margin:0 .015em;background:linear-gradient(145deg,#0bb8c9,#35f2e7);box-shadow:inset -6px -8px 16px rgba(0,48,76,.22);transform-origin:center;animation:joomaBlink 5.4s ease-in-out infinite}
.jlogo-eyes .oo:first-of-type{background:linear-gradient(145deg,#02adc1,#13d1d2)}
.jlogo-eyes .oo::before{content:"";position:absolute;right:18%;top:16%;width:34%;height:34%;border-radius:50%;background:#fff}
.jlogo-eyes .oo::after{content:"";position:absolute;right:21%;top:19%;width:13%;height:13%;border-radius:50%;background:#FF2D7A;box-shadow:0 0 8px rgba(255,45,122,.55)}
.jlogo-eyes.jlogo-color .j,.jlogo-eyes.jlogo-color .m,.jlogo-eyes.jlogo-color .a{color:#0D111C}
.jlogo-eyes.jlogo-light .j,.jlogo-eyes.jlogo-light .m,.jlogo-eyes.jlogo-light .a{color:#fff}
@keyframes joomaBlink{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(.12)}}
.brand-h1 .jlogo-eyes{font-size:40px}
.signup-brand{display:flex;flex-direction:column;align-items:center}
.signup-brand .jlogo-eyes{font-size:36px;margin-bottom:8px}
.appside-brand .jlogo-eyes{font-size:23px}
@media (prefers-reduced-motion: reduce){ .jlogo-eyes .oo{animation:none} }

/* Gélule de statut cliquable — chevron SVG (devis/factures) */
.fx-status-car{display:inline-flex;align-items:center;margin-left:3px;opacity:.8;vertical-align:middle}
.fx-status-car svg{display:block}

/* ============ Centre d'aide / Helpdesk (style Faveo) ============ */
.hd{--hdcard:#fff;--hdcard2:#f2f6fb;--hdbd:#e7edf5;--hdtx:#0e2a52;--hdmut:#6b7a90;--hdacc:#14a4b4;--hdhov:#f0f6fd;color:var(--hdtx);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
.hd-load{padding:26px;color:var(--hdmut)}
.hd-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
@media(max-width:640px){.hd-kpis{grid-template-columns:repeat(2,1fr)}}
.hd-kpi{background:var(--hdcard);border:1px solid var(--hdbd);border-radius:14px;padding:14px 16px}
.hd-kpi-v{font-size:26px;font-weight:800;line-height:1;color:var(--hdtx)}
.hd-kpi-l{font-size:12.5px;color:var(--hdmut);margin-top:4px}
.hd-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.hd-mode{display:inline-flex;gap:4px;background:var(--hdcard2);border:1px solid var(--hdbd);border-radius:11px;padding:4px}
.hd-mode-b{border:0;background:transparent;color:var(--hdmut);font-weight:700;font-size:13.5px;padding:7px 13px;border-radius:8px;cursor:pointer}
.hd-mode-b.on{background:var(--hdcard);color:var(--hdtx);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.hd-search-w{position:relative;display:inline-flex;align-items:center}
.hd-search-ic{position:absolute;left:11px;color:var(--hdmut);display:inline-flex}
.hd-search{border:1px solid var(--hdbd);background:var(--hdcard);color:var(--hdtx);border-radius:10px;padding:9px 12px 9px 34px;font-size:14px;min-width:180px}
.hd-search:focus{outline:none;border-color:var(--hdacc)}
.hd-new{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(135deg,var(--hdacc),color-mix(in srgb,var(--hdacc) 70%,#0a90a0));color:#fff;border:0;border-radius:11px;padding:10px 16px;font-weight:800;font-size:14px;cursor:pointer;box-shadow:0 8px 20px color-mix(in srgb,var(--hdacc) 32%,transparent)}
.hd-new:hover{filter:brightness(1.06)}
.hd-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.hd-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--hdbd);background:var(--hdcard);color:var(--hdtx);font-size:13px;font-weight:600;padding:7px 13px;border-radius:999px;cursor:pointer;transition:.12s}
.hd-chip:hover{border-color:var(--hdacc)}
.hd-chip.on{background:var(--hdacc);border-color:var(--hdacc);color:#fff}
.hd-chip-n{font-size:11px;font-weight:800;background:color-mix(in srgb,currentColor 16%,transparent);border-radius:8px;padding:1px 7px}
.hd-list{display:flex;flex-direction:column;gap:10px}
.hd-empty{background:var(--hdcard);border:1px dashed var(--hdbd);border-radius:14px;padding:26px;text-align:center;color:var(--hdmut)}
.hd-card{display:flex;align-items:stretch;gap:0;width:100%;text-align:left;background:var(--hdcard);border:1px solid var(--hdbd);border-radius:14px;overflow:hidden;cursor:pointer;transition:.14s;font:inherit;padding:0}
.hd-card:hover{border-color:var(--hdacc);box-shadow:0 8px 22px rgba(18,38,63,.09);transform:translateY(-1px)}
.hd-card.unread{border-color:color-mix(in srgb,var(--stat) 55%,var(--hdbd))}
.hd-card-bar{flex:0 0 4px;background:var(--stat,#2563eb)}
.hd-card-main{flex:1;min-width:0;padding:13px 16px}
.hd-card-top{display:flex;align-items:center;gap:10px}
.hd-card-subj{font-weight:800;font-size:15px;color:var(--hdtx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-unread{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;background:#c0392b;color:#fff;border-radius:7px;padding:2px 7px;flex:none}
.hd-card-prev{color:var(--hdmut);font-size:13px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:640px}
.hd-card-meta{display:flex;gap:12px;flex-wrap:wrap;color:var(--hdmut);font-size:12px;margin-top:7px}
.hd-card-org{font-weight:700;color:var(--hdacc)}
.hd-card-side{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:6px;padding:13px 16px;flex:none}
.hd-badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
.hd-bdot{width:7px;height:7px;border-radius:50%}
.hd-prio{border:1px solid transparent}
/* Détail / conversation */
.hd-backbtn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;color:var(--hdmut);font-weight:700;font-size:13.5px;cursor:pointer;padding:4px 0;margin-bottom:10px}
.hd-backbtn:hover{color:var(--hdtx)}
.hd-detail{background:var(--hdcard);border:1px solid var(--hdbd);border-radius:16px;padding:20px 22px}
.hd-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--hdbd)}
.hd-subj{margin:0;font-size:21px;font-weight:800;color:var(--hdtx);line-height:1.2}
.hd-detail-meta{display:flex;gap:12px;flex-wrap:wrap;color:var(--hdmut);font-size:12.5px;margin-top:6px}
.hd-detail-badges{display:flex;gap:8px;flex-wrap:wrap}
.hd-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;padding:14px 0;border-bottom:1px solid var(--hdbd)}
.hd-actl{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--hdmut);font-weight:600}
.hd-sel{border:1px solid var(--hdbd);background:var(--hdcard2);color:var(--hdtx);border-radius:9px;padding:8px 10px;font-size:13.5px}
.hd-act{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--hdbd);background:var(--hdcard2);color:var(--hdtx);border-radius:10px;padding:8px 13px;font-weight:700;font-size:13.5px;cursor:pointer}
.hd-act:hover{border-color:var(--hdacc)}
.hd-thread{display:flex;flex-direction:column;gap:14px;padding:18px 0}
.hd-msg{display:flex;gap:11px;max-width:82%}
.hd-msg.me{flex-direction:row-reverse;margin-left:auto}
.hd-msg-av{flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--hdcard2);border:1px solid var(--hdbd);color:var(--hdmut)}
.hd-msg-av.sup{background:color-mix(in srgb,var(--hdacc) 16%,transparent);border-color:transparent;color:var(--hdacc)}
.hd-bubble{background:var(--hdcard2);border:1px solid var(--hdbd);border-radius:14px;padding:10px 14px;min-width:0}
.hd-msg.me .hd-bubble{background:color-mix(in srgb,var(--hdacc) 12%,transparent);border-color:color-mix(in srgb,var(--hdacc) 30%,transparent)}
.hd-bubble-h{display:flex;gap:10px;justify-content:space-between;align-items:baseline;margin-bottom:4px}
.hd-bubble-h b{font-size:13px;color:var(--hdtx)}
.hd-bubble-h span{font-size:11.5px;color:var(--hdmut);white-space:nowrap}
.hd-bubble-b{font-size:14px;color:var(--hdtx);line-height:1.55;white-space:pre-wrap;word-break:break-word}
.hd-reply{border-top:1px solid var(--hdbd);padding-top:14px}
.hd-reply-ta,.hd-in{width:100%;box-sizing:border-box;border:1px solid var(--hdbd);background:var(--hdcard2);color:var(--hdtx);border-radius:12px;padding:12px 14px;font:inherit;font-size:14px;resize:vertical}
.hd-reply-ta:focus,.hd-in:focus{outline:none;border-color:var(--hdacc)}
.hd-reply-bar{display:flex;align-items:center;gap:10px;margin-top:10px}
.hd-reply-send{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(135deg,var(--hdacc),color-mix(in srgb,var(--hdacc) 70%,#0a90a0));color:#fff;border:0;border-radius:11px;padding:11px 18px;font-weight:800;font-size:14px;cursor:pointer;box-shadow:0 8px 20px color-mix(in srgb,var(--hdacc) 30%,transparent)}
.hd-reply-send:hover{filter:brightness(1.06)}
.hd-reply-send:disabled{opacity:.6;cursor:default}
.hd-field{display:flex;flex-direction:column;gap:5px;margin:12px 0}
.hd-field>span{font-weight:700;font-size:13px;color:var(--hdtx)}

/* ============ Helpdesk SYSOP — tableau de bord agent (maquette 1a/1d) ============ */
.ag{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:#233150}
.ag-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.ag-h1{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-weight:800;font-size:21px;color:#0e2a52;margin:0}
.ag-head-r{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ag-search{border:1px solid #e7edf5;background:#fff;border-radius:9px;padding:9px 13px;font-size:13.5px;min-width:240px;color:#0e2a52}
.ag-search:focus{outline:none;border-color:#14a4b4}
.ag-mode{display:inline-flex;gap:4px;background:#eef2f7;border-radius:9px;padding:3px}
.ag-mode-b{border:0;background:transparent;color:#6b7a90;font-weight:600;font-size:13px;padding:7px 12px;border-radius:7px;cursor:pointer}
.ag-mode-b.on{background:#fff;color:#0e2a52;box-shadow:0 1px 2px rgba(16,27,51,.08)}
.ag-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
@media(max-width:720px){.ag-stats{grid-template-columns:repeat(2,1fr)}}
.ag-stat{background:#fff;border:1px solid #e7edf5;border-radius:16px;padding:16px 18px;box-shadow:0 2px 10px rgba(16,42,82,.06)}
.ag-stat-l{font-size:13px;color:#6b7a90;font-weight:600}
.ag-stat-v{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-weight:800;font-size:26px;color:#0e2a52;line-height:1.1;margin:6px 0 4px}
.ag-stat-s{font-size:11.5px;font-weight:600}
.ag-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.ag-pill{border:1px solid #e7edf5;background:#fff;color:#6b7a90;font-size:12.5px;font-weight:500;padding:7px 13px;border-radius:99px;cursor:pointer;transition:.12s}
.ag-pill:hover{border-color:#14a4b4}
.ag-pill.on{background:#0e2a52;border-color:#0e2a52;color:#fff}
.ag-tbl{background:#fff;border:1px solid #e7edf5;border-radius:16px;overflow:hidden;box-shadow:0 2px 10px rgba(16,42,82,.06)}
.ag-tr{display:grid;grid-template-columns:64px 1fr 150px 118px 108px 148px 84px;align-items:center;gap:12px;padding:13px 18px}
.ag-th{background:#f2f6fb;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#93a1b3;border-bottom:1px solid #eef2f7}
.ag-row{width:100%;text-align:left;background:#fff;border:0;border-bottom:1px solid #eef2f7;cursor:pointer;font:inherit}
.ag-row:hover{background:#f0f6fd}
.ag-row.unread{background:#f5f9ff}
.ag-ref{font-weight:600;color:#14a4b4;font-size:13px}
.ag-subj{min-width:0}
.ag-subj-t{display:block;font-weight:500;font-size:13.5px;color:#0e2a52;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-subj-s{display:block;font-size:11.5px;color:#93a1b3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-cli{font-size:13px;color:#233150;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-pr{display:inline-flex;align-items:center;gap:7px;font-size:12px}
.ag-prdot{width:7px;height:7px;border-radius:50%;flex:none}
.ag-status{display:inline-flex;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:99px;white-space:nowrap}
.ag-agent{display:inline-flex;align-items:center;gap:8px;min-width:0}
.ag-av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:10.5px;font-weight:700;flex:none}
.ag-av.lg{width:42px;height:42px;font-size:14px}
.ag-agent-n{font-size:12.5px;color:#6b7a90;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-sla{font-size:12px;color:#6b7a90;font-weight:600;white-space:nowrap}
.ag-foot{padding:13px 18px;font-size:12.5px;color:#93a1b3}
.ag-empty{padding:26px;text-align:center;color:#93a1b3}
/* Détail 1d */
.ag-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:#0e2a52;border-radius:12px;padding:13px 20px;margin-bottom:16px}
.ag-crumb{display:flex;align-items:center;gap:8px;color:#9db4d4;font-size:12.5px}
.ag-crumb-b{background:transparent;border:0;color:#9db4d4;cursor:pointer;font:inherit;padding:0}
.ag-crumb-b:hover{color:#fff}
.ag-crumb b{color:#fff}
.ag-crumb-sep{color:#6b7a90}
.ag-top-r{display:flex;align-items:center;gap:10px}
.ag-btn-ok{display:inline-flex;align-items:center;gap:6px;background:#2e9e5b;color:#fff;border:0;border-radius:8px;padding:8px 14px;font-weight:600;font-size:13px;cursor:pointer}
.ag-btn-ok:hover{background:#25824b}
.ag-detail{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
@media(max-width:900px){.ag-detail{grid-template-columns:1fr}}
.ag-detail-main{background:#fff;border:1px solid #e7edf5;border-radius:16px;padding:20px 22px;box-shadow:0 2px 10px rgba(16,42,82,.06)}
.ag-dt{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-weight:800;font-size:20px;color:#0e2a52;margin:0}
.ag-dmeta{font-size:12.5px;color:#6b7a90;margin:6px 0 14px}
.ag-thread{display:flex;flex-direction:column;gap:14px;padding-bottom:16px}
.ag-conv{background:#fff;border:1px solid #e7edf5;border-radius:12px;padding:14px 16px}
.ag-conv.agent{border-color:#14a4b4}
.ag-conv-h{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ag-conv-h b{font-size:13.5px;color:#0e2a52}
.ag-conv-t{font-size:11.5px;color:#93a1b3;margin-left:auto}
.ag-conv-b{font-size:13.5px;color:#233150;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.ag-composer{border-top:1px solid #eef2f7;padding-top:14px}
.ag-ctabs{display:flex;gap:8px;margin-bottom:10px}
.ag-ctab{border:0;background:#eef2f7;color:#6b7a90;font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:99px;cursor:pointer}
.ag-ctab.on{background:#EAF0FE;color:#14a4b4}
.ag-ctab.note.on{background:#FFF8E9;color:#7A5E1E}
.ag-ta{width:100%;box-sizing:border-box;border:1px solid #e7edf5;border-radius:10px;padding:12px 14px;font:inherit;font-size:13.5px;min-height:56px;resize:vertical;color:#0e2a52}
.ag-ta.note{background:#FFF8E9;border-color:#E3C77E;border-style:dashed}
.ag-ta:focus{outline:none;border-color:#14a4b4}
.ag-send-bar{display:flex;align-items:center;margin-top:10px}
.ag-send{display:inline-flex;align-items:center;gap:7px;background:#14a4b4;color:#fff;border:0;border-radius:9px;padding:10px 18px;font-weight:600;font-size:13.5px;cursor:pointer}
.ag-send:hover{background:#0e8a99}
.ag-send:disabled{opacity:.6}
.ag-panel{background:#fff;border:1px solid #e7edf5;border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:16px;box-shadow:0 2px 10px rgba(16,42,82,.06)}
.ag-pcard{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid #eef2f7}
.ag-pcard b{font-size:14px;color:#0e2a52}
.ag-pmail{font-size:12px;color:#6b7a90;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.ag-plabel{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#93a1b3;margin-bottom:10px}
.ag-prow{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;color:#6b7a90;padding:6px 0}
.ag-prow-v{font-weight:600;color:#0e2a52;text-align:right}
.ag-psel{border:1px solid #e7edf5;background:#fff;color:#0e2a52;border-radius:8px;padding:5px 8px;font-size:12.5px}
.ag-sla-info{font-size:12.5px;color:#6b7a90;background:#f2f6fb;border-radius:9px;padding:10px 12px}

/* Wizard Coffre — icônes SVG (remplacent les emojis) */
.cfw-tile-ic{color:var(--jt-accent,#0bb4c7)}
.cfw-tile-ic svg{width:24px;height:24px}
.cfw-drop-ic{color:var(--jt-accent,#0bb4c7)}
.cfw-drop-ic svg{width:34px;height:34px}
.cfw-file-ic{color:var(--jt-accent,#0bb4c7);display:inline-flex}
.cfw-file-ic svg{width:18px;height:18px}

/* Helpdesk — bascule de vue + variante chat (1e) */
.ag-vtoggle{display:inline-flex;gap:3px;background:rgba(255,255,255,.08);border-radius:8px;padding:3px}
.ag-vbtn{border:0;background:transparent;color:#c4d3e8;font-size:12px;font-weight:600;padding:5px 11px;border-radius:6px;cursor:pointer}
.ag-vbtn.on{background:#fff;color:#0e2a52}
.agc{background:#fff;border:1px solid #e7edf5;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;min-height:70vh;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
.agc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid #eef2f7}
.agc-head-l{display:flex;align-items:center;gap:14px;min-width:0}
.agc-back{display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;color:#6b7a90;font-weight:600;font-size:13px;cursor:pointer}
.agc-back:hover{color:#0e2a52}
.agc-title{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-weight:600;font-size:17px;color:#0e2a52;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agc-head-r{display:flex;align-items:center;gap:10px}
.agc-head-r .ag-vtoggle{background:#eef2f7}
.agc-head-r .ag-vbtn{color:#6b7a90}
.agc-head-r .ag-vbtn.on{background:#0e2a52;color:#fff}
.agc-chips{display:flex;gap:8px;flex-wrap:wrap;padding:12px 20px;border-bottom:1px solid #eef2f7}
.agc-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:#6b7a90;background:#eef2f7;border-radius:99px;padding:5px 10px}
.agc-chip b{color:#0e2a52}
.agc-chip select{border:0;background:transparent;font:inherit;font-weight:700;color:#0e2a52;cursor:pointer;padding:0}
.agc-zone{flex:1;background:#f2f6fb;padding:22px 26px;display:flex;flex-direction:column;gap:13px;overflow:auto}
.agc-sep{text-align:center;margin:2px 0}
.agc-sep span{display:inline-block;background:#eef2f7;color:#93a1b3;font-size:11.5px;font-weight:600;padding:4px 12px;border-radius:99px}
.agc-row{display:flex}
.agc-row.me{justify-content:flex-end}
.agc-bubble{max-width:62%;background:#fff;border:1px solid #e7edf5;border-radius:14px 14px 14px 4px;padding:10px 14px}
.agc-bubble.me{background:#14a4b4;border-color:#14a4b4;border-radius:14px 14px 4px 14px}
.agc-b-body{font-size:13.5px;line-height:1.55;color:#233150;white-space:pre-wrap;word-break:break-word}
.agc-bubble.me .agc-b-body{color:#fff}
.agc-b-meta{font-size:11px;color:#93a1b3;margin-top:5px}
.agc-bubble.me .agc-b-meta{color:rgba(255,255,255,.75)}
.agc-composer{display:flex;align-items:flex-end;gap:10px;padding:14px 20px;border-top:1px solid #eef2f7}
.agc-input{flex:1;border:1px solid #e7edf5;border-radius:12px;padding:11px 14px;font:inherit;font-size:13.5px;resize:none;max-height:120px;color:#0e2a52}
.agc-input:focus{outline:none;border-color:#14a4b4}
.agc-send{width:44px;height:44px;flex:none;border:0;border-radius:11px;background:#14a4b4;color:#fff;display:grid;place-items:center;cursor:pointer}
.agc-send:hover{background:#0e8a99}
.agc-send svg{width:18px;height:18px}

/* Helpdesk agent — coque avec sidebar (maquette 1a) */
.ag-shell{display:grid;grid-template-columns:224px 1fr;background:#eef2f8;border:1px solid #e7edf5;border-radius:16px;overflow:hidden;min-height:76vh}
@media(max-width:900px){.ag-shell{grid-template-columns:1fr}.ags-side{display:none}}
.ag-main{padding:24px 28px;display:flex;flex-direction:column;gap:18px;min-width:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
.ags-side{background:#0e2a52;padding:20px 14px;display:flex;flex-direction:column}
.ags-brand{display:flex;align-items:center;gap:11px;padding:4px 6px 20px}
.ags-logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#14a4b4,#0e8a99);color:#fff;display:grid;place-items:center;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-weight:800;font-size:20px}
.ags-word{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-weight:800;font-size:21px;letter-spacing:.3px;color:#fff}
.ags-nav{display:flex;flex-direction:column;gap:3px}
.ags-nav-b{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:transparent;border:0;color:#c4d3e8;font-size:14.5px;font-weight:600;padding:11px 14px;border-radius:12px;cursor:pointer;transition:.12s}
.ags-nav-b:hover{background:rgba(255,255,255,.06);color:#fff}
.ags-nav-b.on{background:linear-gradient(135deg,#14a4b4,#1f7bb8);color:#fff;box-shadow:0 6px 16px rgba(20,164,180,.35)}
.ags-nav-ic{display:inline-flex;flex:none}.ags-nav-ic svg{width:18px;height:18px}
.ags-nav-l{flex:1;min-width:0}
.ags-nav-badge{font-size:11px;font-weight:700;background:#e91e63;color:#fff;border-radius:99px;padding:1px 8px}
.ags-nav-b.on .ags-nav-badge{background:#fff;color:#e91e63}
.ags-nav-badge.red{background:#e91e63}
.ags-user{margin-top:auto;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);border-radius:10px;padding:10px}
.ags-uav{width:32px;height:32px;border-radius:50%;background:#6a3fb5;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}
.ags-uname{font-size:12.5px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ags-usub{font-size:11px;color:#9db4d4}
/* tri + pagination */
.ag-sortrow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ag-sort{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:#6b7a90;white-space:nowrap}
.ag-sort-sel{border:1px solid #e7edf5;background:#fff;color:#0e2a52;border-radius:8px;padding:6px 9px;font-size:12.5px;font-weight:600;cursor:pointer}
.ag-pag{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:13px 18px}
.ag-pag-b{display:inline-flex;gap:6px}
.ag-pageb{min-width:32px;height:32px;border:1px solid #e7edf5;background:#fff;color:#6b7a90;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;padding:0 8px}
.ag-pageb:hover:not(:disabled){border-color:#14a4b4;color:#14a4b4}
.ag-pageb.on{background:#0e2a52;border-color:#0e2a52;color:#fff}
.ag-pageb:disabled{opacity:.4;cursor:default}

/* Helpdesk en popup JOOMA : rendu bord-à-bord (le rail sombre touche le bord du panneau) */
.ncp-body.hd-inpopup{padding:0}
.hd-inpopup .ag-shell{min-height:100%;border-radius:0}
.hd-inpopup .hd{padding:18px}

/* Helpdesk v0.1.102 — notes internes, agent assigné, SLA */
.ag-note{background:#FFF7E6;border:1px solid #F3D98A;border-left:3px solid #E0A82E;border-radius:10px;padding:10px 12px;margin:2px 0}
.ag-note-h{display:flex;align-items:center;gap:8px;font-size:12px;color:#8A6D1E;margin-bottom:4px}
.ag-note-h b{color:#6B5310;font-weight:600}
.ag-note-tag{background:#E0A82E;color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;padding:2px 7px;border-radius:999px}
.ag-note-h .ag-conv-t{margin-left:auto;color:#B79445;font-weight:500}
.ag-note-b{color:#5A481A;font-size:13.5px;line-height:1.5;white-space:pre-wrap}
.ag-assg{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:#2A3350}
.ag-assg-b{border:1px solid #14a4b4;background:#14a4b4;color:#fff;border-radius:8px;padding:4px 10px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.ag-assg-b:hover{background:#0e8a99;border-color:#0e8a99}
.ag-assg-b.ghost{background:#fff;color:#5A6B8C;border-color:#e7edf5}
.ag-assg-b.ghost:hover{border-color:#D64545;color:#D64545}
.ag-prow-assg .ag-prow-v{min-width:0}
.ag-sla-pill{display:inline-block;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px}
.ag-sla-sub{display:block;font-size:11.5px;color:#8A93A8;margin-top:3px;font-weight:500}

/* Pastille pulsante — notification nouvelles demandes helpdesk (widget cockpit SYSOP) */
@keyframes hdpulse { 0% { box-shadow: 0 0 0 0 rgba(233,30,99,.55); } 70% { box-shadow: 0 0 0 8px rgba(233,30,99,0); } 100% { box-shadow: 0 0 0 0 rgba(233,30,99,0); } }

/* Cockpit topbar — cloche en bulle (icône seule, sans le mot « Alertes ») */
.alerts-btn.alerts-iconly{width:38px;height:38px;padding:0;gap:0;justify-content:center;border-radius:50%;position:relative;flex:0 0 auto}
.alerts-btn.alerts-iconly .bell-badge{position:absolute;top:-4px;right:-4px}
/* « Ajouter un widget » en tête de la colonne de droite du cockpit */
.jck2 .col .jck-side-addw{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:0;border-radius:14px;padding:12px 16px;font-weight:700;font-size:13.5px;cursor:pointer;background:linear-gradient(135deg,#17c4dc,#1391bf);color:#fff;box-shadow:0 8px 20px rgba(23,196,220,.32);transition:filter .15s,transform .12s}
.jck2 .col .jck-side-addw:hover{filter:brightness(1.06);transform:translateY(-1px)}
.jck2 .col .jck-side-addw svg{width:16px;height:16px;stroke:currentColor}

/* Cockpit — barre de widgets du HAUT (miroir de la barre du bas) */
.jck2 .topwidgets { margin-top: 0 !important; margin-bottom: 16px !important; }
.jck2.hide-top .topwidgets { display: none !important; }
/* Info-bulle vers le BAS (la barre est en haut) */
.jck2 .topwidgets .wdg .wtip { top: calc(100% + 9px); bottom: auto; transform: translateX(-50%) translateY(-5px); }
.jck2 .topwidgets .wdg:hover .wtip { transform: translateX(-50%) translateY(0); }
.jck2 .topwidgets .wdg .wtip::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #0e2240; }
/* Bibliothèque — filtre par position */
.jck2-page .lib-filter { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 16px; }
.jck2-page .lib-fb { border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #c4d3e8; font-weight: 600; font-size: 12.5px; padding: 7px 14px; border-radius: 999px; cursor: pointer; transition: .15s; }
.jck2-page .lib-fb:hover { border-color: rgba(103,231,255,.4); color: #eaf3fb; }
.jck2-page .lib-fb.on { background: linear-gradient(135deg, #17c4dc, #1391bf); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(23,196,220,.3); }
/* 3 boutons empilés → cartes un peu plus hautes, on garde l'alignement */
.jck2-page .lib-card .addtop { border: 1px solid #dbe3ec; background: #fff; color: #46566b; font-weight: 600; border-radius: 9px; padding: 5px 10px; cursor: pointer; font-size: 12px; white-space: nowrap; }
.jck2-page .lib-card .addtop:hover { border-color: #19d3e6; color: #0bb4c7; }
.jck2-page .lib-card .addtop.in { background: #eef2f7; color: #6b7787; }
.jck2-page .lib-card .addtop.in:hover { background: #fdecea; color: #c0392b; border-color: #fdecea; }

/* ===== Cockpit — mode GRILLE de cartes RESPONSIVE (Auto au-delà de 8 tuiles, ou au choix) ===== */
.jck2.grid-core .cockpit { height: auto; min-height: 340px; overflow: visible; background: transparent; border: 0; box-shadow: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 16px; padding: 8px 6px 26px; align-content: start; }
.jck2.grid-core .cockpit .core, .jck2.grid-core .cockpit .halo, .jck2.grid-core .cockpit .links, .jck2.grid-core .cockpit .jck2-radar { display: none !important; }
.jck2.grid-core .cockpit::before { display: none !important; }
.jck2.grid-core .mod { position: static !important; width: auto !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; transform: none !important; }
.jck2.grid-core .mod:hover { transform: translateY(-4px) !important; }

/* ============================================================================
   PARITÉ THÈME DES POPUPS (demande BÂTISSEUR v0.1.107)
   Un module thémé ouvert en POPUP (tuile cockpit) doit être aussi sombre/thémé
   que via le menu de gauche. openView pose déjà body.theme-<t> pour la popup ;
   ces variables --jt-* sont valables sur <body> → on style .ncp-* avec.
   On EXCLUT `classique` (thème par défaut) pour ne rien changer aux popups
   habituelles : seul un module explicitement thémé (cuivre, cyan, indigo,
   sable, graphite, midnight, discord — ventes, agenda, contacts, devis,
   factures, produits, travaux…) reçoit son habillage.
   ========================================================================== */
body.jt-theme:not(.theme-classique) .ncp-overlay { background: rgba(2,6,18,.68) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; }
body.jt-theme:not(.theme-classique) .ncp-panel { background: var(--jt-panel) !important; border: 1px solid var(--jt-border) !important; color: var(--jt-text) !important; box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 40px color-mix(in srgb, var(--jt-accent) 14%, transparent) !important; }
body.jt-theme:not(.theme-classique) .ncp-head { background: var(--jt-card) !important; border-bottom: 1px solid var(--jt-border) !important; }
body.jt-theme:not(.theme-classique) .ncp-title { color: var(--jt-text) !important; }
body.jt-theme:not(.theme-classique) .ncp-close, body.jt-theme:not(.theme-classique) .ncp-head button { background: color-mix(in srgb, var(--jt-text) 7%, transparent) !important; color: var(--jt-text) !important; border: 1px solid var(--jt-border) !important; }
body.jt-theme:not(.theme-classique) .ncp-close:hover, body.jt-theme:not(.theme-classique) .ncp-head button:hover { background: color-mix(in srgb, var(--jt-accent) 22%, transparent) !important; color: var(--jt-accent2) !important; }
body.jt-theme:not(.theme-classique) .ncp-body { color: var(--jt-text) !important; }
body.jt-theme:not(.theme-classique) .ncp-body h1, body.jt-theme:not(.theme-classique) .ncp-body h2, body.jt-theme:not(.theme-classique) .ncp-body h3, body.jt-theme:not(.theme-classique) .ncp-body h4, body.jt-theme:not(.theme-classique) .ncp-body b, body.jt-theme:not(.theme-classique) .ncp-body strong { color: var(--jt-text) !important; }
body.jt-theme:not(.theme-classique) .ncp-body .card, body.jt-theme:not(.theme-classique) .ncp-body .nc-tile, body.jt-theme:not(.theme-classique) .ncp-body .coupon-card { background: var(--jt-card) !important; border: 1px solid var(--jt-border) !important; color: var(--jt-text) !important; box-shadow: none !important; }
body.jt-theme:not(.theme-classique) .ncp-body .card:hover, body.jt-theme:not(.theme-classique) .ncp-body .nc-tile:hover { border-color: var(--jt-border-accent) !important; }
body.jt-theme:not(.theme-classique) .ncp-body .card svg, body.jt-theme:not(.theme-classique) .ncp-body .nc-tile svg, body.jt-theme:not(.theme-classique) .ncp-body .cat-icon svg { stroke: var(--jt-accent) !important; color: var(--jt-accent) !important; }
body.jt-theme:not(.theme-classique) .ncp-body select, body.jt-theme:not(.theme-classique) .ncp-body input, body.jt-theme:not(.theme-classique) .ncp-body textarea, body.jt-theme:not(.theme-classique) .ncp-body .field { background: var(--jt-card2) !important; color: var(--jt-text) !important; border: 1px solid var(--jt-border) !important; }
body.jt-theme:not(.theme-classique) .ncp-body .btn.primary, body.jt-theme:not(.theme-classique) .ncp-body button.primary { background: var(--jt-accent) !important; color: var(--jt-on) !important; border: 0 !important; }
body.jt-theme:not(.theme-classique) .ncp-body .btn.ghost, body.jt-theme:not(.theme-classique) .ncp-body .btn.light { background: color-mix(in srgb, var(--jt-text) 6%, transparent) !important; color: var(--jt-accent2) !important; border: 1px solid var(--jt-border) !important; }
body.jt-theme:not(.theme-classique) .ncp-body .btn:not(.primary), body.jt-theme:not(.theme-classique) .ncp-body button:not(.primary):not(.ncp-close):not(.ncp-fs) { background: color-mix(in srgb, var(--jt-text) 7%, transparent) !important; color: var(--jt-accent2) !important; border: 1px solid var(--jt-border) !important; }
body.jt-theme:not(.theme-classique) .ncp-body .btn:not(.primary):hover, body.jt-theme:not(.theme-classique) .ncp-body button:not(.primary):not(.ncp-close):not(.ncp-fs):hover { background: color-mix(in srgb, var(--jt-accent) 18%, transparent) !important; }
body.jt-theme:not(.theme-classique) .ncp-body a { color: var(--jt-accent2) !important; }
body.jt-theme:not(.theme-classique) .ncp-body .help, body.jt-theme:not(.theme-classique) .ncp-body .sub, body.jt-theme:not(.theme-classique) .ncp-body .muted { color: var(--jt-muted) !important; }
body.jt-theme:not(.theme-classique) .ncp-body table, body.jt-theme:not(.theme-classique) .ncp-body td, body.jt-theme:not(.theme-classique) .ncp-body th { background: transparent !important; color: var(--jt-text) !important; border-color: var(--jt-border) !important; }
body.jt-theme:not(.theme-classique) .ncp-body th { color: var(--jt-muted) !important; }
body.jt-theme:not(.theme-classique) .ncp-body .notice.info { background: color-mix(in srgb, var(--jt-accent) 9%, transparent) !important; border-color: color-mix(in srgb, var(--jt-accent) 26%, transparent) !important; color: var(--jt-accent2) !important; }
body.jt-theme:not(.theme-classique) .ncp-body .notice.success, body.jt-theme:not(.theme-classique) .ncp-body .pill.ok { color: var(--jt-ok) !important; }
body.jt-theme:not(.theme-classique) .ncp-body .notice.error { color: var(--jt-danger) !important; background: color-mix(in srgb, var(--jt-danger) 10%, transparent) !important; border-color: color-mix(in srgb, var(--jt-danger) 30%, transparent) !important; }
/* Titres foncés hérités de styles inline (#16223e etc.) → lisibles sur fond thémé */
body.jt-theme:not(.theme-classique) .ncp-panel { --nc-navy: var(--jt-text) !important; --nc-ink: var(--jt-text) !important; --nc-title: var(--jt-text) !important; --nc-text: var(--jt-text) !important; --nc-heading: var(--jt-text) !important; }

/* Sélecteur de thème dans l'en-tête des pages SYSOP (pageHead) */
.nc-pagehead-jt { position: relative; padding-right: 200px; }
.nc-pagehead-jt > .jt-switch { position: absolute; top: 0; right: 0; z-index: 5; }
@media (max-width: 680px) { .nc-pagehead-jt { padding-right: 0; } .nc-pagehead-jt > .jt-switch { position: static; margin-top: 10px; } }

/* ===== Surveillance SYSOP : app dégradée / injoignable → alerte visuelle ROUGE ===== */
#jooma-down-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 100000; background: linear-gradient(90deg,#b3261e,#e53e3e); color: #fff; font-weight: 800; text-align: center; padding: 9px 14px; font-size: 13.5px; letter-spacing: .02em; box-shadow: 0 3px 14px rgba(0,0,0,.35); animation: joomaDownBlink 1.4s ease-in-out infinite; }
@keyframes joomaDownBlink { 0%,100% { opacity: 1; } 50% { opacity: .78; } }
body.jooma-down .appshell { outline: 3px solid #e53e3e; outline-offset: -3px; }
body.jooma-down .ncp-panel { outline: 2px solid #e53e3e !important; }
body.jooma-down .appside, body.jooma-down .apptop { box-shadow: inset 0 0 0 2px rgba(229,62,62,.55); }

/* ============================================================================
   ACCUEIL JOOMA (page éditoriale /accueil, hors Santé) — host-thémé via --jt-*
   Scopé .acc2, rendu dans .appshell.jt-generic .main → les tokens --jt-* résolvent.
   ============================================================================ */
.acc2 { --a: var(--jt-accent,#28d6ff); --a2: var(--jt-accent2,#5cebff); color: var(--jt-text,#eaf1fb); }
.acc2 .acc2-skel { padding:40px; text-align:center; color: var(--jt-muted); }
.acc2-head { display:flex; align-items:flex-start; gap:20px; flex-wrap:wrap; margin-bottom:20px; }
.acc2-head h1 { font-size:29px; font-weight:800; margin:0 0 4px; letter-spacing:-.3px; color:var(--jt-text) !important; }
.acc2-date { color:var(--jt-muted); font-size:14px; font-weight:600; }
.acc2-stats { margin-left:auto; display:flex; gap:4px; background:color-mix(in srgb,var(--jt-card) 70%,transparent); border:1px solid var(--jt-border); border-radius:14px; padding:7px; flex-wrap:wrap; }
.acc2-stat { display:flex; align-items:center; gap:9px; padding:6px 13px; border-radius:10px; }
.acc2-stat + .acc2-stat { border-left:1px solid var(--jt-border); }
.acc2-stat-ic { width:26px; height:26px; display:grid; place-items:center; border-radius:8px; background:color-mix(in srgb,var(--a) 18%,transparent); color:var(--a2); flex:0 0 auto; }
.acc2-stat-ic svg { width:15px; height:15px; }
.acc2-stat b { font-size:12.5px; font-weight:700; display:block; line-height:1.1; color:var(--jt-text); }
.acc2-stat span { font-size:11.5px; color:var(--jt-muted); }
.acc2-stat span.ok { color:var(--jt-ok,#34d399); }
.acc2-msg { display:flex; align-items:center; gap:16px; background:linear-gradient(100deg, color-mix(in srgb,var(--a) 14%, var(--jt-card)) 0%, var(--jt-card) 55%); border:1px solid var(--jt-border); border-radius:16px; padding:17px 22px; margin-bottom:24px; }
.acc2-msg-ic { width:46px; height:46px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center; background:color-mix(in srgb,var(--a) 22%,transparent); color:var(--a2); }
.acc2-msg-ic svg { width:24px; height:24px; }
.acc2-msg h3 { margin:0; font-size:17px; color:var(--a2) !important; font-weight:800; }
.acc2-msg p { margin:2px 0 0; color:var(--jt-muted); font-size:13.5px; }
.acc2-msg.lvl-success { background:linear-gradient(100deg, color-mix(in srgb,var(--jt-ok,#34d399) 16%, var(--jt-card)), var(--jt-card) 55%); }
.acc2-msg.lvl-warn .acc2-msg-ic, .acc2-msg.lvl-warn h3 { color:var(--jt-accent2); }
.acc2-msg.lvl-urgent { background:linear-gradient(100deg, color-mix(in srgb,var(--jt-danger,#e5544b) 16%, var(--jt-card)), var(--jt-card) 55%); }
.acc2-msg.lvl-urgent h3 { color:var(--jt-danger,#e5544b) !important; }
.acc2-sec { display:flex; align-items:center; gap:10px; margin:0 2px 13px; }
.acc2-sec h2 { font-size:19px; font-weight:800; margin:0; color:var(--jt-text) !important; }
.acc2-lnk { margin-left:auto; color:var(--a2); font-size:13px; font-weight:700; cursor:pointer; }
.acc2-acts { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.acc2-act { position:relative; min-height:128px; border-radius:16px; padding:18px; border:1px solid var(--jt-border); display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; cursor:pointer; transition:.15s; }
.acc2-act:hover { transform:translateY(-2px); border-color:color-mix(in srgb,#fff 26%,transparent); }
.acc2-act::before { content:""; position:absolute; inset:0; opacity:.92; z-index:0; }
.acc2-act.tone-blue::before   { background:linear-gradient(140deg,#123f74,#0d2244); }
.acc2-act.tone-green::before  { background:linear-gradient(140deg,#12523f,#0c2e26); }
.acc2-act.tone-purple::before { background:linear-gradient(140deg,#3a2b6b,#1e1740); }
.acc2-act.tone-gold::before   { background:linear-gradient(140deg,#7a4d12,#3a2708); }
.acc2-act-illu { position:absolute; top:16px; left:18px; width:50px; height:50px; border-radius:14px; display:grid; place-items:center; z-index:1; }
.acc2-act-illu svg { width:28px; height:28px; }
.acc2-act.tone-blue .acc2-act-illu   { background:rgba(58,140,255,.22); color:#7fb6ff; }
.acc2-act.tone-green .acc2-act-illu  { background:rgba(52,211,153,.22); color:#7ff0c2; }
.acc2-act.tone-purple .acc2-act-illu { background:rgba(139,120,240,.24); color:#c3b8ff; }
.acc2-act.tone-gold .acc2-act-illu   { background:rgba(246,183,55,.22); color:#ffd98a; }
.acc2-act-t { position:relative; z-index:1; font-size:16.5px; font-weight:800; line-height:1.15; color:#fff !important; text-shadow:0 1px 8px rgba(0,0,0,.4); }
.acc2-act-arw { position:absolute; right:16px; bottom:16px; z-index:1; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.16); display:grid; place-items:center; color:#fff; }
.acc2-act-arw svg { width:16px; height:16px; }
.acc2-grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-bottom:16px; }
.acc2-grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:16px; }
.acc2-pan { background:var(--jt-card) !important; border:1px solid var(--jt-border); border-radius:16px; padding:15px 17px; }
.acc2-pan-h { display:flex; align-items:center; gap:8px; margin:0 0 11px; }
.acc2-pan-ic { width:20px; height:20px; color:var(--a2); flex:0 0 auto; }
.acc2-pan-ic svg { width:20px; height:20px; }
.acc2-pan-ttl { font-size:14.5px; font-weight:800; color:var(--jt-text); }
.acc2-pan-lnk { margin-left:auto; color:var(--a2); font-size:12px; font-weight:700; cursor:pointer; }
.acc2-pan-foot { margin-top:10px; color:var(--a2); font-size:12px; font-weight:700; cursor:pointer; display:inline-block; }
.acc2-th { width:38px; height:38px; flex:0 0 auto; border-radius:10px; display:grid; place-items:center; background:var(--jt-card2); color:var(--a2); }
.acc2-th svg { width:19px; height:19px; }
.acc2-tt { font-size:12.8px; font-weight:700; line-height:1.3; color:var(--jt-text); }
.acc2-ds { font-size:11.5px; color:var(--jt-muted); margin-top:2px; }
.acc2-mt { font-size:11px; color:var(--jt-muted); margin-top:4px; }
.acc2-news-i, .acc2-store-i, .acc2-blog-i { display:flex; gap:11px; align-items:center; padding:9px 0; border-bottom:1px solid var(--jt-border); }
.acc2-news-i { align-items:flex-start; }
.acc2-news-i:last-child, .acc2-store-i:last-child, .acc2-blog-i:last-child { border-bottom:0; }
.acc2-store-bd { flex:1; min-width:0; }
.acc2-badge { display:inline-block; font-size:9.5px; font-weight:800; letter-spacing:.4px; padding:2px 7px; border-radius:6px; margin-bottom:3px; text-transform:uppercase; }
.acc2-badge.b-new { background:rgba(52,211,153,.16); color:#4fe0a6; }
.acc2-badge.b-promo { background:rgba(246,120,120,.16); color:#ff9a9a; }
.acc2-badge.b-info { background:rgba(58,140,255,.16); color:#8bbaff; }
.acc2-badge.b-reco { background:rgba(246,183,55,.16); color:#ffcf7a; }
.acc2-badge.b-maint { background:rgba(160,120,240,.16); color:#c3b0ff; }
.acc2-badge.b-urgent { background:rgba(246,120,120,.2); color:#ff9a9a; }
.acc2-pill { font-size:10px; font-weight:800; padding:3px 9px; border-radius:20px; white-space:nowrap; }
.acc2-pill.p-off { background:rgba(246,120,120,.18); color:#ff9a9a; }
.acc2-pill.p-new { background:rgba(52,211,153,.16); color:#4fe0a6; }
.acc2-pill.p-reco { background:rgba(246,183,55,.16); color:#ffcf7a; }
.acc2-blog-im { width:64px; height:44px; border-radius:10px; flex:0 0 auto; background:linear-gradient(135deg, color-mix(in srgb,var(--a) 40%, #16324f), #16324f); }
.acc2-today { display:flex; gap:14px; align-items:center; }
.acc2-today-list { flex:1; display:flex; flex-direction:column; gap:9px; }
.acc2-today-row { display:flex; align-items:center; gap:10px; }
.acc2-today-n { width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-weight:800; font-size:13px; flex:0 0 auto; }
.acc2-today-n.n-blue { background:rgba(58,140,255,.16); color:#8bbaff; }
.acc2-today-n.n-green { background:rgba(52,211,153,.16); color:#4fe0a6; }
.acc2-today-n.n-red { background:rgba(246,120,120,.16); color:#ff9a9a; }
.acc2-today-lab { font-size:12px; color:var(--jt-muted); line-height:1.15; }
.acc2-today-lab b { color:var(--jt-text); font-weight:700; }
.acc2-today-empty { display:flex; gap:11px; align-items:center; padding:6px 0; }
.acc2-donut { width:96px; flex:0 0 auto; text-align:center; }
.acc2-ring { width:86px; height:86px; border-radius:50%; margin:0 auto; display:grid; place-items:center; background:conic-gradient(var(--a) 0 var(--pct,75%), color-mix(in srgb,var(--jt-muted) 30%, transparent) var(--pct,75%) 100%); }
.acc2-ring-in { width:64px; height:64px; border-radius:50%; background:var(--jt-card); display:grid; place-items:center; font-weight:800; font-size:16px; color:var(--jt-text); }
.acc2-donut-cap { font-size:11px; color:var(--jt-muted); margin-top:6px; }
.acc2-donut-cap b { color:var(--jt-text); display:block; font-size:12px; }
.acc2-tip { font-size:12.5px; color:var(--jt-muted); line-height:1.5; margin:0 0 10px; }
.acc2-disco { display:flex; gap:12px; align-items:center; }
.acc2-disco-ph { width:76px; height:94px; border-radius:12px; flex:0 0 auto; background:linear-gradient(160deg,#1a2c44,#0e1c30); display:grid; place-items:end center; overflow:hidden; }
.acc2-disco-ph svg { width:64px; height:64px; color:color-mix(in srgb,var(--a) 60%, #9fb2cc); }
.acc2-disco h4 { margin:0; font-size:16px; font-weight:800; color:var(--jt-text); }
.acc2-disco p { margin:4px 0 10px; font-size:12px; color:var(--jt-muted); line-height:1.45; }
.acc2-btn { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; padding:8px 14px; border-radius:10px; background:linear-gradient(135deg,var(--a),var(--a2)); color:var(--jt-on,#04121b); border:0; cursor:pointer; }
.acc2-btn.ghost { background:transparent; border:1px solid var(--jt-border); color:var(--jt-text); }
.acc2-commu { display:flex; gap:14px; align-items:center; }
.acc2-commu-ic { width:60px; height:60px; flex:0 0 auto; border-radius:16px; display:grid; place-items:center; background:color-mix(in srgb,var(--a) 16%,transparent); color:var(--a2); }
.acc2-commu-ic svg { width:30px; height:30px; }
.acc2-commu-big { font-size:29px; font-weight:800; line-height:1; color:var(--jt-text); }
.acc2-commu-ctxt { font-size:15px; font-weight:800; line-height:1.25; color:var(--jt-text); }
.acc2-commu-sub { font-size:11.5px; color:var(--jt-muted); margin-top:4px; line-height:1.35; }
.acc2-commu-thx { font-size:12px; font-weight:700; margin-top:6px; color:var(--jt-text); }
.acc2-quote { display:flex; align-items:center; gap:16px; background:var(--jt-card) !important; border:1px solid var(--jt-border); border-radius:16px; padding:15px 22px; margin-top:4px; }
.acc2-qm { font-size:38px; color:color-mix(in srgb,var(--a) 60%, var(--jt-muted)); font-family:Georgia,serif; line-height:0; margin-top:14px; }
.acc2-qt { font-size:14px; font-style:italic; color:var(--jt-text); }
.acc2-qa { font-size:12px; color:var(--a2); font-weight:700; margin-top:3px; }
.acc2-quote .acc2-btn { margin-left:auto; }
@media (max-width:1050px){ .acc2-acts, .acc2-grid4 { grid-template-columns:repeat(2,1fr); } .acc2-grid3 { grid-template-columns:1fr; } .acc2-stats { margin-left:0; } }
@media (max-width:600px){ .acc2-acts, .acc2-grid4 { grid-template-columns:1fr; } }

/* ============ SYSOP — Accueil JOOMA (CMS éditorial) — host-thémé via --jt-* ============ */
.appshell.jt-generic .main .hcms-head { display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.hcms-sub { color:var(--jt-muted); font-size:13px; margin-top:4px; max-width:640px; }
.hcms-actions { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.hcms-dash { display:grid; grid-template-columns:repeat(8,1fr); gap:10px; margin-bottom:16px; }
.hcms-kpi { background:var(--jt-card); border:1px solid var(--jt-border); border-radius:12px; padding:11px 12px; }
.hcms-kpi-n { font-size:20px; font-weight:800; color:var(--jt-text); }
.hcms-kpi-l { font-size:11px; color:var(--jt-muted); margin-top:2px; }
.hcms-kpi.tone-ok .hcms-kpi-n { color:var(--jt-ok,#34d399); }
.hcms-kpi.tone-warn .hcms-kpi-n { color:var(--jt-accent2); }
.hcms-kpi.tone-accent .hcms-kpi-n { color:var(--jt-accent); }
.hcms-wrap { display:grid; grid-template-columns:236px 1fr; gap:16px; align-items:start; }
.hcms-side { background:var(--jt-card); border:1px solid var(--jt-border); border-radius:14px; padding:8px; }
.hcms-nav { display:flex; flex-direction:column; gap:2px; }
.hcms-navi { display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:0; background:transparent; color:var(--jt-muted); font-size:13px; font-weight:600; padding:9px 11px; border-radius:9px; cursor:pointer; }
.hcms-navi:hover { background:var(--jt-hover); color:var(--jt-text); }
.hcms-navi.on { background:color-mix(in srgb,var(--jt-accent) 16%,transparent); color:var(--jt-text); }
.hcms-navi-ic { width:18px; height:18px; flex:0 0 auto; color:var(--jt-accent2); }
.hcms-navi-ic svg { width:18px; height:18px; }
.hcms-body { min-width:0; }
.hcms-blk-h { display:flex; align-items:center; gap:10px; margin:0 2px 12px; }
.hcms-blk-h h3 { margin:0; font-size:16px; font-weight:800; color:var(--jt-text) !important; }
.hcms-list { display:flex; flex-direction:column; gap:8px; }
.hcms-item { display:flex; align-items:center; gap:12px; background:var(--jt-card); border:1px solid var(--jt-border); border-radius:12px; padding:10px 12px; }
.hcms-ord { display:flex; flex-direction:column; gap:2px; }
.hcms-ordb { width:22px; height:16px; border:1px solid var(--jt-border); background:var(--jt-card2); color:var(--jt-muted); border-radius:5px; cursor:pointer; font-size:9px; line-height:1; padding:0; }
.hcms-ordb:disabled { opacity:.35; cursor:default; }
.hcms-item-ic { width:36px; height:36px; flex:0 0 auto; border-radius:9px; display:grid; place-items:center; background:var(--jt-card2); color:var(--jt-accent2); }
.hcms-item-ic svg { width:18px; height:18px; }
.hcms-item-bd { flex:1; min-width:0; }
.hcms-item-t { font-size:13px; font-weight:700; color:var(--jt-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hcms-item-m { font-size:11.5px; color:var(--jt-muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hcms-st { font-size:10.5px; font-weight:800; padding:3px 9px; border-radius:20px; white-space:nowrap; }
.hcms-st.st-ok { background:rgba(52,211,153,.16); color:#4fe0a6; }
.hcms-st.st-muted { background:color-mix(in srgb,var(--jt-muted) 20%,transparent); color:var(--jt-muted); }
.hcms-st.st-accent { background:color-mix(in srgb,var(--jt-accent) 18%,transparent); color:var(--jt-accent2); }
.hcms-st.st-danger { background:rgba(246,120,120,.16); color:#ff9a9a; }
.hcms-item-ops { display:flex; gap:4px; }
.hcms-op { width:28px; height:28px; border:1px solid var(--jt-border); background:var(--jt-card2); color:var(--jt-muted); border-radius:8px; cursor:pointer; font-size:13px; }
.hcms-op:hover { border-color:var(--jt-border-accent); color:var(--jt-text); }
.hcms-op.danger:hover { color:var(--jt-danger,#e5544b); border-color:var(--jt-danger,#e5544b); }
.hcms-empty { color:var(--jt-muted); font-size:13px; padding:24px; text-align:center; border:1px dashed var(--jt-border); border-radius:12px; }
.hcms-form { display:flex; flex-direction:column; gap:12px; max-width:720px; }
.hcms-f { display:flex; flex-direction:column; gap:5px; }
.hcms-f > span { font-size:12px; font-weight:700; color:var(--jt-muted); }
.hcms-mods { display:flex; flex-wrap:wrap; gap:10px 16px; }
.hcms-mod { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--jt-text); }
.hcms-mod.locked { color:var(--jt-muted); opacity:.85; }
.hcms-note { font-size:12px; color:var(--jt-muted); background:color-mix(in srgb,var(--jt-accent) 8%,transparent); border:1px solid var(--jt-border); border-radius:10px; padding:9px 12px; line-height:1.45; }
.hcms-preview-frame { border:1px solid var(--jt-border); border-radius:14px; background:var(--jt-card2); min-height:180px; transition:width .2s; }
@media (max-width:1100px){ .hcms-dash { grid-template-columns:repeat(4,1fr); } .hcms-wrap { grid-template-columns:1fr; } }

/* ============ Éditeur WYSIWYG maison (.wy) + Blog popup (.blogpost/.bloglist) ============ */
.wy { border:1px solid var(--jt-border,#d7dee8); border-radius:10px; overflow:hidden; background:var(--jt-card2,#fff); }
.wy-bar { display:flex; flex-wrap:wrap; gap:3px; padding:6px; border-bottom:1px solid var(--jt-border,#e6ebf2); background:color-mix(in srgb, var(--jt-text,#000) 4%, var(--jt-card2,#fff)); }
.wy-b { min-width:30px; height:28px; padding:0 8px; border:1px solid var(--jt-border,#d7dee8); background:var(--jt-card,#fff); color:var(--jt-text,#1f2733); border-radius:7px; cursor:pointer; font-size:12.5px; font-weight:700; line-height:1; }
.wy-b:hover { border-color:var(--jt-border-accent,#19d3e6); color:var(--jt-accent2,#0e7c86); }
.wy-area { min-height:180px; max-height:420px; overflow:auto; padding:12px 14px; font-size:14px; line-height:1.6; color:var(--jt-text,#1f2733); outline:none; }
.wy-area:focus { box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--jt-accent,#19d3e6) 30%, transparent); }
.wy-area p { margin:0 0 10px; } .wy-area h2 { font-size:19px; margin:14px 0 8px; } .wy-area h3 { font-size:16px; margin:12px 0 6px; }
.wy-area ul, .wy-area ol { margin:0 0 10px; padding-left:22px; } .wy-area blockquote { margin:10px 0; padding:6px 14px; border-left:3px solid var(--jt-accent,#19d3e6); color:var(--jt-muted,#64748b); }
.wy-area a { color:var(--jt-accent2,#0e7c86); }
/* Article de blog en popup */
.blogpost { }
.blogpost-hero { height:230px; background-size:cover; background-position:center; background-color:color-mix(in srgb,var(--jt-accent,#19d3e6) 22%, #16324f); }
.blogpost-in { padding:22px 26px 30px; max-width:760px; margin:0 auto; }
.blogpost-meta { font-size:12.5px; color:var(--jt-muted,#64748b) !important; font-weight:700; text-transform:uppercase; letter-spacing:.4px; margin-bottom:8px; }
.blogpost-t { font-size:27px; font-weight:800; margin:0 0 16px; color:var(--jt-text,#16223e) !important; -webkit-text-fill-color:var(--jt-text,#16223e) !important; line-height:1.2; }
.blogpost-body { font-size:15px; line-height:1.75; color:var(--jt-text,#28324a) !important; }
/* Le contenu est injecté en HTML dans une popup thémée : on FORCE les couleurs du thème sur tous
   les éléments de texte (sinon le « muted » du conteneur .ncp-body les rend illisibles en thème sombre). */
.blogpost-body p, .blogpost-body li, .blogpost-body h2, .blogpost-body h3, .blogpost-body h4, .blogpost-body strong, .blogpost-body b, .blogpost-body em, .blogpost-body u, .blogpost-body span, .blogpost-body div { color:var(--jt-text,#28324a) !important; -webkit-text-fill-color:var(--jt-text,#28324a) !important; }
.blogpost-body p { margin:0 0 14px; } .blogpost-body h2 { font-size:20px; margin:22px 0 10px; } .blogpost-body h3 { font-size:17px; margin:18px 0 8px; }
.blogpost-body ul, .blogpost-body ol { margin:0 0 14px; padding-left:24px; } .blogpost-body li { margin:4px 0; }
.blogpost-body blockquote { margin:16px 0; padding:8px 16px; border-left:3px solid var(--jt-accent,#19d3e6); color:var(--jt-muted,#64748b) !important; -webkit-text-fill-color:var(--jt-muted,#64748b) !important; font-style:italic; }
.blogpost-body img { max-width:100%; border-radius:12px; } .blogpost-body a, .blogpost-body a * { color:var(--jt-accent2,#0e7c86) !important; -webkit-text-fill-color:var(--jt-accent2,#0e7c86) !important; }
/* Liste « Voir tout le blog » */
.bloglist { display:flex; flex-direction:column; gap:10px; }
.bloglist-i { display:flex; gap:14px; align-items:center; padding:12px; border:1px solid var(--jt-border,#e6ebf2); border-radius:12px; background:var(--jt-card,#fff); }
.bloglist-i:hover { border-color:var(--jt-border-accent,#19d3e6); }
.bloglist-im { width:96px; height:64px; flex:0 0 auto; border-radius:10px; background-size:cover; background-position:center; background-color:color-mix(in srgb,var(--jt-accent,#19d3e6) 30%, #16324f); }

/* Toast de confirmation Sysop (fixe, survit au rerender) */
.hcms-toast { position:fixed; right:20px; bottom:20px; z-index:99999; background:var(--jt-card,#0f1b2e); color:var(--jt-text,#16223e); border:1px solid var(--jt-border,#e6ebf2); border-left:3px solid var(--jt-ok,#34d399); border-radius:12px; padding:12px 18px; font-size:13.5px; font-weight:600; box-shadow:0 16px 40px rgba(0,0,0,.35); opacity:0; transform:translateY(12px); transition:opacity .25s, transform .25s; max-width:360px; }
.hcms-toast.show { opacity:1; transform:translateY(0); }
.hcms-toast.info { border-left-color:var(--jt-accent,#28d6ff); }
.hcms-toast.error { border-left-color:var(--jt-danger,#e5544b); }

/* Sécurité lisibilité en popups thémées : liste blog + zone d'édition WYSIWYG */
.bloglist-i .acc2-tt { color:var(--jt-text) !important; -webkit-text-fill-color:var(--jt-text) !important; }
.bloglist-i .acc2-ds, .bloglist-i .acc2-mt { color:var(--jt-muted) !important; }
.wy-area, .wy-area p, .wy-area li, .wy-area h2, .wy-area h3, .wy-area strong, .wy-area b, .wy-area em, .wy-area span, .wy-area div { color:var(--jt-text,#1f2733) !important; -webkit-text-fill-color:var(--jt-text,#1f2733) !important; }
.wy-area a, .wy-area a * { color:var(--jt-accent2,#0e7c86) !important; -webkit-text-fill-color:var(--jt-accent2,#0e7c86) !important; }

/* Bouton Cockpit global (barre du haut) — caché sur la page Cockpit (échappatoire = bouton Menu) */
.appshell.cockpit-mode .apptop-cockpit { display:none !important; }
.apptop .apptop-cockpit { flex:0 0 auto; }
.ctab.ctab-menu { display:inline-flex; align-items:center; }

/* ============ Page Produits & services (/produits) — thème sombre (surfaces classes .pv-*) ============ */
.appshell.jt-generic .main .pv-kpi, .appshell.jt-generic .main .pv-card, .appshell.jt-generic .main .pv-newcard, .appshell.jt-generic .main .pv-row, .appshell.jt-generic .main .pv-menu { background: var(--jt-card) !important; border-color: var(--jt-border) !important; color: var(--jt-text) !important; box-shadow: none !important; }
.appshell.jt-generic .main .pv-card:hover, .appshell.jt-generic .main .pv-row:hover, .appshell.jt-generic .main .pv-newcard:hover { border-color: var(--jt-border-accent) !important; }
.appshell.jt-generic .main .pv-search, .appshell.jt-generic .main .pv-fsel, .appshell.jt-generic .main .pv-fbtn, .appshell.jt-generic .main .pv-vtoggle, .appshell.jt-generic .main .pv-vbtn, .appshell.jt-generic .main .pv-act, .appshell.jt-generic .main .pv-morepill, .appshell.jt-generic .main .pv-mitem, .appshell.jt-generic .main .pv-new-plus { background: var(--jt-card2) !important; border-color: var(--jt-border) !important; color: var(--jt-text) !important; }
.appshell.jt-generic .main .pv-search::placeholder { color: var(--jt-muted) !important; }
.appshell.jt-generic .main .pv-vbtn.on, .appshell.jt-generic .main .pv-vbtn.active { background: color-mix(in srgb, var(--jt-accent) 18%, transparent) !important; color: var(--jt-accent2) !important; }
.appshell.jt-generic .main .pv-kpi-v, .appshell.jt-generic .main .pv-title, .appshell.jt-generic .main .pv-row-t, .appshell.jt-generic .main .pv-new-t, .appshell.jt-generic .main .pv-price { color: var(--jt-text) !important; }
.appshell.jt-generic .main .pv-kpi-l, .appshell.jt-generic .main .pv-kpi-s, .appshell.jt-generic .main .pv-desc, .appshell.jt-generic .main .pv-row-s, .appshell.jt-generic .main .pv-vat, .appshell.jt-generic .main .pv-new-d, .appshell.jt-generic .main .pv-sort-l, .appshell.jt-generic .main .pv-tiers { color: var(--jt-muted) !important; }
.appshell.jt-generic .main .pv-kpi-ic, .appshell.jt-generic .main .pv-avatar { background: color-mix(in srgb, currentColor 16%, transparent) !important; }
.appshell.jt-generic .main .pv-cattag, .appshell.jt-generic .main .pv-badges > * { background: color-mix(in srgb, currentColor 20%, transparent) !important; }

/* ============ Fonds blancs figés (popups) : Helpdesk (.hd-*) + Comptes connectés (.conn-*) ============ */
body.jt-theme .ncp-body .hd-kpi, .appshell.jt-generic .main .hd-kpi,
body.jt-theme .ncp-body .hd-empty, .appshell.jt-generic .main .hd-empty,
body.jt-theme .ncp-body .hd-card, .appshell.jt-generic .main .hd-card { background: var(--jt-card) !important; border-color: var(--jt-border) !important; box-shadow: none !important; }
body.jt-theme .ncp-body .hd-kpi-v, .appshell.jt-generic .main .hd-kpi-v, body.jt-theme .ncp-body .hd-card-subj, .appshell.jt-generic .main .hd-card-subj { color: var(--jt-text) !important; }
body.jt-theme .ncp-body .hd-kpi-l, .appshell.jt-generic .main .hd-kpi-l, body.jt-theme .ncp-body .hd-empty, .appshell.jt-generic .main .hd-empty, body.jt-theme .ncp-body .hd-card-prev, .appshell.jt-generic .main .hd-card-prev, body.jt-theme .ncp-body .hd-card-meta, .appshell.jt-generic .main .hd-card-meta { color: var(--jt-muted) !important; }
body.jt-theme .ncp-body .hd-search, .appshell.jt-generic .main .hd-search { background: var(--jt-card2) !important; border-color: var(--jt-border) !important; color: var(--jt-text) !important; }
body.jt-theme .ncp-body .hd-search::placeholder, .appshell.jt-generic .main .hd-search::placeholder { color: var(--jt-muted) !important; }
/* Comptes connectés */
body.jt-theme .ncp-body .conn-card, .appshell.jt-generic .main .conn-card { background: var(--jt-card) !important; border-color: var(--jt-border) !important; box-shadow: none !important; }
body.jt-theme .ncp-body .conn-name, .appshell.jt-generic .main .conn-name { color: var(--jt-text) !important; }
body.jt-theme .ncp-body .conn-acct, .appshell.jt-generic .main .conn-acct, body.jt-theme .ncp-body .conn-svc, .appshell.jt-generic .main .conn-svc, body.jt-theme .ncp-body .conn-svc li, .appshell.jt-generic .main .conn-svc li { color: var(--jt-muted) !important; }
body.jt-theme .ncp-body .conn-msg, .appshell.jt-generic .main .conn-msg { background: var(--jt-card2) !important; color: var(--jt-muted) !important; border-color: var(--jt-border) !important; }

/* Page Fonctionnalités — sections en accordéon (repliées par défaut), host-thémé --jt-* */
.ff .ff-acc { background: var(--jt-card); border:1px solid var(--jt-border); border-radius:18px; margin-bottom:14px; overflow:hidden; box-shadow:0 6px 22px rgba(0,0,0,.20); }
.ff .ff-acc > .ff-acc-h { display:flex; align-items:center; gap:16px; padding:18px 20px; cursor:pointer; list-style:none; }
.ff .ff-acc > .ff-acc-h::-webkit-details-marker { display:none; }
.ff .ff-acc > .ff-acc-h:hover { background: color-mix(in srgb, var(--jt-accent) 6%, transparent); }
.ff .ff-acc-ic { width:46px; height:46px; border-radius:13px; flex:none; display:grid; place-items:center; background: color-mix(in srgb, var(--jt-accent) 14%, transparent); color: var(--jt-accent); }
.ff .ff-acc-txt { flex:1; min-width:0; }
.ff .ff-acc-ttl { display:block; font-weight:800; font-size:16px; color: var(--jt-text); }
.ff .ff-acc-sub { display:block; font-size:13px; color: var(--jt-muted); margin-top:2px; }
.ff .ff-acc .acc-chev { color: var(--jt-muted); flex:0 0 auto; transition: transform .2s; }
.ff .ff-acc[open] > .ff-acc-h .acc-chev { transform: rotate(180deg); }
.ff .ff-acc-body { padding: 4px 20px 20px; }
.ff .ff-acc-row { display:flex; align-items:center; gap:16px; }

/* Mobile : cartes de liste (table.grid tr) — fond blanc figé (ligne ~1694) → thème actif */
@media (max-width: 820px) {
  body.jt-theme table.grid tr { background: var(--jt-card) !important; border-color: var(--jt-border) !important; box-shadow: none !important; }
  body.jt-theme table.grid td { border-bottom-color: var(--jt-border) !important; color: var(--jt-text) !important; }
  body.jt-theme table.grid td::before { color: var(--jt-muted) !important; }
  body.jt-theme .cc-card { background: var(--jt-card) !important; border-color: var(--jt-border) !important; }
}

/* Store : la pastille de thème n'a pas d'utilité ici (thème forcé sombre) → masquée sur /store uniquement */
body.store-route .jt-fab, body.store-route #jt-fab, body.store-route .jt-switch { display:none !important; }

/* ============ Administration personnalisable (/admin) — Affichage + glisser-déposer ============ */
.adx-topbar { display:flex; align-items:flex-start; gap:16px; }
.adx-disp { position:relative; margin-left:auto; flex:0 0 auto; }
.adx-disp-btn { display:inline-flex; align-items:center; gap:6px; background: var(--jt-card,#fff); border:1px solid var(--jt-border,#e6ebf4); color: var(--jt-text,#16223e); font-weight:700; font-size:13px; padding:9px 14px; border-radius:11px; cursor:pointer; }
.adx-disp-btn:hover { border-color: var(--jt-border-accent, #c9d3e3); }
.adx-disp-pop { position:absolute; right:0; top:calc(100% + 8px); width:290px; background: var(--jt-card,#fff); border:1px solid var(--jt-border,#e6ebf4); border-radius:14px; box-shadow:0 18px 44px rgba(0,0,0,.28); padding:10px; display:none; z-index:200; }
.adx-disp.open .adx-disp-pop { display:block; }
.adx-disp-lab { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--jt-muted,#7c8aa0); font-weight:700; padding:6px 8px 4px; }
.adx-disp-row { display:flex; align-items:center; gap:10px; padding:8px; border-radius:9px; cursor:pointer; font-size:13.5px; color:var(--jt-text,#16223e); }
.adx-disp-row input { accent-color: var(--jt-accent,#19d3e6); width:16px; height:16px; }
.adx-disp-row:hover { background: color-mix(in srgb, var(--jt-accent,#19d3e6) 10%, transparent); }
.adx-disp-note { font-size:11.5px; color:var(--jt-muted,#7c8aa0); padding:8px; line-height:1.5; border-top:1px solid var(--jt-border,#eef2f7); margin-top:6px; }
.adx-block { position:relative; margin-bottom:16px; border-radius:16px; }
.adx-block.is-hidden { display:none; }
.adx-block.dragging { opacity:.4; }
.adx-block.adx-drop { outline:2px dashed var(--jt-accent,#19d3e6); outline-offset:5px; }
.adx-grip { position:absolute; left:-6px; top:24px; width:20px; height:46px; border-radius:8px; display:grid; place-items:center; color:var(--jt-muted,#94a3b8); cursor:grab; opacity:0; transition:.12s; background: var(--jt-card,#fff); border:1px solid var(--jt-border,#e6ebf4); z-index:4; }
.adx-block:hover .adx-grip { opacity:1; }
.adx-grip:active { cursor:grabbing; }
.adx-grip svg { width:15px; height:15px; }
@media (max-width:820px){ .adx-grip { display:none; } }

/* ============ Tunnel de déclaration URSSAF (/urssaf) — host-thémé --jt-* ============ */
.urx { max-width:840px; }
.urx .urx-skel { padding:40px; text-align:center; color:var(--jt-muted); }
.urx-sub { color:var(--jt-muted); font-size:14px; margin:0 0 20px; }
.urx-steps { display:flex; gap:6px; margin-bottom:20px; flex-wrap:wrap; }
.urx-step { flex:1; min-width:120px; display:flex; align-items:center; gap:9px; padding:11px 12px; border-radius:12px; background:var(--jt-card); border:1px solid var(--jt-border); font-size:12.5px; color:var(--jt-muted); }
.urx-step.on { border-color:color-mix(in srgb,var(--jt-accent) 55%,transparent); color:var(--jt-text); }
.urx-step.done { color:var(--jt-text); }
.urx-step-n { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800; flex:0 0 auto; background:color-mix(in srgb,var(--jt-muted) 25%,transparent); color:var(--jt-text); }
.urx-step.on .urx-step-n { background:var(--jt-accent); color:var(--jt-on,#04121b); }
.urx-step.done .urx-step-n { background:var(--jt-ok,#34d399); color:#04231a; }
.urx-card { background:var(--jt-card) !important; border:1px solid var(--jt-border); border-radius:18px; padding:22px 24px; margin-bottom:16px; }
.urx-card h2 { font-size:18px; font-weight:800; margin:0 0 6px; color:var(--jt-text) !important; }
.urx-lead { color:var(--jt-muted); font-size:13.5px; line-height:1.6; margin:0 0 16px; }
.urx-pill { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; font-weight:800; font-size:13px; background:color-mix(in srgb,var(--jt-accent) 18%,transparent); color:var(--jt-accent2); }
.urx-choice { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0; }
.urx-opt { border:2px solid var(--jt-border); border-radius:14px; padding:16px; cursor:pointer; transition:.12s; }
.urx-opt.on { border-color:var(--jt-accent); background:color-mix(in srgb,var(--jt-accent) 8%,transparent); }
.urx-opt-t { font-weight:800; font-size:15px; color:var(--jt-text); }
.urx-opt-d { font-size:12.5px; color:var(--jt-muted); margin-top:3px; }
.urx-help { background:color-mix(in srgb,var(--jt-accent) 7%,transparent); border:1px solid var(--jt-border); border-radius:12px; padding:12px 14px; font-size:12.5px; color:var(--jt-muted); line-height:1.6; margin-top:6px; }
.urx-help b { color:var(--jt-text); }
.urx-period { display:flex; align-items:center; gap:8px; margin-top:14px; font-size:14px; color:var(--jt-muted); }
.urx-period b { color:var(--jt-text); font-weight:800; }
.urx-checks { display:flex; flex-direction:column; gap:12px; }
.urx-chk { display:flex; gap:13px; align-items:flex-start; padding:14px; border:1px solid var(--jt-border); border-radius:14px; background:var(--jt-card2); }
.urx-chk-ic { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto; }
.urx-chk.ok .urx-chk-ic { background:color-mix(in srgb,var(--jt-ok,#34d399) 20%,transparent); color:var(--jt-ok,#34d399); }
.urx-chk.warn .urx-chk-ic { background:color-mix(in srgb,#f6b73b 22%,transparent); color:#f6b73b; }
.urx-chk.err .urx-chk-ic { background:color-mix(in srgb,var(--jt-danger,#f06868) 20%,transparent); color:var(--jt-danger,#f06868); }
.urx-chk-ic svg { width:18px; height:18px; }
.urx-chk-t { font-weight:700; font-size:14px; color:var(--jt-text); }
.urx-chk-d { font-size:12.5px; color:var(--jt-muted); margin-top:2px; line-height:1.5; }
.urx-lnk { color:var(--jt-accent2); font-weight:700; cursor:pointer; }
.urx-banner { display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:14px; margin-top:16px; font-size:13.5px; font-weight:700; }
.urx-banner.ok { background:color-mix(in srgb,var(--jt-ok,#34d399) 14%,transparent); color:var(--jt-ok,#34d399); }
.urx-banner.warn { background:color-mix(in srgb,#f6b73b 14%,transparent); color:#f6b73b; }
.urx-recap { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:6px 0 4px; }
.urx-rc { background:var(--jt-card2); border:1px solid var(--jt-border); border-radius:14px; padding:15px; }
.urx-rc-l { font-size:12.5px; color:var(--jt-muted); } .urx-rc-v { font-size:24px; font-weight:800; margin-top:4px; color:var(--jt-text); }
.urx-rc.big { grid-column:1 / -1; background:color-mix(in srgb,var(--jt-accent) 10%,transparent); border-color:color-mix(in srgb,var(--jt-accent) 30%,transparent); }
.urx-rc.big .urx-rc-v { color:var(--jt-accent2); }
.urx-vent { margin-top:12px; border-top:1px solid var(--jt-border); padding-top:12px; }
.urx-vrow { display:flex; justify-content:space-between; font-size:13px; padding:5px 0; color:var(--jt-muted); }
.urx-vrow b { color:var(--jt-text); }
.urx-paths { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:6px; }
.urx-path { border:1px solid var(--jt-border); border-radius:16px; padding:18px; background:var(--jt-card2); }
.urx-path.reco { border-color:color-mix(in srgb,var(--jt-accent) 45%,transparent); }
.urx-path-ic { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:color-mix(in srgb,var(--jt-accent) 16%,transparent); color:var(--jt-accent2); margin-bottom:10px; }
.urx-path-ic svg { width:22px; height:22px; }
.urx-path h3 { margin:0; font-size:15.5px; font-weight:800; color:var(--jt-text); }
.urx-path p { font-size:12.5px; color:var(--jt-muted); margin:4px 0 12px; line-height:1.5; }
.urx-badge { display:inline-block; font-size:10px; font-weight:800; padding:2px 8px; border-radius:6px; background:color-mix(in srgb,var(--jt-accent) 18%,transparent); color:var(--jt-accent2); margin-bottom:8px; text-transform:uppercase; letter-spacing:.4px; }
.urx-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:14px; font-weight:800; padding:12px 20px; border-radius:12px; border:0; cursor:pointer; background:linear-gradient(135deg,var(--jt-accent),var(--jt-accent2)); color:var(--jt-on,#04121b); }
.urx-btn.ghost { background:transparent; border:1px solid var(--jt-border); color:var(--jt-text); }
.urx-path .urx-btn { width:100%; }
.urx-nav { display:flex; gap:12px; margin-top:18px; }
.urx-nav .urx-btn { flex:1; }
.urx-done { text-align:center; padding:20px 0; }
.urx-done-ic { width:72px; height:72px; border-radius:50%; margin:0 auto 14px; display:grid; place-items:center; background:color-mix(in srgb,var(--jt-ok,#34d399) 20%,transparent); color:var(--jt-ok,#34d399); }
.urx-done-ic svg { width:38px; height:38px; }
@media (max-width:640px){ .urx-choice, .urx-recap, .urx-paths { grid-template-columns:1fr; } .urx-step-l { display:none; } }

/* ============ Page Comptabilité — sections en accordéon + glisser-déposer (.cpx-*) ============ */
.cpx-layout { display:flex; flex-direction:column; gap:16px; }
.cpx-acc { position:relative; background:var(--jt-card, #101d33); border:1px solid var(--jt-border, rgba(255,255,255,.08)); border-radius:16px; overflow:hidden; }
.cpx-acc > .cpx-acc-h { list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:16px 18px; font-weight:800; font-size:16px; color:var(--jt-text, #eaf1fb); user-select:none; }
.cpx-acc > .cpx-acc-h::-webkit-details-marker { display:none; }
.cpx-acc > .cpx-acc-h:hover { background:color-mix(in srgb, var(--jt-accent,#28d6ff) 6%, transparent); }
.cpx-acc-ttl { flex:1; min-width:0; }
.cpx-grip { width:22px; height:22px; border-radius:6px; display:grid; place-items:center; color:var(--jt-muted,#8ea3c0); cursor:grab; flex:0 0 auto; opacity:.5; }
.cpx-acc > .cpx-acc-h:hover .cpx-grip { opacity:1; }
.cpx-grip:active { cursor:grabbing; }
.cpx-grip svg { width:15px; height:15px; }
.cpx-chev { color:var(--jt-muted,#8ea3c0); transition:transform .2s; flex:0 0 auto; display:inline-flex; }
.cpx-acc[open] > .cpx-acc-h .cpx-chev { transform:rotate(180deg); }
.cpx-acc-body { padding:2px 18px 18px; }
.cpx-acc.cpx-dragging { opacity:.45; }
.cpx-acc.cpx-drop { outline:2px dashed var(--jt-accent,#28d6ff); outline-offset:3px; }
/* Le titre de section (h3.cp-h) est déjà porté par le résumé de l'accordéon → masquer le doublon interne */
.cpx-acc-body > div > .cp-h:first-child, .cpx-acc-body > .cp-h:first-child { display:none; }
@media (max-width:820px){ .cpx-grip { display:none; } }

/* Sélecteur « Colonnes par ligne » dans l'en-tête d'accordéon (sections denses > 4 tuiles) */
.cpx-cols { display:inline-flex; align-items:center; gap:4px; margin-right:10px; }
.cpx-cols-l { font-size:11px; color:var(--jt-muted,#8ea3c0); font-weight:700; margin-right:2px; text-transform:uppercase; letter-spacing:.3px; }
.cpx-cols-b { min-width:26px; height:24px; padding:0 7px; border:1px solid var(--jt-border,rgba(255,255,255,.12)); background:var(--jt-card2,transparent); color:var(--jt-muted,#8ea3c0); border-radius:7px; font-size:11.5px; font-weight:700; cursor:pointer; }
.cpx-cols-b.on { background:color-mix(in srgb,var(--jt-accent,#28d6ff) 20%,transparent); color:var(--jt-accent2,#5cebff); border-color:color-mix(in srgb,var(--jt-accent,#28d6ff) 40%,transparent); }
@media (max-width:900px){ .cpx-cols { display:none; } .cpx-acc-body .cp-qgrid, .cpx-acc-body .nc-grid { grid-template-columns: repeat(auto-fit, minmax(150px,1fr)) !important; } }

/* Bascule Liste / Tuiles (en-tête d'accordéon) + mode LISTE des grilles de tuiles */
.cpx-view { display:inline-flex; gap:2px; margin-right:10px; background:var(--jt-card2,transparent); border:1px solid var(--jt-border,rgba(255,255,255,.12)); border-radius:8px; padding:2px; }
.cpx-view-b { width:28px; height:24px; display:grid; place-items:center; border:0; background:transparent; color:var(--jt-muted,#8ea3c0); border-radius:6px; cursor:pointer; }
.cpx-view-b.on { background:color-mix(in srgb,var(--jt-accent,#28d6ff) 20%,transparent); color:var(--jt-accent2,#5cebff); }
.cpx-acc-body .cp-qgrid.cpx-list, .cpx-acc-body .nc-grid.cpx-list { grid-template-columns:1fr !important; gap:8px !important; }
.cpx-acc-body .cpx-list .cp-qt { flex-direction:row !important; align-items:center; }
.cpx-acc-body .cpx-list .cp-qt-ic { margin-bottom:0 !important; margin-right:14px; }
.cpx-acc-body .cpx-list .cp-qt-d { margin-top:0; flex:1; }
.cpx-acc-body .cpx-list .cp-qt-cta { display:none !important; }

/* Fix lisibilité éditeur Facture/Devis « SOLO » : la règle générique :not(.theme-classique) repassait
   les champs .solodoc en fond sombre alors que l'exemption papier garde le texte foncé (illisible).
   On re-force les champs de l'éditeur en PAPIER BLANC (spécificité supérieure via .solodoc-acc). */
body.jt-theme .ncp-body .solodoc .solodoc-acc input, body.jt-theme .ncp-body .solodoc .solodoc-acc select, body.jt-theme .ncp-body .solodoc .solodoc-acc textarea, body.jt-theme .ncp-body .solodoc .solodoc-acc .field,
.appshell.jt-generic .main .solodoc .solodoc-acc input, .appshell.jt-generic .main .solodoc .solodoc-acc select, .appshell.jt-generic .main .solodoc .solodoc-acc textarea, .appshell.jt-generic .main .solodoc .solodoc-acc .field {
  background:#fff !important; color:#1f2733 !important; -webkit-text-fill-color:#1f2733 !important; border:1px solid #d7dee8 !important;
}
body.jt-theme .ncp-body .solodoc .solodoc-acc input::placeholder, .appshell.jt-generic .main .solodoc .solodoc-acc input::placeholder { color:#9aa6b6 !important; -webkit-text-fill-color:#9aa6b6 !important; }

/* Mode LISTE : cartes Ventes (.vx-card, verticales) → lignes */
.cpx-acc-body .cpx-list .vx-card { flex-direction:row !important; align-items:center; text-align:left; }
.cpx-acc-body .cpx-list .vx-card-ic { margin-bottom:0 !important; margin-right:14px; }