/* ═══════════════════════════════════════════════════════════════
   paso-ui.css - bibliotheque de styles partagee des outils Paso
   Source de verite : composants valides du CRM + tokens site/paso.css.
   Classes prefixees .pui-* (zero collision avec l'ancienne paso-design.css).
   Charger via : <link rel="stylesheet" href="../_shared/paso-ui.css">
   ───────────────────────────────────────────────────────────────
   PLACE DANS L'ARCHITECTURE (depuis 2026-07-27) — ce fichier est l'etage
   LEGACY du design system, et il est VOLONTAIREMENT NON-LAYERE :

     paso-tokens.css      etage 0 : tokens semantiques  (@layer paso.tokens)
     paso-ui.css          <- ICI : classes historiques  (hors layer)
     paso-components.css  etage 2 : CSS des composants  (@layer paso.components)
     paso-components.js   etage 2 : les composants      (Custom Elements)

   En CSS, le NON-LAYERE gagne toujours sur le LAYERE, quelle que soit la
   specificite. Donc ce fichier garde la priorite la plus haute : c'est le
   FILET DE SECURITE de la migration. L'existant continue de gagner tant
   qu'un composant ne l'a pas remplace -> aucune regression possible.

   CLIQUET : quand un composant est valide, le bloc legacy correspondant est
   SUPPRIME d'ici et sa version layeree prend le relais. On ne duplique pas,
   on transfere. Ne PAS re-ajouter de CSS ici pour un composant existant.
   Decision : docs/paso/2026-07-27-design-system-composants.md
   ─────────────────────────────────────────────────────────────── */

/* ─── Tokens canoniques (= charte + site/paso.css :root) ─────────── */
:root {
  --navy: #13173e; --navy-mid: #42487a; --navy-light: #7e85b7;
  --amber: #dd8f18; --amber-light: #f5c56a; --amber-dark: #b8720f;
  --amber-100: #f9e4b2; --amber-900: #7a4a08;
  --white: #ffffff;
  --gray-50: #f8f9fb; --gray-100: #f0f2f7; --gray-200: #dde1ec;
  --gray-400: #9199b8; --gray-600: #5a6380; --gray-800: #2d3356;
  --black: #0a0c1e;
  --success: #1a7a5e; --error: #c23a4f;
  --font: 'Inter', sans-serif;
  --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 100px;
  --btn-radius: 8px 8px 16px 8px;
  --shadow-sm: 0 1px 3px color-mix(in srgb, var(--navy) 8%, transparent);
  --shadow-md: 0 4px 16px color-mix(in srgb, var(--navy) 10%, transparent);
  --shadow-lg: 0 8px 32px color-mix(in srgb, var(--navy) 14%, transparent);
  --shadow-amber: 0 4px 16px color-mix(in srgb, var(--amber) 28%, transparent);
  /* RÈGLE CHARTE - PAS DE HALO : aucune aura / voile radial de couleur derrière une surface
     navy/dark (hero, verdict, card-dark…). La profondeur = ombres neutres (--shadow-*) ; l'état
     d'un verdict se lit via la couleur du tag / chiffre / texte, jamais via un halo. */
  /* Tokens etendus (valeurs reelles des outils, pour le port fidele des composants) */
  --navy-deep:#0a0d28; --surface:#fafbfc; --sidebar-w:236px;
  --gray-150:#e4e7f0; --gray-300:#c5cad9; --gray-700:#404668;
  --success-soft:#3a8d63; --rose:#ef9999;
  --good:#0e9568; --good-soft:#d3f3e3; --good-bg:#e3f5ec;
  --bad:#c23a4f; --bad-soft:#ff8a8e; --bad-bg:#fee8e8;
  --info:#2e6db4; --info-soft:#7B97DE; --info-bg:#e7eefb;
  --purple:#7355d4; --purple-bg:#eee8fa;
  --radius-sm:6px;
  --ease:cubic-bezier(.22,1,.36,1); --t-fast:150ms; --t-base:220ms;
  /* Tokens type/layout (= colors_and_type.css du Design System, pour les composants portes du DS) */
  --bg-page:#fafbfc; --mint:#7DD9AB; --mint-dark:#3a8d63;
  --fs-display:clamp(42px,5vw,64px); --fs-h1:clamp(36px,4vw,52px); --fs-h2:clamp(28px,2.8vw,36px);
  --fs-h3:22px; --fs-body-lg:18px; --fs-body:17px; --fs-sm:15px; --fs-xs:13px; --fs-label:11px;
  --lh-tight:1.08; --lh-snug:1.3; --lh-body:1.65; --lh-loose:1.75;
  --tracking-eyebrow:0.2em; --tracking-tag:0.12em; --tracking-tight:-1.5px;
  --nav-h:88px; --container-max:1320px; --container-pad:clamp(24px,4.5vw,72px); --section-pad:clamp(72px,9vw,120px);
  /* Pastels (faible opacite des couleurs marque) - utilises par les badges et fonds doux du DS */
  --pastel-amber:color-mix(in srgb, var(--amber) 8%, transparent); --pastel-mint:rgba(125,217,171,.18); --pastel-navy:color-mix(in srgb, var(--navy) 4%, transparent);
  --pastel-error:rgba(194,58,79,.08); --pastel-success:rgba(26,122,94,.10);
}

/* RÈGLE CHARTE - POLICE : Inter s'applique au document, pas seulement à quelques
   composants. Avant le 2026-08-23, `--font` était déclaré mais jamais appliqué au
   body : 17 outils sur 27 - dont la plupart des lead-magnets publics - rendaient
   leur texte courant dans la police par défaut du navigateur, donc en serif.
   Un outil qui pose sa propre règle sur `body` la garde (son <style> vient après
   ce fichier, à spécificité égale la cascade le fait gagner). */
body{font-family:var(--font);-webkit-font-smoothing:antialiased;}


/* ─── Composant : graphe de tendance (PasoUI.spendChart) ─────────────
   Porte 1:1 depuis le graphe valide du CRM (.chart-svg). Le composant JS
   cale le viewBox sur la largeur reelle -> aucune deformation du texte. */
.pui-chart-wrap{position:relative;cursor:crosshair;}
.pui-chart{width:100%;height:200px;display:block;}
.pui-chart .baseline{stroke:var(--gray-200);stroke-width:1;stroke-dasharray:2 4;}
.pui-chart .area{fill:url(#puiChartGrad);}
.pui-chart .line{fill:none;stroke:var(--amber);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 6px color-mix(in srgb, var(--amber) 35%, transparent));}
.pui-chart .line-n1{fill:none;stroke:var(--navy-light);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4 4;opacity:.7;}
.pui-chart .marker-halo{fill:var(--amber);opacity:.2;}
.pui-chart .marker{fill:var(--amber);}
.pui-chart .y-label{font:600 10px/1 var(--font);fill:var(--gray-400);}
.pui-chart .x-label{font:500 10.5px/1 var(--font);fill:var(--gray-600);}
.pui-chart .hover-line{stroke:color-mix(in srgb, var(--amber) 45%, transparent);stroke-width:1;stroke-dasharray:3 3;pointer-events:none;opacity:0;transition:opacity .15s;}
.pui-chart .hover-dot{fill:var(--amber);stroke:#fff;stroke-width:2;pointer-events:none;opacity:0;transition:opacity .15s;}
.pui-chart-wrap.is-hover .hover-line,.pui-chart-wrap.is-hover .hover-dot{opacity:1;}
.pui-chart-tooltip{position:absolute;top:8px;background:color-mix(in srgb, var(--navy) 96%, transparent);color:#fff;border:1px solid color-mix(in srgb, var(--amber) 35%, transparent);padding:8px 12px;border-radius:var(--radius-md);font:500 11.5px/1.35 var(--font);pointer-events:none;opacity:0;transition:opacity .15s;transform:translateX(-50%);box-shadow:0 6px 18px rgba(0,0,0,.35);z-index:3;white-space:nowrap;}
.pui-chart-wrap.is-hover .pui-chart-tooltip{opacity:1;}
.pui-chart-tooltip-label{color:rgba(255,255,255,.55);font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px;}
.pui-chart-tooltip-val{color:var(--amber-light);font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;}

/* ─── Eyebrow (micro-libelle amber) ─────────────────────────────── */
.pui-eyebrow{display:inline-block;font:700 10.5px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--amber);}

/* ─── Bouton (.pui-btn + variantes) - base : set mini-audit ──────── */
.pui-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border:1px solid transparent;border-radius:var(--btn-radius);font:600 14px/1 var(--font);cursor:pointer;transition:box-shadow .15s,background .15s,border-color .15s,color .15s,transform .12s;text-decoration:none;white-space:nowrap;}
.pui-btn:hover{transform:translateY(-1px);text-decoration:none;}
.pui-btn:active{transform:translateY(0);}
.pui-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;}
.pui-btn--amber{background:var(--amber);color:#FAFBFC;box-shadow:var(--shadow-amber);}
.pui-btn--amber:hover{box-shadow:0 6px 22px color-mix(in srgb, var(--amber) 40%, transparent);} /* illumine (glow), jamais assombrir - cf mini-audit */
.pui-btn--navy{background:var(--navy);color:#fff;}
.pui-btn--navy:hover{background:var(--navy-mid);}
.pui-btn--outline{background:transparent;color:var(--navy);border:1.5px solid var(--navy);}
.pui-btn--outline:hover{background:color-mix(in srgb, var(--navy) 5%, transparent);}
.pui-btn--ghost{background:transparent;color:var(--gray-600);}
.pui-btn--ghost:hover{background:var(--gray-50);color:var(--navy);}
.pui-btn--lg{padding:14px 24px;font-size:15px;}
.pui-btn--sm{padding:8px 13px;font-size:12.5px;}
.pui-btn svg{width:16px;height:16px;}

/* ─── Carte ─────────────────────────────────────────────────────── */
.pui-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-xl);padding:20px 22px;box-shadow:var(--shadow-sm);}

/* ─── Pastille delta (.pui-delta up/down/flat) - fusion des 4 ─────── */
.pui-delta{display:inline-flex;align-items:center;gap:3px;font:700 11px/1 var(--font);font-variant-numeric:tabular-nums;padding:2px 7px;border-radius:var(--radius-pill);}
.pui-delta--up{color:var(--success);background:rgba(26,122,94,.10);}
.pui-delta--down{color:var(--error);background:rgba(194,58,79,.10);}
.pui-delta--flat{color:var(--gray-600);background:var(--gray-100);}

/* ─── Tuile KPI ─────────────────────────────────────────────────── */
.pui-kpi{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:14px 16px;display:flex;flex-direction:column;gap:6px;}
.pui-kpi-label{font:600 10.5px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--gray-400);}
.pui-kpi-value{font:800 22px/1 var(--font);color:var(--navy);letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.pui-kpi-value.bad{color:var(--error);}
.pui-kpi-value.warn{color:var(--amber-dark);}
.pui-kpi-foot{display:flex;align-items:center;gap:8px;font:500 11px/1 var(--font);color:var(--gray-600);}
.pui-kpi--lg{padding:18px 18px 14px;transition:border-color .15s,transform .15s;}
.pui-kpi--lg:hover{border-color:var(--gray-400);transform:translateY(-1px);}
.pui-kpi--lg .pui-kpi-value{font-size:28px;}
.pui-kpi--health .pui-kpi-value{display:flex;align-items:baseline;gap:4px;}
.pui-kpi-value .tot{font-size:16px;color:var(--gray-400);font-weight:700;}
.pui-kpi-sub{font:500 11.5px/1.3 var(--font);color:var(--gray-400);}

/* ─── Banniere d'action / anomalie (copie fidele : tools/portal, le composant le plus duplique) ── */
.pui-action-banner{display:grid;grid-template-columns:32px 1fr auto;gap:14px;align-items:center;padding:12px 18px 12px 22px;background:#fff;border:1px solid var(--gray-200);border-radius:0 10px 10px 0;position:relative;}
.pui-action-banner::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:0 2px 2px 0;}
.pui-action-icon{width:32px;height:32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.pui-action-icon svg{width:14px;height:14px;}
.pui-action-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.pui-action-title{font:600 13px/1.35 var(--font);letter-spacing:-.15px;}
.pui-action-desc{font:400 12px/1.5 var(--font);color:var(--gray-600);}
.pui-action-desc b{color:var(--navy);font-weight:600;}
.pui-action-meta{font:700 11px/1 var(--font);letter-spacing:.04em;white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:6px;background:var(--gray-100);color:var(--gray-700);font-variant-numeric:tabular-nums;}
.pui-action-meta svg{width:11px;height:11px;}
.pui-action-banner.attention{border-color:color-mix(in srgb, var(--amber) 30%, transparent);}
.pui-action-banner.attention::before{background:var(--amber);}
.pui-action-banner.attention .pui-action-icon{background:color-mix(in srgb, var(--amber) 12%, transparent);color:var(--amber-dark);}
.pui-action-banner.attention .pui-action-title{color:var(--amber-dark);}
.pui-action-banner.alert{border-color:rgba(194,58,79,.25);}
.pui-action-banner.alert::before{background:var(--error);}
.pui-action-banner.alert .pui-action-icon{background:rgba(239,153,153,.22);color:#a73244;}
.pui-action-banner.alert .pui-action-title{color:#a73244;}
.pui-action-banner.alert .pui-action-meta{background:rgba(194,58,79,.10);color:#a73244;}
/* Variante success (vert) - portee du portal */
.pui-action-banner.success{border-color:color-mix(in srgb, var(--mint) 40%, transparent);}
.pui-action-banner.success::before{background:var(--success-soft);}
.pui-action-banner.success .pui-action-icon{background:color-mix(in srgb, var(--mint) 22%, transparent);color:var(--success-soft);}
.pui-action-banner.success .pui-action-title{color:#2d6f4d;}
/* Mobile : la puce meta passe sous le texte */
@media (max-width:680px){.pui-action-banner{grid-template-columns:32px 1fr;padding:14px 16px 14px 19px;}.pui-action-banner .pui-action-meta{grid-column:1/-1;justify-self:start;}}

/* ═══════════════════════════════════════════════════════════════
   COMPOSANTS PORTES (familles A-H) - copie fidele des outils Paso.
   Genere par port verbatim (sous-agents), selecteurs renommes .pui-*,
   scopes .dash-v2 retires, tokens consommes du :root ci-dessus.
   ═══════════════════════════════════════════════════════════════ */
/* === Completions Tier 0 : btn--danger, icon-btn, delta--bare, delta--on-dark === */

/* Bouton rouge (CRM .btn--danger) - hover assombrit */
.pui-btn--danger{background:var(--error);color:#fff;border-color:var(--error);}
.pui-btn--danger:hover{background:#a82f42;}
.pui-btn--danger:disabled{opacity:.5;cursor:default;}

/* Bouton icone carre (CRM .fiche-del) - suppression / fermeture */
.pui-icon-btn{background:transparent;border:1px solid var(--gray-200);color:var(--gray-400);width:38px;height:38px;border-radius:var(--radius-md);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .15s;}
.pui-icon-btn:hover{border-color:var(--error);color:var(--error);background:rgba(194,58,79,.06);}
.pui-icon-btn svg{width:16px;height:16px;}

/* Delta sans fond (texte colore seul) - rapports .kpi-tile-delta / CRM .kpi-delta */
.pui-delta--bare{padding:0;background:none;}

/* Delta sur fond navy / sombre (rapports .bh-snap-delta) - couleurs lumineuses */
.pui-delta--on-dark{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;padding:5px 13px;border-radius:var(--radius-pill);font-variant-numeric:tabular-nums;}
.pui-delta--on-dark svg{width:12px;height:12px;}
.pui-delta--on-dark.pui-delta--up{background:rgba(77,224,181,.16);color:#4de0b5;}
.pui-delta--on-dark.pui-delta--down{background:rgba(255,138,142,.16);color:#ff8a8f;}
.pui-delta--on-dark.pui-delta--flat{background:rgba(255,255,255,.10);color:rgba(255,255,255,.70);}

/* === Famille A - primitifs : chip / status-chip, health-dot, cta-link, eyebrow--rule === */

/* Pastille de statut generique (CRM .chip) */
.pui-chip{font:700 8px/1 var(--font);text-transform:uppercase;letter-spacing:.05em;padding:3px 7px;border-radius:var(--radius-pill);display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}
.pui-chip::before{content:'';width:5px;height:5px;border-radius:50%;}
.pui-chip--actif{background:rgba(26,122,94,.12);color:var(--success);}.pui-chip--actif::before{background:var(--success);}
.pui-chip--onboarding{background:color-mix(in srgb, var(--amber) 15%, transparent);color:var(--amber-dark);}.pui-chip--onboarding::before{background:var(--amber);}
.pui-chip--pause{background:var(--gray-100);color:var(--gray-600);}.pui-chip--pause::before{background:var(--gray-400);}
.pui-chip--termine{background:var(--gray-100);color:var(--gray-400);}.pui-chip--termine::before{background:var(--gray-400);}
.pui-chip--pipe{background:rgba(66,72,122,.13);color:var(--navy-mid);}.pui-chip--pipe::before{background:var(--navy-mid);}
.pui-chip--tag{background:var(--gray-100);color:var(--gray-600);}.pui-chip--tag::before{background:var(--gray-400);}
.pui-chip--echec{background:rgba(194,58,79,.12);color:var(--error);}.pui-chip--echec::before{background:var(--error);}

/* Pastille de statut a point (rapports .ed-status) - pilule + dot ::before en currentColor */

/* Statut texte + dot (CRM .dd-status) - sans fond, point ::before */

/* Pastille de sante 3 etats (CRM .health-dot) */

/* Lien / CTA texte amber fantome (portal .btn-ghost) - hover eclaircit */
.pui-cta-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--amber-dark);transition:color var(--t-fast) var(--ease);text-decoration:none;cursor:pointer;}
.pui-cta-link:hover{color:var(--amber);}
.pui-cta-link svg{width:12px;height:12px;}

/* Eyebrow avec trait ::after (portal .actions-eyebrow / CRM dash-v2 .sec-eyebrow) */
.pui-eyebrow--rule{display:inline-flex;align-items:center;gap:12px;font:700 11px/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--amber);}
.pui-eyebrow--rule::after{content:'';width:60px;height:1px;background:var(--gray-200);}

/* === Famille B - conteneurs : hero, section/sec-anchor, zone, empty/empty-card, stat-card === */

/* Hero - en-tete navy degrade (RÈGLE: pas de halo radial) */
.pui-hero{background:linear-gradient(168deg, var(--navy) 0%, var(--navy-deep) 100%);color:#fff;padding:clamp(40px,5vw,64px) 0 clamp(36px,4.5vw,56px);position:relative;overflow:hidden;}
.pui-hero-inner{position:relative;z-index:1;}
.pui-hero-h1{font-size:clamp(28px, 3.6vw, 40px);font-weight:700;line-height:1.15;letter-spacing:-.022em;color:#fff;}
.pui-hero-h1 .dot{color:var(--amber);}
.pui-hero-sub{margin-top:14px;font-size:clamp(14.5px, 1.5vw, 16px);color:rgba(255,255,255,.7);font-weight:400;line-height:1.6;max-width:680px;}
.pui-hero-sub .accent{color:#fff;font-weight:600;}

/* Hero variante "fiche" - barre amber a gauche + avatar (CRM .fiche-hero) */
.pui-hero--bar{background:linear-gradient(135deg,#1b1f4d 0%,var(--navy) 55%,#0c0f2c 100%);border-radius:var(--radius-xl);padding:18px 22px 20px;overflow:hidden;}
.pui-hero--bar::before{right:auto;bottom:auto;left:0;top:0;width:4px;height:auto;background:var(--amber);border-radius:0;}
.pui-hero-avatar{width:50px;height:50px;border-radius:13px;background:rgba(255,255,255,.1);color:#fff;font:800 17px/1 var(--font);display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid rgba(255,255,255,.16);}
.pui-hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:8px;font:500 12px/1.3 var(--font);color:rgba(255,255,255,.72);}
.pui-hero-meta .pui-hero-sep{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.32);}
.pui-hero-statut{background:rgba(255,255,255,.14);color:#fff;padding:3px 10px;border-radius:var(--radius-pill);font:700 10.5px/1.3 var(--font);}
.pui-hero-tag{background:color-mix(in srgb, var(--amber) 20%, transparent);color:var(--amber-light);padding:3px 9px;border-radius:var(--radius-pill);font:600 10.5px/1.3 var(--font);}

/* Section a ancre numerotee (portal .section + .sec-anchor) - signature Paso */
.pui-section{padding:clamp(40px,5vw,64px) 0;}
.pui-section.gray{background:var(--gray-50);}
.pui-section-head{display:flex;gap:clamp(20px,3vw,40px);margin-bottom:clamp(24px,3vw,36px);align-items:start;}
.pui-sec-anchor{font-size:clamp(34px,4.5vw,56px);font-weight:800;color:var(--gray-150);letter-spacing:-2px;line-height:.9;font-variant-numeric:tabular-nums;flex-shrink:0;}
.pui-sec-anchor::before{content:'';display:block;width:24px;height:3px;background:var(--amber);border-radius:2px;margin-bottom:10px;}
.pui-sec-head-text{min-width:0;padding-top:12px;}
.pui-sec-title{font-size:clamp(20px, 2.4vw, 26px);font-weight:700;line-height:1.15;letter-spacing:-.015em;color:var(--navy);}
.pui-sec-subtitle{margin-top:6px;max-width:640px;font-size:13.5px;color:var(--gray-600);line-height:1.55;}

/* Zone d'app plein ecran (CRM .zone) - themes dark/light */
.pui-zone{display:none;min-height:100vh;padding:38px 44px;}
.pui-zone.active{display:block;}
.pui-zone--dark{background:var(--navy-deep);color:rgba(255,255,255,.9);}
.pui-zone--light{background:var(--gray-50);color:var(--navy);}
.pui-zone-head{margin-bottom:30px;}
.pui-zone-eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:var(--amber);}
.pui-zone-title{font-size:27px;font-weight:800;letter-spacing:-.02em;margin-top:7px;}
.pui-zone--dark .pui-zone-title{color:var(--white);}
.pui-zone-sub{font-size:13.5px;margin-top:8px;max-width:560px;line-height:1.55;}
.pui-zone--dark .pui-zone-sub{color:rgba(255,255,255,.55);}
.pui-zone--light .pui-zone-sub{color:var(--gray-600);}

/* Etat vide minimal (portal .empty) - texte italique */
.pui-empty{font-size:12.5px;color:var(--gray-400);font-style:italic;padding:8px 0;}

/* État vide / COMING-SOON — composant CANONIQUE de l'espace client (le « toit commun ») :
   carte centrée, icône en pastille amber, titre, texte, chip. SOURCE UNIQUE — onboarding,
   rapports, portal, plan-taggage l'utilisent (plus de carte d'état réinventée par surface). */
.pui-empty-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(40px,6vw,60px) clamp(24px,4vw,40px);border-radius:var(--radius-xl);background:var(--white);border:1px solid var(--gray-200);box-shadow:var(--shadow-md);}
.pui-empty-card-icon{width:60px;height:60px;border-radius:50%;background:var(--amber-100);color:var(--amber-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-bottom:4px;}
.pui-empty-card-icon svg{width:28px;height:28px;}
.pui-empty-card-title{font-size:clamp(20px,2.6vw,25px);font-weight:800;letter-spacing:-.3px;margin-top:14px;color:var(--navy);}
.pui-empty-card-title .dot{color:var(--amber);}
.pui-empty-card-text{font-size:14px;line-height:1.65;margin-top:10px;max-width:460px;color:var(--gray-600);}
.pui-empty-card-chip{display:inline-block;margin-top:18px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:5px 13px;border-radius:var(--radius-pill);background:color-mix(in srgb, var(--amber) 14%, transparent);color:var(--amber-dark);}

/* Tuile stat simple (CRM .aq-ctxstat) - valeur + label, teintes bad/warn */
/* ═══════════════════════════════════════════════════════════════════════
   paso-ui.css - FAMILLES C (donnees) + D (tableaux)
   Port FIDELE : CSS copie tel quel depuis les fichiers source, seules les
   classes sont prefixees `pui-` et les scopes `.dash-v2 ` retires.
   Valeurs, var(--token), pseudo-classes, ::before/::after : inchanges.
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   FAMILLE C - DONNEES (graphes, barres, deltas, heatmap)
   ═══════════════════════════════════════════════════════════════════════ */

/* === C - Legende & toggle du graphe (complement de .pui-chart deja porte) ===
   Source : tools/crm/index.html .dash-v2 .chart-legend / .chart-toggle (L846-867)
   Le graphe .pui-chart existe deja ; on n'ajoute QUE la legende + le toggle. */
.pui-chart-legend{display:flex;gap:18px;margin-top:10px;padding-left:44px;}
.pui-chart-legend-item{display:inline-flex;align-items:center;gap:7px;font:500 11px/1 var(--font);color:var(--gray-600);}
.pui-chart-legend-swatch{width:16px;height:0;border-top:2px solid var(--amber);border-radius:2px;}
.pui-chart-legend-swatch.n1{border-top:2px dashed var(--navy-light);}

.pui-chart-toggle{display:inline-flex;border:1px solid var(--gray-200);border-radius:var(--radius-md);overflow:hidden;}
.pui-chart-toggle button{padding:7px 13px;background:transparent;border:none;border-left:1px solid var(--gray-200);font:600 11.5px/1 var(--font);color:var(--gray-600);transition:all .15s;cursor:pointer;}
.pui-chart-toggle button:first-child{border-left:none;}
.pui-chart-toggle button:hover{background:var(--gray-50);color:var(--navy);}
.pui-chart-toggle button.active{background:var(--navy);color:#fff;}


/* === C - Sparkline (mini-graphe en fond de tuile) ===
   Source : tools/crm/index.html .dash-kpi-spark (L593-594)
   Le path/area est genere en JS ; le CSS positionne le SVG derriere la valeur. */
.pui-sparkline{position:absolute;bottom:0;left:0;right:0;height:32px;pointer-events:none;}
.pui-sparkline path{opacity:.55;}


/* === C - Heatmap : grille cloisonnee (fiche 360) ===
   Source : tools/crm/index.html .f360-health / .f360-hc / .f360-hk / .f360-hv / .f360-hs (L1180-1185)
   Astuce separateurs fins : gap:1px sur fond gray-200, cellules blanches.
   "Heat" = etats good/warn/bad sur la valeur (.pui-heatmap-v.good/.warn/.bad). */
.pui-heatmap{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:1px;background:var(--gray-200);border:1px solid var(--gray-200);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:18px;}
.pui-heatmap-cell{background:#fff;padding:13px 15px;}
.pui-heatmap-k{font:700 8.5px/1 var(--font);text-transform:uppercase;letter-spacing:.1em;color:var(--gray-400);margin-bottom:6px;}
.pui-heatmap-v{font:800 16px/1.1 var(--font);color:var(--navy);font-variant-numeric:tabular-nums;}
.pui-heatmap-v.good{color:var(--success);}.pui-heatmap-v.warn{color:var(--amber-dark);}.pui-heatmap-v.bad{color:var(--error);}
.pui-heatmap-s{font:600 9.5px/1 var(--font);color:var(--gray-400);margin-top:4px;}


/* === C - Pacing : barre 3-tons good/warn/bad + marqueur + label (TRES reutilisee) ===
   Source canonique : tools/crm/index.html .ck-pacing (cockpit, L708-717)
   Variantes de label .warn/.bad reprises du cockpit dash-v2 .cell-pacing-label (L975-977).
   #6ee7b7 / #ff8a8e : litteraux dans la source (extremites de gradient), conserves tels quels. */
.pui-pacing{display:flex;flex-direction:column;gap:5px;}
.pui-pacing-top{display:flex;justify-content:space-between;font-size:10.5px;color:var(--gray-600);}
.pui-pacing-top strong{font:800 13.5px/1 var(--font);color:var(--navy);}
.pui-pacing-bar{position:relative;height:6px;border-radius:100px;background:var(--gray-100);overflow:hidden;}
.pui-pacing-fill{position:absolute;left:0;top:0;bottom:0;border-radius:100px;transition:width .4s;}
.pui-pacing-fill.good{background:linear-gradient(90deg,#6ee7b7,var(--success));}
.pui-pacing-fill.warn{background:linear-gradient(90deg,var(--amber-light),var(--amber));}
.pui-pacing-fill.bad{background:linear-gradient(90deg,#ff8a8e,var(--error));}
.pui-pacing-mark{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--gray-400);}
.pui-pacing-label{font-size:10px;color:var(--gray-400);}
.pui-pacing-label.warn{color:var(--amber-dark);}
.pui-pacing-label.bad{color:var(--error);}


/* === C - Funnel (a) : entonnoir d'acquisition, barres horizontales gradient ===
   Source : tools/crm/index.html .aq-funnel / .aq-fnbar (L485-495)
   Stages s3/s4/s5 colores. #bf7c12 / #177a5d / #3a8d63 : litteraux source, conserves.
   var(--navy-mid,var(--navy-mid)) : fallback litteral conserve tel quel. */
.pui-funnel{padding:22px;}
.pui-funnel-stage{margin-bottom:6px;}
.pui-funnel-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px;}
.pui-funnel-name{font:600 12px/1 var(--font);color:var(--navy);}
.pui-funnel-count{font:800 14px/1 var(--font);font-variant-numeric:tabular-nums;color:var(--navy);}
.pui-funnel-bar{height:30px;border-radius:var(--radius-md);display:flex;align-items:center;padding-left:12px;color:#fff;font:700 11px/1 var(--font);background:linear-gradient(90deg,var(--navy),var(--navy-mid,var(--navy-mid)));transition:width .3s;}
.pui-funnel-bar.s3{background:linear-gradient(90deg,var(--amber-dark),var(--amber));}
.pui-funnel-bar.s4{background:linear-gradient(90deg,#bf7c12,var(--amber-light));color:var(--navy);}
.pui-funnel-bar.s5{background:linear-gradient(90deg,#177a5d,#3a8d63);}
.pui-funnel-conv{font:600 10.5px/1 var(--font);color:var(--gray-400);margin:6px 0 6px 4px;}
.pui-funnel-conv b{color:var(--gray-600);font-weight:700;}

/* === C - Funnel (b) : variante grille 3-col (label | barre | compte) ===
   Source : tools/crm/index.html .fnl / .fnl-bar / .fnl-fill (L528-534)
   Fill amber en overlay, nombre dans la barre. */
.pui-funnel-grid{display:grid;gap:9px;}
.pui-funnel-grid-row{display:grid;grid-template-columns:120px 1fr 48px;align-items:center;gap:12px;}
.pui-funnel-grid-l{font-size:11.5px;color:var(--gray-600);font-weight:600;}
.pui-funnel-track{position:relative;height:26px;background:var(--gray-100);border-radius:var(--radius-md);overflow:hidden;}
.pui-funnel-track-fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--amber-light),var(--amber));border-radius:var(--radius-md);}
.pui-funnel-track-n{position:absolute;left:10px;top:50%;transform:translateY(-50%);font:800 12px/1 var(--font);color:var(--navy);}
.pui-funnel-grid-c{font-size:11px;color:var(--gray-400);text-align:right;font-variant-numeric:tabular-nums;}


/* ═══════════════════════════════════════════════════════════════════════
   FAMILLE D - TABLEAUX
   ═══════════════════════════════════════════════════════════════════════ */

/* === D - LE tableau cockpit (composant phare) ===
   Source : tools/crm/index.html .dash-v2 table.editorial + conteneur cockpit (L878-1008)
   Porte TOUT : conteneur, toolbar, filtres, scroll, thead sticky, lignes,
   ligne attention (lisere rouge), ligne selectionnee, checkbox custom,
   cellules client/avatar/name/perf/metrics/pacing/livs/next, delta, bulk-bar, foot. */

/* -- Conteneur & habillage -- */
.pui-cockpit-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-xl);overflow:hidden;}
.pui-cockpit-toolbar{display:flex;align-items:center;gap:12px;padding:16px 20px 14px;border-bottom:1px solid var(--gray-100);flex-wrap:wrap;}
.pui-cockpit-toolbar-title-block{flex:1;min-width:240px;}
.pui-cockpit-toolbar-title{font:800 17px/1.15 var(--font);color:var(--navy);letter-spacing:-.2px;}
.pui-cockpit-toolbar-meta{font:500 11.5px/1 var(--font);color:var(--gray-400);margin-top:3px;font-variant-numeric:tabular-nums;}
.pui-cockpit-search{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-md);width:260px;transition:border-color .15s;}
.pui-cockpit-search:focus-within{border-color:var(--amber);}
.pui-cockpit-search svg{width:14px;height:14px;color:var(--gray-400);flex-shrink:0;}
.pui-cockpit-search input{flex:1;border:none;background:transparent;outline:none;font:500 13px/1 var(--font);color:var(--navy);}
.pui-cockpit-search input::placeholder{color:var(--gray-400);}
.pui-cockpit-filters{display:flex;gap:8px;padding:12px 20px;border-bottom:1px solid var(--gray-100);flex-wrap:wrap;background:var(--gray-50);}
.pui-cockpit-scroll{max-height:760px;overflow:auto;}
.pui-cockpit-foot{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-top:1px solid var(--gray-100);background:var(--gray-50);}
.pui-cockpit-foot-info{font:500 12px/1 var(--font);color:var(--gray-600);font-variant-numeric:tabular-nums;}
.pui-cockpit-foot-info b{color:var(--navy);font-weight:700;}

/* -- La table editoriale -- */
.pui-table-editorial{width:100%;border-collapse:collapse;font:400 13px/1 var(--font);font-variant-numeric:tabular-nums;}
.pui-table-editorial thead{position:sticky;top:0;background:#fff;z-index:2;box-shadow:0 1px 0 var(--gray-200);}
.pui-table-editorial th{text-align:left;font:700 9.5px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--gray-400);padding:14px 14px 10px;white-space:nowrap;user-select:none;}
.pui-table-editorial th.check,.pui-table-editorial td.check{width:36px;padding-left:18px;padding-right:0;}
.pui-table-editorial tbody tr{border-bottom:1px solid var(--gray-100);transition:background .14s;cursor:pointer;}
.pui-table-editorial tbody tr:last-child{border-bottom:none;}
.pui-table-editorial tbody tr:hover{background:var(--gray-50);}
.pui-table-editorial tbody tr.attention{background:rgba(194,58,79,.025);}
.pui-table-editorial tbody tr.attention:hover{background:rgba(194,58,79,.05);}
.pui-table-editorial tbody tr.attention td:first-child{box-shadow:inset 3px 0 0 var(--error);}
.pui-table-editorial tbody tr.row-selected{background:color-mix(in srgb, var(--amber) 5%, transparent);}
.pui-table-editorial td{padding:12px 14px;color:var(--navy);vertical-align:middle;}

/* -- Checkbox custom amber -- */
.pui-row-check{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--gray-300);background:var(--white);cursor:pointer;appearance:none;-webkit-appearance:none;position:relative;transition:all .14s;flex-shrink:0;}
.pui-row-check:hover{border-color:var(--amber);}
.pui-row-check:checked{background:var(--amber);border-color:var(--amber);}
.pui-row-check:checked::after{content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}

/* -- Cellule client : avatar + nom + actions au survol -- */
.pui-cell-client{display:flex;align-items:center;gap:10px;min-width:0;}
.pui-cell-avatar{width:30px;height:30px;border-radius:7px;background:color-mix(in srgb, var(--navy) 5%, transparent);color:var(--navy);font:800 11px/1 var(--font);letter-spacing:-.2px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--gray-200);}
.pui-cell-avatar.amber{background:color-mix(in srgb, var(--amber) 8%, transparent);color:var(--amber-dark);border-color:color-mix(in srgb, var(--amber) 20%, transparent);}
.pui-cell-avatar.alert{background:rgba(194,58,79,.08);color:var(--error);border-color:rgba(194,58,79,.2);}
.pui-cell-name{display:flex;flex-direction:column;gap:2px;min-width:0;}
.pui-cell-name b{font:700 13px/1.2 var(--font);color:var(--navy);letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pui-cell-name span{font:500 10.5px/1 var(--font);color:var(--gray-400);letter-spacing:.04em;text-transform:uppercase;}
.pui-cell-client-actions{display:flex;align-items:center;gap:6px;margin-left:auto;padding-left:8px;}
.pui-nba-flag{width:20px;height:20px;border-radius:5px;background:color-mix(in srgb, var(--amber) 12%, transparent);color:var(--amber-dark);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;cursor:help;}
.pui-nba-flag svg{width:12px;height:12px;}
/* Lien d'action revele au survol de la ligne (pattern important) */
.pui-gads-link{width:24px;height:24px;border-radius:5px;background:transparent;border:1px solid transparent;color:var(--gray-400);display:inline-flex;align-items:center;justify-content:center;opacity:0;transition:all .14s;flex-shrink:0;}
.pui-table-editorial tbody tr:hover .pui-gads-link{opacity:1;}
.pui-gads-link:hover{background:rgba(66,72,122,.08);color:var(--navy);border-color:var(--gray-200);}
.pui-gads-link svg{width:13px;height:13px;}

/* -- Cellule perf (valeur + cible, tons good/warn/bad) -- */
.pui-cell-perf{display:flex;flex-direction:column;gap:4px;}
.pui-cell-perf-main{font:800 16px/1 var(--font);color:var(--navy);letter-spacing:-.02em;}
.pui-cell-perf-main.good{color:var(--success-soft);}
.pui-cell-perf-main.warn{color:var(--amber-dark);}
.pui-cell-perf-main.bad{color:var(--error);}
.pui-cell-perf-target{font:500 10px/1 var(--font);color:var(--gray-400);}

/* -- Cellule metriques + delta -- */
.pui-cell-metrics{display:flex;align-items:baseline;gap:16px;font-variant-numeric:tabular-nums;white-space:nowrap;}
.pui-cell-metric{display:inline-flex;align-items:baseline;gap:4px;font:500 11.5px/1.3 var(--font);color:var(--gray-600);}
.pui-cell-metric b{color:var(--navy);font-weight:700;}
.pui-cell-metric .delta{font:700 10px/1 var(--font);margin-left:2px;}
.pui-cell-metric .delta.up{color:var(--success-soft);}
.pui-cell-metric .delta.down{color:var(--error);}
.pui-cell-metric .delta.flat{color:var(--gray-400);}

/* -- Cellule pacing (barre 3-tons + marqueur, integree au tableau) -- */
.pui-cell-pacing{display:flex;flex-direction:column;gap:5px;min-width:130px;}
.pui-cell-pacing-top{display:flex;justify-content:space-between;font:500 10.5px/1 var(--font);color:var(--gray-600);}
.pui-cell-pacing-top strong{font:800 13px/1 var(--font);color:var(--navy);}
.pui-cell-pacing-bar{position:relative;height:6px;border-radius:100px;background:var(--gray-100);overflow:hidden;}
.pui-cell-pacing-fill{position:absolute;left:0;top:0;bottom:0;border-radius:100px;}
.pui-cell-pacing-fill.good{background:linear-gradient(90deg,#6ee7b7,var(--success-soft));}
.pui-cell-pacing-fill.warn{background:linear-gradient(90deg,var(--amber-light),var(--amber));}
.pui-cell-pacing-fill.bad{background:linear-gradient(90deg,#ff8a8e,var(--error));}
.pui-cell-pacing-mark{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--gray-400);}
.pui-cell-pacing-label{font:500 10px/1 var(--font);color:var(--gray-400);}
.pui-cell-pacing-label.warn{color:var(--amber-dark);}
.pui-cell-pacing-label.bad{color:var(--error);}

/* -- Cellule livrables (badges 22px ok/warn/bad) -- */
.pui-cell-livs{display:flex;gap:5px;}
.pui-cell-liv{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:5px;font:700 9.5px/1 var(--font);background:var(--gray-50);color:var(--gray-400);border:1px solid var(--gray-200);cursor:help;}
.pui-cell-liv.ok{background:rgba(26,122,94,.10);color:var(--success);border-color:rgba(26,122,94,.25);}
.pui-cell-liv.warn{background:color-mix(in srgb, var(--amber) 10%, transparent);color:var(--amber-dark);border-color:color-mix(in srgb, var(--amber) 30%, transparent);}
.pui-cell-liv.bad{background:rgba(194,58,79,.10);color:var(--error);border-color:rgba(194,58,79,.30);}

/* -- Cellule prochaine action (libelle + sous-libelle late/today) -- */
.pui-cell-next{display:flex;flex-direction:column;gap:2px;min-width:0;}
.pui-cell-next-main{font:600 12px/1.3 var(--font);color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;}
.pui-cell-next-sub{font:600 10px/1 var(--font);color:var(--gray-400);text-transform:uppercase;letter-spacing:.06em;}
.pui-cell-next-sub.late{color:var(--error);}
.pui-cell-next-sub.today{color:var(--amber-dark);}

/* -- Barre d'action groupee (navy, masquee -> .visible) -- */
.pui-bulk-bar{display:none;align-items:center;gap:14px;padding:12px 20px;background:var(--navy);color:#fff;border-radius:var(--radius-md);margin:0 20px 14px;box-shadow:var(--shadow-md);}
.pui-bulk-bar.visible{display:flex;}
.pui-bulk-bar-count{font:700 12.5px/1 var(--font);display:inline-flex;align-items:center;gap:8px;}
.pui-bulk-bar-count .n{background:var(--amber);color:var(--navy);border-radius:var(--radius-pill);padding:3px 9px;font-weight:800;}
.pui-bulk-bar-sep{width:1px;height:22px;background:rgba(255,255,255,.15);}
.pui-bulk-bar-actions{display:flex;gap:8px;flex:1;flex-wrap:wrap;}
.pui-bulk-action{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-md);color:#fff;font:600 12px/1 var(--font);cursor:pointer;transition:all .15s;}
.pui-bulk-action:hover{background:rgba(255,255,255,.14);}
.pui-bulk-action.primary{background:var(--amber);border-color:var(--amber);color:var(--navy);}
.pui-bulk-action svg{width:13px;height:13px;}
.pui-bulk-bar-clear{background:none;border:none;color:rgba(255,255,255,.6);font:600 12px/1 var(--font);cursor:pointer;}
.pui-bulk-bar-clear:hover{color:#fff;}

/* -- Etat vide du cockpit -- */
.pui-cockpit-empty{padding:32px 16px;text-align:center;color:var(--gray-400);font:400 13px/1.5 var(--font);}

/* -- Responsive : la table passe en cartes en dessous de 1100px -- */
@media (max-width:1100px){
  .pui-table-editorial thead{display:none;}
  .pui-table-editorial tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 14px;}
  .pui-table-editorial td{padding:4px 0;}
}


/* === D - Table comparative (rapports) ===
   Source : tools/rapports/index.html .comp-table + wrapper (L501-582)
   Colonne "courant" en amber, colonne delta coloree up/down/flat.
   #3a8d63 / #fafbfc : litteraux source, conserves tels quels. */
.pui-table-compare-wrap{margin:clamp(28px,3.5vw,40px) auto;max-width:1280px;padding:0 clamp(28px,4vw,40px);}
.pui-table-compare-wrap > .pui-table-compare-inner{background:#fff;border:1px solid var(--gray-200);border-radius:14px;overflow:hidden;}
.pui-table-compare-head{padding:18px 22px;border-bottom:1px solid var(--gray-100);}
.pui-table-compare-tag{font:700 11px/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--amber);display:inline-flex;align-items:center;gap:12px;}
.pui-table-compare-tag::after{content:'';width:60px;height:1px;background:var(--gray-200);}
.pui-table-compare-h{font:800 17px/1.15 var(--font);color:var(--navy);letter-spacing:-.3px;margin-top:6px;}
.pui-table-compare-h .dot{color:var(--amber);}
.pui-table-compare-scroll{overflow-x:auto;}
.pui-table-compare{width:100%;border-collapse:collapse;font:400 13px/1 var(--font);font-variant-numeric:tabular-nums;min-width:560px;}
.pui-table-compare thead{background:#fff;}
.pui-table-compare thead th{font:700 10px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--gray-400);padding:14px 18px 12px;border-bottom:1px solid var(--gray-200);text-align:right;white-space:nowrap;}
.pui-table-compare thead th:first-child{text-align:left;}
.pui-table-compare thead th.current{color:var(--amber-dark);}
.pui-table-compare thead th.delta-col{color:var(--gray-400);}
.pui-table-compare tbody tr{border-bottom:1px solid var(--gray-100);transition:background .15s;}
.pui-table-compare tbody tr:last-child{border-bottom:none;}
.pui-table-compare tbody tr:hover{background:#fafbfc;}
.pui-table-compare tbody td{padding:14px 18px;color:var(--navy);font-weight:600;text-align:right;vertical-align:middle;}
.pui-table-compare tbody td.metric{text-align:left;font-weight:700;color:var(--navy);line-height:1.3;}
.pui-table-compare tbody td.metric .sub{display:block;font:500 11px/1.3 var(--font);color:var(--gray-400);margin-top:3px;letter-spacing:.01em;}
.pui-table-compare tbody td.current{font-weight:700;color:var(--navy);}
.pui-table-compare tbody td.delta{font:700 11px/1 var(--font);letter-spacing:-.1px;}
.pui-table-compare tbody td.delta.up{color:#3a8d63;}
.pui-table-compare tbody td.delta.down{color:var(--bad);}
.pui-table-compare tbody td.delta.flat{color:var(--gray-400);}


/* === D - Table data dense (drawer perf) ===
   Source : tools/crm/index.html table.dd-table + wrap (L1131-1138)
   Colonne 1 figee a gauche + header sticky en haut + ligne total. */
.pui-table-data-wrap{overflow-x:auto;border:1px solid var(--gray-200);border-radius:var(--radius-md);margin-bottom:26px;}
.pui-table-data{width:100%;border-collapse:collapse;font:400 12px/1 var(--font);font-variant-numeric:tabular-nums;white-space:nowrap;}
.pui-table-data thead th{position:sticky;top:0;background:#fff;font:700 9.5px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--gray-400);padding:12px 11px 10px;text-align:right;border-bottom:1px solid var(--gray-200);}
.pui-table-data thead th:first-child{text-align:left;position:sticky;left:0;z-index:3;}
.pui-table-data tbody td{padding:9px 11px;text-align:right;color:var(--navy);font-weight:600;border-bottom:1px solid var(--gray-100);}
.pui-table-data tbody td:first-child{text-align:left;color:var(--gray-600);position:sticky;left:0;background:#fff;}
.pui-table-data tbody tr:last-child td{border-bottom:none;}
.pui-table-data tbody tr.total td{font-weight:800;border-top:2px solid var(--gray-200);background:var(--gray-50);}


/* === D - Liste legere (portefeuille, grille de colonnes) ===
   Source : tools/crm/index.html .list / .list-head / .list-row (L204-216)
   En-tete gris, lignes cliquables ; nb de colonnes a redefinir par usage. */
.pui-list{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);}
.pui-list-head,.pui-list-row{display:grid;grid-template-columns:2.2fr 1fr 1fr 1.1fr 1fr;gap:12px;padding:13px 18px;align-items:center;}
.pui-list-head{background:var(--gray-50);border-bottom:1px solid var(--gray-200);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--gray-400);}
.pui-list-row{border-top:1px solid var(--gray-100);cursor:pointer;transition:background .14s;}
.pui-list-row:first-of-type{border-top:0;}
.pui-list-row:hover{background:var(--gray-50);}
.pui-list-name{font-size:13.5px;font-weight:700;color:var(--navy);}
.pui-list-meta{font-size:11px;color:var(--gray-400);margin-top:2px;}
.pui-list-cell{font-size:12.5px;color:var(--gray-600);}
.pui-list-empty{padding:50px 20px;text-align:center;color:var(--gray-400);font-size:13px;}

/* Liste cle/valeur (dt/dd deux colonnes) - source : tools/portal/index.html .kv (L446-448) */
.pui-list-kv{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:13px;}
.pui-list-kv dt{color:var(--gray-400);font-weight:500;}
.pui-list-kv dd{color:var(--navy);font-weight:600;font-variant-numeric:tabular-nums;text-align:right;}
/* ═══════════════════════════════════════════════════════════════
   pui-css-3.css - Familles E (nav/overlay) + F (formulaires)
   Port FIDELE des composants des outils Paso vers la bibliotheque
   partagee .pui-*. CSS copie a l'identique (valeurs/tokens/pseudo-
   classes inchanges) ; seules les classes sont renommees en pui-*
   et les scopes .dash-v2 retires.

   Tokens : voir tools/_shared/paso-ui.css :root (deja complet :
   navy*, amber*, gray-50..800, success(-soft), error, rose, good*,
   bad*, info*, purple*, surface, radius-*, ease, t-fast/base, etc.).
   Ce fichier NE redefinit PAS :root (il consomme les tokens).
   ─────────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════
   FAMILLE E - NAVIGATION / OVERLAY
   ═══════════════════════════════════════════════════════════════ */

/* ─── E1. Sidebar (barre laterale navy CRM) ──────────────────────
   Source : tools/crm/index.html .sidebar / .nav-item (L97-123) */
.pui-sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);background:var(--navy);
  border-right:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;
  padding:24px 14px 18px;z-index:20;}
.pui-sidebar-brand{padding:0 10px 4px;}
.pui-sidebar-brand .pui-logo{font-size:21px;color:var(--white);}
.pui-sidebar-brand-sub{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  color:var(--navy-light);margin-top:5px;}
.pui-sidebar-sections{flex:1;margin-top:22px;overflow-y:auto;}
.pui-sidebar-section{margin-bottom:20px;}
.pui-sidebar-nav{display:flex;flex-direction:column;gap:2px;}
.pui-nav-group-label{padding:0 12px 9px;font-size:9.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;color:rgba(255,255,255,.34);}
.pui-nav-item{display:flex;align-items:center;gap:11px;width:100%;background:none;border:0;
  padding:9px 12px;border-radius:var(--radius-md);color:rgba(255,255,255,.7);font-size:13px;font-weight:600;text-align:left;cursor:pointer;
  transition:background .15s,color .15s;}
.pui-nav-item:hover{background:rgba(255,255,255,.05);color:#fff;}
.pui-nav-item.active{background:color-mix(in srgb, var(--amber) 14%, transparent);color:var(--amber-light);}
.pui-nav-item svg{width:16px;height:16px;flex-shrink:0;color:rgba(255,255,255,.5);}
.pui-nav-item:hover svg{color:rgba(255,255,255,.85);}
.pui-nav-item.active svg{color:var(--amber);}
.pui-sidebar-foot{margin-top:auto;padding:16px 12px 0;border-top:1px solid rgba(255,255,255,.07);}
.pui-sidebar-conn{font-size:10.5px;color:var(--navy-light);line-height:1.6;margin-bottom:12px;}
.pui-sidebar-conn b{color:rgba(255,255,255,.78);font-weight:600;}
.pui-sidebar-logout{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;
  color:rgba(255,255,255,.5);font-size:12px;padding:6px 0;transition:color .18s;}
.pui-sidebar-logout:hover{color:var(--amber-light);}
.pui-sidebar-logout svg{width:15px;height:15px;}


/* ─── E2. Onglets (.pui-tabs) - 2 styles ────────────────────────── */

/* (a) Onglets fiche CRM : sous-ligne amber sur .active
   Source : tools/crm/index.html .tabs / .tab (L260-264) */
.pui-tabs{display:flex;gap:1px;border-bottom:1px solid var(--gray-200);margin-bottom:22px;flex-wrap:wrap;}
.pui-tab{background:none;border:0;padding:9px 13px;font-size:12.5px;font-weight:600;color:var(--gray-600);
  border-bottom:2px solid transparent;margin-bottom:-1px;}
.pui-tab:hover{color:var(--navy);}
.pui-tab.active{color:var(--navy);border-bottom-color:var(--amber);}

/* (b) Onglets simples (drawer) : uppercase, amber, scroll-x sans scrollbar
   Source : tools/crm/index.html .dd-tabs / .dd-tab (L1097-1101) */
.pui-tabs-simple{display:flex;padding:0 32px;border-bottom:1px solid var(--gray-100);background:var(--gray-50);overflow-x:auto;scrollbar-width:none;}
.pui-tabs-simple::-webkit-scrollbar{display:none;}
.pui-tab-simple{font:700 11px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--gray-400);padding:14px 0;margin-right:24px;background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:all .15s;white-space:nowrap;flex-shrink:0;}
.pui-tab-simple:hover{color:var(--navy);}
.pui-tab-simple.active{color:var(--amber);border-bottom-color:var(--amber);}




/* ─── E4. Filter chip (chips de filtre cockpit) ──────────────────
   Source : tools/crm/index.html .chip cockpit-filters (L894-897) */
.pui-filter-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-pill);color:var(--gray-600);font:600 11.5px/1 var(--font);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:all .14s;}
.pui-filter-chip:hover{border-color:var(--gray-400);color:var(--navy);}
.pui-filter-chip.active{background:color-mix(in srgb, var(--amber) 10%, transparent);border-color:color-mix(in srgb, var(--amber) 35%, transparent);color:var(--amber-dark);}
.pui-filter-chip-count{font-weight:700;opacity:.7;}


/* ─── E5. Drawer (tiroir lateral droit CRM dash-v2) - GROS COMPOSANT
   Source : tools/crm/index.html .dd-* (L1077-1166).
   Porte TOUT : backdrop, slide, barre amber, header hero, status,
   tabs, panes, sections, NBA, KPIs, prop-rows, activite, empty,
   table perf, listes contrat/audit/rapport, notes, footer, boutons. */
.pui-drawer-backdrop{position:fixed;inset:0;background:rgba(10,12,30,.45);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .3s cubic-bezier(.22,1,.36,1);z-index:60;}
.pui-drawer-backdrop.open{opacity:1;pointer-events:all;}
.pui-drawer{position:fixed;top:0;right:0;bottom:0;width:clamp(440px,52vw,760px);background:#fff;border-radius:16px 0 0 16px;box-shadow:-24px 0 64px color-mix(in srgb, var(--navy) 18%, transparent);transform:translateX(100%);transition:transform .35s cubic-bezier(.22,1,.36,1);z-index:61;display:flex;flex-direction:column;overflow:hidden;font-family:var(--font);}
.pui-drawer.open{transform:translateX(0);}
.pui-drawer::before{content:'';position:absolute;left:0;top:24px;width:3px;height:32px;background:var(--amber);border-radius:0 2px 2px 0;}
.pui-drawer-head{padding:26px 32px 22px;border-bottom:1px solid var(--gray-100);background:#fff;}
.pui-drawer-eyebrow-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.pui-drawer-eyebrow{font:700 10px/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--amber);}
.pui-drawer-close{width:32px;height:32px;border-radius:8px;background:transparent;border:none;color:var(--gray-400);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;}
.pui-drawer-close:hover{background:var(--gray-100);color:var(--navy);}
.pui-drawer-close svg{width:16px;height:16px;}
.pui-drawer-hero{display:flex;align-items:center;gap:16px;}
.pui-drawer-avatar{width:52px;height:52px;border-radius:11px;background:color-mix(in srgb, var(--amber) 8%, transparent);color:var(--amber-dark);font:800 17px/1 var(--font);display:inline-flex;align-items:center;justify-content:center;border:1px solid color-mix(in srgb, var(--amber) 15%, transparent);flex-shrink:0;}
.pui-drawer-hero-text{display:flex;flex-direction:column;gap:6px;min-width:0;}
.pui-drawer-hero-name{font:800 22px/1.15 var(--font);letter-spacing:-.4px;color:var(--navy);}
.pui-drawer-hero-meta{display:flex;align-items:center;gap:10px;font:500 12.5px/1 var(--font);color:var(--gray-400);flex-wrap:wrap;}
.pui-drawer-hero-meta .sep{width:3px;height:3px;border-radius:50%;background:var(--gray-400);}
/* statut a point (texte colore + dot ::before en currentColor) */
.pui-drawer-status{font:700 11px/1 var(--font);display:inline-flex;align-items:center;gap:7px;letter-spacing:.04em;color:var(--success-soft);}
.pui-drawer-status::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;}
.pui-drawer-status.alert{color:var(--error);}.pui-drawer-status.amber{color:var(--amber-dark);}.pui-drawer-status.muted{color:var(--gray-400);}
/* onglets du drawer (= .pui-tabs-simple, conserves ici pour le markup dd) */
.pui-drawer-tabs{display:flex;padding:0 32px;border-bottom:1px solid var(--gray-100);background:var(--gray-50);overflow-x:auto;scrollbar-width:none;}
.pui-drawer-tabs::-webkit-scrollbar{display:none;}
.pui-drawer-tab{font:700 11px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--gray-400);padding:14px 0;margin-right:24px;background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:all .15s;white-space:nowrap;flex-shrink:0;}
.pui-drawer-tab:hover{color:var(--navy);}
.pui-drawer-tab.active{color:var(--amber);border-bottom-color:var(--amber);}
.pui-drawer-body{padding:28px 32px 36px;overflow-y:auto;flex:1;}
.pui-drawer-pane{display:none;}.pui-drawer-pane.active{display:block;}
.pui-drawer-section{margin-bottom:28px;}
.pui-drawer-section h3{font:700 11px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--gray-600);margin:0 0 14px;}
/* next best action (carte gradient amber) */
.pui-drawer-nba{background:linear-gradient(135deg,color-mix(in srgb, var(--amber) 10%, transparent),color-mix(in srgb, var(--amber) 4%, transparent));border:1px solid color-mix(in srgb, var(--amber) 30%, transparent);border-radius:var(--radius-lg);padding:18px 20px;display:flex;gap:14px;align-items:flex-start;}
.pui-drawer-nba-icon{width:38px;height:38px;border-radius:var(--radius-md);background:var(--amber);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:var(--shadow-amber);}
.pui-drawer-nba-icon svg{width:19px;height:19px;}
.pui-drawer-nba-label{font:700 9.5px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--amber-dark);margin-bottom:6px;}
.pui-drawer-nba-text{font:600 13.5px/1.45 var(--font);color:var(--navy);}
/* KPIs (grille 4) */
.pui-drawer-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.pui-drawer-kpi{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:14px;display:flex;flex-direction:column;gap:4px;}
.pui-drawer-kpi-label{font:700 9.5px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--gray-400);}
.pui-drawer-kpi-value{font:800 19px/1 var(--font);color:var(--navy);letter-spacing:-.025em;font-variant-numeric:tabular-nums;}
/* prop-rows (cle/valeur) */
.pui-drawer-prop{display:flex;flex-direction:column;}
.pui-drawer-prop-row{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:11px 0;border-bottom:1px solid var(--gray-100);font:500 13.5px/1.4 var(--font);align-items:baseline;}
.pui-drawer-prop-row:last-child{border-bottom:none;}
.pui-drawer-prop-row .k{color:var(--gray-400);letter-spacing:.04em;font-size:12.5px;}
.pui-drawer-prop-row .v{color:var(--navy);font-weight:600;}
/* timeline activite */
.pui-drawer-act{display:flex;flex-direction:column;}
.pui-drawer-act-item{display:grid;grid-template-columns:12px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--gray-100);font:400 13px/1.5 var(--font);color:var(--gray-800);align-items:start;}
.pui-drawer-act-item:last-child{border-bottom:none;}
.pui-drawer-act-item .mk{width:7px;height:7px;border-radius:50%;background:var(--amber);margin-top:6px;}
.pui-drawer-act-item .when{font:600 10.5px/1.3 var(--font);color:var(--gray-400);letter-spacing:.04em;text-transform:uppercase;display:block;margin-bottom:2px;}
.pui-drawer-act-src{display:inline-block;padding:2px 7px;border-radius:4px;font:700 9px/1 var(--font);background:var(--gray-100);color:var(--gray-600);border:1px solid var(--gray-200);text-transform:uppercase;letter-spacing:.1em;margin-right:6px;}
/* etat vide drawer */
.pui-drawer-empty{font:italic 400 12.5px/1.5 var(--font);color:var(--gray-400);padding:10px 0;}
/* KPIs perf compacts (grille 4) */
.pui-drawer-perf-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:24px;}
.pui-drawer-perf-kpi{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:12px 13px;}
.pui-drawer-perf-kpi-label{font:700 9px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--gray-400);}
.pui-drawer-perf-kpi-value{font:800 18px/1 var(--font);color:var(--navy);margin-top:7px;font-variant-numeric:tabular-nums;}
/* table data drawer (colonnes figees + header sticky + total) */
.pui-drawer-table-wrap{overflow-x:auto;border:1px solid var(--gray-200);border-radius:var(--radius-md);margin-bottom:26px;}
table.pui-drawer-table{width:100%;border-collapse:collapse;font:400 12px/1 var(--font);font-variant-numeric:tabular-nums;white-space:nowrap;}
table.pui-drawer-table thead th{position:sticky;top:0;background:#fff;font:700 9.5px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--gray-400);padding:12px 11px 10px;text-align:right;border-bottom:1px solid var(--gray-200);}
table.pui-drawer-table thead th:first-child{text-align:left;position:sticky;left:0;z-index:3;}
table.pui-drawer-table tbody td{padding:9px 11px;text-align:right;color:var(--navy);font-weight:600;border-bottom:1px solid var(--gray-100);}
table.pui-drawer-table tbody td:first-child{text-align:left;color:var(--gray-600);position:sticky;left:0;background:#fff;}
table.pui-drawer-table tbody tr:last-child td{border-bottom:none;}
table.pui-drawer-table tbody tr.total td{font-weight:800;border-top:2px solid var(--gray-200);background:var(--gray-50);}
/* listes (contrat / audit / rapport) */
.pui-drawer-list{display:flex;flex-direction:column;gap:10px;}
.pui-drawer-lrow{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-md);}
.pui-drawer-lrow-icon{width:32px;height:32px;border-radius:7px;background:#fff;border:1px solid var(--gray-200);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--navy-mid);}
.pui-drawer-lrow-icon svg{width:15px;height:15px;}
.pui-drawer-lrow-body{flex:1;min-width:0;}
.pui-drawer-lrow-title{font:700 12.5px/1.3 var(--font);color:var(--navy);}
.pui-drawer-lrow-meta{font:500 10.5px/1 var(--font);color:var(--gray-400);margin-top:3px;}
.pui-drawer-lrow-val{font:800 14px/1 var(--font);color:var(--navy);font-variant-numeric:tabular-nums;flex-shrink:0;}
.pui-drawer-lrow-val .u{font-size:10px;color:var(--gray-400);font-weight:600;}
.pui-drawer-lrow-badge{font:700 9px/1 var(--font);text-transform:uppercase;letter-spacing:.08em;padding:4px 9px;border-radius:var(--radius-pill);flex-shrink:0;}
.pui-drawer-lrow-badge.ok{background:rgba(26,122,94,.10);color:var(--success);}
.pui-drawer-lrow-badge.warn{background:color-mix(in srgb, var(--amber) 12%, transparent);color:var(--amber-dark);}
.pui-drawer-note{font:500 11.5px/1.5 var(--font);color:var(--gray-400);margin-top:14px;}
/* notes (textarea) */
.pui-drawer-notes{width:100%;min-height:160px;border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:12px 14px;font:400 13px/1.6 var(--font);color:var(--navy);resize:vertical;box-sizing:border-box;background:#fff;}
.pui-drawer-notes:focus{outline:2px solid var(--amber);outline-offset:-1px;}
.pui-drawer-notes-bar{display:flex;align-items:center;gap:12px;margin-top:12px;}
.pui-drawer-notes-status{flex:1;font:500 11.5px/1 var(--font);color:var(--gray-400);}
.pui-drawer-notes-save{font:700 12px/1 var(--font);color:#fff;background:var(--navy);border:none;border-radius:var(--btn-radius);padding:10px 18px;cursor:pointer;transition:all .15s;}
.pui-drawer-notes-save:hover{background:var(--navy-mid);}
.pui-drawer-notes-save:disabled{opacity:.5;cursor:default;}
/* footer */
.pui-drawer-footer{padding:16px 32px;border-top:1px solid var(--gray-100);background:#fff;display:flex;align-items:center;gap:10px;}
.pui-drawer-footer .meta{flex:1;font:500 11.5px/1.3 var(--font);color:var(--gray-400);}
.pui-drawer-btn-ghost{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:8px;background:transparent;border:1px solid var(--gray-200);font:600 12px/1 var(--font);color:var(--navy);cursor:pointer;transition:all .15s;}
.pui-drawer-btn-ghost:hover{border-color:var(--gray-400);background:var(--gray-50);}
.pui-drawer-btn-amber{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--btn-radius);background:var(--amber);color:#fff;border:none;font:700 12.5px/1 var(--font);box-shadow:var(--shadow-amber);cursor:pointer;transition:all .2s;}
.pui-drawer-btn-amber:hover{background:var(--amber-dark);}
/* alerte drawer (= section anomalie dans le drawer) */
.pui-drawer-alert{border-radius:var(--radius-md);padding:12px 14px;background:rgba(194,58,79,.05);border:1px solid rgba(194,58,79,.18);}
.pui-drawer-alert.attention{background:color-mix(in srgb, var(--amber) 6%, transparent);border-color:color-mix(in srgb, var(--amber) 22%, transparent);}
.pui-drawer-alert-title{font:700 13px/1.35 var(--font);color:var(--navy);}
.pui-drawer-alert-meta{margin-top:4px;font:500 11.5px/1.4 var(--font);color:var(--gray-600);}
@media (max-width:640px){.pui-drawer{width:100%;border-radius:0;}.pui-drawer-kpis,.pui-drawer-perf-kpis{grid-template-columns:repeat(2,1fr);}}


/* ─── E6. Modale centree (.pui-modal) ────────────────────────────
   Source : tools/crm/index.html .modal / .modal-card (L554-564) */
.pui-modal{position:fixed;inset:0;background:rgba(10,13,40,.55);display:flex;align-items:center;
  justify-content:center;z-index:60;padding:24px;}
.pui-modal.hidden{display:none;}
.pui-modal-card{background:var(--white);border-radius:var(--radius-xl);max-width:440px;width:100%;
  padding:24px 25px;box-shadow:var(--shadow-lg);}
.pui-modal-k{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--amber);}
.pui-modal-title{font-size:18px;font-weight:800;color:var(--navy);margin-top:5px;}
.pui-modal-body{font-size:13px;color:var(--gray-600);margin-top:15px;}
.pui-modal-body .ml{display:flex;justify-content:space-between;gap:14px;padding:6px 0;border-bottom:1px solid var(--gray-100);}
.pui-modal-body .ml b{color:var(--navy);font-weight:600;text-align:right;}
.pui-modal-actions{display:flex;gap:9px;margin-top:21px;align-items:center;}


/* ─── E7. Toast (notification flottante) - 2 sources ─────────────── */

/* (a) CRM : bottom-center, slide+fade, variantes error/success
   Source : tools/crm/index.html .toast (L169-175) */
.pui-toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--navy);color:var(--white);font-size:13px;font-weight:500;
  padding:12px 20px;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:80;max-width:90vw;}
.pui-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.pui-toast.error{background:var(--error);}
.pui-toast.success{background:var(--success);}

/* (b) Rapports : variante a point colore (.pui-toast-dot), radius-lg
   Source : tools/rapports/index.html #toast / .tdot (L1123-1133) */
.pui-toast--dot{position:fixed;left:50%;bottom:26px;transform:translate(-50%,80px);
  background:var(--navy);color:#fff;padding:11px 18px;border-radius:var(--radius-lg);
  font-size:12.5px;font-weight:500;display:flex;align-items:center;gap:9px;
  box-shadow:var(--shadow-lg);opacity:0;
  transition:transform 300ms var(--ease),opacity 300ms;
  pointer-events:none;z-index:200;max-width:90vw;}
.pui-toast--dot.show{transform:translate(-50%,0);opacity:1;}
.pui-toast--dot .pui-toast-dot{width:8px;height:8px;border-radius:50%;background:var(--amber);flex-shrink:0;}
.pui-toast--dot.warn .pui-toast-dot{background:var(--error);}


/* ─── E8. Topbar (barre superieure d'app navy) - 2 sources ───────── */

/* (a) Portal : header navy + logo carre blanc P.
   Source : tools/portal/index.html .paso-header / .brand / .logo-mark (L64-99) */
.pui-topbar{background:var(--navy);color:#fff;border-bottom:1px solid rgba(255,255,255,.06);font-family:var(--font);}
.pui-topbar-inner{display:flex;align-items:center;gap:18px;padding:18px 0;}
.pui-topbar-brand{display:flex;align-items:center;gap:12px;min-width:0;color:inherit;text-decoration:none;}
.pui-topbar-logo-mark{width:36px;height:36px;background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--font);font-weight:800;font-size:20px;letter-spacing:-.04em;color:var(--navy);flex-shrink:0;}
.pui-topbar-word{font-family:var(--font);font-size:14.5px;font-weight:700;letter-spacing:-.01em;}
.pui-topbar-sep{width:1px;height:22px;background:rgba(255,255,255,.15);flex-shrink:0;}
.pui-topbar-client{font-size:13px;color:rgba(255,255,255,.7);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pui-topbar-spacer{flex:1;}
.pui-topbar-meta{font-size:10.5px;font-weight:600;color:rgba(255,255,255,.4);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;}
.pui-topbar-cta{font-size:12.5px;color:var(--amber-light);font-weight:600;padding:8px 12px;border-radius:var(--radius-md);transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);}
.pui-topbar-cta:hover{background:rgba(255,255,255,.08);color:var(--amber);}

/* (b) Audit : barre fixe-hauteur, logo P. texte (dot amber)
   Source : tools/audit/index.html .topbar (L124-154). --hh = hauteur barre. */
.pui-topbar--bar{display:flex;align-items:center;gap:14px;padding:0 18px;background:var(--navy);color:#fff;border-bottom:1px solid rgba(255,255,255,.06);height:var(--hh,56px);}
.pui-topbar-logo{font-family:var(--font);font-weight:800;font-size:19px;line-height:1;letter-spacing:-0.025em;color:#FAFBFC;display:inline-flex;align-items:baseline;white-space:nowrap;text-decoration:none;}
.pui-topbar-logo .logo-dot{color:var(--amber);margin-left:-1px;}
.pui-topbar-tool{color:rgba(255,255,255,.55);font-size:12px;font-weight:500;letter-spacing:.02em;}
.pui-topbar-divider{width:1px;height:22px;background:rgba(255,255,255,.1);}


/* ─── E9. Bottombar (barre d'action fixe basse) ──────────────────
   Source : tools/audit/index.html .bottom-bar (L662-711).
   Inclut les boutons secondary/primary specifiques de la barre. */
.pui-bottombar{position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--gray-200);padding:10px 20px;display:flex;align-items:center;gap:14px;z-index:30;}
.pui-bottombar-counters{font-size:12px;color:var(--gray-600);flex:1;}
.pui-bottombar-counters strong{color:var(--gray-800);}
.pui-bottombar-actions{display:flex;gap:8px;}
.pui-bottombar .pui-btn-secondary{font-family:inherit;font-size:12.5px;font-weight:600;padding:8px 16px;background:#fff;border:1px solid var(--gray-200);border-radius:var(--btn-radius);color:var(--gray-800);cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast),transform var(--t-fast);}
.pui-bottombar .pui-btn-secondary:hover{border-color:var(--navy);background:var(--gray-50);transform:translateY(-1px);}
.pui-bottombar .pui-btn-primary{font-family:inherit;font-size:12.5px;font-weight:600;padding:9px 18px;background:var(--amber);border:0;border-radius:var(--btn-radius);color:#FAFBFC;cursor:pointer;display:inline-flex;align-items:center;gap:8px;box-shadow:var(--shadow-amber);transition:transform var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);}
.pui-bottombar .pui-btn-primary:hover{background:var(--amber);box-shadow:0 6px 22px color-mix(in srgb, var(--amber) 40%, transparent);transform:translateY(-1px);}
.pui-bottombar .pui-btn-primary:active{transform:translateY(0);}
.pui-bottombar .pui-btn-primary .badge{background:rgba(255,255,255,.22);color:#FAFBFC;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:700;}


/* ═══════════════════════════════════════════════════════════════
   FAMILLE F - FORMULAIRES
   ═══════════════════════════════════════════════════════════════ */

/* ─── F1. Champ standard (.pui-field) - label + input + focus ─────
   Source canonique : tools/crm/index.html .fld (L270-277) */
.pui-field{display:flex;flex-direction:column;min-width:0;}
.pui-field--wide{grid-column:1 / -1;}
.pui-field label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-400);margin-bottom:5px;}
.pui-field input,.pui-field select,.pui-field textarea{font-size:13px;padding:9px 11px;border:1px solid var(--gray-200);border-radius:var(--radius-md);background:var(--white);color:var(--navy);width:100%;font-family:inherit;}
.pui-field input:focus,.pui-field select:focus,.pui-field textarea:focus{outline:none;border-color:var(--amber);}
.pui-field textarea{resize:vertical;min-height:62px;line-height:1.5;}
.pui-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px 18px;}

/* Variante "focus halo" (label sentence-case + ring amber + req/opt)
   Source : tools/mini-audit/index.html .ma-field (L366-388) */
.pui-field--ring{display:flex;flex-direction:column;gap:6px;}
.pui-field--ring label{font-size:13px;font-weight:600;color:var(--gray-800);text-transform:none;letter-spacing:0;margin-bottom:0;}
.pui-field--ring label .req{color:var(--error);margin-left:2px;}
.pui-field--ring label .opt{color:var(--gray-400);font-weight:400;margin-left:4px;font-size:12px;}
.pui-field--ring input{font-family:var(--font);font-size:15px;padding:12px 14px;border:1.5px solid var(--gray-200);border-radius:var(--radius-md);background:#fff;color:var(--navy);transition:border-color var(--t-fast),box-shadow var(--t-fast);}
.pui-field input, .pui-field select{width:100%;font-size:14px;padding:11px 13px;border-radius:var(--radius-md);border:1px solid var(--gray-200);background:var(--white);color:var(--navy);transition:border-color .2s;}
.pui-field input:focus, .pui-field select:focus{outline:none;border-color:var(--amber);}
.pui-field--ring input:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px color-mix(in srgb, var(--amber) 12%, transparent);}


/* ─── F2. Checkbox custom amber (.pui-checkbox) - 2 variantes ────── */

/* (a) Case "appearance:none" + coche CSS (cockpit row-check)
   Source : tools/crm/index.html .row-check (L935-938) */
.pui-checkbox{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--gray-300);background:var(--white);cursor:pointer;appearance:none;-webkit-appearance:none;position:relative;transition:all .14s;flex-shrink:0;}
.pui-checkbox:hover{border-color:var(--amber);}
.pui-checkbox:checked{background:var(--amber);border-color:var(--amber);}
.pui-checkbox:checked::after{content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}

/* (b) Case carree a coche SVG (onboarding) - .on = succes
   Source : tools/crm/index.html .onb-check (L300-303) */
.pui-checkbox-svg{width:19px;height:19px;border-radius:5px;border:1.5px solid var(--gray-400);
  flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.pui-checkbox-svg.on{background:var(--success);border-color:var(--success);}
.pui-checkbox-svg svg{width:12px;height:12px;color:#fff;}

/* (c) Case native teintee amber (RGPD mini-audit) - accent-color
   Source : tools/mini-audit/index.html .ma-rgpd (L389-409) */
.pui-checkbox-row{display:flex;align-items:flex-start;gap:10px;padding:14px;background:var(--gray-50);border:1px solid var(--gray-150);border-radius:var(--radius-md);font-size:12.5px;color:var(--gray-600);line-height:1.5;cursor:pointer;}
.pui-checkbox-row input[type="checkbox"]{flex-shrink:0;margin-top:2px;width:16px;height:16px;cursor:pointer;accent-color:var(--amber);}

/* (d) DEFAUT GLOBAL : toute case/radio native (sans classe custom .pui-checkbox) adopte l'amber, check blanc.
   Unifie d'un coup les cases de TOUS les outils branches a la lib (fini le bleu natif du navigateur).
   Les cases custom .pui-checkbox (appearance:none) ignorent accent-color, donc inchangees. */
input[type="checkbox"]:not(.pui-checkbox), input[type="radio"]{accent-color:var(--amber);}


/* ─── F3. Barre de progression wizard (.pui-progress-steps) ───────
   Source : tools/mini-audit/index.html .ma-progress (L225-256) */
.pui-progress-steps{margin-bottom:32px;}
.pui-progress-meta{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:600;color:var(--gray-600);letter-spacing:.03em;margin-bottom:10px;text-transform:uppercase;}
.pui-progress-meta .pui-progress-theme{color:var(--gray-400);text-transform:none;font-weight:500;letter-spacing:0;}
.pui-progress-bar{height:4px;background:var(--gray-200);border-radius:var(--radius-pill);overflow:hidden;}
.pui-progress-fill{height:100%;background:var(--amber);border-radius:var(--radius-pill);transition:width 380ms var(--ease);}


/* ─── F4. Carte-reponse cliquable (.pui-answer-card) - COMPOSANT CLE
   Source : tools/mini-audit/index.html .ma-answer-card (L276-350).
   Grille [key | label | hint], hover navy lift, .selected ring amber,
   + touche clavier kbd. */
.pui-answer-card{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:16px;padding:18px 20px;background:#fff;border:1.5px solid var(--gray-200);border-radius:var(--radius-lg);cursor:pointer;text-align:left;font-family:var(--font);transition:border-color var(--t-fast),background var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);width:100%;}
.pui-answer-card:hover{border-color:var(--navy);background:var(--gray-50);transform:translateY(-1px);box-shadow:var(--shadow-sm);}
.pui-answer-card.selected{border-color:var(--amber);background:color-mix(in srgb, var(--amber) 5%, transparent);box-shadow:0 0 0 3px color-mix(in srgb, var(--amber) 10%, transparent);}
.pui-answer-key{width:28px;height:28px;border-radius:var(--radius-md);background:var(--gray-100);color:var(--gray-600);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;}
.pui-answer-card.selected .pui-answer-key{background:var(--amber);color:#FAFBFC;}
.pui-answer-label{font-size:16px;font-weight:600;color:var(--navy);}
.pui-answer-hint{font-size:12.5px;color:var(--gray-400);text-align:right;}
.pui-answers{display:grid;gap:12px;margin-bottom:28px;}
/* nav du wizard + indices de touches */
.pui-answer-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;}
.pui-answer-nav .pui-keys-hint{font-size:11.5px;color:var(--gray-400);letter-spacing:.02em;}
.pui-answer-nav .pui-keys-hint kbd{display:inline-block;padding:2px 6px;background:var(--gray-100);border:1px solid var(--gray-200);border-radius:4px;font-family:var(--font);font-size:10.5px;font-weight:600;color:var(--gray-700);}


/* ─── F5. Boutons Oui/Non/N.A. (.pui-answer-buttons) ──────────────
   Source : tools/audit/index.html .ans-btn (L515-529).
   3 etats selectionnes colores plein. */
.pui-answer-btn{font-family:inherit;font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:var(--radius-sm);border:1px solid var(--gray-200);background:#fff;color:var(--gray-600);cursor:pointer;}
.pui-answer-btn:hover{border-color:var(--gray-300);}
.pui-answer-btn.sel-oui{background:var(--success);border-color:var(--success);color:#fff;}
.pui-answer-btn.sel-non{background:var(--error);border-color:var(--error);color:#fff;}
.pui-answer-btn.sel-na{background:var(--gray-400);border-color:var(--gray-400);color:#fff;}


/* ─── F6. Editeur de liste add/remove (.pui-list-editor) ──────────
   Source : tools/rapports/index.html .ed-field / .ed-list / .ed-rm /
   .ed-add (L994-1050). Champs ring + items grid + bouton suppression
   rond + bouton "ajouter" dashed. */
.pui-list-editor-field{margin-bottom:11px;}
.pui-list-editor-field:last-child{margin-bottom:0;}
.pui-list-editor-field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:11px;}
.pui-list-editor-field label{display:block;font-size:11px;font-weight:600;color:var(--gray-700);letter-spacing:.04em;margin-bottom:5px;}
.pui-list-editor-field label .sub{font-weight:400;color:var(--gray-400);margin-left:4px;font-size:10.5px;}
.pui-list-editor-field input,.pui-list-editor-field textarea,.pui-list-editor-field select{width:100%;padding:9px 11px;font-size:13px;border:1.5px solid var(--gray-200);border-radius:var(--radius-md);font-family:var(--font);color:var(--navy);background:#fff;transition:border-color var(--t-fast),box-shadow var(--t-fast);}
.pui-list-editor-field input:focus,.pui-list-editor-field textarea:focus,.pui-list-editor-field select:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px color-mix(in srgb, var(--amber) 12%, transparent);}
.pui-list-editor-field textarea{resize:vertical;min-height:64px;line-height:1.55;}
.pui-list-editor{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.pui-list-editor-item{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:10px 12px;display:grid;gap:8px;position:relative;}
.pui-list-editor-item.action{grid-template-columns:140px 1fr 28px;align-items:start;}
.pui-list-editor-item.prio{grid-template-columns:1fr 28px;align-items:start;}
.pui-list-editor-item.prio .pui-list-editor-field-pair{display:grid;grid-template-columns:1fr;gap:6px;min-width:0;}
.pui-list-editor-item.prio .pui-list-editor-field-pair input{padding:7px 10px;font-size:12.5px;}
.pui-list-editor-item.prio .pui-list-editor-field-pair textarea{padding:7px 10px;font-size:12.5px;min-height:48px;}
.pui-list-editor-item .pui-list-editor-rm{width:28px;height:28px;border-radius:50%;background:transparent;border:none;cursor:pointer;color:var(--gray-400);display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;transition:color var(--t-fast),background var(--t-fast);}
.pui-list-editor-item .pui-list-editor-rm:hover{color:var(--bad);background:rgba(194,58,79,.10);}
.pui-list-editor-item select,.pui-list-editor-item input,.pui-list-editor-item textarea{border:1.5px solid var(--gray-200);background:#fff;padding:7px 10px;font-size:12.5px;font-family:var(--font);color:var(--navy);border-radius:var(--radius-md);width:100%;}
.pui-list-editor-item select:focus,.pui-list-editor-item input:focus,.pui-list-editor-item textarea:focus{outline:none;border-color:var(--amber);}
.pui-list-editor-item textarea{resize:vertical;min-height:56px;line-height:1.5;}
.pui-list-editor-add{background:transparent;border:1.5px dashed var(--gray-200);color:var(--gray-600);padding:9px 14px;border-radius:var(--radius-md);cursor:pointer;font-size:12.5px;font-family:var(--font);width:100%;transition:border-color var(--t-fast),color var(--t-fast);}
.pui-list-editor-add:hover{border-color:var(--amber);color:var(--amber-dark);}
@media (max-width:540px){.pui-list-editor-field-row{grid-template-columns:1fr;}}
/* ═══════════════════════════════════════════════════════════════
   pui-css-4.css - LOT 4 : familles G (specifiques cockpit) + H (misc)
   Port FIDELE des composants des outils Paso vers la lib partagee.
   CSS recopie a l'identique (valeurs/tokens/pseudo tels quels), seules
   les classes sont renommees en .pui-* et les prefixes .dash-v2 retires.
   A fusionner dans tools/_shared/paso-ui.css.
   Tokens requis (deja presents dans paso-ui.css :root) : navy, navy-mid,
   navy-light, navy-deep, amber, amber-light, amber-dark, amber-100,
   white, gray-50/100/150/200/300/400/600/700/800, success, success-soft,
   error, font, radius-sm/md/lg/xl/pill, btn-radius, shadow-sm/md/amber,
   ease, t-fast, t-base.
   ─────────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════
   G2 - .pui-nba : carte "Next Best Action" (gradient amber)
   Source : CRM .f360-nba (L1192-1196) = variante "ligne" + .dd-nba
   (L1106-1110) = variante "premium" (gradient + icone pleine amber).
   ─────────────────────────────────────────────────────────────── */
.pui-nba{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid color-mix(in srgb, var(--amber) 35%, transparent);border-left:3px solid var(--amber);border-radius:var(--radius-lg);padding:14px 18px;}
.pui-nba-ic{width:32px;height:32px;border-radius:8px;background:color-mix(in srgb, var(--amber) 10%, transparent);color:var(--amber-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.pui-nba-ic svg{width:17px;height:17px;}
.pui-nba-l{font:700 9px/1 var(--font);text-transform:uppercase;letter-spacing:.1em;color:var(--amber-dark);margin-bottom:3px;}
.pui-nba-t{font:600 13px/1.4 var(--font);color:var(--navy);}
/* Variante premium (gradient amber + icone pleine, ombre amber) - dd-nba */
.pui-nba--premium{background:linear-gradient(135deg,color-mix(in srgb, var(--amber) 10%, transparent),color-mix(in srgb, var(--amber) 4%, transparent));align-items:flex-start;padding:18px 20px;}
.pui-nba--premium .pui-nba-ic{width:38px;height:38px;border-radius:var(--radius-md);background:var(--amber);color:#fff;box-shadow:var(--shadow-amber);}
.pui-nba--premium .pui-nba-ic svg{width:19px;height:19px;}
.pui-nba--premium .pui-nba-l{font-size:9.5px;letter-spacing:.14em;margin-bottom:6px;}
.pui-nba--premium .pui-nba-t{font-size:13.5px;line-height:1.45;}


/* ═══════════════════════════════════════════════════════════════
   G3 - .pui-callout : encadre a liseré amber (carte + barre gauche)
   Source : CRM .aq-callout (L480-483).
   ─────────────────────────────────────────────────────────────── */
.pui-callout{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--gray-200);border-left:3px solid var(--amber);border-radius:var(--radius-lg);padding:14px 16px;margin-top:14px;}
.pui-callout > svg{width:18px;height:18px;color:var(--amber-dark);flex-shrink:0;margin-top:1px;}
.pui-callout-t{font:700 11.5px/1.3 var(--font);color:var(--navy);margin-bottom:4px;}
.pui-callout-x{font:400 12px/1.6 var(--font);color:var(--gray-600);}


/* ═══════════════════════════════════════════════════════════════
   G4 - .pui-source-tag : etiquette source de donnee (fiche 360)
   Source : CRM .f360-src (L1206-1212). Point colore par origine :
   ctx / contrat / perf / man / audit.
   ─────────────────────────────────────────────────────────────── */
.pui-source-tag{font:700 8px/1 var(--font);text-transform:uppercase;letter-spacing:.05em;padding:3px 7px;border-radius:var(--radius-pill);display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}
.pui-source-tag::before{content:'';width:5px;height:5px;border-radius:50%;}
.pui-source-tag.ctx{background:rgba(26,122,94,.1);color:var(--success);}.pui-source-tag.ctx::before{background:var(--success);}
.pui-source-tag.contrat{background:color-mix(in srgb, var(--amber) 12%, transparent);color:var(--amber-dark);}.pui-source-tag.contrat::before{background:var(--amber);}
.pui-source-tag.perf{background:rgba(59,130,200,.12);color:#2f6aa8;}.pui-source-tag.perf::before{background:#3b82c8;}
.pui-source-tag.man{background:var(--gray-100);color:var(--gray-600);}.pui-source-tag.man::before{background:var(--gray-400);}
.pui-source-tag.audit{background:rgba(124,92,191,.14);color:#6b4ea8;}.pui-source-tag.audit::before{background:#7c5cbf;}


/* ═══════════════════════════════════════════════════════════════
   G5 - .pui-sante-row : ligne santé compte (dot + libelle + valeur)
   Source : CRM .sante-row + .sante-dot + sd-good/warn/bad/na (L1187-1191).
   La valeur (<b>) est poussee a droite par margin-left:auto.
   ─────────────────────────────────────────────────────────────── */
.pui-sante-row{display:flex;align-items:center;gap:10px;padding:9px 0;font:500 12.5px/1.3 var(--font);color:var(--gray-600);border-bottom:1px solid var(--gray-100);}
.pui-sante-row:last-child{border-bottom:0;}
.pui-sante-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.pui-sante-dot.sd-good{background:var(--success);} .pui-sante-dot.sd-warn{background:var(--amber);} .pui-sante-dot.sd-bad{background:var(--error);} .pui-sante-dot.sd-na{background:var(--gray-400);}
.pui-sante-row b{margin-left:auto;color:var(--navy);font-weight:600;}


/* ═══════════════════════════════════════════════════════════════
   G6 - .pui-lead-row : ligne lead acquisition extensible
   Source : CRM .aq-row (L405-457). Heat dot + identite + source +
   signal + accroche + chevron, depliable en .pui-lead-detail.
   Sous-blocs portes : ctxstat, prob, hook (textarea IA), sequence.
   ─────────────────────────────────────────────────────────────── */
/* Conteneur liste (carte) + etat vide */
.pui-lead-list{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-xl);overflow:hidden;}
.pui-lead-empty{padding:26px 18px;text-align:center;color:var(--gray-400);font-size:13px;}
/* Ligne principale */
.pui-lead-row{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--gray-100);cursor:pointer;transition:background .15s;}
.pui-lead-row:last-child{border-bottom:0;}
.pui-lead-row:hover{background:var(--gray-50);}
.pui-lead-row.is-open{background:color-mix(in srgb, var(--amber) 5%, transparent);}
/* Pastille de chaleur (temperature lead) */
.pui-lead-heat{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.pui-lead-heat.chaud{background:var(--error);box-shadow:0 0 0 3px rgba(194,58,79,.14);}
.pui-lead-heat.tiede{background:var(--amber);box-shadow:0 0 0 3px color-mix(in srgb, var(--amber) 16%, transparent);}
.pui-lead-heat.froid{background:var(--gray-400);box-shadow:0 0 0 3px rgba(145,153,184,.16);}
/* Identite */
.pui-lead-id{min-width:178px;flex-shrink:0;}
.pui-lead-nm{font:700 13.5px/1.2 var(--font);color:var(--navy);}
.pui-lead-co{font:500 11.5px/1.2 var(--font);color:var(--gray-400);margin-top:3px;}
.pui-lead-mid{display:flex;align-items:center;gap:8px;flex-shrink:0;}
/* Etiquette source (canal d'acquisition) */
.pui-lead-src{font:600 10.5px/1 var(--font);padding:5px 9px;border-radius:var(--radius-pill);border:1px solid var(--gray-200);background:var(--gray-50);color:var(--gray-600);white-space:nowrap;display:inline-flex;align-items:center;gap:5px;}
.pui-lead-src svg{width:12px;height:12px;opacity:.7;}
/* Signal (pilule amber) */
.pui-lead-sig{font:700 10.5px/1 var(--font);color:var(--amber-dark);background:color-mix(in srgb, var(--amber) 10%, transparent);border-radius:var(--radius-pill);padding:5px 9px;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;}
.pui-lead-sig svg{width:12px;height:12px;}
/* Accroche (texte italique tronque) */
.pui-lead-hook{flex:1;min-width:0;font:400 12px/1.4 var(--font);color:var(--gray-600);font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Chevron "voir l'accroche" (rotation a l'ouverture) */
.pui-lead-ctav{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;font:600 12px/1 var(--font);color:var(--amber-dark);white-space:nowrap;}
.pui-lead-ctav svg{width:14px;height:14px;transition:transform .15s;}
.pui-lead-row.is-open .pui-lead-ctav svg{transform:rotate(90deg);}
/* Detail deplie (2 colonnes) */
.pui-lead-detail{display:grid;border-top:1px solid var(--gray-200);background:var(--gray-50);padding:22px;grid-template-columns:1fr 1.25fr;gap:22px;}
.pui-lead-dcol h4{font:700 10.5px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--gray-400);margin-bottom:13px;}
/* Stats contextuelles (tuiles dans le detail) */
.pui-lead-ctxs{display:flex;gap:10px;margin-bottom:16px;}
.pui-lead-ctxstat{flex:1;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:12px 13px;}
.pui-lead-ctxstat .v{font:800 22px/1 var(--font);font-variant-numeric:tabular-nums;letter-spacing:-.5px;color:var(--navy);}
.pui-lead-ctxstat .v.bad{color:var(--error);}.pui-lead-ctxstat .v.warn{color:var(--amber-dark);}
.pui-lead-ctxstat .l{font:600 10.5px/1.2 var(--font);color:var(--gray-600);margin-top:5px;}
/* Problemes detectes (numerotes) */
.pui-lead-problist{display:flex;flex-direction:column;gap:8px;}
.pui-lead-prob{display:flex;gap:9px;align-items:flex-start;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:10px 12px;}
.pui-lead-pn{width:18px;height:18px;border-radius:5px;background:rgba(194,58,79,.1);color:var(--error);font:800 10px/1 var(--font);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.pui-lead-pn.warn{background:color-mix(in srgb, var(--amber) 12%, transparent);color:var(--amber-dark);}
.pui-lead-prob-t{font:600 12px/1.35 var(--font);color:var(--navy);}
.pui-lead-prob-empty{font:400 12px/1.5 var(--font);color:var(--gray-400);}
/* En-tete bloc accroche + tag "IA" */
.pui-lead-hookhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;}
.pui-lead-hookhead h4{margin-bottom:0;}
.pui-lead-aitag{font:600 9.5px/1 var(--font);text-transform:uppercase;letter-spacing:.06em;color:var(--navy-mid);background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-pill);padding:4px 9px;}
/* Textarea accroche generee */
.pui-lead-hookta{width:100%;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:14px 15px;font:400 12.5px/1.65 var(--font);color:var(--navy);resize:vertical;min-height:150px;box-sizing:border-box;}
.pui-lead-hookta:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px color-mix(in srgb, var(--amber) 12%, transparent);}
.pui-lead-accrow{display:flex;align-items:center;gap:10px;margin-top:10px;}
.pui-lead-accerr{font:400 12px/1.5 var(--font);color:var(--error);background:rgba(194,58,79,.06);border-radius:var(--radius-md);padding:10px 12px;}
/* Sequence de suivi (timeline horizontale, pleine largeur) */
.pui-lead-seq{grid-column:1 / -1;border-top:1px solid var(--gray-200);padding-top:18px;margin-top:2px;}
.pui-lead-seq h4{font:700 10.5px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--gray-400);margin-bottom:16px;}
.pui-lead-seqtrack{display:flex;gap:0;}
.pui-lead-seqstep{flex:1;position:relative;padding-right:14px;}
.pui-lead-seqstep::before{content:"";position:absolute;top:6px;left:13px;right:0;height:2px;background:var(--gray-200);}
.pui-lead-seqstep:last-child{padding-right:0;}
.pui-lead-seqstep:last-child::before{display:none;}
.pui-lead-seqdot{width:13px;height:13px;border-radius:50%;background:#fff;border:2px solid var(--gray-300);position:relative;z-index:1;}
.pui-lead-seqwhen{font:700 10px/1 var(--font);color:var(--gray-400);margin-top:10px;letter-spacing:.04em;}
.pui-lead-seqlbl{font:600 11.5px/1.35 var(--font);color:var(--navy);margin-top:4px;padding-right:8px;}
.pui-lead-seqnote{font:400 11px/1.5 var(--font);color:var(--gray-400);margin-top:12px;}
.pui-lead-detact{grid-column:1 / -1;display:flex;gap:10px;border-top:1px solid var(--gray-200);padding-top:16px;}
@media(max-width:820px){.pui-lead-detail{grid-template-columns:1fr;}.pui-lead-hook{display:none;}.pui-lead-id{min-width:0;flex:1;}.pui-lead-seqtrack{flex-direction:column;gap:12px;}.pui-lead-seqstep{padding-right:0;}.pui-lead-seqstep::before{display:none;}}


/* ═══════════════════════════════════════════════════════════════
   G8 - .pui-channel-switch : switcher de canaux + chips canal
   Source : CRM dash-v2 .chan-switch / .chan (L900-905) + .ck / .ck-ic
   (L907-919). Pilule segmentee (fond gris, .active = blanc + ombre) ;
   chips ronds colores par plateforme (g-ads / meta / linkedin / tiktok).
   ─────────────────────────────────────────────────────────────── */
.pui-channel-switch{display:inline-flex;gap:4px;padding:4px;background:var(--gray-100);border-radius:var(--radius-pill);flex-wrap:wrap;}
.pui-chan{display:inline-flex;align-items:center;gap:7px;padding:7px 15px;border:none;background:transparent;border-radius:var(--radius-pill);color:var(--gray-600);font:600 12px/1 var(--font);letter-spacing:-.01em;cursor:pointer;transition:all .14s;}
.pui-chan:hover{color:var(--navy);}
.pui-chan.active{background:var(--white);color:var(--navy);box-shadow:var(--shadow-sm);}
.pui-chan .n{font:700 10.5px/1 var(--font);padding:2px 6px;border-radius:100px;background:color-mix(in srgb, var(--navy) 6%, transparent);color:var(--gray-600);}
.pui-chan.active .n{background:color-mix(in srgb, var(--amber) 14%, transparent);color:var(--amber-dark);}
/* Ligne de chips canal (KPI par plateforme) */
.pui-ckline{display:flex;flex-wrap:wrap;gap:8px;}
.pui-ck{display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 5px;background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-pill);}
.pui-ck-ic{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:800 9px/1 var(--font);color:#fff;background:var(--gray-400);flex-shrink:0;}
.pui-ck-ic.g-ads{background:#3b82c8;}
.pui-ck-ic.meta{background:#5b6cf0;}
.pui-ck-ic.linkedin{background:#0a66c2;}
.pui-ck-ic.tiktok{background:#111;}
.pui-ck-val{font:800 13px/1 var(--font);color:var(--navy);letter-spacing:-.02em;}
.pui-ck-val.good{color:var(--success-soft);}
.pui-ck-val.warn{color:var(--amber-dark);}
.pui-ck-val.bad{color:var(--error);}
.pui-ck-val.gray{color:var(--gray-400);}
.pui-ck-dep{font:800 14px/1 var(--font);color:var(--navy);letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.pui-ck-nodata{font:500 11.5px/1 var(--font);color:var(--gray-400);font-style:italic;}
/* Note multi-canal (bandeau de bas de table) */
.pui-ck-multinote{display:flex;align-items:center;gap:8px;padding:12px 20px;font:500 12px/1.4 var(--font);color:var(--gray-600);background:var(--gray-50);border-top:1px solid var(--gray-100);}
.pui-ck-multinote svg{width:15px;height:15px;color:var(--gray-400);flex-shrink:0;}


/* ═══════════════════════════════════════════════════════════════
   G9 - .pui-cal-bucket : cartes calendrier 30/60/90j
   Source : CRM dash-v2 .cal-bucket / .cal-item (L1052-1073). En-tete
   + compteur amber ; items a icone coloree par type (rapport / audit /
   contrat / anniv).
   ─────────────────────────────────────────────────────────────── */
.pui-cal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.pui-cal-bucket{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-xl);padding:20px 22px;}
.pui-cal-bucket-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--gray-100);}
.pui-cal-bucket-title{font:800 15px/1 var(--font);color:var(--navy);letter-spacing:-.2px;}
.pui-cal-bucket-range{font:600 10px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--gray-400);margin-top:6px;}
.pui-cal-bucket-count{font:800 13px/1 var(--font);color:var(--amber-dark);background:color-mix(in srgb, var(--amber) 10%, transparent);border-radius:var(--radius-pill);padding:4px 10px;font-variant-numeric:tabular-nums;}
.pui-cal-items{display:flex;flex-direction:column;gap:8px;}
.pui-cal-item{display:flex;align-items:flex-start;gap:10px;padding:9px 8px;border-bottom:1px solid var(--gray-100);border-radius:6px;margin:0 -8px;}
.pui-cal-item:last-child{border-bottom:none;}
.pui-cal-item.clickable{cursor:pointer;transition:background .14s;}
.pui-cal-item.clickable:hover{background:rgba(66,72,122,.05);}
.pui-cal-item-icon{width:28px;height:28px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.pui-cal-item-icon svg{width:14px;height:14px;}
.pui-cal-item-icon.rapport{background:rgba(26,122,94,.10);color:var(--success);}
.pui-cal-item-icon.audit{background:rgba(66,72,122,.10);color:var(--navy-mid);}
.pui-cal-item-icon.contrat{background:color-mix(in srgb, var(--amber) 12%, transparent);color:var(--amber-dark);}
.pui-cal-item-icon.anniv{background:rgba(145,153,184,.16);color:var(--gray-600);}
.pui-cal-item-body{flex:1;min-width:0;}
.pui-cal-item-title{font:600 12.5px/1.3 var(--font);color:var(--navy);}
.pui-cal-item-meta{font:500 10.5px/1 var(--font);color:var(--gray-400);margin-top:3px;}
.pui-cal-item-date{font:700 11px/1 var(--font);color:var(--gray-600);font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0;}
.pui-cal-bucket-empty{font:italic 400 12px/1.4 var(--font);color:var(--gray-400);padding:12px 0;}
@media (max-width:900px){.pui-cal-grid{grid-template-columns:1fr;}}


/* ═══════════════════════════════════════════════════════════════
   G10 - .pui-week-grid : grille semaine lun-ven (planning)
   Source : CRM .sm-grid / .sm-jour / .sm-tache (L740-764). 5 colonnes,
   jour "aujourd'hui" surligne, taches a liseré amber (late = rouge),
   source taggee (onboarding / interaction / fiche).
   ─────────────────────────────────────────────────────────────── */
.pui-week-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.pui-week-jour{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);
  padding:14px 14px 16px;min-height:170px;transition:border-color .15s,box-shadow .15s;}
.pui-week-jour:hover{border-color:var(--amber-light);box-shadow:var(--shadow-sm);}
.pui-week-jour.is-today{border-color:color-mix(in srgb, var(--amber) 35%, transparent);background:color-mix(in srgb, var(--amber) 4%, transparent);}
.pui-week-jour-header{margin-bottom:12px;padding-bottom:9px;border-bottom:1px solid var(--gray-100);
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.pui-week-jour-nom{font:700 10px/1 var(--font);text-transform:uppercase;letter-spacing:.14em;color:var(--gray-400);}
.pui-week-jour.is-today .pui-week-jour-nom{color:var(--amber-dark);}
.pui-week-jour-date{font:800 20px/1 var(--font);color:var(--navy);letter-spacing:-.025em;font-variant-numeric:tabular-nums;}
.pui-week-taches{display:flex;flex-direction:column;gap:6px;}
.pui-week-tache{background:transparent;border:1px solid var(--gray-200);border-left:2px solid color-mix(in srgb, var(--amber) 45%, transparent);
  border-radius:var(--radius-md);padding:8px 10px;font-size:12px;color:var(--navy);line-height:1.4;
  cursor:pointer;transition:background .14s,border-color .14s;}
.pui-week-tache:hover{background:var(--gray-50);border-left-color:var(--amber);}
.pui-week-tache.is-late{border-left-color:var(--error);background:rgba(194,58,79,.03);}
.pui-week-tache.is-late:hover{background:rgba(194,58,79,.08);}
.pui-week-tache-lib{font-weight:600;line-height:1.35;}
.pui-week-tache-meta{font-size:10.5px;color:var(--gray-400);margin-top:3px;display:flex;align-items:center;gap:5px;}
.pui-week-tache-source{font:700 8.5px/1 var(--font);text-transform:uppercase;letter-spacing:.10em;
  padding:2px 5px;border-radius:3px;background:var(--gray-100);color:var(--gray-600);}
.pui-week-tache-source.onboarding{background:rgba(145,153,184,.16);color:var(--gray-800);}
.pui-week-tache-source.interaction{background:color-mix(in srgb, var(--amber) 12%, transparent);color:var(--amber-dark);}
.pui-week-tache-source.fiche{background:rgba(26,122,94,.10);color:var(--success);}
.pui-week-jour-vide{font:italic 400 12px/1.4 var(--font);color:var(--gray-400);padding:6px 0;}
@media (max-width:900px){.pui-week-grid{grid-template-columns:repeat(2,1fr);}}


/* ═══════════════════════════════════════════════════════════════
   G12 - .pui-onboarding-step : etape de checklist d'onboarding
   Source : CRM .onb-step / .onb-check / .onb-label (L294-306). Ligne
   avec case a cocher SVG ; etat "done" grise le libelle.
   ─────────────────────────────────────────────────────────────── */
.pui-onboarding-group{margin-bottom:18px;}
.pui-onboarding-group-t{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;
  color:var(--amber-dark);margin-bottom:8px;}
.pui-onboarding-step{display:flex;align-items:center;gap:11px;padding:9px 12px;background:var(--white);
  border:1px solid var(--gray-200);border-radius:var(--radius-md);margin-bottom:6px;}
.pui-onboarding-step.done{background:var(--gray-50);}
.pui-onboarding-check{width:19px;height:19px;border-radius:5px;border:1.5px solid var(--gray-400);
  flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.pui-onboarding-check.on{background:var(--success);border-color:var(--success);}
.pui-onboarding-check svg{width:12px;height:12px;color:#fff;}
.pui-onboarding-label{flex:1;font-size:13px;color:var(--navy);}
.pui-onboarding-step.done .pui-onboarding-label{color:var(--gray-400);}
.pui-onboarding-meta{font-size:11px;color:var(--gray-400);white-space:nowrap;}


/* ═══════════════════════════════════════════════════════════════
   G14 - .pui-tool-btn : bouton-lien outil (aside CRM + portal)
   Sources : CRM .tool-btn (L288-292) = ligne justify-between, hover
   amber-100 ; portal .tool-link (L496-508) = empile titre+desc, hover
   navy-light + lift.
   ─────────────────────────────────────────────────────────────── */
/* Variante "ligne" (CRM .tool-btn) */
.pui-tool-btn{display:flex;justify-content:space-between;align-items:center;width:100%;background:var(--gray-50);
  border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:9px 11px;font-size:12.5px;
  color:var(--navy);font-weight:600;margin-bottom:6px;transition:background .14s,border-color .14s;}
.pui-tool-btn:hover{background:var(--amber-100);border-color:var(--amber-light);}
.pui-tool-btn span{color:var(--amber-dark);}
/* Variante "empilee" (portal .tool-link) */
.pui-tool-link{display:flex;flex-direction:column;gap:2px;padding:13px 14px;border:1px solid var(--gray-200);
  border-radius:var(--radius-md);background:#fff;margin-bottom:8px;
  transition:border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);}
.pui-tool-link:hover{border-color:var(--navy-light);transform:translateY(-1px);}
.pui-tool-link strong{font-size:13px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:6px;}
.pui-tool-link strong svg{width:11px;height:11px;color:var(--amber);margin-left:auto;}
.pui-tool-link span{font-size:11.5px;color:var(--gray-600);font-weight:500;}


/* ═══════════════════════════════════════════════════════════════
   G15 - .pui-donut : jauge circulaire de score (audit)
   Source : audit .donut-svg / .donut-fg / .donut-num / .donut-level
   (L296-347). Anneau SVG stroke-dasharray anime, 3 etats bad/mid/good,
   chiffre central. Concu pour fond SOMBRE (strokes blancs translucides).
   NB : emojis de la source audit (etoile etc.) NON portes ici ; ce
   composant n'a pas de glyphe texte, seulement du SVG.
   ─────────────────────────────────────────────────────────────── */
.pui-donut-wrap{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05);border-radius:var(--radius-xl);padding:20px 14px 16px;text-align:center;}
.pui-donut-svg{width:110px;height:110px;transform:rotate(-90deg);}
.pui-donut-bg{stroke:rgba(255,255,255,.08);}
.pui-donut-fg{stroke:var(--amber);transition:stroke-dasharray 600ms var(--ease),stroke 300ms var(--ease);}
.pui-donut-fg.bad{stroke:var(--error);}
.pui-donut-fg.mid{stroke:var(--amber);}
.pui-donut-fg.good{stroke:var(--success);}
.pui-donut-rel{position:relative;display:inline-block;}
.pui-donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;}
.pui-donut-num{font-size:32px;font-weight:800;color:#fff;line-height:1;letter-spacing:-0.02em;display:inline-flex;align-items:baseline;font-variant-numeric:tabular-nums;}
.pui-donut-num-suffix{font-size:13px;color:rgba(255,255,255,.3);font-weight:600;margin-left:1px;}
.pui-donut-lbl{font-size:9.5px;font-weight:700;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.12em;margin-top:6px;}
.pui-donut-level{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.06);font-size:12px;font-weight:600;letter-spacing:.01em;color:rgba(255,255,255,.7);}
.pui-donut-level.bad{color:#e87a8a;}
.pui-donut-level.mid{color:var(--amber-light);}
.pui-donut-level.good{color:#4cc28c;}


/* ═══════════════════════════════════════════════════════════════
   G16 - .pui-crit-row : ligne de critere evaluable (audit / checklist)
   Source : audit .crit-row + .ans-btn + .pin-btn + .crit-note
   (L493-558). Liseré gauche, etats oui/non/na/pinned/focused, numero,
   question, boutons reponse, note conditionnelle.
   NB FIDELITE : dans la source, .crit-row.oui/.non utilisent les tokens
   audit --success-soft / --error-soft qui valent des FONDS rgba tres
   clairs ; or dans paso-ui.css --success-soft = #3a8d63 (couleur pleine).
   Les valeurs rgba d'origine sont donc INLINEES ici pour rester fideles
   au rendu (fond teinte clair), pas un aplat vert/rouge.
   NB EMOJI : .pin-btn affichait une etoile texte (font-size:14px) cote
   markup -> a remplacer par un SVG Lucide ; la regle de taille est
   conservee pour ne pas casser le composant.
   ─────────────────────────────────────────────────────────────── */
.pui-crit-rows{display:flex;flex-direction:column;gap:8px;}
.pui-crit-row{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:var(--radius-md);border:1px solid var(--gray-150);border-left-width:3px;transition:background var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);cursor:pointer;}
.pui-crit-row:hover{border-color:var(--gray-300);box-shadow:var(--shadow-sm);}
.pui-crit-row.focused{background:color-mix(in srgb, var(--amber) 5%, transparent);border-color:var(--amber);box-shadow:0 0 0 3px color-mix(in srgb, var(--amber) 8%, transparent);}
.pui-crit-row.oui{background:rgba(26,122,94,.08);border-left-color:var(--success);}
.pui-crit-row.non{background:rgba(194,58,79,.07);border-left-color:var(--error);}
.pui-crit-row.na{opacity:0.65;}
.pui-crit-row.pinned{background:linear-gradient(90deg,color-mix(in srgb, var(--amber) 7%, transparent),transparent);border-left-color:var(--amber);}
.pui-crit-num{font-size:11px;color:var(--gray-400);font-weight:700;min-width:36px;padding-top:2px;}
.pui-crit-body{flex:1;min-width:0;}
.pui-crit-question{font-size:13.5px;font-weight:500;color:var(--gray-700);}
.pui-crit-desc{font-size:12px;font-style:italic;color:var(--gray-600);margin-top:2px;}
.pui-crit-actions{display:flex;align-items:center;gap:4px;margin-top:8px;}
/* Boutons reponse oui / non / na (etat selectionne = aplat colore) */
.pui-ans-btn{font-family:inherit;font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:var(--radius-sm);border:1px solid var(--gray-200);background:#fff;color:var(--gray-600);cursor:pointer;}
.pui-ans-btn:hover{border-color:var(--gray-300);}
.pui-ans-btn.sel-oui{background:var(--success);border-color:var(--success);color:#fff;}
.pui-ans-btn.sel-non{background:var(--error);border-color:var(--error);color:#fff;}
.pui-ans-btn.sel-na{background:var(--gray-400);border-color:var(--gray-400);color:#fff;}
/* Bouton epingle (epingler le critere dans les recommandations) */
.pui-pin-btn{background:transparent;border:0;color:var(--gray-300);font-size:14px;cursor:pointer;width:24px;height:24px;border-radius:50%;margin-left:auto;transition:transform var(--t-base) var(--ease);display:inline-flex;align-items:center;justify-content:center;}
.pui-pin-btn svg{width:14px;height:14px;}
.pui-pin-btn:hover{color:var(--amber);}
.pui-pin-btn.pinned{color:var(--amber);transform:scale(1.1);}
.pui-pin-btn.pinned-oui{color:var(--success);transform:scale(1.1);}
/* Note conditionnelle (visible quand oui/non) */
.pui-crit-note{margin-top:8px;width:100%;font-family:inherit;font-size:12px;padding:6px 8px;border:1px solid var(--gray-200);border-radius:var(--radius-sm);resize:vertical;min-height:32px;display:none;}
.pui-crit-row.oui .pui-crit-note,
.pui-crit-row.non .pui-crit-note{display:block;}


/* ═══════════════════════════════════════════════════════════════
   FAMILLE H - Misc / utilitaires
   ─────────────────────────────────────────────────────────────── */
/* H1 - .pui-dot : point amber dans un titre (universel) */
.pui-dot{color:var(--amber);}
/* H2 - .pui-muted : texte attenue (CRM .muted, L321) */
.pui-muted{color:var(--gray-400);font-size:12.5px;}

/* ═══════════════════════════════════════════════════════════════
   COMPOSANTS DESIGN SYSTEM (lot 5) - portes du dossier "Paso Design
   System" (concu avec Claude Design). Prefixes scopes par composant
   (pui-cmdk, pui-daterange, pui-upload, pui-sheet, pui-verdict,
   pui-iconsys, pui-proof, pui-viz, pui-naming). Tokens du :root.
   ═══════════════════════════════════════════════════════════════ */
/* pui-cmdk - Command palette (porte de Paso Design System/preview/tools-command-palette.html) */
.pui-cmdk-backdrop{
  position:fixed;inset:0;
  background:rgba(10,12,30,.45);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;
  transition:opacity .2s cubic-bezier(.22,1,.36,1);
  z-index:50;
  display:flex;align-items:flex-start;justify-content:center;
  padding-top:18vh;
}
.pui-cmdk-backdrop.open{opacity:1;pointer-events:all;}

.pui-cmdk{
  width:min(680px, 92vw);
  background:#fff;
  border-radius:16px;
  box-shadow:0 24px 64px color-mix(in srgb, var(--navy) 22%, transparent), 0 8px 16px color-mix(in srgb, var(--navy) 10%, transparent);
  overflow:hidden;
  transform:scale(.96);
  transition:transform .25s cubic-bezier(.22,1,.36,1);
  display:flex;flex-direction:column;
  max-height:70vh;
}
.pui-cmdk-backdrop.open .pui-cmdk{transform:scale(1);}

/* Search bar */
.pui-cmdk-search{
  display:flex;align-items:center;gap:12px;
  padding:18px 22px;
  border-bottom:1px solid var(--gray-100);
}
.pui-cmdk-search svg{width:18px;height:18px;color:var(--gray-400);flex-shrink:0;}
.pui-cmdk-search input{
  flex:1;border:none;background:transparent;outline:none;
  font:500 16px/1 var(--font);color:var(--navy);
  padding:4px 0;letter-spacing:-.2px;
}
.pui-cmdk-search input::placeholder{color:var(--gray-400);}
.pui-cmdk-search .pui-cmdk-esc{
  padding:4px 8px;background:var(--gray-100);
  font:600 10px/1 var(--font);color:var(--gray-600);
  border-radius:5px;border:1px solid var(--gray-200);
  letter-spacing:.04em;text-transform:uppercase;
}

/* Results - grouped by eyebrow category */
.pui-cmdk-body{overflow-y:auto;padding:6px 6px 8px;}
.pui-cmdk-group{padding:6px 0;}
.pui-cmdk-group-label{
  font:700 10px/1 var(--font);
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--amber);
  padding:10px 16px 8px;
  display:inline-flex;align-items:center;gap:8px;
  position:relative;
}
.pui-cmdk-group-label::before{
  content:'';
  width:2px;height:11px;
  background:var(--amber);
  border-radius:1px;
  flex-shrink:0;
}

.pui-cmdk-item{
  display:grid;grid-template-columns:32px 1fr auto;gap:14px;
  align-items:center;
  padding:11px 16px;
  border-radius:8px;
  cursor:pointer;
  transition:background .12s;
  background:transparent;
  border:none;
  text-align:left;
  font-family:var(--font);
  width:100%;
}
.pui-cmdk-item:hover, .pui-cmdk-item.active{background:color-mix(in srgb, var(--amber) 6%, transparent);}

.pui-cmdk-icon{
  width:32px;height:32px;border-radius:8px;
  background:var(--gray-100);color:var(--gray-600);
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:background .15s,color .15s;
}
.pui-cmdk-icon svg{width:14px;height:14px;}
.pui-cmdk-item.active .pui-cmdk-icon, .pui-cmdk-item:hover .pui-cmdk-icon{
  background:color-mix(in srgb, var(--amber) 10%, transparent);color:var(--amber-dark);
}

.pui-cmdk-item-text{display:flex;flex-direction:column;gap:3px;min-width:0;}
.pui-cmdk-item-name{font:600 14px/1.2 var(--font);color:var(--navy);letter-spacing:-.2px;}
.pui-cmdk-item-name mark{background:transparent;color:var(--amber-dark);font-weight:700;}
.pui-cmdk-item-desc{font:500 12px/1.3 var(--font);color:var(--gray-400);letter-spacing:.02em;}

.pui-cmdk-item-shortcut{
  display:inline-flex;gap:4px;
  font-variant-numeric:tabular-nums;
}
.pui-cmdk-item-shortcut kbd{
  padding:3px 7px;background:var(--gray-100);
  font:700 10px/1 var(--font);color:var(--gray-600);
  border:1px solid var(--gray-200);border-radius:5px;
  letter-spacing:.04em;
}
.pui-cmdk-item.active .pui-cmdk-item-shortcut kbd{background:color-mix(in srgb, var(--amber) 10%, transparent);border-color:color-mix(in srgb, var(--amber) 25%, transparent);color:var(--amber-dark);}

/* Empty state */
.pui-cmdk-empty{padding:48px 24px;text-align:center;color:var(--gray-400);font:500 13px/1.5 var(--font);}

/* Footer */
.pui-cmdk-footer{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 22px;
  border-top:1px solid var(--gray-100);
  background:#fafbfc;
  font:500 11px/1 var(--font);color:var(--gray-400);
  font-variant-numeric:tabular-nums;
}
.pui-cmdk-footer-keys{display:inline-flex;gap:14px;align-items:center;}
.pui-cmdk-footer-keys span{display:inline-flex;align-items:center;gap:6px;}
.pui-cmdk-footer-keys kbd{
  padding:2px 6px;background:var(--gray-100);
  font:600 9.5px/1 var(--font);color:var(--gray-600);
  border:1px solid var(--gray-200);border-radius:4px;
}
.pui-cmdk-footer-brand{color:var(--gray-400);letter-spacing:.04em;}

/* pui-daterange - Date range picker (porte de Paso Design System/preview/tools-date-range.html) */
.pui-daterange{display:grid;grid-template-columns:200px 1fr;gap:0;}
.pui-daterange-presets{padding:18px 14px;border-right:1px solid var(--gray-100);display:flex;flex-direction:column;gap:2px;}
.pui-daterange-preset{padding:9px 14px;border-radius:8px;font:600 12px/1 var(--font);color:var(--gray-600);cursor:pointer;border:none;background:transparent;text-align:left;transition:background .15s,color .15s;}
.pui-daterange-preset:hover{background:#fafbfc;color:var(--navy);}
.pui-daterange-preset.active{background:color-mix(in srgb, var(--amber) 8%, transparent);color:var(--amber-dark);border-radius:8px 8px 16px 8px;font-weight:700;}
.pui-daterange-preset .pui-daterange-sub{font:500 10px/1 var(--font);color:var(--gray-400);letter-spacing:.04em;display:block;margin-top:3px;font-variant-numeric:tabular-nums;}
.pui-daterange-preset.active .pui-daterange-sub{color:var(--amber);}

.pui-daterange-cal{padding:22px 24px;}
.pui-daterange-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.pui-daterange-head .pui-daterange-nav{width:30px;height:30px;border-radius:7px;background:#fafbfc;border:1px solid var(--gray-200);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.pui-daterange-head .pui-daterange-nav:hover{border-color:var(--gray-400);}

.pui-daterange-months{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.pui-daterange-month-title{font:700 13px/1 var(--font);color:var(--navy);text-align:center;margin-bottom:14px;letter-spacing:-.2px;}
.pui-daterange-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.pui-daterange-dow{font:700 9px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--gray-400);text-align:center;padding:6px 0;}
.pui-daterange-day{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;margin:0 auto;
  font:600 12px/1 var(--font);color:var(--navy);
  cursor:pointer;border-radius:7px;
  font-variant-numeric:tabular-nums;
  transition:background .12s;
}
.pui-daterange-day.muted{color:var(--gray-300);}
.pui-daterange-day:hover{background:#fafbfc;}
.pui-daterange-day.in-range{background:color-mix(in srgb, var(--amber) 10%, transparent);border-radius:0;color:var(--amber-dark);}
.pui-daterange-day.range-start,.pui-daterange-day.range-end{background:var(--amber);color:#fff;font-weight:800;}
.pui-daterange-day.range-start{border-radius:7px 0 0 7px;}
.pui-daterange-day.range-end{border-radius:0 7px 7px 0;}

.pui-daterange-foot{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;border-top:1px solid var(--gray-100);background:#fafbfc;}
.pui-daterange-foot .pui-daterange-picked{font:600 12px/1.4 var(--font);color:var(--gray-600);font-variant-numeric:tabular-nums;}
.pui-daterange-foot .pui-daterange-picked b{color:var(--navy);font-weight:700;}
.pui-daterange-actions{display:flex;gap:8px;}
.pui-daterange-actions button{padding:8px 14px;border-radius:7px;font:600 12px/1 var(--font);cursor:pointer;border:none;}
.pui-daterange-cancel{background:transparent;color:var(--gray-600);}
.pui-daterange-cancel:hover{background:var(--gray-100);color:var(--navy);}
.pui-daterange-apply{background:var(--amber);color:#fff;border-radius:7px 7px 12px 7px;box-shadow:0 4px 14px color-mix(in srgb, var(--amber) 28%, transparent);}

/* pui-upload - File upload dropzone + liste (porte de Paso Design System/preview/tools-file-upload.html) */
.pui-upload-panel{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:flex-start;}

/* DROPZONE */
.pui-upload-drop{
  background:#fff;border:1.5px dashed var(--gray-200);
  border-radius:14px;
  padding:48px 32px;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  cursor:pointer;
  transition:border-color .15s,background .15s;
}
.pui-upload-drop:hover, .pui-upload-drop.dragging{border-color:var(--amber);background:#fffaf0;}
.pui-upload-drop-icon{width:48px;height:48px;border-radius:12px;background:color-mix(in srgb, var(--amber) 10%, transparent);color:var(--amber-dark);display:flex;align-items:center;justify-content:center;}
.pui-upload-drop-icon svg{width:22px;height:22px;}
.pui-upload-drop-title{font:800 16px/1.2 var(--font);color:var(--navy);letter-spacing:-.3px;}
.pui-upload-drop-title .dot{color:var(--amber);}
.pui-upload-drop-desc{font:400 12.5px/1.5 var(--font);color:var(--gray-600);max-width:300px;}
.pui-upload-drop-desc a{color:var(--amber-dark);font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
.pui-upload-drop-meta{font:600 10px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--gray-400);margin-top:4px;}

/* FILES LIST */
.pui-upload-files{background:#fff;border:1px solid var(--gray-200);border-radius:14px;overflow:hidden;}
.pui-upload-files-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--gray-100);}
.pui-upload-files-title{font:700 11px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--gray-400);display:inline-flex;align-items:center;gap:10px;}
.pui-upload-files-title::before{content:'';width:2px;height:11px;background:var(--amber);border-radius:1px;}
.pui-upload-files-meta{font:500 11px/1 var(--font);color:var(--gray-400);font-variant-numeric:tabular-nums;}

.pui-upload-file-row{display:grid;grid-template-columns:36px 1fr auto 28px;gap:14px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--gray-100);}
.pui-upload-file-row:last-child{border-bottom:none;}
.pui-upload-file-icon{width:36px;height:36px;border-radius:9px;background:color-mix(in srgb, var(--navy) 4%, transparent);color:var(--navy);display:flex;align-items:center;justify-content:center;}
.pui-upload-file-icon svg{width:14px;height:14px;}
.pui-upload-file-icon.amber{background:color-mix(in srgb, var(--amber) 10%, transparent);color:var(--amber-dark);}
.pui-upload-file-icon.success{background:rgba(125,217,171,.18);color:#3a8d63;}
.pui-upload-file-info{display:flex;flex-direction:column;gap:3px;min-width:0;}
.pui-upload-file-name{font:600 13px/1.3 var(--font);color:var(--navy);letter-spacing:-.1px;}
.pui-upload-file-meta{font:500 11px/1 var(--font);color:var(--gray-400);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:8px;}
.pui-upload-file-meta .sep{width:3px;height:3px;border-radius:50%;background:currentColor;}
.pui-upload-file-prog{width:120px;}
.pui-upload-file-prog-bar{height:3px;background:var(--gray-200);border-radius:99px;overflow:hidden;}
.pui-upload-file-prog-fill{height:100%;background:var(--amber);transition:width .3s;}
.pui-upload-file-prog-fill.done{background:#3a8d63;}
.pui-upload-file-prog-pct{font:600 10px/1 var(--font);color:var(--gray-400);text-align:right;margin-top:4px;font-variant-numeric:tabular-nums;}
.pui-upload-file-status{font:700 10px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;}
.pui-upload-file-status.upload{color:var(--amber-dark);}
.pui-upload-file-status.done{color:#3a8d63;}
.pui-upload-file-status.error{color:var(--error);}
.pui-upload-file-close{width:28px;height:28px;border-radius:7px;background:transparent;border:none;color:var(--gray-300);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.pui-upload-file-close:hover{background:var(--gray-100);color:var(--navy);}

/* pui-sheet - Mobile bottom-sheet (porte de Paso Design System/preview/tools-mobile-sheet.html) */

/* Backdrop : voile + blur qui apparait derriere le sheet */
.pui-sheet-backdrop{
  position:absolute;inset:0;
  background:rgba(10,12,30,.45);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;
  transition:opacity .3s cubic-bezier(.22,1,.36,1);
  z-index:5;
}
.pui-sheet-backdrop.is-open{opacity:1;pointer-events:all;}

.pui-sheet{
  position:absolute;left:0;right:0;bottom:0;
  /* Radius asymetrique : 24px a gauche / 18px a droite en haut - echo au notch */
  border-radius:24px 18px 0 0;
  background:#fff;
  box-shadow:0 -8px 32px color-mix(in srgb, var(--navy) 12%, transparent);
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
  z-index:6;
  max-height:78%;
  display:flex;flex-direction:column;
}
.pui-sheet.is-open{transform:translateY(0);}

/* Drag handle - signature amber */
.pui-sheet-handle{
  width:36px;height:4px;
  background:var(--amber);
  border-radius:99px;
  margin:10px auto 6px;
  flex-shrink:0;
}

.pui-sheet-head{
  padding:8px 22px 16px;
  border-bottom:1px solid var(--gray-100);
  display:flex;align-items:center;justify-content:space-between;
}
.pui-sheet-eyebrow{font:700 10px/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:var(--amber);}
.pui-sheet-close{width:30px;height:30px;border-radius:8px;background:transparent;border:none;color:var(--gray-400);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}

/* Tabs */
.pui-sheet-tabs{display:flex;padding:0 22px;border-bottom:1px solid var(--gray-100);background:#fafbfc;}
.pui-sheet-tab{font:700 11px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--gray-400);padding:14px 0;margin-right:22px;background:transparent;border:none;cursor:pointer;border-bottom:2px solid transparent;}
.pui-sheet-tab.is-active{color:var(--amber);border-bottom-color:var(--amber);}

/* Items */
.pui-sheet-body{padding:16px 22px;overflow-y:auto;flex:1;}
.pui-sheet-item{
  display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--gray-100);
  text-decoration:none;cursor:pointer;
}
.pui-sheet-item:last-child{border-bottom:none;}
.pui-sheet-item.is-active{background:color-mix(in srgb, var(--amber) 4%, transparent);margin:0 -16px;padding:12px 16px;border-radius:8px 8px 16px 8px;}
.pui-sheet-icon{
  width:36px;height:36px;border-radius:9px;
  background:color-mix(in srgb, var(--navy) 4%, transparent);color:var(--navy);
  display:inline-flex;align-items:center;justify-content:center;
}
.pui-sheet-item.is-active .pui-sheet-icon{background:color-mix(in srgb, var(--amber) 10%, transparent);color:var(--amber-dark);}
.pui-sheet-icon svg{width:16px;height:16px;}
.pui-sheet-name{font:700 14px/1.2 var(--font);color:var(--navy);letter-spacing:-.2px;}
.pui-sheet-meta{font:500 11px/1.3 var(--font);color:var(--gray-400);margin-top:2px;}
.pui-sheet-arrow{color:var(--gray-300);}


/* pui-verdict - Verdict tile (porte de Paso Design System/preview/tools-verdict-tile.html) */

/* Tile navy dont le verdict change de couleur (amber neutre / mint OK / rose alerte) */
.pui-verdict{
  background:var(--navy);color:#fff;
  border-radius:18px;padding:32px 30px;
  position:relative;overflow:hidden;
  min-height:380px;
  display:flex;flex-direction:column;
}
.pui-verdict::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.020) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.020) 1px,transparent 1px);background-size:10px 10px;}
/* RÈGLE: pas de halo - l'état (is-good/is-alert) se lit via la couleur du tag/chiffre/texte. */
.pui-verdict > *{position:relative;z-index:1;}

.pui-verdict-tag{
  font:700 10px/1 var(--font);letter-spacing:.18em;text-transform:uppercase;
  color:var(--amber);
  display:inline-flex;align-items:center;gap:10px;
  margin-bottom:18px;
}
.pui-verdict-tag::before{content:'';width:18px;height:1px;background:currentColor;opacity:.7;}
.pui-verdict.is-good .pui-verdict-tag{color:var(--mint);}
.pui-verdict.is-alert .pui-verdict-tag{color:var(--rose);}

.pui-verdict-num{
  font:900 84px/.9 var(--font);
  letter-spacing:-3.5px;
  color:var(--amber);
  font-variant-numeric:tabular-nums;
  transition:color .35s ease;
}
.pui-verdict.is-good .pui-verdict-num{color:var(--mint);}
.pui-verdict.is-alert .pui-verdict-num{color:var(--rose);}
.pui-verdict-num .pui-verdict-suffix{font-size:36px;font-weight:800;letter-spacing:-1px;color:rgba(255,255,255,.4);margin-left:6px;}

.pui-verdict-lbl{
  font:700 11px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);
  margin-top:12px;
}

.pui-verdict-text{
  font:400 15px/1.65 var(--font);color:rgba(255,255,255,.78);
  margin-top:24px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);
  flex:1;
}
.pui-verdict-text b{color:#fff;font-weight:600;}
.pui-verdict-text em{font-style:normal;color:var(--amber);}
.pui-verdict.is-good .pui-verdict-text em{color:var(--mint);}
.pui-verdict.is-alert .pui-verdict-text em{color:var(--rose);}

.pui-verdict-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 22px;
  background:var(--amber);color:#fafbfc;
  border-radius:8px 8px 16px 8px;
  font:700 13px/1 var(--font);
  text-decoration:none;cursor:pointer;border:none;
  box-shadow:0 4px 16px color-mix(in srgb, var(--amber) 40%, transparent);
  margin-top:22px;align-self:flex-start;
  transition:box-shadow .2s,transform .2s;
}
.pui-verdict-cta:hover{box-shadow:0 6px 22px color-mix(in srgb, var(--amber) 50%, transparent);transform:translateY(-1px);}

/* Mini-verdict : variante compacte pour afficher des etats cote a cote */
.pui-verdict-mini{
  background:var(--navy);color:#fff;
  border-radius:12px;padding:18px 20px 22px;
  position:relative;overflow:hidden;
}
.pui-verdict-mini > *{position:relative;}
.pui-verdict-mini-tag{font:700 9px/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:var(--mint);}
.pui-verdict-mini.is-amber .pui-verdict-mini-tag{color:var(--amber);}
.pui-verdict-mini.is-rose .pui-verdict-mini-tag{color:var(--rose);}
.pui-verdict-mini-num{font:900 38px/1 var(--font);color:var(--mint);letter-spacing:-1.5px;font-variant-numeric:tabular-nums;margin-top:8px;}
.pui-verdict-mini.is-amber .pui-verdict-mini-num{color:var(--amber);}
.pui-verdict-mini.is-rose .pui-verdict-mini-num{color:var(--rose);}
.pui-verdict-mini-lbl{font:600 11px/1.3 var(--font);color:rgba(255,255,255,.55);margin-top:10px;letter-spacing:.04em;}


/* pui-iconsys - Icon system (porte de Paso Design System/preview/component-icon-system.html) */

/* Disc wrapper - recette tiree de paso.css (.target-card-icon, .deliverable-card-icon, .resource-icon, .nav-megamenu-icon) */
.pui-iconsys-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
.pui-iconsys-cell{display:flex;flex-direction:column;align-items:center;gap:8px;}
.pui-iconsys-disc{
  width:44px;height:44px;border-radius:12px;
  background:color-mix(in srgb, var(--amber) 10%, transparent);
  color:var(--amber);
  display:inline-flex;align-items:center;justify-content:center;
}
.pui-iconsys-disc svg{width:20px;height:20px;stroke-width:2;}
.pui-iconsys-name{font:600 11px/1.2 var(--font);color:var(--navy);text-align:center;}
.pui-iconsys-lbl{font:500 10px/1 var(--font);color:var(--gray-400);font-family:ui-monospace,Menlo,monospace;}

/* Variante taille large */
.pui-iconsys-disc.is-lg{width:52px;height:52px;border-radius:14px;}
.pui-iconsys-disc.is-lg svg{width:24px;height:24px;}
/* Variante sur fond navy */
.pui-iconsys-disc.is-on-navy{background:color-mix(in srgb, var(--amber) 16%, transparent);}
/* Variante mint pour les cas "live / disponible" */
.pui-iconsys-disc.is-mint{background:rgba(125,217,171,.18);color:#3a8d63;}

.pui-iconsys-surfaces{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:10px;}
.pui-iconsys-surface{padding:14px 16px;border-radius:14px;display:inline-flex;align-items:center;gap:12px;}
.pui-iconsys-surface.is-light{background:var(--gray-100);border:1px solid var(--gray-200);}
.pui-iconsys-surface.is-dark{background:var(--navy);}
.pui-iconsys-surface.is-dark .pui-iconsys-surface-lbl{color:rgba(255,255,255,.6);}
.pui-iconsys-surface-lbl{font:700 10px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--gray-600);}

/* pui-proof - Preuve sociale (avatars hover stack) (porte de Paso Design System/preview/component-paso-proof.html) */
.pui-proof{
  display:inline-flex;align-items:center;gap:14px;
  padding:8px 16px 8px 8px;
  background:#fff;border:1px solid var(--gray-200);
  border-radius:100px;font-family:var(--font);
  box-shadow:0 1px 3px color-mix(in srgb, var(--navy) 4%, transparent);
}
.pui-proof__avatars{display:inline-flex;align-items:center;}
.pui-proof-avatar{
  text-decoration:none;display:inline-flex;align-items:center;
  border-radius:999px;padding:2px;background:transparent;
  margin-left:-16px;cursor:pointer;
  transition:background-color .35s cubic-bezier(.4,0,.2,1),
             margin-left .5s cubic-bezier(.4,0,.2,1),
             box-shadow .35s cubic-bezier(.4,0,.2,1);
}
.pui-proof-avatar:first-child{margin-left:0;}
.pui-proof-avatar:hover{background:#f3f4f7;margin-left:0;}
.pui-proof-avatar:hover + .pui-proof-avatar{margin-left:6px;}
.pui-proof-avatar__disc{
  flex-shrink:0;width:30px;height:30px;border-radius:999px;
  border:2px solid #fff;
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.pui-proof-avatar__disc svg{width:16px;height:16px;}
.pui-proof-avatar:hover .pui-proof-avatar__disc{transform:scale(1.08);}

.pui-proof__info{
  position:relative;font-size:13px;line-height:1.2;
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.pui-proof__stats,.pui-proof__hover{
  transition:opacity .25s cubic-bezier(.4,0,.2,1);
}
.pui-proof__stats{color:var(--gray-600);font-weight:500;}
.pui-proof__hover{
  position:absolute;inset:0;display:inline-flex;align-items:center;
  opacity:0;pointer-events:none;
}
.pui-proof.is-hovering .pui-proof__stats{opacity:0;}
.pui-proof.is-hovering .pui-proof__hover{opacity:1;}
.pui-proof__brand{font-weight:600;color:var(--navy);letter-spacing:-.005em;}
.pui-proof__cta{color:var(--amber);font-weight:600;margin-left:10px;}
.pui-proof__strong{color:var(--navy);font-weight:600;}
.pui-proof__muted{color:var(--gray-400);}
.pui-proof__sep{color:var(--gray-400);margin:0 8px;opacity:.6;}

/* pui-viz - Data viz : gauge, calendrier, timeline, heatmap (porte de Paso Design System/preview/tools-data-viz.html) */
/* -- GAUGE (full circle) -- */
.pui-viz-gauge-wrap{display:flex;align-items:center;justify-content:center;gap:28px;padding:8px 0;}
.pui-viz-gauge{position:relative;width:170px;height:170px;flex-shrink:0;}
.pui-viz-gauge svg{width:170px;height:170px;display:block;transform:rotate(-90deg);}
.pui-viz-gauge-center{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.pui-viz-gauge-val{font:900 42px/1 var(--font);color:var(--navy);letter-spacing:-1.2px;font-variant-numeric:tabular-nums;}
.pui-viz-gauge-val .suffix{font-size:18px;color:var(--gray-400);font-weight:700;margin-left:1px;}
.pui-viz-gauge-lbl{font:700 10px/1.2 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--gray-400);margin-top:8px;}

.pui-viz-gauge-meta{display:flex;flex-direction:column;gap:0;flex:1;min-width:0;}
.pui-viz-gauge-meta-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--gray-100);font:500 12px/1 var(--font);color:var(--gray-600);}
.pui-viz-gauge-meta-row:last-child{border-bottom:none;}
.pui-viz-gauge-meta-row b{color:var(--navy);font-weight:700;font-variant-numeric:tabular-nums;}

/* -- CALENDAR -- */
.pui-viz-cal{padding:4px 0;}
.pui-viz-cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.pui-viz-cal-head .nav{width:28px;height:28px;border-radius:7px;background:#fafbfc;border:1px solid var(--gray-200);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--gray-600);}
.pui-viz-cal-head .month{font:700 13px/1 var(--font);color:var(--navy);letter-spacing:-.2px;}
.pui-viz-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.pui-viz-cal-dow{font:700 9px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--gray-400);text-align:center;padding:8px 0;}
.pui-viz-cal-cell{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:8px;font:600 12px/1 var(--font);color:var(--navy);cursor:pointer;font-variant-numeric:tabular-nums;background:#fafbfc;border:1px solid var(--gray-100);transition:all .12s;position:relative;}
.pui-viz-cal-cell:hover{border-color:var(--amber);background:#fffaf0;}
.pui-viz-cal-cell.muted{color:var(--gray-300);background:transparent;border-color:transparent;}
.pui-viz-cal-cell.event{background:color-mix(in srgb, var(--amber) 10%, transparent);border-color:color-mix(in srgb, var(--amber) 25%, transparent);color:var(--amber-dark);font-weight:700;}
.pui-viz-cal-cell.event-mint{background:rgba(125,217,171,.18);border-color:rgba(125,217,171,.35);color:#3a8d63;}
.pui-viz-cal-cell.today{border-color:var(--navy);border-width:1.5px;background:#fff;}
.pui-viz-cal-dot{position:absolute;bottom:5px;display:flex;gap:2px;}
.pui-viz-cal-dot span{width:3px;height:3px;border-radius:50%;background:var(--amber);}
.pui-viz-cal-dot span.mint{background:#3a8d63;}

/* -- TIMELINE (aeree) -- */
.pui-viz-tl{padding:12px 0 6px;}
.pui-viz-tl-bar{display:grid;grid-template-columns:repeat(12,1fr);gap:0;height:36px;position:relative;}
.pui-viz-tl-month{font:700 9.5px/1 var(--font);color:var(--gray-400);letter-spacing:.1em;text-transform:uppercase;padding:13px 0 0 10px;}
.pui-viz-tl-month.now{color:var(--amber-dark);font-weight:800;position:relative;}
.pui-viz-tl-month.now::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--amber);border-radius:1px;}

.pui-viz-tl-track{position:relative;margin-top:18px;display:flex;flex-direction:column;gap:10px;padding-bottom:6px;}
.pui-viz-tl-row{position:relative;display:grid;grid-template-columns:repeat(12,1fr);}
.pui-viz-tl-event{
  grid-row:1;
  border-radius:8px;
  padding:9px 14px;
  font:700 11.5px/1.2 var(--font);
  color:#fff;
  display:flex;align-items:center;
  letter-spacing:-.15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-height:32px;box-sizing:border-box;
  box-shadow:0 1px 3px color-mix(in srgb, var(--navy) 8%, transparent);
}
.pui-viz-tl-event.t1{background:rgba(126,133,183,.85);}
.pui-viz-tl-event.t2{background:rgba(66,72,122,.95);}
.pui-viz-tl-event.t3{background:var(--navy);box-shadow:0 4px 12px color-mix(in srgb, var(--navy) 18%, transparent);}
.pui-viz-tl-event.t4{background:linear-gradient(135deg,var(--navy) 0%,#1e2451 100%);box-shadow:0 4px 14px color-mix(in srgb, var(--navy) 22%, transparent);}
.pui-viz-tl-event.t-now{background:linear-gradient(135deg,#1e2451 0%,var(--navy-mid) 100%);box-shadow:0 4px 14px color-mix(in srgb, var(--navy) 22%, transparent);position:relative;}
.pui-viz-tl-event.t-now::after{content:'';position:absolute;right:8px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px color-mix(in srgb, var(--amber) 60%, transparent);}

.pui-viz-tl-meta{margin-top:22px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.pui-viz-tl-meta-cell{display:flex;flex-direction:column;gap:6px;padding:14px 16px;background:#fafbfc;border:1px solid var(--gray-100);border-radius:10px;}
.pui-viz-tl-meta-cell span{font:600 9px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--gray-400);}
.pui-viz-tl-meta-cell b{font:800 18px/1 var(--font);color:var(--navy);font-variant-numeric:tabular-nums;letter-spacing:-.3px;}

/* -- HEATMAP (navy palette) -- */
.pui-viz-heat-axis{display:grid;grid-template-columns:30px 1fr;align-items:center;gap:6px;font:600 9px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--gray-400);margin-bottom:8px;}
.pui-viz-heat-axis-months{display:grid;grid-template-columns:repeat(12,1fr);gap:0;}
.pui-viz-heat-grid{display:flex;flex-direction:column;gap:3px;}
.pui-viz-heat-row{display:grid;grid-template-columns:30px 1fr;align-items:center;gap:6px;}
.pui-viz-heat-row-label{font:700 9px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--gray-400);text-align:right;}
.pui-viz-heat-cells{display:grid;grid-template-columns:repeat(52,1fr);gap:3px;}
.pui-viz-heat-cell{aspect-ratio:1;border-radius:2px;background:var(--gray-100);}
.pui-viz-heat-cell.l1{background:rgba(126,133,183,.45);}
.pui-viz-heat-cell.l2{background:rgba(66,72,122,.7);}
.pui-viz-heat-cell.l3{background:color-mix(in srgb, var(--navy) 85%, transparent);}
.pui-viz-heat-cell.l4{background:var(--navy);}
.pui-viz-heat-legend{display:flex;align-items:center;gap:8px;font:500 10px/1 var(--font);color:var(--gray-400);margin-top:12px;letter-spacing:.04em;padding-left:36px;}
.pui-viz-heat-legend-cells{display:inline-flex;gap:2px;}
.pui-viz-heat-legend-cells span{width:11px;height:11px;border-radius:2px;background:var(--gray-100);display:inline-block;}
.pui-viz-heat-legend-cells span.l1{background:rgba(126,133,183,.45);}
.pui-viz-heat-legend-cells span.l2{background:rgba(66,72,122,.7);}
.pui-viz-heat-legend-cells span.l3{background:color-mix(in srgb, var(--navy) 85%, transparent);}
.pui-viz-heat-legend-cells span.l4{background:var(--navy);}
.pui-viz-heat-legend .summary{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--gray-600);}
.pui-viz-heat-legend .summary b{color:var(--navy);font-weight:700;}

/* pui-naming - Dictionnaire de naming des outils (paso.X) (porte de Paso Design System/preview/tools-naming-dict.html) */
.pui-naming{max-width:980px;margin:0 auto;}

/* Header row */
.pui-naming-head{
  display:grid;grid-template-columns:240px 1fr 180px;gap:24px;
  padding:14px 24px;
  border-bottom:1px solid var(--gray-200);
  font:700 10px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--gray-400);
}
.pui-naming-head .col-num{text-align:right;}

/* Rows */
.pui-naming-row{
  display:grid;grid-template-columns:240px 1fr 180px;gap:24px;
  padding:24px;
  background:#fff;border:1px solid var(--gray-200);
  border-top:none;
  align-items:center;
}
.pui-naming-row:first-of-type{border-top:1px solid var(--gray-200);border-radius:14px 14px 0 0;}
.pui-naming-row:last-of-type{border-radius:0 0 14px 14px;}

/* Brand cell : wordmark + suffix in matching style */
.pui-naming-brand{display:flex;align-items:baseline;gap:0;}
.pui-naming-brand .wordmark{font:800 26px/1 var(--font);letter-spacing:-0.025em;color:var(--navy);}
.pui-naming-brand .wordmark .dot{color:var(--amber);}
.pui-naming-brand .suffix{font:800 26px/1 var(--font);letter-spacing:-0.025em;color:var(--navy);}

/* Desc cell */
.pui-naming-desc{display:flex;flex-direction:column;gap:6px;min-width:0;}
.pui-naming-desc h3{font:800 16px/1.2 var(--font);color:var(--navy);letter-spacing:-.3px;margin:0;}
.pui-naming-desc p{font:400 13px/1.55 var(--font);color:var(--gray-600);margin:0;}
.pui-naming-desc .scope{font:600 10px/1.4 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--amber-dark);}

/* Status cell */
.pui-naming-status{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.pui-naming-status .chip{
  display:inline-flex;align-items:center;gap:7px;
  font:700 11px/1 var(--font);letter-spacing:.04em;
}
.pui-naming-status .chip::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;}
.pui-naming-status .chip.live{color:#3a8d63;}
.pui-naming-status .chip.draft{color:var(--amber-dark);}
.pui-naming-status .chip.future{color:var(--gray-400);}
.pui-naming-status .url{font:500 11px/1 var(--font);color:var(--gray-400);font-variant-numeric:tabular-nums;letter-spacing:.02em;}

/* Section group */
.pui-naming-section{margin-bottom:32px;}
.pui-naming-section-label{font:700 10px/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:var(--gray-600);margin:0 0 16px;display:inline-flex;align-items:center;gap:10px;}
.pui-naming-section-label::before{content:'';width:2px;height:12px;background:var(--amber);border-radius:1px;}

.pui-naming-rule{
  margin-top:24px;padding:18px 22px;
  background:#fff;border:1px solid var(--gray-200);border-radius:10px;
  font:500 13px/1.65 var(--font);color:var(--gray-700);
}
.pui-naming-rule b{color:var(--navy);font-weight:700;}
.pui-naming-rule code{background:var(--gray-100);padding:2px 6px;border-radius:4px;font:600 11px/1.4 ui-monospace,Menlo,monospace;color:var(--navy);}

/* ═══════════════════════════════════════════════════════════════
   COMPOSANTS DESIGN SYSTEM (lot 6 - complement). Portes au fur et a
   mesure depuis le dossier "Paso Design System" nettoye. Suivi :
   docs/paso/paso-ui-tracking.md.
   ═══════════════════════════════════════════════════════════════ */

/* pui-badge-* - badges (systeme distinct, palette pastel) - porte de component-badges.html */
.pui-badge-code{display:inline-flex;align-items:stretch;background:var(--pastel-navy);border-radius:6px;overflow:hidden;font-variant-numeric:tabular-nums;}
.pui-badge-code .pui-badge-key{background:var(--navy);color:#fff;padding:5px 8px;font:700 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.05em;}
.pui-badge-code .pui-badge-tag{padding:5px 10px;font:700 10px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--navy);}
.pui-badge-code.amber .pui-badge-key{background:var(--amber);color:#fafbfc;}
.pui-badge-code.amber{background:var(--pastel-amber);}
.pui-badge-code.amber .pui-badge-tag{color:var(--amber-dark);}
.pui-badge-underline{display:inline-flex;align-items:center;padding:0 0 3px;font:700 11px/1.2 var(--font);letter-spacing:.06em;color:var(--navy);border-bottom:2px solid var(--amber);}
.pui-badge-underline.mint{border-bottom-color:var(--mint);}
.pui-badge-underline.error{border-bottom-color:var(--error);color:var(--error);}
.pui-badge-underline.muted{border-bottom-color:var(--gray-200);color:var(--gray-600);}
.pui-badge-stat{display:inline-flex;align-items:baseline;gap:6px;padding:5px 10px;background:var(--pastel-success);color:var(--success);border-radius:6px;font-variant-numeric:tabular-nums;}
.pui-badge-stat .pui-badge-val{font:800 13px/1 var(--font);letter-spacing:-.4px;}
.pui-badge-stat .pui-badge-lbl{font:600 10px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;opacity:.85;}
.pui-badge-stat .pui-badge-arr{display:inline-flex;align-items:center;}
.pui-badge-stat .pui-badge-arr svg{width:11px;height:11px;}
.pui-badge-stat.down{background:var(--pastel-error);color:var(--error);}
.pui-badge-stat.amber{background:var(--pastel-amber);color:var(--amber-dark);}
.pui-badge-bracket{display:inline-flex;align-items:center;font:700 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.18em;color:var(--gray-600);padding:5px 4px;}
.pui-badge-bracket .pui-badge-br{color:var(--amber);font-weight:500;padding:0 4px;}
.pui-badge-bracket.solo{color:var(--navy);}

/* pui-card-dark - carte de contenu sur fond navy (RÈGLE: pas de halo) */
.pui-card-dark{background:var(--navy);border:1px solid transparent;border-radius:var(--radius-xl);padding:32px;color:#fff;position:relative;overflow:hidden;}
.pui-card-dark-inner{position:relative;}
.pui-card-dark-eyebrow{display:flex;align-items:center;gap:10px;font:700 10px/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:var(--amber-light);}
.pui-card-dark-eyebrow::before{content:'';width:18px;height:1px;background:currentColor;opacity:.7;}
.pui-card-dark-title{font:700 22px/1.25 var(--font);margin:12px 0 8px;color:#fff;letter-spacing:-.3px;}
.pui-card-dark-text{font:400 14px/1.65 var(--font);color:rgba(255,255,255,.7);margin:0 0 18px;}
.pui-card-dark-link{display:inline-flex;align-items:center;gap:8px;font:600 13.5px/1 var(--font);color:var(--amber);text-decoration:none;border-top:1px solid rgba(255,255,255,.1);padding-top:14px;cursor:pointer;}
.pui-card-dark-link svg{width:15px;height:15px;}

/* pui type/* - classes utilitaires de typographie + wordmark - portees de colors_and_type.css (Design System) */
.pui-display{font:800 var(--fs-display)/1.05 var(--font);letter-spacing:-2px;color:var(--navy);}
.pui-h1{font:800 var(--fs-h1)/var(--lh-tight) var(--font);letter-spacing:-1.2px;color:var(--navy);}
.pui-h2{font:700 var(--fs-h2)/1.15 var(--font);letter-spacing:-.5px;color:var(--navy);}
.pui-h3{font:700 var(--fs-h3)/1.25 var(--font);color:var(--navy);}
.pui-body-lg{font:400 var(--fs-body-lg)/var(--lh-body) var(--font);color:var(--gray-600);}
.pui-body{font:400 var(--fs-body)/var(--lh-loose) var(--font);color:var(--gray-800);}
.pui-body-sm{font:400 var(--fs-sm)/1.6 var(--font);color:var(--gray-600);}
.pui-caption{font:500 var(--fs-xs)/1.5 var(--font);color:var(--gray-600);}
.pui-emphasis{font-style:normal;color:var(--amber);}
/* Les DEUX rôles qui manquaient (lot 6 du chantier socle, 2026-08-25).
   Ils existaient dans chaque outil sous un nom local : c'est ainsi que deux
   tableaux voisins finissaient avec des en-tetes differents.
   .pui-label   : label de champ ET en-tete de colonne. Le meme role, donc la
                  meme classe - le distinguer n'apporterait qu'une occasion de
                  diverger.
   .pui-numeric : le chiffre qu'on lit et qu'on compare (KPI, total, cellule
                  chiffree). `tabular-nums` est le point entier : sans lui, les
                  colonnes de chiffres ne s'alignent pas verticalement. Consomme
                  --text-numeric, un token qui existait sans qu'aucune classe ne
                  l'utilise. */
.pui-label{display:block;font:600 var(--fs-label)/1.3 var(--font);letter-spacing:.09em;text-transform:uppercase;color:var(--gray-400);}
.pui-numeric{font:var(--text-numeric);letter-spacing:-.02em;color:var(--navy);font-variant-numeric:tabular-nums;}
.pui-numeric--sm{font:700 var(--fs-sm)/1.2 var(--font);letter-spacing:0;}
.pui-numeric--lg{font:800 var(--fs-h2)/1 var(--font);letter-spacing:-.03em;}
.pui-wordmark{font:800 22px/1 var(--font);letter-spacing:-.025em;color:var(--navy);display:inline-flex;align-items:baseline;}
.pui-wordmark .pui-wordmark-dot{color:var(--amber);}

/* ═══════════════════════════════════════════════════════════════
   MODELES DE LIVRABLES (lot 7) - portes du dossier "Paso Design
   System" (preview/tools-report.html + preview/tools-strategy.html).
   Deux familles :
   - pui-report-* (+ pui-pullquote, pui-kpi-strip, pui-chart-card,
     pui-perf-table, pui-reco-*) : rapport client editorial - cover
     navy, sommaire magazine sticky, diviseurs de section a grand
     numeral amber, citation, bande KPI, carte graphe multi-series,
     table de performance, recommandations priorisees, cloture (CTA
     via .pui-btn), pied, stylesheet d'impression A4 + responsive.
   - pui-doc-* / pui-synthesis / pui-numlist : document strategique -
     sections numerotees, listes a tiret amber + pastilles d'etat
     (validé / nouveau / legacy), bloc de synthese navy, liste 01/02.
   Conformite charte 2026-06-09 : les voiles radiaux amber et les
   glows des covers/graphes d'origine sont RETIRES (regle "pas de
   halo") ; la texture grille subtile est conservee. Couleurs 100%
   tokens (--mint-dark ajoute au :root pour les deltas positifs sur
   fond clair). Demo : tools/_shared/paso-ui-showcase-7.html.
   ═══════════════════════════════════════════════════════════════ */

/* pui-report - conteneur du rapport client */
.pui-report{max-width:1100px;margin:0 auto;background:var(--white);border:1px solid var(--gray-200);border-radius:14px;overflow:hidden;font-family:var(--font);}
.pui-report-cover{background:var(--navy);color:#fff;padding:60px 64px 56px;position:relative;overflow:hidden;}
.pui-report-cover::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:10px 10px;}
.pui-report-cover > *{position:relative;z-index:1;}
.pui-report-mast{display:flex;justify-content:space-between;align-items:center;margin-bottom:48px;}
.pui-report-mast .pui-wordmark{color:#fff;}
.pui-report-mast-meta{display:flex;align-items:center;gap:10px;font:700 11px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums;}
.pui-report-mast-meta .sep{width:3px;height:3px;border-radius:50%;background:currentColor;}
.pui-report-cover-eyebrow{font:700 11px/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--amber);display:inline-flex;align-items:center;gap:12px;margin-bottom:18px;}
.pui-report-cover-eyebrow::after{content:'';width:60px;height:1px;background:rgba(255,255,255,.15);}
.pui-report-cover-title{font:800 clamp(36px,4vw,52px)/1.05 var(--font);letter-spacing:-1.5px;color:#fff;margin:0 0 18px;max-width:740px;}
.pui-report-cover-title em{font-style:normal;color:var(--amber);}
.pui-report-cover-sub{font:400 17px/1.6 var(--font);color:rgba(255,255,255,.7);max-width:640px;margin:0 0 36px;}
.pui-report-meta-row{display:grid;grid-template-columns:repeat(4,auto);gap:32px;padding-top:28px;border-top:1px solid rgba(255,255,255,.12);}
.pui-report-meta-cell .lbl{font:700 9px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:7px;}
.pui-report-meta-cell .val{font:600 14px/1.2 var(--font);color:#fff;letter-spacing:-.1px;}
.pui-report-page{display:grid;grid-template-columns:200px 1fr;gap:0;}
.pui-report-toc{padding:48px 24px 48px 56px;border-right:1px solid var(--gray-100);background:var(--bg-page);position:sticky;top:0;align-self:start;max-height:100vh;overflow-y:auto;}
.pui-report-toc-label{font:700 10px/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:var(--gray-400);margin-bottom:18px;}
.pui-report-toc-list{display:flex;flex-direction:column;}
.pui-report-toc-item{display:grid;grid-template-columns:24px 1fr;gap:8px;padding:9px 0;font:500 12.5px/1.35 var(--font);color:var(--gray-600);text-decoration:none;cursor:pointer;border-bottom:1px solid var(--gray-100);transition:color .15s;align-items:start;word-break:break-word;hyphens:auto;}
.pui-report-toc-item:last-child{border-bottom:none;}
.pui-report-toc-item:hover{color:var(--navy);}
.pui-report-toc-item .n{font:700 11px/1.3 var(--font);color:var(--gray-300);font-variant-numeric:tabular-nums;letter-spacing:.04em;}
.pui-report-toc-item.active{color:var(--amber-dark);font-weight:700;}
.pui-report-toc-item.active .n{color:var(--amber);}
.pui-report-body{padding:48px 64px 64px;}
.pui-report-body p{font:400 15px/1.7 var(--font);color:var(--gray-700);margin:0 0 16px;}
.pui-report-body p b{color:var(--navy);font-weight:700;}
.pui-report-body p em{font-style:normal;color:var(--amber-dark);font-weight:600;}
.pui-report-divider{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;padding:18px 0 14px;border-top:1px solid var(--gray-200);margin:32px 0 24px;}
.pui-report-divider:first-child{margin-top:0;border-top:none;padding-top:0;}
.pui-report-divider .num{font:900 36px/1 var(--font);color:var(--amber);letter-spacing:-1.5px;font-variant-numeric:tabular-nums;}
.pui-report-divider .label-block{display:flex;flex-direction:column;gap:4px;}
.pui-report-divider .label{font:700 11px/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:var(--gray-400);}
.pui-report-divider .title{font:800 22px/1.1 var(--font);color:var(--navy);letter-spacing:-.5px;}
.pui-report-divider .title .dot{color:var(--amber);}
.pui-report-divider .meta{font:500 11px/1.4 var(--font);color:var(--gray-400);text-align:right;font-variant-numeric:tabular-nums;letter-spacing:.04em;}

/* pui-pullquote - citation editoriale (rapports, documents, etudes de cas) */
.pui-pullquote{margin:24px 0;padding:24px 28px;background:var(--bg-page);border-left:3px solid var(--amber);border-radius:0 8px 8px 0;font:500 17px/1.55 var(--font);color:var(--navy);letter-spacing:-.1px;}
.pui-pullquote q{quotes:"\201C" "\201D";}
.pui-pullquote q::before,.pui-pullquote q::after{color:var(--amber);font-weight:600;}
.pui-pullquote cite{display:block;margin-top:10px;font:500 12px/1 var(--font);color:var(--gray-600);font-style:normal;letter-spacing:.04em;}
.pui-pullquote cite::before{content:"- ";color:var(--gray-400);}

/* pui-kpi-strip - bande de KPI centres (rapports) */
.pui-kpi-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;background:var(--bg-page);border:1px solid var(--gray-200);border-radius:12px;padding:24px;margin:20px 0;}
.pui-kpi-strip .k{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;}
.pui-kpi-strip .v{font:900 32px/1 var(--font);letter-spacing:-1.2px;color:var(--navy);font-variant-numeric:tabular-nums;}
.pui-kpi-strip .v.mint{color:var(--mint-dark);}
.pui-kpi-strip .v.rose{color:var(--rose);}
.pui-kpi-strip .l{font:700 10px/1.2 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--gray-400);}

/* pui-chart-card - carte graphe multi-series (rapports) */
.pui-chart-card{margin:20px 0 28px;padding:24px 26px;background:var(--white);border:1px solid var(--gray-200);border-radius:12px;}
.pui-chart-card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;gap:18px;flex-wrap:wrap;}
.pui-chart-card-eyebrow{font:700 10px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--amber);display:inline-flex;align-items:center;gap:8px;}
.pui-chart-card-eyebrow::before{content:'';width:2px;height:11px;background:var(--amber);border-radius:1px;}
.pui-chart-card-title{font:800 18px/1.2 var(--font);letter-spacing:-.3px;color:var(--navy);margin:8px 0 0;}
.pui-chart-card-legend{display:inline-flex;gap:18px;font:600 11.5px/1 var(--font);color:var(--gray-600);}
.pui-chart-card-legend span{display:inline-flex;align-items:center;gap:7px;}
.pui-chart-card-legend .swatch{width:10px;height:3px;border-radius:2px;background:var(--gray-400);}
.pui-chart-card-legend .swatch.primary{background:var(--amber);height:5px;}
.pui-chart-card-legend .swatch.navy{background:var(--navy-mid);}
.pui-multi-chart{width:100%;height:220px;display:block;}
.pui-multi-chart .baseline{stroke:var(--gray-200);stroke-width:1;stroke-dasharray:2 4;}
.pui-multi-chart .series-line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.pui-multi-chart .series-line.amber{stroke:var(--amber);stroke-width:2.5;}
.pui-multi-chart .series-line.navy{stroke:var(--navy-mid);}
.pui-multi-chart .series-line.gray{stroke:var(--gray-400);stroke-dasharray:4 4;}
.pui-multi-chart .point.amber{fill:var(--amber);}
.pui-multi-chart .point.navy{fill:var(--navy-mid);}
.pui-multi-chart .point.gray{fill:var(--gray-400);}
.pui-chart-xaxis{display:flex;justify-content:space-between;font:500 10.5px/1 var(--font);color:var(--gray-400);margin-top:10px;font-variant-numeric:tabular-nums;letter-spacing:.04em;}

/* pui-perf-table - table d'indicateurs (rapports) */
.pui-perf-table{width:100%;border-collapse:collapse;margin:20px 0 28px;font:400 13px/1.4 var(--font);font-variant-numeric:tabular-nums;}
.pui-perf-table thead th{text-align:left;padding:12px 14px;font:700 10px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--gray-400);border-bottom:1px solid var(--gray-200);background:var(--bg-page);}
.pui-perf-table thead th.col-num{text-align:right;}
.pui-perf-table tbody tr{border-bottom:1px solid var(--gray-100);transition:background .15s;}
.pui-perf-table tbody tr:hover{background:var(--bg-page);}
.pui-perf-table tbody td{padding:14px;vertical-align:middle;color:var(--navy);}
.pui-perf-table tbody td.col-num{text-align:right;font-weight:700;}
.pui-perf-table tbody td.accent{color:var(--amber-dark);font-weight:800;font-size:14px;}
.pui-perf-table tbody td.target{color:var(--gray-400);font-weight:600;}
.pui-perf-table .sub{font:500 11px/1.3 var(--font);color:var(--gray-400);}
.pui-perf-table .delta{font:700 12px/1 var(--font);letter-spacing:-.1px;}
.pui-perf-table .delta.up{color:var(--mint-dark);}
.pui-perf-table .delta.up.bad{color:var(--error);}
.pui-perf-table .delta.down{color:var(--rose);}
.pui-perf-table .delta.down.good{color:var(--mint-dark);}

/* pui-reco - recommandations priorisees (rapports, audits) */
.pui-reco-list{display:flex;flex-direction:column;margin:24px 0 28px;}
.pui-reco-item{display:grid;grid-template-columns:48px 1fr auto;gap:20px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--gray-100);}
.pui-reco-item:first-child{border-top:1px solid var(--gray-100);}
.pui-reco-num{font:900 22px/1 var(--font);color:var(--amber);letter-spacing:-.6px;font-variant-numeric:tabular-nums;padding-top:2px;}
.pui-reco-body{min-width:0;}
.pui-reco-title{font:700 15px/1.3 var(--font);color:var(--navy);letter-spacing:-.2px;margin-bottom:6px;}
.pui-reco-desc{font:400 13px/1.6 var(--font);color:var(--gray-600);}
.pui-reco-meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;}
.pui-reco-tag{display:inline-flex;align-items:center;padding:3px 9px;border-radius:99px;font:700 9.5px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;}
.pui-reco-tag.high{background:color-mix(in srgb, var(--error) 10%, transparent);color:var(--error);}
.pui-reco-tag.medium{background:color-mix(in srgb, var(--amber) 12%, transparent);color:var(--amber-dark);}
.pui-reco-tag.low{background:color-mix(in srgb, var(--success) 10%, transparent);color:var(--success);}
.pui-reco-eta{font:600 10.5px/1 var(--font);color:var(--gray-400);letter-spacing:.04em;}

/* pui-report-close / pui-report-foot - cloture (CTA via .pui-btn) + pied */
.pui-report-close{padding:60px 64px;background:var(--bg-page);border-top:1px solid var(--gray-100);text-align:center;}
.pui-report-close-eyebrow{font:700 11px/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--amber);display:inline-block;margin-bottom:14px;}
.pui-report-close-title{font:800 clamp(28px,3vw,40px)/1.1 var(--font);letter-spacing:-1px;color:var(--navy);margin:0 0 22px;}
.pui-report-close-meta{font:600 15px/1.55 var(--font);color:var(--navy);margin-bottom:8px;}
.pui-report-close-meta b{font-weight:800;letter-spacing:-.1px;}
.pui-report-close-text{font:400 14px/1.6 var(--font);color:var(--gray-600);margin:0 auto 28px;max-width:560px;}
.pui-report-close-actions{display:inline-flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.pui-report-foot{display:flex;align-items:flex-start;justify-content:space-between;padding:28px 64px 36px;border-top:1px solid var(--gray-100);gap:24px;}
.pui-report-foot-name{font:800 14px/1.2 var(--font);color:var(--navy);letter-spacing:-.2px;display:inline-flex;align-items:center;gap:9px;}
.pui-report-foot-dot{width:6px;height:6px;border-radius:50%;background:var(--amber);}
.pui-report-foot-right{text-align:right;}
.pui-report-foot-email{font:600 13.5px/1.2 var(--font);color:var(--amber);letter-spacing:-.05em;text-decoration:none;}
.pui-report-foot-email:hover{text-decoration:underline;}
.pui-report-foot-sub{font:500 12px/1.5 var(--font);color:var(--gray-400);margin-top:4px;letter-spacing:.04em;}

/* pui-report - impression A4 (sauts propres) */
@media print{
  @page{size:A4;margin:18mm;}
  .pui-report{border:none;border-radius:0;max-width:100%;}
  .pui-report-cover{padding:32mm 24mm;}
  .pui-report-toc{padding:24mm 12mm;background:var(--white);border-right:1px solid var(--gray-200);position:static;max-height:none;}
  .pui-report-body{padding:24mm 28mm;}
  .pui-report-divider,.pui-pullquote,.pui-kpi-strip,.pui-chart-card,.pui-perf-table tr,.pui-reco-item{page-break-inside:avoid;break-inside:avoid;}
  .pui-report-close{padding:24mm 24mm;}
  .pui-report-foot{padding:14mm 24mm 18mm;}
}

/* pui-report - responsive */
@media (max-width:760px){
  .pui-report-cover{padding:36px 24px 32px;}
  .pui-report-mast{flex-wrap:wrap;gap:12px;margin-bottom:28px;}
  .pui-report-page{grid-template-columns:1fr;}
  .pui-report-toc{position:static;max-height:none;border-right:none;border-bottom:1px solid var(--gray-100);padding:24px;}
  .pui-report-body{padding:28px 24px 40px;}
  .pui-report-close{padding:40px 24px;}
  .pui-report-foot{padding:24px;flex-direction:column;}
  .pui-report-foot-right{text-align:left;}
  .pui-report-meta-row{grid-template-columns:1fr 1fr;}
  .pui-kpi-strip{grid-template-columns:1fr;}
}

/* pui-doc - document strategique : sections numerotees + listes a pastilles */
.pui-doc-section{margin:48px 0;padding:36px 32px;background:var(--white);border:1px solid var(--gray-200);border-radius:18px;box-shadow:var(--shadow-sm);}
.pui-doc-section-title{font:800 28px/1.15 var(--font);letter-spacing:-1px;color:var(--navy);margin:0 0 6px;}
.pui-doc-section-title .num{display:inline-block;color:var(--gray-200);margin-right:14px;letter-spacing:-2px;font-variant-numeric:tabular-nums;}
.pui-doc-sub{font:500 13px/1.5 var(--font);color:var(--gray-600);margin-bottom:24px;}
.pui-doc-cols{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:24px;}
.pui-doc-h3{font:700 12px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--gray-400);margin:0 0 12px;}
.pui-doc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.pui-doc-list li{font:400 13px/1.55 var(--font);color:var(--gray-800);padding-left:18px;position:relative;}
.pui-doc-list li::before{content:'';position:absolute;left:0;top:9px;width:8px;height:1px;background:var(--amber);}
.pui-doc-list li b{color:var(--navy);font-weight:700;}
.pui-doc-pill{display:inline-flex;align-items:center;padding:1px 6px;border-radius:4px;background:color-mix(in srgb, var(--mint) 18%, transparent);color:var(--mint-dark);font:700 9px/1.4 ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;margin-left:6px;}
.pui-doc-pill.new{background:color-mix(in srgb, var(--amber) 12%, transparent);color:var(--amber-dark);}
.pui-doc-pill.bury{background:color-mix(in srgb, var(--error) 10%, transparent);color:var(--error);}
@media(max-width:880px){.pui-doc-cols{grid-template-columns:1fr;}}

/* pui-synthesis - bloc de synthese navy + cartes de sortie (sans halo) */
.pui-synthesis{margin:60px 0 0;padding:48px 40px;background:var(--navy);color:#fff;border-radius:20px;position:relative;overflow:hidden;}
.pui-synthesis::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:10px 10px;}
.pui-synthesis > *{position:relative;}
.pui-synthesis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px;}
.pui-out-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:18px;}
.pui-out-card-tag{font:700 9px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--amber-light);margin-bottom:10px;display:block;}
.pui-out-card-name{font:700 14px/1.2 var(--font);color:#fff;letter-spacing:-.2px;margin-bottom:4px;}
.pui-out-card-desc{font:400 12px/1.55 var(--font);color:rgba(255,255,255,.6);}
@media(max-width:880px){.pui-synthesis-grid{grid-template-columns:1fr;}}

/* pui-numlist - liste numerotee editoriale (01. 02. ...) */
.pui-numlist{counter-reset:q;list-style:none;padding:0;margin:24px 0 0;}
.pui-numlist li{counter-increment:q;padding:18px 0 18px 48px;border-bottom:1px solid var(--gray-100);font:400 15px/1.6 var(--font);color:var(--gray-800);position:relative;}
.pui-numlist li::before{content:counter(q,decimal-leading-zero);position:absolute;left:0;top:18px;font:800 18px/1 var(--font);color:var(--amber);letter-spacing:-.4px;}
.pui-numlist li b{color:var(--navy);font-weight:700;}