@font-face { font-family: "Inter"; src: url("/static/fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("/static/fonts/corm-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("/static/fonts/corm-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("/static/fonts/corm-500i.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }

:root {
  --bg: #070B12;
  --panel: rgba(17, 25, 39, .72);
  --panel-solid: #0F1623;
  --panel-hi: #151F31;
  --line: rgba(255, 255, 255, .07);
  --line-gold: rgba(232, 200, 135, .24);
  --gold: #E8C887;
  --gold-lo: #B8914A;
  --gold-grad: linear-gradient(135deg, #F1D9A0 0%, #D9B26B 55%, #B8914A 100%);
  --ivory: #F4EFE4;
  --muted: #8D9BB0;
  --up: #2FD38C;
  --down: #FF6B5E;
  --blue: #4C8DFF;
  --teal: #2BC4C4;
  --violet: #8B6CFF;
  --amber: #F2A93B;
  --rose: #E5679B;
  --radius: 16px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-title: "Cormorant", Georgia, serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ivory);
  font-family: var(--font);
  font-feature-settings: "tnum", "cv11", "ss03";
  line-height: 1.5;
  min-height: 100vh; min-height: 100dvh;
  overflow-x: hidden;
}
/* halos vivants en arrière-plan */
body::before, body::after {
  content: ""; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(90px);
}
body::before {
  width: 62vw; height: 62vw; max-width: 900px; max-height: 900px; left: 50%; top: -34vw; margin-left: -31vw;
  background: radial-gradient(circle, rgba(232,200,135,.20), transparent 68%);
  animation: breathe 14s ease-in-out infinite;
}
body::after {
  width: 50vw; height: 50vw; max-width: 760px; max-height: 760px; right: -16vw; bottom: -18vw;
  background: radial-gradient(circle, rgba(76,141,255,.14), transparent 68%);
  animation: breathe 18s ease-in-out infinite reverse;
}
@keyframes breathe { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }

a { color: var(--gold); text-decoration: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.8rem; border-radius: 12px; cursor: pointer;
  font: 600 .95rem var(--font); letter-spacing: .01em;
  border: 1px solid var(--line-gold); background: rgba(232,200,135,.06); color: var(--gold);
  transition: background .25s, color .25s, transform .2s, box-shadow .25s, border-color .25s;
}
.btn:hover { background: rgba(232,200,135,.14); border-color: var(--gold); }
.btn:active { transform: scale(.98); }
.btn-solid { background: var(--gold-grad); color: #1A1306; border-color: transparent; box-shadow: 0 6px 24px rgba(217,178,107,.28); }
.btn-solid:hover { background: var(--gold-grad); filter: brightness(1.08); box-shadow: 0 8px 32px rgba(217,178,107,.45); }

.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.field label { font-size: .78rem; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; font-weight: 500; }
.field input {
  background: rgba(7,11,18,.7); border: 1px solid var(--line); border-radius: 10px;
  color: var(--ivory); padding: .8rem 1rem; font: 1rem var(--font);
  transition: border-color .25s, box-shadow .25s;
}
.field input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232,200,135,.14); }
.msg { min-height: 1.4rem; font-size: .9rem; margin-bottom: .6rem; }
.msg.err { color: var(--down); }
.msg.ok { color: var(--up); }

canvas#sand { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  /* le bandeau de cours doit défiler même si Windows réduit les animations (c'est son rôle) ; il se met en pause au survol */
  .track { animation: scroll 55s linear infinite !important; }
  .ticker:hover .track { animation-play-state: paused !important; }
  .dot { animation: pulse 2s infinite !important; }
}