/* Page Musique, mise en page « V1 » validée (maquette tour-7/V1.html), TÉLÉPHONE seulement (< 900 px) : titre + loupe, dernière sortie, barre de rythme,
   bande « EP & albums », grille « Singles », barre « Écouter au hasard ». Au bureau la page reste celle d'avant. Couleurs : jetons du site (le mode sombre suit). */
.mv1, .mv1-loupe, .mv1-coeurs, .mv1-hasard { display: none; }
.mv1-tp { display: contents; }
@media (max-width: 899px) {
  main[data-musique] > *:not(.mv1-tp):not(.mv1) { display: none !important; }   /* l'ancien haut (onglets, recherche, filtres, liste) cède la place à la V1 */
  .mv1-tp > *:not(h1):not(.mv1-loupe):not(.mv1-coeurs) { display: none !important; }   /* musique-haut.js (haut M1) range ses blocs juste après le titre, donc dans .mv1-tp : on ne garde que le titre et la loupe */
  html body main#contenu[data-musique] { padding-bottom: 0; }   /* 23/10 : le bas (76 px) s'ajoutait aux 64 px de la section e-mail */
  .mv1-tp { display: block; position: relative; }
  .mv1-loupe { display: grid; place-items: center; width: 44px; height: 44px; position: absolute; right: -12px; top: 50%; margin-top: -22px; color: var(--encre); background: none; border: 0; }
  .mv1-coeurs { display: grid; place-items: center; width: 44px; height: 44px; position: absolute; right: 32px; top: 50%; margin-top: -22px; padding: 0; color: var(--encre-2); background: none; border: 0; cursor: pointer; }
  .mv1-coeurs[hidden] { display: none; }
  .mv1-coeurs[aria-pressed="true"] { color: var(--encre); }
  .mv1-coeurs svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
  .mv1-coeurs[aria-pressed="true"] svg { fill: currentColor; }
  .mv1-loupe svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
  .mv1 { display: block; }
  .mv1 button, .mv1 a { -webkit-tap-highlight-color: transparent; }
  .mv1-rech { margin-top: 12px; }
  .mv1-rech input { width: 100%; height: 44px; padding: 0 2px; border: 0; border-bottom: 1.5px solid var(--encre); background: none; color: var(--encre); font: 400 16px/1 var(--texte); border-radius: 0; }
  .mv1-hero { position: relative; padding-top: 16px; }
  /* Avant le 1er rendu (data-pret posé par musique-v1.js), la dernière sortie, la bande et la grille occupent leur hauteur finale : le bas de page ne bouge plus à l'arrivée du catalogue. */
  .mv1:not([data-pret]) .mv1-hero { min-height: 232px; }   /* 16 + pochette 160 + 12 + boutons 44 */
  .mv1:not([data-pret]) .mv1-bande { min-height: 184px; }
  .mv1:not([data-pret]) .mv1-grille::before { content: ""; grid-column: 1 / -1; box-sizing: content-box; height: calc(var(--mv1-rangs, 4) * 46.533px - 16px); padding-top: calc(var(--mv1-rangs, 4) * 33.333%); }   /* n rangées de 3 : n × (colonne + 37,2) + (n - 1) × 16, colonne = largeur / 3 − 6,67 */
  .mv1-hl { display: flex; gap: 14px; }
  .mv1-hl > a, .mv1-hl > a img { display: block; width: 160px; height: 160px; flex: none; }
  .mv1-hr { display: flex; flex-direction: column; justify-content: center; align-self: stretch; min-width: 0; }
  .mv1-sorti { font: 400 13px/1 var(--texte); color: var(--encre-2); }
  .mv1-hr h2 { margin: 7px 0 0; padding: 0; border: 0; font: 900 30px/.95 var(--titre); text-transform: uppercase; overflow-wrap: normal; word-break: normal; hyphens: none; transition: none; }
  .mv1-hr h2 a { color: inherit; text-decoration: none; }
  .mv1-hr small { margin-top: 7px; font: 400 14px/1 var(--texte); color: var(--encre-2); }
  .mv1-btns { display: flex; gap: 10px; margin-top: 12px; }
  .mv1-btns > * { flex: 1; min-width: 0; height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; font: 600 15px/1 var(--texte); border: 1.5px solid var(--encre); border-radius: 0; cursor: pointer; white-space: nowrap; }
  .mv1-b1 { background: var(--encre); color: var(--creme); }
  .mv1-b1 i, .mv1-hasard i { display: block; width: 0; height: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
  .mv1-b1[aria-pressed="true"] { box-shadow: inset 0 -4px var(--ambre); }   /* ambre = en lecture */
  .mv1-b2 { background: transparent; color: var(--encre); }
  .mv1-ryt { display: flex; justify-content: space-between; gap: 0 12px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; }
  .mv1-ryt button { position: relative; flex: none; min-width: 44px; justify-content: center; min-height: 44px; display: inline-flex; align-items: center; padding: 0; background: none; border: 0; border-radius: 0; font: 400 17px/1 var(--texte); color: var(--encre-2); cursor: pointer; }
  .mv1-ryt button[aria-pressed="true"] { font-weight: 600; color: var(--encre); }
  .mv1 h3 { margin: 18px 0 10px; padding: 0; border: 0; font: 900 26px/1 var(--titre); text-transform: uppercase; }
  .mv1 ul { list-style: none; margin: 0; padding: 0; }
  .mv1-bande { display: flex; gap: 10px; margin: 0 -20px !important; padding: 0 20px !important; overflow-x: auto; scrollbar-width: none; }
  .mv1-bande li { width: 146px; flex: none; display: flex; flex-direction: column; }
  .mv1-bande img { width: 146px; height: 146px; }
  .mv1-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
  .mv1-grille li { min-width: 0; }
  .mv1-grille img { width: 100%; aspect-ratio: 1; height: auto; }
  .mv1 li > button { position: relative; display: block; width: 100%; padding: 0; background: none; border: 0; border-radius: 0; cursor: pointer; }
  .mv1 li img { display: block; border-radius: 0; background: var(--filet); }
  .mv1 li > button[aria-pressed="true"] { outline: 2px solid var(--ambre); outline-offset: 2px; }   /* ambre = en lecture */
  .mv1 li > a { display: block; color: inherit; text-decoration: none; }
  .mv1-bande li > a { min-height: 24px; margin-bottom: -2px; }   /* cible tactile ≥ 24 px (WCAG 2.5.8) sans bouger la mise en page : la ligne du titre mesurait 22 px */
  .mv1 li b { display: block; margin-top: 6px; font: 500 13px/1.2 var(--texte); }
  .mv1-grille li b { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; height: calc(2 * 1.2 * 13px); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .mv1-nm { display: flex; align-items: flex-start; }   /* grille Singles : nom du titre (tronqué à 2 lignes) puis ♥ à sa droite, sous la pochette */
  .mv1-nm > a { flex: 1; min-width: 0; display: block; color: inherit; text-decoration: none; }
  .mv1 .mv1-c { flex: none; width: 44px; height: 44px; padding: 0; background: none; border: 0; border-radius: 0; outline: 0; cursor: pointer; display: grid; place-items: center; }   /* ♥ à plat ; zone de toucher 44 px, encombrement visuel réduit par les marges négatives */
  .mv1 .mv1-c svg { width: 20px; height: 20px; }
  .mv1-nm > .mv1-c { margin: 0 -12px -13px -12px; align-content: start; }
  .mv1-nm > .mv1-c svg { margin-top: 4px; }   /* l'icône s'aligne sur la 1re ligne du nom ; la zone de 44 px commence sous la pochette */
  .mv1 li small { display: block; margin-top: 2px; font: 400 11px/1.3 var(--texte); color: var(--encre-2); }
  .mv1-plus { display: block; margin: 16px 0 0; min-height: 44px; padding: 0; background: none; border: 0; border-radius: 0; color: var(--encre); font: 600 15px/1 var(--texte); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; cursor: pointer; }
  .mv1-vide { margin: 14px 0 0; font: 400 15px/1.4 var(--texte); color: var(--encre-2); }
  .mv1-hasard { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: calc(52px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); display: flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--encre); color: var(--creme); border: 0; border-radius: 0; font: 600 16px/1 var(--texte); cursor: pointer; }
  html.joue .mv1-hasard { display: none; }   /* le lecteur du bas prend la place */
}