/*
 * CASA DE ORO — feuille commune aux trois interfaces.
 *
 * UN SEUL PARTI PRIS, ASSUME : sombre et or. Pas de variante claire, pas de bascule. Une
 * interface patrimoniale qui change de peau selon le reglage du systeme n'a pas d'identite, et
 * l'or ne se regarde pas sur du blanc.
 *
 * Le vocabulaire visuel est celui d'un releve de garde, pas d'un tableau de bord financier :
 * filets fins plutot que cadres, capitales espacees plutot que gras, chiffres en romain clair
 * plutot qu'en gras. Aucune flèche, aucune courbe, aucun vert ni rouge de variation — la
 * position D1 se tient jusque dans le CSS : rien ici ne peut suggerer une performance.
 *
 * Aucune police distante : la politique de securite de contenu l'interdit, et une interface qui
 * attend un serveur de polices affiche du vide pendant ce temps. On s'appuie sur les serifs du
 * systeme, qui sont excellents sur macOS et iOS.
 */

:root {
  color-scheme: dark;

  /* Noirs chauds. Un noir bleute a cote de l'or donne un rendu froid, presque electronique. */
  --nuit: #0a0908;
  --nuit-carte: #121110;
  --nuit-relief: #191715;
  --nuit-creux: #060505;

  /* Or : trois valeurs, et pas une de plus. Le jaune vif fait toc, le brun fait terne. */
  --or: #c9a227;
  --or-clair: #e3c05a;
  --champagne: #e8dcc0;

  --filet: #262320;
  --filet-vif: #383430;

  --texte: #ede9e1;
  --texte-doux: #9c948a;
  --texte-tres-doux: #6a635b;

  --alerte: #cf6a52;
  --paisible: #7fa88c;

  --rayon: 3px;
  --serif: ui-serif, "Iowan Old Style", "Apple Garamond", Baskerville, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --chiffres: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

html { background: var(--nuit); }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--texte);
  background:
    radial-gradient(1200px 600px at 50% -200px, rgb(201 162 39 / 7%), transparent 70%),
    var(--nuit);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgb(201 162 39 / 28%); }

/* --- Filets d'or --------------------------------------------------------- */

/*
 * Le filet degrade est le seul ornement du systeme. Il separe sans encadrer : une bordure
 * pleine enferme, un filet qui s'eteint aux extremites laisse respirer.
 */
.filet-or {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--or) 22%, var(--or) 78%, transparent);
  opacity: 0.45;
}

/* --- Bandeau ------------------------------------------------------------- */

.bandeau {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 20px 40px;
  background: rgb(10 9 8 / 82%);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--filet);
  position: sticky;
  top: 0;
  z-index: 10;
}

.marque {
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--champagne);
  white-space: nowrap;
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.marque em {
  font-family: var(--sans);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--or);
  padding-left: 14px;
  border-left: 1px solid var(--filet-vif);
}

.bandeau nav { display: flex; gap: 2px; flex-wrap: wrap; }
.bandeau .pousse { margin-left: auto; display: flex; align-items: center; gap: 18px; }

#identite {
  font-family: var(--chiffres);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--texte-tres-doux);
}

.onglet {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-tres-doux);
  padding: 8px 2px;
  margin: 0 12px;
  cursor: pointer;
  position: relative;
  transition: color var(--transition);
}
.onglet::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--or);
  transform: scaleX(0);
  transition: transform var(--transition);
}
.onglet:hover { color: var(--champagne); }
.onglet[aria-current="page"] { color: var(--champagne); }
.onglet[aria-current="page"]::after { transform: scaleX(1); }

/* --- Structure ----------------------------------------------------------- */

main { max-width: 1120px; margin: 0 auto; padding: 56px 40px 120px; }

.vue[hidden] { display: none; }

.entete-vue { margin-bottom: 40px; }

h1 {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 0.005em;
  margin: 0 0 6px;
  color: var(--champagne);
}

h2 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--or);
  margin: 56px 0 18px;
}
h2:first-of-type { margin-top: 0; }

h3 { font-size: 13px; font-weight: 600; color: var(--texte-doux); margin: 0 0 10px; }

.sous-titre { color: var(--texte-doux); margin: 0; max-width: 60ch; }

/* --- Cartes -------------------------------------------------------------- */

.carte {
  background: linear-gradient(180deg, var(--nuit-carte), var(--nuit-creux));
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 28px 30px;
  position: relative;
}

/* Un liseré d'or en haut de carte : une seule ligne, presque invisible, mais elle porte tout. */
.carte.marquee::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--or), transparent);
  opacity: 0.7;
}

.grille { display: grid; gap: 20px; }
.grille.deux { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grille.trois { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grille.quatre { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* --- Le chiffre principal ------------------------------------------------ */

.mesure { display: flex; flex-direction: column; gap: 6px; }

.mesure .etiquette {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texte-tres-doux);
}

.mesure .valeur {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--texte);
}
.mesure .valeur.or { color: var(--or-clair); }
.mesure .appoint { font-size: 12px; color: var(--texte-tres-doux); }

/* Le chiffre d'honneur : celui qu'on voit en entrant, et qui doit se lire de loin. */
.honneur { text-align: center; padding: 48px 30px 44px; }
.honneur .etiquette { font-size: 10px; letter-spacing: 0.28em; }
.honneur .valeur {
  font-size: clamp(44px, 8vw, 68px);
  color: var(--or-clair);
  margin: 12px 0 4px;
}
.honneur .appoint { font-size: 13px; color: var(--texte-doux); }

.chiffre { font-family: var(--chiffres); font-variant-numeric: tabular-nums; }

/* --- Tableaux ------------------------------------------------------------ */

.defilable { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }

/*
 * Un tableau large defile, il ne se comprime pas.
 *
 * `table { width: 100% }` gagne contre `overflow-x: auto` : la table se tasse dans le conteneur
 * au lieu de le deborder, et le defilement ne se declenche jamais. Le livre de police, avec ses
 * douze colonnes, y perdait ses separations — la valeur venait coller l'emplacement, la derniere
 * colonne sortait du cadre. On rend donc au tableau une largeur minimale : en dessous, il
 * deborde et le conteneur fait son travail.
 */
.defilable > table { width: auto; min-width: 100%; }
.defilable td, .defilable th { white-space: nowrap; }

/* L'objet est la seule colonne qui merite de passer a la ligne : c'est une phrase, pas un code. */
.defilable td.libre, .defilable th.libre { white-space: normal; min-width: 22ch; max-width: 34ch; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }

caption { text-align: left; color: var(--texte-tres-doux); font-size: 12px; padding-bottom: 12px; }

th {
  text-align: left;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-tres-doux);
  font-weight: 600;
  padding: 0 20px 12px 0;
  border-bottom: 1px solid var(--filet-vif);
  white-space: nowrap;
}

td {
  padding: 15px 20px 15px 0;
  border-bottom: 1px solid var(--filet);
  vertical-align: baseline;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--transition); }
tbody tr:hover { background: rgb(201 162 39 / 3.5%); }

/*
 * Les colonnes de chiffres.
 *
 * `padding-right: 0` colle la derniere unite au bord droit de la cellule — voulu quand la
 * colonne est la derniere du tableau, desastreux quand une autre colonne de chiffres suit :
 * on lisait « 999,873 g118 400,00 € » d'un seul tenant. Le blanc doit donc passer a gauche,
 * ou il separe deux colonnes au lieu de s'accumuler apres la derniere.
 */
td.nombre, th.nombre {
  text-align: right;
  font-family: var(--chiffres);
  font-variant-numeric: tabular-nums;
  padding-right: 0;
  padding-left: 22px;
  white-space: nowrap;
}
/* Deux colonnes de chiffres qui se suivent : la gouttiere vient de la seconde, jamais des deux. */
td.nombre + td.nombre, th.nombre + th.nombre { padding-left: 22px; }
td.principal { color: var(--champagne); }

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

.jeton {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--filet-vif);
  color: var(--texte-doux);
  white-space: nowrap;
}
.jeton.or { border-color: rgb(201 162 39 / 55%); color: var(--or-clair); }
.jeton.paisible { border-color: rgb(127 168 140 / 45%); color: var(--paisible); }
.jeton.alerte { border-color: rgb(207 106 82 / 55%); color: var(--alerte); }

.empreinte {
  font-family: var(--chiffres);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--texte-tres-doux);
  word-break: break-all;
}

/* --- Mentions ------------------------------------------------------------ */

/*
 * La mention « valeur indicative, non contractuelle » est exigee par la position D1. Elle est
 * donc composee pour etre lue : en italique serif, jamais grisee au point de disparaitre.
 */
.mention {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  color: var(--texte-doux);
  border-left: 1px solid var(--or);
  padding-left: 16px;
  margin: 24px 0 0;
  max-width: 62ch;
}

.avis {
  padding: 14px 18px;
  border-radius: var(--rayon);
  border: 1px solid var(--filet-vif);
  background: var(--nuit-relief);
  font-size: 14px;
  margin: 0 0 22px;
}
.avis.alerte { border-color: rgb(207 106 82 / 45%); color: var(--alerte); background: rgb(207 106 82 / 6%); }
.avis.ok { border-color: rgb(127 168 140 / 40%); color: var(--paisible); background: rgb(127 168 140 / 5%); }
.avis:empty { display: none; }

/* --- Formulaires --------------------------------------------------------- */

label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-tres-doux);
  margin-bottom: 8px;
}

input, select, textarea {
  width: 100%;
  font: inherit;
  color: var(--texte);
  background: var(--nuit-creux);
  border: 1px solid var(--filet-vif);
  border-radius: var(--rayon);
  padding: 11px 14px;
  transition: border-color var(--transition);
}
input::placeholder { color: var(--texte-tres-doux); }
input:hover, select:hover, textarea:hover { border-color: #4a453f; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--or); }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, .onglet:focus-visible {
  outline: 1px solid var(--or);
  outline-offset: 2px;
}
input[inputmode="numeric"], input[type="number"] {
  font-family: var(--chiffres);
  font-variant-numeric: tabular-nums;
}

.champ { margin-bottom: 20px; }
.champs { display: grid; gap: 0 24px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.aide { font-size: 12px; color: var(--texte-tres-doux); margin: 6px 0 0; text-transform: none; letter-spacing: 0; }

button {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: var(--rayon);
  padding: 13px 26px;
  cursor: pointer;
  border: 1px solid var(--filet-vif);
  background: transparent;
  color: var(--texte-doux);
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
button:hover:not(:disabled) { color: var(--champagne); border-color: var(--or); }
button:disabled { opacity: 0.35; cursor: not-allowed; }

button.primaire {
  background: linear-gradient(180deg, var(--or-clair), var(--or));
  border-color: var(--or);
  color: #100e0a;
}
button.primaire:hover:not(:disabled) { background: var(--or-clair); color: #100e0a; }

button.discret { border-color: transparent; padding-left: 0; padding-right: 0; }
button.discret:hover:not(:disabled) { border-color: transparent; }

.actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 28px; }

/* --- Parcours de signature ----------------------------------------------- */

.etapes {
  display: flex;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
  gap: 0 34px;
}
.etapes li {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-tres-doux);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: color var(--transition);
}
.etapes li::before {
  content: attr(data-rang);
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--filet-vif);
  display: grid; place-items: center;
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0;
  transition: all var(--transition);
}
.etapes li[data-etat="fait"] { color: var(--texte-doux); }
.etapes li[data-etat="fait"]::before {
  background: var(--or); border-color: var(--or); color: #100e0a;
}
.etapes li[data-etat="courant"] { color: var(--champagne); }
.etapes li[data-etat="courant"]::before {
  border-color: var(--or); color: var(--or-clair);
  box-shadow: 0 0 0 4px rgb(201 162 39 / 10%);
}

.document {
  display: flex;
  gap: 18px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--filet);
}
.document:last-child { border-bottom: 0; }
.document .titre { color: var(--champagne); flex: 1; }

pre.contrat {
  white-space: pre-wrap;
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.75;
  color: var(--texte-doux);
  background: var(--nuit-creux);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 32px 34px;
  max-height: 440px;
  overflow-y: auto;
  margin: 0;
}
pre.contrat::-webkit-scrollbar { width: 10px; }
pre.contrat::-webkit-scrollbar-thumb { background: var(--filet-vif); border-radius: 999px; }

/* --- Le lingot support ---------------------------------------------------- */

/*
 * Montrer le numero de serie du lingot sur lequel porte la quote-part est le meilleur argument
 * de confiance disponible (D17). Il merite donc mieux qu'une ligne de tableau.
 */
.lingot {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 24px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--filet);
}
.lingot:last-child { border-bottom: 0; }
.lingot .serie {
  grid-column: 1 / -1;
  font-family: var(--chiffres);
  font-size: 17px;
  letter-spacing: 0.1em;
  color: var(--or-clair);
}
.lingot dt { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texte-tres-doux); }
.lingot dd { margin: 0; color: var(--texte-doux); }

/* --- Connexion ------------------------------------------------------------ */

.connexion {
  max-width: 400px;
  margin: 14vh auto;
  padding: 0 24px;
  text-align: center;
}
.connexion .marque { justify-content: center; margin-bottom: 8px; font-size: 20px; }
.connexion .role {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--texte-tres-doux);
  margin-bottom: 38px;
}
.connexion .carte { padding: 34px 32px; text-align: left; }
.connexion button { width: 100%; }

/* --- Divers --------------------------------------------------------------- */

.vide {
  color: var(--texte-tres-doux);
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  padding: 44px 0;
  text-align: center;
}
.chargement { color: var(--texte-tres-doux); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
.separateur { height: 1px; background: var(--filet); border: 0; margin: 40px 0; }

a { color: var(--or-clair); text-decoration-color: rgb(201 162 39 / 40%); text-underline-offset: 3px; }
a:hover { color: var(--champagne); }

@media (max-width: 760px) {
  .bandeau { flex-wrap: wrap; gap: 14px; padding: 16px 20px; }
  .bandeau .pousse { margin-left: 0; width: 100%; justify-content: space-between; }
  .onglet { margin: 0 16px 0 0; }
  main { padding: 36px 20px 80px; }
  h1 { font-size: 27px; }
  .carte { padding: 22px 20px; }
  .honneur { padding: 34px 20px 30px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* --- Page d'accueil ------------------------------------------------------- */

/*
 * Le seuil. Trois portes, aucune donnee, aucun appel reseau : la page se sert sans que l'API
 * soit interrogee, ce qui la rend consultable meme quand le reste est en panne.
 */
.accueil { max-width: 900px; margin: 0 auto; padding: 15vh 40px 100px; }
.accueil .marque {
  font-family: var(--serif);
  font-size: clamp(26px, 5vw, 40px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--champagne);
  margin: 0 0 14px;
}
.accueil .devise {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--texte-doux);
  margin: 0 0 48px;
}

.portes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin: 48px 0 0; }

.porte {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 30px 28px 32px;
  background: linear-gradient(180deg, var(--nuit-carte), var(--nuit-creux));
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  text-decoration: none;
  position: relative;
  transition: border-color var(--transition), transform var(--transition);
}
.porte::before {
  content: '';
  position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--or), transparent);
  opacity: 0;
  transition: opacity var(--transition);
}
.porte:hover { border-color: var(--filet-vif); transform: translateY(-2px); }
.porte:hover::before { opacity: 0.8; }

.porte-role { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--or); }
.porte-nom { font-family: var(--serif); font-size: 24px; color: var(--champagne); }
.porte-propos { font-size: 13.5px; color: var(--texte-doux); line-height: 1.6; }

.pied {
  margin: 56px 0 0;
  font-size: 13px;
  color: var(--texte-tres-doux);
  max-width: 60ch;
  line-height: 1.7;
}

@media (max-width: 760px) {
  .accueil { padding: 9vh 20px 70px; }
}

/* --- Sections de formulaire ------------------------------------------------
 *
 * Un formulaire long se lit par blocs. Sans respiration au-dessus des intertitres, « Domicile et
 * contact » colle le champ precedent et le conseiller ne voit plus ou finit une section. */
form h3 { margin: 28px 0 14px; }
form h3:first-of-type { margin-top: 6px; }
form .sous-titre + h3 { margin-top: 20px; }

/* --- Case a cocher ---------------------------------------------------------
 *
 * casa.css met les `label` en capitales espacees : c'est bon pour l'etiquette d'un champ, pas
 * pour une phrase de consentement — « PERSONNE POLITIQUEMENT EXPOSEE, OU PROCHE D'UNE TELLE
 * PERSONNE » se crie et se lit mal. La case revient donc a une typographie de phrase. */
.champ.case {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.champ.case input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--or);
  flex: 0 0 auto;
}
.champ.case label {
  text-transform: none;
  letter-spacing: normal;
  font-size: 14px;
  line-height: 1.5;
  color: var(--texte);
  margin: 0;
}

/* La retrospective : le tableau respire sous son bouton. */
#table-retrospective { margin-top: 22px; }
#bloc-retrospective .mention { margin-top: 18px; }

/* --- File de vigilance -----------------------------------------------------
 *
 * Le motif de refus tient sur la meme ligne que les boutons : c'est un champ de decision, pas
 * un formulaire. Etale sur toute la largeur, il donnait au refus plus de place qu'a la
 * validation, alors que c'est l'inverse qu'on veut. */
#file-vigilance .carte { margin-bottom: 14px; }
#file-vigilance .actions { flex-wrap: wrap; align-items: center; gap: 10px; }
#file-vigilance .actions input[type="text"] { max-width: 22rem; flex: 1 1 14rem; }

/* --- QR d'affiliation ------------------------------------------------------
 *
 * Noir sur blanc, toujours. Un QR dore sur fond sombre est joli et ne se lit pas : les lecteurs
 * cherchent un contraste franc, et l'or n'en donne pas assez. On lui donne donc son propre
 * cartouche blanc plutot que de le fondre dans l'interface. */
#zone-qr {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
#zone-qr canvas {
  background: #fff;
  border-radius: var(--rayon);
  padding: 0;
  max-width: 100%;
  height: auto;
  box-shadow: 0 0 0 1px var(--filet-vif);
}

#lien-affiliation {
  font-family: var(--chiffres);
  font-size: 12px;
  word-break: break-all;
  color: var(--texte-doux);
  margin-top: 6px;
}

#code-conseiller {
  font-family: var(--chiffres);
  letter-spacing: 0.22em;
}

/* ══ Impression ══════════════════════════════════════════════════════════════════════════════
   Ce bloc sert d'abord au livre de police. Un controleur des douanes qui demande le registre
   attend un document, pas une capture d'ecran d'un cockpit : fond blanc, encre noire, en-tete
   d'etablissement repete sur chaque page, et rien de l'interface autour.

   Le sombre-et-or est fait pour un ecran. Sur papier il devient un aplat qui vide une cartouche
   et rend les chiffres gris ; on le retire donc entierement plutot que de l'attenuer. */
/* ══ Impression ══════════════════════════════════════════════════════════════════════════════
   Ce bloc sert d'abord au LIVRE DE POLICE, et il est ecrit pour lui.

   Un controleur des douanes qui demande le registre attend un document de registre, pas une
   capture d'ecran d'un cockpit. Les exigences de forme du code de commerce et de l'annexe IV du
   CGI portent sur ce qui doit y figurer — numerotation continue, nature de l'operation, identite
   de la contrepartie, description de l'objet, poids, titre — et sur le fait que ce soit LISIBLE.
   Douze colonnes ecrasees dans une largeur A4 portrait ne remplissent pas la seconde condition.

   D'ou le paysage. Le sombre-et-or, lui, est fait pour un ecran : sur papier il vide une
   cartouche et rend les chiffres gris. On le retire entierement plutot que de l'attenuer. */
@media print {
  :root {
    --nuit: #fff; --nuit-carte: #fff; --nuit-relief: #fff; --nuit-creux: #fff;
    --texte: #000; --texte-doux: #222; --texte-tres-doux: #444;
    --or: #000; --or-clair: #000; --champagne: #000;
    --filet: #999; --filet-vif: #666;
  }

  /* A4 PAYSAGE. Douze colonnes ne tiennent pas autrement, et un registre illisible est un
     registre qu'un controleur fera refaire. */
  @page { size: A4 landscape; margin: 12mm 10mm 15mm; }

  html, body { background: #fff !important; color: #000 !important; }
  body { font-size: 8.5pt; line-height: 1.3; }

  /* Tout ce qui sert a naviguer ou a agir n'a pas de sens sur une feuille. La vue imprimee est
     celle qui n'a pas `hidden` : le meme mecanisme que les onglets, pas un second etat. */
  .bandeau nav, .pousse, .avis, button, .discret, .actions, .champ, .s-entete, .s-appels,
  [hidden] { display: none !important; }

  .carte, .panneau, .bloc, .entete-vue, .s-bloc {
    border-color: #999 !important;
    box-shadow: none !important;
    background: #fff !important;
  }
  .sous-titre, .mention, .appoint, .etiquette { color: #333 !important; }

  /* --- L'en-tete d'etablissement -------------------------------------------
     Il identifie le registre, donc il ouvre le document. Il ne se repete pas a chaque page —
     les navigateurs ne le font pas de facon fiable — mais les EN-TETES DE COLONNES, eux, se
     repetent, et c'est ce qui rend une page isolee lisible. */
  .bandeau {
    display: block !important;
    border-bottom: 1.5pt solid #000;
    padding: 0 0 5pt;
    margin: 0 0 8pt;
    background: #fff !important;
  }
  .marque, .marque em { color: #000 !important; font-size: 12pt; letter-spacing: 0.2em; }

  .entete-vue h1 { font-size: 14pt; margin: 0 0 2pt; color: #000 !important; }
  .entete-vue .sous-titre { font-size: 8pt; max-width: none; }

  /* Le cartouche d'etablissement : SIREN, siege, declaration d'existence, numero d'assujetti,
     bureau de Garantie. C'est ce qu'un controleur lit en premier pour savoir a qui il a affaire. */
  .carte.marquee {
    border: 1pt solid #000 !important;
    padding: 4pt 6pt !important;
    margin: 0 0 6pt !important;
    break-inside: avoid;
  }
  .carte.marquee h3 { font-size: 8pt; margin: 0 0 3pt; }
  /* L'etiquette au-dessus de sa valeur, sinon « SIREN » colle « 998936421 » et le cartouche
     devient une bouillie de mots. `.mesure` est un bloc en ligne, ses enfants des blocs. */
  /*
   * Le cartouche se lit comme un en-tete de registre : « SIREN : 998936421 », libelle et valeur
   * sur la meme ligne.
   *
   * En blocs superposes, l'adresse du siege tombait sur six lignes et le cartouche mangeait le
   * quart de la page. Ici chaque mention tient sur une ligne, trois par rangee, et le deux-points
   * separe sans qu'on ait a compter sur un espace insecable.
   */
  .carte.marquee .mesure {
    display: block;
    width: auto;
    margin: 0 0 1.5pt;
    line-height: 1.3;
  }
  .carte.marquee .mesure .etiquette {
    display: inline;
    font-size: 6.5pt;
    letter-spacing: 0.08em;
  }
  .carte.marquee .mesure .etiquette::after { content: ' : '; letter-spacing: 0; }
  .carte.marquee .valeur { display: inline; font-size: 8.5pt !important; }

  /* Deux colonnes : les six mentions tiennent en trois lignes au lieu de six. */
  .carte.marquee > * { column-count: 2; column-gap: 18pt; }
  .carte.marquee .jeton { margin-top: 2pt; }

  .grille.trois > * { display: inline-block; margin-right: 24pt; border: 0 !important; padding: 0 !important; vertical-align: top; }
  .grille.trois .etiquette { display: block; font-size: 6.5pt; }

  /* Les compteurs d'entree et de sortie, sur une ligne. */
  .grille.trois { display: block; margin-bottom: 6pt; }
  .grille.trois > * { display: inline-block; margin-right: 18pt; border: 0 !important; padding: 0 !important; }
  .grille.trois .valeur { font-size: 11pt !important; }

  /* --- Le tableau des ecritures --------------------------------------------- */
  .defilable { overflow: visible !important; margin: 0; padding: 0; }
  .defilable > table { width: 100% !important; min-width: 0 !important; table-layout: fixed; }

  table { width: 100%; border-collapse: collapse; font-size: 7.5pt; }

  /* Les en-tetes de colonnes se repetent page apres page : sans cela, la deuxieme feuille d'un
     registre de trente pages n'est qu'une grille de chiffres sans titre. */
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  tr { break-inside: avoid; page-break-inside: avoid; }

  th, td {
    border: 0.5pt solid #666;
    padding: 2pt 3pt;
    color: #000 !important;
    white-space: normal !important;      /* en paysage, on laisse le texte revenir a la ligne */
    word-break: break-word;
    vertical-align: top;
  }
  th {
    background: #e8e8e8 !important;
    text-align: left;
    font-size: 6.5pt;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Les chiffres se lisent en colonne : chasse fixe, alignes a droite, jamais coupes. */
  /* Pas de chasse fixe a l'impression : la police monospace du systeme n'a pas de glyphe ‰, et
     le titre « 999,9 ‰ » s'imprimait « 999,9 & ». `tabular-nums` aligne les colonnes sans elle. */
  td.nombre, th.nombre {
    text-align: right;
    font-family: var(--sans) !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap !important;
  }
  td.libre, th.libre { min-width: 0; max-width: none; }

  /* --- Largeurs de colonnes du registre --------------------------------------
     `table-layout: fixed` repartit egalement par defaut : le numero d'ordre recoit alors autant
     de place que la description de l'objet, la valeur deborde sur l'emplacement, et le ‰ du
     titre se fait couper. On donne donc a chaque colonne la largeur de ce qu'elle porte. */
  #tableau-livre th:nth-child(1),  #tableau-livre td:nth-child(1)  { width: 4%; }   /* N° */
  #tableau-livre th:nth-child(2),  #tableau-livre td:nth-child(2)  { width: 8%; }   /* Date */
  #tableau-livre th:nth-child(3),  #tableau-livre td:nth-child(3)  { width: 7%; }   /* Nature */
  #tableau-livre th:nth-child(4),  #tableau-livre td:nth-child(4)  { width: 9%; }   /* Contrepartie */
  #tableau-livre th:nth-child(5),  #tableau-livre td:nth-child(5)  { width: 10%; }  /* Reference */
  #tableau-livre th:nth-child(6),  #tableau-livre td:nth-child(6)  { width: 15%; }  /* Objet */
  #tableau-livre th:nth-child(7),  #tableau-livre td:nth-child(7)  { width: 5%; }   /* Metal */
  #tableau-livre th:nth-child(8),  #tableau-livre td:nth-child(8)  { width: 7%; }   /* Titre */
  #tableau-livre th:nth-child(9),  #tableau-livre td:nth-child(9)  { width: 8%; }   /* Poids */
  #tableau-livre th:nth-child(10), #tableau-livre td:nth-child(10) { width: 10%; }  /* Valeur */
  #tableau-livre th:nth-child(11), #tableau-livre td:nth-child(11) { width: 9%; }   /* Emplacement */
  #tableau-livre th:nth-child(12), #tableau-livre td:nth-child(12) { width: 9%; }   /* Inscrit par */

  /* Le jeton d'etat (« entree », « cession ») devient un mot, pas une pastille doree. */
  .jeton {
    border: 0.5pt solid #666 !important;
    background: #fff !important;
    color: #000 !important;
    padding: 0 2pt;
    font-size: 6.5pt;
    letter-spacing: 0.02em;
  }

  /* --- La mention de forme -------------------------------------------------
     Elle dit que le registre est tenu sous forme numerique et que cette forme reste a confirmer
     par le bureau de Garantie. Elle ferme le document ; elle ne se detache pas de lui. */
  .mention {
    /* Pas de `break-before: avoid` : avec quatre ecritures il tirait la derniere ligne en page
       suivante, et avec cinq cents il tirerait la derniere page entiere. La mention ferme le
       document ; elle n'a pas besoin de coller a la ligne qui la precede. */
    border-left: 1pt solid #000;
    padding-left: 6pt;
    font-size: 7.5pt;
    margin-top: 8pt;
  }

  /* Pas d'URL en exposant : un registre n'est pas une page web imprimee. */
  a[href]::after { content: ''; }

  /* Le site public garde ses formulaires lisibles a l'impression. */
  main form button, main form .avis { display: revert !important; }

  /* Le QR imprime doit rester GRAND et contraste : il sera scanne depuis une feuille, parfois
     de loin, parfois mal eclairee. */
  #zone-qr canvas { width: 90mm !important; height: 90mm !important; box-shadow: none; }
  #code-conseiller { font-size: 16pt; }
}