/*
================================================================
 RALLUMONS LES ÉTOILES — MENU GALACTIQUE
 Version intégrable dans /cdn/rle-galaxy-menu.css
================================================================
*/

:root{
  --rle-menu-z:2147483000;
  --rle-orbit:min(42vw,520px);
  --rle-orbit-outer:min(62vw,760px);
  --inclinaison-galaxie:8deg;
  --inclinaison-planete:14deg;
  --rle-font-scale:1.1;
}

.galaxy-menu{
  position:fixed;
  inset:0;

  width:100vw;
  height:100dvh;

  margin:0;
  padding:0;

  z-index:var(--rle-menu-z);
  overflow:hidden;
  isolation:isolate;
  display:block;

  color:#fff;
  background:
    radial-gradient(ellipse at center,rgba(17,27,58,.90) 0%,rgba(7,11,24,.90) 42%,rgba(2,4,11,.90) 82%);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .55s ease,visibility .55s ease;
}

.galaxy-menu.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.galaxy-menu.is-leaving{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* Fond étoilé */
.galaxy-menu::before,
.galaxy-menu::after{
  content:"";
  position:absolute;
  inset:-50%;
  z-index:-2;
  pointer-events:none;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.75) 0 1px,transparent 1.5px),
    radial-gradient(circle,rgba(140,180,255,.45) 0 1px,transparent 1.5px);
  background-size:170px 170px,310px 310px;
  opacity:.28;
  animation:rle-dust 150s linear infinite;
}
.galaxy-menu::after{
  background-size:230px 230px,420px 420px;
  opacity:.12;
  animation-duration:220s;
  animation-direction:reverse;
}
@keyframes rle-dust{to{transform:rotate(360deg)}}

/* Galaxie principale */
.galaxy-space{
  position:absolute;

  left:50%;
  top:50%;

  width:min(100vw,100dvh);
  height:min(100vw,100dvh);

  margin:0;
  padding:0;

  transform:
    translate(-50%,-50%)
    rotateX(var(--inclinaison-galaxie));

  transform-origin:center center;

  transform-style:preserve-3d;

  animation:none;

  transition:
    transform 1.7s cubic-bezier(.16,1,.3,1),
    opacity .65s ease;
}
@keyframes rle-galaxy-spin{
  from{
    transform:
      translate(-50%,-50%)
      rotateX(var(--inclinaison-galaxie))
      rotateZ(0deg);
  }

  to{
    transform:
      translate(-50%,-50%)
      rotateX(var(--inclinaison-galaxie))
      rotateZ(360deg);
  }
}

.galaxy-menu.system-open .galaxy-space{
  animation-play-state:paused;

  transform:
    translate(-50%,-50%)
    rotateX(var(--inclinaison-galaxie))
    scale(3.8);

  opacity:0;
  pointer-events:none;
}

.galaxy-menu.is-open:not(.system-open) .galaxy-space{
  animation:rle-galaxy-spin 420s linear infinite;
}

.galaxy-space::before,
.galaxy-space::after{
  content:"";
  position:absolute;
  inset:8%;
  border-radius:50%;
  background:repeating-radial-gradient(ellipse at center,
    transparent 0 5%,
    rgba(150,180,255,.035) 6% 8%,
    transparent 9% 14%);
  filter:blur(8px);
  transform:rotate(25deg) scaleX(1.6);
}
.galaxy-space::after{
  transform:rotate(-35deg) scaleX(1.7) scaleY(.8);
  opacity:.65;
}

/* Centre galactique */
.galaxy-core{
  position:absolute;
  left:50%;
  top:50%;
  width:17%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#dce7ff 8%,rgba(150,180,255,.5) 20%,rgba(80,100,180,.12) 48%,transparent 70%);
  box-shadow:0 0 40px #aabfff,0 0 110px rgba(130,160,255,.4);
}

/* Étoiles = rubriques */
.galaxy-star{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--size);
  height:var(--size);
  padding:0;
  border:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
  transform:translate(-50%,-50%);
  z-index:10;
  animation:rle-star-pulse 4.5s ease-in-out infinite alternate;
}
.galaxy-star i{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 5px #fff,0 0 14px #cbdcff,0 0 30px rgba(120,160,255,.55);
}
@keyframes rle-star-pulse{
  from{opacity:.55;scale:.8}
  to{opacity:1;scale:1.25}
}
.galaxy-star span{
  position:absolute;
  left:calc(100% + 14px);
  top:50%;
  transform:
   translateX(var(--label-shift-x,0px))
   translateY(calc(-50% + var(--label-shift-y,0px)))
   rotateX(calc(var(--inclinaison-galaxie) * -1))
   rotateZ(0deg);
  transform-origin:left center;
  display:block;
  max-width:min(28vw,240px);
  white-space:nowrap;
  line-height:1.1;
  overflow-wrap:normal;
  hyphens:none;
  font-size:clamp(
   calc(10px * var(--rle-font-scale)),
   calc(.82vw  * var(--rle-font-scale)),
   calc(14px * var(--rle-font-scale))
  );
  letter-spacing:.14em;
  text-transform:uppercase;
  text-align:left;
  color:rgba(235,241,255,.82);
  text-shadow:0 0 8px rgba(160,190,255,.9),0 0 20px rgba(100,140,255,.45);
  animation:none;
}

.galaxy-menu.is-open:not(.system-open) .galaxy-star span{
  animation:rle-star-label-counter-spin 240s linear infinite;
}

.galaxy-star span.label-flip{
  left:auto;
  right:calc(100% + 14px);
  transform-origin:right center;
  text-align:right;
}

@keyframes rle-star-label-counter-spin{ 
  from{
   transform:
    translateX(var(--label-shift-x,0px))
    translateY(calc(-50% + var(--label-shift-y,0px)))
    rotateX(calc(var(--inclinaison-galaxie) * -1))
    rotateZ(0deg);
  }
  to{
   transform:
    translateX(var(--label-shift-x,0px))
    translateY(calc(-50% + var(--label-shift-y,0px)))
    rotateX(calc(var(--inclinaison-galaxie) * -1))
    rotateZ(-360deg);
  }
}

.galaxy-menu.system-open .galaxy-star span{
 animation-play-state:paused;
}

/* Système planétaire */
.planetary-system{
  position:absolute;

/*  inset: 0; */
  top:50%;
  left:50%;

/*
  width:100%;
  height:100%;
*/
  width:100vw;
  height:100dvh;

  margin:0;
  padding:0;

  /*transform:none;*/
  transform:translate(-50%,-50%);
  transform-origin:center center;

  overflow:visible;

  opacity:0;
  pointer-events:none;

  transition:opacity .7s ease;
}
.galaxy-menu.system-open .planetary-system{
  opacity:1;
  pointer-events:auto;
}

/* neutralise les styles globaux sur la classe .active
  (ex fond vert sur .planet-orbit active */

.galaxy-menu .planet-orbit.active{
 background: transparent !important;
 color:inherit !important;
}

/* Soleil / Accueil */
.system-sun{
  position:absolute;
  left:50%;
  top:50%;
  width:clamp(90px,10vw,140px);
  aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.1);
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff 0,#dce7ff 10%,#9ab5ff 28%,#465b91 55%,#11182c 76%);
  box-shadow:0 0 40px rgba(210,225,255,.9),0 0 120px rgba(100,150,255,.45);
  transition:transform 1.15s cubic-bezier(.16,1,.3,1);
}
.galaxy-menu.system-open .system-sun{
  transform:translate(-50%,-50%) scale(1);
}

.system-home{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#fff;
  text-decoration:none;
}
.home-star{
  font-size:clamp(28px,4vw,52px);
  line-height:1;
  text-shadow:0 0 8px #fff,0 0 20px #b7caff,0 0 45px rgba(130,170,255,.8);
  transition:transform .35s ease;
}
.system-home:hover .home-star,
.system-home:focus-visible .home-star{transform:scale(1.2)}
.home-label{
  position:absolute;
  top:calc(100% + 12px);
  white-space:nowrap;
  font-size:calc(11px * var(--rle-font-size));
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(235,241,255,.9);
  text-shadow:0 0 8px rgba(150,180,255,.9);
}
#system-title{
  position:absolute;
  left:50%;
  top:calc(100% + 38px);
  transform:translateX(-50%);
  white-space:nowrap;
  font-size:calc(10px * var(--rle-font-size));
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(210,225,255,.7);
}

/* Orbites */
.planet-orbit{
  position:absolute;

  left:50%;
  top:50%;

  width:var(--rle-orbit);
  height:var(--rle-orbit);

  margin:0;

  border:1px solid rgba(190,210,255,.17);
  border-radius:50%;

  transform:
    translate(-50%,-50%)
    scale(.1);
/*
    rotateX(var(--inclinaison-planete))
*/

  transform-origin:center center;

  opacity:0;

  transition:
    transform 1.15s cubic-bezier(.16,1,.3,1),
    opacity .6s ease;

  --orbit-radius:calc(var(--rle-orbit) / 2);
  --orbit-spin-duration:180s;
}

.planet-orbit-outer{
  width:var(--rle-orbit-outer);
  height:var(--rle-orbit-outer);

  --orbit-radius:calc(var(--rle-orbit-outer) / 2);
  --orbit-spin-duration:260s;

}

.planet-orbit.active{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
/* rotate(var(--inclinaison-planete)) */
  animation:rle-orbit-spin var(--orbit-spin-duration) linear infinite;
}

.planet-orbit-outer.active{
 animation-duration:138s;
}

@keyframes rle-orbit-spin{
 from{transform:translate(-50%,-50%) rotate(0deg) scale(1);}
 to{transform:translate(-50%,-50%) rotate(360deg) scale(1);}

}

/* =========================================================
   PLANÈTES
   L'orbite tourne, mais la planète + son texte restent lisibles
   ========================================================= */

/* =========================================================
   PLANÈTES
   ========================================================= */

.planet{
  position:absolute;

  left:50%;
  top:50%;

  width:16px;
  height:16px;

  margin:0;
  padding:0;

  border:0;
  border-radius:50%;

  background:#fff;

  box-shadow:
    0 0 8px #fff,
    0 0 20px rgba(150,190,255,.9),
    0 0 35px rgba(100,150,255,.5);

  text-decoration:none;

  /*
   * Positionnement sur la circonférence.
   */
  transform:
    rotate(var(--angle))
    translateX(var(--orbit-radius))
    rotate(calc(var(--angle) * -1))
    scale(0);

  transform-origin:center center;

  transition:
    transform 1s cubic-bezier(.16,1,.3,1);

  z-index:20;
}

.planet-orbit.active .planet{
  transform:
    rotate(var(--angle))
    translateX(var(--orbit-radius))
    rotate(calc(var(--angle) * -1))
    scale(1);
}


/*
   Quand l'orbite est active.
*/
.planet-orbit.active .planet{
  transform:
    rotate(var(--angle))
    translateX(var(--orbit-radius))
    rotate(calc(var(--angle) * -1))
    scale(1);
}


/* =========================================================
   LABEL DE PLANÈTE
   ========================================================= */

/* =========================================================
   LABELS DES PLANÈTES
   Le label tourne en sens inverse de l'orbite.
   ========================================================= */

/* =========================================================
   LABELS DES PLANÈTES
   Le texte reste toujours horizontal et lisible.
   ========================================================= */

.planet span{
  position:absolute;

  left:calc(100% + 14px);
  top:50%;

  transform:
    translateX(var(--label-shift-x,0px))
    translateY(calc(-50% + var(--label-shift-y,0px)))
    rotate(0deg);

  transform-origin:left center;

  display:block;
  width:max-content;

  white-space:normal;
  line-height:1.2;

  overflow-wrap:break-word;
  word-break:normal;
  hyphens:auto;

  max-width:min(34vw,320px);
  min-width:10ch;

  font-size:clamp(9px,.72vw,12px);
  letter-spacing:.1em;

  color:rgba(235,240,255,.9);

  text-shadow:
    0 0 8px rgba(150,180,255,.8),
    0 0 18px rgba(100,140,255,.45);

  /*
   * IMPORTANT :
   * le texte reste cliquable.
   */
  pointer-events:auto;

  z-index:30;

  /*
   * L'orbite tourne dans un sens.
   * Le label tourne dans l'autre à exactement
   * la même vitesse.
   *
   * Ainsi :
   * - la planète se déplace sur l'orbite ;
   * - le texte se déplace avec elle ;
   * - mais le texte reste horizontal.
   */
  animation:
    rle-planet-label-counter-spin
    var(--orbit-spin-duration)
    linear
    infinite;
}

/*
============================================================
 LABEL PLANÈTE — CONTRE-ROTATION
============================================================

L'orbite fait :
    rotate(0deg) → rotate(360deg)

Le texte fait :
    rotate(0deg) → rotate(-360deg)

Les deux animations ont exactement la même durée.
Le déplacement orbital est donc conservé mais
l'orientation du texte reste horizontale.
*/

@keyframes rle-planet-label-counter-spin{
  from{
    transform:
      translateX(var(--label-shift-x,0px))
      translateY(calc(-50% + var(--label-shift-y,0px)))
      rotate(0deg);
  }

  to{
    transform:
      translateX(var(--label-shift-x,0px))
      translateY(calc(-50% + var(--label-shift-y,0px)))
      rotate(-360deg);
  }
}

@keyframes rle-planet-label-counter-spin-flip{
  from{
    transform:
      translateX(var(--label-shift-x,0px))
      translateY(calc(-50% + var(--label-shift-y,0px)))
      rotate(0deg);
  }

  to{
    transform:
      translateX(var(--label-shift-x,0px))
      translateY(calc(-50% + var(--label-shift-y,0px)))
      rotate(-360deg);
  }
}

/*
  Si le label est placé à gauche de la planète.
*/

.planet span.label-flip{
  left:auto;
  right:calc(100% + 14px);

  transform:
    translateX(var(--label-shift-x,0px))
    translateY(calc(-50% + var(--label-shift-y,0px)))
    rotate(0deg);

  transform-origin:right center;
  text-align:right;

  animation-name:rle-planet-label-counter-spin-flip;
}


/* Navigation */
.galaxy-back,
.galaxy-close{
  position:absolute;
  top:28px;
  min-height:46px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  background:rgba(3,6,16,.55);
  backdrop-filter:blur(12px);
  color:#fff;
  cursor:pointer;
  z-index:100;
}
.galaxy-back{
  left:28px;
  padding:0 16px;
  opacity:0;
  pointer-events:none;
}
.galaxy-close{
  right:28px;
  width:46px;
  padding:0;
  font-size:calc(25px * var(--rle-font-scale));
}
.galaxy-menu.system-open .galaxy-back{
  opacity:1;
  pointer-events:auto;
}

/* Le bouton de header peut être supprimé : le logo ouvre le menu. */
.galaxy-trigger{cursor:pointer}

/* Responsive */
@media(max-width:1024px){
  :root{--rle-orbit:48vw;--rle-orbit-outer:72vw}
  .galaxy-space{width:120vw;height:120vw}
  .planet-orbit{ --orbit-radius:calc(var(--rle-orbit) / 2); }
  .planet-orbit-outer{ --orbit-radius:calc(var(--rle-orbit-outer) / 2); }
  .planet span{max-width:24vw;font-size:calc(10px * var(--rle-font-scale))}
}
@media(max-width:700px){
  :root{--rle-orbit:68vw;--rle-orbit-outer:92vw}
  .galaxy-space{width:145vw;height:145vw}
  .galaxy-star span{max-width:40vw;font-size:calc(9px * var(--rle-font-scale));letter-spacing:.07em}
  .planet-orbit{ --orbit-radius:calc(var(--rle-orbit) / 2); }
  .planet-orbit-outer{ --orbit-radius:calc(var(--rle-orbit-outer) / 2); }
  .planet{width:11px;height:11px}
  .planet span{max-width:44vw;font-size:calc(9px * var(--rle-font-scale));letter-spacing:.05em}
  .galaxy-back,.galaxy-close{top:16px;min-height:40px}
  .galaxy-back{left:16px}
  .galaxy-close{right:16px;width:40px}
}
@media(max-width:420px){
  .galaxy-star span{max-width:48vw;font-size:calc(8px * var(--rle-font-scale))}
  .planet span{max-width:52vw;font-size:calc(8px * var(--rle-font-scale))}
  .planet-orbit{ --orbit-radius:calc(var(--rle-orbit) / 2); }
  .planet-orbit-outer{ --orbit-radius:calc(var(--rle-orbit-outer) / 2); }
}
.galaxy-star:focus-visible,.planet:focus-visible,.galaxy-back:focus-visible,.galaxy-close:focus-visible,.system-home:focus-visible{
  outline:2px solid #fff;
  outline-offset:5px;
}
@media(prefers-reduced-motion:reduce){
  .galaxy-menu *,
  .galaxy-menu::before,
  .galaxy-menu::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* =========================================================
   GARANTIE DE CENTRAGE DU SYSTÈME
   ========================================================= */

.galaxy-menu > .planetary-system{
  position:absolute;

/*
  inset:0;
*/
  left:50%;
  top:50%;

 /*
  width:100%;
  height:100%;
 */

  width:100vw;
  height:100dvh;

  transform:translate(-50%,-50%);

  transform-origin:center center;
}


/* Le soleil est exactement au centre du viewport */
.galaxy-menu .system-sun{
  left:50%;
  top:50%;
}


/* Les orbites ont exactement le même centre que le soleil */
.galaxy-menu .planet-orbit{
  left:50%;
  top:50%;
}

/* =========================================================
   ISOLATION VISUELLE DU MENU GALACTIQUE
   ========================================================= */

.galaxy-menu .system-sun{
  background:
    radial-gradient(
      circle at 35% 30%,
      #fff 0%,
      #dce7ff 10%,
      #9ab5ff 28%,
      #465b91 55%,
      #11182c 76%
    );

  border-radius:50%;
}

.galaxy-menu .planet{
  background:#fff;
  border-radius:50%;
}

.galaxy-menu a{
  color:inherit;
}

/* Garantie IOS (viewport dynamique + safe areas ) */
@supports (-webkit-touch-callout: none){
 .galaxy-menu{
   width:100%;
   height:100vh;
   height:100svh;
   height:100dvh;
   min-height:-webkit-fill-available;
 }

 .galaxy-menu > .planetary-system{
   width:100vw;
   height:100vh;
   height:100dvh;
   height:100svh;
 }

 .galaxy-back,.galaxy-close{
    top:max(16px,env(safe-area-inset-top))
 }

 .galaxy-back{
    left:max(16px,env(safe-area-inset-left))
 }
 .galaxy-close{
    right:max(16px,env(safe-area-inset-right))
 }
}