/* ============================================================================
 * MOEX-MÈTRE — design de l'application
 *
 * Direction validée sur les wireframes (wireframes/parcours/), portée ici
 * telle quelle. Parti pris : retirer, pas ajouter.
 *   · presque pas de couleur — l'écran est gris et blanc, la couleur ne sert
 *     qu'à signaler un problème ;
 *   · pas de cartes empilées : les sections se séparent par l'espace et un
 *     filet d'un pixel ;
 *   · la hiérarchie passe par la taille, le poids et le blanc ;
 *   · une seule famille (Switzer), les chiffres en chasse fixe pour que les
 *     colonnes s'alignent au trait près.
 *
 * Feuille AUTONOME, sans Tailwind : elle sert les écrans repris via
 * templates/metre/app.html.twig. Les écrans historiques utilisent encore
 * assets/styles/app.css — les deux ne se croisent jamais, chaque page charge
 * l'une ou l'autre.
 * ========================================================================= */

@import url('https://api.fontshare.com/v2/css?f[]=switzer@400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  color-scheme: light;

  --ui: Switzer, system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --bg: #f7f7f8;
  --surface: #ffffff;
  --surface-2: #fafafb;
  --hover: #f4f4f6;

  --line: #ebebef;
  --line-2: #dededf;

  --ink: #16161a;
  --ink-2: #62626c;
  --ink-3: #96969f;
  --ink-4: #b8b8bf;

  /* Le bleu de la maison. Une seule couleur d'accent, et elle ne dit qu'une
     chose : « c'est ici qu'on agit ». Action principale, élément en cours,
     lien, anneau de focus. Partout ailleurs, la page reste grise — c'est ce
     qui fait que le bleu se voit.

     Le #005AD8 d'origine tirait vers le cyan et saturait à fond : net, mais
     dur, et un peu « bleu système ». Celui-ci descend de quelques degrés vers
     l'outremer et lâche un peu de saturation — il gagne en profondeur sans
     rien perdre en lisibilité, et s'accorde mieux aux gris légèrement chauds
     de l'interface. */
  --acc: #1d4ed8;
  --acc-hover: #1740b4;
  --acc-soft: #eef2fd;
  --acc-ink: #ffffff;
  /* L'aplat pleine hauteur de la connexion. Il reste profond en thème sombre :
     le bleu clair qui sert d'accent sur fond noir ne tiendrait pas du texte
     blanc sur une telle surface. */
  --acc-deep: #1d4ed8;

  /* Fond du terminal d'activité. Un terminal est noir — dans les deux thèmes,
     et quelle que soit la couleur d'accent. */
  --console: #14141a;
  --console-ink: #e6e6ea;

  --pri: var(--acc);
  --pri-hover: var(--acc-hover);
  --pri-ink: var(--acc-ink);

  /* Les couleurs de signalement restent distinctes de l'accent : un problème
     ne doit pas se confondre avec une action. */
  --crit: #c0392f;
  --crit-bg: #fdf0ee;
  --warn: #9a6a10;
  --warn-bg: #fbf4e5;
  --ok: #2f7d5b;
  --ok-bg: #eef6f1;

  /* Formats de fichier : les couleurs que chacun associe déjà à son logiciel. */
  --fmt-pdf: #c0392f;
  --fmt-xlsx: #217346;
  --fmt-docx: #2b579a;
  --fmt-pptx: #dc6a0c;
  --fmt-zip: #6e46b4;

  --r: 6px;
  --sh: 0 1px 2px rgb(22 22 26 / .05);
  --sh-2: 0 4px 14px -4px rgb(22 22 26 / .13);
  --t: 120ms cubic-bezier(.4, 0, .2, 1);

  --side-w: 232px;
  --aside-w: 272px;

  /* Idem en clair : app.css lit ces variables, autant qu'elles viennent d'ici. */
  --surface-primary: var(--surface);
  --surface-secondary: var(--surface-2);
  --surface-tertiary: var(--hover);
  --surface-elevated: var(--surface);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-tertiary: var(--ink-3);
  --text-muted: var(--ink-3);
  --border-light: var(--line);
  --border-medium: var(--line-2);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0e0e11;
  --surface: #161619;
  --surface-2: #1b1b1f;
  --hover: #1f1f24;

  --line: #26262b;
  --line-2: #33333a;

  --ink: #f2f2f4;
  --ink-2: #a2a2ac;
  --ink-3: #75757e;
  --ink-4: #5a5a63;

  /* Sur fond sombre, le bleu doit remonter en luminosité pour rester lisible
     et garder le même rôle. */
  --acc: #7d9bff;
  --acc-hover: #96afff;
  --acc-soft: #171d33;
  --acc-ink: #0d1122;
  --acc-deep: #17337e;
  --console: #0a0a0e;
  --console-ink: #e6e6ea;

  --pri: var(--acc);
  --pri-hover: var(--acc-hover);
  --pri-ink: var(--acc-ink);

  --crit: #e8837a;
  --crit-bg: #2a1614;
  --warn: #d3a04a;
  --warn-bg: #241d10;
  --ok: #66b891;
  --ok-bg: #12241c;

  /* Pastilles pleines : un ton plus clair pour tenir sur fond sombre,
     assez soutenu pour garder le texte blanc lisible. */
  --fmt-pdf: #c9483e;
  --fmt-xlsx: #2b8554;
  --fmt-docx: #3a6bb3;
  --fmt-pptx: #e37a1c;
  --fmt-zip: #8a64d0;

  --sh: 0 1px 2px rgb(0 0 0 / .5);
  --sh-2: 0 4px 14px -4px rgb(0 0 0 / .7);

  /* app.css définit ses propres variables de surface, de texte et de filet,
     sans variante sombre : ses titres restaient noirs sur fond noir et ses
     lignes de document blanches. On les raccorde aux jetons de cette feuille
     plutôt que de traquer chaque règle qui les utilise. */
  --surface-primary: var(--surface);
  --surface-secondary: var(--surface-2);
  --surface-tertiary: var(--hover);
  --surface-elevated: var(--surface);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-tertiary: var(--ink-3);
  --text-muted: var(--ink-3);
  --border-light: var(--line);
  --border-medium: var(--line-2);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 13.5px;
  line-height: 1.55;
  letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.021em; text-wrap: balance; }
a { color: inherit; }
button { font-family: inherit; font-size: inherit; }

:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 3px; }

.mono, .num, .amount, .count, .code { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.eyebrow {
  font-size: 11px; font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0; text-transform: none;
}

/* ══════════════════════════════════════════════════════════ coquille ══════ */

.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }

/* ── Panneau latéral ─────────────────────────────────────────────────────── */

.side {
  background: var(--bg);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}

.side-brand { padding: 20px 18px 16px; }
.side-brand img { display: block; width: 124px; height: auto; }
:root[data-theme="dark"] .side-brand img { filter: invert(1) grayscale(1) brightness(1.6); }
.side-brand .app-name {
  display: block; margin-top: 10px;
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  letter-spacing: -.01em;
}

.side-nav { padding: 0 10px 14px; display: flex; flex-direction: column; gap: 1px; }
.side-link {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 8px; border-radius: var(--r);
  font-size: 13px; color: var(--ink-2); text-decoration: none;
  transition: background var(--t), color var(--t);
}
.side-link:hover { background: var(--hover); color: var(--ink); }
.side-link.is-on { background: var(--acc-soft); color: var(--acc); font-weight: 500; }
.side-link svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--ink-3); }
.side-link.is-on svg { color: var(--acc); }

.side-head {
  padding: 12px 18px 8px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.side-head .count { font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); }

/* Rail — un simple filet, l'étape en cours se lit à son poids, pas à sa couleur */
.rail { padding: 0 10px 16px; display: flex; flex-direction: column; }
.rail-step {
  position: relative;
  display: grid; grid-template-columns: 18px 1fr; gap: 10px;
  align-items: start;
  padding: 5px 8px;
  border-radius: var(--r);
  text-decoration: none; color: var(--ink-2);
  transition: background var(--t);
}
.rail-step:hover { background: var(--hover); }
.rail-dot {
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 9.5px;
  color: var(--ink-4);
  box-shadow: inset 0 0 0 1px var(--line-2);
  flex-shrink: 0;
  margin-top: 1px;
  transition: all var(--t);
}
.rail-dot svg { width: 10px; height: 10px; stroke-width: 2.6; }
.rail-lbl { font-size: 12.5px; line-height: 1.35; }
.rail-sub { display: block; font-size: 11px; color: var(--ink-4); margin-top: -1px; }
.rail-step::before {
  content: ''; position: absolute;
  left: 16px; top: 25px; bottom: -1px; width: 1px;
  background: var(--line-2);
}
.rail-step:last-child::before { display: none; }

.rail-step.is-done .rail-dot { background: var(--ink); color: var(--surface); box-shadow: none; }
.rail-step.is-done::before { background: var(--ink-4); }
.rail-step.is-now { background: var(--surface); box-shadow: var(--sh), inset 0 0 0 1px var(--acc); }
.rail-step.is-now .rail-dot { background: var(--acc); color: var(--acc-ink); box-shadow: none; }
.rail-step.is-now .rail-lbl { font-weight: 600; color: var(--acc); }
.rail-step.is-todo .rail-lbl { color: var(--ink-3); }

.side-foot {
  margin-top: auto;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 9px;
}
.avatar {
  width: 25px; height: 25px; border-radius: 50%;
  background: var(--ink); color: var(--surface);
  display: grid; place-items: center;
  font-size: 10px; font-weight: 600;
  flex-shrink: 0;
}
.side-foot .who b { display: block; font-size: 12px; font-weight: 500; }
.side-foot .who span { color: var(--ink-4); font-size: 10.5px; }

/* ── Colonne principale ──────────────────────────────────────────────────── */

.main { display: flex; flex-direction: column; min-width: 0; background: var(--surface); }

.topbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 0 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 50px;
}
.crumbs { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-3); min-width: 0; }
.crumbs a { text-decoration: none; color: var(--ink-2); }
.crumbs a:hover { color: var(--ink); }
.crumbs b { color: var(--ink); font-weight: 500; }
.crumbs .slash { color: var(--ink-4); }

.topbar-tools { display: flex; align-items: center; gap: 6px; }

.kbd {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink-3);
  font-size: 12.5px; cursor: pointer;
  transition: all var(--t);
}
.kbd:hover { border-color: var(--line-2); color: var(--ink-2); }
.kbd svg { width: 13px; height: 13px; }
.kbd kbd {
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-4); padding-left: 2px;
}

.icon-btn {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-3);
  border-radius: var(--r);
  cursor: pointer;
  transition: all var(--t);
}
.icon-btn:hover { color: var(--ink); background: var(--hover); }
.icon-btn svg { width: 15px; height: 15px; }

/* ── Plan de travail ─────────────────────────────────────────────────────── */

.work { padding: 30px 26px 34px; flex: 1; }
.work-inner { max-width: 1180px; margin: 0 auto; }

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.page-head h1 { font-size: 25px; font-weight: 600; letter-spacing: -.028em; }
.page-head .sub { color: var(--ink-3); font-size: 13px; margin-top: 4px; }
.step-of {
  font-size: 11.5px; color: var(--ink-3); margin-bottom: 7px;
  display: flex; align-items: center; gap: 7px;
}
.step-of .n { font-family: var(--mono); color: var(--ink-2); }
.step-of .sep { color: var(--ink-4); }

.cols { display: grid; grid-template-columns: minmax(0, 1fr) var(--aside-w); gap: 34px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 26px; min-width: 0; }

@media (max-width: 1160px) { .cols { grid-template-columns: 1fr; gap: 26px; } }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .side { position: static; height: auto; }
  .rail { flex-direction: row; overflow-x: auto; }
  .rail-step::before { display: none; }
  .rail-step { grid-template-columns: 1fr; min-width: 108px; }
}

/* ── Sections : pas de cartes, un titre et un filet ──────────────────────── */

.panel { background: transparent; }
.panel-head {
  padding: 0 0 9px;
  border-bottom: 1px solid var(--ink);
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-weight: 600; font-size: 13.5px;
  letter-spacing: -.01em;
}
.panel-head .tools { display: flex; align-items: center; gap: 4px; }
.panel-body { padding: 12px 0 0; }
.panel-body.tight { padding: 0; }
.panel-foot { padding: 10px 0 0; font-size: 12px; color: var(--ink-3); }

/* Là où une surface est vraiment nécessaire (dépôt, encart) */
.boxed {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

/* ── Boutons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 13px;
  font-size: 12.5px; font-weight: 500;
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: all var(--t);
}
.btn svg { width: 14px; height: 14px; }
.btn-primary { background: var(--pri); color: var(--pri-ink); }
.btn-primary:hover { background: var(--pri-hover); }
.btn-outline { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn-outline:hover { background: var(--hover); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--hover); color: var(--ink); }
.btn-sm { padding: 4px 9px; font-size: 12px; }

/* ── Signalements — le seul endroit où la couleur apparaît ───────────────── */

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 500;
  white-space: nowrap;
  color: var(--ink-3);
  background: transparent;
  padding: 0;
}
.tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.tag-flat::before { display: none; }
.tag-ok { color: var(--ok); }
.tag-warn { color: var(--warn); }
.tag-crit { color: var(--crit); }
.tag-info { color: var(--ink-2); }
.tag-accent { color: var(--ink); }
.tag-mute { color: var(--ink-3); }

/* ── Champs ──────────────────────────────────────────────────────────────── */

.field > span { display: block; font-size: 12px; font-weight: 500; color: var(--ink-2); margin-bottom: 5px; }

input[type="text"], input[type="number"], select, textarea {
  width: 100%;
  padding: 6px 9px;
  font-family: var(--ui);
  font-size: 13px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  transition: border-color var(--t), box-shadow var(--t);
}
input:hover, select:hover { border-color: var(--ink-4); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgb(22 22 26 / .07);
}
:root[data-theme="dark"] input:focus, :root[data-theme="dark"] select:focus { box-shadow: 0 0 0 3px rgb(242 242 244 / .12); }

/* ── Tableaux ────────────────────────────────────────────────────────────── */

.tbl-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
thead th {
  font-size: 11.5px; font-weight: 500;
  color: var(--ink-3);
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  letter-spacing: 0;
}
tbody td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
thead th:first-child, tbody td:first-child { padding-left: 0; }
thead th:last-child, tbody td:last-child { padding-right: 0; }
.num { text-align: right; white-space: nowrap; }
.code { font-size: 12px; color: var(--ink-3); }

/* ── Enveloppe — un chiffre, posé, sans décor ────────────────────────────── */

/* L'enveloppe était collée seule en haut de sa colonne. Comme les sections
   n'ont pas de fond — c'est le parti pris du design — la répartition et le
   journal lui passaient au travers en défilant : les deux textes se
   mélangeaient, illisibles.

   C'est la colonne entière qui se fige maintenant, d'un bloc. L'enveloppe
   reste sous les yeux pendant qu'on corrige le tableau — ce qui était le but —
   et plus rien ne se superpose. Si la colonne dépasse la hauteur de la
   fenêtre, elle défile chez elle. */
.env { position: static; }

@media (min-width: 1161px) {
  .cols > .stack:last-child {
    position: sticky;
    top: 70px;
    /* La barre de contexte en haut, la barre d'actions en bas. */
    max-height: calc(100vh - 136px);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Un peu d'air pour que l'ascenseur ne colle pas aux chiffres. */
    padding-right: 4px;
    scrollbar-width: thin;
  }
}
.env-head {
  padding: 0 0 9px;
  border-bottom: 1px solid var(--ink);
  display: flex; align-items: baseline; justify-content: space-between;
}
.env-head .eyebrow { color: var(--ink); font-weight: 600; font-size: 13.5px; }
.env-kind { font-size: 11.5px; color: var(--ink-3); }
.env-total { padding: 16px 0 14px; }
.env-total .amount {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 28px; font-weight: 400; letter-spacing: -.045em; line-height: 1;
  color: var(--ink);
}
.env-total .amount small { font-family: var(--ui); font-size: 12px; font-weight: 500; color: var(--ink-3); margin-left: 6px; letter-spacing: 0; }
.env-total .ttc { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-top: 6px; }

.env-lines { padding: 0 0 4px; margin: 0; }
.env-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 7px 0; font-size: 12.5px;
  border-top: 1px solid var(--line);
}
.env-line dt { color: var(--ink-2); }
.env-line dt small { display: block; color: var(--ink-4); font-size: 11px; }
.env-line dd { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.env-line.sub dt, .env-line.sub dd { color: var(--ink-3); font-size: 12px; }
.env-foot {
  padding: 8px 0;
  border-top: 1px solid var(--line);
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 12px;
}
.env-foot .k { color: var(--ink-3); }
.env-foot .v { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.env-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-3); }
.env-live::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink-2); animation: blip 2.4s ease-in-out infinite;
}
@keyframes blip { 0%, 100% { opacity: 1 } 50% { opacity: .2 } }
@media (prefers-reduced-motion: reduce) { .env-live::before { animation: none } }

/* ── Barre d'actions ─────────────────────────────────────────────────────── */

.actionbar {
  position: sticky; bottom: 0; z-index: 25;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 12px 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.actionbar .hint { font-size: 12.5px; color: var(--ink-3); }
.actionbar .grp { display: flex; align-items: center; gap: 8px; }

/* ── Encarts ─────────────────────────────────────────────────────────────── */

.note {
  display: flex; gap: 10px;
  padding: 11px 13px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.note .bar { width: 2px; border-radius: 2px; flex-shrink: 0; align-self: stretch; }
.note-crit .bar { background: var(--crit) }
.note-warn .bar { background: var(--warn) }
.note-info .bar { background: var(--ink-4) }
.note-body b { font-size: 12.5px; font-weight: 600; }
.note-body p { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-2); max-width: 78ch; }
.note-crit { background: var(--crit-bg); border-color: transparent; }

.watch-row {
  display: grid; grid-template-columns: 96px 1fr; gap: 12px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.watch-row:last-child { border-bottom: none; }
.watch-row .txt { color: var(--ink-2); }
.watch-row .txt b { color: var(--ink); font-weight: 500; }

.file {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.file:last-child { border-bottom: none; }
.file-ico {
  width: 30px; height: 30px; border-radius: var(--r);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 8.5px;
  background: var(--surface-2); color: var(--ink-3);
  box-shadow: inset 0 0 0 1px var(--line);
  flex-shrink: 0;
}
.file .nm { font-size: 13px; font-weight: 500; }
.file .ds { font-size: 12px; color: var(--ink-3); }

/* ── Console ─────────────────────────────────────────────────────────────── */

.term {
  background: var(--surface-2);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.9;
  padding: 13px 15px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  overflow-x: auto;
  white-space: pre;
}
.term .d { color: var(--ink-4) }
.term .g { color: var(--ok) }
.term .y { color: var(--ink); font-weight: 500 }

.drop {
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
  background: var(--surface-2);
  padding: 26px;
  text-align: center;
  transition: all var(--t);
}
.drop:hover { border-color: var(--ink-4); }

/* ══════════════════════════════ éditeur de métré ══════════════════════════ */

#editor-body input[type="text"], #editor-body select {
  border-color: transparent; background: transparent;
  padding: 4px 7px; font-size: 13px;
}
#editor-body input[type="text"]:hover, #editor-body select:hover {
  border-color: var(--line-2); background: var(--surface);
}
#editor-body input[type="text"]:focus, #editor-body select:focus {
  border-color: var(--ink); background: var(--surface);
}
#editor-body input[type="number"] {
  padding: 4px 7px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 12.5px; text-align: right;
}

.lot-id { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lot-id .lot-num { width: 2.6rem; flex-shrink: 0; font-family: var(--mono); }
.lot-id .lot-nom { width: 15rem; min-width: 0; font-weight: 600; }

tr.wf-lot > td { border-bottom: 1px solid var(--line-2); padding-top: 13px; }
tr.wf-lot:first-child > td { padding-top: 5px; }
tr.wf-poste:hover > td { background: var(--surface-2); }
tr.wf-add > td { padding-top: 2px; padding-bottom: 10px; }

.wf-caret {
  width: 12px; height: 14px;
  display: inline-grid; place-items: center;
  color: var(--ink-4); cursor: pointer; flex-shrink: 0;
}
.wf-caret::before {
  content: ''; width: 0; height: 0;
  border-left: 4px solid currentColor;
  border-top: 3.2px solid transparent;
  border-bottom: 3.2px solid transparent;
  transition: transform var(--t);
}
.wf-caret.is-open::before { transform: rotate(90deg); }
tr:hover .wf-caret { color: var(--ink); }

.lot-count { font-family: var(--mono); font-size: 11px; color: var(--ink-4); flex-shrink: 0; }

.wf-grip {
  display: inline-block; color: transparent; cursor: grab;
  font-size: 12px; line-height: 1; user-select: none;
  transition: color var(--t);
}
tr:hover .wf-grip { color: var(--ink-4); }
.wf-grip:active { cursor: grabbing; }

.wf-del {
  color: transparent; font-size: 15px; line-height: 1;
  padding: 0 4px; border-radius: 3px;
  cursor: pointer; background: none; border: none;
  transition: all var(--t);
}
tr:hover .wf-del { color: var(--ink-4); }
.wf-del:hover { color: var(--crit); }

.wf-addposte {
  font-size: 12.5px; color: var(--ink-3);
  background: none; border: none; padding: 2px 0; cursor: pointer;
  transition: color var(--t);
}
.wf-addposte:hover { color: var(--ink); }

tr.wf-dragging > td { opacity: .3; }
tr.wf-drop-before > td { box-shadow: inset 0 1.5px 0 0 var(--ink); }
tr.wf-drop-after > td { box-shadow: inset 0 -1.5px 0 0 var(--ink); }

/* ── Répartition ─────────────────────────────────────────────────────────── */

.rep-row { display: grid; grid-template-columns: 1fr auto; gap: 5px 8px; padding: 8px 0; align-items: baseline; border-top: 1px solid var(--line); }
.rep-row:first-child { border-top: none; }
.rep-lbl { font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-pct { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--ink-3); }
.rep-bar { grid-column: 1 / -1; height: 3px; background: var(--line); border-radius: 2px; }
.rep-bar i { display: block; height: 100%; background: var(--ink-3); border-radius: 2px; }
.rep-row:first-child .rep-bar i { background: var(--ink); }

/* ── Sommaire ────────────────────────────────────────────────────────────── */

.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.mini {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 14px;
  background: var(--surface);
  text-decoration: none;
  transition: background var(--t);
}
.mini:hover { background: var(--hover); }
.mini .n {
  width: 22px; height: 22px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line-2);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-3);
  flex-shrink: 0;
}
.mini.is-key .n { background: var(--ink); color: var(--surface); box-shadow: none; }
.mini .t { font-size: 13px; font-weight: 500; display: block; }
.mini .d { font-size: 11.5px; color: var(--ink-3); }

/* ── Utilitaires ─────────────────────────────────────────────────────────── */

.row { display: flex; align-items: center; gap: 10px; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.col2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .col2 { grid-template-columns: 1fr; } }

.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.tiny { font-size: 11.5px; }
.small { font-size: 12.5px; }
.strong { font-weight: 600; }
.center { text-align: center; }
.mt1 { margin-top: 6px } .mt2 { margin-top: 14px }
.mb2 { margin-bottom: 14px }
p.lead { margin: 0; color: var(--ink-2); font-size: 13px; max-width: 78ch; }
.stack-sm { display: flex; flex-direction: column; gap: 10px; }
.del { text-decoration: line-through; color: var(--ink-4); }
.up { color: var(--crit) } .down { color: var(--ok) }

/* ══════════════════════════════════════════════════════════════════════════
 * Reprise des composants historiques
 *
 * Les écrans du parcours reposent sur .card, .btn, .badge, .form-input, hérités
 * de l'ancien design system, et sur les utilitaires de mise en page de
 * Tailwind. Plutôt que de réécrire cinq mille lignes de gabarits pour changer
 * d'apparence, on redéfinit ces quelques composants : la disposition reste,
 * l'allure change.
 *
 * Ce bloc est transitoire. À mesure que chaque écran est repris, il s'allège.
 * ══════════════════════════════════════════════════════════════════════════ */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: none;
  overflow: visible;
}
.card-body { padding: 16px; }
.card-header {
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
}
.card-hover:hover { border-color: var(--line-2); box-shadow: var(--sh); transform: none; }

.page-title { font-size: 25px; font-weight: 600; letter-spacing: -.028em; color: var(--ink); }
.page-subtitle, .section-label { color: var(--ink-2); }
.section-label { font-size: 13.5px; font-weight: 600; color: var(--ink); }

/* Boutons : mêmes noms, nouvelle allure. */
.btn {
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: var(--r);
  border: 1px solid transparent;
  gap: 6px;
}
.btn-primary { background: var(--pri); color: var(--pri-ink); box-shadow: none; }
.btn-primary:hover:not(:disabled) { background: var(--pri-hover); box-shadow: none; }
.btn-outline { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn-outline:hover:not(:disabled) { background: var(--hover); border-color: var(--line-2); }
.btn-ghost { color: var(--ink-2); }
.btn-ghost:hover:not(:disabled) { background: var(--hover); color: var(--ink); }
.btn-sm { padding: 4px 9px; font-size: 12px; }
.btn-xs { padding: 3px 8px; font-size: 11.5px; border-radius: var(--r); }

/* Pastilles : un point coloré et un mot, sans fond teinté. */
.badge {
  padding: 0;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  background: transparent !important;
  border-radius: 0;
}
.badge::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.badge-primary { color: var(--warn); }
.badge-success { color: var(--ok); }
.badge-danger  { color: var(--crit); }
.badge-warning { color: var(--warn); }
.badge-info    { color: var(--ink-2); }
.badge-neutral { color: var(--ink-3); }

.form-input,
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="tel"], input[type="url"], input[type="search"], input[type="date"],
select, textarea {
  padding: 6px 9px;
  font-size: 13px;
  border-radius: var(--r);
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink);
}

/* Le fil d'Ariane horizontal cède la place au rail latéral : deux fils
   d'étapes à l'écran se contrediraient. */
.parcours-stepper { display: none; }

/* Les gabarits repris progressivement portent encore des couleurs Tailwind
   codées en dur, illisibles sur fond sombre. On les ramène aux tokens. */
:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .bg-slate-50,
:root[data-theme="dark"] .bg-slate-100 { background-color: var(--surface-2) !important; }
:root[data-theme="dark"] .text-slate-900,
:root[data-theme="dark"] .text-slate-800,
:root[data-theme="dark"] .text-slate-700 { color: var(--ink) !important; }
:root[data-theme="dark"] .text-slate-600,
:root[data-theme="dark"] .text-slate-500 { color: var(--ink-2) !important; }
:root[data-theme="dark"] .text-slate-400 { color: var(--ink-3) !important; }
:root[data-theme="dark"] .border-slate-100,
:root[data-theme="dark"] .border-slate-200,
:root[data-theme="dark"] .border-slate-300 { border-color: var(--line) !important; }

/* Liseré d'accent des anciennes cartes : le gold ne signale plus rien dans
   une interface monochrome, il ne fait que trancher. */
.card-accent-top { height: 2px !important; background: var(--line-2) !important; }

/* Le conteneur de rendu n'a pas de police emoji ; les gabarits historiques en
   utilisent encore. La pile de secours évite les carrés vides sur les
   captures et sur un poste dépourvu. */
body, .btn, .badge, .card, input, select, textarea {
  font-family: var(--ui), 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
}

/* Pastilles d'icônes des tuiles de synthèse : leurs fonds colorés dataient
   d'une interface où la couleur décorait. Ici elle signale, et une icône de
   rubrique ne signale rien. */
.stat-icon,
.stat-icon-gold, .stat-icon-navy, .stat-icon-coral, .stat-icon-emerald {
  background: var(--surface-2) !important;
  color: var(--ink-2) !important;
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--r) !important;
}

/* Les animations d'apparition faisaient arriver les blocs les uns après les
   autres. Sur un outil consulté cent fois par jour, l'attente lasse. */
.animate-fade-in-up { animation: none !important; opacity: 1 !important; transform: none !important; }

/* ── Onglets des paramètres ──────────────────────────────────────────────────
   L'onglet actif était un aplat marine hérité de l'ancienne charte : dans une
   interface où la couleur ne sert qu'à signaler un problème, un onglet
   sélectionné n'est pas un problème. Il se marque comme le rail des étapes —
   fond légèrement relevé, filet à gauche, texte plein. */
.settings-nav { border-radius: var(--r); overflow: hidden; }
.settings-nav > a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  font-size: 13px; line-height: 1.3;
  color: var(--ink-2); text-decoration: none;
  border-left: 2px solid transparent;
  transition: background .12s, color .12s;
}
.settings-nav > a:hover { background: var(--hover); color: var(--ink); }
.settings-nav > a.is-on {
  background: var(--acc-soft);
  color: var(--acc);
  border-left-color: var(--acc);
  font-weight: 600;
}
.settings-nav > a svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--ink-3); }
.settings-nav > a.is-on svg { color: var(--acc); }
.settings-nav > a .font-medium { font-weight: inherit; }

/* Le lien vers la mémoire du métré quitte les paramètres : il se détache du
   reste par un filet, pour qu'on ne le confonde pas avec un onglet. */
.settings-nav > a.settings-away {
  border-top: 1px solid var(--line);
  color: var(--ink-2);
}
.settings-nav > a.settings-away::after {
  content: '↗';
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-4);
}

/* ── Sous-onglets (mémoire du métré) ─────────────────────────────────────────
   Trois vues d'une même chose : le soulignement suffit à dire laquelle. */
.subtabs {
  display: flex; flex-wrap: wrap; gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}
.subtabs > a {
  padding: 8px 12px 9px;
  margin-bottom: -1px;
  font-size: 13px; color: var(--ink-3); text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .12s, border-color .12s;
}
.subtabs > a:hover { color: var(--ink); }
.subtabs > a.is-on { color: var(--acc); font-weight: 600; border-bottom-color: var(--acc); }

/* Survol de ligne : sur une liste où l'on suit une ligne de l'œil jusqu'au
   bout, le repère vaut mieux qu'un quadrillage. */
tbody tr:hover td { background: var(--hover); }

/* ── Documents produits ──────────────────────────────────────────────────────
   Une ligne par document : l'extension à gauche pour repérer le format d'un
   coup d'œil, le nom lisible, le nom de fichier réel en dessous. Rien qui
   ressemble à une carte — ce sont des lignes d'une même liste. */
.doc-row {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none; color: var(--ink);
  transition: border-color var(--t), background var(--t);
}
.doc-row + .doc-row { margin-top: 6px; }
.doc-row:hover { border-color: var(--line-2); background: var(--hover); }
.doc-ext {
  flex: 0 0 auto; min-width: 46px;
  padding: 3px 7px;
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  color: var(--ink-3); text-align: center;
  border: 1px solid var(--line); border-radius: 3px;
}
/* Rouge PDF, vert Excel, bleu Word, orange PowerPoint, violet ZIP :
   on repère le format avant de lire. */
.doc-ext--pdf, .doc-ext--xlsx, .doc-ext--docx, .doc-ext--pptx, .doc-ext--zip {
  color: #fff; border-color: transparent;
  font-weight: 600; letter-spacing: .04em;
  border-radius: 4px;
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / .18);
}
.doc-ext--pdf  { background: var(--fmt-pdf); }
.doc-ext--xlsx { background: var(--fmt-xlsx); }
.doc-ext--docx { background: var(--fmt-docx); }
.doc-ext--pptx { background: var(--fmt-pptx); }
.doc-ext--zip  { background: var(--fmt-zip); }
.doc-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.doc-id b { font-size: 13px; font-weight: 600; }
.doc-file {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc-dl { flex: 0 0 auto; color: var(--ink-4); font-size: 15px; }
.doc-row:hover .doc-dl { color: var(--ink); }

/* ── Barre de saisie du chat ─────────────────────────────────────────────────
   Elle datait d'une page sans panneau latéral ni barre d'actions : centrée sur
   la fenêtre, elle chevauchait les deux. On la recentre sur la colonne de
   travail et on la pose au-dessus de la barre d'actions. */
.chatx-composer {
  left: var(--side-w) !important;
  right: 0;
  width: auto !important;
  /* Alignée sur la colonne de travail : plus étroite, elle recouvrait la
     carte de droite au lieu de se lire comme une barre de saisie. */
  max-width: min(1180px, calc(100vw - var(--side-w) - 3.25rem));
  margin: 0 auto;
  bottom: 4rem !important;
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--r) !important;
  box-shadow: 0 10px 34px rgb(0 0 0 / .12) !important;
  transform: none !important;
}

/* Le remplissage de bas de page visait `body main`, qui n'existe plus dans la
   coquille : sans lui, le dernier bloc passe sous la barre de saisie. */
.work { padding-bottom: 34px; }
body:has(.chatx-composer) .work { padding-bottom: 190px; }

@media (max-width: 900px) {
  .chatx-composer { left: 0 !important; max-width: calc(100vw - 2rem); }
}

/* Bulles du fil : elles portaient le marine et le gris de l'ancienne charte. */
.chatx-bubble-user   { background: var(--ink) !important; color: var(--surface) !important; }
.chatx-bubble-claude { background: var(--surface-2) !important; border-color: var(--line) !important; }
.chatx-md strong     { color: var(--ink) !important; }
.chatx-md code       { background: var(--surface-2) !important; color: var(--ink-2); }
.chatx-md li::marker { color: var(--ink-4) !important; }
.chatx-md a          { color: var(--ink) !important; }

/* ── Apparence des documents ─────────────────────────────────────────────────
   Les pastilles de couleur sont le seul endroit de l'interface où une couleur
   ne signale rien : elle EST le sujet. */
.swatches { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 16px; }
.swatch { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-2); }
.swatch i {
  width: 15px; height: 15px; border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12);
}
.swatch b { font-family: var(--mono); font-size: 11px; color: var(--ink-3); font-weight: 400; }

.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px 26px; }
.kv > div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.kv dt { font-size: 12.5px; color: var(--ink-3); }
.kv dd { font-size: 12.5px; color: var(--ink); text-align: right; }

/* Champ étiqueté des formulaires de réglage. */
.field { display: flex; flex-direction: column; gap: 5px; }
.field > .hint { font-size: 11.5px; color: var(--ink-3); }


/* ── Le bleu, là où l'on agit ────────────────────────────────────────────────
   Une seule couleur d'accent, et un seul rôle : signaler ce sur quoi on peut
   agir. Elle ne décore rien — d'où sa rareté, qui est ce qui la rend
   visible. */

/* Les liens DANS LE TEXTE. Tout ce qui est déjà une commande — bouton,
   onglet, ligne de liste, rubrique — garde sa propre couleur : peindre en
   bleu chaque élément cliquable reviendrait à ne plus rien signaler.
   D'où la liste d'exclusions plutôt qu'un `a { color: … }` global. */
.work-inner p a,
.work-inner li a,
.work-inner .sub a,
.work-inner .hint a,
.work-inner dd a,
.work-inner td a:not(.row-link):not(.btn):not(.doc-row) {
  color: var(--acc);
  text-decoration-color: color-mix(in srgb, var(--acc) 35%, transparent);
}
.work-inner p a:hover,
.work-inner li a:hover,
.work-inner .sub a:hover,
.work-inner .hint a:hover {
  text-decoration-color: currentColor;
}

/* Un champ actif se signale par le même bleu que le reste. */
.form-input:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--acc) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 14%, transparent) !important;
  outline: none;
}

/* Un document ou une ligne qu'on survole : le bleu annonce qu'elle est
   cliquable, là où le gris seul restait ambigu. */
.doc-row:hover { border-color: color-mix(in srgb, var(--acc) 45%, var(--line)); }
.doc-row:hover .doc-dl { color: var(--acc); }
.doc-row:hover .doc-id b { color: var(--acc); }

/* Le repère « en direct » : c'est un état vivant, pas un problème. */
.env-live { color: var(--acc); }
.env-live::before { background: var(--acc) !important; }

/* Cases et boutons radio : le bleu de la maison plutôt que celui du système. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--acc); }

/* Bouton secondaire au survol : une teinte de bleu, pas un aplat gris. */
.btn-outline:hover {
  border-color: color-mix(in srgb, var(--acc) 45%, var(--line-2));
  color: var(--acc);
}
.btn-ghost:hover { color: var(--acc); }

/* Le pont de compatibilité : les gabarits repris portent encore les classes
   marine et or de l'ancienne charte. */
.work-inner .text-gold-600, .work-inner .text-gold-400,
.work-inner .hover\:text-gold-600:hover,
.work-inner .hover\:text-navy-700:hover, .work-inner .hover\:text-navy-800:hover {
  color: var(--acc) !important;
}
/* `text-navy-*` servait de couleur de texte courante dans l'ancienne charte :
   la passer en bleu peindrait des titres entiers. Elle rejoint l'encre. */
.text-navy-800, .text-navy-900 { color: var(--ink) !important; }
/* `bg-navy-*` portait le fond du terminal d'activité et des pastilles
   d'avatar — un fond sombre, pas un accent. Le repeindre en bleu donnait un
   terminal bleu, ce qu'aucun terminal n'est. */
.bg-navy-900 { background-color: var(--console) !important; color: var(--console-ink) !important; }
.bg-navy-800 { background-color: var(--console) !important; color: #fff !important; }
/* Ce qui vit sur ces fonds sombres doit rester lisible : ni encre, ni accent. */
.bg-navy-800 .text-gold-400, .bg-navy-900 .text-gold-400,
.work-inner .bg-navy-800.text-gold-400 { color: #fff !important; }
.bg-navy-900 .text-slate-100, .bg-navy-900 .text-slate-200 { color: var(--console-ink) !important; }
.hover\:border-gold-400:hover { border-color: color-mix(in srgb, var(--acc) 45%, var(--line)) !important; }
.bg-gold-400 { background-color: var(--acc) !important; }
.text-blue-600, .text-blue-700, .text-blue-800 { color: var(--acc) !important; }
.bg-blue-50 { background-color: var(--acc-soft) !important; }
.border-blue-200 { border-color: color-mix(in srgb, var(--acc) 25%, var(--line)) !important; }

/* Nom d'une ligne de liste : noir au repos, bleu au survol. Une colonne
   entièrement bleue se lirait moins bien qu'elle ne se cliquerait. */
.row-link { font-weight: 600; color: var(--ink) !important; text-decoration: none; }
tbody tr:hover .row-link, .row-link:hover { color: var(--acc) !important; }

/* Pastille d'état courant : le bleu de l'accent, comme le reste de ce qui
   désigne « c'est ici ». */
.badge-current { color: var(--acc); }

/* ══════════════════════════════════════════════════════════ connexion ══════
   Deux volets : à gauche ce que fait l'outil, à droite le formulaire. La
   page est la seule que l'on voie sans être entré — elle doit se présenter
   avant de demander quoi que ce soit.

   Le volet de gauche porte l'unique aplat de bleu de toute l'application :
   ici, la couleur n'a personne à qui céder la place. */

.login { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }

.login-aside {
  background: var(--acc-deep);
  color: #fff;
  padding: 44px 52px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  position: relative; overflow: hidden;
}
/* Un dégradé très large, presque imperceptible : il évite l'aplat parfaitement
   plat, qui fait raide sur une grande surface. */
.login-aside::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 12% 0%, rgb(255 255 255 / .16), transparent 60%);
  pointer-events: none;
}

.login-brand { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
.login-brand img { height: 26px; width: auto; }
.login-brand span { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.login-aside .login-brand img { filter: brightness(0) invert(1); }

.login-pitch { position: relative; z-index: 1; max-width: 30rem; }
.login-pitch h1 {
  /* app.css colore tous les titres en `--text-primary` ; sur l'aplat bleu il
     faut reprendre la main, sans quoi le titre sort en presque noir. */
  color: #fff;
  font-size: 30px; font-weight: 600; line-height: 1.24; letter-spacing: -.03em;
  margin-bottom: 16px;
}
.login-pitch p { font-size: 14px; line-height: 1.65; color: rgb(255 255 255 / .82); }

/* Les quatre temps du parcours. Numérotés parce qu'ils le sont vraiment :
   l'ordre porte une information, il ne décore pas. */
.login-steps { list-style: none; margin: 30px 0 0; padding: 0; counter-reset: e; }
.login-steps li {
  counter-increment: e;
  display: grid; grid-template-columns: 26px 1fr; align-items: baseline; gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgb(255 255 255 / .18);
  font-size: 13.5px;
}
/* Le libellé et sa précision tiennent dans un même bloc : laissés en enfants
   directs, ils devenaient deux cellules de la grille et se retrouvaient l'un
   sous l'autre, mot à mot. */
.login-steps li > div { min-width: 0; }
.login-steps li::before {
  content: counter(e);
  font-family: var(--mono); font-size: 11px;
  color: rgb(255 255 255 / .6);
}
.login-steps b { font-weight: 600; }
.login-steps span { display: block; font-size: 12.5px; color: rgb(255 255 255 / .7); margin-top: 1px; }

.login-foot {
  position: relative; z-index: 1;
  font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase;
  color: rgb(255 255 255 / .6);
}

/* ── Volet droit ─────────────────────────────────────────────────────────── */

.login-main {
  background: var(--bg);
  padding: 44px 52px;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 40px;
}
.login-form { width: 100%; max-width: 21rem; }
.login-form h2 { font-size: 22px; font-weight: 600; letter-spacing: -.025em; }
.login-form .sub { font-size: 13px; color: var(--ink-3); margin: 5px 0 26px; }

.login-form .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 15px; }
.login-form .field > span { font-size: 12.5px; color: var(--ink-2); }
.login-form input[type="email"],
.login-form input[type="password"] { width: 100%; }

.login-remember {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--ink-2);
  margin: 4px 0 22px; cursor: pointer;
}

.login-submit { width: 100%; padding: 10px 16px; font-size: 13.5px; }

.login-help { font-size: 12px; color: var(--ink-3); margin-top: 20px; line-height: 1.6; }
.login-legal { font-size: 11.5px; color: var(--ink-4); }

.login-brand-mobile { display: none; margin-bottom: 30px; }
.login-brand-mobile span { color: var(--ink); }

@media (max-width: 900px) {
  /* Sur téléphone, on vient se connecter, pas découvrir l'outil : le volet
     de présentation disparaît plutôt que de repousser le formulaire. */
  .login { grid-template-columns: 1fr; }
  .login-aside { display: none; }
  .login-main { padding: 34px 24px; justify-content: flex-start; }
  .login-brand-mobile { display: flex; }
}

/* Raccourcis du dossier, dans la barre de contexte. Discrets : on doit
   pouvoir y aller sans qu'ils tirent l'œil hors de l'étape en cours. */
.top-link {
  padding: 4px 9px;
  font-size: 12.5px; color: var(--ink-2); text-decoration: none;
  border-radius: var(--r);
  white-space: nowrap;
  transition: background var(--t), color var(--t);
}
.top-link:hover { background: var(--hover); color: var(--acc); }
.top-sep { width: 1px; height: 18px; background: var(--line); margin: 0 3px; }

@media (max-width: 720px) {
  /* Sur téléphone la barre est déjà serrée : le fil d'Ariane suffit à revenir
     au dossier, les raccourcis s'effacent. */
  .top-link, .top-sep { display: none; }
}

/* Vignette retenue dans le sélecteur de page de garde : même bleu que partout
   ailleurs pour dire « c'est celle-ci ». */
.border-gold-400 { border-color: var(--acc) !important; }
.ring-gold-300 { --tw-ring-color: color-mix(in srgb, var(--acc) 45%, transparent) !important; }

/* ── Espace plateforme (super-admin) ─────────────────────────────────────────
   Même coquille que l'appli. Ce qui s'ajoute : chiffres clés posés sans
   cartes, sélecteur segmenté, pagination, pastilles d'appartenance, panneau
   latéral de modification (<dialog>), bandeau « vous êtes à la place de ». */

.plat-tag { font-size: 10.5px; font-weight: 600; color: var(--acc); background: var(--acc-soft); border-radius: 4px; padding: 1px 6px; margin-left: 6px; }
.side-sep { height: 1px; background: var(--line); margin: 8px 8px; }
.side-label { padding: 6px 8px 2px; font-size: 11px; color: var(--ink-4); }
.side-link .count { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); }
.side-link .count.is-new { color: var(--acc); }
.side-link .soon { margin-left: auto; font-size: 10.5px; color: var(--ink-4); }

.pf-stack { display: flex; flex-direction: column; gap: 30px; }
.pf-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 30px; }
@media (max-width: 960px) { .pf-cols { grid-template-columns: 1fr; } }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--ink); }
.kpi { padding: 14px 16px 4px 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kpi + .kpi { padding-left: 16px; border-left: 1px solid var(--line); }
.kpi .lbl { font-size: 11.5px; color: var(--ink-3); }
.kpi .val { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 500; letter-spacing: -.02em; }
.kpi .delta { font-size: 11.5px; color: var(--ink-3); }

.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
.seg > a, .seg > button { border: 0; background: var(--surface); color: var(--ink-2); padding: 4px 10px; font-size: 12px; cursor: pointer; text-decoration: none; }
.seg > * + * { border-left: 1px solid var(--line-2) !important; }
.seg > .is-on { background: var(--hover); color: var(--ink); font-weight: 500; }
.pf-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pf-filters input[type="search"], .pf-filters select { width: auto; min-width: 180px; padding: 5px 9px; font-size: 12.5px; }

.pf-sub { display: block; font-size: 11.5px; color: var(--ink-3); font-family: var(--mono); }
.pf-faint { color: var(--ink-3); }
.pf-acts { display: inline-flex; gap: 2px; justify-content: flex-end; }
.pf-acts form { display: inline; }
.chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.chip { font-size: 11.5px; color: var(--ink-2); background: var(--hover); border-radius: 4px; padding: 0 6px; white-space: nowrap; }
.chip b { font-weight: 500; color: var(--ink); }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 12px; font-size: 12px; color: var(--ink-3); }
.pager .pages { display: inline-flex; gap: 2px; align-items: center; }
.pager .pages a, .pager .pages span.cur, .pager .pages span.off { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--r); color: var(--ink-2); font-family: var(--mono); font-size: 12px; text-decoration: none; }
.pager .pages a:hover { background: var(--hover); }
.pager .pages span.cur { border-color: var(--line-2); color: var(--ink); background: var(--surface); }
.pager .pages span.off { color: var(--ink-4); }

.pf-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.pf-chart .grid line { stroke: var(--line); stroke-width: 1; }
.pf-chart text { fill: var(--ink-3); font-family: var(--mono); font-size: 10px; }
.pf-chart .bar { fill: var(--acc); }
.pf-chart g.col:hover .bar { fill: var(--acc-hover); }
.pf-chart .hit { fill: transparent; }

.pf-empty { padding: 28px 0; display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); font-size: 13px; }
.pf-empty b { color: var(--ink); font-weight: 600; font-size: 14px; }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border-top: 1px solid var(--ink); }
.plan { padding: 16px 18px 8px 0; display: flex; flex-direction: column; gap: 10px; }
.plan + .plan { padding-left: 18px; border-left: 1px solid var(--line); }
.plan h3 { font-size: 14px; }
.plan .price { font-family: var(--mono); font-size: 24px; font-weight: 500; letter-spacing: -.02em; }
.plan .price small { font-family: var(--ui); font-size: 12px; color: var(--ink-3); font-weight: 400; }
.plan ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--ink-2); }
.plan .subs { font-size: 12px; color: var(--ink-3); }

/* Panneau latéral de modification */
dialog.drawer { position: fixed; inset: 0 0 0 auto; margin: 0; height: 100%; max-height: 100%; width: min(440px, 100%); padding: 0; border: 0; border-left: 1px solid var(--line); background: var(--surface); color: var(--ink); }
dialog.drawer[open] { display: flex; flex-direction: column; }
dialog.drawer::backdrop { background: rgb(0 0 0 / .28); }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { font-size: 16px; }
.drawer-head .sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.drawer-body { padding: 18px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.drawer-foot { padding: 12px 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.drawer form.drawer-form { display: contents; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.drawer-sec { font-size: 12px; font-weight: 600; color: var(--ink); padding-top: 8px; border-top: 1px solid var(--line); }
.line-act { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.line-act .pf-faint { font-size: 12px; }
.field input[type="email"], .field input[type="password"], .field textarea { width: 100%; padding: 6px 9px; font-family: var(--ui); font-size: 13px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); box-sizing: border-box; }

/* Bandeau « vous êtes à la place de » : visible sur chaque page de l'appli */
.voir-comme { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--warn-bg); border-bottom: 1px solid var(--line); padding: 8px 26px; font-size: 12.5px; position: sticky; top: 0; z-index: 40; }
.voir-comme b { font-weight: 600; }
.voir-comme .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); margin-right: 8px; vertical-align: 1px; }

/* Bouton et fenêtre Support, côté appli */
dialog.support-dlg { width: min(480px, calc(100% - 32px)); padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }
dialog.support-dlg::backdrop { background: rgb(0 0 0 / .28); }
.support-dlg form { display: flex; flex-direction: column; }
.support-types { display: flex; gap: 6px; flex-wrap: wrap; }
.support-types label { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line-2); border-radius: var(--r); font-size: 12.5px; cursor: pointer; }
.support-types input { accent-color: var(--acc); }
.support-types label:has(input:checked) { border-color: var(--acc); background: var(--acc-soft); color: var(--acc); }
td.num .tag, td.num .btn { font-family: var(--ui); }

/* Bas du panneau : nom (vers le profil) et déconnexion */
.side-me { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; text-decoration: none; color: inherit; border-radius: var(--r); padding: 3px 4px; margin: -3px -4px; }
.side-me:hover { background: var(--hover); }
.side-me .who { min-width: 0; }
.side-me .who b, .side-me .who span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-foot .icon-btn { flex-shrink: 0; }

/* ── Bouton Support flottant, qui se transforme en fenêtre ──────────────────
   Le conteneur porte la forme : pastille au repos, fenêtre ouverte. Largeur,
   hauteur et arrondi s'animent ; le contenu change pendant le mouvement. */
.support-fab {
  position: fixed; z-index: 45;
  right: calc(20px + env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  border-radius: 22px;
  background: var(--acc); color: var(--acc-ink);
  box-shadow: 0 8px 24px -8px rgb(22 22 26 / .35);
  transition: width .38s cubic-bezier(.2, .9, .25, 1), height .38s cubic-bezier(.2, .9, .25, 1),
              border-radius .38s cubic-bezier(.2, .9, .25, 1), background-color .2s, box-shadow .2s;
}
.support-fab.sans-transition, .support-fab.sans-transition * { transition: none !important; }
.support-fab:not(.is-open):hover { background: var(--acc-hover); }
.support-fab.is-open {
  border-radius: 12px;
  background: var(--surface); color: var(--ink);
  box-shadow: 0 18px 48px -12px rgb(22 22 26 / .35), 0 0 0 1px var(--line);
}
.support-fab-btn {
  position: absolute; right: 0; bottom: 0;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border: 0; background: transparent; color: inherit;
  font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: opacity .16s;
}
.support-fab-btn svg { width: 16px; height: 16px; }
.support-fab.is-open .support-fab-btn { opacity: 0; pointer-events: none; }
.support-fab-panel {
  position: absolute; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 40px); overflow-y: auto;
  opacity: 0; transform: translateY(6px);
  transition: opacity .18s, transform .22s;
}
.support-fab.is-open .support-fab-panel { opacity: 1; transform: none; transition-delay: .16s; }
.support-fab-panel .drawer-body textarea { width: 100%; box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) {
  .support-fab, .support-fab * { transition: none !important; }
}