/* 2026-09-21 : le blanc EN DUR des fonds de marque et d'alerte passe aux encres
   du socle (--ac-*-fg). Sans effet en clair, où elles valent #ffffff ; en sombre le
   fond s'éclaircit et le blanc y tombait sous le plancher AA. Garde et mesures :
   tests/test_encre_sur_fond_plein_2026_09_21.py */
/* ════════════════════════════════════════════════════════════════════════
   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:var(--fg-1);--text-secondary:var(--fg-2);--text-muted:var(--fg-3);--text-quiet:var(--fg-4);
/* `--bg-soft` valait `var(--sf-1)`, la couleur meme dont cette feuille peint
   son panneau : les survols poses dessus repeignaient leur propre fond, 1,00:1,
   dans les deux themes, et les surfaces en retrait etaient blanches sur blanc.
   `--sf-2` est le creux du socle (« creux, survol, zone en retrait »). Troisieme
   passe du meme defaut : tenant 18 et 20/08, tableau de bord 03/09. */
  --bg-soft:var(--sf-2);--bg-cream:var(--sf-2);--border:var(--sf-line);--border-strong:var(--sf-line-strong);
  --mary:#00a86b;--mary-soft:var(--ac-brand-soft);--mary-dark:#047857;
  --info:var(--ac-info);--info-soft:var(--ac-info-soft);--warn:var(--ac-warn);--warn-soft:var(--ac-warn-soft);
  --danger:#c81e1e;--danger-soft:var(--ac-danger-soft);
  --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:var(--sf-1);min-height:100vh;min-height:100dvh;
}
/* Le corps gardait la marge de 8 px du navigateur : une page haute de 100 vh
   posée dedans en faisait 16 de plus que la vue, et TOUTES les pages du
   portail défilaient de 16 px pour rien — y compris celles que
   `.pcl--app{overflow:hidden}` croyait avoir figées (mesuré le 11/10/2026 :
   scrollHeight 860 pour une vue de 844). */
body{margin:0;}
/* ── 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;}
/* `.pcl-panel` est SORTI de cette liste avec sa boîte : un fond gris derrière
   un groupe sans retrait viendrait coller au texte, et l'encre secondaire
   ternirait le titre du groupe. */
html.dark-mode .pcl .btn,html.dark-mode .pcl-input,html.dark-mode .pcl-livecard{
  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;}
/* Rien de plus à écrire ici pour .pcl-mark, .pcl-avatar ni .pcl-copy : leur
   fond est DÉJÀ exprimé en jeton (--bg-cream), que le bloc
   ci-dessus échange. Les redéclarer sous `html.dark-mode` pesait (0,2,1) contre
   (0,2,0) pour une règle à deux classes : en mode sombre, TOUS les avatars
   viraient au vert de marque et les états ne se distinguaient plus. Le cas
   avait été vu pour `.btn.primary` (rejoué avec sa classe juste au-dessus) et
   manqué ici. `.pcl-av`, la vignette de type du portail, est partie le 22/09 ;
   c'est elle que l'exemple citait.
   `.pcl-tdic` ne peignait plus aucun fond depuis le 06/09, et il est parti
   entier le 25/09 avec son pictogramme. */

.pcl *{box-sizing:border-box;}
/* `[hidden]` doit gagner. La règle du navigateur est une règle d'AGENT : la
   moindre déclaration d'auteur la bat, quelle que soit sa spécificité, et
   `.pcl-copy button{display:grid}` rendait visible un bouton marqué caché.
   Deux classes (0,2,0) contre une classe et un type (0,1,1) : celle-ci passe
   devant, sans `!important`. */
.pcl [hidden]{display:none;}
.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:var(--sf-1);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(--bg-cream);color:var(--text-secondary);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;font-weight:500;color:var(--fg-3);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(--fg-1);font-weight:700;}
.pcl-topright{margin-left:auto;display:flex;align-items:center;gap:10px;}
.pcl-quitter{margin:0;display:flex;}
.pcl-who{font-size:12px;color:var(--text-muted);white-space:nowrap;}

.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);}

/* ── Bandeau d'identité (sticky sous la barre) ── */
.pcl-id{display:flex;align-items:center;gap:15px;padding:10px 0 8px;position:sticky;top:56px;background:var(--sf-1);z-index:30;flex-wrap:wrap;}
.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 0;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{color:var(--mary-dark);}
.pcl-chip.warn{color:var(--warn);}
.pcl-chip.info{color:var(--info);}
.pcl-chip.danger{color:var(--danger);}

/* ── Boutons ── */
.pcl .btn{display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border:1px solid transparent;border-radius:8px;background:var(--sf-ctl);color:var(--text-secondary);font-size:12.5px;font-weight:500;white-space:nowrap;}
.pcl .btn:hover{background:var(--sf-ctl-hover);color:var(--black);}
.pcl .btn.primary{background:var(--mary);color:var(--ac-cta-fg);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 ── */
/* LE TRAIT DOIT TRAVAILLER (20/09/2026). Règle maison posée le 09/09 sur la
   liste des produits et gardée depuis (`test_produits_assise_unique_2026_09_09`) :
   le filet de rangée ne tient pas la LISTE, il tient l'EMPILEMENT. L'espace
   client était resté en dehors du geste — il soulignait la frise, la bande de
   propriétés, chaque cellule de table et chaque rangée de liste, soit quatre
   traits empilés avant le premier mot du contenu. Comptés dans le rendu de la
   maquette `mockups/portail-espace-six-ecrans-2026-09-20.html` : 53 filets sur
   le tableau de bord, 8 après.
   CE QUI RESTE, et pourquoi (revu le 30/09/2026) : la barre du haut, qui borne
   le chrome ; la ligne des onglets, sur laquelle l'onglet actif pose son
   souligné ; l'en-tête de colonnes d'une table ; le filet du rail, entre deux
   volets qui défilent chacun de leur côté ; les rangées à DEUX assises (« À
   traiter », liste mobile). Sont partis ce jour-là : le filet sous le bandeau
   d'identité (plus rien ne défile dessous), celui des alertes et des messages
   (l'attaque en gras suffit), celui du total TTC (le corps de 16 px le dit), le
   cadre des totaux, le filet sous les boutons d'un formulaire, et les deux de
   l'écran d'accès. */
.pcl-flow{display:flex;align-items:center;padding:10px 0 8px;overflow-x:auto;}
.pcl-step{display:flex;align-items:center;gap:8px;flex-shrink:0;}
/* 30/09/2026 : la pastille d'étape était un rond de 22 px CERNÉ, avec une coche
   dessinée dans l'étape faite et un chiffre dans les autres. Le numéro redit
   l'ordre que la ligne dit déjà, la coche redit la couleur. Il reste un point
   plein : vert fait, gris à venir, et l'anneau pour l'étape en cours. */
.pcl-step .dot{width:9px;height:9px;border-radius:999px;background:var(--border-strong);flex-shrink:0;}
.pcl-step .lbl{font-size:11.5px;color:var(--text-quiet);white-space:nowrap;}
.pcl-step.done .dot{background:var(--mary);}
.pcl-step.done .lbl{color:var(--text-secondary);}
.pcl-step.current .dot{background:var(--mary);box-shadow:var(--focus);}
.pcl-step.current .lbl{color:var(--mary-dark);font-weight:600;}
.pcl-step.current.late .dot{background: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 8px;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:12px 0;}
.pcl-strip.c3{grid-template-columns:repeat(3,1fr);}
.pcl-strip.c2{grid-template-columns:repeat(2,1fr);}
.pcl-strip.c1{grid-template-columns: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 ». */
/* `1fr` refuse de descendre sous la largeur de son contenu : une adresse ou un
   e-mail long poussait sa colonne et décalait les voisines de la bande.
   `minmax(0,1fr)` la laisse rétrécir, et l'ellipse de `.pcl-k` fait le reste. */
.pcl-prop{display:grid;grid-template-columns:104px minmax(0,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-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;}

/* ── La propriété qui SE TAPE ────────────────────────────────────────────────
   « Mon compte » posait treize champs cernés de 1 px, empilés sous leur
   intitulé : 40 px par ligne, 520 px de contour pour treize informations. C'est
   la forme de la MODALE, pas celle d'une fiche — la fiche contact du CRM écrit
   la valeur en clair et n'ouvre son cadre qu'au crayon. Ici le cadre revient au
   survol (il faut savoir que ça se tape) et au focus. Même colonne, même
   hauteur de rangée et même encre que les propriétés en lecture, à côté
   desquelles ces champs vivent. */
.pcl-champ{width:100%;min-width:0;font:inherit;font-size:12.5px;color:var(--black);
  border:1px solid transparent;background:none;border-radius:7px;padding:6px 8px;}
.pcl-champ:hover{background:var(--bg-soft);border-color:var(--border);}
.pcl-champ:focus{outline:none;background:var(--sf-1);border-color:var(--mary);box-shadow:var(--focus);}
/* LE VIDE SE NOMME. Un champ non renseigné ne rendait rien du tout : une ligne
   blanche entre deux lignes blanches, impossible à distinguer d'une valeur
   effacée par mégarde. La fiche CRM écrit « Non renseigné » ; ici c'est un
   texte d'attente, en italique pour qu'on ne le prenne pas pour une valeur. */
.pcl-champ::placeholder{color:var(--text-quiet);font-style:italic;}
select.pcl-champ{appearance:none;}

/* La bande qui SE REMPLIT, par opposition à celle qui se lit. Trois réglages,
   mesurés au navigateur sur « Mon compte » le 20/09/2026 :
   * les rangées s'alignent EN HAUT — une aide sous un champ rend sa rangée plus
     haute que ses voisines, et `center` faisait alors flotter les autres au
     milieu d'un trou ;
   * l'intitulé peut revenir à la ligne et prend 132 px — « Complément
     d'adresse » et « Code postal (livraison) » se coupaient en
     « Complément d'adre… », et un intitulé tronqué ne dit plus quel champ on
     remplit ;
   * l'aide prend la largeur entière de sa propriété, sinon elle s'entasse dans
     la colonne de la valeur, sur six lignes de trois mots. */
.pcl-strip.saisie{align-items:start;}
.pcl-strip.saisie .pcl-prop{grid-template-columns:132px minmax(0,1fr);align-items:start;}
.pcl-strip.saisie .pcl-k{white-space:normal;line-height:1.35;padding-top:7px;}
.pcl-strip.saisie .pcl-tog{padding-top:4px;}
.pcl-strip.saisie .pcl-aide{grid-column:2/-1;padding:0 8px 4px;}

/* Modifié, pas encore enregistré. Une pastille, à la fin de l'intitulé : le
   client qui a corrigé deux champs dans une bande de cinq rangées retrouve
   lesquels. C'est `compte.js` qui la pose. */
.pcl-prop--modifie .pcl-k::after{content:"";width:5px;height:5px;border-radius:999px;
  background:var(--mary);flex-shrink:0;}

/* ── L'accord qui se retire d'un geste ───────────────────────────────────────
   Le consentement marketing se donnait d'une case sur le ticket de caisse et ne
   se reprenait NULLE PART ; le ticket par e-mail ne se révoquait que sur
   l'écran de succès de la caisse. Le RGPD demande qu'un accord se retire aussi
   facilement qu'il se donne : c'est un interrupteur, dans la bande, à côté des
   coordonnées qu'il concerne. */
.pcl-tog{display:inline-flex;align-items:center;gap:9px;padding:5px 8px;font-size:12.5px;cursor:pointer;}
.pcl-tog input{position:absolute;opacity:0;width:0;height:0;}
/* UNE PASTILLE SE POSE SUR UN FOND, elle ne se cerne pas — troisième
   conséquence de la règle « un trait sépare deux natures » (20/09/2026,
   `tests/test_traits_qui_travaillent_2026_09_20.py`). Quatre bords pour dire ce
   qu'un aplat dit d'un seul. Mêmes valeurs que l'interrupteur du socle
   (`.pf-toggle-row .pf-toggle` de product-form-record.css) : le rail prend
   `--border-strong` en aplat, le galet est blanc et porte une ombre, parce
   qu'un galet de la couleur du rail ne se verrait pas. */
.pcl-sw{width:34px;height:20px;border-radius:999px;background:var(--border-strong);
  border:none;position:relative;flex-shrink:0;transition:background .15s;}
.pcl-sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:999px;
  background:var(--sf-1);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s;}
.pcl-tog input:checked + .pcl-sw{background:var(--mary);}
.pcl-tog input:checked + .pcl-sw::after{left:16px;}
/* Le focus doit se voir : une case cachée derrière son dessin ne montre plus
   rien au clavier. */
.pcl-tog input:focus-visible + .pcl-sw{box-shadow:var(--focus);}
.pcl-tog .meta{color:var(--text-quiet);font-size:11px;}


/* La pastille dorée de la fidélité, reprise de la fiche contact du CRM
   (`--gold`, #8a6d00 en clair et #e3b341 en sombre). */
.pcl-chip.gold{color:#8a6d00;}
html.dark-mode .pcl-chip.gold{color:#e3b341;}

/* ── 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 .grow{margin-left:auto;font-size:11px;color:var(--text-quiet);}

/* ── « À traiter » ── */
/* `.pcl-todo` n'a plus de règle : le conteneur n'a pas à se souligner. La
   classe reste dans les gabarits : elle nomme le groupe et sert d'accroche au
   JS des nouveautés (`data-lues`).
   Le filet des RANGÉES est parti le 11/10/2026, dans tout l'espace client. Il
   se justifiait par les deux assises de la rangée ; or vingt-deux pixels de
   blanc séparent deux rangées quand deux séparent leurs propres assises, et
   c'est cet écart-là qui fait le groupe. Dix-neuf traits empilés sur l'écran
   d'accueil — un sous chaque document à traiter — quadrillaient la liste sans
   rien y séparer de deux natures différentes. Le survol reste le repère de la
   rangée visée, au TROISIÈME cran de surface comme dans les tables, qui
   n'avaient déjà plus de filet (cf. `.pcl tbody tr:hover`). */
.pcl-td{display:flex;align-items:center;gap:12px;padding:11px 6px;margin:0 -6px;border-radius:8px;}
.pcl-td:hover{background:var(--sf-3);}
/* `.pcl-tdic`, la pastille à pictogramme de chaque ligne, est partie le 25/09
   (règle du 22/09 : plus de pictogramme). L'urgence se lit aux mots de la
   ligne (« Échue le… ») et à l'encre du montant, la nouveauté au point de
   `.pcl-td--neuf`. */
.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;}
/* Non lue. `pcl-td--neuf` ne servait que de point d'accroche au JS qui marque
   les nouveautés comme lues : la feuille l'ignorait, et une notification jamais
   vue se lisait exactement comme une notification déjà classée. Une pastille,
   de la même famille que celle des chips, jamais un pavé teinté. */
.pcl-td--neuf .pcl-tdt{font-weight:700;}
.pcl-td--neuf .pcl-tdt::before{content:"";display:inline-block;width:6px;height:6px;border-radius:999px;
  background:var(--mary);margin-right:7px;vertical-align:middle;}

/* ── Onglets d'objets ── */
/* Le mot et le chiffre nu (28/09/2026, variante A, cf. 8c794663d) : l'actif
   était une pilule teintée de vert (fond `--mary-soft`, rayon de 8 px) ; quatre
   capsules sur une ligne, c'est le kit de composants par défaut. Depuis le
   27/10/2026, ni souligné ni filet : les autres reculent en `--fg-3`, l'actif
   seul garde `--fg-1` en 700 ; un compteur à zéro n'est plus écrit.
   Sur téléphone la ligne DÉFILE au lieu de passer à la ligne. */
.pcl-tabs{display:flex;align-items:flex-end;gap:0 22px;margin:14px 0 10px;overflow-x:auto;scrollbar-width:none;}
.pcl-tabs::-webkit-scrollbar{display:none;}
/* « Tout afficher », quand la vue a tronqué l'historique : un mot au bout de la
   ligne d'onglets, au lieu d'une alerte en deux phrases sous la liste. */
.pcl-tabs .pcl-plus{margin-left:auto;flex:none;align-self:center;font-size:11.5px;font-weight:600;color:var(--mary-dark);padding:8px 0;}
.pcl-tabs .pcl-plus:hover{text-decoration:underline;}
.pcl-tab{flex:none;white-space:nowrap;padding:8px 0 9px;border:none;border-radius:0;font-size:12px;font-weight:500;background:none;display:inline-flex;align-items:flex-end;gap:6px;color:var(--fg-3);}
/* Le compteur EST le message : l'emballer dans un fond, un rayon de 999 px et
   10 px d'encre le range au niveau du décor. Il tient à côté de son mot,
   séparé par le seul blanc du `gap`. */
.pcl-tab .cnt{font-variant-numeric:tabular-nums;font-size:inherit;font-weight:inherit;color:inherit;}
.pcl-tab:hover{color:var(--fg-1);}
.pcl-tab.on{color:var(--fg-1);font-weight:700;}
.pcl-tab:focus-visible{outline:none;box-shadow:var(--focus);border-radius:4px;}
.pcl-tpanel{display:none;}
.pcl-tpanel.on{display:block;}
/* Tout / Factures / Devis partagent LES MÊMES lignes : l'onglet pose `data-f`
   sur le conteneur, on masque ce qui ne correspond pas. Les trois panneaux
   d'avant rendaient chacun le tableau ET la liste mobile, soit jusqu'à six
   copies de chaque document dans le DOM. */
.pcl-docs[data-f="factures"] [data-k="devis"],
.pcl-docs[data-f="devis"] [data-k="facture"]{display:none;}
.pcl-docs [data-empty]{display:none;}
.pcl-docs[data-f="tout"] [data-empty="tout"],
.pcl-docs[data-f="factures"] [data-empty="factures"],
.pcl-docs[data-f="devis"] [data-empty="devis"]{display:block;}

/* Le parc se filtre comme les documents : l'onglet pose `data-f` sur le
   conteneur, la feuille masque ce qui ne correspond pas. Des paires EXPLICITES
   plutôt qu'un `:not()` — celui-ci enfle la spécificité et se retourne contre
   la première règle d'état qui suit. */
.pcl-parc[data-f="service"] [data-k="reparation"],
.pcl-parc[data-f="service"] [data-k="retires"],
.pcl-parc[data-f="reparation"] [data-k="service"],
.pcl-parc[data-f="reparation"] [data-k="retires"],
.pcl-parc[data-f="retires"] [data-k="service"],
.pcl-parc[data-f="retires"] [data-k="reparation"]{display:none;}

/* ── 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;}
/* La rangée revient à UNE ASSISE (cf. `.pcl-liname` / `.pcl-lid` plus bas) :
   son filet n'a plus de travail. Le survol devient alors le seul repère de la
   ligne visée, et il prend le TROISIÈME cran de surface — au deuxième, mesuré
   le 09/09, la rangée survolée est quasi invisible (1,044 contre 1,089 en
   clair) dès qu'aucun trait ne la borde. */
.pcl tbody td{padding:11px 8px;font-size:12.5px;vertical-align:middle;}
.pcl tbody tr:hover{background:var(--sf-3);}
.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;}
/* Le qualificatif du montant, dans le tableau comme dans la liste mobile : sans
   lui, « 300 » (reste dû) et « 1 200 » (total réglé) se lisent pareil. */
.pcl td.t .st{display:block;font-size:10.5px;font-weight:500;color:var(--text-quiet);margin-top:2px;}
.pcl td.quiet{color:var(--text-quiet);font-weight:500;}
.pcl-liname{font-weight:500;display:inline;}
/* La rangée qui ouvre sa fiche au clic (`data-href`, lu par espace.js). */
.pcl tbody tr[data-href]{cursor:pointer;}
/* Titre de poste dans un document structuré. Le style vivait dans un attribut
   `style=` répété sur deux gabarits, et n'existait QUE dans le tableau : au
   téléphone les sections disparaissaient. */
.pcl tbody tr.pcl-secline td{font-weight:600;background:var(--bg-soft);}
.pcl-msec{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.09em;
  color:var(--text-quiet);padding:13px 0 5px;}
/* « La marque remonte à la suite du nom » : c'est le geste exact du 09/09 sur
   la liste des produits, qui est la CONDITION du retrait du filet. Sur la liste
   MOBILE (`.pcl-mlist`), la rangée garde ses deux assises et son trait : le
   repli ne suit jamais tout seul, il se regarde à chaque fois. */
.pcl-lid{font-size:11px;color:var(--text-quiet);display:inline;margin-left:9px;}
.pcl-empty{padding:26px;text-align:center;color:var(--text-quiet);font-size:12.5px;}

/* ── Le rail : ce qu'on vient chercher, à hauteur d'œil ──────────────────────
   Les cinq écrans connectés finissaient tous par `.pcl-foot`, une grille de deux
   colonnes posée SOUS une table de longueur inconnue. Elle porte pourtant ce
   qu'on vient chercher : le solde et « Payer », le bouton « Signer », l'IBAN, le
   téléphone du commerçant. Sur une facture de vingt lignes, le client qui vient
   payer descend d'un écran et demi avant de trouver par où. Le pied devient une
   colonne de droite, visible d'emblée ; la liste garde la colonne large.
   Ce sont les mêmes proportions que `.pcl-foot` (1fr et ~300 px) : on ne change
   pas la géométrie, on la remonte. Sous 860 px, le rail repasse sous la liste,
   qui est la disposition d'aujourd'hui et la bonne sur un téléphone. */
.pcl-2col{display:grid;grid-template-columns:minmax(0,1fr) 322px;gap:0 30px;align-items:start;padding-top:4px;}
.pcl-rail{min-width:0;border-left:1px solid var(--border);padding-left:24px;}
.pcl-rail > * + *{margin-top:22px;}

/* ── L'aperçu du document ────────────────────────────────────────────────────
   Les quatre fiches de Ventes montrent le document lui-même depuis le 20/09
   (`.recd-viewer`) ; l'espace client n'en montrait qu'une table de lignes, et le
   client ne voyait jamais, sous cet écran, la facture qu'il a reçue par e-mail.
   `loading="lazy"` est posé par le gabarit : la vue PDF compose le document
   ENTIER à chaque appel, et sans lui, ouvrir la fiche déclencherait cette
   composition même si l'aperçu n'arrive jamais à l'écran. */
.pcl-viewer{position:relative;border-radius:12px;overflow:hidden;background:var(--bg-cream);min-height:460px;}
/* L'aperçu passe AU-DESSUS de « Chargement de l'aperçu… » : en position
   absolue, le libellé se peignait par-dessus l'iframe et restait lisible en
   travers du document une fois celui-ci chargé. Fond transparent, pour que le
   libellé se voie tant que rien n'est arrivé. */
.pcl-viewer iframe{position:relative;z-index:1;width:100%;height:100%;min-height:460px;border:none;display:block;background:transparent;}
.pcl-viewer__load{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:var(--text-muted);pointer-events:none;}

/* ── Panneaux du rail ── */
/* Jumelle de `.recd-panels` / `.recd-panel` : même geste, mêmes valeurs. */
.pcl-panels{display:flex;flex-direction:column;gap:30px;min-width:0;}
.pcl-panel{padding:0;}
.pcl-ph{font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-quiet);margin-bottom:4px;display:flex;align-items:center;gap:7px;}
.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;}
/* Conditions du programme de fidélité. Repliées : ce sont des clauses qu'on
   consulte, pas qu'on lit — dépliées par défaut, elles pousseraient le solde et
   l'historique hors de l'écran. Le marqueur natif est retiré au profit du
   chevron dessiné : Safari ne stylise pas ::-webkit-details-marker de façon
   fiable, et le triangle par défaut jure avec le reste du panneau. */
.pcl-reg{margin-top:12px;}
.pcl-reg>summary{list-style:none;cursor:pointer;font-size:11.5px;font-weight:600;color:var(--text-secondary);display:flex;align-items:center;gap:6px;min-height:28px;}
.pcl-reg>summary::-webkit-details-marker{display:none;}
.pcl-reg>summary::before{content:'';flex:0 0 auto;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s ease;}
.pcl-reg[open]>summary::before{transform:rotate(45deg);}
.pcl-reg ul{margin:4px 0 0;padding-left:17px;}
.pcl-reg li{font-size:11.5px;color:var(--text-quiet);line-height:1.5;margin-top:3px;}
/* Ces rangées-ci ne se cliquent pas : aucun survol à leur donner, seul le
   filet tombe. */
.pcl-row{display:flex;align-items:center;gap:10px;font-size:12.5px;padding:8px 0;}
.pcl-row .nm{font-weight:600;}
.pcl-row .meta{margin-left:auto;color:var(--text-quiet);font-size:11px;white-space:nowrap;}
/* Le téléphone et l'adresse d'un panneau de contact sont des liens depuis le
   12/10/2026. Ils gardent l'encre de leur ligne — un rail n'est pas un sommaire
   de liens bleus — mais prennent un trait au survol, sans quoi rien ne dit
   qu'un numéro s'appelle et qu'une adresse s'ouvre. */
.pcl-row a:hover{text-decoration:underline;}
.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(--mary-dark);padding:2px 0;font:inherit;font-family:'Inter',sans-serif;font-size:11.5px;font-weight:600;}
.pcl-copy button:hover{text-decoration:underline;}
/* La copie ne se voyait QUE dans l'`aria-label` : celui qui regarde l'écran
   cliquait et ne voyait rien bouger. */
.pcl-copied{font-size:11px;font-weight:600;color:var(--mary-dark);white-space:nowrap;}
.pcl-mt6{margin-top:6px;}
.pcl-mt8{margin-top:8px;}

/* Le bloc de totaux ne vit plus que dans le rail, déjà borné par son filet : il
   n'y a jamais eu de cadre à y voir (la règle du rail le retirait). Le cadre,
   son fond sombre et la variante `.nu` qui les annulait sont partis le
   30/09/2026. */
.pcl-totals{min-width:0;}
.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:8px;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);}

/* ── Alerte : l'attaque en gras, ni filet ni pavé teinté (30/09/2026) ── */
.pcl-alert{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:12.5px;line-height:1.45;color:var(--text-secondary);}
.pcl-alert b{display:block;font-size:13px;font-weight:600;color:var(--black);}
.pcl-alert .go{flex-shrink:0;}

/* ── 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(--bg-cream);color:var(--text-secondary);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:var(--sf-1);}
.pcl-input:focus{outline:none;border-color:var(--mary);box-shadow:var(--focus);}
.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;margin-bottom:6px;}
.pcl-sent b{color:var(--black);font-weight:600;}
.pcl-sent .why{font-size:11.5px;color:var(--text-quiet);margin-top:3px;}
/* Une commande secondaire est un MOT, pas un second pilote pleine largeur.
   `.pcl-alt` porte la phrase qui l'introduit, `.pcl-altrow` aligne deux
   commandes de même rang sur une seule ligne. */
.pcl-alt{margin:11px 0 0;font-size:11.5px;color:var(--text-muted);line-height:1.55;text-align:center;}
.pcl-altrow{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin-top:12px;font-size:11.5px;}
/* `.pcl .pcl-word` et non `.pcl-word` : `.pcl a{color:inherit}` pèse (0,1,1)
   et battait cette règle à (0,1,0). Les deux commandes de même rang du bas de
   l'écran d'accès — « Mot de passe oublié », un lien, et « Recevoir un lien par
   e-mail », un bouton — sortaient donc de deux couleurs, l'une en encre de
   texte, l'autre en vert. Même défaut sur « Revenir à la connexion ». */
.pcl .pcl-word{border:none;background:none;padding:0;font:inherit;font-size:inherit;
  color:var(--mary-dark);font-weight:600;}
.pcl .pcl-word:hover{text-decoration:underline;}
/* Bascule de lecture du mot de passe. Le bouton se pose DANS le champ, donc le
   champ réserve sa place à droite : sans ce padding, un mot de passe long
   passait sous l'oeil. */
.pcl-inputwrap{position:relative;}
.pcl-inputwrap .pcl-input{padding-right:40px;}
.pcl-reveal{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:32px;height:32px;
  display:grid;place-items:center;border:none;background:none;color:var(--text-quiet);border-radius:8px;}
.pcl-reveal:hover{color:var(--black);}
.pcl-reveal .ic{font-size:16px;}
.pcl-reveal .pcl-eyeoff{display:none;}
.pcl-reveal.on .pcl-eyeoff{display:inline-block;}
.pcl-reveal.on .pcl-eyeon{display:none;}
/* « Rester connecté sur cet appareil ». Une case, son libellé, rien autour : pas
   d'encadré, pas d'aplat. La cible tactile tient sur toute la ligne. */
.pcl-check{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:11.5px;color:var(--text-muted);cursor:pointer;}
.pcl-check input{width:15px;height:15px;accent-color:var(--mary);flex-shrink:0;margin:0;cursor:pointer;}
.pcl-check:hover{color:var(--black);}
/* `.pcl-authsep` (le « ou » entre deux filets) est retiré avec le second
   pilote qu'il séparait : plus rien à séparer, et une règle morte se recopie. */
/* 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;}
.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:6px 0 0;}
.pcl-authfoot p a{color:var(--text-muted);font-weight:600;}
/* L'écran d'accès en pleine page. Il n'a ni barre du haut ni barre d'onglets :
   le pied suivait le formulaire et s'arrêtait au milieu de l'écran, 340 px de
   blanc sous lui sur un portable de 900 px, 181 sur un téléphone. En colonne,
   le contenu prend toute la place disponible et le pied tombe au bas de la vue.
   Il n'est pas FIXÉ : sur une fenêtre plus courte que le formulaire, la page
   défile et le pied repasse sous lui, au lieu de le recouvrir. */
.pcl--acces{display:flex;flex-direction:column;}
.pcl--acces .pcl-page{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;
  padding-top:0;padding-bottom:0;}
/* Le haut valait 56 px et le bas 40 : une asymétrie qui ne se voyait pas tant
   que le bloc était posé en haut de la page, et qui décentrerait la carte
   maintenant qu'elle est centrée dans la hauteur. */
.pcl--acces .pcl-auth{padding-block:40px;}
.pcl--acces .pcl-authfoot{flex:none;}

/* ── 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;}
.pcl-formacts .note{font-size:11px;color:var(--text-quiet);}
/* Aide de champ : elle se lit SOUS le champ qu'elle contraint, jamais à côté du
   bouton à deux champs de distance. */
.pcl-aide{font-size:11px;color:var(--text-quiet);margin-top:5px;line-height:1.45;}

/* ── 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:var(--sf-1);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 .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:8px 0;}
.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 à plat, jamais de cartes empilées ── */
/* Les filets sont partis avec ceux des rangées de bureau (11/10/2026) : c'est
   le même geste sur la même liste, vue de l'autre côté du repli. Ce qu'une
   carte apporterait — un cadre, une ombre, un rayon par document — reste
   exclu : la liste se lit au nom, à la date et au montant. */
.pcl-mlist{display:none;}
.pcl-mrow{display:flex;align-items:center;gap:11px;padding:11px 0;}
.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;}
  /* « Quitter » est déjà dans la barre du bas : en haut, il faisait doublon. */
  .pcl-topright .pcl-quitter{display:none;}
  .pcl-id{position:static;gap:11px;padding:10px 0 12px;}
  .pcl-name{font-size:16px;}
  .pcl-key .v{font-size:18px;}
  .pcl-strip,.pcl-strip.c3,.pcl-strip.c2{grid-template-columns:1fr;}
  .pcl-2col{grid-template-columns:1fr;gap:16px;}
  .pcl-rail{border-left:none;border-top:1px solid var(--border);padding:14px 0 0;}
  .pcl-viewer,.pcl-viewer iframe{min-height:320px;}
  .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;min-height:18px;}
  .pcl-line{width:1.5px;height:12px;margin:3px 0 3px 3.75px;}
  /* 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:minmax(0,1fr) auto;align-items:center;column-gap:11px;row-gap:8px;}
  .pcl-tdmain{grid-row:1;grid-column:1/3;}
  .pcl-tdamt{grid-row:2;grid-column:1;justify-self:start;}
  .pcl-tdnote,.pcl-td .btn{grid-row:2;grid-column:2;justify-self:end;white-space:normal;text-align:right;}
  /* Au-dessus de la barre d'onglets fixe (56 px + zone sûre), pas dessus :
     la carte recouvrait les quatre destinations à portée de pouce. */
  .pcl-live{left:12px;right:12px;bottom:calc(68px + env(safe-area-inset-bottom));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:var(--sf-1);border-top:1px solid var(--border);z-index:50;}
  .pcl-tabbar a,.pcl-tabbar .pcl-quitter button{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 .pcl-quitter{flex:1;}
  .pcl-tabbar .pcl-quitter button{width:100%;background:none;border:0;font-family:inherit;cursor:pointer;}
  .pcl-tabbar a.on{color:var(--fg-1);font-weight:600;}
  .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;}

/* Téléphone (audit mobile du 25/09/2026, 375 px). */
@media (max-width:768px){
  /* « Mon espace » (14 px de haut) et les liens du pied de connexion
     (écrire, appeler, confidentialité) : la zone grandit, pas le texte. */
  .pcl-back{min-height:36px;margin-bottom:4px;}
  .pcl-brand{min-height:36px;}
  .pcl-authfoot nav{gap:0 16px;}
  .pcl-authfoot nav a{display:inline-flex;align-items:center;min-height:36px;}
  /* La barre d'onglets n'a que des mots, sans pictogramme : à 10 px ils
     passaient sous le plancher lisible. */
  .pcl-tabbar a,.pcl-tabbar .pcl-quitter button{font-size:12px;min-height:48px;justify-content:center;}
  /* Onglets d'objets : 44 px de cible tactile ; le mot reste en bas
     (`flex-end`), sur son souligné, au lieu de flotter au milieu. */
  .pcl-tab{min-height:44px;}
}

/* ── Tickets de caisse (28/09/2026) ─────────────────────────────────────────
   Un achat retiré du relevé reste dans la liste, pour qu'un retrait par erreur
   se voie et se corrige : son encre recule, son montant est barré parce qu'il
   ne sera pas facturé. Les commandes de ligne sont des mots (`.pcl-word`). */
.pcl tr.pcl-tk-retire td{color:var(--text-quiet);}
.pcl tr.pcl-tk-retire td.t{text-decoration:line-through;}
.pcl-tk-mail{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;}
/* Dans un panneau, le mot-commande prend la taille du texte qu'il suit : il
   héritait de la taille du formulaire et criait plus fort que le titre. */
.pcl-panel .pcl-word{font-size:12.5px;}

/* ── Écran d'application (30/09/2026) ───────────────────────────────────────
   La PAGE ne défile plus : elle tient dans la fenêtre, et ce sont ses volets qui
   défilent, chacun de son côté. En tête, ce qui ne bouge pas (barre, bandeau
   d'identité, frise, propriétés) ; dessous, la colonne large et le rail. Une
   facture de quarante lignes ne pousse plus le bouton « Payer » hors de l'écran,
   et l'aperçu du document prend toute la hauteur au lieu de 460 px fixes.
   `.pcl-main` défile en bloc ; `.pcl-main--onglets` garde sa ligne d'onglets en
   place et fait défiler le seul panneau ouvert.
   Deux bornes : sous 861 px de large, la mise en page téléphone reprend (une
   colonne, la page défile) ; sous 560 px de haut, l'en-tête mangerait les volets,
   et la page défile à nouveau. `.pcl--app` n'est posé que sur les pages
   connectées : l'écran d'accès garde son flux. */
@media (min-width:861px) and (min-height:560px){
  .pcl--app{height:100vh;height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
  .pcl--app .pcl-top{position:static;flex:none;}
  .pcl--app .pcl-page{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;padding-bottom:0;}
  .pcl--app .pcl-page > *{flex:none;}
  .pcl--app .pcl-id{position:static;}
  .pcl--app .pcl-page > .pcl-2col,
  .pcl--app .pcl-page > .pcl-main{flex:1;min-height:0;}
  .pcl--app .pcl-2col{align-items:stretch;}
  /* Les volets s'élargissent de 6 px de chaque côté, et reprennent autant en
     marge : sans quoi le survol des rangées (`margin:0 -6px`) et l'anneau de
     focus seraient rognés au bord de la zone qui défile. */
  .pcl--app .pcl-main,.pcl--app .pcl-rail,
  .pcl--app .pcl-main--onglets > .pcl-tpanel{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
    padding-right:6px;margin-right:-6px;padding-bottom:28px;}
  .pcl--app .pcl-main,.pcl--app .pcl-main--onglets > .pcl-tpanel{padding-left:6px;margin-left:-6px;}
  .pcl--app .pcl-main--onglets{display:flex;flex-direction:column;overflow:hidden;padding-bottom:0;}
  .pcl--app .pcl-main--onglets > *{flex:none;}
  .pcl--app .pcl-main--onglets > .pcl-tpanel.on{flex:1;min-height:0;}
  .pcl--app .pcl-tpanel > .pcl-viewer{height:100%;min-height:360px;}
  .pcl--app .pcl-tpanel > .pcl-viewer iframe{min-height:0;}
  .pcl--app .pcl-main--onglets > .pcl-tpanel:has(> .pcl-viewer){padding-bottom:14px;}
  /* Dans un volet qui défile, l'en-tête de colonnes reste en haut : à la
     trentième ligne, « P.U. HT » et « TVA » ne se devinent plus. */
  .pcl--app thead th{position:sticky;top:0;z-index:1;background:var(--sf-1);}
  html.dark-mode .pcl--app thead th{background:#0f0f11;}
}