PageSourceSearch

https://morgny.fr/

html morgny.fr collected 2026-10-03 01:49:25 UTC 101,222 bytes, 1,835 lines download raw bytes

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Mairie de Morgny (27150)</title>
7    <!-- Ajout d'une police Google moderne et élégante -->
8    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
9    <style>
10        :root {
11            --primary: #1e3a8a;
12            --primary-light: #3b82f6;
13            --text-dark: #1e293b;
14            --bg-color: #f0f4f8;
15        }
16
17        body, html {
18            margin: 0;
19            padding: 0;
20            font-family: 'Poppins', sans-serif;
21            background-color: var(--bg-color);
22            color: var(--text-dark);
23        }
24        
25                /* 1. L'En-tête Immersif avec image panoramique */
26        header {
27            /* La nouvelle image de fond avec un léger voile bleu pour que le texte blanc reste lisible */
28            background: linear-gradient(to bottom, rgba(30, 58, 138, 0.3), rgba(0, 0, 0, 0.15)), 
29                        url('http://www.morgny.fr/entete.png') center/cover no-repeat;
30            
31            height: 15vh; /* Hauteur réduite à 15% selon votre réglage */
32            min-height: 200px; /* Adapté pour un bandeau fin */
33            
34            display: flex;
35            flex-direction: column;
36            justify-content: center;
37            align-items: center;
38            text-align: center;
39            color: white;
40            padding: 0 20px 30px 20px; /* L'espace en bas pour la barre flottante */
41        }
42
43
44        /* 2. Le Conteneur Principal */
45        .container {
46            max-width: 1200px;
47            margin: 0 auto;
48            padding: 0 20px;
49            position: relative; /* Important pour superposer à l'image */
50        }
51
52        /* 3. La Barre d'Infos en "Glassmorphisme" (Effet verre) */
53        .info-bar {
54            margin-top: -50px; /* Fait remonter la barre sur l'image de fond */
55            background: rgba(255, 255, 255, 0.85); /* Fond blanc légèrement transparent */
56            backdrop-filter: blur(12px); /* L'effet de flou (magique !) */
57            -webkit-backdrop-filter: blur(12px);
58            padding: 25px;
59            border-radius: 16px;
60            display: flex;
61            flex-wrap: wrap;
62            justify-content: space-around;
63            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
64            border: 1px solid rgba(255,255,255,0.5);
65            margin-bottom: 25px;
66            z-index: 10;
67        }
68        .info-item {
69            margin: 10px;
70            font-size: 1.05em;
71            color: var(--text-dark);
72            display: flex;
73            align-items: center;
74            gap: 8px;
75        }
76        .info-item strong { color: var(--primary); }
77
78        /* 4. Grille et Cartes modernes */
79        .widgets-grid {
80            display: grid;
81            grid-template-columns: 1fr 2fr; 
82            gap: 30px;
83            margin-bottom: 40px;
84        }
85        @media (max-width: 900px) {
86            .widgets-grid { grid-template-columns: 1fr; }
87            header h1 { font-size: 2.5em; }
88        }
89
90        .card {
91            background: white;
92            border-radius: 16px;
93            padding: 30px;
94            box-shadow: 0 8px 25px rgba(0,0,0,0.04); /* Ombre beaucoup plus douce et diffuse */
95            display: flex;
96            flex-direction: column;
97            border-top: 5px solid var(--primary); /* Le liseret passe en haut pour plus de modernité */
98            transition: transform 0.3s ease;
99        }
100        .card:hover {
101            transform: translateY(-5px); /* Petit effet de soulèvement au survol */
102        }
103        .card h2 {
104            color: var(--primary);
105            margin-top: 0;
106            font-size: 1.5em;
107            margin-bottom: 20px;
108            display: flex;
109            align-items: center;
110            gap: 10px;
111        }
112
113/* 4.5 Boutons de Démarches Rapides */
114        .quick-links {
115            display: grid;
116            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
117            gap: 20px;
118            margin-bottom: 40px;
119        }
120        .quick-btn {
121            background: white;
122            border-radius: 12px;
123            padding: 10px 15px;
124            text-align: center;
125            color: var(--primary);
126            text-decoration: none;
127            font-weight: 600;
128            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
129            border: 1px solid #e2e8f0;
130            transition: all 0.3s ease;
131            display: flex;
132            flex-direction: column;
133            align-items: center;
134            gap: 6px;
135        }
136        .quick-btn:hover {
137            transform: translateY(-4px);
138            background: var(--primary);
139            color: white;
140            box-shadow: 0 10px 20px rgba(30,58,138,0.15);
141        }
142        .quick-btn svg {
143            width: 32px;
144            height: 32px;
145            fill: currentColor;
146        }
147
148
149
150        /* 5. Intégration des Iframes */
151        .iframe-container {
152            flex-grow: 1;
153            width: 100%;
154            display: flex;
155            justify-content: center;
156            align-items: flex-start;
157        }
158        /* Panneau Pocket */
159        .iframe-container iframe.pp-widget {
160            width: 330px;
161            height: 650px;
162            border: none;
163            border-radius: 14px;
164            box-shadow: 0 4px 15px rgba(0,0,0,0.08);
165        }
166        /* Facebook SociableKIT */
167        .iframe-container iframe.fb-widget {
168            width: 100%;
169            height: 650px;
170            border: none;
171            border-radius: 14px;
172            box-shadow: 0 4px 15px rgba(0,0,0,0.08);
173        }
174
175        /* Pied de page */
176        footer {
177            text-align: center;
178            padding: 30px 20px;
179            margin-top: 40px;
180            background-color: #0f172a;
181            color: #94a3b8;
182            font-size: 0.9em;
183        }
184
185        /* --- NOUVEAU : Barre de Navigation (Fixe & Glassmorphism) --- */
186        nav {
187            position: sticky; /* Reste collé en haut au défilement */
188            top: 0;
189            z-index: 1000;
190            background: rgba(255, 255, 255, 0.9);
191            backdrop-filter: blur(10px);
192            -webkit-backdrop-filter: blur(10px);
193            border-bottom: 1px solid rgba(0,0,0,0.05);
194            padding: 5px 20px;
195            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
196        }
197        .nav-container {
198            max-width: 1200px;
199            margin: 0 auto;
200            display: flex;
201            justify-content: space-between;
202            align-items: center;
203        }
204        .nav-logo {
205            font-weight: 700;
206            font-size: 1.2em;
207            color: var(--primary);
208            text-decoration: none;
209            display: flex;
210            align-items: center;
211            gap: 10px;
212        }
213        
214		.nav-links {
215            display: flex;
216            gap: 25px; /* C'est cette ligne qui crée les espaces ! */
217            align-items: center;
218        }
219		
220		.nav-links a {
221            text-decoration: none;
222            color: var(--text-dark);
223            font-weight: 600;
224            font-size: 0.95em;
225            transition: color 0.3s;
226            position: relative; /* Indispensable pour l'animation du soulignement */
227            padding-bottom: 5px; /* Laisse un peu de place pour le trait en dessous */
228        }
229        
230        .nav-links a:hover {
231            color: var(--primary); /* Le texte devient bleu foncé au survol */
232        }
233
234        /* L'effet de soulignement animé */
235        .nav-links a::after {
236            content: '';
237            position: absolute;
238            width: 0; /* Au repos, le trait a une largeur de 0 (il est invisible) */
239            height: 3px; /* Épaisseur du trait */
240            bottom: 0;
241            left: 50%; /* Commence l'animation depuis le centre du mot */
242            background-color: var(--primary); /* Trait de couleur bleu institutionnel */
243            transition: all 0.3s ease-in-out; /* Durée de l'animation */
244            border-radius: 2px;
245        }
246
247        .nav-links a:hover::after {
248            width: 100%; /* Au survol, le trait prend toute la largeur du mot */
249            left: 0; /* Le trait s'étend vers la gauche et la droite */
250        }
251                /* Le bouton burger est caché sur ordinateur */
252        .mobile-menu-btn {
253            display: none;
254            background: none;
255            border: none;
256            cursor: pointer;
257            padding: 5px;
258        }
259        .mobile-menu-btn svg {
260            width: 30px;
261            height: 30px;
262            fill: var(--primary);
263        }
264
265        /* --- Adaptation pour les Téléphones Portables --- */
266        @media (max-width: 768px) {
267            /* 1. On affiche le bouton Burger */
268            .mobile-menu-btn {
269                display: block;
270            }
271            
272            /* 2. On transforme le menu horizontal en menu déroulant vertical */
273            .nav-links {
274                display: none; /* Caché par défaut */
275                position: absolute;
276                top: 100%; /* S'accroche juste en dessous de la barre blanche */
277                left: 0;
278                width: 100%;
279                background: rgba(255, 255, 255, 0.98);
280                backdrop-filter: blur(10px);
281                flex-direction: column;
282                padding: 20px 0;
283                box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
284                border-top: 1px solid #f1f5f9;
285            }
286            
287            /* 3. Quand le menu est "ouvert" (classe active ajoutée par le clic) */
288            .nav-links.active {
289                display: flex;
290            }
291            
292            /* 4. On espace bien les gros liens pour qu'ils soient faciles à toucher au doigt */
293            .nav-links a {
294                padding: 15px 20px;
295                border-bottom: 1px solid #f8fafc;
296                font-size: 1.1em;
297            }
298        }
299
300
301        /* --- NOUVEAU : Pied de page officiel --- */
302        footer {
303            background-color: white;
304            border-top: 1px solid #e2e8f0;
305            padding: 50px 20px 20px;
306            margin-top: 60px;
307            color: var(--text-dark);
308        }
309        .footer-container {
310            max-width: 1200px;
311            margin: 0 auto;
312            display: flex;
313            flex-wrap: wrap;
314            gap: 40px;
315            justify-content: space-between;
316            margin-bottom: 30px;
317        }
318        .footer-marianne {
319            max-width: 150px; /* Taille du logo officiel */
320        }
321        .footer-links h3 {
322            color: var(--primary);
323            margin-top: 0;
324            font-size: 1.1em;
325            margin-bottom: 15px;
326        }
327        .footer-links ul {
328            list-style: none;
329            padding: 0;
330            margin: 0;
331            line-height: 1.8;
332        }
333        .footer-links a {
334            color: #64748b;
335            text-decoration: none;
336            font-size: 0.9em;
337        }
338        .footer-links a:hover {
339            text-decoration: underline;
340        }
341        .footer-bottom {
342            text-align: center;
343            padding-top: 20px;
344            border-top: 1px solid #f1f5f9;
345            color: #94a3b8;
346            font-size: 0.85em;
347        }
348
349        /* --- NOUVEAU : Design de la Pop-up (Modale) --- */
350        .modal-overlay {
351            display: none; /* Cachée par défaut */
352            position: fixed;
353            top: 0; left: 0; width: 100%; height: 100%;
354            background: rgba(15, 23, 42, 0.6); /* Fond sombre */
355            backdrop-filter: blur(5px); /* Effet flouté très classe */
356            z-index: 2000; /* Toujours par-dessus le reste */
357            overflow-y: auto;
358        }
359        
360        .modal-box {
361            background: white;
362            max-width: 850px;
363            margin: 50px auto;
364            border-radius: 20px;
365            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
366            position: relative;
367            animation: apparitionModale 0.3s ease-out;
368            overflow: hidden;
369        }
370
371        @keyframes apparitionModale {
372            from { opacity: 0; transform: translateY(20px); }
373            to { opacity: 1; transform: translateY(0); }
374        }
375
376        .modal-close {
377            position: absolute;
378            top: 20px; right: 25px;
379            font-size: 30px;
380            color: #94a3b8;
381            background: none;
382            border: none;
383            cursor: pointer;
384            transition: color 0.2s;
385        }
386        .modal-close:hover { color: #e1000f; }
387
388        .modal-header {
389            padding: 30px 40px 10px;
390            border-bottom: 1px solid #f1f5f9;
391        }
392        .modal-header h2 {
393            margin: 0;
394            color: var(--primary);
395            font-size: 2em;
396        }
397
398        .modal-body {
399            padding: 30px 40px 40px;
400            display: flex;
401            gap: 40px;
402        }
403
404        .elus-photo {
405            flex: 1;
406            max-width: 300px;
407        }
408        .elus-photo img {
409            width: 100%;
410            border-radius: 12px;
411            box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
412            object-fit: cover;
413        }
414
415        .elus-texte {
416            flex: 2;
417            color: #475569;
418            line-height: 1.7;
419        }
420        .elus-texte h3 {
421            color: var(--text-dark);
422            margin-top: 0;
423            font-size: 1.3em;
424        }
425        .elus-texte hr {
426            border: none;
427            border-top: 1px solid #e2e8f0;
428            margin: 25px 0;
429        }
430        .elus-liste {
431            list-style: none;
432            padding: 0;
433            margin: 0;
434        }
435        .elus-liste li {
436            margin-bottom: 10px;
437            font-size: 1.05em;
438        }
439        .elus-liste li strong { color: var(--primary); }
440
441        /* Adaptation pour les téléphones */
442        @media (max-width: 768px) {
443            .modal-box { margin: 20px; width: auto; }
444            .modal-body { flex-direction: column; padding: 20px; gap: 20px; }
445            .elus-photo { max-width: 100%; }
446        }
447
448                       /* Nouveaux styles pour la barre d'infos (PC et Mobile) */
449        
450                /* 1. Sur Ordinateur (Par défaut) */
451        .info-bar-responsive {
452            display: flex;
453            align-items: center;
454            justify-content: flex-start; /* Aligne le contenu à gauche comme les widgets */
455            padding: 25px 40px; /* Plus large sur les côtés pour remplir l'espace */
456            gap: 50px; /* Bel espace entre photo et textes */
457            width: 100%; /* Prend toute la place comme le reste du site */
458            box-sizing: border-box; /* Évite que ça dépasse à droite */
459            margin: -50px 0 25px 0; /* Plus besoin du 'auto', elle s'aligne toute seule */
460        }
461        
462        .info-photo {
463            flex: 0 0 180px;
464        }
465        
466        .info-photo img {
467            width: 100%;
468            height: auto;
469            border-radius: 10px;
470            object-fit: cover;
471            display: block;
472            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
473        }
474        
475        .info-textes {
476            flex: 1; /* Prend tout l'espace restant pour éviter de casser sur 2 lignes */
477            display: grid;
478            grid-template-columns: auto auto; /* Les colonnes s'adaptent au texte */
479            gap: 15px 30px; 
480            white-space: nowrap; /* EMPÊCHE la coupure de l'adresse sur ordinateur ! */
481        }
482        
483        .info-textes .info-item {
484            margin: 0;
485            font-size: 1.05em;
486            color: var(--text-dark);
487            display: flex;
488            align-items: center; 
489            gap: 8px; 
490            justify-content: flex-start;
491        }
492        
493        .info-textes .info-item a {
494            color: var(--text-dark);
495            text-decoration: none;
496        }
497        
498        .info-textes .info-item strong {
499            color: var(--primary);
500        }
501
502        /* 2. Sur Téléphone (On empile TOUT et on supprime le trou blanc) */
503        @media (max-width: 900px) { 
504            .info-bar-responsive {
505                flex-direction: column; 
506                gap: 20px; 
507                padding: 20px;
508            }
509            
510            .info-photo {
511                flex: none; /* Règle le problème du trou blanc (flex-basis bloquait la hauteur) */
512                width: 100%;
513                max-width: 200px; 
514                margin: 0 auto; 
515            }
516            
517            .info-textes {
518                display: flex;
519                flex-direction: column; /* Tout empilé verticalement */
520                gap: 12px;
521                width: 100%;
522                align-items: center; 
523                white-space: normal; /* Sur mobile, l'adresse a le droit de passer à la ligne ! */
524            }
525            
526            .info-textes .info-item {
527                flex-direction: column; /* L'adresse passe EN DESSOUS de son icône sur mobile */
528                text-align: center; 
529                gap: 2px;
530            }
531        }
532
533        /* --- Correction Mobile pour le Footer --- */
534        @media (max-width: 768px) {
535            .footer-container {
536                display: grid !important; /* Force la grille sur mobile */
537                grid-template-columns: auto 1fr; /* Colonne 1: Logo (auto) | Colonne 2: Mairie (reste) */
538                grid-template-areas: 
539                    "logo mairie"
540                    "legal legal";
541                gap: 25px 15px; /* Espace entre les éléments */
542                align-items: start; /* Aligne les blocs par le haut */
543            }
544            
545            .footer-marianne {
546                grid-area: logo; /* Place le logo dans la case 'logo' en haut à gauche */
547            }
548            
549            .footer-container .footer-links:nth-child(2) {
550                grid-area: mairie; /* Place la mairie dans la case 'mairie' en haut à droite */
551                text-align: left;
552            }
553            
554            .footer-container .footer-links:nth-child(3) {
555                grid-area: legal; /* Place les infos légales en bas, sur toute la largeur */
556                text-align: center; /* Centre le texte */
557                margin-top: 15px;
558                width: 100%;
559            }
560        }
561
562
563
564    </style>
565</head>
566<body>
567    <!-- Barre de Navigation Fixe -->
568  <!--<nav>
569        <div class="nav-container">
570            <a href="/" class="nav-logo">
571                <svg width="24" height="24" viewBox="0 0 24 24" fill="#1e3a8a"><path d="M12 3L1 9l4 2.18v6L12 21l7-3.82v-6l2-1.09V17h2V9L12 3zm
5716.82 6L12 12.72 5.18 9 12 5.28 18.82 9z"/></svg>
572                Mairie de Morgny
573            </a>-->
574			 <!-- NOUVEAU : Le bouton Burger pour mobile -->
575            <!--<button class="mobile-menu-btn" onclick="toggleMenu()" aria-label="Menu">
576                <svg viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
577            </button>
578			
579            <div class="nav-links" id="menu-principal">
580                <a href="#">Accueil</a>
581                <a href="#" onclick="ouvrirModal('modal-commune'); return false;">La Commune</a>
582                <a href="#" onclick="ouvrirModal('modal-vie-locale'); toggleMenu(); return false;">Les Commerces et Associations</a>
583				<a href="https://www.cdc-vexin-normand.fr/" target="_blank" rel="noopener noreferrer">La Communauté de commune</a>
584				<a href="https://www.sygom.fr/" target="_blank" rel="noopener noreferrer">Le Sygom<a>
585                <a href="mailto:[email protected]">Contact</a>
586            </div>-->
587        </div>
588    </nav>
589
590    <!-- Nouvel En-tête Immersif -->
591    <header>
592        <h1 style="font-size: 3.5rem; margin: 0;">Mairie de Morgny</h1>
593    </header>
594
595    <div class="container">
596
597                                      <!-- Barre d'infos "Effet Verre" superposée à l'image -->
598        <div class="info-bar info-bar-responsive">
599            
600            <!-- À gauche : La photo -->
601            <div class="info-photo">
602                <img 
603                    src="https://www.morgny.fr/wp-content/uploads/2014/11/11-Nov-2014-Mairie.jpg" 
604                    alt="Mairie de Morgny"
605                >
606            </div>
607
608            <!-- À droite : Les textes -->
609            <div class="info-textes">
610                
611                <div class="info-item">
612                    <strong>📍 Adresse :</strong> 
613                    <a href="https://www.google.com/maps/search/?api=1&query=Mairie+de+Morgny+1+Place+de+la+Mairie+27150+Morgny+France" target="_blank" rel="noopener noreferrer">3 Rue Saint Adrien, 27150 Morgny</a>
614                </div>
615                
616                <div class="info-item">
617                    <strong>📞 Téléphone :</strong> 
618                    <a href="tel:+33232555581">02 32 55 55 81</a>
619                </div>
620
621                <div class="info-item">
622                    <strong>🕒 Ouvert :</strong> 
623                    <span>Lun, Mar, Ven, Sam : 09h00 – 12h00</span>
624                </div>
625                
626                <div class="info-item">
627                    <strong>✉️ Email :</strong> 
628                    <a href="mailto:[email protected]">[email protected]</a>
629                </div>
630
631            </div>
632        </div>
633
634                <!-- Démarches Rapides (Boutons) -->
635        
636        <!-- PREMIÈRE LIGNE -->
637        <div class="quick-links" style="margin-bottom: 10px;">
638                        <a href="#" class="quick-btn" onclick="ouvrirModal('modal-commune'); return false;">
639                <svg viewBox="0 0 24 24"><path d="M4 10h3v7H4zm6.5 0h3v7h-3zM2 19h20v3H2zm15-9h3v7h-3zm-5-9L2 6v2h20V6L12 1z"/></svg>
640                La Commune
641            </a>
642            <a href="#" class="quick-btn" onclick="ouvrirModal('modal-elus'); return false;">
643                <svg viewBox="0 0 24 24"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
644                Les Élus
645            </a>
646            <a href="#" class="quick-btn" onclick="ouvrirModal('modal-urba'); return false;">
647                <svg viewBox="0 0 24 24"><path d="M15 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V7l-5-5zm-1 12h-4v-2h4v2zm0-4h-4V8h4v2zm-2-5V3.5L16.5 8H12z"/></svg>
648                Urbanisme / PLU
649            </a>
650            <a href="#" class="quick-btn" onclick="ouvrirModal('modal-ecole'); return false;">
651                <svg viewBox="0 0 24 24">
651<path d="M12 3L1 9l4 2.18v6L12 21l7-3.82v-6l2-1.09V17h2V9L12 3zm6.82 6L12 12.72 5.18 9 12 5.28 18.82 9zM17 15.99l-5 2.73-5-2.73v-3.72L12 15l5-2.73v3.72z"/></svg>
652                École & Périscolaire
653            </a>
654            <a href="#" class="quick-btn" onclick="ouvrirModal('modal-conseils'); chargerConseils(); return false;">
655                <svg viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>
656                Comptes Rendus de conseil
657            </a>
658        </div>
659
660        <!-- DEUXIÈME LIGNE -->
661        <div class="quick-links" style="margin-top: 7px;">
662            <a href="#" class="quick-btn" onclick="ouvrirModal('modal-salle-fetes'); return false;">
663                <svg viewBox="0 0 24 24"><path d="M19 21H5V10h14v11zm-2-9H7v7h10v-7zM21 8H3V4h18v4zm-2-2H5v0h14v0z"/></svg>
664                Salle des Fêtes
665            </a>
666            <a href="#" class="quick-btn" onclick="ouvrirModal('modal-vie-locale'); return false;">
667                <svg viewBox="0 0 24 24"><path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z"/></svg>
668                Commerces & Associations
669            </a>
670            <a href="https://www.cdc-vexin-normand.fr/" target="_blank" rel="noopener noreferrer" class="quick-btn">
671                <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
672                La Communauté de communes
673            </a>
674            <a href="https://www.sygom.fr/" target="_blank" rel="noopener noreferrer" class="quick-btn">
675                <svg viewBox="0 0 24 24"><path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/></svg>
676                Le Sygom
677            </a>
678            <a href="mailto:[email protected]" class="quick-btn">
679                <svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
680                Contact
681            </a>
682        </div>
683
684
685
686        <!-- Grille des modules -->
687        <div class="widgets-grid">
688            
689                                  <!-- Colonne 1 : Panneau Pocket -->
690            <div class="card">
691                <h2>📱 <a href="https://www.panneaupocket.com" target="_blank" rel="noopener noreferrer" style="color: inherit; text-decoration: none; border-bottom: 2px solid var(--primary);">Actualités & Alertes</a></h2>
692                
693                <!-- Texte explicatif généré -->
694                <p style="font-size: 0.95em; color: #475569; margin-top: -5px; margin-bottom: 20px; line-height: 1.5;">
695                    <strong>Restez informés en temps réel !</strong> <a href="https://www.panneaupocket.com" target="_blank" rel="noopener noreferrer" style="color: var(--primary); font-weight: bold; text-decoration: underline;">Téléchargez l'application gratuite PanneauPocket</a> sur votre smartphone (Apple ou Android) pour recevoir directement nos alertes (météo, travaux) et l'actualité de Morgny. Vous pouvez également y <strong>signaler facilement un dysfonctionnement</strong> sur la commune.
696                </p>
697
698                <div class="iframe-container">
699                    <iframe class="pp-widget" src="https://app.panneaupocket.com/embeded/277329791?mode=widget&autoNavigation=1" title="Panneau Pocket Morgny"></iframe>
700                </div>
701            </div>
702                         <!-- Colonne 2 : Facebook (Curator.io) -->
703            <div class="card">
704                <h2>👥 <a href="https://www.facebook.com/profile.php?id=61570739760211" target="_blank" rel="noopener noreferrer" style="color: inherit; text-decoration: none; border-bottom: 2px solid var(--primary);">Page Officielle (Facebook)</a></h2>
705                
706                <!-- Texte explicatif généré -->
707                <p style="font-size: 0.95em; color: #475569; margin-top: -5px; margin-bottom: 20px; line-height: 1.5;">
708                    <strong>
708Suivez la vie de la commune !</strong> Abonnez-vous à la <a href="https://www.facebook.com/profile.php?id=61570739760211" target="_blank" rel="noopener noreferrer" style="color: var(--primary); font-weight: bold; text-decoration: underline;">Page Officielle de la Mairie</a> pour recevoir nos informations et communications officielles. Pour échanger entre habitants, partager vos initiatives ou entraider vos voisins, rejoignez également notre <a href="https://www.facebook.com/groups/519444389508638/" target="_blank" rel="noopener noreferrer" style="color: var(--primary); font-weight: bold; text-decoration: underline;">Groupe Facebook collaboratif</a>.
709                </p>
710
711                <div class="iframe-container" style="background: #fff; min-height: 600px; padding-top: 15px;">
712                    
713                    <!-- COLER ICI LE CODE DONNÉ PAR CURATOR.IO -->
714                    <!-- Il ressemble souvent à ça : -->
715                    <div id="curator-feed-default-feed-layout">
716                        <a href="https://curator.io" target="_blank" class="crt-logo crt-tag">Powered by Curator.io</a>
717                    </div>
718                   <!-- The Javascript can be moved to the end of the html page before the </body> tag -->
719                    
719<script type="text/javascript">
720                    /* curator-feed-default-feed-layout */
721                    (function(){
722                    var i,e,d=document,s="script";i=d.createElement("script");i.async=1;i.charset="UTF-8";
723                    i.src="https://cdn.curator.io/published/2af1ab1f-7a56-4eb2-8f82-de4adf22c3c7.js";
724                    e=d.getElementsByTagName(s)[0];e.parentNode.insertBefore(i, e);
725                    })();
726                    </script>
726
727                    <!-- FIN DU CODE CURATOR -->
728
729                </div>
730            </div>
731
732        </div>
733    </div>
734
735        <!-- Pied de page Officiel -->
736    <footer>
737        <div class="footer-container">
738            <!-- Bloc Marianne (Logo officiel de l'État) -->
739            <div class="footer-marianne">
740                <img src="http://www.morgny.fr/logo-RF.png" alt="République Française" width="100%" style="min-width: 120px;">
741
742            </div>
743
744            <!-- Liens de la Mairie -->
745            <div class="footer-links">
746                <h3>Mairie de Morgny</h3>
747                <ul>
748                    <li>3 Rue saint Adrien</li>
749                    <li>27150 Morgny</li>
750                    <li>Tél : 02 32 55 55 81</li>
751                    <li>[email protected]</li>
752                </ul>
753            </div>
754
755            <!-- Liens Légaux -->
756            <div class="footer-links">
757                <h3>Informations légales</h3>
758                <ul>
759                    <li><a href="#" onclick="ouvrirModal('modal-mentions'); return false;">Mentions légales</a></li>
760                    <li><a href="#" onclick="ouvrirModal('modal-confidentialite'); return false;">Politique de confidentialité</a></li>
761                    <li><a href="#" onclick="ouvrirModal('modal-accessibilite'); return false;">Accessibilité : non conforme</a></li>
762                    <li><a href="#" onclick="ouvrirModal('modal-cookies'); return false;">Gestion des cookies</a></li>
763                </ul>
764            </div>
765        </div>
766        
767        <div class="footer-bottom">
768            <p>&copy; 2026 Mairie de Morgny. Tous droits réservés. Site mis à jour le 13 Avril 2026.</p>
769			<p>Site développé, financé et maintenue par Mikael Dubois (<a href="mailto:[email protected]">[email protected]</a>).</p>
770        </div>
771    </footer>
772    <!-- Structure de la Pop-up "Élus" -->
773    <div id="modal-elus" class="modal-overlay" onclick="fermerModal(event, 'modal-elus')">
774        <div class="modal-box">
775            <!-- Bouton fermer (X) -->
776            <button class="modal-close" onclick="fermerModalForce('modal-elus')">&times;</button>
777            
778            <div class="modal-header">
779                <h2>Le Conseil Municipal</h2>
780            </div>
781            
782            <div class="modal-body">
783                <!-- Colonne de gauche : La photo -->
784                <div class="elus-photo">
785                    <!-- Remplacez le lien src par la photo officielle -->
786                    <img src="https://www.morgny.fr/wp-content/uploads/2014/11/maire2.png" alt="L'équipe municipale">
787                </div>
788                
789                <!-- Colonne de droite : Le texte -->
790                <div class="elus-texte">
791                    <h3>Le mot du Maire</h3>
792                    <p>Notre équipe met en œuvre une politique de proximité, fondée sur la responsabilité, la transparence et la maîtrise des finances publiques. Les projets menés sont concrets, utiles et sans augmentation de la fiscalité locale. Notre priorité demeure l’avenir de Morgny, construit avec et pour ses habitants.</p>
793                    
794                    <hr>
795                    
796                    <h3>Vos élus</h3>
797                    <ul class="elus-liste">
798                        <li><strong>GRIFFON Christophe</strong> - Maire de Morgny</li>
799                        <li><strong>VILOIN Frederic</strong> - 1er Adjoint</li>
800                        <li><strong>CORREIA Alison</strong> - Conseiller municipal</li>
801						<li><strong>CHALAT Eric</strong> - Conseiller municipal</li>
802						<li><strong>DELAPLACE Angèle</strong> - Conseiller municipal</li>
803						<li><strong>DUBOIS Mikael</strong> - Conseiller municipal</li>
804						<li><strong>IDE Nadège</strong> - Conseiller municipal</li>
805						<li><strong>GASQ Philippe</strong> - Conseiller municipal</li>
806						<li><strong>L’HELGUEN Milène</strong> - Conseiller municipal</li>
807						<li><strong>LETAILLEUR Stéphane</strong> - Conseiller municipal</li>
808						<li><strong>LEFEVRE Laure</strong> - Conseiller municipal</li>
809						<li><strong>WEICHERDING Christophe</strong> - Conseiller municipal</li>
810						<li><strong>SION Mathilde</strong> - Conseiller municipal</li>
811                    </ul>
812                </div>
813            </div>
814        </div>
815    </div>
816	    <!-- Structure de la Pop-up "Urbanisme" -->
817    <div id="modal-urba" class="modal-overlay" onclick="fermerModal(event, 'modal-urba')">
818        <div class="modal-box">
819            <!-- Bouton fermer (X) -->
820            <button class="modal-close" onclick="fermerModalForce('modal-urba')">&times;</button>
821            
822            <div class="modal-header">
823                <h2>Urbanisme & PLU</h2>
824            </div>
825            
826            <div class="modal-body">
827                <!-- Colonne de gauche : Image d'illustration -->
828                <div class="elus-photo">
829                    <img src="https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=400&q=80" alt="Plan local d'urbanisme">
830                </div>
831                
832                <!-- Colonne de droite : Le texte et les liens -->
833                <div class="elus-texte" style="overflow-y: auto; max-height: 50vh;">
834                    <h3>Plan Local d'Urbanisme (PLU)</h3>
835                    <p>En Janvier 2010 la commune a entamé le processus de création d'un plan local d'urbanisme dans le cadre de la loi SRU.</p>
836                    <p>Ce PLU a pour but d'établir un <strong>
836projet global d’urbanisme et d’aménagement</strong> du territoire, et de fixer en conséquence les règles générales d’utilisation du sol sur la commune.</p>
837                    <p>Le <a href="http://www.morgny.fr/wp-content/uploads/2015/01/4-REGLEMENT-Morgny.pdf" target="_blank" style="color: var(--primary); font-weight: bold;">Plan local d'urbanisme de Morgny</a> a été approuvé par le conseil municipal le 23/01/2015, il est donc applicable dès cette date.</p>
838                    
839                    <hr>
840                    
841                    <h3>Documents à consulter</h3>
842                    <p style="font-size: 0.9em; color: #64748b;">L'ensemble des pièces composant ce PLU se décompose comme suit :</p>
843                    <ul class="elus-liste" style="font-size: 0.9em;">
844                        <li><a href="http://www.morgny.fr/wp-content/uploads/2015/01/1.-DIAG-MORGNY-RV-A4.pdf" target="_blank" style="color: var(--primary); text-decoration: none;">1. RAPPORT DE PRÉSENTATION - VOLUME 1</a></li>
845                        <li><a href="http://www.morgny.fr/wp-content/uploads/2015/01/2.-rapport-PADD-morgny.pdf" target="_blank" style="color: var(--primary); text-decoration: none;">2. PROJET D’AMÉNAGEMENT ET DE DÉVELOPPEMENT DURABLE</a></li>
846                        <li><a href="http://www.morgny.fr/wp-content/uploads/2015/01/3.-Orientations-dAménagement_Morgny.pdf" target="_blank" style="color: var(--primary); text-decoration: none;">3. LES ORIENTATIONS D’AMÉNAGEMENT ET DE PROGRAMMATION</a></li>
847                        <li><a href="http://www.morgny.fr/wp-content/uploads/2015/01/5.-volume-2-Morgny.pdf" target="_blank" style="color: var(--primary); text-decoration: none;">4. RAPPORT DE PRÉSENTATION - VOLUME 2</a></li>
848                        <li><a href="http://www.morgny.fr/wp-content/uploads/2015/01/4-REGLEMENT-Morgny.pdf" target="_blank" style="color: var(--primary); text-decoration: none;">5. RÈGLEMENT (Plan local D'urbanisme)</a></li>
849                        <li><a href="http://www.morgny.fr/wp-content/uploads/2015/01/6a-zonages-morgny-2000-1.pdf" target="_blank" style="color: var(--primary); text-decoration: none;">6a. PLAN DE DÉLIMITATION DE ZONES – plan général</a></li>
850                        <li><a href="http://www.morgny.fr/wp-content/uploads/2015/01/6b-zonages-Morgny-7000-1.pdf" target="_blank" style="color: var(--primary); text-decoration: none;">6b. PLAN DE DÉLIMITATION DE ZONES – partie centrale</a></li>
851                        <li>7. LES ANNEXES
852                            <ul style="padding-left: 20px; margin-top: 5px;">
853                                <li><a href="http://www.morgny.fr/wp-content/uploads/2015/01/7-annexe-morgny_aep_5000_1-A0.pdf" target="_blank" style="color: var(--primary); text-decoration: none;">7.1 PLAN MORGNY A0</a></li>
854                                <li><a href="http://www.morgny.fr/wp-content/uploads/2015/01/7.6-zonages-DPU-1.pdf" target="_blank" style="color: var(--primary); text-decoration: none;">7.2 ZONAGE DPU</a></li>
855                            </ul>
856                        </li>
857                    </ul>
858                </div>
859            </div>
860        </div>
861    </div>
862    <!-- Structure de la Pop-up "École & Périscolaire" -->
863    <div id="modal-ecole" class="modal-overlay" onclick="fermerModal(event, 'modal-ecole')">
864        <div class="modal-box">
865            <!-- Bouton fermer (X) -->
866            <button class="modal-close" onclick="fermerModalForce('modal-ecole')">&times;</button>
867            
868            <div class="modal-header">
869                <h2>École & Périscolaire</h2>
870            </div>
871            
872            <div class="modal-body">
873                <!-- Colonne de gauche : Image d'illustration -->
874                <div class="elus-photo">
875                    <img src="https://images.unsplash.com/photo-1503676260728-1c00da094a0b?auto=format&fit=crop&w=400&q=80" alt="Scolarité à Morgny">
876                </div>
877                
878                <!-- Colonne de droite : Le texte nettoyé -->
879                <div class="elus-texte" style="overflow-y: auto; max-height: 50vh;">
880                    <p style="font-size: 1.05em; font-weight: 500; color: var(--primary); margin-bottom: 25px;">
881                        Nos enfants sont accueillis dans deux sites scolaires pour lesquels nous fonctionnons en regroupement avec la commune voisine de Longchamps nommé Sivos Morgny-Longchamps.
882                    </p>
883
884                    <h3>Le site de Morgny : Maternelles</h3>
885                    <p>
885Les élèves de maternelle sont répartis en 2 classes : petite/moyenne Section et grande section/CP.</p>
886                    <ul class="elus-liste" style="background: #f8fafc; padding: 15px; border-radius: 8px; font-size: 0.95em; border-left: 4px solid var(--primary);">
887                        <li><strong>Directrice :</strong> Madame LAWNICZAK</li>
888                        <li><strong>Téléphone :</strong> 02 32 55 56 67 / 09 60 47 98 67</li>
889                        <li><strong>Email :</strong> <a href="mailto:[email protected]" style="color: var(--primary);">[email protected]</a></li>
890                    </ul>
891                    <p style="margin-top: 15px;"><strong>Horaires (Lun, Mar, Jeu, Ven) :</strong><br>
892                    9h00 - 12h00 / 13h30 – 16h30</p>
893
894                    <hr>
895
896                    <h3>Le site de Longchamps : Primaires</h3>
897                    <p>Les élèves sont répartis en 3 classes : CE1/CE2, CE2/CM1, CM1/CM2.</p>
898                    <ul class="elus-liste" style="background: #f8fafc; padding: 15px; border-radius: 8px; font-size: 0.95em; border-left: 4px solid var(--primary);">
899                        <li><strong>Directrice :</strong> Monsieur CHIAROT</li>
900                        <li><strong>Téléphone :</strong> 02 32 55 59 78</li>
901                        <li><strong>Email :</strong> <a href="mailto:[email protected]" style="color: var(--primary);">[email protected]</a></li>
902                    </ul>
903                    <p style="margin-top: 15px;"><strong>Horaires (Lun, Mar, Jeu, Ven) :</strong><br>
904                    8h50 – 11h50 / 13h20 – 16h20</p>
905
906                    <hr>
907
908                    <h3>Inscriptions</h3>
909                    <p>Pour les maternelles, les inscriptions ont lieu courant mars/avril lors de permanences données par les maîtresses. Pour inscrire un enfant, il faut :</p>
910                    <ul style="color: #475569; line-height: 1.6; padding-left: 20px;">
911                        <li>Le carnet de vaccination à jour.</li>
912                        <li>La feuille d’inscription délivrée au préalable par le secrétariat de la Mairie de résidence.</li>
913                    </ul>
914					
915					<hr>
916
917                    <h3>Assistantes MAternelles Agree</h3>
918                    <p>La commune de Morgny dispose d’assistantes maternelles agréées, offrant aux familles une solution d’accueil de proximité pour la garde des jeunes enfants.</p>
919                    <ul style="color: #475569; line-height: 1.6; padding-left: 20px;">
920                        <li><p>Carine LETAILLEUR :</p> 
921						<p>📍 31 Rue Saint Adrien</p>  
922						<p>📞 02 32 27 96 49</p> </li>
923                    </ul>
924					
925                </div>
926            </div>
927        </div>
928    </div>
929
930	    <!-- Structure de la Pop-up "Comptes Rendus de Conseils" -->
931    <div class="modal-overlay" id="modal-conseils" onclick="fermerModal(event, 'modal-conseils')">
932    <div class="modal-box">
933        <button class="modal-close" onclick="fermerModalForce('modal-conseils')">&times;</button>
934        
935        <div class="modal-header">
936            <h2>Comptes Rendus Municipaux</h2>
937        </div>
938
939        <div class="modal-body">
940            <div class="elus-photo">
941                <img src="https://images.unsplash.com/photo-1577415124269-fc1140a69e91?auto=format&fit=crop&w=400&q=80" alt="Réunions du conseil municipal">
942            </div>
943
944            <div class="elus-texte" style="overflow-y: auto; max-height: 50vh; width: 100%;">
945                <h3>Archives des Conseils Municipaux</h3>
946                <p style="font-size: 0.9em; color: #64748b; margin-bottom: 20px;">
947                    Retrouvez ci-dessous les procès-verbaux officiels triés par année. Le dossier de l'année en cours est ouvert par défaut.
948                </p>
949
950                <!-- Zone où les dossiers par année vont s'afficher -->
951                <div id="accordeon-conseils">
952                    <p style="color: #64748b; font-style: italic;">🔄 Recherche des archives en cours...</p>
953                </div>
954
955            </div>
956        </div>
957    </div>
958</div>
959
960    <!-- Structure de la Pop-up "La Commune" -->
961    <div id="modal-commune" class="modal-overlay" onclick="fermerModal(event, 'modal-commune')">
962        <div class="modal-box">
963            <!-- Bouton fermer (X) -->
964            <button class="modal-close" onclick="fermerModalForce('modal-commune')">&times;</button>
965            
966            <div class="modal-header">
967                <h2>Découvrir Morgny</h2>
968            </div>
969            
970            <div class="modal-body">
971                <!-- Colonne de gauche : Une belle photo de village de campagne -->
972                <div class="elus-photo">
973                    <img src="https://www.morgny.fr/Morgny.jpg" alt="Village de campagne" style="width: 100%; border-radius: 12px; object-fit: cover; min-height: 400px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);">
974                </div>
975                
976                <!-- Colonne de droite : Le texte de présentation -->
977                <div class="elus-texte" style="overflow-y: auto; max-height: 50vh;">
978                    <p style="font-size: 1.1em; color: var(--primary); font-weight: 500; margin-top: 0;">
979                        Bienvenue à Morgny, un village paisible et accueillant situé au cœur du Vexin Normand, dans le département de l'Eure.
980                    </p>
981                    
982                    <p>
983                        Notre commune offre un cadre de vie privilégié, alliant le charme de la campagne normande et la proximité des grands axes de communication. Avec ses paysages préservés, ses terres agricoles et son patrimoine rural, Morgny est un véritable havre de paix pour ses habitants.
984                    </p>
985                    
986                    <hr>
987                    
988                    <h3>Chiffres Clés</h3>
989                    <ul class="elus-liste" style="background: #f8fafc; padding: 15px; border-radius: 8px;">
990                        <li><strong>Département :</strong> Eure (27)</li>
991                        <li><strong>Région :</strong> Normandie</li>
992                        <li><strong>Code Postal :</strong> 27150</li>
993                        <li><strong>Gentilé :</strong> Les Morgnysiens et Morgnysiennes</li>
994                    </ul>
995                    
996                    <hr>
997                    
998                    <h3>Les Hammeaux</h3>
999                    <ul class="elus-liste" style="background: #f8fafc; padding: 15px; border-radius: 8px;">
1000                        <li>La Fontaine</li>
1001                        <li>La Lande Perrin</li>
1002                        <li>Le Beauthil</li>
1003                        <li>L'Anglet</li>
1004                        <li>Les Greniers</li>
1005                        <li>Saint Germain</li>
1006                        <li>Belleface</li>
1007                        <li>La curie</li>
1008                        <li>Le Vauroux</li>
1009                    </ul>
1010                    
1011                    <hr>
1012
1013
1014                    <h3>Cadre de vie & Animations</h3>
1015                    <p>
1016                        La vie du village est rythmée tout au long de l'année par les actions de la Mairie et le dynamisme de notre <strong>Comité des Fêtes</strong> (Foire à tout, rassemblements conviviaux, décorations de Noël...). 
1017                    </p>
1018                    <p>
1019                        Attachée à ses racines, la commune de Morgny veille à préserver son environnement naturel tout en modernisant ses équipements pour le confort de toutes les générations, de notre école maternelle jusqu'à nos aînés.
1020                    </p>
1021                </div>
1022            </div>
1023        </div>
1024    </div>
1025
1026    
1027
1028
1029
1030    <!-- Structure de la Pop-up "Commerces & Associations" -->
1031    <div id="modal-vie-locale" class="modal-overlay" onclick="fermerModal(event, 'modal-vie-locale')">
1032        <div class="modal-box" style="max-width: 1000px;"> <!-- J'ai élargi un peu la boîte pour que les 2 colonnes respirent -->
1033            <!-- Bouton fermer (X) -->
1034            <button class="modal-close" onclick="fermerModalForce('modal-vie-locale')">&times;</button>
1035            
1036            <div class="modal-header">
1037                <h2>Commerces & Associations de Morgny</h2>
1038            </div>
1039            
1040            <!-- Corps de la pop-up divisé en 2 colonnes égales -->
1041            <div class="modal-body" style="gap: 30px; align-items: stretch;">
1042                
1043                <!-- COLONNE 1 : Les Commerces et Artisans -->
1044                <div class="elus-texte" style="flex: 1; background: #f8fafc; padding: 25px; border-radius: 12px;
1044 border-top: 4px solid var(--primary); overflow-y: auto; max-height: 60vh;">
1045                    <h3 style="display: flex; align-items: center; gap: 10px; margin-top: 0; margin-bottom: 20px; position: sticky; top: -25px; background: rgba(248, 250, 252, 0.9); backdrop-filter: blur(8px); padding: 25px 0 15px 0; z-index: 10;">
1046                        <svg width="24" height="24" viewBox="0 0 24 24" fill="var(--primary)"><path d="M20 4H4v2h16V4zm1 10v-2l-1-5H4l-1 5v2h1v6h10v-6h4v6h2v-6h1zm-9 4H6v-4h6v4z"/></svg>
1047                        Commerces & Artisans
1048                    </h3>
1049                    
1050					<!-- Exemple de Commerce 1 -->
1051                    <div style="margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #e2e8f0;">
1052                        <h4 style="margin: 0 0 5px 0; color: var(--text-dark); font-size: 1.1em;">Agence Postale Communale</h4>
1053                        <p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">Agence postale communale : affranchissement et services La Poste en ligne</p>
1054						<p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">📍 3 rue Saint-Adrien, 27150 Morgny</p>
1055                        <a href="tel:+33000000000" style="font-size: 0.9em; color: var(--primary); text-decoration: none; font-weight: bold;">📞 02 32 55 94 46</a>
1056                    </div>
1057					
1058                    <!-- Exemple de Commerce 1 -->
1059                    <div style="margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #e2e8f0;">
1060                        <h4 style="margin: 0 0 5px 0; color: var(--text-dark); font-size: 1.1em;">JPK Potager et Plantes Fleuries</h4>
1061                        <p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">Culture de légumes et vente de fleurs/plantes (marchés, vente directe)</p>
1062						<p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">📍 23 rue Saint-Adrien, 27150 Morgny</p>
1063                        <a href="tel:+33000000000" style="font-size: 0.9em; color: var(--primary); text-decoration: none; font-weight: bold;">
1063📞 06 42 75 34 79</a>
1064                    </div>
1065                    
1066                    <!-- Exemple de Commerce 2 -->
1067                    <div style="margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #e2e8f0;">
1068                        <h4 style="margin: 0 0 5px 0; color: var(--text-dark); font-size: 1.1em;">SARL CADIEU</h4>
1069                        <p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">Maçonnerie générale, gros œuvre du bâtiment et Couverture</p>
1070						<p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">📍 2 rue Saint-Taurin, 27150 Morgny</p>
1071                        <a href="tel:+33000000000" style="font-size: 0.9em; color: var(--primary); text-decoration: none; font-weight: bold;">📞 02 32 27 90 01</a>
1072                    </div>
1073
1074                    <!-- Exemple de Commerce 3 -->
1075                    <div style="margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #e2e8f0;">
1076                        <h4 style="margin: 0 0 5px 0; color: var(--text-dark); font-size: 1.1em;">Auberge de la forêt</h4>
1077                        <p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">Restauration</p>
1078						<p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">📍 55 rue Saint Adrien, 27150 Morgny</p>
1079                        <a href="tel:+33000000000" style="font-size: 0.9em; color: var(--primary); text-decoration: none; font-weight: bold;">📞 02 32 27 27 37</a>
1080                    </div>
1081					
1082					
1083					 <!-- Exemple de Commerce 4 -->
1084					<div style="margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #e2e8f0;">
1085                        <h4 style="margin: 0 0 5px 0; color: var(--text-dark); font-size: 1.1em;">La ferme de Saint Germain</h4>
1086                        <p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">Vente de Legumes et Fraises</p>
1087						<p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">📍 21 rue du bel air, 27150 Morgny</p>
1088                        <a href="tel:+33000000000" style="font-size: 0.9em; color: var(--primary); text-decoration: none; font-weight: bold;">📞 06 86 13 97 22</a>
1089                    </div>
1090					
1091					<!-- Exemple de Commerce 5 -->
1092					<div style="margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #e2e8f0;">
1093                        <h4 style="margin: 0 0 5px 0; color: var(--text-dark); font-size: 1.1em;">Mme Olivia Maimbourg</h4>
1094                        <p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">Photographie (artisanal / indépendante)</p>
1095						<p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">📍 31 rue Saint-Adrien, 27150 Morgny</p>
1096                        <a href="tel:+33000000000" style="font-size: 0.9em; color: var(--primary); text-decoration: none; font-weight: bold;">📞 07 88 82 65 29</a>
1097                    </div>
1098					
1099					<!-- Exemple de Commerce 6 -->
1100					<div style="margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #e2e8f0;">
1101                        <h4 style="margin: 0 0 5px 0; color: var(--text-dark); font-size: 1.1em;">Sortie D'usine</h4>
1102                        <p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">Brocante</p>
1103						<p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">📍 5 Rue Saint Adrien, 27150 Morgny</p>
1104                        <a href="tel:+33000000000" style="font-size: 0.9em; color: var(--primary); text-decoration: none; font-weight: bold;">📞 07 71 59 0 19</a>
1105                    </div>
1106					
1107					<!-- Exemple de Commerce 7 -->
1108					<div style="margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #e2e8f0;">
1109                        <h4 style="margin: 0 0 5px 0; color: var(--text-dark); font-size: 1.1em;">Christophe Griffon</h4>
1110                        <p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">Artisan couvreur</p>
1111						<p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">📍 9 rue Moulin A Vent 27150 Morgny</p>
1112                        <a href="tel:+33000000000" style="font-size: 0.9em; color: var(--primary); text-decoration: none; font-weight: bold;">📞 02 32 55 76 67</a>
1113                    </div>
1114					
1115					<!-- Exemple de Commerce 7 -->
1116					<div style="margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #e2e8f0;">
1117                        <h4 style="margin: 0 0 5px 0; color: var(--text-dark); font-size: 1.1em;">JV Couverture</h4>
1118                        <p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">Artisan couvreur</p>
1119						<p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">📍 rue du bel air, la lande Perrin 27150 Morgny</p>
1120                        <a href="tel:+33000000000" style="font-size: 0.9em; color: var(--primary); text-decoration: none; font-weight: bold;">📞 06 46 31 55 05</a>
1121                    </div>
1122					
1123					<!-- Exemple de Commerce 7 -->
1124					<div style="margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #e2e8f0;">
1125                        <h4 style="margin: 0 0 5px 0; color: var(--text-dark); font-size: 1.1em;">C.Rousseau Couverture</h4>
1126                        <p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">Artisan couvreur</p>
1127						<p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">📍 52 Rue Saint Adrien, 27150 Morgny</p>
1128                        <a href="tel:+33000000000" style="font-size: 0.9em; color: var(--primary); text-decoration: none; font-weight: bold;">📞 06 33 68 36 06</a>
1129                    </div>
1130					
1131					<!-- Exemple de Commerce 7 -->
1132					<div style="margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #e2e8f0;">
1133                        <h4 style="margin: 0 0 5px 0; color: var(--text-dark); font-size: 1.1em;">L'etable de Morgny</h4>
1134                        <p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">Gite</p>
1135						<p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">📍 10 Rue George Lefebvre, 27150 Morgny</p>
1136                        <a href="tel:+33000000000" style="font-size: 0.9em; color: var(--primary); text-decoration: none; font-weight: bold;">📞 06 19 82 96 48</a>
1137                    </div>
1138					
1139					<!-- Exemple de Commerce 7 -->
1140					<div style="margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #e2e8f0;">
1141                        <h4 style="margin: 0 0 5px 0; color: var(--text-dark); font-size: 1.1em;">La ferme du centre</h4>
1142                        <p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">Gite</p>
1143						<p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">📍 2 Rue George Lefebvre, 27150 Morgny</p>
1144                        <a href="tel:+33000000000" style="font-size: 0.9em; color: var(--primary); text-decoration: none; font-weight: bold;">📞 06 83 52 59 15</a>
1145                    </div>
1146					
1147					<!-- Exemple de Commerce 7 -->
1148					<div style="margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #e2e8f0;">
1149                        <h4 style="margin: 0 0 5px 0; color: var(--text-dark); font-size: 1.1em;">Domaine du Beauthil</h4>
1150                        <p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">Salle de reception</p>
1151						<p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">📍 9 Rue du beauthil, 27150 Morgny</p>
1152                        <a href="tel:+33000000000" style="font-size: 0.9em; color: var(--primary); text-decoration: none; font-weight: bold;">📞 06 83 44 96 98</a>
1153                    </div>
1154					
1155					<!-- Exemple de Commerce 7 -->
1156					<div style="margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #e2e8f0;">
1157                        <h4 style="margin: 0 0 5px 0; color: var(--text-dark); font-size: 1.1em;">La foire a la Ripaille</h4>
1158                        <p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">Organisation de marchés fermiers et évènements valorisant producteurs et artisans normands</p>
1159						<p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">📍 12 rue du Moulin à Vent, 27150 Morgny</p>
1160                        <a href="tel:+33000000000" style="font-size: 0.9em; color: var(--primary); text-decoration: none; font-weight: bold;">📞 06 72 78 84 46</a>
1161                    </div>
1162					
1163					<!-- Exemple de Commerce 8 -->
1164					<div style="margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #e2e8f0;">
1165                        <h4 style="margin: 0 0 5px 0; color: var(--text-dark); font-size: 1.1em;">Christophe Weicherding</h4>
1166                        <p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">electricité Generale</p>
1167						<p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">📍 25 rue St Adrien 27150 Morgny</p>
1168                        <a href="tel:+33000000000" style="font-size: 0.9em; color: var(--primary); text-decoration: none; font-weight: bold;">📞  02 32 27 58 25</a>
1169                    </div>
1170					<!-- Exemple de Commerce 8 -->
1171					<div style="margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #e2e8f0;">
1172                        <h4 style="margin: 0 0 5px 0; color: var(--text-dark); font-size: 1.1em;">Vanessa Cantré</h4>
1173                        <p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">Massages et soins énergetiques</p>
1174						<p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">📍 37 bis rue St Adrien 27150 Morgny</p>
1175                        <a href="tel:+33000000000" style="font-size: 0.9em; color: var(--primary); text-decoration: none; font-weight: bold;">📞  06 61 73 90 30</a>
1176                    </div>
1177					<!-- Exemple de Commerce 8 -->
1178					<div style="margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #e2e8f0;">
1179                        <h4 style="margin: 0 0 5px 0; color: var(--text-dark); font-size: 1.1em;">Les Ruches de Stéphane</h4>
1180                        <p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">Apiculteur</p>
1181						<p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">📍 54 rue St Adrien 27150 Morgny</p>
1182                        <a href="tel:+33000000000" style="font-size: 0.9em; color: var(--primary); text-decoration: none; font-weight: bold;">📞  07 50 88 30 49</a>
1183                    </div>
1184<!-- Exemple de Commerce 8 -->
1185					<div style="margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #e2e8f0;">
1186                        <h4 style="margin: 0 0 5px 0; color: var(--text-dark); font-size: 1.1em;">SAS DELAPLACE</h4>
1187                        <p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">produits Agricoles et fourrage</p>
1188						<p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">📍 2 rue André Carpentier 27150 Morgny</p>
1189                        <a href="tel:+33000000000" style="font-size: 0.9em; color: var(--primary); text-decoration: none; font-weight: bold;">📞  06 70 92 00 23</a>
1190                    </div>
1191
1192                </div>
1193                
1194                <!-- COLONNE 2 : Les Associations -->
1195                <div class="elus-texte" style="flex: 1; background: #f8fafc; padding: 25px; border-radius: 12px;
1195 border-top: 4px solid #e1000f; overflow-y: auto; max-height: 60vh;">
1196                    <h3 style="display: flex; align-items: center; gap: 10px; margin-top: 0; margin-bottom: 20px; position: sticky; top: -25px; background: rgba(248, 250, 252, 0.9); backdrop-filter: blur(8px); padding: 25px 0 15px 0; z-index: 10;">
1197                        <svg width="24" height="24" viewBox="0 0 24 24" fill="#e1000f"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
1198                        Associations Locales
1199                    </h3>
1200                    
1201                    <!-- Exemple d'Association 1 -->
1202                    <div style="margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #e2e8f0;">
1203                        <h4 style="margin: 0 0 5px 0; color: var(--text-dark); font-size: 1.1em;">Comité des Fêtes de Morgny</h4>
1204                        <p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">Organisation des fêtes communales, événements locaux et animations.</p>
1205							<p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">📍 Mairie, 3 rue Saint-Adrien, 27150 Morgny</p>
1206                        <a href="mailto:[email protected]" style="font-size: 0.9em; color: var(--primary); text-decoration: none; font-weight: bold;">📞  02 32 55 55 81</a>
1207                    </div>
1208                    
1209                                        <!-- Exemple d'Association 2 -->
1210                    <div style="margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #e2e8f0;">
1211                        <h4 style="margin: 0 0 5px 0; color: var(--text-dark); font-size: 1.1em;">Le Fil d’Argent</h4>
1212                        <p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">Lien social et animations pour les seniors, lutte contre l’isolement.</p>
1213                        <p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">📍 3 Rue Saint-Adrien, 27150 Morgny</p>
1214                        
1215                        <!-- Ligne 1 : Téléphone -->
1216                        <div style="margin-top: 8px;">
1217                            <span style="font-size: 0.9em; color: #64748b;">📞 06 13 57 45 72</span>
1218                        </div>
1219
1220                        <!-- Ligne 2 : Lien vers Facebook ou Site Web -->
1221                        <div style="margin-top: 8px;">
1222                            <a href="https://www.facebook.com/groups/189074041847503/" target="_blank" rel="noopener noreferrer" style="font-size: 0.9em; color: #1877f2; text-decoration: none; font-weight: bold; display: inline-flex; align-items: center; gap: 6px;">
1223                                <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"/></svg>
1224                                Voir le groupe Facebook
1225                            </a>
1226                        </div>
1227                    </div>
1228                    <!-- Exemple d'Association 3 -->
1229                    <div style="margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #e2e8f0;">
1230                        <h4 style="margin: 0 0 5px 0; color: var(--text-dark); font-size: 1.1em;">Amicale des Anciens Combattants</h4>
1231                        <p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">Devoir de mémoire, entraide et solidarité entre anciens combattants et familles.</p>
1232						<p style="margin: 0 0 5px 0; font-size: 0.95em; color: #475569;">📍 Mairie, 3 rue Saint-Adrien, 27150 Morgny</p>
1233                        <a href="tel:+33000000000" style="font-size: 0.9em; color: var(--primary); text-decoration: none; font-weight: bold;">📞 02 32 55 55 81</a>
1234                    </div>
1235					
1236                </div>
1237                
1238            </div>
1239        </div>
1240    </div>
1241</div>
1242<div id="modal-salle-fetes" class="modal-overlay" onclick="fermerModal(event, 'modal-salle-fetes')">
1243    <div class="modal-box">
1244        <button class="modal-close" onclick="fermerModalForce('modal-salle-fetes')">&times;</button>
1245
1246        <div class="modal-header">
1247            <h2>Salle des Fêtes</h2>
1248        </div>
1249
1250        <div class="modal-body">
1251            <div class="elus-texte" style="width: 100%;">
1252                <img 
1253                    src="https://www.morgny.fr/salle1.jpg" 
1254                    alt="Salle des fêtes de Morgny" 
1255                    style="width: 100%; max-width: 100%; border-radius: 12px; margin-bottom: 20px; display: block;"
1256                >
1257				<img 
1258                    src="https://www.morgny.fr/salle2.jpg" 
1259                    alt="Salle des fêtes de Morgny" 
1260                    style="width: 100%; max-width: 100%; border-radius: 12px; margin-bottom: 20px; display: block;"
1261                >
1262
1263                <p>
1264                    <strong>Location de la salle des fêtes</strong><br>
1265                    La salle des fêtes de Morgny est disponible à la location. Elle comprend une scène avec estrade, un parking privatif ainsi qu’une cuisine.
1266                </p>
1267
1268                <p>
1269                    Le tarif est de <strong>494 €</strong> pour un week-end complet, du vendredi soir au dimanche soir, pour les habitants de Morgny.
1270                    Pour les personnes extérieures à la commune, le tarif est de <strong>
1270654 €</strong>.
1271                </p>
1272
1273                <p>
1274                    Ce tarif est tout compris : il n’y a donc aucun supplément à prévoir pour l’eau ou l’électricité.
1275                </p>
1276
1277                <p>
1278                    La salle peut également être louée en étant divisée en deux, pour des réceptions plus restreintes.
1279                    Pour cette formule, il convient de se renseigner directement en mairie.
1280                </p>
1281
1282                <p>
1283                    Dans tous les cas, il est nécessaire de contacter la mairie pour effectuer une réservation.
1284                </p>
1285
1286                <p>
1287                    <strong>Mairie de Morgny</strong><br>
1288                    Téléphone : <a href="tel:0232555581">02 32 55 55 81</a><br>
1289                    E-mail : <a href="mailto:[email protected]">[email protected]</a>
1290                </p>
1291            </div>
1292			
1293        </div>
1294		<hr style="margin: 20px 0; border: none; border-top: 1px solid #e2e8f0;">
1295
1296				<h3 style="color: var(--primary); margin-bottom: 5px;">📅 Disponibilités de la salle</h3>
1297				<p style="font-size: 0.9em; color: #64748b; margin-bottom: 15px;">
1298					Les jours en <span style="display:inline-block; width:14px; height:14px; background:#fee2e2; border:1px solid #fca5a5; border-radius:3px; vertical-align:middle;"></span> <strong>rouge</strong> sont déjà réservés ou bloqués.
1299				</p>
1300
1301				<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px;">
1302					<button onclick="changerMoisSalle(-1)" style="background: var(--primary); color: white; border: none; border-radius: 8px; padding: 8px 16px; cursor: pointer; font-size: 1em;">◀</button>
1303					<strong id="salle-mois-titre" style="font-size: 1.1em; color: var(--primary);"></strong>
1304					<button onclick="changerMoisSalle(1)" style="background: var(--primary); color: white; border: none; border-radius: 8px; padding: 8px 16px; cursor: pointer; font-size: 1em;">▶</button>
1305				</div>
1306
1307				<div id="salle-calendrier" style="display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center;"></div>
1308
1309				<p id="salle-cal-chargement" style="text-align:center; color:#64748b; font-size:0.9em; margin-top:10px;">⏳ Chargement du calendrier...</p>
1310
1311				<hr style="margin: 20px 0; border: none; border-top: 1px solid #e2e8f0;">
1312    </div>
1313	
1314</div>
1315
1316
1317<!-- Structure de la Pop-up "Mentions Légales" -->
1318    <div id="modal-mentions" class="modal-overlay" onclick="fermerModal(event, 'modal-mentions')">
1319        <div class="modal-box" style="max-width: 800px;">
1320            <button class="modal-close" onclick="fermerModalForce('modal-mentions')">&times;</button>
1321            
1322            <div class="modal-header">
1323                <h2>Mentions Légales</h2>
1324            </div>
1325            
1326            <div class="modal-body">
1327                <!-- Le texte défilant -->
1328                <div class="elus-texte" style="width: 100%; overflow-y: auto; max-height: 60vh; padding-right: 15px; color: #475569; font-size: 0.95em;">
1329                    
1330                    <h3 style="color: var(--text-dark); margin-top: 0;">1. Éditeur du site</h3>
1331                    <p>Le présent site officiel de la commune de Morgny est la propriété de la <strong>Mairie de Morgny</strong>.<br>
1332                    📍 Adresse : 3 rue Saint Adrien, 27150 Morgny<br>
1333                    📞 Téléphone : 02 32 55 55 81<br>
1334                    ✉️ E-mail : [email protected]</p>
1335
1336                    <h3 style="color: var(--text-dark); margin-top: 25px;">2. Directeur de la publication</h3>
1337                    <p>Le directeur de la publication est Monsieur le Maire de Morgny en exercice.</p>
1338
1339                    <h3 style="color: var(--text-dark); margin-top: 25px;">3. Conception et Développement</h3>
1340                    <p>Site développé, financé et maintenu bénévolement par Mikael Dubois ([email protected]).</p>
1341
1342                    <h3 style="color: var(--text-dark); margin-top: 25px;">4. Hébergement</h3>
1343                    <p>Ce site est hébergé par la société <strong>OVH SAS</strong>.<br>
1344                    📍 Adresse : 2 rue Kellermann - BP 80157 59053 ROUBAIX CEDEX 1 (France)</p>
1345
1346                    <h3 style="color: var(--text-dark); margin-top: 25px;">5. Propriété intellectuelle</h3>
1347                    <p>L'ensemble de ce site relève de la législation française et internationale sur le droit d'auteur et la propriété intellectuelle. Tous les droits de reproduction sont réservés, y compris pour les documents téléchargeables (comptes rendus municipaux) et les représentations photographiques. La reproduction de tout ou partie de ce site sur un support électronique quel qu'il soit est formellement interdite sauf autorisation expresse du directeur de la publication.</p>
1348
1349                    <h3 style="color: var(--text-dark); margin-top: 25px;">6. Données personnelles (RGPD)</h3>
1350                    <p>La commune de Morgny s'engage à ce que la collecte et le traitement de vos données, effectués à partir du site morgny.fr, soient conformes au règlement général sur la protection des données (RGPD) et à la loi Informatique et Libertés.<br>
1351                    Le site ne collecte aucune donnée personnelle à l'insu des utilisateurs. Conformément à la loi "Informatique et Libertés" du 6 janvier 1978 modifiée, vous disposez d'un droit d'accès, de rectification et de suppression des données qui vous concernent en contactant la mairie.</p>
1352
1353                    <h3 style="color: var(--text-dark); margin-top: 25px;">7. Cookies et services tiers</h3>
1354                    <p>
1354Le site de la commune de Morgny est conçu pour être respectueux de la vie privée. Il utilise cependant des modules tiers utiles à l'information des citoyens (PanneauPocket, Google Calendar, Curator.io pour Facebook) qui peuvent déposer des cookies techniques échappant au contrôle direct de la mairie. Vous pouvez paramétrer votre navigateur web pour bloquer ces traceurs si vous le souhaitez.</p>
1355
1356                </div>
1357            </div>
1358        </div>
1359    </div>
1360
1361    <!-- Structure de la Pop-up "Politique de Confidentialité" -->
1362    <div id="modal-confidentialite" class="modal-overlay" onclick="fermerModal(event, 'modal-confidentialite')">
1363        <div class="modal-box" style="max-width: 800px;">
1364            <button class="modal-close" onclick="fermerModalForce('modal-confidentialite')">&times;</button>
1365            
1366            <div class="modal-header">
1367                <h2>Politique de Confidentialité (RGPD)</h2>
1368            </div>
1369            
1370            <div class="modal-body">
1371                <div class="elus-texte" style="width: 100%; overflow-y: auto; max-height: 60vh; padding-right: 15px; color: #475569; font-size: 0.95em;">
1372                    
1373                    <p>La <strong>Mairie de Morgny</strong> accorde une grande importance à la protection de votre vie privée et s'engage à ce que le traitement des données personnelles, effectué sur le site morgny.fr, soit conforme au Règlement Général sur la Protection des Données (RGPD).</p>
1374
1375                    <h3 style="color: var(--text-dark); margin-top: 25px;">1. Responsable du traitement</h3>
1376                    <p>Le responsable du traitement des données est la Mairie de Morgny, représentée par son Maire en exercice.<br>
1377                    ✉️ Contact : [email protected]</p>
1378
1379                    <h3 style="color: var(--text-dark); margin-top: 25px;">2. Données collectées</h3>
1380                    <p>Le site officiel de Morgny se veut le plus respectueux possible de votre vie privée. <strong>Le site en lui-même ne collecte aucune donnée personnelle</strong> via des formulaires (la prise de contact se fait directement via votre propre logiciel de messagerie).</p>
1381                    <p>Cependant, pour vous offrir des services enrichis et vous tenir informés, nous intégrons des modules tiers officiels (PanneauPocket pour les alertes, Google Calendar pour la salle des fêtes, Curator.io pour les actualités Facebook). Ces services peuvent collecter des données techniques (adresse IP, cookies de fonctionnement) qui leur sont propres et sur lesquelles la Mairie n'a pas de contrôle direct.</p>
1382
1383                    <h3 style="color: var(--text-dark); margin-top: 25px;">3. Partage et conservation des données</h3>
1384                    <p>La Mairie de Morgny <strong>ne revend, ne cède ni ne loue aucune donnée personnelle</strong> à des tiers.<br>
1385                    Les cookies techniques gérés par les prestataires externes ont une durée de conservation définie par leurs propres politiques de confidentialité (généralement 13 mois maximum).</p>
1386
1387                    <h3 style="color: var(--text-dark); margin-top: 25px;">4. Exercice de vos droits</h3>
1388                    <p>Conformément à la loi "Informatique et Libertés" et au RGPD, vous disposez des droits suivants concernant vos données :</p>
1389                    <ul style="margin-left: 20px; margin-bottom: 15px;">
1390                        <li>Droit d'accès et de rectification</li>
1391                        <li>Droit à l'effacement (droit à l'oubli)</li>
1392                        <li>Droit à la limitation et à l'opposition au traitement</li>
1393                    </ul>
1394                    <p>Pour exercer ces droits, vous pouvez contacter la mairie par e-mail à <strong>[email protected]</strong> ou par courrier postal à l'adresse de la Mairie.</p>
1395                    <p>Si vous estimez, après nous avoir contactés, que vos droits ne sont pas respectés, vous pouvez adresser une réclamation en ligne à la CNIL (www.cnil.fr).</p>
1396
1397                </div>
1398            </div>
1399        </div>
1400    </div>
1401
1402
1403    <!-- Structure de la Pop-up "Accessibilité" -->
1404    <div id="modal-accessibilite" class="modal-overlay" onclick="fermerModal(event, 'modal-accessibilite')">
1405        <div class="modal-box" style="max-width: 800px;">
1406            <button class="modal-close" onclick="fermerModalForce('modal-accessibilite')">&times;</button>
1407            
1408            <div class="modal-header">
1409                <h2>Déclaration d'Accessibilité</h2>
1410            </div>
1411            
1412            <div class="modal-body">
1413                <div class="elus-texte" style="width: 100%; overflow-y: auto; max-height: 60vh; padding-right: 15px; color: #475569; font-size: 0.95em;">
1414                    
1415                    <p>La <strong>Mairie de Morgny</strong> s’engage à rendre son site internet accessible conformément à l’article 47 de la loi n°2005-102 du 11 février 2005.</p>
1416
1417                    <h3 style="color: var(--text-dark); margin-top: 25px;">1. État de conformité</h3>
1418                    <p>Le site officiel de la commune de Morgny (www.morgny.fr) est <strong>non conforme</strong> avec le Référentiel Général d’Amélioration de l’Accessibilité (RGAA), version 4.1. <br>
1419                    Ce statut de "non conformité" signifie qu'aucun audit formel certifié par un organisme externe n'a encore été réalisé sur ce site pour valider l'ensemble des critères techniques exigés par la loi.</p>
1420
1421                    <h3 style="color: var(--text-dark); margin-top: 25px;">2. Initiatives et conception</h3>
1422                    <p>Cependant, ce site a été conçu avec une volonté d'ergonomie et de clarté pour tous les usagers. Des efforts ont été portés sur :</p>
1423                    <ul style="margin-left: 20px; margin-bottom: 15px;">
1424                        <li>Les contrastes de couleurs pour faciliter la lecture.</li>
1425                        <li>La lisibilité des polices de caractères et la hiérarchie de l'information.</li>
1426                        <li>L'adaptation de l'affichage sur tous les écrans (ordinateurs, tablettes, smartphones).</li>
1427                    </ul>
1428
1429                    <h3 style="color: var(--text-dark); margin-top: 25px;">3. Retour d'information et contact</h3>
1430                    <p>Si vous n’arrivez pas à accéder à un contenu ou à un service (en raison d'un handicap visuel, moteur, auditif ou cognitif), vous pouvez contacter la Mairie de Morgny pour être orienté vers une alternative accessible ou obtenir le contenu sous une autre forme.</p>
1431                    <p>
1432                        📞 Téléphone : 02 32 55 55 81<br>
1433                        ✉️ E-mail : [email protected]<br>
1434                        📍 Adresse : 3 Rue Saint Adrien, 27150 Morgny
1435                    </p>
1436
1437                    <h3 style="color: var(--text-dark); margin-top: 25px;">4. Voies de recours</h3>
1438                    <p>Cette procédure est à utiliser dans le cas suivant : vous avez signalé au responsable du site web un défaut d’accessibilité qui vous empêche d’accéder à un contenu ou à un des services du portail et vous n’avez pas obtenu de réponse satisfaisante.</p>
1439                    <p>Vous pouvez alors :</p>
1440                    <ul style="margin-left: 20px; margin-bottom: 15px;">
1441                        <li>Écrire un message au <strong>Défenseur des droits</strong> (https://formulaire.defenseurdesdroits.fr).</li>
1442                        <li>Contacter le délégué du Défenseur des droits dans votre région.</li>
1443                        <li>Envoyer un courrier par la poste (gratuit, ne pas mettre de timbre) :<br>
1444                        Défenseur des droits - Libre réponse 71120 - 75342 Paris CEDEX 07</li>
1445                    </ul>
1446
1447                </div>
1448            </div>
1449        </div>
1450    </div>
1451
1452    <!-- Structure de la Pop-up "Gestion des Cookies" -->
1453    <div id="modal-cookies" class="modal-overlay" onclick="fermerModal(event, 'modal-cookies')">
1454        <div class="modal-box" style="max-width: 800px;">
1455            <button class="modal-close" onclick="fermerModalForce('modal-cookies')">&times;</button>
1456            
1457            <div class="modal-header">
1458                <h2>Gestion des Cookies</h2>
1459            </div>
1460            
1461            <div class="modal-body">
1462                <div class="elus-texte" style="width: 100%; overflow-y: auto; max-height: 60vh; padding-right: 15px; color: #475569; font-size: 0.95em;">
1463                    
1464                    <p>Lors de la consultation du site officiel de la commune de Morgny, des cookies sont susceptibles d'être déposés sur votre ordinateur, votre tablette ou votre smartphone.</p>
1465
1466                    <h3 style="color: var(--text-dark); margin-top: 25px;">1. Qu'est-ce qu'un cookie ?</h3>
1467                    <p>Un "cookie" est un petit fichier texte enregistré par le navigateur de votre appareil (ordinateur, téléphone) lors de la visite d'un site web. Il permet de conserver des données utilisateur afin de faciliter la navigation et de permettre certaines fonctionnalités.</p>
1468
1469                    <h3 style="color: var(--text-dark); margin-top: 25px;">2. Les cookies du site de la Mairie</h3>
1470                    <p><strong>Cookies internes strictement nécessaires :</strong><br>
1471                    La Mairie de Morgny a fait le choix de ne pas utiliser d'outils de traçage publicitaire ou de profilage intrusif (pas de Google Analytics, par exemple). Les seuls cookies internes éventuellement déposés servent uniquement au bon fonctionnement technique du site (affichage des fenêtres, préférences visuelles).</p>
1472
1473                    <p><strong>Cookies liés aux services tiers :</strong><br>
1474                    Pour enrichir le contenu du site et vous informer au mieux, nous utilisons des services externes qui s'affichent directement sur nos pages. Ces modules déposent leurs propres cookies :</p>
1475                    <ul style="margin-left: 20px; margin-bottom: 15px;">
1476                        <li><strong>PanneauPocket :</strong> Pour l'affichage des alertes en temps réel.</li>
1477                        <li><strong>Curator.io (Facebook) :</strong> Pour l'affichage du flux d'actualités de la page officielle de la commune.</li>
1478                        <li><strong>Google Calendar :</strong> Pour l'affichage des disponibilités de la salle des fêtes.</li>
1479                    </ul>
1480                    <p>L'émission et l'utilisation de ces cookies sont soumises aux politiques de protection de la vie privée de ces tiers.</p>
1481
1482                    <h3 style="color: var(--text-dark); margin-top: 25px;">3. Comment paramétrer votre navigateur ?</h3>
1483                    <p>Vous pouvez à tout moment choisir de désactiver l'ensemble des cookies, même ceux nécessaires au fonctionnement des modules externes (ce qui pourrait cependant empêcher l'affichage du calendrier ou des actualités Facebook sur notre site).</p>
1484                    <p>La configuration est spécifique à chaque navigateur. Voici comment procéder :</p>
1485                    <ul style="margin-left: 20px; margin-bottom: 15px;">
1486                        <li><strong>Google Chrome :</strong> Menu > Paramètres > Confidentialité et sécurité > Cookies et autres données de site.</li>
1487                        <li><strong>Firefox :</strong> Menu > Paramètres > Vie privée et sécurité > Cookies et données de sites.</li>
1488                        <li><strong>Safari :</strong> Préférences > Confidentialité > Bloquer tous les cookies.</li>
1489                        <li><strong>Edge :</strong> Paramètres > Cookies et autorisations de site > Gérer et supprimer les cookies.</li>
1490                    </ul>
1491                    <p>Pour plus d'informations sur les cookies, vous pouvez consulter le site de la CNIL (Commission Nationale de l'Informatique et des Libertés) : <a href="https://www.cnil.fr" target="_blank" rel="noopener noreferrer" style="color: var(--primary); text-decoration: underline;">www.cnil.fr</a>.</p>
1492
1493                </div>
1494            </div>
1495        </div>
1496    </div>
1497
1498
1499
1500    <!-- Script pour faire fonctionner les pop-ups -->
1501    
1501<script>
1502        function ouvrirModal(id) {
1503            document.getElementById(id).style.display = 'block';
1504            document.body.style.overflow = 'hidden'; // Empêche le site de défiler derrière
1505        }
1506
1507        function fermerModalForce(id) {
1508            document.getElementById(id).style.display = 'none';
1509            document.body.style.overflow = 'auto'; // Réactive le défilement du site
1510        }
1511
1512        function fermerModal(event, id) {
1513            // Ferme la pop-up si on clique dans le vide (sur le fond gris)
1514            if (event.target.id === id) {
1515                fermerModalForce(id);
1516            }
1517        }
1518    
1519	             // ============================================================
1520        // NOUVEAU MOTEUR D'EXTRACTION DES COMPTES RENDUS (PAR ANNÉE)
1521        // ============================================================
1522        async function chargerConseils() {
1523            const conteneur = document.getElementById('accordeon-conseils');
1524            if (conteneur.getAttribute('data-loaded') === 'true') return; 
1525            
1526            try {
1527                // Récupération du dossier sur le serveur (trié par nom inversé Z->A pour avoir les dates récentes d'abord)
1528                const reponse = await fetch('/conseils/?C=N;O=D');
1529                if (!reponse.ok) throw new Error('Dossier introuvable');
1530                const htmlTexte = await reponse.text();
1531                
1532                const parser = new DOMParser();
1533                const doc = parser.parseFromString(htmlTexte, 'text/html');
1534                const liens = doc.querySelectorAll('a');
1535                
1536                conteneur.innerHTML = ''; // Efface le chargement
1537                
1538                // On prépare un "dictionnaire" pour ranger les fichiers par année
1539                const archivesParAnnee = {};
1540                const anneeEnCours = new Date().getFullYear().toString();
1541
1542                // 1. Tri et classement des fichiers
1543                liens.forEach(lien => {
1544                    const nomFichierDecode = decodeURIComponent(lien.getAttribute('href'));
1545                    
1546                    // On ne garde que les vrais fichiers (pas les trucs d'Apache)
1547                    if (nomFichierDecode && !nomFichierDecode.startsWith('?') && !nomFichierDecode.startsWith('/') && !nomFichierDecode.endsWith('/')) {
1548                        
1549                        // Recherche de l'année dans le nom (ex: "CR CM du 12 04 2026.pdf" -> on cherche 4 chiffres consécutifs)
1550                        const matchAnnee = nomFichierDecode.match(/\b(20\d{2})\b/);
1551                        const annee = matchAnnee ? matchAnnee[1] : 'Autres'; // Si pas d'année trouvée, va dans "Autres"
1552                        
1553                        if (!archivesParAnnee[annee]) {
1554                            archivesParAnnee[annee] = [];
1555                        }
1556                        archivesParAnnee[annee].push(nomFichierDecode);
1557                    }
1558                });
1559
1560                // Si aucun fichier n'est trouvé
1561                if (Object.keys(archivesParAnnee).length === 0) {
1562                    conteneur.innerHTML = '<p style="color: #64748b;">Aucun compte-rendu disponible pour le moment.</p>';
1563                    return;
1564                }
1565
1566                // 2. Création de l'affichage en "Dossiers" (Accordéon)
1567                // On trie les années de la plus récente à la plus ancienne
1568               const anneesTriees = Object.keys(archivesParAnnee).sort((a, b) => b.localeCompare(a));
1569
1570// Fonction pour extraire une date depuis un nom de fichier
1571function extraireDateDepuisNom(nomFichier) {
1572    const match = nomFichier.match(/(\d{1,2})[\s._-](\d{1,2})[\s._-](20\d{2})/);
1573    if (!match) return null;
1574
1575    const jour = parseInt(match[1], 10);
1576    const mois = parseInt(match[2], 10) - 1;
1577    const annee = parseInt(match[3], 10);
1578
1579    return new Date(annee, mois, jour);
1580}
1581
1582// Tri des fichiers de chaque année : du plus récent au plus ancien
1583anneesTriees.forEach(annee => {
1584    archivesParAnnee[annee].sort((a, b) => {
1585        const dateA = extraireDateDepuisNom(a);
1586        const dateB = extraireDateDepuisNom(b);
1587
1588        if (dateA && dateB) {
1589            return dateB - dateA;
1590        }
1591
1592        return b.localeCompare(a, 'fr', { numeric: true });
1593    });
1594});
1595
1596anneesTriees.forEach(annee => {
1597                    // Conteneur de l'année
1598                    const groupe = document.createElement('div');
1599                    groupe.style.marginBottom = '15px';
1600                    groupe.style.border = '1px solid #e2e8f0';
1601                    groupe.style.borderRadius = '8px';
1602                    groupe.style.overflow = 'hidden';
1603
1604                    // En-tête cliquable (Le bouton du dossier)
1605                    const bouton = document.createElement('button');
1606                    bouton.style.width = '100%';
1607                    bouton.style.padding = '15px 20px';
1608                    bouton.style.background = '#f8fafc';
1609                    bouton.style.border = 'none';
1610                    bouton.style.textAlign = 'left';
1611                    bouton.style.fontWeight = 'bold';
1612                    bouton.style.color = 'var(--primary)';
1613                    bouton.style.fontSize = '1.1em';
1614                    bouton.style.cursor = 'pointer';
1615                    bouton.style.display = 'flex';
1616                    bouton.style.justifyContent = 'space-between';
1617                    bouton.style.alignItems = 'center';
1618                    
1619                    const fleche = document.createElement('span');
1620                    fleche.innerHTML = '▼';
1621                    fleche.style.transition = 'transform 0.3s';
1622                    
1623                    bouton.innerHTML = `📁 Année ${annee} <span style="font-size:0.8em; color:#64748b; font-weight:normal;">(${archivesParAnnee[annee].length} fichiers)</span>`;
1624                    bouton.appendChild(fleche);
1625
1626                    // Liste des fichiers à l'intérieur
1627                    const liste = document.createElement('ul');
1628                    liste.style.listStyle = 'none';
1629                    liste.style.padding = '0';
1630                    liste.style.margin = '0';
1631                    liste.style.background = '#fff';
1632                    
1633                    // On détermine si ce dossier doit être ouvert par défaut (soit l'année en cours, soit la plus récente s'il n'y a rien cette année)
1634                    const estAnneeParDefaut = (annee === anneeEnCours) || (annee === anneesTriees[0] && !archivesParAnnee[anneeEnCours]);
1635                    
1636                    liste.style.display = estAnneeParDefaut ? 'block' : 'none';
1637                    if(estAnneeParDefaut) fleche.style.transform = 'rotate(180deg)';
1638
1639                    // Remplissage des fichiers
1640                    archivesParAnnee[annee].forEach(nomFichier => {
1641                        const li = document.createElement('li');
1642                        li.style.padding = '12px 20px';
1643                        li.style.borderTop = '1px solid #f1f5f9';
1644                        
1645                        const a = document.createElement('a');
1646                        a.href = '/conseils/' + encodeURIComponent(nomFichier);
1647                        a.target = '_blank';
1648                        a.style.color = '#334155';
1649                        a.style.textDecoration = 'none';
1650                        a.style.display = 'flex';
1651                        a.style.alignItems = 'center';
1652                        a.style.gap = '10px';
1653                        
1654                        a.innerHTML = `<svg width="18" height="18" viewBox="0 0 24 24" fill="#ef4444"><path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.5 7.5c0 .83-.67 1.5-1.5 1.5H9v2H7.5V7H10c.83 0 1.5.67 1.5 1.5v1zm5 2c0 .83-.67 1.5-1.5 1.5h-2.5V7H15c.83 0 1.5.67 1.5 1.5v3zm4-3H19v1h1.5V11H19v2h-1.5V7h3v1.5zM9 9.5h1v-1H9v1zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm10 5.5h1v-3h-1v3z"/></svg> 
1655                                       ${nomFichier}`;
1656                                       
1657                        a.onmouseover = function() { this.style.color = 'var(--primary)'; this.style.fontWeight = 'bold'; }
1658                        a.onmouseout = function() { this.style.color = '#334155'; this.style.fontWeight = 'normal'; }
1659                        
1660                        li.appendChild(a);
1661                        liste.appendChild(li);
1662                    });
1663
1664                    // Animation d'ouverture/fermeture
1665                    bouton.onclick = function() {
1666                        const estOuvert = liste.style.display === 'block';
1667                        liste.style.display = estOuvert ? 'none' : 'block';
1668                        fleche.style.transform = estOuvert ? 'rotate(0deg)' : 'rotate(180deg)';
1669                    };
1670
1671                    groupe.appendChild(bouton);
1672                    groupe.appendChild(liste);
1673                    conteneur.appendChild(groupe);
1674                });
1675                
1676                conteneur.setAttribute('data-loaded', 'true');
1677                
1678            } catch (erreur) {
1679                conteneur.innerHTML = '<p style="color: #ef4444;">Impossible de charger les archives. Le dossier est peut-être vide.</p>';
1680            }
1681        }
1682
1683        // Fonction pour ouvrir/fermer le menu sur Mobile
1684        function toggleMenu() {
1685            const menu = document.getElementById('menu-principal');
1686            // Si le menu a la classe 'active', on l'enlève. Sinon, on l'ajoute.
1687            menu.classList.toggle('active');
1688        }
1689
1690// ============================================================
1691// CALENDRIER SALLE DES FÊTES — Google Calendar (iCal)
1692// ============================================================
1693
1694const ICAL_URL = '/calendar-proxy.php';
1695let salleDateCal = new Date();
1696let salleEventsCal = [];
1697
1698function parseICal(texte) {
1699    const events = [];
1700    const blocs = texte.replace(/\r/g, '').split('BEGIN:VEVENT').slice(1);
1701
1702    blocs.forEach(bloc => {
1703        const debut = bloc.match(/DTSTART[^:]*:(\d{8})/);
1704        const fin   = bloc.match(/DTEND[^:]*:(\d{8})/);
1705
1706        if (debut && fin) {
1707            const parseDate = (val) => new Date(
1708                parseInt(val.slice(0, 4), 10),
1709                parseInt(val.slice(4, 6), 10) - 1,
1710                parseInt(val.slice(6, 8), 10)
1711            );
1712
1713            events.push({
1714                debut: parseDate(debut[1]),
1715                fin: parseDate(fin[1])
1716            });
1717        }
1718    });
1719
1720    return events;
1721}
1722
1723function jourOccupe(annee, mois, jour) {
1724    const d = new Date(annee, mois, jour);
1725    d.setHours(0, 0, 0, 0);
1726
1727    return salleEventsCal.some(e => {
1728        const debut = new Date(e.debut);
1729        const fin = new Date(e.fin);
1730        debut.setHours(0, 0, 0, 0);
1731        fin.setHours(0, 0, 0, 0);
1732        return d >= debut && d < fin;
1733    });
1734}
1735
1736function afficherCalendrier() {
1737    const jours = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'];
1738    const moisNoms = ['Janvier','Février','Mars','Avril','Mai','Juin',
1739                      'Juillet','Août','Septembre','Octobre','Novembre','Décembre'];
1740
1741    const annee = salleDateCal.getFullYear();
1742    const mois  = salleDateCal.getMonth();
1743
1744    document.getElementById('salle-mois-titre').textContent = moisNoms[mois] + ' ' + annee;
1745
1746    const grille = document.getElementById('salle-calendrier');
1747    grille.innerHTML = '';
1748
1749    jours.forEach(j => {
1750        const cell = document.createElement('div');
1751        cell.textContent = j;
1752        cell.style.cssText = 'font-weight:700; font-size:0.8em; color:#64748b; padding:6px 0;';
1753        grille.appendChild(cell);
1754    });
1755
1756    let premierJour = new Date(annee, mois, 1).getDay();
1757    premierJour = premierJour === 0 ? 6 : premierJour - 1;
1758
1759    for (let i = 0; i < premierJour; i++) {
1760        grille.appendChild(document.createElement('div'));
1761    }
1762
1763    const nbJours = new Date(annee, mois + 1, 0).getDate();
1764    const hd = new Date();
1765    const aujourd = new Date(hd.getFullYear(), hd.getMonth(), hd.getDate());
1766
1767    for (let j = 1; j <= nbJours; j++) {
1768        const occupe = jourOccupe(annee, mois, j);
1769        const dateObj = new Date(annee, mois, j);
1770        const passe = dateObj < aujourd;
1771
1772        const cell = document.createElement('div');
1773        cell.textContent = j;
1774
1775       let bg = '#f0fdf4', color = '#166534', border = '1px solid #bbf7d0';
1776
1777if (passe) {
1778    bg = '#f1f5f9';
1779    color = '#94a3b8';
1780    border = '1px solid #e2e8f0';
1781    cell.title = occupe ? 'Date passée (ancienne réservation)' : 'Date passée';
1782} else if (occupe) {
1783    bg = '#fee2e2';
1784    color = '#991b1b';
1785    border = '1px solid #fca5a5';
1786    cell.title = 'Indisponible';
1787} else {
1788    cell.title = 'Disponible';
1789}
1790
1791        cell.style.cssText = `padding:8px 4px; border-radius:6px; font-size:0.9em;
1792            font-weight:500; background:${bg}; color:${color}; border:${border};`;
1793        grille.appendChild(cell);
1794    }
1795
1796    document.getElementById('salle-cal-chargement').style.display = 'none';
1797}
1798
1799function changerMoisSalle(dir) {
1800    salleDateCal.setMonth(salleDateCal.getMonth() + dir);
1801    afficherCalendrier();
1802}
1803
1804const _ouvrirModalOriginal = ouvrirModal;
1805ouvrirModal = function(id) {
1806    _ouvrirModalOriginal(id);
1807
1808    if (id === 'modal-salle-fetes') {
1809        salleDateCal = new Date();
1810        document.getElementById('salle-cal-chargement').style.display = 'block';
1811        document.getElementById('salle-cal-chargement').textContent = '⏳ Chargement du calendrier...';
1812
1813        fetch(ICAL_URL)
1814            .then(r => {
1815                if (!r.ok) throw new Error('Erreur HTTP ' + r.status);
1816                return r.text();
1817            })
1818            .then(texte => {
1819                salleEventsCal = parseICal(texte);
1820                console.log('Evénements lus :', salleEventsCal);
1821                afficherCalendrier();
1822            })
1823            .catch(err => {
1824                console.error('Erreur calendrier :', err);
1825                document.getElementById('salle-cal-chargement').textContent =
1826                    '⚠️ Calendrier temporairement indisponible.';
1827                afficherCalendrier();
1828            });
1829    }
1830};
1831	</script>
1831
1832
1833
1834</body>
1835</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.