:root{
  --bg:#030503;
  --ink:#eef6ee;
  --ink-dim:#9fb3a4;
  --muted:#76897d;
  --accent:#59ff9a;
  --accent2:#ff2e6e;
  --warn:#e0a53c;
  --line:rgba(238,246,238,0.14);
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: 'Anton', Impact, 'Arial Narrow', sans-serif;

  /* rôles typographiques (petit texte) : label tracké, méta fonctionnel, corps descriptif, ligne terminal */
  --fs-label:11px;
  --fs-meta:12px;
  --fs-body:12.5px;
  --fs-terminal:13px;
}

*{box-sizing:border-box;}

/* ---------- boot sequence ---------- */
.boot{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:var(--bg);
  transition:opacity .4s ease;
  cursor:pointer;
}
.boot.is-hidden{
  opacity:0;
  pointer-events:none;
}
.boot-lines{
  margin:0;
  font-family:var(--mono);
  font-size:var(--fs-terminal);
  line-height:1.8;
  color:var(--accent);
  text-shadow:0 0 8px rgba(89,255,154,.35);
  white-space:pre-wrap;
}

.boot-lang{
  margin-top:6px;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .3s ease, transform .3s ease;
}
.boot-lang.is-shown{
  opacity:1;
  transform:translateY(0);
}
.boot-lang-line{
  margin:0 0 8px;
  font-family:var(--mono);
  font-size:var(--fs-terminal);
  line-height:1.8;
  color:var(--accent);
  text-shadow:0 0 8px rgba(89,255,154,.35);
  white-space:pre-wrap;
}
.boot-lang-options{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.boot-lang-btn{
  appearance:none;
  background:none;
  border:none;
  padding:2px 0;
  text-align:left;
  font-family:var(--mono);
  font-size:var(--fs-terminal);
  letter-spacing:.02em;
  line-height:1.8;
  color:var(--ink-dim);
  cursor:pointer;
  transition:color .15s ease;
}
.boot-lang-btn .key{color:var(--muted);}
.boot-lang-btn:hover,
.boot-lang-btn:focus-visible{color:var(--accent2);}
.boot-lang-btn:hover .key,
.boot-lang-btn:focus-visible .key{color:var(--accent2);}

html{
  scroll-behavior:smooth;
  scroll-padding-top:64px;
}

html,body{
  margin:0;
  width:100%;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);
}

body{
  overflow-x:hidden;
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none;
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='none' stroke='%2359ff9a' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Cpath d='M12 1v4M12 19v4M1 12h4M19 12h4'/%3E%3Ccircle cx='12' cy='12' r='1.2' fill='%2359ff9a' stroke='none'/%3E%3C/g%3E%3C/svg%3E") 12 12, crosshair;
}

/* gauchissement d'écran façon tube CRT : filtre défini en SVG dans index.html */
main{
  filter:url(#crt-warp);
}

/* ---------- site nav ---------- */
.sitenav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px clamp(18px,3vw,40px);
  background:linear-gradient(to bottom, rgba(3,5,3,.85), rgba(3,5,3,0));
  pointer-events:none;
}
.sitenav-mark{
  pointer-events:auto;
  font-family:var(--display);
  font-size:16px;
  letter-spacing:.03em;
  color:var(--ink);
  text-decoration:none;
}
.sitenav-links{
  pointer-events:auto;
  list-style:none;
  display:flex;
  gap:24px;
  margin:0;
  padding:0;
  font-size:var(--fs-label);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.sitenav-links a{
  color:var(--muted);
  text-decoration:none;
  transition:color .2s;
}
.sitenav-links a:hover,
.sitenav-links a:focus-visible{color:var(--accent);}

.lang-switch{
  pointer-events:auto;
  display:flex;
  gap:6px;
  margin-left:24px;
}
.lang-btn{
  appearance:none;
  background:transparent;
  border:1px solid var(--line);
  color:var(--muted);
  font-family:var(--mono);
  font-size:var(--fs-label);
  letter-spacing:.1em;
  padding:4px 8px;
  cursor:pointer;
  transition:color .2s, border-color .2s;
}
.lang-btn:hover,
.lang-btn:focus-visible{color:var(--ink);border-color:var(--muted);}
.lang-btn.is-active{
  color:var(--accent);
  border-color:var(--accent);
}
/* la taille visible reste sobre, mais la zone tactile atteint 44px pour un pointeur imprécis (doigt) */
@media (pointer:coarse){
  .lang-btn{
    min-width:44px;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:4px 10px;
  }
}

/* ---------- menu mobile ---------- */
.nav-toggle{
  display:none;
  pointer-events:auto;
  appearance:none;
  background:none;
  border:none;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  color:var(--ink);
  cursor:pointer;
}
.nav-toggle svg{width:22px;height:auto;display:block;}

@media (max-width:720px){
  .nav-toggle{display:flex;}
  .sitenav-links{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    gap:0;
    padding:8px clamp(18px,3vw,40px) 18px;
    background:var(--bg);
    border-bottom:1px solid var(--line);
  }
  .sitenav-links.is-open{display:flex;}
  .sitenav-links li{border-top:1px solid var(--line);}
  .sitenav-links a{
    display:flex;
    align-items:center;
    min-height:48px;
    padding:12px 0;
  }
}

.neon-line{
  position:fixed;
  top:0; left:0; right:0;
  height:1px;
  z-index:39;
  background:linear-gradient(90deg, transparent, var(--accent2) 25%, var(--accent) 75%, transparent);
  opacity:.55;
  pointer-events:none;
}

.scroll-progress{
  position:fixed;
  top:0; left:0;
  width:100%;
  height:4px;
  z-index:41;
  background:var(--accent);
  box-shadow:0 0 8px rgba(89,255,154,.5);
  pointer-events:none;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .08s linear;
}

/* ---------- stage ---------- */
.stage{
  position:relative;
  height:100vh;
  width:100%;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 18%, #0c130e 0%, var(--bg) 60%),
    var(--bg);
}

.chrome{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:clamp(18px,3vw,40px);
}

.chrome-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  font-size:var(--fs-meta);
  letter-spacing:.14em;
  margin-top:44px;
}
.wordmark{
  font-family:var(--display);
  font-size:clamp(32px,6vw,72px);
  letter-spacing:.03em;
  color:var(--ink);
  text-shadow:0 0 14px rgba(89,255,154,.35), 0 0 24px rgba(255,46,110,.22);
}
.wordmark span{color:var(--accent);}

.hint{
  text-align:right;
  color:var(--muted);
  text-transform:uppercase;
}
.cursor{
  display:inline-block;
  color:var(--accent);
  animation:blink 1s steps(1) infinite;
}
@keyframes blink{
  0%,50%{opacity:1;}
  50.01%,100%{opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .cursor{animation:none;}
}

.card-tooltip{
  position:absolute;
  left:0;
  top:0;
  max-width:min(280px,60vw);
  padding:10px 16px;
  background:rgba(3,5,3,.9);
  border:1px solid var(--line);
  font-size:var(--fs-meta);
  line-height:1.5;
  color:var(--ink-dim);
  text-align:center;
  opacity:0;
  transform:scale(.94);
  transition:opacity .22s ease, transform .22s ease;
  pointer-events:none;
  z-index:6;
}
.card-tooltip.is-visible{
  opacity:1;
  transform:scale(1);
}
@media (prefers-reduced-motion: reduce){
  .card-tooltip{transition:none;}
}

.chrome-bottom{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
}
.caption{
  max-width:38ch;
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--ink-dim);
  letter-spacing:.01em;
}
.caption b{color:var(--ink);}

.chrome-bottom-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}

.changelog{
  pointer-events:auto;
  text-align:right;
  min-width:200px;
}
.changelog-head{
  margin:0 0 6px;
  font-size:var(--fs-label);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent2);
  text-shadow:0 0 8px rgba(255,46,110,.35);
}
.changelog ul{
  list-style:none;
  margin:0 0 4px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.changelog li{
  font-size:var(--fs-label);
  color:var(--ink-dim);
}
.changelog-line{
  margin:0;
  font-size:var(--fs-label);
  color:var(--accent);
}

/* ---------- socle lumineux sous le carrousel ---------- */
.holo-floor{
  position:absolute;
  left:50%;
  bottom:10%;
  width:56%;
  max-width:560px;
  height:160px;
  transform:translateX(-50%) rotateX(75deg);
  background:radial-gradient(closest-side, rgba(89,255,154,.22), rgba(89,255,154,0) 70%);
  filter:blur(2px);
  pointer-events:none;
  z-index:0;
}
.holo-floor::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(89,255,154,.3) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(89,255,154,.3) 0 1px, transparent 1px 22px);
  mask:radial-gradient(closest-side, #000 70%, transparent 100%);
  opacity:.5;
}
.holo-floor{
  animation:holo-floor-pulse 3.6s ease-in-out infinite;
}
@keyframes holo-floor-pulse{
  0%,92%,100%{opacity:1;}
  93%{opacity:.75;}
  94%{opacity:1;}
  96.5%{opacity:.85;}
  97.3%{opacity:1;}
}
@media (prefers-reduced-motion: reduce){
  .holo-floor{animation:none;}
}

/* ---------- carousel ---------- */
.carousel-wrap{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  touch-action:pan-y;
  cursor:grab;
  opacity:0;
  transition:opacity 160ms ease;
}
.carousel-wrap.is-ready{opacity:1;}
.carousel-wrap:active{cursor:grabbing;}

.carousel{
  position:relative;
  width:1px;
  height:1px;
}

.card{
  position:absolute;
  top:50%;
  left:50%;
  width:var(--card-w);
  height:var(--card-h);
  will-change:transform, opacity;
}
.card-face{
  position:absolute;
  inset:0;
  border-radius:2px;
  overflow:hidden;
  background:#111;
  border:1px solid var(--accent);
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,.8),
    0 0 22px rgba(89,255,154,.22),
    inset 0 0 30px rgba(89,255,154,.1);
  transition:box-shadow .25s ease, filter .25s ease;
}
.card:hover .card-face,
.card:focus-visible .card-face,
.card.is-active .card-face{
  filter:brightness(1.12);
  box-shadow:
    0 30px 70px -15px rgba(0,0,0,.9),
    0 0 30px rgba(89,255,154,.4),
    inset 0 0 34px rgba(89,255,154,.16);
  animation:holo-flicker 3.6s ease-in-out infinite;
}
.card:focus-visible{outline:none;}
.card-face::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
}
/* grille de circuit, superposée sur chaque carte */
.card-grid{
  position:absolute;
  inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(89,255,154,.14) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(90deg, rgba(89,255,154,.14) 0 1px, transparent 1px 18px);
  mix-blend-mode:screen;
  pointer-events:none;
}
/* balayage type scanner, réservé à la carte active pour ne pas surcharger la scène */
.card-scan{
  position:absolute;
  left:0; right:0; height:16px;
  background:linear-gradient(180deg, rgba(89,255,154,0), rgba(89,255,154,.55), rgba(89,255,154,0));
  opacity:0;
  pointer-events:none;
}
.card.is-active .card-scan{
  opacity:1;
  animation:holo-scan 2.8s linear infinite;
}
@keyframes holo-scan{
  0%{top:-16px;}
  100%{top:100%;}
}
@keyframes holo-flicker{
  0%,92%,100%{opacity:1;}
  93%{opacity:.82;}
  94%{opacity:1;}
  96.5%{opacity:.9;}
  97.3%{opacity:1;}
}
@media (prefers-reduced-motion: reduce){
  .card.is-active .card-face{animation:none;}
  .card.is-active .card-scan{animation:none;}
}

/* ---------- flèches de navigation ---------- */
.carousel-nav{
  position:absolute;
  bottom:clamp(18px,4vw,36px);
  left:50%;
  transform:translateX(-50%);
  z-index:6;
  display:flex;
  gap:28px;
  pointer-events:auto;
}
.carousel-arrow{
  appearance:none;
  background:none;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  padding:6px;
  color:var(--muted);
  cursor:pointer;
  transition:color .2s ease;
}
.carousel-arrow:hover,
.carousel-arrow:focus-visible{color:var(--accent);}
.carousel-arrow svg{
  width:26px;
  height:auto;
  display:block;
}
.card-art{
  position:absolute;
  inset:0;
  filter:saturate(0.85) contrast(1.05);
}
.card-art-split{
  display:flex;
  flex-direction:column;
}
.card-art-half{
  position:relative;
  flex:1 1 50%;
  width:100%;
  background-size:cover;
  background-position:center;
}
.card-art-half:first-child{
  border-bottom:1px solid var(--accent2);
}

/* duotone green wash over a photo, to match the CRT phosphor palette --
   relies on the host element already being positioned (.card-art is
   absolute, .card-art-half is relative) so this never touches `position`. */
.card-tint{
  filter:grayscale(1) sepia(1) hue-rotate(70deg) saturate(1.6) contrast(1.05) brightness(.92);
}
.card-tint::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--accent);
  mix-blend-mode:multiply;
  opacity:.15;
}
.card-tint::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--accent);
  mix-blend-mode:color;
  opacity:.5;
}

.card-icon{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--accent);
}
.card-icon svg{
  width:38%;
  height:auto;
  filter:drop-shadow(0 0 10px currentColor);
  opacity:.95;
}

.card-terminal{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.card-terminal-bar,
.card-terminal-body{
  position:absolute;
  left:14%;
  right:14%;
}
.card-terminal-bar{
  top:16%;
  display:flex;
  gap:6px;
}
.card-terminal-bar span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--muted);
  opacity:.7;
}
.card-terminal-body{
  bottom:20%;
  font-family:var(--mono);
  font-size:clamp(18px,2vw,26px);
  color:var(--accent);
  text-shadow:0 0 10px rgba(89,255,154,.4);
}
.card-row{
  position:absolute;
  left:0;right:0;
  display:flex;
  justify-content:space-between;
  padding:14px 16px;
  font-size:var(--fs-label);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.92);
  z-index:2;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.card-row.top{top:0;}
.card-title{
  position:absolute;
  left:16px;right:16px;bottom:14px;
  z-index:2;
  font-family:var(--display);
  font-size:clamp(20px,2.1vw,30px);
  line-height:.94;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.7);
}

/* ---------- CRT overlay ---------- */
.crt-overlay{
  position:fixed;
  inset:0;
  z-index:50;
  pointer-events:none;
}
.crt-vignette{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 78% 78% at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 88%, rgba(0,0,0,.92) 100%);
}
.crt-fringe{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 90% 90% at 50% 50%, transparent 55%, rgba(255,50,90,.16) 94%, transparent 100%),
    radial-gradient(ellipse 90% 90% at 50% 50%, transparent 58%, rgba(70,140,255,.16) 92%, transparent 100%);
  mix-blend-mode:screen;
}
.crt-scanlines{
  position:absolute;inset:-2px;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 1px,
    rgba(0,0,0,.32) 2px,
    rgba(0,0,0,0) 3px
  );
  mix-blend-mode:multiply;
}
.crt-scanlines::after{
  content:"";
  position:absolute;inset:0;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.035) 0px,
    rgba(255,255,255,0) 1px
  );
  mix-blend-mode:screen;
}
.crt-roll{
  position:absolute;
  left:0;right:0;height:26%;
  background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.05) 45%, rgba(255,255,255,0) 100%);
  mix-blend-mode:overlay;
  animation:roll 11s linear infinite;
}
@keyframes roll{
  0%{top:-30%;}
  100%{top:110%;}
}
.crt-grain{
  position:absolute;
  inset:-10%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.5'/></svg>");
  background-size:180px 180px;
  opacity:.05;
  mix-blend-mode:overlay;
  animation:grain 0.5s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0);}
  16%{transform:translate(-3%,2%);}
  33%{transform:translate(2%,-4%);}
  50%{transform:translate(-2%,-2%);}
  66%{transform:translate(3%,1%);}
  83%{transform:translate(-1%,3%);}
  100%{transform:translate(0,0);}
}
.crt-flicker{
  position:absolute;inset:0;
  background:#0aff8a;
  opacity:0;
  mix-blend-mode:overlay;
  animation:flicker 6.4s ease-in-out infinite;
}
@keyframes flicker{
  0%,93%,100%{opacity:0;}
  93.4%{opacity:.05;}
  93.8%{opacity:0;}
  96%{opacity:.03;}
  96.3%{opacity:0;}
}
.crt-edge{
  position:absolute;inset:0;
  box-shadow:inset 0 0 140px 40px rgba(0,0,0,.75);
}

@media (prefers-reduced-motion: reduce){
  .crt-roll, .crt-grain, .crt-flicker{animation:none;}
}

@media (max-width:720px){
  .chrome-bottom{align-items:flex-end;}
  .caption{max-width:24ch;font-size:var(--fs-label);}
}

/* ---------- content sections ---------- */
.section{
  position:relative;
  max-width:960px;
  margin:0 auto;
  padding:clamp(64px,10vw,120px) clamp(18px,3vw,40px);
}
.eyebrow{
  font-size:var(--fs-label);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent2);
  text-shadow:0 0 8px rgba(255,46,110,.35);
  margin:0 0 10px;
}

.section-title{
  position:relative;
  display:inline-block;
  font-family:var(--display);
  text-transform:uppercase;
  font-size:clamp(28px,4.5vw,52px);
  letter-spacing:.01em;
  line-height:1;
  margin:0 0 clamp(28px,4vw,44px);
  color:var(--ink);
  text-wrap:balance;
  transition:color .2s ease, text-shadow .2s ease;
}
.section-title::after{
  content:"";
  position:absolute;
  left:0; bottom:-6px;
  width:100%;
  height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s ease;
}
.section-title:hover{
  color:var(--accent);
  text-shadow:0 0 14px rgba(89,255,154,.35);
}
.section-title:hover::after{
  transform:scaleX(1);
}
@media (prefers-reduced-motion: reduce){
  .section-title, .section-title::after{transition:none;}
}
.section-placeholder{
  color:var(--muted);
  font-size:var(--fs-terminal);
  letter-spacing:.02em;
}

.section-credit{
  margin:10px 0 0;
  font-size:var(--fs-meta);
  color:var(--muted);
}
.section-credit a{
  color:var(--muted);
  text-decoration:underline;
}
.section-credit a:hover,
.section-credit a:focus-visible{color:var(--accent2);}

.project-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
}

.project-preview{
  margin:-22px -22px 0;
  aspect-ratio:16/9;
  background-color:#0a120c;
  background-size:cover;
  background-position:top center;
  filter:grayscale(.4) saturate(1.2) brightness(.85);
  border-bottom:1px solid var(--line);
  transition:filter .2s ease;
}
a.project-card:hover .project-preview,
a.project-card:focus-visible .project-preview{
  filter:grayscale(0) saturate(1.3) brightness(.95);
}

.project-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:420px;
  padding:22px;
  border:1px solid var(--line);
  background:linear-gradient(160deg, rgba(238,246,238,.03), rgba(238,246,238,0));
  color:var(--ink);
  text-decoration:none;
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  transition:border-color .2s, transform .2s;
}
.project-card::before,
.project-card::after{
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  opacity:.6;
  transition:opacity .2s;
  pointer-events:none;
}
.project-card::before{
  top:-1px; left:-1px;
  border-top:1px solid var(--accent2);
  border-left:1px solid var(--accent2);
}
.project-card::after{
  bottom:-1px; right:-1px;
  border-bottom:1px solid var(--accent2);
  border-right:1px solid var(--accent2);
}
.project-card:hover::before,
.project-card:hover::after,
.project-card:focus-visible::before,
.project-card:focus-visible::after{opacity:1;}
a.project-card:hover,
a.project-card:focus-visible{
  border-color:var(--accent);
  transform:translateY(-2px);
}
.project-tag{
  font-size:var(--fs-label);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.project-name{
  font-family:var(--display);
  font-size:22px;
  letter-spacing:.01em;
}
.project-desc{
  font-size:var(--fs-body);
  line-height:1.5;
  color:var(--ink-dim);
  margin:0;
}
.project-link{
  font-size:var(--fs-meta);
  color:var(--muted);
}
a.project-card:hover .project-link,
a.project-card:focus-visible .project-link{color:var(--accent);}

.project-name.is-blurred{
  filter:blur(6px);
  user-select:none;
}
.project-card.is-locked{border-style:dashed;}

.badge{
  align-self:flex-start;
  font-size:var(--fs-label);
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:4px 9px;
  border:1px solid currentColor;
}
.badge-wip{color:var(--warn);}
.badge-soon{color:var(--muted);}
.badge-lock{color:var(--accent);}

/* ---------- legal ---------- */
.section-legal-page{
  max-width:560px;
}
.legal-block{margin-top:24px;}
.legal-block h2{
  font-size:var(--fs-label);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  opacity:.75;
  margin:14px 0 4px;
}
.legal-block h2:first-child{margin-top:0;}
.legal-block p{
  font-size:var(--fs-meta);
  line-height:1.55;
  color:var(--muted);
  margin:0;
}

.site-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  max-width:960px;
  margin:0 auto;
  padding:24px clamp(18px,3vw,40px) 48px;
  font-size:var(--fs-label);
  letter-spacing:.04em;
  color:var(--muted);
}
.site-footer a{
  color:var(--muted);
  text-decoration:none;
  transition:color .2s;
}
.site-footer a:hover,
.site-footer a:focus-visible{color:var(--accent);}

.visitor-counter{
  font-variant-numeric:tabular-nums;
  letter-spacing:.08em;
  padding:3px 8px;
  border:1px solid var(--line);
  color:var(--muted);
}
.visitor-counter #visitorNum{color:var(--accent);}

/* ---------- transition de page : extinction/allumage façon tube CRT ---------- */
@view-transition{
  navigation:auto;
}
::view-transition-old(root){
  animation:crt-power-off 420ms cubic-bezier(0.4,0,0.2,1) forwards;
}
::view-transition-new(root){
  animation:crt-power-on 420ms cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes crt-power-off{
  0%{transform:scaleY(1); filter:brightness(1); opacity:1;}
  55%{transform:scaleY(.02); filter:brightness(3); opacity:1;}
  100%{transform:scaleY(.02); filter:brightness(0); opacity:0;}
}
@keyframes crt-power-on{
  0%{transform:scaleY(.02); filter:brightness(3); opacity:0;}
  45%{opacity:1;}
  100%{transform:scaleY(1); filter:brightness(1); opacity:1;}
}
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){animation:none;}
}