

{"id":1874,"date":"2024-12-20T11:19:50","date_gmt":"2024-12-20T10:19:50","guid":{"rendered":"https:\/\/radiostreamr.com\/radio-france\/?p=1874"},"modified":"2024-12-20T11:19:55","modified_gmt":"2024-12-20T10:19:55","slug":"podcast-code-source-parisien","status":"publish","type":"post","link":"https:\/\/radiostreamr.com\/radio-france\/podcast-code-source-parisien\/","title":{"rendered":"Code Source &#8211; Le Parisien\u00a0&#8211; Podcast et Replay des sujets d&rsquo;actualit\u00e9"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1874\" class=\"elementor elementor-1874\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dce457e e-con-full e-flex e-con e-parent\" data-id=\"dce457e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9f9be1c 1995 elementor-widget elementor-widget-html\" data-id=\"9f9be1c\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"1995\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<html><head><meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@300;400;500;700&amp;display=swap\" rel=\"stylesheet\">\r\n<style>\r\n    .rtl-podcast-player * {\r\n        margin: 0;\r\n        padding: 0;\r\n        box-sizing: border-box;\r\n        font-family: 'Roboto', sans-serif;\r\n    }\r\n\r\n  .rtl-podcast-player #pagination {\r\n    display: flex !important;\r\n    justify-content: center !important;\r\n    align-items: center !important;\r\n    gap: 5px !important;\r\n    width: 100% !important;\r\n}\r\n\r\n@keyframes gradientBG {\r\n    0% {\r\n        background-position: 0% 50%;\r\n    }\r\n    50% {\r\n        background-position: 100% 50%;\r\n    }\r\n    100% {\r\n        background-position: 0% 50%;\r\n    }\r\n}\r\n\r\n.rtl-podcast-player body {\r\n    background: linear-gradient(-45deg, #0a192f, #172a45, #1a365d, #102235);\r\n    background-size: 400% 400%;\r\n    animation: gradientBG 15s ease infinite;\r\n    min-height: 100vh;\r\n    display: flex;\r\n    align-items: center;\r\n    color: #fff;\r\n    width: 100%;\r\n    max-width: 100%;\r\n    overflow-x: hidden;\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n\r\n    .rtl-podcast-player .container {\r\n        display: grid;\r\n        grid-template-columns: 1.2fr 2.8fr;\r\n        gap: 20px;\r\n        margin: 0 auto;\r\n        padding: 50px 150px !important;\r\n        width: 100%;\r\n        background: linear-gradient(-45deg, #000000, #001a1a, #003333, #004d4d);\r\n        background-size: 400% 400%;\r\n        animation: gradientBG 15s ease infinite;\r\n        border-radius: 0;\r\n        box-shadow: 0 0 30px rgba(0, 255, 255, 0.2);\r\n    }\r\n\r\n\r\n    @media (max-width: 1024px) {\r\n        .rtl-podcast-player .container {\r\n            padding: 30px 45px;\r\n            grid-template-columns: 1fr 2fr;\r\n        }\r\n        \r\n        .rtl-podcast-player h1 {\r\n            font-size: 2em;\r\n        }\r\n    }\r\n\r\n\r\n    @media (max-width: 768px) {\r\n        .rtl-podcast-player .container {\r\n            padding: 20px !important; \/* Override padding *\/\r\n            margin: 0 !important; \/* Reset margin *\/\r\n            width: 100% !important;\r\n            max-width: 100% !important;\r\n            grid-template-columns: 1fr;\r\n            overflow-x: hidden; \/* Prevent horizontal scroll *\/\r\n        }\r\n        \r\n        .rtl-podcast-player #episode-grid,\r\n        .rtl-podcast-player .episode,\r\n        .rtl-podcast-player #featured-episode,\r\n        .rtl-podcast-player .host-biography,\r\n        .rtl-podcast-player .social-share-buttons {\r\n            width: 100% !important;\r\n            margin-left: auto !important;\r\n            margin-right: auto !important;\r\n            padding: 15px !important;\r\n        }\r\n        \r\n        .rtl-podcast-player h1,\r\n        .rtl-podcast-player h2,\r\n        .rtl-podcast-player p {\r\n            padding-left: 10px !important;\r\n            padding-right: 10px !important;\r\n            text-align: center;\r\n        }\r\n\r\n        .rtl-podcast-player #episode-grid {\r\n            grid-template-columns: 1fr !important; \/* Force single column *\/\r\n            gap: 20px;\r\n        }\r\n        \r\n        .rtl-podcast-player .episode {\r\n            width: 100% !important;\r\n            margin: 0 auto !important;\r\n        }\r\n    }\r\n\r\n\r\n@media (max-width: 480px) {\r\n    .rtl-podcast-player .container {\r\n        padding: 10px !important;\r\n    }\r\n    \r\n    .rtl-podcast-player #featured-episode,\r\n    .rtl-podcast-player .episode {\r\n        padding: 15px !important;\r\n        width: 100% !important;\r\n        margin: 0 auto !important;\r\n    }\r\n}\r\n\r\n.rtl-podcast-player h1 {\r\n    color: #00ffff;\r\n    text-align: center;\r\n    font-size: 2.3em;\r\n    margin-bottom: 40px;\r\n    font-weight: 700;\r\n    width: 100%;\r\n    grid-column: 1 \/ -1;\r\n    text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);\r\n}\r\n\r\n  #fixed-player-bar {\r\n        display: flex;               \/* Assure l'affichage en flex *\/\r\n        flex-direction: column;       \/* Organisation en colonne *\/\r\n        align-items: center;          \/* Centre les \u00e9l\u00e9ments *\/\r\n        padding: 10px;\r\n        gap: 10px;                    \/* Espace entre chaque ligne *\/\r\n        background: rgba(26, 26, 26, 0.95); \/* Conserve l\u2019arri\u00e8re-plan *\/\r\n        display: none;                \/* Masqu\u00e9 par d\u00e9faut *\/\r\n    }\r\n\r\n    \/* Ligne 1 : Titre de l'\u00e9pisode *\/\r\n    #fixed-player-title {\r\n        display: block;               \/* Force l'affichage sur une ligne compl\u00e8te *\/\r\n        text-align: center;\r\n        font-size: 1.2em;\r\n        color: #00ffff;\r\n        width: 100%;                  \/* Prend la largeur compl\u00e8te *\/\r\n    }\r\n\r\n    \/* Ligne 2 : Player audio *\/\r\n    #fixed-player-audio {\r\n        display: block;               \/* Force l'affichage sur une ligne compl\u00e8te *\/\r\n        width: 100%;\r\n    }\r\n\r\n    \/* Ligne 3 : Conteneur pour les boutons Chromecast et fermeture *\/\r\n    .audio-controls-container {\r\n        display: flex;\r\n        justify-content: center;\r\n        gap: 20px;\r\n        width: 100%;                  \/* Assure une disposition sur toute la largeur *\/\r\n    }\r\n\r\n    \/* Styles des boutons *\/\r\n    #chromecast-button, #close-fixed-player {\r\n        width: 40px;\r\n        height: 40px;\r\n        border: none;\r\n        cursor: pointer;\r\n    }\r\n}\r\n\r\n  @media (max-width: 768px) {\r\n    .rtl-podcast-player h1 {\r\n        margin-top: 0px !important; \/* Ajustez la valeur selon vos besoins *\/\r\n    }\r\n}\r\n  \r\n.rtl-podcast-player #featured-episode {\r\n    \/* Remplacer ces styles *\/\r\n    display: flex;\r\n    flex-direction: column;\r\n    height: 100%; \/* Ajout de cette ligne *\/\r\n    padding: 30px;\r\n    border-radius: 15px;\r\n    background-color: transparent;\r\n    color: #ffffff;\r\n    transition: all 0.3s ease;\r\n}\r\n\r\n.rtl-podcast-player #featured-episode:hover {\r\n    transform: translateY(-5px);\r\n}\r\n\r\n.rtl-podcast-player #featured-episode h3 {\r\n    color: #00ffff;\r\n    margin-bottom: 15px;\r\n    font-weight: 500;\r\n}\r\n\r\n.rtl-podcast-player #featured-episode button, .rtl-podcast-player .episode button {\r\n    width: 60px;\r\n    height: 60px;\r\n    border-radius: 50%;\r\n    padding: 0;\r\n    background-image: url('https:\/\/static.vecteezy.com\/system\/resources\/thumbnails\/017\/196\/540\/small\/3d-play-button-icon-transparent-background-free-png.png');\r\n    background-size: 35px;\r\n    background-position: center;\r\n    background-repeat: no-repeat;\r\n    font-size: 0;\r\n    position: relative;\r\n}\r\n\r\n    .rtl-podcast-player .date-badge {\r\n        background: rgba(0, 255, 255, 0.1);\r\n        border: 2px solid #00ffff;\r\n        border-radius: 8px;\r\n        padding: 8px 15px;\r\n        color: #00ffff;\r\n        font-weight: bold;\r\n        text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);\r\n        box-shadow: \r\n            0 0 5px rgba(0, 255, 255, 0.2),\r\n            0 0 10px rgba(0, 255, 255, 0.2),\r\n            0 0 15px rgba(0, 255, 255, 0.2),\r\n            0 0 20px rgba(0, 255, 255, 0.2);\r\n        animation: neonPulse 1.5s ease-in-out infinite;\r\n        margin: 15px auto 20px auto; \/* Increased bottom margin *\/\r\n        display: block; \/* Changed from inline-block to block *\/\r\n        width: fit-content;\r\n    }\r\n\r\n    @keyframes neonPulse {\r\n        0%, 100% {\r\n            box-shadow: \r\n                0 0 5px rgba(0, 255, 255, 0.2),\r\n                0 0 10px rgba(0, 255, 255, 0.2),\r\n                0 0 15px rgba(0, 255, 255, 0.2),\r\n                0 0 20px rgba(0, 255, 255, 0.2);\r\n        }\r\n        50% {\r\n            box-shadow: \r\n                0 0 10px rgba(0, 255, 255, 0.4),\r\n                0 0 20px rgba(0, 255, 255, 0.4),\r\n                0 0 30px rgba(0, 255, 255, 0.4),\r\n                0 0 40px rgba(0, 255, 255, 0.4);\r\n        }\r\n    }\r\n\r\n\r\n.rtl-podcast-player #featured-episode img,\r\n.rtl-podcast-player .episode img {\r\n    border-radius: 15px;\r\n    object-fit: cover;\r\n}\r\n\r\n.rtl-podcast-player .modal-content img {\r\n    border-radius: 15px;\r\n    object-fit: cover;\r\n}\r\n\r\n.rtl-podcast-player .episode button:hover::after,\r\n.rtl-podcast-player #featured-episode button:hover::after {\r\n    content: \"Ecouter ce podcast\";\r\n    position: absolute;\r\n    bottom: -35px;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    background: rgba(0, 0, 0, 0.8);\r\n    color: #fff;\r\n    padding: 5px 10px;\r\n    border-radius: 5px;\r\n    font-size: 14px;\r\n    white-space: nowrap;\r\n    z-index: 1000;\r\n}\r\n\r\n.rtl-podcast-player #featured-episode button:hover {\r\n    background-color: #00cccc;\r\n    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);\r\n}\r\n\r\n.rtl-podcast-player #episode-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(2, 1fr);\r\n    gap: 20px;\r\n}\r\n\r\n    .rtl-podcast-player .episode {\r\n        padding: 20px;\r\n        border-radius: 15px;\r\n        box-shadow: 0 0 15px rgba(0, 255, 255, 0.1);\r\n        text-align: center;\r\n        background-color: #1a1a1a;\r\n        transition: all 0.3s ease;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n    }\r\n\r\n    .rtl-podcast-player .episode p {\r\n        color: #ffffff;\r\n    }\r\n\r\n\r\n.rtl-podcast-player .episode:hover {\r\n    box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);\r\n    transform: translateY(-3px);\r\n}\r\n\r\n.rtl-podcast-player .episode h5 {\r\n    margin-bottom: 10px;\r\n    color: #00ffff;\r\n}\r\n\r\n.rtl-podcast-player .episode a {\r\n    color: #00ffff;\r\n    text-decoration: none;\r\n}\r\n\r\n    .rtl-podcast-player .episode button:hover {\r\n        background-color: #00cccc;\r\n        box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);\r\n    }\r\n    \r\n    .search-filter-container {\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        gap: 15px;\r\n        margin-bottom: 30px;\r\n        width: 100%;\r\n    }\r\n\r\n    .search-filter-container input,\r\n    .search-filter-container select {\r\n        padding: 10px 15px;\r\n        border: 2px solid #00ffff;\r\n        border-radius: 8px;\r\n        background: rgba(0, 0, 0, 0.3);\r\n        color: #fff;\r\n        font-size: 16px;\r\n        width: 200px;\r\n    }\r\n\r\n    .search-filter-container input::placeholder {\r\n        color: rgba(255, 255, 255, 0.6);\r\n    }\r\n\r\n    .search-filter-container input:focus,\r\n    .search-filter-container select:focus {\r\n        outline: none;\r\n        box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);\r\n    }\r\n\r\n    .search-filter-container select {\r\n        cursor: pointer;\r\n    }\r\n\r\n    .search-filter-container select option {\r\n        background-color: #1a1a1a;\r\n        color: #fff;\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n        .search-filter-container {\r\n            flex-direction: column;\r\n            gap: 10px;\r\n        }\r\n\r\n        .search-filter-container input,\r\n        .search-filter-container select {\r\n            width: 100%;\r\n            max-width: 300px;\r\n        }\r\n    }\r\n\r\n    color: #000;\r\n    border: none;\r\n    padding: 8px 20px;\r\n    border-radius: 20px;\r\n    cursor: pointer;\r\n    font-weight: 500;\r\n    transition: all 0.3s ease;\r\n    margin-top: 10px; \/* Add space above button *\/\r\n    display: block; \/* Ensure block-level display *\/\r\n    margin-left: auto;\r\n    margin-right: auto;\r\n}\r\n\r\n.rtl-podcast-player .episode button:hover {\r\n    background-color: #00cccc;\r\n    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);\r\n}\r\n\r\n.rtl-podcast-player .pagination {\r\n    text-align: center !important;\r\n    margin-top: 30px !important;\r\n    display: flex !important;\r\n    justify-content: center !important;\r\n    align-items: center !important;\r\n    gap: 5px !important;\r\n    width: auto !important;\r\n}\r\n\r\n  .rtl-podcast-player #page-numbers {\r\n    display: flex !important;\r\n    gap: 5px !important;\r\n    margin: 0 5px !important;\r\n}\r\n  \r\n.rtl-podcast-player .pagination button,\r\n.rtl-podcast-player .pagination #prev-btn,\r\n.rtl-podcast-player .pagination #next-btn {\r\n    margin: 0 !important;  \/* Chang\u00e9 de 5px \u00e0 0 *\/\r\n    padding: 8px 16px;\r\n    font-size: 1em;\r\n    background-color: #1a1a1a;\r\n    color: #00ffff;\r\n    border: 1px solid #00ffff;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n    float: none !important;\r\n    display: inline-flex !important;\r\n    align-items: center !important;\r\n    justify-content: center !important;\r\n}\r\n\r\n.rtl-podcast-player .pagination button:hover {\r\n    background-color: #00ffff;\r\n    color: #000;\r\n    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);\r\n}\r\n\r\n.rtl-podcast-player .modal {\r\n    display: none;\r\n    position: fixed;\r\n    z-index: 1000;\r\n    left: 0;\r\n    top: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    overflow: auto;\r\n    background-color: rgba(0, 0, 0, 0.8);\r\n    backdrop-filter: blur(8px);\r\n}\r\n\r\n.rtl-podcast-player .modal-content {\r\n    background-color: #1a1a1a;\r\n    padding: 40px;\r\n    border: 2px solid #00ffff;\r\n    width: 90%;\r\n    max-width: 500px;\r\n    max-height: 90vh;\r\n    border-radius: 20px;\r\n    text-align: center;\r\n    box-shadow: 0 0 40px rgba(0, 255, 255, 0.3);\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    overflow-y: auto;\r\n    color: white;\r\n}\r\n\r\n.rtl-podcast-player .close {\r\n    position: absolute;\r\n    top: 10px;\r\n    right: 20px;\r\n    color: #00ffff;\r\n    font-size: 35px;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n    transition: color 0.3s;\r\n}\r\n\r\n.rtl-podcast-player .close:hover {\r\n    color: #00cccc;\r\n    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);\r\n}\r\n\r\n.rtl-podcast-player #chromecast-button {\r\n    background-color: #00ffff;\r\n    border: none;\r\n    padding: 10px 20px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n    color: #000;\r\n    margin-top: 20px;\r\n    font-weight: bold;\r\n    display: inline-block;\r\n}\r\n\r\n.rtl-podcast-player audio::-webkit-media-controls-panel {\r\n    background-color: #2a2a2a;\r\n}\r\n\r\n.rtl-podcast-player audio::-webkit-media-controls-current-time-display,\r\n.rtl-podcast-player audio::-webkit-media-controls-time-remaining-display {\r\n    color: #000000;\r\n}\r\n\r\n.rtl-podcast-player #fixed-player-bar {\r\n    position: fixed;\r\n    bottom: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    background: rgba(26, 26, 26, 0.95);\r\n    backdrop-filter: blur(10px);\r\n    padding: 10px 20px;\r\n    z-index: 999;\r\n    border-top: 2px solid #00ffff;\r\n}\r\n\r\n.rtl-podcast-player .fixed-player-content {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    gap: 20px;\r\n}\r\n\r\n\r\n.rtl-podcast-player #fixed-player-title {\r\n    color: #00ffff;\r\n    font-size: 1em;\r\n    margin: 0;\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    flex: 1;\r\n}\r\n\r\n.rtl-podcast-player #fixed-player-audio {\r\n    flex: 2;\r\n    max-width: 500px;\r\n}\r\n\r\n.episode-card {\r\n    background: rgba(0, 0, 0, 0.3);\r\n    border: 1px solid rgba(0, 255, 255, 0.3);\r\n    border-radius: 15px;\r\n    padding: 20px;\r\n    margin-bottom: 20px;\r\n    transition: all 0.3s ease;\r\n    cursor: pointer;\r\n}\r\n\r\n.episode-card:hover {\r\n    transform: translateY(-5px);\r\n    box-shadow: 0 5px 15px rgba(0, 255, 255, 0.2);\r\n}\r\n\r\n.episode-card img {\r\n    width: 100%;\r\n    max-width: 200px;\r\n    border-radius: 10px;\r\n    margin: 10px 0;\r\n}\r\n\r\n.episode-card button {\r\n    margin-top: 10px;\r\n}\r\n  \r\n\/* Conserve les styles des boutons play et mute *\/\r\naudio::-webkit-media-controls-play-button,\r\naudio::-webkit-media-controls-mute-button {\r\n    background-color: #40E0D0 !important; \/* Bleu turquoise *\/\r\n    border-radius: 50% !important;\r\n    transition: all 0.3s ease !important;\r\n}\r\n\r\naudio::-webkit-media-controls-play-button:hover,\r\naudio::-webkit-media-controls-mute-button:hover {\r\n    background-color: #5FECEC !important; \/* Bleu turquoise plus clair au survol *\/\r\n    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5) !important;\r\n}\r\n\r\n\/* Tentative pour changer la couleur du trait de progression *\/\r\naudio::-webkit-media-controls-timeline {\r\n    color: #a6a6a6 !important; \/* Essaye de cibler le trait turquoise *\/\r\n}\r\n\r\n\/* Modifie la couleur des trois petits points *\/\r\naudio::-webkit-media-controls-panel {\r\n    background-color: transparent !important; \/* Assure que le fond ne prend pas de couleur *\/\r\n    color: #40E0D0 !important; \/* Forcer la couleur turquoise pour les trois points *\/\r\n}\r\n\r\n\/* Tentative suppl\u00e9mentaire pour cibler le trait du curseur de progression *\/\r\naudio::-webkit-slider-runnable-track {\r\n    background-color: #40E0D0 !important; \/* Bleu turquoise pour la piste *\/\r\n}\r\n\r\naudio::-webkit-slider-thumb {\r\n    background-color: #a6a6a6 !important; \/* Plus clair pour le curseur lui-m\u00eame *\/\r\n}\r\n\r\n  .duration-badge {\r\n    background: rgba(0, 0, 0, 0.6);\r\n    color: #00ffff;\r\n    padding: 5px 10px;\r\n    border-radius: 15px;\r\n    font-size: 0.9em;\r\n    margin: 10px 0;\r\n    display: inline-block;\r\n    border: 1px solid rgba(0, 255, 255, 0.3);\r\n}\r\n\r\n.duration-icon {\r\n    display: inline-block;\r\n    margin-right: 5px;\r\n    vertical-align: middle;\r\n}\r\n\r\n\r\n@media (max-width: 768px) {\r\n    .rtl-podcast-player .fixed-player-content {\r\n        flex-direction: column;\r\n        gap: 10px;\r\n        padding: 15px;\r\n    }\r\n\r\n    .rtl-podcast-player #fixed-player-audio {\r\n        width: 100%;\r\n        max-width: 100%;\r\n    }\r\n\r\n    .rtl-podcast-player #fixed-player-title {\r\n        width: 100%;\r\n        text-align: center;\r\n        font-size: 0.9em;\r\n    }\r\n}\r\n\r\n.rtl-podcast-player .social-button {\r\n    width: 45px;\r\n    height: 45px;\r\n    border-radius: 50%;\r\n    border: none;\r\n    cursor: pointer;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    transition: transform 0.2s ease-in-out;\r\n    box-shadow: 0 2px 5px rgba(0,0,0,0.2);\r\n}\r\n\r\n.rtl-podcast-player .social-button:hover {\r\n    transform: scale(1.1);\r\n}\r\n\r\n@media (max-width: 768px) {\r\n    .rtl-podcast-player .social-share-buttons {\r\n        gap: 10px;\r\n    }\r\n    \r\n    .rtl-podcast-player .social-button {\r\n        width: 40px;\r\n        height: 40px;\r\n    }\r\n    \r\n    .rtl-podcast-player .social-button svg {\r\n        width: 20px;\r\n        height: 20px;\r\n    }\r\n}\r\n\r\n.navigation-buttons {\r\n    position: absolute;\r\n    width: 100%;\r\n    top: 50%;\r\n    left: 0;\r\n    transform: translateY(-50%);\r\n    display: flex;\r\n    justify-content: space-between;\r\n    padding: 0 10px;\r\n    pointer-events: none;\r\n    z-index: 1000;\r\n}\r\n\r\n.nav-button {\r\n    background: rgba(0, 0, 0, 0.7);\r\n    border: 2px solid #00ffff;\r\n    border-radius: 50%;\r\n    width: 40px;\r\n    height: 40px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n    pointer-events: auto;\r\n}  \r\n\r\n.nav-button:hover {\r\n    background: rgba(0, 255, 255, 0.2);\r\n    transform: scale(1.1);\r\n}\r\n\r\n.nav-button svg {\r\n    width: 24px;\r\n    height: 24px;\r\n}\r\n\r\n@media (max-width: 768px) {\r\n    .nav-button {\r\n        width: 35px;\r\n        height: 35px;\r\n    }\r\n    \r\n    .nav-button svg {\r\n        width: 20px;\r\n        height: 20px;\r\n    }\r\n}\r\n<\/style>\r\n<script type=\"text\/javascript\" src=\"\/\/www.gstatic.com\/cv\/js\/sender\/v1\/cast_sender.js\"><\/script>\r\n\r\n<\/head><body>\r\n<div class=\"rtl-podcast-player\">\r\n    <div class=\"container\" style=\"background: linear-gradient(-45deg, #000000, #001a1a, #003333, #004d4d);\r\n    background-size: 400% 400%;\r\n    animation: gradientBG 15s ease infinite;\r\n    border-radius: 0; \/* Changed from 20px to 0 *\/\r\n    box-shadow: 0 0 30px rgba(0, 255, 255, 0.2);\">\r\n    <h1 style=\"color: #00ffff; text-align: center; font-size: 2.1em; margin-bottom: 40px; font-weight: 700; width: 100%; grid-column: 1 \/ -1; text-shadow: 0 0 10px rgba(0, 255, 255, 0.3); padding: 0 15px; display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap;\">\r\nCode Source - Le podcast quotidien d'actualit\u00e9 du Parisien<img decoding=\"async\" src=\"https:\/\/www.mediaspecs.fr\/wp-content\/uploads\/2022\/11\/Le-Parisien-2023.jpg\" alt=\"Logo RMC\" style=\"width: 60px; height: 60px; border-radius: 50%; padding: 5px; background: white; box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);\">\r\n<\/h1>\r\n    <div class=\"social-share-buttons\" style=\"display: flex; justify-content: center; align-items: center; gap: 15px; margin-bottom: 30px; width: 100%; grid-column: 1 \/ -1;\">\r\n    <button onclick=\"shareOnX()\" class=\"social-button\" style=\"background-color: #000;\">\r\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"#fff\">\r\n            <path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\"><\/path>\r\n        <\/svg>\r\n    <\/button>\r\n    <button onclick=\"shareOnWhatsapp()\" class=\"social-button\" style=\"background-color: #25D366;\">\r\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"#fff\">\r\n            <path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z\"><\/path>\r\n        <\/svg>\r\n    <\/button>\r\n    <button onclick=\"shareOnFacebook()\" class=\"social-button\" style=\"background-color: #1877F2;\">  \r\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"#fff\">\r\n            <path d=\"M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z\"><\/path>\r\n        <\/svg>\r\n    <\/button>\r\n    <button onclick=\"shareOnLinkedIn()\" class=\"social-button\" style=\"background-color: #0A66C2;\">\r\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"#fff\">\r\n            <path d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\"><\/path>\r\n        <\/svg>\r\n    <\/button>\r\n<\/div>\r\n      \r\n    <div id=\"featured-episode\" style=\"display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: space-between; gap: 20px; height: 100%; position: relative; padding-top: 20px; cursor: pointer;\">\r\n  <div class=\"features-episode\" style=\"width: 100%; height: 100%;\">\r\n    <!-- Premi\u00e8re carte (derni\u00e8re \u00e9mission) -->\r\n    <div class=\"episode-card\">\r\n      <h3 style=\"color: #00ffff; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;\"><\/h3>\r\n      <p style=\"display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 3em; \/* Strictement limit\u00e9 \u00e0 180 caract\u00e8res *\/\" class=\"truncate-text\"><\/p>\r\n      <div class=\"date-badge\"><\/div>\r\n      <button onclick=\"openModal('', '')\"><\/button>\r\n    <\/div>\r\n            \r\n    <!-- Deuxi\u00e8me carte (avant-derni\u00e8re \u00e9mission) -->\r\n    <div class=\"episode-card\">\r\n      <h3 style=\"color: #00ffff; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;\"><\/h3>\r\n      <p style=\"display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 3em; \/* Strictement limit\u00e9 \u00e0 180 caract\u00e8res *\/\" class=\"truncate-text\"><\/p>\r\n      <div class=\"date-badge\"><\/div>\r\n      <button onclick=\"openModal('', '')\"><\/button>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n    <div>\r\n    <div class=\"search-filter-container\">\r\n        <input type=\"text\" id=\"podcast-search\" placeholder=\"Rechercher un podcast...\" oninput=\"filterAndDisplayEpisodes()\">\r\n        <select id=\"podcast-filter\" onchange=\"filterAndDisplayEpisodes()\">\r\n            <option value=\"newest\">Plus r\u00e9cents<\/option>\r\n            <option value=\"oldest\">Plus anciens<\/option>\r\n        <\/select>\r\n    <\/div>\r\n    <div id=\"episode-grid\">\r\n        <style>\r\n            .episode {\r\n                cursor: pointer;\r\n            }\r\n            \r\n            .episode > * {\r\n                pointer-events: none;\r\n            }\r\n            \r\n            .episode button {\r\n                pointer-events: auto;\r\n            }\r\n\r\n            \/* Ajout des styles pour la dur\u00e9e *\/\r\n            .duration-badge {\r\n                background: rgba(0, 0, 0, 0.6);\r\n                color: #00ffff;\r\n                padding: 5px 10px;\r\n                border-radius: 15px;\r\n                font-size: 0.9em;\r\n                margin: 10px 0;\r\n                display: inline-block;\r\n                border: 1px solid rgba(0, 255, 255, 0.3);\r\n            }\r\n\r\n            .duration-icon {\r\n                display: inline-block;\r\n                margin-right: 5px;\r\n                vertical-align: middle;\r\n            }\r\n        <\/style>\r\n\r\n        <script>\r\n            function formatDuration(durationInSeconds) {\r\n                const hours = Math.floor(durationInSeconds \/ 3600);\r\n                const minutes = Math.floor((durationInSeconds % 3600) \/ 60);\r\n                \r\n                if (hours > 0) {\r\n                    return `${hours}h ${minutes}min`;\r\n                } else {\r\n                    return `${minutes} min`;\r\n                }\r\n            }\r\n\r\n            const originalDisplayEpisodes = window.displayEpisodes;\r\n            window.displayEpisodes = function(page, episodes) {\r\n                const episodeGrid = document.getElementById(\"episode-grid\");\r\n                episodeGrid.innerHTML = \"\";\r\n                const episodesWithoutFeatured = episodes.slice(2);\r\n                const start = (page - 1) * episodesPerPage;  \r\n                const end = start + episodesPerPage;\r\n                \r\n                episodesWithoutFeatured.slice(start, end).forEach(item => {\r\n                    \/\/ Simulation de dur\u00e9e (puisque l'API ne fournit pas cette info)\r\n                    const simulatedDuration = Math.floor(Math.random() * (180 - 45 + 1)) + 45; \/\/ Entre 45 et 180 minutes\r\n                    \r\n                    episodeGrid.innerHTML += `\r\n                    <div class=\"episode\">\r\n                        <h5 style=\"color: #00ffff;\">${sanitizeString(item.title)}<\/h5>\r\n                        <img decoding=\"async\" src=\"${item.thumbnail || DEFAULT_IMAGE}\" alt=\"Image de l'\u00e9pisode\" style=\"width: 100%; max-width: 150px; border-radius: 10px; margin: 10px 0;\">\r\n                        <div class=\"description\" style=\"color: white;\">${truncateDescription(item.description)}<\/div>\r\n                        <div class=\"duration-badge\">\r\n                            <span class=\"duration-icon\">\u23f1<\/span>\r\n                            ${formatDuration(simulatedDuration * 60)}\r\n                        <\/div>\r\n                        <div class=\"date-badge\">\r\n                            ${new Date(item.pubDate).toLocaleDateString('fr-FR', {\r\n                                day: '2-digit',\r\n                                month: '2-digit',\r\n                                year: '2-digit'\r\n                            })}\r\n                        <\/div>\r\n                        <button onclick=\"openModal('${sanitizeString(item.enclosure.link)}', '${sanitizeString(item.title)}')\"><\/button>\r\n                    <\/div>\r\n                    `;\r\n                });\r\n                updatePaginationButtons();\r\n            }\r\n\r\n            \/\/ Modification de displayFeaturedEpisode pour inclure la dur\u00e9e\r\n            const originalDisplayFeaturedEpisode = window.displayFeaturedEpisode;\r\n            window.displayFeaturedEpisode = function(episode) {\r\n                const featuredEpisode = document.getElementById(\"featured-episode\");\r\n                const simulatedDuration1 = Math.floor(Math.random() * (180 - 45 + 1)) + 45;\r\n                const simulatedDuration2 = Math.floor(Math.random() * (180 - 45 + 1)) + 45;\r\n                \r\n                featuredEpisode.innerHTML = `\r\n                <div class=\"features-episode\" style=\"width: 100%; height: 100%;\">\r\n                    <div class=\"episode-card\" onclick=\"openModal('${sanitizeString(allEpisodes[0].enclosure.link)}', '${sanitizeString(allEpisodes[0].title)}')\">\r\n                        <h3 style=\"color: #00ffff;\">${sanitizeString(allEpisodes[0].title)}<\/h3>\r\n                        <img decoding=\"async\" src=\"${allEpisodes[0].thumbnail || DEFAULT_IMAGE}\" alt=\"Image de la derni\u00e8re \u00e9mission\" style=\"width: 100%; max-width: 200px; border-radius: 10px; margin: 10px 0;\">\r\n                        <div class=\"description\" style=\"color: white;\">${truncateDescription(allEpisodes[0].description)}<\/div>\r\n                        <div class=\"duration-badge\">\r\n                            <span class=\"duration-icon\">\u23f1<\/span>\r\n                            ${formatDuration(simulatedDuration1 * 60)}\r\n                        <\/div>\r\n                        <div class=\"date-badge\">\r\n                            ${new Date(allEpisodes[0].pubDate).toLocaleDateString('fr-FR', {\r\n                                day: '2-digit',\r\n                                month: '2-digit',\r\n                                year: '2-digit'\r\n                            })}\r\n                        <\/div>\r\n                        <button><\/button>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"episode-card\" onclick=\"openModal('${sanitizeString(allEpisodes[1].enclosure.link)}', '${sanitizeString(allEpisodes[1].title)}')\">\r\n                        <h3 style=\"color: #00ffff;\">${sanitizeString(allEpisodes[1].title)}<\/h3>\r\n                        <img decoding=\"async\" src=\"${allEpisodes[1].thumbnail || DEFAULT_IMAGE}\" alt=\"Image de l'avant-derni\u00e8re \u00e9mission\" style=\"width: 100%; max-width: 200px; border-radius: 10px; margin: 10px 0;\">\r\n                        <div class=\"description\" style=\"color: white;\">${truncateDescription(allEpisodes[1].description)}<\/div>\r\n                        <div class=\"duration-badge\">\r\n                            <span class=\"duration-icon\">\u23f1<\/span>\r\n                            ${formatDuration(simulatedDuration2 * 60)}\r\n                        <\/div>\r\n                        <div class=\"date-badge\">\r\n                            ${new Date(allEpisodes[1].pubDate).toLocaleDateString('fr-FR', {\r\n                                day: '2-digit',\r\n                                month: '2-digit',\r\n                                year: '2-digit'\r\n                            })}\r\n                        <\/div>\r\n                        <button><\/button>\r\n                    <\/div>\r\n                <\/div>\r\n                `;\r\n            }\r\n        <\/script>\r\n    <\/div>\r\n    <div class=\"pagination\" id=\"pagination\">\r\n        <button id=\"prev-btn\" onclick=\"changePage('prev')\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M15 18l-6-6 6-6\"><\/path>\r\n            <\/svg>\r\n        <\/button>\r\n        <span id=\"page-numbers\"><\/span>\r\n        <button id=\"next-btn\" onclick=\"changePage('next')\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M9 18l6-6-6-6\"><\/path>\r\n            <\/svg>\r\n        <\/button>\r\n    <\/div>\r\n    <div class=\"ad-banner\" style=\"width: 100%; max-width: 508px; margin: 20px auto; text-align: center; grid-column: 1 \/ -1; background: rgba(0,0,0,0.3); padding: 15px; border-radius: 10px; border: 1px solid rgba(0, 255, 255, 0.2); transition: transform 0.3s ease;\">\r\n        <p style=\"color: #666; font-size: 12px; margin-bottom: 10px;\">Publicit\u00e9<\/p>\r\n        <a href=\"https:\/\/universal-academy.com\/recruter-des-alternants-dans-le-tourisme\/\" target=\"_blank\" style=\"display: inline-block;\">\r\n            <img decoding=\"async\" src=\"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/11\/Design-sans-titre-2024-11-06T134332.299.webp\" alt=\"Banni\u00e8re publicitaire RTL\" style=\"width: 100%; max-width: 700px; height: auto; border-radius: 8px; transition: transform 0.3s ease;\" onmouseover=\"this.style.transform='scale(1.02)'\" onmouseout=\"this.style.transform='scale(1)'\">\r\n        <\/a>\r\n    <\/div>\r\n<\/div>\r\n    \r\n    <div class=\"host-biography\" style=\"grid-column: 1 \/ -1; background: rgba(0, 0, 0, 0.3); padding: 30px; border-radius: 15px; margin-top: 30px; border: 1px solid rgba(0, 255, 255, 0.2);\">\r\n    <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 30px;\">\r\n        <!-- Media query pour passer en une colonne sur mobile -->\r\n        <style>\r\n            @media (max-width: 768px) {\r\n                .host-biography > div {\r\n                    grid-template-columns: 1fr !important;\r\n                }\r\n            }\r\n        <\/style>\r\n\r\n      <div class=\"host-biography\" style=\"grid-column: 1 \/ -1; padding: 30px; border-radius: 15px; margin-top: 30px;\">\r\n    <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 30px;\">\r\n      <div style=\"grid-column: 1 \/ -1; margin-bottom: 30px; text-align: center;\">\r\n    <h2 style=\"color: #00ffff; margin-bottom: 20px; text-align: center;\">Code Source : Le podcast quotidien d'actualit\u00e9 du Parisien<\/h2>\r\n\r\n    <!-- Nouveaux boutons de r\u00e9seaux sociaux -->\r\n    <div style=\"display: flex; justify-content: center; align-items: center; gap: 20px; margin: 20px 0;\">\r\n        <a href=\"https:\/\/www.facebook.com\/leparisien\/?locale=fr_FR\" target=\"_blank\" style=\"position: relative; width: 50px; height: 50px; background: #1877F2; border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; cursor: pointer;\">\r\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 24 24\" fill=\"#ffffff\">\r\n        <path d=\"M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z\"><\/path>\r\n    <\/svg>\r\n    <span style=\"position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.8); color: #fff; padding: 5px 10px; border-radius: 5px; font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.3s ease; pointer-events: none;\">Voir leur Facebook<\/span>\r\n<\/a>\r\n\r\n        <a href=\"https:\/\/www.instagram.com\/leparisien\/\" target=\"_blank\" style=\"position: relative; width: 50px; height: 50px; background: #E4405F; border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; cursor: pointer;\">\r\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 24 24\" fill=\"#ffffff\">\r\n        <path d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z\"><\/path>\r\n    <\/svg>\r\n<\/a>\r\n\r\n        <a href=\"https:\/\/www.leparisien.fr\/\" target=\"_blank\" style=\"position: relative; width: 50px; height: 50px; background: #00ffff; border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; cursor: pointer;\">\r\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 24 24\" fill=\"#000000\">\r\n        <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z\"><\/path>\r\n    <\/svg>\r\n<\/a>\r\n    <\/div>\r\n\r\n    <style>\r\n        \/* Hover effects pour les boutons *\/\r\n        .host-biography a:hover {\r\n            transform: scale(1.1);\r\n            box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);\r\n        }\r\n        \r\n        .host-biography a:hover span {\r\n            opacity: 1;\r\n        }\r\n\r\n        \/* Media queries pour le responsive *\/\r\n        @media (max-width: 768px) {\r\n            .host-biography div[style*=\"display: flex\"] {\r\n                flex-wrap: wrap;\r\n                justify-content: center;\r\n                gap: 15px;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n    <p style=\"color: #ffffff; line-height: 1.6; text-align: center; max-width: 1200px; margin: 0 auto;\">\r\nCode Source est le podcast quotidien d'actualit\u00e9 du Parisien. La r\u00e9daction du journal vous invite dans ses coulisses et vous fait d\u00e9couvrir le dessous des grandes histoires de l'actualit\u00e9. Chaque jour, du lundi au vendredi, les journalistes du Parisien partagent avec vous leur expertise et leur savoir-faire pour d\u00e9crypter un \u00e9v\u00e9nement, une tendance ou un fait marquant de l'actualit\u00e9. En 20 minutes environ, Code Source vous propose un reportage enrichi d'extraits d'archives et de t\u00e9moignages pour comprendre en profondeur les enjeux d'un sujet. Le podcast aborde aussi bien l'actualit\u00e9 politique, que les faits divers, les ph\u00e9nom\u00e8nes de soci\u00e9t\u00e9 ou encore les grands \u00e9v\u00e9nements sportifs et culturels. Avec plus de 900 \u00e9pisodes \u00e0 son actif, Code Source s'est impos\u00e9 comme une r\u00e9f\u00e9rence du podcast d'actualit\u00e9 en France, r\u00e9unissant chaque jour des dizaines de milliers d'auditeurs fid\u00e8les. La force de Code Source r\u00e9side dans sa capacit\u00e9 \u00e0 raconter l'actualit\u00e9 de mani\u00e8re vivante et accessible, en s'appuyant sur l'expertise des journalistes du Parisien et leur connaissance approfondie des sujets trait\u00e9s.\r\n<\/p>\r\n    \r\n    <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 30px; padding: 20px;\">\r\n        <!-- Les 6 cartes existantes restent inchang\u00e9es -->\r\n        <!-- Carte 1 -->\r\n        <div style=\"background: rgba(0, 0, 0, 0.4); padding: 20px; border-radius: 15px; border: 1px solid rgba(0, 255, 255, 0.3); transition: transform 0.3s ease; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 15px;\" onmouseover=\"this.style.transform='translateY(-5px)'\" onmouseout=\"this.style.transform='translateY(0)'\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#00ffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M3 18v-6a9 9 0 0 1 18 0v6\"><\/path>\r\n                <path d=\"M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z\"><\/path>\r\n            <\/svg>\r\n            <p style=\"color: #ffffff; margin: 0;\">\u00c9couter gratuitement tous les podcasts en streaming<\/p>\r\n        <\/div>\r\n\r\n        <!-- Carte 2 -->\r\n        <div style=\"background: rgba(0, 0, 0, 0.4); padding: 20px; border-radius: 15px; border: 1px solid rgba(0, 255, 255, 0.3); transition: transform 0.3s ease; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 15px;\" onmouseover=\"this.style.transform='translateY(-5px)'\" onmouseout=\"this.style.transform='translateY(0)'\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#00ffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path>\r\n                <polyline points=\"7 10 12 15 17 10\"><\/polyline>\r\n                <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"><\/line>\r\n            <\/svg>\r\n            <p style=\"color: #ffffff; margin: 0;\">T\u00e9l\u00e9charger les \u00e9pisodes pour une \u00e9coute hors-ligne<\/p>\r\n        <\/div>\r\n\r\n        <!-- Carte 3 -->\r\n        <div style=\"background: rgba(0, 0, 0, 0.4); padding: 20px; border-radius: 15px; border: 1px solid rgba(0, 255, 255, 0.3); transition: transform 0.3s ease; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 15px;\" onmouseover=\"this.style.transform='translateY(-5px)'\" onmouseout=\"this.style.transform='translateY(0)'\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#00ffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M2 16.1A5 5 0 0 1 5.9 20M2 12.05A9 9 0 0 1 9.95 20M2 8V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6\"><\/path>\r\n                <line x1=\"2\" y1=\"20\" x2=\"2\" y2=\"20\"><\/line>\r\n            <\/svg>\r\n            <p style=\"color: #ffffff; margin: 0;\">Diffuser sur votre Chromecast ou appareil compatible<\/p>\r\n        <\/div>\r\n\r\n        <!-- Carte 4 -->\r\n        <div style=\"background: rgba(0, 0, 0, 0.4); padding: 20px; border-radius: 15px; border: 1px solid rgba(0, 255, 255, 0.3); transition: transform 0.3s ease; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 15px;\" onmouseover=\"this.style.transform='translateY(-5px)'\" onmouseout=\"this.style.transform='translateY(0)'\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#00ffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\r\n                <polygon points=\"10 8 16 12 10 16 10 8\"><\/polygon>\r\n            <\/svg>\r\n            <p style=\"color: #ffffff; margin: 0;\">Acc\u00e9der \u00e0 toutes les rediffusions des \u00e9missions pr\u00e9c\u00e9dentes<\/p>\r\n        <\/div>\r\n\r\n        <!-- Carte 5 -->\r\n        <div style=\"background: rgba(0, 0, 0, 0.4); padding: 20px; border-radius: 15px; border: 1px solid rgba(0, 255, 255, 0.3); transition: transform 0.3s ease; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 15px;\" onmouseover=\"this.style.transform='translateY(-5px)'\" onmouseout=\"this.style.transform='translateY(0)'\">\r\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#00ffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"><\/path>\r\n        <circle cx=\"9\" cy=\"7\" r=\"4\"><\/circle>\r\n        <path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"><\/path>\r\n        <path d=\"M16 3.13a4 4 0 0 1 0 7.75\"><\/path>\r\n    <\/svg>\r\n    <p style=\"color: #ffffff; margin: 0;\">D\u00e9couvrez l'actualit\u00e9 d\u00e9crypt\u00e9e par les journalistes du Parisien dans Code Source, votre podcast quotidien<\/p>\r\n<\/div>\r\n\r\n        <!-- Carte 6 -->\r\n        <div style=\"background: rgba(0, 0, 0, 0.4); padding: 20px; border-radius: 15px; border: 1px solid rgba(0, 255, 255, 0.3); transition: transform 0.3s ease; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 15px; position: relative;\" onmouseover=\"this.style.transform='translateY(-5px)'\" onmouseout=\"this.style.transform='translateY(0)'\">\r\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#00ffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M4 12h1\"><\/path>\r\n        <path d=\"M9 12h1\"><\/path>\r\n        <path d=\"M14 12h1\"><\/path>\r\n        <path d=\"M19 12h1\"><\/path>\r\n        <rect x=\"2\" y=\"8\" width=\"20\" height=\"12\" rx=\"2\"><\/rect>\r\n        <path d=\"M6 8V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v4\"><\/path>\r\n        <circle cx=\"12\" cy=\"14\" r=\"4\"><\/circle>\r\n    <\/svg>\r\n    <p style=\"color: #ffffff; margin: 0; text-align: center;\">Podcasts Code Source du journal Le Parisien mis \u00e0 jour en direct d\u00e8s leur diffusion sur RadiostreamR<\/p>\r\n<\/div>\r\n    <\/div>\r\n<\/div>\r\n        \r\n        <!-- Histoire de l'\u00e9mission -->\r\n        <div style=\"padding: 20px; text-align: center;\">\r\n    <h2 style=\"color: #00ffff; margin-bottom: 20px; text-align: center;\">L'Histoire de Code Source : Le podcast d'actualit\u00e9 quotidien du Parisien<\/h2>\r\n    <p style=\"color: #ffffff; line-height: 1.6; text-align: center;\">\r\n        Lanc\u00e9 en septembre 2019 par Le Parisien, Code Source s'est rapidement impos\u00e9 comme l'un des podcasts d'actualit\u00e9 les plus \u00e9cout\u00e9s en France. Ce format innovant propose chaque jour, du lundi au vendredi, une plong\u00e9e immersive au c\u0153ur d'un fait d'actualit\u00e9 en vingt minutes environ, m\u00ealant expertises journalistiques, t\u00e9moignages exclusifs et archives sonores.\r\n    <\/p>\r\n    <p style=\"color: #ffffff; line-height: 1.6; margin-top: 15px; text-align: center;\">\r\n        La force de Code Source r\u00e9side dans sa capacit\u00e9 unique \u00e0 raconter l'actualit\u00e9 \u00e0 travers des histoires captivantes, port\u00e9es par la voix des journalistes du Parisien. Chaque \u00e9pisode permet aux auditeurs de comprendre en profondeur un \u00e9v\u00e9nement marquant, qu'il soit politique, soci\u00e9tal, sportif ou culturel, gr\u00e2ce \u00e0 un travail minutieux d'investigation et de mise en r\u00e9cit.\r\n    <\/p>\r\n    <p style=\"color: #ffffff; line-height: 1.6; margin-top: 15px; text-align: center;\">\r\n        Le succ\u00e8s de Code Source illustre parfaitement l'\u00e9volution des modes de consommation de l'information : en proposant un format audio quotidien accessible et captivant, le podcast r\u00e9pond aux attentes d'un public en qu\u00eate d'une information approfondie et contextualis\u00e9e. Avec plus de 900 \u00e9pisodes produits et des dizaines de milliers d'auditeurs quotidiens, Code Source est devenu une r\u00e9f\u00e9rence incontournable du podcast d'actualit\u00e9 en France, incarnant le savoir-faire et l'expertise des journalistes du Parisien dans un format r\u00e9solument moderne.\r\n    <\/p>\r\n    <div style=\"margin-top: 20px;\">\r\n        <img decoding=\"async\" src=\"https:\/\/medias.lesechosleparisien.fr\/wp-content\/uploads\/2019\/06\/codesource.jpg\" alt=\"Studio d'enregistrement du podcast L'Heure du Monde\" style=\"width: 100%; max-width: 400px; border-radius: 15px; box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);\">\r\n    <\/div>\r\n<\/div>\r\n\r\n        <!-- Biographie de Laurent Ruquier -->\r\n        <div style=\"display: flex; flex-direction: column; align-items: center; gap: 20px;\">\r\n    <div style=\"width: 200px; height: 200px; border-radius: 50%; overflow: hidden; border: 3px solid #00ffff;\">\r\n        <img decoding=\"async\" src=\"https:\/\/yt3.googleusercontent.com\/ytc\/AIdro_mYp64xYSKQMFAqhwydduWdv_8-vIDvJn0t1bZaoQ9ooZg=s900-c-k-c0x00ffffff-no-rj\" alt=\"Logo Le Monde\" style=\"width: 100%; height: 100%; object-fit: cover;\">\r\n    <\/div>\r\n    <div style=\"text-align: center;\">\r\n        <h2 style=\"color: #00ffff; margin-bottom: 20px;\">Le Parisien : L'actualit\u00e9 au c\u0153ur de la capitale depuis 1944<\/h2>\r\n        <p style=\"color: #ffffff; line-height: 1.8;\">\r\n            Fond\u00e9 en 1944, Le Parisien (anciennement Le Parisien lib\u00e9r\u00e9) s'est impos\u00e9 comme l'un des quotidiens majeurs de la presse fran\u00e7aise. N\u00e9 dans le contexte de la Lib\u00e9ration de Paris, le journal a su \u00e9voluer pour devenir une r\u00e9f\u00e9rence de l'information quotidienne, particuli\u00e8rement appr\u00e9ci\u00e9e pour sa proximit\u00e9 avec les lecteurs et sa couverture approfondie de l'actualit\u00e9 locale et nationale.\r\n\r\n            Le journal se distingue par son style direct, accessible et sa capacit\u00e9 \u00e0 traiter aussi bien les enjeux locaux que les grandes questions nationales et internationales. Cette approche \u00e9ditoriale unique en fait l'un des quotidiens les plus lus en \u00cele-de-France et en France.\r\n        <\/p>\r\n        <p style=\"color: #ffffff; line-height: 1.8; margin-top: 15px;\">\r\n            Au fil des ann\u00e9es, Le Parisien a su se r\u00e9inventer et s'adapter aux nouvelles technologies. Le lancement de son site web en 1996 marque le d\u00e9but d'une transformation num\u00e9rique r\u00e9ussie. Aujourd'hui, le journal propose une offre multim\u00e9dia compl\u00e8te : \u00e9dition papier, site web, applications mobiles et podcasts innovants comme Code Source.\r\n\r\n            Code Source, lanc\u00e9 en septembre 2019, illustre parfaitement cette volont\u00e9 d'innovation. Ce podcast quotidien d'actualit\u00e9 permet aux journalistes du Parisien de d\u00e9ployer leur expertise dans un format audio immersif et captivant, touchant ainsi un nouveau public tout en maintenant l'exigence journalistique qui caract\u00e9rise le journal.\r\n\r\n            La r\u00e9daction du Parisien, riche de plusieurs centaines de journalistes, continue de porter les valeurs qui ont fait son succ\u00e8s : proximit\u00e9 avec les lecteurs, rigueur journalistique et innovation constante. Que ce soit \u00e0 travers ses enqu\u00eates approfondies, ses reportages de terrain ou ses formats num\u00e9riques, Le Parisien poursuit sa mission : informer, \u00e9clairer et accompagner ses lecteurs dans la compr\u00e9hension du monde contemporain.\r\n        <\/p>\r\n    <\/div>\r\n<\/div>\r\n\r\n        <!-- Sources (span across both columns) -->\r\n        <div style=\"grid-column: 1 \/ -1; margin-top: 20px; padding: 15px; background: rgba(0, 0, 0, 0.2); border-radius: 10px; text-align: center;\">\r\n    <h3 style=\"color: #00ffff; margin-bottom: 10px; font-size: 1.2em;\">Sources :<\/h3>\r\n    <ul style=\"list-style: none; padding: 0; text-align: center; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;\">\r\n        <li>\r\n            <a href=\"https:\/\/fr.wikipedia.org\/wiki\/Le_Parisien\" target=\"_blank\" style=\"color: #00ffff; text-decoration: none; transition: all 0.3s; padding: 5px 10px; border-radius: 5px; display: inline-block; &amp;:hover { background: rgba(0, 255, 255, 0.1); transform: translateY(-2px); box-shadow: 0 0 15px rgba(0, 255, 255, 0.3); }\">\u2022 Wikip\u00e9dia - Le Parisien<\/a>\r\n        <\/li>\r\n    <\/ul>\r\n<\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n    <div id=\"player-modal\" class=\"modal\">\r\n    <div class=\"modal-content\">\r\n        <span class=\"close\" onclick=\"closeModal()\">\u00d7<\/span>\r\n        <div id=\"player-content\">\r\n    <style>\r\n        @media (max-width: 768px) {\r\n            #player-content h2 {\r\n                font-size: 20px;\r\n            }\r\n        }\r\n    <\/style>\r\n<\/div>\r\n        <button id=\"chromecast-button\" onclick=\"startChromecast()\" style=\"width: 60px; height: 60px; border-radius: 50%; padding: 0; background-image: url('https:\/\/cdn-icons-png.flaticon.com\/512\/8819\/8819177.png'); background-size: 35px; background-position: center; background-repeat: no-repeat; font-size: 0;\"><\/button>\r\n    <\/div>\r\n    <div id=\"player-content\">\r\n    <style>\r\n        \/* Styles existants *\/\r\n        .modal-content {\r\n            background-color: #1a1a1a;\r\n            padding: 40px;\r\n            border: 2px solid #00ffff;\r\n            width: 90%;\r\n            max-width: 500px;\r\n            max-height: 90vh;\r\n            border-radius: 20px;\r\n            text-align: center;\r\n            box-shadow: 0 0 40px rgba(0, 255, 255, 0.3);\r\n            position: fixed; \/* Chang\u00e9 de absolute \u00e0 fixed *\/\r\n            top: 50%;\r\n            left: 50%;\r\n            transform: translate(-50%, -50%) !important; \/* Ajout de !important *\/\r\n            overflow-y: auto;\r\n            color: white;\r\n        }\r\n\r\n        \/* Change la couleur du timing en noir *\/\r\n        audio::-webkit-media-controls-time-display {\r\n            color: #000000 !important;\r\n        }\r\n\r\n        \/* Ajout de media queries pour le mobile *\/\r\n        @media (max-width: 768px) {\r\n            .modal-content {\r\n                padding: 30px;\r\n                width: 95%;\r\n                margin: 0 auto;\r\n                position: fixed;\r\n                top: 50%;\r\n                left: 50%;\r\n                transform: translate(-50%, -50%) !important;\r\n            }\r\n        }\r\n\r\n        @media (max-height: 600px) {\r\n            .modal-content {\r\n                max-height: 85vh;\r\n            }\r\n        }\r\n    <\/style>\r\n<\/div>\r\n    <\/div>\r\n\r\n    <div id=\"fixed-player-bar\" class=\"rtl-podcast-player\" style=\"display: none;\">\r\n    <div class=\"fixed-player-content\">\r\n        <h3 id=\"fixed-player-title\"><\/h3>\r\n        <div class=\"audio-controls-container\" style=\"display: flex; align-items: center; justify-content: center; gap: 20px; width: 100%; max-width: 800px; margin: 0 auto;\">\r\n            <audio id=\"fixed-player-audio\" controls=\"\">\r\n                <source src=\"\" type=\"audio\/mpeg\">\r\n            <\/audio>\r\n            <button onclick=\"startChromecast()\" style=\"width: 40px; height: 40px; min-width: 40px; border-radius: 50%; padding: 0; background: #ffffff url('https:\/\/cdn-icons-png.flaticon.com\/512\/8819\/8819177.png') center\/25px no-repeat; border: 2px solid #00ffff; font-size: 0; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);\">Cast to Chromecast<\/button>\r\n            <button id=\"close-fixed-player\" onclick=\"closeFixedPlayer()\" style=\"background: none; border: none; color: #00ffff; font-size: 24px; cursor: pointer; padding: 5px; min-width: 24px; display: flex; align-items: center; justify-content: center;\">\u00d7<\/button>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n    <script>\r\n    (function RTLPodcastPlayer() {\r\n        \/\/ Initialize cast api\r\n        window.__onGCastApiAvailable = function(isAvailable) {\r\n            if (!isAvailable) return;\r\n\r\n            const initializeCastApi = function() {\r\n                const sessionRequest = new chrome.cast.SessionRequest(chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID);\r\n                const apiConfig = new chrome.cast.ApiConfig(\r\n                    sessionRequest,\r\n                    sessionListener,\r\n                    receiverListener\r\n                );\r\n                chrome.cast.initialize(apiConfig, onInitSuccess, onError);\r\n            };\r\n\r\n            const sessionListener = function(session) {\r\n                console.log('Session listener', session);\r\n            };\r\n\r\n            const receiverListener = function(availability) {\r\n                console.log('Receiver listener', availability);\r\n            };\r\n\r\n            const onInitSuccess = function() {\r\n                console.log('Cast initialization success');\r\n            };\r\n\r\n            const onError = function(error) {\r\n                console.error('Cast initialization error', error);\r\n            };\r\n\r\n            if (!chrome.cast || !chrome.cast.isAvailable) {\r\n                setTimeout(initializeCastApi, 1000);\r\n            } else {\r\n                initializeCastApi();\r\n            }\r\n        };\r\n\r\n        const rssUrl = \"https:\/\/feeds.acast.com\/public\/shows\/9f905938-baf3-4214-bd26-65999b4899d7\";\r\n        const proxyUrl = `https:\/\/api.rss2json.com\/v1\/api.json?rss_url=${encodeURIComponent(rssUrl)}&api_key=int3lqiwwrpnsvem6yki0mtwki2f4qcvcxtrlyea&count=250`;\r\n        const episodesPerPage = 4;\r\n        let currentPage = 1;\r\n        let currentAudioUrl = '';\r\n        let totalPages = 0;\r\n\r\n        \/\/ Ajouter ces variables au d\u00e9but du script\r\n        let currentEpisodeIndex = 0;\r\n        let allEpisodes = [];\r\n        let filteredEpisodes = [];\r\n\r\n        fetch(proxyUrl)\r\n            .then(response => response.json())\r\n            .then(data => {\r\n                if (data.status !== \"ok\") {\r\n                    throw new Error(\"Erreur de chargement du flux RSS.\");\r\n                }\r\n                allEpisodes = data.items;\r\n                filteredEpisodes = [...allEpisodes];\r\n                displayFeaturedEpisode(allEpisodes[0]);\r\n                displayEpisodes(currentPage, filteredEpisodes);\r\n                setupPagination(allEpisodes);\r\n            })\r\n            .catch(error => {\r\n                document.getElementById(\"featured-episode\").innerHTML = \"<p>Impossible de charger le flux RSS. Veuillez r\u00e9essayer plus tard.<\/p>\";\r\n            });\r\n\r\n        const DEFAULT_IMAGE = \"https:\/\/i.scdn.co\/image\/ab6765630000ba8a4938adbcd947ddd80f2b109e\";\r\n\r\nfunction truncateDescription(description, maxLength = 180) {\r\n        const tempElement = document.createElement(\"div\");\r\n        tempElement.innerHTML = description;\r\n        let plainText = tempElement.innerText || tempElement.textContent || '';\r\n        if (plainText.length <= maxLength) return plainText.trim();\r\n        return plainText.substring(0, maxLength).trim() + '...';\r\n    }\r\n\r\n    async function getAudioDuration(audioUrl) {\r\n    return new Promise((resolve) => {\r\n        const audio = new Audio(audioUrl);\r\n        audio.addEventListener('loadedmetadata', () => {\r\n            resolve(audio.duration);\r\n        });\r\n        audio.addEventListener('error', () => {\r\n            resolve(3600); \/\/ Fallback \u00e0 1h en cas d'erreur\r\n        });\r\n    });\r\n}\r\n\r\n\/\/ 2. Remplacez votre fonction displayFeaturedEpisode existante par celle-ci\r\nasync function displayFeaturedEpisode(episode) {\r\n    const featuredEpisode = document.getElementById(\"featured-episode\");\r\n    \r\n    \/\/ Obtenir les dur\u00e9es r\u00e9elles\r\n    const duration1 = await getAudioDuration(allEpisodes[0].enclosure.link);\r\n    const duration2 = await getAudioDuration(allEpisodes[1].enclosure.link);\r\n    \r\n    featuredEpisode.innerHTML = `\r\n        <div class=\"features-episode\" style=\"width: 100%; height: 100%;\">\r\n            <div class=\"episode-card\" onclick=\"openModal('${sanitizeString(allEpisodes[0].enclosure.link)}', '${sanitizeString(allEpisodes[0].title)}')\">\r\n                <h3 style=\"color: #00ffff;\">${sanitizeString(allEpisodes[0].title)}<\/h3>\r\n                <img decoding=\"async\" src=\"${allEpisodes[0].thumbnail || DEFAULT_IMAGE}\" alt=\"Image de la derni\u00e8re \u00e9mission\" style=\"width: 100%; max-width: 200px; border-radius: 10px; margin: 10px 0;\">\r\n                <div class=\"description\" style=\"color: white;\">${truncateDescription(allEpisodes[0].description)}<\/div>\r\n                <div class=\"duration-badge\">\r\n                    <span class=\"duration-icon\">\u23f1<\/span>\r\n                    ${formatDuration(duration1)}\r\n                <\/div>\r\n                <div class=\"date-badge\">\r\n                    ${new Date(allEpisodes[0].pubDate).toLocaleDateString('fr-FR', {\r\n                        day: '2-digit',\r\n                        month: '2-digit',\r\n                        year: '2-digit'\r\n                    })}\r\n                <\/div>\r\n                <button><\/button>\r\n            <\/div>\r\n            \r\n            <div class=\"episode-card\" onclick=\"openModal('${sanitizeString(allEpisodes[1].enclosure.link)}', '${sanitizeString(allEpisodes[1].title)}')\">\r\n                <h3 style=\"color: #00ffff;\">${sanitizeString(allEpisodes[1].title)}<\/h3>\r\n                <img decoding=\"async\" src=\"${allEpisodes[1].thumbnail || DEFAULT_IMAGE}\" alt=\"Image de l'avant-derni\u00e8re \u00e9mission\" style=\"width: 100%; max-width: 200px; border-radius: 10px; margin: 10px 0;\">\r\n                <div class=\"description\" style=\"color: white;\">${truncateDescription(allEpisodes[1].description)}<\/div>\r\n                <div class=\"duration-badge\">\r\n                    <span class=\"duration-icon\">\u23f1<\/span>\r\n                    ${formatDuration(duration2)}\r\n                <\/div>\r\n                <div class=\"date-badge\">\r\n                    ${new Date(allEpisodes[1].pubDate).toLocaleDateString('fr-FR', {\r\n                        day: '2-digit',\r\n                        month: '2-digit',\r\n                        year: '2-digit'\r\n                    })}\r\n                <\/div>\r\n                <button><\/button>\r\n            <\/div>\r\n        <\/div>\r\n    `;\r\n}\r\n\r\n    async function displayEpisodes(page, episodes) {\r\n    const episodeGrid = document.getElementById(\"episode-grid\");\r\n    episodeGrid.innerHTML = \"\";\r\n    const episodesWithoutFeatured = episodes.slice(2);\r\n    const start = (page - 1) * episodesPerPage;  \r\n    const end = start + episodesPerPage;\r\n    \r\n    \/\/ Charger les dur\u00e9es en parall\u00e8le\r\n    const episodesToDisplay = episodesWithoutFeatured.slice(start, end);\r\n    const durations = await Promise.all(\r\n        episodesToDisplay.map(item => getAudioDuration(item.enclosure.link))\r\n    );\r\n    \r\n    episodesToDisplay.forEach((item, index) => {\r\n        episodeGrid.innerHTML += `\r\n        <div class=\"episode\">\r\n            <h5 style=\"color: #00ffff;\">${sanitizeString(item.title)}<\/h5>\r\n            <img decoding=\"async\" src=\"${item.thumbnail || DEFAULT_IMAGE}\" alt=\"Image de l'\u00e9pisode\" style=\"width: 100%; max-width: 150px; border-radius: 10px; margin: 10px 0;\">\r\n            <div class=\"description\" style=\"color: white;\">${truncateDescription(item.description)}<\/div>\r\n            <div class=\"duration-badge\">\r\n                <span class=\"duration-icon\">\u23f1<\/span>\r\n                ${formatDuration(durations[index])}\r\n            <\/div>\r\n            <div class=\"date-badge\">\r\n                ${new Date(item.pubDate).toLocaleDateString('fr-FR', {\r\n                    day: '2-digit',\r\n                    month: '2-digit',\r\n                    year: '2-digit'\r\n                })}\r\n            <\/div>\r\n            <button onclick=\"openModal('${sanitizeString(item.enclosure.link)}', '${sanitizeString(item.title)}')\"><\/button>\r\n        <\/div>\r\n        `;\r\n    });\r\n    updatePaginationButtons();\r\n}\r\n\r\n    function setupPagination(episodes) {\r\n        totalPages = Math.ceil((episodes.length - 2) \/ episodesPerPage);\r\n        const pageNumbers = document.getElementById(\"page-numbers\");\r\n        pageNumbers.innerHTML = \"\";\r\n\r\n        let start = currentPage;\r\n        if (currentPage === totalPages) {\r\n            start = totalPages - 2;\r\n        } else if (currentPage === 1) {\r\n            start = 1;\r\n        } else {\r\n            start = currentPage - 1;\r\n        }\r\n\r\n        start = Math.max(1, start);\r\n        \r\n        for (let i = start; i < start + 3 && i <= totalPages; i++) {\r\n            const button = document.createElement(\"button\");\r\n            button.textContent = i;\r\n            button.addEventListener(\"click\", () => {\r\n                currentPage = i;\r\n                displayEpisodes(currentPage, episodes);\r\n                setupPagination(episodes);\r\n            });\r\n            pageNumbers.appendChild(button);\r\n        }\r\n\r\n        window.changePage = function(direction) {\r\n            if (direction === 'prev' && currentPage > 1) {\r\n                currentPage--;\r\n            } else if (direction === 'next' && currentPage < totalPages) {\r\n                currentPage++;\r\n            }\r\n            displayEpisodes(currentPage, filteredEpisodes);\r\n            setupPagination(episodes);\r\n            updatePaginationButtons();\r\n        }\r\n\r\n        updatePaginationButtons();\r\n    }\r\n\r\n    function updatePaginationButtons() {\r\n        const prevBtn = document.getElementById('prev-btn');\r\n        const nextBtn = document.getElementById('next-btn');\r\n        \r\n        prevBtn.disabled = currentPage === 1;\r\n        nextBtn.disabled = currentPage === totalPages;\r\n        \r\n        prevBtn.style.opacity = currentPage === 1 ? '0.5' : '1';\r\n        nextBtn.style.opacity = currentPage === totalPages ? '0.5' : '1';\r\n        \r\n        const pageButtons = document.querySelectorAll('#page-numbers button');\r\n        pageButtons.forEach((button, index) => {\r\n            if (index + 1 === currentPage) {\r\n                button.style.backgroundColor = '#00ffff';\r\n                button.style.color = '#000';\r\n            } else {\r\n                button.style.backgroundColor = '#1a1a1a';\r\n                button.style.color = '#00ffff';\r\n            }\r\n        });\r\n    }\r\n\r\n    function sanitizeString(str) {\r\n        return str.replace(\/['\"\\\\<>]\/g, \"\");\r\n    }\r\n\r\n    window.openModal = function(audioUrl, title) {\r\n        const playerContent = document.getElementById(\"player-content\");\r\n        const currentEpisode = allEpisodes.find(ep => ep.enclosure.link === audioUrl);\r\n        const thumbnail = currentEpisode?.thumbnail;\r\n        \r\n        playerContent.innerHTML = `\r\n            <h2>${title}<\/h2>\r\n            <img decoding=\"async\" src=\"${thumbnail || DEFAULT_IMAGE}\" alt=\"Image de l'\u00e9pisode\" style=\"width: 100%; max-width: 300px; margin: 15px 0; border-radius: 10px;\">\r\n            <audio controls style=\"width: 100%; margin-top: 10px;\" id=\"modal-audio\">\r\n                <source src=\"${audioUrl}\" type=\"audio\/mpeg\">\r\n                Votre navigateur ne supporte pas la lecture audio.\r\n            <\/audio>\r\n        `;\r\n        \r\n        currentAudioUrl = audioUrl;\r\n        document.getElementById(\"player-modal\").style.display = \"block\";\r\n        window.currentEpisodeTitle = title;\r\n        \r\n        const modalAudio = document.getElementById('modal-audio');\r\n        modalAudio.addEventListener('play', () => {\r\n            window.isPlaying = true;\r\n        });\r\n        modalAudio.addEventListener('pause', () => {\r\n            window.isPlaying = false;\r\n        });\r\n    }\r\n\r\n    window.closeModal = function() {\r\n        const modalAudio = document.getElementById('modal-audio');\r\n        const fixedPlayerBar = document.getElementById('fixed-player-bar');\r\n        const fixedPlayerAudio = document.getElementById('fixed-player-audio');\r\n        const fixedPlayerTitle = document.getElementById('fixed-player-title');\r\n        \r\n        if (window.isPlaying) {\r\n            modalAudio.pause();\r\n            fixedPlayerBar.style.display = 'block';\r\n            fixedPlayerTitle.textContent = window.currentEpisodeTitle;\r\n            fixedPlayerAudio.src = currentAudioUrl;\r\n            fixedPlayerAudio.currentTime = modalAudio.currentTime;\r\n            fixedPlayerAudio.play();\r\n        }\r\n        \r\n        document.getElementById(\"player-modal\").style.display = \"none\";\r\n    }\r\n\r\n    window.closeFixedPlayer = function() {\r\n        const fixedPlayerBar = document.getElementById('fixed-player-bar');\r\n        const fixedPlayerAudio = document.getElementById('fixed-player-audio');\r\n        fixedPlayerAudio.pause();\r\n        fixedPlayerBar.style.display = 'none';\r\n    }\r\n\r\n    window.startChromecast = function() {\r\n        if (!chrome.cast || !chrome.cast.isAvailable) {\r\n            console.log('Cast API not available');\r\n            return;\r\n        }\r\n\r\n        chrome.cast.requestSession(\r\n            function(session) {\r\n                if (currentAudioUrl) {\r\n                    const mediaInfo = new chrome.cast.media.MediaInfo(currentAudioUrl, 'audio\/mpeg');\r\n                    mediaInfo.metadata = new chrome.cast.media.GenericMediaMetadata();\r\n                    mediaInfo.metadata.title = document.querySelector('#player-content h2').textContent;\r\n\r\n                    const request = new chrome.cast.media.LoadRequest(mediaInfo);\r\n                    session.loadMedia(request).then(\r\n                        () => console.log('Lecture Chromecast d\u00e9marr\u00e9e'),\r\n                        errorCode => console.error('Erreur Chromecast: ' + errorCode)\r\n                    );\r\n                }\r\n            },\r\n            function(error) {\r\n                console.error('Erreur lors de la cr\u00e9ation de la session:', error);\r\n            }\r\n        );\r\n    }\r\n\r\n        window.shareOnX = function() {\r\n            const text = \"\u00c9coutez les podcasts : Code Source avec RadiostreamR !\";\r\n            const url = window.location.href;\r\n            window.open(`https:\/\/twitter.com\/intent\/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}`, '_blank');\r\n        };\r\n\r\n        window.shareOnWhatsapp = function() {\r\n            const text = \"\u00c9coutez les podcasts : Code Source avec RadiostreamR !\";\r\n            const url = window.location.href;\r\n            window.open(`https:\/\/wa.me\/?text=${encodeURIComponent(text + ' ' + url)}`, '_blank');\r\n        };\r\n\r\n        window.shareOnFacebook = function() {\r\n          const text = \"\u00c9coutez les podcasts : Code Source avec RadiostreamR !\";\r\n            const url = window.location.href;\r\n            window.open(`https:\/\/www.facebook.com\/sharer\/sharer.php?u=${encodeURIComponent(url)}`, '_blank');\r\n        };\r\n\r\n        window.shareOnLinkedIn = function() {\r\n          const text = \"\u00c9coutez les podcasts : Code Source RadiostreamR !\";\r\n            const url = window.location.href;\r\n            window.open(`https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=${encodeURIComponent(url)}`, '_blank');\r\n        };\r\n\r\n        window.filterAndDisplayEpisodes = function() {\r\n            const searchTerm = document.getElementById('podcast-search').value.toLowerCase();\r\n            const filterValue = document.getElementById('podcast-filter').value;\r\n            \r\n            \/\/ Filter episodes based on search term\r\n            filteredEpisodes = allEpisodes.filter(episode => \r\n                episode.title.toLowerCase().includes(searchTerm) || \r\n                episode.description.toLowerCase().includes(searchTerm)\r\n            );\r\n            \r\n            \/\/ Sort episodes based on filter value\r\n            if (filterValue === 'oldest') {\r\n                filteredEpisodes.sort((a, b) => new Date(a.pubDate) - new Date(b.pubDate));\r\n            } else {\r\n                filteredEpisodes.sort((a, b) => new Date(b.pubDate) - new Date(a.pubDate));\r\n            }\r\n            \r\n            \/\/ Reset pagination to first page when filtering\r\n            currentPage = 1;\r\n            \r\n            \/\/ Update display\r\n            if (filteredEpisodes.length > 0) {\r\n                displayFeaturedEpisode(filteredEpisodes[0]);\r\n                displayEpisodes(currentPage, filteredEpisodes);\r\n                setupPagination(filteredEpisodes);\r\n            } else {\r\n                \/\/ Handle no results\r\n                document.getElementById('episode-grid').innerHTML = '<p style=\"color: #fff; text-align: center; grid-column: 1\/-1;\">Aucun r\u00e9sultat trouv\u00e9<\/p>';\r\n                document.getElementById('page-numbers').innerHTML = '';\r\n            }\r\n        }\r\n    })();\r\n<\/script>\r\n<\/div>\r\n<\/div><\/div><\/body><\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ff035ad e-con-full e-flex e-con e-parent\" data-id=\"ff035ad\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b558482 elementor-widget elementor-widget-html\" data-id=\"b558482\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<html><head><base href=\"\/\"><style>\n.carousel-container {\n  width: 100%;\n  max-width: 1200px;\n  background: #0f0f11;\n  position: relative;\n  overflow: hidden;\n  padding: 20px;\n  margin: 0 auto;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  min-height: unset; \/* Remove fixed min-height *\/\n}\n\n.carousel-outer {\n  width: 100vw;\n  background: #0f0f11;\n  margin-left: calc(-50vw + 50%);\n  margin-right: calc(-50vw + 50%);\n  position: relative;\n  padding: 0 150px;\n  box-sizing: border-box;\n}\n\n.carousel-track {\n  display: flex;\n  gap: 20px;\n  transition: transform 0.5s ease;\n  position: relative;\n  padding-right: 220px;\n  align-items: center;\n  height: auto; \/* Remove fixed height *\/\n}\n\n.carousel-card {\n  min-width: 200px;\n  padding: 10px;\n  border-radius: 8px;\n  background: rgba(255,255,255,0.05);\n  backdrop-filter: blur(5px);\n  cursor: pointer;\n  transition: transform 0.3s ease, box-shadow 0.3s ease;\n  position: relative;\n  overflow: hidden;\n  text-decoration: none;\n}\n\n.carousel-container a {\n  text-decoration: none;\n}\n\n.carousel-card img {\n  width: 100%;\n  aspect-ratio: 1;\n  object-fit: cover;\n  border-radius: 4px;\n  position: relative;\n  transition: transform 0.3s ease, filter 0.3s ease;\n}\n\n.carousel-card:hover img {\n  transform: scale(1.05);\n  filter: brightness(1.2);\n}\n\n\/* New style for the overlay *\/\n.carousel-card::after {\n  content: '';\n  position: absolute;\n  top: 10px; \/* Match the padding of the card *\/\n  left: 10px; \/* Match the padding of the card *\/\n  right: 10px; \/* Match the padding of the card *\/\n  aspect-ratio: 1;\n  background: rgba(0, 0, 0, 0.2); \/* Slight dark overlay *\/\n  border-radius: 4px;\n  pointer-events: none; \/* So it doesn't interfere with clicks *\/\n  transition: background 0.3s ease;\n}\n\n.carousel-card:hover::after {\n  background: rgba(0, 0, 0, 0.1); \/* Lighten overlay on hover *\/\n}\n\n.carousel-card h3 {\n  color: #00f2ff;\n  margin: 10px 0;\n  font-size: 16px;\n  text-align: center;\n  text-shadow: 0 0 10px rgba(0, 242, 255, 0.5);\n}\n\n.carousel-nav {\n  position: absolute;\n  top: 50%; \/* Changed from calc(50% - 20px) *\/\n  transform: translateY(-50%);\n  width: 40px;\n  height: 40px;\n  background: #00f2ff;\n  border: 2px solid #ffffff;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #ffffff;\n  font-size: 20px;\n  transition: all 0.3s ease;\n  z-index: 10;\n  box-shadow: 0 0 15px rgba(0, 242, 255, 0.8), \n              inset 0 0 8px rgba(255, 255, 255, 0.5);\n  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);\n}\n\n\/* Remove transform scale from hover to prevent centering issues *\/\n.carousel-nav:hover {\n  transform: translateY(-50%) scale(1.1); \/* Updated to maintain vertical centering while scaling *\/\n  box-shadow: 0 0 20px rgba(0, 242, 255, 1),\n              inset 0 0 12px rgba(255, 255, 255, 0.7);\n}\n\n.prev-btn {\n  left: 50px;\n}\n\n.next-btn {\n  right: 50px;\n}\n\n@media screen and (max-width: 1024px) {\n  .carousel-outer {\n    padding: 0 45px;\n  }\n  \n  .prev-btn {\n    left: 5px;\n  }\n  \n  .next-btn {\n    right: 5px;\n  }\n}\n\n@media screen and (max-width: 768px) {\n  .carousel-nav {\n    display: none; \/* Cache les boutons de navigation sur mobile *\/\n  }\n  \n  .carousel-outer {\n    padding: 0; \/* Supprime le padding qui \u00e9tait l\u00e0 pour les boutons *\/\n  }\n\n  .carousel-track {\n    padding-right: 20px; \/* R\u00e9duit le padding droit sur mobile *\/\n    touch-action: pan-x; \/* Am\u00e9liore le comportement tactile *\/\n    -webkit-overflow-scrolling: touch; \/* Pour un d\u00e9filement plus fluide sur iOS *\/\n  }\n\n  \/* Add this new rule to reduce title font size on mobile *\/\n  .carousel-title {\n    font-size: 21px; \/* Original 25px - 4px = 21px *\/\n  }\n}\n\n@keyframes backgroundPulse {\n  0% { background-position: 0% 50%; }\n  50% { background-position: 100% 50%; }\n  100% { background-position: 0% 50%; }\n}\n\n.carousel-outer::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: linear-gradient(45deg, #0f0f11, #1a1a1f, #0f0f11);\n  background-size: 200% 200%;\n  animation: backgroundPulse 10s ease infinite;\n}\n\n\/* Adjust the tooltip styles to ensure they're visible *\/\n.tooltip {\n    visibility: hidden;\n    position: absolute;\n    bottom: 100%;\n    left: 50%;\n    transform: translateX(-50%);\n    background: rgba(0, 0, 0, 0.9);\n    color: white;\n    padding: 10px;\n    border-radius: 6px;\n    width: 200px;\n    font-size: 12px;\n    line-height: 1.4;\n    z-index: 100;\n    opacity: 0;\n    transition: opacity 0.3s, visibility 0.3s;\n    text-align: center;\n    margin-bottom: 10px;\n    border: 1px solid #00f2ff;\n    box-shadow: 0 0 10px rgba(0, 242, 255, 0.3);\n    pointer-events: none; \/* Add this to prevent tooltip interference *\/\n}\n\n\/* Ensure tooltip appears on hover *\/\n.carousel-card:hover .tooltip {\n    visibility: visible;\n    opacity: 1;\n}\n\n.carousel-title {\n  font-family: 'Roboto', sans-serif;\n  font-size: 25px;\n  text-align: center;\n  color: #fff;\n  margin-bottom: 30px;\n}\n<\/style><\/head>\n\n<body><div class=\"carousel-outer\">\n  <div class=\"carousel-container\">\n    <h2 class=\"carousel-title\">Les 10 podcasts fran\u00e7ais les plus \u00e9cout\u00e9s sur RadiostreamR.com<\/h2>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@300;400;500;700&amp;display=swap\" rel=\"stylesheet\">\n    <style>\n    .carousel-container * {\n        font-family: 'Roboto', sans-serif;\n    }\n\n    .ranking-badge {\n        position: absolute;\n        top: 10px !important;\n        right: 10px !important;\n        width: 40px;\n        height: 40px;\n        background: #00f2ff;\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 12px;\n        color: #ffffff;\n        border: 2px solid #ffffff;\n        box-shadow: 0 0 15px rgba(0, 242, 255, 0.8), \n8px rgba(255, 255, 255, 0.5);\n        z-index: 2;\n        font-weight: bold;\n        font-family: 'Roboto', sans-serif;\n        text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);\n        transition: all 0.3s ease;\n    }\n    \n    .ranking-badge:hover {\n        transform: scale(1.1);\n        box-shadow: 0 0 20px rgba(0, 242, 255, 1),\n                    inset 0 0 12px rgba(255, 255, 255, 0.7);\n    }\n    \n    .carousel-card {\n        position: relative;\n        font-family: 'Roboto', sans-serif;\n    }\n\n    .carousel-card h3 {\n        font-family: 'Roboto', sans-serif;\n        font-weight: 500;\n    }\n\n    .carousel-nav {\n        font-family: 'Roboto', sans-serif;\n    }\n    <\/style>\n    <div class=\"carousel-track\">\n      <a href=\"https:\/\/radiostreamr.com\/radio-france\/podcast-legend-guillaume-pley\/\" class=\"carousel-card\">\n        <div class=\"tooltip\">Guillaume Pley re\u00e7oit des personnalit\u00e9s pour des interviews intimes r\u00e9v\u00e9lant leurs parcours.<\/div>\n        <div class=\"ranking-badge\">1er<\/div>\n        <img decoding=\"async\" src=\"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/11\/legend-guillaume-pley-podcast.webp\" alt=\"Guillaume Pley Legend\">\n        <h3>Legend<\/h3>\n      <\/a>\n      <a href=\"https:\/\/radiostreamr.com\/radio-france\/les-grosses-tetes-podcast\/\" class=\"carousel-card\">\n        <div class=\"tooltip\">\u00c9mission culte m\u00ealant culture et humour avec Laurent Ruquier et ses chroniqueurs.<\/div>\n        <div class=\"ranking-badge\">2\u00e8me<\/div>\n        <img decoding=\"async\" src=\"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/11\/les-grosses-tetes-podcast.webp\" alt=\"Les Grosses t\u00eates\">\n        <h3>Les Grosses T\u00eates<\/h3>\n      <\/a>\n      <a href=\"https:\/\/radiostreamr.com\/radio-france\/podcast-after-foot\/\" class=\"carousel-card\">\n        <div class=\"tooltip\">L'\u00e9mission phare du football avec analyses et d\u00e9bats sur l'actualit\u00e9 du ballon rond.<\/div>\n        <div class=\"ranking-badge\">3\u00e8me<\/div>\n        <img decoding=\"async\" src=\"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/11\/after-foot-podcast.webp\" alt=\"After Foot\">\n        <h3>After Foot<\/h3>\n      <\/a>\n      <a href=\"https:\/\/radiostreamr.com\/radio-france\/podcast-hugodecrypte-actu-du-jour\/\" class=\"carousel-card\">\n        <div class=\"tooltip\">Hugo r\u00e9sume l'actualit\u00e9 quotidienne de mani\u00e8re claire et accessible pour tous.<\/div>\n        <div class=\"ranking-badge\">4\u00e8me<\/div>\n        <img decoding=\"async\" src=\"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/12\/hugo-decrypte-podcast.webp\" alt=\"HugoD\u00e9crypte\">\n        <h3>HugoD\u00e9crypte<\/h3>\n      <\/a>\n      <a href=\"https:\/\/radiostreamr.com\/radio-france\/podcast-la-derniere-nova\/\" class=\"carousel-card\">\n        <div class=\"tooltip\">D\u00e9couvrez les nouvelles tendances musicales et artistes \u00e9mergents sur Radio Nova.<\/div>\n        <div class=\"ranking-badge\">5\u00e8me<\/div>\n        <img decoding=\"async\" src=\"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/12\/radio-nova-la-derniere.webp\" alt=\"La Derni\u00e8re\">\n        <h3>La Derni\u00e8re<\/h3>\n      <\/a>\n      <a href=\"https:\/\/radiostreamr.com\/radio-france\/podcast-hondelatte-raconte\/\" class=\"carousel-card\">\n        <div class=\"tooltip\">Christophe Hondelatte narre des faits divers captivants avec son style unique.<\/div>\n        <div class=\"ranking-badge\">6\u00e8me<\/div>\n        <img decoding=\"async\" src=\"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/11\/hondelatte-raconte-podcast.webp\" alt=\"Hondelatte Raconte\">\n        <h3>Hondelatte Raconte<\/h3>\n      <\/a>\n      <a href=\"https:\/\/radiostreamr.com\/radio-france\/podcast-secrets-histoire-francetv\/\" class=\"carousel-card\">\n        <div class=\"tooltip\">St\u00e9phane Bern explore les myst\u00e8res de l'Histoire \u00e0 travers des r\u00e9cits passionnants.<\/div>\n        <div class=\"ranking-badge\">7\u00e8me<\/div>\n        <img decoding=\"async\" src=\"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/11\/secrets-histoire-podcast.webp\">\n        <h3>Secrets d'Histoire<\/h3>\n      <\/a>\n      <a href=\"https:\/\/radiostreamr.com\/radio-france\/podcast-les-gg-podcast\/\" class=\"carousel-card\">\n        <div class=\"tooltip\">D\u00e9bats anim\u00e9s sur l'actualit\u00e9 avec des intervenants passionn\u00e9s et engag\u00e9s.<\/div>\n        <div class=\"ranking-badge\">8\u00e8me<\/div>\n        <img decoding=\"async\" src=\"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/11\/les-grandes-gueules-podcast.webp\" alt=\"Les Grandes Gueules\">\n        <h3>Les Grandes Gueules<\/h3>\n      <\/a>\n      <a href=\"https:\/\/radiostreamr.com\/radio-france\/podcast-nota-bene\/\" class=\"carousel-card\">\n        <div class=\"tooltip\">Benjamin Brillaud vulgarise l'Histoire de mani\u00e8re ludique et moderne.<\/div>\n        <div class=\"ranking-badge\">9\u00e8me<\/div>\n        <img decoding=\"async\" src=\"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/12\/nota-bene-podcast.webp\" alt=\"Nota Bene\">\n        <h3>Nota Bene<\/h3>\n      <\/a>\n      <a href=\"https:\/\/radiostreamr.com\/radio-france\/podcast-ca-peut-vous-arriver-rtl\/\" class=\"carousel-card\">\n        <div class=\"tooltip\">Julien Courbet aide les auditeurs et d\u00e9fend les consommateurs au quotidien.<\/div>\n        <div class=\"ranking-badge\">10\u00e8me<\/div>\n        <img decoding=\"async\" src=\"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/12\/ca-peut-vous-arriver.webp\" alt=\"\u00c7a peut vous arriver\">\n        <h3>\u00c7a peut vous arriver<\/h3>\n      <\/a>\n    <\/div>\n    <button class=\"carousel-nav prev-btn\">\u2190<\/button>\n    <button class=\"carousel-nav next-btn\">\u2192<\/button>\n    \n    <script>\n    (function() {\n      const track = document.querySelector('.carousel-track');\n      const cards = document.querySelectorAll('.carousel-card');\n      const prevBtn = document.querySelector('.prev-btn');\n      const nextBtn = document.querySelector('.next-btn');\n      \n      let currentIndex = 0;\n      const cardWidth = 220; \/\/ Width + gap\n\n      function updateVisibleCards() {\n        const containerWidth = document.querySelector('.carousel-container').offsetWidth;\n        return Math.floor(containerWidth \/ cardWidth);\n      }\n\n      function updateMaxIndex() {\n        const visibleCards = updateVisibleCards();\n        return Math.max(0, cards.length - visibleCards + 1); \/\/ Added +1 to show last card fully\n      }\n\n      function updateCarousel() {\n        track.style.transform = `translateX(-${currentIndex * cardWidth}px)`;\n      }\n\n      prevBtn.addEventListener('click', () => {\n        currentIndex = Math.max(currentIndex - 1, 0);\n        updateCarousel();\n      });\n\n      nextBtn.addEventListener('click', () => {\n        currentIndex = Math.min(currentIndex + 1, updateMaxIndex());\n        updateCarousel();\n      });\n\n      \/\/ Touch events\n      let touchStartX = 0;\n      let touchEndX = 0;\n\n      track.addEventListener('touchstart', e => {\n        touchStartX = e.changedTouches[0].screenX;\n      }, false);\n\n      track.addEventListener('touchend', e => {\n        touchEndX = e.changedTouches[0].screenX;\n        handleSwipe();\n      }, false);\n\n      function handleSwipe() {\n        const swipeThreshold = 50;\n        const diff = touchStartX - touchEndX;\n\n        if (Math.abs(diff) > swipeThreshold) {\n          if (diff > 0) {\n            currentIndex = Math.min(currentIndex + 1, updateMaxIndex());\n          } else {\n            currentIndex = Math.max(currentIndex - 1, 0);\n          }\n          updateCarousel();\n        }\n      }\n\n      window.addEventListener('resize', () => {\n        currentIndex = Math.min(currentIndex, updateMaxIndex());\n        updateCarousel();\n      });\n\n      updateCarousel();\n    })();\n    <\/script>\n<\/div>\n<\/div><\/body><\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-01b5e3f e-con-full e-flex e-con e-parent\" data-id=\"01b5e3f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5d31e28 elementor-widget elementor-widget-html\" data-id=\"5d31e28\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<html><head>\n  <meta name=\" viewport\"=\"\" content=\"width=device-width, initial-scale=1.0\">\n  <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n  <style>\n    .rs-carousel-section {\n      padding: 50px 0; \n      background: linear-gradient(45deg, #1a1a1a, #2c2c2c, #0e4d4d);\n      background-size: 400% 400%;\n      animation: rs-gradientBG 15s ease infinite;\n      color: #ffffff;\n      font-family: 'Roboto', sans-serif;\n      min-height: flex; \n      display: flex;\n      flex-direction: column;\n      align-items: center;\n    }\n\n    .rs-title {\n      color: #00ffff;\n      text-align: center;\n      margin: 2rem 0;\n      font-size: 2rem;\n      text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);\n    }\n\n    .rs-carousel-container {\n      max-width: auto;\n      width: 100%;\n      position: relative;\n      padding: 20px 250px; \n      box-sizing: border-box;\n      overflow: hidden;\n      margin: 0 auto; \n    }\n\n    .rs-carousel {\n      display: flex;\n      overflow: hidden;\n      scroll-behavior: smooth;\n      gap: 20px;\n      padding: 20px 0 0 0;\n      transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .rs-radio-card {\n      min-width: 250px;\n      flex: 0 0 250px;\n      background: rgba(255, 255, 255, 0.1);\n      border-radius: 15px;\n      text-align: center;\n      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n      border: 2px solid #00ffff;\n      box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);\n      position: relative;\n      overflow: hidden;\n      transform-origin: center center;\n      padding: 20px 15px; \/* Add consistent padding *\/\n    }\n\n    .rs-radio-card.rs-scrolling {\n      transform: scale(0.95) rotate(-2deg);\n    }\n\n    .rs-radio-card::before {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: -100%;\n      width: 100%;\n      height: 100%;\n      background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.1), transparent);\n      transition: 0.5s;\n    }\n\n    .rs-radio-card:hover::before {\n      left: 100%;\n    }\n\n    .rs-radio-card:hover {\n      transform: translateY(-5px) scale(1.02);\n      box-shadow: 0 10px 30px rgba(0, 255, 255, 0.3);\n      z-index: 1;\n    }\n\n    .rs-radio-logo {\n      width: 120px;\n      height: 120px;\n      border-radius: 50%;\n      margin-bottom: 1rem;\n      border: 3px solid #00ffff;\n      box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);\n      transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n      cursor: pointer; \/* Add cursor pointer to indicate interactivity *\/\n    }\n\n    .rs-radio-logo:hover {\n      transform: rotateY(180deg) scale(1.15);\n      border-color: #ff00ff;\n      box-shadow: \n        0 0 25px rgba(0, 255, 255, 0.5),\n        0 0 50px rgba(255, 0, 255, 0.3);\n      animation: logoGlow 1.5s infinite alternate;\n    }\n\n    @keyframes logoGlow {\n      0% {\n        box-shadow: 0 0 25px rgba(0, 255, 255, 0.5),\n                    0 0 50px rgba(255, 0, 255, 0.3);\n      }\n      100% {\n        box-shadow: 0 0 35px rgba(0, 255, 255, 0.8),\n                    0 0 70px rgba(255, 0, 255, 0.6);\n      }\n    }\n\n    .rs-radio-name {\n      font-size: 1.2rem; \/* Reduced from 1.5rem *\/\n      margin: 15px 0;\n      color: #00ffff;\n      transition: all 0.3s ease;\n      position: relative; \/* Added *\/\n    }\n\n    \/* Add hover state for radio name span elements *\/\n    .rs-radio-name span:first-child {\n      display: inline-block;\n      transition: opacity 0.3s ease;\n    }\n\n    .rs-radio-name span:last-child {\n      position: absolute;\n      left: 50%;\n      transform: translateX(-50%);\n      opacity: 0;\n      transition: opacity 0.3s ease;\n      width: 100%;\n    }\n\n    .rs-radio-card:hover .rs-radio-name span:first-child {\n      opacity: 0;\n    }\n\n    .rs-radio-card:hover .rs-radio-name span:last-child {\n      opacity: 1;\n    }\n\n    .rs-listen-button {\n      position: relative; \/* Add this *\/\n      background: #00ffff;\n      color: #000;\n      width: 60px;\n      height: 60px;\n      border: none;\n      border-radius: 50%;\n      font-size: 1.5rem;\n      cursor: pointer;\n      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n      text-decoration: none;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin: 1rem auto;\n      overflow: hidden;\n    }\n\n    .rs-listen-button:hover {\n      background: #00cccc;\n      transform: scale(1.1) rotate(360deg);\n      box-shadow: 0 0 20px rgba(0, 255, 255, 0.6);\n    }\n\n    .rs-listen-button::before {\n      content: \"Voir la webradio\";\n      position: absolute;\n      bottom: -30px;\n      left: 50%;\n      transform: translateX(-50%);\n      background: rgba(0, 255, 255, 0.9);\n      color: #000;\n      padding: 5px 10px;\n      border-radius: 4px;\n      font-size: 12px;\n      white-space: nowrap;\n      opacity: 0;\n      visibility: hidden;\n      transition: all 0.3s ease;\n    }\n\n    .rs-listen-button:hover::before {\n      opacity: 1;\n      visibility: visible;\n      bottom: -35px;\n    }\n\n    .rs-listen-button:hover i {\n      animation: rs-colorChange 2s infinite;\n    }\n\n    @keyframes rs-colorChange {\n      0% { color: #ff0000; }\n      20% { color: #ff7700; }\n      40% { color: #ffff00; }\n      60% { color: #00ff00; }\n      80% { color: #0000ff; }\n      100% { color: #ff0000; }\n    }\n\n    .rs-listen-button::after {\n      content: '';\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      background: radial-gradient(circle, transparent 30%, rgba(255, 255, 255, 0.3) 70%);\n      animation: rs-pulseGlow 2s infinite;\n      opacity: 0;\n      transition: opacity 0.3s;\n    }\n\n    .rs-listen-button:hover::after {\n      opacity: 1;\n    }\n\n    @keyframes rs-pulseGlow {\n      0% {\n        transform: scale(0.95);\n        opacity: 0.5;\n      }\n      50% {\n        transform: scale(1.1);\n        opacity: 0.2;\n      }\n      100% {\n        transform: scale(0.95);\n        opacity: 0.5;\n      }\n    }\n\n    .rs-carousel-button {\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      background: rgba(0, 255, 255, 0.2);\n      border: none;\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: #00ffff;\n      font-size: 1.5rem;\n      transition: all 0.3s ease;\n      z-index: 2;\n      overflow: hidden; \/* Add this for ripple effect *\/\n    }\n\n    .rs-carousel-button:hover {\n      background: rgba(0, 255, 255, 0.2);\n      transform: translateY(-50%) scale(1.1);\n      box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);\n    }\n\n    .rs-carousel-button::before {\n      content: '';\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      background: radial-gradient(circle at center, rgba(0, 255, 255, 0.8) 0%, transparent 70%);\n      transform: scale(0);\n      opacity: 0;\n      transition: transform 0.5s ease-out, opacity 0.3s ease;\n    }\n\n    .rs-carousel-button:hover::before {\n      transform: scale(2);\n      opacity: 0.3;\n    }\n\n    .rs-carousel-button:hover i {\n      animation: arrowBounce 0.5s ease infinite alternate;\n    }\n\n    @keyframes arrowBounce {\n      from {\n        transform: translateX(0);\n      }\n      to {\n        transform: translateX(3px);\n      }\n    }\n\n    .rs-carousel-button.rs-prev:hover i {\n      animation: arrowBounceLeft 0.5s ease infinite alternate;\n    }\n\n    @keyframes arrowBounceLeft {\n      from {\n        transform: translateX(0);\n      }\n      to {\n        transform: translateX(-3px);\n      }\n    }\n\n    .rs-carousel-button.rs-prev {\n      left: 0;\n    }\n\n    .rs-carousel-button.rs-next {\n      right: 0;\n    }\n\n    @keyframes rs-floatingNotesCard {\n      0% {\n        opacity: 0;\n        transform: translate(0, 0) rotate(0deg);\n      }\n      50% {\n        opacity: 1;\n      }\n      100% {\n        opacity: 0;\n        transform: translate(-50px, -50px) rotate(360deg);\n      }\n    }\n\n    .rs-card-notes {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      top: 0;\n      left: 0;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity 0.3s;\n    }\n\n    .rs-radio-card:hover .rs-card-notes {\n      opacity: 1;\n    }\n\n    .rs-card-note {\n      position: absolute;\n      font-size: 20px;\n      color: #00ffff;\n      animation: rs-floatingNotesCard 2s ease-out infinite;\n    }\n\n    .rs-card-note-1 { top: 10%; left: 10%; animation-delay: 0s; }\n    .rs-card-note-2 { top: 5%; left: 30%; animation-delay: 0.3s; }\n    .rs-card-note-3 { top: 15%; left: 50%; animation-delay: 0.6s; }\n    .rs-card-note-4 { top: 8%; left: 70%; animation-delay: 0.9s; }\n    .rs-card-note-5 { top: 12%; left: 90%; animation-delay: 1.2s; }\n\n    .rs-radio-tag {\n      position: absolute;\n      top: 10px;\n      right: 10px;\n      padding: 5px 12px;\n      font-size: 0.8rem;\n      border-radius: 15px;\n      background: rgba(0, 0, 0, 0.7);\n      color: #fff;\n      border: 1px solid #00ffff;\n      box-shadow: 0 0 5px #00ffff,\n                  inset 0 0 5px #00ffff;\n      text-transform: uppercase;\n      letter-spacing: 1px;\n      transition: all 0.3s ease;\n      transform-style: preserve-3d;\n      perspective: 1000px;\n      cursor: pointer;\n    }\n    \n    .rs-radio-tag i {\n      margin-right: 5px;\n      color: #00ffff;\n      text-shadow: 0 0 5px #00ffff,\n                   0 0 10px #00ffff,\n                   0 0 15px #00ffff;\n    }\n\n    \/* Add hover effects *\/\n    .rs-radio-tag:hover {\n      transform: translateZ(20px) rotateX(10deg) rotateY(-10deg);\n      box-shadow: 0 0 15px #00ffff,\n                  inset 0 0 10px #00ffff,\n                  0 10px 20px rgba(0, 255, 255, 0.4);\n      background: rgba(0, 255, 255, 0.1);\n      letter-spacing: 2px;\n      animation: tagFloat 1s ease-in-out infinite alternate;\n    }\n\n    \/* Add new keyframe animation *\/\n    @keyframes tagFloat {\n      0% {\n        transform: translateZ(20px) rotateX(10deg) rotateY(-10deg);\n      }\n      100% {\n        transform: translateZ(30px) rotateX(15deg) rotateY(-15deg);\n        text-shadow: 2px 2px 4px rgba(0, 255, 255, 0.6);\n      }\n    }\n\n    \/* Add before\/after elements for 3D effect *\/\n    .rs-radio-tag::before {\n      content: '';\n      position: absolute;\n      inset: -2px;\n      background: linear-gradient(45deg, transparent, rgba(0, 255, 255, 0.3), transparent);\n      transform: translateZ(-1px);\n      opacity: 0;\n      transition: opacity 0.3s ease;\n    }\n\n    .rs-radio-tag::after {\n      content: '';\n      position: absolute;\n      inset: -1px;\n      background: linear-gradient(-45deg, transparent, rgba(0, 255, 255, 0.2), transparent);\n      transform: translateZ(-2px);\n      opacity: 0;\n      transition: opacity 0.3s ease;\n    }\n\n    .rs-radio-tag:hover::before,\n    .rs-radio-tag:hover::after {\n      opacity: 1;\n    }\n\n    @keyframes rs-floatingNotes {\n      0% {\n        transform: translateY(0) rotate(0deg) scale(1);\n        opacity: 0;\n      }\n      50% {\n        transform: translateY(-20px) rotate(180deg) scale(1.2);\n        opacity: 1;\n      }\n      100% {\n        transform: translateY(-40px) rotate(360deg) scale(1);\n        opacity: 0;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .rs-carousel-section {\n        padding: 30px 0;\n      }\n      .rs-carousel-container {\n        padding: 15px 20px; \n      }\n      .rs-radio-card {\n        min-width: 250px !important; \/* Reduced by 20% from original 312.5px *\/\n        flex: 0 0 250px !important; \/* Reduced by 20% from original 312.5px *\/\n      }\n      \/* Content size reductions *\/\n      .rs-radio-logo {\n        width: 84px !important;\n        height: 84px !important;\n      }\n      .rs-radio-name {\n        font-size: 1rem !important;\n      }\n      .rs-listen-button {\n        width: 48px;\n        height: 48px;\n      }\n    }\n\n    @media (max-width: 480px) {\n      .rs-carousel-section {\n        padding: 20px 0;\n      }\n      .rs-carousel-container {\n        padding: 0 30px; \n      }\n      .rs-radio-card {\n        min-width: 200px !important; \/* Further reduced by 20% from tablet size *\/\n        flex: 0 0 200px !important; \/* Further reduced by 20% from tablet size *\/\n      }\n      \/* Further reduce content for smallest screens *\/\n      .rs-radio-logo {\n        width: 76px !important;\n        height: 76px !important;\n        margin: 8px auto 12px !important;\n      }\n      .rs-radio-name {\n        font-size: 0.9rem !important;\n      }\n      .rs-listen-button {\n        width: 40px;\n        height: 40px;\n      }\n    }\n  <\/style>\n<\/head>\n<body>\n  <div class=\"rs-carousel-section\" id=\"radioendirect-carousel-section\">\n    <h2 class=\"rs-title\" id=\"radioendirect-title\" style=\"font-size: 24px; animation: textGlow 2s infinite; text-shadow: 0 0 10px rgba(0, 255, 255, 0.5), 0 0 20px rgba(0, 255, 255, 0.3), 0 0 30px rgba(0, 255, 255, 0.2); position: relative;\">\n  Nos suggestions de radios fran\u00e7aises en direct :\n<\/h2>\n    \n    <div class=\"rs-carousel-container\" id=\"radioendirect-container\">\n      <button class=\"rs-carousel-button rs-prev\" id=\"radioendirect-prev-button\">\n        <i class=\"fas fa-chevron-left\"><\/i>\n      <\/button>\n      \n      <div class=\"rs-carousel\" id=\"radioendirect-carousel\" style=\"gap: 25px;\">\n        <!-- Nostalgie -->\n        <div class=\"rs-radio-card\" id=\"radioendirect-card-nostalgie\" style=\"min-width: 312.5px; flex: 0 0 312.5px;\">\n          <div class=\"rs-card-notes\">\n            <span class=\"rs-card-note rs-card-note-1\">\u266a<\/span>\n            <span class=\"rs-card-note rs-card-note-2\">\u266b<\/span>\n            <span class=\"rs-card-note rs-card-note-3\">\u266c<\/span>\n            <span class=\"rs-card-note rs-card-note-4\">\u266a<\/span>\n            <span class=\"rs-card-note rs-card-note-5\">\u266b<\/span>\n          <\/div>\n          <img decoding=\"async\" src=\"https:\/\/play-lh.googleusercontent.com\/9h9jwQQONGEHGuKQ9nBAcXeorzgJZnStMvLZ4DNBVxb4XK3TMww-7sw3_mgjXEw3Gtk\" alt=\"Radio Nostalgie\" class=\"rs-radio-logo\" style=\"width: 105px; height: 105px;\">\n          <span class=\"rs-radio-tag\"><i class=\"fas fa-music\"><\/i>Oldies<\/span>\n          <h2 class=\"rs-radio-name\">\n            <span>Nostalgie<\/span>\n            <span>Ecoutez en direct Nostalgie<\/span>\n          <\/h2>\n          <a href=\"https:\/\/radiostreamr.com\/radio-france\/ecoutez-en-direct-nostalgie\/\" class=\"rs-listen-button\">\n            <i class=\"fas fa-play\" style=\"font-size: 0.75rem\"><\/i>\n          <\/a>\n        <\/div>\n\n        <!-- Skyrock -->\n        <div class=\"rs-radio-card\" id=\"radioendirect-card-skyrock\" style=\"min-width: 312.5px; flex: 0 0 312.5px;\">\n          <div class=\"rs-card-notes\">\n            <span class=\"rs-card-note rs-card-note-1\">\u266a<\/span>\n            <span class=\"rs-card-note rs-card-note-2\">\u266b<\/span>\n            <span class=\"rs-card-note rs-card-note-3\">\u266c<\/span>\n            <span class=\"rs-card-note rs-card-note-4\">\u266a<\/span>\n            <span class=\"rs-card-note rs-card-note-5\">\u266b<\/span>\n          <\/div>\n          <img decoding=\"async\" src=\"https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcSQPI_29sdyigH1bVf4vwKNiM_alqz_mPWkpg&amp;s\" alt=\"Skyrock Radio\" class=\"rs-radio-logo\" style=\"width: 105px; height: 105px; margin: 10px auto 15px;\">\n          <span class=\"rs-radio-tag\"><i class=\"fas fa-music\"><\/i>Hip-Hop\/Rap<\/span>\n          <h2 class=\"rs-radio-name\">\n            <span>Skyrock<\/span>\n            <span>Ecoutez en direct Skyrock<\/span>\n          <\/h2>\n          <a href=\"https:\/\/radiostreamr.com\/radio-france\/ecoutez-en-direct-skyrock\/\" class=\"rs-listen-button\" style=\"margin: 15px auto 10px;\">\n            <i class=\"fas fa-play\" style=\"font-size: 0.75rem\"><\/i>\n          <\/a>\n        <\/div>\n\n        <!-- Oui FM -->\n        <div class=\"rs-radio-card\" id=\"radioendirect-card-ouifm\" style=\"min-width: 312.5px; flex: 0 0 312.5px;\">\n          <div class=\"rs-card-notes\">\n            <span class=\"rs-card-note rs-card-note-1\">\u266a<\/span>\n            <span class=\"rs-card-note rs-card-note-2\">\u266b<\/span>\n            <span class=\"rs-card-note rs-card-note-3\">\u266c<\/span>\n            <span class=\"rs-card-note rs-card-note-4\">\u266a<\/span>\n            <span class=\"rs-card-note rs-card-note-5\">\u266b<\/span>\n          <\/div>\n          <img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/fr\/3\/33\/Oui_FM_2014_logo.png\" alt=\"OUI FM logo\" class=\"rs-radio-logo\" style=\"width: 105px; height: 105px;\">\n          <span class=\"rs-radio-tag\"><i class=\"fas fa-guitar\"><\/i>Rock<\/span>\n          <h2 class=\"rs-radio-name\">\n            <span>OUI FM<\/span>\n            <span>Ecoutez en direct OUI FM<\/span>\n          <\/h2>\n          <a href=\"https:\/\/radiostreamr.com\/radio-france\/ecoutez-en-direct-oui-fm\/\" class=\"rs-listen-button\">\n            <i class=\"fas fa-play\" style=\"font-size: 0.75rem\"><\/i>\n          <\/a>\n        <\/div>\n        \n        <!-- Add after the FIP card and before RMC -->\n        <div class=\"rs-radio-card\" id=\"radioendirect-card-cheriefm\" style=\"min-width: 312.5px; flex: 0 0 312.5px;\">\n          <div class=\"rs-card-notes\">\n            <span class=\"rs-card-note rs-card-note-1\">\u266a<\/span>\n            <span class=\"rs-card-note rs-card-note-2\">\u266b<\/span>\n            <span class=\"rs-card-note rs-card-note-3\">\u266c<\/span>\n            <span class=\"rs-card-note rs-card-note-4\">\u266a<\/span>\n            <span class=\"rs-card-note rs-card-note-5\">\u266b<\/span>\n          <\/div>\n          <img decoding=\"async\" src=\"https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcRqDXL7XUgfkYyaczESXMRcGb0tP07fBd2h5A&s\" alt=\"Ch\u00e9rie FM Radio\" class=\"rs-radio-logo\" style=\"width: 105px; height: 105px;\">\n          <span class=\"rs-radio-tag\"><i class=\"fas fa-music\"><\/i>Pop\/Love<\/span>\n          <h2 class=\"rs-radio-name\">\n            <span>Ch\u00e9rie FM<\/span>\n            <span>Ecoutez en direct Ch\u00e9rie FM<\/span>\n          <\/h2>\n          <a href=\"https:\/\/radiostreamr.com\/radio-france\/ecoutez-en-direct-cheriefm\/\" class=\"rs-listen-button\">\n            <i class=\"fas fa-play\" style=\"font-size: 0.75rem\"><\/i>\n          <\/a>\n        <\/div>\n\n        <!-- Ch\u00e9rie FM -->\n        <div class=\"rs-radio-card\" id=\"radioendirect-card-cheriefm\" style=\"min-width: 312.5px; flex: 0 0 312.5px;\">\n          <div class=\"rs-card-notes\">\n            <span class=\"rs-card-note rs-card-note-1\">\u266a<\/span>\n            <span class=\"rs-card-note rs-card-note-2\">\u266b<\/span>\n            <span class=\"rs-card-note rs-card-note-3\">\u266c<\/span>\n            <span class=\"rs-card-note rs-card-note-4\">\u266a<\/span>\n            <span class=\"rs-card-note rs-card-note-5\">\u266b<\/span>\n          <\/div>\n          \n          <img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/fr\/1\/19\/RFM_logo_2011.png\" alt=\"RFM\" class=\"rs-radio-logo\" style=\"width: 105px; height: 105px;\">\n          <span class=\"rs-radio-tag\"><i class=\"fas fa-music\"><\/i>80s<\/span>\n          <h2 class=\"rs-radio-name\">\n            <span>RFM<\/span>\n            <span>Ecoutez en direct RFM<\/span>\n          <\/h2>\n          <a href=\"https:\/\/radiostreamr.com\/radio-france\/ecoutez-en-direct-rfm\/\" class=\"rs-listen-button\">\n            <i class=\"fas fa-play\" style=\"font-size: 0.75rem\"><\/i>\n          <\/a>\n        <\/div>\n\n        <!-- Ch\u00e9rie FM -->\n        <div class=\"rs-radio-card\" id=\"radioendirect-card-cheriefm\" style=\"min-width: 312.5px; flex: 0 0 312.5px;\">\n          <div class=\"rs-card-notes\">\n            <span class=\"rs-card-note rs-card-note-1\">\u266a<\/span>\n            <span class=\"rs-card-note rs-card-note-2\">\u266b<\/span>\n            <span class=\"rs-card-note rs-card-note-3\">\u266c<\/span>\n            <span class=\"rs-card-note rs-card-note-4\">\u266a<\/span>\n            <span class=\"rs-card-note rs-card-note-5\">\u266b<\/span>\n          <\/div>\n          <img decoding=\"async\" src=\"https:\/\/cdn.uc.assets.prezly.com\/b1be11c1-7593-48e0-b0d3-dfedd93ef5a2\/\" alt=\"NRJ Radio\" class=\"rs-radio-logo\" style=\"width: 105px; height: 105px;\">\n          <span class=\"rs-radio-tag\"><i class=\"fas fa-music\"><\/i>Pop\/Dance<\/span>\n          <h2 class=\"rs-radio-name\">\n            <span>NRJ<\/span>\n            <span>Ecoutez en direct NRJ<\/span>\n          <\/h2>\n          <a href=\"https:\/\/radiostreamr.com\/radio-france\/ecoutez-en-direct-nrj\/\" class=\"rs-listen-button\">\n            <i class=\"fas fa-play\" style=\"font-size: 0.75rem\"><\/i>\n          <\/a>\n        <\/div>\n\n        <!-- RTL2 -->\n        <div class=\"rs-radio-card\" id=\"radioendirect-card-rtl2\" style=\"min-width: 312.5px; flex: 0 0 312.5px;\">\n          <div class=\"rs-card-notes\">\n            <span class=\"rs-card-note rs-card-note-1\">\u266a<\/span>\n            <span class=\"rs-card-note rs-card-note-2\">\u266b<\/span>\n            <span class=\"rs-card-note rs-card-note-3\">\u266c<\/span>\n            <span class=\"rs-card-note rs-card-note-4\">\u266a<\/span>\n            <span class=\"rs-card-note rs-card-note-5\">\u266b<\/span>\n          <\/div>\n          <img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/fr\/thumb\/f\/fa\/RTL2_logo_2015.svg\/1200px-RTL2_logo_2015.svg.png\" alt=\"RTL2 Radio\" class=\"rs-radio-logo\" style=\"width: 105px; height: 105px;\">\n          <span class=\"rs-radio-tag\"><i class=\"fas fa-music\"><\/i>Pop\/Rock<\/span>\n          <h2 class=\"rs-radio-name\">\n            <span>RTL2<\/span>\n            <span>Ecoutez en direct RTL2<\/span>\n          <\/h2>\n          <a href=\"https:\/\/radiostreamr.com\/radio-france\/ecoutez-en-direct-rtl2\/\" class=\"rs-listen-button\">\n            <i class=\"fas fa-play\" style=\"font-size: 0.75rem\"><\/i>\n          <\/a>\n        <\/div>\n        \n        <div class=\"rs-radio-card\" id=\"radioendirect-card-sudradio\" style=\"min-width: 312.5px; flex: 0 0 312.5px;\">\n          <!-- RTL -->\n          <div class=\"rs-radio-card\" id=\"radioendirect-card-rtl\" style=\"min-width: 312.5px; flex: 0 0 312.5px;\">\n            <div class=\"rs-card-notes\">\n              <span class=\"rs-card-note rs-card-note-1\">\u266a<\/span>\n              <span class=\"rs-card-note rs-card-note-2\">\u266b<\/span>\n              <span class=\"rs-card-note rs-card-note-3\">\u266c<\/span>\n              <span class=\"rs-card-note rs-card-note-4\">\u266a<\/span>\n              <span class=\"rs-card-note rs-card-note-5\">\u266b<\/span>\n            <\/div>\n            <img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/5\/51\/RTL_logo.svg\/1200px-RTL_logo.svg.png\" alt=\"RTL Radio\" class=\"rs-radio-logo\" style=\"width: 105px; height: 105px;\">\n            <span class=\"rs-radio-tag\"><i class=\"fas fa-microphone\"><\/i>Info\/Talk<\/span>\n            <h2 class=\"rs-radio-name\">\n              <span>RTL<\/span>\n              <span>Ecoutez en direct RTL<\/span>\n            <\/h2>\n            <a href=\"https:\/\/radiostreamr.com\/radio-france\/ecoutez-en-direct-rtl\/\" class=\"rs-listen-button\">\n              <i class=\"fas fa-play\" style=\"font-size: 0.75rem\"><\/i>\n            <\/a>\n          <\/div>\n          <div class=\"rs-card-notes\">\n            <span class=\"rs-card-note rs-card-note-1\">\u266a<\/span>\n            <span class=\"rs-card-note rs-card-note-2\">\u266b<\/span>\n            <span class=\"rs-card-note rs-card-note-3\">\u266c<\/span>\n            <span class=\"rs-card-note rs-card-note-4\">\u266a<\/span>\n            <span class=\"rs-card-note rs-card-note-5\">\u266b<\/span>\n          <\/div>\n          <img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/0\/03\/Logo_Sud_Radio_2014.svg\/1200px-Logo_Sud_Radio_2014.svg.png\" alt=\"Sud Radio\" class=\"rs-radio-logo\" style=\"width: 105px; height: 105px;\">\n          <span class=\"rs-radio-tag\"><i class=\"fas fa-microphone\"><\/i>Info\/Talk<\/span>\n          <h2 class=\"rs-radio-name\">\n            <span>Sud Radio<\/span>\n            <span>Ecoutez en direct Sud Radio<\/span>\n          <\/h2>\n          <a href=\"https:\/\/radiostreamr.com\/radio-france\/ecoutez-en-direct-sud-radio\/\" class=\"rs-listen-button\">\n            <i class=\"fas fa-play\" style=\"font-size: 0.75rem\"><\/i>\n          <\/a>\n        <\/div>\n        \n        <!-- RMC -->\n        <div class=\"rs-radio-card\" id=\"radioendirect-card-rmc\" style=\"min-width: 312.5px; flex: 0 0 312.5px;\">\n          <div class=\"rs-card-notes\">\n            <span class=\"rs-card-note rs-card-note-1\">\u266a<\/span>\n            <span class=\"rs-card-note rs-card-note-2\">\u266b<\/span>\n            <span class=\"rs-card-note rs-card-note-3\">\u266c<\/span>\n            <span class=\"rs-card-note rs-card-note-4\">\u266a<\/span>\n            <span class=\"rs-card-note rs-card-note-5\">\u266b<\/span>\n          <\/div>\n          <img decoding=\"async\" src=\"https:\/\/yt3.googleusercontent.com\/ytc\/AIdro_k7rcILtB71q3kwlCwX14_jfamwiA4_U74MX8PZ6-sC7Rk=s900-c-k-c0x00ffffff-no-rj\" alt=\"RMC Radio\" class=\"rs-radio-logo\" style=\"width: 105px; height: 105px;\">\n          <span class=\"rs-radio-tag\"><i class=\"fas fa-microphone\"><\/i>Info\/Sport<\/span>\n          <h2 class=\"rs-radio-name\">\n            <span>RMC<\/span>\n            <span>Ecoutez en direct RMC<\/span>\n          <\/h2>\n          <a href=\"https:\/\/radiostreamr.com\/radio-france\/ecoutez-en-direct-rmc\/\" class=\"rs-listen-button\">\n            <i class=\"fas fa-play\" style=\"font-size: 0.75rem\"><\/i>\n          <\/a>\n        <\/div>\n\n        <!-- Europe 1 -->\n        <div class=\"rs-radio-card\" id=\"radioendirect-card-europe1\" style=\"min-width: 312.5px; flex: 0 0 312.5px;\">\n          <div class=\"rs-card-notes\">\n            <span class=\"rs-card-note rs-card-note-1\">\u266a<\/span>\n            <span class=\"rs-card-note rs-card-note-2\">\u266b<\/span>\n            <span class=\"rs-card-note rs-card-note-3\">\u266c<\/span>\n            <span class=\"rs-card-note rs-card-note-4\">\u266a<\/span>\n            <span class=\"rs-card-note rs-card-note-5\">\u266b<\/span>\n          <\/div>\n          <img decoding=\"async\" src=\"https:\/\/cdn-europe1.lanmedia.fr\/var\/europe1\/storage\/images\/europe1\/animateurs\/europe-12\/53472641-3-fre-FR\/Europe-1.png\" alt=\"Europe 1\" class=\"rs-radio-logo\" style=\"width: 105px; height: 105px;\">\n          <span class=\"rs-radio-tag\"><i class=\"fas fa-microphone\"><\/i>Info\/Talk<\/span>\n          <h2 class=\"rs-radio-name\">\n            <span>Europe 1<\/span>\n            <span>Ecoutez en direct Europe 1<\/span>\n          <\/h2>\n          <a href=\"https:\/\/radiostreamr.com\/radio-france\/ecoutez-en-direct-europe1\/\" class=\"rs-listen-button\">\n            <i class=\"fas fa-play\" style=\"font-size: 0.75rem\"><\/i>\n          <\/a>\n        <\/div>\n        \n        <!-- Rire et Chansons -->\n        <div class=\"rs-radio-card\" id=\"radioendirect-card-rireetchansons\" style=\"min-width: 312.5px; flex: 0 0 312.5px;\">\n          <div class=\"rs-card-notes\">\n            <span class=\"rs-card-note rs-card-note-1\">\u266a<\/span>\n            <span class=\"rs-card-note rs-card-note-2\">\u266b<\/span>\n            <span class=\"rs-card-note rs-card-note-3\">\u266c<\/span>\n            <span class=\"rs-card-note rs-card-note-4\">\u266a<\/span>\n            <span class=\"rs-card-note rs-card-note-5\">\u266b<\/span>\n          <\/div>\n          <img decoding=\"async\" src=\"https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcRGs-8gbq-CxVHtpgHNRgIYFLwJ8yaNPmC-1A&amp;s\" alt=\"Rire et Chansons\" class=\"rs-radio-logo\" style=\"width: 105px; height: 105px;\">\n          <span class=\"rs-radio-tag\"><i class=\"fas fa-laugh\"><\/i>Humour<\/span>\n          <h2 class=\"rs-radio-name\">\n            <span>Rire et Chansons<\/span>\n            <span>Ecoutez en direct Rire et Chansons<\/span>\n          <\/h2>\n          <a href=\"https:\/\/radiostreamr.com\/radio-france\/ecoutez-en-direct-rire-et-chansons\/\" class=\"rs-listen-button\">\n            <i class=\"fas fa-play\" style=\"font-size: 0.75rem\"><\/i>\n          <\/a>\n        <\/div>\n\n        <!-- Fun Radio -->\n        <div class=\"rs-radio-card\" id=\"radioendirect-card-funradio\" style=\"min-width: 312.5px; flex: 0 0 312.5px;\">\n          <div class=\"rs-card-notes\">\n            <span class=\"rs-card-note rs-card-note-1\">\u266a<\/span>\n            <span class=\"rs-card-note rs-card-note-2\">\u266b<\/span>\n            <span class=\"rs-card-note rs-card-note-3\">\u266c<\/span>\n            <span class=\"rs-card-note rs-card-note-4\">\u266a<\/span>\n            <span class=\"rs-card-note rs-card-note-5\">\u266b<\/span>\n          <\/div>\n          <img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/e\/ef\/Fun_Radio_2021_logo.png\" alt=\"Fun Radio\" class=\"rs-radio-logo\" style=\"width: 105px; height: 105px;\">\n          <span class=\"rs-radio-tag\"><i class=\"fas fa-music\"><\/i>Dance\/Electro<\/span>\n          <h2 class=\"rs-radio-name\">\n            <span>Fun Radio<\/span>\n            <span>Ecoutez en direct Fun Radio<\/span>\n          <\/h2>\n          <a href=\"https:\/\/radiostreamr.com\/radio-france\/ecoutez-en-direct-fun-radio\/\" class=\"rs-listen-button\">\n            <i class=\"fas fa-play\" style=\"font-size: 0.75rem\"><\/i>\n          <\/a>\n        <\/div>\n\n        <!-- France Inter -->\n        <div class=\"rs-radio-card\" id=\"radioendirect-card-franceinter\" style=\"min-width: 312.5px; flex: 0 0 312.5px;\">\n          <div class=\"rs-card-notes\">\n            <span class=\"rs-card-note rs-card-note-1\">\u266a<\/span>\n            <span class=\"rs-card-note rs-card-note-2\">\u266b<\/span>\n            <span class=\"rs-card-note rs-card-note-3\">\u266c<\/span>\n            <span class=\"rs-card-note rs-card-note-4\">\u266a<\/span>\n            <span class=\"rs-card-note rs-card-note-5\">\u266b<\/span>\n          <\/div>\n          <img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/fr\/thumb\/3\/39\/France_Inter_logo.svg\/2048px-France_Inter_logo.svg.png\" alt=\"France Inter\" class=\"rs-radio-logo\" style=\"width: 105px; height: 105px;\">\n          <span class=\"rs-radio-tag\"><i class=\"fas fa-microphone\"><\/i>Info\/Culture<\/span>\n          <h2 class=\"rs-radio-name\">\n            <span>France Inter<\/span>\n            <span>Ecoutez en direct France Inter<\/span>\n          <\/h2>\n          <a href=\"https:\/\/radiostreamr.com\/radio-france\/ecoutez-en-direct-france-inter\/\" class=\"rs-listen-button\">\n            <i class=\"fas fa-play\" style=\"font-size: 0.75rem\"><\/i>\n          <\/a>\n        <\/div>\n\n      <\/div>\n\n      <button class=\"rs-carousel-button rs-next\" id=\"radioendirect-next-button\">\n        <i class=\"fas fa-chevron-right\"><\/i>\n      <\/button>\n    <\/div>\n  <\/div>\n\n  <script>\n    (function() {\n      class RadioStreamrCarousel {\n        constructor(selector) {\n          this.container = document.querySelector(selector);\n          this.carousel = this.container.querySelector('.rs-carousel');\n          this.allCards = Array.from(this.container.querySelectorAll('.rs-radio-card')); \/\/ Store all cards\n          this.prevButton = this.container.querySelector('.rs-carousel-button.rs-prev');\n\n          \/\/ Select random 9 cards\n          this.selectRandomCards();\n          \n          \/\/ Initialize properties after cards are selected\n          this.cards = Array.from(this.container.querySelectorAll('.rs-radio-card'));\n          this.currentIndex = 0;\n          this.cardWidth = this.cards[0].offsetWidth + 20;\n          this.cardsPerView = Math.floor(this.carousel.offsetWidth \/ this.cardWidth);\n          this.maxIndex = this.cards.length - this.cardsPerView;\n          this.nextButton = this.container.querySelector('.rs-carousel-button.rs-next');\n\n          this.init();\n        }\n\n        selectRandomCards() {\n          \/\/ Remove all cards from carousel\n          this.allCards.forEach(card => card.remove());\n\n          \/\/ Randomly select 9 cards\n          const shuffled = [...this.allCards].sort(() => 0.5 - Math.random());\n          const selected = shuffled.slice(0, 9);\n          \n          \/\/ Add selected cards back to carousel\n          selected.forEach(card => {\n            this.carousel.appendChild(card);\n          });\n        }\n\n        init() {\n          this.bindEvents();\n        }\n\n        scrollToIndex(index) {\n          \/\/ Handle infinite loop\n          if (index < 0) {\n            this.currentIndex = this.cards.length - this.cardsPerView;\n          } else if (index > this.maxIndex) {\n            this.currentIndex = 0;\n          } else {\n            this.currentIndex = index;\n          }\n          \n          \/\/ Add scrolling class to cards\n          this.cards.forEach(card => {\n            card.classList.add('rs-scrolling');\n            setTimeout(() => card.classList.remove('rs-scrolling'), 500);\n          });\n\n          \/\/ Scroll with animation\n          this.carousel.scrollTo({\n            left: this.currentIndex * this.cardWidth,\n            behavior: 'smooth'\n          });\n\n          \/\/ Create floating notes effect\n          const notes = ['\u266a', '\u266b', '\u266c'];\n          for(let i = 0; i < 3; i++) {\n            const note = document.createElement('span');\n            note.textContent = notes[Math.floor(Math.random() * notes.length)];\n            note.style.cssText = `\n              position: absolute;\n              color: #00ffff;\n              font-size: 24px;\n              top: ${50 + Math.random() * 100}px;\n              left: ${50 + Math.random() * (this.carousel.offsetWidth - 100)}px;\n              animation: rs-floatingNotes 1s ease-out ${i * 0.2}s forwards;\n              pointer-events: none;\n            `;\n            this.carousel.appendChild(note);\n            setTimeout(() => note.remove(), 1000 + i * 200);\n          }\n        }\n\n        bindEvents() {\n          this.prevButton.addEventListener('click', () => this.scrollToIndex(this.currentIndex - 1));\n          this.nextButton.addEventListener('click', () => this.scrollToIndex(this.currentIndex + 1));\n\n          window.addEventListener('resize', () => {\n            const newCardsPerView = Math.floor(this.carousel.offsetWidth \/ this.cardWidth);\n            const newMaxIndex = this.cards.length - newCardsPerView;\n            this.currentIndex = Math.min(this.currentIndex, newMaxIndex);\n            this.scrollToIndex(this.currentIndex);\n          });\n        }\n      }\n\n      document.addEventListener('DOMContentLoaded', function() {\n        new RadioStreamrCarousel('.rs-carousel-section');\n      });\n    })();\n  <\/script>\n<\/body><\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0d0797d e-con-full e-flex e-con e-parent\" data-id=\"0d0797d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9260360 elementor-widget elementor-widget-shortcode\" data-id=\"9260360\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Code Source &#8211; Le podcast quotidien d&rsquo;actualit\u00e9 du Parisien Plus r\u00e9centsPlus anciens Publicit\u00e9 Code Source : Le podcast quotidien d&rsquo;actualit\u00e9 du Parisien Voir leur Facebook Code Source est le podcast quotidien d&rsquo;actualit\u00e9 du Parisien. La r\u00e9daction du journal vous invite dans ses coulisses et vous fait d\u00e9couvrir le dessous des grandes histoires de l&rsquo;actualit\u00e9. Chaque [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1878,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_header_footer","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-1874","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-podcast"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Code Source - Le Parisien\u00a0- Podcast et Replay des sujets d&#039;actualit\u00e9<\/title>\n<meta name=\"description\" content=\"Podcast et replay de Code Source : explorez l&#039;actualit\u00e9 avec les journalistes du Parisien. \u00c9coutez ou t\u00e9l\u00e9chargez les \u00e9pisodes.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/radiostreamr.com\/radio-france\/podcast-code-source-parisien\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Code Source - Le Parisien\u00a0- Podcast et Replay des sujets d&#039;actualit\u00e9\" \/>\n<meta property=\"og:description\" content=\"Podcast et replay de Code Source : explorez l&#039;actualit\u00e9 avec les journalistes du Parisien. \u00c9coutez ou t\u00e9l\u00e9chargez les \u00e9pisodes.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/radiostreamr.com\/radio-france\/podcast-code-source-parisien\/\" \/>\n<meta property=\"og:site_name\" content=\"RadioStreamR - Ecoutez la Radio fran\u00e7aise en ligne en direct\" \/>\n<meta property=\"article:published_time\" content=\"2024-12-20T10:19:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-20T10:19:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/12\/code-source-podcast.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"640\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/radiostreamr.com\/radio-france\/podcast-code-source-parisien\/\",\"url\":\"https:\/\/radiostreamr.com\/radio-france\/podcast-code-source-parisien\/\",\"name\":\"Code Source - Le Parisien\u00a0- Podcast et Replay des sujets d'actualit\u00e9\",\"isPartOf\":{\"@id\":\"https:\/\/radiostreamr.com\/radio-france\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/radiostreamr.com\/radio-france\/podcast-code-source-parisien\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/radiostreamr.com\/radio-france\/podcast-code-source-parisien\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/12\/code-source-podcast.webp\",\"datePublished\":\"2024-12-20T10:19:50+00:00\",\"dateModified\":\"2024-12-20T10:19:55+00:00\",\"author\":{\"@id\":\"https:\/\/radiostreamr.com\/radio-france\/#\/schema\/person\/8109b41ba8df99078005b58e0274a646\"},\"description\":\"Podcast et replay de Code Source : explorez l'actualit\u00e9 avec les journalistes du Parisien. \u00c9coutez ou t\u00e9l\u00e9chargez les \u00e9pisodes.\",\"breadcrumb\":{\"@id\":\"https:\/\/radiostreamr.com\/radio-france\/podcast-code-source-parisien\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/radiostreamr.com\/radio-france\/podcast-code-source-parisien\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/radiostreamr.com\/radio-france\/podcast-code-source-parisien\/#primaryimage\",\"url\":\"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/12\/code-source-podcast.webp\",\"contentUrl\":\"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/12\/code-source-podcast.webp\",\"width\":640,\"height\":640,\"caption\":\"Podcast et replay de Code Source : explorez l'actualit\u00e9 avec les journalistes du Parisien. \u00c9coutez ou t\u00e9l\u00e9chargez les \u00e9pisodes.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/radiostreamr.com\/radio-france\/podcast-code-source-parisien\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\/\/radiostreamr.com\/radio-france\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Code Source &#8211; Le Parisien\u00a0&#8211; Podcast et Replay des sujets d&rsquo;actualit\u00e9\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/radiostreamr.com\/radio-france\/#website\",\"url\":\"https:\/\/radiostreamr.com\/radio-france\/\",\"name\":\"RadioStreamR - Ecoutez la Radio fran\u00e7aise en ligne en direct\",\"description\":\"\u00c9coutez les meilleures stations de radio fran\u00e7aises en direct. Musique, actualit\u00e9s, et \u00e9missions locales - disponibles partout, \u00e0 tout moment.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/radiostreamr.com\/radio-france\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/radiostreamr.com\/radio-france\/#\/schema\/person\/8109b41ba8df99078005b58e0274a646\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/radiostreamr.com\/radio-france\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/94a5a2d7ac834dce40e1e25743dcb576?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/94a5a2d7ac834dce40e1e25743dcb576?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/radiostreamr.com\/radio-france\"],\"url\":\"https:\/\/radiostreamr.com\/radio-france\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Code Source - Le Parisien\u00a0- Podcast et Replay des sujets d'actualit\u00e9","description":"Podcast et replay de Code Source : explorez l'actualit\u00e9 avec les journalistes du Parisien. \u00c9coutez ou t\u00e9l\u00e9chargez les \u00e9pisodes.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/radiostreamr.com\/radio-france\/podcast-code-source-parisien\/","og_locale":"fr_FR","og_type":"article","og_title":"Code Source - Le Parisien\u00a0- Podcast et Replay des sujets d'actualit\u00e9","og_description":"Podcast et replay de Code Source : explorez l'actualit\u00e9 avec les journalistes du Parisien. \u00c9coutez ou t\u00e9l\u00e9chargez les \u00e9pisodes.","og_url":"https:\/\/radiostreamr.com\/radio-france\/podcast-code-source-parisien\/","og_site_name":"RadioStreamR - Ecoutez la Radio fran\u00e7aise en ligne en direct","article_published_time":"2024-12-20T10:19:50+00:00","article_modified_time":"2024-12-20T10:19:55+00:00","og_image":[{"width":640,"height":640,"url":"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/12\/code-source-podcast.webp","type":"image\/webp"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u00c9crit par":"admin","Dur\u00e9e de lecture estim\u00e9e":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/radiostreamr.com\/radio-france\/podcast-code-source-parisien\/","url":"https:\/\/radiostreamr.com\/radio-france\/podcast-code-source-parisien\/","name":"Code Source - Le Parisien\u00a0- Podcast et Replay des sujets d'actualit\u00e9","isPartOf":{"@id":"https:\/\/radiostreamr.com\/radio-france\/#website"},"primaryImageOfPage":{"@id":"https:\/\/radiostreamr.com\/radio-france\/podcast-code-source-parisien\/#primaryimage"},"image":{"@id":"https:\/\/radiostreamr.com\/radio-france\/podcast-code-source-parisien\/#primaryimage"},"thumbnailUrl":"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/12\/code-source-podcast.webp","datePublished":"2024-12-20T10:19:50+00:00","dateModified":"2024-12-20T10:19:55+00:00","author":{"@id":"https:\/\/radiostreamr.com\/radio-france\/#\/schema\/person\/8109b41ba8df99078005b58e0274a646"},"description":"Podcast et replay de Code Source : explorez l'actualit\u00e9 avec les journalistes du Parisien. \u00c9coutez ou t\u00e9l\u00e9chargez les \u00e9pisodes.","breadcrumb":{"@id":"https:\/\/radiostreamr.com\/radio-france\/podcast-code-source-parisien\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/radiostreamr.com\/radio-france\/podcast-code-source-parisien\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/radiostreamr.com\/radio-france\/podcast-code-source-parisien\/#primaryimage","url":"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/12\/code-source-podcast.webp","contentUrl":"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/12\/code-source-podcast.webp","width":640,"height":640,"caption":"Podcast et replay de Code Source : explorez l'actualit\u00e9 avec les journalistes du Parisien. \u00c9coutez ou t\u00e9l\u00e9chargez les \u00e9pisodes."},{"@type":"BreadcrumbList","@id":"https:\/\/radiostreamr.com\/radio-france\/podcast-code-source-parisien\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/radiostreamr.com\/radio-france\/"},{"@type":"ListItem","position":2,"name":"Code Source &#8211; Le Parisien\u00a0&#8211; Podcast et Replay des sujets d&rsquo;actualit\u00e9"}]},{"@type":"WebSite","@id":"https:\/\/radiostreamr.com\/radio-france\/#website","url":"https:\/\/radiostreamr.com\/radio-france\/","name":"RadioStreamR - Ecoutez la Radio fran\u00e7aise en ligne en direct","description":"\u00c9coutez les meilleures stations de radio fran\u00e7aises en direct. Musique, actualit\u00e9s, et \u00e9missions locales - disponibles partout, \u00e0 tout moment.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/radiostreamr.com\/radio-france\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/radiostreamr.com\/radio-france\/#\/schema\/person\/8109b41ba8df99078005b58e0274a646","name":"admin","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/radiostreamr.com\/radio-france\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/94a5a2d7ac834dce40e1e25743dcb576?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/94a5a2d7ac834dce40e1e25743dcb576?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/radiostreamr.com\/radio-france"],"url":"https:\/\/radiostreamr.com\/radio-france\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/radiostreamr.com\/radio-france\/wp-json\/wp\/v2\/posts\/1874","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/radiostreamr.com\/radio-france\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/radiostreamr.com\/radio-france\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/radiostreamr.com\/radio-france\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/radiostreamr.com\/radio-france\/wp-json\/wp\/v2\/comments?post=1874"}],"version-history":[{"count":4,"href":"https:\/\/radiostreamr.com\/radio-france\/wp-json\/wp\/v2\/posts\/1874\/revisions"}],"predecessor-version":[{"id":1879,"href":"https:\/\/radiostreamr.com\/radio-france\/wp-json\/wp\/v2\/posts\/1874\/revisions\/1879"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/radiostreamr.com\/radio-france\/wp-json\/wp\/v2\/media\/1878"}],"wp:attachment":[{"href":"https:\/\/radiostreamr.com\/radio-france\/wp-json\/wp\/v2\/media?parent=1874"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/radiostreamr.com\/radio-france\/wp-json\/wp\/v2\/categories?post=1874"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/radiostreamr.com\/radio-france\/wp-json\/wp\/v2\/tags?post=1874"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}