Navbar responsive sans Bootstrap<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cinzel&display=swap\" rel=\"stylesheet\" \/>\r\n\r\n <style>\r\n body {\r\n font-family: 'Cinzel', sans-serif;\r\n margin: 0;\r\n background: #fff;\r\n }\r\n\r\n nav {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 10px 20px;\r\n position: relative;\r\n z-index: 999;\r\n }\r\n\r\n .logo img {\r\n max-width: 180px;\r\n height: auto;\r\n margin-left: 25%;\r\n }\r\n\r\n .menu-toggle {\r\n display: none;\r\n font-size: 2.5rem;\r\n cursor: pointer;\r\n user-select: none;\r\n }\r\n\r\n ul.menu {\r\n list-style: none;\r\n display: flex;\r\n gap: 25px;\r\n margin: 0 25% 0 0;\r\n padding: 0;\r\n }\r\n\r\n ul.menu li {\r\n position: relative;\r\n }\r\n\r\n ul.menu > li > a {\r\n text-decoration: none;\r\n color: #151515;\r\n font-size: 2.2vh;\r\n padding: 8px 12px;\r\n display: block;\r\n user-select: none;\r\n white-space: nowrap;\r\n }\r\n\r\n ul.menu > li:first-child > a,\r\n ul.menu > li:nth-child(2) > a,\r\n ul.menu > li:nth-child(3) > a {\r\n font-size: 4vh;\r\n }\r\n\r\n ul.menu > li > a:hover {\r\n background: #D4AF37;\r\n color: #fff;\r\n border-radius: 4px;\r\n }\r\n\r\n ul.submenu {\r\n display: none;\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n min-width: 180px;\r\n background: #151515;\r\n list-style: none;\r\n padding: 5px 0;\r\n border-radius: 4px;\r\n z-index: 1000;\r\n }\r\n\r\n ul.submenu li a {\r\n color: #fff;\r\n padding: 10px 15px;\r\n text-decoration: none;\r\n display: block;\r\n font-size: 2.2vh;\r\n white-space: nowrap;\r\n }\r\n\r\n ul.submenu li a:hover {\r\n background: #D4AF37;\r\n color: #fff;\r\n }\r\n\r\n li.has-submenu > a::after {\r\n content: ' \u25bc';\r\n font-size: 0.6em;\r\n user-select: none;\r\n }\r\n\r\n @media (min-width: 768px) {\r\n ul.menu > li:hover > ul.submenu {\r\n display: block;\r\n }\r\n .menu-toggle {\r\n display: none;\r\n }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n nav {\r\n flex-wrap: nowrap;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 10px 15px;\r\n }\r\n\r\n .logo img {\r\n width: 150px;\r\n margin: 0;\r\n }\r\n\r\n .menu-toggle {\r\n display: block;\r\n font-size: 2rem;\r\n margin-left: auto;\r\n user-select: none;\r\n }\r\n\r\n ul.menu {\r\n flex-direction: column;\r\n width: 100%;\r\n display: none;\r\n margin: 10px 0 0;\r\n gap: 0;\r\n overflow: hidden;\r\n }\r\n\r\n ul.menu.show {\r\n display: flex;\r\n }\r\n\r\n ul.menu > li {\r\n width: 100%;\r\n }\r\n\r\n ul.menu > li > a {\r\n padding: 12px 15px;\r\n border-bottom: 1px solid #ccc;\r\n }\r\n\r\n ul.submenu {\r\n position: static;\r\n background: transparent;\r\n padding: 0;\r\n box-shadow: none;\r\n max-height: 0;\r\n overflow: hidden;\r\n transition: max-height 0.3s ease-in-out;\r\n }\r\n\r\n ul.submenu.show {\r\n max-height: 500px; \/* assez grand pour le contenu *\/\r\n display: block;\r\n }\r\n\r\n ul.submenu li a {\r\n padding-left: 30px;\r\n border-bottom: 1px solid #444;\r\n background: #111;\r\n color: #fff;\r\n }\r\n\r\n li.has-submenu > a::after {\r\n float: right;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<nav role=\"navigation\" aria-label=\"Menu principal\">\r\n <div class=\"logo\">\r\n <a href=\"https:\/\/editionlimiteevichy.com\/\">\r\n <img decoding=\"async\" src=\"https:\/\/editionlimiteevichy.com\/wp-content\/uploads\/2025\/06\/logotype-edition-limitee-noir.png\" alt=\"Logo Librairie\" \/>\r\n <\/a>\r\n <\/div>\r\n\r\n <div id=\"menuToggle\" class=\"menu-toggle\" aria-label=\"Ouvrir le menu\">\u2630<\/div>\r\n\r\n <ul class=\"menu\" id=\"menu\">\r\n <li class=\"has-submenu\">\r\n <a href=\"#\" class=\"submenu-toggle\">BD<\/a>\r\n <ul class=\"submenu\">\r\n <li><a href=\"https:\/\/editionlimiteevichy.com\/index.php\/bienvenue-a-aquilon\/\">Aquilon<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li class=\"has-submenu\">\r\n <a href=\"#\" class=\"submenu-toggle\">Comics<\/a>\r\n <ul class=\"submenu\">\r\n <li><a href=\"https:\/\/editionlimiteevichy.com\/index.php\/guide-star-wars\/\">Star Wars<\/a><\/li>\r\n <li><a href=\"https:\/\/editionlimiteevichy.com\/index.php\/editionlimitee-accueil\/guide-batman\/\">Batman<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li>\r\n <a href=\"https:\/\/editionlimiteevichy.com\/index.php\/page-a-venir\/\">Manga<\/a>\r\n <\/li>\r\n <\/ul>\r\n<\/nav>\r\n\r\n<script>\r\n const menuToggle = document.getElementById('menuToggle');\r\n const menu = document.getElementById('menu');\r\n\r\n \/\/ Toggle menu burger\r\n menuToggle.addEventListener('click', () => {\r\n menu.classList.toggle('show');\r\n });\r\n\r\n \/\/ Toggle sous-menus mobiles\r\n document.querySelectorAll('.submenu-toggle').forEach(toggle => {\r\n toggle.addEventListener('click', e => {\r\n const submenu = toggle.nextElementSibling;\r\n if (window.innerWidth < 768 && submenu) {\r\n e.preventDefault();\r\n submenu.classList.toggle('show');\r\n }\r\n });\r\n });\r\n\r\n \/\/ Fermer le menu mobile quand on clique sur un lien (hors sous-menus toggles)\r\n document.querySelectorAll('.menu a:not(.submenu-toggle)').forEach(link => {\r\n link.addEventListener('click', () => {\r\n if (window.innerWidth < 768) {\r\n menu.classList.remove('show');\r\n document.querySelectorAll('.submenu').forEach(sub => sub.classList.remove('show'));\r\n }\r\n });\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-afcf99a e-con-full e-flex elementor-invisible e-con e-parent\" data-id=\"afcf99a\" data-element_type=\"container\" data-settings=\"{"background_background":"slideshow","background_slideshow_gallery":[{"id":4174,"url":"https:\\\/\\\/editionlimiteevichy.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/bandeauBatman.png"}],"animation":"fadeIn","background_slideshow_loop":"yes","background_slideshow_slide_duration":5000,"background_slideshow_slide_transition":"fade","background_slideshow_transition_duration":500}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a24a768 elementor-widget elementor-widget-html\" data-id=\"a24a768\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Beau+Rivage&display=swap\" rel=\"stylesheet\">\r\n\r\n\r\n<div class=\"golden-gradient-text\">Guide de lecture Batman<\/div>\r\n\r\n<style>\r\n.golden-gradient-text {\r\n font-family: 'Beau Rivage', Sans-Serif;\r\n font-size: 5rem;\r\n font-weight: bold;\r\n text-align: center;\r\n margin: 20px auto;\r\n display: inline-block;\r\n background: linear-gradient(\r\n 90deg,\r\n #1c1c1e,\r\n #2e2e2e,\r\n #f5f5f5,\r\n #888888,\r\n #444444\r\n \r\n );\r\n background-size: 300% 100%;\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n animation: goldenMove 5s linear infinite;\r\n}\r\n\r\n@keyframes goldenMove {\r\n 0% {\r\n background-position: 0% 50%;\r\n }\r\n 50% {\r\n background-position: 100% 50%;\r\n }\r\n 100% {\r\n background-position: 0% 50%;\r\n }\r\n}\r\n<\/style>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5c8bb46 e-con-full e-flex e-con e-parent\" data-id=\"5c8bb46\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4afce36 elementor-widget elementor-widget-text-editor\" data-id=\"4afce36\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"159\" data-end=\"549\">Vous souhaitez d\u00e9couvrir Batman mais vous ne savez pas par o\u00f9 commencer ? Ce guide est l\u00e0 pour vous accompagner. Con\u00e7u sp\u00e9cialement pour les lecteurs novices ou les curieux qui aimeraient explorer l\u2019univers du Chevalier Noir, il vous propose des points d\u2019entr\u00e9e clairs et accessibles pour plonger dans les comics Batman sans vous perdre.<\/p><p data-start=\"551\" data-end=\"972\">Au-del\u00e0 d\u2019un simple guide, ce contenu agit aussi comme un catalogue visuel, vous permettant de rep\u00e9rer facilement les grands classiques et les lectures incontournables autour de Batman. Vous y trouverez non seulement des r\u00e9cits majeurs centr\u00e9s sur le justicier de Gotham, mais aussi des recommandations autour des personnages essentiels de son univers : Robin, Batgirl, Nightwing, le Joker, Catwoman et bien d\u2019autres.<\/p><p data-start=\"974\" data-end=\"1202\">Que vous cherchiez \u00e0 d\u00e9couvrir les origines du mythe, les grandes sagas modernes ou les r\u00e9cits marquants de ses alli\u00e9s et ennemis, ce guide est une porte d\u2019entr\u00e9e id\u00e9ale pour naviguer dans l\u2019univers dense et fascinant de Batman.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7fe5b88 e-con-full e-flex e-con e-parent\" data-id=\"7fe5b88\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f80b4ba elementor-widget elementor-widget-html\" data-id=\"f80b4ba\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fr\">\r\n<head>\r\n <style>\r\n html, body {\r\n margin: 0;\r\n padding: 0;\r\n height: 100%;\r\n font-family: 'Segoe UI', sans-serif;\r\n }\r\n\r\n .widget-container {\r\n display: flex;\r\n align-items: flex-start;\r\n padding: 2vw;\r\n gap: 2vw;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n }\r\n\r\n .image-wrapper {\r\n flex-shrink: 0;\r\n height: 100vh;\r\n display: flex;\r\n align-items: flex-start;\r\n cursor: pointer;\r\n }\r\n\r\n .image-wrapper img {\r\n height: 100%;\r\n width: auto;\r\n max-width: 100%;\r\n object-fit: cover;\r\n display: block;\r\n border-radius: 12px;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .image-wrapper img:hover {\r\n transform: scale(1.05);\r\n }\r\n\r\n .text-wrapper {\r\n position: sticky;\r\n top: 30%;\r\n transform: translateY(-50%);\r\n color: #f5f5f5;\r\n font-size: 1.5rem;\r\n line-height: 1.5;\r\n align-self: center;\r\n }\r\n\r\n .popup-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100vw;\r\n height: 100vh;\r\n background-color: rgba(0,0,0,0.9);\r\n display: none;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 9999;\r\n }\r\n\r\n .popup-content \r\n {\r\n position: relative;\r\n max-height: 90vh;\r\n max-width: 90vw;\r\n overflow: auto;\r\n border-radius: 12px;\r\n box-shadow: 0 0 20px #d8b65d;\r\n background: #000;\r\n padding: 0.5rem; \r\n }\r\n\r\n .popup-content img {\r\n height: 90vh;\r\n width: auto;\r\n display: block;\r\n border-radius: 12px;\r\n }\r\n\r\n .popup-close {\r\n position: absolute;\r\n top: 12px;\r\n right: 12px;\r\n font-size: 2rem;\r\n color: #d8b65d;\r\n cursor: pointer;\r\n user-select: none;\r\n font-weight: bold;\r\n background: transparent;\r\n border: none;\r\n }\r\n \/* Halo Jedi *\/\r\n.popup-content.jedi {\r\n animation: jedi-glow 2s infinite alternate ease-in-out;\r\n box-shadow: 0 0 30px 5px rgba(0, 195, 255, 0.6);\r\n}\r\n\r\n\/* Halo Sith *\/\r\n.popup-content.sith {\r\n animation: sith-glow 2s infinite alternate ease-in-out;\r\n box-shadow: 0 0 30px 5px rgba(255, 0, 0, 0.6);\r\n}\r\n\r\n@keyframes jedi-glow {\r\n 0% {\r\n box-shadow: 0 0 15px 5px rgba(0, 195, 255, 0.4);\r\n }\r\n 100% {\r\n box-shadow: 0 0 50px 10px rgba(0, 195, 255, 0.9);\r\n }\r\n}\r\n\r\n@keyframes sith-glow {\r\n 0% {\r\n box-shadow: 0 0 15px 5px rgba(255, 0, 0, 0.4);\r\n }\r\n 100% {\r\n box-shadow: 0 0 50px 10px rgba(255, 0, 0, 0.9);\r\n }\r\n}\r\n\r\n\r\n@media (max-width: 768px) {\r\n .widget-container {\r\n flex-direction: column;\r\n padding: 5vw 3vw;\r\n gap: 4vw;\r\n }\r\n\r\n .image-wrapper {\r\n height: auto;\r\n justify-content: center;\r\n }\r\n\r\n .image-wrapper img {\r\n width: 100%;\r\n height: auto;\r\n max-height: 60vh;\r\n }\r\n\r\n .text-wrapper {\r\n position: static;\r\n transform: none;\r\n text-align: justify;\r\n font-size: 1.1rem;\r\n line-height: 1.4;\r\n padding: 1rem 0;\r\n }\r\n\r\n .popup-content img {\r\n width: 90vw;\r\n height: auto;\r\n max-height: 80vh;\r\n }\r\n\r\n .popup-content {\r\n max-width: 95vw;\r\n max-height: 95vh;\r\n }\r\n\r\n .popup-close {\r\n font-size: 1.5rem;\r\n top: 8px;\r\n right: 8px;\r\n }\r\n}\r\n\r\n\r\n \r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <div class=\"widget-container\">\r\n <div class=\"text-wrapper\">\r\n <p>\r\n En premi\u00e8re partie du guide, vous d\u00e9couvrirez un catalogue complet consacr\u00e9 aux comics centr\u00e9s sur le Chevalier Noir et les personnages de l\u2019univers DC qui lui sont \u00e9troitement li\u00e9s.Cette section est structur\u00e9e en plusieurs parties d\u00e9di\u00e9es \u00e0 Batman, ses ennemis embl\u00e9matiques, sa famille et ses alli\u00e9s.L\u2019ensemble est class\u00e9 par labels \u00e9ditoriaux pour vous offrir une navigation claire et intuitive \u00e0 travers les diff\u00e9rentes p\u00e9riodes et collections.\r\n <\/p>\r\n <\/div>\r\n <div class=\"image-wrapper\" id=\"image1\">\r\n <img decoding=\"async\" src=\"https:\/\/editionlimiteevichy.com\/wp-content\/uploads\/2025\/06\/PartieVerso-scaled.png\" alt=\"Partie 1 du guide\" \/>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"widget-container\">\r\n <div class=\"image-wrapper\" id=\"image2\">\r\n <img decoding=\"async\" src=\"https:\/\/editionlimiteevichy.com\/wp-content\/uploads\/2025\/06\/Verso-scaled.png\" alt=\"Image 2\" \/>\r\n <\/div>\r\n <div class=\"text-wrapper\">\r\n <p>\r\n En seconde partie, nous vous proposons une s\u00e9lection issue du catalogue, regroupant les coups de c\u0153ur de la librairie que nous recommandons chaleureusement. Ces r\u00e9cits ont l\u2019avantage de pouvoir se lire ind\u00e9pendamment de la continuit\u00e9 officielle de DC Comics, ce qui les rend parfaits m\u00eame pour une premi\u00e8re d\u00e9couverte de l\u2019univers Batman.\r\n Enfin, tout au long de ce guide, vous retrouverez une chronologie d\u00e9taill\u00e9e des comics Batman, couvrant la p\u00e9riode des ann\u00e9es 1980 jusqu\u2019\u00e0 aujourd\u2019hui (2024).\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n<div class=\"popup-overlay\" id=\"popup1\">\r\n <div class=\"popup-content jedi\">\r\n <button class=\"popup-close\" id=\"close1\">×<\/button>\r\n <img decoding=\"async\" src=\"https:\/\/editionlimiteevichy.com\/wp-content\/uploads\/2025\/06\/PartieVerso-scaled.png\" alt=\"Popup 1\" \/>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<div class=\"popup-overlay\" id=\"popup2\">\r\n <div class=\"popup-content sith\">\r\n <button class=\"popup-close\" id=\"close2\">×<\/button>\r\n <img decoding=\"async\" src=\"https:\/\/editionlimiteevichy.com\/wp-content\/uploads\/2025\/06\/Verso-scaled.png\" alt=\"Popup 2\" \/>\r\n <\/div>\r\n<\/div>\r\n\r\n <script>\r\n \/\/ Premier popup\r\n const image1 = document.getElementById('image1');\r\n const popup1 = document.getElementById('popup1');\r\n const close1 = document.getElementById('close1');\r\n\r\n image1.addEventListener('click', () => {\r\n popup1.style.display = 'flex';\r\n document.body.style.overflow = 'hidden';\r\n });\r\n\r\n close1.addEventListener('click', () => {\r\n popup1.style.display = 'none';\r\n document.body.style.overflow = 'auto';\r\n });\r\n\r\n popup1.addEventListener('click', (e) => {\r\n if (e.target === popup1) {\r\n popup1.style.display = 'none';\r\n document.body.style.overflow = 'auto';\r\n }\r\n });\r\n\r\n \/\/ Deuxi\u00e8me popup\r\n const image2 = document.getElementById('image2');\r\n const popup2 = document.getElementById('popup2');\r\n const close2 = document.getElementById('close2');\r\n\r\n image2.addEventListener('click', () => {\r\n popup2.style.display = 'flex';\r\n document.body.style.overflow = 'hidden';\r\n });\r\n\r\n close2.addEventListener('click', () => {\r\n popup2.style.display = 'none';\r\n document.body.style.overflow = 'auto';\r\n });\r\n\r\n popup2.addEventListener('click', (e) => {\r\n if (e.target === popup2) {\r\n popup2.style.display = 'none';\r\n document.body.style.overflow = 'auto';\r\n }\r\n });\r\n\r\n \/\/ Fermer avec ESC\r\n document.addEventListener('keydown', (e) => {\r\n if (e.key === 'Escape') {\r\n popup1.style.display = 'none';\r\n popup2.style.display = 'none';\r\n document.body.style.overflow = 'auto';\r\n }\r\n });\r\n \r\n \r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fc0d701 elementor-widget elementor-widget-html\" data-id=\"fc0d701\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\r\n\r\n\r\n<div class=\"container my-4 p-4 gif-container text-center\">\r\n <div class=\"row justify-content-center mb-3\">\r\n <div class=\"col-6 col-md-3\">\r\n <img decoding=\"async\" src=\"https:\/\/editionlimiteevichy.com\/wp-content\/uploads\/2025\/06\/PartieVerso-scaled.png\" class=\"img-fluid rounded\" alt=\"Image 1\">\r\n <\/div>\r\n <div class=\"col-6 col-md-3\">\r\n <img decoding=\"async\" src=\"https:\/\/editionlimiteevichy.com\/wp-content\/uploads\/2025\/06\/Verso-scaled.png\" class=\"img-fluid rounded\" alt=\"Image 2\">\r\n <\/div>\r\n <\/div>\r\n\r\n <a href=\"https:\/\/editionlimiteevichy.com\/wp-content\/uploads\/2025\/06\/GuideDeLecture-1.pdf\" class=\"btn btn-warning\" download>T\u00e9l\u00e9charger le PDF<\/a>\r\n<\/div>\r\n\r\n<style>\r\n.gif-container {\r\n background-image: url('https:\/\/editionlimiteevichy.com\/wp-content\/uploads\/2025\/06\/Batman.gif');\r\n background-size: cover;\r\n background-position: center;\r\n border: 4px solid #FFE500;\r\n border-radius: 15px;\r\n color: white;\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n.gif-container img {\r\n max-width: 50%;\r\n height: auto;\r\n border: 2px solid white;\r\n border-radius: 8px;\r\n}\r\n\r\n.gif-container .btn {\r\n margin-top: 15px;\r\n font-weight: bold;\r\n border-radius: 30px;\r\n padding: 10px 20px;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\r\n}\r\n\r\n.gif-container .btn:hover {\r\n transform: scale(1.05);\r\n background-color: #d8b65d;\r\n color: black;\r\n box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);\r\n}\r\n<\/style>\r\n\r\n\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-584ac836 e-flex e-con-boxed e-con e-parent\" data-id=\"584ac836\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-762aa426 e-con-full e-flex e-con e-child\" data-id=\"762aa426\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-69d04b64 elementor-widget elementor-widget-image\" data-id=\"69d04b64\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/editionlimiteevichy.com\/\">\n\t\t\t\t\t\t\t<img decoding=\"async\" width=\"300\" height=\"150\" src=\"https:\/\/editionlimiteevichy.com\/wp-content\/uploads\/2025\/06\/logotype-edition-limitee-noir-300x150.png\" class=\"attachment-medium size-medium wp-image-2636\" alt=\"\" srcset=\"https:\/\/editionlimiteevichy.com\/wp-content\/uploads\/2025\/06\/logotype-edition-limitee-noir-300x150.png 300w, https:\/\/editionlimiteevichy.com\/wp-content\/uploads\/2025\/06\/logotype-edition-limitee-noir-1024x512.png 1024w, https:\/\/editionlimiteevichy.com\/wp-content\/uploads\/2025\/06\/logotype-edition-limitee-noir-768x384.png 768w, https:\/\/editionlimiteevichy.com\/wp-content\/uploads\/2025\/06\/logotype-edition-limitee-noir.png 1182w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4340da77 elementor-shape-rounded elementor-grid-0 e-grid-align-center elementor-widget elementor-widget-social-icons\" data-id=\"4340da77\" data-element_type=\"widget\" data-widget_type=\"social-icons.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-social-icons-wrapper elementor-grid\" role=\"list\">\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\" role=\"listitem\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-facebook elementor-repeater-item-c8e86c2\" href=\"https:\/\/www.facebook.com\/p\/BD-Fugue-Vichy-61551056007550\/?locale=fr_FR\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">Facebook<\/span>\n\t\t\t\t\t\t<svg class=\"e-font-icon-svg e-fab-facebook\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z\"><\/path><\/svg>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\" role=\"listitem\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-instagram elementor-repeater-item-eae05d6\" href=\"https:\/\/www.instagram.com\/bdfugue_vichy\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">Instagram<\/span>\n\t\t\t\t\t\t<svg class=\"e-font-icon-svg e-fab-instagram\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z\"><\/path><\/svg>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\" role=\"listitem\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-envelope elementor-repeater-item-d72639e\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">Envelope<\/span>\n\t\t\t\t\t\t<svg class=\"e-font-icon-svg e-fas-envelope\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z\"><\/path><\/svg>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Navbar responsive sans Bootstrap \u2630 BD Aquilon Comics Star Wars Batman Manga Guide de lecture Batman Vous souhaitez d\u00e9couvrir Batman mais vous ne savez pas par o\u00f9 commencer ? Ce guide est l\u00e0 pour vous accompagner. Con\u00e7u sp\u00e9cialement pour les lecteurs novices ou les curieux qui aimeraient explorer l\u2019univers du Chevalier Noir, il vous propose […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":7,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"folder":[10],"class_list":["post-72","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/editionlimiteevichy.com\/index.php\/wp-json\/wp\/v2\/pages\/72","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/editionlimiteevichy.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/editionlimiteevichy.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/editionlimiteevichy.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/editionlimiteevichy.com\/index.php\/wp-json\/wp\/v2\/comments?post=72"}],"version-history":[{"count":143,"href":"https:\/\/editionlimiteevichy.com\/index.php\/wp-json\/wp\/v2\/pages\/72\/revisions"}],"predecessor-version":[{"id":4678,"href":"https:\/\/editionlimiteevichy.com\/index.php\/wp-json\/wp\/v2\/pages\/72\/revisions\/4678"}],"up":[{"embeddable":true,"href":"https:\/\/editionlimiteevichy.com\/index.php\/wp-json\/wp\/v2\/pages\/7"}],"wp:attachment":[{"href":"https:\/\/editionlimiteevichy.com\/index.php\/wp-json\/wp\/v2\/media?parent=72"}],"wp:term":[{"taxonomy":"folder","embeddable":true,"href":"https:\/\/editionlimiteevichy.com\/index.php\/wp-json\/wp\/v2\/folder?post=72"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Navbar responsive sans Bootstrap<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cinzel&display=swap\" rel=\"stylesheet\" \/>\r\n\r\n <style>\r\n body {\r\n font-family: 'Cinzel', sans-serif;\r\n margin: 0;\r\n background: #fff;\r\n }\r\n\r\n nav {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 10px 20px;\r\n position: relative;\r\n z-index: 999;\r\n }\r\n\r\n .logo img {\r\n max-width: 180px;\r\n height: auto;\r\n margin-left: 25%;\r\n }\r\n\r\n .menu-toggle {\r\n display: none;\r\n font-size: 2.5rem;\r\n cursor: pointer;\r\n user-select: none;\r\n }\r\n\r\n ul.menu {\r\n list-style: none;\r\n display: flex;\r\n gap: 25px;\r\n margin: 0 25% 0 0;\r\n padding: 0;\r\n }\r\n\r\n ul.menu li {\r\n position: relative;\r\n }\r\n\r\n ul.menu > li > a {\r\n text-decoration: none;\r\n color: #151515;\r\n font-size: 2.2vh;\r\n padding: 8px 12px;\r\n display: block;\r\n user-select: none;\r\n white-space: nowrap;\r\n }\r\n\r\n ul.menu > li:first-child > a,\r\n ul.menu > li:nth-child(2) > a,\r\n ul.menu > li:nth-child(3) > a {\r\n font-size: 4vh;\r\n }\r\n\r\n ul.menu > li > a:hover {\r\n background: #D4AF37;\r\n color: #fff;\r\n border-radius: 4px;\r\n }\r\n\r\n ul.submenu {\r\n display: none;\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n min-width: 180px;\r\n background: #151515;\r\n list-style: none;\r\n padding: 5px 0;\r\n border-radius: 4px;\r\n z-index: 1000;\r\n }\r\n\r\n ul.submenu li a {\r\n color: #fff;\r\n padding: 10px 15px;\r\n text-decoration: none;\r\n display: block;\r\n font-size: 2.2vh;\r\n white-space: nowrap;\r\n }\r\n\r\n ul.submenu li a:hover {\r\n background: #D4AF37;\r\n color: #fff;\r\n }\r\n\r\n li.has-submenu > a::after {\r\n content: ' \u25bc';\r\n font-size: 0.6em;\r\n user-select: none;\r\n }\r\n\r\n @media (min-width: 768px) {\r\n ul.menu > li:hover > ul.submenu {\r\n display: block;\r\n }\r\n .menu-toggle {\r\n display: none;\r\n }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n nav {\r\n flex-wrap: nowrap;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 10px 15px;\r\n }\r\n\r\n .logo img {\r\n width: 150px;\r\n margin: 0;\r\n }\r\n\r\n .menu-toggle {\r\n display: block;\r\n font-size: 2rem;\r\n margin-left: auto;\r\n user-select: none;\r\n }\r\n\r\n ul.menu {\r\n flex-direction: column;\r\n width: 100%;\r\n display: none;\r\n margin: 10px 0 0;\r\n gap: 0;\r\n overflow: hidden;\r\n }\r\n\r\n ul.menu.show {\r\n display: flex;\r\n }\r\n\r\n ul.menu > li {\r\n width: 100%;\r\n }\r\n\r\n ul.menu > li > a {\r\n padding: 12px 15px;\r\n border-bottom: 1px solid #ccc;\r\n }\r\n\r\n ul.submenu {\r\n position: static;\r\n background: transparent;\r\n padding: 0;\r\n box-shadow: none;\r\n max-height: 0;\r\n overflow: hidden;\r\n transition: max-height 0.3s ease-in-out;\r\n }\r\n\r\n ul.submenu.show {\r\n max-height: 500px; \/* assez grand pour le contenu *\/\r\n display: block;\r\n }\r\n\r\n ul.submenu li a {\r\n padding-left: 30px;\r\n border-bottom: 1px solid #444;\r\n background: #111;\r\n color: #fff;\r\n }\r\n\r\n li.has-submenu > a::after {\r\n float: right;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<nav role=\"navigation\" aria-label=\"Menu principal\">\r\n <div class=\"logo\">\r\n <a href=\"https:\/\/editionlimiteevichy.com\/\">\r\n <img decoding=\"async\" src=\"https:\/\/editionlimiteevichy.com\/wp-content\/uploads\/2025\/06\/logotype-edition-limitee-noir.png\" alt=\"Logo Librairie\" \/>\r\n <\/a>\r\n <\/div>\r\n\r\n <div id=\"menuToggle\" class=\"menu-toggle\" aria-label=\"Ouvrir le menu\">\u2630<\/div>\r\n\r\n <ul class=\"menu\" id=\"menu\">\r\n <li class=\"has-submenu\">\r\n <a href=\"#\" class=\"submenu-toggle\">BD<\/a>\r\n <ul class=\"submenu\">\r\n <li><a href=\"https:\/\/editionlimiteevichy.com\/index.php\/bienvenue-a-aquilon\/\">Aquilon<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li class=\"has-submenu\">\r\n <a href=\"#\" class=\"submenu-toggle\">Comics<\/a>\r\n <ul class=\"submenu\">\r\n <li><a href=\"https:\/\/editionlimiteevichy.com\/index.php\/guide-star-wars\/\">Star Wars<\/a><\/li>\r\n <li><a href=\"https:\/\/editionlimiteevichy.com\/index.php\/editionlimitee-accueil\/guide-batman\/\">Batman<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li>\r\n <a href=\"https:\/\/editionlimiteevichy.com\/index.php\/page-a-venir\/\">Manga<\/a>\r\n <\/li>\r\n <\/ul>\r\n<\/nav>\r\n\r\n<script>\r\n const menuToggle = document.getElementById('menuToggle');\r\n const menu = document.getElementById('menu');\r\n\r\n \/\/ Toggle menu burger\r\n menuToggle.addEventListener('click', () => {\r\n menu.classList.toggle('show');\r\n });\r\n\r\n \/\/ Toggle sous-menus mobiles\r\n document.querySelectorAll('.submenu-toggle').forEach(toggle => {\r\n toggle.addEventListener('click', e => {\r\n const submenu = toggle.nextElementSibling;\r\n if (window.innerWidth < 768 && submenu) {\r\n e.preventDefault();\r\n submenu.classList.toggle('show');\r\n }\r\n });\r\n });\r\n\r\n \/\/ Fermer le menu mobile quand on clique sur un lien (hors sous-menus toggles)\r\n document.querySelectorAll('.menu a:not(.submenu-toggle)').forEach(link => {\r\n link.addEventListener('click', () => {\r\n if (window.innerWidth < 768) {\r\n menu.classList.remove('show');\r\n document.querySelectorAll('.submenu').forEach(sub => sub.classList.remove('show'));\r\n }\r\n });\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-afcf99a e-con-full e-flex elementor-invisible e-con e-parent\" data-id=\"afcf99a\" data-element_type=\"container\" data-settings=\"{"background_background":"slideshow","background_slideshow_gallery":[{"id":4174,"url":"https:\\\/\\\/editionlimiteevichy.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/bandeauBatman.png"}],"animation":"fadeIn","background_slideshow_loop":"yes","background_slideshow_slide_duration":5000,"background_slideshow_slide_transition":"fade","background_slideshow_transition_duration":500}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a24a768 elementor-widget elementor-widget-html\" data-id=\"a24a768\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Beau+Rivage&display=swap\" rel=\"stylesheet\">\r\n\r\n\r\n<div class=\"golden-gradient-text\">Guide de lecture Batman<\/div>\r\n\r\n<style>\r\n.golden-gradient-text {\r\n font-family: 'Beau Rivage', Sans-Serif;\r\n font-size: 5rem;\r\n font-weight: bold;\r\n text-align: center;\r\n margin: 20px auto;\r\n display: inline-block;\r\n background: linear-gradient(\r\n 90deg,\r\n #1c1c1e,\r\n #2e2e2e,\r\n #f5f5f5,\r\n #888888,\r\n #444444\r\n \r\n );\r\n background-size: 300% 100%;\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n animation: goldenMove 5s linear infinite;\r\n}\r\n\r\n@keyframes goldenMove {\r\n 0% {\r\n background-position: 0% 50%;\r\n }\r\n 50% {\r\n background-position: 100% 50%;\r\n }\r\n 100% {\r\n background-position: 0% 50%;\r\n }\r\n}\r\n<\/style>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5c8bb46 e-con-full e-flex e-con e-parent\" data-id=\"5c8bb46\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4afce36 elementor-widget elementor-widget-text-editor\" data-id=\"4afce36\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"159\" data-end=\"549\">Vous souhaitez d\u00e9couvrir Batman mais vous ne savez pas par o\u00f9 commencer ? Ce guide est l\u00e0 pour vous accompagner. Con\u00e7u sp\u00e9cialement pour les lecteurs novices ou les curieux qui aimeraient explorer l\u2019univers du Chevalier Noir, il vous propose des points d\u2019entr\u00e9e clairs et accessibles pour plonger dans les comics Batman sans vous perdre.<\/p><p data-start=\"551\" data-end=\"972\">Au-del\u00e0 d\u2019un simple guide, ce contenu agit aussi comme un catalogue visuel, vous permettant de rep\u00e9rer facilement les grands classiques et les lectures incontournables autour de Batman. Vous y trouverez non seulement des r\u00e9cits majeurs centr\u00e9s sur le justicier de Gotham, mais aussi des recommandations autour des personnages essentiels de son univers : Robin, Batgirl, Nightwing, le Joker, Catwoman et bien d\u2019autres.<\/p><p data-start=\"974\" data-end=\"1202\">Que vous cherchiez \u00e0 d\u00e9couvrir les origines du mythe, les grandes sagas modernes ou les r\u00e9cits marquants de ses alli\u00e9s et ennemis, ce guide est une porte d\u2019entr\u00e9e id\u00e9ale pour naviguer dans l\u2019univers dense et fascinant de Batman.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7fe5b88 e-con-full e-flex e-con e-parent\" data-id=\"7fe5b88\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f80b4ba elementor-widget elementor-widget-html\" data-id=\"f80b4ba\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fr\">\r\n<head>\r\n <style>\r\n html, body {\r\n margin: 0;\r\n padding: 0;\r\n height: 100%;\r\n font-family: 'Segoe UI', sans-serif;\r\n }\r\n\r\n .widget-container {\r\n display: flex;\r\n align-items: flex-start;\r\n padding: 2vw;\r\n gap: 2vw;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n }\r\n\r\n .image-wrapper {\r\n flex-shrink: 0;\r\n height: 100vh;\r\n display: flex;\r\n align-items: flex-start;\r\n cursor: pointer;\r\n }\r\n\r\n .image-wrapper img {\r\n height: 100%;\r\n width: auto;\r\n max-width: 100%;\r\n object-fit: cover;\r\n display: block;\r\n border-radius: 12px;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .image-wrapper img:hover {\r\n transform: scale(1.05);\r\n }\r\n\r\n .text-wrapper {\r\n position: sticky;\r\n top: 30%;\r\n transform: translateY(-50%);\r\n color: #f5f5f5;\r\n font-size: 1.5rem;\r\n line-height: 1.5;\r\n align-self: center;\r\n }\r\n\r\n .popup-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100vw;\r\n height: 100vh;\r\n background-color: rgba(0,0,0,0.9);\r\n display: none;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 9999;\r\n }\r\n\r\n .popup-content \r\n {\r\n position: relative;\r\n max-height: 90vh;\r\n max-width: 90vw;\r\n overflow: auto;\r\n border-radius: 12px;\r\n box-shadow: 0 0 20px #d8b65d;\r\n background: #000;\r\n padding: 0.5rem; \r\n }\r\n\r\n .popup-content img {\r\n height: 90vh;\r\n width: auto;\r\n display: block;\r\n border-radius: 12px;\r\n }\r\n\r\n .popup-close {\r\n position: absolute;\r\n top: 12px;\r\n right: 12px;\r\n font-size: 2rem;\r\n color: #d8b65d;\r\n cursor: pointer;\r\n user-select: none;\r\n font-weight: bold;\r\n background: transparent;\r\n border: none;\r\n }\r\n \/* Halo Jedi *\/\r\n.popup-content.jedi {\r\n animation: jedi-glow 2s infinite alternate ease-in-out;\r\n box-shadow: 0 0 30px 5px rgba(0, 195, 255, 0.6);\r\n}\r\n\r\n\/* Halo Sith *\/\r\n.popup-content.sith {\r\n animation: sith-glow 2s infinite alternate ease-in-out;\r\n box-shadow: 0 0 30px 5px rgba(255, 0, 0, 0.6);\r\n}\r\n\r\n@keyframes jedi-glow {\r\n 0% {\r\n box-shadow: 0 0 15px 5px rgba(0, 195, 255, 0.4);\r\n }\r\n 100% {\r\n box-shadow: 0 0 50px 10px rgba(0, 195, 255, 0.9);\r\n }\r\n}\r\n\r\n@keyframes sith-glow {\r\n 0% {\r\n box-shadow: 0 0 15px 5px rgba(255, 0, 0, 0.4);\r\n }\r\n 100% {\r\n box-shadow: 0 0 50px 10px rgba(255, 0, 0, 0.9);\r\n }\r\n}\r\n\r\n\r\n@media (max-width: 768px) {\r\n .widget-container {\r\n flex-direction: column;\r\n padding: 5vw 3vw;\r\n gap: 4vw;\r\n }\r\n\r\n .image-wrapper {\r\n height: auto;\r\n justify-content: center;\r\n }\r\n\r\n .image-wrapper img {\r\n width: 100%;\r\n height: auto;\r\n max-height: 60vh;\r\n }\r\n\r\n .text-wrapper {\r\n position: static;\r\n transform: none;\r\n text-align: justify;\r\n font-size: 1.1rem;\r\n line-height: 1.4;\r\n padding: 1rem 0;\r\n }\r\n\r\n .popup-content img {\r\n width: 90vw;\r\n height: auto;\r\n max-height: 80vh;\r\n }\r\n\r\n .popup-content {\r\n max-width: 95vw;\r\n max-height: 95vh;\r\n }\r\n\r\n .popup-close {\r\n font-size: 1.5rem;\r\n top: 8px;\r\n right: 8px;\r\n }\r\n}\r\n\r\n\r\n \r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <div class=\"widget-container\">\r\n <div class=\"text-wrapper\">\r\n <p>\r\n En premi\u00e8re partie du guide, vous d\u00e9couvrirez un catalogue complet consacr\u00e9 aux comics centr\u00e9s sur le Chevalier Noir et les personnages de l\u2019univers DC qui lui sont \u00e9troitement li\u00e9s.Cette section est structur\u00e9e en plusieurs parties d\u00e9di\u00e9es \u00e0 Batman, ses ennemis embl\u00e9matiques, sa famille et ses alli\u00e9s.L\u2019ensemble est class\u00e9 par labels \u00e9ditoriaux pour vous offrir une navigation claire et intuitive \u00e0 travers les diff\u00e9rentes p\u00e9riodes et collections.\r\n <\/p>\r\n <\/div>\r\n <div class=\"image-wrapper\" id=\"image1\">\r\n <img decoding=\"async\" src=\"https:\/\/editionlimiteevichy.com\/wp-content\/uploads\/2025\/06\/PartieVerso-scaled.png\" alt=\"Partie 1 du guide\" \/>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"widget-container\">\r\n <div class=\"image-wrapper\" id=\"image2\">\r\n <img decoding=\"async\" src=\"https:\/\/editionlimiteevichy.com\/wp-content\/uploads\/2025\/06\/Verso-scaled.png\" alt=\"Image 2\" \/>\r\n <\/div>\r\n <div class=\"text-wrapper\">\r\n <p>\r\n En seconde partie, nous vous proposons une s\u00e9lection issue du catalogue, regroupant les coups de c\u0153ur de la librairie que nous recommandons chaleureusement. Ces r\u00e9cits ont l\u2019avantage de pouvoir se lire ind\u00e9pendamment de la continuit\u00e9 officielle de DC Comics, ce qui les rend parfaits m\u00eame pour une premi\u00e8re d\u00e9couverte de l\u2019univers Batman.\r\n Enfin, tout au long de ce guide, vous retrouverez une chronologie d\u00e9taill\u00e9e des comics Batman, couvrant la p\u00e9riode des ann\u00e9es 1980 jusqu\u2019\u00e0 aujourd\u2019hui (2024).\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n<div class=\"popup-overlay\" id=\"popup1\">\r\n <div class=\"popup-content jedi\">\r\n <button class=\"popup-close\" id=\"close1\">×<\/button>\r\n <img decoding=\"async\" src=\"https:\/\/editionlimiteevichy.com\/wp-content\/uploads\/2025\/06\/PartieVerso-scaled.png\" alt=\"Popup 1\" \/>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<div class=\"popup-overlay\" id=\"popup2\">\r\n <div class=\"popup-content sith\">\r\n <button class=\"popup-close\" id=\"close2\">×<\/button>\r\n <img decoding=\"async\" src=\"https:\/\/editionlimiteevichy.com\/wp-content\/uploads\/2025\/06\/Verso-scaled.png\" alt=\"Popup 2\" \/>\r\n <\/div>\r\n<\/div>\r\n\r\n <script>\r\n \/\/ Premier popup\r\n const image1 = document.getElementById('image1');\r\n const popup1 = document.getElementById('popup1');\r\n const close1 = document.getElementById('close1');\r\n\r\n image1.addEventListener('click', () => {\r\n popup1.style.display = 'flex';\r\n document.body.style.overflow = 'hidden';\r\n });\r\n\r\n close1.addEventListener('click', () => {\r\n popup1.style.display = 'none';\r\n document.body.style.overflow = 'auto';\r\n });\r\n\r\n popup1.addEventListener('click', (e) => {\r\n if (e.target === popup1) {\r\n popup1.style.display = 'none';\r\n document.body.style.overflow = 'auto';\r\n }\r\n });\r\n\r\n \/\/ Deuxi\u00e8me popup\r\n const image2 = document.getElementById('image2');\r\n const popup2 = document.getElementById('popup2');\r\n const close2 = document.getElementById('close2');\r\n\r\n image2.addEventListener('click', () => {\r\n popup2.style.display = 'flex';\r\n document.body.style.overflow = 'hidden';\r\n });\r\n\r\n close2.addEventListener('click', () => {\r\n popup2.style.display = 'none';\r\n document.body.style.overflow = 'auto';\r\n });\r\n\r\n popup2.addEventListener('click', (e) => {\r\n if (e.target === popup2) {\r\n popup2.style.display = 'none';\r\n document.body.style.overflow = 'auto';\r\n }\r\n });\r\n\r\n \/\/ Fermer avec ESC\r\n document.addEventListener('keydown', (e) => {\r\n if (e.key === 'Escape') {\r\n popup1.style.display = 'none';\r\n popup2.style.display = 'none';\r\n document.body.style.overflow = 'auto';\r\n }\r\n });\r\n \r\n \r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fc0d701 elementor-widget elementor-widget-html\" data-id=\"fc0d701\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\r\n\r\n\r\n<div class=\"container my-4 p-4 gif-container text-center\">\r\n <div class=\"row justify-content-center mb-3\">\r\n <div class=\"col-6 col-md-3\">\r\n <img decoding=\"async\" src=\"https:\/\/editionlimiteevichy.com\/wp-content\/uploads\/2025\/06\/PartieVerso-scaled.png\" class=\"img-fluid rounded\" alt=\"Image 1\">\r\n <\/div>\r\n <div class=\"col-6 col-md-3\">\r\n <img decoding=\"async\" src=\"https:\/\/editionlimiteevichy.com\/wp-content\/uploads\/2025\/06\/Verso-scaled.png\" class=\"img-fluid rounded\" alt=\"Image 2\">\r\n <\/div>\r\n <\/div>\r\n\r\n <a href=\"https:\/\/editionlimiteevichy.com\/wp-content\/uploads\/2025\/06\/GuideDeLecture-1.pdf\" class=\"btn btn-warning\" download>T\u00e9l\u00e9charger le PDF<\/a>\r\n<\/div>\r\n\r\n<style>\r\n.gif-container {\r\n background-image: url('https:\/\/editionlimiteevichy.com\/wp-content\/uploads\/2025\/06\/Batman.gif');\r\n background-size: cover;\r\n background-position: center;\r\n border: 4px solid #FFE500;\r\n border-radius: 15px;\r\n color: white;\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n.gif-container img {\r\n max-width: 50%;\r\n height: auto;\r\n border: 2px solid white;\r\n border-radius: 8px;\r\n}\r\n\r\n.gif-container .btn {\r\n margin-top: 15px;\r\n font-weight: bold;\r\n border-radius: 30px;\r\n padding: 10px 20px;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\r\n}\r\n\r\n.gif-container .btn:hover {\r\n transform: scale(1.05);\r\n background-color: #d8b65d;\r\n color: black;\r\n box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);\r\n}\r\n<\/style>\r\n\r\n\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-584ac836 e-flex e-con-boxed e-con e-parent\" data-id=\"584ac836\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-762aa426 e-con-full e-flex e-con e-child\" data-id=\"762aa426\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-69d04b64 elementor-widget elementor-widget-image\" data-id=\"69d04b64\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/editionlimiteevichy.com\/\">\n\t\t\t\t\t\t\t<img decoding=\"async\" width=\"300\" height=\"150\" src=\"https:\/\/editionlimiteevichy.com\/wp-content\/uploads\/2025\/06\/logotype-edition-limitee-noir-300x150.png\" class=\"attachment-medium size-medium wp-image-2636\" alt=\"\" srcset=\"https:\/\/editionlimiteevichy.com\/wp-content\/uploads\/2025\/06\/logotype-edition-limitee-noir-300x150.png 300w, https:\/\/editionlimiteevichy.com\/wp-content\/uploads\/2025\/06\/logotype-edition-limitee-noir-1024x512.png 1024w, https:\/\/editionlimiteevichy.com\/wp-content\/uploads\/2025\/06\/logotype-edition-limitee-noir-768x384.png 768w, https:\/\/editionlimiteevichy.com\/wp-content\/uploads\/2025\/06\/logotype-edition-limitee-noir.png 1182w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4340da77 elementor-shape-rounded elementor-grid-0 e-grid-align-center elementor-widget elementor-widget-social-icons\" data-id=\"4340da77\" data-element_type=\"widget\" data-widget_type=\"social-icons.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-social-icons-wrapper elementor-grid\" role=\"list\">\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\" role=\"listitem\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-facebook elementor-repeater-item-c8e86c2\" href=\"https:\/\/www.facebook.com\/p\/BD-Fugue-Vichy-61551056007550\/?locale=fr_FR\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">Facebook<\/span>\n\t\t\t\t\t\t<svg class=\"e-font-icon-svg e-fab-facebook\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z\"><\/path><\/svg>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\" role=\"listitem\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-instagram elementor-repeater-item-eae05d6\" href=\"https:\/\/www.instagram.com\/bdfugue_vichy\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">Instagram<\/span>\n\t\t\t\t\t\t<svg class=\"e-font-icon-svg e-fab-instagram\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z\"><\/path><\/svg>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\" role=\"listitem\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-envelope elementor-repeater-item-d72639e\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">Envelope<\/span>\n\t\t\t\t\t\t<svg class=\"e-font-icon-svg e-fas-envelope\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z\"><\/path><\/svg>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Navbar responsive sans Bootstrap \u2630 BD Aquilon Comics Star Wars Batman Manga Guide de lecture Batman Vous souhaitez d\u00e9couvrir Batman mais vous ne savez pas par o\u00f9 commencer ? Ce guide est l\u00e0 pour vous accompagner. Con\u00e7u sp\u00e9cialement pour les lecteurs novices ou les curieux qui aimeraient explorer l\u2019univers du Chevalier Noir, il vous propose […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":7,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"folder":[10],"class_list":["post-72","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/editionlimiteevichy.com\/index.php\/wp-json\/wp\/v2\/pages\/72","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/editionlimiteevichy.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/editionlimiteevichy.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/editionlimiteevichy.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/editionlimiteevichy.com\/index.php\/wp-json\/wp\/v2\/comments?post=72"}],"version-history":[{"count":143,"href":"https:\/\/editionlimiteevichy.com\/index.php\/wp-json\/wp\/v2\/pages\/72\/revisions"}],"predecessor-version":[{"id":4678,"href":"https:\/\/editionlimiteevichy.com\/index.php\/wp-json\/wp\/v2\/pages\/72\/revisions\/4678"}],"up":[{"embeddable":true,"href":"https:\/\/editionlimiteevichy.com\/index.php\/wp-json\/wp\/v2\/pages\/7"}],"wp:attachment":[{"href":"https:\/\/editionlimiteevichy.com\/index.php\/wp-json\/wp\/v2\/media?parent=72"}],"wp:term":[{"taxonomy":"folder","embeddable":true,"href":"https:\/\/editionlimiteevichy.com\/index.php\/wp-json\/wp\/v2\/folder?post=72"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}