/* ════════════════════════════════════════════════════════════════════════
   ESPACE CLIENT — grammaire « Record » (Attio), déclinée pour une surface
   PUBLIQUE : pas de rail, une barre client, la marque du marchand.
   Feuille AUTONOME : les anciens <style> inline des gabarits du portail sont
   supprimés, rien n'est surchargé. Tout est scopé sous .pcl.
   Reprend les tokens de static/css/apps/record-detail.css.
   ════════════════════════════════════════════════════════════════════════ */
.pcl{
  --black:#1a1a1a;--text-secondary:#4d4d52;--text-muted:#67676c;--text-quiet:#8a8a90;
  --bg-soft:#fafafa;--bg-cream:#f5f5f7;--border:rgba(0,0,0,.07);--border-strong:rgba(0,0,0,.12);
  --mary:#00a86b;--mary-soft:rgba(0,168,107,.09);--mary-dark:#047857;
  --info:#0d9488;--info-soft:rgba(13,148,136,.10);--warn:#b45309;--warn-soft:rgba(217,119,6,.12);
  --danger:#c81e1e;--danger-soft:rgba(220,38,38,.09);
  --focus:0 0 0 3px rgba(0,168,107,.30);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--black);-webkit-font-smoothing:antialiased;font-feature-settings:'cv11','ss03','ss01';
  background:#fff;min-height:100vh;
}
/* ── Mode sombre ────────────────────────────────────────────────────────────
   Simple échange de jetons dans LA MÊME feuille : aucune surcharge, aucune
   seconde feuille. `html.dark-mode` est posé avant le premier rendu par
   partials/_dark_mode_head.html (anti-FOUC). Le portail l'avait perdu à la
   refonte — les clients qui l'utilisaient se sont retrouvés en blanc. */
html.dark-mode .pcl{
  --black:#f2f2f5;--text-secondary:#c2c2c8;--text-muted:#9a9aa2;--text-quiet:#7c7c85;
  --bg-soft:#151517;--bg-cream:#1c1c1f;--border:rgba(255,255,255,.09);--border-strong:rgba(255,255,255,.16);
  --mary:#00c07b;--mary-soft:rgba(0,192,123,.14);--mary-dark:#3ddc9a;
  --info:#2dd4bf;--info-soft:rgba(45,212,191,.14);--warn:#f0a04b;--warn-soft:rgba(240,160,75,.16);
  --danger:#f87171;--danger-soft:rgba(248,113,113,.15);
  --focus:0 0 0 3px rgba(0,192,123,.35);
  background:#0f0f11;
}
html.dark-mode body{background:#0f0f11;}
html.dark-mode .pcl-top,html.dark-mode .pcl-id,html.dark-mode .pcl-tabbar{background:#0f0f11;}
html.dark-mode .pcl .btn,html.dark-mode .pcl-input,html.dark-mode .pcl-panel,
html.dark-mode .pcl-totals,html.dark-mode .pcl-livecard,html.dark-mode .pcl-step .dot{
  background:#17171a;color:var(--text-secondary);}
html.dark-mode .pcl .btn.primary{background:var(--mary);color:#08120d;border-color:var(--mary);}
html.dark-mode .pcl .btn.primary:hover{background:var(--mary-dark);border-color:var(--mary-dark);}
html.dark-mode .pcl .btn.ghost{background:none;}
html.dark-mode .pcl-mark,html.dark-mode .pcl-authmark,html.dark-mode .pcl-av{background:var(--mary-soft);}
html.dark-mode .pcl-avatar,html.dark-mode .pcl-tdic{background:var(--bg-cream);}
html.dark-mode .pcl-copy{background:var(--bg-cream);}

.pcl *{box-sizing:border-box;}
.pcl a{color:inherit;text-decoration:none;}
.pcl button{font-family:inherit;cursor:pointer;}
.pcl .num{font-variant-numeric:tabular-nums;}
.pcl .ic{width:1em;height:1em;display:inline-block;vertical-align:-.125em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.pcl .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
svg.pcl-vh{position:absolute;width:0;height:0;overflow:hidden;}

/* ── Barre client ── */
.pcl-top{display:flex;align-items:center;gap:14px;padding:0 34px;height:56px;border-bottom:1px solid var(--border);background:#fff;position:sticky;top:0;z-index:40;}
.pcl-brand{display:flex;align-items:center;gap:10px;min-width:0;}
.pcl-mark{width:28px;height:28px;border-radius:8px;background:var(--mary-soft);color:var(--mary-dark);display:grid;place-items:center;font-size:12px;font-weight:700;flex-shrink:0;overflow:hidden;}
.pcl-mark img{width:100%;height:100%;object-fit:cover;}
.pcl-brandname{font-size:13.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pcl-nav{display:flex;gap:2px;margin-left:14px;}
.pcl-nav a{font-size:12.5px;color:var(--text-muted);padding:6px 12px;border-radius:8px;white-space:nowrap;}
.pcl-nav a:hover{color:var(--black);background:var(--bg-soft);}
.pcl-nav a.on{color:var(--mary-dark);background:var(--mary-soft);font-weight:500;}
.pcl-topright{margin-left:auto;display:flex;align-items:center;gap:10px;}
.pcl-who{font-size:12px;color:var(--text-muted);white-space:nowrap;}
.pcl-avatar{width:28px;height:28px;border-radius:999px;background:var(--bg-cream);color:var(--text-secondary);display:grid;place-items:center;font-size:11px;font-weight:600;flex-shrink:0;}

.pcl-page{padding:18px 34px 48px;max-width:1080px;margin:0 auto;}

/* ── Retour ── */
.pcl-back{font-size:11.5px;color:var(--text-muted);display:inline-flex;align-items:center;gap:5px;margin-bottom:11px;}
.pcl-back:hover{color:var(--mary-dark);}
.pcl-back .ic{font-size:13px;}

/* ── Bandeau d'identité (sticky sous la barre) ── */
.pcl-id{display:flex;align-items:center;gap:15px;padding:10px 0 14px;border-bottom:1px solid var(--border);position:sticky;top:56px;background:#fff;z-index:30;flex-wrap:wrap;}
.pcl-av{width:54px;height:54px;border-radius:13px;background:var(--mary-soft);color:var(--mary-dark);display:grid;place-items:center;flex-shrink:0;}
.pcl-av .ic{font-size:23px;}
.pcl-av.info{background:var(--info-soft);color:var(--info);}
.pcl-av.warn{background:var(--warn-soft);color:var(--warn);}
.pcl-idmain{flex:1;min-width:180px;}
.pcl-namerow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.pcl-name{font-size:20px;font-weight:600;letter-spacing:-.02em;}
.pcl-sub{font-size:12px;color:var(--text-muted);margin-top:3px;}
.pcl-key{text-align:right;flex-shrink:0;}
.pcl-key .v{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--mary-dark);white-space:nowrap;font-variant-numeric:tabular-nums;}
.pcl-key .v.warn{color:var(--warn);}
.pcl-key .v.neutral{color:var(--black);}
.pcl-key .l{font-size:11px;color:var(--text-muted);margin-top:1px;}
.pcl-acts{display:flex;gap:8px;flex-shrink:0;align-items:center;}

/* ── Chips ── */
.pcl-chip{font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--bg-cream);color:var(--text-secondary);display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.pcl-chip .d{width:5px;height:5px;border-radius:999px;background:currentColor;flex-shrink:0;}
.pcl-chip.ok{background:var(--mary-soft);color:var(--mary-dark);}
.pcl-chip.warn{background:var(--warn-soft);color:var(--warn);}
.pcl-chip.info{background:var(--info-soft);color:var(--info);}
.pcl-chip.danger{background:var(--danger-soft);color:var(--danger);}

/* ── Boutons ── */
.pcl .btn{display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border:1px solid var(--border-strong);border-radius:999px;background:#fff;color:var(--text-secondary);font-size:12.5px;font-weight:500;white-space:nowrap;}
.pcl .btn:hover{border-color:var(--black);color:var(--black);}
.pcl .btn.primary{background:var(--mary);color:#fff;border-color:var(--mary);}
.pcl .btn.primary:hover{background:var(--mary-dark);border-color:var(--mary-dark);}
.pcl .btn.ghost{border-color:transparent;color:var(--text-muted);background:none;}
.pcl .btn.ghost:hover{color:var(--black);background:var(--bg-cream);}
.pcl .btn.sm{padding:6px 12px;font-size:12px;}
.pcl .btn .ic{font-size:14px;}
.pcl .btn.block{width:100%;justify-content:center;}

/* ── Frise de cycle de vie ── */
.pcl-flow{display:flex;align-items:center;padding:14px 0;border-bottom:1px solid var(--border);overflow-x:auto;}
.pcl-step{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.pcl-step .dot{width:22px;height:22px;border-radius:999px;display:grid;place-items:center;font-size:11px;border:1.5px solid var(--border-strong);color:var(--text-quiet);background:#fff;}
.pcl-step .dot .ic{font-size:12px;}
.pcl-step .lbl{font-size:11.5px;color:var(--text-quiet);white-space:nowrap;}
.pcl-step.done .dot{background:var(--mary);border-color:var(--mary);color:#fff;}
.pcl-step.done .lbl{color:var(--text-secondary);}
.pcl-step.current .dot{border-color:var(--mary);color:var(--mary-dark);box-shadow:var(--focus);}
.pcl-step.current .lbl{color:var(--mary-dark);font-weight:600;}
.pcl-step.current.late .dot{border-color:var(--warn);color:var(--warn);box-shadow:0 0 0 3px var(--warn-soft);}
.pcl-step.current.late .lbl{color:var(--warn);}
.pcl-line{width:34px;height:1.5px;background:var(--border-strong);margin:0 6px;flex-shrink:0;}
.pcl-line.done{background:var(--mary);}

/* Un tableau plus large que son conteneur défile DANS son cadre, jamais en
   poussant la page (règle de la maison). */
.pcl-tablewrap{overflow-x:auto;}

/* ── Strip de propriétés ── */
.pcl-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:2px 26px;padding:14px 0;border-bottom:1px solid var(--border);}
.pcl-strip.c3{grid-template-columns:repeat(3,1fr);}
.pcl-strip.c2{grid-template-columns:repeat(2,1fr);}
/* 104 px, pas 96 : « Commandée le » mesure 100 px avec son icône et se faisait
   rogner de quatre pixels — le libellé se lisait « Commandée l ». */
.pcl-prop{display:grid;grid-template-columns:104px 1fr;align-items:center;gap:8px;min-height:31px;border-radius:7px;padding:1px 6px;margin:0 -6px;}
.pcl-prop:hover{background:var(--bg-soft);}
.pcl-prop.wide{grid-column:1/-1;}
.pcl-k{font-size:11.5px;color:var(--text-muted);display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pcl-k .ic{font-size:12px;color:var(--text-quiet);}
.pcl-v{font-size:12.5px;color:var(--black);padding:5px 8px;min-width:0;}
.pcl-v.link{color:var(--mary-dark);display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.pcl-v.link:hover{text-decoration:underline;}
.pcl-v.muted{color:var(--text-quiet);}
.pcl-v.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;}

/* ── Titre de section ── */
.pcl-sec{display:flex;align-items:center;gap:7px;margin:18px 0 8px;}
.pcl-sec b{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.11em;color:var(--text-quiet);display:flex;align-items:center;gap:7px;}
.pcl-sec b .ic{font-size:12px;}
.pcl-sec .grow{margin-left:auto;font-size:11px;color:var(--text-quiet);}

/* ── « À traiter » ── */
.pcl-todo{border-bottom:1px solid var(--border);}
.pcl-td{display:flex;align-items:center;gap:12px;padding:11px 6px;margin:0 -6px;border-radius:8px;border-bottom:1px solid var(--border);}
.pcl-td:last-child{border-bottom:none;}
.pcl-td:hover{background:var(--bg-soft);}
.pcl-tdic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;background:var(--bg-cream);color:var(--text-muted);}
.pcl-tdic.warn{background:var(--warn-soft);color:var(--warn);}
.pcl-tdic.danger{background:var(--danger-soft);color:var(--danger);}
.pcl-tdic.info{background:var(--info-soft);color:var(--info);}
.pcl-tdic.ok{background:var(--mary-soft);color:var(--mary-dark);}
.pcl-tdmain{min-width:0;flex:1;}
.pcl-tdt{font-size:13px;font-weight:600;}
.pcl-tds{font-size:11.5px;color:var(--text-quiet);margin-top:2px;}
.pcl-tdamt{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;}
.pcl-tdamt.warn{color:var(--warn);}
.pcl-tdamt.quiet{font-size:12px;font-weight:500;color:var(--text-quiet);}
.pcl-tdnote{font-size:11.5px;color:var(--text-quiet);white-space:nowrap;}

/* ── Onglets d'objets ── */
.pcl-tabs{display:flex;gap:4px;flex-wrap:wrap;margin:14px 0 4px;}
.pcl-tab{padding:6px 12px;border-radius:8px;font-size:12px;font-weight:500;color:var(--text-muted);border:none;background:none;display:inline-flex;align-items:center;gap:7px;}
.pcl-tab .cnt{background:var(--bg-cream);border-radius:999px;padding:0 6px;min-width:17px;text-align:center;font-size:10px;font-weight:600;color:var(--text-secondary);}
.pcl-tab:hover{color:var(--black);}
.pcl-tab.on{background:var(--mary-soft);color:var(--mary-dark);}
.pcl-tab.on .cnt{background:#fff;color:var(--mary-dark);}
.pcl-tpanel{display:none;}
.pcl-tpanel.on{display:block;}

/* ── Tables ── */
.pcl table{width:100%;border-collapse:collapse;}
.pcl thead th{font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-quiet);text-align:left;padding:6px 8px 7px;border-bottom:1px solid var(--border);}
.pcl thead th.r{text-align:right;}
.pcl tbody td{padding:10px 8px;font-size:12.5px;border-bottom:1px solid var(--border);vertical-align:middle;}
.pcl tbody tr:hover{background:var(--bg-soft);}
.pcl td.r{text-align:right;font-variant-numeric:tabular-nums;}
.pcl td.t{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;}
.pcl td.quiet{color:var(--text-quiet);font-weight:500;}
.pcl-liname{font-weight:500;}
.pcl-lid{font-size:10.5px;color:var(--text-quiet);margin-top:2px;}
.pcl-empty{padding:26px;text-align:center;color:var(--text-quiet);font-size:12.5px;}

/* ── Pied : panneaux + totaux ── */
.pcl-foot{display:grid;grid-template-columns:1fr 300px;gap:34px;padding:16px 0 4px;border-top:1px solid var(--border);margin-top:14px;align-items:start;}
.pcl-foot.full{grid-template-columns:1fr;}
.pcl-panels{display:flex;flex-direction:column;gap:14px;min-width:0;}
.pcl-panel{border:1px solid var(--border);border-radius:12px;padding:12px 14px;}
.pcl-ph{font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-quiet);margin-bottom:9px;display:flex;align-items:center;gap:7px;}
.pcl-ph .ic{font-size:12px;}
.pcl-ph .grow{margin-left:auto;font-size:10.5px;color:var(--mary-dark);text-transform:none;letter-spacing:0;font-weight:500;background:none;border:none;padding:0;}
.pcl-text{font-size:12.5px;color:var(--text-secondary);line-height:1.5;}
.pcl-row{display:flex;align-items:center;gap:10px;font-size:12.5px;padding:7px 0;border-bottom:1px solid var(--border);}
.pcl-row:last-child{border-bottom:none;}
.pcl-row .ic{color:var(--mary-dark);font-size:15px;}
.pcl-row .nm{font-weight:600;}
.pcl-row .meta{margin-left:auto;color:var(--text-quiet);font-size:11px;white-space:nowrap;}
.pcl-copy{display:flex;align-items:center;gap:8px;background:var(--bg-cream);border-radius:9px;padding:7px 11px;font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-secondary);}
.pcl-copy .u{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;}
.pcl-copy button{background:none;border:none;color:var(--text-quiet);padding:2px;display:grid;place-items:center;}
.pcl-copy button:hover{color:var(--mary-dark);}

.pcl-totals{border:1px solid var(--border);border-radius:12px;padding:14px 16px;position:sticky;top:130px;}
.pcl-tr{display:flex;justify-content:space-between;gap:16px;font-size:12.5px;color:var(--text-secondary);padding:3px 0;}
.pcl-tr .v2{color:var(--black);font-variant-numeric:tabular-nums;}
.pcl-tr.pos .v2{color:var(--mary-dark);}
.pcl-tt{display:flex;justify-content:space-between;gap:16px;margin-top:6px;padding-top:9px;border-top:1px solid var(--border);font-size:16px;font-weight:700;}
.pcl-tt .a{color:var(--black);font-variant-numeric:tabular-nums;}
.pcl-due{display:flex;justify-content:space-between;gap:16px;margin-top:7px;font-size:14px;font-weight:700;}
.pcl-due.unpaid{color:var(--warn);}
.pcl-due.ok{color:var(--mary-dark);}
.pcl-cta{margin-top:12px;width:100%;justify-content:center;}
.pcl-hint{font-size:11px;color:var(--text-quiet);margin-top:9px;display:flex;align-items:flex-start;gap:6px;line-height:1.45;}
.pcl-hint .ic{color:var(--mary-dark);font-size:12px;margin-top:2px;}

/* ── Alerte sur filet (jamais de pavé teinté) ── */
.pcl-alert{display:flex;align-items:flex-start;gap:10px;padding:11px 0 12px;font-size:12.5px;line-height:1.45;color:var(--text-secondary);border-bottom:1px solid var(--border);}
.pcl-alert b{display:block;font-size:13px;font-weight:600;color:var(--black);}
.pcl-alert .why{font-size:11.5px;color:var(--text-quiet);margin-top:2px;}
.pcl-alert .go{margin-left:auto;align-self:center;flex-shrink:0;}
.pcl-alert .ic{font-size:15px;margin-top:1px;color:var(--text-quiet);}
.pcl-alert.warn .ic{color:var(--warn);}
.pcl-alert.ok .ic{color:var(--mary-dark);}
.pcl-alert.danger .ic{color:var(--danger);}

/* ── Connexion ── */
.pcl-auth{max-width:392px;margin:0 auto;padding:56px 24px 40px;}
.pcl-authhead{text-align:center;margin-bottom:26px;}
.pcl-authmark{width:52px;height:52px;border-radius:14px;background:var(--mary-soft);color:var(--mary-dark);display:grid;place-items:center;margin:0 auto 14px;font-size:18px;font-weight:700;overflow:hidden;}
.pcl-authmark img{width:100%;height:100%;object-fit:cover;}
.pcl-authhead h1{font-size:19px;font-weight:600;letter-spacing:-.02em;margin:0 0 5px;}
.pcl-authhead p{font-size:12.5px;color:var(--text-muted);margin:0;line-height:1.5;}
.pcl-field{margin-bottom:12px;}
.pcl-label{display:block;font-size:11.5px;font-weight:500;color:var(--text-muted);margin-bottom:6px;}
.pcl-input{width:100%;border:1px solid var(--border-strong);border-radius:10px;padding:10px 12px;font-size:13px;font-family:inherit;color:var(--black);background:#fff;}
.pcl-input:focus{outline:none;border-color:var(--mary);box-shadow:var(--focus);}
.pcl-authnote{font-size:11.5px;color:var(--text-quiet);line-height:1.5;margin-top:16px;padding-top:14px;border-top:1px solid var(--border);}
.pcl-authnote a{color:var(--mary-dark);}
.pcl-sent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--text-secondary);line-height:1.5;padding:12px 0;border-bottom:1px solid var(--border);margin-bottom:14px;}
.pcl-sent .ic{color:var(--mary-dark);font-size:16px;margin-top:1px;}
.pcl-sent b{color:var(--black);font-weight:600;}
.pcl-authsep{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--text-quiet);font-size:11px;}
.pcl-authsep::before,.pcl-authsep::after{content:"";flex:1;height:1px;background:var(--border);}
/* Pied de page de l'écran d'accès — la seule page publique du portail. Aligné
   sur la laisse de .pcl-auth (392 px) pour rester sous la carte, pas sous la
   page entière. */
.pcl-authfoot{max-width:392px;margin:0 auto;padding:0 24px 40px;text-align:center;}
.pcl-authfoot nav{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;padding-bottom:11px;border-bottom:1px solid var(--border);}
.pcl-authfoot a{font-size:11.5px;color:var(--text-muted);text-decoration:none;}
.pcl-authfoot a:hover{color:var(--black);}
.pcl-authfoot p{font-size:11px;color:var(--text-quiet);margin:11px 0 0;}
.pcl-authfoot p a{color:var(--text-muted);font-weight:600;}

/* ── Mon compte : formulaire de coordonnées ── */
.pcl-form{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 22px;padding:12px 0;}
.pcl-form .wide{grid-column:1/-1;}
.pcl-formacts{display:flex;gap:8px;align-items:center;padding:8px 0 14px;border-bottom:1px solid var(--border);}
.pcl-formacts .note{font-size:11px;color:var(--text-quiet);}

/* ── Notification en direct (WebSocket) ── */
.pcl-live{position:fixed;right:18px;bottom:18px;z-index:80;display:flex;flex-direction:column;gap:8px;max-width:330px;}
.pcl-livecard{background:#fff;border:1px solid var(--border-strong);border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.14);padding:12px 14px;display:flex;gap:10px;align-items:flex-start;}
.pcl-livecard .ic{color:var(--mary-dark);font-size:16px;margin-top:1px;}
.pcl-livecard .t{font-size:13px;font-weight:600;}
.pcl-livecard .m{font-size:12px;color:var(--text-muted);margin-top:2px;line-height:1.45;}

/* ── Messages Django ── */
.pcl-msg{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--text-secondary);padding:10px 0;border-bottom:1px solid var(--border);}
.pcl-msg .d{width:6px;height:6px;border-radius:999px;background:var(--mary);flex-shrink:0;}
.pcl-msg.error .d{background:var(--danger);}
.pcl-msg.warning .d{background:var(--warn);}

/* ── Mobile : listes à filets, jamais de cartes empilées ── */
.pcl-mlist{display:none;}
.pcl-mrow{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--border);}
.pcl-mmain{flex:1;min-width:0;}
.pcl-mt{font-size:13px;font-weight:500;}
.pcl-ms{font-size:11px;color:var(--text-quiet);margin-top:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.pcl-mamt{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;}
.pcl-mamt .st{display:block;font-size:10.5px;font-weight:500;color:var(--text-quiet);margin-top:2px;}

@media (max-width:860px){
  .pcl-page{padding:14px 16px 40px;}
  .pcl-top{padding:0 16px;gap:10px;}
  .pcl-nav{display:none;}
  .pcl-who{display:none;}
  .pcl-id{position:static;gap:11px;padding:10px 0 12px;}
  .pcl-av{width:42px;height:42px;border-radius:11px;}
  .pcl-name{font-size:16px;}
  .pcl-key .v{font-size:18px;}
  .pcl-strip,.pcl-strip.c3,.pcl-strip.c2{grid-template-columns:1fr;}
  .pcl-foot{grid-template-columns:1fr;gap:18px;}
  .pcl-totals{position:static;}
  .pcl-form{grid-template-columns:1fr;}
  /* La frise passe en colonne. En ligne elle défilait horizontalement sans
     rien pour le signaler : la dernière étape (« Retirée ») était coupée hors
     écran et le client ne voyait pas la fin de son parcours. */
  .pcl-flow{flex-direction:column;align-items:flex-start;gap:0;overflow-x:visible;}
  .pcl-step{align-self:stretch;}
  .pcl-line{width:1.5px;height:12px;margin:2px 0 2px 10.25px;}
  /* Les tables de documents deviennent des listes à filets. */
  .pcl-tablewrap{display:none;}
  .pcl-mlist{display:block;}
  /* « À traiter » en mobile : le titre garde toute la largeur, le montant et
     l'action passent dessous. En flex, le libellé se coinçait sur trois mots
     par ligne à côté du montant. */
  .pcl-td{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;column-gap:11px;row-gap:8px;}
  .pcl-tdic{grid-row:1;grid-column:1;}
  .pcl-tdmain{grid-row:1;grid-column:2/4;}
  .pcl-tdamt{grid-row:2;grid-column:2;justify-self:start;}
  .pcl-tdnote,.pcl-td .btn{grid-row:2;grid-column:3;justify-self:end;white-space:normal;text-align:right;}
  .pcl-live{left:12px;right:12px;bottom:12px;max-width:none;}
}

/* Barre de navigation mobile en pied : les 4 destinations à portée de pouce. */
.pcl-tabbar{display:none;}
@media (max-width:860px){
  .pcl-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--border);z-index:50;}
  .pcl-tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 calc(9px + env(safe-area-inset-bottom));font-size:10px;color:var(--text-quiet);}
  .pcl-tabbar a .ic{font-size:17px;}
  .pcl-tabbar a.on{color:var(--mary-dark);}
  .pcl-page{padding-bottom:76px;}
}

/* Bascule de thème : une seule icône visible à la fois. */
.pcl .pcl-sun{display:none;}
html.dark-mode .pcl .pcl-sun{display:inline-block;}
html.dark-mode .pcl .pcl-moon{display:none;}