/* ════════════════════════════════════════════════════════════════════
   MUSIC DISCOVERY — la structure et les objets
   Les couleurs et polices viennent de teintes.css (une teinte = un skin).
   Plan : base · façade · carton d'entrée · boutons · pochettes · disques ·
   la chaîne (enceintes, lecteur, tuner, post-it, cosmétique) · vidéo ·
   livret · panneaux · messages · tablette · téléphone · mouvements.
   ════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--fond);
  background-image: var(--fond-image, none);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .5s ease, color .5s ease;
  overflow-x: hidden;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
a { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, p { margin: 0; }
:focus-visible { outline: 2px solid var(--aiguille); outline-offset: 3px; border-radius: 6px; }
h1, h2, .marque {
  font-family: var(--display);
  font-weight: var(--display-poids);
  font-stretch: var(--display-etirement, 100%);
  letter-spacing: var(--display-interlettre, -0.02em);
  line-height: 1.05;
}
/* des lignes équilibrées, pas de mot tout seul en fin de paragraphe */
h1, h2, h3, .avis-titre { text-wrap: balance; }
p, li, .livret-texte { text-wrap: pretty; }

/* ─────────────────────────────── LA FAÇADE (barre du haut) ─────────────────────────────── */
.facade-haut {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: 76px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 20px;
  padding-top: env(safe-area-inset-top);
  background: var(--fond);
  border-bottom: 1px solid var(--trait);
  transition: background-color .5s ease;
}
body[data-vue="allumage"] .facade-droite { visibility: hidden; }
.marque { font-size: 19px; line-height: .92; letter-spacing: -.01em; text-align: left; }
.allumage-texte h1 em, .marque em { font-style: italic; }
.facade-droite { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.bouton-facade {
  height: 42px; padding: 0 16px; border-radius: 999px; white-space: nowrap;
  background: var(--fond-2); box-shadow: var(--relief);
  font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px;
  transition: transform .12s;
}
.bouton-facade:active { transform: translateY(1px); }
.bouton-trouvailles { padding-right: 10px; }
/* « Ma sélection » n'apparaît qu'à partir de deux morceaux */
body.sans-selection .bouton-trouvailles { display: none; }
/* l'icône des réglages reprend les couleurs de la teinte active */
.icone-teinte { width: 18px; height: 18px; border-radius: 50%; flex: none; background: conic-gradient(var(--aiguille) 0 34%, var(--encre) 0 67%, var(--fond-3) 0); box-shadow: inset 0 0 0 1px var(--trait), 0 0 0 1px rgba(0,0,0,.08); }
.seulement-mobile-inline { display: none; }
/* le petit CD-R du bouton « Ma sélection » */
.mini-cdr { width: 18px; height: 18px; border-radius: 50%; flex: none; background: radial-gradient(circle, var(--fond-2) 0 16%, rgba(0,0,0,.25) 17% 20%, transparent 21%), conic-gradient(#e9ecef, #c4cad1, #f7f8f9, #c8ced5, #e9ecef); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.bouton-trouvailles.pulse .mini-cdr { animation: tourne .8s cubic-bezier(.3,.6,.3,1); }
.compteur {
  min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px;
  display: inline-grid; place-items: center;
  background: var(--encre); color: var(--fond); font-size: 13px;
}
.bouton-trouvailles.pulse .compteur { animation: pulse .5s cubic-bezier(.3,1.8,.5,1); }
@keyframes pulse { 50% { transform: scale(1.45); } }

/* les pastilles de teinte : visibles en façade, et en grand dans Réglages */
.teintes { display: flex; gap: 4px; align-items: center; }
.pastille { position: relative; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; transition: box-shadow .2s; }
.pastille span { display: block; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.22); transition: transform .15s; }
.pastille em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pastille:hover span { transform: scale(1.15); }
.pastille[aria-checked="true"] { box-shadow: 0 0 0 2px var(--aiguille); }
.teintes-grandes { flex-wrap: wrap; gap: 8px; }
.teintes-grandes .pastille { width: auto; height: auto; min-width: 74px; padding: 10px 8px 8px; border-radius: 14px; gap: 6px; }
.teintes-grandes .pastille span { width: 42px; height: 42px; }
.teintes-grandes .pastille em { position: static; width: auto; height: auto; clip: auto; font-style: normal; font-size: 13px; font-weight: 600; }
.teintes-grandes .pastille[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--aiguille); background: var(--fond-2); }

/* ─────────────────────────────── LA MOLETTE DE VOLUME (carton d'entrée) ─────────────────────────────── */
.bouton-rotatif { display: grid; justify-items: center; gap: 4px; }
.bouton-rotatif-nom { font-size: 12px; color: var(--encre-2); white-space: nowrap; }
.molette {
  --rot: -135deg;
  position: relative; width: 44px; height: 44px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 40%, var(--capuchon-haut) 0 50%, transparent 51%),
    repeating-conic-gradient(var(--capuchon-bas) 0 6deg, var(--capuchon-haut) 6deg 12deg);
  box-shadow: 0 5px 12px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.18);
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.molette.saisie { cursor: grabbing; }
.molette-repere { position: absolute; inset: 0; transform: rotate(var(--rot)); transition: transform .12s ease-out; }
.molette-repere::before {
  content: ""; position: absolute; left: 50%; top: 5px; width: 3px; height: 30%;
  margin-left: -1.5px; border-radius: 2px; background: var(--aiguille);
}
/* l'arc qui montre le niveau du volume */
.molette-arc { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); transform: rotate(135deg); pointer-events: none; }
.molette-arc circle { fill: none; stroke: var(--aiguille); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 45 100; transition: stroke-dasharray .1s; }
.bouton-rotatif-grand .molette { width: 112px; height: 112px; cursor: pointer; }
.bouton-rotatif-grand .molette-repere::before { top: 10px; width: 4px; margin-left: -2px; height: 24%; }
.bouton-rotatif-grand .bouton-rotatif-nom { font-size: 15px; font-weight: 600; color: var(--encre); margin-top: 8px; }
/* sur iPhone, le volume ne se pilote pas depuis une page web : on cache la molette */
.ios [data-molette="volume"] { display: none !important; }

#scene { padding-top: 76px; min-height: 100vh; }
.ecran { min-height: calc(100vh - 76px); padding: clamp(20px, 4vw, 56px); padding-bottom: 120px; }

/* ─────────────────────────────── LE CARTON D'ENTRÉE ─────────────────────────────── */
.ecran-allumage { display: grid; place-content: center; justify-items: center; gap: 34px; text-align: center; }
.allumage-texte h1 { font-size: clamp(2.5rem, 6vw, 5.2rem); line-height: .95; max-width: none; margin: 0 auto; text-wrap: balance; }
.allumage-texte h1 .ligne { display: inline-block; text-wrap: balance; }
.allumage-texte .surtitre { margin-bottom: 18px; font-size: 13.65px; }
.surtitre { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-2); }
.etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.etapes li { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.etapes b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--fond-2); box-shadow: var(--relief); font-size: 13px; }
.etapes li + li::before { content: ""; width: 26px; height: 1px; margin-right: 14px; background: var(--encre-3); }
.panneau-allumage {
  display: flex; align-items: center; gap: clamp(28px, 6vw, 64px);
  padding: 26px 36px; border-radius: var(--rayon-objet);
  background: var(--fond-2); box-shadow: var(--relief);
}
.allumage-conseil { font-size: 14px; color: var(--encre-2); max-width: 52ch; }
.allumage-retour { font-size: 15px; color: var(--aiguille); font-weight: 600; }
.allumage-libre { font-size: 13px; color: var(--encre-2); max-width: 44ch; }
.interrupteur {
  width: 132px; height: 132px; border-radius: 50%;
  background: var(--fond-3);
  box-shadow: var(--relief-fort);
  display: grid; place-items: center; align-content: center; gap: 10px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.interrupteur:active, body.allume .interrupteur { transform: translateY(2px) scale(.98); box-shadow: var(--relief-enfonce); }
.interrupteur-led { width: 10px; height: 10px; border-radius: 50%; background: var(--verre-eteint); box-shadow: inset 0 1px 2px rgba(0,0,0,.4); transition: background .2s, box-shadow .2s; }
body.allume .interrupteur-led { background: var(--aiguille); box-shadow: 0 0 12px 2px var(--aiguille); }
.interrupteur-label { font-weight: 600; font-size: 15px; }

/* ─────────────────────────────── BOUTONS ─────────────────────────────── */
.gros-bouton {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 54px; padding: 0 26px; border-radius: 999px;
  font-size: clamp(.98rem, 1.3vw, 1.1rem); letter-spacing: 0; line-height: 1.15;
  background: var(--fond-2); box-shadow: var(--relief);
  transition: transform .12s ease, box-shadow .12s ease;
}
.gros-bouton:active { transform: translateY(2px); box-shadow: var(--relief-enfonce); }
.gros-bouton-plein { background: var(--encre); color: var(--fond); box-shadow: var(--relief-plein); }
.lien-bouton {
  font-size: 15px; font-weight: 500; color: var(--encre-2);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer;
}
.lien-bouton:hover { color: var(--encre); }

/* ─────────────────────────────── POCHETTES ─────────────────────────────── */
.pochette {
  position: relative; overflow: hidden; width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--rayon-pochette);
  background: hsl(var(--h) 32% 28%);
  box-shadow: var(--ombre-pochette);
}
@supports not (aspect-ratio: 1 / 1) { .pochette::before { content: ""; display: block; padding-top: 100%; } }
.pochette-repli {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: var(--display-poids); line-height: 1; font-size: 4rem;
  color: hsl(var(--h) 55% 72%);
}
.pochette-mini .pochette-repli, .pochette-livret .pochette-repli { font-size: 1.5rem; }
.pochette-ensuite .pochette-repli { font-size: 1.1rem; }
.pochette img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.pochette img.est-yt { transform: scale(1.36); }
.pochette img.se-revele { animation: revele .6s ease both; }
@keyframes revele { from { opacity: 0; } }
@keyframes sortie { from { opacity: 0; transform: translateY(34px); } }

/* ─────────────────────────────── LES DISQUES ───────────────────────────────
   Un CD imprimé : le trou, l'anneau de plastique transparent, l'étiquette
   de couleur, et un reflet irisé quand la lumière tourne. */
.disque {
  --amb: #c9c9c9; --amb-encre: #15151a;
  position: relative; display: block; aspect-ratio: 1 / 1; width: 100%; border-radius: 50%; overflow: hidden;
  container-type: inline-size;
  background:
    radial-gradient(circle, transparent 0 7%, rgba(255,255,255,.9) 7.4% 8.4%, rgba(160,170,180,.55) 8.6% 15.5%, rgba(255,255,255,.7) 15.7% 16.4%, transparent 16.6%),
    radial-gradient(circle, transparent 0 16.5%, var(--amb) 16.6%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.14), 0 10px 24px -6px rgba(0,0,0,.4);
  -webkit-mask: radial-gradient(circle, transparent 0 6.8%, #000 7%);
  mask: radial-gradient(circle, transparent 0 6.8%, #000 7%);
}
.disque::after { /* le reflet */
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 200deg, transparent 0 8%, rgba(255,255,255,.32) 13%, transparent 21% 55%, rgba(255,255,255,.22) 61%, transparent 70%);
  mix-blend-mode: soft-light;
}
.disque-nom {
  position: absolute; left: 50%; top: 17%; transform: translateX(-50%); width: 72%; text-align: center;
  font-family: var(--display); font-weight: var(--display-poids); letter-spacing: -0.01em; font-size: 14px; font-size: 13cqw; line-height: 1; color: var(--amb-encre);
}
.disque-nom small { display: block; margin-top: .45em; font-family: var(--texte); font-weight: 600; letter-spacing: .14em; font-size: .3em; text-transform: uppercase; opacity: .7; }
/* la radio : un disque holographique */
.disque-hasard { --amb-encre: #1c1c21; background:
  radial-gradient(circle, transparent 0 7%, rgba(255,255,255,.9) 7.4% 8.4%, rgba(160,170,180,.55) 8.6% 15.5%, rgba(255,255,255,.7) 15.7% 16.4%, transparent 16.6%),
  conic-gradient(from 30deg, #ffd0e4, #c9d5ff, #c4f6df, #fff2b5, #ffd0e4, #d8c9ff, #c4f1ff, #ffe0c4, #ffd0e4); }
.disque-hasard .disque-nom { font-size: 11px; font-size: 9.5cqw; top: 19%; }
/* ma sélection : un CD-R argenté, écrit au feutre */
.disque-compil { --amb-encre: #1a2c8a; background:
  radial-gradient(circle, transparent 0 7%, rgba(255,255,255,.9) 7.4% 8.4%, rgba(160,170,180,.55) 8.6% 15.5%, rgba(255,255,255,.7) 15.7% 16.4%, transparent 16.6%),
  repeating-radial-gradient(circle, rgba(255,255,255,.12) 0 1px, rgba(0,0,0,.03) 1px 2px),
  conic-gradient(from 0deg, #e9ecef, #cfd5db, #f7f8f9, #c8ced5, #eef0f2, #d3d8dd, #f5f6f7, #cdd3d9, #e9ecef); }
.disque-main {
  position: absolute; left: 50%; top: 14%; transform: translateX(-50%) rotate(-8deg); white-space: nowrap;
  font-family: var(--display); font-style: italic; font-weight: 400; font-size: 15px; font-size: 13cqw; line-height: 1; color: var(--amb-encre);
}
@keyframes tourne { to { transform: rotate(360deg); } }
/* le picture disc : la pochette du morceau imprimée sur le disque, des sillons, un anneau
   stroboscopique sur la tranche. Le reflet irisé ne tourne pas avec le disque : il reste
   sous la lumière pendant que l'image file dessous, et c'est ça qui hypnotise. */
.disque-image { background:
  radial-gradient(circle, transparent 0 7%, rgba(255,255,255,.9) 7.4% 8.4%, rgba(160,170,180,.6) 8.6% 15.5%, rgba(255,255,255,.75) 15.7% 16.4%, transparent 16.6%),
  radial-gradient(circle, transparent 0 16.5%, rgba(0,0,0,.35) 16.6% 17.3%, transparent 17.6%),
  var(--pochette) center / cover no-repeat, #222; }
.disque-image.disque-yt { background:
  radial-gradient(circle, transparent 0 7%, rgba(255,255,255,.9) 7.4% 8.4%, rgba(160,170,180,.6) 8.6% 15.5%, rgba(255,255,255,.75) 15.7% 16.4%, transparent 16.6%),
  radial-gradient(circle, transparent 0 16.5%, rgba(0,0,0,.35) 16.6% 17.3%, transparent 17.6%),
  var(--pochette) center / auto 134% no-repeat, #222; }
.disque-image > * { display: none; }
.disque-image::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    var(--strobe) center / 100% 100% no-repeat,
    radial-gradient(circle, transparent 0 94.5%, rgba(10,10,12,.82) 95% 100%),
    radial-gradient(circle, transparent 0 17.6%, rgba(255,255,255,.18) 17.8% 18.3%, transparent 18.6% 61%, rgba(0,0,0,.22) 61.2% 61.7%, transparent 62%),
    repeating-radial-gradient(circle, rgba(255,255,255,.06) 0 1px, rgba(0,0,0,.08) 1px 2.6px);
}
.plateau-reflet {
  position: absolute; width: 96%; aspect-ratio: 1 / 1; border-radius: 50%; pointer-events: none;
  background:
    conic-gradient(from 0deg, transparent 0 6%, rgba(255,120,200,.55) 10%, rgba(120,200,255,.6) 14%, rgba(160,255,190,.5) 18%, transparent 24% 52%, rgba(255,230,140,.45) 57%, rgba(200,140,255,.5) 61%, transparent 67%),
    radial-gradient(90% 60% at 30% 22%, rgba(255,255,255,.35), transparent 60%);
  mix-blend-mode: screen; opacity: .55;
  -webkit-mask: radial-gradient(circle, transparent 0 16.6%, #000 17%); mask: radial-gradient(circle, transparent 0 16.6%, #000 17%);
  animation: balayage 14s linear infinite; animation-play-state: paused;
}
body.cd-tourne .plateau-reflet { animation-play-state: running; }
@keyframes balayage { to { transform: rotate(-360deg); } }

/* ═══════════════════════════════ LA CHAÎNE ═══════════════════════════════
   Une micro-chaîne CD du milieu des années 2000 : deux enceintes, et entre elles
   le lecteur (écran ou disque, la vidéo, les commandes) posé sur le tuner qui
   oriente la suite. Alu brossé le jour, laque noire la nuit, encre en Papier. */
.ecran-machine { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; justify-items: center; gap: clamp(26px, 3.5vw, 44px); padding-top: clamp(14px, 2.2vw, 30px); }
.hifi {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(96px, 180px) minmax(0, 980px) minmax(96px, 180px);
  grid-template-areas: "g corps d" "g tuner d";
  column-gap: clamp(12px, 2vw, 26px); row-gap: 12px; align-items: end;
  width: 100%; max-width: 1420px;
}
.hifi::after { content: ""; position: absolute; z-index: -1; left: 3%; right: 3%; bottom: -24px; height: 42px; background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.22), transparent 72%); }

/* ─── les enceintes : vis apparentes, tweeter dans un pavillon, membrane à nervures,
       anneau lumineux, vumètre à diodes, évent bass-reflex, grille amovible ─── */
.hifi-enceinte {
  position: relative; display: grid; grid-template-rows: auto auto auto auto 1fr; justify-items: center; gap: 7%;
  aspect-ratio: 1 / 2.75; padding: 18% 12% 14%; border-radius: 16px 16px 12px 12px; overflow: hidden;
  background:
    radial-gradient(circle at 14px 14px, #8b8e94 0 3px, #3c3e43 3.5px 5.5px, transparent 6px),
    radial-gradient(circle at calc(100% - 14px) 14px, #8b8e94 0 3px, #3c3e43 3.5px 5.5px, transparent 6px),
    radial-gradient(circle at 14px calc(100% - 14px), #8b8e94 0 3px, #3c3e43 3.5px 5.5px, transparent 6px),
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), #8b8e94 0 3px, #3c3e43 3.5px 5.5px, transparent 6px),
    var(--hifi-corps);
  box-shadow: var(--hifi-ombre);
}
.hifi-enceinte-g { grid-area: g; }
.hifi-enceinte-d { grid-area: d; }
.hp-plaque { justify-self: center; font-family: var(--etiquette); font-weight: 700; font-stretch: 88%; font-size: 10px; letter-spacing: .12em; color: var(--hifi-encre); opacity: .55; text-align: center; line-height: 1; }
.hp-plaque small { display: block; font-family: var(--texte); font-weight: 600; font-size: 8px; letter-spacing: .2em; text-transform: uppercase; margin-top: 3px; }
.hp-tweeter { position: relative; width: 52%; aspect-ratio: 1 / 1; border-radius: 26%; background: radial-gradient(circle, #1a1b1e 0 30%, #2c2e33 46%, #3d4046 62%, #2a2c30 70%); box-shadow: 0 1px 0 rgba(255,255,255,.35), inset 0 2px 6px rgba(0,0,0,.6); cursor: pointer; }
.hp-tweeter i { position: absolute; inset: 34%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fbfbfb 0 12%, #a7adb4 30%, #33363c 70%); }
.hp-boomer {
  position: relative; width: 96%; aspect-ratio: 1 / 1; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle, transparent 0 66%, #121315 66.5% 71%, var(--hifi-anneau) 72% 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.35), inset 0 2px 6px rgba(0,0,0,.5);
}
.hp-cone { /* membrane nervurée, suspension en caoutchouc, cache-noyau qui brille */
  position: absolute; inset: 9%; border-radius: 50%;
  background:
    radial-gradient(circle at 42% 38%, rgba(255,255,255,.55) 0 3%, transparent 9%),
    radial-gradient(circle, #3b3e44 0 17%, #1d1e22 18% 20%, transparent 21%),
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.07) 0 4deg, rgba(0,0,0,.18) 4deg 10deg),
    radial-gradient(circle, #2b2d32 0 72%, #3a3c42 78%, #18191c 84%, #2e3035 92%, #141517 100%);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.4);
  transition: transform .1s;
}
body.cd-tourne .hp-cone { animation: pompe var(--battement, .5s) ease-in-out infinite alternate; }
body.loudness.cd-tourne .hp-cone, body.cd-tourne.energie-forte .hp-cone { animation-name: pompe-fort; }
@keyframes pompe { to { transform: scale(1.035); filter: brightness(1.12); } }
@keyframes pompe-fort { to { transform: scale(1.07); filter: brightness(1.25); } }
/* l'anneau lumineux */
.hp-boomer i { position: absolute; inset: 4%; border-radius: 50%; box-shadow: 0 0 0 2px var(--lcd-encre); opacity: 0; transition: opacity .4s, box-shadow .4s; }
body.cd-tourne .hp-boomer i { opacity: .7; box-shadow: 0 0 0 2px var(--lcd-encre), 0 0 18px 2px var(--lcd-halo); }
body[data-lumieres="eteint"] .hp-boomer i { opacity: 0 !important; }
body[data-lumieres="tempo"].cd-tourne .hp-boomer i { animation: anneau var(--battement, .5s) ease-in-out infinite alternate; }
@keyframes anneau { from { opacity: .35; } to { opacity: 1; box-shadow: 0 0 0 2px var(--lcd-encre), 0 0 22px 4px var(--lcd-halo); } }
body[data-lumieres="arc"] .hp-boomer i { opacity: 1; box-shadow: 0 0 0 2px #ff6ec7, 0 0 20px 3px rgba(255,110,199,.6); animation: arc-en-ciel 3s linear infinite; }
@keyframes arc-en-ciel { to { filter: hue-rotate(360deg); } }
/* le vumètre */
.hp-vu { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; width: 80%; justify-self: center; padding: 5px 6px; border-radius: 4px; background: #0d0e10; box-shadow: inset 0 1px 3px rgba(0,0,0,.7); }
.hp-vu b { height: 5px; border-radius: 1px; background: #23262b; transition: background .08s, box-shadow .08s; }
.hp-vu b.on { background: var(--lcd-encre); box-shadow: 0 0 5px var(--lcd-halo); }
.hp-vu b.on:nth-child(n+8) { background: #ffcf5c; box-shadow: 0 0 5px rgba(255,200,80,.6); }
.hp-vu b.on:nth-child(10) { background: #ff5a3c; box-shadow: 0 0 5px rgba(255,90,60,.7); }
body[data-dimmer="1"] .hp-vu b.on { filter: brightness(.6); box-shadow: none; }
/* l'évent bass-reflex */
.hp-event { align-self: end; justify-self: center; width: 46%; aspect-ratio: 3.4 / 1; border-radius: 999px; background: radial-gradient(60% 90% at 50% 40%, #050506, #1d1e22 70%, #34363c); box-shadow: 0 1px 0 rgba(255,255,255,.35), inset 0 3px 6px rgba(0,0,0,.8); }
body.loudness.cd-tourne .hp-event { animation: souffle var(--battement, .5s) ease-in-out infinite alternate; }
@keyframes souffle { to { box-shadow: 0 1px 0 rgba(255,255,255,.35), inset 0 3px 6px rgba(0,0,0,.8), 0 0 14px 2px var(--lcd-halo); } }
/* la grille, qu'on met ou qu'on enlève */
.hp-grille {
  position: absolute; inset: 6px; border-radius: 12px; pointer-events: none;
  background:
    radial-gradient(circle, rgba(0,0,0,.72) 0 1.1px, transparent 1.6px) 0 0 / 5px 5px,
    linear-gradient(160deg, rgba(255,255,255,.14), rgba(0,0,0,.1)),
    #2a2c31;
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.25), inset 0 0 18px rgba(0,0,0,.5);
  transform: translateY(-104%); transition: transform .5s cubic-bezier(.3,1.2,.4,1);
}
body.grilles .hp-grille { transform: none; }
.hp-grille::after { content: "AG"; position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); font-family: var(--etiquette); font-weight: 700; font-stretch: 88%; font-size: 10px; letter-spacing: .1em; color: #c9ccd2; opacity: .6; }
/* les petites bidouilles : on tape sur les haut-parleurs, ils répondent */
.hp-boomer.coup { animation: coup .5s cubic-bezier(.2,.8,.3,1); }
.hp-boomer.coup .hp-cone { animation: coup-cone .5s cubic-bezier(.2,.8,.3,1); }
@keyframes coup { 0% { box-shadow: 0 1px 0 rgba(255,255,255,.35), inset 0 2px 6px rgba(0,0,0,.5), 0 0 0 0 var(--lcd-halo); } 100% { box-shadow: 0 1px 0 rgba(255,255,255,.35), inset 0 2px 6px rgba(0,0,0,.5), 0 0 0 34px transparent; } }
@keyframes coup-cone { 20% { transform: scale(.9); filter: brightness(.8); } 55% { transform: scale(1.06); filter: brightness(1.25); } }
.hp-tweeter.ping { animation: ping .55s ease-out; }
@keyframes ping { 0% { box-shadow: 0 1px 0 rgba(255,255,255,.4), inset 0 1px 3px rgba(0,0,0,.4), 0 0 0 0 var(--lcd-halo); transform: scale(.92); } 100% { box-shadow: 0 1px 0 rgba(255,255,255,.4), inset 0 1px 3px rgba(0,0,0,.4), 0 0 0 20px transparent; transform: none; } }
/* un morceau qui cogne fait trembler les enceintes */
body.cd-tourne.energie-forte .hifi-enceinte { animation: tremble calc(var(--battement, .5s) * .5) linear infinite; }
@keyframes tremble { 0%, 100% { translate: 0 0; } 25% { translate: .7px -.9px; } 50% { translate: -.8px .5px; } 75% { translate: .6px .8px; } }

/* ─── le lecteur ─── */
.hifi-corps {
  grid-area: corps; position: relative; display: grid; min-width: 0;
  grid-template-columns: minmax(0, 1fr); grid-template-areas: "haut" "afficheur" "commandes" "trappe";
  gap: 16px 22px; padding: clamp(16px, 2vw, 26px); border-radius: 20px;
  background: var(--hifi-corps); color: var(--hifi-encre); box-shadow: var(--hifi-ombre);
}
body.video-machine .hifi-corps { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); grid-template-areas: "haut haut" "afficheur ecran" "commandes commandes" "trappe trappe"; }
.hifi-haut { grid-area: haut; display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--hifi-trait); }
.hifi-marque { font-family: var(--etiquette); font-weight: 700; font-stretch: 88%; letter-spacing: .04em; text-transform: uppercase; font-size: 14px; }
.hifi-modele { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .55; }
.hifi-veille { margin-left: 4px; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: #c8402e; box-shadow: 0 0 6px rgba(200,64,46,.7); transition: background .3s, box-shadow .3s; }
body.chaine-allumee .hifi-veille { background: var(--lcd-encre); box-shadow: 0 0 8px 1px var(--lcd-halo); }
body[data-dimmer="1"] .hifi-veille { opacity: .5; }
/* le choix d'affichage et la cosmétique, en haut de la façade */
.choix-affichage { margin-left: auto; display: inline-flex; padding: 3px; border-radius: 9px; background: var(--hifi-creux); box-shadow: inset 0 1px 3px rgba(0,0,0,.5); align-self: center; }
.choix-affichage button { min-height: 28px; padding: 0 11px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9a9da5; transition: background-color .15s, color .15s; }
.choix-affichage button[aria-checked="true"] { background: linear-gradient(#4a4d55, #34363c); color: var(--lcd-encre); text-shadow: 0 0 6px var(--lcd-halo); }
.bouton-cosmetique {
  align-self: center; display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 9px; white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  background: linear-gradient(#4a4d55, #34363c); color: var(--lcd-encre); text-shadow: 0 0 6px var(--lcd-halo);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 5px rgba(0,0,0,.35); transition: transform .08s, box-shadow .08s, filter .15s;
}
.bouton-cosmetique:hover { filter: brightness(1.15); }
.bouton-cosmetique:active, .bouton-cosmetique[aria-expanded="true"] { box-shadow: inset 0 2px 6px rgba(0,0,0,.6); transform: translateY(1px); }

/* l'afficheur : le disque qui tourne (avec son étiquette) ou l'écran à cristaux liquides, au choix */
.afficheur { grid-area: afficheur; display: grid; min-width: 0; align-self: stretch; }
body[data-affichage="disque"] .afficheur { grid-template-columns: auto minmax(0, 1fr); gap: clamp(14px, 2vw, 24px); align-items: center; }
body[data-affichage="disque"] .afficheur > .lcd { display: none; }
body[data-affichage="ecran"] .afficheur > .tiroir, body[data-affichage="ecran"] .afficheur > .etiquette { display: none; }
/* la porte à hublot : on voit le disque tourner ; elle descend quand on change de disque */
.tiroir { position: relative; align-self: center; width: clamp(150px, 17vw, 225px); aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; background: var(--hifi-creux); box-shadow: inset 0 3px 14px rgba(0,0,0,.55); }
.tiroir-plateau { position: absolute; inset: 7%; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, #2b2d32 0 6%, #4b4e55 6.5% 9%, #18191c 9.5% 100%); transition: transform .45s cubic-bezier(.3,.9,.3,1); }
.tiroir-creux { position: absolute; inset: 2%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.disque-tiroir { --d: 210px; width: 96%; }
body.cd-tourne .disque-tiroir { animation: tourne 1.8s linear infinite; }
body[data-vitesse="45"].cd-tourne .disque-tiroir { animation-duration: 1.33s; }
body[data-vitesse="hypno"].cd-tourne .disque-tiroir { animation-duration: 5.5s; }
body[data-vitesse="hypno"] .disque-tiroir::after { /* une spirale qui semble s'enfoncer */
  background: var(--spirale) center / 100% 100% no-repeat;
  mix-blend-mode: overlay; opacity: .6;
}
body[data-vitesse="hypno"] .plateau-reflet { opacity: .8; animation-duration: 9s; }
.tiroir-facade {
  position: absolute; inset: 0; border-radius: inherit;
  background: var(--hifi-porte);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 83%, #000 83.6%);
  mask: radial-gradient(circle closest-side, transparent 0 83%, #000 83.6%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .42s cubic-bezier(.5,0,.3,1);
}
.tiroir::after { /* le verre fumé du hublot */
  content: ""; position: absolute; inset: 8.5%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(100% 100% at 30% 20%, rgba(255,255,255,.22), transparent 38%), radial-gradient(circle, rgba(20,22,28,.18), rgba(10,11,14,.42));
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.35), inset 0 0 0 4px rgba(255,255,255,.07);
  transition: opacity .3s;
}
.tiroir-logo { position: absolute; left: 9%; bottom: 5%; font-size: 8px; font-weight: 700; letter-spacing: .14em; line-height: 1.05; text-transform: uppercase; opacity: .5; }
.tiroir-fente { position: absolute; right: 8%; bottom: 6%; width: 20%; height: 3px; border-radius: 2px; background: rgba(0,0,0,.25); box-shadow: 0 1px 0 rgba(255,255,255,.4); }
.tiroir.ouvert .tiroir-facade { transform: translateY(104%); }
.tiroir.ouvert::after { opacity: 0; }
.tiroir.ouvert .tiroir-plateau { transform: scale(1.06); }
.tiroir.ouvert .disque-tiroir { animation-play-state: paused; }
.tiroir.pose .disque-tiroir { animation: poser .5s cubic-bezier(.2,.9,.3,1.2) both; }
.tiroir.ouvert .plateau-reflet, .tiroir.pose .plateau-reflet { opacity: 0; }
@keyframes poser { from { transform: translateY(-55%) scale(1.2) rotate(-20deg); opacity: 0; } }
/* l'étiquette imprimée sur la façade, à côté du disque */
.etiquette { display: grid; gap: 6px; align-content: center; min-width: 0; color: var(--hifi-encre); }
.etiquette-haut { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .14em; opacity: .55; font-variant-numeric: tabular-nums; }
.etiquette-titre { font-family: var(--display); font-weight: var(--display-poids, 700); letter-spacing: var(--display-interlettre, -0.02em); font-size: clamp(1.2rem, 1.9vw, 1.75rem); line-height: 1.06; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; }
.etiquette-artiste { font-size: clamp(.95rem, 1.2vw, 1.1rem); font-weight: 500; opacity: .8; overflow-wrap: anywhere; }
.etiquette-ensuite { font-size: 13px; opacity: .55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
/* l'écran à cristaux liquides (on le touche : il change de couleur) */
.lcd {
  position: relative; overflow: hidden; min-width: 0; min-height: 200px; align-self: stretch; cursor: pointer;
  display: grid; grid-template-rows: auto auto 1fr auto auto; gap: 8px;
  padding: 16px 18px; border-radius: 10px;
  background: var(--lcd-fond); color: var(--lcd-encre); text-shadow: 0 0 7px var(--lcd-halo);
  font-family: "Doto", ui-monospace, monospace; font-weight: 900; letter-spacing: .04em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 4px 18px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.35);
}
.lcd::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .45; background: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px); }
.lcd::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(162deg, rgba(255,255,255,.09), transparent 38%); }
.lcd.lcd-clic { animation: lcd-clic .3s ease-out; }
@keyframes lcd-clic { 0% { filter: brightness(1.8) contrast(1.2); } }
.lcd-ligne { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; white-space: nowrap; font-size: 14px; }
.lcd-badge { flex: none; padding: 0 6px; border: 1.5px solid currentColor; border-radius: 3px; font-size: 11px; line-height: 1.5; }
.lcd-disque { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lcd-piste { flex: none; }
.lcd-piste b { font-size: 18px; }
.lcd-temps { margin-left: auto; flex: none; font-size: 22px; font-variant-numeric: tabular-nums; }
.lcd-defile { position: relative; overflow: hidden; white-space: nowrap; font-size: 26px; line-height: 1.15; }
.lcd-defile span { display: inline-block; padding-left: 100%; animation: defile 14s linear infinite; }
.lcd-defile.fixe span { padding-left: 0; animation: none; }
@keyframes defile { to { transform: translateX(-100%); } }
body.lecture-disque .lcd-defile span { padding-left: 0; animation: clignote .5s steps(2, jump-none) infinite; }
@keyframes clignote { 50% { opacity: .15; } }
.lcd-spectre { position: relative; display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); gap: 4px; align-items: end; height: 52px; }
.lcd-spectre i { --h: .06; display: block; height: calc(var(--h) * 100%); min-height: 3px; background: repeating-linear-gradient(0deg, currentColor 0 3px, transparent 3px 5px); transition: height .1s linear; }
.lcd-spectre i::before { content: ""; display: block; height: 3px; margin-top: -6px; background: currentColor; opacity: .6; transform: translateY(calc(var(--pic, 0) * -1px)); }
.lcd-suite { font-size: 12px; opacity: .7; }
.lcd-bas { font-size: 12px; opacity: .9; }
.lcd-ensuite { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lcd-etat { margin-left: auto; flex: none; }
/* la couleur de l'écran, l'égaliseur, le rétroéclairage (réglages de « Cosmétique ») */
html[data-lcd="glacier"] { --lcd-encre: #8fdcff; --lcd-halo: rgba(110, 200, 255, .55); }
html[data-lcd="ambre"]   { --lcd-encre: #ffb35c; --lcd-halo: rgba(255, 160, 70, .55); }
html[data-lcd="menthe"]  { --lcd-encre: #8dffc4; --lcd-halo: rgba(90, 255, 170, .5); }
html[data-lcd="rose"]    { --lcd-encre: #ff9bd2; --lcd-halo: rgba(255, 110, 190, .55); }
html[data-lcd="blanc"]   { --lcd-encre: #f4f6ff; --lcd-halo: rgba(230, 236, 255, .45); }
body[data-eq="points"] .lcd-spectre i { display: flex; flex-direction: column; justify-content: flex-start; background: none; }
body[data-eq="points"] .lcd-spectre i::before { height: 4px; border-radius: 2px; opacity: 1; transform: none; margin-top: 0; }
body[data-eq="miroir"] .lcd-spectre { align-items: center; }
body[data-eq="miroir"] .lcd-spectre i { background: currentColor; border-radius: 2px; opacity: .9; }
body[data-eq="miroir"] .lcd-spectre i::before { display: none; }
body[data-eq="eteint"] .lcd-spectre { visibility: hidden; }
body[data-dimmer="2"] .lcd { filter: brightness(.72) saturate(.9); }
body[data-dimmer="1"] .lcd { filter: brightness(.45) saturate(.8); text-shadow: none; }
/* la vidéo, à côté de l'afficheur */
.emplacement-ecran {
  position: relative; overflow: hidden; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--rayon-ecran);
  background: var(--verre-fond);
  box-shadow: inset 0 2px 10px rgba(0,0,0,.5), 0 0 0 1px var(--trait);
}
@supports not (aspect-ratio: 16 / 9) { .emplacement-ecran::before { content: ""; display: block; padding-top: 56.25%; } }
.emplacement-cd { grid-area: ecran; align-self: center; min-height: 200px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.35); }
body:not(.video-machine) .emplacement-cd { display: none; }

/* les commandes : la lecture, ton avis sur le morceau (j'aime / pas trop), le volume */
.hifi-commandes { grid-area: commandes; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 18px; padding-top: 16px; border-top: 1px solid var(--hifi-trait); }
.transport { display: flex; align-items: center; gap: 10px; }
.rond {
  width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; flex: none;
  color: var(--hifi-encre); background: var(--hifi-bouton); box-shadow: var(--hifi-bouton-ombre);
  transition: transform .08s, box-shadow .08s;
}
.rond:active { transform: translateY(2px) scale(.97); box-shadow: var(--hifi-bouton-enfonce); }
.rond-lecture { width: 64px; height: 64px; background: var(--hifi-bouton-fort); color: var(--hifi-sur-fort); }
.icone {
  display: block; width: 0; height: 0; margin-left: 3px;
  border-left: 12px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
.icone.pause { width: 12px; height: 14px; margin-left: 0; border: 0; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.icone-prec, .icone-suiv { position: relative; border-left-width: 10px; }
.icone-prec { transform: scaleX(-1); }
.icone-prec::after, .icone-suiv::after { content: ""; position: absolute; left: 0; top: -7px; width: 3px; height: 14px; background: currentColor; }
.icone-stop { width: 12px; height: 12px; background: currentColor; border-radius: 1px; }
.hifi-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pilule {
  min-height: 42px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  font-weight: 600; font-size: 14px; color: var(--hifi-encre); background: var(--hifi-bouton); box-shadow: var(--hifi-bouton-ombre);
  transition: transform .08s, box-shadow .08s, color .2s;
}
.pilule:active { transform: translateY(2px); box-shadow: var(--hifi-bouton-enfonce); }
.pilule-coeur .pilule-icone { font-size: 15px; line-height: 1; }
.pilule-coeur.est-garde { color: var(--aiguille); }
.pouce { width: 16px; height: 16px; flex: none; }
/* le volume : un curseur, comme une table de mixage */
.fader { display: grid; justify-items: center; gap: 4px; margin-left: auto; }
.fader input { -webkit-appearance: none; appearance: none; width: 150px; height: 28px; background: transparent; cursor: pointer; --v: 60%; }
.fader input::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--lcd-encre) var(--v), var(--hifi-creux) var(--v)); box-shadow: inset 0 1px 2px rgba(0,0,0,.5); }
.fader input::-moz-range-track { height: 6px; border-radius: 3px; background: var(--hifi-creux); }
.fader input::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--lcd-encre); }
.fader input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 28px; margin-top: -11px; border-radius: 4px; background: repeating-linear-gradient(0deg, rgba(0,0,0,.2) 0 1px, transparent 1px 3px), linear-gradient(#f3f4f6, #b9bdc4); box-shadow: 0 2px 5px rgba(0,0,0,.45), inset 0 1px 0 #fff; }
.fader input::-moz-range-thumb { width: 18px; height: 28px; border: 0; border-radius: 4px; background: linear-gradient(#f3f4f6, #b9bdc4); box-shadow: 0 2px 5px rgba(0,0,0,.45); }
.fader-nom { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--hifi-encre); opacity: .6; }
.ios .fader { display: none; }

/* ─── « Cosmétique » : des petits réglages inutiles, qui se déplient d'un bouton de la chaîne ─── */
.trappe { grid-area: trappe; display: none; gap: 8px; }
body.cosmetique .trappe { display: grid; animation: trappe .38s cubic-bezier(.2,.9,.3,1.15) both; transform-origin: top; }
@keyframes trappe { from { transform: perspective(600px) rotateX(-70deg); opacity: 0; } }
.trappe-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.trappe-titre { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; opacity: .55; padding-top: 4px; }
.trappe-fermer { width: 32px; height: 32px; border-radius: 50%; font-size: 20px; line-height: 1; color: var(--hifi-encre); background: var(--hifi-bouton); box-shadow: var(--hifi-bouton-ombre); }
.trappe-panneau {
  display: flex; flex-wrap: wrap; align-items: end; gap: 16px 28px; padding: 16px 18px 18px; border-radius: 12px;
  background: var(--hifi-creux); color: #e9eaee; box-shadow: inset 0 3px 12px rgba(0,0,0,.5);
}
.bidouille { display: grid; gap: 8px; }
.bidouille-ligne { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bidouille-nom { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .6; }
.leds { display: flex; gap: 9px; }
.led-choix { --c: #888; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--c) 40%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 60%, #000)); box-shadow: 0 0 0 2px #0b0c0e, 0 1px 0 3px rgba(255,255,255,.08); transition: transform .12s, box-shadow .2s; }
.led-choix:hover { transform: scale(1.1); }
.led-choix:active { transform: scale(.9); }
.led-choix[aria-checked="true"] { box-shadow: 0 0 0 2px #0b0c0e, 0 0 0 4px var(--c), 0 0 14px 3px var(--c); }
.led-choix[data-val="origine"] { --c: #9aa0a8; background: conic-gradient(#8fdcff 0 50%, #ffb35c 50%); }
.led-choix[data-val="glacier"] { --c: #8fdcff; } .led-choix[data-val="ambre"] { --c: #ffb35c; } .led-choix[data-val="menthe"] { --c: #8dffc4; }
.led-choix[data-val="rose"] { --c: #ff9bd2; } .led-choix[data-val="blanc"] { --c: #f4f6ff; }
.segments { display: inline-flex; padding: 3px; border-radius: 9px; background: #0b0c0e; gap: 2px; }
.segments button { min-height: 32px; padding: 0 11px; border-radius: 6px; font-size: 12px; font-weight: 600; color: #b9bcc4; transition: background-color .15s, color .15s; }
.segments button[aria-checked="true"] { background: linear-gradient(#4a4d55, #34363c); color: var(--lcd-encre); text-shadow: 0 0 6px var(--lcd-halo); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 2px 4px rgba(0,0,0,.4); }
.glissiere { --pos: 0; position: relative; display: grid; grid-template-columns: repeat(3, 56px); height: 34px; border-radius: 17px; background: #0b0c0e; box-shadow: inset 0 2px 5px rgba(0,0,0,.6); }
.glissiere button { position: relative; z-index: 1; font-size: 12px; font-weight: 700; color: #8d9098; transition: color .2s; }
.glissiere button[aria-checked="true"] { color: #111; }
.glissiere-curseur { position: absolute; top: 3px; left: 3px; width: 50px; height: 28px; border-radius: 14px; background: repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 1px, transparent 1px 3px), linear-gradient(#f3f4f6, #b9bdc4); box-shadow: 0 2px 4px rgba(0,0,0,.5), inset 0 1px 0 #fff; transform: translateX(calc(var(--pos) * 56px)); transition: transform .28s cubic-bezier(.3,1.4,.5,1); }
.interrupteur-mini { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #d9dbe0; background: linear-gradient(#3e4148, #2a2c31); box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 3px 0 #0b0c0e, 0 4px 6px rgba(0,0,0,.4); transition: transform .08s, box-shadow .08s; }
.interrupteur-mini:active, .interrupteur-mini[aria-pressed="true"] { transform: translateY(2px); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 1px 0 #0b0c0e, 0 1px 2px rgba(0,0,0,.4); }
.interrupteur-mini .led { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #3a1714; transition: background .2s, box-shadow .2s; }
.interrupteur-mini[aria-pressed="true"] .led { background: #ff5a3c; box-shadow: 0 0 8px 1px rgba(255,90,60,.8); }

/* ─── la pile : trois disques posés sur l'étagère, sous la chaîne ───
   Au milieu, celui qui s'enchaîne le mieux ; de chaque côté, un pas sur une échelle
   (étiquette scotchée). Le disque choisi passe ensuite. Sans vraie pochette, une pochette
   maison : une image de la vidéo en bichromie, le titre composé en grand. */
.tuner {
  grid-area: tuner; position: relative; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px;
  padding: 14px 0 0; color: var(--encre);
}
.pile-haut { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 0 4px; }
.pile-titre { font-family: var(--etiquette); font-weight: 700; font-stretch: 88%; letter-spacing: .04em; text-transform: uppercase; font-size: 14px; line-height: 1.2; }
/* la radio ou ta sélection : le sélecteur « FUNCTION » des chaînes */
.sources { margin-left: auto; display: inline-flex; padding: 3px; border-radius: 9px; background: var(--hifi-creux); box-shadow: inset 0 1px 3px rgba(0,0,0,.5); }
.source-choix { min-height: 30px; padding: 0 12px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9a9da5; white-space: nowrap; transition: background-color .15s, color .15s; }
.source-choix b { margin-left: 4px; letter-spacing: 0; opacity: .8; }
.source-choix[aria-pressed="true"] { background: linear-gradient(#4a4d55, #34363c); color: var(--lcd-encre); text-shadow: 0 0 6px var(--lcd-halo); }

.pile-disques {
  --boite: min(184px, 24vh);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; justify-items: center;
  gap: clamp(10px, 3vw, 40px); padding: 40px 2% 58px; min-height: 140px;
}
.disque-pile {
  position: relative; display: grid; justify-items: center; gap: 10px; width: 100%; max-width: var(--boite);
  transform: rotate(var(--penche, 0deg)); transition: transform .3s cubic-bezier(.2,.9,.3,1.25);
}
.pile-disques.repose .disque-pile { animation: pile-pose .5s cubic-bezier(.2,.9,.3,1.2) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes pile-pose { from { opacity: 0; transform: translateY(-26px) rotate(calc(var(--penche) * 3)); } }
@media (hover: hover) { .disque-pile:hover { transform: translateY(-7px) rotate(0deg); } }
.pile-boite {
  position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 3px 6px 6px 3px;
  background: #121216; box-shadow: 0 16px 24px -12px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.28);
  transition: box-shadow .2s;
}
.pile-boite .pochette-pile { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; }
.pile-boite .pochette-pile .pochette-repli { display: none; }
.pile-boite::before { /* la charnière du boîtier */
  content: ""; position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: 8%; border-radius: 3px 0 0 3px;
  background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(255,255,255,.14) 60%, rgba(0,0,0,.3));
}
.pile-reflet { position: absolute; z-index: 2; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.32), rgba(255,255,255,0) 38%); }
.pile-scotch {
  position: absolute; z-index: 3; top: -13px; left: 50%; max-width: 112%; transform: translateX(-50%) rotate(-3deg);
  padding: 4px 10px 3px; border-radius: 2px; background: linear-gradient(180deg, #2b2b31, #151518); box-shadow: 0 2px 5px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12);
  font-family: var(--mono); font-weight: 600; font-size: 11px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: #f1eee6; white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255,255,255,.22), 0 -1px 0 rgba(0,0,0,.7);   /* les lettres en relief de l'étiqueteuse */
}
.disque-pile:nth-child(2) .pile-scotch { transform: translateX(-50%) rotate(2deg); }
.disque-pile:nth-child(3) .pile-scotch { transform: translateX(-50%) rotate(-1.5deg); }
/* la pochette maison */
.pile-boite { container-type: inline-size; }
.maison { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; display: grid; text-align: left; }
.maison-cadre { position: relative; overflow: hidden; }
.maison-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.3) brightness(1.08); mix-blend-mode: multiply; }
.maison-titre { font-family: var(--etiquette); font-weight: 700; font-stretch: 88%; text-transform: uppercase; line-height: .98; letter-spacing: -.01em; font-size: calc(var(--t) * 1cqw); overflow-wrap: break-word; }
.maison-artiste { font-family: var(--texte); font-weight: 600; font-size: 5.6cqw; letter-spacing: .06em; text-transform: uppercase; line-height: 1.15; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* 1. bleue : la photo en haut, un aplat de couleur, le titre en grand (façon jazz des années 60) */
.maison-bleue { grid-template-rows: 52% 1fr auto; background: hsl(var(--h) 62% 34%); color: #fff; }
.maison-bleue .maison-cadre { background: hsl(var(--h) 70% 62%); margin-left: 8%; }
.maison-bleue .maison-titre { align-self: center; padding: 6% 9% 0 14%; }
.maison-bleue .maison-artiste { padding: 0 9% 9% 14%; color: hsl(var(--h) 90% 86%); }
/* 2. blanche : beaucoup de blanc, une petite photo grise, le titre discret (façon label de musique savante) */
.maison-blanche { grid-template-rows: auto 1fr auto; gap: 7%; padding: 12% 11% 11% 17%; background: #efede7; color: #1d1d22; }
.maison-blanche .maison-artiste { order: -1; font-size: 5cqw; letter-spacing: .2em; color: #6a675f; }
.maison-blanche .maison-cadre { background: #cfccc4; }
.maison-blanche .maison-photo { filter: grayscale(1) contrast(1.1) brightness(1.15); }
.maison-blanche .maison-titre { font-family: var(--texte); font-weight: 600; text-transform: none; letter-spacing: 0; line-height: 1.02; font-size: calc(var(--tb) * 1cqw); }
/* 3. bandeau : la photo en grand, colorée, le titre sur des bandes blanches */
.maison-bandeau { grid-template-rows: 1fr auto auto; background: #111; color: #111; }
.maison-bandeau .maison-cadre { position: absolute; inset: 0; background: hsl(var(--h) 85% 58%); }
.maison-bandeau .maison-titre { position: relative; align-self: end; padding: 0 8% 0 14%; }
.maison-bandeau .maison-titre span { background: #fff; padding: .06em .22em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.maison-bandeau .maison-artiste { position: relative; margin: 4% 8% 9% 14%; justify-self: start; padding: .2em .5em; background: #111; color: #fff; max-width: 78%; }
.pile-morceau { display: grid; gap: 1px; width: 100%; text-align: center; line-height: 1.25; min-width: 0; }
.pile-titre-m, .pile-artiste { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.pile-titre-m { font-weight: 600; font-size: 15px; }
.pile-artiste { font-size: 13px; color: var(--encre-2); }
/* le disque choisi : entouré, avec « ensuite » au-dessus et de quoi l'écouter tout de suite */
.disque-pile.choisi .pile-boite { box-shadow: 0 16px 24px -12px rgba(0,0,0,.55), 0 0 0 3px var(--fond), 0 0 0 6px var(--aiguille); }
.disque-pile.choisi::before {
  content: "Ensuite"; position: absolute; z-index: 4; top: -42px; left: 50%; transform: translateX(-50%);
  padding: 3px 9px; border-radius: 999px; background: var(--aiguille); color: var(--sur-aiguille, #fff);
  font-family: var(--etiquette); font-weight: 700; font-stretch: 88%; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
.pile-maintenant {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600; white-space: nowrap; background: var(--encre); color: var(--fond);
  box-shadow: 0 6px 14px -6px rgba(0,0,0,.4); animation: pile-bouton .3s ease both;
}
.pile-maintenant .icone-suiv { margin-left: 0; }
@keyframes pile-bouton { from { opacity: 0; transform: translate(-50%, -4px); } }
.pile-boite:focus-visible { outline: 3px solid var(--aiguille); outline-offset: 5px; }
.pile-vide { grid-column: 1 / -1; align-self: center; font-size: 15px; color: var(--encre-2); text-align: center; }
.pile-pied { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px 8px; font-size: 13px; color: var(--encre-2); }
.pile-flemme { font-size: 14px; color: var(--encre-2); text-align: left; }
.pile-flemme u { color: var(--encre); font-weight: 600; text-underline-offset: 3px; }
.pile-flemme:hover u { color: var(--aiguille); }
.pile-autres {
  flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 16px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--encre); border: 1.5px solid var(--trait);
  transition: border-color .15s, color .15s;
}
.pile-autres span { font-size: 16px; }
.pile-autres:hover { border-color: var(--encre); }
/* le pilote automatique : la pile se range, la radio enchaîne */
.pilote {
  grid-column: 1 / -1; justify-self: stretch; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px;
  background: var(--hifi-corps); color: var(--hifi-encre); box-shadow: var(--hifi-ombre);
}
.pilote-led { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #4bd37b; box-shadow: 0 0 8px 2px rgba(75, 211, 123, .7); animation: pilote 2s ease-in-out infinite; }
@keyframes pilote { 50% { opacity: .45; } }
.pilote-textes { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: 14px; line-height: 1.35; }
.pilote-textes b { font-family: var(--etiquette); font-weight: 700; font-stretch: 88%; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.pilote-textes span { opacity: .8; }
.pilote-stop { flex: none; min-height: 38px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--hifi-bouton); color: var(--hifi-encre); box-shadow: var(--hifi-bouton-ombre); }
.tuner.en-auto .pile-disques { padding: 18px 0 14px; min-height: 0; }

/* ─── le mot d'Amélien : une fiche de disquaire, punaisée sur l'enceinte de droite (placée en JS) ─── */
.post-it {
  --penche: -1.4deg;
  position: absolute; z-index: 4; right: -14px; top: 8%;
  width: 216px; padding: 24px 18px 18px; border-radius: 2px;
  background: linear-gradient(176deg, #fcfaf4, #f1ebde);
  color: #1d1a16; box-shadow: 0 16px 26px -10px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.12), inset 0 0 0 1px rgba(60,40,20,.08);
  transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--penche)); transform-origin: 50% 0;
}
.post-it-scotch { position: absolute; top: 7px; left: 50%; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%;   /* la punaise */
  background: radial-gradient(circle at 35% 30%, #ff8f73, #c8361f 55%, #7d1c0e); box-shadow: 0 3px 4px rgba(0,0,0,.35); }
.post-it-texte { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 20px; line-height: 1.16; letter-spacing: -.005em; overflow-wrap: break-word; hyphens: manual; text-wrap: pretty; }
.post-it.long .post-it-texte { font-size: 17px; }
.post-it-signe { display: none; }
.post-it.colle { animation: colle .6s cubic-bezier(.2,.9,.3,1.25) both; }
@keyframes colle { from { opacity: 0; transform: translateY(-26px) rotate(calc(var(--penche) - 9deg)) scale(1.06); } }
/* on le décolle, on le recolle ailleurs (double-clic : il revient) */
.post-it.souleve { cursor: grabbing; z-index: 30; transition: box-shadow .15s; box-shadow: 0 28px 40px -10px rgba(0,0,0,.45), 0 4px 8px rgba(0,0,0,.15); transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(calc(var(--penche) * 2.2)) scale(1.04); }
@media (min-width: 1240px) {
  .post-it { width: 196px; }
  .hifi > .post-it { cursor: grab; touch-action: none; user-select: none; }
}
/* écran moyen ou petit : le post-it se colle au bas de la chaîne, juste avant les disques */
@media (max-width: 1239px) {
  .hifi { grid-template-areas: "g corps d" "g postit d" "g tuner d"; }
  .hifi .post-it { grid-area: postit; position: relative; z-index: 5; right: auto; top: auto; justify-self: end; width: auto; max-width: min(380px, 86%); margin: -26px 6% 0 0; }
}

/* ─── sous la chaîne : « Des pubs ? » une fois, et l'extrait quand YouTube refuse ─── */
.avis-pub {
  display: grid; gap: 6px 12px; width: 100%; max-width: 720px; padding: 10px 14px; border-radius: 12px;
  font-size: 14px; border: 1px dashed var(--trait); animation: sortie .45s cubic-bezier(.2,.9,.3,1.1);
}
.avis-titre { font-family: var(--texte); font-weight: 700; font-size: 14px; line-height: 1.1; color: var(--encre); }
.avis-pub p { line-height: 1.45; }
.avis-pub p:not(.avis-titre) { color: var(--encre-2); }
.avis-actions { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin-top: 2px; }
.avis-pub .gros-bouton { min-height: 32px; padding: 0 14px; font-size: 13px; box-shadow: none; }
.avis-pub .lien-bouton { font-size: 13px; }
.avis-machine { justify-self: center; max-width: 980px; margin-bottom: -10px; padding: 10px 12px 10px 16px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 16px; }
.avis-machine .avis-titre, .avis-machine p { grid-column: 1; }
.avis-machine .avis-actions { grid-column: 2; grid-row: 1 / span 2; margin: 0; flex-wrap: nowrap; }
@media (max-width: 640px) { .avis-machine { grid-template-columns: minmax(0, 1fr); } .avis-machine .avis-actions { grid-column: 1; grid-row: auto; flex-wrap: wrap; } }
.machine-source { margin-top: -14px; font-size: 14px; color: var(--encre-2); text-align: center; }

/* ─────────────────────────────── L'ÉCRAN VIDÉO ───────────────────────────────
   Une seule vidéo, posée sur la chaîne ; quand on descend, elle reste à sa place
   et la musique continue. */
.ecran-video {
  position: fixed; top: 0; left: 0; z-index: 36;
  overflow: hidden; border-radius: var(--rayon-ecran);
  background: #000;
  will-change: transform;
}
.ecran-video #yt-lecteur, .ecran-video iframe { width: 100%; height: 100%; display: block; border: 0; }
.ecran-video.cache { visibility: hidden; pointer-events: none; transform: translate(-200vw, 0) !important; width: 320px !important; height: 180px !important; }

/* ─────────────────────────────── LE LIVRET (« Plus d'infos ») ───────────────────────────────
   Comme le livret d'un CD : l'album, l'artiste, et où écouter le morceau en entier. */
.livret { width: 100%; padding-top: 24px; border-top: 1px solid var(--trait); scroll-margin-top: 92px; }
.livret-machine { position: relative; max-width: 1100px; margin-top: 10px; }
.livret-bouton { display: flex; align-items: center; gap: 18px; text-align: left; padding: 4px 0; max-width: 100%; }
.livret-icone { position: relative; flex: none; width: 54px; height: 44px; }
.livret-icone::before, .livret-icone::after {
  content: ""; position: absolute; top: 3px; bottom: 3px; width: 26px;
  background: var(--fond-3); box-shadow: 0 3px 8px rgba(0,0,0,.18), inset 0 0 0 1px var(--trait);
  transition: transform .35s cubic-bezier(.2,.9,.3,1.2);
}
.livret-icone::before { left: 1px; border-radius: 3px 0 0 3px; transform: perspective(80px) rotateY(28deg); transform-origin: right center; }
.livret-icone::after { right: 1px; border-radius: 0 3px 3px 0; transform: perspective(80px) rotateY(-28deg); transform-origin: left center; }
.livret-icone span { position: absolute; z-index: 1; left: 50%; top: 5px; bottom: 5px; width: 1px; background: var(--encre-3); }
.livret-bouton:hover .livret-icone::before, .livret.ouvert .livret-icone::before,
.livret-bouton:hover .livret-icone::after, .livret.ouvert .livret-icone::after { transform: none; }
.livret-bouton-texte { display: grid; gap: 2px; min-width: 0; }
.livret-bouton-texte strong { font-family: var(--display); font-weight: var(--display-poids); font-stretch: var(--display-etirement, 100%); letter-spacing: var(--display-interlettre, -0.02em); font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1.1; }
.livret-bouton-texte span { color: var(--encre-2); font-size: 15px; overflow-wrap: anywhere; }
.livret-bouton:hover strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.livret-fermer { position: absolute; top: 18px; right: 0; width: 40px; height: 40px; border-radius: 50%; font-size: 22px; line-height: 1; background: var(--fond-2); box-shadow: var(--relief); }
.livret-genre { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--aiguille); margin: 14px 0 -6px; }
.livret-chronique { margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--encre-2); max-width: 52ch; min-height: 1.5em; opacity: 0; transition: opacity .5s; }
.livret-chronique.pret { opacity: 1; }
.chronique-source { display: inline-block; margin-left: 4px; font-size: 13px; color: var(--encre-2); text-decoration: underline; text-decoration-color: var(--encre-3); text-underline-offset: 3px; white-space: nowrap; }
.livret-pages {
  position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 22px; border-radius: 6px;
  background: var(--fond-3); box-shadow: var(--relief-fort);
  animation: sortie .45s cubic-bezier(.2,.9,.3,1.1) both;
}
/* la pliure au milieu du livret */
.livret-pages::before { content: ""; position: absolute; top: 20px; bottom: 20px; left: 50%; width: 1px; background: var(--trait); box-shadow: 0 0 22px 6px rgba(0,0,0,.05); }
.livret-page { padding: clamp(20px, 3vw, 36px); min-width: 0; }
.livret-album, .livret-artiste { display: grid; gap: 14px; align-content: start; }
.livret-nom { font-family: var(--display); font-weight: var(--display-poids); font-stretch: var(--display-etirement, 100%); letter-spacing: var(--display-interlettre, -0.02em); font-size: clamp(1.2rem, 2vw, 1.65rem); line-height: 1.1; overflow-wrap: anywhere; }
.livret-phrase { margin-top: 6px; color: var(--encre-2); }
.livret-album-tete { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 18px; align-items: center; }
.pochette-livret { width: 104px; }
.livret-wiki { display: grid; gap: 8px; justify-items: start; }
.livret-wiki p, .livret-texte { max-width: 62ch; }
.pistes { list-style: none; counter-reset: piste; margin: 0; padding: 0; display: grid; gap: 1px; font-size: 15px; font-variant-numeric: tabular-nums; max-height: 360px; overflow-y: auto; }
.pistes-aide { font-size: 13px; color: var(--encre-2); }
.pistes li { counter-increment: piste; display: grid; grid-template-columns: 2em minmax(0, 1fr); gap: 6px; align-items: center; border-radius: 4px; }
.pistes li::before { content: counter(piste); color: var(--encre-2); text-align: right; }
.piste-btn { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; width: 100%; padding: 5px 8px 5px 4px; border-radius: 4px; text-align: left; }
button.piste-btn:hover { background: var(--fond-2); }
.piste-note { font-size: 12px; font-weight: 600; color: var(--aiguille); }
.piste-ecoute { color: var(--encre-2); font-weight: 500; opacity: 0; transition: opacity .15s; }
button.piste-btn:hover .piste-ecoute, .pistes li.ecoute .piste-ecoute { opacity: 1; color: var(--aiguille); }
.pistes li.ecoute .piste-btn { background: var(--fond-2); box-shadow: inset 3px 0 0 var(--aiguille); }
.piste-titre { overflow-wrap: anywhere; }
.piste-duree { color: var(--encre-2); }
.pistes li.ici { background: var(--aiguille); color: var(--sur-aiguille); font-weight: 600; }
.pistes li.ici .piste-btn { cursor: default; }
.pistes li.ici::before, .pistes li.ici .piste-duree, .pistes li.ici .piste-note { color: inherit; }
.livret-artiste-tete { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.livret-photo { width: 88px; height: 88px; object-fit: cover; border-radius: 50%; box-shadow: var(--ombre-pochette); }
.livret-liens { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.livret-liens .lien-bouton, .livret-paroles .lien-bouton { font-size: 14px; }
.livret-vide, .livret-attente { color: var(--encre-2); max-width: 50ch; }
.livret-ailleurs { display: grid; gap: 10px; margin-top: 24px; }
.livret-ailleurs-titre { font-weight: 600; }
/* écouter en entier ailleurs, légalement */
.ailleurs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; }
.ailleurs a { padding: 7px 13px; border-radius: 999px; background: var(--fond-2); box-shadow: var(--relief); color: var(--encre); font-weight: 600; text-decoration: none; transition: box-shadow .15s; }
.ailleurs a:hover { box-shadow: var(--relief), 0 0 0 2px var(--aiguille); }

/* ─────────────────────────────── MA SÉLECTION + RÉGLAGES (panneaux) ─────────────────────────────── */
.voile { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.35); opacity: 0; transition: opacity .3s; }
body.panneau-ouvert .voile { opacity: 1; }
.bac, .reglages {
  position: fixed; z-index: 51; top: 0; right: 0; bottom: 0;
  width: min(440px, 100vw);
  background: var(--fond); color: var(--encre);
  box-shadow: -20px 0 60px rgba(0,0,0,.35);
  display: grid; grid-template-rows: auto auto 1fr auto auto;
  transform: translateX(105%);
  transition: transform .32s cubic-bezier(.2,.9,.3,1);
  padding-bottom: env(safe-area-inset-bottom);
}
body.panneau-ouvert .bac, body.panneau-ouvert .reglages { transform: none; }
.reglages { grid-template-rows: auto auto auto 1fr; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.bac-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 22px 22px 8px; }
.bac-tete h2 { font-size: 2rem; }
.bac-explication { margin-top: 6px; font-size: 14px; color: var(--encre-2); max-width: 34ch; }
.onglets { display: flex; gap: 6px; padding: 8px 22px 12px; }
.onglet { padding: 8px 16px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--encre-2); }
.onglet[aria-selected="true"] { background: var(--encre); color: var(--fond); }
.bac-liste { list-style: none; margin: 0; padding: 4px 14px 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; display: grid; gap: 4px; align-content: start; }
.bac-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.bac-morceau { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; text-align: left; padding: 6px 8px; border-radius: 8px; min-width: 0; }
.bac-morceau > span { min-width: 0; }
.bac-morceau .pochette-mini { width: 52px; }
.bac-titre { display: block; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bac-artiste { display: block; font-size: 14px; color: var(--encre-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bac-morceau:hover { background: var(--fond-2); }
.bac-garder { width: 40px; height: 40px; border-radius: 50%; font-size: 20px; font-weight: 600; color: var(--encre-2); }
.bac-garder:hover { background: var(--fond-2); color: var(--encre); }
.bac-garder.est-garde { color: var(--aiguille); }
.bac-vide { padding: 24px 10px; color: var(--encre-2); max-width: 34ch; }
.bac-pied { padding: 16px 22px 18px; border-top: 1px solid var(--trait); display: grid; gap: 14px; }
.bac-pied-liens { display: flex; flex-wrap: wrap; gap: 8px 22px; }
/* ma sélection : des boîtiers de CD sur l'étagère (le disque sort au survol, le cœur retire) */
.bac-liste.etagere { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 14px; padding: 18px 20px 26px; }
.boitier { position: relative; min-width: 0; transform: rotate(var(--incl, 0deg)); transition: transform .35s cubic-bezier(.2,.9,.3,1.25); }
.boitier:hover, .boitier:focus-within { transform: translateY(-5px) rotate(0deg); z-index: 2; }
.boitier-morceau { display: grid; gap: 1px; width: 100%; text-align: left; border-radius: 6px; }
.boitier-cd { position: relative; display: block; margin-bottom: 8px; }
.boitier-etui { position: relative; display: block; border-radius: 3px 5px 5px 3px; overflow: hidden; background: #111; box-shadow: 0 8px 14px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.35) inset; z-index: 1; }
.boitier-etui .pochette { width: 100%; display: block; border-radius: 0; box-shadow: none; }
.boitier-dos { position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: 9%; background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(255,255,255,.18) 70%, rgba(0,0,0,.25)); }
.boitier-reflet { position: absolute; z-index: 2; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,0) 72%, rgba(255,255,255,.12) 100%); pointer-events: none; }
.boitier-disque { position: absolute; z-index: 0; top: 7%; bottom: 7%; right: 2%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--fond) 0 11%, transparent 12%), conic-gradient(from 20deg, #e9e9ee, #b9bfd0, #f4f1ec, #c9b9d4, #e9e9ee); box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform .45s cubic-bezier(.2,.9,.3,1.25); }
.boitier:hover .boitier-disque, .boitier:focus-within .boitier-disque { transform: translateX(26%); }
.boitier-titre { display: block; font-weight: 600; font-size: 13px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boitier-artiste { display: block; font-size: 12px; color: var(--encre-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boitier-retirer { position: absolute; z-index: 3; top: -9px; right: -7px; width: 28px; height: 28px; border-radius: 50%; font-size: 14px; line-height: 1; color: var(--aiguille); background: var(--fond); box-shadow: var(--relief), 0 0 0 1px var(--trait); opacity: 0; transform: scale(.8); transition: opacity .15s, transform .15s; }
.boitier:hover .boitier-retirer, .boitier:focus-within .boitier-retirer { opacity: 1; transform: none; }
@media (hover: none) { .boitier-retirer { opacity: 1; transform: none; } }
/* « Repartir avec une cassette » */
.cassette-bloc { display: flex; align-items: center; gap: 14px; }
.cassette { position: relative; flex: none; width: 54px; height: 36px; border-radius: 5px; background: linear-gradient(#e9e4d8, #cfc8b8); box-shadow: 0 3px 8px rgba(0,0,0,.25), inset 0 0 0 1px rgba(0,0,0,.18); display: flex; align-items: center; justify-content: space-around; padding: 0 9px; transform: rotate(-4deg); }
.cassette::before { content: ""; position: absolute; left: 7px; right: 7px; top: 5px; height: 9px; border-radius: 2px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.cassette::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 7px; border-radius: 3px 3px 0 0; background: rgba(0,0,0,.3); }
.cassette i { position: relative; z-index: 1; width: 11px; height: 11px; margin-top: 10px; border-radius: 50%; background: #2a2a2e; box-shadow: 0 0 0 2px #f4f1ea inset; }
.cassette-titre { font-weight: 700; font-size: 15px; line-height: 1.2; }
.cassette-sous { font-size: 13px; color: var(--encre-2); line-height: 1.35; margin-top: 2px; }
/* réglages : comment écouter, teinte du site */
.reglage-son, .reglage-teinte { padding: 10px 22px 20px; }
.reglage-son { display: grid; gap: 8px; margin-bottom: 14px; }
.reglage-titre { font-weight: 600; margin-bottom: 4px; }
.choix-son { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--trait); }
.choix-son span { font-size: 14px; color: var(--encre-2); }
.choix-son[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--aiguille); background: var(--fond-2); }
.reglage-note { font-size: 14px; color: var(--encre-2); margin-top: 4px; }

/* ─────────────────────────────── MESSAGES ─────────────────────────────── */
.toast {
  position: fixed; left: 50%; top: 92px; z-index: 60;
  transform: translate(-50%, -10px); opacity: 0; pointer-events: none;
  max-width: min(92vw, 520px); text-align: center;
  padding: 12px 20px; border-radius: 16px;
  background: var(--encre); color: var(--fond); font-weight: 500; font-size: 15px;
  transition: opacity .25s, transform .3s cubic-bezier(.2,.9,.3,1.2);
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
/* ouvert depuis Instagram, TikTok, Messenger… : on propose le vrai navigateur */
.avis-appli {
  position: fixed; z-index: 45; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  max-width: 560px; margin: 0 auto; display: grid; gap: 12px; padding: 16px 18px; border-radius: 18px;
  background: var(--encre); color: var(--fond); box-shadow: 0 20px 50px rgba(0,0,0,.35);
  animation: sortie .5s cubic-bezier(.2,.9,.3,1.1) both;
}
.avis-appli p { font-size: 15px; line-height: 1.4; }
.avis-appli-actions { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.avis-appli .gros-bouton { min-height: 44px; padding: 0 18px; background: var(--fond); color: var(--encre); box-shadow: none; text-decoration: none; }
.avis-appli .gros-bouton-plein { background: var(--aiguille); color: var(--sur-aiguille); }
.avis-appli .lien-bouton { color: inherit; opacity: .75; }

/* ─────────────────────────────── ORDINATEUR ─────────────────────────────── */
@media (max-width: 1200px) { #teintes-facade { display: none; } }

@media (min-width: 1100px) and (max-height: 860px) {
  .ecran-machine { padding-top: 10px; }
  .hifi-corps { padding: 18px 22px; gap: 12px 20px; }
  body.video-machine .hifi-corps { grid-template-columns: minmax(0, 1fr) minmax(0, 356px); }
  .hifi-haut { padding-bottom: 10px; }
  .hifi-commandes { padding-top: 12px; }
}
/* portables : des enceintes un peu plus fines, pour laisser la place aux réglages */
@media (min-width: 1100px) and (max-width: 1439px) {
  .hifi { grid-template-columns: minmax(96px, 150px) minmax(0, 980px) minmax(96px, 150px); }
  .hifi-commandes { column-gap: 14px; }
  .fader input { width: 120px; }
}

@media (min-width: 1100px) and (max-height: 760px) {
  .facade-haut { height: 64px; }
  #scene { padding-top: 64px; }
  .toast { top: 76px; }
  .ecran-machine { padding-top: 8px; }
  .hifi-corps { padding: 14px 20px; gap: 10px 18px; }
  .hifi-haut { padding-bottom: 8px; }
  .hifi-commandes { padding-top: 10px; }
  .rond-lecture { width: 58px; height: 58px; }
}

/* ─────────────────────────────── TABLETTE ─────────────────────────────── */
@media (max-width: 1099px) {
  /* les enceintes s'effacent : la place va au lecteur, l'écran et la vidéo restent côte à côte */
  .hifi { grid-template-columns: minmax(0, 1fr); grid-template-areas: "corps" "postit" "tuner"; max-width: 980px; }
  .hifi-enceinte { display: none; }
}
@media (max-width: 860px) {
  body.video-machine .hifi-corps { grid-template-columns: minmax(0, 1fr); grid-template-areas: "haut" "afficheur" "ecran" "commandes" "trappe"; }
  .emplacement-cd { justify-self: center; width: min(100%, 480px); }
  .hifi-modele { display: none; }
  .hifi-commandes { column-gap: 12px; }
  .transport { gap: 8px; }
  .fader { flex: 1 1 100px; }
  .fader input { width: 100%; }
}
@media (max-width: 760px) {
  .livret-pages { grid-template-columns: minmax(0, 1fr); }
  .livret-pages::before { display: none; }
  .livret-page + .livret-page { border-top: 1px solid var(--trait); }
  .hifi-corps { gap: 12px; padding: 14px; border-radius: 18px; }
  .hifi-modele, .hifi-veille { display: none; }
  .tiroir { width: 104px; border-radius: 12px; }
  .tiroir-logo, .tiroir-fente { display: none; }
  .etiquette-titre { font-size: 1.2rem; }
  .etiquette-ensuite { display: none; }
  .lcd { padding: 10px 12px; gap: 6px; grid-template-rows: auto auto 1fr auto; }
  .lcd-ligne { font-size: 11px; gap: 8px; }
  .lcd-badge, .lcd-suite { display: none; }
  .lcd-temps { font-size: 16px; }
  .lcd-piste b { font-size: 14px; }
  .lcd-defile { font-size: 18px; }
  .lcd-spectre { height: 24px; gap: 2px; }
  .hifi-commandes { gap: 12px; justify-content: space-between; }
  .transport { width: 100%; justify-content: space-between; gap: 6px; }
  .rond { width: 48px; height: 48px; }
  .rond-lecture { width: 60px; height: 60px; }
  .hifi-actions { flex: 1; }
  .pilule { flex: 1; padding: 0 10px; font-size: 13px; }
  .fader { flex: 1; margin-left: 0; }
  .fader input { width: 100%; }
}

/* ─────────────────────────────── TÉLÉPHONE ─────────────────────────────── */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .facade-haut { height: 64px; gap: 8px; padding: 0 12px; padding-top: env(safe-area-inset-top); }
  .marque { display: none; }
  #scene { padding-top: calc(64px + env(safe-area-inset-top)); }
  .ecran { min-height: calc(100vh - 64px); padding: 18px 16px 120px; }
  .facade-droite { gap: 6px; }
  .masquer-mobile { display: none; }
  .bouton-facade { height: 38px; padding: 0 12px; font-size: 14px; }
  .bouton-trouvailles { padding-right: 8px; }
  .bouton-trouvailles .mini-cdr { display: none; }
  .seulement-mobile-inline { display: inline; }

  .ecran-allumage { gap: 26px; }
  .etapes { gap: 8px 14px; }
  .etapes li { font-size: 13px; gap: 8px; }
  .etapes li + li::before { display: none; }
  .panneau-allumage { padding: 20px 24px; gap: 24px; }
  .bouton-rotatif-grand .molette { width: 88px; height: 88px; }
  .interrupteur { width: 104px; height: 104px; }

  /* une chaîne compacte : l'écran réduit à son titre, la vidéo, les commandes, puis le tuner */
  .ecran-machine { padding-top: 12px; gap: 24px; }
  .hifi { row-gap: 10px; }
  .hifi-corps { padding: 12px; gap: 10px; }
  .hifi-haut { padding-bottom: 8px; gap: 6px 10px; }
  .hifi-marque { font-size: 12px; }
  .bouton-cosmetique { min-height: 30px; padding: 0 10px; font-size: 10px; letter-spacing: .08em; }
  .tiroir { width: 64px; border-radius: 10px; }
  body[data-affichage="disque"] .afficheur { gap: 12px; }
  .etiquette { gap: 2px; }
  .etiquette-haut { font-size: 10px; }
  .etiquette-titre { font-size: 1.05rem; -webkit-line-clamp: 2; }
  .etiquette-artiste { font-size: .9rem; }
  .lcd { min-height: 0; padding: 10px 12px; grid-template-rows: auto auto; gap: 4px; }
  .lcd .lcd-spectre, .lcd .lcd-suite, .lcd .lcd-bas { display: none; }
  .lcd .lcd-defile { font-size: 17px; }
  .rond { width: 46px; height: 46px; }
  .rond-lecture { width: 56px; height: 56px; }
  .hifi-commandes { gap: 10px; padding-top: 10px; }
  .hifi-actions { flex: none; flex-wrap: nowrap; gap: 8px; }
  .hifi-actions .pilule { flex: none; width: 46px; padding: 0; }
  .pilule-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pilule-coeur .pilule-icone { font-size: 17px; }
  .pilule-bof .pouce { width: 18px; height: 18px; }
  .trappe-panneau { gap: 14px 18px; padding: 14px; }
  .glissiere { grid-template-columns: repeat(3, 52px); }
  .glissiere-curseur { width: 46px; transform: translateX(calc(var(--pos) * 52px)); }

  .sources { margin-left: 0; flex: 1 1 100%; margin-top: 6px; }
  .pile-titre { font-size: 12px; }
  .pile-disques { gap: 10px; padding: 38px 0 54px; }
  .pile-scotch { font-size: 12.5px; padding: 2px 7px 1px; top: -10px; }
  .disque-pile.choisi::before { font-size: 9px; top: -34px; padding: 2px 7px; }
  .pile-pied { flex-wrap: wrap; }
  .pile-autres { min-height: 34px; padding: 0 12px; font-size: 13px; }
  .pilote { flex-wrap: wrap; }
  .pilote-stop { margin-left: 24px; }
  .pile-titre-m { font-size: 13px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .pile-artiste { font-size: 12px; }
  .pile-maintenant { padding: 0 12px; min-height: 34px; font-size: 12.5px; gap: 6px; }
  .pile-maintenant-long { display: none; }
  .pile-pied { font-size: 12.5px; }
  .source-choix { flex: 1; }


  .livret-album-tete { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
  .pochette-livret { width: 76px; }
  .livret-photo { width: 68px; height: 68px; }
  .livret-icone { width: 46px; height: 38px; }
  .livret-icone::before, .livret-icone::after { width: 22px; }

  .bac, .reglages { top: auto; width: 100vw; height: 86vh; border-radius: 18px 18px 0 0; transform: translateY(105%); }
  .toast { top: calc(72px + env(safe-area-inset-top)); }
}
@media (max-width: 380px) {
  .bac-liste.etagere { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ─────────────────────────────── MOUVEMENTS ─────────────────────────────── */
/* les transitions entre les écrans, là où le navigateur sait les faire */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; animation-timing-function: cubic-bezier(.2,.9,.3,1); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .plateau-reflet, body.cd-tourne.energie-forte .hifi-enceinte, .hp-boomer.coup, .hp-tweeter.ping { animation: none; }
  /* le titre ne défile pas : on montre son début, coupé proprement */
  .lcd-defile { text-overflow: ellipsis; }
  .lcd-defile span { display: inline; padding-left: 0; animation: none; }
}

/* ─── une seule fois, après un peu d'écoute : l'astuce de « Ma sélection » (jamais par-dessus la vidéo) ─── */
.aide {
  position: fixed; z-index: 60; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); width: min(340px, calc(100vw - 32px));
  display: grid; gap: 12px; padding: 18px 18px 16px; border-radius: 16px;
  background: var(--fond); color: var(--encre); box-shadow: 0 24px 50px -16px rgba(0,0,0,.45), 0 0 0 1px var(--trait);
  opacity: 0; transform: translateY(14px); transition: opacity .25s, transform .3s cubic-bezier(.2,.9,.3,1.2);
}
.aide.ouverte { opacity: 1; transform: none; }
.aide-titre { font-family: var(--etiquette); font-weight: 700; font-stretch: 88%; font-size: 14px; letter-spacing: .02em; }
.aide-liste { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; counter-reset: aide; }
.aide-liste li { position: relative; padding-left: 34px; font-size: 14.5px; line-height: 1.42; color: var(--encre-2); counter-increment: aide; }
.aide-liste li b { color: var(--encre); }
.aide-liste li::before {
  content: counter(aide); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--etiquette); font-weight: 700; font-stretch: 88%; font-size: 12px; background: var(--aiguille); color: var(--sur-aiguille, #fff);
}
.aide .gros-bouton { justify-self: start; min-height: 38px; padding: 0 18px; font-size: 14px; }
@media (max-width: 640px) { .aide { left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: auto; } }
/* « Réglages » brille doucement tant qu'on ne l'a jamais ouvert */
.bouton-reglages.brille { animation: brille 2.6s ease-in-out infinite; }
@keyframes brille {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--aiguille) 0%, transparent); }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--aiguille) 35%, transparent), 0 0 22px 4px color-mix(in srgb, var(--aiguille) 45%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .bouton-reglages.brille { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--aiguille) 45%, transparent); } }
/* l'astuce apparaît : « J'aime bien » s'allume trois fois */
#radio-garder.pulse { animation: brille 1.3s ease-in-out 3; }

/* ─── le salon : quelqu'un dans un fauteuil, la fenêtre à l'heure qu'il est, la musique qui réchauffe ─── */
.salon { position: relative; width: 100%; max-width: 1100px; margin: 0 auto; aspect-ratio: 1200 / 360; min-height: 170px; border-radius: 18px; overflow: hidden;
  background: #2a2420; box-shadow: var(--relief-fort); --jour: .5; --battement: .62s; --amplitude: 5deg; }
.salon-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.salon .couche { will-change: transform; }
.salon .couche-fond { transform: translate(calc(var(--px, 0) * -6px), calc(var(--py, 0) * -3px)); }
.salon .couche-milieu { transform: translate(calc(var(--px, 0) * -13px), calc(var(--py, 0) * -5px)); }
.salon .couche-avant { transform: translate(calc(var(--px, 0) * -24px), calc(var(--py, 0) * -8px)); }
.salon * { transform-box: view-box; }
.salon-nuit { opacity: calc((1 - var(--jour)) * .66); transition: opacity 2s; }
.salon-rayon { opacity: calc(var(--jour) * .12); mix-blend-mode: screen; }
.salon .etoiles, .salon .fenetres-allumees { opacity: calc(1 - var(--jour)); }
.salon-halo { opacity: calc(.18 + (1 - var(--jour)) * .3); mix-blend-mode: screen; transition: opacity 4s ease; }
.salon-chaleur { opacity: 0; mix-blend-mode: soft-light; transition: opacity 5s ease; }
.salon .ampoule { opacity: calc(.55 + (1 - var(--jour)) * .4); transition: opacity 3s; }
.salon-ondes, .salon-poussieres { opacity: 0; transition: opacity 1.5s; }
.salon .cadre-pochette { opacity: 0; transition: opacity .8s; }
.salon.avec-pochette .cadre-pochette { opacity: 1; }
/* la musique joue : la pièce se réchauffe, la tête suit le tempo, le pied tape */
.salon.joue .salon-halo { opacity: calc(.42 + (1 - var(--jour)) * .4); }
.salon.joue .salon-chaleur { opacity: .85; }
.salon.joue .salon-ondes, .salon.joue .salon-poussieres { opacity: 1; }
.salon .bras-livre, .salon .bras-tete { display: none; }
.salon.humeur-doux .bras-poses, .salon.humeur-detente .bras-poses { display: none; }
.salon.humeur-doux .bras-livre { display: inline; }
.salon.humeur-detente .bras-tete { display: inline; }
.salon-buste { transform-origin: var(--o); animation: salon-respire 4.6s ease-in-out infinite; }
.salon .zzz text { animation: salon-zzz 3.4s ease-in-out infinite; } .salon .zzz text + text { animation-delay: 1.2s; }
/* groovy : la tête et les épaules balancent sur le tempo, le pied tape */
.salon.humeur-groove .salon-tete { transform-origin: var(--o); animation: salon-balance calc(var(--battement) * 2) ease-in-out infinite; }
.salon.humeur-groove .salon-buste { animation: salon-epaules calc(var(--battement) * 2) ease-in-out infinite; }
.salon.humeur-groove .salon-pied, .salon.humeur-energie .salon-pied { transform-origin: var(--o); animation: salon-tape var(--battement) ease-in-out infinite; }
/* énergique : la tête hoche franchement, les mains tapent sur les accoudoirs */
.salon.humeur-energie .salon-tete { transform-origin: var(--o); animation: salon-hoche var(--battement) ease-in-out infinite; }
.salon.humeur-energie .main-g, .salon.humeur-energie .main-d { animation: salon-tambour var(--battement) ease-in-out infinite; }
.salon.humeur-energie .main-d { animation-delay: calc(var(--battement) * -.5); }
/* catchy : les mains derrière la tête, un léger hochement */
.salon.humeur-detente .salon-tete { transform-origin: var(--o); animation: salon-hoche calc(var(--battement) * 2) ease-in-out infinite; --amplitude: 3deg; }
/* très doux : il lit, la tête penchée sur le livre */
.salon.humeur-doux .salon-tete { transform-origin: var(--o); transform: rotate(0deg) translateY(4px); animation: none; }
@keyframes salon-respire { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.2px); } }
@keyframes salon-balance { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes salon-epaules { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }
@keyframes salon-tambour { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } }
@keyframes salon-zzz { 0% { opacity: 0; transform: translate(0, 0); } 30% { opacity: .9; } 100% { opacity: 0; transform: translate(6px, -12px); } }
.salon.joue .onde { animation: salon-onde calc(var(--battement) * 2) ease-out infinite; animation-delay: calc(var(--i) * var(--battement) * .66); transform-origin: 632px 230px; }
.salon.joue .poussiere { animation: salon-poussiere 9s ease-in-out infinite; animation-delay: calc(var(--i) * -1.1s); }
@keyframes salon-hoche { 0%, 100% { transform: translateY(0) rotate(0deg); } 45% { transform: translateY(3px) rotate(calc(var(--amplitude) * .4)); } }
@keyframes salon-tape { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-6deg); } }
@keyframes salon-onde { 0% { opacity: 0; transform: scale(.7); } 30% { opacity: .9; } 100% { opacity: 0; transform: scale(1.25) translateY(-6px); } }
@keyframes salon-poussiere { 0%, 100% { transform: translate(0, 0); opacity: .2; } 50% { transform: translate(-14px, -22px); opacity: .9; } }
.salon-heure { position: absolute; left: 14px; bottom: 10px; margin: 0; padding: 4px 9px; border-radius: 999px; background: rgba(20,16,12,.55); color: #f3ece0;
  font: 500 11px/1.3 var(--mono); letter-spacing: .04em; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.ecran-machine .salon { margin-top: clamp(26px, 4vw, 44px); }
.ecran-allumage .salon { max-width: 760px; margin-top: clamp(24px, 4vw, 40px); }
@media (max-width: 700px) { .salon { aspect-ratio: 2 / 1; border-radius: 14px; } }
@media (prefers-reduced-motion: reduce) { .salon *, .salon.joue * { animation: none !important; } }
@media (max-width: 520px) { .pile-scotch { font-size: 9.5px; padding: 3px 7px 2px; letter-spacing: .05em; } }