{"id":1242,"date":"2026-05-06T09:34:14","date_gmt":"2026-05-06T09:34:14","guid":{"rendered":"https:\/\/stadiaorg.com\/?page_id=1242"},"modified":"2026-07-07T09:26:38","modified_gmt":"2026-07-07T09:26:38","slug":"civic-discussion-room","status":"publish","type":"page","link":"https:\/\/staging.stadiaorg.com\/fr\/civic-discussion-room\/","title":{"rendered":"Salle de discussion civique"},"content":{"rendered":"<div id=\"sv-civic-room\">\n\n<style>\n#sv-civic-room{\n  width:100%;\n  max-width:100%;\n  margin:0;\n  padding:0 0 100px;\n  font-family:Arial,Helvetica,sans-serif;\n  color:#0f172a;\n  background:#ffffff;\n  overflow:hidden;\n  box-sizing:border-box;\n}\n\n#sv-civic-room *{\n  box-sizing:border-box;\n}\n\n#sv-civic-room .sv-wrap{\n  width:min(96vw,1700px);\n  max-width:1700px;\n  margin:0 auto;\n  padding:0 24px;\n}\n\n\/* HERO *\/\n#sv-civic-room .sv-hero{\n  position:relative;\n  margin:0 auto 86px;\n  padding:96px 0 86px;\n  background:\n    radial-gradient(circle at 78% 30%,rgba(106,92,255,.20),transparent 34%),\n    radial-gradient(circle at 12% 20%,rgba(225,29,72,.09),transparent 30%),\n    linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);\n  overflow:hidden;\n}\n\n#sv-civic-room .sv-hero::before{\n  content:\"\";\n  position:absolute;\n  inset:28px 18px;\n  border:1px solid rgba(226,232,240,.95);\n  border-radius:46px;\n  background:rgba(255,255,255,.58);\n  box-shadow:0 30px 100px rgba(15,23,42,.08);\n  pointer-events:none;\n}\n\n#sv-civic-room .sv-hero-inner{\n  position:relative;\n  z-index:2;\n  display:grid;\n  grid-template-columns:minmax(0,1.05fr) minmax(460px,.95fr);\n  gap:72px;\n  align-items:center;\n}\n\n#sv-civic-room .sv-kicker{\n  display:inline-flex;\n  align-items:center;\n  gap:10px;\n  margin-bottom:22px;\n  padding:12px 18px;\n  border-radius:999px;\n  background:#eef2ff;\n  color:#4f46e5;\n  font-size:13px;\n  font-weight:900;\n  letter-spacing:.08em;\n  text-transform:uppercase;\n}\n\n#sv-civic-room h1{\n  margin:0 0 26px;\n  font-size:78px;\n  line-height:.98;\n  font-weight:900;\n  letter-spacing:-.06em;\n  color:#0f172a;\n}\n\n#sv-civic-room .sv-lead{\n  max-width:820px;\n  margin:0 0 22px;\n  color:#334155;\n  font-size:24px;\n  line-height:1.6;\n}\n\n#sv-civic-room .sv-sub{\n  max-width:760px;\n  margin:0 0 36px;\n  color:#64748b;\n  font-size:18px;\n  line-height:1.85;\n}\n\n#sv-civic-room .sv-actions{\n  display:flex;\n  flex-wrap:wrap;\n  gap:14px;\n  align-items:center;\n}\n\n#sv-civic-room .sv-btn{\n  display:inline-flex;\n  align-items:center;\n  justify-content:center;\n  min-width:210px;\n  min-height:58px;\n  padding:16px 26px;\n  border-radius:18px;\n  background:#6a5cff;\n  color:#ffffff !important;\n  font-size:16px;\n  font-weight:900;\n  text-decoration:none !important;\n  border:none;\n  cursor:pointer;\n  box-shadow:0 18px 42px rgba(106,92,255,.28);\n  transition:transform .22s ease,box-shadow .22s ease;\n}\n\n#sv-civic-room .sv-btn:hover{\n  transform:translateY(-3px);\n  box-shadow:0 26px 56px rgba(106,92,255,.34);\n}\n\n#sv-civic-room .sv-btn-dark{\n  background:#0f172a;\n  box-shadow:0 18px 42px rgba(15,23,42,.20);\n}\n\n#sv-civic-room .sv-btn-light{\n  background:#ffffff;\n  color:#0f172a !important;\n  border:1px solid #e2e8f0;\n  box-shadow:0 14px 34px rgba(15,23,42,.08);\n}\n\n\/* PANEL *\/\n#sv-civic-room .sv-panel{\n  background:#ffffff;\n  border:1px solid #e2e8f0;\n  border-radius:38px;\n  padding:36px;\n  box-shadow:0 28px 78px rgba(15,23,42,.12);\n}\n\n#sv-civic-room .sv-panel-main{\n  padding:34px;\n  border-radius:30px;\n  background:\n    radial-gradient(circle at top right,rgba(106,92,255,.18),transparent 38%),\n    linear-gradient(180deg,#f8fafc,#ffffff);\n  border:1px solid #e2e8f0;\n  margin-bottom:18px;\n}\n\n#sv-civic-room .sv-panel-main strong{\n  display:block;\n  margin-bottom:12px;\n  color:#0f172a;\n  font-size:34px;\n  line-height:1.08;\n  letter-spacing:-.04em;\n}\n\n#sv-civic-room .sv-panel-main span{\n  display:block;\n  color:#64748b;\n  font-size:16px;\n  line-height:1.75;\n}\n\n#sv-civic-room .sv-mini-grid{\n  display:grid;\n  grid-template-columns:repeat(3,1fr);\n  gap:14px;\n}\n\n#sv-civic-room .sv-mini{\n  padding:20px;\n  border-radius:22px;\n  background:#ffffff;\n  border:1px solid #e2e8f0;\n  box-shadow:0 12px 30px rgba(15,23,42,.05);\n}\n\n#sv-civic-room .sv-mini strong{\n  display:block;\n  margin-bottom:7px;\n  color:#0f172a;\n  font-size:17px;\n}\n\n#sv-civic-room .sv-mini span{\n  display:block;\n  color:#64748b;\n  font-size:14px;\n  line-height:1.6;\n}\n\n\/* INTRO *\/\n#sv-civic-room .sv-section-title{\n  max-width:980px;\n  margin:0 auto 42px;\n  text-align:center;\n}\n\n#sv-civic-room .sv-section-title h2{\n  margin:0 0 18px;\n  color:#0f172a;\n  font-size:58px;\n  line-height:1.05;\n  letter-spacing:-.05em;\n}\n\n#sv-civic-room .sv-section-title p{\n  max-width:860px;\n  margin:0 auto;\n  color:#64748b;\n  font-size:20px;\n  line-height:1.75;\n}\n\n\/* ROOM GRID *\/\n#sv-civic-room .sv-room-grid{\n  display:grid;\n  grid-template-columns:repeat(4,1fr);\n  gap:24px;\n  margin-bottom:92px;\n}\n\n#sv-civic-room .sv-room-card{\n  min-height:360px;\n  padding:34px 30px;\n  border-radius:34px;\n  background:#ffffff;\n  border:1px solid #e2e8f0;\n  box-shadow:0 24px 58px rgba(15,23,42,.08);\n  display:flex;\n  flex-direction:column;\n  justify-content:space-between;\n  transition:transform .22s ease,box-shadow .22s ease;\n}\n\n#sv-civic-room .sv-room-card:hover{\n  transform:translateY(-6px);\n  box-shadow:0 34px 76px rgba(15,23,42,.13);\n}\n\n#sv-civic-room .sv-room-card:nth-child(1){\n  background:linear-gradient(180deg,#eef2ff,#ffffff);\n  border-color:#c4b5fd;\n}\n\n#sv-civic-room .sv-room-card:nth-child(2){\n  background:linear-gradient(180deg,#fff1f2,#ffffff);\n  border-color:#fda4af;\n}\n\n#sv-civic-room .sv-room-card:nth-child(3){\n  background:linear-gradient(180deg,#eff6ff,#ffffff);\n  border-color:#93c5fd;\n}\n\n#sv-civic-room .sv-room-card:nth-child(4){\n  background:linear-gradient(180deg,#fff7ed,#ffffff);\n  border-color:#fdba74;\n}\n\n#sv-civic-room .sv-icon{\n  width:76px;\n  height:76px;\n  border-radius:24px;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  background:#ffffff;\n  font-size:38px;\n  box-shadow:0 14px 34px rgba(15,23,42,.09);\n  margin-bottom:24px;\n}\n\n#sv-civic-room .sv-room-card h3{\n  margin:0 0 14px;\n  color:#0f172a;\n  font-size:30px;\n  line-height:1.08;\n  letter-spacing:-.035em;\n}\n\n#sv-civic-room .sv-room-card p{\n  margin:0;\n  color:#475569;\n  line-height:1.72;\n  font-size:16px;\n}\n\n\/* DISCUSSION FORM *\/\n#sv-civic-room .sv-discussion{\n  margin-top:70px;\n  padding:54px;\n  border-radius:46px;\n  background:\n    radial-gradient(circle at top right,rgba(106,92,255,.14),transparent 34%),\n    radial-gradient(circle at bottom left,rgba(225,29,72,.08),transparent 32%),\n    linear-gradient(180deg,#ffffff,#f8fafc);\n  border:1px solid #e2e8f0;\n  box-shadow:0 30px 90px rgba(15,23,42,.08);\n}\n\n#sv-civic-room .sv-discussion-grid{\n  display:grid;\n  grid-template-columns:.95fr 1.05fr;\n  gap:30px;\n  align-items:start;\n}\n\n#sv-civic-room .sv-box{\n  background:#ffffff;\n  border:1px solid #e2e8f0;\n  border-radius:34px;\n  padding:34px;\n  box-shadow:0 22px 58px rgba(15,23,42,.07);\n}\n\n#sv-civic-room .sv-box h2,\n#sv-civic-room .sv-box h3{\n  margin:0 0 14px;\n  color:#0f172a;\n  font-size:34px;\n  line-height:1.08;\n  letter-spacing:-.035em;\n}\n\n#sv-civic-room .sv-box p{\n  margin:0 0 20px;\n  color:#64748b;\n  font-size:17px;\n  line-height:1.85;\n}\n\n#sv-civic-room label{\n  display:block;\n  margin:18px 0 8px;\n  color:#0f172a;\n  font-weight:900;\n  font-size:14px;\n}\n\n#sv-civic-room select,\n#sv-civic-room textarea,\n#sv-civic-room input{\n  width:100%;\n  border:1px solid #cbd5e1;\n  border-radius:18px;\n  padding:16px;\n  font-family:Arial,Helvetica,sans-serif;\n  font-size:15px;\n  line-height:1.6;\n  color:#0f172a;\n  background:#ffffff;\n  outline:none;\n}\n\n#sv-civic-room textarea{\n  min-height:170px;\n  resize:vertical;\n}\n\n#sv-civic-room select:focus,\n#sv-civic-room textarea:focus,\n#sv-civic-room input:focus{\n  border-color:#6a5cff;\n  box-shadow:0 0 0 4px rgba(106,92,255,.12);\n}\n\n#sv-civic-room .sv-preview{\n  padding:24px;\n  border-radius:26px;\n  background:#0f172a;\n  color:#ffffff;\n}\n\n#sv-civic-room .sv-preview small{\n  display:inline-block;\n  margin-bottom:14px;\n  padding:8px 12px;\n  border-radius:999px;\n  background:rgba(255,255,255,.12);\n  color:#dbe4f0;\n  font-weight:900;\n  letter-spacing:.08em;\n  text-transform:uppercase;\n}\n\n#sv-civic-room .sv-preview h3{\n  margin:0 0 14px;\n  color:#ffffff;\n  font-size:30px;\n  line-height:1.12;\n}\n\n#sv-civic-room .sv-preview p{\n  margin:0;\n  color:#dbe4f0;\n  font-size:16px;\n  line-height:1.75;\n}\n\n#sv-civic-room .sv-generated{\n  margin-top:18px;\n  padding:18px;\n  border-radius:20px;\n  background:rgba(255,255,255,.08);\n  border:1px solid rgba(255,255,255,.14);\n  color:#ffffff;\n  line-height:1.7;\n}\n\n\/* DARK *\/\n#sv-civic-room .sv-dark{\n  margin:90px 0;\n  padding:108px 56px;\n  border-radius:48px;\n  background:\n    radial-gradient(circle at top left,rgba(225,29,72,.20),transparent 36%),\n    radial-gradient(circle at bottom right,rgba(106,92,255,.22),transparent 34%),\n    linear-gradient(135deg,#0f172a 0%,#111827 55%,#312e81 100%);\n  color:#fff;\n  text-align:center;\n  box-shadow:0 36px 100px rgba(15,23,42,.28);\n}\n\n#sv-civic-room .sv-dark h2{\n  max-width:1100px;\n  margin:0 auto 24px;\n  color:#fff;\n  font-size:70px;\n  line-height:.98;\n  letter-spacing:-.06em;\n}\n\n#sv-civic-room .sv-dark p{\n  max-width:880px;\n  margin:0 auto;\n  color:#dbe4f0;\n  font-size:22px;\n  line-height:1.75;\n}\n\n\/* FINAL *\/\n#sv-civic-room .sv-final{\n  margin-top:100px;\n  padding:82px 40px;\n  border-radius:42px;\n  background:\n    radial-gradient(circle at top,rgba(106,92,255,.12),transparent 36%),\n    #f8fafc;\n  border:1px solid #e2e8f0;\n  text-align:center;\n}\n\n#sv-civic-room .sv-final h2{\n  margin:0 0 18px;\n  color:#0f172a;\n  font-size:60px;\n  line-height:1.03;\n  letter-spacing:-.05em;\n}\n\n#sv-civic-room .sv-final p{\n  max-width:820px;\n  margin:0 auto 34px;\n  color:#64748b;\n  font-size:20px;\n  line-height:1.8;\n}\n\n\/* RESPONSIVE *\/\n@media(max-width:1280px){\n  #sv-civic-room h1{\n    font-size:66px;\n  }\n\n  #sv-civic-room .sv-hero-inner,\n  #sv-civic-room .sv-discussion-grid{\n    grid-template-columns:1fr;\n    gap:54px;\n  }\n\n  #sv-civic-room .sv-panel{\n    max-width:980px;\n    margin:0 auto;\n  }\n\n  #sv-civic-room .sv-room-grid{\n    grid-template-columns:repeat(2,1fr);\n  }\n}\n\n@media(max-width:860px){\n  #sv-civic-room .sv-hero-inner{\n    text-align:center;\n  }\n\n  #sv-civic-room .sv-lead,\n  #sv-civic-room .sv-sub{\n    margin-left:auto;\n    margin-right:auto;\n  }\n\n  #sv-civic-room .sv-actions{\n    justify-content:center;\n  }\n\n  #sv-civic-room .sv-mini-grid{\n    grid-template-columns:1fr;\n  }\n\n  #sv-civic-room .sv-dark h2{\n    font-size:48px;\n  }\n}\n\n@media(max-width:760px){\n  #sv-civic-room .sv-wrap{\n    width:100%;\n    padding:0 16px;\n  }\n\n  #sv-civic-room .sv-hero{\n    padding:58px 0 66px;\n  }\n\n  #sv-civic-room .sv-hero::before{\n    inset:18px 12px;\n    border-radius:32px;\n  }\n\n  #sv-civic-room h1{\n    font-size:42px;\n  }\n\n  #sv-civic-room .sv-lead{\n    font-size:19px;\n  }\n\n  #sv-civic-room .sv-sub{\n    font-size:16px;\n  }\n\n  #sv-civic-room .sv-panel,\n  #sv-civic-room .sv-discussion{\n    padding:22px;\n    border-radius:30px;\n  }\n\n  #sv-civic-room .sv-panel-main{\n    padding:24px;\n  }\n\n  #sv-civic-room .sv-panel-main strong{\n    font-size:28px;\n  }\n\n  #sv-civic-room .sv-section-title h2,\n  #sv-civic-room .sv-final h2{\n    font-size:38px;\n  }\n\n  #sv-civic-room .sv-room-grid{\n    grid-template-columns:1fr;\n  }\n\n  #sv-civic-room .sv-dark{\n    padding:76px 22px;\n    margin:70px 0;\n  }\n\n  #sv-civic-room .sv-dark h2{\n    font-size:38px;\n  }\n\n  #sv-civic-room .sv-dark p{\n    font-size:18px;\n  }\n\n  #sv-civic-room .sv-btn{\n    width:100%;\n  }\n}\n<\/style>\n\n<div class=\"sv-wrap\">\n\n  <section class=\"sv-hero\">\n    <div class=\"sv-hero-inner\">\n\n      <div>\n        <div class=\"sv-kicker\">Salle de discussion civique<\/div>\n\n        <h1>\n          \u00c0 l'int\u00e9rieur du s\u00e9rieux<br>\n          conversation civique.\n        <\/h1>\n\n        <p class=\"sv-lead\">\n          Cette pi\u00e8ce est con\u00e7ue pour les signaux, les motifs et l'interpr\u00e9tation r\u00e9fl\u00e9chie.\n        <\/p>\n\n        <p class=\"sv-sub\">\n          Les gens discutent de pression r\u00e9elle, de changement social, d'instabilit\u00e9 professionnelle, de stress du logement, de co\u00fbts \u00e9nerg\u00e9tiques, de confiance publique et de l'orientation future \u2014 non pas comme du bruit, mais comme des signaux civiques structur\u00e9s.\n        <\/p>\n\n        <div class=\"sv-actions\">\n          <a class=\"sv-btn\" href=\"#room-builder\">D\u00e9marrer la discussion<\/a>\n          <a class=\"sv-btn sv-btn-dark\" href=\"\/civic-signals\/\">Retour \u00e0 Civic Signals \u2192<\/a>\n          <a class=\"sv-btn sv-btn-light\" href=\"\/proposals\/\">Aller \u00e0 Propositions \u2192<\/a>\n        <\/div>\n      <\/div>\n\n      <div class=\"sv-panel\">\n        <div class=\"sv-panel-main\">\n          <strong>La discussion n'est pas une r\u00e9action.<\/strong>\n          <span>\n            La pi\u00e8ce aide \u00e0 transformer la pression en interpr\u00e9tation, comparaison et proposition.\n          <\/span>\n        <\/div>\n\n        <div class=\"sv-mini-grid\">\n          <div class=\"sv-mini\">\n            <strong>Signaux<\/strong>\n            <span>Probl\u00e8mes r\u00e9currents qui touchent plus d'une personne.<\/span>\n          <\/div>\n\n          <div class=\"sv-mini\">\n            <strong>Interpr\u00e9tation<\/strong>\n            <span>Ce que le signal signifie pour les personnes et les syst\u00e8mes.<\/span>\n          <\/div>\n\n          <div class=\"sv-mini\">\n            <strong>Proposition<\/strong>\n            <span>Comment une discussion peut mener \u00e0 de meilleurs mod\u00e8les.<\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n  <section class=\"sv-section-title\">\n    <h2>Que se passe-t-il dans la chambre ?<\/h2>\n    <p>\n      La salle n'est pas con\u00e7ue pour des commentaires al\u00e9atoires. Elle est con\u00e7ue pour guider les gens de l'exp\u00e9rience \u00e0 l'interpr\u00e9tation,\nde l'interpr\u00e9tation \u00e0 la comparaison et de la comparaison \u00e0 des propositions possibles.\n    <\/p>\n  <\/section>\n\n  <section class=\"sv-room-grid\">\n\n    <div class=\"sv-room-card\">\n      <div>\n        <div class=\"sv-icon\">\ud83d\udd0e<\/div>\n        <h3>Interpr\u00e9ter le signal<\/h3>\n        <p>\n          Que r\u00e9v\u00e8le cette pression sur la soci\u00e9t\u00e9, les syst\u00e8mes, le comportement ou la confiance ?\n        <\/p>\n      <\/div>\n    <\/div>\n\n    <div class=\"sv-room-card\">\n      <div>\n        <div class=\"sv-icon\">\ud83d\udccc<\/div>\n        <h3>Partager l'impact<\/h3>\n        <p>\n          D\u00e9crivez ce que les gens, les familles, les travailleurs, les entreprises ou les communaut\u00e9s vivent r\u00e9ellement.\n        <\/p>\n      <\/div>\n    <\/div>\n\n    <div class=\"sv-room-card\">\n      <div>\n        <div class=\"sv-icon\">\u2696\ufe0f<\/div>\n        <h3>Comparer les perspectives<\/h3>\n        <p>\n          Rassembler les points de vue personnels, civiques, professionnels et institutionnels.\n        <\/p>\n      <\/div>\n    <\/div>\n\n    <div class=\"sv-room-card\">\n      <div>\n        <div class=\"sv-icon\">\ud83e\udded<\/div>\n        <h3>Passer \u00e0 la proposition<\/h3>\n        <p>\n          Transformer la discussion en mod\u00e8les plus clairs, meilleures r\u00e8gles ou alternatives pratiques.\n        <\/p>\n      <\/div>\n    <\/div>\n\n  <\/section>\n\n  <section class=\"sv-dark\">\n    <h2>\n      Une salle civique devrait r\u00e9duire le bruit.\n    <\/h2>\n\n    <p>\n      Le but n'est pas de gagner une dispute. Le but est de comprendre le signal, d'identifier la pression qui le sous-tend et de permettre une prochaine \u00e9tape constructive.\n    <\/p>\n  <\/section>\n\n  <section id=\"room-builder\" class=\"sv-discussion\">\n\n    <div class=\"sv-section-title\" style=\"margin-bottom:34px;\">\n      <h2>Commencer une contribution structur\u00e9e.<\/h2>\n      <p>\n        Choisissez le type de contribution, r\u00e9digez une d\u00e9claration claire et g\u00e9n\u00e9rez une introduction plus structur\u00e9e.\n      <\/p>\n    <\/div>\n\n    <div class=\"sv-discussion-grid\">\n\n      <div class=\"sv-box\">\n        <h2>Votre contribution<\/h2>\n        <p>\n          Ceci est une premi\u00e8re version de l'outil de construction de discussion. Il aide les gens \u00e0 \u00e9viter les r\u00e9actions vagues et \u00e0 commencer par une contribution civique plus claire.\n        <\/p>\n\n        <label for=\"sv-room-type\">Type de contribution<\/label>\n        <select id=\"sv-room-type\">\n          <option value=\"Interpretation\">Interpr\u00e9tation<\/option>\n          <option value=\"Impact\">Impact<\/option>\n          <option value=\"Comparison\">Comparaison<\/option>\n          <option value=\"Proposal\">Proposition<\/option>\n        <\/select>\n\n        <label for=\"sv-room-signal\">Signal<\/label>\n        <select id=\"sv-room-signal\">\n          <option value=\"Energy prices and instability\">Prix de l'\u00e9nergie et instabilit\u00e9<\/option>\n          <option value=\"Housing pressure\">La pression immobili\u00e8re<\/option>\n          <option value=\"Work instability\">Instabilit\u00e9 de l'emploi<\/option>\n          <option value=\"Public trust\">La confiance du public<\/option>\n          <option value=\"AI and society\">L'IA et la soci\u00e9t\u00e9<\/option>\n          <option value=\"Future uncertainty\">Incertitude future<\/option>\n        <\/select>\n\n        <label for=\"sv-room-text\">Votre d\u00e9claration<\/label>\n        <textarea id=\"sv-room-text\" placeholder=\"\u00c9crivez une observation, une exp\u00e9rience ou une proposition claire...\"><\/textarea>\n\n        <div class=\"sv-actions\" style=\"margin-top:18px;\">\n          <button class=\"sv-btn\" id=\"sv-room-build\" type=\"button\">Ouvrir structur\u00e9 \u2192<\/button>\n        <\/div>\n      <\/div>\n\n      <div class=\"sv-preview\">\n        <small>Ouverture structur\u00e9e<\/small>\n        <h3 id=\"sv-room-preview-title\">Interpr\u00e9tation \u2192 Prix de l'\u00e9nergie et instabilit\u00e9<\/h3>\n\n        <p>\n          Cet aper\u00e7u permet de clarifier la discussion avant sa soumission ou son transfert dans une proposition.\n        <\/p>\n\n        <div class=\"sv-generated\" id=\"sv-room-generated\">\n          \u201cJe voudrais apporter une interpr\u00e9tation sur les prix de l'\u00e9nergie et l'instabilit\u00e9. Mon observation principale est que ce signal affecte la confiance, la planification et le comportement social.\u201d\n        <\/div>\n\n        <div class=\"sv-actions\" style=\"margin-top:20px;\">\n          <button class=\"sv-btn sv-btn-light\" id=\"sv-room-copy\" type=\"button\">Copier le texte d'ouverture \u2192<\/button>\n        <\/div>\n\n        <p id=\"sv-room-note\" style=\"margin-top:14px;font-size:14px;color:#cbd5e1;\">\n          Vous pouvez copier cette introduction et l'utiliser dans la discussion, un formulaire ou une proposition future.\n        <\/p>\n      <\/div>\n\n    <\/div>\n\n  <\/section>\n\n  <section class=\"sv-final\">\n    <h2>\n      De la discussion \u00e0 la proposition.\n    <\/h2>\n\n    <p>\n      La Salle de Discussion Civique est le pont entre les Signaux Civiques et les Propositions.\nElle aide \u00e0 transformer la pression sociale en intelligence publique structur\u00e9e.\n    <\/p>\n\n    <div class=\"sv-actions\">\n      <a class=\"sv-btn\" href=\"\/proposals\/\">Propositions ouvertes \u2192<\/a>\n      <a class=\"sv-btn sv-btn-dark\" href=\"\/civic-signals\/\">Retour \u00e0 Civic Signals \u2192<\/a>\n      <a class=\"sv-btn sv-btn-light\" href=\"\/open-conversation\/\">Ouvrir la conversation<\/a>\n    <\/div>\n  <\/section>\n\n<\/div>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\",function(){\n  var root=document.getElementById(\"sv-civic-room\");\n  if(!root){return;}\n\n  var typeEl=root.querySelector(\"#sv-room-type\");\n  var signalEl=root.querySelector(\"#sv-room-signal\");\n  var textEl=root.querySelector(\"#sv-room-text\");\n  var titleEl=root.querySelector(\"#sv-room-preview-title\");\n  var generatedEl=root.querySelector(\"#sv-room-generated\");\n  var buildBtn=root.querySelector(\"#sv-room-build\");\n  var copyBtn=root.querySelector(\"#sv-room-copy\");\n  var noteEl=root.querySelector(\"#sv-room-note\");\n\n  function updatePreview(){\n    var type=typeEl ? typeEl.value : \"Interpretation\";\n    var signal=signalEl ? signalEl.value : \"Energy prices and instability\";\n    var text=textEl && textEl.value.trim() ? textEl.value.trim() : \"this signal affects trust, planning and social behavior\";\n\n    if(titleEl){\n      titleEl.textContent=type+\" \u2192 \"+signal;\n    }\n\n    if(generatedEl){\n      generatedEl.textContent=\"\u201cI would like to contribute a \"+type.toLowerCase()+\" about \"+signal.toLowerCase()+\". My main observation is that \"+text+\".\u201d\";\n    }\n  }\n\n  if(typeEl){typeEl.addEventListener(\"change\",updatePreview);}\n  if(signalEl){signalEl.addEventListener(\"change\",updatePreview);}\n  if(textEl){textEl.addEventListener(\"input\",updatePreview);}\n\n  if(buildBtn){\n    buildBtn.addEventListener(\"click\",function(){\n      updatePreview();\n      var preview=root.querySelector(\".sv-preview\");\n      if(preview){\n        preview.scrollIntoView({behavior:\"smooth\",block:\"center\"});\n      }\n    });\n  }\n\n  if(copyBtn){\n    copyBtn.addEventListener(\"click\",function(){\n      updatePreview();\n      var text=generatedEl ? generatedEl.textContent : \"\";\n\n      if(navigator.clipboard && navigator.clipboard.writeText){\n        navigator.clipboard.writeText(text).then(function(){\n          if(noteEl){noteEl.textContent=\"Copied. You can now paste it into a form, comment or proposal.\";}\n        }).catch(function(){\n          if(noteEl){noteEl.textContent=\"Copy not available. Select the text manually.\";}\n        });\n      }else{\n        if(noteEl){noteEl.textContent=\"Copy not available. Select the text manually.\";}\n      }\n    });\n  }\n\n  updatePreview();\n});\n<\/script>\n\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Civic Discussion Room Inside the serious civic conversation. This room is designed for signals, patterns and thoughtful interpretation. People discuss real pressure, social change, work instability, housing stress, energy costs, public trust and future direction \u2014 not as noise, but as structured civic signals. Start discussion \u2192 Back to Civic Signals \u2192 Go to Proposals [&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-1242","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/staging.stadiaorg.com\/fr\/wp-json\/wp\/v2\/pages\/1242","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.stadiaorg.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/staging.stadiaorg.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/staging.stadiaorg.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.stadiaorg.com\/fr\/wp-json\/wp\/v2\/comments?post=1242"}],"version-history":[{"count":7,"href":"https:\/\/staging.stadiaorg.com\/fr\/wp-json\/wp\/v2\/pages\/1242\/revisions"}],"predecessor-version":[{"id":1444,"href":"https:\/\/staging.stadiaorg.com\/fr\/wp-json\/wp\/v2\/pages\/1242\/revisions\/1444"}],"wp:attachment":[{"href":"https:\/\/staging.stadiaorg.com\/fr\/wp-json\/wp\/v2\/media?parent=1242"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}