/* Unmusique - Lucy Bedroque : desktop only */

:root{
  --paper:#faf9f7;
  --ink:#14120f;
  --rose:#ffd7e6;
  --lemon:#fdf6c8;
  --mint:#d8f0e2;
}

*{margin:0;padding:0;box-sizing:border-box}
html{overflow:hidden}
html,body{height:100%}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Arial Narrow","Helvetica Neue",Helvetica,Arial,sans-serif;
  overflow:hidden;
  min-height:100%;
  display:flex;align-items:center;justify-content:center;
  padding:14px 0;
}

/* cadre qui met la scene a l echelle de la fenetre */
.fit{
  position:relative;z-index:2;
  margin:0 auto;
}

/* ---------- fond blanc, traces pastel a peine visibles ---------- */

.bg{position:fixed;inset:0;z-index:0;overflow:hidden}

.blob{position:absolute;border-radius:50%;filter:blur(170px)}
.b1{width:660px;height:560px;left:-16%;top:-22%;background:var(--lemon);opacity:.2}
.b2{width:760px;height:640px;left:4%;bottom:-28%;background:var(--rose);opacity:.18}
.b3{width:780px;height:660px;right:-14%;top:28%;background:var(--mint);opacity:.15}

.glow{
  position:absolute;left:50%;top:46%;
  width:1200px;height:1200px;margin:-600px 0 0 -600px;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(255,255,255,.6) 34%,rgba(255,255,255,0) 68%);
  filter:blur(50px);
}

/* ---------- ouverture : voile sombre et signe de l album ---------- */

.veil{
  position:fixed;inset:0;z-index:1;
  background:#0b0a09;
  transition:opacity 1.35s cubic-bezier(.4,.1,.2,1);
}
/* sur telephone il n y a pas d atterrissage : le noir se leve en fondu */
body.is-lighten .veil{opacity:0}

/* La nappe claire est un disque centre sur le point d impact. Elle grandit par
   transform:scale, que la carte graphique mene toute seule : c est ce qui la
   rend fluide. L ancien clip-path obligeait le navigateur a repeindre tout
   l ecran a chaque image, d ou les saccades.
   --wr est pose par le script : c est la distance du disque au coin le plus
   eloigne. A scale(1) l onde couvre donc l ecran pile, sans course a vide. */
.veil-open{
  position:fixed;z-index:1;
  left:var(--ox,50%);top:var(--oy,50%);
  width:calc(var(--wr,140vmax) * 2.7);
  height:calc(var(--wr,140vmax) * 2.7);
  margin-left:calc(var(--wr,140vmax) * -1.35);
  margin-top:calc(var(--wr,140vmax) * -1.35);
  border-radius:50%;
  /* plein jusqu au rayon utile, puis le bord se fond : pas de contour net */
  background:radial-gradient(closest-side,
              var(--paper) 0 76%,
              rgba(250,249,247,.6) 87%,
              rgba(250,249,247,0) 100%);
  pointer-events:none;
  transform:scale(0);
  transition:opacity .5s ease;
}
body.is-open .veil-open{
  animation:veilopen 1s cubic-bezier(.32,.62,.28,1) forwards;
}
@keyframes veilopen{
  from{transform:scale(0)}
  to  {transform:scale(1)}
}

/* l onde est passee : on retire les deux nappes pour rendre au fond ses
   teintes pastel, que sinon la nappe blanche masquerait pour toujours */
body.is-lit .veil{display:none}
body.is-lit .veil-open{opacity:0}

/* le signe est taille pour coincider exactement avec l etiquette du disque
   (l etiquette fait 31.7% du disque, soit ~95px ; le dessin occupe 92% du
   fichier, d ou 104px) : quand le disque se revele autour de lui, le signe
   devient son etiquette sans bouger d un pixel */
.intro-logo{
  position:absolute;left:50%;top:50%;z-index:12;
  width:104px;height:104px;margin:-52px 0 0 -52px;
  display:block;pointer-events:none;
  animation:logobreath 5s ease-in-out infinite alternate;
}
/* le disque prend le relais : son etiquette porte deja le meme signe */
body.is-armed .intro-logo{
  animation:logohandoff 3.5s both;
}
@keyframes logohandoff{
  0%   {opacity:1}
  24%  {opacity:1}
  46%  {opacity:0}
  100% {opacity:0}
}
@keyframes logobreath{
  from{opacity:.88;transform:scale(1)}
  to  {opacity:1;transform:scale(1.025)}
}
/* ---------- scene ---------- */

.stage{
  position:absolute;left:0;top:0;
  width:1440px;height:900px;
  transform-origin:0 0;
}

/* ---------- trois pistes en haut ---------- */

.dock{
  position:absolute;left:0;right:0;top:26px;z-index:8;
  display:flex;justify-content:center;
  pointer-events:none;                 /* seule la rangee reagit a la souris */
  opacity:0;transform:translateY(-46px) scale(.88);
  transition:opacity 1s ease .72s,transform 1.15s cubic-bezier(.2,.72,.2,1) .72s;
}
body.is-stage .dock{opacity:1;transform:none}
body.is-stage .dock-win{pointer-events:auto}
.dock-win{
  position:relative;width:1020px;height:212px;pointer-events:none;
  perspective:1150px;perspective-origin:50% 45%;
}
/* le rail est une plaque a Z=0 : les pistes qui partent vers le fond passent
   derriere lui et deviennent inclicables. On le rend transparent a la souris,
   chaque piste rallume le clic pour elle meme depuis le script. */
.dock-rail{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
/* chaque piste est placee par le script : position, taille et fondu au bord */
.trk{
  position:absolute;left:0;top:0;
  width:150px;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  transform-origin:50% 42%;
  transform-style:preserve-3d;
  will-change:transform,opacity,filter;
  opacity:0;
}

/* ---------- icones verre : aero, version claire ---------- */

.bub{
  position:relative;
  width:150px;height:150px;border-radius:50%;
  border:1px solid rgba(255,255,255,.9);
  background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.62) 46%,rgba(236,234,229,.9) 100%);
  overflow:hidden;cursor:pointer;
  box-shadow:
    0 14px 26px rgba(20,18,15,.13),
    0 2px 5px rgba(20,18,15,.08),
    inset 0 -14px 26px rgba(180,176,168,.28),
    inset 0 2px 3px rgba(255,255,255,1);
  transition:transform .42s cubic-bezier(.22,.72,.16,1),box-shadow .42s ease;
}
.bub-glass{
  position:absolute;left:8%;top:4%;right:8%;height:46%;
  border-radius:50% 50% 46% 46% / 62% 62% 38% 38%;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.28) 68%,rgba(255,255,255,0));
  pointer-events:none;z-index:2;
}
.bub::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(120% 88% at 50% 118%,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 58%);
  box-shadow:inset 0 0 0 1px rgba(20,18,15,.09);
  pointer-events:none;z-index:3;
}
.bub-art{
  position:absolute;left:50%;top:47%;
  width:86px;height:86px;
  transform:translate(-50%,-50%);
  display:block;z-index:1;opacity:.92;
}
/* certains albums n ont pas de petit signe : la pochette remplit le rond */
.bub.is-fill .bub-art{
  left:0;top:0;width:100%;height:100%;
  margin:0;transform:none;border-radius:50%;
  object-fit:cover;opacity:.95;
}

.bub-num{
  position:absolute;left:0;right:0;bottom:14px;z-index:4;
  font-style:normal;font-size:9px;letter-spacing:.3em;
  text-align:center;color:rgba(20,18,15,.4);
}
/* le grossissement est calcule par le script : ici on ne touche qu a l ombre */
.bub:hover{
  box-shadow:
    0 26px 40px rgba(20,18,15,.18),
    0 4px 8px rgba(20,18,15,.1),
    inset 0 -14px 26px rgba(180,176,168,.24),
    inset 0 2px 3px rgba(255,255,255,1);
}
.bub:active{filter:brightness(.97)}
.bub:focus-visible{outline:2px solid var(--ink);outline-offset:5px}

/* la piste qui joue est marquee d un fin lisere */
.trk.is-current .bub{
  box-shadow:
    0 0 0 2px rgba(20,18,15,.7),
    0 14px 26px rgba(20,18,15,.13),
    0 2px 5px rgba(20,18,15,.08),
    inset 0 -14px 26px rgba(180,176,168,.28),
    inset 0 2px 3px rgba(255,255,255,1);
}

.trk-name{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  text-align:center;line-height:1.5;
  color:rgba(20,18,15,.6);
}

/* ---------- choix de l album, en bas ----------
   Memes pastilles de verre que les pistes, en plus petit : la pochette de
   l album occupe tout le rond, on reconnait l album au premier coup d oeil. */

.albums{
  position:absolute;left:0;right:0;bottom:36px;z-index:8;
  display:flex;justify-content:center;gap:30px;
  pointer-events:none;
  opacity:0;transform:translateY(26px) scale(.92);
  transition:opacity .9s ease 1.25s,transform 1s cubic-bezier(.2,.72,.2,1) 1.25s;
}
/* la rangee occupe toute la largeur : on ne rend cliquables que les pastilles,
   sinon sa zone vide happerait les clics voisins */
body.is-stage .albums{opacity:1;transform:none}
body.is-stage .alb{pointer-events:auto}

.alb{
  width:132px;                              /* meme place pour chacun : les ronds restent symetriques */
  display:flex;flex-direction:column;align-items:center;gap:10px;
  background:none;border:0;padding:0;cursor:pointer;
  transition:transform .42s cubic-bezier(.22,.72,.16,1);
}
.alb:hover{transform:translateY(-5px)}
.alb .bub{width:76px;height:76px}
/* la pochette remplit le rond au lieu du petit signe des pistes */
.alb .bub-art{
  left:0;top:0;width:100%;height:100%;
  margin:0;transform:none;border-radius:50%;
  object-fit:cover;opacity:.94;
}
.alb-name{
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  text-align:center;line-height:1.5;
  color:rgba(20,18,15,.55);
  max-width:100%;
}
.alb.is-current .bub{
  box-shadow:
    0 0 0 2px rgba(20,18,15,.7),
    0 12px 22px rgba(20,18,15,.14),
    inset 0 2px 3px rgba(255,255,255,.9);
}
.alb.is-current .alb-name{color:rgba(20,18,15,.85)}
.alb:focus-visible .bub{outline:2px solid var(--ink);outline-offset:5px}

/* ---------- pochette appuyee contre la platine ---------- */

.sleeve-slot{
  position:absolute;left:148px;top:322px;z-index:4;
  width:300px;height:300px;
  transform:rotate(-15deg);
  pointer-events:none;
}
body.is-stage .sleeve-slot{pointer-events:auto}

.sleeve{
  position:absolute;left:0;top:0;z-index:4;
  opacity:0;
  width:300px;height:300px;display:block;
  filter:grayscale(1) contrast(1.08) brightness(.98);
  box-shadow:10px 12px 0 rgba(20,18,15,.1);
  transform:translate(-26px,26px) scale(.97);
  transition:opacity 1.2s ease .62s,transform 1.2s cubic-bezier(.2,.7,.2,1) .62s;
}
body.is-stage .sleeve{
  opacity:1;
  transform:none;                           /* position de repos : posee contre la platine */
  transition:opacity 1.3s ease .5s,transform .9s cubic-bezier(.22,.72,.16,1);
}
/* on survole la pochette elle meme : elle sort entierement de dessous.
   la zone de survol reste en place pendant que l image glisse, sinon le curseur
   la perdrait aussitot et elle ferait des allers retours */
.sleeve-slot:hover .sleeve{
  transform:translate(-112px,34px);
}

/* ---------- la platine ---------- */

/* La platine attend le disque a sa place definitive, et n en bouge plus.
   Elle se tenait auparavant « en profondeur » jusqu a l atterrissage, 28 px
   plus bas et reduite a 95,5 % : le disque, qui vit dans la platine, se
   posait donc la, puis au moment ou la page apparaissait la platine
   rejoignait sa place d un coup — le petit choc de l impact partant de la
   position finale — et emportait le disque avec elle : 27 px vers le haut,
   8 px vers la gauche, 4,7 % plus grand, en une seule image.
   Immobile, elle ne fait plus que sortir du noir en opacite, et le disque
   finit sa chute exactement la ou il reste. La montee depuis la profondeur
   ne sert plus qu a l ouverture filmee de Jane, plus bas. */
.deck{
  position:absolute;left:340px;top:318px;z-index:5;
  width:660px;height:396px;
  transform:rotate(-6deg);
  transition:transform 1.3s cubic-bezier(.2,.72,.2,1) .5s;
}
body.is-stage .deck{transform:rotate(-6deg)}

/* chaque piece de la platine apparait, le disque reste visible */
.deck-plinth,.deck-face,.platter-mat,.spindle,.arm,.deck-knob,.platter::before{
  opacity:0;
  transition:opacity 1.25s ease .5s;
}
body.is-stage .deck-plinth,
body.is-stage .deck-face,
body.is-stage .platter-mat,
body.is-stage .spindle,
body.is-stage .arm,
body.is-stage .deck-knob,
body.is-stage .platter::before{opacity:1}
.deck-plinth{
  position:absolute;inset:0;
  border-radius:8px;
  background:linear-gradient(168deg,#2b2723 0%,#1b1815 42%,#14110e 100%);
  box-shadow:
    0 30px 46px rgba(20,18,15,.26),
    0 6px 12px rgba(20,18,15,.18),
    inset 0 1px 0 rgba(255,255,255,.16);
}
/* plaque superieure brossee */
.deck-face{
  position:absolute;left:16px;top:16px;right:16px;bottom:16px;
  border-radius:4px;
  background:
    linear-gradient(178deg,#e9e7e2 0%,#cfccc5 34%,#dedbd5 64%,#bfbcb5 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 6px rgba(20,18,15,.18);
}
.deck-face::after{               /* fines rayures du metal brosse */
  content:"";position:absolute;inset:0;border-radius:4px;
  opacity:.5;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 1px,rgba(20,18,15,.05) 1px 3px);
}

.platter{
  position:absolute;left:56px;top:34px;
  perspective:1300px;
  width:328px;height:328px;border-radius:50%;
  z-index:2;
}
.platter::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle at 38% 30%,#f2f0eb 0%,#d5d2cb 46%,#b6b2ab 100%);
  box-shadow:
    0 10px 20px rgba(20,18,15,.28),
    inset 0 0 0 1px rgba(255,255,255,.55);
}
.platter-mat{
  position:absolute;inset:12px;border-radius:50%;
  background:
    repeating-radial-gradient(circle,rgba(20,18,15,.9) 0 2px,rgba(38,34,30,.9) 2px 4px);
  box-shadow:inset 0 0 26px rgba(0,0,0,.55);
}
.spindle{
  position:absolute;left:50%;top:50%;
  width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border-radius:50%;
  background:linear-gradient(180deg,#fff,#9d9a94);
  box-shadow:0 1px 2px rgba(0,0,0,.5);
  z-index:6;
}

/* le disque arrive du premier plan, puis tourne sans fin */
.disc-fly{
  position:absolute;left:50%;top:50%;
  width:300px;height:300px;margin:-150px 0 0 -150px;
  z-index:4;
  opacity:0;                            /* avant le geste il n y a que le signe */
  transform-style:preserve-3d;
}
.disc-spin{
  width:100%;height:100%;
  animation:spin 1.9s linear infinite;
  animation-play-state:paused;
}
body.is-armed .disc-fly{animation:flyin 3.5s both}
body.is-landed.is-playing .disc-spin{animation-play-state:running}
.disc{
  width:100%;height:100%;display:block;
  filter:brightness(.88) contrast(1.24) drop-shadow(0 6px 10px rgba(20,18,15,.4));
}

/* le disque ne traverse plus l ecran : il se revele sur place, juste sous le
   signe, par une montee de lumiere depuis l obscurite (~2s), puis tombe
   d un seul geste sur le plateau (~1.5s). */
@keyframes flyin{
  /* le disque est deja en place, a sa taille definitive, autour du signe :
     il ne grandit pas et ne monte pas, il se revele par la lumiere */
  0%   {opacity:0;
        transform:translate(var(--fx,0px),var(--fy,0px)) scale(1);
        filter:blur(9px) brightness(3.4)}
  12%  {opacity:0;
        filter:blur(9px) brightness(3.4)}
  30%  {opacity:.5;
        filter:blur(4px) brightness(2.4)}
  46%  {opacity:1;
        filter:blur(1.2px) brightness(1.9)}
  /* toute la lumiere est retombee AVANT la chute : sinon le grain clair du
     disque, pousse par brightness, crame en petits points blancs */
  57%  {opacity:1;
        transform:translate(var(--fx,0px),var(--fy,0px)) scale(1);
        filter:blur(0) brightness(1);
        animation-timing-function:cubic-bezier(.22,.7,.2,1)}
  100% {opacity:1;
        transform:translate(0,0) scale(1);
        filter:blur(0) brightness(1)}
}

/* le contour du disque se dessine en premier, comme un trait de lumiere,
   puis s efface une fois que le disque lui meme est la */
.disc-fly::after{
  content:"";position:absolute;inset:-4px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 0 34px rgba(255,255,255,.5),inset 0 0 26px rgba(255,255,255,.16);
  opacity:0;pointer-events:none;
}
body.is-armed .disc-fly::after{animation:discring 3.5s both}
@keyframes discring{
  0%   {opacity:0;transform:scale(.965)}
  10%  {opacity:0;transform:scale(.975)}
  26%  {opacity:1;transform:scale(1)}
  44%  {opacity:.5;transform:scale(1)}
  52%  {opacity:0;transform:scale(1)}
  100% {opacity:0;transform:scale(1)}
}

@keyframes spin{ to{transform:rotate(360deg)} }


/* ---------- le bras ---------- */

/* le bras pivote autour de son extremite droite : au repos il est range
   sur le cote, une fois le disque pose il vient se placer sur les sillons */
.arm{
  position:absolute;left:284px;top:52px;
  width:320px;height:22px;
  z-index:6;
  transform-origin:100% 50%;
  transform:rotate(-63deg);
  transition:transform 1.25s cubic-bezier(.3,.78,.28,1),opacity 1.25s ease .5s;
}
body.is-landed .arm{transform:rotate(-31deg)}
.arm-pivot{
  position:absolute;right:-20px;top:50%;
  width:42px;height:42px;margin-top:-21px;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#f6f4f0,#aeaaa3 60%,#6d6a64 100%);
  box-shadow:0 4px 9px rgba(20,18,15,.42),inset 0 1px 0 rgba(255,255,255,.85);
}
.arm-tube{
  position:absolute;left:26px;right:14px;top:50%;
  height:7px;margin-top:-3.5px;border-radius:4px;
  background:linear-gradient(180deg,#f2f0eb,#bcb8b1 52%,#817e78);
  box-shadow:0 3px 6px rgba(20,18,15,.34);
}
.arm-head{
  position:absolute;left:0;top:50%;
  width:34px;height:21px;margin-top:-9px;border-radius:3px;
  transform:rotate(-16deg);
  background:linear-gradient(180deg,#312d29,#141210);
  box-shadow:0 4px 7px rgba(20,18,15,.45),inset 0 1px 0 rgba(255,255,255,.22);
}
.arm-head::after{                 /* la pointe */
  content:"";position:absolute;left:5px;bottom:-5px;
  width:3px;height:6px;border-radius:1px;
  background:#0d0b09;
}

/* ---------- boutons de la platine ---------- */

.deck-knob{
  position:absolute;bottom:34px;
  width:34px;height:14px;border-radius:3px;
  background:linear-gradient(180deg,#e6e3de,#a5a29b);
  box-shadow:0 2px 4px rgba(20,18,15,.4),inset 0 1px 0 rgba(255,255,255,.9);
  z-index:4;
}
.k1{left:62px}
.k2{left:110px}


/* secousse discrete de la platine quand le disque se pose */
.deck{transform-origin:50% 50%}
body.is-hit .deck{animation:hit 220ms cubic-bezier(.2,.8,.3,1) 1}
@keyframes hit{
  0%  {transform:rotate(-6deg) scale(1)}
  22% {transform:rotate(-6.4deg) scale(1.008) translateY(2px)}
  55% {transform:rotate(-5.8deg) scale(.998) translateY(-1px)}
  100%{transform:rotate(-6deg) scale(1)}
}

/* ---------- bouton lecture / pause ---------- */


.controls{
  position:absolute;right:52px;bottom:44px;z-index:9;
  display:flex;align-items:center;gap:16px;
  opacity:0;transform:translateY(24px) scale(.9);pointer-events:none;
  transition:opacity .85s ease 1.08s,transform .95s cubic-bezier(.2,.72,.2,1) 1.08s;
}
body.is-stage .controls{opacity:1;transform:none;pointer-events:auto}

.sound{
  position:relative;z-index:9;
  width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(255,255,255,.9);
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(236,234,229,.92));
  box-shadow:0 10px 18px rgba(20,18,15,.12),inset 0 2px 3px rgba(255,255,255,1);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s cubic-bezier(.22,.72,.16,1),box-shadow .3s ease;
}
.sound:hover{transform:scale(1.1);box-shadow:0 16px 24px rgba(20,18,15,.16)}
.sound:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.ico-pause{display:flex;gap:5px}
.ico-pause i{
  width:5px;height:17px;border-radius:1px;
  background:rgba(20,18,15,.72);
}
.ico-play{
  display:none;
  width:0;height:0;margin-left:4px;
  border-left:15px solid rgba(20,18,15,.72);
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
}
.sound.is-paused .ico-pause{display:none}
.sound.is-paused .ico-play{display:block}
/* le navigateur bloque le son : le bouton respire pour appeler le clic */
.sound.is-waiting{animation:wait 1.6s ease-in-out infinite}
@keyframes wait{
  0%,100%{box-shadow:0 10px 18px rgba(20,18,15,.12),inset 0 2px 3px rgba(255,255,255,1),0 0 0 0 rgba(20,18,15,.16)}
  50%    {box-shadow:0 10px 18px rgba(20,18,15,.12),inset 0 2px 3px rgba(255,255,255,1),0 0 0 12px rgba(20,18,15,0)}
}

/* ---------- volume ---------- */

.vol{display:flex;align-items:center;height:52px}
#vol{
  -webkit-appearance:none;appearance:none;
  width:118px;height:6px;border-radius:4px;
  background:
    linear-gradient(90deg,rgba(20,18,15,.62) 0 var(--v,85%),rgba(20,18,15,.14) var(--v,85%) 100%);
  outline:none;cursor:pointer;
}
#vol::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:18px;height:18px;border-radius:50%;
  border:1px solid rgba(255,255,255,.9);
  background:linear-gradient(180deg,#fff,#e7e5e0);
  box-shadow:0 4px 8px rgba(20,18,15,.22),inset 0 1px 2px rgba(255,255,255,1);
}
#vol::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;border:1px solid rgba(255,255,255,.9);
  background:linear-gradient(180deg,#fff,#e7e5e0);
  box-shadow:0 4px 8px rgba(20,18,15,.22);
}
#vol:focus-visible{outline:2px solid var(--ink);outline-offset:6px}

/* ---------- paroles, facon Apple Music ---------- */

.lyrics{
  position:absolute;right:4px;top:206px;z-index:7;
  width:310px;height:474px;
  overflow:hidden;
  perspective:900px;
  opacity:0;transform:translateY(30px) scale(.94);
  transition:opacity 1s ease .9s,transform 1.1s cubic-bezier(.2,.72,.2,1) .9s;
  /* les bords se fondent, comme dans le lecteur d Apple */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
}
body.is-stage .lyrics{opacity:1;transform:none}

/* calque de profondeur : sur les instrumentaux tout le texte recule et s efface */
.lyr-depth{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transition:transform .95s cubic-bezier(.3,.72,.2,1),opacity .8s ease,filter .8s ease;
}
.lyrics.is-quiet .lyr-depth{
  transform:translateZ(-340px) translateY(-26px);
  opacity:0;filter:blur(8px);
}
/* on tire la molette pendant un instrumental : le texte revient jeter un oeil,
   flou et en retrait, tant que le geste dure */
.lyrics.is-quiet.is-scrubbing .lyr-depth{
  transform:translateZ(-60px) translateY(0);
  opacity:.6;filter:blur(2.4px);
  transition:transform .5s cubic-bezier(.3,.72,.2,1),opacity .5s ease,filter .5s ease;
}

/* la note de musique prend le relais pendant les instrumentaux, et danse
   sur le tempo de la piste (--beat, pose par le script) */
.lyr-note{
  position:absolute;left:50%;top:50%;
  width:46px;height:46px;margin:-23px 0 0 -23px;
  color:rgba(20,18,15,.34);
  opacity:0;transform:scale(.86);
  transition:opacity .5s ease .15s;
  /* un cycle complet (gauche-droite-gauche) dure exactement un battement */
  animation:notedance calc(var(--beat, .6s) * 2) cubic-bezier(.45,0,.55,1) infinite;
  animation-play-state:paused;
}
.lyrics.is-quiet .lyr-note{opacity:1}
/* la note ne danse que si la musique tourne : en pause elle se fige, comme le disque */
body.is-playing .lyrics.is-quiet .lyr-note{animation-play-state:running}
.lyrics.is-quiet.is-scrubbing .lyr-note{opacity:0;animation-play-state:paused}

/* un metronome : gauche sur le temps, droite sur le contretemps, rien de circulaire */
@keyframes notedance{
  0%   {transform:translateX(-11px) rotate(-9deg)}
  50%  {transform:translateX(11px)  rotate(9deg)}
  100% {transform:translateX(-11px) rotate(-9deg)}
}

.lyr-track{
  position:absolute;left:0;top:0;width:100%;
  display:flex;flex-direction:column;gap:22px;
  padding:40px 22px 40px 0;   /* la marge a droite laisse la place au grossissement de la ligne active */
  will-change:transform;
}

.lyr{
  font-size:23px;line-height:1.26;font-weight:700;
  letter-spacing:-.01em;
  color:rgba(20,18,15,.24);
  cursor:pointer;
  transform-origin:0 50%;
  transition:color .5s ease,opacity .5s ease,transform .5s cubic-bezier(.22,.72,.16,1),filter .5s ease;
}
.lyr:hover{color:rgba(20,18,15,.5)}
/* les choeurs entre parentheses : plus petits, plus pales */
.lyr-echo{
  display:block;margin-top:4px;
  font-size:.72em;font-weight:600;
  color:rgba(20,18,15,.3);
}
.lyr.is-now .lyr-echo{color:rgba(20,18,15,.5)}
.lyr.is-past{color:rgba(20,18,15,.16);filter:blur(.4px)}
.lyr.is-now{
  color:rgba(20,18,15,.95);
  transform:scale(1.045);
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}

/* mode reglage : un liseré discret rappelle qu on pose les temps */
.lyrics.is-tuning{
  box-shadow:inset 0 0 0 1px rgba(20,18,15,.18);
  border-radius:6px;
}

/* ---------- decor : courbes fines ---------- */

.swoosh{
  position:absolute;left:96px;bottom:44px;
  width:520px;height:420px;
  z-index:1;pointer-events:none;
  opacity:0;transition:opacity 1.4s ease 1.2s;
}
body.is-stage .swoosh{opacity:1}

/* ---------- couches de salete ---------- */

.halftone{
  position:fixed;inset:0;z-index:20;pointer-events:none;
  opacity:.07;mix-blend-mode:multiply;
  background-image:radial-gradient(rgba(20,18,15,.9) .6px,transparent .7px);
  background-size:4px 4px;
}

.scan{
  position:fixed;inset:0;z-index:21;pointer-events:none;
  opacity:.07;mix-blend-mode:multiply;
  background:repeating-linear-gradient(0deg,rgba(20,18,15,.5) 0 1px,rgba(20,18,15,0) 1px 3px);
}

.noise{
  position:fixed;inset:0;z-index:22;pointer-events:none;
  opacity:.4;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='0.7'/></svg>");
}

.vignette{
  position:fixed;inset:0;z-index:23;pointer-events:none;
  background:radial-gradient(ellipse at 50% 46%,rgba(20,18,15,0) 58%,rgba(20,18,15,.12) 100%);
}

@media (prefers-reduced-motion:reduce){
  /* le vol est coupe, mais le disque doit quand meme apparaitre : il se revele
     sur place, sans aucun deplacement — rien ne sort du bas de l ecran */
  .disc-fly{animation:none;opacity:0;transform:none}
  body.is-armed .disc-fly{animation:discfade 1.1s ease-out both}
  .disc-fly::after{animation:none;opacity:0}
  /* pas de cercle qui s etale : la nappe couvre deja tout et monte en fondu */
  .veil-open{transform:scale(1);opacity:0;transition:opacity .7s ease}
  body.is-open .veil-open{animation:none;opacity:1}
  .disc-spin{animation:none}
  .lyr-note{animation:none}
  /* le fond reste pose, sans derive ni scintillement */
  body.alb-red .deco{animation:none}
  .fl,.ray,.ember,.tear{animation:none}
  .tear{display:none}
  .fl{opacity:.5}
  .ray,.ember{display:none}
  .bub,.trk,.arm,.sound{transition:none}
  .sound.is-waiting{animation:none}
}

@keyframes discfade{
  0%  {opacity:0;filter:brightness(2.6)}
  100%{opacity:1;filter:brightness(1)}
}

/* ================= version telephone =================
   Meme fonctions que sur ordinateur, mise en page simple :
   une bande de pistes en haut, les paroles au milieu, la lecture en bas.
   Tout le decor lourd (platine, grain, manege en 3D) est retire.
   Le seuil doit rester le meme que MOBILE dans le script. */
/* ==================================================================
   Revengeseekerz : la page passe au rouge et au noir
   ------------------------------------------------------------------
   Tout tient dans une classe posee sur le corps par le script. Les
   regles ci dessous ne font que repeindre ce qui existe deja : aucune
   piece n est deplacee, la mise en page reste la meme d un album a
   l autre. Le noir garde son role de texte, comme sur le fond clair,
   c est le fond qui change de camp.
   ================================================================== */

body.alb-red{
  --paper:#c6290d;
  --ink:#0b0505;
  background:
    radial-gradient(120% 90% at 50% 8%, #e23e20 0%, #c0260b 42%, #7d1604 100%);
  color:#0b0505;
}

/* l image porte deja sa lumiere et ses angles sombres : les taches pastel
   et la lueur du fond clair ne feraient que s y poser par dessus */
body.alb-red .blob,
body.alb-red .glow{display:none}

/* Le fond de l album : l image remplit la fenetre, sans laisser de bande vide.
   Faire tenir l image entiere revenait a border la page de flou des que la
   fenetre n avait pas exactement sa forme, ce qui arrive presque toujours :
   la barre du navigateur mange de la hauteur, si bien qu une page sur un
   ecran 16:9 est en realite bien plus large que haute.
   L image est donc posee a fond perdu et rognee depuis le centre ; c est a
   elle d etre dessinee plus large que la plus large des fenetres, avec de la
   marge sur les bords. */
.deco{display:none}
body.alb-red .deco{
  display:block;
  position:absolute;inset:0;z-index:0;
  overflow:hidden;
  background:url("assets/bg2.jpg?v=3") center center / cover no-repeat;
  pointer-events:none;
  opacity:0;transition:opacity 1.4s ease .3s;
  /* La derive se fait en pourcentage de position : avec cover, cela ne joue
     que sur la marge dont l image dispose deja hors cadre. Elle ne rogne donc
     rien de plus, et sur une fenetre exactement a sa forme elle ne bouge pas. */
  animation:bgdrift 64s ease-in-out infinite alternate;
}
@keyframes bgdrift{
  from{background-position:38% 50%}
  to  {background-position:62% 50%}
}

/* ---- ce qui vit par dessus le fond ---- */

.deco-life{position:absolute;inset:0;display:block;pointer-events:none}

/* fleurs et braises n existent que sur la page rouge : ailleurs elles ne
   sont pas seulement immobiles, elles ne sont pas la du tout */
.fl,.ember{display:none}

/* les fleurs : elles respirent et scintillent, chacune a son rythme */
body.alb-red .fl{
  position:absolute;display:block;
  filter:drop-shadow(0 0 7px rgba(255,255,255,.85))
         drop-shadow(0 0 22px rgba(255,167,150,.5));
  opacity:.2;
  animation:twinkle 6s ease-in-out infinite;
}
body.alb-red .fl.f1{left:7%; top:34%; width:46px;height:46px; animation-duration:6.5s; animation-delay:-.4s}
body.alb-red .fl.f2{left:19%;top:66%; width:30px;height:30px; animation-duration:5.2s; animation-delay:-2.1s}
body.alb-red .fl.f3{left:31%;top:19%; width:24px;height:24px; animation-duration:7.4s; animation-delay:-3.6s}
body.alb-red .fl.f4{left:60%;top:80%; width:34px;height:34px; animation-duration:6.8s; animation-delay:-1.2s}
body.alb-red .fl.f5{left:86%;top:29%; width:28px;height:28px; animation-duration:5.8s; animation-delay:-4.4s}
body.alb-red .fl.f6{left:92%;top:72%; width:40px;height:40px; animation-duration:7.9s; animation-delay:-2.8s}
@keyframes twinkle{
  0%,100%{opacity:.16;transform:scale(.82) rotate(0deg)}
  45%    {opacity:.95;transform:scale(1.12) rotate(6deg)}
  70%    {opacity:.45;transform:scale(.96) rotate(3deg)}
}

/* les traits de lumiere : ils traversent l ecran de loin en loin */
body.alb-red .ray{
  position:absolute;display:block;height:2px;
  background:linear-gradient(90deg,
              rgba(255,255,255,0) 0%,
              rgba(255,255,255,.85) 42%,
              rgba(255,255,255,.95) 56%,
              rgba(255,255,255,0) 100%);
  filter:blur(.4px) drop-shadow(0 0 8px rgba(255,255,255,.6));
  opacity:0;
  animation:sweep 13s linear infinite;
}
body.alb-red .ray.r1{top:31%;width:52%;transform:rotate(-9deg); animation-duration:15s; animation-delay:-2s}
body.alb-red .ray.r2{top:58%;width:40%;transform:rotate(6deg);  animation-duration:19s; animation-delay:-9s; height:1px}
body.alb-red .ray.r3{top:78%;width:46%;transform:rotate(-4deg); animation-duration:23s; animation-delay:-15s; height:1px}
@keyframes sweep{
  0%  {left:-56%;opacity:0}
  12% {opacity:.55}
  74% {opacity:.5}
  100%{left:112%;opacity:0}
}

/* les braises : de fines poussieres qui montent, comme au dessus d un feu */
body.alb-red .ember{
  position:absolute;display:block;
  width:3px;height:3px;border-radius:50%;
  background:rgba(255,196,150,.95);
  box-shadow:0 0 7px rgba(255,133,90,.9);
  opacity:0;
  animation:rise 15s linear infinite;
}
body.alb-red .ember.e1{left:11%;animation-duration:14s;animation-delay:-1s}
body.alb-red .ember.e2{left:23%;animation-duration:19s;animation-delay:-7s;width:2px;height:2px}
body.alb-red .ember.e3{left:35%;animation-duration:16s;animation-delay:-12s}
body.alb-red .ember.e4{left:47%;animation-duration:21s;animation-delay:-4s;width:2px;height:2px}
body.alb-red .ember.e5{left:56%;animation-duration:17s;animation-delay:-15s}
body.alb-red .ember.e6{left:68%;animation-duration:20s;animation-delay:-9s;width:2px;height:2px}
body.alb-red .ember.e7{left:79%;animation-duration:15s;animation-delay:-2s}
body.alb-red .ember.e8{left:88%;animation-duration:22s;animation-delay:-11s;width:2px;height:2px}
body.alb-red .ember.e9{left:96%;animation-duration:18s;animation-delay:-6s}
@keyframes rise{
  0%  {top:104%;opacity:0;transform:translateX(0)}
  10% {opacity:.85}
  50% {transform:translateX(26px)}
  86% {opacity:.5}
  100%{top:-6%;opacity:0;transform:translateX(-14px)}
}
body.alb-red.is-stage .deco,
body.alb-red.is-lighten .deco{opacity:1}

/* La trame de points en nappe couvrait toute la page d un quadrillage regulier.
   Sur le rouge elle etouffait le collage, dont les points font deja partie du
   dessin, par plaques et non partout : on la retire ici. */
body.alb-red .halftone{display:none}
/* les couches de salete sont faites pour le papier clair : sur l image du fond
   elles la ternissaient. On les laisse a peine, juste de quoi lier la scene
   au fond, sans repeindre le dessin. */
body.alb-red .scan{opacity:.04}
body.alb-red .noise{opacity:.14}
body.alb-red .vignette{
  background:radial-gradient(ellipse at 50% 46%,rgba(11,5,5,0) 52%,rgba(11,5,5,.3) 100%);
}
/* les courbes fines du fond clair jureraient sur le rouge */
body.alb-red .swoosh{display:none}

/* ---- pastilles de verre : verre fume au lieu de verre clair ---- */

/* Pas de verre ici : la pochette occupe le rond en entier, nette, avec pour
   seule bordure un cerne sombre qui la detache du fond. Les reflets et le
   bombe du verre clair posaient un voile laiteux par dessus l illustration. */
body.alb-red .trk .bub,
body.alb-red .alb-t-red .bub{
  border-color:rgba(0,0,0,.55);
  background:#0b0505;
  box-shadow:
    0 0 0 2px rgba(11,5,5,.85),
    0 16px 26px rgba(0,0,0,.5);
}
body.alb-red .trk .bub-glass,
body.alb-red .alb-t-red .bub-glass{display:none}
body.alb-red .trk .bub::after,
body.alb-red .alb-t-red .bub::after{
  background:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5);
}
body.alb-red .trk .bub-art,
body.alb-red .alb-t-red .bub-art{opacity:1}
body.alb-red .trk .bub:hover,
body.alb-red .alb-t-red .bub:hover{
  box-shadow:
    0 0 0 2px rgba(255,255,255,.75),
    0 26px 40px rgba(0,0,0,.56);
}
body.alb-red .trk .bub-num{
  color:rgba(255,255,255,.7);
  text-shadow:0 0 8px rgba(255,255,255,.5);
}
/* la piste qui joue est cerclee de blanc : sur le noir c est le seul liseré qui se voit */
body.alb-red .trk.is-current .bub,
body.alb-red .alb-t-red.is-current .bub{
  box-shadow:
    0 0 0 3px #fff,
    0 16px 26px rgba(0,0,0,.5),
    inset 0 2px 3px rgba(255,255,255,.28);
}
/* sur verre clair un lisere blanc ne se verrait pas : le sien reste sombre */
body.alb-red .alb-t-paper.is-current .bub{
  box-shadow:
    0 0 0 3px #0b0505,
    0 16px 26px rgba(0,0,0,.5),
    inset 0 2px 3px rgba(255,255,255,.9);
}
body.alb-red .trk-name,
body.alb-red .alb-name{
  color:rgba(255,255,255,.76);font-weight:700;
  text-shadow:0 0 10px rgba(255,255,255,.42),
              0 0 24px rgba(255,133,110,.34),
              0 1px 2px rgba(11,5,5,.6);
}
body.alb-red .trk.is-current .trk-name,
body.alb-red .alb.is-current .alb-name{
  color:#fff;
  text-shadow:0 0 8px rgba(255,255,255,.95),
              0 0 26px rgba(255,255,255,.7),
              0 1px 2px rgba(11,5,5,.5);
}
body.alb-red .trk .bub:focus-visible,
body.alb-red .alb-t-red:focus-visible .bub{outline-color:#fff}

/* les invites d une piste : une seconde ligne, plus petite et plus pale,
   sous le titre. Elle ne prend pas de place quand la piste est seule. */
.trk-feat{
  display:block;
  margin-top:3px;
  font-size:9px;letter-spacing:.06em;text-transform:none;
  font-style:normal;font-weight:600;
  opacity:.62;
}

/* ---- la pochette garde ses couleurs, avec l ombre franche du style ---- */

body.alb-red .sleeve{
  filter:none;
  box-shadow:14px 16px 0 #0b0505;
}

/* ---- la platine se met au noir pour ne pas trancher sur le rouge ---- */

body.alb-red .deck-plinth{
  background:linear-gradient(168deg,#140604 0%,#080201 48%,#020100 100%);
  box-shadow:
    0 30px 46px rgba(0,0,0,.58),
    0 6px 12px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.1);
}
/* plaque unie : sur le rouge, les rayures du metal brosse faisaient un moire
   de traits verticaux qui accrochait l oeil plus que la platine elle meme */
body.alb-red .deck-face{
  background:linear-gradient(178deg,#1e1a18 0%,#121010 40%,#181514 70%,#0a0908 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -2px 8px rgba(0,0,0,.6);
}
body.alb-red .deck-face::after{display:none}
body.alb-red .platter::before{
  background:radial-gradient(circle at 38% 30%,#2b2624 0%,#171413 46%,#0a0808 100%);
  box-shadow:0 10px 20px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.1);
}
/* le bras et son axe brillaient comme du chrome neuf a cote d une platine noire */
body.alb-red .arm-tube{background:linear-gradient(180deg,#8f8b85,#5d5a55 52%,#332f2c)}
body.alb-red .arm-pivot{
  background:radial-gradient(circle at 36% 30%,#9a958e,#5b5852 60%,#2e2b28 100%);
}
body.alb-red .spindle{background:linear-gradient(180deg,#c9c5bf,#59564f)}
body.alb-red .deck-knob{
  background:linear-gradient(180deg,#d84226,#8b1e0a);
  box-shadow:0 2px 4px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.4);
}

/* ---- paroles : le texte est allume, comme les fleurs du fond ----
   Les lignes a venir ne font que rougeoyer ; celle qu on chante s allume
   pour de bon, halo blanc puis halo rouge, et une ombre sombre dessous
   pour qu elle tienne meme sur les plages claires du collage. */

body.alb-red .lyr{
  color:rgba(255,255,255,.46);
  text-shadow:0 0 12px rgba(255,255,255,.3),0 1px 2px rgba(11,5,5,.5);
}
body.alb-red .lyr:hover{
  color:rgba(255,255,255,.8);
  text-shadow:0 0 16px rgba(255,255,255,.55),0 1px 2px rgba(11,5,5,.5);
}
body.alb-red .lyr.is-past{
  color:rgba(255,255,255,.3);
  text-shadow:0 0 10px rgba(255,255,255,.2),0 1px 2px rgba(11,5,5,.45);
}
body.alb-red .lyr.is-now{
  color:#fff;
  text-shadow:
    0 0 7px rgba(255,255,255,.95),
    0 0 24px rgba(255,255,255,.7),
    0 0 52px rgba(255,121,96,.6),
    0 2px 3px rgba(11,5,5,.6);
}
body.alb-red .lyr-echo{
  color:rgba(255,255,255,.4);
  text-shadow:0 0 10px rgba(255,255,255,.28),0 1px 2px rgba(11,5,5,.45);
}
body.alb-red .lyr.is-now .lyr-echo{
  color:rgba(255,255,255,.86);
  text-shadow:0 0 14px rgba(255,255,255,.6),0 1px 2px rgba(11,5,5,.5);
}
/* la note prend le meme halo : c est un dessin, donc drop-shadow et non text-shadow */
body.alb-red .lyr-note{
  color:rgba(255,255,255,.78);
  filter:drop-shadow(0 0 9px rgba(255,255,255,.65))
         drop-shadow(0 0 26px rgba(255,133,110,.5));
}
body.alb-red .lyrics.is-tuning{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}

/* ---- lecture, pause, volume ---- */

body.alb-red .sound{
  border-color:rgba(255,255,255,.22);
  background:linear-gradient(180deg,#2a0e0a,#080302);
  box-shadow:0 0 0 2px #0b0505,0 12px 20px rgba(0,0,0,.45),inset 0 2px 3px rgba(255,255,255,.24);
}
body.alb-red .sound:hover{box-shadow:0 0 0 2px #0b0505,0 18px 26px rgba(0,0,0,.55)}
body.alb-red .sound:focus-visible{outline-color:#fff}
body.alb-red .ico-pause i{background:#fff}
body.alb-red .ico-play{border-left-color:#fff}
body.alb-red .sound.is-waiting{animation:waitred 1.6s ease-in-out infinite}
@keyframes waitred{
  0%,100%{box-shadow:0 0 0 2px #0b0505,0 12px 20px rgba(0,0,0,.45),0 0 0 0 rgba(255,255,255,.3)}
  50%    {box-shadow:0 0 0 2px #0b0505,0 12px 20px rgba(0,0,0,.45),0 0 0 12px rgba(255,255,255,0)}
}
body.alb-red #vol{
  background:linear-gradient(90deg,#0b0505 0 var(--v,85%),rgba(11,5,5,.28) var(--v,85%) 100%);
}
body.alb-red #vol::-webkit-slider-thumb{
  border-color:rgba(255,255,255,.28);
  background:linear-gradient(180deg,#3a1610,#080302);
  box-shadow:0 4px 8px rgba(0,0,0,.5),inset 0 1px 2px rgba(255,255,255,.3);
}
body.alb-red #vol::-moz-range-thumb{
  border-color:rgba(255,255,255,.28);
  background:linear-gradient(180deg,#3a1610,#080302);
}
body.alb-red #vol:focus-visible{outline-color:#fff}



/* ==================================================================
   Trojan Horse : une nature morte sur papier vieilli
   ------------------------------------------------------------------
   Le fond est clair et chaud, a mi chemin entre l ombre et la lumiere.
   Ni le blanc ni le noir seuls n y tiennent : le texte est donc de
   l encre sombre entouree d un halo creme. Sur le papier c est le halo
   qui disparait et l encre qui parle ; sur les objets sombres poses
   dessus, c est le halo qui detache la lettre. La meme regle sert
   partout, et rien n a besoin d etre place a la main.
   ================================================================== */

body.alb-sepia{
  --paper:#c8b189;
  --ink:#1d1409;
  background:
    radial-gradient(120% 90% at 50% 12%, #a8916a 0%, #7d6748 46%, #3b2f1f 100%);
  color:#1d1409;
}

/* le papier porte deja sa lumiere et ses angles sombres */
body.alb-sepia .blob,
body.alb-sepia .glow,
body.alb-sepia .swoosh,
body.alb-sepia .halftone{display:none}

body.alb-sepia .deco{
  display:block;
  position:absolute;inset:0;z-index:0;
  overflow:hidden;
  background:url("assets/bg3.jpg?v=7") center center / cover no-repeat;
  pointer-events:none;
  opacity:0;transition:opacity 1.4s ease .3s;
  animation:bgdrift 84s ease-in-out infinite alternate;
}
body.alb-sepia.is-stage .deco,
body.alb-sepia.is-lighten .deco{opacity:1}

/* le grain du papier est deja dans l image : on n en rajoute qu un voile */
body.alb-sepia .scan{opacity:.03}
body.alb-sepia .noise{opacity:.10}
body.alb-sepia .vignette{
  background:radial-gradient(ellipse at 50% 46%,rgba(40,28,14,0) 54%,rgba(40,28,14,.34) 100%);
}

/* ---- pastilles : le rond nu, cercle d un brun d encre ---- */

body.alb-sepia .trk .bub,
body.alb-sepia .alb-t-sepia .bub{
  border-color:rgba(29,20,9,.5);
  background:#241a0e;
  box-shadow:
    0 0 0 2px rgba(247,235,208,.35),
    0 16px 26px rgba(40,28,14,.5);
}
body.alb-sepia .trk .bub-glass,
body.alb-sepia .alb-t-sepia .bub-glass{display:none}
body.alb-sepia .trk .bub::after,
body.alb-sepia .alb-t-sepia .bub::after{
  background:none;
  box-shadow:inset 0 0 0 1px rgba(29,20,9,.45);
}
body.alb-sepia .trk .bub-art,
body.alb-sepia .alb-t-sepia .bub-art{opacity:1}
body.alb-sepia .trk .bub:hover,
body.alb-sepia .alb-t-sepia .bub:hover{
  box-shadow:
    0 0 0 2px rgba(29,20,9,.85),
    0 26px 40px rgba(40,28,14,.55);
}
body.alb-sepia .trk .bub-num{
  color:rgba(250,240,218,.82);
  text-shadow:0 1px 3px rgba(29,20,9,.9);
}
/* la piste ouverte est cerclee d encre, doublee de creme pour tenir
   aussi bien sur le papier clair que sur les objets sombres */
body.alb-sepia .trk.is-current .bub,
body.alb-sepia .alb-t-sepia.is-current .bub{
  box-shadow:
    0 0 0 3px #1d1409,
    0 0 0 5px rgba(247,235,208,.75),
    0 16px 26px rgba(40,28,14,.5);
}
body.alb-sepia .alb-t-paper.is-current .bub{
  box-shadow:
    0 0 0 3px #1d1409,
    0 16px 26px rgba(40,28,14,.5),
    inset 0 2px 3px rgba(255,255,255,.9);
}
body.alb-sepia .alb-t-red.is-current .bub{
  box-shadow:
    0 0 0 3px #7d1604,
    0 0 0 5px rgba(247,235,208,.7),
    0 16px 26px rgba(40,28,14,.5);
}

/* ---- le texte : de l encre, avec un halo creme autour ---- */

/* Le fond est a mi chemin : ni clair ni sombre, il ne donnait a lui seul
   qu un contraste de 3 pour 1, sous le seuil de lecture. Le halo n est donc
   pas une lueur mais une plaque : plusieurs ombres serrees et opaques qui
   remplacent le fond juste autour de la lettre.

   Sa couleur est prise dans le papier lui meme, non dans le blanc. Les tons
   les plus clairs du fond montent a rgb(206,170,120) ; la plaque se pose un
   cran au dessus, en sable chaud, ce qui la fait lire comme une eclaircie du
   papier et non comme une etiquette rapportee. Le contraste y reste de 10
   pour 1, bien au dessus du seuil, alors que le blanc creme d avant tranchait
   sur tout le reste de la page. */
body.alb-sepia .trk-name,
body.alb-sepia .alb-name{
  color:#2a1d0e;font-weight:700;
  text-shadow:
    0 0 2px rgba(224,202,162,1),
    0 0 4px rgba(224,202,162,1),
    0 0 7px rgba(224,202,162,1),
    0 0 12px rgba(222,199,157,.9),
    0 0 22px rgba(216,191,146,.55);
}
body.alb-sepia .trk.is-current .trk-name,
body.alb-sepia .alb.is-current .alb-name{
  color:#0e0802;
  text-shadow:
    0 0 2px rgba(235,216,180,1),
    0 0 5px rgba(235,216,180,1),
    0 0 9px rgba(232,212,174,1),
    0 0 16px rgba(228,206,166,.95),
    0 0 34px rgba(220,196,150,.65);
}
body.alb-sepia .trk-feat{
  color:#3a2a14;
  text-shadow:
    0 0 2px rgba(224,202,162,1),
    0 0 4px rgba(224,202,162,1),
    0 0 8px rgba(220,196,152,.9);
}

/* ---- les paroles, sur le meme principe ----
   Elles heritaient des regles du papier clair : de l encre sombre avec un
   liseré blanc, pense pour un fond a 250 de clarte. Sur ce papier a 146 la
   ligne a venir tombait a 3 pour 1. Elles reprennent donc la plaque de sable,
   d autant plus dense que la ligne est proche de celle qu on chante. */
body.alb-sepia .lyr{
  color:rgba(38,26,12,.52);
  text-shadow:0 0 3px rgba(224,202,162,.9),0 0 7px rgba(224,202,162,.75);
}
body.alb-sepia .lyr:hover{
  color:rgba(30,20,8,.8);
  text-shadow:0 0 3px rgba(230,210,172,1),0 0 8px rgba(226,204,164,.85);
}
body.alb-sepia .lyr.is-past{
  color:rgba(38,26,12,.34);
  text-shadow:0 0 3px rgba(224,202,162,.7),0 0 7px rgba(224,202,162,.5);
}
body.alb-sepia .lyr.is-now{
  color:#140c02;
  text-shadow:
    0 0 2px rgba(238,220,186,1),
    0 0 5px rgba(238,220,186,1),
    0 0 10px rgba(234,214,178,.98),
    0 0 20px rgba(228,206,166,.85),
    0 0 40px rgba(220,196,150,.6);
}
body.alb-sepia .lyr-echo{
  color:rgba(38,26,12,.42);
  text-shadow:0 0 3px rgba(224,202,162,.85);
}
body.alb-sepia .lyr.is-now .lyr-echo{
  color:rgba(20,12,2,.82);
  text-shadow:0 0 4px rgba(236,218,182,1),0 0 9px rgba(230,210,170,.9);
}
/* la note est un dessin, donc drop-shadow et non text-shadow */
body.alb-sepia .lyr-note{
  color:#2a1d0e;
  filter:drop-shadow(0 0 4px rgba(232,212,174,1))
         drop-shadow(0 0 12px rgba(224,202,162,.8));
}
body.alb-sepia .lyrics.is-tuning{box-shadow:inset 0 0 0 1px rgba(58,42,20,.5)}

body.alb-sepia .trk .bub:focus-visible,
body.alb-sepia .alb-t-sepia:focus-visible .bub{outline-color:#1d1409}

/* ---- la pochette, avec l ombre franche du style ---- */

body.alb-sepia .sleeve{
  filter:none;
  box-shadow:14px 16px 0 rgba(29,20,9,.72);
}

/* ---- la platine passe au brun sombre : elle se pose sur le papier
        comme un objet de plus de la nature morte ---- */

body.alb-sepia .deck-plinth{
  background:linear-gradient(168deg,#2b1e10 0%,#1a1108 48%,#0d0804 100%);
  box-shadow:
    0 30px 46px rgba(30,20,10,.5),
    0 6px 12px rgba(30,20,10,.4),
    inset 0 1px 0 rgba(247,235,208,.16);
}
body.alb-sepia .deck-face{
  background:linear-gradient(178deg,#3a2a18 0%,#241a0e 40%,#2e2113 70%,#170f07 100%);
  box-shadow:inset 0 1px 0 rgba(247,235,208,.16),inset 0 -2px 8px rgba(20,12,4,.6);
}
body.alb-sepia .deck-face::after{display:none}
body.alb-sepia .platter::before{
  background:radial-gradient(circle at 38% 30%,#463320 0%,#2a1e11 46%,#150e06 100%);
  box-shadow:0 10px 20px rgba(30,20,10,.5),inset 0 0 0 1px rgba(247,235,208,.14);
}
/* le bras prend le laiton des bijoux plutot que le chrome */
body.alb-sepia .arm-tube{background:linear-gradient(180deg,#c8ab72,#8d7444 52%,#4b3c22)}
body.alb-sepia .arm-pivot{
  background:radial-gradient(circle at 36% 30%,#d6bb85,#8d7444 60%,#453718 100%);
}
body.alb-sepia .spindle{background:linear-gradient(180deg,#e0c68e,#6d5a32)}
body.alb-sepia .deck-knob{
  background:linear-gradient(180deg,#c69a4e,#6d4c1c);
  box-shadow:0 2px 4px rgba(20,12,4,.6),inset 0 1px 0 rgba(255,240,205,.45);
}

/* ---- lecture, pause, volume ---- */

body.alb-sepia .sound{
  border-color:rgba(247,235,208,.3);
  background:linear-gradient(180deg,#3a2a18,#1a1108);
  box-shadow:0 0 0 2px rgba(247,235,208,.35),0 12px 20px rgba(30,20,10,.45),
             inset 0 2px 3px rgba(247,235,208,.22);
}
body.alb-sepia .sound:hover{box-shadow:0 0 0 2px rgba(29,20,9,.85),0 18px 26px rgba(30,20,10,.55)}
body.alb-sepia .sound:focus-visible{outline-color:#1d1409}
body.alb-sepia .ico-pause i{background:#f7ebd0}
body.alb-sepia .ico-play{border-left-color:#f7ebd0}
body.alb-sepia #vol{
  background:linear-gradient(90deg,#2a1d0e 0 var(--v,85%),rgba(247,235,208,.4) var(--v,85%) 100%);
}
body.alb-sepia #vol::-webkit-slider-thumb{
  border-color:rgba(247,235,208,.4);
  background:linear-gradient(180deg,#3a2a18,#1a1108);
  box-shadow:0 4px 8px rgba(30,20,10,.5),inset 0 1px 2px rgba(247,235,208,.3);
}
body.alb-sepia #vol::-moz-range-thumb{
  border-color:rgba(247,235,208,.4);
  background:linear-gradient(180deg,#3a2a18,#1a1108);
}
body.alb-sepia #vol:focus-visible{outline-color:#1d1409}

/* ---- ce qui vit sur cette page ----
   Ni fleurs ni decrochages video : sur une nature morte, ce qui bouge est
   la poussiere prise dans la lumiere. Elle reprend les memes elements que
   les braises de la page rouge, en plus lent et en plus discret. */

body.alb-sepia .fl,
body.alb-sepia .tear,
body.alb-sepia .ray{display:none}

body.alb-sepia .ember{
  display:block;position:absolute;
  width:3px;height:3px;border-radius:50%;
  background:rgba(255,246,222,.9);
  box-shadow:0 0 6px rgba(255,238,200,.85);
  opacity:0;
  animation:rise 34s linear infinite;
}
body.alb-sepia .ember.e1{left:9%; animation-duration:31s;animation-delay:-3s}
body.alb-sepia .ember.e2{left:21%;animation-duration:44s;animation-delay:-19s;width:2px;height:2px}
body.alb-sepia .ember.e3{left:33%;animation-duration:37s;animation-delay:-28s;width:2px;height:2px}
body.alb-sepia .ember.e4{left:44%;animation-duration:49s;animation-delay:-11s;width:2px;height:2px}
body.alb-sepia .ember.e5{left:55%;animation-duration:35s;animation-delay:-33s}
body.alb-sepia .ember.e6{left:66%;animation-duration:46s;animation-delay:-22s;width:2px;height:2px}
body.alb-sepia .ember.e7{left:77%;animation-duration:33s;animation-delay:-6s;width:2px;height:2px}
body.alb-sepia .ember.e8{left:86%;animation-duration:51s;animation-delay:-40s;width:2px;height:2px}
body.alb-sepia .ember.e9{left:95%;animation-duration:39s;animation-delay:-15s}

/* ---- album sans fichiers : ce qui ne sert qu au son s efface ----
   La colonne des paroles resterait vide et les commandes ne commanderaient
   rien. Le disque, lui, continue de tourner : c est du decor, pas du son. */
/* retirees de la mise en page, et pas seulement rendues invisibles : sur
   telephone la colonne des paroles gardait sinon sa place, et laissait un
   grand vide entre la platine et le choix des albums */
body.is-silent .lyrics,
body.is-silent .controls{display:none}
body.is-silent.is-landed .disc-spin{animation-play-state:running}



/* La poudrerie : un voile de neige portee par le vent, tres loin derriere.
   Ce ne sont pas des flocons mais des trainees, parce qu a cette distance
   l oeil ne separe plus les grains : il ne voit que le vent. Deux voiles de
   vitesses differentes suffisent a donner l epaisseur ; un seul se serait lu
   comme un motif qui glisse. */
.blizz{display:none}
body.alb-paper .blizz{
  display:block;
  position:absolute;left:-60%;top:-40%;
  width:220%;height:180%;
  pointer-events:none;
  /* grises, non blanches : sur ce papier presque blanc, des trainees
     blanches ne se voient pas plus que les flocons blancs du premier essai */
  background:repeating-linear-gradient(
      104deg,
      rgba(104,132,192,0) 0 18px,
      rgba(104,132,192,.30) 18px 21px,
      rgba(104,132,192,0) 21px 46px);
  filter:blur(7px);
  opacity:0;
  transition:opacity 2.4s ease 1.4s;
}
body.alb-paper.is-stage .blizz,
body.alb-paper.is-lighten .blizz{opacity:.5}
body.alb-paper .blizz.b-a{animation:blizz 26s linear infinite}
body.alb-paper .blizz.b-b{
  animation:blizz 41s linear infinite reverse;
  filter:blur(13px);
  background:repeating-linear-gradient(
      98deg,
      rgba(104,132,192,0) 0 30px,
      rgba(104,132,192,.22) 30px 35px,
      rgba(104,132,192,0) 35px 78px);
}
body.alb-paper.is-stage .blizz.b-b{opacity:.38}
@keyframes blizz{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(-46px,190px,0)}
}
@media (prefers-reduced-motion:reduce){
  body.alb-paper .blizz{display:none}
}

/* ==================================================================
   La tempete de neige d Unmusique
   ------------------------------------------------------------------
   Elle n existe que sur la page claire : les deux autres albums ont
   leur propre climat, et rien ici ne doit deborder sur eux.

   Un seul canevas, anime par le script : vitesse, vent et rafales
   suivent le tempo de la piste qui joue. Le flocon garde son coeur
   bleute et son halo blanc, pour se lire sur le papier comme sur la
   platine noire.
   ================================================================== */

.snow{display:none}
body.alb-paper .snow{
  display:block;
  position:fixed;left:0;top:0;width:100%;height:100%;z-index:11;
  pointer-events:none;
  opacity:0;transition:opacity 2s ease 1.2s;
}
/* elle arrive avec le reste de la scene, une fois le disque pose */
body.alb-paper.is-stage .snow,
body.alb-paper.is-lighten .snow{opacity:1}

/* le systeme demande le calme : pas de tempete */
@media (prefers-reduced-motion:reduce){
  body.alb-paper .snow{display:none}
}

@media (max-width: 820px){

  body{display:block;padding:0}

  .fit{width:100% !important;height:100dvh !important;margin:0}

  .stage{
    position:relative;left:auto;top:auto;
    width:100%;height:100dvh;
    transform:none !important;
    display:flex;flex-direction:column;
  }

  /* ce qui ne sert qu a la belle image disparait. La platine, elle, reste :
     c est le coeur du site. La pochette part, son interet est le survol. */
  .sleeve-slot,.swoosh,.blob,.glow,
  .halftone,.scan,.noise,.vignette{display:none}

  /* --- la platine, reduite pour tenir dans la largeur du telephone ---
     Le bloc garde ses 660x396 pour que ses pieces restent bien placees ;
     seule l image est reduite. Les marges negatives ramenent la place qu il
     occupe dans la colonne a sa taille reelle a l ecran. */
  .deck{
    display:block;
    position:relative;left:auto;top:auto;
    flex:0 0 auto;align-self:center;
    width:660px;height:396px;
    transform:rotate(-6deg) translateY(22px) scale(.43);
    transform-origin:50% 50%;
    margin:-91px -170px;
    transition:transform 1.2s cubic-bezier(.2,.72,.2,1) .45s,opacity 1.2s ease .45s;
  }
  /* sans cette ligne, la regle de bureau (plus specifique) reprendrait la main
     et rendrait a la platine sa taille d ecran large */
  body.is-stage .deck{transform:rotate(-6deg) scale(.46)}
  /* la secousse est calee sur la taille du bureau : elle ferait sauter
     l echelle du telephone */
  body.is-hit .deck{animation:none}

  .intro-logo{width:200px;height:200px;margin:-100px 0 0 -100px}

  /* --- la rangee de pistes : une bande qui glisse au doigt --- */
  .dock{
    position:static;display:block;
    flex:0 0 auto;
    padding:12px 0 6px;
    opacity:0;transform:none;
    transition:opacity .5s ease;
    pointer-events:auto;
  }
  body.is-stage .dock{opacity:1;transform:none}

  .dock-win{
    width:100%;height:auto;
    perspective:none;
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }
  .dock-win::-webkit-scrollbar{display:none}

  .dock-rail{
    position:static;
    transform-style:flat;
    pointer-events:auto;
    display:flex;gap:12px;
    width:max-content;padding:0 16px;
  }

  /* le script ne pose plus aucun style en ligne ici : on remet tout a plat */
  .trk{
    position:static;
    flex:0 0 76px;width:76px;
    gap:7px;
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    pointer-events:auto !important;
    scroll-snap-align:center;
  }
  .bub{width:66px;height:66px;margin:0 auto}
  .bub-art{width:40px;height:40px}
  .bub-num{display:none}
  .trk-name{font-size:8px;letter-spacing:.06em;line-height:1.3}
  .trk.is-current .bub{box-shadow:0 0 0 2px rgba(20,18,15,.7),0 6px 12px rgba(20,18,15,.14)}

  /* --- les paroles prennent toute la hauteur restante --- */
  .lyrics{
    position:relative;right:auto;top:auto;
    flex:1 1 auto;min-height:0;
    width:100%;height:auto;
    perspective:600px;
    transform:none;
    transition:opacity .6s ease .2s;
    touch-action:none;                 /* le doigt fait defiler le texte, pas la page */
  }
  body.is-stage .lyrics{opacity:1;transform:none}
  .lyr-track{padding:44px 18px}
  .lyr{font-size:19px;line-height:1.3}
  .lyr.is-now{transform:none}          /* pas d agrandissement : rien ne depasse */

  /* --- le choix de l album, juste au dessus de la barre --- */
  /* album sans paroles ni commandes : la colonne est bien plus courte, on la
     pose au milieu de l ecran au lieu de la laisser pendre en haut */
  body.is-silent .stage{justify-content:center}
  body.is-silent .albums{margin-top:26px}

  .albums{
    position:static;bottom:auto;
    flex:0 0 auto;
    gap:22px;padding:6px 0 2px;
    transform:none;
    transition:opacity .8s ease .95s;
  }
  body.is-stage .albums{transform:none}
  .alb .bub{width:50px;height:50px}
  .alb{gap:6px}
  .alb-name{font-size:8px;letter-spacing:.08em;max-width:90px}

  /* --- la barre du bas --- */
  .controls{
    position:static;
    flex:0 0 auto;
    justify-content:center;gap:18px;
    padding:8px 18px calc(12px + env(safe-area-inset-bottom));
    transform:none;
    transition:opacity .6s ease .2s;
  }
  body.is-stage .controls{opacity:1;transform:none}
  .sound{width:58px;height:58px}       /* assez large pour le pouce */
  #vol{width:150px;height:8px}
}

/* sur telephone le cadrage ne change pas : l image tient toujours en entier.
   On la retient seulement un peu, pour que les paroles restent nettes. */
@media (max-width: 820px){
  body.alb-red .deco{opacity:.8}
  body.alb-red.is-stage .deco,
  body.alb-red.is-lighten .deco{opacity:.8}
}


/* ==================================================================
   Jane : l ouverture filmee
   ------------------------------------------------------------------
   En arrivant sur l album, un film de cinq secondes garnit le papier nu
   piece par piece. L interface rentre dans le fond pendant ce temps,
   puis en remonte avec la cascade de la premiere visite.
   ================================================================== */

/* le film : place par le script a la meme echelle et au meme endroit que
   le fond, pour que sa derniere image se confonde avec lui */
.jr-intro{display:none}
body.alb-red .jr-intro{
  display:block;
  position:absolute;left:0;top:0;
  object-fit:fill;                 /* la boite a deja la forme du film */
  opacity:0;
  pointer-events:none;
  transition:opacity .7s ease;     /* a la fin : fondu vers le fond, identique */
}
body.alb-red.is-intro .jr-intro{opacity:1;transition:none}

/* sans is-stage le fond s effacerait : il reste la pendant le film */
body.alb-red.is-intro .deco{opacity:1}

/* fleurs, lumieres et braises attendent la fin du film */
body.alb-red .deco-life{transition:opacity 1.4s ease .8s}
body.alb-red.is-intro .deco-life{opacity:0;transition:opacity .3s ease}

/* On entre dans le film : tout plonge vite, sans les delais de la cascade.
   On en sort : ces regles tombent, et chaque piece reprend ses delais a
   elle — la page renait comme a la premiere visite. */
body.is-intro .dock,
body.is-intro .lyrics,
body.is-intro .controls,
body.is-intro .albums,
body.is-intro .sleeve,
body.is-intro .deck{transition:opacity .3s ease,transform .4s ease}
body.is-intro .deck-plinth,
body.is-intro .deck-face,
body.is-intro .platter-mat,
body.is-intro .spindle,
body.is-intro .arm,
body.is-intro .deck-knob,
body.is-intro .platter::before{transition:opacity .3s ease}

/* pendant le film la platine replonge en profondeur, pour en remonter a la
   fin comme a la premiere visite ; sur telephone elle a sa propre echelle,
   deja geree par la feuille mobile */
@media (min-width: 821px){
  body.is-intro .deck{transform:rotate(-6deg) translateY(28px) scale(.955)}
}

/* Le disque ne reste pas seul a tourner sur un plateau disparu.
   La regle du retour (lente, avec delai) et celle de la sortie (rapide)
   pesaient le meme poids, et le retour etait ecrit apres : il imposait sa
   lenteur des l entree dans le film, et le disque s attardait seul pres de
   deux secondes apres tout le reste. La sortie est desormais plus specifique
   et ecrite apres : elle gagne pendant le film, le retour reprend a la fin. */
body.alb-red .disc-spin{transition:opacity 1.25s ease .5s}
body.alb-red.is-intro .disc-spin{opacity:0;transition:opacity .3s ease}

/* ---- le bouton pour passer ---- */
.skip-intro{display:none}
body.is-intro .skip-intro{
  display:block;
  position:fixed;right:34px;bottom:32px;z-index:40;
  padding:10px 20px;
  border:1px solid rgba(255,255,255,.34);border-radius:999px;
  background:rgba(11,5,5,.42);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font:700 11px/1 "Arial Narrow","Helvetica Neue",Helvetica,Arial,sans-serif;
  letter-spacing:.24em;text-transform:uppercase;
  color:#fff;
  text-shadow:0 0 8px rgba(255,255,255,.6);
  cursor:pointer;
  animation:skipin .6s ease .5s both;
}
body.is-intro .skip-intro:hover{background:rgba(11,5,5,.62);border-color:rgba(255,255,255,.6)}
body.is-intro .skip-intro:focus-visible{outline:2px solid #fff;outline-offset:4px}
@keyframes skipin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (max-width: 820px){
  /* sur telephone le fond est un peu voile : le film l est autant */
  body.alb-red.is-intro .deco{opacity:.8}
  body.is-intro .skip-intro{right:16px;bottom:18px}
}
@media (prefers-reduced-motion:reduce){
  body.alb-red .jr-intro{display:none}
}