/* ══════════════════════════════════════════════════════════════════════════════
   LA FICHE D'UN BEAT — page produit, pas page de texte.

   Ses mots (27/08/2026) : « ureshima c'est pas beau tu peux mieux presenter les
   fiches des beats que ce soit esthetique !!!!!! tu as des yeux oublie pas ! »

   Il avait raison, et le pire était mesurable. Ce que la capture montrait :
     🔴 la pochette rendue en 340 × 1200 — un carré ÉTIRÉ sur toute la hauteur,
        faute d'`aspect-ratio` sur une image `width:100%;max-width:340px` ;
     🔴 tout empilé dans une colonne de 880 px calée à gauche d'un écran de 1440 —
        exactement le « site mobile agrandi » que `design-system.md` interdit ;
     🔴 le lecteur `<audio controls>` NATIF, barre grise du navigateur, sur un site
        dont la home a une onde dessinée depuis le son ;
     🔴 aucun badge, aucune carte, aucun prix visible avant de scroller.

   Ce qu'on met à la place, en suivant les règles :
     · desktop = DEUX COLONNES (pochette carrée sticky à gauche, l'achat à droite) ;
     · le prix et les trois licences visibles SANS scroller ;
     · le même lecteur que la home — pochette, onde, temps ;
     · des cartes de licence cliquables, la Premium mise en avant ;
     · la couleur vient de la POCHETTE, comme sur la home (`--vif`) ;
     · au doigt, tout se rempile dans l'ordre : pochette, titre, écoute, licences.
   ══════════════════════════════════════════════════════════════════════════════ */

.fiche {
  max-width: 1180px; margin-inline: auto; padding: 34px 22px 120px;
}

/* le fil d'Ariane : petit, discret, mais il porte le maillage interne */
.fil { font-size: 13px; color: var(--txt3); margin-bottom: 22px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fil a { color: var(--txt2); text-decoration: none; }
.fil a:hover { color: var(--vif); }
.fil span { opacity: .45; }

.fiche-in { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: start; }
@media (min-width: 940px) {
  .fiche-in { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 54px; }
  /* la pochette suit le regard pendant qu'on lit les licences */
  .fiche-gauche { position: sticky; top: 86px; }
}

/* ── la pochette : CARRÉE, c'est tout le sujet ──────────────────────────── */
.fiche-cover {
  position: relative; width: 100%; aspect-ratio: 1;   /* ⚠️ LE correctif */
  border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9);
}
.fiche-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* le halo prend la couleur de la pochette, comme la home */
.fiche-gauche::after {
  content: ''; position: absolute; inset: -14% -10% 40%; z-index: -1;
  background: radial-gradient(50% 50% at 50% 45%, var(--vif) 0%, transparent 70%);
  opacity: .16; filter: blur(30px); pointer-events: none;
}
.fiche-gauche { position: relative; }

/* ── la colonne d'achat ─────────────────────────────────────────────────── */
.fiche-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.bdg {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px;
  border-radius: 999px; font-size: 11.5px; font-weight: 650; letter-spacing: .1em;
  text-transform: uppercase; border: 1px solid var(--ligne); color: var(--txt2);
}
.bdg-vif { color: var(--vif); border-color: var(--vif-doux); background: color-mix(in srgb, var(--vif) 10%, transparent); }

.fiche h1 {
  font-size: clamp(32px, 4.6vw, 54px); line-height: 1.03; letter-spacing: -.02em;
  margin: 0 0 12px;
}
.fiche-sous { color: var(--txt2); font-size: 16.5px; margin: 0 0 24px; line-height: 1.6; }

/* Le prix : ce qui décide, donc ce qu'on voit — et d'un seul tenant.
   🔴 27/08, vu en capture à 390 px : « dès 29 CHF » se cassait en « dès 29 » /
   « CHF » sur deux lignes, pendant que la mention restait à côté. Un prix coupé en
   deux ne se lit plus comme un prix. Il ne se coupe donc jamais, et au doigt la
   mention passe DESSOUS au lieu de lui disputer la ligne. */
.fiche-prix { display: flex; align-items: baseline; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.fiche-prix b { font-size: 34px; letter-spacing: -.02em; white-space: nowrap; }
.fiche-prix span { font-size: 13.5px; color: var(--txt3); }
@media (max-width: 520px) {
  .fiche-prix { flex-direction: column; align-items: flex-start; gap: 3px; }
  .fiche-prix b { font-size: 30px; }
}

/* ── le lecteur, celui de la marque, pas celui du navigateur ────────────── */
.fiche-ecoute {
  display: flex; align-items: center; gap: 15px; padding: 14px 16px;
  background: rgba(19, 19, 42, .6); border: 1px solid var(--ligne);
  border-radius: 16px; backdrop-filter: blur(10px); margin-bottom: 26px;
}
.fiche-play {
  width: 50px; height: 50px; flex: 0 0 auto; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--vif); color: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 26px -8px var(--vif); transition: transform .18s;
}
.fiche-play:hover { transform: scale(1.06); }
.fiche-play:active { transform: scale(.94); }
.fiche-play svg { width: 19px; height: 19px; }
.fiche-onde { flex: 1; min-width: 0; height: 40px; cursor: pointer; display: block; }
.fiche-temps { font-size: 12px; color: var(--txt3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── les licences en cartes ─────────────────────────────────────────────── */
.fiche-lic-t { font-size: 13px; text-transform: uppercase; letter-spacing: .16em; color: var(--txt3); margin: 0 0 13px; }
.fiche-lics { display: grid; gap: 11px; margin-bottom: 24px; }
/* 🔴 27/08 — LE DÉBORDEMENT DE 24 px VENAIT D'ICI, ET C'EST UN CLASSIQUE.
   Une colonne `1fr` d'une grille CSS a `min-width: auto` par défaut : elle refuse de
   descendre sous la largeur du plus long mot INSÉCABLE de son contenu. La ligne
   « MP3 320 kbps · une diffusion commerciale · jusqu'à 10 000 streams » imposait
   donc sa largeur, et la page entière débordait vers la droite.
   Mesuré : scrollWidth 524 px pour un viewport de 500. `min-width: 0` rend la
   colonne compressible, le texte se replie, plus rien ne dépasse.
   ⚠️ Même piège que le 09/08 sur le livre menu (« un enfant de grille a
      min-height: auto »). C'est la même règle, sur l'autre axe. */
.lic {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px;
  align-items: center; padding: 15px 17px; border-radius: 15px;
  border: 1px solid var(--ligne); background: rgba(255, 255, 255, .015);
  transition: border-color .22s, background .22s, transform .22s;
}
.lic > * { min-width: 0; }
.lic:hover { border-color: var(--vif-doux); transform: translateY(-2px); }
.lic.mise { border-color: var(--vif); background: color-mix(in srgb, var(--vif) 7%, transparent); }
.lic-nom { font-weight: 700; font-size: 16px; margin-bottom: 3px; display: flex; align-items: center; gap: 9px; }
.lic-etq {
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; background: var(--vif); color: #fff;
}
.lic-quoi { font-size: 13.5px; color: var(--txt2); line-height: 1.5; }
.lic-prix { font-size: 21px; font-weight: 700; white-space: nowrap; letter-spacing: -.01em; }

/* ── les deux boutons ───────────────────────────────────────────────────── */
.fiche-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.fiche-ctas .cta { flex: 1 1 auto; justify-content: center; min-width: 180px; }
.fiche-note { font-size: 12.5px; color: var(--txt3); line-height: 1.6; }

/* ── « dans le même genre » ─────────────────────────────────────────────── */
.fiche-voisins { margin-top: 54px; }
.fiche-voisins h2 { font-size: 21px; margin: 0 0 16px; }
.voisins { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 15px; }
.voisin {
  display: block; text-decoration: none; color: inherit; border-radius: 14px; overflow: hidden;
  background: var(--carte); border: 1px solid transparent; transition: border-color .22s, transform .22s;
}
.voisin:hover { border-color: var(--vif-doux); transform: translateY(-3px); }
.voisin img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.voisin-bas { padding: 11px 13px 13px; }
.voisin-t { font-weight: 650; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voisin-m { font-size: 11.5px; color: var(--txt3); margin-top: 3px; }

@media (prefers-reduced-motion: reduce) {
  .lic, .voisin, .fiche-play { transition: none; }
}