/** * Animation du widget streaming (Spotify / Deezer / Apple…) * * Choisir sur : * data-mp-audio-reveal="none" → affichage / masquage instantané * data-mp-audio-reveal="expand-tb" → dépliage vertical seul (grille 0fr → 1fr), toute la place pour l’iframe * data-mp-audio-reveal="clip-tb" → dépliage + balayage du haut vers le bas * data-mp-audio-reveal="clip-lr" → dépliage + balayage gauche → droite * data-mp-audio-reveal="clip-rl" → dépliage + balayage droite → gauche * data-mp-audio-reveal="fade-slide" → dépliage + léger fondu + glissement vers le bas * * Défaut si l’attribut est absent : clip-tb (voir modulePrograms.html). */ /* ----- Enveloppe : hauteur pilotée par grille (évite max-height animé pixel par pixel) ----- */ .exercise-streaming.musicPlatformContainer .musicPlatformRevealOuter { display: grid; grid-template-rows: 0fr; width: 100%; min-width: 0; transition: grid-template-rows 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .exercise-streaming.musicPlatformContainer.open .musicPlatformRevealOuter { grid-template-rows: 1fr; } .musicPlatformReveal { overflow: hidden; min-height: 0; width: 100%; contain: layout; } .musicPlatformEmbedHost { width: 100%; min-width: 0; overflow: hidden; line-height: 0; } .musicPlatformEmbedHost iframe { display: block; } /* ========== none : pas d’animation ========== */ .moduleProgramsBody[data-mp-audio-reveal="none"] .exercise-streaming.musicPlatformContainer .musicPlatformRevealOuter { transition: none !important; } .moduleProgramsBody[data-mp-audio-reveal="none"] .exercise-streaming.musicPlatformContainer:not(.open) .musicPlatformRevealOuter { display: none !important; } .moduleProgramsBody[data-mp-audio-reveal="none"] .exercise-streaming.musicPlatformContainer.open .musicPlatformRevealOuter { display: block; grid-template-rows: none !important; } .moduleProgramsBody[data-mp-audio-reveal="none"] .exercise-streaming.musicPlatformContainer.open .musicPlatformRevealOuter { width: 100%; } /* ========== expand-tb : seulement ouverture verticale ========== */ .moduleProgramsBody[data-mp-audio-reveal="expand-tb"] .musicPlatformReveal { clip-path: none; } /* ========== clip-tb : volet du haut vers le bas ========== */ .moduleProgramsBody[data-mp-audio-reveal="clip-tb"] .musicPlatformContainer:not(.open) .musicPlatformReveal { clip-path: inset(0 0 100% 0); } .moduleProgramsBody[data-mp-audio-reveal="clip-tb"] .musicPlatformContainer.open .musicPlatformReveal { clip-path: inset(0 0 0 0); transition: clip-path 0.4s cubic-bezier(0.22, 1, 0.36, 1); } /* ========== clip-lr : gauche → droite ========== */ .moduleProgramsBody[data-mp-audio-reveal="clip-lr"] .musicPlatformContainer:not(.open) .musicPlatformReveal { clip-path: inset(0 100% 0 0); } .moduleProgramsBody[data-mp-audio-reveal="clip-lr"] .musicPlatformContainer.open .musicPlatformReveal { clip-path: inset(0 0 0 0); transition: clip-path 0.4s cubic-bezier(0.22, 1, 0.36, 1); } /* ========== clip-rl : droite → gauche ========== */ .moduleProgramsBody[data-mp-audio-reveal="clip-rl"] .musicPlatformContainer:not(.open) .musicPlatformReveal { clip-path: inset(0 0 0 100%); } .moduleProgramsBody[data-mp-audio-reveal="clip-rl"] .musicPlatformContainer.open .musicPlatformReveal { clip-path: inset(0 0 0 0); transition: clip-path 0.4s cubic-bezier(0.22, 1, 0.36, 1); } /* ========== fade-slide : ouverture grille + fondu / léger slide ========== */ .moduleProgramsBody[data-mp-audio-reveal="fade-slide"] .musicPlatformContainer:not(.open) .musicPlatformEmbedHost { opacity: 0; transform: translateY(-10px); } .moduleProgramsBody[data-mp-audio-reveal="fade-slide"] .musicPlatformContainer.open .musicPlatformEmbedHost { opacity: 1; transform: translateY(0); transition: opacity 0.32s ease 0.04s, transform 0.38s cubic-bezier(0.22, 1, 0.36, 1) 0.04s; } /* Réduire les effets si l’utilisateur le demande */ @media (prefers-reduced-motion: reduce) { .exercise-streaming.musicPlatformContainer .musicPlatformRevealOuter { transition: none !important; } .moduleProgramsBody[data-mp-audio-reveal="clip-tb"] .musicPlatformContainer.open .musicPlatformReveal, .moduleProgramsBody[data-mp-audio-reveal="clip-lr"] .musicPlatformContainer.open .musicPlatformReveal, .moduleProgramsBody[data-mp-audio-reveal="clip-rl"] .musicPlatformContainer.open .musicPlatformReveal { transition: none !important; } .moduleProgramsBody[data-mp-audio-reveal="fade-slide"] .musicPlatformContainer.open .musicPlatformEmbedHost { transition: none !important; } .moduleProgramsBody[data-mp-audio-reveal="clip-tb"] .musicPlatformContainer:not(.open) .musicPlatformReveal, .moduleProgramsBody[data-mp-audio-reveal="clip-lr"] .musicPlatformContainer:not(.open) .musicPlatformReveal, .moduleProgramsBody[data-mp-audio-reveal="clip-rl"] .musicPlatformContainer:not(.open) .musicPlatformReveal { clip-path: none !important; } .moduleProgramsBody[data-mp-audio-reveal="fade-slide"] .musicPlatformContainer:not(.open) .musicPlatformEmbedHost { opacity: 1 !important; transform: none !important; } } /* Pas d’attribut sur body : même effet que clip-tb */ .moduleProgramsBody:not([data-mp-audio-reveal]) .musicPlatformContainer:not(.open) .musicPlatformReveal { clip-path: inset(0 0 100% 0); } .moduleProgramsBody:not([data-mp-audio-reveal]) .musicPlatformContainer.open .musicPlatformReveal { clip-path: inset(0 0 0 0); transition: clip-path 0.4s cubic-bezier(0.22, 1, 0.36, 1); }