{"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":"\n\n<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\">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 par les guerres. Ils sont victorieux, mais les flammes ont eu raison de la plan\u00e8te sur laquelle ils vivaient. Ils s&rsquo;enfuient sur un vaisseau emmenant avec eux quelques prisonniers.<BR>\n<BR>\nLa rencontre au c\u0153ur de l&rsquo;espace avec l&rsquo;arm\u00e9e de Gisele &#8211; alias Athena aurait pu \u00eatre l&rsquo;occasion d&rsquo;an\u00e9antir d\u00e9finitivement toute civilisation, mais la douleur de la guerre et les blessures inflig\u00e9es, les errances dans l&rsquo;espace et la qu\u00eate d\u00e9sesp\u00e9r\u00e9e d&rsquo;un nouveau lieu de vie donnent au Roi Stephan un nouveau regard sur les restes d&rsquo;humanit\u00e9 dont il est \u00e0 pr\u00e9sent en charge. Il est donc d\u00e9cide que seuls Athena et le Roi Stephan se battront, \u00e9pargnant leurs arm\u00e9es. Un combat acharn\u00e9 d\u00e9marre.<BR>\n<BR>\nMais L&rsquo;immensit\u00e9 et la beaut\u00e9 du cosmos bousculeront les esprits des deux leaders, faisant apparaitre la vacuit\u00e9 de leur combat alors que de si grands d\u00e9fis sont encore \u00e0 venir.<BR>\n<BR>\nLes armes se baissent. Le respect et l&rsquo;\u00e9coute naissent entre Athena et le Roi Stephan. Ils redeviennent humains, ils redeviennent Gisele et Stephan, ces enfants qui jouaient, simplement, avant que leur monde ne se d\u00e9sagr\u00e8ge.<BR>\n<BR>\nLa paix, sa charte sont enfin sign\u00e9es, les vaisseaux ne sont qu&rsquo;une et m\u00eame flotte \u00e0 la recherche d&rsquo;un nouveau monde, meilleur. Leur qu\u00eate les m\u00e8ne pr\u00e8s de la Terre, qui fut le berceau des sciences et des 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\">Guid\u00e9e par Thot, le sage, Gisele part en \u00e9claireuse \u00e0 bord de son vaisseau. La Terre semble tr\u00e8s diff\u00e9rente des contes et des souvenirs, la vie existe \u00e0 l&rsquo;\u00e9tat v\u00e9g\u00e9tal, mais aucune forme de vie animale n&rsquo;a surv\u00e9cu en surface.<BR>\n<BR>\nLors d&rsquo;une plong\u00e9e dans les abysses, Gisele retrouve enfin la vie animale sous la forme de poissons et de crustac\u00e9s. Elle poursuit son exploration sur la terre ferme, dans Ath\u00e8nes enneig\u00e9e. L&rsquo;air de la terre est vici\u00e9 et lui donne des hallucinations dans lesquelles les souvenirs des guerres se m\u00ealent.<BR>\n<BR>\nRevenue \u00e0 elle, Gisele se trouve face \u00e0 une arm\u00e9e de robots qui d\u00e9truisent tout sur leur passage, temples et statues sont an\u00e9antis sous ses yeux. La toxicit\u00e9 de l&rsquo;air l&#8217;empoisonne.<BR>\n<BR>\nElle s&rsquo;\u00e9vanouit, recouverte du manteau glac\u00e9. Stephan tente de la retrouver sur terre, mais il sombre lui aussi rapidement sous les effets nocifs de l&rsquo;air. Gyula, le fr\u00e8re de Gisele, part \u00e0 leur recherche. Il retrouve les deux corps inertes et les ram\u00e8ne \u00e0 l&rsquo;abri, en s\u00e9curit\u00e9, dans la station spatiale m\u00e8re.\nStephan se r\u00e9veille rapidement mais Gisele, soumise plus longtemps aux affres du poison, reste dans le coma. Le temps passe, Gisele finit par se r\u00e9veiller.<BR>\n<BR>\nUne surprise l&rsquo;attend : en son absence, un nouveau lieu de vie a \u00e9t\u00e9 cr\u00e9\u00e9, un th\u00e9\u00e2tre o\u00f9 l&rsquo;on ne parle plus de guerre, de souffrance et de pleurs, mais d&rsquo;art, de beaut\u00e9, de musique, de sciences. Un royaume en orbite autour de la Terre, un royaume o\u00f9 Gisele est reine, avec l&rsquo;univers comme t\u00e9moin.<\/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>\n","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}]}}