{"id":489,"date":"2026-03-22T07:51:12","date_gmt":"2026-03-22T07:51:12","guid":{"rendered":"https:\/\/stadiaorg.com\/?page_id=489"},"modified":"2026-03-31T12:36:29","modified_gmt":"2026-03-31T12:36:29","slug":"live-world","status":"publish","type":"page","link":"https:\/\/stadiaorg.com\/fr\/live-world\/","title":{"rendered":"Monde vivant"},"content":{"rendered":"\n<div style=\"max-width:1020px;margin:30px auto 60px auto;padding:0 20px;font-family:Arial,Helvetica,sans-serif;color:#1b2230;\">\n\n  <section style=\"background:#ffffff;border:1px solid #e4e7f0;border-radius:28px;padding:42px 26px;box-shadow:0 10px 28px rgba(0,0,0,0.06);\">\n\n    <div style=\"margin-bottom:34px;\">\n      <div style=\"display:inline-block;padding:8px 12px;border-radius:999px;background:#efeefe;color:#6a5cff;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px;\">\n        Stadia Vitae \u2022 Live World\n      <\/div>\n\n      <h1 style=\"font-size:44px;margin:0;letter-spacing:-0.5px;line-height:1.08;\">\n        Live World\n      <\/h1>\n\n      <p style=\"font-size:18px;color:#5f6b85;margin-top:12px;line-height:1.7;max-width:760px;\">\n        A living field of traces, signals, and real developmental moments shared across the system.\n      <\/p>\n\n      <p style=\"font-size:16px;color:#7a859d;line-height:1.7;max-width:760px;margin-top:10px;margin-bottom:0;\">\n        The system becomes meaningful when you participate.\n      <\/p>\n    <\/div>\n\n    <!-- LIVE BAR -->\n    <div style=\"\n      margin-bottom:28px;\n      background:linear-gradient(180deg,#faf9ff 0%,#ffffff 100%);\n      border:1px solid #e4e7f0;\n      border-radius:20px;\n      padding:18px 20px;\n      box-shadow:0 8px 22px rgba(21,30,60,0.05);\n    \">\n      <div style=\"font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6a5cff;margin-bottom:10px;\">\n        Live signals\n      <\/div>\n\n      <div id=\"lw-live-bar\" style=\"display:grid;gap:8px;\">\n        <div style=\"font-size:14px;color:#4f5d7a;line-height:1.6;\">\ud83d\udd35 Someone is trying to understand what comes next<\/div>\n        <div style=\"font-size:14px;color:#4f5d7a;line-height:1.6;\">\ud83d\udfe3 A new trace may be about to appear<\/div>\n        <div style=\"font-size:14px;color:#4f5d7a;line-height:1.6;\">\ud83d\udfe2 Similar paths become clearer when people participate<\/div>\n      <\/div>\n    <\/div>\n\n    <!-- FORM -->\n    <div style=\"background:#f8f7ff;border:1px solid #e4e7f0;border-radius:22px;padding:24px;margin-bottom:28px;\">\n      <h2 style=\"margin-top:0;font-size:28px;\">Leave a live trace<\/h2>\n      <p style=\"font-size:16px;color:#5f6b85;line-height:1.7;margin-top:8px;margin-bottom:22px;\">\n        Share one real sentence connected to your current stage, question, or emerging movement.\n      <\/p>\n\n      <div style=\"display:grid;gap:16px;\">\n        <div>\n          <label for=\"lw-name\" style=\"display:block;font-size:14px;font-weight:700;margin-bottom:8px;\">Name or presence<\/label>\n          <input id=\"lw-name\" type=\"text\" placeholder=\"Visitor\" style=\"width:100%;box-sizing:border-box;padding:14px 16px;border:1px solid #d8ddea;border-radius:14px;font-size:15px;outline:none;\">\n        <\/div>\n\n        <div>\n          <label for=\"lw-mood\" style=\"display:block;font-size:14px;font-weight:700;margin-bottom:8px;\">What kind of moment is this?<\/label>\n          <select id=\"lw-mood\" style=\"width:100%;box-sizing:border-box;padding:14px 16px;border:1px solid #d8ddea;border-radius:14px;font-size:15px;outline:none;background:#ffffff;\">\n            <option value=\"reflection\">Reflection<\/option>\n            <option value=\"transition\">Transition<\/option>\n            <option value=\"connection\">Connection<\/option>\n            <option value=\"clarity\">Clarity<\/option>\n            <option value=\"anguish\">Anguish<\/option>\n          <\/select>\n        <\/div>\n\n        <div>\n          <label for=\"lw-text\" style=\"display:block;font-size:14px;font-weight:700;margin-bottom:8px;\">Your live trace<\/label>\n          <textarea id=\"lw-text\" rows=\"5\" placeholder=\"Write one honest sentence about what you are sensing, questioning, or moving through...\" style=\"width:100%;box-sizing:border-box;padding:14px 16px;border:1px solid #d8ddea;border-radius:14px;font-size:15px;outline:none;resize:vertical;font-family:Arial,Helvetica,sans-serif;\"><\/textarea>\n        <\/div>\n\n        <div style=\"display:flex;flex-wrap:wrap;gap:12px;align-items:center;\">\n          <button id=\"lw-share-btn\" type=\"button\" style=\"border:none;background:#6a5cff;color:#ffffff;padding:14px 22px;border-radius:14px;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 10px 22px rgba(106,92,255,0.22);\">\n            Submit trace\n          <\/button>\n        <\/div>\n\n        <div id=\"lw-status\" style=\"font-size:14px;color:#5f6b85;min-height:20px;\"><\/div>\n      <\/div>\n    <\/div>\n\n    <div style=\"margin-bottom:18px;\">\n      <h2 style=\"font-size:30px;margin-bottom:10px;\">Recent live traces<\/h2>\n      <p style=\"font-size:16px;color:#5f6b85;line-height:1.7;margin:0;\">\n        A temporary stream of visible moments shared by people in motion.\n      <\/p>\n    <\/div>\n\n    <div id=\"lw-feed\"><\/div>\n\n    <div id=\"lw-empty\" style=\"display:none;text-align:center;background:#ffffff;border:1px solid #e4e7f0;border-radius:22px;padding:34px;color:#5f6b85;box-shadow:0 8px 24px rgba(0,0,0,0.05);margin-top:20px;\">\n      <p style=\"font-size:18px;margin-top:0;\">No live traces yet.<\/p>\n      <p style=\"margin-bottom:0;\">\n        Be the first to make a moment visible in the system.\n      <\/p>\n    <\/div>\n\n    <!-- CONNECTION -->\n    <div id=\"lw-resonance-section\" style=\"display:none;margin-top:36px;background:#111626;color:#ffffff;border-radius:22px;padding:28px 24px;box-shadow:0 12px 30px rgba(10,16,30,0.16);\">\n      <div style=\"max-width:900px;margin:0 auto;\">\n        <div style=\"text-align:center;\">\n          <div style=\"display:inline-block;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,0.08);color:#b8bfff;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px;\">\n            Connection inside Live World\n          <\/div>\n\n          <h2 style=\"font-size:32px;line-height:1.15;margin:0 0 12px;color:#ffffff;\">\n            From visible traces to meaningful connection\n          <\/h2>\n\n          <p style=\"font-size:17px;color:#c9d1e6;line-height:1.7;max-width:760px;margin:0 auto 28px;\">\n            Once traces become visible, the next step is discovering patterns, proximity, and people moving through a moment like yours.\n          <\/p>\n        <\/div>\n\n        <div id=\"lw-resonance-grid\" style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:16px;\">\n          <div class=\"lw-reso-card\">\n            <div class=\"lw-reso-label\">Similar mood<\/div>\n            <div id=\"lw-reso-mood\" class=\"lw-reso-main\">No signal yet<\/div>\n            <div class=\"lw-reso-sub\">A shared emotional tone may appear after the first traces.<\/div>\n          <\/div>\n\n          <div class=\"lw-reso-card\">\n            <div class=\"lw-reso-label\">Nearby traces<\/div>\n            <div id=\"lw-reso-count\" class=\"lw-reso-main\">0 visible<\/div>\n            <div class=\"lw-reso-sub\">Live World begins to form connection when multiple traces align.<\/div>\n          <\/div>\n\n          <div class=\"lw-reso-card\">\n            <div class=\"lw-reso-label\">Possible next step<\/div>\n            <div id=\"lw-reso-next\" class=\"lw-reso-main\">Share a first trace<\/div>\n            <div class=\"lw-reso-sub\">Clarity grows when the system can reflect something back to you.<\/div>\n          <\/div>\n        <\/div>\n\n        <div id=\"lw-resonance-list-wrap\" style=\"margin-top:20px;display:none;\">\n          <div style=\"font-size:18px;font-weight:700;margin-bottom:12px;\">Traces that may connect with yours<\/div>\n          <div id=\"lw-resonance-list\" style=\"display:grid;gap:12px;\"><\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n  <\/section>\n<\/div>\n\n<style>\n.lw-card{\n  background:#ffffff;\n  border:1px solid #e4e7f0;\n  border-radius:20px;\n  padding:20px;\n  margin-bottom:16px;\n  box-shadow:0 8px 24px rgba(0,0,0,0.06);\n}\n.lw-top{\n  display:flex;\n  justify-content:space-between;\n  align-items:center;\n  gap:12px;\n  flex-wrap:wrap;\n  margin-bottom:10px;\n}\n.lw-left{\n  display:flex;\n  gap:10px;\n  align-items:center;\n}\n.lw-avatar{\n  width:42px;\n  height:42px;\n  border-radius:50%;\n  background:#6a5cff;\n  color:#ffffff;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n  flex-shrink:0;\n}\n.lw-name{\n  font-size:16px;\n  font-weight:700;\n}\n.lw-sub{\n  font-size:13px;\n  color:#5f6b85;\n}\n.lw-pill{\n  display:inline-block;\n  padding:6px 10px;\n  border-radius:999px;\n  font-size:11px;\n  font-weight:700;\n  letter-spacing:.05em;\n  text-transform:uppercase;\n}\n.lw-mood-reflection{ background:#eef0ff; color:#4754c7; }\n.lw-mood-transition{ background:#fff3ea; color:#c36a24; }\n.lw-mood-connection{ background:#ebf8f1; color:#1f8a5d; }\n.lw-mood-clarity{ background:#f3f1ff; color:#6a5cff; }\n.lw-mood-anguish{ background:#ffecef; color:#b42342; }\n\n.lw-text{\n  font-size:17px;\n  line-height:1.8;\n  color:#2a3347;\n  white-space:pre-wrap;\n}\n.lw-footer{\n  margin-top:12px;\n  padding-top:10px;\n  border-top:1px solid #edf0f6;\n  font-size:13px;\n  color:#5f6b85;\n}\n.lw-reactions{\n  margin-top:12px;\n  display:flex;\n  gap:8px;\n  flex-wrap:wrap;\n}\n.lw-react-btn{\n  border:1px solid #dfe4ef;\n  background:#ffffff;\n  border-radius:999px;\n  padding:6px 10px;\n  cursor:pointer;\n  font-size:14px;\n  transition:transform .15s ease;\n}\n\n.lw-reso-card{\n  background:rgba(255,255,255,0.06);\n  border:1px solid rgba(255,255,255,0.08);\n  border-radius:18px;\n  padding:18px;\n}\n.lw-reso-label{\n  font-size:12px;\n  color:#aeb8d6;\n  margin-bottom:8px;\n  text-transform:uppercase;\n  letter-spacing:.05em;\n  font-weight:700;\n}\n.lw-reso-main{\n  font-size:22px;\n  line-height:1.35;\n  color:#ffffff;\n  font-weight:700;\n  margin-bottom:8px;\n}\n.lw-reso-sub{\n  font-size:14px;\n  line-height:1.6;\n  color:#c9d1e6;\n}\n.lw-reso-trace{\n  background:rgba(255,255,255,0.06);\n  border:1px solid rgba(255,255,255,0.08);\n  border-radius:16px;\n  padding:14px 16px;\n}\n.lw-reso-trace-top{\n  font-size:13px;\n  color:#b8bfff;\n  margin-bottom:6px;\n}\n.lw-reso-trace-text{\n  color:#ffffff;\n  font-size:16px;\n  line-height:1.7;\n}\n\n@media (max-width: 780px){\n  .lw-top{\n    align-items:flex-start;\n  }\n  #lw-resonance-grid{\n    grid-template-columns:1fr !important;\n  }\n}\n<\/style>\n\n<script>\n(function(){\n  const seedPosts = [\n    { name:\"Anna\", mood:\"reflection\", text:\"I feel something is changing but I don't know what yet.\", stage:\"Visitor\", time:Date.now()-1000*60*34, seed:true },\n    { name:\"Marco\", mood:\"transition\", text:\"I'm between two directions and it's uncomfortable.\", stage:\"Visitor\", time:Date.now()-1000*60*55, seed:true },\n    { name:\"Lena\", mood:\"clarity\", text:\"Now I see what I need to do next.\", stage:\"Visitor\", time:Date.now()-1000*60*89, seed:true }\n  ];\n\n  function trackActivity(action){\n    let activity = [];\n    try{\n      activity = JSON.parse(localStorage.getItem(\"sv_activity\") || \"[]\");\n    }catch(e){\n      activity = [];\n    }\n    activity.unshift({ text: action, time: Date.now() });\n    activity = activity.slice(0, 20);\n    localStorage.setItem(\"sv_activity\", JSON.stringify(activity));\n  }\n\n  function ensureDemoPosts(){\n    try{\n      const existing = JSON.parse(localStorage.getItem(\"lw_posts\") || \"[]\");\n      if(existing.length) return;\n      localStorage.setItem(\"lw_posts\", JSON.stringify(seedPosts));\n    }catch(e){\n      localStorage.setItem(\"lw_posts\", JSON.stringify(seedPosts));\n    }\n  }\n\n  function loadPosts(){\n    try{\n      return JSON.parse(localStorage.getItem(\"lw_posts\") || \"[]\");\n    }catch(e){\n      return [];\n    }\n  }\n\n  function savePosts(posts){\n    localStorage.setItem(\"lw_posts\", JSON.stringify(posts));\n  }\n\n  function getStage(){\n    try{\n      return localStorage.getItem(\"sv_stage\") || \"Visitor\";\n    }catch(e){\n      return \"Visitor\";\n    }\n  }\n\n  function avatar(name){\n    if(!name) return \"?\";\n    return name.trim().charAt(0).toUpperCase();\n  }\n\n  function timeAgo(ts){\n    if(!ts) return \"recently\";\n    const diff = Date.now() - ts;\n    const m = Math.floor(diff \/ 60000);\n    const h = Math.floor(diff \/ 3600000);\n    const d = Math.floor(diff \/ 86400000);\n    if (d > 0) return d + \"d ago\";\n    if (h > 0) return h + \"h ago\";\n    if (m > 0) return m + \"m ago\";\n    return \"just now\";\n  }\n\n  function escapeHtml(str){\n    return (str || \"\")\n      .replace(\/&\/g, \"&amp;\")\n      .replace(\/<\/g, \"&lt;\")\n      .replace(\/>\/g, \"&gt;\");\n  }\n\n  window.reactLivePost = function(btn){\n    btn.style.transform = \"scale(1.18)\";\n    setTimeout(function(){ btn.style.transform = \"scale(1)\"; }, 180);\n  };\n\n  function card(post){\n    const mood = post.mood || \"reflection\";\n    const moodLabel = mood.charAt(0).toUpperCase() + mood.slice(1);\n    const footerText = post.seed ? \"Visible signal in the system\" : \"Live trace visible in the system\";\n\n    return ''\n      + '<div class=\"lw-card\">'\n      + '  <div class=\"lw-top\">'\n      + '    <div class=\"lw-left\">'\n      + '      <div class=\"lw-avatar\">' + avatar(post.name || \"V\") + '<\/div>'\n      + '      <div>'\n      + '        <div class=\"lw-name\">' + escapeHtml(post.name || \"Visitor\") + '<\/div>'\n      + '        <div class=\"lw-sub\">' + escapeHtml(post.stage || \"Visitor\") + ' \u2022 ' + timeAgo(post.time) + '<\/div>'\n      + '      <\/div>'\n      + '    <\/div>'\n      + '    <div class=\"lw-pill lw-mood-' + mood + '\">' + moodLabel + '<\/div>'\n      + '  <\/div>'\n      + '  <div class=\"lw-text\">' + escapeHtml(post.text || \"\") + '<\/div>'\n      + '  <div class=\"lw-reactions\">'\n      + '    <button class=\"lw-react-btn\" onclick=\"reactLivePost(this)\">\ud83d\udc4d<\/button>'\n      + '    <button class=\"lw-react-btn\" onclick=\"reactLivePost(this)\">\u2764\ufe0f<\/button>'\n      + '    <button class=\"lw-react-btn\" onclick=\"reactLivePost(this)\">\ud83e\udd1d<\/button>'\n      + '  <\/div>'\n      + '  <div class=\"lw-footer\">' + footerText + '<\/div>'\n      + '<\/div>';\n  }\n\n  function getMoodLabel(mood){\n    const map = {\n      reflection: \"Reflection\",\n      transition: \"Transition\",\n      connection: \"Connection\",\n      clarity: \"Clarity\",\n      anguish: \"Anguish\"\n    };\n    return map[mood] || \"Reflection\";\n  }\n\n  function getNextStep(mood){\n    const map = {\n      reflection: \"Stay with the question\",\n      transition: \"Notice what is changing\",\n      connection: \"Look for similar people\",\n      clarity: \"Translate insight into action\",\n      anguish: \"Slow down and name what hurts\"\n    };\n    return map[mood] || \"Share a first trace\";\n  }\n\n  function updateLiveBar(posts){\n    const bar = document.getElementById(\"lw-live-bar\");\n    if(!bar) return;\n\n    const latestReal = posts[0];\n    const totalVisible = posts.length;\n\n    if(latestReal){\n      bar.innerHTML = ''\n        + '<div style=\"font-size:14px;color:#4f5d7a;line-height:1.6;\">\ud83d\udfe3 ' + escapeHtml(latestReal.name || \"Someone\") + ' just made a visible trace<\/div>'\n        + '<div style=\"font-size:14px;color:#4f5d7a;line-height:1.6;\">\ud83d\udd35 ' + getMoodLabel(latestReal.mood || \"reflection\") + ' is active in the system right now<\/div>'\n        + '<div style=\"font-size:14px;color:#4f5d7a;line-height:1.6;\">\ud83d\udfe2 ' + totalVisible + ' visible signals are shaping Live World<\/div>';\n    }\n  }\n\n  function updateResonance(realPosts){\n    const section = document.getElementById(\"lw-resonance-section\");\n    const moodEl = document.getElementById(\"lw-reso-mood\");\n    const countEl = document.getElementById(\"lw-reso-count\");\n    const nextEl = document.getElementById(\"lw-reso-next\");\n    const listWrap = document.getElementById(\"lw-resonance-list-wrap\");\n    const listEl = document.getElementById(\"lw-resonance-list\");\n\n    if(!section || !moodEl || !countEl || !nextEl || !listWrap || !listEl) return;\n\n    if(!realPosts.length){\n      section.style.display = \"none\";\n      return;\n    }\n\n    section.style.display = \"block\";\n\n    const latest = realPosts[0];\n    const latestMood = latest.mood || \"reflection\";\n\n    const similar = realPosts.filter(function(p, idx){\n      return idx !== 0 && (p.mood || \"reflection\") === latestMood;\n    }).slice(0, 3);\n\n    moodEl.textContent = getMoodLabel(latestMood);\n    countEl.textContent = similar.length + \" nearby\";\n    nextEl.textContent = getNextStep(latestMood);\n\n    if(!similar.length){\n      listWrap.style.display = \"none\";\n      listEl.innerHTML = \"\";\n      return;\n    }\n\n    listWrap.style.display = \"block\";\n    listEl.innerHTML = similar.map(function(post){\n      return ''\n        + '<div class=\"lw-reso-trace\">'\n        + '  <div class=\"lw-reso-trace-top\">' + escapeHtml(post.name || \"Visitor\") + ' \u2022 ' + escapeHtml(post.stage || \"Visitor\") + ' \u2022 ' + getMoodLabel(post.mood || \"reflection\") + '<\/div>'\n        + '  <div class=\"lw-reso-trace-text\">' + escapeHtml(post.text || \"\") + '<\/div>'\n        + '<\/div>';\n    }).join(\"\");\n  }\n\n  function render(){\n    const posts = loadPosts().slice().reverse();\n    const feed = document.getElementById(\"lw-feed\");\n    const empty = document.getElementById(\"lw-empty\");\n\n    if(!feed || !empty) return;\n\n    feed.innerHTML = \"\";\n\n    if(posts.length === 0){\n      empty.style.display = \"block\";\n    } else {\n      empty.style.display = \"none\";\n      posts.forEach(function(post){\n        feed.innerHTML += card(post);\n      });\n    }\n\n    updateLiveBar(posts);\n    updateResonance(posts);\n  }\n\n  ensureDemoPosts();\n\n  const btn = document.getElementById(\"lw-share-btn\");\n  if(btn){\n    btn.addEventListener(\"click\", function(){\n      const nameEl = document.getElementById(\"lw-name\");\n      const moodEl = document.getElementById(\"lw-mood\");\n      const textEl = document.getElementById(\"lw-text\");\n      const status = document.getElementById(\"lw-status\");\n\n      const name = (nameEl.value || \"\").trim() || \"Visitor\";\n      const mood = moodEl.value;\n      const text = (textEl.value || \"\").trim();\n\n      if(!text){\n        status.textContent = \"Write a trace before submitting.\";\n        return;\n      }\n\n      const post = {\n        name: name,\n        mood: mood,\n        text: text,\n        stage: getStage(),\n        time: Date.now()\n      };\n\n      const posts = loadPosts();\n      posts.push(post);\n      savePosts(posts);\n\n      trackActivity(name + \" shared a live trace\");\n\n      nameEl.value = name;\n      textEl.value = \"\";\n      status.textContent = \"Your trace is now visible in Live World.\";\n\n      render();\n    });\n  }\n\n  render();\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Stadia Vitae \u2022 Live World Live World A living field of traces, signals, and real developmental moments shared across the system. The system becomes meaningful when you participate. Live signals \ud83d\udd35 Someone is trying to understand what comes next \ud83d\udfe3 A new trace may be about to appear \ud83d\udfe2 Similar paths become clearer when people [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-489","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/stadiaorg.com\/fr\/wp-json\/wp\/v2\/pages\/489","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stadiaorg.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stadiaorg.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stadiaorg.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stadiaorg.com\/fr\/wp-json\/wp\/v2\/comments?post=489"}],"version-history":[{"count":15,"href":"https:\/\/stadiaorg.com\/fr\/wp-json\/wp\/v2\/pages\/489\/revisions"}],"predecessor-version":[{"id":669,"href":"https:\/\/stadiaorg.com\/fr\/wp-json\/wp\/v2\/pages\/489\/revisions\/669"}],"wp:attachment":[{"href":"https:\/\/stadiaorg.com\/fr\/wp-json\/wp\/v2\/media?parent=489"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}