/* Habillage hors ligne Twitch, basé sur la maquette V5 validée le 25/10/2026.
   Le lecteur Twitch reste intact en mode live. Polices provisoires. */
.player-shell.twitch-player:not([data-mode="live"]) {
  aspect-ratio: 853 / 480;
  min-height: 0;
}
.twitch-offline-panel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
}
.twitch-offline-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}
.twitch-offline-panel::after {
  content: '';
  display: block;
  position: absolute;
  inset: 10% 27% 17% 35%;
  z-index: 1;
  background: radial-gradient(ellipse,rgba(5,8,23,.3),rgba(5,8,23,.1) 55%,transparent 75%);
  pointer-events: none;
}
.twitch-neon-message {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.twitch-neon-title {
  position: absolute;
  left: 51.5%;
  top: 40.5%;
  margin: 0;
  color: #124e9b;
  font-family: 'Bungee Inline', Impact, 'Arial Black', sans-serif;
  text-transform: uppercase;
  font-size: 7.6cqw;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.012em;
  white-space: nowrap;
  transform: translate(-50%,-50%) scaleX(.9);
  transform-origin: center;
  filter: drop-shadow(0 0 12px rgba(0,170,255,.55));
}
.twitch-neon-title .letter {
  display: inline-block;
  white-space: pre;
  -webkit-text-stroke: 1px #effbff;
  text-shadow: 0 0 2px #fff,0 0 6px #22c8ff,0 0 12px #0097ff,0 0 23px #0089ff,0 0 40px #0570d2;
}
.twitch-neon-subtitle {
  position: absolute;
  left: 65%;
  top: 66%;
  margin: 0;
  font-family: 'Great Vibes', 'Lobster Two', 'Brush Script MT', cursive;
  font-size: 5.5cqw;
  font-weight: 400;
  line-height: 1.08;
  white-space: nowrap;
  color: #ffe8ff;
  text-shadow: 0 0 2px #fff,0 0 6px #fa64ff,0 0 13px #d52aff,0 0 25px #b91aff,0 0 42px #9c13ff;
  transform: translate(-50%,-50%) rotate(-7deg) scaleX(.96);
}
.twitch-neon-title .letter.flicker {
  animation: deadelus-electric-buzz .64s steps(1,end) both;
}
@keyframes deadelus-electric-buzz {
  0%,14%,22%,39%,52%,61%,79%,100% { opacity: 1; }
  8%,17%,45%,56%,70% {
    opacity: .08;
    text-shadow: none;
    -webkit-text-stroke-color: #39618c;
  }
  10%,20%,48%,58%,72% { opacity: .38; text-shadow: 0 0 2px #2ca8ff; }
}
/* En cours de vérification ou statut incertain, ne pas annoncer « HORS LIGNE ». */
.twitch-offline-copy {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px;
  text-align: center;
  background: rgba(3,4,9,.72);
}
.twitch-offline-copy .twitch-offline-title { text-align: center; }
.twitch-offline-copy p { text-align: center; }
.twitch-offline-copy .twitch-offline-actions { justify-content: center; }
@media (max-width: 600px) {
  .player-shell.twitch-player:not([data-mode="live"]) { aspect-ratio: 853 / 480; }
  .twitch-offline-panel { position: absolute; }
  .twitch-offline-image { position: absolute; height: 100%; }
  .twitch-offline-copy { position: absolute; inset: 0; padding: 10px; gap: 5px; }
  .twitch-offline-copy .twitch-offline-badge { font-size: 9px; }
  .twitch-offline-copy .twitch-offline-title { font-size: clamp(13px,4vw,25px); }
  .twitch-offline-copy p { font-size: clamp(9px,2.7vw,12px); }
  .twitch-offline-actions .btn { min-height: 32px; padding: 5px 8px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .twitch-neon-title .letter.flicker { animation: none; }
}