/* « Dans la pièce » — visualiseur Dolby Atmos interactif (piece.js) */
.piece-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; align-items: center; gap: 22px; padding: 30px 18px 14px; cursor: default;
  background: linear-gradient(to top, rgba(12,12,12,.94) 0%, rgba(12,12,12,.72) 55%, rgba(12,12,12,0) 100%);
}
.piece-bar .piece-ctrl { flex: 1; min-width: 0; }
.piece-bar .piece-mode { flex: none; }
.piece:not(.actif) .piece-bar { visibility: hidden; }
.piece-section { padding-top: 8px !important; padding-bottom: 36px; }      /* juste sous le titre de la page */
.piece-intro { max-width: 760px; margin: -12px 0 24px; font-size: 0.95rem; line-height: 1.6; color: var(--text-secondary); }
.piece {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); overflow: hidden;
  border-radius: 16px; border: 1px solid rgba(255,255,255,.14); background: var(--card);
}
.piece-stage {
  position: relative; aspect-ratio: 4 / 3; min-height: 300px; touch-action: pan-y; cursor: grab;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;   /* iPhone : un appui long ne sélectionne rien et ne bloque plus le geste suivant */
  background: radial-gradient(ellipse at 50% 46%, #18202a 0%, #0f1114 62%, #0c0c0c 100%);
}
.piece-stage.drag { cursor: grabbing; }
.piece-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.piece-go {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  border: 0; background: rgba(12,12,12,.42); color: var(--white); font-family: inherit; cursor: pointer; transition: background .25s;
}
.piece-go:hover { background: rgba(12,12,12,.3); }
.piece-go[hidden] { display: none; }
.piece-go-rond {
  width: 74px; height: 74px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--teal); color: var(--bg); box-shadow: 0 0 0 10px rgba(91,181,255,.14); transition: transform .2s;
}
.piece-go:hover .piece-go-rond { transform: scale(1.06); }
.piece-go-rond svg { width: 26px; height: 26px; margin-left: 4px; }
.piece-go-t { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; }
.piece-go-s { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 600; color: var(--teal); }   /* « Au casque » : bleu comme le bouton lecture (Gaidz, 12/10) */
.piece-go-s svg { width: 17px; height: 17px; flex: none; }
.piece-hint svg { width: 15px; height: 15px; flex: none; }
.piece-go.loading .piece-go-rond { animation: piece-pulse 1s ease-in-out infinite; }
@keyframes piece-pulse { 50% { transform: scale(.92); opacity: .7; } }
.piece-drag {
  position: absolute; left: 0; right: 0; top: 14px; z-index: 1; text-align: center; pointer-events: none;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,.55);
}
@media (max-width: 560px) {                                     /* petit écran : l'indication passe à gauche, les 3 boutons gardent le coin droit */
  .piece-drag { text-align: left; padding-left: 14px; letter-spacing: 0.1em; }
}
@media (max-width: 359px) { .piece.actif .piece-drag { display: none; } }   /* très petit écran : pendant la lecture, place aux boutons */
.piece-ctrl { display: flex; align-items: center; gap: 12px; }
.piece-play {
  width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid var(--border); background: rgba(255,255,255,.05);
  color: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .2s, color .2s;
}
.piece-play:hover { border-color: var(--teal); color: var(--teal); }
.piece-play svg { width: 18px; height: 18px; }
.piece-seek { flex: 1; min-width: 0; height: 22px; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.piece-seek::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(var(--teal), var(--teal)) 0 / var(--p, 0%) 100% no-repeat, rgba(255,255,255,.14); }
.piece-seek::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255,255,255,.14); }
.piece-seek::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--teal); }
.piece-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--white); border: 0; }
.piece-seek::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--white); border: 0; }
.piece-t { font-size: 0.72rem; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.piece-mode { display: flex; align-items: center; gap: 12px; }
.piece-l { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); transition: color .1s; user-select: none; cursor: pointer; }
.piece-l.lit { color: var(--white); }
.piece-l.lit-teal { color: var(--teal); }
.piece-sw { position: relative; width: 46px; height: 24px; flex: none; cursor: pointer; }
.piece-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.piece-sw span { position: absolute; inset: 0; border-radius: 12px; background: rgba(255,255,255,.07); border: 1px solid var(--border); transition: background .12s, border-color .12s; }
.piece-sw span::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform .12s cubic-bezier(.4,0,.2,1), background .12s; }
.piece-sw input:checked + span { background: rgba(91,181,255,.12); border-color: rgba(91,181,255,.35); }
.piece-sw input:checked + span::after { transform: translateX(22px); background: var(--teal); }
.piece-sw input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }
.piece-hint { display: flex; align-items: center; gap: 7px; font-size: 0.74rem; color: var(--teal); }
@media (max-width: 860px) {
  .piece { grid-template-columns: minmax(0, 1fr); }
  .piece-stage { aspect-ratio: 4 / 5; min-height: 0; }
  .piece-bar { flex-direction: column; align-items: stretch; gap: 10px; padding: 34px 14px 12px; }
  .piece-bar .piece-mode { justify-content: center; }
}
/* Colonne d'infos : mêmes styles que les cartes « coups de cœur » */
.piece-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 14px 14px 16px; border-left: 1px solid var(--border); }
.piece-side .rel-cover { border-radius: 10px; box-shadow: 0 14px 34px rgba(0,0,0,.45); flex: none; }
.piece-side .rel-cover img[hidden] { display: none; }
.piece-side .feat-body { padding: 0 4px; }
.piece-side .feat-title { min-height: 0; }
.piece-side .rel-meta { white-space: normal; line-height: 1.7; }
.piece-side .rel-meta .sep { margin: 0 8px; color: #7a7a7a; }
.piece-side .rel-foot-row { flex-direction: row !important; align-items: center !important; }
.piece-side .rel-foot-row .rel-date { order: 0 !important; }
.piece-side .feat-foot { padding: 0 4px; }
.piece-side .rel-exc b { color: var(--white); font-weight: 700; }
.piece-side .piece-hint { font-size: 0.7rem; font-weight: 600; }   /* « Au casque uniquement » : demi-gras, même taille que le crédit (Gaidz, 12/10) */
.piece-side .rel-foot-row .rel-listen[hidden] { display: none; }
@media (max-width: 860px) {
  .piece-side { display: grid; grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: "cover body" "foot foot"; gap: 16px 14px; padding: 16px; border-left: 0; border-top: 1px solid var(--border); }
  .piece-side .rel-cover { grid-area: cover; }
  .piece-side .feat-body { grid-area: body; align-self: center; padding: 0; }
  .piece-side .feat-title { min-height: 0; }
  .piece-side .feat-foot { grid-area: foot; padding: 0; }
}
@media (min-width: 861px) {                                     /* la pièce occupe toute la hauteur de la colonne d'infos */
  .piece-stage { aspect-ratio: auto; min-height: 440px; height: 100%; }
}
/* Bouton rotation automatique (en haut à droite de la pièce, à gauche du bouton casquette) */
.piece-auto {
  position: absolute; top: 10px; right: 96px; z-index: 2; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid rgba(91,181,255,.45); background: rgba(12,12,12,.55); color: var(--teal); transition: color .2s, border-color .2s, opacity .2s;
}
.piece-auto svg { width: 16px; height: 16px; }
.piece-auto[aria-pressed="false"] { color: var(--muted); border-color: var(--border); opacity: .7; }
.piece-auto:hover { opacity: 1; border-color: var(--teal); }
.piece:not(.actif) .piece-auto { display: none; }
/* Bouton casquette (ajouté par piece.js) : smiley éteint (gris) sans casquette, bleu avec — comme la rotation automatique */
.piece-tete {
  position: absolute; top: 10px; right: 54px; z-index: 3; width: 34px; height: 34px; padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid rgba(91,181,255,.45); background: rgba(12,12,12,.55); color: var(--teal); transition: color .2s, border-color .2s, opacity .2s;
}
.piece-tete[aria-pressed="false"] { color: var(--muted); border-color: var(--border); opacity: .7; }
.piece-tete:hover { opacity: 1; border-color: var(--teal); }
.piece-tete svg { width: 32px; height: 32px; }   /* le smiley occupe tout le rond : le bord du bouton est le contour du visage */
.piece:not(.actif) .piece-tete { display: none; }   /* avant la lecture, la tête est cachée sous le bouton Écouter */
/* Bouton plein écran (tout à droite) et pièce agrandie */
.piece-plein {
  position: absolute; top: 10px; right: 12px; z-index: 3; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid var(--border); background: rgba(12,12,12,.55); color: var(--text); opacity: .8; transition: color .2s, border-color .2s, opacity .2s;
}
.piece-plein:hover { opacity: 1; border-color: var(--teal); color: var(--teal); }
.piece-plein svg { width: 16px; height: 16px; }
.piece-plein .ico-fermer, .piece.plein .piece-plein .ico-ouvrir { display: none; }
.piece.plein .piece-plein .ico-fermer { display: block; }
.piece:fullscreen, .piece.plein-css { display: block; width: 100%; height: 100%; border: 0; border-radius: 0; background: #0c0c0c; }
.piece:-webkit-full-screen { display: block; width: 100%; height: 100%; border: 0; border-radius: 0; background: #0c0c0c; }
.piece.plein-css { position: fixed; inset: 0; z-index: 10000; height: 100vh; height: 100dvh; }
.piece:fullscreen .piece-side, .piece.plein-css .piece-side { display: none; }
.piece:-webkit-full-screen .piece-side { display: none; }
.piece:fullscreen .piece-stage, .piece.plein-css .piece-stage { aspect-ratio: auto; min-height: 0; height: 100%; }
.piece.plein .piece-stage { touch-action: none; }   /* plein écran : plus de page à faire défiler, le doigt fait tourner la pièce dans tous les sens */
.piece:-webkit-full-screen .piece-stage { aspect-ratio: auto; min-height: 0; height: 100%; }
html.piece-plein-ouvert, html.piece-plein-ouvert body { overflow: hidden; }