/* Compta — un registre, pas un tableau de bord.
   Un seul geste marquant : la double marge verticale d'une page de livre de comptes.
   Tout le reste est réglure, encre et papier. */

@font-face {
  font-family: "Zilla Slab";
  src: url("/polices/ZillaSlab-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/polices/AtkinsonHyperlegible-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/polices/AtkinsonHyperlegible-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --papier: #edf1ea;
  --feuille: #fbfcfa;
  --encre: #16242b;
  --encre-douce: #4a5a5f;
  --registre: #1f5a44;
  --registre-fonce: #164232;
  --trait: #b7c4b9;
  --trait-leger: #dbe3dc;
  --rouge: #a3261c;
  --rouge-pale: #f8e9e7;
  --vert-pale: #e3efe8;

  --titre: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  --texte: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;

  /* Échelle typographique : rapport 1,25 à partir de 17 px. */
  --t-petit: 0.875rem;
  --t-base: 1.0625rem;
  --t-moyen: 1.3125rem;
  --t-grand: 1.6875rem;
  --t-titre: 2.125rem;

  --ligne: 1.75rem;      /* le pas de la réglure */
  --marge: 3.25rem;      /* largeur de la marge de registre */
}

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

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: var(--t-base);
  line-height: 1.55;
}

h1, h2, h3 { font-family: var(--titre); font-weight: 600; line-height: 1.15; margin: 0; }
h1 { font-size: var(--t-titre); }
h2 { font-size: var(--t-grand); margin-top: calc(var(--ligne) * 1.5); }
h3 { font-size: var(--t-moyen); margin-top: var(--ligne); }
p { margin: calc(var(--ligne) / 2) 0; max-width: 62ch; }

a { color: var(--registre); text-underline-offset: 0.18em; }
a:hover { color: var(--registre-fonce); }

:focus-visible { outline: 3px solid var(--registre); outline-offset: 2px; border-radius: 2px; }
main:focus { outline: none; }

.evitement { position: absolute; left: -999rem; top: 0; background: var(--encre); color: var(--feuille); padding: 0.5rem 1rem; z-index: 10; }
.evitement:focus { left: 0; }

/* ───────── L'en-tête : une ligne, le nom et le compte ───────── */

.entete {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1.5rem;
  max-width: 60rem; margin: 0 auto; padding: 1rem 1.25rem 0.75rem;
}
.entete .marque { font-family: var(--titre); font-size: var(--t-grand); color: var(--encre); text-decoration: none; }
.entete nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; align-items: baseline; font-size: var(--t-petit); }
.entete nav a { display: inline-block; padding: 0.2rem 0; }
.entete .qui { color: var(--encre-douce); }

/* ───────── La feuille et sa double marge ───────── */

.feuille {
  position: relative;
  max-width: 60rem; margin: 0 auto 4rem; min-height: 60vh;
  background: var(--feuille);
  border: 1px solid var(--trait);
  padding: 1.75rem 1.5rem 3rem calc(var(--marge) + 1.5rem);
}
.feuille::before {
  /* Deux filets rapprochés, comme la marge d'un livre de comptes. */
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--marge); width: 5px;
  border-left: 1px solid var(--rouge); border-right: 1px solid var(--rouge); opacity: 0.55;
}
.feuille.etroite { max-width: 34rem; }

@media (max-width: 40rem) {
  :root { --marge: 0.9rem; --t-titre: 1.75rem; --t-grand: 1.4375rem; }
  .feuille { padding: 1.25rem 1rem 2.5rem calc(var(--marge) + 1rem); border-left: 0; border-right: 0; }
  .entete { padding: 0.75rem 1rem 0.5rem; }
}

.titre-espace { margin-top: var(--ligne); }
.ecran:focus, h3[tabindex]:focus { outline: none; }
.introduction { color: var(--encre-douce); }
.discret { color: var(--encre-douce); font-size: var(--t-petit); }

/* ───────── Onglets de classeur (les espaces) ───────── */

.onglets { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0 calc(-1 * 0.5rem); padding: 0; list-style: none; border-bottom: 2px solid var(--encre); }
.onglets a, .onglets button {
  display: block; padding: 0.4rem 0.95rem 0.3rem; margin-bottom: -2px;
  font: inherit; font-family: var(--titre); font-size: var(--t-moyen); color: var(--encre-douce); text-decoration: none;
  background: var(--papier); border: 1px solid var(--trait); border-bottom: 2px solid var(--encre); border-radius: 0.6rem 0.6rem 0 0; cursor: pointer;
}
.onglets a:hover, .onglets button:hover { color: var(--encre); background: var(--feuille); }
.onglets a[aria-current="page"] { color: var(--encre); background: var(--feuille); border-color: var(--encre); border-bottom-color: var(--feuille); }
.onglets .genre { font-family: var(--texte); font-size: var(--t-petit); color: var(--encre-douce); margin-left: 0.4rem; }

.sections { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: var(--ligne) 0 0; padding: 0; list-style: none; }
.sections a { text-decoration: none; padding-bottom: 0.15rem; color: var(--encre-douce); }
.sections a:hover { color: var(--encre); }
.sections a[aria-current="page"] { color: var(--encre); font-weight: 700; border-bottom: 3px solid var(--registre); }

/* ───────── Lignes réglées ───────── */

.registre { list-style: none; margin: var(--ligne) 0 0; padding: 0; border-top: 1px solid var(--trait); }
.registre > li { border-bottom: 1px solid var(--trait); padding: calc(var(--ligne) / 2.6) 0; }
.registre .rang { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 1rem; }
.registre .nom { font-weight: 700; flex: 1 1 11rem; overflow-wrap: anywhere; }
.registre .detail { flex: 2 1 14rem; color: var(--encre-douce); overflow-wrap: anywhere; }
.registre .gestes { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; margin-left: auto; }
.registre time, .chiffres { font-variant-numeric: tabular-nums; }
.vide { border: 1px dashed var(--trait); padding: var(--ligne) 1.25rem; margin-top: var(--ligne); color: var(--encre-douce); }

.marque-etat { display: inline-block; font-size: var(--t-petit); padding: 0 0.45rem; border: 1px solid var(--trait); border-radius: 1rem; color: var(--encre-douce); white-space: nowrap; }
.marque-etat.forte { border-color: var(--registre); color: var(--registre-fonce); background: var(--vert-pale); }

/* ───────── Formulaires ───────── */

form, .panneau { margin-top: var(--ligne); }
.champ { margin: 0 0 var(--ligne); max-width: 30rem; }
.champ label, fieldset legend { display: block; font-weight: 700; margin-bottom: 0.2rem; }
.champ .aide { display: block; color: var(--encre-douce); font-size: var(--t-petit); margin-bottom: 0.3rem; }
.champ input, .champ select, .champ textarea {
  width: 100%; font: inherit; color: var(--encre); background: #fff;
  border: 1px solid var(--encre-douce); border-radius: 3px; padding: 0.5rem 0.6rem;
}
.champ textarea { min-height: calc(var(--ligne) * 3); resize: vertical; }
.champ input[aria-invalid="true"], .champ select[aria-invalid="true"], .champ textarea[aria-invalid="true"] { border-color: var(--rouge); border-width: 2px; }
.champ .faute { display: block; color: var(--rouge); font-weight: 700; margin-top: 0.3rem; }
.champ.code input { font-variant-numeric: tabular-nums; letter-spacing: 0.25em; font-size: var(--t-moyen); max-width: 12rem; }

fieldset { border: 0; border-top: 1px solid var(--trait); margin: var(--ligne) 0 0; padding: 0.6rem 0 0; min-width: 0; }
.coche { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0.35rem 0; max-width: 40rem; }
.coche input { width: 1.2rem; height: 1.2rem; margin: 0.25rem 0 0; flex: none; accent-color: var(--registre); }
.trois-etats { display: flex; flex-wrap: wrap; gap: 0.2rem 1.1rem; }
.acces { display: grid; grid-template-columns: minmax(12rem, 1fr) auto; gap: 0.15rem 1rem; align-items: baseline; border-bottom: 1px solid var(--trait-leger); padding: 0.3rem 0; }
@media (max-width: 40rem) { .acces { grid-template-columns: 1fr; } }

.actions { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; margin-top: var(--ligne); }

button, .bouton {
  font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-block;
  color: var(--feuille); background: var(--registre); border: 1px solid var(--registre-fonce); border-radius: 3px; padding: 0.5rem 1rem;
}
button:hover, .bouton:hover { background: var(--registre-fonce); color: var(--feuille); }
button.secondaire { color: var(--registre-fonce); background: transparent; border-color: var(--registre); }
button.secondaire:hover { background: var(--vert-pale); }
button.danger { background: var(--rouge); border-color: #7d1c14; }
button.danger:hover { background: #7d1c14; }
button.lien { color: var(--registre); background: none; border: 0; padding: 0.2rem 0; font-weight: 400; text-decoration: underline; text-underline-offset: 0.18em; }
button.lien:hover { color: var(--registre-fonce); background: none; }
button.lien.danger { color: var(--rouge); }
button[disabled] { opacity: 0.55; cursor: progress; }

/* ───────── Messages ───────── */

.alerte { border-left: 4px solid var(--rouge); background: var(--rouge-pale); padding: 0.6rem 0.9rem; margin: var(--ligne) 0; max-width: 40rem; }
.alerte.bonne { border-left-color: var(--registre); background: var(--vert-pale); }
.alerte p { margin: 0; }

.panneau { border: 1px solid var(--trait); border-left: 4px solid var(--registre); padding: 0.25rem 1.1rem 1.1rem; background: #fff; max-width: 44rem; }
.panneau.danger { border-left-color: var(--rouge); }
.panneau > h3:first-child { margin-top: 0.8rem; }

.annonces { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ───────── Secrets affichés une seule fois ───────── */

.qr { display: block; width: 13rem; max-width: 100%; height: auto; background: #fff; padding: 0.6rem; border: 1px solid var(--trait); }
.cle { font-variant-numeric: tabular-nums; font-size: var(--t-moyen); letter-spacing: 0.08em; overflow-wrap: anywhere; user-select: all; }
.codes { list-style: none; padding: 0; margin: var(--ligne) 0 0; columns: 2 9rem; max-width: 26rem; border-top: 1px solid var(--trait); }
.codes li { font-variant-numeric: tabular-nums; letter-spacing: 0.06em; padding: 0.25rem 0; border-bottom: 1px solid var(--trait); break-inside: avoid; user-select: all; }

@media (prefers-reduced-motion: no-preference) {
  .panneau { animation: ouvrir 140ms ease-out; }
  @keyframes ouvrir { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}

@media print {
  /* La clé de validation ne s'imprime jamais : sur papier, elle donnerait le second facteur pour toujours. */
  .qr, .cle, .ne-pas-imprimer { display: none !important; }
  .entete nav, .onglets, .sections, .actions, button { display: none; }
  body, .feuille { background: #fff; border: 0; }
}