/* ==========================================================================
   CyQuant EASM — feuille unique.

   Sans script, sans police distante, sans image distante : la politique de
   sécurité du contenu servie par l'application est « default-src 'none' », et
   un service qui cartographie les en-têtes de sécurité des autres doit tenir
   les siens. Toute la mise en forme tient donc dans ce fichier, y compris les
   ornements qui seraient ailleurs des images (chevron des listes déroulantes,
   pastilles de gravité) : ils sont dessinés en CSS.

   PARTI PRIS VISUEL, ET SA RAISON

   Ce produit affirme qu'il ne note pas. Une interface de tableau de bord —
   jauges, cadrans, dégradés, gros chiffres colorés — contredirait cette
   affirmation avant qu'un mot ne soit lu : elle annonce un score. La forme
   retenue est donc celle d'un DOCUMENT D'EXPERTISE : empattements pour le
   texte suivi, filets fins, une seule couleur d'accent, la couleur réservée
   à la gravité d'un constat et jamais à la décoration. Un dirigeant de TPE
   doit pouvoir imprimer cette page et la tendre à son assureur sans qu'elle
   ait l'air d'une plaquette commerciale.

   SOMMAIRE
     1. Jetons          2. Réinitialisation   3. Typographie
     4. Ossature        5. Fil d'étapes       6. Cartes et encarts
     7. Constats        8. Formulaires        9. Chiffres et tableaux
    10. Divers         11. Impression
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. JETONS
   Une seule échelle d'espacement, une seule échelle de gris. Les valeurs
   littérales n'apparaissent qu'ici : ailleurs, on ne manipule que des noms.
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* Papier et encre. Le fond n'est pas blanc : un blanc pur sous un texte à
     empattements fatigue et donne un rendu d'écran, pas de document. */
  --fond: #faf9f6;
  --fond-carte: #ffffff;
  --fond-doux: #f2f0e8;
  --fond-creux: #edeae0;
  --encre: #191814;
  --encre-douce: #5b5647;
  --encre-tres-douce: #857f6d;
  --trait: #e2ded2;
  --trait-fort: #cbc5b4;

  --accent: #14505f;
  --accent-vif: #0f6b80;
  --accent-doux: #e6f0f3;
  --sur-accent: #ffffff;

  /* Gravité. Quatre teintes distinctes à la fois en teinte ET en clarté :
     un daltonien doit distinguer un constat critique d'un constat d'
     information sans lire l'étiquette. */
  --critique: #8f2c1b;
  --important: #925313;
  --attention: #6a5a12;
  --info: #35545f;
  --ok: #2a5b34;

  --ombre: 0 1px 2px rgba(25, 24, 20, 0.04), 0 4px 12px -6px rgba(25, 24, 20, 0.08);
  --ombre-nette: 0 1px 1px rgba(25, 24, 20, 0.06);

  /* Espacement : une progression, pas des nombres au hasard. */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;
  --e8: 4.5rem;

  --rayon: 8px;
  --rayon-petit: 5px;

  --largeur: 54rem;
  --mesure: 68ch;   /* longueur de ligne du texte suivi */

  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
           "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #121310;
    --fond-carte: #191b16;
    --fond-doux: #21241c;
    --fond-creux: #282c21;
    --encre: #eceadf;
    --encre-douce: #a9a595;
    --encre-tres-douce: #837f70;
    --trait: #32362a;
    --trait-fort: #474c3b;

    --accent: #86c4d5;
    --accent-vif: #a3d7e5;
    --accent-doux: #17282e;
    --sur-accent: #0b1518;

    --critique: #e79684;
    --important: #dcae6c;
    --attention: #cdc077;
    --info: #9db8c3;
    --ok: #8dc498;

    --ombre: none;
    --ombre-nette: none;
  }
}

/* --------------------------------------------------------------------------
   2. RÉINITIALISATION
   -------------------------------------------------------------------------- */

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

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

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
a:hover { text-decoration-color: currentColor; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--accent-vif);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Lien d'évitement : premier élément focusable de chaque page. Sans lui, un
   lecteur au clavier retraverse la navigation à chaque étape du parcours. */
.evitement {
  position: absolute;
  left: -9999px;
  top: var(--e2);
  padding: var(--e2) var(--e4);
  background: var(--accent);
  color: var(--sur-accent);
  border-radius: var(--rayon-petit);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 0.9rem;
  z-index: 50;
}
.evitement:focus { left: var(--e4); }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHIE
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  line-height: 1.2;
  letter-spacing: -0.011em;
  text-wrap: balance;
  font-weight: 600;
}

h1 {
  font-size: clamp(1.85rem, 1.45rem + 1.7vw, 2.5rem);
  margin: 0 0 var(--e3);
  letter-spacing: -0.02em;
}

/* Les titres de section portent un filet : dans un document long, c'est ce
   qui donne la respiration qu'un simple écart vertical ne suffit pas à créer. */
h2 {
  font-size: clamp(1.2rem, 1.08rem + 0.5vw, 1.45rem);
  margin: var(--e7) 0 var(--e4);
  padding-top: var(--e4);
  border-top: 1px solid var(--trait);
}
h2:first-child, .carte h2 { border-top: none; padding-top: 0; margin-top: 0; }

h3 { font-size: 1.06rem; margin: var(--e5) 0 var(--e2); }

p, ul, ol, dl { margin: 0 0 var(--e4); }
p, li { max-width: var(--mesure); }

.chapeau {
  font-size: clamp(1.05rem, 1rem + 0.28vw, 1.2rem);
  line-height: 1.55;
  color: var(--encre-douce);
  margin-bottom: var(--e5);
  max-width: var(--mesure);
  text-wrap: pretty;
}

.discret {
  color: var(--encre-douce);
  font-size: 0.88rem;
  line-height: 1.55;
}

strong { font-weight: 650; }
em { font-style: italic; }

code {
  font-family: var(--mono);
  font-size: 0.86em;
  padding: 0.1em 0.34em;
  background: var(--fond-doux);
  border: 1px solid var(--trait);
  border-radius: 3px;
  overflow-wrap: anywhere;
}

ul.serree { margin: var(--e2) 0 var(--e4); padding-left: 1.15rem; }
ul.serree li { margin-bottom: var(--e2); padding-left: 0.15rem; }
ul.serree li::marker { color: var(--encre-tres-douce); }
ul.nue { list-style: none; padding: 0; margin: var(--e2) 0; }

/* --------------------------------------------------------------------------
   4. OSSATURE
   -------------------------------------------------------------------------- */

.bandeau {
  border-bottom: 1px solid var(--trait);
  background: color-mix(in srgb, var(--fond-carte) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.bandeau > div,
main,
.pied > div {
  max-width: var(--largeur);
  margin: 0 auto;
  padding-inline: var(--e5);
}
.bandeau > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e5);
  align-items: baseline;
  padding-block: var(--e3);
}

.marque {
  font-family: var(--sans);
  font-weight: 640;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--encre);
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
}
.marque span {
  color: var(--encre-douce);
  font-weight: 400;
  font-size: 0.86rem;
  letter-spacing: 0;
}

.bandeau nav {
  margin-left: auto;
  display: flex;
  gap: var(--e4);
  flex-wrap: wrap;
  font-family: var(--sans);
  font-size: 0.86rem;
}
.bandeau nav a { text-decoration: none; color: var(--encre-douce); }
.bandeau nav a:hover { color: var(--accent); text-decoration: underline; }

main { padding-block: var(--e7) var(--e8); }

.pied {
  border-top: 1px solid var(--trait);
  background: var(--fond-carte);
  padding-block: var(--e5) var(--e7);
  font-size: 0.85rem;
  color: var(--encre-douce);
}
.pied nav {
  display: flex;
  gap: var(--e4);
  flex-wrap: wrap;
  margin-bottom: var(--e3);
  font-family: var(--sans);
}
.pied p { max-width: var(--mesure); }

.ruban {
  background: var(--important);
  color: #fff;
  text-align: center;
  padding: var(--e2) var(--e4);
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.45;
  margin: 0;
  max-width: none;
}
.ruban a { color: #fff; }

/* --------------------------------------------------------------------------
   5. FIL D'ÉTAPES
   Le parcours comporte six étapes dont deux exigent une action hors de
   l'écran (publier un enregistrement DNS, signer). Savoir où l'on en est et
   combien il en reste est ce qui évite l'abandon au milieu de la
   vérification. D'où des états explicites plutôt qu'un simple libellé gras.
   -------------------------------------------------------------------------- */

.etapes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) 0;
  padding: 0;
  margin: 0 0 var(--e6);
  list-style: none;
  font-family: var(--sans);
  font-size: 0.8rem;
  counter-reset: etape;
}
.etapes li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--encre-tres-douce);
  padding-right: var(--e3);
  max-width: none;
}
/* Le filet de liaison, dessiné plutôt qu'imagé. */
.etapes li:not(:last-child)::after {
  content: "";
  width: var(--e4);
  height: 1px;
  background: var(--trait-fort);
  margin-left: var(--e1);
}
.etapes li::before {
  counter-increment: etape;
  content: counter(etape);
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--trait-fort);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--encre-tres-douce);
  background: var(--fond-carte);
}
.etapes .faite { color: var(--encre-douce); }
.etapes .faite::before {
  content: "✓";
  border-color: var(--ok);
  color: var(--ok);
  font-size: 0.78rem;
}
.etapes .en-cours { color: var(--encre); font-weight: 600; }
.etapes .en-cours::before {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--sur-accent);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   6. CARTES ET ENCARTS
   -------------------------------------------------------------------------- */

.carte {
  background: var(--fond-carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: var(--e5);
  margin: var(--e4) 0;
  box-shadow: var(--ombre-nette);
}
.carte > :first-child { margin-top: 0; }
.carte > :last-child { margin-bottom: 0; }

/* Une grille de cartes de même rang : trois arguments côte à côte se lisent
   comme trois arguments, une pile se lit comme une hiérarchie. */
.cartes {
  display: grid;
  gap: var(--e4);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: var(--e4) 0;
}
.cartes .carte { margin: 0; }

.avis {
  border-left: 3px solid var(--accent);
  background: var(--accent-doux);
  box-shadow: none;
}
.avis-alerte {
  border-left-color: var(--critique);
  background: color-mix(in srgb, var(--critique) 9%, var(--fond-carte));
}
.avis-ok {
  border-left-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 10%, var(--fond-carte));
}

/* --------------------------------------------------------------------------
   7. CONSTATS
   La couleur ne sert QU'ICI. Elle porte une information — la gravité — et
   ne décore rien. C'est ce qui la rend lisible.
   -------------------------------------------------------------------------- */

.constat { border-left: 3px solid var(--trait-fort); }
.constat-critique { border-left-color: var(--critique); }
.constat-important { border-left-color: var(--important); }
.constat-attention { border-left-color: var(--attention); }
.constat-info { border-left-color: var(--info); }
.constat h3 { margin-top: 0; }

.gravite {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 640;
  margin-bottom: var(--e2);
  padding: 0.16rem 0.5rem 0.16rem 0.4rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: var(--fond-carte);
}
.gravite::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: currentColor;
}
.g-critique { color: var(--critique); }
.g-important { color: var(--important); }
.g-attention { color: var(--attention); }
.g-info { color: var(--info); }

/* L'action est la seule partie du constat qui demande un geste. Elle est
   détachée du texte pour qu'un lecteur pressé la trouve sans lire le reste. */
.action {
  margin: var(--e4) 0 0;
  padding: var(--e3) var(--e4);
  background: var(--fond-doux);
  border-radius: var(--rayon-petit);
  border-left: 2px solid var(--trait-fort);
}
.action strong {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 640;
  color: var(--encre-douce);
  margin-bottom: var(--e1);
}

/* Compteur de constats par gravité, en tête de rapport. Ce n'est PAS une
   note : c'est un dénombrement de faits, et il ne se totalise pas en un
   indice unique. Il donne l'ampleur avant la lecture, rien d'autre. */
.decompte {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e4);
  padding: 0;
  margin: 0 0 var(--e5);
  list-style: none;
  font-family: var(--sans);
  font-size: 0.85rem;
}
.decompte li {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  max-width: none;
  color: var(--encre-douce);
}
.decompte b {
  font-variant-numeric: tabular-nums;
  font-size: 1.15rem;
  font-weight: 640;
  color: var(--encre);
}

/* --------------------------------------------------------------------------
   8. FORMULAIRES
   -------------------------------------------------------------------------- */

form { margin: var(--e4) 0; }

label {
  display: block;
  font-weight: 620;
  margin: var(--e5) 0 var(--e2);
  max-width: var(--mesure);
}
label .aide {
  display: block;
  font-weight: 400;
  color: var(--encre-douce);
  font-size: 0.875rem;
  line-height: 1.5;
  margin-top: var(--e1);
}
/* La ligne « ce que cette réponse déplace » : annoncer l'effet AVANT la
   réponse est ce qui rend le consentement éclairé, et la seule défense
   contre l'impression qu'un questionnaire sert à établir une note. */
label .effet {
  display: block;
  font-weight: 400;
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.01em;
  color: var(--encre-tres-douce);
  margin-top: var(--e2);
  padding-left: var(--e2);
  border-left: 2px solid var(--trait);
}

input[type=text], input[type=email], input[type=number], select, textarea {
  width: 100%;
  max-width: var(--mesure);
  padding: 0.62rem 0.75rem;
  font-family: var(--mono);
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--encre);
  background: var(--fond);
  border: 1px solid var(--trait-fort);
  border-radius: var(--rayon-petit);
}
input::placeholder { color: var(--encre-tres-douce); }
input:hover, select:hover, textarea:hover { border-color: var(--encre-tres-douce); }

/* Les listes déroulantes portent du texte, pas des codes : elles restent en
   empattements, et le chevron est dessiné en bordures — aucune image, donc
   rien qu'une politique « default-src 'none' » puisse bloquer. */
select {
  font-family: var(--serif);
  appearance: none;
  padding-right: 2.2rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--encre-douce) 50%),
    linear-gradient(135deg, var(--encre-douce) 50%, transparent 50%);
  background-position: right 1.1rem center, right 0.75rem center;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
}
textarea { min-height: 6.5rem; resize: vertical; font-family: var(--serif); }

/* Regroupement par axe. Un ensemble de neuf questions sans structure se lit
   comme un interrogatoire ; groupé et introduit, il se lit comme un
   entretien. La différence porte sur le taux de réponse, pas sur l'esthétique. */
fieldset {
  margin: var(--e5) 0;
  padding: var(--e4) var(--e5) var(--e5);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--fond-carte);
}
legend {
  padding: 0 var(--e2);
  margin-left: calc(var(--e2) * -1);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 640;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
}
fieldset > label:first-of-type { margin-top: var(--e2); }
fieldset .intro {
  margin: 0 0 var(--e2);
  color: var(--encre-douce);
  font-size: 0.9rem;
  max-width: var(--mesure);
}

.case {
  display: flex;
  gap: var(--e3);
  align-items: flex-start;
  margin: var(--e4) 0;
  font-weight: 400;
  max-width: var(--mesure);
}
.case input { margin-top: 0.4rem; flex: 0 0 auto; width: 1.05rem; height: 1.05rem; }
.case span { flex: 1; }

button, .bouton {
  display: inline-block;
  margin-top: var(--e5);
  padding: 0.68rem 1.35rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--sur-accent);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--rayon-petit);
  box-shadow: var(--ombre-nette);
  cursor: pointer;
  text-decoration: none;
}
button:hover, .bouton:hover {
  background: var(--accent-vif);
  border-color: var(--accent-vif);
}
.bouton-secondaire {
  color: var(--accent);
  background: transparent;
  box-shadow: none;
}
.bouton-secondaire:hover { background: var(--accent-doux); border-color: var(--accent); }
.rangee-boutons {
  display: flex;
  gap: var(--e3);
  flex-wrap: wrap;
  align-items: center;
  max-width: none;
}

/* --------------------------------------------------------------------------
   9. CHIFFRES ET TABLEAUX
   -------------------------------------------------------------------------- */

.chiffres {
  display: grid;
  gap: var(--e4);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin: var(--e4) 0 var(--e5);
}
.chiffre {
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: var(--e4) var(--e5) var(--e5);
  background: var(--fond-carte);
  box-shadow: var(--ombre-nette);
}
.chiffre dt {
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--encre-douce);
  margin-bottom: var(--e3);
  max-width: none;
}
.chiffre dd {
  margin: 0;
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem);
  font-weight: 620;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}
.chiffre .sous {
  display: block;
  margin-top: var(--e2);
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--encre-douce);
}

.defilant {
  overflow-x: auto;
  margin: var(--e4) 0;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--fond-carte);
}
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
th, td {
  text-align: left;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--trait);
  vertical-align: top;
}
td { max-width: 34rem; }
th {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--encre-douce);
  font-weight: 640;
  background: var(--fond-doux);
  white-space: nowrap;
  position: sticky;
  top: 0;
}
td.nombre, th.nombre {
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: none; }

/* --------------------------------------------------------------------------
   10. DIVERS
   -------------------------------------------------------------------------- */

/* Le jeton de vérification est destiné à être copié à la main dans une zone
   DNS. Il est donc affiché large, en chasse fixe, sans césure ambiguë. */
.jeton {
  display: block;
  padding: var(--e4);
  margin: var(--e2) 0 var(--e4);
  font-family: var(--mono);
  font-size: 0.92rem;
  line-height: 1.5;
  background: var(--fond-creux);
  border: 1px solid var(--trait-fort);
  border-radius: var(--rayon-petit);
  overflow-wrap: anywhere;
  user-select: all;
}
pre.mandat {
  max-height: 26rem;
  overflow: auto;
  padding: var(--e4) var(--e5);
  background: var(--fond-doux);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 40rem) {
  body { font-size: 16px; }
  .bandeau > div, main, .pied > div { padding-inline: var(--e4); }
  main { padding-block: var(--e5) var(--e7); }
  .carte { padding: var(--e4); }
  fieldset { padding: var(--e3) var(--e4) var(--e4); }
  h2 { margin-top: var(--e6); }
  .bandeau { position: static; }
}

/* ==========================================================================
   11. IMPRESSION

   Un dirigeant de TPE ne lit pas ce rapport à l'écran : il l'imprime ou
   l'enregistre en PDF pour l'envoyer à son prestataire ou à son assureur.
   C'est donc un document, et un document doit porter sur CHAQUE page ce qui
   permet de savoir de quoi il parle et ce qu'il vaut.
   ========================================================================== */

.impression-seule { display: none; }

/* À l'écran, le tableau d'impression n'existe pas : il redevient une suite de
   blocs. Il ne reprend sa nature de tableau qu'au moment d'imprimer, où son
   `thead` est le seul mécanisme qui répète un en-tête ET lui réserve sa place
   sur chaque page. */
.cadre-impression,
.cadre-impression > thead,
.cadre-impression > tbody,
.cadre-impression > tfoot,
.cadre-impression > * > tr,
.cadre-impression > * > tr > td {
  display: block;
  width: auto;
  padding: 0;
  border: none;
}

@media print {
  /* Ce qui n'a pas de sens sur papier : navigation, fil d'étapes, tout ce
     qui se clique. Le texte d'aide d'un champ de saisie s'imprimerait comme
     du contenu — dans un PDF, il se lirait comme une affirmation du rapport. */
  .bandeau, .etapes, form, button, .bouton, .rangee-boutons,
  .pied nav, .ruban, .evitement { display: none !important; }

  @page { margin: 14mm 16mm; }

  html, body {
    background: #fff;
    color: #000;
    font-size: 10.5pt;
    line-height: 1.45;
  }
  main { padding: 0; max-width: none; }
  p, li, .chapeau, td { max-width: none; }
  .bandeau { border: none; background: none; }

  /* Le tableau reprend sa nature : `thead` se répète en haut de chaque page et
     réserve sa hauteur, `tfoot` fait de même en bas. C'est la seule technique
     qui tienne dans les navigateurs — un élément « fixed » se répète mais
     laisse le texte passer dessous. */
  .cadre-impression { display: table; width: 100%; }
  .cadre-impression > thead { display: table-header-group; }
  .cadre-impression > tbody { display: table-row-group; }
  .cadre-impression > tfoot { display: table-footer-group; }
  .cadre-impression > * > tr { display: table-row; }
  .cadre-impression > * > tr > td { display: table-cell; }

  .impression-seule { display: block; }
  .impression-entete, .impression-pied {
    font-size: 8pt;
    color: #444;
    border-color: #bbb;
    border-style: solid;
    border-width: 0;
  }
  .impression-entete { border-bottom-width: 0.5pt; padding-bottom: 3pt; margin-bottom: 6pt; }
  .impression-pied { border-top-width: 0.5pt; padding-top: 3pt; margin-top: 6pt; }
  .impression-entete b { color: #000; }

  /* Filigrane de démonstration, sur chaque page. Sans lui, une page extraite
     d'un PDF de démonstration affirme des chiffres fictifs au nom d'une
     entreprise réelle et nommée. */
  .impression-filigrane {
    display: block;
    position: fixed;
    top: 45%; left: 0; right: 0;
    text-align: center;
    transform: rotate(-24deg);
    font-size: 34pt;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(146, 83, 19, 0.16);
    z-index: 999;
    pointer-events: none;
  }

  .carte, .chiffre, .defilant, fieldset {
    border: 0.5pt solid #ccc;
    border-radius: 0;
    box-shadow: none;
    background: none;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .constat { border-left-width: 2.5pt; }
  .gravite { border-color: #999; }
  .action { background: none; border-left-width: 1.5pt; padding-left: 6pt; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  h2 { margin-top: 1.4rem; padding-top: 0.6rem; }
  table { break-inside: auto; }
  tr, .chiffre { break-inside: avoid; }
  th { position: static; background: none; }
  thead { display: table-header-group; }
  .defilant { overflow: visible; }
  a { color: #000; text-decoration: none; }
  .chiffres { grid-template-columns: repeat(2, 1fr); }
  .cartes { grid-template-columns: repeat(2, 1fr); }
  pre.mandat { max-height: none; overflow: visible; font-size: 8pt; }
}