/* ─────────────────────────────────────────────
   IBE Audio Player — CSS
   Festival Itinéraire Baroque
   Design : baroque raffiné, sobre, élégant
   ───────────────────────────────────────────── */

/* Tokens */
.ibe-player {
  --ibe-accent:       #C8A96E;   /* or baroque */
  --ibe-accent-dim:   #8B6B3D;
  --ibe-bg:           #0E0C0A;
  --ibe-surface:      #1A1714;
  --ibe-border:       rgba(200,169,110,.18);
  --ibe-text-primary: #EDE8DF;
  --ibe-text-muted:   #8A8073;
  --ibe-radius:       2px;
  --ibe-transition:   .25s cubic-bezier(.4,0,.2,1);
}

/* ── Skin Light ── */
.ibe-skin-light {
  --ibe-bg:           #F5EFE6;
  --ibe-surface:      #EDE5D8;
  --ibe-border:       rgba(139,107,61,.22);
  --ibe-text-primary: #1A1410;
  --ibe-text-muted:   #6B5B45;
}

/* ── Skin Sépia ── */
.ibe-skin-sepia {
  --ibe-bg:           #2C2215;
  --ibe-surface:      #3A2D1E;
  --ibe-border:       rgba(200,169,110,.2);
  --ibe-text-primary: #E8D9BE;
  --ibe-text-muted:   #907B5C;
}

/* ── Base ── */
.ibe-player {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--ibe-bg);
  border: 1px solid var(--ibe-border);
  padding: 28px 32px 24px;
  font-family: 'Georgia', 'Garamond', serif;
  color: var(--ibe-text-primary);
  box-shadow: 0 8px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(200,169,110,.12);
  transition: box-shadow var(--ibe-transition);
  user-select: none;
}

.ibe-player:hover {
  box-shadow: 0 12px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(200,169,110,.18);
}

/* ── Ornement ── */
.ibe-player__ornament {
  width: 100%;
  opacity: .55;
  margin-bottom: 18px;
  color: var(--ibe-accent);
  line-height: 0;
}
.ibe-player__ornament--bottom {
  margin-top: 18px;
  margin-bottom: 0;
}
.ibe-player__ornament svg {
  width: 100%;
  height: 18px;
}

/* ── Métadonnées ── */
.ibe-player__meta {
  text-align: center;
  margin-bottom: 22px;
}

.ibe-player__composer {
  font-family: 'Georgia', serif;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ibe-accent);
  margin-bottom: 6px;
}

.ibe-player__work {
  font-size: 17px;
  font-weight: 400;
  font-style: italic;
  color: var(--ibe-text-primary);
  line-height: 1.35;
  margin-bottom: 5px;
}

.ibe-player__artist {
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ibe-text-muted);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ── Contrôles ── */
.ibe-player__controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Bouton Play/Pause */
.ibe-player__btn-play {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--ibe-accent);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background var(--ibe-transition), transform var(--ibe-transition), border-color var(--ibe-transition);
  position: relative;
}

.ibe-player__btn-play:hover {
  background: rgba(200,169,110,.12);
  transform: scale(1.05);
}

.ibe-player__btn-play:active {
  transform: scale(.95);
}

.ibe-player__btn-play svg {
  width: 18px;
  height: 18px;
  fill: var(--ibe-accent);
  transition: fill var(--ibe-transition), opacity var(--ibe-transition);
}

/* Icônes play/pause toggles */
.ibe-icon-pause { display: none; }
.ibe-player.is-playing .ibe-icon-play  { display: none; }
.ibe-player.is-playing .ibe-icon-pause { display: block; }

/* État loading */
.ibe-player.is-loading .ibe-player__btn-play::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-top-color: var(--ibe-accent);
  animation: ibe-spin .7s linear infinite;
  pointer-events: none;
}

@keyframes ibe-spin {
  to { transform: rotate(360deg); }
}

/* ── Timeline ── */
.ibe-player__timeline {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}

.ibe-player__progress-bg {
  position: relative;
  height: 3px;
  background: rgba(255,255,255,.08);
  border-radius: 2px;
  overflow: visible;
}

.ibe-skin-light .ibe-player__progress-bg {
  background: rgba(0,0,0,.1);
}

.ibe-player__progress-fill {
  height: 100%;
  width: 0%;
  background: var(--ibe-accent);
  border-radius: 2px;
  transition: width .15s linear;
  pointer-events: none;
}

/* Thumb — visible au survol */
.ibe-player__progress-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%) scale(0);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ibe-accent);
  pointer-events: none;
  transition: transform .15s var(--ibe-transition), left .15s linear;
}

.ibe-player__timeline:hover .ibe-player__progress-thumb {
  transform: translate(-50%, -50%) scale(1);
}

.ibe-player__progress-bg:hover .ibe-player__progress-fill {
  opacity: .85;
}

.ibe-player__times {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: .06em;
  color: var(--ibe-text-muted);
  pointer-events: none;
}

/* ── Volume ── */
.ibe-player__volume-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.ibe-player__btn-mute {
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .55;
  transition: opacity var(--ibe-transition);
}
.ibe-player__btn-mute:hover { opacity: 1; }

.ibe-player__btn-mute svg {
  width: 16px;
  height: 16px;
  fill: var(--ibe-text-primary);
}
.ibe-player__btn-mute .vol-wave { fill: var(--ibe-text-primary); }

.ibe-player__volume-slider {
  width: 56px;
  cursor: pointer;
}

.ibe-player__volume-bg {
  height: 3px;
  background: rgba(255,255,255,.08);
  border-radius: 2px;
  position: relative;
}

.ibe-skin-light .ibe-player__volume-bg {
  background: rgba(0,0,0,.1);
}

.ibe-player__volume-fill {
  height: 100%;
  width: 80%;
  background: var(--ibe-accent-dim);
  border-radius: 2px;
  pointer-events: none;
}

/* ── Waveform décoratif (optionnel, canvas) ── */
.ibe-player__waveform {
  width: 100%;
  height: 28px;
  opacity: .25;
  margin-bottom: 8px;
}

/* ── État erreur ── */
.ibe-player.has-error .ibe-player__btn-play {
  border-color: rgba(200,80,80,.5);
  pointer-events: none;
}
.ibe-player.has-error .ibe-player__btn-play svg { fill: rgba(200,80,80,.6); }
.ibe-player__error-msg {
  font-size: 11px;
  color: rgba(200,80,80,.7);
  text-align: center;
  margin-top: 8px;
  font-family: 'Helvetica Neue', sans-serif;
  display: none;
}
.ibe-player.has-error .ibe-player__error-msg { display: block; }

/* ── Responsive ── */
@media (max-width: 480px) {
  .ibe-player {
    padding: 20px 18px 18px;
  }
  .ibe-player__volume-wrap { display: none; }
  .ibe-player__work { font-size: 15px; }
  .ibe-player__btn-play {
    width: 44px;
    height: 44px;
  }
}

/* ──────────────────────────────────────────
   MODE BARRE COMPACTE (sous header)
   ────────────────────────────────────────── */

.ibe-player.ibe-mode-bar {
  flex-direction: row;
  align-items: center;
  padding: 0 20px;
  height: 52px;
  min-height: 52px;
  gap: 0;
  border-left: none;
  border-right: none;
  border-radius: 0;
  box-shadow: 0 1px 0 var(--ibe-border), 0 4px 16px rgba(0,0,0,.25);
}

/* Ornements masqués en mode barre */
.ibe-mode-bar .ibe-player__ornament { display: none; }

/* Méta : disposition inline à gauche */
.ibe-mode-bar .ibe-player__meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  margin-right: 20px;
  flex-shrink: 0;
  max-width: 38%;
  overflow: hidden;
  text-align: left;
  white-space: nowrap;
}

.ibe-mode-bar .ibe-player__composer {
  font-size: 9px;
  letter-spacing: .14em;
  margin: 0;
  flex-shrink: 0;
}

/* Séparateur typographique entre composer et work */
.ibe-mode-bar .ibe-player__composer::after {
  content: '·';
  margin-left: 8px;
  color: var(--ibe-text-muted);
  letter-spacing: 0;
}

.ibe-mode-bar .ibe-player__work {
  font-size: 13px;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
}

.ibe-mode-bar .ibe-player__artist {
  font-size: 10px;
  margin: 0;
  flex-shrink: 0;
  opacity: .7;
}

/* Contrôles : prennent tout l'espace restant */
.ibe-mode-bar .ibe-player__controls {
  flex: 1;
  gap: 10px;
}

/* Bouton plus petit en mode barre */
.ibe-mode-bar .ibe-player__btn-play {
  width: 32px;
  height: 32px;
}

.ibe-mode-bar .ibe-player__btn-play svg {
  width: 12px;
  height: 12px;
}

/* Timeline : supprimer les temps en mode barre étroite */
.ibe-mode-bar .ibe-player__times {
  display: none;
}

.ibe-mode-bar .ibe-player__timeline {
  gap: 0;
  justify-content: center;
}

/* Volume discret */
.ibe-mode-bar .ibe-player__volume-slider {
  width: 44px;
}

/* Responsive bar : masquer artiste sous 600px */
@media (max-width: 600px) {
  .ibe-mode-bar .ibe-player__artist { display: none; }
  .ibe-mode-bar .ibe-player__meta { max-width: 50%; }
}

@media (max-width: 400px) {
  .ibe-mode-bar .ibe-player__meta { display: none; }
  .ibe-mode-bar .ibe-player__volume-wrap { display: none; }
}

/* ── Accessibilité ── */
.ibe-player__btn-play:focus-visible,
.ibe-player__btn-mute:focus-visible {
  outline: 2px solid var(--ibe-accent);
  outline-offset: 3px;
}