{"id":833,"date":"2026-09-19T08:45:04","date_gmt":"2026-09-19T08:45:04","guid":{"rendered":"https:\/\/kemasug.com\/?page_id=833"},"modified":"2026-10-23T12:15:02","modified_gmt":"2026-10-23T12:15:02","slug":"series-kemasug","status":"publish","type":"page","link":"https:\/\/kemasug.com\/?page_id=833","title":{"rendered":"S\u00e9ries Kemasug"},"content":{"rendered":"\r\n        <div id=\"kso-originals-1\" class=\"kso-originals\">\r\n\r\n            <section class=\"kso-catalogue\">\r\n\r\n                <div class=\"kso-section-heading\">\r\n                    <span class=\"kso-eyebrow\"><\/span>\r\n                    <h2>Seulement sur Kemasug <\/h2>\r\n                    <p><\/p>\r\n                <\/div>\r\n\r\n                <div class=\"kso-cards\"><\/div>\r\n\r\n            <\/section>\r\n\r\n            <section class=\"kso-details\" hidden>\r\n                <button type=\"button\" class=\"kso-back\">\r\n                    \u2190 Retour au catalogue\r\n                <\/button>\r\n                <div class=\"kso-details-content\"><\/div>\r\n            <\/section>\r\n\r\n            <section class=\"kso-player-section\" hidden>\r\n\r\n                <button type=\"button\" class=\"kso-player-back\">\r\n                    \u2190 Retour aux d\u00e9tails\r\n                <\/button>\r\n\r\n                <h2 class=\"kso-player-title\"><\/h2>\r\n\r\n                <div class=\"kso-video-frame\">\r\n                    <video\r\n                        class=\"kso-video\"\r\n                        controls\r\n                        playsinline\r\n                        preload=\"metadata\"\r\n                    ><\/video>\r\n                <\/div>\r\n\r\n                <p class=\"kso-video-error\" hidden>\r\n                    La vid\u00e9o n\u2019a pas pu \u00eatre charg\u00e9e. V\u00e9rifiez que le fichier est disponible.\r\n                <\/p>\r\n\r\n                <div class=\"kso-next\" hidden>\r\n                    <div class=\"kso-next-info\">\r\n                        <strong>\u00c9pisode suivant<\/strong>\r\n                        <div class=\"kso-next-title\"><\/div>\r\n                        <div class=\"kso-countdown\"><\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"kso-next-actions\">\r\n                        <button type=\"button\" class=\"kso-next-play\">\r\n                            Lire maintenant\r\n                        <\/button>\r\n                        <button type=\"button\" class=\"kso-next-cancel\">\r\n                            Annuler\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/section>\r\n        <\/div>\r\n\r\n        <style>\r\n        #kso-originals-1 {\r\n            --kso-bg: #080808;\r\n            --kso-card: #171717;\r\n            --kso-text: #ffffff;\r\n            --kso-muted: #bdbdbd;\r\n            --kso-accent: #e50914;\r\n\r\n            width: 100%;\r\n            max-width: 100%;\r\n            margin: 0 auto;\r\n            padding: 28px 0 40px;\r\n            overflow: hidden;\r\n            background: var(--kso-bg);\r\n            color: var(--kso-text);\r\n            font-family: inherit;\r\n            line-height: 1.5;\r\n            box-sizing: border-box;\r\n            isolation: isolate;\r\n        }\r\n\r\n        #kso-originals-1 *,\r\n        #kso-originals-1 *::before,\r\n        #kso-originals-1 *::after {\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        #kso-originals-1 [hidden] {\r\n            display: none !important;\r\n        }\r\n\r\n        #kso-originals-1 button {\r\n            font: inherit;\r\n        }\r\n\r\n        \/* TITRE DU CATALOGUE *\/\r\n\r\n        #kso-originals-1 .kso-section-heading {\r\n            padding: 0 4.5% 20px;\r\n        }\r\n\r\n        #kso-originals-1 .kso-eyebrow {\r\n            display: block;\r\n            margin-bottom: 5px;\r\n            color: #b5b5b5;\r\n            font-size: 11px;\r\n            font-weight: 700;\r\n            letter-spacing: 2px;\r\n            text-transform: uppercase;\r\n        }\r\n\r\n        #kso-originals-1 .kso-section-heading h2 {\r\n            margin: 0;\r\n            color: #fff;\r\n            font-size: clamp(23px, 3vw, 34px);\r\n            font-weight: 800;\r\n            line-height: 1.2;\r\n        }\r\n\r\n        #kso-originals-1 .kso-section-heading p {\r\n            margin: 8px 0 0;\r\n            color: var(--kso-muted);\r\n            font-size: 14px;\r\n        }\r\n\r\n        \/* AFFICHES VERTICALES *\/\r\n\r\n        #kso-originals-1 .kso-cards {\r\n            display: grid;\r\n            grid-auto-columns: clamp(150px, 17vw, 220px);\r\n            grid-auto-flow: column;\r\n            align-items: start;\r\n            gap: 17px;\r\n            width: 100%;\r\n            padding: 4px 4.5% 20px;\r\n            overflow-x: auto;\r\n            overflow-y: hidden;\r\n            overscroll-behavior-x: contain;\r\n            scroll-snap-type: x proximity;\r\n            -webkit-overflow-scrolling: touch;\r\n            scrollbar-width: thin;\r\n            scrollbar-color: #484848 #111;\r\n        }\r\n\r\n        #kso-originals-1 .kso-card {\r\n            display: block;\r\n            width: 100%;\r\n            min-width: 0;\r\n            margin: 0;\r\n            padding: 0;\r\n            overflow: hidden;\r\n            border: 1px solid #292929;\r\n            border-radius: 7px;\r\n            background: var(--kso-card);\r\n            color: #fff;\r\n            text-align: left;\r\n            cursor: pointer;\r\n            scroll-snap-align: start;\r\n            transition: transform .2s ease, border-color .2s ease;\r\n        }\r\n\r\n        #kso-originals-1 .kso-card:hover {\r\n            transform: translateY(-3px);\r\n            border-color: #777;\r\n        }\r\n\r\n        #kso-originals-1 .kso-card:focus-visible,\r\n        #kso-originals-1 button:focus-visible {\r\n            outline: 2px solid var(--kso-accent);\r\n            outline-offset: 3px;\r\n        }\r\n\r\n        #kso-originals-1 .kso-card-poster {\r\n            display: block;\r\n            width: 100%;\r\n            aspect-ratio: 2 \/ 3;\r\n            overflow: hidden;\r\n            background: #202020;\r\n        }\r\n\r\n        #kso-originals-1 .kso-card img {\r\n            display: block;\r\n            width: 100%;\r\n            height: 100%;\r\n            margin: 0;\r\n            border: 0;\r\n            object-fit: cover;\r\n            object-position: center;\r\n            transition: transform .3s ease;\r\n        }\r\n\r\n        #kso-originals-1 .kso-card:hover img {\r\n            transform: scale(1.035);\r\n        }\r\n\r\n        #kso-originals-1 .kso-card-text {\r\n            display: block;\r\n            padding: 11px 12px 13px;\r\n        }\r\n\r\n        #kso-originals-1 .kso-card-name {\r\n            display: block;\r\n            color: #fff;\r\n            font-size: 15px;\r\n            font-weight: 750;\r\n            line-height: 1.4;\r\n        }\r\n\r\n        #kso-originals-1 .kso-card-meta {\r\n            display: block;\r\n            margin-top: 5px;\r\n            color: #bdbdbd;\r\n            font-size: 12px;\r\n            line-height: 1.5;\r\n        }\r\n\r\n        \/* FICHE DU FILM OU DE LA S\u00c9RIE *\/\r\n\r\n        #kso-originals-1 .kso-details,\r\n        #kso-originals-1 .kso-player-section {\r\n            width: 100%;\r\n            max-width: 1240px;\r\n            margin: 0 auto;\r\n            padding: 0 4.5%;\r\n        }\r\n\r\n        #kso-originals-1 .kso-back,\r\n        #kso-originals-1 .kso-player-back {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            min-height: 42px;\r\n            gap: 8px;\r\n            margin: 0 0 22px;\r\n            padding: 9px 14px;\r\n            border: 1px solid #383838;\r\n            border-radius: 5px;\r\n            background: #1b1b1b;\r\n            color: #fff;\r\n            cursor: pointer;\r\n        }\r\n\r\n        #kso-originals-1 .kso-back:hover,\r\n        #kso-originals-1 .kso-player-back:hover {\r\n            background: #303030;\r\n        }\r\n\r\n        #kso-originals-1 .kso-detail-hero {\r\n            display: grid;\r\n            grid-template-columns: minmax(190px, 300px) minmax(0, 1fr);\r\n            gap: 28px;\r\n            align-items: start;\r\n        }\r\n\r\n        #kso-originals-1 .kso-detail-poster {\r\n            display: block;\r\n            width: 100%;\r\n            aspect-ratio: 2 \/ 3;\r\n            margin: 0;\r\n            border-radius: 7px;\r\n            background: #181818;\r\n            object-fit: cover;\r\n            object-position: center;\r\n        }\r\n\r\n        #kso-originals-1 .kso-details h2 {\r\n            margin: 0 0 14px;\r\n            color: #fff;\r\n            font-size: clamp(25px, 3vw, 36px);\r\n            font-weight: 800;\r\n            line-height: 1.2;\r\n        }\r\n\r\n        #kso-originals-1 .kso-meta {\r\n            margin: 5px 0;\r\n            color: #c5c5c5;\r\n            font-size: 13px;\r\n            line-height: 1.65;\r\n        }\r\n\r\n        #kso-originals-1 .kso-description {\r\n            margin: 16px 0 0;\r\n            color: #e0e0e0;\r\n            font-size: 14px;\r\n            line-height: 1.8;\r\n            overflow-wrap: anywhere;\r\n        }\r\n\r\n        \/* \u00c9PISODES : AFFICHES VERTICALES *\/\r\n\r\n        #kso-originals-1 .kso-season {\r\n            margin-top: 32px;\r\n        }\r\n\r\n        #kso-originals-1 .kso-season h3 {\r\n            margin: 0 0 15px;\r\n            color: #fff;\r\n            font-size: 21px;\r\n            font-weight: 750;\r\n        }\r\n\r\n        #kso-originals-1 .kso-episodes {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fill, minmax(150px, 190px));\r\n            gap: 16px;\r\n            width: 100%;\r\n        }\r\n\r\n        #kso-originals-1 .kso-episode {\r\n            display: block;\r\n            width: 100%;\r\n            min-width: 0;\r\n            margin: 0;\r\n            padding: 0;\r\n            overflow: hidden;\r\n            border: 1px solid #292929;\r\n            border-radius: 6px;\r\n            background: #171717;\r\n            color: #fff;\r\n            text-align: left;\r\n            cursor: pointer;\r\n        }\r\n\r\n        #kso-originals-1 .kso-episode img {\r\n            display: block;\r\n            width: 100%;\r\n            aspect-ratio: 2 \/ 3;\r\n            margin: 0;\r\n            object-fit: cover;\r\n            object-position: center;\r\n            background: #222;\r\n        }\r\n\r\n        #kso-originals-1 .kso-episode span {\r\n            display: block;\r\n            padding: 11px;\r\n            font-size: 14px;\r\n            font-weight: 700;\r\n        }\r\n\r\n        \/* BOUTON DE LECTURE *\/\r\n\r\n        #kso-originals-1 .kso-watch,\r\n        #kso-originals-1 .kso-next-play {\r\n            min-height: 44px;\r\n            padding: 11px 18px;\r\n            border: 0;\r\n            border-radius: 5px;\r\n            background: var(--kso-accent);\r\n            color: #fff;\r\n            font-weight: 700;\r\n            cursor: pointer;\r\n        }\r\n\r\n        #kso-originals-1 .kso-watch {\r\n            margin-top: 18px;\r\n        }\r\n\r\n        #kso-originals-1 .kso-watch:hover,\r\n        #kso-originals-1 .kso-next-play:hover {\r\n            background: #bd0710;\r\n        }\r\n\r\n        \/* LECTEUR VID\u00c9O *\/\r\n\r\n        #kso-originals-1 .kso-player-title {\r\n            margin: 0 0 18px;\r\n            color: #fff;\r\n            font-size: clamp(22px, 3vw, 30px);\r\n            line-height: 1.3;\r\n        }\r\n\r\n        #kso-originals-1 .kso-video-frame {\r\n            width: 100%;\r\n            max-width: 1100px;\r\n            margin: 0 auto;\r\n            overflow: hidden;\r\n            border: 1px solid #333;\r\n            border-radius: 6px;\r\n            background: #000;\r\n        }\r\n\r\n        #kso-originals-1 .kso-video {\r\n            display: block;\r\n            width: 100%;\r\n            height: auto;\r\n            max-height: 75vh;\r\n            aspect-ratio: 16 \/ 9;\r\n            background: #000;\r\n            object-fit: contain;\r\n        }\r\n\r\n        #kso-originals-1 .kso-video-error {\r\n            margin: 16px 0;\r\n            color: #ffb7b7;\r\n            font-size: 14px;\r\n        }\r\n\r\n        \/* \u00c9PISODE SUIVANT *\/\r\n\r\n        #kso-originals-1 .kso-next {\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: space-between;\r\n            flex-wrap: wrap;\r\n            gap: 16px;\r\n            max-width: 1100px;\r\n            margin: 18px auto 0;\r\n            padding: 18px;\r\n            border: 1px solid #303030;\r\n            border-radius: 6px;\r\n            background: #171717;\r\n            animation: ksoSlide .3s ease both;\r\n        }\r\n\r\n        #kso-originals-1 .kso-next-title {\r\n            margin-top: 5px;\r\n            overflow-wrap: anywhere;\r\n        }\r\n\r\n        #kso-originals-1 .kso-countdown {\r\n            margin-top: 6px;\r\n            color: #bbb;\r\n            font-size: 13px;\r\n        }\r\n\r\n        #kso-originals-1 .kso-next-actions {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 10px;\r\n            flex-wrap: wrap;\r\n        }\r\n\r\n        #kso-originals-1 .kso-next-cancel {\r\n            min-height: 42px;\r\n            padding: 9px 13px;\r\n            border: 1px solid #555;\r\n            border-radius: 5px;\r\n            background: transparent;\r\n            color: #fff;\r\n            cursor: pointer;\r\n        }\r\n\r\n        @keyframes ksoSlide {\r\n            from {\r\n                opacity: 0;\r\n                transform: translateY(8px);\r\n            }\r\n            to {\r\n                opacity: 1;\r\n                transform: translateY(0);\r\n            }\r\n        }\r\n\r\n        \/* TABLETTES ET MOBILES *\/\r\n\r\n        @media (max-width: 700px) {\r\n\r\n            #kso-originals-1 {\r\n                padding-top: 22px;\r\n            }\r\n\r\n            #kso-originals-1 .kso-section-heading {\r\n                padding: 0 16px 17px;\r\n            }\r\n\r\n            #kso-originals-1 .kso-cards {\r\n                grid-auto-columns: clamp(140px, 43vw, 190px);\r\n                gap: 12px;\r\n                padding: 4px 16px 18px;\r\n            }\r\n\r\n            #kso-originals-1 .kso-card-text {\r\n                padding: 10px 9px 12px;\r\n            }\r\n\r\n            #kso-originals-1 .kso-card-name {\r\n                font-size: 14px;\r\n            }\r\n\r\n            #kso-originals-1 .kso-card-meta {\r\n                font-size: 11px;\r\n            }\r\n\r\n            #kso-originals-1 .kso-details,\r\n            #kso-originals-1 .kso-player-section {\r\n                padding: 0 16px;\r\n            }\r\n\r\n            #kso-originals-1 .kso-detail-hero {\r\n                grid-template-columns: minmax(0, 1fr);\r\n                gap: 20px;\r\n            }\r\n\r\n            #kso-originals-1 .kso-detail-poster {\r\n                width: min(100%, 320px);\r\n                aspect-ratio: 2 \/ 3;\r\n            }\r\n\r\n            #kso-originals-1 .kso-episodes {\r\n                grid-template-columns: repeat(2, minmax(0, 1fr));\r\n                gap: 12px;\r\n            }\r\n\r\n            #kso-originals-1 .kso-next {\r\n                align-items: flex-start;\r\n                flex-direction: column;\r\n                padding: 14px;\r\n            }\r\n\r\n            #kso-originals-1 .kso-next-actions {\r\n                width: 100%;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 360px) {\r\n            #kso-originals-1 .kso-cards {\r\n                grid-auto-columns: 145px;\r\n            }\r\n\r\n            #kso-originals-1 .kso-episodes {\r\n                grid-template-columns: minmax(0, 1fr);\r\n            }\r\n        }\r\n\r\n        @media (prefers-reduced-motion: reduce) {\r\n            #kso-originals-1 *,\r\n            #kso-originals-1 *::before,\r\n            #kso-originals-1 *::after {\r\n                animation-duration: .01ms !important;\r\n                transition-duration: .01ms !important;\r\n            }\r\n        }\r\n        <\/style>\r\n\r\n        <script>\r\n        (function () {\r\n            const root = document.getElementById(\r\n                \"kso-originals-1\"            );\r\n\r\n            if (!root || root.dataset.ready === '1') return;\r\n            root.dataset.ready = '1';\r\n\r\n            const items = [{\"id\":\"dernier-appel\",\"type\":\"series\",\"title\":\"Dernier Appel\",\"poster\":\"https:\\\/\\\/kemasug.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/dernierAppel.png\",\"year\":\"2024\",\"age\":\"13+\",\"genre\":\"Drame, Suspense\",\"cast\":\"Mamadou, Samba\",\"creator\":\"Gad KAMKOUMI NANA\",\"description\":\"Deux hommes, autrefois ins\\u00e9parables, ont construit leur vie comme une fraternit\\u00e9 solide, presque indestructible. Ils se connaissent depuis toujours, partagent leurs r\\u00eaves, leurs \\u00e9checs, leurs victoires \\u2014 jusqu\\u2019\\u00e0 ce qu\\u2019une pr\\u00e9sence vienne fissurer cet \\u00e9quilibre : une femme qu\\u2019ils aiment tous les deux en silence, sans jamais oser se l\\u2019avouer.\",\"seasons\":[{\"name\":\"Saison 1\",\"episodes\":[{\"title\":\"\\u00c9pisode 1\",\"poster\":\"https:\\\/\\\/kemasug.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/Dernier-Appel-1.jpeg\",\"video\":\"https:\\\/\\\/d2g93jp2bipg86.cloudfront.net\\\/drame\\\/Dernier%20Appel\\\/dernierappelepisode1.MP4\",\"description\":\"Deux amis, une fraternit\\u00e9 mise \\u00e0 l\\u2019\\u00e9preuve et un amour gard\\u00e9 sous silence.\"}]}]},{\"id\":\"echos-du-silence\",\"type\":\"series\",\"title\":\"\\u00c9chos du silence\",\"poster\":\"https:\\\/\\\/kemasug.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/IMG_3610.jpg\",\"year\":\"2025\",\"age\":\"13+\",\"genre\":\"Drame, psychologie, solitude\",\"cast\":\"Gad, Mamadou\",\"creator\":\"Ruth\",\"description\":\"Une histoire de solitude, de souvenirs et de possibilit\\u00e9s nouvelles.\",\"seasons\":[{\"name\":\"Saison 1\",\"episodes\":[{\"title\":\"\\u00c9pisode 1\",\"poster\":\"https:\\\/\\\/kemasug.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/Echos-du-silence-1.jpg\",\"video\":\"https:\\\/\\\/d2g93jp2bipg86.cloudfront.net\\\/drame\\\/Echos%20du%20silence\\\/echosdusilence1.mp4\",\"description\":\"Sous la lumi\\u00e8re p\\u00e2le du matin, la for\\u00eat semble diff\\u00e9rente. Les ombres ne font plus peur. Elles dansent. Elles lui rappellent que la noirceur n\\u2019existe que parce qu\\u2019il y a de la lumi\\u00e8re quelque part.\"},{\"title\":\"\\u00c9pisode 2\",\"poster\":\"https:\\\/\\\/kemasug.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/Echos-du-silence-2.png\",\"video\":\"https:\\\/\\\/d2g93jp2bipg86.cloudfront.net\\\/drame\\\/Echos%20du%20silence\\\/echosdusilence2.mp4\",\"description\":\"Il pense \\u00e0 tout ce qu\\u2019il a perdu, \\u00e0 tout ce qu\\u2019il n\\u2019a jamais vraiment eu, et pourtant, une chaleur \\u00e9trange na\\u00eet au creux de sa poitrine. Ce n\\u2019est pas la joie. Pas encore. C\\u2019est la possibilit\\u00e9 de la joie.\"}]}]},{\"id\":\"la-solitude\",\"type\":\"film\",\"title\":\"La Solitude\",\"poster\":\"https:\\\/\\\/kemasug.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/La-solitude.jpg\",\"video\":\"https:\\\/\\\/d2g93jp2bipg86.cloudfront.net\\\/drame\\\/Lasolitude.mp4\",\"year\":\"2024\",\"age\":\"13+\",\"genre\":\"Psychologie, r\\u00e9alit\\u00e9\",\"cast\":\"Gad, Dorine\",\"creator\":\"Gad KAMKOUMIN NANA\",\"duration\":\"6 min\",\"description\":\"Un court m\\u00e9trage psychologique sur la solitude, les \\u00e9motions int\\u00e9rieures et les combats que l\\u2019on m\\u00e8ne loin des regards.\"},{\"id\":\"moi-meme\",\"type\":\"film\",\"title\":\"Moi-m\\u00eame\",\"poster\":\"https:\\\/\\\/kemasug.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/Moi-meme.jpg\",\"video\":\"https:\\\/\\\/d2g93jp2bipg86.cloudfront.net\\\/drame\\\/Moimeme\\\/Moimeme.mp4\",\"year\":\"2025\",\"age\":\"13+\",\"genre\":\"Drame\",\"cast\":\"R\\u00e9gina, Emilie\",\"creator\":\"Gad KAMKOUMI NANA\",\"director\":\"R\\u00e9gina, Marco, Gad\",\"duration\":\"6 min\",\"description\":\"Un court m\\u00e9trage dramatique sur l\\u2019identit\\u00e9, les choix personnels et la difficult\\u00e9 de rester fid\\u00e8le \\u00e0 soi-m\\u00eame.\"}];\r\n\r\n            const catalogue = root.querySelector('.kso-catalogue');\r\n            const cards = root.querySelector('.kso-cards');\r\n            const details = root.querySelector('.kso-details');\r\n            const detailsContent = root.querySelector('.kso-details-content');\r\n            const player = root.querySelector('.kso-player-section');\r\n            const video = root.querySelector('.kso-video');\r\n            const playerTitle = root.querySelector('.kso-player-title');\r\n            const error = root.querySelector('.kso-video-error');\r\n            const nextPanel = root.querySelector('.kso-next');\r\n            const nextTitle = root.querySelector('.kso-next-title');\r\n            const countdown = root.querySelector('.kso-countdown');\r\n\r\n            let activeItem = null;\r\n            let activeEpisodes = [];\r\n            let activeIndex = -1;\r\n            let timer = null;\r\n            let remaining = 90;\r\n\r\n            function el(tag, cls, text) {\r\n                const node = document.createElement(tag);\r\n\r\n                if (cls) node.className = cls;\r\n                if (text !== undefined) node.textContent = text;\r\n\r\n                return node;\r\n            }\r\n\r\n            function stopTimer() {\r\n                if (timer !== null) {\r\n                    window.clearInterval(timer);\r\n                }\r\n\r\n                timer = null;\r\n            }\r\n\r\n            function hideNext() {\r\n                stopTimer();\r\n                nextPanel.hidden = true;\r\n            }\r\n\r\n            function scrollToSection(section) {\r\n                const top = section.getBoundingClientRect().top\r\n                    + window.scrollY - 20;\r\n\r\n                window.scrollTo({\r\n                    top: Math.max(0, top),\r\n                    behavior: 'smooth'\r\n                });\r\n            }\r\n\r\n            function stopVideo() {\r\n                video.pause();\r\n                video.removeAttribute('src');\r\n                video.load();\r\n            }\r\n\r\n            function showCatalogue() {\r\n                hideNext();\r\n                stopVideo();\r\n\r\n                activeItem = null;\r\n                activeEpisodes = [];\r\n                activeIndex = -1;\r\n\r\n                player.hidden = true;\r\n                details.hidden = true;\r\n                catalogue.hidden = false;\r\n                error.hidden = true;\r\n\r\n                scrollToSection(root);\r\n            }\r\n\r\n            function renderCatalogue() {\r\n                cards.replaceChildren();\r\n\r\n                items.forEach(function (item) {\r\n                    const card = el('button', 'kso-card');\r\n                    card.type = 'button';\r\n                    card.setAttribute(\r\n                        'aria-label',\r\n                        'D\u00e9couvrir ' + item.title\r\n                    );\r\n\r\n                    const frame = el('span', 'kso-card-poster');\r\n                    const poster = el('img');\r\n\r\n                    poster.src = item.poster;\r\n                    poster.alt = item.title;\r\n                    poster.loading = 'lazy';\r\n                    poster.decoding = 'async';\r\n\r\n                    frame.appendChild(poster);\r\n\r\n                    const text = el('span', 'kso-card-text');\r\n\r\n                    text.appendChild(\r\n                        el('span', 'kso-card-name', item.title)\r\n                    );\r\n\r\n                    const kind = item.type === 'series' ? 'S\u00e9rie' : 'Film';\r\n\r\n                    text.appendChild(\r\n                        el(\r\n                            'span',\r\n                            'kso-card-meta',\r\n                            [item.year, kind, item.age]\r\n                                .filter(Boolean)\r\n                                .join(' \u00b7 ')\r\n                        )\r\n                    );\r\n\r\n                    card.append(frame, text);\r\n\r\n                    card.addEventListener('click', function () {\r\n                        openDetails(item);\r\n                    });\r\n\r\n                    cards.appendChild(card);\r\n                });\r\n            }\r\n\r\n            function openDetails(item) {\r\n                hideNext();\r\n                stopVideo();\r\n\r\n                activeItem = item;\r\n\r\n                catalogue.hidden = true;\r\n                player.hidden = true;\r\n                details.hidden = false;\r\n                error.hidden = true;\r\n\r\n                detailsContent.replaceChildren();\r\n\r\n                const hero = el('div', 'kso-detail-hero');\r\n                const poster = el('img', 'kso-detail-poster');\r\n\r\n                poster.src = item.poster;\r\n                poster.alt = item.title;\r\n                poster.loading = 'eager';\r\n\r\n                const info = el('div');\r\n\r\n                info.appendChild(el('h2', '', item.title));\r\n\r\n                [\r\n                    item.year,\r\n                    item.genre,\r\n                    item.age ? '\u00c2ge : ' + item.age : '',\r\n                    item.duration ? 'Dur\u00e9e : ' + item.duration : '',\r\n                    item.cast ? 'Avec : ' + item.cast : '',\r\n                    item.creator ? 'Production : ' + item.creator : '',\r\n                    item.director ? 'R\u00e9alisation : ' + item.director : ''\r\n                ].filter(Boolean).forEach(function (line) {\r\n                    info.appendChild(el('div', 'kso-meta', line));\r\n                });\r\n\r\n                info.appendChild(\r\n                    el('p', 'kso-description', item.description || '')\r\n                );\r\n\r\n                hero.append(poster, info);\r\n                detailsContent.appendChild(hero);\r\n\r\n                if (item.type === 'film') {\r\n                    const watch = el(\r\n                        'button',\r\n                        'kso-watch',\r\n                        '\u25b6 Regarder le film'\r\n                    );\r\n\r\n                    watch.type = 'button';\r\n\r\n                    watch.addEventListener('click', function () {\r\n                        playItem(item, item.title, [], -1);\r\n                    });\r\n\r\n                    info.appendChild(watch);\r\n                    scrollToSection(details);\r\n                    return;\r\n                }\r\n\r\n                (item.seasons || []).forEach(function (season) {\r\n                    const block = el('div', 'kso-season');\r\n\r\n                    block.appendChild(el('h3', '', season.name));\r\n\r\n                    const row = el('div', 'kso-episodes');\r\n\r\n                    (season.episodes || []).forEach(function (episode, index) {\r\n                        const button = el('button', 'kso-episode');\r\n                        button.type = 'button';\r\n\r\n                        const image = el('img');\r\n\r\n                        image.src = episode.poster || item.poster;\r\n                        image.alt = episode.title;\r\n                        image.loading = 'lazy';\r\n                        image.decoding = 'async';\r\n\r\n                        button.append(\r\n                            image,\r\n                            el('span', '', episode.title)\r\n                        );\r\n\r\n                        button.addEventListener('click', function () {\r\n                            playItem(\r\n                                item,\r\n                                episode.title,\r\n                                season.episodes,\r\n                                index\r\n                            );\r\n                        });\r\n\r\n                        row.appendChild(button);\r\n                    });\r\n\r\n                    block.appendChild(row);\r\n                    detailsContent.appendChild(block);\r\n                });\r\n\r\n                scrollToSection(details);\r\n            }\r\n\r\n            function playItem(item, title, episodes, index) {\r\n                hideNext();\r\n\r\n                activeItem = item;\r\n                activeEpisodes = episodes || [];\r\n                activeIndex = index;\r\n\r\n                catalogue.hidden = true;\r\n                details.hidden = true;\r\n                player.hidden = false;\r\n                error.hidden = true;\r\n\r\n                playerTitle.textContent = item.title + ' \u2014 ' + title;\r\n\r\n                let source = '';\r\n\r\n                if (item.type === 'film') {\r\n                    source = item.video || '';\r\n                } else if (\r\n                    activeIndex >= 0 &&\r\n                    activeEpisodes[activeIndex]\r\n                ) {\r\n                    source = activeEpisodes[activeIndex].video || '';\r\n                }\r\n\r\n                if (!source) {\r\n                    error.hidden = false;\r\n                    scrollToSection(player);\r\n                    return;\r\n                }\r\n\r\n                stopVideo();\r\n\r\n                video.src = source;\r\n                video.load();\r\n\r\n                const promise = video.play();\r\n\r\n                if (promise && typeof promise.catch === 'function') {\r\n                    promise.catch(function () {\r\n                        \/\/ L'utilisateur peut d\u00e9marrer la vid\u00e9o manuellement.\r\n                    });\r\n                }\r\n\r\n                scrollToSection(player);\r\n            }\r\n\r\n            function playNext() {\r\n                const index = activeIndex + 1;\r\n\r\n                if (index < 0 || !activeEpisodes[index]) {\r\n                    hideNext();\r\n                    return;\r\n                }\r\n\r\n                const episode = activeEpisodes[index];\r\n\r\n                playItem(\r\n                    activeItem,\r\n                    episode.title,\r\n                    activeEpisodes,\r\n                    index\r\n                );\r\n            }\r\n\r\n            function startCountdown() {\r\n                hideNext();\r\n\r\n                if (\r\n                    !activeItem ||\r\n                    activeItem.type !== 'series' ||\r\n                    activeIndex < 0 ||\r\n                    !activeEpisodes[activeIndex + 1]\r\n                ) {\r\n                    return;\r\n                }\r\n\r\n                remaining = 90;\r\n\r\n                const episode = activeEpisodes[activeIndex + 1];\r\n\r\n                nextTitle.textContent =\r\n                    activeItem.title + ' \u2014 ' + episode.title;\r\n\r\n                countdown.textContent = 'Lecture dans 1 min 30 s';\r\n                nextPanel.hidden = false;\r\n\r\n                timer = window.setInterval(function () {\r\n                    remaining -= 1;\r\n\r\n                    if (remaining <= 0) {\r\n                        stopTimer();\r\n                        playNext();\r\n                        return;\r\n                    }\r\n\r\n                    countdown.textContent =\r\n                        'Lecture dans ' +\r\n                        Math.floor(remaining \/ 60) +\r\n                        ' min ' +\r\n                        String(remaining % 60).padStart(2, '0') +\r\n                        ' s';\r\n                }, 1000);\r\n            }\r\n\r\n            video.addEventListener('ended', startCountdown);\r\n\r\n            video.addEventListener('error', function () {\r\n                if (video.currentSrc && !player.hidden) {\r\n                    error.hidden = false;\r\n                }\r\n            });\r\n\r\n            root.querySelector('.kso-back').addEventListener(\r\n                'click',\r\n                showCatalogue\r\n            );\r\n\r\n            root.querySelector('.kso-player-back').addEventListener(\r\n                'click',\r\n                function () {\r\n                    hideNext();\r\n                    stopVideo();\r\n                    player.hidden = true;\r\n\r\n                    if (activeItem) {\r\n                        openDetails(activeItem);\r\n                    } else {\r\n                        showCatalogue();\r\n                    }\r\n                }\r\n            );\r\n\r\n            root.querySelector('.kso-next-play').addEventListener(\r\n                'click',\r\n                playNext\r\n            );\r\n\r\n            root.querySelector('.kso-next-cancel').addEventListener(\r\n                'click',\r\n                hideNext\r\n            );\r\n\r\n            renderCatalogue();\r\n        })();\r\n        <\/script>\r\n\r\n        \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-833","page","type-page","status-publish","hentry"],"brizy_media":[],"_links":{"self":[{"href":"https:\/\/kemasug.com\/index.php?rest_route=\/wp\/v2\/pages\/833","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kemasug.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kemasug.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kemasug.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kemasug.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=833"}],"version-history":[{"count":5,"href":"https:\/\/kemasug.com\/index.php?rest_route=\/wp\/v2\/pages\/833\/revisions"}],"predecessor-version":[{"id":1112,"href":"https:\/\/kemasug.com\/index.php?rest_route=\/wp\/v2\/pages\/833\/revisions\/1112"}],"wp:attachment":[{"href":"https:\/\/kemasug.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}