/* ============================================================
   Andromeda Forge - instrument de precision en espace profond
   Aucune ressource externe. Aucune dependance.
   ============================================================ */
:root{
  --void:#05070f; --deep:#080c18; 
  --ink:#eef2ff; --dim:#98a4c2; --faint:#5d6885;
  --ice:#7aa2ff; --ice-soft:#a9c2ff; --ember:#ff9a5c; --ember-soft:#ffbf95;
  --line:rgba(140,163,225,.15); --line-soft:rgba(140,163,225,.075);
  --max:1120px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--void); color:var(--ink);
  font:16.5px/1.68 var(--sans); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- ciel : trois couches d'etoiles + halos ---------- */
.sky{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.sky i{position:absolute; inset:-25%; display:block}
/* les gradients sont TUILES via background-size, sinon on n'obtient que 8 etoiles en tout */
.sky .s1{
  background-image:
    radial-gradient(1.1px 1.1px at 12% 18%,#fff,transparent),
    radial-gradient(1px 1px at 68% 8%,#dce6ff,transparent),
    radial-gradient(1.2px 1.2px at 34% 62%,#fff,transparent),
    radial-gradient(1px 1px at 88% 44%,#cddaff,transparent),
    radial-gradient(1.1px 1.1px at 52% 88%,#fff,transparent),
    radial-gradient(1px 1px at 22% 92%,#eef2ff,transparent),
    radial-gradient(1.2px 1.2px at 6% 54%,#fff,transparent),
    radial-gradient(1px 1px at 44% 32%,#e6ecff,transparent),
    radial-gradient(1px 1px at 78% 66%,#fff,transparent),
    radial-gradient(1.1px 1.1px at 92% 22%,#dbe4ff,transparent);
  background-size:340px 340px; background-repeat:repeat;
  opacity:.8; animation:drift 240s linear infinite;
}
.sky .s2{
  background-image:
    radial-gradient(2px 2px at 78% 72%,#bacaff,transparent),
    radial-gradient(1.8px 1.8px at 15% 40%,#fff,transparent),
    radial-gradient(2.2px 2.2px at 60% 25%,#d8e2ff,transparent),
    radial-gradient(1.8px 1.8px at 92% 84%,#fff,transparent),
    radial-gradient(2px 2px at 40% 76%,#c8d6ff,transparent);
  background-size:760px 760px; background-repeat:repeat;
  opacity:.55; animation:drift 380s linear infinite reverse;
}
.sky .glow{
  background:
    radial-gradient(900px 560px at 82% -12%, rgba(122,162,255,.15), transparent 68%),
    radial-gradient(760px 470px at 4% 6%,   rgba(255,154,92,.075), transparent 66%),
    radial-gradient(1100px 700px at 50% 108%, rgba(122,162,255,.07), transparent 70%);
  animation:none;
}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-6%,4%,0)}}

/* ---------- structure ---------- */
.wrap{position:relative; z-index:2; max-width:var(--max); margin:0 auto; padding:0 26px}
main{position:relative; z-index:2}
section{padding:96px 0; position:relative}
section + section{border-top:1px solid var(--line-soft)}

/* regle graduee : motif d'instrument */
.ticks{height:15px; position:relative; margin-bottom:52px;
  background-image:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 22px);
  -webkit-mask-image:linear-gradient(90deg,#000,#000 34%,transparent);
          mask-image:linear-gradient(90deg,#000,#000 34%,transparent)}

/* ---------- nav ---------- */
header.nav{position:sticky; top:0; z-index:20; background:rgba(5,7,15,.72);
  backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid var(--line-soft)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:68px}
.brand{display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none;
  font-weight:640; letter-spacing:-.005em; font-size:15.5px}
.brand .mk{width:30px;height:30px;flex:none}
.nav nav{display:flex; gap:4px; flex-wrap:wrap}
.nav nav a{color:var(--dim); text-decoration:none; font:500 13px/1 var(--mono);
  letter-spacing:.04em; padding:9px 12px; border-radius:7px; text-transform:uppercase}
.nav nav a:hover{color:var(--ink); background:rgba(122,162,255,.09)}
.nav nav a[aria-current]{color:var(--ice); background:rgba(122,162,255,.09)}

/* ---------- typo ---------- */
h1{font-size:clamp(2.5rem,7.2vw,5.1rem); line-height:.99; letter-spacing:-.042em;
  font-weight:750; margin:0 0 26px}
h1 em{font-style:normal; color:transparent; background:linear-gradient(96deg,var(--ice-soft),var(--ember-soft));
  -webkit-background-clip:text; background-clip:text}
h2{font-size:clamp(1.65rem,3.4vw,2.5rem); line-height:1.12; letter-spacing:-.028em;
  font-weight:700; margin:0 0 20px}
h3{font-size:1.02rem; font-weight:620; letter-spacing:-.008em; margin:0 0 9px; color:var(--ink)}
p{margin:0 0 17px; color:var(--dim); max-width:66ch}
.lead{font-size:clamp(1.06rem,1.9vw,1.28rem); line-height:1.55; color:var(--ink); max-width:54ch}
strong{color:var(--ink); font-weight:620}
ul{color:var(--dim); max-width:66ch; padding-left:19px} li{margin:8px 0}

/* le texte reste UN SEUL item flex, sinon il se coupe entre les items */
.label{font:500 11.5px/1.9 var(--mono); letter-spacing:.19em; text-transform:uppercase;
  color:var(--faint); display:flex; align-items:baseline; gap:12px; margin:0 0 24px}
.label::before{content:""; width:26px; height:1px; background:var(--ice); opacity:.6;
  flex:none; transform:translateY(-4px)}
.label span{min-width:0}
.label b{color:var(--ice); font-weight:500}

/* ---------- hero ---------- */
.hero{padding:96px 0 88px}
.hero .wrap{width:100%}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:56px; align-items:center}
.constellation{width:100%; height:auto; max-width:430px; margin-left:auto; display:block}
.constellation .lnk{stroke:var(--ice); stroke-width:.9; opacity:.34; fill:none}
.constellation .st{fill:#fff}
.constellation .st.big{fill:var(--ice-soft)}
.constellation text{font:9.5px var(--mono); fill:var(--faint); letter-spacing:.09em}
.constellation .m31{fill:var(--ember); opacity:.5}
.constellation .m31lbl{fill:var(--ember-soft); opacity:.85}
@keyframes tw{0%,100%{opacity:1}50%{opacity:.35}}
.constellation .st{animation:tw 5.5s ease-in-out infinite}
.constellation .st:nth-child(2n){animation-duration:7.5s; animation-delay:-2s}
.constellation .st:nth-child(3n){animation-duration:9s; animation-delay:-4s}

/* ---------- metronome vivant : 120 BPM, 500 ms/temps ---------- */
.meter{margin-top:42px; display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.beats{display:flex; gap:9px}
.beats span{width:9px;height:9px;border-radius:50%;background:rgba(122,162,255,.2);
  animation:beat 4s steps(1,end) infinite}
.beats span:nth-child(1){animation-delay:0s}      .beats span:nth-child(2){animation-delay:.5s}
.beats span:nth-child(3){animation-delay:1s}      .beats span:nth-child(4){animation-delay:1.5s}
.beats span:nth-child(5){animation-delay:2s}      .beats span:nth-child(6){animation-delay:2.5s}
.beats span:nth-child(7){animation-delay:3s}      .beats span:nth-child(8){animation-delay:3.5s}
@keyframes beat{0%,12.5%{background:var(--ember);box-shadow:0 0 13px rgba(255,154,92,.85)}
                12.6%,100%{background:rgba(122,162,255,.2);box-shadow:none}}
.readout{font:500 12px/1 var(--mono); letter-spacing:.16em; color:var(--faint); text-transform:uppercase}
.readout b{color:var(--ice); font-weight:500}

/* ---------- trace : le balayage de l'onde ---------- */
.trace{margin-top:38px; width:100%; height:70px; display:block; overflow:visible}
.trace .base{stroke:var(--line); stroke-width:1; fill:none}
.trace .wave{stroke:url(#tg); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round}
.trace .head{fill:var(--ember); filter:drop-shadow(0 0 7px rgba(255,154,92,.9))}

/* ---------- cartes numerotees ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(252px,1fr)); gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft); border-radius:15px;
  overflow:hidden; margin-top:40px}
.card{background:linear-gradient(180deg,rgba(122,162,255,.045),rgba(8,12,24,.7)); padding:30px 26px;
  transition:background .25s}
.card:hover{background:linear-gradient(180deg,rgba(122,162,255,.1),rgba(8,12,24,.7))}
.card .n{font:500 11px/1 var(--mono); letter-spacing:.2em; color:var(--ice); opacity:.75;
  display:block; margin-bottom:16px}
.card p{margin:0; font-size:14.8px; color:var(--dim)}

/* ---------- bloc produit ---------- */
.product{border:1px solid var(--line); border-radius:18px; padding:clamp(30px,5vw,58px);
  background:
    radial-gradient(760px 380px at 88% 0%, rgba(255,154,92,.075), transparent 62%),
    linear-gradient(180deg,rgba(122,162,255,.05),rgba(8,12,24,.55));
  position:relative; overflow:hidden}
.product::after{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(90deg,var(--line-soft) 0 1px,transparent 1px 40px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000);
          mask-image:linear-gradient(180deg,transparent,#000); opacity:.5}
.product > *{position:relative; z-index:1}
.chip{display:inline-flex; align-items:center; gap:9px; font:500 11px/1 var(--mono);
  letter-spacing:.17em; text-transform:uppercase; color:var(--ember-soft);
  border:1px solid rgba(255,154,92,.3); background:rgba(255,154,92,.07);
  border-radius:999px; padding:8px 15px; margin-bottom:22px}
.chip::before{content:""; width:6px;height:6px;border-radius:50%;background:var(--ember);
  box-shadow:0 0 10px var(--ember); animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.pname{font-size:clamp(2.1rem,5vw,3.3rem); letter-spacing:-.04em; font-weight:750;
  line-height:1; margin:0 0 20px}
.speclist{list-style:none; padding:0; margin:34px 0 0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(212px,1fr)); gap:26px 32px; max-width:none}
.speclist li{margin:0; padding-top:15px; border-top:1px solid var(--line)}
.speclist b{display:block; font-size:14.5px; color:var(--ink); margin-bottom:5px; font-weight:620}
.speclist span{font-size:14px; color:var(--dim); line-height:1.55}

/* ---------- tableau identite ---------- */
.facts{width:100%; border-collapse:collapse; margin-top:26px; font-size:14.8px}
.facts th,.facts td{text-align:left; padding:15px 0; border-bottom:1px solid var(--line-soft);
  vertical-align:top}
.facts th{font:500 11.5px/1.5 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); width:31%; padding-right:26px; font-weight:500}
.facts td{color:var(--dim)}
a{color:var(--ice-soft); text-decoration:none; border-bottom:1px solid rgba(169,194,255,.3)}
a:hover{color:#fff; border-bottom-color:var(--ice)}
.nav a,.brand,.speclist a{border-bottom:0}

/* ---------- pages legales ---------- */
.legal h2{font-size:1.16rem; letter-spacing:-.012em; margin:46px 0 14px;
  padding-top:26px; border-top:1px solid var(--line-soft)}
.legal h2:first-of-type{margin-top:0; border-top:0; padding-top:0}
.legal p,.legal li{font-size:15.4px}
.updated{font:500 11.5px/1 var(--mono); letter-spacing:.15em; text-transform:uppercase;
  color:var(--faint); margin-top:20px}

/* ---------- footer ---------- */
footer{position:relative; z-index:2; border-top:1px solid var(--line-soft);
  padding:56px 0 68px; margin-top:26px}
.fgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(212px,1fr)); gap:34px}
footer .ft{font:500 11px/1 var(--mono); letter-spacing:.19em; text-transform:uppercase;
  color:var(--faint); margin-bottom:15px}
footer p{font-size:14.2px; margin:0; color:var(--dim); line-height:1.8}
footer a{color:var(--dim)}
footer a:hover{color:var(--ink)}
.colophon{margin-top:44px; padding-top:22px; border-top:1px solid var(--line-soft);
  font:500 11px/1.7 var(--mono); letter-spacing:.11em; color:var(--faint);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:44px}
  .constellation{margin:0 auto; max-width:330px}
}
@media (max-width:640px){
  section{padding:66px 0}
  .hero{padding:56px 0 48px; min-height:0}
  .nav .wrap{flex-direction:column; align-items:flex-start; padding-top:13px; padding-bottom:13px}
  .nav nav{margin-left:-12px}
  .facts th{width:auto; display:block; border-bottom:0; padding:14px 0 0}
  .facts td{display:block; padding:4px 0 14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  .trace .wave{stroke-dashoffset:0}
  .beats span:nth-child(1){background:var(--ember)}
}