/* === AUDIO CONTROLS ===
   Le bouton vit au-dessus du diaporama, aligné à son bord gauche. */
.slider-container .audio-controls {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 2px;
    z-index: 120;
}

.audio-btn {
    position: relative;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px 8px 8px 0;
    opacity: 0.75;
    transition: opacity 0.3s ease;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.audio-btn:hover { opacity: 1; }

/* Musique en cours : gris plus sombre ; muet : gris plus clair + barre oblique */
.volume-icon {
    width: 20px;
    height: 20px;
    fill: #4d4d4d;
    transform-origin: center;
    overflow: visible;
    transition: fill 0.4s ease;
}

.audio-btn:not(.playing) .volume-icon { fill: #a0a0a0; }

.audio-btn:not(.playing)::after {
    content: '';
    position: absolute;
    left: 2px;
    right: 8px;
    top: 50%;
    height: 1.5px;
    background: #a0a0a0;
    transform: rotate(-40deg);
    opacity: .9;
}

/* Entrée en scène : l'icône arrive en grand puis rétrécit vers sa place,
   avant de battre au rythme d'un cœur (lub-dub). Démarre à la révélation
   de l'en-tête, en même temps que la tentative de lecture de la musique. */
.page-main.visible .volume-icon {
    animation:
        speaker-arrive 1s ease-out both,
        heartbeat 1.6s ease-in-out 1.6s infinite;
}

@keyframes speaker-arrive {
    from { transform: scale(3.2); }
    to   { transform: scale(1); }
}

@keyframes heartbeat {
    0%   { transform: scale(1); }
    8%   { transform: scale(1.18); }
    16%  { transform: scale(1); }
    26%  { transform: scale(1.12); }
    36%  { transform: scale(1); }
    100% { transform: scale(1); }
}