:root{
  --noir:#050505;
  --lumiere:#F5F5F3;
  --fumee:#8A8A8A;
  --rouge:#D42B2B;
  --font-display:'Archivo',sans-serif;
  --font-body:'Space Grotesk',sans-serif;
  --font-mono:'Space Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--noir);
  color:var(--lumiere);
  font-family:var(--font-body);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--rouge);color:var(--noir)}
.sr-only{position:absolute;left:-9999px}

/* ---- Fond vidéo ---- */
.bg{position:fixed;inset:0;z-index:0}
.bg-media{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
}
/* voile pour lisibilité du texte : assombrit + vignette */
.bg-veil{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 55% 40% at 50% 47%, rgba(5,5,5,.55), rgba(5,5,5,0) 70%),
    radial-gradient(ellipse 92% 75% at 50% 44%, rgba(5,5,5,.20), rgba(5,5,5,.74) 100%),
    linear-gradient(180deg, rgba(5,5,5,.74) 0%, rgba(5,5,5,.34) 30%, rgba(5,5,5,.48) 70%, rgba(5,5,5,.86) 100%);
}
/* grain film */
body::after{
  content:"";position:fixed;inset:-50%;z-index:2;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-2%,3%)}30%{transform:translate(3%,-2%)}
  50%{transform:translate(-3%,-3%)}70%{transform:translate(2%,3%)}90%{transform:translate(-1%,2%)}
}

/* ---- Barres fixes ---- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:4;
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 24px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--fumee);
}
.lang{display:flex;gap:2px}
.lang button{
  background:none;border:none;color:var(--fumee);cursor:pointer;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;padding:6px 8px;
  transition:color .2s;
}
.lang button[aria-pressed="true"]{color:var(--lumiere)}
.lang button:focus-visible{outline:1px solid var(--rouge);outline-offset:2px}

/* ---- Scène (monosection) ---- */
.stage{
  position:relative;z-index:3;height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px;text-align:center;
}
.mark{width:132px;margin-bottom:28px;opacity:0;animation:rise 1.2s .2s cubic-bezier(.2,.7,.2,1) forwards}
.mark img{width:100%;height:auto;display:block;filter:drop-shadow(0 0 30px rgba(212,43,43,.45))}

.wordmark{
  font-family:var(--font-display);
  font-weight:900;
  font-stretch:125%;
  font-size:clamp(48px,11vw,132px);
  line-height:.95;
  letter-spacing:.08em;
  text-indent:.08em;
  user-select:none;
  text-shadow:0 0 34px rgba(5,5,5,.9), 0 2px 10px rgba(5,5,5,.85);
  opacity:0;animation:rise 1.2s .4s cubic-bezier(.2,.7,.2,1) forwards;
}
.wordmark span{display:inline-block;transition:transform .15s ease}
.tagline{
  margin-top:20px;
  font-size:clamp(13px,1.6vw,16px);
  font-weight:300;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--lumiere);
  text-shadow:0 0 20px rgba(5,5,5,.85);
  opacity:0;animation:rise 1.2s .6s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ---- Formulaire ---- */
.waitlist{
  margin-top:56px;width:100%;max-width:420px;
  opacity:0;animation:rise 1.2s .8s cubic-bezier(.2,.7,.2,1) forwards;
}
.waitlist p{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;
  color:var(--fumee);margin-bottom:14px;
}
.field{display:flex;border-bottom:1px solid rgba(245,245,243,.35);transition:border-color .3s}
.field:focus-within{border-color:var(--rouge)}
.field input{
  flex:1;background:none;border:none;outline:none;
  color:var(--lumiere);font-family:var(--font-body);font-weight:300;
  font-size:16px;padding:14px 0;letter-spacing:.02em;
}
.field input::placeholder{color:rgba(245,245,243,.5)}
.field button{
  background:none;border:none;cursor:pointer;
  color:var(--lumiere);font-family:var(--font-mono);font-size:12px;letter-spacing:.15em;
  padding:0 4px;transition:color .2s;
}
.field button:hover,.field button:focus-visible{color:var(--rouge)}
.field button:focus-visible{outline:1px solid var(--rouge);outline-offset:2px}
.form-msg{
  margin-top:14px;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;
  min-height:16px;
}
.form-msg.ok{color:var(--rouge)}
.form-msg.err{color:var(--fumee)}

/* ---- Bas de page ---- */
.infoline{
  position:fixed;bottom:0;left:0;right:0;z-index:4;
  display:flex;justify-content:space-between;gap:16px;
  padding:20px 24px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--fumee);
}
.infoline a{color:var(--fumee);text-decoration:none;transition:color .2s}
.infoline a:hover,.infoline a:focus-visible{color:var(--rouge)}

@media (max-width:560px){
  .infoline{flex-direction:column;gap:6px;align-items:center;text-align:center}
  .topbar{padding:16px}
}
@media (prefers-reduced-motion:reduce){
  body::after{animation:none}
  .mark,.wordmark,.tagline,.waitlist{animation:none;opacity:1}
  .wordmark span{transition:none}
  #bgvideo{display:none}          /* laisse le poster statique */
  .bg{background:#050505 center/cover no-repeat url("assets/poster.jpg")}
}