/* MyAxiom — interface standard (specs/009-identite-myaxiom), habillage « Cloud Dock » (specs/056-habillage-violet)
   aux couleurs de Blue Watt (specs/164-charte-blue-watt : bleu nuit #050240 du logo, accent dans la même teinte).
   Une seule feuille : jetons, coquille, composants, mobile.
   Les classes historiques (panel, badge, metric, tabs, filters, field…) restent stylées : les gabarits ne changent pas. */
:root {
  --bg: #f3f5f9;
  --card: #ffffff;
  --white: #ffffff; /* texte sur fond d'accent ou foncé (specs/257) */
  --ink: #050240;
  --text: #23263b;
  --muted: #5d6278;
  /* Texte discret (specs/221, contraste WCAG calculé) : 5,07:1 sur blanc, 4,65:1 sur --bg, 4,73:1 sur --head, 4,53:1 sur --acc-faint. */
  --faint: #686e82;
  --line: #e3e7ef;
  --line-soft: #edf0f5;
  --head: #f6f7fa;
  --rail: #eceff5;
  --field-line: #d8dce6;
  --row-hover: #f8f9fc;
  --acc: #251dc9;
  --acc-ink: #110c6e;
  --acc-soft: #e0dffb;
  --acc-hover: #1b14a3;
  --acc-faint: #f2f1fd;
  --acc-line: #c2bff8;
  --side-bg: #050240;
  --side-text: #cecdea;
  --side-muted: #9795c6;
  --side-hover: #110d59;
  --side-line: #1c1862;
  /* Soleil du logo (specs/168) : sept rayons, du rouge au vert. `--sun` (orange du logo) ne porte pas un texte blanc
     (3,6:1) : boutons et entrée active sur `--sun-strong` (4,9:1), survol `--sun-hover`. */
  --ray-1: #b5352f;
  --ray-2: #c4743a;
  --ray-3: #cf9c45;
  --ray-4: #ddcb48;
  --ray-5: #b8b947;
  --ray-6: #93a948;
  --ray-7: #5f9446;
  --sun: #c4743a;
  --sun-strong: #a85e2a;
  --sun-hover: #8f4d20;
  --ink-pale: #c5c7dd;
  --sun-band: linear-gradient(
    90deg,
    var(--ray-1) 0% 14.2857%,
    var(--ray-2) 14.2857% 28.5714%,
    var(--ray-3) 28.5714% 42.8571%,
    var(--ray-4) 42.8571% 57.1429%,
    var(--ray-5) 57.1429% 71.4286%,
    var(--ray-6) 71.4286% 85.7143%,
    var(--ray-7) 85.7143% 100%
  );
  --side-active: #a85e2a;
  --ok: #2f5520;
  --ok-soft: #e4eedb;
  --ok-line: #c3d8b1;
  --warn: #7a3f12;
  --warn-soft: #f6e7d6;
  --warn-line: #e9cba9;
  --bad: #7d201c;
  --bad-soft: #f6dcda;
  --bad-line: #ecbdb9;
  --bad-hover: #5e1714;
  --info: #1e40af;
  --info-soft: #dbeafe;
  --info-line: #bfdbfe;
  --shadow: 0 1px 2px rgba(5, 2, 64, 0.05);
  --shadow-card: 0 1px 2px rgba(5, 2, 64, 0.04), 0 6px 20px rgba(5, 2, 64, 0.04);
  --shadow-lg: 0 12px 32px rgba(5, 2, 64, 0.14);
  --r: 10px;
  --r-lg: 16px;
  --side: 232px;
  --font:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 var(--font);
  font-variant-numeric: tabular-nums;
}
::selection {
  background: var(--acc-soft);
  color: var(--ink);
}
a {
  color: var(--acc);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: 4px;
}
button,
input,
select,
textarea {
  font: inherit;
}
h1,
h2,
h3 {
  color: var(--ink);
  text-wrap: balance;
}
h1 {
  font-size: 22px;
  letter-spacing: -0.01em;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}
h2 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 14px;
}
h3 {
  font-size: 13px;
  font-weight: 600;
  margin: 16px 0 8px;
}
small {
  color: var(--muted);
}
.muted {
  color: var(--muted);
}
.danger {
  color: var(--bad);
}
.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.helptext {
  font-size: 11.5px;
  color: var(--muted);
}

/* --- Boutons et champs ---------------------------------------------------------------------- */
button,
.button {
  cursor: pointer;
  border: 1px solid var(--sun-strong);
  background: var(--sun-strong);
  color: var(--white);
  padding: 9px 15px;
  border-radius: var(--r);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.3;
  box-shadow: var(--shadow);
  min-height: 38px;
  white-space: nowrap;
}
button:hover,
.button:hover {
  background: var(--sun-hover);
  border-color: var(--sun-hover);
  text-decoration: none;
}
button.secondary,
.button.secondary {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
}
button.secondary:hover,
.button.secondary:hover {
  background: var(--head);
  border-color: var(--field-line);
}
button[disabled],
.button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
input,
select,
textarea {
  padding: 9px 11px;
  border: 1px solid var(--field-line);
  border-radius: var(--r);
  background: var(--white);
  color: var(--ink);
  max-width: 100%;
  min-height: 38px;
}
input::placeholder,
textarea::placeholder {
  color: var(--faint);
}
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--acc);
  outline-offset: 0;
  border-color: var(--acc);
}
input[type='checkbox'],
input[type='radio'] {
  width: 16px;
  height: 16px;
  min-height: 0;
  accent-color: var(--acc);
  vertical-align: -3px;
  margin-right: 6px;
}
input[type='file'] {
  padding: 6px;
  background: transparent;
  border-style: dashed;
}
textarea {
  width: 100%;
  min-height: 90px;
  line-height: 1.5;
}
label {
  font-weight: 500;
  color: var(--ink);
}
.field {
  margin-bottom: 4px;
}
.field label,
.field .field-label {
  display: block;
  margin-bottom: 5px;
  font-size: 12.5px;
  color: var(--text);
}
.field .field-label {
  font-weight: 500;
}
.field input,
.field select {
  width: 100%;
}
.custom-fields-title {
  grid-column: 1 / -1;
}

.form-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 22px;
}
[data-charged-only][hidden] {
  display: none;
}
.charged-group {
  display: contents;
}
.errorlist,
.error {
  color: var(--bad);
  list-style: none;
  padding: 0;
  margin: 6px 0;
  font-size: 13px;
}
form p {
  margin: 0 0 12px;
}

/* --- Coquille : barre latérale, en-tête, contenu -------------------------------------------- */
aside {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--side);
  background: var(--side-bg);
  color: var(--side-text);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  z-index: 30;
  overflow-y: auto;
  scrollbar-color: var(--side-line) transparent;
}
/* Le menu est une navigation (specs/221) : même colonne qu'avant, `.aside-bottom` reste poussé en bas de l'aside. */
.side-nav {
  display: flex;
  flex-direction: column;
}
.brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  padding: 6px 10px 18px;
  letter-spacing: -0.01em;
}
aside .brand {
  color: var(--white);
}
.brand .logo {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--acc), var(--ink));
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.brand span:not(.logo) {
  color: var(--acc);
}
/* Logo Blue Watt (specs/164) : blanc dans le menu, bleu nuit sur fond clair ; nom du logiciel en petit à côté
   (couleur d'accent de `.brand span` sur fond clair, texte du menu dans la barre latérale). */
.brand-logo {
  display: block;
  height: 46px;
  width: auto;
  flex: none;
}
.brand .brand-app {
  align-self: flex-end;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
aside .brand .brand-app {
  color: var(--side-text);
}
/* Bande du soleil (specs/168) : sept segments égaux à bords francs, 4 px, sous le logo du menu et de la connexion. */
.sun-band {
  flex: 0 0 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--sun-band);
}
.top-logo {
  display: none;
  height: 28px;
  width: auto;
  flex: none;
}
aside a {
  color: var(--side-text);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r);
  margin: 2px 0;
  font-weight: 500;
  font-size: 13.5px;
  min-height: 38px;
}
aside a svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--side-muted);
}
aside a:hover {
  background: var(--side-hover);
  text-decoration: none;
  color: var(--white);
}
aside a:hover svg {
  color: var(--white);
}
aside a.active,
aside a[aria-current='page'] {
  background: var(--side-active);
  box-shadow:
    inset 3px 0 0 var(--sun),
    0 6px 16px rgba(5, 2, 64, 0.5);
  color: var(--white);
  font-weight: 600;
}
aside a.active svg,
aside a[aria-current='page'] svg {
  color: var(--white);
}
aside a small {
  color: inherit;
  opacity: 0.7;
}
/* Rubriques à sous-dossiers (specs/056, US4) : flèche à droite, sous-dossiers reliés par un filet d'arborescence ;
   la rubrique ouverte est en pastille, le sous-dossier courant surligné plus discrètement (comme la maquette). */
.nav-parent {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav-parent a {
  flex: 1;
  min-width: 0;
}
.nav-twisty {
  flex: none;
  width: 30px;
  min-height: 30px;
  padding: 0;
  justify-content: center;
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--side-muted);
  border-radius: 8px;
}
.nav-twisty:hover {
  background: var(--side-hover);
  color: var(--white);
}
.nav-twisty svg {
  width: 14px;
  height: 14px;
  transition: transform 0.15s ease-out;
}
.nav-twisty[aria-expanded='true'] svg {
  transform: rotate(90deg);
}
.nav-children {
  position: relative;
  margin: 2px 0 6px 19px;
  padding-left: 12px;
}
.nav-children::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 16px;
  border-left: 1px solid var(--side-line);
}
aside a.nav-leaf {
  position: relative;
  font-size: 13px;
  min-height: 32px;
  padding: 5px 10px;
  margin: 1px 0;
}
aside a.nav-leaf::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  width: 9px;
  border-top: 1px solid var(--side-line);
}
.nav-sublabel {
  display: block;
  margin: 8px 0 2px;
  padding: 0 10px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--side-muted);
  font-weight: 600;
}
aside a.nav-leaf-sub {
  margin-left: 8px;
}
/* Groupes repliables des Réglages (spec 264) : le titre s'ouvre au clic, flèche tournée quand il est ouvert. */
.nav-fold > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  color: var(--side-text);
}
.nav-fold > summary::-webkit-details-marker {
  display: none;
}
.nav-fold > summary::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease-out;
}
.nav-fold[open] > summary::before {
  transform: rotate(45deg);
}
.nav-fold > summary:hover {
  background: var(--side-hover);
  color: var(--white);
}
.nav-fold[open] > summary {
  color: var(--white);
}
aside a.nav-leaf[aria-current='page'] {
  background: var(--side-hover);
  color: var(--white);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--side-line);
}
.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
  margin: 10px 0 -6px;
}
.crumbs a {
  color: var(--muted);
  font-weight: 500;
}
.crumbs a:hover {
  color: var(--acc);
}
.aside-bottom {
  margin-top: auto;
  padding: 8px;
  border: 1px solid var(--side-line);
  border-radius: 14px;
  background: var(--side-hover);
  font-size: 12.5px;
}
.aside-bottom a {
  padding: 8px 10px;
  color: var(--white);
}
.aside-bottom a.nav-leaf {
  color: var(--side-text);
  font-weight: 400;
}
.aside-bottom a.nav-leaf[aria-current='page'] {
  color: var(--white);
  font-weight: 600;
}
.aside-bottom .nav-parent a {
  padding: 8px 10px;
}
.aside-bottom button {
  padding: 6px 10px;
  background: none;
  border: 0;
  color: var(--side-muted);
  box-shadow: none;
  font-weight: 500;
  font-size: 12.5px;
  min-height: 0;
}
.aside-bottom button:hover {
  background: var(--side-bg);
  color: var(--white);
}
.icon {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.15em;
}
/* Cadre « Cloud Dock » : le contenu est une grande carte claire posée sur le fond sombre du menu (specs/056). */
body.app {
  background: var(--side-bg);
}
main {
  margin: 8px 8px 8px var(--side);
  padding: 0 28px 40px;
  background: var(--bg);
  border-radius: 22px;
  min-height: calc(100dvh - 16px);
}
main > * {
  max-width: 1560px;
}
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 56px;
  color: var(--muted);
  gap: 16px;
  font-size: 13px;
}
.topbar > div:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
  font-weight: 600;
}
.pilot {
  font-size: 11px;
  color: var(--warn);
  background: var(--warn-soft);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}
.heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin: 12px 0 18px;
  flex-wrap: wrap;
}
.heading h1 {
  margin: 0;
}
.lead {
  color: var(--muted);
  margin: -8px 0 18px;
  max-width: 80ch;
}
.actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
/* Spec 321 : quand les boutons passent sous le titre (largeur moyenne), ils restent à droite ; sinon la liste d'un menu
   « Plus ▾ » ou « Exporter ▾ » (alignée sur le bord droit du bouton) s'ouvrirait sur le menu latéral. */
@media (min-width: 701px) {
  .heading .actions {
    margin-left: auto;
    justify-content: flex-end;
  }
}
footer {
  margin-top: 28px;
  font-size: 11.5px;
  color: var(--faint);
}

/* --- Cartes, tableaux, tuiles ------------------------------------------------------------------ */
.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: 18px;
  padding: 20px 22px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.panel h2 {
  margin-top: 0;
}
.table-panel {
  padding: 0;
}
.panel-title {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.panel-title h2 {
  margin: 0;
}
.panel-title a {
  font-size: 12.5px;
  font-weight: 600;
}
/* :not(.bk-island *) : la classe Tailwind « grid » des graphiques Bklit porte le même nom (specs/057). */
.grid:not(:where(.bk-island *)) {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
  align-items: start;
}
.scroll,
.table-wrap {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
th {
  background: var(--head);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px;
  vertical-align: middle;
}
tr:last-child td {
  border-bottom: 0;
}
tbody tr:hover td {
  background: var(--acc-faint);
}
tbody tr:has(input[type='checkbox']:checked) td {
  background: var(--acc-faint);
}
td small {
  display: block;
  color: var(--muted);
  margin-top: 1px;
  font-size: 12px;
}
td a {
  font-weight: 600;
  color: var(--ink);
}
td a[href*='/documents/'] {
  white-space: nowrap;
}
td a:hover {
  color: var(--acc);
}
.inactive-line td {
  background: var(--bad-soft);
}
.total-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0;
}
.total-row[hidden] {
  display: none;
}
.total-row:last-child {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.totals {
  margin-left: auto;
  max-width: 360px;
  padding: 18px 22px;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.metric {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
  color: var(--text);
  display: block;
  min-width: 0;
}
a.metric:hover {
  text-decoration: none;
  border-color: var(--acc-line);
  box-shadow: 0 8px 22px rgba(37, 29, 201, 0.12);
}
.metric span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  display: block;
}
.metric strong {
  font-size: 28px;
  display: block;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 4px 0 6px;
  line-height: 1.1;
}
.metric strong.danger {
  color: var(--bad);
}
.metric em {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 9px;
  display: inline-block;
}
.metric em.bad {
  background: var(--bad-soft);
  color: var(--bad);
}
.metric em.warn {
  background: var(--warn-soft);
  color: var(--warn);
}
.metric em.ok {
  background: var(--ok-soft);
  color: var(--ok);
}
.metric em.info {
  background: var(--info-soft);
  color: var(--info);
}
.metric em.quiet {
  background: var(--head);
  color: var(--muted);
}
.todo {
  padding: 4px 18px 8px;
}
.todo > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.todo > div:last-child {
  border-bottom: 0;
}
.todo b {
  font-weight: 600;
  color: var(--ink);
}
.todo a {
  font-weight: 600;
  font-size: 12.5px;
  white-space: nowrap;
}
.todo .empty {
  padding: 22px 0;
}

/* --- Pastilles, messages, onglets, filtres ----------------------------------------------------- */
.badge {
  font-size: 11px;
  font-weight: 600;
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--ok-soft);
  color: var(--ok);
  white-space: nowrap;
  line-height: 1.4;
}
.badge.draft {
  background: var(--head);
  color: var(--muted);
}
.badge.confirmed {
  background: var(--ok-soft);
  color: var(--ok);
}
.badge.cancelled {
  background: var(--bad-soft);
  color: var(--bad);
}
.badge.late {
  background: var(--bad-soft);
  color: var(--bad);
}
.badge.info {
  background: var(--info-soft);
  color: var(--info);
}
.badge.warn {
  background: var(--warn-soft);
  color: var(--warn);
}
.warning {
  background: var(--warn-soft);
  border: 1px solid var(--warn-line);
  color: var(--warn);
  border-radius: var(--r);
  padding: 12px 16px;
  margin: 14px 0;
  font-size: 13.5px;
}
.messages {
  margin: 12px 0;
}
.message {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  background: var(--ok-soft);
  border: 1px solid var(--ok-line);
  color: var(--ok);
  padding: 11px 16px;
  border-radius: var(--r);
  margin: 8px 0;
  font-size: 13.5px;
}
.message.error {
  background: var(--bad-soft);
  border-color: var(--bad-line);
  color: var(--bad);
}
.message.warning {
  background: var(--warn-soft);
  border-color: var(--warn-line);
  color: var(--warn);
}
.message.info {
  background: var(--info-soft);
  border-color: var(--info-line);
  color: var(--info);
}
/* Bandeaux de message de l'éditeur (specs/218) : mêmes couleurs que les messages ; le bouton ferme le bandeau. */
.notice {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  background: var(--bad-soft);
  border: 1px solid var(--bad-line);
  color: var(--bad);
  padding: 11px 16px;
  border-radius: var(--r);
  margin: 8px 0;
  font-size: 13.5px;
}
.notice-warning {
  background: var(--warn-soft);
  border-color: var(--warn-line);
  color: var(--warn);
}
.notice-info {
  background: var(--info-soft);
  border-color: var(--info-line);
  color: var(--info);
}
.notice-success {
  background: var(--ok-soft);
  border-color: var(--ok-line);
  color: var(--ok);
}
.message-close {
  flex: none;
  min-height: 0;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
/* Champs obligatoires (specs/218) : astérisque rouge après le libellé ; légende posée par app.js. */
.field:has(> :is(input, select, textarea)[required]) > label::after,
label.required::after,
label:has(> input[required])::after {
  content: ' *';
  color: var(--bad);
}
.required-legend {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}
.tabs {
  display: flex;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  background: var(--rail);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 18px;
  overflow: auto;
}
.tabs a {
  padding: 7px 13px;
  white-space: nowrap;
  color: var(--muted);
  font-weight: 500;
  border-radius: 9px;
  font-size: 13px;
}
.tabs a:hover {
  color: var(--ink);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.6);
}
.tabs a.active {
  background: var(--card);
  color: var(--acc-ink);
  font-weight: 600;
  box-shadow:
    0 1px 2px rgba(5, 2, 64, 0.08),
    0 2px 6px rgba(5, 2, 64, 0.05);
}
/* Spec 316 : onglets de la page (niveau 1, sous le titre). Les onglets propres à une page (`.tabs`) passent au niveau 2 : plus discrets. */
.section-tabs {
  display: flex;
  gap: 4px;
  max-width: 100%;
  margin: 0 0 18px;
  border-bottom: 2px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.section-tabs a {
  flex: none;
  padding: 10px 16px;
  margin-bottom: -2px;
  white-space: nowrap;
  color: var(--muted);
  font-weight: 500;
  font-size: 14px;
  border-bottom: 2px solid transparent;
}
.section-tabs a:hover {
  color: var(--ink);
  text-decoration: none;
}
.section-tabs a.active {
  color: var(--acc-ink);
  font-weight: 600;
  border-bottom-color: var(--acc);
}
/* Spec 317 : accueil, bloc « Voir plus » fermé d'emblée sur ordinateur comme sur téléphone. */
.home-more {
  margin-bottom: 18px;
}
.home-more > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  font-weight: 600;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.home-more[open] > summary {
  margin-bottom: 12px;
}
.has-section-tabs main .tabs {
  background: transparent;
  border: 1px solid var(--line);
}
.has-section-tabs main .tabs a {
  font-size: 12.5px;
}
.filters {
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
  flex-wrap: wrap;
  align-items: center;
}
.filters input {
  min-width: 220px;
  flex: 1;
}
.empty {
  text-align: center;
  padding: 36px 16px;
  color: var(--muted);
}
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 14px 0;
  color: var(--muted);
  font-size: 12.5px;
}
.search-results {
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin: 6px 0;
  box-shadow: var(--shadow-lg);
  background: var(--white);
  position: relative;
  z-index: 5;
}
.search-results:empty {
  display: none;
}
.search-results button {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0;
  text-align: left;
  background: var(--white);
  color: var(--ink);
  font-weight: 400;
  border-bottom: 1px solid var(--line-soft);
  box-shadow: none;
  padding: 9px 12px;
  min-height: 0;
}
.search-results button:hover,
.search-results button.active {
  background: var(--acc-soft);
  color: var(--acc-ink);
}
.search-results p {
  margin: 0;
  padding: 10px 12px;
  color: var(--muted);
}
.line-input {
  width: 100px;
  min-width: 80px;
}
.row-name {
  min-width: 190px;
}
.inline-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.inline-form input {
  width: 150px;
}
.inline-form input[name='name'] {
  width: 280px;
}
/* Paramètres › Catégories (specs/122) : indentation par niveau ; sous 700 px chaque catégorie est une ligne empilée (nom · articles, puis le formulaire « Modifier » pleine largeur) */
.cat-table td:first-child {
  padding-left: calc(14px + var(--depth, 0) * 22px);
}
/* Tableaux larges (specs/122) : `scroll-tight` resserre colonnes et en-têtes pour que la dernière action reste visible à 1 200 px ; Stock : fiches empilées sous 700 px */
.scroll-tight th {
  white-space: normal;
}
.scroll-tight th,
.scroll-tight td {
  padding-left: 8px;
  padding-right: 8px;
}
.stock-table td:first-child {
  min-width: 130px;
}
.stock-table td:nth-child(2) {
  min-width: 110px;
}
details summary {
  cursor: pointer;
  color: var(--acc);
  padding: 6px 0;
  font-weight: 500;
}
pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 12px;
  background: var(--head);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px;
}
hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 16px 0;
}

/* --- Connexion ------------------------------------------------------------------------------- */
.login-body {
  background: var(--bg);
}
.login {
  max-width: 400px;
  margin: 12vh auto;
  padding: 32px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
}
.login .brand {
  padding: 0 0 18px;
  font-size: 20px;
}
.login .brand-logo {
  height: 64px;
}
.login h1 {
  font-size: 20px;
  margin: 0 0 4px;
}
.login p {
  margin: 0 0 18px;
}
.login input {
  width: 100%;
}
.login button {
  width: 100%;
  margin-top: 14px;
  justify-content: center;
}
.login label {
  display: block;
  margin: 14px 0 6px;
  font-size: 12.5px;
}

/* --- Barre du bas et menu (téléphone) ---------------------------------------------------------- */
.bottom-nav {
  display: none;
}
.menu-toggle {
  display: none;
}
/* Analytique (specs/010) */
.period-picker .tabs {
  margin-bottom: 10px;
}
.period-picker .tabs span {
  padding: 10px 12px;
  color: var(--muted);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.period-picker .tabs span.active {
  border-bottom-color: var(--acc);
  color: var(--acc-ink);
  font-weight: 600;
}
.period-free label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}
.period-free input {
  min-width: 0;
  flex: none;
}
.metrics.kpis .metric strong {
  font-size: 24px;
}
.cost-note {
  margin: -8px 0 16px;
  font-size: 12.5px;
}
.chart-legend {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.chart-legend i {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--sun);
  margin-left: 10px;
}
.chart-legend i.prev {
  background: var(--ink-pale);
}
.chart-wrap {
  padding: 18px 18px 4px;
}
.chart-wrap .empty {
  padding: 24px 0;
}
.chart {
  display: block;
  overflow: visible;
}
.chart .axis {
  stroke: var(--line);
}
.chart .bar {
  fill: var(--sun);
}
.chart .bar.prev {
  fill: var(--ink-pale);
}
.chart .bar.zero {
  fill: none;
}
.chart text {
  font-size: 11px;
  fill: var(--muted);
}
.chart text.value {
  font-size: 10.5px;
  fill: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.chart g:hover .bar {
  fill: var(--sun-strong);
}
tfoot td {
  font-weight: 600;
  background: var(--head);
  border-top: 1px solid var(--line);
}
tr.quiet td {
  color: var(--muted);
}
.grid-even {
  grid-template-columns: 1fr 1fr;
}
.grid-stock {
  grid-template-columns: 1fr 1.9fr;
}
/* Emplacements et inventaires (specs/012) */
.place {
  display: inline-block;
  background: var(--head);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11.5px;
  margin: 0 4px 3px 0;
  color: var(--muted);
}
.place b {
  color: var(--ink);
}
.checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px 14px;
  margin-bottom: 14px;
}
.checks label {
  font-weight: 500;
  font-size: 13.5px;
}
.count-sheet input.count {
  width: 110px;
  text-align: right;
  font-size: 15px;
  min-height: 40px;
}
.sheet-actions {
  padding: 12px 18px;
  border-top: 1px solid var(--line);
}
.pick-sheet .loc {
  font-size: 15px;
}
.tabs .count {
  background: var(--head);
  border-radius: 999px;
  padding: 0 7px;
  font-size: 11px;
  margin-left: 4px;
}
.sheet-actions .form-fields {
  margin-bottom: 10px;
}
.pipeline strong {
  font-size: 18px;
  color: var(--ink);
  white-space: nowrap;
}
.monthly td:first-child {
  white-space: nowrap;
}
.section-title {
  font-size: 17px;
  margin: 6px 0 14px;
}
.section-title small {
  font-size: 12.5px;
  font-weight: 500;
  margin-left: 8px;
}
@media (max-width: 1100px) {
  :root {
    --side: 200px;
  }
  main {
    padding: 0 20px 48px;
  }
  .metrics {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid:not(:where(.bk-island *)) {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  aside {
    transform: translateX(-100%);
    transition: transform 0.2s ease-out;
    width: min(300px, 86vw);
    box-shadow: none;
    padding-bottom: 80px;
  }
  body.nav-open aside {
    transform: translateX(0);
    box-shadow: 0 0 0 100vmax rgba(5, 2, 64, 0.45);
  }
  body.app {
    background: var(--bg);
  }
  main {
    margin: 0;
    padding: 0 16px 88px;
    border-radius: 0;
    min-height: 100dvh;
  }
  .topbar {
    height: 52px;
    font-size: 12.5px;
    position: sticky;
    top: 0;
    background: var(--bg);
    z-index: 10;
  }
  .top-logo {
    display: block;
  }
  .heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
  }
  h1 {
    font-size: 20px;
  }
  .metrics {
    gap: 10px;
  }
  .metric {
    padding: 13px 14px;
  }
  .metric strong {
    font-size: 24px;
  }
  .panel {
    padding: 14px 16px;
    border-radius: var(--r-lg);
  }
  .table-panel {
    padding: 0;
  }
  td,
  th {
    padding: 10px 12px;
  }
  .form-fields {
    grid-template-columns: 1fr;
  }
  .filters input {
    min-width: 140px;
  }
  .pilot {
    font-size: 12px;
  }
  .grid:not(:where(.bk-island *)) {
    gap: 12px;
  }
  .bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--card);
    border-top: 1px solid var(--line);
    z-index: 20;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .bottom-nav a,
  .bottom-nav button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 56px;
    padding: 6px 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .bottom-nav svg {
    width: 22px;
    height: 22px;
  }
  .bottom-nav a.active,
  .bottom-nav a[aria-current='page'] {
    color: var(--sun-strong);
  }
  .bottom-nav a:hover {
    text-decoration: none;
  }
  .menu-toggle {
    display: flex;
  }
  .actions .button,
  .actions button {
    min-height: 44px;
  }
  .recent thead {
    display: none;
  }
  .recent tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 4px;
    align-items: center;
    padding: 11px 16px;
    border-bottom: 1px solid var(--line-soft);
  }
  .recent tr:last-child {
    border-bottom: 0;
  }
  .recent td {
    display: block;
    padding: 0;
    border: 0;
    min-width: 0;
  }
  .recent td:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
    color: var(--muted);
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .recent td:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }
  .recent td:nth-child(4) {
    grid-column: 2;
    grid-row: 1;
    font-weight: 600;
  }
  .recent td.empty {
    grid-column: 1/-1;
  }
  .count-sheet .recent td:nth-child(2),
  .count-sheet .recent td:nth-child(3) {
    grid-column: 1;
    justify-self: start;
    font-size: 12.5px;
    color: var(--muted);
    text-align: left;
    white-space: normal;
  }
  .count-sheet .recent td:nth-child(2) {
    grid-row: 2;
  }
  .count-sheet .recent td:nth-child(3) {
    grid-row: 3;
  }
  .count-sheet .recent td:nth-child(2)::before {
    content: 'Attendu : ';
  }
  .count-sheet .recent td:nth-child(3)::before {
    content: 'Actuel : ';
  }
  .count-sheet .recent td:nth-child(4) {
    grid-column: 2;
    grid-row: 1;
  }
  .count-sheet .recent td:nth-child(5) {
    grid-column: 2;
    grid-row: 2/4;
    justify-self: end;
    align-self: start;
  }
  .count-sheet input.count {
    width: 96px;
  }
  .pick-sheet .recent td:nth-child(2)::before {
    content: 'À prendre : ';
  }
  .pick-sheet .recent td:nth-child(3)::before {
    content: 'Ligne : ';
  }
  .login {
    margin: 8vh 16px;
    padding: 24px 20px;
  }
  .metrics.kpis {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .metrics.kpis .metric {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 12px;
    padding: 12px 14px;
  }
  .metrics.kpis .metric span {
    width: 100%;
  }
  .metrics.kpis .metric strong {
    font-size: 22px;
    margin: 0;
    white-space: nowrap;
  }
  .chart-wrap {
    padding: 14px 10px 0;
  }
  .chart text {
    font-size: 9.5px;
  }
  .chart text.value {
    display: none;
  }
  .cat-table thead {
    display: none;
  }
  .cat-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 2px;
    align-items: start;
    padding: 11px 16px;
    border-bottom: 1px solid var(--line-soft);
  }
  .cat-table tr:last-child {
    border-bottom: 0;
  }
  .cat-table td {
    display: block;
    padding: 0;
    border: 0;
    min-width: 0;
  }
  .cat-table td:first-child {
    padding-left: calc(var(--depth, 0) * 14px);
    overflow-wrap: anywhere;
  }
  .cat-table td.num {
    align-self: center;
    color: var(--muted);
    font-size: 12.5px;
  }
  .cat-table td.num::before {
    content: 'Articles : ';
  }
  .cat-table td.cat-edit,
  .cat-table td[colspan] {
    grid-column: 1/-1;
  }
  .cat-table .inline-form {
    margin-top: 8px;
  }
  .cat-table .inline-form input {
    flex: 1 1 160px;
    width: auto;
    min-width: 0;
  }
  .cat-table .inline-form button {
    min-height: 44px;
  }
}
/* --- Parcours de vente guidé (specs/015) ------------------------------------------------------- */
/* Frise : où en est ce document dans sa chaîne. L'état se lit au mot, la couleur ne fait que doubler. */
.journey {
  display: flex;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  gap: 6px;
  flex-wrap: wrap;
}
.journey .step {
  flex: 1 1 130px;
  min-width: 120px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 9px 12px;
  box-shadow: var(--shadow);
  position: relative;
}
.journey .step a {
  display: block;
  color: inherit;
}
.journey .step a:hover {
  text-decoration: none;
}
.journey .step a:hover .step-doc {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.step-name {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.step-doc {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.journey .step.done {
  background: var(--ok-soft);
  border-color: var(--ok-line);
}
.journey .step.done .step-name,
.journey .step.done .step-doc {
  color: var(--ok);
}
.journey .step.current {
  border-color: var(--acc);
  background: var(--acc-soft);
  box-shadow: 0 0 0 1px var(--acc);
}
.journey .step.current .step-name,
.journey .step.current .step-doc {
  color: var(--acc-ink);
}
.journey .step.todo {
  background: var(--head);
  box-shadow: none;
}
.journey .step.todo .step-doc {
  color: var(--faint);
  font-weight: 500;
}
.journey .step.partial {
  background: var(--warn-soft);
  border-color: var(--warn-line);
}
.journey .step.partial .step-name,
.journey .step.partial .step-doc {
  color: var(--warn);
}
.mini-journey {
  display: inline-flex;
  gap: 3px;
  margin-left: 8px;
  vertical-align: middle;
}
.mini-journey i {
  flex: 0 0 14px;
  width: 14px;
  height: 6px;
  padding: 0;
  border-radius: 3px;
  background: var(--line);
}
.mini-journey i.done {
  background: var(--ok);
}
.mini-journey i.current {
  background: var(--acc);
}
.mini-journey i.partial {
  background: var(--warn);
}
.actions.next-step {
  margin-bottom: 22px;
}

/* Pastilles d'état supplémentaires : la ligne de commande dit ce qu'elle attend. */
.badge.ok {
  background: var(--ok-soft);
  color: var(--ok);
}
.badge.bad {
  background: var(--bad-soft);
  color: var(--bad);
}
.badge.quiet {
  background: var(--head);
  color: var(--muted);
}

/* Parcours du document (specs/017) : l'arbre complet, une ligne par document, décalée par génération. */
.lineage {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.lineage-node {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 10px;
  margin-left: calc(var(--d, 0) * 20px);
  border-left: 2px solid var(--line);
  background: var(--card);
  border-radius: 0 var(--r) var(--r) 0;
}
.lineage-node + .lineage-node {
  margin-top: 4px;
}
.lineage-node.current {
  background: var(--acc-soft);
  border-left-color: var(--acc);
}
.lineage-node.purchase {
  border-left-color: var(--warn);
  border-left-style: dashed;
}
.lineage-node.cancelled {
  opacity: 0.62;
}
.lineage-kind {
  font-size: 11.5px;
  color: var(--muted);
  min-width: 132px;
}
.lineage-number {
  font-weight: 600;
}
.lineage-meta {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
@media (max-width: 700px) {
  .lineage-node {
    margin-left: calc(var(--d, 0) * 10px);
    gap: 6px;
  }
  .lineage-kind {
    min-width: 0;
    flex-basis: 100%;
  }
  .lineage-meta {
    margin-left: 0;
    flex-basis: 100%;
  }
}

/* Éditeur : numéro d'étape, stock par ligne, résultats de recherche décrits. */
.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--acc-soft);
  color: var(--acc-ink);
  font-size: 11.5px;
  font-weight: 700;
  margin-right: 7px;
  vertical-align: 1px;
}
.stock {
  display: inline-block;
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 999px;
  padding: 1px 8px;
}
.stock-ok {
  background: var(--ok-soft);
  color: var(--ok);
}
.stock-warn {
  background: var(--warn-soft);
  color: var(--warn);
}
.stock-bad {
  background: var(--bad-soft);
  color: var(--bad);
}
.stock-none {
  background: var(--head);
  color: var(--muted);
}
.line-cost {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--muted);
}
.line-cost .amount {
  font-weight: 600;
  color: var(--ok);
}
.line-cost.negative .amount {
  color: var(--bad);
}
/* Priorité au stock (specs/197) : conseil de source sous la ligne, masqué par le mode devant client. */
.priority-note {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--muted);
}
.priority-note.priority-dormant {
  color: var(--ok);
  font-weight: 600;
}
.priority-note.priority-none {
  color: var(--bad);
}
.priority-note .priority-swap {
  width: auto;
  min-height: 0;
  margin-left: 4px;
  padding: 1px 8px;
  font-size: 11.5px;
}
.line-margin {
  font-weight: 600;
  color: var(--ok);
}
.line-margin.negative {
  color: var(--bad);
}
.row-name strong {
  color: var(--ink);
}
.line-title {
  color: var(--text);
}
.line-total {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.search-results .result-name {
  display: block;
}
.search-results .result-hint {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 2px;
  flex-wrap: wrap;
}
#editor-table th:last-child,
#editor-table td:last-child {
  width: 1%;
}
#editor-table .line-input {
  width: 84px;
  min-width: 64px;
} /* « Retirer » visible à 1 280 px (specs/061) */

/* Récapitulatif en direct : la remise globale à gauche, les totaux à droite. */
.recap-body {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 18px;
  align-items: start;
}
.recap .totals {
  margin: 0;
  padding: 0;
  max-width: none;
}
.recap-side .field {
  max-width: 220px;
}
.recap-margin {
  margin: 16px 0 0;
  font-size: 13.5px;
}
.recap-margin strong {
  color: var(--ok);
  font-size: 16px;
}
.recap-margin.negative strong {
  color: var(--bad);
}
.submit-panel {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 1100px) {
  .recap-body {
    grid-template-columns: 1fr;
  }
  .recap .totals {
    margin-left: auto;
    max-width: 360px;
  }
}
@media (max-width: 700px) {
  .journey {
    gap: 4px;
  }
  .journey .step {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    padding: 8px 10px;
  }
  .step-name {
    font-size: 12px;
  }
  .recap-side .field {
    max-width: none;
  }
  .submit-panel button {
    width: 100%;
    justify-content: center;
  }
}
/* Attente visible (specs/218) : un rond qui tourne à droite du bouton d'envoi grisé ; sans animation si l'on préfère. */
.is-busy button[data-label]::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  vertical-align: -3px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: busy-spin 0.8s linear infinite;
}
@keyframes busy-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
  .is-busy button[data-label]::after {
    animation: none;
  }
}
@media print {
  aside,
  .bottom-nav,
  .topbar,
  .actions,
  footer {
    display: none !important;
  }
  main {
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 0;
  }
  body.app {
    background: var(--white);
  }
  .panel {
    box-shadow: none;
  }
}
.packing .parcel {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 14px;
  margin-top: 12px;
  background: var(--card);
}
.packing .parcel-head {
  display: flex;
  gap: 14px;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.packing .parcel .actions {
  margin-top: 10px;
}
/* Recherche d'article filtrée et bloc Transport (specs/037) */
.product-finder {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.product-finder input {
  flex: 1 1 260px;
  min-width: 0;
}
.product-finder select {
  flex: 0 1 190px;
  min-width: 0;
}
.transport-choice {
  display: flex;
  gap: 10px 22px;
  flex-wrap: wrap;
  margin: 6px 0 4px;
}
.transport-choice label {
  font-weight: 400;
  display: flex;
  gap: 6px;
  align-items: center;
}
/* Estimation d'après la grille du transporteur (specs/200) */
.estimator-inputs {
  display: flex;
  gap: 8px 14px;
  flex-wrap: wrap;
  align-items: center;
}
.estimator-inputs label {
  font-weight: 400;
  display: flex;
  gap: 6px;
  align-items: center;
}
.estimator-inputs input[type='number'] {
  width: 7em;
}
/* Adresse de livraison en cases et suggestions d'adresses (specs/203) */
.address-fields {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.address-fields legend {
  font-weight: 600;
  padding: 0;
  margin-bottom: 6px;
}
.address-grid {
  display: grid;
  grid-template-columns: 9em minmax(0, 2fr) minmax(0, 1fr);
  gap: 8px 12px;
}
.address-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 400;
  min-width: 0;
}
.address-grid .address-wide {
  grid-column: 1 / -1;
}
.address-suggest-host {
  position: relative;
}
.address-suggestions {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 6;
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  background: var(--white);
}
.address-suggestions li {
  padding: 9px 12px;
  cursor: pointer;
  color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
}
.address-suggestions li:hover,
.address-suggestions li[aria-selected='true'] {
  background: var(--acc-soft);
  color: var(--acc-ink);
}
@media (max-width: 640px) {
  .address-grid {
    grid-template-columns: 1fr;
  }
}
/* Filtres des listes (specs/039) */
.filter-panel {
  flex-basis: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--white);
  padding: 0;
}
.filter-panel > summary {
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 600;
}
.filter-panel[open] > summary {
  border-bottom: 1px solid var(--line-soft);
}
.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px 16px;
  padding: 14px;
}
.filter-grid .filter-wide {
  grid-column: span 2;
}
.filter-field {
  margin: 0;
  min-width: 0;
}
.filter-field input,
.filter-field select {
  width: 100%;
  min-width: 0;
}
.filters .filter-field input {
  min-width: 0;
  flex: none;
}
.filter-range {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.filter-range input {
  flex: 1 1 110px;
  width: auto;
}
.filter-range select {
  flex: 1 1 170px;
  width: auto;
}
.filter-range span {
  color: var(--muted);
  font-size: 13px;
}
.filter-actions {
  padding: 0 14px 14px;
}
.filter-sort {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
  margin-left: auto;
}
.filter-sort select {
  width: auto;
}
.filter-chips {
  flex-basis: 100%;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--acc-soft);
  color: var(--acc-ink);
  font-size: 13px;
  text-decoration: none;
}
.chip span {
  font-weight: 700;
}
@media (max-width: 640px) {
  .filter-grid .filter-wide {
    grid-column: auto;
  }
  .filter-sort {
    margin-left: 0;
    flex-basis: 100%;
  }
  .filter-sort select {
    flex: 1;
  }
}
/* Aperçu de la signature mise en forme (specs/040) : cadre isolé, fond blanc comme dans une messagerie */
.signature-preview {
  display: block;
  width: 100%;
  height: 260px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--white);
  margin-top: 8px;
}
/* Modification groupée (specs/041) */
.bulk-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 18px;
}
.bulk-all {
  font-weight: 400;
  display: flex;
  gap: 8px;
  align-items: center;
}
.bulk-change {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.bulk-change select {
  flex: 0 1 240px;
  min-width: 0;
}
.bulk-change input {
  flex: 1 1 200px;
  min-width: 0;
}
.select-cell {
  width: 36px;
  text-align: center;
}
tr.quiet td {
  opacity: 0.6;
}
/* Messagerie façon Outlook (specs/042) : dossiers | liste | lecture, trois volets qui défilent chacun ; un seul à la fois sur téléphone */
.mail-app {
  display: grid;
  grid-template-columns: 232px minmax(300px, 390px) minmax(0, 1fr);
  height: calc(100dvh - 166px);
  min-height: 540px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.mail-nav {
  border-right: 1px solid var(--line);
  overflow-y: auto;
  padding: 10px 8px 16px;
  background: var(--row-hover);
  min-width: 0;
}
.mail-list-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  border-right: 1px solid var(--line);
}
.mail-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.mail-reader {
  overflow-y: auto;
  min-width: 0;
  position: relative;
}
.mail-boxes {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.mail-box {
  display: block;
  padding: 7px 10px;
  border-radius: var(--r);
  color: var(--ink);
  min-width: 0;
}
.mail-box:hover {
  text-decoration: none;
  background: var(--head);
}
.mail-box.active {
  background: var(--acc-soft);
}
.mail-box-name {
  display: block;
  font-weight: 600;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-box small {
  display: block;
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-box-add {
  font-size: 12px;
  padding: 3px 10px;
  color: var(--muted);
}
.folder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 2px 4px 10px;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.icon-button {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--muted);
  min-height: 30px;
  min-width: 30px;
  padding: 5px;
  border-radius: 6px;
  justify-content: center;
}
.icon-button:hover {
  background: var(--head);
  color: var(--ink);
  border: 0;
}
.icon-button.on {
  color: var(--bad);
}
.icon-button .icon {
  width: 17px;
  height: 17px;
}
.folder-tree {
  list-style: none;
  margin: 0;
  padding: 0;
}
.folder {
  display: flex;
  align-items: center;
  padding-left: calc(var(--d, 0) * 14px);
  border-radius: var(--r);
}
.folder[hidden] {
  display: none;
}
.folder:hover {
  background: var(--rail);
}
.folder.active {
  background: var(--acc-soft);
}
.folder a,
.folder .folder-label {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  color: var(--text);
  font-size: 13px;
}
.folder a:hover {
  text-decoration: none;
}
.folder.active a {
  color: var(--acc-ink);
  font-weight: 600;
}
.folder .icon {
  flex: none;
  color: var(--muted);
  width: 16px;
  height: 16px;
}
.folder.active .icon {
  color: var(--acc-ink);
}
.folder-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.folder-count {
  font-size: 11.5px;
  color: var(--acc-ink);
  font-weight: 700;
  padding-right: 2px;
}
.folder .twisty,
.twisty-space {
  width: 20px;
  min-width: 20px;
  min-height: 26px;
  padding: 0;
  flex: none;
}
.folder .twisty {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--muted);
  border-radius: 6px;
  justify-content: center;
}
.folder .twisty:hover {
  background: var(--field-line);
  color: var(--ink);
}
.folder .twisty .icon {
  width: 14px;
  height: 14px;
}
.twisty .icon {
  transition: transform 0.15s;
}
.twisty.shut .icon {
  transform: rotate(-90deg);
}
.folder-more {
  opacity: 0;
  min-height: 26px;
  min-width: 26px;
}
.folder:hover .folder-more,
.folder-more:focus-visible {
  opacity: 1;
}
.folder.unselectable .folder-label {
  color: var(--muted);
}
.folder.drop {
  background: var(--acc-soft);
  outline: 2px dashed var(--acc);
  outline-offset: -2px;
}
.folder-hint {
  padding: 10px 10px 0;
}
.folder-menu {
  margin: 2px 6px 6px 26px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  padding: 4px;
}
.folder-menu[hidden] {
  display: none;
}
.folder-menu button {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--ink);
  font-weight: 500;
  justify-content: flex-start;
  min-height: 32px;
  padding: 6px 10px;
}
.folder-menu button:hover {
  background: var(--head);
}
.folder-menu button.danger {
  color: var(--bad);
}
.mail-list-head {
  padding: 12px 14px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mail-list-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.mail-list-title h2 {
  margin: 0;
  font-size: 16px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-list-title .muted {
  font-size: 12.5px;
  white-space: nowrap;
}
.mail-folders-toggle {
  display: none;
}
.mail-search {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--field-line);
  border-radius: var(--r);
  padding-left: 10px;
  background: var(--white);
  color: var(--muted);
}
.mail-search:focus-within {
  outline: 2px solid var(--acc);
  border-color: var(--acc);
}
.mail-search input {
  border: 0;
  flex: 1;
  min-width: 0;
  padding: 7px 4px;
  min-height: 34px;
}
.mail-search input:focus {
  outline: none;
}
.mail-search select {
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0 var(--r) var(--r) 0;
  min-height: 34px;
  font-size: 12.5px;
  color: var(--muted);
  background: var(--head);
  padding: 4px 8px;
}
.mail-filters {
  display: flex;
  gap: 2px;
  margin-bottom: -1px;
  overflow-x: auto;
  scrollbar-width: none;
}
.mail-filters::-webkit-scrollbar {
  display: none;
}
.mail-filters a {
  padding: 6px 10px 8px;
  font-size: 12.5px;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.mail-filters a:hover {
  text-decoration: none;
  color: var(--ink);
}
.mail-filters a.active {
  color: var(--acc-ink);
  border-bottom-color: var(--acc);
  font-weight: 600;
}
.mail-toolbar {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 0 10px;
}
.mail-toolbar[hidden] {
  display: none;
}
.mail-toolbar button,
.mail-toolbar select {
  min-height: 32px;
  padding: 4px 10px;
  font-size: 12.5px;
}
.mail-toolbar select {
  max-width: 160px;
}
.mail-all {
  display: flex;
  align-items: center;
  font-size: 12.5px;
  color: var(--muted);
  margin-right: auto;
  font-weight: 500;
}
.mail-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mail-group {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 14px 5px;
  background: var(--card);
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: 1px solid var(--line-soft);
}
.mail-row {
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  transition: background 0.1s;
}
.mail-row:hover {
  background: var(--acc-faint);
}
.mail-row.checked {
  background: var(--acc-soft);
}
.mail-row.active {
  background: var(--acc-soft);
}
.mail-row.unread::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--acc);
}
.mail-row.busy {
  opacity: 0.4;
  pointer-events: none;
}
.mail-row .mail-check {
  margin: 13px 0 0 10px;
  flex: none;
  width: 16px;
  height: 16px;
  opacity: 0;
}
.mail-row:hover .mail-check,
.mail-row .mail-check:checked,
.mail-row .mail-check:focus-visible,
.mail-list-pane:has(.mail-toolbar:not([hidden])) .mail-check {
  opacity: 1;
}
.mail-link {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 8px;
  row-gap: 1px;
  padding: 9px 14px 10px 8px;
  color: var(--text);
}
.mail-link:hover {
  text-decoration: none;
}
.mail-from {
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13.5px;
}
.mail-date {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  text-align: right;
}
.mail-subject {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mail-icons {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  align-items: center;
  color: var(--muted);
}
.mail-snippet {
  grid-column: 1/-1;
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mail-snippet .place {
  margin: 0 4px 0 0;
  font-size: 11px;
  padding: 0 6px;
}
.mail-status {
  grid-column: 1/-1;
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}
.mail-row.unread .mail-from {
  font-weight: 700;
}
.mail-row.unread .mail-subject {
  font-weight: 600;
  color: var(--acc-ink);
}
.icon.flag {
  color: var(--bad);
}
.icon.answered {
  color: var(--faint);
  margin-right: 4px;
}
.mail-empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--muted);
}
.mail-pages {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--muted);
}
.mail-pages span {
  margin-right: auto;
}
.reader {
  padding: 12px 24px 32px;
}
.reader-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--line-soft);
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 2;
}
.reader-bar .button {
  min-height: 32px;
  padding: 5px 11px;
  font-size: 12.5px;
}
.reader-tools {
  display: flex;
  gap: 2px;
  align-items: center;
  margin-left: auto;
}
.reader-tools select {
  min-height: 32px;
  font-size: 12.5px;
  padding: 4px 8px;
  max-width: 170px;
  margin-left: 4px;
}
.reader-back {
  display: none;
}
.reader-subject {
  font-size: 19px;
  margin: 16px 0 14px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.reader-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--acc-soft);
  color: var(--acc-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex: none;
}
.reader-who {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.reader-meta {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}
.reader-date {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}
.reader-note {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 10px;
}
.reader-attachments {
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.reader-attachments > .helptext {
  margin: 0;
}
.attachment {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 8px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: center;
}
.attachment-name {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.attachment-ai {
  flex-basis: 100%;
  font-size: 12.5px;
  margin: 0;
}
.assistant-panel {
  margin: 16px 0 0;
  border: 1px solid var(--line);
  border-left: 3px solid var(--acc);
  border-radius: var(--r);
  padding: 10px 14px;
  background: var(--head);
  font-size: 13.5px;
}
.assistant-panel > p,
.assistant-panel > ul {
  margin: 6px 0;
}
.assistant-panel ul {
  padding-left: 20px;
}
.assistant-panel h3 {
  font-size: 13px;
  margin: 10px 0 2px;
}
.assistant-head {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}
.assistant-actions {
  display: grid;
  gap: 8px;
  justify-items: start;
  margin: 10px 0;
}
.assistant-actions form {
  margin: 0;
  max-width: 100%;
}
.assistant-actions button,
.assistant-actions .button {
  max-width: 100%;
  white-space: normal;
  text-align: left;
  margin: 0;
}
.assistant-lines {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 13px;
  background: var(--card);
}
.assistant-lines th,
.assistant-lines td {
  border-bottom: 1px solid var(--line-soft);
  padding: 4px 8px;
  text-align: left;
  vertical-align: top;
}
.assistant-lines .num {
  text-align: right;
  white-space: nowrap;
}
.assistant-panel form {
  margin-top: 8px;
}
.mail-snippet .badge {
  margin-right: 4px;
}
#ai-key {
  width: min(440px, 100%);
}
.reader-images {
  margin: 16px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  background: var(--head);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.reader-images button {
  min-height: 28px;
  padding: 3px 10px;
  font-size: 12px;
}
.reader-frame {
  display: block;
  width: 100%;
  height: 320px;
  border: 0;
  margin-top: 16px;
  background: var(--white);
}
.reader-plain {
  margin-top: 14px;
  font-size: 12.5px;
}
.reader-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}
.reader-empty {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  text-align: center;
  padding: 30px;
}
.reader-empty .icon {
  width: 46px;
  height: 46px;
  color: var(--faint);
  stroke-width: 1.2;
}
.reader-empty p {
  margin: 10px 0 0;
  max-width: 36ch;
}
.mail-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--white);
  padding: 10px 16px;
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  z-index: 60;
  font-size: 13.5px;
  max-width: 90vw;
}
.mail-toast.bad {
  background: var(--bad);
}
.mail-toast[hidden] {
  display: none;
}
.mail-dialog {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--shadow-lg);
  width: min(420px, 92vw);
  color: var(--text);
}
.mail-dialog::backdrop {
  background: rgba(5, 2, 64, 0.35);
}
.mail-dialog [hidden] {
  display: none;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.danger-button {
  background: var(--bad);
  border-color: var(--bad);
}
.danger-button:hover {
  background: var(--bad-hover);
  border-color: var(--bad-hover);
}
.compose {
  padding: 0;
  max-width: 1000px;
}
.compose-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.compose-row[hidden] {
  display: none;
}
.compose-label {
  width: 56px;
  flex: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  margin: 0;
}
.compose-value {
  flex: 1;
  min-width: 0;
}
.compose-value input {
  width: 100%;
  border-color: transparent;
  padding-left: 4px;
}
.compose-value input:hover {
  border-color: var(--line);
}
.link-button {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--acc);
  font-weight: 600;
  min-height: 30px;
  padding: 4px 8px;
}
.link-button:hover {
  background: var(--acc-soft);
  color: var(--acc-ink);
  border: 0;
}
.link-button[hidden] {
  display: none;
}
.compose-body {
  padding: 12px 18px 6px;
}
.compose-body textarea {
  min-height: 340px;
  border-color: transparent;
  padding: 6px;
  font-size: 14px;
  line-height: 1.55;
}
.compose-body textarea:hover {
  border-color: var(--line);
}
.compose-files {
  padding: 4px 18px 12px;
}
.file-drop {
  display: block;
  border: 1px dashed var(--field-line);
  border-radius: var(--r);
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 400;
  background: var(--head);
  margin-bottom: 6px;
}
.file-drop.over {
  border-color: var(--acc);
  background: var(--acc-soft);
}
.file-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font-size: 12.5px;
}
.file-list li {
  padding: 2px 0;
}
.compose-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
@media (max-width: 1250px) {
  .mail-app {
    grid-template-columns: 200px minmax(260px, 330px) minmax(0, 1fr);
  }
  .reader {
    padding: 12px 18px 28px;
  }
}
@media (max-width: 900px) {
  .mail-app {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .mail-nav {
    display: none;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .mail-app.folders-open .mail-nav {
    display: block;
  }
  .mail-app.reading .mail-nav,
  .mail-app.reading .mail-list-pane {
    display: none;
  }
  .mail-app:not(.reading) .mail-reader {
    display: none;
  }
  .mail-list-pane {
    border-right: 0;
  }
  .mail-list,
  .mail-reader {
    overflow: visible;
  }
  .mail-folders-toggle {
    display: inline-flex;
    min-height: 32px;
    padding: 4px 10px;
    font-size: 12.5px;
  }
  .reader-back {
    display: inline-flex;
  }
  .reader {
    padding: 8px 14px 20px;
  }
  .reader-bar {
    top: 52px;
  }
  .reader-bar .button span {
    display: none;
  }
  .reader-tools {
    margin-left: 0;
  }
  .reader-head {
    flex-wrap: wrap;
  }
  .reader-date {
    flex-basis: 100%;
    padding-left: 50px;
  }
  .mail-row .mail-check,
  .folder-more {
    opacity: 1;
  }
  .mail-group {
    top: 52px;
  }
  .compose-row {
    padding: 5px 12px;
  }
  .compose-body,
  .compose-files {
    padding-left: 12px;
    padding-right: 12px;
  }
  .compose-label {
    width: 44px;
  }
}
/* Lien d'évitement (specs/221, R-1627) : hors écran, visible dès qu'il prend le focus au clavier. */
.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--r);
  background: var(--ink);
  color: var(--white);
  font-weight: 600;
}
.skip:focus {
  left: 8px;
  outline: 3px solid var(--sun-strong);
  text-decoration: none;
}
main:focus {
  outline: none;
}
/* Recherche générale (specs/046) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.top-search {
  flex: 1;
  max-width: 460px;
  margin: 0 auto;
  position: relative;
}
.top-search input {
  width: 100%;
  height: 36px;
  padding: 6px 52px 6px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.search-key {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font: 600 11px/1 var(--font);
  color: var(--muted);
  background: var(--head);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 6px;
  pointer-events: none;
}
.top-search:focus-within .search-key {
  opacity: 0;
}
.top-search input:focus {
  border-color: var(--acc);
}
.search-page {
  display: flex;
  gap: 10px;
}
.search-page input {
  flex: 1;
}
.search-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.search-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.search-list li {
  border-top: 1px solid var(--line-soft);
}
.search-list li:first-child {
  border-top: 0;
}
.search-list a {
  display: block;
  padding: 8px 0;
  color: var(--ink);
}
.search-list a small {
  display: block;
}
/* Adresses de chantier (specs/044), suivi (specs/048) */
.site-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
}
.followup-form {
  margin-bottom: 14px;
}
.followup-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.followup-list li {
  padding: 10px 0 10px 12px;
  border-top: 1px solid var(--line-soft);
  border-left: 3px solid transparent;
}
.followup-list li.due {
  border-left-color: var(--warn);
  background: var(--warn-soft);
}
.followup-list li.planned {
  border-left-color: var(--acc);
}
.followup-list p {
  margin: 4px 0;
}
@media (max-width: 640px) {
  .top-search {
    display: none;
  }
  .site-row {
    flex-direction: column;
  }
}
@media (min-width: 641px) {
  .nav-search {
    display: none !important;
  }
}
.grid-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.grid-row input[name='name'] {
  min-width: 180px;
}
.totp-key {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 16px;
  letter-spacing: 0.06em;
  background: var(--head);
  padding: 6px 10px;
  border-radius: 6px;
  display: inline-block;
}
.revealed {
  border: 2px solid var(--warn);
}
/* Cases à cocher dans un champ : à côté de leur texte (specs/045, 051, 054) */
.field input[type='checkbox'],
.field input[type='radio'] {
  width: auto;
  margin: 0 6px 0 0;
  vertical-align: middle;
}
.inline-form select {
  width: auto;
}

/* --- Graphiques Bklit (specs/057) : cadres autour des îlots React ; le style intérieur est dans static/charts/ ------ */
.chart-box {
  padding: 14px 18px 10px;
  min-width: 0;
}
.chart-box .chart-fallback {
  margin: 0;
  padding: 18px 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.chart-pair {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-soft);
}
.chart-pair > div + div {
  border-left: 1px solid var(--line-soft);
}
.chart-pair h3 {
  margin: 14px 18px 0;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
}
.chart-row {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.chart-row.single {
  grid-template-columns: minmax(0, 1fr);
}
.activity-total {
  margin: 14px 18px 0;
  color: var(--muted);
  font-size: 13px;
}
.activity-total strong {
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-right: 4px;
}
.activity-total em {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 9px;
  margin-left: 6px;
}
.activity-total em.ok {
  background: var(--ok-soft);
  color: var(--ok);
}
.activity-total em.bad {
  background: var(--bad-soft);
  color: var(--bad);
}
.activity-total em.quiet {
  background: var(--head);
  color: var(--muted);
}
@media (max-width: 1100px) {
  .chart-row {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 700px) {
  .chart-pair {
    grid-template-columns: minmax(0, 1fr);
  }
  .chart-pair > div + div {
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }
  .chart-box {
    padding: 10px 12px 6px;
  }
}
.client-mode [data-cost-only] {
  display: none !important;
}
[data-client-mode][aria-pressed='true'],
[data-client-mode][aria-pressed='true']:hover {
  background: var(--acc);
  color: var(--white);
  border-color: var(--acc);
}
/* Aide des raccourcis de l'éditeur (specs/087) : inutile sans clavier */
.shortcuts {
  margin: 0;
  padding: 8px 22px 10px;
}
.shortcuts kbd {
  font: 600 11px/1 var(--font);
  background: var(--head);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 5px;
}
@media (hover: none) {
  .shortcuts {
    display: none;
  }
}
/* Calendrier des livraisons de l'accueil (specs/099) : grille 7 colonnes, liste par jour sur téléphone */
.cal {
  padding: 14px 18px;
}
.cal-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.cal-bar h3 {
  margin: 0;
  font-size: 15px;
}
.cal-bar .tabs {
  margin: 0;
}
.cal-nav {
  display: flex;
  gap: 6px;
}
.cal-nav a {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
  background: var(--white);
}
.cal-head,
.cal-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.cal-head span {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  padding: 2px 6px;
}
.cal-week {
  margin-bottom: 4px;
}
.cal-day {
  min-height: 70px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 6px;
  font-size: 12px;
  background: var(--white);
}
.cal-day.out {
  background: var(--head);
  color: var(--muted);
}
.cal-day.today {
  border-color: var(--acc);
  box-shadow: 0 0 0 1px var(--acc);
}
.cal-day b {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 3px;
}
.cal-day ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.cal-day li {
  border-left: 3px solid var(--info);
  background: var(--info-soft);
  border-radius: 4px;
  padding: 3px 5px;
  overflow-wrap: anywhere;
}
.cal-day li small {
  display: block;
  color: var(--muted);
}
.cal-day li.late {
  border-color: var(--bad);
  background: var(--bad-soft);
}
.cal-day li.purchase {
  border-color: var(--ok);
  background: var(--ok-soft);
}
.cal-late {
  margin: 0 0 10px;
  padding: 8px 12px;
  background: var(--bad-soft);
  border-radius: 10px;
  font-size: 13px;
}
.cal-late ul,
.cal-remind ul {
  margin: 4px 0 0;
  padding-left: 18px;
}
@media (max-width: 700px) {
  .cal-head {
    display: none;
  }
  .cal-week {
    display: block;
  }
  .cal-day {
    margin-bottom: 4px;
    min-height: 0;
  }
  .cal-day.empty {
    display: none;
  }
  .cal-day.today.empty {
    display: block;
  }
}
/* Tâches et agenda partagé (specs/105) : réutilise les cases .cal* du calendrier des livraisons */
.task-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.task-list li {
  border-left: 3px solid var(--info);
  background: var(--info-soft);
  border-radius: 4px;
  padding: 5px 8px;
}
.task-list li.late {
  border-color: var(--bad);
  background: var(--bad-soft);
}
.task-list small {
  color: var(--muted);
}
.tasks-table tr.task-late td:first-child {
  box-shadow: inset 3px 0 0 var(--bad);
  padding-left: 14px;
}
.tasks-table td small {
  display: block;
  color: var(--muted);
}
.task-actions form {
  margin: 0;
}
.task-block {
  margin-bottom: 12px;
}
.cal-day li.task.done a {
  text-decoration: line-through;
  color: var(--muted);
}
.cal-day li.meeting {
  border-color: var(--ok);
  background: var(--ok-soft);
}
.task-quick {
  margin-top: 10px;
}
.inline-form {
  display: flex;
  gap: 6px;
  align-items: center;
}
.ged-table td small {
  display: block;
  color: var(--muted);
}
.ged-table .gone {
  color: var(--bad);
}
.ged-table .ged-meta {
  display: none;
}
@media (max-width: 700px) {
  .ged-table .ged-col {
    display: none;
  }
  .ged-table .ged-meta {
    display: block;
  }
}
.opening-steps {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: grid;
  gap: 4px;
}
.opening-steps li {
  display: grid;
  grid-template-columns: 1.4em 1fr;
  align-items: baseline;
}
.opening-steps li.todo .opening-mark {
  color: var(--muted);
}
.opening-steps li.done .opening-mark {
  color: var(--ok);
}
.opening-mark {
  text-align: center;
}
.field input[type='file'] {
  max-width: 100%;
  font-size: 13px;
}
.field input::placeholder {
  font-size: 13px;
}
.field select + input {
  margin-top: 6px;
}

.ged-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.ged-tree {
  position: sticky;
  top: 12px;
}
.ged-tree h3 {
  margin: 14px 0 4px;
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
}
.ged-node {
  display: block;
  padding: 5px 8px 5px calc(8px + var(--d, 0) * 14px);
  border-radius: 6px;
  overflow-wrap: anywhere;
}
.ged-node.current {
  background: var(--acc-soft);
  font-weight: 600;
}
.ged-crumbs {
  margin: 0 0 10px;
}
.ged-subfolders {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.ged-folder-tools {
  margin-bottom: 12px;
}
.ged-folder-tools form {
  margin-top: 8px;
}
.ged-choices {
  border: 0;
  padding: 0;
  margin: 12px 0;
}
.ged-choices legend {
  font-weight: 600;
  margin-bottom: 6px;
}
@media (max-width: 800px) {
  .ged-layout {
    grid-template-columns: 1fr;
  }
  .ged-tree {
    position: static;
  }
}

/* Fiche client : bandeau catégorie et prix, écran Prix nets (specs/119) */
.client-band {
  display: flex;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  margin: 0 0 16px;
}
.client-band > div {
  flex: 1 1 170px;
  box-shadow:
    -1px 0 0 var(--line),
    0 -1px 0 var(--line);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.client-band span {
  font-size: 12px;
  color: var(--muted);
}
.client-band strong {
  font-size: 15px;
  overflow-wrap: anywhere;
}
.client-band em {
  font-style: normal;
  color: var(--muted);
  font-weight: 500;
}
.client-band small {
  font-size: 12px;
}
.price-table td small {
  display: block;
  color: var(--muted);
}
.price-table tr.own td {
  background: var(--acc-soft);
}
.price-edit {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.price-edit input {
  width: 110px;
  min-width: 0;
  flex: none;
}
.price-edit button {
  padding: 5px 10px;
  font-size: 12.5px;
}
.inline-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}
.inline-check input {
  min-width: 0;
  flex: none;
}
.price-table td[data-label]::before {
  content: attr(data-label);
  display: none;
}
@media (max-width: 640px) {
  .client-band > div {
    flex-basis: 140px;
  }
  .price-table thead {
    display: none;
  }
  .price-table,
  .price-table tbody,
  .price-table tr {
    display: block;
  }
  .price-table tr {
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
  }
  .price-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 3px 0;
    border: 0;
    text-align: right;
  }
  .price-table td:first-child {
    display: block;
    text-align: left;
  }
  .price-table td[data-label]::before {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    text-align: left;
  }
  .price-table td > div {
    text-align: right;
  }
  .price-table tr.own {
    background: var(--acc-soft);
  }
  .price-table tr.own td {
    background: transparent;
  }
  .price-table td[data-label='Prix propre'] {
    display: block;
    padding-top: 6px;
  }
  .price-table td[data-label='Prix propre']::before {
    margin-bottom: 4px;
  }
  .price-edit input {
    flex: 1 1 140px;
    width: auto;
  }
}

/* Fichiers (specs/122) : l'arbre de dossiers est un <aside class="panel ged-tree"> ; sans ce rattrapage il hérite de la barre latérale
   (texte clair sur fond blanc, tiré hors écran sous 700 px). Une balise <div> dans ged.html rendrait ces lignes inutiles. */
aside.ged-tree {
  inset: auto;
  width: auto;
  display: block;
  overflow: visible;
  z-index: auto;
  background: var(--card);
  color: var(--text);
  padding: 14px 16px;
  transform: none;
  transition: none;
}
body.nav-open aside.ged-tree {
  transform: none;
  box-shadow: var(--shadow-card);
}
aside.ged-tree a {
  display: block;
  gap: 0;
  margin: 0;
  min-height: 0;
  font-size: inherit;
  font-weight: 500;
  color: var(--text);
}
aside.ged-tree a:hover {
  background: var(--head);
  color: var(--ink);
}
aside.ged-tree a.ged-node.current {
  background: var(--acc-soft);
  color: var(--acc-ink);
  font-weight: 600;
}

/* Vignettes de l'écran Fichiers (specs/117, T3), déplacées de ged.html (specs/124) ; seul changement : l'icône « fiche »
   passe de l’ancien bleu de Tailwind, banni de cette feuille par l'habillage violet (specs/056, test_identity), à var(--info) */
.ged-view-switch {
  display: flex;
  gap: 6px;
  margin: 0 0 10px;
}
.ged-view-switch .current {
  font-weight: 600;
  background: var(--acc-soft);
}
.ged-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.ged-tile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card, var(--white));
  overflow-wrap: anywhere;
  min-width: 0;
}
.ged-tile small {
  color: var(--muted);
}
.ged-tile .gone {
  color: var(--bad);
}
.ged-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 60px;
  border-radius: 8px;
  margin-bottom: 6px;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: var(--white);
  background: var(--faint);
}
.ged-icon-fiche {
  background: var(--info);
}
.ged-icon-photo {
  background: var(--ok);
}
.ged-icon-mail {
  background: var(--acc);
}
.ged-icon-facture {
  background: var(--warn);
}
.ged-icon-saisie {
  background: var(--bad);
}
.ged-icon-depot {
  background: var(--muted);
}
@media (max-width: 700px) {
  .ged-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .ged-tile {
    padding: 10px;
  }
}

/* Téléphone, deuxième passe (specs/124). Fiche document : sous 700 px chaque ligne devient une carte, chaque valeur précédée
   de l'en-tête de sa colonne (`data-label`, posé dans les mêmes conditions que l'en-tête) ; « Mémoriser ce tarif » pleine largeur.
   « Créer une commande fournisseur pour cette affaire » (libellé long) revient à la ligne sur toute la largeur de la carte.
   Éditeur : les cellules de `lineEditor` (app.js) viennent dans un ordre fixe, article, quantité, prix, remise, TVA, marge
   facultative (`data-cost-only`), total, « Retirer » ; d'où des libellés par rang. Placé après `#editor-table .line-input`. */
@media (max-width: 700px) {
  .doc-lines thead {
    display: none;
  }
  .doc-lines,
  .doc-lines tbody,
  .doc-lines tr {
    display: block;
  }
  .doc-lines tr {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-soft);
  }
  .doc-lines tr:last-child {
    border-bottom: 0;
  }
  .doc-lines td {
    display: flow-root;
    padding: 3px 0;
    border: 0;
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .doc-lines td[data-label]::before {
    content: attr(data-label);
    float: left;
    margin-right: 12px;
    font-size: 12px;
    color: var(--muted);
    text-align: left;
  }
  .doc-lines td:first-child {
    text-align: left;
    margin-bottom: 4px;
  }
  .doc-lines td:first-child::before {
    content: none;
  }
  .doc-lines td:empty {
    display: none;
  }
  .doc-lines td[data-label='Tarif client']::before {
    content: none;
  }
  .doc-lines form button {
    width: 100%;
    min-height: 44px;
    margin-top: 6px;
  }
  .affair-purchase {
    width: 100%;
    white-space: normal;
    justify-content: center;
    text-align: center;
  }
  #editor-table thead {
    display: none;
  }
  #editor-table,
  #editor-table tbody {
    display: block;
  }
  #editor-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-soft);
  }
  #editor-table tr:last-child {
    border-bottom: 0;
  }
  #editor-table td {
    display: block;
    padding: 0;
    border: 0;
    min-width: 0;
    text-align: left;
  }
  #editor-table td.row-name,
  #editor-table td.empty,
  #editor-table td:last-child {
    grid-column: 1/-1;
    width: auto;
  }
  #editor-table td::before {
    display: block;
    margin-bottom: 3px;
    font-size: 12px;
    color: var(--muted);
  }
  #editor-table td:nth-child(2)::before {
    content: 'Quantité';
  }
  #editor-table td:nth-child(3)::before {
    content: 'PU HT';
  }
  #editor-table td:nth-child(4)::before {
    content: 'Remise %';
  }
  #editor-table td:nth-child(5)::before {
    content: 'TVA %';
  }
  #editor-table td[data-cost-only]::before {
    content: 'Marge visée %';
  }
  #editor-table td.line-total::before {
    content: 'Total HT';
  }
  #editor-table td.line-total {
    align-self: end;
    font-size: 15px;
  }
  #editor-table .line-input {
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }
  #editor-table td:last-child button {
    width: 100%;
    min-height: 44px;
  }
}
.ged-selection-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 10px;
}
.ged-selection-bar .ged-count {
  flex: 1 1 220px;
}
th.ged-pick,
td.ged-pick {
  width: 32px;
  text-align: center;
}
.ged-tile {
  position: relative;
}
.ged-tile .ged-pick {
  position: absolute;
  top: 8px;
  right: 8px;
}
.ged-tile.picked,
tr.picked td {
  background: var(--acc-soft);
}
[data-item][draggable='true'] {
  cursor: grab;
}
.ged-node.ged-drop {
  outline: 2px dashed var(--acc);
  outline-offset: 2px;
}
.party-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}

/* Lignes spéciales du devis (specs/128) */
.doc-option td,
tr.doc-option {
  color: var(--muted);
}
.doc-text td {
  padding-top: 10px;
  padding-bottom: 10px;
  white-space: normal;
}
.doc-subtotal td {
  border-top: 1px solid var(--line-soft);
  background: var(--head);
}
.line-special input.line-input {
  width: 100%;
}
.option-toggle {
  display: block;
  font-weight: 400;
  font-size: 12px;
  margin-top: 4px;
}
.move-line {
  padding: 2px 8px;
  min-width: 32px;
}
.sig-page {
  background: var(--bg);
  margin: 0;
}
.sig-screen {
  margin: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 16px;
  box-sizing: border-box;
}
.sig-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.sig-head h1 {
  font-size: 20px;
  margin: 0 0 4px;
}
.sig-form {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}
.sig-fields {
  flex: 1 1 280px;
  min-width: 0;
}
.sig-fields input[type='text'],
.sig-fields input:not([type]),
.sig-fields textarea {
  width: 100%;
  box-sizing: border-box;
  font-size: 18px;
  min-height: 44px;
}
.sig-pad-wrap {
  flex: 2 1 420px;
  min-width: 0;
}
.sig-pad {
  width: min(100%, calc(52vh * 2.5));
  aspect-ratio: 5 / 2;
  background: var(--white);
  border: 2px dashed var(--field-line);
  border-radius: 8px;
}
.sig-pad canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}
.sig-actions {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}
.sig-actions button {
  min-height: 48px;
  min-width: 140px;
  font-size: 18px;
}
.sig-label {
  font-weight: 600;
  margin: 0 0 6px;
}
.sig-done {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}
.sig-image {
  max-width: 100%;
  height: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
}
@media (orientation: portrait), (max-width: 760px) {
  .sig-form {
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .sig-fields,
  .sig-pad-wrap {
    flex: none;
    width: 100%;
  }
  .sig-pad {
    width: 100%;
  }
}

/* Objectif précis de politique (spec184), lisible avec les flèches du champ numérique. */
#editor-table input[data-field='margin'] {
  min-width: 104px;
}
/* Propositions UX, lot 1 (specs/191) */
/* UX-06 : « + Devis » dans la barre du haut (ordinateur) et au centre de la barre du bas (téléphone). */
.top-new-quote {
  min-height: 36px;
  padding: 6px 14px;
}
.bottom-new {
  color: var(--sun-strong) !important;
}
.search-list li.with-action {
  display: flex;
  align-items: center;
  gap: 10px;
}
.search-list li.with-action > a:first-child {
  flex: 1;
  min-width: 0;
}
.search-list .row-action {
  min-height: 32px;
  padding: 4px 10px;
  font-size: 12.5px;
}
/* UX-03 : blocs repliés de l'éditeur, avec leur résumé ; kit sous la recherche d'articles. */
details.fold > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
details.fold > summary::-webkit-details-marker {
  display: none;
}
details.fold > summary::before {
  content: '▸';
  color: var(--muted);
}
details.fold[open] > summary::before {
  content: '▾';
}
details.fold > summary h2 {
  display: inline;
  margin: 0;
}
details.fold[open] > summary {
  margin-bottom: 12px;
}
.fold-summary {
  color: var(--muted);
  font-size: 13px;
}
.fold-summary.danger {
  color: var(--bad);
  font-weight: 600;
}
.kit-inline {
  margin-top: 10px;
}
/* UX-01 : « Valider et envoyer » est le bouton principal, l'enregistrement du brouillon passe au second plan. */
.submit-panel > button:first-child:has(~ button[value='send']) {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
}
.submit-panel > button:first-child:has(~ button[value='send']):hover {
  background: var(--head);
  border-color: var(--field-line);
}
/* UX-10 : envoi non tracé dans MyAxiom (la suite existe). */
.journey .step.skipped {
  background: var(--head);
  border-style: dashed;
  box-shadow: none;
}
.journey .step.skipped .step-doc {
  color: var(--muted);
  font-weight: 500;
}
.mini-journey i.skipped {
  background: repeating-linear-gradient(90deg, var(--ok) 0 3px, var(--line) 3px 6px);
}
@media (max-width: 640px) {
  .top-new-quote {
    display: none;
  }
}
/* UX-21 : listes de Ventes et d'Achats en cartes sur téléphone, sans défilement de côté. */
@media (max-width: 640px) {
  .doc-list thead {
    display: none;
  }
  .doc-list,
  .doc-list tbody {
    display: block;
    min-width: 0;
    width: 100%;
  }
  .doc-list tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'doc amount'
      'party date'
      'affair affair'
      'state state';
    column-gap: 12px;
    row-gap: 4px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-soft);
  }
  .doc-list td {
    display: block;
    padding: 0;
    border: 0;
    min-width: 0;
  }
  .doc-list td.c-doc {
    grid-area: doc;
  }
  .doc-list td.c-amount {
    grid-area: amount;
    font-weight: 600;
  }
  .doc-list td.c-party {
    grid-area: party;
    color: var(--muted);
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .doc-list td.c-date {
    grid-area: date;
    justify-self: end;
    color: var(--muted);
    font-size: 12.5px;
  }
  .doc-list td.c-affair {
    grid-area: affair;
    font-size: 12.5px;
  }
  .doc-list td.c-state {
    grid-area: state;
  }
  .doc-list td.c-state .mini-journey {
    margin-left: 6px;
  }
  .doc-list td.empty {
    grid-column: 1/-1;
  }
}

/* Fiche rangée (specs/192, UX-08) : barre d'action, menu « Plus », alertes en rouge, onglets. */
.action-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 18px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.action-bar .journey {
  flex: 1 1 520px;
  margin: 0;
}
.action-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.action-buttons .primary-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
}
.more-menu {
  position: relative;
}
.more-menu > summary {
  list-style: none;
  cursor: pointer;
}
.more-menu > summary::-webkit-details-marker {
  display: none;
}
.more-list {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  min-width: 260px;
  max-width: min(360px, calc(100vw - 32px));
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 8px 24px rgba(5, 2, 64, 0.14);
  padding: 6px;
}
.more-list a,
.more-list button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border-radius: 8px;
  background: none;
  border: 0;
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.more-list a:hover,
.more-list button:hover {
  background: var(--head);
  text-decoration: none;
}
.more-list form {
  margin: 0;
}
.more-list button {
  box-shadow: none;
  font-weight: 400;
  min-height: 0;
  height: auto;
}
.more-group p {
  margin: 4px 12px;
  font-size: 12.5px;
}
.more-group {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  margin: 4px 0;
  padding: 4px 0;
}
.more-label {
  display: block;
  padding: 4px 12px 0;
  font-size: 11.5px;
  color: var(--muted);
}
/* Menu « Plus ▾ » du haut de page (spec 321) : un intertitre en tête ou en pied de liste n'a pas besoin de filet. */
.more-list > .more-group:first-child {
  border-top: 0;
  margin-top: 0;
}
.more-list > .more-group:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}
.doc-alerts .warning {
  background: var(--bad-soft);
  border-color: var(--bad);
  color: var(--bad);
}
.doc-tabs {
  margin-top: 22px;
}
.doc-tabs a[hidden] {
  display: none;
}
.tab-panel[hidden] {
  display: none;
}

/* Écran Affaires (specs/192, UX-09) : frise à 7 pastilles, vue Lignes ou Colonnes, sans glisser-déposer. */
.affairs-head {
  display: flex;
  gap: 8px 16px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 8px;
}
.affairs-head .tabs,
.affairs-head .filters {
  margin-bottom: 8px;
}
.affair-strip {
  display: flex;
  gap: 3px;
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
}
.affair-strip li {
  flex: 0 0 18px;
  height: 7px;
  border-radius: 4px;
  background: var(--line);
}
.affair-strip li span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.affair-strip li.done {
  background: var(--ok);
}
.affair-strip li.partial {
  background: var(--warn);
}
.affair-strip li.skipped {
  background: repeating-linear-gradient(
    45deg,
    var(--line),
    var(--line) 3px,
    var(--card) 3px,
    var(--card) 6px
  );
}
.affairs-list .c-action {
  white-space: nowrap;
}
.affair-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.affair-column {
  background: var(--rail);
  border-radius: var(--r);
  padding: 10px;
}
.affair-column > summary {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}
.affair-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.affair-card p {
  margin: 0 0 4px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

/* Accueil « Ma journée » (specs/192, UX-13) : assistant replié, courbe repliable. */
.assistant-bar > summary,
details.activity > summary {
  cursor: pointer;
  font-weight: 600;
}
.assistant-bar {
  margin-bottom: 14px;
}
.assistant-bar > summary {
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

@media (max-width: 900px) {
  .affair-columns {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .action-bar .journey {
    flex-basis: 100%;
  }
  .action-buttons {
    width: 100%;
  }
  .action-buttons .primary-step {
    flex: 1 1 auto;
  }
  .more-list {
    position: fixed;
    left: 16px;
    right: 16px;
    top: auto;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    max-width: none;
    max-height: 70vh;
    overflow-y: auto;
  }
  .affairs-list .c-action .button {
    width: 100%;
  }
}

/* UX-22 (specs/194) : sur téléphone, le bouton de l'étape suivante reste en bas, au-dessus de la barre du bas. */
@media (max-width: 700px) {
  .action-buttons .primary-step {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    z-index: 19;
    box-shadow: 0 4px 14px rgba(5, 2, 64, 0.28);
  }
  body:has(.primary-step) main {
    padding-bottom: 150px;
  }
}
/* UX-14, UX-15, UX-11 (specs/194) : écrans d'entrée par métier. */
.logistics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.logistics-item {
  border-top: 1px solid var(--line);
  padding: 10px 0;
}
.logistics-item p {
  margin: 0 0 6px;
}
.logistics-item.late {
  border-left: 3px solid var(--bad);
  padding-left: 10px;
}
.money-cards .big {
  font-size: 22px;
  margin: 6px 0;
}
.bought-filter {
  display: block;
  padding: 6px 22px 0;
  font-size: 13px;
}
.affairs-band {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
@media (max-width: 900px) {
  .logistics {
    grid-template-columns: 1fr;
  }
}
/* Page publique d'accord en ligne aux couleurs de Blue Watt (specs/195, UX-17) : présentation seulement. */
body.online-page {
  background: var(--bg);
}
.online-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-width: 850px;
  margin: 0 auto;
  padding: 24px 20px 0;
}
.online-logo {
  height: 48px;
  width: auto;
}
.online-brand .sun-band {
  flex: none;
  width: 180px;
}
.online-main {
  max-width: 850px;
  margin: 16px auto 32px;
  padding: 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}
.online-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px 24px;
}
.online-head h1 {
  color: var(--ink);
  margin: 0 0 4px;
}
.online-contact {
  display: flex;
  align-items: center;
  gap: 10px;
}
.online-initials {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-weight: 700;
  flex: none;
}
.online-lines td + td {
  white-space: nowrap;
}
.online-lines .num {
  text-align: right;
}
.online-total {
  text-align: right;
  margin: 16px 0;
}
.online-total p {
  margin: 4px 0;
}
.online-total-gross {
  font-size: 26px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.online-agree {
  margin-top: 16px;
}
.online-agree-button {
  width: 100%;
  min-height: 52px;
  font-size: 17px;
  white-space: normal;
  line-height: 1.3;
}
.online-notice {
  margin-top: 24px;
}
@media (max-width: 600px) {
  .online-main {
    margin: 10px 8px 24px;
    padding: 16px;
  }
  .online-logo {
    height: 36px;
  }
  .online-lines thead {
    display: none;
  }
  .online-lines tr {
    display: block;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
  }
  .online-lines td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    padding: 3px 0;
  }
  .online-lines td[data-label]::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 13px;
  }
  .online-lines td:first-child {
    font-weight: 600;
  }
  .online-lines td:first-child::before {
    content: none;
  }
}

/* Accès par compte (specs/199) : cases rangées par rubrique, une colonne sur téléphone. */
.access-boxes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px 14px;
  margin: 10px 0 14px;
}
.access-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px 10px;
  margin: 0;
  min-width: 0;
}
.access-group legend {
  font-weight: 600;
  padding: 0 4px;
}
.access-group label.check {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-weight: 500;
  font-size: 13.5px;
  margin: 4px 0;
}
.access-group label.check input {
  margin-top: 2px;
  flex: none;
}
/* Sous-cases d'action (specs/204) : en retrait sous leur case, grisées sans elle. */
.access-actions {
  margin: 0 0 6px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
}
.access-group .access-actions label.check {
  font-size: 12.5px;
  margin: 2px 0;
}
.access-actions label.check:has(input:disabled) {
  color: var(--muted);
}
/* Compte en lecture seule (specs/204) : formulaires d'action et liens de création ou de modification masqués ; le
   serveur refuse de toute façon. Mon compte, la déconnexion et Questions restent (Q-204-4). */
.lecture-seule form[method='post' i]:not([action*='/deconnexion/']),
.lecture-seule a[href*='/nouveau'],
.lecture-seule a[href*='/nouvelle'],
.lecture-seule a[href*='/modifier/'],
.lecture-seule a[href*='?edit='] {
  display: none !important;
}
.access-state.on {
  border-left: 4px solid var(--ok);
}
.access-state.off {
  border-left: 4px solid var(--muted);
}
.access-state label.check,
.access-activate label.check {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-weight: 500;
  width: auto;
}
.access-state label.check input,
.access-activate label.check input {
  width: auto;
  min-height: 0;
}

/* ---- Listes triables et lignes cliquables (specs/201) ---- */
th.sortable {
  padding: 0;
}
th.sortable .sort-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  color: inherit;
  text-decoration: none;
}
th.sortable.num .sort-link {
  justify-content: flex-end;
}
th.sortable .sort-link:hover {
  color: var(--acc-ink);
}
.sort-arrow {
  font-size: 11px;
  color: var(--faint);
}
th[aria-sort] .sort-arrow {
  color: var(--acc);
}
[data-row-link] {
  cursor: pointer;
}
tbody tr[data-row-link]:hover td {
  background: var(--acc-faint);
}
tbody tr[data-row-link]:focus-within td {
  background: var(--acc-faint);
}
tbody tr[data-row-link]:focus-within td:first-child {
  box-shadow: inset 3px 0 0 var(--acc);
}
.affair-card[data-row-link]:hover,
.affair-card[data-row-link]:focus-within {
  border-color: var(--acc-line);
  background: var(--acc-faint);
}
.affairs-head .filter-sort {
  margin-left: 0;
}
@media (max-width: 640px) {
  .affairs-list td.c-created {
    display: none;
  }
}

/* ---- Affaire servie par client (specs/202) ---- */
.affair-finder input[type='search'] {
  width: 100%;
}
.affair-current {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}
.affair-current .affair-clear[hidden] {
  display: none;
}
.affair-current .affair-clear {
  font-size: 12px;
  padding: 6px 10px;
  min-height: 0;
}
.affair-results {
  margin: 8px 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--white);
  max-height: 460px;
  overflow-x: hidden;
  overflow-y: auto;
}
.affair-results:empty {
  display: none;
}
.affair-results > p {
  margin: 0;
  padding: 10px 12px;
}
.affair-client {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--head);
}
.affair-client .affair-back {
  margin-left: auto;
  font-size: 12px;
  padding: 6px 10px;
  min-height: 0;
}
.affair-group {
  padding: 8px 0 4px;
  border-bottom: 1px solid var(--line-soft);
}
.affair-group:last-child {
  border-bottom: 0;
}
.affair-group h3 {
  margin: 0;
  padding: 0 12px 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.affair-group > p {
  margin: 0;
  padding: 2px 12px 6px;
  font-size: 12.5px;
}
.affair-reason {
  color: var(--warn);
}
.affair-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.affair-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--line-soft);
  padding-right: 12px;
}
.affair-row .affair-option {
  flex: 1;
  white-space: normal;
  min-width: 0;
  display: block;
  text-align: left;
  border: 0;
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  font-weight: 400;
  box-shadow: none;
  padding: 9px 12px;
  min-height: 44px;
}
.affair-row .affair-option:hover,
.affair-row .affair-option:focus-visible {
  background: var(--acc-soft);
  color: var(--acc-ink);
}
.affair-row .affair-option .result-name,
.affair-row .affair-option .result-hint {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
}
.affair-row.info .affair-text {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.affair-open {
  flex: none;
  font-size: 13px;
  white-space: nowrap;
  padding: 6px 0;
}
.affair-link-form .inline-form {
  margin-top: 8px;
}
@media (max-width: 700px) {
  .affair-row {
    flex-wrap: wrap;
    padding-right: 0;
  }
  .affair-row .affair-option,
  .affair-row.info .affair-text {
    flex-basis: 100%;
  }
  .affair-open {
    padding: 0 12px 8px;
  }
}

/* Cibles tactiles au téléphone (specs/221, R-1627) : cases de 20 px, boutons, liens du menu et actions de ligne de 44 px de haut au moins.
   En fin de feuille pour l'emporter sur les `min-height` plus petits des composants (boutons d'icône, messagerie, dossiers). Les champs
   de saisie gardent 38 px (lignes d'éditeur) : voir Q-221-8. */
@media (max-width: 700px) {
  input[type='checkbox'],
  input[type='radio'],
  .mail-row .mail-check {
    width: 20px;
    height: 20px;
  }
  button,
  .button,
  select,
  aside a,
  .icon-button,
  .link-button,
  .twisty,
  .folder-more,
  .folder-menu button,
  .mail-toolbar button,
  .mail-toolbar select,
  .mail-folders-toggle,
  .reader-bar .button,
  .reader-tools select,
  .reader-images button,
  .search-list .row-action {
    min-height: 44px;
  }
  .icon-button,
  .twisty,
  .folder-more {
    min-width: 44px;
  }
}

/* --- Accueil plus visuel (specs/227) ----------------------------------------------------------- */
/* Bulle d'assistant : le <details> reste en tête du contenu (ordre des blocs, specs/192), la bulle et le volet sont fixés
   en bas à droite ; sans script, le <details> s'ouvre et se ferme tout seul. */
.assistant-bubble {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
}
.assistant-bubble > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px 0 14px;
  height: 50px;
  border-radius: 999px;
  background: var(--acc);
  color: var(--white);
  font-weight: 600;
  font-size: 14px;
  box-shadow: var(--shadow-lg);
  float: right;
  user-select: none;
}
.assistant-bubble > summary::-webkit-details-marker {
  display: none;
}
.assistant-bubble > summary .icon {
  width: 22px;
  height: 22px;
}
.assistant-bubble > summary:hover {
  background: var(--acc-hover);
}
.assistant-bubble > summary:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 2px;
}
.assistant-bubble[open] > summary {
  background: var(--ink);
}
.assistant-panel {
  position: absolute;
  right: 0;
  bottom: 62px;
  width: min(420px, calc(100vw - 44px));
  max-height: min(70vh, 640px);
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.assistant-panel .panel {
  border: 0;
  box-shadow: none;
  margin: 0;
  padding: 18px 20px 16px;
  border-radius: 0;
}
.assistant-panel .panel > h2 {
  font-size: 15px;
  padding-right: 32px;
  margin-bottom: 6px;
}
.assistant-panel .assistant-intro,
.assistant-panel .assistant-note {
  font-size: 12.5px;
  margin: 0 0 10px;
}
.assistant-panel textarea {
  width: 100%;
  box-sizing: border-box;
}
.assistant-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  min-height: 32px;
  min-width: 32px;
  padding: 0;
  border-radius: 8px;
  z-index: 1;
}
.assistant-close:hover {
  background: var(--head);
  color: var(--ink);
  border: 0;
}
/* Spec 252 : choix entre plusieurs fiches et tableau « avant → après » dans la bulle. */
.assistant-choices {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: grid;
  gap: 6px;
}
.assistant-choices button {
  width: 100%;
  text-align: left;
}
.assistant-panel .assistant-lines {
  font-size: 12.5px;
}
/* Repères du jour : trois pastilles qui mènent aux blocs. */
.day-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}
.day-summary a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: var(--head);
  border: 1px solid var(--line);
}
.day-summary a:hover {
  text-decoration: none;
  border-color: var(--acc-line);
}
.day-summary strong {
  display: inline-block;
  min-width: 26px;
  padding: 2px 7px;
  border-radius: 999px;
  text-align: center;
  font-size: 13px;
  background: var(--card);
  color: var(--ink);
}
.day-summary a.bad strong {
  background: var(--bad-soft);
  color: var(--bad);
}
.day-summary a.warn strong {
  background: var(--warn-soft);
  color: var(--warn);
}
.day-summary a.info strong {
  background: var(--info-soft);
  color: var(--info);
}
.day-summary a.ok strong {
  background: var(--ok-soft);
  color: var(--ok);
}
/* « À faire maintenant » : couleur par verbe, ligne entière cliquable. */
.todo > div[data-tone] {
  padding-left: 12px;
  border-left: 3px solid var(--info);
  margin-left: -18px;
  padding-right: 0;
  border-radius: 0;
}
.todo > div[data-tone] + div[data-tone] {
  margin-top: 0;
}
.todo > div[data-tone='bad'] {
  border-left-color: var(--bad);
}
.todo > div[data-tone='warn'] {
  border-left-color: var(--sun);
}
.todo .todo-line {
  flex: 1;
  display: block;
  line-height: 1.6;
  font-weight: 400;
  font-size: 13.5px;
  color: var(--text);
  white-space: normal;
  min-width: 0;
}
.todo .todo-line:hover {
  text-decoration: none;
  color: var(--ink);
}
.todo .todo-line b {
  display: inline-block;
  margin-right: 6px;
  vertical-align: 1px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--info-soft);
  color: var(--info);
}
.todo > div[data-tone='bad'] .todo-line b {
  background: var(--bad-soft);
  color: var(--bad);
}
.todo > div[data-tone='warn'] .todo-line b {
  background: var(--warn-soft);
  color: var(--warn);
}
.todo .todo-open {
  flex: none;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.todo .todo-open:hover {
  background: var(--acc-faint);
  border-color: var(--acc-line);
  text-decoration: none;
}
.todo p.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ok);
  font-weight: 500;
}
.todo p.empty .icon {
  width: 22px;
  height: 22px;
}
/* Tuiles : bande colorée en haut selon la tonalité. */
.metric[data-tone] {
  border-top: 4px solid var(--line);
  position: relative;
}
.metric[data-tone='bad'] {
  border-top-color: var(--bad);
}
.metric[data-tone='warn'] {
  border-top-color: var(--sun);
}
.metric[data-tone='ok'] {
  border-top-color: var(--ok);
}
.metric[data-tone='info'] {
  border-top-color: var(--info);
}
.metric[data-tone] span {
  font-size: 13px;
  color: var(--text);
}
/* Mes tâches du jour : deux groupes nommés. */
.task-home {
  padding: 14px 18px;
}
.task-group {
  margin-bottom: 14px;
}
.task-group h3 {
  margin: 0 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.task-group h3::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--info);
}
.task-group.late h3 {
  color: var(--bad);
}
.task-group.late h3::before {
  background: var(--bad);
}
.task-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.task-rows a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--info);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
}
.task-group.late .task-rows a {
  border-left-color: var(--bad);
  background: color-mix(in srgb, var(--bad-soft) 25%, var(--card));
}
.task-rows a:hover {
  text-decoration: none;
  border-color: var(--acc-line);
  border-left-color: var(--acc);
  background: var(--acc-faint);
}
.task-box {
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--field-line);
  border-radius: 5px;
}
.task-main {
  flex: 1;
  min-width: 0;
  display: grid;
}
.task-main strong {
  font-weight: 600;
  color: var(--ink);
}
.task-main small {
  color: var(--muted);
}
.task-when {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.task-when.bad {
  color: var(--bad);
  font-size: 12px;
}
.task-when.muted {
  font-weight: 500;
  font-size: 12px;
}
.task-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 10px;
  color: var(--ok);
  font-weight: 500;
}
.task-empty .icon {
  width: 22px;
  height: 22px;
}
.task-home-actions {
  margin: 6px 0 0;
}
/* Calendrier : cartes Aujourd'hui / Demain, jour courant teinté, légende. */
.cal-today-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 6px;
}
.cal-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  background: var(--head);
}
.cal-card.has {
  background: var(--info-soft);
  border-color: var(--info-line);
}
.cal-card > span {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.cal-card > strong {
  display: block;
  font-size: 26px;
  line-height: 1.1;
  color: var(--ink);
  margin: 2px 0 4px;
}
.cal-card.has > strong {
  color: var(--info);
}
.cal-card > small {
  color: var(--muted);
}
.cal-card ul {
  margin: 0;
  padding-left: 16px;
  font-size: 13px;
}
.cal-hint {
  margin: 0 0 10px;
  font-size: 12px;
}
.cal-undated {
  margin: 0 0 10px;
}
.cal-day.today {
  background: var(--acc-faint);
}
.cal-day.today b {
  color: var(--acc-ink);
}
.cal-day.today b {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 4px;
}
.cal-day.today b i {
  font-style: normal;
  margin-left: 0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--acc);
  color: var(--white);
}
.cal-day li a:first-child {
  font-weight: 600;
}
.cal-legend {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
.cal-legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cal-legend li::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border-left: 3px solid var(--info);
  background: var(--info-soft);
}
.cal-legend li.late::before {
  border-color: var(--bad);
  background: var(--bad-soft);
}
.cal-legend li.purchase::before {
  border-color: var(--ok);
  background: var(--ok-soft);
}
@media (max-width: 700px) {
  .assistant-bubble {
    right: 12px;
    bottom: 76px;
  }
  .assistant-bubble > summary span {
    display: none;
  }
  .assistant-bubble > summary {
    padding: 0;
    width: 52px;
    justify-content: center;
  }
  .assistant-panel {
    width: calc(100vw - 24px);
    max-height: 70vh;
  }
  .todo > div[data-tone] {
    margin-left: -16px;
  }
  .todo .todo-line b {
    display: block;
    width: max-content;
    margin: 0 0 4px;
  }
  .todo .todo-open {
    display: none;
  }
  .task-rows a {
    flex-wrap: wrap;
  }
  .task-main {
    flex-basis: 60%;
  }
  .cal-today-cards {
    grid-template-columns: 1fr 1fr;
  }
  .task-when {
    font-size: 12px;
  }
}

/* Relecture technique du devis (specs/236) : liste des points, bouton atteignable au doigt. */
.review-points {
  list-style: none;
  margin: 10px 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.quote-review button {
  min-height: 44px;
}
/* Caméra de lecture des codes-barres (specs/257) */
.scan-video {
  width: 100%;
  max-width: 420px;
  margin-top: 8px;
  border-radius: 8px;
}

/* --- Réglages rangés (specs/258) : recherche, groupes et tuiles ------------------------------------- */
.settings-intro {
  color: var(--muted);
  margin: -8px 0 18px;
  max-width: 80ch;
}
.settings-search {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 16px 20px;
  margin-bottom: 22px;
}
.settings-search label {
  display: block;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.settings-search input[type='search'] {
  width: 100%;
  max-width: 560px;
  min-height: 44px;
  font-size: 16px;
}
.settings-count,
.settings-empty {
  margin: 8px 0 0;
  color: var(--muted);
}
.settings-count:empty {
  display: none;
}
.settings-group {
  margin-bottom: 26px;
}
.settings-group-head h2 {
  margin: 0 0 2px;
  font-size: 17px;
}
.settings-group-head h2 a {
  color: var(--ink);
}
.settings-group-head p,
.settings-status {
  margin: 0 0 10px;
  color: var(--muted);
}
.settings-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}
.settings-tiles li[hidden],
.settings-group[hidden] {
  display: none;
}
.settings-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  min-height: 44px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  color: var(--text);
  text-decoration: none;
}
.settings-tile:hover {
  border-color: var(--acc-line);
  background: var(--acc-faint);
}
.settings-tile:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}
.settings-tile-title {
  font-weight: 600;
  color: var(--acc-ink);
}
.settings-tile-text {
  color: var(--muted);
  font-size: 13.5px;
}
.settings-tile-items {
  color: var(--faint);
  font-size: 12.5px;
}
.settings-reassort {
  margin-top: 12px;
}
.settings-reassort summary {
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 44px;
}
.settings-reassort summary h2 {
  display: inline;
  margin: 0;
  font-size: 16px;
}
.settings-reassort[open] summary {
  margin-bottom: 10px;
}
.settings-logo {
  max-height: 56px;
  vertical-align: middle;
  margin-left: 8px;
}
@media (max-width: 760px) {
  .settings-search {
    padding: 14px;
  }
  .settings-tiles {
    grid-template-columns: 1fr;
  }
}
/* Notifications internes (specs/277) : cloche de la barre du haut, page et choix dans Mon compte. */
.top-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  border-radius: 999px;
  color: var(--ink);
  flex: none;
}
.top-bell:hover,
.top-bell[aria-current='page'] {
  background: var(--head);
}
.top-bell-count {
  position: absolute;
  top: 0;
  right: -2px;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--bad);
  color: var(--white);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.notification-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.notification {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}
.notification:last-child {
  border-bottom: 0;
}
.notification.unread {
  box-shadow: inset 3px 0 0 var(--sun-strong);
  padding-left: 12px;
}
.notification-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.notification-read {
  flex: none;
}
.notification-prefs {
  display: grid;
  gap: 12px;
  margin: 12px 0;
}
.notification-pref {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.notification-pref label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
@media (max-width: 700px) {
  .notification,
  .notification-pref {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Spec 278 : aperçu du mail de relance lisible dans le tableau « À relancer aujourd'hui ». */
/* min-width sur une cellule est ignoré par les navigateurs : on le pose sur le contenu. */
.stage-mail details {
  min-width: 18rem;
  max-width: 36rem;
}

/* --- Usage sur téléphone : saisie, doigt, appeler, écrire, chercher (specs/307) ------------------------------------
   Tout ce qui suit ne vaut que sous le point de rupture « téléphone » (700 px, celui de la barre du bas), sauf les liens
   d'appel, de mail et de plan, qui existent aussi sur ordinateur mais gardent l'apparence du texte autour. */
.contact-link {
  color: inherit;
  font: inherit;
  text-decoration: none;
}
.contact-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.contact-actions,
.top-search-open,
.top-search-close {
  display: none;
}
.search-contact {
  margin: 0;
  padding: 0 0 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  font-size: 12.5px;
  color: var(--muted);
}
.with-action .search-contact {
  flex-basis: 100%;
}
.search-list li.with-action {
  flex-wrap: wrap;
}
@media (min-width: 701px) {
  .search-contact.on-phone {
    display: none;
  }
}
@media (max-width: 700px) {
  /* 1. Champs : 16 px au moins (l'iPhone zoome sinon à chaque saisie) et 44 px de haut. Règle générale, pas champ par
     champ ; `!important` parce que de nombreux champs fixent leur taille de texte plus haut dans la feuille. */
  input:not([type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='hidden']),
  select,
  textarea {
    font-size: 16px !important;
  }
  input:not([type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='hidden']),
  select {
    min-height: 44px;
  }
  select {
    min-width: 0; /* le texte à 16 px élargit la liste : elle doit pouvoir se réduire dans une ligne de filtres */
  }
  .filters,
  .filters label {
    min-width: 0;
    max-width: 100%;
  }
  /* 2. Boutons et résumés repliables : 44 px de haut. */
  button,
  .button,
  summary {
    min-height: 44px;
  }
  /* Cases et boutons radio : dessinées en 18 px, zone cliquable de 44 px (marges négatives : l'encombrement reste de
     16 px, la page ne s'allonge pas). */
  input[type='checkbox'],
  input[type='radio'] {
    appearance: none;
    -webkit-appearance: none;
    display: inline-grid;
    place-content: center;
    box-sizing: border-box;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px;
    max-width: none;
    margin: -14px -8px -14px -14px;
    padding: 0;
    border: 0;
    background: transparent;
    vertical-align: middle;
    flex: none;
  }
  input[type='checkbox']::before,
  input[type='radio']::before {
    content: '';
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--field-line);
    background: var(--white);
  }
  input[type='checkbox']::before {
    border-radius: 5px;
  }
  input[type='radio']::before {
    border-radius: 50%;
  }
  input[type='checkbox']:checked::before {
    border-color: var(--acc);
    background: var(--acc)
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / 14px no-repeat;
  }
  input[type='checkbox']:indeterminate::before {
    border-color: var(--acc);
    background: var(--acc)
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")
      center / 14px no-repeat;
  }
  input[type='radio']:checked::before {
    border-color: var(--acc);
    background: var(--acc);
    box-shadow: inset 0 0 0 4px var(--white);
  }
  input[type='checkbox']:disabled::before,
  input[type='radio']:disabled::before {
    opacity: 0.5;
  }
  input[type='checkbox']:focus-visible,
  input[type='radio']:focus-visible {
    outline-offset: -6px;
    border-radius: 12px;
  }
  /* 3. Liens : la zone cliquable déborde du texte (marge intérieure haute et basse des liens « en ligne »), sans
     allonger les lignes ni les tableaux. Les liens qui sont déjà des boutons ou des blocs ont leur propre hauteur. */
  main a:not(.button),
  .crumbs a {
    padding: 16px 4px;
    margin-inline: -4px;
  }
  main a:not(.button):where(.contact-link, .map-link) {
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
    text-underline-offset: 3px;
  }
  /* Liens qui sont des éléments de grille, de colonne ou de bloc : hauteur propre, sans marge intérieure. */
  .tabs a,
  .section-tabs a,
  .more-list a,
  .more-list button,
  .panel-title a,
  .search-list a,
  .help-link,
  .cal-nav a,
  .ged-node,
  .heading a,
  .actions a,
  .site-row a,
  .search-page a {
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
  }
  .search-list a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
  /* Menu latéral : lignes et flèches à 44 px. */
  aside a,
  aside a.nav-leaf,
  aside button,
  .nav-fold > summary,
  .twisty {
    min-height: 44px;
  }
  .twisty {
    min-width: 44px;
  }
  /* Cloche, fermeture de l'assistant, boutons ronds. */
  .chip {
    min-width: 44px;
    justify-content: center;
  }
  .top-bell,
  .assistant-close,
  .message-close {
    min-width: 44px;
    min-height: 44px;
  }
  /* 4. Recherche : la loupe de la barre du haut ouvre la même recherche que ⌘K (voir app.js). */
  .top-search-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-width: 44px;
    min-height: 44px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    box-shadow: none;
  }
  .top-search-open:hover {
    background: var(--head);
    border-color: transparent;
  }
  .top-search-open .icon {
    width: 22px;
    height: 22px;
  }
  .topbar {
    gap: 4px;
  }
  .top-search-open + .top-bell,
  .top-search-open ~ .top-new-quote {
    margin-left: 0;
  }
  body.search-open .top-search {
    display: flex;
    align-items: center;
    gap: 6px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    max-width: none;
    margin: 0;
    padding: 4px 8px 4px 12px;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 0 0 100vmax rgba(5, 2, 64, 0.45);
  }
  body.search-open .top-search input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding-right: 14px;
  }
  body.search-open .search-key {
    display: none;
  }
  body.search-open .top-search-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-size: 28px;
    line-height: 1;
    box-shadow: none;
  }
  .search-list li {
    min-height: 44px;
  }
  .search-contact {
    gap: 0 14px;
    font-size: 14px;
    padding-bottom: 10px;
  }
  .search-contact a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0;
    color: var(--acc);
  }
  /* 5. Fiche tiers : rangée de gros boutons « Appeler », « Écrire », « Itinéraire » en tête (téléphone seulement). */
  .contact-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 8px;
    margin: 4px 0 14px;
  }
  .contact-actions .button {
    justify-content: center;
    min-height: 48px;
    font-size: 15px;
  }
  .contact-actions .icon {
    width: 20px;
    height: 20px;
  }
}

/* --- Tableaux en cartes et défilement signalé sur téléphone (specs/309) -----------------------------------------------
   Tout ce qui suit ne vaut que sous 700 px : rien ne change à l'écran d'ordinateur.

   MÉCANISME GÉNÉRIQUE « table.cards-sm » : chaque ligne devient une carte. Pour l'appliquer à une autre liste, ajouter la
   classe `cards-sm` au <table> et, sur chaque <td>, un `data-label="Libellé de la colonne"` (si absent, app.js le recopie
   depuis l'en-tête de la même colonne) et au besoin une classe de rôle :
     card-amount     montant en gros, à droite de la ligne card-meta (sans libellé)
     card-meta       petite ligne grise en tête (date, compte)            card-title   titre de la carte (le « nom » de la ligne)
     card-sub        sous-titre (emplacements, catégorie)                  card-big     gros chiffre avec son libellé au-dessus
     card-big-first  gros chiffre placé avant les autres gros chiffres     card-wide    ligne pleine largeur, libellé au-dessus
     card-actions    boutons et formulaires, pleine largeur               card-check   case à cocher, en haut à droite
     card-more       replié derrière « Voir le détail » (app.js ajoute le bouton dans le titre ; sans script tout reste visible)
   Sans classe : une ligne « libellé : valeur », deux par ligne. Les cellules vides disparaissent. L'en-tête reste dans la page
   pour les lecteurs d'écran (masqué à l'œil seulement) et app.js pose les rôles table / row / cell, que `display` fait perdre. */
.card-toggle {
  display: none;
}
.fold-sm > summary {
  display: none;
}
@media (max-width: 700px) {
  table.cards-sm,
  .cards-sm tbody {
    display: block;
  }
  .cards-sm thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .cards-sm tr {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--line-soft);
  }
  .cards-sm tr:last-child {
    border-bottom: 0;
  }
  .cards-sm td {
    display: flow-root;
    flex: 1 1 calc(50% - 7px);
    order: 40;
    min-width: 0;
    padding: 0;
    border: 0;
    font-size: 13px;
    text-align: right;
    overflow-wrap: anywhere;
  }
  .cards-sm td[data-label]::before {
    content: attr(data-label);
    float: left;
    margin-right: 10px;
    font-size: 12px;
    font-weight: 400;
    color: var(--muted);
    text-align: left;
  }
  .cards-sm td:empty {
    display: none;
  }
  .cards-sm td.empty {
    flex-basis: 100%;
    text-align: center;
  }
  .cards-sm td.card-meta,
  .cards-sm td.card-title,
  .cards-sm td.card-sub,
  .cards-sm td.card-wide,
  .cards-sm td.card-actions {
    flex-basis: 100%;
    text-align: left;
  }
  .cards-sm td.card-meta::before,
  .cards-sm td.card-title::before,
  .cards-sm td.card-sub::before,
  .cards-sm td.card-actions::before,
  .cards-sm td.card-check::before {
    content: none;
  }
  .cards-sm td.card-meta br {
    display: none;
  }
  .cards-sm td.card-meta span::before {
    content: ' · ';
  }
  .cards-sm td.card-amount {
    order: 0;
    flex: 0 0 auto;
    font-size: 17px;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
  }
  .cards-sm td.card-amount::before {
    content: none;
  }
  .cards-sm tr:has(td.card-amount) td.card-meta {
    flex: 1 1 0;
  }
  .cards-sm td.card-meta {
    order: 0;
    font-size: 12px;
    color: var(--muted);
  }
  .cards-sm td.card-title {
    order: 10;
    font-size: 14.5px;
  }
  .cards-sm td.card-sub {
    order: 20;
  }
  .cards-sm td.card-big {
    order: 30;
    flex: 1 1 0;
    min-width: 76px;
    text-align: left;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
  }
  .cards-sm td.card-big-first {
    order: 25;
  }
  .cards-sm td.card-big::before {
    display: block;
    float: none;
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .cards-sm td.card-big small {
    font-size: 11.5px;
    font-weight: 400;
  }
  .cards-sm td.card-wide {
    order: 45;
  }
  .cards-sm td.card-wide::before {
    display: block;
    float: none;
    margin: 0 0 4px;
  }
  .cards-sm td.card-actions {
    order: 50;
  }
  .cards-sm td.card-actions input:not([type='checkbox'], [type='radio']),
  .cards-sm td.card-actions select {
    width: 100%;
  }
  .cards-sm td.card-check {
    position: absolute;
    top: 2px;
    right: 6px;
    flex: none;
    order: 0;
    width: 44px;
    height: 44px;
  }
  .cards-sm tr:has(td.card-check) td.card-title {
    padding-right: 44px;
  }
  .cards-sm.is-folded tr:not(.is-open) td.card-more {
    display: none;
  }
  .cards-sm .card-toggle {
    display: inline-flex;
    align-items: center;
    float: right;
    margin: 0 0 4px 10px;
    min-height: 44px;
    padding: 0 12px;
    font-size: 12.5px;
  }
  .cards-sm td.card-title small {
    display: block;
  }

  /* Bloc replié sur téléphone, déplié sur ordinateur : <details class="fold-sm" open><summary>…</summary>…</details>.
     app.js retire « open » sous 700 px et le remet au-dessus. */
  .fold-sm {
    margin-bottom: 18px;
  }
  .fold-sm > summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    font-weight: 600;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
  }
  .fold-sm[open] > summary {
    margin-bottom: 12px;
  }
  .fold-sm > summary .fold-values {
    flex-basis: 100%;
    font-weight: 400;
    font-size: 13px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .fold-sm > summary .fold-values:empty {
    display: none;
  }
  .fold-sm > summary:has(.fold-values:not(:empty)) {
    flex-wrap: wrap;
    align-content: center;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .fold-sm > .chart-row {
    margin-bottom: 0;
  }

  /* Ordre de lecture : une page peut remonter sa recherche (class « first-sm ») avant ses blocs secondaires. */
  .order-sm {
    display: flex;
    flex-direction: column;
  }
  .order-sm > .lead {
    order: -2;
  }
  .order-sm > .first-sm {
    order: -1;
  }

  /* Tableaux qui défilent sur le côté : une ombre au bord signale le contenu caché (les « caches » `local` se déplacent
     avec le contenu et masquent l'ombre fixe quand on est au bout). Première colonne collante en option (`sticky-first`). */
  .scroll,
  .table-wrap {
    background-image:
      linear-gradient(to right, var(--card) 30%, transparent),
      linear-gradient(to left, var(--card) 30%, transparent),
      radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / 0.22), transparent),
      radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 0.22), transparent);
    background-position:
      left center,
      right center,
      left center,
      right center;
    background-size:
      36px 100%,
      36px 100%,
      12px 100%,
      12px 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
  .scroll table.sticky-first :is(th, td):first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    max-width: 44vw;
    background: var(--card);
    box-shadow: 1px 0 0 var(--line-soft);
    overflow-wrap: anywhere;
  }
  .scroll table.sticky-first th:first-child {
    background: var(--head);
  }

  /* En-tête de page : titre, puis Aide et boutons d'action sur la même ligne (au lieu de trois lignes), pour que le bouton
     principal reste dans le premier écran. */
  .heading {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 10px;
  }
  .heading h1 {
    flex: 1 1 100%;
  }
  .heading .help-link {
    order: 2;
    margin-left: auto;
  }
  .heading .actions {
    order: 1;
    flex: 1 1 auto;
  }
}

/* --- Spec 310 : devis et documents, accueil, menu et bulle sur téléphone ------------------------------------------------
   Tout ce qui change l'écran est sous 700 px ; au-dessus, seuls les éléments propres au téléphone sont cachés. Aucun mécanisme
   nouveau côté données : les blocs repliés sont ceux de la spec 309 (`fold-sm`). */
.fold-off-sm > summary,
.line-toggle-sm,
.finder-close-sm,
.total-bar-sm,
.promo-sm,
.shortcuts-sm {
  display: none;
}
@media (max-width: 700px) {
  /* Éditeur : raccourcis clavier inutiles au doigt, quelle que soit la détection du pointeur. */
  .shortcuts {
    display: none;
  }

  /* Une ligne = une carte : désignation, quantité, prix, total ; le reste derrière « Détail ». */
  #editor-table tr:not(.line-special) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  #editor-table tr:not(.line-special) td {
    order: 5;
  }
  #editor-table tr:not(.line-special) td.row-name {
    order: 0;
  }
  #editor-table tr:not(.line-special) td:nth-child(2) {
    order: 1;
  }
  #editor-table tr:not(.line-special) td:nth-child(3) {
    order: 2;
  }
  #editor-table tr:not(.line-special) td.line-total {
    order: 3;
  }
  #editor-table tr:not(.line-special) td:last-child:not(.empty) {
    order: 9;
  }
  #editor-table tr:not(.line-special):not(.open-sm) td:nth-child(4),
  #editor-table tr:not(.line-special):not(.open-sm) td:nth-child(5),
  #editor-table tr:not(.line-special):not(.open-sm) td[data-cost-only],
  #editor-table tr:not(.line-special):not(.open-sm) td:last-child:not(.empty),
  #editor-table tr:not(.open-sm) .line-cost,
  #editor-table tr:not(.open-sm) .priority-note,
  #editor-table tr:not(.open-sm) .policy-note:not(.danger),
  #editor-table tr:not(.open-sm) .option-toggle {
    display: none;
  }
  #editor-table .line-toggle-sm {
    display: inline-flex;
    align-items: center;
    float: right;
    min-height: 44px;
    padding: 0 12px;
    margin: 0 0 4px 8px;
    font-size: 13px;
  }
  #editor-table td.line-total {
    font-weight: 600;
  }

  /* En-tête du document : replié sous « Détails » (client toujours visible). */
  .fold-off-sm > summary {
    display: none;
  }

  /* Bandeau du total, toujours visible, au-dessus de la barre du bas. */
  .total-bar-sm {
    display: flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(57px + env(safe-area-inset-bottom, 0px));
    z-index: 21;
    background: var(--card);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 14px rgba(5, 2, 64, 0.12);
    padding: 8px 12px;
  }
  .total-bar-sm .tb-sums {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-size: 12.5px;
    line-height: 1.25;
    color: var(--muted);
  }
  .total-bar-sm .tb-sums strong {
    color: var(--ink);
    font-size: 15px;
    margin-left: 4px;
  }
  .total-bar-sm button {
    width: auto;
    min-height: 44px;
    padding: 0 14px;
    white-space: nowrap;
  }
  body:has(#total-bar-sm) main {
    padding-bottom: 170px;
  }
  html:has(#total-bar-sm) {
    scroll-padding-top: 70px;
    scroll-padding-bottom: 100px;
  }
  /* Clavier ouvert : la barre du bas s'efface, le bandeau du total descend et reste seul visible. */
  html.kb-open body:has(#total-bar-sm) .bottom-nav {
    display: none;
  }
  html.kb-open .total-bar-sm {
    bottom: env(safe-area-inset-bottom, 0px);
  }
  html.kb-open .assistant-bubble:not([open]) {
    display: none;
  }
  html.finder-open {
    overflow: hidden;
  }
  html.finder-open .total-bar-sm {
    display: none;
  }

  /* Recherche d'article en plein écran ; résultats en cartes touchables. */
  #finder-sm.is-open {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: var(--bg);
    overflow-y: auto;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #finder-sm.is-open .finder-close-sm {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin-bottom: 10px;
  }
  #finder-sm.is-open .search-results button {
    display: block;
    width: 100%;
    min-height: 56px;
    margin: 0 0 8px;
    padding: 10px 14px;
    text-align: left;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
    box-shadow: none;
  }
  #finder-sm.is-open .search-results .result-name {
    display: block;
    font-weight: 600;
  }
  #finder-sm.is-open .search-results .result-hint {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 4px;
    font-size: 13px;
    color: var(--muted);
  }

  /* Fiche d'un document : actions utiles en gros boutons ; « Plus » devient une feuille qui monte du bas. */
  .promo-sm {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 8px;
  }
  .promo-sm > * {
    flex: 1 1 calc(50% - 4px);
    margin: 0;
  }
  .promo-sm form {
    display: flex;
  }
  .promo-sm .promo-button {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    text-align: center;
    font-size: 15px;
  }
  .more-list .promoted-sm {
    display: none;
  }
  .more-menu[open]::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(5, 2, 64, 0.45);
  }
  .more-list {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 71;
    max-height: 75vh;
    border-radius: 18px 18px 0 0;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .more-list a,
  .more-list button {
    display: flex;
    align-items: center;
    min-height: 48px;
    font-size: 15px;
  }
  .more-list::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    margin: 0 auto 8px;
    border-radius: 2px;
    background: var(--line);
  }

  /* Accueil : les gestes de terrain d'abord (mêmes liens que les boutons du haut, cachés ici). */
  .shortcuts-sm {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0 0 14px;
  }
  .shortcuts-sm .button {
    min-height: 48px;
    justify-content: center;
    text-align: center;
  }
  .shortcuts-sm .button:not(.secondary) {
    grid-column: 1 / -1;
  }
  .shortcuts-sm .shortcuts-more-sm {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
  }
  .shortcuts-sm .shortcuts-more-sm .button {
    flex: 1;
    min-height: 44px;
    font-size: 13px;
  }
  main:has(.shortcuts-sm) .heading .actions {
    display: none;
  }

  /* Menu : la recherche en tête, « Se déconnecter » à 44 px. */
  .side-nav .nav-search {
    order: -1;
  }
  .aside-bottom form button {
    min-height: 44px;
  }

  /* Bulle d'assistant : pastille de 44 px, au-dessus des barres fixes de la page, estompée pendant le défilement. */
  .assistant-bubble > summary {
    width: 44px;
    height: 44px;
  }
  .assistant-bubble {
    bottom: calc(66px + env(safe-area-inset-bottom, 0px));
  }
  .assistant-bubble.is-faded:not([open]) {
    opacity: 0.35;
    transform: translateX(24px); /* pastille rangée sur le bord pendant le défilement */
  }
  .assistant-bubble {
    transition:
      opacity 0.2s,
      transform 0.2s;
  }
  .day-summary {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .day-summary a {
    flex: none;
  }
  body:has(#total-bar-sm) .assistant-bubble {
    bottom: calc(57px + 68px + 12px + env(safe-area-inset-bottom, 0px));
  }
  body:has(.primary-step) .assistant-bubble {
    bottom: calc(68px + 56px + 10px + env(safe-area-inset-bottom, 0px));
  }
  .assistant-panel {
    bottom: 54px;
  }
}
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  .more-menu[open] .more-list {
    animation: sheet-up-310 0.18s ease-out;
  }
}
@keyframes sheet-up-310 {
  from {
    transform: translateY(100%);
  }
  to {
    transform: none;
  }
}

/* --- Spec 313 : onglets qui défilent, résultats de recherche d'article, état de la Banque (téléphone seulement) ---------- */
@media (max-width: 700px) {
  /* Rangée d'onglets de la page plus large que l'écran : même signal de défilement que les tableaux (ombre au bord qui cache du contenu).
     La barre du groupe (`.section-tabs`) a son propre style, plus bas (spec 318). */
  .tabs {
    background-color: var(--rail);
    background-image:
      linear-gradient(to right, var(--rail) 30%, transparent),
      linear-gradient(to left, var(--rail) 30%, transparent),
      radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / 0.22), transparent),
      radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 0.22), transparent);
    background-position:
      left center,
      right center,
      left center,
      right center;
    background-size:
      36px 100%,
      36px 100%,
      12px 100%,
      12px 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
    scrollbar-width: none;
  }
  .tabs a {
    flex: none;
  }
  /* Spec 318 : barre d'onglets du groupe (et de la fiche article) lisible sur téléphone : vrais onglets de 44 px, 14 px de
     chaque côté du libellé, onglet courant en couleur d'accent avec un trait dessous, fondu sur le bord qui cache la suite.
     `main …` pour passer devant la règle générale des liens (`main a:not(.button)`, marge intérieure de 16 px 4 px). */
  main .section-tabs {
    gap: 0;
    background: none;
    border-bottom: 1px solid var(--line);
    margin-bottom: 14px;
  }
  main .section-tabs a {
    flex: none;
    box-sizing: border-box;
    min-height: 44px;
    padding: 0 14px;
    margin: 0 0 -1px;
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    border-bottom: 3px solid transparent;
  }
  main .section-tabs a.active {
    color: var(--acc-ink);
    font-weight: 600;
    border-bottom-color: var(--acc);
  }
  main .section-tabs.fade-right:not(.fade-left) {
    -webkit-mask-image: linear-gradient(to right, rgb(0 0 0) calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, rgb(0 0 0) calc(100% - 32px), transparent);
  }
  main .section-tabs.fade-left:not(.fade-right) {
    -webkit-mask-image: linear-gradient(to left, rgb(0 0 0) calc(100% - 32px), transparent);
    mask-image: linear-gradient(to left, rgb(0 0 0) calc(100% - 32px), transparent);
  }
  main .section-tabs.fade-left.fade-right {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent,
      rgb(0 0 0) 32px,
      rgb(0 0 0) calc(100% - 32px),
      transparent
    );
    mask-image: linear-gradient(
      to right,
      transparent,
      rgb(0 0 0) 32px,
      rgb(0 0 0) calc(100% - 32px),
      transparent
    );
  }
  /* Recherche d'article plein écran : la liste prend toute la hauteur restante (le cadre plein écran défile). */
  #finder-sm.is-open .search-results {
    max-height: none;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
}

/* --- Cartes COMPACTES : `table.cards-sm.cards-compact` (spec 313), pour les longues listes ----------------------------------
   Variante générique du mécanisme `cards-sm` (spec 309), téléphone seulement. Une carte = deux lignes au plus :
     ligne 1   `card-title` (à gauche) et `card-amount` (la valeur principale, à droite)
     ligne 2   une ou plusieurs cellules `card-line`, en petit, séparées par « · » ; `card-labelled` y ajoute le libellé de la colonne
     détail    tout le reste en `card-more` (fermé par défaut) ; un `<small class="card-hide-closed">` n'apparaît que carte ouverte.
   Le bouton « Voir le détail » devient une flèche de 44 px de haut collée au bord droit (son texte reste lu par les lecteurs d'écran).
   Une case `card-check` se place à gauche de cette flèche. Rien ne change au-dessus de 700 px. */
@media (max-width: 700px) {
  .cards-compact tr {
    padding: 6px 14px;
    gap: 2px 8px;
    min-height: 52px;
    align-content: center;
  }
  .cards-compact tr:has(td.card-more) {
    padding-right: 54px;
  }
  .cards-compact tr::before {
    content: '';
    order: 10;
    flex: 0 0 100%;
    height: 0;
  }
  .cards-compact td.card-title {
    order: 0;
    flex: 1 1 0;
    font-size: 15px;
    line-height: 1.3;
  }
  .cards-compact td.card-amount {
    order: 1;
    flex: none;
    font-size: 15px;
    line-height: 1.3;
  }
  .cards-compact td.card-line {
    order: 20;
    flex: 0 1 auto;
    font-size: 14px;
    line-height: 1.3;
    color: var(--muted);
    text-align: left;
  }
  .cards-compact td.card-line:not(.card-labelled)::before {
    content: none;
  }
  .cards-compact td.card-line.card-labelled::before {
    float: none;
    margin-right: 4px;
    font-size: 14px;
  }
  .cards-compact td.card-line:has(~ td.card-line:not(:empty))::after {
    content: ' ·';
    margin: 0 0 0 4px;
  }
  .cards-compact td.card-line small {
    display: inline;
    margin-left: 4px;
    font-size: 14px;
  }
  .cards-compact tr:not(.is-open) .card-hide-closed {
    display: none;
  }
  .cards-compact tr.is-open {
    padding-bottom: 10px;
  }
  .cards-compact .card-toggle {
    position: absolute;
    top: 0;
    right: 0;
    float: none;
    width: 50px;
    height: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0;
    font-size: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    justify-content: center;
  }
  .cards-compact .card-toggle::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: translateY(-2px) rotate(45deg);
  }
  .cards-compact tr.is-open .card-toggle::after {
    transform: translateY(2px) rotate(225deg);
  }
  .cards-compact td.card-check {
    top: 4px;
    right: 50px;
  }
  .cards-compact tr:has(td.card-check) td.card-amount {
    margin-right: 44px;
  }
}
/* Évolution du prix d'achat (specs/326) : graphique SVG construit côté serveur, couleurs du thème, texte lisible en 390 px. */
.cost-chart {
  margin: 12px 0;
}
.cost-chart svg[role='img'] {
  display: block;
  max-width: 640px;
}
.cost-chart svg text {
  fill: var(--muted);
}
.cost-legend {
  list-style: none;
  margin: 8px 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.cost-legend svg {
  vertical-align: middle;
}

/* Carton entier (specs/327) : explication sous la quantité proposée, qui passe à la ligne sur téléphone. */
.carton-hint small {
  display: block;
  max-width: 18rem;
  margin-left: auto;
  white-space: normal;
  text-align: right;
}
.carton-hint .link-button {
  font-size: 0.85em;
}
.carton-list {
  padding-left: 0;
  list-style: none;
}
.carton-list li {
  margin-bottom: 10px;
}
.carton-list small {
  display: block;
}

/* --- Spec 329 : fiche d'un client, d'un prospect ou d'un fournisseur sur téléphone ---------------------------------------
   Tout ce qui change l'écran est sous 700 px ; au-dessus, seul le bloc « Dernier échange » (propre au téléphone) est caché.
   L'ordre du code est l'ordre de lecture sur téléphone comme sur ordinateur (aucun `order` CSS) ; chaque bloc du conteneur
   `.fold-panels-sm` est rangé par app.js dans un `details.fold-sm` ; `.fold-keep-sm` : jamais replié. */
.party-last-sm,
.credit-alert-sm {
  display: none;
}
@media (max-width: 700px) {
  .party-sm .panel,
  .party-sm .client-band {
    margin-bottom: 14px;
  }
  .party-sm > .fold-sm {
    margin-bottom: 10px;
  }
  .party-sm > .fold-sm[open] > summary {
    margin-bottom: 8px;
  }
  .party-sm > .fold-sm > .panel,
  .party-sm > .fold-sm > .client-band {
    margin-bottom: 4px;
  }

  /* Le titre d'un bloc replié est celui du résumé : le `h2` d'origine reste lu par les lecteurs d'écran, masqué à l'œil. */
  .fold-sm .fold-title-sm {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .party-sm .fold-sm .panel-title {
    justify-content: flex-end;
  }
  .party-sm .fold-sm .panel-title:not(:has(> :not(.fold-title-sm))) {
    display: none;
  }
  .party-sm .empty-sm {
    display: none;
  }
  .contact-row .cr-links > a {
    margin-block: 0;
  }

  .party-last-sm,
  .credit-alert-sm {
    display: block;
  }
  .party-last-sm h2 {
    margin-bottom: 8px;
  }
  .party-last-sm p {
    margin: 0 0 10px;
  }
  .party-last-sm .button {
    width: 100%;
    justify-content: center;
  }

  /* Contacts associés : nom et fonction, puis un lien de 44 px par moyen de joindre (le point-virgule des lignes d'ordinateur
     disparaît), numéros jamais coupés. */
  .contact-row {
    margin: 0 0 14px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line-soft);
  }
  .contact-row > br {
    display: none;
  }
  .contact-row .cr-name,
  .contact-row .cr-role {
    display: block;
  }
  .contact-row .cr-role {
    color: var(--muted);
    font-size: 14px;
  }
  .contact-row .cr-role:empty,
  .contact-row .cr-sep {
    display: none;
  }
  .contact-row .cr-links {
    display: flex;
    flex-direction: column;
  }
  .contact-row .cr-links > a,
  .contact-row .cr-wa {
    padding-block: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    white-space: nowrap;
  }
  .contact-row .cr-wa a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .contact-row > small {
    display: block;
  }
}

/* --- Spec 332 : Préparations et Paiements à venir en cartes compactes (téléphone seulement, tables `.cards-332`) ------------
   Le mécanisme est celui des specs 309 et 313 (`cards-sm cards-compact`). Seul ajout : le lien principal de la carte
   (`a.card-stretch`) couvre toute la carte (zone cliquable de plus de 44 px) ; les autres liens et la flèche passent au-dessus
   et ont une zone tactile de 44 px (marge négative : la ligne de texte ne grandit pas). Rien ne change au-dessus de 700 px. */
@media (max-width: 700px) {
  .cards-332 a.card-stretch::after {
    content: '';
    position: absolute;
    inset: 0;
  }
  .cards-332 td a:not(.card-stretch) {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 12px 0;
    margin: -12px 0;
  }
  .cards-332 .card-toggle {
    z-index: 2;
  }
}

/* --- Spec 334 : « Optimiser cette commande » sur un brouillon de commande fournisseur -----------------------------------
   Liste numérotée (l'ordre compte : « les 3 premiers articles de la liste ») ; explications sous chaque article. */
.optimizer-list {
  padding-left: 1.5em;
}
.optimizer-list li {
  margin-bottom: 10px;
}
.optimizer-list small {
  display: block;
}