/* Copyright (c) 2026 Weiwei CHEN — TrustOR / Praetor0. All rights reserved. */
/* C4-20b — la feuille d'un relevé, en pleine page, et son impression.

   LE PARTI : LA LUMIÈRE, PAS L'ENCRE. Toute la console est sombre ; cette page
   ne l'est pas. Un document qu'on remet à un tiers est ivoire — c'est le
   dispositif « registre / sceau / preuve » que `design-tokens.css` porte déjà
   (`--el-lum-*`), et c'est aussi ce qui fait qu'une impression ne vide pas une
   cartouche. On réutilise ces jetons plutôt que d'en inventer (§1.130).

   ⚠️ PAS D'OR ICI, ET LE JETON N'EST MÊME PAS NOMMÉ. L'or sur l'encre posé sur
   du contenu statique est refusé par IHM-GOLD-DISCIPLINE — et cette garde-là ne
   dépouille pas les commentaires : écrire le nom du jeton pour dire qu'on ne
   s'en sert pas la fait rougir. La feuille n'a de toute façon ni sélection ni
   interaction à signaler dans son corps : sa hiérarchie se fait au poids et à la
   règle, pas à la couleur.

   ⚠️ 13px EST LE PLANCHER DU CORPS. 12px est RÉSERVÉ aux capitales
   (`text-transform:uppercase`), convention de toute la console. */

/* ── LA FEUILLE ──────────────────────────────────────────────────────────────*/

.cmp-releve .rel-feuille {
  background: var(--el-lum-ivory);
  color: var(--el-lum-ink);
  border: 1px solid var(--el-lum-sand);
  border-radius: 10px;
  margin: 0 24px 24px;
  padding: 32px 36px;
  /* Une feuille se lit à largeur de feuille. Au-delà, l'oeil perd la ligne —
     et c'est un document qu'on lit en entier, pas un tableau de bord qu'on
     balaie. */
  max-width: 900px;
  font-size: 13px;
  line-height: 1.6;
}

.cmp-releve .rel-tete { border-bottom: 2px solid var(--el-lum-sand); padding-bottom: 20px; }

.cmp-releve .rel-marque {
  font-family: var(--el-font-mono);
  font-size: 12px;               /* capitales — le seul endroit où 12 est permis */
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--el-lum-dim);
  margin-bottom: 14px;
}

/* La grille clé/valeur, sur la lumière. C'est la MÊME forme que `.cmp-now .kv`
   (grille plate, clé et valeur frères) — dupliquer la règle plutôt que la
   partager parce que les couleurs sont l'inverse l'une de l'autre. */
.cmp-releve .kv {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 5px 16px;
  align-items: baseline;
}
.cmp-releve .kv > b {
  color: var(--el-lum-mut);
  font-weight: 600;
  font-size: 13px;
}
.cmp-releve .kv > div { min-width: 0; overflow-wrap: anywhere; }
.cmp-releve .w { font-weight: 700; color: var(--el-lum-ink); }
.cmp-releve .sub { color: var(--el-lum-mut); font-size: 13px; }
.cmp-releve .fl { color: var(--el-lum-dim); font-style: italic; }
.cmp-releve code { font-family: var(--el-font-mono); font-size: 12.5px; overflow-wrap: anywhere; }
.cmp-releve code.sub { color: var(--el-lum-mut); }

/* ── LES BLOCS ───────────────────────────────────────────────────────────────*/

.cmp-releve .rel-bloc { margin-top: 30px; }
.cmp-releve .rel-bloc > h2 {
  font-family: var(--el-font-title);
  font-size: 16px;
  font-weight: 800;
  color: var(--el-lum-ink);
  margin: 0 0 14px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--el-lum-line);
}

.cmp-releve .rel-nature { margin: 0; color: var(--el-lum-mut); }

/* ── UNE MESURE ──────────────────────────────────────────────────────────────*/

.cmp-releve .rel-mesure {
  background: var(--el-lum-white);
  border: 1px solid var(--el-lum-line);
  border-radius: 8px;
  padding: 18px 20px;
  margin-bottom: 14px;
}
.cmp-releve .rel-mesure > h3 {
  font-family: var(--el-font-title);
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--el-lum-ink);
}
/* La barre entre les deux nombres. Elle SÉPARE, elle ne divise pas : c'est
   pourquoi elle est grise et discrète, jamais posée comme un opérateur. */
.cmp-releve .rel-sur { color: var(--el-lum-dim); padding: 0 2px; }
.cmp-releve .rel-motifs { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 6px; }
.cmp-releve .rel-motifs .q {
  background: var(--el-lum-cream);
  border: 1px solid var(--el-lum-line);
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 13px;
  color: var(--el-lum-mut);
}

/* ── LES ARTICLES RETENUS — le bloc le plus précieux de la feuille ───────────*/

.cmp-releve .rel-arts { margin-top: 16px; border-top: 1px solid var(--el-lum-line); padding-top: 14px; }
.cmp-releve .rel-arts.vide { color: var(--el-lum-dim); }
.cmp-releve .rel-arts-t {
  font-family: var(--el-font-mono);
  font-size: 12px;              /* capitales */
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--el-lum-dim);
  margin-bottom: 10px;
}
.cmp-releve .rel-art { margin-bottom: 14px; }
.cmp-releve .rel-art:last-child { margin-bottom: 0; }
.cmp-releve .rel-art-ref { font-weight: 700; margin-bottom: 3px; }
.cmp-releve .rel-art-d { margin-bottom: 6px; }
.cmp-releve .rel-art-d b { color: var(--el-lum-mut); font-weight: 600; }
/* LE TEXTE DE LA LOI. C'est le seul endroit du document où les mots du
   régulateur apparaissent : il se distingue de notre prose, sinon un lecteur
   ne sait plus qui parle. */
.cmp-releve .rel-art-c {
  margin: 0 0 6px;
  padding: 8px 14px;
  border-left: 3px solid var(--el-lum-sand);
  background: var(--el-lum-cream);
  color: var(--el-lum-ink);
  font-style: italic;
}
.cmp-releve .rel-art-by { font-size: 13px; }

/* ── CE QUE CE RAPPORT NE DIT PAS ────────────────────────────────────────────*/

.cmp-releve .rel-absences { margin: 0; padding-left: 20px; color: var(--el-lum-mut); }
.cmp-releve .rel-absences li { margin-bottom: 9px; }

.cmp-releve .rel-actes > .sub { margin-bottom: 4px; }

/* ── LA BARRE D'ACTIONS — elle appartient à la console, pas à la feuille ─────*/

.cmp-releve .rel-barre {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 16px 24px 14px;
}

/* ── L'IMPRESSION ────────────────────────────────────────────────────────────

   PAS DE BIBLIOTHÈQUE PDF (§1.76) : le rendu imprimable est du HTML, et le PDF
   vient du navigateur. Ce bloc fait trois choses, et rien d'autre —

     ① il retire de la page tout ce qui n'est pas le document : la sidebar, la
        barre du haut, le fil d'Ariane, et LA BARRE D'ACTIONS elle-même. Un
        bouton « Imprimer » imprimé sur la pièce remise à un inspecteur est le
        détail qui fait douter du reste ;
     ② il rend la feuille à la largeur du papier, sans cadre ni ombre — une
        bordure d'écran devient un trait à l'encre sur du papier ;
     ③ il empêche une mesure et ses articles d'être coupés en deux par un saut
        de page. Une citation d'article scindée entre deux feuillets se relit
        mal, et c'est le passage qu'un lecteur vérifie. */
@media print {
  /* Ce que le navigateur peint derrière la page : blanc, pas l'encre sombre de
     la console — sans quoi l'impression sort en aplat foncé. */
  html, body { background: #fff !important; }

  #console-sidebar,
  .el-topbar,
  #p0-crumb,
  .p0-page-header,
  .cmp-releve .rel-barre { display: none !important; }

  #console-main, .cmp-releve, .cmp-now { padding: 0 !important; margin: 0 !important; }

  .cmp-releve .rel-feuille {
    margin: 0 !important;
    max-width: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: #fff !important;
    color: #000 !important;
  }

  .cmp-releve .rel-mesure,
  .cmp-releve .rel-art {
    break-inside: avoid;
    page-break-inside: avoid;   /* les moteurs qui ne connaissent pas `break-inside` */
  }
  .cmp-releve .rel-mesure { background: #fff !important; }

  .cmp-releve .rel-bloc > h2 { break-after: avoid; page-break-after: avoid; }

  /* Les liens sortent en noir : un bleu de lien sur du papier est un bleu qui
     ne mène nulle part. */
  .cmp-releve a { color: #000 !important; text-decoration: none !important; }
}