/* ——— le socle ——————————————————————————————————————————————————
   Ce que le pupitre (Mac, Tauri) et le cockpit du VPS (Rails) partagent.
   Lu par les deux builds : `beforeBuildCommand`/`beforeDevCommand` copient
   ce fichier et `polices/` dans `pupitre/front/` avant chaque build Tauri
   (voir `pupitre/src-tauri/tauri.conf.json`) — un lien symbolique aurait
   suffi mais n'a pas pu être vérifié dans le binaire release, la copie est
   le choix sûr. Propshaft, lui, a `design/` dans ses chemins et lit ce
   fichier directement. Une retouche ici change les deux écrans. Ce qui n'a
   pas de sens sur l'un des deux ne vient pas ici. */

/* ——— polices ————————————————————————————————————————————————————
   Embarquées, jamais chargées : la CSP du pupitre est `default-src 'self'`
   et un lien vers fonts.googleapis.com serait bloqué SANS BRUIT — l'écran
   retomberait sur SF sans que rien ne le dise. Sous-ensemble latin seul
   (les guillemets, les tirets cadratins et le « − » du décompte y sont) ;
   un caractère hors de ce jeu retombe glyphe par glyphe sur la pile système,
   ce qui est exactement le comportement voulu.

   Archivo est VARIABLE : un fichier pour 400 à 700, au lieu de quatre.
   Licences : `polices/ofl-*.txt` (SIL OFL 1.1 pour les deux). */
@font-face {
  font-family: Archivo;
  font-style: normal;
  font-weight: 400 700;
  src: url("/assets/polices/archivo-var-latin-7a918f31.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  src: url("/assets/polices/ibm-plex-mono-400-latin-d13bb5b4.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  src: url("/assets/polices/ibm-plex-mono-500-latin-deab9c2b.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  src: url("/assets/polices/ibm-plex-mono-600-latin-0fdd541f.woff2") format("woff2");
}

/* ——— jetons ————————————————————————————————————————————————————
   Le poste de pilotage est SOMBRE, point. C'est un revirement assumé sur le
   « suivre l'apparence du système » d'avant : ce qui portait la hiérarchie
   était la teinte des fonds, et deux palettes voulaient dire deux hiérarchies
   à accorder. Une seule, tenue, et l'accent turquoise ne sert qu'à une chose —
   ce qui attend une décision. */
:root {
  color-scheme: dark;
  --fond: #0b0d0e;
  --fond-epine: #08090a;
  --fond-file: #090b0c;
  --fond-panneau: #0d1012;
  --fond-carte: #101416;
  --fond-bouton: #14181a;
  --filet: #1c2225;
  --filet-2: #2a3236;
  --filet-3: #14191b;
  --texte: #eef1f3;
  --texte-2: #b7c0c7;
  --texte-3: #9aa3ad;
  --texte-4: #6b757f;
  --texte-5: #4d565f;
  --sourd: #39434a;
  --accent: #5ecfc0;
  --accent-encre: #08201d;
  --ambre: #e0a33e;
  --rouge: #ff6b6b;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --r: 8px;
}

/* Le pouls dit « ça tourne » sans rien écrire : c'est le seul mouvement de
   l'écran, et il ne se déclenche jamais sur une action de l'humain. */
@keyframes pouls {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.82); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}

* { box-sizing: border-box; }

/* Le socle pose ce qui s'hérite — police, couleur, fond — sur `html`, et
   rien sur `body` : chaque écran a sa propre grille de body (le pupitre ses
   deux colonnes, le serveur son rail qui se couche), et c'est la seule règle
   du socle que les deux feuilles complètent au lieu de la reprendre. */
html {
  font: 15px/1.55 Archivo, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: var(--texte);
  background: var(--fond);
}

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

/* ——— l'épine —————————————————————————————————————————————————
   Elle ne coûte que 54 px et rend le seul chiffre qui décide s'il faut poser
   ce qu'on fait : combien de verdicts attendent. Elle reste lisible quand la
   fenêtre est à moitié cachée derrière l'éditeur. */
#epine {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  justify-items: center;
  gap: 1rem;
  padding: .9rem 0 1rem;
  background: var(--fond-epine);
  border-right: 1px solid var(--filet);
  -webkit-user-select: none;
  user-select: none;
}
.marque {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid #2c353a;
  border-radius: 6px;
  background: linear-gradient(160deg, #171c1f, #0e1113);
}
.losange {
  width: 9px;
  height: 9px;
  background: var(--accent);
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(94, 207, 192, .6);
}
.verdicts { display: grid; justify-items: center; gap: .15rem; font-family: var(--mono); }
#epine-compte { font-size: 17px; font-weight: 600; line-height: 1; color: var(--accent); }
.verdicts span + span { font-size: 8px; letter-spacing: .12em; color: var(--texte-5); }
/* Zéro verdict n'est pas une alerte : le chiffre s'éteint au lieu de crier. */
#epine.calme #epine-compte { color: var(--sourd); }

#epine-etats { display: grid; align-content: start; gap: .5rem; padding-top: .4rem; }
#epine-etats span { width: 5px; height: 5px; border-radius: 50%; background: #232a2e; }
#epine-etats span[data-cle="attend_decision"] { background: var(--accent); }
#epine-etats span[data-cle="attend_reponse"] { background: var(--ambre); }
#epine-etats span[data-cle="echoue"],
#epine-etats span[data-cle="bloque_quota"] { background: var(--rouge); }
#epine-etats span:first-child[data-cle^="attend"] { animation: pouls 2.6s ease-in-out infinite; }

.signature {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #394247;
}

/* ——— en-tête —————————————————————————————————————————————————— */
#entete {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.2rem;
  padding: .5rem 1rem;
  border-bottom: 1px solid var(--filet);
  background: linear-gradient(#101315, #0c0f10);
  -webkit-user-select: none;
  user-select: none;
}
#tic {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  color: #dfe4e8;
}
#entete .pastille {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 9px rgba(94, 207, 192, .75);
  animation: pouls 2.6s ease-in-out infinite;
}
/* Le silence ÉTEINT la pastille et arrête le pouls : c'est le même signe que
   le bandeau dit en toutes lettres, dans le coin de l'œil. */
#entete.silence .pastille {
  background: var(--texte-5);
  box-shadow: none;
  animation: none;
}
#entete.silence #tic { color: var(--texte-4); }

/* Décorative et honnête : une règle de cadence dont le seul curseur, à droite,
   marque le tic courant. Elle ne prétend pas mesurer autre chose. */
#tic-jauge {
  position: relative;
  height: 14px;
  border-left: 1px solid #232a2e;
  border-right: 1px solid #232a2e;
  background-image: repeating-linear-gradient(90deg, #232a2e 0 1px, transparent 1px 14px);
  background-position: left center;
  background-size: 100% 7px;
  background-repeat: repeat-x;
}
#tic-jauge::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(94, 207, 192, .8);
}
#entete.silence #tic-jauge::after { background: var(--texte-5); box-shadow: none; }

kbd { font: inherit; font-family: var(--mono); font-size: 10px; color: var(--texte-4); }

/* Une alerte se voit ou ne sert à rien : c'est tout ce que ce bandeau doit
   faire, et il ne parle que quand ça ne va pas — un bandeau permanent cesse
   d'être vu. */
/* `hidden` doit gagner sur un sélecteur d'ID : sans cette ligne le bandeau
   reste affiché, vide, en permanence. */
#bandeau[hidden], #diff-entete[hidden] { display: none; }
#bandeau, .bandeau {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  padding: .5rem 1rem;
  font-size: 13px;
  color: #ffd9d9;
  background: linear-gradient(90deg, rgba(255, 107, 107, .18), rgba(255, 107, 107, .06));
  border-bottom: 1px solid rgba(255, 107, 107, .55);
  box-shadow: inset 3px 0 0 var(--rouge);
}
#bandeau .etiquette, .bandeau .etiquette {
  flex: none;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rouge);
}

/* ——— ce qui brûle ——————————————————————————————————————————————
   Chaque section de hot.md devient une fiche fermée : le mur d'avant venait
   d'un texte qui coulait sans arête, et une arête par section suffit à savoir
   où l'on est sans lire. */
#brule { counter-reset: fiche; display: flex; flex-direction: column; gap: 1.1rem; }
#brule article {
  counter-increment: fiche;
  flex: 0 0 auto;
  border: 1px solid #1a2023;
  border-radius: 12px;
  background: var(--fond-panneau);
  overflow: hidden;
}
#brule article > header {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem 1.1rem .5rem;
  border-bottom: 1px solid #161b1e;
}
/* Le numéro est un compteur CSS : il suit l'ordre du fichier sans que le JS
   ait à compter, et il se renumérote tout seul quand la veille réordonne. */
#brule article > header::before {
  content: counter(fiche, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px #3d474e;
}
#brule article > header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #cfd6dd;
}
#brule article > header .filet { flex: 1; height: 1px; background: #171c1f; }
#brule article > header .compte {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--texte-5);
}

/* ——— les deux tons ————————————————————————————————————————————
   Ce qui EST chez moi et ce qui a une DATE ne se lisent pas comme le reste :
   une arête colorée, un titre plus haut, et un filet entre les entrées parce
   qu'on les parcourt une par une. Le ton vient d'un `data-ton` posé en JS —
   voir `ton()` dans `pupitre.js` pour ce que ce rapprochement coûte. */
#brule article[data-ton] > header::before { opacity: .6; }
#brule article[data-ton] ul { gap: .7rem; }
#brule article[data-ton] .corps { padding: .8rem 1.1rem 1rem; line-height: 1.55; }
#brule article[data-ton] li:not(:last-child) {
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--filet-3);
}

#brule article[data-ton="agir"] {
  border-color: #223034;
  background: #0d1113;
  box-shadow: inset 3px 0 0 rgba(94, 207, 192, .5);
}
#brule article[data-ton="agir"] > header { border-bottom-color: #172023; }
#brule article[data-ton="agir"] > header::before { -webkit-text-stroke-color: var(--accent); }
#brule article[data-ton="agir"] > header h3 { font-size: 20px; font-weight: 700; color: var(--texte); }
#brule article[data-ton="agir"] > header .filet {
  background: linear-gradient(90deg, rgba(94, 207, 192, .22), transparent);
}
#brule article[data-ton="agir"] > header .compte { color: var(--accent); }
#brule article[data-ton="agir"] .corps { color: #dfe4e8; }
#brule article[data-ton="agir"] li::before { background: var(--accent); }

/* L'ambre plutôt que l'accent : une échéance n'attend pas un verdict, elle
   arrive. Deux urgences de nature différente ne partagent pas leur couleur. */
#brule article[data-ton="echeance"] {
  border-color: #2a2419;
  background: #100e0b;
  box-shadow: inset 3px 0 0 rgba(224, 163, 62, .55);
}
#brule article[data-ton="echeance"] > header { border-bottom-color: #211d15; }
#brule article[data-ton="echeance"] > header::before { -webkit-text-stroke-color: var(--ambre); }
#brule article[data-ton="echeance"] > header h3 { font-size: 19px; color: #f0dcb4; }
#brule article[data-ton="echeance"] > header .filet {
  background: linear-gradient(90deg, rgba(224, 163, 62, .25), transparent);
}
#brule article[data-ton="echeance"] > header .compte { color: var(--ambre); }
#brule article[data-ton="echeance"] .corps { color: #dcd7cc; }
#brule article[data-ton="echeance"] li::before { background: var(--ambre); }
#brule article[data-ton="echeance"] li:not(:last-child) { border-bottom-color: #1c1913; }
#brule article[data-ton="echeance"] code {
  color: #e9c88a;
  background: #17130c;
  border-color: #2a2419;
}

/* Le traitement fort est POSITIONNEL, jamais nominal : reconnaître un titre
   est interdit, et à raison — une liste de titres en dur a déjà divergé une
   fois. La veille écrit hot.md dans l'ordre prescrit, donc la première section
   EST la plus urgente, quel que soit son nom. Renommée elle garde ce
   traitement ; supprimée, la suivante l'hérite. */
#brule article:first-child {
  border-color: rgba(94, 207, 192, .4);
  background: linear-gradient(180deg, rgba(94, 207, 192, .05), rgba(94, 207, 192, 0) 45%), #0e1214;
  box-shadow: 0 0 0 1px rgba(94, 207, 192, .07), 0 14px 34px rgba(0, 0, 0, .4);
}
#brule article:first-child > header {
  padding-bottom: .55rem;
  border-bottom-color: rgba(94, 207, 192, .18);
}
#brule article:first-child > header::before {
  font-size: 22px;
  -webkit-text-stroke-color: var(--accent);
  opacity: .8;
}
#brule article:first-child > header h3 { font-size: 25px; font-weight: 700; letter-spacing: -.02em; color: #f4f7f8; }
#brule article:first-child > header .filet {
  background: linear-gradient(90deg, rgba(94, 207, 192, .3), transparent);
}
#brule article:first-child > header .compte { color: var(--accent); }
#brule article:first-child .corps { font-size: 16.5px; color: #f4f7f8; }
#brule article:first-child li::before { background: var(--accent); }

#brule .corps { padding: .75rem 1.1rem .95rem; color: #c8cfd5; }
.prose ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.prose li, .prose p { max-width: 84ch; margin: 0; text-wrap: pretty; }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: .6rem; }
.prose ul > li { position: relative; padding-left: 1.1rem; }
.prose ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--sourd);
}
.prose strong { font-weight: 600; color: #f4f7f8; }

/* **`hot.md` ET le message de l'agent sont écrits par un modèle**, et `en_html` active les
   tableaux : un `###`, une liste numérotée, un tableau ou un bloc de code
   peuvent apparaître n'importe quel matin sans que personne regarde. Ce qui
   suit ne les embellit pas, il les empêche de casser la fiche — un titre de
   corps héritait du titre de SECTION (25 px gras dans la première), et une
   liste numérotée portait son numéro ET la puce maison. */
.prose :is(h1, h2, h3, h4, h5, h6) {
  margin: .9rem 0 .35rem;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texte-3);
}
.prose > :first-child { margin-top: 0; }
.prose ol { margin: 0; padding-left: 1.5rem; display: grid; gap: .6rem; }
.prose ol > li::marker { font-family: var(--mono); font-size: .85em; color: var(--texte-4); }
/* Un tableau plus large que la fiche scrolle CHEZ LUI : sans ça il pousse la
   colonne entière, et « ce qui brûle » se met à défiler horizontalement. */
.prose { overflow-x: auto; }
.prose table { border-collapse: collapse; margin: .3rem 0; font-size: 13px; }
.prose th, .prose td {
  padding: .3rem .5rem;
  border: 1px solid var(--filet);
  text-align: left;
  vertical-align: top;
}
.prose th {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texte-3);
  background: var(--fond-carte);
}
.prose blockquote {
  margin: .5rem 0;
  padding-left: .8rem;
  border-left: 2px solid var(--filet-2);
  color: var(--texte-3);
}
.prose hr { margin: .8rem 0; border: 0; border-top: 1px solid var(--filet); }
.prose pre {
  margin: .4rem 0;
  padding: .5rem .7rem;
  overflow-x: auto;
  border: 1px solid var(--filet);
  border-radius: 6px;
  background: #0a0c0d;
  font-size: 11.5px;
  line-height: 1.5;
}
.prose pre code { padding: 0; border: 0; background: none; font-size: inherit; color: var(--texte-2); }
.prose code {
  font-family: var(--mono);
  font-size: 11.5px;
  color: #9fd8d0;
  background: #101618;
  border: 1px solid #1f2a2c;
  border-radius: 3px;
  padding: .05rem .3rem;
}

/* Les liens de hot.md ne se déguisent plus en liens : l'écran du dossier est
   reporté, rien ne doit promettre qu'il existe. La neutralisation elle-même
   est en JS — le CSS ne peut pas empêcher une navigation. */
.prose a {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--texte-2);
  text-decoration: none;
  background: #171b1e;
  border: 1px solid var(--filet-2);
  border-radius: 3px;
  padding: .08rem .32rem;
  cursor: default;
}

/* ——— la file ————————————————————————————————————————————————— */
#colonne-file h2 {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  padding: .85rem .9rem .55rem;
  background: var(--fond-file);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--texte-3);
}
#colonne-file section:first-child h2 { color: #dfe4e8; }
#colonne-file h2 .filet { flex: 1; height: 1px; background: linear-gradient(90deg, var(--filet), transparent); }
#colonne-file h2 .compte {
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  border: 1px solid #262d31;
  border-radius: 3px;
  font-size: 10px;
  letter-spacing: 0;
}
#colonne-file section:first-child h2 .compte { border-color: rgba(94, 207, 192, .4); color: var(--accent); }
#colonne-file ul { margin: 0; padding: 0 .8rem; list-style: none; display: grid; gap: .45rem; }
#colonne-file section + section h2 { margin-top: 1.4rem; }
.vide { margin: .1rem .9rem 0; color: var(--texte-5); font-size: 12px; font-family: var(--mono); }

/* Le rail de gauche est un `border-left` et non une colonne de grille : même
   bande de 3 px, un élément de moins par carte. */
.carte {
  border: 1px solid #1f262a;
  border-left: 3px solid #2f373c;
  border-radius: var(--r);
  background: var(--fond-carte);
  padding: .6rem .7rem;
  cursor: pointer;
}
.carte:hover { border-color: var(--filet-2); }
.carte .haut {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--texte-4);
}
.carte .id { color: #dfe4e8; }
.carte .dossier { color: var(--texte-3); }
.carte .libelle {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: .3rem 0 .45rem;
  font-size: 14.5px;
  line-height: 1.4;
  color: #e8ecef;
}
/* La couleur REDIT ce que le mot dit déjà, elle ne le remplace jamais. */
.carte .etat {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--texte-4);
}
.carte .etat::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: 1px solid var(--texte-5);
}
.carte[data-cle="attend_decision"] { border-left-color: rgba(94, 207, 192, .45); }
.carte[data-cle="attend_decision"] .etat { color: var(--accent); }
.carte[data-cle="attend_decision"] .etat::before { background: var(--accent); border-color: var(--accent); }
.carte[data-cle="attend_reponse"] { border-left-color: rgba(224, 163, 62, .65); }
.carte[data-cle="attend_reponse"] .etat { color: var(--ambre); }
.carte[data-cle="attend_reponse"] .etat::before { background: var(--ambre); border-color: var(--ambre); }
.carte[data-cle="echoue"],
.carte[data-cle="bloque_quota"] { border-left-color: var(--rouge); border-color: #2a1c1e; }
.carte[data-cle="echoue"] .etat,
.carte[data-cle="bloque_quota"] .etat { color: var(--rouge); }
.carte[data-cle="echoue"] .etat::before,
.carte[data-cle="bloque_quota"] .etat::before { background: var(--rouge); border-color: var(--rouge); }

/* La carte sous le curseur clavier se lève et dit ce que ↵ fera. C'est le
   seul endroit de l'écran qui annonce une touche sans qu'on ait rien ouvert. */
.carte.choisie {
  border-color: rgba(94, 207, 192, .55);
  background: linear-gradient(#181d20, #121618);
  box-shadow: 0 0 0 1px rgba(94, 207, 192, .14), 0 10px 26px rgba(0, 0, 0, .5);
}
.carte.choisie .id { color: var(--accent); font-weight: 600; }
.carte.choisie .libelle { font-weight: 500; color: #f4f7f8; }
.carte.choisie .haut::after {
  content: "↵ OUVRIR";
  margin-left: auto;
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--accent);
}