```json { "title": "L'Atlas Interdit", "index_html": "\n\n\n \n \n L'Atlas Interdit\n \n\n\n
\n
\n

Le livre ouvert de la bibliothèque est un atlas d’architecture interdite. Déplacer une réglette-lentille sur une ligne du livre révèle qu’un dessin réputé imaginaire correspond exactement à la cité encadrée de l'image suivante.

\n \"Le\n
\n
\n \n
\n
\n
\n \"Le\n

Les archivistes n’ont pas effacé la ville, ils l’ont classée comme fiction pour que personne ne cherche son emplacement.

\n
\n
\n \n\n", "styles_css": "body {\n font-family: 'Arial', sans-serif;\n margin: 0;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n background-color: #2c3e50;\n}\n.container {\n width: 90%;\n max-width: 1400px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n height: 80vh;\n}\n.left-section, .right-section {\n width: 38%;\n color: #ecf0f1;\n}\n.slider-container {\n width: 24%;\n position: relative;\n text-align: center;\n}\n#slider {\n width: 100%;\n -webkit-appearance: none;\n appearance: none;\n background-color: #ecf0f1;\n height: 5px;\n border-radius: 5px;\n outline: none;\n opacity: 0.7;\n transition: opacity 0.2s;\n}\n#slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 15px;\n height: 15px;\n background-color: #3498db;\n border-radius: 50%;\n cursor: pointer;\n}\n#slider::-moz-range-thumb {\n width: 15px;\n height: 15px;\n background-color: #3498db;\n border-radius: 50%;\n cursor: pointer;\n}\n.lens {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 10px;\n height: 10px;\n background-color: rgba(255, 255, 255, 0.7);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n pointer-events: none;\n}\nimg {\n max-width: 100%;\n height: auto;\n}\n.hidden {\n display: none;\n}\n@media (max-width: 390px) {\n .container {\n flex-direction: column;\n align-items: center;\n height: auto;\n }\n .left-section, .right-section {\n width: 100%;\n margin-bottom: 20px;\n }\n .slider-container {\n width: 80%;\n }\n}", "script_js": "document.addEventListener('DOMContentLoaded', function() {\n const slider = document.getElementById('slider');\n const lens = document.querySelector('.lens');\n const rightSection = document.querySelector('.right-section');\n const hiddenParagraph = rightSection.querySelector('.hidden');\n const secondImage = rightSection.querySelector('img');\n\n slider.addEventListener('input', function() {\n const value = this.value;\n lens.style.left = `${value}%`;\n if (value >= 70) {\n hiddenParagraph.classList.remove('hidden');\n secondImage.classList.remove('hidden');\n } else {\n hiddenParagraph.classList.add('hidden');\n secondImage.classList.add('hidden');\n }\n });\n});" } ```