:root {
  --lagoon: #0E3B43; --lagoon-deep: #082A30; --lagoon-hi: #15505A; --lagoon-line: #2A6872; --abyss: #061F24;
  --anemone: #FF7A59; --clown: #FF9F1C; --coral: #F7F3EA; --ink-mute: #A9C7C8; --broken: #FF5C6C; --live: #7FE0C8;
  --glass: rgba(8, 42, 48, .62); --edge: rgba(169, 199, 200, .14); --edge-hi: rgba(247, 243, 234, .22);
  --display: "Bricolage Grotesque", system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, monospace;
  --gutter: clamp(16px, 4vw, 56px); --max: 1240px; --r-sm: 8px; --r-lg: 20px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; color: var(--coral); font: 400 16px/1.55 var(--display); overflow-x: hidden; min-height: 100vh;
  background: radial-gradient(1100px 700px at 50% 22%, #134A53 0%, var(--lagoon) 40%, var(--abyss) 100%) fixed; }
/* lumière d'eau : deux nappes de caustiques dessinées en CSS, une seule animation lente, coupée si mouvement réduit */
body::before { content: ""; position: fixed; inset: -20%; pointer-events: none; z-index: -1; opacity: .5;
  background: radial-gradient(40% 30% at 22% 18%, rgba(127, 224, 200, .07), transparent 70%), radial-gradient(35% 28% at 80% 30%, rgba(255, 159, 28, .05), transparent 70%),
    radial-gradient(30% 22% at 60% 80%, rgba(255, 122, 89, .05), transparent 70%);
 }
/* grain fin (bruit SVG généré, pas d'image) */
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
a { color: inherit; }
img { max-width: 100%; display: block; }
::selection { background: var(--clown); color: var(--lagoon-deep); }
html { scrollbar-color: var(--lagoon-line) var(--abyss); accent-color: var(--clown); caret-color: var(--clown); }
a { text-underline-offset: 3px; }
input[type=range] { width: 100%; accent-color: var(--clown); }
:focus-visible { outline: 2px solid var(--clown); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--mono); font-feature-settings: "tnum"; }
.mute { color: var(--ink-mute); }

/* boutons */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 8px; border: 0;
  font: 650 16.5px/1 var(--display); text-decoration: none; cursor: pointer; transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
.btn-launch { background: var(--clown); color: var(--lagoon-deep); font-weight: 700; }
.btn-launch:hover { background: #FFB547; }
.btn:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--coral); box-shadow: inset 0 0 0 1px var(--edge-hi); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--coral); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

/* pastilles d'état */
.status { display: inline-flex; align-items: center; gap: 7px; font: 500 12.5px/1 var(--mono); padding: 7px 10px; border-radius: 6px; background: rgba(6, 31, 36, .7);
  box-shadow: inset 0 0 0 1px var(--edge); white-space: nowrap; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.s-armed { color: var(--clown); } .s-burned { color: var(--live); } .s-cancelled { color: var(--broken); } .s-demo { color: var(--ink-mute); }

/* panneau de verre : seule « carte » du site, bord éclairé en haut */
.panel { background: rgba(6, 31, 36, .5); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--edge); }

/* barre de navigation collante */
.nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.nav::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: rgba(9, 44, 51, .72); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--edge); }
.nav .logo { font: 750 21px/1 var(--display); letter-spacing: -0.02em; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.nav .logo i { width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 34% 50%, var(--anemone) 0 36%, transparent 38%), radial-gradient(circle at 66% 50%, var(--clown) 0 36%, transparent 38%); }
.nav .links { display: flex; align-items: center; gap: 24px; font-size: 15px; }
.nav .links a:not(.btn) { text-decoration: none; color: var(--ink-mute); transition: color .15s; }
.nav .links a:not(.btn):hover, .nav .links a[aria-current] { color: var(--coral); }
.nav .links a.btn-launch { color: var(--lagoon-deep); }
.nav .links a.nx { display: inline-grid; place-items: center; width: 42px; height: 42px; margin: 0 -8px; border-radius: 8px; color: var(--ink); }
.nav .links a.nx:hover { color: var(--coral); } .nav .links a.nx svg { width: 18px; height: 18px; }
.nav .btn { min-height: 42px; padding: 0 20px; font-size: 15.5px; }
.net { font: 500 12px/1 var(--mono); color: var(--live); display: inline-flex; align-items: center; gap: 6px; }
.net::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.net.local { color: var(--ink-mute); }
@media (max-width: 720px) { .nav .links a:not(.btn):not(.nx), .nav .net { display: none; } }

/* pied de page */
.foot { margin-top: 80px; border-top: 1px solid var(--edge); background: rgba(6, 31, 36, .55); }
.foot .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; padding: 44px 0 28px; }
.foot h4 { font: 600 13.5px/1 var(--display); color: var(--ink-mute); margin: 0 0 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 15px; }
.foot ul a { text-decoration: none; color: var(--coral); opacity: .86; } .foot ul a:hover { opacity: 1; color: var(--clown); }
.foot .x { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 15px; color: var(--coral); text-decoration: none; } .foot .x:hover { color: var(--clown); }
.foot .brand p { color: var(--ink-mute); max-width: 32ch; margin: 12px 0 0; font-size: 15px; }
.foot .legal { border-top: 1px solid var(--edge); padding: 18px 0 30px; color: var(--ink-mute); font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
@media (max-width: 760px) { .foot .cols { grid-template-columns: 1fr 1fr; } .foot .brand { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }
[hidden] { display: none !important; }
::placeholder { color: #8FB5B6; opacity: 1; }
h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; }
body { display: flex; flex-direction: column; } body > * { width: 100%; } main { flex: 1 0 auto; }