:root{
  /* ---- Paramètres (ajustables) ---- */
  /* Desktop (PC) : hauteur de la zone sphère */
  --sphere-desktop-h-vh: 78vh;
  --sphere-desktop-h-max: 820px;
  --sphere-desktop-h-min: 640px;
  /* Desktop : biais ajouté au padding bas (permet d'équilibrer haut/bas) */
  --sphere-desktop-bottom-bias: 0px;

  /* Mobile portrait : faire occuper plus de vertical */
  --sphere-mobile-portrait-h: 88svh;
  --sphere-mobile-portrait-max: 940px;
  --sphere-mobile-portrait-min: 520px;

  /* Mobile (autres) : fallback */
  --sphere-default-h-vh: 72vh;
  --sphere-default-h-max: 720px;
  --sphere-default-h-min: 560px;

  --bg0:#02070f;
  --bg1:#06131f;
  --stroke:rgba(150,220,255,.22);
  --panel:rgba(8,18,28,.62);

  --c1:#00e5ff;
  --c2:#b05cff;
  --c3:#22ff9a;
  --c4:#ffb020;

  --txt:#e8f5ff;
  --muted:rgba(232,245,255,.72);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--txt);
  background: radial-gradient(1200px 800px at 50% 15%, #0b2740 0%, var(--bg0) 55%, #01040a 100%);
  overflow-x:hidden;
}

a{color:inherit}
.wrap{
  max-width:1200px;
  margin:0 auto;
  padding: clamp(18px, 3.2vw, 34px) 18px 18px;
}

.hero{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
  align-items:start;
}
@media (max-width: 980px){
  .hero{grid-template-columns:1fr}
}

h1{
  margin:0 0 10px 0;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height:1.05;
  text-shadow: 0 0 24px rgba(0,229,255,.18);
}
.lead{
  margin:0;
  color:var(--muted);
  font-size: clamp(14px, 1.45vw, 17px);
  line-height:1.5;
  max-width: 75ch;
}

.panel{
  border:1px solid var(--stroke);
  background: var(--panel);
  border-radius: 18px;
  padding: 14px;
  position: relative;
  overflow:hidden;
  box-shadow: 0 18px 70px rgba(0,0,0,.45);
}
.panel::before{
  content:"";
  position:absolute; inset:-1px;
  background:
    radial-gradient(600px 240px at 25% 0%, rgba(0,229,255,.14), transparent 55%),
    radial-gradient(520px 240px at 80% 20%, rgba(176,92,255,.12), transparent 55%),
    radial-gradient(520px 280px at 65% 110%, rgba(34,255,154,.10), transparent 55%);
  pointer-events:none;
  opacity:.9;
}

.scene{
  position:relative;
  /* Default sizing (mobile/tablet) */
  height: min(var(--sphere-default-h-vh), var(--sphere-default-h-max));
  min-height: var(--sphere-default-h-min);
  /* Extra breathing room under the sphere (helps visual centering in the frame) */
  --frame-pad-b: 8px;
  border-radius: 18px;
  overflow:hidden;
  isolation:isolate;
}

@media (min-width: 981px){
  /* Desktop: zone sphère légèrement plus haute + respiration bas */
  .scene{
    height: min(var(--sphere-desktop-h-vh), var(--sphere-desktop-h-max));
    min-height: var(--sphere-desktop-h-min);
    --frame-pad-b: 8px;
  }
}
@media (max-width: 520px){
  /* Mobile global (landscape + petits écrans) */
  .scene{ min-height: 480px; --frame-pad-b: 12px; }
}

@media (max-width: 520px) and (orientation: portrait){
  /* Mobile portrait : plus de vertical pour la sphère
     Fallback cross-browser: vh first, then svh when supported. */
  .scene{
    height: min(88vh, var(--sphere-mobile-portrait-max));
    min-height: var(--sphere-mobile-portrait-min);
    --frame-pad-b: 12px;
  }
}
@supports (height: 1svh){
  @media (max-width: 520px) and (orientation: portrait){
    .scene{ height: min(var(--sphere-mobile-portrait-h), var(--sphere-mobile-portrait-max)); }
  }
}
/* Fullscreen: use all available canvas space (no extra bottom padding) */
.scene.is-native-fs,
.scene.is-pseudo-fs{
  --frame-pad-b: 0px;
}

canvas#scene{
  position:absolute;
  left:0; right:0;
  top: var(--ui-offset, 0px);
  width:100%;
  /* IMPORTANT (mobile portrait fix): <canvas> is a replaced element.
     On some mobile browsers, top+bottom+height:auto does NOT stretch reliably.
     We compute an explicit height so the sphere truly fills the section. */
  height: calc(100% - var(--ui-offset, 0px) - var(--hud-offset, 0px) - var(--frame-pad-b, 0px));
  bottom: auto;
  z-index:1;

  /* Mobile: allow vertical page scroll when NOT fullscreen.
     In fullscreen we capture gestures for rotation. */
  touch-action: pan-y;
  -ms-touch-action: pan-y;
  overscroll-behavior: contain;
}


.scanlines{
  position:absolute; inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.22;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.05) 0px,
      rgba(255,255,255,.05) 1px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 6px
    );
  mix-blend-mode: overlay;
  animation: scan 8s linear infinite;
}
@keyframes scan{
  0%{transform: translateY(-10px)}
  100%{transform: translateY(10px)}
}

.grain{
  position:absolute; inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.10;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.25) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.18) 0 1px, transparent 1px);
  background-size: 140px 140px, 180px 180px;
  mix-blend-mode: overlay;
  animation: grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform: translate3d(0,0,0)}
  25%{transform: translate3d(-6px, 4px, 0)}
  50%{transform: translate3d(5px,-3px, 0)}
  75%{transform: translate3d(-3px,-5px, 0)}
  100%{transform: translate3d(0,0,0)}
}

.topbar{
  position:absolute;
  left:10px; right:10px; top:10px;
  z-index:3;
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  transition: transform .22s ease, opacity .18s ease;
  will-change: transform;
}

.controls{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(0,0,0,.24) inset;
}

/* Words slider (sphere density) */
.controls--words{gap:10px}
.controls--words .wordRange{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.wordLabel{
  font-size: 12px;
  font-weight: 850;
  color: rgba(232,245,255,.80);
  letter-spacing:.2px;
}
.wordSlider{
  width: 200px;
  max-width: 46vw;
  accent-color: rgba(0,229,255,.85);
}
.wordStat{
  font-size: 12px;
  font-weight: 800;
  color: rgba(232,245,255,.90);
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  box-shadow: 0 0 0 1px rgba(0,0,0,.22) inset;
}
.wordStat .small{
  color: rgba(232,245,255,.72);
  font-weight: 750;
}
.controls--words .btn{white-space:nowrap}
.controls--words input[disabled]{opacity:.55}

@media (max-width: 520px){
  .wordSlider{width: 180px; max-width: 60vw;}
}

.btn{
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  color: rgba(232,245,255,.92);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12.5px;
  font-weight: 750;
  letter-spacing:.2px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, opacity .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.btn:active{transform: translateY(1px) scale(.99)}
.btn.off{opacity:.55}
.btn.on{
  border-color: rgba(255,255,255,.30);
  box-shadow: 0 0 22px rgba(0,229,255,.10);
}

.dot{width:10px;height:10px;border-radius:99px;box-shadow:0 0 18px currentColor}
.btn[data-cat="c1"] .dot{color:var(--c1)}
.btn[data-cat="c2"] .dot{color:var(--c2)}
.btn[data-cat="c3"] .dot{color:var(--c3)}
.btn[data-cat="c4"] .dot{color:var(--c4)}

.pill{
  width:34px;height:18px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.22);
  position: relative;
  box-shadow: 0 0 0 1px rgba(0,0,0,.18) inset;
}
.pill::after{
  content:"";
  position:absolute; top:50%; left:2px;
  width:14px; height:14px; border-radius:999px;
  transform: translateY(-50%);
  background: rgba(232,245,255,.88);
  box-shadow: 0 0 18px rgba(0,229,255,.18);
  transition: left .16s ease;
}
.btn.on .pill{background: rgba(0,229,255,.10)}
.btn.on .pill::after{left:18px}

.hud{
  position:absolute;
  left:12px; right:12px; bottom:10px;
  z-index:3;
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
  font-size: 12.5px;
  color: rgba(232,245,255,.78);
  pointer-events:none;
}

/* Instructions retirées (PC/Mobile/Auto) : on masque le bloc d'instructions en bas pour tous les modes */
.hud{ display:none !important; }

.hud b{color:rgba(232,245,255,.92); font-weight:800}
.kbd{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  border-radius: 9px;
  padding: 2px 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
}


/* Definition backdrop (tap outside to close) */
.defbackdrop{
  position:absolute;
  left:0; right:0;
  top: var(--ui-offset, 0px);
  bottom: var(--hud-offset, 0px);
  z-index:3;
  border:0;
  padding:0;
  margin:0;
  background: transparent;
  opacity:0;
  pointer-events:none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.defbackdrop.show{
  pointer-events:auto;
}

/* Definition card */

.defbox{
  position:absolute;
  right:12px;
    bottom: calc(var(--hud-offset, 0px) + 12px);
  z-index:4;
  width: min(420px, calc(100% - 24px));
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.52);
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 90px rgba(0,0,0,.55);
  padding: 12px 12px 10px;
  transform: translateY(14px);
  opacity: 0;
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}
.defbox.show{
  opacity: 1;
  transform: translateY(0);
  pointer-events:auto;
}
.deftop{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.defterm{
  font-weight: 900;
  letter-spacing:.2px;
  font-size: 14.5px;
  margin:0;
}
.defcat{
  font-size: 11.5px;
  color: rgba(232,245,255,.75);
  margin-top:2px;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  font-size: 12px;
  font-weight: 800;
  white-space:nowrap;
}
.badge .dot{width:9px;height:9px}
.deftext{
  margin:10px 0 0 0;
  color: rgba(232,245,255,.82);
  line-height:1.5;
  font-size: 13.5px;
}
.close{
  margin-left:auto;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color: rgba(232,245,255,.90);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 850;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}


@media (max-width: 520px){
  /* Mobile: make close easier & defbox full-width */
  .defbox{
    left:12px;
    right:12px;
    width:auto;
  }
  .close{
    min-height:44px;
    min-width:44px;
    padding: 10px 14px;
    font-size: 13px;
  }
  .deftext{font-size: 14px;}
}

.footer{
  color: rgba(232,245,255,.55);
  font-size: 12.5px;
  padding: 12px 18px 26px;
  max-width:1200px;
  margin: 0 auto;
}

/* Lexique SEO (static render via JS into details) */
details{
  margin-top: 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(0,0,0,.16);
}
details summary{
  cursor:pointer;
  font-weight:850;
  color: rgba(232,245,255,.92);
  list-style:none;
}
details summary::-webkit-details-marker{display:none}

.lexgrid{
  margin-top: 10px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 860px){
  .lexgrid{grid-template-columns:1fr}
}
.lexcol h3{
  margin:0 0 8px 0;
  font-size:14px;
  letter-spacing:.2px;
}
.lexlist{
  margin:0;
  padding-left: 16px;
  color: rgba(232,245,255,.78);
  line-height:1.5;
  font-size: 13px;
}
.lexlist li{margin:0 0 6px 0}
.lexlist b{color: rgba(232,245,255,.92)}



/* Background image FIXE (pseudo-element) — plus fiable que background-attachment: fixed sur mobile */
body{
  background: transparent;
}
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -3;
  background: url("../img/bg-space.png") center / cover no-repeat;
  transform: translateZ(0);
  will-change: transform;
}
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1200px 800px at 50% 15%, rgba(11,39,64,.88) 0%, rgba(2,7,15,.75) 55%, rgba(1,4,10,.92) 100%),
    radial-gradient(700px 380px at 20% 15%, rgba(0,229,255,.10) 0%, transparent 60%),
    radial-gradient(700px 380px at 80% 22%, rgba(176,92,255,.09) 0%, transparent 60%),
    radial-gradient(700px 420px at 65% 110%, rgba(34,255,154,.07) 0%, transparent 65%);
  pointer-events:none;
}


/* Micro-FX UI */
.btn.on{ box-shadow: 0 0 26px rgba(0,229,255,.14), 0 0 0 1px rgba(0,0,0,.22) inset; }
.btn{ text-shadow: 0 0 10px rgba(0,229,255,.10); }

/* v3: canvas reste transparent (le fond est géré par body::before) */
canvas#scene{ background: transparent; }



/* Starfield (CSS-only) — profond, subtil, ultra-performant */
.scene::before,
.scene::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  z-index:0;
  opacity:1;
  transform: translateZ(0);
}

/* Micro-étoiles (fond lointain) */
.scene::before{
  background-image:
    radial-gradient(circle, rgba(200,235,255,0.16) 1px, transparent 1.4px),
    radial-gradient(circle, rgba(200,235,255,0.10) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(200,235,255,0.12) 1px, transparent 1.6px);
  background-size: 140px 140px, 220px 220px, 320px 320px;
  background-position: 0 0, 40px 60px, 120px 180px;
  animation: starsDriftFar 26s linear infinite;
  filter: blur(0.2px);
}

/* Étoiles plus grosses (profondeur proche) */
.scene::after{
  background-image:
    radial-gradient(circle, rgba(200,235,255,0.20) 2px, transparent 2.6px),
    radial-gradient(circle, rgba(200,235,255,0.14) 1.6px, transparent 2.2px);
  background-size: 360px 360px, 520px 520px;
  background-position: 80px 120px, 260px 340px;
  animation: starsDriftNear 18s linear infinite;
  filter: blur(0.15px);
  opacity: 0.95;
}

@keyframes starsDriftFar{
  from{ background-position: 0 0, 40px 60px, 120px 180px; }
  to  { background-position: -260px 320px, -420px 520px, -680px 840px; }
}

@keyframes starsDriftNear{
  from{ background-position: 80px 120px, 260px 340px; }
  to  { background-position: -420px 520px, -760px 940px; }
}

/* Mobile: garde tout lisible (réduit légèrement l’opacité) */
@media (max-width: 640px){
  .scene::before{ opacity: 0.85; }
  .scene::after { opacity: 0.75; }
}


/* --- Index layout helpers (no inline styles) --- */
.wrap--hero{padding-top: 10px;}
.panel--tight{line-height:1.55}
.main--flush{padding-top:0}

/* Header index CTAs */
.hero-links{display:flex; gap:.65rem; flex-wrap:wrap; margin-top: 14px}
.cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.72rem 1rem; border-radius: 14px;
  border:1px solid rgba(0,229,255,.28);
  background: rgba(0,229,255,.10);
  color: rgba(235,252,255,.96);
  text-decoration:none; font-weight:850;
  box-shadow: 0 0 0 3px rgba(0,229,255,.06);
}
.cta:hover{border-color: rgba(0,229,255,.45); box-shadow: 0 0 0 3px rgba(0,229,255,.10)}
.cta.ghost{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  box-shadow: none;
}
.lead--muted{color:rgba(232,245,255,.78); margin-top: 10px}

/* Stat pill button */
.btn--stat{cursor:default}

/* SEO terms block */
.seo-details{margin-top: 14px}
.seo-lex{padding: 12px 0 6px}
.seo-note{color: rgba(232,245,255,.78); margin: 0 0 10px}
.seo-cols{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.seo-col{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding: 12px 12px 8px;
}
.seo-col h3{
  margin:0 0 8px;
  font-size: 0.95rem;
  letter-spacing: .2px;
}
.seo-col ul{margin:0; padding-left: 18px}
.seo-col li{margin: 2px 0; color: rgba(232,245,255,.88)}
@media (min-width: 820px){
  .seo-cols{grid-template-columns: 1fr 1fr}
}


/* Mobile: definition window readability */
@media (max-width: 640px){
  .defbox{ background: rgba(0,0,0,.72); border-color: rgba(255,255,255,.22); }
  .deftext{ color: rgba(232,245,255,.92); font-size: 14px; }
}


/* ---------- Fullscreen (sphere) ----------
   - Native fullscreen: .scene:fullscreen / .scene:-webkit-full-screen
   - Fallback pseudo fullscreen: .scene.is-pseudo-fs + body.fs-lock
*/
html.fs-lock, body.fs-lock{
  overflow: hidden;
  height: 100%;
}

/* Icon chip inside buttons */
.btn .ic{
  width: 18px;
  height: 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 14px;
  line-height: 1;
  opacity: .95;
}

/* Native fullscreen styling */
.scene:fullscreen,
.scene:-webkit-full-screen{
  border-radius: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  --frame-pad-b: 0px;
}

/* Pseudo fullscreen fallback */
.scene.is-pseudo-fs{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  border-radius: 0;
  z-index: 9999;
  --frame-pad-b: 0px;
}

/* Respect safe-areas on iOS (notch) */
.scene.is-pseudo-fs .topbar{
  left: calc(10px + env(safe-area-inset-left));
  right: calc(10px + env(safe-area-inset-right));
  top: calc(10px + env(safe-area-inset-top));
}
.scene.is-pseudo-fs .hud{
  left: calc(12px + env(safe-area-inset-left));
  right: calc(12px + env(safe-area-inset-right));
  bottom: calc(10px + env(safe-area-inset-bottom));
}

/* Optional: keep definition card reachable in fullscreen */
.scene.is-pseudo-fs .defbox{
 bottom: calc(var(--hud-offset, 0px) + 12px + env(safe-area-inset-bottom));
}


/* Mobile fullscreen: collapse the top menu upward to maximize sphere space,
   while keeping a small "anchor" visible to reopen the menu. */
.fs-menu-handle{
  position:absolute;
  top: calc(8px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display:none;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.22);
  color: rgba(232,245,255,.92);
  font-size: 12.5px;
  font-weight: 850;
  letter-spacing:.2px;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(0,0,0,.24) inset, 0 10px 40px rgba(0,0,0,.35);
}
.fs-menu-handle .ic{
  width: 18px;
  height: 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 14px;
  line-height: 1;
  opacity: .95;
}
.fs-menu-handle .chev{opacity:.9}

/* Show the handle whenever mobile UI is active (normal + fullscreen, collapsed or expanded) */
.scene.is-mobile-ui .fs-menu-handle{ display:inline-flex; }

/* When the menu is expanded in mobile UI (normal + fullscreen), push the topbar down so it never overlaps the Réglages handle */
.scene.is-mobile-ui:not(.fs-menu-collapsed) .topbar{
  top: calc(10px + env(safe-area-inset-top) + 56px);
}

/* Collapsed state: slide the menu off-screen (up) */
.scene.is-mobile-ui.fs-menu-collapsed .topbar{
  transform: translateY(calc(-100% - 18px));
  opacity: 0;
  pointer-events:none;
}

/* Fullscreen mobile: hide only the instruction lines (PC/MOBILE) */
.scene.is-mobile-fs .hud .hud-instruction{ display:none !important; }
/* If the HUD contains only instructions, hide it entirely to free space */
.scene.is-mobile-fs .hud.hud-instructions-only{ display:none !important; }




/* Fullscreen (mobile): capture gestures for sphere rotation */
.scene.is-mobile-fs canvas#scene{
  touch-action: none;
  -ms-touch-action: none;
}