/* La porte du Poste de Garde : une nuit dans la clairière, une carte éclairée comme une lanterne. */
@font-face { font-family: 'Exo 2'; font-weight: 400; font-display: swap; src: url('/lib/polices/exo-2-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Exo 2'; font-weight: 700; font-display: swap; src: url('/lib/polices/exo-2-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Orbitron'; font-weight: 800; font-display: swap; src: url('/lib/polices/orbitron-latin-800-normal.woff2') format('woff2'); }

:root {
  --accent: #ffbf7a;
  --accent-fort: #ff9a3d;
  --texte: #f6ead9;
  --pale: #c9b49c;
  --ligne: rgba(255, 191, 122, 0.24);
  --carte: rgba(23, 17, 12, 0.86);
  --ui: 'Exo 2', 'Segoe UI', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  display: grid; place-items: center; min-height: 100vh; padding: 32px 16px;
  background: #05060a; color: var(--texte); font: 15px/1.5 var(--ui);
}

/* le décor */
.nuit { position: fixed; inset: 0; overflow: hidden; background: radial-gradient(120% 80% at 50% 110%, #24361a 0%, #0f1a0e 38%, #070a10 70%, #04050a 100%); }
.lune { position: absolute; top: 9vh; right: 14vw; width: 74px; height: 74px; border-radius: 50%; background: radial-gradient(circle at 38% 38%, #fffbe9, #e9dfc2 60%, #c9bd9b); box-shadow: 0 0 60px 18px rgba(255, 244, 214, 0.18); }
.arbre { position: absolute; left: 50%; bottom: -6vh; width: min(900px, 140vw); height: 70vh; transform: translateX(-50%);
  background:
    radial-gradient(48% 42% at 50% 38%, #0b130b 98%, transparent 100%),
    radial-gradient(30% 30% at 22% 52%, #0a1209 98%, transparent 100%),
    radial-gradient(30% 30% at 78% 50%, #0a1209 98%, transparent 100%),
    linear-gradient(#0a0f08, #0a0f08) 50% 100% / 9% 55% no-repeat;
  opacity: 0.95; }
.lucioles i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #ffe7a0; box-shadow: 0 0 10px 3px rgba(255, 210, 110, 0.6); animation: flotte var(--d, 9s) ease-in-out infinite alternate, clignote 2.6s ease-in-out infinite alternate; }
@keyframes flotte { to { transform: translate(var(--x, 30px), var(--y, -40px)); } }
@keyframes clignote { from { opacity: 0.15; } to { opacity: 1; } }

/* la carte */
.carte { position: relative; width: min(540px, 100%); padding: 30px 28px 24px; border: 1px solid var(--ligne); border-radius: 20px; background: var(--carte); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 191, 122, 0.05) inset; backdrop-filter: blur(6px); }
h1 { margin: 0; color: #fff1e0; font: 800 clamp(22px, 6vw, 30px)/1.15 'Orbitron', var(--ui); letter-spacing: 0.1em; text-align: center; text-shadow: 0 0 6px var(--accent), 0 0 22px var(--accent-fort); }
.devise { margin: 6px 0 22px; color: var(--pale); text-align: center; }
h2 { margin: 0 0 8px; color: var(--accent); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; }
label { display: block; margin: 14px 0 6px; color: var(--pale); font-size: 13px; font-weight: 700; }
input[type=email], input:not([type]) { width: 100%; padding: 11px 13px; border: 1px solid var(--ligne); border-radius: 12px; background: rgba(255, 255, 255, 0.05); color: var(--texte); font: inherit; }
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn { display: block; width: 100%; margin-top: 16px; padding: 12px 16px; border: 0; border-radius: 12px; background: linear-gradient(#ffc98d, var(--accent)); color: #1a0f06; font: 700 15px var(--ui); text-align: center; text-decoration: none; cursor: pointer; box-shadow: 0 6px 24px rgba(255, 154, 61, 0.25); }
.btn:hover { filter: brightness(1.06); }
.btn:disabled { opacity: 0.6; cursor: wait; }
.btn.secondaire { background: rgba(255, 191, 122, 0.12); color: var(--texte); border: 1px solid var(--ligne); box-shadow: none; }
.aide { margin: 14px 0 0; color: var(--pale); font-size: 13px; }
.discret { opacity: 0.75; }
.accueil { margin: 0 0 14px; font-size: 16px; text-align: center; }
.message { margin-top: 16px; padding: 12px 14px; border: 1px solid rgba(160, 220, 140, 0.35); border-radius: 12px; background: rgba(90, 140, 70, 0.14); font-size: 14px; }
.erreur { margin: 16px 0 0; padding: 10px 14px; border: 1px solid rgba(255, 120, 90, 0.5); border-radius: 12px; background: rgba(120, 30, 10, 0.3); color: #ffd9cc; font-size: 14px; }
.charte { max-height: 38vh; overflow: auto; padding: 12px 14px; border: 1px solid var(--ligne); border-radius: 12px; background: rgba(0, 0, 0, 0.22); font-size: 13.5px; }
.charte ol { margin: 0; padding-left: 20px; }
.charte li { margin: 0 0 6px; }
.couleurs { display: flex; flex-wrap: wrap; gap: 10px; }
.couleurs button { width: 34px; height: 34px; border: 2px solid transparent; border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4) inset; }
.couleurs button[aria-checked=true] { border-color: #fff1e0; box-shadow: 0 0 14px 2px rgba(255, 241, 224, 0.45); }
.case { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; color: var(--texte); font-weight: 400; cursor: pointer; }
.case input { margin-top: 4px; accent-color: var(--accent); }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .lucioles i { animation: none; opacity: 0.6; } }