/* =========================================================================
   READY RELEASE — MUSIC VIDEOS (v145)

   Feuille SPECIFIQUE a /music-videos.html. Elle ne redefinit AUCUN token :
   les couleurs, polices, rayons et rythmes viennent de main.v135.css, qui
   reste la source unique. On n'ajoute ici que les composants qui n'existent
   nulle part ailleurs sur le site.

   UNE SEULE EXCEPTION, depuis la v145 : --section-y est redefinie en bas de
   fichier pour resserrer le rythme vertical. La surcharge vit sur :root
   mais cette feuille n'est chargee que par music-videos.html, donc aucune
   autre page n'est touchee.

   /!\ LE NOM PORTE LA VERSION. netlify.toml sert /assets/css/* en
   `immutable` pour un an : editer ce fichier sans le renommer laisserait
   les visiteurs deja venus sur l'ancienne copie. A la prochaine version,
   renommer en music-videos.v146.css ET repercuter dans music-videos.html.
   La v145 a change de nom pour cette raison exacte : le bloc de correction
   ajoute en fin de fichier modifie le rendu de la v144.

   Regle de nommage : prefixe `mv-` partout, pour qu'aucun selecteur ne
   puisse entrer en collision avec un composant existant.
   ========================================================================= */

/* --------------------------------------------------------------- ANCRES
   L'en-tete est en position:fixed. Sans ce decalage, « See the difference »
   ferait atterrir le titre de section SOUS le logo. main.v135.css pose
   deja la regle pour #order et #faq ; #approaches et #difference sont
   nouveaux et doivent etre declares ici. */
#approaches, #difference, #order, #faq { scroll-margin-top: 6.5rem; }
@media (max-width: 760px) {
  #approaches, #difference, #order, #faq { scroll-margin-top: 5rem; }
}

/* ------------------------------------------------------------------ HERO
   Pas de .hero plein ecran ici : une page d'atterrissage payante doit
   montrer l'offre ET la preuve video sans defilement sur desktop. Le hero
   fait donc une hauteur de contenu, pas 100svh. */
.mv-hero {
  padding-top: clamp(7.5rem, 15vw, 11rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.mv-hero__in { max-width: 60ch; }
.mv-hero__t {
  margin-top: 1.25rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.15rem, 5.4vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.mv-hero__t .mv-hl { color: var(--signal); }
.mv-hero__sub {
  margin-top: 1.35rem;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ash);
  max-width: 52ch;
}
.mv-hero__act {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}
.mv-hero__act .btn { --pad-y: 1.05rem; --pad-x: 1.9rem; }
.mv-hero__re {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-family: var(--caps);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ash);
}
.mv-hero__re span { display: inline-flex; align-items: center; gap: 0.5rem; }
.mv-hero__re span::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--signal-dim); flex: none;
}

/* -------------------------------------------------------------- SHOWCASE
   Le conteneur video est un composant a part entiere pour une raison
   precise : le fichier affiche aujourd'hui (clip-open.mp4) sera remplace
   par le clip final. Le remplacement doit se limiter a l'attribut
   `data-src` et au `poster` — aucune structure, aucune classe, aucune
   regle de style a toucher. Voir le commentaire du bloc dans le HTML. */
.mv-show { padding-block: clamp(1rem, 2vw, 2rem) var(--section-y); }
.mv-show__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
}
.mv-show__v {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Etat au repos : voile + bouton. Il disparait des la lecture, sinon il
   couvrirait la preuve qu'il est cense vendre. */
.mv-show__play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(10,11,13,0.30), rgba(10,11,13,0.55));
  cursor: pointer;
  transition: opacity 0.35s var(--ease), background 0.35s var(--ease);
}
.mv-show.is-playing .mv-show__play { opacity: 0; pointer-events: none; }
.mv-show__play:hover {
  background: linear-gradient(180deg, rgba(10,11,13,0.18), rgba(10,11,13,0.44));
}
.mv-show__tri {
  width: clamp(3.25rem, 5vw, 4.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(242,240,235,0.55);
  background: rgba(10,11,13,0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}
.mv-show__tri::after {
  content: '';
  border-style: solid;
  border-width: 0.45rem 0 0.45rem 0.72rem;
  border-color: transparent transparent transparent var(--bone);
  margin-left: 0.2rem;
}
.mv-show__play:hover .mv-show__tri { transform: scale(1.07); border-color: var(--bone); }
.mv-show__play:focus-visible { outline: 2px solid var(--signal); outline-offset: -4px; }
.mv-show__tag {
  position: absolute; right: 0.8rem; bottom: 0.75rem;
  font-family: var(--caps);
  font-size: 0.5625rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bone);
  background: rgba(10,11,13,0.62);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.mv-show.is-playing .mv-show__tag { opacity: 0; }
.mv-show__cap {
  margin-top: 0.9rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ash-dim);
  max-width: 64ch;
}

/* ------------------------------------------------------------------- WHY */
.mv-sec__t {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.04;
  letter-spacing: -0.035em;
  max-width: 20ch;
  text-wrap: balance;
}
.mv-sec__lead {
  margin-top: 1.25rem;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ash);
  max-width: 58ch;
}
.mv-why__grid {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.mv-why__i {
  background: var(--void);
  padding: clamp(1.4rem, 2.6vw, 2rem) clamp(1rem, 1.8vw, 1.5rem);
}
.mv-why__k {
  font-family: var(--caps);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
}
.mv-why__p {
  margin-top: 0.7rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ash);
}

/* ------------------------------------------------------- DEUX APPROCHES
   Deux cartes de MEME poids visuel. C'est un choix commercial, pas une
   negligence : les deux methodes produisent le meme livrable au meme
   prix (SKU `clip`), et mettre l'une en avant ferait croire a un palier
   superieur qui n'existe pas au catalogue. */
.mv-two__grid {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.mv-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--void-2);
  overflow: hidden;
  transition: border-color 0.35s var(--ease);
}
.mv-card:hover { border-color: var(--line-strong); }
.mv-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface);
}
.mv-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mv-card__badge {
  position: absolute; top: 0.7rem; left: 0.7rem;
  font-family: var(--caps);
  font-size: 0.5625rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bone);
  background: rgba(10,11,13,0.68);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
}
.mv-card__body {
  padding: clamp(1.35rem, 2.4vw, 1.9rem);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.mv-card__n {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  letter-spacing: -0.02em;
}
.mv-card__claim {
  margin-top: 0.5rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--signal);
}
.mv-card__d {
  margin-top: 0.8rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ash);
}
.mv-card__for {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ash-dim);
}
.mv-card__for b { color: var(--bone); font-weight: 600; }
.mv-card__list { margin-top: 1.1rem; display: grid; gap: 0.5rem; }
.mv-card__list li {
  position: relative;
  padding-left: 1.05rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--bone);
}
.mv-card__list li::before {
  content: ''; position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 6px;
  border-left: 1.5px solid var(--signal);
  border-bottom: 1.5px solid var(--signal);
  transform: rotate(-45deg);
}
.mv-card__foot { margin-top: auto; padding-top: 1.5rem; }
.mv-card__p {
  display: flex; align-items: baseline; gap: 0.6rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.mv-card__p small {
  font-family: var(--caps);
  font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ash-dim);
}
.mv-card__cta { margin-top: 1rem; width: 100%; justify-content: center; }
.mv-two__same {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ash);
  max-width: 72ch;
}
.mv-two__same b { color: var(--bone); font-weight: 600; }

/* -------------------------------------------------------- LA DIFFERENCE
   Deux colonnes, jamais un tableau : un tableau a deux colonnes se
   transforme mal en mobile, et le §17 du brief interdit le defilement
   horizontal. Ici c'est une grille qui devient une pile, sans reflow. */
.mv-diff {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.mv-diff__c { padding-top: 1.15rem; border-top: 1px solid var(--line-strong); }
.mv-diff__c--ai { border-top-color: var(--signal); }
.mv-diff__k {
  font-family: var(--caps);
  font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ash-dim);
}
.mv-diff__c--ai .mv-diff__k { color: var(--signal); }
.mv-diff__t {
  margin-top: 0.8rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  letter-spacing: -0.025em;
  line-height: 1.14;
}
.mv-diff__p {
  margin-top: 0.8rem;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ash);
  max-width: 44ch;
}
.mv-diff__tags { margin-top: 1.2rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mv-diff__tags li {
  font-family: var(--caps);
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ash);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
}
.mv-diff__c--ai .mv-diff__tags li { color: var(--bone); border-color: var(--line-strong); }
.mv-diff__note {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ash-dim);
  max-width: 64ch;
}

/* ------------------------------------------------------------ LA CHAINE */
.mv-chain {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.7rem;
}
.mv-chain li {
  font-family: var(--caps);
  font-size: clamp(0.75rem, 1.1vw, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
}
.mv-chain li + li::before {
  content: '\2192';
  margin-right: 0.7rem;
  color: var(--ash-dim);
  font-size: 0.75rem;
}
.mv-chain li:last-child { color: var(--bone); }
.mv-dir {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}
.mv-dir__i { padding-top: 1rem; border-top: 1px solid var(--line); }
.mv-dir__i:first-child { border-top-color: var(--signal); }
.mv-dir__k {
  font-family: var(--caps);
  font-size: 0.65rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--signal);
}
.mv-dir__p {
  margin-top: 0.6rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--bone);
}

/* --------------------------------------------------------- CE QUE VOUS RECEVEZ
   Les listes de cette section sont la COPIE des livrables deja affiches
   au checkout (checkout-copy.v143.js, cles `clip:footage` et `clip:ai`).
   Elles ne doivent pas diverger : ce que la page promet est ce que le
   tunnel de commande confirme. Si l'une change, changer l'autre. */
.mv-get {
  margin-top: clamp(2.25rem, 4.5vw, 3.25rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.mv-get__h {
  font-family: var(--caps);
  font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--signal);
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
}
.mv-get__l { margin-top: 1.15rem; display: grid; gap: 0.75rem; }
.mv-get__l li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--bone);
}
.mv-get__l li::before {
  content: ''; position: absolute; left: 0; top: 0.65em;
  width: 6px; height: 1px; background: var(--signal);
}
.mv-get__note {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ash-dim);
  max-width: 68ch;
}

/* ------------------------------------------------------------ HOW IT WORKS */
.mv-steps { margin-top: clamp(2.25rem, 4.5vw, 3.25rem); display: grid; }
.mv-step {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0 1.35rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--line);
}
.mv-step:last-child { border-bottom: 1px solid var(--line); }
.mv-step:first-child { border-top-color: var(--signal); }
.mv-step__n {
  font-family: var(--caps);
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ash-dim);
  padding-top: 0.3em;
}
.mv-step:first-child .mv-step__n { color: var(--signal); }
.mv-step__t {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-body);
  letter-spacing: -0.012em;
  color: var(--bone);
}
.mv-step__d {
  grid-column: 2;
  margin-top: 0.35rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ash);
  max-width: 62ch;
}

/* ------------------------------------------------------------ VALEUR CONTENU */
.mv-use {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.mv-use li {
  font-family: var(--display);
  font-size: clamp(1rem, 1.9vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ash);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.5rem 1.15rem;
}
.mv-use__note {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ash-dim);
  max-width: 64ch;
}

/* ------------------------------------------------------------------- PRIX
   AUCUN MONTANT N'EST ECRIT ICI NI DANS LE HTML EN DUR. Le chiffre vient
   de [data-live-price="clip"], peint par music-videos.v144.js depuis
   window.RR_PRICING, qui suit le selecteur de devise du pied de page. La
   valeur ecrite dans le HTML est un repli visible seulement si le moteur
   de prix ne charge pas. */
.mv-price {
  margin-top: clamp(2rem, 4vw, 3rem);
  position: relative;
  border: 1px solid var(--signal-dim);
  border-radius: var(--radius-m);
  background: radial-gradient(110% 130% at 12% 0%, rgba(232,197,71,0.10), transparent 68%), var(--surface);
  padding: clamp(1.6rem, 3.2vw, 2.75rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: center;
}
.mv-price__l { display: grid; gap: 0.75rem; }
.mv-price__amt {
  display: flex; align-items: baseline; gap: 0.65rem; flex-wrap: wrap;
}
.mv-price__n {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 4rem);
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.mv-price__u {
  font-family: var(--caps);
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--signal);
}
.mv-price__t {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--bone);
  max-width: 24ch;
}
.mv-price__p { font-size: 0.9375rem; line-height: 1.6; color: var(--ash); max-width: 46ch; }
.mv-price__r { display: grid; gap: 0.7rem; }
.mv-price__r .btn { width: 100%; justify-content: center; --pad-y: 1.05rem; }
.mv-price__note { font-size: 0.8125rem; line-height: 1.5; color: var(--ash-dim); }

/* ------------------------------------------------------------- CROSS-SELL
   Discret, et APRES le prix du clip. Le pack Complete contient le clip :
   le montrer avant reviendrait a proposer un panier plus cher a un
   visiteur venu acheter une seule chose. */
.mv-cross {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}
.mv-cross__t { font-size: 0.9375rem; line-height: 1.6; color: var(--ash); max-width: 58ch; }
.mv-cross__t b { color: var(--bone); font-weight: 600; }
.mv-cross__a {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--signal);
  border-bottom: 1px solid rgba(232,197,71,0.4);
  padding-bottom: 2px;
  white-space: nowrap;
}
.mv-cross__a:hover { border-bottom-color: var(--signal); }

/* ------------------------------------------------------------- FINAL CTA */
.mv-end { text-align: center; padding-block: clamp(4rem, 9vw, 7rem); }
.mv-end__t {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: 1.04;
  letter-spacing: -0.038em;
  max-width: 20ch;
  margin-inline: auto;
  text-wrap: balance;
}
.mv-end__p {
  margin: 1.35rem auto 0;
  max-width: 46ch;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ash);
}
.mv-end__a { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.mv-end__a .btn { --pad-y: 1.15rem; --pad-x: 2.4rem; }

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

   Le mobile n'est pas un desktop retreci : les grilles a 2 et 4 colonnes
   deviennent des piles, les tailles de titre sont bornees explicitement et
   le rythme vertical est reduit. Cibles verifiees : 320 / 375 / 390 / 430.
   ========================================================================= */
@media (max-width: 1080px) {
  .mv-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mv-dir { grid-template-columns: 1fr; gap: 0; }
  .mv-dir__i { margin-top: 1rem; }
  .mv-price { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .mv-two__grid { grid-template-columns: 1fr; }
  .mv-diff { grid-template-columns: 1fr; gap: 2rem; }
  .mv-get { grid-template-columns: 1fr; gap: 2.25rem; }
}

@media (max-width: 620px) {
  /* Le hero doit tenir en un ecran : quoi / pour qui / bouton. */
  .mv-hero { padding-top: clamp(6rem, 22vw, 8rem); }
  .mv-hero__t { font-size: clamp(2.125rem, 9.2vw, 2.5rem); line-height: 1.06; }
  .mv-hero__sub { font-size: 1rem; line-height: 1.55; }
  .mv-hero__act { gap: 0.6rem; }
  .mv-hero__act .btn { width: 100%; justify-content: center; }

  .mv-sec__t { font-size: clamp(1.75rem, 7.8vw, 2rem); max-width: none; }
  .mv-sec__lead { font-size: 1rem; max-width: none; }

  /* 16:9 sur un ecran de 320px fait 180px de haut : trop peu pour une
     preuve. Le 4:3 rend la video lisible sans deborder. */
  .mv-show__stage { aspect-ratio: 4 / 3; }

  .mv-why__grid { grid-template-columns: 1fr; }
  .mv-card__media { aspect-ratio: 16 / 9; }
  .mv-card__n { font-size: 1.3rem; }
  .mv-diff__t { font-size: 1.35rem; }
  .mv-diff__p { max-width: none; }

  .mv-step { grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0 0.9rem; }
  .mv-step__d { max-width: none; }

  .mv-use li { font-size: 1rem; padding: 0.45rem 0.9rem; }

  .mv-price { padding: 1.4rem 1.15rem; }
  .mv-price__n { font-size: clamp(2.4rem, 12vw, 3rem); }
  .mv-price__t { max-width: none; }
  .mv-price__p { max-width: none; }

  .mv-cross { flex-direction: column; align-items: flex-start; }
  .mv-cross__a { white-space: normal; }

  .mv-end__t { font-size: clamp(1.85rem, 8.5vw, 2.25rem); max-width: none; }
  .mv-end__p { font-size: 1rem; }
  .mv-end__a .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .mv-show__play, .mv-show__tri, .mv-card { transition: none; }
  .mv-show__play:hover .mv-show__tri { transform: none; }
}

/* =========================================================================
   v145 — PASSE DE CORRECTION

   Ce bloc est ajoute EN FIN DE FICHIER, apres les regles d'origine, pour
   que les surcharges gagnent par ordre de cascade sans qu'aucune regle
   existante n'ait a etre reecrite. On peut donc relire la version d'avant
   en supprimant ce bloc, et rien d'autre.
   ========================================================================= */

/* ------------------------------------------------------- 6. RESPIRATION
   Le rythme vertical du site est pilote par --section-y, defini dans
   main.v135.css a clamp(5rem, 12vw, 11rem) : jusqu'a 176px de vide
   au-dessus ET en dessous de chaque section, soit plus de 350px de noir
   entre deux blocs sur un grand ecran. C'est un rythme d'accueil
   editoriale, pas de page de conversion payante.

   /!\ On ne touche PAS main.v135.css : la variable est simplement
   redefinie sur :root depuis CETTE feuille, qui n'est chargee que par
   music-videos.html. Aucune autre page du site n'est affectee.

   Ratio : environ 45 % de hauteur en moins entre sections sur desktop. */
:root { --section-y: clamp(2.75rem, 5.5vw, 5rem); }

.mv-show { padding-block: 0 clamp(2rem, 4vw, 3.25rem); }
.mv-end { padding-block: clamp(3rem, 6vw, 5rem); }

/* Les marges internes des blocs suivaient le meme exces : elles sont
   resserrees dans les memes proportions. */
.mv-why__grid,
.mv-two__grid,
.mv-diff,
.mv-get,
.mv-steps,
.mv-price { margin-top: clamp(1.75rem, 3.2vw, 2.5rem); }
.mv-chain, .mv-use { margin-top: clamp(1.5rem, 2.8vw, 2.25rem); }
.mv-dir { margin-top: clamp(1.5rem, 2.8vw, 2.25rem); }
.mv-cross { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.mv-sec__lead { margin-top: 1rem; }

@media (max-width: 620px) {
  /* Sur mobile le vide se lit comme une page qui ne finit pas. Le rythme
     y est encore plus serre que le ratio desktop. */
  :root { --section-y: 2.25rem; }
  .mv-hero { padding-bottom: 1.25rem; }
  .mv-show { padding-block: 0 1.5rem; }
  .mv-end { padding-block: 2.5rem; }
  .mv-why__grid,
  .mv-two__grid,
  .mv-diff,
  .mv-get,
  .mv-steps,
  .mv-price { margin-top: 1.5rem; }
}

/* ------------------------------------------------- 2. et 3. CADRES VIDES
   Les conteneurs gardent leurs proportions, leur bordure et leur rayon :
   ce sont exactement les memes cadres, sans contenu. Le fond est un
   degrade tres sourd plutot qu'un aplat, pour qu'un cadre vide se lise
   comme un emplacement reserve et non comme un trou de chargement. */
.mv-show__stage--empty,
.mv-card__media--empty {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(232,197,71,0.06), transparent 62%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
}
/* La balise <video> reste en place, prete a recevoir data-src et poster.
   Sans source elle dessinerait un aplat noir par-dessus le cadre : on la
   masque tant qu'elle est vide, sans la retirer du DOM. */
.mv-show__stage--empty .mv-show__v { visibility: hidden; }

/* ------------------------------------------- 2. LEGENDE SOUS LA VITRINE
   Trois lignes etroites alignees a gauche devenaient deux lignes centrees
   sur toute la largeur du cadre. `max-width: none` remplace le 64ch
   d'origine : la legende suit desormais exactement la largeur de la
   vitrine, puisque les deux vivent dans le meme .container. */
.mv-show__cap {
  max-width: none;
  text-align: center;
  margin-top: 1.1rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  text-wrap: balance;
}
@media (max-width: 620px) {
  /* En dessous de 620px, deux lignes ne tiennent pas sans reduire le
     corps sous le minimum lisible. On laisse le texte se replier. */
  .mv-show__cap { text-align: center; font-size: 0.875rem; }
}

/* ====================================================================
   v154 — LECTEURS VIMEO DANS LES CADRES EXISTANTS

   Aucun cadre n'est redimensionne et aucune carte ne change de hauteur :
   ces regles ne decrivent que la maniere dont le lecteur se loge DANS le
   cadre deja en place.

   Le probleme concret : le cadre des deux cartes est en 16:10, les trois
   videos sont en 1280x720, soit 16:9. Etirer l'iframe au cadre
   deformerait l'image ; la recouvrir en `cover` la rognerait. Les deux
   sont exclus. Le lecteur garde donc son ratio et se centre, ce qui
   laisse un liseré haut et bas — invisible, puisqu'il montre le fond du
   cadre, qui est deja sombre.

   Le grand cadre de la vitrine est, lui, deja en 16:9 : le lecteur
   l'occupe entierement, sans liseré.

   `--mv-ar` porte le ratio de la video, ecrit dans le HTML au plus pres
   de l'URL Vimeo. Une video d'un autre format se logera correctement en
   changeant cette seule valeur.
   ==================================================================== */
.mv-embed {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.mv-embed__f {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--mv-ar, 16 / 9);
  max-height: 100%;
  border: 0;
}

/* Le cadre des cartes est plus haut que la video (16:10 contre 16:9) :
   c'est donc la largeur qui commande, et la hauteur suit le ratio sans
   jamais depasser le cadre. */