{"id":172,"date":"2025-09-11T12:35:15","date_gmt":"2025-09-11T16:35:15","guid":{"rendered":"https:\/\/yorokobistars.com\/?page_id=172"},"modified":"2025-09-14T22:02:28","modified_gmt":"2025-09-15T02:02:28","slug":"concepts","status":"publish","type":"page","link":"https:\/\/yorokobistars.com\/en\/wiki\/concepts\/","title":{"rendered":"Concepts"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"172\" class=\"elementor elementor-172\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1ebae0cc e-flex e-con-boxed e-con e-parent\" data-id=\"1ebae0cc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-507efc2e elementor-widget elementor-widget-text-editor\" data-id=\"507efc2e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-70294e8 e-flex e-con-boxed e-con e-parent\" data-id=\"70294e8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5c1324f elementor-widget elementor-widget-html\" data-id=\"5c1324f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Anton&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n:root{\r\n  --red:#D72638; --yellow:#FFD23F; --bg:#0F0F0F; --panel:#111; --line:#232323; --txt:#EDEDED;\r\n}\r\n\r\n.concepts-wrap{max-width:1100px;margin:0 auto;padding:20px}\r\n.concepts-title{\r\n  font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.5px;\r\n  color:var(--yellow);text-align:center;margin:6px 0 20px;\r\n}\r\n\r\n.concepts-list{display:flex;flex-direction:column;gap:14px}\r\n\r\n\/* ITEM *\/\r\n.concept{\r\n  background:linear-gradient(180deg,#0f0f0f,#151515);\r\n  border:1px solid var(--line); border-radius:14px; overflow:hidden;\r\n  box-shadow:0 10px 26px rgba(0,0,0,.35);\r\n  transform:translateX(50px); opacity:0; \/* \u00e9tat avant entr\u00e9e *\/\r\n  transition:transform .6s ease, opacity .6s ease, box-shadow .25s ease, border-color .25s ease;\r\n}\r\n.concept.in{ transform:translateX(0); opacity:1; }\r\n.concept:hover{ box-shadow:0 14px 34px rgba(0,0,0,.5); border-color:#2a2a2a }\r\n\r\n\/* HEADER (clic) *\/\r\n.concept-header{\r\n  display:flex;align-items:center;gap:12px;cursor:pointer;\r\n  padding:16px 18px; position:relative; color:var(--txt);\r\n}\r\n.concept-header:focus{ outline:2px solid var(--yellow); outline-offset:4px; border-radius:10px }\r\n.concept-name{\r\n  font-family:'Anton',sans-serif; letter-spacing:.4px; color:#fff; font-size:1.2rem;\r\n  transition:transform .25s ease, text-shadow .25s ease;\r\n}\r\n.concept:hover .concept-name{ transform:translateX(4px); text-shadow:0 0 10px rgba(255,210,63,.25) }\r\n\r\n\/* chevron *\/\r\n.chev{\r\n  margin-left:auto; width:10px;height:10px; border-right:3px solid var(--yellow); border-bottom:3px solid var(--yellow);\r\n  transform:rotate(0deg); transition:transform .3s ease;\r\n}\r\n.concept.open .chev{ transform:rotate(45deg) }\r\n\r\n\/* BODY (d\u00e9ploiement) *\/\r\n.concept-body{\r\n  max-height:0; overflow:hidden; transition:max-height .5s ease, padding-top .5s ease, padding-bottom .5s ease;\r\n  padding:0 18px;\r\n}\r\n.concept.open .concept-body{ max-height:900px; padding:10px 18px 16px } \/* ajuste si tr\u00e8s long *\/\r\n\r\n\/* contenu interne : fade + slide up *\/\r\n.concept-inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:16px; align-items:stretch }\r\n.concept-text, .concept-media{ \r\n  opacity:0; transform:translateY(-6px); transition:opacity .4s ease, transform .4s ease;\r\n}\r\n.concept.open .concept-text, .concept.open .concept-media{ opacity:1; transform:translateY(0) }\r\n\r\n.concept-text{ color:#dcdcdc; line-height:1.75 }\r\n.concept-text p{ margin:0 0 10px }\r\n.concept-text .accent{\r\n  width:68px;height:6px;border-radius:999px;margin:6px 0 12px;\r\n  background:linear-gradient(90deg,var(--yellow),#ffb300 60%,#ffd95e)\r\n}\r\n.concept-media{\r\n  background:#0b0b0b; border:1px solid #1f1f1f; border-radius:12px; padding:10px;\r\n  box-shadow: inset 0 0 0 1px #1a1a1a;\r\n}\r\n.concept-media img{ width:100%; height:auto; display:block; border-radius:8px }\r\n\r\n\/* \u201cliser\u00e9\u201d \u00e0 gauche quand ouvert *\/\r\n.concept.open{ box-shadow:0 16px 36px rgba(0,0,0,.55) }\r\n.concept.open .concept-header::before{\r\n  content:\"\"; position:absolute; left:0; top:0; bottom:0; width:6px; \r\n  background:linear-gradient(180deg,var(--yellow),#ffb300);\r\n}\r\n\r\n\/* responsive *\/\r\n@media (max-width:900px){\r\n  .concept-inner{ grid-template-columns:1fr; }\r\n}\r\n\r\n\/* reduce motion *\/\r\n@media (prefers-reduced-motion:reduce){\r\n  .concept, .concept-text, .concept-media{ transition:none !important; transform:none !important; opacity:1 !important }\r\n  .concept-body{ max-height:none !important; padding:10px 18px 16px }\r\n}\r\n<\/style>\r\n\r\n<div class=\"concepts-wrap\">\r\n  <h2 class=\"concepts-title\">Concepts<\/h2>\r\n\r\n  <section class=\"concepts-list\" id=\"concepts\">\r\n\r\n    <!-- Infinity Star -->\r\n    <article class=\"concept\" data-delay=\"0\">\r\n      <div class=\"concept-header\" tabindex=\"0\" role=\"button\" aria-expanded=\"false\">\r\n        <span class=\"concept-name\">Infinity Star<\/span>\r\n        <i class=\"chev\" aria-hidden=\"true\"><\/i>\r\n      <\/div>\r\n      <div class=\"concept-body\" aria-hidden=\"true\">\r\n        <div class=\"concept-inner\">\r\n          <div class=\"concept-text\">\r\n            <div class=\"accent\"><\/div>\r\n            <p><strong>Infinity Stars<\/strong> are individuals who can channel a rare energy linked to Infinity. Their awakening changes the course of conflicts and history.<\/p>\r\n            <p>Each Infinity Star has a unique signature and limits\u2026 until their next awakening.<\/p>\r\n          <\/div>\r\n          <div class=\"concept-media\">\r\n            <img decoding=\"async\" src=\"REPLACE_URL_IMAGE_INFINITY_STAR\" alt=\"Illustration Infinity Star\" loading=\"lazy\">\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- Kimyohas -->\r\n    <article class=\"concept\" data-delay=\"100\">\r\n      <div class=\"concept-header\" tabindex=\"0\" role=\"button\" aria-expanded=\"false\">\r\n        <span class=\"concept-name\">Kimyohas<\/span>\r\n        <i class=\"chev\" aria-hidden=\"true\"><\/i>\r\n      <\/div>\r\n      <div class=\"concept-body\" aria-hidden=\"true\">\r\n        <div class=\"concept-inner\">\r\n          <div class=\"concept-text\">\r\n            <div class=\"accent\"><\/div>\r\n            <p>The <strong>Kimyohas<\/strong> are genetically modified, purple-skinned beings whose strength, speed, agility and endurance far exceed those of humans. Their bodies regenerate rapidly, allowing them to heal almost any injury. <p>They harbor a deep hatred of humans, making them a constant threat.<\/p>\r\n\r\n\r\n<p>Known weaknesses:\r\n\r\n<p>The heart: <\/p>the only organ that cannot regenerate. Striking it causes instant death.\r\n\r\n<p>Exhaustion:<\/p> a Kimyoha drained of energy can no longer regenerate and becomes vulnerable.\r\n\r\n           \r\n          <\/div>\r\n          <div class=\"concept-media\">\r\n            <img decoding=\"async\" src=\"REPLACE_URL_IMAGE_KIMYOHAS\" alt=\"Illustration Kimyohas\" loading=\"lazy\">\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- Les arcanes -->\r\n    <article class=\"concept\" data-delay=\"200\">\r\n      <div class=\"concept-header\" tabindex=\"0\" role=\"button\" aria-expanded=\"false\">\r\n        <span class=\"concept-name\">Arcanes<\/span>\r\n        <i class=\"chev\" aria-hidden=\"true\"><\/i>\r\n      <\/div>\r\n      <div class=\"concept-body\" aria-hidden=\"true\">\r\n        <div class=\"concept-inner\">\r\n          <div class=\"concept-text\">\r\n            <div class=\"accent\"><\/div>\r\n            <p>The <strong>arcanes<\/strong> sont des techniques sp\u00e9ciales qui sont utilis\u00e9s par tous les combattants du manga. Il y a les <strong>basic arcanes<\/strong> (the most elementary), <strong>advanced arcanes<\/strong> (plus difficile \u00e0 ex\u00e9cuter) et les <strong>mastered arcanes<\/strong> (the most powerful). Other specialized types of arcanes also exist\u2026<\/p>\r\n          <\/div>\r\n          <div class=\"concept-media\">\r\n            <img decoding=\"async\" src=\"REPLACE_URL_IMAGE_ARCANES\" alt=\"Illustration arcanes\" loading=\"lazy\">\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- FKA -->\r\n    <article class=\"concept\" data-delay=\"300\">\r\n      <div class=\"concept-header\" tabindex=\"0\" role=\"button\" aria-expanded=\"false\">\r\n        <span class=\"concept-name\">The FKA<\/span>\r\n        <i class=\"chev\" aria-hidden=\"true\"><\/i>\r\n      <\/div>\r\n      <div class=\"concept-body\" aria-hidden=\"true\">\r\n        <div class=\"concept-inner\">\r\n          <div class=\"concept-text\">\r\n            <div class=\"accent\"><\/div>\r\n            <p>The <strong>FKA<\/strong> is a strategic organization involved in managing, studying and exploiting the Kimyohas. Ally or enemy? It depends on your perspective.<\/p>\r\n          <\/div>\r\n          <div class=\"concept-media\">\r\n            <img decoding=\"async\" src=\"REPLACE_URL_IMAGE_FKA\" alt=\"Illustration FKA\" loading=\"lazy\">\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- Syst\u00e8me gouvernemental -->\r\n    <article class=\"concept\" data-delay=\"400\">\r\n      <div class=\"concept-header\" tabindex=\"0\" role=\"button\" aria-expanded=\"false\">\r\n        <span class=\"concept-name\">The system of government<\/span>\r\n        <i class=\"chev\" aria-hidden=\"true\"><\/i>\r\n      <\/div>\r\n      <div class=\"concept-body\" aria-hidden=\"true\">\r\n        <div class=\"concept-inner\">\r\n          <div class=\"concept-text\">\r\n            <div class=\"accent\"><\/div>\r\n            <p>The <strong>system of government<\/strong> in Yorokobi Stars works as follows: each country conquered by the Kimyohas is ruled by a Lord appointed by the Gods of Olympus. Each Lord commands several captains, who oversee operations to maintain order in the country.<\/p>\r\n          <\/div>\r\n          <div class=\"concept-media\">\r\n            <img decoding=\"async\" src=\"REPLACE_URL_IMAGE_GOUV\" alt=\"Illustration syst\u00e8me gouvernemental\" loading=\"lazy\">\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/article>\r\n\r\n  <\/section>\r\n<\/div>\r\n\r\n<script>\r\n\/* Entr\u00e9e progressive (fade-in right) + Toggle au clic\/clavier + un seul ouvert \u00e0 la fois *\/\r\n(function(){\r\n  const items = Array.from(document.querySelectorAll('.concept'));\r\n  if(!items.length) return;\r\n\r\n  \/\/ Fade-in right via IntersectionObserver\r\n  const io = 'IntersectionObserver' in window ? new IntersectionObserver((entries)=>{\r\n    entries.forEach(entry=>{\r\n      if(entry.isIntersecting){\r\n        \/\/ petit d\u00e9lai optionnel par data-delay\r\n        const delay = parseInt(entry.target.getAttribute('data-delay')||'0',10);\r\n        setTimeout(()=> entry.target.classList.add('in'), delay);\r\n        io.unobserve(entry.target);\r\n      }\r\n    });\r\n  }, {threshold:0.2}) : null;\r\n\r\n  items.forEach(el=> io && io.observe(el));\r\n\r\n  \/\/ Toggle open\/close\r\n  const headers = document.querySelectorAll('.concept-header');\r\n  function closeAll(except){\r\n    items.forEach(i=>{\r\n      if(i!==except){ \r\n        i.classList.remove('open');\r\n        const h = i.querySelector('.concept-header');\r\n        const b = i.querySelector('.concept-body');\r\n        if(h) h.setAttribute('aria-expanded','false');\r\n        if(b) b.setAttribute('aria-hidden','true');\r\n      }\r\n    });\r\n  }\r\n  headers.forEach(h=>{\r\n    h.addEventListener('click', ()=>{\r\n      const parent = h.closest('.concept');\r\n      const opened = parent.classList.contains('open');\r\n      closeAll(opened ? null : parent);\r\n      parent.classList.toggle('open', !opened);\r\n      h.setAttribute('aria-expanded', String(!opened));\r\n      const body = parent.querySelector('.concept-body');\r\n      if(body) body.setAttribute('aria-hidden', String(opened));\r\n    });\r\n    \/\/ accessibilit\u00e9 clavier (Entr\u00e9e\/Espace)\r\n    h.addEventListener('keydown', (e)=>{\r\n      if(e.key==='Enter' || e.key===' '){\r\n        e.preventDefault();\r\n        h.click();\r\n      }\r\n    });\r\n  });\r\n})();\r\n<\/script>\r\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>","protected":false},"excerpt":{"rendered":"<p>Concepts Infinity Star Les Infinity Stars sont des individus capables de canaliser une \u00e9nergie rare, li\u00e9e \u00e0 l\u2019\u201cInfini\u201d. Leur \u00e9veil [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":166,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_eb_attr":"","_templately_pack_id":"","_templately_imported_at":"","_templately_source":"","_templately_import_session_id":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-172","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/yorokobistars.com\/en\/wp-json\/wp\/v2\/pages\/172","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yorokobistars.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yorokobistars.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yorokobistars.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yorokobistars.com\/en\/wp-json\/wp\/v2\/comments?post=172"}],"version-history":[{"count":10,"href":"https:\/\/yorokobistars.com\/en\/wp-json\/wp\/v2\/pages\/172\/revisions"}],"predecessor-version":[{"id":600,"href":"https:\/\/yorokobistars.com\/en\/wp-json\/wp\/v2\/pages\/172\/revisions\/600"}],"up":[{"embeddable":true,"href":"https:\/\/yorokobistars.com\/en\/wp-json\/wp\/v2\/pages\/166"}],"wp:attachment":[{"href":"https:\/\/yorokobistars.com\/en\/wp-json\/wp\/v2\/media?parent=172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}