/* FunkyBreslev · version ordinateur (≥ 900 px, la coupure de base.css). Chargée par
   <link rel="stylesheet" media="(min-width: 900px)" href="…/css/ordinateur.css?v=…"> : sous 900 px elle n'est pas appliquée,
   le téléphone ne change donc pas d'un pixel. Elle reprend la proposition « ordinateur » validée (accueil, Musique, fiche de sortie,
   La Collection, panier en tiroir de 510 px, lecteur en bandeau) en s'appuyant sur le HTML et le JavaScript du site ;
   les éléments propres à l'ordinateur portent la classe .o-seul / .o-… et sont masqués par base.css sous 900 px.
   Identité (celle de la maquette validée) : crème #f5f3ee, encre #1e1220, ambre #e8a93b (le seul jaune du site) ; Big Shoulders Display + Geist ; à plat (aucun arrondi), pochettes carrées. */

:root{
  --creme:#f5f3ee;--encre:#1e1220;--encre-2:rgba(30,18,32,.68);--encre-3:#635a61;--filet:rgba(30,18,32,.14);--or:#e8a93b;--or-texte:var(--encre);--ambre:#e8a93b;
  --g:clamp(32px,4.2vw,88px);--gout:24px;--bandeau:90px;
  --s:clamp(13px,.8vw,16px);--s2:clamp(13px,.88vw,17px);
  --tiroir:510px;
}
@media (max-width:1200px){:root{--g:32px}}
html{scroll-behavior:smooth}
body{font-size:15px}
@media (min-width:1700px){body{font-size:16px}}
:focus-visible{outline-offset:4px}
.page{max-width:1920px;padding-inline:var(--g)}
.gouttiere{padding-inline:0}
a:hover,button:hover{color:var(--or-texte)}
/* Grands textes (≥ 24 px) : au survol, l'or d'origine ; les petits textes gardent --or-texte. */
.pied .fleche:hover{color:var(--or)}   /* fond sombre : inchangé */
.fleche:not(.pied .fleche):hover,.acc-release-title a:hover,#gateSubmit:hover{color:#ba7e16}   /* contraste, orange profond choisi par Brice le 20/10 (#ba7e16 = 3,11:1 sur crème, grand texte) */
.lettre .fleche:not(.pied .fleche):hover,.fleche.o-explorer:not(.pied .fleche):hover,#gateSubmit:hover{color:var(--encre);text-decoration:underline;text-decoration-color:#ba7e16;text-decoration-thickness:.18em;text-underline-offset:.12em;text-decoration-skip-ink:none}   /* petits textes (< 24 px, ou < 18,66 px gras) : encre + trait #ba7e16 au survol (le texte #ba7e16 n'y atteindrait pas 4,5:1) ; les grands gardent le texte #ba7e16 */
.accueil .acc-collection .fleche:hover,.ecran.collection .actions .fleche[data-ajouter]:hover{color:var(--encre);text-decoration:underline;text-decoration-color:#ba7e16;text-decoration-thickness:.18em;text-underline-offset:.12em;text-decoration-skip-ink:none}   /* liens gardés en option B (encre + trait orange) : au survol, trait plus épais */
.pied .lettre .fleche:hover{color:var(--or-texte)}
.coeur:hover,.sac:hover,.acc-rond:hover{color:inherit}

/* ------------------------------------------------------------------ En-tête */
.entete{display:flex;align-items:center;height:clamp(80px,5.4vw,104px);padding:0;gap:38px;border-bottom:1px solid var(--filet);position:relative;z-index:10}
.entete .disque{grid-column:auto;width:clamp(62px,4.3vw,82px);height:clamp(62px,4.3vw,82px);flex:0 0 auto}
.nav-ordi.nom-marque{display:block!important;font-size:clamp(13px,.9vw,17px);font-weight:500;line-height:1.3;text-transform:uppercase;white-space:nowrap;margin-left:-24px}
.nom-marque span{display:block;margin-top:4px;font-weight:400;letter-spacing:.08em;color:var(--encre-2)}
.entete nav{grid-column:auto;display:flex;flex:1 1 auto;align-self:stretch;align-items:stretch;margin:0;padding:0;gap:38px;font-size:clamp(16px,1.04vw,20px)}
.entete nav a,.entete nav .sac{display:inline-flex;align-items:center;height:100%;min-height:0;padding:0;position:relative;font-size:inherit;font-weight:400;text-decoration:none;gap:0}
.entete nav>a:first-child{margin-left:auto}
.entete nav .loupe{margin-left:auto;width:auto;justify-content:flex-start;padding:0}
.entete nav .loupe svg,.entete nav .sac svg{display:none}
.entete nav .loupe~.sac{margin-left:0}
.entete nav .sac{width:auto;margin-left:auto;gap:13px}
.entete nav .loupe~.sac{margin-left:0}
.entete nav .sac .lib{display:inline}
.entete nav a:hover{text-decoration:none;color:var(--or-texte)}
.entete nav a[aria-current=page]{gap:0}
.entete nav a[aria-current=page]::before{content:none}
.entete nav a[aria-current=page]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--encre)}
.pastille{position:static;width:auto;min-width:20px;height:22px;padding:0;border-radius:0;background:none;color:var(--encre);font:inherit;font-variant-numeric:tabular-nums;line-height:1.4;border-bottom:1px solid var(--encre);text-align:center;overflow:visible}

/* ------------------------------------------------------------------ Titres, liens, flèches */
h1.aff,.titre-page{letter-spacing:-.025em}
.fleche{min-height:0;font-size:clamp(26px,2vw,38px);gap:16px}
.fleche svg{width:30px;height:30px}
.lien{min-height:0;padding-block:6px;font-size:var(--s2)}
.lien:hover{color:var(--or-texte)}
.o-rond{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:64px;height:64px;border-radius:50%;background:var(--ambre);color:var(--encre);font-size:20px;line-height:1;transition:transform .2s,background .2s,color .2s}
.o-rond:hover{background:var(--encre);color:var(--creme);transform:scale(1.05)}
.o-rond[aria-pressed=true]{font-size:0}
.o-rond[aria-pressed=true]::before{content:"";width:16px;height:18px;box-sizing:border-box;border-left:5px solid currentColor;border-right:5px solid currentColor}

/* ------------------------------------------------------------------ Pied */
.pied{margin-top:0;padding-top:clamp(40px,3.8vw,64px);padding-bottom:clamp(28px,2.6vw,44px);border-top:0;row-gap:7px}
.pied .lettre{grid-template-rows:auto auto auto auto auto minmax(0,1fr);margin:0 0 clamp(28px,2.6vw,44px);padding:clamp(30px,3vw,55px) 0;border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.pied .lettre h2{font-size:clamp(46px,3.8vw,72px);line-height:.98;max-width:6.5em;text-wrap:balance}
.pied .lettre>p:first-of-type{font-size:var(--s2)}
.pied .lettre p{margin:0 0 20px;font-size:var(--s2)}
.pied .lettre input[type=email]{grid-row:3;height:auto;margin:0;padding:6px 230px 11px 0;border-bottom:1px solid var(--encre);font-size:17px}
.pied .lettre .fleche{grid-row:3;justify-self:end;align-self:center;margin:0 0 0;font-family:var(--texte);font-weight:400;font-size:16px;white-space:nowrap;gap:8px;z-index:1;min-width:24px;min-height:24px}
.pied .lettre .fleche svg{width:18px;height:18px}
.pied .lettre .case{grid-row:4;margin-top:8px;padding-block:0;font-size:var(--s);color:var(--encre-2);align-items:center}
.pied .lettre .case input{flex-basis:16px;width:16px;height:16px;border-width:1px}
.pied .lettre .case input:checked::after{width:7px;height:3px}
.pied .lettre .raison{grid-row:5;margin-top:6px}
.pied .desc{font-size:var(--s);color:var(--encre)}
.pied .reseaux{justify-content:flex-start;gap:24px}
.pied .reseaux a,.langue{font-size:var(--s);min-height:0;color:var(--encre-2)}
.pied .copy{font-size:var(--s);color:var(--encre-2)}
.langue b,.langue a{min-width:0;min-height:0}

/* ------------------------------------------------------------------ Lecteur : bandeau horizontal clair */
.lecteur{background:var(--creme);color:var(--encre);border-top:1px solid var(--encre)}
.bandeau{height:var(--bandeau);max-width:1920px;padding:0 var(--g);grid-template-columns:1.2fr 1fr 1.2fr;column-gap:45px;background:transparent}
.prog{top:-1px;height:3px;background:rgba(32,22,37,.16)}
.prog .rempli{height:3px;background:var(--ambre)}
.bandeau .poch,.mm-mini-poch{width:58px;height:58px;flex:0 0 58px;outline:1px solid rgba(32,22,37,.14);background:var(--filet)}
.b-gauche,.mm-mini-ouvrir{gap:17px}
.bandeau .t{font:900 25px/1.2 var(--titre);color:var(--encre)}
.bandeau .s{font-size:var(--s);color:var(--encre-2)}
.bandeau .ic svg{width:28px;height:28px;fill:var(--encre)}
.bandeau .ic:hover svg{fill:var(--or)}
.b-centre{gap:22px}
.b-droite{gap:24px}
.bandeau .ajout{color:var(--encre);font-size:var(--s2);font-weight:500}
.bandeau .ajout:hover{color:var(--or-texte)}
.coeur-bandeau svg{stroke:var(--encre)}
.coeur-bandeau[aria-pressed=true] svg{fill:var(--encre)}
.mm-mini-plus .mm-coeur{color:var(--encre)}
.mm-mini-plus svg.trait{stroke:var(--encre)}
html.joue body{padding-bottom:calc(var(--bandeau) + 1px)}

/* ------------------------------------------------------------------ Panier : tiroir latéral de 510 px */
.voile{background:rgba(32,22,37,.33);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.panier{--g:38px;width:min(94vw,var(--tiroir));border-left:0}
.panier .corps{padding:0 var(--g) 8px}
.panier .haut{min-height:78px;padding-top:30px;padding-bottom:18px;border-bottom:1px solid var(--filet);align-items:center}
.panier .haut .disque{width:56px;height:56px}
.panier .titre{margin-top:24px;font-size:64px;line-height:.99}
.promo{text-align:left;margin-top:20px}
.promo b{font-size:28px}
.lignes li{padding-block:17px;border-bottom:1px solid var(--filet);gap:17px}
.lignes .nom{font-size:30px}
.lignes .px{font-size:var(--s2)}
.total{border-top:1px solid var(--encre);padding-top:20px}
.total span{font:400 15px/1.2 var(--texte)}
.total b{font-size:52px}
.panier .case{font-size:var(--s2)}
.payer{font-size:35px;padding:12px var(--g) 28px;border-top:1px solid var(--filet)}

/* ------------------------------------------------------------------ Accueil */
.heros{display:grid;grid-template-columns:calc(50% + var(--dx) + 12px) minmax(0,1fr);column-gap:0;align-items:center;padding-top:clamp(24px,2.8vw,40px);padding-bottom:clamp(18px,1.6vw,28px);position:relative}
.heros>*{grid-column:1}
.heros .sur{grid-row:1;align-self:end;margin:0 0 26px;font-size:var(--s);font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding-right:40px}
.heros h1.aff{grid-row:2;font-size:clamp(60px,5.5vw,104px);line-height:.98;margin:0 0 38px;padding-right:40px}
.heros .genres{grid-row:3;grid-column:1;margin:0 0 26px;font-size:17px;max-width:34ch}
.heros .demo{grid-row:4;grid-column:1;align-self:start;flex-direction:column;gap:0;margin:0}
.heros .ecoute{display:inline-flex;align-items:center;gap:66px;width:max-content;min-height:0;padding-block:10px;border-bottom:1px solid currentColor;margin-bottom:8px;font:500 17px/1.3 var(--texte);text-transform:none}
.heros .ecoute::before{content:"▶︎";font-size:12px;margin-right:-52px}
.heros .ecoute::after{content:"→";font-size:24px;font-weight:400}
.heros .ecoute[aria-pressed=true]{color:var(--encre);text-decoration:underline;text-decoration-color:#ba7e16;text-decoration-thickness:3px;text-underline-offset:4px}
.o-vedette{display:grid;grid-template-columns:minmax(0,1fr) 128px;column-gap:24px;align-items:end;grid-column:2;grid-row:1/span 4}
.heros>.o-vedette{max-width:none}
.o-v-poch{grid-column:1;grid-row:1;display:block;overflow:hidden}
.o-v-poch img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;outline:1px solid rgba(32,22,37,.07);outline-offset:-1px;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.o-v-poch:hover img{transform:scale(1.04)}
.o-v-lg{grid-column:1;grid-row:2;padding-top:17px;max-width:calc(100% - 100px)}
.o-v-titre{display:block;font:900 clamp(30px,2.5vw,48px)/1.12 var(--titre);letter-spacing:-.015em;text-decoration:none}
.o-v-meta{margin:7px 0 0;font-size:var(--s);color:var(--encre-2)}
.o-vedette .o-rond{grid-column:1;grid-row:2;justify-self:end;align-self:center;width:70px;height:70px;margin-top:17px}

.accueil-envies{display:grid;grid-template-columns:calc(50% + var(--dx) + 12px) minmax(0,1fr);column-gap:0;align-items:start;margin-top:0;padding:clamp(18px,1.8vw,25px) 0;border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.accueil-envies>h2{grid-column:1;grid-row:1;font-size:clamp(30px,2.4vw,44px);line-height:1}
.accueil-envies>.aide{grid-column:1;grid-row:2;margin:6px 0 0;font-size:var(--s2);color:var(--encre-2)}
.accueil-envies>.envies-cadre{grid-column:2;grid-row:1/span 2;display:block;margin:0}
.envies-gauche{max-width:none}
.scene-envies{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 28px;aspect-ratio:auto;margin:0;width:100%}
.scene-envies>svg,.scene-envies .vinyle{display:none}
.envie,.envie.d{position:static;align-items:flex-start;text-align:left;min-height:0;font-size:clamp(30px,2.4vw,44px);line-height:1;gap:8px;justify-content:flex-start}
.envie .et{font-size:var(--s);color:var(--encre-2);min-height:0}
.envie:hover{color:var(--or)}
.envie.actif .mot-env{text-decoration:none;color:#ba7e16}
.info-envie{margin:14px 0 0;font-size:var(--s2)}
.ligne-coeurs{font-size:var(--s2)}
.envies-droite:not([hidden]){display:block;margin-top:22px}
.envies-droite .envie-titre{font-size:clamp(34px,3vw,56px);margin:4px 0 18px}
.envies-droite .pochettes.ensuite{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:12px}

main#contenu>.bloc.accueil-collection{display:grid;grid-template-columns:calc(55% - 50px) minmax(0,.75fr) minmax(0,1fr);grid-template-rows:none;column-gap:50px;row-gap:0;align-items:center;margin:0;padding:clamp(40px,4.4vw,64px) 0 0;border-top:0}
main#contenu>.bloc.accueil-collection>*{grid-column:1;min-width:0}
main#contenu>section.bloc.accueil-collection>h2{grid-column:1;grid-row:1;font-size:clamp(60px,5.4vw,100px);line-height:.98;margin:0 0 20px}
main#contenu>.bloc.accueil-collection>.compte{grid-row:2;align-self:start;margin:0;font-size:var(--s2);color:var(--encre-2)}
main#contenu>.bloc.accueil-collection>.prix-l-m{display:none}
main#contenu>.bloc.accueil-collection>.prix-o{display:block;grid-column:2/4;grid-row:1;align-self:end;margin:0;font-size:var(--s2);line-height:1.3;color:var(--encre-2)}
main#contenu>.bloc.accueil-collection>.px-o{display:block;grid-column:2/4;grid-row:2;margin:10px 0 0;font:900 clamp(72px,7.2vw,138px)/1 var(--titre);letter-spacing:-.04em;color:var(--encre)}
main#contenu>.bloc.accueil-collection>.actions{grid-column:2/4;grid-row:3;margin-top:14px;flex-direction:row;align-items:center;gap:32px;flex-wrap:wrap}
main#contenu>.bloc.accueil-collection>.pochettes{grid-column:1/-1;grid-row:4;margin-top:clamp(36px,3.8vw,64px)}
.accueil-collection .pochettes,.accueil-collection .pochettes li{min-width:0}
.accueil-collection .pochettes{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr 1fr 1fr;gap:35px;align-items:start}
.accueil-collection .pochettes li,.accueil-collection .pochettes li:nth-child(n+5){flex:none;margin:0}
.accueil-collection .pochettes li:nth-child(2){margin-top:34px}
.accueil-collection .pochettes li:nth-child(4){margin-top:65px}
.accueil-collection .pochettes li:nth-child(5){margin-top:18px}
.accueil-collection .pochettes li:nth-child(6){margin-top:48px}
.pochettes img{outline:1px solid rgba(32,22,37,.08);outline-offset:-1px}
.pochettes img{transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.pochettes a:hover img,.pochettes li:focus-within img{transform:scale(1.04)}
.accueil-collection .pochettes li:nth-child(n+7){display:none}

/* ------------------------------------------------------------------ Musique */
.ecran{padding-top:0}
.ecran.musique{display:grid;grid-template-columns:clamp(150px,17vw,290px) minmax(0,1fr);grid-template-rows:none;column-gap:clamp(30px,2.8vw,60px);row-gap:0;align-items:start;padding-top:clamp(28px,2.8vw,40px);padding-bottom:64px}
.ecran.musique>*{grid-column:2}
.ecran.musique>.titre-page,.ecran.musique>.mv1-tp>.titre-page{grid-column:1/-1;grid-row:1;font-size:clamp(104px,8.8vw,170px);line-height:.95!important;margin:0}
.ecran.musique>.champ{grid-column:2;grid-row:1;justify-self:end;align-self:end;width:min(100%,clamp(300px,23.6vw,420px));margin:0 0 8px;padding:6px 0;border-bottom:1px solid var(--encre)}
.ecran.musique>.champ:focus-within{border-bottom-width:2px}
.champ svg{width:18px;height:18px}
.champ input{height:40px;font-size:16px}
.ecran.musique>.compte{grid-column:1/-1;grid-row:2;margin:26px 0 clamp(30px,3vw,46px);font-size:var(--s2);color:var(--encre-2)}
.ecran.musique>.o-colonne{display:block;grid-column:1;grid-row:3/span 12;position:sticky;top:24px;padding-top:25px}
.o-colonne>#rythmes{display:flex;flex-direction:column;align-items:flex-start;flex-wrap:nowrap;gap:9px;margin:0;padding:0}
.ecran.musique .o-colonne .etiq{margin:0 0 4px;font-size:var(--s);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--encre-2)}
.ecran.musique .o-colonne button{width:100%;min-height:0;gap:0;font:900 clamp(22px,1.8vw,30px)/1.3 var(--titre);color:var(--encre);justify-content:flex-start}
.ecran.musique .o-colonne button::before{content:"";width:0;height:auto;margin:0;background:none;border-radius:0;font:400 20px/1 var(--texte);transition:none}
.ecran.musique .o-colonne button[aria-pressed=true]{color:var(--encre);text-decoration:underline;text-decoration-color:#ba7e16;text-decoration-thickness:3px;text-underline-offset:4px}
.ecran.musique .o-colonne button[aria-pressed=true]::before{content:"↳";width:auto;margin:0 15px 0 0;background:none}
.ecran.musique>#vues{grid-column:2;grid-row:3;margin:0;gap:0 30px;align-items:stretch;border-bottom:1px solid var(--encre);min-height:67px}
.ecran.musique>#vues .etiq{display:none}
.ecran.musique>#vues button{position:relative;min-height:67px;font-size:15px;font-weight:400;color:var(--encre-2)}
.ecran.musique>#vues button::before{display:none}
.ecran.musique>#vues button[aria-pressed=true]{color:var(--encre)}
.ecran.musique>#vues button[aria-pressed=true]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--encre)}
.ecran.musique>.mix-mention{grid-row:4;margin:16px 0 0;font-size:var(--s2)}
.ecran.musique>.actions-liste{grid-row:5}
.ecran.musique>#pasCoeur{grid-row:6}
.ecran.musique>.liste{grid-row:7}
.ecran.musique>#plus{grid-row:8}
.ecran.musique>#vide{grid-row:9}
.ecran.musique>#resultat{grid-column:1;grid-row:1}
.liste{display:block;margin:0}
.liste>li{display:grid;grid-template-columns:58px minmax(160px,2.15fr) minmax(90px,1.1fr) 95px 56px 36px 98px;column-gap:18px;align-items:center;min-height:83px;padding:12px 0;border-top:0;border-bottom:1px solid var(--filet);position:relative}
.liste>li:hover{background:rgba(32,22,37,.015)}
.liste>li>div,.liste .acts{display:contents}
.liste .couv,.liste .couv img{width:58px;height:58px}
.liste>li>.couv{grid-column:1;grid-row:1}
.liste .nom{grid-column:2;grid-row:1;font-size:clamp(25px,1.8vw,30px);line-height:1.15;letter-spacing:-.01em}
.liste>li:hover .nom,.liste>li.joue .nom{color:var(--or)}
.liste .meta,.liste .enecoute,.liste>li.joue .enecoute{display:none}
.liste .o-seul{display:block}
.liste .o-sortie,.liste .o-rythme,.liste .o-duree{font-size:var(--s);color:var(--encre-2)}
.liste .o-sortie a{color:inherit;text-decoration:none}
.liste .o-sortie a:hover{color:var(--or-texte)}
.liste .o-sortie{grid-column:3}
.liste .o-rythme{grid-column:4}
.liste .o-duree{grid-column:5;font-variant-numeric:tabular-nums}
.liste .acts .coeur{grid-column:6;margin:0;width:36px;justify-self:center}
.liste .acts .coeur svg{width:22px;height:22px}
.liste .o-ajout{grid-column:7;justify-self:end;display:inline-flex;align-items:center;gap:10px;padding:14px 0;font-size:var(--s);white-space:nowrap}
.liste .o-ajout span{font-size:19px}
.liste .o-ajout:hover{color:var(--or-texte)}
.liste .o-sortie,.liste .o-rythme,.liste .o-duree,.liste .o-ajout,.liste .acts .coeur{grid-row:1}
.liste .couv .sign{right:4px;bottom:4px;width:22px;height:22px;font-size:10px}
.liste .couv .sign .p2{font-size:9px}
.liste>li[data-id]{grid-template-rows:auto auto;row-gap:3px}
.liste>li[data-id] .nom{align-self:end}
.liste>li[data-id]>.couv,.liste>li[data-id] .o-sortie,.liste>li[data-id] .o-rythme,.liste>li[data-id] .o-duree,.liste>li[data-id] .o-ajout,.liste>li[data-id] .acts .coeur{grid-row:1/span 2}
.liste>li[data-id] .acts .lien{position:static;grid-column:2;grid-row:2;align-self:start;justify-self:start;min-height:0;font-size:13px;line-height:1.2;padding:2px 0}
.liste>li[data-sortie]{grid-template-columns:58px minmax(160px,2.15fr) minmax(0,2fr) auto}
.liste>li[data-sortie] .meta{display:block;grid-column:3;grid-row:1;margin:0;font-size:var(--s);color:var(--encre-2)}
.liste>li[data-sortie] .acts .lien{display:inline-flex;grid-column:4;grid-row:1;font-size:var(--s2)}
.plus{margin-top:30px;font-size:15px;min-height:0;padding:0 0 6px;border-bottom:1px solid var(--encre);text-decoration:none;justify-self:start}
.actions-liste{margin-top:18px}
.actions-liste .fleche{font-size:clamp(22px,1.7vw,30px)}
.sans-resultat .titre-page{font-size:clamp(60px,5vw,96px)}
@media (max-width:1200px){
  .ecran.musique{grid-template-columns:150px minmax(0,1fr);column-gap:30px}
  .liste>li{grid-template-columns:58px 2fr 1fr 70px 40px 28px 85px;column-gap:10px}
  .liste>li[data-sortie]{grid-template-columns:58px 2fr 1.6fr auto}
}

/* ------------------------------------------------------------------ Fiche de sortie : trois colonnes */
.ecran.sortie{padding-top:0;padding-bottom:0}
.ecran.sortie>.lien.retour{display:inline-flex;margin:26px 0 20px;font-size:var(--s);color:var(--encre-2);text-decoration:none;padding:0}
.ecran.sortie>.lien.retour:hover{color:var(--or-texte)}
.fiche-tete{display:grid;grid-template-columns:minmax(300px,1.1fr) minmax(180px,.62fr) minmax(440px,1.5fr);grid-template-rows:auto auto auto 1fr;column-gap:38px;align-items:start;margin-top:0}
.fiche-tete::before{content:"";grid-column:1/-1;grid-row:2;height:33px;border-top:1px solid var(--filet);margin-top:0}
.fiche-infos{display:contents}
.fiche-infos>h1.titre-page,.fiche-infos>h1.titre-page.long{grid-column:1/3;grid-row:1;font-size:clamp(130px,11.6vw,220px);line-height:.9!important;text-transform:uppercase;margin:0;letter-spacing:-.03em;padding-bottom:30px}
.fiche-infos>h1.titre-page.long{font-size:clamp(84px,7.4vw,140px)}
.fiche-infos>.sur{grid-column:3;grid-row:1;align-self:end;justify-self:end;text-align:right;margin:0 0 38px;font-size:14px;line-height:1.8;color:var(--encre)}
.fiche-poch{grid-column:1;grid-row:3/span 3;position:static}
.fiche-poch .grande{width:100%;max-width:none;margin:0;outline:1px solid rgba(32,22,37,.07);outline-offset:-1px}
.fiche-infos>.chapo{grid-column:2;grid-row:3;margin:3px 0 26px;font-size:var(--s2);color:var(--encre-2);max-width:none}
.fiche-infos>.actions{grid-column:2;grid-row:4;margin:0;align-items:flex-start;gap:15px}
.fiche-infos>.actions .fleche{flex-direction:column;align-items:stretch;gap:0;font-size:25px;width:100%}
.fiche-infos>.actions .fleche>svg{display:none}
.o-b{display:flex;flex-direction:column-reverse;align-items:stretch}
.o-sep{display:none}
.o-px{font:900 clamp(44px,4.4vw,84px)/1 var(--titre);margin:16px 0 14px;letter-spacing:-.02em}
.o-l{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid var(--encre);padding-bottom:10px;white-space:nowrap}
.o-l::after{content:"+";font:400 28px/1 var(--texte)}
.fleche:hover .o-l{border-color:var(--or)}
.fiche-infos>.actions .lien{font-size:var(--s);padding:0;min-height:0}
.fiche-infos>.bloc{grid-column:3;grid-row:3/span 2;display:grid;grid-template-columns:49px minmax(0,1fr);column-gap:15px;align-items:center;margin:0;padding:0;border-top:0}
.fiche-infos>.bloc>.o-rond{display:inline-flex;grid-column:1;grid-row:1;width:49px;height:49px;font-size:15px}
.fiche-infos>.bloc>h2{grid-column:2;grid-row:1;font-size:30px;line-height:1.1}
.fiche-infos>.bloc>h2 small{margin-top:5px;font-size:var(--s);color:var(--encre-2)}
.fiche-infos>.bloc>.pistes{grid-column:1/-1;grid-row:2;margin:23px 0 0}
.pistes{counter-reset:p}
.pistes li{counter-increment:p;align-content:center;display:grid;grid-template-columns:27px minmax(120px,1fr) 42px 28px 70px;column-gap:15px;row-gap:0;min-height:64px;padding:0;border-top:1px solid var(--filet)}
.pistes li:first-child{border-top:1px solid var(--filet)}
.pistes .pi{display:contents}
.pistes .m{display:none}
.pistes .jouer{grid-column:1;grid-row:1/span 2;width:27px;height:auto;align-self:stretch;font-size:0;color:var(--encre-2)}
.pistes .jouer::before{content:counter(p,decimal-leading-zero);font-size:var(--s);color:var(--encre-2)}
.pistes li:hover .jouer::before,.pistes .jouer[aria-pressed=true]::before{content:"▶︎";color:var(--encre)}
.pistes .jouer[aria-pressed=true]{text-decoration:none}
.pistes .t{grid-column:2;grid-row:1;align-self:end;font-size:clamp(23px,1.75vw,30px);line-height:1.1;letter-spacing:0}
.pistes li:has(.jouer[aria-pressed=true]) .t{color:var(--encre);text-decoration:underline;text-decoration-color:#ba7e16;text-decoration-thickness:3px;text-underline-offset:4px}
.pistes .o-seul.m-r{display:block;grid-column:2;grid-row:2;align-self:start;margin-top:3px;font-size:var(--s);color:var(--encre-2)}
.pistes .o-seul.m-d{display:block;grid-column:3;grid-row:1/span 2;align-self:center;font-size:var(--s);color:var(--encre-2);font-variant-numeric:tabular-nums}
.pistes .aj-t{display:none}
.pistes .coeur{grid-column:4;grid-row:1/span 2;align-self:center;width:28px;margin:0}
.pistes .coeur svg{width:21px;height:21px}
.pistes .aj{grid-column:5;grid-row:1/span 2;align-self:center;justify-self:end;min-height:0;font-size:var(--s);font-weight:400}
.pistes .aj .aj-o{display:inline}
.pistes .aj:hover{text-decoration:none;color:var(--or-texte)}
.fiche-infos>.etat{grid-column:3;grid-row:3;margin:0;align-self:start;font-size:var(--s2);color:var(--encre-2)}
.fiche-infos>.etat .coeur{margin-left:8px}
/* Fiche produit : définition à plat sous le titre (single) ou sous la liste des pistes (EP, album) ; colonnes voix et tempo par titre */
.fiche-infos>.fiche-d{grid-column:3;grid-row:4;margin:0;align-self:start}
.fiche-infos>.bloc .fiche-d{grid-column:1/-1;grid-row:3;margin:34px 0 0}
.fiche-d-l>div{grid-template-columns:minmax(120px,32%) 1fr;padding:11px 0}
.fiche-d-l dt{font-size:var(--s)}
.fiche-d-l dd{font-size:var(--s2)}
/* 900 à 1359 px : la colonne est étroite, rythme · tempo · voix tiennent sur la 2e ligne du titre (m-x) ; à partir de 1360 px, voix et tempo ont leur colonne */
.pistes.fiche-pistes .o-seul.m-b,.pistes.fiche-pistes .o-seul.m-v,.pistes.fiche-pistes .o-seul.m-r{display:none}
.pistes.fiche-pistes .o-seul.m-x{display:block;grid-column:2;grid-row:2;align-self:start;margin-top:3px;padding-bottom:6px;font-size:var(--s);line-height:1.35;color:var(--encre-2)}
@media (min-width:1360px){
  .pistes.fiche-pistes .o-seul.m-x{display:none}
  .pistes.fiche-pistes .o-seul.m-r{display:block}
  .pistes.fiche-pistes li{grid-template-columns:44px minmax(120px,1fr) 62px 68px 46px 28px 80px}
  .pistes.fiche-pistes .o-seul.m-v,.pistes.fiche-pistes .o-seul.m-b{display:block;grid-row:1/span 2;align-self:center;font-size:var(--s);color:var(--encre-2);font-variant-numeric:tabular-nums;white-space:nowrap}
  .pistes.fiche-pistes .o-seul.m-v{grid-column:3}
  .pistes.fiche-pistes .o-seul.m-b{grid-column:4}
  .pistes.fiche-pistes .o-seul.m-d{grid-column:5}
  .pistes.fiche-pistes .coeur{grid-column:6}
  .pistes.fiche-pistes .aj{grid-column:7}
}

/* Suite de la fiche : « tout le catalogue » en ligne, puis « à écouter aussi » en trois blocs */
#fiche>.bloc{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:50px;align-items:center;margin-top:0;padding:clamp(28px,2.6vw,40px) 0;border-top:1px solid var(--filet)}
#fiche>.bloc>*{grid-column:1;min-width:0}
#fiche>.bloc>h2{grid-column:1;grid-row:1;font-size:clamp(34px,3vw,56px);line-height:1.05}
#fiche>.bloc>.chapo{grid-row:2;margin:7px 0 0;font-size:var(--s2);color:var(--encre-2)}
#fiche>.bloc>.actions{grid-column:2;grid-row:1/span 2;margin:0}
#fiche>.bloc>.actions .fleche{font-size:clamp(26px,2.2vw,40px)}
#fiche>.fiche-tete+.bloc{margin-top:clamp(36px,4vw,62px)}
#fiche>.bloc:has([data-aussi]){display:block;padding:clamp(34px,3vw,45px) 0 clamp(36px,3.4vw,52px)}
#fiche>.bloc:has([data-aussi])>h2{font-size:clamp(40px,3.4vw,64px)}
#fiche>.bloc>[data-aussi]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:50px;margin-top:clamp(24px,2.4vw,36px)}
[data-aussi] li,[data-aussi] li:nth-child(n){flex:none;margin:0}
[data-aussi] a{display:grid;grid-template-columns:clamp(100px,9vw,170px) minmax(0,1fr);grid-template-rows:auto auto;column-gap:25px;align-items:center;align-content:center}
[data-aussi] img{grid-row:1/span 2}
[data-aussi] .n{grid-column:2;grid-row:1;align-self:end;margin:0;max-width:none;font:900 clamp(24px,2vw,34px)/1.1 var(--titre);letter-spacing:-.01em}
[data-aussi] .pr{grid-column:2;grid-row:2;align-self:start;margin-top:9px;max-width:none;font-size:var(--s)}
[data-aussi] a:hover .n{color:var(--or)}
[data-aussi] a:hover img,[data-aussi] li:focus-within img{transform:none}

/* ------------------------------------------------------------------ La Collection */
.ecran.collection{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:none;column-gap:70px;row-gap:0;align-items:start;padding-top:clamp(28px,2.9vw,42px);padding-bottom:clamp(40px,4.5vw,65px)}
.ecran.collection>*{grid-column:1;min-width:0}
.ecran.collection>.titre-page{grid-column:1/-1;grid-row:1;font-size:clamp(120px,10.5vw,198px);line-height:.95!important;text-transform:uppercase;letter-spacing:-.03em;white-space:nowrap;margin:0}
.ecran.collection>.titre-page br{display:none}
.ecran.collection>.compte{grid-column:1/-1;grid-row:2;margin:21px 0 clamp(36px,3.6vw,56px);font-size:18px}
.ecran.collection>.prix-l-m{display:none}
.ecran.collection>.prix-o{display:block;grid-row:3;margin:0;font:900 clamp(34px,3.55vw,74px)/1.07 var(--titre);color:var(--encre);max-width:12em}
.ecran.collection>.px-o{display:block;grid-row:4;margin:clamp(22px,2.4vw,40px) 0 0;font:900 clamp(90px,8.9vw,150px)/.9 var(--titre);letter-spacing:-.04em;color:var(--encre)}
.ecran.collection>.pochettes{grid-column:2;grid-row:3/span 9;margin:0;display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.ecran.collection>.pochettes li{flex:none;margin:0;min-width:0}
.ecran.collection>.pochettes li:nth-child(1){grid-column:1/6}
.ecran.collection>.pochettes li:nth-child(2){grid-column:6/10;margin-top:48px}
.ecran.collection>.pochettes li:nth-child(3){grid-column:1/5;grid-row:2}
.ecran.collection>.pochettes li:nth-child(4){grid-column:5/10;grid-row:2;margin-top:70px}
.ecran.collection>.pochettes li:nth-child(5){grid-column:10/13;grid-row:2;margin-top:24px}
.ecran.collection>.pochettes li:nth-child(n+6){display:none}
.ecran.collection>.chapo{grid-row:5;margin:20px 0 0;font-size:var(--s2);color:var(--encre-2);max-width:33ch}
.ecran.collection>.or-l{grid-row:6;margin:18px 0 0;font-size:clamp(20px,1.7vw,28px);line-height:1.1;max-width:24em}
.ecran.collection>.discret{grid-row:7;margin:8px 0 0;font-size:var(--s)}
.ecran.collection>.prix-l[data-pour-toi]{grid-row:8;font-size:clamp(26px,2.2vw,40px);margin-top:16px}
.ecran.collection>.actions{grid-row:9;margin-top:28px;width:min(400px,100%);align-items:stretch;gap:12px}
.ecran.collection>.actions .fleche{display:flex;justify-content:space-between;width:100%;border-bottom:1px solid var(--encre);padding-bottom:12px;font-size:clamp(28px,2.2vw,42px);min-height:0}
.ecran.collection>.actions .fleche svg{display:none}
.ecran.collection>.actions .fleche::after{content:"+";font:400 28px/1 var(--texte)}
.ecran.collection>.actions .fleche:hover{border-color:var(--or)}
.ecran.collection>.actions .lien{font-size:var(--s);color:var(--encre-2);align-self:flex-start}
.ecran.collection>.usb-detail{display:block;grid-row:10;margin-top:28px;width:min(400px,100%);font-size:var(--s);color:var(--encre-2)}
.usb-detail summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--filet);padding-top:15px}
.usb-detail summary::-webkit-details-marker{display:none}
.usb-detail summary::after{content:"▾";font-size:14px}
.usb-detail[open] summary::after{transform:rotate(180deg)}
.usb-detail p{margin:12px 0 0;font-size:var(--s);max-width:none}

/* ------------------------------------------------------------------ Autres pages : titres plus sobres, même grille */
@media (min-width:900px){
  :root{--t-h1:clamp(88px,8.4vw,128px)}
}

/* ------------------------------------------------------------------ Ma musique : même en-tête et même bandeau clair (sa feuille est chargée après celle-ci) */
.entete.mm-entete nav{gap:38px}
.mm-entete .mm-menu-btn{height:100%;padding-inline:0;margin-right:0;gap:10px}
.mm-menu-txt{font-size:inherit;font-weight:400}
.mm-menu{top:clamp(80px,5.4vw,104px);right:var(--g)}
.mm-lecteur .mm-mini-plus svg.trait{stroke:var(--encre)}
.mm-lecteur .mm-mini-plus .mm-coeur,.mm-lecteur .fav-toggle.on .mm-coeur{color:var(--encre)}
.mm-lecteur .mm-mini-poch{flex:0 0 58px;width:58px;height:58px}
.mm-lecteur .bandeau{gap:0 45px}

/* ------------------------------------------------------------------ Lot 1 : finitions (pages simples, pied, compteur, tiroir) */
/* A + D : pages sans maquette (erreurs, merci, avis, 404, téléchargement, newsletter) : même écart sous le filet que Musique et La Collection, un seul corps de titre */
.ecran:is(.introuvable,.merci,.newsletter,.annule,.erreur,.telechargement){padding-top:clamp(28px,2.9vw,42px)}
#contenu.ecran:is(.introuvable,.merci,.newsletter,.annule,.erreur,.telechargement)>h1{grid-column:1/-1;grid-row:1;font-size:var(--t-h1);line-height:.92;margin-bottom:var(--r4)}
#contenu.ecran:is(.introuvable,.merci,.newsletter,.annule,.erreur,.telechargement)>h1+*{grid-row:2}
/* B : le pied touche le bas de la fenêtre quand la page est courte */
.page{display:flex;flex-direction:column;min-height:100vh}
.page>main{flex:1 0 auto}
.page>.pied{flex:0 0 auto}
/* E : « Panier » garde son compteur 0 souligné, même vide */
.entete nav .sac .pastille[hidden]{display:inline-block!important}
/* F : « Laid-back » ne se coupe plus */
.envie .mot-env{white-space:nowrap}
/* C : Ma musique, « Mon compte » prend la place du lien « Ma musique » (même alignement que les autres pages) */
.entete.mm-entete nav .nav-ordi[aria-current=page]{display:none!important}
.entete.mm-entete nav .mm-menu-btn{order:1;display:inline-flex;align-items:center;width:auto;height:100%;margin:0;padding:0;gap:0;position:relative;font-size:inherit}
.entete.mm-entete nav .sac{order:2}
.entete.mm-entete nav .mm-menu-btn svg{display:none}
.entete.mm-entete nav .mm-menu-btn .mm-menu-txt{display:inline;font-size:inherit;font-weight:400}
.entete.mm-entete nav .mm-menu-btn:hover{color:var(--or-texte)}
.entete.mm-entete nav .mm-menu-btn::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--encre)}
/* G : tiroir panier, sans logo en tête (titre et croix sur la même ligne), bouton qui suit le contenu */
.panier .haut{min-height:0;height:0;padding:0;border-bottom:0;overflow:visible;align-items:flex-start;justify-content:flex-end}
.panier .haut .disque{display:none}
.panier .haut .fermer{margin-top:30px;position:relative;z-index:7;background:var(--creme)}
.panier .titre{margin-top:30px;padding-bottom:16px;border-bottom:1px solid var(--filet)}
.panier .corps{flex:0 1 auto}

/* ------------------------------------------------------------------ Lot 2 : accueil et La Collection d'après la maquette de Sol */
/* Accueil, héros : « Explorer la musique » à la place des deux liens « Écouter… » ; mention verticale + petite pochette à droite */
.heros .demo{display:none}
.heros .o-explorer{display:inline-flex;grid-column:1;grid-row:4;align-self:start;justify-self:start;align-items:center;justify-content:space-between;gap:66px;width:max-content;padding-block:10px;border-bottom:1px solid currentColor;font:500 17px/1.3 var(--texte);text-decoration:none}
.heros .o-explorer::after{content:"→";font-size:24px;font-weight:400}
.o-vedette .o-cote{grid-column:2;grid-row:1/span 2;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;gap:20px;min-width:0}
.o-vertical{writing-mode:vertical-rl;letter-spacing:.13em;font-size:var(--s);text-transform:uppercase;padding-top:2px;white-space:nowrap}
.o-vertical:empty{display:none}
.o-mini{display:block;color:inherit;text-decoration:none}
.o-mini img{width:88px;height:auto;aspect-ratio:1;object-fit:cover;outline:1px solid rgba(32,22,37,.08);outline-offset:-1px}
.o-mini-t{display:block;margin-top:9px;font-size:var(--s);line-height:1.25;white-space:nowrap}
.o-mini-t b{font-weight:400}
.o-mini:hover{color:var(--or-texte)}
/* Les quatre rythmes : « 20 titres » (nombre réel, posé par accueil.js dans data-nb) et une flèche à la place du ▸ */
.envie .et{align-self:stretch;gap:10px}
.envie .et svg{display:none}
.envie .et[data-nb]::before{content:attr(data-nb);font-size:var(--s);font-weight:400;color:var(--encre-2)}
.envie .et[data-nb]::after{content:"→";margin-left:auto;font-size:20px;font-weight:400;color:var(--encre)}
.envie.actif .et[data-nb]::before{content:none}
/* Étagère « La suite s'écoute » */
.o-lien{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;padding-block:10px;border-bottom:1px solid currentColor;font-weight:500;text-decoration:none;white-space:nowrap}
.o-lien span{font:400 24px/1 var(--texte)}
.o-suite-tete{display:flex;align-items:baseline;justify-content:space-between;gap:28px;margin-bottom:32px}
.o-suite-tete h2,.o-parcours h2{margin:0}
.o-suite{display:block;padding:55px 0 72px}
.o-suite h2{font:900 clamp(48px,4.5vw,82px)/.99 var(--titre);letter-spacing:-.025em}
.o-suite-liste{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:35px;align-items:start}
.o-suite-liste article,.o-suite-liste li{min-width:0}
.o-suite-liste article:nth-child(2),.o-suite-liste li:nth-child(2){padding-top:34px}
.o-suite-liste article:nth-child(4),.o-suite-liste li:nth-child(4){padding-top:65px}
.o-sp-poch{display:block;overflow:hidden}
.o-sp-poch img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;outline:1px solid rgba(32,22,37,.07);outline-offset:-1px;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.o-sp-poch:hover img{transform:scale(1.04)}
.o-sp-cap{padding-top:17px}
.o-sp-cap h3{margin:0;font:900 28px/1.15 var(--titre);letter-spacing:-.025em}
.o-sp-cap a{text-decoration:none}
.o-sp-cap a:hover{color:var(--or)}
.o-sp-meta{margin:5px 0 0;font-size:var(--s);color:var(--encre-2)}
.o-sp-act{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:14px;font-size:var(--s2)}
.o-sp-act button{min-height:0;min-width:0;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;text-align:left}
.o-sp-act button:hover,.o-sp-ecoute[aria-pressed=true]{color:var(--encre);text-decoration:underline;text-decoration-color:#ba7e16;text-decoration-thickness:3px;text-underline-offset:4px}
@media(min-width:1201px){.o-suite-liste{grid-template-columns:calc(27.5% - 35px) calc(27.5% - 35px) minmax(0,1fr) minmax(0,1fr)}}
/* Bloc Collection de l'accueil : bandeau compact (titre, 69 €, 2 pochettes) */
main#contenu>.bloc.accueil-collection{grid-template-columns:calc(55% - 50px) minmax(0,.75fr) minmax(0,1fr);grid-template-rows:auto;align-items:center;padding:clamp(48px,4.4vw,64px) 0;border-top:1px solid var(--filet)}
main#contenu>.bloc.accueil-collection>h2#titreCollection,
main#contenu>.bloc.accueil-collection>.prix-o,
main#contenu>.bloc.accueil-collection>.px-o,
main#contenu>.bloc.accueil-collection>.compte,
main#contenu>.bloc.accueil-collection>.actions{display:none}
main#contenu>.bloc.accueil-collection>.o-teaser-g{display:block;grid-column:1;grid-row:1}
main#contenu>.bloc.accueil-collection>.o-teaser-d{display:block;grid-column:2;grid-row:1}
.o-teaser-t{margin:0 0 20px;font:900 clamp(60px,5.4vw,100px)/.99 var(--titre);letter-spacing:-.025em}
.o-teaser-p{margin:0;font-size:inherit;line-height:1.5}
.o-teaser-px{display:block;margin-bottom:16px;font:900 104px/1 var(--titre)}
.o-teaser-lien{display:inline-flex;align-items:center;gap:25px;font:900 30px/1.2 var(--titre);text-decoration:none}
.o-teaser-lien span{font:400 28px/1 var(--texte)}
.o-teaser-usb{margin:16px 0 0;font-size:var(--s2);color:var(--encre-2)}
main#contenu>.bloc.accueil-collection>.pochettes{display:flex;grid-column:3;grid-row:1;align-items:center;gap:18px;margin:0}
main#contenu>.bloc.accueil-collection>.pochettes>li{display:none;flex:none;margin:0}
main#contenu>.bloc.accueil-collection>.pochettes>li:nth-child(7){display:block;width:57%}
main#contenu>.bloc.accueil-collection>.pochettes>li:nth-child(8){display:block;width:calc(43% - 18px);margin-top:70px}
main#contenu>.bloc.accueil-collection>.pochettes img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
/* Bloc label */
.o-label{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:center;padding:72px 0;border-top:1px solid var(--filet)}
@media(min-width:1201px){.o-label{grid-template-columns:calc(55% - 80px) minmax(0,1fr)}}
.o-label h2{margin:0;font:900 clamp(80px,7.7vw,144px)/.92 var(--titre);letter-spacing:-.025em}
.o-signature{display:flex;align-items:center;gap:25px}
.o-signature .disque{width:100px;height:100px}
.o-sig-nom{font:900 35px/1.05 var(--titre);letter-spacing:-.025em}
.o-label p{max-width:36ch;margin:22px 0;font-size:19px}
@media(min-width:1700px){
  .heros{padding-top:24px;padding-bottom:16px}
  .heros>.o-vedette{max-width:680px;grid-template-columns:minmax(0,1fr) 160px;column-gap:35px}
  .o-mini img{width:110px}
  .o-suite{padding:40px 0 80px}
  main#contenu>.bloc.accueil-collection{padding-block:80px}
  .o-label{padding-block:80px}
}
/* La Collection : titre avec point, colonne d'achat, composition de pochettes, « À garder. », « Dans La Collection. » */
.ecran.collection>.titre-page::after{content:"."}
.ecran.collection>.prix-o .o-sous{display:block;margin-top:18px;font:400 clamp(15px,1.04vw,20px)/1.5 var(--texte);letter-spacing:0;color:var(--encre);max-width:33ch}
.ecran.collection>.pochettes{display:none}
.ecran.collection>.o-compo{display:grid;grid-column:2;grid-row:3/span 9;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start;margin:0}
.o-compo a{display:block;transition:transform .3s}
.o-compo a:hover{transform:translateY(-6px)}
.o-compo img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;outline:1px solid rgba(32,22,37,.07);outline-offset:-1px}
.o-compo a:nth-child(1){grid-column:1/6}
.o-compo a:nth-child(2){grid-column:6/10;margin-top:48px}
.o-compo a:nth-child(3){grid-column:1/5;grid-row:2}
.o-compo a:nth-child(4){grid-column:5/10;grid-row:2;margin-top:70px}
.o-compo a:nth-child(5){grid-column:10/13;grid-row:2;margin-top:24px}
.o-compo-cap{grid-column:10/13;grid-row:1;align-self:end;max-width:22ch;margin:0 0 2px;font-size:var(--s);color:var(--encre-2)}
.ecran.collection>.o-garder{display:grid;grid-column:1/-1;grid-row:12;grid-template-columns:1.1fr repeat(3,1fr);gap:55px;margin-top:clamp(40px,4.5vw,65px);padding:40px 0;border-top:1px solid var(--filet)}
.o-garder h2{margin:0;font:900 43px/.99 var(--titre);letter-spacing:-.025em}
.o-garder h3{margin:0 0 12px;font:900 27px/.99 var(--titre);letter-spacing:-.025em}
.o-garder p{margin:0;max-width:27ch;font-size:var(--s2);color:var(--encre-2)}
.ecran.collection>.o-parcours{display:block;grid-column:1/-1;grid-row:13;padding:45px 0 0;border-top:1px solid var(--filet)}
.o-parcours .o-suite-tete{margin-bottom:25px}
.o-parcours h2{font:900 47px/.99 var(--titre);letter-spacing:-.025em}
.o-parcours-liste{display:grid;grid-template-columns:repeat(4,1fr);gap:35px}
.o-parcours-liste a{display:flex;gap:18px;align-items:center;text-decoration:none}
.o-parcours-liste img{width:85px;height:auto;aspect-ratio:1;object-fit:cover;flex:none;outline:1px solid rgba(32,22,37,.07);outline-offset:-1px}
.o-parcours-liste h3{margin:0;font:900 24px/1.15 var(--titre);letter-spacing:-.025em}
.o-parcours-liste p{margin:6px 0 0;font-size:var(--s);color:var(--encre-2)}
.o-parcours-liste a:hover h3{color:var(--or)}
@media(min-width:1700px){.ecran.collection>.o-parcours{padding-top:45px}}

/* ------------------------------------------------------------------ Lot 3 : Musique, fiche de sortie, Collection d'après la maquette de Sol */
/* Musique : titre avec point, recherche alignée sur le sous-titre */
.ecran.musique>.titre-page::after,.ecran.musique>.mv1-tp>.titre-page::after{content:"."}
@media (min-width: 900px) { html body main#contenu.ecran.musique h1.aff.titre-page { font-size: clamp(104px,8.8vw,170px); line-height: .95; } }   /* Musique au bureau : taille d'avant, la charte B (96 px) ne s'y applique pas */
.ecran.musique>.champ{grid-row:2;align-self:end;margin:4px 0 calc(clamp(30px,3vw,46px) - 10px)}
.ecran.musique>.compte{align-self:end;margin-top:0}
/* Colonne de filtres : compteurs, Format, encart « Tout le catalogue » */
.ecran.musique .o-colonne button[data-nb]{display:flex;align-items:baseline}
.ecran.musique .o-colonne button[data-nb]::after{content:attr(data-nb);margin-left:auto;padding-left:12px;font:400 var(--s)/1 var(--texte);color:var(--encre-2)}
.o-colonne>.o-cote{display:flex;flex-direction:column;align-items:stretch;gap:9px;width:100%;margin-top:30px}
.o-cote .o-formats{display:flex;flex-direction:column;align-items:flex-start;gap:9px;width:100%}
.o-encart{margin-top:36px;padding-top:23px;border-top:1px solid var(--filet)}
.o-encart-t{margin:0;font:900 clamp(30px,2.4vw,35px)/.99 var(--titre);letter-spacing:-.025em}
.o-encart-p{margin:10px 0 16px;font-size:var(--s);color:var(--encre-2)}
.o-encart .o-lien{font-size:var(--s2);gap:20px}
/* Barre d'onglets : tri à droite */
.ecran.musique>#vues .o-tri{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:var(--s);color:var(--encre-2)}
.o-tri select{max-width:150px;border:0;background:none;font:inherit;color:var(--encre);cursor:pointer}
/* Ligne d'en-têtes de colonnes, mêmes colonnes que la liste */
.ecran.musique>.o-tete{display:grid;grid-row:7;grid-template-columns:58px minmax(160px,2.15fr) minmax(90px,1.1fr) 95px 56px 36px 98px;column-gap:18px;padding:15px 0 9px;font-size:var(--s);color:var(--encre-2)}
.ecran.musique>.o-tete[hidden]{display:none}
.o-tete .c-t{grid-column:1/3}
.o-tete .c-s{grid-column:3}
.o-tete .c-r{grid-column:4}
.o-tete .c-d{grid-column:5}
.o-tete .c-c{grid-column:6;text-align:center}
.o-tete .c-a{grid-column:7;text-align:right}
.ecran.musique>.liste{grid-row:8}
.ecran.musique>#plus{grid-row:9}
.ecran.musique>#vide{grid-row:10}
.liste .o-sortie{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:1200px){
  .ecran.musique>.o-tete{grid-template-columns:58px 2fr 1fr 70px 40px 28px 85px;column-gap:10px}
}
/* Fiche de sortie : « L'EP entier. À toi. », lien d'ajout court, meta sur deux lignes */
.fiche-infos>.chapo{display:none}
.fiche-infos>.o-entier{display:block;grid-column:2;grid-row:3;margin:0 0 26px}
.o-entier h2{margin:0 0 18px;font:900 clamp(34px,3.05vw,56px)/1.07 var(--titre);letter-spacing:-.025em}
.o-entier p{margin:0;max-width:none;font-size:var(--s2);color:var(--encre-2)}
.fiche-infos>.actions .o-l{align-self:flex-start;justify-content:flex-start;gap:12px}
.meta-sortie .m-m{display:none}
.meta-sortie .o-seul.m-o{display:block}
/* « À écouter aussi » : format et prix réels, lien « Découvrir → » */
[data-aussi] .pr{display:none}
[data-aussi] img{grid-row:1/span 3}
[data-aussi] .o-vm{display:block;grid-column:2;grid-row:2;align-self:start;margin-top:9px;font-size:var(--s);color:var(--encre-2)}
[data-aussi] .o-vd{display:inline-flex;grid-column:2;grid-row:3;justify-self:start;align-items:center;gap:20px;margin-top:14px;padding:4px 0;border-bottom:1px solid currentColor;font-size:var(--s)}
[data-aussi] a:hover .o-vd{color:var(--or-texte)}
/* 1920 : la liste des pistes change d'échelle */
@media (min-width:1700px){
  .pistes li{min-height:78px}
  .pistes .t{font-size:30px}
  .pistes .o-seul.m-r,.pistes .o-seul.m-d,.pistes .o-seul.m-b,.pistes .o-seul.m-v,.pistes .aj{font-size:var(--s2)}
  .pistes.fiche-pistes li{grid-template-columns:49px minmax(160px,1fr) 84px 90px 52px 30px 90px}
}
/* La Collection : mention sous le bouton d'achat */
.ecran.collection>.o-note{display:block;grid-row:10;margin:14px 0 0;font-size:var(--s);color:var(--encre-2)}
.ecran.collection>.usb-detail{grid-row:11}
.usb-detail .usb-prix{color:var(--encre);margin-top:12px}.usb-detail .usb-prix strong{font-weight:600}
.usb-detail .usb-ajout{display:inline-flex;gap:10px;align-items:center;margin-top:12px;padding:0 0 6px;font-size:var(--s);color:var(--encre-2);border-bottom:1px solid var(--encre-2);min-height:0}
.usb-detail .usb-ajout:hover{color:var(--or-texte);border-color:var(--or)}
/* Lecteur : « 2 € + » à la place de « Ajouter · 2 € », précédent, temps écoulé / durée, fermeture */
.bandeau .ajout .ajt{display:none}
.bandeau .ajout svg{display:block;width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7}
.b-centre{flex-wrap:wrap;align-content:center;justify-content:center;row-gap:0}
.b-centre .o-temps{flex:0 0 100%;display:flex;align-items:center;justify-content:center;gap:14px;margin-top:-4px;font-size:var(--s);color:var(--encre-2);font-variant-numeric:tabular-nums}
.o-temps .o-bar{position:relative;flex:0 1 320px;min-width:120px;height:3px;background:rgba(32,22,37,.16)}
.o-temps .o-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ambre)}
#bFermer svg{fill:none;stroke:var(--encre);stroke-width:1.8;stroke-linecap:round}
#bFermer:hover svg{stroke:var(--or)}
.bandeau #bPrec svg{width:28px;height:28px}

/* ------------------------------------------------------------------ Lot 4 : écarts restants du regard 18:20 (ordinateur seulement) */
:root{--dx:calc(4.58vw - 4px)} /* colonne de droite : x = 786 à 1440, 1049 à 1920 (maquette de Sol) */
.m-seul{display:none}
/* 1 + 2 : La Collection, la note sur le −40 % passe sous le bouton d'achat, en corps courant fusionné avec la note grise ; « Ajouter » revient dans le premier écran */
.ecran.collection>.prix-l[data-pour-toi]{grid-row:6;margin-top:16px}
.ecran.collection>.actions{grid-row:7;margin-top:max(15px,calc(15px + (100vw - 1440px)*.0604))}
.ecran.collection>.or-l{grid-row:8;margin:22px 0 0;max-width:34em;font:400 var(--s)/1.45 var(--texte);letter-spacing:0;color:var(--encre-2);text-wrap:pretty}
.ecran.collection>.discret{grid-row:9;margin:0;max-width:34em;font-size:var(--s);line-height:1.45}
.ecran.collection>.o-note{grid-row:10;margin-top:12px}
.ecran.collection>.usb-detail{grid-row:11}
/* 4 : colonne de droite alignée sur Sol, partout */
main#contenu.ecran:is(.introuvable,.merci,.newsletter,.annule,.erreur,.telechargement)>*:not(h1){margin-left:var(--dx)}
.legal>section{margin-left:var(--dx)}
.pied .lettre>*:not(h2){margin-left:var(--dx)}
.pied .lettre input[type=email]{width:calc(100% - var(--dx));margin-left:var(--dx)}
/* 15 : pages simples sur le modèle de « Informations légales » : titre à gauche, texte à droite, même haut */
main#contenu.ecran:is(.introuvable,.merci,.newsletter,.annule,.erreur,.telechargement){padding-top:var(--r5)}
#contenu.ecran:is(.introuvable,.merci,.newsletter,.annule,.erreur,.telechargement)>h1{grid-column:1/6;grid-row:1/-1;font-size:clamp(56px,6.4vw,100px);line-height:.95;margin:0;overflow-wrap:anywhere}
#contenu.ecran:is(.introuvable,.merci,.newsletter,.annule,.erreur,.telechargement)>h1.long{font-size:clamp(48px,5vw,80px)}
#contenu.ecran:is(.introuvable,.merci,.newsletter,.annule,.erreur,.telechargement)>h1+*{grid-row:auto}
#contenu.ecran:is(.newsletter,.erreur,.telechargement)>.sur{margin-bottom:22px}
/* 18 : signature « FunkyBreslev Records » décollée du paragraphe (newsletter) */
#contenu.ecran.newsletter>.sur{margin-bottom:36px}
/* 6 : titres terminés par un point, comme « Merci. » et « À garder. » */
.pied .lettre h2::after,.o-mini-t .o-aussi::after{content:"."}
#contenu.ecran:is(.introuvable,.newsletter,.annule,.erreur,.telechargement)>h1::after{content:"."}
#contenu.ecran:is(.introuvable,.newsletter,.annule,.erreur,.telechargement)>h1::after{color:#ba7e16}   /* fond crème : même orange que le titre */
#contenu.ecran.merci>h1::after{content:none}
/* 5 : bloc e-mail, moins de vide au-dessus du filet */
.pied .lettre{padding-bottom:clamp(22px,2.4vw,34px);grid-template-rows:auto auto auto auto auto 0}
.pied .lettre .raison{min-height:0;margin:0}
/* 7 : Accueil, « Écouter selon l'envie » devient un libellé, « Touche » devient « Choisis » */
.accueil-envies>h2{font:500 var(--s)/1.3 var(--texte);letter-spacing:.1em;text-transform:uppercase}
.accueil-envies>.aide{display:none}
.accueil-envies>.o-aide{display:block;grid-column:1;grid-row:2;margin:6px 0 0;font-size:var(--s2);color:var(--encre-2)}
/* 8 : fiche de sortie, un seul bouton d'écoute (le gros) */
.ecran.sortie .actions>.lien[data-piste]{display:none}
/* 9 : Musique, compteur à gauche, « Afficher la suite ↓ » à droite */
.ecran.musique>#plus:not([hidden]){display:flex;justify-content:space-between;align-items:baseline;width:100%;padding:0 0 12px;border-bottom:1px solid var(--encre);font-size:15px}
#plus .o-seul{display:block}
#plus .p-n{order:-1;color:var(--encre-2)}
#plus .p-l::after{content:" ↓"}
/* 10-13 : tiroir du panier (Sol : pochette 70 px, nom 24 px sur « Titre · MP3 320 », prix, croix de 20 px ; filets dans les marges de 38 px) */
.lignes li{grid-template-columns:70px minmax(0,1fr) auto 20px;grid-template-areas:"p n x r" "p s x r";column-gap:17px;row-gap:5px}
.lignes li:not(.vide) .nom{grid-area:n;align-self:end;font-size:26px;line-height:1.1}
.lignes .o-poch{grid-area:p;display:block;width:70px;height:70px;overflow:hidden;background:var(--filet)}
.lignes .o-poch img{width:70px;height:70px;object-fit:cover}
.lignes .o-poch-col{background:var(--encre);display:grid;place-items:center}
.lignes .o-poch-col img{width:44px;height:44px;object-fit:contain}
.lignes .o-sub{display:block;grid-area:s;align-self:start;font-size:var(--s);color:var(--encre-2)}
.lignes li:not(.vide) .px{grid-area:x}
.lignes li.mention{grid-template-columns:70px minmax(0,1fr) 20px;grid-template-areas:"p n r" "p s r" "p x r"}
.lignes li.mention:not(.vide) .px{grid-area:x;text-align:left}
.lignes li .ret{grid-area:r;width:20px;height:44px}
.lignes li .ret svg{width:20px;height:20px}
.lignes li.vide{display:block}
.promo b{display:block;margin-bottom:8px}
.promo span{display:block;margin-top:6px}
.total{display:flex;justify-content:space-between;align-items:baseline}
.total span,.total b{display:inline-block}
.payer{width:calc(100% - 2*var(--g));margin:0 var(--g);padding-inline:0;justify-content:space-between;border-top:1px solid var(--filet)}
.payer::after{content:"→";font:400 30px/1 var(--texte)}
.panier>.raison{margin:0 var(--g);padding:10px 0 14px;border-top:0}
.lignes li:last-child{border-bottom:0}
.panier>.raison+.payer{border-top:1px solid var(--filet)}
/* 14 : lecteur, pastille de progression de 11 px, plus de trait parasite au-dessus du bandeau */
.bandeau .prog{display:none}
.o-temps .o-bar i::after{content:"";position:absolute;right:-5.5px;top:-4px;width:11px;height:11px;border-radius:50%;background:var(--ambre)}
/* 16 : maintenance, centrée verticalement entre l'en-tête et le pied */
main#contenu.ecran.centre{grid-template-rows:none;align-content:center}
main#contenu.ecran.centre>h1{grid-row:1/span 6}
/* 16 : Ma musique (écran de connexion), centré verticalement */
main#mmContenu{display:flex;flex-direction:column}
main#mmContenu>.mm-porte:not([hidden]){margin-block:auto}
.mm-porte>:is(.mm-porte-texte,.mm-porte-form,.mm-porte-msg,.mm-porte-actions,.mm-porte-aide){margin-left:var(--dx)}
/* 17 : « Informations légales », sous-titre décollé du titre ; date non fixée = ligne masquée (le texte source reste dans la page) */
.legal .intro{margin-top:24px}
.legal .maj:has(time[data-date-mise-en-ligne]:not([datetime])){display:none}
/* 19 : « €69 » sur une seule ligne */
.o-teaser-px,.px-o,.prix-o{white-space:nowrap}

.o-pj{display:none}
/* ===== Animations ordinateur (9) : ≥ 900 px, souris, sans réduction de mouvement. Transform et opacité seulement ; l'état final = l'affichage statique.
   Les pochettes (1) et le lecteur (8) reprennent les règles existantes (zoom plus haut dans ce fichier, lecteur base.css) ; rien n'est dupliqué. ===== */
@media (min-width:900px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  /* 1. Pochettes : bouton lecture carré qui monte au survol et au clavier */
  .pochettes a{position:relative}
  /* Vrai bouton ▶ (.o-pj, posé dans le li, hors du lien) : lance l'extrait dans le lecteur du bas (data-piste) ; la pochette ouvre la fiche */
  .pochettes li{position:relative}
  .o-pj{display:block;position:absolute;z-index:2;right:10px;top:10px;width:36px;height:36px;padding:0;border:0;background:var(--creme);color:var(--encre);font-size:12px;line-height:36px;text-align:center;cursor:pointer;opacity:0;transform:translateY(8px);transition:opacity .35s cubic-bezier(.2,.8,.2,1),transform .35s cubic-bezier(.2,.8,.2,1)}
  .pochettes li:hover .o-pj,.pochettes li:focus-within .o-pj,.o-pj[aria-pressed=true]{opacity:1;transform:none}
  /* « À écouter aussi » : la grille met la pochette à gauche du texte, le bouton se cale sur elle */
  [data-aussi] .o-pj{right:auto;left:calc(clamp(100px,9vw,170px) - 46px);top:calc(50% - clamp(100px,9vw,170px) / 2 + 10px)}
  .o-pj[aria-pressed=true]{font-size:0}
  .o-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}

  /* 2. Retours de clic : compteur du panier, « ✓ » du lecteur, message qui glisse */
  .lecteur[data-message] .bandeau .s{animation:fb-glisse .4s cubic-bezier(.2,.8,.2,1)}
  @keyframes fb-glisse{from{opacity:0;transform:translateY(12px)}}

  /* 4. Tiroir panier : ouverture plus fluide ; les articles arrivent l'un après l'autre (--i posé par panier.js) */
  .panier{transition:transform .45s cubic-bezier(.32,.72,0,1)}
  .lignes li.entre{animation:fb-ligne .4s cubic-bezier(.32,.72,0,1) backwards;animation-delay:calc(var(--i,0)*40ms)}
  @keyframes fb-ligne{from{opacity:0;transform:translateX(24px)}}

  /* 5. Catalogue Musique : trait d'encre au survol, titre qui glisse ; entrée des 12 premières lignes */
  .liste>li::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--encre);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.8,.2,1);pointer-events:none}
  .liste>li:hover::after{transform:scaleX(1)}
  .liste .nom{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
  .liste>li:hover .nom{transform:translateX(6px)}
  .liste:not([data-sans-entree])>li:nth-child(-n+12){animation:fb-ligne-cat .5s cubic-bezier(.2,.8,.2,1) backwards;}
  .liste:not([data-sans-entree])>li:nth-child(2){animation-delay:30ms}
  .liste:not([data-sans-entree])>li:nth-child(3){animation-delay:60ms}
  .liste:not([data-sans-entree])>li:nth-child(4){animation-delay:90ms}
  .liste:not([data-sans-entree])>li:nth-child(5){animation-delay:120ms}
  .liste:not([data-sans-entree])>li:nth-child(6){animation-delay:150ms}
  .liste:not([data-sans-entree])>li:nth-child(7){animation-delay:180ms}
  .liste:not([data-sans-entree])>li:nth-child(8){animation-delay:210ms}
  .liste:not([data-sans-entree])>li:nth-child(9){animation-delay:240ms}
  .liste:not([data-sans-entree])>li:nth-child(10){animation-delay:270ms}
  .liste:not([data-sans-entree])>li:nth-child(11){animation-delay:300ms}
  .liste:not([data-sans-entree])>li:nth-child(12){animation-delay:330ms}
  @keyframes fb-ligne-cat{from{opacity:0;transform:translateY(10px)}}

  /* 6. Transitions entre pages : fondu court, en-tête et lecteur restent en place */
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.25s}
  .entete{view-transition-name:fb-entete}
  .lecteur{view-transition-name:fb-lecteur}

  /* 8. Lecteur : monte du bas en .4 s (base.css le fait déjà en .35 s) */
  .lecteur,.lecteur.visible{transition-duration:.4s,0s}
  .lecteur:not(.visible){transition-delay:0s,.4s}

  /* 7. Titre de l'accueil : ligne par ligne, mot doré en dernier (lignes écrites dans le HTML, aucun script) */
  .revele .lg{display:block}
  .revele .lg-i{display:block;animation:fb-ligne-titre .55s cubic-bezier(.2,.8,.2,1) backwards}
  .revele .lg:nth-child(2) .lg-i{animation-delay:.1s}
  .revele .or{animation:fb-mot-dore .35s ease-out .4s backwards}
  @keyframes fb-ligne-titre{from{clip-path:inset(-.3em -.1em calc(100% + .3em) -.1em);transform:translateY(40%)}to{clip-path:inset(-.3em -.1em -.3em -.1em);transform:none}}
  @keyframes fb-mot-dore{from{opacity:0}}
}

/* 3 et 9. Défilement : apparition en cascade et parallaxe, seulement si le navigateur sait lier l'animation au défilement */
@supports (animation-timeline:view()){
  @media (min-width:900px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
    .pochettes:not(.ensuite) li,.o-suite-liste article,.ecran.collection>.o-parcours,.ecran.collection>.o-garder,.o-label{animation:fb-monte linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    .pochettes:not(.ensuite) li:nth-child(4n+2),.o-suite-liste article:nth-child(2){animation-range:entry 8% entry 78%}
    .pochettes:not(.ensuite) li:nth-child(4n+3),.o-suite-liste article:nth-child(3){animation-range:entry 16% entry 86%}
    .pochettes:not(.ensuite) li:nth-child(4n),.o-suite-liste article:nth-child(4){animation-range:entry 24% entry 94%}
    [data-sans-defile]{animation:none!important}
    @keyframes fb-monte{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
    .o-v-poch{animation:fb-parallaxe linear both;animation-timeline:scroll(root);animation-range:0 70vh}
    @keyframes fb-parallaxe{to{transform:translateY(-30px)}}
  }
}

/* Accueil : la maquette v7 de Sol (validée le 15/10), dès 900 px. Le HTML garde les textes du téléphone (.m-seul ou masqués ici)
   et porte les textes v7 en .o-seul ; rien n'est supprimé, seulement masqué à l'ordinateur. */
@media(min-width:900px){
  b.o-txt{font-weight:inherit}
  .accueil .o-meta,.accueil .o-cp,.accueil .acc-label .o-lp{display:block}
  body.accueil{--g:clamp(32px,4.2vw,88px)}
  .accueil .page{max-width:1920px;padding-inline:var(--g)}
  .accueil .gouttiere{padding-inline:0}
  .accueil .acc-section,.acc-lettre{margin:0;padding:0;border:0}
  /* Héros (A3, A4) */
  .accueil .acc-hero{display:grid;grid-template-columns:55% minmax(0,1fr);gap:0;align-items:center;padding:28px 0 14px;min-width:0}
  .acc-hero-copy{min-width:0;padding-right:40px}
  .acc-hero .sur{margin:0 0 26px;font-size:var(--s);font-weight:500;letter-spacing:.1em;text-transform:uppercase}
  .accueil .acc-hero h1>span{display:none}
  .accueil .acc-hero h1{font-size:clamp(54px,5.7vw,104px);line-height:.98;letter-spacing:-.035em;margin:0 0 38px;text-transform:none}
  .acc-hero h1 .o-h1{display:block}
  .acc-hero h1 .o-h1 span{display:block;white-space:nowrap}
  .acc-hero h1 .o-h1 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) */
  .acc-hero .genres{display:none}
  .acc-hero .o-genres{display:block;margin:0 0 26px;font-size:17px;line-height:1.5}
  .acc-hero-copy>.fleche.o-explorer{display:inline-flex;align-items:center;justify-content:space-between;gap:66px;width:max-content;padding-block:10px;border-bottom:1px solid currentColor;font:500 17px/1.3 var(--texte);text-decoration:none}
  .acc-hero-copy>.fleche.o-explorer span{font:400 24px/1 var(--texte)}
  .acc-hero-release{display:grid;grid-template-columns:minmax(0,1fr) 128px;column-gap:24px;align-items:start;align-self:center;min-width:0;margin:0}
  .acc-hero-release .acc-cover{grid-column:1;grid-row:1;transform:none;margin:0;position:relative}
  .acc-hero-release .acc-cover-play{display:block;width:100%}
  .acc-hero-release .acc-cover-play img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;outline:1px solid rgba(32,22,37,.07);outline-offset:-1px}
  .acc-hero-release .acc-rond{position:absolute;left:auto;right:0;top:100%;bottom:auto;margin:17px 0 0;width:70px;height:70px;transform:none}
  .acc-hero-release .acc-legende,.acc-hero-release .acc-meta,.acc-hero-release .acc-offre,.acc-hero-release>.fleche{display:none}
  .acc-hero-release .acc-release-title{grid-column:1;grid-row:2;display:block;margin:0;padding-top:17px;max-width:calc(100% - 100px)}
  .acc-hero-release h2{font:900 clamp(30px,2.5vw,36px)/1.12 var(--titre);letter-spacing:-.015em;margin:0}
  .accueil .acc-hero-release .o-meta{display:none}
  .acc-hero-release .o-meta{grid-column:1;grid-row:3;margin:7px 0 0;max-width:calc(100% - 100px);font-size:var(--s);color:var(--encre-2)}
  .acc-hero-release .acc-add{display:inline-flex;margin:8px 0 0;min-height:0;font-size:var(--s);gap:8px}
  .acc-hero-release .o-cote{grid-column:2;grid-row:1/span 3;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;gap:20px;min-width:0}
  /* Les rythmes (A5) */
  .accueil .acc-envies{display:grid;grid-template-columns:calc(55% - 28px) minmax(0,1fr);column-gap:28px;align-items:center;padding:10px 0 20px;border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
  .acc-envies .acc-section-head{grid-column:1}
  .accueil .acc-envies .acc-heading{margin:0;font:500 var(--s)/1.3 var(--texte);letter-spacing:0;text-transform:none}
  .acc-envies .acc-heading .m-seul{display:none}
  .acc-envies .aide{margin:6px 0 0;font-size:var(--s);color:var(--encre-2);text-align:left}
  .acc-envies .envies-cadre{grid-column:2;display:block;margin:0;min-width:0}
  .acc-envies .envies-gauche{max-width:none;margin:0;padding:0}
  .acc-envies .scene-envies{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 28px;aspect-ratio:auto;margin:0;width:100%;max-width:none;height:auto}
  .acc-envies .scene-envies>svg,.acc-envies .scene-envies .vinyle{display:none}
  .acc-envies .envie,.acc-envies .envie.d{position:static;inset:auto;transform:none;align-items:flex-start;text-align:left;min-height:0;width:auto;padding:0;font:900 clamp(26px,2.1vw,40px)/1.2 var(--titre);gap:2px;justify-content:flex-start}
  .acc-envies .envie .et{width:100%}
  .acc-envies .envies-droite:not([hidden]){display:block;margin-top:22px}
  .acc-envies .envies-droite .envie-titre{font-size:clamp(34px,3vw,56px);margin:4px 0 18px}
  .acc-envies .envies-droite .pochettes.ensuite{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:12px}
  .acc-envies .info-envie,.acc-envies .ligne-coeurs{margin:14px 0 0;font-size:var(--s2)}
  /* La suite s'écoute (A6) : remplace « Dernières sorties » à l'ordinateur */
  .accueil .acc-sorties{display:none}
  .accueil .o-suite{padding:40px 0 72px}
  .o-sp-act .o-sp-ajout{white-space:nowrap}
  .o-suite-liste{padding:0;margin:0;list-style:none}
  .o-suite-liste li,.o-suite-liste li:nth-child(n){flex:none;width:auto;margin:0}
  .o-suite-liste li:nth-child(2){padding-top:34px}
  .o-suite-liste li:nth-child(4){padding-top:65px}
  /* Dernières sorties et Les plus écoutés : lignes de liens discrets sous les quatre rythmes */
  .acc-envies .scene-envies{row-gap:16px}
  .acc-envies .envie[data-rythme=recent],.acc-envies .envie[data-rythme=popular]{display:inline-flex;min-height:0;min-width:0;grid-row:2;justify-self:start;font:500 var(--s2)/1.3 var(--texte);color:var(--encre-2);padding:0 0 2px;border-bottom:1px solid transparent}
  .acc-envies .envie[data-rythme=recent]{grid-column:1}
  .acc-envies .envie[data-rythme=popular]{grid-column:2}
  .acc-envies .envie[data-rythme=recent] .mot-env br,.acc-envies .envie[data-rythme=popular] .mot-env br{display:none}
  .acc-envies .envie[data-rythme=recent] .et,.acc-envies .envie[data-rythme=popular] .et{display:none}
  .acc-envies .envie[data-rythme=recent]:hover,.acc-envies .envie[data-rythme=popular]:hover{color:var(--or)}
  .acc-envies .envie[data-rythme=recent].actif,.acc-envies .envie[data-rythme=popular].actif{color:var(--or);border-bottom-color:currentColor}
  /* Collection (A7) */
  .accueil .acc-collection{display:grid;grid-template-columns:calc(55% - 50px) minmax(0,.75fr) minmax(0,1fr);column-gap:50px;align-items:center;padding:64px 0;border-top:1px solid var(--filet)}
  .acc-collection-copy{display:contents}
  .acc-collection .acc-heading{grid-column:1;grid-row:1;margin:0 0 20px;font:900 clamp(60px,5.4vw,100px)/.98 var(--titre);letter-spacing:-.025em;text-transform:none}
  .acc-collection .acc-heading .m-seul{display:none}
  .acc-collection-copy>p{display:none}
  .acc-collection .o-cp{grid-column:1;grid-row:2;font-size:inherit;line-height:1.5}
  .acc-collection .o-cp small{display:block;margin-top:10px;font-size:var(--s);color:var(--encre-2)}
  .acc-tarifs{display:contents}
  .acc-collection .acc-price{grid-column:2;grid-row:1;align-self:end;font:900 104px/1 var(--titre);margin:0 0 16px}
  .accueil .acc-collection .fleche:not(.o-lc){display:none}
  .accueil .acc-collection .fleche.o-lc{grid-column:2;grid-row:2;justify-self:start;display:inline-flex;align-items:center;gap:25px;margin:0;color:var(--encre);font:900 30px/1.2 var(--titre);text-decoration:none}
  .accueil .acc-collection .fleche.o-lc span{font:400 28px/1 var(--texte)}
  .accueil .acc-collection .fleche.o-lc:hover{color:var(--encre);text-decoration:underline;text-decoration-color:#ba7e16;text-decoration-thickness:.18em;text-underline-offset:.12em;text-decoration-skip-ink:none}
  .acc-collection .acc-usb{grid-column:2;grid-row:3;align-self:start;margin:16px 0 0;padding:0;border:0;font-size:var(--s2);font-weight:400;color:var(--encre-2)}
  .acc-collection .acc-usb .o-seul{display:block;font-weight:400}
  .acc-collection .acc-wall{display:none}
  .acc-collection .o-duo{grid-column:3;grid-row:1/span 3;display:flex;align-items:center;gap:18px;margin:0}
  .acc-collection .o-duo img{display:block;flex:none;height:auto;aspect-ratio:1;object-fit:cover;outline:1px solid rgba(32,22,37,.08);outline-offset:-1px}
  .acc-collection .o-duo img:nth-child(1){width:57%}
  .acc-collection .o-duo img:nth-child(2){width:calc(43% - 18px);margin-top:70px}
  /* Label (A8) puis les avis, à plat */
  .accueil .acc-label{display:grid;grid-template-columns:calc(55% - 80px) minmax(0,1fr);column-gap:80px;align-items:center;padding:72px 0;border-top:1px solid var(--filet)}
  .acc-label-intro{display:contents}
  .acc-label .acc-heading{grid-column:1;grid-row:1/span 3;margin:0;font:900 clamp(80px,7.7vw,144px)/.92 var(--titre);letter-spacing:-.025em;text-transform:none}
  .acc-label .acc-heading>span{display:none}
  .acc-label-intro>.disque,.acc-label-intro>p{display:none}
  .acc-label .o-signature{grid-column:2;grid-row:1;display:flex;align-items:center;gap:25px}
  .acc-label .o-signature .disque{width:100px;height:100px;flex:none}
  .acc-label .o-lp{grid-column:2;grid-row:2;max-width:36ch;margin:22px 0;font-size:19px;line-height:1.5}
  .acc-label .o-lien{grid-column:2;grid-row:3;justify-self:start}
  .acc-avis{grid-column:1/-1;grid-row:4;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:40px;margin:64px 0 0;padding:28px 0 0;border-top:1px solid var(--filet)}
  .acc-avis li,.acc-avis li:nth-child(even){width:auto;margin-left:0}
  .acc-avis q{font-size:19px}
  .acc-guillemet{display:block;font:900 56px/.8 var(--titre)}
  /* Lettre (G3) : accueil et pied des pages */
  .acc-lettre{padding:0}
  .acc-lettre .lettre,footer.pied .lettre{display:grid;grid-template-columns:calc(55% - 80px) minmax(0,1fr);grid-template-rows:none;column-gap:80px;row-gap:0;align-items:start;margin:0;padding:clamp(40px,3.6vw,64px) 0;border-top:1px solid var(--filet);border-bottom:0}
  .acc-lettre .lettre h2,footer.pied .lettre h2{grid-column:1;grid-row:1/span 6;margin:0;max-width:none;font:900 54px/1 var(--titre);letter-spacing:-.025em;text-transform:none;text-wrap:balance}
  .acc-lettre .lettre h2 .l,footer.pied .lettre h2 .m-seul{display:none}
  .acc-lettre .lettre h2::after,footer.pied .lettre h2::after{content:none}
  .acc-lettre .lettre>*:not(h2),footer.pied .lettre>*:not(h2){grid-column:2;margin-left:0}
  .acc-lettre .lettre>p,footer.pied .lettre>p{display:none}
  .lettre .o-lp{display:block;grid-row:1;margin:0 0 20px;font-size:15px;line-height:1.5}
  .lettre label.sr{grid-row:2;position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;white-space:normal;font-size:var(--s);color:var(--encre-2)}
  .acc-lettre .lettre input[type=email],footer.pied .lettre input[type=email]{grid-row:3;width:100%;height:auto;margin:0;padding:6px 200px 11px 0;border-bottom:1px solid var(--encre);font-size:17px}
  .acc-lettre .lettre .fleche,footer.pied .lettre .fleche{grid-row:3;justify-self:end;align-self:center;margin:0;font:400 16px/1.2 var(--texte);white-space:nowrap;gap:8px;min-width:24px;min-height:24px}
  .acc-lettre .lettre .fleche svg{width:18px;height:18px}
  .acc-lettre .lettre .case,footer.pied .lettre .case{grid-row:4;margin-top:12px;padding-block:0;font-size:var(--s);color:var(--encre-2);align-items:center}
  .acc-lettre .lettre .raison,footer.pied .lettre .raison{grid-row:5;margin:6px 0 0;font-size:var(--s)}
  .acc-lettre .lettre .piege{grid-row:6}
  /* Pied 12a (Brice, 23/10) : même conception centrée ; le rail montre 8 pochettes. Base : base.css. */
  footer.pied.gouttiere{margin-inline:calc(-1 * var(--g))}   /* pleine largeur : le rail de pochettes va d'un bord à l'autre de la fenêtre */
  footer.pied.gouttiere .pied-rail img{width:12.5cqw;height:12.5cqw}
  footer.pied.gouttiere .pied-liens{flex-direction:row;flex-wrap:wrap;gap:0 26px}
  footer.pied.gouttiere>.lettre{grid-column:1/-1;margin-bottom:20px}
}
@media(min-width:1201px){.acc-hero-release{grid-template-columns:minmax(0,1fr) 128px}}
/* 900-1200 px : la fiche de sortie et la barre des rythmes se resserrent au lieu de déborder */
@media(min-width:900px) and (max-width:1200px){
  .fiche-tete{grid-template-columns:minmax(0,1.1fr) minmax(0,.62fr) minmax(0,1.5fr);column-gap:24px}
  .accueil .acc-envies{grid-template-columns:calc(24% - 20px) minmax(0,1fr);column-gap:20px}
  .acc-envies .scene-envies{column-gap:16px}
  .acc-envies .envie,.acc-envies .envie.d{font-size:clamp(22px,2.4vw,28px)}
}
/* ▶ au survol des pochettes avec « réduire les animations » : même bouton, sans transition */
@media (min-width:900px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){
  .pochettes a{position:relative}
  .pochettes li{position:relative}
  .o-pj{display:block;position:absolute;z-index:2;right:10px;top:10px;width:36px;height:36px;padding:0;border:0;background:var(--creme);color:var(--encre);font-size:12px;line-height:36px;text-align:center;cursor:pointer;opacity:0}
  .pochettes li:hover .o-pj,.pochettes li:focus-within .o-pj,.o-pj[aria-pressed=true]{opacity:1}
  [data-aussi] .o-pj{right:auto;left:calc(clamp(100px,9vw,170px) - 46px);top:calc(50% - clamp(100px,9vw,170px) / 2 + 10px)}
  .o-pj[aria-pressed=true]{font-size:0}
  .o-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:1700px){
  .accueil .acc-hero{padding:24px 0 16px}
  .acc-hero .o-genres{font-size:20px}
  .acc-hero-release{grid-template-columns:minmax(0,1fr) 160px;column-gap:35px;max-width:680px}
  .acc-hero-release h2{font-size:44px}
  .acc-hero-release .o-cote .o-mini img{width:110px}
  .accueil .acc-envies{padding:14px 0}
  .accueil .acc-collection{padding-block:80px}
  .accueil .acc-label{padding-block:80px}
}

/* Bandeau commun : même commande d’agrandissement et même vinyle que sur téléphone. */
@media(min-width:900px){
  .lecteur:not(.mm-lecteur) .bandeau{height:90px;max-width:1440px;padding:0 var(--g);display:grid;grid-template-columns:1.1fr 1.2fr 1fr;grid-template-rows:auto;gap:28px}
  .lecteur:not(.mm-lecteur) .b-gauche{display:flex;align-items:center;gap:20px;min-width:0}
  .lecteur:not(.mm-lecteur) .b-gauche>.vinyle{position:relative;left:auto;top:-8px;width:72px;height:72px;flex:0 0 72px;z-index:3}
  .lecteur:not(.mm-lecteur) .infos{display:block}
  .lecteur:not(.mm-lecteur) .b-centre{grid-column:2;grid-row:1;justify-content:center;flex-wrap:wrap;gap:12px}
  .lecteur:not(.mm-lecteur) .b-droite{grid-column:3;grid-row:1;justify-content:flex-end;gap:16px}
  .lecteur:not(.mm-lecteur) .prog{display:block;left:0;right:0;top:-1px}
  .lecteur:not(.mm-lecteur) .ajout{font-size:16px}
  html.joue:has(.lecteur:not(.mm-lecteur)) body{padding-bottom:90px}
}

/* ------------------------------------------------------------------ Écarts v7 : Musique (M1-M9), Collection (C1, C4-C6), Fiche de sortie (S1-S10) */
.o-txt{display:inline}
@media(min-width:1201px){
  /* M1, M4, M5, M7 */
  .ecran.musique{grid-template-columns:250px minmax(0,1fr);column-gap:40px}
  .ecran.musique .o-colonne button{font-size:26px}
  .liste>li,.ecran.musique>.o-tete{grid-template-columns:58px minmax(144px,1.6fr) minmax(110px,1fr) 95px 56px 36px 98px;column-gap:18px}
  .liste .nom{font-size:25px}
  /* S7 : colonnes des pistes de la v7, partout au-dessus de 1200 px */
  .pistes li{grid-template-columns:49px minmax(160px,1fr) 50px 30px 90px;column-gap:15px}
  .pistes .jouer{width:49px;text-align:center}
}
/* M2 */
.ecran.musique>.compte{font-size:15px}
/* M8 : « 2 € ＋ » */
.liste .o-ajout{min-width:98px;justify-content:flex-end;gap:0}
.liste .o-ajout span{margin-left:10px;font-size:19px}
/* M9, C6 */
.o-encart .o-lien span{font-size:13px;font-weight:500}
.ecran.collection .o-lien span{line-height:1.5}
/* C4 */
.ecran.collection>.actions .fleche{font-size:32px;line-height:1.2;padding-bottom:12px}
.ecran.collection>.actions .fleche::after{font-size:22px;line-height:1}
/* S1 */
.ecran.sortie>.lien.retour svg{display:none}
/* S2, S3 */
.fiche-infos>h1.titre-page,.fiche-infos>h1.titre-page.long{letter-spacing:-.025em}
.o-l{line-height:1.2}
/* S8, S9, S10 */
#fiche>.bloc>h2{font-size:43px}
#fiche>.bloc>.actions .fleche{font-size:30px}
#fiche>.bloc:has([data-aussi])>h2{font-size:48px}
[data-aussi] a{grid-template-columns:130px minmax(0,1fr)}
[data-aussi] .n{font-size:30px}
[data-aussi] .o-vd{font-weight:500}
@media(min-width:1700px){
  .ecran.musique{grid-template-columns:290px minmax(0,1fr);column-gap:60px}
  .ecran.musique>.compte{font-size:16px}
  /* M6 */
  .liste>li,.ecran.musique>.o-tete{grid-template-columns:65px minmax(240px,1.03fr) minmax(200px,1fr) minmax(130px,.6fr) 90px 55px 130px;column-gap:25px}
  .liste>li{min-height:93px}
  .liste .couv,.liste .couv img{width:65px;height:65px}
  .liste .nom{font-size:29px;margin-left:-7px}
  .liste .o-sortie,.liste .o-rythme,.liste .o-duree,.liste .o-ajout{font-size:14px}
  /* C5 */
  .ecran.collection{grid-template-columns:minmax(500px,1fr) minmax(0,880px);column-gap:100px}
  .ecran.collection>.prix-o{font-size:74px}
  /* S3, S4, S5 */
  .fiche-infos>.actions .fleche{font-size:32px}
  .o-px{font-size:80px}
  .fiche-tete{grid-template-columns:1.1fr .65fr 1.55fr;column-gap:55px}
}
/* La Collection : « Voir dans Musique → » à droite du bouton d'achat (plus de grand blanc avant « Paiement unique », comme la v7) */
.ecran.collection>.actions{width:100%;flex-direction:row;align-items:center;gap:32px;flex-wrap:nowrap}
.ecran.collection>.actions .fleche{width:min(400px,100%);flex:0 0 min(400px,100%)}
.ecran.collection>.actions .lien{align-self:center;white-space:nowrap}
.ecran.collection{grid-template-rows:repeat(10,auto) minmax(0,1fr)}

/* Collection : cascade au chargement, indépendante des animations de défilement. */
@media(min-width:900px) and (prefers-reduced-motion:no-preference){
  .o-compo>a{animation:fb-compo-entree .65s cubic-bezier(.2,.8,.2,1) backwards}
  .o-compo>a:nth-child(2){animation-delay:90ms}
  .o-compo>a:nth-child(3){animation-delay:180ms}
  .o-compo>a:nth-child(4){animation-delay:270ms}
  .o-compo>a:nth-child(5){animation-delay:360ms}
  @keyframes fb-compo-entree{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}
}

/* Musique : les onglets de format (M2) ne servent qu'au téléphone ; la colonne « Format » ci-dessus reste le contrôle ordinateur */
@media(min-width:900px){.ecran.musique>.onglets{display:none}}

/* ===== La Collection : « Dos de pochette » sur ordinateur (520 px au plus) ===== */
@media(min-width:900px){
  .ecran.collection>.px-o{max-width:520px;letter-spacing:0;font:400 16px/1.3 var(--texte)}
  .col-chiffres{margin-top:clamp(18px,1.8vw,30px)}
  .col-chiffres b{font-size:clamp(72px,6vw,104px)}
  .col-chiffres .col-prix b,.col-chiffres .col-prix i{font-size:clamp(120px,10.5vw,176px)}
  .col-infos li{font-size:17px}
}

/* Lecteur déployé, ordinateur (D2 « Disque au centre ») : humeurs en rangée en haut, titre géant centré, disque au centre (onde « Points » de chaque côté),
   file « Ensuite » à droite, commandes à gauche et barre d'achat à droite sous le disque. À plat : aucune carte ni capsule ; seuls ronds : disque, ▶, points. */
@media (min-width:900px){
  #vue:not(.luna-lecteur).fb-plein{--dq:min(42vh,26vw);--bande:136px;--g:48px;padding:0}
  #vue:not(.luna-lecteur).fb-plein[open]{display:grid;column-gap:44px;row-gap:0;padding:0 var(--g) 24px;grid-template-columns:minmax(0,1fr) var(--dq) minmax(0,1fr);
    grid-template-rows:auto auto minmax(0,128px) minmax(0,1fr) var(--bande) minmax(0,1fr);
    grid-template-areas:"haut haut haut" "zh zh zh" "zt zt zt" "rac dq zf" ". dq ." "zc dq za"}
  #vue:not(.luna-lecteur) .fb-corps,#vue:not(.luna-lecteur) .fb-pied{display:contents}
  #vue:not(.luna-lecteur) .fb-corps>*,#vue:not(.luna-lecteur) .fb-pied>*{min-width:0;min-height:0}
  #vue:not(.luna-lecteur) .fb-haut{grid-area:haut;padding:22px 0 0;min-height:44px}
  #vue:not(.luna-lecteur) #vEnsuite,#vue:not(.luna-lecteur) #vAide{display:none}

  #vue:not(.luna-lecteur) #vDisque{grid-area:dq;align-self:center;width:100%;max-height:none;margin:0;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
  #vue:not(.luna-lecteur) #vDisque:hover{transform:scale(1.015)}

  /* Titre géant centré, cœur à côté */
  #vue:not(.luna-lecteur) .fb-titre-ligne{grid-area:zt;margin:0;align-self:end;justify-content:center;align-items:center;gap:16px;overflow:hidden}
  #vue:not(.luna-lecteur) .fb-titre-bloc{flex:0 1 auto}
  #vue:not(.luna-lecteur) #vT{font:900 124px/.86 var(--titre);letter-spacing:-.012em;text-align:center}
  #vue:not(.luna-lecteur) #vT .l{margin:0 auto}
  #vue:not(.luna-lecteur) .fb-source{margin:8px 0 0;font-size:17px;text-align:center}
  #vue:not(.luna-lecteur) .fb-coeur{margin:0 0 4px}
  #vue:not(.luna-lecteur) .fb-coeur:hover{color:var(--or)}

  /* Humeurs en haut, filet dessous ; le rappel des raccourcis est calé sur le même bord haut, à gauche */
  #vue:not(.luna-lecteur) #vHumeurs{grid-area:zh;position:relative;z-index:1;justify-content:center;gap:4px;padding:0 0 4px;background:transparent;border-bottom:1px solid var(--filet)}
  #vue:not(.luna-lecteur) .fb-humeurs button{min-height:44px;padding:0 10px;color:var(--encre-2);transition:color .18s}
  #vue:not(.luna-lecteur) .fb-humeurs button:hover:not(:disabled),#vue:not(.luna-lecteur) .fb-humeurs button[aria-pressed=true]{color:var(--encre)}
  #vue:not(.luna-lecteur) .fb-humeurs .cc,#vue:not(.luna-lecteur) .fb-humeurs .cc:hover:not(:disabled),#vue:not(.luna-lecteur) .fb-humeurs .cc:disabled{color:var(--encre);opacity:1}
  #vue:not(.luna-lecteur) .fb-humeurs .cc svg{color:#e8a93b;fill:#e8a93b}
  #vue:not(.luna-lecteur) .fb-humeurs .sep{height:34px;margin:0 6px}
  #vue:not(.luna-lecteur) .fb-rac{display:block;grid-area:zh;align-self:start;justify-self:start;position:relative;z-index:2;max-width:calc(50% - 230px);margin:0;padding-top:6px;font:500 12.5px/1.45 var(--texte);color:var(--encre-3);letter-spacing:.01em}
  #vue:not(.luna-lecteur) .fb-rac b{font-weight:600}
  #vue:not(.luna-lecteur) .fb-rac span{display:inline-block}
  #vue:not(.luna-lecteur) .fb-rac span+span::before{content:"·";margin:0 8px}

  /* Commandes à gauche (alignées à droite, contre le disque), achat à droite */
  #vue:not(.luna-lecteur) .fb-zc{display:flex;flex-direction:column;gap:6px;grid-area:zc;align-self:start;align-items:flex-end;padding-top:14px;position:relative;z-index:1}
  #vue:not(.luna-lecteur) .fb-transport{margin:0;gap:18px;justify-content:flex-end}
  #vue:not(.luna-lecteur) .fb-t.d{text-align:left}
  #vue:not(.luna-lecteur) .fb-temps{display:flex;gap:.35em;align-items:center}
  #vue:not(.luna-lecteur) .fb-temps .fb-t{width:auto}
  #vue:not(.luna-lecteur) .fb-rang{margin-left:0}
  #vue:not(.luna-lecteur) .fb-rang:not(:empty)::before{content:"·";margin-right:.39em}   /* « 0:01 / 1:04 · 1/17 » : espaces égaux des deux côtés du « · » (le gap de 5,25 px fait l'espace avant, la marge de .39em (5,25 px) l'espace après), comme autour du « / » */
  #vue:not(.luna-lecteur) .fb-commandes button{transition:transform .18s cubic-bezier(.2,.8,.2,1),color .18s}
  #vue:not(.luna-lecteur) .fb-commandes button:hover{color:var(--or)}
  #vue:not(.luna-lecteur) .fb-commandes .fb-gros:hover{background:var(--or);color:var(--creme)}
  #vue:not(.luna-lecteur) .fb-za{grid-area:za;align-self:start;padding-top:14px;display:flex;flex-direction:column;position:relative;z-index:1}
  #vue:not(.luna-lecteur) .fb-achat{height:64px;max-width:460px;width:100%;transition:background-color .18s}
  #vue:not(.luna-lecteur) .fb-achat:hover{background:var(--ambre)}

  /* File « Ensuite » toujours visible, à droite */
  #vue:not(.luna-lecteur) .fb-zf{display:flex;flex-direction:column;grid-area:zf;align-self:stretch;position:relative;z-index:2;background:var(--creme);overflow:hidden}
  #vue:not(.luna-lecteur) .fb-zf-t{flex:none;display:flex;justify-content:space-between;align-items:baseline;margin:0;padding-bottom:8px;font:600 14px/1 var(--texte);color:var(--encre)}
  #vue:not(.luna-lecteur) .fb-zf-t small{font:500 12.5px/1 var(--texte);color:var(--encre-3)}
  #vue:not(.luna-lecteur) .fb-zf .fb-fl{flex:1 1 auto;min-height:0;overflow:hidden}
  #vue:not(.luna-lecteur) .fb-zf .fb-fl-t b{font-size:23px}
}
@media (min-width:900px) and (prefers-reduced-motion:reduce){
  #vue:not(.luna-lecteur) *{transition:none!important}
  #vue:not(.luna-lecteur) #vDisque:hover{transform:none}
}

/* Musique : blocs Voix et Instrument dominant de la colonne de gauche (même liste que « Selon l’envie ») */
@media (min-width:900px){
  .o-colonne>.fm-col{display:flex;flex-direction:column;align-items:stretch;gap:9px;width:100%;margin-top:30px}
  .o-colonne>.fm-col.fm-voix{margin:0 0 30px}
  .ecran.musique .o-colonne .fm-col button[data-nb]{display:flex;align-items:baseline}
}

/* Musique (1440 et plus) : la colonne de gauche passe sur deux colonnes pour tenir dans l'écran (Voix, Selon l'envie, Format | Instrument, encart Collection). Rien n'est retiré. */
@media (min-width:1400px){
  .ecran.musique{grid-template-columns:548px minmax(0,1fr)}
  .ecran.musique>.o-colonne{display:flex;flex-flow:column wrap;align-content:flex-start;column-gap:36px;height:600px}
  .ecran.musique>.o-colonne>.fm-col,.ecran.musique>.o-colonne>#rythmes,.ecran.musique>.o-colonne>.o-cote>*{width:256px;flex:none}
  .ecran.musique>.o-colonne>.o-cote{display:contents}
  .ecran.musique>.o-colonne>.fm-voix{order:1;margin:0 0 30px}
  .ecran.musique>.o-colonne>#rythmes{order:2;margin:0 0 30px}
  .ecran.musique>.o-colonne>.o-cote>.etiq{order:3;margin:0 0 9px}
  .ecran.musique>.o-colonne>.o-cote>.o-formats{order:4}
  .ecran.musique>.o-colonne>.fm-instr{order:5;margin:0 0 36px}
  .ecran.musique>.o-colonne>.o-cote>.o-encart{order:6;margin-top:0}
}

/* Page Musique, fenêtre basse (MacBook 14" : 1512 × 830) : le lecteur fixe du bas (≈ 91 px) ne doit pas recouvrir « Explosif », dernière humeur de la colonne.
   Le titre et l'espace sous le compte se resserrent (≈ 60 px gagnés) ; à partir de 901 px de haut, rien ne change. */
@media (min-width: 900px) and (max-height: 900px) {
  .ecran.musique>.titre-page,.ecran.musique>.mv1-tp>.titre-page{font-size:clamp(88px,6.6vw,100px)}
  html body main#contenu.ecran.musique h1.aff.titre-page{font-size:clamp(88px,6.6vw,100px)}   /* la charte B (96 px) ne touche pas l'ancienne page au bureau */
  .ecran.musique>.champ{margin-bottom:6px}
  .ecran.musique>.compte{margin-bottom:16px}
}