/* =====================================================================================================
   Sonco Pay : système de design commun (toutes les pages). Guide complet : DESIGN-SYSTEM.md à la racine.

   JETONS (:root, redéfinis en sombre)
     Surfaces   --bg (page) --bg-2 (remplissage discret) --card (surface) --card-2 (surface en retrait)
                --side (barre latérale) --hover --nav-on (élément de menu actif)
     Texte      --ink (principal) --ink-2 (secondaire) --mute (tertiaire, AA sur --card et --bg)
     Bordures   --line (fine) --line-2 (champs, plus marquée)
     Accent     --acc (orange par défaut, surchargé par /theme.css) --acc-h (survol) --acc-2 (alias, à éviter) --acc-soft --acc-ink (texte sur --acc)
     États      --ok --warn --bad --info (+ -soft = fond, -line = bordure) ; mode test : --test --test-soft --test-ink
     Forme      --r-xs 6 --r-sm 8 --r 10 --r-md 12 --r-lg 14 --r-pill
     Ombres     --shadow (carte) --shadow-md (menus) --shadow-lg (modales) --ring (anneau de focus des champs)
     Espaces    --s1 4 --s2 8 --s3 12 --s4 16 --s5 20 --s6 24 --s8 32 --s10 40
     Texte      --fs-xs 12 --fs-sm 13 --fs 14 --fs-md 15 --fs-lg 17 --fs-xl 20 --fs-2xl 24 --fs-3xl 30
     Polices    --font (pile système) --mono
     Mouvement  --t (160ms) --t-slow (220ms) --ease

   COMPOSANTS
     .btn [.ghost .secondary .danger .danger.solid .link] [.sm .lg .block .icon] [aria-busy=true | .loading]
     .icon-btn  .avatar  .spinner
     .field > label + .input|select.input|textarea.input + .hint | .field-err ; .field.invalid
     .switch (et .mode-switch) > input + .track > .knob ; .choice (case à cocher + texte) ; .lang-sel
     .badge.<statut> (ok : paid delivered confirmed completed active matched on ; info : confirming pending queued
       sent seen ; warn : waiting pending_review in_review review unknown unmatched ; neutre : expired dropped off
       ignored new plain ; bad : partially_paid failed rejected suspended error) ; .badge.plain = sans pastille
     .pill.live / .pill.test   .tag
     .card > .card-h (h3 + actions) / .card-b / .card-f ; .card.flat ; .card.pad
     .kpis > .card.kpi > .l / .v / .s
     .table-wrap > table (th, td, td.num, tr.click, .trunc) ; table.compact ; .card > table sans thead défile seul
     .tabs > button(.on | [aria-selected=true]) ; .seg (contrôle segmenté)
     .note[.info .ok .bad] ; .alert[.info .ok .bad] > .alert-t + texte ; .banner ; .testbar ; .sim
     .empty (+ .empty-ic, .empty-t, .empty p) ; .skel / .skel-line / .skel-block
     .modal(.wide | .drawer) > .card ; .toasts > .toast(.ok .bad)
     .secret (code + bouton copier) ; [data-copy] (copie, géré par common.js) ; code, .code-i (code dans une phrase), kbd, pre.code (.c .s .k)
     .kv (dl) ; .stepper ; .bars / .bars-x ; .meter ; details.fold ; .divider
   COQUILLE : .app > aside.side(.brand .nav .nav-sep .side-foot) + .scrim + .col > header.topbar(.burger .crumb .top-r)
     + main.main ; .page-h ; body.nav-open ouvre le tiroir (< 900 px). Connexion : .login > .card.
   UTILITAIRES : .muted .ink .small .xs .mono .tnum .strong .neg .pos .row .spread .stack .stack-s .grid2 .grid3
     .mb .mb-s .mt .mt0 .mt-s .my .my-s .gap-s .w-full .center .end .sr .hidden .nowrap .break
   ===================================================================================================== */

:root{
  color-scheme:light;
  /* surfaces */
  --bg:#f6f7f9;--bg-2:#eff1f4;--card:#ffffff;--card-2:#fafbfc;--side:#fbfbfc;--hover:#f1f3f6;--nav-on:#eceef3;
  /* texte */
  --ink:#0f1520;--ink-2:#353d4b;--mute:#5f6878;
  /* bordures */
  --line:#e4e7ec;--line-2:#d3d8e0;
  /* accent */
  --acc:#ea580c;--acc-h:#c2410c;--acc-2:#f97316;--acc-soft:#fff1e7;--acc-ink:#ffffff;
  /* états */
  --ok:#067647;--ok-soft:#ecf8f1;--ok-line:#b5e3c8;
  --warn:#a6470a;--warn-soft:#fdf6e9;--warn-line:#f2d39b;
  --bad:#b42318;--bad-soft:#fdf1f0;--bad-line:#f5c2bd;
  --info:#1e56c4;--info-soft:#eef4fe;--info-line:#bfd3f7;
  --test:#b45309;--test-soft:#fff7e6;--test-ink:#7a3a06;
  --bad-solid:#b42318;
  /* surfaces surélevées (menus, fenêtres, tiroirs) : en clair identiques aux cartes, plus claires en sombre */
  --pop:var(--card);--pop-2:var(--card-2);--pop-h:var(--hover);
  /* surface inversée (toasts), voile, code (toujours sombre) */
  --inv:#151a22;--inv-ink:#f2f4f7;--inv-ok:#4fd18b;
  --scrim:color-mix(in srgb,#05070b 45%,transparent);--scrim-m:color-mix(in srgb,#05070b 50%,transparent);
  --code-bg:#0d1117;--code-2:#11161e;--code-pane:#121821;--code-line:#1f2630;--code-line-2:#2a3340;
  --code-ink:#d6deeb;--code-mute:#9aa6b2;--code-hi:#f2f4f7;--code-sel:#1c232e;--code-c:#8b98a5;--code-s:#a5d6a7;--code-k:#9ab8ff;--code-ok:#4fd18b;
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235f6878' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  /* forme */
  --r-xs:6px;--r-sm:8px;--r:10px;--r-md:12px;--r-lg:14px;--r-pill:999px;
  --shadow:0 1px 2px rgba(15,21,32,.04),0 1px 1px rgba(15,21,32,.03);
  --shadow-md:0 4px 12px -2px rgba(15,21,32,.08),0 2px 4px -2px rgba(15,21,32,.05);
  --shadow-lg:0 24px 48px -12px rgba(15,21,32,.22),0 4px 12px rgba(15,21,32,.06);
  --ring:0 0 0 3px color-mix(in srgb,var(--acc) 20%,transparent);
  /* espaces */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;
  /* texte */
  --fs-xs:12px;--fs-sm:13px;--fs:14px;--fs-md:15px;--fs-lg:17px;--fs-xl:20px;--fs-2xl:24px;--fs-3xl:30px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","PingFang SC","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  /* mouvement */
  --t:160ms;--t-slow:220ms;--ease:cubic-bezier(.2,.7,.2,1);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  /* élévation : --bg < --side < --card-2 (en retrait) < --card < --pop (menus, fenêtres, tiroirs) */
  --bg:#0b0e13;--bg-2:#1c222b;--side:#10141a;--card:#151a22;--card-2:#11151c;--hover:#1f2630;--nav-on:#262e3a;
  --pop:#1b212b;--pop-2:#171c25;--pop-h:#262d38;
  --ink:#eaedf2;--ink-2:#c4cbd6;--mute:#98a2b3;
  --line:#29313d;--line-2:#4a5466;
  --acc:#fb923c;--acc-h:#fdba74;--acc-2:#fdba74;--acc-soft:#33200f;--acc-ink:#1a0b02;
  --ok:#5dd39a;--ok-soft:#0f2a1d;--ok-line:#1f5139;
  --warn:#f2b84f;--warn-soft:#2b2010;--warn-line:#5e4417;
  --bad:#ff9289;--bad-soft:#33161a;--bad-line:#6a2a29;--bad-solid:#c4372c;
  --info:#93b9ff;--info-soft:#14213a;--info-line:#2b4a7e;
  --test:#f5b544;--test-soft:#2c210c;--test-ink:#fcd58c;
  --inv:#e9edf2;--inv-ink:#0f1520;--inv-ok:#067647;
  --scrim:rgba(0,0,0,.62);--scrim-m:rgba(0,0,0,.66);
  --code-bg:#0d1117;--code-2:#141a23;--code-pane:#10151c;--code-line:#29313d;--code-line-2:#353e4b;
  --shadow:none;
  --shadow-md:0 10px 28px -8px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03);
  --shadow-lg:0 32px 64px -16px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.04);
  --ring:0 0 0 3px color-mix(in srgb,var(--acc) 32%,transparent);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2398a2b3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}
/* repli sans JS (theme-mode.js absent) : mêmes valeurs, à garder identiques au bloc ci-dessus */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  /* élévation : --bg < --side < --card-2 (en retrait) < --card < --pop (menus, fenêtres, tiroirs) */
  --bg:#0b0e13;--bg-2:#1c222b;--side:#10141a;--card:#151a22;--card-2:#11151c;--hover:#1f2630;--nav-on:#262e3a;
  --pop:#1b212b;--pop-2:#171c25;--pop-h:#262d38;
  --ink:#eaedf2;--ink-2:#c4cbd6;--mute:#98a2b3;
  --line:#29313d;--line-2:#4a5466;
  --acc:#fb923c;--acc-h:#fdba74;--acc-2:#fdba74;--acc-soft:#33200f;--acc-ink:#1a0b02;
  --ok:#5dd39a;--ok-soft:#0f2a1d;--ok-line:#1f5139;
  --warn:#f2b84f;--warn-soft:#2b2010;--warn-line:#5e4417;
  --bad:#ff9289;--bad-soft:#33161a;--bad-line:#6a2a29;--bad-solid:#c4372c;
  --info:#93b9ff;--info-soft:#14213a;--info-line:#2b4a7e;
  --test:#f5b544;--test-soft:#2c210c;--test-ink:#fcd58c;
  --inv:#e9edf2;--inv-ink:#0f1520;--inv-ok:#067647;
  --scrim:rgba(0,0,0,.62);--scrim-m:rgba(0,0,0,.66);
  --code-bg:#0d1117;--code-2:#141a23;--code-pane:#10151c;--code-line:#29313d;--code-line-2:#353e4b;
  --shadow:none;
  --shadow-md:0 10px 28px -8px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03);
  --shadow-lg:0 32px 64px -16px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.04);
  --ring:0 0 0 3px color-mix(in srgb,var(--acc) 32%,transparent);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2398a2b3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}}

/* ------------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:var(--fs-md)/1.55 var(--font);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:var(--acc);text-underline-offset:2px}
h1,h2,h3,h4{letter-spacing:-.015em;line-height:1.25;margin:0;font-weight:650}
img,svg{max-width:100%}
hr,.divider{border:0;border-top:1px solid var(--line);margin:var(--s4) 0}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
code,kbd,samp,.mono{font-family:var(--mono);font-size:.9em;font-variant-ligatures:none}
kbd{display:inline-block;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:var(--r-xs);padding:0 .4em;font-size:.82em;background:var(--card)}
/* code en ligne dans un texte courant : .code-i (le <code> nu reste neutre, il sert aussi dans les composants) */
.code-i{font-family:var(--mono);font-size:.88em;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-xs);padding:.05em .35em;overflow-wrap:anywhere}
::selection{background:color-mix(in srgb,var(--acc) 24%,transparent)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hidden,[hidden]{display:none!important}  /* sinon .login/.app (display:grid) l'emportent sur hidden */

/* ------------------------------------------------------------------ boutons */
.btn{--b-bg:var(--acc);--b-ink:var(--acc-ink);--b-line:transparent;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:38px;padding:8px 16px;border:1px solid var(--b-line);border-radius:var(--r);
  background:var(--b-bg);color:var(--b-ink);font-size:var(--fs);font-weight:600;line-height:1.2;
  cursor:pointer;text-decoration:none;white-space:nowrap;user-select:none;-webkit-tap-highlight-color:transparent;
  box-shadow:0 1px 2px rgba(15,21,32,.08);
  transition:background-color var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.btn:hover{--b-bg:var(--acc-h);text-decoration:none}
.btn:active{transform:translateY(.5px)}
.btn svg{width:16px;height:16px;flex:none}
.btn.ghost,.btn.secondary{--b-bg:var(--card);--b-ink:var(--ink);--b-line:var(--line-2);box-shadow:var(--shadow)}
.btn.ghost:hover,.btn.secondary:hover{--b-bg:var(--hover)}
.btn.danger{--b-bg:var(--card);--b-ink:var(--bad);--b-line:var(--line-2);box-shadow:var(--shadow)}
.btn.danger:hover{--b-bg:var(--bad-soft);--b-line:var(--bad-line)}
.btn.danger.solid{--b-bg:var(--bad-solid);--b-ink:#fff;--b-line:transparent}
.btn.danger.solid:hover{--b-bg:color-mix(in srgb,var(--bad-solid) 86%,#000)}
.btn.link{--b-bg:transparent;--b-ink:var(--acc);--b-line:transparent;box-shadow:none;padding-inline:4px;min-height:0}
.btn.link:hover{--b-bg:transparent;text-decoration:underline}
.btn.sm{min-height:32px;padding:5px 11px;font-size:var(--fs-sm);border-radius:var(--r-sm);gap:6px}
.btn.lg{min-height:46px;padding:11px 22px;font-size:var(--fs-md);border-radius:var(--r-md)}
.btn.block,.btn.w-full{display:flex;width:100%}
.btn.icon{padding:0;width:38px}.btn.icon.sm{width:32px}
.btn:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;transform:none}
/* chargement : le texte s'efface, une roue tourne à sa place (EP.busy pose aria-busy) */
.btn[aria-busy=true],.btn.loading{color:transparent!important;pointer-events:none;opacity:1}
.btn[aria-busy=true]::after,.btn.loading::after{content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;border-radius:50%;
  border:2px solid var(--b-ink);border-inline-end-color:transparent;animation:sp-spin .7s linear infinite}
.spinner{display:inline-block;width:18px;height:18px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--acc);animation:sp-spin .7s linear infinite;vertical-align:middle}
@keyframes sp-spin{to{transform:rotate(360deg)}}

.icon-btn{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r);border:1px solid var(--line);
  background:var(--card);color:var(--ink-2);cursor:pointer;flex:none;text-decoration:none;
  transition:background-color var(--t) var(--ease),color var(--t) var(--ease)}
.icon-btn:hover{background:var(--hover);color:var(--ink)}
.icon-btn svg{width:18px;height:18px}
.icon-btn .dot{position:absolute;top:-5px;inset-inline-end:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);
  background:var(--warn);color:var(--card);font-size:11px;font-weight:700;display:grid;place-items:center}
.avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;flex:none;text-decoration:none;
  background:var(--acc-soft);color:var(--acc);font-weight:700;font-size:var(--fs-sm);border:1px solid color-mix(in srgb,var(--acc) 20%,transparent)}
.avatar:hover{text-decoration:none;border-color:var(--acc)}

/* ------------------------------------------------------------------ champs */
.field{display:grid;gap:6px;margin-bottom:var(--s4);min-width:0}
.field>label,.field .label{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.field .hint{font-size:var(--fs-xs);color:var(--mute);line-height:1.45}
.field-err{font-size:var(--fs-xs);color:var(--bad)}
.input,select.input,textarea.input{display:block;width:100%;min-height:38px;padding:8px 12px;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--card);color:var(--ink);font-size:var(--fs);line-height:1.4;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.input::placeholder{color:var(--mute);opacity:.8}
.input:focus,.input:focus-visible{border-color:var(--acc);box-shadow:var(--ring);outline:none}
.input:disabled,.input[readonly]{background:var(--bg-2);color:var(--mute)}
.field.invalid .input,.input[aria-invalid=true]{border-color:var(--bad)}
.field.invalid .input:focus,.input[aria-invalid=true]:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 20%,transparent)}
textarea.input{min-height:84px;resize:vertical;font-family:var(--mono);font-size:var(--fs-sm)}
select.input,.lang-sel{appearance:none;-webkit-appearance:none;cursor:pointer;background-repeat:no-repeat;background-image:var(--chev)}
select.input{padding-inline-end:34px;background-size:14px;background-position:right 11px center}
[dir=rtl] select.input{background-position:left 11px center}
input[type=checkbox],input[type=radio]{accent-color:var(--acc);width:16px;height:16px;margin:0;flex:none;cursor:pointer}
.choice{display:inline-flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:var(--fs);line-height:1.4}
.choice input{margin-top:2px}
.lang-sel{border:1px solid var(--line);background-color:var(--card);color:var(--ink-2);border-radius:var(--r-sm);
  padding-block:5px;padding-inline:10px 26px;font-size:var(--fs-sm);min-height:32px;background-size:12px;background-position:right 8px center}
[dir=rtl] .lang-sel{background-position:left 8px center}
.lang-sel:hover{background-color:var(--hover)}

/* sélecteur de thème (theme-mode.js : TPTheme.picker) : clair / sombre / système ; .labels = libellés visibles */
.theme-sel{display:inline-flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);min-height:32px;flex:none}
.theme-sel button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:28px;height:26px;padding:0 6px;border:0;border-radius:6px;
  background:transparent;color:var(--mute);font-size:var(--fs-sm);font-weight:500;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background-color var(--t) var(--ease),color var(--t) var(--ease)}
.theme-sel button svg{width:16px;height:16px;flex:none}
.theme-sel button:hover{color:var(--ink);background:var(--hover)}
.theme-sel button[aria-pressed=true]{color:var(--ink);background:var(--nav-on);box-shadow:inset 0 0 0 1px var(--line-2)}
.theme-sel button:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.theme-sel.labels{display:flex;width:100%}
.theme-sel.labels button{flex:1 1 0;min-width:0;height:34px;padding:0 8px}
.theme-sel-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* interrupteur (.switch générique ; .mode-switch = interrupteur du mode test, ambré) */
.switch,.mode-switch{position:relative;display:inline-flex;align-items:center;gap:var(--s2);cursor:pointer;font-size:var(--fs-sm);font-weight:600;color:var(--mute);user-select:none}
.switch input,.mode-switch input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.switch .track,.mode-switch .track{flex:none;width:32px;height:18px;border-radius:var(--r-pill);background:var(--line-2);position:relative;transition:background-color var(--t) var(--ease)}
.switch .knob,.mode-switch .knob{position:absolute;top:2px;inset-inline-start:2px;width:14px;height:14px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform var(--t) var(--ease)}
.switch input:checked+.track{background:var(--acc)}
.mode-switch input:checked+.track{background:var(--test)}
.switch input:checked+.track .knob,.mode-switch input:checked+.track .knob{transform:translateX(14px)}
[dir=rtl] .switch input:checked+.track .knob,[dir=rtl] .mode-switch input:checked+.track .knob{transform:translateX(-14px)}
.switch input:focus-visible+.track,.mode-switch input:focus-visible+.track{outline:2px solid var(--acc);outline-offset:2px}
.switch input:checked~.lbl{color:var(--ink)}
.mode-switch input:checked~.lbl{color:var(--test)}
.switch input:disabled+.track{opacity:.5}

/* ------------------------------------------------------------------ mise en page */
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{justify-content:space-between}
.stack{display:grid;gap:var(--s4)}
.stack-s{display:grid;gap:var(--s2)}
.grid2,.grid3{display:grid;gap:var(--s3) var(--s4);grid-template-columns:minmax(0,1fr)}
@media (min-width:720px){.grid2,.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* les enfants de grille ne rétrécissent pas sous leur contenu (tableaux, code) sans ceci */
.stack>*,.grid2>*,.grid3>*,.kpis>*{min-width:0}

/* ------------------------------------------------------------------ badges, pastilles */
.badge{--bd:var(--mute);--bd-bg:var(--bg-2);
  display:inline-flex;align-items:center;gap:6px;padding-block:1px;padding-inline:8px 9px;border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:600;line-height:18px;background:var(--bd-bg);color:var(--bd);white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--bd) 20%,transparent)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.badge.paid,.badge.delivered,.badge.confirmed,.badge.completed,.badge.active,.badge.matched,.badge.on,.badge.ok,.badge.success{--bd:var(--ok);--bd-bg:var(--ok-soft)}
.badge.confirming,.badge.pending,.badge.queued,.badge.sent,.badge.seen,.badge.info,.badge.processing{--bd:var(--info);--bd-bg:var(--info-soft)}
.badge.waiting,.badge.pending_review,.badge.in_review,.badge.review,.badge.unknown,.badge.unmatched,.badge.warn{--bd:var(--warn);--bd-bg:var(--warn-soft)}
.badge.expired,.badge.dropped,.badge.off,.badge.ignored,.badge.new,.badge.plain,.badge.neutral,.badge.inactive{--bd:var(--mute);--bd-bg:var(--bg-2)}
.badge.partially_paid,.badge.failed,.badge.rejected,.badge.suspended,.badge.error,.badge.bad{--bd:var(--bad);--bd-bg:var(--bad-soft)}
.badge.plain::before{display:none}
.badge.confirming::before,.badge.processing::before{animation:sp-pulse 1.6s ease-in-out infinite}
@keyframes sp-pulse{50%{opacity:.3}}
.pill,.tag{display:inline-flex;align-items:center;padding:0 8px;border-radius:var(--r-xs);font-size:11.5px;font-weight:600;line-height:20px;
  background:var(--bg-2);color:var(--ink-2);border:1px solid var(--line);white-space:nowrap}
.pill.live{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line)}
.pill.test{background:var(--test-soft);color:var(--test);border-color:color-mix(in srgb,var(--test) 30%,transparent)}

/* ------------------------------------------------------------------ cartes */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow);min-width:0}
.card.flat{box-shadow:none;background:var(--card-2)}
.card.pad{padding:var(--s5)}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;min-height:52px;padding:11px var(--s5);border-bottom:1px solid var(--line)}
.card-h h3{font-size:var(--fs-md);font-weight:650}
.card-h p{margin:2px 0 0;color:var(--mute);font-size:var(--fs-sm)}
.card-h>a{font-size:var(--fs-sm);font-weight:600;text-decoration:none}
.card-h>a:hover{text-decoration:underline}
.card-b{padding:var(--s5)}
.card-f{display:flex;align-items:center;justify-content:flex-end;gap:var(--s2);flex-wrap:wrap;padding:12px var(--s5);border-top:1px solid var(--line);background:var(--card-2);border-radius:0 0 var(--r-md) var(--r-md)}
@media (max-width:560px){.card-h,.card-b,.card-f{padding-inline:var(--s4)}.card-b{padding-block:var(--s4)}}

/* indicateurs */
.kpis{display:grid;gap:var(--s3);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:980px){.kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}}
@media (min-width:1700px){.kpis{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
.kpi{padding:var(--s4) var(--s5)}
.kpi .l{font-size:var(--fs-sm);color:var(--mute);font-weight:500;line-height:1.35}
.kpi .v{font-size:var(--fs-2xl);font-weight:650;letter-spacing:-.02em;margin-top:6px;line-height:1.15;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.kpi .s{font-size:var(--fs-xs);color:var(--mute);margin-top:4px}
.kpi .s:empty{display:none}
@media (max-width:420px){.kpi{padding:var(--s3) var(--s4)}.kpi .v{font-size:var(--fs-xl)}}

/* ------------------------------------------------------------------ tableaux
   Le défilement horizontal reste DANS le conteneur (.table-wrap) ; jamais la page. */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;max-width:100%}
table{width:100%;border-collapse:collapse;font-size:var(--fs);font-variant-numeric:tabular-nums}
th{font-size:var(--fs-xs);color:var(--mute);font-weight:600;text-align:start;padding:9px var(--s4);border-bottom:1px solid var(--line);white-space:nowrap;background:var(--card-2)}
td{padding:12px var(--s4);border-bottom:1px solid var(--line);vertical-align:middle;text-align:start}
th:first-child,td:first-child{padding-inline-start:var(--s5)}
th:last-child,td:last-child{padding-inline-end:var(--s5)}
tr:last-child td{border-bottom:0}
tbody tr.click{cursor:pointer}
tbody tr.click td{transition:background-color var(--t) var(--ease)}
tbody tr.click:hover td{background:var(--hover)}
tbody tr.click:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
td.num,th.num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
table.compact td{padding-block:8px}
/* tableau sans en-tête posé directement dans une carte : il défile seul au lieu d'élargir la page */
.card>table:not(:has(>thead)),.card-b>table:not(:has(>thead)){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.card>table:not(:has(>thead))>tbody,.card-b>table:not(:has(>thead))>tbody{display:table;width:100%}
.card-b>table td:first-child{padding-inline-start:0}
.card-b>table td:last-child{padding-inline-end:0}
@media (max-width:560px){th:first-child,td:first-child{padding-inline-start:var(--s4)}th:last-child,td:last-child{padding-inline-end:var(--s4)}}
.trunc{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom}

/* ------------------------------------------------------------------ onglets */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:var(--s4);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button,.tabs a{border:0;background:none;padding:10px 12px;margin-bottom:-1px;font-size:var(--fs);font-weight:600;color:var(--mute);
  border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;text-decoration:none;transition:color var(--t) var(--ease),border-color var(--t) var(--ease)}
.tabs button:hover,.tabs a:hover{color:var(--ink)}
.tabs .on,.tabs [aria-selected=true]{color:var(--ink);border-bottom-color:var(--acc)}
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r);background:var(--bg-2);border:1px solid var(--line)}
.seg button{border:0;background:none;padding:5px 12px;border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:600;color:var(--mute);cursor:pointer}
.seg .on,.seg [aria-pressed=true]{background:var(--card);color:var(--ink);box-shadow:var(--shadow-md)}

/* ------------------------------------------------------------------ alertes, bannières */
.note,.alert{--al:var(--warn);--al-bg:var(--warn-soft);--al-line:var(--warn-line);
  margin:0;padding:12px 14px;border-radius:var(--r);font-size:var(--fs);line-height:1.5;background:var(--al-bg);color:var(--ink);border:1px solid var(--al-line)}
.note b,.alert b,.alert .alert-t{color:var(--al)}
.note.info,.alert.info{--al:var(--info);--al-bg:var(--info-soft);--al-line:var(--info-line)}
.note.ok,.alert.ok{--al:var(--ok);--al-bg:var(--ok-soft);--al-line:var(--ok-line)}
.note.bad,.alert.bad{--al:var(--bad);--al-bg:var(--bad-soft);--al-line:var(--bad-line)}
.alert{display:flex;gap:10px;align-items:flex-start}
.alert .alert-t{display:block;font-weight:650;margin-bottom:2px}
.alert>svg{width:18px;height:18px;flex:none;color:var(--al);margin-top:1px}
.banner{border-radius:var(--r);padding:10px 14px;margin-bottom:var(--s4);font-size:var(--fs);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;
  background:var(--info-soft);border:1px solid var(--info-line)}
/* bandeau du mode test : sobre, ambré, fine barre de début */
.testbar{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:var(--s5);
  padding:8px 10px 8px 14px;padding-inline:14px 10px;border-radius:var(--r);background:var(--test-soft);color:var(--test-ink);font-size:var(--fs-sm);font-weight:500;
  border:1px solid color-mix(in srgb,var(--test) 28%,transparent);border-inline-start:3px solid var(--test)}
.testbar button{border:1px solid color-mix(in srgb,var(--test) 40%,transparent);background:transparent;color:inherit;border-radius:var(--r-sm);
  padding:4px 10px;font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:background-color var(--t) var(--ease)}
.testbar button:hover{background:color-mix(in srgb,var(--test) 12%,transparent)}
.sim{display:flex;gap:var(--s2);flex-wrap:wrap;padding:12px 14px;border:1px dashed color-mix(in srgb,var(--test) 55%,transparent);border-radius:var(--r);
  margin-top:var(--s4);align-items:center;background:var(--test-soft)}
.sim b{font-size:var(--fs-sm);color:var(--test);margin-inline-end:4px}

/* ------------------------------------------------------------------ états vides, squelettes */
.empty{padding:40px var(--s4);text-align:center;color:var(--mute);font-size:var(--fs)}
.empty .empty-ic{display:grid;place-items:center;width:40px;height:40px;margin:0 auto var(--s3);border-radius:var(--r);background:var(--bg-2);color:var(--mute);border:1px solid var(--line)}
.empty .empty-ic svg{width:20px;height:20px}
.empty .empty-t{display:block;color:var(--ink);font-weight:600;font-size:var(--fs-md);margin-bottom:4px}
.empty p{max-width:42ch;margin:0 auto var(--s3)}
.skel,.skel-line,.skel-block{display:block;border-radius:var(--r-xs);
  background:linear-gradient(90deg,var(--bg-2) 0%,color-mix(in srgb,var(--bg-2) 50%,var(--card)) 50%,var(--bg-2) 100%);background-size:200% 100%;
  animation:sp-shimmer 1.3s ease-in-out infinite}
.skel-line{height:12px;margin:8px 0}
.skel-line.w40{width:40%}.skel-line.w60{width:60%}.skel-line.w80{width:80%}
.skel-block{height:96px;border-radius:var(--r)}
@keyframes sp-shimmer{from{background-position:100% 0}to{background-position:-100% 0}}

/* ------------------------------------------------------------------ modales, tiroirs, toasts */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:var(--s4);overflow-y:auto;
  background:var(--scrim-m)}
.modal>.card{width:100%;max-width:560px;max-height:calc(100dvh - 32px);overflow:auto;box-shadow:var(--shadow-lg);border-radius:var(--r-lg)}
.modal.wide>.card{max-width:780px}
/* surfaces surélevées : en sombre, fenêtres, tiroirs, menus et panneaux flottants prennent --pop (plus clair que les cartes),
   leurs zones internes suivent ; en clair --pop = --card, rien ne change */
.modal>.card,.pop,.qs-res,.spc,.lp-me-pop,.qr-pop,.help-card{--card:var(--pop);--card-2:var(--pop-2);--hover:var(--pop-h)}
.modal>.card>.card-h{position:sticky;top:0;z-index:1;background:var(--card);flex-wrap:nowrap}
.modal .card-h h3{font-size:var(--fs-lg);min-width:0;overflow-wrap:anywhere}
/* mobile : la fenêtre devient une feuille ancrée en bas */
@media (max-width:560px){
  .modal{place-items:end stretch;padding:24px 0 0}
  .modal>.card{max-height:calc(100dvh - 24px);border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:0}
}
/* tiroir latéral : <div class="modal drawer"><div class="card">… */
.modal.drawer{place-items:stretch end;padding:0}
.modal.drawer>.card{width:min(520px,100%);max-width:none;height:100dvh;max-height:none;border-radius:0;border-block:0;border-inline-end:0}
@media (prefers-reduced-motion:no-preference){
  .modal{animation:sp-fade var(--t-slow) var(--ease)}
  .modal>.card{animation:sp-rise var(--t-slow) var(--ease)}
  .modal.drawer>.card{animation:sp-slide var(--t-slow) var(--ease)}
  [dir=rtl] .modal.drawer>.card{animation-name:sp-slide-rtl}
}
@keyframes sp-fade{from{opacity:0}}
@keyframes sp-rise{from{opacity:0;transform:translateY(8px)}}
@keyframes sp-slide{from{transform:translateX(24px);opacity:0}}
@keyframes sp-slide-rtl{from{transform:translateX(-24px);opacity:0}}
.toasts{position:fixed;bottom:16px;inset-inline:16px;display:grid;gap:8px;justify-items:end;z-index:60;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;max-width:420px;padding:10px 14px;border-radius:var(--r);font-size:var(--fs);font-weight:500;
  background:var(--inv);color:var(--inv-ink);box-shadow:var(--shadow-lg);pointer-events:auto}
.toast::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--inv-ok);flex:none}
.toast.bad{background:var(--bad-solid);color:#fff}
.toast.bad::before{background:#fff}
@media (prefers-reduced-motion:no-preference){.toast{animation:sp-rise var(--t-slow) var(--ease)}}

/* ------------------------------------------------------------------ copie, code */
.secret{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;background:var(--card-2);border:1px solid var(--line);border-radius:var(--r);padding-block:8px;padding-inline:12px 8px}
.secret code{flex:1 1 200px;min-width:0;word-break:break-all;font-size:var(--fs-sm);color:var(--ink)}
[data-copy]{cursor:copy}
pre.code{background:var(--code-bg);color:var(--code-ink);border:1px solid var(--code-line);border-radius:var(--r);padding:14px 16px;overflow:auto;font:12.5px/1.6 var(--mono);margin:0;tab-size:2}
pre.code .c{color:var(--code-c)}pre.code .s{color:var(--code-s)}pre.code .k{color:var(--code-k)}
.kv{display:grid;grid-template-columns:minmax(110px,auto) minmax(0,1fr);gap:10px 20px;font-size:var(--fs);margin:0}
.kv dt{color:var(--mute)}
.kv dd{margin:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
@media (max-width:420px){.kv{grid-template-columns:minmax(0,1fr);gap:2px}.kv dd{margin-bottom:10px}}

/* ------------------------------------------------------------------ divers */
.bars{display:flex;align-items:flex-end;gap:3px;height:140px;padding-top:8px;border-bottom:1px solid var(--line)}
.bars .b{flex:1;background:var(--acc);border-radius:3px 3px 0 0;min-height:2px;opacity:.82;transition:opacity var(--t) var(--ease)}
.bars .b:hover{opacity:1}
.bars .b.zero{background:var(--line-2);opacity:.7}
.bars-x{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--mute);margin-top:6px;font-variant-numeric:tabular-nums}
.meter{height:6px;border-radius:var(--r-pill);background:var(--bg-2);overflow:hidden}
.meter i{display:block;height:100%;background:var(--acc);border-radius:inherit}
.stepper{counter-reset:st;display:grid;gap:var(--s4)}
.stepper>div{counter-increment:st;display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start}
.stepper>div::before{content:counter(st);width:26px;height:26px;border-radius:50%;background:var(--acc-soft);color:var(--acc);font-weight:700;font-size:var(--fs-sm);display:grid;place-items:center}
details.fold>summary{cursor:pointer;list-style:none;font-weight:600;display:flex;justify-content:space-between;gap:10px;align-items:center}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::after{content:"";width:7px;height:7px;border:solid var(--mute);border-width:0 1.6px 1.6px 0;transform:rotate(45deg);transition:transform var(--t) var(--ease);flex:none;margin-top:-4px}
details.fold[open]>summary::after{transform:rotate(-135deg);margin-top:4px}
.keyrow{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:14px var(--s5);border-bottom:1px solid var(--line)}
.lvl-n{width:34px}

/* ------------------------------------------------------------------ coquille d'application (tableau de bord, console)
   Plein écran : barre latérale collée (identité, mode, navigation groupée, compte) + en-tête collé (fil d'Ariane,
   recherche rapide, action principale, compte) + contenu sur toute la largeur restante, gouttières fluides (--gut).
   Sous 900 px, la barre latérale devient un tiroir (body.nav-open). Au-delà, body.side-mini la replie en icônes. */
.app{--gut:clamp(16px,2.6vw,48px);--side-w:256px;min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr);font-size:var(--fs)}
.side{background:var(--side);z-index:40;min-width:0;display:flex;flex-direction:column;
  position:fixed;inset-block:0;inset-inline-start:0;width:min(284px,86vw);height:100vh;height:100dvh;
  border-inline-end:1px solid var(--line);transform:translateX(-100%);visibility:hidden;
  transition:transform var(--t-slow) var(--ease),visibility 0s linear var(--t-slow)}
[dir=rtl] .side{transform:translateX(100%)}
.nav-open .side{transform:none;visibility:visible;box-shadow:var(--shadow-lg);transition:transform var(--t-slow) var(--ease),visibility 0s}
.scrim{position:fixed;inset:0;z-index:35;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity var(--t-slow) var(--ease)}
.nav-open .scrim{opacity:1;pointer-events:auto}
.nav-open{overflow:hidden}
.logo{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:var(--fs-md);color:var(--ink);text-decoration:none;letter-spacing:-.015em;white-space:nowrap}
.logo:hover{text-decoration:none}
.logo .mk{width:24px;height:24px;border-radius:7px;background:var(--acc);display:grid;place-items:center;color:var(--acc-ink);font-size:10.5px;font-weight:800;letter-spacing:0;flex:none}
.logo small{font-weight:500;color:var(--mute);font-size:var(--fs-sm);margin-inline-start:2px}

/* identité de l'entreprise (ou de la console) */
.side-top{display:flex;align-items:center;gap:4px;padding:10px 10px 6px;flex:none}
.org{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:6px;border-radius:var(--r);color:var(--ink);text-decoration:none;
  transition:background-color var(--t) var(--ease)}
.org:hover{background:var(--hover);text-decoration:none}
.org-mk{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--ink);color:var(--card);
  font-size:12px;font-weight:750;letter-spacing:0;line-height:1}
.org-mk-acc{background:var(--acc);color:var(--acc-ink);font-size:11px}
.org-m{display:grid;min-width:0;line-height:1.3}
.org-n{font-weight:650;font-size:var(--fs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.org-st{display:flex;align-items:center;gap:6px;min-width:0;font-size:var(--fs-xs);color:var(--mute);white-space:nowrap;overflow:hidden}
.org-st>span{overflow:hidden;text-overflow:ellipsis}
.st-dot{display:inline-block;width:7px;height:7px;border-radius:50%;flex:none;background:var(--mute)}
.st-dot.ok{background:var(--ok)}.st-dot.info{background:var(--info)}.st-dot.warn{background:var(--warn)}.st-dot.bad{background:var(--bad)}
.side-pin{display:none;border-color:transparent;background:transparent;color:var(--mute)}
.side-pin:hover{border-color:var(--line)}

/* sélecteur de mode Test / Live */
.mode-seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;margin:4px 12px 8px;padding:3px;flex:none;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2)}
.mode-seg button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:0;height:30px;padding:0 8px;border:0;border-radius:7px;
  background:none;color:var(--mute);font-weight:600;font-size:var(--fs-sm);cursor:pointer;transition:background-color var(--t) var(--ease),color var(--t) var(--ease)}
.mode-seg button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mode-seg button:hover{color:var(--ink)}
.mode-seg button[aria-pressed=true]{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(15,21,32,.08),inset 0 0 0 1px var(--line)}
.mode-dot{width:7px;height:7px;border-radius:50%;flex:none;background:currentColor;opacity:.45}
.mode-seg [data-mode=test][aria-pressed=true] .mode-dot{background:var(--test);opacity:1;box-shadow:0 0 0 3px var(--test-soft)}
.mode-seg [data-mode=live][aria-pressed=true] .mode-dot{background:var(--ok);opacity:1;box-shadow:0 0 0 3px var(--ok-soft)}
.mode-seg.locked [data-mode=live]{cursor:not-allowed}
.mode-seg.locked [data-mode=live]::after{content:"";width:11px;height:11px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat}

/* navigation groupée */
.nav{display:flex;flex-direction:column;gap:1px;padding:4px 12px 12px;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.nav a{position:relative;display:flex;align-items:center;gap:10px;min-height:36px;padding:7px 10px;border-radius:var(--r-sm);color:var(--ink-2);
  text-decoration:none;font-weight:500;font-size:var(--fs);white-space:nowrap;transition:background-color var(--t) var(--ease),color var(--t) var(--ease)}
.nav a>span:first-of-type{overflow:hidden;text-overflow:ellipsis}
.nav a:hover{background:var(--hover);color:var(--ink);text-decoration:none}
.nav a svg{width:18px;height:18px;flex:none;color:var(--mute);stroke-width:1.7;transition:color var(--t) var(--ease)}
.nav a:hover svg{color:var(--ink-2)}
.nav a.on,.nav a[aria-current=page]{background:var(--nav-on);color:var(--ink);font-weight:600}
.nav a.on svg,.nav a[aria-current=page] svg{color:var(--acc)}
.nav a.on::before{content:"";position:absolute;inset-block:8px;inset-inline-start:-12px;width:3px;border-start-end-radius:3px;border-end-end-radius:3px;background:var(--acc)}
.nav>*{flex-shrink:0}
.nav-sep{font-size:var(--fs-xs);font-weight:600;color:var(--mute);padding:var(--s4) 10px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav .count{margin-inline-start:auto;flex:none;background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn-line);border-radius:var(--r-pill);font-size:11px;font-weight:600;padding:0 7px;line-height:18px;font-variant-numeric:tabular-nums}
.nav .count.info{background:var(--info-soft);color:var(--info);border-color:var(--info-line)}
.nav .count.bad{background:var(--bad-soft);color:var(--bad);border-color:var(--bad-line)}
.nav a .count[hidden]{display:none}
.tenant-sel{margin:0 0 10px;font-weight:600;flex:none}

/* pied : compte (ouvre le menu du compte) */
.side-foot{flex:none;padding:8px 10px 10px;border-top:1px solid var(--line);font-size:var(--fs-sm)}
.acct{display:flex;align-items:center;gap:10px;width:100%;min-width:0;padding:7px 8px;border:0;border-radius:var(--r);background:none;color:inherit;
  font:inherit;text-align:start;cursor:pointer;transition:background-color var(--t) var(--ease)}
.acct:hover,.acct[aria-expanded=true]{background:var(--hover)}
.acct-m{display:grid;min-width:0;flex:1;line-height:1.3}
.acct-m>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-m b{font-size:var(--fs);font-weight:600;color:var(--ink)}
.acct-m span{font-size:var(--fs-xs);color:var(--mute)}
.acct-ch{width:16px;height:16px;flex:none;color:var(--mute)}
.avatar.sm{width:32px;height:32px;font-size:var(--fs-xs)}

/* en-tête */
.col{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:var(--s3);height:56px;padding:0 var(--gut);
  background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line)}
.crumb{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 auto;font-size:var(--fs)}
.crumb>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crumb b{font-weight:600}
.crumb-t{color:var(--mute);font-weight:500;max-width:40%;text-decoration:none}
a.crumb-t:hover{color:var(--ink);text-decoration:none}
.crumb-sep{color:var(--line-2);flex:none}
.top-r{display:flex;align-items:center;gap:10px;flex:none;margin-inline-start:auto}
.top-av{padding:0;font:inherit;font-weight:700;font-size:var(--fs-sm);cursor:pointer}
.top-av[aria-expanded=true]{border-color:var(--acc)}
.top-new svg,.top-review svg{width:15px;height:15px}
.top-review .tab-n{margin-inline-start:2px}
.top-emergency{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}

/* recherche rapide */
.qs{position:relative;display:flex;align-items:center;gap:6px;flex:0 1 460px;min-width:0}
.qs-box{position:relative;display:flex;align-items:center;flex:1;min-width:0}
.qs-box>svg{position:absolute;inset-inline-start:11px;width:16px;height:16px;color:var(--mute);pointer-events:none}
.qs-in{width:100%;height:36px;padding-inline:34px 36px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);color:var(--ink);
  font-size:var(--fs);outline:none;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.qs-in::placeholder{color:var(--mute)}
.qs-in:hover{border-color:var(--line-2)}
.qs-in:focus{border-color:var(--acc);box-shadow:var(--ring)}
.qs-in::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.qs-k{position:absolute;inset-inline-end:9px;font-size:11px;color:var(--mute);pointer-events:none}
.qs-in:focus~.qs-k{display:none}
.qs-x{display:none;flex:none}
.qs-res{position:absolute;top:calc(100% + 6px);inset-inline:0;z-index:60;margin:0;padding:6px;list-style:none;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--shadow-lg);max-height:min(440px,70vh);overflow-y:auto;min-width:min(380px,calc(100vw - 24px))}
.qs-i{display:flex;align-items:center;gap:10px;min-width:0;padding:8px 10px;border-radius:var(--r-sm);cursor:pointer;font-size:var(--fs)}
.qs-i:hover,.qs-i.on{background:var(--hover)}
.qs-i>svg{width:16px;height:16px;flex:none;color:var(--mute)}
.qs-a{flex:none;min-width:92px;font-weight:650}
.qs-m{display:grid;min-width:0;flex:1;line-height:1.35}
.qs-m>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qs-m b{font-weight:600}
.qs-i .badge{flex:none}
.qs-all{color:var(--acc);font-weight:600;border-top:1px solid var(--line);border-radius:0 0 var(--r-sm) var(--r-sm);margin-top:4px}
.qs-all>svg{color:var(--acc)}
.qs-all:first-child{border-top:0;margin-top:0;border-radius:var(--r-sm)}
.qs-wait,.qs-none{display:flex;justify-content:center;padding:14px;color:var(--mute);font-size:var(--fs-sm)}
.qs-open{display:none}
@media (max-width:719px){
  .qs{display:none}
  .qs-open{display:grid}
  .topbar.searching .qs{display:flex;position:absolute;inset:0;z-index:5;max-width:none;padding:0 var(--s3);background:var(--bg)}
  .topbar.searching .qs-x{display:inline-flex}
  .qs-k{display:none}
  .qs-a{min-width:0}
}

.main{padding:var(--s6) var(--gut) 64px;min-width:0;width:100%}
.main:focus{outline:none}
@media (max-width:560px){.crumb-t,.crumb-sep,#top-mode{display:none}}
@media (max-width:420px){.top-emergency{display:none}.top-review span:not(.tab-n){display:none}}

/* bureau : barre collée, repliable en icônes */
@media (min-width:900px){
  .app{grid-template-columns:var(--side-w) minmax(0,1fr)}
  .side{position:sticky;top:0;width:auto;transform:none;visibility:visible;transition:none;z-index:20}
  [dir=rtl] .side{transform:none}
  .scrim,.burger{display:none}
  .side-pin{display:grid}
  .main{padding-top:var(--s8)}
  .side-mini .app{--side-w:68px}
  .side-mini .side-top{flex-direction:column;padding:10px 0 4px;gap:6px}
  .side-mini .org{flex:none;padding:4px}
  .side-mini .org-m,.side-mini .acct-m,.side-mini .acct-ch{display:none}
  .side-mini .mode-seg{grid-template-columns:minmax(0,1fr);margin:2px 10px 8px;padding:2px}
  .side-mini .mode-seg button{height:24px;padding:0 2px;font-size:11px;gap:0}
  .side-mini .mode-seg .mode-dot{display:none}
  .side-mini .mode-seg.locked [data-mode=live]::after{display:none}
  .side-mini .nav{padding:4px 10px 12px}
  .side-mini .nav a{justify-content:center;padding:9px 0}
  .side-mini .nav a>span:first-of-type{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .side-mini .nav a .count{position:absolute;top:5px;inset-inline-end:8px;width:8px;height:8px;min-width:0;padding:0;font-size:0;line-height:0;border:2px solid var(--side);background:var(--warn)}
  .side-mini .nav a .count.info{background:var(--info)}
  .side-mini .nav a .count.bad{background:var(--bad)}
  .side-mini .nav a.on::before{inset-inline-start:-10px}
  .side-mini .nav-sep{height:1px;padding:0;margin:8px 6px;font-size:0;background:var(--line)}
  .side-mini .side-foot{padding:8px 8px 10px}
  .side-mini .acct{justify-content:center;padding:6px 0}
}
/* info-bulle des liens en mode replié (posée par EP.shell) */
.side-tip{position:fixed;z-index:90;transform:translateY(-50%);padding:5px 9px;border-radius:var(--r-sm);background:var(--ink);color:var(--card);
  font-size:var(--fs-xs);font-weight:600;white-space:nowrap;pointer-events:none;box-shadow:var(--shadow-md)}

/* menu flottant (compte) */
.pop{position:fixed;z-index:80;width:min(296px,calc(100vw - 16px));padding:6px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--shadow-lg);font-size:var(--fs)}
@media (prefers-reduced-motion:no-preference){.pop{animation:sp-rise var(--t) var(--ease)}}
.pop-h{display:flex;align-items:center;gap:10px;padding:8px 8px 10px}
.pop-who{display:grid;min-width:0;line-height:1.35}
.pop-who>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop-who b{font-weight:650}
.pop-who span{font-size:var(--fs-xs)}
.pop-g{display:grid;gap:1px;padding:4px 0;border-top:1px solid var(--line)}
.pop-i{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:7px 10px;border:0;border-radius:var(--r-sm);background:none;
  color:var(--ink-2);text-decoration:none;font:inherit;font-weight:500;cursor:pointer;text-align:start}
.pop-i:hover,.pop-i:focus-visible{background:var(--hover);color:var(--ink);text-decoration:none;outline:none}
.pop-i svg{width:16px;height:16px;flex:none;color:var(--mute)}
.pop-i span{flex:1;min-width:0}
.pop-i svg:last-child:not(:first-child){width:13px;height:13px}
[dir=rtl] .pop-i svg:last-child:not(:first-child){transform:scaleX(-1)}
.pop-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px;padding:4px 10px;color:var(--ink-2)}
.pop-row .lang-sel{max-width:150px;min-height:32px}

.page-h{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s6)}
.page-h>div:first-child{min-width:0}
.page-h h1{font-size:var(--fs-2xl);font-weight:650;letter-spacing:-.02em}
.page-h p{margin:6px 0 0;color:var(--mute);font-size:var(--fs);max-width:75ch}
@media (max-width:560px){.page-h{margin-bottom:var(--s5)}.page-h h1{font-size:var(--fs-xl)}}
.who{display:grid;gap:2px}
.who b{font-size:var(--fs)}


/* ------------------------------------------------------------------ connexion (console, chargement) */
.login{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:var(--s6) var(--s4)}
.login .card{width:100%;max-width:400px}
.login .card-b{padding:var(--s6)}
.login h1{font-size:var(--fs-xl);margin:var(--s5) 0 6px}

/* ------------------------------------------------------------------ utilitaires */
.muted{color:var(--mute)}
.ink{color:var(--ink)}
.small{font-size:var(--fs-sm)}.xs{font-size:var(--fs-xs)}.mono.small{font-size:var(--fs-xs)}
.tnum{font-variant-numeric:tabular-nums}
.strong{font-weight:650}
.neg{color:var(--bad)}.pos{color:var(--ok)}
.nowrap{white-space:nowrap}.break{overflow-wrap:anywhere;word-break:break-word}
.center{text-align:center}.end{text-align:end}.w-full{width:100%}
.mb{margin-bottom:14px}.mb-s{margin-bottom:10px}.my{margin:14px 0}.my-s{margin:6px 0}
.mt{margin-top:12px}.mt0{margin-top:0}.mt-s{margin-top:4px}.gap-s{gap:8px}
h3.sec{font-size:var(--fs);font-weight:650;margin:var(--s5) 0 var(--s2)}
.filters{width:100%}
.filters .input{max-width:220px;flex:1 1 160px}
.filters .btn{min-height:38px}
@media (max-width:560px){.filters .input{max-width:none}}
.pager{justify-content:flex-end;border-top:1px solid var(--line)}
.topline{border-top:1px solid var(--line)}

/* ------------------------------------------------------------------ arabe : lecture de droite à gauche */
[dir=rtl] body{font-family:"Segoe UI",Tahoma,"Noto Naskh Arabic","Noto Sans Arabic",system-ui,sans-serif}
[dir=rtl] .mono,[dir=rtl] code,[dir=rtl] pre{direction:ltr;unicode-bidi:isolate}
[dir=rtl] code{white-space:nowrap}
[dir=rtl] .secret code{white-space:normal}
[dir=rtl] pre.code{text-align:left}

/* ------------------------------------------------------------------ mouvement réduit */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .btn[aria-busy=true]::after,.btn.loading::after,.spinner{animation-duration:1.4s!important;animation-iteration-count:infinite!important}
}

/* ---- dashboard & console ---- */
/* Règles propres au tableau de bord marchand (dashboard.js) et à la console (console.js). */
/* montants : chiffres + devise toujours lus de gauche à droite, même en arabe */
.amt{unicode-bidi:isolate;direction:ltr;white-space:nowrap;font-variant-numeric:tabular-nums}
.mb0{margin-bottom:0}
.narrow{max-width:760px}
.end-row{justify-content:flex-end}
/* colonnes masquées sur téléphone, remplacées par une ligne sous la cellule principale */
.show-s{display:none}
@media (max-width:640px){.hide-s{display:none}.show-s{display:block}}
.cell-t{display:block;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:640px){.cell-t{max-width:130px}}
@media (max-width:380px){.cell-t{max-width:110px}.main td .badge{padding-inline:6px 7px}}
.cell-err{max-width:240px;white-space:normal;overflow-wrap:anywhere}
.act-btns{flex-wrap:nowrap;justify-content:flex-end;gap:6px}
@media (max-width:640px){.act-btns{flex-direction:column;align-items:stretch}}

/* squelettes de page */
.sk-head{width:min(320px,70vw)}
.sk-head .sk-t{height:22px;width:60%;margin:0 0 10px}
.kpi .sk-v{height:22px;width:55%;margin-top:12px}

/* onglets dans une carte + barre d'outils (recherche) */
.card-tabs{margin:0;padding-inline:var(--s3);border-bottom:1px solid var(--line)}
.card-tabs a{padding-block:12px}
.tab-n{display:inline-block;min-width:18px;margin-inline-start:4px;padding:0 6px;border-radius:var(--r-pill);background:var(--bg-2);color:var(--ink-2);font-size:11px;line-height:18px;text-align:center;font-variant-numeric:tabular-nums}
.tabs .on .tab-n{background:var(--acc-soft);color:var(--acc)}
.toolbar{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;padding:10px var(--s5);border-bottom:1px solid var(--line)}
.search{position:relative;flex:1 1 180px;max-width:520px;min-width:0}
.search svg{position:absolute;inset-inline-start:11px;top:50%;width:16px;height:16px;margin-top:-8px;color:var(--mute);pointer-events:none}
.search .input{padding-inline-start:34px;min-height:34px;padding-block:6px}
@media (max-width:560px){.toolbar{padding-inline:var(--s4)}.search{max-width:none}}

/* aperçu : graphique large + soldes */
.dash-grid{display:grid;gap:var(--s4);grid-template-columns:minmax(0,1fr)}
.dash-grid>*{min-width:0}
@media (min-width:1100px){.dash-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}
.kpi .s a{font-weight:600}
.kpi-of{font-size:var(--fs-md);font-weight:500}

/* activité récente */
.act{list-style:none;margin:0;padding:0}
.act li{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:11px var(--s5);border-bottom:1px solid var(--line);cursor:pointer;transition:background-color var(--t) var(--ease)}
.act li:last-child{border-bottom:0}
.act li:hover{background:var(--hover)}
.act li:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.act-m{display:grid;gap:2px;min-width:0}
.act-m>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-t{font-weight:600}
.act-r{display:flex;align-items:center;gap:var(--s3);flex:none}
@media (max-width:560px){.act li{padding-inline:var(--s4)}.act-r{flex-direction:column;align-items:flex-end;gap:4px}}

/* à traiter (console) */
.attn{list-style:none;margin:0;padding:0}
.attn li{border-bottom:1px solid var(--line)}
.attn li:last-child{border-bottom:0}
.attn a{display:flex;align-items:center;gap:var(--s3);padding:12px var(--s5);color:inherit;text-decoration:none;transition:background-color var(--t) var(--ease)}
.attn a:hover{background:var(--hover);text-decoration:none}
.attn a>svg{width:16px;height:16px;color:var(--mute);flex:none}
[dir=rtl] .attn a>svg{transform:scaleX(-1)}
.attn-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r);background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn-line);flex:none}
.attn-ic svg{width:17px;height:17px}
.attn-m{display:grid;gap:2px;flex:1;min-width:0}
@media (max-width:560px){.attn a{padding-inline:var(--s4)}}

/* détail d'un paiement (tiroir) */
.pd-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4)}
.pd-amt{font-size:var(--fs-3xl);font-weight:650;letter-spacing:-.02em;line-height:1.1}
.pd-amt .muted{font-size:var(--fs-lg);font-weight:500}
.modal.drawer h3.sec{color:var(--ink)}
.tl{list-style:none;margin:0;padding:0;display:grid;gap:0}
.tl li{position:relative;display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;padding-block:0 14px;padding-inline-start:22px;font-size:var(--fs)}
.tl li::before{content:"";position:absolute;inset-inline-start:0;top:5px;width:10px;height:10px;border-radius:50%;background:var(--card);border:2px solid var(--line-2);box-sizing:border-box}
.tl li::after{content:"";position:absolute;inset-inline-start:4px;top:17px;bottom:2px;width:2px;background:var(--line)}
.tl li:last-child{padding-bottom:0}
.tl li:last-child::after{display:none}
.tl li.done::before{background:var(--acc);border-color:var(--acc)}
.tl li.ok::before{background:var(--ok);border-color:var(--ok)}
.tl li.bad::before{background:var(--bad);border-color:var(--bad)}
.tl li.off::before{background:var(--mute);border-color:var(--mute)}
.tl li.now::before{border-color:var(--info);background:var(--info-soft)}
.tl li.next{color:var(--mute)}
.tl-d{font-size:var(--fs-sm);font-variant-numeric:tabular-nums}

/* nouveau paiement : formulaire + aide */
.np-grid{display:grid;gap:var(--s4);grid-template-columns:minmax(0,1fr);align-items:start}
.np-grid>*{min-width:0}
@media (min-width:1000px){.np-grid{grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr)}}
@media (min-width:1600px){.np-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1.3fr)}.np-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
.amt-in{display:flex;gap:var(--s2)}
.amt-in .input:first-child{flex:1;min-width:0}
.amt-in select.input{flex:0 0 auto;width:auto;min-width:104px}
.amt-in .btn{flex:none}
.stepper.small>div::before{width:22px;height:22px;font-size:var(--fs-xs)}
.stepper.small>div{grid-template-columns:24px minmax(0,1fr);gap:10px;font-size:var(--fs)}
.stepper p{margin-bottom:0}

/* clés API : lignes empilées (pas de tableau, donc rien ne déborde à 360 px) */
.keys{list-style:none;margin:0;padding:0}
.keys .keyrow:last-child{border-bottom:0}
.key-m{display:grid;gap:2px;min-width:0}
.key-m>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.key-s{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
@media (max-width:560px){.keyrow{padding-inline:var(--s4)}.key-s{width:100%}.key-s .btn{margin-inline-start:auto}}
.secret.key-once{border-color:var(--acc);background:var(--acc-soft);padding-block:12px}
.secret.key-once code{font-size:var(--fs);font-weight:600}

/* console : champs avec unité, sélecteurs de routage, choix exclusifs */
.unit-in{position:relative}
.unit-in .input{padding-inline-end:52px}
.unit{position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%);font-size:var(--fs-sm);color:var(--mute);pointer-events:none}
table.compact select.input{min-height:34px;padding-block:5px;min-width:130px}
.fee-in{max-width:120px;min-height:34px;padding-block:5px}
textarea.plain-ta{font-family:var(--font);font-size:var(--fs);min-height:72px}
.choices{border:0;margin:0;padding:0;display:grid;gap:var(--s2)}
.choices legend{margin-bottom:var(--s2);padding:0}
.opt{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r);cursor:pointer;transition:border-color var(--t) var(--ease),background-color var(--t) var(--ease)}
.opt>span{display:grid;gap:2px}
.opt input{margin-top:3px}
.opt:hover{background:var(--hover)}
.opt:has(input:checked){border-color:var(--acc);background:var(--acc-soft)}
.nav a .count[hidden]{display:none}
/* mode test : liseré ambré discret en haut du contenu */
.is-test .topbar{box-shadow:inset 0 2px 0 var(--test)}
@media (max-width:420px){.top-new{padding-inline:10px}}
.main .field,.modal .field{align-content:start}
@media (max-width:640px){.main td,.main th{padding-inline:10px}.main td:first-child,.main th:first-child{padding-inline-start:var(--s4)}.main td:last-child,.main th:last-child{padding-inline-end:var(--s4)}}
@media (max-width:560px){.ph-new{display:none}}
/* routage (console) : une carte par paire actif · réseau sur téléphone */
@media (max-width:640px){
  table.routing thead{display:none}
  table.routing tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px;padding:12px var(--s4);border-bottom:1px solid var(--line)}
  table.routing tr:last-child{border-bottom:0}
  table.routing td{display:grid;gap:4px;padding:0!important;border:0;min-width:0}
  table.routing td:first-child{grid-column:1/-1}
  table.routing td[data-l]::before{content:attr(data-l);font-size:var(--fs-xs);color:var(--mute);font-weight:600}
  table.routing select.input,table.routing .fee-in{min-width:0;max-width:none;width:100%}
}

/* ---- console (administration : connexion, permissions, dossiers, moyens, frais, blocages, apparence, accès, journal) ---- */
/* connexion */
.login-top{flex-wrap:wrap;row-gap:12px;column-gap:12px}  /* logotype large : les réglages passent dessous si la place manque */
.login-tools{gap:6px;flex-wrap:nowrap}
.login-tools .lang-sel{max-width:118px}
.login .g-err{margin-bottom:var(--s4)}
.login-alt{display:grid;justify-items:start;gap:2px;margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line)}
.login-alt .btn.link{font-weight:500;color:var(--ink-2);text-align:start;white-space:normal}
.login-alt .btn.link:hover{color:var(--acc)}
[dir=rtl] .ic-back{transform:scaleX(-1)}
@media (max-width:420px){.login .card-b{padding:var(--s5) var(--s4)}.login-top .logo small{display:none}}
/* pied de la barre latérale : compte + déconnexion, puis langue + thème */
.foot-who{display:flex;align-items:center;gap:var(--s2);min-width:0}
.who-link{flex:1;min-width:0;padding:6px;margin:-6px 0;border-radius:var(--r-sm);color:inherit;text-decoration:none;transition:background-color var(--t) var(--ease)}
.who-link:hover{background:var(--hover);text-decoration:none}
.foot-out{width:34px;height:34px;flex:none}
.foot-tools{flex-wrap:wrap;justify-content:space-between;row-gap:6px}
.foot-tools .lang-sel{max-width:112px}
.top-emergency{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
@media (max-width:420px){.top-emergency{display:none}}
.icon-btn.sm{width:32px;height:32px;border-radius:var(--r-sm)}
.icon-btn.sm svg{width:16px;height:16px}
.icon-btn:disabled{opacity:.4;cursor:not-allowed}
/* accès refusé, bandeau d'état */
.deny .empty b{color:var(--ink)}
.plat-list{margin:4px 0;padding-inline-start:18px}
.plat-banner a{display:inline-block;margin-top:4px}
/* tiroir marchand */
.md-sec{border-top:1px solid var(--line);padding-top:var(--s2)}
.md-sec h3.sec{margin-top:var(--s2)}
/* cases à cocher en pastilles (devises, actifs) */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{position:relative;display:inline-flex;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-block;padding:4px 10px;border:1px solid var(--line-2);border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:600;color:var(--ink-2);background:var(--card);font-family:var(--mono);transition:background-color var(--t) var(--ease),border-color var(--t) var(--ease)}
.chip input:checked+span{background:var(--acc-soft);border-color:var(--acc);color:var(--acc)}
.chip input:focus-visible+span{outline:2px solid var(--acc);outline-offset:2px}
.chip input:disabled+span{opacity:.6;cursor:not-allowed}
/* dossiers d'inscription (KYB) */
.kyb-grid{display:grid;gap:var(--s4);grid-template-columns:minmax(0,1fr);align-items:start}
.kyb-grid>*{min-width:0}
@media (min-width:1100px){.kyb-grid{grid-template-columns:minmax(0,1fr) 340px}.kyb-side{position:sticky;top:76px}}
.kyb-list{list-style:none;margin:0;padding:0}
.kyb-f,.kyb-doc{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr) auto;gap:4px var(--s4);align-items:start;padding:12px var(--s5);border-bottom:1px solid var(--line)}
.kyb-doc{grid-template-columns:minmax(0,1fr) auto}
.kyb-f:last-child,.kyb-doc:last-child{border-bottom:0}
.kyb-f.miss,.kyb-doc.miss{background:color-mix(in srgb,var(--warn-soft) 55%,transparent)}
.kyb-f.cmt-on,.kyb-doc.cmt-on{background:var(--acc-soft)}
.kyb-f-l{font-size:var(--fs-sm);color:var(--mute);padding-top:1px}
.kyb-f-v{min-width:0;overflow-wrap:anywhere}
.kyb-doc-h{min-width:0}
.kyb-doc>.stack-s,.kyb-doc>p,.kyb-doc>.kyb-prev-c{grid-column:1/-1}
.kyb-c{grid-column:1/-1}
.kyb-c textarea{min-height:60px}
.kyb-c-btn{justify-self:end;white-space:nowrap}
.kyb-c-btn svg{width:15px;height:15px}
.kyb-pre{white-space:pre-wrap;display:block}
.kyb-prev-c{margin:6px 0 0;padding:6px 10px;border-radius:var(--r-sm);background:var(--info-soft);border:1px solid var(--info-line);font-size:var(--fs-sm)}
.kyb-prev-c b{color:var(--info)}
.kyb-file{display:flex;align-items:center;gap:var(--s3);padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--card-2);min-width:0}
.kyb-file-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-sm);background:var(--bg-2);color:var(--mute);flex:none}
.kyb-file-ic svg{width:18px;height:18px}
.kyb-file-m{display:grid;gap:1px;flex:1;min-width:0}
.kyb-file-a{flex:none;gap:6px;flex-wrap:nowrap}
.kyb-prev{display:grid;place-items:center;min-height:160px}
.kyb-prev img{max-width:100%;max-height:72vh;border-radius:var(--r);border:1px solid var(--line);background:var(--bg-2)}
.kyb-acts{display:flex;flex-wrap:wrap;gap:var(--s2)}
.kyb-acts .btn{flex:1 1 auto}
.kyb-users{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.kyb-users li{display:grid;gap:1px;min-width:0}
.kyb-who{display:block;font-family:var(--mono);overflow-wrap:anywhere}
.tl li>span:first-child{display:grid;gap:2px;min-width:0;flex:1}
.kyb-sum{margin:0;padding-inline-start:18px;display:grid;gap:4px;font-size:var(--fs-sm)}
@media (max-width:640px){
  .kyb-f{grid-template-columns:minmax(0,1fr) auto;padding-inline:var(--s4)}
  .kyb-f-v{grid-column:1/-1;grid-row:2}
  .kyb-doc{padding-inline:var(--s4)}
  .kyb-file{flex-wrap:wrap}
  .kyb-file-a{width:100%;justify-content:flex-end}
}
/* exigences du dossier (éditeur) */
.rq-list{list-style:none;margin:0;padding:0;counter-reset:rq}
.rq-row{padding:14px var(--s5);border-bottom:1px solid var(--line);counter-increment:rq}
.rq-row:last-child{border-bottom:0}
.rq-grid{display:grid;gap:var(--s3);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1000px){.rq-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.9fr)}.rq-grid-d{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}
.rq-help{grid-column:1/-1}
.rq-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:var(--s3)}
.rq-tools{display:flex;gap:6px}
.rq-del:hover{color:var(--bad);border-color:var(--bad-line)}
.rq-save{position:sticky;bottom:0;padding:var(--s3) 0;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(6px)}
@media (max-width:560px){.rq-row{padding-inline:var(--s4)}.rq-grid{grid-template-columns:minmax(0,1fr)}}
/* moyens de paiement */
.mlist{list-style:none;margin:0;padding:0}
.mrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px var(--s4);align-items:center;padding:14px var(--s5);border-bottom:1px solid var(--line)}
.mrow:last-child{border-bottom:0}
.mrow-m{display:grid;gap:3px;min-width:0}
.mrow-m .small{overflow-wrap:anywhere}
.mrow-a{grid-column:1/-1;justify-content:flex-end;gap:var(--s2)}
@media (min-width:900px){.mrow{grid-template-columns:minmax(0,1fr) auto auto}.mrow-a{grid-column:auto}}
@media (max-width:560px){.mrow{padding-inline:var(--s4)}.mrow-a{justify-content:flex-start}}
.mf-en{align-self:end;padding-bottom:8px}
.jp-help>summary{font-size:var(--fs-sm)}
.jp-cc{max-width:90px}
.jp-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.jp-list li{display:flex;gap:var(--s3);align-items:center;justify-content:space-between;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--card-2)}
.jp-m{display:grid;gap:2px;min-width:0;flex:1 1 220px}
.jp-a{gap:6px}
.modal pre.code{max-height:260px}
/* frais */
.fee-prio{margin:0 0 var(--s3);padding:0;list-style:none;counter-reset:fp;display:grid;gap:var(--s2)}
.fee-prio li{counter-increment:fp;display:grid;grid-template-columns:26px minmax(0,1fr);gap:0 10px}
.fee-prio li::before{content:counter(fp);grid-row:span 2;width:24px;height:24px;border-radius:50%;background:var(--acc-soft);color:var(--acc);font-weight:700;font-size:var(--fs-sm);display:grid;place-items:center}
.fee-sim{margin-top:var(--s4);padding:var(--s4);border:1px solid var(--line);border-radius:var(--r);background:var(--card-2)}
.fee-out{margin:var(--s3) 0 0;font-size:var(--fs-md)}
.fee-src{display:block;margin-top:2px}
.fee-u{max-width:160px}
.fee-u .fee-in{max-width:none}
table.fee-t .fee-u{min-width:100px}
table.fee-t td:first-child{min-width:140px}
table.fee-t td:first-child .mono{display:block}
.po-k{min-width:150px;max-width:220px;min-height:34px;padding-block:5px}
.fo-add{justify-content:flex-start}
.fo-add .input{flex:1 1 200px;max-width:360px;min-height:34px;padding-block:5px}
@media (max-width:640px){
  table.fee-t thead{display:none}
  table.fee-t tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px;padding:12px var(--s4);border-bottom:1px solid var(--line)}
  table.fee-t tr:last-child{border-bottom:0}
  table.fee-t td{display:grid;gap:4px;padding:0!important;border:0;min-width:0}
  table.fee-t td:first-child{grid-column:1/-1;min-width:0}
  table.fee-t td.end{grid-column:1/-1;justify-items:end}
  table.fee-t td[data-l]::before{content:attr(data-l);font-size:var(--fs-xs);color:var(--mute);font-weight:600}
  table.fee-t .fee-in,table.fee-t .fee-u,.po-k{max-width:none;min-width:0;width:100%}
  table.po-t tr{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:center}
  table.po-t td:first-child,table.po-t td.end{grid-column:auto}
}
/* contrôle de la plateforme */
.ctl-list{list-style:none;margin:0;padding:0}
.ctl-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:14px var(--s5);border-bottom:1px solid var(--line)}
.ctl-row:last-child{border-bottom:0}
.ctl-m{display:grid;gap:2px;min-width:0;flex:1}
.ctl-m .small{overflow-wrap:anywhere}
.ctl-s{display:flex;align-items:center;gap:var(--s3);flex:none}
.ctl-msg{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;justify-content:stretch;gap:var(--s3)}
@media (max-width:560px){.ctl-row{padding-inline:var(--s4);flex-wrap:wrap}.ctl-s{width:100%;justify-content:space-between}.ctl-msg{grid-template-columns:minmax(0,1fr)}}
/* apparence : réglages + aperçu clair et sombre */
.ap-grid{display:grid;gap:var(--s4);grid-template-columns:minmax(0,1fr);align-items:start}
.ap-grid>*{min-width:0}
@media (min-width:1000px){.ap-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}}
.color-in{display:flex;gap:var(--s2);align-items:center}
.color-in input[type=color]{flex:none;width:44px;height:38px;padding:3px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--card);cursor:pointer}
.color-in .input{flex:1;min-width:0;max-width:160px}
.ap-contrast{display:grid;gap:6px;margin-top:var(--s2)}
.ap-ratio{display:flex;align-items:center;gap:var(--s3);font-size:var(--fs-sm)}
.ap-ratio>span:first-child{flex:1;color:var(--ink-2)}
.ap-prev{display:grid;gap:var(--s3);grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.ap-prev{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* les deux aperçus fixent leurs propres neutres ; l'accent vient de /admin/platform/theme/check */
.pv{border-radius:var(--r-md);border:1px solid var(--line);background:var(--bg);color:var(--ink);overflow:hidden;min-width:0}
.pv-light{color-scheme:light;--bg:#f6f7f9;--bg-2:#eff1f4;--card:#ffffff;--card-2:#fafbfc;--hover:#f1f3f6;--nav-on:#eceef3;--ink:#0f1520;--ink-2:#353d4b;--mute:#5f6878;--line:#e4e7ec;--line-2:#d3d8e0;--shadow:0 1px 2px rgba(15,21,32,.04)}
.pv-dark{color-scheme:dark;--bg:#0b0e13;--bg-2:#1c222b;--card:#151a22;--card-2:#11151c;--hover:#1f2630;--nav-on:#262e3a;--ink:#eaedf2;--ink-2:#c4cbd6;--mute:#98a2b3;--line:#29313d;--line-2:#4a5466;--shadow:none}
.pv-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:10px 12px;border-bottom:1px solid var(--line);background:var(--card)}
.pv-top .logo{font-size:var(--fs);min-width:0}
.pv-name{overflow:hidden;text-overflow:ellipsis}
.pv-b{display:grid;gap:10px;padding:12px}
.pv-b .row{gap:6px}
.pv .btn{pointer-events:none}
.pv .btn.pv-hover{--b-bg:var(--acc-h)}
.pv-link{color:var(--acc);text-decoration:underline;text-underline-offset:2px}
.pv-chip{display:inline-flex;align-items:center;padding:1px 9px;border-radius:var(--r-pill);background:var(--acc-soft);color:var(--acc);font-size:var(--fs-xs);font-weight:600;line-height:18px}
.pv-tab{font-size:var(--fs-sm);font-weight:600;padding:2px 2px 4px;border-bottom:2px solid var(--acc)}
.pv-card{display:grid;gap:10px;padding:10px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.pv-nav{position:relative;display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:var(--r-sm);background:var(--nav-on);font-size:var(--fs-sm);font-weight:600}
.pv-nav::before{content:"";position:absolute;inset-block:6px;inset-inline-start:0;width:3px;border-radius:3px;background:var(--acc)}
.pv-nav svg{width:16px;height:16px;color:var(--acc)}
.pv-meter{width:62%}
/* administrateurs, rôles, permissions */
.perm-g{display:grid;gap:6px;margin-bottom:var(--s3)}
.perm-g:last-child{margin-bottom:0}
.perm-tags{display:flex;flex-wrap:wrap;gap:6px}
.perm-tags .tag{white-space:normal;line-height:1.35;padding-block:2px}
.perm-grid{display:grid;gap:var(--s4);grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.perm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.perm-col{display:grid;gap:8px;align-content:start}
.perm-col .choice{font-size:var(--fs-sm)}
.perm-ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.perm-ul li{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-sm)}
.perm-ul svg{width:15px;height:15px;color:var(--ok);flex:none;margin-top:2px}
.acct{align-items:start}
/* journal d'audit */
.au-filters{align-items:flex-end;padding-block:12px}
.au-filters .field{flex:1 1 150px;min-width:0}
.au-filters .field label{font-size:var(--fs-xs)}
.au-filters .input{min-height:34px;padding-block:5px}
.au-btns{flex:none;gap:6px}
.au-hint{margin:0;padding:6px var(--s5) 10px;border-bottom:1px solid var(--line)}
.au-list{list-style:none;margin:0;padding:0}
.au-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px var(--s3);padding:12px var(--s5);border-bottom:1px solid var(--line)}
.au-row:last-child{border-bottom:0}
.au-m{display:grid;gap:2px;min-width:0}
.au-m .small{overflow-wrap:anywhere}
.au-data,.au-code{grid-column:1/-1}
.au-data pre{margin-top:6px;max-height:280px}
@media (max-width:560px){.au-row,.au-hint{padding-inline:var(--s4)}.au-filters .field{flex-basis:calc(50% - 8px)}.au-btns{width:100%}}

/* console : adresses de dépôt (console-addresses.js), 03/10/2026 */
@media (max-width:640px){table.ad-pairs td.ad-mode{grid-column:1/-1}table.ad-pairs td.num{text-align:start;white-space:normal}}
@media (min-width:641px){table.ad-pairs select.input{min-width:13em}table.ad-pairs td:nth-child(2){max-width:12em;white-space:normal}table.ad-pairs th{white-space:normal}}

/* ------------------------------------------------------------------ fenêtre de détail commune (EP.detail), 03/10/2026
   .modal.dt > .card.dt-card : en-tête collant .dt-bar (icône, nature + identifiant copiable, titre, fermer), zone qui défile
   .dt-main (bloc principal .dt-h : montant, état, sous-titre, actions ; corps .dt-b en grille : .dt-cols > .dt-ca + .dt-cb
   pour la chronologie, ou .dt-flow sur deux colonnes), « Détails techniques » repliés (details.dt-fold), pied collant .dt-f.
   Centrée sur bureau (640 px, 800 px en grille), feuille plein écran sous 600 px. */
.modal.dt{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);padding:var(--s6)}
.modal.dt>.card.dt-card{--dt-w:640px;width:min(var(--dt-w),92vw);max-width:none;max-height:min(88vh,1000px);max-height:min(88dvh,1000px);
  display:flex;flex-direction:column;overflow:hidden;padding:0;position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px}
.modal.dt>.card.dt-card.dt-wide{--dt-w:800px}
.modal.dt>.card.dt-card:has(.dt-body>.dt-sec~.dt-sec~.dt-sec){--dt-w:800px}
/* en-tête collant */
.dt-bar{display:flex;align-items:center;gap:var(--s3);flex:none;padding:14px var(--s3) 14px var(--s5);border-bottom:1px solid var(--line);background:var(--card)}
[dir=rtl] .dt-bar{padding:14px var(--s5) 14px var(--s3)}
.dt-ic{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:12px;background:var(--acc-soft);color:var(--acc)}
.dt-ic svg{width:20px;height:20px}
.dt-bar-m{flex:1;min-width:0;display:grid;gap:1px}
.dt-meta{display:flex;align-items:center;gap:8px;min-width:0;font-size:var(--fs-sm);color:var(--mute)}
.dt-kind{font-weight:600;color:var(--mute);flex:none;white-space:nowrap}
.dt-t{margin:0;font-size:var(--fs-lg);font-weight:650;line-height:1.3;letter-spacing:-.01em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dt-id{display:inline-flex;align-items:center;min-width:0;max-width:100%;padding-inline-start:8px;border-radius:var(--r-pill);background:var(--bg-2);font-size:var(--fs-xs);line-height:1}
.dt-id bdi{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.dt-id .dt-cp{width:24px;height:24px}
.dt-id .dt-cp svg{width:13px;height:13px}
.dt-bar-r{display:flex;align-items:center;gap:6px;flex:none;align-self:flex-start}
.dt-x{width:36px;height:36px;border-radius:50%;border-color:transparent;background:transparent;color:var(--ink-2)}
.dt-x:hover{background:var(--hover)}
/* zone qui défile */
.dt-main{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;background:var(--card-2)}
.dt-h{display:grid;gap:10px;padding:var(--s5) var(--s5) var(--s4);background:var(--card);border-bottom:1px solid var(--line)}
.dt-h>*{min-width:0}
.dt-hero{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;min-width:0}
.dt-hero:not(:has(.dt-amt)){justify-content:flex-start}
.dt-hero:not(:has(.dt-amt)):has(.dt-st:empty){display:none}
.dt-amt{font-size:var(--fs-3xl);font-weight:680;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;min-width:0}
.dt-amt .muted{font-size:var(--fs-lg);font-weight:500}
.dt-st{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.dt-st:empty{display:none}
.dt-sub{margin:0;color:var(--mute);font-size:var(--fs);overflow-wrap:anywhere}
.dt-acts{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.dt-acts>*{min-width:0;max-width:100%}
.dt-link{flex:1 1 100%;display:flex;align-items:center;gap:6px;min-width:0;padding:4px 4px 4px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card-2)}
[dir=rtl] .dt-link{padding:4px 12px 4px 4px}
.dt-link code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-sm);color:var(--ink-2)}
/* corps : sections en panneaux */
.dt-b{display:grid;gap:var(--s3);padding:var(--s4) var(--s5) var(--s5);align-content:start}
.dt-b>*{min-width:0}
.dt-cols{display:grid;gap:var(--s3);align-items:start}
.dt-ca,.dt-cb{display:grid;gap:var(--s3);min-width:0;align-content:start}
.dt-sec{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;min-width:0}
.dt-body{display:grid;gap:var(--s3);min-width:0}
.dt-sec-t{margin:0 0 var(--s2);font-size:var(--fs);font-weight:650;color:var(--ink)}
.dt-sec>.dt-sec-b>*:first-child{margin-top:0}
.dt-sec>.dt-sec-b>*:last-child{margin-bottom:0}
details.dt-fold{padding:0}
details.dt-fold>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);cursor:pointer;list-style:none;padding:12px 16px;
  font-size:var(--fs);font-weight:650;color:var(--ink);border-radius:14px}
details.dt-fold>summary:hover{background:var(--hover)}
details.dt-fold>summary::-webkit-details-marker{display:none}
details.dt-fold>summary:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
details.dt-fold>.dt-sec-b{padding:0 16px 14px}
.dt-chev{width:16px;height:16px;flex:none;color:var(--mute);transform:rotate(90deg);transition:transform var(--t) var(--ease)}
details.dt-fold[open]>summary .dt-chev{transform:rotate(-90deg)}
details.dt-fold[open]>summary{border-end-start-radius:0;border-end-end-radius:0}
.dt-kv{grid-template-columns:minmax(96px,34%) minmax(0,1fr);gap:0 var(--s4);align-items:baseline;font-size:var(--fs)}
.dt-kv dt{color:var(--mute);padding-block:6px}
.dt-kv dd{display:flex;align-items:center;gap:2px;min-width:0;min-height:32px;margin:0;color:var(--ink)}
.dt-kv dd>.dt-v{min-width:0;overflow-wrap:anywhere}
.dt-kv>dt:not(:first-of-type),.dt-kv>dt:not(:first-of-type)+dd{border-top:1px solid var(--line)}
.dt-cp{flex:none;width:28px;height:28px;border-color:transparent;background:transparent;color:var(--mute);border-radius:var(--r-sm)}
.dt-cp:hover{color:var(--ink);background:var(--hover)}
.dt-cp svg{width:15px;height:15px}
.dt-cp svg.ok{display:none;color:var(--ok)}
.dt-cp.is-copied svg.cp{display:none}
.dt-cp.is-copied svg.ok{display:block}
.dt .tl li{padding-block-end:16px}
.dt .tl li:last-child{padding-block-end:0}
.dt .sim{margin:0}
.dt .note,.dt .alert{margin-block:0 var(--s3)}
.dt .dt-h .note,.dt .dt-h .alert{margin:0}
/* pied collant : note, actions secondaires et dangereuses au début, action principale à la fin */
.dt-f{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px var(--s5);border-top:1px solid var(--line);background:var(--card)}
.dt-f::before{content:"";order:1;flex:1 1 0}
.dt-f>.btn:not(.ghost):not(.secondary):not(.danger):not(.link){order:2}
.dt-f>.muted{flex:1 1 220px}
.dt-f svg{width:16px;height:16px;flex:none;vertical-align:-3px}
.modal.dt>.card.dt-card{min-width:0}
@media (min-width:721px){
  .dt-cols{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
  .dt-flow,.dt-body:has(>.dt-sec~.dt-sec~.dt-sec){display:block;columns:2;column-gap:var(--s3)}
  :is(.dt-flow,.dt-body)>*{break-inside:avoid;margin-bottom:var(--s3)}
  :is(.dt-flow,.dt-body)>.dt-fold{column-span:all}
  :is(.dt-flow,.dt-body)>:last-child{margin-bottom:0}
}
@media (prefers-reduced-motion:no-preference){.modal.dt>.card.dt-card{animation:sp-pop var(--t-slow) var(--ease)}}
@keyframes sp-pop{from{opacity:0;transform:translateY(10px) scale(.985)}}
@keyframes sp-sheet{from{transform:translateY(32px);opacity:.4}}
/* téléphone : feuille plein écran qui monte du bas */
@media (max-width:600px){
  .modal.dt{padding:8px 0 0;place-items:end stretch}
  .modal.dt>.card.dt-card{width:100%;height:calc(100dvh - 8px);max-height:none;border-radius:18px 18px 0 0;border-bottom:0}
  .dt-bar{padding:10px 8px 10px var(--s4)}
  [dir=rtl] .dt-bar{padding:10px var(--s4) 10px 8px}
  .dt-ic{width:34px;height:34px;border-radius:10px}
  .dt-ic svg{width:18px;height:18px}
  .dt-h{padding:var(--s4)}
  .dt-b{padding:var(--s3) var(--s3) var(--s5)}
  .dt-sec{padding:12px 14px}
  .dt-f{padding:10px var(--s4) calc(10px + env(safe-area-inset-bottom))}
  .dt-amt{font-size:var(--fs-2xl)}
  .dt-f>.muted{flex-basis:100%}
}
@media (max-width:600px) and (prefers-reduced-motion:no-preference){.modal.dt>.card.dt-card{animation:sp-sheet var(--t-slow) var(--ease)}}
@media (max-width:420px){.dt-kv{grid-template-columns:minmax(0,1fr)}.dt-kv dt{padding-bottom:0}.dt-kv>dt:not(:first-of-type)+dd{border-top:0}}

/* ------------------------------------------------------------------ barre latérale redimensionnable (EP.shell), 03/10/2026
   poignée .side-grip sur le bord de fin ; largeur --side-x posée sur .app (body.side-sized), bureau seulement */
.side-grip{display:none}
@media (min-width:900px){
  body.side-sized:not(.side-mini) .app{--side-w:var(--side-x)}
  .side-grip{display:block;position:absolute;inset-block:12px;inset-inline-end:-6px;width:12px;z-index:2;cursor:col-resize;touch-action:none;border-radius:6px}
  .side-grip::after{content:"";position:absolute;inset-block:0;inset-inline-start:5px;width:2px;border-radius:2px;background:transparent;transition:background-color var(--t) var(--ease)}
  .side-grip:hover::after,.side-grip:focus-visible::after,.side-resizing .side-grip::after{background:var(--acc)}
  .side-grip:focus-visible{outline:none}
  .side-mini .side-grip{display:none}
  .side-resizing,.side-resizing *{cursor:col-resize!important;user-select:none!important}
  .side-resizing .side,.side-resizing .app{transition:none!important}
}

/* ---------------------------------------------------------------- logo de marque (static/brand, DESIGN-SYSTEM.md)
   Icône et logotype tracés sur le logo officiel ; rendus en masque CSS sur --brand-logo : couleur propre du logo
   (#013C64) en clair, variante claire en sombre. La couleur d'accent réglable par l'admin n'y touche pas.
   .brand-lockup : icône + « SoncoPay » (ratio 721,14 / 144,31) ; .brand-ic : icône seule (62,17 / 100). */
:root{--brand-logo:#013C64}
:root[data-theme="dark"]{--brand-logo:#ffffff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--brand-logo:#ffffff}}
.pv-light{--brand-logo:#013C64}.pv-dark{--brand-logo:#ffffff}
.brand-lockup,.brand-ic{display:inline-block;flex:none;vertical-align:middle;background:var(--brand-logo);
  -webkit-mask:var(--brand-m) center/contain no-repeat;mask:var(--brand-m) center/contain no-repeat}
.brand-lockup{--brand-m:url("/assets/brand/soncopay-logo-horizontal-mono.svg?v=1");height:26px;aspect-ratio:721.14/144.31}
.brand-ic{--brand-m:url("/assets/brand/soncopay-icon-mono.svg?v=1");height:24px;aspect-ratio:62.17/100}
.brand-lockup.sm{height:15px}
.logo .brand-lockup{height:26px}
.logo .brand-lockup+small{margin-inline-start:6px}
@media (forced-colors:active){.brand-lockup,.brand-ic{forced-color-adjust:none;background:CanvasText}}
@media print{.brand-lockup,.brand-ic{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
.org-mk-brand{background:var(--card);border:1px solid var(--line)}
.org-mk-brand .brand-ic{height:62%}