/* ============================================================
   Crealib Player — player.css
   Esthétique sombre & cinématique, inspirée crealib.fr
   ============================================================ */

:root {
  --cp-bg:          #0d0d0d;
  --cp-surface:     rgba(13,13,13,.92);
  --cp-accent:      #e63946;       /* rouge signature Crealib */
  --cp-accent-glow: rgba(230,57,70,.35);
  --cp-text:        #f1f1f1;
  --cp-muted:       rgba(255,255,255,.45);
  --cp-radius:      10px;
  --cp-ctrl-h:      44px;
  --cp-transition:  .2s ease;
}

/* ── Wrapper ── */
.crealib-player-wrapper {
  position: relative;
  width: 100%;
  background: var(--cp-bg);
  border-radius: var(--cp-radius);
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.7);
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  user-select: none;
  /* Empêche le redimensionnement flash */
  aspect-ratio: 16/9;
}

/* ── Vidéo ── */
.crealib-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  cursor: pointer;
}

/* ── Poster / big play ── */
.crealib-poster {
  position: absolute;
  inset: 0;
  background: var(--cp-bg) center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: opacity var(--cp-transition);
}
.crealib-poster.hidden { opacity: 0; pointer-events: none; visibility: hidden; }

.crealib-big-play {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.8);
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(6px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--cp-transition), background var(--cp-transition), box-shadow var(--cp-transition);
}
.crealib-big-play:hover {
  transform: scale(1.1);
  background: var(--cp-accent);
  box-shadow: 0 0 28px var(--cp-accent-glow);
}
.crealib-big-play svg { width: 28px; height: 28px; }

/* ── Barre de contrôles ── */
.crealib-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 14px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,.85));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--cp-transition), transform var(--cp-transition);
  z-index: 20;
}
.crealib-player-wrapper:hover .crealib-controls,
.crealib-player-wrapper.paused .crealib-controls {
  opacity: 1;
  transform: translateY(0);
}

/* ── Progress bar ── */
.crealib-progress-bar {
  position: relative;
  height: 4px;
  background: rgba(255,255,255,.2);
  border-radius: 2px;
  margin-bottom: 10px;
  cursor: pointer;
}
.crealib-progress-bar:hover { height: 6px; }

.crealib-progress-buffer,
.crealib-progress-played {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  border-radius: 2px;
  pointer-events: none;
}
.crealib-progress-buffer  { background: rgba(255,255,255,.3); }
.crealib-progress-played  { background: var(--cp-accent); }

.crealib-seek {
  position: absolute;
  inset: -8px 0;
  width: 100%;
  height: calc(100% + 16px);
  opacity: 0;
  cursor: pointer;
  margin: 0;
}

/* ── Ligne de boutons ── */
.crealib-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--cp-ctrl-h);
  gap: 4px;
}
.crealib-controls-left,
.crealib-controls-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Boutons ── */
.crealib-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--cp-text);
  cursor: pointer;
  border-radius: 6px;
  transition: color var(--cp-transition), background var(--cp-transition);
  flex-shrink: 0;
}
.crealib-btn:hover  { background: rgba(255,255,255,.12); color: #fff; }
.crealib-btn.active { color: var(--cp-accent); }
.crealib-btn svg    { width: 20px; height: 20px; pointer-events: none; }

/* ── Volume ── */
.crealib-volume-wrap {
  display: flex;
  align-items: center;
  gap: 0;
}
.crealib-volume {
  width: 0;
  overflow: hidden;
  transition: width var(--cp-transition);
  accent-color: var(--cp-accent);
  cursor: pointer;
}
.crealib-volume-wrap:hover .crealib-volume,
.crealib-volume:focus { width: 72px; }

/* ── Temps ── */
.crealib-time {
  font-size: 12px;
  color: var(--cp-muted);
  white-space: nowrap;
  padding-left: 6px;
  font-variant-numeric: tabular-nums;
}

/* ── Overlay Cast ── */
.crealib-cast-overlay {
  position: absolute;
  inset: 0;
  background: var(--cp-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
}
.crealib-cast-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: var(--cp-text);
  text-align: center;
}
.crealib-cast-info svg {
  width: 56px;
  height: 56px;
  color: var(--cp-accent);
  animation: castPulse 2s ease-in-out infinite;
}
.crealib-cast-info span { font-size: 14px; color: var(--cp-muted); }
.crealib-cast-info strong { color: var(--cp-text); }

@keyframes castPulse {
  0%,100% { opacity: 1; }
  50%      { opacity: .4; }
}

/* ── Erreur shortcode ── */
.crealib-error {
  background: #1a0508;
  border-left: 3px solid var(--cp-accent);
  padding: 10px 14px;
  color: var(--cp-text);
  border-radius: 4px;
  font-size: 14px;
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .crealib-time    { display: none; }
  .crealib-volume  { width: 0 !important; }
}