:root{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  --text: #eaf2ff;
  --link: #7cc7ff;
  --card-bg: rgba(10, 14, 28, .55);
  --card-bd: rgba(255,255,255,.14);
  --btn-bg: rgba(124,199,255,.14);
  --btn-bg-hover: rgba(124,199,255,.22);
}

*{ box-sizing:border-box; }
html, body{ width:100%; }
body{
  margin:0;
  color:var(--text);
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
  background:#050816;
}

/* Fond anime */
body::before{
  content:"";
  position:fixed;
  inset:-40px;
  z-index:-2;
  background:
    radial-gradient(900px 500px at 20% 20%, rgba(0,255,170,.20), transparent 60%),
    radial-gradient(900px 500px at 80% 30%, rgba(124,199,255,.22), transparent 60%),
    radial-gradient(900px 500px at 50% 85%, rgba(255,0,200,.18), transparent 60%),
    radial-gradient(800px 450px at 10% 90%, rgba(255,180,0,.16), transparent 60%),
    linear-gradient(120deg, rgba(20,10,60,.85), rgba(6,12,30,.92));
  filter: saturate(1.2) blur(0px);
  animation: bgShift 16s ease-in-out infinite alternate;
}

@keyframes bgShift{
  0%{ transform: translate3d(0,0,0) scale(1); filter:hue-rotate(0deg) saturate(1.15); }
  50%{ transform: translate3d(-10px, 8px,0) scale(1.02); filter:hue-rotate(35deg) saturate(1.25); }
  100%{ transform: translate3d(12px,-10px,0) scale(1.03); filter:hue-rotate(75deg) saturate(1.35); }
}

/* Blobs (effet néon) */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(closest-side at 15% 30%, rgba(0,255,170,.22), transparent 65%),
    radial-gradient(closest-side at 85% 40%, rgba(124,199,255,.26), transparent 65%),
    radial-gradient(closest-side at 55% 90%, rgba(255,0,200,.20), transparent 70%);
  filter: blur(28px);
  animation: blobFloat 10s ease-in-out infinite alternate;
  opacity:.9;
}

@keyframes blobFloat{
  0%{ transform: translate3d(0,0,0); }
  50%{ transform: translate3d(18px,-10px,0); }
  100%{ transform: translate3d(-12px,14px,0); }
}

/* Grain subtil */
.noise{
  pointer-events:none;
  position:fixed;
  inset:0;
  z-index:-1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity:.14;
}

a{ color:var(--link); text-decoration:none; }

.wrap{
  max-width:900px;
  margin:0 auto;
  padding:24px;
}

.card{
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: 18px;
  padding: 16px;
  margin: 12px 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.20);
  background: var(--btn-bg);
  color: var(--text);
  cursor:pointer;
  min-height: 40px;
  max-width:100%;
}

.btn:hover{ background: var(--btn-bg-hover); }

input:not([type="checkbox"]):not([type="radio"]),
textarea,
select{
  width:100%;
  max-width:100%;
  padding:10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.25);
  color: var(--text);
  font-size:16px;
}
input[type="checkbox"],
input[type="radio"]{
  width:auto;
  max-width:none;
  padding:0;
  border-radius: 6px;
  accent-color: rgba(124,199,255,.95);
}
.option-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin:10px 0;
}

.option-row span{
  flex:1 1 auto;
  min-width:0;
  word-break:break-word;
}


label{ display:block; margin: 10px 0 6px; opacity:.92; }
.small{ opacity:.82; font-size:14px; }

.flash{
  padding:10px 12px;
  border-radius:12px;
  background: rgba(0,255,170,.12);
  border:1px solid rgba(0,255,170,.25);
  margin:12px 0;
}

.err{
  padding:10px 12px;
  border-radius:12px;
  background: rgba(255,80,80,.12);
  border:1px solid rgba(255,80,80,.25);
  margin:12px 0;
}

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.actions .btn{ flex:0 1 auto; }

/* Mobile */
@media (max-width: 600px){
  .wrap{ padding:14px; }
  h1{ font-size:22px; }
  h2{ font-size:18px; }
  .card{ padding:14px; border-radius:16px; }
  .btn{ width:100%; }
  input[type="radio"]{ width:18px; height:18px; }
}

/* Accessibilite : si l'utilisateur prefere moins d'animations */
@media (prefers-reduced-motion: reduce){
  body::before, body::after{ animation:none; }
}