{"id":83,"date":"2026-07-10T20:32:57","date_gmt":"2026-07-10T18:32:57","guid":{"rendered":"https:\/\/onirium.fr\/?page_id=83"},"modified":"2026-07-10T22:15:17","modified_gmt":"2026-07-10T20:15:17","slug":"accueil","status":"publish","type":"page","link":"https:\/\/onirium.fr\/","title":{"rendered":"Accueil"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"83\" class=\"elementor elementor-83\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3089276 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3089276\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-b7cca5e\" data-id=\"b7cca5e\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2491681 elementor-widget elementor-widget-image\" data-id=\"2491681\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/onirium.fr\/wp-content\/uploads\/2022\/11\/cropped-cropped-onirium_titre_ancien.png\" title=\"cropped-cropped-onirium_titre_ancien.png\" alt=\"cropped-cropped-onirium_titre_ancien.png\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-6ec2c45\" data-id=\"6ec2c45\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-691a3c2 elementor-widget elementor-widget-html\" data-id=\"691a3c2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"curseur-conscience-container\">\n  <span class=\"curseur-label label-gauche\">Le R\u00e9el<\/span>\n  <input type=\"range\" id=\"curseur-conscience\" min=\"1\" max=\"3\" value=\"2\" step=\"1\">\n  <span class=\"curseur-label label-droite\">Le R\u00eave<\/span>\n<\/div>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n  const slider = document.getElementById(\"curseur-conscience\");\n  const body = document.body;\n\n  \/\/ Fonction pour mettre \u00e0 jour la classe du Body\n  function updateState(value) {\n    body.classList.remove(\"state-real\", \"state-crepuscule\", \"state-reve\");\n    \n    if (value == 1) {\n      body.classList.add(\"state-real\");\n    } else if (value == 2) {\n      body.classList.add(\"state-crepuscule\");\n    } else if (value == 3) {\n      body.classList.add(\"state-reve\");\n    }\n  }\n\n  \/\/ Initialisation \u00e0 l'\u00e9tat moyen (Cr\u00e9puscule) par d\u00e9faut\n  updateState(slider.value);\n\n  \/\/ \u00c9couteur de changement sur le curseur\n  slider.addEventListener(\"input\", function() {\n    updateState(this.value);\n  });\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-30c67b1 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"30c67b1\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8129559\" data-id=\"8129559\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-df2b795 elementor-widget elementor-widget-html\" data-id=\"df2b795\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- Le conteneur o\u00f9 vont s'afficher tes cartes dynamiques -->\n<div class=\"grimoire-grid\" id=\"grimoire-blog-grid\">\n  <!-- Un message de chargement temporaire -->\n  <p class=\"grimoire-loading\">Chargement des \u00e9crits...<\/p>\n<\/div>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n  \/\/ L'adresse de l'API de ton site pour r\u00e9cup\u00e9rer les articles (ici, on en demande 3)\n  const apiURL = window.location.origin + \"\/wp-json\/wp\/v2\/posts?_embed&per_page=6\";\n\n  fetch(apiURL)\n    .then(response => {\n      if (!response.ok) throw new Error(\"Erreur de chargement\");\n      return response.json();\n    })\n    .then(posts => {\n      const grid = document.getElementById(\"grimoire-blog-grid\");\n      grid.innerHTML = \"\"; \/\/ On vide le message de chargement\n\n      posts.forEach(post => {\n        \/\/ 1. R\u00e9cup\u00e9ration du titre\n        const title = post.title.rendered;\n\n        \/\/ 2. R\u00e9cup\u00e9ration du lien de l'article\n        const link = post.link;\n\n        \/\/ 3. R\u00e9cup\u00e9ration de la date format\u00e9e (ex: 10.07.2026)\n        const dateObj = new Date(post.date);\n        const dateStr = dateObj.toLocaleDateString(\"fr-FR\", {\n          day: \"2-digit\",\n          month: \"2-digit\",\n          year: \"numeric\"\n        }).replace(\/\\\/\/g, \".\");\n\n        \/\/ 4. R\u00e9cup\u00e9ration de l'extrait\n        let excerpt = post.excerpt.rendered.replace(\/<[^>]*>\/g, \"\"); \/\/ Retire les balises HTML de l'extrait\n        if (excerpt.length > 120) {\n          excerpt = excerpt.substring(0, 120) + \"...\"; \/\/ On coupe si c'est trop long\n        }\n\n        \/\/ 5. R\u00e9cup\u00e9ration de la cat\u00e9gorie (souvent le premier \u00e9l\u00e9ment li\u00e9)\n        let categoryName = \"\u00c9crits\";\n        let categorySlug = \"essai\";\n        if (post._embedded && post._embedded[\"wp:term\"] && post._embedded[\"wp:term\"][0]) {\n          const categoryObj = post._embedded[\"wp:term\"][0][0];\n          if (categoryObj) {\n            categoryName = categoryObj.name;\n            categorySlug = categoryObj.slug;\n          }\n        }\n\n        \/\/ G\u00e9n\u00e9ration d'un num\u00e9ro factice unique bas\u00e9 sur l'ID de l'article (ex: N\u00b0 042)\n        const paddedId = String(post.id).padStart(3, '0');\n\n        \/\/ Cr\u00e9ation de la carte HTML\n        const cardHTML = `\n          <a href=\"${link}\" class=\"grimoire-card-link categorie-${categorySlug}\">\n            <article class=\"grimoire-card-interactive\">\n              <header class=\"card-header\">\n                <span class=\"category\">[ ${categoryName} ]<\/span>\n                <span class=\"metadata\">N\u00b0 ${paddedId}<\/span>\n              <\/header>\n              <div class=\"card-body\">\n                <h2 class=\"card-title\">${title}<\/h2>\n                <blockquote class=\"card-excerpt\">${excerpt}<\/blockquote>\n              <\/div>\n              <footer class=\"card-footer\">\n                <span class=\"timestamp\">${dateStr}<\/span>\n                <span class=\"action-link\">D\u00e9ployer -><\/span>\n              <\/footer>\n            <\/article>\n          <\/a>\n        `;\n        grid.innerHTML += cardHTML;\n      });\n    })\n    .catch(error => {\n      console.error(\"Erreur REST API :\", error);\n      document.getElementById(\"grimoire-blog-grid\").innerHTML = \"<p class='grimoire-loading'>Impossible de charger les \u00e9crits pour le moment.<\/p>\";\n    });\n});\n<\/script>\n\n<style>\n  \/* --- STRUCTURE DE LA GRILLE --- *\/\n  .grimoire-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 24px;\n    padding: 20px 0;\n    width: 100%;\n  }\n\n  .grimoire-loading {\n    font-family: 'Cormorant Garamond', serif;\n    font-style: italic;\n    font-size: 1.2rem;\n    color: rgba(28, 26, 23, 0.5);\n    text-align: center;\n    grid-column: 1 \/ -1;\n  }\n\n  \/* --- LE CSS INDIVIDUEL DE LA CARTE --- *\/\n  .grimoire-card-link {\n    text-decoration: none;\n    display: block;\n    color: inherit;\n  }\n  .grimoire-card-interactive {\n    background-color: #F5F2EB;\n    color: #1C1A17;\n    border: 1px dashed rgba(28, 26, 23, 0.25);\n    border-radius: 4px 3px 5px 3px \/ 3px 4px 3px 5px; \/* D\u00e9coupe main *\/\n    padding: 24px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    min-height: 320px;\n    height: 100%;\n    box-sizing: border-box;\n    transition: \n      background-color 1s cubic-bezier(0.25, 1, 0.5, 1),\n      color 1s cubic-bezier(0.25, 1, 0.5, 1),\n      border 0.8s ease,\n      transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),\n      box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n    box-shadow: 0 4px 20px rgba(28, 26, 23, 0.03);\n  }\n  .grimoire-card-link:hover .grimoire-card-interactive {\n    transform: translateY(-4px);\n    border-color: #A67C52;\n    box-shadow: 0 12px 30px rgba(166, 124, 82, 0.08);\n  }\n  .card-header {\n    display: flex;\n    justify-content: space-between;\n    font-family: 'Space Mono', monospace;\n    font-size: 0.75rem;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n    color: rgba(28, 26, 23, 0.6);\n    border-bottom: 1px dashed rgba(28, 26, 23, 0.15);\n    padding-bottom: 12px;\n    margin-bottom: 20px;\n    transition: border-color 0.8s, color 0.8s;\n  }\n  .card-title {\n    font-family: 'Cormorant Garamond', serif;\n    font-weight: 400;\n    font-size: 1.8rem;\n    margin-bottom: 12px;\n    line-height: 1.2;\n    transition: color 0.5s;\n  }\n  .grimoire-card-link:hover .card-title {\n    color: #A67C52;\n  }\n  .card-excerpt {\n    font-family: 'Cormorant Garamond', serif;\n    font-style: italic;\n    font-size: 1.1rem;\n    line-height: 1.5;\n    color: rgba(28, 26, 23, 0.85);\n    margin: 0;\n    transition: color 0.8s;\n  }\n  .card-footer {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    border-top: 1px dashed rgba(28, 26, 23, 0.15);\n    padding-top: 12px;\n    margin-top: 20px;\n    font-family: 'Space Mono', monospace;\n    font-size: 0.75rem;\n    transition: border-color 0.8s;\n  }\n  .action-link {\n    color: #1C1A17;\n    border: 1px solid #1C1A17;\n    padding: 4px 10px;\n    border-radius: 2px;\n    transition: all 0.5s;\n  }\n  .grimoire-card-link:hover .action-link {\n    background-color: #A67C52;\n    border-color: #A67C52;\n    color: #F5F2EB;\n  }\n\n  \/* --- \u00c9TAT 1 : LE R\u00c9EL (Grounded) --- *\/\n  body.state-real .grimoire-card-interactive {\n    background-color: #ffffff;\n    color: #000000;\n    border: 1px solid #000000;\n    border-radius: 0px;\n    box-shadow: none;\n  }\n  body.state-real .card-header,\n  body.state-real .card-footer {\n    border-bottom: 1px solid #000000;\n    border-top: 1px solid #000000;\n    color: #000000;\n  }\n  body.state-real .card-excerpt {\n    color: #333333;\n    font-style: normal;\n  }\n  body.state-real .action-link {\n    border-radius: 0px;\n    border-color: #000000;\n  }\n  body.state-real .grimoire-card-link:hover .card-title {\n    color: #000000;\n    text-decoration: underline;\n  }\n\n  \/* --- \u00c9TAT 3 : LE R\u00caVE (Astral) --- *\/\n  body.state-reve .grimoire-card-interactive {\n    background-color: rgba(255, 255, 255, 0.03);\n    color: #E2DDD5;\n    border: 1px solid rgba(226, 221, 213, 0.08);\n    border-radius: 24px 12px 28px 16px \/ 16px 24px 14px 28px;\n    backdrop-filter: blur(12px);\n    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);\n  }\n  body.state-reve .grimoire-card-link:hover .grimoire-card-interactive {\n    transform: translateY(-8px) scale(1.02);\n    border-color: rgba(226, 221, 213, 0.25);\n    box-shadow: 0 15px 45px rgba(226, 221, 213, 0.05);\n  }\n  body.state-reve .card-header,\n  body.state-reve .card-footer {\n    border-color: rgba(226, 221, 213, 0.1);\n    color: rgba(226, 221, 213, 0.4);\n  }\n  body.state-reve .card-title {\n    color: #FFFFFF;\n    text-shadow: 0 0 12px rgba(255, 255, 255, 0.1);\n  }\n  body.state-reve .card-excerpt {\n    color: rgba(226, 221, 213, 0.7);\n  }\n  body.state-reve .action-link {\n    color: #E2DDD5;\n    border-color: rgba(226, 221, 213, 0.3);\n    background-color: rgba(226, 221, 213, 0.05);\n    border-radius: 12px;\n  }\n  body.state-reve .grimoire-card-link:hover .action-link {\n    background-color: #E2DDD5;\n    color: #0B0F19;\n    border-color: #E2DDD5;\n  }\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-9946ca4 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"9946ca4\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8714666\" data-id=\"8714666\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Le R\u00e9el Le R\u00eave Chargement des \u00e9crits&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-83","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/onirium.fr\/index.php\/wp-json\/wp\/v2\/pages\/83","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/onirium.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/onirium.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/onirium.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/onirium.fr\/index.php\/wp-json\/wp\/v2\/comments?post=83"}],"version-history":[{"count":40,"href":"https:\/\/onirium.fr\/index.php\/wp-json\/wp\/v2\/pages\/83\/revisions"}],"predecessor-version":[{"id":140,"href":"https:\/\/onirium.fr\/index.php\/wp-json\/wp\/v2\/pages\/83\/revisions\/140"}],"wp:attachment":[{"href":"https:\/\/onirium.fr\/index.php\/wp-json\/wp\/v2\/media?parent=83"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}