/* Base : polices, couleurs, reset, boutons et utilitaires partagés par toutes les pages.
   Texte en sans-serif, nom et étiquettes en pixel (Silkscreen), et chasse fixe (JetBrains Mono)
   pour tout ce qui ressemble à un terminal. Formes plates : angles droits, traits d'un pixel. */
@font-face{font-family:Silkscreen;src:url(/assets/Silkscreen-Regular.ttf);font-weight:400;font-display:swap}
@font-face{font-family:Silkscreen;src:url(/assets/Silkscreen-Bold.ttf);font-weight:700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/assets/JetBrainsMono-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/assets/JetBrainsMono-Bold.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --bg:#070a14;--bg-2:#0a0e1a;--panel:#0d1220;--panel-2:#131b30;
  --line:rgba(255,255,255,.09);--line-2:rgba(255,255,255,.17);
  --text:#eef3ff;--muted:#a3b0cb;--dim:#6f7c99;
  --accent:#9cc0ff;--accent-2:#cfe0ff;--accent-strong:#6f9cff;
  --green:#7aa8ff;--green-d:#3d63c4;
  --r:0;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --pix:Silkscreen,ui-monospace,monospace;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px;scrollbar-width:thin;scrollbar-color:#3c5486 var(--bg)}
body{font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2{letter-spacing:-.025em}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

::selection{background:rgba(156,192,255,.32);color:#fff}

/* Scrollbar plate */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#2b3c61;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--accent-strong)}
::-webkit-scrollbar-corner{background:var(--bg)}

.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.ic{width:18px;height:18px;flex:none}

/* Petite étiquette pixel au-dessus des titres */
.label{display:inline-block;font-family:var(--pix);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.small{font-family:var(--pix);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.muted{color:var(--muted)}
.accent{color:var(--accent)}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;padding:5px 11px;background:var(--panel);border:1px solid var(--line)}
.sw{width:9px;height:9px;background:var(--c)}

/* Boutons plats : un aplat pour l'action principale, un simple cadre pour le reste */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:600;font-size:14.5px;line-height:1.2;
  padding:12px 18px;border:1px solid var(--line-2);cursor:pointer;white-space:nowrap;
  background:rgba(7,10,20,.6);color:var(--text);transition:background .12s,color .12s,border-color .12s;
}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.play{background:var(--accent);border-color:var(--accent);color:#0a1633}
.btn.play:hover{background:var(--accent-2);border-color:var(--accent-2);color:#0a1633}
.btn:active{transform:translateY(1px)}
.btn.sm{padding:7px 12px;font-size:13.5px}
.btn.sm .ic{width:16px;height:16px}

/* Apparition au défilement (activée par site.js) */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}

/* Paysage pixel art */
.scene .twinkle{animation:twinkle 4s ease-in-out infinite alternate}
.scene .fog{animation:drift 28s ease-in-out infinite alternate}
.scene .fog1{animation-duration:36s;animation-delay:-8s}
.scene .fog2{animation-duration:22s;animation-delay:-4s}
@keyframes twinkle{from{opacity:.25}to{opacity:1}}
@keyframes drift{from{transform:translateX(-90px)}to{transform:translateX(90px)}}

/* Lune qui flotte et halo qui respire */
.scene .moon{animation:moon-float 9s ease-in-out infinite}
.scene .moon-glow{transform-box:fill-box;transform-origin:center;animation:moon-glow 6s ease-in-out infinite alternate}
@keyframes moon-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes moon-glow{from{opacity:.6;transform:scale(.9)}to{opacity:1;transform:scale(1.1)}}

/* Nappes de brume pixel qui traversent les paysages et les bandes de brume */
.puff{animation:puff 100s linear infinite}
@keyframes puff{from{transform:translateX(-2000px)}to{transform:translateX(2000px)}}
.fog-divider{position:relative;z-index:1;height:clamp(100px,13vw,170px);margin:clamp(-70px,-5vw,-30px) 0;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.fogstrip{width:100%;height:100%}

main,.foot{position:relative;z-index:1}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none}
}