/* karaoke.css — le mode de scène : l'écran ne montre plus que ce qui se chante. * Ne s'applique QUE sous body.karaoke, et surcharge chanson.css : il doit donc * être chargé après lui. */ /* ── Le mode karaoké : l'écran ne montre plus que ce qui se chante ───── Déclenché par Lecture, quitté par n'importe quelle touche sur le texte. La partition passe en surimpression plein écran — position:fixed plutôt que l'API plein écran seule, qui n'existe pas pour un
sur iPhone : ici l'effet est le même partout, et le plein écran n'est qu'un bonus. Tout le reste de l'interface disparaît, retour à l'accueil compris : la main est sur la guitare, personne ne va changer d'écran en chantant. */ body.karaoke .accueil, body.karaoke #manette, body.karaoke .ch_barre, body.karaoke .ch_barre_morceau, body.karaoke #ch_msg, body.karaoke #ch_legende, body.karaoke #ch_entete{display:none} body.karaoke #ch_partition{ position:fixed;inset:0;z-index:40;background:#0f1013; overflow:hidden; /* on pilote scrollTop, pas le doigt */ text-align:center;line-height:1.6; /* Le rembourrage vaut la moitié de l'écran : sans lui, la première et la dernière ligne ne pourraient jamais venir se placer au centre. */ padding:46vh 3vw; font-size:clamp(1.5rem,6.4vw,3.6rem)} /* Une ligne du fichier = une ligne à l'écran, toujours : c'est ce que `nowrap` garantit, et c'est ce qui rend la fenêtre de cinq lignes fiable. Les lignes trop longues sont rétrécies une à une par ajusterLignes(). */ /* Le rembourrage du haut est la bande où logent les accords : ils sont sortis du flux (voir plus bas), il leur faut leur propre étage. Il vaut pour TOUTES les lignes, y compris celles sans accord — un interligne qui changerait d'une ligne à l'autre ferait sauter le texte au défilement. */ body.karaoke #ch_partition .pl{white-space:nowrap;padding:.8em 0 .12em; opacity:0;transition:opacity .3s ease} /* Deux lignes au-dessus, deux au-dessous : la distance à la ligne courante est écrite dans data-d, et c'est elle qui décide de la présence. */ body.karaoke #ch_partition .pl[data-d="0"]{opacity:1} body.karaoke #ch_partition .pl[data-d="1"]{opacity:.5} body.karaoke #ch_partition .pl[data-d="2"]{opacity:.2} body.karaoke #ch_partition .pl.courante{background:none} body.karaoke #ch_partition .pvide{height:0} body.karaoke #ch_partition .pl.instr{display:none} /* Les accords passent AU-DESSUS de la syllabe qu'ils portent, au lieu de s'intercaler entre deux mots. Dans le flux, « Sim7 His-sez haut Mim San-ti » se lit comme une phrase où l'accord est un mot de plus : l'œil trébuche, et un mot à cheval sur un changement d'accord se retrouve coupé en deux. Sur son propre étage, le nom de l'accord ne se lit plus avec les paroles, et il reste à la verticale exacte de la syllabe où il tombe — c'est la disposition des carnets de chansons. C'est l'enveloppe `.anc`, posée par partition.js autour du couple accord+syllabe, qui sert de repère horizontal. En vue de travail elle ne fait rien : les accords y restent dans le flux, où ils sont utiles. Second effet : les accords ne consomment plus de largeur, donc les lignes sont plus courtes et ajusterLignes() a moins souvent à les rétrécir. */ /* `inline-block` et non `inline` : une largeur minimale ne s'applique pas à un élément en ligne, et c'est par elle que `ecarterAccords()` empêche deux pastilles voisines de se superposer. La ligne de base reste celle de la syllabe — l'accord étant hors du flux, l'ancre n'a qu'elle dedans. */ body.karaoke #ch_partition .anc{position:relative;display:inline-block} /* Plus petit et moins gras que dans la vue de travail : l'accord n'a plus à se défendre contre le texte, c'est sa POSITION qui le distingue désormais. À poids égal il tirerait l'œil hors des paroles. */ body.karaoke #ch_partition .ac{ position:absolute;left:0;bottom:100%;white-space:nowrap; font-size:.58em;font-weight:600;line-height:1.5;margin:0; opacity:0;transition:opacity .25s} /* On ne les MONTRE que sur la ligne en cours et la suivante, le temps d'anticiper le changement. C'est la ligne CENTRÉE (data-d="0") qui vaut « en cours », et non la classe `courante` : pendant le décompte aucune syllabe ne sonne encore, donc personne ne porte `courante`, et la première ligne — celle qu'on est justement en train de lire — perdrait ses accords. */ body.karaoke #ch_partition .pl[data-d="0"] .ac, body.karaoke #ch_partition .pl.suivante .ac{opacity:1} /* ── Le plein écran LIBRE : un morceau sans tempo ───────────────────────── Une source du web rend du texte et des accords, sans le moindre instant. Il n'y a donc pas de ligne « courante », pas de fenêtre de cinq lignes, pas de syllabe qui s'allume — tout ce que le mode de scène ordinaire met en œuvre repose sur une horloge qui n'existe pas ici. Ce qui reste est pourtant l'essentiel, et c'est ce que ce bloc rétablit : les paroles en grand, et le doigt qui fait défiler. Trois renversements : tout le texte est visible (aucune ligne n'est « loin » de rien), le défilement revient au doigt au lieu du scrollTop piloté, et les lignes longues se replient au lieu d'être rétrécies — sans fenêtre à tenir, une ligne sur deux lignes ne casse plus rien. */ body.karaoke.libre #ch_partition{ overflow-y:auto;-webkit-overflow-scrolling:touch; padding:1.4rem 3vw 40vh; font-size:clamp(1.3rem,5.2vw,2.8rem)} body.karaoke.libre #ch_partition .pl{white-space:pre-wrap;opacity:1} /* Les accords restent au-dessus de leur syllabe, et TOUS visibles : on ne sait pas où en est le chanteur, on ne peut donc en éclairer aucun. */ body.karaoke.libre #ch_partition .ac{opacity:.85} /* Un appui dans les paroles fait défiler : il ne peut pas valoir sortie. Le ✕ du bandeau flottant prend le relais, et lui seul s'affiche — le ⏹ et le compte de mesures n'ont rien à dire d'un morceau sans mesures. */ #ch_hud_quitter{display:none} body.karaoke.libre #ch_hud_compte, body.karaoke.libre #ch_hud_clic, body.karaoke.libre #ch_hud_moins, body.karaoke.libre #ch_hud_bpm, body.karaoke.libre #ch_hud_plus, body.karaoke.libre #ch_hud_stop{display:none} body.karaoke.libre #ch_hud_quitter{display:block} /* Il ne s'efface pas, lui : c'est la seule sortie visible. */ body.karaoke.libre #ch_hud{opacity:1} /* Le guidage. Trois choses se superposent : ce qui est déjà chanté est COLORÉ (et non estompé comme dans la vue de travail — c'est la convention du karaoké, on lit le blanc, on a chanté le bleu), la syllabe en cours se remplit de gauche à droite au prorata du temps qui reste avant la suivante, et elle fait un petit bond quand elle s'allume. Le remplissage est ce qui dit où l'on en est ENTRE deux syllabes ; le surlignage seul saute d'un bloc à l'autre et laisse un trou. */ body.karaoke #ch_partition .syl{display:inline-block} body.karaoke #ch_partition .syl.passe{opacity:1;color:#8ab4f8} body.karaoke #ch_partition .syl.on{ background:linear-gradient(90deg,#8ab4f8 var(--p,0%),#e8eaed var(--p,0%)); -webkit-background-clip:text;background-clip:text;color:transparent; font-weight:700;animation:sylpop .18s ease-out} @keyframes sylpop{0%{transform:scale(1)}40%{transform:scale(1.09)}100%{transform:scale(1)}} /* Le décompte de la levée : un chiffre qui occupe l'écran par-dessus les paroles. On garde les paroles lisibles derrière — entrer à l'aveugle n'aide personne, on veut avoir lu la première ligne avant de chanter. */ #ch_decompte{position:fixed;inset:0;z-index:41;display:none; align-items:center;justify-content:center;pointer-events:none; font-size:min(44vh,44vw);font-weight:800;color:#8ab4f8;opacity:.28; font-variant-numeric:tabular-nums} body.karaoke #ch_decompte.vu{display:flex} #ch_decompte b{animation:bat .25s ease-out} @keyframes bat{0%{transform:scale(1.25);opacity:.55}100%{transform:scale(1);opacity:1}} /* Les passages sans paroles — l'intro, les ponts instrumentaux. En HAUT de l'écran, au-dessus de la ligne qui attend (centrée à 44 %) : on doit lire les deux à la fois, combien de mesures et ce qu'on va chanter. Le fond dégradé efface les lignes déjà chantées qui passeraient derrière. Les tailles suivent la plus petite dimension de l'écran : un téléphone couché n'a que la moitié de sa hauteur au-dessus de la ligne. */ #ch_attente{position:fixed;top:0;left:0;right:0;z-index:41;display:none; pointer-events:none;text-align:center;padding:5vh 4vw 3vh; background:linear-gradient(#0f1013 75%,#0f101300)} body.karaoke #ch_attente.vu{display:block} body.karaoke.attente #ch_partition .pl.avant{opacity:0} #ch_attente .quoi{text-transform:uppercase;letter-spacing:.2em;color:#9aa0a6; font-size:min(3.2vw,3.2vh,1.1rem);font-weight:600} #ch_attente .cases{display:flex;gap:.3rem;justify-content:center; max-width:min(92vw,40rem);margin:1.2vh auto} #ch_attente .cases i{flex:1 1 0;max-width:2.2rem;height:min(1.6vh,.7rem); border-radius:3px;background:#2d3039} #ch_attente .cases i.fait{background:#8ab4f8;opacity:.45} #ch_attente .cases i.ici{background:#8ab4f8} #ch_attente .dans{color:#e8eaed;font-size:min(4.6vw,4.6vh,1.8rem)} #ch_attente .dans b{color:#8ab4f8;font-variant-numeric:tabular-nums} #ch_attente .accords{margin-top:1.6vh;font-size:min(8vw,8vh,3.6rem); display:flex;gap:.3em;justify-content:center;align-items:center} #ch_attente .accords .ac{font-size:1em;padding:0 .35em;border-radius:.2em} #ch_attente .accords .puis{font-size:.5em;color:#5f6368} #ch_attente .accords .puis + .ac{font-size:.55em;opacity:.8} /* Le bandeau flottant : le compte de mesures et l'arrêt franc. Il s'efface au bout de trois secondes et revient au moindre contact — sinon il reste dans l'œil pendant toute la chanson. Un appui AILLEURS met en pause. */ #ch_hud{position:fixed;top:.5rem;right:.5rem;z-index:42;display:none; gap:.4rem;align-items:center;opacity:0;transition:opacity .4s} body.karaoke #ch_hud{display:flex} #ch_hud.vu{opacity:1} #ch_hud .compte{color:#9aa0a6;font-variant-numeric:tabular-nums;font-size:.85rem; background:#14161acc;padding:.35rem .5rem;border-radius:8px} #ch_hud button{padding:.45rem .6rem;min-width:2.4rem;background:#14161acc} #ch_hud button.on{background:#8ab4f8cc}