/* ===========================================================
   📱 STYLE MOBILE FINAL – PLAISIRS WORLD (v4 stable fluide)
   =========================================================== */
@media screen and (max-width: 768px) {

  /* --- Réinitialisation générale --- */
  html, body {
    height: auto !important;
    margin: 0;
    padding: 0;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: radial-gradient(1000px 700px at 50% 40%, #0a1022 0%, #020611 70%, #000 100%);
    color: #fff;
    font-family: "Poppins", sans-serif;
    display: block !important;
  }

  main {
    display: block !important;
    overflow: visible !important;
    margin-bottom: 80px !important;
  }

  /* --- Suppression des animations lourdes --- */
  .sun, .moon, .bg-stars, .symbols, .text-orbit, .rings, .orbit {
    display: none !important;
    animation: none !important;
  }

  /* --- Boutons principaux (plus petits et centrés) --- */
  .top-buttons-mobile,
  .top-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 15px auto 25px auto !important;
    width: 100%;
    z-index: 10;
  }

  .btn-home, .bubble-btn, .lang-btn {
    display: block !important;
    font-size: 14px !important;
    padding: 8px 14px !important;
    border-radius: 25px !important;
    background: linear-gradient(90deg, #e91683, #ff5dc1);
    color: #fff !important;
    text-decoration: none;
    width: 75% !important;
    max-width: 260px !important;
    margin: 6px auto !important;
    text-align: center;
    box-shadow: 0 0 10px rgba(233,22,131,0.4);
    transition: 0.3s;
  }

  .btn-home:hover, .bubble-btn:hover {
    transform: scale(1.05);
  }

  /* --- Terre / logo central --- */
  .center-planet {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 10px auto 20px auto !important;
    position: relative !important;
    transform: none !important;
  }

  .center-planet img {
    width: 240px !important;
    height: 240px !important;
    border-radius: 50%;
    box-shadow: 0 0 40px rgba(233,22,131,0.6);
  }

  /* --- Masquer la phrase sur la Terre --- */
  .center-planet h2,
  .center-planet p,
  .text-orbit {
    display: none !important;
  }

  /* --- Planètes (centrées et espacées) --- */
  .planet-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 26px !important;
    justify-items: center !important;
    align-items: center !important;
    width: 92% !important;
    margin: 30px auto 20px auto !important;
    position: relative !important;
    z-index: 5;
  }

  .planet-grid img {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(233,22,131,0.6);
    transition: 0.3s;
  }

  .planet-grid a:hover img {
    transform: scale(1.08);
    box-shadow: 0 0 14px rgba(0,255,136,0.9);
  }

  .planet-grid span {
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
  }

  /* --- Bloc pub / partenaires --- */
  .block,
  .partner-carousel,
  .pub-section {
    width: 90% !important;
    margin: 30px auto 25px auto !important;
    padding: 14px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow: 0 0 10px rgba(233,22,131,0.25) !important;
  }

  /* --- Footer multi-lignes fluide --- */
  footer, .pw-footer {
    position: relative !important;
    bottom: 0 !important;
    width: 100% !important;
    text-align: center !important;
    background: rgba(0,0,0,0.55);
    padding: 20px 15px !important;
    color: #fff !important;
    font-size: 13px !important;
    border-top: 1px solid rgba(255,255,255,0.15);
    margin-top: -200px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    line-height: 1.4;
    flex-wrap: wrap !important;
  }

  footer a {
    color: #ff5dc1;
    text-decoration: none;
  }

  footer a:hover {
    text-decoration: underline;
  }

}
/* ===========================================================
   📱 BARRE FIXE EN HAUT – BOUTONS COMPACTS
   =========================================================== */
@media screen and (max-width: 768px) {

  /* --- Barre fixe principale --- */
  .mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(10, 16, 34, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  }

  /* --- Boutons à l’intérieur de la barre --- */
  .mobile-header .btn-home,
  .mobile-header .lang-btn,
  .mobile-header .bubble-btn {
    font-size: 13px !important;
    padding: 6px 10px !important;
    border-radius: 22px !important;
    background: linear-gradient(90deg, #e91683, #ff5dc1);
    color: #fff !important;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    border: none;
    box-shadow: 0 0 6px rgba(233,22,131,0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .mobile-header .btn-home:hover,
  .mobile-header .lang-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(233,22,131,0.5);
  }

  /* --- Décale tout le contenu sous la barre --- */
  body {
    padding-top: 60px !important;
  }
}
/* ===========================================================
   🖥️ / 📱 VISIBILITÉ BOUTONS PC ET MOBILE
   =========================================================== */

/* --- Version PC --- */
@media screen and (min-width: 769px) {
  .mobile-header,
  .top-buttons-mobile,
  .btn-gsm {
    display: none !important; /* cache tout ce qui est mobile */
  }

  .btn-pc,
  .top-buttons-pc {
    display: flex !important; /* affiche les boutons PC */
  }
}

/* ===========================================================
   🚫 CORRECTION FINALE – CACHER LES BOUTONS PC SUR MOBILE
   =========================================================== */
@media screen and (max-width: 768px) {
  /* Cache tous les boutons PC connus */
  .pw-top-buttons,
  .top-buttons-pc,
  .btn-pc,
  .desktop-only {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* Affiche la barre mobile */
  .mobile-header {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(10,16,34,0.9);
    backdrop-filter: blur(10px);
    z-index: 9999 !important;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px;
  }
}
/* ===========================================================
   📱 BARRE GSM FIXE + UNIVERS DÉFILANTS
   =========================================================== */
@media screen and (max-width: 768px) {

  /* --- Barre fixe du haut --- */
  .mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(10,16,34,0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.15);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 8px 5px;
    z-index: 9999;
    box-shadow: 0 3px 8px rgba(0,0,0,0.4);
  }

  .mobile-header .btn-gsm {
    background: linear-gradient(90deg, #e91683, #ff5dc1);
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.25s ease;
    box-shadow: 0 0 8px rgba(233,22,131,0.4);
  }

  .mobile-header .btn-gsm:hover {
    transform: scale(1.05);
    box-shadow: 0 0 12px rgba(233,22,131,0.6);
  }

  /* --- Barre défilante des univers --- */
  .mobile-univers-bar {
    position: fixed;
    top: 58px; /* juste en dessous de la barre du haut */
    left: 0;
    width: 100%;
    background: rgba(0,0,0,0.7);
    overflow-x: auto;
    white-space: nowrap;
    padding: 8px 0;
    display: flex;
    gap: 12px;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    z-index: 9998;
  }

  .mobile-univers-bar a {
    display: inline-block;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 20px;
    transition: 0.3s;
  }

  .mobile-univers-bar a:hover {
    background: rgba(233,22,131,0.3);
  }

  /* --- décale le reste du contenu sous les barres --- */
  body {
    padding-top: 110px !important;
  }
}
/* ===========================================================
   🌍 FORCAGE D’AFFICHAGE DE LA PLANÈTE WORLD SUR MOBILE
   =========================================================== */
@media screen and (max-width: 768px) {

  /* ✅ Réaffiche le conteneur central */
  .center,
  .center-planet,
  .planet-main,
  .earth {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    margin: 110px auto 40px !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 20 !important;
  }

  /* ✅ Terre World (le globe) */
  .earth-core {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 25 !important;
    width: 220px !important;
    height: 220px !important;
    border-radius: 50% !important;
    background: url('https://upload.wikimedia.org/wikipedia/commons/9/97/The_Earth_seen_from_Apollo_17.jpg') center/cover no-repeat !important;
    box-shadow: 0 0 40px rgba(233,22,131,0.5),
                0 0 80px rgba(0,255,136,0.3) !important;
    animation: none !important;
    transform: none !important;
  }

  /* ✅ Cache bien les autres planètes */
  .orbit,
  .planet:not(.earth),
  .rings,
  .planet-icon,
  .planet-row,
  .right-planets,
  .sun,
  .moon {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}


/* ===========================================================
   📱 AJUSTEMENT VISUEL BLOCS PUB (Mobile) — VERSION ALIGNÉE ET CENTRÉE
   =========================================================== */
@media screen and (max-width: 768px) {

  /* Conteneur principal des blocs */
  .left-info {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    margin: 100px auto 0 !important; /* 🔽 décale vers le bas */
    padding: 0 0 60px 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Chaque bloc pub */
  .left-info .block {
    width: 104vw !important;          /* 🔧 largeur ajustée pour ne plus déborder */
    max-width: 340px !important;     /* 🔒 limite sur grands téléphones */
    box-sizing: border-box !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    margin: 990px auto 20px 4px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 0 10px rgba(0,0,0,0.25) !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  /* Titre et texte */
  .left-info .block h2 {
    font-size: 15px !important;
    margin-bottom: 8px !important;
    color: #ff5dc1 !important;
  }

  .left-info .block p {
    font-size: 13px !important;
    line-height: 1.45em !important;
    color: #ddd !important;
    margin: 0 auto !important;
  }

  /* Icônes / partenaires */
  .partner-carousel,
  .partner-track {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 10px !important;
  }

  .partner-carousel img,
  .partner-track img {
    width: 50px !important;
    height: 50px !important;
    border-radius: 10px !important;
    object-fit: cover !important;
  }

  /* Footer parfaitement collé en bas */
  footer {
    margin-top: 40px !important;
    position: relative !important;
    bottom: 0 !important;
    width: 100% !important;
  }
}


/* ===========================================================
   🌍 REPOSITIONNEMENT ABSOLU ET CENTRAL DE LA PLANÈTE (MOBILE)
   =========================================================== */
@media screen and (max-width: 768px) {

  /* Neutralise tout positionnement hérité */
  .center-planet,
  .planet-img {
    position: static !important;
    float: none !important;
    clear: both !important;
  }

  /* Conteneur centré */
.center-planet {
  display: flex !important;
  justify-content: center !important;   /* ← assure le centrage horizontal */
  align-items: center !important;
  flex-direction: column !important;
  width: 50% !important;                /* ← pleine largeur pour bien centrer */
  margin: -950px auto 120px auto !important;  /* ← espace au-dessus (40px à ajuster selon tes pubs) */
  padding: 0 !important;
  text-align: center !important;
  z-index: 5 !important;
  position: relative !important;
  transform: none !important;
}

  /* Image du globe */
  .center-planet img.planet-img {
    display: block !important;
    width: 220px !important;
    height: 220px !important;
    margin: 0 auto !important;
    border-radius: 50% !important;
    object-fit: contain !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    box-shadow: 0 0 40px rgba(233, 22, 131, 0.5),
                0 0 80px rgba(0, 255, 136, 0.3) !important;
  }

  /* Supprime toute animation ou contrainte d’un parent */
  .planet,
  .right-planets,
  .orbit,
  .rings {
    display: none !important;
  }
}
/* Empêche le défilement horizontal, mais garde le scroll vertical */
html, body {
  overflow-x: hidden;   /* bloque le scroll horizontal */
  overflow-y: auto;     /* permet le scroll vertical normal */
  width: 100%;
  max-width: 100vw;
  position: relative;
}
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}

/* ======= Masquer la phrase sous la planète uniquement sur mobile ======= */
@media (max-width: 768px) {
  .planet-text,
  .planet-text p {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}
/* =====================================
   FOOTER MOBILE - PLAISIRS WORLD
   ===================================== */
@media (max-width: 768px) {

  /* Structure globale mobile */
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    -webkit-overflow-scrolling: touch !important;
  }

  main {
    flex: 1 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* Footer */
  footer {
    position: relative !important;
    z-index: 5 !important;
    width: 100% !important;
    background: rgba(0, 0, 0, 0.45) !important;
    border-top: 1px solid rgba(0, 255, 204, 0.2);
    text-align: center !important;
    padding: 18px 10px !important;
    margin-top: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .footer-center {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    max-width: 100% !important;
  }

  .footer-center a {
    color: #00ffcc !important;
    font-size: 13px !important;
    text-decoration: none !important;
    flex: 1 1 33% !important;
    max-width: 33% !important;
    text-align: center !important;
    line-height: 1.4em !important;
  }

  .footer-center a:nth-child(3n) {
    flex-basis: 100% !important;
  }

  /* Cache les icônes trop proches du bas si besoin */
  .footer-left {
    display: none !important;
  }
}

@media screen and (max-width: 768px) {
  /* Force le vrai centrage visuel de la planète */
  .center-planet {
    position: relative !important;
    left: 28% !important;             /* place au centre */
    transform: translateX(-50%) !important;  /* corrige le centrage exact */
    margin-top: -850px !important;      /* espace sous les pubs */
    margin-bottom: 120px !important;
    width: auto !important;
    text-align: center !important;
    z-index: 5 !important;
  }

  .center-planet img.planet-img {
    display: block !important;
    margin: 0 auto !important;        /* centre l’image elle-même */
    width: 220px !important;
    height: 220px !important;
  }
}

box-shadow: 0 0 20px rgba(233, 22, 131, 0.2),
            0 0 40px rgba(0, 255, 136, 0.1) !important;
@media screen and (max-width: 768px) {
  /* Supprime l'effet de halo / cadre autour de la planète */
  .center-planet img.planet-img {
    box-shadow: none !important;        /* enlève complètement le halo */
    border: none !important;            /* enlève les bordures si présentes */
  }
}

/* ====== POPUP BIENVENUE - PLAISIRS WORLD ====== */
@media (max-width: 768px) {
  #welcome-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: radial-gradient(circle at center, #000 60%, #111);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.6s ease;
  }

  #welcome-popup.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .welcome-box {
    text-align: center;
    color: #00ffcc;
    animation: popup-fade 1.2s ease;
  }

  .welcome-logo {
    width: 140px;
    height: auto;
    margin-bottom: 20px;
  }

  .welcome-box h2 {
    font-size: 22px;
    color: #fff;
  }

  .welcome-box h2 span {
    color: #e91683;
  }

  #enter-btn {
    background: linear-gradient(90deg, #e91683, #00ffcc);
    border: none;
    color: #fff;
    font-size: 16px;
    padding: 12px 28px;
    border-radius: 25px;
    margin-top: 25px;
    cursor: pointer;
    transition: transform 0.3s;
  }

  #enter-btn:active {
    transform: scale(0.95);
  }

  @keyframes popup-fade {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
  }
}

/* ====== Masquer la planète en bas uniquement sur mobile ====== */
@media (max-width: 768px) {
  .center-planet {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}
@media (max-width: 768px) {
  .center-planet {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;        /* 💥 supprime toute hauteur résiduelle */
    margin: 0 !important;        /* 💥 enlève les marges verticales */
    padding: 0 !important;       /* 💥 supprime tout espace interne */
  }
}


/* ===== MASQUER LE POPUP SUR PC ===== */
@media (min-width: 769px) {
  #welcome-popup {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* ===== MASQUER LA BARRE DES UNIVERS GSM SUR PC ===== */
@media (min-width: 769px) {
  .mobile-univers-bar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}


/* ===========================================================
   📱 PAGES FIXES (Cookies, Mentions, CGV...) – VERSION MOBILE
   =========================================================== */
@media screen and (max-width: 768px) {

  html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100vh !important;
    display: block !important;
    margin: 0;
    padding: 0;
    background: radial-gradient(circle at center, #0a1022 0%, #020611 70%, #000 100%);
    color: #fff;
    font-family: "Poppins", sans-serif;
  }

  main {
    display: block !important;
    position: relative !important;
    width: 92% !important;
    max-width: 900px !important;
    margin: 80px auto 40px auto !important;
    padding: 20px !important;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 12px !important;
    line-height: 1.6em !important;
    font-size: 15px !important;
  }

  main h1, main h2, main h3 {
    color: #e91683 !important;
    text-align: center !important;
    margin-bottom: 15px !important;
  }

  footer, .pw-footer {
    position: relative !important;
    bottom: 0 !important;
    width: 100% !important;
    margin-top: 20px !important;
    text-align: center !important;
    background: rgba(0,0,0,0.55) !important;
    padding: 20px 10px !important;
    color: #ccc !important;
  }
}

/* ===========================================================
   📱 CENTRAGE GLOBAL DES CONTENEURS – PLAISIRS WORLD
   =========================================================== */
@media screen and (max-width: 900px) {

  html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    background: radial-gradient(circle at 50% 30%, #0a1022 0%, #000 100%) !important;
    font-family: "Poppins", sans-serif !important;
    display: block !important;
  }

  /* 🪐 Conteneur principal de chaque page */
  main,
  .center,
  .auth-container,
  .mentions-box,
  .content-wrapper,
  .container,
  .pw-section {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 90% !important;
    max-width: 900px !important;
    margin: 80px auto 80px auto !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  /* ✅ Corrige le centrage vertical sur les pages simples */
  .center > *,
  main > *,
  .auth-container > *,
  .mentions-box > * {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ✅ Supprime toute dérive horizontale due à des box-shadow ou padding excessifs */
  * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ✅ Footer toujours centré */
  footer,
  .pw-footer {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    margin: 0 auto !important;
    padding: 15px 10px !important;
    width: 100% !important;
  }

}
/* ===========================================================
   📱 CORRECTION CENTRAGE BLOCS INTERNES – PLAISIRS WORLD
   =========================================================== */
@media screen and (max-width: 900px) {

  /* Conteneur global (garde centré) */
  main,
  .mentions-box,
  .auth-container,
  .content-wrapper {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    padding: 0 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* 🔧 Les 2 sous-blocs internes (ex: .content-bg, .auth-card) */
  .content-bg,
  .auth-card {
    width: 90% !important;             /* largeur fluide */
    max-width: 380px !important;       /* limite visuelle propre */
    margin: 0 auto 25px auto !important; /* centre horizontalement */
    padding: 20px 18px !important;
    box-sizing: border-box !important;
    display: block !important;
    position: relative !important;
    left: 0 !important;
  }

  /* Supprime tout décalage horizontal dû à un héritage */
  .content-bg *,
  .auth-card * {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Empêche tout débordement latent */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}
/* ===========================================================
   📱 VERSION OPTIMISÉE — CENTRAGE + LECTURE MOBILE
   =========================================================== */
@media screen and (max-width: 900px) {

  /* Corps global */
  html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Poppins", sans-serif !important;
    background: radial-gradient(circle at 50% 30%, #0a1022 0%, #000 100%) !important;
  }

  /* Conteneur principal */
  main,
  .mentions-box,
  .auth-container,
  .content-wrapper {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 20px 5% !important;
    box-sizing: border-box !important;
  }

  /* Les deux sous-blocs internes (cookies, connexion, etc.) */
  .content-bg,
  .auth-card {
    width: 100% !important;
    max-width: 95% !important;
    margin: 0 auto 25px auto !important;
    padding: 25px 18px !important;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 14px;
    text-align: left !important;
    box-sizing: border-box !important;
  }

  /* Améliore lisibilité texte */
  .content-bg p,
  .auth-card p,
  .content-bg h2,
  .auth-card h2 {
    line-height: 1.7 !important;
    font-size: 1rem !important;
    color: #fff !important;
    margin-bottom: 10px !important;
  }

  /* Centre visuel global */
  h1, h2, h3 {
    text-align: center !important;
  }

  /* Footer */
  footer,
  .pw-footer {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    padding: 12px 10px !important;
    width: 100% !important;
  }
}

/* ===========================================================
   📱 FIX FINAL — CENTRAGE & LARGEUR LISIBLE BLOCS INTERNE
   =========================================================== */
@media screen and (max-width: 900px) {

  /* Conteneur principal cookies / mentions / etc. */
  .mentions-box,
  .content-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  /* 🧱 Blocs de texte (gauche + droite) */
  .content-bg {
    width: 96% !important;           /* pleine largeur fluide */
    margin: 0 auto 30px auto !important; /* bien centré */
    padding: 22px 16px !important;   /* confort de lecture */
    background: rgba(0, 0, 0, 0.55) !important;
    border-radius: 14px !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.35) !important;
    box-sizing: border-box !important;
  }

  /* ✅ Texte lisible */
  .content-bg h2 {
    font-size: 1.1rem !important;
    line-height: 1.5em !important;
    margin-bottom: 8px !important;
  }

  .content-bg p {
    font-size: 0.95rem !important;
    line-height: 1.65em !important;
    margin: 0 0 12px 0 !important;
    text-align: justify !important;
  }

  /* ✅ Supprime le léger débordement horizontal */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* ✅ Footer reste bien centré */
  footer, .pw-footer {
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: column !important;
    width: 100% !important;
  }
}

/* ===========================================================
   🩷 CORRECTION FINALE – TEXTE ADAPTÉ ET LISIBLE SUR MOBILE
   =========================================================== */
@media screen and (max-width: 900px) {

  /* 🧩 Déverrouille toute contrainte de largeur ou overflow */
  * {
    max-width: 100% !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  html, body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  /* 📦 Assure le bon comportement des blocs principaux */
  main, .mentions-box, .content-bg, .auth-container, .block {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 auto 20px auto !important;
    padding: 15px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  /* 🔤 Forcer le texte à se replier et s’adapter */
  p, a, span, li, div, h1, h2, h3, h4 {
    word-break: break-word !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.5 !important;
  }

  /* 🔠 Taille de texte fluide et lisible */
  h1 {
    font-size: clamp(1.2rem, 4vw, 1.8rem) !important;
  }
  h2 {
    font-size: clamp(1rem, 3.5vw, 1.4rem) !important;
  }
  p, a, span, li {
    font-size: clamp(0.85rem, 3vw, 1rem) !important;
  }
}
/* ===========================================================
   📱 CENTRAGE PARFAIT DU BOUTON ACCUEIL + ESPACE VISUEL
   =========================================================== */
@media screen and (max-width: 900px) {
  .btn-home,
  a.btn-home,
  button.btn-home {
    display: inline-block !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;   /* ✅ centrage exact */
    margin-top: 25px !important;              /* espace au-dessus */
    margin-bottom: 35px !important;           /* espace sous le texte */
    background: linear-gradient(90deg, #e91683, #ff5dc1) !important;
    color: #fff !important;
    font-family: "Poppins", sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    padding: 10px 26px !important;
    border-radius: 30px !important;
    border: none !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: 0 0 10px rgba(233, 22, 131, 0.4) !important;
    cursor: pointer !important;
    width: auto !important;
    max-width: 80% !important;                /* empêche le débordement */
  }

  /* 🌈 Survol doux */
  .btn-home:hover {
    background: linear-gradient(90deg, #ff5dc1, #00ffcc) !important;
    box-shadow: 0 0 18px rgba(233, 22, 131, 0.7),
                0 0 24px rgba(0, 255, 136, 0.4) !important;
    transform: translateX(-50%) scale(1.05) !important;
  }
}

/* ===========================
   🔧 FIX GLOBAL MOBILE — CENTRAGE & DÉBORDEMENT
   =========================== */

/* Supprime tout scroll horizontal */
html, body {
  overflow-x: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Centre tout le contenu */
main, .mentions-box, .content-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* Fixe les blocs qui débordent (notamment les bordures vertes) */
.content-bg {
  margin-left: auto !important;
  margin-right: auto !important;
  width: 90% !important;
  border: none !important;
  box-shadow: 0 0 25px rgba(0,0,0,0.5) !important;
  background: rgba(0,0,0,0.55) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

/* S'assure que le bouton Accueil reste bien centré */
.btn-home {
  display: block !important;
  margin: 20px auto 30px auto !important;
  text-align: center !important;
  width: fit-content !important;
}

/* Évite que des SVG créent un débordement invisible */
svg {
  max-width: 100% !important;
  height: auto !important;
  overflow: hidden !important;
}

/* 🌌 Bouton "Choisissez votre monde" — design ajusté */
.choose-world {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative;      /* ✅ important pour pouvoir bouger le bouton */
  top: 40px;               /* 🔽 fait descendre le bouton visuellement */
  margin-bottom: 5px;
  z-index: 10;
}


.btn-world {
  background: linear-gradient(45deg, #00ff88, #00c0ff);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  padding: 14px 35px;
  border-radius: 30px;
  box-shadow: 0 0 15px rgba(0, 255, 136, 0.4);
  transition: all 0.3s ease;
  text-align: center;
}

.btn-world:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.6);
}

/* 📱 Version mobile */
@media (max-width: 900px) {
  .choose-world {
    margin-top: 35px;   /* 🔽 un peu plus bas sur GSM */
    margin-bottom: 0px; /* 🔼 colle bien au bloc suivant */
  }
  .btn-world {
    font-size: 0.95rem;
    width: 88%;
    padding: 11px 0;
  }
}
@media (max-width: 900px) {

  /* Supprime tout overflow masquant sur mobile */
  html, body, main, .center, .gateway-container {
    overflow: visible !important;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative !important;
  }

  /* Resserre le conteneur des planètes et centre tout */
  .gateway-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 25px !important;
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
    text-align: center !important;
    z-index: 10 !important;
  }

  /* Réaffiche toutes les planètes */
  .gateway-container img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 110px !important;
    height: 110px !important;
    margin: 10px auto !important;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(233, 22, 131, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .gateway-container img:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(233, 22, 131, 0.6);
  }

  /* Corrige le texte des titres sous les planètes */
  .gateway-container p, .gateway-container span, .gateway-container h3 {
    color: #fff !important;
    font-weight: 600 !important;
    text-align: center !important;
    margin-top: 6px !important;
    margin-bottom: 10px !important;
  }
}

/* 🧱 Empêche les images du carrousel de dépasser sur mobile */
@media screen and (max-width: 1024px) {
  .carousel,
  .carousel-inner {
    overflow: hidden !important;
    position: relative !important;
  }

  .carousel-item {
    flex-shrink: 0;
    width: 100% !important;
    height: auto !important;
  }

  .carousel img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    max-width: 100% !important;
    display: block;
  }

  /* Correction du décalage lors des transitions */
  .carousel-item-next,
  .carousel-item-prev,
  .carousel-item.active {
    transform: translateX(0) !important;
  }
}

/* 🧩 Fix bordure manquante sur certaines planètes (mobile) */
.menu-categories {
  border: 2px solid rgba(0, 255, 120, 0.5);
  border-radius: 14px;
  padding: 10px 6px;
  margin: 10px auto 15px;
  box-shadow: 0 0 10px rgba(0, 255, 120, 0.4);
  background: linear-gradient(180deg, rgba(10,10,10,0.9), rgba(20,20,20,0.95));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: 3;
}

/* 🛡 Empêche le header vide de masquer le cadre */
header {
  min-height: 0 !important;
  display: none !important;
}

/* 📏 Garantit que le cadre reste visible même si le contenu est vide */
body[class^="page-"] .menu-categories {
  overflow: visible !important;
}