@font-face { font-family: 'Jost'; src: url('/static/fonts/Jost.ttf') format('truetype'); font-weight: 100 900; font-display: block; }
@font-face { font-family: 'Nunito Sans'; src: url('/static/fonts/NunitoSans.ttf') format('truetype'); font-weight: 200 1000; font-display: block; }

:root {
  --abyss: #041a2c;
  --deep: #0A2F4D;
  --sea: #0E4A68;
  --lagoon: #13708A;
  --panel: rgba(6, 34, 58, 0.82);
  --panel-solid: #08283F;
  --panel-2: rgba(14, 74, 104, 0.65);
  --sand: #E2C896;
  --sand-2: #D9B77A;
  --foam: #F2F8F7;
  --mint: #8ED1C6;
  --algae: #5FB59A;
  --muted: #9FB4C2;
  --line: #4F8FA6;
  --ok: #4FD1A1;
  --ko: #F07B6E;
  --title: 'Jost', 'Segoe UI', Arial, sans-serif;
  --body: 'Nunito Sans', 'Segoe UI', Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--body); color: var(--foam); background: var(--abyss); }
button { font-family: inherit; }

/* Mosaïque sous-marine (fond) */
.mosaic { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, #0A2F4D 0%, #0E4A68 55%, #13708A 100%); }
.mosaic .tiles { position: absolute; inset: 0; display: grid; gap: 6px; padding: 3px; }
.mosaic .tile { border-radius: 8px; }
.mosaic .tile.glint { animation: glint 9s ease-in-out infinite; }
@keyframes glint { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.9); } }
.mosaic .light { position: absolute; inset: -20% -10% auto -10%; height: 60%; background: radial-gradient(ellipse at 50% 0%, rgba(142, 209, 198, .16), transparent 65%); animation: sway 14s ease-in-out infinite alternate; pointer-events: none; }
@keyframes sway { from { transform: translateX(-4%); } to { transform: translateX(4%); } }

.version-tag { font-size: 13px; color: var(--muted); letter-spacing: .5px; }