:root {
  --nuit: #0b1530;
  --nuit-2: #13214a;
  --bleu: #1f45c9;
  --or: #d9b45a;
  --or-clair: #f1dc9c;
  --rouge: #c8202f;
  --rouge-fonce: #9c1622;
  --vert: #1f6b45;
  --neige: #f7f4ec;
  --texte: #eef1fa;
  --texte-doux: #b7c0d9;
  --carte: rgba(255, 255, 255, 0.06);
  --bord: rgba(217, 180, 90, 0.28);
  --rayon: 18px;
  --titre: "Fraunces", Georgia, serif;
  --corps: "Manrope", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--corps);
  color: var(--texte);
  background: radial-gradient(1200px 700px at 50% -10%, #23367a 0%, var(--nuit-2) 40%, var(--nuit) 100%) fixed;
  background-color: var(--nuit);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
#neige { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.page { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; padding: 28px 16px 64px; }
.page.large { max-width: 1040px; }

header.tete { text-align: center; margin-bottom: 22px; }
header.tete img { width: 92px; height: auto; filter: drop-shadow(0 8px 24px rgba(0,0,0,.45)); }
.surtitre { letter-spacing: .22em; text-transform: uppercase; font-size: .72rem; color: var(--or); font-weight: 700; margin: 12px 0 4px; }
h1 { font-family: var(--titre); font-weight: 600; font-size: clamp(2rem, 7vw, 2.9rem); line-height: 1.05; margin: 0; }
h1 em { font-style: italic; color: var(--or-clair); }
h2 { font-family: var(--titre); font-weight: 600; font-size: 1.35rem; margin: 0 0 10px; }
h3 { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--or); margin: 0 0 8px; }
p { margin: 0 0 10px; }
.doux { color: var(--texte-doux); }
.petit { font-size: .88rem; }

.compte { display: inline-flex; gap: 10px; align-items: baseline; margin-top: 14px; padding: 8px 16px; border: 1px solid var(--bord); border-radius: 999px; background: rgba(0,0,0,.18); font-size: .92rem; }
.compte strong { font-family: var(--titre); font-size: 1.3rem; color: var(--or-clair); }

.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 22px; margin-bottom: 16px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.carte.creme { background: var(--neige); color: #1d2440; border-color: transparent; }
.carte.creme h3 { color: var(--rouge); }

label { display: block; font-weight: 600; font-size: .9rem; margin: 12px 0 6px; }
input, select, textarea {
  width: 100%; font: inherit; color: #111a33; background: #fff; border: 2px solid transparent; border-radius: 12px; padding: 12px 14px; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--or); }
textarea { min-height: 96px; resize: vertical; }
.code { letter-spacing: .6em; text-align: center; font-size: 1.5rem; font-weight: 700; }
.ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .ligne { grid-template-columns: 1fr; gap: 0; } }

button, .bouton {
  font: inherit; font-weight: 700; border: 0; border-radius: 999px; cursor: pointer; padding: 13px 22px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
  background: var(--rouge); color: #fff; box-shadow: 0 8px 22px rgba(200, 32, 47, .35); transition: transform .12s, background .2s;
}
button:hover { background: var(--rouge-fonce); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .55; cursor: wait; }
button.plein { width: 100%; margin-top: 18px; }
button.discret { background: transparent; color: var(--texte); border: 1px solid var(--bord); box-shadow: none; }
button.discret:hover { background: rgba(255,255,255,.07); }
button.or { background: var(--or); color: #1d1a10; box-shadow: 0 8px 22px rgba(217,180,90,.3); }
button.or:hover { background: var(--or-clair); }
.lien { background: none; border: 0; box-shadow: none; color: var(--or-clair); padding: 0; text-decoration: underline; font-weight: 600; }
.lien:hover { background: none; }

.alerte { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(200, 32, 47, .18); border: 1px solid rgba(200, 32, 47, .5); font-size: .93rem; }
.alerte.ok { background: rgba(31, 107, 69, .22); border-color: rgba(60, 170, 110, .5); }
.cache { display: none !important; }

.infos { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.infos li { display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: start; font-size: .94rem; }
.infos li span:first-child { font-size: 1.2rem; line-height: 1.3; }

footer { text-align: center; font-size: .8rem; color: var(--texte-doux); margin-top: 26px; }
footer .devise { font-family: var(--titre); font-style: italic; color: var(--or); }

/* Modale */
.voile { position: fixed; inset: 0; z-index: 50; background: rgba(5,10,25,.72); display: grid; place-items: center; padding: 16px; }
.modale { max-width: 440px; width: 100%; background: var(--nuit-2); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 22px; }
.modale .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }