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>© 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')">×</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')">×</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')">×</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')">×</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')">×</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')">×</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')">×</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')">×</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')">×</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')">×</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')">×</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.