/* Mise en page commune à toutes les pages. Aucun style en ligne ni police externe : la CSP les refuse.
   Registre comptable : papier gris-vert, encre bleu nuit, filet de marge vert, vert de validation.
   (essai navigateur du 27.10.2026 : pages sans style ; reprise du 31.10.2026 : connexion et double authentification) */
:root {
  --encre: #1b2a4a;
  --encre-douce: #56637a;
  --papier: #f4f6f5;
  --feuille: #ffffff;
  --filet: #c9d6cf;
  --filet-fin: #e3e9e6;
  --marge: #8fb5a1;
  --vert: #2f6b4f;
  --vert-fonce: #24543e;
  --rouge: #b42318;
  --rouge-fond: #fdf0ee;
  --lien: #24548f;
  --titre: Charter, "Bitstream Charter", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --texte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body { font: 14px/1.45 var(--texte); color: var(--encre); background: var(--papier); margin: 0; }
h1, h2 { font-family: var(--titre); font-weight: 600; letter-spacing: 0.005em; }
h1 { font-size: 22px; line-height: 1.2; margin: 6px 0 12px; }
h2 { font-size: 16px; margin: 20px 0 8px; }
a { color: var(--lien); }
small, .note { color: var(--encre-douce); }
.ok { color: var(--vert); }
.bad { color: var(--rouge); }
code { font: 13px/1.3 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; overflow-wrap: anywhere; }

/* en-tête des pages de travail */
header { display: flex; align-items: center; gap: 20px; padding: 10px 20px; background: var(--feuille); border-bottom: 1px solid var(--filet); }
header form { margin: 0 0 0 auto; }
header nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
header nav a { color: var(--encre); text-decoration: none; padding: 2px 0; border-bottom: 2px solid transparent; }
header nav a:hover { border-bottom-color: var(--filet); }
.marque { margin: 0; font-family: var(--titre); font-size: 16px; font-weight: 600; white-space: nowrap; }
.marque a { color: var(--encre); text-decoration: none; }
.marque span { font-family: var(--texte); font-size: 12px; font-weight: 400; color: var(--encre-douce); margin-left: 4px; }
main { padding: 14px 20px; }

/* tableaux */
table { border-collapse: collapse; background: var(--feuille); }
td, th { padding: 5px 8px; border-bottom: 1px solid var(--filet-fin); text-align: left; vertical-align: middle; }
th { font-size: 12px; color: var(--encre-douce); font-weight: 600; border-bottom-color: var(--filet); }

/* commandes et champs */
button, .btn { background: var(--vert); color: #fff; border: 1px solid var(--vert); border-radius: 4px; padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer; text-decoration: none; }
button:hover, .btn:hover { background: var(--vert-fonce); border-color: var(--vert-fonce); }
button.second { background: var(--feuille); color: var(--encre); border-color: var(--filet); }
button.second:hover { background: var(--papier); }
button:disabled, button:disabled:hover { background: var(--filet-fin); border-color: var(--filet-fin); color: #8a95a5; cursor: default; }
input[type="text"], input[type="password"], input:not([type]), select { font: inherit; color: var(--encre); background: var(--feuille); padding: 5px 7px; border: 1px solid var(--filet); border-radius: 4px; }
textarea { font: 13px/1.3 ui-monospace, monospace; color: var(--encre); padding: 5px 7px; border: 1px solid var(--filet); border-radius: 4px; max-width: 100%; }
:focus-visible { outline: 2px solid var(--lien); outline-offset: 2px; }
main > form, main form p { margin: 8px 0; }
main > form input[type="text"], main > form input[type="password"] { margin: 2px 0 8px; min-width: 18em; }
/* numéros de compte : champ court, les deux comptes Nexi tiennent sur une ligne (essai navigateur du 27.10.2026) */
main form input.court[type="text"] { min-width: 0; width: 6em; }
.alerte { color: var(--rouge); background: var(--rouge-fond); border-left: 3px solid var(--rouge); padding: 8px 10px; margin: 10px 0; }

/* page seule (connexion, double authentification) : une feuille de registre, avec son double filet de marge */
body.feuille main { box-sizing: border-box; max-width: 27rem; margin: 8vh auto 40px; padding: 28px 32px 24px 44px; background: var(--feuille); border: 1px solid var(--filet); border-radius: 2px; position: relative; }
body.feuille main::before { content: ""; position: absolute; top: 0; bottom: 0; left: 22px; width: 4px; border-left: 1px solid var(--marge); border-right: 1px solid var(--marge); }
body.feuille .marque { margin-bottom: 18px; }
body.feuille h1 { font-size: 26px; margin-top: 0; }
body.feuille label { font-weight: 600; font-size: 13px; }
body.feuille input[type="text"], body.feuille input[type="password"], body.feuille input:not([type]) { box-sizing: border-box; width: 100%; min-width: 0; padding: 8px 10px; font-size: 15px; margin-top: 4px; }
body.feuille button[type="submit"] { width: 100%; padding: 9px 12px; font-size: 15px; margin-top: 4px; }
body.feuille .note { font-size: 13px; margin-bottom: 0; }
input.code { font: 600 22px/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; text-align: center; }
body.feuille input.code { font-size: 22px; padding: 8px 10px; }
ol.etapes { margin: 0; padding-left: 1.4em; }
ol.etapes > li { margin-bottom: 18px; }
ol.etapes > li::marker { font-family: var(--titre); font-weight: 600; }
ol.etapes h2 { margin: 0 0 6px; }
svg.qr { display: block; width: 200px; height: 200px; margin: 12px 0; border: 1px solid var(--filet-fin); }
details { margin: 8px 0; }
summary { cursor: pointer; color: var(--lien); }
ul.secours { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, max-content); gap: 4px 24px; }

@media (max-width: 560px) {
  header { flex-wrap: wrap; gap: 8px 16px; padding: 10px 16px; }
  main { padding: 12px 16px; }
  body.feuille main { margin: 16px auto; padding: 22px 18px 18px 34px; width: calc(100% - 32px); }
  body.feuille main::before { left: 14px; }
  main > form input[type="text"], main > form input[type="password"] { min-width: 0; width: 100%; box-sizing: border-box; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }