{"id":235,"date":"2025-09-12T12:02:33","date_gmt":"2025-09-12T16:02:33","guid":{"rendered":"https:\/\/yorokobistars.com\/?page_id=235"},"modified":"2026-10-09T21:17:18","modified_gmt":"2026-10-10T01:17:18","slug":"chapitre-001","status":"publish","type":"page","link":"https:\/\/yorokobistars.com\/en\/manga\/chapitre-001\/","title":{"rendered":"Chapitre 1 &#8211; Yorokobi Stars"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"235\" class=\"elementor elementor-235\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4e7c828 e-flex e-con-boxed e-con e-parent\" data-id=\"4e7c828\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-266d8e2 elementor-widget elementor-widget-html\" data-id=\"266d8e2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Switch lecture -->\r\n\r\n<div class=\"mode-switch\">\r\n\r\n  <button class=\"mode-btn active\" data-target=\"#mode-webtoon\">Lecture verticale<\/button>\r\n\r\n  <button class=\"mode-btn\" data-target=\"#mode-manga\">Page par page<\/button>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<!-- MODE WEBTOON -->\r\n\r\n<div id=\"mode-webtoon\" class=\"reading-mode show\">\r\n\r\n  <!-- Les images sont inject\u00e9es automatiquement depuis la liste `pages` -->\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<!-- MODE MANGA -->\r\n\r\n<div id=\"mode-manga\" class=\"reading-mode\">\r\n\r\n\r\n\r\n  <!-- Options du lecteur -->\r\n\r\n  <div class=\"reader-bar\">\r\n\r\n    <button id=\"resumeBtn\" class=\"rbtn\" style=\"display:none;\">Reprendre<\/button>\r\n\r\n\r\n\r\n    <div class=\"toggle\">\r\n\r\n      <button id=\"onePageBtn\" class=\"tbtn active\" type=\"button\">1 page<\/button>\r\n\r\n      <button id=\"twoPageBtn\" class=\"tbtn\" type=\"button\">2 pages<\/button>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n\r\n\r\n  <!-- Viewer 1 page -->\r\n\r\n  <div class=\"page-viewer single\" id=\"singleViewer\">\r\n\r\n    <img id=\"singlePage\" alt=\"Page\" loading=\"lazy\">\r\n\r\n  <\/div>\r\n\r\n\r\n\r\n  <!-- Viewer 2 pages (manga : premi\u00e8re page \u00e0 DROITE) -->\r\n\r\n  <div class=\"page-viewer spread\" id=\"spreadViewer\" style=\"display:none;\">\r\n\r\n    <img id=\"page-right\" alt=\"Page droite\" loading=\"lazy\">\r\n\r\n    <img id=\"page-left\"  alt=\"Page gauche\" loading=\"lazy\">\r\n\r\n  <\/div>\r\n\r\n\r\n\r\n  <div class=\"pager\">\r\n\r\n    <button id=\"prevPage\" aria-label=\"Page pr\u00e9c\u00e9dente\">\u25c0<\/button>\r\n\r\n    <span id=\"pageInfo\">1 \/ ?<\/span>\r\n\r\n    <button id=\"nextPage\" aria-label=\"Page suivante\">\u25b6<\/button>\r\n\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n <!-- Nav chapitres -->\r\n\r\n  <nav class=\"chap-nav\">\r\n\r\n    <a class=\"cbtn\" href=\"https:\/\/yorokobistars.com\/manga\/\">\u2190 Tous les chapitres<\/a>\r\n\r\n    <a class=\"cbtn primary\" href=\"https:\/\/yorokobistars.com\/manga\/chapitre-002\/\">Chapitre suivant \u2192<\/a>\r\n\r\n  <\/nav>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n<style>\r\n\r\n\/* Switch modes *\/\r\n\r\n.mode-switch{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}\r\n\r\n.mode-btn{padding:10px 16px;border-radius:999px;border:1px solid #D72638;background:#111;color:#FFD23F;cursor:pointer}\r\n\r\n.mode-btn.active{background:#D72638;color:#111;border-color:#D72638}\r\n\r\n.reading-mode{display:none}\r\n\r\n.reading-mode.show{display:block}\r\n\r\n#mode-webtoon img{width:100%;height:auto;display:block;margin:0 auto}\r\n\r\n\r\n\r\n\/* Reader bar *\/\r\n\r\n.reader-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:10px 0 12px;flex-wrap:wrap}\r\n\r\n.rbtn{\r\n\r\n  padding:10px 12px;border-radius:10px;border:1px solid #333;background:#111;color:#FFD23F;\r\n\r\n  cursor:pointer;font-weight:800\r\n\r\n}\r\n\r\n.rbtn:hover{background:#1b1b1b}\r\n\r\n.toggle{display:flex;gap:8px}\r\n\r\n.tbtn{\r\n\r\n  padding:10px 12px;border-radius:999px;border:1px solid #333;background:#111;color:#fff;cursor:pointer;font-weight:800\r\n\r\n}\r\n\r\n.tbtn.active{background:#FFD23F;color:#111;border-color:#FFD23F}\r\n\r\n\r\n\r\n\/* Viewer *\/\r\n\r\n.page-viewer{display:flex;justify-content:center;align-items:flex-start;margin:10px 0}\r\n\r\n.page-viewer img{max-width:100%;height:auto;box-shadow:0 10px 30px rgba(0,0,0,.35);border-radius:8px}\r\n\r\n\r\n\r\n\/* 1 page : limiter la largeur sur grands \u00e9crans pour pas que ce soit \u00e9norme *\/\r\n\r\n.page-viewer.single img{max-width:700px;width:100%}\r\n\r\n\r\n\r\n\/* 2 pages : TOUJOURS c\u00f4te \u00e0 c\u00f4te + scroll horizontal si besoin\r\n\r\n   IMPORTANT : row-reverse pour que la 1\u00e8re page soit \u00e0 DROITE (sens manga) *\/\r\n\r\n.page-viewer.spread{\r\n\r\n  display:flex;\r\n\r\n  flex-direction:row !important;\r\n  direction:rtl;\r\n\r\n  flex-wrap:nowrap;\r\n\r\n  gap:10px;\r\n\r\n  justify-content:flex-start;\r\n  justify-content:safe center;\r\n\r\n  align-items:flex-start;\r\n\r\n  overflow-x:auto;\r\n\r\n  -webkit-overflow-scrolling: touch;\r\n\r\n  padding-bottom:6px;\r\n\r\n}\r\n\r\n.page-viewer.spread img{\r\n\r\n  flex:0 0 auto;\r\n\r\n  width:48%;\r\n\r\n  max-width:600px;\r\n\r\n  height:auto;\r\n\r\n}\r\n\r\n@media (max-width:520px){\r\n\r\n  .page-viewer.spread img{\r\n\r\n    width:80vw;\r\n\r\n    max-width:80vw;\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\r\n\/* Pager *\/\r\n\r\n.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin:8px 0}\r\n\r\n.pager button{padding:8px 12px;border-radius:8px;border:1px solid #333;background:#111;color:#fff;cursor:pointer}\r\n\r\n.pager button:hover{background:#222}\r\n\r\n#pageInfo{color:#ddd}\r\n\r\n\r\n\r\n\r\n\r\n\/* Nav chapitres *\/\r\n\r\n.chap-nav{display:flex;gap:10px;justify-content:center;margin:18px 0 6px;flex-wrap:wrap}\r\n\r\n.cbtn{\r\n\r\n  padding:10px 14px;border-radius:12px;border:1px solid #444;background:#111;color:#fff;text-decoration:none;\r\n\r\n  font-weight:900\r\n\r\n}\r\n\r\n.cbtn:hover{background:#1b1b1b}\r\n\r\n.cbtn.primary{background:#FFD23F;color:#111;border-color:#FFD23F}\r\n\r\n\/* Commandes utilisables au clavier et au toucher. *\/\r\n.mode-switch button,.reader-bar button,.pager button{min-height:44px;min-width:44px}\r\n.mode-switch button:focus-visible,.reader-bar button:focus-visible,.pager button:focus-visible,.chap-nav a:focus-visible{outline:3px solid #fff;outline-offset:3px}\r\n.pager button:disabled{opacity:.45;cursor:default}\r\n.page-viewer.spread img{direction:ltr}\r\n<\/style>\r\n\r\n\r\n\r\n<script>\r\n\r\n\/* ====== CONFIG ====== *\/\r\n\r\nconst CHAPTER_ID = \"chapitre-001\";\r\n\r\n\r\n\r\n\/* Liste des pages (ordre normal 001, 002, 003...) *\/\r\n\r\nconst pages = [\r\n\r\n  \"https:\/\/yorokobistars.com\/wp-content\/uploads\/2025\/09\/Page-001-scaled.webp\",\r\n\r\n  \"https:\/\/yorokobistars.com\/wp-content\/uploads\/2025\/09\/Page-002-scaled.webp\",\r\n\r\n  \"https:\/\/yorokobistars.com\/wp-content\/uploads\/2025\/09\/Page-003-scaled.webp\",\r\n\r\n  \"https:\/\/yorokobistars.com\/wp-content\/uploads\/2025\/09\/Page-004-scaled.webp\",\r\n\r\n  \"https:\/\/yorokobistars.com\/wp-content\/uploads\/2025\/09\/Page-005-scaled.webp\",\r\n\r\n  \"https:\/\/yorokobistars.com\/wp-content\/uploads\/2025\/09\/Page-006-scaled.webp\",\r\n\r\n  \"https:\/\/yorokobistars.com\/wp-content\/uploads\/2025\/09\/Page-007-scaled.webp\",\r\n\r\n  \"https:\/\/yorokobistars.com\/wp-content\/uploads\/2025\/09\/Page-008-scaled.webp\",\r\n\r\n  \"https:\/\/yorokobistars.com\/wp-content\/uploads\/2025\/09\/Page-009-scaled.webp\",\r\n\r\n  \"https:\/\/yorokobistars.com\/wp-content\/uploads\/2025\/09\/Page-010-scaled.webp\",\r\n\r\n  \"https:\/\/yorokobistars.com\/wp-content\/uploads\/2025\/09\/Page-011-scaled.webp\",\r\n\r\n  \"https:\/\/yorokobistars.com\/wp-content\/uploads\/2025\/09\/Page-012-scaled.webp\",\r\n\r\n  \"https:\/\/yorokobistars.com\/wp-content\/uploads\/2025\/09\/Page-013-scaled.webp\",\r\n\r\n  \"https:\/\/yorokobistars.com\/wp-content\/uploads\/2025\/09\/Page-014-scaled.webp\",\r\n\r\n  \"https:\/\/yorokobistars.com\/wp-content\/uploads\/2025\/09\/Page-015-scaled.webp\",\r\n\r\n  \"https:\/\/yorokobistars.com\/wp-content\/uploads\/2025\/09\/Page-016-scaled.webp\",\r\n\r\n  \"https:\/\/yorokobistars.com\/wp-content\/uploads\/2025\/09\/Page-017-scaled.webp\",\r\n\r\n  \"https:\/\/yorokobistars.com\/wp-content\/uploads\/2025\/09\/Page-018-scaled.webp\",\r\n\r\n  \"https:\/\/yorokobistars.com\/wp-content\/uploads\/2025\/09\/Page-019-scaled.webp\",\r\n\r\n  \"https:\/\/yorokobistars.com\/wp-content\/uploads\/2025\/09\/Page-020-scaled.webp\",\r\n\r\n  \"https:\/\/yorokobistars.com\/wp-content\/uploads\/2025\/09\/Page-021-scaled.webp\",\r\n\r\n  \"https:\/\/yorokobistars.com\/wp-content\/uploads\/2025\/09\/Page-022-scaled.webp\",\r\n\r\n  \"https:\/\/yorokobistars.com\/wp-content\/uploads\/2025\/09\/Page-023-scaled.webp\",\r\n\r\n  \"https:\/\/yorokobistars.com\/wp-content\/uploads\/2025\/09\/Page-024-scaled.webp\",\r\n\r\n  \"https:\/\/yorokobistars.com\/wp-content\/uploads\/2025\/09\/Page-025-scaled.webp\",\r\n\r\n  \"https:\/\/yorokobistars.com\/wp-content\/uploads\/2025\/09\/Page-026-scaled.webp\",\r\n\r\n  \"https:\/\/yorokobistars.com\/wp-content\/uploads\/2025\/09\/Page-027-scaled.webp\"\r\n\r\n];\r\n\r\n\r\n\r\nconst keyIndex   = `ys:${CHAPTER_ID}:index`;\r\n\r\nconst keyMode    = `ys:${CHAPTER_ID}:mangaMode`;     \/\/ \"1\" ou \"2\"\r\n\r\nconst keyReading = `ys:${CHAPTER_ID}:readingMode`;   \/\/ \"webtoon\" ou \"manga\"\r\n\r\n\r\n\r\n\/* ====== INJECTION DES PAGES EN MODE WEBTOON ====== *\/\r\n\r\n(function buildWebtoon(){\r\n\r\n  const container = document.getElementById('mode-webtoon');\r\n\r\n  pages.forEach((src, i)=>{\r\n\r\n    const img = document.createElement('img');\r\n\r\n    img.src = src;\r\n\r\n    img.loading = 'lazy';\r\n\r\n    img.alt = `Page ${i+1}`;\r\n\r\n    container.appendChild(img);\r\n\r\n  });\r\n\r\n})();\r\n\r\n\r\n\r\n\/* ====== MODE SWITCH (Webtoon\/Manga) ====== *\/\r\n\r\ndocument.querySelectorAll('.mode-btn').forEach(btn=>{\r\n\r\n  btn.addEventListener('click', ()=>{\r\n\r\n    document.querySelectorAll('.mode-btn').forEach(b=>b.classList.remove('active'));\r\n\r\n    btn.classList.add('active');\r\n\r\n    document.querySelectorAll('.reading-mode').forEach(m=>m.classList.remove('show'));\r\n\r\n    document.querySelector(btn.dataset.target).classList.add('show');\r\n\r\n    window.scrollTo({top: document.querySelector('.mode-switch').offsetTop - 10, behavior:'smooth'});\r\n\r\n\r\n\r\n    localStorage.setItem(keyReading, btn.dataset.target === \"#mode-webtoon\" ? \"webtoon\" : \"manga\");\r\n\r\n  });\r\n\r\n});\r\n\r\n\r\n\r\n\/* ====== ETAT LECTURE ====== *\/\r\n\r\nlet index = 0;        \/\/ page actuelle (0-based)\r\n\r\nlet mangaMode = 1;    \/\/ 1 ou 2 pages\r\n\r\n\r\n\r\nconst singleViewer = document.getElementById('singleViewer');\r\n\r\nconst spreadViewer = document.getElementById('spreadViewer');\r\n\r\nconst singlePage   = document.getElementById('singlePage');\r\n\r\nconst left         = document.getElementById('page-left');\r\n\r\nconst right        = document.getElementById('page-right');\r\n\r\nconst info         = document.getElementById('pageInfo');\r\n\r\n\r\n\r\nconst prevBtn = document.getElementById('prevPage');\r\n\r\nconst nextBtn = document.getElementById('nextPage');\r\n\r\n\r\n\r\nconst resumeBtn = document.getElementById('resumeBtn');\r\n\r\nconst oneBtn = document.getElementById('onePageBtn');\r\n\r\nconst twoBtn = document.getElementById('twoPageBtn');\r\n\r\n\r\n\r\n\/* ====== UTIL ====== *\/\r\n\r\nfunction saveProgress(){\r\n\r\n  localStorage.setItem(keyIndex, String(index));\r\n\r\n  localStorage.setItem(keyMode, String(mangaMode));\r\n\r\n}\r\n\r\nfunction clampIndex(){\r\n\r\n  if(index < 0) index = 0;\r\n\r\n  if(index > pages.length - 1) index = pages.length - 1;\r\n\r\n}\r\n\r\nfunction updateResumeVisibility(){\r\n\r\n  const saved = localStorage.getItem(keyIndex);\r\n\r\n  resumeBtn.style.display = (saved !== null) ? '' : 'none';\r\n\r\n}\r\n\r\nfunction preload(i){\r\n\r\n  if(pages[i]){ const im = new Image(); im.src = pages[i]; }\r\n\r\n}\r\n\r\n\r\n\r\n\/* ====== RENDER ====== *\/\r\n\r\nfunction render(){\r\n\r\n  clampIndex();\r\n\r\n\r\n\r\n  if(mangaMode === 1){\r\n\r\n    singleViewer.style.display = '';\r\n\r\n    spreadViewer.style.display = 'none';\r\n\r\n\r\n\r\n    singlePage.src = pages[index] || '';\r\n\r\n    singlePage.alt = `Page ${index+1}`;\r\n\r\n    info.textContent = `${index+1} \/ ${pages.length}`;\r\n\r\n\r\n\r\n    \/\/ pr\u00e9charge les 2 pages suivantes\r\n\r\n    preload(index + 1);\r\n\r\n    preload(index + 2);\r\n\r\n  } else {\r\n\r\n    singleViewer.style.display = 'none';\r\n\r\n    spreadViewer.style.display = '';\r\n\r\n\r\n\r\n    \/\/ alignement double-page (1|2, 3|4...) \u2014 premi\u00e8re page = droite\r\n\r\n    \/\/ SAUF si c'est la derni\u00e8re page seule (cas impair)\r\n\r\n    if(index % 2 !== 0 && index !== pages.length - 1){\r\n\r\n      index--;\r\n\r\n    }\r\n\r\n\r\n\r\n    const rightIdx = index;      \/\/ droite (manga)\r\n\r\n    const leftIdx  = index + 1;  \/\/ gauche\r\n\r\n\r\n\r\n    right.src = pages[rightIdx] || '';\r\n\r\n    right.alt = `Page ${rightIdx+1}`;\r\n\r\n\r\n\r\n    if(pages[leftIdx]){\r\n\r\n      left.src = pages[leftIdx];\r\n\r\n      left.alt = `Page ${leftIdx+1}`;\r\n\r\n      left.style.visibility = 'visible';\r\n\r\n    } else {\r\n\r\n      left.src = '';\r\n\r\n      left.alt = '';\r\n\r\n      left.style.visibility = 'hidden'; \/\/ derni\u00e8re page seule si impair\r\n\r\n    }\r\n\r\n\r\n\r\n    const rNum = rightIdx + 1;\r\n\r\n    const lNum = pages[leftIdx] ? leftIdx + 1 : null;\r\n\r\n    info.textContent = lNum ? `${rNum}-${lNum} \/ ${pages.length}` : `${rNum} \/ ${pages.length}`;\r\n\r\n\r\n\r\n    \/\/ pr\u00e9charge la paire suivante\r\n\r\n    preload(index + 2);\r\n\r\n    preload(index + 3);\r\n\r\n  }\r\n\r\n\r\n\r\n  prevBtn.disabled = index === 0;\r\n  nextBtn.disabled = index + (mangaMode === 2 ? 2 : 1) >= pages.length;\r\n  saveProgress();\r\n\r\n  updateResumeVisibility();\r\n\r\n}\r\n\r\n\r\n\r\n\/* ====== NAV ====== *\/\r\n\r\nprevBtn.onclick = ()=>{\r\n\r\n  if(mangaMode === 1){\r\n\r\n    if(index > 0){ index--; render(); }\r\n\r\n  } else {\r\n\r\n    if(index >= 2){ index -= 2; render(); }\r\n\r\n    else if(index === 1){ index = 0; render(); }\r\n\r\n  }\r\n\r\n};\r\n\r\nnextBtn.onclick = ()=>{\r\n\r\n  if(mangaMode === 1){\r\n\r\n    if(index < pages.length - 1){ index++; render(); }\r\n\r\n  } else {\r\n\r\n    \/\/ si une paire compl\u00e8te existe encore, on avance de 2\r\n\r\n    if(index + 2 < pages.length){ index += 2; render(); }\r\n\r\n    \/\/ sinon, s'il reste exactement une page seule (cas total impair), on l'affiche\r\n\r\n    else if(index + 1 < pages.length){ index = pages.length - 1; render(); }\r\n\r\n  }\r\n\r\n};\r\n\r\n\r\n\r\n\/* clavier (ignore les inputs\/textarea) *\/\r\n\r\ndocument.addEventListener('keydown', e=>{\r\n\r\n  if(!document.getElementById('mode-manga').classList.contains('show')) return;\r\n  if(e.altKey || e.ctrlKey || e.metaKey) return;\r\n  const tag = (e.target.tagName || '').toLowerCase();\r\n\r\n  if(tag === 'input' || tag === 'textarea' || tag === 'select' || e.target.isContentEditable) return;\r\n\r\n  if(e.key==='ArrowRight'){ e.preventDefault(); nextBtn.click(); }\r\n\r\n  if(e.key==='ArrowLeft'){ e.preventDefault(); prevBtn.click(); }\r\n\r\n});\r\n\r\n\r\n\r\n\/* swipe tactile (mode manga uniquement) *\/\r\n\r\n(function setupSwipe(){\r\n\r\n  let touchX = 0;\r\n\r\n  let touchY = 0;\r\n\r\n  const start = e => {\r\n\r\n    touchX = e.touches[0].clientX;\r\n\r\n    touchY = e.touches[0].clientY;\r\n\r\n  };\r\n\r\n  const end = e => {\r\n    \/\/ Laisser le d\u00e9filement natif parcourir une double page d\u00e9bordante.\r\n    if(e.currentTarget.scrollWidth > e.currentTarget.clientWidth + 1) return;\r\n    if(e.changedTouches.length !== 1) return;\r\n\r\n    const dx = e.changedTouches[0].clientX - touchX;\r\n\r\n    const dy = e.changedTouches[0].clientY - touchY;\r\n\r\n    \/\/ swipe horizontal franc, et pas un scroll vertical\r\n\r\n    if(Math.abs(dx) > 50 && Math.abs(dx) > Math.abs(dy)){\r\n\r\n      \/\/ sens manga : swipe vers la GAUCHE = page suivante\r\n\r\n      if(dx < 0) nextBtn.click(); else prevBtn.click();\r\n\r\n    }\r\n\r\n  };\r\n\r\n  [singleViewer, spreadViewer].forEach(el=>{\r\n\r\n    el.addEventListener('touchstart', start, {passive:true});\r\n\r\n    el.addEventListener('touchend', end);\r\n\r\n  });\r\n\r\n})();\r\n\r\n\r\n\r\n\/* ====== RESUME ====== *\/\r\n\r\nresumeBtn.onclick = ()=>{\r\n\r\n  const saved = parseInt(localStorage.getItem(keyIndex) || \"0\", 10);\r\n\r\n  const savedMode = parseInt(localStorage.getItem(keyMode) || \"1\", 10);\r\n\r\n  const savedReading = localStorage.getItem(keyReading) || \"webtoon\";\r\n\r\n\r\n\r\n  mangaMode = (savedMode === 2 ? 2 : 1);\r\n\r\n  index = isNaN(saved) ? 0 : saved;\r\n\r\n\r\n\r\n  \/\/ Appliquer le mode Webtoon\/Manga\r\n\r\n  document.querySelectorAll('.reading-mode').forEach(m=>m.classList.remove('show'));\r\n\r\n  document.querySelectorAll('.mode-btn').forEach(b=>b.classList.remove('active'));\r\n\r\n  if(savedReading === \"manga\"){\r\n\r\n    document.querySelector('[data-target=\"#mode-manga\"]').classList.add('active');\r\n\r\n    document.querySelector('#mode-manga').classList.add('show');\r\n\r\n  } else {\r\n\r\n    document.querySelector('[data-target=\"#mode-webtoon\"]').classList.add('active');\r\n\r\n    document.querySelector('#mode-webtoon').classList.add('show');\r\n\r\n  }\r\n\r\n\r\n\r\n  \/\/ UI 1 page \/ 2 pages\r\n\r\n  if(mangaMode === 1){\r\n\r\n    oneBtn.classList.add('active'); twoBtn.classList.remove('active');\r\n\r\n  } else {\r\n\r\n    twoBtn.classList.add('active'); oneBtn.classList.remove('active');\r\n\r\n    if(index % 2 !== 0 && index !== pages.length - 1) index--;\r\n\r\n  }\r\n\r\n\r\n\r\n  render();\r\n\r\n};\r\n\r\n\r\n\r\n\/* ====== MODE 1 \/ 2 pages ====== *\/\r\n\r\noneBtn.onclick = ()=>{\r\n\r\n  mangaMode = 1;\r\n\r\n  oneBtn.classList.add('active'); twoBtn.classList.remove('active');\r\n\r\n  render();\r\n\r\n};\r\n\r\ntwoBtn.onclick = ()=>{\r\n\r\n  mangaMode = 2;\r\n\r\n  twoBtn.classList.add('active'); oneBtn.classList.remove('active');\r\n\r\n  if(index % 2 !== 0 && index !== pages.length - 1) index--;\r\n\r\n  render();\r\n\r\n};\r\n\r\n\r\n\r\n\/* ====== INIT ====== *\/\r\n\r\n(function init(){\r\n\r\n  const savedReading = localStorage.getItem(keyReading) || \"webtoon\";\r\n\r\n  document.querySelectorAll('.reading-mode').forEach(m=>m.classList.remove('show'));\r\n\r\n  document.querySelectorAll('.mode-btn').forEach(b=>b.classList.remove('active'));\r\n\r\n  if(savedReading === \"manga\"){\r\n\r\n    document.querySelector('[data-target=\"#mode-manga\"]').classList.add('active');\r\n\r\n    document.querySelector('#mode-manga').classList.add('show');\r\n\r\n  } else {\r\n\r\n    document.querySelector('[data-target=\"#mode-webtoon\"]').classList.add('active');\r\n\r\n    document.querySelector('#mode-webtoon').classList.add('show');\r\n\r\n  }\r\n\r\n\r\n\r\n  const saved = parseInt(localStorage.getItem(keyIndex) || \"0\", 10);\r\n\r\n  const savedMode = parseInt(localStorage.getItem(keyMode) || \"1\", 10);\r\n\r\n\r\n\r\n  mangaMode = (savedMode === 2 ? 2 : 1);\r\n\r\n  index = isNaN(saved) ? 0 : saved;\r\n\r\n\r\n\r\n  if(mangaMode === 2){\r\n\r\n    twoBtn.classList.add('active'); oneBtn.classList.remove('active');\r\n\r\n    if(index % 2 !== 0 && index !== pages.length - 1) index--;\r\n\r\n  } else {\r\n\r\n    oneBtn.classList.add('active'); twoBtn.classList.remove('active');\r\n\r\n  }\r\n\r\n\r\n\r\n  updateResumeVisibility();\r\n\r\n  render();\r\n\r\n})();\r\n\r\n<\/script>\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-4bc1bfc e-flex e-con-boxed e-con e-parent\" data-id=\"4bc1bfc\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\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>Lecture verticale Page par page Reprendre 1 page 2 pages \u25c0 1 \/ ? \u25b6 \u2190 Tous les chapitres Chapitre [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":233,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"elementor_canvas","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-235","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/yorokobistars.com\/en\/wp-json\/wp\/v2\/pages\/235","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=235"}],"version-history":[{"count":63,"href":"https:\/\/yorokobistars.com\/en\/wp-json\/wp\/v2\/pages\/235\/revisions"}],"predecessor-version":[{"id":678,"href":"https:\/\/yorokobistars.com\/en\/wp-json\/wp\/v2\/pages\/235\/revisions\/678"}],"up":[{"embeddable":true,"href":"https:\/\/yorokobistars.com\/en\/wp-json\/wp\/v2\/pages\/233"}],"wp:attachment":[{"href":"https:\/\/yorokobistars.com\/en\/wp-json\/wp\/v2\/media?parent=235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}