/* Thème léger dédié aux pages légales – respecte la DA (couleurs/variables) */
:root { color-scheme: dark; }

body {
  min-height: 100vh;
  margin: 0;
  color: rgba(255,255,255,.92);
  background: radial-gradient(1200px 800px at 20% -10%, rgba(0,255,136,.08), transparent 60%),
              radial-gradient(900px 700px at 120% 10%, rgba(0,204,255,.08), transparent 55%),
              #020314;
  /* Rétablit le curseur système (le site masque le curseur pour le mode spatial) */
  cursor: auto;
}

.legal-bg { position: fixed; inset: 0; pointer-events: none; opacity: .6; background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.02) 2px 4px); }

/* Fond comme la page de connexion, version légère (sans JS) */
.space-background {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
              radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%);
  animation: backgroundShift 20s ease-in-out infinite alternate;
}
.stars-field {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
}
.stars-field::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  background-image:
    radial-gradient(1px 1px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 40px 70px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.4), transparent);
  background-repeat: repeat;
  background-size: 150px 150px;
  animation: starMove 60s linear infinite;
}
@keyframes backgroundShift { 0% { transform: rotate(0deg) scale(1);} 100% { transform: rotate(1deg) scale(1.1);} }
@keyframes starMove { from { transform: translateX(0) translateY(0);} to { transform: translateX(-150px) translateY(-150px);} }
@keyframes starsTwinkle {
  from { opacity: .6; }
  to   { opacity: .9; }
}

/* Animation utilisée par la page de connexion (compat) */
@keyframes twinkle {
  0% { opacity: .3; }
  50% { opacity: .9; }
  100% { opacity: .3; }
}

.legal-wrap { width: 100%; max-width: 960px; margin: 16px auto; padding: 24px; }
.legal-logo { display:flex; justify-content:center; align-items:center; margin: 8px 0 16px; }
.legal-logo img { height: 72px; width: auto; user-select: none; -webkit-user-drag: none; image-rendering: -webkit-optimize-contrast; }
.legal-wrap { position: relative; z-index: 2; }

.legal-card {
  background: rgba(0, 255, 136, 0.05);
  border: 1px solid rgba(0, 255, 136, 0.25);
  border-radius: 16px;
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0, 255, 136, 0.08);
  overflow: hidden;
}
.space-container { position: fixed; inset: 0; z-index: 0; pointer-events: none; }


.legal-header { padding: 28px 28px 0 28px; }
.legal-title { margin: 0; font-size: 2rem; color: var(--cosmic-primary, #00ff88); }
.legal-sub { opacity: .8; margin: 8px 0 0; }

.legal-content { padding: 20px 28px 28px; line-height: 1.75; }
.legal-content h2 { margin: 24px 0 8px; font-size: 1.2rem; color: var(--cosmic-primary, #00ff88); }
.legal-content ul { margin: 8px 0 16px 18px; }

.legal-footer { padding: 16px 28px 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.btn-ghost {
  border: 1px solid rgba(0, 255, 136, 0.35);
  background: transparent; color: #fff; padding: 10px 14px; border-radius: 12px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.btn-ghost:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,255,136,.18); border-color: rgba(0,255,136,.6); }
.muted { opacity: .75; font-size: .9rem; }

/* Curseurs standards pour l’accessibilité */
a, button { cursor: pointer; }
input, textarea, select { cursor: text; }

@media (max-width: 768px) {
  .legal-wrap { margin: 56px auto; padding: 16px; }
}