/* ERP 2Empower — charte commune « Marine × Profonds » (même fichier dans lead-manager et classements-app).
   tokens.css + components.css de la maquette (design_handoff_erp_2empower), puis compléments
   en fin de fichier. Seules --mod / --mod-tint changent d'une app à l'autre (cf. <body class="mod-…">). */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Neutres */
  --bg:            #F4F5F8;  /* fond de page */
  --surface:       #FFFFFF;  /* cartes, menu, tableaux */
  --surface-2:     #F8F9FB;  /* en-têtes de tableau, bandeaux de fiche */
  --hover:         #FAFBFD;  /* survol de ligne */
  --ink:           #1B2340;  /* texte principal + boutons primaires */
  --ink-hover:     #2A3457;
  --ink-2:         #454C66;  /* texte secondaire */
  --muted:         #666C84;  /* libellés, méta */
  --placeholder:   #8A8FA3;
  --disabled:      #9CA1B4;  /* éléments « bientôt » ⏳ */
  --disabled-2:    #A3A8BA;
  --line:          #E3E5EC;  /* bordure carte */
  --line-fine:     #EEF0F4;  /* séparateur de lignes */
  --line-strong:   #D5D8E2;  /* bordure champs / boutons secondaires */
  --chip:          #F1F2F6;  /* fond chip neutre (média) */
  --track:         #EEF0F4;  /* fond barres de progression */
  --chart-grey:    #D9DCE5;  /* série secondaire des graphiques */
  --focus-ring:    #E8EAF1;

  /* Modules — trio « Profonds » */
  --mod-leads:        oklch(0.45 0.11 255);  /* bleu encre  ≈ #2A5394 */
  --mod-leads-ink:    oklch(0.40 0.11 255);
  --mod-leads-tint:   oklch(0.95 0.02 255);
  --mod-leads-ring:   oklch(0.93 0.025 255);
  --mod-cls:          oklch(0.45 0.13 18);   /* bordeaux   ≈ #8E2A33 */
  --mod-cls-tint:     oklch(0.95 0.02 18);
  --mod-fin:          oklch(0.45 0.08 165);  /* vert forêt ≈ #1F5E4B */
  --mod-fin-tint:     oklch(0.95 0.02 165);
  --mod-soon:         #D5D8E2;               /* module pas encore ouvert */

  --mod:      var(--mod-leads);   /* surcharger par app : var(--mod-cls) / var(--mod-fin) */
  --mod-tint: var(--mod-leads-tint);

  /* Statuts (badges, pastilles, deltas) */
  --pos: #0B6E4F;  --pos-bg: #E7F3EC;  --pos-dot: #0B6E4F;
  --warn:#8A4B0B;  --warn-bg:#FBF0DF;  --warn-dot:#C2700F;  --warn-ink:#6E3D08;
  --neg: #A61E14;  --neg-bg: #FBEAEA;  --neg-dot: #A61E14;  --neg-line:#F0C9C5;
  --neu: #454C66;  --neu-bg: #F1F2F6;  --neu-dot: #C5C8D4;
  --info: oklch(0.40 0.11 255); --info-bg: oklch(0.95 0.02 255);
  --sync-ok: #22A06B; --sync-run: #E0A100;

  /* Typo */
  --font: 'Figtree', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --fs-h1: 26px;   --fw-h1: 700;  --ls-h1: -0.015em;
  --fs-kpi: 32px;  --fw-kpi: 700; --ls-kpi: -0.02em;
  --fs-card-title: 16px; --fw-card-title: 600;
  --fs-body: 13.5px;
  --fs-small: 13px;
  --fs-meta: 12.5px;
  --fs-th: 12px;
  --fs-chip: 12px;

  /* Forme */
  --r-card: 16px;
  --r-ctrl: 10px;   /* boutons, champs, segmented */
  --r-seg: 8px;     /* option active d'un segmented, petits boutons */
  --r-pill: 99px;
  --r-modal: 16px;
  --shadow-card: 0 0 0 1px var(--line);
  --shadow-drawer: -24px 0 60px rgba(27,35,64,.16);
  --shadow-modal: 0 24px 70px rgba(27,35,64,.25);
  --shadow-pop: 0 0 0 1px var(--line), 0 16px 40px rgba(27,35,64,.14);
  --shadow-toast: 0 12px 32px rgba(27,35,64,.25);
  --overlay: rgba(27,35,64,.28);

  /* Espacements */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 10px; --sp-4: 12px; --sp-5: 14px;
  --sp-6: 16px; --sp-7: 20px; --sp-8: 22px; --sp-9: 24px; --sp-10: 32px; --sp-11: 40px;

  /* Layout */
  --sidebar-w: 236px;
  --content-max: 1240px;
  --btn-h: 36px; --btn-h-sm: 30px; --input-h: 38px;
}


*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--mod-leads);text-decoration:none} a:hover{text-decoration:underline}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--font-mono)}

/* ---------- Shell ---------- */
.app{display:flex;min-height:100vh}
.main{flex:1;min-width:0;padding:32px 40px 72px}
.main__inner{max-width:var(--content-max);margin:0 auto;display:flex;flex-direction:column;gap:20px}

/* ---------- Sidebar (menu unique, toujours déplié) ---------- */
.sidebar{flex:0 0 var(--sidebar-w);position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--surface);
  box-shadow:inset -1px 0 0 var(--line);padding:20px 12px 16px;display:flex;flex-direction:column;gap:20px}
.brand{display:flex;align-items:center;gap:10px;padding:0 8px}
.brand__logo{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#F0742B,#E23C96 45%,#6D2FD9);
  color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center}
.brand__name{font-size:15px;font-weight:700;line-height:1.2}
.brand__sub{font-size:12px;color:var(--muted)}
.nav{display:flex;flex-direction:column;gap:16px;flex:1}
.nav-group{display:flex;flex-direction:column;gap:2px}
.nav-group__title{display:flex;align-items:center;gap:9px;padding:5px 8px;font-size:13.5px;font-weight:500;color:var(--ink-2)}
.nav-group.is-current .nav-group__title{font-weight:700;color:var(--ink)}
.nav-dot{width:8px;height:8px;border-radius:2px;background:var(--dot,var(--mod))}
.nav-items{display:flex;flex-direction:column;margin-left:12px}
.nav-item{display:block;text-align:left;border:0;background:transparent;font:inherit;cursor:pointer;
  padding:6px 10px 6px 14px;font-size:13px;color:var(--muted);box-shadow:inset 2px 0 0 var(--line);border-radius:0 8px 8px 0}
.nav-item:hover{color:var(--ink);text-decoration:none}
.nav-item.is-active{color:var(--ink);font-weight:600;background:var(--bg);box-shadow:inset 2px 0 0 var(--dot,var(--mod))}
/* « bientôt » : texte grisé + ⏳ à droite, non cliquable (pages ET modules) */
.nav-item.is-soon,.nav-group.is-soon .nav-group__title{color:var(--disabled);cursor:not-allowed;display:flex;justify-content:space-between;align-items:center}
.nav-group.is-soon .nav-dot{background:var(--mod-soon)}
.soon-icon{font-size:13px}

/* Compte (bas du menu) + popover */
.account{position:relative}
.account__btn{width:100%;display:flex;align-items:center;gap:10px;padding:8px;border:0;border-radius:var(--r-ctrl);background:transparent;cursor:pointer;font:inherit;text-align:left;color:var(--ink)}
.account__btn:hover,.account__btn.is-open{background:var(--bg)}
.avatar{flex:0 0 auto;width:30px;height:30px;border-radius:99px;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;background:var(--ink);color:#fff}
.avatar--soft{background:var(--chip);color:var(--ink)}
.avatar--mod{background:var(--mod-leads-tint);color:var(--mod-leads-ink)}
.avatar--lg{width:48px;height:48px;font-size:16px}
.popover{position:absolute;left:0;right:0;bottom:calc(100% + 8px);z-index:31;background:var(--surface);border-radius:12px;box-shadow:var(--shadow-pop);padding:6px;display:flex;flex-direction:column;gap:2px}
.popover__head{padding:8px 10px 10px;box-shadow:inset 0 -1px 0 var(--line-fine);margin-bottom:4px}
.popover__item{text-align:left;border:0;background:none;cursor:pointer;font:inherit;padding:8px 10px;border-radius:8px;font-size:13.5px;color:var(--ink)}
.popover__item:hover{background:var(--bg)}
.popover__item--danger{color:var(--neg)}

/* ---------- En-tête de page ---------- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.page-head__eyebrow{font-size:13px;font-weight:600;color:var(--mod)}
.page-head__eyebrow--neutral{color:var(--muted)}
.page-head h1{margin:4px 0 0;font-size:var(--fs-h1);font-weight:var(--fw-h1);letter-spacing:var(--ls-h1)}
.page-head h1 .light{font-weight:500;color:var(--muted)}
.page-head__desc{font-size:14px;line-height:1.5;color:var(--muted);max-width:700px;margin-top:4px}
.page-head__actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ---------- Boutons ---------- */
.btn{height:var(--btn-h);padding:0 14px;border:0;border-radius:var(--r-ctrl);font:inherit;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn--primary{background:var(--ink);color:#fff} .btn--primary:hover{background:var(--ink-hover)}
.btn--secondary{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)} .btn--secondary:hover{background:var(--surface-2)}
.btn--ghost{background:none;color:var(--mod);padding:0}
.btn--danger{background:var(--surface);color:var(--neg);box-shadow:inset 0 0 0 1px var(--neg-line)}
.btn--success{background:var(--pos-bg);color:var(--pos)}
.btn--sm{height:var(--btn-h-sm);padding:0 10px;border-radius:var(--r-seg);font-size:12.5px}
.btn:disabled,.btn.is-disabled{background:var(--disabled-2);color:#fff;cursor:not-allowed;box-shadow:none}
.icon-btn{width:32px;height:32px;border:0;border-radius:99px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);cursor:pointer}

/* ---------- Champs ---------- */
.input,.select{height:var(--input-h);border:0;border-radius:var(--r-ctrl);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-strong);
  padding:0 12px;font:inherit;font-size:13.5px;color:var(--ink);outline:none}
.input::placeholder{color:var(--placeholder)}
.input:focus,.select:focus{box-shadow:inset 0 0 0 1px var(--mod),0 0 0 3px var(--mod-leads-ring)}
.input--neutral-focus:focus{box-shadow:inset 0 0 0 1px var(--ink),0 0 0 3px var(--focus-ring)}
.input--readonly{background:var(--bg);color:var(--muted);box-shadow:none}
.field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500}
.field__help{font-size:12px;font-weight:400;color:var(--muted)}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.toolbar__spacer{flex:1}
.toolbar__count{font-size:13px;color:var(--muted)}

/* Segmented (périodes, filtres de type, rôles) */
.seg{display:inline-flex;background:var(--surface);border-radius:var(--r-ctrl);padding:3px;gap:2px;box-shadow:0 0 0 1px var(--line)}
.seg__opt{border:0;background:transparent;cursor:pointer;font:inherit;padding:6px 12px;font-size:13px;font-weight:600;border-radius:var(--r-seg);color:var(--muted)}
.seg__opt.is-active{background:var(--ink);color:#fff}
/* variante « rôle » (Aucun / Membre / Admin) dans fiches & modale */
.seg--soft{background:var(--bg);box-shadow:none}
.seg--soft .seg__opt{font-size:12.5px}
.seg--soft .seg__opt.is-active{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(27,35,64,.12)}
.seg__opt:disabled{color:#B5B9C8;cursor:not-allowed;background:transparent;box-shadow:none}

/* Chip de filtre actif */
.filter-chip{height:32px;display:inline-flex;align-items:center;gap:8px;padding:0 6px 0 12px;border-radius:99px;background:var(--mod-tint);color:var(--mod-leads-ink);font-size:13px;font-weight:600}
.filter-chip button{width:22px;height:22px;border:0;border-radius:99px;background:#fff;color:var(--ink-2);cursor:pointer;font-size:12px}

/* Onglets pilule (classements) */
.pills{display:flex;gap:6px;flex-wrap:wrap}
.pill{border:0;cursor:pointer;font:inherit;padding:7px 12px;font-size:13px;font-weight:600;border-radius:99px;background:#fff;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.pill.is-active{background:var(--mod);color:#fff;box-shadow:none}

/* ---------- Cartes & KPI ---------- */
.card{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:20px 22px;display:flex;flex-direction:column;gap:14px}
.card--flush{padding:0;gap:0;overflow-x:auto}
.card__head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.card--flush .card__head{padding:18px 22px}
.card__title{font-size:var(--fs-card-title);font-weight:var(--fw-card-title)}
.card__meta{font-size:13px;color:var(--muted)}
.grid-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.grid-2-1{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:14px}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:14px}
.kpi{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:18px 20px;display:flex;flex-direction:column;gap:8px}
/* Règle : UN SEUL KPI par écran porte le trait de couleur du module */
.kpi__mark{width:24px;height:3px;border-radius:2px;background:transparent}
.kpi--key .kpi__mark{background:var(--mod)}
.kpi__label{font-size:13px;color:var(--muted)}
.kpi__value{font-size:var(--fs-kpi);font-weight:var(--fw-kpi);letter-spacing:var(--ls-kpi);line-height:1;font-variant-numeric:tabular-nums}
.kpi__delta{font-size:12.5px;font-weight:600}
.kpi__delta small{font-size:inherit;font-weight:400;color:var(--muted)}
.delta--up{color:var(--pos)} .delta--down{color:var(--neg)} .delta--flat{color:var(--muted)}

/* ---------- Badges & pastilles ---------- */
.badge{display:inline-block;font-size:var(--fs-chip);font-weight:600;padding:3px 10px;border-radius:var(--r-pill);white-space:nowrap}
.badge--pos{background:var(--pos-bg);color:var(--pos)}
.badge--warn{background:var(--warn-bg);color:var(--warn)}
.badge--neg{background:var(--neg-bg);color:var(--neg)}
.badge--info{background:var(--info-bg);color:var(--info)}
.badge--neutral{background:var(--neu-bg);color:var(--neu)}
.badge--muted{background:var(--neu-bg);color:var(--muted)}
.badge--role-admin{background:var(--focus-ring);color:var(--ink)}
.badge--role-member{background:#fff;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-strong)}
.chip{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--chip);color:var(--ink-2)}
/* Statut sur une ligne : pastille + libellé court (tableau Calcul et publication) */
.status{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;white-space:nowrap}
.status::before{content:"";width:7px;height:7px;border-radius:99px;background:currentColor;flex:0 0 auto}
.status--pos{color:var(--pos)} .status--warn{color:var(--warn)} .status--warn::before{background:var(--warn-dot)}
.status--off{color:var(--muted)} .status--off::before{background:var(--neu-dot)}
.dot{width:8px;height:8px;border-radius:99px;flex:0 0 auto;display:inline-block}

/* Liste d'alertes « À surveiller » — pas de surlignage de texte : pastille + titre gras */
.alerts{display:flex;flex-direction:column;gap:12px}
.alert{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.4;padding-bottom:12px;box-shadow:inset 0 -1px 0 var(--line-fine)}
.alert .dot{margin-top:6px}
.alert__title{font-weight:600}
.alert__sub{color:var(--muted)}
/* Bandeau d'état (brouillon / publié) */
.banner{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;font-size:13.5px}
.banner--warn{background:var(--warn-bg);color:var(--warn-ink)} .banner--warn .dot{background:var(--warn-dot)}
.banner--pos{background:var(--pos-bg);color:var(--pos)} .banner--pos .dot{background:var(--pos)}

/* ---------- Tableaux (CSS grid ; définir --cols et --min par tableau) ---------- */
.table{min-width:var(--min,0)}
.table__row{display:grid;grid-template-columns:var(--cols);gap:12px;align-items:center;padding:11px 22px;box-shadow:inset 0 -1px 0 var(--line-fine);font-size:13.5px}
.table__row--head{padding:10px 22px;background:var(--surface-2);font-size:var(--fs-th);font-weight:500;color:var(--muted)}
.table__row--link{cursor:pointer} .table__row--link:hover,.table__row.is-open{background:var(--hover)}
.table .r{text-align:right}
.table .strong{font-weight:600}
.table .sub{font-size:12px;color:var(--muted)}
.table .date{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.rank{font-family:var(--font-mono);font-size:14px;font-weight:500}
.rank--top{color:var(--mod)}
.row-detail{padding:16px 22px 20px 94px;background:var(--hover);box-shadow:inset 0 -1px 0 var(--line-fine);display:flex;flex-direction:column;gap:12px;font-size:13.5px}
.pagination{display:flex;justify-content:center;align-items:center;gap:12px;font-size:13px;color:var(--muted)}

/* ---------- Data viz ---------- */
.bar-track{height:6px;border-radius:99px;background:var(--track)}
.bar-track--thin{height:5px}
.bar-fill{height:100%;border-radius:99px;background:var(--mod)}
.chart-bars{display:flex;align-items:flex-end;gap:5px;height:180px}
.chart-bars__col{flex:1;display:flex;flex-direction:column;gap:2px}
.chart-bars__known{flex:1;background:var(--chart-grey);border-radius:4px 4px 1px 1px}
.chart-bars__new{background:var(--mod);border-radius:1px}
.chart-axis{display:flex;justify-content:space-between;font-size:11.5px;color:var(--placeholder)}
.legend{display:flex;gap:14px;font-size:12.5px;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:8px;height:8px;border-radius:2px;display:inline-block}
.spark{display:flex;align-items:flex-end;gap:2px;height:26px}
.spark i{flex:1;background:#C9CEDC;border-radius:1px}

/* ---------- Process (étapes) ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.step{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:12px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.step.is-done{background:#fff}
.step__mark{width:22px;height:22px;border-radius:99px;font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center;background:#fff;color:var(--ink-2)}
.step.is-done .step__mark{background:var(--mod);color:#fff}
.step__title{font-size:13.5px;font-weight:600}
.step__desc{font-size:12.5px;line-height:1.45;color:var(--ink-2)}

/* ---------- Overlays ---------- */
.overlay{position:fixed;inset:0;background:var(--overlay);z-index:40}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(640px,90vw);background:#fff;box-shadow:var(--shadow-drawer);z-index:41;overflow-y:auto}
.drawer--sm{width:min(560px,92vw)}
.drawer__head{display:flex;gap:16px;align-items:flex-start;padding:24px 26px;background:var(--surface-2);box-shadow:inset 0 -1px 0 var(--line)}
.drawer__title{font-size:19px;font-weight:700}
.drawer__section{padding:20px 26px;box-shadow:inset 0 -1px 0 var(--line-fine);display:flex;flex-direction:column;gap:10px}
.drawer__section-title{font-size:13px;font-weight:600;color:var(--muted)}
.kv{display:flex;justify-content:space-between;gap:16px;font-size:13.5px;padding:4px 0}
.kv dt{color:var(--muted)} .kv dd{margin:0;font-weight:500;text-align:right}
.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(520px,92vw);background:#fff;border-radius:var(--r-modal);box-shadow:var(--shadow-modal);z-index:51;overflow:hidden}
.modal__head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;box-shadow:inset 0 -1px 0 var(--line);font-size:17px;font-weight:700}
.modal__body{padding:22px 24px;display:flex;flex-direction:column;gap:18px}
.modal__foot{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px;box-shadow:inset 0 1px 0 var(--line)}
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:12px;background:var(--ink);color:#fff;font-size:13.5px;box-shadow:var(--shadow-toast)}
.toast__check{color:oklch(0.80 0.10 155);font-weight:700}

/* =====================================================================
   Compléments 2Empower (hors maquette) — utilisés par les deux apps
   ===================================================================== */
body.mod-leads{--mod:var(--mod-leads);--mod-tint:var(--mod-leads-tint)}
body.mod-cls{--mod:var(--mod-cls);--mod-tint:var(--mod-cls-tint)}
body.mod-fin{--mod:var(--mod-fin);--mod-tint:var(--mod-fin-tint)}
body.mod-compte{--mod:var(--ink);--mod-tint:var(--focus-ring)}
body{font-size:var(--fs-body);line-height:1.45}
button,input,select,textarea{font-family:inherit}
a.btn,a.nav-item,a.popover__item{text-decoration:none}
a.btn:hover{text-decoration:none}
a.nav-group__title{text-decoration:none}
a.nav-group__title:hover{text-decoration:none;color:var(--ink)}
.nav-group__title .soon-icon{margin-left:auto}
.account__name{font-size:13px;font-weight:600;line-height:1.2}
.account__role{font-size:12px;color:var(--muted)}
.account__chev{margin-left:auto;color:var(--muted);font-size:12px}
.popover[hidden]{display:none}
.popover__name{font-size:13.5px;font-weight:600}
.popover__email{font-size:12px;color:var(--muted);word-break:break-all}
.light{font-weight:500;color:var(--muted)}
.muted{color:var(--muted)}
.strong{font-weight:600}
.r{text-align:right}
.nowrap{white-space:nowrap}
.date{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.back-link{font-size:13px;font-weight:600;color:var(--muted)}
.back-link:hover{color:var(--ink);text-decoration:none}
.chip--mono{font-family:var(--font-mono);font-weight:500}
.chip--id{font-family:var(--font-mono);font-size:12px;font-weight:500;padding:2px 8px;border-radius:8px;background:var(--chip);color:var(--ink-2)}
.status--neg{color:var(--neg)}
.status--info{color:var(--info)}
.textarea{min-height:96px;padding:10px 12px;border:0;border-radius:var(--r-ctrl);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-strong);font:inherit;font-size:13.5px;color:var(--ink);outline:none;resize:vertical}
.textarea:focus{box-shadow:inset 0 0 0 1px var(--mod),0 0 0 3px var(--mod-tint)}
.input:focus,.select:focus{box-shadow:inset 0 0 0 1px var(--mod),0 0 0 3px var(--mod-tint)}
.input--block,.select--block{width:100%}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.field--inline{flex-direction:row;align-items:center;gap:8px}
.help{font-size:12.5px;color:var(--muted);line-height:1.5}
.help--pos{color:var(--pos)} .help--neg{color:var(--neg)}
.empty{padding:28px 22px;text-align:center;color:var(--muted);font-size:13.5px}
.empty--pos{color:var(--pos);font-weight:600}
.banner--info{background:var(--info-bg);color:var(--info)} .banner--info .dot{background:var(--info)}
.banner--neg{background:var(--neg-bg);color:var(--neg)} .banner--neg .dot{background:var(--neg)}
.banner--neutral{background:var(--neu-bg);color:var(--neu)} .banner--neutral .dot{background:var(--neu-dot)}
.skeleton{background:var(--line-fine);border-radius:8px;animation:erp-pulse 1.4s ease-in-out infinite}
@keyframes erp-pulse{50%{opacity:.55}}
.toast[hidden]{display:none}
.modal[hidden],.overlay[hidden],.drawer[hidden]{display:none}
.modal--lg{width:min(680px,92vw)}
.modal__body--scroll{max-height:70vh;overflow-y:auto}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn--round{width:36px;height:36px}
.kv{border-bottom:1px solid var(--line-fine);padding:9px 0}
.kv:last-child{border-bottom:0}
.kv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));column-gap:28px}
.code{font-family:var(--font-mono);font-size:12px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);border-radius:10px;padding:10px 12px;white-space:pre-wrap;word-break:break-all;color:var(--ink-2)}

/* Tableaux HTML classiques (<table class="dtable">) — même rendu que .table de la maquette */
.dtable{width:100%;border-collapse:collapse;font-size:13.5px}
.dtable th{background:var(--surface-2);font-size:var(--fs-th);font-weight:500;color:var(--muted);text-align:left;padding:10px 12px;white-space:nowrap}
.dtable td{padding:11px 12px;box-shadow:inset 0 -1px 0 var(--line-fine);vertical-align:middle}
.dtable th:first-child,.dtable td:first-child{padding-left:22px}
.dtable th:last-child,.dtable td:last-child{padding-right:22px}
.dtable th.r,.dtable td.r{text-align:right}
.dtable tr.is-link{cursor:pointer}
.dtable tr.is-link:hover td,.dtable tr.is-open td{background:var(--hover)}
.dtable tr:last-child td{box-shadow:none}
.dtable .num{font-variant-numeric:tabular-nums}
.table-scroll{overflow-x:auto}

@media (max-width:1023px){
  .app{flex-direction:column}
  .sidebar{position:static;height:auto;flex:none;width:100%}
  .main{padding:24px 16px 56px}
  .grid-2-1{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){ .steps{grid-template-columns:minmax(0,1fr)} .grid-auto{grid-template-columns:minmax(0,1fr)} }

/* L’attribut hidden l’emporte toujours sur le display des composants (drawer, modal, popover…) */
[hidden]{display:none!important}