/* ============ Tokens (issus de la maquette Figma) ============ */
:root {
  --orange: #ff833e;
  --brun: #281b14;
  --blanc: #f6ede2;     /* variable « Blanc » */
  --white: #ffffff;
  --gris: #8e8e8e;

  --font-display: "Monorama", "Space Mono", ui-monospace, monospace;
  --font-text: "Geist", system-ui, sans-serif;

  --radius: 12px;
  --gutter: 50px;
  --max: 1280px;

  /* 1 px de maquette, réduit proportionnellement sous 1280 px de large */
  --px: min(1px, calc(100vw / 1280));
}

/* Monorama : chargée depuis le poste si installée, ou depuis assets/fonts */
@font-face { font-family: "Monorama"; font-weight: 400; font-display: swap;
  src: local("Monorama Regular"), local("Monorama-Regular"), url("assets/fonts/Monorama-Regular.woff2") format("woff2"); }
@font-face { font-family: "Monorama"; font-weight: 500; font-display: swap;
  src: local("Monorama Medium"), local("Monorama-Medium"), url("assets/fonts/Monorama-Medium.woff2") format("woff2"); }
@font-face { font-family: "Monorama"; font-weight: 600; font-display: swap;
  src: local("Monorama SemiBold"), local("Monorama-SemiBold"), url("assets/fonts/Monorama-SemiBold.woff2") format("woff2"); }

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--orange);
  color: var(--brun);
  font-family: var(--font-text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
p, h1, h2, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

.tag {
  display: inline-block;
  background: var(--orange);
  color: var(--brun);
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  padding: 5px 10px;
}

/* Bouton (composant CTA) */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 117px;
  padding: 15px 20px;
  border: 2px solid var(--brun);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  text-transform: uppercase;
  transition: background-color .2s, color .2s;
}
.cta:hover { background: var(--white); border-color: var(--white); color: var(--orange); }
.cta--light { border-color: var(--white); color: var(--white); }
.cta--light:hover { background: var(--white); color: var(--orange); }
/* Complet / Épuisé : non cliquable, effet « téléportation » au survol (inspiré du bouton GSAP Teleport)
   - les lettres du texte partent vers le haut en rétrécissant, dans un ordre aléatoire
   - les lettres de « Désolé » arrivent par le bas
   - le bouton se gonfle avec un rebond élastique, et s'écrase un peu au clic */
.cta--soldout {
  --elastic: linear(0, .5737 7.6%, .8382 11.87%, .9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%,
    1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%,
    .9995 46.99%, .9872 51.63%, .9842 58.77%, 1.0011 81.26%, 1);
  --smooth: cubic-bezier(.32, .72, 0, 1);
  position: relative;
  cursor: default;
  transition: background-color .2s, color .2s, border-color .2s, scale .75s var(--elastic), transform .45s var(--elastic);
}
@media (hover: hover) and (pointer: fine) {
  .cta--soldout:hover { scale: 1.035 1.065; }
}
.cta--soldout:active { transform: scale(.955); }
/* Même logique que la nav : le mot sortant disparaît d'un coup, seul le mot entrant s'anime par le bas.
   - au survol : « Complet » / « Épuisé » disparaît, « Désolé » arrive
   - en sortant : « Désolé » disparaît, « Complet » / « Épuisé » revient par le bas */
.cta--soldout { overflow: hidden; } /* les lettres restent dans le bouton */
.cta--soldout:is(:hover, :focus-visible) .cta__label .cta__char {
  transform: translateY(100%) scale(.5); opacity: 0; transition: none;
}
.cta--soldout:not(:hover):not(:focus-visible) .cta__hover .cta__char { transition: none; }

.cta__label, .cta__hover { display: inline-flex; white-space: pre; }
.cta__hover { position: absolute; inset: 0; justify-content: center; align-items: center; }
.nav a { position: relative; }
/* Nav : les lettres restent dans leur cartouche ; en sortant, retour instantané sans animation inverse */
.nav a { overflow: hidden; }
.nav a:not(:hover):not(:focus-visible) .cta__char { transition: none; }
/* le mot sortant disparaît d'un coup ; seul le mot entrant s'anime en arrivant par le bas */
.nav a:is(:hover, :focus-visible) .cta__label .cta__char { transition: none; }
.cta__char {
  display: inline-block;
  transition: transform .45s var(--smooth) var(--d), opacity .45s var(--smooth) var(--d);
}
/* état de repos : « Désolé » attend en dessous */
.cta__hover .cta__char { transform: translateY(100%) scale(.5); opacity: 0; }
/* survol : le texte part vers le haut, « Désolé » arrive */
.nav a:is(:hover, :focus-visible) .cta__label .cta__char { transform: translateY(-100%) scale(.5); opacity: 0; }
:is(.cta--soldout, .nav a):is(:hover, :focus-visible) .cta__hover .cta__char { transform: none; opacity: 1; }

/* Ombre de pochette (dégradé radial de la maquette) */
.shade {
  position: absolute; inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: .15;
  background: radial-gradient(closest-side, #fff 70%, #808080 85%, #202020 96%, #000 100%);
}

/* ============ Hero ============ */
.hero {
  position: relative;
  height: 100vh;   /* plein écran */
  height: 100svh;  /* plein écran, barre d'adresse mobile comprise */
  min-height: 520px;
  overflow: hidden;
  color: var(--white);
}
.hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Lisibilité de la navigation : léger dégradé brun en haut de la vidéo, qui s'estompe sur 150 px */
.hero::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 150px;
  z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(40, 27, 20, .32), rgba(40, 27, 20, .12) 55%, transparent);
}

.nav {
  position: absolute; top: 20px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 20px;
  z-index: 2;
}
.nav a {
  padding: 5px;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1;
  text-transform: uppercase;
}
/* Rebond élastique au survol, comme les boutons Complet / Épuisé */
.nav a {
  --elastic: linear(0, .5737 7.6%, .8382 11.87%, .9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%,
    1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%,
    .9995 46.99%, .9872 51.63%, .9842 58.77%, 1.0011 81.26%, 1);
  --smooth: cubic-bezier(.32, .72, 0, 1);
  transition: scale .75s var(--elastic);
}
@media (hover: hover) and (pointer: fine) {
  .nav a:hover { scale: 1.035 1.065; }
}
/* Survol (variante Hover du composant de nav) : fond orange façon tag, texte brun, sans ombre */
.nav a:hover, .nav a:focus-visible {
  background: var(--orange);
  color: var(--brun);
  text-shadow: none;
  outline: none;
}

.hero__name {
  position: absolute; inset: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(250 * var(--px));
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
}
.hero__line { position: absolute; white-space: nowrap; }
/* Positions de la maquette (frame 1280 × 832), ancrées en bas du hero */
.hero__line--1 { right: calc(62 * var(--px));  bottom: calc(490 * var(--px) - 1em); }
.hero__line--2 { right: calc(196 * var(--px)); bottom: calc(286 * var(--px) - 1em); }
.hero__tag {
  position: absolute;
  right: calc(133 * var(--px));
  bottom: calc(190 * var(--px));
  font-size: clamp(14px, calc(20 * var(--px)), 20px);
}

/* Bouton son animé (composant SoundToggle) */
.sound {
  position: fixed; /* reste au même endroit pendant tout le scroll */
  right: calc(74 * var(--px));
  bottom: 32px;
  display: flex; align-items: flex-end; gap: 2px;
  width: 22px; height: 26px;
  z-index: 50;
}
.sound .bar { width: 4px; background: var(--blanc); height: 15px; transform-origin: bottom; animation: bars 1s ease-in-out infinite alternate; }
.sound .bar:nth-of-type(2) { height: 7px;  animation-delay: -.3s; }
.sound .bar:nth-of-type(3) { height: 19px; animation-delay: -.6s; }
.sound .bar:nth-of-type(4) { height: 26px; animation-delay: -.15s; }
/* Son coupé (au chargement ou après une pause) : haut-parleur barré ; musique en cours : barres animées */
.sound__icon {
  position: absolute; left: 50%; bottom: 1px;
  margin-left: -12px;
  color: var(--blanc);
  transition: opacity .25s, transform .25s;
}
.sound .bar { opacity: 0; transition: opacity .25s, transform .35s ease-out; }
.sound[aria-pressed="true"] .bar { opacity: 1; }
.sound[aria-pressed="true"] .sound__icon { opacity: 0; transform: scale(.6); }
.sound:hover .sound__icon { transform: scale(1.1); }
.sound:focus-visible .sound__icon { color: var(--orange); }

/* En pause : les barres retombent en bas et s'arrêtent */
.sound[aria-pressed="false"] .bar { animation: none; }
/* au repos, toutes les barres font 4 px (4 / hauteur de chaque barre) */
.sound[aria-pressed="false"] .bar:nth-of-type(1) { transform: scaleY(calc(4 / 15)); }
.sound[aria-pressed="false"] .bar:nth-of-type(2) { transform: scaleY(calc(4 / 7)); }
.sound[aria-pressed="false"] .bar:nth-of-type(3) { transform: scaleY(calc(4 / 19)); }
.sound[aria-pressed="false"] .bar:nth-of-type(4) { transform: scaleY(calc(4 / 26)); }
/* Pas de cadre au clic ; au clavier, les barres passent en orange */
.sound:focus, .sound:focus-visible { outline: none; }
.sound:focus-visible .bar { background: var(--orange); }
@keyframes bars { from { transform: scaleY(.3); } to { transform: scaleY(1); } }

/* Incitation à lancer la musique : ondes qui pulsent depuis le bouton */
.sound::before, .sound::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 2px;
  width: 36px; height: 36px;
  margin: 0 0 -7px -18px; /* ondes centrées sur l'icône haut-parleur */
  background: var(--orange); /* ondes en aplat orange plein (essai ; avant : pointillé blanc) */
  border-radius: 50%;
  z-index: -1; /* derrière l'icône */
  opacity: 0;
  pointer-events: none;
}
/* Ondes : cycle de 3 s, deux ondes décalées de 1,5 s. Chaque onde reste visible ~2,1 s,
   donc la suivante démarre avant que la précédente ne s'éteigne : il y a toujours de l'orange
   sous le pictogramme. Chaque onde disparaît avant d'atteindre sa taille maximale. */
.sound.is-hinting::before { animation: pulse 3s infinite; }
.sound.is-hinting::after  { animation: pulse 3s 1.5s infinite; }
/* au-dessus des sections orange, les ondes passent en blanc pour rester visibles */
.sound::before, .sound::after { transition: background-color .3s ease; }
.sound.on-orange::before, .sound.on-orange::after { background: var(--blanc); }
.sound.on-orange .sound__icon { color: var(--orange); } /* sinon le haut-parleur blanc se perd dans l’onde blanche */
.sound__icon { transition: opacity .25s, transform .25s, color .3s; }
@keyframes pulse {
  0%   { transform: scale(.55); opacity: 0;   animation-timing-function: cubic-bezier(.25, .8, .35, 1); }
  5%   { opacity: 1; }    /* aplat orange plein, comme les tags et boutons */
  40%  { opacity: .9;  animation-timing-function: linear; }
  70%  { opacity: 0; }   /* l'onde a disparu avant d'atteindre sa taille maximale */
  82%  { transform: scale(var(--pulse-max, 2.4)); opacity: 0; }
  100% { transform: scale(var(--pulse-max, 2.4)); opacity: 0; }
}


/* ============ Pelle en fond (suit le scroll) ============ */
.shovel {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: .75; /* 90 % dans la maquette, baissé pour la lisibilité */
}
.shovel__video { width: 100%; height: 100%; object-fit: contain; } /* pelle entière, centrée, toute la largeur comme dans la maquette */
/* le hero et la section Marchandises, opaques, passent par-dessus */
.hero, main, .footer { position: relative; z-index: 1; }
/* le hero passe au-dessus pour que le bouton son (fixe, placé dans le hero) reste visible sur toute la page */
.hero { z-index: 2; }
.merch, .footer { background: var(--brun); }

/* ============ Titre pelletable (voir shovel-title.js) ============ */
.hero__canvas, .hero__fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.hero__fx { pointer-events: none; z-index: 1; }
/* givre : la vidéo est floutée et légèrement éclaircie à l'intérieur des lettres */
.hero__frost {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  -webkit-backdrop-filter: blur(8px) brightness(1.08);
  backdrop-filter: blur(8px) brightness(1.08);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* le texte HTML reste pour les lecteurs d'écran ; affiché en très légère opacité,
   il laisse deviner les lettres là où la neige a été pelletée */
.hero.has-shovel-title .hero__line { color: rgba(255, 255, 255, .1); }
.hero__name { z-index: 2; } /* le tag « Premier EP » reste au-dessus */
.hero .nav, .hero .sound { z-index: 3; }

/* Étiquette d'incitation au son qui suit le curseur */
.sound-tag {
  position: fixed; left: 0; top: 0; z-index: 60;
  font-size: 20px; white-space: nowrap; pointer-events: none;
  opacity: 0; scale: .6; transform-origin: 50% 100%;
  transition: opacity .2s ease, scale .45s linear(0, .55 12%, 1.08 30%, .98 48%, 1.01 66%, 1);
}
.sound-tag.is-on { opacity: 1; scale: 1; }
.sound-tag.is-gone { opacity: 0; scale: .6; transition: opacity .2s ease, scale .2s ease-in; }
@media (hover: none), (pointer: coarse) { .sound-tag { display: none; } }


/* Tas de neige en bas de page (alimenté par le pelletage du titre) */
.snowbank {
  position: relative; height: 0; overflow: hidden;
  background: var(--brun);
  transition: height .4s ease-out;
}
.snowbank canvas { position: absolute; left: 0; bottom: 0; display: block; }

/* ============ Bloc EP ============ */
.ep {
  display: flex; flex-direction: column; align-items: center; gap: 35px;
  padding: 200px var(--gutter) 160px;
  /* Ancre #musique : le disque arrive à peu près au milieu de l'écran,
     avec au moins 48 px de marge au-dessus du titre (titre + écart = 107 px, demi-disque = 270 px) */
  scroll-margin-top: calc(max(48px, 50vh - 377px) - 200px);
}
.ep__title {
  display: flex; flex-direction: column; gap: 16px;
  width: 250px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
}
.ep__title-right { text-align: right; white-space: nowrap; }

.album {
  position: relative;
  width: min(540px, 100%);
  aspect-ratio: 1;
}
/* --p est une propriété animable : elle passe de 0 à 1 en douceur quand .is-out est ajoutée */
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
.album { --p: 0; transition: --p 1.1s cubic-bezier(.22,.8,.25,1); }
.album.is-out { --p: 1; }
.album:not(.is-out) { transition-duration: .6s; }

/* Animation : --p passe de 0 (variante Default) à 1 (variante « Variant2 » de la maquette).
   Valeurs Figma ramenées en % : album 540 px, vinyle 520 px. */
.album__vinyl {
  position: absolute;
  width: 96.3%; height: 96.3%;
  left: 1.85%; top: 1.85%;
  /* centre : +193 px / +3,5 px ; rotation -25deg → 12deg */
  transform:
    translate(calc(var(--p, 0) * 37.2%), calc(var(--p, 0) * 0.7%))
    rotate(calc(-25deg + var(--p, 0) * 37deg));
  will-change: transform;
}
/* ombre portée de la pochette sur le vinyle (dégradé radial noir → transparent) */
.album__shadow {
  position: absolute;
  left: 64.4%; top: 0;
  width: 18.5%; height: 100%;
  background: radial-gradient(100% 48.7% at 0 48.7%, #000, transparent);
  transform: translateY(2.4%) rotate(-2deg);
  opacity: var(--p, 0);
  pointer-events: none;
}
.album__cover {
  position: absolute; inset: 0; overflow: hidden;
  /* centre : -140 px / +13 px ; rotation 0 → -2deg */
  transform:
    translate(calc(var(--p, 0) * -25.9%), calc(var(--p, 0) * 2.4%))
    rotate(calc(var(--p, 0) * -2deg));
  will-change: transform;
}
.album__cover > img { width: 100%; height: 100%; object-fit: cover; }
.album__tag { position: absolute; right: 20px; bottom: 20px; font-size: 24px; }

/* ============ Singles ============ */
.tracks {
  border-block: 1px dashed var(--brun); /* pointillés seulement en haut et en bas */
  padding: 50px 60px 70px;
}
.tracks__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1180px; margin: 0 auto;
}
.track { display: flex; align-items: center; gap: 30px; }
.track__img { position: relative; flex: none; width: 120px; height: 120px; overflow: hidden; background: var(--white); }
.track__img img { width: 100%; height: 100%; object-fit: cover; }
.track__body { display: flex; flex-direction: column; gap: 12px; color: var(--white); min-width: 0; }
.track__name { font-weight: 700; font-size: 20px; line-height: 1; text-transform: uppercase; }
.track__type { font-size: 16px; line-height: 1; margin-bottom: 8px; }
/* boutons des singles : tous de la même largeur (117 px comme dans la maquette), sans s'étirer sur le titre */
.track .cta { align-self: flex-start; width: 117px; }

/* ============ Spectacles ============ */
.shows { padding: 180px var(--gutter) 160px; overflow: hidden; }
.big-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(250 * var(--px));
  line-height: .8;
  text-transform: uppercase;
  white-space: nowrap;
}
.shows__title {
  /* centré sur la page ; en desktop, la taille est calculée en JS pour déborder un peu de chaque côté */
  position: relative; left: 50%;
  width: max-content;
  transform: translateX(-50%);
}
.shows__sub {
  margin-top: 70px;
  font-family: var(--font-display);
  font-size: 40px; line-height: 1;
  text-transform: uppercase;
  text-align: center;
}
.shows__list {
  display: flex; flex-direction: column; gap: 30px;
  max-width: 1180px; margin: 110px auto 0;
}
.show {
  display: grid;
  grid-template-columns: 271px 1fr auto;
  column-gap: 200px;
  align-items: start;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--white);
  color: var(--white);
}
.show__when, .show__where { display: flex; flex-direction: column; gap: 14px; }
.show__date, .show__city { font-weight: 700; font-size: 24px; line-height: 1; text-transform: uppercase; }
.show__time, .show__venue { font-size: 18px; line-height: 1; }
.show__venue { display: flex; align-items: center; gap: 8px; text-transform: uppercase; }

/* Arrivée par le bas de la liste des spectacles (classes ajoutées en JS) */
.show.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .6s ease-out, transform .8s cubic-bezier(.22, .8, .25, 1);
}
.show.reveal.is-visible { opacity: 1; transform: none; }

/* ============ Marchandises + footer ============ */
.merch { background: var(--brun); padding: 120px var(--gutter) 110px; }
.merch__title {
  display: flex; flex-direction: column;
  max-width: 1180px; margin: 0 auto;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(250 * var(--px));
  line-height: .82;
  color: var(--orange);
  text-transform: uppercase;
  white-space: nowrap;
}
/* Alignements (police à chasse fixe) :
   - le M de « March » sur le bord gauche des images : on retire l'approche gauche du M (--bearing, mesurée en JS)
   - le A de « andises » sous le A de « March » : décalage d'exactement une largeur de lettre (1ch) */
.merch__title > span { margin-left: calc(-1 * var(--bearing, .08em)); }
.merch__title-2 { align-self: flex-start; margin-left: calc(1ch - var(--bearing, .08em)) !important; }

.products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 360px));
  justify-content: space-between;
  gap: 50px;
  max-width: 1180px; margin: 100px auto 0;
}
.product { display: flex; flex-direction: column; gap: 16px; }
.product__img { position: relative; aspect-ratio: 1; overflow: hidden; }
.product__img > img { width: 100%; height: 100%; object-fit: cover; }
/* Bouton zoom : caché hors du cadre (comme dans la maquette), il glisse au survol */
.product__zoom {
  position: absolute; right: 0; bottom: 0;
  transform: translate(100%, 100%);
  transition: transform .25s ease, background-color .2s;
}
.product__img:hover .product__zoom,
.product__zoom:focus-visible { transform: translate(0, 0); }

/* Carré orange des boutons zoom / fermer (pictogramme SVG centré dedans) */
.product__zoom, .lightbox__close {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  background: var(--orange);
  transition: transform .25s ease, background-color .2s;
}
/* Survol : le fond reste orange, le pictogramme brun passe au blanc */
.product__zoom img, .lightbox__close img { transition: filter .2s; }
.product__zoom:hover img, .product__zoom:focus-visible img,
.lightbox__close:hover img, .lightbox__close:focus-visible img { filter: brightness(0) invert(1); }

/* Lightbox */
.lightbox {
  padding: 0; border: 0; background: none;
  max-width: none; max-height: none;
  overflow: visible;
}
.lightbox::backdrop { background: rgba(0, 0, 0, .8); }
.lightbox[open] { animation: lb-in .25s ease-out; }
.lightbox[open]::backdrop { animation: fade .25s ease-out; }
.lightbox.is-closing { animation: lb-out .2s ease-in forwards; }
.lightbox.is-closing::backdrop { animation: fade .2s ease-in reverse forwards; }
.lightbox__frame {
  position: relative;
  /* carré de taille explicite (largeur = hauteur) : le bouton fermer tombe pile dans le coin de l'image */
  width: min(83vh, 92vw);
  height: min(83vh, 92vw);
}
.lightbox__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox__close { position: absolute; right: 0; bottom: 0; z-index: 1; }
/* flèches précédent / suivant : mêmes carrés orange que la croix, de part et d'autre de l'image */
.lightbox__nav {
  position: absolute; top: 50%;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--orange); color: var(--brun);
  translate: 0 -50%;
  transition: color .2s;
}
.lightbox__nav:is(:hover, :focus-visible) { color: var(--white); outline: none; }
.lightbox__nav--prev { left: -52px; }
.lightbox__nav--next { right: -52px; }
.lightbox__caption {
  position: absolute; left: 0; top: calc(100% + 12px);
  color: var(--white); font-size: 14px; font-weight: 700; text-transform: uppercase;
}
/* changement d'image : la nouvelle chasse la précédente (animation en JS) */
.lightbox__stage { position: absolute; inset: 0; overflow: hidden; }
.lightbox__img--out { position: absolute; inset: 0; }
@keyframes lb-in  { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes lb-out { to { opacity: 0; transform: scale(.92); } }
@keyframes fade   { from { opacity: 0; } to { opacity: 1; } }
.product__info {
  display: flex; justify-content: space-between; gap: 16px;
  color: var(--white); font-size: 16px; line-height: 1; text-transform: uppercase;
}
.product__name { font-weight: 700; }
.product__price { white-space: nowrap; }
.product__stock { margin-top: -10px; color: var(--orange); font-size: 14px; line-height: 1; }
.sizes { display: flex; gap: 12px; }

.footer {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: var(--brun);
  padding: 0 calc(var(--gutter) + 80px) 20px var(--gutter);
}
.footer__social { display: flex; gap: 12px; }
/* icônes intégrées dans la page : blanches, orange au survol (variante hover de la maquette) */
.footer__social a { display: block; color: var(--white); transition: color .2s; }
.footer__social a:is(:hover, :focus-visible) { color: var(--orange); outline: none; }
.footer__social svg { display: block; }
.footer__credits { display: flex; align-items: center; gap: 40px; }
.footer__copy { color: var(--gris); font-size: 8px; text-transform: uppercase; }

/* ============ Curseur pelle ============ */
/* dessin : assets/cursors/curseur-pelle-*.svg (redessiné par Matthieu), brun + contour blanc */
/* 3 positions : au repos, sur ce qui est cliquable, et « pelletage » pendant le clic (souris uniquement) */
:root {
  --cur-repos: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cpath transform=%22translate(15 16) rotate(18) scale(0.92) translate(-15 -16)%22 d=%22M16.4,21.4l.8-1.7-1.6-.8,6-11.9.6.3c.8.4,1.9,0,2.3-.8l1.3-2.6-5.8-2.9-1.3,2.6c-.4.8,0,1.9.8,2.3l.6.3-6,11.9-1.6-.8-.8,1.7-4-2-3.4,6.7c-.4.7,0,1.6.7,2l10,5c.7.4,1.6,0,2-.7l3.4-6.7-3.9-2ZM19.7,4.1l.8-1.6,3.8,1.9-.8,1.6c-.1.3-.5.4-.8.3l-2.7-1.4c-.3-.1-.4-.5-.3-.8ZM7.6,24.2c-.1.2-.4.3-.6.2s-.3-.4-.2-.6l1.8-3.7c.1-.2.4-.3.6-.2s.3.4.2.6l-1.8,3.7ZM10.2,25.5c-.1.2-.4.3-.6.2s-.3-.4-.2-.6l1.8-3.7c.1-.2.4-.3.6-.2s.3.4.2.6l-1.8,3.7ZM12.8,26.8c-.1.2-.4.3-.6.2s-.3-.4-.2-.6l1.8-3.7c.1-.2.4-.3.6-.2s.3.4.2.6l-1.8,3.7ZM15.4,28.1c-.1.2-.4.3-.6.2s-.3-.4-.2-.6l1.8-3.7c.1-.2.4-.3.6-.2s.3.4.2.6l-1.8,3.7Z%22 fill=%22%23281b14%22 fill-rule=%22evenodd%22 stroke=%22%23fff%22 stroke-width=%221.52%22 stroke-linejoin=%22round%22 paint-order=%22stroke%22/%3E%3C/svg%3E") 7 25, auto;
  --cur-lien: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cpath transform=%22translate(15 16) rotate(0) scale(0.96) translate(-15 -16)%22 d=%22M16.4,21.4l.8-1.7-1.6-.8,6-11.9.6.3c.8.4,1.9,0,2.3-.8l1.3-2.6-5.8-2.9-1.3,2.6c-.4.8,0,1.9.8,2.3l.6.3-6,11.9-1.6-.8-.8,1.7-4-2-3.4,6.7c-.4.7,0,1.6.7,2l10,5c.7.4,1.6,0,2-.7l3.4-6.7-3.9-2ZM19.7,4.1l.8-1.6,3.8,1.9-.8,1.6c-.1.3-.5.4-.8.3l-2.7-1.4c-.3-.1-.4-.5-.3-.8ZM7.6,24.2c-.1.2-.4.3-.6.2s-.3-.4-.2-.6l1.8-3.7c.1-.2.4-.3.6-.2s.3.4.2.6l-1.8,3.7ZM10.2,25.5c-.1.2-.4.3-.6.2s-.3-.4-.2-.6l1.8-3.7c.1-.2.4-.3.6-.2s.3.4.2.6l-1.8,3.7ZM12.8,26.8c-.1.2-.4.3-.6.2s-.3-.4-.2-.6l1.8-3.7c.1-.2.4-.3.6-.2s.3.4.2.6l-1.8,3.7ZM15.4,28.1c-.1.2-.4.3-.6.2s-.3-.4-.2-.6l1.8-3.7c.1-.2.4-.3.6-.2s.3.4.2.6l-1.8,3.7Z%22 fill=%22%23281b14%22 fill-rule=%22evenodd%22 stroke=%22%23fff%22 stroke-width=%221.46%22 stroke-linejoin=%22round%22 paint-order=%22stroke%22/%3E%3C/svg%3E") 10 28, pointer;
  --cur-pelletage: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cpath transform=%22translate(15 16) rotate(43) scale(0.86) translate(-15 -16)%22 d=%22M16.4,21.4l.8-1.7-1.6-.8,6-11.9.6.3c.8.4,1.9,0,2.3-.8l1.3-2.6-5.8-2.9-1.3,2.6c-.4.8,0,1.9.8,2.3l.6.3-6,11.9-1.6-.8-.8,1.7-4-2-3.4,6.7c-.4.7,0,1.6.7,2l10,5c.7.4,1.6,0,2-.7l3.4-6.7-3.9-2ZM19.7,4.1l.8-1.6,3.8,1.9-.8,1.6c-.1.3-.5.4-.8.3l-2.7-1.4c-.3-.1-.4-.5-.3-.8ZM7.6,24.2c-.1.2-.4.3-.6.2s-.3-.4-.2-.6l1.8-3.7c.1-.2.4-.3.6-.2s.3.4.2.6l-1.8,3.7ZM10.2,25.5c-.1.2-.4.3-.6.2s-.3-.4-.2-.6l1.8-3.7c.1-.2.4-.3.6-.2s.3.4.2.6l-1.8,3.7ZM12.8,26.8c-.1.2-.4.3-.6.2s-.3-.4-.2-.6l1.8-3.7c.1-.2.4-.3.6-.2s.3.4.2.6l-1.8,3.7ZM15.4,28.1c-.1.2-.4.3-.6.2s-.3-.4-.2-.6l1.8-3.7c.1-.2.4-.3.6-.2s.3.4.2.6l-1.8,3.7Z%22 fill=%22%23281b14%22 fill-rule=%22evenodd%22 stroke=%22%23fff%22 stroke-width=%221.63%22 stroke-linejoin=%22round%22 paint-order=%22stroke%22/%3E%3C/svg%3E") 5 21, auto;
}
@media (hover: hover) and (pointer: fine) {
  html, body { cursor: var(--cur-repos); }
  a, button, .cta, label, .sound { cursor: var(--cur-lien); }
  .cta--soldout { cursor: var(--cur-repos); }
  html.is-digging, html.is-digging * { cursor: var(--cur-pelletage) !important; }
}

/* ============ Menu mobile ============ */
.burger, .mobile-menu, .mobile-menu__backdrop { display: none; }

/* ============ Responsive ============ */
@media (max-width: 1100px) {
  .show { grid-template-columns: 1fr 1fr auto; column-gap: 40px; }
  .tracks__list { grid-template-columns: 1fr; max-width: 420px; }
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  :root { --gutter: 24px; } /* marges latérales de la page sur mobile (16 px auparavant) */
  /* la navigation horizontale laisse la place au menu burger */
  .nav { display: none; }
  /* bouton menu : carré orange 36 × 36 dans le coin (composant « actions »), traits bruns → croix */
  .burger {
    position: fixed; top: 0; right: 0; z-index: 30;
    width: 36px; height: 36px;
    display: grid; place-content: center; gap: 4px;
    background: var(--orange);
    cursor: var(--cur-lien);
  }
  .burger span {
    display: block; width: 18px; height: 2px; background: var(--brun);
    transition: transform .35s cubic-bezier(.32,.72,0,1), opacity .2s;
  }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .burger:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

  /* menu déployé (maquette « menu mobile ») : plein écran orange, mots géants coupés sur deux lignes */
  .mobile-menu__backdrop { display: none !important; }
  .mobile-menu {
    display: flex; flex-direction: column; justify-content: center;
    /* valeurs de la maquette (frame 393 px) mises à l'échelle de l'écran : 1 px = 100vw / 393 */
    --u: calc(100vw / 393);
    gap: calc(60 * var(--u));
    position: fixed; inset: 0; z-index: 29;
    padding: 0 calc(29 * var(--u));
    overflow: hidden;
    /* plus de fond plein : ce sont les trois bandes des liens qui couvrent l'écran */
  }
  .mobile-menu[hidden] { display: none; }
  .menu-open, .menu-open body { overflow: hidden; } /* la page ne défile pas derrière le menu */
  .mobile-menu a {
    display: flex; flex-direction: column;
    font-family: var(--font-display);
    font-size: calc(100 * var(--u)); /* Monorama Regular 100 px */
    font-weight: 400;
    line-height: .8;               /* interligne 80 % */
    color: var(--brun);
    text-transform: uppercase;
    position: relative;
    transform: translateX(100vw);
    transition: transform .5s cubic-bezier(.32,.72,0,1);
  }
  /* chaque lien porte sa bande orange : elles se rejoignent à mi-chemin entre les items,
     la première monte jusqu'en haut de l'écran, la dernière descend jusqu'en bas */
  .mobile-menu a::before {
    content: ""; position: absolute; z-index: -1;
    left: calc(-29 * var(--u)); right: calc(-29 * var(--u));
    top: calc(-30 * var(--u) - 1px); bottom: calc(-30 * var(--u) - 1px);
    background: var(--orange);
  }
  .mobile-menu a:first-child::before { top: -100vh; }
  .mobile-menu a:last-child::before { bottom: -100vh; }
  .mobile-menu.is-open a { transform: none; }
  /* ouverture : de haut en bas, décalées ; fermeture : dans l'ordre inverse */
  .mobile-menu.is-open a:nth-child(2) { transition-delay: .07s; }
  .mobile-menu.is-open a:nth-child(3) { transition-delay: .14s; }
  .mobile-menu:not(.is-open) a { transition-duration: .4s; transition-timing-function: cubic-bezier(.55,0,.85,.35); }
  .mobile-menu:not(.is-open) a:nth-child(2) { transition-delay: .06s; }
  .mobile-menu:not(.is-open) a:nth-child(1) { transition-delay: .12s; }
  .mobile-menu a:active { color: var(--white); }
  /* Hero mobile (maquette « Hero mobile », frame 393 × 852) : positions ancrées en bas de l'écran,
     tailles proportionnelles à la largeur (--u = 1 px de maquette) */
  .hero { --u: calc(100vw / 393); }
  .hero__name { inset: 0; font-size: calc(120 * var(--u)); line-height: normal; }
  .hero__line--2 { display: contents; }
  .hero__line--1 { right: auto; bottom: auto; left: calc(2 * var(--u)); top: calc(100% - 446 * var(--u)); }
  .hero__a, .hero__neige { position: absolute; white-space: nowrap; }
  .hero__a { left: calc(323 * var(--u)); top: calc(100% - 353 * var(--u)); }
  .hero__neige { right: calc(4 * var(--u)); top: calc(100% - 243 * var(--u)); }
  .hero__tag {
    right: calc(52 * var(--u)); bottom: auto; top: calc(100% - 266 * var(--u));
    font-size: max(14px, calc(20 * var(--u)));
  }
  .sound { right: 20px; bottom: 20px; --pulse-max: 1.5; } /* position de la maquette ; ondes plus petites pour rester dans l'écran */
  .album__vinyl, .album__shadow { display: none; }
  .album__cover { transform: none; }
  .ep { padding: 100px var(--gutter) 80px; scroll-margin-top: -60px; }
  .ep__title { font-size: 28px; width: 190px; }
  .tracks { padding: 40px var(--gutter); }
  /* Pelle en fond : à la verticale sur mobile (manche en haut, lame en bas) pour garder son impact */
  .shovel__video {
    position: absolute; top: 50%; left: 50%;
    width: 100vh; width: 100svh;  /* la largeur de la vidéo devient la hauteur de l'écran */
    height: 100vw;
    translate: -50% -50%;
    rotate: 90deg;
  }

  .shovel { opacity: .55; } /* encore plus discrète sur mobile, où elle passe sous le texte */

  /* Marchandises mobile (maquette « merch », frame 393 px) : MARCH / ANDI / SES */
  .merch { padding-top: 90px; }
  .merch__title {
    font-size: calc(100vw * 100 / 393); /* SemiBold 100 px sur 393 px */
    line-height: .8;
    margin-left: calc(100vw * -9 / 393); /* texte calé à 15 px dans la maquette */
  }
  .merch__title > span, .merch__title-2 { margin-left: 0 !important; }
  .merch__title-2 > span { display: block; }
  .products { margin-top: 50px; gap: 50px; }

  /* Boutons plus compacts sur mobile (desktop : 20 px de texte, 15 × 20 px de marge intérieure) */
  .cta { min-width: 96px; padding: 11px 16px; font-size: 16px; border-radius: 10px; }
  .track .cta { width: 96px; }

  /* Spectacles mobile (maquette « spectacles », frame 393 px) */
  .shows { padding: 90px var(--gutter) 80px; }
  .shows__title {
    left: 0; width: auto; transform: none; text-align: left;
    font-size: calc(100vw * 100 / 393); /* SemiBold 100 px sur 393 px */
    line-height: .8;
    margin-left: calc(100vw * -9 / 393); /* texte calé à 15 px dans la maquette (approche gauche du S) */
  }
  .shows__title span { display: block; } /* SPECT / ACLES */
  .shows__sub { text-align: left; font-size: 40px; margin-top: 30px; }
  .shows__list { margin-top: 60px; gap: 30px; }
  .show {
    grid-template-columns: auto 1fr;
    grid-template-areas: "date date" "city city" "time venue" "cta cta";
    column-gap: 24px; row-gap: 0;
    align-items: center;
  }
  .show__when, .show__where { display: contents; }
  .show__date  { grid-area: date; font-size: 18px; }
  .show__city  { grid-area: city; font-size: 18px; margin-top: 6px; }
  .show__time  { grid-area: time; font-size: 14px; text-transform: uppercase; margin-top: 12px; }
  .show__venue { grid-area: venue; font-size: 14px; margin-top: 12px; }
  .show .cta   { grid-area: cta; justify-self: start; margin-top: 24px; }
  .merch { padding: 80px var(--gutter); }
  .products { grid-template-columns: 1fr; margin-top: 60px; }
  .product__zoom { transform: none; } /* pas de survol sur mobile : bouton toujours visible */
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
  .footer { flex-direction: column; align-items: flex-start; padding: 0 var(--gutter) 20px; }
  .footer__credits { flex-wrap: wrap; gap: 20px; }
  /* logos côte à côte, le Canada empilé dimensionné pour équilibrer celui de la SODEC */
  .footer__copy { flex-basis: 100%; margin: 0; }
  .footer__canada, .footer__canada img { display: block; }
  .footer__canada img { width: 104px; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}