/* Kit des consoles, charte Carmin : le papier domine, l'encre écrit, le carmin signe et désigne l'action principale. */
/* Polices servies par le site (kit/polices/README.md) : aucun tiers. */
@font-face { font-family: "Bodoni Moda"; src: url("/polices/bodoni-moda-latin-opsz-normal.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/polices/archivo-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/polices/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --papier: #FAF8F5; --sable: #F3F0EB; --filet: #E8E3DC;
  --encre: #1B1917; --gris: #5C5751; --carmin: #6E1A20; --vert: #55684E;
  --bodoni: 'Bodoni Moda', serif; --archivo: 'Archivo', sans-serif; --mono: 'IBM Plex Mono', monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--papier); color: var(--encre); font-family: var(--archivo); -webkit-font-smoothing: antialiased; font-variation-settings: "opsz" 18; }

.coque { min-height: 100vh; display: flex; flex-direction: column; }
.barre { height: 66px; border-bottom: 1px solid var(--filet); display: flex; align-items: center; justify-content: space-between; padding: 0 44px; }
.barre .logo { height: 30px; }
.puce-chaine { font-family: var(--mono); font-size: 13.5px; color: var(--gris); display: flex; align-items: center; gap: 10px; border: 1px solid var(--filet); border-radius: 99px; padding: 7px 14px; }
.puce-chaine i { width: 8px; height: 8px; border-radius: 50%; background: var(--vert); }
.puce-chaine.hors i { background: var(--carmin); }
.contenu { flex: 1; padding: 64px 44px; }
.pied { height: 52px; border-top: 1px solid var(--filet); display: flex; align-items: center; justify-content: space-between; padding: 0 44px; font-size: 14px; color: var(--gris); }
.pied em { font-family: var(--bodoni); font-style: normal; font-size: 18px; color: var(--encre); font-variation-settings: "opsz" 6; }
.pied .mono { font-family: var(--mono); }

.ecran { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); grid-template-rows: repeat(5, auto) 1fr; align-items: start; gap: 24px 64px; max-width: 1180px; }
.ecran .titre, .ecran .sous, .ecran .verif, .ecran .actions { grid-column: 1; }
.ecran .blocs { grid-column: 2; grid-row: 1 / span 6; display: flex; flex-direction: column; gap: 18px; }
.titre { font-family: var(--bodoni); font-weight: 500; font-size: 60px; line-height: 1.08; }
.sous { font-size: 19px; color: var(--gris); line-height: 1.55; max-width: 560px; }
.verif { font-family: var(--mono); font-size: 12.5px; color: var(--gris); }
.libelle { font-size: 12.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }
.carte { background: #fff; border: 1px solid var(--filet); border-radius: 12px; padding: 22px 26px; }
.lignes > div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--filet); font-size: 16px; }
.lignes > div:last-child { border-bottom: 0; }
.lignes span { color: var(--gris); }
.lignes b { font-weight: 500; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.lignes b.mono { font-family: var(--mono); font-weight: 400; }
.figure .valeur { font-family: var(--bodoni); font-size: 48px; margin: 12px 0 6px; }
.figure .detail { font-size: 14.5px; color: var(--gris); }
.formulaire { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.champ { min-width: 0; }
.champ label { display: block; font-size: 13.5px; font-weight: 500; margin-bottom: 7px; }
.champ .entree { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 14px; background: #fff; border: 1px solid var(--filet); border-radius: 6px; }
.champ .entree:focus-within { border-color: var(--encre); }
.champ input, .champ select { flex: 1; width: 100%; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--encre); }
.champ input[inputmode="decimal"] { font-family: var(--mono); }
.champ .unite { font-family: var(--mono); font-size: 12.5px; color: var(--gris); white-space: nowrap; }
.champ input:disabled, .champ select:disabled { color: var(--gris); }
.champ .aide { font-size: 13px; color: var(--gris); margin-top: 6px; }
.champ .erreur, .champ .indisponible { font-size: 13px; color: var(--carmin); margin-top: 6px; }
.note { font-size: 14.5px; color: var(--gris); line-height: 1.5; background: var(--sable); border-radius: 8px; padding: 12px 14px; }
.note.ouverte { color: var(--carmin); background: #F3E3E3; }
.actions { margin-top: 18px; display: flex; gap: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 30px; border-radius: 6px; font-family: var(--archivo); font-size: 17px; font-weight: 500; border: 0; cursor: pointer; }
.btn-carmin { background: var(--carmin); color: #fff; }
.refus { font-size: 16px; color: var(--carmin); }

@media (max-width: 860px) {
  .ecran { grid-template-columns: minmax(0, 1fr); }
  .ecran .blocs { grid-column: 1; grid-row: auto; }
  .titre { font-size: 40px; }
  .barre, .contenu, .pied { padding-left: 16px; padding-right: 16px; }
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.ecran > .note { grid-column: 1; max-width: 560px; }