/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   SPOTIFY — LE LECTEUR DU MENU RELIÉ AU COMPTE (js/193, js/194, 11.10.2026)

   Deux surfaces, deux règles de couleur :
     — le lecteur, dans le menu : il vit sur le marine du menu, qui reste marine dans les deux
       thèmes (css/00, css/99-menu). Il prend donc les variables redéfinies dans .sidebar (texte
       blanc, gris bleutés) et un verre légèrement plus clair que le menu, flouté pour rester lisible
       sur les rayures des thèmes de club ;
     — le panneau (appareils, playlists, likés, recherche) et le réglage de Paramètres : posés sur la
       page, ils suivent le thème clair ou sombre par les jetons (--surface, --text, --border…).
   Le vert est celui de Spotify (#1ED760), réservé à ce qui est « Spotify » : le logo, l'appareil qui
   joue, l'état actif d'aléatoire et de répétition. Sur fond clair, le vert de texte fonce (#0B7A35,
   5,2:1 sur blanc) : le vert vif n'y tient que 1,8:1.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Le lecteur dans le menu ─────────────────────────────────────────────────────────────────────── */
.spf-lecteur {
  --spf-vert: #1ED760;
  position: relative; flex-shrink: 0;
  margin: 8px 0 6px; padding: 9px 9px 8px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .04) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 18px -12px rgba(2, 10, 30, .7);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--text, #fff);
  font-size: 12px;
}
/* font-family seulement : un « font: inherit » (0,1,1) écraserait la taille posée par chaque classe (0,1,0). */
.spf-lecteur button { font-family: inherit; }
.spf-lecteur.spf-joue { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(30, 215, 96, .22), 0 8px 18px -12px rgba(2, 10, 30, .7); }

.spf-tete { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 9px; align-items: center; }
.spf-pochette-btn { display: block; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 7px; }
.spf-pochette-cadre {
  position: relative; display: block; flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 7px; overflow: hidden;
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 2px 8px rgba(2, 10, 30, .4);
}
.spf-pochette-vide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .5); }
.spf-pochette { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.spf-pochette[hidden] { display: none; }
.spf-textes { min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.spf-titre {
  font-size: 12.5px; font-weight: 600; color: var(--text, #fff); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.spf-artiste { font-size: 11px; color: var(--text-muted, #BFCDE6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* La progression et le volume : des curseurs natifs (clavier, lecteurs d'écran), redessinés. */
.spf-progression {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px; align-items: center; gap: 6px;
  margin: 7px 0 1px; font-size: 10px; font-variant-numeric: tabular-nums; color: var(--text-dim, #97AAD0);
}
.spf-progression > span:first-child { text-align: right; }
.spf-curseur {
  --spf-pct: 0%; --spf-piste: rgba(255, 255, 255, .22); --spf-plein: #fff;
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 14px; margin: 0; padding: 0; background: transparent; cursor: pointer;
}
.spf-curseur:focus { outline: none; }
.spf-curseur::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--spf-plein) 0 var(--spf-pct), var(--spf-piste) var(--spf-pct) 100%);
}
.spf-curseur::-moz-range-track { height: 4px; border-radius: 2px; background: var(--spf-piste); }
.spf-curseur::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--spf-plein); }
.spf-curseur::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border: 0; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .45); opacity: 0; transition: opacity .15s;
}
.spf-curseur::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .45); opacity: 0; }
.spf-curseur:hover:not(:disabled), .spf-curseur:focus-visible { --spf-plein: var(--spf-vert, #1ED760); }
.spf-curseur:hover:not(:disabled)::-webkit-slider-thumb, .spf-curseur:focus-visible::-webkit-slider-thumb { opacity: 1; }
.spf-curseur:hover:not(:disabled)::-moz-range-thumb, .spf-curseur:focus-visible::-moz-range-thumb { opacity: 1; }
.spf-curseur:focus-visible { outline: 2px solid #00CFFF; outline-offset: 2px; border-radius: 4px; }
.spf-curseur:disabled { cursor: default; opacity: .45; }

/* Les commandes. */
.spf-commandes { display: flex; align-items: center; justify-content: space-between; margin: 1px -3px 0; }
.spf-btn {
  position: relative; flex-shrink: 0;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; color: rgba(255, 255, 255, .78); cursor: pointer;
  transition: background .15s, color .15s, transform .15s;
}
.spf-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .1); color: #fff; }
.spf-btn:disabled { opacity: .32; cursor: default; }
.spf-btn.actif { color: var(--spf-vert, #1ED760); }
.spf-btn.actif::after {
  content: ''; position: absolute; left: 50%; bottom: 1px;
  width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor;
}
.spf-btn-petit { width: 24px; height: 24px; border-radius: 7px; color: rgba(255, 255, 255, .62); }
.spf-btn-lecture { width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #0B2458; box-shadow: 0 4px 12px -3px rgba(0, 0, 0, .5); }
.spf-btn-lecture:hover:not(:disabled) { background: #fff; color: #0B2458; transform: scale(1.06); }
.spf-btn:focus-visible { outline: 2px solid #00CFFF; outline-offset: 1px; }

/* Le pied : volume, et l'appareil qui joue (le logo Spotify y signe ce qui vient de Spotify). */
.spf-pied { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 5px; margin-top: 3px; }
.spf-volume { --spf-piste: rgba(255, 255, 255, .18); }
.spf-appareil {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100px; height: 22px;
  padding: 0 8px 0 6px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .07); color: var(--text-muted, #BFCDE6);
  font-size: 10.5px; cursor: pointer;
}
.spf-appareil span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spf-appareil .spf-ico { flex-shrink: 0; color: var(--spf-vert, #1ED760); }
.spf-appareil:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.spf-appareil.actif { color: #8BF0B1; background: rgba(30, 215, 96, .13); }
.spf-appareil:focus-visible { outline: 2px solid #00CFFF; outline-offset: 1px; }

/* L'avis : une ligne, sous le lecteur (Premium, pause demandée par Spotify, échec d'une commande). */
.spf-avis {
  margin: 6px 0 0; padding: 5px 8px; border-radius: 8px;
  font-size: 10.5px; line-height: 1.35;
  background: rgba(255, 255, 255, .07); color: var(--text-muted, #BFCDE6);
}
.spf-avis[hidden] { display: none; }
.spf-lecteur .spf-avis[data-ton="premium"], .spf-lecteur .spf-avis[data-ton="attente"] { background: rgba(245, 158, 11, .16); color: #FCD99A; }
.spf-lecteur .spf-avis[data-ton="erreur"] { background: rgba(248, 113, 113, .16); color: #FECACA; }

/* La version mini : la pochette, le titre, lecture / pause ; un filet de progression en bas. */
.spf-lecteur.spf-mini { padding: 6px 6px 8px; overflow: hidden; }
.spf-mini-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 3px; }
.spf-mini-ouvrir {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0; border: 0; border-radius: 8px;
  background: none; color: inherit; text-align: left; cursor: pointer;
}
.spf-mini-ouvrir:focus-visible { outline: 2px solid #00CFFF; outline-offset: 2px; }
.spf-mini .spf-pochette-cadre { width: 34px; height: 34px; border-radius: 6px; }
.spf-mini .spf-btn-lecture { width: 30px; height: 30px; }
.spf-barre {
  position: absolute; left: 10px; right: 10px; bottom: 3px; height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, var(--spf-vert, #1ED760) 0 var(--spf-pct, 0%), rgba(255, 255, 255, .14) var(--spf-pct, 0%) 100%);
}

/* Rien de configuré, ou pas encore connecté. */
.spf-accueil { display: flex; flex-direction: column; gap: 7px; }
.spf-accueil-tete { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.spf-accueil-tete .spf-btn { margin-left: auto; }
.spf-logo { display: inline-flex; color: var(--spf-vert, #1ED760); }
.spf-accueil p { margin: 0; font-size: 11px; line-height: 1.4; color: var(--text-muted, #BFCDE6); }
.spf-bouton-vert {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px;
  background: #1ED760; color: #04140A; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .15s, transform .15s;
}
.spf-bouton-vert:hover { background: #3BE477; transform: scale(1.02); }
.spf-bouton-vert:focus-visible { outline: 2px solid #00CFFF; outline-offset: 2px; }
.spf-large { width: 100%; min-height: 42px; font-size: 13px; }

/* ── Le panneau : appareils, playlists, likés, recherche ─────────────────────────────────────────── */
.spf-calque { position: fixed; inset: 0; z-index: 940; pointer-events: none; }
.spf-voile { display: none; }
.spf-panneau {
  --spf-vert: #1ED760; --spf-vert-texte: #1ED760;
  pointer-events: auto;
  position: fixed; left: 250px; bottom: 16px;
  width: 360px; max-width: calc(100vw - 24px); max-height: min(620px, calc(100vh - 32px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 24px 48px -14px rgba(2, 10, 30, .5), 0 2px 6px rgba(2, 10, 30, .16);
  transform-origin: 0 100%;
  animation: spf-entree .18s cubic-bezier(.16, 1, .3, 1) both;
}
html[data-theme="clair"] .spf-panneau { --spf-vert-texte: #0B7A35; }
@keyframes spf-entree { from { opacity: 0; transform: translateX(-8px) scale(.98); } to { opacity: 1; transform: none; } }
.spf-panneau button, .spf-panneau input { font-family: inherit; }
/* Relié : une hauteur fixe sur ordinateur, le panneau ne saute pas d'un onglet à l'autre. */
.spf-panneau-plein, .spf-panneau-mini { height: min(540px, calc(100vh - 32px)); }
.spf-poignee { display: none; }
.spf-panneau-tete { display: flex; align-items: center; gap: 10px; padding: 12px 12px 8px 14px; }
.spf-marque { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--text); }
.spf-marque .spf-ico { color: #1ED760; }
.spf-compte { flex: 1; min-width: 0; text-align: right; font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spf-fermer {
  width: 30px; height: 30px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 9px; background: var(--surface-alt); color: var(--text-muted); cursor: pointer;
}
.spf-fermer:hover { background: var(--surface-hover); color: var(--text); }

/* Dans le panneau, les commandes et curseurs prennent l'encre de la page. */
.spf-panneau .spf-btn { color: var(--text-muted); }
.spf-panneau .spf-btn:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); }
.spf-panneau .spf-btn.actif { color: var(--spf-vert-texte); }
.spf-panneau .spf-btn-lecture { background: var(--text); color: var(--surface); box-shadow: 0 6px 16px -6px rgba(2, 10, 30, .5); }
.spf-panneau .spf-btn-lecture:hover:not(:disabled) { background: var(--text); color: var(--surface); }
.spf-panneau .spf-curseur { --spf-piste: color-mix(in srgb, var(--text) 16%, transparent); --spf-plein: var(--text); }
.spf-panneau .spf-curseur:hover:not(:disabled), .spf-panneau .spf-curseur:focus-visible { --spf-plein: var(--spf-vert-texte); }
.spf-panneau .spf-curseur::-webkit-slider-thumb { background: var(--text); }
.spf-panneau .spf-curseur::-moz-range-thumb { background: var(--text); }
.spf-panneau .spf-progression { color: var(--text-dim); }
.spf-panneau .spf-avis { background: var(--surface-alt); color: var(--text-muted); font-size: 11.5px; }
.spf-panneau .spf-avis[data-ton="premium"], .spf-panneau .spf-avis[data-ton="attente"] { background: color-mix(in srgb, #F59E0B 15%, transparent); color: var(--text); }
.spf-panneau .spf-avis[data-ton="erreur"] { background: color-mix(in srgb, #EF4444 14%, transparent); color: var(--text); }
.spf-panneau button:focus-visible, .spf-panneau a:focus-visible, .spf-panneau .spf-curseur:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* Ce qui joue, en grand (téléphone, ou lecteur réduit). */
.spf-en-cours { padding: 2px 14px 12px; border-bottom: 1px solid var(--border); }
.spf-en-cours-haut { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; }
.spf-panneau .spf-grand-cadre { width: 64px; height: 64px; border-radius: 9px; background: var(--surface-alt); box-shadow: 0 8px 18px -8px rgba(2, 10, 30, .5); }
.spf-panneau .spf-pochette-vide { color: var(--text-dim); }
.spf-panneau .spf-titre { font-size: 14px; color: var(--text); }
.spf-panneau a.spf-titre[href]:hover { text-decoration: underline; }
.spf-panneau .spf-artiste { font-size: 12px; color: var(--text-muted); }
.spf-en-cours .spf-appareil { align-self: flex-start; max-width: 100%; margin-top: 5px; background: var(--surface-alt); color: var(--text-muted); }
.spf-en-cours .spf-appareil:hover { background: var(--surface-hover); color: var(--text); }
.spf-en-cours .spf-appareil.actif { color: var(--spf-vert-texte); background: color-mix(in srgb, #1ED760 12%, transparent); }
.spf-commandes-grandes { justify-content: center; gap: 12px; margin: 4px 0 2px; }
.spf-commandes-grandes .spf-btn { width: 40px; height: 40px; border-radius: 12px; }
.spf-commandes-grandes .spf-btn-lecture { width: 48px; height: 48px; border-radius: 50%; }
.spf-pied-seul { grid-template-columns: 26px minmax(0, 1fr); max-width: 230px; margin: 4px auto 0; }

/* Les onglets. */
.spf-onglets {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px;
  margin: 8px 12px 6px; padding: 3px; border-radius: 11px;
  background: var(--surface-alt); border: 1px solid var(--border);
}
.spf-onglet {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 0;
  padding: 7px 3px; border: 0; border-radius: 8px; background: none;
  color: var(--text-muted); font-size: 11.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.spf-onglet span { overflow: hidden; text-overflow: ellipsis; }
.spf-onglet .spf-ico { flex-shrink: 0; }
.spf-onglet:hover { color: var(--text); }
.spf-onglet.actif { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(2, 10, 30, .16), inset 0 0 0 1px var(--border); }
.spf-onglet.actif .spf-ico { color: var(--spf-vert-texte); }

/* Les listes. */
.spf-contenu { flex: 1; min-height: 140px; overflow-y: auto; padding: 2px 8px 8px; overscroll-behavior: contain; }
.spf-defile { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 22%, transparent) transparent; }
.spf-liste-tete {
  display: flex; align-items: center; justify-content: space-between; padding: 6px 4px 4px 6px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim);
}
.spf-item {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  width: 100%; padding: 6px; border: 0; border-radius: 10px;
  background: none; color: var(--text); text-align: left; cursor: pointer;
}
.spf-item:hover:not(:disabled) { background: var(--surface-hover); }
.spf-item:disabled { opacity: .5; cursor: default; }
.spf-item.actif { background: color-mix(in srgb, #1ED760 10%, transparent); }
.spf-item.actif b { color: var(--spf-vert-texte); }
.spf-item-ico {
  width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-alt); color: var(--text-muted);
}
.spf-item.actif .spf-item-ico { color: var(--spf-vert-texte); }
.spf-item-textes { min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.spf-item-textes b { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spf-item-textes small { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spf-item-action {
  padding: 4px 9px; border-radius: 999px; border: 1px solid var(--accent-border, var(--border));
  font-size: 11px; font-weight: 600; color: var(--accent); white-space: nowrap;
  opacity: 0; transition: opacity .15s;
}
.spf-item:hover .spf-item-action, .spf-item:focus-visible .spf-item-action { opacity: 1; }
.spf-item-rex .spf-item-action { opacity: 1; border-color: transparent; background: #1ED760; color: #04140A; }
.spf-item-rex .spf-item-ico { color: var(--spf-vert-texte); background: color-mix(in srgb, #1ED760 12%, transparent); }
.spf-item-rex small, .spf-item-inactif small { white-space: normal; }
.spf-item-inactif { cursor: default; opacity: .78; }
.spf-vignette {
  width: 40px; height: 40px; border-radius: 6px; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-alt); color: var(--text-dim);
}
.spf-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spf-vignette-likes { background: linear-gradient(135deg, #450AF5 0%, #8E8EE5 100%); color: #fff; }
.spf-item-jouer {
  width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: #1ED760; color: #04140A; opacity: 0; transform: translateY(2px); transition: opacity .15s, transform .15s;
}
.spf-item:hover .spf-item-jouer, .spf-item:focus-visible .spf-item-jouer { opacity: 1; transform: none; }
.spf-item-duree { font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.spf-vide { margin: 0; padding: 14px 8px; font-size: 12px; line-height: 1.45; color: var(--text-muted); text-align: center; }
.spf-intertitre { margin: 10px 6px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); }
.spf-note { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--text-muted); }
.spf-note-boite { display: flex; gap: 8px; align-items: flex-start; margin: 2px 4px 8px; padding: 9px 10px; border-radius: 10px; background: var(--surface-alt); }
.spf-note-boite .spf-ico { flex-shrink: 0; margin-top: 1px; }

/* L'appareil qui joue : trois barres qui dansent (immobiles si le système demande moins de mouvement). */
.spf-egaliseur { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; margin-right: 6px; }
.spf-egaliseur i { width: 3px; height: 100%; border-radius: 1px; background: var(--spf-vert-texte); transform-origin: bottom; animation: spf-eq 1s ease-in-out infinite; }
.spf-egaliseur i:nth-child(2) { animation-delay: -.4s; }
.spf-egaliseur i:nth-child(3) { animation-delay: -.7s; }
@keyframes spf-eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

/* La recherche. */
.spf-recherche {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; gap: 8px; height: 38px; margin: 4px 2px 6px; padding: 0 10px;
  border-radius: 10px; border: 1px solid var(--border); background: var(--surface-alt); color: var(--text-muted);
}
.spf-recherche:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.spf-recherche input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--text); font-size: 13px; outline: none; }
.spf-recherche input::-webkit-search-cancel-button { cursor: pointer; }

.spf-panneau-pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--border); font-size: 11.5px; }
.spf-panneau-pied a { display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); text-decoration: none; }
.spf-panneau-pied a:hover { color: var(--text); }
.spf-panneau-pied button { border: 0; background: none; padding: 4px 0; color: var(--red, #f87171); font-size: inherit; cursor: pointer; }
.spf-panneau-pied button:hover { text-decoration: underline; }
html[data-theme="clair"] .spf-panneau-pied button { color: #B42318; }

/* Le panneau quand rien n'est relié : le mode d'emploi, ou le bouton de connexion. */
/* flex + min-height 0 : le corps rétrécit et défile au lieu d'être rogné par le panneau. */
.spf-panneau-corps { flex: 1 1 auto; min-height: 0; padding: 0 14px 14px; overflow-y: auto; overscroll-behavior: contain; }
.spf-intro { margin: 0 0 10px; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }
.spf-intro b { color: var(--text); }
.spf-connexion { display: flex; flex-direction: column; gap: 9px; padding: 2px 0 12px; }
.spf-connexion p { margin: 0; font-size: 12.5px; line-height: 1.45; }

/* ── Le mode d'emploi et le Client ID (panneau et Paramètres › Apparence) ─────────────────────────── */
.spf-guide { margin: 0 0 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-alt); }
.spf-guide summary {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; padding: 10px 12px;
  list-style: none; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text);
}
.spf-guide summary::-webkit-details-marker { display: none; }
.spf-guide summary::before { content: '▸'; color: var(--text-dim); transition: transform .15s; }
.spf-guide[open] summary::before { transform: rotate(90deg); }
.spf-guide summary small { font-weight: 400; color: var(--text-muted); }
.spf-etapes { margin: 0; padding: 0 14px 6px 32px; display: flex; flex-direction: column; gap: 9px; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.spf-etapes b { color: var(--text); font-weight: 600; }
.spf-etapes a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.spf-etapes a .spf-ico { vertical-align: -1px; margin-left: 3px; }
.spf-adresses { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.spf-adresses li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 5px 5px 5px 9px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); }
.spf-adresses code { flex: 1; min-width: 0; font-family: var(--t-mono, ui-monospace, Consolas, monospace); font-size: 11.5px; color: var(--text); word-break: break-all; }
.spf-ici { padding: 1px 6px; border-radius: 999px; background: var(--accent-dim); color: var(--accent); font-size: 10px; white-space: nowrap; }
.spf-copier {
  display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--surface-alt); color: var(--text-muted);
  font: inherit; font-size: 11px; cursor: pointer;
}
.spf-copier:hover { color: var(--text); border-color: var(--accent-border, var(--accent)); }
.spf-alerte { display: block; margin-top: 6px; color: var(--gold, #f59e0b); }
.spf-guide .spf-note { padding: 4px 14px 12px; }
.spf-champ-client { display: flex; flex-direction: column; gap: 6px; }
.spf-champ-client label { font-size: 12px; font-weight: 600; color: var(--text); }
.spf-champ-ligne { display: flex; gap: 8px; }
.spf-champ-ligne input {
  flex: 1; min-width: 0; height: 38px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text);
  font-family: var(--t-mono, ui-monospace, Consolas, monospace); font-size: 12.5px;
}
.spf-champ-ligne input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.spf-champ-ligne button {
  height: 38px; padding: 0 14px; border: 0; border-radius: 10px;
  background: var(--accent); color: var(--on-accent); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.spf-champ-aide { font-size: 11px; color: var(--text-dim); }

/* Paramètres › Apparence. */
.spf-reglage .dbx-carte-tete h2 { display: inline-flex; align-items: center; gap: 8px; }
.spf-reglage .dbx-carte-tete h2 .spf-ico { color: #1ED760; }
.spf-statut {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 12px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface-alt); font-size: 12.5px; color: var(--text);
}
.spf-statut > span:nth-child(2) { flex: 1; min-width: 200px; }
.spf-pastille { width: 9px; height: 9px; flex-shrink: 0; border-radius: 50%; background: var(--text-dim); }
.spf-pastille-on { background: #1ED760; box-shadow: 0 0 0 3px rgba(30, 215, 96, .22); }
.spf-bouton-discret { padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
.spf-bouton-discret:hover { border-color: var(--accent-border, var(--accent)); }
.spf-sans-premium { color: var(--gold, #f59e0b); font-weight: 600; }

/* ── Téléphone : le lecteur reste mini dans le tiroir, le panneau devient une feuille du bas ────── */
@media (max-width: 768px) {
  .spf-lecteur { margin: 6px 0; }
  .spf-deplier { display: none; }
  .spf-mini-ouvrir { min-height: 40px; }
  .spf-mini .spf-btn-lecture { width: 38px; height: 38px; }
  .spf-calque { pointer-events: auto; }
  .spf-voile { display: block; position: absolute; inset: 0; background: rgba(3, 8, 20, .55); animation: spf-fondu .2s ease both; }
  .spf-panneau {
    left: 0 !important; right: 0; bottom: 0 !important;
    width: 100%; max-width: none; max-height: 88vh; max-height: 88dvh;
    border-bottom: 0; border-radius: 20px 20px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    animation: spf-montee .24s cubic-bezier(.16, 1, .3, 1) both;
  }
  .spf-panneau-plein, .spf-panneau-mini { height: auto; }
  .spf-contenu { min-height: 200px; }
  .spf-poignee { display: block; flex-shrink: 0; width: 40px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: var(--border); }
  .spf-commandes-grandes { gap: 14px; }
  .spf-commandes-grandes .spf-btn { width: 44px; height: 44px; }
  .spf-commandes-grandes .spf-btn-lecture { width: 54px; height: 54px; }
  .spf-item { padding: 8px 6px; }
  .spf-item-action, .spf-item-jouer { opacity: 1; transform: none; }
  .spf-recherche { height: 44px; }
  .spf-recherche input, .spf-champ-ligne input { font-size: 16px; }   /* pas de zoom de Safari au focus */
  body.spf-panneau-ouvert { overflow: hidden; }
}
@keyframes spf-montee { from { transform: translateY(100%); } to { transform: none; } }
@keyframes spf-fondu { from { opacity: 0; } to { opacity: 1; } }
@media (hover: none) { .spf-item-action, .spf-item-jouer { opacity: 1; transform: none; } }

/* ── Moins de mouvement ──────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .spf-panneau, .spf-voile { animation: none !important; }
  .spf-btn, .spf-bouton-vert, .spf-item-jouer, .spf-item-action, .spf-guide summary::before { transition: none !important; }
  .spf-curseur::-webkit-slider-thumb { transition: none !important; }
  .spf-btn-lecture:hover:not(:disabled), .spf-bouton-vert:hover { transform: none; }
  .spf-egaliseur i { animation: none; transform: scaleY(.7); }
}

/* ── Ce qui n'a pas de lecteur ───────────────────────────────────────────────────────────────────── */
body.mode-espace-client .spf-lecteur, body.mode-espace-client .spf-calque,
body.rex-sans-spotify .spf-lecteur, body.rex-sans-spotify .spf-calque { display: none !important; }
@media print { .spf-lecteur, .spf-calque { display: none !important; } }