{"id":69,"date":"2025-06-17T09:39:25","date_gmt":"2025-06-17T09:39:25","guid":{"rendered":"https:\/\/beethovenwars.com\/?page_id=69"},"modified":"2025-07-21T12:34:23","modified_gmt":"2025-07-21T10:34:23","slug":"69-2","status":"publish","type":"page","link":"https:\/\/beethovenwars.com\/en\/69-2\/","title":{"rendered":"The characters"},"content":{"rendered":"<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-18e21cb4 wp-block-group-is-layout-flex\" style=\"border-style:none;border-width:0px;border-radius:0px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n<\/div>\n\n\n\n<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    \n    <style>\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        body {\n            font-family: 'Arial', sans-serif;\n            \n            min-height: 100vh;\n            padding: 20px;\n        }\n\n        .container {\n            max-width: 1200px;\n            margin: 0 auto;\n        }\n\n        h1 {\n            text-align: center;\n            color: white;\n            font-size: 2.5rem;\n            margin-bottom: 50px;\n            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);\n        }\n\n        .characters-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n            gap: 30px;\n            margin-bottom: 40px;\n        }\n\n        .character-card {\n            border-radius: 25px;\n            padding: 40px 30px;\n            text-align: center;\n            color: white;\n            position: relative;\n            overflow: hidden;\n            cursor: pointer;\n            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n            box-shadow: 0 10px 30px rgba(0,0,0,0.3);\n            min-height: 250px;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            background-size: cover;\n            background-position: center;\n            background-repeat: no-repeat;\n        }\n\n        .character-card::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background: rgba(0,0,0,0.4);\n            transition: all 0.3s ease;\n            z-index: 1;\n        }\n\n        .character-card:hover::before {\n            background: rgba(0,0,0,0.2);\n        }\n\n        .character-card:hover {\n            transform: translateY(-15px) scale(1.05);\n            box-shadow: 0 20px 50px rgba(0,0,0,0.4);\n        }\n\n        .character-name {\n            font-size: 1.8rem;\n            font-weight: bold;\n            margin-bottom: 10px;\n            text-shadow: 2px 2px 4px rgba(0,0,0,0.8);\n            transition: all 0.3s ease;\n            position: relative;\n            z-index: 2;\n        }\n\n        .character-title {\n            font-size: 1.1rem;\n            opacity: 0.9;\n            font-weight: 300;\n            margin-bottom: 20px;\n            text-shadow: 1px 1px 3px rgba(0,0,0,0.8);\n            position: relative;\n            z-index: 2;\n        }\n\n        .character-card:hover .character-name {\n            transform: scale(1.1);\n        }\n\n        \/* Images de fond pour chaque personnage *\/\n        .character-card:nth-child(1) {\n            background-image: url('https:\/\/beethovenwars.com\/wp-content\/uploads\/2025\/06\/stephan_roi_v2.png');\n        }\n\n        .character-card:nth-child(2) {\n            background-image: url('https:\/\/beethovenwars.com\/wp-content\/uploads\/2025\/06\/athena_v1.png');\n        }\n\n        .character-card:nth-child(3) {\n            background-image: url('https:\/\/beethovenwars.com\/wp-content\/uploads\/2025\/06\/Gyula_v1.png');\n        }\n\n        .character-card:nth-child(4) {\n            background-image: url('https:\/\/beethovenwars.com\/wp-content\/uploads\/2025\/06\/Le_sage_v1.png');\n        }\n\n        .character-card:nth-child(5) {\n            background-image: url('https:\/\/beethovenwars.com\/wp-content\/uploads\/2025\/06\/stephan_roi_age_v1.png');\n        }\n\n        \/* Animation d'apparition *\/\n        .character-card {\n            opacity: 0;\n            animation: fadeInUp 0.8s ease forwards;\n        }\n\n        .character-card:nth-child(1) { animation-delay: 0.1s; }\n        .character-card:nth-child(2) { animation-delay: 0.2s; }\n        .character-card:nth-child(3) { animation-delay: 0.3s; }\n        .character-card:nth-child(4) { animation-delay: 0.4s; }\n        .character-card:nth-child(5) { animation-delay: 0.5s; }\n\n        @keyframes fadeInUp {\n            from {\n                opacity: 0;\n                transform: translateY(50px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        \/* Effet de pulsation sur hover *\/\n        .character-card::after {\n            content: '';\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            width: 0;\n            height: 0;\n            background: rgba(255,255,255,0.2);\n            border-radius: 50%;\n            transform: translate(-50%, -50%);\n            transition: all 0.6s ease;\n        }\n\n        .character-card:hover::after {\n            width: 300px;\n            height: 300px;\n        }\n\n        \/* Indicateur de navigation *\/\n        .nav-dots {\n            display: flex;\n            justify-content: center;\n            gap: 10px;\n            margin-top: 30px;\n        }\n\n        .dot {\n            width: 12px;\n            height: 12px;\n            border-radius: 50%;\n            background: rgba(255,255,255,0.5);\n            cursor: pointer;\n            transition: all 0.3s ease;\n        }\n\n        .dot.active {\n            background: white;\n            transform: scale(1.2);\n        }\n\n        \/* Responsive *\/\n        @media (max-width: 768px) {\n            .characters-grid {\n                grid-template-columns: 1fr;\n                gap: 20px;\n            }\n            \n            h1 {\n                font-size: 2rem;\n                margin-bottom: 30px;\n            }\n            \n            .character-card {\n                min-height: 200px;\n                padding: 30px 20px;\n            }\n        }\n\n        \/* Effet de brillance sur hover *\/\n        .shine {\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.4), transparent);\n            transition: left 0.5s ease;\n            z-index: 3;\n        }\n\n        .character-card:hover .shine {\n            left: 100%;\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"container\">\n        \n        <div class=\"characters-grid\">\n            <div onclick=\"select_ws('Gisele')\" class=\"character-card\" >\n                <div class=\"shine\"><\/div>\n                <div class=\"character-name\">Stephan<\/div>\n                <div class=\"character-title\">King Stephan (Young)<\/div>\n            <\/div>\n            \n            <div onclick=\"select_ws('Stephan_J')\" class=\"character-card\">\n                <div class=\"shine\"><\/div>\n                <div class=\"character-name\">Gis\u00e8le<\/div>\n                <div class=\"character-title\">Ath\u00e9na<\/div>\n            <\/div>\n            \n            <div onclick=\"select_ws('Guyla')\" class=\"character-card\">\n                <div class=\"shine\"><\/div>\n                <div class=\"character-name\">Guyla<\/div>\n                <div class=\"character-title\">Brother of Athena<\/div>\n            <\/div>\n            \n            <div onclick=\"select_ws('Le_Sage')\" class=\"character-card\">\n                <div class=\"shine\"><\/div>\n                <div class=\"character-name\">Thot<\/div>\n                <div class=\"character-title\">The wise<\/div>\n            <\/div>\n            \n            <div onclick=\"select_ws('Stephan_A')\" class=\"character-card\">\n                <div class=\"shine\"><\/div>\n                <div class=\"character-name\">Stephan<\/div>\n                <div class=\"character-title\">(aged)<\/div>\n            <\/div>\n        <\/div>\n  \n    <\/div>\n\n    <script>\n        \/\/ Animation des points de navigation (optionnel)\n     \n\n        \/\/ Animation au scroll (optionnel)\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.style.animationPlayState = 'running';\n                }\n            });\n        }, observerOptions);\n\n        document.querySelectorAll('.character-card').forEach(card => {\n            observer.observe(card);\n        });\n        \n        const links = {\n            'Stephan_J': 'https:\/\/beethovenwars.com\/stephan-jeune\/',\n            'Le_Sage': 'https:\/\/beethovenwars.com\/thot\/',\n            'Gisele': 'https:\/\/beethovenwars.com\/gisele\/',\n            'Guyla' : 'https:\/\/beethovenwars.com\/guyla\/',\n            'Stephan_A' : 'https:\/\/beethovenwars.com\/stephan_agee\/'\n        };\n\n        function select_ws(key) {\n            if (links[key]) {\n                window.location.href = links[key];\n            } else {\n                console.error('Lien non trouv\u00e9 pour:', key);\n            }\n        }\n    <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Stephan Roi Stephan (Jeune) Gis\u00e8le Ath\u00e9na Guyla Fr\u00e8re d&rsquo;Ath\u00e9na Thot Le sage Stephan (ag\u00e9e)<\/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-69","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/beethovenwars.com\/en\/wp-json\/wp\/v2\/pages\/69","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=69"}],"version-history":[{"count":28,"href":"https:\/\/beethovenwars.com\/en\/wp-json\/wp\/v2\/pages\/69\/revisions"}],"predecessor-version":[{"id":519,"href":"https:\/\/beethovenwars.com\/en\/wp-json\/wp\/v2\/pages\/69\/revisions\/519"}],"wp:attachment":[{"href":"https:\/\/beethovenwars.com\/en\/wp-json\/wp\/v2\/media?parent=69"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}