/* Billix Evo — esprit Nexikos/Zeus : anthracite, bentos, bleu discret, clair/sombre. */
:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --border: #e2e5ea;
  --text: #1f2329;
  --muted: #6b7280;
  --accent: #2453d6;
  --accent-soft: #e8eefc;
  --accent-text: #ffffff;
  --anthracite: #23262d;
  --ok: #1e8e3e;
  --ok-soft: #e4f4e8;
  --warn: #b26a00;
  --warn-soft: #fff3dc;
  --danger: #c0392b;
  --danger-soft: #fdecea;
  --info: #475569;
  --info-soft: #eef1f5;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 16px rgba(16, 24, 40, .04);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15171c; --surface: #1d2027; --surface-2: #252932; --border: #2f343e; --text: #e8eaee; --muted: #9aa3b2;
    --accent: #7ea2ff; --accent-soft: #233056; --accent-text: #0f1320; --anthracite: #0f1115;
    --ok: #5fd08a; --ok-soft: #173426; --warn: #f2b45c; --warn-soft: #3a2c14; --danger: #ff7b6e; --danger-soft: #3d1d1a; --info: #b4bccb; --info-soft: #262b35;
    --shadow: 0 1px 2px rgba(0,0,0,.3); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #15171c; --surface: #1d2027; --surface-2: #252932; --border: #2f343e; --text: #e8eaee; --muted: #9aa3b2;
  --accent: #7ea2ff; --accent-soft: #233056; --accent-text: #0f1320; --anthracite: #0f1115;
  --ok: #5fd08a; --ok-soft: #173426; --warn: #f2b45c; --warn-soft: #3a2c14; --danger: #ff7b6e; --danger-soft: #3d1d1a; --info: #b4bccb; --info-soft: #262b35;
  --shadow: 0 1px 2px rgba(0,0,0,.3); color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.55rem; margin: 0 0 .25rem; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; margin: 0 0 .75rem; }
h3 { font-size: .95rem; margin: .5rem 0; }
code, .mono { font-family: var(--mono); font-size: .85em; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.center { text-align: center; }
.text-danger { color: var(--danger); }
.text-success { color: var(--ok); }
.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; flex: none; }
.hash { word-break: break-all; }

/* ---------- Barre supérieure ---------- */
.topbar, .sa-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; padding: .6rem 1.25rem; background: var(--anthracite); color: #f1f3f6; }
.brand { display: flex; align-items: center; gap: .55rem; color: inherit; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand-mark { display: block; width: 30px; height: 30px; border-radius: 8px; }
.brand-name em { font-style: normal; color: #8fb0ff; font-weight: 600; }
.public .brand { color: var(--text); }
/* 0.1.98 §21 bis : jamais de défilement ni de barre de défilement ; les entrées en trop vont dans « Plus ▾ » (app.js) */
.mainnav { display: flex; gap: .25rem; flex: 0 1 auto; min-width: 0; overflow: hidden; }
.nav-more { position: relative; flex: none; }
.nav-more[hidden] { display: none; }
.nav-more-btn { display: flex; align-items: center; gap: .3rem; padding: .45rem .75rem; border: 0; border-radius: 9px; background: transparent; color: #c7ccd6; font: inherit; white-space: nowrap; cursor: pointer; }
.nav-more-btn:hover, .nav-more-btn[aria-expanded="true"] { background: rgba(255,255,255,.07); color: #fff; }
.nav-more-btn.has-active { background: rgba(126,162,255,.18); color: #fff; }
.nav-more-panel { position: absolute; top: calc(100% + .35rem); left: 0; z-index: 30; min-width: 220px; padding: .35rem; border-radius: 12px; background: var(--anthracite); box-shadow: 0 10px 30px rgba(0,0,0,.35); display: grid; gap: .1rem; }
.nav-more-panel[hidden] { display: none; }
.nav-more-panel a { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; border-radius: 8px; color: #c7ccd6; white-space: nowrap; }
.nav-more-panel a:hover, .nav-more-panel a:focus-visible { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
@media (min-width: 721px) and (max-width: 1439px) { .mainnav { gap: .1rem; } .mainnav a, .nav-more-btn { padding: .45rem .55rem; gap: .3rem; } .topbar { gap: .6rem; } }
.mainnav a { display: flex; align-items: center; gap: .4rem; padding: .45rem .75rem; border-radius: 9px; color: #c7ccd6; white-space: nowrap; }
.mainnav a:hover { background: rgba(255,255,255,.07); text-decoration: none; color: #fff; }
.mainnav a.active { background: rgba(126,162,255,.18); color: #fff; }
.topbar-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 1.2rem; }
.icon-btn:hover { background: rgba(127,127,127,.15); }
.avatar { list-style: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #3a3f4b; color: #fff; font-weight: 700; cursor: pointer; }
.avatar::-webkit-details-marker { display: none; }

/* ---------- Menus déroulants ---------- */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 10px 30px rgba(0,0,0,.15); padding: .35rem; z-index: 30; display: flex; flex-direction: column; }
details.menu:not([open]) > .menu-panel { display: none; } /* 0.2.53 / 0.1.83 — tests multi-navigateurs : WebKit (Safari) comptait le menu fermé dans la largeur de la page (fiche client à 320 px) */
.menu-panel a, .menu-panel .linklike { display: block; width: 100%; text-align: left; padding: .45rem .6rem; border-radius: 7px; color: var(--text); }
.menu-panel a:hover, .menu-panel .linklike:hover { background: var(--surface-2); text-decoration: none; }
.menu-panel form { margin: 0; }
.menu-panel .stack { padding: .3rem .6rem; }
.menu-head { padding: .45rem .6rem; border-bottom: 1px solid var(--border); margin-bottom: .25rem; display: flex; flex-direction: column; }
.menu-langs { display: flex; gap: .25rem; padding: .35rem .6rem; }
.menu-langs a { padding: .15rem .45rem; width: auto; font-size: .8rem; }
.menu-langs a.active, .langs a.active { background: var(--accent-soft); color: var(--accent); }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; }
.linklike.danger { color: var(--danger) !important; }

/* ---------- Mise en page ---------- */
.container { max-width: none; margin: 0 auto; padding: 1.25rem 1.25rem 5rem; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.page-head p { margin: .1rem 0 0; }
.row-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.row-actions form { margin: 0; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.grid-main { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
.stack { display: flex; flex-direction: column; gap: .75rem; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--shadow); margin-bottom: 1rem; }
.empty { text-align: center; padding: 2.5rem 1rem; }

/* ---------- Bentos ---------- */
.bentos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .85rem; margin-bottom: 1rem; }
.bentos-3 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.bento { display: flex; flex-direction: column; gap: .3rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow); color: var(--text); }
a.bento:hover { border-color: var(--accent); text-decoration: none; }
.stat-label { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.stat-value { font-size: 1.9rem; font-weight: 750; letter-spacing: -.02em; }
.stat-value.small { font-size: 1rem; }
.money-value { font-size: 1.25rem; font-weight: 700; }
.stat-alert { border-color: var(--danger); background: var(--danger-soft); }
.stat-alert .stat-value, .stat-alert .stat-label { color: var(--danger); } /* en retard : rouge */
.stat-warn { border-color: var(--warn); background: var(--warn-soft); }
.stat-warn .stat-value, .stat-warn .stat-label { color: var(--warn); } /* impayées : orange */
.bento.plan.current { border-color: var(--accent); }
.swatch { width: 100%; height: 6px; border-radius: 6px; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; gap: .4rem; justify-content: center; border: 1px solid transparent; border-radius: 10px; padding: .55rem .95rem; font: 600 .92rem var(--font); cursor: pointer; background: var(--surface-2); color: var(--text); text-decoration: none; white-space: nowrap; }
.btn:hover { text-decoration: none; filter: brightness(.97); }
.btn-primary { background: var(--accent); color: var(--accent-text); }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-secondary { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.btn-secondary:hover { background: var(--accent); color: var(--accent-text); }
.topbar .btn-ghost, .sa-top .btn-ghost { color: #e5e8ee; border-color: rgba(255,255,255,.2); }
.btn-warning { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.btn-danger-ghost { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-sm { padding: .4rem .7rem; font-size: .85rem; }
.btn-xs { padding: .2rem .5rem; font-size: .8rem; border-radius: 7px; }
.btn-lg { padding: .8rem 1.3rem; font-size: 1rem; }
.btn-block { width: 100%; }

/* ---------- Formulaires ---------- */
label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; font-weight: 600; color: var(--text); min-width: 0; overflow-x: clip; overflow-clip-margin: 4px; } /* billix-core 0.1.67 : WebKit (Safari) comptait la plus longue option d’une liste dans la largeur du libellé (débordement de 11 px à 320 px, /quotes/new en allemand) ; clip garde les contours de focus (4 px) */
label.check, label.switch { flex-direction: row; align-items: center; gap: .5rem; font-weight: 500; }
label.switch { flex-wrap: wrap; }
label.switch small { flex-basis: 100%; font-weight: 400; }
label.inline { flex-direction: row; align-items: center; gap: .35rem; font-weight: 500; }
input, select, textarea { font: 400 .95rem var(--font); color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: .55rem .7rem; width: 100%; min-width: 0; }
/* Taille fixe, jamais réduite par un libellé long (flex-shrink) */
input[type="checkbox"], input[type="radio"] { width: 1.15rem; height: 1.15rem; min-width: 1.15rem; flex: none; margin: 0; accent-color: var(--accent); cursor: pointer; }
label.check { align-items: flex-start; }
label.check > input[type="checkbox"], label.check > input[type="radio"] { margin-top: .15em; }
input[type="color"] { padding: .15rem; height: 40px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
input[readonly] { background: var(--surface-2); }
textarea { resize: vertical; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 1rem; }
.span2, .form-grid > h2, .form-grid > .row-actions { grid-column: 1 / -1; }
fieldset { border: 0; margin: 0; padding: 0; }
fieldset.seg { display: flex; gap: 1rem; }
fieldset.checks { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
legend { font-weight: 700; margin-bottom: .4rem; }
.field-error { color: var(--danger); font-size: .8rem; font-weight: 500; }
/* §27 : champ signalé par le serveur après un envoi en arrière-plan (la saisie reste en place) */
[aria-invalid="true"] { border-color: var(--danger) !important; box-shadow: 0 0 0 2px var(--danger-soft); }
small.field-error { display: block; margin-top: .25rem; }
form[aria-busy="true"] { cursor: progress; }
.filters { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.filters input[type="search"] { max-width: 260px; }
.filters select { width: auto; }
.inline-form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.inline-form select, .inline-form input { width: auto; flex: 1 1 160px; }
/* billix-core 0.1.63 : case à cocher d'un formulaire en ligne collée à son libellé (Décompte TVA « Inclure la liste des factures ») */
.inline-form label.check { display: inline-flex; flex: 0 1 auto; align-items: center; gap: .4rem; margin: 0; }
.inline-form label.check > input[type="checkbox"], .inline-form label.check > input[type="radio"] { flex: none; width: auto; margin: 0; }
details.more > summary { cursor: pointer; color: var(--accent); font-weight: 600; padding: .25rem 0; }
details.more[open] > summary { margin-bottom: .75rem; }
.w-sm { max-width: 110px; }
.notice { background: var(--info-soft); border-radius: 9px; padding: .6rem .8rem; }

/* ---------- Tableaux ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; background: var(--surface); }
.table th, .table td { padding: .6rem .7rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 650; }
.table.compact td, .table.compact th { padding: .4rem .5rem; font-size: .9rem; }
.table tr:hover td { background: var(--surface-2); }
.table tfoot td { font-weight: 600; }
.table tfoot tr.grand td { font-size: 1.05rem; color: var(--accent); }
.num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.actions { text-align: right; white-space: nowrap; }
.row-overdue td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
tr.voided td { text-decoration: line-through; color: var(--muted); }
.table-wrap > .table { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }

/* ---------- Badges ---------- */
.badge { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .02em; background: var(--info-soft); color: var(--info); vertical-align: middle; white-space: nowrap; }
.badge-draft { background: var(--surface-2); color: var(--muted); }
.badge-sent, .badge-viewed { background: var(--accent-soft); color: var(--accent); }
.badge-partial { background: var(--warn-soft); color: var(--warn); }
.badge-paid, .badge-mail-sent, .badge-health-ok { background: var(--ok-soft); color: var(--ok); }
.badge-overdue, .badge-mail-failed, .badge-health-error { background: var(--danger-soft); color: var(--danger); }
.badge-cancelled { background: var(--surface-2); color: var(--muted); text-decoration: line-through; }
.badge-credit_note { background: #efe7fb; color: #6a3fb5; }
.badge-mail-stub, .badge-health-warning { background: var(--warn-soft); color: var(--warn); }
.badge-health-info { background: var(--info-soft); color: var(--info); }
.badge-mode-complimentary { background: var(--ok-soft); color: var(--ok); }
.badge-mode-stripe { background: var(--accent-soft); color: var(--accent); }
.fav { color: #e0a800; }
.fav .ico { fill: currentColor; }
.chip { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: .3rem .75rem; cursor: pointer; font: 500 .85rem var(--font); }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.fav-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.fav-bar > span { color: var(--muted); font-size: .85rem; display: flex; align-items: center; gap: .3rem; }

/* ---------- Messages ---------- */
.flash { padding: .7rem .9rem; border-radius: 10px; margin-bottom: 1rem; background: var(--info-soft); border: 1px solid transparent; }
.flash ul { margin: .3rem 0 0 1.1rem; padding: 0; }
.flash-success { background: var(--ok-soft); color: var(--ok); }
.flash-error { background: var(--danger-soft); color: var(--danger); }
.flash-warning { background: var(--warn-soft); color: var(--warn); }
.promo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .5rem 1.25rem; background: var(--accent-soft); color: var(--text); font-size: .9rem; }
.promo form { margin: 0; }

/* ---------- Listes ---------- */
.action-list { list-style: none; margin: 0; padding: 0; }
.action-list li { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.action-list li:last-child { border-bottom: 0; }
.action-list .amount { margin-left: auto; font-weight: 650; font-variant-numeric: tabular-nums; }
.action-list form { margin: 0; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { display: grid; grid-template-columns: 130px 1fr; gap: .6rem; padding: .4rem 0; border-bottom: 1px dashed var(--border); font-size: .9rem; }
.timeline time { color: var(--muted); font-variant-numeric: tabular-nums; }
.timeline small { display: block; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0 0 1rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; min-width: 0; word-break: break-word; }
.notes { background: var(--surface-2); border-radius: 9px; padding: .6rem .8rem; }
.onboarding ol { margin: 0; padding-left: 1.2rem; display: flex; gap: 1.5rem; flex-wrap: wrap; }
.onboarding li.done a { color: var(--ok); }
.checklist { list-style: none; padding: 0; columns: 2; }
.checklist .ok { color: var(--ok); }
.checklist .ko { color: var(--danger); }

/* ---------- Éditeur de facture ---------- */
.lines { width: 100%; border-collapse: collapse; }
.lines th { font-size: .75rem; text-transform: uppercase; color: var(--muted); text-align: left; padding: .3rem .25rem; }
.lines td { padding: .25rem; vertical-align: top; }
.lines .col-desc { width: 40%; }
.lines .col-num { width: 11%; }
.lines .col-unit { width: 8%; }
.lines .col-pct { width: 8%; }
.lines textarea { min-height: 40px; overflow: hidden; }
.lines [data-line-total] { padding-top: .8rem; font-weight: 600; }
.lines-head { display: flex; justify-content: space-between; align-items: baseline; }
.totals { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1.5rem; max-width: 360px; margin: 1rem 0 0 auto; font-variant-numeric: tabular-nums; }
.totals dd { margin: 0; text-align: right; }
.totals .grand { font-size: 1.15rem; font-weight: 750; color: var(--accent); border-top: 1px solid var(--border); padding-top: .35rem; }
.sticky-actions { position: sticky; bottom: 0; display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; padding: .75rem; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(6px); border-top: 1px solid var(--border); z-index: 10; }
.payment-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: .6rem; align-items: end; }
.payment-form .span-all { grid-column: 1 / 5; }
.sig-pad { width: 100%; max-width: 600px; height: 180px; border: 1px dashed var(--border); border-radius: 10px; background: #fff; touch-action: none; }
.sig-preview { max-height: 70px; background: #fff; border-radius: 8px; padding: .3rem; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: .5rem; margin-top: 1rem; }
.thumbs figure { margin: 0; background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface) 0 50%) 0 0 / 14px 14px; border-radius: 8px; padding: .4rem; text-align: center; }
.thumbs img { max-width: 100%; max-height: 60px; }
.thumbs figcaption { font-size: .72rem; color: var(--muted); }

/* ---------- Onglets ---------- */
.tabs, .sa-view-tabs { display: flex; gap: .25rem; overflow-x: auto; border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.tabs a, .sa-view-tabs a { padding: .55rem .8rem; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 600; font-size: .9rem; }
.tabs a.active, .sa-view-tabs a.active { color: var(--accent); border-bottom-color: var(--accent); text-decoration: none; }
.sa-view-tabs { background: var(--surface); padding: 0 1.25rem; margin: 0; }
.langs { display: flex; gap: .25rem; }
.langs a { padding: .2rem .5rem; border-radius: 7px; font-size: .8rem; font-weight: 600; color: var(--muted); }

/* ---------- Super console ---------- */
.sa-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; padding: 1rem 0; margin-bottom: .5rem; }
.env { padding: .15rem .55rem; border-radius: 7px; font-size: .75rem; font-weight: 800; background: #3a3f4b; color: #fff; text-transform: uppercase; white-space: nowrap; }
.env-line { margin: 0 0 .4rem; }
.env-prod { background: #c62828; } /* 2026-10-19 : « PROD en rouge (Attention) et CTLQ en vert » */
.env-ctlq, .env-test { background: #18762f; } /* 2026-10-22 : même vert CTLQ dans toutes les apps (#18762f, texte blanc AA) */
.access-pill { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 650; background: var(--ok-soft); color: var(--ok); }
.access-pill.warning { background: var(--warn-soft); color: var(--warn); }
a.badge-link { text-decoration: none; cursor: pointer; } a.badge-link:hover, a.badge-link:focus-visible { filter: brightness(1.15); text-decoration: underline; text-underline-offset: 2px; } /* pastilles cliquables (Health, tableau de bord), 2026-10-17 */
.health-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 1rem; }
.health-list { list-style: none; margin: 0; padding: 0; }
.health-list li { display: grid; grid-template-columns: 10px 1fr auto auto; gap: .6rem; align-items: center; padding: .45rem 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
.health-list .h-title small { display: block; font-size: .78rem; }
.health-list .h-value { font-variant-numeric: tabular-nums; text-align: right; max-width: 220px; overflow-wrap: anywhere; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--info); }
.lvl-ok .dot { background: var(--ok); }
.lvl-warning .dot { background: var(--warn); }
.lvl-error .dot { background: var(--danger); }

/* ---------- Pages publiques ---------- */
.public-top { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; max-width: none; margin: 0 auto; }
.public-actions { display: flex; gap: .75rem; align-items: center; }
.public-main { max-width: none; margin: 0 auto; padding: 1rem 1.5rem 3rem; }
.public-footer { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; padding: 1.5rem; color: var(--muted); font-size: .85rem; border-top: 1px solid var(--border); }
.public-footer .discreet { color: var(--muted); opacity: .7; font-size: .8rem; }
.app-footer { display: flex; justify-content: center; gap: 1.5rem; padding: 1rem; color: var(--muted); font-size: .78rem; }
.swiss { display: inline-block; width: 13px; height: 13px; border-radius: 2px; vertical-align: -1px; background:
  linear-gradient(#fff, #fff) center / 3px 8px no-repeat, linear-gradient(#fff, #fff) center / 8px 3px no-repeat, #d52b1e; }
.hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items: center; padding: 3rem 0 2rem; }
.hero h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; letter-spacing: -.03em; }
.lead { font-size: 1.12rem; color: var(--muted); }
.eyebrow { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.hero-cta { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2rem 0; }
.flow { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin: 2rem 0; }
.flow-step { display: flex; align-items: center; gap: .5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: .4rem .9rem .4rem .4rem; font-weight: 600; }
.flow-step span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-size: .8rem; }
.auth-card { max-width: 420px; margin: 2rem auto; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 1.75rem; box-shadow: var(--shadow); }
.auth-card.wide { max-width: 640px; }
.error-code { font-size: 3rem; font-weight: 800; color: var(--muted); margin: 0; }
.public-doc { max-width: 720px; margin: 1rem auto; }

/* ---------- Navigation mobile ---------- */
.bottomnav, .bottombar { display: none; }
@media (max-width: 900px) {
  .grid-main { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr 1fr; }
  .hero { grid-template-columns: 1fr; padding-top: 1.5rem; }
}
@media (max-width: 720px) {
  body { font-size: 15px; }
  .container { padding: 1rem .9rem 6rem; }
  .topbar { padding: .55rem .9rem; }
  .mainnav, .topbar .nav-more { display: none; }
  .hide-sm { display: none !important; }
  /* 0.1.99 : barre du bas — libellés entiers (jamais « Tableau de… »), entrées en trop dans « Plus » (app.js), aucun défilement */
  .bottombar { display: flex; align-items: stretch; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--anthracite); padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom)); }
  .bottomnav { display: flex; flex: 1 1 auto; min-width: 0; overflow: hidden; justify-content: flex-start; gap: .1rem; }
  .bottomnav a { flex: 1 0 auto; }
  .bottomnav a, .nav-more-up .nav-more-btn { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: .1rem; font-size: .72rem; line-height: 1.2; color: #c7ccd6; padding: .25rem .45rem; border-radius: 8px; }
  .bottomnav a.active, .nav-more-up .nav-more-btn.has-active { color: #fff; background: rgba(126,162,255,.18); }
  .bottomnav a span, .nav-more-up .nav-more-btn span { white-space: nowrap; }
  .bottombar .nav-more { display: flex; }
  .bottombar .nav-more[hidden] { display: none; }
  .nav-more-up .nav-more-panel { top: auto; bottom: calc(100% + .5rem); left: auto; right: 0; }
  .grid2, .form-grid { grid-template-columns: 1fr; }
  .bentos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .bentos-3 { grid-template-columns: 1fr; }
  .bento { padding: .8rem .9rem; }
  .stat-value { font-size: 1.5rem; }
  .features { grid-template-columns: 1fr; }
  .payment-form { grid-template-columns: 1fr 1fr; }
  .payment-form .span-all { grid-column: 1 / -1; }
  .timeline li { grid-template-columns: 1fr; gap: 0; }
  .health-grid { grid-template-columns: 1fr; }
  .health-list li { grid-template-columns: 10px 1fr auto; }
  .health-list .h-value { grid-column: 2 / -1; text-align: left; }
  .sticky-actions { bottom: 58px; justify-content: stretch; }
  .sticky-actions .btn { flex: 1 1 45%; }
  .lines thead { display: none; }
  .lines, .lines tbody, .lines tr, .lines td { display: block; width: 100% !important; }
  .lines tr { border: 1px solid var(--border); border-radius: 10px; padding: .4rem; margin-bottom: .6rem; display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; }
  .lines td:first-child { grid-column: 1 / -1; }
  .lines td::before { content: attr(data-label); display: block; font-size: .7rem; color: var(--muted); text-transform: uppercase; }
  .lines td:last-child::before { content: none; }
  .filters input[type="search"] { max-width: none; flex: 1 1 100%; }
  .checklist { columns: 1; }
  .app-footer { padding-bottom: 5rem; }
}
@media print {
  .topbar, .bottombar, .bottomnav, .sticky-actions, .app-footer { display: none; }
}

/* ---------- v0.1.1-cl : page commerciale ---------- */
.landing-nav { display: flex; justify-content: flex-end; gap: 1.25rem; align-items: center; margin: -.5rem 0 .5rem; flex-wrap: wrap; }
.landing-nav a { color: var(--muted); font-weight: 600; }
.landing-nav a.btn-primary { color: #fff; } /* « Ouvrir l’application » (§15) lisible */
.trust { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: center; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: .9rem; color: var(--muted); }
.landing-section { margin: 3.5rem 0; scroll-margin-top: 1rem; }
.landing-section > h2 { font-size: clamp(1.4rem, 3vw, 2rem); text-align: center; margin-bottom: 1.5rem; letter-spacing: -.02em; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }
.step-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-weight: 800; }
.qr-show { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: center; }
.qr-show h2 { text-align: left; }
.checks-list { list-style: none; padding: 0; margin: .75rem 0; display: flex; flex-direction: column; gap: .35rem; }
.checks-list li::before { content: "✓ "; color: var(--ok); font-weight: 800; }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; margin: 1rem 0; }
.price-card { display: flex; flex-direction: column; gap: .4rem; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 1.4rem; box-shadow: var(--shadow); }
.price-card.featured { border: 2px solid var(--accent); }
.price-card.current { background: var(--accent-soft); }
.price-card .price { font-size: 1.6rem; margin: .25rem 0; }
.price-card .btn { margin-top: auto; }
.faq { max-width: 780px; margin-left: auto; margin-right: auto; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: .85rem 1.1rem; margin-bottom: .6rem; }
.faq-item summary { cursor: pointer; font-weight: 650; }
.faq-item p { margin: .6rem 0 0; color: var(--muted); }
.cta-band { text-align: center; padding: 2.5rem 1.5rem; border-radius: 22px; background: linear-gradient(135deg, #1b3a99, #2453d6 60%, #4f7bff); color: #fff; margin: 3rem 0 1rem; }
.cta-band p { opacity: .9; }
.cta-band .btn-primary { background: #fff; color: #1b3a99; }
@media (max-width: 720px) {
  .steps, .qr-show { grid-template-columns: 1fr; }
  .landing-nav { justify-content: center; }
}

/* ---------- v0.1.1-cl : bouton œil des mots de passe ---------- */
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap input { padding-right: 2.6rem; }
.pw-toggle { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); border-radius: 8px; cursor: pointer; }
.pw-toggle:hover, .pw-toggle:focus-visible { color: var(--accent); background: var(--surface-2); }
.pw-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* v0.1.5-cl — pages légales et avertissement de sauvegarde */
.legal-page { max-width: 760px; margin: 0 auto; padding: 1rem 0 2rem; }
.legal-page h1 { margin-bottom: .4rem; }
.legal-page h2 { font-size: 1.05rem; margin: 1.4rem 0 .35rem; }
.legal-page p { line-height: 1.6; }
.legal-nav { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-bottom: 1rem; font-size: .9rem; }
.legal-nav a[aria-current="page"] { font-weight: 600; text-decoration: none; }
.public-footer .footer-disclaimer { flex-basis: 100%; text-align: center; margin: .2rem 0 0; font-size: .78rem; max-width: 720px; margin-inline: auto; }
.notice-card { border-left: 4px solid var(--accent, #2453d6); }

/* v0.1.6-cl — suppression d’une image importée */
.thumbs figure form { margin-top: .3rem; }

/* v0.1.7-cl — factures archivées */
.badge-muted { background: var(--surface-2); color: var(--muted); }

/* v0.1.9-cl — numéro de version visible à côté du logo */
.app-version { font-size: .68rem; font-weight: 600; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: .05rem .45rem; letter-spacing: 0; }
.sa-counters { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1rem; }
/* Offres (v0.1.19-cl) */
.badge-q-draft, .badge-q-expired { background: var(--surface-2); color: var(--muted); }
.badge-q-sent { background: var(--accent-soft); color: var(--accent); }
.badge-q-issued { background: var(--surface-2, #f1f5f9); color: var(--muted, #64748b); } /* émise, jamais envoyée (bug du 2026-10-16) */
.badge-q-accepted, .badge-q-invoiced { background: var(--ok-soft); color: var(--ok); }
.badge-q-declined { background: var(--danger-soft); color: var(--danger); }
.badge-q-expired { text-decoration: line-through; }
.bento > .badge { align-self: flex-start; }
.app-footer .discreet { color: var(--muted); opacity: .7; font-size: .8rem; }
.dash-quotes .card-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.dash-quotes .bentos { margin: .5rem 0 0; }
.bento.stat-ok .stat-value { color: var(--ok); }
/* v0.1.22-cl : historiques dans une zone à hauteur limitée avec barre de défilement visible */
.history-scroll { max-height: 22rem; overflow-y: auto; overscroll-behavior: auto; padding-right: .4rem; scrollbar-gutter: stable; }
/* Chrome / Edge : barre dessinée (toujours visible, même avec les barres « superposées » de Windows 11) ; les propriétés
   standard scrollbar-width / scrollbar-color désactiveraient ce style : réservées à Firefox. */
@supports not selector(::-webkit-scrollbar) {
  .history-scroll { scrollbar-width: thin; scrollbar-color: var(--muted) var(--surface-2); }
}
.history-scroll.history-short { max-height: 14rem; }
.history-scroll.history-tall { max-height: 70vh; }
.history-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.history-scroll::-webkit-scrollbar-track { background: var(--surface-2); border-radius: 999px; }
.history-scroll::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 999px; border: 2px solid var(--surface-2); }
.history-scroll::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.history-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.table-wrap.history-scroll > .table { overflow: visible; }
.escompte-row td { color: var(--muted); font-size: .88rem; }
.totals .t-escompte { color: var(--muted); font-size: .88rem; }
/* v0.1.24-cl : bandeaux d'alerte (comptes par défaut, superpower) */
.alert-banner { padding: .7rem 1.2rem; font-size: .92rem; text-align: center; }
.alert-danger { background: #b42318; color: #fff; }
.alert-superpower { background: #5b21b6; color: #fff; font-weight: 600; }
/* v0.1.24-cl (exigence commune §7) : toute liste a une hauteur maximale et défile dans son cadre, en-tête toujours visible ;
   les menus d'action sont en position fixe (jamais coupés) ; défilement horizontal conservé sur mobile. */
.table-wrap { max-height: clamp(320px, 70vh, 640px); overflow: auto; overscroll-behavior: auto; }
.table-wrap > .table { overflow: visible; }
.table-wrap thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); box-shadow: inset 0 -1px 0 var(--border); }
.table-wrap.history-scroll { max-height: 22rem; }
.table-wrap.history-scroll.history-tall { max-height: 70vh; }

/* §12 : résultat du test des prix Stripe, ligne par ligne */
.check-lines { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .35rem; font-size: .9rem; }
.check-lines li.ok strong { color: var(--success, #15803d); }
.check-lines li.ko strong { color: var(--danger, #dc2626); }

/* §16 : bandeau « Brouillon du … — Reprendre / Supprimer » */
.draft-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.draft-banner form { display: inline; }

/* §13 : destinataire corrigé pour un document */
.recipient-box { border: 1px dashed var(--border); border-radius: 10px; padding: .6rem .9rem; }
.recipient-box summary { cursor: pointer; font-weight: 600; }
.recipient-box .is-corrected { border-color: var(--warn); background: var(--warn-soft); }

/* Contacts e-mail du client et choix des destinataires */
.contacts, .recipients { border: 1px solid var(--border); border-radius: 10px; padding: .6rem .9rem; display: grid; gap: .45rem; }
.contacts legend, .recipients legend { font-weight: 600; padding: 0 .3rem; }
.contact-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: .5rem; align-items: center; }
@media (max-width: 640px) { .contact-row { grid-template-columns: 1fr; } }

/* §19 : fenêtre de validation des e-mails */
.mail-confirm { border: 0; border-radius: 14px; padding: 0; width: min(640px, calc(100vw - 32px)); background: var(--surface); color: var(--text); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.mail-confirm::backdrop { background: rgba(15, 23, 42, .55); }
.mail-confirm-body { padding: 1.2rem 1.4rem; display: grid; gap: .7rem; max-height: 85vh; overflow: auto; }
.mail-confirm-kv dd { word-break: break-word; }
.mail-confirm-kv dd > div + div { margin-top: .15rem; }
.alert-warning { background: var(--warn-soft); color: var(--warn); }
.alert-warning a { color: inherit; font-weight: 700; text-decoration: underline; margin-left: .25rem; }

/* ---------- v0.1.38-cl — §21 : le contenu suit la largeur de la fenêtre (320 → 2560 px, aucun défilement horizontal) ---------- */
img, video, iframe, canvas, svg:not(.ico) { max-width: 100%; }
img, video { height: auto; }
.container { max-width: none; width: 100%; padding-left: clamp(.75rem, 2.5vw, 2.5rem); padding-right: clamp(.75rem, 2.5vw, 2.5rem); }
.public-top { max-width: none; width: 100%; padding-left: clamp(.75rem, 3vw, 3rem); padding-right: clamp(.75rem, 3vw, 3rem); }
.public-main { max-width: none; width: 100%; padding-left: clamp(.75rem, 3vw, 3rem); padding-right: clamp(.75rem, 3vw, 3rem); }
/* Piège : un enfant de flex/grid garde sa largeur de contenu tant qu'il n'a pas min-width:0 */
.container > *, .public-main > *, .grid2 > *, .grid-main > *, .bentos > *, .card, .bento, .page-head > *, .topbar > *, .sa-top > * { min-width: 0; }
.grid2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.bentos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
.bentos-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.health-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.pricing-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.thumbs { grid-template-columns: repeat(auto-fill, minmax(min(100%, 90px), 1fr)); }
.features { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.steps { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.kv { grid-template-columns: fit-content(45%) minmax(0, 1fr); }
.kv > * { min-width: 0; overflow-wrap: anywhere; }
.tabs, .sa-view-tabs { flex-wrap: wrap; overflow-x: visible; }
.badge { white-space: normal; overflow-wrap: break-word; } /* break-word (jamais anywhere) : la largeur minimale reste celle des mots, une pastille de tableau ne se coupe pas lettre par lettre (« E N L I G N E », 2026-10-16) */
td .badge, th .badge { white-space: nowrap; } /* dans un tableau : une pastille sur une seule ligne (le tableau défile si besoin, .table-wrap) */
.table-wrap { overflow-x: auto; max-width: 100%; }
.mainnav { min-width: 0; }
@media (max-width: 720px) {
  .bentos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); }
}
/* Exceptions admises (§21) : longueur de ligne des textes longs (.legal-page, .faq, .public-doc) et formulaires de connexion (.auth-card) */
/* Barres supérieures : elles passent à la ligne sur un petit écran au lieu d'élargir la page */
.sa-top, .public-top { flex-wrap: wrap; row-gap: .5rem; }
.sa-top .topbar-actions, .public-actions { flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.sa-top .brand, .public-top .brand { min-width: 0; white-space: normal; }
@media (max-width: 480px) {
  .sa-top .topbar-actions { margin-left: 0; width: 100%; justify-content: flex-start; }
}

/* ---------- v0.1.40-cl — §21 précisé : les bentos restent jolis ----------
   La page suit la fenêtre, une carte ne s'étire pas : c'est le nombre de cartes par ligne qui augmente (auto-fill, jamais
   auto-fit ; une carte mesure entre N et ≈ 2N). Pleine largeur : en-têtes, tableaux et journaux seulement. */
.grid2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); }
.form-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.card:not(:has(table, .table-wrap, .timeline, pre)) { max-width: 1240px; }
input:not([type=checkbox]):not([type=radio]), select, textarea { max-width: 1100px; }
.tabs { width: fit-content; max-width: 100%; }
main p, main li, main small { max-width: 120ch; }
.health-list li { max-width: none; }

/* v0.1.40-cl — variables d'e-mail avec leur description (Paramètres → E-mails) */
.var-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .25rem 1.25rem; margin: .25rem 0 .75rem; font-size: .85rem; }
.var-list > div { display: flex; gap: .5rem; align-items: baseline; min-width: 0; }
.var-list dt { flex: none; }
.var-list dd { margin: 0; color: var(--muted); overflow-wrap: anywhere; }

/* v0.1.41-cl — §23 code de liaison Zeus */
.copy-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.copy-row input { flex: 1 1 260px; min-width: 0; font-family: ui-monospace, Consolas, monospace; font-size: .8rem; }

/* v0.1.45-cl — signalement de bugs */
.tab-count { display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.3rem; padding: 0 .35rem; margin-left: .2rem; border-radius: 999px; background: var(--danger); color: #fff; font-size: .72rem; font-weight: 800; }
.bug-head { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; }
.bug-head h2 { margin: 0; }
.bug-text { white-space: normal; overflow-wrap: anywhere; }
.bug-reply { border-left: 3px solid var(--accent); padding: .4rem .8rem; background: var(--accent-soft); border-radius: 8px; }
.bug-reply p { margin: .25rem 0 0; }
.bug-shot { max-width: 100%; max-height: 420px; border: 1px solid var(--border); border-radius: 8px; }
tr.selected td { background: var(--accent-soft); }

/* v0.1.46-cl — vue Pipeline des factures : une ligne par statut, cartes avec actions directes */
.view-switch { margin-bottom: .75rem; }
.pipeline { display: flex; flex-direction: column; gap: .9rem; }
.lane { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: var(--radius); padding: .75rem .9rem; box-shadow: var(--shadow); min-width: 0; }
.lane-to_send { border-left-color: var(--accent); }
.lane-partial { border-left-color: var(--warn); }
.lane-overdue { border-left-color: var(--danger); background: var(--danger-soft); }
.lane-paid { border-left-color: var(--ok); }
.lane-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; margin-bottom: .6rem; }
.lane-head h2 { font-size: 1rem; margin: 0; }
.lane-count { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .4rem; border-radius: 999px; background: var(--surface-2); font-size: .78rem; margin-left: .25rem; }
.lane-total { font-weight: 700; font-variant-numeric: tabular-nums; }
.lane-cards { display: flex; gap: .7rem; overflow-x: auto; padding-bottom: .35rem; scroll-snap-type: x proximity; }
.lane-empty { margin: .2rem 0; }
.pipe-card { flex: 0 0 clamp(230px, 22vw, 290px); scroll-snap-align: start; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: .65rem .75rem; display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.pipe-top { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.pipe-amount { font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pipe-client { font-weight: 600; overflow-wrap: anywhere; }
.pipe-actions { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; align-items: flex-start; }
.pipe-actions form { margin: 0; }
.pay-pop { position: relative; }
.pay-pop > summary { list-style: none; }
.pay-pop > summary::-webkit-details-marker { display: none; }
.pay-form { display: grid; gap: .4rem; margin-top: .4rem; padding: .6rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; min-width: 200px; }
.pay-form label { font-size: .8rem; }

/* v0.1.47-cl — l'œil reste dans le champ mot de passe (le champ est borné à 1100 px depuis la v0.1.40) */
.pw-wrap { max-width: 1100px; }
fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.plain[disabled] { opacity: .55; }

/* ---------- v0.1.48-cl — §24, précisé le 2026-10-10 : tableau de bord de l'Administration en verre dépoli ----------
   « Pour le dashboard reprendre les couleurs précédentes » : couleurs d'origine de Billix Evo (sombre et clair) ; le style
   reste : police système Segoe UI Variable, verre construit sur la couleur de panneau d'origine (color-mix, 82 % en sombre,
   88 % en clair) et flouté, arrondis de 18 px, graisses ≤ 600, pastilles en pilule (couleurs inchangées). */
body.super.page-dashboard {
  --font: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --glass-mix: 88%;
  font-family: var(--font);
  font-weight: 400;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.super.page-dashboard { --glass-mix: 82%; }
}
:root[data-theme="dark"] body.super.page-dashboard { --glass-mix: 82%; }
body.super.page-dashboard .card,
body.super.page-dashboard .bento,
body.super.page-dashboard .sa-view-tabs,
body.super.page-dashboard .sa-hero {
  background: color-mix(in srgb, var(--surface) var(--glass-mix), transparent);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: 18px;
}
body.super.page-dashboard .sa-top {
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  border-radius: 0 0 18px 18px;
}
body.super.page-dashboard .sa-view-tabs { margin: .5rem clamp(.75rem, 2.5vw, 2.5rem) 0; }
body.super.page-dashboard .sa-hero { padding: 1rem 1.25rem; margin-bottom: 1rem; }
body.super.page-dashboard h1, body.super.page-dashboard h2, body.super.page-dashboard h3,
body.super.page-dashboard .stat-value, body.super.page-dashboard .brand { font-weight: 600; letter-spacing: -.01em; }
body.super.page-dashboard strong, body.super.page-dashboard b, body.super.page-dashboard th,
body.super.page-dashboard a, body.super.page-dashboard .btn, body.super.page-dashboard .stat-label,
body.super.page-dashboard .sa-view-tabs a, body.super.page-dashboard .badge, body.super.page-dashboard .access-pill,
body.super.page-dashboard .env, body.super.page-dashboard .tab-count { font-weight: 500; }
body.super.page-dashboard .stat-label { text-transform: none; letter-spacing: 0; }
/* Pastilles : couleurs inchangées, forme de pilule */
body.super.page-dashboard .badge, body.super.page-dashboard .access-pill { border-radius: 999px; }

/* v0.1.49-cl — §26 Administration → Forfaits */
.lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
.lang-col { border: 1px solid var(--border); border-radius: 12px; padding: .75rem; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: .35rem 1rem; }
.plan-badge { align-self: flex-start; }
.plan-preview { border: 1px dashed var(--accent); border-radius: 12px; padding: .75rem; }
form.inline { display: inline; }

/* v0.1.49-cl — pipeline des factures en colonnes (« mettre le pipeline en colonnes ») : une colonne par statut, cartes
   empilées ; le tableau défile horizontalement dans son cadre si l'écran est étroit (jamais la page, §21). */
.pipeline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); flex-direction: initial; gap: .8rem; overflow-x: auto; padding-bottom: .5rem; align-items: start; scroll-snap-type: x proximity; }
.lane { scroll-snap-align: start; border-left-width: 1px; border-top: 4px solid var(--border); display: flex; flex-direction: column; min-height: 8rem; }
.lane-to_send { border-top-color: var(--accent); }
.lane-partial { border-top-color: var(--warn); }
.lane-overdue { border-top-color: var(--danger); }
.lane-paid { border-top-color: var(--ok); }
.lane-head { flex-direction: column; align-items: flex-start; gap: .15rem; }
.lane-cards { flex-direction: column; overflow-x: visible; overflow-y: visible; scroll-snap-type: none; }
.pipe-card { flex: 0 0 auto; width: 100%; }
/* Colonnes défilantes (« les bentos doivent être scrollables ») : chaque colonne défile seule, son en-tête (nombre, total)
   reste visible ; la hauteur suit la fenêtre. */
.lane { max-height: calc(100vh - 220px); min-height: 10rem; }
.lane-head { flex: none; }
.lane-cards { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: auto; padding-right: .2rem; }
@media (max-width: 720px) { .lane { max-height: 70vh; } }

/* §26 C — limites du forfait : jauges, bandeau, création désactivée (v0.1.51) */
.flash-link { font-weight: 600; text-decoration: underline; white-space: nowrap; }
.quota-list { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .85rem 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.quota-head { display: flex; justify-content: space-between; gap: .25rem .5rem; align-items: baseline; flex-wrap: wrap; margin-bottom: .3rem; }
.quota-head strong { white-space: nowrap; margin-left: auto; }
.alert-banner a[data-quota-upgrade] { color: inherit; font-weight: 600; text-decoration: underline; white-space: nowrap; }
.quota-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.quota-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--ok); }
.quota-warn .quota-bar > span { background: var(--warn); }
.quota-full .quota-bar > span, .quota-over .quota-bar > span { background: var(--danger); }
.quota-note { display: block; margin-top: .2rem; font-weight: 600; }
.quota-warn .quota-note { color: var(--warn); }
.quota-full .quota-note, .quota-over .quota-note { color: var(--danger); }
.btn[aria-disabled="true"] { opacity: .55; pointer-events: none; cursor: not-allowed; }
.quota-watch { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.quota-watch li { display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: baseline; }

/* v0.1.54 : cartes du pipeline compactes (« les bentos sont grands si il y a des centaines de factures ») — numéro et montant
   sur une ligne, client et objet tronqués sur une ligne (texte complet au survol), actions en petite taille côte à côte. */
.pipe-card { padding: .4rem .55rem; gap: .1rem; border-radius: 10px; font-size: .85rem; line-height: 1.3; }
.pipe-top { flex-wrap: wrap; column-gap: .5rem; }
.pipe-top .pipe-amount { margin-left: auto; }
.pipe-top a { white-space: nowrap; }
.pipe-client, .pipe-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.pipe-card .muted.small { font-size: .76rem; }
.pipe-actions { gap: .25rem; margin-top: .2rem; align-items: center; }
.pipe-actions .btn-xs, .pipe-actions summary.btn-xs { padding: .12rem .45rem; font-size: .74rem; min-height: 0; line-height: 1.4; }
.pipe-actions .btn-xs .ico { width: .9rem; height: .9rem; }
.lane-cards { gap: .4rem; }/* Carte minimale : actions derrière « … » (ouvertes sous la carte, jamais coupées par le défilement de la colonne) */
.pipe-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 .4rem; }
.pipe-meta > span { min-width: 0; }
.pipe-menu { margin-left: auto; }
.pipe-menu[open] { flex-basis: 100%; }
.pipe-menu > summary { list-style: none; cursor: pointer; display: block; width: fit-content; margin-left: auto; padding: 0 .45rem; border-radius: 6px; font-weight: 600; font-size: 1rem; line-height: 1.3; letter-spacing: .05em; color: var(--muted); }
.pipe-menu > summary::-webkit-details-marker { display: none; }
.pipe-menu > summary:hover, .pipe-menu[open] > summary { background: var(--surface-2); color: var(--text); }
.pipe-menu .pipe-actions { margin-top: .3rem; padding-top: .35rem; border-top: 1px solid var(--border); }

/* v0.1.55 : volume (milliers de factures) — pagination de la liste, « + N autres » dans le pipeline */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: .6rem 0; }
.lane-more { display: block; text-align: center; padding: .4rem; font-size: .8rem; font-weight: 600; border: 1px dashed var(--border); border-radius: 10px; }

/* v0.1.59 : pipeline lisible d'un coup d'œil (« le pipeline est trop large, on n'arrive pas voir tous les bentos ; réduire la
   taille des fonts ») — 7 colonnes de 132 px au moins tiennent dans ~1000 px ; texte plus petit ; en dessous, la bande défile
   dans son cadre (jamais la page, §21). */
.pipeline { grid-auto-columns: minmax(132px, 1fr); gap: .45rem; }
.lane { padding: .5rem .5rem .45rem; border-radius: 12px; }
.lane-head { margin-bottom: .4rem; }
.lane-head h2 { font-size: .8rem; line-height: 1.25; font-weight: 600; }
.lane-count { min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; font-size: .68rem; }
.lane-total { font-size: .78rem; font-weight: 600; }
.pipe-card { padding: .3rem .4rem; font-size: .74rem; line-height: 1.25; border-radius: 8px; }
.pipe-top { column-gap: .3rem; }
.pipe-card .muted.small, .pipe-meta { font-size: .68rem; }
.pipe-menu > summary { font-size: .85rem; padding: 0 .3rem; }
.lane-empty { font-size: .72rem; }
.lane-more { font-size: .72rem; padding: .3rem; }

/* v0.1.59 : nouveau logo (feuilles de verre) sur la page commerciale, posé derrière la carte d'exemple */
.hero-visual { position: relative; display: grid; justify-items: center; }
.hero-logo { width: clamp(120px, 16vw, 200px); height: auto; margin-bottom: -2.2rem; position: relative; z-index: 0; filter: drop-shadow(0 18px 30px rgba(80, 70, 230, .25)); }
@media (max-width: 720px) { .hero-logo { width: 110px; margin-bottom: -1.2rem; } }

/* v0.1.60 : frais en cas de retard annoncés — case toujours active, montants de la facture à côté */
.announce-fees { border: 0; padding: 0; margin: 0; display: grid; gap: .4rem; min-width: 0; }
.announce-fees .form-grid { margin: 0; }

/* §33 : « Compris » sur le bandeau du forfait */
.quota-dismiss { display: inline; margin-left: .4rem; }
.quota-dismiss .btn { color: inherit; border-color: currentColor; }

/* §39 « Envoyer un message » */
.feedback-dialog { width: min(32rem, calc(100vw - 2rem)); border: 1px solid var(--border); border-radius: 16px; padding: 1.1rem 1.2rem; background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.feedback-dialog::backdrop { background: rgba(15, 18, 30, .45); }
.feedback-dialog h2 { margin: 0; font-size: 1.05rem; }
.feedback-dialog textarea { width: 100%; }
.segmented { display: inline-flex; gap: .3rem; flex-wrap: wrap; }
.segmented label { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; font-weight: 500; }
.segmented label:has(input:checked) { border-color: var(--accent); color: var(--accent); }
.menu-item { display: block; width: 100%; text-align: left; }

/* §40 menu du compte (Nom ▾) */
.account-btn { display: inline-flex; align-items: center; gap: .3rem; max-width: 14rem; list-style: none; }
.account-btn::-webkit-details-marker { display: none; }
.account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu .menu-head small { display: block; }
.menu-sep { border: 0; border-top: 1px solid var(--border); margin: .35rem 0; }
@media (max-width: 720px) { .account-name { max-width: 7rem; } }
@media (max-width: 420px) { .account-btn { padding-left: .45rem; padding-right: .45rem; } .account-name { max-width: 2.6rem; } }

/* v0.1.64 : Health Check sans espace vide (« il y a beaucoup d'espace vide dans la console ») — cartes à leur hauteur naturelle,
   lignes serrées en haut, chemins longs repliés dans la carte */
.health-grid { align-items: start; }
.health-grid > .card { align-self: start; }
.health-list { display: block; }
.health-list .h-title { min-width: 0; overflow-wrap: anywhere; }
.health-list .h-title small { overflow-wrap: anywhere; }
/* Colonnes « maçonnerie » : chaque carte se place sous la précédente, sans attendre la plus haute de la rangée */
.health-grid { display: block; columns: 380px; column-gap: 1rem; }
.health-grid > .card { break-inside: avoid; display: block; width: 100%; margin: 0 0 1rem; }
/* Titre jamais écrasé par une valeur longue : au moins la moitié de la ligne, la valeur se replie */
.health-list li { grid-template-columns: 10px minmax(50%, 1fr) minmax(0, auto) auto; }
.health-list .h-value { max-width: 13rem; }
@media (max-width: 720px) { .health-list li { grid-template-columns: 10px 1fr auto; } }

/* v0.1.65 : bouton unique « PDF ▾ » (ouvrir / télécharger chaque document) */
.pdf-menu > summary { list-style: none; }
.pdf-menu > summary::-webkit-details-marker { display: none; }
.menu-label { display: block; padding: .35rem .75rem .1rem; font-weight: 600; }
.ico-mail { vertical-align: -3px; flex: none; }

/* v0.1.65 : signature des quittances au doigt ou à la souris */
.sig-box { border: 1px solid var(--border); border-radius: 12px; padding: .75rem .9rem; display: grid; gap: .5rem; min-width: 0; }
.sig-box .sig-pad { width: 100%; max-width: 600px; height: auto; aspect-ratio: 10 / 3; touch-action: none; }
.sig-preview { background: #fff; border-radius: 6px; vertical-align: middle; }


/* Page commerciale : vraie facture de la société de démo (Démo Immo SA), capturée depuis son PDF */
.hero-sample { position: relative; z-index: 1; margin: 0; width: 100%; max-width: 520px; }
.hero-sample img, .qr-sample img { display: block; width: 100%; height: auto; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 20px 50px rgba(36,83,214,.14); }
.hero-sample figcaption { margin-top: .5rem; font-size: .8rem; color: var(--muted); text-align: center; }
.qr-sample { margin: 0; min-width: 0; }

/* v0.1.67 : bulletin QR du solde */
.balance-qr { border: 1px solid var(--border); border-radius: 12px; padding: .8rem 1rem; }
.balance-qr legend { font-weight: 600; padding: 0 .3rem; }
.balance-modes { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }

/* v0.1.68 : envoi papier */
.badge-paper { background: #f1ede4; color: #6b4f1d; }
:root[data-theme="dark"] .badge-paper { background: #3a3122; color: #f0d9a8; }
.paper-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; }
.paper-alt { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .75rem 0; }
[data-print-paper] { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin: 0; }
[data-print-paper]:has(.btn-block) { display: flex; }
[data-print-paper] .btn-block { width: 100%; }
.paper-mark { font-size: .85rem; font-weight: 400; cursor: pointer; align-items: center; }

/* v0.1.69 : §43 mise à jour annoncée (orange, jamais rouge) */
.announce-banner { font-weight: 600; }
/* v0.1.69 : §44 forfait offert */
.offer-gift { cursor: help; margin-left: .2rem; }

/* v0.1.70 : §45 / §46 zones de suppression et de résiliation */
.danger-zone { border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); }
.danger-zone h2 { color: var(--danger); }
.gdpr-grace { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; }
.gdpr-grace label { display: flex; flex-direction: column; gap: .3rem; }
.gdpr-grace input[type="number"] { width: 7rem; }

/* v0.1.72 : §47 identifiant de connexion */
.mono { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .92em; }

/* v0.1.73 : §50 — états du journal des envois */
.badge-mail-pending { background: var(--warn-soft); color: var(--warn); }
.badge-mail-sandbox { background: var(--surface-2, rgba(127,127,127,.12)); color: var(--muted, #667); }
[data-mail-failed] { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; }
[data-mail-log] .mono { word-break: break-all; }

/* v0.1.74 : facture émise pas encore envoyée */
.badge-to-send { background: var(--warn-soft); color: var(--warn); }

/* v0.1.75 : titres de colonnes triables */
.sort-link { color: inherit; text-decoration: none; white-space: nowrap; }
.sort-link:hover, .sort-link:focus-visible { color: var(--accent); text-decoration: underline; }
.sort-link.is-sorted { color: var(--accent); }
.sort-arrow { font-size: .75em; }

/* v0.1.78 : fil d'étapes du document (facture, avoir, offre) */
.doc-steps { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin: 0 0 1rem; padding: .55rem .75rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.doc-step { display: flex; align-items: center; gap: .45rem; padding: .3rem .6rem .3rem .35rem; border-radius: 999px; color: var(--muted); }
.doc-step + .doc-step::before { content: '›'; color: var(--muted); margin: 0 .35rem 0 -.35rem; }
.doc-step-dot { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 600; border: 1.5px solid var(--border); }
.doc-step-text { display: flex; flex-direction: column; line-height: 1.15; }
.doc-step-label { font-weight: 600; }
.doc-step small { font-size: .72rem; color: var(--muted); }
.doc-step.is-done .doc-step-dot { background: var(--muted); border-color: var(--muted); color: var(--surface); }
.doc-step.is-done { color: var(--text); }
.doc-step.is-current { background: var(--accent-soft); color: var(--text); }
.doc-step.is-current .doc-step-dot { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 3px var(--accent-soft); }
.doc-step.is-warn { background: var(--warn-soft); color: var(--warn); }
.doc-step.is-warn .doc-step-dot { background: var(--warn); border-color: var(--warn); color: #fff; }
.doc-step.is-bad { background: var(--danger-soft); color: var(--danger); }
.doc-step.is-bad .doc-step-dot { background: var(--danger); border-color: var(--danger); color: #fff; }
.doc-step.is-skip { opacity: .6; }
@media (max-width: 640px) { .doc-step + .doc-step::before { display: none; } .doc-steps { gap: .3rem; } }

/* §60 (exigence commune du 2026-10-15) : aucun chevauchement — barres d'actions qui passent à la ligne avec un écart, jamais de
   hauteur fixe ; formulaires empilés espacés. Vérifié dans Edge sur tous les écrans (tests/overlap.php). */
.row-actions, .inline-form { display: flex; flex-wrap: wrap; gap: .5rem; height: auto; }
:where(:not(.row-actions, .inline-form, td, th)) > form + form { margin-top: .75rem; }

/* §57 (0.1.90, repris de Billix Hexa) : assistant de démarrage — étapes sur une ligne qui passe à la ligne (téléphone), jamais de chevauchement */
.wizard-steps { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; padding: 0; counter-reset: none; }
.wizard-steps li a { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .75rem; border: 1px solid var(--border, #e2e5ea); border-radius: 999px; color: inherit; text-decoration: none; background: var(--surface, #fff); }
.wizard-steps li.current a { border-color: var(--accent, #4338ca); font-weight: 600; }
.wizard-steps li.is-done a { color: var(--muted, #64748b); }
.wizard-steps .wizard-n { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; border-radius: 999px; background: var(--accent-soft, #eef2ff); font-size: .85em; }
.wizard-steps li.is-done .wizard-n { background: var(--ok-soft, #dcfce7); }
.wizard-foot { margin-top: 1rem; }

/* 0.1.99 : téléphone étroit (320 px) en allemand — la barre du haut et les boutons longs n'élargissent plus la page
   (« Claire Démo ▾ » à 326 px, « Zur Kenntnis genommen und akzeptiert » à 334 px) ; la version reste dans le pied de page */
@media (max-width: 400px) {
  .topbar .app-version { display: none; }
  .topbar { gap: .5rem; }
  .topbar .account-btn { max-width: 9.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
  .btn { white-space: normal; text-align: center; max-width: 100%; }
}

/* 0.2.3 : liste des appareils Face ID / passkeys (Mon compte) */
.plain-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.plain-list > li { justify-content: space-between; }
.auth-passkey { margin-top: -1rem; padding: 1rem 1.75rem; }

/* ---------- v0.2.4 : facture express, annulation de l'envoi, propositions de lignes ---------- */
.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; }
.btn-link { background: none; border: 0; color: var(--accent); font-weight: 600; padding: .5rem .25rem; cursor: pointer; }
.btn-link:hover { text-decoration: underline; }
.btn-icon { background: none; border: 0; color: var(--muted); font-size: 1.3rem; line-height: 1; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm); cursor: pointer; }
.btn-icon:hover { background: var(--surface-2); color: var(--danger); }
.chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.express-head h1 { display: flex; align-items: center; gap: .5rem; }
.express-form { max-width: 880px; display: flex; flex-direction: column; gap: 1.25rem; }
.express-step { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .75rem; align-items: start; }
.express-num { width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 600; display: grid; place-items: center; }
.express-body { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.express-body > label, .express-label { font-weight: 600; }
.express-recent { display: flex; flex-wrap: wrap; gap: .4rem; }
.express-client-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.express-client-row select { flex: 1 1 260px; min-width: 0; }
.express-filter { flex: 1 1 200px; min-width: 0; }
.express-email { padding: .75rem; border-radius: var(--radius-sm); background: var(--warn-soft); }
.express-email p { margin: 0 0 .5rem; }
.express-lines { display: flex; flex-direction: column; gap: .5rem; }
.express-line { display: grid; grid-template-columns: minmax(0, 1fr) 6rem 7rem 9rem 5.5rem 2.25rem; gap: .5rem; align-items: end; }
/* 1.0.6 / 0.1.96 : « TVA % » par ligne en mode simple ; nombres (quantité, prix, TVA) alignés à droite comme les colonnes chiffrées de l'éditeur complet */
.express-qty > span, .express-price > span, .express-vat > span { text-align: right; }
.express-line input[data-express-qty], .express-line input[data-express-price], .express-line input[data-express-vat] { text-align: right; font-variant-numeric: tabular-nums; }
.express-line input[data-express-vat][readonly] { background: var(--surface-2); color: var(--muted); }
.express-line label { display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; color: var(--muted); min-width: 0; }
.express-line label input { width: 100%; }
.express-total { display: flex; gap: .5rem; align-items: baseline; justify-content: flex-end; margin: .25rem 0 0; font-size: 1.15rem; }
.express-total strong { font-size: 1.35rem; }
.express-options { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .5rem .75rem; }
.express-options summary { cursor: pointer; display: flex; gap: .75rem; justify-content: space-between; flex-wrap: wrap; color: var(--muted); }
.express-options summary .express-edit { color: var(--accent); font-weight: 600; }
.express-options[open] summary { margin-bottom: .75rem; }
.express-actions { justify-content: flex-start; align-items: center; }
.express-hint { margin-left: auto; }
.express-again { max-width: 880px; margin-bottom: 1rem; }
.express-again h2 { font-size: 1rem; display: flex; gap: .4rem; align-items: center; margin: 0 0 .5rem; }
.express-again-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.express-again-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .75rem; align-items: center; padding: .45rem 0; border-top: 1px solid var(--border); }
.express-again-list li:first-child { border-top: 0; }
.express-again-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.express-again-amount { font-variant-numeric: tabular-nums; font-weight: 600; }
.express-back { margin: -.25rem 0 .75rem; }
.next-steps { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; justify-content: space-between; border-left: 4px solid var(--ok); margin-bottom: 1rem; }
.next-steps strong { display: flex; gap: .4rem; align-items: center; color: var(--ok); }
.suggest-pop { position: absolute; z-index: 1000; list-style: none; margin: 0; padding: .25rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); max-width: min(560px, calc(100vw - 1rem)); }
.suggest-pop li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem .6rem; border-radius: 6px; cursor: pointer; }
.suggest-pop li small { color: var(--muted); white-space: nowrap; }
.suggest-pop li:hover, .suggest-pop li.is-active { background: var(--accent-soft); }
@media (max-width: 720px) {
  .express-step { grid-template-columns: minmax(0, 1fr); }
  .express-num { display: none; }
  .express-line { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, .9fr) 2.25rem; }
  .express-line .express-desc { grid-column: 1 / -1; }
  .express-hint { display: none; }
  .express-actions .btn-primary { flex: 1 1 100%; }
  .express-actions .btn-ghost, .express-actions .btn-link { flex: 1 1 40%; }
  .express-again-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .express-again-amount { display: none; }
  /* éditeur complet : bouton principal sur toute la largeur, actions secondaires compactes (barre moins haute) */
  .invoice-editor .sticky-actions .btn-primary { flex: 1 1 100%; order: -1; }
  .invoice-editor .sticky-actions .btn-ghost { flex: 1 1 30%; padding: .4rem .5rem; font-size: .85rem; }
}
.express-body > .btn { align-self: flex-start; }
.express-filter { display: flex; align-items: center; gap: .35rem; }
.express-filter input { flex: 1 1 auto; min-width: 0; }
.express-filter svg { color: var(--muted); flex: none; }
@media (max-width: 720px) { .alert-banner { font-size: .82rem; line-height: 1.35; padding-top: .45rem; padding-bottom: .45rem; } } /* v0.2.4 : bandeau du forfait moins haut sur téléphone */

/* 0.2.5 — relevés bancaires (billix-core 0.1.24) : cases à cocher, barre des lignes cochées, « Toujours ignorer… », colonnes d'un CSV */
.table th.check, .table td.check { width: 2.25rem; text-align: center; }
.table td.check input, .table th.check input { width: 1.1rem; height: 1.1rem; margin: 0; }
[data-bank-bulk] { align-items: center; padding: .5rem 0; margin: .25rem 0; }
[data-bank-bulk] button:disabled { opacity: .5; cursor: default; }
.bank-rule { margin-top: .35rem; }
.bank-rule > summary { cursor: pointer; color: var(--muted, #64748b); }
.bank-rule[open] { display: flex; flex-direction: column; gap: .4rem; padding: .5rem; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; margin-top: .5rem; }
.bank-rule label { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .4rem; font-weight: 500; }
.bank-rule label input { flex: 1 1 10rem; width: auto; height: auto; }
.bank-search { position: relative; display: flex; flex: 1 1 12rem; min-width: 0; }
.bank-search-icon { position: absolute; left: .55rem; top: 50%; transform: translateY(-50%); display: flex; color: var(--muted, #6b7280); pointer-events: none; }
.bank-search-icon svg { width: 1rem; height: 1rem; }
.bank-search input[type="search"] { padding-left: 2rem; width: 100%; }
[data-bank-sample] thead select { min-width: 9rem; font-weight: 500; }
@media (max-width: 640px) {
  .bank-search { flex: 1 1 100%; }
}
/* téléphone : chaque ligne du relevé en carte (titre de colonne repris devant chaque valeur), rien ne déborde */
@media (max-width: 640px) {
  .bank-lines thead { display: none; }
  .bank-lines, .bank-lines tbody, .bank-lines tr, .bank-lines td { display: block; width: 100%; }
  .bank-lines tr { position: relative; padding: .6rem .75rem .6rem 2.75rem; border-bottom: 1px solid var(--border, #e2e5ea); }
  .bank-lines td { border: 0; padding: .15rem 0; text-align: left; }
  .bank-lines td.num { font-weight: 600; font-size: 1rem; text-align: left; }
  .bank-lines td.check { position: absolute; left: .75rem; top: .75rem; width: auto; padding: 0; }
  .bank-lines td:empty { display: none; }
}
/* 0.2.6 (billix-core 0.1.25) : Comptabilité — période en un clic, totaux et TVA côte à côte, réglages repliés */
.acc-export { display: grid; gap: .85rem; }
.acc-export .chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.acc-export .chip { text-decoration: none; }
.acc-export .chip.is-active { border-color: var(--accent); background: var(--accent); color: #fff; }
.acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1rem 1.5rem; margin-bottom: 1rem; }
.acc-settings > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; cursor: pointer; list-style: none; }
.acc-settings > summary::-webkit-details-marker { display: none; }
.acc-settings > summary h2 { margin: 0; }
.acc-settings > summary h2::before { content: '▸ '; color: var(--muted, #6b7280); }
.acc-settings[open] > summary h2::before { content: '▾ '; }
.acc-settings[open] > summary { margin-bottom: 1rem; }
.acc-preset { align-items: flex-end; margin-bottom: 1rem; }
.acc-preset label.inline { display: flex; flex-direction: column; gap: .3rem; }
.acc-settings fieldset { border: 1px solid var(--border); border-radius: 8px; padding: .75rem 1rem; display: grid; gap: .5rem; }
.acc-rates { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: .75rem; }
.acc-rate { display: grid; gap: .4rem; }
[data-acc-entries] td:nth-child(3) { max-width: 22rem; overflow-wrap: anywhere; }
/* 0.2.6 : aucun texte grisé dans les champs (« Oui, partout ») — la loupe signale les champs de recherche, l'exemple est au survol */
input[type="search"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: .6rem 50%; background-size: 1rem; padding-left: 2rem; }
.bank-search input[type="search"] { background-image: none; }
[data-secret-kept] { display: block; margin-top: .2rem; }
/* 0.2.7 (billix-core 0.1.26) : bugs « Système » — badge, pile d'appels et contexte lisibles, filtre par genre */
.badge-system { background: #ede9fe; color: #5b21b6; }
[data-theme="dark"] .badge-system { background: #3b2a6b; color: #ddd6fe; }
.tabs-sm { margin-top: .4rem; }
.tabs-sm a { font-size: .85rem; }
.bug-tech { margin: .25rem 0; }
.bug-tech > summary { cursor: pointer; }
.bug-pre { max-height: 26rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.45 ui-monospace, Consolas, monospace; background: var(--surface-2, #f4f5f7); border: 1px solid var(--border); border-radius: 8px; padding: .6rem .75rem; margin: .4rem 0 0; }
/* 0.2.7 : un élément masqué (attribut hidden) reste masqué même si sa classe impose un affichage (.stack, .row-actions…) —
   le panneau « Vérifiez avant l'envoi » de l'invitation d'un prospect s'affichait vide en permanence */
[hidden] { display: none !important; }
/* 0.2.8 : émetteur — personne de contact */
.issuer-contact { border: 1px solid var(--border); border-radius: 8px; padding: .75rem 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: .6rem 1rem; }
.issuer-contact legend { padding: 0 .3rem; font-weight: 600; }
/* 0.2.8 : interrupteur « Sans TVA » (facture standard et express) */
.novat-switch { align-self: end; font-weight: 600; }
.express-total + .novat-switch { margin-top: .25rem; }
/* 0.2.8 : Super console → Utilisateurs → « Ajouter un utilisateur » (replié) */
.cu-add > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; cursor: pointer; list-style: none; }
.cu-add > summary::-webkit-details-marker { display: none; }
.cu-add > summary h2 { margin: 0; }
.cu-add > summary h2::before { content: '▸ '; color: var(--muted, #6b7280); }
.cu-add[open] > summary h2::before { content: '▾ '; }
.cu-add[open] > summary { margin-bottom: 1rem; }
.cu-add fieldset { border: 1px solid var(--border); border-radius: 8px; padding: .6rem .9rem; display: grid; gap: .4rem; }
/* 0.2.8 : facture express — choix de l'émetteur en tête */
.express-issuer { margin: 0 0 1rem; max-width: 32rem; }
.express-issuer label { display: grid; gap: .3rem; font-weight: 600; }
/* 0.2.8 : choix de l'émetteur mis en évidence en tête des factures standard et express (« l'option n'était pas très visible ») */
.issuer-pick { background: var(--accent-soft, #eef2ff); border: 1px solid var(--accent, #2563eb); border-radius: 10px; padding: .7rem .9rem; font-weight: 600; }
.issuer-pick select { font-weight: 600; }
/* billix-core 0.1.35 : Super console — copier un modèle d'une autre société */
.tpl-copy-source { border-top: 1px solid var(--line, #e5e7eb); padding: .6rem 0; }
.tpl-copy-list { list-style: none; margin: .3rem 0 .6rem; padding: 0; display: grid; gap: .35rem; }
.tpl-copy-list li { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.tpl-copy-list .inline-form { margin: 0; }
/* billix-core 0.1.35 : superpower consulte l'application d'une société (lecture seule) */
.superpower-banner { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin: 0 0 1rem; padding: .55rem .9rem; border-radius: 10px; background: #7c2d12; color: #fff; font-size: .9rem; }
.superpower-banner .btn { color: #fff; border-color: rgba(255,255,255,.5); background: transparent; }
.superpower-banner .inline-form { margin: 0; }
/* 0.2.19 : accueil orienté actions (créer rapidement, indicateurs, « À faire maintenant ») et « + Créer » */
.home-head h1 { font-size: 1.55rem; }
.home-quick h2, .home-now h2 { font-size: 1.05rem; margin: 0 0 .6rem; }
.home-quick { margin-bottom: 1.1rem; }
.home-quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.home-quick-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; min-height: 92px; padding: .9rem; border-radius: var(--radius); background: var(--accent-soft); color: var(--text); font-weight: 600; border: 1px solid transparent; }
.home-quick-tile .ico { width: 24px; height: 24px; color: var(--accent); }
.home-quick-tile:hover { border-color: var(--accent); text-decoration: none; }
.home-quick-tile[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.home-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1.3rem; }
.home-kpi { display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.15rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); color: var(--text); }
.home-kpi:hover { border-color: var(--accent); text-decoration: none; }
.home-kpi-label { color: var(--muted); font-size: .92rem; }
.home-kpi-value { font-size: 1.7rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; overflow-wrap: anywhere; }
.home-kpi-value.is-danger { color: var(--danger); }
.home-kpi-value.is-ok { color: var(--ok); }
.home-kpi-sub { color: var(--muted); font-size: .9rem; }
.home-actions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.home-action { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.home-action-ico { display: inline-flex; flex: 0 0 auto; color: var(--info); }
.home-action-ico .ico { width: 22px; height: 22px; }
.home-action.tone-danger .home-action-ico { color: var(--danger); }
.home-action.tone-warn .home-action-ico { color: var(--warn); }
.home-action.tone-ok .home-action-ico { color: var(--ok); }
.home-action-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1 1 auto; }
.home-action-text strong { font-weight: 600; overflow-wrap: anywhere; }
.home-action-text small { color: var(--muted); font-size: .9rem; overflow-wrap: anywhere; }
.home-action-go { flex: 0 0 auto; margin: 0; font-weight: 600; white-space: nowrap; color: var(--text); }
.home-action-go .linklike { font-weight: 600; color: var(--text); }
.home-action-go:hover, .home-action-go .linklike:hover { color: var(--accent); }
.home-empty { display: flex; align-items: center; gap: .5rem; color: var(--ok); }
.home-more { margin: .7rem 0 0; }
.create-menu .menu-panel { min-width: 190px; }
.create-menu .menu-panel a { display: flex; align-items: center; gap: .5rem; }
.create-menu .menu-panel a[aria-disabled="true"] { opacity: .55; pointer-events: none; }
@media (max-width: 720px) {
  .home-quick-grid { gap: .5rem; }
  .home-quick-tile { min-height: 76px; padding: .6rem; font-size: .92rem; }
  .home-kpis { gap: .5rem; }
  .home-kpi { padding: .8rem .85rem; }
  .home-kpi-value { font-size: 1.25rem; }
  .home-action { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .3rem .7rem; padding: .75rem .8rem; }
  .home-action-go { grid-column: 2; justify-self: end; }
  .create-menu summary span { display: none; }
}
main li.home-action { max-width: none; }
/* 0.2.21 : facture express — nouveau client sans quitter la facture */
.express-newclient-toggle { margin-top: .5rem; }
.express-newclient-toggle .ico { width: 16px; height: 16px; vertical-align: -3px; }
.express-newclient { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .8rem .9rem; margin: .6rem 0 0; background: var(--surface); }
.express-newclient[hidden] { display: none; }
.express-form:not(:has([data-express-newclient]:checked)) .express-newclient { display: none; }
.express-form:has([data-express-newclient]:checked) .express-client-row, .express-form:has([data-express-newclient]:checked) .express-recent { display: none; }
.express-nc-type { display: flex; gap: 1rem; margin-bottom: .5rem; }
.express-newclient:has([data-nc-type][value="person"]:checked) .nc-company { display: none; }
.express-newclient:has([data-nc-type][value="company"]:checked) .nc-person { display: none; }
.tab-count-neutral { background: var(--accent); color: var(--accent-text); } /* 0.2.22 : nombre de récurrences actives */
.recur-form > summary { margin-top: .4rem; }
.recur-modes { border: 0; padding: 0; margin: 0; display: grid; gap: .45rem; }
.recur-modes .check span { display: flex; flex-direction: column; }
.recur-confirm { display: none; }
.recur-modes:has([data-recur-auto]:checked) .recur-confirm { display: flex; }
/* billix-core 0.1.43 : import de relevé directement depuis Paiements */
.payments-import { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem; }
.payments-import-file { display: flex; flex-direction: column; gap: .3rem; flex: 1 1 280px; font-weight: 600; }
.payments-import-file .ico { width: 18px; height: 18px; vertical-align: -3px; }
.payments-import-hint { flex-basis: 100%; }
/* billix-core 0.1.45 : « Lignes toujours ignorées » sous l'import rapide de Paiements */
.payments-rules > summary { cursor: pointer; display: flex; align-items: center; gap: .5rem; }
.payments-rules[open] > summary { margin-bottom: .5rem; }
.payments-rules .form-grid { margin-top: .6rem; }
/* billix-core 0.1.44 : relevé bancaire — groupes et raisons */
.bank-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; margin: 0 0 .9rem; }
.bank-groups .bento.is-current { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.bank-why { color: var(--muted); }

/* billix-core 0.1.45 : cloche des notifications (comme Fixly) */
.notify-menu { position: relative; }
.notify-btn { position: relative; padding-left: .55rem; padding-right: .55rem; }
.notify-btn .ico { width: 18px; height: 18px; }
.notify-count { position: absolute; top: -6px; right: -6px; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: 999px; background: var(--danger); color: #fff; font-size: .7rem; font-weight: 600; display: inline-grid; place-items: center; }
.notify-panel { width: min(360px, 92vw); max-height: 70vh; overflow: auto; }
.notify-head { display: flex; flex-direction: column; gap: .1rem; padding: .4rem .6rem .5rem; border-bottom: 1px solid var(--border); }
.notify-list { list-style: none; margin: 0; padding: 0; }
.notify-item { display: flex; flex-direction: column; gap: .35rem; padding: .55rem .6rem; border-bottom: 1px solid var(--border); max-width: none; }
.notify-item[data-unread] { background: var(--accent-soft); }
.menu-panel a.notify-link { display: flex; flex-direction: column; gap: .15rem; color: var(--text); padding: 0; }
.notify-link strong { font-weight: 600; }
.notify-action { margin: 0; }
.notify-status { padding: .4rem .6rem; }
.notify-status p { margin: 0; }
.notify-menu[open] > .notify-btn, .notify-btn { color: inherit; }
.notify-btn .ico { stroke: currentColor; fill: none; }

/* billix-core 0.1.46 : « Super Leo » (picto, bandeaux, page d'appel, Super console) */
.leo-picto { flex: none; vertical-align: middle; }
.leo-footer-link { display: inline-flex; align-items: center; gap: .3rem; }
.menu-panel a[data-leo-link] { display: flex; align-items: center; gap: .4rem; }
.leo-banner { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .55rem 1rem; background: #fff4e0; color: #5a3410; border-bottom: 1px solid #f0c48a; font-size: .95rem; }
.leo-banner span { flex: 1 1 260px; }
.leo-banner-live { background: #fde7e7; color: #6e1d1d; border-bottom-color: #f2b1b1; }
.leo-banner-helper { background: #1f3a8a; color: #fff; border-bottom-color: #18306f; }
.leo-banner-helper .btn { color: #fff; border-color: rgba(255,255,255,.6); }
.leo-head { display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.leo-head h1, .leo-head h2 { margin: 0 0 .2rem; }
.leo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.leo-points { margin: 0 0 1rem; padding-left: 1.2rem; display: grid; gap: .35rem; }
.leo-status { display: grid; gap: .4rem; }
.leo-facts { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0 0 1rem; }
.leo-facts dt { font-weight: 600; }
.leo-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.pre-wrap { white-space: pre-wrap; }
.leo-state-live { background: #fde7e7; color: #8a1f1f; }
.leo-state-open { background: #fff4e0; color: #7a4a10; }
@media (max-width: 560px) { .leo-facts { grid-template-columns: 1fr; } .leo-head { align-items: flex-start; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .leo-banner { background: #3a2a12; color: #f6dcb4; border-bottom-color: #6b4a1c; }
  :root:not([data-theme="light"]) .leo-banner-live { background: #3d1b1b; color: #f8caca; border-bottom-color: #6e2c2c; }
  :root:not([data-theme="light"]) .leo-state-live { background: #3d1b1b; color: #f8caca; }
  :root:not([data-theme="light"]) .leo-state-open { background: #3a2a12; color: #f6dcb4; }
}
:root[data-theme="dark"] .leo-banner { background: #3a2a12; color: #f6dcb4; border-bottom-color: #6b4a1c; }
:root[data-theme="dark"] .leo-banner-live { background: #3d1b1b; color: #f8caca; border-bottom-color: #6e2c2c; }
:root[data-theme="dark"] .leo-state-live { background: #3d1b1b; color: #f8caca; }
:root[data-theme="dark"] .leo-state-open { background: #3a2a12; color: #f6dcb4; }
/* billix-core 0.1.49 — règle générale : « quand l'écran est large les boutons devraient être près du Bento principal et pas tout à droite ».
   La zone principale garde toute la largeur (§21) ; l'en-tête de chaque page (titre + boutons) et le tableau de bord restent à la largeur des cartes. */
.dash-page { max-width: 1240px; }
.page-head:not(:has(~ * table, ~ table)), .sa-hero:not(:has(~ * table, ~ table)) { max-width: 1240px; } /* pages en cartes : largeur des cartes ; pages avec tableau : en-tête aligné sur le tableau */

/* billix-core 0.1.50 — règle générale, très grand écran : « les boutons tout à droite sont perdus seuls ».
   Colonne principale à la largeur des cartes avec son panneau latéral juste à côté (éditeur de modèles, fiches) ;
   au-delà de 1600 px, les boutons de la barre du haut (Créer, Site, compte) s'arrêtent au bord des cartes. */
@media (min-width: 1100px) { .grid-main { grid-template-columns: minmax(0, 1240px) 320px; justify-content: start; } }
@media (min-width: 1600px) { .topbar { padding-right: calc(100% - 1280px); } }
/* 0.2.29 — taux de TVA par défaut à 0 % : avertissement et correction en un clic */
.notice-warn { background: var(--warn-soft); }
.vat-zero { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .25rem 0 0; }
/* 0.2.31 / 0.1.62 — pastille « Connexion chiffrée » dans la barre du haut : elle débordait sous la cloche (pastille verte vide,
   cadenas caché, défilement de côté). Jusqu'à 900 px : cadenas seul ; jusqu'à 560 px : retirée de la barre (place des boutons). */
@media (max-width: 900px) { .topbar .secure-chip-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .topbar .secure-chip { padding: .15rem .3rem; } }
@media (max-width: 560px) { .topbar .secure-chip { margin-left: .2rem; padding: .12rem .22rem; } } /* 2026-10-22 : téléphone — cadenas seul, toujours visible (il était masqué sous 560 px) */
/* 0.2.32 — Simple / Avancé dans la barre du haut (le menu du compte le garde ; sur téléphone, seulement dans le menu du compte) */
.uimode-toggle { display: inline-flex; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 2px; gap: 2px; margin: 0; }
.uimode-toggle button { border: 0; background: transparent; color: #cfd5df; font: inherit; font-size: .8rem; font-weight: 600; padding: .25rem .65rem; border-radius: 999px; cursor: pointer; line-height: 1.2; }
.uimode-toggle button.on { background: #e5e8ee; color: var(--anthracite); }
.uimode-toggle button:not(.on):hover { background: rgba(255,255,255,.12); color: #fff; }
.uimode-toggle button:focus-visible { outline: 2px solid #8fb0ff; outline-offset: 1px; }
@media (max-width: 899px) { .uimode-toggle { display: none; } }
/* 0.2.33 — facture express : détail du calcul sous les lignes (sous-total, TVA par taux, arrondi) */
.express-breakdown { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; margin: .25rem 0 0; font-size: .9rem; color: var(--muted); }
.express-breakdown > div { display: flex; gap: 1rem; justify-content: flex-end; min-width: 16rem; }
.express-breakdown dt { margin: 0; }
.express-breakdown dd { margin: 0; min-width: 7rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.express-breakdown[hidden] { display: none; }
/* 0.2.34 — rabais et escompte dans le détail de la facture express (l'escompte n'est pas déduit du total facturé) */
.express-breakdown .is-escompte { margin-top: .25rem; padding-top: .25rem; border-top: 1px dashed var(--border); }
/* 0.2.36 / 0.1.66 — « a-t-on vraiment besoin de la case à cocher ? juste cliquer sur le nom devrait suffire » : « Nouveau client »
   devient un bouton (la case reste pour le formulaire et le clavier, invisible) ; en surbrillance tant que le nouveau client est ouvert. */
.express-newclient-toggle { position: relative; display: inline-flex; width: fit-content; max-width: 100%; align-self: flex-start; align-items: center; gap: .4rem; padding: .4rem .8rem; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; font-weight: 600; user-select: none; }
.express-newclient-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.express-newclient-toggle:hover { border-color: var(--accent); }
.express-newclient-toggle:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.express-newclient-toggle:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.express-newclient-toggle:has(input:disabled) { opacity: .55; cursor: not-allowed; }

/* 0.2.37 — suite « langues » (FR/DE/IT/EN, 320 → 1920 px) : sur téléphone, la barre du haut tient dans l'écran dans toutes les langues
   (« Website » en allemand) : le nom du compte est vraiment raccourci (la règle de 0.1.99 le rendait inline, sans largeur maximale),
   et sous 360 px seul le logo reste visible (le nom « Billix Evo » reste lu par les lecteurs d'écran). */
@media (max-width: 420px) { .topbar .account-name { display: inline-block; vertical-align: bottom; } }
@media (max-width: 360px) { .topbar .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
/* 0.2.37 — mots longs (« Allgemeine Nutzungs- und Abonnementsbedingungen ») et pied de page de l'application (« Allgemeine
   Geschäftsbedingungen ») : ils passent à la ligne au lieu d'élargir la page à 320 px */
h1, h2, h3, h4 { overflow-wrap: break-word; hyphens: auto; }
.app-footer { flex-wrap: wrap; row-gap: .4rem; }

/* 0.2.39 — décompte TVA (billix-core 0.1.55, menu « Plus ») ; impression : seulement les chiffres */
.vatrep-years { align-items: end; }
.vatrep-filters > .form-grid { margin: .75rem 0 1rem; }
.vatrep-basis legend { font-weight: 600; font-size: .85rem; margin-bottom: .4rem; }
.vatrep-caption { font-size: 1rem; margin: 1rem 0 .4rem; }
.vatrep-docs summary { cursor: pointer; }
.vatrep-docs ul { text-align: left; margin: .3rem 0 0; }
@media print { .vatrep-filters, .vatrep-actions { display: none; } .vatrep-docs:not([open]) summary::marker { content: ''; } }

/* 0.2.53 / 0.1.83 — tests multi-navigateurs : WebKit (Safari) comptait le plus long choix d’une liste dans la largeur d’un formulaire empilé (fiche client à 320 px, « Créer depuis un favori ») ; même correctif que les libellés (billix-core 0.1.67) */
.stack:has(> select) { min-width: 0; overflow-x: clip; overflow-clip-margin: 4px; }

/* billix-core 0.1.75 : Envois d'e-mails — erreurs quittancées grisées, quittance sur place, actions groupées */
.table tr.is-acked td { opacity: .62; }
.table tr.is-acked td.actions { opacity: 1; }
.table .check-col { width: 2.2rem; text-align: center; }
.ack-one > summary { list-style: none; display: inline-flex; }
.ack-one > summary::-webkit-details-marker { display: none; }
.ack-form { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.ack-form input { min-width: 10rem; }
.ack-bulk { margin-top: .8rem; gap: .8rem 1.2rem; }
/* billix-core 0.1.75 (Evo 0.2.58 / Hexa 0.1.88) : molette — une liste ou un tableau qui ne déborde pas laisse défiler la page ; une liste qui
   déborde défile, puis la page prend le relais à la fin (overscroll-behavior: auto ; jamais contain sur les blocs de la page). */
/* Billix Evo 0.2.59 : décompte TVA pour l'ePortal de l'AFC */
[data-estv-show][hidden]{display:none}
.estv-form h2,.estv-result h2,.estv-settings h2{margin-top:0}
.estv-table td:first-child{white-space:nowrap;width:4.5rem}.estv-table td:nth-child(2){min-width:16rem;overflow-wrap:anywhere}
.estv-table tr.estv-total td{font-weight:600;border-top:2px solid var(--border, rgba(127,127,127,.35))}
.estv-other summary{cursor:pointer;margin:.5rem 0}
.estv-map{border:0;padding:0;margin:.75rem 0 1rem}.estv-settings-form .row-actions,.estv-form .row-actions{margin-top:1rem}.estv-map legend{font-weight:600;margin-bottom:.35rem}
/* 2026-10-25 — « les pages doivent s'adapter à la taille de l'écran ; sur grand écran le contenu reste étroit au centre » :
   à partir de 1440 px, les cartes, l'en-tête des pages et le tableau de bord suivent la largeur de la zone principale (plus de
   colonne de 1240 px) ; marges qui grandissent avec l'écran ; formulaires sur 2 à 3 colonnes ; panneau latéral plus large ; les
   boutons de l'en-tête restent au bord du contenu (le contenu occupe toute la largeur). Textes longs (CGA, aide, e-mails) : largeur
   de lecture inchangée (.legal-page, .faq, .public-doc, paragraphes ≤ 120 caractères). */
.container { padding-left: clamp(.75rem, 2.5vw, 4rem); padding-right: clamp(.75rem, 2.5vw, 4rem); }
@media (min-width: 1440px) {
  .dash-page { max-width: none; }
  .card:not(:has(table, .table-wrap, .timeline, pre)) { max-width: none; }
  .page-head:not(:has(~ * table, ~ table)), .sa-hero:not(:has(~ * table, ~ table)) { max-width: none; }
  .grid-main { grid-template-columns: minmax(0, 1fr) clamp(320px, 22vw, 520px); justify-content: stretch; }
  .form-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, max(320px, 30%)), 1fr)); }
  .grid2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, max(440px, 32%)), 1fr)); }
  .topbar { padding-left: clamp(.75rem, 2.5vw, 4rem); padding-right: clamp(.75rem, 2.5vw, 4rem); }
}

/* billix-core 0.1.78 — « il faut partir du principe que l'on peut avoir des milliers d'utilisateurs » : cloche (tout marquer comme lu),
   actions groupées et lots de la Super console, champ client par recherche, filtres des journaux et des sessions. */
.notify-head .notify-all { align-self: flex-start; margin-top: .25rem; }
.bulk-bar { margin: 0 0 .75rem; }
.bulk-bar > summary { list-style: none; cursor: pointer; display: inline-flex; }
.bulk-bar > summary::-webkit-details-marker { display: none; }
.bulk-bar-body { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; padding: .6rem .75rem; margin-top: .4rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.bulk-bar-body .inline-form { align-items: center; }
.bulk-bar-body input[type=file] { max-width: 16rem; }
.batch-progress { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: .5rem 0 1rem; }
.batch-progress progress { width: min(28rem, 100%); height: .7rem; accent-color: var(--accent); }
.batch-sample { margin: .25rem 0 .75rem; padding-left: 1.2rem; columns: 2 18rem; column-gap: 2rem; }
.client-pick { display: block; min-width: 0; }
.client-pick .acpk, .client-pick input[type=text] { width: 100%; }
.sa-counters a.badge { text-decoration: none; }
.sa-counters a.badge.is-active { outline: 2px solid currentColor; outline-offset: 1px; }
.bug-autoack { margin-bottom: .75rem; }
.bug-autoack input[type=number] { width: 6rem; }

/* billix-core 0.1.78 — « dans Billix il faudrait aussi aligner » (retour sur 0.2.59 à ~2000 px) : barre du haut, contenu et pied de page
   dans le MÊME conteneur fluide (mêmes bords gauche et droit, marges qui grandissent avec l'écran) ; menu du compte au bord droit du
   conteneur ; tableau de bord étalé (4 indicateurs par ligne, tuiles et « À faire maintenant » sur la largeur) ; bandeau lisible. */
@media (min-width: 721px) {
  .topbar, .sa-top, .app-footer { padding-left: clamp(.75rem, 2.5vw, 4rem); padding-right: clamp(.75rem, 2.5vw, 4rem); }
  .sa-view-tabs, body.super.page-dashboard .sa-view-tabs { margin-left: clamp(.75rem, 2.5vw, 4rem); margin-right: clamp(.75rem, 2.5vw, 4rem); }
}
@media (min-width: 1440px) {
  .topbar, .sa-top { padding-right: clamp(.75rem, 2.5vw, 4rem); }
  .app-footer { justify-content: flex-start; } /* 1.0.5 : groupe compact au bord gauche du conteneur, plus réparti sur la largeur */
  .home-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); }
  .notice-card p, .notice-card li { max-width: 90ch; }
}

/* billix-core 0.1.78 — largeur MAXIMALE (retour utilisateur sur Nexikos, lignes « vraiment très larges ») : un seul conteneur partagé,
   min(100 % − 2 × marge, 1680 px), centré ; barre du haut, contenu, onglets de la console et pied de page ont les mêmes bords ;
   au-delà de 1680 px, l'espace en plus devient une marge centrée (les fonds de la barre et du pied restent sur toute la largeur). */
:root { --bx-gutter: clamp(.75rem, 2.5vw, 4rem); --bx-max: 1680px; --bx-side: max(var(--bx-gutter), calc((100% - var(--bx-max)) / 2)); }
@media (min-width: 721px) {
  .container, .topbar, .sa-top, .app-footer { padding-left: var(--bx-side); padding-right: var(--bx-side); }
  .sa-view-tabs, body.super.page-dashboard .sa-view-tabs { margin-left: var(--bx-side); margin-right: var(--bx-side); }
}
@media (min-width: 1440px) {
  .topbar, .sa-top { padding-right: var(--bx-side); }
  /* lignes de liste : montant et actions près du texte (tableau à la largeur de son contenu, au moins 960 px), recherche ≤ 640 px */
  .table-wrap > table.table:not(.doc-lines):not(.lines) { width: auto; min-width: 0; }
  /* listes « nom … détail » (Super console, destinataires) : à la largeur du texte, pas étirées sur 1680 px */
  .action-list { max-width: 960px; }
  .action-list li { justify-content: flex-start; column-gap: 1.5rem; }
  input[type=search] { max-width: 640px; }
}

/* Correctif 2026-10-25 — choix visible « Prix HT » / « Prix TTC » (factures, offres, facture express) et rabais de ligne
   toujours visible en facture express (pastille « Rabais −x % » modifiable, × pour le retirer). */
.vat-mode-field { display: flex; flex-direction: column; gap: .3rem; align-self: end; }
.vat-mode-title { font-weight: 600; }
.vat-mode-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 2px; margin: 0; min-width: 0; background: var(--surface); width: max-content; max-width: 100%; }
.vat-mode-opt { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.vat-mode-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.vat-mode-opt span { padding: .3rem .8rem; border-radius: 999px; font: 600 .85rem var(--font); color: var(--muted); white-space: nowrap; }
.vat-mode-opt input:checked + span { background: var(--accent); color: var(--accent-text, #fff); }
.vat-mode-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.express-vat-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .25rem; }
.express-vat-row .novat-switch { align-self: center; margin: 0; }
.express-disc { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .3rem .15rem .6rem; cursor: default; border-color: var(--accent); color: var(--accent); white-space: nowrap; }
.express-disc[hidden] { display: none; }
.express-disc label { display: inline-flex; align-items: center; gap: .2rem; margin: 0; font: inherit; color: inherit; }
.express-disc input { width: 3.5rem; padding: .1rem .3rem; font: inherit; text-align: right; }
.express-disc .chip-x { border: 0; background: none; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 .25rem; }

/* Téléphone (≤ 480 px) — « Refacturer » de la facture express : bouton sous le texte (plus de débordement à 414 px) */
@media (max-width: 480px) {
  .express-again-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .express-again-list li > form { grid-column: 1 / -1; justify-self: start; }
}

/* 0.2.61 — récapitulatif de la facture express aligné : sous-total, rabais, TVA et total dans les mêmes colonnes, à droite
   (le total n'est plus décalé par la mention de TVA) ; mention « TVA … ajoutée / incluse » sur sa propre ligne. */
.express-recap { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; margin: .25rem 0 0; }
.express-recap .express-vat-note { margin: 0; text-align: right; align-self: stretch; }
.express-recap .express-vat-note:empty { display: none; }
/* « Prix HT / Prix TTC » sans objet avec « Sans TVA » : grisé, valeur gardée pour quand la TVA revient */
.vat-mode-seg.is-off { opacity: .5; }
.vat-mode-seg.is-off .vat-mode-opt { cursor: not-allowed; }
.vat-mode-off-hint { font-size: .8rem; color: var(--muted); align-self: center; padding: 0 .5rem; }
.vat-mode-off-hint[hidden] { display: none; }
/* téléphone : boutons d'envoi à la ligne (« Envoyer à adresse@… » ne fait plus déborder la page à 414 px) */
@media (max-width: 720px) {
  .express-actions .btn { white-space: normal; max-width: 100%; }
}

/* billix-core 0.1.79 — récapitulatif commun (window.bxSummary) : facture express, éditeur de facture, éditeur d'offre.
   Libellés et montants dans les mêmes colonnes, à droite ; total en gras sous un filet. */
.bx-sum { display: flex; flex-direction: column; align-items: stretch; gap: .15rem; margin: .25rem 0 0 auto; width: max-content; max-width: 100%; font-size: .9rem; }
.bx-sum[hidden] { display: none; }
.bx-sum > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(7.5rem, auto); column-gap: 1rem; align-items: baseline; }
.bx-sum dt { margin: 0; text-align: right; color: var(--muted); font-weight: 400; }
.bx-sum dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.bx-sum .is-total { margin-top: .2rem; padding-top: .3rem; border-top: 1px solid var(--border); font-size: 1.15rem; }
.bx-sum .is-total dt, .bx-sum .is-total dd { color: var(--text); font-weight: 600; }
.bx-sum .is-total dd { font-size: 1.3rem; }
.express-recap .bx-sum { align-self: flex-end; }

/* 0.2.61 — colonnes de nombres des lignes (éditeurs de facture et d'offre) : titre aligné à droite sur ses valeurs
   (« MONTANT HT » était à gauche au-dessus de montants à droite) ; quantités, prix, rabais et TVA saisis à droite aussi. */
.lines th.col-num, .lines th.col-pct, .lines td.num { text-align: right; }
.lines input[data-qty], .lines input[data-price], .lines input[data-disc], .lines input[data-vat] { text-align: right; font-variant-numeric: tabular-nums; }
/* titres des colonnes saisies (Qté, Prix, Rabais, TVA) : bord droit sur le texte des champs (cellule .25rem + champ .7rem + bordure) */
.lines th.col-num:not([data-amount-head]), .lines th.col-pct { padding-right: calc(.25rem + .7rem + 1px); }
.lines th[data-amount-head] { padding-right: .25rem; }

/* Correctif après v0.2.61 (« en allemand ça déborde ») : aucun mot ne dépasse d'une carte du tableau de bord, dans les 4 langues,
   de 320 à 2560 px — éléments de grille rétrécissables, mots longs repliés, grands chiffres en taille fluide. */
.bentos > *, .home-kpis > * { min-width: 0; }
.bento, .home-kpi { min-width: 0; overflow-wrap: break-word; }
.bento > *, .home-kpi > * { min-width: 0; max-width: 100%; }
.stat-label, .home-kpi-label, .home-kpi-sub, .bento small { overflow-wrap: anywhere; hyphens: auto; }
.stat-value { font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.9rem); line-height: 1.15; overflow-wrap: anywhere; }
.money-value { font-size: clamp(1.05rem, .95rem + .5vw, 1.25rem); overflow-wrap: anywhere; }
.home-kpi-value { font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); }
.stat-sub { display: block; font-size: .85rem; line-height: 1.35; }
/* Devis accepté : « Facturer » bouton principal plein (contraste ≥ 4.5:1 dans les deux thèmes), à la taille des actions de ligne. */
.action-list .btn-primary.btn-xs, .table .btn-primary.btn-xs { font-weight: 650; }
/* Devis du tableau de bord (« faire comme pour les factures ») : les quatre cartes se partagent la ligne de leur carte (bornée à
   1240 px, §21 : une carte ne dépasse jamais ≈ 310 px), titres sur une ligne aux largeurs de bureau ; sous 720 px, la grille des
   cartes de factures. Une colonne par carte présente, jamais de nombre de colonnes figé. */
@media (min-width: 721px) and (max-width: 1279px) { .dash-quotes .bentos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .dash-quotes .bentos { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }

/* §74 — menu « Compte » standard (apps-core account-menu) aux couleurs de Billix : jetons --am-* rattachés aux variables de
   l'application (clair et sombre suivent data-theme), déclencheur au style des boutons discrets de l'en-tête. */
html[data-theme] body .am-menu, html:not([data-theme]) body .am-menu {
  --am-bg: var(--surface); --am-fg: var(--text); --am-muted: var(--muted); --am-line: var(--border); --am-hover: var(--surface-2, var(--accent-soft));
  --am-accent: var(--accent); --am-accent-fg: var(--accent-text, #fff); margin-left: 0;
}
.am-trigger { border-radius: 10px; font-weight: 600; min-height: 34px; }
.am-panel { border-radius: 12px; }

/* Listes sur grand écran (retour utilisateur 2026-10-26 « le bento n'est pas aligné » : titre, filtres et tableau avaient trois ou
   quatre bords droits différents, le tableau laissait la moitié de l'écran vide). Un seul conteneur partagé (--bx-side, 1680 px au
   plus) : en-tête (titre, action principale, « ? »), lignes de filtres et carte du tableau ont les mêmes bords gauche et droit.
   Filtres : recherche et listes s'élargissent pour remplir la ligne (champ de recherche 1100 px au plus, règle des champs), le
   dernier bouton ou lien va au bord droit. Tableau des pages de liste (main[data-list-page]) : toute la largeur du conteneur,
   l'espace en plus réparti entre les colonnes (montants à droite, actions au bout). */
@media (min-width: 721px) {
  .filters > input[type="search"] { flex: 2 1 280px; max-width: 1100px; }
  .filters > select, .filters > .client-pick, .filters > label.inline { flex: 1 1 180px; max-width: none; }
  .filters > .client-pick > input[type="text"] { width: 100%; }
  .filters > label.inline > input { width: 100%; }
  .filters > :last-child { margin-left: auto; }
}
@media (min-width: 1440px) {
  main[data-list-page] > .table-wrap > table.table:not(.doc-lines):not(.lines), main[data-list-page] > .card > .table-wrap > table.table:not(.doc-lines):not(.lines) { width: 100%; }
}

/* §74 / §21 (Billix 1.0.3 / 0.1.93) — barre du haut de la Super console (apps-core console-nav) sur téléphone : logo, environnement,
   « Menu », « Site », « Application » et menu du compte passent à la ligne au lieu d'élargir la page (454 px pour 320 px avant) */
@media (max-width: 720px) {
  .cn-top .cn-bar { flex-wrap: wrap; row-gap: 8px; padding-block: 8px; }
  .cn-top .cn-bar > * { min-width: 0; }
}

/* 1.0.5 — pied de page groupé (retour utilisateur « Garder cela l'un à côté de l'autre dans les bas de page, ne pas les étendre ») :
   les éléments du pied restent côte à côte en UN groupe compact (petit écart), jamais répartis sur toute la largeur (plus de
   space-between) ; application et Super console : groupe aligné à gauche sur le conteneur partagé, comme le logo de la barre du haut ;
   page commerciale et connexion : groupe centré de 900 px au plus, comme avant ; sur téléphone, passage à la ligne propre.
   Contraste ≥ 4.5:1 dans les deux thèmes : couleur propre au pied (--foot-fg), plus d'opacité réduite sur les liens « discrets ». */
:root { --foot-fg: #4b5563; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --foot-fg: #b4bccb; } }
:root[data-theme="dark"] { --foot-fg: #b4bccb; }
.app-footer, .public-footer { color: var(--foot-fg); column-gap: 1.25rem; row-gap: .35rem; flex-wrap: wrap; align-items: baseline; }
.app-footer { justify-content: flex-start; }
.app-footer .discreet, .public-footer .discreet { color: var(--foot-fg); opacity: 1; font-size: inherit; }
.app-footer a, .public-footer a { color: var(--foot-fg); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 2px; }
.app-footer a:hover, .public-footer a:hover { color: var(--text); text-decoration-color: currentColor; }
.public-footer { justify-content: center; padding-inline: max(1.5rem, calc((100% - 900px) / 2)); }
@media (max-width: 720px) {
  .app-footer, .public-footer { column-gap: 1rem; padding-inline: 1rem; }
}

/* billix-core 0.1.85 : champ « Code promo » (apps-core billing, inscription et page Abonnement) à la largeur d'un code, jamais
   étiré sur toute la carte (test des largeurs : champ trop large) */
.ac-bill .ac-bill-field input[type=text], .ac-bill-field input[type=text] { width: 100%; max-width: 22rem; }
/* billix-core 0.1.85 : bouton « Action groupée : … » sur téléphone — le libellé passe à la ligne au lieu d'élargir la page */
.bulk-bar > summary { white-space: normal; max-width: 100%; text-align: left; overflow-wrap: anywhere; }