/* ==========================================================================
   Conducting Platform — design system v0.4
   Atmosphère contractuelle (D6, démo) : blanc chaud, encre, noir signature.
   Tokens --ds-* HSL composables · deux thèmes · motion tokens.
   ========================================================================== */
@layer tokens, base, components;

@layer tokens {
  :root {
    /* Palette (thème clair = référence démo) */
    --ds-bg: 40 25% 97%;          /* blanc chaud */
    --ds-surface: 0 0% 100%;
    --ds-ink: 30 4% 12%;          /* encre */
    --ds-muted: 30 4% 42%;
    --ds-primary: 30 4% 8%;       /* noir signature #141412 */
    --ds-success: 152 60% 32%;
    --ds-danger: 0 72% 42%;
    --ds-warning: 38 92% 40%;
    /* Données (départements) */
    --ds-data-1: 210 70% 45%; --ds-data-2: 152 55% 38%;
    --ds-data-3: 268 55% 55%; --ds-data-4: 20 80% 52%;
    /* Géométrie */
    --ds-radius: .5rem; --ds-radius-lg: .75rem;
    --ds-shadow: 0 1px 2px hsl(var(--ds-ink) / .06), 0 8px 24px hsl(var(--ds-ink) / .07);
    --ds-space-4: 1.5rem; --ds-topbar-h: 3.5rem;
    /* Typo */
    --ds-font-body: Inter, system-ui, sans-serif;
    --ds-font-display: "Inter Tight", var(--ds-font-body);
    /* Motion */
    --ds-dur-1: 150ms; --ds-dur-2: 300ms;
    --ds-ease: cubic-bezier(.2, .8, .2, 1);
  }
  [data-theme="dark"] {
    --ds-bg: 30 4% 9%; --ds-surface: 30 4% 13%;
    --ds-ink: 40 20% 92%; --ds-muted: 40 8% 60%;
    --ds-primary: 40 25% 92%;
  }
}

@layer base {
  * { box-sizing: border-box; }
  body {
    margin: 0; font-family: var(--ds-font-body);
    background: hsl(var(--ds-bg)); color: hsl(var(--ds-ink));
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; }
  ::selection { background: hsl(var(--ds-primary) / .12); }
  :focus-visible { outline: 2px solid hsl(var(--ds-primary)); outline-offset: 2px; }
}

@layer components {
  /* (ancienne coquille retirée — remplacée par la coquille de référence, plus bas) */
  #toast-host { position: fixed; top: .75rem; right: .75rem; z-index: 50;
                display: grid; gap: .5rem; width: min(22rem, 90vw); }

  /* ---------- Primitives ---------- */
  .card { background: hsl(var(--ds-surface)); border: 1px solid hsl(var(--ds-ink) / .08);
          border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow); padding: 1rem; }
  .btn { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
         font: inherit; padding: .5rem .9rem; border-radius: var(--ds-radius);
         border: 1px solid hsl(var(--ds-ink) / .15); background: hsl(var(--ds-surface));
         color: hsl(var(--ds-ink)); transition: background var(--ds-dur-1) var(--ds-ease); }
  .btn:hover { background: hsl(var(--ds-ink) / .05); }
  .btn--primary { background: hsl(var(--ds-primary)); color: hsl(var(--ds-bg));
                  border-color: hsl(var(--ds-primary)); }
  .btn--primary:hover { background: hsl(var(--ds-primary) / .85); }
  .input { font: inherit; width: 100%; padding: .55rem .7rem;
           border: 1px solid hsl(var(--ds-ink) / .18); border-radius: var(--ds-radius);
           background: hsl(var(--ds-surface)); color: hsl(var(--ds-ink)); }
  .pill { display: inline-flex; align-items: center; font-size: .75rem;
          padding: .2rem .55rem; border-radius: 999px; text-decoration: none;
          border: 1px solid hsl(var(--ds-ink) / .15); background: hsl(var(--ds-surface)); }
  .pill:hover { background: hsl(var(--ds-ink) / .06); }
  @keyframes card-enter { from { opacity: 0; translate: 0 .4rem; } to { opacity: 1; translate: 0 0; } }

  /* ---------- Graphe (SVG serveur) ---------- */
  .graph__title { font-family: var(--ds-font-display); font-size: 1.125rem; }
  .graph svg { width: 100%; height: auto; }
  .graph__edge { stroke: hsl(var(--ds-ink) / .18); stroke-width: 1.2; }
  .graph__node circle { fill: hsl(var(--ds-surface)); stroke: hsl(var(--ds-ink) / .5);
                        stroke-width: 1.5; transition: stroke var(--ds-dur-1) var(--ds-ease); }
  .graph__node:hover circle { stroke: hsl(var(--ds-primary)); stroke-width: 2.5; }
  .graph__node text { font-size: 11px; fill: hsl(var(--ds-muted)); }
  .graph__node--department circle { fill: hsl(var(--ds-data-1) / .12); stroke: hsl(var(--ds-data-1)); }
  .graph__node--tool circle       { fill: hsl(var(--ds-data-2) / .12); stroke: hsl(var(--ds-data-2)); }
  .graph__node--workflow circle,
  .graph__node--usecase circle    { fill: hsl(var(--ds-data-3) / .12); stroke: hsl(var(--ds-data-3)); }
  .graph__node--agent circle      { fill: hsl(var(--ds-data-4) / .12); stroke: hsl(var(--ds-data-4)); }
  /* ---------- F4 · Auth (pages pleines) ---------- */
  .auth-page { background: hsl(var(--ds-bg)); min-height: 100dvh; display: grid; place-items: center; }
  .auth-shell { width: min(26rem, 92vw); display: grid; gap: var(--ds-space-4, 1.5rem); }
  .auth-brand { display: flex; align-items: center; gap: .6rem; justify-content: center; }
  .auth-brand__mark { width: .9rem; height: .9rem; border-radius: 50%; background: hsl(var(--ds-primary)); }
  .auth-brand__name { font-family: var(--ds-font-display, var(--ds-font-body)); font-weight: 600; letter-spacing: -0.01em; color: hsl(var(--ds-ink)); }
  .auth-card { padding: clamp(1.25rem, 4vw, 2rem); }
  .auth-title { font-size: 1.25rem; margin: 0 0 .75rem; color: hsl(var(--ds-ink)); }
  .auth-lede { color: hsl(var(--ds-muted)); margin: 0 0 1rem; }
  .auth-alt { text-align: center; font-size: .875rem; margin-top: .75rem; }
  .auth-foot__hint { text-align: center; color: hsl(var(--ds-muted)); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
  .auth-messages { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
  .stack { display: grid; gap: .9rem; }
  .field { display: grid; gap: .35rem; }
  .field label { font-size: .8125rem; font-weight: 500; color: hsl(var(--ds-ink)); }
  .field-errors { color: hsl(var(--ds-danger, 0 72% 42%)); font-size: .8125rem; }
  .btn--block { width: 100%; justify-content: center; }

  /* ---------- F4 · Toasts (entrée/sortie) ---------- */
  .toast {
    display: flex; align-items: center; gap: .6rem;
    background: hsl(var(--ds-surface)); color: hsl(var(--ds-ink));
    border: 1px solid hsl(var(--ds-ink) / .08);
    border-radius: var(--ds-radius); box-shadow: var(--ds-shadow);
    padding: .6rem .8rem; font-size: .875rem;
  }
  .toast--success { border-inline-start: 3px solid hsl(var(--ds-success, 152 60% 32%)); }
  .toast--error   { border-inline-start: 3px solid hsl(var(--ds-danger, 0 72% 42%)); }
  .toast--warning { border-inline-start: 3px solid hsl(var(--ds-warning, 38 92% 40%)); }
  .toast__close { margin-inline-start: auto; background: none; border: 0; cursor: pointer; color: hsl(var(--ds-muted)); font-size: 1rem; line-height: 1; }
  .toast__close:focus-visible { outline: 2px solid hsl(var(--ds-primary)); outline-offset: 2px; }
  #toast-host .toast { animation: toast-in var(--ds-dur-2, .3s) var(--ds-ease, ease-out) both; }
  @keyframes toast-in { from { opacity: 0; translate: 0 -.5rem; } to { opacity: 1; translate: 0 0; } }

  /* ---------- F5 · Chat ---------- */
  .chat { display: grid; grid-template-rows: auto 1fr auto; gap: 1rem; height: calc(100dvh - var(--ds-topbar-h, 4rem) - 2rem); }
  .chat__head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
  .chat__title { margin: 0; font-size: 1.125rem; color: hsl(var(--ds-ink)); }
  .chat__context { margin: 0; color: hsl(var(--ds-muted)); font-size: .875rem; }
  .chat__ws-state { margin: 0 0 0 auto; font-size: .75rem; color: hsl(var(--ds-muted)); }
  .chat__ws-state[data-state="open"]   { color: hsl(var(--ds-success, 152 60% 32%)); }
  .chat__ws-state[data-state="closed"] { color: hsl(var(--ds-danger, 0 72% 42%)); }
  .chat__scroll { overflow-y: auto; display: grid; gap: .75rem; padding-inline-end: .25rem; align-content: start; }
  .chat__empty { color: hsl(var(--ds-muted)); max-width: 44ch; }
  .chat__form { display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: end; }
  .chat-input { resize: vertical; min-height: 2.75rem; }

  .msg { max-width: 46rem; border-radius: var(--ds-radius-lg, var(--ds-radius));
         padding: .7rem .9rem; animation: card-enter var(--ds-dur-2, .3s) var(--ds-ease, ease-out) both; }
  .msg--user { background: hsl(var(--ds-primary)); color: hsl(var(--ds-bg)); justify-self: end; }
  .msg--assistant { background: hsl(var(--ds-surface)); color: hsl(var(--ds-ink));
                    border: 1px solid hsl(var(--ds-ink) / .08); justify-self: start; }
  .msg--error .msg__body { color: hsl(var(--ds-danger, 0 72% 42%)); }
  .msg__body { white-space: pre-wrap; overflow-wrap: anywhere; }

  .msg__thinking { display: inline-flex; gap: .3rem; padding-block: .35rem; }
  .msg__thinking span { width: .4rem; height: .4rem; border-radius: 50%;
                        background: hsl(var(--ds-muted));
                        animation: think 1.2s ease-in-out infinite; }
  .msg__thinking span:nth-child(2) { animation-delay: .15s; }
  .msg__thinking span:nth-child(3) { animation-delay: .3s; }
  @keyframes think { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

  .msg__sources { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
                  margin-top: .6rem; padding-top: .5rem;
                  border-top: 1px solid hsl(var(--ds-ink) / .08); }
  .msg__sources-label { font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase;
                        color: hsl(var(--ds-muted)); }
  .pill--source { cursor: pointer; }

  /* ---------- Lot A · Le graphe pulse sur les sources citées ----------
     Cible : nœuds [data-entity-id] et arêtes [data-sid][data-tid] du SVG
     serveur (F2). Aucune géométrie touchée : uniquement opacité/halo,
     donc zéro CLS et fonctionnel JS coupé (classes simplement absentes). */
  [data-graph-root] .is-dim, .graph svg .is-dim { opacity: .22; transition: opacity var(--ds-dur-2, .3s) var(--ds-ease, ease); }
  [data-graph-root] .is-cited circle,
  [data-graph-root] .is-cited rect,
  .graph svg .is-cited circle,
  .graph svg .is-cited rect {
    stroke: hsl(var(--ds-primary));
    stroke-width: 2.5;
    filter: drop-shadow(0 0 6px hsl(var(--ds-primary) / .45));
    animation: cited-pulse 1.6s var(--ds-ease, ease-in-out) infinite;
  }
  [data-graph-root] .is-cited-edge, .graph svg .is-cited-edge {
    stroke: hsl(var(--ds-primary) / .7);
    stroke-width: 2;
    animation: cited-edge 1.6s linear infinite;
    stroke-dasharray: 6 4;
  }
  @keyframes cited-pulse {
    0%, 100% { filter: drop-shadow(0 0 3px hsl(var(--ds-primary) / .25)); }
    50%      { filter: drop-shadow(0 0 9px hsl(var(--ds-primary) / .55)); }
  }
  @keyframes cited-edge { to { stroke-dashoffset: -20; } }
}

/* ---------- Variantes reduced-motion (invariant : chaque effet a la sienne) */
@media (prefers-reduced-motion: reduce) {
  #toast-host .toast,
  .msg,
  [data-graph-root] .is-cited circle,
  [data-graph-root] .is-cited rect,
  .graph svg .is-cited circle,
  .graph svg .is-cited rect,
  [data-graph-root] .is-cited-edge,
  .graph svg .is-cited-edge,
  .msg__thinking span {
    animation: none;
  }
  /* L'information reste : les nœuds cités gardent halo statique + contour,
     le reste garde le dim — le sens est préservé sans mouvement. */
  [data-graph-root] .is-cited circle, .graph svg .is-cited circle,
  [data-graph-root] .is-cited rect,   .graph svg .is-cited rect {
    filter: drop-shadow(0 0 6px hsl(var(--ds-primary) / .45));
  }
  .msg__thinking span { opacity: .6; }
}

@layer components {
  /* ---------- F3 · Board & StageGate ---------- */
  .board__head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
  .board__title { font-family: var(--ds-font-display); font-size: 1.125rem; margin: 0; }
  .board__hint { color: hsl(var(--ds-muted)); font-size: .8125rem; margin: 0; }
  .board__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-block: 1rem; }
  .board__col-title { font-size: .8125rem; letter-spacing: .05em; text-transform: uppercase;
                      color: hsl(var(--ds-muted)); }
  .board__card { display: grid; gap: .2rem; width: 100%; text-align: start; cursor: pointer;
                 font: inherit; margin-block-end: .6rem;
                 animation: card-enter var(--ds-dur-2) var(--ds-ease) both; }
  .board__card:hover { border-color: hsl(var(--ds-primary)); }
  .board__card-label { font-weight: 600; }
  .board__card-wf { font-size: .75rem; color: hsl(var(--ds-muted)); }
  .board__empty { color: hsl(var(--ds-muted)); }
  .gatepanel { margin-top: 1rem; max-width: 40rem;
               animation: card-enter var(--ds-dur-2) var(--ds-ease) both; }
  .gatepanel__head { display: flex; align-items: center; gap: .6rem; }
  .gatepanel__title { margin: 0; font-size: 1rem; }
  .gatepanel__subtitle { font-size: .8125rem; text-transform: uppercase;
                         letter-spacing: .05em; color: hsl(var(--ds-muted)); }
  .gatepanel__wf--missing { color: hsl(var(--ds-danger)); }
  .gatepanel__done { color: hsl(var(--ds-success)); font-weight: 600; }
  .gate { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .45rem; }
  .gate__item { display: grid; grid-template-columns: 7rem 1fr; gap: .6rem;
                padding: .45rem .6rem; border-radius: var(--ds-radius);
                border: 1px solid hsl(var(--ds-ink) / .08); }
  .gate__item--ok { border-inline-start: 3px solid hsl(var(--ds-success));
                    background: hsl(var(--ds-success) / .06); }
  .gate__item--ko { border-inline-start: 3px solid hsl(var(--ds-danger));
                    background: hsl(var(--ds-danger) / .06); }
  .gate__check { font-weight: 600; text-transform: capitalize; }
  .gate__reason { color: hsl(var(--ds-muted)); font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .board__card, .gatepanel { animation: none; }
}

@layer components {
  /* ---------- S9 · Fiche personne à onglets ---------- */
  .person { display: grid; gap: 1rem; max-width: 44rem; }
  .person__name { margin: 0; font-family: var(--ds-font-display); }
  .person__meta { color: hsl(var(--ds-muted)); margin: .25rem 0 .75rem; }
  .person__subtitle { font-size: .8125rem; text-transform: uppercase;
                      letter-spacing: .05em; color: hsl(var(--ds-muted)); }
  .person__tab { animation: card-enter var(--ds-dur-2) var(--ds-ease) both; }
  .tabs { display: flex; gap: .25rem; border-bottom: 1px solid hsl(var(--ds-ink) / .1); }
  .tabs__tab { font: inherit; cursor: pointer; background: none; border: 0;
               padding: .55rem .9rem; color: hsl(var(--ds-muted));
               border-bottom: 2px solid transparent; }
  .tabs__tab[aria-selected="true"] { color: hsl(var(--ds-ink));
               border-bottom-color: hsl(var(--ds-primary)); font-weight: 600; }
  .facts { display: grid; gap: .6rem; margin: 0; }
  .facts dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em;
              color: hsl(var(--ds-muted)); }
  .facts dd { margin: .15rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem; }
  .hitl-duty { margin: .3rem 0; }
}
@media (prefers-reduced-motion: reduce) { .person__tab { animation: none; } }

@layer components {
  /* ---------- S10 · Agents & multi-org ---------- */
  .agentchart__title { font-family: var(--ds-font-display); font-size: 1.125rem; margin: 0; }
  .agentchart__hint { color: hsl(var(--ds-muted)); font-size: .8125rem; }
  .agentchart__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
                      gap: 1rem; margin-block: 1rem; }
  .agentcard { display: grid; gap: .6rem; animation: card-enter var(--ds-dur-2) var(--ds-ease) both; }
  .agentcard__head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
  .agentcard__name { margin: 0; font-size: 1rem; }
  .agentcard__subs, .agentcard__hitl { list-style: none; margin: 0; padding: 0;
                                       display: flex; flex-wrap: wrap; gap: .3rem; }
  .agentcard__hitl { display: grid; gap: .25rem; font-size: .875rem;
                     color: hsl(var(--ds-muted)); }
  .agentcard__nohitl { color: hsl(var(--ds-warning)); }
  .agentcard__actions { display: flex; gap: .5rem; }
  .pill--live { border-color: hsl(var(--ds-success)); color: hsl(var(--ds-success)); }
  .pill--active { border-color: hsl(var(--ds-primary)); font-weight: 600; }
  .overlaypanel { margin-top: 1rem; max-width: 44rem;
                  animation: card-enter var(--ds-dur-2) var(--ds-ease) both; }
  .overlaypanel__title { margin: 0 0 .75rem; font-size: 1rem; }
  .overlaypanel__subtitle { font-size: .8125rem; text-transform: uppercase;
                            letter-spacing: .05em; color: hsl(var(--ds-muted)); }
  .overlaypanel__prompt { font-size: .8125rem; word-break: break-word; }
  .topbar__switch { display: flex; gap: .35rem; }
  .topbar__switch .pill { cursor: pointer; font: inherit; font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) { .agentcard, .overlaypanel { animation: none; } }

@layer components {
  /* ---------- S11 · Catalogue playbooks + éditeur HITL ---------- */
  .catalog__title { font-family: var(--ds-font-display); font-size: 1.125rem; margin: 0; }
  .catalog__hint { color: hsl(var(--ds-muted)); font-size: .8125rem; }
  .catalog__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
                   gap: 1rem; margin-block: 1rem; }
  .pbcard { display: grid; gap: .55rem; align-content: start;
            animation: card-enter var(--ds-dur-2) var(--ds-ease) both; }
  .pbcard__head { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
  .pbcard__name { margin: 0; font-size: 1rem; }
  .pbcard__changelog { color: hsl(var(--ds-muted)); font-size: .875rem; margin: 0; }
  .pbcard__count { font-size: .8125rem; margin: 0; }
  .pbcard__subtitle { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em;
                      color: hsl(var(--ds-muted)); margin: .25rem 0 0; }
  .pbcard__wins { margin: 0; padding-inline-start: 1rem; font-size: .8125rem;
                  display: grid; gap: .3rem; }
  .pbcard__done { color: hsl(var(--ds-success)); margin: 0; }
  .pbcard__none { color: hsl(var(--ds-muted)); }
  .triggers { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .4rem; }
  .triggers__item { display: flex; align-items: center; justify-content: space-between;
                    gap: .6rem; padding: .4rem .6rem; border-radius: var(--ds-radius);
                    border: 1px solid hsl(var(--ds-ink) / .08); font-size: .875rem; }
  .triggers__empty { color: hsl(var(--ds-warning)); }
  .triggers__add { border-top: 1px solid hsl(var(--ds-ink) / .08); padding-top: .75rem; }
  .btn--small { padding: .25rem .6rem; font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) { .pbcard { animation: none; } }

@layer components {
  /* ---------- S12 · a11y & langue ---------- */
  .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100;
               background: hsl(var(--ds-primary)); color: hsl(var(--ds-bg));
               padding: .5rem .9rem; border-radius: 0 0 var(--ds-radius) 0; }
  .skip-link:focus-visible { left: 0; }
  .topbar__lang { display: flex; gap: .3rem; margin-inline-end: .75rem; }
  .topbar__lang .pill { cursor: pointer; font: inherit; font-size: .7rem; }
  .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px;
             overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@layer components {
  /* ---------- S12 · a11y & langue ---------- */
  .skip-link { position: absolute; left: -999px; top: .5rem; z-index: 100;
               background: hsl(var(--ds-primary)); color: hsl(var(--ds-bg));
               padding: .5rem .9rem; border-radius: var(--ds-radius); }
  .skip-link:focus { left: .5rem; }
  .topbar__lang { display: flex; gap: .3rem; margin-inline-end: .75rem; }
  .topbar__lang .pill { cursor: pointer; font: inherit; font-size: .7rem; }
}

@layer components {
  /* ---------- S14 · Gouvernance, signup, team ---------- */
  .forbidden { max-width: 32rem; border-inline-start: 3px solid hsl(var(--ds-danger)); }
  .forbidden__title { margin: 0 0 .4rem; font-size: 1rem; color: hsl(var(--ds-danger)); }
  .gatepanel__readonly, .team__readonly, .team__full { color: hsl(var(--ds-muted)); font-size: .875rem; }
  .team__head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
  .team__title { font-family: var(--ds-font-display); font-size: 1.125rem; margin: 0; }
  .team__seats { color: hsl(var(--ds-muted)); font-size: .875rem; }
  .team__subtitle { font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em;
                    color: hsl(var(--ds-muted)); }
  .team__list { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .5rem; }
  .team__member { display: flex; align-items: center; justify-content: space-between;
                  padding: .6rem .8rem; }
  .team__invite { max-width: 26rem; border-top: 1px solid hsl(var(--ds-ink) / .08);
                  padding-top: 1rem; }
}

@layer components {
  /* ---------- Landing publique (racine) ---------- */
  .landing { margin: 0; min-height: 100dvh; display: flex; flex-direction: column;
             background: hsl(var(--ds-bg)); color: hsl(var(--ds-ink)); }
  .landing__header { display: flex; align-items: center; justify-content: space-between;
                     gap: 1rem; padding: 1rem clamp(1rem, 4vw, 3rem); }
  .landing__brand { font-family: var(--ds-font-display); font-size: 1.125rem; margin: 0; }
  .landing__nav { display: flex; gap: .6rem; flex-wrap: wrap; }
  .hero { padding: clamp(2.5rem, 8vw, 6rem) clamp(1rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem);
          max-width: 56rem; }
  .hero__title { font-family: var(--ds-font-display); margin: 0 0 1rem;
                 font-size: clamp(1.75rem, 4.5vw, 3rem); line-height: 1.15;
                 letter-spacing: -0.02em; }
  .hero__lede { font-size: clamp(1rem, 1.6vw, 1.1875rem); line-height: 1.6;
                color: hsl(var(--ds-ink) / .85); max-width: 44rem; margin: 0 0 1.5rem; }
  .hero__actions { display: flex; gap: .75rem; flex-wrap: wrap; margin: 0; }
  .btn--lg { padding: .7rem 1.2rem; font-size: 1rem; }
  .pillars, .how { padding: 0 clamp(1rem, 4vw, 3rem) clamp(2rem, 5vw, 3.5rem); }
  .pillars__title, .how__title { font-family: var(--ds-font-display);
                 font-size: clamp(1.125rem, 2.2vw, 1.5rem); margin: 0 0 1rem; }
  .pillars__grid { display: grid; gap: 1rem;
                   grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
  .pillar { display: grid; gap: .5rem; align-content: start; }
  .pillar__name { margin: 0; font-size: 1rem; }
  .pillar p { margin: 0; font-size: .9375rem; line-height: 1.55;
              color: hsl(var(--ds-ink) / .8); }
  .how__list { margin: 0; padding-inline-start: 1.1rem; max-width: 46rem;
               display: grid; gap: .6rem; font-size: .9375rem; line-height: 1.55; }
  .landing__footer { margin-top: auto; padding: 1.25rem clamp(1rem, 4vw, 3rem);
                     border-top: 1px solid hsl(var(--ds-ink) / .08);
                     color: hsl(var(--ds-muted)); font-size: .875rem; }
}

@layer components {
  /* ---------- Lot C · Écritures HubSpot ---------- */
  .hswrites__title { font-family: var(--ds-font-display); font-size: 1.125rem; margin: 0; }
  .hswrites__hint { color: hsl(var(--ds-muted)); font-size: .8125rem; }
  .hswrites__subtitle { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em;
                        color: hsl(var(--ds-muted)); margin: 1.25rem 0 .5rem; }
  .hswrites__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
  .hswrites__item { display: flex; align-items: center; justify-content: space-between;
                    gap: 1rem; padding: .7rem .9rem; flex-wrap: wrap; }
  .hswrites__item--applied { border-inline-start: 3px solid hsl(var(--ds-success)); }
  .hswrites__item--rejected { border-inline-start: 3px solid hsl(var(--ds-danger)); }
  .hswrites__item--reverted { border-inline-start: 3px solid hsl(var(--ds-warning)); }
  .hswrites__what { display: flex; gap: .5rem; flex-wrap: wrap; align-items: baseline;
                    font-size: .9rem; }
  .hswrites__source, .hswrites__by { color: hsl(var(--ds-muted)); font-size: .8125rem; }
  .hswrites__actions { display: flex; gap: .5rem; }
  .hswrites__readonly, .hswrites__empty { color: hsl(var(--ds-muted)); font-size: .875rem; }
}

@layer components {
  /* ---------- Lot D · Brouillons Outlook ---------- */
  .drafts__title { font-family: var(--ds-font-display); font-size: 1.125rem; margin: 0; }
  .drafts__hint { color: hsl(var(--ds-muted)); font-size: .8125rem; max-width: 52rem; }
  .drafts__list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }
  .drafts__item { padding: .7rem .9rem; display: grid; gap: .35rem; }
  .drafts__meta { display: flex; gap: .5rem; flex-wrap: wrap; align-items: baseline; }
  .drafts__to { color: hsl(var(--ds-muted)); font-size: .875rem; }
  .drafts__sub { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
                 font-size: .8125rem; color: hsl(var(--ds-muted)); }
  .drafts__empty { color: hsl(var(--ds-muted)); font-size: .875rem; }
}

@layer components {
  /* ============================================================
     PHASE 1 — COQUILLE (shell) au gabarit de référence.
     Tokens canoniques (tokens.css). Remplace .shell/.sidebar/.topbar
     de l'ancienne coquille par .app + composants de référence.
     ============================================================ */
  .skip-link{position:absolute;left:-999px;top:0;background:hsl(var(--primary));color:hsl(var(--primary-fg));padding:8px 14px;border-radius:0 0 var(--radius) 0;z-index:100}
  .skip-link:focus{left:0}

  .app{display:grid;grid-template-columns:230px 1fr;height:100vh;
       font-family:var(--font);font-size:13px;
       background:hsl(var(--bg));color:hsl(var(--ink))}

  /* -------- sidebar -------- */
  .sidebar{background:hsl(var(--surface));border-right:1px solid hsl(var(--line));display:flex;flex-direction:column;overflow-y:auto}
  .org{display:flex;align-items:center;gap:9px;padding:14px 14px 12px}
  .org-logo{width:28px;height:28px;border-radius:7px;background:hsl(var(--primary));color:hsl(var(--primary-fg));display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
  .org-name{font-weight:600;font-size:13px}
  .org-sub{font-size:10px;color:hsl(var(--ink-3));letter-spacing:.04em;text-transform:uppercase}
  .nav{padding:2px 8px 14px}
  .nav-label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:hsl(var(--ink-3));padding:12px 8px 5px}
  .nav-item{display:flex;align-items:center;gap:9px;width:100%;padding:6px 8px;border-radius:7px;color:hsl(var(--ink-2));font-size:12.5px;text-align:left;text-decoration:none;transition:background var(--t-tap) var(--ease),color var(--t-tap) var(--ease)}
  .nav-item svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;flex:none}
  .nav-item:hover{background:hsl(var(--ink) / .05);color:hsl(var(--ink))}
  .nav-item.active{background:hsl(var(--primary));color:hsl(var(--primary-fg));font-weight:500}
  .nav-item .count{margin-left:auto;font-size:10.5px;color:hsl(var(--ink-3))}
  .nav-item.active .count{color:hsl(var(--primary-fg) / .6)}

  .sidebar-foot{margin-top:auto;border-top:1px solid hsl(var(--line));padding:10px 14px;display:flex;align-items:center;gap:8px}
  .sidebar-foot__id{min-width:0;flex:1}
  .sidebar-foot__name{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sidebar-foot__role{font-size:10px;color:hsl(var(--ink-3))}
  .sidebar-foot__logout{flex:none}

  /* -------- main + topbar -------- */
  .main{display:flex;flex-direction:column;min-width:0;position:relative}
  .topbar{height:46px;border-bottom:1px solid hsl(var(--line));background:hsl(var(--surface));display:flex;align-items:center;gap:14px;padding:0 16px;flex:none;z-index:5}
  .search{flex:1;max-width:400px;display:flex;align-items:center;gap:7px;background:hsl(var(--ink) / .04);border:1px solid hsl(var(--line));border-radius:8px;padding:0 10px;color:hsl(var(--ink-3))}
  .search svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.7;flex:none}
  .search input{flex:1;border:none;background:none;color:hsl(var(--ink));font:inherit;font-size:12px;padding:6px 0;outline:none}
  .search input::placeholder{color:hsl(var(--ink-3))}
  .meta-strip{font-size:11px;color:hsl(var(--ink-3));white-space:nowrap}
  .meta-strip b{color:hsl(var(--ink-2));font-weight:600}
  .mode-tabs{display:flex;background:hsl(var(--ink) / .04);border:1px solid hsl(var(--line));border-radius:8px;padding:2px;gap:2px}
  .mode-tab{padding:4px 12px;border-radius:6px;font-size:11.5px;color:hsl(var(--ink-2));text-decoration:none}
  .mode-tab.active{background:hsl(var(--surface));box-shadow:var(--shadow-1);color:hsl(var(--ink));font-weight:500}
  .mode-tab--soon{opacity:.5;cursor:not-allowed}
  .icon-btn{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:hsl(var(--ink-2));border:none;background:none;cursor:pointer}
  .icon-btn:hover{background:hsl(var(--ink) / .05);color:hsl(var(--ink))}
  .icon-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7}
  .topbar__lang,.topbar__switch{display:flex;gap:3px}

  .views{flex:1;position:relative;min-height:0;overflow:auto}
  .views #content{display:block;min-height:100%}

  /* -------- avatars (4 tailles + 10 teintes par identité, CSP-safe) -------- */
  .avatar{border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:600;flex:none}
  .av-22{width:22px;height:22px;font-size:8px}
  .av-28{width:28px;height:28px;font-size:10px}
  .av-34{width:34px;height:34px;font-size:11.5px}
  .av-56{width:56px;height:56px;font-size:18px}
  .av-c0{background:#7A4FD6}.av-c1{background:#2E9E5B}.av-c2{background:#E23D3D}
  .av-c3{background:#2D6BE0}.av-c4{background:#E8842C}.av-c5{background:#199E8C}
  .av-c6{background:#D9A31B}.av-c7{background:#4553C9}.av-c8{background:#B54FA0}
  .av-c9{background:#55534C}

  /* responsive : sidebar se replie sous 900px */
  @media (max-width:900px){
    .app{grid-template-columns:1fr}
    .sidebar{position:fixed;left:0;top:0;bottom:0;width:230px;z-index:40;transform:translateX(-100%);transition:transform var(--t-card) var(--ease)}
    .sidebar.open{transform:none}
    .meta-strip{display:none}
  }
}


@layer components {
  /* ============================================================
     PHASE 2 — Use Cases (phase-board) + Conductor (adoption).
     Gabarit de référence sur tokens canoniques.
     ============================================================ */
  .wrap{padding:22px 26px 40px;max-width:1100px;width:100%;margin:0 auto}
  .page-head{display:flex;align-items:baseline;gap:10px;margin-bottom:16px}
  .page-head h1{font-size:19px;font-weight:650;letter-spacing:-.01em;font-family:var(--font-display)}
  .page-head span{color:hsl(var(--ink-3));font-size:12px}

  /* -------- use cases : board 3 phases -------- */
  .phase-board{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .phase-col{background:hsl(var(--ink) / .03);border:1px solid hsl(var(--line));border-radius:13px;padding:11px}
  .phase-h{display:flex;align-items:baseline;gap:7px;margin-bottom:4px}
  .phase-num{width:20px;height:20px;border-radius:6px;background:hsl(var(--primary));color:hsl(var(--primary-fg));display:grid;place-items:center;font-size:10.5px;font-weight:700;flex:none}
  .phase-name{font-size:12.5px;font-weight:600}
  .phase-desc{font-size:10.5px;color:hsl(var(--ink-3));margin-bottom:10px;line-height:1.45}
  .phase-empty{font-size:11px;color:hsl(var(--ink-3));padding:4px}
  .uc-card{background:hsl(var(--surface));border:1px solid hsl(var(--line));border-radius:11px;padding:10px 11px;margin-bottom:8px;width:100%;text-align:left;display:block;cursor:pointer;transition:box-shadow .15s}
  .uc-card:hover{box-shadow:var(--shadow-2)}
  .uc-card .t{font-size:12px;font-weight:600;display:flex;gap:7px;align-items:center;justify-content:space-between}
  .uc-card .m{display:flex;align-items:center;gap:6px;margin-top:7px}
  .uc-wf{font-size:10.5px;color:hsl(var(--ink-3))}
  .ucstat{font-size:9px;font-weight:600;padding:2px 7px;border-radius:99px;flex:none}
  .uc-Live{background:hsl(var(--ok) / .14);color:hsl(var(--ok))}
  .uc-Pilot{background:hsl(var(--info) / .13);color:hsl(var(--info))}
  .uc-Planned{background:hsl(var(--ink) / .06);color:hsl(var(--ink-2))}
  .uc-Paused{background:hsl(var(--warn) / .16);color:hsl(var(--warn-ink))}

  /* -------- conductor : split 80/20 + cartes adoption -------- */
  .split-banner{border:1px solid hsl(var(--line));border-radius:14px;overflow:hidden;background:hsl(var(--surface));margin-bottom:16px}
  .split-bar{display:flex;height:14px}
  .split-bar .h{flex:8;background:hsl(var(--primary))}
  .split-bar .t{flex:2;background:hsl(var(--warn))}
  .split-txt{display:flex;padding:12px 16px;gap:16px;align-items:baseline;flex-wrap:wrap}
  .split-txt b{font-size:15px;font-weight:650}
  .split-txt span{font-size:11.5px;color:hsl(var(--ink-2))}
  .cd-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .cd-card{background:hsl(var(--surface));border:1px solid hsl(var(--line));border-radius:14px;padding:15px 17px}
  .cd-card h2{font-size:13px;font-weight:650;margin-bottom:3px}
  .cd-card .sub{font-size:10.5px;color:hsl(var(--ink-3));margin-bottom:12px}
  .cd-empty,.cd-note{font-size:11px;color:hsl(var(--ink-3));line-height:1.5}
  .cd-note{margin-top:10px}
  .cd-stats{display:flex;gap:8px;margin-bottom:4px}
  .cd-stats .stat{flex:1;background:hsl(var(--ink) / .03);border:1px solid hsl(var(--line));border-radius:9px;padding:8px 10px}
  .cd-stats .stat b{display:block;font-size:16px;font-weight:650;font-family:var(--font-display)}
  .cd-stats .stat span{font-size:9.5px;color:hsl(var(--ink-3));text-transform:uppercase;letter-spacing:.04em}
  .adop-row{display:flex;align-items:center;gap:9px;margin-bottom:8px;font-size:11px}
  .adop-row .lbl{width:150px;flex:none;color:hsl(var(--ink-2));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .adop-track{flex:1;height:7px;background:hsl(var(--ink) / .06);border-radius:99px;overflow:hidden}
  .adop-fill{height:100%;border-radius:99px;background:hsl(var(--ok))}
  .adop-row .pc{width:34px;text-align:right;font-weight:600;font-size:10.5px}

  /* largeurs de barre en CLASSES (CSP-safe, pas de style inline) */
  .w-0{width:0%}.w-5{width:5%}.w-10{width:10%}.w-15{width:15%}.w-20{width:20%}.w-25{width:25%}.w-30{width:30%}.w-35{width:35%}.w-40{width:40%}.w-45{width:45%}.w-50{width:50%}.w-55{width:55%}.w-60{width:60%}.w-65{width:65%}.w-70{width:70%}.w-75{width:75%}.w-80{width:80%}.w-85{width:85%}.w-90{width:90%}.w-95{width:95%}.w-100{width:100%}

  @media (max-width:760px){
    .phase-board{grid-template-columns:1fr}
    .cd-grid{grid-template-columns:1fr}
  }
}

@layer components {
  /* ============================================================
     PHASE 3 — People (dir-grid) + Profile (prof-card).
     Palette département « couleur = donnée » en CLASSES (CSP-safe).
     ============================================================ */
  /* -------- annuaire -------- */
  .dir-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:10px}
  .dir-empty{color:hsl(var(--ink-3));font-size:12px}
  .pcard{background:hsl(var(--surface));border:1px solid hsl(var(--line));border-radius:12px;padding:14px;display:flex;gap:11px;align-items:center;text-align:left;text-decoration:none;color:inherit;transition:box-shadow .15s,transform .15s}
  .pcard:hover{box-shadow:var(--shadow-2);transform:translateY(-1px)}
  .pcard__id{min-width:0}
  .pcard .nm{font-size:13px;font-weight:600}
  .pcard .rl{font-size:11px;color:hsl(var(--ink-2))}
  .pcard .dp{font-size:10px;margin-top:3px;display:flex;align-items:center;gap:5px;color:hsl(var(--ink-3))}
  .pcard .sw,.dp .sw{width:7px;height:7px;border-radius:50%;flex:none}

  /* pastilles département : classe = donnée (Department.color), pas d'inline */
  .sw-data-1{background:hsl(var(--ds-data-1))}
  .sw-data-2{background:hsl(var(--ds-data-2))}
  .sw-data-3{background:hsl(var(--ds-data-3))}
  .sw-data-4{background:hsl(var(--ds-data-4))}
  .sw-data-5{background:hsl(var(--ds-data-5))}
  .sw-data-6{background:hsl(var(--ds-data-6))}
  .sw-none{background:hsl(var(--dot))}

  /* -------- fiche profil -------- */
  .crumb{display:flex;align-items:center;gap:8px;font-size:11.5px;color:hsl(var(--ink-3));margin-bottom:12px}
  .crumb button{color:hsl(var(--ink-2));border:none;background:none;cursor:pointer;font:inherit}
  .crumb button:hover{color:hsl(var(--ink));text-decoration:underline}
  .prof-card{background:hsl(var(--surface));border:1px solid hsl(var(--line));border-radius:14px;padding:18px 20px;box-shadow:var(--shadow-1)}
  .prof-top{display:flex;gap:16px;align-items:flex-start}
  .prof-id{flex:1;min-width:0}
  .prof-id .name{font-size:19px;font-weight:650;letter-spacing:-.01em;font-family:var(--font-display)}
  .prof-id .role{font-size:13px;color:hsl(var(--ink-2));margin-top:1px}
  .badges{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap}
  .badge{font-size:10px;font-weight:600;padding:3px 9px;border-radius:99px}
  .b-info{background:hsl(var(--info) / .14);color:hsl(var(--info))}
  .b-warn{background:hsl(var(--warn) / .18);color:hsl(var(--warn-ink))}
  .b-seal{background:hsl(var(--primary));color:hsl(var(--primary-fg))}
  .prof-meta{font-size:11px;color:hsl(var(--ink-3));margin-top:8px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
  .prof-chat{flex:none;text-decoration:none}

  .ptabs{display:flex;gap:2px;margin:18px 0 0;border-bottom:1px solid hsl(var(--line))}
  .ptab{padding:8px 13px;font-size:12.5px;color:hsl(var(--ink-2));border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
  .ptab.active{color:hsl(var(--ink));font-weight:600;border-color:hsl(var(--primary))}

  .sect{background:hsl(var(--surface));border:1px solid hsl(var(--line));border-radius:14px;padding:16px 18px;margin-top:14px}
  .sect-h{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;margin-bottom:12px}
  .sect-h--mt{margin-top:18px}
  .sect-empty{font-size:12px;color:hsl(var(--ink-3))}
  .rep-h{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:hsl(var(--ink-3));margin:14px 0 6px}
  .rep-row{display:flex;align-items:center;gap:11px;padding:8px 10px;border:1px solid hsl(var(--line));border-radius:10px;margin-bottom:6px;text-decoration:none;color:inherit;background:hsl(var(--surface))}
  .rep-row:hover{background:hsl(var(--ink) / .03)}
  .rep-row .nm{font-size:12.5px;font-weight:550}
  .rep-row .rl{font-size:10.5px;color:hsl(var(--ink-3))}
  .chip-row{display:flex;flex-wrap:wrap;gap:5px}
  .tool-table{width:100%;border-collapse:collapse}
  .tool-table td{padding:8px 6px;border-bottom:1px solid hsl(var(--line));font-size:12px}
  .tool-table__ic{width:34px}
  .tt-ic{width:24px;height:24px;border-radius:7px;color:#fff;display:grid;place-items:center;font-size:10.5px;font-weight:700}

  @media (max-width:600px){ .prof-top{flex-wrap:wrap} }
}

@layer components {
  /* ============================================================
     PHASE 4 — Agents (organigramme ao-*). Colonnes = pods (head +
     sous-agents), config EFFECTIVE par agent. Réutilise .sw-data-N
     (couleur département) et .ao-chip/.ao-hitl (posés en Phase 3).
     ============================================================ */
  .ao-chart{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;align-items:flex-start}
  .ao-empty{color:hsl(var(--ink-3));font-size:12px}
  .ao-col{flex:0 0 236px;background:hsl(var(--ink) / .03);border:1px solid hsl(var(--line));border-radius:13px;padding:11px}
  .ao-col-h{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;margin-bottom:10px}
  .ao-col-h .sw{width:9px;height:9px;border-radius:3px;flex:none}

  .ao-card{background:hsl(var(--surface));border:1px solid hsl(var(--line));border-radius:11px;padding:10px;margin-bottom:8px}
  .ao-card--head{border-color:hsl(var(--primary) / .35);box-shadow:0 0 0 1px hsl(var(--primary) / .12)}
  .ao-top{display:flex;align-items:center;gap:8px}
  .ao-id{flex:1;min-width:0}
  .ao-id .nm{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ao-id .lv{font-size:9.5px;color:hsl(var(--ink-3))}
  .ao-dot{width:8px;height:8px;border-radius:50%;background:hsl(var(--ink-3) / .5);flex:none}
  .ao-dot--live{background:hsl(var(--ok))}
  .ao-meta{display:flex;flex-wrap:wrap;gap:5px;margin:9px 0}
  .ao-model{font-size:9.5px;font-weight:600;padding:2px 7px;border-radius:6px;background:hsl(var(--agent) / .14);color:hsl(var(--agent));font-family:var(--font-mono,monospace)}
  .ao-chip{font-size:9.5px;padding:2px 8px;border-radius:99px;background:hsl(var(--ink) / .06);color:hsl(var(--ink-2))}
  .ao-hbadge{font-size:9.5px;font-weight:600;padding:2px 8px;border-radius:99px;background:hsl(var(--ok) / .13);color:hsl(var(--ok))}
  .ao-hbadge--none{background:hsl(var(--warn) / .18);color:hsl(var(--warn-ink))}
  .ao-config{width:100%;font-size:10.5px;padding:6px;border:1px solid hsl(var(--line));border-radius:8px;background:hsl(var(--surface));color:hsl(var(--ink-2));cursor:pointer}
  .ao-config:hover{background:hsl(var(--ink) / .04);color:hsl(var(--ink))}

  /* -------- panneau agent -------- */
  .ao-panel{margin-top:14px;background:hsl(var(--surface));border:1px solid hsl(var(--line));border-radius:14px;padding:16px 18px;box-shadow:var(--shadow-1)}
  .ao-panel__head{display:flex;align-items:center;gap:11px;margin-bottom:16px}
  .ao-panel__name{font-size:15px;font-weight:650}
  .ao-panel__sub{font-size:11px;color:hsl(var(--ink-3))}
  .ao-panel__hint{font-size:10px;font-weight:400;color:hsl(var(--ink-3))}
  .ao-chat{margin-left:auto;flex:none;font-size:11.5px;padding:6px 13px;border-radius:8px;background:hsl(var(--primary));color:hsl(var(--primary-fg));text-decoration:none}
  .ao-eff{border:1px solid hsl(var(--line));border-radius:10px;overflow:hidden}
  .ao-eff__row{display:flex;gap:10px;padding:8px 11px;border-bottom:1px solid hsl(var(--line));font-size:11.5px}
  .ao-eff__row:last-child{border-bottom:none}
  .ao-eff__row .k{width:88px;flex:none;color:hsl(var(--ink-3))}
  .ao-eff__row .v{flex:1;min-width:0}
  .ao-prompt{font-family:var(--font-mono,monospace);font-size:10.5px;color:hsl(var(--ink-2));white-space:pre-wrap;word-break:break-word}
  .ao-hitl{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 11px;border:1px solid hsl(var(--line));border-radius:9px;margin-bottom:6px;font-size:11.5px}
  .ao-hitl--warn{color:hsl(var(--warn-ink));background:hsl(var(--warn) / .08)}
  .ao-x{border:none;background:none;color:hsl(var(--danger));font-size:16px;line-height:1;cursor:pointer;padding:0 4px}
  .ao-edit{margin-top:14px;border-top:1px solid hsl(var(--line));padding-top:12px}
  .ao-edit summary{font-size:12px;font-weight:600;cursor:pointer;color:hsl(var(--ink-2))}
  .ao-edit__h{font-size:11px;font-weight:600;margin:16px 0 8px;color:hsl(var(--ink-2))}
  .ao-save{font-size:12px;padding:8px 14px;border:none;border-radius:8px;background:hsl(var(--primary));color:hsl(var(--primary-fg));cursor:pointer;margin-top:4px}
  .ao-save--alt{background:hsl(var(--ink) / .08);color:hsl(var(--ink))}

  @media (max-width:760px){ .ao-col{flex-basis:200px} }
}

@layer components {
  /* ============================================================
     PHASE 5A — Moteur de graphe d'ontologie (anneaux concentriques).
     Nœuds/arêtes colorés par CLASSE (fill/stroke en feuille externe,
     jamais inline) — le moteur ne pose que la géométrie.
     ============================================================ */
  .graph-wrap{max-width:none}
  .glegend{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:10px}
  .glegend__item{display:flex;align-items:center;gap:6px;font-size:11px;color:hsl(var(--ink-2))}
  .glegend__dot{width:9px;height:9px;border-radius:50%;flex:none;background:hsl(var(--ink-3))}

  .graph-stage{position:relative;width:100%;aspect-ratio:1/1;max-height:76vh;background:radial-gradient(circle at 50% 50%,hsl(var(--surface)),hsl(var(--bg)));border:1px solid hsl(var(--line));border-radius:16px;overflow:hidden}
  .graph-loading,.graph-errbox{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:hsl(var(--ink-3))}
  .graph-errbox{display:none}
  .graph-stage.is-loading .graph-loading{display:grid}
  .graph-stage:not(.is-loading) .graph-loading{display:none}
  .graph-stage[data-graph-error] .graph-errbox{display:grid}
  .graph-canvas{width:100%;height:100%;display:block}

  .graph-ring{fill:none;stroke:hsl(var(--line));stroke-width:1;opacity:.5}
  .graph-edge{stroke:hsl(var(--ink) / .12);stroke-width:1}
  .graph-edge.is-hot{stroke:hsl(var(--primary) / .7);stroke-width:1.6}

  .graph-node{cursor:pointer}
  .graph-node .gn-dot{stroke:hsl(var(--surface));stroke-width:1.5;fill:hsl(var(--ink-3))}
  .graph-node .gn-label{font-size:9px;fill:hsl(var(--ink-2));pointer-events:none;opacity:0;transition:opacity .12s}
  .graph-node:hover .gn-label,.graph-node.is-focus .gn-label,.graph-node.is-near .gn-label{opacity:1}
  .graph-node:focus{outline:none}
  .graph-node:focus .gn-dot{stroke:hsl(var(--primary));stroke-width:2}

  /* couleur par type (fill du point) */
  .gn-department .gn-dot{fill:hsl(var(--primary))}
  .gn-tool .gn-dot{fill:hsl(var(--dept-eng,210 70% 45%))}
  .gn-workflow .gn-dot{fill:hsl(var(--dept-ops,25 75% 48%))}
  .gn-usecase .gn-dot{fill:hsl(var(--agent))}
  .gn-agent .gn-dot{fill:hsl(var(--dept-data,275 60% 52%))}
  .gn-person .gn-dot{fill:hsl(var(--dept-sales,150 55% 40%))}
  .glegend__dot.gn-department{background:hsl(var(--primary))}
  .glegend__dot.gn-tool{background:hsl(var(--dept-eng,210 70% 45%))}
  .glegend__dot.gn-workflow{background:hsl(var(--dept-ops,25 75% 48%))}
  .glegend__dot.gn-usecase{background:hsl(var(--agent))}
  .glegend__dot.gn-agent{background:hsl(var(--dept-data,275 60% 52%))}
  .glegend__dot.gn-person{background:hsl(var(--dept-sales,150 55% 40%))}

  /* survol-focus : estompe le reste */
  .graph-canvas.is-focusing .graph-node{opacity:.28;transition:opacity .12s}
  .graph-canvas.is-focusing .graph-node.is-focus,
  .graph-canvas.is-focusing .graph-node.is-near{opacity:1}
  .graph-canvas.is-focusing .graph-edge{opacity:.15}
  .graph-canvas.is-focusing .graph-edge.is-hot{opacity:1}

  .graph-static{width:100%;max-width:900px;border:1px solid hsl(var(--line));border-radius:12px}
  .graph-static .graph__node circle{fill:hsl(var(--primary))}
  .graph-static .graph__node text{font-size:9px;fill:hsl(var(--ink-2))}
  .graph-static .graph__edge{stroke:hsl(var(--ink) / .15)}
}

@layer components {
  /* ============================================================
     PHASE 5B — graphe : zoom/pan, filtres département, hovercard.
     Interactions par classes ; géométrie posée par le moteur.
     ============================================================ */
  .graph-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap}
  .gfilters{display:flex;flex-wrap:wrap;gap:6px}
  .gfilter{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;padding:4px 10px;border:1px solid hsl(var(--line));border-radius:99px;background:hsl(var(--surface));color:hsl(var(--ink-2));cursor:pointer;transition:background .12s,border-color .12s}
  .gfilter:hover{background:hsl(var(--ink) / .04)}
  .gfilter.is-on{border-color:hsl(var(--primary));background:hsl(var(--primary) / .08);color:hsl(var(--ink))}
  .gfilter__sw{width:8px;height:8px;border-radius:2px;flex:none;background:hsl(var(--dot))}
  .gzoom{display:flex;gap:4px}
  .gzoom__b{width:30px;height:30px;border:1px solid hsl(var(--line));border-radius:8px;background:hsl(var(--surface));color:hsl(var(--ink-2));cursor:pointer;font-size:15px;line-height:1;display:grid;place-items:center}
  .gzoom__b:hover{background:hsl(var(--ink) / .05);color:hsl(var(--ink))}

  .graph-canvas{touch-action:none;cursor:grab}
  .graph-canvas.is-grabbing{cursor:grabbing}
  .graph-viewport{transition:none}

  /* hovercard native SVG */
  .graph-hovercard{opacity:0;pointer-events:none;transition:opacity .1s}
  .graph-hovercard.is-show{opacity:1}
  .ghc-bg{fill:hsl(var(--ink));stroke:hsl(var(--ink) / .2)}
  .ghc-title{fill:hsl(var(--bg));font-size:12.5px;font-weight:600}
  .ghc-meta{fill:hsl(var(--bg) / .72);font-size:10.5px}
  .ghc-sw{fill:hsl(var(--dot))}
  .ghc-sw--none{fill:hsl(var(--ink-3))}

  /* mode filtre : n'illumine que les nœuds/arêtes concordants */
  .graph-canvas.is-filtering .graph-node{opacity:.16;transition:opacity .12s}
  .graph-canvas.is-filtering .graph-node.is-match{opacity:1}
  .graph-canvas.is-filtering .graph-edge{opacity:.08}
  .graph-canvas.is-filtering .graph-edge.is-match{opacity:.85}
  .graph-canvas.is-filtering .graph-node.is-match .gn-label{opacity:1}
}

@layer components {
  /* ============================================================
     PHASE 5C — graphe : drawer d'accès (relations navigables) +
     console d'événements (bus réel via audit, pollée). Panneau
     latéral à droite du canvas.
     ============================================================ */
  .graph-layout{display:grid;grid-template-columns:1fr 290px;gap:14px;align-items:start}
  .gside{display:flex;flex-direction:column;gap:12px;position:sticky;top:12px}

  /* drawer d'accès */
  .gdrawer{display:none;background:hsl(var(--surface));border:1px solid hsl(var(--line));border-radius:14px;overflow:hidden;box-shadow:var(--shadow-1)}
  .gdrawer.is-open{display:block}
  .gdrawer__inner{max-height:46vh;overflow-y:auto}
  .gdrawer__head{display:flex;align-items:center;gap:10px;padding:13px 14px;border-bottom:1px solid hsl(var(--line))}
  .gdrawer__id{flex:1;min-width:0}
  .gdrawer__id .nm{font-size:13px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .gdrawer__id .kd{font-size:10.5px;color:hsl(var(--ink-3))}
  .gdrawer__x{border:none;background:none;color:hsl(var(--ink-3));font-size:18px;line-height:1;cursor:pointer;padding:0 2px}
  .gdrawer__x:hover{color:hsl(var(--ink))}
  .gdrawer__sect{padding:10px 14px}
  .gdrawer__h{font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:hsl(var(--ink-3));margin-bottom:7px}
  .gdrawer__row{display:flex;flex-direction:column;gap:1px;padding:7px 9px;border:1px solid hsl(var(--line));border-radius:9px;margin-bottom:5px;text-decoration:none;color:inherit;background:hsl(var(--surface))}
  .gdrawer__row:hover{background:hsl(var(--ink) / .04)}
  .gdrawer__rel{font-size:9.5px;color:hsl(var(--ink-3))}
  .gdrawer__tgt{font-size:12px;font-weight:550;display:flex;align-items:center;justify-content:space-between;gap:8px}
  .gdrawer__kind{font-size:9px;font-weight:600;padding:1px 6px;border-radius:99px;background:hsl(var(--ink) / .06);color:hsl(var(--ink-2))}
  .gdrawer__empty{padding:16px 14px;font-size:11.5px;color:hsl(var(--ink-3))}

  /* console d'événements */
  .gevents{background:hsl(var(--surface));border:1px solid hsl(var(--line));border-radius:14px;overflow:hidden}
  .gevents__head{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid hsl(var(--line));font-size:12px;font-weight:650}
  .gevents__live{font-size:9px;color:hsl(var(--ok));font-weight:600}
  .gevents__body{max-height:34vh;overflow-y:auto}
  .gevents__list{padding:6px 0}
  .gevent{display:flex;align-items:center;gap:8px;padding:7px 14px}
  .gevent__dot{width:7px;height:7px;border-radius:50%;flex:none;background:hsl(var(--info))}
  .gevent--ok .gevent__dot{background:hsl(var(--ok))}
  .gevent--warn .gevent__dot{background:hsl(var(--warn))}
  .gevent--connector .gevent__dot{background:hsl(var(--agent))}
  .gevent__lbl{font-size:11.5px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .gevent__meta{font-size:9.5px;color:hsl(var(--ink-3));flex:none}
  .gevents__empty{padding:16px 14px;font-size:11px;color:hsl(var(--ink-3))}

  @media (max-width:900px){
    .graph-layout{grid-template-columns:1fr}
    .gside{position:static;flex-direction:row;flex-wrap:wrap}
    .gdrawer,.gevents{flex:1 1 260px}
  }
}

@layer components {
  /* ============================================================
     PHASE 6 — Constellation RAG (graphe de connaissance, sombre).
     Stage sombre façon Obsidian + rail de groupes. Distinct du
     graphe d'ontologie ; couleurs de groupe par CLASSE.
     ============================================================ */
  .cst-layout{display:grid;grid-template-columns:1fr 210px;gap:0;border:1px solid hsl(var(--line));border-radius:16px;overflow:hidden}
  .cst-stage{position:relative;aspect-ratio:16/11;max-height:78vh;background:radial-gradient(ellipse at 50% 45%,hsl(230 40% 14%) 0%,hsl(232 45% 8%) 55%,hsl(235 50% 5%) 100%);overflow:hidden}
  .cst-loading,.cst-errbox{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:hsl(230 20% 65%)}
  .cst-errbox{display:none}
  .cst-stage.is-loading .cst-loading{display:grid}
  .cst-stage:not(.is-loading) .cst-loading{display:none}
  .cst-stage[data-cst-error] .cst-errbox{display:grid}
  .cst-canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
  .cst-canvas.is-grabbing{cursor:grabbing}

  .cst-edge{stroke:hsl(220 40% 55% / .22);stroke-width:1}
  .ce-link{stroke:hsl(var(--agent) / .4);stroke-dasharray:3 3}
  .cst-edge.is-hot{stroke:hsl(210 90% 70% / .9);stroke-width:1.7}
  .cst-node{cursor:pointer}
  .cst-dot{stroke:hsl(235 50% 6%);stroke-width:1.5;fill:hsl(220 30% 60%)}
  .cst-label{font-size:9px;fill:hsl(220 25% 78%);pointer-events:none;opacity:0;transition:opacity .12s}
  .cst-node:hover .cst-label,.cst-node.is-focus .cst-label,.cst-node.is-near .cst-label{opacity:1}
  .cst-node:focus{outline:none}
  .cst-node:focus .cst-dot{stroke:hsl(210 90% 70%);stroke-width:2}

  /* couleur par groupe (type d'entité du document) — palette claire sur fond sombre */
  .cg-tool .cst-dot{fill:hsl(200 75% 60%)}
  .cg-workflow .cst-dot{fill:hsl(28 85% 62%)}
  .cg-usecase .cst-dot{fill:hsl(265 70% 70%)}
  .cg-department .cst-dot{fill:hsl(150 60% 55%)}
  .cg-person .cst-dot{fill:hsl(340 70% 65%)}
  .cg-agent .cst-dot{fill:hsl(48 85% 62%)}
  .cg-autre .cst-dot{fill:hsl(220 15% 55%)}

  /* survol-focus : estompe le reste */
  .cst-canvas.is-focusing .cst-node{opacity:.22;transition:opacity .12s}
  .cst-canvas.is-focusing .cst-node.is-focus,.cst-canvas.is-focusing .cst-node.is-near{opacity:1}
  .cst-canvas.is-focusing .cst-edge{opacity:.1}
  .cst-canvas.is-focusing .cst-edge.is-hot{opacity:1}
  /* filtre de groupe */
  .cst-canvas.is-filtering .cst-node{opacity:.13}
  .cst-canvas.is-filtering .cst-node.is-match{opacity:1}
  .cst-canvas.is-filtering .cst-edge{opacity:.06}
  .cst-canvas.is-filtering .cst-edge.is-match{opacity:.8}

  /* hovercard */
  .cst-hovercard{opacity:0;pointer-events:none;transition:opacity .1s}
  .cst-hovercard.is-show{opacity:1}
  .chc-bg{fill:hsl(230 45% 12%);stroke:hsl(220 50% 60% / .4)}
  .chc-title{fill:hsl(210 40% 92%);font-size:12.5px;font-weight:600}
  .chc-meta{fill:hsl(220 25% 70%);font-size:10.5px}

  /* rail de groupes */
  .rag-rail{border-left:1px solid hsl(var(--line));background:hsl(var(--surface));overflow-y:auto;padding:12px}
  .rag-legend-title{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:hsl(var(--ink-3));margin:2px 0 8px}
  .rag-groups{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
  .rag-chip{display:flex;align-items:center;gap:8px;font-size:11.5px;padding:6px 9px;border:1px solid hsl(var(--line));border-radius:8px;background:hsl(var(--surface));cursor:pointer;color:hsl(var(--ink-2));text-align:left}
  .rag-chip:hover{background:hsl(var(--ink) / .04)}
  .rag-chip.is-on{border-color:hsl(var(--primary));color:hsl(var(--ink))}
  .rag-chip.off{opacity:.4}
  .rag-chip .dot{width:8px;height:8px;border-radius:50%;flex:none;background:hsl(var(--ink-3))}
  .rag-chip.cg-tool .dot{background:hsl(200 75% 50%)}
  .rag-chip.cg-workflow .dot{background:hsl(28 85% 52%)}
  .rag-chip.cg-usecase .dot{background:hsl(265 60% 58%)}
  .rag-chip.cg-department .dot{background:hsl(150 55% 42%)}
  .rag-chip.cg-person .dot{background:hsl(340 65% 55%)}
  .rag-chip.cg-agent .dot{background:hsl(48 80% 48%)}
  .rag-chip.cg-autre .dot{background:hsl(220 15% 55%)}
  .rag-hint{font-size:10px;color:hsl(var(--ink-3));line-height:1.5}
  .cst-noscript{font-size:12px;color:hsl(var(--ink-3));margin-top:10px}

  @media (max-width:820px){
    .cst-layout{grid-template-columns:1fr}
    .rag-rail{border-left:none;border-top:1px solid hsl(var(--line))}
    .rag-groups{flex-direction:row;flex-wrap:wrap}
  }
}

@layer components {
  /* ============================================================
     PHASE 7 — Chat (AI Brain) au gabarit du design system.
     Habillage cchat__/cmsg__ ; les classes msg--*/.msg__* restent
     les hooks du streaming WebSocket (brain.js) — non renommées.
     ============================================================ */
  .cchat{max-width:760px;display:flex;flex-direction:column;min-height:calc(100vh - 130px)}
  .cchat__head{align-items:center}
  .cchat__ws{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:10px;color:hsl(var(--ink-3));padding:3px 9px;border:1px solid hsl(var(--line));border-radius:99px}
  .cchat__ws-dot{width:7px;height:7px;border-radius:50%;background:hsl(var(--warn));flex:none}
  .cchat__ws[data-state="open"] .cchat__ws-dot{background:hsl(var(--ok))}
  .cchat__ws[data-state="closed"] .cchat__ws-dot{background:hsl(var(--danger))}
  .cchat__focus{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font-size:11.5px;text-decoration:none;color:hsl(var(--ink-2));background:hsl(var(--primary) / .07);border:1px solid hsl(var(--primary) / .2);padding:4px 11px;border-radius:99px;margin-bottom:12px}
  .cchat__focus-k{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:hsl(var(--ink-3))}

  .cchat__scroll{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:16px;padding:6px 2px 18px}
  .chat__empty{margin:auto;max-width:440px;text-align:center;color:hsl(var(--ink-3));font-size:12.5px;line-height:1.6}

  .cmsg{display:flex;gap:11px;align-items:flex-start}
  .cmsg--user{flex-direction:row-reverse}
  .cmsg__av{width:28px;height:28px;border-radius:8px;flex:none;display:grid;place-items:center;font-size:10px;font-weight:700;color:#fff}
  .cmsg__av--assistant{background:hsl(var(--agent))}
  .cmsg__av--user{background:hsl(var(--primary));color:hsl(var(--primary-fg))}
  .cmsg__col{min-width:0;max-width:80%;display:flex;flex-direction:column;gap:6px}
  .cmsg--user .cmsg__col{align-items:flex-end}
  .cmsg__bubble{font-size:13px;line-height:1.55;padding:10px 13px;border-radius:13px;border:1px solid hsl(var(--line));background:hsl(var(--surface))}
  .cmsg--user .cmsg__bubble{background:hsl(var(--primary));color:hsl(var(--primary-fg));border-color:transparent}
  .cmsg--assistant.msg--error .cmsg__bubble{border-color:hsl(var(--danger) / .5);color:hsl(var(--danger))}

  .cmsg__thinking{display:flex;gap:4px;padding:4px 2px}
  .cmsg__thinking span{width:6px;height:6px;border-radius:50%;background:hsl(var(--ink-3));animation:cthink 1s ease-in-out infinite}
  .cmsg__thinking span:nth-child(2){animation-delay:.15s}
  .cmsg__thinking span:nth-child(3){animation-delay:.3s}
  @keyframes cthink{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

  .msg__sources{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:2px}
  .msg__sources-label{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:hsl(var(--ink-3))}
  .pill--source{font-size:10.5px;padding:3px 9px;border-radius:99px;background:hsl(var(--info) / .12);color:hsl(var(--info));text-decoration:none;border:1px solid hsl(var(--info) / .2)}
  .pill--source:hover{background:hsl(var(--info) / .2)}

  .cchat__composer{position:sticky;bottom:0;background:hsl(var(--bg));padding:10px 0 4px}
  .cchat__field{display:flex;align-items:flex-end;gap:8px;border:1px solid hsl(var(--line));border-radius:14px;background:hsl(var(--surface));padding:6px 6px 6px 14px}
  .cchat__field:focus-within{border-color:hsl(var(--primary) / .5)}
  .cchat__field textarea,.cchat__field input[type="text"]{flex:1;border:none;background:none;resize:none;font:inherit;font-size:13px;color:hsl(var(--ink));padding:6px 0;outline:none;max-height:140px}
  .cchat__send{width:34px;height:34px;flex:none;border:none;border-radius:10px;background:hsl(var(--primary));color:hsl(var(--primary-fg));font-size:16px;cursor:pointer;display:grid;place-items:center}
  .cchat__send:hover{opacity:.9}
  .cchat__err{font-size:11px;color:hsl(var(--danger));margin-top:6px}
}

@layer components {
  /* ============================================================
     PHASE 8 — Responsive (tiroir de nav mobile) + polish + sombre.
     ============================================================ */
  .nav-burger{display:none;width:36px;height:36px;border:1px solid hsl(var(--line));border-radius:9px;background:hsl(var(--surface));color:hsl(var(--ink-2));cursor:pointer;place-items:center;flex:none}
  .nav-burger svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .nav-scrim{display:none;position:fixed;inset:0;background:hsl(0 0% 0% / .45);z-index:40}

  /* focus-visible cohérent (polish accessibilité) */
  a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid hsl(var(--primary));outline-offset:2px}
  .graph-node:focus-visible,.cst-node:focus-visible{outline:none}

  @media (max-width:900px){
    .app{grid-template-columns:1fr}
    .sidebar{position:fixed;top:0;left:0;bottom:0;width:250px;z-index:50;
             transform:translateX(-100%);transition:transform .24s var(--ease,ease)}
    .app.nav-open .sidebar{transform:none;box-shadow:var(--shadow-2)}
    .app.nav-open .nav-scrim{display:block}
    .nav-burger{display:grid}
    /* la topbar reste sur une ligne : la meta-strip s'efface au besoin */
    .meta-strip{display:none}
  }
  @media (max-width:560px){
    .mode-tabs{display:none}          /* accès via les liens de la sidebar */
    .wrap{padding-left:16px;padding-right:16px}
    .topbar__lang{display:none}
  }
  @media (prefers-reduced-motion: reduce){
    .sidebar{transition:none}
  }
}

@layer components {
  /* ---- Lot A : section SSO sur la page de connexion ---- */
  .auth-sep{display:flex;align-items:center;gap:10px;margin:18px 0;color:hsl(var(--ink-3));font-size:11px}
  .auth-sep::before,.auth-sep::after{content:"";flex:1;height:1px;background:hsl(var(--line))}
  .btn--sso{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:hsl(var(--surface));border:1px solid hsl(var(--line));color:hsl(var(--ink))}
  .btn--sso:hover{background:hsl(var(--ink) / .04)}
  .sso-form .field{margin-bottom:10px}
}

@layer components {
  /* ---- Page de gouvernance SSO (settings) ---- */
  .sso-settings{max-width:900px}
  .sso-saved{background:hsl(var(--ok) / .12);color:hsl(var(--ok));border:1px solid hsl(var(--ok) / .25);border-radius:10px;padding:9px 13px;font-size:12px;margin-bottom:14px}
  .sso-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;align-items:start}
  .sso-state{font-size:9.5px;font-weight:600;padding:2px 9px;border-radius:99px;margin-left:auto}
  .sso-state.on{background:hsl(var(--ok) / .14);color:hsl(var(--ok))}
  .sso-state.off{background:hsl(var(--ink) / .07);color:hsl(var(--ink-3))}
  .sso-form2 .field{margin-bottom:12px}
  .sso-form2 input[type="text"],.sso-form2 input[type="password"],.sso-form2 select{width:100%;padding:8px 11px;border:1px solid hsl(var(--line));border-radius:9px;background:hsl(var(--surface));color:hsl(var(--ink));font:inherit;font-size:12.5px}
  .field-hint{font-size:10.5px;color:hsl(var(--ink-3));margin-top:4px}
  .sso-secret-set{color:hsl(var(--ok))}
  .sso-help{background:hsl(var(--ink) / .02)}
  .sso-help__lbl{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:hsl(var(--ink-3));margin-bottom:5px}
  .sso-uri{display:block;font-family:var(--font-mono,monospace);font-size:11px;background:hsl(var(--ink) / .05);border:1px solid hsl(var(--line));border-radius:8px;padding:8px 10px;word-break:break-all;color:hsl(var(--ink-2))}
  .sso-help__note{font-size:10.5px;color:hsl(var(--ink-3));line-height:1.5;margin-top:9px}
  .sso-stat{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:1px solid hsl(var(--line));font-size:12px}
  .sso-stat b{font-size:16px;font-family:var(--font-display)}
  @media (max-width:760px){ .sso-grid{grid-template-columns:1fr} }
}

@layer components { .sso-help__lbl--mt{margin-top:14px} }

@layer components {
  /* ---- Journal d'audit (consultation gouvernée + export) ---- */
  .audit{max-width:1000px}
  .audit-filters{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
  .audit-filters select,.audit-filters input[type="search"]{padding:7px 11px;border:1px solid hsl(var(--line));border-radius:9px;background:hsl(var(--surface));color:hsl(var(--ink));font:inherit;font-size:12.5px}
  .btn--ghost{background:hsl(var(--surface));border:1px solid hsl(var(--line));color:hsl(var(--ink-2))}
  .btn--ghost:hover{background:hsl(var(--ink) / .04)}
  .audit-export{margin-left:auto;text-decoration:none}
  .audit-table{border:1px solid hsl(var(--line));border-radius:13px;overflow:hidden}
  .audit-row{display:grid;grid-template-columns:1fr 220px 130px;gap:12px;padding:10px 14px;border-bottom:1px solid hsl(var(--line));font-size:12.5px;align-items:center}
  .audit-row:last-child{border-bottom:none}
  .audit-row--head{background:hsl(var(--ink) / .03);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:hsl(var(--ink-3));font-weight:600}
  .audit-ev{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .audit-dot{width:7px;height:7px;border-radius:50%;flex:none;background:hsl(var(--info))}
  .audit-dot--ok{background:hsl(var(--ok))}
  .audit-dot--warn{background:hsl(var(--warn))}
  .audit-dot--connector{background:hsl(var(--agent))}
  .audit-raw{font-family:var(--font-mono,monospace);font-size:9.5px;color:hsl(var(--ink-3))}
  .audit-when{color:hsl(var(--ink-2));font-variant-numeric:tabular-nums}
  .audit-sys{color:hsl(var(--ink-3));font-style:italic}
  .audit-empty{padding:18px 14px;font-size:12px;color:hsl(var(--ink-3))}
  .audit-pager{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:14px;font-size:12px}
  .audit-pager a{color:hsl(var(--ink-2));text-decoration:none}
  .audit-pager a:hover{color:hsl(var(--ink));text-decoration:underline}
  @media (max-width:640px){ .audit-row{grid-template-columns:1fr;gap:4px} .audit-row--head{display:none} }
}

@layer components {
  /* ---- Conformité (matrice droit-de-déployer) ---- */
  .compliance{max-width:1000px}
  .cmpl-summary{display:flex;gap:12px;margin-bottom:16px}
  .cmpl-stat{flex:1;background:hsl(var(--surface));border:1px solid hsl(var(--line));border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
  .cmpl-stat b{font-size:22px;font-family:var(--font-display)}
  .cmpl-stat span{font-size:11px;color:hsl(var(--ink-3))}
  .cmpl-stat--ok b{color:hsl(var(--ok))}
  .cmpl-stat--blocked b{color:hsl(var(--danger))}
  .cmpl-table{border:1px solid hsl(var(--line));border-radius:13px;overflow:hidden}
  .cmpl-row{display:grid;grid-template-columns:1.6fr repeat(4,1fr) 1fr;gap:10px;padding:9px 14px;border-bottom:1px solid hsl(var(--line));align-items:center;font-size:12.5px}
  .cmpl-row:last-child{border-bottom:none}
  .cmpl-row--head{background:hsl(var(--ink) / .03);font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;color:hsl(var(--ink-3));font-weight:600}
  .cmpl-uc{font-weight:500}
  .cmpl-select{width:100%;padding:5px 7px;border:1px solid hsl(var(--line));border-radius:7px;font:inherit;font-size:11.5px;background:hsl(var(--surface));color:hsl(var(--ink));cursor:pointer}
  .cmpl-select--green{background:hsl(var(--ok) / .14);border-color:hsl(var(--ok) / .35);color:hsl(var(--ok))}
  .cmpl-select--amber{background:hsl(var(--warn) / .16);border-color:hsl(var(--warn) / .4);color:hsl(var(--warn-ink))}
  .cmpl-select--red{background:hsl(var(--danger) / .12);border-color:hsl(var(--danger) / .35);color:hsl(var(--danger))}
  .cmpl-gate{font-size:11px;font-weight:600;text-align:center}
  .cmpl-gate--ok{color:hsl(var(--ok))}
  .cmpl-gate--no{color:hsl(var(--ink-3))}
  .cmpl-empty{padding:18px 14px;font-size:12px;color:hsl(var(--ink-3))}
  .cmpl-note{font-size:11px;color:hsl(var(--ink-3));margin-top:12px;line-height:1.5}
  @media (max-width:760px){ .cmpl-row{grid-template-columns:1fr 1fr;gap:6px} .cmpl-row--head{display:none} }
}

@layer components {
  /* ---- Risque d'autonomie (couverture HITL de la flotte) ---- */
  .risk{max-width:1000px}
  .risk-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
  .risk-kpi{background:hsl(var(--surface));border:1px solid hsl(var(--line));border-radius:12px;padding:13px 15px;display:flex;flex-direction:column;gap:2px}
  .risk-kpi b{font-size:24px;font-family:var(--font-display)}
  .risk-kpi span{font-size:10.5px;color:hsl(var(--ink-3))}
  .risk-kpi--ok b{color:hsl(var(--ok))}
  .risk-kpi--warn b{color:hsl(var(--danger))}
  .risk-bar{height:4px;border-radius:99px;background:hsl(var(--ink) / .08);margin-top:7px;overflow:hidden}
  .risk-bar__fill{display:block;height:100%;background:hsl(var(--ok));border-radius:99px}
  .risk-block{margin-bottom:18px}
  .risk-block__h{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:hsl(var(--ink-3));font-weight:600;margin-bottom:9px;display:flex;align-items:baseline;gap:8px}
  .risk-hint{text-transform:none;letter-spacing:0;font-weight:400;font-size:10.5px;color:hsl(var(--ink-3))}
  .risk-depts{display:flex;flex-wrap:wrap;gap:8px}
  .risk-dept{display:flex;flex-direction:column;gap:1px;padding:8px 12px;border:1px solid hsl(var(--line));border-radius:10px;background:hsl(var(--surface));min-width:150px}
  .risk-dept--flag{border-color:hsl(var(--danger) / .35);background:hsl(var(--danger) / .04)}
  .risk-dept__name{font-size:12px;font-weight:500}
  .risk-dept__nums{font-size:10.5px;color:hsl(var(--ink-3))}
  .risk-table{border:1px solid hsl(var(--line));border-radius:13px;overflow:hidden}
  .risk-row{display:grid;grid-template-columns:1.6fr 1fr 1.2fr .8fr;gap:10px;padding:9px 14px;border-bottom:1px solid hsl(var(--line));align-items:center;font-size:12.5px}
  .risk-row:last-child{border-bottom:none}
  .risk-row--head{background:hsl(var(--ink) / .03);font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;color:hsl(var(--ink-3));font-weight:600}
  .risk-agent{display:flex;align-items:center;gap:8px;font-weight:500}
  .risk-dot{width:7px;height:7px;border-radius:50%;background:hsl(var(--danger));flex:none}
  .risk-model{font-family:var(--font-mono,monospace);font-size:11px;color:hsl(var(--ink-2))}
  .risk-tools{color:hsl(var(--ink-2));font-variant-numeric:tabular-nums}
  .risk-clear{padding:14px;font-size:12.5px;color:hsl(var(--ok));background:hsl(var(--ok) / .08);border-radius:11px}
  .risk-note{font-size:11px;color:hsl(var(--ink-3));margin-top:12px;line-height:1.5}
  @media (max-width:760px){ .risk-kpis{grid-template-columns:repeat(2,1fr)} .risk-row{grid-template-columns:1fr 1fr} .risk-row--head{display:none} }
}