{"id":386,"date":"2025-09-12T20:57:30","date_gmt":"2025-09-13T00:57:30","guid":{"rendered":"https:\/\/yorokobistars.com\/?page_id=386"},"modified":"2025-09-13T18:08:22","modified_gmt":"2025-09-13T22:08:22","slug":"chronologie","status":"publish","type":"page","link":"https:\/\/yorokobistars.com\/en\/wiki\/chronologie\/","title":{"rendered":"Timeline"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"386\" class=\"elementor elementor-386\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9c03894 e-flex e-con-boxed e-con e-parent\" data-id=\"9c03894\" 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-00e02b4 elementor-widget elementor-widget-html\" data-id=\"00e02b4\" 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:#222; --muted:#bdbdbd;\r\n}\r\n.timeline-wrap{max-width:1100px;margin:0 auto;padding:16px}\r\n.timeline-title{\r\n  font-family:'Anton',sans-serif; text-transform:uppercase; letter-spacing:.5px;\r\n  color:var(--yellow); text-align:center; margin:8px 0 26px;\r\n}\r\n\r\n\/* Ligne centrale d\u00e9corative *\/\r\n.timeline{\r\n  position:relative; display:flex; flex-direction:column; gap:40px;\r\n}\r\n.timeline::before{\r\n  content:\"\"; position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%);\r\n  background:linear-gradient(180deg,transparent, #333 15%, #333 85%, transparent);\r\n}\r\n\r\n\/* Carte d\u2019\u00e9v\u00e9nement *\/\r\n.event{\r\n  display:grid; grid-template-columns: 1fr 1fr; gap:24px; align-items:center;\r\n  position:relative;\r\n  opacity:.25; transition: opacity .35s ease;\r\n}\r\n.event.active{ opacity:1; }\r\n\r\n\/* Point sur la ligne *\/\r\n.event::before{\r\n  content:\"\"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);\r\n  width:12px; height:12px; border-radius:50%; background:var(--red); box-shadow:0 0 0 6px rgba(215,38,56,.15);\r\n}\r\n\r\n\/* Zones *\/\r\n.event .media, .event .content{\r\n  background:linear-gradient(180deg,#0f0f0f,#151515);\r\n  border:1px solid var(--line); border-radius:16px; padding:16px;\r\n  box-shadow:0 10px 28px rgba(0,0,0,.35);\r\n}\r\n\r\n\/* Image *\/\r\n.event .media{\r\n  display:flex; justify-content:center; align-items:center;\r\n}\r\n.event .media img{\r\n  width:100%; height:auto; border-radius:12px; display:block; background:#000;\r\n}\r\n\r\n\/* Contenu *\/\r\n.event .date{\r\n  color:var(--yellow); font-weight:700; margin-bottom:8px; letter-spacing:.3px;\r\n}\r\n.event h3{\r\n  color:#fff; margin:4px 0 10px; font-family:'Anton',sans-serif; letter-spacing:.4px;\r\n}\r\n.event p{ color:#ddd; line-height:1.7; margin:0 }\r\n\r\n\/* Alternance gauche\/droite *\/\r\n.event:nth-child(odd) .media{ grid-column:2; }\r\n.event:nth-child(odd) .content{ grid-column:1; text-align:left; }\r\n.event:nth-child(even) .media{ grid-column:1; }\r\n.event:nth-child(even) .content{ grid-column:2; text-align:left; }\r\n\r\n\/* Animations d\u2019entr\u00e9e (pr\u00eates, d\u00e9clench\u00e9es par .active) *\/\r\n.event .media, .event .content{\r\n  opacity:0; transform: translateX(0); transition: transform .6s ease, opacity .6s ease;\r\n  will-change: transform, opacity;\r\n}\r\n.event:nth-child(odd) .media{ transform: translateX(60px); }   \/* image \u00e0 droite => arrive de droite *\/\r\n.event:nth-child(odd) .content{ transform: translateX(-60px); } \/* texte \u00e0 gauche => arrive de gauche *\/\r\n.event:nth-child(even) .media{ transform: translateX(-60px); }  \/* image \u00e0 gauche => arrive de gauche *\/\r\n.event:nth-child(even) .content{ transform: translateX(60px); } \/* texte \u00e0 droite => arrive de droite *\/\r\n\r\n.event.active .media,\r\n.event.active .content{ opacity:1; transform: translateX(0); }\r\n\r\n\/* Mobile *\/\r\n@media (max-width: 900px){\r\n  .event{\r\n    grid-template-columns: 1fr; gap:14px;\r\n  }\r\n  .timeline::before{ left:16px; transform:none; }     \/* ligne sur le c\u00f4t\u00e9 pour mobile *\/\r\n  .event::before{ left:16px; transform:translate(-50%,-50%); }\r\n  .event .media, .event .content{ grid-column:auto; }\r\n}\r\n\r\n\/* Accessibilit\u00e9 \u2013 r\u00e9duire animations *\/\r\n@media (prefers-reduced-motion: reduce){\r\n  .event, .event .media, .event .content{\r\n    transition:none !important; transform:none !important; opacity:1 !important;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<div class=\"timeline-wrap\">\r\n  <h2 class=\"timeline-title\">Chronologie<\/h2>\r\n\r\n  <section class=\"timeline\" id=\"timeline\">\r\n\r\n    <!-- \u00c9v\u00e9nement 1 -->\r\n    <article class=\"event\">\r\n      <div class=\"content\">\r\n        <div class=\"date\">12 octobre 2011 \u2014 L\u2019Avalanche<\/div>\r\n        <h3>Le monde bascule<\/h3>\r\n        <p>Un cataclysme qui marquera le d\u00e9but d'un monde o\u00f9 les humains vivront dans la peur et la soumission des kimyohas.<\/p>\r\n      <\/div>\r\n      <div class=\"media\">\r\n        <img decoding=\"async\" src=\"https:\/\/yorokobistars.com\/wp-content\/uploads\/2025\/09\/chrono-avalanches.webp\" alt=\"L\u2019Avalanche de 2011\" loading=\"lazy\">\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- \u00c9v\u00e9nement 2 -->\r\n    <article class=\"event\">\r\n      <div class=\"media\">\r\n        <img decoding=\"async\" src=\"https:\/\/yorokobistars.com\/wp-content\/uploads\/2025\/09\/Ch01-cover.webp\" alt=\"Le commencement\" loading=\"lazy\">\r\n      <\/div>\r\n      <div class=\"content\">\r\n        <div class=\"date\">27 septembre 2018 \u2014 Le commencement<\/div>\r\n        <h3>Le d\u00e9but de notre histoire<\/h3>\r\n        <p>Le jour o\u00f9 on d\u00e9couvre Yorokobi et ses amis dans leur quotidien avant que le destin de notre h\u00e9ros ne change \u00e0 jamais.<\/p>\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- \u00c9v\u00e9nement 3 -->\r\n    <article class=\"event\">\r\n      <div class=\"content\">\r\n        <div class=\"date\">28 septembre 2018 \u2014 Premi\u00e8re \u00c9tincelle<\/div>\r\n        <h3>Yorokobi se r\u00e9veille<\/h3>\r\n        <p>Le pouvoir de Yorokobi se manifeste pour la premi\u00e8re fois. Une \u00e9toile s\u2019allume \u2014 et avec elle, un nouvel espoir.<\/p>\r\n      <\/div>\r\n      <div class=\"media\">\r\n        <img decoding=\"async\" src=\"https:\/\/yorokobistars.com\/wp-content\/uploads\/2025\/09\/Illustration_sans_titre-4-scaled.png\" alt=\"R\u00e9veil d\u2019Yorokobi\" loading=\"lazy\">\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- Duplique plus d\u2019\u00e9v\u00e9nements ici -->\r\n  <\/section>\r\n<\/div>\r\n\r\n<script>\r\n\/* Active l\u2019\u00e9v\u00e9nement le plus proche du centre de l\u2019\u00e9cran et d\u00e9sactive les autres *\/\r\n(function(){\r\n  const events = Array.from(document.querySelectorAll('#timeline .event'));\r\n  if(!events.length) return;\r\n\r\n  \/\/ Initialise : le premier actif par d\u00e9faut\r\n  let activeIndex = -1;\r\n\r\n  function setActiveClosest(){\r\n    const mid = window.innerHeight \/ 2;\r\n    let best = {idx:0, dist:Infinity};\r\n\r\n    events.forEach((ev, idx)=>{\r\n      const rect = ev.getBoundingClientRect();\r\n      const center = rect.top + rect.height\/2;\r\n      const dist = Math.abs(center - mid);\r\n      if(dist < best.dist){ best = {idx: idx, dist}; }\r\n    });\r\n\r\n    if(best.idx !== activeIndex){\r\n      events.forEach(e=>e.classList.remove('active'));\r\n      events[best.idx].classList.add('active');\r\n      activeIndex = best.idx;\r\n    }\r\n  }\r\n\r\n  \/\/ Au chargement + scroll + resize\r\n  window.addEventListener('load', setActiveClosest);\r\n  window.addEventListener('scroll', setActiveClosest, {passive:true});\r\n  window.addEventListener('resize', setActiveClosest);\r\n\r\n  \/\/ Bonus : d\u00e9clenche une premi\u00e8re fois apr\u00e8s petit d\u00e9lai (images lazy)\r\n  setTimeout(setActiveClosest, 150);\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>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Chronologie 12 octobre 2011 \u2014 L\u2019Avalanche Le monde bascule Un cataclysme qui marquera le d\u00e9but d&rsquo;un monde o\u00f9 les humains [&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":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","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":"disabled","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-386","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/yorokobistars.com\/en\/wp-json\/wp\/v2\/pages\/386","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=386"}],"version-history":[{"count":16,"href":"https:\/\/yorokobistars.com\/en\/wp-json\/wp\/v2\/pages\/386\/revisions"}],"predecessor-version":[{"id":476,"href":"https:\/\/yorokobistars.com\/en\/wp-json\/wp\/v2\/pages\/386\/revisions\/476"}],"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=386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}