/* ============================================================
   BASE — shared foundation for ALL pages
   Tokens, reset, typography. Link FIRST in the <head>.
   ============================================================ */
:root{
  --bg:        #0E1116;   /* viewport background, almost bluish black */
  --bg-2:      #11151B;
  --surface:   #161A21;   /* cards */
  --surface-2: #1B212A;
  --line:      #252B36;   /* rules / borders */
  --text:      #E8EAED;   /* headings, emphasis, key text */
  --text-2:    #CDD3DC;   /* body copy / paragraphs */
  --muted:     #99A2B2;   /* secondary text / tags */
  --muted-2:   #6E7889;   /* small labels / metadata */
  --accent:    #4C82F0;   /* bright blue (main accent) — readable on the dark bg */
  --accent-dim:#4C82F022;
  --cyan:      #57D7E6;   /* secondary cool accent, used very sparingly */

  /* Display / headings font — swap here to try another typeface */
  --font-display: 'Space Grotesk', system-ui, sans-serif;

  --maxw: 1320px;
  --radius: 14px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', system-ui, sans-serif;
  font-size:21.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
img, video{ display:block; max-width:100%; }
::selection{ background:var(--accent); color:#0B0D11; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }
.mono{ font-family:'JetBrains Mono', ui-monospace, monospace; }

/* ============================================================
   LANGUAGE TOGGLE (EN / FR slider) — shared across all pages
   ============================================================ */
.lang-toggle{
  position:relative; display:inline-flex; align-items:center; flex:0 0 auto;
  padding:3px; height:34px; border:1px solid var(--line); border-radius:999px;
  background:var(--bg-2); cursor:pointer;
  font-family:'JetBrains Mono', ui-monospace, monospace; font-size:13px;
  line-height:1; letter-spacing:.02em; user-select:none;
}
.lang-toggle .lang-opt{
  position:relative; z-index:1; width:34px; text-align:center; padding:6px 0;
  border-radius:999px; color:var(--muted-2); font-weight:500;
  transition:color .2s var(--ease);
}
.lang-toggle .lang-opt.active{ color:#0B0D11; }
.lang-toggle .lang-thumb{
  position:absolute; z-index:0; top:3px; bottom:3px; left:3px; width:34px;
  background:var(--accent); border-radius:999px;
  box-shadow:0 0 10px var(--accent-dim);
  transition:transform .22s var(--ease);
}
.lang-toggle.fr .lang-thumb{ transform:translateX(34px); }
.lang-toggle:hover{ border-color:#37404f; }
@media (prefers-reduced-motion: reduce){
  .lang-toggle .lang-thumb, .lang-toggle .lang-opt{ transition:none; }
}