:root{
  --rose:#e91683; --or:#ffd278; --bleu1:#0a1022; --bleu2:#020611; --noir:#000;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:radial-gradient(1400px 900px at 50% 40%, var(--bleu1) 0%, var(--bleu2) 65%, var(--noir) 100%);
  color:#fff; font-family:Poppins,system-ui,sans-serif; overflow:hidden;
}

/* Étoiles scintillantes */
.bg-stars{position:absolute; inset:0; z-index:0; pointer-events:none}
.star{position:absolute; border-radius:50%; background:radial-gradient(circle,#fff,#aaf);
  opacity:.55; filter:drop-shadow(0 0 6px #fff); animation:twinkle 3.6s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.25; transform:scale(.85)}50%{opacity:1; transform:scale(1.15)}}

/* Soleil & Lune */
.sun,.moon{
  position:absolute; border-radius:50%; mix-blend-mode:screen; opacity:.9;
  filter:blur(8px) brightness(1.15);
}
.sun{
  right:6%; bottom:7%; width:220px; height:220px;
  background:radial-gradient(circle, rgba(255,220,140,.85), rgba(255,175,70,.35) 50%, transparent 75%);
  box-shadow:0 0 120px rgba(255,190,80,.55);
  animation:solar-rotate 24s linear infinite, solar-pulse 5s ease-in-out infinite alternate;
}
@keyframes solar-rotate{to{transform:rotate(360deg)}}
@keyframes solar-pulse{from{filter:blur(6px) brightness(1.05)} to{filter:blur(12px) brightness(1.25)}}
.moon{
  right:6%; top:6%; width:170px; height:170px;
  background:radial-gradient(circle, rgba(255,245,180,.9), rgba(255,235,120,.25) 55%, transparent 75%);
  box-shadow:0 0 90px rgba(255,245,180,.35);
  animation:moon-rotate 28s linear infinite reverse, moon-breathe 6s ease-in-out infinite alternate;
}
@keyframes moon-rotate{to{transform:rotate(-360deg)}}
@keyframes moon-breathe{from{filter:blur(5px) brightness(1.0)} to{filter:blur(10px) brightness(1.2)}}

/* Symboles */
.symbols{position:absolute; inset:0; z-index:1; pointer-events:none; display:grid; place-items:center}
.symbols .flower{width:74vmin; opacity:.22; filter:drop-shadow(0 0 10px rgba(255,210,120,.35)); mix-blend-mode:screen; animation:spin-slow 45s linear infinite}
.symbols .starofdavid{width:58vmin; opacity:.28; stroke:#ffd278; stroke-width:.8; fill:none; filter:drop-shadow(0 0 8px rgba(255,210,120,.35)); mix-blend-mode:screen; animation:spin-slow 36s linear infinite reverse}
@keyframes spin-slow{to{transform:rotate(360deg)}}

/* Boutons */
.top-right{position:absolute; top:16px; right:22px; z-index:6; text-align:right;}
.bubble-btn{display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:28px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#fff; text-decoration:none; font-weight:600; box-shadow:0 0 12px rgba(255,255,255,.06); backdrop-filter:blur(6px); transition:.25s;}
.bubble-btn:hover{transform:scale(1.04)}
.bubble-btn.primary{background:rgba(233,22,131,.22); border-color:var(--rose); box-shadow:0 0 14px var(--rose)}

/* Texte et blocs gauche/droite */
.sidebar{position:absolute; right:22px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:10px; width:260px; z-index:3;}
.left-info{position:absolute; left:24px; top:50%; transform:translateY(calc(-50% - 2cm)); display:flex; flex-direction:column; gap:24px; width:360px; z-index:3;}
.block{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:18px; backdrop-filter:blur(6px); box-shadow:0 0 24px rgba(0,50,150,.15);}
.block h2{font-size:18px; font-weight:700; text-shadow:0 0 12px var(--rose)}
.block p{font-size:15px; opacity:.92; margin-top:6px}
.block small{display:block; margin-top:8px; color:var(--or)}

/* Terre & Orbits */
.center{position:absolute; left:49%; top:45%; transform:translate(-50%,-50%); width:1000px; height:1000px; max-width:100vmin; max-height:100vmin; z-index:2;}
.earth{position:absolute; inset:0; display:grid; place-items:center; z-index:4}
.earth-core{width:28vmin; height:28vmin; border-radius:50%; background:url('https://upload.wikimedia.org/wikipedia/commons/9/97/The_Earth_seen_from_Apollo_17.jpg') center/cover no-repeat; box-shadow:0 0 130px rgba(233,22,131,.55), 0 0 220px rgba(70,120,255,.35), inset 0 0 160px rgba(60,100,255,.35); animation:earth-spin 56s linear infinite, earth-breathe 7s ease-in-out infinite alternate;}
@keyframes earth-spin{to{transform:rotate(360deg)}}
@keyframes earth-breathe{from{box-shadow:0 0 90px rgba(233,22,131,.45), 0 0 160px rgba(70,120,255,.25)} to{box-shadow:0 0 160px rgba(233,22,131,.75), 0 0 260px rgba(70,120,255,.45)}}

/* Footer */
footer{position:absolute; bottom:10px; left:0; width:100%; display:flex; justify-content:space-between; align-items:center; padding:0 28px; font-size:13px; color:#d9d9e8; z-index:5;}
footer a{color:#fff; text-decoration:none}
.time{background:rgba(255,255,255,.07); padding:6px 10px; border-radius:10px; margin-left:6px}
#soundToggle{margin-left:10px; background:rgba(233,22,131,.22); border:1px solid var(--rose); color:#fff; padding:8px 12px; border-radius:20px; cursor:pointer; box-shadow:0 0 12px var(--rose);}

/* Bouton accueil */
.btn-home{position:fixed; top:20px; right:25px; z-index:99999; background:linear-gradient(45deg, #e91683, #00ff88); color:#fff; padding:10px 18px; border-radius:25px; font-size:0.95rem; font-weight:600; text-decoration:none; box-shadow:0 0 12px rgba(233,22,131,0.6); transition:all 0.3s ease;}
.btn-home:hover{transform:scale(1.08); box-shadow:0 0 20px rgba(0,255,136,0.7);}

/* Sélecteur de langue (rose) */
.lang-select{position:absolute; top:100px; right:40px; z-index:10000;}
.lang-btn{background:linear-gradient(90deg,#e91683,#ff5dc1); border:none; border-radius:25px; padding:10px 18px; color:#fff; font-weight:600; cursor:pointer; transition:0.3s;}
.lang-btn:hover{transform:scale(1.06); box-shadow:0 0 22px rgba(255,93,193,0.8);}
.lang-menu{display:none; position:absolute; top:calc(100% + 8px); right:0; background:rgba(0,0,0,.9); border:2px solid rgba(233,22,131,.5); border-radius:12px; padding:10px 14px; width:240px; max-height:400px; overflow-y:auto;}
.lang-menu.open{display:block;}
.lang-menu a{display:block; padding:6px 0; color:#fff; text-decoration:none; transition:0.3s;}
.lang-menu a:hover{color:#00ff88; transform:translateX(3px);}
/* ===========================================================
   🌍 ALIGNEMENT FINAL DES BLOCS + REMONTÉE DE LA TERRE
   =========================================================== */

/* Tous les blocs de la colonne gauche : même largeur + alignement */
.left-info .block {
  width: 420px !important;            /* largeur unifiée */
  max-width: 420px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-self: flex-start !important;
}

/* Espace harmonieux entre les blocs */
.left-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 25px !important;
  top: 50% !important;                /* avant 52–55%, remonte la colonne */
  left: 30px !important;
  transform: translateY(-50%) !important;
  z-index: 6 !important;
}

/* Bloc “Partenaires” et “Univers spéciaux” : espacements égaux */
.left-info .block:nth-of-type(2),
.left-info .block:nth-of-type(3) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  width: 420px !important;
}

/* Terre légèrement remontée */
.center {
  top: 43% !important;                /* avant 45% → + esthétique visuellement */
  transform: translate(-50%, -50%) !important;
}

/* Garde le footer stable */
footer, .pw-footer {
  position: absolute !important;
  bottom: 10px !important;
  width: 100%;
  z-index: 5;
}
/* ===========================================================
   🌍 POSITION PARFAITE DE LA TERRE (centrée + légèrement remontée)
   =========================================================== */

.center-planet {
  position: absolute !important;
  top: 52% !important;              /* remonte un peu (ajuste si besoin) */
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: auto !important;
  z-index: 5 !important;
}

/* ✅ Image du globe - taille normale, pas réduite */
.center-planet .planet-img {
  width: 500px !important;          /* taille visuelle standard */
  height: 500px !important;
  border-radius: 50% !important;
  box-shadow: 0 0 40px rgba(233, 22, 131, 0.5);
  transform: none !important;
}

/* ===========================================================
   ⚓ FIX GLOBAL — FOOTER TOUJOURS EN BAS DE PAGE
   =========================================================== */

footer,
.pw-footer {
  position: fixed !important;     /* toujours visible en bas */
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  background: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(10px) !important;
  color: #fff !important;
  font-size: 13px !important;
  padding: 8px 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  z-index: 9999 !important;
}

/* Texte et liens du footer harmonisés */
footer a,
.pw-footer a {
  color: #00ff88 !important;
  text-decoration: none !important;
  transition: 0.2s ease;
}

footer a:hover,
.pw-footer a:hover {
  color: #e91683 !important;
  text-shadow: 0 0 8px rgba(233, 22, 131, 0.6);
}

/* Pour éviter que le contenu soit masqué derrière le footer */
body {
  padding-bottom: 60px !important;
}
/* ===========================================================
   ⚙️ AJUSTEMENT GATEWAY – DESCENTE DU CADRE PRINCIPAL
   =========================================================== */
.gateway,
.gateway-container,
.gw-box,
.gw-frame {
  position: relative !important;
  top: 60px !important;       /* ajuste ici la hauteur : 60px ≈ 2 cm */
  margin-top: 60px !important;
  z-index: 5 !important;
}

/* Si le titre Gateway est trop collé au haut */
.gateway h1,
.gw-title {
  margin-top: 30px !important;
}

/* ===========================================================
   🌌 SCROLLBAR PLAISIRS WORLD — VERSION PC PARFAITE
   =========================================================== */

/* ✅ Force le corps à occuper tout l’écran */
html, body {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background-attachment: fixed !important;
}

/* ✅ Main centré sans décalage */
main {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
}

/* ✅ Les blocs internes restent centrés */
.mentions-box,
.content-bg {
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto 40px auto !important;
  box-sizing: border-box !important;
}

/* ===========================================================
   🌌 SCROLLBAR UNIQUE & CENTRAGE PARFAIT — PLAISIRS WORLD
   =========================================================== */

/* ✅ Le body contrôle tout le défilement */
html, body {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background-attachment: fixed !important;
  scroll-behavior: smooth !important; /* défilement doux */
}

/* ✅ Le main devient statique (pas de scroll interne) */
main {
  width: 100% !important;
  max-width: 100vw !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
}

/* ✅ Les blocs internes sont centrés et bien espacés */
.mentions-box,
.content-bg {
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto 40px auto !important;
  box-sizing: border-box !important;
}

/* ===========================================================
   ✨ SCROLLBAR PERSONNALISÉE (DESKTOP UNIQUEMENT)
   =========================================================== */
@media screen and (min-width: 901px) {

  ::-webkit-scrollbar {
    width: 10px;
  }

  ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
  }

  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #e91683, #00ff88);
    border-radius: 10px;
    box-shadow: 0 0 6px rgba(233, 22, 131, 0.6);
    transition: all 0.3s ease;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ff5dc1, #00ffa0);
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
  }

  * {
    scrollbar-color: #e91683 rgba(255, 255, 255, 0.05);
    scrollbar-width: thin;
  }
}
/* ===========================================================
   🌸 BOUTON D’ACCUEIL — VERSION PC (compacte et élégante)
   =========================================================== */

.btn-home,
button.btn-home,
a.btn-home {
  display: inline-block;
  background: linear-gradient(90deg, #e91683, #ff5dc1);
  color: #fff !important;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  text-align: center;
  padding: 10px 22px;               /* Taille naturelle */
  border-radius: 30px;
  border: none;
  outline: none;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(233, 22, 131, 0.4);
  transition: all 0.3s ease;
  position: relative;
  z-index: 50;

  width: auto !important;           /* ✅ Empêche toute extension */
  min-width: 140px;                 /* ✅ Taille mini propre */
  max-width: 260px;                 /* ✅ Taille maxi pour cohérence */
  margin: 10px auto;                /* ✅ Centrage */
}

/* 🌈 Effet lumineux au survol */
.btn-home:hover {
  background: linear-gradient(90deg, #ff5dc1, #00ffcc);
  box-shadow: 0 0 14px rgba(233, 22, 131, 0.7),
              0 0 24px rgba(0, 255, 136, 0.4);
  transform: scale(1.05);
}

/* ===========================================================
   🌍 CORRECTION GLOBALE – SUPPRESSION DES DOUBLES SCROLLBARS
   =========================================================== */

/* Le body gère le seul vrai défilement */
html, body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
  max-width: 100vw !important;
}

/* Empêche les conteneurs internes de défiler séparément */
main, .center, .content-section, .mentions-box, .content-bg, .auth-container {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* Petits ajustements pour l’équilibre visuel */
body {
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  scroll-behavior: smooth !important;
}

.portal-title, h1, h2 {
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: unset !important;
}

.portal-title span {
  display: inline;
  position: relative;
  z-index: 10;
}

/* 🌍 Ajustement taille et position planète centrale */
.center-planet {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
  margin: 500px auto 40px auto !important;  /* Espace avant et après */
  z-index: 20 !important;
  width: 100% !important;
}

.center-planet img.planet-img {
  display: block !important;
  width: 750px !important;      /* 🌟 Taille agrandie */
  height: 750px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  box-shadow: 0 0 60px rgba(233,22,131,0.6),
              0 0 120px rgba(0,255,136,0.3) !important;
  transform: none !important;
  animation: none !important;
}