:root { --fond: #f6f7f9; --carte: #fff; --texte: #1d2330; --doux: #667085; --bord: #e2e5ea;
        --accent: #2457d6; --accent-texte: #fff; --ok: #157347; --ko: #b42318; --attente: #8a6d00; }
@media (prefers-color-scheme: dark) {
  :root { --fond: #12151b; --carte: #1b2029; --texte: #e8ebf0; --doux: #9aa3b2; --bord: #2c3340;
          --accent: #6d95ff; --accent-texte: #0b1020; --ok: #4cc38a; --ko: #ff7b72; --attente: #e3c25a; }
}
* { box-sizing: border-box; }
/* Sans ca, .actions { display: flex } l'emporte sur l'attribut hidden. */
[hidden] { display: none !important; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 640px; margin: 0 auto; padding: 24px 16px 48px; }
h1 { font-size: 1.4rem; margin: 0 0 8px; }
.intro, .muted { color: var(--doux); }
.muted { font-size: .85rem; margin: 4px 0 0; }
.carte { display: block; background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; padding: 14px; margin: 12px 0; cursor: pointer; }
.carte p { margin: 6px 0 0; overflow-wrap: anywhere; }
.tete { display: flex; align-items: center; gap: 10px; }
.tete input { width: 22px; height: 22px; }
.statut { margin-left: auto; font-size: .8rem; font-weight: 600; color: var(--attente); }
.approuvee .statut { color: var(--ok); } .refusee .statut, .expiree .statut { color: var(--ko); }
.approuvee, .refusee, .expiree { opacity: .75; cursor: default; }
code { display: block; margin-top: 8px; padding: 8px; border-radius: 8px; background: var(--fond); overflow-wrap: anywhere; font-size: .9rem; }
.actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
button { font: inherit; font-weight: 600; padding: 14px; border-radius: 10px; border: 1px solid var(--bord); cursor: pointer; }
.primaire { background: var(--accent); color: var(--accent-texte); border-color: var(--accent); }
.secondaire { background: var(--carte); color: var(--texte); }
button:disabled { opacity: .5; cursor: default; }
#message { margin-top: 16px; font-weight: 500; }
#message.ok { color: var(--ok); } #message.erreur { color: var(--ko); }