:root {
  --mv-gx:   clamp(16px, 2.2vw, 32px);
  --mv-hx:   2.5rem;
  --mv-head: 64px;
  --mv-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --mv-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --mv-shade: 14, 12, 10;
}
@media (max-width: 768px) { :root { --mv-hx: 1.5rem; } }
@media (max-width: 480px) { :root { --mv-hx: 1.2rem; } }

.mv-roll { display: inline-grid; overflow: hidden; line-height: 1.25; }
.mv-roll > span { grid-area: 1 / 1; transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.mv-roll > span + span { transform: translateY(100%); }
:is(a, button):is(:hover, :focus-visible) > .mv-roll > span:first-child { transform: translateY(-100%); }
:is(a, button):is(:hover, :focus-visible) > .mv-roll > span + span { transform: none; }

.mv-ring {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid currentColor;
  outline: 1px solid currentColor; outline-offset: -4px;
  font-family: var(--mv-mono); font-size: 0.58rem; font-weight: 400;
  letter-spacing: 0.02em; line-height: 1;
}

.mv-btn {
  display: inline-flex; align-items: center; gap: 0.7rem;
  height: 36px; padding: 0 0.95rem 0 1.05rem;
  border: 0; border-radius: 999px; background: none; cursor: pointer;
  color: var(--bone);
  outline: 1px solid currentColor; outline-offset: 0;
  font: 500 0.62rem/1 'General Sans', sans-serif;
  letter-spacing: 0.26em; text-transform: uppercase;
  transition: outline-offset 0.3s var(--mv-ease);
}
.mv-btn:is(:hover, :focus-visible) { outline-offset: 3px; }
.mv-dot {
  width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  transition: transform 0.4s 0.05s var(--mv-ease);
}
.mv-btn:is(:hover, :focus-visible) .mv-dot { transform: scale(0.55); }

.mv-cta {
  display: inline-flex; align-items: center; gap: 0.8rem;
  height: 44px; padding: 0 4px 0 1.15rem;
  border-radius: 999px;
  background: var(--bone); color: var(--soot);
  font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase; white-space: nowrap;
  transition: background 0.3s ease;
}
.mv-cta:hover { background: var(--sand); }
.mv-cta-ring {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--soot); color: var(--bone);
  font-size: 0.85rem; letter-spacing: 0;
  transition: transform 0.45s var(--mv-ease);
}
.mv-cta:hover .mv-cta-ring { transform: rotate(-45deg); }
.mv-cta--sm { height: 34px; gap: 0.6rem; padding-left: 0.95rem; font-size: 0.56rem; }
.mv-cta--sm .mv-cta-ring { width: 26px; height: 26px; font-size: 0.7rem; }

.mv-grain {
  position: absolute; inset: 0;
  pointer-events: none;
  background: url("../img/grain-sombre.webp") repeat;
  background-size: 256px 256px;
  opacity: 0.7;
}

.mv-site-head { height: calc(var(--mv-head) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) max(var(--mv-hx), env(safe-area-inset-right, 0px)) 0 max(var(--mv-hx), env(safe-area-inset-left, 0px)); }

.mv-arrive { display: none; }
.mv-arriving .mv-arrive {
  display: block;
  position: fixed; inset: 0; z-index: 220;
  pointer-events: none;
  background:
    url("../img/grain-sombre.webp") 0 0 / 256px 256px repeat,
    linear-gradient(0deg,
      rgba(var(--mv-shade), 0.72) 0%,
      rgba(var(--mv-shade), 0.22) 46%,
      rgba(var(--mv-shade), 0.32) 100%),
    var(--mv-arrive-img) center / cover no-repeat,
    var(--soot);
  animation: mv-arrive-out 0.6s ease 3s forwards;
}
@keyframes mv-arrive-out { to { opacity: 0; visibility: hidden; } }

.mv-menu {
  position: fixed; inset: 0 0 auto; z-index: 210;
  height: 100vh;
  height: 100svh;
  box-shadow: 0 50vh 0 0 var(--soot);
  display: grid; grid-template-rows: var(--mv-head) auto 1fr;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--soot);
  color: var(--bone);
  font-family: 'General Sans', sans-serif;
  visibility: hidden; opacity: 0;
  overflow: clip;
  touch-action: none;
  overscroll-behavior: contain;
}
.mv-menu :focus-visible { outline-color: var(--bone); }
.mv-menu > .mv-grain { z-index: 2; }
.mv-top {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--mv-hx);
}

.mv-bar {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  flex-wrap: wrap;
  padding: 0 var(--mv-hx) calc(clamp(14px, 2.2vh, 22px) + env(safe-area-inset-bottom, 0px));
}
.mv-bar-group {
  display: flex; align-items: center; gap: 0.6rem clamp(1.1rem, 2.4vw, 2.2rem);
  flex-wrap: wrap;
  list-style: none;
}
.mv-link {
  display: inline-flex;
  font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--bone-75);
  transition: color 0.3s ease;
}
.mv-link:hover, .mv-link:focus-visible { color: var(--bone); }
.mv-bar-group a[href^="mailto"] .mv-roll { text-transform: none; letter-spacing: 0.08em; }

.mv-cards {
  position: relative; z-index: 1;
  display: grid;
  margin: 0 0 var(--mv-gx) var(--mv-gx);
  list-style: none;
  overflow: hidden;
  user-select: none;
}
.mv-item {
  --i: 0; --shift: 0; --off: 0;
  --pos: calc((var(--i) + var(--shift)) / var(--total) + var(--off));
  grid-area: 1 / 1;
  min-width: 0; min-height: 0;
  transform: translate3d(calc(var(--pos) * 100%), 0, 0);
  transition: transform 0.75s var(--mv-ease);
}
.mv-card {
  --pad: clamp(14px, 1.4vw, 22px);
  --fs:  min(4.4vw, calc((100svh - 240px) / 8.8));
  --r: 1;
  position: relative; display: block;
  width: 100%; height: 100%;
  overflow: hidden;
  border-radius: 22px 0 0 22px;
  background: var(--soot);
  box-shadow: -22px 0 44px -16px rgba(0, 0, 0, 0.6);
  color: var(--bone);
  -webkit-tap-highlight-color: transparent;
}
.mv-card:focus-visible { outline-offset: -4px; }
.mv-card-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none; object-fit: cover;
  transform: translate3d(calc(var(--pos) * -100%), 0, 0) scale(var(--z, 1));
  transition: transform 0.75s var(--mv-ease);
  -webkit-user-drag: none;
}
.mv-cards.is-driven .mv-item,
.mv-cards.is-driven .mv-card-img { transition: none; }

.mv-shade { position: absolute; inset: 0; pointer-events: none; }
.mv-shade--hero {
  background: linear-gradient(0deg,
    rgba(var(--mv-shade), 0.72) 0%,
    rgba(var(--mv-shade), 0.22) 46%,
    rgba(var(--mv-shade), 0.32) 100%);
}
.mv-shade--strip {
  background: linear-gradient(90deg,
    rgba(var(--mv-shade), 0.62) 0%,
    rgba(var(--mv-shade), 0.30) 13%,
    rgba(var(--mv-shade), 0.20) 40%);
}
.mv-card .mv-shade--hero { opacity: 0; }
.mv-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: var(--night); opacity: 0;
  transition: opacity 0.6s var(--mv-ease);
}
.mv-cards.has-hover .mv-item:not(.is-hover) .mv-veil { opacity: 0.38; }
.mv-item.is-hover { --z: 1.035; }

.mv-card-num {
  position: absolute; top: var(--pad); left: var(--pad);
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.mv-item.is-current .mv-ring { background: var(--bone); color: var(--soot); }

.mv-card-title {
  position: absolute; left: var(--pad); bottom: var(--pad);
  font-size: var(--fs);
  font-weight: 700; line-height: 0.92;
  letter-spacing: -0.03em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--bone);
  transform-origin: 0 100%;
  transform: rotate(calc(var(--r) * -90deg)) translateY(calc(var(--r) * 100%));
}

@media (max-width: 860px) {
  .mv-bar { justify-content: flex-start; gap: 0.7rem 1.4rem; }
  .mv-bar-group { gap: 0.5rem 1rem; }
  .mv-bar-group:last-child { flex: 1 1 100%; flex-wrap: nowrap; }
  .mv-bar-group:last-child li:last-child { margin-left: auto; }
  .mv-link { letter-spacing: 0.16em; }
  .mv-cta--sm { letter-spacing: 0.18em; padding-left: 0.8rem; }
  .mv-cards { margin: 0; }
  .mv-item { transform: translate3d(0, calc(var(--pos) * 100%), 0); }
  .mv-card {
    --pad: 16px;
    --band: calc((100svh - 150px) / var(--total));
    --fs: min(9vw, calc(var(--band) * 0.46));
    --r: 0;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -16px 34px -14px rgba(0, 0, 0, 0.6);
  }
  .mv-card-img { transform: translate3d(0, calc(var(--pos) * -100%), 0); }
  .mv-shade--strip {
    background: linear-gradient(180deg,
      rgba(var(--mv-shade), 0.62) 0%,
      rgba(var(--mv-shade), 0.30) 13%,
      rgba(var(--mv-shade), 0.20) 40%);
  }
  .mv-card-num { left: auto; right: var(--pad); top: calc((var(--band) - 1.9rem) / 2); }
  .mv-card-title { top: calc((var(--band) - var(--fs) * 0.92) / 2); bottom: auto; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mv-item, .mv-card-img, .mv-veil, .mv-roll > span { transition: none; }
}