/* ═══════════════════════════════════════════════════════════════════════
   mobile.css — Disposition « Spotify mobile » pour SpotX
   ------------------------------------------------------------------------
   TOUT est enfermé dans @media (max-width:820px) : au-dessus de 820 px
   (ordinateur) rien ici ne s'applique, l'affichage d'origine est intact.
   Les éléments neufs injectés par mobile.js (barre du bas, mini-lecteur
   plein écran, écrans Recherche/Premium) sont display:none PAR DÉFAUT :
   ils n'apparaissent donc jamais sur ordinateur, même présents dans le DOM.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Éléments injectés : cachés partout par défaut (donc sur ordinateur) ── */
#mobBottomNav,
#mobPlayer,
#mobSearchBar,
#mobPremium { display: none; }

/* Compléments injectés dans la barre latérale (avatar, bascule grille…) :
   invisibles sur ordinateur, réactivés seulement dans le bloc mobile. */
.mob-only { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE — tout ce qui suit ne vaut que sur petit écran
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {

  :root {
    --mob-nav-h: 58px;      /* hauteur de la barre d'onglets du bas        */
    --mob-mini-h: 58px;     /* hauteur du mini-lecteur                     */
    --mob-safe: env(safe-area-inset-bottom, 0px);
    --mob-safe-top: env(safe-area-inset-top, 0px);  /* encoche / heure-batterie */
    --mob-gap: 8px;
  }

  /* iOS zoome automatiquement dès qu'on tape dans un champ de police < 16px.
     On force 16px sur tous les champs texte pour supprimer ce mini-zoom. */
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  textarea, select { font-size: 16px !important; }

  /* ── Structure générale ────────────────────────────────────────────── */
  .app {
    display: block;
    grid-template-columns: none;
    grid-template-rows: none;
    grid-template-areas: none;
    height: 100vh;
    height: 100dvh;
    padding: 0;
    gap: 0;
    background: var(--bg);
    overflow: hidden;
  }

  .main {
    border-radius: 0;
    height: 100vh;
    height: 100dvh;
  }

  /* En-tête d'origine masqué : chaque écran a désormais sa propre en-tête */
  .main-header { display: none !important; }

  /* Zone défilante : de la place en bas pour le mini-lecteur + la barre */
  .main-scroll {
    padding: calc(12px + var(--mob-safe-top)) 16px
      calc(var(--mob-nav-h) + var(--mob-mini-h) + var(--mob-safe) + 28px);
    -webkit-overflow-scrolling: touch;
  }

  /* Les en-têtes en « bleed » (-24px) doivent coller aux bords : on ramène
     le padding latéral à 24px UNIQUEMENT pour ces blocs pleine largeur, via
     une compensation locale. Plus simple : on neutralise le débordement. */
  .home-gradient,
  .liked-gradient { margin-left: -16px; margin-right: -16px;
    padding-left: 16px; padding-right: 16px; height: auto; min-height: 180px; }
  .home-gradient { padding-top: 46px; padding-bottom: 18px; }
  .liked-gradient { padding-top: 40px; padding-bottom: 18px; }

  /* rien ne dépasse horizontalement : on VERROUILLE le défilement latéral
     (une vraie app ne se balade pas de gauche à droite). Les rangées de
     chips gardent leur propre overflow-x:auto, donc elles défilent encore. */
  html, body {
    max-width: 100vw; overflow-x: hidden;
    overscroll-behavior-x: none;
  }
  .app, .main, .main-scroll, .sidebar, #mobPremium, #mobSearchBar {
    max-width: 100vw; overflow-x: hidden;
  }
  .main-scroll > * { max-width: 100%; }

  /* Bandeau d'identité de source (accueils YT/Deezer/SC) : passe à la ligne
     au lieu de déborder — les boutons d'action vont sur leur propre rangée. */
  .src-hero { flex-wrap: wrap; padding: 14px 0 10px; gap: 12px; }
  .src-hero-txt { min-width: 0; }
  .src-hero-txt h1 { font-size: 1.45rem; }
  .src-hero-txt p { font-size: .8rem; }
  .src-hero-actions { margin-left: 0; flex-basis: 100%; flex-wrap: wrap; }
  .refresh-btn { min-height: 40px; }
  /* barre d'onglets de tri / genres : défile au lieu de déborder */
  .genre-scroll, .home-chips { overflow-x: auto; flex-wrap: nowrap; }

  /* ── Grilles → 2 colonnes ──────────────────────────────────────────────
     minmax(0,1fr) + min-width:0 sur les cartes : SANS ça, une image un peu
     large « gonfle » sa colonne (grid blowout) et la vignette devient énorme
     (le « zoom » de l'accueil sur « Reprendre l'écoute »). On force donc des
     colonnes strictement égales et des cartes bornées à leur cellule. */
  .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cards-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px; grid-auto-flow: row !important; }
  .vid-row   { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px; grid-auto-flow: row !important; }
  .cover-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px; grid-auto-flow: row !important; overflow-x: hidden !important; }
  .top-list  { grid-template-columns: 1fr !important; }

  /* Chaque carte reste dans sa colonne (jamais plus large que la cellule). */
  .home-grid > *, .cards-row > *, .vid-row > *, .cover-row > *,
  .cover-card, .vid-card, .song-card, .card {
    min-width: 0 !important; max-width: 100% !important;
  }
  .cover-card img, .cover-wrap img, .vid-card img, .card img {
    max-width: 100% !important;
  }

  /* Liste résultats YouTube : vignette réduite pour tenir en largeur */
  .vid-list-thumb { width: 140px !important; }

  /* ── Titres d'écran (playlist / likés) plus compacts ───────────────── */
  .pl-name { font-size: 1.9rem !important; }
  .pl-cover { width: 150px; height: 150px; }
  .pl-cover svg { width: 56px; height: 56px; }

  /* Page playlist : pochette centrée + rangée d'actions large */
  .pl-actions { padding: 18px 0 12px; gap: 20px; }
  .pl-actions .pl-play-btn { width: 58px; height: 58px; order: 3; margin-left: auto; }
  .pl-actions .mob-shuffle {
    width: 46px; height: 46px; display: flex; align-items: center;
    justify-content: center; color: var(--muted); order: 2; margin-left: auto;
  }
  .pl-actions .mob-shuffle svg { width: 26px; height: 26px; fill: currentColor; }
  .pl-actions .mob-shuffle.active { color: var(--green); }

  /* Page playlist enrichie (library.js) : pochette centrée façon Spotify */
  .lib-pl-hero {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 18px 0 12px;
    margin: 0 -16px 4px;
  }
  .lib-pl-cover { width: min(62vw, 230px); height: min(62vw, 230px); }
  .lib-pl-meta { text-align: center; padding-bottom: 0; }
  .lib-pl-name { font-size: 1.9rem !important; text-align: center; }
  .lib-pl-toolbar {
    justify-content: center;
    gap: 10px;
    padding: 6px 0 16px;
  }
  .lib-pl-toolbar .pl-play-btn { width: 58px; height: 58px; }
  .lib-pl-toolbar .lib-btn { min-height: 44px; }

  /* ═════════════════════════════════════════════════════════════════════
     1) BARRE D'ONGLETS DU BAS
     ═════════════════════════════════════════════════════════════════════ */
  #mobBottomNav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: calc(var(--mob-nav-h) + var(--mob-safe));
    padding-bottom: var(--mob-safe);
    background: rgba(8, 8, 8, .96);
    backdrop-filter: blur(18px);
    border-top: 1px solid rgba(255, 255, 255, .06);
    z-index: 120;
    align-items: stretch;
  }
  .mob-tab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 44px;
    color: #a7a7a7;
    background: none;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .01em;
    padding: 6px 2px;
    transition: color .15s;
  }
  .mob-tab svg { width: 24px; height: 24px; fill: currentColor; display: block; }
  .mob-tab .mob-tab-lbl {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mob-tab.active { color: #fff; }

  /* ═════════════════════════════════════════════════════════════════════
     2) MINI-LECTEUR (réutilise .player-bar existante)
     ═════════════════════════════════════════════════════════════════════ */
  .player-bar {
    position: fixed;
    left: var(--mob-gap); right: var(--mob-gap);
    bottom: calc(var(--mob-nav-h) + var(--mob-safe) + 6px);
    width: auto;
    height: var(--mob-mini-h);
    border: none;
    border-radius: 8px;
    background: linear-gradient(90deg, #3a2c4d, #442f3a);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .5);
    padding: 0 8px 0 8px;
    gap: 8px;
    z-index: 110;
    overflow: visible;
  }

  /* Gauche : pochette + titre/artiste (zone cliquable → plein écran) */
  .player-bar .player-left {
    width: auto; flex: 1 1 auto; gap: 10px; min-width: 0;
  }
  .player-bar .player-thumb { width: 42px; height: 42px; }
  .player-bar .player-title { font-size: .82rem; }
  .player-bar .player-artist { font-size: .72rem; }
  /* cœur : gardé mais discret */
  .player-bar .heart-btn { padding: 6px; }

  /* Centre : on ne garde que Lecture + Suivant, alignés à droite */
  .player-bar .player-center {
    position: static;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    max-width: none;
    margin: 0;
    gap: 4px;
    width: auto;
  }
  .player-bar .player-controls { gap: 2px; }
  .player-bar #shuffleBtn,
  .player-bar #repeatBtn,
  .player-bar .player-controls button[title="Précédent"] { display: none; }
  .player-bar .play-btn {
    width: 44px; height: 44px; background: transparent;
    justify-content: center;
  }
  .player-bar .play-btn svg { width: 30px; height: 30px; fill: #fff; }
  .player-bar .play-btn:hover { transform: none; background: transparent; }
  .player-bar .ctrl-btn {
    color: #fff; min-width: 44px; min-height: 44px;
    justify-content: center;
  }
  .player-bar .ctrl-btn svg { width: 24px; height: 24px; }
  .player-bar .heart-btn { min-width: 44px; min-height: 44px; justify-content: center; display: flex; align-items: center; }

  /* Barre de progression : fine ligne collée sous le mini-lecteur */
  .player-bar .player-progress {
    position: absolute;
    left: 8px; right: 8px; bottom: 3px;
    width: auto;
    gap: 0;
    pointer-events: none;
  }
  .player-bar .player-progress .time-el { display: none; }
  .player-bar .prog-bar { height: 3px; background: rgba(255, 255, 255, .28); }
  .player-bar .prog-bar:hover { height: 3px; }
  .player-bar .prog-fill { background: #fff; }
  .player-bar .prog-dot { display: none !important; }

  /* Droite : volume + téléchargement cachés (place au mini-lecteur) */
  .player-bar .player-right { display: none; }

  /* zone tactile « ouvrir en plein écran » */
  .player-bar .player-left .player-thumb,
  .player-bar .player-left .player-info { cursor: pointer; }

  /* Bannière « Installer » : la remonter au-dessus du mini-lecteur + barre
     d'onglets (sinon elle chevauche le lecteur en bas). */
  .pwa-banner {
    bottom: calc(var(--mob-nav-h) + var(--mob-safe) + var(--mob-mini-h) + 18px) !important;
    left: var(--mob-gap) !important; right: var(--mob-gap) !important;
    transform: none !important; width: auto !important; max-width: none !important;
  }
  .pwa-banner.show { transform: none !important; }

  /* ═════════════════════════════════════════════════════════════════════
     3) BIBLIOTHÈQUE — la barre latérale devient un écran plein
     ═════════════════════════════════════════════════════════════════════ */
  .sidebar { display: none; }

  body[data-mobtab="library"] .sidebar {
    display: flex;
    position: fixed;
    left: 0; right: 0; top: 0;
    bottom: calc(var(--mob-nav-h) + var(--mob-safe));
    width: auto;
    border-radius: 0;
    background: var(--bg);
    z-index: 90;
    padding-top: calc(8px + var(--mob-safe-top));
  }
  /* le mini-lecteur flotte au-dessus : on réserve la place en bas de liste */
  body[data-mobtab="library"] .sidebar .lib-items {
    padding-bottom: calc(var(--mob-mini-h) + 22px);
  }
  body[data-mobtab="library"] .sidebar .lib-top { padding: 14px 16px 6px; }
  body[data-mobtab="library"] .sidebar .lib-top-left {
    font-size: 1.35rem; font-weight: 800; color: #fff;
  }
  body[data-mobtab="library"] .sidebar .lib-top-left svg {
    width: 26px; height: 26px; fill: #fff;
  }
  body[data-mobtab="library"] .sidebar .lib-filters { padding: 6px 14px; gap: 8px; }
  body[data-mobtab="library"] .sidebar .pill { padding: 8px 15px; font-size: .84rem; min-height: 34px; }
  /* La rangée d'origine affichait déjà « Récents » : sur téléphone c'est la
     rangée de tri injectée (.mob-viewtoggle) qui joue ce rôle, on masque
     donc le doublon quel que soit l'onglet actif. */
  .sidebar .lib-search-row { display: none !important; }
  body[data-mobtab="library"] .sidebar .lib-items { padding: 0 8px 8px; }
  body[data-mobtab="library"] .sidebar .lib-item { padding: 9px 8px; min-height: 44px; }
  body[data-mobtab="library"] .sidebar .lib-thumb { width: 52px; height: 52px; }
  body[data-mobtab="library"] .sidebar .lib-name { font-size: .95rem; }

  /* petits boutons d'en-tête de la bibliothèque (avatar, loupe, +) */
  /* réactivation des compléments mobiles de la bibliothèque */
  .mob-lib-avatar.mob-only { display: flex !important; }
  .mob-viewtoggle.mob-only { display: flex !important; }

  /* Fenêtre « Créer une playlist » au-dessus de la barre d'onglets */
  .modal-overlay { z-index: 200; }

  .mob-lib-actions { display: flex; align-items: center; gap: 6px; }
  .mob-lib-avatar {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--green), #0d7a37);
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 800; color: #000; overflow: hidden;
  }
  .mob-lib-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .mob-viewtoggle {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 16px 8px;
  }
  .mob-viewtoggle .vt-recents {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--muted); font-size: .82rem; font-weight: 600;
  }
  .mob-viewtoggle .vt-grid {
    width: 40px; height: 40px; display: flex; align-items: center;
    justify-content: center; color: var(--muted);
  }
  .mob-viewtoggle .vt-grid svg { width: 20px; height: 20px; fill: currentColor; }

  /* ═════════════════════════════════════════════════════════════════════
     4) RECHERCHE — barre fixe en haut + tuiles de catégories
     ═════════════════════════════════════════════════════════════════════ */
  body[data-mobtab="search"] #mobSearchBar {
    display: block;
    position: fixed;
    left: 0; right: 0; top: 0;
    z-index: 95;
    background: linear-gradient(180deg, rgba(18, 18, 18, .98), rgba(18, 18, 18, .92));
    backdrop-filter: blur(14px);
    padding: calc(14px + var(--mob-safe-top)) 16px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
  }
  #mobSearchBar .mob-search-title {
    font-size: 1.5rem; font-weight: 800; margin-bottom: 12px; color: #fff;
  }
  #mobSearchBar .mob-search-field {
    display: flex; align-items: center; gap: 10px;
    background: #fff; border-radius: 8px; padding: 12px 14px;
  }
  #mobSearchBar .mob-search-field svg { width: 20px; height: 20px; fill: #121212; flex-shrink: 0; }
  #mobSearchBar .mob-search-field input {
    flex: 1; min-width: 0; background: none; color: #121212;
    font-size: .95rem; font-weight: 500;
  }
  #mobSearchBar .mob-search-field input::placeholder { color: #6a6a6a; }
  #mobSearchBar .mob-src-chips { display: flex; gap: 8px; margin-top: 11px; overflow-x: auto; }
  #mobSearchBar .mob-src-chip {
    flex: 0 0 auto; padding: 7px 14px; border-radius: 18px; min-height: 34px;
    background: rgba(255, 255, 255, .1); color: #fff;
    font-size: .8rem; font-weight: 700; white-space: nowrap;
  }
  #mobSearchBar .mob-src-chip.yt.on { background: #ff0000; color: #fff; }
  #mobSearchBar .mob-src-chip.sp.on { background: #1db954; color: #000; }
  #mobSearchBar .mob-src-chip.sc.on { background: #ff5500; color: #fff; }

  /* Quand la recherche est active, on décale le contenu sous la barre fixe */
  body[data-mobtab="search"] .main-scroll { padding-top: calc(158px + var(--mob-safe-top)); }

  /* Tuiles de catégories (écran d'accueil de la recherche) */
  .mob-browse-title { font-size: 1.25rem; font-weight: 800; margin: 6px 0 14px; }
  .mob-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .mob-cat-tile {
    position: relative; aspect-ratio: 16/10; border-radius: 10px;
    overflow: hidden; padding: 12px; cursor: pointer;
    display: flex; align-items: flex-start;
    font-size: 1rem; font-weight: 800; color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  }
  .mob-cat-tile span { position: relative; z-index: 2; line-height: 1.15; }

  /* ═════════════════════════════════════════════════════════════════════
     5) PREMIUM / COMPTE
     ═════════════════════════════════════════════════════════════════════ */
  body[data-mobtab="premium"] #mobPremium {
    display: block;
    position: fixed;
    left: 0; right: 0; top: 0;
    bottom: calc(var(--mob-nav-h) + var(--mob-safe));
    z-index: 90;
    background: linear-gradient(180deg, #14331f 0%, var(--bg) 46%);
    overflow-y: auto;
    padding: calc(26px + var(--mob-safe-top)) 18px calc(var(--mob-mini-h) + 26px);
  }
  #mobPremium .mp-avatar {
    width: 74px; height: 74px; border-radius: 50%; margin: 0 auto 14px;
    background: linear-gradient(135deg, var(--green), #0d7a37);
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; font-weight: 800; color: #000; overflow: hidden;
  }
  #mobPremium .mp-avatar img { width: 100%; height: 100%; object-fit: cover; }
  #mobPremium .mp-name { text-align: center; font-size: 1.4rem; font-weight: 800; }
  #mobPremium .mp-mail { text-align: center; color: var(--muted); font-size: .84rem; margin-top: 3px; }
  #mobPremium .mp-plan {
    display: block; width: max-content; margin: 12px auto 0;
    padding: 5px 14px; border-radius: 20px; font-size: .74rem;
    font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
    background: #333; color: #bbb;
  }
  #mobPremium .mp-plan.premium, #mobPremium .mp-plan.pro,
  #mobPremium .mp-plan.admin { background: var(--green); color: #000; }
  #mobPremium .mp-card {
    background: rgba(255, 255, 255, .05); border: 1px solid var(--border);
    border-radius: 14px; padding: 18px; margin-top: 20px;
  }
  #mobPremium .mp-card h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 8px; }
  #mobPremium .mp-card p { color: var(--muted); font-size: .86rem; line-height: 1.5; }
  #mobPremium .mp-status-big { font-size: 1.1rem; font-weight: 800; margin-bottom: 6px; }
  #mobPremium .mp-status-big.ok { color: var(--green); }
  #mobPremium .mp-status-big.warn { color: #ff6b81; }
  #mobPremium .mp-btn {
    display: block; width: 100%; text-align: center;
    border-radius: 24px; padding: 14px; margin-top: 12px;
    font-size: .95rem; font-weight: 800; min-height: 48px;
  }
  #mobPremium .mp-btn.primary { background: var(--green); color: #000; }
  #mobPremium .mp-btn.ghost {
    background: transparent; border: 1px solid #666; color: #fff;
  }
  #mobPremium .mp-btn.danger { background: transparent; color: #fca5a5; }

  /* ═════════════════════════════════════════════════════════════════════
     6) LECTEUR PLEIN ÉCRAN (ouvert par appui sur le mini-lecteur)
     ═════════════════════════════════════════════════════════════════════ */
  #mobPlayer {
    position: fixed; inset: 0; z-index: 300;
    background: linear-gradient(180deg, #4a3a63 0%, #1c1626 52%, #0d0d0d 100%);
    display: none;
    flex-direction: column;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 22px
             calc(26px + var(--mob-safe)) 22px;
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  }
  #mobPlayer.open { display: flex; transform: translateY(0); }

  #mobPlayer .mp-top {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
  }
  #mobPlayer .mp-top button {
    width: 44px; height: 44px; display: flex; align-items: center;
    justify-content: center; color: #fff;
  }
  #mobPlayer .mp-top svg { width: 24px; height: 24px; fill: #fff; }
  #mobPlayer .mp-top .mp-ctx-label {
    font-size: .74rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: #fff;
  }
  #mobPlayer .mp-cover-wrap {
    flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
    padding: 8px 0 20px;
  }
  #mobPlayer .mp-cover {
    width: min(76vw, 360px); aspect-ratio: 1; border-radius: 10px;
    object-fit: cover; background: #282828;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
    display: flex; align-items: center; justify-content: center;
  }
  #mobPlayer .mp-cover svg { width: 40%; height: 40%; fill: rgba(255,255,255,.4); }
  #mobPlayer .mp-meta-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
  }
  #mobPlayer .mp-fs-title {
    font-size: 1.4rem; font-weight: 800; color: #fff;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #mobPlayer .mp-fs-artist { font-size: .95rem; color: rgba(255,255,255,.7); margin-top: 2px; }
  #mobPlayer .mp-fs-heart { width: 44px; height: 44px; flex-shrink: 0; color: #fff; }
  #mobPlayer .mp-fs-heart svg { width: 26px; height: 26px; }
  #mobPlayer .mp-fs-heart.liked { color: var(--green); }

  #mobPlayer .mp-prog { margin-top: 16px; }
  #mobPlayer .mp-prog-bar {
    height: 5px; background: rgba(255,255,255,.28); border-radius: 3px;
    position: relative; cursor: pointer;
  }
  #mobPlayer .mp-prog-fill {
    height: 100%; background: #fff; border-radius: 3px; width: 0%;
    position: relative;
  }
  #mobPlayer .mp-prog-dot {
    position: absolute; right: -6px; top: 50%; transform: translateY(-50%);
    width: 13px; height: 13px; border-radius: 50%; background: #fff;
  }
  #mobPlayer .mp-times {
    display: flex; justify-content: space-between;
    font-size: .7rem; color: rgba(255,255,255,.6); margin-top: 7px;
  }
  #mobPlayer .mp-controls {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 18px;
  }
  #mobPlayer .mp-controls button {
    color: #fff; display: flex; align-items: center; justify-content: center;
  }
  #mobPlayer .mp-controls .mp-c-side { width: 48px; height: 48px; }
  #mobPlayer .mp-controls .mp-c-side svg { width: 26px; height: 26px; fill: currentColor; }
  #mobPlayer .mp-controls .mp-c-side.active { color: var(--green); }
  #mobPlayer .mp-controls .mp-c-skip { width: 56px; height: 56px; }
  #mobPlayer .mp-controls .mp-c-skip svg { width: 34px; height: 34px; fill: #fff; }
  #mobPlayer .mp-controls .mp-c-play {
    width: 66px; height: 66px; border-radius: 50%; background: #fff;
    flex-shrink: 0;
  }
  #mobPlayer .mp-controls .mp-c-play svg { width: 30px; height: 30px; fill: #000; }

  /* Bouton ⋯ (options) dans l'en-tête du lecteur plein écran */
  #mobPlayer .mp-more { width: 44px; height: 44px; color: #fff; }
  #mobPlayer .mp-more svg { width: 24px; height: 24px; fill: #fff; }

  /* ── Menu contextuel = FEUILLE DU BAS sur mobile ──────────────────────
     Au-dessus de tout (même le lecteur plein écran), gros boutons tactiles. */
  #ctxMenu {
    position: fixed !important;
    left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important;
    width: auto !important; max-width: none !important; min-width: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    padding: 10px 10px calc(14px + var(--mob-safe)) !important;
    z-index: 9500 !important;
    box-shadow: 0 -12px 44px rgba(0, 0, 0, .55) !important;
    animation: ctxSheetUp .22s cubic-bezier(.2, .8, .2, 1);
  }
  @keyframes ctxSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
  #ctxMenu .ctx-item {
    padding: 16px 18px !important; font-size: 1rem !important; border-radius: 10px;
  }
  #ctxMenu .ctx-sep { margin: 4px 12px !important; }

  /* Bouton ⋯ ajouté sur chaque ligne de son (mobile) */
  .search-result .sr-more {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex-shrink: 0;
    color: var(--muted); background: none; margin-left: 2px;
  }
  .search-result .sr-more:active { color: #fff; }
  .search-result .sr-more svg { fill: currentColor; }
}

/* Sur écran fin (≤ 360px) : libellés d'onglets un poil plus petits */
@media (max-width: 360px) {
  .mob-tab { font-size: .58rem; }
  .mob-tab svg { width: 22px; height: 22px; }
}