/* FILE: index.css
   Session 4d (refacto) — extrait du <style> inline de index.html. CSS pur, byte-identique. */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  font-family:'Montserrat',sans-serif;
  background:#080808;
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:24px 20px;
  position:relative;
  overflow:hidden;
}

/* ── Ambient background glow ── */
.bg-glow{position:absolute;inset:0;pointer-events:none}
.bg-glow::before{
  content:'';position:absolute;
  top:-20%;left:50%;transform:translateX(-50%);
  width:600px;height:600px;
  background:radial-gradient(ellipse,rgba(124,58,237,.12) 0%,transparent 65%);
  animation:glowPulse 6s ease-in-out infinite;
}
.bg-glow::after{
  content:'';position:absolute;
  bottom:-10%;left:50%;transform:translateX(-50%);
  width:400px;height:300px;
  background:radial-gradient(ellipse,rgba(236,72,153,.06) 0%,transparent 70%);
  animation:glowPulse 8s ease-in-out infinite reverse;
}
@keyframes glowPulse{
  0%,100%{opacity:.6;transform:translateX(-50%) scale(1)}
  50%{opacity:1;transform:translateX(-50%) scale(1.08)}
}

/* ── Grain overlay ── */
.grain{
  position:absolute;inset:0;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px;
}

/* ── Main content ── */
.wrap{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;width:100%;max-width:480px;
}

.dopa-name{
  font-size:clamp(52px,16vw,88px);
  font-weight:900;letter-spacing:6px;line-height:1;
  background:linear-gradient(135deg,#fff 0%,rgba(255,255,255,.65) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:6px;
}
.dopa-sub{
  font-size:10px;font-weight:700;
  letter-spacing:4px;text-transform:uppercase;
  color:#333;margin-bottom:40px;
}
.divider{
  width:40px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
  margin-bottom:40px;
}
.coming-label{
  font-size:9px;font-weight:700;
  letter-spacing:3.5px;text-transform:uppercase;
  color:#3a3a3a;margin-bottom:22px;
}

/* ── Countdown blocks ── */
.countdown{display:flex;align-items:flex-start;gap:8px;margin-bottom:44px}
.cd-block{display:flex;flex-direction:column;align-items:center;gap:6px}
.cd-num{
  font-size:clamp(36px,11vw,58px);
  font-weight:900;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-2px;
  color:#fff;
  text-shadow:0 0 40px rgba(124,58,237,.25);
  min-width:clamp(52px,14vw,80px);text-align:center;
}
.cd-label{font-size:8px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#252525}
.cd-sep{
  font-size:clamp(26px,8vw,42px);font-weight:900;
  color:#1a1a1a;margin-top:2px;line-height:1;
  animation:sepBlink 1s step-end infinite;
}
@keyframes sepBlink{0%,100%{opacity:1}50%{opacity:.12}}

/* ── Progress bar ── */
.progress-wrap{width:100%;max-width:260px;margin-bottom:44px}
.progress-track{
  height:2px;background:rgba(255,255,255,.05);
  border-radius:1px;overflow:hidden;margin-bottom:8px;
}
.progress-fill{
  height:100%;width:0%;
  background:linear-gradient(90deg,#7c3aed,#a855f7,#ec4899);
  border-radius:1px;transition:width 1s linear;
}
.progress-pct{font-size:9px;font-weight:700;color:#252525;letter-spacing:1px;text-align:right}

/* ── Footer link ── */
.bottom-line{font-size:11px;color:#1e1e1e;font-weight:600;letter-spacing:.5px}
.bottom-line a{color:#2a2a2a;text-decoration:none;transition:color .2s}
.bottom-line a:hover{color:#555}