/* Copyright (c) 2026 Weiwei CHEN — TrustOR / Praetor0. All rights reserved. */
/* C4-01 — « En ce moment ». Feuille DERIVEE de la maquette versionnee :
   docs/compliance/maquettes/C4-01-la-page-part-du-produit.html (sha256 4a4a2a9b…4a02).
   Les regles sont celles de la maquette, a l'octet, moins les panneaux non livres
   (onglet Releves = C4-04) et le chrome propre a la maquette.

   ⚠️ IL N'Y A PAS D'ONGLET « REFERENTIELS », et il n'y en aura pas : l'ancrage
   a change de cote le 04/09, l'ecran part de NOS MESURES. C4-02 a livre les
   articles de loi DANS le dossier de preuve de chaque mesure — voir le bloc
   `.art` plus bas.

   TROIS ECARTS ASSUMES, chacun avec sa raison — la garde de fidelite les nomme :

   (1) TOUT EST PORTE SOUS `.cmp-now`. La maquette declare des classes nues
       (`.ok`, `.st`, `.btn`, `.sub`, `.mono`…) ; une feuille de console ne peut pas
       les poser globalement. Ce n'est pas une invention : `compliance-report.css`
       porte 273/273 de ses regles sous `.cmp*` — la convention du depot est absolue.
   (2) `--cmp-ok/pa/ko` SONT REDECLARES ici. Le brief les disait deja disponibles ;
       ils vivaient sur `.cmp-page` dans `compliance-report.css` — le fichier que ce
       lot supprime. Sans cette redeclaration, les trois couleurs d'etat n'existent
       plus nulle part. Les `--el-*` NE sont PAS redeclares : ils vivent dans
       `css/design-tokens.css` (charge ligne 11 du template), valeurs identiques.
   (3) `@keyframes beat` devient `cmp-now-beat` — un nom d'animation est global,
       `beat` est trop generique pour etre pose par une page.

   (5) LES TAILLES DE TEXTE SONT CELLES DE LA CONSOLE, PAS DE LA MAQUETTE.
       La maquette descend a 10.5px ; la console tient un plancher de lisibilite
       (`test_ihm_lisibilite_texte_3.py`) : 13px pour le corps, 12px reserve aux
       CAPITALES. C'est une contrainte d'accessibilite, pas une preference de
       densite — un fichier HTML autonome ne pouvait pas la connaitre. Chaque
       regle sous le plancher a ete remontee a SON plancher : 12px si elle porte
       `text-transform: uppercase`, 13px sinon. La densite de la maquette cede,
       la lisibilite gagne.

   Ce que la maquette porte et que la console possede deja (NON repris ici) :
   `.p0-tab*`, `.id-drawer-*`, `.ta-panel*` (sidebar.css) et l'en-tete `.ph`
   (PageHeader.render). */

.cmp-now {
  /* Les trois etats d'une mesure. Memes valeurs que la maquette et que
     l'ancien compliance-report.css:42-44 — aucune derive de teinte. */
  --cmp-ok: #7fc39b;
  --cmp-pa: #e0b062;
  --cmp-ko: #e08585;
}

@keyframes cmp-now-beat {0%{box-shadow:0 0 0 0 rgba(127,195,155,.55)}70%{box-shadow:0 0 0 7px rgba(127,195,155,0)}100%{box-shadow:0 0 0 0 rgba(127,195,155,0)}}
.cmp-now .pane {display:none}
.cmp-now .pane.on {display:block}

/* ── LA PAGE ─────────────────────────────────────────────────────────── */
@keyframes cmp-now-beat {0%{box-shadow:0 0 0 0 rgba(127,195,155,.55)}70%{box-shadow:0 0 0 7px rgba(127,195,155,0)}100%{box-shadow:0 0 0 0 rgba(127,195,155,0)}}
.cmp-now .pane {display:none}
.cmp-now .pane.on {display:block}
.cmp-now .pulse { /* 5 cases, pas 7 — ecart (1) nomme dans la garde de fidelite */ margin:16px 24px 0;padding:12px 16px;background:var(--el-ink-well);border:1px solid var(--el-ink-line);border-radius:10px;display:grid;grid-template-columns:repeat(5,1fr);gap:0;font-size:13px}
.cmp-now .pulse>div {padding:2px 12px;border-left:1px solid var(--el-ink-line);display:flex;flex-direction:column;gap:2px}
.cmp-now .pulse>div:first-child {border-left:0;padding-left:0}
.cmp-now .pulse .sub {margin:0}
.cmp-now .pulse .dot {display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cmp-ok);animation:cmp-now-beat 2s infinite;margin-right:8px;vertical-align:middle}
.cmp-now .pulse b {color:var(--el-ink-white);font-family:var(--el-font-title);font-weight:800;font-size:16px;line-height:1.2;font-variant-numeric:tabular-nums}
.cmp-now .pulse .k {font-family:var(--el-font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--el-ink-text-3)}
.cmp-now .cmp-hero {display:grid;grid-template-columns:repeat(4,1fr);align-items:stretch;gap:12px;padding:14px 24px 0}
.cmp-now .cmp-kpi {background:var(--el-ink-surface);border:1px solid var(--el-ink-line);border-radius:10px;padding:14px 16px}
.cmp-now .cmp-kpi-l {display:block;font-family:var(--el-font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--el-ink-text-3)}
.cmp-now .cmp-kpi-n {display:block;font-family:var(--el-font-title);font-weight:800;font-size:30px;line-height:1.05;margin-top:8px;color:var(--el-ink-white)}
.cmp-now .cmp-kpi-n small {font-size:14px;font-weight:700;margin-left:6px}
.cmp-now .cmp-kpi-d {display:block;font-size:13px;color:var(--el-ink-text-3);margin-top:5px}
.cmp-now .up {color:var(--cmp-ok)}
.cmp-now .dn {color:var(--cmp-ko)}
.cmp-now .fl {color:var(--el-ink-text-3)}
.cmp-now .cmp-card {margin:18px 24px;border-radius:var(--el-radius);padding:16px 20px;background:var(--el-ink-panel);border:1px solid var(--el-ink-line);border-left:3px solid var(--el-gold-deep)}
.cmp-now .cmp-grid-t {font-family:var(--el-font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--el-ink-text-3);margin:0 0 10px;display:flex;justify-content:space-between;align-items:baseline}
.cmp-now .cmp-grid-t span {text-transform:none;letter-spacing:0;font-family:var(--el-font-body);font-size:13px}
/* ── C4-05 · « CE QUI A BOUGÉ » : une ligne = un changement d'état ──────────

   SIX COLONNES FIXES, une seule taille de texte par colonne : rien ne s'empile
   dans une cellule. La colonne ÉLASTIQUE (`1fr`) est notre mesure — c'est elle
   qu'on lit, tout le reste est serré autour.

   ⚠️ L'EN-TÊTE ET LES LIGNES PARTAGENT UNE SEULE DÉCLARATION de colonnes. Les
      écrire deux fois les ferait diverger d'un pixel au premier ajustement, et
      un en-tête décalé de ses colonnes est pire que pas d'en-tête. C'est aussi
      pourquoi ces deux blocs sont des GRILLES et non des `<table>` :
      `.cmp-table` est partagé avec trois autres blocs de la page. */
.cmp-now .hd {display:grid;gap:0 14px;padding:0 0 8px 10px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--el-ink-text-3);border-bottom:1px solid var(--el-ink-line)}
.cmp-now .hd span.r {text-align:right}
.cmp-now .mv, .cmp-now .hd.mv-h {grid-template-columns:112px 1fr 200px 64px 14px 64px}
.cmp-now .mv {display:grid;gap:0 14px;align-items:center;min-height:40px;padding:4px 0 4px 10px;border-left:2px solid transparent}
.cmp-now .mv + .mv {border-top:1px solid var(--el-ink-line)}
.cmp-now .mv[data-sens="up"] {border-left-color:var(--cmp-ok)}
.cmp-now .mv[data-sens="down"] {border-left-color:var(--cmp-ko)}
.cmp-now .mv[data-sens="ks"] {border-left-color:var(--el-ink-text-3)}
.cmp-now .when {font-family:var(--el-font-mono);font-size:13px;color:var(--el-ink-text-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.cmp-now .qual {font-size:13px;color:var(--el-ink-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-now .mv[data-sens="up"] .qual {color:var(--cmp-ok)}
.cmp-now .mv[data-sens="down"] .qual {color:var(--cmp-ko)}
.cmp-now .mv[data-sens="ks"] .qual {color:var(--el-ink-text-3)}
.cmp-now .qual .rep {font-family:var(--el-font-mono);font-size:13px;color:var(--el-ink-text-3);margin-left:6px}
.cmp-now .arr {font-size:13px;color:var(--el-ink-text-3);text-align:center}
.cmp-now .n {font-family:var(--el-font-mono);font-size:13px;font-variant-numeric:tabular-nums}
.cmp-now .n.r {text-align:right}
.cmp-now .n.ok {color:var(--cmp-ok)}
.cmp-now .n.ko {color:var(--cmp-ko)}
.cmp-now .n.pa {color:var(--cmp-pa)}
.cmp-now .n.ks {color:var(--el-ink-text-3)}
.cmp-now .quiet {padding:10px 0 2px 10px;font-size:13px;color:var(--el-ink-text-3);border-top:1px solid var(--el-ink-line);margin:0}
.cmp-now .quiet b {color:var(--el-ink-text-2);font-weight:500}

/* L'or est réservé à l'autorité, la sélection et l'interaction TRANSITOIRE.
   Au repos ces liens prennent l'encre secondaire ; l'or arrive au survol, où
   il est de l'affordance. */
.cmp-now .mv .ev, .cmp-now .lnk {color:var(--el-ink-text-2);font-size:13px;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cmp-now .mv a.ev:hover, .cmp-now .lnk:hover {color:var(--el-gold-light);text-decoration:underline}

/* ── T8-E · « CE QUI TRAÎNE » : une ligne = une MESURE en défaut ─────────────

   QUATRE COLONNES, PLUS SIX. `gravité` et `agir` ont disparu avec le tiroir
   d'écart : la première n'a plus de domicile (aucune mesure, aucun rattachement
   ne porte de criticité — dette `REMEDIATION-SANS-DOMICILE-1`), le second
   ouvrait un tiroir qui faisait doublon avec celui de la mesure. La colonne
   « écart » (l'intitulé du contrôle) est devenue « écarts » (leur compte), et
   « article » est devenue « ce qui reste sans preuve ». */
.cmp-now .gp, .cmp-now .hd.gp-h {grid-template-columns:60px minmax(0,1fr) 96px minmax(0,1.15fr)}
.cmp-now .gp {display:grid;gap:0 14px;align-items:center;min-height:40px;padding:4px 0 4px 10px;border-left:2px solid transparent}
.cmp-now .gp + .gp {border-top:1px solid var(--el-ink-line)}
.cmp-now .gp:hover {background:var(--el-ink-action-hover)}
.cmp-now .age {font-family:var(--el-font-mono);font-size:13px;color:var(--el-ink-white);font-variant-numeric:tabular-nums;white-space:nowrap}
.cmp-now .age.unk {color:var(--el-ink-text-3)}
.cmp-now .age.old {color:var(--cmp-pa)}
.cmp-now .ecart {min-width:0;font-size:13px;white-space:nowrap}
.cmp-now .mes {font-size:13px;color:var(--el-ink-white);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cmp-now .gp:hover a.mes {color:var(--el-gold-light);text-decoration:underline}
/* ── « CE QUI RESTE SANS PREUVE » ────────────────────────────────────────────

   ⚠️ `.spv`, ET SURTOUT PAS `.art`. Cette feuille porte DÉJÀ deux règles
   `.cmp-now .art` de sens différents — la colonne de la grille (ici) et le bloc
   d'article du tiroir (plus bas, avec son `padding` et sa bordure). La seconde
   gagne sur la première par simple ordre de cascade. Y ajouter un troisième
   usage, cette fois un `<details>`, ferait hériter la cellule d'un padding et
   d'une bordure pensés pour un tout autre contexte. */
.cmp-now .spv {font-family:var(--el-font-mono);font-size:13px;color:var(--el-ink-text-3);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-now details.spv {white-space:normal}
.cmp-now details.spv>summary {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;list-style:none}
.cmp-now details.spv>summary::-webkit-details-marker {display:none}
.cmp-now .spv-r {display:block;padding-top:3px}
/* Au-delà de huit, le reste attend d'être demandé — et se déplie EN PLACE. */
.cmp-now .gp.plus {display:none}
.cmp-now #cmpn-traine.tout .gp.plus {display:grid}
.cmp-now .more {padding:10px 0 2px 10px;font-size:13px;margin:0}
.cmp-now .more a {color:var(--el-ink-text-2);text-decoration:none;border-bottom:1px solid var(--el-ink-line)}
.cmp-now .more a:hover {color:var(--el-gold-light);border-bottom-color:var(--el-gold-light)}

/* ── C4-05 · LE VIVANT ───────────────────────────────────────────────────────

   Trois animations, une seule règle : elles ne jouent QUE si les données ont
   changé. La mémoire est côté JS (`_CMPN.filVus` / `_CMPN.traineVus`) — vide au
   premier rendu, donc la page n'arrive pas en clignotant.

   `.flash` est le SEUL or de ces deux blocs : il marque le nombre qui vient de
   bouger, une fois, 1,5 s. C'est un score qui change sous les yeux du lecteur,
   pas une décoration au repos — et il s'éteint tout seul. */
.cmp-now .mv.new {animation:cmpn-arrive 2.2s ease-out}
@keyframes cmpn-arrive {
  0%   {background:var(--el-gold-glow);transform:translateY(-10px);opacity:0}
  25%  {opacity:1;transform:none}
  100% {background:transparent}
}
/* ⚠️ LA COULEUR EST POSÉE SUR LA RÈGLE, PAS DANS LE `@keyframes`. Écrite dans
   l'image-clé, elle porterait pour sélecteur le pas d'animation (« 0% ») — un
   nom qui n'apprend rien à la garde de l'or, et qui obligerait à l'autoriser
   par un motif si large qu'il couvrirait n'importe quelle animation de la
   feuille. Sur la règle, l'autorisation nomme ce qu'elle autorise. */
.cmp-now .n.flash {--cmpn-ring:var(--el-gold-light);animation:cmpn-ring 1.5s ease-out}
@keyframes cmpn-ring {
  0%   {box-shadow:0 0 0 3px var(--cmpn-ring);border-radius:3px}
  100% {box-shadow:0 0 0 0 transparent}
}
.cmp-now .gp.gone {animation:cmpn-close 1.8s ease-in forwards}
.cmp-now .gp.gone .ecart {color:var(--cmp-ok)}
@keyframes cmpn-close {
  0%   {background:rgba(127, 195, 155, .12)}
  60%  {background:rgba(127, 195, 155, .12);opacity:1}
  100% {opacity:0;min-height:0;height:0;border-top-width:0;overflow:hidden}
}
@media (prefers-reduced-motion:reduce) {
  .cmp-now .mv.new, .cmp-now .n.flash, .cmp-now .gp.gone {animation:none}
}

.cmp-now .cmp-table {width:100%;border-collapse:collapse;font-size:13px}
.cmp-now .cmp-table th {text-align:left;font-family:var(--el-font-title);font-weight:700;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--el-ink-text-3);padding:8px 10px;border-bottom:1px solid var(--el-ink-line)}
.cmp-now .cmp-table td {padding:10px;border-bottom:1px solid var(--el-ink-line);vertical-align:top}
.cmp-now .cmp-table tr:hover td {background:var(--el-ink-action-hover)}
.cmp-now .cmp-table tr.sel td {background:var(--el-gold-glow)}
.cmp-now .mono {font-family:var(--el-font-mono);font-size:13px}
.cmp-now .cmp-meas-val {font-family:var(--el-font-mono);font-size:14px;color:var(--el-ink-white);font-weight:600}
.cmp-now .ok {color:var(--cmp-ok)}
.cmp-now .pa {color:var(--cmp-pa)}
.cmp-now .ko {color:var(--cmp-ko)}
.cmp-now .sub {display:block;font-size:13px;color:var(--el-ink-text-3);margin-top:3px}
.cmp-now .age {font-family:var(--el-font-mono);font-size:13px}
.cmp-now .age.old {color:var(--cmp-ko);font-weight:600}
.cmp-now .btn {display:inline-block;font-weight:600;font-size:13px;color:var(--el-ink-white);background:var(--el-ink-surface-2);border:1px solid var(--el-ink-line);border-radius:8px;padding:4px 11px;text-decoration:none;white-space:nowrap;margin:2px 4px 2px 0;cursor:pointer}
/* `.btn.gold` RETIRÉ : la maquette dorait « agir », mais ce bouton ouvre un
   tiroir — c'est de la navigation, pas un acte qui engage. L'or se réserve
   aux actes d'autorité (sceller, mandater, rejouer). */
.cmp-now .btn.sm {font-size:13px;padding:2px 8px}
.cmp-now .pill {display:inline-block;font-family:var(--el-font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:999px;border:1px solid}
.cmp-now .pill.ok {border-color:rgba(127,195,155,.5);background:rgba(127,195,155,.07);color:var(--cmp-ok)}
.cmp-now .pill.rf {border-color:rgba(224,133,133,.5);background:rgba(224,133,133,.07);color:var(--cmp-ko)}
.cmp-now .pill.ks {border-color:var(--el-ink-line);background:var(--el-ink-well);color:var(--el-ink-text-3)}
.cmp-now .pill.pa {border-color:rgba(224,176,98,.5);background:rgba(224,176,98,.07);color:var(--cmp-pa)}
.cmp-now .q {font-style:italic;color:var(--el-ink-text-2);font-size:13px}
.cmp-now .q::before {content:"« "}
.cmp-now .q::after {content:" »"}
.cmp-now .dsec {margin:0 0 22px}
.cmp-now .dsec h4 {font-family:var(--el-font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--el-ink-text-3);margin:0 0 8px;font-weight:500;padding-bottom:6px;border-bottom:1px solid var(--el-ink-line)}
.cmp-now .kv {display:grid;grid-template-columns:118px 1fr;gap:6px 12px;font-size:13px;align-items:baseline}
.cmp-now .kv>* {min-width:0}
.cmp-now .kv b {color:var(--el-ink-text-3);font-weight:500}
.cmp-now .ev {color:inherit;text-decoration:none;border-bottom:1px dotted var(--el-ink-text-3)}
.cmp-now .ev:hover {color:var(--el-gold-light);border-bottom-color:var(--el-gold-light)}
.cmp-now .dh {display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--el-ink-line);background:var(--el-ink-panel);border-radius:10px 10px 0 0}
.cmp-now .dg {display:grid;grid-template-columns:1fr;gap:0;font-size:13px}
.cmp-now .dg .dk {padding:14px 0 4px !important;border-bottom:0 !important}
.cmp-now .dg>div:not(.dk) {padding:0 0 12px !important;border-bottom:1px solid var(--el-ink-line)}
.cmp-now .dg .cmp-table {table-layout:auto;font-size:13px}
.cmp-now .dg .cmp-table td {padding:6px 6px}
.cmp-now .dg .res {flex-wrap:wrap}
.cmp-now .dg>div {min-width:0}
.cmp-now .dg>div:nth-last-child(-n+2) {border-bottom:0}
.cmp-now .dk {font-family:var(--el-font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--el-ink-text-3);padding-top:11px !important}
.cmp-now .w {color:var(--el-ink-white)}
.cmp-now .sql {font-family:var(--el-font-mono);font-size:13px;line-height:1.5;color:var(--el-ink-text);background:var(--el-ink-well);border:1px solid var(--el-ink-line);border-radius:6px;padding:8px 10px;margin:0 0 4px;white-space:pre-wrap}
.cmp-now .res {display:flex;gap:18px;font-family:var(--el-font-title);font-weight:700;font-size:13px;margin-bottom:6px}
.cmp-now .cmp-table.tight td {padding:8px 10px;font-size:13px}
.cmp-now .cmp-table.tight th {padding:4px 8px;font-size:13px}
.cmp-now .cmp-table.live td {padding:8px 10px}
.cmp-now .cmp-table.live .month {padding:10px 8px 4px;font-size:13px}
.cmp-now .cmp-table.live .monthc {padding:0}
.cmp-now .st {display:inline-block;width:8px;height:8px;border-radius:50%}
.cmp-now .st.ok {background:var(--cmp-ok)}
.cmp-now .st.pa {background:var(--cmp-pa)}
.cmp-now .st.ko {background:var(--cmp-ko)}
.cmp-now .st.rf {background:var(--cmp-ko)}
.cmp-now .st.ks {background:var(--el-ink-text-3)}
.cmp-now details.fam {border:1px solid var(--el-ink-line);border-radius:8px;margin:8px 0;background:var(--el-ink-surface)}
.cmp-now details.fam summary {list-style:none;cursor:pointer;display:grid;grid-template-columns:14px 200px 34px 1fr 300px 28px;align-items:center;gap:0 10px;padding:12px 10px}
.cmp-now details.fam summary .st {justify-self:center}
.cmp-now details.fam summary::before {content:"▸";color:var(--el-ink-text-3)}
.cmp-now details.fam[open] summary::before {content:"▾"}
.cmp-now details.fam .fn {font-family:var(--el-font-title);font-weight:700;color:var(--el-ink-white);font-size:14px}
.cmp-now details.fam .fs {font-size:13px;color:var(--el-ink-text-3)}
.cmp-now details.fam .fe {font-size:13px;color:var(--el-ink-text-2);text-align:right;font-variant-numeric:tabular-nums}
.cmp-now details.fam table {margin:0 0 4px;border-top:1px solid var(--el-ink-line)}
.cmp-now .cmp-table.live {table-layout:fixed}
.cmp-now details.fam .cmp-table th {padding:6px 10px;font-size:13px;background:transparent;color:var(--el-ink-text-3);opacity:.8}
.cmp-now details.fam summary:focus {outline:none}
.cmp-now .cmp-card {overflow-x:auto}
.cmp-now .cmp-table {table-layout:fixed}
.cmp-now .cmp-table th, .cmp-now .cmp-table td {vertical-align:top;text-align:left}
.cmp-now .cmp-table th {padding:8px 10px 6px}
.cmp-now .cmp-table td {padding:10px}
.cmp-now .cmp-table .mono, .cmp-now .cmp-meas-val, .cmp-now .age {font-variant-numeric:tabular-nums}
.cmp-now .cmp-table.live td:nth-child(2), .cmp-now .cmp-table.live th:nth-child(2) {text-align:left}
.cmp-now .cmp-table td:last-child {text-align:right}
.cmp-now .cmp-table td:last-child .btn {margin-right:0}
.cmp-now .cmp-table.live td:last-child {text-align:center}
.cmp-now .cmp-foot {margin:18px 24px 40px;padding:14px 20px;border:1px solid var(--el-ink-line);border-radius:var(--el-radius);color:var(--el-ink-text-2);font-size:13px;line-height:1.6}
.cmp-now .cmp-foot b {color:var(--el-ink-white);font-family:var(--el-font-title)}

/* ── C4-02 bis · L'ONGLET « REFERENTIELS » ────────────────────────────────
   La barre d'onglets vient de `sidebar.css` (`.p0-tabs` / `.p0-tab`) : on ne
   redefinit rien, on la place seulement dans la gouttiere de la page.

   Le `summary` d'un recueil n'a PAS de pastille : `.fam` en reserve la 6e
   colonne, et un recueil n'a pas d'etat a montrer — nos rattachements sont des
   propositions, pas un verdict. On retire donc la colonne plutot que de laisser
   28 px de vide a droite. */
.cmp-now #cmpn-tabs {margin:16px 24px 0}
.cmp-now details.fam.reft summary {grid-template-columns:14px 220px 34px 1fr 320px}
.cmp-now .bar {display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.cmp-now .btn.sel {border-color:var(--el-gold-deep);color:var(--el-ink-white)}
.cmp-now .cmp-table.reft {table-layout:fixed}
.cmp-now .cmp-table.reft td {vertical-align:top}
.cmp-now .cmp-table.reft td:last-child {text-align:left}
.cmp-now .cmp-table.reft tr.rowa {cursor:pointer}
.cmp-now .ah {color:var(--el-ink-white);font-size:13px;margin-bottom:3px;overflow-wrap:break-word}
.cmp-now .qt {margin:0 0 3px;overflow-wrap:break-word}
/* Nos mesures en face : une ligne par mesure, le nom a gauche, la valeur du
   jour et le statut du rapprochement a droite. */
.cmp-now .dm {display:flex;flex-direction:column;gap:6px}
.cmp-now .mp {display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-size:13px}
/* ⚠️ `.cmp-now .mp .mv` RETIREE ICI (C4-02 quater). Elle poussait a droite le
   resultat du jour du TIROIR, seul `.mv` qui ait jamais vecu dans un `.mp`.
   C4-05 ayant pris `.mv` pour ses lignes « Ce qui a bouge » — et en ayant fait
   une grille de six colonnes — le tiroir a renomme le sien `.mpv` (§1.130,
   comme `.bar`→`.mbar` et `.live`→`.bat` plus bas). Plus aucun `.mv` n'existe
   dans un `.mp` : la regle ne rencontrait plus rien, et une regle morte est un
   faux indice pour qui lit la feuille (garde (f2) de C4-01 bis). */
.cmp-now .mp .ev {overflow-wrap:break-word}
/* C4-03 — l'acte du client. UNE enveloppe, parce que la meme fonction
   (`_cmpnLigneActe`) sert deux mises en page : `.a3` du dossier de preuve, qui
   est un bloc, et `.mp` de l'onglet, qui est un flex. Sans elle, les `.sub`
   (`display:block`) deviendraient des items flex et le motif se poserait a cote
   du statut au lieu d'etre dessous. `width:100%` la met sur sa propre ligne
   dans `.mp`, sous le nom de la mesure et sa valeur du jour. */
.cmp-now .ac {display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;width:100%}
.cmp-now .ac .sub {margin-top:0;width:100%}

/* ── LES DEUX TIROIRS ────────────────────────────────────────────────
   Le conteneur est le `.ta-panel` de la console (480 px, sidebar.css) — D2(c).
   Ne restent ici que les reglages de CONTENU que la maquette posait sous
   `#drawer .panel`, reportes sur `.cmp-now-drawer`.

   L'aside porte les DEUX classes : `class="ta-panel cmp-now cmp-now-drawer"`.
   `cmp-now` fait porter a son contenu les memes regles que la page (`.dsec`,
   `.dg`, `.kv`, `.sql`, `.cmp-table`…) et lui donne les trois tokens
   `--cmp-*` ; `cmp-now-drawer` ajoute les surcharges propres au tiroir. */
/* ⚠️ DEUX SURCHARGES RETIREES (C4-01 bis, geste (7)).

   `td, th {white-space:normal !important; overflow-wrap:anywhere}` cassait un
   identifiant de quatre-vingts caracteres N'IMPORTE OU et l'empilait sur cinq
   lignes : c'est l'ecran illisible qu'on a constate. Le remede n'etait pas de
   mieux couper — c'etait de ne plus servir la chaine entiere. `_cmpnCourt()`
   raccourcit desormais a la SOURCE, en coupant sur les separateurs qui ont un
   sens (`#`) et en rejoignant par ` · ` — des espaces, ou le retour a la ligne
   mord tout seul. La regle n'a donc plus d'objet, et sans elle les cellules
   reprennent la coupure normale du navigateur.

   `.id-drawer-header` / `.id-drawer-title` : DEUX REGLES MORTES. Ce tiroir est
   un `.ta-panel` (le choix est argumente dans `compliance-now.js`) ; ces deux
   selecteurs ne rencontraient aucun element. Les garder faisait croire, a la
   lecture, que la page utilisait le patron de la maquette.

   Ce qui RESTE, et pourquoi : `.sql` et `.mono` gardent `overflow-wrap:anywhere`
   — une requete SQL et un identifiant de mesure sont des blocs qu'on lit
   VERBATIM, on ne peut ni les raccourcir ni les reformater sans mentir sur ce
   qui a ete execute. Le debordement s'y traite par le retour a la ligne, pas
   par la troncature. */
.cmp-now-drawer * {min-width:0;box-sizing:border-box}
.cmp-now-drawer table {width:100%;table-layout:fixed}
.cmp-now-drawer .cmp-table td:first-child {width:22px}
.cmp-now-drawer .cmp-table td:last-child {width:68px}
/* ⚠️ `white-space:nowrap` RETIRE DE `.lnk` — troisieme surcharge de la meme
   famille que les deux precedentes. Elle tenait un `E-2` sur une ligne, ce qui
   ne coutait rien tant que `overflow-wrap:anywhere` cassait de force ce qui
   depassait. Les deux partis ensemble, elle devenait le VERROU : le sujet
   raccourci se rejoint par ` · ` — des espaces, precisement pour donner au
   navigateur ou revenir a la ligne — et `nowrap` lui interdisait d'y aller.
   Le sujet debordait donc encore du tiroir, raccourci mais sur une seule
   ligne. Constate a la capture, pas au raisonnement. */
.cmp-now-drawer .sql {white-space:pre-wrap !important;overflow-wrap:anywhere;overflow-x:visible}
.cmp-now-drawer .mono {overflow-wrap:anywhere}
.cmp-now-drawer .kv {grid-template-columns:minmax(96px,118px) minmax(0,1fr)}
.cmp-now-drawer .dh {flex-wrap:wrap}
.cmp-now-drawer svg {max-width:100%;height:auto}

/* ── C4-02 quater · LE TIROIR D'ARTICLE TIENT DANS SES 480 px ────────────────

   LE DÉFAUT QUE CE BLOC FERME. `.mp` est partagée par DEUX surfaces : l'onglet
   Référentiels (`_cmpnMesureEnFace`) et le tiroir d'article (`_cmpnOpenArticle`).
   C4-02 ter lui a donné SIX colonnes fixes, dimensionnées pour la plus large :

     132 + 54 + 54 + 54 + 170 = 464 de pistes, + 5 gouttières de 12 = 524 px

   La boîte de contenu du tiroir, elle, vaut 437 px — 480 du panneau, moins sa
   bordure gauche (1) et le padding de `.ta-panel-body` (2 × 20), plus les 8 que
   `.mp` reprend par son `margin-left:-8px`, moins sa bordure (2) et son padding
   gauche (8). Déficit : 87 px. La piste `1fr` du nom tombe donc à ZÉRO et le nom
   de la mesure se rend un mot par ligne. Constaté en staging, pas au raisonnement.

   🔴 POURQUOI `.cmp-now.cmp-now-drawer` ET NON `.cmp-now-drawer` SEUL — NE PAS
   RECOPIER `.kv` ICI. `.cmp-now-drawer .mp` aurait exactement la même
   spécificité que `.cmp-now .mp` (0-2-0 des deux côtés) : c'est alors l'ORDRE
   qui tranche, et `.cmp-now .mp` est déclarée PLUS BAS dans cette feuille. La
   surcharge perdrait — sans conflit, sans avertissement, sans rien qui se voie.
   Le patron voisin `.cmp-now-drawer .kv` ne montre pas le piège parce que SA
   règle de page (`.cmp-now .kv`) est déclarée AVANT lui ; ce n'est pas une
   propriété de la surcharge, c'est un hasard d'ordre. La classe redoublée porte
   la spécificité à 0-3-0 et gagne où qu'elle soit posée. L'aside porte bien les
   deux (`ta-panel cmp-now cmp-now-drawer`, `_cmpnBootstrapDrawer`).

   DEUX COLONNES, PAS SIX (maquette C4-02 quater, panneau B, validée le 06/09) :
     rangée 1 · le nom de la mesure, qui prend tout ce qui reste | son résultat du jour
     rangée 2 · ce que la mesure démontre                        | la décision
   Les trois compteurs de l'onglet ne descendent PAS ici : on vient de l'écran
   qui les porte déjà, les répéter ferait lire deux fois le même fait.

   `grid-column` suffit, sans `grid-row` : `.mpv` et `.sub` sont OPTIONNELS (une
   mesure introuvable, un `demontre` vide), et le placement automatique retombe
   juste dans les quatre cas parce que le curseur a déjà avancé de rangée.

   AUCUN `white-space:nowrap` SUR LA COLONNE DE DROITE, ET C'EST MESURÉ.
   `_cmpnValeur` a trois régimes, dont deux sont des PHRASES : « valeur
   indisponible » vaut ~124 px à 13 px, et une fraction en mono 14/600 comme
   « 12 345 / 12 345 » ~126 px — l'un et l'autre au-delà des 118. Le mot d'acte
   peut porter un identifiant de 24 caractères d'un seul tenant (~151 px). Ils
   S'ENROULENT sur deux lignes ; on n'élargit pas la colonne, qui mangerait
   l'élastique au pire cas (~332 px de boîte quand `max-width:55vw` mord, sous
   ~873 px de fenêtre). `break-word` et NON `anywhere` : `anywhere` casserait un
   mot qui tenait, et la garde (f2) de C4-01 bis ne l'autorise qu'à `.sql`,
   `.mono` et `.ta-panel-version`, qui se lisent verbatim. */
.cmp-now.cmp-now-drawer .mp {grid-template-columns:minmax(0,1fr) 118px;gap:4px 12px;align-items:start;padding:9px 0 9px 8px}
.cmp-now.cmp-now-drawer .mp>.mpn {grid-column:1}
.cmp-now.cmp-now-drawer .mp>.mpv {grid-column:2;justify-self:end;text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:break-word}
.cmp-now.cmp-now-drawer .mp>.sub {grid-column:1;margin-top:0}
/* La décision. `_cmpnLigneActe` (C4-03) rend un `.ac` NU dans le tiroir — pas
   enveloppé de `.acte` comme dans l’onglet — donc les règles `.mp .acte …` ne
   l'atteignent pas, `display:none` sur `.btn` compris : les boutons sont
   VISIBLES EN PERMANENCE ici, et c'est l'arbitrage voulu. Un tiroir est
   l'endroit où l'on vient décider, pas balayer. Rien de C4-03 ne bouge : ni sa
   logique, ni sa permission, ni son `stopPropagation`, ni son vocabulaire. */
.cmp-now.cmp-now-drawer .mp>.ac {grid-column:2;flex-direction:column;align-items:flex-end;gap:4px;text-align:right;overflow-wrap:break-word}
.cmp-now.cmp-now-drawer .mp>.ac .btn {margin:0}

/* La boite du titre. `min-width:0` n'est pas cosmetique : sans lui, un enfant
   de conteneur flex refuse de se reduire sous la taille de son contenu, et le
   `text-overflow:ellipsis` que `sidebar.css` pose sur `.ta-panel-title` ne mord
   jamais. C'est la forme de `trust-dashboard.js`, reprise telle quelle. */
.cmp-now-drawer .cmpn-titre-boite {min-width:0;flex:1}
.cmp-now-drawer .ta-panel-title {margin:0 0 4px;font-size:15px}
.cmp-now-drawer .ta-panel-version {font-family:var(--el-font-mono);font-size:13px;overflow-wrap:anywhere}

/* ── C4-02 · « CE QUE CA PROUVE » — UN ARTICLE, TROIS LIGNES ──────────────
   Pas une table : deux des trois lignes portent des PHRASES (la citation de la
   loi, verbatim, et ce que la mesure en demontre), et le tiroir fait 480 px.

   `overflow-wrap:break-word` et NON `anywhere` — la nuance est celle que
   C4-01 bis a payee. `anywhere` casse n'importe ou, y compris au milieu d'un
   mot qui tenait ; `break-word` ne coupe QUE le mot qui deborderait seul sa
   ligne. Trois identifiants de mesure cites entre accents graves dans la prose
   des sondes depassent 24 caracteres (jusqu'a 31) : ils reviennent a la ligne
   proprement, sans que la citation soit hachee. */
.cmp-now .art {padding:10px 0;border-bottom:1px solid var(--el-ink-line)}
.cmp-now .art:last-child {border-bottom:0}
.cmp-now .art>div {overflow-wrap:break-word}
.cmp-now .art .a1 {color:var(--el-ink-white);font-size:13px;margin-bottom:4px}
.cmp-now .art .a2 {font-size:13px;color:var(--el-ink-text-2);line-height:1.55}
.cmp-now .art .a3 {font-size:13px;margin-top:4px}
.cmp-now .art-tete {display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.cmp-now .art-tete .sub {margin-top:0}

/* ── C4-06 · LE REPLI DU § 6 — une divulgation NUE, jamais une grille ───────

   Quand on ouvre une mesure DEPUIS une exigence, celle-ci passe devant et les
   autres se replient. `details.fam` existe deja pour replier — mais c'est la
   grille a cinq pistes de l'onglet Referentiels (14px + 220px + 34px + 1fr +
   320px) : ses 220px de nom ecraseraient cette ligne dans les 437px du tiroir,
   qui est exactement le defaut que C4-02 quater a paye. On reprend donc son
   SEUL geste reutilisable — le chevron ▸/▾ et la suppression du marqueur natif
   — et pas sa mise en page.

   13px : le plancher de la console est 12px, et le barreau 12px n'est ouvert
   qu'aux capitales (garde f2 de C4-05). Cette ligne est de la prose. */
.cmp-now details.s6 {margin:6px 0}
.cmp-now details.s6 summary {list-style:none;cursor:pointer;font-size:13px;color:var(--el-ink-text-3);padding:6px 0}
.cmp-now details.s6 summary::before {content:"▸ ";color:var(--el-ink-text-3)}
.cmp-now details.s6[open] summary::before {content:"▾ "}
.cmp-now details.s6 summary:focus {outline:none}

/* L'en-tete de resultat du dossier de preuve (geste (8)). */
.cmp-now-drawer .dh {margin:0 0 16px}
.cmp-now-drawer .dh .cmp-meas-val {font-size:20px}

/* ── LES TROIS LARGEURS ───────────────────────────────────────────────────
   `sidebar.css` plafonne DEJA le panneau lui-meme (55vw sous 1100px, plein
   ecran sous 680px) — rien a redire la-dessus. Ce qui manquait, c'est le
   CONTENU : sous ~900px de fenetre le tiroir tombe a ~495px, et la grille
   `kv` a colonne fixe de 118px y laisse moins de la moitie a la valeur.
   On passe alors la cle AU-DESSUS de sa valeur, ce qui rend la colonne
   entiere a la lecture. Meme geste pour l'en-tete de resultat, qui cesse
   d'aligner trois blocs sur une ligne trop courte. */
@media (max-width: 900px) {
  .cmp-now-drawer .kv {grid-template-columns:minmax(0,1fr);gap:2px 0}
  .cmp-now-drawer .kv b {margin-top:8px}
  .cmp-now-drawer .dh {gap:8px 12px}
}
/* ── C4-02 ter · UNE LIGNE PAR ARTICLE, UNE LIGNE PAR MESURE ───────────────
   Derive de `MAQUETTE-C4-02-ter-l-onglet-referentiels.html` (v2, validee le
   05/09 a 21:55). MEME ECART (5) QUE C4-01, ET IL EST STRUCTURANT ICI : la
   maquette descend a 9.5px ; la console tient un plancher de lisibilite
   (`test_ihm_lisibilite_texte_3.py` — rien sous 12px, et 12px UNIQUEMENT si la
   regle porte `text-transform: uppercase`). Chaque taille de la maquette est
   donc remontee a SON plancher : 12px pour les capitales des en-tetes, 13px
   partout ailleurs. Les largeurs de colonnes suivent : les chiffres tiennent en
   46px a 12px, pas a 13px — d'ou 54px. La densite cede, la lisibilite gagne.

   DEUX NOMS CHANGENT PAR RAPPORT A LA MAQUETTE, parce que la feuille les porte
   deja et qu'une console ne peut pas les redefinir sous le nez de leur
   proprietaire (§1.130) :
     · `.bar`  → `.mbar` — `.bar` EST la bande de filtres (l. 186 de ce fichier)
     · `.live` → `.bat`  — `.live` EST un modificateur de table (`.cmp-table.live`)

   L'ETAT D'UNE MESURE EST UN ATTRIBUT, PAS UNE CLASSE. `data-etat` plutot que
   `class="mp pa"` : la garde (c) de C4-02 bis compte les `class="mp"` LITTERAUX
   pour verifier qu'un article a bien ses deux mesures en face. Une seconde
   classe sur `.mp` ferait tomber ce compte a zero, et la garde rougirait sur un
   rendu parfaitement correct. L'attribut porte l'etat sans toucher au compte. */

/* Les colonnes de la table : largeurs par CLASSE, jamais en ligne. Un `%` dans
   un litteral de `compliance-now.js` ferait rougir la garde du pourcentage
   (`test_c4_02_aucun_pourcentage`), qui l'autorise dans la feuille — ou il
   dimensionne, sans rien promettre au client. */
.cmp-now .tw {overflow-x:auto}
.cmp-now .cmp-table.reft {min-width:900px}
.cmp-now .cmp-table.reft col.c-ref {width:130px}
.cmp-now .cmp-table.reft col.c-what {width:34%}
.cmp-now .cmp-table.reft col.c-face {width:auto}
.cmp-now .cmp-table.reft td.what {overflow:hidden}
.cmp-now .cmp-table.reft td.face {padding-top:6px;padding-bottom:6px}
/* ⚠️ PAS D'OR ICI, ET C'EST UNE DOCTRINE, PAS UN GOÛT. L'or dit l'autorité, la
   sélection, le score ou l'interaction TRANSITOIRE — jamais un en-tête au
   repos (`test_console_gold_discipline_guard`). La passe #694 a justement
   retiré l'or de 375 en-têtes : le remettre ici rouvrirait la rechute que la
   garde existe pour fermer. L'emphase se fait au BLANC, qui est le rang que
   la console donne à un titre. */
.cmp-now .cmp-table.reft th.ex-h {color:var(--el-ink-white);vertical-align:bottom}
.cmp-now .cmp-table.reft th.ex-h .cols {display:grid;grid-template-columns:1fr 132px 54px 54px 54px 170px;gap:0 12px;margin-top:4px;font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--el-ink-text-3)}
.cmp-now .cmp-table.reft th.ex-h .cols span {text-align:right}
.cmp-now .cmp-table.reft th.ex-h .cols span:first-child {text-align:left}

/* LA LIGNE FERMEE. `.ah` n'est PAS touchee — elle sert aussi a la demande
   ENTIERE, dans le depli, ou elle doit se replier sur plusieurs lignes. C'est
   `.one .ah` qui coupe, et seulement la. */
.cmp-now .one {display:flex;gap:8px;align-items:baseline;min-width:0}
.cmp-now .one .ah {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;margin-bottom:0}
.cmp-now tr.open .one .ah {white-space:normal}
.cmp-now .tg {color:var(--el-ink-text-3);font-size:13px;line-height:1.2;flex:0 0 12px;user-select:none;text-decoration:none}
.cmp-now .tg:hover {color:var(--el-gold-light)}
.cmp-now .art-more {display:none;margin:10px 0 2px 20px}
.cmp-now tr.open .art-more {display:block}

/* UNE MESURE = UNE LIGNE. Les six colonnes sont FIXES : c'est leur alignement
   d'une mesure a l'autre qui range l'ecran, pas la barre. */
.cmp-now .mp {display:grid;grid-template-columns:1fr 132px 54px 54px 54px 170px;gap:0 12px;align-items:center;padding:5px 0 5px 8px;margin-left:-8px;border-left:2px solid transparent;font-size:13px}
.cmp-now .mp + .mp {border-top:1px solid var(--el-ink-line)}
.cmp-now .mp[data-etat="ok"] {border-left-color:var(--cmp-ok)}
.cmp-now .mp[data-etat="pa"] {border-left-color:var(--cmp-pa)}
.cmp-now .mp[data-etat="ko"] {border-left-color:var(--cmp-ko)}
.cmp-now .mp[data-etat="ks"] {border-left-color:var(--el-ink-text-3)}
.cmp-now .mp .mpn {min-width:0;display:flex;flex-direction:column;line-height:1.35}
.cmp-now .mp .ev {color:var(--el-ink-white);font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
.cmp-now .mp .ev:hover {color:var(--el-gold-light)}
.cmp-now .mp .meta {font-size:13px;color:var(--el-ink-text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.cmp-now .mp .meta .k {color:var(--cmp-ko)}

/* LA BARRE EST MUETTE — les chiffres sont a cote, jamais dedans. Ses segments
   sont des `flex`, donc des NOMBRES : aucune part, aucun rapport. */
.cmp-now .mbar {display:flex;height:5px;border-radius:3px;overflow:hidden;background:var(--el-ink-line)}
.cmp-now .mbar span {transition:flex .6s ease}
.cmp-now .mbar .ok {background:var(--cmp-ok)}
.cmp-now .mbar .pa {background:var(--cmp-pa)}
.cmp-now .mbar .ko {background:var(--cmp-ko)}
.cmp-now .mbar.chg {animation:cmp-now-flash 1.5s ease-out}
@keyframes cmp-now-flash {0% {box-shadow:0 0 0 3px var(--el-gold-light)} 100% {box-shadow:0 0 0 0 transparent}}

.cmp-now .mp .n {font-family:var(--el-font-mono);font-size:13px;text-align:right;font-variant-numeric:tabular-nums;color:var(--el-ink-text-3)}
.cmp-now .mp .n.ok {color:var(--cmp-ok)}
.cmp-now .mp .n.pa {color:var(--cmp-pa)}
.cmp-now .mp .n.ko {color:var(--cmp-ko)}
.cmp-now .mp .n.t {color:var(--el-ink-white)}
/* La couleur du delta vient de `.up`/`.dn`, les MÊMES que la tendance à 7 j
   de la colonne voisine (§1.130) — jamais une troisième convention de flèche. */
.cmp-now .mp .n .d {display:block;font-size:13px;line-height:1.1;margin-top:2px}

/* VOTRE DECISION. Au repos un MOT ; les boutons ne sortent qu'au survol de LA
   MESURE — la ou l'acte se pose. Sans droit, `_cmpnLigneActe` ne rend aucun
   bouton et le mot reste seul : rien ne clignote sous une main qui ne peut pas. */
.cmp-now .mp .acte {font-size:13px;color:var(--el-ink-text-3);min-height:22px}
.cmp-now .mp .acte .ac {display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.cmp-now .mp .acte .sub {font-size:13px;margin-top:0;text-align:right}
/* Le mot cède la place aux boutons quand la main arrive sur LA MESURE — deux
   états d'une même cellule, en feuille : `_cmpnLigneActe` (C4-03) rend les deux
   d'un bloc, et sa logique n'est pas notre affaire. */
.cmp-now .mp .acte .btn {display:none}
.cmp-now .mp:hover .acte .btn {display:inline-block}
.cmp-now .mp:hover .acte .ac > .fl {display:none}

/* LE TEMPS, ECRIT. Le seul mouvement continu de la page — et il ne dit rien de
   plus que « la mesure tourne ». Tout le reste ne bouge QUE si un chiffre a bouge. */
.cmp-now .liveline {display:flex;align-items:center;gap:8px;margin:10px 24px 0;font-size:13px;color:var(--el-ink-text-2)}
.cmp-now .liveline .mono {font-family:var(--el-font-mono);color:var(--el-ink-white)}
/* C4-12 — le bouton « Recalculer maintenant » DÉSARMÉ pendant son propre appel.
   `aria-disabled` porte l'état pour les lecteurs d'écran ; `pointer-events:none`
   l'empêche d'être re-cliqué. Ce n'est PAS le bouton grisé d'un manque de droit
   — celui-là n'est jamais rendu (cf. `_cmpnBoutonRecalcul`) — c'est une action
   en vol, qui a le droit de se voir. */
.cmp-now .liveline .btn[aria-disabled="true"] {opacity:.55;pointer-events:none;cursor:default}
.cmp-now .bat {width:7px;height:7px;border-radius:50%;background:var(--cmp-ok);animation:cmp-now-bat 2s infinite}
@keyframes cmp-now-bat {0% {box-shadow:0 0 0 0 rgba(95,191,134,.5)} 70% {box-shadow:0 0 0 7px rgba(95,191,134,0)} 100% {box-shadow:0 0 0 0 rgba(95,191,134,0)}}


@media (prefers-reduced-motion:reduce) {
  .cmp-now .bat, .cmp-now .mbar.chg {animation:none}
  .cmp-now .mbar span {transition:none}
}
.cmp-now .cmp-table.reft .dm {gap:0}
.cmp-now .mbar .ks {background:var(--el-ink-text-3)}
.cmp-now .mp .meta .nm {color:var(--el-ink-text-3)}