:root {
  --lime: #ccff00;
  --dark: #1e1e1e;
  --white: #ffffff;
  /* 1 unité = 1px de la maquette (1360px de large), mis à l'échelle de l'écran */
  --u: calc(min(100vw, 1920px) / 1360);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", Helvetica, Arial, sans-serif;
  color: var(--dark);
  background: var(--white);
  overflow-x: hidden;
}
body.no-scroll {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}
img {
  display: block;
  max-width: 100%;
}

/* ---------- Navigation ---------- */
.nav {
  background: var(--dark);
  color: var(--lime);
  height: 90px;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-size: 18px;
  position: sticky;
  top: 0;
  z-index: 50;
}
.nav-left,
.nav-right {
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav-left {
  justify-self: start;
}
.nav-right {
  justify-self: end;
  gap: 40px;
}
.nav a {
  display: inline-block;
  padding: 3px 8px;
  border: 2px solid transparent;
}
.nav a.active {
  border-color: var(--lime);
}
.nav-logo {
  font-weight: 900;
  letter-spacing: 0.02em;
}
.nav-icon {
  display: flex;
}
.nav-icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--lime);
}

/* Texte étiré verticalement (effet Helvetica condensé) */
.stretch {
  display: inline-block;
  font-weight: 700;
  letter-spacing: -0.04em;
  transform-origin: top left;
  pointer-events: none;
}

/* ---------- Bouton ---------- */
.btn {
  display: inline-block;
  background: var(--white);
  color: var(--dark);
  font-weight: 700;
  font-size: calc(26 * var(--u));
  padding: calc(18 * var(--u)) 0;
  text-align: center;
  width: 100%;
  max-width: calc(650 * var(--u));
  transition:
    background 0.2s,
    color 0.2s;
}
.btn:hover {
  background: var(--dark);
  color: var(--lime);
}

/* ======================================================
   HOMEPAGE
   ====================================================== */
.hero {
  background: var(--lime);
  padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(30 * var(--u));
  position: relative;
}
.hero-line {
  font-weight: 900;
  font-size: calc(92 * var(--u));
  line-height: 1.08;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  white-space: nowrap;
}
.hero-line .small {
  font-size: calc(18 * var(--u));
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
}
.hero-line .small.right {
  text-align: right;
}
.hero-line .small.contact-small {
  margin-left: calc(30 * var(--u));
}
.hero-line .spacer {
  flex: 1;
}
.hero-handle {
  position: absolute;
  top: calc(16 * var(--u));
  right: calc(20 * var(--u));
  font-size: calc(18 * var(--u));
}

.about {
  position: relative;
  min-height: calc(820 * var(--u));
  display: flex;
  align-items: flex-end;
}
.dots {
  display: flex;
  gap: calc(26 * var(--u));
}
.dot {
  transition: background 0.35s ease;
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  border-radius: 50%;
  background: var(--lime);
}
.dot.dark {
  background: var(--dark);
}
.about .dots {
  position: absolute;
  top: calc(28 * var(--u));
  left: calc(26 * var(--u));
}
.about-title {
  position: absolute;
  top: calc(20 * var(--u));
  right: calc(20 * var(--u));
  text-align: right;
  font-weight: 700;
  font-size: calc(34 * var(--u));
  line-height: 1.15;
}
/* « About me » est vert par défaut (maquette) ; au survol, le vert passe sur la ligne visée */
.about-title span {
  transition: color 0.3s ease;
}
.about-title span:first-child,
.about-title span:hover {
  color: var(--lime);
}
.about-title:hover span:not(:hover) {
  color: var(--dark);
}
.about-portrait {
  width: calc(720 * var(--u));
  margin-right: calc(
    -260 * var(--u)
  ); /* la partie droite de l'image est blanche */
}
.about-quote {
  font-size: calc(90 * var(--u));
  font-weight: 900;
  align-self: center;
  margin-top: calc(172 * var(--u));
  margin-left: calc(20 * var(--u));
}
.about-text {
  margin-left: auto;
  width: calc(660 * var(--u));
  padding: 0 calc(20 * var(--u)) calc(30 * var(--u)) 0;
  font-size: calc(22 * var(--u));
  line-height: 1.3;
}
.about-text h2 {
  font-size: calc(92 * var(--u));
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.about-text p + p {
  margin-top: calc(28 * var(--u));
}
.hl {
  background: var(--lime);
  padding: 0 2px;
}

.portfolio {
  display: flex;
  position: relative;
}
.portfolio-box {
  background: var(--lime);
  width: calc(100% - 80 * var(--u));
  padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(24 * var(--u));
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.portfolio-title {
  font-size: calc(230 * var(--u));
  line-height: 1;
  transform: scale(0.7, 2);
  white-space: nowrap;
  margin-bottom: calc(260 * var(--u));
}
.portfolio-reg {
  position: absolute;
  right: calc(20 * var(--u));
  top: calc(30 * var(--u));
  width: calc(260 * var(--u));
  height: calc(710 * var(--u));
  border: calc(46 * var(--u)) solid var(--dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: calc(210 * var(--u));
}
.portfolio-reg span {
  transform: scaleY(1.5);
  display: inline-block;
  line-height: 0.73;
}
.portfolio-text {
  font-size: calc(22 * var(--u));
  line-height: 1.3;
  max-width: calc(950 * var(--u));
  margin-bottom: calc(52 * var(--u));
}
.portfolio-text p + p {
  margin-top: calc(28 * var(--u));
}
.portfolio-side {
  width: calc(80 * var(--u));
  position: relative;
}
.portfolio-side .dots {
  flex-direction: column;
  gap: calc(20 * var(--u));
  padding: calc(20 * var(--u)) 0 0 calc(18 * var(--u));
}
.portfolio-side::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(45 * var(--u));
  background: var(--dark);
}

.contact {
  background: var(--dark);
  color: var(--lime);
  display: flex;
  overflow: hidden;
}
.contact-photo {
  width: calc(510 * var(--u));
  flex-shrink: 0;
}
.contact-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contact-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}
.contact-title {
  font-size: calc(330 * var(--u));
  line-height: 1;
  transform: scale(0.6, 1.9);
  margin: 0 0 0 var(--contact-shift, 0px);
  white-space: nowrap;
  height: calc(560 * var(--u));
}
.contact-info {
  display: flex;
  align-items: center;
  gap: calc(24 * var(--u));
  margin: calc(20 * var(--u)) 0 calc(30 * var(--u)) calc(70 * var(--u));
}
.contact-info a {
  display: flex;
  transition: transform 0.2s;
}
.contact-info a:hover {
  transform: scale(1.1);
}
.contact-info svg {
  width: calc(70 * var(--u));
  height: calc(70 * var(--u));
  stroke: var(--lime);
}
.contact-info .infos {
  border-left: 2px solid var(--lime);
  padding: calc(20 * var(--u)) 0 calc(20 * var(--u)) calc(26 * var(--u));
  margin-left: calc(30 * var(--u));
  font-size: calc(24 * var(--u));
  line-height: 1.35;
}

/* ======================================================
   BRANDING
   ====================================================== */
.branding-hero {
  position: relative;
  height: calc(620 * var(--u));
  overflow: hidden;
  padding: calc(20 * var(--u));
}
.branding-title {
  font-size: calc(400 * var(--u));
  line-height: 1;
  transform: scale(0.44, 2.05);
  margin-top: calc(-90 * var(--u));
  white-space: nowrap;
  position: relative;
  z-index: 1;
}
.branding-reg {
  position: absolute;
  left: calc(930 * var(--u));
  top: calc(25 * var(--u));
  width: calc(180 * var(--u));
  height: calc(590 * var(--u));
  border: solid var(--lime);
  border-width: calc(78 * var(--u)) calc(36 * var(--u));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lime);
  font-weight: 700;
  font-size: calc(230 * var(--u));
}
.branding-reg span {
  transform: translateX(var(--r-shift, 0px)) scale(0.57, 1.7);
  display: inline-block;
  line-height: 0.73;
}
.branding-tag {
  position: absolute;
  left: var(--tag-left, calc(880 * var(--u)));
  top: calc(298 * var(--u));
  z-index: 2;
  font-size: calc(63.5 * var(--u));
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.06em;
}
.back-arrow {
  position: absolute;
  right: 0;
  top: calc(45 * var(--u));
  background: var(--lime);
  width: calc(186 * var(--u));
  height: calc(72 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.back-arrow svg {
  width: calc(120 * var(--u));
  height: calc(50 * var(--u));
}

.devis {
  display: flex;
  align-items: flex-start;
}
.devis-img {
  flex: 1;
  padding: calc(0 * var(--u));
}
.devis-box {
  background: var(--dark);
  color: var(--white);
  width: calc(640 * var(--u));
  padding: calc(20 * var(--u)) calc(26 * var(--u)) calc(32 * var(--u));
  overflow: hidden;
}
.devis-title {
  font-size: calc(150 * var(--u));
  line-height: 1;
  transform: scale(0.66, 2.3);
  white-space: nowrap;
  letter-spacing: -0.07em;
  margin-left: calc(-6 * var(--u));
  height: calc(300 * var(--u));
}
.devis-box p {
  font-size: calc(22 * var(--u));
  line-height: 1.3;
  margin-top: calc(26 * var(--u));
}
.devis-box p.bold {
  font-weight: 600;
}
.devis-box .btn {
  margin-top: calc(30 * var(--u));
  font-size: calc(38 * var(--u));
}
.devis-box .btn:hover {
  background: var(--lime);
  color: var(--dark);
}

/* ======================================================
   COVERS
   ====================================================== */
.cover-hero {
  background: var(--dark);
  color: var(--lime);
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(60 * var(--u));
  padding: calc(100 * var(--u)) calc(30 * var(--u)) calc(30 * var(--u))
    calc(34 * var(--u));
}
.cover-hero {
  overflow: hidden;
}
.cover-hero h1 {
  font-size: calc(94 * var(--u));
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 1;
}
.cover-hero .price {
  font-size: calc(64 * var(--u));
  font-weight: 700;
  margin: calc(20 * var(--u)) 0;
  letter-spacing: -0.03em;
}
.cover-hero p {
  font-size: calc(23 * var(--u));
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.bookmark {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(130 * var(--u));
  height: calc(50 * var(--u));
  background: var(--lime);
  border-bottom-left-radius: calc(25 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
}
.bookmark svg {
  width: calc(24 * var(--u));
  height: calc(28 * var(--u));
  min-width: 16px;
  min-height: 19px;
}
.bookmark.saved svg path {
  fill: var(--dark);
}

.cover-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(70 * var(--u)) calc(40 * var(--u));
  padding: calc(80 * var(--u)) calc(60 * var(--u)) calc(140 * var(--u));
}
.cover-item {
  text-align: left;
  position: relative;
  transition: transform 0.2s;
}
.cover-item:hover {
  transform: translateY(-6px);
}
.cover-item.current h3 {
  text-decoration: underline;
  text-decoration-color: var(--lime);
  text-decoration-thickness: 0.15em;
}
.cover-item .fav-badge {
  display: none;
  position: absolute;
  top: 12%;
  left: 2%;
  background: var(--lime);
  font-size: 13px;
  font-weight: 700;
  padding: 3px 8px;
}
.cover-item.fav .fav-badge {
  display: block;
}
.cover-thumb {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cover-thumb img {
  width: 100%;
}
.cover-thumb img.wide {
  width: 92%;
}
.cover-item h3 {
  font-size: calc(46 * var(--u));
  font-weight: 700;
  letter-spacing: -0.06em;
  margin-top: calc(-50 * var(--u));
}

/* ======================================================
   OVERLAYS : MENU & RECHERCHE
   ====================================================== */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--dark);
  color: var(--lime);
  display: flex;
  flex-direction: column;
  padding: 30px 40px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s,
    visibility 0.25s;
  overflow-y: auto;
}
.overlay.open {
  opacity: 1;
  visibility: visible;
}
.overlay-close {
  align-self: flex-end;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.overlay-close svg {
  width: 32px;
  height: 32px;
  stroke: var(--lime);
}

.menu-links {
  list-style: none;
  margin-top: 30px;
}
.menu-links a {
  display: inline-block;
  padding: 0.04em 0.22em 0.08em;
  margin-left: -0.22em;
  font-weight: 900;
  font-size: clamp(36px, 7vw, 96px);
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.menu-links a:hover,
.menu-links a.active {
  background: var(--lime);
  color: var(--dark);
}
.menu-footer {
  margin-top: auto;
  padding-top: 30px;
  font-size: 18px;
  line-height: 1.5;
}
.menu-footer a {
  text-decoration: underline;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translate(-50%, 20px);
  background: var(--lime);
  color: var(--dark);
  font-weight: 700;
  padding: 14px 24px;
  z-index: 200;
  opacity: 0;
  transition:
    opacity 0.25s,
    transform 0.25s;
  pointer-events: none;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ======================================================
   RESPONSIVE
   ====================================================== */

/* Tablette : la barre du haut se simplifie, les liens passent dans le menu */
@media (max-width: 1150px) {
  .nav {
    padding: 0 24px;
    height: 70px;
  }
  .nav {
    grid-template-columns: 1fr auto;
  }
  .nav-left,
  .nav-right .nav-text {
    display: none;
  }
  .nav-right {
    gap: 24px;
  }
}

/* Mobile : les sections s'empilent, les textes restent lisibles */
@media (max-width: 800px) {
  .nav {
    padding: 0 16px;
    height: 60px;
    font-size: 15px;
  }
  .nav-icon svg {
    width: 24px;
    height: 24px;
  }
  .overlay {
    padding: 20px;
  }

  .btn {
    font-size: 18px;
    padding: 14px 0;
    max-width: none;
  }

  /* Accueil – hero */
  .hero {
    padding: 36px 14px 20px;
  }
  .hero-handle {
    font-size: 13px;
    top: 10px;
    right: 14px;
  }
  .hero-line {
    font-size: 10.5vw;
    white-space: normal;
    flex-wrap: wrap;
    column-gap: 2vw;
    row-gap: 0;
  }
  .hero-line .small {
    font-size: 12px;
  }
  .hero-line .small.right {
    text-align: left;
    order: 3;
    width: 100%;
    margin: 4px 0 8px;
  }
  .hero-line .small.contact-small {
    margin: 4px 0 8px;
    width: 100%;
  }

  /* Accueil – about */
  .about {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding-top: 20px;
  }
  .about .dots,
  .about-title {
    position: static;
  }
  .about .dots {
    padding: 0 14px;
    gap: 12px;
  }
  .dot {
    width: 24px;
    height: 24px;
  }
  .about-title {
    font-size: 24px;
    padding: 16px 14px 0;
  }
  .about-portrait {
    width: 100%;
    margin-right: 0;
    margin-top: 10px;
  }
  .about-quote {
    display: none;
  }
  .about-text {
    width: auto;
    margin: 0;
    padding: 20px 14px 30px;
    font-size: 16px;
  }
  .about-text h2 {
    font-size: 13vw;
    margin-bottom: 8px;
  }
  .about-text p + p {
    margin-top: 16px;
  }

  /* Accueil – portfolio */
  .portfolio-box {
    width: 100%;
    padding: 14px 14px 20px;
  }
  .portfolio-side {
    display: none;
  }
  .portfolio-title {
    font-size: 26vw;
    transform: scale(0.52, 1.6);
    margin-bottom: 26vw;
  }
  .portfolio-reg {
    display: none;
  }
  .portfolio-text {
    font-size: 16px;
    max-width: none;
    margin-bottom: 24px;
  }
  .portfolio-text p + p {
    margin-top: 16px;
  }

  /* Accueil – contact */
  .contact {
    flex-direction: column;
    padding: 0;
  }
  .contact-photo {
    width: 100%;
    height: 70vw;
  }
  .contact-title {
    font-size: 48vw;
    transform: scale(0.55, 1.5);
    margin: 0 0 0 14px;
    height: 72vw;
  }
  .contact-info {
    margin: 0 14px 30px;
    flex-wrap: wrap;
    gap: 16px;
  }
  .contact-info svg {
    width: 48px;
    height: 48px;
  }
  .contact-info .infos {
    font-size: 16px;
    margin-left: 0;
    padding: 6px 0 6px 16px;
  }

  /* Branding */
  .branding-hero {
    height: auto;
    padding: 14px 14px 20px;
  }
  .branding-title {
    font-size: 40vw;
    transform: scale(0.36, 1.6);
    margin-top: -6vw;
    height: 58vw;
  }
  .branding-reg {
    left: auto;
    right: 5vw;
    top: 12vw;
    width: 18vw;
    height: 46vw;
    border-width: 7.5vw 3.5vw;
    font-size: 18vw;
  }
  .branding-tag {
    position: relative;
    left: 0;
    top: 0;
    font-size: 11vw;
    margin-top: 10px;
  }
  .back-arrow {
    top: 0;
    width: 70px;
    height: 34px;
  }
  .back-arrow svg {
    width: 46px;
    height: 20px;
  }
  .devis {
    flex-direction: column;
    align-items: stretch;
  }
  .devis-img {
    padding: 14px;
  }
  .devis-box {
    width: 100%;
    padding: 16px 14px 24px;
  }
  .devis-title {
    font-size: 23vw;
    transform: scale(0.62, 1.8);
    height: 40vw;
  }
  .devis-box p {
    font-size: 16px;
    margin-top: 16px;
  }
  .devis-box .btn {
    font-size: 20px;
    margin-top: 20px;
  }
  /* Covers */
  .cover-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 60px 14px 30px;
  }
  .cover-stage {
    width: 100%;
  }
  .cover-hero h1 {
    font-size: 15vw;
  }
  .cover-hero .price {
    font-size: 10vw;
    margin: 8px 0 12px;
  }
  .cover-hero p {
    font-size: 16px;
  }
  .bookmark {
    width: 90px;
    height: 44px;
    border-bottom-left-radius: 22px;
  }
  .cover-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 16px;
    padding: 30px 14px 60px;
  }
  .cover-item h3 {
    font-size: 6vw;
    margin-top: -4vw;
  }
}

@media (max-width: 480px) {
  .nav-logo {
    font-size: 13px;
  }
  .cover-item h3 {
    font-size: 22px;
  }
}

/* ======================================================
   ANIMATIONS
   ====================================================== */

/* ---------- Barre du haut : entrée + masquage au scroll ---------- */
.nav {
  transition: transform 0.45s cubic-bezier(0.7, 0, 0.2, 1);
  animation: nav-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.nav.is-hidden {
  transform: translateY(-100%);
}
@keyframes nav-in {
  from {
    transform: translateY(-100%);
  }
}

.nav-notch {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 49;
  width: 110px;
  height: 26px;
  background: var(--dark);
  border-radius: 0 0 16px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -100%);
  transition:
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    height 0.2s;
}
.nav-notch span {
  width: 34px;
  height: 4px;
  border-radius: 2px;
  background: var(--lime);
}
.nav-notch.is-visible {
  transform: translate(-50%, 0);
}
.nav-notch:hover {
  height: 32px;
}

/* ---------- Case verte qui suit le curseur (About) ---------- */
.about-text.hl-js {
  position: relative;
}
.about-text.hl-js .hl {
  background: none;
  padding: 0;
}
.about-text .w {
  position: relative;
  z-index: 1;
}
.hl-box {
  position: absolute;
  z-index: 0;
  background: var(--lime);
  pointer-events: none;
  transition:
    left 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    top 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    width 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    height 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- Texte animé (Covers) ---------- */
.split .word {
  display: inline-block;
  white-space: nowrap;
}
.split .char {
  display: inline-block;
}
.split .ci {
  display: inline-block;
}
.split.play .char {
  animation: char-up 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(var(--i) * 0.035s);
}
.cover-item h3.split:not(.play) .char {
  opacity: 0;
}
.cover-item:hover h3 .ci {
  animation: char-wave 0.5s ease;
  animation-delay: calc(var(--i) * 0.03s);
}
@keyframes char-up {
  from {
    opacity: 0;
    transform: translateY(0.6em) rotate(8deg);
  }
}
@keyframes char-wave {
  40% {
    transform: translateY(-0.25em);
    color: var(--lime);
  }
}
.fade-up.play {
  animation: fade-up 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: var(--d, 0s);
}
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .cover-item h3.split:not(.play) .char {
    opacity: 1;
  }
}

/* ======================================================
   COVERS : vinyle qui tourne dans la pochette
   ====================================================== */
/* Gabarit des images : pochette carrée (S), disque de 0.964·S centré sur son bord droit */
.cover-stage {
  position: relative;
  flex-shrink: 0;
  width: calc(716 * var(--u));
  aspect-ratio: 716 / 483;
  cursor: pointer;
}
.sleeve {
  position: absolute;
  left: 0;
  top: 0;
  width: 67.46%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  transform-origin: 20% 90%;
  transition:
    transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.6s ease,
    clip-path 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  clip-path: inset(0 0 0 0);
}
.vinyl-wrap {
  position: absolute;
  z-index: 1;
  width: 65.03%;
  aspect-ratio: 1;
  top: 1.76%;
  left: 34.94%;
  transition:
    transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.15s linear;
}
.vinyl {
  position: absolute;
  inset: 0;
}
.vinyl img {
  width: 100%;
  height: 100%;
}
.vinyl-label {
  position: absolute;
  left: 53.5%;
  top: 45.5%;
  color: var(--dark);
  font-size: max(6px, calc(9 * var(--u)));
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 11%;
}
.vinyl-label b,
.vinyl-label span {
  display: block;
}
/* Reflets fixes (la lumière ne tourne pas avec le disque) */
.vinyl-sheen {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(
    from 20deg,
    transparent 0deg,
    rgba(255, 255, 255, 0.13) 25deg,
    transparent 55deg,
    transparent 180deg,
    rgba(255, 255, 255, 0.1) 205deg,
    transparent 235deg
  );
  -webkit-mask: radial-gradient(circle, transparent 31%, #000 32%, #000 70%);
  mask: radial-gradient(circle, transparent 31%, #000 32%, #000 70%);
}

/* Survol : le disque sort de la pochette et accélère, la pochette bascule */
.cover-stage.is-hover .vinyl-wrap {
  transform: translateX(24%);
}
.cover-stage.is-hover .sleeve {
  transform: rotate(-4deg) translate(-3%, 1%);
  filter: drop-shadow(18px 22px 28px rgba(0, 0, 0, 0.55));
}

/* Changement de cover (orchestré en JS) :
   1. swap-in   : le disque rentre entièrement derrière la pochette (qui reste opaque)
   2. disc-off + swap-hide : le disque s'efface, l'ancienne pochette se replie vers le haut
   3. la nouvelle pochette se déplie (le disque reste caché derrière)
   4. le disque réapparaît derrière la pochette opaque, puis ressort */
.cover-stage.swap-in .vinyl-wrap {
  transform: translateX(-50%);
  transition:
    transform 0.45s cubic-bezier(0.7, 0, 0.3, 1),
    opacity 0.15s linear;
}
.cover-stage.disc-off .vinyl-wrap {
  opacity: 0;
}
.cover-stage.swap-hide .sleeve {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.32s cubic-bezier(0.7, 0, 0.3, 1);
}

/* ======================================================
   TRANSITIONS ENTRE LES PAGES
   ====================================================== */
body::after {
  content: "MUSE MA JOLIE ®";
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dark);
  color: var(--lime);
  font-weight: 900;
  font-size: clamp(18px, 2.4vw, 32px);
  letter-spacing: 0.04em;
  border-bottom: 4px solid var(--lime);
  pointer-events: none;
  transform: translateY(-100%);
  animation: curtain-out 0.9s cubic-bezier(0.76, 0, 0.24, 1) backwards;
}
/* Page en préparation : le rideau reste en place (filet de sécurité à 3 s si le JS ne tourne pas) */
html.is-entering body::after {
  transform: none;
  animation: curtain-safe 0.85s cubic-bezier(0.65, 0, 0.25, 1) 3s forwards;
}
html.is-leaving body::after {
  animation: curtain-in 0.5s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
html.intro-play:not(.is-leaving) body::after {
  animation: none;
  transform: translateY(-100%);
}
@keyframes curtain-out {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}
@keyframes curtain-safe {
  from {
    transform: none;
  }
  to {
    transform: translateY(-100%);
  }
}
@keyframes curtain-in {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* ======================================================
   INTRO DE LA PAGE D'ACCUEIL
   ====================================================== */
.intro {
  display: none;
}
html.intro-lock body {
  overflow: hidden;
}
html.intro-play .intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: none;
}
.intro-dark,
.intro-lime {
  position: absolute;
  inset: 0;
}
.intro-lime {
  background: var(--lime);
  animation: intro-up 0.9s cubic-bezier(0.75, 0, 0.2, 1) 2.15s forwards;
}
.intro-dark {
  background: var(--dark);
  color: var(--lime);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  animation: intro-up 0.9s cubic-bezier(0.75, 0, 0.2, 1) 1.95s forwards;
}
.intro-title {
  font-weight: 900;
  font-size: clamp(44px, 9vw, 150px);
  letter-spacing: -0.03em;
  line-height: 1;
  overflow: hidden;
  padding: 0.05em 0.1em;
}
.intro-title .char {
  display: inline-block;
  animation: intro-char 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(0.15s + var(--i) * 0.045s);
}
.intro-sub {
  font-size: clamp(13px, 1.4vw, 20px);
  letter-spacing: 0.02em;
  animation: fade-up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.8s backwards;
}
.intro-bar {
  width: min(320px, 60vw);
  height: 3px;
  background: rgba(204, 255, 0, 0.2);
  overflow: hidden;
}
.intro-bar span {
  display: block;
  height: 100%;
  background: var(--lime);
  transform-origin: left;
  animation: intro-bar 1.3s cubic-bezier(0.6, 0, 0.3, 1) 0.45s backwards;
}
@keyframes intro-char {
  from {
    transform: translateY(110%) rotate(8deg);
  }
}
@keyframes intro-bar {
  from {
    transform: scaleX(0);
  }
}
@keyframes intro-up {
  to {
    transform: translateY(-100%);
  }
}

/* Le hero se construit ligne par ligne, après l'intro (ou après le rideau) */
.hero-line {
  animation: line-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(var(--hero-delay, 0.45s) + var(--i, 0) * 0.09s);
}
.hero-handle {
  animation: fade-up 0.8s ease backwards;
  animation-delay: calc(var(--hero-delay, 0.45s) + 0.5s);
}
html.intro-play {
  --hero-delay: 2.45s;
}
html.intro-play .nav {
  animation-delay: 2.3s;
}
@keyframes line-in {
  from {
    transform: translateY(45%);
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 -20% 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::after {
    display: none;
  }
  html.intro-play .intro {
    display: none;
  }
}

/* Arrivée par une transition : la barre du haut est déjà en place sous le rideau
   (pas de deuxième animation qui donnerait un effet de saccade) */
html.via-transition .nav {
  animation: none;
}
html.via-transition {
  --hero-delay: 0.3s;
}
/* Première visite de l'accueil : l'intro garde la main, même en arrivant par un lien */
html.intro-play {
  --hero-delay: 2.45s;
}

/* ======================================================
   ACCUEIL : SURVOLS DU HERO
   ====================================================== */
/* Grands titres : couleurs inversées */
.hero .big {
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
  padding: 0 0.06em;
  margin: 0 -0.06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hero .big:hover {
  background: var(--dark);
  color: var(--lime);
}

/* Petits textes : les lettres s'écartent autour du curseur (JS) */
.displace .dchar {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

/* Étoiles : tour complet au survol */
.star {
  display: inline-block;
  transition: transform 0.7s cubic-bezier(0.5, 0, 0.2, 1);
}
.star:hover {
  transform: rotate(360deg);
}

/* ======================================================
   OUTILS COMMUNS
   ====================================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.lime {
  color: var(--lime);
}

/* Texte étiré pour remplir exactement sa boîte (mise à l'échelle calculée en JS : setupFit) */
.fit {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  font-size: 100px;
  line-height: 0; /* boîte de ligne nulle : la déformation ne crée pas de débordement */
  font-weight: 700;
  letter-spacing: -0.03em;
  white-space: nowrap;
  transform-origin: 0 0;
  visibility: hidden;
}
.fit.is-fit {
  visibility: visible;
}
.fit .lime {
  transition: color 0.3s ease;
}

/* Apparition au scroll (classe .in posée par setupReveal) */
.rise {
  clip-path: inset(0 0 100% 0);
  transform: translateY(18%);
  transition:
    clip-path 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: var(--d, 0s);
}
.rise.in {
  clip-path: inset(0 0 -5% 0);
  transform: none;
}
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: var(--d, 0s);
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* ======================================================
   BRANDING V2 : GALOP & LAUSANNE
   ====================================================== */
.devis-box {
  position: relative;
  z-index: 2;
}
.stars-band {
  background: var(--lime);
  height: calc(64 * var(--u));
  margin-top: calc(-16 * var(--u));
  position: relative;
  z-index: 1;
}
.stars-row {
  display: flex;
  padding: calc(9 * var(--u)) 0 0 calc(11 * var(--u));
  font-weight: 900;
  font-size: calc(76 * var(--u));
  line-height: 1;
  height: 100%;
  overflow: hidden;
}

.galop {
  position: relative;
  height: calc(673 * var(--u));
}
.galop-photo {
  position: absolute;
  left: calc(825 * var(--u));
  right: 0;
  top: 0;
  bottom: 0;
}
.galop-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.galop-logo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.galop-g {
  position: absolute;
  left: calc(20 * var(--u));
  top: calc(22 * var(--u));
  width: calc(637 * var(--u));
  height: calc(621 * var(--u));
  overflow: visible;
}
.galop-g .g-fill {
  fill: var(--lime);
}
.galop-g .g-line {
  fill: none;
  stroke: var(--lime);
  stroke-width: 3;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
}
.galop-word {
  position: absolute;
  left: calc(507 * var(--u));
  top: calc(206 * var(--u));
  width: calc(723 * var(--u));
  height: calc(269 * var(--u));
  color: var(--lime);
}
.galop-word .fit {
  font-weight: 900;
  letter-spacing: -0.02em;
}
.galop-word .gl {
  display: inline-block;
}
.galop-reg {
  position: absolute;
  left: calc(1231 * var(--u));
  top: calc(205 * var(--u));
  width: calc(105 * var(--u));
  height: calc(105 * var(--u));
  color: var(--lime);
}
.galop-reg .fit {
  font-weight: 900;
}
.galop-text {
  position: absolute;
  z-index: 2;
  left: calc(20 * var(--u));
  top: calc(46 * var(--u));
  width: calc(462 * var(--u));
  font-size: calc(22 * var(--u));
  line-height: 1.3;
}
.galop-text p + p {
  margin-top: calc(28 * var(--u));
}
.galop-star {
  position: absolute;
  z-index: 3;
  left: calc(441 * var(--u));
  top: calc(586 * var(--u));
  color: var(--lime);
  font-weight: 900;
  font-size: calc(96 * var(--u));
  line-height: 1;
}
.galop-follow {
  position: absolute;
  z-index: 2;
  left: calc(467 * var(--u));
  right: 0;
  top: calc(535 * var(--u));
  height: calc(93 * var(--u));
  background: var(--dark);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(30 * var(--u)) 0 calc(65 * var(--u));
}
/* Filet vert sous la barre */
.galop-follow::after {
  content: "";
  position: absolute;
  left: calc(95 * var(--u));
  right: 0;
  top: calc(82 * var(--u));
  height: calc(22 * var(--u));
  background: var(--lime);
}
.galop-follow-label {
  font-weight: 700;
  font-size: calc(45 * var(--u));
  letter-spacing: -0.01em;
}
.galop-follow-icons {
  display: flex;
  gap: calc(27 * var(--u));
  position: relative;
  z-index: 1;
  transform: translateY(calc(-4 * var(--u)));
}
.galop-follow-icons a {
  display: flex;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.galop-follow-icons a:hover {
  transform: scale(1.12) rotate(-6deg);
}
.galop-follow-icons svg {
  width: calc(54 * var(--u));
  height: calc(54 * var(--u));
  stroke: var(--white);
  transition: stroke 0.2s;
}
.galop-follow-icons a:hover svg {
  stroke: var(--lime);
}

/* --- Animation du logo Galop (classe .in posée au scroll) --- */
.galop .gl {
  opacity: 0;
  transform: translateY(0.45em) scale(0.6);
}
.galop-reg {
  opacity: 0;
}
.galop.in .g-line {
  opacity: 1;
  animation:
    g-draw 1.3s cubic-bezier(0.6, 0, 0.3, 1) forwards,
    g-line-out 0.4s ease 1.5s forwards;
}
.galop .g-fill {
  opacity: 0;
}
.galop.in .g-fill {
  animation: g-fill 0.5s ease 1.05s forwards;
}
.galop.in .gl {
  animation: gl-in 0.75s cubic-bezier(0.3, 1.6, 0.5, 1) forwards;
  animation-delay: calc(0.75s + var(--i) * 0.09s);
}
.galop.in .galop-reg {
  animation: reg-in 0.9s cubic-bezier(0.3, 1.4, 0.5, 1) 1.2s forwards;
}
@keyframes g-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes g-line-out {
  to {
    opacity: 0;
  }
}
@keyframes g-fill {
  to {
    opacity: 1;
  }
}
@keyframes gl-in {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes reg-in {
  from {
    opacity: 0;
    transform: scale(0) rotate(-270deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* Au survol du logo, les lettres font une petite vague */
.galop.played .gl,
.galop.played .galop-reg,
.galop.played .g-fill {
  opacity: 1;
  transform: none;
  animation: none;
}
.galop.played .g-line {
  display: none;
}
.galop.played .galop-logo.wave .gl {
  animation: gl-wave 0.55s ease;
  animation-delay: calc(var(--i) * 0.06s);
}
@keyframes gl-wave {
  45% {
    transform: translateY(-0.1em) rotate(-4deg);
  }
}

/* --- La barre « Suivre Galop » glisse à l'arrivée --- */
.galop-follow {
  clip-path: inset(0 0 -40% 100%);
  transition: clip-path 0.8s cubic-bezier(0.7, 0, 0.2, 1);
}
.galop-follow.in {
  clip-path: inset(0 0 -40% 0);
}
.galop-follow::after {
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.7s cubic-bezier(0.7, 0, 0.2, 1) 0.45s;
}
.galop-follow.in::after {
  transform: none;
}
.galop-follow-label,
.galop-follow-icons a {
  opacity: 0;
  transform: translateY(60%);
  transition:
    opacity 0.5s ease,
    transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.galop-follow.in .galop-follow-label {
  opacity: 1;
  transform: none;
  transition-delay: 0.5s;
}
.galop-follow.in .galop-follow-icons a {
  opacity: 1;
  transform: none;
  transition-delay: 0.7s, 0.7s;
}
.galop-follow.in .galop-follow-icons a + a {
  transition-delay: 0.82s, 0.82s;
}
/* une fois arrivés, les icônes retrouvent un survol rapide */
.galop-follow.done .galop-follow-icons a {
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.galop-follow.done .galop-follow-icons a:hover {
  transform: scale(1.12) rotate(-6deg);
}
.galop-star {
  opacity: 0;
  transition:
    opacity 0.4s ease 0.9s,
    transform 0.7s cubic-bezier(0.5, 0, 0.2, 1);
}
.galop-star.in {
  opacity: 1;
}

.lausanne {
  position: relative;
  height: calc(720 * var(--u));
  background: var(--dark);
  overflow: hidden;
}
.lausanne-photo {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(576 * var(--u));
}
.lausanne-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}
.lausanne-ring {
  position: absolute;
  left: calc(22 * var(--u));
  top: calc(38 * var(--u));
  width: calc(200 * var(--u));
  height: calc(642 * var(--u));
  border: solid var(--lime);
  border-width: calc(86 * var(--u)) calc(44 * var(--u));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lime);
  font-weight: 700;
  font-size: calc(190 * var(--u));
}
.lausanne-ring span {
  display: inline-block;
  transform: scale(0.75, 2);
  line-height: 0.73;
}
.lausanne-mmj {
  position: absolute;
  left: calc(470 * var(--u));
  top: calc(680 * var(--u));
  width: calc(645 * var(--u));
  height: calc(198 * var(--u));
  transform-origin: 0 0;
  transform: rotate(-90deg);
  color: var(--white);
}
.lausanne-title {
  position: absolute;
  left: calc(690 * var(--u));
  top: calc(30 * var(--u));
  width: calc(648 * var(--u));
  height: calc(660 * var(--u));
  color: var(--white);
}

/* ======================================================
   DIRECTION ARTISTIQUE V2
   ====================================================== */
.da-hero,
.da-steps,
.da-project,
.da-about,
.da-collab {
  overflow: hidden;
}
.da-hero {
  position: relative;
  background: var(--lime);
  height: calc(623 * var(--u));
}
.da-hero-direction {
  position: absolute;
  left: calc(20 * var(--u));
  top: calc(28 * var(--u));
  width: calc(650 * var(--u));
  height: calc(580 * var(--u));
}
.da-hero-art {
  position: absolute;
  left: calc(912 * var(--u));
  top: calc(21 * var(--u));
  width: calc(428 * var(--u));
  height: calc(587 * var(--u));
}
.da-hero-reg {
  position: absolute;
  left: calc(708 * var(--u));
  top: calc(22 * var(--u));
  width: calc(170 * var(--u));
  height: calc(588 * var(--u));
  border: solid var(--dark);
  border-width: calc(78 * var(--u)) calc(34 * var(--u));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: calc(150 * var(--u));
  transition: transform 0.9s cubic-bezier(0.5, 0, 0.2, 1);
}
.da-hero-reg span {
  display: inline-block;
  transform: scale(0.62, 1.75);
  line-height: 0.73;
}
.da-hero-reg:hover {
  transform: rotateY(360deg);
}

.da-steps {
  position: relative;
  background: var(--dark);
  color: var(--white);
  height: calc(360 * var(--u));
  display: flex;
}
.da-steps-title {
  position: relative;
  width: calc(468 * var(--u));
  flex-shrink: 0;
  font-size: inherit;
}
.da-ma {
  position: absolute;
  left: calc(20 * var(--u));
  top: calc(20 * var(--u));
  width: calc(123 * var(--u));
  height: calc(136 * var(--u));
}
.da-demarche {
  position: absolute;
  left: calc(20 * var(--u));
  top: calc(196 * var(--u));
  width: calc(426 * var(--u));
  height: calc(144 * var(--u));
}
.da-star {
  position: absolute;
  left: calc(236 * var(--u));
  top: calc(14 * var(--u));
  font-weight: 900;
  font-size: calc(130 * var(--u));
  line-height: 1;
  color: var(--white);
}
.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, calc(223 * var(--u)));
  flex: 1;
}
.step {
  position: relative;
  display: flex;
  flex-direction: column;
}
.step-num {
  display: block;
  font-weight: 700;
  font-size: calc(46 * var(--u));
  line-height: 1;
  letter-spacing: -0.01em;
  padding: calc(24 * var(--u)) 0 0 0;
  height: calc(103 * var(--u));
  transition: color 0.3s ease;
}
.step-box {
  position: relative;
  flex: 1;
  margin-left: calc(-9 * var(--u));
  margin-right: calc(-1 * var(--u));
  padding: calc(8 * var(--u)) calc(28 * var(--u)) 0 calc(9 * var(--u));
  font-size: calc(22 * var(--u));
  line-height: 1.3;
  transition: color 0.3s ease;
  z-index: 0;
}
/* Fond vert : il monte depuis le bas au survol */
.step-box::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--lime);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s cubic-bezier(0.7, 0, 0.2, 1);
}
.step-box h3 {
  font-size: inherit;
  font-weight: 700;
  margin-bottom: calc(22 * var(--u));
  letter-spacing: -0.01em;
}
.step-box ul {
  list-style: disc;
  padding-left: calc(36 * var(--u));
}
/* Case active : la 02 par défaut, sinon celle survolée */
.step.is-default .step-box::before,
.step:hover .step-box::before {
  transform: none;
}
.step.is-default .step-box,
.step:hover .step-box {
  color: var(--dark);
}
.step.is-default .step-num,
.step:hover .step-num {
  color: var(--lime);
}
.steps:hover .step.is-default:not(:hover) .step-box::before {
  transform: scaleY(0);
}
.steps:hover .step.is-default:not(:hover) .step-box {
  color: var(--white);
}
.steps:hover .step.is-default:not(:hover) .step-num {
  color: var(--white);
}

.da-project {
  position: relative;
  height: calc(351 * var(--u));
  display: flex;
}
.da-project-head {
  position: relative;
  width: calc(467 * var(--u));
  flex-shrink: 0;
}
.da-kicker {
  position: absolute;
  left: calc(22 * var(--u));
  top: calc(16 * var(--u));
  font-weight: 900;
  font-size: calc(44 * var(--u));
  letter-spacing: -0.03em;
  line-height: 1;
}
.da-project-name {
  position: absolute;
  left: calc(20 * var(--u));
  top: calc(75 * var(--u));
  width: calc(426 * var(--u));
  height: calc(260 * var(--u));
  font-size: inherit;
}
.da-strip {
  flex: 1;
  display: flex;
  height: calc(340 * var(--u));
  overflow: hidden;
}
.da-shot {
  overflow: hidden;
}
.da-shot:nth-child(1) {
  width: calc(426 * var(--u));
}
.da-shot:nth-child(2) {
  width: calc(257 * var(--u));
}
.da-shot:nth-child(3) {
  flex: 1;
}
.da-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.da-shot:hover img {
  transform: scale(1.06);
}
.da-line {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(1116 * var(--u));
  height: calc(22 * var(--u));
  background: var(--lime);
  transform-origin: left;
}

.da-about {
  position: relative;
  height: calc(343 * var(--u));
}
.da-about-text {
  position: absolute;
  left: calc(20 * var(--u));
  top: calc(8 * var(--u));
  width: calc(650 * var(--u));
  font-size: calc(22 * var(--u));
  line-height: 1.3;
}
.da-about-text p + p {
  margin-top: calc(29 * var(--u));
}
.da-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(40 * var(--u));
  width: calc(426 * var(--u));
  height: calc(53 * var(--u));
  margin-top: calc(28 * var(--u));
  background: var(--dark);
  color: var(--white);
  font-weight: 700;
  font-size: calc(22 * var(--u));
  letter-spacing: -0.02em;
  transition:
    background 0.25s,
    color 0.25s;
}
.da-btn svg {
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.da-btn:hover {
  background: var(--lime);
  color: var(--dark);
}
.da-btn:hover svg {
  transform: translate(3px, -3px);
}
.da-role > * {
  position: absolute;
}
.da-role-word {
  left: calc(690 * var(--u));
  top: calc(17 * var(--u));
  width: calc(203 * var(--u));
  height: calc(308 * var(--u));
}
.da-role-1 {
  left: calc(912 * var(--u));
  top: calc(17 * var(--u));
  width: calc(330 * var(--u));
  height: calc(144 * var(--u));
}
.da-role-reg {
  left: calc(1253 * var(--u));
  top: calc(17 * var(--u));
  width: calc(60 * var(--u));
  height: calc(144 * var(--u));
  border: solid var(--dark);
  border-width: calc(13 * var(--u)) calc(9 * var(--u));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: calc(40 * var(--u));
}
.da-role-reg span {
  display: inline-block;
  transform: scale(0.75, 1.6);
  line-height: 0.73;
}
.da-role-2 {
  left: calc(912 * var(--u));
  top: calc(175 * var(--u));
  width: calc(428 * var(--u));
  height: calc(152 * var(--u));
}
/* Le « O » vert de ROLE se remplit de noir quand on survole la colonne */
.da-role-word .lime {
  display: inline-block;
}
.da-role:hover .da-role-word .lime {
  color: var(--dark);
}
.da-role:hover .da-role-1 + .da-role-reg,
.da-role:hover .da-role-reg {
  color: var(--lime);
  border-color: var(--lime);
}
.da-role-reg {
  transition:
    color 0.3s,
    border-color 0.3s;
}

.da-collab {
  position: relative;
  background: var(--lime);
  height: calc(386 * var(--u));
}
.da-collab > * {
  position: absolute;
}
.da-collab-1 {
  left: calc(20 * var(--u));
  top: calc(22 * var(--u));
  width: calc(616 * var(--u));
  height: calc(346 * var(--u));
}
.da-collab-pour {
  left: calc(690 * var(--u));
  top: calc(23 * var(--u));
  width: calc(202 * var(--u));
  height: calc(181 * var(--u));
}
.da-collab-la {
  left: calc(690 * var(--u));
  top: calc(221 * var(--u));
  width: calc(90 * var(--u));
  height: calc(147 * var(--u));
}
.da-collab-text {
  left: calc(913 * var(--u));
  top: calc(20 * var(--u));
  width: calc(205 * var(--u));
  font-size: calc(22 * var(--u));
  line-height: 1.3;
}
.da-talk {
  position: relative;
  display: block;
  margin-top: calc(10 * var(--u));
  width: calc(204 * var(--u));
  height: calc(77 * var(--u));
  background: var(--dark);
  color: var(--white);
  transition:
    background 0.25s,
    color 0.25s;
}
.da-talk {
  padding: calc(10 * var(--u)) calc(7 * var(--u));
}
.da-talk .fit {
  font-weight: 600;
}
.da-talk:hover {
  background: var(--white);
  color: var(--dark);
}
.da-collab-culture {
  left: calc(1137 * var(--u));
  top: calc(23 * var(--u));
  width: calc(203 * var(--u));
  height: calc(345 * var(--u));
}

@media (prefers-reduced-motion: reduce) {
  .rise,
  .reveal,
  .galop-follow,
  .galop-follow * {
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .galop .gl,
  .galop .g-fill,
  .galop-star {
    opacity: 1 !important;
    transform: none !important;
  }
  .galop-follow::after {
    transform: none !important;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 800px) {
  .stars-band {
    height: 34px;
    margin-top: 0;
  }
  .stars-row {
    font-size: 40px;
    gap: 6px;
    padding: 4px 0 0 10px;
  }

  .galop {
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .galop-photo,
  .galop-logo,
  .galop-text,
  .galop-follow,
  .galop-star {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: auto;
  }
  .galop-logo {
    order: 1;
    height: 72vw;
    inset: auto;
  }
  .galop-g {
    left: 2vw;
    top: 2vw;
    width: 66vw;
    height: 64.4vw;
  }
  .galop-word {
    left: 40vw;
    top: 26vw;
    width: 50vw;
    height: 18.6vw;
  }
  .galop-reg {
    left: 90.5vw;
    top: 26vw;
    width: 7.3vw;
    height: 7.3vw;
  }
  .galop-text {
    order: 2;
    font-size: 16px;
    padding: 16px 14px 24px;
  }
  .galop-text p + p {
    margin-top: 16px;
  }
  .galop-photo {
    order: 3;
    height: auto;
    aspect-ratio: 535 / 532;
  }
  .galop-follow {
    order: 4;
    height: 64px;
    padding: 0 14px;
    margin-bottom: 20px;
  }
  .galop-follow::after {
    left: 40px;
    top: auto;
    bottom: -12px;
    height: 12px;
  }
  .galop-follow-label {
    font-size: 26px;
  }
  .galop-follow-icons {
    gap: 14px;
    transform: none;
  }
  .galop-follow-icons svg {
    width: 36px;
    height: 36px;
  }
  .galop-star {
    display: none;
  }

  /* Lausanne : la composition reste celle du bureau, simplement réduite (affiche) */

  /* DA */
  .da-hero {
    height: 62vw;
  }
  .da-hero-direction {
    left: 3vw;
    top: 3vw;
    width: 48vw;
    height: 56vw;
  }
  .da-hero-reg {
    left: 53vw;
    top: 3vw;
    width: 13vw;
    height: 56vw;
    border-width: 7vw 3vw;
    font-size: 12vw;
  }
  .da-hero-art {
    left: 68vw;
    top: 3vw;
    width: 29vw;
    height: 56vw;
  }
  .da-steps {
    height: auto;
    flex-direction: column;
    padding-bottom: 20px;
  }
  .da-steps-title {
    width: 100%;
    height: 34vw;
  }
  .da-ma {
    left: 14px;
    top: 14px;
    width: 18vw;
    height: 26vw;
  }
  .da-demarche {
    left: 24vw;
    top: 14px;
    width: 64vw;
    height: 26vw;
  }
  .da-star {
    left: auto;
    right: 3vw;
    top: 10px;
    font-size: 60px;
  }
  .steps {
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0 14px;
  }
  .step-num {
    font-size: 32px;
    height: auto;
    padding: 16px 0 10px;
  }
  .step-box {
    font-size: 16px;
    margin-left: -8px;
    padding: 8px 8px 16px;
  }
  .step-box h3 {
    margin-bottom: 8px;
  }
  .step-box ul {
    padding-left: 20px;
  }

  .da-project {
    height: auto;
    flex-direction: column;
    padding-bottom: 12px;
  }
  .da-project-head {
    width: 100%;
    height: 56vw;
  }
  .da-kicker {
    left: 14px;
    top: 14px;
    font-size: 7vw;
  }
  .da-project-name {
    left: 14px;
    top: calc(14px + 9vw);
    width: calc(100% - 28px);
    height: 40vw;
  }
  .da-strip {
    height: 50vw;
  }
  .da-shot:nth-child(1) {
    width: 45%;
  }
  .da-shot:nth-child(2) {
    width: 28%;
  }
  .da-line {
    width: 80%;
    height: 12px;
  }

  .da-about {
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .da-about-text {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    padding: 20px 14px;
    font-size: 16px;
  }
  .da-about-text p + p {
    margin-top: 16px;
  }
  .da-btn {
    width: 100%;
    height: 48px;
    font-size: 17px;
    gap: 20px;
  }
  .da-btn svg {
    width: 18px;
    height: 18px;
  }
  .da-role {
    position: relative;
    height: 50vw;
    margin: 0 14px 20px;
  }
  .da-role-word {
    left: 0;
    top: 0;
    width: 28vw;
    height: 46vw;
  }
  .da-role-1 {
    left: 31vw;
    top: 0;
    width: 47vw;
    height: 21vw;
  }
  .da-role-reg {
    left: 80vw;
    top: 0;
    width: 9vw;
    height: 21vw;
    border-width: 2vw 1.4vw;
    font-size: 6vw;
  }
  .da-role-2 {
    left: 31vw;
    top: 24vw;
    width: 61vw;
    height: 22vw;
  }

  .da-collab {
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 14px;
  }
  .da-collab > * {
    position: relative;
    left: auto;
    top: auto;
  }
  .da-collab-1 {
    grid-column: 1 / -1;
    width: 100%;
    height: 50vw;
  }
  .da-collab-pour {
    width: 100%;
    height: 24vw;
  }
  .da-collab-la {
    width: 50%;
    height: 24vw;
  }
  .da-collab-culture {
    grid-column: 2;
    grid-row: 2 / span 2;
    width: 100%;
    height: 100%;
    min-height: 50vw;
  }
  .da-collab-text {
    grid-column: 1;
    width: auto;
    font-size: 16px;
  }
  .da-talk {
    width: 100%;
    height: 56px;
  }
}
.galop-word {
  pointer-events: auto;
}
.galop-follow-trigger {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(535 * var(--u));
  height: calc(93 * var(--u));
  pointer-events: none;
}

/* ======================================================
   COVERS – Coming soon (vente des vinyles)
   ====================================================== */
.price-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(24 * var(--u));
  margin: calc(20 * var(--u)) 0;
}
.cover-hero .price-row .price {
  margin: 0;
}
.soon-badge {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--u));
  border: 2px solid var(--lime);
  border-radius: 999px;
  padding: calc(8 * var(--u)) calc(20 * var(--u));
  font-size: calc(20 * var(--u));
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.soon-badge i {
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  min-width: 8px;
  min-height: 8px;
  border-radius: 50%;
  background: var(--lime);
  animation: soon-pulse 1.4s ease-in-out infinite;
}
@keyframes soon-pulse {
  50% {
    opacity: 0.2;
    transform: scale(0.7);
  }
}

.soon-band {
  background: var(--lime);
  color: var(--dark);
  overflow: hidden;
  border-top: 2px solid var(--dark);
  border-bottom: 2px solid var(--dark);
}
.soon-track {
  display: flex;
  width: max-content;
  animation: soon-scroll 22s linear infinite;
}
.soon-band:hover .soon-track {
  animation-play-state: paused;
}
.soon-track > div {
  display: flex;
  align-items: center;
}
.soon-track span,
.soon-track b {
  font-size: calc(40 * var(--u));
  font-weight: 900;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  line-height: 1;
  padding: calc(16 * var(--u)) calc(22 * var(--u));
  white-space: nowrap;
}
.soon-track b {
  font-size: calc(22 * var(--u));
}
@keyframes soon-scroll {
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 800px) {
  .price-row {
    gap: 12px;
    margin: 8px 0 12px;
  }
  .soon-badge {
    font-size: 13px;
    padding: 6px 12px;
    gap: 8px;
  }
  .soon-track span {
    font-size: 22px;
    padding: 10px 14px;
  }
  .soon-track b {
    font-size: 12px;
  }
}