/* ---------------- Nav ----------------
   Ciblée par son id et non par « nav » : le menu plein écran contient lui
   aussi un <nav> (la liste des liens), qui héritait sinon de position: fixed. */
#main-nav {
    position: fixed;
    top: 15px;
    bottom: auto;
    left: 0;
    right: 0;
    z-index: 200;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 1rem 2rem;
    margin: 15px 15px;

    background: rgba(0, 0, 0, 0.5);
    border-radius: 3rem;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(255, 255, 250, 0.43);

    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

@media (min-width:1024px){
    #main-nav {
      position: fixed;
      top: 0;
      bottom: auto;
      left: 0;
      right: 0;
      z-index: 200;

      display: flex;
      justify-content: space-between;
      align-items: center;

      padding: 1.75rem 4rem /*4rem*/; 
      margin: 0px 0px;

      border-radius: 0;
      border: none;
      border-bottom: 1px solid var(--white);

      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);

      /* -webkit-mask-image: linear-gradient(to bottom, black 20%, transparent 100%);
      mask-image: linear-gradient(to bottom, black 20%, transparent 100%); */
    }
}
.logo svg{
    height: 30px;
    fill: var(--white);
}

/* MENU button — always visible ; devient une bulle glassmorphism quand la nav est rétractée */
.nav-menu-btn {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  cursor: pointer;
  color: var(--white);

  padding: 0;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease,
    backdrop-filter 0.4s ease, padding 0.4s ease;
}

/* Icône burger : ligne / "Menu" / ligne, empilés — taille fixe pour une
   animation fiable (le texte ne doit jamais influencer la largeur des lignes) */
.nav-menu-btn .hamburger {
  position: relative;
  width: 46px;
  height: 27px;
}

.nav-menu-btn .hamburger__line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--white);
  border-radius: 2px;
  transform-origin: 50% 50%;
  transition: top 0.4s ease, transform 0.4s ease;
}
.nav-menu-btn .hamburger__line:first-child { top: 0; }
.nav-menu-btn .hamburger__line:last-child  { top: 26px; }

.nav-menu-btn .menu-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  font-size: 0.72rem;
  font-weight: 100;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Open state : les deux lignes se rejoignent au centre et forment une croix,
   le texte s'efface */
.nav-menu-btn.open .hamburger__line:first-child {
  top: 13px;
  transform: rotate(45deg);
}
.nav-menu-btn.open .hamburger__line:last-child {
  top: 13px;
  transform: rotate(-45deg);
}
.nav-menu-btn.open .menu-label {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
}

/* La navbar se fond dans le menu plein écran plutôt que de rester en superposition */
#main-nav {
  transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease,
    backdrop-filter 0.4s ease, padding 0.4s ease, margin 0.4s ease;
}
body.menu-open #main-nav {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ---------------- Nav rétractée au scroll ---------------- */
/* La nav complète disparaît totalement ; ne reste qu'une petite bulle
   glassmorphism à droite, contenant le bouton menu. */
#main-nav.nav-compact {
  padding: 0.7rem 1.25rem;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Le logo devient lui aussi une bulle glassmorphism une fois la nav rétractée */
#main-nav .logo {
  display: inline-flex;
  align-items: center;

  padding: 0;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease,
    backdrop-filter 0.4s ease, padding 0.4s ease;
}
#main-nav .logo svg {
  transition: height 0.4s ease;
}

#main-nav.nav-compact .logo {
  padding: 12px 18px;
  background: rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 250, 0.43);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
#main-nav.nav-compact .logo svg {
  height: 22px;
}

#main-nav.nav-compact .nav-menu-btn {
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 250, 0.43);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ---------------- Bouton retour en haut (glassmorphism) ---------------- */
.back-to-top {
  position: fixed;
  right: 1.25rem;
  /* La nav mobile est en haut : le bouton peut coller au bas de l'écran. */
  bottom: 1.25rem;
  z-index: 190;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  padding: 0;

  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 250, 0.43);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  color: var(--white);
  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s,
    background 0.3s ease, border-color 0.3s ease;
}

.back-to-top svg {
  width: 18px;
  height: 18px;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s,
    background 0.3s ease, border-color 0.3s ease;
}

.back-to-top:hover {
  background: rgba(0, 0, 0, 0.75);
  border-color: rgba(255, 255, 250, 0.69);
}

/* masqué pendant que le menu plein écran est ouvert */
body.menu-open .back-to-top {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .back-to-top {
    bottom: 2.5rem;
    right: 2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: opacity 0.2s ease, visibility 0s;
  }
}

/* ---------------- Menu plein écran ---------------- */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(6rem, 20vh, 8rem) 1.75rem clamp(3rem, 10vh, 5rem);
  overflow-y: auto;
  overflow-x: hidden;
  /* Défilement possible sur un écran très bas, mais sans barre visible */
  scrollbar-width: none;

  background: rgba(0, 0, 0, 0.98);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.02);
  transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s linear 0.6s;
}

.menu-overlay::-webkit-scrollbar {
  display: none;
}

.menu-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
  transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s;
}

/* Couche de fond de l'overlay : rogne l'étoile pour qu'elle ne compte jamais
   dans la hauteur défilable du menu. */
.menu-overlay__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.menu-overlay__star {
  position: absolute;
  top: 50%;
  right: clamp(-14vw, -6vw, -2vw);
  z-index: 0;

  width: clamp(280px, 42vw, 640px);
  color: var(--white);
  opacity: 0;

  transform: translateY(-50%) rotate(-12deg);
  transform-origin: center center;
  pointer-events: none;

  filter: drop-shadow(0 0 90px rgba(200, 80, 255, 0.22));
  transition: opacity 0.9s ease 0.15s;
}

.menu-overlay.open .menu-overlay__star {
  opacity: 0.14;
}

@keyframes menu-star-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -14px; }
}

@media (prefers-reduced-motion: no-preference) {
  .menu-overlay.open .menu-overlay__star {
    animation: menu-star-float 6s ease-in-out infinite;
  }
}

@media (max-width: 767px) {
  .menu-overlay__star {
    right: -18vw;
    width: clamp(220px, 60vw, 380px);
  }
}

.menu-overlay__inner {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}

.menu-overlay__links {
  display: flex;
  flex-direction: column;
  gap: clamp(0.3rem, 1.4vw, 0.8rem);
}

.menu-overlay__link {
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 2.2rem);

  text-decoration: none;
  color: var(--gray-light);

  opacity: 0;
  transform: translateY(24px);
  transition: color 0.35s ease, opacity 0.5s ease, transform 0.5s ease;
}

.menu-overlay.open .menu-overlay__link:nth-child(1) { transition-delay: 0.10s; }
.menu-overlay.open .menu-overlay__link:nth-child(2) { transition-delay: 0.17s; }
.menu-overlay.open .menu-overlay__link:nth-child(3) { transition-delay: 0.24s; }
.menu-overlay.open .menu-overlay__link:nth-child(4) { transition-delay: 0.31s; }

.menu-overlay.open .menu-overlay__link {
  opacity: 1;
  transform: translateY(0);
}

.menu-overlay__num {
  font-family: var(--font-base);
  font-weight: 300;
  font-size: clamp(0.95rem, 1.6vw, 1.3rem);
  letter-spacing: 0.02em;
  color: var(--gray);
  min-width: 2.2ch;
}

.menu-overlay__label {
  display: inline-block;
  font-family: var(--font-base);
  font-weight: var(--fw-heading);
  font-size: clamp(2.1rem, 7vw, 5.2rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  transition: transform 0.4s ease;
}

.menu-overlay__link:hover,
.menu-overlay__link:focus-visible {
  color: var(--white);
}

.menu-overlay__link:hover .menu-overlay__num,
.menu-overlay__link:focus-visible .menu-overlay__num {
  color: var(--white);
}

.menu-overlay__link:hover .menu-overlay__label,
.menu-overlay__link:focus-visible .menu-overlay__label {
  transform: translateX(0.35em);
  background: var(--gradient-nebulight);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.menu-overlay__footer {
  position: relative;
  z-index: 1;

  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;

  padding-top: 2rem;
  border-top: 1px solid var(--border);

  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease 0.36s, transform 0.5s ease 0.36s;
}

.menu-overlay.open .menu-overlay__footer {
  opacity: 1;
  transform: translateY(0);
}

.menu-overlay__contact {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.menu-overlay__contact span {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-light);
  margin-bottom: 0.25rem;
}

.menu-overlay__contact a,
.menu-overlay__socials a {
  color: var(--white);
  text-decoration: none;
  font-size: 0.95rem;
}

.menu-overlay__socials {
  display: flex;
  gap: 1.5rem;
}

.menu-overlay__socials a {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-light);
  transition: color 0.3s ease;
}

.menu-overlay__socials a:hover {
  color: var(--white);
}

@media (min-width: 1024px) {
  .menu-overlay {
    /* Marges verticales relatives à la hauteur d'écran : à 9rem fixes, le
       contenu débordait de 30px sur un écran de 720px et le menu défilait. */
    padding: clamp(6.5rem, 14vh, 9rem) 4rem clamp(2.5rem, 6vh, 4rem);
  }
}

/* Écran d'ordinateur peu haut (portable 1366×768, 1280×720) : les quatre
   intitulés à 83px de haut ne laissaient aucune marge. */
@media (min-width: 1024px) and (max-height: 800px) {
  .menu-overlay__label {
    font-size: clamp(2.1rem, 5.4vw, 4.2rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-overlay,
  .menu-overlay__link,
  .menu-overlay__label,
  .menu-overlay__footer {
    transition: none !important;
  }
}

.nav-bar {
  display: flex;
  flex-direction: column;
  gap: 15px;
  
}