PageSourceSearch

https://90folies.com/vollegas

html 90folies.com collected 2026-10-07 06:05:25 UTC 79,099 bytes, 2,904 lines download raw bytes

1
2<!DOCTYPE html>
3<html lang="fr">
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Volle Gas - Restaurant Nonante Folies</title>
8    <link rel="icon" type="image/png" href="/images/Skate.png">
9
10    <!-- Google tag (gtag.js) -->
vendor: 68 bytes, lines 10-11
10
11    <script async src="https://www.googletagmanager.com/gtag/js?id=
11G-TG7BTQRS42
vendor: 16 bytes, lines 11-12
11"></script>
12    
12<script>
13    
vendor: 140 bytes, lines 13-17
13window.dataLayer = window.dataLayer || [];
14    function gtag(){dataLayer.push(arguments);}
15    gtag('js', new Date());
16
17    gtag('config', '
17G-TG7BTQRS42
vendor: 8 bytes, lines 17-18
17');
18    
18</script>
18
19    
20    <!-- Google Fonts -->
21    <link rel="preconnect" href="https://fonts.googleapis.com">
22    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
23    <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap" rel="stylesheet">
24    
25    <!-- Flag Icons -->
26    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/[email protected]/css/flag-icons.min.css" />
27    
28    <!-- Google reCAPTCHA -->
vendor: 96 bytes, lines 28-33
28
29    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
30    
31    
32
33    
33<link rel="stylesheet" href="./css/styles.css">
34</head>
35
36
37<body class="vollgas-page">
38    <!-- Header -->
39    <header class="header">
40        <div class="header-left">
41            <div class="hamburger">
42                <span></span>
43                <span></span>
44                <span></span>
45            </div>
46            <div class="logo">
47                <a href="/">
48                    <img src="./images/Logo.svg" alt="nonante folies">
49                </a>
50            </div>
51        </div>
52        
53        <div class="header-right">
54            
55<div class="language-switcher">
56    <div class="language-dropdown">
57        <button class="language-current" onclick="toggleLanguageDropdown()">
58            <span class="fi fi-fr"></span>
59            <span class="language-code">FR</span>
60            <svg class="dropdown-arrow" viewBox="0 0 24 24" width="16" height="16">
61                <path d="M7 10l5 5 5-5z"/>
62            </svg>
63        </button>
64        
65        <div class="language-options" id="languageOptions">
66                                                                            <a href="/vollegas?lang=nl" class="language-option">
67                        <span class="fi fi-nl"></span>
68                        <span class="language-name">Nederlands</span>
69                    </a>
70                                                                <a href="/vollegas?lang=en" class="language-option">
71                        <span class="fi fi-gb"></span>
72                        <span class="language-name">English</span>
73                    </a>
74                                    </div>
75    </div>
76</div>
77
78<script>
79function toggleLanguageDropdown() {
80    const dropdown = document.querySelector('.language-dropdown');
81    const options = document.getElementById('languageOptions');
82    
83    dropdown.classList.toggle('open');
84    options.classList.toggle('show');
85}
86
87// Close dropdown when clicking outside
88document.addEventListener('click', function(event) {
89    const dropdown = document.querySelector('.language-dropdown');
90    const options = document.getElementById('languageOptions');
91    
92    if (!dropdown.contains(event.target)) {
93        dropdown.classList.remove('open');
94        options.classList.remove('show');
95    }
96});
97</script>
97             <a href="https://jobs.90folies.com/" target="_blank" class="recrute-btn">On Recrute</a>
98            <a href="https://groupes.90folies.com" target="_blank" rel="noopener" class="group-btn">Groupes</a>
99            <button class="reserve-btn" onclick="openReservationPopup(event)">RÉSERVER</button>
100            <div class="social-icons">
101                <a href="https://instagram.com/nonantefolies" target="_blank" class="social-icon instagram" title="Instagram">
102                    <svg class="instagram-icon" viewBox="0 0 24 24">
103                        <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
104                    </svg>
105                </a>
106            </div>
107        </div>
108    </header>
109
110    <!-- Christmas Banner -->
111    <!-- Christmas Banner - Sticky Header -->
112<div class="christmas-banner" id="christmasBanner">
113    <div class="christmas-banner-content">
114        <span class="christmas-banner-text">Organisez vos évènements de 15 à 200 personnes dans nos brasseries</span>
115        <a href="https://groupes.90folies.com" target="_blank" rel="noopener" class="christmas-banner-cta">
116            infos & réservations        </a>
117    </div>
118</div>
119
120<style>
121.christmas-banner {
122    position: fixed;
123    top: 70px; /* Position below the header */
124    left: 0;
125    width: 100%;
126    background: linear-gradient(135deg, #193922 0%, #096632 100%);
127    color: #FDF4E5;
128    padding: 8px 20px;
129    display: flex;
130    align-items: center;
131    justify-content: center;
132    z-index: 999;
133    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
134    font-family: 'Lora', serif;
135    transition: transform 0.3s ease;
136}
137
138.christmas-banner-content {
139    display: flex;
140    align-items: center;
141    justify-content: center;
142    gap: 15px;
143    flex-wrap: wrap;
144    max-width: 1200px;
145    width: 100%;
146}
147
148.christmas-banner-text {
149    font-style: italic;
150    font-size: 15px;
151    line-height: 1.3;
152    text-align: center;
153}
154
155.christmas-banner-cta {
156    background: #E0DC83;
157    color: #193922;
158    border: none;
159    padding: 6px 18px;
160    border-radius: 6px;
161    font-family: 'Lora', serif;
162    font-weight: 600;
163    font-size: 13px;
164    cursor: pointer;
165    transition: all 0.3s ease;
166    white-space: nowrap;
167    text-decoration: none;
168    display: inline-block;
169}
170
171.christmas-banner-cta:hover {
172    background: #FDF4E5;
173    transform: translateY(-2px);
174    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
175}
176
177/* Hide banner on scroll down, show on scroll up */
178.christmas-banner.hidden {
179    transform: translateY(-100%);
180}
181
182/* Adjust body padding to account for banner */
183body.christmas-banner-active {
184    padding-top: 70px; /* Header height + banner height */
185}
186
187/* Mobile responsive */
188@media (max-width: 768px) {
189    .christmas-banner {
190        top: 65px;
191        padding: 8px 15px;
192    }
193    
194    .christmas-banner-content {
195        gap: 8px;
196        flex-direction: column;
197    }
198    
199    .christmas-banner-text {
200        font-size: 13px;
201        margin-top: 3px;
202    }
203    
204    .christmas-banner-cta {
205        font-size: 12px;
206        padding: 5px 14px;
207    }
208}
209
210@media (max-width: 480px) {
211    .christmas-banner-text {
212        font-size: 13px;
213    }
214    
215    .christmas-banner-cta {
216        font-size: 12px;
217    }
218}
219</style>
220
221
222    <!-- Mobile Menu -->
223    <div class="menu-overlay"></div>
224    <nav class="mobile-menu">
225        <a href="/">Accueil</a>
226        <a href="/about">A propos</a>
227        <div class="menu-restaurants">
228            <div class="menu-restaurants-toggle">
229                <span>Nos Restaurants</span>
230                <svg class="menu-chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
231            </div>
232            <div class="menu-restaurants-sub">
233                <a href="/boemvol">Boemvol</a>
234                <a href="/vollegas">Volle Gas</a>
235                <a href="/miroir">Miroir</a>
236            </div>
237        </div>
238        <a href="#" onclick="openMenuPopup(event)">Nos Menus</a>
239        <a href="https://groupes.90folies.com" target="_blank" rel="noopener">Groupes</a>
240        <a href="https://jobs.90folies.com/" target="_blank">On Recrute</a>
241        
242        <div class="mobile-menu-button-container">
243            <button class="mobile-group-btn" onclick="window.location.href='/contact'">Contact</button>
244        </div>
245        
246        <!-- Language Switcher for Mobile -->
247        <div class="mobile-language-switcher">
248                        <div class="mobile-lang-toggle">
249                <span class="fi fi-fr"></span>
250                <span>Français</span>
251                <svg class="mobile-lang-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
252            </div>
253            <div class="mobile-lang-dropdown">
254                                    <a href="/vollegas?lang=nl" class="mobile-lang-option">
255                        <span class="fi fi-nl"></span>
256                        <span>Nederlands</span>
257                    </a>
258                                    <a href="/vollegas?lang=en" class="mobile-lang-option">
259                        <span class="fi fi-gb"></span>
260                        <span>English</span>
261                    </a>
262                            </div>
263        </div>
264    </nav>
265
266    <!-- Custom Menu Popup -->
267    
268<div class="base-popup-overlay menu-popup-overlay" id="menuPopup">
269    <div class="base-popup">
270        <button class="base-popup-close" onclick="closeMenuPopup()">&times;</button>
271        <!-- Colored Header Section -->
272                
273        <div class="base-popup-content">
274            <div class="base-restaurants-selection">
275                <!-- Boemvol Restaurant -->
276                <div class="base-restaurant-info">
277                    <div class="base-restaurant-logo">
278                        <img src="/images/boemvolName.svg" alt="Boemvol" class="base-logo-name">
279                        <img src="/images/Bird.png" alt="" class="base-logo-illustration">
280                    </div>
281                    <div class="base-restaurant-address">
282                        <p>Rue Henri Maus 25<br>1000 Bruxelles</p>
283                    </div>
284                    <div class="base-restaurant-actions">
285                        
286    <div class="menu-actions-container">
287        <a href="./pdfs/2026-08-uploads/Boemvol MIDI-SOIR FR_compressed.pdf" target="_blank" class="menu-action-btn">
288            <span class="menu-btn-title">Menu Complet</span>
289            <span class="menu-btn-description">Découvrez toute notre carte avec tous nos plats et spécialités</span>
290        </a>
291        <a href="./pdfs/2026-08-uploads/965e7b61-2af2-4df2-bde0-d83777faed1c.jpg" target="_blank" class="menu-action-btn">
292            <span class="menu-btn-title">Menu Enfants</span>
293            <span class="menu-btn-description">Notre carte spéciale pour les plus petits</span>
294        </a>
295    </div>
296                    </div>
297                </div>
298                
299                <!-- Vertical Separator -->
300                <div class="base-vertical-separator">
301                    <div class="base-separator-line"></div>
302                    <span class="base-separator-text">ou</span>
303                    <div class="base-separator-line"></div>
304                </div>
305                
306                <!-- Volle Gas Restaurant -->
307                <div class="base-restaurant-info base-vollegas-info" >
308                    <div class="base-restaurant-logo">
309                        <img src="/images/vollegasName.svg" alt="Volle Gas" class="base-logo-name">
310                        <img src="/images/Umbrella.png" alt="" class="base-logo-illustration">
311                    </div>
312                    <div class="base-restaurant-address">
313                        <p>Pl. Fernand Cocq 21<br>1050 Ixelles</p>
314                    </div>
315                    <div class="base-restaurant-actions">
316                        
317    <div class="menu-actions-container">
318        <a href="./pdfs/2026-08-uploads/Volle Gas MIDI-SOIR FR_compressed.pdf" target="_blank" class="menu-action-btn">
319            <span class="menu-btn-title">Menu Complet</span>
320            <span class="menu-btn-description">Découvrez toute notre carte avec tous nos plats et spécialités</span>
321        </a>
322        <a href="./pdfs/2026-08-uploads/A5 - Menu Kids VOLLE GAS - FR.pdf" target="_blank" class="menu-action-btn">
323            <span class="menu-btn-title">Menu Enfants</span>
324            <span class="menu-btn-description">Notre carte spéciale pour les plus petits</span>
325        </a>
326    </div>
327                    </div>
328                </div>
329
330                                <!-- Vertical Separator -->
331                <div class="base-vertical-separator">
332                    <div class="base-separator-line"></div>
333                    <span class="base-separator-text">ou</span>
334                    <div class="base-separator-line"></div>
335                </div>
336
337                <!-- Miroir Restaurant -->
338                <div class="base-restaurant-info base-miroir-info">
339                    <div class="base-restaurant-logo">
340                        <img src="/images/miroirName.svg" alt="Miroir" class="base-logo-name base-logo-miroir">
341                        <img src="/images/miroir/bird.png" alt="" class="base-logo-illustration">
342                    </div>
343                    <div class="base-restaurant-address">
344                        <p>Pl. Reine Astrid 24<br>1090 Jette</p>
345                    </div>
346                    <div class="base-restaurant-actions">
347                        
348    <div class="menu-actions-container">
349        <a href="./pdfs/2026-08-uploads/Miroir MIDI-SOIR FR_compressed.pdf" target="_blank" class="menu-action-btn">
350            <span class="menu-btn-title">Menu Complet</span>
351            <span class="menu-btn-description">Découvrez toute notre carte avec tous nos plats et spécialités</span>
352        </a>
353        <a href="./pdfs/2026-08-uploads/A5 - Menu Kids - Miroir - FR.pdf" target="_blank" class="menu-action-btn">
354            <span class="menu-btn-title">Menu Enfants</span>
355            <span class="menu-btn-description">Notre carte spéciale pour les plus petits</span>
356        </a>
357    </div>
358                    </div>
359                </div>
360                            </div>
361        </div>
362    </div>
363</div>
364
365<style>
366/* Base Popup Styles */
367.base-popup-overlay {
368    position: fixed;
369    top: 0;
370    left: 0;
371    width: 100%;
372    height: 100%;
373    background: rgba(0, 0, 0, 0.8);
374    z-index: 10000;
375    display: none;
376    align-items: center;
377    justify-content: center;
378    backdrop-filter: blur(5px);
379}
380
381.base-popup-overlay.active {
382    display: flex;
383}
384
385.base-popup {
386    background: #f8f6f0;
387    border-radius: 20px;
388    max-width: 900px;
389    width: 90%;
390    max-height: 90vh;
391    overflow-y: auto;
392    position: relative;
393    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
394    font-family: 'Lora', serif;
395}
396
397.base-popup-close {
398    position: absolute;
399    top: 20px;
400    right: 20px;
401    background: none;
402    border: none;
403    font-size: 32px;
404    cursor: pointer;
405    color: white;
406    z-index: 10001;
407    width: 40px;
408    height: 40px;
409    display: flex;
410    align-items: center;
411    justify-content: center;
412    border-radius: 50%;
413    transition: all 0.3s ease;
414}
415
416.base-popup-close:hover {
417    background: rgba(255, 255, 255, 0.2);
418    transform: rotate(90deg);
419}
420
421.base-popup-content {
422    padding: 25px;
423}
424
425.base-popup-header {
426    text-align: center;
427    margin-bottom: 40px;
428}
429
430/* Colored Header Styles */
431.base-popup-colored-header {
432    background: #193922;
433    padding: 25px;
434    text-align: center;
435    border-radius: 20px 20px 0 0;
436}
437
438.base-popup-colored-header .base-popup-title {
439    font-family: 'Lora', serif;
440    font-style: italic;
441    font-weight: 400;
442    font-size: 28px;
443    line-height: 140.62%;
444    color: white;
445    margin: 0 0 12px 0;
446    max-width: 600px;
447    margin-left: auto;
448    margin-right: auto;
449}
450
451.base-popup-subtitle {
452    font-family: 'Lora', serif;
453    font-style: italic;
454    font-weight: 400;
455    font-size: 18px;
456    line-height: 140.62%;
457    color: white;
458    margin: 0;
459    max-width: 600px;
460    margin-left: auto;
461    margin-right: auto;
462}
463
464/* Default title styles for non-colored headers */
465.base-popup-title {
466    font-family: 'Lora', serif;
467    font-style: italic;
468    font-weight: 400;
469    font-size: 28px;
470    line-height: 140.62%;
471    color: black;
472    margin: 0;
473    max-width: 600px;
474    margin-left: auto;
475    margin-right: auto;
476}
477
478.base-restaurants-selection {
479    display: flex;
480    flex-direction: row;
481    align-items: stretch;
482    gap: 0;
483    margin-top: 0;
484}
485
486.base-restaurant-info {
487    display: flex;
488    flex-direction: column;
489    align-items: center;
490    text-align: center;
491    gap: 25px;
492    flex: 1;
493    padding: 0 20px;
494    height: 100%;
495}
496
497.base-restaurant-logo {
498    display: flex;
499    flex-direction: column;
500    align-items: center;
501    text-align: center;
502    gap: 8px;
503    height: 150px;
504    justify-content: center;
505}
506
507.base-restaurant-logo img {
508    object-fit: contain;
509}
510
511.base-logo-name {
512    display: block;
513    height: 45px;
514    max-width: 200px;
515    width: auto;
516}
517
518.base-vollegas-info .base-logo-name {
519    max-width: 190px;
520}
521
522.base-logo-miroir {
523    max-width: 200px;
524}
525
526.base-logo-illustration {
527    display: block;
528    height: 90px;
529    width: auto;
530}
531
532.base-restaurant-address p {
533    margin: 0;
534    font-family: 'Lora', serif;
535    font-style: italic;
536    font-weight: 500;
537    font-size: 16px;
538    line-height: 140.62%;
539    color: var(--text-dark);
540}
541
542.base-restaurant-actions {
543    display: flex;
544    flex-direction: column;
545    gap: 12px;
546    width: 100%;
547    max-width: 200px;
548    margin-top: auto;
549}
550
551/* Volle Gas specific styling */
552.base-vollegas-info .base-restaurant-address p {
553    color: #CD4D37;
554}
555
556/* Miroir specific styling */
557.base-miroir-info .base-restaurant-address p {
558    color: #E79C4A;
559}
560
561.base-vertical-separator {
562    display: flex;
563    flex-direction: column;
564    align-items: center;
565    justify-content: center;
566    padding: 20px 0;
567    min-width: 80px;
568}
569
570.base-separator-line {
571    flex: 1;
572    width: 1px;
573    background: linear-gradient(to bottom, transparent, #d4af37, transparent);
574    min-height: 60px;
575}
576
577.base-separator-text {
578    margin: 15px 0;
579    font-family: 'Lora', serif;
580    font-style: italic;
581    font-weight: 500;
582    font-size: 14px;
583    line-height: 140.62%;
584    color: var(--text-dark);
585    text-transform: uppercase;
586    letter-spacing: 1px;
587}
588
589/* Mobile Responsive */
590@media (max-width: 768px) {
591    .base-popup {
592        width: 95%;
593        margin: 20px;
594        max-height: calc(100vh - 40px);
595    }
596    
597    .base-popup-content {
598        padding: 20px 15px;
599    }
600    
601    .base-popup-colored-header {
602        padding: 20px 15px;
603        padding-top: 50px; /* Extra space for close button */
604    }
605    
606    .base-popup-colored-header .base-popup-title {
607        font-size: 24px;
608        margin-bottom: 10px;
609    }
610    
611    .base-popup-subtitle {
612        font-size: 16px;
613    }
614    
615    .base-popup-title {
616        font-size: 24px;
617    }
618    
619    /* Switch to vertical layout on mobile */
620    .base-restaurants-selection {
621        flex-direction: column;
622        gap: 25px;
623    }
624    
625    .base-restaurant-info {
626        gap: 12px;
627        padding: 0;
628    }
629    
630    /* Change vertical separator to horizontal on mobile */
631    .base-vertical-separator {
632        flex-direction: row;
633        padding: 0 40px;
634        min-width: auto;
635        min-height: auto;
636        margin: 10px 0;
637    }
638    
639    .base-separator-line {
640        flex: 1;
641        width: auto;
642        height: 1px;
643        background: linear-gradient(to right, transparent, #d4af37, transparent);
644        min-height: auto;
645    }
646    
647    .base-separator-text {
648        margin: 0 15px;
649        font-size: 12px;
650    }
651}
652
653@media (max-width: 480px) {
654    
655    .base-popup-content {
656        padding: 15px 10px;
657    }
658    
659    .base-popup-colored-header {
660        padding: 20px 10px;
661        padding-top: 50px; /* Extra space for close button */
662    }
663    
664    .base-popup-colored-header .base-popup-title {
665        font-size: 20px;
666        margin-bottom: 12px;
667    }
668    
669    .base-popup-subtitle {
670        font-size: 14px;
671    }
672    
673    .base-popup-title {
674        font-size: 20px;
675    }
676    
677    .base-restaurant-info {
678        gap: 12px;
679    }
680    
681    .base-vertical-separator {
682        padding: 0 20px;
683    }
684    
685    .base-separator-text {
686        margin: 0 10px;
687    }
688}
689
690/* Logo responsiveness for tablets and mobile */
691@media (max-width: 1024px) {
692    .base-logo-illustration {
693        display: none;
694    }
695
696    .base-logo-name {
697        height: 45px;
698    }
699
700    .base-restaurant-logo {
701        height: 70px;
702    }
703
704    .base-restaurant-info {
705        gap: 20px;
706    }
707}
708
709/* Further adjustments for mobile */
710@media (max-width: 768px) {
711    .base-logo-name {
712        height: 40px;
713        max-width: 180px;
714    }
715
716    .base-restaurant-logo {
717        height: 60px;
718    }
719
720    .base-restaurant-info {
721        gap: 15px;
722    }
723}
724
725/* Additional adjustments for small mobile screens */
726@media (max-width: 480px) {
727    .base-logo-name {
728        height: 35px;
729        max-width: 150px;
730    }
731
732    .base-restaurant-logo {
733        height: 55px;
734    }
735}
736</style>
737
738<style>
739/* Menu Popup Specific Styles */
740.menu-popup-overlay .base-popup {
741    max-width: 960px;
742    overflow-x: hidden;
743}
744
745.menu-popup-overlay .base-restaurants-selection {
746    min-width: 0;
747}
748
749.menu-popup-overlay .base-restaurant-info {
750    min-width: 0;
751    padding: 0 8px;
752    gap: 20px;
753}
754
755.menu-popup-overlay .base-vertical-separator {
756    min-width: 40px;
757    flex-shrink: 0;
758}
759
760/* Override base styles for menu popup - only on desktop */
761@media (min-width: 1025px) {
762    .menu-popup-overlay .base-logo-name {
763        height: 45px;
764    }
765
766    .menu-popup-overlay .base-logo-illustration {
767        height: 100px;
768    }
769
770    .menu-popup-overlay .base-restaurant-logo {
771        height: 150px;
772    }
773}
774
775/* Override base popup width constraints for menu popup */
776.menu-popup-overlay .base-restaurant-actions {
777    max-width: none;
778}
779
780.menu-actions-container {
781    display: flex;
782    flex-direction: column;
783    gap: 12px;
784    width: 100%;
785    margin-top: auto;
786}
787
788.menu-action-btn {
789    display: flex;
790    flex-direction: column;
791    align-items: flex-start;
792    justify-content: center;
793    gap: 4px;
794    padding: 16px 20px;
795    border: 2px solid var(--text-dark);
796    border-radius: 8px;
797    background: transparent;
798    color: var(--text-dark);
799    font-family: 'Lora', serif;
800    cursor: pointer;
801    transition: all 0.3s ease;
802    text-decoration: none;
803    min-height: 65px;
804    text-align: left;
805}
806
807.menu-action-btn:hover {
808    background: var(--text-dark);
809    color: #FDF4E5;
810    border-color: var(--text-dark);
811}
812
813.menu-action-btn:hover .menu-btn-title,
814.menu-action-btn:hover .menu-btn-description {
815    color: #FDF4E5;
816}
817
818.menu-btn-title {
819    font-weight: 600;
820    font-size: 14px;
821    text-transform: uppercase;
822    letter-spacing: 1px;
823    margin: 0;
824    line-height: 1.2;
825}
826
827.menu-btn-description {
828    font-weight: 400;
829    font-size: 12px;
830    font-style: italic;
831    line-height: 1.3;
832    margin: 0;
833    opacity: 0.8;
834}
835
836/* Coming Soon Button */
837.popup-coming-soon-btn {
838    display: flex;
839    flex-direction: column;
840    align-items: flex-start;
841    justify-content: center;
842    gap: 4px;
843    padding: 16px 20px;
844    border: 2px solid #CD4D37;
845    border-radius: 8px;
846    background: transparent;
847    color: #CD4D37;
848    font-family: 'Lora', serif;
849    min-height: 65px;
850    text-align: left;
851    opacity: 0.7;
852    cursor: not-allowed;
853}
854
855.popup-coming-soon-btn .menu-btn-title {
856    color: #CD4D37;
857    font-weight: 600;
858    font-size: 14px;
859    text-transform: uppercase;
860    letter-spacing: 1px;
861}
862
863.popup-coming-soon-btn .menu-btn-description {
864    color: #CD4D37;
865    font-weight: 400;
866    font-size: 12px;
867    font-style: italic;
868    opacity: 0.8;
869}
870
871/* Volle Gas specific styling */
872.menu-popup-overlay .base-vollegas-info .menu-action-btn {
873    color: #CD4D37;
874    border-color: #CD4D37;
875}
876
877.menu-popup-overlay .base-vollegas-info .menu-action-btn:hover {
878    background: #CD4D37;
879    color: #FDF4E5;
880    border-color: #CD4D37;
881}
882
883.menu-popup-overlay .base-vollegas-info .menu-action-btn .menu-btn-title,
884.menu-popup-overlay .base-vollegas-info .menu-action-btn .menu-btn-description {
885    color: #CD4D37;
886}
887
888.menu-popup-overlay .base-vollegas-info .menu-action-btn:hover .menu-btn-title,
889.menu-popup-overlay .base-vollegas-info .menu-action-btn:hover .menu-btn-description {
890    color: #FDF4E5;
891}
892
893/* Miroir specific styling */
894.menu-popup-overlay .base-miroir-info .menu-action-btn {
895    color: #E79C4A;
896    border-color: #E79C4A;
897}
898
899.menu-popup-overlay .base-miroir-info .menu-action-btn:hover {
900    background: #E79C4A;
901    color: #FDF4E5;
902    border-color: #E79C4A;
903}
904
905.menu-popup-overlay .base-miroir-info .menu-action-btn .menu-btn-title,
906.menu-popup-overlay .base-miroir-info .menu-action-btn .menu-btn-description {
907    color: #E79C4A;
908}
909
910.menu-popup-overlay .base-miroir-info .menu-action-btn:hover .menu-btn-title,
911.menu-popup-overlay .base-miroir-info .menu-action-btn:hover .menu-btn-description {
912    color: #FDF4E5;
913}
914
915/* Mobile Responsive */
916@media (max-width: 768px) {
917
918    .menu-action-btn,
919    .popup-coming-soon-btn {
920        min-height: 60px;
921        padding: 14px 16px;
922    }
923
924    .menu-btn-title {
925        font-size: 13px;
926    }
927
928    .menu-btn-description {
929        font-size: 11px;
930    }
931}
932
933@media (max-width: 480px) {
934    .menu-action-btn,
935    .popup-coming-soon-btn {
936        min-height: 55px;
937        padding: 12px 14px;
938    }
939
940    .menu-btn-title {
941        font-size: 12px;
942    }
943
944    .menu-btn-description {
945        font-size: 10px;
946    }
947}
948</style>
949
950    <!-- Custom Reservation Popup -->
951    
952<div class="base-popup-overlay reservation-popup-overlay" id="reservationPopup">
953    <div class="base-popup">
954        <button class="base-popup-close" onclick="closeReservationPopup()">&times;</button>
955        <!-- Colored Header Section -->
956                
957        <div class="base-popup-content">
958            <div class="base-restaurants-selection">
959                <!-- Boemvol Restaurant -->
960                <div class="base-restaurant-info">
961                    <div class="base-restaurant-logo">
962                        <img src="/images/boemvolName.svg" alt="Boemvol" class="base-logo-name">
963                        <img src="/images/Bird.png" alt="" class="base-logo-illustration">
964                    </div>
965                    <div class="base-restaurant-address">
966                        <p>Rue Henri Maus 25<br>1000 Bruxelles</p>
967                    </div>
968                    <div class="base-restaurant-actions">
969                        
970    <button class="reservation-action-btn" onclick="handleBoemvolReservation()">RÉSERVER</button>
971                    </div>
972                </div>
973                
974                <!-- Vertical Separator -->
975                <div class="base-vertical-separator">
976                    <div class="base-separator-line"></div>
977                    <span class="base-separator-text">ou</span>
978                    <div class="base-separator-line"></div>
979                </div>
980                
981                <!-- Volle Gas Restaurant -->
982                <div class="base-restaurant-info base-vollegas-info" >
983                    <div class="base-restaurant-logo">
984                        <img src="/images/vollegasName.svg" alt="Volle Gas" class="base-logo-name">
985                        <img src="/images/Umbrella.png" alt="" class="base-logo-illustration">
986                    </div>
987                    <div class="base-restaurant-address">
988                        <p>Pl. Fernand Cocq 21<br>1050 Ixelles</p>
989                    </div>
990                    <div class="base-restaurant-actions">
991                        
992    <button class="reservation-action-btn reservation-vollegas-btn" onclick="handleVollegasReservation()">RÉSERVER</button>
993                    </div>
994                </div>
995
996                                <!-- Vertical Separator -->
997                <div class="base-vertical-separator">
998                    <div class="base-separator-line"></div>
999                    <span class="base-separator-text">ou</span>
1000                    <div class="base-separator-line"></div>
1001                </div>
1002
1003                <!-- Miroir Restaurant -->
1004                <div class="base-restaurant-info base-miroir-info">
1005                    <div class="base-restaurant-logo">
1006                        <img src="/images/miroirName.svg" alt="Miroir" class="base-logo-name base-logo-miroir">
1007                        <img src="/images/miroir/bird.png" alt="" class="base-logo-illustration">
1008                    </div>
1009                    <div class="base-restaurant-address">
1010                        <p>Pl. Reine Astrid 24<br>1090 Jette</p>
1011                    </div>
1012                    <div class="base-restaurant-actions">
1013                        
1014    <button class="reservation-action-btn reservation-miroir-btn" onclick="handleMiroirReservation()">RÉSERVER</button>
1015                    </div>
1016                </div>
1017                            </div>
1018        </div>
1019    </div>
1020</div>
1021
1022<style>
1023/* Base Popup Styles */
1024.base-popup-overlay {
1025    position: fixed;
1026    top: 0;
1027    left: 0;
1028    width: 100%;
1029    height: 100%;
1030    background: rgba(0, 0, 0, 0.8);
1031    z-index: 10000;
1032    display: none;
1033    align-items: center;
1034    justify-content: center;
1035    backdrop-filter: blur(5px);
1036}
1037
1038.base-popup-overlay.active {
1039    display: flex;
1040}
1041
1042.base-popup {
1043    background: #f8f6f0;
1044    border-radius: 20px;
1045    max-width: 900px;
1046    width: 90%;
1047    max-height: 90vh;
1048    overflow-y: auto;
1049    position: relative;
1050    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
1051    font-family: 'Lora', serif;
1052}
1053
1054.base-popup-close {
1055    position: absolute;
1056    top: 20px;
1057    right: 20px;
1058    background: none;
1059    border: none;
1060    font-size: 32px;
1061    cursor: pointer;
1062    color: white;
1063    z-index: 10001;
1064    width: 40px;
1065    height: 40px;
1066    display: flex;
1067    align-items: center;
1068    justify-content: center;
1069    border-radius: 50%;
1070    transition: all 0.3s ease;
1071}
1072
1073.base-popup-close:hover {
1074    background: rgba(255, 255, 255, 0.2);
1075    transform: rotate(90deg);
1076}
1077
1078.base-popup-content {
1079    padding: 25px;
1080}
1081
1082.base-popup-header {
1083    text-align: center;
1084    margin-bottom: 40px;
1085}
1086
1087/* Colored Header Styles */
1088.base-popup-colored-header {
1089    background: #193922;
1090    padding: 25px;
1091    text-align: center;
1092    border-radius: 20px 20px 0 0;
1093}
1094
1095.base-popup-colored-header .base-popup-title {
1096    font-family: 'Lora', serif;
1097    font-style: italic;
1098    font-weight: 400;
1099    font-size: 28px;
1100    line-height: 140.62%;
1101    color: white;
1102    margin: 0 0 12px 0;
1103    max-width: 600px;
1104    margin-left: auto;
1105    margin-right: auto;
1106}
1107
1108.base-popup-subtitle {
1109    font-family: 'Lora', serif;
1110    font-style: italic;
1111    font-weight: 400;
1112    font-size: 18px;
1113    line-height: 140.62%;
1114    color: white;
1115    margin: 0;
1116    max-width: 600px;
1117    margin-left: auto;
1118    margin-right: auto;
1119}
1120
1121/* Default title styles for non-colored headers */
1122.base-popup-title {
1123    font-family: 'Lora', serif;
1124    font-style: italic;
1125    font-weight: 400;
1126    font-size: 28px;
1127    line-height: 140.62%;
1128    color: black;
1129    margin: 0;
1130    max-width: 600px;
1131    margin-left: auto;
1132    margin-right: auto;
1133}
1134
1135.base-restaurants-selection {
1136    display: flex;
1137    flex-direction: row;
1138    align-items: stretch;
1139    gap: 0;
1140    margin-top: 0;
1141}
1142
1143.base-restaurant-info {
1144    display: flex;
1145    flex-direction: column;
1146    align-items: center;
1147    text-align: center;
1148    gap: 25px;
1149    flex: 1;
1150    padding: 0 20px;
1151    height: 100%;
1152}
1153
1154.base-restaurant-logo {
1155    display: flex;
1156    flex-direction: column;
1157    align-items: center;
1158    text-align: center;
1159    gap: 8px;
1160    height: 150px;
1161    justify-content: center;
1162}
1163
1164.base-restaurant-logo img {
1165    object-fit: contain;
1166}
1167
1168.base-logo-name {
1169    display: block;
1170    height: 45px;
1171    max-width: 200px;
1172    width: auto;
1173}
1174
1175.base-vollegas-info .base-logo-name {
1176    max-width: 190px;
1177}
1178
1179.base-logo-miroir {
1180    max-width: 200px;
1181}
1182
1183.base-logo-illustration {
1184    display: block;
1185    height: 90px;
1186    width: auto;
1187}
1188
1189.base-restaurant-address p {
1190    margin: 0;
1191    font-family: 'Lora', serif;
1192    font-style: italic;
1193    font-weight: 500;
1194    font-size: 16px;
1195    line-height: 140.62%;
1196    color: var(--text-dark);
1197}
1198
1199.base-restaurant-actions {
1200    display: flex;
1201    flex-direction: column;
1202    gap: 12px;
1203    width: 100%;
1204    max-width: 200px;
1205    margin-top: auto;
1206}
1207
1208/* Volle Gas specific styling */
1209.base-vollegas-info .base-restaurant-address p {
1210    color: #CD4D37;
1211}
1212
1213/* Miroir specific styling */
1214.base-miroir-info .base-restaurant-address p {
1215    color: #E79C4A;
1216}
1217
1218.base-vertical-separator {
1219    display: flex;
1220    flex-direction: column;
1221    align-items: center;
1222    justify-content: center;
1223    padding: 20px 0;
1224    min-width: 80px;
1225}
1226
1227.base-separator-line {
1228    flex: 1;
1229    width: 1px;
1230    background: linear-gradient(to bottom, transparent, #d4af37, transparent);
1231    min-height: 60px;
1232}
1233
1234.base-separator-text {
1235    margin: 15px 0;
1236    font-family: 'Lora', serif;
1237    font-style: italic;
1238    font-weight: 500;
1239    font-size: 14px;
1240    line-height: 140.62%;
1241    color: var(--text-dark);
1242    text-transform: uppercase;
1243    letter-spacing: 1px;
1244}
1245
1246/* Mobile Responsive */
1247@media (max-width: 768px) {
1248    .base-popup {
1249        width: 95%;
1250        margin: 20px;
1251        max-height: calc(100vh - 40px);
1252    }
1253    
1254    .base-popup-content {
1255        padding: 20px 15px;
1256    }
1257    
1258    .base-popup-colored-header {
1259        padding: 20px 15px;
1260        padding-top: 50px; /* Extra space for close button */
1261    }
1262    
1263    .base-popup-colored-header .base-popup-title {
1264        font-size: 24px;
1265        margin-bottom: 10px;
1266    }
1267    
1268    .base-popup-subtitle {
1269        font-size: 16px;
1270    }
1271    
1272    .base-popup-title {
1273        font-size: 24px;
1274    }
1275    
1276    /* Switch to vertical layout on mobile */
1277    .base-restaurants-selection {
1278        flex-direction: column;
1279        gap: 25px;
1280    }
1281    
1282    .base-restaurant-info {
1283        gap: 12px;
1284        padding: 0;
1285    }
1286    
1287    /* Change vertical separator to horizontal on mobile */
1288    .base-vertical-separator {
1289        flex-direction: row;
1290        padding: 0 40px;
1291        min-width: auto;
1292        min-height: auto;
1293        margin: 10px 0;
1294    }
1295    
1296    .base-separator-line {
1297        flex: 1;
1298        width: auto;
1299        height: 1px;
1300        background: linear-gradient(to right, transparent, #d4af37, transparent);
1301        min-height: auto;
1302    }
1303    
1304    .base-separator-text {
1305        margin: 0 15px;
1306        font-size: 12px;
1307    }
1308}
1309
1310@media (max-width: 480px) {
1311    
1312    .base-popup-content {
1313        padding: 15px 10px;
1314    }
1315    
1316    .base-popup-colored-header {
1317        padding: 20px 10px;
1318        padding-top: 50px; /* Extra space for close button */
1319    }
1320    
1321    .base-popup-colored-header .base-popup-title {
1322        font-size: 20px;
1323        margin-bottom: 12px;
1324    }
1325    
1326    .base-popup-subtitle {
1327        font-size: 14px;
1328    }
1329    
1330    .base-popup-title {
1331        font-size: 20px;
1332    }
1333    
1334    .base-restaurant-info {
1335        gap: 12px;
1336    }
1337    
1338    .base-vertical-separator {
1339        padding: 0 20px;
1340    }
1341    
1342    .base-separator-text {
1343        margin: 0 10px;
1344    }
1345}
1346
1347/* Logo responsiveness for tablets and mobile */
1348@media (max-width: 1024px) {
1349    .base-logo-illustration {
1350        display: none;
1351    }
1352
1353    .base-logo-name {
1354        height: 45px;
1355    }
1356
1357    .base-restaurant-logo {
1358        height: 70px;
1359    }
1360
1361    .base-restaurant-info {
1362        gap: 20px;
1363    }
1364}
1365
1366/* Further adjustments for mobile */
1367@media (max-width: 768px) {
1368    .base-logo-name {
1369        height: 40px;
1370        max-width: 180px;
1371    }
1372
1373    .base-restaurant-logo {
1374        height: 60px;
1375    }
1376
1377    .base-restaurant-info {
1378        gap: 15px;
1379    }
1380}
1381
1382/* Additional adjustments for small mobile screens */
1383@media (max-width: 480px) {
1384    .base-logo-name {
1385        height: 35px;
1386        max-width: 150px;
1387    }
1388
1389    .base-restaurant-logo {
1390        height: 55px;
1391    }
1392}
1393</style>
1394
1395<style>
1396/* Reservation Popup Specific Styles */
1397.reservation-popup-overlay .base-popup {
1398    max-width: 960px;
1399    overflow-x: hidden;
1400}
1401
1402.reservation-popup-overlay .base-restaurants-selection {
1403    min-width: 0;
1404}
1405
1406.reservation-popup-overlay .base-restaurant-info {
1407    min-width: 0;
1408    padding: 0 8px;
1409    gap: 20px;
1410}
1411
1412.reservation-popup-overlay .base-vertical-separator {
1413    min-width: 40px;
1414    flex-shrink: 0;
1415}
1416
1417.reservation-popup-overlay .base-logo-illustration {
1418    display: none;
1419}
1420
1421.reservation-popup-overlay .base-logo-name {
1422    display: block;
1423    height: 60px;
1424    max-width: 160px;
1425    width: auto;
1426    object-fit: contain;
1427}
1428
1429.reservation-popup-overlay .base-logo-miroir {
1430    max-width: 200px;
1431}
1432
1433.reservation-popup-overlay .base-restaurant-logo {
1434    height: 80px;
1435}
1436
1437.reservation-popup-overlay .base-vollegas-info .base-restaurant-logo {
1438    margin-top: 0 !important;
1439    margin-bottom: 0 !important;
1440}
1441
1442.reservation-action-btn {
1443    display: flex;
1444    align-items: center;
1445    justify-content: center;
1446    gap: 10px;
1447    padding: 12px 20px;
1448    border: 2px solid var(--text-dark);
1449    border-radius: 8px;
1450    background: transparent;
1451    color: var(--text-dark);
1452    font-family: 'Lora', serif;
1453    font-weight: 500;
1454    font-size: 14px;
1455    text-transform: uppercase;
1456    letter-spacing: 1px;
1457    cursor: pointer;
1458    transition: all 0.3s ease;
1459    text-decoration: none;
1460    min-height: 45px;
1461    margin-top: auto;
1462}
1463
1464.reservation-action-btn:hover {
1465    background: var(--text-dark);
1466    color: #FDF4E5;
1467    border-color: var(--text-dark);
1468}
1469
1470/* Volle Gas specific styling */
1471.reservation-popup-overlay .base-vollegas-info .reservation-vollegas-btn {
1472    color: #CD4D37;
1473    border-color: #CD4D37;
1474}
1475
1476.reservation-popup-overlay .base-vollegas-info .reservation-vollegas-btn:hover {
1477    background: #CD4D37;
1478    color: #FDF4E5;
1479    border-color: #CD4D37;
1480}
1481
1482.reservation-popup-overlay .base-miroir-info .base-restaurant-address p {
1483    color: #C9782E;
1484}
1485
1486.reservation-popup-overlay .base-miroir-info .reservation-miroir-btn {
1487    color: #C9782E;
1488    border-color: #C9782E;
1489}
1490
1491.reservation-popup-overlay .base-miroir-info .reservation-miroir-btn:hover {
1492    background: #C9782E;
1493    color: #FDF4E5;
1494    border-color: #C9782E;
1495}
1496
1497@media (min-width: 1025px) {
1498    .reservation-popup-overlay .base-miroir-info .base-restaurant-logo {
1499        padding-top: 10px;
1500    }
1501}
1502
1503@media (max-width: 768px) {
1504    .reservation-popup-overlay .base-popup-content {
1505        padding: 16px 14px;
1506    }
1507
1508    .reservation-popup-overlay .base-restaurants-selection {
1509        gap: 14px;
1510    }
1511
1512    .reservation-popup-overlay .base-restaurant-info {
1513        gap: 12px;
1514        padding: 0;
1515    }
1516
1517    .reservation-popup-overlay .base-restaurant-logo {
1518        height: 52px;
1519    }
1520
1521    .reservation-popup-overlay .base-logo-name {
1522        height: 48px;
1523    }
1524
1525    .reservation-popup-overlay .base-vertical-separator {
1526        margin: 6px 0;
1527        padding: 0 24px;
1528    }
1529
1530    .reservation-popup-overlay .base-restaurant-actions {
1531        margin-top: 0;
1532    }
1533
1534    .reservation-popup-overlay .reservation-action-btn {
1535        margin-top: 0;
1536        min-height: 42px;
1537        padding: 10px 18px;
1538    }
1539}
1540
1541
1542</style>    
1543    <!-- Group Event Popup -->
1544    
1545<div class="base-popup-overlay group-popup-overlay" id="groupPopup">
1546    <div class="base-popup">
1547        <button class="base-popup-close" onclick="closeGroupPopup()">&times;</button>
1548        <!-- Colored Header Section -->
1549                    <div class="base-popup-colored-header">
1550                <h2 class="base-popup-title">Un dîner d'entreprise, un anniversaire ou toute autre occasion spéciale ?</h2>
1551                                    <p class="base-popup-subtitle">Nous accueillons vos évènements de 15 à 200 personnes et créons pour tous une offre sur mesure.</p>
1552                            </div>
1553                
1554        <div class="base-popup-content">
1555            <div class="base-restaurants-selection">
1556                <!-- Boemvol Restaurant -->
1557                <div class="base-restaurant-info">
1558                    <div class="base-restaurant-logo">
1559                        <img src="/images/boemvolName.svg" alt="Boemvol" class="base-logo-name">
1560                        <img src="/images/Bird.png" alt="" class="base-logo-illustration">
1561                    </div>
1562                    <div class="base-restaurant-address">
1563                        <p>Rue Henri Maus 25<br>1000 Bruxelles</p>
1564                    </div>
1565                    <div class="base-restaurant-actions">
1566                        
1567    <button class="group-action-btn group-menu-btn" onclick="openGroupMenu('boemvol')">MENU DE GROUPE</button>
1568    <button class="group-action-btn group-custom-btn" onclick="openCustomOffer('boemvol')">OFFRE SUR MESURE</button>
1569                    </div>
1570                </div>
1571                
1572                <!-- Vertical Separator -->
1573                <div class="base-vertical-separator">
1574                    <div class="base-separator-line"></div>
1575                    <span class="base-separator-text">ou</span>
1576                    <div class="base-separator-line"></div>
1577                </div>
1578                
1579                <!-- Volle Gas Restaurant -->
1580                <div class="base-restaurant-info base-vollegas-info" >
1581                    <div class="base-restaurant-logo">
1582                        <img src="/images/vollegasName.svg" alt="Volle Gas" class="base-logo-name">
1583                        <img src="/images/Umbrella.png" alt="" class="base-logo-illustration">
1584                    </div>
1585                    <div class="base-restaurant-address">
1586                        <p>Pl. Fernand Cocq 21<br>1050 Ixelles</p>
1587                    </div>
1588                    <div class="base-restaurant-actions">
1589                        
1590    <button class="group-action-btn group-menu-btn group-vollegas-menu" onclick="openGroupMenu('vollegas')">MENU DE GROUPE</button>
1591    <button class="group-action-btn group-custom-btn group-vollegas-custom" onclick="openCustomOffer('vollegas')">OFFRE SUR MESURE</button>
1592                    </div>
1593                </div>
1594
1595                                <!-- Vertical Separator -->
1596                <div class="base-vertical-separator">
1597                    <div class="base-separator-line"></div>
1598                    <span class="base-separator-text">ou</span>
1599                    <div class="base-separator-line"></div>
1600                </div>
1601
1602                <!-- Miroir Restaurant -->
1603                <div class="base-restaurant-info base-miroir-info">
1604                    <div class="base-restaurant-logo">
1605                        <img src="/images/miroirName.svg" alt="Miroir" class="base-logo-name base-logo-miroir">
1606                        <img src="/images/miroir/bird.png" alt="" class="base-logo-illustration">
1607                    </div>
1608                    <div class="base-restaurant-address">
1609                        <p>Pl. Reine Astrid 24<br>1090 Jette</p>
1610                    </div>
1611                    <div class="base-restaurant-actions">
1612                        
1613    <button class="reservation-action-btn reservation-miroir-btn" onclick="handleMiroirReservation()">RÉSERVER</button>
1614                    </div>
1615                </div>
1616                            </div>
1617        </div>
1618    </div>
1619</div>
1620
1621<style>
1622/* Base Popup Styles */
1623.base-popup-overlay {
1624    position: fixed;
1625    top: 0;
1626    left: 0;
1627    width: 100%;
1628    height: 100%;
1629    background: rgba(0, 0, 0, 0.8);
1630    z-index: 10000;
1631    display: none;
1632    align-items: center;
1633    justify-content: center;
1634    backdrop-filter: blur(5px);
1635}
1636
1637.base-popup-overlay.active {
1638    display: flex;
1639}
1640
1641.base-popup {
1642    background: #f8f6f0;
1643    border-radius: 20px;
1644    max-width: 900px;
1645    width: 90%;
1646    max-height: 90vh;
1647    overflow-y: auto;
1648    position: relative;
1649    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
1650    font-family: 'Lora', serif;
1651}
1652
1653.base-popup-close {
1654    position: absolute;
1655    top: 20px;
1656    right: 20px;
1657    background: none;
1658    border: none;
1659    font-size: 32px;
1660    cursor: pointer;
1661    color: white;
1662    z-index: 10001;
1663    width: 40px;
1664    height: 40px;
1665    display: flex;
1666    align-items: center;
1667    justify-content: center;
1668    border-radius: 50%;
1669    transition: all 0.3s ease;
1670}
1671
1672.base-popup-close:hover {
1673    background: rgba(255, 255, 255, 0.2);
1674    transform: rotate(90deg);
1675}
1676
1677.base-popup-content {
1678    padding: 25px;
1679}
1680
1681.base-popup-header {
1682    text-align: center;
1683    margin-bottom: 40px;
1684}
1685
1686/* Colored Header Styles */
1687.base-popup-colored-header {
1688    background: #193922;
1689    padding: 25px;
1690    text-align: center;
1691    border-radius: 20px 20px 0 0;
1692}
1693
1694.base-popup-colored-header .base-popup-title {
1695    font-family: 'Lora', serif;
1696    font-style: italic;
1697    font-weight: 400;
1698    font-size: 28px;
1699    line-height: 140.62%;
1700    color: white;
1701    margin: 0 0 12px 0;
1702    max-width: 600px;
1703    margin-left: auto;
1704    margin-right: auto;
1705}
1706
1707.base-popup-subtitle {
1708    font-family: 'Lora', serif;
1709    font-style: italic;
1710    font-weight: 400;
1711    font-size: 18px;
1712    line-height: 140.62%;
1713    color: white;
1714    margin: 0;
1715    max-width: 600px;
1716    margin-left: auto;
1717    margin-right: auto;
1718}
1719
1720/* Default title styles for non-colored headers */
1721.base-popup-title {
1722    font-family: 'Lora', serif;
1723    font-style: italic;
1724    font-weight: 400;
1725    font-size: 28px;
1726    line-height: 140.62%;
1727    color: black;
1728    margin: 0;
1729    max-width: 600px;
1730    margin-left: auto;
1731    margin-right: auto;
1732}
1733
1734.base-restaurants-selection {
1735    display: flex;
1736    flex-direction: row;
1737    align-items: stretch;
1738    gap: 0;
1739    margin-top: 0;
1740}
1741
1742.base-restaurant-info {
1743    display: flex;
1744    flex-direction: column;
1745    align-items: center;
1746    text-align: center;
1747    gap: 25px;
1748    flex: 1;
1749    padding: 0 20px;
1750    height: 100%;
1751}
1752
1753.base-restaurant-logo {
1754    display: flex;
1755    flex-direction: column;
1756    align-items: center;
1757    text-align: center;
1758    gap: 8px;
1759    height: 150px;
1760    justify-content: center;
1761}
1762
1763.base-restaurant-logo img {
1764    object-fit: contain;
1765}
1766
1767.base-logo-name {
1768    display: block;
1769    height: 45px;
1770    max-width: 200px;
1771    width: auto;
1772}
1773
1774.base-vollegas-info .base-logo-name {
1775    max-width: 190px;
1776}
1777
1778.base-logo-miroir {
1779    max-width: 200px;
1780}
1781
1782.base-logo-illustration {
1783    display: block;
1784    height: 90px;
1785    width: auto;
1786}
1787
1788.base-restaurant-address p {
1789    margin: 0;
1790    font-family: 'Lora', serif;
1791    font-style: italic;
1792    font-weight: 500;
1793    font-size: 16px;
1794    line-height: 140.62%;
1795    color: var(--text-dark);
1796}
1797
1798.base-restaurant-actions {
1799    display: flex;
1800    flex-direction: column;
1801    gap: 12px;
1802    width: 100%;
1803    max-width: 200px;
1804    margin-top: auto;
1805}
1806
1807/* Volle Gas specific styling */
1808.base-vollegas-info .base-restaurant-address p {
1809    color: #CD4D37;
1810}
1811
1812/* Miroir specific styling */
1813.base-miroir-info .base-restaurant-address p {
1814    color: #E79C4A;
1815}
1816
1817.base-vertical-separator {
1818    display: flex;
1819    flex-direction: column;
1820    align-items: center;
1821    justify-content: center;
1822    padding: 20px 0;
1823    min-width: 80px;
1824}
1825
1826.base-separator-line {
1827    flex: 1;
1828    width: 1px;
1829    background: linear-gradient(to bottom, transparent, #d4af37, transparent);
1830    min-height: 60px;
1831}
1832
1833.base-separator-text {
1834    margin: 15px 0;
1835    font-family: 'Lora', serif;
1836    font-style: italic;
1837    font-weight: 500;
1838    font-size: 14px;
1839    line-height: 140.62%;
1840    color: var(--text-dark);
1841    text-transform: uppercase;
1842    letter-spacing: 1px;
1843}
1844
1845/* Mobile Responsive */
1846@media (max-width: 768px) {
1847    .base-popup {
1848        width: 95%;
1849        margin: 20px;
1850        max-height: calc(100vh - 40px);
1851    }
1852    
1853    .base-popup-content {
1854        padding: 20px 15px;
1855    }
1856    
1857    .base-popup-colored-header {
1858        padding: 20px 15px;
1859        padding-top: 50px; /* Extra space for close button */
1860    }
1861    
1862    .base-popup-colored-header .base-popup-title {
1863        font-size: 24px;
1864        margin-bottom: 10px;
1865    }
1866    
1867    .base-popup-subtitle {
1868        font-size: 16px;
1869    }
1870    
1871    .base-popup-title {
1872        font-size: 24px;
1873    }
1874    
1875    /* Switch to vertical layout on mobile */
1876    .base-restaurants-selection {
1877        flex-direction: column;
1878        gap: 25px;
1879    }
1880    
1881    .base-restaurant-info {
1882        gap: 12px;
1883        padding: 0;
1884    }
1885    
1886    /* Change vertical separator to horizontal on mobile */
1887    .base-vertical-separator {
1888        flex-direction: row;
1889        padding: 0 40px;
1890        min-width: auto;
1891        min-height: auto;
1892        margin: 10px 0;
1893    }
1894    
1895    .base-separator-line {
1896        flex: 1;
1897        width: auto;
1898        height: 1px;
1899        background: linear-gradient(to right, transparent, #d4af37, transparent);
1900        min-height: auto;
1901    }
1902    
1903    .base-separator-text {
1904        margin: 0 15px;
1905        font-size: 12px;
1906    }
1907}
1908
1909@media (max-width: 480px) {
1910    
1911    .base-popup-content {
1912        padding: 15px 10px;
1913    }
1914    
1915    .base-popup-colored-header {
1916        padding: 20px 10px;
1917        padding-top: 50px; /* Extra space for close button */
1918    }
1919    
1920    .base-popup-colored-header .base-popup-title {
1921        font-size: 20px;
1922        margin-bottom: 12px;
1923    }
1924    
1925    .base-popup-subtitle {
1926        font-size: 14px;
1927    }
1928    
1929    .base-popup-title {
1930        font-size: 20px;
1931    }
1932    
1933    .base-restaurant-info {
1934        gap: 12px;
1935    }
1936    
1937    .base-vertical-separator {
1938        padding: 0 20px;
1939    }
1940    
1941    .base-separator-text {
1942        margin: 0 10px;
1943    }
1944}
1945
1946/* Logo responsiveness for tablets and mobile */
1947@media (max-width: 1024px) {
1948    .base-logo-illustration {
1949        display: none;
1950    }
1951
1952    .base-logo-name {
1953        height: 45px;
1954    }
1955
1956    .base-restaurant-logo {
1957        height: 70px;
1958    }
1959
1960    .base-restaurant-info {
1961        gap: 20px;
1962    }
1963}
1964
1965/* Further adjustments for mobile */
1966@media (max-width: 768px) {
1967    .base-logo-name {
1968        height: 40px;
1969        max-width: 180px;
1970    }
1971
1972    .base-restaurant-logo {
1973        height: 60px;
1974    }
1975
1976    .base-restaurant-info {
1977        gap: 15px;
1978    }
1979}
1980
1981/* Additional adjustments for small mobile screens */
1982@media (max-width: 480px) {
1983    .base-logo-name {
1984        height: 35px;
1985        max-width: 150px;
1986    }
1987
1988    .base-restaurant-logo {
1989        height: 55px;
1990    }
1991}
1992</style>
1993
1994<style>
1995/* Group Popup Specific Styles */
1996.group-popup-overlay .base-popup {
1997    max-width: 900px;
1998}
1999
2000.group-popup-overlay .base-popup-content {
2001    margin-bottom: 1rem;
2002}
2003
2004/* Group popup specific title styling is now handled in base-popup.php */
2005
2006.group-action-btn {
2007    display: flex;
2008    align-items: center;
2009    justify-content: center;
2010    gap: 10px;
2011    padding: 12px 20px;
2012    border: 2px solid var(--text-dark);
2013    border-radius: 8px;
2014    background: transparent;
2015    color: var(--text-dark);
2016    font-family: 'Lora', serif;
2017    font-weight: 500;
2018    font-size: 14px;
2019    text-transform: uppercase;
2020    letter-spacing: 1px;
2021    cursor: pointer;
2022    transition: all 0.3s ease;
2023    text-decoration: none;
2024    width: 100%;
2025    min-height: 44px;
2026    box-sizing: border-box;
2027}
2028
2029.group-action-btn:hover {
2030    background: var(--text-dark);
2031    color: #FDF4E5;
2032    border-color: var(--text-dark);
2033}
2034
2035/* Volle Gas specific styling */
2036.group-popup-overlay .base-vollegas-info .group-vollegas-menu,
2037.group-popup-overlay .base-vollegas-info .group-vollegas-custom {
2038    color: #CD4D37;
2039    border-color: #CD4D37;
2040}
2041
2042.group-popup-overlay .base-vollegas-info .group-vollegas-menu:hover,
2043.group-popup-overlay .base-vollegas-info .group-vollegas-custom:hover {
2044    background: #CD4D37;
2045    color: #FDF4E5;
2046    border-color: #CD4D37;
2047}
2048
2049/* Button type specific styling */
2050.group-menu-btn {
2051    font-weight: 600;
2052}
2053
2054.group-custom-btn {
2055    font-weight: 400;
2056    font-style: italic;
2057}
2058
2059/* Disabled button styling */
2060.group-action-btn.disabled {
2061    opacity: 0.5;
2062    cursor: not-allowed;
2063    pointer-events: none;
2064}
2065
2066.group-action-btn.disabled:hover {
2067    background: transparent;
2068    color: var(--text-dark);
2069    border-color: var(--text-dark);
2070}
2071
2072/* Mobile adjustments */
2073@media (max-width: 768px) {
2074    .group-action-btn {
2075        padding: 10px 16px;
2076        font-size: 12px;
2077        min-height: 40px;
2078    }
2079}
2080
2081
2082</style>
2083    
2084    <!-- Christmas Popup -->
2085    
2086<div class="base-popup-overlay christmas-popup-overlay" id="christmasPopup">
2087    <div class="base-popup">
2088        <button class="base-popup-close" onclick="closeChristmasPopup()">&times;</button>
2089        <!-- Colored Header Section -->
2090                    <div class="base-popup-colored-header">
2091                <h2 class="base-popup-title">Noël & Nouvel An version 90 Folies</h2>
2092                                    <p class="base-popup-subtitle">Gourmand, festif, belge. Réservez votre réveillon avant les autres.</p>
2093                            </div>
2094                
2095        <div class="base-popup-content">
2096            <div class="base-restaurants-selection">
2097                <!-- Boemvol Restaurant -->
2098                <div class="base-restaurant-info">
2099                    <div class="base-restaurant-logo">
2100                        <img src="/images/boemvolName.svg" alt="Boemvol" class="base-logo-name">
2101                        <img src="/images/Bird.png" alt="" class="base-logo-illustration">
2102                    </div>
2103                    <div class="base-restaurant-address">
2104                        <p>Rue Henri Maus 25<br>1000 Bruxelles</p>
2105                    </div>
2106                    <div class="base-restaurant-actions">
2107                        
2108    <button class="christmas-action-btn christmas-menu-btn" onclick="openChristmasMenu('boemvol')">Menu</button>
2109    <div class="christmas-reservation-label">Réservations</div>
2110    <div class="christmas-reservation-buttons">
2111        <button class="christmas-action-btn christmas-reserve-btn" onclick="openChristmasReservation('boemvol', 'christmas');">Noël</button>
2112        <button class="christmas-action-btn christmas-reserve-btn" onclick="openChristmasReservation('boemvol', 'newyear');">Nouvel An</button>
2113    </div>
2114                    </div>
2115                </div>
2116                
2117                <!-- Vertical Separator -->
2118                <div class="base-vertical-separator">
2119                    <div class="base-separator-line"></div>
2120                    <span class="base-separator-text">ou</span>
2121                    <div class="base-separator-line"></div>
2122                </div>
2123                
2124                <!-- Volle Gas Restaurant -->
2125                <div class="base-restaurant-info base-vollegas-info" >
2126                    <div class="base-restaurant-logo">
2127                        <img src="/images/vollegasName.svg" alt="Volle Gas" class="base-logo-name">
2128                        <img src="/images/Umbrella.png" alt="" class="base-logo-illustration">
2129                    </div>
2130                    <div class="base-restaurant-address">
2131                        <p>Pl. Fernand Cocq 21<br>1050 Ixelles</p>
2132                    </div>
2133                    <div class="base-restaurant-actions">
2134                        
2135    <button class="christmas-action-btn christmas-menu-btn christmas-vollegas-menu" onclick="openChristmasMenu('vollegas')">Menu</button>
2136    <div class="christmas-reservation-label">Réservations</div>
2137    <div class="christmas-reservation-buttons">
2138        <button class="christmas-action-btn christmas-reserve-btn christmas-vollegas-reserve" onclick="openChristmasReservation('vollegas', 'christmas');">Noël</button>
2139        <button class="christmas-action-btn christmas-reserve-btn christmas-vollegas-reserve" onclick="openChristmasReservation('vollegas', 'newyear');">Nouvel An</button>
2140    </div>
2141                    </div>
2142                </div>
2143
2144                                <!-- Vertical Separator -->
2145                <div class="base-vertical-separator">
2146                    <div class="base-separator-line"></div>
2147                    <span class="base-separator-text">ou</span>
2148                    <div class="base-separator-line"></div>
2149                </div>
2150
2151                <!-- Miroir Restaurant -->
2152                <div class="base-restaurant-info base-miroir-info">
2153                    <div class="base-restaurant-logo">
2154                        <img src="/images/miroirName.svg" alt="Miroir" class="base-logo-name base-logo-miroir">
2155                        <img src="/images/miroir/bird.png" alt="" class="base-logo-illustration">
2156                    </div>
2157                    <div class="base-restaurant-address">
2158                        <p>Pl. Reine Astrid 24<br>1090 Jette</p>
2159                    </div>
2160                    <div class="base-restaurant-actions">
2161                        
2162    <button class="reservation-action-btn reservation-miroir-btn" onclick="handleMiroirReservation()">RÉSERVER</button>
2163                    </div>
2164                </div>
2165                            </div>
2166        </div>
2167    </div>
2168</div>
2169
2170<style>
2171/* Base Popup Styles */
2172.base-popup-overlay {
2173    position: fixed;
2174    top: 0;
2175    left: 0;
2176    width: 100%;
2177    height: 100%;
2178    background: rgba(0, 0, 0, 0.8);
2179    z-index: 10000;
2180    display: none;
2181    align-items: center;
2182    justify-content: center;
2183    backdrop-filter: blur(5px);
2184}
2185
2186.base-popup-overlay.active {
2187    display: flex;
2188}
2189
2190.base-popup {
2191    background: #f8f6f0;
2192    border-radius: 20px;
2193    max-width: 900px;
2194    width: 90%;
2195    max-height: 90vh;
2196    overflow-y: auto;
2197    position: relative;
2198    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
2199    font-family: 'Lora', serif;
2200}
2201
2202.base-popup-close {
2203    position: absolute;
2204    top: 20px;
2205    right: 20px;
2206    background: none;
2207    border: none;
2208    font-size: 32px;
2209    cursor: pointer;
2210    color: white;
2211    z-index: 10001;
2212    width: 40px;
2213    height: 40px;
2214    display: flex;
2215    align-items: center;
2216    justify-content: center;
2217    border-radius: 50%;
2218    transition: all 0.3s ease;
2219}
2220
2221.base-popup-close:hover {
2222    background: rgba(255, 255, 255, 0.2);
2223    transform: rotate(90deg);
2224}
2225
2226.base-popup-content {
2227    padding: 25px;
2228}
2229
2230.base-popup-header {
2231    text-align: center;
2232    margin-bottom: 40px;
2233}
2234
2235/* Colored Header Styles */
2236.base-popup-colored-header {
2237    background: #193922;
2238    padding: 25px;
2239    text-align: center;
2240    border-radius: 20px 20px 0 0;
2241}
2242
2243.base-popup-colored-header .base-popup-title {
2244    font-family: 'Lora', serif;
2245    font-style: italic;
2246    font-weight: 400;
2247    font-size: 28px;
2248    line-height: 140.62%;
2249    color: white;
2250    margin: 0 0 12px 0;
2251    max-width: 600px;
2252    margin-left: auto;
2253    margin-right: auto;
2254}
2255
2256.base-popup-subtitle {
2257    font-family: 'Lora', serif;
2258    font-style: italic;
2259    font-weight: 400;
2260    font-size: 18px;
2261    line-height: 140.62%;
2262    color: white;
2263    margin: 0;
2264    max-width: 600px;
2265    margin-left: auto;
2266    margin-right: auto;
2267}
2268
2269/* Default title styles for non-colored headers */
2270.base-popup-title {
2271    font-family: 'Lora', serif;
2272    font-style: italic;
2273    font-weight: 400;
2274    font-size: 28px;
2275    line-height: 140.62%;
2276    color: black;
2277    margin: 0;
2278    max-width: 600px;
2279    margin-left: auto;
2280    margin-right: auto;
2281}
2282
2283.base-restaurants-selection {
2284    display: flex;
2285    flex-direction: row;
2286    align-items: stretch;
2287    gap: 0;
2288    margin-top: 0;
2289}
2290
2291.base-restaurant-info {
2292    display: flex;
2293    flex-direction: column;
2294    align-items: center;
2295    text-align: center;
2296    gap: 25px;
2297    flex: 1;
2298    padding: 0 20px;
2299    height: 100%;
2300}
2301
2302.base-restaurant-logo {
2303    display: flex;
2304    flex-direction: column;
2305    align-items: center;
2306    text-align: center;
2307    gap: 8px;
2308    height: 150px;
2309    justify-content: center;
2310}
2311
2312.base-restaurant-logo img {
2313    object-fit: contain;
2314}
2315
2316.base-logo-name {
2317    display: block;
2318    height: 45px;
2319    max-width: 200px;
2320    width: auto;
2321}
2322
2323.base-vollegas-info .base-logo-name {
2324    max-width: 190px;
2325}
2326
2327.base-logo-miroir {
2328    max-width: 200px;
2329}
2330
2331.base-logo-illustration {
2332    display: block;
2333    height: 90px;
2334    width: auto;
2335}
2336
2337.base-restaurant-address p {
2338    margin: 0;
2339    font-family: 'Lora', serif;
2340    font-style: italic;
2341    font-weight: 500;
2342    font-size: 16px;
2343    line-height: 140.62%;
2344    color: var(--text-dark);
2345}
2346
2347.base-restaurant-actions {
2348    display: flex;
2349    flex-direction: column;
2350    gap: 12px;
2351    width: 100%;
2352    max-width: 200px;
2353    margin-top: auto;
2354}
2355
2356/* Volle Gas specific styling */
2357.base-vollegas-info .base-restaurant-address p {
2358    color: #CD4D37;
2359}
2360
2361/* Miroir specific styling */
2362.base-miroir-info .base-restaurant-address p {
2363    color: #E79C4A;
2364}
2365
2366.base-vertical-separator {
2367    display: flex;
2368    flex-direction: column;
2369    align-items: center;
2370    justify-content: center;
2371    padding: 20px 0;
2372    min-width: 80px;
2373}
2374
2375.base-separator-line {
2376    flex: 1;
2377    width: 1px;
2378    background: linear-gradient(to bottom, transparent, #d4af37, transparent);
2379    min-height: 60px;
2380}
2381
2382.base-separator-text {
2383    margin: 15px 0;
2384    font-family: 'Lora', serif;
2385    font-style: italic;
2386    font-weight: 500;
2387    font-size: 14px;
2388    line-height: 140.62%;
2389    color: var(--text-dark);
2390    text-transform: uppercase;
2391    letter-spacing: 1px;
2392}
2393
2394/* Mobile Responsive */
2395@media (max-width: 768px) {
2396    .base-popup {
2397        width: 95%;
2398        margin: 20px;
2399        max-height: calc(100vh - 40px);
2400    }
2401    
2402    .base-popup-content {
2403        padding: 20px 15px;
2404    }
2405    
2406    .base-popup-colored-header {
2407        padding: 20px 15px;
2408        padding-top: 50px; /* Extra space for close button */
2409    }
2410    
2411    .base-popup-colored-header .base-popup-title {
2412        font-size: 24px;
2413        margin-bottom: 10px;
2414    }
2415    
2416    .base-popup-subtitle {
2417        font-size: 16px;
2418    }
2419    
2420    .base-popup-title {
2421        font-size: 24px;
2422    }
2423    
2424    /* Switch to vertical layout on mobile */
2425    .base-restaurants-selection {
2426        flex-direction: column;
2427        gap: 25px;
2428    }
2429    
2430    .base-restaurant-info {
2431        gap: 12px;
2432        padding: 0;
2433    }
2434    
2435    /* Change vertical separator to horizontal on mobile */
2436    .base-vertical-separator {
2437        flex-direction: row;
2438        padding: 0 40px;
2439        min-width: auto;
2440        min-height: auto;
2441        margin: 10px 0;
2442    }
2443    
2444    .base-separator-line {
2445        flex: 1;
2446        width: auto;
2447        height: 1px;
2448        background: linear-gradient(to right, transparent, #d4af37, transparent);
2449        min-height: auto;
2450    }
2451    
2452    .base-separator-text {
2453        margin: 0 15px;
2454        font-size: 12px;
2455    }
2456}
2457
2458@media (max-width: 480px) {
2459    
2460    .base-popup-content {
2461        padding: 15px 10px;
2462    }
2463    
2464    .base-popup-colored-header {
2465        padding: 20px 10px;
2466        padding-top: 50px; /* Extra space for close button */
2467    }
2468    
2469    .base-popup-colored-header .base-popup-title {
2470        font-size: 20px;
2471        margin-bottom: 12px;
2472    }
2473    
2474    .base-popup-subtitle {
2475        font-size: 14px;
2476    }
2477    
2478    .base-popup-title {
2479        font-size: 20px;
2480    }
2481    
2482    .base-restaurant-info {
2483        gap: 12px;
2484    }
2485    
2486    .base-vertical-separator {
2487        padding: 0 20px;
2488    }
2489    
2490    .base-separator-text {
2491        margin: 0 10px;
2492    }
2493}
2494
2495/* Logo responsiveness for tablets and mobile */
2496@media (max-width: 1024px) {
2497    .base-logo-illustration {
2498        display: none;
2499    }
2500
2501    .base-logo-name {
2502        height: 45px;
2503    }
2504
2505    .base-restaurant-logo {
2506        height: 70px;
2507    }
2508
2509    .base-restaurant-info {
2510        gap: 20px;
2511    }
2512}
2513
2514/* Further adjustments for mobile */
2515@media (max-width: 768px) {
2516    .base-logo-name {
2517        height: 40px;
2518        max-width: 180px;
2519    }
2520
2521    .base-restaurant-logo {
2522        height: 60px;
2523    }
2524
2525    .base-restaurant-info {
2526        gap: 15px;
2527    }
2528}
2529
2530/* Additional adjustments for small mobile screens */
2531@media (max-width: 480px) {
2532    .base-logo-name {
2533        height: 35px;
2534        max-width: 150px;
2535    }
2536
2537    .base-restaurant-logo {
2538        height: 55px;
2539    }
2540}
2541</style>
2542
2543<style>
2544/* Christmas Popup Specific Styles */
2545.christmas-popup-overlay .base-popup {
2546    max-width: 700px;
2547}
2548
2549/* Override base styles for christmas popup - only on desktop */
2550@media (min-width: 1025px) {
2551    .christmas-popup-overlay .base-logo-illustration {
2552        height: 120px;
2553    }
2554
2555    .christmas-popup-overlay .base-restaurant-logo {
2556        height: 200px;
2557    }
2558}
2559
2560.christmas-action-btn {
2561    display: flex;
2562    align-items: center;
2563    justify-content: center;
2564    gap: 10px;
2565    padding: 12px 20px;
2566    border: 2px solid var(--text-dark);
2567    border-radius: 8px;
2568    background: transparent;
2569    color: var(--text-dark);
2570    font-family: 'Lora', serif;
2571    font-weight: 500;
2572    font-size: 14px;
2573    text-transform: uppercase;
2574    letter-spacing: 1px;
2575    cursor: pointer;
2576    transition: all 0.3s ease;
2577    text-decoration: none;
2578    min-height: 45px;
2579}
2580
2581.christmas-action-btn:hover {
2582    background: var(--text-dark);
2583    color: #FDF4E5;
2584    border-color: var(--text-dark);
2585}
2586
2587/* Menu button specific styling */
2588.christmas-menu-btn {
2589    background: var(--text-dark);
2590    color: #FDF4E5;
2591}
2592
2593.christmas-menu-btn:hover {
2594    background: transparent;
2595    color: var(--text-dark);
2596}
2597
2598/* Volle Gas specific styling */
2599.christmas-popup-overlay .base-vollegas-info .christmas-vollegas-menu {
2600    background: #CD4D37;
2601    border-color: #CD4D37;
2602    color: #FDF4E5;
2603}
2604
2605.christmas-popup-overlay .base-vollegas-info .christmas-vollegas-menu:hover {
2606    background: transparent;
2607    color: #CD4D37;
2608    border-color: #CD4D37;
2609}
2610
2611.christmas-popup-overlay .base-vollegas-info .christmas-vollegas-reserve {
2612    color: #CD4D37;
2613    border-color: #CD4D37;
2614}
2615
2616.christmas-popup-overlay .base-vollegas-info .christmas-vollegas-reserve:hover {
2617    background: #CD4D37;
2618    color: #FDF4E5;
2619    border-color: #CD4D37;
2620}
2621
2622/* Reservation label */
2623.christmas-reservation-label {
2624    font-family: 'Lora', serif;
2625    font-style: italic;
2626    font-weight: 500;
2627    font-size: 14px;
2628    color: var(--text-dark);
2629    text-align: center;
2630    display: flex;
2631    align-items: center;
2632    gap: 10px;
2633}
2634
2635.christmas-reservation-label::before,
2636.christmas-reservation-label::after {
2637    content: '';
2638    flex: 1;
2639    height: 1px;
2640    background: var(--text-dark);
2641    opacity: 0.3;
2642}
2643
2644.christmas-popup-overlay .base-vollegas-info .christmas-reservation-label {
2645    color: #CD4D37;
2646}
2647
2648.christmas-popup-overlay .base-vollegas-info .christmas-reservation-label::before,
2649.christmas-popup-overlay .base-vollegas-info .christmas-reservation-label::after {
2650    background: #CD4D37;
2651}
2652
2653/* Reservation buttons container */
2654.christmas-reservation-buttons {
2655    display: flex;
2656    flex-direction: column;
2657    gap: 8px;
2658    width: 100%;
2659}
2660
2661.christmas-reservation-buttons .christmas-action-btn {
2662    width: 100%;
2663    font-size: 13px;
2664    padding: 10px 12px;
2665}
2666</style>
2667
2668
2669
2670</body>
2671</html> <!-- Hero Section -->
2672<section class="hero" id="accueil">
2673    <div class="hero-content">
2674                    <div class="hero-logo">
2675                                <img src="./images/VolleGasLogo.svg" alt="Volle Gas">
2676            </div>
2677                
2678                    <p>
2678Brasserie conviviale à Place Fernand Cocq</p>
2679            </div>
2680    <div class="scroll-nav">
2681        <div class="scroll-text">
2682            <span>brasserie</span>
2683            <span>·</span>
2684            <span>restaurant</span>
2685            <span>·</span>
2686            <span>belgian</span>
2687            <span>·</span>
2688            <span>food</span>
2689            <span>·</span>
2690            <span>drinks</span>
2691            <span>·</span>
2692            <span>brasserie</span>
2693            <span>·</span>
2694            <span>restaurant</span>
2695            <span>·</span>
2696            <span>belgian</span>
2697            <span>·</span>
2698            <span>food</span>
2699            <span>·</span>
2700            <span>drinks</span>
2701            <span>·</span>
2702            <span>brasserie</span>
2703            <span>·</span>
2704            <span>restaurant</span>
2705            <span>·</span>
2706            <span>belgian</span>
2707            <span>·</span>
2708            <span>food</span>
2709            <span>·</span>
2710            <span>drinks</span>
2711            <span>·</span>
2712            <span>brasserie</span>
2713            <span>·</span>
2714            <span>restaurant</span>
2715            <span>·</span>
2716            <span>belgian</span>
2717            <span>·</span>
2718            <span>food</span>
2719            <span>·</span>
2720            <span>drinks</span>
2721            <span>·</span>
2722            <span>brasserie</span>
2723            <span>·</span>
2724            <span>restaurant</span>
2725            <span>·</span>
2726            <span>belgian</span>
2727            <span>·</span>
2728            <span>food</span>
2729            <span>·</span>
2730            <span>drinks</span>
2731            <span>·</span>
2732            <span>brasserie</span>
2733            <span>·</span>
2734            <span>restaurant</span>
2735            <span>·</span>
2736            <span>belgian</span>
2737            <span>·</span>
2738            <span>food</span>
2739            <span>·</span>
2740            <span>drinks</span>
2741            <span>·</span>
2742            <span>brasserie</span>
2743            <span>·</span>
2744            <span>restaurant</span>
2745            <span>·</span>
2746            <span>belgian</span>
2747            <span>·</span>
2748            <span>food</span>
2749            <span>·</span>
2750            <span>drinks</span>
2751            <span>·</span>
2752            <span>brasserie</span>
2753            <span>·</span>
2754            <span>restaurant</span>
2755            <span>·</span>
2756            <span>belgian</span>
2757            <span>·</span>
2758            <span>food</span>
2759            <span>·</span>
2760            <span>drinks</span>
2761            <span>·</span>
2762        </div>
2763    </div>
2764</section> 
2765<!-- Zenchef Widget SDK for Vollegas -->
2766<script>;(function (d, s, id) {const el = d.getElementsByTagName(s)[0]; if (d.getElementById(id) || el.parentNode == null) {return;} var js = d.createElement(s);  js.id = id; js.async = true; js.src = 'https://sdk.zenchef.com/v1/sdk.min.js';  el.parentNode.insertBefore(js, el); })(document, 'script', 'zenchef-sdk')</script>
2766
2767<div
2768   class="zc-widget-config"
2769   data-restaurant="367103"
2770   data-open="2000"></div>
2771
2772    <!-- Volle Gas About Section -->
2773    <section class="boemvol-about" id="vollgas-about">
2774        <div class="boemvol-about-content">
2775            <div class="coin-overlay">
2776                <img src="./images/Coin.png" alt="Coin" />
2777            </div>
2778            <div class="boemvol-about-text">
2779                <h2>Ixelles,<br>ma belle</h2>
2780                <p>Des classiques belges ont trouvé leurs nouveau QG : Place Fernand Cocq. Les plats qu'on aime, les potes autour, et la terrasse qui va avec.</p>
2781                
2782                <div class="restaurant-hours">
2783                    <p class="hours-line">LUN - SAM : 12:00 - 22:30</p>
2784                    <p class="hours-line">DIM : 10:00 - 22:30</p>
2785                </div>
2786                
2787                <div class="restaurant-buttons">
2788                    <button class="restaurant-btn" onclick="openMenuPopup(event)">Menu</button>
2789                    <button class="restaurant-btn" data-zc-action="open" onclick="trackReservationWidgetOpened('direct_button')">RÉSERVER</button>
2790                </div>
2791            </div>
2792            <div class="boemvol-about-image">
2793                <img src="./images/terasse-cut_compressed.jpg" alt="Terasse Vollegas" />
2794            </div>
2795        </div>
2796    </section>
2797
2798    <!-- Special Events Section -->
2799    <section class="special-events" id="special-events">
2800        <div class="special-events-content">
2801            <div class="events-card">
2802                <div class="snail-icon">
2803                    <img src="./images/snail_compressed.png" alt="Snail" />
2804                </div>
2805                <h2>Un dîner d'entreprise, un anniversaire<br>ou toute autre occasion spéciale ?</h2>
2806                <p>Organisez votre événement chez nous et profitez d'un moment inoubliable.</p>
2807                <a href="https://groupes.90folies.com" target="_blank" rel="noopener" class="events-btn">LET'S GO !</a>
2808            </div>
2809        </div>
2810    </section>
2811
2812<!-- Gallery -->
2813
2814<section class="gallery-section">
2815    <div class="gallery-container">
2816        <h2 class="gallery-title">Notre Galerie</h2>
2817        <div class="gallery-grid" id="galleryGrid" data-gallery-path="gallery-vollegas">
2818            <!-- Images will be dynamically loaded here -->
2819        </div>
2820    </div>
2821    
2822    <!-- Pass gallery images to JavaScript -->
2823    
2823<script>
2824        window.galleryImages = [{"thumb":"WhatsApp Image 2025-09-23 at 09.44.27 (1)_compressed.jpeg","full":"originals\/WhatsApp Image 2025-09-23 at 09.44.27 (1).jpeg"},{"thumb":"WhatsApp Image 2025-09-23 at 09.44.27_compressed.jpeg","full":"originals\/WhatsApp Image 2025-09-23 at 09.44.27.jpeg"},{"thumb":"WhatsApp Image 2025-09-23 at 09.44.28_compressed.jpeg","full":"originals\/WhatsApp Image 2025-09-23 at 09.44.28.jpeg"},{"thumb":"d49a09cf-4b49-4759-90c9-f051d095dd9a_compressed.jpg","full":"originals\/d49a09cf-4b49-4759-90c9-f051d095dd9a.jpg"},{"thumb":"f5147353-0183-4812-9c17-c42313fd4c69_compressed.jpg","full":"originals\/f5147353-0183-4812-9c17-c42313fd4c69.jpg"},{"thumb":"terasse_compressed.jpeg","full":"originals\/terasse.jpeg"}];
2825        window.galleryPath = "gallery-vollegas";
2826    </script>
2826
2827    
2828    <!-- Image popup modal -->
2829    <div class="gallery-modal" id="galleryModal">
2830        <div class="modal-backdrop" id="modalBackdrop"></div>
2831        <div class="modal-content">
2832            <button class="modal-close" id="modalClose">&times;</button>
2833            <div class="modal-image-wrap" id="modalImageWrap">
2834                <img class="modal-image" id="modalImage" src="" alt="">
2835                <div class="modal-image-loader"></div>
2836            </div>
2837            <div class="modal-nav">
2838                <button class="modal-prev" id="modalPrev">&#8249;</button>
2839                <button class="modal-next" id="modalNext">&#8250;</button>
2840            </div>
2841            <div class="modal-counter" id="modalCounter"></div>
2842        </div>
2843    </div>
2844</section> 
2845<!-- Join Us Section -->
2846<section class="join-us">
2847    <div class="join-us-box">
2848        <div class="join-us-content">
2849            <div class="join-us-text">
2850                <div class="join-us-text-row">
2851                    <h2>Envie de nous rejoindre ?</h2>
2852                    <p>Postule maintenant !</p>
2853                </div>
2854                <div class="join-us-buttons">
2855                    <a href="https://jobs.90folies.com/" target="_blank" class="join-btn primary">VOIR LES OFFRES</a>
2856                    <a href="/contact" class="join-btn secondary">CANDIDATURE SPONTANÉE</a>
2857                </div>
2858            </div>
2859            <div class="join-us-image">
2860                <img src="./images/Skate.png" alt="Skateboard" />
2861            </div>
2862        </div>
2863    </div>
2864</section> 
2865    <!-- Footer -->
2866    <footer class="footer">
2867        <div class="footer-content">
2868            <div class="footer-logo">
2869                <img src="./images/Logo.svg" alt="nonante folies">
2870                <div class="footer-legal-links">
2871                    <a href="/conditions">Conditions générales</a>
2872                    <a href="/privacy">Politique de confidentialité</a>
2873                </div>
2874                <p>© Crédits photos/design</p>
2875            </div>
2876            <div class="footer-newsletter">
2877                <h3>Newsletter</h3>
2878                <a href="https://projet-live.typeform.com/to/B2sNyLe2" target="_blank">Sois pas le dernier au courant</a>
2879            </div>
2880            <div class="footer-contact">
2881                <h3>Contact</h3>
2882                <a href="/contact">Nous contacter</a>
2883                <p>Boemvol: +32 2 681 27 58</p>
2884                <p>Volle Gas: +32 2 502 89 17</p>
2885                <p>Miroir: +32 2 881 29 64</p>
2886                <div class="social-links">
2887                    <a href="https://instagram.com/nonantefolies" target="_blank" title="Instagram">
2888                        <svg class="instagram-icon" viewBox="0 0 24 24">
2889                            <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.40s-.644-1.44-1.439-1.44z"/>
2890                        </svg>
2891                    </a>
2892                    <a href="https://www.linkedin.com/company/90-folies/" target="_blank" title="LinkedIn">
2893                        <svg class="linkedin-icon" viewBox="0 0 24 24">
2894                            <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
2895                        </svg>
2896                    </a>
2897                </div>
2898            </div>
2899        </div>
2900    </footer>
2901
2902    
2902<script src="./js/scripts.js"></script>
2902
2903</body>
2904</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.