/* =============================================================
   Charte « codexr » — fond lavande doux, CTA noir / gris / blanc,
   accent orangé-maron réservé aux éléments stratégiques.

   Chargée en dernier : elle recouvre pgone-theme.css et
   theme-ai-harness.css sans les modifier. Les gabarits de vues
   restent inchangés.
   ============================================================= */

:root {
  /* Palette */
  --cx-page: #efeee6;
  --cx-page-top: #f9f8f2;
  --cx-surface: #ffffff;
  --cx-surface-2: #f9f8f2;
  --cx-surface-3: #efeee6;
  --cx-ink: #272727;
  --cx-secondary: #474747;
  --cx-muted: #6b6b6b;
  --cx-line: rgba(39, 39, 39, 0.12);
  --cx-line-soft: rgba(39, 39, 39, 0.07);
  --cx-line-strong: rgba(39, 39, 39, 0.26);
  --cx-accent: #f0ffbe;
  --cx-accent-strong: #d8f099;
  --cx-accent-soft: #f7ffd6;
  --cx-accent-line: #d8f099;
  --cx-ink-accent: #4a5a1f;
  --cx-shadow: 0 1px 2px rgba(39, 39, 39, 0.04), 0 10px 28px rgba(39, 39, 39, 0.06);
  --cx-shadow-soft: 0 1px 2px rgba(39, 39, 39, 0.04);
  --cx-radius: 18px;
  --cx-radius-sm: 12px;
}

/* Le thème « ai-harness » force plusieurs variables : on les reprend
   avec la même priorité pour garder la palette cohérente. */
:root[data-density='ai-harness'] {
  --navy: var(--cx-ink) !important;
  --blue: var(--cx-secondary) !important;
  --muted: var(--cx-muted) !important;
  --orange: var(--cx-ink-accent) !important;
  --purple: var(--cx-secondary) !important;
  --violet: var(--cx-secondary) !important;
  --primary: var(--cx-ink) !important;
  --indigo: var(--cx-secondary) !important;
  --info: var(--cx-secondary) !important;
  --info-bg: var(--cx-surface-2) !important;
  --line: var(--cx-line);
  --green: #2c8a5b;

  --page: var(--cx-page);
  --surface: var(--cx-surface);
  --surface-2: var(--cx-surface-2);
  --text: var(--cx-ink);
  --text-muted: var(--cx-secondary);
  --text-faint: var(--cx-muted);

  --accent: var(--cx-ink);
  --accent-soft: var(--cx-surface-2);
  --accent-strong: #000000;

  --pg-accent: var(--cx-ink-accent) !important;
  --pg-accent-soft: var(--cx-accent-soft) !important;
  --pg-accent-border: var(--cx-accent-line) !important;
  --pg-page: var(--cx-page);
  --pg-surface: var(--cx-surface);
  --pg-border: var(--cx-line);
  --pg-border-soft: var(--cx-line-soft);
  --pg-ink: var(--cx-ink);
  --pg-secondary: var(--cx-secondary);
  --pg-muted: var(--cx-muted);
  --pg-shadow: var(--cx-shadow);
  --action: var(--cx-ink);
}

/* ---------- Fond ---------- */
:root[data-density='ai-harness']:not([data-theme='dark']) body {
  background:
    radial-gradient(1100px 520px at 88% -12%, rgba(255, 255, 255, 0.95), transparent 62%),
    linear-gradient(180deg, var(--cx-page-top), var(--cx-page) 58%, #e9e7f0);
  color: var(--cx-ink);
}

/* ---------- Cartes ---------- */
:root[data-density='ai-harness'] .card {
  background: var(--cx-surface);
  border: 1px solid var(--cx-line-soft);
  border-radius: var(--cx-radius);
  box-shadow: var(--cx-shadow-soft);
}

:root[data-density='ai-harness'] .card-heading h2 {
  color: var(--cx-ink);
  letter-spacing: 0.01em;
}

:root[data-density='ai-harness'] .right-panel {
  background: var(--cx-surface);
  border-left: 1px solid var(--cx-line-soft);
}

:root[data-density='ai-harness'] .dossier {
  background: rgba(255, 255, 255, 0.72);
  border-right: 1px solid var(--cx-line-soft);
}

/* ---------- Boutons : noir / gris / blanc ----------
   Le thème « ai-harness » impose ses couleurs de boutons en `!important` :
   la charte doit reprendre la même priorité, sans quoi le mix noir / gris /
   blanc de la reference resterait invisible. */
:root[data-density='ai-harness'] .btn,
:root[data-density='ai-harness'] .btn.quick {
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid var(--cx-line) !important;
  background: var(--cx-surface) !important;
  color: var(--cx-ink) !important;
  box-shadow: none !important;
}

:root[data-density='ai-harness'] .btn:hover,
:root[data-density='ai-harness'] .btn.quick:hover {
  background: var(--cx-surface-2) !important;
  border-color: rgba(23, 23, 27, 0.16) !important;
  color: var(--cx-ink) !important;
}

:root[data-density='ai-harness'] .btn.soft {
  background: var(--cx-surface-2) !important;
  border-color: transparent !important;
  color: var(--cx-secondary) !important;
}

:root[data-density='ai-harness'] .btn.soft:hover {
  background: #e9e8ef !important;
  color: var(--cx-ink) !important;
}

/* Action principale : noir */
:root[data-density='ai-harness'] .btn.primary,
:root[data-density='ai-harness'] .btn.quick.primary {
  background: var(--cx-accent) !important;
  border-color: var(--cx-accent) !important;
  color: var(--cx-ink) !important;
  box-shadow: none !important;
}

:root[data-density='ai-harness'] .btn.primary:hover,
:root[data-density='ai-harness'] .btn.quick.primary:hover {
  background: var(--cx-accent-strong) !important;
  border-color: var(--cx-accent-strong) !important;
  color: var(--cx-ink) !important;
}

:root[data-density='ai-harness'] .btn.primary svg,
:root[data-density='ai-harness'] .btn.primary .icon,
:root[data-density='ai-harness'] .btn.quick svg,
:root[data-density='ai-harness'] .btn.quick .icon {
  color: var(--cx-ink) !important;
  fill: none !important;
}

/* Action strategique : orangé-maron */
:root[data-density='ai-harness'] .btn.primary.top-create,
:root[data-density='ai-harness'] .btn.primary.sidebar-create,
:root[data-density='ai-harness'] .btn.quote-reference-create,
:root[data-density='ai-harness'] .btn.quick.quick-action-orange {
  background: var(--cx-accent) !important;
  border-color: var(--cx-accent) !important;
  color: var(--cx-ink) !important;
}

:root[data-density='ai-harness'] .btn.primary.top-create:hover,
:root[data-density='ai-harness'] .btn.primary.sidebar-create:hover,
:root[data-density='ai-harness'] .btn.quote-reference-create:hover,
:root[data-density='ai-harness'] .btn.quick.quick-action-orange:hover {
  background: var(--cx-accent-strong) !important;
  border-color: var(--cx-accent-strong) !important;
  color: var(--cx-ink) !important;
}

/* Actions secondaires : neutres, jamais violet ni bleu */
:root[data-density='ai-harness'] .btn.quick.quick-action-purple,
:root[data-density='ai-harness'] .btn.quick.quick-action-blue,
:root[data-density='ai-harness'] .purple-button {
  background: var(--cx-surface) !important;
  border-color: var(--cx-line) !important;
  color: var(--cx-ink) !important;
}

:root[data-density='ai-harness'] .btn.quick.quick-action-purple:hover,
:root[data-density='ai-harness'] .btn.quick.quick-action-blue:hover,
:root[data-density='ai-harness'] .purple-button:hover {
  background: var(--cx-surface-2) !important;
  color: var(--cx-ink) !important;
}

:root[data-density='ai-harness'] .right-panel .btn.quick.quick-action-orange:not(.primary) {
  background: var(--cx-surface) !important;
  border-color: var(--cx-line) !important;
  color: var(--cx-ink) !important;
}
:root[data-density='ai-harness'] .right-panel .btn.quick.quick-action-orange:not(.primary):hover {
  background: var(--cx-surface-2) !important;
  color: var(--cx-ink) !important;
}

/* Le statut d'enregistrement habite l'en-tete de la fiche. */
:root[data-density='ai-harness'] .record-detail-identity .record-save-status {
  margin-top: 8px;
}

:root[data-density='ai-harness'] .btn.danger {
  background: #fbeeed !important;
  border-color: rgba(184, 84, 80, 0.18) !important;
  color: #b85450 !important;
}

:root[data-density='ai-harness'] .btn:disabled,
:root[data-density='ai-harness'] .btn[disabled] {
  background: var(--cx-surface-2) !important;
  border-color: transparent !important;
  color: var(--cx-muted) !important;
  cursor: not-allowed;
}

/* Un en-tete triable reste un libelle : il ne doit pas ressembler a un bouton. */
:root[data-density='ai-harness'] .btn.table-sort {
  min-height: 22px;
  padding: 0;
  border-radius: 0;
  background: transparent !important;
  border-color: transparent !important;
  color: inherit !important;
}

:root[data-density='ai-harness'] .btn.table-sort:hover {
  background: transparent !important;
  color: var(--cx-ink) !important;
}

/* ---------- Navigation des modules : pastille noire active ---------- */
:root[data-density='ai-harness']:not([data-theme='dark']) .modules {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

:root[data-density='ai-harness']:not([data-theme='dark'])
  .modules
  > :is(.ai-harness-brand, .ai-harness-module-links, .ai-harness-shortcuts, .ai-harness-rest) {
  border: 0;
  border-radius: 999px;
  background: var(--cx-surface);
  box-shadow: var(--cx-shadow-soft);
}

:root[data-density='ai-harness']:not([data-theme='dark'])
  .modules
  .ai-harness-module-links
  .module-group
  > button:first-of-type {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--cx-secondary);
  padding-inline: 12px;
}

:root[data-density='ai-harness']:not([data-theme='dark'])
  .modules
  .ai-harness-module-links
  .module-group
  > button:first-of-type:hover {
  background: var(--cx-surface-2);
  color: var(--cx-ink);
}

:root[data-density='ai-harness']:not([data-theme='dark'])
  .modules
  .ai-harness-module-links
  .module-group
  > button.active {
  background: var(--cx-accent);
  color: var(--cx-ink);
  box-shadow: none;
  font-weight: 600;
}

:root[data-density='ai-harness']:not([data-theme='dark'])
  .modules
  .ai-harness-module-links
  .module-group
  > button[aria-expanded='true'] {
  background: var(--cx-accent);
  color: var(--cx-ink);
}
:root[data-density='ai-harness']:not([data-theme='dark'])
  .modules
  .ai-harness-module-links
  .module-group
  > button.active[aria-expanded='true'] {
  background: var(--cx-accent);
  color: var(--cx-ink);
}

:root[data-density='ai-harness']:not([data-theme='dark'])
  .modules
  .ai-harness-module-links
  .module-group
  > button.active
  svg,
:root[data-density='ai-harness']:not([data-theme='dark'])
  .modules
  .ai-harness-module-links
  .module-group
  > button[aria-expanded='true']
  svg {
  color: inherit;
  stroke: currentColor;
}

:root[data-density='ai-harness']:not([data-theme='dark'])
  .modules
  .ai-harness-module-links
  .module-group
  > button.active::after,
:root[data-density='ai-harness']:not([data-theme='dark'])
  .modules
  .ai-harness-module-links
  .module-group
  > button[aria-expanded='true']::after {
  display: none;
}

:root[data-density='ai-harness'] .module-submenu {
  background: var(--cx-surface);
  border: 1px solid var(--cx-line-soft);
  border-radius: var(--cx-radius-sm);
  box-shadow: var(--cx-shadow);
}

:root[data-density='ai-harness'] .module-submenu > a.active,
:root[data-density='ai-harness'] .dossier nav > a.active {
  background: var(--cx-surface-2);
  border-color: transparent;
  color: var(--cx-ink);
}

:root[data-density='ai-harness'] .module-submenu > a.active::before,
:root[data-density='ai-harness'] .dossier nav > a.active::before {
  background: var(--cx-ink);
}

/* ---------- Onglets de fiche : accent sur l'onglet actif ---------- */
:root[data-density='ai-harness'] .tabs {
  background: transparent;
  border-color: var(--cx-line-soft);
}

:root[data-density='ai-harness'] .tabs > button {
  color: var(--cx-muted);
  border-right-color: transparent;
}

:root[data-density='ai-harness'] .tabs > button:hover {
  color: var(--cx-ink);
}

:root[data-density='ai-harness'] .tabs > button.active,
:root[data-density='ai-harness'] .tabs > button[aria-current='page'] {
  color: var(--cx-ink);
  background: transparent;
  border-bottom: 2px solid var(--cx-ink);
}

/* ---------- Chiffres et libellés ---------- */
:root[data-density='ai-harness']
  .record-header-amount
  .record-header-main
  > .opportunity-inline-value,
:root[data-density='ai-harness'] .stat strong {
  color: var(--cx-ink);
  font-weight: 650;
  letter-spacing: -0.02em;
}

:root[data-density='ai-harness'] .stat small {
  color: var(--cx-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---------- Champs ---------- */
:root[data-density='ai-harness'] input,
:root[data-density='ai-harness'] select,
:root[data-density='ai-harness'] textarea {
  background: var(--cx-surface);
  border-color: var(--cx-line);
  border-radius: 10px;
  color: var(--cx-ink);
}

:root[data-density='ai-harness'] .global-search {
  background: var(--cx-surface);
  border: 1px solid var(--cx-line);
  border-radius: 999px;
}

:root[data-density='ai-harness'] .data-table th {
  background: var(--cx-surface-2);
  color: var(--cx-muted);
}

:root[data-density='ai-harness'] .data-table tbody tr:hover:not(.group-row) {
  background: #f7f6fa;
}

/* ---------- Accent stratégique : pastilles, badges, montants ---------- */
:root[data-density='ai-harness'] .record-header-amount .record-header-main > strong {
  color: var(--cx-ink-accent);
  font-weight: 650;
  letter-spacing: -0.01em;
}

:root[data-density='ai-harness'] .quick-action-orange .icon,
:root[data-density='ai-harness'] .btn.quick.quick-action-orange .icon {
  color: #fff;
}

:root[data-density='ai-harness'] .quote-section-row td {
  background: var(--cx-surface-2);
  color: var(--cx-ink);
  border-top: 1px solid var(--cx-line-soft);
}

/* Les en-tetes de section du devis restent neutres : l'orange reste
   reserve aux elements strategiques. */
:root[data-density='ai-harness'] body[data-view='quote'] .quote-lines .group-row td {
  background: var(--cx-surface-2);
  color: var(--cx-ink);
}

:root[data-density='ai-harness'] body[data-view='quote'] .quote-lines .group-row td strong {
  color: var(--cx-ink);
}

:root[data-density='ai-harness'] .data-table tbody tr:hover:not(.group-row) {
  background: #f7f6fa;
}

:root[data-density='ai-harness'] .quote-lines .quote-section-number {
  color: var(--cx-ink-accent);
}

:root[data-density='ai-harness'] .status-pill.tone-warn {
  background: var(--cx-accent-soft);
  color: var(--cx-ink-accent);
  border: 1px solid var(--cx-accent-line);
}

:root[data-density='ai-harness'] .status-pill.tone-success {
  background: #eef6f1;
  color: #2c8a5b;
  border: 1px solid rgba(44, 138, 91, 0.18);
}

:root[data-density='ai-harness'] .status-pill.tone-danger {
  background: #fbeeed;
  color: #b85450;
  border: 1px solid rgba(184, 84, 80, 0.18);
}

:root[data-density='ai-harness'] .status-pill.tone-info {
  background: var(--cx-surface-2);
  color: var(--cx-secondary);
  border: 1px solid var(--cx-line-soft);
}

/* Un module parent dont un module enfant est aussi actif reste discret :
   seule la pastille du module réellement ouvert passe au noir. */
:root[data-density='ai-harness']:not([data-theme='dark'])
  .modules
  .ai-harness-module-links
  .module-group:has(~ .module-group .active)
  > button.active {
  background: var(--cx-surface-2);
  color: var(--cx-ink);
}

:root[data-density='ai-harness']:not([data-theme='dark'])
  .modules
  .ai-harness-module-links
  .module-group:has(~ .module-group .active)
  > button.active
  svg {
  color: inherit;
}

/* ---------- Cartes de chiffres ---------- */
:root[data-density='ai-harness'] .quote-overview-metric {
  padding: 18px 20px;
  border-radius: var(--cx-radius);
}

:root[data-density='ai-harness'] .quote-overview-metric h2 {
  font-size: 11px;
  font-weight: 600;
  color: var(--cx-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

:root[data-density='ai-harness'] .quote-overview-metric strong {
  display: block;
  margin: 10px 0 2px;
  font-size: 30px;
  font-weight: 650;
  letter-spacing: -0.025em;
  color: var(--cx-ink);
}

:root[data-density='ai-harness'] .quote-overview-metric[data-quote-overview='total'] strong {
  color: var(--cx-ink-accent);
}

:root[data-density='ai-harness'] .quote-overview-metric p {
  color: var(--cx-muted);
  font-size: 12px;
}

:root[data-density='ai-harness'] .stat strong {
  font-size: 22px;
}

:root[data-density='ai-harness'] .stat small {
  font-size: 10px;
  font-weight: 600;
}

/* ---------- Mode sombre : mêmes principes ---------- */
:root[data-theme='dark'][data-density='ai-harness'] {
  --cx-ink: #f9f8f2;
  --cx-secondary: #d6d5cc;
  --cx-muted: #a3a299;
  --cx-line: rgba(249, 248, 242, 0.14);
  --cx-line-soft: rgba(249, 248, 242, 0.08);
  --cx-line-strong: rgba(249, 248, 242, 0.28);
  --cx-surface: #303030;
  --cx-surface-2: #393937;
  --cx-surface-3: #43433f;
  --cx-accent: #f0ffbe;
  --cx-accent-strong: #d8f099;
  --cx-accent-soft: #3b3b2c;
  --cx-accent-line: #6d7839;
  --cx-ink-accent: #d8f099;

  --page: #272727;
  --surface: var(--cx-surface);
  --surface-2: var(--cx-surface-2);
  --text: var(--cx-ink);
  --text-muted: var(--cx-secondary);
  --text-faint: var(--cx-muted);
  --line: var(--cx-line);
  --accent: var(--cx-ink);
  --accent-soft: var(--cx-surface-2);
  --accent-strong: #ffffff;
  --pg-page: #101014;
  --pg-surface: var(--cx-surface);
  --pg-border: var(--cx-line);
  --pg-ink: var(--cx-ink);
  --action: var(--cx-ink);
}

:root[data-theme='dark'][data-density='ai-harness'] body {
  background:
    radial-gradient(1100px 520px at 88% -12%, rgba(255, 255, 255, 0.06), transparent 62%),
    linear-gradient(180deg, #15151a, #101014 60%);
}

:root[data-theme='dark'][data-density='ai-harness'] .card {
  background: var(--surface);
  border-color: var(--line);
}

:root[data-theme='dark'][data-density='ai-harness']
  .modules
  > :is(.ai-harness-brand, .ai-harness-module-links, .ai-harness-shortcuts, .ai-harness-rest) {
  border: 0;
  border-radius: 999px;
  background: var(--cx-surface);
  box-shadow: none;
}

:root[data-theme='dark'][data-density='ai-harness'] .btn.primary,
:root[data-theme='dark'][data-density='ai-harness'] .btn.quick.primary {
  background: var(--cx-ink);
  border-color: var(--cx-ink);
  color: #17171b;
}

:root[data-theme='dark'][data-density='ai-harness']
  .modules
  .ai-harness-module-links
  .module-group
  > button.active {
  background: var(--cx-accent);
  color: var(--cx-ink);
  box-shadow: none;
  font-weight: 600;
}

:root[data-theme='dark'][data-density='ai-harness']
  .modules
  .ai-harness-module-links
  .module-group
  > button[aria-expanded='true'] {
  background: var(--cx-accent);
  color: var(--cx-ink);
}

/* =============================================================
   Passe unslop — 3 novembre 2026
   Coquille et couche de design communes : une grille de 4 px, une
   seule rampe neutre, un accent unique, une seule taille de
   pictogramme, des libelles en casse de phrase, des pastilles
   muettes. Direction : dense, sobre, exact. Le monde reste celui
   du chantier : fond papier froid, orange de securite en accent.
   ============================================================= */

:root[data-density='ai-harness']:not([data-theme='dark']) {
  /* Rampe chaude : le fond se lit comme un papier, pas comme un gris. */
  --cx-page: #efeee6;
  --cx-page-top: #f9f8f2;
  --cx-surface-2: #f9f8f2;
  --cx-surface-3: #efeee6;
  --cx-line: rgba(39, 39, 39, 0.12);
  --cx-line-soft: rgba(39, 39, 39, 0.07);

  /* Un seul accent, l'anise, reserve aux elements strategiques. */
  --cx-ink-accent: #4a5a1f;

  /* Echelle de rayons : contours 8, cartes 16, panneaux 16.
     Les pastilles restent aux actions, plus aux champs ni aux chips. */
  --cx-radius: 16px;
  --cx-radius-sm: 12px;
  --cx-radius-control: 8px;

  /* Un seul rythme et une seule courbe pour toute l'interface. */
  --cx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cx-dur-fast: 140ms;
  --cx-dur-slow: 220ms;
}

/* ---------- Marque : une seule couleur, pas de volume ---------- */
:root[data-density='ai-harness'] .brand > svg path {
  fill: var(--cx-secondary);
}
:root[data-theme='dark'][data-density='ai-harness'] .brand > svg path {
  fill: var(--cx-accent);
}

/* ---------- Finitions : casse de phrase et graisses sur toute la coquille ---------- */
:root[data-density='ai-harness']
  :is(
    .dossier > h2,
    .right-panel h2,
    .right-panel h3,
    .right-panel-title,
    .card-heading h2,
    .tab-section-title,
    .mobile-menu-heading,
    .ai-harness-shortcuts strong,
    .module-submenu strong,
    .stat small,
    .quote-overview-metric h2,
    .data-table th,
    .data-table th span
  ) {
  text-transform: none !important;
  letter-spacing: 0.01em !important;
}

:root[data-density='ai-harness']
  :is(
    .dossier > h2,
    .right-panel h2,
    .right-panel h3,
    .right-panel-title,
    .card-heading h2,
    .tab-section-title,
    .mobile-menu-heading,
    .ai-harness-shortcuts strong,
    .module-submenu strong,
    .data-table th,
    .data-table th span,
    .num,
    .record-heading h1 b,
    .dossier nav > a b,
    .commercial-metrics dd b,
    .toolbar .btn
  ) {
  font-weight: 600;
}

:root[data-density='ai-harness'] .badge {
  font-size: 12px !important;
}

:root[data-density='ai-harness'] .quote-owner-avatar {
  font-size: 11px;
}

/* La barre de modules tient dans la fenetre : moins de.padding, memes
   colonnes, memes pictogrammes. */
:root[data-density='ai-harness'] .ai-harness-module-links .module-group > button {
  padding-inline: 8px;
}

/* ---------- Poids : la hierarchie vient de la taille et de la couleur ---------- */
:root[data-density='ai-harness']
  :is(
    .toolbar,
    .tabs,
    .card,
    .details,
    .dossier,
    .right-panel,
    .record-header,
    .quote-reference-summary,
    .collection-summary,
    .table-scroll,
    .module-submenu
  )
  :is(strong, b, h1, h2, h3, h4, a) {
  font-weight: 600;
}

:root[data-density='ai-harness'] main :is(a, button).active {
  font-weight: 600;
}

:root[data-density='ai-harness'] :is(b, strong) {
  font-weight: 600;
}

:root[data-density='ai-harness'] .data-table a {
  font-weight: 600;
}

/* ---------- Taille plancher du texte ---------- */
:root[data-density='ai-harness']
  :is(
    .company-name,
    .sidebar-profile b,
    .sidebar-search span,
    .ai-harness-shortcuts strong,
    .quote-invoice-state,
    .page-number,
    .quote-reference-chip,
    .dossier-client small
  ) {
  font-size: 12px !important;
}

:root[data-density='ai-harness'] .quote-owner-avatar {
  font-size: 11px !important;
}

:root[data-density='ai-harness'] kbd {
  font-size: 11px !important;
}

/* ---------- La barre de modules tient dans la fenetre ---------- */
:root[data-density='ai-harness']:not([data-theme='dark'])
  .modules
  .ai-harness-module-links
  .module-group
  > button:first-of-type {
  padding-inline: 8px;
}

/* ---------- Mode sombre : liens lisibles, accent rare ---------- */
:root[data-theme='dark'][data-density='ai-harness'] {
  --purple: var(--cx-secondary) !important;
  --indigo: var(--cx-secondary) !important;
}

:root[data-theme='dark'][data-density='ai-harness'] .data-table a,
:root[data-theme='dark'][data-density='ai-harness'] .quote-reference-summary a {
  color: var(--cx-ink);
}

:root[data-theme='dark'][data-density='ai-harness'] .data-table a:hover {
  color: var(--cx-accent);
}

/* ---------- Fond : plat, sans lavis ni degrade ---------- */
:root[data-density='ai-harness']:not([data-theme='dark']) body {
  background: var(--cx-page);
  color: var(--cx-ink);
}

:root[data-theme='dark'][data-density='ai-harness'] body {
  background: #101014;
  color: var(--cx-ink);
}

:root[data-density='ai-harness'] .dossier {
  background: var(--cx-surface-2);
}

/* ---------- Boutons : aplats, jamais de degrade de teinte ---------- */
:root[data-density='ai-harness'] .btn,
:root[data-density='ai-harness'] .btn.quick,
:root[data-density='ai-harness'] .btn.quick.primary,
:root[data-density='ai-harness'] .btn.primary {
  background-image: none !important;
}

:root[data-density='ai-harness'] .btn.quick > .icon {
  width: 16px;
  height: 16px;
  color: inherit;
  opacity: 0.75;
  margin-right: 8px;
}

:root[data-density='ai-harness'] .btn.quick > .icon.quick-arrow {
  width: 12px;
  height: 12px;
  margin-right: 0;
  margin-left: auto;
  opacity: 0.55;
}

/* ---------- Pastilles d'etat : chip muet + petite pastille de sens ---------- */
:root[data-density='ai-harness'] .badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border: 1px solid var(--cx-line-soft);
  border-radius: 6px;
  background: var(--cx-surface-2);
  color: var(--cx-secondary);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}

:root[data-density='ai-harness'] .badge .icon {
  width: 13px;
  height: 13px;
  flex: none;
  color: var(--cx-muted);
}

:root[data-density='ai-harness'] .badge.green .icon {
  color: #2c8a5b;
}
:root[data-density='ai-harness'] .badge.red .icon {
  color: #b85450;
}
:root[data-density='ai-harness'] .badge.yellow .icon {
  color: var(--cx-accent);
}
:root[data-density='ai-harness'] .badge.blue .icon {
  color: #3f6f9e;
}
:root[data-density='ai-harness'] .badge.purple .icon {
  color: #6d5fa6;
}

:root[data-density='ai-harness'] .badge:not(:has(.icon))::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--cx-muted);
}

:root[data-density='ai-harness'] .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--cx-surface-2);
  border: 1px solid var(--cx-line-soft);
  color: var(--cx-secondary);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}

:root[data-density='ai-harness'] .status-pill .icon {
  width: 13px;
  height: 13px;
  flex: none;
}

:root[data-density='ai-harness'] .status-pill.tone-success {
  background: var(--cx-surface-2);
  border-color: var(--cx-line-soft);
  color: #2c8a5b;
}
:root[data-density='ai-harness'] .status-pill.tone-danger {
  background: var(--cx-surface-2);
  border-color: var(--cx-line-soft);
  color: #b85450;
}
:root[data-density='ai-harness'] .status-pill.tone-warn {
  background: var(--cx-surface-2);
  border-color: var(--cx-line-soft);
  color: var(--cx-accent-strong);
}
:root[data-density='ai-harness'] .status-pill.tone-info {
  background: var(--cx-surface-2);
  border-color: var(--cx-line-soft);
  color: var(--cx-secondary);
}

/* ---------- Casse de phrase : plus de capitales espacees ---------- */
:root[data-density='ai-harness']
  :is(
    .right-panel h2,
    .right-panel h3,
    .data-table th,
    .data-table th span,
    .data-table th .btn.table-sort,
    .dossier-client,
    .dossier-client small,
    .ai-harness-shortcuts strong,
    .mobile-menu-heading,
    .collection-column-heading-content,
    .quote-overview-metric h2,
    .stat small
  ) {
  text-transform: none;
  letter-spacing: 0.01em;
}

/* ---------- Typographie : deux graisses, jamais 900 ---------- */
:root[data-density='ai-harness']
  :is(
    .data-table th,
    .data-table th span,
    .data-table th .btn.table-sort,
    .quote-column-label,
    .right-panel h2,
    .right-panel h3
  ) {
  font-size: 12px;
  font-weight: 600;
  color: var(--cx-muted);
}

:root[data-density='ai-harness']
  :is(
    .dossier-client,
    .dossier nav > a b,
    .sidebar-profile b,
    .company-name,
    .sidebar-search span,
    .ai-harness-shortcuts strong,
    .quote-reference-chip,
    .record-heading h1 b
  ) {
  font-weight: 600;
}

:root[data-density='ai-harness']
  :is(
    .company-name,
    .sidebar-profile b,
    .sidebar-search span,
    .quote-column-label,
    .quote-invoice-state,
    .page-number,
    .ai-harness-shortcuts strong,
    .record-heading small,
    .dossier-client small
  ) {
  font-size: 12px;
}

:root[data-density='ai-harness'] .global-search kbd {
  font-size: 11px;
  letter-spacing: 0;
}

:root[data-density='ai-harness'] .quote-owner-avatar {
  font-size: 10px;
  font-weight: 600;
}

/* Chiffres : une seule mise en forme, chiffres tabulaires. */
:root[data-density='ai-harness']
  :is(
    .num,
    dd,
    .opportunity-inline-value,
    .record-header-amount strong,
    .quote-total,
    .stat strong
  ) {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Le montant cle porte l'accent, une seule fois par ecran. */
:root[data-density='ai-harness'] .record-header-amount .record-header-main > strong,
:root[data-density='ai-harness'] .quote-overview-metric[data-quote-overview='total'] strong {
  color: var(--cx-accent);
  font-weight: 600;
  letter-spacing: 0;
}

/* ---------- Champs : rayon de controle, plus de pastille ---------- */
:root[data-density='ai-harness'] input,
:root[data-density='ai-harness'] select,
:root[data-density='ai-harness'] textarea {
  border-radius: var(--cx-radius-control);
}

:root[data-density='ai-harness'] .global-search {
  border-radius: 10px;
}

/* ---------- Espacement : une grille de 4 px ---------- */
:root[data-density='ai-harness'] .toolbar {
  gap: 8px;
}

:root[data-density='ai-harness'] .data-table th,
:root[data-density='ai-harness'] .data-table td {
  padding-top: 10px;
  padding-bottom: 10px;
}

:root[data-density='ai-harness'] .card {
  padding: 20px;
}

:root[data-density='ai-harness'] .dossier nav > a {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* ---------- Detail : le recapitulatif aligne sur deux colonnes ---------- */
:root[data-density='ai-harness'] .details.commercial-metrics > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
}

:root[data-density='ai-harness'] .commercial-metrics dt {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cx-muted);
  font-size: 12px;
  font-weight: 500;
}

:root[data-density='ai-harness'] .commercial-metrics dt .icon {
  width: 14px;
  height: 14px;
  color: var(--cx-muted);
}

:root[data-density='ai-harness'] .commercial-metrics dd {
  margin: 0;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

:root[data-density='ai-harness'] .commercial-metrics dd small {
  display: block;
  font-weight: 400;
  font-size: 11px;
  color: var(--cx-muted);
}

:root[data-density='ai-harness'] .details > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 12px;
  padding: 6px 0;
}

:root[data-density='ai-harness'] .details > div > :first-child {
  min-width: 0;
}

:root[data-density='ai-harness'] .details dd {
  white-space: nowrap;
  text-align: right;
  font-weight: 600;
}

/* ---------- Navigation : une seule ligne, rien de coupe ---------- */
:root[data-density='ai-harness'] .modules {
  gap: 8px;
  padding-inline: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}

:root[data-density='ai-harness'] .modules::-webkit-scrollbar {
  display: none;
}

:root[data-density='ai-harness'] .ai-harness-module-links {
  min-width: 0;
}

:root[data-density='ai-harness'] .brand {
  min-width: 0;
}

:root[data-density='ai-harness'] .ai-harness-module-links .module-group > button {
  padding-inline: 10px;
}

/* ---------- Mots : un seul rayon pour chaque taille ---------- */
:root[data-density='ai-harness'] .quote-overview-metric {
  border-radius: var(--cx-radius);
}

:root[data-density='ai-harness'] .module-submenu {
  border-radius: var(--cx-radius-sm);
}

/* ---------- Mouvement : une courbe, trois durees ---------- */
:root[data-density='ai-harness']
  :is(.btn, .badge, .status-pill, .data-table tbody tr, .icon-btn, a) {
  transition:
    color var(--cx-dur-fast) var(--cx-ease),
    background-color var(--cx-dur-fast) var(--cx-ease),
    border-color var(--cx-dur-fast) var(--cx-ease),
    box-shadow var(--cx-dur-fast) var(--cx-ease),
    transform var(--cx-dur-fast) var(--cx-ease);
}

:root[data-density='ai-harness'] .btn:active {
  transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
  :root[data-density='ai-harness']
    :is(.btn, .badge, .status-pill, .data-table tbody tr, .icon-btn, a) {
    transition: none;
  }
  :root[data-density='ai-harness'] .btn:active {
    transform: none;
  }
}

/* =============================================================
   Fiche affaire — aperçu en deux colonnes
   (4 novembre 2026)
   L'aperçu tient en deux colonnes et chaque carte garde sa
   hauteur naturelle : plus de grands blancs sous les cartes
   courtes, et rien qui répète les onglets Documents, Ressources
   ou le panneau de droite.
   ============================================================= */

body[data-view='project'] .project-overview-grid,
body[data-view='project'] .project-governance {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

@media (max-width: 900px) {
  body[data-view='project'] .project-overview-grid,
  body[data-view='project'] .project-governance {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Photo de fiche : elle remplace l'icône en tête ---------- */
:root[data-density='ai-harness'] .record-photo {
  object-fit: cover;
  border-radius: 12px;
}

/* ---------- Kanban : une case de sélection à portée de main ---------- */
.kanban-card > input[data-select-collection] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid var(--cx-line-strong);
  border-radius: 50%;
  background: var(--cx-surface);
  cursor: pointer;
}
.kanban-card > input[data-select-collection]::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cx-ink);
  transform: scale(0);
  transition: transform var(--cx-dur-fast) var(--cx-ease);
}
.kanban-card > input[data-select-collection]:checked {
  border-color: var(--cx-ink);
}
.kanban-card > input[data-select-collection]:checked::after {
  transform: scale(1);
}
.kanban-card > input[data-select-collection]:focus-visible {
  outline: 2px solid var(--cx-accent);
  outline-offset: 2px;
}
.canonical-collection .kanban-card > input[data-select-collection] + :is(h3, .directory-row) {
  margin-left: 22px;
}
.kanban-card:has(> input[data-select-collection]:checked) {
  border-color: var(--cx-ink);
  box-shadow: inset 0 0 0 1px var(--cx-ink);
}

:root[data-density='ai-harness'] .task-selection-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 12px;
  padding: 8px 12px;
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-radius-sm);
  background: var(--cx-surface-2);
  color: var(--cx-ink);
  font-size: 12px;
}
:root[data-density='ai-harness'] .task-selection-bar .collection-selection-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

/* ---------- En-tête de fiche : mode sombre et petits écrans ---------- */
:root[data-theme='dark'][data-density='ai-harness'] .record-detail-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 86px;
  margin: 0 0 14px;
  padding: 14px 20px;
  border: 1px solid var(--cx-line);
  border-radius: 7px;
  background: var(--cx-surface);
}
:root[data-theme='dark'][data-density='ai-harness'] .record-detail-hero .record-detail-mark {
  border-color: var(--cx-line);
  background: var(--cx-surface-2);
  color: var(--cx-secondary);
}
:root[data-theme='dark'][data-density='ai-harness'] .record-detail-hero h1 {
  color: var(--cx-ink);
}
:root[data-theme='dark'][data-density='ai-harness'] .record-detail-hero .record-detail-meta,
:root[data-theme='dark'][data-density='ai-harness'] .record-detail-hero .record-detail-meta span {
  color: var(--cx-secondary);
}
:root[data-theme='dark'][data-density='ai-harness'] .record-detail-hero .record-header-meta strong {
  color: var(--cx-ink);
}
:root[data-theme='dark'][data-density='ai-harness'] .record-detail-hero .record-header-meta > span {
  color: var(--cx-muted);
}

@media (max-width: 760px) {
  :root[data-density='ai-harness'] .record-detail-hero {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 10px;
  }
  :root[data-density='ai-harness'] .record-detail-hero .record-detail-identity {
    flex: 1 1 150px;
    min-width: 0;
  }
  :root[data-density='ai-harness'] .record-detail-hero .record-header-meta {
    flex: 1 1 100%;
    margin-left: 0;
    margin-right: 0;
    white-space: normal;
    justify-content: flex-start;
  }
}

:root[data-theme='dark'][data-density='ai-harness']
  .modules
  .ai-harness-module-links
  .module-group
  > button.active::after,
:root[data-theme='dark'][data-density='ai-harness']
  .modules
  .ai-harness-module-links
  .module-group
  > button[aria-expanded='true']::after {
  display: none;
}
/* =============================================================
   Menu du haut — élément sélectionné en couleur, panneau en
   deux colonnes avec explication (4 novembre 2026)
   Chaque module porte sa couleur d'accent : l'élément sélectionné
   l'affiche dans son libellé et dans le trait qui le souligne.
   Le panneau pend sous la barre et se lit en deux colonnes ;
   chaque entrée porte une phrase qui dit ce qu'elle ouvre.
   ============================================================= */

/* Une seule couleur pour le menu du haut et ses sous-menus : l'accent.
   L'icône suit l'encre du libellé ; l'élément actif ou survolé prend
   l'accent, comme les entrées de son sous-menu. */
:root[data-density='ai-harness']
  nav[aria-label='Modules']
  .module-group[data-module-group]
  > button:first-of-type
  .icon {
  color: inherit;
}
:root[data-density='ai-harness']
  nav[aria-label='Modules']
  .module-group[data-module-group]
  > button:first-of-type.active
  .icon,
:root[data-density='ai-harness']
  nav[aria-label='Modules']
  .module-group[data-module-group]
  > button:first-of-type[aria-expanded='true']
  .icon {
  color: inherit;
}
:root[data-density='ai-harness']
  nav[aria-label='Modules']
  .module-group[data-module-group]
  > button:first-of-type.active
  .module-label,
:root[data-density='ai-harness']
  nav[aria-label='Modules']
  .module-group[data-module-group]
  > button:first-of-type[aria-expanded='true']
  .module-label {
  color: var(--cx-ink);
}
:root[data-density='ai-harness']
  nav[aria-label='Modules']
  .module-group[data-module-group]
  > button:first-of-type.active::after {
  background: var(--cx-ink);
}
:root[data-density='ai-harness']
  nav[aria-label='Modules']
  .module-group[data-module-group]
  > button:first-of-type[aria-expanded='true']::after {
  background: transparent;
}

/* ---------- Panneau : deux colonnes ---------- */
:root[data-density='ai-harness'] .module-submenu:not([hidden]) {
  display: block;
  width: min(560px, calc(100vw - 24px));
  padding: 10px;
}
:root[data-density='ai-harness'] .module-submenu .module-submenu-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
:root[data-density='ai-harness'] .module-submenu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 8px;
}
:root[data-density='ai-harness'] .module-submenu .module-entry {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 9px;
  border-radius: 10px;
  color: var(--cx-ink);
  font-size: 13px;
  line-height: 1.25;
  text-decoration: none;
}
:root[data-density='ai-harness'] .module-submenu .module-entry:hover,
:root[data-density='ai-harness'] .module-submenu .module-entry:focus-visible {
  background: var(--cx-surface-2);
  color: var(--cx-ink);
}
:root[data-density='ai-harness'] .module-submenu .module-entry.active {
  background: var(--cx-accent);
  color: var(--cx-ink);
}
:root[data-density='ai-harness'] .module-entry-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--cx-surface-2);
  color: var(--cx-ink);
}
:root[data-density='ai-harness'] .module-entry-icon .icon {
  width: 17px;
  height: 17px;
}
:root[data-density='ai-harness'] .module-entry-text {
  min-width: 0;
}
:root[data-density='ai-harness'] .module-entry-text b {
  display: block;
  font-weight: 600;
}
:root[data-density='ai-harness'] .module-entry-text small {
  display: block;
  margin-top: 2px;
  color: var(--cx-muted);
  font-size: 11.5px;
  line-height: 1.35;
}
:root[data-density='ai-harness'] .module-entry-chevron {
  flex: none;
  width: 15px;
  height: 15px;
  margin: 3px 0 0 auto;
  color: var(--cx-muted);
  opacity: 0.85;
}
:root[data-density='ai-harness'] .module-submenu > .ai-harness-automation {
  display: block;
  margin-top: 6px;
  padding: 9px;
  border-top: 1px solid var(--cx-line-soft);
  border-radius: 0;
  color: var(--cx-ink);
  font-size: 13px;
}

@media (max-width: 720px) {
  :root[data-density='ai-harness'] .module-submenu-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =============================================================
   Fond blanc à nuages de points (5 novembre 2026)
   La page devient blanche et des points gris dérivent lentement
   en nuages, comme la page d'accueil d'un navigateur. Le mouvement
   s'arrête si l'utilisateur demande moins de animations.
   ============================================================= */

:root[data-density='ai-harness']:not([data-theme='dark']) body {
  background: var(--cx-page);
}
:root[data-density='ai-harness'] .auth-page {
  background: transparent !important;
}
:root[data-density='ai-harness'] body::before {
  content: '';
  position: fixed;
  inset: -15%;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(39, 39, 39, 0.15) 0.45px, transparent 0.7px),
    radial-gradient(circle at 50% 50%, rgba(39, 39, 39, 0.1) 0.65px, transparent 0.9px),
    radial-gradient(circle at 50% 50%, rgba(39, 39, 39, 0.07) 0.9px, transparent 1.15px);
  background-size:
    18px 18px,
    26px 26px,
    38px 38px;
  background-position:
    0 0,
    9px 12px,
    22px 6px;
  -webkit-mask-image:
    radial-gradient(58% 55% at 16% 20%, #000 0%, rgba(0, 0, 0, 0.25) 55%, transparent 78%),
    radial-gradient(50% 50% at 84% 26%, #000 0%, rgba(0, 0, 0, 0.2) 55%, transparent 80%),
    radial-gradient(70% 55% at 46% 96%, #000 0%, rgba(0, 0, 0, 0.18) 52%, transparent 82%);
  mask-image:
    radial-gradient(58% 55% at 16% 20%, #000 0%, rgba(0, 0, 0, 0.25) 55%, transparent 78%),
    radial-gradient(50% 50% at 84% 26%, #000 0%, rgba(0, 0, 0, 0.2) 55%, transparent 80%),
    radial-gradient(70% 55% at 46% 96%, #000 0%, rgba(0, 0, 0, 0.18) 52%, transparent 82%);
  animation: soonply-dot-clouds 90s linear infinite alternate;
}
:root[data-theme='dark'][data-density='ai-harness'] body::before {
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.16) 1.05px, transparent 1.35px),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 1.5px, transparent 1.85px),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.07) 2.2px, transparent 2.6px);
}
@keyframes soonply-dot-clouds {
  from {
    background-position:
      0 0,
      9px 12px,
      22px 6px;
  }
  to {
    background-position:
      18px 11px,
      1px 32px,
      44px 21px;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-density='ai-harness'] body::before {
    animation: none;
  }
}

/* =============================================================
   Boutons de création : une seule couleur, un glyphe centré
   (5 novembre 2026)
   Le « + » des listes et celui de la barre du haut portent la
   couleur de l'accent, avec le signe centré dans son carré.
   ============================================================= */

:root[data-density='ai-harness'] .btn.collection-create,
:root[data-density='ai-harness'] .btn.quote-reference-create {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--cx-accent) !important;
  color: var(--cx-ink) !important;
}
:root[data-density='ai-harness'] .btn.collection-create:hover,
:root[data-density='ai-harness'] .btn.quote-reference-create:hover {
  background: var(--cx-accent-strong) !important;
  color: var(--cx-ink) !important;
}
:root[data-density='ai-harness'] .btn.collection-create .icon,
:root[data-density='ai-harness'] .btn.quote-reference-create .icon {
  width: 16px;
  height: 16px;
  margin: 0;
}
:root[data-density='ai-harness'] .ai-harness-shortcuts > button[data-action='quick-create'] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cx-accent) !important;
  color: var(--cx-ink) !important;
  border-radius: 8px;
}
:root[data-density='ai-harness'] .ai-harness-shortcuts > button[data-action='quick-create']:hover {
  background: var(--cx-accent-strong) !important;
}
:root[data-density='ai-harness'] .ai-harness-shortcuts > button[data-action='quick-create'] .icon {
  width: 16px;
  height: 16px;
}

/* =============================================================
   Nettoyage du 5 novembre 2026 : plus de barres parasites, plus
   de violets, et des colonnes alignees sur l'en-tete du devis.
   ============================================================= */

/* La petite barre verticale du module actif disparait : l'item actif
   se signale desormais par son cartouche anise. */
:root[data-density='ai-harness']
  nav[aria-label='Modules']
  .module-group
  > button:first-of-type::before {
  display: none !important;
}

/* Vue devis : les colonnes laterales demarrent sur le meme horizon que
   l'en-tete du devis. */
body[data-view='quote'] .dossier,
body[data-view='quote'] .right-panel {
  margin-top: 35px !important;
}

/* L'onglet actif de la colonne de gauche est decale : on voit ainsi
   quel intercalaire est ouvert. */
:root[data-density='ai-harness'] .dossier nav > a.active {
  padding-left: 20px;
}

/* Le montant du devis reste lisible : l'anise ne porte pas un texte. */
:root[data-density='ai-harness'] .record-header-amount .record-header-main > strong,
:root[data-density='ai-harness'] .quote-overview-metric[data-quote-overview='total'] strong {
  color: var(--cx-ink);
}

/* La fleche de repli d'une section : petite, sans cercle, centree. */
:root[data-density='ai-harness'] .quote-lines td .quote-group-toggle {
  min-height: 0;
  height: 20px;
  padding: 0 4px;
  gap: 4px;
  border: 0 !important;
  border-radius: 6px;
  background: transparent !important;
  color: var(--cx-ink);
  justify-content: flex-start;
  line-height: 1;
}
:root[data-density='ai-harness'] .quote-lines .quote-group-toggle .icon {
  flex: none;
  width: 12px;
  height: 12px;
}

/* Plus de violet ni de bleu dans les badges et les pictogrammes. */
:root[data-density='ai-harness'] .badge.blue .icon,
:root[data-density='ai-harness'] .badge.indigo .icon,
:root[data-density='ai-harness'] .badge.purple .icon {
  color: var(--cx-secondary);
}
:root[data-density='ai-harness'] .purple {
  color: var(--cx-ink-accent);
}
:root[data-density='ai-harness'] .dossier-link-icon {
  color: var(--cx-ink) !important;
}

/* ---------- Gabarit maitre : une seule typographie, un seul rayon ----------
   Les onglets de fiche sont rendus tantôt en bouton, tantôt en lien : la
   regle porte donc sur les deux, sinon chaque vue impose son style. */
:root[data-density='ai-harness'] .record-detail-tabs > :is(button, a) {
  border-radius: var(--cx-radius-control) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  color: var(--cx-muted) !important;
  background: transparent !important;
  border-color: transparent !important;
  border-bottom: 2px solid transparent !important;
}
:root[data-density='ai-harness'] .record-detail-tabs > :is(button, a):hover {
  color: var(--cx-ink) !important;
}
:root[data-density='ai-harness'] .record-detail-tabs > :is(button, a).active,
:root[data-density='ai-harness'] .record-detail-tabs > :is(button, a)[aria-current='page'] {
  position: relative;
  color: var(--cx-muted) !important;
  font-weight: 650 !important;
  border-bottom: none !important;
}
/* Trait droit : le soulignement d'un bouton arrondi dessine un crochet. */
:root[data-density='ai-harness'] .record-detail-tabs > :is(button, a).active::after,
:root[data-density='ai-harness'] .record-detail-tabs > :is(button, a)[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--cx-ink);
  border-radius: 0;
}

/* Le contenu porte toujours l'encre : plus de marine ni de bleu-gris. */
:root[data-density='ai-harness']
  :is(main, .card, .tabs, .collection-head, .data-table, .record-detail-hero) {
  color: var(--cx-ink);
}

/* ---------- Tuile de fiche : elle se remplace par une image ---------- */
:root[data-density='ai-harness'] .record-detail-hero .record-mark-button {
  position: relative;
  padding: 0;
  cursor: pointer;
}
:root[data-density='ai-harness'] .record-detail-hero .record-mark-button > .icon {
  width: 23px;
  height: 23px;
}
:root[data-density='ai-harness'] .record-detail-hero .record-mark-button > img,
:root[data-density='ai-harness'] .record-detail-hero .record-mark-button > .avatar,
:root[data-density='ai-harness'] .record-detail-hero .record-mark-button > .photo {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 11px;
  background: transparent;
  object-fit: cover;
}
:root[data-density='ai-harness'] .record-detail-hero .record-mark-button:focus-visible {
  outline: 2px solid var(--cx-ink);
  outline-offset: 2px;
}
:root[data-density='ai-harness'] .record-mark-button .photo-enlarge {
  position: absolute;
  right: 3px;
  bottom: 3px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--cx-surface);
  border: 1px solid var(--cx-line);
  color: var(--cx-ink);
}
:root[data-density='ai-harness'] .record-mark-button .photo-enlarge .icon {
  width: 11px;
  height: 11px;
}

/* ---------- Roles d'une fiche : etat et droit de modification ---------- */
:root[data-density='ai-harness'] .business-role-list {
  display: grid;
  gap: 8px;
}
:root[data-density='ai-harness'] .business-role-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--cx-line-soft);
  border-radius: 10px;
  background: var(--cx-surface-2);
}
:root[data-density='ai-harness'] .business-role-row strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--cx-ink);
}
:root[data-density='ai-harness'] .business-role-row p {
  margin: 2px 0 0;
  color: var(--cx-muted);
  font-size: 12px;
}
:root[data-density='ai-harness'] .business-role-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
:root[data-density='ai-harness'] .business-role-locked {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--cx-muted);
  font-size: 12px;
}

/* =============================================================
   Gabarit unique des titres de champs (5 novembre 2026)
   Un seul style pour tous les titres de champs, dans toutes les vues
   et tous les onglets : meme police, meme taille, meme couleur. Les
   vues qui avaient leur propre teinte (bleu-gris #8a9ab5, 13 px)
   passent par le meme gabarit.
   ============================================================= */

:root[data-density='ai-harness'] .details dt {
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: var(--cx-muted) !important;
  text-transform: none !important;
}

/* Champs editables : la valeur se modifie en cliquant dessus. */
:root[data-density='ai-harness'] .details-editable .record-inline-value {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--cx-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px dashed var(--cx-line-strong);
  padding: 0 0 1px;
  cursor: pointer;
  text-align: left;
}
:root[data-density='ai-harness'] .details-editable .record-inline-value:hover {
  background: var(--cx-surface-2);
  border-bottom-color: var(--cx-accent-strong);
}

/* Icone de reglage des champs a parametrer. */
:root[data-density='ai-harness'] .field-gear {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-left: 6px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--cx-muted);
  cursor: pointer;
  vertical-align: middle;
}
:root[data-density='ai-harness'] .field-gear:hover {
  background: var(--cx-surface-2);
  color: var(--cx-ink);
}
:root[data-density='ai-harness'] .field-gear .icon {
  width: 13px;
  height: 13px;
}
/* Libelles de champs editables (fiche article) : meme gabarit que les autres vues. */
:root[data-density='ai-harness'] .article-inline-label,
:root[data-density='ai-harness'] .article-inline-label > label,
:root[data-density='ai-harness'] .article-inline-toggle {
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: var(--cx-muted) !important;
  text-transform: none !important;
}