/* Style « magazine » des players (essai). S'ajoute par-dessus player.css : il suffit de
   retirer cette feuille et mag.js d'une page pour retrouver le player habituel. */

body.mag { --shadow: #000; }

/* Le nom de l'artiste en fond est remplacé par les bandes de texte */
body.mag .bg-artist { display: none; }

.mag-bands {
  position: fixed; inset: -12vh -12vw; z-index: 0; pointer-events: none; overflow: hidden;
  display: grid; align-content: center; transform: rotate(-6deg);
  opacity: 0; transition: opacity 1.2s ease;
}
.mag-bands.is-on { opacity: 1; }
.mag-band { white-space: nowrap; font-family: var(--display); font-weight: 900; font-size: clamp(4rem, 14vh, 11rem); line-height: 1.02; letter-spacing: -.03em; text-transform: uppercase; }
.mag-band span { display: inline-block; animation: mag-scroll var(--d, 50s) linear infinite; }
.mag-band.is-fill { color: rgba(255, 255, 255, .085); }
.mag-band.is-line { color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .2); }
.mag-band.is-rev span { animation-direction: reverse; }
@keyframes mag-scroll { to { transform: translateX(-50%); } }

/* Pochette : carrée, bords arrondis, ombre noire décalée façon affiche */
body.mag .cover { border-radius: 22px; box-shadow: 16px 16px 0 var(--shadow); z-index: 1; }
body.mag .cover::before { display: none; }
body.mag .cover-img { animation: mag-zoom 16s ease-in-out infinite alternate; }
@keyframes mag-zoom { to { transform: scale(1.08); } }

/* Étiquette « En direct » au-dessus du titre */
.mag-labels { display: flex; flex-wrap: wrap; gap: 10px; }
.mag-lab {
  font-family: var(--display); font-weight: 800; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
  padding: 8px 12px; border-radius: 6px; background: #000; color: #fff; transform: rotate(-3deg);
}
.mag-lab::before { content: "● "; color: #ff3b3b; }
.mag-lab.is-drop { animation: mag-drop .7s cubic-bezier(.2, .8, .2, 1); }
@keyframes mag-drop { from { opacity: 0; transform: translateY(-36px) rotate(-20deg) scale(.6); } 60% { transform: translateY(4px) rotate(-3deg); } }

/* Titre : majuscules géantes, taille ajustée par mag.js pour que chaque mot tienne en entier */
body.mag .title {
  font-family: var(--display); font-weight: 900; font-stretch: normal; font-variation-settings: normal;
  text-transform: uppercase; letter-spacing: -.04em; line-height: .95;
  font-size: var(--mag-fs, clamp(2rem, 7vw, 4.6rem));
  overflow-wrap: normal; word-break: normal; hyphens: none;
  display: block; -webkit-line-clamp: unset; overflow: visible; text-wrap: balance;
}
body.mag .title.is-long { font-size: var(--mag-fs, clamp(1.6rem, 5vw, 3rem)); line-height: .98; }
.mag-w { display: inline-block; }
.mag-w.is-in { animation: mag-word .75s cubic-bezier(.2, .9, .25, 1.15) both; }
@keyframes mag-word { from { opacity: 0; transform: translateY(.55em) rotate(4deg) scale(.9); filter: blur(6px); } }
.mag-w.is-out { animation: mag-wout .35s ease-in both; }
@keyframes mag-wout { to { opacity: 0; transform: translateY(-.4em) scale(.96); filter: blur(6px); } }

/* Artiste : bandeau noir de travers */
body.mag .artist {
  justify-self: start; margin: 0; padding: 4px 12px; background: #000; color: #fff; font-weight: 600;
  transform: rotate(-1.5deg); width: fit-content; max-width: 100%;
}
body.mag .artist.is-slap:not(.has-chips) { animation: mag-slap .6s .25s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes mag-slap { from { opacity: 0; transform: scale(1.5) rotate(-9deg); } }

/* Encart de l'émission : un tampon */
body.mag .show { border: 2px solid #fff; border-radius: 6px; background: var(--brand); transform: rotate(1.5deg); box-shadow: 5px 5px 0 var(--shadow); }

/* Likes : des étiquettes */
body.mag .vote { border: 2px solid #fff; border-radius: 8px; background: transparent; font-weight: 700; box-shadow: 4px 4px 0 var(--shadow); }
body.mag .vote-up { transform: rotate(-2deg); }
body.mag .vote-down { transform: rotate(2deg); }
body.mag .vote[aria-pressed="true"] { background: #fff; color: var(--brand); }

/* Progression : barre rayée qui défile */
body.mag .progress { color: rgba(255, 255, 255, .8); font-weight: 600; }
body.mag .bar { height: 12px; border: 2px solid #fff; border-radius: 99px; background: transparent; }
body.mag .bar span { background: repeating-linear-gradient(-45deg, #fff 0 7px, rgba(255, 255, 255, .6) 7px 14px); background-size: 20px 20px; animation: mag-stripes 1s linear infinite; }
@keyframes mag-stripes { to { background-position: 20px 0; } }

/* Bouton lecture : pilule noire « ÉCOUTER », ombre blanche */
body.mag .play {
  width: auto; height: auto; padding: 8px 26px 8px 8px; gap: 14px;
  display: inline-flex; align-items: center; border-radius: 999px;
  background: #000; color: #fff; box-shadow: 6px 6px 0 #fff;
  font-family: var(--display); font-weight: 800; font-size: 1rem; text-transform: uppercase;
  transition: transform .2s, box-shadow .2s;
}
body.mag .play:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 #fff; }
body.mag .play svg { width: 54px; height: 54px; padding: 15px; border-radius: 50%; background: #fff; fill: #000; margin: 0; }
body.mag .play .i-play { padding-left: 18px; }
body.mag .play::before { content: "Écouter"; order: 2; }
body.mag.is-playing .play::before { content: "Pause"; }
body.mag .play::after { inset: auto; left: 3px; top: calc(50% - 32px); width: 64px; height: 64px; border-width: 3px; border-top-color: #fff; }
body.mag.is-loading .play::after { animation: mag-load .9s linear infinite; }
body.mag.mag-dark .play::after { border-top-color: #000; }
@keyframes mag-load { to { transform: rotate(360deg); } }

/* Historique et autres radios : cartes à ombre décalée */
body.mag .tile { border: 2px solid rgba(255, 255, 255, .85); box-shadow: 6px 6px 0 var(--shadow); }
body.mag .tile:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--shadow); }
body.mag .history h2, body.mag .radios h2 { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }

/* Changement de radio : trois bandes balaient l'écran (départ : elles couvrent ; arrivée : elles se retirent) */
body.mag .curtain { display: none !important; }
.mag-wipe { position: fixed; inset: 0; z-index: 120; pointer-events: none; display: grid; grid-template-rows: repeat(3, 1fr); }
.mag-wipe i { display: block; transform: translateX(-101%); }
.mag-wipe i:nth-child(1) { background: #fff; }
.mag-wipe i:nth-child(2) { background: #000; }
.mag-wipe i:nth-child(3) { background: color-mix(in srgb, var(--brand) 65%, #fff); }
.mag-wipe.is-cover i { transform: none; }
.mag-wipe.is-closing i { animation: mag-close .6s cubic-bezier(.7, 0, .2, 1) both; }
.mag-wipe.is-opening i { animation: mag-open .7s cubic-bezier(.7, 0, .2, 1) both; }
.mag-wipe.is-closing i:nth-child(2), .mag-wipe.is-opening i:nth-child(2) { animation-delay: .07s; }
.mag-wipe.is-closing i:nth-child(3), .mag-wipe.is-opening i:nth-child(3) { animation-delay: .14s; }
@keyframes mag-close { from { transform: translateX(-101%); } to { transform: none; } }
@keyframes mag-open { from { transform: none; } to { transform: translateX(101%); } }

/* Les barres s'écartent de l'ombre décalée de la pochette */
body.mag .sleeve { margin-right: calc(var(--cover) * var(--bars-w) + 46px); }
body.mag .bars { left: calc(100% + 34px); top: calc(6% + 8px); height: 88%; }   /* centrées sur pochette + ombre */

/* Rien ne doit élargir la page au-delà de l'écran (sinon la droite est coupée) */
body.mag .page { grid-template-columns: minmax(0, 1fr); }
body.mag .page > * { min-width: 0; }
body.mag .now { grid-template-columns: minmax(0, 1fr); min-width: 0; }
body.mag .now > *, body.mag .stage > * { min-width: 0; max-width: 100%; }
@media (min-width: 900px) {
  body.mag { --cover: min(30vw, 430px); }
  body.mag .stage { grid-template-columns: auto minmax(0, 1fr); }
  body.mag .lower { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}

/* LS CLASSICS et LS OLDIES : un disque à moitié sorti de la pochette, à la place des barres */
body.mag.has-disc .bars { visibility: hidden; }

/* Le disque : l'ombre et les reflets restent fixes (comme sous une vraie lumière), seuls
   les sillons et l'étiquette tournent */
.mag-disc {
  position: absolute; z-index: 0; top: 4%; left: 30%; width: 92%; aspect-ratio: 1; border-radius: 50%;
  box-shadow: 12px 12px 0 var(--shadow), 0 20px 40px rgba(0, 0, 0, .45);
  transition: left 1s cubic-bezier(.3, .8, .2, 1);
}
body.is-playing .mag-disc { left: 50%; }
.mag-disc .spin { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; animation: mag-spin 1.8s linear infinite; animation-play-state: paused; }
body.is-playing .mag-disc .spin { animation-play-state: running; }
.mag-disc .shine { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.mag-disc img { position: absolute; left: 50%; top: 50%; width: 22%; transform: translate(-50%, -50%); opacity: .95; }
@keyframes mag-spin { to { rotate: 360deg; } }

/* Vinyle (LS OLDIES) */
.mag-disc.is-vinyl .spin {
  background:
    radial-gradient(circle, transparent 0 3%, var(--brand) 3.5% 16%, #0b0b0b 16.5% 17.5%, transparent 18%),
    conic-gradient(from 0deg, rgba(255,255,255,0) 0 6%, rgba(255,255,255,.07) 9%, rgba(255,255,255,0) 13% 31%, rgba(255,255,255,.05) 35%, rgba(255,255,255,0) 40% 58%, rgba(255,255,255,.08) 61%, rgba(255,255,255,0) 66% 83%, rgba(255,255,255,.05) 87%, rgba(255,255,255,0) 91%),
    radial-gradient(circle, transparent 0 41%, rgba(0,0,0,.55) 41.5% 42.5%, transparent 43% 63%, rgba(0,0,0,.5) 63.5% 64.5%, transparent 65%),
    repeating-radial-gradient(circle, #121212 0 1.3px, #1e1e1e 1.7px 2.8px);
}
.mag-disc.is-vinyl .shine { background: conic-gradient(from 20deg, transparent 0 18%, rgba(255, 255, 255, .14) 23%, transparent 28% 68%, rgba(255, 255, 255, .09) 73%, transparent 78%); }

/* CD (LS CLASSICS) : argenté, reflets irisés fixes, l'étiquette tourne */
.mag-disc.is-cd .spin {
  background:
    radial-gradient(circle, transparent 0 7%, rgba(255, 255, 255, .7) 7.5% 8.5%, #d9dce2 9% 15%, transparent 15.5%),
    radial-gradient(circle, transparent 0 34%, var(--brand) 34.5% 35.5%, transparent 36%),
    radial-gradient(circle, #e9ebf0 0 33%, #c9ccd4 70%, #b6bac3 100%);
}
.mag-disc.is-cd .label { position: absolute; inset: 15.5%; border-radius: 50%; background: radial-gradient(circle, transparent 0 22%, var(--brand) 22.5%); display: grid; place-items: center; }
.mag-disc.is-cd .label img { position: static; transform: none; width: 46%; }
.mag-disc.is-cd .shine {
  background:
    conic-gradient(from 200deg, rgba(255, 0, 128, .32), rgba(255, 200, 0, .3), rgba(0, 255, 160, .28), rgba(0, 160, 255, .32), rgba(170, 0, 255, .3), rgba(255, 0, 128, .32)),
    linear-gradient(135deg, rgba(255, 255, 255, .55), transparent 40%, transparent 60%, rgba(255, 255, 255, .35));
  -webkit-mask: radial-gradient(circle, transparent 0 34%, #000 35.5%); mask: radial-gradient(circle, transparent 0 34%, #000 35.5%);
  mix-blend-mode: overlay; opacity: .9;
}
.mag-disc.is-cd::after { content: ""; position: absolute; inset: 46%; border-radius: 50%; background: var(--brand); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); }

/* LS CLASSICS : afficheur de chaîne hi-fi des années 2000 (segments bleus lumineux, sans cadre)
   qui sort de derrière la pochette quand la radio joue */
body.mag.has-hifi .bars { visibility: hidden; }
.mag-hifi {
  position: absolute; z-index: 0; top: calc(6% + 8px); height: 88%; left: calc(100% + 34px); width: calc(var(--cover) * var(--bars-w));
  transform: translateX(calc(-100% - 40px)); opacity: 0;
  transition: transform 1s cubic-bezier(.3, .8, .2, 1), opacity .4s;
}
body.is-playing .mag-hifi { transform: none; opacity: 1; }
.mag-hifi canvas { width: 100%; height: 100%; display: block; }

/* Artistes : un bandeau par artiste */
body.mag .artist.has-chips { background: none; padding: 0; transform: none; display: flex; flex-wrap: wrap; gap: 8px; }
.mag-art { display: inline-block; padding: 4px 12px; background: #000; color: #fff; transform: rotate(-1.5deg); }
.mag-art:nth-child(2n) { transform: rotate(1.2deg); }
body.mag.mag-dark .mag-art { background: #fff; color: #000; }
body.mag .artist.is-slap .mag-art { animation: mag-slap .6s cubic-bezier(.2, .9, .3, 1.3) both; }
body.mag .artist.is-slap .mag-art:nth-child(2) { animation-delay: .12s; }
body.mag .artist.is-slap .mag-art:nth-child(3) { animation-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .mag-band span, body.mag .cover-img, body.mag .bar span { animation: none; }
  .mag-wipe, .mag-disc .spin { animation: none !important; }
  .mag-hifi { transition: none; }
}

@media (max-width: 480px) {
  body.mag .show { transform: rotate(1deg); margin-right: 6px; box-shadow: 4px 4px 0 var(--shadow); }
  body.mag .play { box-shadow: 5px 5px 0 #fff; }
}

@media (max-width: 899px) {
  body.is-playing .mag-disc { left: 22%; }
  .mag-disc { left: 12%; }
}

/* Radio à fond très sombre (LS RADIO) : le noir devient blanc pour rester visible */
body.mag.mag-dark { --shadow: rgba(255, 255, 255, .92); }
body.mag.mag-dark .artist, body.mag.mag-dark .mag-lab { background: #fff; color: #000; }
body.mag.mag-dark .play { background: #fff; color: #000; box-shadow: 6px 6px 0 rgba(255, 255, 255, .35); }
body.mag.mag-dark .play svg { background: #000; fill: #fff; }
body.mag.mag-dark .play:hover { box-shadow: 9px 9px 0 rgba(255, 255, 255, .35); }

body.mag.mag-dark .mag-wipe i:nth-child(3) { background: #555; }
body.mag.mag-dark .artist.has-chips { background: none; }
@media (max-width: 899px) { body.mag { --cover: min(calc((100vw - 92px) / 1.24), 420px); } }
@media (max-width: 899px) { .mag-hifi { left: calc(100% + 26px); } }