/* Luna — report des maquettes validées le 19/10/2026 (docs/research/lecteur-luna-2026-10-19/, CAHIER-DU-REPORT.md).
   Sections : A lecteur plein écran · B volet « Ensuite » · C panier · D pages titre · E ordinateur (>= 900 px).
   Règle d'isolation : TOUT sélecteur commence par une classe racine `luna-…` (jamais d'élément nu, jamais `.fb-…` seul).
   Rien ne s'applique tant que le balisage ne porte pas ces classes (voir tmp/agents/2026-10-19-luna-integration.md).
   Un seul jaune : var(--ambre) (#e8a93b). À plat : seuls les ronds permis sont lecture, « + », cœur/réduire, points d'état. Pochettes carrées.
   Variables posées par le JS sur <html> ou sur la racine .luna-lecteur :
     --luna-fond  (couleur de la pochette, sombre, texte crème >= 7:1)   --luna-fond2 (plus sombre, bas du dégradé)
     --luna-teinte (teinte 0-360 de la pochette, informatif)               --luna-pos (progression, ex. 39%)
   Repli sans JS : fond neutre #2b2b27 / #1c1c19. */

.luna-lecteur, .luna-volet, .luna-panier, .luna-sortie {
  --luna-creme: #f5f3ee; --luna-encre: #1e1220;
  --luna-c2: color-mix(in oklab, var(--luna-creme) 66%, transparent);
  --luna-fil: color-mix(in oklab, var(--luna-creme) 13%, transparent);
}
/* Repli sans JS, sur la racine seulement : les variables calculées par lecteur-couleur.js (posées sur <html>) s'héritent donc partout. */
:root { --luna-fond: #2b2b27; --luna-fond2: #1c1c19; --luna-teinte: 60; }

/* ============ A. LECTEUR PLEIN ÉCRAN (dialog#vue.fb-plein.luna-lecteur) — mobile d'abord ============ */
.luna-lecteur {
  position: fixed; inset: 0; margin: 0; padding: 0; border: 0; width: 100%; max-width: none; height: 100%; max-height: none;
  overflow: hidden; color: var(--luna-creme);
  background: linear-gradient(180deg, var(--luna-fond) 40%, var(--luna-fond2) 100%);
  font: 400 16px/1.45 var(--texte);
}
.luna-lecteur::backdrop { background: var(--luna-fond2); }
.luna-lecteur svg { display: block; }
:where(.luna-lecteur) button { color: inherit; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.luna-ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.luna-plein { fill: currentColor; stroke: none; }

.luna-poch { position: absolute; top: 0; left: 0; right: 0; height: min(100vw, 400px); overflow: hidden; touch-action: pan-x; }
.luna-poch img { width: 100%; height: 100vw; max-height: 393px; min-height: 393px; object-fit: cover; display: block; }
.luna-poch::after { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(180deg, var(--luna-haut, rgba(0,0,0,.42)) 0, color-mix(in oklab, var(--luna-haut, #000) 60%, transparent) 36px, transparent 130px),
  linear-gradient(180deg, transparent 42%, color-mix(in oklab, var(--luna-fond) 75%, transparent) 72%, var(--luna-fond) 92%); }
.luna-reduire, .luna-aime {
  position: absolute; top: calc(10px + env(safe-area-inset-top, 50px)); width: 48px; height: 48px; border-radius: 50%;
  background: rgba(10,10,10,.42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: grid; place-items: center; color: #fff; z-index: 5;
}
.luna-reduire { left: 18px; } .luna-aime { right: 18px; }
.luna-reduire .luna-ic { width: 26px; height: 26px; stroke-width: 2.2; }
.luna-aime[aria-pressed="true"] { color: var(--ambre); }
.luna-aime[aria-pressed="true"] .luna-ic { fill: currentColor; }

/* Bloc ancré en bas : du méta jusqu'à « Ensuite », positions identiques quelle que soit la longueur du titre. */
.luna-corps { position: absolute; left: 0; right: 0; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); padding: 0 22px; z-index: 2; }
.luna-etiq { display: flex; align-items: center; gap: 8px; margin: var(--fb-reserve, 0px) 0 0; font: 600 13px/1 var(--texte); letter-spacing: .14em; text-transform: uppercase; color: var(--ambre); }
.luna-etiq i { width: 9px; height: 9px; border-radius: 50%; background: var(--ambre); box-shadow: 0 0 0 4px color-mix(in oklab, var(--ambre) 25%, transparent); }
.luna-etiq span { color: var(--luna-extrait-txt, color-mix(in oklab, var(--luna-creme) 62%, transparent)); letter-spacing: .12em; }   /* gris inchangé, éclairci seulement sous 4,5:1 (lecteur-couleur.js) */
.luna-titre { font: 900 72px/.88 var(--titre); text-transform: uppercase; letter-spacing: .005em; margin: 12px 0 10px; color: var(--luna-creme); overflow-wrap: anywhere; }
.luna-titre.luna-long { font-size: 56px; }   /* seulement si > 2 lignes (posé par le JS) */
.luna-meta { margin: 0; font: 500 16px/1.3 var(--texte); color: var(--luna-creme); }
.luna-meta b { color: var(--ambre); font-weight: 600; padding: 0 6px; }
.luna-meta.luna-prov { margin: 0 0 10px; font: 600 12px/1 var(--texte); letter-spacing: .2em; text-transform: uppercase; color: color-mix(in oklab, var(--luna-creme) 55%, transparent); }   /* provenance (type · année) sous le titre, au-dessus de « Groove 94 BPM Voix » */
.luna-tags { margin: 0; display: flex; flex-wrap: wrap; column-gap: 18px; font: 400 15px/1.3 var(--texte); color: color-mix(in oklab, var(--luna-creme) 75%, transparent); }   /* trois mots isolés : humeur, BPM, voix */

.luna-prog { margin-top: 20px; }
.luna-barre { position: relative; height: 4px; background: color-mix(in oklab, var(--luna-creme) 22%, transparent); touch-action: none; }
.luna-barre::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; bottom: -14px; }   /* zone de toucher élargie */
.luna-barre i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--luna-pos, 0%); background: var(--ambre); }
.luna-barre i::after { content: ""; position: absolute; right: -7px; top: -5px; width: 14px; height: 14px; border-radius: 50%; background: var(--luna-creme); }
.luna-temps { display: flex; justify-content: space-between; margin-top: 9px; font: 500 14px/1 var(--texte); font-variant-numeric: tabular-nums; color: color-mix(in oklab, var(--luna-creme) 75%, transparent); }

.luna-cmd { display: grid; grid-template-columns: 1fr auto auto auto 1fr; align-items: center; gap: 22px; margin-top: 16px; }
.luna-lat { display: flex; flex-direction: column; align-items: center; gap: 5px; font: 500 12.5px/1 var(--texte); color: color-mix(in oklab, var(--luna-creme) 82%, transparent); }
.luna-lat[aria-pressed="true"], .luna-lat[aria-expanded="true"] { color: var(--ambre); }
.luna-lat .luna-ic { width: 26px; height: 26px; }
.luna-sk { width: 48px; height: 48px; display: grid; place-items: center; color: var(--luna-creme); }
.luna-sk svg { width: 32px; height: 32px; }
.luna-jouer { width: 82px; height: 82px; border-radius: 50%; background: var(--ambre); color: var(--luna-encre) !important; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.luna-jouer svg { width: 34px; height: 34px; }

.luna-ajout { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 15px 0; width: 100%; text-align: left;
  border-top: 1px solid color-mix(in oklab, var(--luna-creme) 14%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--luna-creme) 14%, transparent); }
.luna-ajout .luna-p { width: 44px; height: 44px; border-radius: 50%; background: var(--ambre); color: var(--luna-encre); display: grid; place-items: center; flex: none; }
.luna-ajout .luna-p .luna-ic { stroke-width: 2.4; }
.luna-ajout .luna-x { flex: 1; min-width: 0; }
.luna-ajout .luna-x b { display: block; font: 600 17px/1.2 var(--texte); }
.luna-ajout .luna-x small { display: block; font: 400 14px/1.3 var(--texte); color: color-mix(in oklab, var(--luna-creme) 66%, transparent); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* une seule petite ligne */
.luna-ajout .luna-prix { font: 800 30px/1 var(--titre); color: var(--ambre); }
.luna-ajout[disabled], .luna-ajout.luna-dans { opacity: .85; }
.luna-ajout.luna-dans .luna-p { background: transparent; box-shadow: inset 0 0 0 2px var(--ambre); color: var(--ambre); }

.luna-suivant { display: flex; align-items: center; gap: 14px; padding: 12px 0 0; width: 100%; text-align: left; }
.luna-suivant img { width: 58px; height: 58px; flex: none; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.luna-suivant .luna-x { flex: 1; min-width: 0; }
.luna-suivant .luna-x em { display: block; font: 600 12px/1 var(--texte); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--ambre); }
.luna-suivant .luna-x b { display: block; font: 600 19px/1.15 var(--texte); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.luna-suivant .luna-x small { display: block; font: 400 14px/1.2 var(--texte); color: color-mix(in oklab, var(--luna-creme) 62%, transparent); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* une seule petite ligne */
.luna-voir { display: flex; align-items: center; gap: 8px; font: 600 15px var(--texte); color: var(--luna-creme); white-space: nowrap; }
@media (max-width: 899px) and (max-height: 760px) {   /* petits téléphones : le bloc reste entier */
  .luna-titre { font-size: 56px; } .luna-jouer { width: 70px; height: 70px; } .luna-poch { height: 330px; }
}

/* ============ B. VOLET « ENSUITE » (aside/section.luna-volet, au-dessus du lecteur) ============ */
.luna-volet { position: fixed; left: 0; right: 0; top: 96px; bottom: 0; z-index: 60; display: flex; flex-direction: column;
  background: var(--luna-fond2); color: var(--luna-creme); box-shadow: 0 -18px 40px rgba(0,0,0,.45); font: 400 16px/1.45 var(--texte); }
.luna-volet[hidden] { display: none; }
:where(.luna-volet) button { color: inherit; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.luna-voile { position: fixed; inset: 0; z-index: 59; background: rgba(0,0,0,.45); }   /* lecteur visible derrière, assombri */
.luna-poignee { width: 44px; height: 5px; border-radius: 3px; background: color-mix(in oklab, var(--luna-creme) 35%, transparent); margin: 10px auto 0; flex: none; }
.luna-tete { display: flex; align-items: flex-end; justify-content: space-between; padding: 14px 22px 0; flex: none; }
.luna-tete h2 { font: 900 46px/.9 var(--titre); text-transform: uppercase; margin: 0; }
.luna-tete h2 small { display: block; font: 600 13px/1 var(--texte); text-transform: uppercase; color: var(--luna-c2); margin-top: 8px; letter-spacing: .12em; }   /* nombre de titres seul, en majuscules */
.luna-fermer { display: flex; align-items: center; gap: 6px; font: 600 15px var(--texte); padding-bottom: 4px; }
.luna-regl { padding: 16px 22px 0; flex: none; }
.luna-ligne { display: flex; align-items: center; gap: 18px; padding: 11px 0; border-top: 1px solid var(--luna-fil); }
.luna-ch { display: flex; gap: 8px 17px; flex-wrap: wrap; font: 500 16px/1 var(--texte); color: var(--luna-c2); }   /* aucun défilement horizontal : tout est visible, les boutons passent à la ligne */
.luna-ch button { position: relative; padding: 6px 0; display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.luna-lecteur .luna-x em { text-decoration: none; }   /* sur l'accueil, `.accueil em` soulignait « En écoute » et « Ensuite » */
.luna-ch .luna-on, .luna-ch button[aria-pressed="true"] { color: var(--luna-creme); font-weight: 600; }
.luna-ch .luna-on::after, .luna-ch button[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--ambre); }
.luna-ch .luna-ic { width: 20px; height: 20px; }
.luna-ch .luna-on .luna-ic, .luna-ch button[aria-pressed="true"] .luna-ic { color: var(--ambre); }
.luna-hum .luna-ch { gap: 6px 15px; }
.luna-hum .luna-ch button i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .5; }
.luna-hum .luna-ch .luna-on i, .luna-hum .luna-ch button[aria-pressed="true"] i { background: var(--ambre); opacity: 1; }
@media (max-width: 899px) {   /* téléphone : humeurs sur une ligne (version A validée le 20/10), mots resserrés sans points, répartis sur toute la largeur */
  .luna-hum .luna-ch { flex: 1; min-width: 0; gap: 6px 8px; font-size: 15px; justify-content: space-between; }
  .luna-hum .luna-ch button i { display: none; }
}

.luna-encours { display: flex; align-items: center; gap: 13px; margin: 4px 0 0; padding: 12px 22px 12px 19px; border-left: 3px solid var(--ambre); background: color-mix(in oklab, var(--ambre) 9%, transparent); flex: none; }
.luna-encours img { width: 54px; height: 54px; flex: none; }
.luna-encours .luna-x { flex: 1; min-width: 0; }
.luna-encours .luna-x em { display: block; font: 600 11.5px/1 var(--texte); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--ambre); }
.luna-encours .luna-x b { display: block; font: 600 18px/1.15 var(--texte); margin-top: 4px; }
.luna-encours .luna-x small { display: block; font: 400 14px/1.2 var(--texte); color: var(--luna-c2); margin-top: 2px; }
.luna-eq { display: flex; gap: 3px; align-items: flex-end; height: 20px; }
.luna-eq i { width: 4px; background: var(--ambre); animation: luna-eq 1.1s ease-in-out infinite; transform-origin: bottom; }
.luna-eq i:nth-child(1) { height: 60%; } .luna-eq i:nth-child(2) { height: 100%; animation-delay: -.3s; }
.luna-eq i:nth-child(3) { height: 40%; animation-delay: -.6s; } .luna-eq i:nth-child(4) { height: 75%; animation-delay: -.9s; }
@keyframes luna-eq { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.45); } }
@media (prefers-reduced-motion: reduce) { .luna-eq i { animation: none; } }
.luna-eq.luna-pause i { animation-play-state: paused; }

.luna-sous { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 22px 6px; font: 600 12px/1 var(--texte); letter-spacing: .13em; text-transform: uppercase; color: var(--luna-c2); flex: none; }
.luna-sous span { font: 400 13px/1 var(--texte); letter-spacing: 0; text-transform: none; }
.luna-file { list-style: none; margin: 0; padding: 0 22px; flex: 1; min-height: 0; overflow-y: auto; position: relative; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 56px), transparent); }
.luna-file > li { display: flex; align-items: center; gap: 13px; padding: 9px 0; border-bottom: 1px solid var(--luna-fil); position: relative; background: var(--luna-fond2); list-style: none; }
.luna-file > li > img { width: 50px; height: 50px; flex: none; }
.luna-file .luna-x { flex: 1; min-width: 0; text-align: left; }
.luna-file .luna-x b { display: block; font: 600 17px/1.2 var(--texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.luna-file .luna-x small { display: block; font: 400 14px/1.25 var(--texte); color: var(--luna-c2); margin-top: 2px; }
.luna-file .luna-x small .luna-r { color: var(--luna-creme); }
.luna-poig { width: 40px; height: 44px; display: grid; place-items: center; color: var(--luna-c2); touch-action: none; cursor: grab; flex: none; }
.luna-poig .luna-ic { width: 22px; height: 22px; }
/* réordonnancement (le JS pose luna-prise sur la ligne soulevée et insère un <li class="luna-trou">) */
.luna-file > li.luna-prise { margin: 0 -14px; padding: 9px 14px; background: color-mix(in oklab, var(--luna-fond2) 82%, var(--luna-creme)); box-shadow: 0 14px 34px rgba(0,0,0,.55); transform: rotate(-.6deg) translateY(-6px); z-index: 3; border-bottom: 0; }
.luna-file > li.luna-prise .luna-poig { color: var(--ambre); cursor: grabbing; }
.luna-file > li.luna-trou { height: 6px; padding: 0; border: 0; background: none; }
.luna-file > li.luna-trou::before { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 2px; background: var(--ambre); }
.luna-file > li.luna-trou::after { content: ""; position: absolute; left: -4px; top: -1px; width: 8px; height: 8px; border-radius: 50%; background: var(--ambre); }
.luna-volet.luna-glisse .luna-file { overflow: hidden; }   /* pas de défilement pendant un glisser */
.luna-mini { position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 22px calc(14px + env(safe-area-inset-bottom, 20px)); background: var(--luna-fond); flex: none; }
.luna-mini .luna-pr { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--luna-fil); }
.luna-mini .luna-pr i { display: block; width: var(--luna-pos, 0%); height: 100%; background: var(--ambre); }
.luna-mini .luna-x { flex: 1; min-width: 0; font: 500 14px/1.25 var(--texte); color: var(--luna-c2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.luna-mini .luna-x b { display: block; color: var(--luna-creme); font: 600 15px/1.2 var(--texte); overflow: hidden; text-overflow: ellipsis; }
.luna-mini .luna-j { width: 52px; height: 52px; border-radius: 50%; background: var(--ambre); color: var(--luna-encre) !important; display: grid; place-items: center; }
.luna-mini .luna-j svg, .luna-mini .luna-s svg { width: 24px; height: 24px; }
.luna-mini .luna-s { width: 44px; height: 44px; display: grid; place-items: center; }

/* ============ C. PANIER (racine .luna-panier = le contenu du panier ; fond crème, texte encre) ============ */
.luna-panier { --luna-creme: #f5f3ee; color: var(--luna-encre); font: 400 16px/1.45 var(--texte); padding: 0 20px; }
.luna-panier .luna-h1 { font: 900 64px/.88 var(--titre); text-transform: uppercase; margin: 26px 0 6px; }
.luna-panier .luna-nb { margin: 0; font: 500 16px var(--texte); color: rgba(30,18,32,.68); }
.luna-panier .luna-lignes { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid rgba(30,18,32,.14); }
/* Ligne serrée (20/10, demande de Brice) : titre, détail et actions en bloc contre la pochette, centrés sur sa hauteur
   (rangées 1fr de part et d'autre) ; le prix, à droite, couvre titre + détail au lieu d'agrandir la rangée du titre. */
.luna-panier .luna-art { display: grid; grid-template-columns: 76px 1fr auto; grid-template-rows: 1fr auto auto auto 1fr; gap: 0 14px; padding: 12px 0; border-bottom: 1px solid rgba(30,18,32,.14); align-items: start; }
.luna-panier .luna-art img { width: 76px; height: 76px; grid-row: 1 / -1; grid-column: 1; box-shadow: 0 6px 16px rgba(30,18,32,.18); }
.luna-panier .luna-art .luna-nom { grid-row: 2; grid-column: 2; font: 600 18px/1.2 var(--texte); }
.luna-panier .luna-art .luna-px { grid-row: 2 / span 2; grid-column: 3; align-self: center; font: 800 26px/1 var(--titre); text-align: right; }
.luna-panier .luna-art .luna-px s { display: block; font: 500 14px var(--texte); color: #635a61; }
.luna-panier .luna-art .luna-d { grid-row: 3; grid-column: 2; margin-top: 2px; font: 400 14.5px/1.35 var(--texte); color: rgba(30,18,32,.68); }
.luna-panier .luna-art .luna-d i { font-style: normal; color: var(--luna-encre); }
.luna-panier .luna-art .luna-act { grid-row: 4; grid-column: 2 / 4; display: flex; gap: 18px; font: 500 14px var(--texte); color: #635a61; margin-top: 6px; }
.luna-panier .luna-art .luna-act a, .luna-panier .luna-art .luna-act button { text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.luna-panier .luna-art.luna-inclus { opacity: .6; }
.luna-panier .luna-promo { margin-top: 18px; padding: 14px 16px; border-left: 4px solid var(--ambre); background: color-mix(in oklab, var(--ambre) 14%, #f5f3ee); }
.luna-panier .luna-promo b { font: 600 16px var(--texte); display: block; }
.luna-panier .luna-ronds { display: flex; gap: 7px; margin: 10px 0 8px; }
.luna-panier .luna-ronds i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--luna-encre); }
.luna-panier .luna-ronds i.luna-p { background: var(--luna-encre); }
.luna-panier .luna-ronds i.luna-o { border-style: dashed; border-color: #635a61; }
.luna-panier .luna-promo small { font: 400 14.5px/1.35 var(--texte); color: rgba(30,18,32,.68); }
.luna-panier .luna-coll { display: flex; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(30,18,32,.14); }
.luna-panier .luna-coll .luna-x { flex: 1; font: 400 14.5px/1.35 var(--texte); color: rgba(30,18,32,.68); }
.luna-panier .luna-coll .luna-x b { display: block; color: var(--luna-encre); font: 600 16px/1.25 var(--texte); }
.luna-panier .luna-coll .luna-f { font: 600 15px var(--texte); white-space: nowrap; text-decoration: none; box-shadow: inset 0 -3px var(--ambre); }
.luna-panier .luna-usb { margin-top: 14px; font: 400 15px/1.4 var(--texte); }
.luna-panier .luna-tot { margin-top: 22px; }
.luna-panier .luna-tot p { display: flex; justify-content: space-between; margin: 0; font: 400 16px/1.9 var(--texte); color: rgba(30,18,32,.68); }
.luna-panier .luna-tot p.luna-r { color: var(--luna-encre); }
.luna-panier .luna-tot p.luna-r span:last-child { font-weight: 600; }
.luna-panier .luna-tot p.luna-t { border-top: 1px solid var(--luna-encre); margin-top: 8px; padding-top: 12px; color: var(--luna-encre); align-items: baseline; }
.luna-panier .luna-tot p.luna-t span:first-child { font: 600 18px var(--texte); }
.luna-panier .luna-tot p.luna-t span:last-child { font: 900 48px/1 var(--titre); }
.luna-panier .luna-eco { font: 500 14.5px var(--texte); text-align: right; color: var(--luna-encre); }
.luna-panier .luna-eco b { box-shadow: inset 0 -3px var(--ambre); font-weight: 600; }
.luna-panier .luna-lab { display: block; font: 600 12px/1 var(--texte); letter-spacing: .13em; text-transform: uppercase; color: #635a61; margin: 26px 0 8px; }
.luna-panier .luna-champ { border: 0; border-bottom: 2px solid var(--luna-encre); border-radius: 0; padding: 10px 0; font: 500 18px var(--texte); width: 100%; background: none; color: var(--luna-encre); outline-offset: 4px; }
.luna-panier .luna-aidech { font: 400 14px/1.35 var(--texte); color: rgba(30,18,32,.68); margin: 8px 0 0; }
.luna-panier .luna-payer { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 22px; padding: 19px 20px; background: var(--ambre); color: var(--luna-encre); font: 600 19px var(--texte); border: 0; border-radius: 0; cursor: pointer; }
.luna-panier .luna-payer[disabled] { opacity: .65; cursor: not-allowed; }
.luna-panier .luna-payer .luna-ic { width: 26px; height: 26px; stroke-width: 2.2; }
.luna-panier .luna-stripe { display: flex; justify-content: center; gap: 8px; align-items: center; margin: 12px 0 0; font: 400 14px var(--texte); color: rgba(30,18,32,.68); }
.luna-panier .luna-stripe .luna-ic { width: 17px; height: 17px; }
.luna-panier .luna-raison { margin: 10px 0 0; font: 500 14.5px/1.35 var(--texte); color: var(--luna-encre); min-height: auto; }   /* pas 0 : dans la grille du tiroir (hauteur bornée), la ligne s'écrasait et le texte passait sous le bouton Payer */
.luna-panier .luna-h2 { font: 900 38px/.95 var(--titre); text-transform: uppercase; margin: 44px 0 6px; }
.luna-panier .luna-recoit { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid rgba(30,18,32,.14); }
.luna-panier .luna-recoit li { display: grid; grid-template-columns: 40px 1fr; gap: 2px 12px; padding: 15px 0; border-bottom: 1px solid rgba(30,18,32,.14); }
.luna-panier .luna-recoit .luna-ic { width: 28px; height: 28px; grid-row: span 2; color: var(--luna-encre); stroke-width: 1.6; margin-top: 2px; }
.luna-panier .luna-recoit b { font: 600 17px/1.25 var(--texte); }
.luna-panier .luna-recoit span { font: 400 15px/1.4 var(--texte); color: rgba(30,18,32,.68); }
.luna-panier .luna-faq { margin-top: 22px; font: 400 15px/1.45 var(--texte); color: rgba(30,18,32,.68); }
.luna-panier .luna-faq b { color: var(--luna-encre); display: block; font-weight: 600; }
.luna-panier .luna-faq p { margin: 0; } .luna-panier .luna-faq p + p { margin-top: 12px; }
.luna-panier .luna-vide { padding: 28px 0; font: 400 16px var(--texte); color: rgba(30,18,32,.68); }

/* ============ D. PAGES TITRE (racine .luna-sortie = #fiche ; single et album) ============ */
.luna-sortie { --luna-creme: #f5f3ee; color: var(--luna-encre); font: 400 16px/1.45 var(--texte); }
.luna-sortie .luna-fil { font: 500 14px var(--texte); color: #635a61; margin: 14px 0 18px; display: block; }
.luna-sortie .luna-couv { width: 353px; max-width: 100%; aspect-ratio: 1; height: auto; box-shadow: 0 22px 44px rgba(30,18,32,.32), 0 2px 0 rgba(30,18,32,.1); }
.luna-sortie .luna-sur { display: flex; align-items: center; gap: 8px; margin: 24px 0 0; font: 600 13px/1 var(--texte); letter-spacing: .14em; text-transform: uppercase; color: #635a61; }
.luna-sortie .luna-sur b { color: var(--luna-encre); }
.luna-sortie .luna-h1 { font: 900 var(--luna-t, 96px)/.86 var(--titre); text-transform: uppercase; margin: 10px 0; overflow-wrap: anywhere; }
.luna-sortie .luna-h1.luna-long { --luna-t: 84px; }
.luna-sortie .luna-resume { margin: 0; font: 500 16px/1.4 var(--texte); color: rgba(30,18,32,.68); }
.luna-sortie .luna-actions { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.luna-sortie .luna-ecoute { display: flex; align-items: center; gap: 12px; font: 600 16px/1.2 var(--texte); background: none; border: 0; padding: 0; cursor: pointer; color: inherit; text-align: left; }
.luna-sortie .luna-ecoute i { width: 62px; height: 62px; border-radius: 50%; background: var(--luna-encre); color: var(--luna-creme); display: grid; place-items: center; flex: none; }
.luna-sortie .luna-ecoute i svg { width: 24px; height: 24px; margin-left: 3px; fill: currentColor; }
.luna-sortie .luna-ecoute[aria-pressed="true"] i svg { margin-left: 0; }
.luna-sortie .luna-ecoute small { display: block; font: 400 14px var(--texte); color: #635a61; }
.luna-sortie .luna-ajouter { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 18px; padding: 18px 20px; background: var(--ambre); color: var(--luna-encre); font: 600 18px var(--texte); border: 0; border-radius: 0; cursor: pointer; text-align: left; }
.luna-sortie .luna-ajouter b { font: 900 30px/1 var(--titre); }
.luna-sortie .luna-note { font: 400 14.5px/1.4 var(--texte); color: rgba(30,18,32,.68); margin: 10px 0 0; }
.luna-sortie .luna-note b { color: var(--luna-encre); font-weight: 600; }
.luna-sortie .luna-h2 { font: 900 36px/.95 var(--titre); text-transform: uppercase; margin: 40px 0 4px; }
.luna-sortie .luna-h2 small { font: 500 14px var(--texte); text-transform: none; color: #635a61; margin-left: 8px; }
.luna-sortie .luna-def { display: grid; grid-template-columns: 118px 1fr; margin: 12px 0 0; border-top: 1px solid var(--luna-encre); }
.luna-sortie .luna-def dt, .luna-sortie .luna-def dd { padding: 11px 0; border-bottom: 1px solid rgba(30,18,32,.14); margin: 0; }
.luna-sortie .luna-def dt { font: 600 12px/1.6 var(--texte); letter-spacing: .12em; text-transform: uppercase; color: #635a61; }
.luna-sortie .luna-def dd { font: 500 16px/1.4 var(--texte); }
.luna-sortie .luna-def dd small { display: block; font: 400 14px var(--texte); color: #635a61; }
.luna-sortie .luna-repart { display: flex; height: 8px; margin: 7px 0 6px; }
.luna-sortie .luna-repart i { display: block; height: 100%; }
.luna-sortie .luna-titres { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--luna-encre); }
.luna-sortie .luna-titres li { display: grid; grid-template-columns: 34px 1fr auto 44px; gap: 0 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(30,18,32,.14); }
.luna-sortie .luna-titres .luna-n { font: 800 24px/1 var(--titre); color: #635a61; text-align: center; background: none; border: 0; padding: 0; cursor: pointer; }
.luna-sortie .luna-titres .luna-x { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: inherit; min-width: 0; }
.luna-sortie .luna-titres .luna-x b { display: block; font: 600 17px/1.2 var(--texte); }
.luna-sortie .luna-titres .luna-x small { display: block; font: 400 14px/1.35 var(--texte); color: rgba(30,18,32,.68); margin-top: 2px; }
.luna-sortie .luna-titres .luna-x small .luna-r { color: var(--luna-encre); font-weight: 500; }
.luna-sortie .luna-titres .luna-du { font: 500 14.5px var(--texte); color: #635a61; font-variant-numeric: tabular-nums; }
.luna-sortie .luna-titres .luna-plus { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--luna-encre); display: grid; place-items: center; background: none; cursor: pointer; color: var(--luna-encre); padding: 0; }
.luna-sortie .luna-titres .luna-plus .luna-ic { width: 18px; height: 18px; stroke-width: 2.4; }
.luna-sortie .luna-titres .luna-plus.luna-ok { background: var(--luna-encre); color: var(--luna-creme); }
.luna-sortie .luna-titres li.luna-joue { background: color-mix(in oklab, var(--ambre) 16%, #f5f3ee); margin: 0 -20px; padding: 12px 20px 12px 17px; border-left: 3px solid var(--ambre); }
.luna-sortie .luna-titres li.luna-joue .luna-n { color: var(--luna-encre); }
.luna-sortie .luna-eq { display: flex; gap: 3px; align-items: flex-end; height: 18px; justify-content: center; }
.luna-sortie .luna-eq i { width: 4px; background: var(--luna-encre); }
.luna-sortie .luna-eq i:nth-child(1) { height: 60%; } .luna-sortie .luna-eq i:nth-child(2) { height: 100%; } .luna-sortie .luna-eq i:nth-child(3) { height: 45%; }
.luna-sortie .luna-tous { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 0; font: 500 15px var(--texte); color: rgba(30,18,32,.68); }
.luna-sortie .luna-tous button, .luna-sortie .luna-tous a { font-weight: 600; color: var(--luna-encre); box-shadow: inset 0 -3px var(--ambre); background: none; border: 0; border-radius: 0; padding: 0; cursor: pointer; font-family: inherit; font-size: inherit; }
.luna-sortie .luna-aussi a { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(30,18,32,.14); text-decoration: none; color: inherit; }
.luna-sortie .luna-aussi a:first-child { border-top: 1px solid var(--luna-encre); margin-top: 12px; }
.luna-sortie .luna-aussi img { width: 64px; height: 64px; box-shadow: 0 5px 12px rgba(30,18,32,.18); }
.luna-sortie .luna-aussi .luna-x { flex: 1; min-width: 0; }
.luna-sortie .luna-aussi b { display: block; font: 600 17px/1.2 var(--texte); }
.luna-sortie .luna-aussi small { font: 400 14px var(--texte); color: rgba(30,18,32,.68); }
.luna-sortie .luna-aussi .luna-p { font: 800 22px var(--titre); }
.luna-sortie .luna-recu { margin-top: 30px; padding: 16px; border-left: 4px solid var(--ambre); background: color-mix(in oklab, var(--ambre) 12%, #f5f3ee); font: 400 15px/1.45 var(--texte); color: rgba(30,18,32,.68); }
.luna-sortie .luna-recu b { color: var(--luna-encre); display: block; font: 600 16px var(--texte); margin-bottom: 3px; }

/* ============ E. ORDINATEUR (>= 900 px) ============ */
@media (min-width: 900px) {
  /* Lecteur : pochette à gauche (carrée, hauteur de l'écran), colonne de lecture + colonne Ensuite à droite, toujours visible. */
  .luna-lecteur { display: none; }
  .luna-lecteur[open] { display: grid; grid-template-columns: min(100vh, 55vw) 1fr; background: linear-gradient(160deg, var(--luna-fond) 30%, var(--luna-fond2)); }
  .luna-lecteur .luna-poch { position: relative; height: 100vh; width: min(100vh, 55vw); }
  .luna-lecteur .luna-poch img { width: 100%; height: 100%; min-height: 0; max-height: none; }
  .luna-lecteur .luna-poch::after { background: linear-gradient(90deg, transparent 70%, var(--luna-fond) 100%), linear-gradient(180deg, rgba(0,0,0,.35), transparent 120px); }
  .luna-reduire { top: 28px; width: 52px; height: 52px; }
  .luna-aime { display: none; }   /* à l'ordinateur, J'aime est dans la rangée de commandes (.luna-lat-aime) */
  .luna-cote { display: grid; grid-template-columns: 1fr 340px; gap: 48px; padding: 56px 56px 40px 40px; min-width: 0; min-height: 0; }
  .luna-princ { display: flex; flex-direction: column; min-width: 0; }
  .luna-corps { position: static; padding: 0; display: flex; flex-direction: column; flex: 1; }
  .luna-titre { font-size: 96px; line-height: .86; margin: 16px 0 18px; }
  .luna-meta { font-size: 18px; } .luna-meta b { padding: 0 7px; }
  .luna-tags { display: none; }   /* remplacé par la liste Rythme / Voix / Instruments */
  .luna-dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 22px; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--luna-fil); font: 400 16px/1.3 var(--texte); }
  .luna-dl dt { color: var(--luna-c2); font: 600 12px/1.6 var(--texte); letter-spacing: .12em; text-transform: uppercase; }
  .luna-dl dd { margin: 0; }
  .luna-prog { margin-top: auto; }
  .luna-barre { height: 5px; } .luna-barre i::after { width: 16px; height: 16px; right: -8px; top: -5.5px; }
  .luna-temps { font-size: 15px; margin-top: 10px; }
  .luna-cmd { display: flex; gap: 30px; margin-top: 22px; }
  .luna-lat { flex-direction: row; gap: 8px; font-size: 15px; color: var(--luna-c2); }
  .luna-sk svg { width: 34px; height: 34px; }
  .luna-jouer { width: 86px; height: 86px; } .luna-jouer svg { width: 36px; height: 36px; }
  .luna-ajout { margin-top: 26px; padding: 16px 0; gap: 16px; }
  .luna-ajout .luna-p { width: 46px; height: 46px; }
  .luna-ajout .luna-x b { font-size: 18px; } .luna-ajout .luna-x small { font-size: 15px; }
  .luna-ajout .luna-prix { font-size: 34px; }
  .luna-suivant { display: none; }   /* la colonne Ensuite est déjà visible */
  /* colonne Ensuite permanente : le volet devient une colonne statique de la grille */
  .luna-lecteur .luna-volet { position: static; z-index: auto; background: none; box-shadow: none; border-left: 1px solid var(--luna-fil); padding-left: 28px; display: flex; min-height: 0; }
  .luna-lecteur .luna-volet[hidden] { display: flex !important; }
  .luna-lecteur .luna-voile, .luna-lecteur .luna-poignee, .luna-lecteur .luna-fermer, .luna-lecteur .luna-mini, .luna-lecteur .luna-encours { display: none; }
  .luna-lecteur .luna-tete { padding: 0; } .luna-lecteur .luna-tete h2 { font-size: 34px; display: flex; justify-content: space-between; align-items: baseline; width: 100%; }
  .luna-lecteur .luna-tete h2 small { display: inline; margin: 0; font-size: 14px; }
  .luna-lecteur .luna-regl { padding: 14px 0 0; }
  .luna-lecteur .luna-ligne { flex-wrap: wrap; gap: 6px 16px; padding: 12px 0; font-size: 15px; }
  .luna-lecteur .luna-ch { flex-wrap: wrap; gap: 6px 16px; font-size: 15px; overflow: visible; }
  .luna-lecteur .luna-sous { display: none; }
  .luna-lecteur .luna-file { padding: 0; margin-top: 6px; -webkit-mask-image: none; mask-image: none; }
  .luna-lecteur .luna-file > li { background: none; padding: 8px 0; gap: 12px; }
  .luna-lecteur .luna-file > li > img { width: 46px; height: 46px; }
  .luna-lecteur .luna-file .luna-x b { font-size: 16px; } .luna-lecteur .luna-file .luna-x small { font-size: 13.5px; }

  /* Panier et pages titre : colonne centrée, mêmes lignes que le mobile. */
  .luna-panier { max-width: 640px; margin: 0 auto; padding: 0 var(--g, 32px); }
  .luna-panier .luna-h1 { font-size: 96px; }
  .luna-sortie.luna-sortie-album, .luna-sortie.luna-sortie-single { display: grid; grid-template-columns: 420px minmax(0, 560px); gap: 0 64px; align-items: start; justify-content: center; }
  .luna-sortie .luna-colg { position: sticky; top: 24px; }
  .luna-sortie .luna-couv { width: 420px; }
  .luna-sortie .luna-h1 { --luna-t: 112px; } .luna-sortie .luna-h1.luna-long { --luna-t: 96px; }
}
@media (hover: hover) { .luna-ch button:hover, .luna-lat:hover { color: var(--luna-creme); } .luna-panier .luna-art .luna-act a:hover { color: var(--luna-encre); } }
@media (prefers-reduced-motion: reduce) { .luna-file > li.luna-prise { transform: none; } }

/* ============ F. RACCORDS DU LECTEUR (intégration JS : lecteur.js) ============ */
html:has(.luna-lecteur[open]) { overflow: hidden; scrollbar-gutter: auto; }
html:has(.luna-lecteur[open]:not(.fb-anim)) { background: var(--luna-fond2, #1c1c19); }   /* couleur UNIE : Safari iOS ne prend pas la couleur d'un fond en dégradé pour sa barre du bas */
html:has(.luna-lecteur[open]:not(.fb-anim)) body { background-color: var(--luna-fond2, #1c1c19); }   /* le corps de page (crème) ne doit plus teinter la barre du bas */
/* Bande blanche en bas (iPhone, Safari iOS 26) : Safari teinte sa barre du bas avec la couleur unie d'un élément fixé au bord bas.
   Il échantillonne aussi les éléments en visibility:hidden ou opacity:0 (seul display:none les écarte) : la mini-barre et les
   panneaux crème de la page sont donc retirés tant que le lecteur est ouvert, et une bande unie fond2 hors top layer (body::after) prend le bord. */
html:has(.luna-lecteur[open]:not(.fb-anim)) :is(.lecteur, .fm-bas, .fm-volet) { display: none !important; }
html:has(.luna-lecteur[open]:not(.fb-anim)) body::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: calc(40px + env(safe-area-inset-bottom, 0px)); background-color: var(--luna-fond2, #1c1c19); z-index: 2147483000; }   /* sans pointer-events: none : Safari trouve le bord en « touchant » l'écran, un élément transparent au toucher est ignoré */
.luna-lecteur { background-color: var(--luna-fond2); }
@media (max-width: 899px) {
  .luna-lecteur[open] { background: var(--luna-fond2); }   /* fond du lecteur UNI : Safari iOS 26 teinte sa barre du bas avec le background-color de l'élément fixe collé au bord, jamais avec un dégradé ; le dégradé visible passe dans ::after, sous le contenu */
  .luna-lecteur[open]::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--luna-fond) 40%, var(--luna-fond2) 100%); pointer-events: none; }
  /* Barres Safari iOS : il teinte sa barre du bas et sa bande du haut avec le fond d'un VRAI élément enfant du dialog, fixed et collé au bord ;
     il ignore les pseudo-éléments, le fond du dialog et tout ce qui est hors du dialog. Bas : un enfant de 2 px est ignoré, de 24 px + zone sûre il est pris.
     Haut : un enfant au-dessus du contenu est pris (sous la pochette, ignoré). WebKit (LocalFrameView::fixedContainerEdges) ignore la couleur CSS d'un élément fixe en haut de 10 px de haut ou moins
     et lit alors des pixels, gardés en cache par élément ; au-delà de 10 px il lit la couleur CSS. D'où 12 px de haut, rien de peint (padding-bas + background-clip) et au-dessus du contenu (z 3) ; le dessin est dans .luna-lecteur[open]::before, sous le contenu : rendu inchangé. */
  .luna-lecteur[open] .luna-bord { display: block; position: fixed; left: 0; right: 0; z-index: 1; }
  .luna-bord-haut { top: 0; height: 12px; box-sizing: border-box; padding-bottom: 12px; background-clip: content-box; background-color: var(--luna-haut, var(--luna-fond)); pointer-events: none; }   /* rien de peint (background-clip) : WebKit lit sa couleur CSS ; pointer-events: none, le toucher passe au contenu comme avant */
  .luna-lecteur[open] .luna-bord-haut { z-index: 3; }   /* au-dessus de .luna-corps (z 2) : vue défilée, WebKit touchait .luna-corps, remontait au dialog et gardait la couleur du titre d'avant */
  .luna-lecteur[open]::before { content: ""; position: fixed; left: 0; right: 0; top: 0; height: 30px; z-index: 1; background: linear-gradient(var(--luna-haut, var(--luna-fond)) 6px, transparent 30px); pointer-events: none; }   /* dessin de la bande (6 px unis puis fondu sur 24 px), sous le contenu comme avant */
  .luna-bord-bas { bottom: 0; height: calc(24px + env(safe-area-inset-bottom, 0px)); background-color: var(--luna-fond2); }
}
.luna-bord { display: none; }
.luna-poch img[hidden], .luna-poch .luna-filet[hidden] { display: none; }
.luna-poch img + img { position: absolute; left: 0; top: 0; }   /* 2e pochette : le balayage de raccord monte de bas en haut sur l'ancienne */
.luna-poch .luna-filet { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ambre); z-index: 1; }
.luna-etiq #vLbl { color: var(--luna-jaune-txt, var(--ambre)); letter-spacing: .14em; }   /* jaune seulement s'il tient 4,5:1 sur le fond (lecteur-couleur.js), sinon couleur du texte */
.luna-encours .luna-x em { color: var(--luna-jaune-txt, var(--ambre)); }
.luna-suivant[aria-expanded="true"] .luna-voir { color: var(--ambre); }
.luna-lecteur .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.luna-suivant #vSuite, .luna-suivant #vReco { display: contents; }
.luna-suivant[disabled] { cursor: default; }
@media (max-width: 899px) { .luna-dl { display: none; } }   /* à l'ordinateur la liste Rythme / Voix / Instruments remplace .luna-tags (section E) */
.luna-lat-aime { display: none; }
.luna-lat[disabled], .luna-ch button[disabled] { opacity: .4; cursor: default; }
.luna-ch .luna-ic { flex: none; }
.luna-ch #vCoeurs[aria-pressed="true"] .luna-ic, .luna-lat-aime[aria-pressed="true"] .luna-ic { fill: currentColor; }
.luna-ch #vCoeurs.luna-on, .luna-lat-aime[aria-pressed="true"] { color: var(--ambre); }
.luna-ch #vCoeurs { font-variant-numeric: tabular-nums; }
.luna-file > li.luna-vide { border-bottom: 0; color: var(--luna-c2); padding: 16px 0; }
.luna-mini .luna-x > span[hidden] { display: none; }
.luna-lecteur :focus-visible, .luna-volet :focus-visible, .luna-lecteur:focus-visible { outline: 0; }   /* contour seulement au clavier (classe posée par lecteur.js) */
.luna-lecteur.luna-clavier :focus-visible, .luna-lecteur.luna-clavier .luna-volet :focus-visible { outline: 2px solid var(--ambre); outline-offset: 2px; }
.luna-lecteur.luna-clavier .luna-barre:focus-visible { outline-offset: 10px; }
.luna-lecteur.luna-clavier .luna-poig:focus-visible { outline-offset: -2px; }
@media (min-width: 900px) {
  .luna-lat-aime { display: flex; }
  .luna-titre.luna-long { font-size: 72px; }
}

/* ============ G. CORRECTIFS (mesures navigateur) ============ */
.luna-cmd { grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr); gap: 0; }   /* sans « Ensuite » : Précédent, Lecture, Suivant restent centrés seuls */
.luna-cmd > #vPrec { margin-right: 24px; } .luna-cmd > #vSuiv { margin-left: 24px; }   /* 24 px au moins entre les zones de toucher (44 px au moins chacune) */
.luna-cmd > .luna-lat-aime { justify-self: end; }
.luna-lat { white-space: nowrap; min-width: 44px; min-height: 48px; justify-content: center; }
.luna-cmd > #vPrec { grid-column: 2; }   /* sans « Mélanger » : les trois boutons de lecture occupent les colonnes centrales */
@media (max-width: 380px) {
  .luna-corps { padding: 0 16px; }
  .luna-lat { font-size: 11.5px; } .luna-lat .luna-ic { width: 24px; height: 24px; }
  .luna-sk { width: 44px; height: 44px; } .luna-sk svg { width: 28px; height: 28px; }
}
@media (min-width: 900px) {
  .luna-lecteur[open] { grid-template-columns: min(100vh, 40vw) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .luna-lecteur .luna-poch { width: min(100vh, 40vw); height: auto; aspect-ratio: 1 / 1; align-self: center; }   /* pochette carrée, jamais rognée : min(hauteur, largeur disponibles) */
  .luna-lecteur .luna-cote { grid-template-columns: minmax(0, 1fr) 260px; gap: 36px; padding: 40px 40px 32px 32px; height: 100vh; box-sizing: border-box; overflow: hidden; }
  .luna-lecteur .luna-princ { min-height: 0; overflow: hidden; }
  .luna-lecteur .luna-volet { height: 100%; min-height: 0; overflow: hidden; padding-left: 24px; }
  .luna-lecteur .luna-titre { font-size: clamp(52px, 9.5vh, 96px); }
  .luna-lecteur .luna-titre.luna-long { font-size: clamp(44px, 7vh, 72px); }
  .luna-lecteur .luna-cmd { display: grid; gap: 0; margin-top: 18px; }   /* grille centrée (voir plus haut) ; aucun bouton ne rétrécit */
  .luna-lecteur .luna-cmd > * { flex: none; }
  .luna-lecteur .luna-sk { width: 44px; height: 44px; } .luna-lecteur .luna-sk svg { width: 32px; height: 32px; }
  .luna-lecteur .luna-jouer { width: 76px; height: 76px; flex: none; } .luna-lecteur .luna-jouer svg { width: 32px; height: 32px; }
  .luna-lecteur .luna-ajout { margin-top: 18px; padding: 12px 0; }
  .luna-lecteur .luna-dl { margin-top: 16px; padding-top: 14px; gap: 6px 20px; }
  /* colonne Ensuite étroite : la méta d'un titre tient sur une ligne, le titre long se coupe par une ellipse */
  .luna-lecteur .luna-volet { padding-left: 16px; }
  .luna-lecteur .luna-cmd .luna-lat { font-size: 13px; gap: 4px; flex-direction: column; } .luna-lecteur .luna-cmd .luna-lat .luna-ic { width: 24px; height: 24px; }   /* Mélanger + J’aime tiennent dans les 350 px de la colonne, sans rognage */
  .luna-lecteur .luna-lat .luna-ic { flex: none; }   /* les icônes Mélanger et J'aime ne rétrécissent plus dans la rangée */
  .luna-lecteur .luna-file > li { gap: 10px; }
  .luna-lecteur .luna-file > li > img { width: 44px; height: 44px; }
  .luna-lecteur .luna-file .luna-poig { width: 24px; }
  .luna-lecteur .luna-file .luna-x small { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 900px) and (max-width: 1399px) {
  /* fenêtre moyenne (900-1399 px) : la colonne centrale garde au moins 360 px (toute la rangée de boutons tient, « J’aime » et « Suivant » entiers) ; le volet Ensuite puis la pochette cèdent la place. À 1280 px et au-delà de 1238 px : identique à avant. */
  .luna-lecteur[open] { grid-template-columns: min(100vh, 40vw, 100vw - 468px - clamp(190px, 21vw, 260px)) minmax(0, 1fr); }
  .luna-lecteur .luna-poch { width: min(100vh, 40vw, 100vw - 468px - clamp(190px, 21vw, 260px)); }
  .luna-lecteur .luna-cote { grid-template-columns: minmax(0, 1fr) clamp(190px, 21vw, 260px); }
}
@media (min-width: 1400px) {
  /* pochette = min(hauteur, largeur - 682 px) : à 1512 x 830, 830 x 830 ; la colonne centrale garde au moins 350 px (682 = 24 + 350 + 24 + 260 + 24) */
  .luna-lecteur[open] { grid-template-columns: min(100vh, 100vw - 682px) minmax(0, 1fr); }
  .luna-lecteur .luna-poch { width: min(100vh, 100vw - 682px); }
  .luna-lecteur .luna-cote { grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; padding: 48px 24px 36px 24px; }
}
/* Accueil, téléphone, FR : « Ajouter · 1,50 € » (prix de lancement) est plus large que « Ajouter · 2 € » (142 px au lieu de 120) et coupait « New Girl In Town » sur 2 lignes ; sans la pastille panier (19 px + 7 px), le bouton fait 116 px et le titre reste sur une ligne. */
@media (max-width: 430px) { html:lang(fr) .acc-hero-release .acc-add svg { display: none; } }

/* ============ H. MOUVEMENTS DU LECTEUR (lecteur-anim.js) ============ */
/* Pendant le déploiement / repli (.fb-anim) la barre et la page restent visibles sous la feuille ; fond uni et bande du bas ne reviennent qu'à l'arrêt. */
.luna-lecteur .fb-vol { pointer-events: none; }
/* Mise au point (.fb-mp) : cercle de couleur sous le contenu ; le dégradé propre du lecteur passe plus bas, les couleurs d'arrivée n'étant posées qu'à la fin. */
.fb-flot { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.luna-lecteur.fb-mp .fb-fondu { animation: none !important; }
@media (max-width: 899px) { .luna-lecteur.fb-mp[open]::after { z-index: -2; } }
/* Fond : pendant le mouvement le ::backdrop est transparent, un calque du corps (animé en opacité par lecteur-anim.js) le remplace ; même couleur, même fin. */
.luna-lecteur.fb-anim::backdrop { background: transparent; }
/* Pochette volante : la découpe (disque → carré) est animée par le JS ; le voile du haut est un enfant, copie de .luna-poch::after, animé en opacité. */
.fb-vol::after { content: none; }
.fb-vol > i { position: absolute; inset: 0; pointer-events: none; opacity: 0; background:
  linear-gradient(180deg, var(--luna-haut, rgba(0,0,0,.42)) 0, color-mix(in oklab, var(--luna-haut, #000) 60%, transparent) 36px, transparent 130px),
  linear-gradient(180deg, transparent 42%, color-mix(in oklab, var(--luna-fond) 75%, transparent) 72%, var(--luna-fond) 92%); }