/* FunkyBreslev, socle du nouveau site. Valeurs reprises du prototype validé (docs/research/offre-2026-10/prototype/index.html).
   À plat : aucun arrondi sur les blocs et boutons ; seuls .disque (logo) et .vinyle font exception. Ambre #e8a93b : aplat d’action seulement, jamais en texte sur crème. */
/* Polices auto-hébergées (OFL), latin + latin-ext. */
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/big-shoulders-display-latin-ext-900-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/big-shoulders-display-latin-900-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/big-shoulders-display-latin-ext-800-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/big-shoulders-display-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/geist-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/geist-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/geist-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/geist-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/geist-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/geist-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --creme:#f5f3ee; --encre:#1e1220; --encre-2:rgba(30,18,32,.68); --encre-3:#635a61;
  --filet:rgba(30,18,32,.14); --ambre:#e8a93b; --or:#e8a93b; --or-texte:var(--encre);
  --titre:"Big Shoulders Display","Oswald","Arial Narrow",Impact,sans-serif;
  --texte:"Geist","Helvetica Neue",Arial,sans-serif;
  --g:20px; --bandeau:72px;
  color-scheme:light;
}
@media (max-width:600px){:root{--bandeau:64px}}

/* Reset */
*{box-sizing:border-box}
html{background:var(--creme);scrollbar-gutter:stable}
html.fige{overflow:hidden}
body{margin:0;background:var(--creme);color:var(--encre);font:400 16px/1.45 var(--texte);-webkit-font-smoothing:antialiased;overflow-x:hidden}
html.joue body{padding-bottom:calc(var(--bandeau) + env(safe-area-inset-bottom,0px))}
button,input{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
a{color:inherit}
[data-mesure-refus]{font:inherit;color:inherit;background:none;border:0;border-radius:0;padding:0;margin:0;text-decoration:underline;cursor:pointer}
[data-mesure-refus]:focus-visible{outline:2px solid var(--encre);outline-offset:3px}
:focus-visible{outline:2px solid var(--encre);outline-offset:3px}
img{display:block;max-width:100%}
/* Pas de mot seul en fin de titre ou de phrase */
h1,h2,h3,.aff,.titre-page,.prix-l,.or-l{text-wrap:balance}
p,li,.chapo,.aide{text-wrap:pretty}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Typographie */
.aff{font-family:var(--titre);font-weight:900;line-height:.86;letter-spacing:-.01em;margin:0}
h1.aff{font-size:clamp(44px,11vw,96px);text-transform:none;line-height:1.12}
/* newsletter : même style que le texte (Brice, 21/10) */
.or{color:#ba7e16}   /* contraste, orange profond choisi par Brice le 20/10 (#ba7e16 = 3,11:1 sur crème, grand texte) */
.page{max-width:560px;margin:0 auto;position:relative}
.gouttiere{padding-inline:var(--g)}
.heros{padding-top:14px;padding-bottom:40px}
.heros .sur{margin:0 0 10px;font-size:16px}
.heros .genres{margin:12px 0 18px;font-size:17px}
@media (min-width:601px){.heros .genres{margin-top:26px}}
.heros .demo{margin:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.ecoute{min-height:48px;font-family:var(--titre);font-weight:900;font-size:26px;line-height:1;text-align:left}
.ecoute[aria-pressed=true]{color:var(--encre);text-decoration:underline;text-decoration-color:#ba7e16;text-decoration-thickness:3px;text-underline-offset:4px}

/* Disque du logo */
.disque{display:grid;place-items:center;flex-shrink:0;border-radius:50%;background:var(--encre)}
.disque img{width:80%;height:80%;object-fit:contain}

/* En-tête */
.evite{position:absolute;left:var(--g);top:-60px;z-index:80;padding:10px 0;background:var(--creme);font-weight:600}
.evite:focus{top:8px}
/* Bandeau défilant (haut de page) : à plat, hauteur réservée dès le HTML, pause au survol, au focus et au toucher (classe .pause), messages fixes si mouvement réduit */
.defile{height:36px;overflow:hidden;background:var(--encre);color:var(--creme);font:500 13px/36px var(--texte)}
@media (min-width:900px){.defile{margin-inline:calc(-1*var(--g))}}
.defile ul{display:flex;width:max-content;margin:0;padding:0;list-style:none;white-space:nowrap}
.defile li{flex:none;padding:0 28px}
.defile a{color:inherit;text-decoration:none}
/* Cible 44 px : le lien fait 36 px (bloc) et son ::after transparent descend de 8 px sous le bandeau ; seul l'axe horizontal reste découpé (overflow-x:clip), la hauteur visible ne change pas. */
.defile{overflow-x:clip;overflow-y:visible}
.defile a{position:relative;display:block}
.defile a::after{content:"";position:absolute;left:0;right:0;top:0;bottom:-8px;z-index:11}
.defile.anime ul{position:relative;z-index:11}
.defile li.sortie a{display:inline}
.defile a:hover,.defile a:focus-visible{text-decoration:underline;text-underline-offset:4px}
.defile a:focus-visible{outline:2px solid var(--ambre);outline-offset:2px}
.defile.anime ul{animation:fb-defile var(--d,60s) linear infinite}
.defile.anime:focus-within ul,.defile.anime.pause ul{animation-play-state:paused}
@media (hover:hover){.defile.anime:hover ul{animation-play-state:paused}}
.defile{position:relative}
.defile .etat{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@keyframes fb-defile{to{transform:translateX(calc(-1*var(--w)))}}
/* Mouvement réduit : le bandeau défile aussi, sur une seule ligne (choix de Brice, 20/10) ; pause au survol, au focus et au toucher inchangée. */
@media (prefers-reduced-motion:reduce){.defile.anime ul{animation:fb-defile var(--d,60s) linear infinite!important}}
.entete{display:flex;align-items:flex-start;gap:12px;padding:16px var(--g) 0}
.entete .disque{width:96px;height:96px}
.entete nav{margin-left:auto;display:flex;align-items:center;gap:2px;padding-top:24px}
.entete nav a{min-height:44px;display:inline-flex;align-items:center;padding-inline:9px;font-weight:500;font-size:16px;white-space:nowrap;text-decoration:none}
.sac{width:44px;height:44px;display:grid;place-items:center;position:relative;flex-shrink:0}
.sac svg{width:23px;height:23px;fill:none;stroke:var(--encre);stroke-width:1.6}
.pastille{position:absolute;top:0;right:-2px;width:22px;min-width:22px;height:22px;padding:0;border-radius:50%;overflow:hidden;background:var(--encre);color:var(--creme);font:600 12px/22px var(--texte);text-align:center}
.pastille[hidden]{display:none}
@media (max-width:370px){.entete{gap:6px}.entete .disque{width:72px;height:72px}.entete nav{gap:0}.entete nav a{padding-inline:6px;font-size:15px}}

/* Pied */
.pied{padding-top:40px;padding-bottom:32px;text-align:center}
.pied .desc{margin:0;font-size:17px}
.pied .reseaux{display:flex;justify-content:center;gap:28px;margin-top:14px}
.pied .reseaux a{min-height:48px;display:inline-flex;align-items:center;gap:6px;font-size:20px;text-decoration:none}
.pied .reseaux svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.langue{margin-top:10px;font-size:20px;min-height:46px;display:flex;justify-content:center;align-items:center;gap:8px}
.langue b{font-weight:600}
.langue b,.langue a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
@media(max-width:899px){.pied .reseaux a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}.pied .langue b{color:var(--encre);font-weight:700;text-decoration:underline;text-decoration-color:#ba7e16;text-decoration-thickness:3px;text-underline-offset:4px}.pied .desc .m-seul{display:block;font-weight:700;color:var(--encre);text-wrap:balance}}
.pied .copy{margin:8px 0 0;font-size:16px}
/* Pied sur téléphone (maquette footer-2) : crème épuré, tout à gauche, liens en deux lignes séparées par des points */
@media(max-width:899px){
  .pied{display:flex;flex-wrap:wrap;align-items:center;text-align:left;padding-top:40px;padding-bottom:24px;border-top:1px solid var(--filet)}
  .pied>*{flex:0 0 100%}
  .pied .lettre{margin:0;padding:0;border-bottom:0}
  .pied .lettre h2{font-size:44px;line-height:.92}
  .pied .lettre>p:not(.raison){color:var(--encre-2)}
  .pied .lettre input[type=email]{font-size:17px}
  .pied .lettre .case{padding:10px 0 8px;color:var(--encre-2);font-size:14px}
  .pied .lettre .raison{margin:4px 0 0}
  .pied .lettre .raison:empty{min-height:0;margin:0}
  .pied .desc{margin:30px 0 0;padding-top:24px;border-top:1px solid var(--filet);font-size:16px;font-weight:600}
  .pied .desc .m-seul{display:inline;font-weight:600;text-wrap:initial}
  .pied .reseaux{flex:0 0 auto;justify-content:flex-start;gap:18px;margin:0}
  .pied .reseaux a{min-height:44px;gap:5px;font-size:16px;text-decoration:none}
  .pied .reseaux svg{width:15px;height:15px}
  .pied .langue{flex:0 0 auto;margin:0 -12px 0 auto;font-size:16px;min-height:44px}
  .pied .langue span{color:var(--encre-3)}
  .pied .langue b{font-size:19px}
  .pied .copy{margin:6px 0 0;font-size:13px;color:var(--encre-3)}
}

/* Pied 12a « Mur collé » (choisi par Brice le 23/10) : un rail de pochettes collé au haut du pied, puis, centrés, le logo, la phrase
   du label, trois lignes de liens (44 px de haut, 29 px entre liens), le trait, © + liens légaux, langue et thème. Hooks gardés
   (navigation.js, theme.js) : footer.pied.gouttiere, .pied-appel, .langue, .theme. Mode sombre : couleurs seulement, scripts/generer-sombre.py
   (variables locales --fb fond, --ft texte, --fm texte discret, --fl trait, --hv survol). Ordinateur : ordinateur.css. */
footer.pied.gouttiere{--fb:var(--encre);--ft:var(--creme);--fm:rgba(245,243,238,.68);--fl:rgba(245,243,238,.14);--hv:var(--ambre);
  display:block;position:relative;margin:0;padding:0;overflow:hidden;text-align:center;background-color:var(--fb);color:var(--ft);border-top:0;font:400 16px/1.45 var(--texte)}
footer.pied.gouttiere p{margin:0}
footer.pied.gouttiere a{color:inherit;text-decoration:none}
footer.pied.gouttiere a:hover{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
footer.pied.gouttiere .pied-mur{overflow:hidden;line-height:0;container-type:inline-size}
footer.pied.gouttiere .pied-rail{display:flex;width:max-content;animation:pied-defile 240s linear infinite}
@keyframes pied-defile{to{transform:translateX(-50%)}}
footer.pied.gouttiere .pied-rail img{display:block;flex:none;width:25cqw;height:25cqw}
@media (prefers-reduced-motion:reduce){footer.pied.gouttiere .pied-rail{animation:none}}
footer.pied.gouttiere .pied-corps{padding:clamp(36px,4.5vw,64px) var(--g) 0;text-align:center}
footer.pied.gouttiere .pied-appel{display:block}
footer.pied.gouttiere .pied-logo{display:block;height:auto;max-width:100%;width:clamp(170px,14vw,220px);margin:0 auto}
footer.pied.gouttiere .pied-slg{margin-top:16px;font:900 30px/1 var(--titre);letter-spacing:-.01em;white-space:nowrap}
footer.pied.gouttiere .pied-liens{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-top:20px;font:400 17px/1.3 var(--texte)}
footer.pied.gouttiere .pied-r{display:inline-flex;align-items:center;flex-wrap:nowrap;white-space:nowrap;gap:0 29px}
footer.pied.gouttiere .pied-r2{gap:0}
footer.pied.gouttiere .pied-r2>a:nth-of-type(2){margin-left:29px}
footer.pied.gouttiere a.pied-l{display:inline-flex;align-items:center;gap:6px;min-height:44px}
footer.pied.gouttiere .pied-ics{display:inline-flex;align-items:center;gap:0;margin-left:calc(29px - 8.875px)}
footer.pied.gouttiere a.pied-ic{display:inline-grid;place-items:center;width:44px;height:44px;min-height:44px}
footer.pied.gouttiere a.pied-ic svg{display:block;width:24px;height:24px}
footer.pied.gouttiere a.pied-ic.yt svg{width:30px;height:auto}
footer.pied.gouttiere a.pied-ic.tt{margin-left:calc(29px - 8.875px - 11.57px);margin-right:-11.57px}
footer.pied.gouttiere a.pied-ic:hover{color:var(--hv);text-decoration:none}
footer.pied.gouttiere .pied-bas{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 20px;margin-top:clamp(20px,3vw,36px);padding:16px 0 8px;border-top:1px solid var(--fl);color:var(--fm)}
footer.pied.gouttiere .pied-g{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 18px}
footer.pied.gouttiere .pied-bas .copy{margin:0;padding:0;font-size:14px;line-height:1.45;color:inherit}
footer.pied.gouttiere .pied-lg{display:inline-flex;align-items:center;flex-wrap:nowrap;white-space:nowrap;gap:0 14px}
footer.pied.gouttiere .pied-lg i{font-style:normal;opacity:.5}
@media (max-width:899px){footer.pied.gouttiere .pied-g{width:100%}footer.pied.gouttiere .pied-bas .copy{flex:0 0 100%}}
footer.pied.gouttiere .pied-bas .reglages{display:flex;align-items:center;gap:6px;margin:0}
footer.pied.gouttiere .pied-bas .langue{display:flex;align-items:center;gap:2px;margin:0;min-height:0;font:500 15px/1 var(--texte);color:inherit}
footer.pied.gouttiere .pied-bas .langue b,footer.pied.gouttiere .pied-bas .langue a{position:relative;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:inherit;font-weight:600;color:inherit;text-decoration:none}
footer.pied.gouttiere .pied-bas .langue span{opacity:.75;margin:0 -6px;color:inherit}
footer.pied.gouttiere .pied-bas .filet-v{flex:none;width:1px;height:18px;margin:0 4px;background-color:currentColor;opacity:.25}
footer.pied.gouttiere .pied-bas .theme{display:flex;align-items:center;gap:0;font-size:inherit;color:inherit}
footer.pied.gouttiere .pied-bas .theme button{position:relative;appearance:none;width:44px;min-width:44px;height:44px;margin:0;padding:0;display:inline-grid;place-items:center;background:none;border:0;color:inherit;opacity:.6;cursor:pointer}
footer.pied.gouttiere .pied-bas .theme button[aria-checked="true"]{opacity:1}
footer.pied.gouttiere .pied-bas .theme svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
footer.pied.gouttiere .pied-bas .langue b::after,footer.pied.gouttiere .pied-bas .theme button[aria-checked="true"]::after{content:"";position:absolute;left:50%;top:33px;width:18px;height:3px;margin-left:-9px;background-color:var(--ambre)}

/* Lecteur : barre pleine largeur, 72 px (64 px mobile), pochette carrée */
.lecteur{position:fixed;left:0;right:0;bottom:0;z-index:30;transform:translateY(calc(100% + 30px));visibility:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s .35s}
.lecteur.visible{transform:none;visibility:visible;transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s}
.bandeau{max-width:560px;margin:0 auto;height:calc(var(--bandeau) + env(safe-area-inset-bottom,0px));padding:0 6px env(safe-area-inset-bottom,0px) 0;background:var(--creme);border-top:1px solid var(--filet);position:relative;display:flex;align-items:center;gap:12px}
.bandeau .poch{width:var(--bandeau);height:var(--bandeau);object-fit:cover;flex-shrink:0;outline:1px solid var(--filet);outline-offset:-1px;background:var(--filet)}
.bandeau .poch[hidden]{display:none}
.bandeau .infos{flex:1 1 auto;min-width:0}
.bandeau .t{font-family:var(--titre);font-weight:900;font-size:22px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:399px){.bandeau .s .bpm{display:none}}
.bandeau .s{font-size:13px;color:var(--encre-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.prog{position:absolute;left:0;right:0;top:-1px;height:2px;background:rgba(30,18,32,.16)}
.prog .rempli{display:block;height:2px;background:var(--ambre);width:0}
.bandeau .ic{width:44px;height:44px;display:grid;place-items:center;flex-shrink:0}
.bandeau .ic svg{width:24px;height:24px;fill:var(--encre)}
.bandeau:has(.poch[hidden]){padding-left:var(--g)}
.bandeau .ajout{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding-inline:4px;font-weight:600;font-size:15px;white-space:nowrap}
.bandeau .ajout svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7}
@media (max-width:420px){.bandeau{gap:8px}.bandeau .ajout{gap:5px;padding-inline:2px;font-size:14px}}

/* Tiroir panier */
.voile{position:fixed;inset:0;z-index:50;background:rgba(30,18,32,.35);opacity:0;pointer-events:none;transition:opacity .3s}
.voile.ouvert{opacity:1;pointer-events:auto}
.panier{position:fixed;top:0;right:calc(100% - 100vw);bottom:0;z-index:51;width:min(100vw,440px);background:var(--creme);transform:translateX(100%);transition:transform .38s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;overflow:hidden;visibility:hidden}
.panier.ouvert{transform:none;visibility:visible}
.panier .corps{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--g) 8px}
.panier .haut{display:flex;align-items:center;justify-content:space-between;min-height:64px;position:sticky;top:0;z-index:6;padding-top:calc(env(safe-area-inset-top,0px) + 10px);background:var(--creme)}
.panier .haut .disque{width:64px;height:64px}
.panier .replier{display:none;flex:0 0 auto;align-self:center;width:44px;height:44px;place-items:center;margin:0 auto;background:var(--creme)}
.panier .replier svg{width:28px;height:28px;fill:none;stroke:var(--encre);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:600px){.panier .replier{display:grid}}
.fermer{width:48px;height:48px;display:grid;place-items:center;margin-right:-10px}
.fermer svg{width:30px;height:30px;fill:none;stroke:var(--encre);stroke-width:1.6}
.panier .titre{margin-top:16px;font-size:clamp(44px,12vw,72px);text-transform:uppercase}
.panier .titre:focus{outline:none}
.jauge{position:relative;width:180px;height:180px;margin:24px auto 0}
.jauge .vinyle{inset:10px}
.jauge .chiffre{position:relative;z-index:2;font-family:var(--titre);font-weight:900;font-size:50px;line-height:1;color:var(--ambre)}
.jauge .vinyle::before{inset:24%}
.jauge i{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:transparent;border:2.5px solid var(--ambre);z-index:3;transition:background .2s}
.jauge i.paye,.jauge i.offert{background:var(--ambre)}
@media(max-height:900px){.jauge{width:140px;height:140px;margin-top:10px}.jauge .chiffre{font-size:40px}}
@media(max-height:820px){.jauge{width:124px;height:124px}.jauge .chiffre{font-size:36px}}
.promo{text-align:center;margin-top:18px}
.promo b{display:block;font-family:var(--titre);font-weight:900;font-size:31px;line-height:1}
.promo span{font-size:16px}
@media(max-width:899px){
  .panier .corps{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;align-content:start}
  .panier .corps>*{grid-column:1/-1;min-width:0}
  .panier .corps>.jauge{grid-column:1;width:88px;height:88px;margin:20px 0 0}
  .panier .corps>.promo{grid-column:2;align-self:center;text-align:left;margin:20px 0 0}
  .panier .jauge .vinyle{inset:11px}
  .panier .jauge .chiffre{font-size:22px}
  .panier .jauge i{width:8px;height:8px;margin:-4px 0 0 -4px;border-width:1.5px}
  .panier .promo b{font-size:24px;line-height:1.05}
  .panier .promo span{display:block;margin-top:5px;font-size:15px;line-height:1.35;color:var(--encre-2)}
  .panier .lignes{margin-top:18px;border-top:1px solid var(--filet);padding-top:6px}
  .panier .vide{padding-top:14px}
}
.lignes{list-style:none;margin:10px 0 0;padding:0}
.lignes li{display:grid;grid-template-columns:56px minmax(0,1fr) auto 44px;gap:14px;align-items:center;padding-block:4px}
.lignes li.vide{display:block}
.lignes .o-poch{display:block;width:56px;height:56px;overflow:hidden;background:var(--filet)}
.lignes .o-poch img{display:block;width:56px;height:56px;object-fit:cover}
.lignes .o-poch-col{background:var(--encre);display:grid;place-items:center}
.lignes .o-poch-col img{width:36px;height:36px;object-fit:contain}
.lignes .nom{font-family:var(--titre);font-weight:900;font-size:27px;line-height:.95}
.lignes .px{font-size:18px;text-align:right;font-variant-numeric:tabular-nums}
.lignes .px s{display:block;font-size:14px;color:var(--encre-2)}
.lignes .px em{display:block;font-style:normal;font-size:13px;color:var(--encre-2)}
.lignes li.inclus .px{font-size:15px;color:var(--encre-2)}
.lignes li.inclus .nom{color:var(--encre-2)}
/* Mention « prix de lancement » : le prix passe sous le titre (la mention est longue ; sinon elle écrasait la colonne du titre) */
.lignes li.mention{grid-template-columns:56px minmax(0,1fr) 44px;grid-template-areas:"p n r" "p x r"}
.lignes li.mention .o-poch{grid-area:p}.lignes li.mention .nom{grid-area:n;overflow-wrap:anywhere}.lignes li.mention .px{grid-area:x;text-align:left}.lignes li.mention .ret{grid-area:r}
.remise{margin:6px 0 0;font-size:15px;font-weight:500}
.remise[hidden]{display:none}
.lignes .ret{width:44px;height:44px;display:grid;place-items:center}
.lignes .ret svg{width:22px;height:22px;fill:none;stroke:var(--encre);stroke-width:1.6}
.vide{display:block!important;text-align:left;font-size:17px;padding:20px 0 6px}
.total{margin-top:14px;padding-top:12px;border-top:1.5px solid var(--encre)}
.total span{display:block;font-family:var(--titre);font-weight:900;font-size:20px;line-height:1}
.total b{display:block;font-family:var(--titre);font-weight:900;font-size:52px;line-height:.9;font-variant-numeric:tabular-nums}
.panier label{display:block;margin-top:12px;font-size:16px}
.panier input{width:100%;height:46px;border:0;border-bottom:1.5px solid var(--encre);background:transparent;padding:0;font-size:17px;outline:none;border-radius:0}
.panier input::placeholder{color:var(--encre-3)}
.accords{margin-top:14px}
.panier .case,.lettre .case{display:flex;align-items:flex-start;gap:12px;margin-top:0;padding-block:8px;font-size:15px;line-height:1.35;cursor:pointer}
.panier .case input,.lettre .case input{appearance:none;-webkit-appearance:none;flex:0 0 24px;width:24px;height:24px;margin:0;border:1.5px solid var(--encre);border-radius:0;background:transparent;cursor:pointer;display:grid;place-items:center}
.panier .case input:checked,.lettre .case input:checked{background:var(--encre)}
.panier .case input:checked::after,.lettre .case input:checked::after{content:"";width:10px;height:5px;border-left:2px solid var(--creme);border-bottom:2px solid var(--creme);transform:rotate(-45deg) translate(1px,-1px)}
.panier .case input:focus-visible,.lettre .case input:focus-visible{outline:2px solid var(--encre);outline-offset:3px}
.panier .case a,.lettre .case a{text-decoration:underline}
.raison{margin:6px 0 0;font-size:14px;color:var(--encre-2);min-height:1.4em}
.raison.erreur{color:var(--encre);font-weight:600;font-size:15px}
.payer{flex:0 0 auto;display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:8px var(--g) calc(20px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--filet);background:var(--creme);font-family:var(--titre);font-weight:900;font-size:34px;line-height:1}
.payer[disabled]{color:var(--encre-3);cursor:not-allowed}
.panier>.raison{flex:0 0 auto;margin:0;padding:10px var(--g) 0;border-top:1px solid var(--filet);background:var(--creme);min-height:0;font-size:15px;color:var(--encre)}
.panier>.raison:empty{display:none}
.panier>.raison+.payer{border-top:0}

.toast{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Message « coup de cœur ajouté / retiré » (js/selection.js) : bande à plat, 2 s, sans clic ; couleurs par variables (sombre.css les inverse). */
.fb-msg-coeur{position:fixed;left:0;right:0;top:auto;margin:0 auto;inset-inline:0;width:max-content;max-width:min(92vw,560px);padding:10px var(--g);background:var(--creme);color:var(--encre);border:0;border-top:1.5px solid var(--encre);border-bottom:1px solid var(--filet);font:500 15px/1.4 var(--texte);text-align:center;opacity:0;transform:translateY(8px);pointer-events:none;overflow:visible;transition:opacity .2s,transform .2s}
.fb-msg-coeur.show{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  @keyframes fb-coeur-bat { 0% { transform: scale(1); fill-opacity: 0; } 40% { transform: scale(1.25); fill-opacity: 1; } 100% { transform: scale(1); fill-opacity: 1; } }
  .fb-coeur-ajout > svg, .fb-coeur-ajout > span { display: inline-block; transform-origin: 50% 55%; animation: fb-coeur-bat .3s cubic-bezier(.34,1.56,.64,1) 1; }
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}}

/* Pages légales (legal.html, en/legal.html) : texte à plat, sections séparées par un filet. */
.legal{padding-top:14px;padding-bottom:24px}
.legal .intro{margin:12px 0 4px;font-size:17px}
.legal .maj{margin:0;font-size:15px;color:var(--encre-2)}
/* 17 : date de mise en ligne non fixée = ligne masquée aussi sur téléphone (le texte reste dans la page) */
.legal .maj:has(time[data-date-mise-en-ligne]:not([datetime])){display:none}
.legal .som{display:flex;flex-wrap:wrap;gap:0 16px;margin:10px 0 0}
.legal .som a{min-height:44px;display:inline-flex;align-items:center;font-weight:500}
.legal section{margin-top:32px;padding-top:24px;border-top:1.5px solid var(--encre);scroll-margin-top:12px}
.legal h2{margin:0 0 12px;font-family:var(--titre);font-weight:900;font-size:clamp(38px,10vw,56px);line-height:.95}
.legal h3{margin:22px 0 6px;font-size:17px;font-weight:600;line-height:1.3}
.legal p,.legal li{margin:0 0 10px;font-size:16px;line-height:1.55}
.legal ul{margin:0 0 10px;padding-left:20px}
.legal .acompleter{background:var(--ambre);color:var(--encre);padding:1px 4px}
/* Encadrés officiels de garantie légale (article 8 des CGV) : filet net, à plat, sans arrondi */
.legal fieldset.garantie{margin:16px 0;padding:14px 16px 4px;border:1px solid var(--encre);border-radius:0;min-width:0}
.legal fieldset.garantie legend{padding:0 8px;font-weight:600;font-size:16px;line-height:1.3}
/* Option clé USB du panier (discrète, à plat) */
.usb{margin-top:10px}
.usbpays{padding-left:36px}
.usbpays p{margin:0;padding-block:4px;font-size:15px;opacity:.75}
.panier select{display:block;width:100%;height:46px;margin-top:6px;border:0;border-bottom:1.5px solid var(--encre);border-radius:0;background:transparent;font:inherit;font-size:17px;color:inherit;padding:0}
.panier select[hidden]{display:none}
.panier .case input[type=radio]{border-radius:0}
/* Choix de zone : rond de sélection distinct des cases (carré vide, puis carré plein de 12 px, sans coche) */
.panier .case input[type=radio]:checked{background:transparent}
.panier .case input[type=radio]:checked::after{content:"";width:12px;height:12px;border:0;transform:none;background:var(--encre)}
.nobr{white-space:nowrap}

/* ---------- Pages intérieures (téléphone). Une colonne, sections pleine largeur, filets fins, actions = liens fléchés.
   Aucun arrondi sauf le point d'état (.point) et la case ronde ; seules les pochettes sont carrées. ---------- */
.ecran{padding-top:22px;padding-bottom:44px}
.ecran>.sur{margin:0 0 10px;font-size:16px}
.titre-page{font-size:clamp(72px,25vw,140px);line-height:.88!important;letter-spacing:-.005em;overflow-wrap:normal;hyphens:manual}
.titre-page.long{font-size:clamp(56px,18vw,110px)}
/* pages.js réduit la taille d’un titre dont un mot dépasserait la colonne (FBAjuster) */
.chapo{margin:20px 0 0;font-size:18px;line-height:1.42;max-width:32em}
.ecran p{max-width:34em}
.texte p{margin:12px 0 0;font-size:16px;line-height:1.5}
.discret{color:var(--encre-2)}
.actions{margin-top:28px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.fleche{display:inline-flex;align-items:center;gap:10px;min-height:52px;font-family:var(--titre);font-weight:900;font-size:clamp(26px,7.8vw,36px);line-height:1;text-decoration:none;text-align:left}
.fleche svg,.lien svg{flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.fleche svg{width:28px;height:28px}
.fleche:hover svg,.fleche:focus-visible svg,.lien:hover svg{transform:translateX(5px)}
.fleche[disabled]{opacity:.35;cursor:default}
@media(max-width:899px){.fleche-tout{font-size:22px}.fleche-tout .m-seul{text-decoration:underline;text-decoration-color:#ba7e16;text-decoration-thickness:3px;text-underline-offset:5px}}
.lien{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:16px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.lien svg{width:18px;height:18px;stroke-width:1.6}
.lien:hover{text-decoration-thickness:2px}
.lien.retour svg{transform:scaleX(-1)}
.lien.retour:hover svg{transform:scaleX(-1) translateX(5px)}
.mail{font-weight:500;overflow-wrap:anywhere}
.bloc{margin-top:40px;padding-top:22px;border-top:1px solid var(--filet)}
.bloc>h2{margin:0;font-family:var(--titre);font-weight:900;font-size:clamp(36px,10vw,52px);line-height:.95}
.bloc>h2 small{display:block;margin-top:6px;font:400 16px/1.4 var(--texte)}
.etat{display:flex;align-items:center;gap:10px;margin:18px 0 0;font-size:16px;font-weight:500}
/* Fiche produit : libellé / valeur, simples filets, aucune case ni pastille */
.fiche-d{margin:22px 0 0}
.fiche-d-l{margin:0;padding:0}
.fiche-d-l>div{display:grid;grid-template-columns:minmax(96px,34%) minmax(0,1fr);column-gap:14px;align-items:baseline;padding:9px 0;border-top:1px solid var(--filet)}
.fiche-d-l>div:last-child{border-bottom:1px solid var(--filet)}
.fiche-d-l dt{font-size:14px;color:var(--encre-2)}
.fiche-d-l dd{margin:0;font-size:16px;font-weight:500;font-variant-numeric:tabular-nums}
.point{width:10px;height:10px;flex:0 0 10px;border-radius:50%;background:var(--encre)}
.point.ok{background:#2f7d4f}.point.attente{background:var(--or)}.point.ko{background:#b3322a}
/* Pochettes en rangées libres : tailles et décalages variés, jamais de grille de cases */
.pochettes{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px 12px;margin:26px 0 0;padding:0;list-style:none}
.pochettes a{display:block;text-decoration:none}
.pochettes li{flex:0 0 calc((100% - 36px)/4 - .5px)}
.pochettes li:nth-child(n+5){flex-basis:calc((100% - 24px)/3.3)}
.pochettes img{width:100%;aspect-ratio:1;height:auto;object-fit:cover;background:var(--filet);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){.pochettes a:hover img{transform:translateY(-4px)}}
.pochettes li:nth-child(5n+2){margin-top:14px}
.pochettes li:nth-child(5n+4){margin-top:8px}
.pochettes.trois li{flex-basis:calc((100% - 24px)/3 - .5px)}
.pochettes.trois li:nth-child(n){margin-top:0}
.pochettes.trois .n,.pochettes.trois .pr{max-width:none}
/* Champ souligné (recherche, e-mail) */
.champ{display:flex;align-items:center;gap:10px;border-bottom:1.5px solid var(--encre);margin-top:22px}
.champ svg{width:24px;height:24px;flex-shrink:0;fill:none;stroke:var(--encre);stroke-width:1.8}
.champ input{flex:1 1 auto;min-width:0;height:52px;border:0;border-radius:0;background:transparent;padding:0;font-size:19px;outline:none;-webkit-appearance:none;appearance:none}
.champ input::placeholder{color:var(--encre-3)}
.champ input::-webkit-search-cancel-button{-webkit-appearance:none}
.champ:focus-within{border-bottom-width:2.5px}
.effacer{width:44px;height:44px;display:grid;place-items:center;flex-shrink:0}
.effacer[hidden]{display:none}
/* Choix à plat : texte seul, le choix actif porte un point */
.choix{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px;margin-top:10px}
.choix button{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:17px;font-weight:500;color:var(--encre-2)}
.choix button::before{content:"";width:0;height:8px;margin-right:-8px;border-radius:50%;background:transparent;transition:background .2s,width .2s,margin .2s}
.choix button[aria-pressed=true]{color:var(--encre)}
.choix button[aria-pressed=true]::before{width:8px;margin-right:0;background:var(--encre)}
.choix button:hover{color:var(--encre)}
.choix .etiq{font-size:14px;color:var(--encre-2);margin-right:-6px}
.compte{margin:12px 0 0;font-size:17px}
/* Accueil EN : « N tracks · MP3 320 · USB flash drive €75 » sur une seule ligne à 375 px */
@media (max-width:389px){html[lang=en] .accueil-collection>.compte{font-size:min(17px,4.1vw);white-space:nowrap}}
/* Liste de titres et de sorties : pochette carrée + texte, séparées par un filet fin */
.liste{list-style:none;margin:18px 0 0;padding:0}
/* Zones remplies après le chargement du catalogue : hauteur d’un écran réservée, le pied reste hors de vue puis ne bouge plus. */
main.musique #liste:empty,main.sortie #fiche:empty{min-height:100vh;min-height:100svh}
/* Musique, avant le 1er rendu : la liste du gabarit (cachée, pour l’indexation) garde la place de la vraie ; data-pret est posé par musique.js. */
@media (min-width:900px){main.musique #liste[hidden]:not([data-pret]){display:block!important;visibility:hidden;min-height:100vh;min-height:100svh}}
/* Ordinateur : colonne de filtres, en-tête de liste et liste restent invisibles (mais gardent leur place) jusqu'à ce que le haut de page soit monté (data-haut, posé par musique-haut.js) : plus de saut visible à l'arrivée. */
@media (min-width:900px){main.musique:not([data-haut]) :is(.o-colonne,#enTete,#liste,#actionsListe,#plus){visibility:hidden}}
.liste>li{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:start;padding:14px 0;border-top:1px solid var(--filet)}
.liste>li:first-child{border-top:0}
.liste .couv{display:block;position:relative;width:96px;height:96px}
.liste .couv img{width:96px;height:96px;object-fit:cover;background:var(--filet)}
.liste .couv-fiche{display:block;width:100%;height:100%}
.liste .couv .sign{position:absolute;right:6px;bottom:6px;width:28px;height:28px;display:grid;place-items:center;padding:0;border:0;background:rgba(30,18,32,.62);color:#fff;font-size:13px;line-height:1;cursor:pointer}
.liste .couv button.sign::after{content:"";position:absolute;inset:-8px}
.liste .couv .sign .p2{display:none;font-size:11px;letter-spacing:-1px}
.liste>li.joue .couv .sign .p1,.liste .couv[aria-pressed=true] .sign .p1{display:none}
.liste>li.joue .couv .sign .p2,.liste .couv[aria-pressed=true] .sign .p2{display:inline}
.liste .nom{margin:0;font-family:var(--titre);font-weight:900;font-size:29px;line-height:.98;overflow-wrap:anywhere}
.liste .meta{margin:4px 0 0;font-size:15px;color:var(--encre-2)}
.liste .meta a{color:inherit}
.liste>li{cursor:pointer;-webkit-tap-highlight-color:rgba(30,18,32,.06)}
.liste .acts{display:flex;flex-wrap:wrap;gap:0 16px;margin-top:2px}
.liste .acts .lien{min-height:40px;font-size:15px}
.enecoute{display:none;align-items:center;gap:8px;font-size:14px;font-weight:500;margin-bottom:2px}
.liste>li.joue .enecoute{display:flex}
/* « En écoute » sort du flux : il ne crée plus de ligne sous la ligne (à droite, à hauteur des actions) */
.liste>li{position:relative}
.liste .enecoute{position:absolute;right:0;bottom:14px;height:40px;margin:0}
.plus{margin-top:18px}
/* Pistes d'une sortie */
.pistes{list-style:none;margin:14px 0 0;padding:0;counter-reset:p}
.pistes li{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--filet)}
.pistes li:first-child{border-top:0}
.pistes .jouer{width:44px;height:44px;display:grid;place-items:center;font-size:18px}
.pistes .jouer[aria-pressed=true]{text-decoration:underline;text-underline-offset:4px}
.pistes li:has(.jouer[aria-pressed=true]) .t{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.pistes .t{font-family:var(--titre);font-weight:900;font-size:24px;line-height:1}
.pistes .m{display:block;font-size:14px;color:var(--encre-2);margin-top:3px}
.pistes .aj{min-height:44px;font-size:15px;font-weight:500;white-space:nowrap}
.pistes .aj:hover{text-decoration:underline}
.grande{display:block;width:100%;max-width:420px;aspect-ratio:1;height:auto;object-fit:cover;margin:14px 0 0;background:var(--filet)}
.prix-l{font-family:var(--titre);font-weight:900;font-size:clamp(26px,7.4vw,32px);line-height:1.05;margin:20px 0 0}
.or-l{font-family:var(--titre);font-weight:900;font-size:clamp(27px,7.6vw,34px);line-height:1.05;margin:22px 0 0;color:var(--or)}
/* Barre de progression libre (préparation du ZIP) */
.progres{position:relative;height:2px;margin-top:26px;background:var(--filet);overflow:hidden}
.progres span{position:absolute;left:0;top:0;bottom:0;width:30%;background:var(--encre);animation:progres 1.6s ease-in-out infinite}
@keyframes progres{0%{transform:translateX(-100%)}100%{transform:translateX(340%)}}
.sortie-mini{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;margin-top:24px}
.sortie-mini img{width:96px;height:96px;object-fit:cover;background:var(--filet)}
.sortie-mini b{display:block;font-family:var(--titre);font-weight:900;font-size:30px;line-height:1}
/* Lettre d'information (pied) */
.lettre{text-align:left;margin:0 0 34px;padding-bottom:30px;border-bottom:1px solid var(--filet)}
.lettre h2{margin:0;font-family:var(--titre);font-weight:900;font-size:clamp(40px,11vw,56px);line-height:.95}
.lettre p{margin:10px 0 0;font-size:16px}
.lettre input[type=email]{display:block;width:100%;height:50px;margin-top:14px;border:0;border-bottom:1.5px solid var(--encre);border-radius:0;background:transparent;padding:0;font-size:18px;outline:none}
.lettre input[type=email]::placeholder{color:var(--encre-3)}
.lettre .case{margin-top:8px}
.lettre .fleche{margin-top:6px;font-size:32px}
.lettre .raison{margin-top:4px}
.lettre .raison.ok{color:var(--encre);font-weight:500;font-size:15px}
.lettre h2 em{font-style:italic;color:#ba7e16;text-decoration:none}   /* « e-mail » du titre : italique orange, partout (bat `.accueil em`, qui le soulignait) */
.insec{white-space:nowrap}   /* « e-mail » ne se coupe jamais au trait d’union */
.piege{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.pied .reseaux a:hover,.entete nav a:hover{text-decoration:underline;text-underline-offset:5px}
.sans-js{margin-top:18px;font-size:16px}
.texte-pied{margin:30px 0 0;font-size:16px}
.annonce{margin:12px 0 0;font-size:16px;font-weight:600}
.annonce[hidden]{display:none}
.pochettes .n{display:block;margin-top:6px;max-width:150px;font-size:14px;line-height:1.3}
.sans-resultat .titre-page{margin-top:26px}
.accueil-collection{margin-bottom:8px}
.accueil-collection .prix-l{margin-top:10px}

/* ---------- Écouter selon l'envie (accueil) : vinyle, quatre envies une par coin (Tranquille, Groove / Speed, Explosif). À plat. ---------- */
.vinyle{position:absolute;border-radius:50%;display:grid;place-items:center;
  background:
    conic-gradient(from 20deg,rgba(255,255,255,.13),rgba(255,255,255,0) 10%,rgba(255,255,255,.07) 22%,rgba(255,255,255,0) 36%,rgba(255,255,255,.13) 50%,rgba(255,255,255,0) 60%,rgba(255,255,255,.07) 72%,rgba(255,255,255,0) 86%,rgba(255,255,255,.13)),
    repeating-radial-gradient(circle,#141014 0 1.4px,#231d23 1.4px 2.8px);
  box-shadow:inset 0 0 0 3px #0c090c,0 0 0 1px rgba(30,18,32,.25)}
.vinyle::before{content:"";position:absolute;inset:31%;border-radius:50%;background:radial-gradient(circle,#141014 60%,#0f0b0f)}
.vinyle>img,.vinyle>.disque{position:relative;z-index:1}
.vinyle>img{width:44%;aspect-ratio:1;object-fit:cover}
.scene{position:relative;container-type:inline-size;width:100%;--u:calc(100cqw / 350)}
.scene>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.accueil-envies{padding-bottom:6px}
.accueil-envies>h2{font-size:clamp(40px,12vw,64px)}
.accueil-envies .aide{margin:10px 0 0;font-size:17px}
.scene-envies{aspect-ratio:350/422;margin-top:4px}
.scene-envies .vinyle{left:calc(var(--u)*85);top:calc(var(--u)*125);width:calc(var(--u)*180);height:calc(var(--u)*180)}
.scene-envies .vinyle>.disque{width:44%;height:44%}
.envie{position:absolute;display:flex;flex-direction:column;gap:4px;min-height:44px;min-width:44px;font-family:var(--titre);font-weight:800;font-size:calc(var(--u)*25);line-height:.92;letter-spacing:-.005em}
.envie.d{align-items:flex-end;text-align:right}
.envie .et{display:flex;align-items:center;gap:6px;font:500 13px/1 var(--texte);letter-spacing:0;min-height:16px}
.envie .et svg{width:14px;height:14px;fill:var(--encre)}
.envie .et .pz{display:none;gap:3px}
.envie .et .pz i{width:4px;height:14px;background:var(--ambre)}
.envie.actif .et svg{display:none}
.envie.actif .et .pz{display:inline-flex}
.envie.actif .mot-env{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:#ba7e16;color:#ba7e16}   /* contraste, orange profond choisi par Brice le 20/10 (fond crème, grand texte) */
.trait{fill:none;stroke:var(--encre);stroke-width:1.4}
.trait.actif{stroke:var(--ambre);stroke-width:2.2}
.bout{fill:var(--encre)}
.bout.actif{fill:var(--ambre)}
.info-envie{margin:6px 0 0;font-size:16px;display:flex;flex-wrap:wrap;align-items:center;gap:0 14px}
.ligne-coeurs{margin:2px 0 0;font-size:16px}
.ligne-coeurs a{text-decoration:none;font-weight:500}
.ligne-coeurs a:hover{text-decoration:underline}
.envies-droite .envie-titre{font-size:clamp(44px,5vw,72px);margin:4px 0 22px;line-height:.95}
.envies-droite .sur{margin:0;font-size:15px;color:var(--encre-2)}
.pochettes.ensuite{margin-top:12px}
.pochettes.ensuite li{flex:0 0 calc((100% - 24px)/3 - .5px);margin-top:0}
.envies-droite{display:none}

/* Coups de cœur : cœur à plat, plein quand il est gardé */
.coeur{width:44px;height:44px;display:inline-grid;place-items:center;flex-shrink:0}
.coeur svg{width:24px;height:24px;fill:none;stroke:var(--encre);stroke-width:1.7;stroke-linejoin:round}
.coeur[aria-pressed=true] svg{fill:var(--encre)}
.coeur-bandeau{position:absolute;left:calc(var(--bandeau) - 44px);top:0;width:44px;height:44px;display:grid;place-items:center;z-index:2}
.coeur-bandeau[hidden]{display:none}
.coeur-bandeau svg{width:22px;height:22px;fill:none;stroke:#f5f3ee;stroke-width:1.9;stroke-linejoin:round;filter:drop-shadow(0 0 2px rgba(30,18,32,.85))}
.coeur-bandeau[aria-pressed=true] svg{fill:#f5f3ee}
.liste .acts .coeur{margin-left:-6px}
.pistes li{grid-template-columns:44px 1fr 44px auto}

/* Musique : symboles communs aux filtres et aux lignes. */
#rythmes .rythme-icone{width:20px;height:20px;flex:none;margin-right:8px}
.rythme-symbole{display:inline-flex;vertical-align:middle}
.rythme-symbole .rythme-icone{width:18px;height:18px;flex:none}
@media (max-width:899px){
  .ecran.musique{padding-top:28px}
  .ecran.musique>.compte{margin-top:12px;font-size:15px}
  .ecran.musique>.champ{margin-top:8px}
  .ecran.musique>.champ input{height:44px;font-size:17px}
  .ecran.musique #rythmes{flex-wrap:nowrap;justify-content:space-between;gap:0 4px;margin-top:14px;padding:0}
  .ecran.musique #rythmes>.etiq,.ecran.musique #vues>.etiq{display:none}
  .ecran.musique #rythmes button{position:relative;flex:0 1 auto;aspect-ratio:auto;flex-direction:row;justify-content:flex-start;gap:9px;min-height:44px;padding:0 2px;border:0;border-radius:0;background:none;color:var(--encre-2);font-family:var(--titre);font-weight:800;font-size:20px;line-height:1;white-space:nowrap}
  .ecran.musique #rythmes button .rythme-icone{display:none}
  .ecran.musique #rythmes button::before,.ecran.musique #rythmes button+button::before{display:inline-block;content:"";width:9px;height:9px;margin:0;border-radius:50%;background:var(--encre-2);opacity:.5}
  .ecran.musique #rythmes button::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:transparent}
  .ecran.musique #rythmes button[aria-pressed=true]{background:none;color:var(--encre)}
  .ecran.musique #rythmes button[aria-pressed=true]::before,.ecran.musique #rythmes button+button[aria-pressed=true]::before{width:9px;margin:0;background:var(--ambre);opacity:1}
  .ecran.musique #rythmes button[aria-pressed=true]::after{background:var(--ambre)}
  .ecran.musique #vues{flex-wrap:nowrap;gap:16px;margin-top:8px;overflow-x:auto}
  .ecran.musique #vues button{flex:none;min-height:44px;white-space:nowrap;font-size:15px}
  @media(max-width:340px){.ecran.musique #rythmes{gap:0 2px}.ecran.musique #rythmes button{gap:5px;font-size:16px}}
  @media(max-width:370px){.ecran.musique #vues{gap:12px}.ecran.musique #vues button{font-size:14px}}
  .ecran.musique>.liste{margin-top:6px;scroll-margin-top:8px}
}

/* Musique : mention du mix, écouter la sélection, vue des coups de cœur */
.mix-mention{margin:14px 0 0;font-size:16px;color:var(--encre-2)}
.actions-liste{margin-top:6px;display:flex;flex-wrap:wrap;gap:0 24px;align-items:center}
.actions-liste .fleche{font-size:clamp(24px,6.6vw,30px)}
.pochettes .pr{display:block;margin-top:2px;max-width:150px;font-size:13px;line-height:1.3;color:var(--encre-2)}
@media (max-width:430px){.bandeau .ajout .ajt{display:none}}

/* ===================== Ordinateur (≥ 900 px) =====================
   Une grille de 12 colonnes (contenu 1 280 px au plus) et une seule ligne de force : la médiane, début de la colonne 7.
   Deux façons de couper : « deux zones » (titre à gauche 1/6, contenu à droite 7/13) et liste en deux colonnes (1/7, 7/13).
   Tout est dans ce bloc : le téléphone (< 900 px) ne change pas. Survols seulement sous (hover:hover). ===================== */
.nav-ordi{display:none!important}
/* Éléments réservés à la mise en page ordinateur (feuille ordinateur.css, ≥ 900 px) : jamais affichés sur téléphone */
.o-seul,.sac .lib{display:none}
.o-colonne{display:contents}
.b-zone{display:contents}
@media (min-width:900px){
  :root{--g:40px;--gout:24px;--contenu:1280px;--page:calc(var(--contenu) + 2*var(--g));--entete-pad:20px;--disque:80px;
        --bandeau:80px;--poch-liste:120px;--tiroir:clamp(440px,42vw,600px);--prune:#291721;
        --t-h1:clamp(88px,8.4vw,128px);--t-h2:clamp(48px,4.2vw,60px);--r1:8px;--r2:16px;--r3:24px;--r4:40px;--r5:64px;--r6:96px}
  .page{max-width:var(--page);padding-inline:var(--g)}
  .gouttiere{padding-inline:0}
  h1.aff,.titre-page{font-size:var(--t-h1);line-height:.92}
  .titre-page.long{font-size:calc(var(--t-h1) * .78)}
  .heros h1.aff{line-height:1.02}
  .bloc>h2,.legal h2,.accueil-envies>h2{font-size:var(--t-h2)}
  .chapo{font-size:19px}
  .ecran{padding-top:var(--r5);padding-bottom:var(--r6)}
  .bloc{margin-top:var(--r6);padding-top:var(--r4)}
}
@media (min-width:1200px){:root{--g:48px}}

/* En-tête : disque à gauche (colonnes 1-2), menu à droite sur la médiane ; point + texte sur la rubrique active */
@media (min-width:900px){
  .nav-ordi{display:inline-flex!important}
  .entete{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gout);align-items:center;padding:var(--entete-pad) 0;border-bottom:1px solid var(--filet)}
  .entete .disque{grid-column:1/3;width:var(--disque);height:var(--disque)}
  .entete nav{grid-column:7/13;margin-left:0;padding-top:0;gap:0 4px}
  .entete nav>a:first-child{margin-left:-9px}
  .entete nav .loupe{margin-left:auto;width:44px;justify-content:center;padding-inline:0}
  .entete nav .loupe svg{width:22px;height:22px;fill:none;stroke:var(--encre);stroke-width:1.7}
  .entete nav .sac{margin-left:auto}
  .entete nav .loupe~.sac{margin-left:0}
  .entete nav a[aria-current=page]{gap:8px}
  .entete nav a[aria-current=page]::before{content:"";flex:0 0 8px;height:8px;background:radial-gradient(circle closest-side,var(--encre) 90%,transparent 100%)}
}

/* Pied : lettre (titre à gauche, champ sur la médiane), description · liens, © · réseaux · langue */
@media (min-width:900px){
  .pied{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:row dense;column-gap:var(--gout);row-gap:var(--r1);align-items:center;text-align:left;margin-top:var(--r5);padding-top:var(--r4);padding-bottom:var(--r4);border-top:1px solid var(--filet)}
  .pied .lettre{grid-column:1/13;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(5,auto) minmax(0,1fr);column-gap:var(--gout);margin:0 0 var(--r3);padding-bottom:var(--r4)}
  .pied .lettre>*{grid-column:7/13}
  .pied .lettre h2{grid-column:1/6;grid-row:1/-1;align-self:start;font-size:var(--t-h2)}
  .pied .lettre>p:first-of-type{margin-top:0}
  .pied .desc{grid-column:1/6;font-size:16px}
  .pied .reseaux{grid-column:7/10;justify-content:flex-start;margin:0;gap:24px}
  .pied .reseaux a,.langue{font-size:16px}
  .pied .langue{grid-column:10/13;justify-content:flex-end;margin:0}
  .pied .copy{grid-column:1/6;margin:0;font-size:14px;color:var(--encre-2)}
}

/* Lecteur : surface prune, trois zones (pochette + titre · commandes au centre de la page · cœur + ajout) */
@media (min-width:900px){
  .lecteur{background:var(--prune);color:var(--creme)}
  .bandeau{max-width:var(--page);padding:0 var(--g) env(safe-area-inset-bottom,0px);position:static;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:var(--gout);background:transparent;border-top:0}
  .b-zone{display:flex;align-items:center;min-width:0}
  .b-gauche,.mm-mini-ouvrir{gap:16px;grid-column:1}
  .b-centre{gap:8px;justify-content:center;grid-column:2}
  .b-droite{gap:12px;justify-content:flex-end;grid-column:3}
  .bandeau .poch,.mm-mini-poch{width:56px;height:56px;flex:0 0 56px;outline:1px solid rgba(245,243,238,.16);outline-offset:-1px;background:rgba(245,243,238,.08)}
  .bandeau .t{font:600 16px/1.25 var(--texte);color:var(--creme)}
  .bandeau .s{color:rgba(245,243,238,.72)}
  .prog{top:0;background:rgba(245,243,238,.22)}
  .prog .rempli{background:var(--creme)}
  .bandeau .ic svg{width:26px;height:26px;fill:var(--creme)}
  .bandeau .ajout{color:var(--creme)}
  .coeur-bandeau{position:static;filter:none}
  .coeur-bandeau svg{stroke:var(--creme);filter:none}
  .coeur-bandeau[aria-pressed=true] svg{fill:var(--creme)}
  .mm-lecteur .bandeau{gap:0 var(--gout)}
  .mm-mini-plus .mm-coeur{color:var(--creme)}
  .mm-mini-plus svg.trait{stroke:var(--creme)}
  .bandeau:has(.poch[hidden]){padding-left:var(--g)}
}

/* Tiroir du panier : bord droit, pleine hauteur, filet gauche, devant le lecteur */
@media (min-width:900px){
  .panier{--g:40px;width:var(--tiroir);border-left:1.5px solid var(--encre)}
  .panier .haut .disque{width:56px;height:56px}
  .panier .titre{font-size:64px}
}

/* « Deux zones » : le grand titre à gauche, tout le reste à droite, sur la médiane */
@media (min-width:900px){
  :is(.ecran.introuvable,.ecran.merci,.ecran.newsletter,.ecran.annule,.ecran.erreur,.ecran.telechargement,main>.bloc:not(.accueil-envies),#fiche>.bloc){
    display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(10,auto) minmax(0,1fr);column-gap:var(--gout);align-items:start}
  :is(.ecran.introuvable,.ecran.merci,.ecran.newsletter,.ecran.annule,.ecran.erreur,.ecran.telechargement,main>.bloc:not(.accueil-envies),#fiche>.bloc)>*{grid-column:7/13;min-width:0}
  :is(.ecran.introuvable,.ecran.merci,.ecran.newsletter,.ecran.annule,.ecran.erreur,.ecran.telechargement,main>.bloc:not(.accueil-envies),#fiche>.bloc)>:is(h1,h2){grid-column:1/6;grid-row:1/-1}
  :is(.ecran.introuvable,.ecran.merci,.ecran.newsletter,.ecran.annule,.ecran.erreur,.ecran.telechargement,main>.bloc:not(.accueil-envies),#fiche>.bloc)>:is(h1,h2)+*{margin-top:0}
  :is(.ecran.introuvable,.ecran.merci,.ecran.newsletter,.ecran.annule,.ecran.erreur,.ecran.telechargement,main>.bloc:not(.accueil-envies),#fiche>.bloc) .actions{margin-top:var(--r4)}
}

/* Pochettes : 3 par rangée dans une zone droite ; les décalages libres (14 / 8 px) sont gardés */
@media (max-width:899px){.pochettes li.ordi{display:none}}
@media (min-width:900px){
  .pochettes{gap:14px var(--gout)}
  .pochettes li,.pochettes li:nth-child(n+5),.pochettes.trois li{flex:0 0 calc((100% - 2*var(--gout))/3 - .5px)}
}

/* Accueil */
@media (min-width:900px){
  .heros{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gout);padding-top:var(--r5);padding-bottom:0}
  .heros>*{grid-column:1/13}
  .heros .genres{grid-column:1/6}
  .heros .demo{grid-column:7/13;align-self:center}
  .accueil-envies>h2,.accueil-envies>.aide{max-width:none}
  .envies-cadre{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gout);align-items:center;margin-top:var(--r3)}
  .envies-gauche{grid-column:1/6;max-width:min(100%,calc((100svh - 240px) * .83))}
  .envies-droite:not([hidden]){display:block;grid-column:7/13}
}

/* Musique : titre, recherche sur la médiane ; liste en deux colonnes de rangées */
@media (min-width:900px){
  .ecran.musique{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gout);align-items:start}
  .ecran.musique>*{grid-column:1/-1}
  .ecran.musique>.titre-page,.ecran.musique>.mv1-tp>.titre-page{grid-column:1/7;grid-row:1}
  .ecran.musique>.champ{grid-column:7/13;grid-row:1;align-self:end;margin:0 0 14px}
  .ecran.musique>.compte{grid-column:1/7;grid-row:2}
  .ecran.musique>#rythmes{grid-column:1/7;grid-row:3;margin-top:var(--r3)}
  .ecran.musique>#vues{grid-column:7/13;grid-row:3;margin-top:var(--r3)}
  .liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gout);margin-top:var(--r4)}
  .liste>li{grid-template-columns:var(--poch-liste) 1fr;padding:var(--r2) 0}
  .liste>li:nth-child(2){border-top:0}
  .liste .couv,.liste .couv img{width:var(--poch-liste);height:var(--poch-liste)}
  .liste .nom{font-size:32px}
  .sortie-mini{grid-template-columns:var(--poch-liste) 1fr}
  .sortie-mini img{width:var(--poch-liste);height:var(--poch-liste)}
}

/* Sortie : pochette collante à gauche, informations et pistes sur la médiane */
@media (min-width:900px){
  .fiche-tete{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gout);align-items:start;margin-top:var(--r2)}
  .fiche-poch{grid-column:1/6;position:sticky;top:var(--r3)}
  .fiche-poch .grande{width:100%;max-width:none;margin:0}
  .fiche-infos{grid-column:7/13;min-width:0}
  .fiche-infos>.sur{margin-top:0}
  .fiche-infos .bloc{margin-top:var(--r4);padding-top:var(--r3)}
  .fiche-infos .bloc>h2{font-size:36px}
}

/* La Collection : texte à gauche, 9 pochettes à droite */
@media (min-width:900px){
  .ecran.collection{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(12,auto) minmax(0,1fr);column-gap:var(--gout);align-items:start}
  .ecran.collection>*{grid-column:1/6}
  .ecran.collection>.pochettes{grid-column:7/13;grid-row:1/-1;margin-top:0}
  .ecran.collection .actions{margin-top:var(--r4)}
}

/* Pages légales : sommaire collant à gauche (enveloppe .legal-tete posée par pages.js), texte sur la médiane */
@media (min-width:900px){
  .legal{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gout);align-items:start;padding-top:var(--r5);padding-bottom:var(--r6)}
  .legal h1.aff{font-size:clamp(56px,7.4vw,112px)}
  .legal-tete{grid-column:1/6;grid-row:1/span 30;position:sticky;top:var(--r3)}
  .legal .som{flex-direction:column;align-items:flex-start;gap:0;margin-top:var(--r3)}
  .legal>section{grid-column:7/13;max-width:40em}
  .legal>section:first-of-type{margin-top:0}
}

/* Mouvement du pointeur : les blocs restent à plat, seule la pochette s'incline */
@media (min-width:900px) and (hover:hover){
  .pochettes a:hover img{transform:translateY(-4px) rotate(-1.5deg)}
}

/* ===== Animations téléphone (lot validé le 15/10) : courbe .2,.8,.2,1 ; transform et opacité seulement ; rien ne bouge en « réduire les animations ».
   Le site ordinateur (≥ 900 px, souris) a son propre bloc dans ordinateur.css et reste tel quel : tout ce qui suit s'arrête là-bas. ===== */
@media(min-width:900px){.ecran.collection>.px-o>.o-seul{display:inline}}
/* Page La Collection au téléphone : un seul mur (l'escalier), titre en capitales et bouton d'achat comme l'accueil (maquette). */
@media(max-width:899px){
  .ecran.collection>.pochettes{display:none}
  .ecran.collection>.titre-page{text-transform:uppercase}
  .ecran.collection>.titre-page{font-size:min(76px,19.5vw);line-height:.86!important}
  .ecran.collection>.prix-l-m{margin-top:20px;font:400 17px/1.4 var(--texte);color:var(--encre-2)}
  .ecran.collection>.px-o{display:block;margin:10px 0 0;font:900 clamp(96px,28vw,126px)/.9 var(--titre);letter-spacing:-.04em;color:var(--encre)}
  .ecran.collection>.compte{margin-top:8px;font-size:16px;color:var(--encre-2)}
  /* Bloc prix (téléphone) : pastille de disquaire ambre (69 €, N titres) qui mord le coin du titre ; sa position suit la fin du mot « COLLECTION » */
  .ecran.collection{position:relative}
  .ecran.collection>.compte{display:none}
  .ecran.collection>.px-o{margin:0;padding:0;font-size:16px;line-height:1.2;letter-spacing:0;white-space:normal;max-width:none;color:var(--encre)}
  .ecran.collection>.px-o>.m-seul{display:block}
  .ecran.collection>.chapo{font-size:17px;text-wrap:pretty}
  .ecran.collection>.actions{margin-top:24px}
  .ecran.collection .actions .fleche[data-ajouter]{font:600 24px/1.3 var(--texte);color:var(--encre);text-decoration:underline;text-decoration-color:#ba7e16;text-decoration-thickness:.12em;text-underline-offset:.12em;text-decoration-skip-ink:none;gap:10px;min-height:52px}   /* contraste, option B choisie par Brice le 20/10 : texte orange sur crème = 1,86:1 ; encre + trait orange */
  .ecran.collection .actions .fleche[data-ajouter] svg{width:22px;height:22px;stroke-width:2}
}
/* Mur de La Collection (accueil, collection.html) : 7 pochettes en escalier, décalées au défilement. Téléphone seulement (m-seul). */
.mur-c{position:relative;container-type:inline-size;margin-top:30px}
.mur{--u:calc(100cqw / 350);position:relative;aspect-ratio:350/510}
.mur img{position:absolute;left:calc(var(--u)*var(--x));top:calc(var(--u)*var(--y));width:calc(var(--u)*var(--w));aspect-ratio:1;height:auto;object-fit:cover;background:var(--filet);outline:1px solid var(--filet);outline-offset:-1px;box-shadow:0 14px 26px -16px rgba(30,18,32,.55)}

/* Titre de l'accueil : une ligne par bloc (les lignes sont écrites dans le HTML) */
.revele .lg{display:block}

/* 1. Pression au toucher (écrans sans survol) */
@media (hover:none) and (prefers-reduced-motion:no-preference){
  .pochettes a,.liste .couv,.fleche,.ecoute,.envie,.bandeau .ic,.bandeau .ajout,.pistes .aj,.pistes .jouer,.payer,.sac,.panier .ret,.choix button,.lien{-webkit-tap-highlight-color:transparent;transition:transform .15s cubic-bezier(.2,.8,.2,1)}
  .pochettes a:active,.liste .couv:active,.fleche:not([disabled]):active,.ecoute:active,.envie:active,.bandeau .ic:active,.bandeau .ajout:active,.pistes .aj:active,.pistes .jouer:active,.payer:not([disabled]):active,.sac:active,.panier .ret:active,.choix button:active,.lien:active{transform:scale(.97)}
}

@media (prefers-reduced-motion:no-preference) and (not ((min-width:900px) and (hover:hover) and (pointer:fine))){
  /* 2. Ajout au panier : le « reçu » (css « Reçu de l'ajout » plus bas) remplace tout retour sur le bouton */
  @keyframes fb-m-trace{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
  @keyframes fb-m-fondu{from{opacity:0}}
  /* 6. Panier : les articles arrivent l'un après l'autre (--i posé par panier.js, 6 articles au plus) */
  .lignes li.entre{animation:fb-m-ligne .3s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0)*40ms)}
  @keyframes fb-m-ligne{from{opacity:0;transform:translateX(12px)}}
  /* 3. Pochettes : fondu à l'arrivée de l'image (classe .fb-att posée par pages.js tant que l'image charge ; sûreté à 2 s) */
  .pochettes img,.liste .couv img,img.grande,.sortie-mini img,.mur img{transition:opacity .2s linear,transform .25s cubic-bezier(.2,.8,.2,1)}
  html.fb-fondu img.fb-att{opacity:0}
  /* 5. Transitions entre pages : fondu .2 s, l'en-tête et le lecteur restent en place */
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}
  .entete{view-transition-name:fb-entete}
  .lecteur{view-transition-name:fb-lecteur}
  /* 7. Titre de l'accueil ligne par ligne : lignes écrites dans le HTML (.lg > .lg-i), aucun script ; l'accent du « É » n'est pas rogné */
  .revele .lg{overflow:hidden;padding:.14em 0 .06em;margin:-.14em 0 -.06em}
  .revele .lg-i{animation:fb-m-titre .4s cubic-bezier(.2,.8,.2,1) backwards}
  .revele .lg:nth-child(2) .lg-i{animation-delay:.06s}
  .revele .or{animation:fb-m-fondu .3s ease-out .46s backwards}
  @keyframes fb-m-titre{from{transform:translateY(100%)}}
}

/* 4 et 9. Défilement : seulement si le navigateur lie l'animation au défilement ; sinon le contenu reste simplement affiché (mur : repli en JavaScript) */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference) and (not ((min-width:900px) and (hover:hover) and (pointer:fine))){
    .bloc>h2,.pochettes:not(.ensuite){animation:fb-m-monte linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
    [data-sans-defile]{animation:none!important}
    @keyframes fb-m-monte{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
    .mur-c,.acc-wall{view-timeline:--fb-mur block}
    .mur{--mur-amplitude:20.8px;--mur-decalage:0px;--mur-scale:1}
    .acc-wall{--mur-amplitude:41.6px;--mur-decalage:6px;--mur-scale:1.025}
    .mur img,.acc-wall img{animation:fb-m-mur linear both;animation-timeline:--fb-mur}
    @keyframes fb-m-mur{from{transform:translate(calc(var(--c)*var(--mur-decalage)),calc(var(--c)*var(--mur-amplitude))) scale(1)}to{transform:translate(calc(var(--c)*var(--mur-decalage)*-1),calc(var(--c)*var(--mur-amplitude)*-1)) scale(var(--mur-scale))}}
  }
}

/* Accueil : structure de l’artefact validé, contenus du catalogue public. */
body.accueil{--g:20px;--ambre:#e8a93b}
.accueil .page{max-width:560px;padding-inline:0}
.accueil .gouttiere{padding-inline:var(--g)}
.accueil .acc-hero{padding-top:14px;padding-bottom:0}
.acc-hero .sur{margin:0 0 10px;font-size:16px}
.accueil .acc-hero h1{font-size:44px;line-height:1;letter-spacing:-.015em;margin:0;text-transform:none}
.acc-hero h1>span{display:block;white-space:nowrap}
.accueil em{font-style:normal;color:var(--encre);text-decoration:underline;text-decoration-color:#ba7e16;text-decoration-thickness:3px;text-underline-offset:4px}   /* mots ambre du titre : encre sur trait ambre (ambre sur crème = 1,9:1), comme les autres textes jaunes du site */
.accueil .acc-hero h1>span em{font-style:normal;color:#ba7e16;text-decoration:none}   /* contraste, orange profond choisi par Brice le 20/10 (#ba7e16 = 3,11:1 sur crème, grand texte) */
/* Taille de départ des deux lignes du titre sur téléphone = celle que js/accueil.js (ajuster) calcule avec la police définitive (proportionnelle à la largeur du titre : le titre est son propre conteneur, cqw) : le titre ne saute plus au chargement. */
@media(max-width:899px){.accueil .acc-hero h1{container-type:inline-size}.accueil .acc-hero h1>span,.accueil .acc-hero h1>span em{transition-property:none}   /* sinon, avec « réduire les animations » (base.css:278, durée .01 ms), la taille change par transition et ajuster() mesure l'ancienne */
.accueil .acc-hero h1>span:nth-child(1){font-size:min(80px,calc(100cqw*.141014))}.accueil .acc-hero h1>span:nth-child(2){font-size:min(80px,calc(100cqw*.115209))}html[lang=en] .accueil .acc-hero h1>span:nth-child(1){font-size:min(80px,calc(100cqw*.137882))}html[lang=en] .accueil .acc-hero h1>span:nth-child(2){font-size:min(80px,calc(100cqw*.131744))}}
.acc-hero .acc-mix{margin:8px 0 0;font-size:16px;line-height:1.3}   /* phrase du mix, téléphone seulement (.m-seul masqué dès 900 px) */
.acc-hero .acc-mix+.genres{margin-top:10px}
.acc-hero .genres{font-size:17px;margin:14px 0 22px}
.acc-offre{margin:20px 0 4px;padding-top:16px;border-top:1px solid var(--filet);font-size:16px}
.acc-offre small{display:block;font-size:14px;color:var(--encre-2);margin-top:4px}
.acc-hero-copy>.acc-offre,.acc-hero-copy>.fleche{display:none}
.acc-release{min-width:0}
.acc-cover{position:relative;margin-bottom:30px}
.acc-cover-play{display:block;width:100%}
button.acc-jeu{padding:0;border:0;background:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button.acc-jeu:focus-visible{outline:2px solid var(--encre);outline-offset:3px}
.acc-cover img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;outline:1px solid var(--filet);outline-offset:-1px}
.acc-rond{position:absolute;right:12px;bottom:-22px;width:92px;height:92px;display:grid;place-items:center;border:2px solid #F4EFE6;border-radius:50%;background:#e8a93b;color:var(--encre)}
button.acc-rond:focus-visible{outline:2px solid var(--encre);outline-offset:3px}
.acc-rond .rond-icone{width:30px;height:30px;fill:currentColor}
.rond-anneau{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none}
.rond-anneau circle{fill:none;stroke:rgba(30,18,32,.14);stroke-width:3}
.rond-anneau .rond-arc{stroke:var(--encre)}
.acc-release-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.acc-release-title h2,.acc-release-title h3{font:900 34px/1 var(--titre);margin:0;text-align:left}
.acc-release-title a{text-decoration:none}
.acc-release-title a:hover{text-decoration:underline;text-underline-offset:4px}
.acc-add{display:inline-flex;align-items:center;gap:7px;font-size:16px;font-weight:600;white-space:nowrap;min-height:44px}
.acc-add svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7}
.acc-legende{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:500;font-variant-numeric:tabular-nums;min-height:30px;margin:0;color:var(--encre)}
.eq{display:inline-flex;gap:3px;align-items:flex-end;height:16px}
.eq i{width:3px;background:var(--encre);animation:eq 1s infinite ease-in-out}
.eq i:nth-child(2){animation-delay:-.3s}.eq i:nth-child(3){animation-delay:-.6s}
@keyframes eq{0%,100%{height:4px}50%{height:16px}}
.eq.arret i{animation:none;height:4px}
@media(prefers-reduced-motion:reduce){.eq i{animation:none;height:10px}.eq.arret i{height:4px}}
.acc-meta{font-size:15px;margin:6px 0 0}
.acc-hero-release .acc-meta{margin-bottom:16px}
.acc-hero-release .acc-offre{display:block}
.accueil .acc-section,.acc-lettre{padding-top:64px;padding-bottom:0;margin:0;border:0}
.accueil .acc-heading,.acc-lettre .acc-heading{font:900 76px/.86 var(--titre);letter-spacing:-.01em;text-transform:uppercase;margin:0}
.acc-heading>span{display:block}
.accueil .acc-label .acc-heading{text-transform:none}
.accueil .aide{font-size:17px;margin:18px 0 10px}
.accueil .envies-cadre{display:block;margin:0}
.accueil .envies-gauche{max-width:none}
.accueil .scene-envies{display:block;width:100%;aspect-ratio:350/430;margin-top:-14px}
.accueil .scene-envies>svg,.accueil .scene-envies .vinyle{display:block}
.accueil .scene-envies .vinyle{display:grid;left:calc(var(--u)*85);top:calc(var(--u)*125);width:calc(var(--u)*180);height:calc(var(--u)*180)}
.vinyle>.disque,.vinyle>img{border-radius:50%;outline:1.5px solid #f5f3ee;outline-offset:2px}
.accueil .envie,.accueil .envie.d{position:absolute;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:4px;min-height:44px;min-width:44px;font:800 calc(var(--u)*25)/.92 var(--titre);letter-spacing:-.005em}
.accueil .envie.d{align-items:flex-end;text-align:right}
.accueil .envie .et{display:flex;min-height:16px;font:500 13px/1 var(--texte)}
.accueil .envie .et::after{content:none}
.accueil .envie .mot{display:none}
.accueil .envies-droite{display:none}
.accueil .acc-sorties{text-align:center}
.acc-sorties .acc-heading{margin-inline:auto}
.acc-releases{margin-top:24px}
.acc-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px;margin-top:24px}
.acc-small{min-width:0}
.acc-small .acc-cover{margin-bottom:12px}
.acc-small .acc-legende{display:none}
/* ▶ des vignettes (accueil) : même carré crème que les murs de pochettes (.o-pj), posé sur la pochette qui, elle, ouvre la fiche ; visible et touchable (44 px) sans survol */
.acc-pj{position:absolute;z-index:2;right:8px;top:8px;width:44px;height:44px;padding:0;border:0;background:var(--creme);color:var(--encre);font-size:14px;line-height:44px;text-align:center;cursor:pointer}
.acc-pj[aria-pressed=true]{font-size:0}
.acc-pj[aria-pressed=true]::before{content:"";display:inline-block;width:12px;height:14px;box-sizing:border-box;border-left:4px solid currentColor;border-right:4px solid currentColor;vertical-align:middle}
@media(min-width:900px) and (hover:hover){.acc-pj{right:10px;top:10px;width:36px;height:36px;font-size:12px;line-height:36px;opacity:0;transform:translateY(8px);transition:opacity .35s cubic-bezier(.2,.8,.2,1),transform .35s cubic-bezier(.2,.8,.2,1)}.acc-pj[aria-pressed=true]{font-size:0}.acc-small:hover .acc-pj,.acc-small:focus-within .acc-pj,.acc-pj[aria-pressed=true]{opacity:1;transform:none}}
.acc-small .acc-release-title{display:block;margin-top:0}
.acc-small h3{font-size:26px;text-align:center}
.acc-small .acc-add{display:flex;justify-content:center;font-size:14px;margin-top:4px}
.acc-small .acc-add svg{width:16px;height:16px}
.acc-small .acc-meta{font-size:14px;margin:0}
/* Petites cartes, mobile (variante B) : « Single » en sur-titre sous la pochette, titre, bouton recentré */
@media(max-width:899px){.acc-grille>.acc-small{display:flex;flex-direction:column}.acc-grille>.acc-small .acc-meta{order:1;font-size:13px;line-height:1.2;margin:0 0 4px}.acc-grille>.acc-small .acc-release-title{order:2}.acc-grille>.acc-small .acc-add{margin-inline:auto}}
.acc-catalogue{margin-top:16px}
.acc-collection-copy>p{font-size:18px;margin:18px 0}
.acc-collection-copy small{display:block;font-size:15px;color:var(--encre-2);margin-top:4px}
.acc-tarifs{display:flex;align-items:center;gap:14px;margin:22px 0 12px}
.acc-price{font:900 100px/.85 var(--titre);white-space:nowrap;letter-spacing:-.03em}
.acc-usb{white-space:nowrap;padding-left:16px;padding-block:6px;border-left:1.5px solid var(--encre);font-size:19px;font-weight:600;line-height:1.3}
.acc-usb small{display:block;white-space:normal;margin-top:2px;font-size:12px;font-weight:400;max-width:17ch;color:var(--encre-2)}
@media(max-width:370px){.acc-usb{font-size:17px;padding-left:12px}}
/* Sous 360 px (320 : 280 px utiles) : « COLLECTION » et « 69 € | Clé USB » tiennent dans la gouttière ; 360 px et plus : inchangé. */
@media(max-width:359px){.accueil .acc-collection .acc-heading{font-size:20vw}.acc-price{font-size:25vw}}
.accueil .fleche,.acc-lettre .fleche{font:500 22px/1.3 var(--texte);gap:10px;min-height:52px}
.accueil .fleche svg,.acc-lettre .fleche svg{width:22px;height:22px;stroke-width:1.6}
.accueil .acc-collection .fleche{color:var(--encre);text-decoration:underline;text-decoration-color:#ba7e16;text-decoration-thickness:.12em;text-underline-offset:.12em;text-decoration-skip-ink:none;font-size:24px;font-weight:600}   /* contraste, option B choisie par Brice le 20/10 : texte orange sur crème = 1,86:1 ; encre + trait orange */
.accueil .acc-collection .fleche svg{stroke-width:2}
.accueil .lettre .fleche,.acc-lettre .lettre .fleche{font-size:28px;margin-top:20px}
.acc-wall{position:relative;container-type:inline-size;aspect-ratio:350/510;margin-top:14px}
.acc-wall img{position:absolute;left:calc(100cqw * var(--x) / 350);top:calc(100cqw * var(--y) / 350);width:calc(100cqw * var(--w) / 350);height:auto;aspect-ratio:1;object-fit:cover;outline:1px solid var(--filet);outline-offset:-1px}
.acc-label-intro>.disque{width:60%;height:auto;aspect-ratio:1;margin:34px auto 30px}
.acc-label-intro>p{max-width:31ch;margin:0 auto;font-size:18px;line-height:1.45;text-align:center}
.acc-avis{list-style:none;margin:44px 0 0;padding:0;display:grid;gap:34px}
.acc-avis li{width:80%}
.acc-avis li:nth-child(even){margin-left:auto}
.acc-guillemet{font:900 64px/.65 var(--titre);display:block;height:32px}
.acc-avis li:nth-child(even) .acc-guillemet{color:var(--encre)}
.acc-avis q{display:block;quotes:none;font-size:20px;font-weight:500;line-height:1.35}
.acc-avis small{display:block;font-size:15px;color:var(--encre-2);margin-top:6px}
.accueil .lettre,.acc-lettre .lettre{display:block;margin:0;padding:0 0 32px}
.accueil .lettre h2,.acc-lettre .lettre h2{font-size:15vw;line-height:.86;max-width:none;text-wrap:initial}
.accueil .acc-fit .l,.acc-lettre .acc-fit .l{display:block;width:max-content;white-space:nowrap}
/* Taille de départ du titre de la lettre sur téléphone = celle que js/pages.js (ajusterLettre) calcule ensuite (proportionnelle à la largeur utile) : le bloc ne saute plus au chargement. */
@media(max-width:600px){.accueil .acc-fit .l,.acc-lettre .acc-fit .l{font-size:calc((100vw - 40px)*.1795)}html[lang=en] .accueil .acc-fit .l,html[lang=en] .acc-lettre .acc-fit .l{font-size:calc((100vw - 40px)*.2857)}}
.accueil .lettre p,.acc-lettre .lettre p{font-size:18px;margin-top:22px}
.accueil .lettre .case,.acc-lettre .lettre .case{font-size:14px;margin-top:12px}
.accueil .lettre .raison,.acc-lettre .lettre .raison{font-size:15px;margin-top:6px}
.accueil .pied,.acc-lettre+.pied{padding-top:0;border-top:0}
.accueil .pied .desc,.acc-lettre+.pied .desc{margin-top:0;padding-top:24px;border-top:0}

/* Lecteur commun : vinyle débordant, ajout explicite, vues de l’artefact. */
.lecteur:not(.mm-lecteur) .bandeau{height:112px;padding:8px 12px 8px 116px;display:grid;grid-template-columns:1fr auto auto;grid-template-rows:44px 44px;gap:0 8px;cursor:pointer}
.lecteur:not(.mm-lecteur) .b-gauche{display:contents}
.lecteur:not(.mm-lecteur) .b-gauche>.vinyle{position:absolute;left:10px;top:-4px;width:94px;height:94px}
.lecteur:not(.mm-lecteur) .infos{grid-column:1/-1;grid-row:1;min-width:0;align-self:center}
.lecteur:not(.mm-lecteur) .b-centre{display:flex;grid-column:1/3;grid-row:2;justify-content:flex-start;align-items:center;gap:4px}
.lecteur:not(.mm-lecteur) .b-droite{display:flex;grid-column:3;grid-row:2;align-items:center;gap:0}
.lecteur:not(.mm-lecteur) .coeur-bandeau{position:static;width:36px;height:44px;filter:none}
.lecteur:not(.mm-lecteur) .coeur-bandeau svg{stroke:var(--encre);filter:none}
.lecteur:not(.mm-lecteur) .coeur-bandeau[aria-pressed=true] svg{fill:var(--encre)}
.lecteur:not(.mm-lecteur) .ajout .ajt{display:inline}
.lecteur:not(.mm-lecteur) .ajout{font-size:14px;padding:0;gap:6px}
.lecteur:not(.mm-lecteur) .ajout>svg{display:block;width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7}
.lecteur:not(.mm-lecteur) .prog{left:116px;right:12px;top:52px}
.lecteur:not(.mm-lecteur) .prog .tete{position:absolute;width:8px;height:8px;top:-3px;margin-left:-4px;border-radius:50%;background:var(--ambre)}
/* Disque du lecteur inversé : pochette sur tout le disque, macaron noir au centre, il tourne en lecture. */
.lecteur:not(.mm-lecteur) .vinyle>img{width:100%;height:100%;border-radius:50%;object-fit:cover;position:absolute;inset:0;z-index:1}
.lecteur:not(.mm-lecteur) .vinyle::after{content:"";position:absolute;inset:0;z-index:2;border-radius:50%;pointer-events:none;box-shadow:inset 0 0 0 3px #0c090c}
.lecteur:not(.mm-lecteur) .vinyle::before{content:none;display:none}   /* plus de rond au centre du disque de pochette (19/10) */
.lecteur:not(.mm-lecteur) .vinyle{animation:lecteur-tourne 3.2s linear infinite;animation-play-state:paused}
.lecteur[data-etat="lecture"]:not(.mm-lecteur) .vinyle{animation-play-state:running}
@keyframes lecteur-tourne{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.lecteur:not(.mm-lecteur) .vinyle,.lecteur[data-etat="lecture"]:not(.mm-lecteur) .vinyle{animation:none}}
/* Barre repliée (20/10) : plus de disque, une pochette carrée classique : ni rotation, ni arrondi, ni reflet de vinyle, ni trou central (même taille qu'avant). */
.lecteur:not(.mm-lecteur) .b-gauche>.vinyle{animation:none;border-radius:0;background:none;box-shadow:none}
.lecteur:not(.mm-lecteur) .b-gauche>.vinyle::before,.lecteur:not(.mm-lecteur) .b-gauche>.vinyle::after{content:none;display:none}
.lecteur:not(.mm-lecteur) .b-gauche>.vinyle>img{border-radius:0;outline:0}
html.joue:has(.lecteur:not(.mm-lecteur)) body{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))}
/* Barre repliée, variante B « tiroir » validée (20/10, téléphone et tablette < 900 px ; l'ordinateur garde ordinateur.css) : le haut du grand lecteur, 134 pt + zone de sécurité du bas.
   Poignée en haut, pochette carrée 70, titre Big Shoulders 31 px ; cœur, suivant et « Ajouter · prix » sur une rangée ; bouton lecture rond ambre 58 à droite ;
   ligne de temps « 0:23 —●— 1:16 » (progression déplaçable au doigt, zone de toucher de 36 pt). Fond = couleur de la pochette (--luna-fond), textes crème. */
.b-poignee,.b-tm0,.b-tm1{display:none}
@media(max-width:899px){
  .lecteur:not(.mm-lecteur) .bandeau .b-zone{display:contents}
  .lecteur:not(.mm-lecteur) .bandeau{display:block;position:relative;height:calc(134px + env(safe-area-inset-bottom,0px));padding:0;background:var(--luna-fond,#2b2b27);border-top:0;color:#f5f3ee}
  .lecteur:not(.mm-lecteur) .bandeau>*,.lecteur:not(.mm-lecteur) .bandeau .b-zone>*{position:absolute}
  .lecteur:not(.mm-lecteur) .bandeau .b-poignee{display:block;left:50%;top:8px;width:40px;height:4px;margin-left:-20px;background:rgba(245,243,238,.55);pointer-events:none}
  .lecteur:not(.mm-lecteur) .bandeau .b-gauche>.vinyle{left:14px;top:24px;width:70px;height:70px}
  .lecteur:not(.mm-lecteur) .bandeau .infos{left:98px;right:84px;top:24px;display:block;min-width:0}
  .lecteur:not(.mm-lecteur) .bandeau .t{display:block;font:900 31px/30px var(--titre);text-transform:uppercase;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:none;color:#f5f3ee}
  .lecteur:not(.mm-lecteur) .bandeau .s{display:none}
  .lecteur:not(.mm-lecteur) .bandeau .ic{width:44px;height:44px;color:#f5f3ee}
  .lecteur:not(.mm-lecteur) .bandeau .ic svg{fill:#f5f3ee}
  .lecteur:not(.mm-lecteur) .bandeau #bCoeur{left:85px;top:56px;width:44px;height:44px;margin:0}
  .lecteur:not(.mm-lecteur) .bandeau #bSuiv{left:119px;top:56px}
  .lecteur:not(.mm-lecteur) .bandeau #bAjout{left:163px;top:56px;height:44px;min-height:44px;min-width:44px;white-space:nowrap;color:var(--ambre,#e8a93a);font-weight:700}
  .lecteur:not(.mm-lecteur) .bandeau #bPlay{right:14px;top:28px;width:58px;height:58px;border-radius:50%;background:var(--ambre,#e8a93a)}
  .lecteur:not(.mm-lecteur) .bandeau #bPlay svg{fill:#1c1417}
  .lecteur:not(.mm-lecteur) .bandeau .prog{left:56px;right:56px;top:112px;height:4px;background:rgba(245,243,238,.22);touch-action:none;z-index:2}
  .lecteur:not(.mm-lecteur) .bandeau .prog::after{content:"";position:absolute;left:0;right:0;top:-16px;height:36px}
  .lecteur:not(.mm-lecteur) .bandeau .prog .rempli{position:absolute;left:0;top:0;height:100%;background:var(--ambre,#e8a93a)}
  .lecteur:not(.mm-lecteur) .bandeau .prog .tete{width:16px;height:16px;top:-6px;margin-left:-8px;border-radius:50%;background:#f5f3ee;box-shadow:0 1px 4px rgba(0,0,0,.35)}
  .lecteur:not(.mm-lecteur) .bandeau .b-tm0,.lecteur:not(.mm-lecteur) .bandeau .b-tm1{display:block;top:105px;font-size:13px;line-height:18px;font-variant-numeric:tabular-nums;color:rgba(245,243,238,.8);pointer-events:none}
  .lecteur:not(.mm-lecteur) .bandeau .b-tm0{left:14px}
  .lecteur:not(.mm-lecteur) .bandeau .b-tm1{right:14px}
  .lecteur:not(.mm-lecteur) .bandeau .coeur-bandeau::before{content:none}
  .lecteur:not(.mm-lecteur) .bandeau .coeur-bandeau svg{stroke:rgba(245,243,238,.82)}
  .lecteur:not(.mm-lecteur) .bandeau .coeur-bandeau[aria-pressed=true] svg{fill:#f5f3ee;stroke:#f5f3ee}
  html.joue:has(.lecteur:not(.mm-lecteur)) body{padding-bottom:calc(134px + env(safe-area-inset-bottom,0px))}
}
.fb-plein{position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100%;max-height:none;padding:18px max(20px,calc((100vw - 520px)/2));border:0;background:var(--creme);color:var(--encre);overflow-y:auto;overscroll-behavior:contain;z-index:40}
.fb-plein[open]{display:flex;flex-direction:column;align-items:stretch}
.fb-plein::backdrop{background:var(--creme);opacity:var(--fond,1)}
.fb-plein:focus{outline:none}
html:has(.fb-plein[open]){overflow:hidden}
.fb-plein .fb-haut{display:flex;justify-content:space-between;align-items:center;min-height:56px;flex-shrink:0}
.fb-plein .fb-haut .disque{width:56px;height:56px}
.fb-reduire{display:flex;align-items:center;gap:8px;min-height:48px;font-size:18px;background:none;border:0;border-radius:0;box-shadow:none;-webkit-tap-highlight-color:transparent}
.fb-reduire:focus:not(:focus-visible){outline:none;box-shadow:none}
.fb-reduire:focus-visible{outline:none;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px}
.fb-reduire svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6}
.fb-plein h2{font:900 clamp(42px,12vw,76px)/.9 var(--titre);margin:18px 0 8px;text-transform:uppercase;text-align:center}
.fb-source{font-size:15px;margin:6px 0 0;text-align:center}
.fb-fin-scene .vinyle>img{width:44%;height:auto;border-radius:0;outline:0;aspect-ratio:1;object-fit:cover}
/* Lecteur déplié (maquette D2) : disque pochette + macaron qui tourne, anneau de progression ambre, onde « Points » de part et d’autre du disque (niveaux de l’analyseur), titre et cœur,
   commandes encadrées par les temps, « Ensuite », barre d'achat ambre et rangée des humeurs ancrées en bas. Colonne de 520 px au plus. */
#vue:not(.luna-lecteur).fb-plein{padding:0 max(0px,calc((100vw - 520px)/2));overflow:hidden}
#vue:not(.luna-lecteur) .fb-haut{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:calc(8px + env(safe-area-inset-top,0px)) 14px 0 14px;min-height:56px}
#vue:not(.luna-lecteur) .fb-reduire{justify-self:start;font-size:16px;color:var(--encre-2)}
#vue:not(.luna-lecteur) #vFermer{position:relative;width:36px;height:36px;min-height:36px;padding:0;justify-content:center;gap:0;border:1px solid rgba(28,20,23,.18);border-radius:50%;background:transparent;color:#1c1417}
#vue:not(.luna-lecteur) #vFermer::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
#vue:not(.luna-lecteur) #vFermer svg{width:20px;height:20px}
.fb-live{flex:none;width:8px;height:8px;border-radius:50%;background:var(--encre);animation:live-clignote 1.4s ease-in-out infinite}
@keyframes live-clignote{0%,100%{opacity:1}50%{opacity:.12}}
@media (prefers-reduced-motion:reduce){.fb-live{animation:none}}
#vue:not(.luna-lecteur) .fb-corps{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:0 22px;overflow-y:auto;overscroll-behavior:contain}
#vue:not(.luna-lecteur) .fb-corps>*{flex-shrink:0}
.fb-disque-progression{position:relative;width:min(100% - 88px,276px,max(150px,calc(100dvh - 500px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))));aspect-ratio:1;align-self:center;margin:6px 0 0;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.fb-disque-progression:active{cursor:grabbing}
.fb-disque-progression:focus:not(:focus-visible){outline:none}
.fb-disque-progression:focus-visible{outline:none}
.fb-disque-progression:focus-visible #vArc{stroke-width:11}
.fb-disque-progression>svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* Onde « Points » (O4) : toile pleine largeur de la vue, centrée sur le disque (haut posé par lecteur.js) ; le reste de la vue passe devant */
.fb-points{position:absolute;left:0;z-index:2;display:block;pointer-events:none;opacity:1;filter:none}   /* au-dessus du verre (::before/::after) et de tout voile */
#vue:not(.luna-lecteur)>.fb-haut,#vue:not(.luna-lecteur)>.fb-corps{position:relative;z-index:1}
#vDisque .vinyle{inset:4.35%;width:auto;height:auto;background:#111;animation:lecteur-tourne 3.2s linear infinite;animation-play-state:paused}
#vue:not(.luna-lecteur)[data-etat="lecture"] #vDisque .vinyle{animation-play-state:running}
#vDisque .vinyle>img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;outline:0;z-index:1}
#vDisque .vinyle::after{content:"";position:absolute;inset:0;z-index:2;border-radius:50%;pointer-events:none;box-shadow:inset 0 0 0 3px #0c090c}
@media (prefers-reduced-motion:reduce){#vDisque .vinyle,#vue:not(.luna-lecteur)[data-etat="lecture"] #vDisque .vinyle{animation:none}}
.fb-titre-ligne{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-top:14px}
.fb-titre-bloc{flex:1;min-width:0}
#vue:not(.luna-lecteur) #vT{font:900 54px/.9 var(--titre);letter-spacing:-.005em;text-transform:uppercase;text-align:left;margin:0}
#vue:not(.luna-lecteur) #vT .l{display:block;width:max-content;white-space:nowrap}
#vue:not(.luna-lecteur) .fb-source{text-align:left;margin:8px 0 0;font-size:15px;color:var(--encre-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-coeur{flex:none;width:48px;height:48px;display:grid;place-items:center;margin:-2px -6px 0 0;color:var(--encre)}
.fb-coeur svg{width:34px;height:31px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.fb-coeur[aria-pressed=true]{color:var(--or)}
.fb-coeur[aria-pressed=true] svg{fill:currentColor}
.fb-transport{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.fb-t{width:44px;font:500 13.5px/1 var(--texte);color:var(--encre-2);font-variant-numeric:tabular-nums}
.fb-t.d{text-align:right}
.fb-commandes{display:flex;align-items:center;gap:26px}
.fb-commandes button{width:48px;height:48px;display:grid;place-items:center}
.fb-commandes svg{width:24px;height:24px;fill:currentColor}
.fb-commandes .fb-gros{width:68px;height:68px;border-radius:50%;background:var(--encre);color:var(--creme)}
.fb-commandes .fb-gros svg{width:26px;height:26px}
.fb-aide{font-size:13px;line-height:1.3;color:var(--encre-2);padding-left:29px;margin:4px 0 0}
.fb-ensuite{display:flex;align-items:center;gap:13px;width:100%;min-height:52px;margin-top:10px;font-size:15px;color:var(--encre-2)}
.fb-ensuite img{width:44px;height:44px;object-fit:cover;flex:none}
.fb-ens-t{display:block;min-width:0}
.fb-ens-t>*{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-ens-t>[hidden]{display:none}
.fb-ens-t b{color:var(--encre);font-weight:600}
.fb-ens-t small{font-size:13.5px;margin-top:3px}
.fb-pied{flex:none;position:relative}
.fb-achat{position:relative;overflow:hidden;display:flex;width:100%;height:60px;justify-content:space-between;align-items:center;padding:0 22px;background:var(--ambre);color:var(--encre)}
.fb-achat .g{display:flex;align-items:center;gap:12px;min-width:0;font:600 17px/1 var(--texte)}
.fb-achat .g small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 14px/1 var(--texte);opacity:.72}
.fb-achat .dt{flex:none;font:500 14px/1 var(--texte);opacity:.72;font-variant-numeric:tabular-nums}
.fb-achat .px{flex:none;margin-left:12px;font:900 30px/1 var(--titre)}
.fb-achat>*{position:relative;z-index:1}
.fb-achat .lib{display:grid;overflow:hidden;line-height:1.3}
.fb-achat .lib>b{grid-area:1/1}
.fb-voir{display:none!important}
.fb-achat svg{width:23px;height:23px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round}
.fb-humeurs{display:flex;align-items:flex-start;justify-content:space-between;padding:10px 8px calc(6px + env(safe-area-inset-bottom,0px));background:var(--creme)}
.fb-humeurs button{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:44px;min-height:48px;padding:0 3px;font:500 13px/1 var(--texte);white-space:nowrap}
.fb-humeurs svg{width:24px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.fb-humeurs .fb-vide{display:block;height:16px}
.fb-humeurs .lib{display:block;padding-bottom:5px;border-bottom:2.5px solid transparent}
.fb-humeurs button[aria-pressed=true] .lib{font-weight:600;border-color:var(--ambre)}
.fb-humeurs .sep{flex:none;width:1px;height:42px;background:var(--filet)}
.fb-humeurs .cc{color:var(--or-texte)}
.fb-humeurs .cc .lib{display:flex;align-items:center;gap:5px;font-weight:600;font-size:14px;border-bottom:0;padding-bottom:4px}
.fb-humeurs .cc svg{width:17px;height:15px;fill:currentColor;stroke:none}
.fb-humeurs button:disabled{opacity:.4;cursor:default}
.fb-fin-nom{font:900 34px/1 var(--titre);margin:20px 0 0;text-align:center}
.fb-fin-scene{aspect-ratio:350/300;margin-top:10px;flex-shrink:0}
.fb-fin-scene .vinyle{left:calc(var(--u)*72);top:calc(var(--u)*46);width:calc(var(--u)*206);height:calc(var(--u)*206)}
.fb-fin-scene button{position:absolute;min-height:48px;font-size:18px}
.fb-fin-scene .fb-fin-ajout{right:0;top:0;display:flex;align-items:center;gap:6px;color:var(--encre);font-weight:600;text-decoration:underline;text-decoration-color:#ba7e16;text-decoration-thickness:3px;text-underline-offset:4px}
.fb-fin-scene .fb-fin-ajout svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2}
.fb-fin-scene .fb-reecoute{left:0;top:calc(var(--u)*244)}
.fb-fin-scene .fb-fin-suite{right:0;top:calc(var(--u)*258)}
.fb-proche{display:flex;flex-direction:column;align-items:center;text-align:center;margin:20px auto 0;font-size:16px;gap:6px}
.fb-proche img{width:120px;height:120px;object-fit:cover}
.fb-proche b{font:900 30px/1 var(--titre)}
@media(prefers-reduced-motion:reduce){.acc-rond,.fb-plein{transition:none}}

.accueil .envie .et svg{display:block}
.accueil .envie.actif .et svg{display:none}
.accueil .envie .mot-env{white-space:normal}
.accueil .acc-envies .acc-heading{font-size:clamp(58px,16vw,76px)}

.lecteur:not(.mm-lecteur) .bandeau{touch-action:pan-x}
.lecteur:not(.mm-lecteur) .sr:focus-visible{clip:auto;width:auto;height:auto;bottom:100%;left:16px;padding:10px;background:var(--creme);z-index:2}
@media(max-width:899px){.lecteur:not(.mm-lecteur) #bPrec,.lecteur:not(.mm-lecteur) #bFermer,.lecteur:not(.mm-lecteur) .o-temps{display:none}}
.accueil .sac .pastille{right:0}
.lecteur:not(.mm-lecteur) .bandeau .ajout::after{content:none}

/* Titres des pages secondaires : même corps mobile, y compris les anciennes variantes. */
@media(max-width:899px){
  body:not(.accueil) h1.aff,body:not(.accueil) .ecran h1.aff{font-size:44px}
}

@keyframes fb-m-trace{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}

/* Reçu de l'ajout au panier (js/panier.js) : bandeau crème, filets encre ; en bas sur téléphone, en coin de 400 px sur ordinateur. À plat, seule la pochette est carrée. */
.fb-recu{position:fixed;z-index:45;display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 16px;background:var(--creme);color:var(--encre);border-top:1px solid var(--encre);border-bottom:1px solid var(--encre);opacity:0;transition:opacity .2s}
.fb-recu.fb-recu-vu{opacity:1}
.fb-recu.fb-recu-mob{left:0;right:0}
.fb-recu.fb-recu-ord{width:400px;max-width:calc(100vw - 32px)}
.fb-recu img,.fb-recu-vide{flex:none;width:32px;height:32px;object-fit:cover;background:var(--filet)}
.fb-recu img.fb-recu-col{object-fit:contain;padding:3px;background:var(--encre)}
.fb-recu .fb-recu-t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.fb-recu b{font:600 15px/1.2 var(--texte);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb-recu small{font:500 13px/1.2 var(--texte);color:var(--encre-2);font-variant-numeric:tabular-nums}
.fb-recu a{flex:none;font:600 15px/1.2 var(--texte);color:var(--encre);text-decoration:underline;text-decoration-color:#ba7e16;text-decoration-thickness:3px;text-underline-offset:4px;white-space:nowrap}   /* le reçu a toujours son fond crème, même dans le lecteur : #ba7e16 */
.fb-recu a:focus-visible{outline:2px solid var(--ambre);outline-offset:2px}
.pastille.fb-recu-hote{overflow:hidden;display:inline-block;vertical-align:top}
.fb-recu-r{display:block}
.fb-recu-r i{display:block;font-style:normal;text-align:center}
@media(prefers-reduced-motion:reduce){.fb-recu{transition:opacity .01s}}

/* ===== Musique : onglets de format (M2 « Onglets typographiques », choix du 18/10). À plat : filet bas, soulignement ambre ===== */
.onglets{display:flex;align-items:flex-end;margin:14px 0 0;border-bottom:1px solid var(--filet)}
.onglets button{position:relative;min-height:48px;padding:0 0 4px;margin-right:22px;display:inline-flex;align-items:flex-end;font:900 26px/1 var(--titre);letter-spacing:.005em;text-transform:uppercase;text-align:left;color:var(--encre-3)}
.onglets button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:#ba7e16;transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.onglets button[aria-selected=true]{color:var(--encre)}
.onglets button[aria-selected=true]::after{transform:scaleX(1)}
.onglets button:focus-visible{outline:2px solid var(--ambre);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.onglets button::after{transition:none}}

/* ===== La Collection : « Dos de pochette » (C4, choix du 18/10). Chiffres Big Shoulders séparés par des filets, prix en dernier ; à plat ===== */
.ecran.collection>.px-o{white-space:normal;letter-spacing:0;font:400 16px/1.3 var(--texte);margin:20px 0 0}
.col-chiffres,.col-infos{list-style:none;margin:0;padding:0}
.col-chiffres{border-bottom:1px solid var(--filet)}
.col-chiffres li{padding:14px 0 10px;border-top:1px solid var(--filet);display:flex;align-items:baseline;gap:12px}
.col-chiffres b,.col-chiffres i{font-style:normal;font-weight:900}
.col-chiffres b{font:900 clamp(64px,19vw,92px)/.9 var(--titre);letter-spacing:-.03em}
.col-chiffres span{font:500 20px/1 var(--texte);color:var(--encre-2)}
.col-chiffres .col-prix{padding:18px 0 14px}
.col-chiffres .col-prix b{font-size:min(31vw,132px);letter-spacing:-.04em}
.col-chiffres .col-prix i{font-size:min(31vw,132px);color:var(--or);margin-left:-.13em}   /* orange d'origine gardé par Brice le 20/10 (assez gros pour le contraste) ; € rapproché du 69 d'un tiers de l'écart (20/10) */
.col-infos{margin-top:22px;border-bottom:1px solid var(--filet)}
.col-infos li{padding:12px 0;border-top:1px solid var(--filet);font:500 16px/1.35 var(--texte);color:var(--encre-2)}
.col-infos li:first-child{color:var(--encre)}
html[lang=en] .col-chiffres .col-prix{gap:0}
html[lang=en] .col-chiffres .col-prix i{margin-left:0;margin-right:-.055em}   /* EN : € collé au 69 (« €69 ») ; la chasse du € de la police du texte laissait un blanc */
/* Musique téléphone : sous les onglets, la ligne de compte est masquée (choix de Brice) ; l'ordinateur la garde et n'a pas les onglets */
@media(max-width:899px){.ecran.musique>.compte{display:none}}
@media(min-width:900px){.onglets{display:none}}

/* Lecteur déployé, file « Ensuite » (lignes communes au volet téléphone et à la colonne ordinateur) : à plat, filets, pochettes carrées de 44 px */
.fb-rac,.fb-zf,.fb-filet,#vue:not(.luna-lecteur) #vImg2{display:none}
.fb-fl{list-style:none;margin:0;padding:0}
.fb-fl>li{border-top:1px solid var(--filet)}
.fb-fl-ligne{display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:6px 0;text-align:left;color:var(--encre);background:none;border:0;border-radius:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fb-fl-ligne img{width:44px;height:44px;flex:none;object-fit:cover;background:var(--filet);border-radius:0}
.fb-fl-t{display:block;min-width:0;flex:1}
.fb-fl-t b{display:block;font:900 24px/1 var(--titre);text-transform:uppercase;letter-spacing:.005em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-fl-t small{display:block;margin-top:4px;font:500 13px/1.1 var(--texte);color:var(--encre-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
em.fb-fl-tag{flex:none;font:600 11px/1 var(--texte);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--or-texte)}
.fb-fl-prochain .fb-fl-t b{color:var(--encre)}
.fb-fl-r{position:relative;flex:none;width:16px;height:16px;color:var(--encre-2)}
.fb-fl-r svg{display:block;width:16px;height:16px}
.fb-fl-cours .fb-fl-r{color:var(--or)}
.fb-fl-prochain{border-top:2px solid var(--or)!important}
.fb-fl-ligne:focus-visible{outline:2px solid var(--encre);outline-offset:-2px}
.fb-fl-vide{padding:18px 0;font:500 15px/1.3 var(--texte);color:var(--encre-2)}
@media (hover:hover){.fb-fl-ligne:hover .fb-fl-t b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}}
.fb-zc{display:contents}
.fb-za{display:block}

/* Volet plein « Ensuite » (téléphone) : posé dans #vue:not(.luna-lecteur), du bas de l'en-tête au bas de la ligne « Ensuite » */
.fb-volet{position:absolute;left:0;right:0;z-index:6;display:flex;flex-direction:column;background:var(--creme);border-top:1.5px solid var(--encre);padding:0 22px;
  transform:translateY(24px);opacity:0;visibility:hidden;transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .22s,visibility 0s .32s;overscroll-behavior:contain}
.fb-volet.ouvert{transform:none;opacity:1;visibility:visible;transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .22s,visibility 0s}
.fb-volet .fb-fl{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-top:2px}
.fb-volet .fb-fl>li:first-child{border-top:0}
.fb-volet-pied{flex:none;display:flex;align-items:center;gap:10px;min-height:52px;width:100%;margin:0;padding:0;border-top:1px solid var(--filet);background:none;border-radius:0;color:var(--encre-2);font:500 15px/1 var(--texte);text-align:left}
.fb-volet-pied span:first-child{color:var(--encre);font-weight:600}
.fb-volet-pied svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-left:auto}
.fb-volet-pied .fb-ferme{order:3}
.fb-volet-pied:focus-visible{outline:2px solid var(--encre);outline-offset:-2px}
#vue:not(.luna-lecteur) #vEnsuite[aria-expanded="true"]{visibility:hidden}
@media (prefers-reduced-motion:reduce){.fb-volet,.fb-volet.ouvert{transition:none}}

/* Lecteur déployé, téléphone : le disque qui tourne (comme sur ordinateur), entouré de l'onde « Points » (O4) ; anneau de progression ambre ; geste de rotation inchangé.
   Sous les commandes : le texte du geste et la liste « Ensuite » (#vFile), qui défile avec le corps du lecteur. Mélanger : cadre carré, texte et icône jaunes. */
@media (max-width:899px){
  #vDisque{width:min(100% - 56px,320px,max(160px,calc(100dvh - 470px)));margin:10px 0 0}
  #vDisque .vinyle>#vImg2{display:block;z-index:2}   /* balayage du mix : la nouvelle pochette monte sur l'ancienne, dans le disque */
  #vDisque .vinyle>#vImg2[hidden]{display:none}
  #vDisque .vinyle>img{pointer-events:none}   /* sinon le navigateur lance un glisser d'image et coupe le geste de rotation */
  #vue:not(.luna-lecteur) .fb-haut{background:var(--creme)}
  #vue:not(.luna-lecteur)>.fb-pied{z-index:1}
  #vue:not(.luna-lecteur) .fb-corps{padding-bottom:20px}
  #vue:not(.luna-lecteur) .fb-ensuite{margin:12px 0 4px}
  #vue:not(.luna-lecteur) #vT{font-size:46px}
  #vue:not(.luna-lecteur) .fb-titre-ligne{margin-top:14px}
  #vue:not(.luna-lecteur) .fb-source{margin-top:6px}
  #vue:not(.luna-lecteur) .fb-transport{margin-top:4px}
  #vue:not(.luna-lecteur) .fb-commandes .fb-gros{width:72px;height:72px;background:#e8a93b;color:#1e1220;box-shadow:inset 0 0 0 1px rgba(30,18,32,.22)}
  #vue:not(.luna-lecteur) .fb-aide{display:block;padding-left:0;margin:8px 0 0;text-align:center;font-size:13.5px}
  #vue:not(.luna-lecteur) .fb-zf{display:none}   /* la file s'ouvre dans le volet #vVolet via « Ensuite » */
  #vue:not(.luna-lecteur) .fb-zf-t{display:flex;justify-content:space-between;align-items:baseline;margin:0;padding-bottom:8px;font:600 14px/1 var(--texte);color:var(--encre);letter-spacing:.08em;text-transform:uppercase}
  #vue:not(.luna-lecteur) .fb-zf-t small{font:500 12.5px/1 var(--texte);letter-spacing:0;text-transform:none;color:var(--encre-3)}
  #vue:not(.luna-lecteur) .fb-zf .fb-fl-t b{font-size:23px}
}

/* Musique : bouton FILTRER et volet plein écran (téléphone) ; la rangée #rythmes y est remplacée par le volet */
.fm{display:none}
@media (max-width:899px){
  .fm{display:block;margin-top:16px}
  :where(.fm) button{font:inherit;color:inherit;text-align:left;padding:0}
  .fm sup{margin-left:3px;font:500 11px/1 var(--texte);color:var(--encre-3);vertical-align:top;position:relative;top:.2em}
  .fm-ouvrir{display:flex;align-items:baseline;justify-content:space-between;width:100%;min-height:52px;padding:0 0 6px;border-bottom:1px solid var(--filet)}
  .fm-rang{display:flex;align-items:stretch;gap:12px}
  .fm-rang .fm-ouvrir{flex:1 1 auto;width:auto;min-width:0}
  .fm-alea{flex:none;width:52px;min-height:52px;display:grid;place-items:center;border:1.5px solid var(--encre);border-radius:0;color:var(--encre)}
  .fm-alea svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .fm-alea:focus-visible{outline:2px solid var(--ambre);outline-offset:2px}
  .fm-mot{font:900 30px/1 var(--titre);text-transform:uppercase;letter-spacing:.005em;color:var(--encre)}
  .fm-res{font:900 20px/1 var(--titre);text-transform:uppercase;color:var(--or)}
  .fm-volet{position:fixed;inset:0;z-index:300;overflow-y:auto;background:var(--creme);padding:20px 20px 120px}
  .fm-volet[hidden]{display:none}
  .fm-haut{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
  .fm-haut .fm-mot{font-size:44px}
  .fm-fermer{font:500 16px/1 var(--texte);min-height:44px;color:var(--encre-2)}
  .fm-volet h3{margin:22px 0 2px;font:500 14px/1 var(--texte);letter-spacing:.08em;text-transform:uppercase;color:var(--encre-2)}
  .fm-ligne{display:flex;justify-content:flex-start;align-items:baseline;width:100%;min-height:48px;padding:6px 0;border-bottom:1px solid var(--filet);font:900 28px/1.1 var(--titre);text-transform:uppercase;color:var(--encre)}
  .fm-ligne sup{font-size:13px;margin-left:auto}
  .fm-ligne[aria-pressed=true]{color:var(--or)}
  .fm-ligne[aria-pressed=true]::before{content:"↳";margin-right:12px;font:400 20px/1 var(--texte)}
  .fm-bas{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;padding:12px 20px 16px;background:var(--creme);border-top:1px solid var(--filet)}
  .fm-eff{font:500 16px/1 var(--texte);min-height:44px;color:var(--encre-2);text-decoration:underline}
  .fm-voir{font:900 24px/1 var(--titre);text-transform:uppercase;min-height:48px;padding:0 22px!important;background:var(--ambre);color:var(--encre)}
  .fm-ouvrir:focus-visible,.fm-fermer:focus-visible,.fm-ligne:focus-visible,.fm-eff:focus-visible,.fm-voir:focus-visible{outline:2px solid var(--ambre);outline-offset:2px}
  .fm-bloque{overflow:hidden}
  .fm-volet section:last-of-type .fm-ligne:last-child{border-bottom:0}
}
/* Compteur à 0 : option en --encre-2, sans effet au toucher (le choix actif reste normal) */
.fm-ligne[aria-disabled=true]:not([aria-pressed=true]),.ecran.musique .o-colonne button[aria-disabled=true]:not([aria-pressed=true]),.ecran.musique #rythmes button[aria-disabled=true]:not([aria-pressed=true]){color:var(--encre-2);cursor:default}

/* Collection (téléphone) : livraison de la clé USB sous la ligne « Clé USB : + 6 € » */
@media(max-width:899px){.col-infos small.m-seul{display:block;margin-top:3px;font:400 14px/1.35 var(--texte);color:var(--encre-2)}}

/* === Lecteur P3 Pochette (validé par Brice 18/10) : fond = teinte dominante de la pochette ; --p3-bg posée sur <html> par js/lecteur-couleur.js === */
/* P3 « Pochette » : surcharge de couleurs du lecteur replié (.lecteur/.bandeau) et déployé (#vue:not(.luna-lecteur) : en-tête, disque, onde, liste Ensuite, volet, boutons, humeurs).
   Proposition, à injecter APRÈS css/base.css. Ne change aucune disposition. Les variables du site (--creme = fond, --encre = texte, --encre-2/-3 = secondaire,
   --filet = séparateurs, --ambre/--or = accent) sont redéfinies ici : tout ce qui les utilise suit. */
.lecteur,#vue:not(.luna-lecteur){--creme:var(--p3-bg,#1c1417);--encre:#FFFFFF;--encre-2:rgba(255,255,255,.65);--encre-3:rgba(255,255,255,.65);--filet:rgba(255,255,255,.16);--ambre:#E8A93B;--or:#E8A93B;color-scheme:dark}
/* Onde « Points » : lecteur.js lit --encre (points allumés) et --or (pic) sur #vue:not(.luna-lecteur) lui-même ; les enfants de #vue:not(.luna-lecteur) reprennent la couleur du texte. */
#vue:not(.luna-lecteur){--encre:#FFFFFF}
#vue:not(.luna-lecteur)>.fb-haut,#vue:not(.luna-lecteur)>.fb-corps,#vue:not(.luna-lecteur)>.fb-pied,#vue:not(.luna-lecteur)>.fb-volet{--encre:#FFFFFF;color:#FFFFFF}
.lecteur .bandeau{background:var(--p3-bg,#1c1417);color:#FFFFFF;border-top:1px solid rgba(255,255,255,.16)}
.lecteur .prog{background:rgba(255,255,255,.16)}
.lecteur .prog .rempli,.lecteur .prog .tete{background:#E8A93B}
#vue:not(.luna-lecteur).fb-plein,#vue:not(.luna-lecteur) .fb-haut,#vue:not(.luna-lecteur) .fb-humeurs,#vue:not(.luna-lecteur) .fb-volet{background:var(--p3-bg,#1c1417)}
#vue:not(.luna-lecteur) .fb-volet{border-top-color:rgba(255,255,255,.16)}
#vue:not(.luna-lecteur) .fb-reduire{color:rgba(255,255,255,.65)}
#vue:not(.luna-lecteur) .fb-live{background:#E8A93B}
/* disque : piste de l'anneau et arc de progression (attributs SVG du script) */
#vDisque svg circle:first-child{stroke:rgba(255,255,255,.16)}
#vArc{stroke:#E8A93B}
/* aplats jaunes : texte sombre */
#vue:not(.luna-lecteur) .fb-achat,#vue:not(.luna-lecteur) .fb-commandes .fb-gros,#vue:not(.luna-lecteur) .fb-commandes .fb-gros svg{background:#E8A93B;color:#1c1417}
#vue:not(.luna-lecteur) .fb-commandes .fb-gros{box-shadow:none}
#vue:not(.luna-lecteur) .fb-achat small{opacity:.8}
/* humeurs : actif souligné jaune, séparateur, cœurs */
#vue:not(.luna-lecteur) .fb-humeurs{border-top:1px solid rgba(255,255,255,.16)}
#vue:not(.luna-lecteur) .fb-humeurs .sep{background:rgba(255,255,255,.16)}
#vue:not(.luna-lecteur) .fb-humeurs button:disabled{opacity:.55}
#vue:not(.luna-lecteur) .fb-humeurs button.cc:disabled{opacity:1}   /* le cœur des favoris et son chiffre gardent leur couleur à 0 favori */
/* liste Ensuite (volet et zone repliée) */
#vue:not(.luna-lecteur) .fb-fl>li{border-top-color:rgba(255,255,255,.16)}
#vue:not(.luna-lecteur) .fb-fl-ligne img,#vue:not(.luna-lecteur) .fb-ensuite img{background:rgba(255,255,255,.16)}
#vue:not(.luna-lecteur) .fb-fl-prochain{border-top-color:#E8A93B!important}
#vue:not(.luna-lecteur) .fb-volet-pied{border-top-color:rgba(255,255,255,.16)}
#vue:not(.luna-lecteur) .fb-volet-pied:focus-visible,#vue:not(.luna-lecteur) .fb-fl-ligne:focus-visible{outline-color:#E8A93B}
/* Fond = couleur dominante de la pochette en cours, assombrie (luminosité 18 %) : variable --p3-bg posée sur <html> par lecteur-couleur.js. */
.lecteur .bandeau,#vue:not(.luna-lecteur).fb-plein,#vue:not(.luna-lecteur) .fb-haut,#vue:not(.luna-lecteur) .fb-humeurs,#vue:not(.luna-lecteur) .fb-volet{transition:background-color .4s}
#vue:not(.luna-lecteur) .fb-achat,#vue:not(.luna-lecteur) .fb-commandes .fb-gros,#vue:not(.luna-lecteur) .fb-commandes .fb-gros svg{color:#14100f}
/* Zones extrêmes (encoche/barre d'état en haut, barre du bas) : fond de la page et ::backdrop suivent --p3-bg pendant que le lecteur déployé est ouvert, sans replier/déplier. */
html:has(#vue:not(.luna-lecteur)[open]),html:has(#vue:not(.luna-lecteur)[open]) body{background-color:var(--p3-bg,#1c1417);transition:background-color .4s}
#vue:not(.luna-lecteur).fb-plein::backdrop{background:var(--p3-bg,#1c1417);opacity:1;transition:background-color .4s}
/* Transition entre titres : fond (400 ms, aussi html/body/::backdrop), titre et ligne « date · type » en fondu (300 ms) ; la pochette garde son balayage. Mouvement réduit : instantané. */
@keyframes fb-fondu{from{opacity:0}to{opacity:1}}
#vue:not(.luna-lecteur) .fb-fondu{animation:fb-fondu .3s ease-out}
@media (prefers-reduced-motion:reduce){#vue:not(.luna-lecteur) .fb-fondu{animation:none}.lecteur .bandeau,#vue:not(.luna-lecteur).fb-plein,#vue:not(.luna-lecteur) .fb-haut,#vue:not(.luna-lecteur) .fb-humeurs,#vue:not(.luna-lecteur) .fb-volet,html:has(#vue:not(.luna-lecteur)[open]),html:has(#vue:not(.luna-lecteur)[open]) body,#vue:not(.luna-lecteur).fb-plein::backdrop{transition:none}}
/* Volet « Ensuite » : plus d'encadré jaune sur le 1er titre ; 1re ligne en blanc comme les autres. */
#vue:not(.luna-lecteur) .fb-fl>li.fb-fl-prochain,#vue:not(.luna-lecteur) .fb-volet .fb-fl>li.fb-fl-prochain{border-top:1px solid rgba(255,255,255,.16)!important}
#vue:not(.luna-lecteur) .fb-fl-prochain .fb-fl-t b{color:#FFFFFF}
#vue:not(.luna-lecteur) .fb-fl-cours .fb-fl-t b{color:#E8A93B}
#vue:not(.luna-lecteur) .fb-fl>li.fb-fl-cours{border-top:1px solid rgba(255,255,255,.16)!important}
.fb-eq{display:inline-flex;align-items:flex-end;gap:2px;width:14px;height:.8em;margin-left:8px;vertical-align:baseline}
.fb-eq s{display:block;flex:1;height:35%;background:#E8A93B;text-decoration:none;transform-origin:bottom}
.fb-eq s:nth-child(2){height:75%}.fb-eq s:nth-child(3){height:55%}
#vue:not(.luna-lecteur)[data-etat="lecture"] .fb-eq s{animation:fb-eq .9s ease-in-out infinite alternate}
#vue:not(.luna-lecteur)[data-etat="lecture"] .fb-eq s:nth-child(2){animation-duration:.65s;animation-delay:-.3s}
#vue:not(.luna-lecteur)[data-etat="lecture"] .fb-eq s:nth-child(3){animation-duration:.8s;animation-delay:-.55s}
@keyframes fb-eq{from{transform:scaleY(.3)}to{transform:scaleY(1.25)}}
@media (prefers-reduced-motion:reduce){#vue:not(.luna-lecteur)[data-etat="lecture"] .fb-eq s{animation:none}}
/* Aide du rond : sous l'anneau, dans la rangée du disque (texte secondaire, petite police) */
#vue:not(.luna-lecteur) .fb-aide{display:block;grid-row:2;grid-column:2/-2;align-self:end;justify-self:center;margin:0 0 4px;padding:0;text-align:center;font-size:12px;line-height:1.2;color:var(--encre-2);pointer-events:none}
/* Fond verre (validé 18/10) : pochette en petit, floutée puis agrandie (léger pour iPhone), voile de --p3-bg et dégradé vertical. --p3-img posée par lecteur-couleur.js ; --p3-bg animée 400 ms. */
@property --p3-bg{syntax:"<color>";inherits:true;initial-value:#5a4650}
@property --p3-bg2{syntax:"<color>";inherits:true;initial-value:#5a4650}
@property --p3-bg3{syntax:"<color>";inherits:true;initial-value:#5a4650}
html{transition:--p3-bg .4s,--p3-bg2 .4s,--p3-bg3 .4s}
#vue:not(.luna-lecteur).fb-plein{isolation:isolate;background:transparent}
#vue:not(.luna-lecteur).fb-plein::before{content:"";pointer-events:none;position:fixed;left:35%;top:35%;width:30%;height:30%;z-index:-1;background:var(--p3-img) center/cover;filter:blur(15px) saturate(1.8);transform:scale(4.4);transform-origin:center}
html.fb-verre-fondu #vue:not(.luna-lecteur).fb-plein::before{animation:fb-fondu .4s ease-out}
#vue:not(.luna-lecteur).fb-plein::after{content:"";pointer-events:none;position:fixed;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(255,255,255,.08),rgba(0,0,0,.30)),radial-gradient(75% 55% at 82% 32%,color-mix(in srgb,var(--p3-bg2,var(--p3-bg)) 88%,transparent),transparent 72%),linear-gradient(135deg,color-mix(in srgb,var(--p3-bg) 92%,transparent) 0%,color-mix(in srgb,var(--p3-bg3,var(--p3-bg)) 92%,transparent) 100%)}   /* dégradé de la pochette : teinte dominante en haut à gauche, 3e teinte en bas à droite, lueur de la 2e teinte */
/* bandes haut et bas : teinte de la pochette (haut = teinte dominante, bas = 3e teinte), assombrie pour garder le texte blanc lisible ; change à chaque titre */
#vue:not(.luna-lecteur) .fb-haut{background:linear-gradient(rgba(0,0,0,.24),rgba(0,0,0,.24)),color-mix(in srgb,var(--p3-bg) 90%,transparent)}
#vue:not(.luna-lecteur) .fb-humeurs{background:linear-gradient(rgba(0,0,0,.24),rgba(0,0,0,.24)),color-mix(in srgb,var(--p3-bg3,var(--p3-bg)) 90%,transparent)}
#vue:not(.luna-lecteur) .fb-humeurs{border-top-color:rgba(255,255,255,.22)}
@media (prefers-reduced-motion:reduce){html{transition:none}html.fb-verre-fondu #vue:not(.luna-lecteur).fb-plein::before{animation:none}}
#vue:not(.luna-lecteur) .fb-volet .fb-fl-ligne:focus-visible{outline:0;background:rgba(255,255,255,.07)}   /* plus de cadre jaune de focus sur la 1re ligne */
/* === Lecteur L1 « Disque roi » (validé par Brice 18/10) : lecteur déployé téléphone en grille sur 100dvh, disque élastique ≤ 84vw, humeurs en icônes, « Ensuite » = 2 titres à venir, écart de 18 px avant Ajouter === */
@media (max-width:899px){
#vue:not(.luna-lecteur).fb-plein[open]{--disque-max:84vw;--g:max(18px,calc((100vw - 520px)/2 + 18px));display:grid;height:100dvh;padding:0;overflow:hidden;align-content:stretch;grid-template-columns:var(--g) 36px repeat(4,minmax(0,1fr)) 36px var(--g);grid-template-rows:auto minmax(0,1fr) auto auto auto auto auto auto}
#vue:not(.luna-lecteur) .fb-corps,#vue:not(.luna-lecteur) .fb-zc,#vue:not(.luna-lecteur) .fb-pied,#vue:not(.luna-lecteur) .fb-za,#vue:not(.luna-lecteur) .fb-transport{display:contents}
#vue:not(.luna-lecteur) .fb-zf,#vue:not(.luna-lecteur) .fb-rac{display:none}
/* en-tête */
#vue:not(.luna-lecteur) .fb-haut{grid-row:1;grid-column:1/-1;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:0;height:calc(44px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) calc(var(--g) - 4px) 0}
#vue:not(.luna-lecteur) .fb-reduire{min-height:44px;font-size:15px}
/* disque : seul élément élastique, carré, centré ; l'onde à points (canvas) se recale sur lui à chaque image */
#vue:not(.luna-lecteur) #vDisque{grid-row:2;grid-column:1/-1;justify-self:center;align-self:center;width:auto;height:calc(min(calc(100% - 20px),var(--disque-max,84vw),440px) * .85);min-height:0;aspect-ratio:1;margin:0 0 20px}   /* disque -15 % (18/10), toujours centré dans sa zone : le bas de l'anneau s'éloigne du titre ; le reste ne bouge pas */
#vue:not(.luna-lecteur) .fb-disque-progression{z-index:1}
/* temps en texte seul « écoulé / durée » (plus de barre linéaire : l'anneau du disque porte la progression) */
#vue:not(.luna-lecteur) .fb-temps{display:flex;gap:.35em;align-items:center}
#vue:not(.luna-lecteur) .fb-rang{margin-left:auto;width:auto;text-align:right}
#vue:not(.luna-lecteur) .fb-t{width:auto;font-size:13px}
#vue:not(.luna-lecteur) #vPos{text-align:left;align-self:center;line-height:24px}
#vue:not(.luna-lecteur) #vDur{text-align:left;align-self:center;line-height:24px}
/* humeurs : icônes seules ; actif = icône + filet jaune sous l'icône */
#vue:not(.luna-lecteur) .fb-humeurs{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:0;height:calc(68px + env(safe-area-inset-bottom,0px));padding:0 calc(var(--g) - 8px) env(safe-area-inset-bottom,0px);border-top:1px solid rgba(255,255,255,.16)}
#vue:not(.luna-lecteur) .fb-humeurs button{width:auto;min-width:44px;height:100%;min-height:0;padding:0 3px;gap:5px;justify-content:center;align-items:center;font-size:12px}
#vue:not(.luna-lecteur) .fb-humeurs .fb-vide{display:none}
#vue:not(.luna-lecteur) .fb-humeurs svg{width:28px;height:19px}
#vue:not(.luna-lecteur) .fb-humeurs .cc svg{width:20px;height:18px}
#vue:not(.luna-lecteur) .fb-humeurs .lib{padding:0;border:0;font-size:12px}
#vue:not(.luna-lecteur) .fb-humeurs .cc .lib{font-size:15px}
#vue:not(.luna-lecteur) .fb-humeurs button[aria-pressed=true]{box-shadow:inset 0 3px 0 var(--ambre)}
#vue:not(.luna-lecteur) .fb-humeurs button[aria-pressed=true] svg{color:var(--ambre)}
#vue:not(.luna-lecteur) .fb-humeurs button[aria-pressed=true] .lib{color:var(--or-texte)}
#vue:not(.luna-lecteur) .fb-humeurs .sep{height:32px}
#vue:not(.luna-lecteur) .fb-humeurs .cc{min-width:44px}
/* « Ensuite » : mini-pochette, titre suivant, chevron ⌃ ; un toucher ouvre le volet */
#vue:not(.luna-lecteur) #vEnsuite{margin:0;gap:10px;font-size:14px}
#vue:not(.luna-lecteur) #vEnsuite img{width:clamp(36px,4.4dvh,44px);height:clamp(36px,4.4dvh,44px)}
#vue:not(.luna-lecteur) .fb-ens-t{flex:1;min-width:0}
#vue:not(.luna-lecteur) .fb-ens-t small{display:block;margin-top:2px;font-size:13px;opacity:.8}
#vue:not(.luna-lecteur) #vEnsuite::after{content:"";flex:none;width:8px;height:8px;margin:0 6px 0 auto;border:solid currentColor;border-width:2px 0 0 2px;transform:translateY(2px) rotate(45deg)}
/* volet « Ensuite » : feuille par-dessus le bas, la mise en page dessous ne bouge pas ; refermé = état d'avant */
#vue:not(.luna-lecteur) .fb-volet{position:fixed;left:0;right:0;top:auto!important;bottom:0!important;max-height:70dvh;padding:0 var(--g);transform:translateY(100%)}
#vue:not(.luna-lecteur) .fb-volet.ouvert{transform:none}
#vue:not(.luna-lecteur) .fb-volet .fb-fl{overflow-y:auto}
#vue:not(.luna-lecteur) #vEnsuite[aria-expanded="true"]{visibility:hidden}
/* — propre à L1 « Disque roi » — */
#vue:not(.luna-lecteur) .fb-titre-ligne{grid-row:3;grid-column:2/-2;align-items:center;margin:2px 0 0;gap:4px}
#vue:not(.luna-lecteur) .fb-coeur{width:44px;height:44px;margin:0 -8px 0 0}
#vue:not(.luna-lecteur) .fb-coeur svg{width:28px;height:26px}
#vue:not(.luna-lecteur) #vT{margin:0}
#vue:not(.luna-lecteur) .fb-source{margin:3px 0 0;font-size:14px}
#vue:not(.luna-lecteur) .fb-temps{grid-row:4;grid-column:2/-2}
#vue:not(.luna-lecteur) .fb-commandes{grid-row:5;grid-column:2/-2;display:flex;justify-content:center;align-items:center;gap:clamp(28px,10vw,48px);margin-bottom:18px}
#vue:not(.luna-lecteur) .fb-commandes button{width:clamp(44px,5.8dvh,56px);height:clamp(44px,5.8dvh,56px)}
#vue:not(.luna-lecteur) .fb-commandes .fb-gros{width:clamp(60px,8dvh,76px);height:clamp(60px,8dvh,76px)}
#vue:not(.luna-lecteur) .fb-humeurs{grid-row:8}
#vue:not(.luna-lecteur) #vEnsuite{grid-row:6;grid-column:1/-1;min-height:clamp(60px,7dvh,72px);margin-bottom:18px;padding:6px var(--g);border-top:1px solid var(--filet)}
#vue:not(.luna-lecteur) .fb-achat{grid-row:7;grid-column:1/-1;height:clamp(52px,6.2dvh,64px);padding:0 var(--g)}
#vue:not(.luna-lecteur) .fb-achat .px{font-size:26px}
#vue:not(.luna-lecteur) .fb-achat .g{font-size:16px}
}
/* Haut de la page Musique (proposition M1 validée 18/10) : briques communes (à plat, filets fins, aucun arrondi). Fondu dans base.css (chargé partout : la navigation douce n'ajoute pas de feuille) ; règles limitées à .mh-on et aux classes mh-/m1-. */
.mh-on [hidden].mh-pastille,.mh-on .mh-cl-menu[hidden]{display:none!important}
.mh-ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mh-ic.mh-plein{fill:currentColor;stroke:none}
.mh-ic.mh-bas{width:16px;height:16px}

/* FILTRER : relais vers le volet d'origine ; le bouton « FILTRER + lecture aléatoire » d'origine est masqué, le volet reste */
.mh-on .fm{margin:0}
.mh-on .fm .fm-rang{display:none}
.mh-filtrer{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 14px;color:var(--encre);background:none;border:0;border-radius:0;font:900 17px/1 var(--titre);letter-spacing:.01em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mh-pastille{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 4px;background:var(--encre);color:var(--creme);font:700 11px/1 var(--texte);border-radius:0}
.mh-filtrer:focus-visible,.mh-btn:focus-visible,.mh-puce:focus-visible,.mh-cl-b:focus-visible,.mh-cl-menu button:focus-visible{outline:2px solid var(--ambre);outline-offset:2px}

/* Classement « A-Z ▾ » */
.mh-cl{position:relative;flex:none}
.mh-cl-b{display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:0 0 0 8px;background:none;border:0;border-radius:0;color:var(--encre);font:900 17px/1 var(--titre);letter-spacing:.01em;text-transform:uppercase;white-space:nowrap;cursor:pointer}
.mh-cl-menu{position:absolute;right:0;top:100%;z-index:60;min-width:200px;background:var(--creme);border:1.5px solid var(--encre)}
.mh-cl-menu button{display:flex;align-items:center;width:100%;min-height:48px;padding:0 16px;text-align:left;background:none;border:0;border-radius:0;border-top:1px solid var(--filet);font:500 16px/1 var(--texte);color:var(--encre-2);white-space:nowrap;cursor:pointer}
.mh-cl-menu button:first-child{border-top:0}
.mh-cl-menu button[aria-selected=true]{color:var(--encre);font-weight:700;box-shadow:inset 3px 0 0 var(--encre)}

/* Ligne de résultat : « 111 titres · Groove × »   [⤮ Aléatoire] */
.mh-res{display:flex;align-items:center;gap:8px;min-height:44px;border-bottom:1px solid var(--filet)}
.mh-r-txt{flex:1 1 auto;min-width:0;display:flex;align-items:center;margin:0;max-width:none;font:900 17px/1 var(--titre);letter-spacing:.01em;text-transform:uppercase;white-space:nowrap}
.mh-n{flex:none;font-weight:900}
.mh-puces{display:flex;align-items:center;min-width:0;overflow-x:auto;scrollbar-width:none}
.mh-puces::-webkit-scrollbar{display:none}
.mh-puce{flex:none;display:inline-flex;align-items:center;gap:0;min-height:40px;padding:0;background:none;border:0;border-radius:0;color:var(--encre);font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.mh-sep{margin:0 6px;color:var(--encre-3)}
.mh-x{margin-left:5px;font:400 19px/1 var(--texte);color:var(--encre-2)}
.mh-r-act{flex:none;display:flex;align-items:center;gap:6px}
.mh-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 10px;border:1.5px solid var(--encre);border-radius:0;background:none;color:var(--encre);font:900 15px/1 var(--titre);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mh-btn .mh-ic{width:17px;height:17px}
.mh-btn.mh-b-alea,.mh-btn.mh-b-alea:hover{background:var(--ambre);border-color:var(--ambre);color:var(--encre)}
.mh-b-alea:active{transform:scale(.97)}

/* Résumé sur sa propre ligne (téléphone, plusieurs filtres) */
.mh-res.mh-2l{flex-wrap:wrap;row-gap:0;padding-top:2px}
.mh-res.mh-2l .mh-r-txt{display:contents}
.mh-res.mh-2l .mh-n{order:1;flex:1 1 auto;min-width:0}
.mh-res.mh-2l .mh-r-act{order:2}
.mh-res.mh-2l .mh-puces{order:3;flex:0 0 100%;overflow:hidden}
.mh-res.mh-2l .mh-puce:first-child .mh-sep{display:none}

/* Les doublons de lecture d'origine (« Écouter cette sélection ») sont portés par la nouvelle commande ; « Tout ajouter » des coups de cœur reste */
.mh-on .actions-liste [data-ecouter-sel][data-ecouter-sel]{display:none}

/* Téléphone : le classement d'origine (#vues) est remplacé par « A-Z ▾ » */
@media(max-width:899px){
  .mh-on #vues{display:none}
  .mh-on .ecran.musique>.compte{display:none}
}
/* Ordinateur : mêmes éléments dans l'en-tête de la colonne de droite ; la colonne de gauche ne bouge pas. Lignes de grille redéfinies pour insérer la ligne de résultat (5). */
@media(min-width:900px){
  .mh-on .mh-seul-tel{display:none}
  .mh-on .ecran.musique>#vues{grid-row:4}
  .mh-on .ecran.musique>.mh-res{grid-column:2;grid-row:5;margin-top:14px}
  .mh-on .ecran.musique>.mix-mention{grid-row:6}
  .mh-on .ecran.musique>.actions-liste{grid-row:7}
  .mh-on .ecran.musique>#pasCoeur{grid-row:8}
  .mh-on .ecran.musique>.o-tete{grid-row:9}
  .mh-on .ecran.musique>.liste{grid-row:10}
  .mh-on .ecran.musique>#plus{grid-row:11}
  .mh-on .ecran.musique>#vide{grid-row:12}
  .mh-on .mh-r-txt{font-size:20px}
  .mh-on .mh-btn{height:44px;padding:0 16px;font-size:17px}
  .mh-on .mh-cl,.mh-on .mh-filtrer{display:none}
}

/* M1 : une ligne d'outils [recherche | FILTRER], humeurs, onglets + classement, ligne de résultat */
@media(max-width:899px){
  .m1-outils{display:flex;align-items:stretch;height:48px;margin:14px 0 0;border-top:1.5px solid var(--encre);border-bottom:1.5px solid var(--encre)}
  .m1-outils>.champ{flex:1 1 auto;min-width:0;margin:0;border:0;gap:10px}
  .m1-outils>.champ svg{width:22px;height:22px}
  .m1-outils>.champ input{height:45px;font-size:17px}
  .m1-outils>.champ .effacer{flex:none;width:36px;height:45px;display:grid;place-items:center}
  .m1-outils>.champ .effacer[hidden]{display:none}
  .m1-outils>.mh-filtrer{flex:none;min-height:0;height:45px;padding:0 12px 0 14px;border-left:1px solid var(--encre);font-size:16px;gap:7px}
  .m1-outils .mh-ic{width:20px;height:20px}
  .ecran.musique #rythmes{margin-top:12px}
  .m1-onglets{display:flex;align-items:flex-end;justify-content:space-between;margin-top:6px;border-bottom:1px solid var(--filet)}
  .m1-onglets>#formats{flex:1 1 auto;min-width:0;margin:0;border:0}
  .m1-onglets .onglets button,.m1-onglets>#formats button{min-height:44px;margin-right:15px;font-size:20px;padding-bottom:5px}
  .m1-onglets .mh-cl{align-self:stretch;display:flex;align-items:flex-end;padding-bottom:0}   /* A-Z au même centre vertical que Tout / Singles / EP : la hauteur de la rangée ne change pas */
  .m1-onglets .mh-cl-b{min-height:30px}
  .m1-onglets .mh-cl-b::before{inset:-14px 0 0 0}   /* zone de toucher de 44 px, vers le haut seulement */
  .mh-res{min-height:44px}
}
@media(min-width:900px){
  .mh-on .m1-outils{display:none}
  .mh-on .m1-onglets{display:contents}
}

/* EN, 1400 px et plus : « The whole catalogue. » tient sur deux lignes comme « Tout le catalogue. » (sinon l'encart déborde de la colonne et recouvre la liste) */
@media(min-width:1400px){
  html[lang=en] .o-encart-t{font-size:clamp(25px,1.9vw,28px)}
}

/* === Lecteur déployé BLANC (demande de Brice 18/10) : fond blanc cassé, encre foncée ; accent de pochette (--p3-acc, posé par lecteur-couleur.js, change à chaque titre) en liseré des bandes, anneau et points. Le bandeau replié (.lecteur) garde la teinte de pochette. === */
@property --p3-acc{syntax:"<color>";inherits:true;initial-value:#5a4650}
html{transition:--p3-bg .4s,--p3-bg2 .4s,--p3-bg3 .4s,--p3-acc .4s}
#vue:not(.luna-lecteur),#vue:not(.luna-lecteur)>.fb-haut,#vue:not(.luna-lecteur)>.fb-corps,#vue:not(.luna-lecteur)>.fb-pied,#vue:not(.luna-lecteur)>.fb-volet{--creme:#FBFAF7;--encre:#1c1417;--encre-2:#5a4f55;--encre-3:#5a4f55;--filet:rgba(28,20,23,.14);--ambre:#E8A93B;--or:#E8A93B;--or-texte:var(--encre);color:#1c1417;color-scheme:light}
#vue:not(.luna-lecteur).fb-plein,#vue:not(.luna-lecteur).fb-plein[open]{background:#FBFAF7}
#vue:not(.luna-lecteur).fb-plein::before,#vue:not(.luna-lecteur).fb-plein::after{content:none;display:none}
#vue:not(.luna-lecteur) .fb-haut,#vue:not(.luna-lecteur) .fb-humeurs,#vue:not(.luna-lecteur) .fb-volet{background:#FBFAF7}
#vue:not(.luna-lecteur) .fb-haut{border-bottom:1px solid rgba(28,20,23,.12)}
#vue:not(.luna-lecteur) .fb-humeurs{border-top:1px solid rgba(28,20,23,.14)}
#vue:not(.luna-lecteur) .fb-volet{border-top-color:var(--p3-acc,#5a4650)}
#vue:not(.luna-lecteur) .fb-reduire{color:#4a4046}
#vue:not(.luna-lecteur) .fb-live{background:var(--p3-acc,#5a4650)}
#vDisque svg circle:first-child{stroke:#E4E0DA}
#vArc{stroke:#E8A93B}   /* anneau de progression : jaune officiel (18/10), pas l'accent de pochette */
#vDisque .vinyle::before{content:none;display:none}   /* plus de rond au centre : la pochette passe jusqu'au milieu */
#vue:not(.luna-lecteur) .fb-achat,#vue:not(.luna-lecteur) .fb-commandes .fb-gros,#vue:not(.luna-lecteur) .fb-commandes .fb-gros svg{background:#E8A93B;color:#14100f}
#vue:not(.luna-lecteur) .fb-fl>li,#vue:not(.luna-lecteur) .fb-fl>li.fb-fl-prochain,#vue:not(.luna-lecteur) .fb-volet .fb-fl>li.fb-fl-prochain,#vue:not(.luna-lecteur) .fb-fl>li.fb-fl-cours{border-top:1px solid rgba(28,20,23,.14)!important}
#vue:not(.luna-lecteur) .fb-fl-ligne img,#vue:not(.luna-lecteur) .fb-ensuite img{background:#E4E0DA}
#vue:not(.luna-lecteur) .fb-volet-pied{border-top-color:rgba(28,20,23,.14)}
#vue:not(.luna-lecteur) .fb-volet-pied:focus-visible,#vue:not(.luna-lecteur) .fb-fl-ligne:focus-visible{outline-color:var(--p3-acc,#5a4650)}
#vue:not(.luna-lecteur) .fb-volet .fb-fl-ligne:focus-visible{background:rgba(28,20,23,.06)}
#vue:not(.luna-lecteur) .fb-humeurs .sep{background:rgba(28,20,23,.14)}
#vue:not(.luna-lecteur) .fb-fl-prochain .fb-fl-t b{color:#1c1417}
#vue:not(.luna-lecteur) .fb-fl-cours .fb-fl-t b{color:var(--p3-acc,#5a4650)}
#vue:not(.luna-lecteur) .fb-fl-prochain{border-top-color:rgba(28,20,23,.14)!important}
.fb-eq s{background:var(--p3-acc,#5a4650)}
html:has(#vue:not(.luna-lecteur)[open]),html:has(#vue:not(.luna-lecteur)[open]) body{background-color:#FBFAF7}
#vue:not(.luna-lecteur).fb-plein::backdrop{background:#FBFAF7}
#vue:not(.luna-lecteur) .fb-humeurs button[aria-pressed=true] .lib{border-color:var(--p3-acc,#5a4650)}
#vue:not(.luna-lecteur) .fb-recu a{color:var(--p3-acc,#5a4650)}
/* Lecteur replié (mini-lecteur du bas) : même habillage blanc que le déployé ; jaune officiel du site (--ambre #E8A93B). */
.lecteur{--creme:#FBFAF7;--encre:#1c1417;--encre-2:#5a4f55;--encre-3:#5a4f55;--filet:rgba(28,20,23,.14);--ambre:#E8A93B;--or:#E8A93B;--or-texte:var(--encre);color-scheme:light}
.lecteur .bandeau{background:#FBFAF7;color:#1c1417;border-top:1px solid rgba(28,20,23,.14)}
.lecteur .prog{background:rgba(28,20,23,.14)}
.lecteur .prog .rempli,.lecteur .prog .tete{background:#E8A93B}
/* bas du déployé : Ajouter = bande pleine largeur (comme avant), plus de liseré de couleur ; tout le bas, zone d'encoche comprise, est #FBFAF7 */
#vue:not(.luna-lecteur) .fb-pied,#vue:not(.luna-lecteur) .fb-za,#vue:not(.luna-lecteur) .fb-humeurs{background:#FBFAF7}
@media(max-width:899px){
/* pochette plus grande (disque : plafond de largeur ×0,95 au lieu de ×0,85, hauteur pleine ; marge basse réduite) et phrase « Glisse… » remontée de 12 px */
#vue:not(.luna-lecteur) #vDisque{height:min(calc(100% - 44px),calc(var(--disque-max,84vw) * .95),440px)}
#vue:not(.luna-lecteur) .fb-aide{margin:0 0 16px}
}
/* pochettes de « Ensuite » : volet 44 → 52 px ; ligne sous le disque clamp(36,4.4dvh,44) → clamp(42,5.2dvh,48) */
#vue:not(.luna-lecteur) .fb-fl-ligne img{width:52px;height:52px}
/* ligne « Ensuite » : filet 1 px + 4 px + pochette 56 px + 4 px = 65 px, la pochette touche le haut du bouton Ajouter à 4 px ; les 13 px de marge basse libérés (18 -> 0 ; ligne 60 -> 65) passent au-dessus du filet : rien d'autre ne bouge */
#vue:not(.luna-lecteur) #vEnsuite{box-sizing:border-box;min-height:65px;margin:13px 0 0;padding-top:4px;padding-bottom:4px}
#vue:not(.luna-lecteur) #vEnsuite img{width:56px;height:56px}
@media (max-width:899px) and (max-height:699px){#vue:not(.luna-lecteur) #vEnsuite{min-height:61px;margin:17px 0 0}#vue:not(.luna-lecteur) #vEnsuite img{width:52px;height:52px}}
/* En-tête du lecteur (18/10) : un seul contrôle « Mode DJ · Dans l'ordre » ouvre l'ordre ou le hasard */
#vue:not(.luna-lecteur) .fb-live{width:9px;height:9px;background:#FF3B30}
#vue:not(.luna-lecteur) .fb-haut{position:relative}
#vue:not(.luna-lecteur) .fb-dj{grid-column:2;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;border:0;background:none;color:#1c1417;font:600 14px/1 var(--texte);cursor:pointer}
#vue:not(.luna-lecteur) .fb-dj .fb-dj-mode{font-weight:400;color:#5a4f55}
#vue:not(.luna-lecteur) .fb-dj .fb-chev{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
#vue:not(.luna-lecteur) .fb-dj[aria-expanded="true"] .fb-chev{transform:rotate(180deg)}
#vue:not(.luna-lecteur) .fb-dj:focus-visible,#vue:not(.luna-lecteur) .fb-dj-menu button:focus-visible{outline:2px solid #E8A93B;outline-offset:-2px}
#vue:not(.luna-lecteur) .fb-dj-menu{position:absolute;left:0;right:0;top:100%;margin:0;padding:0;list-style:none;background:#FBFAF7;border-bottom:1px solid rgba(28,20,23,.12);z-index:5}
#vue:not(.luna-lecteur) .fb-dj-menu[hidden]{display:none}
#vue:not(.luna-lecteur) .fb-dj-menu button{display:grid;grid-template-columns:24px 1fr 20px;align-items:center;gap:14px;width:100%;min-height:62px;padding:0 20px 0 17px;border:0;border-left:3px solid transparent;border-top:1px solid rgba(28,20,23,.08);background:none;color:#1c1417;text-align:left;font:600 16px/1.2 var(--texte)}
#vue:not(.luna-lecteur) .fb-dj-menu button:disabled{opacity:.45}
#vue:not(.luna-lecteur) .fb-dj-menu button small{display:block;margin-top:3px;font:400 13px/1.3 var(--texte);color:#5a4f55}
#vue:not(.luna-lecteur) .fb-dj-menu button[aria-checked="true"]{border-left-color:#E8A93B}
#vue:not(.luna-lecteur) .fb-dj-menu svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#vue:not(.luna-lecteur) .fb-dj-menu .fb-de circle{fill:currentColor;stroke:none}
#vue:not(.luna-lecteur) .fb-dj-menu .fb-coche{visibility:hidden;width:20px;height:20px;stroke-width:2.2}
#vue:not(.luna-lecteur) .fb-dj-menu [aria-checked="true"] .fb-coche{visibility:visible}
#vue:not(.luna-lecteur)>.fb-haut{z-index:6}
#vue:not(.luna-lecteur) .fb-dj-voile{position:fixed;inset:0;background:rgba(28,20,23,.22);z-index:5}

/* === Lecteur plein écran, téléphone : la maquette validée par Brice le 19/10/2026 ===
   En-tête (réduire · file en cours · file d'attente), disque de pochette qui tourne dans son anneau de progression (point ambre) avec les ondes noires de chaque côté,
   temps sous le disque (« Extrait » et l'aide alternent au centre), titre fixe puis « SINGLE · date · rythme · BPM » et le cœur, commandes, « Prochain », « Ajouter » ambre pleine
   largeur, barre « Mélange · humeurs · ♥ ». Ordinateur (≥ 900 px) : rien ne change. */
.fb-contexte,.fb-file-btn,.fb-anneau,.fb-tete,.fb-ondes,.fb-milieu,.fb-sortie,.fb-melange{display:none}
#vue:not(.luna-lecteur) .fb-humeurs button.fb-melange{display:none}
.fb-achat .pile,.fb-achat .duree{display:contents}
@media (max-width:899px){
#vue:not(.luna-lecteur).fb-plein[open]{--g:max(20px,calc((100vw - 520px)/2 + 20px));--dmin:150px;--dm:24px;--reste:442px;--dq:max(var(--dmin),min(280px,calc(min(100vw,520px) - 158px),calc(100dvh - var(--reste) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))));grid-template-columns:var(--g) minmax(0,1fr) var(--g);grid-template-rows:auto auto minmax(auto,30fr) minmax(auto,88fr) minmax(auto,96fr) minmax(auto,92fr) auto 0 auto}   /* la hauteur libre se répartit entre disque, temps, fiche, commandes et prochain (au prorata de leur hauteur) ; Ajouter reste collé à la barre des humeurs */
#vue:not(.luna-lecteur) .fb-points{display:none!important}
/* 1. en-tête */
#vue:not(.luna-lecteur).fb-plein[open] .fb-haut{grid-row:1;grid-column:1/-1;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;height:calc(48px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 14px 0;border-bottom:1px solid var(--filet)}
#vue:not(.luna-lecteur).fb-plein[open] .fb-reduire{grid-column:1;min-height:40px}
#vue:not(.luna-lecteur).fb-plein[open] #vFermer{width:40px;height:40px;min-height:40px;border:1.5px solid var(--filet)}
#vue:not(.luna-lecteur).fb-plein[open] .fb-dj{display:none}
#vue:not(.luna-lecteur).fb-plein[open] .fb-contexte{display:flex;grid-column:2;align-items:center;justify-content:center;gap:6px;min-width:0;font:600 11px/1 var(--texte);letter-spacing:.12em;text-transform:uppercase;color:var(--encre-3);white-space:nowrap;overflow:hidden}
#vue:not(.luna-lecteur).fb-plein[open] .fb-contexte b{font-weight:600;color:var(--encre);overflow:hidden;text-overflow:ellipsis}
#vue:not(.luna-lecteur).fb-plein[open] .fb-contexte svg{flex:none;width:14px;height:14px;fill:none;stroke:var(--encre);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#vue:not(.luna-lecteur).fb-plein[open] .fb-file-btn{display:grid;grid-column:3;justify-self:start;place-items:center;width:40px;height:40px;color:var(--encre);-webkit-tap-highlight-color:transparent}
#vue:not(.luna-lecteur).fb-plein[open] .fb-file-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
#vue:not(.luna-lecteur).fb-plein[open] .fb-file-btn .pl{fill:currentColor;stroke:none}
#vue:not(.luna-lecteur).fb-plein[open] .fb-file-btn{position:relative}
#vue:not(.luna-lecteur).fb-plein[open] .fb-file-btn::before{content:"";position:absolute;inset:-2px}   /* zone tactile de 44 px */
/* 2. disque qui tourne + anneau + point ambre + ondes */
#vue:not(.luna-lecteur).fb-plein[open] #vDisque{grid-row:2;grid-column:1/-1;justify-self:center;align-self:center;width:auto;height:var(--dq);min-height:0;aspect-ratio:1;margin:16px 0 8px;cursor:pointer;touch-action:none}
#vue:not(.luna-lecteur) #vDisque>svg:not(.fb-anneau){display:none}
#vue:not(.luna-lecteur) .fb-anneau{display:block;position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none}
.fb-anneau circle{fill:none;stroke-width:3}
.fb-anneau .piste{stroke:var(--filet)}
.fb-anneau .fait{stroke:var(--encre);stroke-linecap:round}
#vue:not(.luna-lecteur).fb-plein[open] #vDisque .fb-anneau .piste{stroke:rgba(30,18,32,.14);stroke-width:3}   /* piste = celle de la maquette (la règle générale #vDisque svg circle:first-child l'éclaircissait en #E4E0DA) */
#vue:not(.luna-lecteur).fb-plein[open] #vDisque .vinyle{box-shadow:none}   /* plus de liseré gris de 1 px autour de la pochette (ombre générale de .vinyle) */
#vue:not(.luna-lecteur).fb-plein[open] #vDisque .vinyle{inset:3.81%;background:#111;animation:lecteur-tourne 6s linear infinite;animation-play-state:paused}
#vue:not(.luna-lecteur).fb-plein[open][data-etat="lecture"] #vDisque .vinyle{animation-play-state:running}
#vue:not(.luna-lecteur).fb-plein[open] #vDisque .vinyle::after,#vue:not(.luna-lecteur).fb-plein[open] #vDisque .vinyle::before{content:none;display:none}
#vue:not(.luna-lecteur).fb-plein[open] #vDisque .vinyle>img{border-radius:50%}
#vue:not(.luna-lecteur) .fb-tete{display:block;position:absolute;inset:0;transform-origin:50% 50%;pointer-events:none}
#vue:not(.luna-lecteur) .fb-tete::after{content:"";position:absolute;left:50%;top:-4px;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:var(--ambre);box-shadow:0 0 0 2.5px var(--creme)}
#vue:not(.luna-lecteur) .fb-ondes{display:block;position:absolute;top:50%;transform:translateY(-50%);width:calc((min(100vw,520px) - 100%)/2 - 6px);height:min(132px,56%);pointer-events:none}
#vue:not(.luna-lecteur) .fb-ondes.g{right:calc(100% + 6px)}
#vue:not(.luna-lecteur) .fb-ondes.d{left:calc(100% + 6px)}
#vue:not(.luna-lecteur) .fb-ondes svg{display:block;width:100%;height:100%;overflow:visible}
#vue:not(.luna-lecteur) .fb-ondes path{fill:none;stroke:var(--encre);stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7}
#vue:not(.luna-lecteur) .fb-ondes path:nth-child(2){stroke-width:1.2;opacity:.55}
#vue:not(.luna-lecteur) .fb-ondes path:nth-child(3){stroke-width:.9;opacity:.3}
@media (prefers-reduced-motion:reduce){#vue:not(.luna-lecteur).fb-plein[open] #vDisque .vinyle,#vue:not(.luna-lecteur).fb-plein[open][data-etat="lecture"] #vDisque .vinyle{animation:none}}
/* 3. temps : écoulé · « Extrait » / aide qui alternent · durée */
#vue:not(.luna-lecteur).fb-plein[open] .fb-temps{grid-row:3;grid-column:1/-1;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:0;margin:0;padding:8px var(--g) 0;font:500 12px/1.25 var(--texte);color:var(--encre-3);font-variant-numeric:tabular-nums}
#vue:not(.luna-lecteur).fb-plein[open] .fb-temps>.fb-t{width:auto;font:500 12px/1.25 var(--texte);line-height:1.25}
#vue:not(.luna-lecteur).fb-plein[open] .fb-temps>.fb-t[aria-hidden],#vue:not(.luna-lecteur).fb-plein[open] #vRang{display:none}
#vue:not(.luna-lecteur).fb-plein[open] #vPos{grid-column:1;grid-row:1;text-align:left;color:var(--encre);align-self:center;line-height:1.25}
#vue:not(.luna-lecteur).fb-plein[open] #vDur{grid-column:3;grid-row:1;text-align:right;color:var(--encre-3);align-self:center;line-height:1.25}
#vue:not(.luna-lecteur).fb-plein[open] .fb-milieu{display:grid;grid-column:2;grid-row:1;place-items:center;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.fb-milieu>span{grid-area:1/1;transition:opacity var(--fondu,.4s)}
.fb-milieu .fb-indice{opacity:0;letter-spacing:.06em;text-transform:none;font-size:11px;font-weight:500;color:var(--encre);white-space:nowrap}
.fb-temps.indice .fb-indice{opacity:1}
.fb-temps.indice .fb-lbl{opacity:0}
.fb-temps.complet .fb-milieu{visibility:hidden}
/* 4. fiche : titre fixe, « SINGLE · date · rythme · BPM », cœur à droite */
#vue:not(.luna-lecteur).fb-plein[open] .fb-titre-ligne{grid-row:4;grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:center;margin:0;padding:22px var(--g) 0}
#vue:not(.luna-lecteur).fb-plein[open] .fb-titre-bloc{display:block;grid-column:1;min-width:0}
#vue:not(.luna-lecteur).fb-plein[open] #vT{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;font:900 40px/.92 var(--titre);letter-spacing:.005em;text-transform:uppercase;white-space:nowrap}
#vue:not(.luna-lecteur).fb-plein[open] #vS{display:none}
#vue:not(.luna-lecteur).fb-plein[open] .fb-sortie{display:block;margin:7px 0 0;font:400 13px/1.3 var(--texte);color:var(--encre-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#vue:not(.luna-lecteur).fb-plein[open] .fb-sortie b{font-weight:600;color:var(--encre);letter-spacing:.12em;font-size:11px;text-transform:uppercase}
#vue:not(.luna-lecteur).fb-plein[open] #vCoeur{grid-column:2;grid-row:1;width:44px;height:44px;margin:0 -10px 0 0;padding:0;align-self:start;display:grid;place-items:center}
#vue:not(.luna-lecteur).fb-plein[open] #vCoeur svg{width:25px;height:25px}
/* 5. commandes */
#vue:not(.luna-lecteur).fb-plein[open] .fb-commandes{grid-row:5;grid-column:1/-1;display:flex;justify-content:center;align-items:center;gap:44px;margin:0;padding:6px 0 12px}
#vue:not(.luna-lecteur).fb-plein[open] .fb-commandes button{width:52px;height:52px}
#vue:not(.luna-lecteur).fb-plein[open] .fb-commandes svg{width:28px;height:28px}
#vue:not(.luna-lecteur).fb-plein[open] .fb-commandes .fb-gros{width:78px;height:78px}
#vue:not(.luna-lecteur).fb-plein[open] .fb-commandes .fb-gros svg{width:30px;height:30px}
#vue:not(.luna-lecteur).fb-plein[open] .fb-aide{display:none}
/* 6. prochain morceau */
#vue:not(.luna-lecteur).fb-plein[open] #vEnsuite{grid-row:6;grid-column:2;display:flex;align-items:stretch;gap:14px;width:auto;min-height:0;margin:0;padding:0;border-top:0;text-align:left;box-sizing:border-box}
#vue:not(.luna-lecteur).fb-plein[open] #vEnsuite::after{content:none}
#vue:not(.luna-lecteur).fb-plein[open] #vEnsuite img{width:92px;height:92px;object-fit:cover;flex:none;display:block}
#vue:not(.luna-lecteur).fb-plein[open] .fb-ens-t{display:flex;flex-direction:column;min-width:0;flex:1;padding:1px 0}
#vue:not(.luna-lecteur).fb-plein[open] .fb-ens-t>*{overflow:visible;text-overflow:clip}
#vue:not(.luna-lecteur).fb-plein[open] .fb-quand{display:flex;align-items:center;gap:6px;font:600 10px/1.2 var(--texte);letter-spacing:.16em;text-transform:uppercase;color:var(--encre-3)}
#vue:not(.luna-lecteur).fb-plein[open] .fb-quand::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ambre);flex:none}
#vue:not(.luna-lecteur).fb-plein[open] .fb-nom{font:900 28px/.95 var(--titre);text-transform:uppercase;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--encre)}
#vue:not(.luna-lecteur).fb-plein[open] .fb-nom b{font:inherit;color:var(--encre)}
#vue:not(.luna-lecteur).fb-plein[open] .fb-ens-m{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#vue:not(.luna-lecteur).fb-plein[open] .fb-rythme{display:block;font-size:12px;color:var(--encre-3);margin-top:3px}
#vue:not(.luna-lecteur).fb-plein[open] .fb-puis{display:block;margin-top:auto;font-size:12px;color:var(--encre-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#vue:not(.luna-lecteur).fb-plein[open] .fb-puis b{font-weight:500;color:var(--encre)}
/* 7. Ajouter : pleine largeur, le jaune du bouton lecture, titre complet et sa durée */
#vue:not(.luna-lecteur).fb-plein[open] .fb-achat{grid-row:7;grid-column:2;width:auto;height:60px;margin:14px 0 0;padding:0 18px 0 16px;display:flex;align-items:center;gap:12px;background:var(--ambre);border:0;color:var(--encre);text-align:left}
#vue:not(.luna-lecteur).fb-plein[open] .fb-achat .g{display:flex;align-items:center;gap:12px;flex:1;min-width:0;height:auto}
#vue:not(.luna-lecteur).fb-plein[open] .fb-achat .g>svg{width:22px;height:22px;flex:none;stroke-width:2}
#vue:not(.luna-lecteur).fb-plein[open] .fb-achat .pile{display:flex;flex-direction:column;gap:3px;min-width:0}
#vue:not(.luna-lecteur).fb-plein[open] .fb-achat .lib{display:block;overflow:visible;line-height:1}
#vue:not(.luna-lecteur).fb-plein[open] .fb-achat .lib>b{font:800 24px/1 var(--titre);letter-spacing:.02em;text-transform:uppercase;padding:0;border:0}
#vue:not(.luna-lecteur).fb-plein[open] .fb-achat .duree{display:block;font:400 12px/1.2 var(--texte);color:rgba(20,16,15,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#vue:not(.luna-lecteur).fb-plein[open] .fb-achat .duree small{display:inline;margin:0;font:inherit;color:inherit;opacity:1}
#vue:not(.luna-lecteur).fb-plein[open] .fb-achat .dt{display:inline;margin:0;font:inherit;color:inherit;opacity:1;font-variant-numeric:tabular-nums}
#vue:not(.luna-lecteur).fb-plein[open] .fb-achat .dt::before{content:" · titre complet "}
html[lang=en] #vue:not(.luna-lecteur).fb-plein[open] .fb-achat .dt::before{content:" · full track "}
#vue:not(.luna-lecteur).fb-plein[open] .fb-achat .px{margin-left:auto;font:900 34px/1 var(--titre)}
/* 8. barre du bas : Mélange · humeurs · ♥ */
#vue:not(.luna-lecteur).fb-plein[open] .fb-temps,#vue:not(.luna-lecteur).fb-plein[open] .fb-titre-ligne,#vue:not(.luna-lecteur).fb-plein[open] .fb-commandes,#vue:not(.luna-lecteur).fb-plein[open] #vEnsuite{align-self:start}   /* la hauteur répartie reste sous chaque zone : rien ne se décale à l'intérieur */
#vue:not(.luna-lecteur).fb-plein[open] .fb-humeurs{grid-row:9;grid-column:1/-1;display:flex;align-items:stretch;justify-content:flex-start;gap:0;height:calc(66px + env(safe-area-inset-bottom,0px));padding:0 6px env(safe-area-inset-bottom,0px) 8px;border-top:1px solid var(--filet)}
#vue:not(.luna-lecteur).fb-plein[open] .fb-humeurs button[data-hum=Tout]{display:none}
#vue:not(.luna-lecteur).fb-plein[open] .fb-humeurs button{position:relative;flex:1;width:auto;min-width:0;height:auto;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font:400 11.5px/1 var(--texte);color:var(--encre-3);box-shadow:none}
#vue:not(.luna-lecteur).fb-plein[open] .fb-humeurs .fb-melange{display:flex}
#vue:not(.luna-lecteur).fb-plein[open] .fb-humeurs svg{width:24px;height:16px}
#vue:not(.luna-lecteur).fb-plein[open] .fb-humeurs button[data-hum] svg{stroke-width:2}
#vue:not(.luna-lecteur).fb-plein[open] .fb-humeurs .fb-melange svg{stroke-width:1.9}
#vue:not(.luna-lecteur).fb-plein[open] .fb-humeurs .lib{padding:0;border:0;font-size:11.5px;color:inherit}
#vue:not(.luna-lecteur).fb-plein[open] .fb-humeurs button[aria-pressed=true]{color:var(--encre);font-weight:600;box-shadow:none}
#vue:not(.luna-lecteur).fb-plein[open] .fb-humeurs button[aria-pressed=true] svg,#vue:not(.luna-lecteur).fb-plein[open] .fb-humeurs button[aria-pressed=true] .lib{color:inherit}
#vue:not(.luna-lecteur).fb-plein[open] .fb-humeurs button[aria-pressed=true]::before{content:"";position:absolute;top:-1px;left:22%;right:22%;height:3px;background:var(--ambre)}
#vue:not(.luna-lecteur).fb-plein[open] .fb-humeurs .sep{flex:none;width:1px;height:auto;margin:16px 4px;background:var(--filet)}
#vue:not(.luna-lecteur).fb-plein[open] .fb-humeurs .cc{flex:none;width:52px;min-width:0;flex-direction:row;gap:5px;color:var(--encre);font:800 22px/1 var(--titre)}
#vue:not(.luna-lecteur).fb-plein[open] .fb-humeurs .cc .lib{display:flex;align-items:center;gap:5px;font:inherit;color:var(--encre)}
#vue:not(.luna-lecteur).fb-plein[open] .fb-humeurs .cc svg{width:19px;height:19px;color:var(--ambre);fill:var(--ambre);stroke:none}
}
/* écrans courts : même mise en page, plus serrée */
@media (max-width:899px) and (max-height:760px){
#vue:not(.luna-lecteur).fb-plein[open]{--dmin:140px;--dm:12px;--reste:430px}
#vue:not(.luna-lecteur).fb-plein[open] #vDisque{margin:8px 0 4px}
#vue:not(.luna-lecteur).fb-plein[open] .fb-titre-ligne{padding-top:12px}
#vue:not(.luna-lecteur).fb-plein[open] .fb-commandes{padding:2px 0 6px}
#vue:not(.luna-lecteur).fb-plein[open] .fb-commandes .fb-gros{width:64px;height:64px}
#vue:not(.luna-lecteur).fb-plein[open] .fb-commandes button{width:44px;height:44px}
#vue:not(.luna-lecteur).fb-plein[open] #vEnsuite img{width:72px;height:72px}
#vue:not(.luna-lecteur).fb-plein[open] .fb-nom{font-size:24px}
#vue:not(.luna-lecteur).fb-plein[open] .fb-achat{margin-top:8px;height:52px}
#vue:not(.luna-lecteur).fb-plein[open] .fb-humeurs{height:calc(56px + env(safe-area-inset-bottom,0px))}
}
/* Lecteur déployé sur téléphone (< 900 px) : fond = fond du site (--creme de :root, #f5f3ee, celui du body) ; ordinateur inchangé (#FBFAF7) */
@media (max-width:899px){
#vue:not(.luna-lecteur),#vue:not(.luna-lecteur)>.fb-haut,#vue:not(.luna-lecteur)>.fb-corps,#vue:not(.luna-lecteur)>.fb-pied,#vue:not(.luna-lecteur)>.fb-volet{--creme:#f5f3ee}
#vue:not(.luna-lecteur).fb-plein,#vue:not(.luna-lecteur).fb-plein[open]{background:#f5f3ee}
#vue:not(.luna-lecteur) .fb-haut,#vue:not(.luna-lecteur) .fb-humeurs,#vue:not(.luna-lecteur) .fb-volet,#vue:not(.luna-lecteur) .fb-pied,#vue:not(.luna-lecteur) .fb-za,#vue:not(.luna-lecteur) .fb-dj-menu{background:#f5f3ee}
html:has(#vue:not(.luna-lecteur)[open]),html:has(#vue:not(.luna-lecteur)[open]) body{background-color:#f5f3ee}
#vue:not(.luna-lecteur).fb-plein::backdrop{background:#f5f3ee}
}

/* Cibles tactiles : zone cliquable portée à 44 px par un pseudo-élément invisible, dessin et mise en page inchangés. */
@media(max-width:899px){
  .mh-cl-b,.mh-btn,.legal .som a,.pistes .aj,.acc-release-title a{position:relative}
  .mh-cl-b::before{content:"";position:absolute;inset:-2px 0}
  .mh-btn::before{content:"";position:absolute;inset:-3px 0}
  .legal .som a::after{content:"";position:absolute;inset:0 -6px}
  .pistes .aj::after{content:"";position:absolute;inset:0 -8px}
  .acc-release-title a::after{content:"";position:absolute;inset:-13px -2px 0}
  .onglets button::before{content:"";position:absolute;inset:0 -4px}
  .onglets button:first-child::before{inset:0 -4px 0 -14px}
}
.lecteur:not(.mm-lecteur) .coeur-bandeau{position:relative;left:auto;top:auto}
.lecteur:not(.mm-lecteur) .coeur-bandeau::before{content:"";position:absolute;inset:0 0 0 -8px}