/*
 * Identité Pactem — feuille unique, servie depuis le dépôt.
 *
 * DEUX DÉFAUTS QU'ELLE CORRIGE D'UN SEUL GESTE.
 *
 * La police de marque, Geist, était chargée depuis Google : chaque visite d'une
 * page Pactem transmettait l'adresse IP du visiteur à un tiers, sans base
 * légale, y compris sur la page de politique de confidentialité elle-même. Elle
 * est sous licence ouverte (OFL, servie à côté) : l'internaliser était possible
 * depuis le début. Retirer la cause vaut mieux que la décrire — règle 11.
 *
 * Et les cinq pages posées récemment — démonstration, charte, registre, corpus,
 * qualité — s'étaient inventé une identité propre : DM Sans, palette marine.
 * Une page nouvelle réutilise l'identité de la vitrine, elle ne s'en invente pas
 * une. Cette feuille est cette identité, à un seul endroit.
 *
 * CE QUI NE S'ALIGNE PAS SUR LA MARQUE.
 *
 * Les quatre couleurs de NIVEAU sont fixées par la charte §4 et mesurées pour un
 * rapport de contraste d'au moins 4,5:1 (§12). Elles ne se changent pas pour des
 * raisons esthétiques, et elles ne sont pas déclarées ici : elles viennent du
 * module de lexique du serveur, leur source unique, et les pages les posent en style
 * calculé. Une couleur de niveau écrite dans cette feuille serait une seconde
 * table, qui finirait par diverger de la première.
 */

@font-face {
  font-family: 'Geist';
  src: url('/assets/marque/Geist-Variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #161819; --ink-2: #26292b; --ink-3: #3a3d3f;
  --paper: #ffffff; --paper-2: #faf9f7; --paper-3: #f2f0ec;
  --line: rgba(22, 24, 25, .10); --line-2: rgba(22, 24, 25, .18);
  --muted: #6c7072; --muted-2: #9a9d9f;
  --cyan: #38bdf8; --cyan-deep: #0e7490;
  --maxw: 1240px;
  --r: 14px; --r-sm: 9px;
}

/* ── Pages de publication : charte, registre, corpus, qualité, démonstration ─ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Geist', system-ui, -apple-system, sans-serif;
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.7;
}

.hdr {
  background: var(--ink);
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hdr a { text-decoration: none; }
.hdr .logo-lock { height: 22px; width: 118px; color: var(--paper); display: block; }
.hdr-right { font-size: 13px; color: rgba(255, 255, 255, .5); }
.hdr-right a { color: var(--cyan); text-decoration: none; }

.wrap { max-width: 820px; margin: 0 auto; padding: 60px 24px 80px; }

h1 { font-size: 30px; font-weight: 700; color: var(--ink); margin-bottom: 8px; letter-spacing: -.5px; }
h2 { font-size: 16px; font-weight: 600; color: var(--ink); margin: 36px 0 10px; }
h3 { font-size: 15px; font-weight: 600; color: var(--ink); margin: 24px 0 8px; }
p { margin-bottom: 12px; }
a { color: var(--cyan-deep); }
.updated { font-size: 13px; color: var(--muted-2); margin-bottom: 40px; }

table {
  width: 100%; border-collapse: collapse; margin: 16px 0;
  font-size: 14px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
}
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--ink); color: var(--paper); font-weight: 600; font-size: 13px; }
tr:last-child td { border-bottom: 0; }

code, .hash {
  font-family: 'Geist Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px; word-break: break-all; color: var(--ink);
}

.encadre {
  background: var(--paper); border: 1px solid var(--line);
  border-left: 3px solid var(--cyan); border-radius: var(--r-sm);
  padding: 16px 18px; margin: 20px 0;
}

.enonce { font-size: 13px; color: var(--muted); margin-top: 3px; }

/* La pastille de niveau : sa couleur vient du lexique, jamais d'ici. */
.niv {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600;
  padding: 3px 9px; border-radius: var(--r-sm); white-space: nowrap;
}

/* Le symbole de niveau est un TRACÉ, plus un caractère : la police du lecteur
   ne le dessine plus. `currentColor` le porte, donc il prend la couleur du
   niveau décidée par le lexique — aucune valeur de couleur n'est écrite ici. */
.niv-ico { display: inline-flex; align-items: center; flex-shrink: 0; }

.chiffre { font-size: 34px; font-weight: 700; color: var(--ink); line-height: 1.15; }
.chiffre .unite { font-size: 16px; font-weight: 500; color: var(--muted); }

.cas { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: var(--r-sm); margin-bottom: 10px; }
/* Les trois cas d'une MESURE — divergence, absence de divergence, mois non
 * comparable. Ils ne reprennent aucune couleur de niveau : un cas de mesure
 * n'est pas un niveau de clause, et les teindre pareil ferait lire l'un pour
 * l'autre. Tokens de marque uniquement. */
.cas-sans { background: var(--paper-3); color: var(--ink); border: 1px solid var(--line-2); }
.cas-div  { background: var(--ink); color: var(--paper); }
.cas-non  { background: var(--paper-3); color: var(--muted); }

.footer {
  background: var(--ink); padding: 20px 32px; text-align: center;
  font-size: 13px; color: rgba(255, 255, 255, .35); margin-top: 60px;
}
.footer a { color: rgba(255, 255, 255, .5); text-decoration: none; margin: 0 10px; }

@media (max-width: 700px) {
  .wrap { padding: 40px 18px 60px; }
  table { font-size: 13px; }
}

/* ── Page d'essai d'intégration ────────────────────────────────────────────
 * Les cadres sont volontairement neutres : ce qu'on juge est le composant,
 * pas la page qui l'entoure. Le fond gris rend visible tout débordement. */
.essai { margin: 28px 0 36px; }
.essai h2 { margin-bottom: 2px; }
.essai-quoi { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.essai-cadre { max-width: 100%; overflow: auto; background: var(--paper-3); border: 1px dashed var(--line-2); border-radius: var(--r-sm); padding: 12px; }
.essai-hote { background: var(--paper); }