/*
 * Continuum v3 — touche v1 (décision du 08/10 : « coller un peu avec la v1 »).
 * Chargé après design-v3.css (copie conforme du handoff, à ne pas éditer) et design-v3-shell.css.
 * Trois points seulement, la structure v3 (17 entrées, groupes, composants cn-*) ne change pas :
 *   1. accent = indigo Tailwind de la v1 (boutons principaux, liens, navigation active, focus, sélection, badges « info ») ;
 *   2. police = Inter (v1) ; chiffres et références en ui-monospace (la v1 n'a pas d'autre chasse fixe) ;
 *   3. barre latérale sombre de la v1 (fond slate-800 / #111318, textes slate, icônes Font Awesome 12 px,
 *      élément actif indigo-500/15, libellés de groupe en capitales).
 * Contrastes du texte ≥ 4,5:1 en clair comme en sombre (voir les valeurs ci-dessous).
 * Note : design-v3.css importe encore IBM Plex (feuille Google Fonts) ; les fichiers de police ne sont
 * plus téléchargés puisque aucune famille Plex n'est utilisée.
 */

/* 1 et 2 — accent indigo et polices */
:root, [data-theme="light"] {
  --brand: #4f46e5;        /* indigo-600 : 6,3:1 sur blanc, 5,8:1 sur le canevas */
  --brand-hover: #4338ca;  /* indigo-700 */
  --brand-soft: #eef2ff;   /* indigo-50 : texte indigo-600 dessus 5,6:1 */
  --on-brand: #ffffff;     /* blanc sur indigo-600 : 6,3:1 */
  --selection: #e0e7ff;    /* indigo-100 */
}
[data-theme="dark"] {
  --brand: #818cf8;        /* indigo-400 : 5,8:1 sur la surface sombre */
  --brand-hover: #a5b4fc;  /* indigo-300 */
  --brand-soft: #252539;   /* indigo-500 à 15 % sur la surface : texte indigo-400 dessus 5,0:1 */
  --on-brand: #1e1b4b;     /* indigo-950 sur indigo-400 : 5,4:1 */
  --selection: rgba(99, 102, 241, 0.35);
}
/* 4 — neutres gris-bleu (slate) de la v1 au lieu des beiges de la v3 (Anthony, 08/10) */
:root, [data-theme="light"] {
  --canvas: #f1f5f9;          /* slate-100 */
  --surface: #ffffff;
  --surface-sunken: #f8fafc;  /* slate-50 */
  --line: #e2e8f0;            /* slate-200 */
  --line-control: #64748b;    /* slate-500 : 4,8:1 sur blanc */
  --ink: #0f172a;             /* slate-900 */
  --ink-2: #334155;           /* slate-700 */
  --ink-3: #64748b;           /* slate-500 : 4,8:1 sur blanc, 4,4:1 sur le canevas → texte secondaire seulement */
  --neutral-soft: #f1f5f9;
  --shadow-overlay: 0 8px 24px rgba(15, 23, 42, 0.12), 0 1px 3px rgba(15, 23, 42, 0.08);
}
[data-theme="dark"] {
  --canvas: #0f172a;          /* slate-900 */
  --surface: #1e293b;         /* slate-800 */
  --surface-sunken: #172033;
  --line: #334155;            /* slate-700 */
  --line-control: #64748b;
  --ink: #f1f5f9;             /* slate-100 */
  --ink-2: #cbd5e1;           /* slate-300 */
  --ink-3: #94a3b8;           /* slate-400 : 5,7:1 sur slate-800 */
  --neutral-soft: #334155;
  --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
}
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
::selection { background: var(--selection); }

/* 3 — barre latérale de la v1 (sombre dans les deux thèmes).
   Les variables sont redéfinies localement : boutons, recherche et filets de la barre suivent. */
.cn-shell { grid-template-columns: 260px 1fr; }
.cn-side {
  --side-bg: #1e293b;                       /* slate-800, comme la v1 en clair */
  --ink: #ffffff;                           /* survol */
  --ink-2: #94a3b8;                         /* slate-400 : entrées, 5,7:1 */
  --ink-3: #8a97ab;                         /* libellés de groupe : 4,9:1 (le slate-500 de la v1 n'atteint que 3,1:1) */
  --line: rgba(255, 255, 255, 0.08);
  --line-control: rgba(255, 255, 255, 0.2);
  --surface: rgba(255, 255, 255, 0.05);
  --surface-sunken: rgba(255, 255, 255, 0.05);
  --brand: #a5b4fc;                         /* indigo-300 : 6,3:1 sur l'actif (l'indigo-400 de la v1 : 4,2:1) */
  --brand-soft: rgba(99, 102, 241, 0.15);   /* indigo-500/15 */
  --danger: #fca5a5;
  --danger-soft: rgba(239, 68, 68, 0.15);
  --focus: #a5b4fc;
  background: var(--side-bg);
  color: var(--ink-2);
  border-right: 0;
  gap: var(--space-4);
  padding: 0 var(--space-3) var(--space-3);
}
[data-theme="dark"] .cn-side {
  --side-bg: #111318;                       /* fond de la v1 en sombre */
  --ink-2: #94a3b8;                         /* 7,3:1 */
  --brand: #818cf8;                         /* indigo-400, comme la v1 : 5,4:1 sur l'actif */
  --focus: #818cf8;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}

/* Logo : carré indigo-500 et infini, CONTINUUM en capitales espacées. */
.cn-side__brand { height: 56px; padding: 0 var(--space-1); gap: 10px; flex: none; box-sizing: border-box; color: #ffffff; font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; }
.cn-side__mark { width: 28px; height: 28px; border-radius: 8px; background: #6366f1; display: inline-flex; align-items: center; justify-content: center; color: #ffffff; font-size: 12px; flex: none; }

/* Recherche ⌘K */
.cn-side__search, button.cn-side__search { height: 32px; margin-top: calc(-1 * var(--space-2)); border-radius: 8px; border-color: rgba(255, 255, 255, 0.1); color: var(--ink-2); font-size: 13px; }
.cn-side__search:hover, button.cn-side__search:hover { background-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.1); color: #ffffff; }
.cn-side__search kbd { font-family: var(--font-mono); font-size: 10px; line-height: 16px; padding: 0 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--ink-2); }

/* Libellés de groupe : capitales 11 px, interlettrage large. */
.cn-side__group { gap: 2px; }
.cn-side__label { font-size: 11px; line-height: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); padding: 4px 10px; }

/* Entrées : 13 px medium, icône 12 px sur 16 px de large, coins 8 px. */
.cn-nav { height: auto; min-height: 32px; justify-content: flex-start; gap: 10px; padding: 7px 10px; box-sizing: border-box; border-radius: 8px; color: var(--ink-2); font-size: 13px; line-height: 18px; font-weight: 500; transition: background-color 150ms ease, color 150ms ease; }
.cn-nav__icon { width: 16px; flex: none; text-align: center; font-size: 12px; }
.cn-nav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-nav:hover { background: rgba(255, 255, 255, 0.05); color: #ffffff; }
.cn-nav[aria-current="page"] { background: var(--brand-soft); color: var(--brand); font-weight: 500; }
.cn-nav--danger { color: var(--danger); }

/* Compteurs et alertes en pastilles, comme les compteurs de la v1. */
.cn-nav__count, .cn-nav__alert { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; font-size: 10px; line-height: 18px; font-weight: 600; font-variant-numeric: tabular-nums; flex: none; }
.cn-nav__count { background: rgba(99, 102, 241, 0.15); color: var(--brand); }
.cn-nav__alert { background: var(--danger-soft); color: var(--danger); }

.cn-side__foot { border-top-color: rgba(255, 255, 255, 0.05); }
.cn-side { scrollbar-width: none; }  /* comme la v1 (scrollbar-none) */
.cn-side::-webkit-scrollbar { display: none; }

@media (max-width: 1023px) {
  .cn-shell { grid-template-columns: 1fr; }
  .cn-side.is-open { width: 260px; }
}

/* 5 — pleine largeur (Anthony, 08/10) : pas de conteneur fixe de 1 280 px */
.cn-page { max-width: none; }
.cn-page .cn-page { padding: 0; } /* 15/10 : page déjà enveloppée par la mise en page ; plus d'écart entre les pages */

/* 6 — onglets en contrôle segmenté, compteur en pastille de couleur à la fin (Anthony, 08/10) */
.cn-tabs { display: flex; width: fit-content; max-width: 100%; gap: 2px; padding: 4px; border: 0; border-radius: 10px; background: var(--canvas); overflow-x: auto; scrollbar-width: none; box-sizing: border-box; }
.cn-tabs::-webkit-scrollbar { display: none; }
.cn-tab { flex: 0 0 auto; margin: 0; padding: 6px 14px; border: 0; border-radius: 8px; color: var(--ink-2); font-size: 14px; white-space: nowrap; transition: background-color 150ms ease, color 150ms ease; }
.cn-tab:hover { color: var(--ink); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.cn-tab[aria-selected="true"] { color: var(--ink); font-weight: 500; background: var(--surface); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 0 0 1px var(--line); border-bottom-color: transparent; }
.cn-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.cn-tab__count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1; background: var(--brand-soft); color: var(--brand); }
.cn-tab[aria-selected="true"] .cn-tab__count { background: var(--brand); color: var(--on-brand); }
/* Barres d'onglets en tête de panneau (listes, fiches) : un peu d'air autour du contrôle. */
.cn-panel > .cn-tabs, .cn-listpage__tabs, .cn-panel .cn-tabs:first-child { margin: var(--space-3) var(--space-4); max-width: calc(100% - 2 * var(--space-4)); }
.cn-page__tabs { margin-bottom: var(--space-5); }
/* Contrôle segmenté protégé (Anthony, 08/10) : quelle que soit la feuille ou la classe ajoutée (cn-doc-tabs, cn-pj-tabs__list…),
   le conteneur gris garde 4 px de padding, sans filet, et l'onglet actif reste une carte blanche à l'intérieur. */
.cn-tabs[role="tablist"] { padding: 4px; border: 0; border-radius: 10px; background: var(--canvas); }
.cn-tabs[role="tablist"] > .cn-tab { margin: 0; border: 0; }
.cn-panel > .cn-doc-tabs:not(.cn-section-title) { margin: var(--space-3) var(--space-4); max-width: calc(100% - 2 * var(--space-4)); }
/* Un seul onglet : titre de section avec la pastille du compteur (x-cn.tabs). */
.cn-section-title { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink); }
.cn-panel > .cn-section-title { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.cn-section-title .cn-tab__count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1; background: var(--brand-soft); color: var(--brand); }

/* 7 — boutons d'action de la v1 (fiche tâche) : rayon 8 px, icône + libellé (Anthony, 08/10).
   success : action qui termine / clôture / valide (vert plein, texte blanc) ;
   secondary (défaut) : bouton contour neutre (fond blanc, bord slate-300, texte foncé) — « Modifier » ;
   danger-soft : suppression en icône seule (fond red-50, bord red-200, icône red-600) ou « Refuser » avec texte.
   Contrastes : blanc sur emerald-700 5,5:1 ; red-700 sur red-50 6,0:1 ; slate-900 sur blanc 17:1 ;
   sombre : blanc sur emerald-700 5,5:1, red-300 sur rouge 12 % / slate-800 7,9:1, slate-100 sur slate-800 13:1. */
.cn-btn { border-radius: 8px; }
.cn-btn:not(:is(.cn-btn--primary, .cn-btn--ghost, .cn-btn--success, .cn-btn--danger-soft, .cn-btn--danger)) { border-color: #cbd5e1; background-color: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); }
.cn-btn:not(:is(.cn-btn--primary, .cn-btn--ghost, .cn-btn--success, .cn-btn--danger-soft, .cn-btn--danger)):hover { background-color: #f8fafc; }
.cn-btn--secondary i, .cn-btn--success i, .cn-btn--danger-soft i { font-size: 13px; }
.cn-btn.cn-btn--success { background-color: #047857; border-color: #047857; color: #ffffff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); }
.cn-btn.cn-btn--success:hover { background-color: #065f46; border-color: #065f46; color: #ffffff; }
.cn-btn.cn-btn--danger-soft { background-color: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.cn-btn.cn-btn--danger-soft i { color: #dc2626; }
.cn-btn.cn-btn--danger-soft:hover { background-color: #fee2e2; border-color: #fca5a5; color: #991b1b; }
.cn-btn.cn-btn--danger-soft:hover i { color: #b91c1c; }
.cn-btn--success:focus-visible, .cn-btn--danger-soft:focus-visible, .cn-btn--secondary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[data-theme="dark"] .cn-btn:not(:is(.cn-btn--primary, .cn-btn--ghost, .cn-btn--success, .cn-btn--danger-soft, .cn-btn--danger)) { border-color: #475569; background-color: var(--surface); color: var(--ink); box-shadow: none; }
[data-theme="dark"] .cn-btn:not(:is(.cn-btn--primary, .cn-btn--ghost, .cn-btn--success, .cn-btn--danger-soft, .cn-btn--danger)):hover { background-color: #334155; }
[data-theme="dark"] .cn-btn.cn-btn--success { background-color: #047857; border-color: #059669; color: #ffffff; }
[data-theme="dark"] .cn-btn.cn-btn--success:hover { background-color: #065f46; }
[data-theme="dark"] .cn-btn.cn-btn--danger-soft { background-color: rgba(239, 68, 68, 0.12); border-color: rgba(248, 113, 113, 0.35); color: #fca5a5; }
[data-theme="dark"] .cn-btn.cn-btn--danger-soft i { color: #fca5a5; }
[data-theme="dark"] .cn-btn.cn-btn--danger-soft:hover { background-color: rgba(239, 68, 68, 0.22); color: #fecaca; }
[data-theme="dark"] .cn-btn.cn-btn--danger-soft:hover i { color: #fecaca; }
/* La barre latérale garde ses propres boutons (variables locales). */
.cn-side .cn-btn:not(:is(.cn-btn--primary, .cn-btn--ghost, .cn-btn--success, .cn-btn--danger-soft, .cn-btn--danger)) { border-color: var(--line-control); background-color: transparent; color: var(--ink-2); box-shadow: none; }
.cn-listpage__tabs.cn-section-title { margin: var(--space-3) var(--space-4); }

/* 7 — pas de résumé des champs vides ; un panneau dont la liste de champs est vide n'est pas affiché (08/10) */
.cn-panel:has([data-cn-fields-empty]):not(:has(dd, table, li, p:not(.cn-fields__missing), form, a.cn-btn)) { display: none; }

/* 8 — un seul style de compteur partout (titres de panneau, de page, de section, onglets) : pastille indigo (08/10) */
.cn-panel__count, .cn-listpage__count {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  min-width: 20px; height: 18px; margin-left: 8px; padding: 0 6px; border-radius: 999px;
  font-size: 11px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
  background: var(--brand-soft); color: var(--brand);
}
.cn-listpage__count { height: 20px; min-width: 22px; font-size: 12px; position: relative; top: -2px; }

/* 9 — listes : onglets de statut hors du panneau, juste au-dessus (09/10) */
.cn-listpage > .cn-listpage__tabs { margin: 0; }
.cn-listpage > .cn-listpage__tabs + .cn-listpage__panel { margin-top: calc(var(--space-3) - var(--space-5)); }

/* 10 — indicateurs en cartes séparées : libellé en capitales, valeur forte, sous-ligne (Anthony, 09/10, comme Absences) */
.cn-kpis { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); background: none; border: 0; border-radius: 0; }
.cn-kpi { gap: 4px; padding: var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.cn-kpi + .cn-kpi { border-left: 1px solid var(--line); }
.cn-kpi__label { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.cn-kpi__value { font-size: 28px; line-height: 36px; font-weight: 700; color: var(--ink); }
.cn-kpi__value--success { color: var(--success); }
.cn-kpi__value--danger { color: var(--danger); }
.cn-kpi__sub { font-size: 13px; line-height: 18px; color: var(--ink-2); }

/* 11 — filtre de période des listes : période prédéfinie + dates Du / Au (09/10) */
.cn-period { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cn-period__date { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); }
.cn-period__date .cn-input { width: 140px; }

/* 12 — champs de filtre sans bordure sur fond légèrement plus foncé ; fond léger sous les onglets hors panneau (09/10) */
:root { --field-bg: #f1f5f9; --tabs-bg: #e2e8f0; }
[data-theme="dark"] { --field-bg: #0f172a; --tabs-bg: rgba(255, 255, 255, 0.06); }
.cn-toolbar :is(.cn-input, .cn-select) { border-color: transparent; background-color: var(--field-bg); }
.cn-toolbar :is(.cn-input, .cn-select):hover { background-color: color-mix(in srgb, var(--field-bg) 85%, var(--ink) 6%); }
.cn-toolbar :is(.cn-input, .cn-select):focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.cn-listpage__submit { width: 32px; padding: 0; justify-content: center; color: var(--ink-2); }
.cn-listpage > .cn-tabs.cn-listpage__tabs { background: var(--tabs-bg); }

/* 13 — aperçu de document dans le panneau latéral (devis, facture) : aéré, chiffres en Inter tabulaire (09/10) */
.cn-preview { padding: var(--space-5) var(--space-6, 32px) var(--space-6, 32px); }
.cn-preview__head { padding-bottom: var(--space-5); margin-bottom: var(--space-5); border-bottom: 1px solid var(--line); }
.cn-preview__title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--ink); }
.cn-preview__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-2); font-size: 13px; color: var(--ink-2); }
.cn-preview__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.cn-preview__section { margin: 0 0 var(--space-3); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.cn-preview .cn-doc-lines :is(th, td) { padding-left: var(--space-3); padding-right: var(--space-3); }
.cn-preview .cn-doc-lines :is(th, td):first-child { padding-left: 0; }
.cn-preview .cn-doc-lines :is(th, td):last-child { padding-right: 0; }
.cn-preview .cn-doc-totals { padding-right: 0; }

/* 14 — indicateur sans donnée : libellé court, discret, sur une ligne, à la hauteur d'une valeur (09/10) */
.cn-kpi__value.cn-kpi__value--empty { font-size: 15px; line-height: 36px; font-weight: 500; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 15 — menu en arborescence (style Arc, Anthony 09/10) : titre de groupe repliable (icône, libellé, chevron),
   entrées sous un filet vertical, entrée active marquée d'un trait clair sur le filet. */
.cn-side__group.cn-tree { gap: 2px; }
.cn-tree__head { appearance: none; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 32px; padding: 6px 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; }
.cn-tree__head:hover { background: rgba(255, 255, 255, 0.05); }
.cn-tree__head:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.cn-tree__icon { width: 16px; flex: none; text-align: center; font-size: 12px; color: var(--ink-2); }
.cn-tree__label { flex: 1; min-width: 0; }
.cn-tree__chevron { flex: none; font-size: 9px; color: var(--ink-3); transition: transform 150ms ease; }
.cn-tree__chevron.is-closed { transform: rotate(-90deg); }
.cn-tree__items { display: flex; flex-direction: column; gap: 2px; margin-left: 17px; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, 0.12); }
.cn-tree__items .cn-nav { position: relative; }
.cn-tree__items .cn-nav[aria-current="page"]::before { content: ""; position: absolute; left: -9px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--ink); }

/* 16 — pastille d'évolution sur la période précédente (cartes d'indicateurs, 09/10) */
.cn-kpi__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.cn-kpi__trend { flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; background: var(--neutral-soft); color: var(--ink-2); }
.cn-kpi__trend.is-up { background: var(--success-soft, #dcfce7); color: var(--success, #15803d); }
.cn-kpi__trend.is-down { background: var(--danger-soft, #fee2e2); color: var(--danger, #b91c1c); }
/* 17 — barres de progression qui se remplissent au chargement */
.cn-progress__bar, .cn-tsum-bars__bar { transform-origin: left center; animation: cn-bar-grow 900ms cubic-bezier(.16, 1, .3, 1) both; animation-delay: 150ms; }
@keyframes cn-bar-grow { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .cn-progress__bar, .cn-tsum-bars__bar { animation: none; } }

/* 18 — centre de notifications (block notification-center d'Arc, 09/10) */
.cn-notif-wrap { position: relative; }
.cn-notif-bell { position: relative; }
.cn-notif-bell__count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; border: 2px solid var(--canvas); background: var(--ink); color: var(--canvas); font-size: 10px; font-weight: 600; line-height: 14px; text-align: center; font-variant-numeric: tabular-nums; }
.cn-notif-pop { position: absolute; z-index: 80; top: calc(100% + 8px); right: -8px; width: min(420px, calc(100vw - 24px)); max-height: min(560px, calc(100vh - 80px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 26px; background: var(--surface); box-shadow: var(--shadow-overlay); transform-origin: top right; animation: cn-notif-in 240ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes cn-notif-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.cn-notif { display: flex; flex-direction: column; min-height: 0; max-height: inherit; }
.cn-notif__loading { padding: 24px; color: var(--ink-3); font-size: 14px; }
.cn-notif__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 12px; }
.cn-notif__title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 20px; line-height: 26px; font-weight: 500; color: var(--ink); }
.cn-notif__sub { margin: 2px 0 0; font-size: 13px; color: var(--ink-3); }
.cn-notif__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px 12px; }
.cn-notif__bar .cn-tabs { margin: 0; }
.cn-notif__link { appearance: none; border: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: var(--ink-2); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cn-notif__link:hover { color: var(--ink); }
.cn-notif__list { list-style: none; margin: 0; padding: 0 8px 8px; overflow-y: auto; min-height: 0; flex: 1; }
.cn-notif__link-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 12px; border-radius: 18px; color: inherit; text-decoration: none; transition: background-color 120ms ease; }
.cn-notif__link-row:hover { background: var(--surface-sunken); }
.cn-notif__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; background: var(--surface-sunken); color: var(--ink-2); font-size: 13px; }
.cn-notif__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cn-notif__name { display: block; font-size: 14px; font-weight: 500; color: var(--ink); }
.cn-notif__item:not(.is-unread) .cn-notif__name { color: var(--ink-2); font-weight: 400; }
.cn-notif__dot { display: inline-block; vertical-align: middle; margin-left: 6px; width: 6px; height: 6px; border-radius: 999px; background: var(--ink); }
.cn-notif__body { font-size: 13px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-notif__time { font-size: 12px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; padding-top: 2px; }
.cn-notif__empty { padding: 24px 12px; text-align: center; font-size: 14px; color: var(--ink-3); }
.cn-notif__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.cn-notif__foot-actions { display: inline-flex; gap: 16px; }
@media (prefers-reduced-motion: reduce) { .cn-notif-pop { animation: none; } }

/* 19 — pile de toasts (toast-stack d'Arc, 09/10) ; remplace les bandeaux cn-flash */
.cn-flash { display: none; }
.cn-toasts { position: fixed; z-index: 120; right: 20px; bottom: 20px; width: min(380px, calc(100vw - 32px)); display: grid; }
.cn-toast { grid-area: 1 / 1; align-self: end; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-overlay); font-size: 14px;
  transform: translateY(calc(var(--depth) * -14px)) scale(calc(1 - var(--depth) * .05)); opacity: calc(1 - var(--depth) * .25); transform-origin: bottom center;
  transition: transform 420ms cubic-bezier(.22, 1, .36, 1), opacity 240ms ease; animation: cn-toast-in 420ms cubic-bezier(.16, 1, .3, 1); }
@keyframes cn-toast-in { from { transform: translateY(120%); opacity: 0; } }
.cn-toast__icon { font-size: 16px; }
.cn-toast--success .cn-toast__icon { color: var(--success); }
.cn-toast--danger .cn-toast__icon { color: var(--danger); }
.cn-toast--warn .cn-toast__icon { color: var(--warn, #b45309); }
.cn-toast__close { appearance: none; border: 0; background: none; width: 28px; height: 28px; border-radius: 999px; color: var(--ink-3); cursor: pointer; }
.cn-toast__close:hover { background: var(--surface-sunken); color: var(--ink); }
.cn-toasts__veil { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--cn-overlay-bg); backdrop-filter: var(--cn-overlay-blur); -webkit-backdrop-filter: var(--cn-overlay-blur);
  opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 0s linear 200ms; }
.cn-toasts__veil.is-on { opacity: 1; visibility: visible; transition: opacity 200ms ease, visibility 0s; }
@media (prefers-reduced-motion: reduce) { .cn-toast { transition: opacity 120ms linear; animation: none; } .cn-toasts__veil { transition-duration: 120ms; } }

/* 20 — page Notifications : filet neutre entre les lignes (plus de séparateur bleuté) */
.cn-notif-row { border-bottom: 1px solid var(--line); }
.cn-notif-row:last-child { border-bottom: 0; }

/* 21 — v3 sombre retravaillé (Anthony, 09/10 : « pas top ») : fond plus profond, surfaces d'un cran plus claires,
   filets discrets, champs natifs en sombre (icône calendrier lisible), bouton principal indigo plein et texte blanc. */
:root[data-theme="dark"]:not([data-skin]) {
  color-scheme: dark;
  --canvas: #0b1120;
  --surface: #111a2e;
  --surface-sunken: #0e1628;
  --line: #1e293b;
  --line-control: #334155;
  --ink: #e2e8f0;
  --ink-2: #b4c0d0;
  --ink-3: #8b98ab;
  --neutral-soft: #1e293b;
  --brand: #818cf8;
  --brand-soft: rgba(129, 140, 248, 0.14);
  --on-brand: #ffffff;
  --field-bg: #0b1120;
  --tabs-bg: #111a2e;
}
:root[data-theme="dark"]:not([data-skin]) .cn-btn--primary { background-color: #6366f1; border-color: #6366f1; color: #ffffff; }
:root[data-theme="dark"]:not([data-skin]) .cn-btn--primary:hover { background-color: #4f46e5; border-color: #4f46e5; }
:root[data-theme="dark"]:not([data-skin]) .cn-top { background: color-mix(in srgb, var(--canvas) 90%, transparent); border-bottom-color: var(--line); }
:root[data-theme="dark"]:not([data-skin]) .cn-table th { background: var(--surface-sunken); color: var(--ink-3); }
:root[data-theme="dark"]:not([data-skin]) .cn-table td { border-top-color: var(--line); }
:root[data-theme="dark"]:not([data-skin]) .cn-table tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
:root[data-theme="dark"]:not([data-skin]) .cn-kpi, :root[data-theme="dark"]:not([data-skin]) .cn-panel { border-color: var(--line); box-shadow: none; }
:root[data-theme="dark"]:not([data-skin]) .cn-tab[aria-selected="true"] { background: #1e293b; box-shadow: 0 0 0 1px #334155; }
:root[data-theme="dark"]:not([data-skin]) .cn-tab[aria-selected="true"] .cn-tab__count { background: #6366f1; color: #ffffff; }
:root[data-theme="dark"]:not([data-skin]) .cn-badge--plain { background: #1e293b; color: var(--ink-2); }

/* 23 — notifications : compteurs et points des non lues en rouge, icônes aux couleurs des thèmes (09/10 → 12/10) */
.cn-notif-bell__count, .cn-notif__title .cn-notif__unread { background: #ef4444 !important; color: #ffffff !important; }
.cn-notif__dot { background: #ef4444; }
.cn-notif__icon--client { background: color-mix(in srgb, #06b6d4 16%, transparent); color: #22d3ee; }
.cn-notif__icon--facturation { background: color-mix(in srgb, #10b981 16%, transparent); color: #34d399; }
.cn-notif__icon--engagement { background: color-mix(in srgb, #8b5cf6 16%, transparent); color: #a78bfa; }
.cn-notif__icon--projets { background: color-mix(in srgb, #6366f1 16%, transparent); color: #818cf8; }
.cn-notif__icon--planning { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #fbbf24; }
.cn-notif__icon--statistiques { background: color-mix(in srgb, #f43f5e 16%, transparent); color: #fb7185; }
.cn-notif__icon--salarie { background: color-mix(in srgb, #0ea5e9 16%, transparent); color: #38bdf8; }
:root[data-theme="light"] .cn-notif__icon--client { color: #0e7490; } :root[data-theme="light"] .cn-notif__icon--facturation { color: #047857; }
:root[data-theme="light"] .cn-notif__icon--engagement { color: #6d28d9; } :root[data-theme="light"] .cn-notif__icon--projets { color: #4338ca; }
:root[data-theme="light"] .cn-notif__icon--planning { color: #b45309; } :root[data-theme="light"] .cn-notif__icon--statistiques { color: #be123c; }
:root[data-theme="light"] .cn-notif__icon--salarie { color: #0369a1; }

/* 24 — indicateur « planifié / capacité » et « Mes tâches » groupées par échéance (12/10) */
.cn-kpi__of { margin-left: 6px; font-size: .55em; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.cn-taskgroup + .cn-taskgroup { border-top: 1px solid var(--line); }
.cn-taskgroup__head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 500; color: var(--ink); user-select: none; }
.cn-taskgroup__head::-webkit-details-marker { display: none; }
.cn-taskgroup__head:hover { background: var(--surface-sunken); }
.cn-taskgroup__chevron { font-size: 10px; color: var(--ink-3); transition: transform 200ms ease; }
.cn-taskgroup[open] .cn-taskgroup__chevron { transform: rotate(90deg); }
.cn-taskgroup--late .cn-taskgroup__head > span:first-of-type { color: var(--danger); }
.cn-taskgroup .cn-list { border-top: 1px solid var(--line); }
.cn-taskgroup__head .cn-panel__count { margin-left: auto; }

/* 25 — graphiques (style Arc, 12/10) : une teinte ambrée validée (clair #a8740e, sombre #b98422 ; contraste ≥ 3:1),
   grilles discrètes, info-bulles au survol (public/js/cn-charts.js). */
:root { --chart-1: #a8740e; --chart-track: color-mix(in srgb, var(--ink) 10%, transparent); }
[data-theme="dark"] { --chart-1: #b98422; }
.cn-spark { position: relative; height: 56px; color: var(--chart-1); margin-top: 12px; }
.cn-spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cn-spark__end { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 999px; background: currentColor; box-shadow: 0 0 0 2px var(--surface); }
.cn-chart-tip { position: absolute; z-index: 5; pointer-events: none; transform: translate(-50%, calc(-100% - 10px)); padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-overlay); font-size: 12px; line-height: 1.35; white-space: nowrap; color: var(--ink); }
.cn-chart-tip small { display: block; color: var(--ink-3); }
.cn-chart-cross { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); pointer-events: none; }
.cn-chart-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 999px; background: var(--chart-1); box-shadow: 0 0 0 2px var(--surface); pointer-events: none; }

.cn-kpis--spark { gap: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.cn-kpis--spark .cn-kpi { border: 0 !important; border-radius: 0 !important; box-shadow: none; padding-bottom: 16px; }
.cn-kpis--spark .cn-kpi + .cn-kpi { border-left: 1px solid var(--line) !important; }
.cn-kpi__delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-3); }
.cn-kpi__delta b { font-weight: 500; }
.cn-kpi__delta.is-up b { color: var(--success); }
.cn-kpi__delta.is-down b { color: var(--danger); }

.cn-bars { position: relative; padding-right: 64px; }
.cn-bars__plot { position: relative; height: var(--h, 220px); }
.cn-bars__grid { position: absolute; left: 0; right: -64px; border-top: 1px solid var(--chart-track); }
.cn-bars__grid span { position: absolute; right: 0; top: -8px; width: 56px; font-size: 11px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
.cn-bars__avg { position: absolute; left: 0; right: -64px; border-top: 1px dashed color-mix(in srgb, var(--ink) 45%, transparent); z-index: 2; pointer-events: none; }
.cn-bars__avg span { position: absolute; right: 0; top: -9px; min-width: 60px; white-space: nowrap; padding-left: 4px; font-size: 11px; font-weight: 500; color: var(--ink); background: var(--surface); }
.cn-bars__cols { position: absolute; inset: 0; display: grid; align-items: end; gap: 0 3px; }
.cn-bars__col { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: default; outline: none; }
.cn-bars__bar { display: block; width: min(100%, 22px); border-radius: 4px 4px 0 0; background: var(--chart-1); transform-origin: bottom; animation: cn-bar-rise 700ms cubic-bezier(.16, 1, .3, 1) both; }
.cn-bars__col:hover .cn-bars__bar, .cn-bars__col:focus-visible .cn-bars__bar { filter: brightness(1.15); }
@keyframes cn-bar-rise { from { transform: scaleY(0); } }
.cn-bars__x { display: grid; gap: 0 3px; margin-top: 8px; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.cn-bars__x span { overflow: visible; }

.cn-gauge { position: relative; display: grid; justify-items: center; text-align: center; }
.cn-gauge svg { width: 168px; height: 168px; }
.cn-gauge__track { stroke: var(--chart-track); }
.cn-gauge__fill { stroke: var(--chart-1); transition: stroke-dasharray 900ms cubic-bezier(.16, 1, .3, 1); }
.cn-gauge--danger .cn-gauge__fill { stroke: var(--danger); }
.cn-gauge--success .cn-gauge__fill { stroke: var(--success); }
.cn-gauge__center { position: absolute; top: 52px; display: grid; justify-items: center; }
.cn-gauge__center strong { font-size: 34px; line-height: 1; font-weight: 500; letter-spacing: -0.03em; }
.cn-gauge__center small { font-size: 16px; color: var(--ink-3); margin-left: 2px; }
.cn-gauge__center span { margin-top: 6px; font-size: 12px; color: var(--chart-1); }
.cn-gauge__label { margin-top: 4px; font-size: 14px; font-weight: 500; }
.cn-gauge__sub { font-size: 12px; color: var(--ink-3); }

.cn-share { display: grid; gap: 6px; }
.cn-share__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; font-size: 14px; }
.cn-share__bar { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--chart-track); overflow: hidden; }
.cn-share__bar > span { display: block; height: 100%; border-radius: 999px; background: var(--chart-1); transform-origin: left; animation: cn-bar-grow 900ms cubic-bezier(.16, 1, .3, 1) both; }
@media (prefers-reduced-motion: reduce) { .cn-bars__bar, .cn-share__bar > span { animation: none; } }
/* Chiffres société (v2 / v3) */
.cn-stats { display: flex; flex-direction: column; gap: var(--space-5); }
.cn-stats .cn-pagehead__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cn-stats__range { display: flex; align-items: center; gap: 6px; }
.cn-stats__range .cn-input { width: 150px; }
.cn-stats__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: var(--space-5); align-items: stretch; }
@media (max-width: 1100px) { .cn-stats__row { grid-template-columns: 1fr; } }
.cn-stats__hero { display: grid; gap: 2px; margin-bottom: 18px; }
.cn-stats__hero strong { font-size: 34px; line-height: 1.1; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.cn-stats__foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.cn-stats__foot dt { font-size: 12px; color: var(--ink-3); }
.cn-stats__foot dd { margin: 2px 0 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.cn-stats__top { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px 32px; }
.cn-stats .is-danger { color: var(--danger); }
.cn-stats .is-success { color: var(--success); }
.cn-stats .cn-pagehead { flex-wrap: wrap; gap: 16px; } .cn-stats .cn-pagehead > div:first-child { min-width: 240px; }

/* Tableau de bord : jauge de charge du pôle (12/10) */
.cn-load-gauge { display: grid; justify-items: center; padding: 4px 0 20px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.cn-load-gauge .cn-stats__foot { width: 100%; }
.cn-load-gauge .cn-stats__foot dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* « À valider » du tableau de bord : la personne, le créneau puis les actions, qui passent à la ligne si la place manque (12/10). */
[data-panel="to-validate"] li[data-pending-slot] { flex-wrap: wrap; row-gap: 10px; }
[data-panel="to-validate"] li[data-pending-slot] > span:nth-child(2) { flex: 1 1 220px; min-width: 0; }
[data-panel="to-validate"] li[data-pending-slot] .cn-person { flex: 0 0 auto; }
[data-panel="to-validate"] li[data-pending-slot] > span:last-child { margin-left: auto; }

/* 26 — Journal d'activité (Réglages, 12/10) */
.cn-activity__sub { margin: -6px 24px 4px; font-size: 13px; color: var(--ink-3); }
.cn-activity__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cn-activity__toolbar .cn-input--search { flex: 1 1 280px; max-width: 420px; }
.cn-activity__toolbar .cn-tabs { margin: 0; }
.cn-activity__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 24px 16px; }
.cn-activity__chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--ink-2); text-decoration: none; }
.cn-activity__chip span { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cn-activity__chip:hover { border-color: var(--line-control); color: var(--ink); }
.cn-activity__chip.is-active { background: var(--surface-sunken); border-color: var(--line-control); color: var(--ink); }
.cn-activity__head, .cn-activity__item > summary { display: grid; grid-template-columns: minmax(0, 1fr) 140px 110px 20px; gap: 16px; align-items: center; }
.cn-activity__head { padding: 10px 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.cn-activity__head span:nth-child(3) { text-align: right; }
.cn-activity__list { list-style: none; margin: 0; padding: 0; }
.cn-activity__list > li + li { border-top: 1px solid var(--line); }
.cn-activity__item > summary { list-style: none; padding: 14px 24px; cursor: pointer; grid-template-columns: 32px minmax(0, 1fr) 140px 110px 20px; }
.cn-activity__head { grid-template-columns: minmax(0, 1fr) 140px 110px 20px; padding-left: 72px; }
.cn-activity__item > summary::-webkit-details-marker { display: none; }
.cn-activity__item > summary:hover { background: var(--surface-sunken); }
.cn-activity__item[data-no-details] .cn-activity__chevron { visibility: hidden; }
.cn-activity__text { display: grid; gap: 3px; min-width: 0; }
.cn-activity__line { font-size: 14px; color: var(--ink-2); }
.cn-activity__line strong { color: var(--ink); font-weight: 500; }
.cn-activity__cat { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.cn-activity__cat i { font-size: 11px; }
.cn-activity__ip { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cn-activity__time { font-size: 13px; color: var(--ink-3); text-align: right; white-space: nowrap; }
.cn-activity__chevron { font-size: 11px; color: var(--ink-3); transition: transform 200ms ease; }
.cn-activity__item[open] .cn-activity__chevron { transform: rotate(180deg); }
.cn-activity__details { padding: 0 24px 18px 72px; display: grid; gap: 10px; }
.cn-activity__changes { width: 100%; border-collapse: collapse; font-size: 13px; }
.cn-activity__changes th { text-align: left; font-weight: 500; color: var(--ink-3); padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line); }
.cn-activity__changes td { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); overflow-wrap: anywhere; }
.cn-activity__changes td:first-child { color: var(--ink); font-family: var(--font-mono); font-size: 12px; }
@media (max-width: 760px) { .cn-activity__ip, .cn-activity__head { display: none; } .cn-activity__item > summary { grid-template-columns: 32px minmax(0, 1fr) auto 16px; } }

/* 27 — Réglages : menu latéral en accordéon (12/10) */
.cn-settings { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-6, 32px); align-items: start; }
.cn-settings__menu { position: sticky; top: 76px; display: grid; gap: 4px; }
.cn-settings__group > summary { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 12px; border-radius: 10px; list-style: none; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--ink); }
.cn-settings__group > summary::-webkit-details-marker { display: none; }
.cn-settings__group > summary:hover { background: var(--surface-sunken); }
.cn-settings__group > summary > i:first-child { width: 16px; text-align: center; font-size: 12px; color: var(--ink-3); }
.cn-settings__chevron { margin-left: auto; font-size: 10px; color: var(--ink-3); transition: transform 200ms ease; }
.cn-settings__group:not([open]) .cn-settings__chevron { transform: rotate(-90deg); }
.cn-settings__items { display: grid; gap: 2px; margin: 2px 0 8px 19px; padding-left: 10px; border-left: 1px solid var(--line); }
.cn-settings__items a { position: relative; display: block; padding: 7px 10px; border-radius: 8px; font-size: 14px; color: var(--ink-2); text-decoration: none; }
.cn-settings__items a:hover { background: var(--surface-sunken); color: var(--ink); }
.cn-settings__items a[aria-current="page"] { background: var(--surface-sunken); color: var(--ink); font-weight: 500; }
.cn-settings__items a[aria-current="page"]::before { content: ""; position: absolute; left: -11px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--ink); }
.cn-settings__content { min-width: 0; }
@media (max-width: 900px) { .cn-settings { grid-template-columns: 1fr; } .cn-settings__menu { position: static; } }

/* 28 — Changelog lisible (12/10) : colonne de lecture, « À faire » à part, versions en frise repliable. */
.cn-changelog { display: flex; flex-direction: column; gap: var(--space-5); }
.cn-changelog .cn-pagehead__actions .cn-input--search { width: 300px; }
.changelog-md { max-width: 980px; color: var(--ink-2); font-size: 14px; line-height: 1.65; display: flex; flex-direction: column; gap: var(--space-5); }
.changelog-md :is(h1, h2, h3, h4) { color: var(--ink); font-weight: 500; letter-spacing: -0.01em; }
.changelog-md h1 { display: none; }
.changelog-md h2 { font-size: 17px; margin: 0 0 12px; }
.changelog-md h3 { display: inline-flex; align-items: center; margin: 22px 0 10px; padding: 2px 10px; border-radius: 999px; font-size: 12px; background: var(--surface-sunken); border: 1px solid var(--line); color: var(--ink-2); }
.changelog-md h4 { font-size: 14px; margin: 16px 0 6px; }
.changelog-md p { margin: 8px 0; }
.changelog-md ul, .changelog-md ol { margin: 6px 0; padding-left: 0; display: grid; gap: 8px; list-style: none; } /* sans puces (29/10, Anthony) */
.changelog-md li > ul, .changelog-md li > ol { margin-top: 6px; padding-left: 16px; }
.changelog-md li:has(input[type="checkbox"]) { position: relative; padding-left: 26px; }
.changelog-md li:has(> input[type="checkbox"]:checked, > p > input[type="checkbox"]:checked) { color: var(--ink-3); }
.changelog-md li input[type="checkbox"] { position: absolute; left: 0; top: 4px; margin: 0; accent-color: var(--ink); }
.changelog-md strong { color: var(--ink); font-weight: 500; }
.changelog-md a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-control); }
.changelog-md code { font-family: var(--font-mono); font-size: 12px; padding: 1px 6px; border-radius: 6px; background: var(--surface-sunken); border: 1px solid var(--line); color: var(--ink); overflow-wrap: anywhere; }
.changelog-md pre { padding: 12px 14px; border-radius: 12px; background: var(--surface-sunken); overflow-x: auto; }
.changelog-md pre code { border: 0; padding: 0; background: none; }
.changelog-md table { width: 100%; border-collapse: collapse; font-size: 13px; }
.changelog-md :is(th, td) { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.changelog-md th { color: var(--ink-3); font-weight: 500; }
.changelog-md hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.cn-changelog__intro > summary { cursor: pointer; font-size: 13px; color: var(--ink-3); list-style: none; }
.cn-changelog__intro > summary::-webkit-details-marker { display: none; }
.cn-changelog__intro > div { margin-top: 10px; }
.cn-changelog__todo { padding: 22px 26px; }
.cn-changelog__tools { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: -8px; }
.cn-changelog__timeline { position: relative; display: grid; gap: 12px; padding-left: 22px; }
.cn-changelog__timeline::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 1px; background: var(--line); }
.changelog-acc { position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg, 18px); background: var(--surface); }
.changelog-acc::before { content: ""; position: absolute; left: -21px; top: 22px; width: 11px; height: 11px; border-radius: 999px; background: var(--surface); border: 2px solid var(--line-control); }
.changelog-acc[open]::before { background: var(--ink); border-color: var(--ink); }
.changelog-acc > summary { display: flex; align-items: center; gap: 10px; padding: 16px 22px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 500; color: var(--ink); }
.changelog-acc > summary::-webkit-details-marker { display: none; }
.changelog-acc > summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg); transition: transform 200ms ease; }
.changelog-acc[open] > summary::after { transform: rotate(-135deg); }
.changelog-acc > summary:hover { background: var(--surface-sunken); border-radius: inherit; }
.changelog-acc-body { padding: 0 22px 20px; border-top: 1px solid var(--line); }
.changelog-acc-body > :first-child { margin-top: 14px; }
/* Journal regroupé par jour (29/10) : numéros de version à droite du jour, une version = un sous-titre. */
.changelog-acc-meta { font-weight: 400; font-variant-numeric: tabular-nums; }
.changelog-md .changelog-version { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 6px; font-size: 15px; font-weight: 500; }
.changelog-md .changelog-version .cn-meta { font-variant-numeric: tabular-nums; }

/* 29 — Tableau de bord : Équipe et dernières mises à jour (style Arc, 12/10) */
.cn-team { display: flex; flex-direction: column; gap: 14px; }
.cn-team__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.cn-team__title { margin: 0; font-size: 18px; font-weight: 500; color: var(--ink); }
.cn-team__head .cn-tabs { margin: 0; }
.cn-team__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
@media (max-width: 1100px) { .cn-team__grid { grid-template-columns: 1fr; } }
.cn-team__list { padding: 6px 0; }
.cn-team__row { display: grid; grid-template-columns: minmax(180px, 1.1fr) minmax(0, 1fr) 120px; gap: 16px; align-items: center; padding: 12px 22px; }
.cn-team__row + .cn-team__row { border-top: 1px solid var(--line); }
.cn-team__who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cn-team__who > span:last-child { display: grid; min-width: 0; }
.cn-team__name { font-size: 14px; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-team__name small { margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--ink-3); }
.cn-team__status { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-team__status.is-away { color: var(--ink-3); }
.cn-team__load { display: grid; gap: 6px; justify-items: end; }
.cn-team__hours { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cn-team__hours b { color: var(--ink); font-weight: 500; }
.cn-team__bar { width: 100%; height: 3px; border-radius: 999px; background: var(--chart-track); overflow: hidden; }
.cn-team__bar > span { display: block; height: 100%; border-radius: 999px; background: var(--chart-1); transform-origin: left; animation: cn-bar-grow 900ms cubic-bezier(.16, 1, .3, 1) both; }
.cn-team__load.is-over .cn-team__bar > span { background: var(--danger); }
.cn-team__load.is-over .cn-team__hours b { color: var(--danger); }
@media (max-width: 700px) { .cn-team__row { grid-template-columns: minmax(0, 1fr) 100px; } .cn-team__status { display: none; } }
.cn-team__updates { max-height: 620px; overflow-y: auto; }
.cn-team__updates > .cn-panel__body { padding: 12px 20px 16px !important; } /* 12/10 : marges réduites */
.cn-team__subtitle { margin: 0 0 14px; font-size: 15px; font-weight: 500; color: var(--ink); }
.cn-updates__day + .cn-updates__day { margin-top: 18px; }
.cn-updates__dayhead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: 14px; font-weight: 500; color: var(--ink); }
.cn-updates__list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cn-updates__list::before { content: ""; position: absolute; left: 11px; top: 12px; bottom: 12px; width: 1px; background: var(--line); }
.cn-updates__list > li { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.cn-updates__list .cn-avatar { position: relative; z-index: 1; box-shadow: 0 0 0 3px var(--surface); }
.cn-updates__text { display: grid; gap: 2px; font-size: 14px; color: var(--ink-2); min-width: 0; }
.cn-updates__text strong { color: var(--ink); font-weight: 500; }
.cn-updates__list time { font-size: 12px; white-space: nowrap; padding-top: 2px; }
/* Équipe dans le bloc Charge (12/10) : lignes à fleur du panneau, mise en page qui s'adapte à la largeur du bloc. */
.cn-team { gap: 4px; }
.cn-team .cn-team__head { align-items: center; margin-bottom: 6px; }
.cn-team__list { container-type: inline-size; }
.cn-team .cn-team__row { padding: 12px 0; }
@container (max-width: 560px) {
  .cn-team__row { grid-template-columns: minmax(0, 1fr) 96px; grid-template-areas: "who load" "status load"; row-gap: 2px; }
  .cn-team__who { grid-area: who; }
  .cn-team__status { grid-area: status; padding-left: 44px; font-size: 12px; color: var(--ink-3); }
  .cn-team__load { grid-area: load; }
}
.cn-team__updates .cn-panel__body { max-height: 520px; overflow-y: auto; }
/* Changelog : survol sans bloc de fond décalé, seul le titre s'éclaire. */
.changelog-acc > summary:hover { background: transparent; }
.changelog-acc > summary:hover::after { border-color: var(--ink); }
.changelog-acc > summary { border-radius: inherit; }

/* 30 — bandeau du mode démo (12/10) */
.cn-demobar { position: sticky; top: 0; z-index: 95; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; padding: 8px 16px; background: #b98422; color: #1a1306; font-size: 13px; }
.cn-demobar strong { font-weight: 600; }
.cn-demobar__actions { display: inline-flex; gap: 8px; }
.cn-demobar form { margin: 0; }
.cn-demobar button { appearance: none; border: 1px solid rgba(0, 0, 0, .25); background: rgba(255, 255, 255, .25); color: inherit; border-radius: 999px; padding: 2px 12px; font: inherit; font-weight: 500; cursor: pointer; }
.cn-demobar button:hover { background: rgba(255, 255, 255, .45); }

/* 31 — Tableau de bord « Ressource » (12/10) : état de l'équipe et calendrier des absences façon grille d'activité Arc. */
.cn-hr { display: flex; flex-direction: column; gap: var(--space-5); }
.cn-hr__actions { display: inline-flex; gap: 6px; margin-left: auto; }
.cn-hr__actions form { margin: 0; }
.cn-hr__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; }
.cn-hr__filters .cn-tabs { margin: 0; }
.cn-hr__row { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 0; }
.cn-hr__state { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.cn-hr__state i { width: 8px; height: 8px; border-radius: 999px; background: var(--success); }
.cn-hr__state--away i, .cn-hr__state--off i { background: var(--chart-1); }
.cn-hr__state--remote i { background: #8b5cf6; }
.cn-hr__state--away, .cn-hr__state--off { color: var(--ink-3); }
.cn-hr__grid-wrap { overflow-x: auto; }
.cn-hr__grid { border-collapse: separate; border-spacing: 3px; font-size: 11px; }
.cn-hr__grid thead th { color: var(--ink-3); font-weight: 400; text-align: center; min-width: 16px; }
.cn-hr__grid thead th.is-weekend { opacity: .5; }
.cn-hr__grid thead th.is-today { color: var(--ink); font-weight: 600; }
.cn-hr__grid tbody th { text-align: left; font-weight: 400; font-size: 13px; color: var(--ink-2); padding-right: 12px; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.cn-hr__grid td { padding: 0; }
.cn-hr__cell { display: block; width: 16px; height: 16px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.cn-hr__cell--away { background: var(--chart-1); }
.cn-hr__cell--off { background: color-mix(in srgb, var(--chart-1) 55%, transparent); }
.cn-hr__cell--remote { background: #8b5cf6; }
.cn-hr__cell--pending { background: transparent; box-shadow: inset 0 0 0 1.5px var(--chart-1); }
.cn-hr__cell--weekend, .cn-hr__cell--holiday { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.cn-hr__cell.is-today { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 55%, transparent); }
.cn-hr__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; font-size: 12px; color: var(--ink-3); }
.cn-hr__legend span { display: inline-flex; align-items: center; gap: 6px; }
.cn-hr__legend .cn-hr__cell { width: 12px; height: 12px; border-radius: 3px; }
.cn-hr__list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; }
/* Menu du compte : sélecteurs (Design, Données) sous leur libellé, boutons de largeur égale, rien de coupé (12/10). */
.cn-menu__section:has(> .cn-seg) { flex-direction: column; align-items: stretch; gap: 6px; }
.cn-menu__section > .cn-seg { display: flex; width: 100%; box-sizing: border-box; }
.cn-menu__section > .cn-seg button { flex: 1 1 0; min-width: 0; padding-inline: 8px; white-space: nowrap; }

/* 32 — « Chiffres semaine » façon Arc Analytics (12/10) */
.cn-an { display: flex; flex-direction: column; gap: var(--space-5); }
.cn-an__card { padding: 22px 24px; display: flex; flex-direction: column; gap: 18px; }
.cn-an__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cn-an__head .cn-tabs { margin: 0; }
.cn-an__head-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.cn-an__title { margin: 0; font-size: 16px; font-weight: 500; color: var(--ink); }
.cn-an__kpis { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.cn-an__kpis > div { display: grid; gap: 4px; padding-right: 20px; }
.cn-an__kpis > div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.cn-an__kpis strong { font-size: 28px; line-height: 1.15; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.cn-an__delta { font-size: 12px; color: var(--ink-3); }
.cn-an__delta b { font-weight: 500; }
.cn-an__delta.is-up b, .is-up { color: var(--success); }
.cn-an__delta.is-down b, .is-down { color: var(--danger); }
.cn-an__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.cn-an__legend { display: flex; flex-wrap: wrap; gap: 6px; }
.cn-an__chip { appearance: none; display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-sunken); color: var(--ink-3); font: inherit; font-size: 13px; cursor: pointer; }
.cn-an__chip.is-on { color: var(--ink); }
.cn-an__chip i { width: 10px; height: 10px; border-radius: 3px; background: var(--ink-3); opacity: .35; }
.cn-an__chip.is-on i { opacity: 1; }
.cn-an__chip i.is-invoiced { background: var(--chart-1); } .cn-an__chip i.is-credits { background: var(--danger); } .cn-an__chip i.is-net { background: var(--ink); }
.cn-an__switch { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.cn-an__switch input { position: absolute; opacity: 0; }
.cn-an__switch span { width: 32px; height: 18px; border-radius: 999px; background: var(--chart-track); position: relative; transition: background 160ms ease; }
.cn-an__switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 999px; background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform 240ms cubic-bezier(.22,1,.36,1); }
.cn-an__switch input:checked + span { background: var(--ink); }
.cn-an__switch input:checked + span::after { transform: translateX(14px); }
.cn-an__switch input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.cn-an__chart { position: relative; }
.cn-an__chart svg { display: block; overflow: visible; }
.cn-an__grid { stroke: var(--chart-track); stroke-width: 1; }
.cn-an__zero { stroke: color-mix(in srgb, var(--ink) 30%, transparent); stroke-width: 1; }
.cn-an__target { stroke: color-mix(in srgb, var(--ink) 45%, transparent); stroke-dasharray: 4 4; }
.cn-an__tick { fill: var(--ink-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.cn-an__area.is-invoiced { fill: color-mix(in srgb, var(--chart-1) 28%, transparent); }
.cn-an__area.is-credits { fill: color-mix(in srgb, var(--danger) 26%, transparent); }
.cn-an__line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cn-an__line.is-invoiced { stroke: var(--chart-1); } .cn-an__line.is-credits { stroke: var(--danger); } .cn-an__line.is-net { stroke: var(--ink); }
.cn-an__line.is-target { stroke: var(--success); stroke-width: 1.5; stroke-dasharray: 6 4; }
.cn-an__chip i.is-target { background: var(--success); }
.cn-an__mark { stroke: var(--surface); stroke-width: 2; }
.cn-an__mark.is-hit { fill: var(--success); } .cn-an__mark.is-miss { fill: var(--danger); } .cn-an__mark.is-current { fill: var(--ink-3); }
.cn-an__target-kpi { display: grid; gap: 4px; }
.cn-an__pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cn-an__pick .cn-select { min-width: 200px; }
.cn-an__switch.is-disabled { opacity: .45; cursor: not-allowed; }
.cn-an__targets { border: 1px solid var(--line); border-radius: 14px; }
.cn-an__targets > summary { display: flex; align-items: center; gap: 8px; padding: 12px 16px; cursor: pointer; font-weight: 500; color: var(--ink); list-style: none; }
.cn-an__targets > summary::-webkit-details-marker { display: none; }
.cn-an__targets[open] > summary { border-bottom: 1px solid var(--line); }
.cn-an__targets form { display: grid; gap: 14px; padding: 14px 16px 16px; }
.cn-an__targets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px 24px; }
.cn-an__targets-grid label { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cn-an__targets-grid label > span:first-child { display: grid; gap: 2px; min-width: 0; }
.cn-an__eur { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); }
.cn-an__eur .cn-input { width: 120px; text-align: right; }
.cn-an__targets-foot { display: flex; justify-content: flex-end; }
.cn-an__line.is-prev { stroke: color-mix(in srgb, var(--ink) 50%, transparent); stroke-dasharray: 5 5; }
.cn-an__cross { stroke: var(--line-control); stroke-width: 1; }
.cn-an__dot { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
.cn-an__brush { position: relative; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; cursor: ew-resize; touch-action: none; }
.cn-an__brush svg { display: block; }
.cn-an__brush-area { fill: color-mix(in srgb, var(--ink) 10%, transparent); stroke: color-mix(in srgb, var(--ink) 35%, transparent); stroke-width: 1; }
.cn-an__brush-win { fill: color-mix(in srgb, var(--ink) 8%, transparent); stroke: color-mix(in srgb, var(--ink) 45%, transparent); stroke-width: 1; }
.cn-an__mv { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; }
@media (max-width: 1000px) { .cn-an__mv { grid-template-columns: 1fr; } .cn-an__kpis { grid-auto-flow: row; grid-template-columns: 1fr; } .cn-an__kpis > div + div { border-left: 0; padding-left: 0; } }
.cn-an__mv-hero { display: grid; gap: 2px; margin-bottom: 8px; }
.cn-an__mv-hero strong { font-size: 32px; line-height: 1.1; font-weight: 500; letter-spacing: -0.03em; }
.cn-an__wf rect { fill: color-mix(in srgb, var(--ink) 35%, transparent); transition: opacity 160ms ease; }
.cn-an__wf.is-up rect { fill: var(--success); } .cn-an__wf.is-down rect { fill: var(--danger); }
.cn-an__wf[role="button"] { cursor: pointer; outline: none; }
.cn-an__wf[role="button"]:hover rect, .cn-an__wf.is-selected rect { opacity: .8; stroke: var(--ink); stroke-width: 1.5; }
.cn-an__wf-val { fill: var(--ink-2); font-size: 11px; font-weight: 500; }
.cn-an__wf-link { stroke: var(--line-control); stroke-dasharray: 2 3; }
.cn-an__hint { margin: 6px 0 0; font-size: 12px; }
.cn-an__mv-side { display: flex; flex-direction: column; gap: 16px; }
.cn-an__mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.cn-an__mini dt { font-size: 12px; color: var(--ink-3); } .cn-an__mini dd { margin: 2px 0 0; font-size: 17px; font-weight: 500; }
.cn-an__side-head { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.cn-an__side-head strong { font-weight: 500; }
.cn-an__mv-side ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.cn-an__mv-side li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.cn-an__mv-side li span:first-child { display: grid; min-width: 0; }
.cn-an__mv-side li b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-an__mv-side li small { color: var(--ink-3); }
.cn-an__heat-wrap { overflow-x: auto; }
.cn-an__heat { border-collapse: separate; border-spacing: 3px; font-size: 12px; }
.cn-an__heat thead th { color: var(--ink-3); font-weight: 400; text-align: center; padding: 0 2px 4px; }
.cn-an__heat thead th:first-child { text-align: left; }
.cn-an__heat tbody th { text-align: left; font-weight: 400; color: var(--ink-2); padding-right: 14px; white-space: nowrap; }
.cn-an__hc { display: grid; place-items: center; min-width: 40px; height: 30px; border-radius: 6px; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--ink-2); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.cn-an__hc--1 { background: color-mix(in srgb, var(--chart-1) 18%, transparent); }
.cn-an__hc--2 { background: color-mix(in srgb, var(--chart-1) 34%, transparent); }
.cn-an__hc--3 { background: color-mix(in srgb, var(--chart-1) 52%, transparent); color: var(--ink); }
.cn-an__hc--4 { background: color-mix(in srgb, var(--chart-1) 74%, transparent); color: #111; }
.cn-an__hc--5 { background: var(--chart-1); color: #111; font-weight: 600; }
.cn-an__hc-avg { padding-left: 10px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cn-an__scale { display: flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 11px; color: var(--ink-3); }
.cn-an__scale i { width: 16px; height: 10px; border-radius: 3px; }
.cn-an__curve { fill: none; stroke: var(--chart-1); stroke-width: 2; opacity: var(--o, 1); }
.cn-an__curve:hover { stroke: var(--ink); opacity: 1; }
.cn-an__curve.is-average { stroke: var(--ink); stroke-width: 2.5; }
.cn-an__journey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 200px; gap: 16px; align-items: end; }
@media (max-width: 900px) { .cn-an__journey { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cn-an__stage { display: grid; gap: 6px; }
.cn-an__flow { display: flex; align-items: flex-end; gap: 4px; height: 150px; padding: 6px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 4%, transparent); }
.cn-an__flow span { flex: 1; border-radius: 6px 6px 3px 3px; background: var(--chart-1); transform-origin: bottom; animation: cn-bar-rise 700ms cubic-bezier(.16, 1, .3, 1) both; }
.cn-an__flow span.is-side { background: color-mix(in srgb, var(--ink) 22%, transparent); }
.cn-an__stage strong { font-size: 20px; font-weight: 500; } .cn-an__stage strong small { font-size: 13px; color: var(--ink-3); font-weight: 400; }
.cn-an__journey-sum { display: grid; gap: 4px; padding: 16px; border-radius: 14px; background: var(--surface-sunken); }
.cn-an__journey-sum strong { font-size: 30px; font-weight: 500; letter-spacing: -0.03em; }
.cn-an__inline { color: var(--ink); font-weight: 500; }

/* 33. Planning — « En attente de validation » en colonnes (12/10) : tâche, personne, jour, durée, posé par, actions. */
.planning-pending__head, .planning-pending__row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.3fr) 110px 70px minmax(0, 1.2fr) 200px; align-items: center; gap: 16px; }
.planning-pending__head { margin-top: 12px; padding: 0 0 8px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.planning-pending__head .is-num, .planning-pending__row .is-num { text-align: right; }
.planning-pending { margin: 0; padding: 0; list-style: none; }
.planning-pending__row { padding: 10px 0; border-bottom: 1px solid var(--line); }
.planning-pending__row:last-child { border-bottom: 0; }
.planning-pending__actions { justify-content: flex-end; }
@media (max-width: 900px) {
    .planning-pending__head { display: none; }
    .planning-pending__row { grid-template-columns: 1fr auto; gap: 6px 12px; }
    .planning-pending__task { grid-column: 1 / -1; }
    .planning-pending__actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* 34. Projets — liste façon uiarc.dev/demo/projects (12/10) : nom + entreprise, équipe en avatars superposés, avancement. */
.cn-projects__name { display: grid; gap: 2px; min-width: 0; }
.cn-projects__name small { color: var(--ink-3); font-size: 12px; }
.cn-projects td.is-danger { color: var(--danger); }
.cn-projects__progress { min-width: 140px; }
.cn-avatars { display: inline-flex; align-items: center; }
.cn-avatars > .cn-avatar, .cn-avatars__more { box-shadow: 0 0 0 2px var(--surface); border-radius: 999px; }
.cn-avatars > * + * { margin-left: -8px; }
.cn-avatars__more { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; font-size: 11px; font-weight: 600; color: var(--ink-2); background: var(--surface-2, var(--line)); }
.cn-projects tbody tr:hover .cn-avatars > .cn-avatar, .cn-projects tbody tr:hover .cn-avatars__more { box-shadow: 0 0 0 2px var(--surface-hover, var(--surface)); }

/* 35. Menu du compte façon Arc (12/10) : en-tête photo + nom + pôle, lignes « libellé à gauche, sélecteur à droite ». */
.cn-account { min-width: 320px; }
.cn-account__head { display: flex; align-items: center; gap: 12px; padding: 10px 12px 8px; }
.cn-account__who { display: grid; gap: 2px; min-width: 0; }
.cn-account__line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.cn-account__pole { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border: 1px solid var(--line); border-radius: 6px; font-size: 11px; font-weight: 500; color: var(--ink-2); background: var(--surface-sunken); }
.cn-account__item { display: flex; align-items: center; gap: 10px; }
.cn-account__item > i { width: 16px; text-align: center; color: var(--ink-3); }
.cn-account__item.cn-menu__item--danger > i { color: inherit; }
.cn-account__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 12px; }
.cn-account__row[hidden] { display: none; }
.cn-account__label { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink); white-space: nowrap; }
.cn-account__label > i { width: 16px; text-align: center; color: var(--ink-3); }
.cn-account__row .cn-seg button { height: 28px; }
.cn-seg--icons button { width: 34px; padding: 0; display: inline-grid; place-items: center; }
.cn-account__dot { display: inline-block; width: 9px; height: 9px; border-radius: 999px; }
.cn-account__dot.is-online { background: var(--success); } .cn-account__dot.is-busy { background: var(--danger); } .cn-account__dot.is-away { background: var(--warning, #d9a400); }
.cn-pj-team__stack > .cn-avatar, .cn-pj-team__stack > .cn-avatars__more { width: 30px; height: 30px; min-width: 30px; font-size: 11px; }
.cn-pj-team__stack > * + * { margin-left: -6px; }
.cn-ticket-cat { display: grid; gap: 1px; } .cn-ticket-cat small { font-size: 12px; color: var(--ink-3); }

/* 36. Réglages › Catégories de tickets (12/10). */
.cn-ticketcats { display: grid; gap: var(--space-4); }
.cn-ticketcats { min-width: 0; }
.cn-ticketcats__form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 14px 16px; min-width: 0; }
.cn-ticketcats__form label { display: grid; gap: 4px; flex: 1 1 160px; min-width: 0; }
.cn-ticketcats__form > .cn-input:not([type="color"]), .cn-ticketcats__form > .cn-select { flex: 1 1 160px; min-width: 0; }
.cn-ticketcats__form label.cn-ticketcats__color { flex: 0 0 64px; }
.cn-ticketcats__form--edit { align-items: center; padding: 8px 0; }
.cn-ticketcats__form input[type="color"] { width: 64px; padding: 2px; height: 32px; } .cn-ticketcats__form label.cn-ticketcats__color { width: 64px; }
.cn-ticketcats__error { margin: 0 16px 14px; color: var(--danger); font-size: 13px; }
.cn-ticketcats__list { margin: 0; padding: 0 16px; list-style: none; }
.cn-ticketcats__list > li { border-top: 1px solid var(--line); }
.cn-ticketcats__list > li:first-child { border-top: 0; }
.cn-ticketcats__row { display: grid; grid-template-columns: minmax(0, 1fr) 110px auto; align-items: center; gap: 12px; padding: 10px 0; }
.cn-ticketcats__name { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; color: var(--ink); min-width: 0; }
.cn-ticketcats__name > i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.cn-ticketcats__name small { font-weight: 400; margin-left: 4px; }
.cn-ticketcats__actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
.cn-ticketcats__actions form { margin: 0; }
@media (max-width: 900px) { .cn-ticketcats__row { grid-template-columns: 1fr auto; } .cn-ticketcats__row > .cn-meta { display: none; } }

/* 37. Accueil (12/10) : listes en colonnes alignées (« À valider », « Tâches que j'ai confiées »), flèches de « À faire ». */
.cn-list--cols > li { display: grid !important; align-items: center; gap: 16px; }
.cn-list--validate > li { grid-template-columns: 190px minmax(0, 1fr) auto; }
.cn-list--delegated > li { grid-template-columns: minmax(0, 1fr) 140px 120px; }
.cn-list--cols > li > * { min-width: 0; }
.cn-list--cols .cn-person { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-list--delegated > li > .cn-badge { justify-self: end; }
.cn-list--cols > li > span:has(> .cn-list__title) { display: grid; gap: 2px; }
@media (max-width: 720px) { .cn-list--validate > li, .cn-list--delegated > li { grid-template-columns: minmax(0, 1fr) auto; } .cn-list--validate > li > .cn-person { grid-column: 1 / -1; } }
.cn-todo__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 24px 14px; border-top: 1px solid var(--line); }
.cn-todo__pager { display: inline-flex; align-items: center; gap: 6px; }
.cn-todo[aria-busy="true"] .cn-list { opacity: .5; transition: opacity 120ms; }
.cn-list__who { display: grid; gap: 2px; min-width: 0; }
.cn-list__who > time { padding-left: 32px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* 38. Fiche tâche (12/10) : bouton Drive, bloc Temps. */
.cn-task-drive { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cn-task-time { display: grid; gap: 12px; }
.cn-task-time__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.cn-task-time__big { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.cn-task-time__left { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--success); }
.cn-task-time__left.is-over { color: var(--danger); }
.cn-task-time__rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding-top: 10px; border-top: 1px solid var(--line); }
.cn-task-time__rows > div { display: grid; gap: 2px; }
.cn-task-time__rows dt { font-size: 12px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 4px; }
.cn-task-time__rows dd { margin: 0; font-size: 14px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }

/* 39. Mon compte › Mes e-mails (12/10). */
.cn-mailprefs { display: grid; gap: var(--space-4); }
.cn-mailprefs .cn-pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cn-mailprefs__list { margin: 0; padding: 0 20px; list-style: none; }
.cn-mailprefs__list > li { border-top: 1px solid var(--line); }
.cn-mailprefs__list > li:first-child { border-top: 0; }
.cn-mailprefs__list label { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; cursor: pointer; }
.cn-mailprefs__list li.is-off label { cursor: not-allowed; opacity: .6; }
.cn-mailprefs__label { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 14px; color: var(--ink); }
.cn-mailprefs__label > i { width: 16px; text-align: center; color: var(--ink-3); }
.cn-mailprefs__label small { width: 100%; padding-left: 26px; }
.cn-switch { position: relative; display: inline-flex; flex: none; }
.cn-switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: inherit; }
.cn-switch span { width: 34px; height: 20px; border-radius: 999px; background: var(--chart-track, var(--line)); position: relative; transition: background 160ms ease; }
.cn-switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform 220ms cubic-bezier(.22,1,.36,1); }
.cn-switch input:checked + span { background: var(--ink); } /* accent Arc, monochrome (15/10) : plus de vert */
.cn-switch input:checked + span::after { transform: translateX(14px); }
.cn-switch input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.cn-mailprefs__bulk { display: inline-flex; gap: 4px; }


/* 40. Opportunités — option A (12/10) : tableau par étapes, formulaire simple, fiche (étapes cliquables). */
.cn-deal-views { align-items: center; }
.cn-deal-views a { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 4px; font-size: 13px; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.cn-deal-views a:hover { color: var(--ink); }
.cn-deal-views a[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: 500; box-shadow: 0 0 0 1px var(--line); }
:root[data-skin="arc"] .cn-deal-views a { min-height: 30px; border-radius: calc(var(--arc-radius-control) - 4px); color: var(--arc-text-muted); font-weight: 500; }
:root[data-skin="arc"] .cn-deal-views a[aria-current="page"] { background: var(--arc-surface); color: var(--arc-foreground); box-shadow: 0 0 0 1px var(--arc-border), var(--arc-shadow-resting); }

.cn-deal-board__head { align-items: flex-start; }
.cn-deal-board__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 13px; color: var(--ink-3); }
.cn-deal-board__meta strong { color: var(--ink); font-weight: 500; }
.cn-deal-board__pipeline .cn-select { min-width: 180px; }
.cn-deal-outcome { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); text-decoration: none; }
.cn-deal-outcome::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--ink-3); }
.cn-deal-outcome--won::before { background: var(--success); }
.cn-deal-outcome--lost::before { background: var(--danger); }
.cn-deal-outcome:hover, .cn-deal-outcome:hover strong { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.cn-deal-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; margin-top: var(--space-4); align-items: start; }
.cn-deal-col { display: flex; flex-direction: column; min-width: 0; min-height: 220px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-sunken); transition: border-color 120ms, background-color 120ms; }
.cn-deal-col.is-over { border-color: var(--ink-3); border-style: dashed; background: var(--brand-soft, var(--surface-sunken)); }
.cn-deal-col__head { display: grid; gap: 2px; padding: 2px 4px 10px; }
.cn-deal-col__title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cn-deal-col__title h2 { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-deal-col__dot { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.cn-deal-col__count { margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; box-sizing: border-box; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); }
.cn-deal-col__sum { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-left: 16px; font-size: 13px; color: var(--ink-2); }
.cn-deal-col__add { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; color: var(--ink-3); text-decoration: none; }
.cn-deal-col__add:hover { background: var(--surface); color: var(--ink); }
.cn-deal-col__list { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.cn-deal-col__empty { margin: 4px 0 0; padding: 14px 8px; border: 1px dashed var(--line); border-radius: var(--radius-md); font-size: 12px; color: var(--ink-3); text-align: center; }
.cn-deal-col__empty[hidden] { display: none; }

.cn-deal-card { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.cn-deal-card[draggable="true"] { cursor: grab; }
.cn-deal-card[draggable="true"]:active { cursor: grabbing; }
.cn-deal-card.is-dragging { opacity: .45; }
.cn-deal-card:hover { border-color: var(--line-control); }
.cn-deal-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.cn-deal-card__title { min-width: 0; font-size: 14px; font-weight: 500; line-height: 19px; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.cn-deal-card__title:hover { text-decoration: underline; text-underline-offset: 3px; }
.cn-deal-card__company { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-deal-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.cn-deal-card__amount { font-size: 13px; font-weight: 500; color: var(--ink); }
.cn-deal-card__amount.is-muted { color: var(--ink-3); font-weight: 400; }
.cn-deal-card__meta { display: inline-flex; align-items: center; gap: 8px; }
.cn-deal-card__date { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-3); }
.cn-deal-card__date.is-late { color: var(--danger); font-weight: 500; }
.cn-deal-card__more { display: inline-grid; place-items: center; width: 24px; height: 24px; margin: -3px -6px 0 0; border: 0; border-radius: 6px; background: none; color: var(--ink-3); cursor: pointer; }
.cn-deal-card__more:hover, .cn-deal-card__more[aria-expanded="true"] { background: var(--surface-sunken); color: var(--ink); }
.cn-deal-card__menu .cn-menu__pop { width: 220px; }
.cn-deal-card__menu-label { display: block; padding: 4px 12px 2px; font-size: 11.5px; color: var(--ink-3); }
.cn-deal-card__won > i { color: var(--success); }
:root[data-skin="arc"] .cn-deal-col { border-radius: 20px; border-color: var(--arc-border); background: var(--arc-surface-muted); }
:root[data-skin="arc"] .cn-deal-card { border-radius: 14px; border-color: var(--arc-border); box-shadow: var(--arc-shadow-resting); }
:root[data-skin="arc"] .cn-deal-card:hover { border-color: var(--arc-border-strong); }

.cn-deal-dialog { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; }
.cn-deal-dialog__backdrop { position: absolute; inset: 0; background: var(--cn-overlay-bg); backdrop-filter: var(--cn-overlay-blur); -webkit-backdrop-filter: var(--cn-overlay-blur); }
.cn-deal-dialog__panel { position: relative; width: min(440px, 100%); box-shadow: var(--shadow-overlay); }
:root[data-skin="arc"] .cn-deal-dialog__panel { box-shadow: var(--arc-shadow-floating); }
.cn-deal-dialog__label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--ink); }
.cn-deal-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

.cn-deal-form__more { margin-top: -4px; }
.cn-deal-form__toggle { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; }
.cn-deal-form__toggle > i { width: 12px; font-size: 11px; color: var(--ink-3); transition: transform 120ms; }
.cn-deal-form__toggle > i.is-open { transform: rotate(90deg); }
.cn-deal-form__toggle .cn-meta { font-weight: 400; }
.cn-deal-form__options > .cn-form-grid { padding: 0; }
.cn-deal-form__textarea { height: auto; padding: 8px 10px; resize: vertical; font: inherit; line-height: 1.45; width: 100%; }

.cn-deal-stage { display: grid; gap: 14px; }
.cn-deal-steps { display: grid; grid-template-columns: repeat(var(--cn-deal-steps, 4), minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.cn-deal-step__btn { display: grid; gap: 2px; width: 100%; min-height: 48px; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); font: inherit; text-align: left; color: var(--ink-2); }
button.cn-deal-step__btn { cursor: pointer; }
button.cn-deal-step__btn:hover:not(:disabled) { border-color: var(--ink-3); color: var(--ink); }
button.cn-deal-step__btn:disabled { opacity: .6; cursor: progress; }
.cn-deal-step__name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-deal-step__pct { font-size: 11.5px; color: var(--ink-3); }
.cn-deal-step.is-done .cn-deal-step__btn { background: var(--surface-sunken); color: var(--ink); }
.cn-deal-step.is-done .cn-deal-step__name::before { content: "\2713\00a0"; color: var(--success); }
.cn-deal-step.is-current .cn-deal-step__btn { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.cn-deal-step.is-current .cn-deal-step__pct { color: inherit; opacity: .75; }
:root[data-skin="arc"] .cn-deal-step__btn { border-radius: 12px; border-color: var(--arc-border); }
:root[data-skin="arc"] .cn-deal-step.is-current .cn-deal-step__btn { border-color: var(--arc-foreground); background: var(--arc-foreground); color: var(--arc-background); }
.cn-deal-stage__foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; }
.cn-deal-stage__foot > .cn-meta { padding-top: 8px; }
.cn-deal-stage__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.cn-deal-lost { flex-basis: 100%; max-width: 440px; margin-left: auto; }
.cn-deal-text { display: block; margin: 0; font-size: 14px; line-height: 21px; color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; }
.cn-deal-notes__form { display: grid; gap: 8px; padding: var(--space-4); border-bottom: 1px solid var(--line); }
.cn-deal-notes__submit { display: flex; justify-content: flex-end; }
@media (max-width: 720px) {
    .cn-deal-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cn-deal-cols { grid-auto-columns: minmax(240px, 85vw); }
}

/* 41. Chiffres semaine (12/10) : objectifs par mois (couleurs de la règle d'atteinte) et entonnoir devis → encaissement. */
.cn-an__months { width: 100%; border-collapse: separate; border-spacing: 4px; font-size: 13px; }
.cn-an__months th { font-weight: 500; color: var(--ink-3); text-align: center; padding: 4px 6px; white-space: nowrap; }
.cn-an__months thead th small { display: block; font-size: 10px; font-weight: 400; }
.cn-an__months th[scope="row"] { text-align: left; color: var(--ink); }
.cn-an__months thead th:first-child { text-align: left; }
.cn-an__months .is-num { text-align: right; }
.cn-an__mcell { display: grid; place-items: center; gap: 1px; min-width: 76px; padding: 6px 8px; border-radius: 10px; font-variant-numeric: tabular-nums; }
.cn-an__mcell b { font-size: 14px; font-weight: 600; }
.cn-an__mcell small { font-size: 11px; opacity: .8; }
.cn-an__mcell.is-current { outline: 1px dashed currentColor; outline-offset: -1px; opacity: .75; }
:is(.cn-an__mcell, .cn-an__avg, .cn-an__legend-tones i).is-low { background: color-mix(in oklab, var(--danger) 20%, transparent); color: var(--danger); }
:is(.cn-an__mcell, .cn-an__avg, .cn-an__legend-tones i).is-mid { background: color-mix(in oklab, oklch(0.8 0.15 85) 24%, transparent); color: oklch(0.6 0.13 75); }
:is(.cn-an__mcell, .cn-an__avg, .cn-an__legend-tones i).is-hit { background: color-mix(in oklab, var(--success) 22%, transparent); color: var(--success); }
:is(.cn-an__mcell, .cn-an__avg, .cn-an__legend-tones i).is-over { background: color-mix(in oklab, oklch(0.62 0.17 250) 22%, transparent); color: oklch(0.62 0.17 250); }
:root[data-theme="dark"] :is(.cn-an__mcell, .cn-an__avg).is-mid { color: oklch(0.85 0.13 85); }
/* Rétention clients : une seule teinte, le jaune (--warn), plus intense avec le % (Anthony, 16/10 : jaune plutôt que gris). */
:is(.cn-an__mcell, .cn-an__legend-tones i).is-seq { background: color-mix(in oklab, var(--warn) calc(var(--p, 0) * 0.6%), var(--surface-sunken)); color: var(--ink); }
.cn-an__months tfoot th, .cn-an__months tfoot td { padding-top: 8px; }
.cn-an__cohort-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.cn-an__cohort-bar .cn-an__legend-tones { margin-top: 0; }
[data-an-cohorts] { position: relative; }
.cn-an__cohorts .cn-an__mcell { min-height: 36px; cursor: default; transition: opacity 160ms ease, box-shadow 160ms ease; }
.cn-an__cohorts .cn-an__mcell:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.cn-an__cohorts.is-hover .cn-an__mcell { opacity: .55; }
.cn-an__cohorts.is-hover :is(.cn-an__mcell.is-col, .cn-an__mcell.is-row) { opacity: 1; }
.cn-an__cohorts .cn-an__mcell.is-active { opacity: 1; box-shadow: 0 0 0 2px var(--ink); }
.cn-an__cohort-axis th, .cn-an__cohort-axis td { padding-top: 10px; font-size: 12px; color: var(--ink-3); text-align: center; }
.cn-an__cohort-axis th { text-align: left; font-weight: 400; }
.cn-an__cohort-axis td.is-col { color: var(--ink); }
[data-an-cohorts] .cn-chart-tip strong.cn-an__tip-pct { display: block; margin: 2px 0 4px; font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
[data-an-cohorts] .cn-chart-tip dl { display: grid; grid-template-columns: auto auto; gap: 2px 16px; margin: 0; }
[data-an-cohorts] .cn-chart-tip dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .cn-an__cohorts .cn-an__mcell { transition: none; } }
.cn-an__mcell.is-none { background: var(--surface-sunken); color: var(--ink-2); }
.cn-an__avg { display: inline-block; padding: 3px 8px; border-radius: 999px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cn-an__legend-tones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--ink-3); }
.cn-an__legend-tones span { display: inline-flex; align-items: center; gap: 6px; }
.cn-an__legend-tones i { width: 12px; height: 12px; border-radius: 4px; }
.cn-an__kpi-name { font-size: 22px !important; }
.cn-an__journey-total { display: grid; justify-items: end; gap: 2px; }
.cn-an__journey-total strong { font-size: 28px; font-weight: 500; color: var(--ink); }
.cn-an__funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cn-an__funnel li { display: grid; grid-template-columns: 120px minmax(0, 1fr) 190px 190px minmax(0, 220px); align-items: center; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.cn-an__funnel li:first-child { border-top: 0; }
.cn-an__funnel-label { font-weight: 500; color: var(--ink); }
.cn-an__funnel-bar { height: 12px; border-radius: 999px; background: var(--chart-track, var(--surface-sunken)); overflow: hidden; }
.cn-an__funnel-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--chart-1); }
.cn-an__funnel-num, .cn-an__funnel-step { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cn-an__funnel-num b, .cn-an__funnel-step b { color: var(--ink); font-weight: 600; }
@media (max-width: 1000px) { .cn-an__funnel li { grid-template-columns: 1fr 1fr; } .cn-an__funnel-bar { grid-column: 1 / -1; order: -1; } }
/* « À valider » dans une colonne étroite (accueil en deux colonnes) : personne + boutons en haut, tâche en dessous. */
.cn-list--validate { container-type: inline-size; }
@container (max-width: 760px) {
    .cn-list--validate > li { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
    .cn-list--validate > li > .cn-list__who { grid-row: 1; grid-column: 1; }
    .cn-list--validate > li > :last-child { grid-row: 1; grid-column: 2; }
    .cn-list--validate > li > span:nth-child(2) { grid-row: 2; grid-column: 1 / -1; padding-left: 32px; }
}
.planning-pending__toggle { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; }
.planning-pending__chevron { font-size: 10px; color: var(--ink-3); transition: transform 180ms ease; }
.planning-pending__chevron.is-open { transform: rotate(90deg); }

/* 42. Fenêtres de dialogue (public/js/cn-dialog.js, 12/10) : style Arc — titre, croix ronde, séparateur, texte, actions. */
.cn-dialog { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; }
.cn-dialog__backdrop { position: absolute; inset: 0; background: var(--cn-overlay-bg); backdrop-filter: var(--cn-overlay-blur); -webkit-backdrop-filter: var(--cn-overlay-blur); opacity: 0; transition: opacity 160ms ease; }
.cn-dialog__panel { position: relative; width: min(520px, 100%); border-radius: 28px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); box-shadow: 0 24px 64px rgba(0,0,0,.45); opacity: 0; transform: translateY(8px) scale(.98); transition: opacity 180ms ease, transform 220ms cubic-bezier(.22,1,.36,1); }
.cn-dialog.is-open .cn-dialog__backdrop { opacity: 1; }
.cn-dialog.is-open .cn-dialog__panel { opacity: 1; transform: none; }
.cn-dialog.is-leaving .cn-dialog__backdrop, .cn-dialog.is-leaving .cn-dialog__panel { opacity: 0; }
.cn-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 26px 28px 20px; border-bottom: 1px solid var(--line); }
.cn-dialog__title { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
.cn-dialog__sub { margin: 6px 0 0; font-size: 14px; color: var(--ink-3); }
.cn-dialog__close { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-3); cursor: pointer; }
.cn-dialog__close:hover { color: var(--ink); background: var(--surface-sunken); }
.cn-dialog__body { display: grid; gap: 18px; padding: 20px 28px 26px; }
.cn-dialog__text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); white-space: pre-line; }
.cn-dialog__field { display: grid; gap: 6px; font-size: 13px; color: var(--ink-2); }
.cn-dialog__field .cn-input { width: 100%; }
.cn-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.cn-dialog__actions .cn-btn { min-height: 40px; padding-inline: 20px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .cn-dialog__panel, .cn-dialog__backdrop { transition: none; } }
.cn-dialog .cn-dialog__actions .cn-btn--danger { background: var(--danger) !important; border-color: transparent !important; color: #fff !important; } .cn-dialog .cn-dialog__actions .cn-btn--danger:hover { filter: brightness(1.08); }

/* 43. Planning (12/10) : heures en badge — prévu, ou prévu barré › réel (plus = orange, moins = vert, égal = coche). */
.planning-hours { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; background: color-mix(in oklab, var(--ink) 9%, transparent); color: var(--ink); }
.planning-hours.is-tiny { padding: 1px 6px; font-size: 10px; }
.planning-hours s { font-weight: 500; opacity: .6; }
.planning-hours > i { font-size: 8px; opacity: .7; }
.planning-hours.is-done { background: color-mix(in oklab, var(--success) 18%, transparent); color: var(--success); }
.planning-hours.is-more { background: color-mix(in oklab, oklch(0.75 0.15 70) 22%, transparent); color: oklch(0.62 0.14 60); }
:root[data-theme="dark"] .planning-hours.is-more { color: oklch(0.82 0.13 75); }
.planning-hours.is-less { background: color-mix(in oklab, var(--success) 18%, transparent); color: var(--success); }
.planning-card__title { flex: 1 1 90px; min-width: 0; }

/* 44. Fond des fenêtres (12/10, Anthony : « noir léger et blur léger ») : un seul réglage pour toutes les fenêtres et panneaux. */
:root { --cn-overlay-bg: rgba(0, 0, 0, .45); --cn-overlay-blur: blur(4px); }
:root[data-theme="light"] { --cn-overlay-bg: rgba(0, 0, 0, .32); }

/* 45. Tableau de bord › Pôle (12/10) : synthèse d'une semaine passée. */
.cn-nav--sub { padding-left: 34px !important; font-size: 13px; }
.cn-pw { display: grid; gap: var(--space-4); }
.cn-pw__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cn-pw__nav { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cn-pw__nav .is-disabled { opacity: .4; pointer-events: none; }
.cn-pw__week { font-size: 14px; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cn-pw__week b { color: var(--ink); }
.cn-pw__label { margin: -6px 0 0; font-size: 13px; color: var(--ink-3); }
.cn-pw__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-4); align-items: start; }
.cn-pw__days { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cn-pw__days li { display: grid; grid-template-columns: 64px minmax(0, 1fr) 110px; align-items: center; gap: 12px; }
.cn-pw__day { font-size: 13px; font-weight: 500; color: var(--ink); }
.cn-pw__bars { position: relative; height: 22px; }
.cn-pw__bars > span { position: absolute; left: 0; border-radius: 999px; }
.cn-pw__bars .cn-pw__cap { top: 0; height: 22px; background: var(--chart-track, var(--surface-sunken)); }
.cn-pw__bars .cn-pw__plan { top: 5px; height: 12px; }
.cn-pw__bars .cn-pw__real { top: 9px; height: 4px; background: var(--ink); opacity: .75; }
.cn-pw__plan.is-low { background: var(--danger); } .cn-pw__plan.is-mid { background: oklch(0.8 0.15 85); } .cn-pw__plan.is-hit { background: var(--success); } .cn-pw__plan.is-over { background: oklch(0.62 0.17 250); } .cn-pw__plan:not([class*="is-"]) { background: var(--chart-1); }
.cn-pw__num { font-size: 13px; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cn-pw__num small { color: var(--ink-3); font-size: 12px; }
.cn-pw__legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; font-size: 12px; color: var(--ink-3); }
.cn-pw__legend span { display: inline-flex; align-items: center; gap: 6px; }
.cn-pw__legend i { display: inline-block; width: 14px; height: 8px; border-radius: 999px; }
.cn-pw__legend i.cn-pw__real { height: 4px; background: var(--ink); }
.cn-pw__legend i.cn-pw__cap { background: var(--chart-track, var(--surface-sunken)); }
.cn-pw__projects { list-style: none; margin: 0; padding: 0 20px; }
.cn-pw__projects li { display: grid; grid-template-columns: minmax(0, 1.4fr) auto minmax(60px, 1fr) 130px; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.cn-pw__projects li:first-child { border-top: 0; }
.cn-pw__pname { display: grid; gap: 2px; min-width: 0; }
.cn-pw__pname a { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-pw__share { height: 6px; border-radius: 999px; background: var(--chart-track, var(--surface-sunken)); overflow: hidden; }
.cn-pw__share > span { display: block; height: 100%; background: var(--chart-1); border-radius: 999px; }
@media (max-width: 1100px) { .cn-pw__grid { grid-template-columns: 1fr; } }
.cn-pw__hint { margin: 0 0 12px; font-size: 12px; }
.cn-pw__days li { grid-template-columns: 90px minmax(0, 1fr) 150px; }
.cn-pw__day { display: grid; gap: 1px; }
.cn-pw__day small { font-size: 11px; font-weight: 400; color: var(--ink-3); }
.cn-pw__num { display: grid; justify-items: end; gap: 1px; }
.cn-pw__real-txt { font-size: 11px; }
.cn-pw__abs > li { display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 60px; align-items: center; gap: 12px; }
.cn-pw__abs-type { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; background: color-mix(in oklab, var(--danger) 16%, transparent); color: var(--danger); }
.cn-pw__daynum { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cn-pw__daynum small { font-size: 11px; color: var(--ink-3); }
/* Absences du pôle (12/10) : colonnes fixes pour aligner les badges (télétravail comme absences), icône espacée. */
.cn-pw__abs > li { grid-template-columns: minmax(0, 1fr) 190px 230px 50px !important; }
.cn-pw__abs .planning-pill, .cn-pw__abs .cn-pw__abs-type { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.planning-placed { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--ink-2); } .planning-placed b { color: var(--ink); font-weight: 500; }
/* Fiche tâche — colonne de droite (12/10) : libellés à gauche, valeurs alignées juste à côté, titres homogènes. */
.cn-task-side dl:not(.cn-task-time__rows) > div { display: grid !important; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 12px; }
.cn-task-side dl:not(.cn-task-time__rows) dd { text-align: left !important; justify-self: start; min-width: 0; }
.cn-task-side dl dd > * { justify-content: flex-start; }
.cn-task-side h3 { font-size: 15px !important; font-weight: 600; margin-bottom: 14px !important; }
.cn-task-side h3 > i { font-size: 13px; width: 18px; }
.cn-task-time__left.is-gain { color: var(--success); }
.cn-task-time__gain { margin: 2px 0 0; padding: 10px 12px; border-radius: 12px; font-size: 12px; line-height: 1.5; background: color-mix(in oklab, var(--success) 12%, transparent); color: var(--ink-2); }

/* 46. Récap « Pôles » (12/10) : copie stricte du « usage-meter » Arc (Retainers) ; animation dans public/js/cn-usage-meter.js. */
.cn-um-panel { padding: 20px; display: grid; gap: 16px; }
.cn-um-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cn-um-panel__head h2 { margin: 0; font-size: 14px; font-weight: 500; color: var(--ink); }
.cn-um-panel__head p { margin: 2px 0 0; font-size: 12px; color: var(--ink-3); }
.cn-um-panel__nav { display: inline-flex; gap: 6px; }
.cn-um-panel__nav .is-disabled { opacity: .4; pointer-events: none; }
.cn-um-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cn-um { --um-accent: var(--arc-accent-strong, var(--ink)); --um-surface: var(--arc-surface, var(--surface, #fff)); --um-muted: color-mix(in oklab, var(--ink) 7%, var(--um-surface));
  --segment-0: var(--um-accent); --segment-1: color-mix(in oklab, var(--um-accent) 62%, var(--um-surface)); --segment-2: color-mix(in oklab, var(--um-accent) 36%, var(--um-surface)); --segment-3: color-mix(in oklab, var(--um-accent) 22%, var(--um-surface));
  display: grid; gap: 16px; align-content: start; min-width: 0; padding: 0 24px; color: var(--ink); }
.cn-um:first-child { padding-left: 0; } .cn-um:last-child { padding-right: 0; }
.cn-um + .cn-um { border-left: 1px solid var(--line); }
.cn-um__top { display: flex; min-width: 0; min-height: 28px; align-items: center; justify-content: space-between; gap: 12px; }
.cn-um__title { min-width: 0; font-size: 16px; font-weight: 500; color: var(--ink); text-decoration: none; }
.cn-um__title:hover { text-decoration: underline; text-underline-offset: 3px; }
.cn-um__badge { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 9999px; background: var(--um-muted); color: var(--ink-2); font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; transition: background-color .24s cubic-bezier(.22, 1, .36, 1), color .24s; }
.cn-um__badge i { font-size: 13px; }
.cn-um__badge[data-status="near"] { background: color-mix(in oklab, oklch(0.83 0.17 80) 14%, var(--um-surface)); color: var(--ink); } .cn-um__badge[data-status="near"] i { color: oklch(0.78 0.16 78); }
.cn-um__badge[data-status="over"] { background: color-mix(in oklab, var(--danger) 12%, var(--um-surface)); color: var(--ink); } .cn-um__badge[data-status="over"] i { color: var(--danger); }
.cn-um__total { display: flex; min-width: 0; align-items: baseline; gap: 8px; margin: 0; }
.cn-um__amount { flex: none; font-size: 36px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.cn-um__caption { position: relative; display: block; flex: 1 1 0; min-width: 0; height: 1.4em; color: var(--ink-2); font-size: 14px; }
.cn-um__swaptext { position: absolute; inset: 0 auto auto 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: opacity .2s cubic-bezier(.22, 1, .36, 1), transform .26s cubic-bezier(.22, 1, .36, 1), filter .2s; }
.cn-um__swaptext.is-in { opacity: 0; transform: translateY(.3em); filter: blur(4px); transition: none; }
.cn-um__swaptext.is-out { opacity: 0; transform: translateY(-.3em); filter: blur(4px); }
.cn-um__bar { position: relative; padding-block: 5px; }
.cn-um__track { position: relative; height: 14px; overflow: hidden; border-radius: 9999px; background: var(--um-muted); isolation: isolate; }
.cn-um__seg { position: absolute; top: 0; bottom: 0; box-shadow: 2px 0 0 var(--um-surface); transition: opacity .16s cubic-bezier(.22, 1, .36, 1); }
.cn-um__seg[data-index="0"], .cn-um__swatch[data-index="0"] { background: var(--segment-0); }
.cn-um__seg[data-index="1"], .cn-um__swatch[data-index="1"] { background: var(--segment-1); }
.cn-um__seg[data-index="2"], .cn-um__swatch[data-index="2"] { background: var(--segment-2); }
.cn-um__seg[data-index="3"], .cn-um__swatch[data-index="3"] { background: var(--segment-3); }
.cn-um__seg[data-highlight="off"] { opacity: .28; }
.cn-um__hatch { position: absolute; top: 0; bottom: 0; right: 0; background: repeating-linear-gradient(135deg, transparent 0 3.5px, var(--um-surface) 3.5px 6px), color-mix(in oklab, var(--ink) 30%, var(--um-surface)); transition: background-color .16s; }
.cn-um__hatch[data-highlight="on"] { background: repeating-linear-gradient(135deg, transparent 0 3.5px, var(--um-surface) 3.5px 6px), var(--danger); }
.cn-um__hatch[data-highlight="off"] { opacity: .28; }
.cn-um__limit { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); pointer-events: none; }
.cn-um__legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 2px; margin: 0 -8px; }
.cn-um__item { display: grid; min-width: 0; justify-items: start; gap: 2px; padding: 8px; border: 0; border-radius: 12px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color .16s cubic-bezier(.22, 1, .36, 1), opacity .16s cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) and (pointer: fine) { .cn-um__item:hover { background: var(--um-muted); } }
.cn-um__item[aria-pressed="true"] { background: var(--um-muted); }
.cn-um__item[data-highlight="off"] { opacity: .45; }
.cn-um__item:focus-visible { outline: 2px solid var(--focus, var(--ink)); outline-offset: -2px; }
.cn-um__head { display: flex; min-width: 0; max-width: 100%; align-items: center; gap: 8px; color: var(--ink-2); font-size: 14px; line-height: 1.4; }
.cn-um__key { display: grid; flex: none; place-items: center; width: 12px; height: 12px; }
.cn-um__key i { color: var(--danger); font-size: 11px; }
.cn-um__swatch { width: 10px; height: 10px; border-radius: 3px; }
.cn-um__swatch[data-index="free"] { background: var(--um-muted); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 28%, transparent); }
.cn-um__label { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-um__value { display: flex; align-items: baseline; gap: 4px; padding-left: 20px; color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1.4; }
.cn-um__value small { color: var(--ink-2); font-size: 14px; font-weight: 400; }
.cn-um__foot { margin: 0; font-size: 12px; color: var(--ink-3); }
.cn-um__foot b { color: var(--ink-2); font-weight: 500; }
/* Chiffres en rouleaux (Arc « ticker ») */
.cn-tk { position: relative; display: inline-flex; align-items: flex-start; white-space: nowrap; font-variant-numeric: tabular-nums; user-select: none; }
.cn-tk__col { --feather: .16em; position: relative; display: inline-block; overflow: hidden; margin-block: calc(var(--feather) * -1); padding-block: var(--feather); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 calc(var(--feather) * 1.5), #000 calc(100% - var(--feather) * 1.5), transparent); mask-image: linear-gradient(to bottom, transparent, #000 calc(var(--feather) * 1.5), #000 calc(100% - var(--feather) * 1.5), transparent); }
.cn-tk__sizer { visibility: hidden; }
.cn-tk__glyph { position: absolute; inset: var(--feather) 0; text-align: center; }
.cn-tk__sym { display: inline-block; }
@media (max-width: 760px) { .cn-um-grid { grid-template-columns: minmax(0, 1fr); } .cn-um { padding: 0 !important; } .cn-um + .cn-um { border-left: 0; border-top: 1px solid var(--line); margin-top: 16px; padding-top: 16px !important; } }
@media (prefers-reduced-motion: reduce) { .cn-um__item, .cn-um__seg, .cn-um__swaptext { transition: none; } }

/* 47. Fiche projet (13/10, workshop) : Reste négatif = bloc entier en rouge (vraie alerte, pas une nuance). */
.cn-kpi.is-danger { background: var(--danger-soft) !important; border-color: color-mix(in oklab, var(--danger) 30%, var(--line)) !important; }
.cn-kpi.is-danger .cn-kpi__value, .cn-kpi.is-danger .cn-kpi__sub { color: var(--danger) !important; }

/* 48. Planning › À planifier (13/10, workshop) : échéance en pastille Arc (bordée, teinte légère). */
.planning-due { display: inline-flex; align-items: center; gap: 6px; height: 22px; margin-top: 8px; padding: 0 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-sunken); font-size: 12px; font-weight: 500; color: var(--ink-2); }
.planning-due i { font-size: 11px; }
.planning-due.is-soon { color: var(--warn); background: var(--warn-soft); border-color: color-mix(in oklab, var(--warn) 27%, var(--line)); }
.planning-due.is-late { color: var(--danger); background: var(--danger-soft); border-color: color-mix(in oklab, var(--danger) 26%, var(--line)); }

/* 49. Planning › Mon temps (13/10, workshop) : feuilles de temps du créneau, validation ✓ / ✕ sur la carte. */
.planning-tab-count { margin-left: 6px; height: 20px; min-width: 20px; padding: 0 7px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--brand-soft, color-mix(in oklab, var(--ink) 9%, transparent)); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; }
.planning-sheets { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.planning-sheets > li + li { border-top: 1px solid var(--line); }
.planning-sheets__row { display: grid; grid-template-columns: 86px 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 16px; font-size: 14px; }
.planning-sheets__date { color: var(--ink-3); }
.planning-sheets__hours { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.planning-sheets__text { display: grid; gap: 2px; color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.planning-sheets__text small { color: var(--ink-3); font-size: 12px; }
.planning-sheets__act { display: inline-flex; gap: 4px; }
.planning-sheets__act button { width: 32px; height: 32px; border-radius: 999px; color: var(--ink-3); font-size: 12px; }
.planning-sheets__act button:hover { background: var(--surface-sunken); color: var(--ink); }
.planning-sheets__edit { display: grid; grid-template-columns: 140px 88px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 10px 12px; }
.planning-sheets__total { display: flex; align-items: baseline; gap: 10px; padding: 10px 16px; font-size: 13px; color: var(--ink-3); background: var(--surface-sunken); }
.planning-sheets__total b { color: var(--ink); font-size: 14px; font-weight: 500; }
.planning-card--decide { box-shadow: 0 0 0 1px color-mix(in oklab, var(--warn) 60%, transparent); border-style: solid !important; }
.planning-decide { display: inline-flex; gap: 4px; }
.planning-card .planning-decide button { width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; border: 1px solid var(--line) !important; background: var(--surface) !important; }
.planning-card .planning-decide .planning-decide__ok { color: var(--success) !important; }
.planning-card .planning-decide .planning-decide__no { color: var(--danger) !important; }
.planning-card .planning-decide button:hover { background: var(--surface-sunken) !important; }
@media (max-width: 560px) { .planning-sheets__row { grid-template-columns: 74px 50px minmax(0, 1fr); } .planning-sheets__act { grid-column: 1 / -1; justify-content: flex-end; } .planning-sheets__edit { grid-template-columns: 1fr 1fr; } }

/* 50. Ticket (13/10, workshop) : question au chef de projet dans la conversation (« terminé ? Oui / Non »), carte Arc neutre. */
.cn-ticket-ask { border: 1px solid var(--line); border-radius: 18px; padding: 16px !important; background: var(--surface-sunken); }
.cn-ticket-ask__bot { flex: none; width: 32px; height: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font-size: 13px; }
.cn-ticket-ask__q { margin: 4px 0 12px; font-weight: 500; color: var(--ink); }
.cn-ticket-ask__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cn-ticket-ask__no { display: inline-flex; flex-wrap: wrap; gap: 8px; }

/* 51. Tâche (13/10, workshop) : sous-tâches, lignes de devis regroupées, déplacement vers un autre projet. */
.cn-task-parent { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-sunken); font-size: 14px; }
.cn-task-parent a { font-weight: 500; color: var(--ink); }
.cn-subtasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cn-subtasks li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "av main main" ". hours badge"; align-items: center; gap: 6px 10px; font-size: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.cn-subtasks li:last-child { border-bottom: 0; padding-bottom: 0; }
.cn-subtasks li > .cn-avatar { grid-area: av; }
.cn-subtasks__main { grid-area: main; display: grid; min-width: 0; }
.cn-subtasks__hours { grid-area: hours; font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.cn-subtasks__hours.is-over { color: var(--danger); font-weight: 500; }
.cn-subtasks li > :last-child { grid-area: badge; justify-self: end; }
.cn-subtasks__main a { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-task-lines { margin-top: 12px; display: grid; gap: 6px; }
.cn-task-lines ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.cn-task-lines li { display: flex; justify-content: space-between; gap: 8px; color: var(--ink-2); }
.cn-task-lines li b { font-weight: 500; color: var(--ink); }
.cn-task-move__entries { list-style: none; margin: 0; padding: 0; max-height: 180px; overflow: auto; font-size: 13px; display: grid; gap: 6px; }

/* 52. Planning (13/10, workshop, lot 8) — charte Arc : favoris en boutons, bascule et vues en cn-tabs, calendrier en
   panneau, cartes rouges et séries en badges pilule, poignée d'étirement discrète. */
.planning-favs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.planning-favs__label { margin-right: 4px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.planning-fav { display: inline-flex; align-items: center; gap: 2px; }
.planning-fav form { margin: 0; }
.planning-fav .cn-btn--icon { color: var(--ink-3); }
.planning-favs__save { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 0 auto; }
.planning-favs__save .cn-input { width: 240px; }
.planning-layout .cn-tab i, .planning-layout .cn-tab svg { font-size: 13px; }
.planning-assignee { margin-top: 12px; }
.planning-assignee .cn-select { width: 100%; }
.planning-split__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
.planning-split__grid .cn-input { width: 100%; }
.planning-grid { border: 1px solid var(--line); border-radius: var(--arc-radius-panel, 26px); background: var(--surface); overflow: hidden; }
.planning-grid__scroll { overflow: auto; max-height: calc(100vh - 220px); }
.planning-grid__table { border-collapse: separate; border-spacing: 0; table-layout: fixed; width: max-content; min-width: 100%; font-size: 13px; }
.planning-grid__table thead th { position: sticky; top: 0; z-index: 2; width: 180px; height: 48px; padding: 0 12px; background: var(--surface); border-bottom: 1px solid var(--line); font-weight: 500; color: var(--ink-2); text-align: left; white-space: nowrap; }
.planning-grid.is-month .planning-grid__table thead th { width: 112px; }
.planning-grid__table thead th.planning-grid__who { width: 196px; }
.planning-grid__table thead th.is-today { color: var(--ink); }
.planning-grid__table thead th.is-today span { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--ink); color: var(--surface); }
.planning-grid__table th.is-off, .planning-grid__cell.is-off { background: var(--surface-sunken); }
.planning-grid__who { position: sticky; left: 0; z-index: 1; background: var(--surface); padding: 12px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-weight: 500; }
.planning-grid__table thead .planning-grid__who { z-index: 3; }
.planning-grid__name { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink); }
.planning-grid__name img, .planning-grid__ini { flex: none; width: 28px; height: 28px; border-radius: 999px; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; background: var(--surface-sunken); color: var(--ink-2); }
.planning-grid__load { display: block; margin-top: 6px; padding-left: 38px; font-size: 12px; font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.planning-grid__load.is-over { color: var(--warn); }
.planning-grid__cell { vertical-align: top; padding: 8px; overflow: hidden; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.planning-grid.is-month .planning-grid__cell { padding: 6px; }
.planning-grid__cell.is-today { background: color-mix(in oklab, var(--ink) 3%, var(--surface)); }
.planning-grid__cell.is-over { box-shadow: inset 0 -2px 0 var(--warn); }
.planning-grid__cards { display: grid; gap: 6px; }
.planning-grid__cards > * { min-width: 0; max-width: 100%; overflow: hidden; }
.planning-grid__cards .planning-card__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planning-grid__cards .planning-card .planning-card__row { flex-wrap: nowrap; }
.planning-grid__tag { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 22px; margin: 0 4px 6px 0; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-sunken); font-size: 11px; font-weight: 500; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planning-grid__tag.is-absence { color: var(--danger); background: var(--danger-soft); border-color: color-mix(in oklab, var(--danger) 25%, var(--line)); }
.planning-grid__tag.is-remote { color: var(--ink-2); }
.planning-grid__day { display: block; margin-top: 6px; font-size: 11px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
.planning-card { position: relative; }
:root .planning-card.planning-card--risk, :root[data-skin="arc"] :is(.cn-main, main, body) .planning-card.planning-card--risk { border-color: color-mix(in oklab, var(--danger) 55%, var(--line)) !important; background: var(--danger-soft) !important; }
.planning-risk__icon { color: var(--danger); font-size: 11px; }
.planning-risk__text { margin: 6px 0 0; font-size: 12px; font-weight: 500; color: var(--danger); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planning-risk { border-color: color-mix(in oklab, var(--danger) 55%, var(--line)) !important; background: var(--danger-soft) !important; }
.planning-risk__label { gap: 6px; margin: 8px 0 0 6px; }
.planning-series { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 11px; font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.planning-stretch { position: absolute; bottom: 6px; right: 6px; width: 24px; height: 20px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; cursor: ew-resize; background: var(--surface); border: 1px solid var(--line); color: var(--ink-3); opacity: 0; transition: opacity var(--arc-fast, 160ms) var(--arc-ease-standard, ease); z-index: 1; }
.planning-card:hover .planning-stretch, .planning-stretch:focus-visible { opacity: 1; }
.planning-stretch:hover { color: var(--ink); border-color: var(--line-control, var(--line)); }
@media (hover: none) { .planning-stretch { opacity: 1; } }
@media (max-width: 720px) { .planning-favs__save { margin-left: 0; width: 100%; } .planning-favs__save .cn-input { flex: 1; width: auto; } .planning-split__grid { grid-template-columns: 1fr; } }

/* 53. Pilotage (13/10, workshop, lot 10) : marge brute (CA net − achats) dans « Chiffres semaine ». */
.cn-an__chip i.is-margin { background: var(--success); }
.cn-an__line.is-margin { stroke: var(--success); stroke-width: 2.5; }

/* 54. Charte Arc pour les ajouts du workshop (Anthony, 13/10 : « rien ne va ») : cartes latérales, formulaires en champs
   libellés (cn-field), actions alignées à droite à taille normale, séparées des champs. */
.cn-side-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; margin: 0 0 12px; }
.cn-side-card__title { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--ink); }
.cn-side-card__lead { margin: 0 0 12px; }
details.cn-side-card > summary { list-style: none; cursor: pointer; margin: 0; }
details.cn-side-card > summary::-webkit-details-marker { display: none; }
details.cn-side-card[open] > summary { margin-bottom: 16px; }
.cn-side-card__chevron { font-size: 12px; color: var(--ink-3); transition: transform var(--arc-standard, 240ms) var(--arc-ease-standard, ease); }
details.cn-side-card[open] .cn-side-card__chevron { transform: rotate(180deg); }
.cn-side-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; margin-top: 16px; padding-top: 20px; border-top: 1px solid var(--line); }
details.cn-side-card .cn-side-form { margin-top: 0; padding-top: 0; border-top: 0; }
.cn-side-form .cn-field { min-width: 0; }
.cn-side-form .cn-field :is(.cn-input, .cn-select) { width: 100%; }
.cn-side-form__full { grid-column: 1 / -1; }
.cn-side-form__label { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.cn-side-form__actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.cn-task-move__entries { padding: 8px 12px; border: 1px solid var(--line); border-radius: 14px; }
.planning-nav { display: grid; gap: 16px; }
.planning-nav__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.planning-nav__period { min-width: 0; }
.planning-nav__title { margin: 0 0 2px; font-size: 16px; font-weight: 500; color: var(--ink); }
.planning-nav__arrows { flex-wrap: nowrap; }
.planning-nav .cn-tabs { display: inline-flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.planning-nav .cn-tabs::-webkit-scrollbar { display: none; }
.cn-recurrence__lead { margin: 0 0 16px; }
.cn-recurrence__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px 12px; }
.cn-recurrence__grid :is(.cn-input, .cn-select) { width: 100%; }
/* Barres d'outils des rapports (Atterrissage, Temps par collaborateur) : champs libellés puis raccourcis, alignés en bas. */
.cn-report-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin: 0 0 var(--space-5, 24px); }
.cn-report-bar .cn-field .cn-input { width: 180px; }
.cn-report-note { margin: 16px var(--space-4, 16px) 20px; }
.cn-linked-company { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cn-linked-company__main { display: grid; gap: 2px; min-width: 0; }
.cn-linked-company__form { margin: 0; padding: 20px var(--space-4, 16px); }
/* Liste de cases à cocher (lignes de devis d'une tâche, 13/10) : carte bordée Arc, lignes de 40 px. */
.cn-checklist { max-height: 13rem; overflow-y: auto; border: 1px solid var(--line); border-radius: 18px; }
.cn-checklist__row { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 16px; font-size: 14px; cursor: pointer; }
.cn-checklist__row + .cn-checklist__row { border-top: 1px solid var(--line); }
.cn-checklist__row:hover { background: var(--surface-sunken); }
.cn-checklist__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.cn-field__hint b { font-weight: 500; }
/* Bandeau d'information neutre (tâche récurrente…) : filet, rayon 18 px, texte secondaire, icône discrète. */
.cn-note-bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-sunken); font-size: 14px; color: var(--ink-2); }
.cn-note-bar i { color: var(--ink-3); }
/* Fenêtre du créneau › Mon temps (13/10) : champs Arc libellés, actions à droite. */
.planning-real-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
.planning-real-form__title { grid-column: 1 / -1; margin: 0; font-size: 15px; font-weight: 500; color: var(--ink); }
.planning-real-form__full { grid-column: 1 / -1; }
.planning-real-form .cn-input { width: 100%; }
:root .planning-real-form textarea.planning-real-form__text, :root[data-skin="arc"] .planning-real-form textarea.planning-real-form__text { min-height: 96px; height: auto; padding: 10px 14px; border-radius: 14px; line-height: 1.5; resize: vertical; }
.planning-real-form__actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
/* Réglages (13/10) : blocs séparés par un filet, champs Arc, curseur monochrome. */
.cn-settings-block { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.cn-settings-block .cn-select { width: 100%; }
.cn-settings-block__value { margin-left: 8px; vertical-align: middle; }
.cn-range { width: 100%; margin: 8px 0 4px; accent-color: var(--ink); }
/* Légende : l'objectif (pointillé) se distingue de la marge brute (trait plein), même ton succès. */
.cn-an__chip i.is-target { background: none; box-shadow: inset 0 0 0 2px var(--success); }

/* 55. Planning › carte (workshop du 13/10, 01:32–01:38) : une seule vue, planifié informatif, temps passé + commentaire. */
.planning-card-dialog .cn-dialog__panel { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; }
.planning-card-dialog__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planning-card-plan { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-sunken); }
.planning-card-plan > div { display: grid; gap: 2px; }
.planning-card-plan b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.planning-card-plan .cn-btn { margin-left: auto; }
.planning-card-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 18px; font-size: 14px; line-height: 1.5; color: var(--ink-2); background: var(--surface); }
.planning-card-note > i { color: var(--ink-3); }
.planning-card-note > span:first-of-type { flex: 1; min-width: 0; }
.planning-card-note--warn { background: var(--warn-soft); }
.planning-card-note--warn > i { color: var(--warn); }
.planning-card-note__actions { display: inline-flex; gap: 8px; margin-left: auto; }
.planning-card-real { display: grid; gap: 16px; }
.planning-card-slot { padding-bottom: 18px; border-bottom: 1px solid var(--line); }

/* 56. Avertissement sous un champ (temps estimé, 13/10) : décollé du champ, icône alignée sur la première ligne. */
.cn-field-warn { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding-left: 4px; font-size: 13px; line-height: 1.5; color: var(--warn); }
.cn-field-warn i { margin-top: 3px; flex: none; }

/* 57. Projet › Facturation (13/10) : échéancier Furious complet (HT, TTC, date butoir), défilement horizontal si étroit. */
.cn-pj-billing { min-width: 0; }
.cn-pj-billing__scroll { overflow-x: auto; }
.cn-pj-billing__scroll .cn-table th, .cn-pj-billing__scroll .cn-table td { white-space: nowrap; }
.planning-card-slot .planning-real-form__actions { flex-wrap: wrap; }
.planning-card-slot .planning-real-form__actions > :first-child { margin-right: auto; }

/* 58. Nouvelle tâche (13/10, Arc UI) : compteur du brief, repères d'estimation. */
.cn-task-brief-count { display: flex; justify-content: space-between; gap: 12px; }
.cn-task-brief-count.is-ok { color: var(--success); }
.cn-task-est-facts { display: flex; flex-wrap: wrap; gap: 12px 24px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-sunken); font-size: 14px; }
.cn-task-est-facts > span { display: grid; gap: 2px; }
.cn-task-est-facts b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.cn-task-est-facts b.is-danger { color: var(--danger); }
/* Modification de tâche (13/10, Arc UI) : avertissement, images jointes. */
.cn-task-flash { margin: 0 0 16px; }
.cn-input--file { height: auto; padding: 6px 10px; }
.cn-task-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.cn-task-images__item { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-sunken); cursor: pointer; }
.cn-task-images__item img { width: 100%; height: 112px; object-fit: cover; }
.cn-task-images__item span { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; color: var(--ink-2); }
.planning-over__text { margin: 6px 0 0; font-size: 12px; font-weight: 500; color: var(--warn); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-input--file { display: flex; align-items: center; height: auto !important; padding: 6px !important; color: var(--ink-2); }
.cn-input--file::file-selector-button { margin-right: 12px; height: 32px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-sunken); color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
/* Fiche tâche : en-tête de carte latérale qui passe à la ligne en colonne étroite ; alerte des sous-tâches (13/10). */
.cn-side-card__head { flex-wrap: wrap; row-gap: 8px; }
[data-subtasks-over] { margin: 0 0 12px; font-size: 13px; }
/* Carte du planning : sous-titre de chaque section (créneau au planning, temps passé), 13/10. */
.planning-card-section { display: grid; gap: 4px; }
.planning-card-section h3 { margin: 0; font-size: 15px; font-weight: 500; color: var(--ink); }
.planning-card-section p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
/* Aperçu de la tâche (13/10) : sous-titres de section en Arc, comme la carte du planning. */
.cn-drawer-subtitle, .ct-h4.cn-drawer-subtitle { margin: 0; font-size: 15px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ink) !important; }

/* 59. Aperçu de la tâche en Arc UI (13/10, « plus de Tailwind nulle part ») : panneau latéral, sous-tâches, sélecteur. */
.cn-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.cn-dw { display: flex; flex: 1; flex-direction: column; min-height: 100%; color: var(--ink); }
.cn-dw__body { flex: 1; display: grid; align-content: start; gap: 24px; padding: 20px; }
.cn-dw__body > section, .cn-dw__pair > section { display: grid; gap: 10px; min-width: 0; }
.cn-dw__head { display: grid; gap: 8px; }
.cn-dw__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cn-dw__parent { margin: 0; font-size: 13px; } .cn-dw__parent a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.cn-dw__title { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.cn-dw__project { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--ink-3); }
.cn-dw__project a { color: var(--ink-2); font-weight: 500; } .cn-dw__project a:hover { color: var(--ink); text-decoration: underline; }
.cn-dw__pair { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .cn-dw__pair { grid-template-columns: 1fr 1fr; } .cn-dw__pair > .is-wide { grid-column: 1 / -1; } }
.cn-dw__person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cn-dw__person-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; }
.cn-dw__person-empty { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px dashed var(--line); border-radius: 999px; color: var(--ink-3); font-size: 12px; }
.cn-dw__due { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; font-size: 14px; }
.cn-dw__due b { font-weight: 500; } .cn-dw__due span { font-size: 12px; color: var(--ink-3); }
.cn-dw .is-danger { color: var(--danger) !important; } .cn-dw .is-warn { color: var(--warn); }
.cn-dw__card { padding: 12px 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-sunken); }
.cn-dw__envelope { display: flex; align-items: flex-start; gap: 8px; }
.cn-dw__envelope p { flex: 1; min-width: 0; margin: 0; font-size: 14px; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cn-dw__empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.cn-dw__section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cn-dw__over { font-size: 12px; font-weight: 500; }
.cn-dw__bar { position: relative; display: flex; height: 10px; overflow: hidden; border-radius: 999px; background: var(--surface-sunken); border: 1px solid var(--line); }
.cn-dw__bar-done { background: var(--success); } .cn-dw__bar-planned { background: color-mix(in oklab, var(--ink) 40%, transparent); }
.cn-dw__bar.is-warn .cn-dw__bar-done { background: var(--warn); } .cn-dw__bar.is-warn .cn-dw__bar-planned { background: color-mix(in oklab, var(--warn) 45%, transparent); }
.cn-dw__bar.is-danger .cn-dw__bar-done { background: var(--danger); } .cn-dw__bar.is-danger .cn-dw__bar-planned { background: color-mix(in oklab, var(--danger) 45%, transparent); }
.cn-dw__bar-mark { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); }
.cn-dw__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cn-dw__facts.is-warn, .cn-dw__facts.is-danger { color: var(--ink-3) !important; }
.cn-dw__facts > span { display: inline-flex; align-items: center; gap: 6px; }
.cn-dw__facts b { font-weight: 500; color: var(--ink); }
.cn-dw__dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; }
.cn-dw__dot.is-planned { background: color-mix(in oklab, var(--ink) 40%, transparent); } .cn-dw__dot.is-done { background: var(--success); }
.cn-dw__list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.cn-dw__list > li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 13px; }
.cn-dw__list > li + li { border-top: 1px solid var(--line); }
.cn-dw__list > li.is-past { opacity: .6; }
.cn-dw__list-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cn-dw__list-main a { color: var(--ink); font-weight: 500; } .cn-dw__list-main a:hover { text-decoration: underline; }
.cn-dw__list-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.cn-dw__list-date { width: 64px; flex: none; color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.cn-dw__list-num { flex: none; font-weight: 500; font-variant-numeric: tabular-nums; }
.cn-dw__desc { position: relative; }
.cn-dw__desc-body { max-height: 160px; overflow: hidden; font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
.cn-dw__desc.is-open .cn-dw__desc-body { max-height: none; }
.cn-dw__desc-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(to top, var(--surface), transparent); pointer-events: none; }
.cn-dw__foot { position: sticky; bottom: 0; z-index: 10; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--surface); }
.cn-picker { display: grid; gap: 8px; margin-top: 4px; }
.cn-picker__list { list-style: none; margin: 0; padding: 4px; max-height: 224px; overflow-y: auto; border: 1px solid var(--line); border-radius: 18px; }
.cn-picker__group { padding: 8px 10px 4px; font-size: 12px; color: var(--ink-3); }
.cn-picker__group.is-sep { border-top: 1px solid var(--line); margin-top: 4px; }
.cn-picker__option { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 12px; font-size: 14px; color: var(--ink-2); text-align: left; background: transparent; }
.cn-picker__option:hover { background: var(--surface-sunken); color: var(--ink); }
.cn-picker__option.is-selected { background: var(--surface-sunken); color: var(--ink); font-weight: 500; }
.cn-picker__actions { display: flex; justify-content: flex-end; gap: 8px; }

/* 60. Composants partagés en Arc UI (13/10, « plus de Tailwind ») : suppression, recherche, état vide, aide. */
.cn-inline { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.cn-searchbar { position: relative; display: flex; align-items: center; min-width: 0; }
.cn-searchbar .cn-input { width: 100%; padding-right: 40px; }
.cn-searchbar > button { position: absolute; right: 6px; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; color: var(--ink-3); background: transparent; }
.cn-searchbar > button:hover { color: var(--ink); background: var(--surface-sunken); }
.cn-emptystate { display: grid; justify-items: center; gap: 8px; padding: 48px 16px; text-align: center; }
.cn-emptystate__icon { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-sunken); color: var(--ink-3); font-size: 20px; }
.cn-emptystate__title { margin: 0; font-size: 16px; font-weight: 500; color: var(--ink); }
.cn-emptystate__text { max-width: 28rem; margin: 0 0 12px; font-size: 14px; color: var(--ink-3); }
.cn-notes__form { display: grid; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
:root .cn-notes__form textarea.cn-notes__input { height: auto; min-height: 72px; padding: 10px 14px; border-radius: 14px; resize: vertical; }
.cn-notes__actions { display: flex; justify-content: flex-end; }
.cn-notes { list-style: none; margin: 0; padding: 0; }
.cn-notes > li { display: flex; align-items: flex-start; gap: 8px; padding: 12px 0; }
.cn-notes > li + li { border-top: 1px solid var(--line); }
.cn-notes > li.is-pinned .cn-notes__main > .cn-meta { color: var(--warn); }
.cn-notes__main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.cn-notes__main p { margin: 0; font-size: 14px; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.cn-notes__act { display: inline-flex; gap: 2px; }
.cn-notes__act form { margin: 0; }
.cn-notes__empty { padding: 16px 0; text-align: center; }
.cn-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cn-tag { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 6px 0 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--ink-2); }
.cn-tag__dot { width: 8px; height: 8px; border-radius: 999px; }
.cn-tag__remove { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 999px; color: var(--ink-3); font-size: 10px; background: transparent; }
.cn-tag__remove:hover { color: var(--ink); background: var(--surface-sunken); }
.cn-tags__add { display: flex; align-items: center; gap: 8px; }
.cn-tags__add .cn-select { flex: 1; }
.cn-combo { position: relative; min-width: 0; }
.cn-combo__field { position: relative; }
.cn-combo__field .cn-input { width: 100%; padding-right: 40px; }
.cn-combo__clear { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; color: var(--ink-3); background: transparent; }
.cn-combo__clear:hover { color: var(--ink); background: var(--surface-sunken); }
.cn-combo__pop { position: absolute; z-index: 40; left: 0; right: 0; margin-top: 6px; padding: 4px; max-height: 280px; overflow-y: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-overlay); }
.cn-combo__note { padding: 10px 12px; font-size: 14px; color: var(--ink-3); }
.cn-combo__option { display: grid; gap: 2px; width: 100%; padding: 8px 12px; border-radius: 12px; text-align: left; background: transparent; }
.cn-combo__option:hover, .cn-combo__option.is-active { background: var(--surface-sunken); }
.cn-combo__label { font-size: 14px; font-weight: 500; color: var(--ink); }
.cn-combo__sub { font-size: 12px; color: var(--ink-3); }
.cn-ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }