/* =====================================================================
   Jukebox — lecteur de musique en fenêtre popup (assets/jukebox.js)
   Utilisé par chorees_gestion.php et par l'application mobile.
   Aucune dépendance : ni police ni image, tout est dessiné en CSS.
   Préfixe jb- pour ne rien heurter dans style.css.
   ===================================================================== */

/* ---------- Bouton « écouter » (rond, orange) posé dans les listes ---------- */
.jb-play {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; margin: 0 8px 0 0;
    border: 0; border-radius: 50%; cursor: pointer; vertical-align: middle;
    background: #f97316; box-shadow: 0 2px 6px rgba(249,115,22,.45);
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s, background .12s;
}
.jb-play::before {              /* triangle « lecture », en bordures */
    content: ''; margin-left: 3px;
    border-left: 10px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.jb-play:hover { background: #ea580c; transform: scale(1.08); }
.jb-play:focus-visible { outline: 3px solid #6d28d9; outline-offset: 2px; }

/* ---------- Fenêtre ---------- */
.jb-fond {
    position: fixed; inset: 0; z-index: 3000;
    display: flex; align-items: center; justify-content: center;
    padding: 12px; background: rgba(14, 4, 28, .78);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    animation: jb-fondu .18s ease-out;
}
.jb-fond[hidden] { display: none !important; }
@keyframes jb-fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes jb-monte { from { transform: translateY(24px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Le meuble ---------- */
.jb {
    --jb-or: #f5c542; --jb-or-fonce: #a9791c; --jb-ambre: #ffb000;
    position: relative; box-sizing: border-box;
    width: min(390px, 100%); max-height: calc(100vh - 24px);
    /* 16/10/2026 : la fenêtre ne défile plus (la roulette décalait tout l'intérieur sous l'arche) ;
       seule la liste des titres défile, et c'est elle qui rétrécit sur un petit écran. */
    overflow: hidden; display: flex; flex-direction: column;
    padding: 52px 22px 20px;   /* 16/10/2026 : disque dans l'arche, au-dessus de la ligne basse du néon */
    color: #fdf3e7; font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: linear-gradient(180deg, #55127c 0%, #300a4d 45%, #1b062e 100%);
    border-radius: 195px 195px 26px 26px / 150px 150px 26px 26px;
    box-shadow:
        0 0 0 4px var(--jb-or), 0 0 0 8px var(--jb-or-fonce), 0 0 0 10px #f9e08a,
        0 0 46px 6px rgba(249,115,22,.45), 0 24px 60px rgba(0,0,0,.55),
        inset 0 0 40px rgba(0,0,0,.55);
    animation: jb-monte .24s ease-out;
    scrollbar-width: none;
}
.jb::-webkit-scrollbar { display: none; }

/* Arche néon : deux tubes concentriques qui « respirent » */
.jb::before, .jb::after {
    content: ''; position: absolute; pointer-events: none;
    border-radius: 170px 170px 0 0 / 130px 130px 0 0; border-bottom: 0;
}
.jb::before {
    inset: 14px 14px auto 14px; height: var(--jb-arche, 246px);   /* 16/10/2026 : 130 → l'arche descend jusqu'au titre */
    border: 4px solid #ff5fa2; border-bottom: 0;
    box-shadow: 0 0 10px #ff5fa2, 0 0 22px rgba(255,95,162,.6), inset 0 0 10px rgba(255,95,162,.55);
    animation: jb-neon 3.2s ease-in-out infinite alternate;
}
.jb::after {
    inset: 28px 28px auto 28px; height: calc(var(--jb-arche, 246px) - 18px);
    border: 3px solid #ffb000; border-bottom: 0;
    box-shadow: 0 0 8px #ffb000, 0 0 18px rgba(255,176,0,.55), inset 0 0 8px rgba(255,176,0,.5);
    animation: jb-neon 3.2s ease-in-out infinite alternate-reverse;
}
@keyframes jb-neon { from { opacity: .55; } to { opacity: 1; } }

.jb > * { position: relative; z-index: 1; }

/* Enseigne */
.jb-enseigne {
    position: absolute !important; top: 50%; margin-top: -.5em; left: 0; right: 0; z-index: 3 !important; pointer-events: none; text-align: center;
    font: 900 1.15rem/1 "Arial Black", Impact, "Segoe UI", sans-serif; letter-spacing: .22em;
    text-transform: uppercase; padding-left: .22em;
    background: linear-gradient(180deg, #fff3b0 0%, #f5c542 45%, #b8811d 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.9)) drop-shadow(0 0 6px rgba(0,0,0,.8));
    /* Par-dessus le disque, avec un lent zoom aller-retour sur 10 s (16/10/2026). */
    transform-origin: 50% 50%; animation: jb-zoom-enseigne 10s ease-in-out infinite;
}
@keyframes jb-zoom-enseigne { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }

/* Fermer */
.jb-fermer {
    position: absolute !important; top: 12px; right: 14px; z-index: 5 !important;
    width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
    border: 2px solid var(--jb-or); background: linear-gradient(180deg, #4b1a6b, #21083a);
    color: var(--jb-or); font: 700 22px/1 system-ui, sans-serif; padding: 0;
}
.jb-fermer:hover { background: #f97316; color: #fff; }

/* Écran LED */
.jb-ecran {
    background: #100800; border: 3px solid var(--jb-or-fonce); border-radius: 12px;
    padding: 10px 14px; margin-top: 4px;
    box-shadow: inset 0 0 18px rgba(0,0,0,.9), 0 0 0 2px #000;
    font-family: "Courier New", ui-monospace, Menlo, monospace; color: var(--jb-ambre);
    text-shadow: 0 0 7px rgba(255,176,0,.75);
}
.jb-titre-piste { overflow: hidden; white-space: nowrap; font-size: 1.12rem; font-weight: 700; letter-spacing: .04em; }
.jb-titre-piste > span { display: inline-block; padding-right: 3em; }
.jb-titre-piste.jb-defile > span { animation: jb-defile var(--jb-duree, 10s) linear infinite; }
@keyframes jb-defile { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.jb-sous-piste { font-size: .82rem; opacity: .8; margin-top: 3px; min-height: 1.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jb-ecran.jb-erreur { color: #ff6b6b; text-shadow: 0 0 7px rgba(255,80,80,.7); }
/* Message d'erreur : la cause doit se lire en entier, sur plusieurs lignes si besoin. */
.jb-ecran.jb-erreur .jb-sous-piste { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; font-size: .78rem; opacity: 1; }

/* Disque vinyle */
.jb-platine { position: relative; flex: 0 0 auto; width: 78px; height: 78px; margin: 0 auto; }   /* 16/10/2026 : 104 → 78 px (– 1/4) */
.jb-disque {
    position: absolute; inset: 0; border-radius: 50%;
    background:
        conic-gradient(from 20deg, rgba(255,255,255,0) 0deg, rgba(255,255,255,.16) 40deg, rgba(255,255,255,0) 90deg,
                       rgba(255,255,255,0) 180deg, rgba(255,255,255,.16) 220deg, rgba(255,255,255,0) 270deg),
        repeating-radial-gradient(circle at center, #0c0c0c 0 2px, #1d1d1d 2px 4px);
    box-shadow: 0 6px 18px rgba(0,0,0,.6), 0 0 0 3px #2a2a2a;
}
.jb-disque::before {           /* étiquette centrale */
    content: ''; position: absolute; inset: 34%; border-radius: 50%;
    background: radial-gradient(circle at center, #1b062e 0 7%, transparent 8%),
                linear-gradient(135deg, #f97316, #ff5fa2);
    box-shadow: 0 0 0 3px rgba(0,0,0,.35);
}
.jb.jb-lecture .jb-disque { animation: jb-tourne 3.4s linear infinite; }
@keyframes jb-tourne { to { transform: rotate(360deg); } }

/* Bras de lecture */
.jb-bras {
    position: absolute; top: -4px; right: -14px; width: 5px; height: 56px;
    background: linear-gradient(90deg, #d9d9d9, #8a8a8a); border-radius: 4px;
    transform-origin: 50% 6px; transform: rotate(-28deg); transition: transform .5s ease;
    box-shadow: 1px 2px 4px rgba(0,0,0,.5);
}
.jb-bras::after { content: ''; position: absolute; bottom: -5px; left: -3px; width: 11px; height: 11px; background: #444; border-radius: 3px; }
/* En lecture, le bras suit la progression du morceau (16/10/2026) : posé sur le bord
   du disque au début, il avance vers l'étiquette jusqu'à la fin. --jb-avance (0 → 1)
   est mis à jour par jukebox.js ; la transition linéaire lisse les mises à jour. */
.jb.jb-lecture .jb-bras {
    transform: rotate(calc(var(--jb-bras-debut, 18deg) + var(--jb-avance, 0) * var(--jb-bras-course, 22deg)));
    transition: transform .35s linear;
}

/* Progression */
.jb-temps { display: flex; justify-content: space-between; font: 600 .78rem/1 "Courier New", ui-monospace, monospace; color: var(--jb-ambre); margin: 10px 2px 2px; }
.jb input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; margin: 0; cursor: pointer; }
.jb input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #ffb000 var(--jb-rempli, 0%), #4a2a63 var(--jb-rempli, 0%)); }
.jb input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: #4a2a63; }
.jb input[type=range]::-moz-range-progress { height: 6px; border-radius: 3px; background: #ffb000; }
.jb input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5px; border-radius: 50%; background: #f9e08a; border: 2px solid #a9791c; box-shadow: 0 0 6px rgba(255,176,0,.7); }
.jb input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #f9e08a; border: 2px solid #a9791c; }
.jb input[type=range]:focus-visible { outline: 2px solid #f9e08a; outline-offset: 2px; }

/* Commandes */
.jb-commandes { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px 0 2px; }
.jb-cmd {
    width: 36px; height: 36px; border-radius: 50%; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid #f9e08a; color: #2a0845;
    background: linear-gradient(180deg, #ffffff 0%, #d7d7e2 45%, #9a9ab0 100%);
    box-shadow: 0 3px 8px rgba(0,0,0,.5), inset 0 1px 0 #fff;
    transition: transform .1s;
}
.jb-cmd:hover { transform: scale(1.07); }
.jb-cmd:active { transform: scale(.95); }
.jb-cmd:focus-visible { outline: 3px solid #f9e08a; outline-offset: 2px; }
.jb-cmd svg { width: 16px; height: 16px; fill: currentColor; }
.jb-cmd.jb-grand { width: 46px; height: 46px; background: linear-gradient(180deg, #ffd27a 0%, #f97316 55%, #c2410c 100%); color: #fff; border-color: #fff3b0; }
.jb-cmd.jb-grand svg { width: 21px; height: 21px; }
.jb-cmd[disabled] { opacity: .4; cursor: default; transform: none; }
.jb .jb-ico-pause { display: none; }
.jb.jb-lecture .jb-ico-pause { display: block; }
.jb.jb-lecture .jb-ico-lecture { display: none; }

/* Volume */
.jb-volume { display: flex; align-items: center; gap: 8px; margin: 6px 4px 0; color: var(--jb-ambre); }
.jb-volume svg { width: 18px; height: 18px; fill: currentColor; flex: 0 0 auto; }
@media (pointer: coarse) { .jb-volume { display: none; } }   /* sur téléphone : les boutons du téléphone */

/* Sélection des titres (bandes d'étiquettes, comme sur un vrai jukebox) */
/* Recherche d'un titre (dès 2 titres) */
.jb-recherche { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; }
.jb-recherche[hidden] { display: none; }
.jb-recherche input {
    flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 7px 10px; border-radius: 6px;
    border: 2px solid var(--jb-or-fonce); background: #1a0630; color: #ffe9b0;
    font: 600 16px/1.2 "Segoe UI", Roboto, sans-serif;      /* 16 px : iPhone ne zoome pas sur le champ */
}
.jb-recherche input::placeholder { color: #b89bd6; }
.jb-recherche input:focus { outline: 2px solid #ffd54a; outline-offset: 1px; }
/* Croix « effacer la recherche » : entre le champ et le compteur ; invisible tant que le champ est vide */
.jb-recherche input::-webkit-search-cancel-button, .jb-recherche input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.jb-recherche input::-ms-clear { display: none; }
.jb-efface {
    flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border-radius: 50%; cursor: pointer;
    border: 2px solid var(--jb-or-fonce); background: #1a0630; color: #ffe9b0;
    font: 700 22px/1 "Segoe UI", Roboto, sans-serif; display: flex; align-items: center; justify-content: center;
    transition: opacity .15s;
}
.jb-efface:disabled { opacity: 0; pointer-events: none; }
.jb-efface:hover:not(:disabled) { background: #3b1170; color: #fff; }
.jb-efface:focus-visible { outline: 3px solid #f9e08a; outline-offset: 2px; }
.jb-compte { flex: 0 0 auto; font: 700 .72rem/1 "Courier New", monospace; color: var(--jb-ambre); }
.jb-recherche:not([hidden]) + .jb-selection { margin-top: 6px; }
.jb-selection .jb-vide { padding: 8px 4px; text-align: center; color: #e9d5ff; font: 600 .84rem/1.3 "Segoe UI", Roboto, sans-serif; }

.jb-selection { margin: 12px 0 0; padding: 8px; list-style: none; max-height: min(330px, calc(100vh - 430px)); min-height: 132px; overflow-y: auto;   /* 02/10/2026 : 132 → jusqu'à 330 px selon l'écran */
    background: rgba(0,0,0,.35); border: 2px solid var(--jb-or-fonce); border-radius: 10px; }
.jb-selection[hidden] { display: none; }
.jb-selection li + li { margin-top: 5px; }
.jb-selection button {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
    padding: 6px 10px; border-radius: 4px; border: 1px solid #d9c9a3;
    background: #fdf3e7; color: #3b0a57; font: 600 .86rem/1.2 "Segoe UI", Roboto, sans-serif;
}
.jb-selection button:hover { background: #fff8ec; }
.jb-selection button .jb-num { flex: 0 0 auto; font: 800 .74rem/1 "Courier New", monospace; color: #fff; background: #6d28d9; border-radius: 3px; padding: 3px 5px; }
.jb-selection button .jb-nom { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jb-selection button[aria-current="true"] { background: #f97316; color: #fff; border-color: #fff3b0; }
.jb-selection button[aria-current="true"] .jb-num { background: #3b0a57; }

/* Petits écrans */
@media (max-width: 400px) {
    .jb { padding: 54px 16px 18px; }
    .jb-platine { width: 69px; height: 69px; }
    .jb-bras { height: 50px; right: -12px; }
}
@media (max-height: 640px) { .jb-platine { width: 57px; height: 57px; } .jb-bras { height: 41px; right: -11px; } .jb-selection { min-height: 100px; } }

/* Respect de « réduire les animations » */
@media (prefers-reduced-motion: reduce) {
    .jb, .jb-fond, .jb::before, .jb::after, .jb.jb-lecture .jb-disque, .jb-enseigne { animation: none !important; }
    .jb-titre-piste.jb-defile > span { animation: none !important; }
    .jb-titre-piste { text-overflow: ellipsis; }
    .jb-bras { transition: none; }
}
/* Modes de lecture (16/10/2026) : sur la ligne des commandes, Enchaîner / Aléatoire
   à gauche (symboles seuls), lecture au centre, durée du fondu à droite. */
.jb-commandes { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; }
.jb-cmd-centre { display: flex; align-items: center; gap: 14px; }
.jb-cmd-gauche { display: flex; align-items: center; gap: 6px; justify-self: start; }
.jb-cmd-droite { display: flex; flex-direction: column; align-items: center; gap: 2px; justify-self: end; cursor: pointer; }
.jb-mode {
    /* Même habillage que les boutons de lecture (.jb-cmd, argenté), en plus petit (16/10/2026).
       L'ancien fond sombre laissait voir des traits parasites au survol sous Windows. */
    width: 30px; height: 30px;
}
.jb-mode svg { display: block; width: 15px; height: 15px; fill: currentColor; pointer-events: none; }
.jb-mode:hover { transform: scale(1.12); }            /* grossissement au survol, comme les boutons de lecture */
.jb-mode:active { transform: scale(.95); }
.jb-mode[aria-pressed="true"] {
    background: linear-gradient(180deg, #ffd27a 0%, #f97316 55%, #c2410c 100%); color: #fff; border-color: #fff3b0;
    box-shadow: 0 0 10px rgba(249,115,22,.65);
}
.jb-enchaine {
    padding: 3px 4px; border-radius: 7px; border: 2px solid var(--jb-or-fonce); background: #1a0630; color: #ffe9b0;
    font: 600 .74rem/1.1 "Segoe UI", Roboto, sans-serif; cursor: pointer;
}
.jb-enchaine:disabled { opacity: .45; cursor: default; }
.jb-enchaine-legende { font: 600 .62rem/1 "Courier New", ui-monospace, monospace; color: var(--jb-ambre); opacity: .8; letter-spacing: .05em; }
.jb-ensuite { min-height: 1.1em; margin: 6px 4px 0; text-align: center; color: var(--jb-ambre);
              font: 600 .74rem/1.2 "Courier New", ui-monospace, monospace; opacity: .85;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jb-ensuite:empty { display: none; }

/* Origine du titre (16/10/2026) : 💃 chorée du site, 💿 C:\Musiques, ☁️ OneDrive, 📁 dossier ajouté */
.jb-selection button .jb-src { flex: 0 0 auto; font-size: .9rem; line-height: 1; }

/* Haut en « vitrine » (16/10/2026) : disque, barre de progression entre les deux temps,
   puis cadre du titre, le tout sous l'arche néon qui descend en lignes verticales. */
.jb-platine-ligne { position: relative; display: flex; justify-content: center; margin: 0 0 4px; }
.jb-prog-ligne { display: flex; align-items: center; gap: 10px; margin: 0 26px; }
.jb-prog-ligne input[type=range] { flex: 1 1 auto; min-width: 0; }
.jb-temps-g, .jb-temps-d { flex: 0 0 auto; min-width: 2.6em; font: 700 .9rem/1 "Courier New", ui-monospace, monospace; color: var(--jb-ambre);
                           text-shadow: 0 0 6px rgba(255,176,0,.5); }
.jb-temps-d { text-align: right; }
.jb .jb-ecran { margin: 14px 18px 0; }
.jb .jb-commandes { margin-top: 42px; }   /* boutons bien sous la ligne basse de l'arche */
@media (max-width: 400px) { .jb { --jb-arche: 238px; } .jb-prog-ligne { margin: 0 20px; } .jb .jb-ecran { margin: 12px 16px 0; } }
@media (max-height: 640px) { .jb { --jb-arche: 226px; } }

/* La liste prend la place restante et défile seule (16/10/2026). */
.jb > .jb-selection { flex: 1 1 auto; min-height: 90px; max-height: 330px; }
.jb > * { flex-shrink: 0; }
.jb > .jb-selection { flex-shrink: 1; }

/* Alternance titre / premiers pas (04/11/2026) : fondu entre les deux textes. */
.jb-titre-piste { transition: opacity .35s ease; }
.jb-titre-piste.jb-masque { opacity: 0; }

/* Sous-titre trop long (04/11/2026) : il défile comme le titre au lieu d'être coupé par « … ». */
.jb-sous-piste.jb-defile { text-overflow: clip; }
.jb-sous-piste.jb-defile > span { display: inline-block; padding-right: 3em; animation: jb-defile var(--jb-duree, 10s) linear infinite; }
@media (prefers-reduced-motion: reduce) {
    .jb-sous-piste.jb-defile > span { animation: none !important; }
    .jb-sous-piste.jb-defile { text-overflow: ellipsis; }
}

/* Icône vidéo au bout de chaque titre (05/11/2026) : ouvre la vidéo par-dessus le jukebox. */
.jb-selection li { display: flex; align-items: stretch; gap: 6px; }
.jb-selection li > button { flex: 1 1 auto; min-width: 0; }
.jb-video {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 34px; border-radius: 4px; color: #fff; text-decoration: none;
    background: #6d28d9; border: 1px solid #a78bfa; transition: transform .12s, background .12s;
}
.jb-video svg { width: 17px; height: 17px; }
.jb-video:hover { background: #f97316; border-color: #fff3b0; transform: scale(1.06); }
.jb-video:focus-visible { outline: 3px solid #f9e08a; outline-offset: 1px; }

/* Fenêtre vidéo par-dessus le jukebox (le jukebox reste ouvert derrière). */
.jb-vid { position: fixed; inset: 0; z-index: 3500; display: flex; align-items: center; justify-content: center;
          padding: 16px; background: rgba(0,0,0,.72); animation: jb-fondu .18s ease-out; }
.jb-vid[hidden] { display: none !important; }
.jb-vid-boite { width: 100%; max-width: 1000px; max-height: calc(100dvh - 32px); overflow: hidden; border-radius: 14px; background: #000;
                box-shadow: 0 0 0 3px var(--jb-or, #f5c542), 0 0 0 6px #a9791c, 0 24px 60px rgba(0,0,0,.6); }
.jb-vid-tete { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; color: #fff;
               background: linear-gradient(180deg, #55127c, #300a4d); font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.jb-vid-titre { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; color: #f5c542; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jb-vid-ouvrir { flex: 0 0 auto; color: #fff; text-decoration: none; font-weight: 700; font-size: 13px;
                 border: 1.5px solid rgba(255,255,255,.85); border-radius: 999px; padding: 4px 12px; }
.jb-vid-ouvrir:hover { background: rgba(255,255,255,.18); }
.jb-vid-fermer { flex: 0 0 auto; width: 32px; height: 32px; padding: 0; border: 2px solid #f5c542; border-radius: 50%; cursor: pointer;
                 background: #21083a; color: #f5c542; font: 700 20px/1 system-ui, sans-serif; }
.jb-vid-fermer:hover { background: #f97316; color: #fff; }
.jb-vid-cadre { position: relative; aspect-ratio: 16 / 9; max-height: calc(100vh - 100px); margin: 0 auto; background: #000; }
.jb-vid-cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Fiche de pas PDF (05/11/2026) : icône rouge, fenêtre en hauteur. */
.jb-fiche { background: #c62828; border-color: #f19999; }
.jb-video.jb-place { visibility: hidden; }   /* place vide : colonnes alignées */
.jb-vid-cadre.jb-doc { aspect-ratio: auto; height: calc(100dvh - 110px); background: #525659; }

/* Décompte avant la musique (05/11/2026) : le bouton ▶ clignote (1 s) ; un appui lance tout de suite. */
.jb.jb-attente .jb-cmd.jb-grand { animation: jb-clignote 1s ease-in-out infinite; }
@keyframes jb-clignote { 0%, 100% { opacity: 1; box-shadow: 0 0 14px 3px rgba(255,176,0,.8); } 50% { opacity: .35; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .jb.jb-attente .jb-cmd.jb-grand { animation: none; outline: 3px solid #ffb000; } }

/* Décompte réglable dans le jukebox (05/11/2026) : à droite, à côté du fondu. */
.jb-cmd-reglages { display: flex; align-items: flex-start; gap: 8px; justify-self: end; }
/* Écran étroit (téléphone) : les deux réglages passent sur leur propre ligne, sous les boutons. */
@media (max-width: 480px) {
    .jb-cmd-reglages { grid-column: 1 / -1; justify-self: center; gap: 22px; margin-top: 2px; }
}

/* Sous-titre en va-et-vient (05/11/2026) : animé par jukebox.js, borné au dernier caractère. */
.jb-sous-piste.jb-vaet { text-overflow: clip; }
.jb-sous-piste.jb-vaet > span { display: inline-block; will-change: transform; }