/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

body{
  background: #0b0b0c;
  color: #f3f3f3;
  min-height: 100vh;
  overflow-x: hidden;
}

/* BOUTON LANGUE */
.lang-switch{
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 20;
  border: none;
  cursor: pointer;

  padding: 10px 14px;
  border-radius: 12px;
  color: #030303;
  background: #f9f9fa;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
  transition: transform .2s ease, background .2s ease;
}

.lang-switch:hover{
  transform: scale(1.05);
  background: #1a1a1f;
}

/* ===== FOND : AURORA + MICRO ÉTOILES ===== */
.stars-container{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;

  /* aurora / mesh */
  background:
    radial-gradient(800px 600px at 50% 15%, rgba(255,255,255,0.10), transparent 60%),
    radial-gradient(720px 520px at 15% 85%, rgba(120,170,255,0.12), transparent 62%),
    radial-gradient(720px 520px at 88% 80%, rgba(255,140,210,0.10), transparent 62%),
    #0b0b0c;
}

/* vignette */
.stars-container::before{
  content:"";
  position:absolute;
  inset:-8%;
  background: radial-gradient(circle at 50% 35%,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.45) 60%,
    rgba(0,0,0,0.85) 100%
  );
}

/* ===== MICRO ÉTOILES (CSS ONLY) ===== */
.stars-container::after{
  content:"";
  position:absolute;
  inset:0;

  /* étoiles réparties */
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1px 1px at 28% 72%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1px 1px at 46% 34%, rgba(255,255,255,0.60), transparent),
    radial-gradient(1px 1px at 63% 21%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 72% 68%, rgba(255,255,255,0.50), transparent),
    radial-gradient(1px 1px at 84% 42%, rgba(255,255,255,0.40), transparent),
    radial-gradient(1px 1px at 91% 78%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1px 1px at 38% 88%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 18% 56%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1px 1px at 55% 52%, rgba(255,255,255,0.50), transparent);

  animation: starsTwinkle 6s ease-in-out infinite;
  opacity: 0.9;
}

@keyframes starsTwinkle{
  0%,100% { opacity: 0.75; }
  50%     { opacity: 1; }
}

/* ===== BLOBS AURORA (NETS) ===== */
.bg-blob{
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 999px;

  background: radial-gradient(circle at 35% 35%,
    rgba(255,255,255,0.22),
    rgba(160,190,255,0.14) 38%,
    rgba(255,140,210,0.10) 58%,
    rgba(0,0,0,0) 72%
  );

  filter: blur(14px);
  opacity: 0.55;
  animation: blobMove var(--d) ease-in-out infinite;
  will-change: transform;
}

@keyframes blobMove{
  0%   { transform: translate(0,0); }
  50%  { transform: translate(var(--dx), var(--dy)); }
  100% { transform: translate(0,0); }
}

/* CONTAINER */
.container{
  position: relative;
  z-index: 2;
  min-height: 100vh;
  padding: 60px 18px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

/* AVATAR */
.avatar{
  opacity: 0;
  transform: translateY(26px);
}

.avatar-inner{
  width: 118px;
  height: 118px;
  border-radius: 500px;
  padding: 4px;
  background: linear-gradient(145deg, #252525, #171718);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.75),
    0 0 18px rgba(255,255,255,0.16);
  transition: transform .25s ease, box-shadow .25s ease;
}

.avatar-inner:hover{
  transform: scale(1.06);
  box-shadow:
    0 22px 55px rgba(0,0,0,0.85),
    0 0 28px rgba(255,255,255,0.26);
}

.avatar-inner img{
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  background: #111;
}

/* CARTES */
.profile-card{
  width: 92%;
  max-width: 560px;
  opacity: 0;
  transform: translateY(26px);
}

.profile-card-inner{
  position: relative;
  padding: 36px 30px 28px;
  border-radius: 26px;
  text-align: center;
  background: #111010;
  border: 1px solid rgba(240, 239, 239, 0.14);
  box-shadow:
    0 28px 70px rgba(0,0,0,0.78),
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 18px rgba(255,255,255,0.08);
  transition: transform .25s ease, box-shadow .25s ease;
  cursor: pointer;
  overflow: hidden;
}

.profile-card-inner:hover{
  transform: scale(1.03);
}

/* TITRE */
.profile-card-inner h2{
  font-size: 2.15rem;
  margin-bottom: 16px;
  font-weight: 780;
}

/* BOUTON */
.profile-card-inner button{
  height: 46px;
  width: min(300px, 84%);
  border-radius: 999px;
  border: none;
  background: #f2f2f2;
  color: #111;
  font-size: 1.06rem;
  font-weight: 900;
  cursor: pointer;
}