/*
 * Pawa Player – Styles Frontend
 * Audio player + Video player
 */

/* ═══════════════════════════════════════════════════
   VARIABLES (surchargées par JS via CSS custom props)
═══════════════════════════════════════════════════ */
:root {
    --pawap-bg:       #0d2440;
    --pawap-primary:  #1a3a5c;
    --pawap-accent:   #e8b84b;
    --pawap-text:     #ffffff;
    --pawap-track-bg: rgba(255,255,255,.18);
    --pawap-track:    #e8b84b;
    --pawap-thumb:    #ffffff;
    --pawap-radius-audio: 16px;
    --pawap-radius-video: 12px;
}

/* ═══════════════════════════════════════════════════
   RESET COMMUN
═══════════════════════════════════════════════════ */
.pawap-audio-player *,
.pawap-video-player * {
    box-sizing: border-box;
}

.pawap-native {
    display: none !important;
}

.pawap-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: var(--pawap-text);
    transition: opacity .15s, transform .12s;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.pawap-btn:hover { opacity: .85; }
.pawap-btn:active { transform: scale(.9); }

/* ═══════════════════════════════════════════════════
   BARRE DE PROGRESSION (commune audio + vidéo)
═══════════════════════════════════════════════════ */
.pawap-progress { user-select: none; }

.pawap-progress__bar {
    position: relative;
    height: 4px;
    background: var(--pawap-track-bg);
    border-radius: 999px;
    cursor: pointer;
    margin-bottom: .4rem;
    overflow: visible;
}
.pawap-progress__bar:hover { height: 6px; margin-bottom: .28rem; }
.pawap-progress__bar:hover .pawap-progress__thumb { opacity: 1; transform: translateY(-50%) scale(1.2); }

.pawap-progress__buffered {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: rgba(255,255,255,.22);
    border-radius: 999px;
    width: 0;
    pointer-events: none;
}
.pawap-progress__fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: var(--pawap-track);
    border-radius: 999px;
    width: 0;
    pointer-events: none;
    transition: width .1s linear;
}
.pawap-progress__thumb {
    position: absolute;
    top: 50%;
    width: 14px; height: 14px;
    background: var(--pawap-thumb);
    border-radius: 50%;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
    transition: opacity .15s, transform .15s;
    margin-left: -7px;
}

.pawap-progress__times {
    display: flex;
    justify-content: space-between;
    font-size: .7rem;
    color: rgba(255,255,255,.55);
    letter-spacing: .3px;
}

/* Volume slider */
.pawap-volume {
    display: flex;
    align-items: center;
    gap: .4rem;
}
.pawap-volume__slider {
    -webkit-appearance: none;
    appearance: none;
    width: 64px;
    height: 3px;
    border-radius: 999px;
    background: var(--pawap-track-bg);
    cursor: pointer;
    outline: none;
    flex-shrink: 0;
}
.pawap-volume__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--pawap-thumb);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.pawap-volume__slider::-moz-range-thumb {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--pawap-thumb);
    border: none;
    cursor: pointer;
}

/* Vitesse */
.pawap-btn--speed {
    padding: .2rem .55rem;
    border-radius: 6px;
    background: rgba(255,255,255,.12);
    font-size: .72rem;
    font-weight: 700;
    color: var(--pawap-text);
    letter-spacing: .3px;
    transition: background .15s;
}
.pawap-btn--speed:hover { background: var(--pawap-accent); color: var(--pawap-primary); }

/* Watermark logo */
.pawap-watermark {
    position: absolute;
    z-index: 10;
    pointer-events: none;
    opacity: .7;
    transition: opacity .2s;
}
.pawap-watermark:hover { opacity: 1; }
.pawap-watermark--top-right    { top: .75rem; right: .75rem; }
.pawap-watermark--top-left     { top: .75rem; left:  .75rem; }
.pawap-watermark--bottom-right { bottom: .75rem; right: .75rem; }
.pawap-watermark--bottom-left  { bottom: .75rem; left:  .75rem; }

/* Logo inline audio — branding affiché à gauche du titre */
/* Logo audio via background-image — aucune balise <img>, immunisé aux CSS du thème */
.pawap-audio__logo-wrap {
    display: inline-block;
    flex-shrink: 0;
    width: 56px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    opacity: .85;
}

/* ═══════════════════════════════════════════════════
   LECTEUR AUDIO
═══════════════════════════════════════════════════ */
.pawap-audio-player {
    position: relative; /* nécessaire pour positionner le watermark en absolute */
    background: var(--pawap-bg);
    border-radius: var(--pawap-radius-audio, 16px);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.28);
    color: var(--pawap-text);
    max-width: 520px;
    width: 100%;
    margin: 1.5rem auto;
    font-family: inherit;
}



/* Corps */
.pawap-audio__body {
    padding: 1.25rem 1.25rem 1rem;
}
.pawap-audio__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
    gap: .5rem;
}

/* Groupe logo + titre à gauche */
.pawap-audio__top-left {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1;
    min-width: 0; /* permet le text-overflow sur le titre */
}
.pawap-audio__title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--pawap-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.pawap-audio__state-icon {
    font-size: .8rem;
    color: var(--pawap-accent);
    margin-left: .5rem;
    flex-shrink: 0;
}

/* Contrôles audio */
.pawap-audio__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    margin-top: .6rem;
    flex-wrap: wrap;
}

/* Bouton Play audio (plus grand) */
.pawap-audio__controls .pawap-btn--play {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--pawap-accent);
    color: var(--pawap-primary);
    box-shadow: 0 3px 12px rgba(232,184,75,.35);
}
.pawap-audio__controls .pawap-btn--play:hover { filter: brightness(1.08); }

.pawap-audio__controls .pawap-btn--seek {
    color: rgba(255,255,255,.7);
    width: 32px; height: 32px;
}
.pawap-audio__controls .pawap-btn--seek:hover { color: var(--pawap-accent); }

/* ═══════════════════════════════════════════════════
   LECTEUR VIDÉO
═══════════════════════════════════════════════════ */
.pawap-video-player {
    width: 100%;
    max-width: 100%;
    margin: 1.5rem 0;
    border-radius: var(--pawap-radius-video, 12px);
    overflow: hidden;
    background: #000;
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
    font-family: inherit;
}

/* Stage = zone vidéo + overlay */
.pawap-video__stage {
    position: relative;
    width: 100%;
    aspect-ratio: var(--pawap-video-ratio, 16/9);
    background: #000;
    overflow: hidden;
}

.pawap-video__stage .pawap-native {
    display: block !important;
    width: 100%; height: 100%;
    object-fit: contain;
    background: #000;
}

/* Overlay "big play" */
.pawap-video__overlay-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.4);
    cursor: pointer;
    transition: opacity .2s;
    z-index: 5;
}
.pawap-video__overlay-play.hidden { opacity: 0; pointer-events: none; }

.pawap-video__big-play {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--pawap-accent);
    display: flex; align-items: center; justify-content: center;
    color: var(--pawap-primary);
    box-shadow: 0 4px 24px rgba(232,184,75,.4);
    transition: transform .15s;
}
.pawap-video__overlay-play:hover .pawap-video__big-play { transform: scale(1.08); }

/* Spinner */
.pawap-video__spinner {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    z-index: 6;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}
.pawap-video__spinner.visible { opacity: 1; }
.pawap-spinner {
    width: 36px; height: 36px;
    border: 3px solid rgba(255,255,255,.2);
    border-top-color: var(--pawap-accent);
    border-radius: 50%;
    animation: pawapSpin .7s linear infinite;
}
@keyframes pawapSpin { to { transform: rotate(360deg); } }

/* Contrôles vidéo */
.pawap-video__controls {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, var(--pawap-video-controls, rgba(13,36,64,.92)));
    padding: 1.5rem .85rem .65rem;
    z-index: 8;
    transform: translateY(100%);
    transition: transform .22s ease;
}
.pawap-video__stage:hover .pawap-video__controls,
.pawap-video__stage.controls-visible .pawap-video__controls { transform: translateY(0); }

/* Barre de progression vidéo */
.pawap-progress--video .pawap-progress__bar { margin-bottom: .55rem; }
.pawap-progress--video .pawap-progress__times { color: rgba(255,255,255,.65); }

/* Boutons vidéo */
.pawap-video__btns {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: .2rem;
}
.pawap-video__btns .pawap-btn--play {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--pawap-accent);
    color: var(--pawap-primary);
}
.pawap-video__btns .pawap-btn--seek,
.pawap-video__btns .pawap-btn--mute,
.pawap-video__btns .pawap-btn--fullscreen { color: rgba(255,255,255,.8); }
.pawap-video__btns .pawap-btn--seek:hover,
.pawap-video__btns .pawap-btn--mute:hover,
.pawap-video__btns .pawap-btn--fullscreen:hover { color: #fff; }

/* Volume compact vidéo */
.pawap-video__btns .pawap-volume__slider { width: 56px; }

/* Plein écran */
.pawap-video-player:fullscreen .pawap-video__stage,
.pawap-video-player:-webkit-full-screen .pawap-video__stage { aspect-ratio: unset; height: 100vh; }
.pawap-video-player:fullscreen .pawap-video__controls,
.pawap-video-player:-webkit-full-screen .pawap-video__controls { transform: translateY(0); }

/* ═══════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .pawap-audio__controls { gap: .6rem; }
    .pawap-volume__slider  { width: 48px; }
    .pawap-audio__body     { padding: 1rem; }
    .pawap-video__big-play { width: 56px; height: 56px; }
}