PageSourceSearch

https://fhits.fr/programmes

html fhits.fr collected 2026-09-24 13:23:25 UTC 154,526 bytes, 2,886 lines download raw bytes

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5
6<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
7
8
9<!-- MINIFIED -->
10
11<title>F. HITS - La puissance de vos hits ! | Programmes</title><meta name="description" content="F. HITS, la puissance de vos hits ! Retrouvez vos hits, vos émissions, vos podcasts et vos webradios F. HITS partout en France."><meta name="keywords" content="F. HITS, radio, podcast, webradio"><link rel="canonical" href="https://fhits.fr/programmes"><meta name="robots" content="all">
12<meta property="og:title" content="Programmes"><meta property="og:description" content="F. HITS, la puissance de vos hits ! Retrouvez vos hits, vos émissions, vos podcasts et vos webradios F. HITS partout en France."><meta property="og:url" content="https://fhits.fr/programmes"><meta property="og:type" content="website"><meta property="og:site_name" content="F. HITS">
13<meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="Programmes">
14<script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"RadioStation","@id":"https://fhits.fr#organization","name":"F. HITS","url":"https://fhits.fr","logo":{"@type":"ImageObject","url":"https://fhits.fr/assets/logo/cmsradio_blue.webp"},"sameAs":["https://www.facebook.com/FhitsFR","https://www.instagram.com/fhits_radio/","https://www.linkedin.com/company/f-hits-radio","https://www.tiktok.com/@fhitsradio"],"email":"[email protected]","telephone":"09 71 18 27 18","address":"22 Rue des Goélands, 35580 Guignen"},{"@type":"WebSite","@id":"https://fhits.fr#website","name":"F. HITS","url":"https://fhits.fr","inLanguage":"fr-FR","publisher":{"@id":"https://fhits.fr#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://fhits.fr/actualites?q={search_term_string}"},"query-input":"required name=search_term_string"}},{"@type":"BreadcrumbList","@id":"https://fhits.fr/programmes#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https://fhits.fr"},{"@type":"ListItem","position":2,"name":"Programmes","item":"https://fhits.fr/programmes"}]},{"@type":"BroadcastService","name":"Grille des programmes F. HITS","broadcaster":{"@type":"Organization","name":"F. HITS"},"@id":"https://fhits.fr/programmes#broadcast-service","isPartOf":{"@id":"https://fhits.fr#website"},"mainEntityOfPage":{"@id":"https://fhits.fr/programmes#webpage"}},{"@type":"WebPage","@id":"https://fhits.fr/programmes#webpage","url":"https://fhits.fr/programmes","name":"Programmes","description":"F. HITS, la puissance de vos hits ! Retrouvez vos hits, vos émissions, vos podcasts et vos webradios F. HITS partout en France.","inLanguage":"fr-FR","isPartOf":{"@id":"https://fhits.fr#website"},"breadcrumb":{"@id":"https://fhits.fr/programmes#breadcrumb"},"mainEntity":{"@id":"https://fhits.fr/programmes#broadcast-service"}}]}</script>
14
15
16<link rel="shortcut icon" href="https://s3.fr-par.scw.cloud/fhits-fr/images/params/b24f41dc-51ac-4021-a98a-d992b965e7f3.webp" data-customizer="favicon">
17
18
19<link rel="manifest" href="https://fhits.fr/manifest.json">
20<meta name="theme-color" content="#068099">
21<meta name="apple-mobile-web-app-capable" content="yes">
22<meta name="apple-mobile-web-app-status-bar-style" content="default">
23<meta name="apple-mobile-web-app-title" content="F. HITS">
24<link rel="apple-touch-icon" href="https://fhits.fr/assets/logo/logo_carre.webp">
25
26<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
27<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" media="print" onload="this.media='all'">
28<noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"></noscript>
29
30
31<style>
32    :root {
33        --dynamic-hero-url: url('https://fhits.fr/assets/images/photo-1478737270239-2f02b77fc618.webp');
34        --dynamic-hero-progam-url: url('https://fhits.fr/assets/images/photo-1516280440614-37939bbacd81.webp');
35        --dynamic-hero-top-url: url('https://fhits.fr/assets/images/photo-1470229722913-7c0e2dbbafd3.webp');
36        --dynamic-hero-titres-url: url('https://fhits.fr/assets/images/photo-1516280440614-37939bbacd81.webp');
37        --dynamic-hero-podcasts-url: url('https://fhits.fr/assets/images/photo-1478737270239-2f02b77fc618.webp');
38        --dynamic-hero-partners-url: url('https://fhits.fr/assets/images/photo-1556761175-b413da4baf72.webp');
39        --dynamic-hero-regie-url: url('https://fhits.fr/assets/images/photo-1557804506-669a67965ba0.webp');
40        --dynamic-hero-diffusion-url: url('https://fhits.fr/assets/images/photo-1493225457124-a3eb161ffa5f.webp');
41        --dynamic-hero-regions-url: url('https://fhits.fr/assets/images/photo-1500530855697-b586d89ba3ee.webp');
42        --dynamic-hero-jobs-url: url('https://fhits.fr/assets/images/photo-1521737604893-d14cc237f11d.webp');
43        --dynamic-hero-team-url: url('https://fhits.fr/assets/images/equipe.png');
44        --dynamic-hero-contact-url: url('https://fhits.fr/assets/images/photo-1516321318423-f06f85e504b3.webp');
45        --dynamic-hero-partner-url: url('https://fhits.fr/assets/images/photo-1517048676732-d65bc937f952.webp');
46        --dynamic-hero-privacy-url: url('https://fhits.fr/assets/images/photo-1563013544-824ae1b704d3.webp');
47        --dynamic-hero-legal-url: url('https://fhits.fr/assets/images/photo-1450101499163-c8848c66ca85.webp');
48        --dynamic-hero-cookies-url: url('https://fhits.fr/assets/images/photo-1516321318423-f06f85e504b3.webp');
49        --dynamic-principal: #068099;
50        --dynamic-subprincipal: #056f85;
51        
52        --dynamic-dark-value: #000000;
53        --dynamic-soft-value: #f4fbfc;
54        --dynamic-dark: var(--dynamic-dark-value);
55        --dynamic-soft: var(--dynamic-soft-value);
56
57        
58        --dynamic-font-sans: "Montserrat","system-ui",sans-serif;
59        --dynamic-radius-md: 0.375rem;
60        --dynamic-radius-lg: 0.5rem;
61        --dynamic-radius-xl: 0.75rem;
62        --dynamic-radius-2xl: 1rem;
63        --dynamic-radius-3xl: 1.5rem;
64        --dynamic-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
65        --dynamic-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
66        --dynamic-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
67        --dynamic-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
68        --dynamic-spacing: 0.25rem;
69        --dynamic-container-normal: 80rem;
70    }
71    </style>
72    <link rel="preconnect" href="https://fonts.googleapis.com">
73    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
74    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap" rel="stylesheet">
75<script>
76    window.EASTER_EGGS_CONFIG = {"console":{"enabled":true,"fields":{"message":"\ud83d\udd75\ufe0f\u200d\u2642\ufe0f Oh, un curieux ! Tu cherches les secrets de hCloud \/ F.GROUP ?"}},"konami":{"enabled":true,"fields":{"message":"\ud83c\udfae CODE KONAMI ACTIV\u00c9 - TOUTES LES BASES NOUS APPARTIENNENT"}},"reboot":{"enabled":true,"fields":[]},"bruit":{"enabled":true,"fields":[]},"fgroup":{"enabled":true,"fields":{"video_url":"https:\/\/www.youtube.com\/watch?v=dQw4w9WgXcQ"}},"matrix":{"enabled":true,"fields":[]},"party":{"enabled":true,"fields":[]},"fax":{"enabled":true,"fields":{"message":"\ud83d\udce0 F.GROUP \u2014 TRANSMISSION RE\u00c7UE\nMerci de v\u00e9rifier le bac papier."}},"winamp":{"enabled":true,"fields":{"track":"F.GROUP \u2014 Radio Mix (128 kbps)"}},"bsod":{"enabled":true,"fields":[]},"nightfall":{"enabled":true,"fields":[]},"barrel_roll":{"enabled":true,"fields":[]},"logo_clicks":{"enabled":true,"fields":[]},"flashlight":{"enabled":true,"fields":[]}};
77</script>
77
78<link rel="preload" as="style" href="https://fhits.fr/build/assets/app-DoSgSznG.css" /><link rel="preload" as="style" href="https://fhits.fr/build/assets/trix-Bh2jpL6a.css" /><link rel="modulepreload" as="script" href="https://fhits.fr/build/assets/app-CyyZmYZN.js" /><link rel="modulepreload" as="script" href="https://fhits.fr/build/assets/d3-array-DZVSN-DA.js" /><link rel="modulepreload" as="script" href="https://fhits.fr/build/assets/d3-axis-CpdAFzrf.js" /><link rel="modulepreload" as="script" href="https://fhits.fr/build/assets/d3-BjzVtB1c.js" /><link rel="modulepreload" as="script" href="https://fhits.fr/build/assets/d3-scale-gQ3CG0wu.js" /><link rel="modulepreload" as="script" href="https://fhits.fr/build/assets/d3-format-BQd5x3PN.js" /><link rel="modulepreload" as="script" href="https://fhits.fr/build/assets/d3-interpolate-DI6xpEV7.js" /><link rel="modulepreload" as="script" href="https://fhits.fr/build/assets/d3-selection-DHg4s8in.js" /><link rel="modulepreload" as="script" href="https://fhits.fr/build/assets/d3-shape-pniN-TbV.js" /><link rel="modulepreload" as="script" href="https://fhits.fr/build/assets/d3-path-DTp1UODE.js" /><link rel="modulepreload" as="script" href="https://fhits.fr/build/assets/d3-time-format-DYIvHzMr.js" /><link rel="modulepreload" as="script" href="https://fhits.fr/build/assets/trix-j16bf0Ht.js" /><link rel="modulepreload" as="script" href="https://fhits.fr/build/assets/regions-Cd5Rz_Bz.js" /><link rel="modulepreload" as="script" href="https://fhits.fr/build/assets/d3-geo-DWtwbGOn.js" /><link rel="modulepreload" as="script" href="https://fhits.fr/build/assets/player-sq8li9CO.js" /><link rel="stylesheet" href="https://fhits.fr/build/assets/app-DoSgSznG.css" /><link rel="stylesheet" href="https://fhits.fr/build/assets/trix-Bh2jpL6a.css" />
78<script type="module" src="https://fhits.fr/build/assets/app-CyyZmYZN.js"></script>
78<script type="module" src="https://fhits.fr/build/assets/player-sq8li9CO.js"></script>
78<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
78
79
80<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer ></script>
80
81
82
83<script>
84    if ('serviceWorker' in navigator) {
85        window.addEventListener('load', () => {
86            navigator.serviceWorker.register('/sw.js').catch(() => {});
87        });
88    }
89</script>
89
90
91</head>
92
93<body>
94
95<div class="bg-gradient-to-r from-principal to-subprincipal px-4 py-3 text-white">
96        <div class="mx-auto flex max-w-7xl items-center justify-between gap-4">
97            <div class="flex items-center gap-3">
98                <i class="fa-solid fa-tower-broadcast animate-pulse text-lg"></i>
99                <div class="leading-tight">
100                    <p class="text-[11px] opacity-80">En ce moment sur F. HITS</p>
101                    <p class="font-black">Programmation musicale</p>
102                </div>
103            </div>
104            <div id="infobar-track" class="hidden items-center gap-2 text-sm font-semibold opacity-90 md:flex"></div>
105        </div>
106    </div>
107
108
109<header class="top-0 z-50 sticky border-b border-slate-200 bg-white/90 backdrop-blur-2xl">
110    <div class="mx-auto flex max-w-7xl items-center justify-between px-5 py-4" id="home-page">
111
112        <a href="https://fhits.fr" class="flex items-center gap-3">
113            <img loading="lazy" src="https://fhits.fr/assets/logo/cmsradio_blue.webp" alt="F. HITS Logo"
114                 data-customizer="logo_light" data-dark-src="https://fhits.fr/assets/logo/cmsradio_white.webp" class="h-10 w-auto brand-logo">
115
116            <div class="leading-tight">
117                <p data-customizer="site_name" class="text-lg font-black tracking-tight js-hide-mobile text-slate-900">F. HITS</p>
118                <p class="hidden text-xs font-semibold sm:block text-slate-500">La puissance de vos hits !</p>
119            </div>
120        </a>
121
122        <nav class="hidden items-center gap-6 text-sm font-black xl:flex text-slate-600">
123                                                <a href="https://fhits.fr"  class="hover:text-principal">
124                        Accueil
125                    </a>
126                                                                <a href="https://fhits.fr/actualites"  class="hover:text-principal">
127                        Actualités
128                    </a>
129                                                                <div class="desktop-dropdown-wrap relative">
130                        <button type="button" class="flex items-center gap-2 hover:text-principal">
131                            La Radio
132                            <i class="fa-solid fa-chevron-down text-[10px]"></i>
133                        </button>
134
135                        <div class="desktop-dropdown absolute left-1/2 top-full w-[560px] -translate-x-1/2 pt-6">
136                            <div class="overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-2xl shadow-slate-300/60">
137                                <div class="grid grid-cols-2 gap-2 p-4">
138                                                                            <a href="https://fhits.fr/programmes"                                            class="group flex items-center gap-4 roun
138ded-2xl p-4 transition hover:bg-soft">
139                                            <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-principal/10 text-principal transition group-hover:bg-principal group-hover:text-white">
140                                                <i class="fa-solid fa-calendar-days"></i>
141                                            </span>
142                                            <span>
143                                                <span class="block text-sm font-black text-dark group-hover:text-principal">Programmes</span>
144                                            </span>
145                                        </a>
146                                                                            <a href="https://player.fhits.fr"  target="_blank" rel="noopener"                                            class="group flex items-center gap-4 rounded-2xl p-4 transition hover:bg-soft">
147                                            <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-principal/10 text-principal transition group-hover:bg-principal group-hover:text-white">
148                                                <i class="fa-solid fa-play"></i>
149                                            </span>
150                                            <span>
151                                                <span class="block text-sm font-black text-dark group-hover:text-principal">Nous écouter</span>
152                                            </span>
153                                        </a>
154                                                                            <a href="https://fhits.fr/podcasts"                                            class="group flex items-center gap-4 roun
154ded-2xl p-4 transition hover:bg-soft">
155                                            <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-principal/10 text-principal transition group-hover:bg-principal group-hover:text-white">
156                                                <i class="fa-solid fa-podcast"></i>
157                                            </span>
158                                            <span>
159                                                <span class="block text-sm font-black text-dark group-hover:text-principal">Nos podcasts</span>
160                                            </span>
161                                        </a>
162                                                                            <a href="https://fhits.fr/partenaires"                                            class="group flex items-center gap-4 rounded-2xl p-4 transition hover:bg-soft">
163                                            <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-principal/10 text-principal transition group-hover:bg-principal group-hover:text-white">
164                                                <i class="fa-solid fa-handshake"></i>
165                                            </span>
166                                            <span>
167                                                <span class="block text-sm font-black text-dark group-hover:text-principal">Nos partenaires</span>
168                                            </span>
169                                        </a>
170                                                                            <a href="https://fhits.fr/regie-pub"                                            class="group flex items-center gap-4 roun
170ded-2xl p-4 transition hover:bg-soft">
171                                            <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-principal/10 text-principal transition group-hover:bg-principal group-hover:text-white">
172                                                <i class="fa-solid fa-bullhorn"></i>
173                                            </span>
174                                            <span>
175                                                <span class="block text-sm font-black text-dark group-hover:text-principal">La régie pub</span>
176                                            </span>
177                                        </a>
178                                                                            <a href="https://fhits.fr/demande-diffusion"                                            class="group flex items-center gap-4 rounded-2xl p-4 transition hover:bg-soft">
179                                            <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-principal/10 text-principal transition group-hover:bg-principal group-hover:text-white">
180                                                <i class="fa-solid fa-paper-plane"></i>
181                                            </span>
182                                            <span>
183                                                <span class="block text-sm font-black text-dark group-hover:text-principal">Demande de diffusion</span>
184                                            </span>
185                                        </a>
186                                                                            <a href="https://fhits.fr/regions"                                            class="group flex items-center gap-4 roun
186ded-2xl p-4 transition hover:bg-soft">
187                                            <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-principal/10 text-principal transition group-hover:bg-principal group-hover:text-white">
188                                                <i class="fa-solid fa-map-location-dot"></i>
189                                            </span>
190                                            <span>
191                                                <span class="block text-sm font-black text-dark group-hover:text-principal">Nos régions</span>
192                                            </span>
193                                        </a>
194                                                                            <a href="https://fhits.fr/c-etait-quoi"                                            class="group flex items-center gap-4 rounded-2xl p-4 transition hover:bg-soft">
195                                            <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-principal/10 text-principal transition group-hover:bg-principal group-hover:text-white">
196                                                <i class="fa-solid fa-link"></i>
197                                            </span>
198                                            <span>
199                                                <span class="block text-sm font-black text-dark group-hover:text-principal">C’était quoi ce titre ?</span>
200                                            </span>
201                                        </a>
202                                                                            <a href="https://fhits.fr/jeux-concours"                                            class="group flex items-center gap-4 roun
202ded-2xl p-4 transition hover:bg-soft">
203                                            <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-principal/10 text-principal transition group-hover:bg-principal group-hover:text-white">
204                                                <i class="fa-solid fa-solid fa-gift"></i>
205                                            </span>
206                                            <span>
207                                                <span class="block text-sm font-black text-dark group-hover:text-principal">Jeux concours</span>
208                                            </span>
209                                        </a>
210                                                                    </div>
211                            </div>
212                        </div>
213                    </div>
214                                                                <a href="https://fhits.fr/recrutements"  class="hover:text-principal">
215                        Recrutement
216                    </a>
217                                                                <a href="https://fhits.fr/equipes"  class="hover:text-principal">
218                        Équipe
219                    </a>
220                                                                <a href="https://fhits.fr/contact"  class="hover:text-principal">
221                        Contact
222                    </a>
223                                    </nav>
224
225        <div class="flex items-center gap-3">
226            <a href="https://player.fhits.fr"
227               target="_blank"
228               class="hidden items-center justify-center rounded-full bg-principal px-5 py-3 text-sm font-black text-white shadow-lg shadow-[#068099]/20 transition hover:bg-subprincipal sm:inline-flex">
229                <i class="fa-solid fa-play mr-2"></i>
230                Écouter
231            </a>
232
233            
234            <button id="menuBtn"
235                    class="flex h-11 w-11 items-center justify-center rounded-full shadow-sm xl:hidden border border-slate-200 bg-white text-dark"
236                    aria-label="Ouvrir le menu">
237                <i id="menuIcon" class="fa-solid fa-bars text-lg"></i>
238            </button>
239        </div>
240    </div>
241</header>
242
243
244<div id="mobileMenu" class="mobile-menu border-t border-slate-100 bg-white/95 backdrop-blur-xl xl:hidden">
245    <nav class="mx-auto max-w-7xl px-5 py-5">
246        <div class="grid gap-2 text-sm font-black text-slate-700">
247
248                                                <a href="https://fhits.fr"  class="rounded-2xl px-4 py-3 hover:bg-soft hover:text-principal">
249                        Accueil
250                    </a>
251                                                                <a href="https://fhits.fr/actualites"  class="rounded-2xl px-4 py-3 hover:bg-soft hover:text-principal">
252                        Actualités
253                    </a>
254                                                                <details class="group rounded-2xl">
255                        <summary class="flex cursor-pointer list-none items-center justify-between rounded-2xl px-4 py-3 hover:bg-soft hover:text-principal">
256                            <span>La Radio</span>
257                            <i class="fa-solid fa-chevron-down text-xs transition group-open:rotate-180"></i>
258                        </summary>
259                        <div class="ml-3 grid gap-2 border-l-2 border-principal/20 pl-3 pt-2">
260                                                            <a href="https://fhits.fr/programmes"                                    class="flex items-center gap-3 rounded-2xl px-4 py-3 text-slate-600 hover:bg-soft hover:text-principal">
261                                    <i class="fa-solid fa-calendar-days w-5 text-principal"></i>
262                                    Programmes
263                                </a>
264                                                            <a href="https://player.fhits.fr"  target="_blank" rel="noopener"                                    class="flex items-center gap-3 rounded-2xl px-4 py-3 text-slate-600 hover:bg-soft hover:text-principal">
265                                    <i class="fa-solid fa-play w-5 text-principal"></i>
266                                    Nous écouter
267                                </a>
268                                                            <a href="https://fhits.fr/podcasts"                                    class="flex items-center gap-3 rounded-2xl px-4 py-3 text-slate-600 hover:bg-soft hover:text-principal">
269                                    <i class="fa-solid fa-podcast w-5 text-principal"></i>
270                                    Nos podcasts
271                                </a>
272                                                            <a href="https://fhits.fr/partenaires"                                    class="flex items-center gap-3 rounded-2xl px-4 py-3 text-slate-600 hover:bg-soft hover:text-principal">
273                                    <i class="fa-solid fa-handshake w-5 text-principal"></i>
274                                    Nos partenaires
275                                </a>
276                                                            <a href="https://fhits.fr/regie-pub"                                    class="flex items-center gap-3 rounded-2xl px-4 py-3 text-slate-600 hover:bg-soft hover:text-principal">
277                                    <i class="fa-solid fa-bullhorn w-5 text-principal"></i>
278                                    La régie pub
279                                </a>
280                                                            <a href="https://fhits.fr/demande-diffusion"                                    class="flex items-center gap-3 rounded-2xl px-4 py-3 text-slate-600 hover:bg-soft hover:text-principal">
281                                    <i class="fa-solid fa-paper-plane w-5 text-principal"></i>
282                                    Demande de diffusion
283                                </a>
284                                                            <a href="https://fhits.fr/regions"                                    class="flex items-center gap-3 rounded-2xl px-4 py-3 text-slate-600 hover:bg-soft hover:text-principal">
285                                    <i class="fa-solid fa-map-location-dot w-5 text-principal"></i>
286                                    Nos régions
287                                </a>
288                                                            <a href="https://fhits.fr/c-etait-quoi"                                    class="flex items-center gap-3 rounded-2xl px-4 py-3 text-slate-600 hover:bg-soft hover:text-principal">
289                                    <i class="fa-solid fa-link w-5 text-principal"></i>
290                                    C’était quoi ce titre ?
291                                </a>
292                                                            <a href="https://fhits.fr/jeux-concours"                                    class="flex items-center gap-3 rounded-2xl px-4 py-3 text-slate-600 hover:bg-soft hover:text-principal">
293                                    <i class="fa-solid fa-solid fa-gift w-5 text-principal"></i>
294                                    Jeux concours
295                                </a>
296                                                    </div>
297                    </details>
298                                                                <a href="https://fhits.fr/recrutements"  class="rounded-2xl px-4 py-3 hover:bg-soft hover:text-principal">
299                        Recrutement
300                    </a>
301                                                                <a href="https://fhits.fr/equipes"  class="rounded-2xl px-4 py-3 hover:bg-soft hover:text-principal">
302                        Équipe
303                    </a>
304                                                                <a href="https://fhits.fr/contact"  class="rounded-2xl px-4 py-3 hover:bg-soft hover:text-principal">
305                        Contact
306                    </a>
307                            
308            <a href="https://player.fhits.fr"
309               target="_blank"
310               class="mt-3 flex items-center justify-center rounded-full bg-principal px-5 py-4 text-white shadow-lg shadow-[#068099]/20">
311                <i class="fa-solid fa-play mr-2"></i>
312                Écouter F. HITS
313            </a>
314        </div>
315    </nav>
316</div>
317
318<script>
319    const menuBtn = document.getElementById('menuBtn');
320    const mobileMenu = document.getElementById('mobileMenu');
321    const menuIcon = document.getElementById('menuIcon');
322    const headerTopBar = document.getElementById('home-page');
323
324    menuBtn?.addEventListener('click', () => {
325        const isOpen = mobileMenu.classList.contains('open');
326
327        if (isOpen) {
328            mobileMenu.classList.remove('open');
329            mobileMenu.style.top = '';
330            document.body.classList.remove('overflow-hidden');
331        } else {
332            mobileMenu.style.top = headerTopBar.getBoundingClientRect().bottom + 'px';
333            mobileMenu.classList.add('open');
334            document.body.classList.add('overflow-hidden');
335        }
336
337        menuIcon.classList.toggle('fa-bars');
338        menuIcon.classList.toggle('fa-xmark');
339    });
340</script>
340
341<div id="content">
342            <main>
343
344        <section class="program-hero-bg">
345            <div class="mx-auto max-w-7xl px-5 py-24 md:py-32">
346
347                <div class="max-w-4xl text-white">
348
349                                            <div class="mb-6 inline-flex items-center gap-3 rounded-full bg-white/10 px-4 py-2 text-sm font-bold backdrop-blur-md">
350                            <span class="h-2.5 w-2.5 rounded-full bg-principal"></span>
351                            Programme antenne
352                        </div>
353                    
354                    <h1 class="text-5xl font-black leading-none tracking-tight md:text-7xl">
355                        La grille F. HITS
356                    </h1>
357
358                    <p class="mt-6 max-w-2xl text-lg leading-relaxed text-white/75">
359                        Retrouvez les émissions, les mixes, les talks, les classements et les grands rendez-vous qui rythment l’antenne toute la semaine.
360                    </p>
361
362                    <div class="mt-9 flex flex-col gap-4 sm:flex-row">
363
364                        <a href="#programme" class="inline-flex items-center justify-center rounded-full bg-principal px-8 py-4 text-sm font-black text-white transition hover:bg-subprincipal">
365                            Voir la grille
366                            <i class="fa-solid fa-arrow-down ml-3"></i>
367                        </a>
368
369                        <a href="https://player.fhits.fr" target="_blank" class="inline-flex items-center justify-center rounded-full bg-white px-8 py-4 text-sm font-black text-dark transition hover:bg-slate-100">
370                            Écouter en direct
371                        </a>
372
373                    </div>
374
375                </div>
376
377            </div>
378        </section>
379
380        <section class="mx-auto max-w-7xl px-5 py-12">
381
382            <div class="grid gap-5 md:grid-cols-4">
383                                    <div class="rounded-[2rem] border border-slate-200 bg-white p-7 shadow-xl shadow-slate-200/70">
384                        <div class="mb-5 flex h-14 w-14 items-center justify-center rounded-2xl bg-principal text-white">
385                            <i class="fa-solid fa-calendar-days"></i>
386                        </div>
387                        <p class="text-4xl font-black tracking-tight">7j</p>
388                        <p class="mt-2 text-sm font-bold text-slate-500">programme semaine</p>
389                    </div>
390                                    <div class="rounded-[2rem] border border-slate-200 bg-white p-7 shadow-xl shadow-slate-200/70">
391                        <div class="mb-5 flex h-14 w-14 items-center justify-center rounded-2xl bg-principal text-white">
392                            <i class="fa-solid fa-microphone-lines"></i>
393                        </div>
394                        <p class="text-4xl font-black tracking-tight">10+</p>
395                        <p class="mt-2 text-sm font-bold text-slate-500">rendez-vous antenne</p>
396                    </div>
397                                    <div class="rounded-[2rem] border border-slate-200 bg-white p-7 shadow-xl shadow-slate-200/70">
398                        <div class="mb-5 flex h-14 w-14 items-center justify-center rounded-2xl bg-principal text-white">
399                            <i class="fa-solid fa-bolt"></i>
400                        </div>
401                        <p class="text-4xl font-black tracking-tight">Live</p>
402                        <p class="mt-2 text-sm font-bold text-slate-500">émissions en direct</p>
403                    </div>
404                                    <div class="rounded-[2rem] border border-slate-200 bg-white p-7 shadow-xl shadow-slate-200/70">
405                        <div class="mb-5 flex h-14 w-14 items-center justify-center rounded-2xl bg-principal text-white">
406                            <i class="fa-solid fa-music"></i>
407                        </div>
408                        <p class="text-4xl font-black tracking-tight">24/7</p>
409                        <p class="mt-2 text-sm font-bold text-slate-500">hits non-stop</p>
410                    </div>
411                            </div>
412
413        </section>
414        <div id="section-programme">
415                </div>
416        <section id="programme" class="mx-auto max-w-7xl px-5 py-20" data-target="1790262000000">
417
418            <div class="mb-12 flex flex-col justify-between gap-4 md:flex-row md:items-end">
419
420                <div>
421                    <p class="mb-3 text-sm font-black uppercase tracking-[0.25em] text-principal">
422                        Grille hebdomadaire
423                    </p>
424
425                    <h2 class="section-title text-dark">
426                        Programme de la semaine
427                    </h2>
428                </div>
429
430                <p class="max-w-md text-sm font-medium leading-relaxed text-slate-500">
431                    Retrouvez les émissions, talks, mixes et rendez-vous antenne diffusés sur F. HITS.
432                </p>
433
434            </div>
435
436            
437            <div class="mb-10 flex gap-3 overflow-x-auto pb-3">
438
439                                    <button type="button" data-day="Lundi" class="day-btn  shrink-0 rounded-full border border-slate-200 bg-white px-6 py-3 text-xs font-black uppercase tracking-widest text-slate-600 transition hover:border-principal hover:text-principal">
440                        Lundi        </button>
441                                    <button type="button" data-day="Mardi" class="day-btn  shrink-0 rounded-full border border-slate-200 bg-white px-6 py-3 text-xs font-black uppercase tracking-widest text-slate-600 transition hover:border-principal hover:text-principal">
442                        Mardi        </button>
443                                    <button type="button" data-day="Mercredi" class="day-btn  shrink-0 rounded-full border border-slate-200 bg-white px-6 py-3 text-xs font-black uppercase tracking-widest text-slate-600 transition hover:border-principal hover:text-principal">
444                        Mercredi        </button>
445                                    <button type="button" data-day="Jeudi" class="day-btn active shrink-0 rounded-full border border-slate-200 bg-white px-6 py-3 text-xs font-black uppercase tracking-widest text-slate-600 transition hover:border-principal hover:text-principal">
446                        Jeudi        </button>
447                                    <button type="button" data-day="Vendredi" class="day-btn  shrink-0 rounded-full border border-slate-200 bg-white px-6 py-3 text-xs font-black uppercase tracking-widest text-slate-600 transition hover:border-principal hover:text-principal">
448                        Vendredi        </button>
449                                    <button type="button" data-day="Samedi" class="day-btn  shrink-0 rounded-full border border-slate-200 bg-white px-6 py-3 text-xs font-black uppercase tracking-widest text-slate-600 transition hover:border-principal hover:text-principal">
450                        Samedi        </button>
451                                    <button type="button" data-day="Dimanche" class="day-btn  shrink-0 rounded-full border border-slate-200 bg-white px-6 py-3 text-xs font-black uppercase tracking-widest text-slate-600 transition hover:border-principal hover:text-principal">
452                        Dimanche        </button>
453                
454            </div>
455
456            
457                    <div id="day-Lundi" class="program-day ">
458
459                        <div class="grid gap-6 lg:grid-cols-2">
460
461                                                            <article class="group overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-xl shadow-slate-200/70 transition hover:-translate-y-1 hover:shadow-2xl">
462
463    <div class="grid md:grid-cols-[230px_1fr]">
464
465        <div class="relative min-h-[260px] overflow-hidden">
466
467            <img loading="lazy" src="https://fhits.fr/assets/images/photo-1516280440614-37939bbacd81.webp" alt="IN DA MIX" class="absolute inset-0 h-full w-full object-cover transition duration-500 group-hover:scale-105">
468
469            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
470
471            <div class="absolute left-5 top-5 rounded-full bg-white/15 px-3 py-1 text-xs font-black uppercase tracking-widest text-white backdrop-blur-md">
472                Mix                    </div>
473
474           
475            <div class="absolute bottom-5 left-5 right-5">
476                <p class="text-3xl font-black text-white">
477                    00h00                    </p>
478                <p class="mt-1 text-xs font-black uppercase tracking-[0.2em] text-white/55">
479                    jusqu’à 01h00                       </p>
480            </div>
481
482        </div>
483
484        <div class="flex flex-col justify-between p-6">
485
486            <div>
487
488                <p class="mb-3 text-xs font-black uppercase tracking-[0.25em] text-principal">
489                    Lundi                      </p>
490
491                <h3 class="text-2xl font-black leading-tight tracking-tight text-dark">
492                    IN DA MIX                      </h3>
493
494                <p class="mt-3 text-sm font-black text-slate-500">
495                    Avec F. HITS                      </p>
496
497                <p class="mt-4 text-sm font-medium leading-relaxed text-slate-500">
498                    IN DA MIX                     </p>
499
500            </div>
501
502            <div class="mt-6 flex flex-col gap-3 sm:flex-row">
503
504                <a href="https://fhits.fr/programmes/in-da-mix" class="inline-flex flex-1 items-center justify-center rounded-full border border-slate-200 px-5 py-3 text-sm font-black text-dark transition hover:border-principal hover:text-principal">
505                    Voir l’émission
506                </a>
507
508                <a href="https://player.fhits.fr" target="_blank" class="inline-flex flex-1 items-center justify-center rounded-full bg-principal px-5 py-3 text-sm font-black text-white transition hover:bg-subprincipal">
509                    <i class="fa-solid fa-play mr-2"></i>
510                    Écouter
511                </a>
512
513            </div>
514
515        </div>
516
517    </div>
518
519</article>
520                                                            <article class="group overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-xl shadow-slate-200/70 transition hover:-translate-y-1 hover:shadow-2xl">
521
522    <div class="grid md:grid-cols-[230px_1fr]">
523
524        <div class="relative min-h-[260px] overflow-hidden">
525
526            <img loading="lazy" src="https://s3.fr-par.scw.cloud/fhits-fr/images/emission-1787563465.webp" alt="Chut... On écoute la télé !" class="absolute inset-0 h-full w-full object-cover transition duration-500 group-hover:scale-105">
527
528            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
529
530            <div class="absolute left-5 top-5 rounded-full bg-white/15 px-3 py-1 text-xs font-black uppercase tracking-widest text-white backdrop-blur-md">
531                Talk                    </div>
532
533           
534            <div class="absolute bottom-5 left-5 right-5">
535                <p class="text-3xl font-black text-white">
536                    13h00                    </p>
537                <p class="mt-1 text-xs font-black uppercase tracking-[0.2em] text-white/55">
538                    jusqu’à 13h10                       </p>
539            </div>
540
541        </div>
542
543        <div class="flex flex-col justify-between p-6">
544
545            <div>
546
547                <p class="mb-3 text-xs font-black uppercase tracking-[0.25em] text-principal">
548                    Lundi                      </p>
549
550                <h3 class="text-2xl font-black leading-tight tracking-tight text-dark">
551                    Chut... On écoute la télé !                      </h3>
552
553                <p class="mt-3 text-sm font-black text-slate-500">
554                    Avec Alain Jeanne                      </p>
555
556                <p class="mt-4 text-sm font-medium leading-relaxed text-slate-500">
557                    Chut... On écoute la télé !                     </p>
558
559            </div>
560
561            <div class="mt-6 flex flex-col gap-3 sm:flex-row">
562
563                <a href="https://fhits.fr/programmes/chut-on-ecoute-la-tele" class="inline-flex flex-1 items-center justify-center rounded-full border border-slate-200 px-5 py-3 text-sm font-black text-dark transition hover:border-principal hover:text-principal">
564                    Voir l’émission
565                </a>
566
567                <a href="https://player.fhits.fr" target="_blank" class="inline-flex flex-1 items-center justify-center rounded-full bg-principal px-5 py-3 text-sm font-black text-white transition hover:bg-subprincipal">
568                    <i class="fa-solid fa-play mr-2"></i>
569                    Écouter
570                </a>
571
572            </div>
573
574        </div>
575
576    </div>
577
578</article>
579                                                            <article class="group overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-xl shadow-slate-200/70 transition hover:-translate-y-1 hover:shadow-2xl">
580
581    <div class="grid md:grid-cols-[230px_1fr]">
582
583        <div class="relative min-h-[260px] overflow-hidden">
584
585            <img loading="lazy" src="https://s3.fr-par.scw.cloud/fhits-fr/images/emission-1787563465.webp" alt="Chut... On écoute la télé !" class="absolute inset-0 h-full w-full object-cover transition duration-500 group-hover:scale-105">
586
587            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
588
589            <div class="absolute left-5 top-5 rounded-full bg-white/15 px-3 py-1 text-xs font-black uppercase tracking-widest text-white backdrop-blur-md">
590                Talk                    </div>
591
592           
593            <div class="absolute bottom-5 left-5 right-5">
594                <p class="text-3xl font-black text-white">
595                    17h00                    </p>
596                <p class="mt-1 text-xs font-black uppercase tracking-[0.2em] text-white/55">
597                    jusqu’à 18h00                       </p>
598            </div>
599
600        </div>
601
602        <div class="flex flex-col justify-between p-6">
603
604            <div>
605
606                <p class="mb-3 text-xs font-black uppercase tracking-[0.25em] text-principal">
607                    Lundi                      </p>
608
609                <h3 class="text-2xl font-black leading-tight tracking-tight text-dark">
610                    Chut... On écoute la télé !                      </h3>
611
612                <p class="mt-3 text-sm font-black text-slate-500">
613                    Avec Alain Jeanne                      </p>
614
615                <p class="mt-4 text-sm font-medium leading-relaxed text-slate-500">
616                    Chut... On écoute la télé !                     </p>
617
618            </div>
619
620            <div class="mt-6 flex flex-col gap-3 sm:flex-row">
621
622                <a href="https://fhits.fr/programmes/chut-on-ecoute-la-tele" class="inline-flex flex-1 items-center justify-center rounded-full border border-slate-200 px-5 py-3 text-sm font-black text-dark transition hover:border-principal hover:text-principal">
623                    Voir l’émission
624                </a>
625
626                <a href="https://player.fhits.fr" target="_blank" class="inline-flex flex-1 items-center justify-center rounded-full bg-principal px-5 py-3 text-sm font-black text-white transition hover:bg-subprincipal">
627                    <i class="fa-solid fa-play mr-2"></i>
628                    Écouter
629                </a>
630
631            </div>
632
633        </div>
634
635    </div>
636
637</article>
638                                                            <article class="group overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-xl shadow-slate-200/70 transition hover:-translate-y-1 hover:shadow-2xl">
639
640    <div class="grid md:grid-cols-[230px_1fr]">
641
642        <div class="relative min-h-[260px] overflow-hidden">
643
644            <img loading="lazy" src="https://s3.fr-par.scw.cloud/fhits-fr/images/emission-1787229783.webp" alt="LA TEAM DE COCO" class="absolute inset-0 h-full w-full object-cover transition duration-500 group-hover:scale-105">
645
646            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
647
648            <div class="absolute left-5 top-5 rounded-full bg-white/15 px-3 py-1 text-xs font-black uppercase tracking-widest text-white backdrop-blur-md">
649                Talk                    </div>
650
651           
652            <div class="absolute bottom-5 left-5 right-5">
653                <p class="text-3xl font-black text-white">
654                    18h00                    </p>
655                <p class="mt-1 text-xs font-black uppercase tracking-[0.2em] text-white/55">
656                    jusqu’à 20h00                       </p>
657            </div>
658
659        </div>
660
661        <div class="flex flex-col justify-between p-6">
662
663            <div>
664
665                <p class="mb-3 text-xs font-black uppercase tracking-[0.25em] text-principal">
666                    Lundi                      </p>
667
668                <h3 class="text-2xl font-black leading-tight tracking-tight text-dark">
669                    LA TEAM DE COCO                      </h3>
670
671                <p class="mt-3 text-sm font-black text-slate-500">
672                    Avec Corentin Guilhem                      </p>
673
674                <p class="mt-4 text-sm font-medium leading-relaxed text-slate-500">
675                    🎙️ LA TEAM COCO - 18H/20H                     </p>
676
677            </div>
678
679            <div class="mt-6 flex flex-col gap-3 sm:flex-row">
680
681                <a href="https://fhits.fr/programmes/la-team-de-coco" class="inline-flex flex-1 items-center justify-center rounded-full border border-slate-200 px-5 py-3 text-sm font-black text-dark transition hover:border-principal hover:text-principal">
682                    Voir l’émission
683                </a>
684
685                <a href="https://player.fhits.fr" target="_blank" class="inline-flex flex-1 items-center justify-center rounded-full bg-principal px-5 py-3 text-sm font-black text-white transition hover:bg-subprincipal">
686                    <i class="fa-solid fa-play mr-2"></i>
687                    Écouter
688                </a>
689
690            </div>
691
692        </div>
693
694    </div>
695
696</article>
697                                                            <article class="group overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-xl shadow-slate-200/70 transition hover:-translate-y-1 hover:shadow-2xl">
698
699    <div class="grid md:grid-cols-[230px_1fr]">
700
701        <div class="relative min-h-[260px] overflow-hidden">
702
703            <img loading="lazy" src="https://s3.fr-par.scw.cloud/fhits-fr/images/emission-1787229811.webp" alt="LA BANDE A MEHDI" class="absolute inset-0 h-full w-full object-cover transition duration-500 group-hover:scale-105">
704
705            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
706
707            <div class="absolute left-5 top-5 rounded-full bg-white/15 px-3 py-1 text-xs font-black uppercase tracking-widest text-white backdrop-blur-md">
708                Talk                    </div>
709
710           
711            <div class="absolute bottom-5 left-5 right-5">
712                <p class="text-3xl font-black text-white">
713                    21h00                    </p>
714                <p class="mt-1 text-xs font-black uppercase tracking-[0.2em] text-white/55">
715                    jusqu’à 23h00                       </p>
716            </div>
717
718        </div>
719
720        <div class="flex flex-col justify-between p-6">
721
722            <div>
723
724                <p class="mb-3 text-xs font-black uppercase tracking-[0.25em] text-principal">
725                    Lundi                      </p>
726
727                <h3 class="text-2xl font-black leading-tight tracking-tight text-dark">
728                    LA BANDE A MEHDI                      </h3>
729
730                <p class="mt-3 text-sm font-black text-slate-500">
731                    Avec Mehdi Zoghbi                      </p>
732
733                <p class="mt-4 text-sm font-medium leading-relaxed text-slate-500">
734                    LA BANDE A MEHDI                     </p>
735
736            </div>
737
738            <div class="mt-6 flex flex-col gap-3 sm:flex-row">
739
740                <a href="https://fhits.fr/programmes/la-bande-a-mehdi" class="inline-flex flex-1 items-center justify-center rounded-full border border-slate-200 px-5 py-3 text-sm font-black text-dark transition hover:border-principal hover:text-principal">
741                    Voir l’émission
742                </a>
743
744                <a href="https://player.fhits.fr" target="_blank" class="inline-flex flex-1 items-center justify-center rounded-full bg-principal px-5 py-3 text-sm font-black text-white transition hover:bg-subprincipal">
745                    <i class="fa-solid fa-play mr-2"></i>
746                    Écouter
747                </a>
748
749            </div>
750
751        </div>
752
753    </div>
754
755</article>
756                            
757                        </div>
758
759                    </div>
760
761
762            
763                    <div id="day-Mardi" class="program-day ">
764
765                        <div class="grid gap-6 lg:grid-cols-2">
766
767                                                            <article class="group overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-xl shadow-slate-200/70 transition hover:-translate-y-1 hover:shadow-2xl">
768
769    <div class="grid md:grid-cols-[230px_1fr]">
770
771        <div class="relative min-h-[260px] overflow-hidden">
772
773            <img loading="lazy" src="https://fhits.fr/assets/images/photo-1516280440614-37939bbacd81.webp" alt="CLUBBING MIX" class="absolute inset-0 h-full w-full object-cover transition duration-500 group-hover:scale-105">
774
775            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
776
777            <div class="absolute left-5 top-5 rounded-full bg-white/15 px-3 py-1 text-xs font-black uppercase tracking-widest text-white backdrop-blur-md">
778                Talk                    </div>
779
780           
781            <div class="absolute bottom-5 left-5 right-5">
782                <p class="text-3xl font-black text-white">
783                    00h00                    </p>
784                <p class="mt-1 text-xs font-black uppercase tracking-[0.2em] text-white/55">
785                    jusqu’à 01h00                       </p>
786            </div>
787
788        </div>
789
790        <div class="flex flex-col justify-between p-6">
791
792            <div>
793
794                <p class="mb-3 text-xs font-black uppercase tracking-[0.25em] text-principal">
795                    Mardi                      </p>
796
797                <h3 class="text-2xl font-black leading-tight tracking-tight text-dark">
798                    CLUBBING MIX                      </h3>
799
800                <p class="mt-3 text-sm font-black text-slate-500">
801                    Avec F. HITS                      </p>
802
803                <p class="mt-4 text-sm font-medium leading-relaxed text-slate-500">
804                    CLUBBING MIX                     </p>
805
806            </div>
807
808            <div class="mt-6 flex flex-col gap-3 sm:flex-row">
809
810                <a href="https://fhits.fr/programmes/clubbing-mix" class="inline-flex flex-1 items-center justify-center rounded-full border border-slate-200 px-5 py-3 text-sm font-black text-dark transition hover:border-principal hover:text-principal">
811                    Voir l’émission
812                </a>
813
814                <a href="https://player.fhits.fr" target="_blank" class="inline-flex flex-1 items-center justify-center rounded-full bg-principal px-5 py-3 text-sm font-black text-white transition hover:bg-subprincipal">
815                    <i class="fa-solid fa-play mr-2"></i>
816                    Écouter
817                </a>
818
819            </div>
820
821        </div>
822
823    </div>
824
825</article>
826                                                            <article class="group overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-xl shadow-slate-200/70 transition hover:-translate-y-1 hover:shadow-2xl">
827
828    <div class="grid md:grid-cols-[230px_1fr]">
829
830        <div class="relative min-h-[260px] overflow-hidden">
831
832            <img loading="lazy" src="https://s3.fr-par.scw.cloud/fhits-fr/images/emission-1787563465.webp" alt="Chut... On écoute la télé !" class="absolute inset-0 h-full w-full object-cover transition duration-500 group-hover:scale-105">
833
834            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
835
836            <div class="absolute left-5 top-5 rounded-full bg-white/15 px-3 py-1 text-xs font-black uppercase tracking-widest text-white backdrop-blur-md">
837                Talk                    </div>
838
839           
840            <div class="absolute bottom-5 left-5 right-5">
841                <p class="text-3xl font-black text-white">
842                    13h00                    </p>
843                <p class="mt-1 text-xs font-black uppercase tracking-[0.2em] text-white/55">
844                    jusqu’à 13h10                       </p>
845            </div>
846
847        </div>
848
849        <div class="flex flex-col justify-between p-6">
850
851            <div>
852
853                <p class="mb-3 text-xs font-black uppercase tracking-[0.25em] text-principal">
854                    Mardi                      </p>
855
856                <h3 class="text-2xl font-black leading-tight tracking-tight text-dark">
857                    Chut... On écoute la télé !                      </h3>
858
859                <p class="mt-3 text-sm font-black text-slate-500">
860                    Avec Alain Jeanne                      </p>
861
862                <p class="mt-4 text-sm font-medium leading-relaxed text-slate-500">
863                    Chut... On écoute la télé !                     </p>
864
865            </div>
866
867            <div class="mt-6 flex flex-col gap-3 sm:flex-row">
868
869                <a href="https://fhits.fr/programmes/chut-on-ecoute-la-tele" class="inline-flex flex-1 items-center justify-center rounded-full border border-slate-200 px-5 py-3 text-sm font-black text-dark transition hover:border-principal hover:text-principal">
870                    Voir l’émission
871                </a>
872
873                <a href="https://player.fhits.fr" target="_blank" class="inline-flex flex-1 items-center justify-center rounded-full bg-principal px-5 py-3 text-sm font-black text-white transition hover:bg-subprincipal">
874                    <i class="fa-solid fa-play mr-2"></i>
875                    Écouter
876                </a>
877
878            </div>
879
880        </div>
881
882    </div>
883
884</article>
885                                                            <article class="group overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-xl shadow-slate-200/70 transition hover:-translate-y-1 hover:shadow-2xl">
886
887    <div class="grid md:grid-cols-[230px_1fr]">
888
889        <div class="relative min-h-[260px] overflow-hidden">
890
891            <img loading="lazy" src="https://s3.fr-par.scw.cloud/fhits-fr/images/emission-1787563465.webp" alt="Chut... On écoute la télé !" class="absolute inset-0 h-full w-full object-cover transition duration-500 group-hover:scale-105">
892
893            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
894
895            <div class="absolute left-5 top-5 rounded-full bg-white/15 px-3 py-1 text-xs font-black uppercase tracking-widest text-white backdrop-blur-md">
896                Talk                    </div>
897
898           
899            <div class="absolute bottom-5 left-5 right-5">
900                <p class="text-3xl font-black text-white">
901                    17h00                    </p>
902                <p class="mt-1 text-xs font-black uppercase tracking-[0.2em] text-white/55">
903                    jusqu’à 17h10                       </p>
904            </div>
905
906        </div>
907
908        <div class="flex flex-col justify-between p-6">
909
910            <div>
911
912                <p class="mb-3 text-xs font-black uppercase tracking-[0.25em] text-principal">
913                    Mardi                      </p>
914
915                <h3 class="text-2xl font-black leading-tight tracking-tight text-dark">
916                    Chut... On écoute la télé !                      </h3>
917
918                <p class="mt-3 text-sm font-black text-slate-500">
919                    Avec Alain Jeanne                      </p>
920
921                <p class="mt-4 text-sm font-medium leading-relaxed text-slate-500">
922                    Chut... On écoute la télé !                     </p>
923
924            </div>
925
926            <div class="mt-6 flex flex-col gap-3 sm:flex-row">
927
928                <a href="https://fhits.fr/programmes/chut-on-ecoute-la-tele" class="inline-flex flex-1 items-center justify-center rounded-full border border-slate-200 px-5 py-3 text-sm font-black text-dark transition hover:border-principal hover:text-principal">
929                    Voir l’émission
930                </a>
931
932                <a href="https://player.fhits.fr" target="_blank" class="inline-flex flex-1 items-center justify-center rounded-full bg-principal px-5 py-3 text-sm font-black text-white transition hover:bg-subprincipal">
933                    <i class="fa-solid fa-play mr-2"></i>
934                    Écouter
935                </a>
936
937            </div>
938
939        </div>
940
941    </div>
942
943</article>
944                                                            <article class="group overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-xl shadow-slate-200/70 transition hover:-translate-y-1 hover:shadow-2xl">
945
946    <div class="grid md:grid-cols-[230px_1fr]">
947
948        <div class="relative min-h-[260px] overflow-hidden">
949
950            <img loading="lazy" src="https://s3.fr-par.scw.cloud/fhits-fr/images/emission-1787229783.webp" alt="LA TEAM DE COCO" class="absolute inset-0 h-full w-full object-cover transition duration-500 group-hover:scale-105">
951
952            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
953
954            <div class="absolute left-5 top-5 rounded-full bg-white/15 px-3 py-1 text-xs font-black uppercase tracking-widest text-white backdrop-blur-md">
955                Talk                    </div>
956
957           
958            <div class="absolute bottom-5 left-5 right-5">
959                <p class="text-3xl font-black text-white">
960                    18h00                    </p>
961                <p class="mt-1 text-xs font-black uppercase tracking-[0.2em] text-white/55">
962                    jusqu’à 20h00                       </p>
963            </div>
964
965        </div>
966
967        <div class="flex flex-col justify-between p-6">
968
969            <div>
970
971                <p class="mb-3 text-xs font-black uppercase tracking-[0.25em] text-principal">
972                    Mardi                      </p>
973
974                <h3 class="text-2xl font-black leading-tight tracking-tight text-dark">
975                    LA TEAM DE COCO                      </h3>
976
977                <p class="mt-3 text-sm font-black text-slate-500">
978                    Avec Corentin Guilhem                      </p>
979
980                <p class="mt-4 text-sm font-medium leading-relaxed text-slate-500">
981                    🎙️ LA TEAM COCO - 18H/20H                     </p>
982
983            </div>
984
985            <div class="mt-6 flex flex-col gap-3 sm:flex-row">
986
987                <a href="https://fhits.fr/programmes/la-team-de-coco" class="inline-flex flex-1 items-center justify-center rounded-full border border-slate-200 px-5 py-3 text-sm font-black text-dark transition hover:border-principal hover:text-principal">
988                    Voir l’émission
989                </a>
990
991                <a href="https://player.fhits.fr" target="_blank" class="inline-flex flex-1 items-center justify-center rounded-full bg-principal px-5 py-3 text-sm font-black text-white transition hover:bg-subprincipal">
992                    <i class="fa-solid fa-play mr-2"></i>
993                    Écouter
994                </a>
995
996            </div>
997
998        </div>
999
1000    </div>
1001
1002</article>
1003                            
1004                        </div>
1005
1006                    </div>
1007
1008
1009            
1010                    <div id="day-Mercredi" class="program-day ">
1011
1012                        <div class="grid gap-6 lg:grid-cols-2">
1013
1014                                                            <article class="group overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-xl shadow-slate-200/70 transition hover:-translate-y-1 hover:shadow-2xl">
1015
1016    <div class="grid md:grid-cols-[230px_1fr]">
1017
1018        <div class="relative min-h-[260px] overflow-hidden">
1019
1020            <img loading="lazy" src="https://fhits.fr/assets/images/photo-1516280440614-37939bbacd81.webp" alt="THE CONTROVERSIA RADIO SHOW" class="absolute inset-0 h-full w-full object-cover transition duration-500 group-hover:scale-105">
1021
1022            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
1023
1024            <div class="absolute left-5 top-5 rounded-full bg-white/15 px-3 py-1 text-xs font-black uppercase tracking-widest text-white backdrop-blur-md">
1025                Mix                    </div>
1026
1027           
1028            <div class="absolute bottom-5 left-5 right-5">
1029                <p class="text-3xl font-black text-white">
1030                    00h00                    </p>
1031                <p class="mt-1 text-xs font-black uppercase tracking-[0.2em] text-white/55">
1032                    jusqu’à 01h00                       </p>
1033            </div>
1034
1035        </div>
1036
1037        <div class="flex flex-col justify-between p-6">
1038
1039            <div>
1040
1041                <p class="mb-3 text-xs font-black uppercase tracking-[0.25em] text-principal">
1042                    Mercredi                      </p>
1043
1044                <h3 class="text-2xl font-black leading-tight tracking-tight text-dark">
1045                    THE CONTROVERSIA RADIO SHOW                      </h3>
1046
1047                <p class="mt-3 text-sm font-black text-slate-500">
1048                    Avec F. HITS                      </p>
1049
1050                <p class="mt-4 text-sm font-medium leading-relaxed text-slate-500">
1051                    THE CONTROVERSIA RADIO SHOW                     </p>
1052
1053            </div>
1054
1055            <div class="mt-6 flex flex-col gap-3 sm:flex-row">
1056
1057                <a href="https://fhits.fr/programmes/the-controversia-radio-show" class="inline-flex flex-1 items-center justify-center rounded-full border border-slate-200 px-5 py-3 text-sm font-black text-dark transition hover:border-principal hover:text-principal">
1058                    Voir l’émission
1059                </a>
1060
1061                <a href="https://player.fhits.fr" target="_blank" class="inline-flex flex-1 items-center justify-center rounded-full bg-principal px-5 py-3 text-sm font-black text-white transition hover:bg-subprincipal">
1062                    <i class="fa-solid fa-play mr-2"></i>
1063                    Écouter
1064                </a>
1065
1066            </div>
1067
1068        </div>
1069
1070    </div>
1071
1072</article>
1073                                                            <article class="group overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-xl shadow-slate-200/70 transition hover:-translate-y-1 hover:shadow-2xl">
1074
1075    <div class="grid md:grid-cols-[230px_1fr]">
1076
1077        <div class="relative min-h-[260px] overflow-hidden">
1078
1079            <img loading="lazy" src="https://s3.fr-par.scw.cloud/fhits-fr/images/emission-1787563465.webp" alt="Chut... On écoute la télé !" class="absolute inset-0 h-full w-full object-cover transition duration-500 group-hover:scale-105">
1080
1081            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
1082
1083            <div class="absolute left-5 top-5 rounded-full bg-white/15 px-3 py-1 text-xs font-black uppercase tracking-widest text-white backdrop-blur-md">
1084                Talk                    </div>
1085
1086           
1087            <div class="absolute bottom-5 left-5 right-5">
1088                <p class="text-3xl font-black text-white">
1089                    13h00                    </p>
1090                <p class="mt-1 text-xs font-black uppercase tracking-[0.2em] text-white/55">
1091                    jusqu’à 13h10                       </p>
1092            </div>
1093
1094        </div>
1095
1096        <div class="flex flex-col justify-between p-6">
1097
1098            <div>
1099
1100                <p class="mb-3 text-xs font-black uppercase tracking-[0.25em] text-principal">
1101                    Mercredi                      </p>
1102
1103                <h3 class="text-2xl font-black leading-tight tracking-tight text-dark">
1104                    Chut... On écoute la télé !                      </h3>
1105
1106                <p class="mt-3 text-sm font-black text-slate-500">
1107                    Avec Alain Jeanne                      </p>
1108
1109                <p class="mt-4 text-sm font-medium leading-relaxed text-slate-500">
1110                    Chut... On écoute la télé !                     </p>
1111
1112            </div>
1113
1114            <div class="mt-6 flex flex-col gap-3 sm:flex-row">
1115
1116                <a href="https://fhits.fr/programmes/chut-on-ecoute-la-tele" class="inline-flex flex-1 items-center justify-center rounded-full border border-slate-200 px-5 py-3 text-sm font-black text-dark transition hover:border-principal hover:text-principal">
1117                    Voir l’émission
1118                </a>
1119
1120                <a href="https://player.fhits.fr" target="_blank" class="inline-flex flex-1 items-center justify-center rounded-full bg-principal px-5 py-3 text-sm font-black text-white transition hover:bg-subprincipal">
1121                    <i class="fa-solid fa-play mr-2"></i>
1122                    Écouter
1123                </a>
1124
1125            </div>
1126
1127        </div>
1128
1129    </div>
1130
1131</article>
1132                                                            <article class="group overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-xl shadow-slate-200/70 transition hover:-translate-y-1 hover:shadow-2xl">
1133
1134    <div class="grid md:grid-cols-[230px_1fr]">
1135
1136        <div class="relative min-h-[260px] overflow-hidden">
1137
1138            <img loading="lazy" src="https://s3.fr-par.scw.cloud/fhits-fr/images/emission-1787563465.webp" alt="Chut... On écoute la télé !" class="absolute inset-0 h-full w-full object-cover transition duration-500 group-hover:scale-105">
1139
1140            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
1141
1142            <div class="absolute left-5 top-5 rounded-full bg-white/15 px-3 py-1 text-xs font-black uppercase tracking-widest text-white backdrop-blur-md">
1143                Talk                    </div>
1144
1145           
1146            <div class="absolute bottom-5 left-5 right-5">
1147                <p class="text-3xl font-black text-white">
1148                    17h00                    </p>
1149                <p class="mt-1 text-xs font-black uppercase tracking-[0.2em] text-white/55">
1150                    jusqu’à 17h10                       </p>
1151            </div>
1152
1153        </div>
1154
1155        <div class="flex flex-col justify-between p-6">
1156
1157            <div>
1158
1159                <p class="mb-3 text-xs font-black uppercase tracking-[0.25em] text-principal">
1160                    Mercredi                      </p>
1161
1162                <h3 class="text-2xl font-black leading-tight tracking-tight text-dark">
1163                    Chut... On écoute la télé !                      </h3>
1164
1165                <p class="mt-3 text-sm font-black text-slate-500">
1166                    Avec Alain Jeanne                      </p>
1167
1168                <p class="mt-4 text-sm font-medium leading-relaxed text-slate-500">
1169                    Chut... On écoute la télé !                     </p>
1170
1171            </div>
1172
1173            <div class="mt-6 flex flex-col gap-3 sm:flex-row">
1174
1175                <a href="https://fhits.fr/programmes/chut-on-ecoute-la-tele" class="inline-flex flex-1 items-center justify-center rounded-full border border-slate-200 px-5 py-3 text-sm font-black text-dark transition hover:border-principal hover:text-principal">
1176                    Voir l’émission
1177                </a>
1178
1179                <a href="https://player.fhits.fr" target="_blank" class="inline-flex flex-1 items-center justify-center rounded-full bg-principal px-5 py-3 text-sm font-black text-white transition hover:bg-subprincipal">
1180                    <i class="fa-solid fa-play mr-2"></i>
1181                    Écouter
1182                </a>
1183
1184            </div>
1185
1186        </div>
1187
1188    </div>
1189
1190</article>
1191                                                            <article class="group overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-xl shadow-slate-200/70 transition hover:-translate-y-1 hover:shadow-2xl">
1192
1193    <div class="grid md:grid-cols-[230px_1fr]">
1194
1195        <div class="relative min-h-[260px] overflow-hidden">
1196
1197            <img loading="lazy" src="https://s3.fr-par.scw.cloud/fhits-fr/images/emission-1787229783.webp" alt="LA TEAM DE COCO" class="absolute inset-0 h-full w-full object-cover transition duration-500 group-hover:scale-105">
1198
1199            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
1200
1201            <div class="absolute left-5 top-5 rounded-full bg-white/15 px-3 py-1 text-xs font-black uppercase tracking-widest text-white backdrop-blur-md">
1202                Talk                    </div>
1203
1204           
1205            <div class="absolute bottom-5 left-5 right-5">
1206                <p class="text-3xl font-black text-white">
1207                    18h00                    </p>
1208                <p class="mt-1 text-xs font-black uppercase tracking-[0.2em] text-white/55">
1209                    jusqu’à 20h00                       </p>
1210            </div>
1211
1212        </div>
1213
1214        <div class="flex flex-col justify-between p-6">
1215
1216            <div>
1217
1218                <p class="mb-3 text-xs font-black uppercase tracking-[0.25em] text-principal">
1219                    Mercredi                      </p>
1220
1221                <h3 class="text-2xl font-black leading-tight tracking-tight text-dark">
1222                    LA TEAM DE COCO                      </h3>
1223
1224                <p class="mt-3 text-sm font-black text-slate-500">
1225                    Avec Corentin Guilhem                      </p>
1226
1227                <p class="mt-4 text-sm font-medium leading-relaxed text-slate-500">
1228                    🎙️ LA TEAM COCO - 18H/20H                     </p>
1229
1230            </div>
1231
1232            <div class="mt-6 flex flex-col gap-3 sm:flex-row">
1233
1234                <a href="https://fhits.fr/programmes/la-team-de-coco" class="inline-flex flex-1 items-center justify-center rounded-full border border-slate-200 px-5 py-3 text-sm font-black text-dark transition hover:border-principal hover:text-principal">
1235                    Voir l’émission
1236                </a>
1237
1238                <a href="https://player.fhits.fr" target="_blank" class="inline-flex flex-1 items-center justify-center rounded-full bg-principal px-5 py-3 text-sm font-black text-white transition hover:bg-subprincipal">
1239                    <i class="fa-solid fa-play mr-2"></i>
1240                    Écouter
1241                </a>
1242
1243            </div>
1244
1245        </div>
1246
1247    </div>
1248
1249</article>
1250                                                            <article class="group overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-xl shadow-slate-200/70 transition hover:-translate-y-1 hover:shadow-2xl">
1251
1252    <div class="grid md:grid-cols-[230px_1fr]">
1253
1254        <div class="relative min-h-[260px] overflow-hidden">
1255
1256            <img loading="lazy" src="https://fhits.fr/assets/images/photo-1516280440614-37939bbacd81.webp" alt="REZO DE LA SEMAINE" class="absolute inset-0 h-full w-full object-cover transition duration-500 group-hover:scale-105">
1257
1258            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
1259
1260            <div class="absolute left-5 top-5 rounded-full bg-white/15 px-3 py-1 text-xs font-black uppercase tracking-widest text-white backdrop-blur-md">
1261                Talk                    </div>
1262
1263           
1264            <div class="absolute bottom-5 left-5 right-5">
1265                <p class="text-3xl font-black text-white">
1266                    20h00                    </p>
1267                <p class="mt-1 text-xs font-black uppercase tracking-[0.2em] text-white/55">
1268                    jusqu’à 21h00                       </p>
1269            </div>
1270
1271        </div>
1272
1273        <div class="flex flex-col justify-between p-6">
1274
1275            <div>
1276
1277                <p class="mb-3 text-xs font-black uppercase tracking-[0.25em] text-principal">
1278                    Mercredi                      </p>
1279
1280                <h3 class="text-2xl font-black leading-tight tracking-tight text-dark">
1281                    REZO DE LA SEMAINE                      </h3>
1282
1283                <p class="mt-3 text-sm font-black text-slate-500">
1284                    Avec Léo Labaume                      </p>
1285
1286                <p class="mt-4 text-sm font-medium leading-relaxed text-slate-500">
1287                    REZO DE LA SEMAINE - 2x par mois                     </p>
1288
1289            </div>
1290
1291            <div class="mt-6 flex flex-col gap-3 sm:flex-row">
1292
1293                <a href="https://fhits.fr/programmes/rezo-de-la-semaine" class="inline-flex flex-1 items-center justify-center rounded-full border border-slate-200 px-5 py-3 text-sm font-black text-dark transition hover:border-principal hover:text-principal">
1294                    Voir l’émission
1295                </a>
1296
1297                <a href="https://player.fhits.fr" target="_blank" class="inline-flex flex-1 items-center justify-center rounded-full bg-principal px-5 py-3 text-sm font-black text-white transition hover:bg-subprincipal">
1298                    <i class="fa-solid fa-play mr-2"></i>
1299                    Écouter
1300                </a>
1301
1302            </div>
1303
1304        </div>
1305
1306    </div>
1307
1308</article>
1309                                                            <article class="group overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-xl shadow-slate-200/70 transition hover:-translate-y-1 hover:shadow-2xl">
1310
1311    <div class="grid md:grid-cols-[230px_1fr]">
1312
1313        <div class="relative min-h-[260px] overflow-hidden">
1314
1315            <img loading="lazy" src="https://s3.fr-par.scw.cloud/fhits-fr/images/emission-1787229843.webp" alt="LE MUSIC SHOW" class="absolute inset-0 h-full w-full object-cover transition duration-500 group-hover:scale-105">
1316
1317            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
1318
1319            <div class="absolute left-5 top-5 rounded-full bg-white/15 px-3 py-1 text-xs font-black uppercase tracking-widest text-white backdrop-blur-md">
1320                Talk                    </div>
1321
1322           
1323            <div class="absolute bottom-5 left-5 right-5">
1324                <p class="text-3xl font-black text-white">
1325                    21h00                    </p>
1326                <p class="mt-1 text-xs font-black uppercase tracking-[0.2em] text-white/55">
1327                    jusqu’à 22h00                       </p>
1328            </div>
1329
1330        </div>
1331
1332        <div class="flex flex-col justify-between p-6">
1333
1334            <div>
1335
1336                <p class="mb-3 text-xs font-black uppercase tracking-[0.25em] text-principal">
1337                    Mercredi                      </p>
1338
1339                <h3 class="text-2xl font-black leading-tight tracking-tight text-dark">
1340                    LE MUSIC SHOW                      </h3>
1341
1342                <p class="mt-3 text-sm font-black text-slate-500">
1343                    Avec Alexy Ordas                      </p>
1344
1345                <p class="mt-4 text-sm font-medium leading-relaxed text-slate-500">
1346                    LE MUSIC SHOW                     </p>
1347
1348            </div>
1349
1350            <div class="mt-6 flex flex-col gap-3 sm:flex-row">
1351
1352                <a href="https://fhits.fr/programmes/le-music-show" class="inline-flex flex-1 items-center justify-center rounded-full border border-slate-200 px-5 py-3 text-sm font-black text-dark transition hover:border-principal hover:text-principal">
1353                    Voir l’émission
1354                </a>
1355
1356                <a href="https://player.fhits.fr" target="_blank" class="inline-flex flex-1 items-center justify-center rounded-full bg-principal px-5 py-3 text-sm font-black text-white transition hover:bg-subprincipal">
1357                    <i class="fa-solid fa-play mr-2"></i>
1358                    Écouter
1359                </a>
1360
1361            </div>
1362
1363        </div>
1364
1365    </div>
1366
1367</article>
1368                            
1369                        </div>
1370
1371                    </div>
1372
1373
1374            
1375                    <div id="day-Jeudi" class="program-day active">
1376
1377                        <div class="grid gap-6 lg:grid-cols-2">
1378
1379                                                            <article class="group overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-xl shadow-slate-200/70 transition hover:-translate-y-1 hover:shadow-2xl">
1380
1381    <div class="grid md:grid-cols-[230px_1fr]">
1382
1383        <div class="relative min-h-[260px] overflow-hidden">
1384
1385            <img loading="lazy" src="https://fhits.fr/assets/images/photo-1516280440614-37939bbacd81.webp" alt="DANCE SENSATION" class="absolute inset-0 h-full w-full object-cover transition duration-500 group-hover:scale-105">
1386
1387            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
1388
1389            <div class="absolute left-5 top-5 rounded-full bg-white/15 px-3 py-1 text-xs font-black uppercase tracking-widest text-white backdrop-blur-md">
1390                Mix                    </div>
1391
1392           
1393            <div class="absolute bottom-5 left-5 right-5">
1394                <p class="text-3xl font-black text-white">
1395                    00h00                    </p>
1396                <p class="mt-1 text-xs font-black uppercase tracking-[0.2em] text-white/55">
1397                    jusqu’à 01h00                       </p>
1398            </div>
1399
1400        </div>
1401
1402        <div class="flex flex-col justify-between p-6">
1403
1404            <div>
1405
1406                <p class="mb-3 text-xs font-black uppercase tracking-[0.25em] text-principal">
1407                    Jeudi                      </p>
1408
1409                <h3 class="text-2xl font-black leading-tight tracking-tight text-dark">
1410                    DANCE SENSATION                      </h3>
1411
1412                <p class="mt-3 text-sm font-black text-slate-500">
1413                    Avec F. HITS                      </p>
1414
1415                <p class="mt-4 text-sm font-medium leading-relaxed text-slate-500">
1416                    DANCE SENSATION                     </p>
1417
1418            </div>
1419
1420            <div class="mt-6 flex flex-col gap-3 sm:flex-row">
1421
1422                <a href="https://fhits.fr/programmes/dance-sensation" class="inline-flex flex-1 items-center justify-center rounded-full border border-slate-200 px-5 py-3 text-sm font-black text-dark transition hover:border-principal hover:text-principal">
1423                    Voir l’émission
1424                </a>
1425
1426                <a href="https://player.fhits.fr" target="_blank" class="inline-flex flex-1 items-center justify-center rounded-full bg-principal px-5 py-3 text-sm font-black text-white transition hover:bg-subprincipal">
1427                    <i class="fa-solid fa-play mr-2"></i>
1428                    Écouter
1429                </a>
1430
1431            </div>
1432
1433        </div>
1434
1435    </div>
1436
1437</article>
1438                                                            <article class="group overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-xl shadow-slate-200/70 transition hover:-translate-y-1 hover:shadow-2xl">
1439
1440    <div class="grid md:grid-cols-[230px_1fr]">
1441
1442        <div class="relative min-h-[260px] overflow-hidden">
1443
1444            <img loading="lazy" src="https://s3.fr-par.scw.cloud/fhits-fr/images/emission-1787563465.webp" alt="Chut... On écoute la télé !" class="absolute inset-0 h-full w-full object-cover transition duration-500 group-hover:scale-105">
1445
1446            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
1447
1448            <div class="absolute left-5 top-5 rounded-full bg-white/15 px-3 py-1 text-xs font-black uppercase tracking-widest text-white backdrop-blur-md">
1449                Talk                    </div>
1450
1451           
1452            <div class="absolute bottom-5 left-5 right-5">
1453                <p class="text-3xl font-black text-white">
1454                    13h00                    </p>
1455                <p class="mt-1 text-xs font-black uppercase tracking-[0.2em] text-white/55">
1456                    jusqu’à 13h10                       </p>
1457            </div>
1458
1459        </div>
1460
1461        <div class="flex flex-col justify-between p-6">
1462
1463            <div>
1464
1465                <p class="mb-3 text-xs font-black uppercase tracking-[0.25em] text-principal">
1466                    Jeudi                      </p>
1467
1468                <h3 class="text-2xl font-black leading-tight tracking-tight text-dark">
1469                    Chut... On écoute la télé !                      </h3>
1470
1471                <p class="mt-3 text-sm font-black text-slate-500">
1472                    Avec Alain Jeanne                      </p>
1473
1474                <p class="mt-4 text-sm font-medium leading-relaxed text-slate-500">
1475                    Chut... On écoute la télé !                     </p>
1476
1477            </div>
1478
1479            <div class="mt-6 flex flex-col gap-3 sm:flex-row">
1480
1481                <a href="https://fhits.fr/programmes/chut-on-ecoute-la-tele" class="inline-flex flex-1 items-center justify-center rounded-full border border-slate-200 px-5 py-3 text-sm font-black text-dark transition hover:border-principal hover:text-principal">
1482                    Voir l’émission
1483                </a>
1484
1485                <a href="https://player.fhits.fr" target="_blank" class="inline-flex flex-1 items-center justify-center rounded-full bg-principal px-5 py-3 text-sm font-black text-white transition hover:bg-subprincipal">
1486                    <i class="fa-solid fa-play mr-2"></i>
1487                    Écouter
1488                </a>
1489
1490            </div>
1491
1492        </div>
1493
1494    </div>
1495
1496</article>
1497                                                            <article class="group overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-xl shadow-slate-200/70 transition hover:-translate-y-1 hover:shadow-2xl">
1498
1499    <div class="grid md:grid-cols-[230px_1fr]">
1500
1501        <div class="relative min-h-[260px] overflow-hidden">
1502
1503            <img loading="lazy" src="https://s3.fr-par.scw.cloud/fhits-fr/images/emission-1787563465.webp" alt="Chut... On écoute la télé !" class="absolute inset-0 h-full w-full object-cover transition duration-500 group-hover:scale-105">
1504
1505            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
1506
1507            <div class="absolute left-5 top-5 rounded-full bg-white/15 px-3 py-1 text-xs font-black uppercase tracking-widest text-white backdrop-blur-md">
1508                Talk                    </div>
1509
1510           
1511            <div class="absolute bottom-5 left-5 right-5">
1512                <p class="text-3xl font-black text-white">
1513                    17h00                    </p>
1514                <p class="mt-1 text-xs font-black uppercase tracking-[0.2em] text-white/55">
1515                    jusqu’à 17h10                       </p>
1516            </div>
1517
1518        </div>
1519
1520        <div class="flex flex-col justify-between p-6">
1521
1522            <div>
1523
1524                <p class="mb-3 text-xs font-black uppercase tracking-[0.25em] text-principal">
1525                    Jeudi                      </p>
1526
1527                <h3 class="text-2xl font-black leading-tight tracking-tight text-dark">
1528                    Chut... On écoute la télé !                      </h3>
1529
1530                <p class="mt-3 text-sm font-black text-slate-500">
1531                    Avec Alain Jeanne                      </p>
1532
1533                <p class="mt-4 text-sm font-medium leading-relaxed text-slate-500">
1534                    Chut... On écoute la télé !                     </p>
1535
1536            </div>
1537
1538            <div class="mt-6 flex flex-col gap-3 sm:flex-row">
1539
1540                <a href="https://fhits.fr/programmes/chut-on-ecoute-la-tele" class="inline-flex flex-1 items-center justify-center rounded-full border border-slate-200 px-5 py-3 text-sm font-black text-dark transition hover:border-principal hover:text-principal">
1541                    Voir l’émission
1542                </a>
1543
1544                <a href="https://player.fhits.fr" target="_blank" class="inline-flex flex-1 items-center justify-center rounded-full bg-principal px-5 py-3 text-sm font-black text-white transition hover:bg-subprincipal">
1545                    <i class="fa-solid fa-play mr-2"></i>
1546                    Écouter
1547                </a>
1548
1549            </div>
1550
1551        </div>
1552
1553    </div>
1554
1555</article>
1556                                                            <article class="group overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-xl shadow-slate-200/70 transition hover:-translate-y-1 hover:shadow-2xl">
1557
1558    <div class="grid md:grid-cols-[230px_1fr]">
1559
1560        <div class="relative min-h-[260px] overflow-hidden">
1561
1562            <img loading="lazy" src="https://s3.fr-par.scw.cloud/fhits-fr/images/emission-1787229783.webp" alt="LA TEAM DE COCO" class="absolute inset-0 h-full w-full object-cover transition duration-500 group-hover:scale-105">
1563
1564            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
1565
1566            <div class="absolute left-5 top-5 rounded-full bg-white/15 px-3 py-1 text-xs font-black uppercase tracking-widest text-white backdrop-blur-md">
1567                Talk                    </div>
1568
1569           
1570            <div class="absolute bottom-5 left-5 right-5">
1571                <p class="text-3xl font-black text-white">
1572                    18h00                    </p>
1573                <p class="mt-1 text-xs font-black uppercase tracking-[0.2em] text-white/55">
1574                    jusqu’à 20h00                       </p>
1575            </div>
1576
1577        </div>
1578
1579        <div class="flex flex-col justify-between p-6">
1580
1581            <div>
1582
1583                <p class="mb-3 text-xs font-black uppercase tracking-[0.25em] text-principal">
1584                    Jeudi                      </p>
1585
1586                <h3 class="text-2xl font-black leading-tight tracking-tight text-dark">
1587                    LA TEAM DE COCO                      </h3>
1588
1589                <p class="mt-3 text-sm font-black text-slate-500">
1590                    Avec Corentin Guilhem                      </p>
1591
1592                <p class="mt-4 text-sm font-medium leading-relaxed text-slate-500">
1593                    🎙️ LA TEAM COCO - 18H/20H                     </p>
1594
1595            </div>
1596
1597            <div class="mt-6 flex flex-col gap-3 sm:flex-row">
1598
1599                <a href="https://fhits.fr/programmes/la-team-de-coco" class="inline-flex flex-1 items-center justify-center rounded-full border border-slate-200 px-5 py-3 text-sm font-black text-dark transition hover:border-principal hover:text-principal">
1600                    Voir l’émission
1601                </a>
1602
1603                <a href="https://player.fhits.fr" target="_blank" class="inline-flex flex-1 items-center justify-center rounded-full bg-principal px-5 py-3 text-sm font-black text-white transition hover:bg-subprincipal">
1604                    <i class="fa-solid fa-play mr-2"></i>
1605                    Écouter
1606                </a>
1607
1608            </div>
1609
1610        </div>
1611
1612    </div>
1613
1614</article>
1615                                                            <article class="group overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-xl shadow-slate-200/70 transition hover:-translate-y-1 hover:shadow-2xl">
1616
1617    <div class="grid md:grid-cols-[230px_1fr]">
1618
1619        <div class="relative min-h-[260px] overflow-hidden">
1620
1621            <img loading="lazy" src="https://s3.fr-par.scw.cloud/fhits-fr/images/emission-1787229811.webp" alt="LA BANDE A MEHDI" class="absolute inset-0 h-full w-full object-cover transition duration-500 group-hover:scale-105">
1622
1623            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
1624
1625            <div class="absolute left-5 top-5 rounded-full bg-white/15 px-3 py-1 text-xs font-black uppercase tracking-widest text-white backdrop-blur-md">
1626                Talk                    </div>
1627
1628           
1629            <div class="absolute bottom-5 left-5 right-5">
1630                <p class="text-3xl font-black text-white">
1631                    21h00                    </p>
1632                <p class="mt-1 text-xs font-black uppercase tracking-[0.2em] text-white/55">
1633                    jusqu’à 23h00                       </p>
1634            </div>
1635
1636        </div>
1637
1638        <div class="flex flex-col justify-between p-6">
1639
1640            <div>
1641
1642                <p class="mb-3 text-xs font-black uppercase tracking-[0.25em] text-principal">
1643                    Jeudi                      </p>
1644
1645                <h3 class="text-2xl font-black leading-tight tracking-tight text-dark">
1646                    LA BANDE A MEHDI                      </h3>
1647
1648                <p class="mt-3 text-sm font-black text-slate-500">
1649                    Avec Mehdi Zoghbi                      </p>
1650
1651                <p class="mt-4 text-sm font-medium leading-relaxed text-slate-500">
1652                    LA BANDE A MEHDI                     </p>
1653
1654            </div>
1655
1656            <div class="mt-6 flex flex-col gap-3 sm:flex-row">
1657
1658                <a href="https://fhits.fr/programmes/la-bande-a-mehdi" class="inline-flex flex-1 items-center justify-center rounded-full border border-slate-200 px-5 py-3 text-sm font-black text-dark transition hover:border-principal hover:text-principal">
1659                    Voir l’émission
1660                </a>
1661
1662                <a href="https://player.fhits.fr" target="_blank" class="inline-flex flex-1 items-center justify-center rounded-full bg-principal px-5 py-3 text-sm font-black text-white transition hover:bg-subprincipal">
1663                    <i class="fa-solid fa-play mr-2"></i>
1664                    Écouter
1665                </a>
1666
1667            </div>
1668
1669        </div>
1670
1671    </div>
1672
1673</article>
1674                            
1675                        </div>
1676
1677                    </div>
1678
1679
1680            
1681                    <div id="day-Vendredi" class="program-day ">
1682
1683                        <div class="grid gap-6 lg:grid-cols-2">
1684
1685                                                            <article class="group overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-xl shadow-slate-200/70 transition hover:-translate-y-1 hover:shadow-2xl">
1686
1687    <div class="grid md:grid-cols-[230px_1fr]">
1688
1689        <div class="relative min-h-[260px] overflow-hidden">
1690
1691            <img loading="lazy" src="https://fhits.fr/assets/images/photo-1516280440614-37939bbacd81.webp" alt="HEARTFELDT RADIO" class="absolute inset-0 h-full w-full object-cover transition duration-500 group-hover:scale-105">
1692
1693            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
1694
1695            <div class="absolute left-5 top-5 rounded-full bg-white/15 px-3 py-1 text-xs font-black uppercase tracking-widest text-white backdrop-blur-md">
1696                Mix                    </div>
1697
1698           
1699            <div class="absolute bottom-5 left-5 right-5">
1700                <p class="text-3xl font-black text-white">
1701                    00h00                    </p>
1702                <p class="mt-1 text-xs font-black uppercase tracking-[0.2em] text-white/55">
1703                    jusqu’à 01h00                       </p>
1704            </div>
1705
1706        </div>
1707
1708        <div class="flex flex-col justify-between p-6">
1709
1710            <div>
1711
1712                <p class="mb-3 text-xs font-black uppercase tracking-[0.25em] text-principal">
1713                    Vendredi                      </p>
1714
1715                <h3 class="text-2xl font-black leading-tight tracking-tight text-dark">
1716                    HEARTFELDT RADIO                      </h3>
1717
1718                <p class="mt-3 text-sm font-black text-slate-500">
1719                    Avec F. HITS                      </p>
1720
1721                <p class="mt-4 text-sm font-medium leading-relaxed text-slate-500">
1722                    HERTFELDT RADIO                     </p>
1723
1724            </div>
1725
1726            <div class="mt-6 flex flex-col gap-3 sm:flex-row">
1727
1728                <a href="https://fhits.fr/programmes/hertfeldt-radio" class="inline-flex flex-1 items-center justify-center rounded-full border border-slate-200 px-5 py-3 text-sm font-black text-dark transition hover:border-principal hover:text-principal">
1729                    Voir l’émission
1730                </a>
1731
1732                <a href="https://player.fhits.fr" target="_blank" class="inline-flex flex-1 items-center justify-center rounded-full bg-principal px-5 py-3 text-sm font-black text-white transition hover:bg-subprincipal">
1733                    <i class="fa-solid fa-play mr-2"></i>
1734                    Écouter
1735                </a>
1736
1737            </div>
1738
1739        </div>
1740
1741    </div>
1742
1743</article>
1744                                                            <article class="group overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-xl shadow-slate-200/70 transition hover:-translate-y-1 hover:shadow-2xl">
1745
1746    <div class="grid md:grid-cols-[230px_1fr]">
1747
1748        <div class="relative min-h-[260px] overflow-hidden">
1749
1750            <img loading="lazy" src="https://s3.fr-par.scw.cloud/fhits-fr/images/emission-1787563465.webp" alt="Chut... On écoute la télé !" class="absolute inset-0 h-full w-full object-cover transition duration-500 group-hover:scale-105">
1751
1752            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
1753
1754            <div class="absolute left-5 top-5 rounded-full bg-white/15 px-3 py-1 text-xs font-black uppercase tracking-widest text-white backdrop-blur-md">
1755                Talk                    </div>
1756
1757           
1758            <div class="absolute bottom-5 left-5 right-5">
1759                <p class="text-3xl font-black text-white">
1760                    13h00                    </p>
1761                <p class="mt-1 text-xs font-black uppercase tracking-[0.2em] text-white/55">
1762                    jusqu’à 13h10                       </p>
1763            </div>
1764
1765        </div>
1766
1767        <div class="flex flex-col justify-between p-6">
1768
1769            <div>
1770
1771                <p class="mb-3 text-xs font-black uppercase tracking-[0.25em] text-principal">
1772                    Vendredi                      </p>
1773
1774                <h3 class="text-2xl font-black leading-tight tracking-tight text-dark">
1775                    Chut... On écoute la télé !                      </h3>
1776
1777                <p class="mt-3 text-sm font-black text-slate-500">
1778                    Avec Alain Jeanne                      </p>
1779
1780                <p class="mt-4 text-sm font-medium leading-relaxed text-slate-500">
1781                    Chut... On écoute la télé !                     </p>
1782
1783            </div>
1784
1785            <div class="mt-6 flex flex-col gap-3 sm:flex-row">
1786
1787                <a href="https://fhits.fr/programmes/chut-on-ecoute-la-tele" class="inline-flex flex-1 items-center justify-center rounded-full border border-slate-200 px-5 py-3 text-sm font-black text-dark transition hover:border-principal hover:text-principal">
1788                    Voir l’émission
1789                </a>
1790
1791                <a href="https://player.fhits.fr" target="_blank" class="inline-flex flex-1 items-center justify-center rounded-full bg-principal px-5 py-3 text-sm font-black text-white transition hover:bg-subprincipal">
1792                    <i class="fa-solid fa-play mr-2"></i>
1793                    Écouter
1794                </a>
1795
1796            </div>
1797
1798        </div>
1799
1800    </div>
1801
1802</article>
1803                                                            <article class="group overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-xl shadow-slate-200/70 transition hover:-translate-y-1 hover:shadow-2xl">
1804
1805    <div class="grid md:grid-cols-[230px_1fr]">
1806
1807        <div class="relative min-h-[260px] overflow-hidden">
1808
1809            <img loading="lazy" src="https://s3.fr-par.scw.cloud/fhits-fr/images/emission-1787563465.webp" alt="Chut... On écoute la télé !" class="absolute inset-0 h-full w-full object-cover transition duration-500 group-hover:scale-105">
1810
1811            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
1812
1813            <div class="absolute left-5 top-5 rounded-full bg-white/15 px-3 py-1 text-xs font-black uppercase tracking-widest text-white backdrop-blur-md">
1814                Talk                    </div>
1815
1816           
1817            <div class="absolute bottom-5 left-5 right-5">
1818                <p class="text-3xl font-black text-white">
1819                    17h00                    </p>
1820                <p class="mt-1 text-xs font-black uppercase tracking-[0.2em] text-white/55">
1821                    jusqu’à 17h10                       </p>
1822            </div>
1823
1824        </div>
1825
1826        <div class="flex flex-col justify-between p-6">
1827
1828            <div>
1829
1830                <p class="mb-3 text-xs font-black uppercase tracking-[0.25em] text-principal">
1831                    Vendredi                      </p>
1832
1833                <h3 class="text-2xl font-black leading-tight tracking-tight text-dark">
1834                    Chut... On écoute la télé !                      </h3>
1835
1836                <p class="mt-3 text-sm font-black text-slate-500">
1837                    Avec Alain Jeanne                      </p>
1838
1839                <p class="mt-4 text-sm font-medium leading-relaxed text-slate-500">
1840                    Chut... On écoute la télé !                     </p>
1841
1842            </div>
1843
1844            <div class="mt-6 flex flex-col gap-3 sm:flex-row">
1845
1846                <a href="https://fhits.fr/programmes/chut-on-ecoute-la-tele" class="inline-flex flex-1 items-center justify-center rounded-full border border-slate-200 px-5 py-3 text-sm font-black text-dark transition hover:border-principal hover:text-principal">
1847                    Voir l’émission
1848                </a>
1849
1850                <a href="https://player.fhits.fr" target="_blank" class="inline-flex flex-1 items-center justify-center rounded-full bg-principal px-5 py-3 text-sm font-black text-white transition hover:bg-subprincipal">
1851                    <i class="fa-solid fa-play mr-2"></i>
1852                    Écouter
1853                </a>
1854
1855            </div>
1856
1857        </div>
1858
1859    </div>
1860
1861</article>
1862                                                            <article class="group overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-xl shadow-slate-200/70 transition hover:-translate-y-1 hover:shadow-2xl">
1863
1864    <div class="grid md:grid-cols-[230px_1fr]">
1865
1866        <div class="relative min-h-[260px] overflow-hidden">
1867
1868            <img loading="lazy" src="https://s3.fr-par.scw.cloud/fhits-fr/images/emission-1787229783.webp" alt="LA TEAM DE COCO" class="absolute inset-0 h-full w-full object-cover transition duration-500 group-hover:scale-105">
1869
1870            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
1871
1872            <div class="absolute left-5 top-5 rounded-full bg-white/15 px-3 py-1 text-xs font-black uppercase tracking-widest text-white backdrop-blur-md">
1873                Talk                    </div>
1874
1875           
1876            <div class="absolute bottom-5 left-5 right-5">
1877                <p class="text-3xl font-black text-white">
1878                    18h00                    </p>
1879                <p class="mt-1 text-xs font-black uppercase tracking-[0.2em] text-white/55">
1880                    jusqu’à 20h00                       </p>
1881            </div>
1882
1883        </div>
1884
1885        <div class="flex flex-col justify-between p-6">
1886
1887            <div>
1888
1889                <p class="mb-3 text-xs font-black uppercase tracking-[0.25em] text-principal">
1890                    Vendredi                      </p>
1891
1892                <h3 class="text-2xl font-black leading-tight tracking-tight text-dark">
1893                    LA TEAM DE COCO                      </h3>
1894
1895                <p class="mt-3 text-sm font-black text-slate-500">
1896                    Avec Corentin Guilhem                      </p>
1897
1898                <p class="mt-4 text-sm font-medium leading-relaxed text-slate-500">
1899                    🎙️ LA TEAM COCO - 18H/20H                     </p>
1900
1901            </div>
1902
1903            <div class="mt-6 flex flex-col gap-3 sm:flex-row">
1904
1905                <a href="https://fhits.fr/programmes/la-team-de-coco" class="inline-flex flex-1 items-center justify-center rounded-full border border-slate-200 px-5 py-3 text-sm font-black text-dark transition hover:border-principal hover:text-principal">
1906                    Voir l’émission
1907                </a>
1908
1909                <a href="https://player.fhits.fr" target="_blank" class="inline-flex flex-1 items-center justify-center rounded-full bg-principal px-5 py-3 text-sm font-black text-white transition hover:bg-subprincipal">
1910                    <i class="fa-solid fa-play mr-2"></i>
1911                    Écouter
1912                </a>
1913
1914            </div>
1915
1916        </div>
1917
1918    </div>
1919
1920</article>
1921                                                            <article class="group overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-xl shadow-slate-200/70 transition hover:-translate-y-1 hover:shadow-2xl">
1922
1923    <div class="grid md:grid-cols-[230px_1fr]">
1924
1925        <div class="relative min-h-[260px] overflow-hidden">
1926
1927            <img loading="lazy" src="https://s3.fr-par.scw.cloud/fhits-fr/images/emission-1790072406.webp" alt="SESSION DJ GUILIGHT" class="absolute inset-0 h-full w-full object-cover transition duration-500 group-hover:scale-105">
1928
1929            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
1930
1931            <div class="absolute left-5 top-5 rounded-full bg-white/15 px-3 py-1 text-xs font-black uppercase tracking-widest text-white backdrop-blur-md">
1932                Mix                    </div>
1933
1934           
1935            <div class="absolute bottom-5 left-5 right-5">
1936                <p class="text-3xl font-black text-white">
1937                    22h00                    </p>
1938                <p class="mt-1 text-xs font-black uppercase tracking-[0.2em] text-white/55">
1939                    jusqu’à 23h00                       </p>
1940            </div>
1941
1942        </div>
1943
1944        <div class="flex flex-col justify-between p-6">
1945
1946            <div>
1947
1948                <p class="mb-3 text-xs font-black uppercase tracking-[0.25em] text-principal">
1949                    Vendredi                      </p>
1950
1951                <h3 class="text-2xl font-black leading-tight tracking-tight text-dark">
1952                    SESSION DJ GUILIGHT                      </h3>
1953
1954                <p class="mt-3 text-sm font-black text-slate-500">
1955                    Avec Corentin Guilhem                      </p>
1956
1957                <p class="mt-4 text-sm font-medium leading-relaxed text-slate-500">
1958                    Chaque Vendredi !                     </p>
1959
1960            </div>
1961
1962            <div class="mt-6 flex flex-col gap-3 sm:flex-row">
1963
1964                <a href="https://fhits.fr/programmes/session-dj-guilight" class="inline-flex flex-1 items-center justify-center rounded-full border border-slate-200 px-5 py-3 text-sm font-black text-dark transition hover:border-principal hover:text-principal">
1965                    Voir l’émission
1966                </a>
1967
1968                <a href="https://player.fhits.fr" target="_blank" class="inline-flex flex-1 items-center justify-center rounded-full bg-principal px-5 py-3 text-sm font-black text-white transition hover:bg-subprincipal">
1969                    <i class="fa-solid fa-play mr-2"></i>
1970                    Écouter
1971                </a>
1972
1973            </div>
1974
1975        </div>
1976
1977    </div>
1978
1979</article>
1980                            
1981                        </div>
1982
1983                    </div>
1984
1985
1986            
1987                    <div id="day-Samedi" class="program-day ">
1988
1989                        <div class="grid gap-6 lg:grid-cols-2">
1990
1991                                                            <article class="group overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-xl shadow-slate-200/70 transition hover:-translate-y-1 hover:shadow-2xl">
1992
1993    <div class="grid md:grid-cols-[230px_1fr]">
1994
1995        <div class="relative min-h-[260px] overflow-hidden">
1996
1997            <img loading="lazy" src="https://fhits.fr/assets/images/photo-1516280440614-37939bbacd81.webp" alt="LE 9/12 du week-end" class="absolute inset-0 h-full w-full object-cover transition duration-500 group-hover:scale-105">
1998
1999            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
2000
2001            <div class="absolute left-5 top-5 rounded-full bg-white/15 px-3 py-1 text-xs font-black uppercase tracking-widest text-white backdrop-blur-md">
2002                Morning                    </div>
2003
2004           
2005            <div class="absolute bottom-5 left-5 right-5">
2006                <p class="text-3xl font-black text-white">
2007                    09h00                    </p>
2008                <p class="mt-1 text-xs font-black uppercase tracking-[0.2em] text-white/55">
2009                    jusqu’à 12h00                       </p>
2010            </div>
2011
2012        </div>
2013
2014        <div class="flex flex-col justify-between p-6">
2015
2016            <div>
2017
2018                <p class="mb-3 text-xs font-black uppercase tracking-[0.25em] text-principal">
2019                    Samedi                      </p>
2020
2021                <h3 class="text-2xl font-black leading-tight tracking-tight text-dark">
2022                    LE 9/12 du week-end                      </h3>
2023
2024                <p class="mt-3 text-sm font-black text-slate-500">
2025                    Avec Alexis                      </p>
2026
2027                <p class="mt-4 text-sm font-medium leading-relaxed text-slate-500">
2028                    LE 9/12 du week-end                     </p>
2029
2030            </div>
2031
2032            <div class="mt-6 flex flex-col gap-3 sm:flex-row">
2033
2034                <a href="https://fhits.fr/programmes/le-912" class="inline-flex flex-1 items-center justify-center rounded-full border border-slate-200 px-5 py-3 text-sm font-black text-dark transition hover:border-principal hover:text-principal">
2035                    Voir l’émission
2036                </a>
2037
2038                <a href="https://player.fhits.fr" target="_blank" class="inline-flex flex-1 items-center justify-center rounded-full bg-principal px-5 py-3 text-sm font-black text-white transition hover:bg-subprincipal">
2039                    <i class="fa-solid fa-play mr-2"></i>
2040                    Écouter
2041                </a>
2042
2043            </div>
2044
2045        </div>
2046
2047    </div>
2048
2049</article>
2050                                                            <article class="group overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-xl shadow-slate-200/70 transition hover:-translate-y-1 hover:shadow-2xl">
2051
2052    <div class="grid md:grid-cols-[230px_1fr]">
2053
2054        <div class="relative min-h-[260px] overflow-hidden">
2055
2056            <img loading="lazy" src="https://s3.fr-par.scw.cloud/fhits-fr/images/emission-1787563465.webp" alt="Chut... On écoute la télé !" class="absolute inset-0 h-full w-full object-cover transition duration-500 group-hover:scale-105">
2057
2058            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
2059
2060            <div class="absolute left-5 top-5 rounded-full bg-white/15 px-3 py-1 text-xs font-black uppercase tracking-widest text-white backdrop-blur-md">
2061                Talk                    </div>
2062
2063           
2064            <div class="absolute bottom-5 left-5 right-5">
2065                <p class="text-3xl font-black text-white">
2066                    13h00                    </p>
2067                <p class="mt-1 text-xs font-black uppercase tracking-[0.2em] text-white/55">
2068                    jusqu’à 13h10                       </p>
2069            </div>
2070
2071        </div>
2072
2073        <div class="flex flex-col justify-between p-6">
2074
2075            <div>
2076
2077                <p class="mb-3 text-xs font-black uppercase tracking-[0.25em] text-principal">
2078                    Samedi                      </p>
2079
2080                <h3 class="text-2xl font-black leading-tight tracking-tight text-dark">
2081                    Chut... On écoute la télé !                      </h3>
2082
2083                <p class="mt-3 text-sm font-black text-slate-500">
2084                    Avec Alain Jeanne                      </p>
2085
2086                <p class="mt-4 text-sm font-medium leading-relaxed text-slate-500">
2087                    Chut... On écoute la télé !                     </p>
2088
2089            </div>
2090
2091            <div class="mt-6 flex flex-col gap-3 sm:flex-row">
2092
2093                <a href="https://fhits.fr/programmes/chut-on-ecoute-la-tele" class="inline-flex flex-1 items-center justify-center rounded-full border border-slate-200 px-5 py-3 text-sm font-black text-dark transition hover:border-principal hover:text-principal">
2094                    Voir l’émission
2095                </a>
2096
2097                <a href="https://player.fhits.fr" target="_blank" class="inline-flex flex-1 items-center justify-center rounded-full bg-principal px-5 py-3 text-sm font-black text-white transition hover:bg-subprincipal">
2098                    <i class="fa-solid fa-play mr-2"></i>
2099                    Écouter
2100                </a>
2101
2102            </div>
2103
2104        </div>
2105
2106    </div>
2107
2108</article>
2109                                                            <article class="group overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-xl shadow-slate-200/70 transition hover:-translate-y-1 hover:shadow-2xl">
2110
2111    <div class="grid md:grid-cols-[230px_1fr]">
2112
2113        <div class="relative min-h-[260px] overflow-hidden">
2114
2115            <img loading="lazy" src="https://s3.fr-par.scw.cloud/fhits-fr/images/emission-1787563465.webp" alt="Chut... On écoute la télé !" class="absolute inset-0 h-full w-full object-cover transition duration-500 group-hover:scale-105">
2116
2117            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
2118
2119            <div class="absolute left-5 top-5 rounded-full bg-white/15 px-3 py-1 text-xs font-black uppercase tracking-widest text-white backdrop-blur-md">
2120                Talk                    </div>
2121
2122           
2123            <div class="absolute bottom-5 left-5 right-5">
2124                <p class="text-3xl font-black text-white">
2125                    17h00                    </p>
2126                <p class="mt-1 text-xs font-black uppercase tracking-[0.2em] text-white/55">
2127                    jusqu’à 17h10                       </p>
2128            </div>
2129
2130        </div>
2131
2132        <div class="flex flex-col justify-between p-6">
2133
2134            <div>
2135
2136                <p class="mb-3 text-xs font-black uppercase tracking-[0.25em] text-principal">
2137                    Samedi                      </p>
2138
2139                <h3 class="text-2xl font-black leading-tight tracking-tight text-dark">
2140                    Chut... On écoute la télé !                      </h3>
2141
2142                <p class="mt-3 text-sm font-black text-slate-500">
2143                    Avec Alain Jeanne                      </p>
2144
2145                <p class="mt-4 text-sm font-medium leading-relaxed text-slate-500">
2146                    Chut... On écoute la télé !                     </p>
2147
2148            </div>
2149
2150            <div class="mt-6 flex flex-col gap-3 sm:flex-row">
2151
2152                <a href="https://fhits.fr/programmes/chut-on-ecoute-la-tele" class="inline-flex flex-1 items-center justify-center rounded-full border border-slate-200 px-5 py-3 text-sm font-black text-dark transition hover:border-principal hover:text-principal">
2153                    Voir l’émission
2154                </a>
2155
2156                <a href="https://player.fhits.fr" target="_blank" class="inline-flex flex-1 items-center justify-center rounded-full bg-principal px-5 py-3 text-sm font-black text-white transition hover:bg-subprincipal">
2157                    <i class="fa-solid fa-play mr-2"></i>
2158                    Écouter
2159                </a>
2160
2161            </div>
2162
2163        </div>
2164
2165    </div>
2166
2167</article>
2168                                                            <article class="group overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-xl shadow-slate-200/70 transition hover:-translate-y-1 hover:shadow-2xl">
2169
2170    <div class="grid md:grid-cols-[230px_1fr]">
2171
2172        <div class="relative min-h-[260px] overflow-hidden">
2173
2174            <img loading="lazy" src="https://fhits.fr/assets/images/photo-1516280440614-37939bbacd81.webp" alt="REZO DE LA SEMAINE" class="absolute inset-0 h-full w-full object-cover transition duration-500 group-hover:scale-105">
2175
2176            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
2177
2178            <div class="absolute left-5 top-5 rounded-full bg-white/15 px-3 py-1 text-xs font-black uppercase tracking-widest text-white backdrop-blur-md">
2179                Talk                    </div>
2180
2181           
2182            <div class="absolute bottom-5 left-5 right-5">
2183                <p class="text-3xl font-black text-white">
2184                    19h00                    </p>
2185                <p class="mt-1 text-xs font-black uppercase tracking-[0.2em] text-white/55">
2186                    jusqu’à 20h00                       </p>
2187            </div>
2188
2189        </div>
2190
2191        <div class="flex flex-col justify-between p-6">
2192
2193            <div>
2194
2195                <p class="mb-3 text-xs font-black uppercase tracking-[0.25em] text-principal">
2196                    Samedi                      </p>
2197
2198                <h3 class="text-2xl font-black leading-tight tracking-tight text-dark">
2199                    REZO DE LA SEMAINE                      </h3>
2200
2201                <p class="mt-3 text-sm font-black text-slate-500">
2202                    Avec Léo Labaume                      </p>
2203
2204                <p class="mt-4 text-sm font-medium leading-relaxed text-slate-500">
2205                    REZO DE LA SEMAINE - 2x par mois                     </p>
2206
2207            </div>
2208
2209            <div class="mt-6 flex flex-col gap-3 sm:flex-row">
2210
2211                <a href="https://fhits.fr/programmes/rezo-de-la-semaine" class="inline-flex flex-1 items-center justify-center rounded-full border border-slate-200 px-5 py-3 text-sm font-black text-dark transition hover:border-principal hover:text-principal">
2212                    Voir l’émission
2213                </a>
2214
2215                <a href="https://player.fhits.fr" target="_blank" class="inline-flex flex-1 items-center justify-center rounded-full bg-principal px-5 py-3 text-sm font-black text-white transition hover:bg-subprincipal">
2216                    <i class="fa-solid fa-play mr-2"></i>
2217                    Écouter
2218                </a>
2219
2220            </div>
2221
2222        </div>
2223
2224    </div>
2225
2226</article>
2227                                                            <article class="group overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-xl shadow-slate-200/70 transition hover:-translate-y-1 hover:shadow-2xl">
2228
2229    <div class="grid md:grid-cols-[230px_1fr]">
2230
2231        <div class="relative min-h-[260px] overflow-hidden">
2232
2233            <img loading="lazy" src="https://s3.fr-par.scw.cloud/fhits-fr/images/emission-1788172862.webp" alt="LATINO NIGHT" class="absolute inset-0 h-full w-full object-cover transition duration-500 group-hover:scale-105">
2234
2235            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
2236
2237            <div class="absolute left-5 top-5 rounded-full bg-white/15 px-3 py-1 text-xs font-black uppercase tracking-widest text-white backdrop-blur-md">
2238                Talk                    </div>
2239
2240           
2241            <div class="absolute bottom-5 left-5 right-5">
2242                <p class="text-3xl font-black text-white">
2243                    21h00                    </p>
2244                <p class="mt-1 text-xs font-black uppercase tracking-[0.2em] text-white/55">
2245                    jusqu’à 22h00                       </p>
2246            </div>
2247
2248        </div>
2249
2250        <div class="flex flex-col justify-between p-6">
2251
2252            <div>
2253
2254                <p class="mb-3 text-xs font-black uppercase tracking-[0.25em] text-principal">
2255                    Samedi                      </p>
2256
2257                <h3 class="text-2xl font-black leading-tight tracking-tight text-dark">
2258                    LATINO NIGHT                      </h3>
2259
2260                <p class="mt-3 text-sm font-black text-slate-500">
2261                    Avec Thibault Guillemin                      </p>
2262
2263                <p class="mt-4 text-sm font-medium leading-relaxed text-slate-500">
2264                    LATINO NIGHT                     </p>
2265
2266            </div>
2267
2268            <div class="mt-6 flex flex-col gap-3 sm:flex-row">
2269
2270                <a href="https://fhits.fr/programmes/latino-night" class="inline-flex flex-1 items-center justify-center rounded-full border border-slate-200 px-5 py-3 text-sm font-black text-dark transition hover:border-principal hover:text-principal">
2271                    Voir l’émission
2272                </a>
2273
2274                <a href="https://player.fhits.fr" target="_blank" class="inline-flex flex-1 items-center justify-center rounded-full bg-principal px-5 py-3 text-sm font-black text-white transition hover:bg-subprincipal">
2275                    <i class="fa-solid fa-play mr-2"></i>
2276                    Écouter
2277                </a>
2278
2279            </div>
2280
2281        </div>
2282
2283    </div>
2284
2285</article>
2286                            
2287                        </div>
2288
2289                    </div>
2290
2291
2292            
2293                    <div id="day-Dimanche" class="program-day ">
2294
2295                        <div class="grid gap-6 lg:grid-cols-2">
2296
2297                                                            <article class="group overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-xl shadow-slate-200/70 transition hover:-translate-y-1 hover:shadow-2xl">
2298
2299    <div class="grid md:grid-cols-[230px_1fr]">
2300
2301        <div class="relative min-h-[260px] overflow-hidden">
2302
2303            <img loading="lazy" src="https://fhits.fr/assets/images/photo-1516280440614-37939bbacd81.webp" alt="F. HITS DJ NIGHT" class="absolute inset-0 h-full w-full object-cover transition duration-500 group-hover:scale-105">
2304
2305            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
2306
2307            <div class="absolute left-5 top-5 rounded-full bg-white/15 px-3 py-1 text-xs font-black uppercase tracking-widest text-white backdrop-blur-md">
2308                Mix                    </div>
2309
2310           
2311            <div class="absolute bottom-5 left-5 right-5">
2312                <p class="text-3xl font-black text-white">
2313                    00h00                    </p>
2314                <p class="mt-1 text-xs font-black uppercase tracking-[0.2em] text-white/55">
2315                    jusqu’à 06h00                       </p>
2316            </div>
2317
2318        </div>
2319
2320        <div class="flex flex-col justify-between p-6">
2321
2322            <div>
2323
2324                <p class="mb-3 text-xs font-black uppercase tracking-[0.25em] text-principal">
2325                    Dimanche                      </p>
2326
2327                <h3 class="text-2xl font-black leading-tight tracking-tight text-dark">
2328                    F. HITS DJ NIGHT                      </h3>
2329
2330                <p class="mt-3 text-sm font-black text-slate-500">
2331                    Avec F. HITS                      </p>
2332
2333                <p class="mt-4 text-sm font-medium leading-relaxed text-slate-500">
2334                    F. HITS DJ NIGHT                     </p>
2335
2336            </div>
2337
2338            <div class="mt-6 flex flex-col gap-3 sm:flex-row">
2339
2340                <a href="https://fhits.fr/programmes/f-hits-dj-night" class="inline-flex flex-1 items-center justify-center rounded-full border border-slate-200 px-5 py-3 text-sm font-black text-dark transition hover:border-principal hover:text-principal">
2341                    Voir l’émission
2342                </a>
2343
2344                <a href="https://player.fhits.fr" target="_blank" class="inline-flex flex-1 items-center justify-center rounded-full bg-principal px-5 py-3 text-sm font-black text-white transition hover:bg-subprincipal">
2345                    <i class="fa-solid fa-play mr-2"></i>
2346                    Écouter
2347                </a>
2348
2349            </div>
2350
2351        </div>
2352
2353    </div>
2354
2355</article>
2356                                                            <article class="group overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-xl shadow-slate-200/70 transition hover:-translate-y-1 hover:shadow-2xl">
2357
2358    <div class="grid md:grid-cols-[230px_1fr]">
2359
2360        <div class="relative min-h-[260px] overflow-hidden">
2361
2362            <img loading="lazy" src="https://fhits.fr/assets/images/photo-1516280440614-37939bbacd81.webp" alt="LE BRUIT DES RÊVES" class="absolute inset-0 h-full w-full object-cover transition duration-500 group-hover:scale-105">
2363
2364            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
2365
2366            <div class="absolute left-5 top-5 rounded-full bg-white/15 px-3 py-1 text-xs font-black uppercase tracking-widest text-white backdrop-blur-md">
2367                Interview                    </div>
2368
2369           
2370            <div class="absolute bottom-5 left-5 right-5">
2371                <p class="text-3xl font-black text-white">
2372                    19h00                    </p>
2373                <p class="mt-1 text-xs font-black uppercase tracking-[0.2em] text-white/55">
2374                    jusqu’à 20h00                       </p>
2375            </div>
2376
2377        </div>
2378
2379        <div class="flex flex-col justify-between p-6">
2380
2381            <div>
2382
2383                <p class="mb-3 text-xs font-black uppercase tracking-[0.25em] text-principal">
2384                    Dimanche                      </p>
2385
2386                <h3 class="text-2xl font-black leading-tight tracking-tight text-dark">
2387                    LE BRUIT DES RÊVES                      </h3>
2388
2389                <p class="mt-3 text-sm font-black text-slate-500">
2390                    Avec Céline Gasc                      </p>
2391
2392                <p class="mt-4 text-sm font-medium leading-relaxed text-slate-500">
2393                    LE BRUIT DES RÊVES - 2x/mois                     </p>
2394
2395            </div>
2396
2397            <div class="mt-6 flex flex-col gap-3 sm:flex-row">
2398
2399                <a href="https://fhits.fr/programmes/le-bruit-des-reves" class="inline-flex flex-1 items-center justify-center rounded-full border border-slate-200 px-5 py-3 text-sm font-black text-dark transition hover:border-principal hover:text-principal">
2400                    Voir l’émission
2401                </a>
2402
2403                <a href="https://player.fhits.fr" target="_blank" class="inline-flex flex-1 items-center justify-center rounded-full bg-principal px-5 py-3 text-sm font-black text-white transition hover:bg-subprincipal">
2404                    <i class="fa-solid fa-play mr-2"></i>
2405                    Écouter
2406                </a>
2407
2408            </div>
2409
2410        </div>
2411
2412    </div>
2413
2414</article>
2415                            
2416                        </div>
2417
2418                    </div>
2419
2420
2421            
2422
2423
2424        </section>
2425
2426        <section class="bg-white py-20">
2427
2428            <div class="mx-auto max-w-7xl px-5">
2429
2430                <div class="grid gap-6 lg:grid-cols-2">
2431
2432                    <div class="rounded-[2.5rem] bg-[#071316] p-10 text-white md:p-12">
2433
2434                        <p class="mb-4 text-sm font-black uppercase tracking-[0.25em] text-principal">
2435                            Replay
2436                        </p>
2437
2438                        <h2 class="text-4xl font-black leading-tight tracking-tight">
2439                            Vous avez manqué une émission ?
2440                        </h2>
2441
2442                        <p class="mt-5 text-white/60">
2443                            Retrouvez les meilleurs moments, interviews et émissions en podcast sur F. HITS.
2444                        </p>
2445
2446                        <a href="https://fhits.fr/podcasts" class="mt-8 inline-flex items-center rounded-full bg-principal px-8 py-4 text-sm font-black text-white transition hover:bg-subprincipal">
2447                            Voir les podcasts
2448                            <i class="fa-solid fa-arrow-right ml-3"></i>
2449                        </a>
2450
2451                    </div>
2452
2453                    <div class="rounded-[2.5rem] bg-principal p-10 text-white md:p-12">
2454
2455                        <p class="mb-4 text-sm font-black uppercase tracking-[0.25em] text-white/70">
2456                            Antenne
2457                        </p>
2458
2459                        <h2 class="text-4xl font-black leading-tight tracking-tight">
2460                            Une programmation vivante toute la semaine
2461                        </h2>
2462
2463                        <p class="mt-5 text-white/75">
2464                            Mixes, talks, classements, émissions musicales et hits non-stop rythment l’antenne F. HITS.
2465                        </p>
2466
2467                        <a href="https://player.fhits.fr" target="_blank" class="mt-8 inl
2467ine-flex items-center rounded-full bg-white px-8 py-4 text-sm font-black text-dark transition hover:bg-slate-100">
2468                            Écouter en direct
2469                            <i class="fa-solid fa-play ml-3"></i>
2470                        </a>
2471
2472                    </div>
2473
2474                </div>
2475
2476            </div>
2477
2478        </section>
2479
2480    </main>
2481</div>
2482
2483<!-- PLAYER FIXE BAS DE PAGE -->
2484<div id="site-player-bar" class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-lg z-40">
2485    <audio id="audio-url" src="https://listen.openstream.co/7437/audio"></audio>
2486
2487
2488    <div class="px-4 py-2 bg-gray-50" id="timelaps-podcast" hidden="">
2489        <div class="container mx-auto">
2490            <div class="flex items-center gap-3">
2491                <div class="flex-1 relative">
2492                    <input type="range" id="timelaps-podcastInput"
2493                           min="0" max="2700"
2494                           step="any"
2495                           class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider"
2496                           value="0"
2497                           style="background: linear-gradient(to right, rgb(220, 38, 38) 0%, rgb(220, 38, 38) 0%, rgb(229, 231, 235) 0%, rgb(229, 231, 235) 100%);">
2498                    <style>
2499                        .slider::-webkit-slider-thumb {
2500                            appearance: none;
2501                            width: 16px;
2502                            height: 16px;
2503                            border-radius: 50%;
2504                            background: var(--color-principal);
2505                            cursor: pointer;
2506                            border: 2px solid white;
2507                            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
2508                        }
2509
2510                        .slider::-moz-range-thumb {
2511                            width: 16px;
2512                            height: 16px;
2513                            border-radius: 50%;
2514                            background: var(--color-principal);
2515                            cursor: pointer;
2516                            border: 2px solid white;
2517                            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
2518                        }
2519                    </style>
2520                </div>
2521                <span class="text-[0.70rem] text-gray-500 w-10" id="podcast-timelapstext">45:00</span>
2522            </div>
2523        </div>
2524    </div>
2525
2526    <div class="border-b border-gray-200 p-4 hidden" id="selection-radio">
2527        <h3 class="text-lg font-semibold text-gray-800 mb-3">Choisir une station</h3>
2528        <div class="grid grid-cols-1 md:grid-cols-3 gap-2" id="listes-des-radios"></div>
2529    </div>
2530
2531    <div class="p-3 md:p-4">
2532        <div class="container mx-auto">
2533            <div class="flex items-center justify-between gap-2">
2534
2535                <div class="flex items-center gap-2 md:gap-4 min-w-0 flex-1 md:flex-none">
2536                    <div class="flex items-center gap-2 flex-shrink-0">
2537                        <div class="relative inline-block">
2538                            <div id="play-button-ring" class="loader-ring text-principal"></div>
2539                            <button id="play-button"
2540                                    class="w-10 h-10 md:w-12 md:h-12 bg-principal hover:bg-subprincipal rounded-full flex items-center justify-center text-white transition-colors relative z-10">
2541                                <svg id="svg-play" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
2542                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
2543                                     stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play md:h-6 md:w-6 ml-0.5 md:ml-1">
2544                                    <polygon points="5 3 19 12 5 21 5 3"></polygon>
2545                                </svg>
2546                                <svg id="svg-pause" style="display: none" xmlns="http://www.w3.org/2000/svg" width="20"
2547                                     height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
2548                                     stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pause md:h-6 md:w-6">
2549                                    <rect width="4" height="16" x="6" y="4"></rect>
2550                                    <rect width="4" height="16" x="14" y="4"></rect>
2551                                </svg>
2552                            </button>
2553                        </div>
2554                    </div>
2555
2556                    <div class="min-w-0" id="radio-infos">
2557                        <div class="font-semibold text-gray-800 text-xs md:text-base truncate max-w-[140px] sm:max-w-none" id="radio-title">
2558                            Midnight Hour - Damien Benedetti
2559                        </div>
2560                        <div class="text-[0.70rem] md:text-sm text-gray-600 truncate max-w-[140px] sm:max-w-none" id="radio-programme">
2561                            F. HITS • Morning Show avec Damien &amp; Marc
2562                        </div>
2563                    </div>
2564
2565                    <div class="min-w-0 hidden" hidden="" id="podcast-infos">
2566                        <div class="font-semibold text-gray-800 text-[0.75rem] md:text-sm truncate" id="podcast-title">Midnight Hour</div>
2567                        <div class="text-[0.65rem] md:text-xs text-gray-600 truncate" id="podcast-artist">Damien Benedetti</div>
2568                    </div>
2569                </div>
2570
2571                <div class="flex items-center gap-2 md:gap-4 flex-shrink-0">
2572
2573                    <button id="btn-lister-les-radio"
2574                                                        class="flex items-center gap-1 md:gap-2 px-2 py-1 md:px-3 md:py-1 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors text-xs md:text-sm">
2575                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
2576                             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
2577                             class="lucide lucide-radio md:h-4 md:w-4">
2578                            <path d="M4.9 19.1C1 15.2 1 8.8 4.9 4.9"></path>
2579                            <path d="M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5"></path>
2580                            <circle cx="12" cy="12" r="2"></circle>
2581                            <path d="M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5"></path>
2582                            <path d="M19.1 4.9C23 8.8 23 15.1 19.1 19"></path>
2583                        </svg>
2584                        <span class="hidden sm:inline" id="radio-selectionne-texte">F. HITS RADIO</span>
2585                        <svg id="player-chevron-down" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
2586                             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
2587                             class="lucide lucide-chevron-down md:h-4 md:w-4">
2588                            <path d="m6 9 6 6 6-6"></path>
2589                        </svg>
2590                        <svg id="player-chevron-up" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-up md:h-4 md:w-4 hidden">
2591                            <path d="m18 15-6-6-6 6"></path>
2592                        </svg>
2593                    </button>
2594
2595                    <div class="hidden md:flex items-center gap-2 bg-red-100 text-red-800 px-3 py-1 rounded-full js-hide-mobile" id="badge-live">
2596                        <div class="w-2 h-2 bg-red-500 rounded-full animate-pulse"></div>
2597                        <span class="text-sm font-bold">DIRECT</span>
2598                    </div>
2599
2600                    <div class="flex items-center gap-1 md:gap-2 bg-blue-100 text-blue-800 px-2 py-1 md:px-3 md:py-1 rounded-full hidden" id="badge-podcast">
2601                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
2602                             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
2603                             class="lucide lucide-music md:h-3 md:w-3">
2604                            <path d="M9 18V5l12-2v13"></path>
2605                            <circle cx="6" cy="18" r="3"></circle>
2606                            <circle cx="18" cy="16" r="3"></circle>
2607                        </svg>
2608                        <span class="text-xs md:text-sm font-bold">PODCAST</span>
2609                    </div>
2610
2611                    <div class="hidden md:flex items-center gap-2 js-hide-mobile">
2612                        <button class="text-gray-600 hover:text-red-600 transition-colors" id="volume-stop">
2613                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
2614                                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
2615                                 stroke-linejoin="round" class="lucide lucide-volume2 h-5 w-5">
2616                                <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
2617                                <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
2618                                <path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
2619                            </svg>
2620                        </button>
2621                        <input type="range" min="0" max="100" class="w-20 h-1 bg-gray-300 rounded-lg appearance-none cursor-pointer" value="75" id="volume-player">
2622                    </div>
2623
2624                    <button id="btn-push-subscribe" type="button" title="Activer les notifications"
2625                            class="text-gray-600 hover:text-red-600 transition-colors"
2626                            
2627                            >
2628                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
2629                             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
2630                             class="lucide lucide-bell h-5 w-5">
2631                            <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"></path>
2632                            <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"></path>
2633                        </svg>
2634                    </button>
2635
2636                    <div class="relative" id="vote-song-wrapper"
2637                         >
2638                        <button id="btn-vote-song" type="button" title="Voter pour ce titre"
2639                                class="text-gray-600 hover:text-red-600 transition-colors">
2640                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
2641                                 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
2642                                 class="lucide lucide-heart h-5 w-5" id="btn-vote-song-icon">
2643                                <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path>
2644                            </svg>
2645                        </button>
2646
2647                        <div id="vote-song-feedback"
2648                             class="pointer-events-none absolute bottom-full right-0 mb-3 w-max max-w-[220px] -translate-y-1 rounded-lg px-3 py-2 text-xs font-semibold text-white opacity-0 shadow-lg transition-all duration-200">
2649                        </div>
2650                    </div>
2651
2652                    <a class="text-gray-600 hover:text-red-600 transition-colors" href="#home-page">
2653                        <div class="transform transition-transform">
2654                            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2655                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
2656                            </svg>
2657                        </div>
2658                    </a>
2659                </div>
2660
2661            </div>
2662        </div>
2663    </div>
2664</div>
2665
2666<footer class="relative overflow-hidden bg-[#071316] pb-32 text-white md:pb-36">
2667    <div class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-[#068099] to-transparent"></div>
2668
2669    <div class="mx-auto max-w-7xl px-5 py-14">
2670        <div class="grid gap-10 lg:grid-cols-[minmax(240px,1.1fr)_2.4fr_minmax(220px,1fr)]">
2671
2672            <div>
2673                <a href="https://fhits.fr" class="inline-flex items-center gap-3">
2674                    <img loading="lazy" src="https://fhits.fr/assets/logo/cmsradio_white.webp" alt="F. HITS"
2675                         class="h-12 w-auto">
2676
2677                    <div>
2678                        <p class="text-xl font-black tracking-tight">F. HITS</p>
2679                        <p class="text-xs font-semibold text-white/50">La puissance de vos hits !</p>
2680                    </div>
2681                </a>
2682
2683                <p class="mt-5 max-w-sm text-sm leading-relaxed text-white/55">
2684                    F. HITS est une webradio française qui réunit musique, émissions, divertissement et franchises régionales.
2685                </p>
2686
2687                                    <div class="mt-6 flex flex-col gap-2 sm:flex-row lg:flex-col xl:flex-row">
2688                                                    <a href="https://apps.apple.com/fr/app/f-hits/id6741375798" target="_blank"
2689                               class="flex flex-1 items-center gap-2.5 rounded-xl border border-white/10 bg-white/5 px-3 py-2 transition duration-200 hover:border-principal hover:bg-principal group">
2690                                <i class="fa-brands fa-apple text-xl text-white shrink-0"></i>
2691                                <div class="leading-none whitespace-nowrap">
2692                                    <span class="block text-[9px] font-medium text-white/60 group-hover:text-white/80">Disponible sur</span>
2693                                    <span class="block text-xs font-bold tracking-tight text-white mt-0.5">App Store</span>
2694                                </div>
2695                            </a>
2696                        
2697                                                    <a href="https://play.google.com/store/apps/details?id=fr.fhits.app" target="_blank"
2698                               class="flex flex-1 items-center gap-2.5 rounded-xl border border-white/10 bg-white/5 px-3 py-2 transition duration-200 hover:border-principal hover:bg-principal group">
2699                                <i class="fa-brands fa-google-play text-lg text-white shrink-0"></i>
2700                                <div class="leading-none whitespace-nowrap">
2701                                    <span class="block text-[9px] font-medium text-white/60 group-hover:text-white/80">Disponible sur</span>
2702                                    <span
2703                                        class="block text-xs font-bold tracking-tight text-white mt-0.5">Google Play</span>
2704                                </div>
2705                            </a>
2706                                            </div>
2707                            </div>
2708
2709            <div class="grid gap-10 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(160px,1fr))]">
2710                                    <div>
2711                        <h3 class="text-sm font-black uppercase tracking-[0.2em] text-white">Navigation</h3>
2712
2713                        <ul class="mt-5 space-y-3 text-sm font-semibold text-white/55">
2714                                                            <li>
2715                                    <a href="https://fhits.fr"
2716                                                                              class="transition hover:text-white">
2717                                        Accueil
2718                                    </a>
2719                                </li>
2720                                                            <li>
2721                                    <a href="https://fhits.fr/programmes"
2722                                                                              class="transition hover:text-white">
2723                                        Programmes
2724                                    </a>
2725                                </li>
2726                                                            <li>
2727                                    <a href="https://fhits.fr/podcasts"
2728                                                                              class="transition hover:text-white">
2729                                        Podcasts
2730                                    </a>
2731                                </li>
2732                                                            <li>
2733                                    <a href="https://fhits.fr/recrutements"
2734                                                                              class="transition hover:text-white">
2735                                        Recrutement
2736                                    </a>
2737                                </li>
2738                                                            <li>
2739                                    <a href="https://fhits.fr/equipes"
2740                                                                              class="transition hover:text-white">
2741                                        Équipe
2742                                    </a>
2743                                </li>
2744                                                            <li>
2745                                    <a href="https://fhits.fr/contact"
2746                                                                              class="transition hover:text-white">
2747                                        Contact
2748                                    </a>
2749                                </li>
2750                                                            <li>
2751                                    <a href="https://fhits.fr/actualites"
2752                                                                              class="transition hover:text-white">
2753                                        Actualités
2754                                    </a>
2755                                </li>
2756                                                    </ul>
2757                    </div>
2758                                    <div>
2759                        <h3 class="text-sm font-black uppercase tracking-[0.2em] text-white">La Radio</h3>
2760
2761                        <ul class="mt-5 space-y-3 text-sm font-semibold text-white/55">
2762                                                            <li>
2763                                    <a href="https://player.fhits.fr"
2764                                                                              class="transition hover:text-white">
2765                                        Nous écouter
2766                                    </a>
2767                                </li>
2768                                                            <li>
2769                                    <a href="https://fhits.fr/partenaires"
2770                                                                              class="transition hover:text-white">
2771                                        Nos partenaires
2772                                    </a>
2773                                </li>
2774                                                            <li>
2775                                    <a href="https://fhits.fr/regie-pub"
2776                                                                              class="transition hover:text-white">
2777                                        La régie pub
2778                                    </a>
2779                                </li>
2780                                                            <li>
2781                                    <a href="https://fhits.fr/demande-diffusion"
2782                                                                              class="transition hover:text-white">
2783                                        Demande de diffusion
2784                                    </a>
2785                                </li>
2786                                                            <li>
2787                                    <a href="https://fhits.fr/regions"
2788                                                                              class="transition hover:text-white">
2789                                        Nos régions
2790                                    </a>
2791                                </li>
2792                                                            <li>
2793                                    <a href="https://fhits.fr/jeux-concours"
2794                                                                              class="transition hover:text-white">
2795                                        Jeux concours
2796                                    </a>
2797                                </li>
2798                                                    </ul>
2799                    </div>
2800                            </div>
2801
2802            <div>
2803                <h3 class="text-sm font-black uppercase tracking-[0.2em] text-white">Contact</h3>
2804
2805                                    <ul class="mt-5 space-y-4 text-sm font-semibold text-white/55">
2806                                                    <li class="flex gap-3">
2807                                <i class="fa-solid fa-envelope mt-1 text-principal"></i>
2808                                <span><a
2809                                        href="mailto:[email protected]">[email protected]</a></span>
2810                            </li>
2811                        
2812                                                    <li class="flex gap-3">
2813                                <i class="fa-solid fa-phone mt-1 text-principal"></i>
2814                                <span>09 71 18 27 18</span>
2815                            </li>
2816                        
2817                                                    <li class="flex gap-3">
2818                                <i class="fa-solid fa-location-dot mt-1 text-principal"></i>
2819                                <span>22 Rue des Goélands, 35580 Guignen</span>
2820                            </li>
2821                                            </ul>
2822                
2823                                    <div class="mt-6 flex gap-3">
2824                                                    <a href="https://www.facebook.com/FhitsFR" target="_blank" rel="noopener"
2825                               class="flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-white transition hover:bg-principal">
2826                                <i class="fa-brands fa-facebook-f"></i>
2827                            </a>
2828                                                                            <a href="https://www.instagram.com/fhits_radio/" target="_blank" rel="noopener"
2829                               class="flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-white transition hover:bg-principal">
2830                                <i class="fa-brands fa-instagram"></i>
2831                            </a>
2832                                                                            <a href="https://www.tiktok.com/@fhitsradio" target="_blank" rel="noopener"
2833                               class="flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-white transition hover:bg-principal">
2834                                <i class="fa-brands fa-tiktok"></i>
2835                            </a>
2836                                                                                                                            <a href="https://discord.gg/DfR2Q3PXN3" target="_blank" rel="noopener"
2837                               class="flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-white transition hover:bg-principal">
2838                                <i class="fa-brands fa-discord"></i>
2839                            </a>
2840                                            </div>
2841                            </div>
2842
2843        </div>
2844
2845        <div class="mt-12 border-t border-white/10 pt-6">
2846            <div
2847                class="flex flex-col justify-between gap-4 text-xs font-semibold text-white/40 md:flex-row md:items-center">
2848                <p>© 2026 F. HITS - Tous droits réservés.  & Damien Benedetti </p>
2849
2850                <div class="flex flex-wrap gap-4">
2851                                            <a href="https://fhits.fr/mentions-legales" class="transition hover:text-white">Mentions légales</a>
2852                        <a href="https://fhits.fr/confidentialite" class="transition hover:text-white">Confidentialité</a>
2853                        <a href="https://fhits.fr/cookies" class="transition hover:text-white">Cookies</a>
2854                                                                <a href="https://fgroup-audiovisual.com" target="_blank" class="transition hover:text-white">F.
2855                            GROUP</a>
2856                                        <span>v0.8.7 - PROD1</span>
2857                </div>
2858            </div>
2859        </div>
2860    </div>
2861</footer>
2862
2863<script>
2864    const urlmeatadata = "https://fhits.fr/metadata";
2865    window.radiosData = [{"name":"F. HITS RADIO","audio":"https:\/\/listen.openstream.co\/7437\/audio","shortCode":null},{"name":"F. HITS Aquitaine","audio":"https:\/\/listen.f-group.fr\/listen\/fhitsaquitaine\/fhits_aquitaine_96.aac","shortCode":null},{"name":"F. HITS Bretagne","audio":"https:\/\/listen.openstream.co\/7418\/audio","shortCode":null},{"name":"Ondi Radio","audio":"https:\/\/listen.openstream.co\/5462\/audio","shortCode":null}];
2866    window.streamUrl = "https:\/\/listen.openstream.co\/7437\/audio";
2867    window.siteName = "F. HITS";
2868    window.playerUrl = "https:\/\/player.fhits.fr";
2869    window.playerAutoplay = false;
2870    window.votesEnabled = true;
2871    const urlvote = "https://fhits.fr/votes";
2872    const csrfToken = "TbdlgjVAZtZW0Sr14eP4gFCiWUDp5flJfBt59y3f";
2873    window.pushVapidPublicKey = "BNhmzDeayMsnTS-dJVBySNCB8ZmX9Zb7n34vRAU_Wmb_SO4F0bfvUmZomIiYED3dINfnpAu4ZDSuLASmL2Xr7So";
2874</script>
2874
2875<div id="page-loader-overlay" class="fixed inset-0 z-[70] hidden items-center justify-center bg-white/85 backdrop-blur-sm">
2876        <div class="flex flex-col items-center gap-4">
2877                                <div class="flex gap-2">
2878                        <div class="h-3 w-3 animate-bounce rounded-full bg-principal" style="animation-delay: 0ms;"></div>
2879                        <div class="h-3 w-3 animate-bounce rounded-full bg-principal" style="animation-delay: 150ms;"></div>
2880                        <div class="h-3 w-3 animate-bounce rounded-full bg-principal" style="animation-delay: 300ms;"></div>
2881                    </div>
2882                    <p class="text-sm font-bold text-slate-600">Chargement...</p>
2883                            </div>
2884    </div>
2885</body>
2886</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.