/* ==========================================================================
   Mage Studio · Barre de navigation (accueil, About, blog)
   Fixée en haut de l'écran. Le bouton menu ouvre un bloc juste en dessous.
   ========================================================================== */

.navbar {
  inset: 0 0 auto 0;
  flex-direction: column-reverse;
  align-items: center;
  gap: 8px;
  padding: 20px 20px 0;
  pointer-events: none;
}
.navbar > * { pointer-events: auto; }

.nav-bloc.nav-bloc-wide {
  position: relative;
  max-width: 480px;
  padding: 14px 14px 14px 20px;
  corner-shape: squircle;
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Bouton menu : deux traits qui forment une croix une fois ouvert */
.nav-burger {
  position: relative;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #ffffff14;
  cursor: pointer;
  transition: background .3s;
  corner-shape: squircle;
}
.nav-burger:hover { background: #ffffff26; }
.nav-burger span {
  position: absolute;
  left: 11px;
  width: 14px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--white);
  transition: transform .35s cubic-bezier(.65, 0, .2, 1), top .35s cubic-bezier(.65, 0, .2, 1);
}
.nav-burger span:first-child { top: 14px; }
.nav-burger span:last-child { top: 20px; }
.navbar.is-menu-open .nav-burger span:first-child { top: 17px; transform: rotate(45deg); }
.navbar.is-menu-open .nav-burger span:last-child { top: 17px; transform: rotate(-45deg); }

/* Bloc du menu, sous la barre */
.nav-menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 20px;
  width: 100%;
  max-width: 480px;
  padding: 24px 20px 20px;
  border-radius: 16px;
  background: #252525e6;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  opacity: 0;
  transform: translateY(-12px) scale(.98);
  transform-origin: top center;
  transition: opacity .25s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
  corner-shape: squircle;
}
.nav-menu.is-open { opacity: 1; transform: none; }
.nav-menu[hidden] { display: none; }
.nav-menu-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nav-menu-label {
  margin-bottom: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: #ffffff59;
}
.nav-menu a:not(.btn) {
  font-size: 14px;
  line-height: 1.4;
  color: #ffffffb3 !important;
  text-decoration: none;
  transition: color .2s;
}
.nav-menu a:not(.btn):hover,
.nav-menu a[aria-current="page"] { color: var(--white) !important; }
.nav-menu-cta {
  grid-column: 1 / -1;
  text-align: center;
}

@media screen and (max-width: 479px) {
  .nav-menu { grid-template-columns: 1fr 1fr; }
}

/* Sélecteur de langue (aussi utilisé dans le hero de l'accueil) */
.mage-hero-lang {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.mage-hero-lang a { color: #ffffff59 !important; transition: color .3s; }
.mage-hero-lang a.is-active { color: var(--white) !important; }
.mage-hero-lang a:not(.is-active):hover { color: #ffffffa6 !important; }
.mage-hero-lang-dot {
  width: 3px;
  height: 3px;
  border-radius: 1px;
  background: #ffffff59;
}


/* Lien pas encore disponible (Mage Fast) : visible mais non cliquable, avec un badge */
.link-soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
  color: #ffffff59;
  cursor: default;
}
.soon-tag {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--low-opacity-white);
  font-size: 11px;
  line-height: 1.4;
  color: #ffffffb3;
}