/*
 * soundplayer.css — Lecteur "tableau de bord TFT" (façon cluster moto)
 * Tout est scopé sous .exo-player pour ne pas impacter le thème.
 * Couleur d'accent : --exo-accent.
 */

/* ============================================================
   TITRE DE SECTION (sur la fiche produit, au-dessus du lecteur)
   ============================================================ */
.exo-section-title {
  display       : flex;
  align-items   : center;
  gap           : 9px;
  margin        : 0 0 14px;
  padding-bottom: 10px;
  border-bottom : 1px solid rgba(0, 0, 0, .12);
  font-size     : 1.25rem;
  font-weight   : 700;
  line-height   : 1.2;
  color         : inherit;
}

.exo-section-icon {
  width      : 22px;
  height     : 22px;
  flex-shrink: 0;
  fill       : #e2001a;
}

/* ============================================================
   CONTENEUR PRINCIPAL
   ============================================================ */
.exo-player {
  --exo-accent     : #ff0033;
  --exo-accent-soft: #ff1a40;
  --exo-grey       : #888;
  --exo-dgrey      : #444;

  position      : relative;
  width         : 100%;
  max-width     : 820px;
  margin        : 0 auto;
  padding       : clamp(28px, 5%, 42px) 14px 14px;
  overflow      : hidden;
  isolation     : isolate;
  container-type: inline-size;

  font-family  : 'Inter', -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  color        : #fff;
  background   : radial-gradient(circle at 50% 30%, #160007 0%, #050505 70%, #030303 100%);
  border       : 1px solid #1d1a20;
  border-radius: 16px;
  box-shadow   :
    0 4px 28px rgba(0, 0, 0, .6),
    inset 0 1px 0 rgba(255, 255, 255, .04);
  -webkit-user-select: none;
  user-select        : none;
}

.exo-player * { box-sizing: border-box; }

/* ---- Fond : faisceaux + vagues rouges ---- */
.exo-bg {
  position      : absolute;
  inset         : 0;
  z-index       : 0;
  pointer-events: none;
  overflow      : hidden;
}

.exo-light-beams {
  position: absolute;
  inset   : 0;
  background:
    radial-gradient(ellipse 80% 50% at -8% 50%, rgba(255, 0, 51, .16) 0%, transparent 60%),
    radial-gradient(ellipse 80% 50% at 108% 50%, rgba(255, 0, 51, .16) 0%, transparent 60%);
}

.exo-waves {
  position          : absolute;
  top               : 20%;
  left              : -10%;
  width             : 120%;
  height            : 60%;
  opacity           : .85;
  mix-blend-mode    : screen;
  background-repeat : no-repeat;
  background-position: center;
  background-size   : cover;
  background-image  :
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 300'%3E%3Cg fill='none' stroke='%23ff0033' stroke-linecap='round'%3E%3Cpath d='M0,150 C150,60 250,240 500,150 C750,60 850,240 1000,150' stroke-width='3' opacity='0.45'/%3E%3Cpath d='M0,120 C150,40 250,210 500,120 C750,40 850,210 1000,120' stroke-width='2' opacity='0.3'/%3E%3Cpath d='M0,185 C150,95 250,275 500,185 C750,95 850,275 1000,185' stroke-width='2' opacity='0.3'/%3E%3C/g%3E%3C/svg%3E");
  filter            : blur(.5px) drop-shadow(0 0 6px rgba(255, 0, 51, .5));
}

/* ============================================================
   TITRE
   ============================================================ */
.exo-title {
  position      : relative;
  z-index       : 3;
  text-align    : center;
  margin        : 0 0 clamp(10px, 2.5%, 22px);
  padding-bottom: .12em;
  font-size     : clamp(24px, 4.4cqw, 44px);
  line-height   : 1.35;
  font-weight   : 700;
  letter-spacing: -.5px;
  background    : linear-gradient(180deg, #fff 0%, #bbb 100%);
  -webkit-background-clip: text;
  background-clip        : text;
  -webkit-text-fill-color: transparent;
  text-shadow   : 0 0 30px rgba(255, 255, 255, .15);
}

/* ============================================================
   BOÎTIER HEXAGONAL + ÉCRAN
   ============================================================ */
.exo-bezel {
  position    : relative;
  z-index     : 2;
  width        : 100%;
  margin       : 0 auto;
  padding      : clamp(10px, 2%, 18px) clamp(10px, 1.8%, 20px) clamp(8px, 1.6%, 14px);
  background   : linear-gradient(180deg, #1c1c1e 0%, #050505 100%);
  border       : 1px solid #333;
  clip-path    : polygon(24% 0%, 76% 0%, 100% 34%, 100% 74%, 86% 100%, 14% 100%, 0% 74%, 0% 34%);
  box-shadow   : 0 26px 50px rgba(0, 0, 0, .85);
}

/* Liseré rouge intérieur */
.exo-bezel::after {
  content      : '';
  position     : absolute;
  inset        : clamp(8px, 1.6%, 18px);
  clip-path    : polygon(24% 0%, 76% 0%, 100% 34%, 100% 74%, 86% 100%, 14% 100%, 0% 74%, 0% 34%);
  border       : 2px solid rgba(255, 0, 51, .35);
  filter       : drop-shadow(0 0 12px rgba(255, 0, 51, .45));
  pointer-events: none;
  z-index      : 5;
}

.exo-screen {
  position     : relative;
  width        : 100%;
  clip-path    : polygon(24% 0%, 76% 0%, 100% 34%, 100% 74%, 86% 100%, 14% 100%, 0% 74%, 0% 34%);
  background   : radial-gradient(circle at 50% 26%, #1a1a20 0%, #060609 80%);
  display      : flex;
  flex-direction: column;
  gap          : clamp(4px, 1%, 10px);
  overflow     : hidden;
}

/* Reflet vitré */
.exo-screen::before {
  content       : '';
  position      : absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background    : linear-gradient(135deg, rgba(255, 255, 255, .05) 0%, transparent 40%);
  pointer-events: none;
  z-index       : 6;
}

/* ============================================================
   HEADER (emblème + "Listen to…")
   ============================================================ */
.exo-screen-header {
  position     : relative;
  z-index      : 7;
  display      : flex;
  flex-direction: column;
  align-items  : center;
  padding-top  : clamp(4px, 1.4%, 10px);
  gap          : clamp(5px, 1.2%, 10px);
}

.exo-emblem {
  width : clamp(22px, 3%, 30px);
  height: clamp(22px, 3%, 30px);
  color : var(--exo-accent-soft);
  filter: drop-shadow(0 0 5px var(--exo-accent));
}

.exo-audio-info {
  display    : flex;
  align-items: center;
  gap        : 12px;
  font-size  : clamp(13px, 1.7cqw, 19px);
  font-weight: 500;
  line-height: 1.3;
  text-align : left;
  max-width  : 70%;
}

.exo-spk-icon {
  width      : clamp(18px, 2cqw, 24px);
  height     : clamp(18px, 2cqw, 24px);
  flex-shrink: 0;
  fill       : #fff;
}

/* ============================================================
   BODY (grille 3 colonnes)
   ============================================================ */
.exo-screen-body {
  position             : relative;
  z-index              : 7;
  flex-grow            : 1;
  display              : grid;
  grid-template-columns: 24% 1fr 24%;
  align-items          : center;
  padding              : 0 clamp(12px, 4%, 40px);
  min-height           : 0;
}

/* ---- Gauche : vitesse + rapport ---- */
.exo-panel-left {
  position      : relative;
  display       : flex;
  flex-direction: column;
  align-items   : center;
  justify-content: center;
  gap           : clamp(12px, 3%, 26px);
}

.exo-speed-arc {
  position : absolute;
  left     : 0;
  top      : 50%;
  transform: translateY(-50%);
  width    : clamp(36px, 5cqw, 56px);
  height   : 92%;
}

.exo-speed-data { text-align: center; padding-left: 14%; }

.exo-speed-val {
  font-size  : clamp(34px, 5.4cqw, 56px);
  font-weight: 600;
  line-height: 1;
}

.exo-speed-unit {
  font-size: clamp(10px, 1.3cqw, 14px);
  color    : var(--exo-grey);
  font-weight: 500;
}

.exo-gear-data { text-align: center; padding-left: 14%; }

.exo-gear-val {
  font-size  : clamp(26px, 4.2cqw, 42px);
  font-weight: 600;
  line-height: 1;
  color      : #33ff33;
  text-shadow: 0 0 10px rgba(51, 255, 51, .45);
  transition : color .3s, text-shadow .3s;
}

.exo-gear-val.exo-in-gear {
  color      : #fff;
  text-shadow: none;
}

.exo-gear-label {
  font-size     : clamp(9px, 1.2cqw, 11px);
  letter-spacing: 1px;
  color         : var(--exo-grey);
}

/* ---- Centre : compte-tours + bouton ---- */
.exo-panel-center {
  display        : flex;
  justify-content: center;
  align-items    : center;
}

.exo-rpm-gauge {
  position : relative;
  width    : min(100%, 250px);
  aspect-ratio: 1;
}

.exo-rpm-svg { width: 100%; height: 100%; display: block; }

.exo-rpm-track { fill: none; stroke: rgba(255, 255, 255, .06); stroke-width: 12; }

.exo-rpm-fill {
  fill          : none;
  stroke        : url(#exoRedGradient);
  stroke-width  : 14;
  stroke-linecap: round;
  transition    : stroke-dashoffset .12s linear;
}

.exo-rnum {
  fill           : var(--exo-grey);
  font-family    : 'Inter', sans-serif;
  font-size      : 20px;
  font-weight    : 500;
  text-anchor    : middle;
  dominant-baseline: middle;
}
.exo-rnum-red { fill: var(--exo-accent-soft); }
.exo-rnum-max { font-size: 24px; font-weight: 700; }

.exo-rpm-label {
  position : absolute;
  bottom   : 14%;
  left     : 50%;
  transform: translateX(-50%);
  font-size: clamp(8px, 1cqw, 10px);
  letter-spacing: .5px;
  color    : var(--exo-dgrey);
}

/* Bouton Start / Stop */
.exo-play {
  position : absolute;
  top      : 50%;
  left     : 50%;
  transform: translate(-50%, -50%);
  width    : 40%;
  aspect-ratio: 1;
  border-radius: 50%;
  border   : 2px solid #222;
  background: radial-gradient(circle at 50% 38%, #1d1d1f 0%, #060606 100%);
  color    : #fff;
  cursor   : pointer;
  display  : flex;
  flex-direction: column;
  align-items   : center;
  justify-content: center;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, .85), 0 0 10px rgba(0, 0, 0, .5);
  transition: border-color .25s, box-shadow .3s, transform .12s;
  z-index  : 8;
}

.exo-play::before {
  content      : '';
  position     : absolute;
  inset        : -6px;
  border-radius: 50%;
  border       : 2px solid rgba(255, 0, 51, .18);
  transition   : border-color .3s, box-shadow .3s;
}

.exo-play:hover { border-color: rgba(255, 0, 51, .35); }
.exo-play:active { transform: translate(-50%, -50%) scale(.95); }

.exo-play:focus-visible {
  outline       : 3px solid rgba(255, 0, 51, .4);
  outline-offset: 4px;
}

.exo-player.is-playing .exo-play {
  border-color: rgba(255, 0, 51, .45);
  box-shadow  : inset 0 0 30px rgba(255, 0, 51, .12), 0 0 22px rgba(255, 0, 51, .25);
}
.exo-player.is-playing .exo-play::before {
  border-color: rgba(255, 0, 51, .8);
  box-shadow  : 0 0 15px rgba(255, 0, 51, .45);
}

.exo-play-title {
  font-size  : clamp(16px, 2.6cqw, 26px);
  font-weight: 600;
  line-height: 1.1;
}
.exo-play-sub {
  font-size: clamp(10px, 1.4cqw, 14px);
  color    : var(--exo-grey);
}

/* ---- Droite : stats décoratives ---- */
.exo-panel-right {
  display       : flex;
  flex-direction: column;
  justify-content: center;
  align-items   : flex-start;
  gap           : clamp(12px, 3%, 24px);
  padding-left  : clamp(6px, 1.5%, 18px);
}

.exo-stat-row { display: flex; align-items: center; gap: 12px; }

.exo-stat-icon {
  width      : clamp(16px, 1.8cqw, 20px);
  height     : clamp(16px, 1.8cqw, 20px);
  flex-shrink: 0;
  fill       : var(--exo-grey);
}

.exo-stat-val {
  font-size  : clamp(12px, 1.5cqw, 15px);
  font-weight: 500;
  white-space: nowrap;
}
.exo-stat-unit { color: var(--exo-grey); font-weight: 400; margin-left: 2px; }

.exo-fuel-wrap { display: flex; flex-direction: column; gap: 4px; }
.exo-fuel-bars { display: flex; gap: 3px; align-items: flex-end; }
.exo-fuel-bar {
  width        : 7px;
  height       : 12px;
  background   : #fff;
  transform    : skewX(-15deg);
}
.exo-fuel-off { background: #2a2a2a; }
.exo-fuel-red { background: #80001a; }
.exo-fuel-red { background: var(--exo-accent-soft); box-shadow: 0 0 5px var(--exo-accent); }
.exo-fuel-labels {
  display        : flex;
  justify-content: space-between;
  font-size      : 10px;
  font-weight    : 700;
  color          : var(--exo-dgrey);
}

/* ============================================================
   FOOTER : timeline + sélecteur de profils
   ============================================================ */
.exo-screen-footer {
  position     : relative;
  z-index      : 7;
  display      : flex;
  flex-direction: column;
  align-items  : center;
  gap          : clamp(8px, 1.8%, 14px);
  padding      : 0 clamp(10px, 2.5%, 28px) clamp(10px, 2.4%, 18px);
}

.exo-timeline {
  display    : flex;
  align-items: center;
  gap        : 14px;
  width      : 100%;
  max-width  : 600px;
}

.exo-time {
  width      : 36px;
  text-align : center;
  font-size  : clamp(10px, 1.2cqw, 12px);
  font-weight: 500;
  color      : var(--exo-grey);
  font-variant-numeric: tabular-nums;
}

.exo-seek {
  position     : relative;
  flex         : 1 1 auto;
  height       : 4px;
  padding      : 0;
  border       : none;
  border-radius: 2px;
  background   : #262626;
  cursor       : pointer;
}
.exo-seek:focus-visible {
  outline       : 2px solid rgba(255, 0, 51, .4);
  outline-offset: 4px;
}

.exo-seek-fill {
  position     : absolute;
  top: 0; left: 0;
  height       : 100%;
  width        : 0%;
  border-radius: 2px;
  background   : var(--exo-accent-soft);
  box-shadow   : 0 0 8px var(--exo-accent);
  pointer-events: none;
}

/* ---- Sélecteur de profils ---- */
.exo-modes {
  position     : relative;
  display      : flex;
  flex-wrap    : nowrap;
  justify-content: center;
  align-items  : center;
  gap          : 2px;
  max-width    : 100%;
  padding      : 4px;
  border       : 1px solid rgba(255, 255, 255, .06);
  border-radius: 12px;
  background   : rgba(25, 25, 30, .5);
}

.exo-mode-indicator {
  position     : absolute;
  top          : 0;
  left         : 0;
  height       : 0;
  width        : 0;
  border-radius: 8px;
  background   : linear-gradient(90deg, rgba(200, 0, 30, .12) 0%, rgba(255, 0, 51, .7) 100%);
  box-shadow   : 0 0 20px rgba(255, 0, 51, .3);
  transition   : transform .3s cubic-bezier(.25, 1, .5, 1), width .3s, height .3s;
  z-index      : 1;
  pointer-events: none;
}

.exo-mode {
  position   : relative;
  z-index    : 2;
  border     : none;
  background : transparent;
  color      : var(--exo-grey);
  padding    : 9px 13px;
  font       : inherit;
  font-size  : clamp(11px, 1.25cqw, 13px);
  font-weight: 600;
  white-space: nowrap;
  cursor     : pointer;
  transition : color .3s;
}
.exo-mode:hover { color: #ccc; }
.exo-mode.exo-mode-active { color: #fff; }
.exo-mode:focus-visible {
  outline       : 2px solid rgba(255, 0, 51, .4);
  outline-offset: 2px;
  border-radius : 8px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 780px) {
  .exo-player { padding-top: 40px; }

  .exo-bezel {
    clip-path   : none;
    border-radius: 14px;
    padding     : 10px;
  }
  .exo-bezel::after,
  .exo-screen { clip-path: none; border-radius: 12px; }

  /* Profils : retour à la ligne autorisé sur petit écran */
  .exo-modes { flex-wrap: wrap; }
  .exo-rnum-max { font-size: 22px; }

  .exo-screen-body {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 8px 10px 4px;
  }
  .exo-panel-left,
  .exo-panel-right { display: none; }

  .exo-audio-info { max-width: 92%; }
  .exo-rpm-gauge  { width: min(78cqw, 320px); }
}

@media (max-width: 440px) {
  .exo-title       { font-size: 20px; }
  .exo-audio-info  { font-size: 13px; }
  .exo-mode        { padding: 9px 12px; font-size: 12px; }
}

/* Accessibilité : animations réduites */
@media (prefers-reduced-motion: reduce) {
  .exo-rpm-fill,
  .exo-mode-indicator { transition: none; }
  .exo-waves { display: none; }
}