:root { --encre:#171A21; --vert:#6f9a00; --vert-vif:#9bc700; --fond:#f8f9f4; --bord:#dfe3d6; --gris:#5d6470; --rouge:#b3261e; --ambre:#9a6700; }
  * { box-sizing: border-box; }
  body { margin:0; background:var(--fond); color:var(--encre); font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
  main { max-width: 760px; margin: 0 auto; padding: 28px 16px 80px; }
  h1 { text-align:center; margin:0; font-size:30px; letter-spacing:-.5px; }
  h1 span { color:var(--vert); }
  .sous { text-align:center; color:var(--gris); margin:4px 0 24px; }
  .regle { display:flex; justify-content:space-between; background:#e4e6dc; border-radius:999px; padding:8px 14px; margin-bottom:18px; position:relative; }
  .regle button { all:unset; cursor:pointer; width:28px; height:28px; border-radius:50%; text-align:center; line-height:28px; font-size:13px; color:var(--gris); }
  .regle button.fait { color:var(--vert); font-weight:700; }
  .regle button.on { background:var(--vert-vif); color:var(--encre); font-weight:700; }
  .carte { background:#fff; border:1px solid var(--bord); border-radius:18px; padding:22px; box-shadow:0 4px 18px rgba(0,0,0,.05); }
  .tete { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--bord); padding-bottom:12px; margin-bottom:16px; }
  .tete h2 { margin:0; font-size:18px; }
  .pastille { font-size:11px; font-weight:700; letter-spacing:.5px; padding:3px 10px; border-radius:999px; background:#e8f2c8; color:#4d6b00; }
  .pastille.main { background:#fdf0cf; color:var(--ambre); }
  label { display:block; font-weight:600; margin:14px 0 4px; }
  label small { font-weight:400; color:var(--gris); }
  input, select { width:100%; padding:11px 12px; border:1px solid var(--bord); border-radius:10px; font:inherit; background:#fff; }
  input:focus, select:focus { outline:2px solid var(--vert-vif); border-color:transparent; }
  .duo { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  @media (max-width:560px){ .duo{grid-template-columns:1fr;} }
  button.act { background:var(--vert-vif); color:var(--encre); border:0; border-radius:10px; padding:12px 18px; font:inherit; font-weight:700; cursor:pointer; margin-top:16px; }
  button.act:disabled { opacity:.5; cursor:wait; }
  button.sec { background:#fff; border:1px solid var(--bord); border-radius:10px; padding:9px 14px; font:inherit; cursor:pointer; margin-top:8px; }
  .rang { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
  pre.log { background:#1c2128; color:#e6edf3; border-radius:12px; padding:14px; margin:16px 0 0; max-height:340px; overflow:auto; font:12.5px/1.5 ui-monospace,Menlo,Consolas,monospace; white-space:pre-wrap; word-break:break-word; }
  .note { background:#f3f5ec; border-radius:10px; padding:10px 12px; color:var(--gris); font-size:13.5px; margin:12px 0 0; }
  .alerte { background:#fdf0cf; color:#5c4000; border-radius:10px; padding:10px 12px; font-size:13.5px; margin:12px 0 0; }
  .bandeau-ok { background:#e8f2c8; color:#33480a; border-radius:10px; padding:10px 12px; margin-top:12px; }
  .bandeau-ko { background:#fbe2df; color:#7a1912; border-radius:10px; padding:10px 12px; margin-top:12px; }
  .nav { display:flex; justify-content:space-between; margin-top:16px; }
  a { color:var(--vert); }