/* Optiges — page « en cours ». Indigo, O animé, blueprint. */
:root {
  --bg: #070b18;
  --acc: #6366f1;
  --acc-2: #a5b4fc;
  --ink: #eef2ff;
  --muted: #94a3b8;
  --line: rgba(165, 180, 252, .16);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  color: var(--ink);
  font: 16px/1.55 system-ui, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: #fff; color: #111; padding: .6rem 1rem;
}
.skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--acc-2); outline-offset: 3px; }

.sky { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }

.glow {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: .55;
}
.glow-a {
  width: 46vw; height: 46vw; left: -8vw; top: -12vw;
  background: radial-gradient(circle, #3730a3 0%, transparent 70%);
  animation: drift 18s var(--ease) infinite alternate;
}
.glow-b {
  width: 38vw; height: 38vw; right: -10vw; bottom: -16vw;
  background: radial-gradient(circle, #4c1d95 0%, transparent 70%);
  animation: drift 22s var(--ease) infinite alternate-reverse;
}

.grid {
  position: absolute; inset: -20%;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: perspective(800px) rotateX(62deg) translateY(18%);
  mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 72%);
  animation: grid-shift 28s linear infinite;
}

.dust {
  position: absolute; inset: 0;
  background-image: radial-gradient(1.5px 1.5px at 20% 30%, #c7d2fe 60%, transparent),
    radial-gradient(1.5px 1.5px at 70% 20%, #a5b4fc 60%, transparent),
    radial-gradient(1.5px 1.5px at 40% 80%, #ddd6fe 60%, transparent),
    radial-gradient(1.5px 1.5px at 85% 65%, #818cf8 60%, transparent);
  opacity: .45;
  animation: dust 16s linear infinite;
}

.stage {
  position: relative; z-index: 1;
  min-height: 100%;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3.2rem 1.4rem 4rem;
  gap: 1rem;
}

.eyebrow {
  margin: 0;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 700;
  color: var(--acc-2);
}

h1 {
  margin: .2rem 0 0;
  font-size: clamp(2.1rem, 6vw, 3.6rem);
  letter-spacing: -.03em;
  line-height: 1.08;
  font-weight: 800;
}

.lead {
  max-width: 34rem;
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
}

.sigil {
  position: relative;
  width: 200px; height: 200px;
  margin: .4rem 0 .2rem;
}

.ring { width: 100%; height: 100%; display: block; }

.track {
  fill: none; stroke: rgba(165, 180, 252, .18); stroke-width: 2.5;
}

.draw {
  fill: none;
  stroke: url(#stroke);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-dasharray: 452;
  stroke-dashoffset: 452;
  animation: draw 4.8s var(--ease) infinite;
  transform-origin: 100px 100px;
}

.core {
  fill: none;
  stroke: rgba(199, 210, 254, .35);
  stroke-width: 1.2;
  animation: pulse 3.6s var(--ease) infinite;
  transform-origin: 100px 100px;
}

.mark {
  position: absolute; inset: 0; margin: auto;
  width: 64px; height: 64px; border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 12px 40px rgba(99, 102, 241, .35);
}

.orbit {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: var(--acc-2); box-shadow: 0 0 12px #6366f1;
  top: 50%; left: 50%;
  animation: orbit 14s linear infinite;
}
.o1 { animation-duration: 12s; background: #6366f1; }
.o2 { animation-duration: 17s; animation-delay: -4s; background: #c4b5fd; }
.o3 { animation-duration: 21s; animation-delay: -9s; background: #818cf8; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: .45rem;
  padding: .85rem 1.5rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #818cf8, #4f46e5);
  color: #fff; font-weight: 700; text-decoration: none;
  border: 0; cursor: pointer; font: inherit;
  box-shadow: 0 10px 30px rgba(99, 102, 241, .38);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(99, 102, 241, .5); }
.btn.solid { width: 100%; margin-top: .2rem; }

.card {
  width: min(420px, 100%);
  margin-top: 1.4rem;
  padding: 1.15rem 1.15rem 1rem;
  text-align: left;
  background: rgba(15, 18, 36, .72);
  border: 1px solid var(--line);
  border-radius: 22px;
  backdrop-filter: blur(16px);
  display: grid; gap: .7rem;
}

.card-kicker {
  margin: 0;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acc-2);
  font-weight: 700;
}

label {
  display: grid; gap: .3rem;
  font-size: .78rem; color: var(--muted); font-weight: 650;
}

input, textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: rgba(7, 11, 24, .7);
  color: var(--ink);
  border-radius: 12px;
  padding: .7rem .8rem;
  font: inherit;
}

.fine { margin: 0; font-size: .78rem; color: var(--muted); }
.fine strong { color: var(--ink); font-weight: 650; }

.status {
  margin: 1.6rem 0 0;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #64748b;
}

@keyframes draw {
  0% { stroke-dashoffset: 452; }
  42% { stroke-dashoffset: 0; }
  58% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -452; }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: .5; }
  50% { transform: scale(1.06); opacity: 1; }
}
@keyframes orbit {
  from { transform: rotate(0deg) translate(88px) rotate(0deg); }
  to { transform: rotate(360deg) translate(88px) rotate(-360deg); }
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(4%, 6%, 0); }
}
@keyframes grid-shift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 56px 84px, 56px 84px; }
}
@keyframes dust {
  from { transform: translateY(0); }
  to { transform: translateY(-24px); }
}

@media (max-width: 640px) {
  .sigil { width: 160px; height: 160px; }
  .mark { width: 52px; height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .draw, .core, .orbit, .glow, .grid, .dust { animation: none; }
  .draw { stroke-dashoffset: 80; }
}