@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap");

/* Continuum v3 — généré depuis tokens.json (ne pas éditer les valeurs ici : modifier tokens.json puis régénérer) */
:root, [data-theme="light"] {
  --canvas: #f6f5f2;
  --surface: #ffffff;
  --surface-sunken: #f0eee9;
  --line: #e4e1da;
  --line-control: #8f8a80;
  --ink: #1b1a17;
  --ink-2: #4a4741;
  --ink-3: #6b675f;
  --brand: #2448a8;
  --brand-hover: #1c3a8a;
  --brand-soft: #e8edf9;
  --on-brand: #ffffff;
  --success: #1d7a3a;
  --success-soft: #e5f3e9;
  --warn: #94570a;
  --warn-soft: #fbefdc;
  --danger: #b8282f;
  --danger-soft: #fbe9e9;
  --neutral-soft: #ecebe6;
  --focus: var(--brand);
  --shadow-overlay: 0 8px 24px rgba(27,26,23,0.12), 0 1px 3px rgba(27,26,23,0.08);
}
[data-theme="dark"] {
  --canvas: #121211;
  --surface: #1a1a18;
  --surface-sunken: #22221f;
  --line: #2e2d2a;
  --line-control: #6d6a63;
  --ink: #f1efea;
  --ink-2: #c2beb5;
  --ink-3: #9a968d;
  --brand: #9db6ff;
  --brand-hover: #b7c9ff;
  --brand-soft: #1f2a47;
  --on-brand: #10172b;
  --success: #6fcf8a;
  --success-soft: #16301f;
  --warn: #e9b25c;
  --warn-soft: #33260f;
  --danger: #f2878b;
  --danger-soft: #3a1a1c;
  --neutral-soft: #2a2a27;
  --focus: var(--brand);
  --shadow-overlay: 0 8px 24px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.4);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}


/* Continuum — composants (classes cn-*), à porter dans resources/css. Toutes les valeurs viennent de tokens.json. */

body { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; }
.cn-num { font-variant-numeric: tabular-nums; }
.cn-ref { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.cn-meta { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cn-row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.cn-stack { display: flex; flex-direction: column; gap: var(--space-5); }
:where(a, button, input, select, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Button */
.cn-btn { font: inherit; font-weight: 500; display: inline-flex; align-items: center; gap: var(--space-2); height: 34px; padding: 0 14px; border-radius: var(--radius-md); border: 1px solid var(--line-control); background: var(--surface); color: var(--ink); cursor: pointer; white-space: nowrap; text-decoration: none; }
.cn-btn:hover { background: var(--surface-sunken); }
.cn-btn--primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.cn-btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.cn-btn--ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.cn-btn--ghost:hover { background: var(--surface-sunken); color: var(--ink); }
.cn-btn--danger { color: var(--danger); }
.cn-btn--danger:hover { background: var(--danger-soft); }
.cn-btn--sm { height: 28px; padding: 0 10px; font-size: 13px; }
.cn-btn--icon { width: 34px; padding: 0; justify-content: center; }
.cn-btn svg { width: 16px; height: 16px; flex: none; }

/* Badge */
.cn-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500; background: var(--neutral-soft); color: var(--ink-2); white-space: nowrap; }
.cn-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cn-badge--plain::before { display: none; }
.cn-badge--info { background: var(--brand-soft); color: var(--brand); }
.cn-badge--success { background: var(--success-soft); color: var(--success); }
.cn-badge--warn { background: var(--warn-soft); color: var(--warn); }
.cn-badge--danger { background: var(--danger-soft); color: var(--danger); }

/* KPI strip — 4 indicateurs maximum */
.cn-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.cn-kpi { padding: var(--space-4); display: flex; flex-direction: column; gap: 2px; }
.cn-kpi + .cn-kpi { border-left: 1px solid var(--line); }
.cn-kpi__label { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-2); }
.cn-kpi__value { font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.cn-kpi__value--empty { color: var(--ink-3); font-weight: 400; font-size: 14px; line-height: 30px; }
.cn-kpi__sub { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cn-kpi__sub--danger { color: var(--danger); font-weight: 500; }
.cn-kpi__sub--success { color: var(--success); font-weight: 500; }

/* Panel */
.cn-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.cn-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); min-height: 48px; box-sizing: border-box; }
.cn-panel__title { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; }
.cn-panel__count { color: var(--ink-3); font-weight: 400; margin-left: 6px; }
.cn-panel__body { padding: 0 var(--space-4) var(--space-4); }
.cn-panel__body:first-child { padding-top: var(--space-4); }
.cn-panel__body--flush { padding: 0; }
.cn-panel details > summary { cursor: pointer; list-style: none; }

/* Page header */
.cn-page { padding: var(--space-5) var(--space-6) var(--space-7); max-width: 1280px; box-sizing: border-box; }
.cn-pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.cn-pagehead__crumb { font-size: 12px; line-height: 16px; color: var(--ink-3); margin-bottom: 2px; }
.cn-pagehead__crumb a { color: var(--ink-2); text-decoration: none; }
.cn-pagehead__title { margin: 0; font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; }
.cn-pagehead__meta { margin-top: 6px; display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.cn-pagehead__actions { display: flex; gap: var(--space-2); flex: none; }

/* Tabs (soulignés) et filtres (segmentés) */
.cn-tabs { display: flex; gap: var(--space-5); border-bottom: 1px solid var(--line); padding: 0 var(--space-4); }
.cn-tab { appearance: none; background: none; border: 0; font: inherit; padding: var(--space-3) 0; margin-bottom: -1px; color: var(--ink-2); border-bottom: 2px solid transparent; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; text-decoration: none; }
.cn-tab:hover { color: var(--ink); }
.cn-tab[aria-selected="true"] { color: var(--ink); font-weight: 500; border-bottom-color: var(--brand); }
.cn-tab__count { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cn-seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--surface-sunken); border-radius: var(--radius-md); }
.cn-seg button { appearance: none; border: 0; background: none; font: inherit; font-size: 13px; height: 28px; padding: 0 10px; border-radius: 4px; color: var(--ink-2); cursor: pointer; }
.cn-seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 500; box-shadow: 0 0 0 1px var(--line); }

/* Data table */
.cn-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cn-table th { text-align: left; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-2); background: var(--surface-sunken); padding: 8px var(--space-4); white-space: nowrap; }
.cn-table td { padding: 10px var(--space-4); border-top: 1px solid var(--line); vertical-align: middle; }
.cn-table tfoot th { padding: 10px var(--space-4); border-top: 1px solid var(--line); border-bottom: 0; background: transparent; vertical-align: middle; }
.cn-table tbody tr:hover { background: var(--surface-sunken); }
.cn-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cn-table .is-main { font-weight: 500; }
.cn-table .is-main a { color: var(--ink); text-decoration: none; }
.cn-table .is-main a:hover { text-decoration: underline; text-underline-offset: 2px; }
.cn-table .is-actions { width: 1%; white-space: nowrap; text-align: right; }
.cn-table .is-actions > * { opacity: 0; }
.cn-table tr:hover .is-actions > *, .cn-table .is-actions > *:focus-visible { opacity: 1; }
.cn-table .is-muted { color: var(--ink-3); }
.cn-table .is-late { color: var(--danger); font-weight: 500; }
.cn-tablefoot { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }

/* Field list — n'affiche que les champs renseignés */
.cn-fields { display: grid; grid-template-columns: 140px 1fr; gap: 10px var(--space-4); margin: 0; font-size: 14px; }
.cn-fields dt { color: var(--ink-2); font-size: 13px; }
.cn-fields dd { margin: 0; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.cn-fields__missing { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.cn-fields__missing a { color: var(--brand); text-decoration: none; font-weight: 500; }

/* Empty state — compact, une phrase + une action */
.cn-empty { padding: var(--space-5) var(--space-4); color: var(--ink-3); font-size: 13px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.cn-empty a, .cn-empty button { white-space: nowrap; color: var(--brand); font: inherit; font-weight: 500; background: none; border: 0; cursor: pointer; padding: 0; text-decoration: none; }
.cn-empty--page { flex-direction: column; justify-content: center; text-align: center; padding: var(--space-7) var(--space-4); gap: var(--space-2); }
.cn-empty--page strong { color: var(--ink); font-size: 15px; font-weight: 600; }

/* Input */
.cn-field { display: flex; flex-direction: column; gap: 6px; }
.cn-field label { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.cn-input { font: inherit; height: 34px; padding: 0 10px; border: 1px solid var(--line-control); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); box-sizing: border-box; min-width: 0; }
/* Zone de texte (28/10, Anthony : « trop petit en hauteur ») : elle prend la hauteur de ses lignes (rows), jamais 34 px. */
textarea.cn-input { height: auto; min-height: 72px; padding-top: 8px; padding-bottom: 8px; line-height: 20px; resize: vertical; }
.cn-input::placeholder { color: var(--ink-3); }
.cn-input:focus { outline: 2px solid var(--focus); outline-offset: -1px; border-color: var(--focus); }
.cn-input--search { padding-left: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b675f' stroke-width='1.6' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 10px center; }
.cn-field__hint { font-size: 12px; color: var(--ink-3); }
.cn-field--error .cn-input { border-color: var(--danger); }
.cn-field--error .cn-field__hint { color: var(--danger); }
.cn-toolbar { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-3) var(--space-4); }

/* Progress */
.cn-progress { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cn-progress__track { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-sunken); overflow: hidden; min-width: 60px; box-shadow: inset 0 0 0 1px var(--line); }
.cn-progress__bar { height: 100%; background: var(--brand); border-radius: 3px; }
.cn-progress--success .cn-progress__bar { background: var(--success); }
.cn-progress--warn .cn-progress__bar { background: var(--warn); }
.cn-progress--danger .cn-progress__bar { background: var(--danger); }

/* Avatar */
.cn-avatar { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--neutral-soft); color: var(--ink-2); font-size: 10.5px; font-weight: 600; flex: none; }
.cn-avatar--lg { width: 32px; height: 32px; font-size: 12px; }
.cn-person { display: inline-flex; align-items: center; gap: var(--space-2); }

/* Shell + sidebar */
.cn-shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; background: var(--canvas); }
.cn-side { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-4); border-right: 1px solid var(--line); background: var(--canvas); }
.cn-side__brand { display: flex; align-items: center; gap: var(--space-2); padding: 6px 8px; font-weight: 600; letter-spacing: 0.02em; }
.cn-side__mark { width: 22px; height: 22px; border-radius: var(--radius-md); background: var(--brand); }
.cn-side__search { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink-3); font-size: 13px; }
.cn-side__group { display: flex; flex-direction: column; gap: 1px; }
.cn-side__label { font-size: 12px; font-weight: 500; color: var(--ink-3); padding: 0 8px 4px; }
.cn-nav { display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 8px; border-radius: var(--radius-md); color: var(--ink-2); text-decoration: none; font-size: 14px; }
.cn-nav:hover { background: var(--surface-sunken); color: var(--ink); }
.cn-nav[aria-current="page"] { background: var(--brand-soft); color: var(--brand); font-weight: 500; }
.cn-nav__count { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cn-nav__alert { font-size: 11.5px; font-weight: 500; color: var(--danger); background: var(--danger-soft); padding: 0 6px; border-radius: var(--radius-sm); line-height: 18px; }
.cn-side__foot { margin-top: auto; border-top: 1px solid var(--line); padding-top: var(--space-3); }
.cn-main { min-width: 0; }
.cn-top { height: 52px; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); padding: 0 var(--space-6); border-bottom: 1px solid var(--line); }

/* Grilles de page */
.cn-grid-main { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-5); align-items: start; }
.cn-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; }
@media (max-width: 1023px) { .cn-shell { grid-template-columns: 1fr; } .cn-side { display: none; } .cn-grid-main, .cn-grid-2 { grid-template-columns: 1fr; } .cn-page { padding: var(--space-4); } }

/* Liste d'éléments (à faire, échéances) */
.cn-list { list-style: none; margin: 0; padding: 0; }
.cn-list li { display: flex; align-items: center; gap: var(--space-3); padding: 10px var(--space-4); border-top: 1px solid var(--line); font-size: 14px; }
.cn-list li > :first-child { flex: 1; min-width: 0; }
.cn-list__title { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-progress--info .cn-progress__bar { background: oklch(0.62 0.17 250); }