/* Awoui — css/ambiance-page.css — la page Ambiance (/ambiance) : le lecteur en grand.
   Même langage que le bandeau Tarifs (lumière qui tourne, couleurs de marque constantes), que le dock
   d'assistance (contour lumineux) et que le catalogue (liseré dégradé au survol). Jetons seulement.
   Aucun style inline : les couleurs par artiste sont posées en propriétés CSS par le script. Clé : ?v=j */
html.amb-page, html.amb-page body{height:100%}
html.amb-page body{overflow:hidden}
html.amb-page footer:not(.as-f){display:none}
html.amb-page #ambDock{display:none}                          /* le transport de la page remplace le dock… */
html.amb-page.aw-socle-on #ambDock{display:flex}              /* …sauf quand une autre page est ouverte par-dessus */
/* « Une question ? » reste à sa place habituelle, en bas à droite ; c'est le volume qui flotte au-dessus (retour d'Antoine). */

/* — la scène : fond vivant, commun à toute la page — */
html.amb-page{--ap-a:var(--brand-cyan);--ap-b:var(--brand-iris);--ap-c:var(--brand-emerald)}
/* la lueur couvre tout l'écran, en-tête compris : un calque fixe derrière la page */
html.amb-page body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background:
    radial-gradient(60% 50% at 12% 0%,color-mix(in srgb,var(--ap-a) 30%,transparent),transparent 70%),
    radial-gradient(50% 60% at 100% 12%,color-mix(in srgb,var(--ap-b) 28%,transparent),transparent 70%),
    radial-gradient(60% 50% at 60% 110%,color-mix(in srgb,var(--ap-c) 22%,transparent),transparent 70%);
  transition:opacity .8s}
html.amb-page.amb-joue body::before{opacity:.85}
html.amb-page header.nav{background:color-mix(in srgb,var(--chrome) 70%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.ap{position:relative;isolation:isolate;height:calc(100vh - var(--nav-h,64px));display:grid;
  grid-template-columns:232px minmax(0,1fr) minmax(300px,360px);grid-template-rows:minmax(0,1fr) auto;color:var(--text);background:transparent}
.ap-charge,.ap-vide{grid-column:1/-1;align-self:center;text-align:center;color:var(--muted);font-family:var(--fm);font-size:13px}

/* — rail gauche — */
.ap-rail{grid-row:1;display:flex;flex-direction:column;gap:2px;padding:18px 12px;border-right:1px solid var(--line);overflow:auto;
  background:color-mix(in srgb,var(--bg-1) 70%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ap-rail h2{margin:14px 10px 6px;font-family:var(--fm);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);font-weight:600}
.ap-rail h2:first-child{margin-top:0}
.ap-nav{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:1px solid transparent;border-radius:12px;background:none;color:var(--muted);font:inherit;font-size:14px;cursor:pointer;text-align:left;transition:background .2s,color .2s}
.ap-nav svg{width:18px;height:18px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ap-nav i{margin-left:auto;font-style:normal;font-family:var(--fm);font-size:11px;color:var(--faint)}
.ap-nav:hover{color:var(--text);background:var(--inset)}
.ap-nav.on{color:var(--text);background:var(--panel);border-color:var(--line-2)}
.ap-nav.on svg{color:var(--accent)}
.ap-rail .ap-liste-mini{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;font-size:13px;color:var(--muted);background:none;border:0;width:100%;text-align:left;cursor:pointer;font:inherit}
.ap-rail .ap-liste-mini:hover{color:var(--text);background:var(--inset)}
.ap-rail .ap-liste-mini b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-rail .ap-liste-mini i{margin-left:auto;font-style:normal;font-family:var(--fm);font-size:11px;color:var(--faint)}

/* — colonne centrale : barre de recherche + contenu qui défile — */
.ap-main{grid-row:1;position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.ap-top{display:flex;align-items:center;gap:12px;padding:14px 26px 10px}
.ap-cherche{flex:1;display:flex;align-items:center;gap:10px;max-width:520px;padding:0 14px;height:40px;border-radius:999px;border:1px solid var(--line);background:var(--inset);color:var(--muted)}
.ap-cherche svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;flex:0 0 auto}
.ap-cherche input{flex:1;min-width:0;border:0;background:none;color:var(--text);font:inherit;font-size:14px;outline:none}
.ap-cherche kbd{font-family:var(--fm);font-size:10.5px;color:var(--faint);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
.ap-cherche:focus-within{border-color:var(--accent)}
.ap-top .ap-fil{margin-left:auto;font-family:var(--fm);font-size:11.5px;color:var(--faint)}
.ap-contenu{flex:1;min-height:0;overflow:auto;padding:6px 26px 40px;scroll-behavior:smooth}
.ap-sec{margin-top:26px}
.ap-sec:first-child{margin-top:8px}
.ap-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.ap-sec-h h2{margin:0;font-family:var(--fd);font-weight:500;font-size:clamp(19px,2vw,24px);letter-spacing:-.015em}
.ap-sec-h p{margin:2px 0 0;color:var(--muted);font-size:13.5px}
.ap-sec-h .ap-plus{font-family:var(--fm);font-size:12px;color:var(--accent);background:none;border:0;cursor:pointer;font-weight:600}
.ap-titre-page{margin:8px 0 2px;font-family:var(--fd);font-weight:500;font-size:clamp(28px,3.2vw,40px);letter-spacing:-.02em;line-height:1.05}
.ap-sous{color:var(--muted);font-size:15px;max-width:66ch;margin:6px 0 0}

/* — cartes (artistes, ambiances, radios) : liseré de marque au survol, comme le catalogue — */
.ap-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
.ap-carte{position:relative;display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--panel);color:inherit;text-align:left;font:inherit;cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,background .3s}
.ap-carte::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--grad-fill);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:0;transition:opacity .3s;pointer-events:none}
.ap-carte:hover{transform:translateY(-4px);background:var(--panel-2);box-shadow:var(--sh-ac)}
.ap-carte:hover::before,.ap-carte.on::before{opacity:1}
.ap-carte .ap-poch{width:100%;aspect-ratio:1;border-radius:12px;overflow:hidden;position:relative;background:var(--bg-2)}
.ap-carte .ap-poch svg{width:100%;height:100%;display:block}
.ap-carte .ap-poch .ap-go{position:absolute;right:10px;bottom:10px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--grad-fill);color:var(--on-accent);box-shadow:var(--sh-ac);opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
.ap-carte .ap-poch .ap-go svg{width:18px;height:18px;fill:currentColor}
.ap-carte:hover .ap-poch .ap-go,.ap-carte.on .ap-poch .ap-go{opacity:1;transform:none}
.ap-carte b{display:block;font-family:var(--fd);font-weight:500;font-size:15px;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-carte span{display:block;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-carte .ap-live{display:inline-flex;align-items:center;gap:6px;font-family:var(--fm);font-size:10.5px;letter-spacing:.05em;color:var(--emerald)}
.ap-carte .ap-live::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 20%,transparent)}
.ap-carte.large .ap-poch{aspect-ratio:16/9}

/* — tables de titres (bibliothèque, listes, file) — */
.ap-table{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:color-mix(in srgb,var(--panel) 80%,transparent)}
.ap-ligne{display:grid;grid-template-columns:36px minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:9px 14px;border-top:1px solid var(--line);color:inherit;background:none;border-left:0;border-right:0;border-bottom:0;font:inherit;text-align:left;cursor:pointer;transition:background .15s}
.ap-ligne:first-child{border-top:0}
.ap-ligne:hover{background:var(--inset)}
.ap-ligne.on{background:color-mix(in srgb,var(--accent-soft) 70%,transparent)}
.ap-ligne .ap-n{font-family:var(--fm);font-size:12px;color:var(--faint);text-align:center}
.ap-ligne:hover .ap-n,.ap-ligne.on .ap-n{color:var(--accent)}
.ap-ligne .ap-n svg{width:14px;height:14px;fill:currentColor;vertical-align:-2px}
.ap-ligne .ap-t b{display:block;font-weight:500;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-ligne .ap-t span{display:block;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-ligne.on .ap-t b{color:var(--accent)}
.ap-ligne .ap-lic{font-family:var(--fm);font-size:11px;color:var(--faint);white-space:nowrap}
.ap-ligne .ap-acts{display:flex;gap:4px;opacity:.55;transition:opacity .2s}
.ap-ligne:hover .ap-acts,.ap-ligne.on .ap-acts{opacity:1}
.ap-ico{width:30px;height:30px;border-radius:50%;border:0;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer;font:inherit}
.ap-ico svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ap-ico:hover{color:var(--text);background:var(--inset)}
.ap-ico.on{color:var(--lgi)}
.ap-ico.on svg{fill:currentColor}
.ap-album{margin-top:18px}
.ap-album-h{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.ap-album-h .ap-poch{width:56px;height:56px;border-radius:10px;overflow:hidden;flex:0 0 auto}
.ap-album-h .ap-poch svg{width:100%;height:100%;display:block}
.ap-album-h h3{margin:0;font-family:var(--fd);font-weight:500;font-size:18px;letter-spacing:-.01em}
.ap-album-h p{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.ap-album-h .btn{margin-left:auto;font-size:13px;padding:8px 14px}

/* — puces, curseurs, tuiles réglages — */
.ap-puces{display:flex;flex-wrap:wrap;gap:8px}
.ap-puce{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--muted);font:inherit;font-size:13px;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.ap-puce:hover{color:var(--text);border-color:var(--line-strong)}
.ap-puce.on{color:var(--on-accent);background:var(--grad-fill);border-color:transparent;box-shadow:var(--sh-ac)}
.ap-puce small{font-family:var(--fm);font-size:10.5px;opacity:.8;margin-left:6px}
.ap-voix{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.ap-voie{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:center;padding:12px 14px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--panel)}
.ap-voie.on{border-color:var(--accent-line);background:color-mix(in srgb,var(--accent-soft) 60%,var(--panel))}
.ap-voie .ap-sw{grid-row:1/span 2;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--bg-2);color:var(--muted);display:grid;place-items:center;cursor:pointer;font:inherit}
.ap-voie.on .ap-sw{background:var(--grad-fill);color:var(--on-accent);border-color:transparent}
.ap-voie .ap-sw svg{width:16px;height:16px;fill:currentColor}
.ap-voie b{font-weight:500;font-size:14px}
.ap-voie input[type=range]{width:100%;accent-color:var(--accent);height:22px;margin:0}
.ap-note{margin:12px 0 0;font-size:12px;color:var(--faint);font-family:var(--fm)}
.ap-zone{margin-top:14px;padding:26px;border:1px dashed var(--line-strong);border-radius:var(--r-lg);text-align:center;color:var(--muted);font-size:14px;background:color-mix(in srgb,var(--panel) 60%,transparent)}
.ap-zone.sur{border-color:var(--accent);color:var(--text);background:var(--accent-soft)}
.ap-zone input{display:none}
.ap-zone .btn{margin-top:12px}
.ap-vide-doux{padding:28px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--r-lg);font-size:14px}
.ap-form{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 16px}
.ap-form input{flex:1;min-width:200px;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:var(--inset);color:var(--text);font:inherit;font-size:14px}
.ap-form input:focus{outline:none;border-color:var(--accent)}
.ap-bandeau{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-radius:var(--r-lg);margin-bottom:14px;color:var(--on-accent);background:var(--grad-fill);box-shadow:var(--sh-ac)}
.ap-bandeau b{font-weight:600}
.ap-bandeau .btn{margin-left:auto}
.ap-lien{display:flex;gap:8px;align-items:center;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--inset);font-family:var(--fm);font-size:12px;color:var(--muted);overflow:hidden}
.ap-lien code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}

/* — la scène « En cours », à droite — */
.ap-scene{grid-row:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;padding:58px 24px 96px;  /* de l'air au-dessus de la pochette : le halo sonore s'y déploie */border-left:1px solid var(--line);overflow:auto;
  background:color-mix(in srgb,var(--bg-1) 55%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.ap-visu{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.9;z-index:0}
.ap-scene > *:not(.ap-visu){position:relative;z-index:1}
.ap-poch-g{width:min(100%,260px);aspect-ratio:1;border-radius:22px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);position:relative}
.ap-poch-g svg{width:100%;height:100%;display:block}
.ap-poch-g::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.ap-meta{text-align:center;min-width:0;width:100%}
.ap-meta .ap-tt{margin:0;font-family:var(--fd);font-weight:600;font-size:22px;letter-spacing:-.02em;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-meta .ap-by{margin:4px 0 0;color:var(--muted);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-meta .ap-np{margin:6px 0 0;font-family:var(--fm);font-size:11.5px;color:var(--accent);min-height:1.2em}
.ap-meta .ap-licence{display:inline-flex;gap:6px;align-items:center;margin-top:10px;font-family:var(--fm);font-size:11px;color:var(--faint);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.ap-meta .ap-licence:hover{color:var(--text);border-color:var(--line-strong)}
.ap-cmd{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:4px}
.ap-rond{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--text);display:grid;place-items:center;cursor:pointer;font:inherit;transition:border-color .2s,background .2s,color .2s}
.ap-rond svg{width:18px;height:18px;fill:currentColor}
.ap-rond.trait svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ap-rond:hover{border-color:var(--line-strong);background:var(--panel-2)}
.ap-rond.on{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}
/* le grand bouton : fond de marque + contour de lumière qui tourne (le geste du dock d'assistance) */
.ap-grand{position:relative;width:68px;height:68px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;color:var(--on-accent);background:var(--grad-fill);box-shadow:var(--sh-ac);isolation:isolate}
.ap-grand svg{width:28px;height:28px;fill:currentColor;transform:translateX(2px)}
.ap-grand.pause svg{transform:none}
.ap-grand::before{content:"";position:absolute;inset:-5px;border-radius:50%;z-index:-1;
  background:conic-gradient(from 0deg,transparent 0 58%,rgba(255,255,255,.75) 72%,transparent 86%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  animation:ap-tour 5s linear infinite;opacity:0;transition:opacity .4s}
.ap.joue .ap-grand::before{opacity:1}
.ap-grand:hover{filter:brightness(1.06)}
@keyframes ap-tour{to{transform:rotate(1turn)}}
.ap-scene .ap-extra{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

/* — transport (bas, toute la largeur) — */
.ap-transport{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:minmax(180px,1fr) minmax(0,400px) minmax(180px,1fr);align-items:center;gap:16px;padding:10px 20px;border-top:1px solid var(--line);
  background:color-mix(in srgb,var(--bg-1) 88%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.ap-tr-now{display:flex;align-items:center;gap:12px;min-width:0}
.ap-tr-now .ap-poch{width:48px;height:48px;border-radius:10px;overflow:hidden;flex:0 0 auto}
.ap-tr-now .ap-poch svg{width:100%;height:100%;display:block}
.ap-tr-now b{display:block;font-weight:500;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-tr-now span{display:block;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-tr-mid{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;min-width:0}  /* la barre d'écoute prend toute la colonne, bien plus large que les boutons */
.ap-tr-btns{display:flex;align-items:center;gap:12px}
.ap-tr-btns .ap-rond{width:36px;height:36px}
.ap-tr-btns .ap-rond svg{width:15px;height:15px}
.ap-tr-btns .ap-jouer{width:44px;height:44px;border:0;color:var(--on-accent);background:var(--grad-fill);box-shadow:var(--sh-ac)}
.ap-tr-btns .ap-jouer svg{width:18px;height:18px;transform:translateX(1px)}
.ap-tr-btns .ap-jouer.pause svg{transform:none}
.ap-seek{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;font-family:var(--fm);font-size:11.5px;color:var(--muted)}
.ap-seek input[type=range]{width:100%;height:22px;margin:0;accent-color:var(--accent);cursor:pointer}
.ap-seek input:disabled{opacity:.35;cursor:default}
.ap-tr-droite{position:fixed;right:18px;bottom:104px;z-index:72;display:flex;align-items:center;gap:8px;padding:8px 14px 8px 12px;border-radius:999px;border:1px solid var(--glass-border);background:var(--glass-solid);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--sh-2)}
.ap-vol{display:flex;align-items:center;gap:8px;color:var(--muted)}
.ap-vol svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ap-vol input[type=range]{width:110px;height:20px;margin:0;accent-color:var(--accent)}

/* — tiroir « file d'attente » — */
.ap-tiroir{position:absolute;right:0;top:0;bottom:0;width:min(380px,100%);z-index:5;display:flex;flex-direction:column;border-left:1px solid var(--line);background:var(--glass-solid);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.ap-tiroir.ouvert{transform:none}
.ap-tiroir-h{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 10px}
.ap-tiroir-h h2{margin:0;font-family:var(--fd);font-weight:500;font-size:18px}
.ap-tiroir .ap-table{margin:0 12px 12px;overflow:auto;flex:1}
.ap-tiroir .ap-ligne{grid-template-columns:36px minmax(0,1fr)}

/* — entrée en scène, mouvement coupé si demandé — */
@media (prefers-reduced-motion:no-preference){
  .ap-sec{animation:ap-in .5s cubic-bezier(.2,.7,.2,1) both}
  .ap-sec:nth-child(2){animation-delay:.06s}.ap-sec:nth-child(3){animation-delay:.12s}.ap-sec:nth-child(4){animation-delay:.18s}
}
@media (prefers-reduced-motion:reduce){.ap-grand::before{animation:none}}
@keyframes ap-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* — écrans moyens et petits — */
@media (max-width:1180px){
  .ap{grid-template-columns:200px minmax(0,1fr)}
  .ap-scene{display:none}
}
@media (max-width:820px){
  .ap{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;height:auto;min-height:calc(100vh - var(--nav-h,64px))}
  html.amb-page body{overflow:auto}
  .ap-rail{grid-row:1;flex-direction:row;align-items:center;gap:4px;padding:10px 12px;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
  .ap-rail::-webkit-scrollbar{display:none}
  .ap-rail h2,.ap-rail .ap-liste-mini{display:none}
  .ap-nav{width:auto;white-space:nowrap;padding:8px 12px;border-radius:999px}
  .ap-nav i{display:none}
  .ap-main{grid-row:2}
  .ap-top{padding:12px 16px 6px}
  .ap-contenu{padding:6px 16px 120px;overflow:visible}
  .ap-transport{position:fixed;left:0;right:0;bottom:0;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:8px 12px}
  .ap-tr-mid{min-width:0;align-items:flex-end}
  .ap-seek{display:none}
  .ap-tr-droite{display:none}
  .ap-tiroir{position:fixed;top:auto;height:70vh;width:100%;border-left:0;border-top:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0;transform:translateY(100%)}
  .ap-tiroir.ouvert{transform:none}
}

/* — menu « Ajouter à… » — */
.ap-pop{position:fixed;z-index:80;width:280px;padding:8px;border-radius:14px;border:1px solid var(--glass-border);background:var(--glass-solid);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--sh-2)}
.ap-pop-t{font-family:var(--fm);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding:6px 8px 8px}
.ap-pop-i{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:10px;background:none;color:var(--text);font:inherit;font-size:13.5px;cursor:pointer;text-align:left}
.ap-pop-i:hover{background:var(--inset)}
.ap-pop-i.on{color:var(--accent)}
.ap-pop-i i{font-style:normal;font-family:var(--fm);font-size:11px;color:var(--faint)}
.ap-pop-f{display:flex;gap:6px;margin-top:6px;padding-top:8px;border-top:1px solid var(--line)}
.ap-pop-f input{flex:1;min-width:0;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--inset);color:var(--text);font:inherit;font-size:13px}
.ap-pop-f input:focus{outline:none;border-color:var(--accent)}
.ap-pop-f .btn{padding:8px 12px;font-size:13px}
/* — la page d'une liste — */
.ap-detail-h{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:end;margin:10px 0 6px}
.ap-detail-h .ap-poch{width:min(38vw,200px);aspect-ratio:1;border-radius:18px;overflow:hidden;box-shadow:0 24px 50px -30px rgba(0,0,0,.6)}
.ap-detail-h .ap-poch svg{width:100%;height:100%;display:block}
.ap-eyebrow{font-family:var(--fm);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.ap-detail-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ap-detail-acts .btn{font-size:13.5px;padding:9px 14px}
.ap-detail-acts .btn svg{width:15px;height:15px}
.ap-detail-acts .btn:disabled{opacity:.5;cursor:default;transform:none}
.ap-renomme{font:inherit;font-family:var(--fd);font-weight:500;font-size:clamp(28px,3.2vw,40px);letter-spacing:-.02em;width:100%;padding:0 6px;margin:8px 0 2px;border:0;border-bottom:2px solid var(--accent);background:none;color:var(--text);outline:none}
.ap-select{padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:var(--inset);color:var(--text);font:inherit;font-size:14px}
.ap-ico:disabled{opacity:.3;cursor:default}
/* — mes liens — */
.ap-partage{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);margin-bottom:10px}
.ap-partage .ap-lien{grid-column:1/-1}
.ap-partage-t b{display:block;font-weight:600}
.ap-partage-t span{font-size:12.5px;color:var(--muted)}
.ap-partage-a{display:flex;gap:8px}
.ap-partage-a .btn{font-size:13px;padding:8px 12px}
.ap-partage.fini{opacity:.6}
.ap-lien svg{width:15px;height:15px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ap-toast{position:fixed;left:50%;bottom:112px;transform:translateX(-50%);z-index:85;max-width:min(520px,92vw);padding:10px 16px;border-radius:999px;background:var(--glass-solid);border:1px solid var(--glass-border);color:var(--text);font-size:13px;box-shadow:var(--sh-2);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
.ap-toast[hidden]{display:none}
@media(max-width:600px){.ap-detail-h{grid-template-columns:1fr}.ap-detail-h .ap-poch{width:140px}.ap-partage{grid-template-columns:1fr}}

/* — page d'un artiste : retour discret — */
.ap-back{display:inline-flex;align-items:center;gap:6px;margin:6px 0 0;padding:0;border:0;background:none;color:var(--muted);font:inherit;font-size:13px;cursor:pointer}
.ap-back:hover{color:var(--text)}
.ap-detail-t .ap-back{margin:0 0 8px}