/* LA VIGIE — feuille de style unique, direction « Sémaphore ».
   Référence : docs/charte-graphique-la-vigie.md. Aucun framework, aucun CDN.
   Règle de tri : si un élément fait joli sans porter d'information, il n'est pas ici. */

/* --------------------------------------------------------------------------
   Polices — IBM Plex Mono auto-hébergée, licence OFL (public/fonts/LICENSE-IBM-Plex.txt)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Jetons
   -------------------------------------------------------------------------- */

:root {
  /* Neutres — thème sombre « Quart de nuit » (défaut) */
  --bg: #0b0f14;
  --surface: #10151c;
  --surface-2: #161d26;
  --border: #232b36;
  --border-strong: #374453;
  --text: #dee4ec;
  --text-2: #94a0af;
  /* Charte : #6B7885. Éclairci ici : il ne donnait que 4,06:1 sur --surface, sous le
     plancher AA de 4,5 exigé par la charte §12 pour les labels, unités et seuils.
     Calé sur le pire des trois fonds — c'est --surface-2, le corps de carte déplié. */
  --text-3: #7b8692;
  --accent: #b8a06a;

  /* Niveaux — encre + voile */
  --vert: #5fa97d;
  --vert-veil: rgba(95, 169, 125, 0.1);
  --jaune: #d6b54e;
  --jaune-veil: rgba(214, 181, 78, 0.1);
  --orange: #d98a4a;
  --orange-veil: rgba(217, 138, 74, 0.12);
  --rouge: #d0574e;
  --rouge-txt-s: #da6c64;
  --rouge-veil: rgba(208, 87, 78, 0.12);

  /* Système */
  --radius: 2px;
  --space: 8px;
  --font: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  --transition: 140ms ease-out;
  --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.35);
}

[data-theme="paper"] {
  --bg: #f2efe8;
  --surface: #faf8f3;
  --surface-2: #efebe1;
  --border: #dcd6c8;
  --border-strong: #c2baa8;
  --text: #20262e;
  --text-2: #566068;
  /* Quatre valeurs assombries par rapport à la charte pour tenir le plancher AA sur
     fond papier, où les couleurs claires passent mal. Écarts mesurés et documentés
     dans docs/gate3-page.md ; les teintes sont conservées, seule la clarté bouge.
     Charte → ici : text-3 #7A8590 → #626A74 · accent #8A754A → #7C6841
              vert #3E7D5C → #376F51 · jaune #8F7420 → #7A631B · orange #A85F22 → #95541E */
  --text-3: #626a74;
  --accent: #7c6841;
  --vert: #376f51;
  --vert-veil: rgba(62, 125, 92, 0.1);
  --jaune: #7a631b;
  --jaune-veil: rgba(143, 116, 32, 0.1);
  --orange: #95541e;
  --orange-veil: rgba(168, 95, 34, 0.1);
  --rouge: #b03a32;
  --rouge-txt-s: #b03a32;
  --rouge-veil: rgba(176, 58, 50, 0.1);
}

/* Encre et voile du niveau courant, posés sur un conteneur par [data-niveau]. */
[data-niveau="vert"] { --encre: var(--vert); --encre-s: var(--vert); --voile: var(--vert-veil); }
[data-niveau="jaune"] { --encre: var(--jaune); --encre-s: var(--jaune); --voile: var(--jaune-veil); }
[data-niveau="orange"] { --encre: var(--orange); --encre-s: var(--orange); --voile: var(--orange-veil); }
[data-niveau="rouge"] { --encre: var(--rouge); --encre-s: var(--rouge-txt-s); --voile: var(--rouge-veil); }
[data-niveau="inconnu"] { --encre: var(--text-3); --encre-s: var(--text-3); --voile: transparent; }

/* --------------------------------------------------------------------------
   Remise à zéro
   -------------------------------------------------------------------------- */

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

/* Bascule de thème : les navigateurs ne re-résolvent pas une propriété en cours de
   transition quand le custom property qui l'alimente change — la couleur précédente
   reste affichée jusqu'au prochain recalcul. On coupe donc toutes les transitions le
   temps du basculement. Effet de bord souhaitable : le changement de thème est net,
   sans fondu, conformément à la charte §8 qui réserve le mouvement aux états. */
.bascule-en-cours,
.bascule-en-cours *,
.bascule-en-cours *::before,
.bascule-en-cours *::after { transition: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding-left: 20px; }
li + li { margin-top: 4px; }

/* Filet sous le lien plutôt que soulignement : même information, trait net de 1 px,
   accordé aux filets du reste de la page. */
a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
  transition: border-color var(--transition);
}
a:hover { border-bottom-color: var(--accent); }

:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0;
}

svg { display: block; }

/* --------------------------------------------------------------------------
   Échelle typographique
   -------------------------------------------------------------------------- */

.value {
  font-size: 28px;
  line-height: 1.15;
  font-weight: 500;
}

.level {
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.3;
}

.section-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-2);
}

.meta {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-2);
}

.label {
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
}

.mesure { max-width: 64ch; }

/* --------------------------------------------------------------------------
   Ossature
   -------------------------------------------------------------------------- */

.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

section + section,
.bloc + .bloc { margin-top: 32px; }

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: var(--surface);
  border: 1px solid var(--accent);
  padding: 8px 16px;
  z-index: 10;
}
.saut-contenu:focus { left: 8px; top: 8px; }

/* --------------------------------------------------------------------------
   Masthead — cartouche de document technique
   -------------------------------------------------------------------------- */

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--accent);
}

.masthead h1 {
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  line-height: 1.2;
}

.masthead .meta { margin-top: 4px; }

.masthead-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition);
}
.btn:hover { background: var(--surface-2); }
.btn[aria-pressed="true"] { border-color: var(--accent); }

.btn-primaire {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
.btn-primaire:hover { background: var(--text-2); border-color: var(--text-2); }

/* --------------------------------------------------------------------------
   Panneau de niveau — l'élément signature
   -------------------------------------------------------------------------- */

.panneau {
  border: 1px solid var(--border);
  border-left: 3px solid var(--encre, var(--text-3));
  border-radius: var(--radius);
  background: var(--voile, var(--surface));
  padding: 24px;
  margin-top: 24px;
}

/* Pastille et libellé prennent l'encre « petit texte » : à 20 px en 600, le rouge
   plein reste sous AA sur son voile, c'est précisément à quoi sert --rouge-txt-s. */
.panneau .level,
.panneau .pastille { color: var(--encre-s, var(--text)); }
.panneau .meta { margin-top: 4px; }

.panneau-motif {
  margin-top: 8px;
  color: var(--text-2);
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   Marégraphe de convergence — familles × semaines
   La gravité est portée par la TAILLE d'abord (validateur : jaune/orange
   quasi indiscernables, ΔE 10,8 sombre / 6,8 papier — la couleur seule est
   interdite ici), la couleur de niveau renforce. Vide creux = pas de donnée.
   -------------------------------------------------------------------------- */

/* Géométrie « variante A » de l'étude de composant (docs/brief-design-maregraphe.md) :
   la marée monte depuis la ligne de base de chaque bassin, contre une réglette
   graduée ; la colonne courante porte une tête de lecture au filet laiton.
   Jetons de la charte conservés tels quels — seule la géométrie vient de l'étude. */

.mg-boite { max-width: 520px; }

.maregraphe {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px solid var(--border-strong);
  background: var(--surface);
}

.maregraphe th {
  width: 78px;
  padding: 0 8px;
  text-align: left;
  vertical-align: middle;
  border-right: 1px solid var(--border);
  line-height: 1.35;
  font-weight: 500;
}
.mg-code {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--text-2);
}
.mg-nom {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Réglette : trois repères aux hauteurs des paliers, droite alignée. */
.maregraphe .mg-regle {
  width: 12px;
  position: relative;
  border-right: 1px solid var(--border-strong);
  padding: 0;
}
.mg-trait {
  position: absolute;
  right: 0;
  border-top: 1px solid var(--border-strong);
}
.mg-trait[data-t="1"] { bottom: 14px; width: 6px; }
.mg-trait[data-t="2"] { bottom: 24px; width: 6px; }
.mg-trait[data-t="3"] { bottom: 36px; width: 10px; }

.maregraphe tr { border-bottom: 1px solid var(--border); }
.maregraphe tr:last-child,
.maregraphe tr.mg-niveau { border-bottom: 0; }

.maregraphe td.mg-cell {
  position: relative;
  height: 38px;
  padding: 0 3px;
  vertical-align: bottom;
  border-right: 1px solid var(--border);
  transition: background-color var(--transition);
}
.maregraphe td.mg-cell:last-child { border-right: 0; }
.maregraphe td.mg-cell:hover { background: var(--surface-2); }

/* Tête de lecture : la colonne courante, surlignée et marquée au laiton. */
.maregraphe td.mg-cell:last-child { background: var(--surface-2); border-left: 1px solid var(--accent); }

.mg-barre { display: block; width: 100%; }
.mg-barre[data-s="0"] { height: 5px;  background: var(--vert); }
.mg-barre[data-s="1"] { height: 15px; background: var(--jaune); }
.mg-barre[data-s="2"] { height: 25px; background: var(--orange); }
.mg-barre[data-s="3"] { height: 36px; background: var(--rouge); }

/* Semaine muette : bassin creusé (fond de page) + tiret pointillé à la base —
   ne peut pas se confondre avec un vert bas, même en gris. */
.maregraphe td.mg-cell[data-vide="1"] { background: var(--bg); }
.mg-tiret {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 0;
  border-top: 1px dotted var(--text-3);
}

/* La ligne NIVEAU : bassin plus profond, marée plus haute, fond distinct. */
.maregraphe tr.mg-niveau { background: var(--surface-2); }
.maregraphe tr.mg-niveau td.mg-cell { height: 46px; }
.maregraphe tr.mg-niveau .mg-code { color: var(--text); font-weight: 600; }
.maregraphe tr.mg-niveau .mg-barre[data-s="0"] { height: 8px; }
.maregraphe tr.mg-niveau .mg-barre[data-s="1"] { height: 20px; }
.maregraphe tr.mg-niveau .mg-barre[data-s="2"] { height: 32px; }
.maregraphe tr.mg-niveau .mg-barre[data-s="3"] { height: 46px; }

.maregraphe tfoot td { padding: 0; border-right: 0; }
.maregraphe tfoot .mg-regle-pied { border-right: 1px solid var(--border-strong); }
.mg-dates {
  display: flex;
  justify-content: space-between;
  padding: 6px 4px 7px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--text-3);
}

.mg-releve {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--accent);
  text-transform: uppercase;
}

.mg-legende {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 18px;
  margin-top: 16px;
}
.mg-legende figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mg-cuve {
  width: 20px;
  height: 38px;
  display: flex;
  align-items: flex-end;
  background: var(--surface);
  border: 1px solid var(--border);
}
.mg-cuve[data-vide="1"] { background: var(--bg); border: 1px dotted var(--text-3); }
.mg-legende figcaption {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Synthèse du vigile
   -------------------------------------------------------------------------- */

.synthese-texte {
  border-left: 1px solid var(--border-strong);
  padding-left: 16px;
  margin-top: 8px;
}
.synthese-texte p + p { margin-top: 8px; }

/* --------------------------------------------------------------------------
   Pavillons de familles
   -------------------------------------------------------------------------- */

.pavillons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.pavillon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.pavillon:hover { border-color: var(--border-strong); }
.pavillon[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--text);
}
.pavillon .pastille { color: var(--encre-s, var(--text-3)); }

/* --------------------------------------------------------------------------
   Grille et cartes indicateur
   -------------------------------------------------------------------------- */

.grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 8px;
}

/* La carte entière est le bouton de dépliage : cliquer n'importe où l'ouvre.
   Une ligne « détail » séparée obligeait à viser un mot de 11,5 px. */
.carte {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color var(--transition);
  /* Un élément de grille refuse par défaut de descendre sous la largeur minimale de
     son contenu. Sans ça, un message d'erreur contenant une URL d'un seul tenant
     élargit toute la colonne et fait déborder la page sur un écran de 360 px. */
  min-width: 0;
}
.carte:hover { border-color: var(--border-strong); }

/* Liseré d'encre aux niveaux 2 et 3 seulement (charte §3.2). */
.carte[data-score="2"],
.carte[data-score="3"] { border-left: 2px solid var(--encre); }

.carte[data-perime="true"] { opacity: 0.55; }

.carte > summary,
.carte-corps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.carte > summary {
  list-style: none;
  cursor: pointer;
}
.carte > summary::-webkit-details-marker { display: none; }

.carte-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.carte-entete .meta { white-space: nowrap; }

.carte-valeur {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 32px;
}
.carte-valeur .unite { font-size: 13px; color: var(--text-3); }
.carte-valeur .tendance { font-size: 13px; color: var(--text-2); margin-left: auto; }

/* Axe temporel sous la sparkline : sans lui, une courbe ne dit pas sur quoi elle court. */
.carte-axe {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-3);
  white-space: nowrap;
}

.carte-etat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-top: 4px;
}
.carte-etat .etat {
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--encre-s, var(--text-3));
}
.carte-etat .seuils { font-size: 13px; color: var(--text-3); }

.badge {
  display: inline-block;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0 4px;
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
}

/* Dépliage sur place — pas de modale (charte §7). Le corps ouvert prend --surface-2,
   la surface que la charte §3.1 réserve précisément aux accordéons ouverts. */
.carte-corps {
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 13px;
  color: var(--text-2);
}

/* Historique replié dans le corps ouvert : deuxième niveau, cible tactile pleine. */
.carte-corps details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
}
.carte-corps details > summary::-webkit-details-marker { display: none; }
.carte-corps details > summary::before { content: "+ "; }
.carte-corps details[open] > summary::before { content: "− "; }
.carte-corps details > summary:hover { color: var(--text-2); }

.carte-corps dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 16px;
  margin: 0;
}
.carte-corps dt { color: var(--text-3); }
.carte-corps dd { margin: 0; color: var(--text); }
.carte-corps .note { font-style: italic; }

/* Le lien de source est seul sur sa ligne : c'est une commande, pas un lien au fil
   du texte, donc il prend lui aussi la cible tactile de 44 px. */
.carte-corps > p > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* URLs de source et messages d'erreur : ils cassent où il faut plutôt que de pousser
   la carte. Un texte technique coupé reste lisible ; une page qui défile de côté, non. */
.carte-corps dd,
.carte-corps p,
.carte-corps a { overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   Santé du système, carnet, documentation
   -------------------------------------------------------------------------- */

/* En-tête de section avec commandes à droite : titre et sélecteur de fenêtre. */
.bloc-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.fenetre {
  display: flex;
  align-items: center;
  gap: 8px;
}

.carnet-liste { max-width: 64ch; }
.carnet-entree {
  border-top: 1px solid var(--border);
  padding-top: 8px;
  margin-top: 8px;
}
.carnet-entree p { margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.carnet-entree .btn-supprimer {
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-family: inherit;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0 8px;
  min-height: 44px;
}
.carnet-entree .btn-supprimer:hover { color: var(--text); }
.carnet-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.carnet textarea {
  width: 100%;
  min-height: 96px;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.65;
  resize: vertical;
}
.carnet textarea:focus-visible { border-color: var(--border-strong); }
.carnet-actions { display: flex; align-items: center; gap: 16px; margin-top: 8px; }

.doc {
  border-bottom: 1px solid var(--border);
}
.doc > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 0;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-2);
  transition: color var(--transition);
}
.doc > summary::-webkit-details-marker { display: none; }
/* Chevron aligné à droite plutôt que collé au titre : la colonne de + et de −
   donne au sommaire la régularité d'une table des matières. */
.doc > summary { justify-content: space-between; gap: 16px; }
.doc > summary::after { content: "+"; color: var(--text-3); }
.doc[open] > summary::after { content: "−"; }
.doc > summary:hover { color: var(--text); }
.doc-inner { padding: 0 0 24px; max-width: 64ch; }
.doc-inner h4 { margin-top: 16px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; }
.doc-inner h4:first-child { margin-top: 0; }
.doc-inner p + p, .doc-inner ul { margin-top: 8px; }
.doc-inner em { font-style: italic; }

.niveau-nom {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.niveau-nom[data-niveau] { color: var(--encre-s); }

/* Santé du système et mentions de frugalité tiennent dans le pied, en deux lignes :
   discret, jamais caché (charte §7). */
.pied {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--text-2);
}
.pied .label { margin: 0; }

/* --------------------------------------------------------------------------
   États vides et erreurs — orientés action (charte §9)
   -------------------------------------------------------------------------- */

.avis {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 16px;
  max-width: 64ch;
}
.avis .level { color: var(--text); }
.avis p { margin-top: 8px; color: var(--text-2); }

.vide {
  color: var(--text-3);
  font-size: 13px;
  padding: 16px 0;
}

[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Points de rupture
   -------------------------------------------------------------------------- */

@media (max-width: 639px) {
  .value { font-size: 24px; }
  .level { font-size: 18px; }
}

@media (min-width: 640px) {
  .page { padding: 24px 24px 48px; }
  .grille { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

/* --------------------------------------------------------------------------
   Mouvement
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Impression — le bulletin sort sur papier, sans les commandes
   -------------------------------------------------------------------------- */

@media print {
  /* Le thème papier EST la feuille d'impression : on force ses jetons quel que soit
     le thème choisi à l'écran, sinon un bulletin imprimé de nuit sort en noir. */
  :root {
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #efebe1;
    --border: #c2baa8;
    --border-strong: #8a8272;
    --text: #20262e;
    --text-2: #4a545c;
    --text-3: #626a74;
    --accent: #6f5d38;
    /* Mêmes encres corrigées que le thème papier : sur un voile posé sur du blanc,
       les valeurs d'origine de la charte tombent à 3,97:1 pour le jaune. */
    --vert: #2f6146; --vert-veil: rgba(62, 125, 92, 0.1);
    --jaune: #6b5718; --jaune-veil: rgba(143, 116, 32, 0.1);
    --orange: #834a1a; --orange-veil: rgba(168, 95, 34, 0.1);
    --rouge: #9e342d; --rouge-txt-s: #9e342d; --rouge-veil: rgba(176, 58, 50, 0.1);
  }

  .masthead-actions,
  .pavillons,
  .carnet,
  .btn,
  .saut-contenu { display: none !important; }

  body { background: #fff; font-size: 11pt; }

  .page { max-width: none; padding: 0; }

  .carte,
  .panneau,
  .avis { break-inside: avoid; }

  .doc[open] .doc-inner { display: block; }
  .doc:not([open]) { display: none; }

  a { color: inherit; text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #566068; }
}