{"id":23,"date":"2025-06-12T09:21:22","date_gmt":"2025-06-12T09:21:22","guid":{"rendered":"https:\/\/beethovenwars.com\/histoire\/"},"modified":"2025-07-30T18:02:37","modified_gmt":"2025-07-30T16:02:37","slug":"histoire","status":"publish","type":"page","link":"https:\/\/beethovenwars.com\/en\/histoire\/","title":{"rendered":"Synopsis"},"content":{"rendered":"<p><\/p>\n\n\n \n\n<!DOCTYPE html>\n<html>\n<head>\n    <style>\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@300;400;700;900&family=Playfair+Display:wght@400;700;900&display=swap');\n        \n        \/* \u00c9TAPE 2 - CSS avec Animations - VERSION WORDPRESS FIX\u00c9E *\/\n        :root {\n            --primary: #ff006e;\n            --secondary: #34C1F0;\n            --dark: #0a0a0a;\n            --light: #ffffff;\n            --glass: rgba(255, 255, 255, 0.05);\n            --glass-border: rgba(255, 255, 255, 0.1);\n            --main-font: 'Roboto', Arial, sans-serif;\n            --title-font: 'Playfair Display', serif;\n        }\n\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        \/* \u2705 SP\u00c9CIFICIT\u00c9 RENFORC\u00c9E POUR WORDPRESS *\/\n        html body,\n        body,\n        body *:not(.wp-admin *):not(.wp-toolbar *) {\n            font-family: var(--main-font) !important;\n        }\n\n        \/* \u2705 FORCE L'AFFICHAGE DES IMAGES WORDPRESS *\/\n        .entry-content .photo-block,\n        .post-content .photo-block,\n        .wp-block .photo-block,\n        div.photo-block {\n            background: rgb(0, 0, 0) !important;\n            border-radius: 20px !important;\n            text-align: center !important;\n            color: white !important;\n            font-size: 1.5rem !important;\n            font-weight: 400 !important;\n            position: relative !important;\n            overflow: hidden !important;\n            cursor: pointer !important;\n            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;\n            max-height: 60vh !important;\n            height: 60vh !important;\n            display: block !important; \/* \u2705 FORCE L'AFFICHAGE *\/\n            visibility: visible !important; \/* \u2705 FORCE LA VISIBILIT\u00c9 *\/\n        }\n        \n        \/* \u2705 SP\u00c9CIFICIT\u00c9 MAXIMALE POUR LES IMAGES *\/\n        .entry-content .photo-block img,\n        .post-content .photo-block img,\n        .wp-block .photo-block img,\n        div.photo-block img,\n        .photo-block img {\n            width: 100% !important;\n            height: 100% !important;\n            object-fit: cover !important;\n            border-radius: 25px !important;\n            display: block !important;\n            visibility: visible !important; \/* \u2705 FORCE LA VISIBILIT\u00c9 *\/\n            opacity: 1 !important; \/* \u2705 FORCE L'OPACIT\u00c9 *\/\n            max-width: none !important; \/* \u2705 OVERRIDE LES LIMITES WP *\/\n            max-height: none !important; \/* \u2705 OVERRIDE LES LIMITES WP *\/\n        }\n\n        body {\n            font-family: var(--main-font) !important;\n            line-height: 1.6;\n            background: radial-gradient(circle at 20% 40%, var(--primary) 0%, transparent 50%),\n                        radial-gradient(circle at 70% 40%, var(--secondary) 0%, transparent 50%),\n                        var(--dark);\n            overflow-x: hidden;\n        }\n\n        \/* Section Hero *\/\n        .hero-section {\n            color: white;\n            text-align: center;\n            padding: 100px 10px;\n            position: relative;\n            overflow: hidden;\n            width: 100vw;\n            height: 80vh;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n        }\n\n        .hero-section::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background: url('data:image\/svg+xml,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 100 100\"><circle cx=\"20\" cy=\"20\" r=\"2\" fill=\"rgba(255,255,255,0.1)\"\/><circle cx=\"80\" cy=\"40\" r=\"1\" fill=\"rgba(255,255,255,0.1)\"\/><circle cx=\"40\" cy=\"80\" r=\"1.5\" fill=\"rgba(255,255,255,0.1)\"\/><\/svg>');\n            animation: float 20s ease-in-out infinite;\n        }\n\n        @keyframes float {\n            0%, 100% { transform: translateY(0px) rotate(0deg); }\n            50% { transform: translateY(-20px) rotate(180deg); }\n        }\n\n        .hero-content {\n            position: relative;\n            z-index: 2;\n            animation: slideInUp 1s ease-out;\n        }\n\n        .big-text {\n            font-family: var(--title-font) !important;\n            font-size: clamp(2.5rem, 8vw, 5rem);\n            font-weight: 900;\n            margin-bottom: 20px;\n            background: linear-gradient(45deg, #fff, #f0f0f0);\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n            background-clip: text;\n            animation: textGlow 3s ease-in-out infinite alternate;\n        }\n\n        @keyframes textGlow {\n            from { filter: drop-shadow(0 0 10px rgba(255,255,255,0.3)); }\n            to { filter: drop-shadow(0 0 20px rgba(255,255,255,0.6)); }\n        }\n\n        .subtitle {\n            font-family: var(--main-font) !important;\n            font-size: 1.2rem;\n            opacity: 0.9;\n            margin-bottom: 30px;\n            animation: slideInUp 1s ease-out 0.3s both;\n        }\n\n        \/* Sections Synopsis *\/\n        .synopsis-section {\n            padding: 100px 0;\n            position: relative;\n            overflow: hidden;\n        }\n\n        .container {\n            max-width: 1600px;\n            margin: 0 auto;\n            padding: 0 20px;\n        }\n\n        .section-title {\n            font-family: var(--title-font) !important;\n            font-size: 2.5rem;\n            text-align: center;\n            margin-bottom: 80px;\n            color: #ffffff;\n            position: relative;\n            opacity: 0;\n            animation: slideInDown 1s ease-out forwards;\n        }\n\n        .section-title::after {\n            content: '';\n            position: absolute;\n            bottom: -10px;\n            left: 50%;\n            transform: translateX(-50%);\n            width: 100px;\n            height: 3px;\n            background: white;\n            border-radius: 2px;\n            animation: expandLine 1s ease-out 0.5s both;\n        }\n\n        @keyframes expandLine {\n            from { width: 0; }\n            to { width: 100px; }\n        }\n\n        .content-grid {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 60px;\n            align-items: center;\n            opacity: 0;\n            transform: translateY(50px);\n            animation: slideInUp 1s ease-out 0.8s both;\n        }\n\n        \/* \u2705 EFFET HOVER RENFORC\u00c9 *\/\n        .photo-block::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: -100%;\n            width: 100%;\n            height: 100%;\n            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);\n            transition: left 0.6s ease;\n            z-index: 1;\n        }\n\n        .photo-block:hover::before {\n            left: 100%;\n        }\n\n        .photo-block:hover {\n            transform: translateY(-10px) scale(1.02) !important;\n            box-shadow: 0 20px 40px rgba(255, 107, 107, 0.3) !important;\n        }\n\n        .text-block {\n            background: rgb(39, 38, 38);\n            border: 2px solid #e9ecef;\n            border-radius: 20px;\n            padding: 25px 30px;\n            text-align: justify;\n            position: relative;\n            transition: all 0.4s ease;\n            cursor: pointer;\n            max-height: 70vh;\n            height: 60vh;\n            width: 50vw;\n            overflow-y: auto;\n            display: flex;\n            align-items: stretch;\n            justify-content: center;\n        }\n\n        .text-block:hover {\n            transform: translateY(-10px);\n            box-shadow: 0 20px 40px rgba(0,0,0,0.1);\n            border-color: #34C1F0;\n        }\n\n        .text-subtitle {\n            font-family: var(--main-font) !important; \n            color: #ffffff;\n            font-size: 0.9rem; \n            font-weight: 700;\n            line-height: 1.5; \n            width: 100%; \n            height: 100%;\n            margin: 0; \n            padding: 0; \n            text-transform: none !important;\n\n        }\n\n        \/* Reverse layout pour Synopsis 3 *\/\n        .reverse .content-grid {\n            grid-template-columns: 1fr 1fr;\n        }\n\n        .reverse .photo-block {\n            order: 2;\n        }\n\n        .reverse .text-block {\n            order: 1;\n        }\n\n        \/* Animations d'entr\u00e9e *\/\n        @keyframes slideInUp {\n            from {\n                opacity: 0;\n                transform: translateY(50px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        @keyframes slideInDown {\n            from {\n                opacity: 0;\n                transform: translateY(-50px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        \/* \u2705 RESPONSIVE AM\u00c9LIOR\u00c9 *\/\n        @media (max-width: 768px) {\n            .content-grid {\n                grid-template-columns: 1fr;\n                gap: 40px;\n            }\n            \n            .reverse .photo-block,\n            .reverse .text-block {\n                order: unset;\n            }\n            \n            .section-title {\n                font-size: 2rem;\n            }\n\n            .text-block {\n                width: 95vw;\n                height: auto;\n                min-height: 50vh;\n                padding: 10px 15px;\n            }\n\n            .text-subtitle {\n                font-size: 0.95rem;\n                line-height: 1.4;\n            }\n\n            \/* \u2705 PHOTOS MOBILES OPTIMIS\u00c9ES *\/\n            .photo-block {\n                height: 50vh !important;\n                max-height: 50vh !important;\n            }\n        }\n\n        \/* \u2705 ANIMATION DE SCROLL WORDPRESS-COMPATIBLE *\/\n        .scroll-animate {\n            opacity: 0;\n            transform: translateY(30px);\n            transition: all 0.8s ease;\n        }\n\n        .scroll-animate.animate {\n            opacity: 1;\n            transform: translateY(0);\n        }\n\n        \/* \u2705 FORCE LES POLICES WORDPRESS *\/\n        .wp-block-paragraph,\n        .entry-content,\n        .entry-content p,\n        .post-content,\n        .post-content p {\n            font-family: var(--main-font) !important;\n        }\n\n        .text-block p {\n            margin: 0 !important;\n            padding: 0 !important;\n            width: 100%;\n            height: 100%;\n            display: flex;\n            align-items: flex-start;\n            text-align: justify;\n        }\n\n        \/* \u2705 OVERRIDE DES STYLES WORDPRESS PROBL\u00c9MATIQUES *\/\n        .wp-block-image,\n        .wp-block-media-text,\n        .alignnone,\n        .aligncenter,\n        .alignleft,\n        .alignright {\n            margin: 0 !important;\n        }\n\n        \/* \u2705 D\u00c9SACTIVE LES LAZY LOADING WORDPRESS QUI POURRAIENT BLOQUER *\/\n        img[loading=\"lazy\"] {\n            loading: eager !important;\n        }\n    <\/style>\n<\/head>\n<body>\n    <!-- Section Hero -->\n    <section class=\"hero-section\">\n        <div class=\"hero-content\">\n            <h1 class=\"big-text\">Synopsis<\/h1>\n            <p class=\"subtitle\">Trahison &#8211; Combat &#8211; Paix<\/p>\n        <\/div>\n    <\/section>\n\n    <!-- Synopsis 2 -->\n    <section class=\"synopsis-section scroll-animate\">\n        <div class=\"container\">\n            <h2 class=\"section-title\">Beethoven Wars<\/h2>\n            <div class=\"content-grid\">\n                <div class=\"photo-block\">\n                   <img decoding=\"async\" src=\"https:\/\/beethovenwars.com\/wp-content\/uploads\/2025\/07\/10-Meilleures-Julien-Benhamou-1-scaled.jpg\" \n                        alt=\"Beethoven Wars\" \n                        loading=\"eager\"\n                        style=\"display: block !important; visibility: visible !important;\">\n                <\/div>\n                <div class=\"text-block\">\n                    <p class=\"text-subtitle\">On a distant planet, Stephan \u2014 also known as King Stephen \u2014 and his companions face the end of a world ravaged by war. They have emerged victorious, but the flames have consumed the planet they once called home. They flee aboard a spacecraft, taking with them a few prisoners.<br>\n<br>\nThe encounter in the depths of space with Gisele\u2019s army \u2014 also known as Athena \u2014 could have marked the final destruction of all civilization. But the pain of war, the scars it left behind, the wandering through space, and the desperate search for a new place to live give King Stephen a new perspective on the remnants of humanity now under his care.\n\nHe therefore decides that only Athena and King Stephen will fight, sparing their armies. A fierce battle begins.<br>\n<br>\nBut the vastness and beauty of the cosmos will shake the minds of both leaders, revealing the emptiness of their struggle in the face of far greater challenges still to come.<br>\n<br>\nThe weapons are lowered. Respect and understanding begin to grow between Athena and King Stephen. They become human once more \u2014 they become Gisele and Stephan again, the children who once played together, simply, before their world fell apart.<br>\n<br>\nPeace \u2014 and its charter \u2014 is finally signed. The ships now form a single fleet, united in the search for a new, better world. Their journey brings them near Earth, once the cradle of science and the arts.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Synopsis 3 -->\n    <section class=\"synopsis-section reverse scroll-animate\">\n        <div class=\"container\">\n            <div class=\"content-grid\">\n                <div class=\"photo-block\">\n                    <img decoding=\"async\" src=\"https:\/\/beethovenwars.com\/wp-content\/uploads\/2025\/07\/Capture-decran-2025-07-21-a-11.54.46.png\" \n                         alt=\"Synopsis 3\"\n                         loading=\"eager\"\n                         style=\"display: block !important; visibility: visible !important;\">\n                <\/div>\n                <div class=\"text-block\">\n                    <p class=\"text-subtitle\">Guided by Thoth, the wise one, Gisele sets out as a scout aboard her ship. Earth appears very different from the stories and memories \u2014 life exists in plant form, but no animal life has survived on the surface.<br>\n<br>\nDuring a deep dive into the ocean\u2019s depths, Gisele finally discovers signs of animal life \u2014 fish and crustaceans. She continues her exploration on land, in a snow-covered Athens. The Earth's air is tainted, and it causes her to hallucinate, blending memories of past wars into a haunting, surreal vision.<br>\n<br>\nRegaining consciousness, Gisele finds herself face to face with an army of robots destroying everything in their path. Temples and statues are obliterated before her eyes. The toxic air begins to poison her.<br>\n<br>\nShe collapses, covered by the frozen mantle. Stephan sets out to find her on Earth, but he too quickly succumbs to the toxic effects of the air. Gyula, Gisele\u2019s brother, goes in search of them. He finds their motionless bodies and brings them back to safety aboard the central space station.\n\nStephan regains consciousness quickly, but Gisele, exposed longer to the poisonous air, remains in a coma. Time passes \u2014 and at last, Gisele awakens.<br>\n<br>\nA surprise awaits her: during her absence, a new place to live has been created \u2014 a theater where war, suffering, and tears are no longer spoken of, but rather art, beauty, music, and science. A kingdom orbiting Earth, a kingdom where Gisele reigns as queen, with the universe as its witness.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <script>\n        \/\/ \u2705 SCRIPT WORDPRESS-COMPATIBLE\n        document.addEventListener('DOMContentLoaded', function() {\n            \/\/ Animation au scroll\n            const observerOptions = {\n                threshold: 0.1,\n                rootMargin: '0px 0px -50px 0px'\n            };\n\n            const observer = new IntersectionObserver((entries) => {\n                entries.forEach(entry => {\n                    if (entry.isIntersecting) {\n                        entry.target.classList.add('animate');\n                    }\n                });\n            }, observerOptions);\n\n            document.querySelectorAll('.scroll-animate').forEach(el => {\n                observer.observe(el);\n            });\n\n            \/\/ \u2705 FORCE L'AFFICHAGE DES IMAGES AU CAS O\u00d9\n            setTimeout(() => {\n                document.querySelectorAll('.photo-block img').forEach(img => {\n                    img.style.display = 'block';\n                    img.style.visibility = 'visible';\n                    img.style.opacity = '1';\n                });\n            }, 100);\n\n            \/\/ Animation des blocs au hover\n            document.querySelectorAll('.photo-block, .text-block').forEach(block => {\n                block.addEventListener('mouseenter', function() {\n                    this.style.transform = 'translateY(-10px) scale(1.02)';\n                });\n                \n                block.addEventListener('mouseleave', function() {\n                    this.style.transform = 'translateY(0) scale(1)';\n                });\n            });\n\n            \/\/ Parallaxe l\u00e9g\u00e8re pour le hero\n            window.addEventListener('scroll', () => {\n                const scrolled = window.pageYOffset;\n                const hero = document.querySelector('.hero-section');\n                if (hero) {\n                    hero.style.transform = `translateY(${scrolled * 0.5}px)`;\n                }\n            });\n        });\n    <\/script>\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>Synopsis Trahison &#8211; Combat &#8211; Paix Beethoven Wars Sur une plan\u00e8te \u00e9loign\u00e9e, Stephan &#8211; alias Le Roi Stephan &#8211; et ses amis font face \u00e0 la fin d&rsquo;un monde d\u00e9vast\u00e9 [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"footnotes":""},"class_list":["post-23","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/beethovenwars.com\/en\/wp-json\/wp\/v2\/pages\/23","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/beethovenwars.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/beethovenwars.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/beethovenwars.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/beethovenwars.com\/en\/wp-json\/wp\/v2\/comments?post=23"}],"version-history":[{"count":68,"href":"https:\/\/beethovenwars.com\/en\/wp-json\/wp\/v2\/pages\/23\/revisions"}],"predecessor-version":[{"id":588,"href":"https:\/\/beethovenwars.com\/en\/wp-json\/wp\/v2\/pages\/23\/revisions\/588"}],"wp:attachment":[{"href":"https:\/\/beethovenwars.com\/en\/wp-json\/wp\/v2\/media?parent=23"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}