:root {
  color-scheme: dark;
  --encre: #15100c; --cuir: #221a12; --filet: #4b3a25; --parchemin: #f0e4cd; --doux: #bcab90; --or: #dcae55;
  --rouge: #ec9383; --vert: #8fcf8e; --bleu: #98c3ee;
  --titre: Georgia, "Noto Serif", "Times New Roman", serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(ellipse at top, #2a1f15, var(--encre) 60%); color: var(--parchemin);
       font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
[hidden] { display: none !important; }
h1, h2 { font-family: var(--titre); color: var(--or); font-weight: 600; margin: 0 0 10px; }
h1 { font-size: 1.7rem; } h2 { font-size: 1.15rem; margin-top: 22px; }
p { margin: 0 0 10px; }
button, input { font: inherit; }
button { min-height: 44px; padding: 0 18px; border: 1px solid var(--or); border-radius: 8px; background: var(--or); color: var(--encre);
         font-weight: 600; cursor: pointer; }
button:disabled { opacity: .55; cursor: default; }
button.discret { background: transparent; color: var(--or); font-weight: 400; margin-top: 18px; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }
.haut { display: flex; align-items: center; justify-content: space-between; max-width: 640px; margin: 0 auto;
        padding: calc(12px + env(safe-area-inset-top)) 16px 12px; }
.marque { font-family: var(--titre); color: var(--or); font-size: 1.15rem; }
.langues { display: flex; }
.langues button { min-height: 32px; padding: 0 10px; background: transparent; color: var(--or); font-weight: 400; border-radius: 0; }
.langues button:first-child { border-radius: 6px 0 0 6px; } .langues button:last-child { border-radius: 0 6px 6px 0; border-left: 0; }
.langues button[aria-pressed="true"] { background: var(--or); color: var(--encre); }
.page { max-width: 640px; margin: 0 auto; padding: 24px 16px calc(32px + env(safe-area-inset-bottom)); }
.intro { color: var(--doux); }
.carte { display: grid; gap: 10px; margin-top: 18px; padding: 18px; border: 1px solid var(--filet); border-radius: 12px; background: var(--cuir); }
.carte label { color: var(--doux); font-size: .92rem; }
.carte input { min-height: 44px; padding: 0 12px; border: 1px solid var(--filet); border-radius: 8px; background: var(--encre); color: var(--parchemin); }
.message { min-height: 1.5em; margin: 0; font-size: .95rem; }
.message.ok { color: var(--vert); } .message.erreur { color: var(--rouge); }
.persos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.persos li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 12px 14px; border: 1px solid var(--filet);
             border-radius: 10px; background: var(--cuir); }
.persos strong { font-family: var(--titre); color: var(--or); font-size: 1.05rem; }
.persos .niveau { color: var(--or); }
.persos .details { grid-column: 1 / -1; color: var(--doux); font-size: .9rem; }