:root {
  --accent:#00bfff;
  --accent-dark:#0099cc;
  --deep:#001f3f;
  --ocean:#002f4f;
  --bg:#001d33;
  --card:rgba(255,255,255,0.07);
  --text:#e0f8ff;
  --rounded:14px;
  --maxw:980px;
  --gap:18px;
  --glow:0 0 15px rgba(0,191,255,0.3);
}

/* --- Fond global sous-marin --- */
body {
  font-family:'Poppins',sans-serif;
  margin:0;
  background: radial-gradient(circle at 50% 10%, #004466 0%, #001f3f 70%);
  color:var(--text);
  padding:40px 20px;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  min-height:100vh;
  overflow-x:hidden;
}

/* --- Conteneur principal --- */
.container {
  width:100%;
  max-width:var(--maxw);
  backdrop-filter:blur(12px);
  border-radius:var(--rounded);
  box-shadow:0 0 35px rgba(0,191,255,0.15);
  padding:24px;
  background:rgba(0,0,30,0.45);
  border:1px solid rgba(0,191,255,0.1);
  position:relative;
  overflow:hidden;
}

/* --- Animation bulles décoratives --- */
.container::before, .container::after {
  content:"";
  position:absolute;
  border-radius:50%;
  opacity:0.15;
  background:radial-gradient(circle,#00bfff 0%,transparent 70%);
  animation: floatBubble 12s ease-in-out infinite;
}
.container::before {
  width:180px; height:180px; bottom:-60px; left:-40px;
  animation-delay:2s;
}
.container::after {
  width:250px; height:250px; top:-80px; right:-80px;
}

@keyframes floatBubble {
  0% { transform:translateY(0) scale(1);}
  50% { transform:translateY(-20px) scale(1.1);}
  100% { transform:translateY(0) scale(1);}
}