:root {
  /* EEM brand → Web Awesome brand tokens (navy = primary action) */
  --wa-color-brand-fill-loud: #004567;
  --wa-color-brand-fill-normal: #00608c;
  --wa-color-brand-fill-quiet: #e7f3f9;
  --wa-color-brand-border-loud: #004567;
  --wa-color-brand-border-normal: #75bcdc;
  --wa-color-brand-on-loud: #ffffff;
  --wa-color-brand-on-normal: #ffffff;
  --wa-color-brand-on-quiet: #004567;
  /* EEM palette — five brand colors + neutrals */
  --eem-deep: #004567;       /* navy: primary accent — titles, buttons, links, active */
  --eem-sky: #75bcdc;        /* sky: accent */
  --eem-sky-soft: #e7f3f9;   /* sky as a light fill tier (washes, tints, tags) */
  --eem-green: #347d2e;      /* green: sparing accent — logo, ENV, Terminé */
  --eem-green-soft: #eef6ec; /* lightened so green text on it clears AA (≥4.5:1) */
  --eem-amber: #8a5a0f;      /* status: En cours — darkened for AA on white (≈5.3:1) */
  --eem-amber-soft: #f7edda;
  --eem-red: #c0392b;        /* status: Échec */
  --eem-red-soft: #f8e9e7;
  /* domains map onto brand: ENV = green, SST = sky */
  --eem-env: #347d2e;
  --eem-env-soft: #eef6ec;
  --eem-sst: #004567;
  --eem-sst-soft: #e7f3f9;
  /* Une teinte par juridiction. Le texte de chaque pastille franchit 4.5:1 sur
     son propre fond (mesuré : de 4.58 à 5.97), et le code écrit dessus porte
     l'information : la couleur ne fait que la renforcer. */
  --eem-jur-fed: #256b9d;  --eem-jur-fed-soft: #d9e9f5;
  --eem-jur-qc: #267382;   --eem-jur-qc-soft: #daeff3;
  --eem-jur-on: #287767;   --eem-jur-on-soft: #dbf2ee;
  --eem-jur-bc: #2d7645;   --eem-jur-bc-soft: #dcf1e3;
  --eem-jur-ab: #45762d;   --eem-jur-ab-soft: #e3f1dc;
  --eem-jur-sk: #7e6720;   --eem-jur-sk-soft: #f5eed9;
  --eem-jur-mb: #975526;   --eem-jur-mb-soft: #f5e4d9;
  --eem-jur-nb: #a63a30;   --eem-jur-nb-soft: #f3dcda;
  --eem-jur-ns: #9b3b63;   --eem-jur-ns-soft: #f1dce5;
  --eem-jur-pe: #914691;   --eem-jur-pe-soft: #efdfef;
  --eem-jur-nl: #604096;   --eem-jur-nl-soft: #e4def0;
  --eem-jur-nu: #465591;   --eem-jur-nu-soft: #dfe2ef;
  /* neutrals */
  --eem-app-bg: #ffffff;     /* solid white body canvas — depth via shadows + borders */
  --eem-card: #ffffff;
  --eem-border: #c2ccd6;     /* card/table edges — a touch stronger for definition on white */
  --eem-shadow: 0 1px 2px rgba(20, 34, 43, .07), 0 4px 14px rgba(20, 34, 43, .08), 0 16px 36px rgba(20, 34, 43, .06);
  --eem-ink: #14222b;        /* near-black body text */
  --eem-muted: #5a6b76;
  --eem-row-line: #e3e8ee;   /* soft table row separators */
  --eem-row-hover: #e6eff7;  /* table row hover */
  /* dark navy chrome (header + sidebar) — brand navy + white tiers */
  --eem-chrome: var(--eem-deep);            /* #004567 navy — chrome base */
  --eem-chrome-top: #0a557a;                /* navy, lifted — gradient top only */
  --eem-on-deep: #ffffff;                   /* primary/active text on navy (= brand-on-loud) */
  --eem-on-deep-quiet: rgba(255, 255, 255, .74);  /* idle nav text, footer sub (≥4.5:1) */
  --eem-on-deep-label: rgba(255, 255, 255, .66);  /* section label on navy (≥4.5:1) */
  --eem-on-deep-hover: rgba(255, 255, 255, .10);  /* hover overlay (decorative) */
  --eem-on-deep-active: rgba(255, 255, 255, .16); /* active overlay (decorative) */
  --eem-on-deep-line: rgba(255, 255, 255, .16);   /* dividers/borders on navy (decorative) */
  /* brand typography */
  --wa-font-family-body: 'Inter', system-ui, sans-serif;
}
/* L'échelle de toute l'interface, tenue par la taille de police de la racine.
 *
 * Les jetons de Web Awesome, tailles de texte comme espacements, sont en rem :
 * la racine les commande donc tous d'un coup, y compris la largeur des boutons
 * à icône. C'est ce qui fait tenir un tableau sur un écran étroit, là où
 * resserrer les colonnes ne peut rien contre un bouton, qui ne se comprime pas.
 *
 * Le terme en rem, et non en pixels, garde le réglage de taille du navigateur :
 * qui lit en 20 px obtient une interface proportionnellement plus grande, et le
 * zoom à 200 % continue de fonctionner.
 *
 * Bornes : 13 px sous 360 px de large, 16 px au-delà de 1280, linéaire entre les
 * deux. En deçà de 13 px, une donnée de tableau cesse de se parcourir.
 *
 * « html:root » et non « :root » : Web Awesome pose ses styles de base par
 * feuilles adoptées, chargées après celle-ci, et un sélecteur de même
 * spécificité perdrait. */
html:root { font-size: clamp(0.8125rem, 0.74rem + 0.33vw, 1rem); }
html, body { min-height: 100%; margin: 0; padding: 0; font-family: var(--wa-font-family-body); }
body { background: var(--eem-app-bg); color: var(--eem-ink); }

/* La page reste cachée tant que ses composants se chargent (voir « base.html »).
   L'animation l'affiche après 2,5 s si le script du chargeur échoue. */
html.is-loading body { visibility: hidden; animation: page-shown 0s 2.5s forwards; }
@keyframes page-shown { to { visibility: visible; } }

/* initial-hidden toggling (replaces functional inline display:none) */
[hidden] { display: none !important; }

/* ---------- Login ---------- */
#login {
  position: fixed; inset: 0; background: linear-gradient(165deg, var(--eem-sky-soft) 0%, var(--eem-app-bg) 60%);
  display: flex; align-items: center; justify-content: center; padding: var(--wa-space-l); z-index: 50;
}
#login .login-card {
  background: var(--eem-card); border-radius: var(--wa-border-radius-l);
  width: min(30rem, 100%); padding: clamp(1.75rem, 5vw, 2.5rem); text-align: center;
  border: 1px solid var(--eem-border); box-shadow: 0 10px 34px rgba(0, 69, 103, .12);
}
#login .login-brand { margin-bottom: var(--wa-space-l); }
#login .login-leaf { height: var(--wa-space-4xl); width: auto; }
#login .login-wordmark { text-align: left; }
#login .lw-name { display: flex; justify-content: space-between; font-size: var(--wa-font-size-3xl); font-weight: 900; color: var(--eem-deep); line-height: 1; }
#login .lw-sub { font-size: var(--wa-font-size-s); font-weight: 700; text-transform: uppercase; color: var(--eem-deep); text-align: justify; text-align-last: justify; }
#login h1 { font-size: var(--wa-font-size-xl); font-weight: 600; margin: var(--wa-space-l) 0 var(--wa-space-2xs); color: var(--eem-ink); }
#login p.lead { font-size: var(--wa-font-size-m); color: var(--eem-muted); margin: 0 0 var(--wa-space-l); line-height: 1.5; }
.ms-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: var(--wa-space-s);
  background: #fff; border: 1px solid #8c8c8c; border-radius: var(--wa-border-radius-m);
  padding: 0 .9em; min-height: 2.75em; font-size: var(--wa-font-size-m); font-weight: 500; color: #1b1b1b;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.ms-btn:hover { background: #f3f3f3; border-color: #5e5e5e; }
a.ms-btn { text-decoration: none; }
#login .login-error { display: flex; align-items: flex-start; gap: var(--wa-space-2xs); margin: 0 0 var(--wa-space-l); padding: var(--wa-space-s); border-radius: var(--wa-border-radius-m); background: var(--eem-red-soft); color: var(--eem-red); font-size: var(--wa-font-size-m); text-align: left; }
#login .secure { margin-top: var(--wa-space-l); font-size: var(--wa-font-size-m); color: var(--eem-muted); display: flex; align-items: center; justify-content: center; gap: var(--wa-space-2xs); }

/* ---------- App shell ---------- */
wa-page { --menu-width: 17.5rem; }
wa-page[view='mobile'] { --menu-width: auto; }
wa-page::part(menu), wa-page::part(navigation) { background: var(--eem-chrome); border: none; }

/* Vue mobile : la navigation passe dans un « wa-drawer », dont la surface est
   blanche par défaut. Le bloc navy flottait donc au milieu d'un panneau blanc, et
   le pied de la barre semblait décroché. La surface d'un drawer est sa partie
   « dialog », atteinte depuis « wa-page » par le préfixe « drawer__ ». Son
   « --spacing » est mis à zéro pour que le navy aille d'un bord à l'autre : c'est
   la navigation elle-même qui porte son rembourrage. */
wa-page::part(drawer) { --spacing: 0; }
wa-page::part(drawer__dialog),
wa-page::part(drawer__header),
wa-page::part(drawer__body),
wa-page::part(drawer__footer) { background: var(--eem-chrome); border: none; }
/* La croix de fermeture : blanche. Le « color » de l'en-tête suffit à un bouton
   qui dessine son icône en « currentColor », les deux parties nommées couvrant le
   cas où il porte sa propre couleur. */
wa-page::part(drawer__header) { color: var(--eem-on-deep); }
wa-page::part(drawer__close-button),
wa-page::part(drawer__close-button__base) {
  background: transparent; border-color: transparent; box-shadow: none;
  color: var(--eem-on-deep);
}
wa-page::part(drawer__close-button__base):hover { background: var(--eem-on-deep-hover); }
/* Le drawer donne sa largeur : la navigation la remplit au lieu de se limiter à
   la largeur de ses libellés. Son dégradé tombe aussi, l'en-tête du drawer étant
   d'un navy uni : les deux se voyaient l'un à côté de l'autre. */
wa-page[view='mobile'] nav[slot='navigation'] { min-width: 15rem; height: 100%; background: var(--eem-chrome); }
/* Le corps du drawer ne défile pas : c'est la liste qui s'en charge, sinon deux
   barres se superposent et la fiche du profil s'en va avec le défilement. */
wa-page::part(drawer__body) { overflow: hidden; }

.nav-chrome, nav[slot='navigation'] { padding: 0; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; background: linear-gradient(180deg, var(--eem-chrome-top) 0, var(--eem-chrome) 220px); }
/* Seule la liste défile. « min-height: 0 » est ce qui l'autorise à défiler au lieu
   de pousser la fiche du profil hors de la colonne. */
.nav-links { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--wa-space-xs); padding: var(--wa-space-l) var(--wa-space-s); }
/* La barre de défilement : celle du système, claire et large, se voyait comme une
   entaille sur le navy. */
.nav-links { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .3) transparent; }
.nav-links::-webkit-scrollbar { width: 8px; }
.nav-links::-webkit-scrollbar-track { background: transparent; }
.nav-links::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .3); border-radius: 4px; }
.nav-links::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .45); }
.nav-label { margin: 0 0 var(--wa-space-2xs); padding: 0 var(--wa-space-2xs); font-size: var(--wa-font-size-m); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--eem-on-deep-label); }
.nav-label-sep { margin-top: var(--wa-space-l); }
/* header brand lockup */
.hdr-leaf { height: 2em; width: auto; }
.hdr-name { display: flex; justify-content: space-between; font-size: var(--wa-font-size-xl); font-weight: 900; color: var(--eem-deep); line-height: 1; }
.navlink {
  display: flex; align-items: center; gap: .7em; padding: .95em 1em; border-radius: var(--wa-border-radius-m);
  color: var(--eem-muted); text-decoration: none; font-size: var(--wa-font-size-m); font-weight: 500; cursor: pointer;
  border-left: 3px solid transparent; transition: background .15s, color .15s;
}
.navlink { color: var(--eem-on-deep-quiet); }
.navlink wa-icon { font-size: 1.2em; width: 1.4em; flex: 0 0 auto; text-align: center; }
.navlink:hover { background: var(--eem-on-deep-hover); color: var(--eem-on-deep); }
.navlink.active { background: var(--eem-on-deep-active); color: var(--eem-on-deep); border-left-color: var(--eem-sky); }
/* Frère de la liste et non collé dedans : la fiche est toujours en bas, et la barre
   de défilement de la liste s'arrête juste au-dessus d'elle. */
.rail-foot { position: relative; flex: 0 0 auto; padding: .85rem 1rem; border-top: 1px solid var(--eem-on-deep-line); display: flex; flex-direction: column; align-items: center; gap: .4em; text-align: center; background: var(--eem-chrome); }
.rail-foot .who { line-height: 1.3; min-width: 0; }
.rail-foot .who b { color: var(--eem-on-deep); font-size: var(--wa-font-size-m); font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-foot .who span { color: var(--eem-on-deep-quiet); font-size: var(--wa-font-size-m); text-align: center; }
.rail-foot .rail-logout { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--eem-on-deep-quiet); }
.rail-foot .rail-logout:hover, .rail-foot .rail-logout:focus-visible { color: var(--eem-on-deep); }
.avatar-deep { width: 2.25em; height: 2.25em; flex: 0 0 auto; border-radius: var(--wa-border-radius-circle); background: var(--eem-sky); color: var(--eem-deep); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--wa-font-size-m); }

header[slot='header'] { background: var(--eem-card); border-bottom: 2px solid var(--eem-deep); padding: 0 var(--wa-space-l); min-height: 3.75em; display: flex; align-items: center; justify-content: space-between; gap: var(--wa-space-m); position: relative; z-index: 2; box-shadow: 0 6px 18px rgba(20, 34, 43, .16); }
header[slot='header'] wa-button[data-toggle-nav] { color: var(--eem-deep); }
.hdr-title { font-size: var(--wa-font-size-xl); font-weight: 900; color: var(--eem-deep); line-height: 1; white-space: nowrap; }
.hdr-title-accent { color: var(--eem-green); }
.hdr-divider { flex: 0 0 auto; width: 1px; height: var(--wa-space-xl); background: var(--eem-border); }
wa-page[view='mobile'] .hdr-title, wa-page[view='mobile'] .hdr-divider { display: none; }

wa-page::part(main-content) { padding: 0; background: var(--eem-app-bg); }
main { padding: 0 !important; background: var(--eem-app-bg); }
.view { padding: var(--wa-space-3xl) var(--wa-space-xl) var(--wa-space-3xl); }
.view-intro { color: var(--eem-muted); font-size: var(--wa-font-size-m); margin: 0 0 var(--wa-space-2xl); line-height: 1.55; }
h2.view-title { font-size: var(--wa-font-size-2xl); font-weight: 600; margin: 0 0 var(--wa-space-2xs); color: var(--eem-deep); }

/* Table toolkit */
.panel { background: var(--eem-card); border: 1px solid var(--eem-border); border-radius: var(--wa-border-radius-l); overflow: hidden; box-shadow: var(--eem-shadow); }
.toolbar { padding: var(--wa-space-s) var(--wa-space-m); border-bottom: 1px solid var(--eem-border); }
.toolbar .grow { flex: 1 1 220px; min-width: 180px; }
.table-scroll { overflow-x: auto; }
/* Largeurs FIXÉES, jamais déduites du contenu : sans cela une législation de
   200 caractères écrasait ses voisines, et deux tableaux de la console ne
   s'alignaient pas. Ce qui ne tient pas dans une cellule revient à la ligne, donc
   rien ne dépasse ; ce qui ne tient plus du tout part au dépliant de la ligne. */
table.eem { width: 100%; border-collapse: collapse; font-size: var(--wa-font-size-m); table-layout: fixed; }
table.eem thead th { text-align: left; font-weight: 600; color: #fff; background: var(--eem-deep); padding: var(--wa-space-s) var(--wa-space-m); user-select: none; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
table.eem thead th.sortable { cursor: pointer; }
table.eem thead th.sortable:hover { color: var(--eem-sky); }
/* Un titre trop long pour sa colonne se coupe dans sa cellule au lieu d'empiéter
   sur la colonne voisine : le titre tient sur une seule ligne et la mise en page
   du tableau est fixe, donc ce qui dépasse se dessinerait par-dessus le titre
   suivant.
   La flèche de tri est posée dans une gouttière réservée par le rembourrage
   droit, hors du flux du texte : elle reste visible quand le titre se coupe, et
   sa place est comptée par la mesure des colonnes, qui lit ce rembourrage. */
table.eem thead th { overflow: hidden; text-overflow: ellipsis; }
table.eem thead th.sortable { position: relative; padding-right: calc(var(--wa-space-m) + 1.15em); }
table.eem thead th .arr { position: absolute; right: var(--wa-space-xs); top: 50%;
  transform: translateY(-50%); color: var(--eem-sky); margin-left: 0;
  font-size: var(--wa-font-size-m); line-height: 1; }
/* L'en-tête « Applicabilité », qui filtre le tableau sur un verdict.
   Le bouton couvre la cellule entière, la surface cliquable étant l'en-tête
   lui-même ; son icône se pose dans la même gouttière que la flèche de tri, hors
   du flux du texte, si bien que le titre se coupe sans la recouvrir et que la
   mesure des colonnes compte sa place en lisant le rembourrage droit.
   L'icône change de forme selon le verdict montré (voir « VERDICT_ICON ») : sur ce
   fond, la teinte des pastilles ne se transpose pas, et rien ne doit reposer sur
   elle seule. */
table.eem thead th.vr-appl-head { position: relative;
  padding-right: calc(var(--wa-space-m) + 1.15em); }
table.eem thead th.vr-appl-head .flt { position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: flex-end;
  padding-inline-end: var(--wa-space-xs); border: none; background: none;
  color: inherit; font: inherit; font-size: var(--wa-font-size-m); line-height: 1;
  cursor: pointer; }
table.eem thead th.vr-appl-head .flt:hover { color: var(--eem-sky); }
table.eem thead th.vr-appl-head .flt:focus-visible { outline: 2px solid var(--eem-sky);
  outline-offset: -2px; }
table.eem thead th.vr-appl-head.is-on .flt { color: var(--eem-sky); }
table.eem tbody td { padding: var(--wa-space-s) var(--wa-space-m); border-bottom: 1px solid var(--eem-row-line); vertical-align: middle; overflow-wrap: break-word; }
table.eem tbody tr:last-child td { border-bottom: none; }
table.eem tbody tr { transition: background .12s ease; }
table.eem tbody tr:hover { background: var(--eem-row-hover); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Colonnes centrées : on qualifie le sélecteur par « table.eem » pour l'emporter
   sur « table.eem thead th { text-align: left } » (plus spécifique), sinon l'en-tête
   d'une colonne centrée resterait aligné à gauche, décalé de ses valeurs centrées. */
table.eem td.center, table.eem th.center { text-align: center; }
.mono { font-family: var(--wa-font-family-code); font-size: var(--wa-font-size-m); color: var(--eem-deep); }
.muted { color: var(--eem-muted); }
.empty-state { padding: 2.5rem 1rem; text-align: center; color: var(--eem-muted); }
.empty-state.compact { padding: 1.6rem 1rem; }
.empty-state wa-icon { font-size: var(--wa-font-size-2xl); color: var(--eem-green); display: block; margin: 0 auto .5rem; }

/* Domain tags */
.domtag { white-space: nowrap; display: inline-flex; align-items: center; gap: .35em; font-size: var(--wa-font-size-m); font-weight: 600; padding: .15em .6em; border-radius: var(--wa-border-radius-pill); }
.domtag.env { background: var(--eem-env-soft); color: var(--eem-env); }
.domtag.sst { background: var(--eem-sst-soft); color: var(--eem-sst); }
.jtag { white-space: normal; overflow-wrap: normal; display: inline-block; font-size: var(--wa-font-size-m); font-weight: 500; padding: .15em .5em; border-radius: var(--wa-border-radius-s); background: var(--eem-sky-soft); color: var(--eem-deep); margin: .1em .15em .1em 0; max-width: 100%; }
/* Un client qui couvre tout le registre : une pastille neutre, aucune des douze
   teintes ne désignant « toutes ». Mesuré 9.08:1. */
.jtag.jur-all { background: var(--eem-sky-soft); color: var(--eem-deep); font-weight: 700; }
/* Les douze juridictions, chacune sur sa teinte. La même partout dans la console :
   une juridiction change de vue, pas de couleur. */
.jtag.jur-fed { background: var(--eem-jur-fed-soft); color: var(--eem-jur-fed); }
.jtag.jur-qc  { background: var(--eem-jur-qc-soft);  color: var(--eem-jur-qc); }
.jtag.jur-on  { background: var(--eem-jur-on-soft);  color: var(--eem-jur-on); }
.jtag.jur-bc  { background: var(--eem-jur-bc-soft);  color: var(--eem-jur-bc); }
.jtag.jur-ab  { background: var(--eem-jur-ab-soft);  color: var(--eem-jur-ab); }
.jtag.jur-sk  { background: var(--eem-jur-sk-soft);  color: var(--eem-jur-sk); }
.jtag.jur-mb  { background: var(--eem-jur-mb-soft);  color: var(--eem-jur-mb); }
.jtag.jur-nb  { background: var(--eem-jur-nb-soft);  color: var(--eem-jur-nb); }
.jtag.jur-ns  { background: var(--eem-jur-ns-soft);  color: var(--eem-jur-ns); }
.jtag.jur-pe  { background: var(--eem-jur-pe-soft);  color: var(--eem-jur-pe); }
.jtag.jur-nl  { background: var(--eem-jur-nl-soft);  color: var(--eem-jur-nl); }
.jtag.jur-nu  { background: var(--eem-jur-nu-soft);  color: var(--eem-jur-nu); }
.tagwrap { display: flex; flex-wrap: wrap; }

/* Clients : badge de statut de contrat (libellé + couleur AA) + grille des mois */
.badge { display: inline-flex; align-items: center; font-size: var(--wa-font-size-m); font-weight: 600; padding: .15em .6em; border-radius: var(--wa-border-radius-pill); white-space: nowrap; }
.badge-ok { background: var(--eem-green-soft); color: var(--eem-green); }
.badge-warn { background: var(--eem-amber-soft); color: var(--eem-amber); }
.badge-err { background: var(--eem-red-soft); color: var(--eem-red); }
/* Un état qui n'est ni bon ni mauvais : une question retirée du formulaire, par
   exemple. Le fond le distingue, le mot le dit. */
.badge-neutre { background: var(--eem-sky-soft); color: var(--eem-deep); }
.month-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .3rem .9rem; margin-bottom: .6rem; }
/* Bandeau des mois (colonne « Mois ») : 12 cases J..D, les mois de veille remplis.
   La distinction actif/inactif passe par le fond (pas seulement la couleur). */
.month-strip { display: inline-flex; flex-wrap: wrap; gap: 2px; max-width: 100%; }
.mo { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; border-radius: var(--wa-border-radius-s); font-size: var(--wa-font-size-s); font-weight: 600; background: #eef1f4; color: var(--eem-muted); }
.mo.on { background: var(--eem-deep); color: #fff; }

/* Colonne du chevron des cartes d'extraction (voir « veilleResults.js »). */
th.col-x, td.col-x { width: 2.5em; padding-right: 0; }

.nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== Veille réglementaire ===== */
/* Lancement : le formulaire, seul dans sa carte */
.lv-form { padding: var(--wa-space-l) var(--wa-space-xl); }
/* Les champs occupent toute la carte, et le retour à la ligne remplace les points de
   rupture : ils se replacent d'eux-mêmes quand la place manque. */
.lv-fields { display: flex; flex-wrap: wrap; gap: var(--wa-space-m); align-items: end; }
/* La place en trop ne se répartit pas à parts égales : elle va d'abord au choix
   multiple, qui porte des pastilles, plutôt qu'aux dates, qui n'en tirent rien. */
.lv-jur { flex: 3 1 17rem; }
.lv-date { flex: 1 1 11rem; }
.lv-lang { flex: 1 1 12rem; }
.lv-actions { display: flex; align-items: center; gap: var(--wa-space-l); margin-top: var(--wa-space-m); }
/* Choix manuel des sources : sur sa propre ligne, les noms de sources étant longs,
   plutôt qu'à la suite des dates où il serait à l'étroit. */
.lv-sources { flex: 1 1 100%; }
.lv-sources-empty { flex: 1 1 100%; margin: 0; font-size: var(--wa-font-size-s); }
.lv-client { min-width: 14rem; }
.lv-result { margin-top: var(--wa-space-2xl); }
.vr-client { min-width: 14rem; }
/* Analyses récentes : lignes cliquables + panneau de résultats sous la liste */
.run-row { cursor: pointer; }
.dash-result { margin-top: var(--wa-space-2xl); }
/* L'en-tête coiffe maintenant plusieurs cartes au lieu d'être la barre de l'une d'elles :
   ni fond ni filet, sinon il se lirait comme le haut de la première carte. */
.dash-result-head { display: flex; align-items: center; justify-content: space-between; gap: var(--wa-space-m); padding: 0 var(--wa-space-2xs) var(--wa-space-s); }
.dash-result-head strong { color: var(--eem-deep); }
/* Avancement d'une veille : une ligne par source interrogée. Remplace l'ancien
   « pipeline » de 4 étapes, qui était une animation de 2,4 s sans lien avec le
   serveur : il affichait « terminé » alors que la requête tournait encore. */
.srcprog { margin-top: var(--wa-space-l); }
/* La carte du dépliant, dessinée ici et non laissée aux styles de base de Web Awesome,
   qui habillent un « details » natif : la console garde la même carte que le dépliant
   des trouvailles, quelle que soit la version chargée. */
.srcprog-fold { border: 1px solid var(--eem-border);
  border-radius: var(--wa-border-radius-m); background: var(--eem-card); }
/* L'en-tête est le résumé du dépliant : le chevron et le titre à gauche, les boutons
   poussés à droite par la marge automatique du titre. La ligne passe à la suivante
   quand la place manque, et les boutons restent dans la carte. */
.srcprog-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wa-space-2xs);
  padding: .7em var(--wa-space-s); list-style: none; cursor: pointer; }
.srcprog-title { flex: 1 1 12rem; min-width: 0; font-weight: 600; color: var(--eem-ink);
  margin-right: auto; }
/* La liste habite le corps du dépliant : son creux vient de là, et non d'une marge
   sous l'en-tête, qui laisserait un blanc sous un avancement replié. */
.srclist { list-style: none; margin: 0; padding: 0 var(--wa-space-s) var(--wa-space-s);
  display: flex; flex-direction: column; gap: .35rem; }
/* Une source occupe désormais trois lignes, une par temps de travail, sous un en-tête
   qui porte son nom et son statut. Elle en occupait une seule, avec un « 7/8 » dont
   l'unité changeait d'une source à l'autre sans être nommée. */
.srcrow { display: flex; flex-direction: column; gap: .35em; padding: .5em .6em; border: 1px solid var(--eem-border); border-radius: var(--wa-border-radius-m); background: var(--eem-card); }
.srcrow-head { display: flex; align-items: center; gap: var(--wa-space-s); }
.srcrow-label { flex: 1 1 auto; min-width: 0; color: var(--eem-ink); overflow-wrap: anywhere; }
/* L'avancement chiffré est en chiffres tabulaires : sans cela, « 9/85 » puis
   « 10/85 » font sauter la ligne à chaque rafraîchissement. */
.srcrow-count { flex: 0 0 auto; color: var(--eem-muted); font-variant-numeric: tabular-nums; font-size: var(--wa-font-size-s); }
/* Les trois temps, en grille pour que leurs colonnes s'alignent d'une ligne à l'autre :
   le nom, le compte, la barre, puis ce qui explique le compte. */
.srcphases { display: grid; grid-template-columns: 11rem 5.5rem 6rem 1fr;
  gap: .15em var(--wa-space-s); align-items: center; font-size: var(--wa-font-size-s); }
.srcphase-name { color: var(--eem-muted); }
.srcphase-value { color: var(--eem-ink); font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.srcphase-note { color: var(--eem-muted); font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere; }
/* Un temps qui n'a rien trouvé, une fois la source terminée. C'est un constat et
   non une attente, donc pas d'italique, et il s'étale sur les colonnes de la barre
   et de la note, qui n'ont rien à montrer ici. */
.srcphase-none { grid-column: 2 / -1; color: var(--eem-muted); }
/* Un temps pas encore atteint : dit, mais en retrait. */
.srcphase-wait { color: var(--eem-muted); font-style: italic; }
/* La place de la barre du repérage reste vide, et c'est voulu : son total est inconnu
   par nature, donc elle n'a pas de barre. Garder la colonne aligne les deux autres. */
.srcphase-nobar { display: block; }
/* Tant que la source n'a rien commencé, les trois lignes s'effacent un peu : elles
   annoncent ce qui va se passer, elles ne rapportent rien encore. */
.srcphases[data-idle] { opacity: .55; }
@media (max-width: 48rem) {
  /* Étroit : le nom du temps passe au-dessus, la barre et la note en dessous. */
  .srcphases { grid-template-columns: 1fr auto; }
  .srcphase-name { grid-column: 1 / -1; }
  .srcphase-note { grid-column: 1 / -1; }
}
.srcrow-err { flex: 1 1 100%; color: var(--eem-red); font-size: var(--wa-font-size-s); overflow-wrap: anywhere; }
/* Ce qui vient du cache : discret comme les autres compteurs, mais pas caché. Son
   icône est dimensionnée à part, un « wa-icon » se rendant à 1em de sa propre taille de
   police, donc à hauteur du texte courant s'il n'est pas réduit ici. */
.srcrow-cache { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3em; color: var(--eem-muted); font-variant-numeric: tabular-nums; font-size: var(--wa-font-size-s); white-space: nowrap; }
.srcrow-cache wa-icon { font-size: .85em; }
/* Les documents repérés que la veille n'a pas obtenus. En ambre et non en rouge :
   la source est allée au bout, il manque seulement une pièce, et le rouge de
   « .srcrow-err » est celui d'une source qui a échoué. Le compte est écrit à côté de
   l'icône, la teinte ne portant rien à elle seule. */
.srcrow-lost { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3em; color: #6d3b05; font-variant-numeric: tabular-nums; font-size: var(--wa-font-size-s); white-space: nowrap; }
.srcrow-lost wa-icon { font-size: .85em; color: #8a4b06; }
/* La barre double le texte du compteur, elle ne le remplace pas : une information
   portée par la seule longueur d'une barre est invisible pour un lecteur d'écran. */
/* La barre remplit sa colonne de grille, sa largeur étant fixée par « .srcphases ».
   Le contraste du remplissage sur son rail dépasse 3:1 (bleu ciel sur gris de bordure),
   mais il ne porte rien à lui seul : le compte est écrit à côté, sur la même ligne. */
.srcbar { width: 100%; height: .4rem; border-radius: var(--wa-border-radius-pill); background: var(--eem-border); overflow: hidden; }
.srcbar > span { display: block; height: 100%; width: var(--srcbar-pct, 0%); background: var(--eem-sky); transition: width .2s; }
.srcrow.is-done .srcbar > span { background: var(--eem-green); }
.srcrow.is-failed .srcbar > span { background: var(--eem-red); }

/* Ce que l'extraction a trouvé : le document, le terme, et un passage par page.
   Volontairement à part du tableau des résultats, qui reproduit les colonnes du fichier
   Excel remis au client et décrit le résultat de l'analyse.
   Deux dépliants frères et non imbriqués : côte à côte dans un même bloc, les deux
   tableaux se suivaient sans séparation lisible.
   Une colonne « Section » montrait le titre venu de la page d'index quand le document
   le confirmait. Retirée : la confirmation échouait trop souvent, et un tiret dont on
   ne sait pas s'il accuse la source ou notre comparaison ne renseigne personne. */
/* Les deux dépliants forment un groupe, détaché de la carte du livrable plus nettement
   qu'ils ne le sont l'un de l'autre : c'est ce qui dit qu'ils n'en font pas partie. La
   marge du dernier est annulée, sinon elle se confondrait avec celle du groupe. */
.vr-evidence { margin-bottom: var(--wa-space-xl); }
.vr-evidence .ev-fold:last-child,
.vr-evidence .vr-rejected:has(+ .vr-report[hidden]) { margin-bottom: 0; }
/* Le rapport d'analyse : un bord et une teinte verts sans erreur, rouges avec. L'icône
   et le compte écrit montrent la même chose sans la couleur. Le rouge du texte fait
   6,9:1 sur sa teinte. */
.vr-report { border-left: 4px solid var(--eem-green); background: #f6fbf5; }
.vr-report.is-bad { border-left-color: #b3261e; background: #fdf6f5; }
.vr-report-mark { color: var(--eem-green); }
.vr-report.is-bad .vr-report-mark { color: #b3261e; }
.rp-bad { color: #a4262c; font-weight: 700; }
.rp-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wa-space-s);
  margin: var(--wa-space-s) 0 var(--wa-space-2xs); font-size: var(--wa-font-size-s); }
.rp-head wa-button { margin-left: auto; }
/* Deux classes, car les styles de base de Web Awesome arrivent après cette feuille
   et posent un retrait sur chaque élément de liste. */
.vr-report .rp-list { list-style: none; margin: 0; padding: 0;
  border-top: 1px solid #efd9d6; }
.vr-report .rp-list li { margin: 0; display: grid; grid-template-columns: minmax(0, 34rem) minmax(0, 1fr) auto;
  gap: .25rem var(--wa-space-m); align-items: baseline; padding: .45rem 0;
  border-bottom: 1px solid #efd9d6; font-size: var(--wa-font-size-s); }
.rp-why { display: inline-flex; align-items: baseline; gap: .35em; color: #a4262c; }
.rp-why wa-icon { color: #b3261e; }
.rp-list .lv-more, .rp-list .lv-asking { justify-self: end; margin: 0; }
@media (max-width: 40rem) {
  .vr-report .rp-list li { grid-template-columns: minmax(0, 1fr); }
  .rp-list .lv-more, .rp-list .lv-asking { justify-self: start; }
}
/* « Requête en cours », sous le nom d'une ligne ou au bout d'une erreur. */
.lv-asking { display: flex; width: max-content; align-items: center; gap: .4em;
  margin-block-start: .4em; color: var(--eem-deep); font-size: var(--wa-font-size-xs);
  font-weight: 600; }
.lv-asking wa-spinner { font-size: .9rem; }
/* L'avis d'un formulaire rempli depuis une veille passée. */
.lv-prefill { display: flex; align-items: center; gap: var(--wa-space-xs);
  margin: 0 0 var(--wa-space-m); padding: var(--wa-space-xs) var(--wa-space-s);
  background: var(--eem-sky-soft); border-radius: var(--wa-border-radius-m);
  color: var(--eem-deep); font-size: var(--wa-font-size-s); }
.lv-prefill wa-button { margin-left: auto; }
/* La fenêtre de relance : les deux comptes, côte à côte. */
.rl-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wa-space-s); margin: 0; }
.rl-counts div { background: var(--eem-sky-soft); border-radius: var(--wa-border-radius-m);
  padding: var(--wa-space-xs) var(--wa-space-s); }
.rl-counts dt { font-size: var(--wa-font-size-xs); color: var(--eem-muted); }
.rl-counts dd { margin: 0; font-size: var(--wa-font-size-xl); font-weight: 700;
  color: var(--eem-deep); font-variant-numeric: tabular-nums; }
.rl-note { margin: 0; font-size: var(--wa-font-size-s); color: var(--eem-muted); }
.rl-warn { margin: 0; }
.ev-fold { border: 1px solid var(--eem-border); border-radius: var(--wa-border-radius-m);
  background: var(--eem-card); box-shadow: var(--eem-shadow);
  margin-bottom: var(--wa-space-m); }
.ev-fold > summary { cursor: pointer; padding: .7em var(--wa-space-s); font-weight: 600;
  color: var(--eem-deep); list-style: none; display: flex; align-items: center;
  gap: var(--wa-space-2xs); }
/* Les deux marques que le navigateur et Web Awesome posent d'eux-mêmes sur un
   « summary », écartées pour les deux dépliants de la console : celui des trouvailles
   et celui de l'avancement. Web Awesome pose la sienne par un « ::after » de 16 px, et
   ses styles de base arrivent après cette feuille : d'où un second chevron à l'autre
   bout de la ligne. Le sélecteur est plus spécifique que le sien, ce qui suffit à
   l'écarter quel que soit l'ordre de chargement. */
.ev-fold > summary::-webkit-details-marker,
.srcprog-fold > summary::-webkit-details-marker { display: none; }
.ev-fold > summary::after,
.srcprog-fold > summary::after { content: none; display: none; }
/* Un seul chevron, pivoté à l'ouverture : un pseudo-élément ne peut pas contenir de
   composant, donc l'icône est dans le balisage. Sa taille reste sous celle du texte,
   un « wa-icon » valant 1 em de sa propre police. */
.ev-fold-chev { font-size: .85rem; color: var(--eem-muted); transition: transform .15s ease; }
.ev-fold[open] .ev-fold-chev,
.srcprog-fold[open] .ev-fold-chev { transform: rotate(90deg); }
.ev-fold-n { margin-left: auto; color: var(--eem-muted); font-weight: 400;
  font-size: var(--wa-font-size-s); }
.ev-fold-body { padding: 0 var(--wa-space-s) var(--wa-space-s); }
.ev-none { color: var(--eem-muted); font-size: var(--wa-font-size-s); padding: var(--wa-space-s) 0; }
.ev-summary { color: var(--eem-muted); font-size: var(--wa-font-size-s);
  margin: 0 0 var(--wa-space-s); max-width: 60rem; }

/* Onglets « Mots clés » / « Législation ». La nature du terme quitte le tableau pour
   devenir l'onglet, ce qui supprime une colonne. */
/* Les onglets tiennent sur une seule ligne et la barre défile de côté : quatre
   libellés suivis d'un compte ne tiennent pas sur la largeur d'un téléphone, et une
   rangée qui se replie change la hauteur du bandeau d'une largeur à l'autre.
   Le filet qui ferme la barre appartient à l'enveloppe, laquelle ne défile pas :
   posé sur la piste, il partirait avec les onglets. */
.ev-tabs-bar { display: flex; align-items: stretch;
  border-bottom: 2px solid var(--eem-border); margin-bottom: var(--wa-space-s); }
/* La piste est positionnée : « offsetLeft » d'un onglet se lit alors dans la
   piste, et « tabs.js » y ramène l'onglet choisi. */
.ev-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; position: relative;
  flex: 1 1 auto; min-width: 0; margin-bottom: -2px;
  scrollbar-width: none; -ms-overflow-style: none; }
/* La barre défile par ses flèches, au doigt ou à la molette : une barre de
   défilement sous les onglets doublerait le filet qui les ferme. */
.ev-tabs::-webkit-scrollbar { display: none; }
.ev-tab { font: inherit; cursor: pointer; background: none; border: none;
  padding: .55em 1.1em; color: var(--eem-muted); border-bottom: 2px solid transparent;
  flex: 0 0 auto; white-space: nowrap; }
/* Les flèches ne paraissent que si la piste déborde : sans débordement, elles
   n'ont pas de destination, et la barre est celle d'un grand écran. */
.ev-tabs-arrow { display: none; }
.ev-tabs-bar.has-arrows .ev-tabs-arrow { display: flex; align-items: center;
  flex: 0 0 auto; font: inherit; cursor: pointer; background: none; border: none;
  padding: 0 var(--wa-space-2xs); color: var(--eem-deep); }
/* Le bout de course garde sa flèche en place, estompée : la retirer décalerait
   les onglets à chaque pas. La couleur ne dit pas seule qu'elle ne mène nulle
   part, le défilement s'arrêtant au même moment. */
.ev-tabs-arrow:disabled { cursor: default; opacity: .35; }
.ev-tab[aria-selected="true"] { color: var(--eem-deep); font-weight: 600;
  border-bottom-color: var(--eem-deep); }
/* Le compte se détache du nom par une marge, et non par une espace dans le gabarit :
   le bouton dispose son contenu en flex, où une espace seule entre deux éléments ne se
   rend pas. Même raison que « ev-tab-warn », qui suit le compte. */
.ev-tab-n { font-size: var(--wa-font-size-s); color: var(--eem-muted);
  margin-inline-start: .3em; }
/* Le compte passe sous le champ quand la ligne ne les tient plus tous les deux :
   il ne se coupe pas (« 4 trouvailles · 9 pages » se lit d'un bloc), donc sans ce
   retour la carte s'élargit et la page défile de côté à 360 px. */
.ev-filter { display: flex; flex-wrap: wrap; gap: var(--wa-space-xs);
  align-items: center; margin-bottom: var(--wa-space-2xs); }
.ev-filter wa-input { flex: 1 1 12rem; max-width: 26rem; min-width: 0; }
.ev-count { color: var(--eem-muted); font-size: var(--wa-font-size-s); white-space: nowrap; }

/* Le tableau. Tous les en-têtes à gauche, sans exception : une colonne de nombres
   calée à droite sous un en-tête à gauche se lit de travers. */

.ev-found td { vertical-align: top; text-align: left; }
.ev-found tbody tr.ev-line { cursor: pointer; }
.ev-chev { font-size: .8rem; color: var(--eem-deep); vertical-align: .05em; }
/* Pastille de source. Rectangulaire comme « .jtag » et non en gélule comme « .badge » :
   les gélules colorées de la console disent un statut (« Terminé », « Échec »), donc une
   source en gélule verte se lirait comme une réussite. */
.ev-src { }
.srctag { display: inline-block; font-size: var(--wa-font-size-s); font-weight: 600;
  padding: .15em .5em; border-radius: var(--wa-border-radius-s); white-space: nowrap; }
/* Huit teintes, une par source. Le rapport de contraste du texte sur son fond est donné
   pour chacune : toutes dépassent le 4,5:1 attendu d'un texte, la plus juste étant le
   vert. La couleur ne fait que doubler le nom, qui est toujours écrit : huit teintes ne
   se distinguent pas toutes les unes des autres. */
.src-p2 { background: #e7f3f9; color: #004567; }      /* 9,1:1 */
.src-p1 { background: #e2f1f3; color: #0d5c66; }      /* 6,6:1 */
.src-env { background: #eef6ec; color: #347d2e; }     /* 4,6:1 */
.src-lois { background: #f2f4e0; color: #5b6410; }    /* 5,7:1 */
.src-legis { background: #f7edda; color: #8a5a0f; }   /* 5,1:1 */
.src-cnesst { background: #f8e9e7; color: #b03027; }  /* 5,4:1 */
.src-assnat { background: #efeafa; color: #5c3d99; }  /* 6,9:1 */
.src-rbq { background: #fae9f2; color: #932f63; }     /* 6,4:1 */

/* Le verdict de la 2e passe. Même règle que les sources : la teinte double un mot
   toujours écrit, et chaque paire dépasse 4,5:1 (la plus juste, « mention », est à
   5,7:1). Les cinq premiers vont au tableau, les trois derniers à la relecture. */
.vdtag { display: inline-block; font-size: var(--wa-font-size-s); font-weight: 600;
  padding: .15em .5em; border-radius: var(--wa-border-radius-s); white-space: nowrap; }
.vd-consult { background: #e8f0fb; color: #1a4a8c; }  /* 7,6:1 */
.vd-projet { background: #eef1f4; color: #40525f; }   /* 7,2:1 */
.vd-edicte { background: #f4eefb; color: #5b3a8f; }   /* 7,6:1 */
.vd-vigueur { background: #e8f5ea; color: #1f6b32; }  /* 5,8:1 */
.vd-abroge { background: #fbeaea; color: #9c2222; }   /* 6,8:1 */
.vd-mention { background: #f1f2f3; color: #54606b; }  /* 5,7:1 */
.vd-faux { background: #fdf0e3; color: #8a4b06; }     /* 6,1:1 */
.vd-indet { background: #fbf3d9; color: #6f5504; }    /* 6,4:1 */
.vd-autre { background: #f1f2f3; color: #54606b; }
/* Le classement posé par l'analyste, à l'onglet « Non applicable ». C'est la seule
   pastille de cette forme qui ne rapporte pas un verdict du modèle, d'où une teinte
   qu'aucun des huit ne porte. Elle précède la justification, qui parle d'autre chose,
   d'où sa marge sous elle. 6,3:1 sur son fond. */
.vd-analyste { background: #e4f1ef; color: #17605c; margin-block-end: .25em; }
/* Une ligne issue du découpage d'une entrée en vigueur échelonnée. Elle ne rapporte
   pas un verdict : elle dit de quelle échéance du texte la ligne relève, d'où une
   teinte qu'aucune des neuf autres ne porte. 8,0:1 sur son fond. */
.vd-echelon { background: #eae9f6; color: #3d3a8c; }
/* Le fédéral. À treize sources la couleur ne suffit plus à distinguer deux à deux, et
   c'est admis : le nom est toujours écrit, et il dit « Canada ». Les rapports restent
   au-dessus de 4,5:1, ce qui est la seule contrainte que la couleur doit tenir ici. */
.src-ca-p2 { background: #e9edf7; color: #2f4b7c; }      /* 7,4:1 */
.src-ca-p1 { background: #e4f1ef; color: #17605c; }      /* 6,3:1 */
.src-ca-p3 { background: #f6efdf; color: #6b4f1a; }      /* 6,7:1 */
.src-ca-consult { background: #f3eaf2; color: #7b3f6b; } /* 6,5:1 */
.src-ca-sante { background: #f8ece4; color: #8a4018; }   /* 6,4:1 */
/* Une source inconnue du tableau des teintes, c'est-à-dire un adaptateur retiré depuis :
   la ligne reste attribuée, en gris. */
.src-other { background: var(--eem-row-line); color: var(--eem-muted); white-space: normal; }
/* Le nom du document porte le texte long. Sa hauteur est bornée à trois lignes, le titre
   entier restant accessible en infobulle, et sa largeur est celle que « bindAutoColumns »
   a mesurée pour la colonne : aucune borne en « rem » ici, sinon le texte se replierait
   avant le bord de sa cellule. */
.ev-doc { overflow-wrap: anywhere; }
.ev-name { display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; }
/* Le document est un lien dans le tableau des documents écartés : « 100 % » retient une
   longue adresse dans sa colonne. */
.ev-doc a { display: inline-block; max-width: 100%; }
.ev-term { font-weight: 500; color: var(--eem-ink); overflow-wrap: anywhere; }
/* Les nombres en chiffres tabulaires, pour que les colonnes s'alignent. */
.ev-pages { white-space: nowrap; color: var(--eem-muted);
  font-variant-numeric: tabular-nums; }
.ev-date { white-space: nowrap; color: var(--eem-muted);
  font-variant-numeric: tabular-nums; }
.ev-reason { color: var(--eem-muted); }
.ev-open-col { }
/* La colonne du bouton « écarter de l'analyse ». */
.ev-act-col { }
/* Une trouvaille écartée, à son onglet : en retrait, pour qu'on lise d'un coup
   d'œil qu'elle n'ira pas au modèle. Le bouton de rétablissement la nomme, la
   teinte ne porte donc rien à elle seule. */
.ev-found tbody tr.ev-line.ev-ignored td { color: var(--eem-muted); }
.ev-found tbody tr.ev-line.ev-ignored .ev-term { font-style: italic; }
.ev-extract { display: inline-block; font-size: var(--wa-font-size-s); text-decoration: none;
  padding: .25em .7em; border: 1px solid var(--eem-border);
  border-radius: var(--wa-border-radius-m); background: var(--eem-card);
  color: var(--eem-deep); white-space: nowrap; }
.ev-extract:hover { background: var(--eem-sky-soft); border-color: var(--eem-deep); }

/* Le contenu déplié : une grille, pas un tableau dans un tableau. La première cellule
   de la ligne reste vide, donc le filet s'aligne sur le début du titre. */
.ev-found tr.ev-detail > td { padding: 0; border-top: none; }
.ev-open { background: var(--eem-sky-soft); border-left: 3px solid var(--eem-deep);
  padding: var(--wa-space-xs) var(--wa-space-s); }
.ev-open-row { display: grid; grid-template-columns: 6rem 1fr; gap: var(--wa-space-s);
  padding: .5em 0; border-top: 1px dashed var(--eem-border); }
/* Le premier bloc n'a pas de filet : le fond marque déjà le début, et un filet
   par-dessus faisait un double trait. */
.ev-open-row:first-child { border-top: none; }
.ev-open-no { color: var(--eem-muted); font-size: var(--wa-font-size-s);
  font-variant-numeric: tabular-nums; }
/* Le passage vient d'un PDF : il garde ses coupures voulues et peut contenir de très
   longs mots. */
.ev-para { margin: 0; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere;
  color: var(--eem-ink); }
/* Le terme réellement trouvé, marqué dans le passage. Trois indices et non un seul,
   parce que la couleur ne peut pas suffire ici : sur le fond bleu pâle du bloc, aucun
   jaune clair n'atteint les 3:1 attendus d'un repère (celui-ci est à 1,2:1). Le gras et
   le filet portent donc l'information, et le jaune ne fait que la rendre évidente à
   première vue. Le texte reste à 12,5:1 sur le jaune, le filet à 4,5:1. */
.ev-mark { background: #ffdf7e; color: var(--eem-ink); font-weight: 600;
  border-bottom: 2px solid var(--eem-amber); border-radius: 2px; padding: 0 .12em; }
/* Le nom du fichier, sous l'intitulé : chiffres tabulaires parce que ce sont surtout des
   numéros, et discret parce qu'il sert à distinguer deux lignes, pas à être lu. */
.ev-file { display: block; margin-top: .15em; color: var(--eem-muted);
  font-size: var(--wa-font-size-s); font-variant-numeric: tabular-nums; }
/* Tableau des résultats : colonnes de résumé + ligne de détails dépliable. Aucune
   largeur ici, « bindAutoColumns » les pose (voir « RESULT_PLAN »), et le dépliant
   reprend la mise en forme partagée (« .det-row », « .det-list »). */
/* Loi et résumé : entièrement visibles (retour à la ligne), largeur bornée pour
   ne pas étirer le tableau à l'infini. */
.lv-loi { display: inline-block; max-width: 100%; }
/* Le résumé porte une ligne par changement retenu (étiquette + résumé du
   modèle) : on garde les retours à la ligne. */
.lv-resume { display: inline-block; max-width: 100%; white-space: pre-line; }
/* Le résumé et la justification en points, un par disposition. La puce vaut le retour
   à la ligne : un point de six lignes se distingue du suivant, ce qu'un simple retour
   ne faisait plus. La référence est en gras, pour retrouver une disposition dans une
   cellule qui en porte huit. */
.lv-points { margin: 0; padding-left: 1.15em; display: grid; gap: .3em; }
/* Un interligne plus serré que la prose courante : la cellule d'un projet de
   règlement compte quarante lignes, et chaque dixième d'interligne y vaut trois
   lignes de hauteur.

   « pre-line » garde les coupures du passage cité : une énumération y présente ses
   « a) » et « b) » sur leurs lignes, la ligne vide séparant les points. */
.lv-points li { max-width: 100%; line-height: 1.45; white-space: pre-line; }
.lv-points li::marker { color: var(--eem-muted); }
.lv-points b { color: var(--eem-deep); font-weight: 600; }
/* Tout en haut de la ligne, et non centré : une cellule de résumé fait quarante
   lignes, et le nom du document se lisait alors à mi-hauteur, loin du point qu'il
   nomme. Le sélecteur porte les deux classes du tableau : « table.eem tbody td »
   centre, et compte un type de plus. */
table.eem.lv-table tbody td { vertical-align: top; }
.lv-expand wa-icon { transition: transform .15s ease; }
.lv-expand.open wa-icon { transform: rotate(90deg); }
.det-list .det-v a { color: var(--eem-deep); word-break: break-all; }
/* --- Analyse approfondie d'une ligne (fenetre #lvDeepDlg) ---
   Elle rend une liste de dispositions, chacune avec sa citation et l'URL d'ou
   elle sort : c'est le lien qui la rend verifiable (voir deep_analysis). */
.deep-dlg { --width: 56rem; }
/* La fenêtre du résumé entier, large comme un paragraphe se lit : un résumé de
   quarante dispositions n'est pas plus lisible sur toute la largeur d'un écran. */
.resume-dlg { --width: 44rem; }
/* La fenêtre de confirmation (voir « confirmDialog.js »). L'icône répète le ton, que
   le titre et le libellé du bouton disent déjà en mots. */
.cf-dlg { --width: 30rem; }
.cf-head { display: flex; gap: var(--wa-space-s); align-items: flex-start; }
.cf-ico { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: 50%; font-size: var(--wa-font-size-m); }
.cf-info { background: var(--eem-sky-soft); color: var(--eem-deep); }
.cf-warn { background: var(--eem-amber-soft); color: var(--eem-amber); }
.cf-danger { background: var(--eem-red-soft); color: #a3301f; }
.cf-title { margin: .35rem 0 0; font-size: var(--wa-font-size-l); font-weight: 700; line-height: 1.3;
  color: var(--eem-ink); text-wrap: balance; }
.cf-body { display: grid; gap: var(--wa-space-xs); padding: var(--wa-space-xs) 0 0 calc(2.25rem + var(--wa-space-s)); }
.cf-body p { margin: 0; }
.cf-subject { font-weight: 600; color: var(--eem-deep); overflow-wrap: anywhere; }
.cf-note { color: var(--eem-muted); font-size: var(--wa-font-size-s); }
.cf-facts { margin: 0; display: grid; grid-template-columns: 1fr auto; border: 1px solid var(--eem-row-line);
  border-radius: var(--wa-border-radius-m); overflow: hidden; }
.cf-facts dt, .cf-facts dd { margin: 0; padding: var(--wa-space-2xs) var(--wa-space-s);
  border-top: 1px solid var(--eem-row-line); }
.cf-facts dt:first-of-type, .cf-facts dt:first-of-type + dd { border-top: 0; }
.cf-facts dt { color: var(--eem-muted); }
.cf-facts dd { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 30rem) { .cf-body { padding-left: 0; } }

/* ---------- La fenêtre « Exporter » (voir exportDialog.js) ---------- */
.xp-dlg { --width: 44rem; }
.xp-sub { margin: 0; font-size: var(--wa-font-size-xs); color: var(--eem-muted); }
.xp-step { display: grid; gap: var(--wa-space-xs); border: 0; margin: 0; padding: 0; min-width: 0;
  align-self: stretch; }
.xp-sub, .xp-result { align-self: stretch; }
.xp-list, .xp-grid, .xp-step > .xp-choice, .xp-list > .xp-choice { width: 100%; box-sizing: border-box; }
.xp-step legend { display: flex; gap: var(--wa-space-xs); align-items: center; padding: 0;
  margin-block-end: var(--wa-space-xs); font-size: var(--wa-font-size-m); font-weight: 600; }
.xp-num { display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%;
  background: var(--eem-deep); color: var(--eem-on-deep); font-size: var(--wa-font-size-xs); font-weight: 700; flex: none; }
.xp-list { display: grid; gap: var(--wa-space-xs); }
.xp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wa-space-xs); }
.xp-choice { display: grid; grid-template-columns: auto 1fr; gap: var(--wa-space-3xs) var(--wa-space-s);
  padding: var(--wa-space-s) var(--wa-space-m); border: 1px solid var(--eem-border);
  border-radius: var(--wa-border-radius-m); cursor: pointer; font-size: var(--wa-font-size-s); background: var(--eem-card); }
.xp-choice:hover { border-color: var(--eem-deep); }
.xp-choice:has(input:checked) { border-color: var(--eem-deep); background: var(--eem-sky-soft); box-shadow: inset 3px 0 var(--eem-deep); }
.xp-choice:has(input:disabled) { background: #f4f6f8; border-color: var(--eem-row-line); cursor: not-allowed; }
.xp-choice:has(input:disabled) b { color: var(--eem-muted); }
.xp-choice:focus-within, .xp-crow:focus-within { outline: 2px solid var(--eem-deep); outline-offset: 2px; }
.xp-choice input, .xp-crow input { margin: .2em 0 0; accent-color: var(--eem-deep); }
.xp-choice b { display: flex; gap: var(--wa-space-2xs); align-items: center; font-weight: 600; }
.xp-choice b wa-icon { color: var(--eem-deep); }
.xp-d { grid-column: 2; color: var(--eem-muted); font-size: var(--wa-font-size-xs); }
.xp-w { color: var(--eem-amber); font-weight: 600; }
.xp-note { margin: 0; font-size: var(--wa-font-size-xs); color: var(--eem-muted); }
.xp-alert { margin: 0; font-size: var(--wa-font-size-s); color: var(--eem-red); }
.xp-chips { display: flex; flex-wrap: wrap; gap: var(--wa-space-2xs); }
/* Web Awesome met chaque bouton en « inline-flex », qui retire l'espace avant le compte. */
.xp-chip { display: inline-flex; align-items: baseline; gap: .35em; font: inherit; font-size: var(--wa-font-size-xs); font-weight: 600; padding: var(--wa-space-3xs) var(--wa-space-s);
  border-radius: 999px; border: 1px solid var(--eem-border); background: var(--eem-card); color: var(--eem-ink); cursor: pointer; }
.xp-chip span { color: var(--eem-muted); font-weight: 500; }
.xp-chip[aria-checked="true"] { background: var(--eem-deep); border-color: var(--eem-deep); color: var(--eem-on-deep); }
.xp-chip[aria-checked="true"] span { color: var(--eem-on-deep-quiet); }
.xp-chip:focus-visible { outline: 2px solid var(--eem-deep); outline-offset: 2px; }
/* La liste des clients défile dans un cadre fixe : une base de trente clients ou
   plus allongerait sinon la fenêtre au delà de l'écran. */
.xp-clist { max-height: 15.5rem; overflow-y: auto; border: 1px solid var(--eem-border); border-radius: var(--wa-border-radius-m); }
/* Web Awesome donne à une étiquette de bouton radio la largeur de son contenu. */
.xp-crow { display: grid; width: 100%; box-sizing: border-box; grid-template-columns: auto 1fr auto; gap: 0 var(--wa-space-s); align-items: center;
  padding: var(--wa-space-xs) var(--wa-space-m); border-bottom: 1px solid var(--eem-row-line); cursor: pointer; font-size: var(--wa-font-size-s); }
.xp-crow:last-child { border-bottom: 0; }
.xp-crow:hover { background: var(--eem-row-hover); }
.xp-crow:has(input:checked) { background: var(--eem-sky-soft); box-shadow: inset 3px 0 var(--eem-deep); }
.xp-cn { font-weight: 600; }
.xp-cd { grid-column: 2 / 4; color: var(--eem-muted); font-size: var(--wa-font-size-xs); }
.xp-box { display: grid; gap: var(--wa-space-xs); justify-items: start; padding: var(--wa-space-s) var(--wa-space-m);
  border-radius: var(--wa-border-radius-m); background: #f1f4f6; font-size: var(--wa-font-size-s); }
.xp-box p { margin: 0; }
.xp-box wa-progress-bar { width: 100%; }
.xp-box.xp-warn { background: var(--eem-amber-soft); }
.xp-box.xp-info { background: var(--eem-sky-soft); }
.xp-result { display: grid; gap: var(--wa-space-2xs); padding: var(--wa-space-s) var(--wa-space-m);
  border-radius: var(--wa-border-radius-m); background: #f4f7f9; font-size: var(--wa-font-size-s); }
.xp-result ul { margin: 0; padding-inline-start: 1.1em; display: grid; gap: var(--wa-space-3xs); }
.xp-t { font-size: var(--wa-font-size-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--eem-muted); }
.xp-fname { display: flex; align-items: stretch; border: 1px solid var(--eem-border); border-radius: var(--wa-border-radius-m); background: var(--eem-card); }
.xp-fname:focus-within { outline: 2px solid var(--eem-deep); outline-offset: 2px; }
.xp-fname input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: var(--wa-space-xs) var(--wa-space-s);
  font-family: var(--wa-font-family-code); font-size: var(--wa-font-size-xs); color: var(--eem-ink); }
.xp-ext { display: grid; place-items: center; padding: 0 var(--wa-space-s); border-inline-start: 1px solid var(--eem-border);
  background: #eef2f5; color: var(--eem-muted); font-family: var(--wa-font-family-code); font-size: var(--wa-font-size-xs); }
.xp-fname-row { display: flex; flex-wrap: wrap; gap: var(--wa-space-2xs) var(--wa-space-m); align-items: center; }
.xp-bad { color: var(--eem-red); font-size: var(--wa-font-size-xs); font-weight: 600; }
.xp-why { margin-inline-end: auto; font-size: var(--wa-font-size-xs); color: var(--eem-muted); align-self: center; }
.vr-export-why { font-size: var(--wa-font-size-xs); color: var(--eem-muted); align-self: center; }
@media (max-width: 34rem) { .xp-grid { grid-template-columns: 1fr; } }
/* Le document que la fenêtre commente, au dessus de son texte. Sans nom, rien : un
   paragraphe vide laisserait sa marge au dessus du texte. */
.dlg-doc { margin: 0 0 var(--wa-space-m); font-weight: 600; color: var(--eem-deep); }
.dlg-doc:empty { display: none; }
.deep-meta { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.4rem; align-items: start; }
.deep-meta .dt-k { padding-top: .1em; font-size: var(--wa-font-size-s); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--eem-muted); }
.deep-meta .dt-v { color: var(--eem-ink); }
.deep-meta .dt-v a { color: var(--eem-deep); }
.deep-label { font-size: var(--wa-font-size-s); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--eem-muted); }
/* Les deux parties de la fenetre : ce qui a ete trouve, puis l'entree en vigueur.
   Le filet les separe franchement — ce sont deux lectures differentes. */
.deep-part { margin: 0; padding-top: .6rem; border-top: 2px solid var(--eem-deep); font-size: var(--wa-font-size-l); font-weight: 700; color: var(--eem-ink); }
.deep-part:first-child { padding-top: 0; border-top: none; }
/* L'entree en vigueur d'un instrument : meme fiche qu'une disposition, la date
   tenant la place de la pastille de changement. */
.deep-eiv { border-left: 3px solid var(--eem-deep); background: var(--eem-sky-soft); padding: .7rem .9rem; border-radius: var(--wa-border-radius-s); }
/* D'où vient une entrée sur la frise d'un groupe, ou quand un texte a été publié. */
.deep-origin { margin: 0 0 .35rem; font-size: var(--wa-font-size-s); color: var(--eem-muted); }
/* L'analyse redigee : de la prose, donc une mesure et un interligne de lecture,
   la ou les dispositions restent des fiches. */
.deep-synth { display: grid; gap: 1.1rem; }
.deep-sect-title { margin: 0 0 .4rem; font-size: var(--wa-font-size-m); font-weight: 700; color: var(--eem-ink); }
.deep-sect p { margin: 0 0 .6rem; max-width: 68ch; line-height: 1.65; color: var(--eem-ink); }
.deep-sect p:last-of-type { margin-bottom: 0; }
.deep-sect-src { margin: .5rem 0 0; padding-left: 1.2rem; }
.deep-sect-src li { font-size: var(--wa-font-size-s); }
.deep-sect-src a { color: var(--eem-deep); word-break: break-all; }
.deep-prov { border-left: 3px solid var(--eem-deep); background: var(--eem-sky-soft); padding: .7rem .9rem; border-radius: var(--wa-border-radius-s); }
.deep-prov-head { display: flex; align-items: center; gap: .6em; flex-wrap: wrap; margin-bottom: .35rem; }
.deep-ref { font-weight: 700; color: var(--eem-ink); }
.deep-detail { margin: 0 0 .45rem; color: var(--eem-ink); }
.deep-quote { margin: 0 0 .45rem; padding-left: .8rem; border-left: 2px solid var(--eem-muted); font-style: italic; color: var(--eem-muted); }
.deep-src { font-size: var(--wa-font-size-s); color: var(--eem-deep); word-break: break-all; }
/* Les quatre changements. Les couleurs reprennent celles des verdicts, dont le
   contraste est deja verifie (voir .vd-*). */
.dctag { display: inline-block; font-size: var(--wa-font-size-s); font-weight: 600;
  padding: .15em .5em; border-radius: var(--wa-border-radius-s); white-space: nowrap; }
.dc-mod { background: #e8f0fb; color: #1a4a8c; }  /* 7,6:1 */
.dc-rem { background: #f4eefb; color: #5b3a8f; }  /* 7,6:1 */
.dc-add { background: #e8f5ea; color: #1f6b32; }  /* 5,8:1 */
.dc-abr { background: #fbeaea; color: #9c2222; }  /* 6,8:1 */
.dc-stop { background: #fbf0e1; color: #6d3b05; }  /* 8,2:1 */
.dc-neutral { background: #eceff3; color: #3a4653; }  /* 9,0:1 */
.deep-wait { display: flex; align-items: center; gap: 1rem; color: var(--eem-muted); }
.deep-wait wa-spinner { font-size: 1.6rem; }
.deep-error { color: #9c2222; }
/* Une analyse coupée par l'arrêt du service : ambre et non rouge, ce n'est pas un
   échec de l'analyse. */
.deep-stopped { display: flex; align-items: flex-start; gap: var(--wa-space-s);
  padding: var(--wa-space-s) var(--wa-space-m); border-radius: var(--wa-border-radius-m);
  background: color-mix(in srgb, #8a4b06 7%, var(--eem-card)); color: #6d3b05; }
.deep-stopped wa-icon { flex: 0 0 auto; margin-top: .25em; color: #8a4b06; }
.deep-stopped p { margin: 0; line-height: 1.5; }
@media (prefers-color-scheme: dark) {
  .deep-stopped { background: color-mix(in srgb, #e0a45c 10%, var(--eem-card)); color: #f0c48c; }
  .deep-stopped wa-icon { color: #e0a45c; }
}
.deep-error wa-icon { margin-right: .4em; }
.deep-err { white-space: pre-wrap; font-size: var(--wa-font-size-s); background: #fbeaea; padding: .6rem .8rem; border-radius: var(--wa-border-radius-s); overflow-x: auto; }
.deep-cost { display: flex; align-items: center; gap: .5em; font-size: var(--wa-font-size-s); color: var(--eem-muted); margin: 0; }
.deep-cost wa-icon { color: var(--eem-deep); }

/* --- L'analyse approfondie d'une ligne, dans le panneau latéral -------------
   Le tableau et le panneau se partagent la carte des résultats. Sous 56rem de
   carte, les colonnes du tableau qui ne partent jamais ne tiennent plus. Le
   panneau prend alors toute la largeur, et « Fermer » fait revenir le tableau.
   La classe « is-narrow » est posée par veilleResults.js, et non par une requête
   de conteneur, qui changerait la mesure des cases à cocher du tableau.
   La carte a « overflow: clip », car « hidden » en ferait un conteneur de
   défilement où le panneau ne resterait plus collé en haut. */
.vr-panel { overflow: clip; }
.vr-work { display: grid; grid-template-columns: minmax(0, 1fr); }
.vr-work.has-deep { grid-template-columns: minmax(0, 1fr) clamp(22rem, 38%, 34rem); }
.vr-main { min-width: 0; }
/* Le filet qui sépare le tableau du panneau est posé sur le tableau. Le panneau
   collé en haut a la hauteur de son contenu, et le tableau celle de toute la carte. */
.vr-work.has-deep .vr-main { border-right: 1px solid var(--eem-border); }
.vr-deep, .vr-group { position: sticky; top: 0; align-self: start; max-height: 100vh; min-width: 0;
  display: flex; flex-direction: column; background: var(--eem-card); }
.vr-work.is-narrow.has-deep { grid-template-columns: minmax(0, 1fr); }
.vr-work.is-narrow.has-deep .vr-main { display: none; }
.vr-work.is-narrow .vr-deep, .vr-work.is-narrow .vr-group { position: static; max-height: none; border-left: 0;
  border-top: 2px solid var(--eem-deep); }
.dp-head { padding: var(--wa-space-m); border-bottom: 1px solid var(--eem-row-line); }
.dp-title-row { display: flex; align-items: flex-start; gap: var(--wa-space-s); }
.dp-title { flex: 1; margin: 0; font-size: var(--wa-font-size-l); font-weight: 700;
  color: var(--eem-ink); text-wrap: balance; overflow-wrap: anywhere; }
.dp-title:focus-visible { outline: 2px solid var(--eem-deep); outline-offset: 2px; }
.dp-sub { margin: .3rem 0 0; font-size: var(--wa-font-size-s); color: var(--eem-muted); }
.dp-body { flex: 1 1 auto; overflow-y: auto; padding: var(--wa-space-m);
  display: grid; gap: var(--wa-space-m); align-content: start; }
.vr-work.is-narrow .dp-body { overflow-y: visible; }
.grp-card.is-open { background: var(--eem-sky-soft); }
.dp-foot { display: flex; flex-wrap: wrap; gap: var(--wa-space-s); justify-content: flex-end;
  padding: var(--wa-space-s) var(--wa-space-m); border-top: 1px solid var(--eem-row-line); }
.dp-part { margin: 0; font-size: var(--wa-font-size-s); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--eem-muted); }
.dp-quiet { margin: 0; font-size: var(--wa-font-size-s); color: var(--eem-muted); }
.dp-launch { display: grid; gap: var(--wa-space-s); }
.dp-launch p { margin: 0; }
.dp-warn { display: flex; gap: var(--wa-space-s); align-items: flex-start;
  padding: var(--wa-space-s) var(--wa-space-m); border: 1px solid #e6cfa4;
  border-radius: var(--wa-border-radius-m); background: var(--eem-amber-soft);
  color: var(--eem-ink); }
.dp-warn wa-icon { flex: none; margin-top: .2em; color: var(--eem-amber); }
.dp-warn p { margin: 0; }
.dp-cost { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: var(--wa-font-size-s);
  color: var(--eem-muted); font-variant-numeric: tabular-nums; }
.dp-cost strong { color: var(--eem-ink); }

/* L'état d'une analyse, sur la ligne et dans l'en-tête. Il est écrit en mots, et
   la couleur le double. Chaque texte dépasse 4,5:1 sur son fond. */
.dp-tag { display: inline-flex; align-items: center; gap: .4em; border-radius: 999px;
  padding: .15em .7em; font: inherit; font-size: var(--wa-font-size-s); font-weight: 600;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.dp-tag:focus-visible { outline: 2px solid var(--eem-deep); outline-offset: 2px; }
.dp-run { background: var(--eem-amber-soft); color: var(--eem-amber); border-color: #e6cfa4; }
.dp-done { background: var(--eem-green-soft); color: var(--eem-green); border-color: #bcd9b7; }
.dp-fail { background: var(--eem-red-soft); color: #a3301f; border-color: #e7bdb6; }
.dp-stopped { background: color-mix(in srgb, #8a4b06 7%, var(--eem-card)); color: #6d3b05; border-color: #e2c9a6; }
.dp-tag:hover { filter: brightness(.97); }
.dp-pulse { width: .5rem; height: .5rem; border-radius: 50%; flex: none;
  background: var(--eem-amber); animation: dp-pulse 1.6s infinite; }
@keyframes dp-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--eem-amber) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 .4rem transparent; }
}
@media (prefers-reduced-motion: reduce) { .dp-pulse { animation: none; } }
tr.lv-deep-open > td { background: var(--eem-sky-soft); }
tr.lv-deep-open > td:first-child { box-shadow: inset .2rem 0 0 0 var(--eem-deep); }

/* Pendant l'appel, le fil des étapes sous l'encadré d'avancement (progress.js). */
.dp-feed-box { border: 1px solid var(--eem-row-line); border-radius: var(--wa-border-radius-m);
  padding: .2rem; }
.dp-feed-live { max-height: 26rem; overflow-y: auto; }
.vr-work.is-narrow .dp-feed-live { max-height: none; }
.dp-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.dp-step { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; gap: var(--wa-space-xs);
  align-items: start; padding: .45rem .5rem; border-radius: var(--wa-border-radius-s); }
.dp-step.is-now { background: var(--eem-amber-soft); }
.dp-ico { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--eem-sky-soft); color: var(--eem-deep); font-size: .8rem; }
.dp-think .dp-ico { background: #efe9f7; color: #563b86; }
.dp-write .dp-ico { background: var(--eem-green-soft); color: var(--eem-green); }
.dp-step-body { min-width: 0; }
.dp-kind { font-size: var(--wa-font-size-xs); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--eem-muted); }
.dp-now-word { color: var(--eem-amber); }
.dp-text { font-size: var(--wa-font-size-s); overflow-wrap: anywhere; color: var(--eem-ink); }
.dp-think .dp-text { font-style: italic; }
.dp-think-title { font-style: normal; }
.dp-url { color: var(--eem-deep); font-family: var(--wa-font-family-code); font-size: .92em; }
.dp-when { font-size: var(--wa-font-size-xs); color: var(--eem-muted); font-variant-numeric: tabular-nums; }

/* Après l'appel, les écarts avec la ligne en tête, puis le résultat. */
.dp-gaps { display: grid; gap: var(--wa-space-s); padding: var(--wa-space-s) var(--wa-space-m);
  border: 1px solid #e6cfa4; border-radius: var(--wa-border-radius-m);
  background: color-mix(in srgb, var(--eem-amber-soft) 55%, var(--eem-card)); }
.dp-gaps-title { margin: 0; display: flex; align-items: center; gap: .4em;
  font-size: var(--wa-font-size-m); color: var(--eem-amber); }
.dp-gap { display: grid; gap: .3rem; padding-top: var(--wa-space-s); border-top: 1px solid #efdcb8; }
.dp-gaps-lede { margin: 0; font-size: var(--wa-font-size-s); color: var(--eem-muted); }
.dp-gaps-lede + .dp-gap { padding-top: 0; border-top: 0; }
.dp-gap-k { font-weight: 600; }
.dp-cmp { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .1rem .8rem;
  margin: 0; font-size: var(--wa-font-size-s); }
.dp-cmp dt { color: var(--eem-muted); }
.dp-cmp dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dp-cmp dd.is-old { text-decoration: line-through; text-decoration-color: var(--eem-muted); }
.dp-cmp dd.is-new { font-weight: 600; }
.dp-gap-why { margin: 0; font-size: var(--wa-font-size-s); color: var(--eem-ink); overflow-wrap: anywhere; }
/* La citation de l'écart et sa page, comme celles d'une disposition. */
.dp-gap-quote { margin: 0; padding-left: .8rem; border-left: 2px solid var(--eem-muted);
  font-size: var(--wa-font-size-s); font-style: italic; color: var(--eem-muted); overflow-wrap: anywhere; }
.dp-gap-page { margin: 0; font-size: var(--wa-font-size-s); color: var(--eem-muted); overflow-wrap: anywhere; }
.dp-synth { display: grid; gap: .3rem; }
.dp-sect { border: 1px solid var(--eem-row-line); border-radius: var(--wa-border-radius-m); }
.dp-sect > summary { cursor: pointer; padding: .5rem .7rem; font-weight: 600; }
.dp-sect > .deep-sect { padding: 0 .7rem .7rem; }
.dp-how { border: 1px solid var(--eem-border); border-radius: var(--wa-border-radius-m); }
.dp-how > summary { cursor: pointer; padding: .5rem .7rem; font-weight: 600; color: var(--eem-deep); }
.dp-how > .dp-feed-box { border: 0; }
.dp-facts { margin: 0; font-size: var(--wa-font-size-s); color: var(--eem-muted);
  font-variant-numeric: tabular-nums; }

/* Le suivi de l'en-tête, sur le bandeau bleu. */
.deep-tracker { position: relative; }
.dt-btn { display: inline-flex; align-items: center; gap: .45em; border-radius: 999px;
  padding: .3em .9em; font: inherit; font-size: var(--wa-font-size-s); font-weight: 600;
  cursor: pointer; white-space: nowrap; color: var(--eem-amber);
  background: var(--eem-amber-soft); border: 1px solid #e6cfa4; }
.dt-btn:hover { filter: brightness(.97); }
.dt-btn:focus-visible { outline: 2px solid var(--eem-deep); outline-offset: 2px; }
.dt-word { font-weight: 400; }
/* Sur un écran étroit, l'en-tête garde sa ligne unique et le suivi montre son seul
   compte. Le texte entier reste dans « aria-label » et « title ». */
@media (max-width: 1100px) { .dt-word { display: none; } }
.dt-pop { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 60;
  width: min(26rem, calc(100vw - 2rem)); padding: .4rem; background: var(--eem-card);
  color: var(--eem-ink); border: 1px solid var(--eem-border);
  border-radius: var(--wa-border-radius-m); box-shadow: var(--eem-shadow); }
.dt-pop-title { margin: .3rem .5rem; font-size: var(--wa-font-size-xs); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--eem-muted); }
/* Web Awesome donne à tout « button » la hauteur et le texte sur une ligne de ses
   propres boutons. Un élément de la liste reprend une hauteur libre et un texte
   qui passe à la ligne. */
.dt-item { display: grid; gap: .1rem; width: 100%; height: auto; min-height: 0;
  text-align: left; justify-items: start; white-space: normal; line-height: 1.35;
  font: inherit; color: inherit; background: none; border: 0; box-shadow: none;
  border-radius: var(--wa-border-radius-s); padding: .5rem; cursor: pointer; }
.dt-item strong { overflow-wrap: anywhere; }
.dt-item:hover { background: var(--eem-row-hover); }
.dt-item:focus-visible { outline: 2px solid var(--eem-deep); outline-offset: -2px; }
.dt-step, .dt-time { font-size: var(--wa-font-size-s); color: var(--eem-muted); overflow-wrap: anywhere; }
.dt-step { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Le message bref, quand il a un bouton. */
#toast.has-act { pointer-events: auto; }
#toastAct { font: inherit; font-weight: 600; color: inherit; background: none; cursor: pointer;
  border: 1px solid color-mix(in srgb, currentColor 55%, transparent);
  border-radius: var(--wa-border-radius-s); padding: .2em .7em; }
/* Les deux états de la cellule « Approfondie » ont la même largeur, que la colonne
   mesure sur la première ligne. */
td.c-deep > .dp-tag { min-width: 6.5rem; height: auto; justify-content: center; }
/* Le bouton qui lance l'analyse et la coche d'une analyse terminée, en icône seule.
   La cible fait au moins 24 px. */
td.c-deep > .dp-tag.dp-done-ico { min-width: 0; }
.dp-done-ico { padding: .2em; border: 0; background: none; color: var(--eem-green);
  font-size: var(--wa-font-size-l); }
.dp-done-ico:hover { filter: none; color: #25601f; }
/* Les colonnes courtes du tableau des résultats, centrées sous leur titre. */
.vr-table :is(th, td):is(.c-jur, .c-sujet, .c-type, .c-statut, .c-deep) { text-align: center; }
#toastAct:focus-visible { outline: 2px solid var(--eem-sky); outline-offset: 2px; }
/* --- Cocher des lignes, et les analyses conjointes qu'elles forment ---------
   La case est la seule commande du tableau qui porte sur plusieurs lignes : elle
   ouvre la colonne, sans rembourrage à droite, comme le chevron de dépliage. */
table.eem th.c-pick, table.eem td.c-pick { padding-left: var(--wa-space-s); padding-right: 0; }
/* Le filet de la ligne dépliée suit la première cellule, qui est désormais la
   case : posé sur le chevron, il laissait une colonne en dehors du dépliant. */
table.lv-table tr.det-row > td.c-fold { box-shadow: none; }
table.lv-table tr.det-row > td.c-pick { box-shadow: inset 3px 0 0 var(--eem-deep); }
/* La barre des lignes cochées, sous les onglets et au dessus du tableau : elle
   compte ce qui est coché et porte le geste qui s'y applique. */
.vr-pick-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wa-space-s);
  padding: var(--wa-space-s) var(--wa-space-m); background: var(--eem-sky-soft);
  border-bottom: 1px solid var(--eem-border); }
.vr-pick-bar .pb-n { font-weight: 600; color: var(--eem-ink); }
/* Ce que le geste fera, ou ce qui lui manque : un bouton fermé sans phrase se
   lit comme un bouton cassé. */
.vr-pick-bar .pb-say { flex: 1 1 14rem; color: var(--eem-muted); font-size: var(--wa-font-size-s); }
/* La liste des analyses conjointes, à la place du tableau à leur onglet. */
.vr-groups { display: grid; gap: var(--wa-space-s); padding: 0 var(--wa-space-m) var(--wa-space-m); }
.grp-card { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wa-space-s);
  padding: .7rem .9rem; background: var(--eem-card); border: 1px solid var(--eem-border);
  border-left: 3px solid var(--eem-deep); border-radius: var(--wa-border-radius-m); }
.grp-main { flex: 1 1 18rem; min-width: 0; }
.grp-titre { font-weight: 600; color: var(--eem-ink); }
.grp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4em;
  margin-top: .25rem; font-size: var(--wa-font-size-s); color: var(--eem-muted); }
.grp-acts { flex: 0 0 auto; }
/* Les législations que le groupe couvre, dans son panneau : c'est la première
   chose à savoir d'une analyse qui en porte plusieurs. Une ligne par texte, le
   numéro à gauche, l'état et le retour au tableau à droite. Le numéro suit celui
   des « Texte n » du rapport. */
.grp-lignes { list-style: none; margin: 0; padding: 0; border: 1px solid var(--eem-row-line);
  border-radius: var(--wa-border-radius-m); }
.grp-lignes li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) auto;
  gap: .15rem var(--wa-space-s); align-items: start; padding: var(--wa-space-xs) var(--wa-space-s);
  border-top: 1px solid var(--eem-row-line); color: var(--eem-ink); }
.grp-lignes li:first-child { border-top: 0; }
.grp-num { grid-row: span 2; font-weight: 700; color: var(--eem-muted);
  font-variant-numeric: tabular-nums; }
.grp-nom { grid-column: 2; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.grp-state { grid-column: 3; grid-row: 1; justify-self: end; white-space: nowrap; }
/* Ce qui distingue deux lignes de même nom : la juridiction, le sujet surveillé et
   la publication. Une même législation revient une fois par sujet et par document,
   et la liste les nommerait pareil sans cela. */
.grp-repere { grid-column: 2; display: flex; align-items: center; flex-wrap: wrap;
  gap: .2rem .6rem; font-size: var(--wa-font-size-s); color: var(--eem-muted); }
/* Le retour au tableau, en icône. Son libellé est dans l'infobulle et pour le
   lecteur d'écran. */
.grp-jump { grid-column: 3; grid-row: 2; justify-self: end; display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem; padding: 0; cursor: pointer; color: var(--eem-deep);
  border: 1px solid var(--eem-border); border-radius: var(--wa-border-radius-s);
  background: var(--eem-card); }
.grp-jump:hover { border-color: var(--eem-deep); }
.grp-jump:focus-visible { outline: 2px solid var(--eem-deep); outline-offset: 2px; }
/* Le lien établi entre les textes, en tête du rapport : la pastille le nomme et
   la phrase qui suit dit ce qui le fonde. */
.grp-lien { display: flex; align-items: baseline; gap: .5em; flex-wrap: wrap;
  color: var(--eem-ink); margin: 0 0 var(--wa-space-s); }

/* Note d'information dans un dialogue */
.dlg-note { display: flex; align-items: center; gap: .5em; font-size: var(--wa-font-size-m); color: var(--eem-muted); margin: 0; }
.dlg-note wa-icon { color: var(--eem-deep); }
/* Pastilles d'applicabilité (libellé + couleur AA) */
.appl { display: inline-flex; align-items: center; font-size: var(--wa-font-size-m); font-weight: 600; padding: .15em .6em; border-radius: var(--wa-border-radius-pill); white-space: nowrap; }
.appl-ok { background: var(--eem-green-soft); color: var(--eem-green); }
.appl-warn { background: var(--eem-amber-soft); color: var(--eem-amber); }
.appl-no { background: var(--eem-red-soft); color: var(--eem-red); }
/* Champs de formulaire (panneaux) */
.field-lab { font-size: var(--wa-font-size-m); font-weight: 600; color: var(--eem-ink); margin-bottom: .4em; display: block; }

/* Drawer profile */
.drawer-sec { font-size: var(--wa-font-size-m); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--eem-muted); margin: 1.4rem 0 .7rem; }
.drawer-sec:first-of-type { margin-top: 0; }
.toggle-row { display: flex; align-items: center; gap: 1.15em; margin-bottom: .2rem; }
#clientDrawer { --size: 44rem; }
#clientDrawer::part(dialog) { max-width: 94vw; }
.drawer-del { margin-inline-end: auto; color: var(--eem-red); }

/* Panneau client : rythme vertical entre les champs. Chaque champ (et le libellé
   autonome au-dessus de son champ) respire, mais le libellé reste collé à son champ. */
#drawerBody wa-input,
#drawerBody wa-select,
#drawerBody wa-textarea { display: block; }
#drawerBody wa-input,
#drawerBody wa-select,
#drawerBody wa-textarea,
#drawerBody .toggle-row,
#drawerBody .month-grid { margin-bottom: 1.15rem; }
#drawerBody .field-lab { margin-top: 1.15rem; }

/* Panneau des mots clés : le même rythme. Le premier libellé d'une section suit son
   titre ou sa note, qui ont déjà leur marge. */
#kwDrawerBody .field-lab { margin-top: 1.15rem; }
#kwDrawerBody .drawer-sec + .field-lab,
#kwDrawerBody .kw-forms-note + .field-lab { margin-top: 0; }

/* Toast */
#toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--eem-deep); color: var(--wa-color-brand-on-loud); padding: .75em 1.25em; border-radius: var(--wa-border-radius-m); font-size: var(--wa-font-size-m); display: flex; align-items: center; gap: .65em; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 80; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast wa-icon { color: var(--eem-sky); }

/* Références réglementaires */
/* Le compte de ce que la colonne ne montre pas (lois habilitantes,
   juridictions) : discret, et cliquable nulle part, c'est le dépliant de la ligne
   qui donne le reste. */
.tag-more { display: inline-block; align-self: center; font-size: var(--wa-font-size-s); font-weight: 700; padding: .1em .4em; margin: .1em .15em .1em .2em; border-radius: var(--wa-border-radius-s); background: var(--eem-sky-soft); color: var(--eem-deep); white-space: nowrap; }
.cat-tag { white-space: nowrap; display: inline-block; font-size: var(--wa-font-size-m); font-weight: 700; letter-spacing: .03em; padding: .15em .55em; border-radius: var(--wa-border-radius-s); background: var(--eem-green-soft); color: var(--eem-green); }
/* Compteur affiché dans le bouton « Filtres » quand des filtres sont actifs */
.flt-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5em; height: 1.5em; padding: 0 .35em; border-radius: var(--wa-border-radius-pill); background: var(--wa-color-brand-on-loud); color: var(--eem-deep); font-size: var(--wa-font-size-s); font-weight: 700; }
/* Bandeau des filtres actifs (puces retirables) */
.filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wa-space-2xs); padding: var(--wa-space-s) var(--wa-space-m); border-bottom: 1px solid var(--eem-border); background: var(--eem-sky-soft); }
.filter-chip { display: inline-flex; align-items: center; gap: .35em; font-size: var(--wa-font-size-m); color: var(--eem-ink); background: var(--eem-card); border: 1px solid var(--eem-border); border-radius: var(--wa-border-radius-pill); padding: .2em .25em .2em .7em; }
.filter-chip .fc-k { color: var(--eem-muted); }
.chip-x { display: inline-flex; align-items: center; justify-content: center; width: 1.6em; height: 1.6em; padding: 0; border: none; background: transparent; color: var(--eem-muted); border-radius: var(--wa-border-radius-circle); cursor: pointer; }
.chip-x:hover { background: var(--eem-row-hover); color: var(--eem-deep); }
.chip-clear { border: none; background: transparent; color: var(--eem-deep); font-weight: 600; font-size: var(--wa-font-size-m); cursor: pointer; padding: .2em .5em; border-radius: var(--wa-border-radius-s); }
.chip-clear:hover { text-decoration: underline; }

/* Mots clés : panneau (industries en grille + listes de codes) */
#keywordDrawer { --size: 46rem; }
#keywordDrawer::part(dialog) { max-width: 94vw; }
.kw-inds { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .3rem .9rem; margin-bottom: .6rem; }
.kw-ind { display: flex; align-items: center; gap: .45em; font-size: var(--wa-font-size-m); color: var(--eem-ink); }
.kw-ind-add { align-items: center; margin-bottom: .3rem; }
/* Les formes cherchées d'un mot clé. Sous le libellé, une seule ligne, coupée par
   « … » quand la colonne est trop étroite ; la ligne dépliée les montre toutes. */
.kw-forms { margin-top: .15em; font-size: var(--wa-font-size-s); color: var(--eem-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-forms-note { margin: -.3rem 0 .9rem; font-size: var(--wa-font-size-s); line-height: 1.5; }
/* « #kwDrawerBody » pour passer devant les marges que Web Awesome donne aux listes. */
#kwDrawerBody .kw-form-list { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-wrap: wrap; gap: var(--wa-space-2xs); }
#kwDrawerBody .kw-form-list > li { margin: 0; }
.kw-forms-empty { font-size: var(--wa-font-size-s); }
.kw-form-error { margin: 0 0 .5rem; font-size: var(--wa-font-size-s); color: var(--eem-red); }

/* Veilles lancées : une liste groupée par journée, et non un tableau.
 *
 * Six champs sur une ligne, en grille : l'heure et les actions gardent leur largeur,
 * le reste se partage la place. Sous 60rem la ligne se replie sur deux rangs plutôt
 * que d'abandonner un champ, la valeur d'un champ abandonné disparaissant de l'écran.
 * Les chiffres sont tabulaires : l'heure et les comptes s'alignent d'une ligne à
 * l'autre sans colonne pour les y contraindre. */
/* Une seule grille pour toute la liste, les lignes en « subgrid » : sans cela chaque
   ligne mesure ses propres colonnes, et « 1 source » ne se place pas où « 2 sources »
   se place à la ligne suivante. C'est ce qui remplace l'alignement qu'un tableau
   donnait gratuitement. */
.runlist {
  display: grid; font-size: var(--wa-font-size-m);
  grid-template-columns: auto auto auto auto 1fr auto auto;
}
.runday {
  grid-column: 1 / -1;
  display: flex; align-items: baseline; gap: .6em; padding: .45rem var(--wa-space-m);
  background: var(--eem-sky-soft); border-top: 1px solid var(--eem-border);
  font-size: var(--wa-font-size-s);
}
.runlist > .runday:first-child { border-top: 0; }
/* Le message d'une liste vide occupe toute la largeur, comme un jour. */
.runlist > .empty-state { grid-column: 1 / -1; }
.runday b { color: var(--eem-deep); font-weight: 600; }
.runday span { color: var(--eem-muted); font-variant-numeric: tabular-nums; }
.runrow {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: subgrid; align-items: center;
  gap: .2rem var(--wa-space-s);
  padding: .5rem var(--wa-space-m); border-top: 1px solid var(--eem-row-line);
  cursor: pointer;
}
.runrow:hover { background: var(--eem-row-hover); }
/* La veille dont les résultats sont ouverts sous la liste. Le filet à gauche porte
   le repère autant que le fond : une teinte seule ne se distingue pas d'une ligne
   survolée. Il est posé en ombre intérieure et non en bordure, la ligne étant en
   « subgrid », où une bordure décalerait les colonnes. */
.runrow.is-open {
  background: var(--eem-sky-soft);
  box-shadow: inset 3px 0 0 var(--eem-deep);
}
.runrow.is-open .runrow-time { color: var(--eem-deep); }
.runrow-time {
  font-weight: 600; font-variant-numeric: tabular-nums; color: var(--eem-ink);
}
.runrow-span, .runrow-metrics { font-variant-numeric: tabular-nums; }
.runrow-span { color: var(--eem-ink); white-space: nowrap; }
.runrow-metrics { color: var(--eem-muted); font-size: var(--wa-font-size-s); }
/* Le mode de lancement : l'infobulle nomme les sources choisies, et le pointillé
   annonce qu'il y a quelque chose à survoler. L'icône double un compte écrit, la
   teinte ne portant rien à elle seule. */
.runrow-src {
  display: inline-flex; align-items: center; gap: .35em; white-space: nowrap;
  font-size: var(--wa-font-size-s); color: var(--eem-muted); cursor: help;
  border-bottom: 1px dotted var(--eem-border);
}
.runrow-src wa-icon { font-size: .9em; }
.runrow-src.is-manual { color: var(--eem-deep); }
.runrow-lost { color: #8a4b06; }
.runrow-state {
  display: inline-flex; align-items: center; gap: var(--wa-space-2xs);
  justify-content: flex-end;
}
/* L'avancement de l'analyse : un mot, et un rail qui le double. Le rail seul ne
   porterait rien pour un lecteur d'écran, d'où le libellé qui l'accompagne. */
.runrow-an { display: grid; gap: .15rem; min-width: 7.5rem; }
.runrow-an-line { font-size: var(--wa-font-size-s); color: var(--eem-ink); }
.runrow-an-line b { font-weight: 600; font-variant-numeric: tabular-nums; }
.runrow-rail {
  height: .3rem; border-radius: var(--wa-border-radius-pill);
  background: var(--eem-border); overflow: hidden;
}
.runrow-rail i { display: block; height: 100%; background: var(--eem-green); }
.runrow-rail.is-running i { background: #8a5a0f; }
.runrow-none {
  font-size: var(--wa-font-size-s); color: var(--eem-muted); font-style: italic;
  min-width: 7.5rem;
}
.runrow-acts { display: inline-flex; gap: var(--wa-space-3xs); justify-content: flex-end; }
/* Le seuil est mesuré et non choisi : les sept champs d'un rang demandent près de
   900 px, et la zone de contenu n'en offre autant qu'au delà de 1180 px de fenêtre,
   la barre latérale en prenant 280. En dessous, la ligne se replie sur cinq rangs
   plutôt que de sortir de la carte, qui la rognerait. */
@media (max-width: 78rem) {
  /* Étroit : l'heure, la juridiction et les actions tiennent le premier rang, le
     reste passe dessous. Rien ne part. */
  .runrow { grid-template-columns: auto auto 1fr auto; }
  .runrow-span { grid-column: 1 / -1; grid-row: 2; }
  .runrow-src { grid-column: 1 / -1; grid-row: 3; justify-self: start; }
  .runrow-metrics { grid-column: 1 / -1; grid-row: 4; }
  .runrow-state { grid-column: 1 / -1; grid-row: 5; justify-content: flex-start; }
  .runrow-acts { grid-column: 4; grid-row: 1; }
}
@media (prefers-color-scheme: dark) {
  .runrow-lost { color: #f0c48c; }
  .runrow-rail.is-running i { background: #e0a45c; }
}

/* Pagination (barre sous les tableaux) */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wa-space-s); padding: var(--wa-space-s) var(--wa-space-m); border-top: 1px solid var(--eem-border); }
.pager:empty { display: none; }
.pager-size { display: inline-flex; align-items: center; gap: .5em; font-size: var(--wa-font-size-m); color: var(--eem-muted); }
.pager-select { width: 5rem; }
.pager-info { font-size: var(--wa-font-size-m); color: var(--eem-muted); }
.pager-nav { display: inline-flex; align-items: center; gap: var(--wa-space-2xs); }
.pager-goto { display: inline-flex; align-items: center; gap: .4em; font-size: var(--wa-font-size-m); color: var(--eem-muted); }
/* La case où l'on tape le numéro de page. Les flèches natives du champ nombre sont
   masquées : elles doublent les chevrons et coûtent de la largeur. Les flèches du
   clavier continuent de fonctionner. */
.pager-jump { font: inherit; width: 3.6em; text-align: center; padding: .25em .3em;
  border: 1px solid var(--eem-border); border-radius: var(--wa-border-radius-m);
  background: var(--eem-card); color: var(--eem-ink);
  font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.pager-jump::-webkit-outer-spin-button,
.pager-jump::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Le paginateur d'un dépliant est plus discret que celui du livrable : pas de filet
   au-dessus, il suit déjà un tableau bordé. */
.ev-fold-body .pager { padding: var(--wa-space-2xs) 0 0; border-top: none;
  font-size: var(--wa-font-size-s); }

/* Bascule segmentée (vue Codes d'activité) */
.seg { display: inline-flex; gap: var(--wa-space-2xs); }
.cat-add-btn { margin-top: var(--wa-space-2xs); }
.cat-new { margin-top: var(--wa-space-s); padding: var(--wa-space-s); border: 1px solid var(--eem-border); border-radius: var(--wa-border-radius-m); background: var(--eem-sky-soft); display: flex; flex-direction: column; gap: var(--wa-space-2xs); }
.cat-new-actions { display: flex; justify-content: flex-end; gap: var(--wa-space-2xs); }

/* Liens vers les gazettes : filtres de la barre d'outils et cellule d'adresse.
   Les URL du classeur vont jusqu'à 229 caractères : on les tronque visuellement
   (le lien reste complet dans « href » et dans l'infobulle) pour que le tableau
   garde des colonnes lisibles. */
.toolbar .flt-select { flex: 0 1 13rem; min-width: 9rem; }
.url-cell { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; color: var(--eem-deep); }
.url-cell:hover { text-decoration: underline; }

/* utilities (de-inlined) */
.u-full { width: 100%; }
.u-ml-auto { margin-left: auto; }

/* Une ligne de résultat qui attend une relecture. Le triangle est redondant avec la
   pastille de verdict de la ligne : la couleur ne porte rien seule. 6,8:1 sur fond
   clair, 8,2:1 en sombre. */
.lv-warn { color: #8a4b06; margin-inline-end: .2em; vertical-align: -.1em; }
.lv-review td { background: color-mix(in srgb, #8a4b06 5%, transparent); }
/* La ligne qu'un retour d'analyse conjointe vient de rejoindre. Elle prend aussi
   le focus, qui dit la même chose à qui ne voit pas la marque, et le trait de tête
   la distingue d'une ligne à relire même sans la teinte. */
.lv-jumped td { background: color-mix(in srgb, var(--eem-deep) 8%, transparent); }
.lv-jumped td:first-child { box-shadow: inset .2rem 0 0 0 var(--eem-deep); }
/* La cellule dont le modèle n'a pas su donner la valeur, distinguée de celle où la
   valeur ne s'applique pas, qui porte un tiret. Le mot accompagne l'icône : ni la
   couleur ni le symbole ne portent seuls l'information, et l'infobulle dit ce qui
   manque au document. */
.lv-unsure { display: inline-flex; align-items: center; gap: .25em;
  color: #6d3b05; font-size: var(--wa-font-size-s); }
.lv-unsure wa-icon { flex: 0 0 auto; color: #8a4b06; }
/* Ce qui manque au registre, au bout du nom du document : le geste d'inscription,
   en petit bouton à bordure, sur sa propre ligne sous le nom. Le navy sur blanc
   fait 11:1. */
.lv-add-reg { display: flex; width: max-content; align-items: center; gap: .3em;
  margin-block-start: .4em; padding: .2em .55em; cursor: pointer;
  border: 1px solid var(--eem-border); border-radius: var(--wa-border-radius-m);
  background: var(--eem-card); color: var(--eem-deep); font: inherit;
  font-size: var(--wa-font-size-xs); font-weight: 600; white-space: nowrap; }
.lv-add-reg:hover { border-color: var(--eem-deep); }
.lv-add-reg:focus-visible { outline: 2px solid var(--eem-deep); outline-offset: 2px; }
/* Une marque réduite à son icône (voir « iconMark »). Le gris de « Hors registre »
   se distingue de l'orange d'« Indéterminé ». Les deux dépassent 3:1 sur blanc. */
.lv-ico { display: inline-flex; vertical-align: middle; font-size: var(--wa-font-size-l); }
.lv-ico-out { color: #4a5a65; }
.lv-ico-unsure { color: #8a4b06; }
/* La suite d'un résumé coupé, au bout de la cellule (voir « resumeCell ») : le geste
   est écrit, sans fond, et ouvre la fenêtre du résumé entier. Le navy sur la carte
   fait 11:1, et c'est le mot qui porte l'information, non la couleur. Le bouton passe
   à la ligne sous le texte plutôt que d'allonger la cellule. */
.lv-more { display: inline-flex; align-items: center; margin-block-start: .3em;
  padding: 0; border: 0; background: none; cursor: pointer; color: var(--eem-deep);
  font: inherit; font-size: var(--wa-font-size-s); font-weight: 600;
  white-space: nowrap; }
.lv-more:hover { text-decoration: underline; }
.lv-more:focus-visible { outline: 2px solid var(--eem-deep); outline-offset: 2px;
  border-radius: var(--wa-border-radius-s); }
/* Le compte à relire, à côté de son onglet. C'est un bouton qui filtre l'onglet
   sur ces lignes, et son fond pâle marque le filtre posé. */
.ev-tab-group { display: inline-flex; align-items: center; flex: 0 0 auto;
  border-bottom: 2px solid transparent; }
.ev-tab-group:has(.ev-tab[aria-selected="true"]) { border-bottom-color: var(--eem-deep); }
.ev-tab-group > .ev-tab { border-bottom: 0; padding-inline-end: .4em; }
/* La hauteur est remise à celle du texte : Web Awesome donne à tout bouton celle
   d'un champ de formulaire. */
.ev-tab-warn { display: inline-flex; align-items: center; gap: .3em; height: auto;
  flex: 0 0 auto; margin-inline-end: .7em; padding: .1em .5em; cursor: pointer;
  border: 1px solid transparent; border-radius: 999px; background: none;
  color: #8a4b06; font: inherit; font-size: var(--wa-font-size-s); font-weight: 600;
  line-height: 1.3; white-space: nowrap; }
/* Une puce de filtre colle à la barre des onglets, sans la marge qui la sépare
   d'habitude du tableau. */
.ev-tabs-bar:has(+ .filter-chips:not([hidden])) { margin-bottom: 0; }
.ev-tab-warn:hover { border-color: #8a4b06; }
.ev-tab-warn[aria-pressed="true"] { background: #fbf3e6; border-color: #8a4b06; }
.ev-tab-warn:focus-visible { outline: 2px solid var(--eem-deep); outline-offset: 2px; }
@media (prefers-color-scheme: dark) {
  .lv-warn, .ev-tab-warn { color: #e0a45c; }
  .ev-tab-warn:hover, .ev-tab-warn[aria-pressed="true"] { border-color: #e0a45c; }
  .ev-tab-warn[aria-pressed="true"] { background: rgba(224, 164, 92, .15); }
  .lv-unsure, .srcrow-lost { color: #f0c48c; }
  .lv-add-reg { color: #cfe6f3; background: transparent; }
  .lv-add-reg:focus-visible { outline-color: #cfe6f3; }
  .lv-ico-out { color: #d3dce2; }
  .lv-ico-unsure { color: #e0a45c; }
  .dp-done-ico { color: #7cc474; }
  .lv-unsure wa-icon, .srcrow-lost wa-icon { color: #e0a45c; }
  .lv-review td { background: color-mix(in srgb, #e0a45c 8%, transparent); }
  .lv-jumped td { background: color-mix(in srgb, #9fc3f0 10%, transparent); }
  .lv-jumped td:first-child { box-shadow: inset .2rem 0 0 0 #9fc3f0; }
}

/* LEGISinfo, la septième source du fédéral. Les deux registres de consultations
   partagent leur teinte et se distinguent par leur nom (voir « SOURCE_TAGS ») ;
   celle-ci en reçoit une propre, plus foncée que celle de l'Assemblée nationale
   pour ne pas la confondre avec elle. 9,9:1 sur son fond. */
.src-ca-legis { background: #eeeafa; color: #3b2f6b; }
/* Le registre des espèces en péril, huitième source du fédéral. Un vert plus
   sombre que celui du ministère de l'Environnement du Québec. 6,9:1 sur son fond. */
.src-ca-especes { background: #e6f4ec; color: #1f5d3a; }

/* ===== Colonnes fixes et dépliant de ligne =================================
 *
 * Deux règles gouvernent tous les tableaux :
 *
 * 1. chaque colonne a une largeur, donc le tableau ne se réorganise pas parce
 *    qu'une valeur est longue ;
 * 2. une colonne qui ne tient plus est MASQUÉE et sa valeur revient dans le
 *    dépliant de la ligne, plutôt que d'être comprimée jusqu'à l'illisible.
 *
 * Le partage tient à une convention : la classe « .c-x » porte la colonne, la
 * classe « .d-x » porte son entrée du dépliant, et la même requête de media
 * échange les deux. Une valeur n'est donc jamais affichée deux fois.
 *
 * L'ordre d'abandon vient de l'usage, non de la place disponible : ce qui part en
 * premier est ce dont l'analyste a le moins besoin pour reconnaître une ligne. */

/* Colonne du bouton de dépliage, et colonne des actions : en rem, la seule chose
   qu'elles portent étant des boutons. Les deux boutons restent côte à côte : mis
   l'un sous l'autre, ils doublaient la hauteur de la ligne et débordaient sur la
   colonne voisine. */
table.eem th.c-fold, table.eem td.c-fold { padding-left: var(--wa-space-s); padding-right: 0; }
table.eem .row-actions { flex-wrap: nowrap; }
/* Deux icônes n'ont pas besoin du rembourrage d'un bouton à libellé : le resserrer
   rend la colonne des actions nettement plus courte. */
table.eem .row-actions wa-button::part(base) { padding-inline: .3rem; min-width: 0; }
/* Le menu d'une ligne des résultats. « bindAutoColumns » donne à la colonne des
   actions la largeur de ce que « .row-actions » porte, mesurée sur ses enfants : un
   « wa-dropdown » en « display: contents » ne mesurerait rien, et la colonne
   resterait à son repli. Il prend donc la largeur de son bouton. */
table.eem .row-actions wa-dropdown { display: inline-flex; }
/* Les entrées d'un menu pas encore défini sont du texte ordinaire dans la cellule :
   sans cette règle, le menu paraît déplié le temps que le composant se charge, et la
   colonne se mesure sur la somme des libellés plutôt que sur son bouton. */
table.eem .row-actions wa-dropdown:not(:defined) > :not([slot="trigger"]) {
  display: none;
}
.det-toggle wa-icon { transition: transform .15s ease; }
.det-toggle.open wa-icon { transform: rotate(90deg); }

/* Le bouton de dépliage ne paraît que s'il y a quelque chose à ouvrir : soit une
   colonne a été abandonnée (« has-folded », posée par « bindAutoColumns »), soit le
   dépliant porte des champs qui n'ont pas de colonne (« det-always », les clients
   et leur responsable, leur liste de distribution, leur commentaire). */
table.eem .c-fold { display: table-cell; }
table.eem .c-fold .det-toggle { display: none; }
table.eem.has-folded .c-fold .det-toggle,
table.eem.det-always .c-fold .det-toggle,
table.eem .c-fold.det-own .det-toggle { display: inline-flex; }

/* La ligne dépliée : pas de filet au-dessus, elle appartient à la ligne du dessus.
   « min-width: 0 » et une colonne de libellés bornée sont indispensables : avec
   « max-content », le minimum de contenu du dépliant pouvait dépasser la cellule
   qui l'accueille, et déplier une ligne écrasait les colonnes au-dessus. */
tr.det-row > td { padding-top: 0; min-width: 0; background: var(--eem-sky-soft); }
/* La barre d'accent revient au bord de la ligne, le bleu allant maintenant d'un
   bord à l'autre. */
tr.det-row > td.c-fold { box-shadow: inset 3px 0 0 var(--eem-deep); }
tr.det-row .det-list { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: .55rem 1.6rem; align-items: start; padding: .95rem var(--wa-space-m) 1.05rem; }
.det-item { display: contents; }
.det-k { overflow-wrap: normal; padding-top: .1em; font-size: var(--wa-font-size-s); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--eem-muted); }
.det-v { white-space: pre-line; color: var(--eem-ink); min-width: 0; overflow-wrap: break-word; }
/* Une valeur en points prend les deux colonnes du dépliant, son étiquette au dessus.
   Rangée dans la colonne de droite, elle n'aurait qu'un tiers de la largeur, l'étiquette
   en occupant 9 rem : le résumé d'un projet de règlement y tient sur trois fois plus de
   lignes. La valeur est désignée par ce qu'elle porte, les entrées propres au dépliant
   étant rendues sans classe de colonne. */
tr.det-row .det-k:has(+ .det-v .lv-points),
tr.det-row .det-v:has(.lv-points) { grid-column: 1 / -1; }
/* Une entrée reprenant une colonne ne paraît QUE si cette colonne est masquée.
   Les entrées sans classe de colonne restent visibles. */
.det-item[class*=" d-"] { display: none; }

/* L'échange colonne / entrée du dépliant, une paire par colonne abandonnable. Le
   nom est partagé entre les tableaux, la classe étant posée sur le tableau lui-même. */
table.eem.hide-contrat .c-contrat, table.eem.hide-dom .c-dom, table.eem.hide-cat .c-cat,
table.eem.hide-jur .c-jur, table.eem.hide-ind .c-ind,
table.eem.hide-scian .c-scian, table.eem.hide-mois .c-mois, table.eem.hide-lang .c-lang,
table.eem.hide-hab .c-hab, table.eem.hide-code .c-code, table.eem.hide-cae .c-cae,
table.eem.hide-eng .c-eng, table.eem.hide-note .c-note,
table.eem.hide-pub .c-pub,
table.eem.hide-statut .c-statut, table.eem.hide-nom .c-nom,
table.eem.hide-sujet .c-sujet, table.eem.hide-type .c-type,
table.eem.hide-resume .c-resume, table.eem.hide-terme .c-terme,
table.eem.hide-justif .c-justif, table.eem.hide-appl .c-appl,
table.eem.hide-src .c-src, table.eem.hide-pages .c-pages,
table.eem.hide-open .c-open, table.eem.hide-deep .c-deep { display: none; }
table.eem.hide-contrat .det-item.d-contrat, table.eem.hide-dom .det-item.d-dom,
table.eem.hide-cat .det-item.d-cat, table.eem.hide-jur .det-item.d-jur,
table.eem.hide-ind .det-item.d-ind, table.eem.hide-scian .det-item.d-scian,
table.eem.hide-mois .det-item.d-mois, table.eem.hide-lang .det-item.d-lang,
table.eem.hide-hab .det-item.d-hab, table.eem.hide-code .det-item.d-code,
table.eem.hide-cae .det-item.d-cae, table.eem.hide-eng .det-item.d-eng,
table.eem.hide-note .det-item.d-note,
table.eem.hide-pub .det-item.d-pub,
table.eem.hide-statut .det-item.d-statut, table.eem.hide-nom .det-item.d-nom,
table.eem.hide-sujet .det-item.d-sujet, table.eem.hide-type .det-item.d-type,
table.eem.hide-resume .det-item.d-resume, table.eem.hide-terme .det-item.d-terme,
table.eem.hide-justif .det-item.d-justif, table.eem.hide-appl .det-item.d-appl,
table.eem.hide-src .det-item.d-src,
table.eem.hide-pages .det-item.d-pages,
table.eem.hide-open .det-item.d-open,
table.eem.hide-deep .det-item.d-deep { display: contents; }

/* Aucune largeur de colonne ici : elles sont posées par « bindAutoColumns », en
   rem, à partir du plan de chaque vue. Les déclarer en pourcentage ici les faisait
   rétrécir au prorata même après un abandon, jusqu'à couper « ENV » en trois. */

/* Le bloc de départ de l'analyse : il remplace le tableau tant que rien n'a été
   analysé, et porte l'avancement de la passe pendant qu'elle tourne.
   Deux allures, et la différence porte l'information : le fond bleuté ne paraît
   que pendant la passe, l'attente avant le premier lancement restant sur blanc. */
/* Aucune marge : le bloc occupe toute la largeur de la carte et se pose contre la
   barre d'outils, comme les autres bandes de la console. Une marge y laissait un
   bandeau blanc entre la barre et le fond bleuté. Sa propre chair vient de son
   remplissage, et le filet du bas le sépare des onglets. */
.vr-start { margin: 0; }
.vr-start.is-running {
  padding: var(--wa-space-m); background: var(--eem-sky-soft);
  border-bottom: 1px solid var(--eem-border);
}
.vr-start.is-empty { padding: 3rem var(--wa-space-m); }
/* L'appel centré : une seule chose à regarder, et la mesure du texte l'empêche de
   courir sur toute la largeur de la carte, où le bouton finissait à l'autre bout. */
.vr-start-center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--wa-space-2xs); }
.vr-start-center strong { color: var(--eem-deep); font-size: var(--wa-font-size-l); }
.vr-start-center p { margin: 0; max-width: 44ch; color: var(--eem-muted); font-size: var(--wa-font-size-s); line-height: 1.5; }
.vr-start-center wa-button { margin-top: var(--wa-space-m); }
.vr-start-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: var(--wa-space-2xs); border-radius: 50%; background: var(--eem-sky-soft); color: var(--eem-deep); font-size: 1.25rem; }
.vr-start-sub { margin-top: var(--wa-space-2xs); color: var(--eem-muted); font-size: var(--wa-font-size-s); font-variant-numeric: tabular-nums; }
/* L'avis d'une passe arrêtée en chemin : sur une ligne, au dessus du tableau, dans
   l'ambre qui sert déjà à ce qui attend une relecture. L'icône double la couleur,
   qui ne porte jamais seule l'information. */
.vr-start-warn { display: flex; align-items: center; gap: var(--wa-space-s) var(--wa-space-l);
  padding: var(--wa-space-s) var(--wa-space-l);
  border-bottom: 1px solid var(--eem-border);
  background: color-mix(in srgb, #8a4b06 7%, transparent); color: #6d3b05;
  font-size: var(--wa-font-size-s); }
.vr-start-warn wa-icon { flex: 0 0 auto; color: #8a4b06; }
/* Le texte prend la place, le bouton garde la sienne : sur deux lignes, le texte ne
   touche ni l'icône ni le bouton. */
.vr-start-warn > span { flex: 1 1 20rem; line-height: 1.5; }
.vr-start-warn > wa-button { flex: 0 0 auto; }
@media (prefers-color-scheme: dark) {
  .vr-start-warn { background: color-mix(in srgb, #e0a45c 10%, transparent);
    color: #f0c48c; }
  .vr-start-warn wa-icon { color: #e0a45c; }
}
/* L'encadré des travaux interrompus, en tête des veilles lancées : le même ambre que
   l'avis d'une passe arrêtée, et une ligne par travail. */
.stopped { margin-bottom: var(--wa-space-m); border: 1px solid #e2c9a6;
  border-radius: var(--wa-border-radius-l); overflow: hidden;
  background: color-mix(in srgb, #8a4b06 7%, var(--eem-card)); color: #6d3b05; }
.stopped-head { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--wa-space-2xs) var(--wa-space-s); padding: var(--wa-space-s) var(--wa-space-m);
  font-size: var(--wa-font-size-s); }
.stopped-icon { color: #8a4b06; }
.stopped-title { margin: 0; font-size: var(--wa-font-size-m); font-weight: 700; color: #6d3b05; }
.stopped-line { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--wa-space-s) var(--wa-space-l); padding: var(--wa-space-s) var(--wa-space-m);
  border-top: 1px solid #efdcc2; background: var(--eem-card); color: var(--eem-ink); }
.stopped-say { flex: 1 1 26rem; display: flex; flex-direction: column; gap: .2em; }
.stopped-say strong { color: var(--eem-deep); }
.stopped-say span { color: var(--eem-muted); font-size: var(--wa-font-size-s); line-height: 1.5; }
.stopped-acts { display: flex; gap: var(--wa-space-xs); }
.stopped-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: var(--wa-space-s); color: var(--eem-muted); font-size: var(--wa-font-size-s); padding: var(--wa-space-2xs) var(--wa-space-m);
  border-top: 1px solid #efdcc2; background: var(--eem-card); }
@media (prefers-color-scheme: dark) {
  .stopped { border-color: #6b4a22; background: color-mix(in srgb, #e0a45c 10%, var(--eem-card));
    color: #f0c48c; }
  .stopped-icon { color: #e0a45c; }
  .stopped-title { color: #f0c48c; }
  .stopped-line, .stopped-foot { border-top-color: #6b4a22; }
}
/* L'icône d'un badge « Interrompue » : un arrêt n'est pas un échec. */
.badge-icon { margin-right: .3em; font-size: .8em; }
.vr-start-body { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wa-space-m); }
.vr-start-say { flex: 1 1 18rem; display: flex; flex-direction: column; gap: .15em; }
.vr-start-say strong { color: var(--eem-deep); }
.vr-start-say span { color: var(--eem-muted); font-size: var(--wa-font-size-s); }
.vr-start-spin { flex: 0 0 auto; font-size: 1.4rem; color: var(--eem-deep); }
/* La barre prend toute la ligne sous le texte : la part faite se lit d'un coup, et
   le compte écrit au-dessus la dit aussi, la couleur ne portant rien seule. */
.vr-bar { flex: 1 1 100%; height: .4rem; background: #fff; border-radius: var(--wa-border-radius-pill); overflow: hidden; }
.vr-bar > span { display: block; height: 100%; background: var(--eem-deep); transition: width .3s ease; }
/* Le compte de l'étape en cours, devant sa barre. */
.vr-progress { flex: 1 1 100%; display: flex; align-items: center; gap: var(--wa-space-m); }
.vr-progress .vr-bar { flex: 1 1 auto; }
.vr-progress-count { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--eem-deep); white-space: nowrap; }
/* Les trois étapes sous la barre. La coche et « à venir » disent l'état, la couleur
   le double. */
.vr-steps { flex: 1 1 100%; font-size: var(--wa-font-size-s); color: var(--eem-muted); }
.vr-step.is-done { color: var(--eem-green); font-weight: 600; }
.vr-step.is-current { color: var(--eem-deep); font-weight: 700; }

/* L'encadré d'une analyse en cours ou arrêtée (shared/progress.js). L'avancement
   domine. Le compte est en grand à droite du titre de l'étape, et le bouton d'arrêt
   est au bout de la barre, là où l'on arrête un téléchargement. */
.pg, .pg-stopped { display: grid; gap: var(--wa-space-s); }
.pg.is-boxed { padding: var(--wa-space-m); border-radius: var(--wa-border-radius-m);
  background: var(--eem-sky-soft); }
.pg-top { display: flex; align-items: center; gap: var(--wa-space-xs);
  font-size: var(--wa-font-size-s); color: var(--eem-muted); }
.pg-top b { color: var(--eem-deep); font-weight: 600; }
.pg-spin { font-size: 1rem; }
.pg-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--wa-space-2xs) var(--wa-space-s); }
.pg-title { margin: 0; flex: 1 1 12rem; font-size: var(--wa-font-size-l); font-weight: 700; color: var(--eem-deep); }
.pg-count { margin: 0; font-variant-numeric: tabular-nums; color: var(--eem-ink); }
.pg-count strong { font-size: var(--wa-font-size-xl); color: var(--eem-deep); }
.pg-row { display: flex; align-items: center; gap: var(--wa-space-m); }
.pg-bar { flex: 1 1 auto; height: .5rem; border-radius: var(--wa-border-radius-pill);
  overflow: hidden; background: var(--eem-card); box-shadow: inset 0 0 0 1px #d3e3ec; }
.pg-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--eem-deep);
  transition: width .3s ease; }
.pg.is-stopping .pg-bar > span { background: var(--eem-muted); }
.pg-stop { flex: none; }
.pg-say { margin: 0; max-width: 75ch; font-size: var(--wa-font-size-s); color: var(--eem-muted); }
/* Les étapes en segments : la longueur ne compte pas, l'état oui. */
.pg-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--wa-space-xs); margin: 0; padding: 0; list-style: none;
  font-size: var(--wa-font-size-xs); color: var(--eem-muted); }
.pg-seg-i { display: grid; gap: .3rem; }
.pg-seg-i i { display: block; height: .25rem; border-radius: var(--wa-border-radius-pill); background: #d3e3ec; }
.pg-seg-i.is-done { color: var(--eem-green); font-weight: 600; }
.pg-seg-i.is-done i { background: var(--eem-green); }
.pg-seg-i.is-now { color: var(--eem-deep); font-weight: 700; }
.pg-seg-i.is-now i { background: linear-gradient(90deg, var(--eem-deep) var(--fill, 0%), #d3e3ec var(--fill, 0%)); }
/* Arrêtée : le même dessin, dans l'ambre d'une passe interrompue. */
.pg-stopped { padding: var(--wa-space-m) var(--wa-space-l);
  border-bottom: 1px solid var(--eem-border);
  background: color-mix(in srgb, #8a4b06 7%, var(--eem-card)); color: #6d3b05; }
.pg-stopped.is-boxed { padding: var(--wa-space-m); border-bottom: 0; border-radius: var(--wa-border-radius-m); }
.pg-stopped .pg-top, .pg-stopped .pg-top b, .pg-stopped .pg-title, .pg-stopped .pg-say { color: #6d3b05; }
.pg-stopped .pg-top wa-icon { color: #8a4b06; }
.pg-stopped .pg-main { align-items: center; }
@media (max-width: 34rem) {
  .pg-row { flex-wrap: wrap; }
  .pg-bar { flex-basis: 100%; }
  .pg-stop { margin-left: auto; }
  .pg-stopped { padding-inline: var(--wa-space-m); }
}
.vr-step-sep { color: var(--eem-border); }

/* Les deux listes de codes du panneau des mots clés. Elles n'ont pas d'en-tête
   nommé, donc sans largeur la mise en page fixe leur donnerait trois colonnes
   égales, la case à cocher aussi large que le libellé. */
#kwCaeTable th.col-check, #kwScianTable th.col-check { width: 2.8rem; }
#kwCaeTable th:nth-child(2), #kwScianTable th:nth-child(2) { width: 7rem; }

/* Les législations suivies, dans le panneau client. Le registre en compte des
   centaines : la liste défile dans sa propre fenêtre, sinon le panneau ne rend
   plus ni le suivi ni le bouton d'enregistrement atteignables. */
.ref-pick-scroll { max-height: 22rem; overflow-y: auto; padding: .45rem .7rem; border: 1px solid var(--eem-border); border-radius: var(--wa-border-radius-m); }
.rp-row { display: block; padding: .22rem 0; }
/* Le sujet, la juridiction et le nom vivent dans l'étiquette de la case : ils la
   nomment, et se répartissent sur plusieurs lignes quand le nom est long. */
.rp-lab { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .1em .45em; }
.rp-nom { font-weight: 600; color: var(--eem-ink); }
/* Le code officiel suit le nom, en retrait de ton : c'est le nom qui désigne la
   législation. */
.rp-code { color: var(--eem-muted); }
.ref-pick-acts { align-items: center; margin-bottom: .5rem; }
.rp-trop { color: var(--eem-muted); font-size: var(--wa-font-size-s); text-align: center; margin: .6rem 0 .2rem; }
/* La barre de filtres est une grappe : ses champs s'y alignent, et le rythme
   vertical des champs du panneau ne s'applique donc pas à eux. */
#drawerBody .codif-toolbar,
#kwDrawerBody .codif-toolbar { margin-bottom: .7rem; }
#drawerBody .codif-toolbar wa-input,
#drawerBody .codif-toolbar wa-select { display: revert; margin-bottom: 0; }
#drawerBody .codif-toolbar wa-select { min-width: 10rem; }
#drawerBody .codif-toolbar wa-input.grow { flex: 1 1 12rem; }
#drawerBody #clRefPick { margin-bottom: 1.15rem; }

/* Le questionnaire du site, dans le panneau client. Les questions se suivent dans
   l'ordre du formulaire, et la liste défile dans sa propre fenêtre pour que le suivi
   et le bouton d'enregistrement restent atteignables. */
#drawerBody #clQuizList { max-height: 26rem; overflow-y: auto; margin-bottom: 1.15rem; padding-inline-end: .35rem; }
/* Le tableau du questionnaire. */
#sqTable td.c-quest { white-space: normal; }
.sq-hint { font-size: var(--wa-font-size-s); margin: 0; }
/* Les sous-questions dans la cellule de la question qu'elles prolongent. Le retrait
   et le filet les rattachent à elle, et leur rang les compte : elles n'en tiennent
   aucun au formulaire. */
.sq-suite-lines { list-style: none; margin: .35rem 0 0; padding: 0 0 0 .6rem;
  border-inline-start: 2px solid var(--eem-border); }
.sq-suite-lines li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45em;
  font-size: var(--wa-font-size-s); margin-bottom: .2rem; }
.sq-suite-lines li:last-child { margin-bottom: 0; }
.sq-suite-no { font-weight: 700; color: var(--eem-muted); font-size: var(--wa-font-size-s); }
.sq-suite-nat { color: var(--eem-muted); font-size: var(--wa-font-size-s); }
/* Les sous-questions dans la fenêtre d'édition : une ligne par sous-question, le
   texte prenant la place en trop. Sous une fenêtre étroite, la ligne se replie
   plutôt que de comprimer le texte à trois caractères. */
.sq-suites-head { display: flex; align-items: center; justify-content: space-between;
  gap: .6em; margin-bottom: .4rem; }
.sq-suites-title { font-weight: 600; font-size: var(--wa-font-size-s); }
.sq-suite-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; }
.sq-suite-row .sq-s-text { flex: 1 1 12rem; min-width: 0; }
.sq-suite-row .sq-s-kind { flex: 0 0 10rem; }
.sq-suites-vide { font-size: var(--wa-font-size-s); margin: 0; }
/* Une question et sa réponse : le rythme vertical du panneau porte sur le bloc, et
   non sur chacun de ses champs, sinon soixante-neuf questions se lisent en escalier. */
.q-item { margin-bottom: 1.1rem; }
.q-item:last-child { margin-bottom: 0; }
#drawerBody .q-item wa-input,
#drawerBody .q-item wa-select,
#drawerBody .q-item wa-textarea { margin-bottom: 0; }
/* Une question de suite précise celle qui la précède : le décalage et le filet le
   disent sans recourir à la couleur seule. */
.q-suite { margin: .55rem 0 0 1rem; padding-inline-start: .85rem; border-inline-start: 2px solid var(--eem-border); }
/* Les valeurs déjà choisies d'une question à choix multiples, sous le champ où
   elles se retapent. */
.q-tags { margin-top: .3rem; }
/* L'intitulé qui ouvre une rubrique. Il se détache par la graisse et l'espace, et
   non par la couleur seule ; la première de la liste ne creuse pas au-dessus
   d'elle, le filet du panneau l'y précédant déjà. */
.q-rubrique { font-size: var(--wa-font-size-s); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--eem-deep); margin: 1.5rem 0 .75rem; }
.q-rubrique:first-child { margin-top: 0; }

/* --- La fiche d'un site, dans le panneau du client ------------------------
   Un client compte jusqu'à neuf sites, chacun décrit par son questionnaire. La
   fiche les empile repliés : c'est le site qui porte les réponses, et neuf
   questionnaires dépliés ne se lisent pas. */
.site-card { border: 1px solid var(--eem-border); border-radius: var(--wa-border-radius-m);
  background: var(--eem-card); margin-bottom: .7rem; overflow: hidden; }
.site-card:last-child { margin-bottom: 0; }
/* L'en-tête est le bouton de dépliage entier : la cible vaut la ligne, et non la
   seule flèche. */
.site-head { display: flex; align-items: center; gap: .55em; width: 100%;
  padding: .6rem var(--wa-space-s); border: 0; background: #eef1f4; cursor: pointer;
  text-align: start; font: inherit; color: inherit; }
.site-head:hover { background: #e4e9ee; }
.site-head:focus-visible { outline: 2px solid var(--eem-deep); outline-offset: -2px; }
.site-chev { flex: 0 0 auto; color: var(--eem-muted); transition: transform .15s ease; }
.site-head.open .site-chev { transform: rotate(90deg); }
.site-nom { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.site-lieu { font-size: var(--wa-font-size-s); min-width: 0; overflow-wrap: anywhere; }
/* Le compte des réponses ferme la ligne, quelle que soit la longueur du nom. */
.site-cpt { flex: 0 0 auto; margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.site-body { padding: var(--wa-space-s); }
/* L'identité que l'en-tête du questionnaire écrit, en champs : l'analyste la
   corrige là où il la lit. La ville, la province et le code postal tiennent la
   ligne à deux quand la largeur le permet ; le nom et l'adresse la prennent
   entière, étant les plus longs. */
.site-ident { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0 1.2rem; align-items: start; margin-bottom: .8rem; }
.site-ident .wide { grid-column: 1 / -1; }
#drawerBody .site-ident wa-input { margin-bottom: .75rem; }
/* Les documents d'où les réponses viennent, et qui a rempli chacun. Le nom du
   fichier ouvre la fiche du document ; ce qu'il dit du répondant se saisit dessous,
   sur la même grille que l'identité du site. */
.site-docs { list-style: none; margin: 0 0 .9rem; padding: 0; display: grid; gap: .7rem; }
.site-docs li { border: 1px solid var(--eem-border); border-radius: var(--wa-border-radius-m);
  padding: .55rem var(--wa-space-s) 0; }
.doc-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5em;
  margin-bottom: .55rem; font-size: var(--wa-font-size-s); }
.site-docs wa-icon { flex: 0 0 auto; color: var(--eem-muted); }
.site-docs .doc-nom { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.doc-ident { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0 1.2rem; align-items: start; }
#drawerBody .doc-ident wa-input { margin-bottom: .75rem; }
.site-vide { font-size: var(--wa-font-size-s); margin: 0 0 .9rem; }
/* Le questionnaire du site, sous ce qui le décrit. */
.site-body .q-list { border-top: 1px solid var(--eem-border); padding-top: .9rem; }

/* Codes d'activité et industries : deux colonnes chacun, rien à replier, donc pas
   de bouton de dépliage. Leur colonne souple prend toute la largeur, ce qui évite
   à la fois le vide entre le code et son libellé et une bande d'en-tête qui
   s'arrêterait au milieu de la ligne. */