/* Le compte mimoslabs (my.mimoslabs.com) : les pages du client, dans
   l'identité du site public — papier, sable, encre, pierre, or ; Jost et
   IBM Plex Mono ; le monogramme en arches. Les couleurs et l'esprit du site,
   pas ses mises en page : une colonne de repères, une colonne de contenu,
   lisibles au pouce dès 360 px.

   Une seule feuille, aucune ressource extérieure, aucun script : la politique
   de contenu des pages (securite.entetes_pages) n'admet que ce qui vient
   d'ici — cette feuille, les polices de static/polices/, le monogramme. Le
   thème suit celui du système, clair ou sombre.

   Contraste : tout texte tient le seuil AA (4,5:1) sur son fond, dans les deux
   thèmes ; les traits des champs et l'anneau du focus, 3:1. C'est mesuré sur
   les couleurs ci-dessous par tests/test_compte.py — qui change une couleur
   relance les tests. */

@font-face {
  font-family: "Jost";
  src: url("polices/jost-400-700.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("polices/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("polices/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ── Les deux thèmes ─────────────────────────────────────────────────────── */
/* Les cinq couleurs du site, et ce que le compte y ajoute : le texte doux sur
   le sable, le fond des champs, et la rouille — les erreurs et le geste qui
   débranche une machine. */
:root {
  --papier: #f3f1ec;
  --sable: #e4ddcf;
  --encre: #121311;
  --pierre: #6f6b62;
  --pierre-sable: #5a564e;
  --or: #a9761a;
  --or-texte: #8a5f12;
  --rouille: #a3361a;
  --champ: #fbfaf7;
  --fond-erreur: #f4e2da;
  --fond-avis: #f1e6cc;
  --cerne-bouton: inset 0 0 0 2px var(--encre), inset 0 0 0 4px var(--papier), inset 0 0 0 5px var(--encre);
  --sans: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --colonne: clamp(150px, 22%, 300px);
  --gouttiere: clamp(20px, 3vw, 48px);
  --mesure: 44rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papier: #121311;
    --sable: #1e1c18;
    --encre: #f3f1ec;
    --pierre: #a39e93;
    --pierre-sable: #a39e93;
    --or: #d4a24a;
    --or-texte: #d4a24a;
    --rouille: #ec8b6c;
    --champ: #1a1a17;
    --fond-erreur: #2a1813;
    --fond-avis: #262014;
    color-scheme: dark;
  }
}

/* ── La base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--papier); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  overflow-wrap: break-word;
}
h1, h2, h3, p, dl, dd, ul, figure, pre { margin: 0; }
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--or);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; border-radius: 4px; }
b, strong { font-weight: 600; }
code {
  font-family: var(--mono);
  font-size: 0.86em;
  overflow-wrap: anywhere;
}

.aller-au-contenu {
  position: absolute; left: 12px; top: -60px; z-index: 10;
  background: var(--encre); color: var(--papier);
  padding: 10px 16px; border-radius: 999px;
  font-size: 15px; font-weight: 500; text-decoration: none;
}
.aller-au-contenu:focus { top: 12px; }

/* Lu par les lecteurs d'écran, invisible à l'œil. */
.invisible {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.page {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(20px, 3.6vw, 56px) clamp(20px, 3.6vw, 56px) clamp(28px, 4vw, 56px);
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: clamp(40px, 6vw, 88px);
}
main {
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start;
  gap: clamp(36px, 5vw, 64px);
}

/* ── Le monogramme ───────────────────────────────────────────────────────── */
.monogramme { display: block; }
.monogramme .trait { fill: none; stroke: currentColor; }
.monogramme .point { fill: var(--or); }

/* ── La barre du haut ────────────────────────────────────────────────────── */
.barre {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 24px;
}
.barre__marque {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
}
.barre__marque .monogramme { width: 36px; height: 22.5px; flex: none; }
.barre__nom { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.barre__point { color: var(--or-texte); }
.barre__espace { font-weight: 400; color: var(--pierre); }
.barre__nav {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 10px 22px; font-size: 15px;
}
.barre__site { text-decoration-color: transparent; }
.barre__site:hover { text-decoration-color: var(--or); }
.barre__sortie { margin: 0; }
.pastille {
  font: inherit; font-size: 14px; font-weight: 500; color: inherit;
  background: transparent; border: 1.5px solid currentColor; border-radius: 999px;
  min-height: 36px; padding: 5px 14px; cursor: pointer;
}
.pastille:hover { background: var(--sable); }

/* ── Les rangées : un repère à gauche, le contenu à droite ───────────────── */
.rangee { display: flex; flex-wrap: wrap; gap: 14px var(--gouttiere); }
.rangee--filet { padding-top: 22px; border-top: 2px solid currentColor; }
.repere {
  flex: 0 0 var(--colonne);
  padding-top: 5px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--pierre);
}
.corps { flex: 1 1 520px; min-width: 0; display: grid; gap: 18px; align-content: start; }
.corps > * { max-width: var(--mesure); }
.corps > .registre, .corps > .tete, .corps > .fiche, .corps > .accuse { max-width: none; }
.fiche > p { max-width: var(--mesure); }
/* 2 px, 3 px de vide, 2 px : comme sous l'en-tête du site. */
.double-filet {
  box-sizing: content-box; height: 3px;
  border-top: 2px solid currentColor; border-bottom: 2px solid currentColor;
}

/* ── Titres et textes ────────────────────────────────────────────────────── */
h1 {
  font-size: clamp(38px, 5.4vw, 76px); line-height: 1; font-weight: 700;
  letter-spacing: -0.035em; text-wrap: balance;
}
h2 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
h3 { font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -0.005em; margin-top: 10px; }
.chapeau { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.45; color: var(--pierre); text-wrap: pretty; }
.chapeau b, .chapeau strong, .chapeau a { color: var(--encre); }
.mesure { max-width: var(--mesure); }
.note { font-size: 15px; line-height: 1.5; color: var(--pierre); }
.entete .corps { gap: 22px; }

/* Une en-tête de bloc : le titre à gauche, son geste à droite. */
.tete {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 20px;
}

/* ── Boutons et gestes ───────────────────────────────────────────────────── */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 13px 26px;
  border: 0; border-radius: 999px;
  font: inherit; font-size: 16px; font-weight: 500; line-height: 1.2; text-align: center;
  text-decoration: none; cursor: pointer;
  color: inherit; background: transparent;
}
.bouton--plein { background: var(--encre); color: var(--papier); }
.bouton--plein:hover { background: var(--pierre); }
.bouton--filet { box-shadow: var(--cerne-bouton); }
.bouton--filet:hover { background: var(--sable); }
.bouton--danger { background: var(--rouille); color: var(--papier); }
.bouton--danger:hover { background: var(--encre); }
.bouton--petit { min-height: 40px; padding: 9px 18px; font-size: 15px; }
.fiche .bouton--filet:hover { background: var(--papier); }

/* ── Les états : une pastille, et sa couleur ne dit jamais seule ce qu'elle dit ── */
.etat {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 3px 12px; border: 1.5px solid currentColor; border-radius: 999px;
  font-size: 14px; font-weight: 500; line-height: 1.4; white-space: nowrap;
}
.etat::before {
  content: ""; width: 8px; height: 8px; flex: none; border-radius: 999px; background: var(--or);
}
.etat--revoquee { color: var(--rouille); }
.etat--revoquee::before { background: currentColor; }
.etat--attente::before { background: transparent; box-shadow: inset 0 0 0 2px var(--or); }
.etat--vide { color: var(--pierre); }
.etat--vide::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.fiche .etat--vide { color: var(--pierre-sable); }

.etiquette {
  display: inline-block; vertical-align: 0.15em;
  padding: 0 8px; border: 1.5px solid currentColor; border-radius: 999px;
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; line-height: 1.5;
}
.etiquette--test { color: var(--rouille); }

.puce { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 999px; background: var(--or); }

/* ── La fiche : un bloc de sable, comme la console du site ───────────────── */
.fiche {
  display: grid; gap: 16px; align-content: start;
  padding: clamp(20px, 2.6vw, 30px);
  background: var(--sable); border-radius: 22px;
}
.fiche .note { color: var(--pierre-sable); }
.fiche--retractation { box-shadow: inset 0 0 0 2px var(--or); }
.fiche--close { background: transparent; box-shadow: inset 0 0 0 1.5px var(--pierre); }
.fiche--close .note { color: var(--pierre); }

.faits { display: grid; gap: 0; }
.faits > div {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px;
  padding: 9px 0; border-top: 1.5px solid currentColor;
}
.faits > div:last-child { padding-bottom: 0; }
.faits dt {
  flex: 0 0 6.5rem;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--pierre-sable);
}
.faits dd { margin: 0; font-size: 18px; font-weight: 500; }

/* ── Le registre : postes, commandes, licences ───────────────────────────── */
.registre { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid currentColor; }
.registre > li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 24px; padding: 16px 0; border-bottom: 1.5px solid currentColor;
}
.registre__corps { flex: 1 1 280px; min-width: 0; display: grid; gap: 3px; }
.registre__titre { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; }
.registre__meta { font-size: 15px; line-height: 1.5; color: var(--pierre); }
.registre__meta code { font-size: 13px; }

/* ── Les formulaires ─────────────────────────────────────────────────────── */
.formulaire { display: grid; gap: 18px; max-width: 30rem; }
.formulaire--large { max-width: var(--mesure); }
.champ { display: grid; gap: 8px; }
label { font-weight: 500; }
.aide { font-size: 15px; font-weight: 400; line-height: 1.45; color: var(--pierre); }
input[type="email"], input[type="text"], input:not([type]), select {
  width: 100%; min-height: 52px; padding: 12px 18px;
  font: inherit; font-size: 18px;
  color: var(--encre); background: var(--champ);
  border: 1.5px solid var(--pierre); border-radius: 14px;
}
input[type="email"]:hover, input[type="text"]:hover, input:not([type]):hover, select:hover { border-color: var(--encre); }
input:focus-visible, select:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; border-color: var(--encre); border-radius: 14px; }
input[aria-invalid="true"] { border-color: var(--rouille); }
input::placeholder { color: var(--pierre); opacity: 1; }
input.code {
  font-family: var(--mono); font-size: 24px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
}
strong.code {
  display: inline-block;
  padding: 0 10px; border-radius: 8px; background: var(--sable); color: var(--encre);
  font-family: var(--mono); font-weight: 500; letter-spacing: 0.1em; white-space: nowrap;
}

fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; margin-bottom: 10px; font-weight: 500; }
.choix {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 6px; border-bottom: 1.5px solid currentColor;
  font-weight: 400; cursor: pointer;
}
.choix-liste legend + .choix { border-top: 1.5px solid currentColor; }
.choix:hover { background: var(--sable); }
.choix input {
  appearance: none; -webkit-appearance: none;
  flex: none; display: grid; place-content: center;
  width: 22px; height: 22px; margin: 2px 0 0;
  border: 2px solid var(--encre); border-radius: 999px; background: var(--champ);
  cursor: pointer;
}
.choix input::before {
  content: ""; width: 10px; height: 10px; border-radius: 999px;
  background: var(--or); transform: scale(0);
}
.choix input:checked::before { transform: scale(1); }
.choix input:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }
.choix:has(input:checked) { background: var(--sable); }
/* Sur le sable, le texte doux fonce : la pierre n'y tiendrait pas le 4,5:1. */
.choix:hover .note, .choix:has(input:checked) .note { color: var(--pierre-sable); }

/* ── Ce que la page dit : erreur, avis, succès ───────────────────────────── */
.alerte {
  padding: 14px 18px; border-radius: 14px; border-left: 4px solid var(--or);
  background: var(--sable); color: var(--encre);
}
.alerte--erreur { background: var(--fond-erreur); border-left-color: var(--rouille); }
.alerte--avis { background: var(--fond-avis); }
.alerte--succes { background: var(--sable); }

/* ── Les textes longs : notes de version, accusé de réception ────────────── */
.texte-brut, .accuse {
  padding: clamp(18px, 2.4vw, 28px);
  background: var(--sable); border-radius: 22px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.texte-brut { font-size: 17px; line-height: 1.6; }
.accuse { font-family: var(--mono); font-size: 13px; line-height: 1.7; }

/* ── Télécharger Bank : un fichier par fiche ─────────────────────────────── */
.version { display: grid; gap: 14px; }
.version h3 { margin-top: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.fichiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.corps > .version, .version > .fichiers, .precedente .fichiers { max-width: var(--mesure); }
.fichier { gap: 12px; }
.fichier__tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 18px; }
.fichier__systeme { font-size: 21px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.fichier__variante { font-size: 16px; font-weight: 400; letter-spacing: 0; color: var(--pierre-sable); }
.fichier__nom { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; }
.fichier__nom code { font-size: 14px; }
.fichier__taille { font-size: 15px; color: var(--pierre-sable); white-space: nowrap; }
.fichier__aide { font-size: 16px; line-height: 1.55; }
.fichier__aide code { font-size: 13.5px; }
.fichier__lien { margin: 0; }
/* L'empreinte : soixante-quatre signes qui se coupent n'importe où, jamais
   au-delà de la fiche. */
.empreinte { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.empreinte code { font-size: 13px; overflow-wrap: anywhere; word-break: break-all; }
.empreinte__libelle {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--pierre-sable);
}
.precedente { border-top: 1.5px solid currentColor; padding-top: 14px; display: grid; gap: 14px; }
.version + .version { border-top: 1.5px solid currentColor; padding-top: 18px; }
.precedente[open] { padding-bottom: 4px; }
.precedente > summary { cursor: pointer; font-size: 18px; font-weight: 600; line-height: 1.3; }
.precedente > summary::marker { color: var(--or-texte); }
.precedente > .note { margin-top: -4px; }
.fiche--telecharger { box-shadow: inset 0 0 0 2px var(--encre); }
.fiche--telecharger p { max-width: var(--mesure); }

/* Une commande à copier. Sans script, rien ne copie à la place de l'humain :
   un clic sélectionne la ligne entière. */
.commande {
  margin: 0; padding: 14px 18px; border-radius: 14px;
  background: var(--sable); color: var(--encre);
  font-family: var(--mono); font-size: 14px; line-height: 1.65;
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all;
  -webkit-user-select: all; user-select: all; cursor: text;
}
.commande code { font-size: inherit; }

/* ── Le pied ─────────────────────────────────────────────────────────────── */
.pied { display: grid; gap: 18px; font-size: 15px; }
.pied__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 12px var(--gouttiere); }
.pied__nom { flex: 0 0 var(--colonne); display: flex; align-items: center; gap: 9px; }
.pied__nom a { display: inline-flex; align-items: center; gap: 9px; }
.pied__liens { flex: 1 1 420px; display: flex; flex-wrap: wrap; gap: 8px 26px; }
.pied a { text-decoration-color: transparent; }
.pied a:hover { text-decoration-color: var(--or); }
.pied__liens--legal { color: var(--pierre); }
.pied__liens--legal a:hover { color: var(--encre); }

/* ── Sur un téléphone ────────────────────────────────────────────────────── */
@media (max-width: 559px) {
  body { font-size: 16.5px; }
  .barre { gap: 12px 16px; }
  .barre__nom { font-size: 18px; }
  .formulaire .bouton { width: 100%; }
  .formulaire .actions { gap: 14px; }
  .formulaire .actions > a { margin: 0 auto; }
  .repere, .pied__nom { flex-basis: 100%; }
}
/* En contraste élevé (Windows), le système retire fonds et ombres : les
   boutons en anneau, les fiches et les cases du choix gardent un trait. */
@media (forced-colors: active) {
  .bouton, .pastille { border: 2px solid; }
  .fiche, .texte-brut, .accuse, .alerte, .commande { border: 1px solid; }
  .choix input { appearance: auto; -webkit-appearance: auto; }
  .choix input::before { content: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .bouton, .pastille, .choix { transition: background-color 0.15s; }
  .choix input::before { transition: transform 0.12s; }
}