:root {
  --night: #1B0B44;
  --night-2: #2A1166;
  --violet: #7426F5;
  --violet-deep: #5B17D1;
  --lilac: #A78BFA;
  --lavender: #F3EEFF;
  --sun: #FFCD57;
  --sun-dark: #D9A12A;
  --ink: #0F172A;
  --white: #FFFFFF;
  --muted: rgba(255, 255, 255, .68);
  --c0: #7426F5; /* triangle */
  --c1: #FFCD57; /* diamond */
  --c2: #A78BFA; /* circle */
  --c3: #F3EEFF; /* square */
  --ok: #16A34A;
  --ko: #E11D48;
  --radius: 18px;
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  color: var(--white);
  background-color: var(--night);
  background-image:
    radial-gradient(1100px 700px at 88% -12%, rgba(116, 38, 245, .55), transparent 62%),
    radial-gradient(900px 620px at -12% 112%, rgba(167, 139, 250, .28), transparent 60%),
    linear-gradient(160deg, #22095A 0%, var(--night) 55%, #140733 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

button { font: inherit; cursor: pointer; border: 0; }
input { font: inherit; }

/* Logo Datajuba, posé sur une pastille blanche pour rester lisible sur le fond violet */
.logo-pill { background: var(--white); border-radius: 999px; padding: .38em .95em; display: inline-flex; align-items: center; flex: none; }
.logo-pill img { display: block; height: 1.7em; width: auto; }

.btn {
  background: var(--sun); color: var(--ink);
  font-weight: 800; letter-spacing: .01em;
  padding: .85em 1.6em; border-radius: 999px;
  box-shadow: 0 6px 0 var(--sun-dark);
  transition: transform .08s, box-shadow .08s, opacity .2s;
}
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--sun-dark); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.ghost { background: rgba(255,255,255,.12); color: var(--white); box-shadow: none; }

.tile-0 { background: var(--c0); color: var(--white); }
.tile-1 { background: var(--c1); color: var(--ink); }
.tile-2 { background: var(--c2); color: var(--ink); }
.tile-3 { background: var(--c3); color: var(--ink); }
.shape { width: 1.4em; height: 1.4em; flex: none; fill: currentColor; }

/* Trois points qui rebondissent, aux couleurs de la marque */
.dots { display: inline-flex; gap: .35em; font-size: 26px; }
.dots i { width: .7em; height: .7em; border-radius: 50%; display: block; animation: bob 1.3s ease-in-out infinite; }
.dots i:nth-child(1) { background: var(--violet); }
.dots i:nth-child(2) { background: var(--sun); animation-delay: .15s; }
.dots i:nth-child(3) { background: var(--lilac); animation-delay: .3s; }
@keyframes bob { 50% { transform: translateY(-10px); } }

@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }
@keyframes rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pulse { 50% { transform: scale(1.04); } }
.pop { animation: pop .45s cubic-bezier(.2,.9,.3,1.3) both; }
.rise { animation: rise .5s ease both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}