/* ============================================================================
   MOON CAPITAL — Décor de fond, navigation, pied de page
   ========================================================================= */

/* ── Décor global ───────────────────────────────────────────────────────── */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Colonnes de repère, très discrètes — signature « studio ». */
.backdrop__grid {
  position: absolute;
  inset: 0;
  max-width: var(--maxw);
  margin-inline: auto;
  background-image: repeating-linear-gradient(
    90deg,
    var(--hairline) 0 1px,
    transparent 1px calc(100% / 6)
  );
  opacity: .32;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 62%, transparent 96%);
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 62%, transparent 96%);
}

/* Halo doré haut de page. */
.backdrop__glow {
  position: absolute;
  top: -34vmax;
  left: 50%;
  translate: -50% 0;
  width: 92vmax;
  height: 70vmax;
  background: radial-gradient(closest-side, rgba(var(--c-accent), calc(.13 * var(--k-accent))), rgba(var(--c-accent), calc(.045 * var(--k-accent))) 46%, transparent 72%);
  filter: blur(12px);
}
.backdrop__glow--low {
  top: auto;
  bottom: -46vmax;
  left: 14%;
  width: 66vmax;
  height: 52vmax;
  background: radial-gradient(closest-side, rgba(var(--c-accent), calc(.07 * var(--k-accent))), transparent 70%);
}

.page { position: relative; z-index: 1; }

/* ── La lune ────────────────────────────────────────────────────────────── */
.moon {
  position: absolute;
  display: grid;
  place-items: center;
  pointer-events: none;
  isolation: isolate;
}

.moon__glow {
  position: absolute;
  inset: -52%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(var(--c-accent), calc(.22 * var(--k-accent) * var(--moon-glow-k))),
    rgba(var(--c-accent), calc(.07 * var(--k-accent) * var(--moon-glow-k))) 42%, transparent 70%);
  filter: blur(8px);
  animation: moon-breathe 11s var(--ease-io) infinite;
}
@keyframes moon-breathe {
  0%, 100% { opacity: .85; scale: 1; }
  50%      { opacity: 1;  scale: 1.055; }
}

.moon__body {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    /* micro-relief */
    radial-gradient(circle at 62% 30%, rgba(var(--c-moon-hot), .16) 0 3%, transparent 3.6%),
    radial-gradient(circle at 74% 52%, rgba(var(--c-shadow), calc(.30 * var(--k-shadow))) 0 5%, transparent 5.8%),
    radial-gradient(circle at 55% 66%, rgba(var(--c-shadow), calc(.26 * var(--k-shadow))) 0 7%, transparent 7.6%),
    radial-gradient(circle at 80% 34%, rgba(var(--c-shadow), calc(.22 * var(--k-shadow))) 0 3.2%, transparent 3.8%),
    radial-gradient(circle at 45% 44%, rgba(var(--c-shadow), calc(.18 * var(--k-shadow))) 0 4%, transparent 4.6%),
    /* éclairage principal, en haut à droite */
    radial-gradient(circle at 72% 24%,
      rgba(var(--c-moon-hot), .96) 0%,
      rgba(var(--c-moon-lit), .82) 7%,
      rgba(var(--c-accent), calc(.52 * var(--k-accent))) 17%,
      rgba(var(--c-moon-mid), .28) 30%,
      rgba(var(--c-moon-shade), .55) 48%,
      rgba(var(--c-moon-core), .94) 70%),
    radial-gradient(circle at 50% 50%, var(--moon-base-1), var(--moon-base-2) 72%);
  box-shadow:
    inset -14px -18px 54px rgba(var(--c-shadow), calc(.78 * var(--k-shadow))),
    inset 10px 12px 46px rgba(var(--c-accent), calc(.07 * var(--k-accent)));
}

/* Liseré lumineux sur le limbe. */
.moon__body::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 200deg,
    transparent 0deg,
    rgba(var(--c-moon-lit), .85) 42deg,
    rgba(var(--c-accent), calc(.5 * var(--k-accent))) 92deg,
    transparent 150deg);
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 1.6px), #000 calc(50% - 1.6px));
  mask: radial-gradient(circle, transparent 0 calc(50% - 1.6px), #000 calc(50% - 1.6px));
  opacity: .9;
}

/* Anneau orbital. */
.moon__orbit {
  position: absolute;
  inset: -16%;
  border-radius: 50%;
  border: 1px solid rgba(var(--c-accent), calc(.16 * var(--k-accent)));
  animation: orbit-spin 34s linear infinite;
}
.moon__orbit--2 {
  inset: -30%;
  border-color: rgba(var(--c-accent), calc(.09 * var(--k-accent)));
  animation-duration: 58s;
  animation-direction: reverse;
}
@keyframes orbit-spin { to { transform: rotate(360deg); } }

/* Position dans le hero : sphère entière, à droite, jamais sur le texte. */
/* La lune se lève sur l'horizon de la surface, à droite, sous le relevé. */
.moon--hero {
  top: 25rem;
  right: -5rem;
  width: clamp(11rem, 19vw, 21rem);
  opacity: .92;
}

/* Lune du CTA final : contre-poids visuel, à gauche. */
.moon--cta {
  bottom: -6rem;
  left: -6rem;
  width: clamp(12rem, 22vw, 22rem);
  opacity: .55;
}

/* Petite lune décorative en pied de page. */
.moon--footer {
  bottom: -18rem;
  left: 50%;
  translate: -50% 0;
  width: clamp(20rem, 44vw, 38rem);
  opacity: .45;
}

/* ── Navigation ─────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-nav);
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), backdrop-filter var(--dur) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav[data-stuck='true'] {
  background: rgba(var(--c-sink), calc(.72 * var(--k-sink)));
  border-bottom-color: var(--line-soft);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.nav__progress {
  position: absolute;
  inset: auto 0 -1px 0;
  height: 1px;
  transform-origin: 0 50%;
  scale: var(--progress, 0) 1;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent), var(--accent-soft));
  transition: scale .08s linear;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 4.6rem;
}

.brand { display: inline-flex; align-items: center; gap: .68rem; }

/* Monogramme blanc, sans conteneur : c'est la signature de la marque. */
.brand__mark {
  position: relative;
  display: block;
  width: 2.05rem;
  flex: none;
  color: var(--ink);
}
.brand__mark svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 10px var(--mark-glow));
  transition: filter var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.brand:hover .brand__mark svg {
  filter: drop-shadow(0 2px 14px var(--mark-glow-hover));
}

/* Révélation du monogramme au chargement : balayage de gauche à droite. */
.brand__mark--reveal svg {
  -webkit-mask-image: linear-gradient(90deg, #000 0 42%, transparent 58%);
  mask-image: linear-gradient(90deg, #000 0 42%, transparent 58%);
  -webkit-mask-size: 240% 100%;
  mask-size: 240% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  animation: mark-wipe 1.15s var(--ease-out) .18s both;
}
@keyframes mark-wipe {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; opacity: .2; }
  to   { -webkit-mask-position: 0% 0;   mask-position: 0% 0;   opacity: 1; }
}
.brand__word {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
  white-space: nowrap;
}
.brand__word span { color: var(--ink-3); font-weight: 400; }

.nav__links { display: flex; align-items: center; gap: .1rem; }
.nav__link {
  position: relative;
  padding: .5rem .66rem;
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  color: var(--ink-2);
  letter-spacing: -.004em;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: .66rem; right: .66rem; bottom: .28rem;
  height: 1px;
  background: var(--accent);
  scale: 0 1;
  transform-origin: 0 50%;
  transition: scale var(--dur) var(--ease-out);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after,
.nav__link[aria-current='true']::after { scale: 1 1; }
.nav__link[aria-current='true'] { color: var(--accent-soft); }

.nav__actions { display: flex; align-items: center; gap: .45rem; }

.nav__burger {
  display: none;
  width: 2.6rem; height: 2.6rem;
  place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
}
.nav__burger span {
  display: block;
  width: 1.05rem; height: 1px;
  background: var(--ink);
  transition: translate var(--dur) var(--ease-out), rotate var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav__burger span + span { margin-top: 5px; }
.nav__burger[aria-expanded='true'] span:nth-child(1) { translate: 0 6px; rotate: 45deg; }
.nav__burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded='true'] span:nth-child(3) { translate: 0 -6px; rotate: -45deg; }

/* Menu mobile */
.mobile-menu {
  position: fixed;
  inset: 4.6rem 0 auto;
  z-index: calc(var(--z-nav) - 1);
  padding: 1.25rem var(--gutter) 2rem;
  background: rgba(var(--c-sink), calc(.97 * var(--k-sink)));
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: .2rem;
  opacity: 0;
  visibility: hidden;
  translate: 0 -8px;
  transition: opacity var(--dur) var(--ease-out), translate var(--dur) var(--ease-out), visibility var(--dur);
}
.mobile-menu[data-open='true'] { opacity: 1; visibility: visible; translate: 0 0; }
.mobile-menu a {
  padding: .95rem .25rem;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 550;
  letter-spacing: -.02em;
}
.mobile-menu a:hover { color: var(--accent-bright); }
.mobile-menu .btn { margin-top: 1.25rem; }

/* ── Pied de page ───────────────────────────────────────────────────────── */
.footer {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  padding-top: clamp(3.5rem, 2rem + 5vw, 6rem);
}

.footer__top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, .8fr));
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.footer__pitch { max-width: 32ch; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.65; }

.footer__col-title {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1.05rem;
}
.footer__col ul { display: grid; gap: .68rem; }
.footer__col a { font-size: var(--t-sm); color: var(--ink-2); }
.footer__col a:hover { color: var(--accent-soft); }

.footer__disclaimer {
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: rgba(var(--c-veil), calc(.02 * var(--k-veil)));
  font-size: var(--t-xs);
  line-height: 1.65;
  color: var(--ink-3);
  max-width: 90ch;
}
.footer__disclaimer strong { color: var(--ink-2); font-weight: 550; }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(2rem, 1rem + 2vw, 3rem);
  padding-block: 1.6rem;
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-xs);
  color: var(--ink-3);
}
.footer__legal { display: flex; gap: 1.35rem; flex-wrap: wrap; }
.footer__legal a:hover { color: var(--ink-2); }

/* Immense mot-marque en filigrane. */
.footer__wordmark {
  position: relative;
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 15vw, 15rem);
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: .82;
  text-align: center;
  color: transparent;
  background: linear-gradient(180deg, rgba(var(--c-accent), calc(.19 * var(--k-accent))), rgba(var(--c-accent), 0) 82%);
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}