/* Carrousel de disques en cascade. Chargé uniquement par la page discographie. */
.dcc-root{
  position:relative;overflow:hidden;width:100%;
  height:clamp(460px,78svh,720px);
  background:radial-gradient(120% 90% at 50% 38%,#1f242b,#0b0d10);
  color:#ecebe7;
  container-type:inline-size;
  user-select:none;-webkit-user-select:none;touch-action:pan-y;
  outline:none;-webkit-tap-highlight-color:transparent;
  --dcc-pad:clamp(16px,3.6cqw,44px);
  --dcc-s:clamp(170px,min(46vmin,38cqw),400px);
  --dcc-sheen:.6;
}
.dcc-root:focus-visible{box-shadow:inset 0 0 0 2px var(--ochre-soft)}
.dcc-root[data-dragging],.dcc-root[data-dragging] .dcc-slide{cursor:grabbing}
.dcc-frame{position:absolute;inset:calc(var(--dcc-pad) * .45);pointer-events:none;z-index:1;
  border:1px solid rgba(255,255,255,.14)}

.dcc-stage{position:absolute;left:50%;top:52%;width:var(--dcc-s);aspect-ratio:1/1;
  transform:translate(-50%,-50%);perspective:calc(var(--dcc-s) * 3.2)}

/* Sans JavaScript : les disques restent alignés et lisibles, sans superposition. */
.dcc-root:not([data-ready]) .dcc-stage{position:static;width:auto;transform:none;
  display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;padding:var(--dcc-pad)}
.dcc-root:not([data-ready]) .dcc-slide{position:relative;width:min(var(--dcc-s),34cqw);aspect-ratio:1/1;inset:auto}
.dcc-root:not([data-ready]){height:auto;padding-bottom:2rem}

.dcc-slide{position:absolute;inset:0;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;
  border-radius:50%;cursor:pointer;will-change:transform;transform-style:preserve-3d;outline:none;
  -webkit-tap-highlight-color:transparent}
.dcc-tilt{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.dcc-slide[data-active] .dcc-tilt{transform:translateZ(var(--dcc-lift,0px))
  rotateX(calc(var(--dcc-py,0) * -12deg)) rotateY(calc(var(--dcc-px,0) * 12deg))}
.dcc-slide[data-active]:hover{--dcc-lift:calc(var(--dcc-s) * .05)}

.dcc-shade{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  transform:translate3d(0,7%,-18px) scale(.97);
  background:radial-gradient(circle closest-side,transparent 30%,rgba(0,0,0,.2) 52%,rgba(0,0,0,.1) 80%,transparent 100%)}
.dcc-edge,.dcc-disc{position:absolute;inset:0;border-radius:50%;
  -webkit-mask:radial-gradient(circle closest-side,transparent 16.6%,#000 17.1%);
  mask:radial-gradient(circle closest-side,transparent 16.6%,#000 17.1%)}
.dcc-edge{transform:translateZ(-4px);background:linear-gradient(160deg,#d7d9dc,#8d9196 55%,#c4c7cb)}
.dcc-disc{overflow:hidden;background:#cfd2d6;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 0 0 2px rgba(0,0,0,.08)}
.dcc-roll,.dcc-idle{position:absolute;inset:0;border-radius:50%}
.dcc-roll{transform:rotate(var(--dcc-roll,0deg))}
.dcc-root[data-ready] .dcc-idle{animation:dcc-spin 24s linear infinite;animation-play-state:paused}
.dcc-root[data-ready] .dcc-slide[data-active] .dcc-idle{animation-play-state:running}
.dcc-root[data-dragging] .dcc-idle{animation-play-state:paused!important}
@keyframes dcc-spin{to{transform:rotate(1turn)}}
.dcc-idle>img{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block;object-fit:cover}
.dcc-idle>svg,.dcc-hub{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block;overflow:visible}
.dcc-hub{pointer-events:none}
.dcc-sheen{position:absolute;inset:0;border-radius:50%;pointer-events:none;mix-blend-mode:screen;opacity:var(--dcc-sheen);
  background:conic-gradient(from calc(var(--dcc-glint,0deg) + var(--dcc-px,0) * 70deg),
  transparent 0deg,rgba(255,255,255,.5) 16deg,transparent 38deg,transparent 140deg,
  rgba(150,215,255,.32) 168deg,rgba(255,170,225,.32) 186deg,rgba(255,236,170,.26) 200deg,transparent 224deg,transparent 360deg),
  radial-gradient(circle at 32% 24%,rgba(255,255,255,.3),transparent 46%)}
.dcc-slide:focus-visible .dcc-disc{box-shadow:inset 0 0 0 3px #0b0d10,inset 0 0 0 6px var(--ochre-soft)}

/* Bloc éditorial à gauche */
.dcc-head{position:absolute;top:var(--dcc-pad);left:var(--dcc-pad);z-index:4;
  width:clamp(170px,23cqw,300px);pointer-events:none}
.dcc-panel[hidden]{display:none}
.dcc-kicker{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ochre-soft);
  font-weight:700;margin:0 0 .5rem}
.dcc-title{margin:0 0 .7rem;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.2rem,2.6cqw,2rem);line-height:1;letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance}
.dcc-dl{margin:0}
.dcc-row{display:flex;justify-content:space-between;gap:12px;padding:5px 0 6px;
  border-top:1px solid rgba(255,255,255,.4)}
.dcc-row dt{font-size:.47rem;line-height:1.5;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.dcc-row dd{margin:0;font-size:.66rem;line-height:1.25;text-align:right}
.dcc-anim>*{animation:dcc-in .8s cubic-bezier(.2,.7,.1,1) both}
.dcc-anim>*:nth-child(2){animation-delay:60ms}
.dcc-anim>*:nth-child(3){animation-delay:120ms}
@keyframes dcc-in{from{opacity:0;transform:translateY(12px);filter:blur(5px)}}

/* Citation en bas */
.dcc-note{position:absolute;bottom:calc(var(--dcc-pad) * 1.1);left:50%;transform:translateX(-50%);z-index:4;
  width:clamp(200px,34cqw,440px);text-align:center;pointer-events:none}
.dcc-src{font-size:.42rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:.35rem;opacity:.75}
/* La feuille principale habille les citations d'un cartouche crème ; ici il
   faut du texte nu sur fond sombre, d'où cette remise à zéro. */
.dcc-root blockquote.dcc-quote{margin:0;padding:0;background:none;border:0;border-radius:0;
  font-family:var(--font-display);font-style:normal;font-weight:600;color:inherit;
  font-size:clamp(.8rem,1.5cqw,1.05rem);line-height:1.15;text-transform:uppercase;text-wrap:balance}
.dcc-root blockquote.dcc-quote p{margin:0}

/* Commandes */
.dcc-ctl{position:absolute;right:var(--dcc-pad);bottom:var(--dcc-pad);z-index:5;display:flex;align-items:center;gap:10px}
.dcc-btn{display:grid;place-items:center;width:34px;height:34px;margin:0;padding:0;border-radius:999px;
  border:1px solid rgba(255,255,255,.28);background:none;color:inherit;cursor:pointer;
  transition:background .2s,opacity .2s,transform .2s}
.dcc-btn:hover:not(:disabled){background:rgba(255,255,255,.1)}
.dcc-btn:active:not(:disabled){transform:scale(.9)}
.dcc-btn:disabled{opacity:.28;cursor:default}
.dcc-btn:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.dcc-count{font-size:.68rem;letter-spacing:.08em;font-variant-numeric:tabular-nums;min-width:52px;text-align:center}
.dcc-count b{font-weight:600}
.dcc-hint{position:absolute;left:var(--dcc-pad);bottom:var(--dcc-pad);z-index:4;font-size:.55rem;letter-spacing:.18em;
  text-transform:uppercase;opacity:.45;pointer-events:none;line-height:34px}
.dcc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Repli sans JavaScript : les commandes ne servent à rien, on les cache. */
.dcc-root:not([data-ready]) .dcc-ctl,
.dcc-root:not([data-ready]) .dcc-hint,
.dcc-root:not([data-ready]) .dcc-head,
.dcc-root:not([data-ready]) .dcc-note,
.dcc-root:not([data-ready]) .dcc-frame{display:none}

@container (max-width:720px){
  .dcc-head{width:clamp(150px,46cqw,240px);top:calc(var(--dcc-pad) * .8)}
  .dcc-row:nth-child(n+4){display:none}
  .dcc-hint{display:none}
  .dcc-note{bottom:calc(var(--dcc-pad) * 3.6);width:min(84cqw,420px)}
}
@media (prefers-reduced-motion:reduce){
  .dcc-root .dcc-idle{animation:none}
  .dcc-anim>*{animation:none}
  .dcc-tilt,.dcc-btn{transition:none}
}