/* ==================== Les composants communs (mission « application musicale premium ») ====================
   Une seule couche pour les pièces que toute l'appli partage : icônes, boutons, états, barre du bas, mini-lecteur,
   mouvement. Elle s'appuie sur les jetons de 23-systeme.css (palette --k-*, sens --c-*, durées --d-*, --tap).
   Elle ne change que l'apparence : aucune fonction, aucun contenu, aucune donnée n'en dépend. */

/* ---------- les icônes (js/icones.js) ---------- */
.ico{width:1.25em; height:1.25em; flex:none; vertical-align:-.25em; display:inline-block; overflow:visible}
/* les boutons sont en flex avec un écart (gap) : l'icône n'a pas besoin de marge */
.pm-ic > .ico{width:20px; height:20px; margin:0}
.bx-ib > .ico, .fz-a > .ico, .cf-x > .ico{width:20px; height:20px}
.bx-mini-b > .ico{width:16px; height:16px}

/* ---------- les boutons : un seul système, des rôles ----------
   principal (orange plein) : .play, .se-go, .sx-big, #sh-play — l'action la plus importante de l'écran, une seule ;
   secondaire / contour : .btn (fond transparent, filet) ; sélection : .chip, .tog, .seg, .subnav (orange doux + filet orange) ;
   validation : .chip.ok ; rond / icône : .sh-ic, .bx-ib, .tl-ic, .cf-x ; navigation : .sp-tab ; lecture : .bx-play, #play.
   L'enfoncement au toucher est déjà commun (scale .965, couche 23). Ici : la sélection, le focus, le désactivé,
   le chargement et la taille de doigt, pour tous. */
:root{--sel-bg:var(--c-accent-soft, rgba(240,138,60,.16)); --sel-fg:var(--acc); --sel-edge:inset 0 0 0 1px var(--acc)}
/* validation : vert doux, comme la sélection mais « c'est bon » */
:is(.chip,.btn).ok{background:color-mix(in srgb, var(--c-success, #7FC495) 16%, transparent); color:var(--c-success, #7FC495); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c-success, #7FC495) 55%, transparent)}
/* le focus clavier : un anneau orange, partout le même */
:is(button,.btn,.chip,a,[role="button"],input,select,summary):focus-visible{outline:2px solid var(--acc); outline-offset:2px}
/* désactivé : visible mais éteint, sans enfoncement */
:is(button,.btn,.chip):disabled{opacity:.45; cursor:default; transform:none !important}
/* en cours (aria-busy) : une petite roue à la place du curseur, le texte reste */
:is(button,.btn,.chip,.play)[aria-busy="true"]{position:relative; pointer-events:none}
:is(button,.btn,.chip,.play)[aria-busy="true"]::after{content:''; width:14px; height:14px; margin-left:8px; display:inline-block; vertical-align:-2px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:k-spin .7s linear infinite}
@keyframes k-spin{to{transform:rotate(360deg)}}
/* la taille de doigt : les petits boutons ronds du haut et des listes passent à 44 px (zone de toucher), le dessin reste */
:is(.sh-ic,.cf-x){min-width:var(--tap); min-height:var(--tap)}

/* ---------- les chiffres : alignés partout (tempo, minutes, compteurs), sans police « ordinateur » ---------- */
[data-tone="studio"] :is(.fo-clock,.pm-week-n b,.pm-min,.pm-val,.pm-n,.m-bpm b,.m-top button,.cn-stat b,.cr-n,.pr-meter,#im-bpm,.im-met output,.bx-bpm,.bx-tempo){font-variant-numeric:tabular-nums}

/* ---------- les titres : jamais coupés, lignes équilibrées (iPhone 390 px compris) ---------- */
:is(h1,h2,h3,.sp-q,.pm-large,.pm-hero-t,.fo-t,.se-title,.cf-t,.tl-title,.bx-title){overflow-wrap:break-word; text-wrap:balance}
:is(p,li,.sp-tx span){text-wrap:pretty}

/* ---------- le mouvement : un seul réglage « réduire les animations » pour toute l'appli ----------
   Les transitions courtes restent (elles montrent ce qui change), les mouvements, rebonds et cascades s'arrêtent. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; animation-delay:0s !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  :is(button,.btn,.chip,.sp-row,.cn-tile):active{transform:none !important}
}