

{"id":9,"date":"2024-10-24T14:17:38","date_gmt":"2024-10-24T12:17:38","guid":{"rendered":"https:\/\/radiostreamr.com\/radio-france\/?page_id=9"},"modified":"2024-12-20T11:37:25","modified_gmt":"2024-12-20T10:37:25","slug":"radios-francaises-en-ligne-ecoutez-les-meilleures-stations","status":"publish","type":"page","link":"https:\/\/radiostreamr.com\/radio-france\/","title":{"rendered":"Radios Fran\u00e7aises en Ligne | \u00c9coutez les Meilleures Stations"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"9\" class=\"elementor elementor-9\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-44a36ab e-con-full e-flex e-con e-parent\" data-id=\"44a36ab\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-014fc69 elementor-widget elementor-widget-html\" data-id=\"014fc69\" 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<meta http-equiv=\"Content-Security-Policy\" content=\"default-src 'self' https:; script-src 'self' https: 'unsafe-inline' 'unsafe-eval'; style-src 'self' https: 'unsafe-inline'; img-src 'self' https: data:;\">\n<meta http-equiv=\"X-Frame-Options\" content=\"DENY\">\n<meta http-equiv=\"X-XSS-Protection\" content=\"1; mode=block\">\n<meta http-equiv=\"X-Content-Type-Options\" content=\"nosniff\">\n<meta http-equiv=\"Referrer-Policy\" content=\"strict-origin-when-cross-origin\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@300;400;700&amp;display=swap\" rel=\"stylesheet\">\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/select2@4.1.0-rc.0\/dist\/css\/select2.min.css\" rel=\"stylesheet\">\n<style>\n  .pacific-web-radios {\n    font-family: 'Roboto', sans-serif;\n    margin: 0;\n    padding: 0;\n    background: linear-gradient(45deg, #1a1a1a, #2c2c2c, #0e4d4d);\n    background-size: 400% 400%;\n    animation: gradientBG 15s ease infinite;\n    color: #ffffff;\n    width: 100vw;\n    margin-left: -50vw;\n    left: 50%;\n    position: relative;\n    overflow-x: hidden;\n  }\n  .pacific-web-radios @keyframes gradientBG {\n    0% {\n      background-position: 0% 50%;\n    }\n    50% {\n      background-position: 100% 50%;\n    }\n    100% {\n      background-position: 0% 50%;\n    }\n  }\n  .pacific-web-radios .first-block {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n    overflow: hidden;\n    height: 100vh;\n    padding-bottom: 60px;\n  }\n  .pacific-web-radios .first-block::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: rgba(0, 0, 0, 0.5);\n    z-index: 1;\n  }\n  .pacific-web-radios .background-slideshow {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    z-index: 0;\n  }\n  .pacific-web-radios .slide {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n    transition: opacity 1s ease-in-out;\n    background-size: cover;\n    background-position: center;\n  }\n  .pacific-web-radios .slide.active {\n    opacity: 1;\n  }\n  .pacific-web-radios .first-block-content {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    width: 90%;\n    max-width: 800px;\n    padding: 20px;\n    position: relative;\n    z-index: 2;\n    border-radius: 10px;\n    margin: 0 auto;\n    padding-bottom: 60px;\n  }\n  .pacific-web-radios .content-wrapper {\n    padding-top: 50px;\n    padding-left: 250px;\n    padding-right: 250px;\n    width: 100%;\n    max-width: 100%;\n    margin: 0 auto;\n    box-sizing: border-box;\n  }\n  @media (max-width: 1024px) {\n    .pacific-web-radios .content-wrapper {\n      padding-left: 40px;\n      padding-right: 40px;\n    }\n  }\n  @media (max-width: 600px) {\n    .pacific-web-radios .content-wrapper {\n      padding-left: 15px;\n      padding-right: 15px;\n    }\n  }\n  .pacific-web-radios .first-block-content,\n  .pacific-web-radios #results-container {\n    width: 100%;\n    max-width: 100%;\n    margin: 0 auto;\n  }\n  .pacific-web-radios .search-and-filter-container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    flex-wrap: wrap;\n  }\n  .pacific-web-radios #search-container,\n  .pacific-web-radios #category-filter-container {\n    flex: 1;\n    display: flex;\n    justify-content: center;\n    margin: 5px;\n    min-width: 200px;\n  }\n  .pacific-web-radios .select2-container {\n    min-width: 200px !important;\n  }\n  .pacific-web-radios .select2-container--default .select2-selection--single,\n  .pacific-web-radios .select2-container--default .select2-selection--multiple {\n    background-color: rgba(255, 255, 255, 0.1);\n    border: 2px solid #00ffff;\n    border-radius: 5px;\n    color: #ffffff;\n    padding: 10px;\n    font-size: 1em;\n    height: auto;\n    box-shadow: 0 0 10px #00ffff;\n  }\n  .pacific-web-radios .select2-container--default .select2-selection--single .select2-selection__rendered,\n  .pacific-web-radios .select2-container--default .select2-selection--multiple .select2-selection__rendered {\n    color: #ffffff;\n    line-height: normal;\n  }\n  .pacific-web-radios .select2-container--default .select2-selection--single .select2-selection__arrow {\n    height: 100%;\n  }\n  .pacific-web-radios .select2-container--default .select2-selection--multiple .select2-selection__choice {\n    background-color: #00ffff;\n    color: #000;\n    border: none;\n    padding: 5px 10px;\n    border-radius: 15px;\n  }\n  .pacific-web-radios .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {\n    color: #000;\n    margin-right: 5px;\n  }\n  .pacific-web-radios .select2-container--default .select2-search--inline .select2-search__field {\n    color: #ffffff;\n  }\n  .pacific-web-radios .select2-dropdown {\n    background-color: #2c2c2c;\n    border: 2px solid #00ffff;\n  }\n  .pacific-web-radios .select2-container--default .select2-results__option--highlighted[aria-selected] {\n    background-color: #00ffff;\n    color: #000;\n  }\n  .pacific-web-radios .select2-container--default .select2-results__option[aria-selected=true] {\n    background-color: #008080;\n  }\n  .pacific-web-radios .select2-container--default .select2-selection--single::placeholder,\n  .pacific-web-radios .select2-container--default .select2-selection--multiple::placeholder,\n  .pacific-web-radios .select2-container--default .select2-selection--multiple .select2-search__field::placeholder {\n    color: #ffffff;\n  }\n  .pacific-web-radios .container {\n    max-width: none;\n    width: 100%;\n    padding: 20px;\n    text-align: center;\n    box-sizing: border-box;\n  }\n  .pacific-web-radios h1 {\n    text-align: center;\n    font-size: 2em;\n    margin-bottom: 20px;\n    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff;\n  }\n  .pacific-web-radios .subtitle {\n    text-align: center;\n    max-width: 800px;\n    margin: 0 auto 20px;\n    font-size: 1em;\n    line-height: 1.5;\n    color: #ffffff;\n  }\n  .pacific-web-radios .results-count {\n    text-align: center;\n    margin: 60px 0 10px;\n    font-size: 1.1em;\n    color: #00ffff;\n  }\n  .pacific-web-radios .category-vignettes-container {\n    display: flex;\n    justify-content: center;\n    flex-wrap: wrap;\n    margin: 20px 0;\n  }\n  .pacific-web-radios .category-vignettes {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n  }\n  .pacific-web-radios .tag-vignette {\n    display: inline-block;\n    background-color: rgba(0, 255, 255, 0.2);\n    color: #00ffff;\n    padding: 5px 10px;\n    margin: 5px;\n    border-radius: 15px;\n    font-size: 14px;\n    cursor: pointer;\n    transition: background-color 0.3s ease;\n  }\n  .pacific-web-radios .tag-vignette:hover {\n    background-color: rgba(0, 255, 255, 0.4);\n  }\n  .pacific-web-radios .tabs {\n    display: flex;\n    justify-content: center;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    z-index: 10;\n  }\n  .pacific-web-radios .tab {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 5px;\n    padding: 10px 20px;\n    background-color: transparent;\n    border: 2px solid #00ffff;\n    color: #00ffff;\n    cursor: pointer;\n    transition: background-color 0.3s, color 0.3s;\n  }\n  .pacific-web-radios .tab img {\n    width: 20px;\n    height: 20px;\n    filter: invert(1);\n  }\n  .pacific-web-radios .tab:hover, .pacific-web-radios .tab.active {\n    background-color: #00ffff;\n    color: #000;\n  }\n  .pacific-web-radios .tab:hover img, .pacific-web-radios .tab.active img {\n    filter: none;\n  }\n  .pacific-web-radios .tab:first-child {\n    border-top-left-radius: 5px;\n    border-bottom-left-radius: 5px;\n  }\n  .pacific-web-radios .tab:last-child {\n    border-top-right-radius: 5px;\n    border-bottom-right-radius: 5px;\n  }\n  .pacific-web-radios #results-container {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-between;\n    margin-top: 20px;\n  }\n  .pacific-web-radios .station-card {\n    background-color: rgba(255, 255, 255, 0.1);\n    border-radius: 5px;\n    padding: 15px;\n    margin-bottom: 15px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: center;\n    width: calc(20% - 10px);\n    box-sizing: border-box;\n    border: 1px solid #00ffff;\n    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);\n    position: relative;\n    overflow: hidden;\n  }\n  .pacific-web-radios .favorite-button {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n    width: 30px;\n    height: 30px;\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-image: url('https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/logo-10.webp');\n    background-size: cover;\n    background-repeat: no-repeat;\n    background-position: center;\n    transition: transform 0.2s;\n  }\n  .pacific-web-radios .favorite-button.active {\n    background-image: url('https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/logo-22.webp');\n  }\n  .pacific-web-radios .favorite-button img {\n    display: none;\n  }\n  .pacific-web-radios .station-info {\n    width: 100%;\n    display: flex;\n    justify-content: center;\n    margin-bottom: 10px;\n  }\n  .pacific-web-radios .station-logo {\n    width: 80px;\n    height: 80px;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n  .pacific-web-radios .station-details {\n    width: 100%;\n    text-align: center;\n  }\n  .pacific-web-radios .station-details h2 {\n    margin: 10px 0;\n    color: #ffffff;\n    font-size: 1.2em;\n  }\n  .pacific-web-radios .station-details p {\n    margin: 5px 0;\n    font-size: 0.9em;\n  }\n  .pacific-web-radios .play-button {\n    width: 40px;\n    height: 40px;\n    margin-top: 10px;\n    background-color: #00ffff;\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n    padding: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    transition: background-color 0.3s ease;\n  }\n  .pacific-web-radios .play-button:hover {\n    background-color: #00cccc;\n  }\n  .pacific-web-radios .play-button img {\n    width: 20px;\n    height: 20px;\n    filter: invert(1);\n  }\n  .pacific-web-radios .search-and-filter-container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    flex-wrap: wrap;\n  }\n  .pacific-web-radios #search-container {\n    flex: 1;\n    display: flex;\n    justify-content: center;\n    margin-right: 10px;\n    min-width: 200px;\n  }\n  .pacific-web-radios #category-filter-container {\n    flex: 0 0 auto;\n    display: flex;\n    justify-content: center;\n    margin: 5px;\n    min-width: 150px;\n  }\n  .pacific-web-radios #search-input {\n    width: 100%;\n    padding: 10px;\n    font-size: 1em;\n    border: 2px solid #00ffff;\n    border-radius: 5px;\n    background-color: rgba(255, 255, 255, 0.1);\n    color: #ffffff;\n    box-shadow: 0 0 10px #00ffff;\n  }\n  .pacific-web-radios #search-input::placeholder {\n    color: #ffffff;\n  }\n  .pacific-web-radios #search-button {\n    padding: 10px;\n    font-size: 1em;\n    border: none;\n    border-radius: 5px;\n    background-color: #00ffff;\n    color: #000;\n    cursor: pointer;\n    transition: background-color 0.3s ease;\n    box-shadow: 0 0 10px #00ffff;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .pacific-web-radios #search-button img {\n    width: 20px;\n    height: 20px;\n    filter: invert(1);\n  }\n  .pacific-web-radios #search-button:hover {\n    background-color: #00cccc;\n  }\n  .pacific-web-radios .popular-radios-section {\n    margin-top: 40px;\n    background-color: rgba(255, 255, 255, 0.1);\n    border-radius: 10px;\n  }\n  @media (min-width: 1024px) {\n  .popular-radios-section {\n    padding: 50px 250px; \/* 50px pour le haut et le bas, 250px pour la gauche et la droite *\/\n  }\n}\n  @media (min-width: 768px) and (max-width: 1023px) {\n  .popular-radios-section {\n    padding: 35px; \/* 35px pour tous les c\u00f4t\u00e9s (haut, bas, gauche, droite) *\/\n  }\n}\n  @media (max-width: 767px) {\n  .popular-radios-section {\n    padding: 15px; \/* 15px pour tous les c\u00f4t\u00e9s (haut, bas, gauche, droite) *\/\n  }\n}\n  .pacific-web-radios .popular-radios-section h2 {\n    color: #00ffff;\n    font-size: 24px;\n    margin-bottom: 10px;\n  }\n  .pacific-web-radios .popular-radios-section h3 {\n    color: #ffffff;\n    font-size: 18px;\n    margin-bottom: 20px;\n  }\n  .pacific-web-radios #popular-radios-list-france {\n    list-style-type: none;\n    padding: 0;\n  }\n  @media (max-width: 767px) {\n  .pacific-web-radios #popular-radios-list-france {\n    text-align: center; \/* Centre le contenu des cartes *\/\n    justify-content: center; \/* Centre tout contenu flex interne si n\u00e9cessaire *\/\n  }\n}\n  .pacific-web-radios #popular-radios-list-france li {\n    margin-bottom: 10px;\n    padding: 10px;\n    background-color: rgba(0, 255, 255, 0.1);\n    border-radius: 5px;\n    cursor: pointer;\n    transition: background-color 0.3s ease;\n  }\n  .pacific-web-radios #popular-radios-list-france li:hover {\n    background-color: rgba(0, 255, 255, 0.2);\n  }\n  \/* Loading Animation styles *\/\n  .loading-animation {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(0, 0, 0, 0.7);\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    z-index: 9999;\n  }\n  .spinner {\n    width: 50px;\n    height: 50px;\n    border: 5px solid #00ffff;\n    border-top: 5px solid transparent;\n    border-radius: 50%;\n    animation: spin 1s linear infinite;\n  }\n  @keyframes spin {\n    0% { transform: rotate(0deg); }\n    100% { transform: rotate(360deg); }\n  }\n  .loading-animation p {\n    margin-top: 20px;\n    color: #00ffff;\n    font-size: 18px;\n  }\n  \/* Modal styles *\/\n  .pacific-web-radios .modal {\n    display: none;\n    position: fixed;\n    z-index: 1000;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    overflow: auto;\n    background-color: rgba(0,0,0,0.4);\n    backdrop-filter: blur(5px);\n  }\n  .pacific-web-radios .modal-content {\n    background-color: #2c2c2c;\n    padding: 30px;\n    border: 2px solid #00ffff;\n    width: 90%;\n    max-width: 500px;\n    max-height: 90vh;\n    border-radius: 20px;\n    text-align: center;\n    box-shadow: 0 0 30px rgba(0, 255, 255, 0.5);\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    overflow-y: auto;\n  }\n  .pacific-web-radios .modal-header {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    margin-bottom: 20px;\n  }\n  .pacific-web-radios #station-logo {\n    width: 150px;\n    height: 150px;\n    border-radius: 50%;\n    margin-bottom: 15px;\n    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);\n  }\n  .pacific-web-radios #station-name {\n    margin-bottom: 5px;\n    color: #00ffff;\n    font-size: 24px;\n  }\n  .pacific-web-radios #station-country {\n    margin-bottom: 10px;\n    color: #ffffff;\n    font-size: 16px;\n  }\n  .pacific-web-radios #station-description {\n    margin-bottom: 15px;\n    color: #cccccc;\n    font-size: 14px;\n  }\n  .pacific-web-radios #station-tags {\n    margin-bottom: 10px;\n  }\n  .pacific-web-radios .tag-vignette {\n    display: inline-block;\n    background-color: rgba(0, 255, 255, 0.2);\n    color: #00ffff;\n    padding: 5px 10px;\n    margin: 2px;\n    border-radius: 15px;\n    font-size: 12px;\n    cursor: pointer;\n  }\n  .pacific-web-radios #station-info {\n    display: flex;\n    justify-content: center;\n    gap: 15px;\n    margin-bottom: 20px;\n    color: #00ffff;\n    font-size: 14px;\n  }\n  .pacific-web-radios #audio-controls {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 20px;\n  }\n  .pacific-web-radios .control-button {\n    width: 50px;\n    height: 50px;\n    background-color: #00ffff;\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    transition: background-color 0.3s ease, transform 0.1s ease;\n  }\n  .pacific-web-radios .control-button:hover {\n    background-color: #00cccc;\n    transform: scale(1.1);\n  }\n  .pacific-web-radios .control-button img {\n    width: 25px;\n    height: 25px;\n    filter: invert(1);\n  }\n  .pacific-web-radios #volume-slider {\n    width: 120px;\n    accent-color: #00ffff;\n  }\n  .pacific-web-radios .close {\n    position: absolute;\n    top: 10px;\n    right: 20px;\n    color: #00ffff;\n    font-size: 35px;\n    font-weight: bold;\n    cursor: pointer;\n    transition: color 0.3s;\n  }\n  .pacific-web-radios .close:hover {\n    color: #00cccc;\n  }\n  \/* Select2 Styles *\/\n  .pacific-web-radios .select2-container {\n    min-width: 200px !important;\n  }\n  .pacific-web-radios .select2-container--default .select2-selection--single,\n  .pacific-web-radios .select2-container--default .select2-selection--multiple {\n    background-color: rgba(255, 255, 255, 0.1);\n    border: 2px solid #00ffff;\n    border-radius: 5px;\n    color: #ffffff;\n    padding: 10px;\n    font-size: 1em;\n    height: auto;\n    box-shadow: 0 0 10px #00ffff;\n  }\n  .pacific-web-radios .select2-container--default .select2-selection--single .select2-selection__rendered,\n  .pacific-web-radios .select2-container--default .select2-selection--multiple .select2-selection__rendered {\n    color: #ffffff;\n    line-height: normal;\n  }\n  .pacific-web-radios .select2-container--default .select2-selection--single .select2-selection__arrow {\n    height: 100%;\n  }\n  .pacific-web-radios .select2-container--default .select2-selection--multiple .select2-selection__choice {\n    background-color: #00ffff;\n    color: #000;\n    border: none;\n    padding: 5px 10px;\n    border-radius: 15px;\n  }\n  .pacific-web-radios .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {\n    color: #000;\n    margin-right: 5px;\n  }\n  .pacific-web-radios .select2-container--default .select2-search--inline .select2-search__field {\n    color: #ffffff;\n  }\n  .pacific-web-radios .select2-dropdown {\n    background-color: #2c2c2c;\n    border: 2px solid #00ffff;\n  }\n  .pacific-web-radios .select2-container--default .select2-results__option--highlighted[aria-selected] {\n    background-color: #00ffff;\n    color: #000;\n  }\n  .pacific-web-radios .select2-container--default .select2-results__option[aria-selected=true] {\n    background-color: #008080;\n  }\n  .pacific-web-radios .select2-container--default .select2-selection--single::placeholder,\n  .pacific-web-radios .select2-container--default .select2-selection--multiple::placeholder,\n  .pacific-web-radios .select2-container--default .select2-selection--multiple .select2-search__field::placeholder {\n    color: #ffffff;\n  }\n  \/* Pagination styles *\/\n  .pacific-web-radios .pagination {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-top: 20px;\n    margin-bottom: 50px;\n  }\n  .pacific-web-radios .round-button {\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n    background-color: transparent;\n    border: 2px solid #00ffff;\n    color: #00ffff;\n    font-size: 16px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    margin: 0 5px;\n    transition: all 0.3s ease;\n    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);\n  }\n  .pacific-web-radios .round-button:hover {\n    background-color: #00ffff;\n  }\n  .pacific-web-radios .round-button:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .pacific-web-radios #page-numbers {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n  .pacific-web-radios .page-number {\n    width: 30px;\n    height: 30px;\n    border-radius: 50%;\n    background-color: transparent;\n    border: 2px solid #00ffff;\n    color: #00ffff;\n    font-size: 14px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    margin: 0 3px;\n    transition: all 0.3s ease;\n  }\n  .pacific-web-radios .page-number.active {\n    background-color: #00ffff;\n    color: #000;\n  }\n  \/* Update the existing media queries for mobile *\/\n  @media (max-width: 600px) {\n    .pacific-web-radios .content-wrapper {\n      padding-left: 15px;\n      padding-right: 15px;\n      width: 100%;\n      box-sizing: border-box;\n    }\n    .pacific-web-radios .first-block-content,\n    .pacific-web-radios #results-container {\n      width: 100%;\n      padding-left: 0;\n      padding-right: 0;\n    }\n    .pacific-web-radios .station-card {\n      width: calc(100% - 30px);\n      margin-left: auto;\n      margin-right: auto;\n    }\n    .pacific-web-radios .search-and-filter-container {\n      flex-direction: column;\n      align-items: stretch;\n    }\n    .pacific-web-radios #search-container,\n    .pacific-web-radios #category-filter-container {\n      width: 100%;\n      margin: 5px 0;\n    }\n    .pacific-web-radios .select2-container {\n      width: 100% !important;\n    }\n  }\n  \/* Add a new media query for very small screens *\/\n  @media (max-width: 480px) {\n    .pacific-web-radios .content-wrapper {\n      padding-left: 10px;\n      padding-right: 10px;\n    }\n    .pacific-web-radios .first-block-content {\n      padding: 10px;\n    }\n    .pacific-web-radios .station-card {\n      width: calc(100% - 20px);\n      padding: 10px;\n    }\n  }\n  \/* Add this new CSS rule for the country flag *\/\n  .pacific-web-radios .country-flag {\n    width: 20px;\n    height: 15px;\n    object-fit: contain;\n    margin-right: 5px;\n    vertical-align: middle;\n  }\n  .pacific-web-radios .favorite-button img,\n  .pacific-web-radios .round-button img {\n    width: 20px;\n    height: 20px;\n    filter: invert(48%) sepia(94%) saturate(456%) hue-rotate(140deg) brightness(101%) contrast(101%);\n  }\n  .pacific-web-radios .favorite-button.active img {\n    filter: none;\n  }\n  .pacific-web-radios .round-button:disabled img {\n    opacity: 0.5;\n  }\n  .pacific-web-radios #chromecast-button {\n    background-color: #00ffff;\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    transition: background-color 0.3s ease, transform 0.1s ease;\n    width: 50px;\n    height: 50px;\n  }\n  .pacific-web-radios #chromecast-button:hover {\n    background-color: #00cccc;\n    transform: scale(1.1);\n  }\n  .pacific-web-radios #chromecast-button img {\n    width: 25px;\n    height: 25px;\n    filter: invert(1);\n  }\n  @keyframes zoomInOut {\n    0%, 100% { transform: scale(1); }\n    50% { transform: scale(1.1); }\n  }\n  .background-slideshow .slide {\n    animation: zoomInOut 20s ease-in-out infinite;\n  }\n  .background-slideshow .slide:nth-child(2) {\n    animation-delay: -6.66s;\n  }\n  .background-slideshow .slide:nth-child(3) {\n    animation-delay: -13.33s;\n  }\n<\/style>\n<script src=\"https:\/\/www.gstatic.com\/cv\/js\/sender\/v1\/cast_sender.js?loadCastFramework=1\"><\/script>\n<\/head>\n<body>\n  <div class=\"pacific-web-radios\">\n    <div class=\"first-block\">\n  <div class=\"background-slideshow\">\n    <div class=\"slide active\" style=\"background-image: url('https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/Pacific-Webtools-1920-x-1080-px-8.webp');\"><\/div>\n    <div class=\"slide\" style=\"background-image: url('https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/radio-en-ligne-france-2.webp');\"><\/div>\n    <div class=\"slide\" style=\"background-image: url('https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/radio-en-ligne-france-3.webp');\"><\/div>\n    <div class=\"slide\" style=\"background-image: url('https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/09\/radio-online.webp');\"><\/div>\n    <div class=\"slide\" style=\"background-image: url('https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/09\/radio-en-ligne.webp');\"><\/div>\n    <div class=\"slide\" style=\"background-image: url('https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/09\/online-radio.webp');\"><\/div>\n  <\/div>\n  <div class=\"content-wrapper\">\n    <div class=\"first-block-content\">\n      <h1>RadiostreamR | \u00c9coutez les stations de radio fran\u00e7aises en direct en ligne gratuitement<\/h1>\n      <p class=\"subtitle\">D\u00e9couvrez et \u00e9coutez en streaming des stations de radio fran\u00e7aises en direct. Que vous recherchiez les derniers tubes, les derni\u00e8res nouvelles ou des \u00e9missions de d\u00e9bats, nous vous proposons une grande vari\u00e9t\u00e9 de stations de radio fran\u00e7aises. Branchez-vous maintenant et explorez diff\u00e9rents genres, tous au m\u00eame endroit. Profitez d'un streaming illimit\u00e9 gratuitement !<\/p>\n      <div class=\"search-and-filter-container\">\n        <div id=\"search-container\" style=\"width: 100%; max-width: 600px;\">\n          <input type=\"text\" id=\"search-input\" placeholder=\"Rechercher des stations de radio...\" style=\"width: calc(100% - 50px);\">\n          <button id=\"search-button\">\n            <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.freepik.com\/512\/3932\/3932184.png\" alt=\"Ic\u00f4ne de recherche\">\n          <\/button>\n        <\/div>\n      <\/div>\n          <div style=\"display: flex; gap: 20px; margin-top: 20px; margin-bottom: 20px; flex-wrap: wrap; justify-content: center;\">\n            <a href=\"https:\/\/radiostreamr.com\/radio-france\/radio-populaire\" style=\"text-decoration: none; display: inline-block;\">\n              <button style=\"\n    background: linear-gradient(45deg, #00ffff, #00cccc);\n    border: none;\n    border-radius: 25px;\n    padding: 15px 30px;\n    color: #000;\n    font-size: 16px;\n    font-weight: bold;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);\n    transition: all 0.3s ease;\n    position: relative;\n    overflow: hidden;\n              \" onmouseover=\"this.querySelector('.music-notes').style.opacity='1'\" onmouseout=\"this.querySelector('.music-notes').style.opacity='0'\">\n                <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/6234\/6234750.png\" alt=\"Ic\u00f4ne populaire\" style=\"width: 24px; height: 24px; filter: brightness(0);\">\n                Les plus populaires\n                <div class=\"music-notes\" style=\"\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    opacity: 0;\n    transition: opacity 0.3s ease;\n                \">\n                  <style>\n                    @keyframes float-note-1 {\n                      0% { transform: translate(-50%, 100%) rotate(0deg); opacity: 0; }\n                      50% { opacity: 1; }\n                      100% { transform: translate(-50%, -100%) rotate(360deg); opacity: 0; }\n                    }\n                    @keyframes float-note-2 {\n                      0% { transform: translate(0%, 100%) rotate(0deg); opacity: 0; }\n                      50% { opacity: 1; }\n                      100% { transform: translate(0%, -100%) rotate(-360deg); opacity: 0; }\n                    }\n                    @keyframes float-note-3 {\n                      0% { transform: translate(50%, 100%) rotate(0deg); opacity: 0; }\n                      50% { opacity: 1; }\n                      100% { transform: translate(50%, -100%) rotate(360deg); opacity: 0; }\n                    }\n                    .music-note {\n                      position: absolute;\n                      bottom: 0;\n                      font-size: 20px;\n                      color: #000;\n                      animation-duration: 2s;\n                      animation-iteration-count: infinite;\n                    }\n                    .note-1 { left: 25%; animation-name: float-note-1; }\n                    .note-2 { left: 50%; animation-name: float-note-2; animation-delay: 0.3s; }\n                    .note-3 { left: 75%; animation-name: float-note-3; animation-delay: 0.6s; }\n                  <\/style>\n                  <div class=\"music-note note-1\">\u266a<\/div>\n                  <div class=\"music-note note-2\">\u266b<\/div>\n                  <div class=\"music-note note-3\">\u266a<\/div>\n                <\/div>\n              <\/button>\n            <\/a>\n\n            <a href=\"https:\/\/radiostreamr.com\/radio-france\/category\/podcast\/\" style=\"text-decoration: none; display: inline-block;\">\n              <button style=\"\n    background: linear-gradient(45deg, #00ffff, #00cccc);\n    border: none;\n    border-radius: 25px;\n    padding: 15px 30px;\n    color: #000;\n    font-size: 16px;\n    font-weight: bold;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);\n    transition: all 0.3s ease;\n    position: relative;\n    overflow: hidden;\n              \" onmouseover=\"this.querySelector('.music-notes').style.opacity='1'\" onmouseout=\"this.querySelector('.music-notes').style.opacity='0'\">\n                <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/665\/665152.png\" alt=\"Ic\u00f4ne podcast\" style=\"width: 24px; height: 24px; filter: brightness(0);\">\n                Ecoutez les podcasts\n                <div class=\"music-notes\" style=\"\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    opacity: 0;\n    transition: opacity 0.3s ease;\n                \">\n                  <div class=\"music-note note-1\">\u266a<\/div>\n                  <div class=\"music-note note-2\">\u266b<\/div>\n                  <div class=\"music-note note-3\">\u266a<\/div>\n                <\/div>\n              <\/button>\n            <\/a>\n          <\/div>\n        <\/div>\n    <div class=\"tabs\">\n      <button class=\"tab active\" data-tab=\"all\">\n        <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/1251\/1251681.png\" alt=\"Ic\u00f4ne de toutes les radios\">\n        Toutes les radios\n      <\/button>\n      <button class=\"tab\" data-tab=\"favorites\">\n        <img decoding=\"async\" src=\"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/logo-10.webp\" alt=\"Ic\u00f4ne des radios favorites\" style=\"filter: brightness(0) invert(1); transition: filter 0.3s ease;\">\n        Radios favorites\n      <\/button>\n      <button class=\"tab\" data-tab=\"history\">\n        <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/2961\/2961948.png\" alt=\"Ic\u00f4ne d'historique\">\n        Historique\n      <\/button>\n    <\/div>\n  <\/div>\n<\/div>\n    <div class=\"results-count\" id=\"results-count\"><\/div>\n    <div class=\"category-vignettes-container\">\n  <script>\n    function handleTagClick(event) {\n      if (event.target.classList.contains('tag-vignette')) {\n        const tag = event.target.textContent.trim();\n        closeModal();\n        addCategoryToSelect(tag);\n        performSearch(tag);\n      }\n    }\n\n    function addCategoryToSelect(category) {\n      var newOption = new Option(category, category, true, true);\n      $('#category-select').append(newOption).trigger('change');\n    }\n\n    document.querySelector('.category-vignettes-container').addEventListener('click', handleTagClick);\n\n    function performSearch(tag) {\n      showLoadingAnimation();\n      const query = tag || (searchInput ? searchInput.value.trim() : '');\n      const category = $('#category-select').val();\n      let url = 'https:\/\/de1.api.radio-browser.info\/json\/stations\/search?limit=1000&country=France';\n      \n      if (query || category) {\n        if (query) {\n          if (tag) {\n            url += `&tag=${encodeURIComponent(query)}`;\n          } else {\n            url += `&name=${encodeURIComponent(query)}`;\n          }\n        }\n        if (category && !tag) {\n          url += `&tag=${encodeURIComponent(category)}`;\n        }\n      }\n\n      axios.get(url)\n        .then(response => {\n          if (response && response.data) {\n            allStations = response.data\n              .filter(station => station.url_resolved && station.url_resolved.startsWith('https:\/\/'))\n              .sort((a, b) => a.name.localeCompare(b.name));\n            totalPages = Math.ceil(allStations.length \/ stationsPerPage);\n            currentPage = 1;\n            currentTab = 'all';\n            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));\n            document.querySelector('.tab[data-tab=\"all\"]').classList.add('active');\n            displayResults();\n            updatePagination();\n            fetchPopularRadios(); \n          } else {\n            throw new Error('Invalid response data');\n          }\n        })\n        .catch(error => {\n          console.error('Error fetching radio stations:', error);\n          if (resultsContainer) {\n            resultsContainer.innerHTML = '<p>Erreur lors de la r\u00e9cup\u00e9ration des stations de radio. Veuillez r\u00e9essayer.<\/p>';\n          }\n          if (paginationContainer) {\n            paginationContainer.style.display = 'none';\n          }\n        })\n        .finally(() => {\n          hideLoadingAnimation();\n        });\n    }\n  <\/script>\n<\/div>\n    <div class=\"content-wrapper\">\n      <div id=\"results-container\"><\/div>\n      <div class=\"pagination\" id=\"pagination-container\" style=\"display: none;\">\n        <button id=\"prev-button\" class=\"round-button\" disabled=\"\">\n          <img decoding=\"async\" src=\"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/logo-13.webp\" alt=\"Pr\u00e9c\u00e9dent\" width=\"20\" height=\"20\">\n        <\/button>\n        <div id=\"page-numbers\"><\/div>\n        <button id=\"next-button\" class=\"round-button\">\n          <img decoding=\"async\" src=\"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/logo-14.webp\" alt=\"Suivant\" width=\"20\" height=\"20\">\n        <\/button>\n      <\/div>\n    <\/div>\n\n    <!-- Modal Structure for Player -->\n    <div id=\"player-modal\" class=\"modal\">\n      <div class=\"modal-content\">\n  <span class=\"close\">\u00d7<\/span>\n  <div class=\"modal-header\">\n    <img decoding=\"async\" id=\"station-logo\" src=\"\" alt=\"Logo de la station\" class=\"station-logo\">\n    <h2 id=\"station-name\"><\/h2>\n    <p id=\"station-country\"><\/p>\n  <\/div>\n  <div id=\"station-info\">\n    <span id=\"station-tags\"><\/span>\n  <\/div>\n  <div id=\"audio-controls\">\n    <button id=\"play-pause\" class=\"control-button\">\n      <img decoding=\"async\" src=\"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/logo-16.webp\" alt=\"Ic\u00f4ne de lecture\">\n    <\/button>\n    <input type=\"range\" id=\"volume-slider\" min=\"0\" max=\"1\" step=\"0.1\" value=\"1\">\n    <button id=\"chromecast-button\" class=\"control-button\">\n      <img decoding=\"async\" src=\"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/logo-20.webp\" alt=\"Ic\u00f4ne Chromecast\" style=\"width: 16px; height: 16px;\">\n    <\/button>\n  <\/div>\n<\/div>\n    <\/div>\n\n    <div id=\"loading-animation\" class=\"loading-animation\" style=\"display: none;\">\n      <div class=\"spinner\"><\/div>\n      <p>Chargement des stations de radio...<\/p>\n    <\/div>\n    \n    <div class=\"popular-radios-section\" style=\" box-sizing: border-box;\">\n  <h2 style=\"text-align: center;\">Stations de radio les plus populaires en France<\/h2>\n  <h3 style=\"text-align: center; display: flex; justify-content: center; align-items: center;\">\n    10 stations les plus populaires en France\n  <\/h3>\n  <ul id=\"popular-radios-list-france\" style=\"list-style-type: none; padding: 0;\">\n    <li style=\"margin-bottom: 10px; padding: 10px; background-color: rgba(0, 255, 255, 0.1); border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease;\">\n      <img decoding=\"async\" src=\"path-to-logo.png\" alt=\"Radio Logo\" style=\"width: 65px; height: 65px; margin-right: 10px; border-radius: 50%; vertical-align: middle; box-shadow: 0 0 15px #00ffff;\">\n      <span style=\"text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff; font-size: 1.5em;\">Nom de la radio<\/span>\n      <p class=\"radio-description\" style=\"margin-top: 5px; color: #cccccc;\">Description de la radio<\/p>\n    <\/li>\n  <\/ul>\n  <style>\n    #popular-radios-list-france li img {\n      width: 65px !important;\n      height: 65px !important;\n    }\n    #popular-radios-list-france li span {\n      text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff;\n      font-weight: 500;\n      font-size: 1.5em;\n    }\n  <\/style>\n  <script>\n    function fetchPopularRadios() {\n      const popularRadiosFrance = [\n        { \n          name: \"France Inter\", \n          url: \"https:\/\/icecast.radiofrance.fr\/franceinter-midfi.mp3\",\n          description: \"Radio publique g\u00e9n\u00e9raliste offrant un m\u00e9lange d'information, de culture et de divertissement. Connue pour ses d\u00e9bats d'actualit\u00e9 et ses \u00e9missions culturelles de qualit\u00e9.\",\n          favicon: \"https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/10\/france-inter-logo.webp\"\n        },\n        { \n          name: \"RTL\", \n          url: \"https:\/\/icecast.rtl.fr\/rtl-1-44-128\",\n          description: \"Une des plus grandes radios priv\u00e9es de France, proposant des programmes vari\u00e9s allant de l'information \u00e0 l'humour, en passant par des \u00e9missions de soci\u00e9t\u00e9 et de divertissement.\",\n          favicon: \"https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/10\/logo-rtl-radio-en-ligne.webp\"\n        },\n        { \n          name: \"RMC\", \n          url: \"https:\/\/audio.bfmtv.com\/rmcradio_128.mp3\",\n          description: \"Radio d'information et de d\u00e9bat, sp\u00e9cialis\u00e9e dans l'actualit\u00e9, le sport et les \u00e9changes avec les auditeurs. R\u00e9put\u00e9e pour ses \u00e9missions interactives et ses analyses sportives.\",\n          favicon: \"https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/10\/rmc-logo.webp\"\n        },\n        { \n          name: \"Europe 1\", \n          url: \"https:\/\/ais-live.cloud-services.paris:8443\/europe1.mp3\",\n          description: \"Station g\u00e9n\u00e9raliste historique, m\u00ealant information, culture et divertissement. Reconnue pour la qualit\u00e9 de ses matinales et ses \u00e9missions de soci\u00e9t\u00e9 innovantes.\",\n          favicon: \"https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/10\/logo-europe1.webp\"\n        },\n        { \n          name: \"Fun Radio\", \n          url: \"https:\/\/icecast.funradio.fr\/fun-1-44-128\",\n          description: \"Radio musicale ax\u00e9e sur les hits \u00e9lectro et dance. Populaire aupr\u00e8s des jeunes, elle propose \u00e9galement des \u00e9missions interactives et des \u00e9v\u00e9nements festifs.\",\n          favicon: \"https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/10\/fun-radio-logo.webp\"\n        },\n        { \n          name: \"Nostalgie\", \n          url: \"https:\/\/scdn.nrjaudio.fm\/audio1\/fr\/30601\/mp3_128.mp3\",\n          description: \"Sp\u00e9cialis\u00e9e dans les tubes des ann\u00e9es 70, 80 et 90. Id\u00e9ale pour les amateurs de musique r\u00e9tro, elle offre une programmation vari\u00e9e et des \u00e9missions th\u00e9matiques.\",\n          favicon: \"https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/10\/nostalgie-logo-radio-en-ligne.webp\"\n        },\n        { \n          name: \"Ch\u00e9rie FM\", \n          url: \"https:\/\/scdn.nrjaudio.fm\/audio1\/fr\/30201\/mp3_128.mp3\",\n          description: \"Radio musicale orient\u00e9e pop et vari\u00e9t\u00e9s fran\u00e7aises et internationales. Connue pour sa programmation douce et romantique, parfaite pour une \u00e9coute relaxante.\",\n          favicon: \"https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/10\/cherie-fm-radio.webp\"\n        },\n        { \n          name: \"Sud Radio\", \n          url: \"https:\/\/start-sud.ice.infomaniak.ch\/start-sud-high.mp3\",\n          description: \"Radio g\u00e9n\u00e9raliste du Sud de la France, proposant des \u00e9missions d'information, de d\u00e9bat et de divertissement. Connue pour son ancrage r\u00e9gional et ses programmes de proximit\u00e9.\",\n          favicon: \"https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/10\/sud-radio-en-ligne.webp\"\n        },\n        { \n          name: \"RFM\", \n          url: \"https:\/\/stream.rfm.fr\/rfm.mp3\",\n          description: \"Radio musicale populaire diffusant principalement des hits des ann\u00e9es 80 \u00e0 aujourd'hui. Connue pour sa programmation vari\u00e9e et ses \u00e9missions divertissantes.\",\n          favicon: \"https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/10\/rfm-logo.webp\"\n        },\n        { \n          name: \"NRJ\", \n          url: \"https:\/\/scdn.nrjaudio.fm\/audio1\/fr\/30001\/mp3_128.mp3\",\n          description: \"L'une des radios musicales les plus populaires en France, NRJ diffuse principalement des hits contemporains et propose des \u00e9missions anim\u00e9es par des personnalit\u00e9s appr\u00e9ci\u00e9es du public. Connue pour ses \u00e9v\u00e9nements musicaux et ses playlists \u00e9nergiques.\",\n          favicon: \"https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/10\/nrj-logo.webp\"\n        },\n        { \n          name: \"RTL2\", \n          url: \"https:\/\/icecast.rtl.fr\/rtl2-1-44-128\",\n          description: \"Radio musicale ax\u00e9e sur le rock et la pop des ann\u00e9es 80 \u00e0 aujourd'hui. Connue pour sa programmation rock et ses \u00e9missions sp\u00e9cialis\u00e9es, RTL2 est appr\u00e9ci\u00e9e des amateurs de guitares et de grands classiques du rock.\",\n          favicon: \"https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/10\/logo-rtl2.webp\"\n        },\n        { \n          name: \"Lovely\", \n          url: \"https:\/\/lovely.ice.infomaniak.ch\/lovely-128.mp3\",\n          description: \"Radio musicale sp\u00e9cialis\u00e9e dans les chansons d'amour et les ballades romantiques. Id\u00e9ale pour une ambiance douce et romantique, elle propose une s\u00e9lection de titres fran\u00e7ais et internationaux.\",\n          favicon: \"https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/10\/lovely-radio-ogo.webp\"\n        },\n        { \n          name: \"OUI FM\", \n          url: \"https:\/\/ouifm.ice.infomaniak.ch\/ouifm-high.mp3\",\n          description: \"Radio rock par excellence, OUI FM diffuse principalement du rock, de l'indie et de la musique alternative. Connue pour sa programmation pointue et ses d\u00e9couvertes musicales, elle est appr\u00e9ci\u00e9e des amateurs de rock sous toutes ses formes.\",\n          favicon: \"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/oui-fm-top-week-logo.webp\"\n        },\n        { \n          name: \"Radio Nova\", \n          url: \"https:\/\/novazz.ice.infomaniak.ch\/novazz-128.mp3\",\n          description: \"Radio \u00e9clectique offrant une programmation vari\u00e9e allant du jazz \u00e0 l'\u00e9lectro, en passant par le hip-hop et les musiques du monde. Connue pour sa s\u00e9lection musicale pointue et ses d\u00e9couvertes d'artistes \u00e9mergents.\",\n          favicon: \"https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/10\/radio-nova-logo.webp\"\n        },\n        { \n          name: \"Alouette\", \n          url: \"https:\/\/alouette.ice.infomaniak.ch\/alouette-high.mp3\",\n          description: \"Radio r\u00e9gionale de l'Ouest de la France, Alouette propose une programmation vari\u00e9e ax\u00e9e sur les hits et la musique populaire. Tr\u00e8s appr\u00e9ci\u00e9e pour son ancrage local et ses \u00e9missions de proximit\u00e9.\",\n          favicon: \"https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/10\/alouette-radio-fm.webp\"\n        },\n        { \n          name: \"RTBF Classic 21 - Metal\", \n          url: \"https:\/\/radios.rtbf.be\/wr-c21-metal-128.mp3\",\n          description: \"Une station de radio belge d\u00e9di\u00e9e au metal et au hard rock. Offre une programmation intense et vari\u00e9e pour les amateurs de musique heavy.\",\n          favicon: \"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/Rtbf-classic-21.webp\"\n        },\n        { \n          name: \"Nostalgie Pop Rock 80\", \n          url: \"https:\/\/scdn.nrjaudio.fm\/adwz1\/fr\/56896\/mp3_128.mp3\",\n          description: \"Station d\u00e9di\u00e9e aux grands classiques pop et rock des ann\u00e9es 80. Offre une s\u00e9lection de titres embl\u00e9matiques de cette d\u00e9cennie dor\u00e9e de la musique.\",\n          favicon: \"https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/10\/nostalgie-logo-radio-en-ligne.webp\"\n        },\n        { \n          name: \"FIP Rock\", \n          url: \"https:\/\/icecast.radiofrance.fr\/fiprock-midfi.mp3\",\n          description: \"Station de radio sp\u00e9cialis\u00e9e dans le rock, proposant une programmation \u00e9clectique allant du rock classique aux sonorit\u00e9s plus contemporaines. FIP Rock offre une s\u00e9lection musicale soign\u00e9e et des d\u00e9couvertes rock de qualit\u00e9.\",\n          favicon: \"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/fip-rock-radio.webp\"\n        },\n        { \n          name: \"La Grosse Radio Rock\", \n          url: \"https:\/\/stream.lagrosseradio.com\/lagrosseradio-rock-128.mp3\",\n          description: \"La Grosse Radio Rock est une webradio fran\u00e7aise d\u00e9di\u00e9e au rock sous toutes ses formes. Elle propose une programmation vari\u00e9e allant du rock classique au m\u00e9tal, en passant par le punk et le rock alternatif. Id\u00e9ale pour les amateurs de guitares satur\u00e9es et de riffs puissants.\",\n          favicon: \"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/la-grosse-radio.webp\"\n        },\n        { \n          name: \"Voltage\", \n          url: \"https:\/\/start-voltage.ice.infomaniak.ch\/start-voltage-high.mp3\",\n          description: \"Voltage est une station de radio fran\u00e7aise qui propose le meilleur des hits pop-rock et les grands classiques. Avec une programmation \u00e9nergique et des animateurs dynamiques, Voltage offre une exp\u00e9rience musicale id\u00e9ale pour accompagner votre quotidien.\",\n          favicon: \"https:\/\/bocir-prod-bucket.s3.eu-west-1.amazonaws.com\/radios\/voltage\/images\/favicon.ico\"\n        },\n        { \n          name: \"Skyrock\",\n          url: \"https:\/\/skyrock.fm\/stream.php\/tunein16_128mp3.mp3\",\n          description: \"Skyrock est une radio fran\u00e7aise embl\u00e9matique, pionni\u00e8re et leader dans la diffusion du rap, du R&B et des cultures urbaines. Cr\u00e9\u00e9e en 1986, elle est devenue une r\u00e9f\u00e9rence incontournable pour la sc\u00e8ne hip-hop fran\u00e7aise et internationale. Skyrock est \u00e9galement connue pour ses \u00e9missions interactives comme le c\u00e9l\u00e8bre 'Radio Libre' et ses 'Morning de Difool'.\",\n          favicon: \"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/skyrock-logo-radio.webp\"\n        },\n        { \n          name: \"M Radio - Nouveaut\u00e9s\",\n          url: \"https:\/\/mfmwr-012.ice.infomaniak.ch\/mfmwr-012.mp3\",\n          description: \"M Radio - Nouveaut\u00e9s est une station qui se concentre sur les derni\u00e8res sorties musicales et les hits actuels. Elle propose une programmation dynamique et contemporaine, mettant en avant les nouveaux talents et les tubes du moment.\",\n          favicon: \"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/m-radio-logo.webp\"\n        },\n        { \n          name: \"100% Radio Hit\",\n          url: \"https:\/\/100radio-hit.ice.infomaniak.ch\/100radio-hit-64.aac\",\n          description: \"100% Radio Hit est une station d\u00e9di\u00e9e aux hits du moment et aux tubes des derni\u00e8res ann\u00e9es. Elle offre une programmation dynamique et festive, id\u00e9ale pour rester \u00e0 la pointe des derni\u00e8res tendances musicales.\",\n          favicon: \"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/100hit-radio-logo.webp\"\n        },\n        { \n          name: \"Europe 2 hits\",\n          url: \"https:\/\/europe2.lmn.fm\/europe2.mp3\",\n          description: \"Europe 2 hits est une radio musicale qui diffuse les derniers hits et nouveaut\u00e9s de la sc\u00e8ne pop-rock internationale. Sa programmation est ax\u00e9e sur les tubes actuels et les artistes \u00e9mergents, avec un m\u00e9lange \u00e9quilibr\u00e9 entre pop et rock contemporain.\",\n          favicon: \"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/europe-2hits-logo.webp\"\n        },\n        { \n          name: \"F. HITS\",\n          url: \"https:\/\/stream.f-hits.com\/f-hits\",\n          description: \"F. HITS est une radio d\u00e9di\u00e9e aux hits actuels et aux derni\u00e8res tendances musicales. Elle propose une programmation \u00e9nergique et moderne, mettant en avant les meilleurs tubes du moment et les artistes qui font l'actualit\u00e9 musicale.\",\n          favicon: \"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/f-hits-logo.webp\"\n        },\n        { \n          name: \"Hits 1\",\n          url: \"https:\/\/hits1radio.ice.infomaniak.ch\/hits1radio-128.mp3\",\n          description: \"Hits 1 est une radio dynamique sp\u00e9cialis\u00e9e dans les hits contemporains et les derni\u00e8res nouveaut\u00e9s musicales. Elle offre une programmation \u00e9nergique compos\u00e9e des meilleurs tubes du moment et des artistes les plus en vue de la sc\u00e8ne musicale actuelle.\",\n          favicon: \"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/hits-1-logo.webp\"\n        },\n        { \n          name: \"Latina Fiesta\",\n          url: \"https:\/\/latinafiesta.ice.infomaniak.ch\/latinafiesta-high.mp3\",\n          description: \"Latina Fiesta est une radio sp\u00e9cialis\u00e9e dans la musique latine et les rythmes festifs. Elle propose une programmation dynamique et ensoleill\u00e9e avec de la salsa, de la bachata, du reggaeton et tous les meilleurs sons latinos pour faire la f\u00eate!\",\n          favicon: \"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/latina-radio-logo.webp\"\n        },\n        { \n          name: \"KISS Pop Rock\",\n          url: \"https:\/\/kisspoprock.ice.infomaniak.ch\/kisspoprock-128.mp3\",\n          description: \"KISS Pop Rock est une radio qui m\u00e9lange le meilleur de la pop et du rock. Elle propose une programmation dynamique qui alterne entre les grands classiques pop-rock et les nouveaut\u00e9s du genre, offrant un mix parfait pour les amateurs des deux styles.\",\n          favicon: \"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/kiss-pop-rock-logo.webp\"\n        },\n        { \n          name: \"OUI FM TOP OF THE WEEK\",\n          url: \"https:\/\/ouifm-high.ice.infomaniak.ch\/ouifm-high.mp3\",\n          description: \"OUI FM TOP OF THE WEEK est une radio qui pr\u00e9sente une s\u00e9lection hebdomadaire des meilleures nouveaut\u00e9s rock et des titres les plus populaires de la semaine. Elle offre une programmation fra\u00eeche et dynamique, id\u00e9ale pour d\u00e9couvrir les derni\u00e8res tendances de la sc\u00e8ne rock.\",\n          favicon: \"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/oui-fm-top-week-logo.webp\"\n        },\n        { \n          name: \"Radio STAR\",\n          url: \"https:\/\/radiostar.ice.infomaniak.ch\/radiostar-128.mp3\",\n          description: \"Radio STAR est une station de radio r\u00e9gionale dynamique offrant un mix de hits actuels et de grands classiques. Elle propose une programmation vari\u00e9e et des animations locales qui en font une radio de proximit\u00e9 appr\u00e9ci\u00e9e de ses auditeurs.\",\n          favicon: \"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/radio-star-logo.webp\"\n        },\n        { \n          name: \"France Info\",\n          url: \"https:\/\/icecast.radiofrance.fr\/franceinfo-midfi.mp3\",\n          description: \"France Info est la radio d'information en continu du groupe Radio France. Elle propose une couverture compl\u00e8te de l'actualit\u00e9 24h\/24 avec des flashs d'information toutes les 15 minutes, des reportages, des analyses et des \u00e9missions th\u00e9matiques.\",\n          favicon: \"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/france-info-logo.webp\"\n        },\n        { \n          name: \"France Bleu\",\n          url: \"https:\/\/icecast.radiofrance.fr\/fb107-midfi.mp3\",\n          description: \"France Bleu est le r\u00e9seau des radios locales publiques fran\u00e7aises. Elle propose une programmation vari\u00e9e avec des informations locales, de la musique fran\u00e7aise, des \u00e9missions de service et de proximit\u00e9. Son format chaleureux et convivial en fait une radio appr\u00e9ci\u00e9e pour sa proximit\u00e9 avec les auditeurs.\",\n          favicon: \"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/france-bleu-logo.webp\"\n        },\n        { \n          name: \"France Culture\",\n          url: \"https:\/\/icecast.radiofrance.fr\/franceculture-midfi.mp3\",\n          description: \"France Culture est une radio publique fran\u00e7aise d\u00e9di\u00e9e \u00e0 la culture, aux arts, aux sciences et aux d\u00e9bats d'id\u00e9es. Elle propose des \u00e9missions de grande qualit\u00e9, des documentaires, des fictions radiophoniques et des d\u00e9bats intellectuels de haut niveau.\",\n          favicon: \"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/france-culture-logo.webp\"\n        },\n        { \n          name: \"Radio Classique\",\n          url: \"https:\/\/radioclassique.ice.infomaniak.ch\/radioclassique-high.mp3\",\n          description: \"Radio Classique est une station de radio priv\u00e9e fran\u00e7aise sp\u00e9cialis\u00e9e dans la musique classique. Elle propose une programmation de qualit\u00e9 m\u00ealant les plus grands compositeurs classiques et l'actualit\u00e9 \u00e9conomique et culturelle.\",\n          favicon: \"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/radio-classique-logo.webp\"\n        },\n        { \n          name: \"BFM Business\",\n          url: \"https:\/\/audio.bfmtv.com\/bfmbusiness_128.mp3\",\n          description: \"BFM Business est la premi\u00e8re radio fran\u00e7aise d'information \u00e9conomique et financi\u00e8re. Elle propose une couverture en direct des march\u00e9s financiers, des analyses expertes, des interviews de dirigeants d'entreprises et des \u00e9missions d\u00e9di\u00e9es \u00e0 l'entrepreneuriat et \u00e0 l'\u00e9conomie.\",\n          favicon: \"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/bfm-business-logo.webp\"\n        },\n        { \n          name: \"RCF\",\n          url: \"https:\/\/rcf.streamakaci.com\/rcf.mp3\",\n          description: \"RCF (Radios Chr\u00e9tiennes Francophones) est un r\u00e9seau de radios chr\u00e9tiennes g\u00e9n\u00e9ralistes. Elle propose des \u00e9missions spirituelles, culturelles et soci\u00e9tales, avec une approche humaniste et ouverte sur le monde. Sa programmation inclut des temps de pri\u00e8re, des d\u00e9bats, des \u00e9missions culturelles et d'information.\",\n          favicon: \"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/RCF-radio-logo.webp\"\n        },\n        { \n          name: \"Radio Notre Dame\",\n          url: \"https:\/\/radionotredame.ice.infomaniak.ch\/radionotredame-128.mp3\",\n          description: \"Radio Notre Dame est une radio chr\u00e9tienne qui diffuse des programmes religieux, culturels et d'information. Elle propose des \u00e9missions de spiritualit\u00e9, des c\u00e9l\u00e9brations liturgiques, des d\u00e9bats de soci\u00e9t\u00e9 et des \u00e9missions culturelles dans une perspective chr\u00e9tienne.\",\n          favicon: \"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/logo-notre-dame.webp\"\n        },\n        { \n          name: \"FPP Fr\u00e9quence Paris Plurielle rfpp\",\n          url: \"https:\/\/emission.radio-fpp.org:8443\/radio-fpp.mp3\",\n          description: \"Fr\u00e9quence Paris Plurielle est une radio associative ind\u00e9pendante cr\u00e9\u00e9e en 1981. Elle propose une programmation alternative et engag\u00e9e, donnant la parole aux associations, aux mouvements sociaux et culturels. La radio se veut un espace d'expression libre et de diversit\u00e9 culturelle.\",\n          favicon: \"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/fpp-logo-radio.webp\"\n        },\n        { \n          name: \"Radio 8 Ardennes\",\n          url: \"https:\/\/str0.creacast.com\/radio8\",\n          description: \"Radio 8 est une radio locale ind\u00e9pendante des Ardennes, bas\u00e9e \u00e0 Charleville-M\u00e9zi\u00e8res. Elle propose une programmation vari\u00e9e m\u00ealant information locale, musique et divertissement. La station est tr\u00e8s appr\u00e9ci\u00e9e pour sa couverture des \u00e9v\u00e9nements locaux et son ancrage dans la vie ardennaise.\",\n          favicon: \"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/radio8-logo.webp\"\n        },\n        { \n          name: \"Radio Primitive\",\n          url: \"https:\/\/s3.radio.co\/s15e8d6fc9\/listen\",\n          description: \"Radio Primitive est une radio associative bas\u00e9e \u00e0 Reims. Elle propose une programmation \u00e9clectique et alternative, mettant en avant la sc\u00e8ne musicale locale et les artistes \u00e9mergents. La station est reconnue pour son engagement culturel et son soutien \u00e0 la cr\u00e9ation artistique ind\u00e9pendante.\",\n          favicon: \"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/radio-primitive-logo.webp\"\n        }\n      ];\n\n      const popularRadiosListFrance = document.getElementById('popular-radios-list-france');\n      popularRadiosListFrance.innerHTML = '';\n\n      popularRadiosFrance.forEach((station, index) => {\n        const li = document.createElement('li');\n        li.innerHTML = `\n          <img decoding=\"async\" src=\"${station.favicon}\" alt=\"${station.name} logo\" style=\"width: 65px; height: 65px; margin-right: 10px; border-radius: 50%; vertical-align: middle;\">\n          <span style=\"font-size: 1.5em;\">${station.name}<\/span>\n          <p class=\"radio-description\">${station.description}<\/p>\n        `;\n\n        li.addEventListener('click', () => {\n          let stationToPlay = {\n            url_resolved: station.url,\n            name: station.name,\n            favicon: station.favicon || null,\n            description: station.description,\n          };\n\n          const detailedStation = allStations.find(s => s.name.toLowerCase() === station.name.toLowerCase());\n          \n          if (detailedStation) {\n            stationToPlay.favicon = stationToPlay.favicon || detailedStation.favicon;\n            stationToPlay.tags = detailedStation.tags || '';\n          }\n\n          playStation(stationToPlay);\n        });\n\n        popularRadiosListFrance.appendChild(li);\n\n        if (index === 9) {\n          const newTitle = document.createElement('h3');\n          newTitle.textContent = \"10 meilleures radios Pop \/ Rock en France\";\n          newTitle.style.textAlign = \"center\";\n          newTitle.style.marginTop = \"30px\";\n          newTitle.style.marginBottom = \"20px\";\n          popularRadiosListFrance.appendChild(newTitle);\n        }\n\n        if (index === 19) {\n          const hitsTitle = document.createElement('h3');\n          hitsTitle.textContent = \"10 meilleures radios pour \u00e9couter les hits en France\";\n          hitsTitle.style.textAlign = \"center\";\n          hitsTitle.style.marginTop = \"30px\";\n          hitsTitle.style.marginBottom = \"20px\";\n          popularRadiosListFrance.appendChild(hitsTitle);\n        }\n\n        if (index === 29) {\n          const newsTitle = document.createElement('h3');\n          newsTitle.textContent = \"10 meilleurs radios d'informations en France\";\n          newsTitle.style.textAlign = \"center\";\n          newsTitle.style.marginTop = \"30px\";\n          newsTitle.style.marginBottom = \"20px\";\n          popularRadiosListFrance.appendChild(newsTitle);\n        }\n      });\n    }\n  <\/script>\n<\/div>\n  <\/div>\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/axios\/0.21.1\/axios.min.js\"><\/script>\n<script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/select2@4.1.0-rc.0\/dist\/js\/select2.min.js\"><\/script>\n<script>\nlet favorites = JSON.parse(localStorage.getItem('favorites')) || [];\nlet history = JSON.parse(localStorage.getItem('history')) || [];\nlet currentTab = 'all';\n\nconst searchInput = document.getElementById('search-input');\nconst searchButton = document.getElementById('search-button');\nconst resultsContainer = document.getElementById('results-container');\nconst playerModal = document.getElementById('player-modal');\nconst paginationContainer = document.getElementById('pagination-container');\nconst prevButton = document.getElementById('prev-button');\nconst nextButton = document.getElementById('next-button');\nconst audioElement = new Audio();\nlet currentStation = null;\nlet currentPage = 1;\nlet stationsPerPage = 20;\nlet totalPages = 0;\nconst pageNumbersContainer = document.getElementById('page-numbers');\nconst playPauseButton = document.getElementById('play-pause');\nconst volumeSlider = document.getElementById('volume-slider');\nconst muteUnmuteButton = document.getElementById('mute-unmute');\nconst closeModalButton = document.querySelector('.close');\nconst chromecastButton = document.getElementById('chromecast-button');\n\nfunction showLoadingAnimation() {\n  document.getElementById('loading-animation').style.display = 'flex';\n}\n\nfunction hideLoadingAnimation() {\n  document.getElementById('loading-animation').style.display = 'none';\n}\n\nfunction playStation(station) {\n  if (!station) return;\n\n  if (!station.url_resolved) {\n    station.url_resolved = `https:\/\/example.com\/stream\/${station.name.replace(\/\\s+\/g, '-').toLowerCase()}`;\n  }\n\n  audioElement.src = station.url_resolved;\n  audioElement.play().catch(error => console.error('Error playing audio:', error));\n  currentStation = station;\n  updateModalUI();\n  openModal();\n  addToHistory(station);\n}\n\nfunction handleTagClick(event) {\n  if (event.target.classList.contains('tag-vignette')) {\n    const tag = event.target.textContent.trim();\n    closeModal();\n    addCategoryToSelect(tag);\n    performSearch(tag);\n  }\n}\n\nfunction addCategoryToSelect(category) {\n  if (!$('#category-select').find(\"option[value='\" + category + \"']\").length) {\n    var newOption = new Option(category, category, true, true);\n    $('#category-select').append(newOption).trigger('change');\n  }\n}\n\nfunction extractCategories(stations) {\n  const categories = {};\n  stations.forEach(station => {\n    if (station.tags) {\n      station.tags.split(',').forEach(tag => {\n        const trimmedTag = tag.trim();\n        if (trimmedTag.length <= 20) {\n          categories[trimmedTag] = (categories[trimmedTag] || 0) + 1;\n        }\n      });\n    }\n  });\n  return Object.entries(categories)\n    .sort((a, b) => b[1] - a[1])\n    .slice(0, 10)\n    .map(([category]) => category);\n}\n\nfunction renderCategoryVignettes(categories) {\n  return `\n    <div class=\"category-vignettes\">\n      ${categories.map(category => `\n        <span class=\"tag-vignette\" onclick=\"performSearch('${category}')\">${category}<\/span>\n      `).join('')}\n    <\/div>\n  `;\n}\n\nfunction updateModalUI() {\n  if (!currentStation) return;\n\n  const stationLogo = document.getElementById('station-logo');\n  const stationName = document.getElementById('station-name');\n  const stationCountry = document.getElementById('station-country');\n  const stationDescription = document.getElementById('station-description');\n  const stationTags = document.getElementById('station-tags');\n  const stationBitrate = document.getElementById('station-bitrate');\n\n  if (stationLogo) stationLogo.src = currentStation.favicon || 'https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/logo-15.webp';\n  if (stationName) stationName.textContent = currentStation.name || 'Station inconnue';\n  if (stationCountry) stationCountry.textContent = 'France';\n  if (stationDescription) stationDescription.textContent = currentStation.homepage || 'Aucune description disponible';\n  \n  if (stationTags) {\n    const tags = currentStation.tags ? currentStation.tags.split(',') : [];\n    stationTags.innerHTML = tags.map(tag => `<span class=\"tag-vignette\">${tag.trim()}<\/span>`).join('');\n    stationTags.addEventListener('click', handleTagClick);\n  }\n  \n  if (stationBitrate) stationBitrate.textContent = `D\u00e9bit binaire : ${currentStation.bitrate || 'Inconnu'} kbps`;\n}\n\nfunction performSearch(tag) {\n  showLoadingAnimation();\n  const query = tag || (searchInput ? searchInput.value.trim() : '');\n  const category = $('#category-select').val();\n  let url = 'https:\/\/de1.api.radio-browser.info\/json\/stations\/search?limit=1000&country=France';\n  \n  if (query || category) {\n    if (query) {\n      if (tag) {\n        url += `&tag=${encodeURIComponent(query)}`;\n      } else {\n        url += `&name=${encodeURIComponent(query)}`;\n      }\n    }\n    if (category && !tag) {\n      url += `&tag=${encodeURIComponent(category)}`;\n    }\n  }\n\n  axios.get(url)\n    .then(response => {\n      if (response && response.data) {\n        allStations = response.data\n          .filter(station => station.url_resolved && station.url_resolved.startsWith('https:\/\/'))\n          .sort((a, b) => a.name.localeCompare(b.name));\n        totalPages = Math.ceil(allStations.length \/ stationsPerPage);\n        currentPage = 1;\n        currentTab = 'all';\n        document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));\n        document.querySelector('.tab[data-tab=\"all\"]').classList.add('active');\n        displayResults();\n        updatePagination();\n        fetchPopularRadios(); \n      } else {\n        throw new Error('Invalid response data');\n      }\n    })\n    .catch(error => {\n      console.error('Error fetching radio stations:', error);\n      if (resultsContainer) {\n        resultsContainer.innerHTML = '<p>Erreur lors de la r\u00e9cup\u00e9ration des stations de radio. Veuillez r\u00e9essayer.<\/p>';\n      }\n      if (paginationContainer) {\n        paginationContainer.style.display = 'none';\n      }\n    })\n    .finally(() => {\n      hideLoadingAnimation();\n    });\n}\n\nfunction displayResults() {\n  if (!resultsContainer) return;\n\n  resultsContainer.innerHTML = '';\n  const categoryVignettesContainer = document.querySelector('.category-vignettes-container');\n  categoryVignettesContainer.innerHTML = '';\n  let stationsToShow = [];\n\n  if (currentTab === 'all') {\n    const startIndex = (currentPage - 1) * stationsPerPage;\n    const endIndex = startIndex + stationsPerPage;\n    stationsToShow = allStations.slice(startIndex, endIndex);\n  } else if (currentTab === 'favorites') {\n    const startIndex = (currentPage - 1) * stationsPerPage;\n    const endIndex = startIndex + stationsPerPage;\n    stationsToShow = favorites.slice(startIndex, endIndex);\n  } else if (currentTab === 'history') {\n    const startIndex = (currentPage - 1) * stationsPerPage;\n    const endIndex = startIndex + stationsPerPage;\n    stationsToShow = history.slice(startIndex, endIndex);\n  }\n\n  const totalStations = currentTab === 'all' ? allStations.length : \n                        currentTab === 'favorites' ? favorites.length : \n                        currentTab === 'history' ? history.length : 0;\n  const resultsCountElement = document.getElementById('results-count');\n  if (resultsCountElement) {\n    resultsCountElement.textContent = `${totalStations} station${totalStations !== 1 ? 's' : ''} de radio trouv\u00e9e${totalStations !== 1 ? 's' : ''}`;\n  }\n\n  const categories = extractCategories(stationsToShow);\n  const categoryVignettes = renderCategoryVignettes(categories);\n  categoryVignettesContainer.innerHTML = categoryVignettes;\n\n  if (stationsToShow.length === 0) {\n    resultsContainer.innerHTML += '<p>Aucune station trouv\u00e9e. Essayez une autre recherche ou un autre onglet.<\/p>';\n    if (paginationContainer) {\n      paginationContainer.style.display = 'none';\n    }\n    return;\n  }\n  \n  stationsToShow.forEach(station => {\n    if (!station) return;\n\n    const stationCard = document.createElement('div');\n    stationCard.className = 'station-card';\n    stationCard.innerHTML = `\n      <div class=\"station-info\">\n        <img decoding=\"async\" class=\"station-logo\" src=\"${station.favicon || 'https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/logo-15.webp'}\" alt=\"${station.name} logo\">\n      <\/div>\n      <div class=\"station-details\">\n        <h2>${station.name || 'Station inconnue'}<\/h2>\n        <p>\n          <img decoding=\"async\" class=\"country-flag\" src=\"https:\/\/flagcdn.com\/w20\/${(station.countrycode || '').toLowerCase()}.png\" alt=\"${station.country || 'Inconnu'} flag\">\n          ${station.country || 'France'}\n        <\/p>\n      <\/div>\n      <button class=\"play-button\" data-url=\"${station.url_resolved || ''}\">\n        <img decoding=\"async\" src=\"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/logo-16.webp\" alt=\"Ic\u00f4ne de lecture\">\n      <\/button>\n      <button class=\"favorite-button ${favorites.some(fav => fav.stationuuid === station.stationuuid) ? 'active' : ''}\">\n      <\/button>\n    `;\n    resultsContainer.appendChild(stationCard);\n\n    const playButton = stationCard.querySelector('.play-button');\n    if (playButton) {\n      playButton.addEventListener('click', () => playStation(station));\n    }\n\n    const favoriteButton = stationCard.querySelector('.favorite-button');\n    if (favoriteButton) {\n      favoriteButton.addEventListener('click', () => toggleFavorite(station));\n    }\n  });\n\n  updatePagination();\n}\n\nfunction toggleFavorite(station) {\n  const index = favorites.findIndex(fav => fav.stationuuid === station.stationuuid);\n  if (index === -1) {\n    favorites.push(station);\n  } else {\n    favorites.splice(index, 1);\n  }\n  localStorage.setItem('favorites', JSON.stringify(favorites));\n  displayResults();\n}\n\nfunction addToHistory(station) {\n  const index = history.findIndex(item => item.stationuuid === station.stationuuid);\n  if (index !== -1) {\n    history.splice(index, 1);\n  }\n  history.unshift(station);\n  if (history.length > 20) {\n    history.pop();\n  }\n  localStorage.setItem('history', JSON.stringify(history));\n}\n\nfunction updatePagination() {\n  if (!pageNumbersContainer) return;\n\n  const totalStations = currentTab === 'all' ? allStations.length : \n                        currentTab === 'favorites' ? favorites.length : \n                        currentTab === 'history' ? history.length : 0;\n\n  totalPages = Math.ceil(totalStations \/ stationsPerPage);\n\n  if (totalStations <= stationsPerPage) {\n    if (paginationContainer) paginationContainer.style.display = 'none';\n    return;\n  }\n\n  const maxVisiblePages = 5;\n  let startPage = Math.max(currentPage - Math.floor(maxVisiblePages \/ 2), 1);\n  let endPage = Math.min(startPage + maxVisiblePages - 1, totalPages);\n\n  if (endPage - startPage + 1 < maxVisiblePages) {\n    startPage = Math.max(endPage - maxVisiblePages + 1, 1);\n  }\n\n  pageNumbersContainer.innerHTML = '';\n\n  for (let i = startPage; i <= endPage; i++) {\n    const pageButton = document.createElement('button');\n    pageButton.classList.add('page-number');\n    pageButton.textContent = i;\n    if (i === currentPage) {\n      pageButton.classList.add('active');\n    }\n    pageButton.addEventListener('click', () => {\n      currentPage = i;\n      displayResults();\n      updatePagination();\n    });\n    pageNumbersContainer.appendChild(pageButton);\n  }\n\n  if (prevButton) prevButton.disabled = currentPage === 1;\n  if (nextButton) nextButton.disabled = currentPage === totalPages;\n\n  if (paginationContainer) paginationContainer.style.display = 'flex';\n}\n\nfunction fetchAllStations() {\n  showLoadingAnimation();\n  let url = 'https:\/\/de1.api.radio-browser.info\/json\/stations\/search?limit=1000&country=France';\n\n  axios.get(url)\n    .then(response => {\n      if (response && response.data) {\n        allStations = response.data\n          .filter(station => station.url_resolved && station.url_resolved.startsWith('https:\/\/'))\n          .sort((a, b) => a.name.localeCompare(b.name));\n        totalPages = Math.ceil(allStations.length \/ stationsPerPage);\n        currentPage = 1;\n        displayResults();\n        updatePagination();\n        fetchPopularRadios(); \n      } else {\n        throw new Error('Invalid response data');\n      }\n    })\n    .catch(error => {\n      console.error('Error fetching radio stations:', error);\n      if (resultsContainer) resultsContainer.innerHTML = '<p>Erreur lors de la r\u00e9cup\u00e9ration des stations de radio. Veuillez r\u00e9essayer.<\/p>';\n    })\n    .finally(() => {\n      hideLoadingAnimation();\n    });\n}\n\n$(document).ready(function() {\n  $('#category-select').select2({\n    placeholder: 'S\u00e9lectionner une cat\u00e9gorie',\n    allowClear: true,\n    tags: true,\n    ajax: {\n      url: 'https:\/\/de1.api.radio-browser.info\/json\/tags?country=France',\n      dataType: 'json',\n      delay: 250,\n      data: function (params) {\n        return {\n          search: params.term\n        };\n      },\n      processResults: function (data, params) {\n        const searchTerm = params.term ? params.term.toLowerCase() : '';\n        return {\n          results: data\n            .filter(tag => tag.name.toLowerCase().includes(searchTerm))\n            .map(tag => ({\n              id: tag.name,\n              text: tag.name\n            }))\n        };\n      },\n      cache: true\n    }\n  });\n\n  $('#category-select').on('select2:select select2:unselect', function(e) {\n    performSearch();\n  });\n  \n  document.querySelectorAll('.tab').forEach(tab => {\n    tab.addEventListener('click', () => {\n      document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));\n      tab.classList.add('active');\n      currentTab = tab.dataset.tab;\n      currentPage = 1;\n      displayResults();\n    });\n  });\n\n  if (searchButton) {\n    searchButton.addEventListener('click', () => performSearch());\n  }\n\n  if (searchInput) {\n    searchInput.addEventListener('keypress', function(event) {\n      if (event.key === 'Enter') {\n        event.preventDefault();\n        performSearch();\n      }\n    });\n  }\n\n  if (prevButton) {\n    prevButton.addEventListener('click', () => {\n      if (currentPage > 1) {\n        currentPage--;\n        displayResults();\n        updatePagination();\n      }\n    });\n  }\n\n  if (nextButton) {\n    nextButton.addEventListener('click', () => {\n      if (currentPage < totalPages) {\n        currentPage++;\n        displayResults();\n        updatePagination();\n      }\n    });\n  }\n\n  fetchAllStations();  \n});\n\nlet allStations = [];\n\nfunction openModal() {\n  if (playerModal) playerModal.style.display = 'block';\n  if (window.chrome && window.chrome.cast && window.chrome.cast.isAvailable) {\n    initializeCastApi();\n  }\n}\n\nfunction closeModal() {\n  if (playerModal) playerModal.style.display = 'none';\n  audioElement.pause();\n}\n\nfunction startChromecast() {\n  if (!currentStation) return;\n\n  const castSession = cast.framework.CastContext.getInstance().getCurrentSession();\n  if (castSession) {\n    const mediaInfo = new chrome.cast.media.MediaInfo(currentStation.url_resolved, 'audio\/mp3');\n    mediaInfo.metadata = new chrome.cast.media.GenericMediaMetadata();\n    mediaInfo.metadata.title = currentStation.name;\n    mediaInfo.metadata.images = [{ url: currentStation.favicon || 'https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/logo-15.webp' }];\n\n    const request = new chrome.cast.media.LoadRequest(mediaInfo);\n    castSession.loadMedia(request).then(\n      function() { console.log('Load succeed'); },\n      function(errorCode) { console.log('Error code: ' + errorCode); }\n    );\n  } else {\n    cast.framework.CastContext.getInstance().requestSession();\n  }\n}\n\nif (chromecastButton) {\n  chromecastButton.addEventListener('click', startChromecast);\n}\n\n\/\/ Load the Cast framework\nwindow.__onGCastApiAvailable = function(isAvailable) {\n  if (isAvailable) {\n    initializeCastApi();\n  }\n};\n\n\/\/ Initialize the Cast API\nfunction initializeCastApi() {\n  cast.framework.CastContext.getInstance().setOptions({\n    receiverApplicationId: chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID,\n    autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED\n  });\n}\n\n\/\/ Player controls\nif (playPauseButton) playPauseButton.addEventListener('click', togglePlayPause);\nif (volumeSlider) volumeSlider.addEventListener('input', adjustVolume);\nif (muteUnmuteButton) muteUnmuteButton.addEventListener('click', toggleMute);\nif (closeModalButton) closeModalButton.addEventListener('click', closeModal);\nwindow.addEventListener('click', (event) => {\n  if (event.target == playerModal) {\n    closeModal();\n  }\n});\n\nfunction togglePlayPause() {\n  if (!playPauseButton) return;\n\n  if (audioElement.paused) {\n    audioElement.play().catch(error => console.error('Error playing audio:', error));\n    playPauseButton.querySelector('img').src = \"https:\/\/cdn-icons-png.freepik.com\/512\/4181\/4181135.png\";\n    playPauseButton.querySelector('img').alt = \"Ic\u00f4ne de pause\";\n  } else {\n    audioElement.pause();\n    playPauseButton.querySelector('img').src = \"https:\/\/cdn-icons-png.flaticon.com\/512\/2468\/2468825.png\";\n    playPauseButton.querySelector('img').alt = \"Ic\u00f4ne de lecture\";\n  }\n}\n\nfunction adjustVolume() {\n  if (volumeSlider) audioElement.volume = volumeSlider.value;\n}\n\n\/\/ Initialize volume\nadjustVolume();\n\n\/\/ Add background cycling function\nfunction cycleBackgroundImages() {\n  const slides = document.querySelectorAll('.background-slideshow .slide');\n  let currentSlide = 0;\n\n  setInterval(() => {\n    slides[currentSlide].classList.remove('active');\n    currentSlide = (currentSlide + 1) % slides.length;\n    slides[currentSlide].classList.add('active');\n  }, 5000);\n}\n\n\/\/ Call the cycling function when the document is ready\ndocument.addEventListener('DOMContentLoaded', cycleBackgroundImages);\n<\/script>\n\n\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-8808260 e-con-full elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con e-parent\" data-id=\"8808260\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-25c9845 elementor-widget elementor-widget-html\" data-id=\"25c9845\" 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 href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@300;400;500;700&amp;display=swap\" rel=\"stylesheet\">\n<style>\n        .rmc-podcast-1995 * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n            font-family: 'Roboto', sans-serif;\n        }\n\n        .rmc-podcast-1995 {\n            background: linear-gradient(-45deg, #000000, #001a1a, #003333, #004d4d, #006666);\n            background-size: 500% 500%;\n            animation: gradientBG 20s ease infinite;\n            min-height: auto;\n            padding: 0;\n            display: flex;\n            align-items: flex-start;\n            justify-content: center;\n        }\n\n        @keyframes gradientBG {\n            0% { background-position: 0% 50%; }\n            25% { background-position: 50% 100%; }\n            50% { background-position: 100% 50%; }\n            75% { background-position: 50% 0%; }\n            100% { background-position: 0% 50%; }\n        }\n\n        .rmc-podcast-1995 .podcast-carousel-section-1995 {\n            width: 100% !important;\n            margin: 0 auto;\n            padding: 30px 150px;\n            background: transparent;\n            border-radius: 15px;\n            display: flex;\n            flex-direction: column;\n            justify-content: flex-start;\n            min-height: auto;\n            height: fit-content;\n        }\n\n        .rmc-podcast-1995 .carousel-title-1995 {\n            color: #00ffff;\n            text-align: center;\n            font-size: 2em;\n            margin-bottom: 20px;\n            text-shadow: 0 0 15px rgba(0, 255, 255, 0.4),\n                         0 0 30px rgba(0, 255, 255, 0.2);\n            letter-spacing: 0.5px;\n            font-weight: 500;\n        }\n\n        .rmc-podcast-1995 .podcast-carousel-1995 {\n            position: relative;\n            width: 100%;\n            min-height: 350px;\n            max-height: 500px;\n            overflow: visible;\n            margin: 0;\n            padding: 0 20px;\n        }\n\n        .rmc-podcast-1995 .carousel-container-1995 {\n            width: 100%;\n            height: 100%;\n            overflow: hidden;\n            padding: 0;\n            margin: 0;\n            position: relative;\n        }\n\n        .rmc-podcast-1995 .carousel-track-1995 {\n            display: flex;\n            gap: 20px;\n            transition: transform 0.5s ease-in-out;\n            padding: 0;\n            margin: 0;\n            position: relative;\n            left: 0;\n            width: fit-content !important;\n            flex-wrap: nowrap !important;\n        }\n\n        @keyframes infiniteScroll {\n            0% {\n                transform: translateX(0);\n            }\n            100% {\n                transform: translateX(calc(-50% - 10px));\n            }\n        }\n\n        .rmc-podcast-1995 .carousel-card-1995 {\n            flex: 0 0 280px;\n            min-height: 450px;\n            max-height: 500px;\n            backdrop-filter: blur(10px);\n            background: rgba(26, 26, 26, 0.8);\n            box-shadow: 0 8px 32px 0 rgba(0, 255, 255, 0.1);\n            padding: 15px;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            gap: 10px; \/* Reduced from 15px *\/\n            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n            cursor: pointer;\n        }\n\n        .rmc-podcast-1995 .carousel-card-1995:hover {\n            transform: translateY(-10px) scale(1.02);\n            background: rgba(26, 26, 26, 0.9);\n        }\n\n        .rmc-podcast-1995 .carousel-card-1995 img {\n            width: 180px;\n            height: 180px;\n            border-radius: 10px;\n            object-fit: cover;\n            transition: transform 0.5s ease;\n            filter: brightness(0.9);\n        }\n\n        .rmc-podcast-1995 .carousel-card-1995:hover img {\n            transform: scale(1.05);\n            filter: brightness(1.1);\n        }\n\n        .rmc-podcast-1995 .carousel-card-1995 h3 {\n            color: #00ffff;\n            font-size: 1.1em;\n            text-align: center;\n            min-height: 40px;\n            max-height: 60px;\n            overflow: visible;\n            display: block;\n            margin-bottom: 10px; \/* Reduced from 20px *\/\n            padding-bottom: 10px; \/* Reduced from 15px *\/\n            word-wrap: break-word;\n            line-height: 1.3;\n            border-bottom: 1px solid rgba(0, 255, 255, 0.1);\n            text-shadow: 0 0 10px rgba(0, 255, 255, 0.2);\n            transition: all 0.3s ease;\n        }\n\n        .rmc-podcast-1995 .carousel-card-1995:hover h3 {\n            color: #ffffff;\n            text-shadow: 0 0 15px rgba(0, 255, 255, 0.5);\n        }\n\n        .rmc-podcast-1995 .carousel-card-1995 .description {\n            color: white;\n            font-size: 0.9em;\n            text-align: center;\n            min-height: 60px;\n            max-height: 80px;\n            overflow: hidden;\n            padding: 5px;\n            word-wrap: break-word;\n            line-height: 1.6;\n            font-weight: 300;\n            transition: all 0.3s ease;\n        }\n\n        .rmc-podcast-1995 .carousel-card-1995:hover .description {\n            color: #f0f0f0;\n        }\n\n        .rmc-podcast-1995 .date-badge {\n            background: linear-gradient(145deg, rgba(0, 255, 255, 0.1), rgba(0, 255, 255, 0.05));\n            backdrop-filter: blur(5px);\n            box-shadow: 0 4px 15px rgba(0, 255, 255, 0.1);\n            border: 2px solid #00ffff;\n            border-radius: 8px;\n            padding: 8px 15px;\n            color: #00ffff;\n            font-weight: bold;\n            text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);\n            animation: neonPulse 1.5s ease-in-out infinite;\n            transition: all 0.3s ease;\n        }\n\n        .rmc-podcast-1995 .carousel-card-1995:hover .date-badge {\n            background: linear-gradient(145deg, rgba(0, 255, 255, 0.2), rgba(0, 255, 255, 0.1));\n            box-shadow: 0 4px 20px rgba(0, 255, 255, 0.2);\n        }\n\n        @keyframes neonPulse {\n            50% {\n                box-shadow: 0 0 30px rgba(0, 255, 255, 0.4);\n            }\n        }\n\n        .rmc-podcast-1995 .nav-button-1995 {\n            position: absolute;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 40px;\n            height: 40px;\n            background: rgba(0, 0, 0, 0.8);\n            backdrop-filter: blur(5px);\n            box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            cursor: pointer;\n            z-index: 10;\n            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n        }\n\n        .rmc-podcast-1995 .nav-button-1995:hover {\n            background: rgba(0, 255, 255, 0.15);\n            transform: translateY(-50%) scale(1.15);\n            box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);\n        }\n\n        .rmc-podcast-1995 .prev-button-1995 { left: -20px; }\n        .rmc-podcast-1995 .next-button-1995 { right: -20px; }\n\n        .rmc-podcast-1995 .modal-1995 {\n            display: none;\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: rgba(0, 0, 0, 0.8);\n            backdrop-filter: blur(8px);\n            z-index: 1000;\n        }\n\n        .rmc-podcast-1995 .modal-content-1995 {\n            position: fixed;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            background: #1a1a1a;\n            padding: 40px;\n            border: 2px solid #00ffff;\n            border-radius: 20px;\n            width: 90%;\n            max-width: 500px;\n            max-height: 90vh;\n            overflow-y: auto;\n            color: white;\n            text-align: center;\n            box-shadow: 0 0 40px rgba(0, 255, 255, 0.3);\n        }\n\n        .rmc-podcast-1995 .modal-content-1995 h2 {\n            color: #00ffff;\n            margin-bottom: 20px;\n        }\n\n        .rmc-podcast-1995 .modal-content-1995 img {\n            max-width: 200px;\n            border-radius: 10px;\n            margin: 15px 0;\n        }\n\n        .rmc-podcast-1995 .modal-content-1995 #modal-img-2020-xyz {\n            max-width: 200px;\n            border-radius: 50%;\n            margin: 15px 0;\n            border: 3px solid #00ffff;\n            box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);\n        }\n\n        .rmc-podcast-1995 .close-1995 {\n            position: absolute;\n            top: 10px;\n            right: 20px;\n            color: #00ffff;\n            font-size: 35px;\n            font-weight: bold;\n            cursor: pointer;\n            transition: color 0.3s;\n        }\n\n        .rmc-podcast-1995 .close-1995:hover {\n            color: #00cccc;\n        }\n\n        .rmc-podcast-1995 #fixed-player-bar-1995 {\n            display: none;\n            position: fixed;\n            bottom: 0;\n            left: 0;\n            width: 100%;\n            background: rgba(26, 26, 26, 0.95);\n            backdrop-filter: blur(10px);\n            padding: 10px 20px;\n            border-top: 2px solid #00ffff;\n            z-index: 999;\n        }\n\n        .rmc-podcast-1995 .fixed-player-content-1995 {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            max-width: 1200px;\n            margin: 0 auto;\n            gap: 20px;\n        }\n\n        .rmc-podcast-1995 #fixed-player-title-1995 {\n            color: #00ffff;\n            font-size: 1em;\n            margin: 0;\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            flex: 1;\n        }\n\n        .rmc-podcast-1995 #fixed-player-audio-1995 {\n            flex: 2;\n            max-width: 500px;\n        }\n\n        .rmc-podcast-1995 #chromecast-button-1995 {\n            width: 40px;\n            height: 40px;\n            border-radius: 50%;\n            background: #ffffff url('https:\/\/cdn-icons-png.flaticon.com\/512\/8819\/8819177.png') center\/25px no-repeat;\n            border: 2px solid #00ffff;\n            cursor: pointer;\n            transition: all 0.3s ease;\n        }\n\n        .rmc-podcast-1995 .podcast-link-button-1995 {\n            display: none;\n            align-items: center;\n            justify-content: center;\n            gap: 8px;\n            background: rgba(0, 255, 255, 0.1);\n            border: 1px solid #00ffff;\n            color: #00ffff;\n            padding: 8px 15px;\n            border-radius: 20px;\n            font-size: 0.9em;\n            cursor: pointer;\n            transition: all 0.3s ease;\n            text-decoration: none;\n            margin-top: auto;\n            margin-bottom: 0;\n            width: fit-content;\n        }\n\n        .rmc-podcast-1995 .podcast-link-icon-1995 {\n            display: none;\n            width: 16px;\n            height: 16px;\n            fill: #00ffff;\n        }\n\n        .rmc-podcast-1995 .all-podcasts-button-1995 {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: 10px;\n            background: rgba(0, 255, 255, 0.1);\n            border: 2px solid #00ffff;\n            color: #00ffff;\n            padding: 12px 25px;\n            border-radius: 25px;\n            font-size: 1.1em;\n            cursor: pointer;\n            transition: all 0.3s ease;\n            text-decoration: none;\n            margin: 10px auto 0; \/* Updated margin-top from 20px to 10px *\/\n        }\n\n        .rmc-podcast-1995 .all-podcasts-button-1995:hover {\n            background: rgba(0, 255, 255, 0.2);\n            box-shadow: 0 0 15px rgba(0, 255, 255, 0.4),\n                        0 0 30px rgba(0, 255, 255, 0.2);\n            transform: translateY(-2px);\n        }\n\n        .rmc-podcast-1995 .podcast-icon-1995 {\n            width: 24px;\n            height: 24px;\n        }\n\n        @media (max-width: 768px) {\n            .rmc-podcast-1995 {\n                min-height: auto;\n                padding: 0;\n            }\n\n            .rmc-podcast-1995 .podcast-carousel-section-1995 {\n                padding: 20px 10px 10px 10px !important; \/* Reduce bottom padding *\/\n            }\n\n            .rmc-podcast-1995 .podcast-carousel-1995 {\n                padding: 0;\n                margin: 0;\n                margin-bottom: 10px !important; \/* Force a small margin bottom *\/\n            }\n\n            .rmc-podcast-1995 .carousel-container-1995 {\n                width: 100%;\n                margin: 0;\n                padding: 0;\n                overflow-x: auto;\n                -webkit-overflow-scrolling: touch;\n                scrollbar-width: none;\n                -ms-overflow-style: none;\n                position: relative;\n            }\n\n            .rmc-podcast-1995 .carousel-track-1995 {\n                display: flex;\n                padding: 0 10px;\n                gap: 15px;\n                transform: none !important;\n                margin-right: 0;\n                position: relative;\n                left: 0;\n            }\n\n            .rmc-podcast-1995 .carousel-container-1995::-webkit-scrollbar {\n                display: none;\n            }\n\n            .rmc-podcast-1995 .carousel-title-1995 {\n                font-size: 1.6em;\n                margin-bottom: 15px;\n                padding: 0 10px;\n            }\n\n            .rmc-podcast-1995 .nav-button-1995 {\n                display: none;\n            }\n\n            .rmc-podcast-1995 .carousel-card-1995 img {\n                width: 117px;\n                height: 117px;\n            }\n\n            .rmc-podcast-1995 .carousel-card-1995 {\n                min-height: auto; \/* Allows the card to shrink based on content *\/\n                padding-bottom: 10px; \/* Reduce bottom padding *\/\n                gap: 10px; \/* Keep consistent with previous change *\/\n            }\n\n            .rmc-podcast-1995 .date-badge {\n                margin-bottom: 0; \/* Ensure no extra margin at bottom *\/\n            }\n\n            .rmc-podcast-1995 .all-podcasts-button-1995 {\n                font-size: 1em;\n                padding: 10px 20px;\n                margin-top: 5px !important; \/* Reduce top margin *\/\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"rmc-podcast-1995\">\n        <div class=\"podcast-carousel-section-1995\">\n            <h2 class=\"carousel-title-1995\" style=\"font-size: 1.6em;\">Ecoutez les derniers podcasts les plus populaires (NRJ, Europe 1, RMC...)\n                <style>\n                    @media (max-width: 768px) {\n                        .carousel-title-1995 {\n                            font-size: 1.3em !important;\n                        }\n                    }\n                <\/style>\n            <\/h2>\n            \n            <div class=\"podcast-carousel-1995\">\n                <button class=\"nav-button-1995 prev-button-1995\" onclick=\"RMCPodcast.moveCarousel('prev')\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#00ffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <path d=\"M15 18l-6-6 6-6\"><\/path>\n                    <\/svg>\n                <\/button>\n                \n                <div class=\"carousel-container-1995\">\n                    <div class=\"carousel-track-1995\" id=\"carouselTrack1995\">\n                        <style>\n                            .carousel-track-1995 {\n                                animation: infiniteScroll 60s linear infinite;\n                            }\n\n                            @keyframes infiniteScroll {\n                                0% {\n                                    transform: translateX(0);\n                                }\n                                100% {\n                                    transform: translateX(calc(-50% - 10px));\n                                }\n                            }\n\n                            .carousel-track-1995:hover {\n                                animation-play-state: paused;\n                            }\n\n                            @media (max-width: 768px) {\n                                .carousel-track-1995 {\n                                    animation: none;\n                                }\n                            }\n\n                            .carousel-container-1995 {\n                                overflow: hidden;\n                            }\n\n                            .carousel-track-1995 {\n                                display: flex;\n                                width: fit-content;\n                            }\n\n                            .carousel-track-1995::after {\n                                content: \"\";\n                                display: block;\n                                clear: both;\n                            }\n                        <\/style>\n                    <\/div>\n                <\/div>\n                \n                <button class=\"nav-button-1995 next-button-1995\" onclick=\"RMCPodcast.moveCarousel('next')\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#00ffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <path d=\"M9 18l6-6-6-6\"><\/path>\n                    <\/svg>\n                <\/button>\n            <\/div>\n\n            <a href=\"https:\/\/radiostreamr.com\/radio-france\/category\/podcast\/\" class=\"all-podcasts-button-1995\" style=\"position: relative; overflow: hidden;\">\n                <svg class=\"podcast-icon-1995\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"#00ffff\" style=\"transition: fill 0.3s ease;\">\n                    <path d=\"M12 1c-4.97 0-9 4.03-9 9v7c0 1.66 1.34 3 3 3h3v-8H5v-2c0-3.87 3.13-7 7-7s7 3.13 7 7v2h-4v8h3c1.66 0 3-1.34 3-3v-7c0-4.97-4.03-9-9-9z\"><\/path>\n                    <path d=\"M7 15v4h2v-4H7zm8 0v4h2v-4h-2z\"><\/path>\n                <\/svg>\n                Tous les podcasts\n                <style>\n                    @media (max-width: 768px) {\n                        .all-podcasts-button-1995 {\n                            margin: 5px auto !important; \/* Drastically reduced from 20px *\/\n                            transform: translateY(-5px); \/* Move it up slightly *\/\n                            padding: 8px 15px !important; \/* Reduced padding *\/\n                            font-size: 0.9em !important; \/* Smaller font *\/\n                        }\n                        \n                        .podcast-carousel-section-1995 {\n                            padding-bottom: 5px !important; \/* Reduced bottom padding *\/\n                        }\n                    }\n                    \n                    .all-podcasts-button-1995 {\n                        animation: none;\n                        transition: all 0.3s ease !important;\n                    }\n                    \n                    .all-podcasts-button-1995:hover {\n                        border-color: #ff00ff !important;\n                        color: #ff00ff !important;\n                        box-shadow: 0 0 20px rgba(255, 0, 255, 0.5),\n                                    0 0 40px rgba(255, 0, 255, 0.3),\n                                    0 0 60px rgba(255, 0, 255, 0.1) !important;\n                        animation: neonPulseAllColors 2s infinite !important;\n                    }\n\n                    .all-podcasts-button-1995:hover .podcast-icon-1995 {\n                        fill: #ff00ff !important;\n                        animation: neonPulseAllColors 2s infinite !important;\n                    }\n\n                    @keyframes neonPulseAllColors {\n                        0% {\n                            border-color: #ff00ff;\n                            color: #ff00ff;\n                            fill: #ff00ff;\n                            box-shadow: 0 0 20px rgba(255, 0, 255, 0.5);\n                        }\n                        25% {\n                            border-color: #00ff00;\n                            color: #00ff00;\n                            fill: #00ff00;\n                            box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);\n                        }\n                        50% {\n                            border-color: #ff0000;\n                            color: #ff0000;\n                            fill: #ff0000;\n                            box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);\n                        }\n                        75% {\n                            border-color: #0000ff;\n                            color: #0000ff;\n                            fill: #0000ff;\n                            box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);\n                        }\n                        100% {\n                            border-color: #ff00ff;\n                            color: #ff00ff;\n                            fill: #ff00ff;\n                            box-shadow: 0 0 20px rgba(255, 0, 255, 0.5);\n                        }\n                    }\n                <\/style>\n            <\/a>\n        <\/div>\n\n        <div id=\"player-modal-1995\" class=\"modal-1995\">\n            <div class=\"modal-content-1995\">\n                <span class=\"close-1995\" onclick=\"RMCPodcast.closeModal()\">\u00d7<\/span>\n                <div id=\"player-content-1995\"><\/div>\n                <button id=\"chromecast-button-1995\" onclick=\"RMCPodcast.startChromecast()\"><\/button>\n            <\/div>\n        <\/div>\n\n        <div id=\"fixed-player-bar-1995\">\n            <div class=\"fixed-player-content-1995\">\n                <h3 id=\"fixed-player-title-1995\"><\/h3>\n                <audio id=\"fixed-player-audio-1995\" controls=\"\" style=\"filter: invert(1) hue-rotate(180deg); --webkit-media-controls-play-button-color: #00ffff; --webkit-media-controls-current-time-color: #00ffff; --webkit-media-controls-timeline-color: #00ffff;\">\n                    <source src=\"\" type=\"audio\/mpeg\">\n                <\/audio>\n                <button onclick=\"RMCPodcast.startChromecast()\" id=\"chromecast-button-1995\"><\/button>\n                <button onclick=\"RMCPodcast.closeFixedPlayer()\" style=\"background: none; border: none; color: #00ffff; font-size: 24px;\">\u00d7<\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n    (function() {\n        const RMCPodcastApp = {\n            init: function() {\n                if (!document.querySelector('.rmc-podcast-1995')) return;\n                this.initializeVariables();\n                this.initializeEventListeners();\n                this.fetchRandomPodcasts();\n            },\n\n            initializeVariables: function() {\n                this.carouselPosition = 0;\n                this.currentAudioUrl = '';\n                this.cardsVisible = 4;\n\n                this.RSS_FEEDS = [\n                    {\n                        url: \"https:\/\/podcast.rmc.fr\/channel419\/RMCInfochannel419.xml\",\n                        title: \"Apolline Matin\", \n                        image: \"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/11\/apolline-matin-rmc-podcast.webp\"\n                    },\n                  {\n                        url: \"https:\/\/feeds.360.audion.fm\/EZqjvOzZXgWIKWg0EETBQ\",\n                        title: \"Transfert\", \n                        image: \"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/12\/transfert-podcast.webp\"\n                    },\n                    {\n                        url: \"https:\/\/feeds.simplecast.com\/8bxI9MLf\",\n                        title: \"Super Moscato Show\",\n                        image: \"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/11\/super-moscato-show-podcast.webp\"\n                    },\n                  {\n                        url: \"https:\/\/feeds.acast.com\/public\/shows\/646cbb0bb160e00011df3980\",\n                        title: \"Legend avec Guillaume Pley\",\n                        image: \"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/11\/legend-guillaume-pley-podcast.webp\"\n                    },\n                  {\n                        url: \"http:\/\/aod.nrjaudio.fm\/xml\/190.xml\",\n                        title: \"NRJ Cin\u00e9 News\",\n                        image: \"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/11\/nrj-cine-news-podcast.webp\"\n                    },\n                  {\n                        url: \"https:\/\/www.europe1.fr\/rss\/podcasts\/on-marche-sur-la-tete.xml\",\n                        title: \"On marche sur la t\u00eate\",\n                        image: \"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/11\/europe1-podcast-on-marche-sur-la-tete-cyril-hanouna-radiostreamr.webp\"\n                    },\n                    {\n                        url: \"https:\/\/www.rtl.fr\/podcast\/les-grosses-tetes.xml\",\n                        title: \"Les Grosses t\u00eates\",\n                        image: \"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/11\/les-grosses-tetes-podcast.webp\"\n                    },\n                    {\n                        url: \"https:\/\/aod.nrjaudio.fm\/xml\/130.xml\",\n                        title: \"Manu dans le 6 10\",\n                        image: \"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/11\/manu-6-10-podcast-nrj.webp\"\n                    },\n                    {\n                        url: \"https:\/\/www.sudradio.fr\/programme\/andrebercoffdanstoussesetats\/poditunes\",\n                        title: \"Bercoff dans tous ses \u00e9tats\",\n                        image: \"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/11\/bercoff-podcast-sud-radio.webp\"\n                    },\n                    {\n                        url: \"https:\/\/feeds.simplecast.com\/VVMraBM_\",\n                        title: \"L'After Foot d'RMC\",\n                        image: \"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/11\/after-foot-podcast.webp\"\n                    },\n                    {\n                        url: \"https:\/\/www.europe1.fr\/rss\/podcasts\/hondelatte-raconte.xml\",\n                        title: \"Hondelatte raconte\",\n                        image: \"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/11\/hondelatte-raconte-podcast.webp\"\n                    },\n                    {\n                        url: \"https:\/\/www.europe1.fr\/rss\/podcasts\/lheure-des-pros.xml\",\n                        title: \"L'heure des Pros\",\n                        image: \"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/11\/lheure-des-pros-podcast.webp\"\n                    },\n                  {\n                        url: \"https:\/\/access.acast.com\/rss\/60d08901011c680012d146fc\/\",\n                        title: \"Nota Bene\",\n                        image: \"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/12\/nota-bene-podcast.webp\"\n                    },\n                    {\n                        url: \"https:\/\/podcast.rmc.fr\/channel449\/RMCInfochannel449.xml\",\n                        title: \"Rothen s'enflamme\",\n                        image: \"https:\/\/images.bfmtv.com\/rIMWJtGXWNEMgU_K6gnAxPpKM20=\/0x0:2000x2000\/2000x0\/podcast\/podcasts\/principale-89_5.jpg\"\n                    },\n                    {\n                        url: \"http:\/\/podcast.rmc.fr\/channel36\/RMCInfochannel36.xml\",\n                        title: \"Les Grandes Gueules\", \n                        image: \"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/11\/les-grandes-gueules-podcast.webp\",\n                    },\n                    {\n                        url: \"https:\/\/www.sudradio.fr\/programme\/poulin-sans-reserve\/poditunes\",\n                        title: \"Poulin sans r\u00e9serve\",\n                        image: \"https:\/\/www.sudradio.fr\/wp-content\/uploads\/2023\/08\/POULIN-SANS-RESERVE-405x405.jpg\"\n                    },\n                    {\n                        url: \"https:\/\/aod.nrjaudio.fm\/xml\/2455.xml\",\n                        title: \"Camille Combal sur NRJ\",\n                        image: \"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/11\/camille-combal-sur-nrj-podcast-scaled.webp\"\n                    },\n                    {\n                        url: \"https:\/\/www.europe1.fr\/rss\/podcasts\/actualite-politique.xml\",\n                        title: \"Le Grand Rendez-vous\",\n                        image: \"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/11\/0x1900-000000-80-0-0.webp\"\n                    },\n                    {\n                        url: \"https:\/\/www.europe1.fr\/rss\/podcasts\/europe-1-soir-week-end.xml\",\n                        title: \"Europe 1 Soir Week-end\",\n                        image: \"https:\/\/is1-ssl.mzstatic.com\/image\/thumb\/Podcasts211\/v4\/fe\/6a\/2b\/fe6a2be2-271d-4e50-0fe1-3cd3cf3301ab\/mza_18360613401910509183.jpg\/1200x1200bf-60.jpg\"\n                    }\n                ];\n            },\n\n            initializeEventListeners: function() {\n                document.addEventListener('DOMContentLoaded', () => this.fetchRandomPodcasts());\n\n                window['__onGCastApiAvailable'] = (isAvailable) => {\n                    if (isAvailable) {\n                        this.initializeCastApi();\n                    }\n                };\n            },\n\n            async getAudioDuration(audioUrl) {\n                return new Promise((resolve) => {\n                    const audio = new Audio(audioUrl);\n                    audio.addEventListener('loadedmetadata', () => {\n                        resolve(audio.duration);\n                    });\n                    audio.addEventListener('error', () => {\n                        resolve(3600); \/\/ Fallback \u00e0 1h en cas d'erreur\n                    });\n                });\n            },\n\n            formatDuration(durationInSeconds) {\n                const hours = Math.floor(durationInSeconds \/ 3600);\n                const minutes = Math.floor((durationInSeconds % 3600) \/ 60);\n                \n                if (hours > 0) {\n                    return `${hours}h ${minutes}min`;\n                } else {\n                    return `${minutes} min`;\n                }\n            },\n\n            truncateDescription: function(description, maxLength = 110) {\n                const tempElement = document.createElement('div');\n                tempElement.innerHTML = description;\n                let plainText = tempElement.textContent || tempElement.innerText || '';\n                return plainText.length <= maxLength ? plainText.trim() : plainText.substring(0, maxLength).trim() + '...';\n            },\n\n            sanitizeString: function(str) {\n                return str.replace(\/['\"\\\\<>]\/g, '');\n            },\n\n            truncateTitle: function(title, maxLength = 45) {\n                const cleanTitle = this.sanitizeString(title);\n                return cleanTitle.length <= maxLength ? cleanTitle : cleanTitle.substring(0, maxLength).trim() + '...';\n            },\n\n            fetchRandomPodcasts: async function() {\n                try {\n                    const shuffledFeeds = this.RSS_FEEDS.sort(() => Math.random() - 0.5).slice(0, 12);\n                    \n                    const podcasts = await Promise.all(shuffledFeeds.map(async feed => {\n                        const proxyUrl = `https:\/\/api.rss2json.com\/v1\/api.json?rss_url=${encodeURIComponent(feed.url)}&api_key=int3lqiwwrpnsvem6yki0mtwki2f4qcvcxtrlyea&count=250`;\n                        const response = await fetch(proxyUrl);\n                        const data = await response.json();\n                        const podcastData = data.items[0];\n                        podcastData.thumbnail = feed.image;\n                        return podcastData;\n                    }));\n\n                    await this.displayPodcasts(podcasts);\n                } catch (error) {\n                    console.error('Erreur lors du chargement des podcasts:', error);\n                }\n            },\n\n            displayPodcasts: async function(podcasts) {\n                const track = document.getElementById('carouselTrack1995');\n                track.innerHTML = '';\n                \n                \/\/ Double the cards for seamless infinite scroll\n                const allPodcasts = [...podcasts, ...podcasts];\n                \n                const cards = await Promise.all(allPodcasts.map(podcast => this.createPodcastCard(podcast)));\n                \n                cards.forEach(card => {\n                    track.appendChild(card);\n                });\n                \n                const cardWidth = 280;\n                const gap = 20;\n                \/\/ Calculate total width based on actual content\n                const totalWidth = (cardWidth + gap) * cards.length - gap;\n                \n                track.style.width = `${totalWidth}px`;\n            },\n\n            createPodcastCard: async function(podcast) {\n                const card = document.createElement('div');\n                card.className = 'carousel-card-1995';\n                \n                const feedImage = this.RSS_FEEDS.find(feed => feed.title === podcast.title)?.image || podcast.thumbnail;\n                \n                \/\/ Obtenir la dur\u00e9e r\u00e9elle\n                const duration = await this.getAudioDuration(podcast.enclosure.link);\n                \n                card.onclick = () => this.openModal(podcast.enclosure.link, podcast.title, feedImage);\n                \n                card.innerHTML = `\n                    <h3>${this.truncateTitle(podcast.title)}<\/h3>\n                    <img decoding=\"async\" id=\"carousel-img-2020-xyz\" src=\"${feedImage}\" alt=\"${podcast.title}\">\n                    <div class=\"description\">${this.truncateDescription(podcast.description, 100)}<\/div>\n                    <div class=\"duration-badge\" style=\"background: rgba(0, 0, 0, 0.6); color: #00ffff; padding: 5px 10px; border-radius: 15px; font-size: 0.9em; margin: 10px 0; display: inline-block; border: 1px solid rgba(0, 255, 255, 0.3);\">\n                        <span style=\"display: inline-block; margin-right: 5px; vertical-align: middle;\">\u23f1<\/span>\n                        ${this.formatDuration(duration)}\n                    <\/div>\n                    <div class=\"date-badge\">\n                        ${new Date(podcast.pubDate).toLocaleDateString('fr-FR', {\n                            day: '2-digit',\n                            month: '2-digit',\n                            year: '2-digit'\n                        })}\n                    <\/div>\n                `;\n                \n                return card;\n            },\n\n            moveCarousel: function(direction) {\n                const track = document.getElementById('carouselTrack1995');\n                const cards = track.children;\n                const cardWidth = 280;\n                const gap = 20;\n                const slideWidth = cardWidth + gap;\n                \n                if (direction === 'next') {\n                    this.carouselPosition -= slideWidth;\n                    \n                    \/\/ When reaching end, reset position smoothly\n                    if (Math.abs(this.carouselPosition) >= track.scrollWidth \/ 2) {\n                        this.carouselPosition = 0;\n                    }\n                } else if (direction === 'prev') {\n                    this.carouselPosition += slideWidth;\n                    \n                    \/\/ When reaching start, wrap to end smoothly\n                    if (this.carouselPosition > 0) {\n                        this.carouselPosition = -(track.scrollWidth \/ 2);\n                    }\n                }\n                \n                track.style.transition = 'transform 0.5s ease-in-out';\n                track.style.transform = `translateX(${this.carouselPosition}px)`;\n            },\n\n            openModal: function(audioUrl, title, thumbnail) {\n                const playerContent = document.getElementById('player-content-1995');\n                const modal = document.getElementById('player-modal-1995');\n                \n                playerContent.innerHTML = `\n                    <h2>${title}<\/h2>\n                    <img decoding=\"async\" id=\"modal-img-2020-xyz\" src=\"${thumbnail || this.DEFAULT_IMAGE}\" alt=\"Image du podcast\">\n                    <audio controls id=\"modal-audio-1995\" style=\"width: 100%; margin-top: 20px;\">\n                        <source src=\"${audioUrl}\" type=\"audio\/mpeg\">\n                        Votre navigateur ne supporte pas la lecture audio.\n                    <\/audio>\n                `;\n                \n                this.currentAudioUrl = audioUrl;\n                modal.style.display = 'block';\n                \n                const modalAudio = document.getElementById('modal-audio-1995');\n                modalAudio.addEventListener('play', () => {\n                    window.isPlaying = true;\n                });\n                modalAudio.addEventListener('pause', () => {\n                    window.isPlaying = false;\n                });\n            },\n\n            closeModal: function() {\n                const modal = document.getElementById('player-modal-1995');\n                const modalAudio = document.getElementById('modal-audio-1995');\n                const fixedPlayerBar = document.getElementById('fixed-player-bar-1995');\n                const fixedPlayerAudio = document.getElementById('fixed-player-audio-1995');\n                const fixedPlayerTitle = document.getElementById('fixed-player-title-1995');\n                \n                if (window.isPlaying) {\n                    modalAudio.pause();\n                    fixedPlayerBar.style.display = 'block';\n                    fixedPlayerTitle.textContent = document.querySelector('#player-content-1995 h2').textContent;\n                    fixedPlayerAudio.src = this.currentAudioUrl;\n                    fixedPlayerAudio.currentTime = modalAudio.currentTime;\n                    fixedPlayerAudio.play();\n                }\n                \n                modal.style.display = 'none';\n            },\n\n            closeFixedPlayer: function() {\n                const fixedPlayerBar = document.getElementById('fixed-player-bar-1995');\n                const fixedPlayerAudio = document.getElementById('fixed-player-audio-1995');\n                fixedPlayerAudio.pause();\n                fixedPlayerBar.style.display = 'none';\n            },\n\n            startChromecast: function() {\n                if (!chrome.cast || !chrome.cast.isAvailable) {\n                    console.log('Cast API not available');\n                    return;\n                }\n\n                chrome.cast.requestSession(\n                    (session) => {\n                        if (this.currentAudioUrl) {\n                            const mediaInfo = new chrome.cast.media.MediaInfo(this.currentAudioUrl, 'audio\/mpeg');\n                            mediaInfo.metadata = new chrome.cast.media.GenericMediaMetadata();\n                            mediaInfo.metadata.title = document.querySelector('#player-content-1995 h2').textContent;\n\n                            const request = new chrome.cast.media.LoadRequest(mediaInfo);\n                            session.loadMedia(request).then(\n                                () => console.log('Lecture Chromecast d\u00e9marr\u00e9e'),\n                                errorCode => console.error('Erreur Chromecast:', errorCode)\n                            );\n                        }\n                    },\n                    (error) => {\n                        console.error('Erreur lors de la cr\u00e9ation de la session:', error);\n                    }\n                );\n            },\n\n            initializeCastApi: function() {\n                if (!window.chrome || !window.chrome.cast) {\n                    console.log('Chrome Cast API not available yet');\n                    return;\n                }\n\n                try {\n                    const sessionRequest = new chrome.cast.SessionRequest(\n                        chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID\n                    );\n\n                    const apiConfig = new chrome.cast.ApiConfig(\n                        sessionRequest,\n                        (session) => {\n                            console.log('Cast session initialized:', session);\n                        },\n                        (availability) => {\n                            console.log('Cast receiver availability:', availability);\n                        },\n                        chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED\n                    );\n\n                    chrome.cast.initialize(\n                        apiConfig,\n                        () => {\n                            console.log('Cast API initialized successfully');\n                        },\n                        (error) => {\n                            console.error('Cast API initialization error:', error);\n                        }\n                    );\n                } catch (error) {\n                    console.error('Error initializing Cast API:', error);\n                }\n            },\n        };\n\n        window.RMCPodcast = {\n            moveCarousel: function(direction) {\n                RMCPodcastApp.moveCarousel(direction);\n            },\n            openModal: function(audioUrl, title, thumbnail) {\n                RMCPodcastApp.openModal(audioUrl, title, thumbnail);\n            },\n            closeModal: function() {\n                RMCPodcastApp.closeModal();\n            },\n            closeFixedPlayer: function() {\n                RMCPodcastApp.closeFixedPlayer();\n            },\n            startChromecast: function() {\n                RMCPodcastApp.startChromecast();\n            }\n        };\n\n        RMCPodcastApp.init();\n    })();\n    <\/script>\n\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-5e559d1 e-con-full e-flex e-con e-parent\" data-id=\"5e559d1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ab6db2f elementor-widget elementor-widget-html\" data-id=\"ab6db2f\" 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      width: 100%;\n      position: relative;\n      padding: 20px 150px; \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        <!-- FIP -->\n        <div class=\"rs-radio-card\" id=\"radioendirect-card-fip\" 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:\/\/api.theatredelaville-paris.com\/assets\/w300-h300-q70\/4c672c18\/fip_logo.png\" alt=\"FIP Radio\" class=\"rs-radio-logo\" style=\"width: 105px; height: 105px;\">\n          <span class=\"rs-radio-tag\"><i class=\"fas fa-music\"><\/i>Eclectique<\/span>\n          <h2 class=\"rs-radio-name\">\n            <span>FIP<\/span>\n            <span>Ecoutez en direct FIP<\/span>\n          <\/h2>\n          <a href=\"https:\/\/radiostreamr.com\/radio-france\/ecoutez-en-direct-fip\/\" 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-7641928 e-con-full e-flex e-con e-parent\" data-id=\"7641928\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-efd3199 elementor-widget elementor-widget-html\" data-id=\"efd3199\" 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<!DOCTYPE html><html><head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@300;400;700&amp;display=swap\" rel=\"stylesheet\">\n<style>\n  #faq-component-1234XYZ-2020 {\n    font-family: 'Roboto', sans-serif;\n    background-color: transparent;\n    color: #e0e0e0;\n    margin: 0;\n    padding: 0;\n  }\n  \n  #faq-component-1234XYZ-2020 #backgroundImage1234XYZ-2020 {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-size: cover;\n    background-position: center;\n    background-repeat: no-repeat;\n    z-index: -3;\n  }\n\n  #faq-component-1234XYZ-2020 #matrixCanvas1234XYZ-2020 {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    z-index: -2;\n  }\n\n  #faq-component-1234XYZ-2020::before {\n    content: '';\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: rgba(0, 0, 0, 0.5);\n    z-index: -1;\n    transition: background-color 0.3s ease;\n  }\n  \n  #faq-component-1234XYZ-2020:hover::before {\n    background-color: rgba(0, 0, 0, 0.8);\n  }\n\n  #faq-component-1234XYZ-2020 .container {\n    margin: 0 auto;\n    padding: 2rem;\n    background-color: rgba(18, 18, 18, 0.8);\n    border-radius: 10px;\n    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);\n    padding: 50px 150px;\n  }\n  @media (min-width: 768px) and (max-width: 1023px) {\n  #faq-component-1234XYZ-2020 .container {\n    padding: 35px;\n      }\n}\n  \n  @media (max-width: 767px) {\n  #faq-component-1234XYZ-2020 .container {\n    padding: 15px; \/* 15px pour tous les c\u00f4t\u00e9s (haut, bas, gauche, droite) *\/\n  }\n}\n  \n  #faq-component-1234XYZ-2020 h2 {\n    text-align: center;\n    color: #40E0D0;\n    font-size: 2.5rem;\n    text-shadow: 0 0 10px #40E0D0, 0 0 20px #40E0D0, 0 0 30px #40E0D0;\n    margin-bottom: 2rem;\n  }\n  #faq-component-1234XYZ-2020 .faq-item {\n    margin-bottom: 2rem;\n    perspective: 1000px;\n  }\n  #faq-component-1234XYZ-2020 .faq-question {\n    display: flex;\n    align-items: center;\n    background-color: rgba(64, 224, 208, 0.1);\n    padding: 1rem;\n    border-radius: 5px;\n    cursor: pointer;\n    transition: background-color 0.3s;\n    min-height: 60px;\n  }\n  #faq-component-1234XYZ-2020 .faq-question:hover {\n    background-color: rgba(64, 224, 208, 0.2);\n  }\n  #faq-component-1234XYZ-2020 .question-icon {\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n    margin-right: 1rem;\n    object-fit: cover;\n    border: 2px solid #40E0D0;\n  }\n  #faq-component-1234XYZ-2020 .faq-answer {\n    background-color: rgba(64, 224, 208, 0.05);\n    padding: 1rem;\n    border-radius: 5px;\n    margin-top: 0.5rem;\n    transform-origin: top;\n    transform: rotateX(-90deg);\n    transition: all 0.5s;\n    opacity: 0;\n    height: 0;\n    overflow: hidden;\n  }\n  #faq-component-1234XYZ-2020 .faq-item.open .faq-answer {\n    transform: rotateX(0deg);\n    opacity: 1;\n    height: auto;\n  }\n  #faq-component-1234XYZ-2020 h3 {\n    color: #40E0D0;\n    font-size: 1.2rem;\n    margin: 0;\n    flex: 1;\n  }\n  #faq-component-1234XYZ-2020 p {\n    line-height: 1.6;\n  }\n\n  #faq-component-1234XYZ-2020 .faq-answer p {\n    text-align: justify;\n  }\n\n  \/* Mobile-specific styles *\/\n  @media (max-width: 767px) {\n    #faq-component-1234XYZ-2020 h2 {\n      font-size: 25px;\n    }\n  }\n<\/style>\n<\/head>\n<body>\n<div id=\"faq-component-1234XYZ-2020\">\n  <div id=\"backgroundImage1234XYZ-2020\"><\/div>\n  <canvas id=\"matrixCanvas1234XYZ-2020\"><\/canvas>\n  <div class=\"container\" id=\"container1234XYZ-2020\">\n    <h2 id=\"title1234XYZ-2020\" style=\"font-size: 25px;\">FAQ : Tout ce que vous devez savoir sur l'\u00e9coute de radio en ligne<\/h2>\n    <div class=\"faq-list\" id=\"faqList1234XYZ-2020\">\n      <div class=\"faq-item\" id=\"faqItem11234XYZ-2020\">\n        <div class=\"faq-question\" style=\"display: flex; align-items: center; justify-content: flex-start;\">\n          <img decoding=\"async\" src=\"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/logo-1-3.gif\" alt=\"Logo plateforme de streaming radio\" class=\"question-icon\" style=\"flex-shrink: 0;\">\n          <h3 style=\"margin: 0;\">Qu'est-ce que cette plateforme de radio en ligne ?<\/h3>\n        <\/div>\n        <div class=\"faq-answer\">\n          <p>C'est une plateforme mondiale de webradio et de streaming radio en ligne, con\u00e7ue pour donner aux utilisateurs acc\u00e8s \u00e0 un large \u00e9ventail de stations de radio et web-radios de diff\u00e9rents pays. Vous pouvez \u00e9couter la radio en direct avec des genres musicaux vari\u00e9s allant de la pop-rock au funk, en passant par le jazz, l'\u00e9lectro et le soul, ainsi que des talk-shows, des actualit\u00e9s et des \u00e9missions sportives. La plateforme propose des stations internationales et locales, incluant des m\u00e9dias prestigieux comme France Culture, France Musique, France Bleu, Nova, RFI et Mouv. Que vous cherchiez \u00e0 \u00e9couter les radios en DAB+, Radio FM ou radio internet, notre media player offre un acc\u00e8s facile \u00e0 des milliers de stations, proposant une exp\u00e9rience d'\u00e9coute diversifi\u00e9e via diff\u00e9rentes fr\u00e9quences et playlists.<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"faq-item\" id=\"faqItem21234XYZ-2020\">\n        <div class=\"faq-question\">\n          <img decoding=\"async\" src=\"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/logo-1-3.gif\" alt=\"Logo plateforme de streaming radio\" class=\"question-icon\">\n          <h3>Comment rechercher des stations sp\u00e9cifiques ?<\/h3>\n        <\/div>\n        <div class=\"faq-answer\">\n          <p>La recherche de stations de radio sur notre plateforme radiophonique est \u00e0 la fois intuitive et efficace. Les utilisateurs peuvent explorer notre liste des radios compl\u00e8te en utilisant la barre de recherche pour trouver des webradios sp\u00e9cifiques, des hits actuels, ou des mix particuliers. De plus, vous pouvez d\u00e9couvrir les \u00e9missions pr\u00e9sent\u00e9es par vos animateurs pr\u00e9f\u00e9r\u00e9s. Ainsi, la plateforme propose des filtres pour affiner les r\u00e9sultats par pays ou par genre musical. Par exemple, si vous souhaitez \u00e9couter en direct des stations musicales diffusant du funk ou de l'\u00e9lectro au Br\u00e9sil, vous pouvez facilement personnaliser votre recherche.<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"faq-item\" id=\"faqItem31234XYZ-2020\">\n        <div class=\"faq-question\">\n          <img decoding=\"async\" src=\"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/logo-1-3.gif\" alt=\"Logo plateforme de streaming radio\" class=\"question-icon\">\n          <h3>Puis-je enregistrer mes stations pr\u00e9f\u00e9r\u00e9es ?<\/h3>\n        <\/div>\n        <div class=\"faq-answer\">\n          <p>Oui, notre plateforme offre une fonction pour sauvegarder vos stations pr\u00e9f\u00e9r\u00e9es pour un acc\u00e8s facile. Lorsque vous trouvez une station que vous appr\u00e9ciez, il vous suffit de cliquer sur l'ic\u00f4ne \u00e9toile \u00e0 c\u00f4t\u00e9 du nom de la station pour l'ajouter \u00e0 votre liste de \"Favoris\". Cette fonctionnalit\u00e9 est con\u00e7ue pour am\u00e9liorer l'exp\u00e9rience utilisateur en permettant un acc\u00e8s rapide \u00e0 vos stations pr\u00e9f\u00e9r\u00e9es.<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"faq-item\" id=\"faqItem41234XYZ-2020\">\n        <div class=\"faq-question\">\n          <img decoding=\"async\" src=\"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/logo-1-3.gif\" alt=\"Logo plateforme de streaming radio\" class=\"question-icon\">\n          <h3>Ce service est-il gratuit ?<\/h3>\n        <\/div>\n        <div class=\"faq-answer\">\n          <p>Oui, ce service est enti\u00e8rement gratuit pour les utilisateurs. Il n'y a aucun frais d'abonnement, de co\u00fbts cach\u00e9s ou d'exigences de paiement pour acc\u00e9der aux stations de radio disponibles sur la plateforme. Les utilisateurs peuvent diffuser des stations de radio en direct du monde entier sans aucune restriction. La plateforme est con\u00e7ue pour \u00eatre accessible \u00e0 tous, permettant aux utilisateurs de profiter d'une large vari\u00e9t\u00e9 de contenu sans avoir besoin d'un compte payant.<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"faq-item\" id=\"faqItem51234XYZ-2020\">\n        <div class=\"faq-question\">\n          <img decoding=\"async\" src=\"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/logo-1-3.gif\" alt=\"Logo plateforme de streaming radio\" class=\"question-icon\">\n          <h3>Comment filtrer les stations de radio par pays ou par genre ?<\/h3>\n        <\/div>\n        <div class=\"faq-answer\">\n          <p>Filtrer les stations par pays ou par genre sur notre plateforme est simple. Vous pouvez s\u00e9lectionner les filtres de pays et de genre situ\u00e9s \u00e0 c\u00f4t\u00e9 de la barre de recherche. Par exemple, si vous recherchez des stations de musique classique en Allemagne, vous pouvez choisir \"Allemagne\" dans le filtre pays et \"Classique\" dans le filtre genre. La plateforme affichera alors toutes les stations qui correspondent \u00e0 ces crit\u00e8res. Ces filtres facilitent l'exploration de contenu sp\u00e9cifique \u00e0 vos pr\u00e9f\u00e9rences.<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"faq-item\" id=\"faqItem61234XYZ-2020\">\n        <div class=\"faq-question\">\n          <img decoding=\"async\" src=\"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/logo-1-3.gif\" alt=\"Logo plateforme de streaming radio\" class=\"question-icon\">\n          <h3>Puis-je \u00e9couter ce service sur mon appareil mobile ?<\/h3>\n        <\/div>\n        <div class=\"faq-answer\">\n          <p>Oui, notre plateforme est enti\u00e8rement optimis\u00e9e pour les appareils mobiles, garantissant une exp\u00e9rience d'\u00e9coute fluide sur smartphones et tablettes. Le service est con\u00e7u pour \u00eatre r\u00e9actif, c'est-\u00e0-dire qu'il s'adapte \u00e0 diff\u00e9rentes tailles d'\u00e9cran et r\u00e9solutions. Cela vous permet de profiter du streaming radio en direct en d\u00e9placement sans compromettre la fonctionnalit\u00e9 ou la qualit\u00e9.<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"faq-item\" id=\"faqItem71234XYZ-2020\">\n        <div class=\"faq-question\">\n          <img decoding=\"async\" src=\"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/logo-1-3.gif\" alt=\"Logo plateforme de streaming radio\" class=\"question-icon\">\n          <h3>Comment utiliser Chromecast pour diffuser sur mon t\u00e9l\u00e9viseur ?<\/h3>\n        <\/div>\n        <div class=\"faq-answer\">\n  <p>Notre plateforme int\u00e8gre nativement la fonctionnalit\u00e9 Chromecast pour vous permettre d'\u00e9couter vos radios et podcasts pr\u00e9f\u00e9r\u00e9s sur grand \u00e9cran. Pour l'utiliser, rep\u00e9rez simplement l'ic\u00f4ne Chromecast situ\u00e9e \u00e0 c\u00f4t\u00e9 du lecteur, comme illustr\u00e9 ci-dessous :<\/p>\n  <img decoding=\"async\" src=\"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/11\/fonction-chromecast-radio-en-ligne.webp\" alt=\"D\u00e9monstration du bouton Chromecast \u00e0 c\u00f4t\u00e9 du lecteur radio\" style=\"max-width: 50%; height: auto; margin: 15px auto; border-radius: 8px; display: block;\">\n  <p>Important : Pour utiliser Chromecast, assurez-vous que votre appareil (smartphone, tablette ou ordinateur) est connect\u00e9 au m\u00eame r\u00e9seau Wi-Fi que l'appareil Chromecast sur lequel vous souhaitez diffuser le contenu. Une fois connect\u00e9 sur le m\u00eame r\u00e9seau, cliquez simplement sur l'ic\u00f4ne Chromecast pour diffuser instantan\u00e9ment le contenu sur votre t\u00e9l\u00e9viseur ou tout autre appareil compatible. Cette fonction vous permet ainsi d'\u00e9couter France Culture, Nova, RFI ou n'importe quelle webradio sur votre syst\u00e8me audio domestique pour une exp\u00e9rience d'\u00e9coute optimale. La diffusion en streaming reste fluide et de haute qualit\u00e9, que vous \u00e9coutiez de la musique pop-rock, du funk, de l'\u00e9lectro ou des \u00e9missions radiophoniques.<\/p>\n<\/div>\n      <\/div>\n      <div class=\"faq-item\" id=\"faqItem81234XYZ-2020\">\n        <div class=\"faq-question\">\n          <img decoding=\"async\" src=\"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/logo-1-3.gif\" alt=\"Logo plateforme de streaming radio\" class=\"question-icon\">\n          <h3>Comment puis-je trouver de nouvelles stations tendance ?<\/h3>\n        <\/div>\n        <div class=\"faq-answer\">\n          <p>Ce service dispose d'une section \"Radios Populaires\" qui met en avant les stations tendance et playlists des diff\u00e9rentes webradios. Ainsi, vous pouvez d\u00e9couvrir les derniers hits et mix diffus\u00e9s sur les meilleures stations. Cette section est r\u00e9guli\u00e8rement mise \u00e0 jour en fonction de l'activit\u00e9 des auditeurs. Vous pouvez donc explorer les stations les plus \u00e9cout\u00e9es, notamment France Culture, Nova, et RFI, ainsi que d\u00e9couvrir des contenus radiophoniques vari\u00e9s en replay. Toutefois, l'accent est mis sur la diversit\u00e9 des genres musicaux, du pop-rock au soul, en passant par l'\u00e9lectro.<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"faq-item\" id=\"faqItem91234XYZ-2020\">\n        <div class=\"faq-question\">\n          <img decoding=\"async\" src=\"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/logo-1-3.gif\" alt=\"Logo plateforme de streaming radio\" class=\"question-icon\">\n          <h3>Puis-je utiliser ce service sans cr\u00e9er un compte ?<\/h3>\n        <\/div>\n        <div class=\"faq-answer\">\n          <p>Oui, vous pouvez utiliser notre plateforme sans cr\u00e9er de compte. Le service est con\u00e7u pour \u00eatre accessible \u00e0 tous, vous permettant de naviguer et d'\u00e9couter des stations sans vous inscrire. Cependant, cr\u00e9er un compte offre des avantages suppl\u00e9mentaires, tels que la possibilit\u00e9 d'enregistrer des stations pr\u00e9f\u00e9r\u00e9es, d'acc\u00e9der \u00e0 des recommandations personnalis\u00e9es et de suivre votre historique d'\u00e9coute. Bien qu'un compte am\u00e9liore votre exp\u00e9rience, il n'est pas obligatoire pour diffuser du contenu.<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"faq-item\" id=\"faqItem101234XYZ-2020\">\n        <div class=\"faq-question\">\n          <img decoding=\"async\" src=\"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/logo-1-3.gif\" alt=\"Logo plateforme de streaming radio\" class=\"question-icon\">\n          <h3>Ce service propose-t-il des podcasts ?<\/h3>\n        <\/div>\n        <div class=\"faq-answer\">\n  <p>Oui, notre plateforme propose une large s\u00e9lection de podcasts, particuli\u00e8rement des \u00e9missions fran\u00e7aises. Vous pouvez retrouver tous les podcasts des \u00e9missions de Radio France sur notre <a href=\"https:\/\/radiostreamr.com\/radio-france\/category\/podcast\/\" style=\"color: #40E0D0; text-decoration: none;\">grille des podcasts<\/a>. Ces contenus sont disponibles \u00e0 la demande, ce qui vous permet d'\u00e9couter vos \u00e9missions pr\u00e9f\u00e9r\u00e9es quand vous le souhaitez. Chaque podcast peut \u00eatre t\u00e9l\u00e9charg\u00e9 pour une \u00e9coute hors ligne, et vous pouvez les diffuser sur tous vos appareils compatibles gr\u00e2ce \u00e0 la fonction Chromecast int\u00e9gr\u00e9e.<\/p>\n  <p>Important : Pour utiliser Chromecast, assurez-vous que votre appareil (smartphone, tablette ou ordinateur) est connect\u00e9 au m\u00eame r\u00e9seau Wi-Fi que l'appareil Chromecast sur lequel vous souhaitez diffuser le contenu. Une fois connect\u00e9 sur le m\u00eame r\u00e9seau, cliquez simplement sur l'ic\u00f4ne Chromecast pour diffuser instantan\u00e9ment le contenu sur votre t\u00e9l\u00e9viseur ou tout autre appareil compatible.<\/p>\n  <img decoding=\"async\" src=\"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/11\/fonction-chromecast-radio-en-ligne.webp\" alt=\"D\u00e9monstration du bouton Chromecast \u00e0 c\u00f4t\u00e9 du lecteur radio\" style=\"max-width: 50%; height: auto; margin: 15px auto; border-radius: 8px; display: block;\">\n  <p>Les podcasts sont automatiquement mis \u00e0 jour d\u00e8s leur publication par les radios, vous garantissant ainsi l'acc\u00e8s au contenu le plus r\u00e9cent. En plus des stations de radio en direct, vous avez acc\u00e8s \u00e0 un catalogue croissant de podcasts couvrant divers sujets tels que l'actualit\u00e9, la culture, la science, l'histoire et bien plus encore.<\/p>\n<\/div>\n      <\/div>\n      <div class=\"faq-item\" id=\"faqItem111234XYZ-2020\">\n        <div class=\"faq-question\">\n          <img decoding=\"async\" src=\"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/logo-1-3.gif\" alt=\"Logo plateforme de streaming radio\" class=\"question-icon\">\n          <h3>\u00c0 quelle fr\u00e9quence les stations sont-elles mises \u00e0 jour ?<\/h3>\n        <\/div>\n        <div class=\"faq-answer\">\n          <p>Les stations de notre plateforme sont continuellement mises \u00e0 jour pour refl\u00e9ter les nouveaux contenus et tendances. Le service surveille la disponibilit\u00e9 des stations et supprime les flux inactifs ou d\u00e9faillants. De plus, de nouvelles stations sont r\u00e9guli\u00e8rement ajout\u00e9es \u00e0 la plateforme pour garantir aux utilisateurs un acc\u00e8s aux derni\u00e8res et aux plus populaires flux radio.<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"faq-item\" id=\"faqItem121234XYZ-2020\">\n        <div class=\"faq-question\">\n          <img decoding=\"async\" src=\"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/logo-1-3.gif\" alt=\"Logo plateforme de streaming radio\" class=\"question-icon\">\n          <h3>Quels types de genres sont disponibles sur cette plateforme ?<\/h3>\n        <\/div>\n        <div class=\"faq-answer\">\n          <p>Ce service propose une vaste s\u00e9lection de webradios et stations de radio, r\u00e9pondant \u00e0 tous les go\u00fbts musicaux. Les utilisateurs peuvent ainsi explorer des genres vari\u00e9s : pop-rock, soul, funk, \u00e9lectro, et bien d'autres styles diffus\u00e9s sur les ondes. En effet, que vous pr\u00e9f\u00e9riez \u00e9couter France Musique, Mouv, Nova ou RFI, notre plateforme propose des m\u00e9dias diversifi\u00e9s. De plus, vous pouvez acc\u00e9der \u00e0 toutes les fr\u00e9quences disponibles, du DAB+ \u00e0 la radio FM, en passant par la radio internet. Les playlists sont r\u00e9guli\u00e8rement mises \u00e0 jour pour vous offrir le meilleur du contenu radiophonique.<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"faq-item\" id=\"faqItem131234XYZ-2020\">\n        <div class=\"faq-question\">\n          <img decoding=\"async\" src=\"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/logo-1-3.gif\" alt=\"Logo plateforme de streaming radio\" class=\"question-icon\">\n          <h3>Puis-je acc\u00e9der \u00e0 des stations de radio de n'importe quel pays ?<\/h3>\n        <\/div>\n        <div class=\"faq-answer\">\n          <p>Oui, cette plateforme donne aux utilisateurs acc\u00e8s \u00e0 des stations de radio provenant pratiquement de tous les pays. Le service propose des stations de pays populaires comme les \u00c9tats-Unis, le Canada, la France, le Br\u00e9sil, l'Espagne et l'Allemagne, ainsi que des r\u00e9gions plus petites. Vous pouvez explorer du contenu de diff\u00e9rentes cultures, langues et styles musicaux, offrant une v\u00e9ritable exp\u00e9rience radio mondiale.<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"faq-item\" id=\"faqItem141234XYZ-2020\">\n        <div class=\"faq-question\">\n          <img decoding=\"async\" src=\"https:\/\/pacific-webtools.com\/radio-online\/wp-content\/uploads\/2024\/10\/logo-1-3.gif\" alt=\"Logo plateforme de streaming radio\" class=\"question-icon\">\n          <h3>Y a-t-il une limite \u00e0 combien je peux \u00e9couter ?<\/h3>\n        <\/div>\n        <div class=\"faq-answer\">\n          <p>Non, il n'y a aucune limite \u00e0 combien vous pouvez \u00e9couter sur notre plateforme. Le service propose un streaming illimit\u00e9 de toutes les stations disponibles. Vous pouvez \u00e9couter autant de stations que vous le souhaitez, aussi longtemps que vous le souhaitez, sans aucune restriction. C'est un excellent choix pour les utilisateurs qui souhaitent un acc\u00e8s continu \u00e0 du contenu radio mondial sans se soucier des limites d'utilisation ou de frais suppl\u00e9mentaires.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n(function() {\n  document.addEventListener('DOMContentLoaded', () => {\n    const faqComponent = document.getElementById('faq-component-1234XYZ-2020');\n    const faqItems = faqComponent.querySelectorAll('.faq-item');\n    \n    faqItems.forEach(item => {\n      const question = item.querySelector('.faq-question');\n      question.addEventListener('click', () => {\n        item.classList.toggle('open');\n      });\n    });\n\n    \/\/ Matrix-style animation with music notes\n    const canvas = faqComponent.querySelector('#matrixCanvas1234XYZ-2020');\n    const ctx = canvas.getContext('2d');\n\n    canvas.width = window.innerWidth;\n    canvas.height = window.innerHeight;\n\n    const musicNotes = ['\u2669', '\u266a', '\u266b', '\u266c', '\ud834\udd57\ud834\udd65', '\ud834\udd58\ud834\udd65', '\ud834\udd58\ud834\udd65\ud834\udd6e', '\ud834\udd58\ud834\udd65\ud834\udd6f'];\n    const columns = canvas.width \/ 20;\n    const drops = [];\n\n    for (let i = 0; i < columns; i++) {\n      drops[i] = 1;\n    }\n\n    function draw() {\n      ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';\n      ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n      ctx.fillStyle = '#40E0D0';\n      ctx.font = '20px monospace';\n\n      for (let i = 0; i < drops.length; i++) {\n        const text = musicNotes[Math.floor(Math.random() * musicNotes.length)];\n        ctx.fillText(text, i * 20, drops[i] * 20);\n\n        if (drops[i] * 20 > canvas.height && Math.random() > 0.975) {\n          drops[i] = 0;\n        }\n\n        drops[i]++;\n      }\n    }\n\n    setInterval(draw, 33);\n\n    window.addEventListener('resize', () => {\n      canvas.width = window.innerWidth;\n      canvas.height = window.innerHeight;\n    });\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-64b21ef e-con-full e-flex e-con e-parent\" data-id=\"64b21ef\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>RadiostreamR | \u00c9coutez les stations de radio fran\u00e7aises en direct en ligne gratuitement D\u00e9couvrez et \u00e9coutez en streaming des stations de radio fran\u00e7aises en direct. Que vous recherchiez les derniers tubes, les derni\u00e8res nouvelles ou des \u00e9missions de d\u00e9bats, nous vous proposons une grande vari\u00e9t\u00e9 de stations de radio fran\u00e7aises. Branchez-vous maintenant et explorez diff\u00e9rents [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":53,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Radios Fran\u00e7aises en Ligne | \u00c9coutez les Meilleures Stations - RadioStreamR - Ecoutez la Radio fran\u00e7aise en ligne en direct<\/title>\n<meta name=\"description\" content=\"\u00c9coutez les meilleures stations de radio fran\u00e7aises en ligne : actualit\u00e9s, musique et divertissement en streaming gratuit.\" \/>\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\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Radios Fran\u00e7aises en Ligne | \u00c9coutez les Meilleures Stations - RadioStreamR - Ecoutez la Radio fran\u00e7aise en ligne en direct\" \/>\n<meta property=\"og:description\" content=\"\u00c9coutez les meilleures stations de radio fran\u00e7aises en ligne : actualit\u00e9s, musique et divertissement en streaming gratuit.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/radiostreamr.com\/radio-france\/\" \/>\n<meta property=\"og:site_name\" content=\"RadioStreamR - Ecoutez la Radio fran\u00e7aise en ligne en direct\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-20T10:37:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-24-15.53.03-A-neon-dark-style-illustration-representing-France-with-glowing-outlines-of-the-countrys-map.-The-image-should-feature-iconic-French-elements-subtly.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"18 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/radiostreamr.com\/radio-france\/\",\"url\":\"https:\/\/radiostreamr.com\/radio-france\/\",\"name\":\"Radios Fran\u00e7aises en Ligne | \u00c9coutez les Meilleures Stations - RadioStreamR - Ecoutez la Radio fran\u00e7aise en ligne en direct\",\"isPartOf\":{\"@id\":\"https:\/\/radiostreamr.com\/radio-france\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/radiostreamr.com\/radio-france\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/radiostreamr.com\/radio-france\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-24-15.53.03-A-neon-dark-style-illustration-representing-France-with-glowing-outlines-of-the-countrys-map.-The-image-should-feature-iconic-French-elements-subtly.webp\",\"datePublished\":\"2024-10-24T12:17:38+00:00\",\"dateModified\":\"2024-12-20T10:37:25+00:00\",\"description\":\"\u00c9coutez les meilleures stations de radio fran\u00e7aises en ligne : actualit\u00e9s, musique et divertissement en streaming gratuit.\",\"breadcrumb\":{\"@id\":\"https:\/\/radiostreamr.com\/radio-france\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/radiostreamr.com\/radio-france\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/radiostreamr.com\/radio-france\/#primaryimage\",\"url\":\"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-24-15.53.03-A-neon-dark-style-illustration-representing-France-with-glowing-outlines-of-the-countrys-map.-The-image-should-feature-iconic-French-elements-subtly.webp\",\"contentUrl\":\"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-24-15.53.03-A-neon-dark-style-illustration-representing-France-with-glowing-outlines-of-the-countrys-map.-The-image-should-feature-iconic-French-elements-subtly.webp\",\"width\":1024,\"height\":1024},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/radiostreamr.com\/radio-france\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\/\/radiostreamr.com\/radio-france\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Radios Fran\u00e7aises en Ligne | \u00c9coutez les Meilleures Stations\"}]},{\"@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\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Radios Fran\u00e7aises en Ligne | \u00c9coutez les Meilleures Stations - RadioStreamR - Ecoutez la Radio fran\u00e7aise en ligne en direct","description":"\u00c9coutez les meilleures stations de radio fran\u00e7aises en ligne : actualit\u00e9s, musique et divertissement en streaming gratuit.","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\/","og_locale":"fr_FR","og_type":"article","og_title":"Radios Fran\u00e7aises en Ligne | \u00c9coutez les Meilleures Stations - RadioStreamR - Ecoutez la Radio fran\u00e7aise en ligne en direct","og_description":"\u00c9coutez les meilleures stations de radio fran\u00e7aises en ligne : actualit\u00e9s, musique et divertissement en streaming gratuit.","og_url":"https:\/\/radiostreamr.com\/radio-france\/","og_site_name":"RadioStreamR - Ecoutez la Radio fran\u00e7aise en ligne en direct","article_modified_time":"2024-12-20T10:37:25+00:00","og_image":[{"width":1024,"height":1024,"url":"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-24-15.53.03-A-neon-dark-style-illustration-representing-France-with-glowing-outlines-of-the-countrys-map.-The-image-should-feature-iconic-French-elements-subtly.webp","type":"image\/webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"18 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/radiostreamr.com\/radio-france\/","url":"https:\/\/radiostreamr.com\/radio-france\/","name":"Radios Fran\u00e7aises en Ligne | \u00c9coutez les Meilleures Stations - RadioStreamR - Ecoutez la Radio fran\u00e7aise en ligne en direct","isPartOf":{"@id":"https:\/\/radiostreamr.com\/radio-france\/#website"},"primaryImageOfPage":{"@id":"https:\/\/radiostreamr.com\/radio-france\/#primaryimage"},"image":{"@id":"https:\/\/radiostreamr.com\/radio-france\/#primaryimage"},"thumbnailUrl":"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-24-15.53.03-A-neon-dark-style-illustration-representing-France-with-glowing-outlines-of-the-countrys-map.-The-image-should-feature-iconic-French-elements-subtly.webp","datePublished":"2024-10-24T12:17:38+00:00","dateModified":"2024-12-20T10:37:25+00:00","description":"\u00c9coutez les meilleures stations de radio fran\u00e7aises en ligne : actualit\u00e9s, musique et divertissement en streaming gratuit.","breadcrumb":{"@id":"https:\/\/radiostreamr.com\/radio-france\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/radiostreamr.com\/radio-france\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/radiostreamr.com\/radio-france\/#primaryimage","url":"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-24-15.53.03-A-neon-dark-style-illustration-representing-France-with-glowing-outlines-of-the-countrys-map.-The-image-should-feature-iconic-French-elements-subtly.webp","contentUrl":"https:\/\/radiostreamr.com\/radio-france\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-24-15.53.03-A-neon-dark-style-illustration-representing-France-with-glowing-outlines-of-the-countrys-map.-The-image-should-feature-iconic-French-elements-subtly.webp","width":1024,"height":1024},{"@type":"BreadcrumbList","@id":"https:\/\/radiostreamr.com\/radio-france\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/radiostreamr.com\/radio-france\/"},{"@type":"ListItem","position":2,"name":"Radios Fran\u00e7aises en Ligne | \u00c9coutez les Meilleures Stations"}]},{"@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"}]}},"_links":{"self":[{"href":"https:\/\/radiostreamr.com\/radio-france\/wp-json\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/radiostreamr.com\/radio-france\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/radiostreamr.com\/radio-france\/wp-json\/wp\/v2\/types\/page"}],"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=9"}],"version-history":[{"count":92,"href":"https:\/\/radiostreamr.com\/radio-france\/wp-json\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":1892,"href":"https:\/\/radiostreamr.com\/radio-france\/wp-json\/wp\/v2\/pages\/9\/revisions\/1892"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/radiostreamr.com\/radio-france\/wp-json\/wp\/v2\/media\/53"}],"wp:attachment":[{"href":"https:\/\/radiostreamr.com\/radio-france\/wp-json\/wp\/v2\/media?parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}