/* chanson.css — l'onglet Chanson dans sa vue de TRAVAIL : recherche, en-tête,
 * partition qui défile, transport, pastilles d'accords, syllabes.
 * Le plein écran de scène est dans karaoke.css.
 */
 /* ── Onglet Chanson : recherche en haut, paroles qui défilent en dessous ─ */
 #vue_chanson{flex:1;display:flex;flex-direction:column;gap:.6rem;
              padding:.7rem;min-height:0}
 #vue_chanson[hidden]{display:none}
 /* Le bouton d'accueil porte son mot depuis qu'il est explicite : à trois
    éléments sur une rangée de téléphone, c'est le champ de recherche qui passe
    à la ligne plutôt que de se réduire à deux centimètres. */
 .ch_barre{flex:0 0 auto;display:flex;gap:.4rem;flex-wrap:wrap}
 /* La rangée du haut de l'étape MORCEAU : sortir du couloir, ou revenir à son
    premier temps. Deux actions de navigation, et rien d'autre — ce qui concerne
    le morceau lui-même est en dessous. */
 .ch_barre_morceau{flex:0 0 auto;display:flex;gap:.5rem;align-items:center;
     flex-wrap:wrap}
 /* Une vraie cible, pas un lien de bas de page. C'est l'action la plus prise de
    cet écran après la lecture — on ouvre un morceau, on s'aperçoit que ce n'est
    pas la bonne transcription, on en cherche un autre. */
 .changer{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;
     padding:.5rem .9rem;font-size:.95rem;line-height:1;white-space:nowrap}
 .changer .ic{font-size:1rem;line-height:1;opacity:.8}
 /* Au milieu de la rangée : les marges automatiques le centrent entre la
    sortie à gauche et la recherche à droite. */
 #ch_reglages{margin:0 auto}
 #ch_repertoire,#ch_morceau{flex:1;min-height:0;display:flex;
     flex-direction:column;gap:.6rem}
 #ch_repertoire[hidden],#ch_morceau[hidden]{display:none}
 .ch_barre input{flex:1 1 12rem;min-width:0;padding:.75rem;font-size:1rem;user-select:text}
 .ch_barre button{padding:.75rem 1.1rem;font-weight:600;white-space:nowrap}
 #ch_msg{flex:0 0 auto;color:#9aa0a6;font-size:.85rem;min-height:1.2em}
 #ch_msg.err{color:#f28b82}
 #ch_resultats{flex:0 1 auto;overflow-y:auto;display:flex;flex-direction:column;gap:.35rem}
 #ch_resultats[hidden]{display:none}
 #ch_resultats button{text-align:left;padding:.75rem .9rem;min-height:56px}
 #ch_resultats small{display:block;opacity:.7;font-size:.8rem;margin-top:.1rem}
 /* Le sélecteur de sources, et les intertitres qui séparent leurs blocs. Les
    résultats ne sont jamais entrelacés : chaque source garde son propre
    classement, et l'intertitre dit duquel on lit la suite. */
 #ch_sources{flex:0 0 auto;display:flex;gap:.35rem;flex-wrap:wrap}
 #ch_sources[hidden]{display:none}
 #ch_sources button{padding:.4rem .7rem;font-size:.8rem;opacity:.55}
 #ch_sources button.on{opacity:1}
 #ch_resultats .ch_source{font-size:.75rem;letter-spacing:.04em;
     text-transform:uppercase;color:#9aa0a6;margin:.5rem 0 -.1rem}
 #ch_resultats .ch_source:first-child{margin-top:0}
 #ch_resultats .ch_source_err{font-size:.8rem;color:#f28b82;padding:0 .2rem}
 #ch_resultats .ch_source_vide{font-size:.8rem;color:#9aa0a6;padding:0 .2rem}
 #ch_entete{flex:0 0 auto}
 #ch_entete .titre{font-size:1.1rem;font-weight:700}
 #ch_entete .infos{font-size:.8rem;color:#9aa0a6;margin-top:.15rem}
 .ch_titre_ligne{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem}
 .ch_outils{display:flex;gap:.3rem;flex:0 0 auto}
 .ch_outils button{padding:.45rem .55rem;font-size:.85rem;min-width:2.6rem;opacity:.7}
 .ch_outils button.on{opacity:1}
 /* Il porte son mot : c'est la SEULE action d'un morceau sans tempo, elle ne
    peut pas se cacher derrière un pictogramme au milieu de deux réglages. */
 #ch_plein{opacity:1;font-weight:600;white-space:nowrap}
 .ch_outils small{font-size:.72em;opacity:.75;margin-left:.1em}
 /* ── Le bandeau manche ────────────────────────────────────────────────
    Cinq colonnes, comme les cinq frettes de l'écran de jeu : la position d'une
    couleur y est la même des deux côtés, et c'est la moitié du lien qu'on
    cherche à faire. Les paires débordent sur une deuxième rangée, exactement
    comme elles le font là-bas. */
 #ch_legende{display:grid;grid-template-columns:repeat(5,1fr);gap:.3rem;
     margin:.5rem 0 .35rem;flex:0 0 auto}
 .mc{border-radius:8px;color:#14161a;padding:.3rem .2rem;text-align:center;
     min-width:0;overflow:hidden}
 .mc b{display:block;font-size:1rem;font-weight:800;line-height:1.1;
     white-space:nowrap}
 .mc i{display:block;font-style:normal;font-size:.7rem;font-weight:600;
     opacity:.7;line-height:1.2}
 /* Les paires sont plus basses : ce sont les accords de passage, elles ne
    doivent pas voler le regard aux cinq principaux. */
 .mc.duo{padding:.18rem .2rem}
 .mc.duo b{font-size:.82rem}
 .mc.duo i{display:none}
 #ch_partition{flex:1;overflow-y:auto;min-height:0;line-height:2.2;
               padding-bottom:2rem;font-size:1rem}
 #ch_partition.t2{font-size:1.25rem}
 #ch_partition.t3{font-size:1.55rem}
 /* Le quatrième cran vise l'écran posé à un bras : au-delà, une ligne de
    paroles ne tient plus sur la largeur d'un téléphone et se replie en deux,
    ce qui coûte plus de lisibilité que la taille n'en gagne. */
 #ch_partition.t4{font-size:1.95rem}
 /* Centré : les espaces de tête de la partition d'origine décaleraient le
    texte, on les neutralise — leur seul rôle est l'alignement à gauche. */
 #ch_partition.centre{text-align:center}
 #ch_partition.centre .pl{white-space:pre-line}
 .pl{white-space:pre-wrap}
 .pl.instr{opacity:.75;font-style:italic}
 .pl.refrain{border-left:3px solid #3c4043;padding-left:.6rem}
 .pvide{height:.8rem}
 .ac{display:inline-block;padding:0 .4rem;margin:0 .15rem;border-radius:5px;
     font-weight:700;font-size:.82em;color:#14161a;background:#5f6368;
     line-height:1.6;vertical-align:.08em}
 .ac.hors{background:#2d3039;color:#9aa0a6;font-weight:600}
 .ac.approche{background:transparent;border:2px solid;padding:0 .3rem}
 .ac.duo{border-radius:0}

 /* Le transport : lecture, tempo, niveau de palette. */
 .ch_transport{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap;
               margin-top:.5rem}
 /* ⚠️ INDISPENSABLE, et longtemps absent. `transport.maj()` pose l'attribut
    `hidden` sur ce bloc quand le morceau n'a pas de tempo — mais la règle
    ci-dessus, plus spécifique que le `display:none` du navigateur, le montrait
    quand même. Résultat : sur une chanson venue du web, ▶ ⏹ et les boutons de
    tempo restaient à l'écran alors que `basculer()` refuse de partir sans
    grille de temps. Des boutons sans effet, c'est-à-dire la pire des pannes —
    celle qui fait douter de son geste plutôt que du produit. */
 .ch_transport[hidden]{display:none}
 .ch_transport button{padding:.45rem .6rem;font-size:.9rem;min-width:2.4rem}
 .ch_transport .tempo,.ch_transport .niveaux{display:flex;gap:.2rem;align-items:center}
 .ch_transport .tempo b{min-width:4.6rem;text-align:center;color:#8ab4f8;
                        font-variant-numeric:tabular-nums;font-size:.85rem}
 /* Le compte remplace le métronome : sans son, c'est le seul repère de
    l'endroit où l'on est. Largeur fixe, sinon il tressaute à chaque temps. */
 .ch_transport .compte{min-width:4rem;text-align:center;color:#9aa0a6;
                       font-variant-numeric:tabular-nums;font-size:.85rem}
 .ch_transport .compte.bat{color:#8ab4f8}

 /* Les pistes de l'accompagnement : les préréglages, puis une pastille par
    piste. Une piste coupée reste à sa place, estompée et barrée : on doit
    pouvoir la retrouver pour la rétablir. */
 .ch_pistes{display:flex;flex-direction:column;gap:.4rem;margin-top:.5rem}
 .ch_pistes[hidden]{display:none}
 .ch_pistes .prereglages,.ch_pistes .liste{display:flex;flex-wrap:wrap;gap:.3rem}
 .ch_pistes button{padding:.35rem .6rem;font-size:.85rem}
 .ch_pistes .piste i{font-style:normal;color:#9aa0a6;margin-left:.4rem;font-size:.75rem}
 .ch_pistes .piste.coupee{opacity:.45;text-decoration:line-through}

 /* La palette : combien de couleurs le manche porte pour ce morceau. Sa propre
    rangée depuis qu'elle a quitté le transport — elle survit ainsi aux morceaux
    sans tempo, qui n'ont pas de transport et ont bien une palette. */
 .ch_palette{display:flex;gap:.3rem;align-items:center;flex-wrap:wrap;
             margin-top:.5rem}
 .ch_palette[hidden]{display:none}
 .ch_palette .label{font-size:.72rem;text-transform:uppercase;
     letter-spacing:.04em;color:#9aa0a6;margin-right:.2rem}
 .ch_palette .niveaux{display:flex;gap:.2rem;align-items:center}
 .ch_palette button{padding:.45rem .6rem;font-size:.9rem;min-width:2.4rem;
     opacity:.6}
 .ch_palette button.on{opacity:1}
 #ch_boucle{padding:.75rem 1.1rem;font-weight:600;opacity:.5}
 #ch_boucle.on{opacity:1;color:#8ab4f8}
 #ch_resultats .meta{display:block;opacity:.55;font-size:.72rem;margin-top:.15rem}

 /* Les syllabes. Trois états, et rien de plus : à venir, en train d'être
    chantée, déjà passée. Le fond de la syllabe courante bouge d'une syllabe à
    l'autre — une ligne entière surlignée ne dirait pas OÙ l'on en est. */
 .syl{border-radius:3px}
 .syl.passe{opacity:.45}
 .syl.on{background:#8ab4f8;color:#14161a;font-weight:600}
 .pl.courante{background:#212429;border-radius:6px}
 /* La partition défile toute seule pendant la lecture : on coupe le
    défilement tactile inertiel, qui se battrait avec elle. */
 #ch_partition.joue{scroll-behavior:auto}