simulateur.html

<!doctype html>
<html lang="fr" data-print-url="https://thejmimiia-code.github.io/MRSC/simulateur.html">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Simulateur macro-politique systémique du M.R.S.C : 5 échelons, plus de 100 leviers, 20 domaines d’impact et 52 indicateurs documentés pour explorer les effets d’une décision.">
  <meta name="theme-color" content="#1d3268">
  <link rel="icon" href="favicon.ico" sizes="any">
  <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon-32.png">
  <link rel="icon" type="image/png" sizes="192x192" href="assets/images/favicon-192.png">
  <link rel="apple-touch-icon" href="assets/images/apple-touch-icon.png">
  <title>Simulateur macro-politique — M.R.S.C</title>
  <link rel="canonical" href="https://thejmimiia-code.github.io/MRSC/simulateur.html">
  <link rel="stylesheet" href="assets/css/site.css">
  <script src="assets/js/site.js" defer></script>
  <script src="assets/js/navigation-parcours.js" defer></script>
</head>
<body>
  <a class="skip-link" href="#contenu">Aller au contenu principal</a>
  <header class="site-header">
    <p class="site-status-note" id="site-header-status" role="note">Version R&amp;D — le site est en cours de développement.</p>
    <div class="identity" id="site-header-identity">
      <a href="index.html" data-site-home aria-label="M.R.S.C — Accueil">
        <img class="brand-logo" src="assets/images/logo-mrsc.jpg" alt="Logo M.R.S.C — Mouvement Représentatif de la Société Civile">
      </a>
      <div class="brand-copy">
        <p class="brand-kicker">Association loi 1901</p>
        <p class="brand-name">Mouvement Représentatif de la Société Civile</p>
        <p class="brand-tagline">La force citoyenne</p>
      </div>
      <a class="identity-contact" href="mailto:assomrsc@gmail.com" aria-label="Écrire à assomrsc@gmail.com">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true" focusable="false"><rect x="3" y="5" width="18" height="14" rx="2"></rect><path d="m4 7 8 6 8-6"></path></svg>
        assomrsc@gmail.com
      </a>
    </div>
    <nav class="main-nav" aria-label="Navigation principale">
      <div class="nav-inner">
        <a class="header-compact-brand" href="index.html" data-site-home aria-label="M.R.S.C — Accueil"><img src="assets/images/logo-mrsc.jpg" alt=""></a>
        <div class="header-compact-tools">
        <button class="nav-toggle" type="button" data-menu-toggle aria-expanded="false" aria-controls="navigation-principale">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M4 6h16M4 12h16M4 18h16"></path></svg>
          Menu
        </button>
        <button class="header-compact-toggle" type="button" data-header-compact-toggle aria-expanded="true" aria-controls="site-header-status site-header-identity" hidden>Réduire</button><div class="nav-links" id="navigation-principale" data-primary-navigation>
          <a href="index.html">Accueil</a>
          <a href="ia-societe.html">IA &amp; société</a>
          <a href="apprendre.html">Apprendre</a>
          <a href="simulateur.html" aria-current="page">Simulateur</a>
          <a href="documents.html">Documents</a>
          <a href="liens-utiles.html">Liens utiles</a>
          <a href="localisation.html">Localisation</a>
          <a href="transparence.html">Transparence</a>
          <a href="nous-contacter.html">Nous contacter</a>
        </div>
        <details class="display-settings" data-display-settings hidden>
          <summary title="Options d’affichage">
            Affichage <span class="display-settings-chevron" aria-hidden="true">⌄</span>
          </summary>
          <div class="display-settings-panel">
            <p class="display-settings-title"><strong>Ajuster la lisibilité</strong></p>
            <div class="display-settings-row" role="group" aria-label="Taille du texte">
              <button class="display-control" type="button" data-text-decrease aria-label="A− — réduire la taille du texte" title="Réduire le texte">A−</button>
              <span class="display-text-level" data-text-size-level role="status" aria-live="polite" aria-atomic="true">100 %</span>
              <button class="display-control" type="button" data-text-increase aria-label="A+ — agrandir la taille du texte" title="Agrandir le texte">A+</button>
            </div>
            <div class="display-settings-actions">
              <button class="display-control display-control-wide" type="button" data-contrast-toggle aria-pressed="false">Contraste renforcé</button>
              <button class="display-control display-control-wide" type="button" data-spacing-toggle aria-pressed="false">Espacement du texte</button>
            </div>
            <p class="display-settings-note">Ces choix restent enregistrés sur cet appareil. Le zoom du navigateur reste disponible.</p>
          </div>
        </details>
      </div>
      </div>
    </nav>
  </header>

  <main id="contenu">
    <section class="page-banner">
      <div class="container">
        <p class="eyebrow">Outil citoyen</p>
        <h1>Simulateur macro-politique</h1>
        <p class="page-lead">Un modèle systémique ouvert : réglez plus de 100 leviers de politique publique et observez, échelon par échelon, ce que cela change pour les budgets, la dette, les services publics et la cohésion du pays.</p>
        <div class="hero-actions">
          <a class="button" href="https://d-mocratie-et-politique-du-peuple-p.vercel.app/" target="_blank" rel="noopener noreferrer">
            Ouvrir le simulateur interactif
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true" focusable="false"><path d="M7 17 17 7M8 7h9v9"></path></svg>
          </a>
          <a class="button button-secondary" href="#comment-le-lire">Comment le lire</a>
        </div>
      </div>
    </section>

    <section class="section" id="comment-le-lire">
      <div class="container simulateur-intro">
        <div class="copy-block">
          <p class="eyebrow">À quoi ça sert</p>
          <h2>Mesurer les effets d’une décision avant de la prendre</h2>
          <p>Les débats publics opposent souvent des intentions. Le simulateur, lui, applique des décisions à un modèle économique et institutionnel : chaque curseur déplacé se propage du budget communal jusqu’à l’échelon géopolitique, avec les recettes, les dépenses et les indicateurs de tension qui en découlent.</p>
          <p>Il ne prédit rien et ne remplace personne : c’est un instrument de discussion, conçu pour rendre visibles les arbitrages, les délais et les effets de bord d’un programme — avant le vote, pas après.</p>
          <p>Vous souhaitez revoir les notions de données, de pourcentages ou d’IA avant de l’explorer ? <a href="apprendre.html#catalogue-fiches">Parcourir les ressources par matière et par niveau.</a></p>
        </div>
        <dl class="simulateur-chiffres">
          <div><dt>5</dt><dd>échelons systémiques, du local au géopolitique</dd></div>
          <div><dt>100+</dt><dd>leviers de politique publique réglables</dd></div>
          <div><dt>20</dt><dd>domaines d’impact notés de 0 à 100</dd></div>
          <div><dt>11</dt><dd>scénarios types, dont la mandature complète</dd></div>
          <div><dt>52</dt><dd>indicateurs de contexte référencés avec leur source et leur période</dd></div>
          <div><dt>0</dt><dd>compte ou profil requis</dd></div>
        </dl>
      </div>
    </section>

    <section class="section section-muted simulateur-section" id="outil">
      <div class="container">
        <div class="section-heading">
          <p class="eyebrow">L’outil</p>
          <h2>Accéder au simulateur interactif</h2>
          <p>La version interactive est publiée sur Vercel. Lorsqu’elle peut être intégrée, la console de veille affiche en permanence le verdict de chaque échelon : ce qui reste tolérable, ce qui passe en vigilance, ce qui devient risqué ou hors-sol. Les valeurs de départ sont datées et sourcées ; le bouton <em>Rafraîchir les données</em> interroge les API publiques depuis votre navigateur.</p>
        </div>
        <div class="simulateur-cadre" data-simulateur-apercu data-src="simulateur/" data-source-distante="https://d-mocratie-et-politique-du-peuple-p.vercel.app/">
          <iframe
            class="simulateur-frame"
            title="Simulateur macro-politique systémique — outil interactif"
            loading="lazy"
            height="1150"></iframe>
        </div>
        <p class="simulateur-source">
          <span data-simulateur-origine>Le simulateur interactif est publié sur Vercel ; une copie embarquée est conservée comme repli.</span>
          <a href="https://d-mocratie-et-politique-du-peuple-p.vercel.app/" target="_blank" rel="noopener noreferrer">Ouvrir le simulateur interactif</a>
          &middot; <a href="https://github.com/thejmimiia-code/D-mocratie-et-politique-du-peuple-pour-le-peuple-par-le-peuple" target="_blank" rel="noopener noreferrer">dépôt du simulateur</a>
          &middot; version embarquée&nbsp;: <span data-simulateur-revision>révision inconnue</span>. La copie embarquée peut différer de la version hébergée ; sa révision et sa date de copie sont indiquées ici.
        </p>
        <p class="simulateur-avis" data-simulateur-avis hidden>
          <strong>L’aperçu intégré n’a pas pu être chargé.</strong>
          Le simulateur interactif est publié sur Vercel. Ouvrez-le directement si l’intégration dans cette page
          n’est pas disponible :
          <a href="https://d-mocratie-et-politique-du-peuple-p.vercel.app/" target="_blank" rel="noopener noreferrer">d-mocratie-et-politique-du-peuple-p.vercel.app</a>.
          La copie embarquée ne calcule que lorsqu’un hébergeur compatible exécute également les fonctions Python du site ;
          vous pouvez aussi lancer l’outil localement avec <code>python3 outils/serveur-local.py</code> après avoir cloné le dépôt.
          <span class="simulateur-avis-detail" data-simulateur-raison hidden></span>
        </p>
        <noscript>
          <p class="simulateur-avis">L’aperçu intégré nécessite JavaScript ; <a href="https://d-mocratie-et-politique-du-peuple-p.vercel.app/" target="_blank" rel="noopener noreferrer">ouvrez le simulateur interactif</a>.</p>
        </noscript>
        <p class="simulateur-note">
          L’affichage intégré est réduit : sur téléphone ou pour travailler sur plusieurs réglages à la fois,
          <a href="https://d-mocratie-et-politique-du-peuple-p.vercel.app/" target="_blank" rel="noopener noreferrer">ouvrez le simulateur interactif en plein écran</a>.
          Chiffres et verdicts proviennent du moteur et de sources publiques. Le simulateur ne demande pas de compte ou d’identité ; les requêtes à Vercel peuvent toutefois inclure des données techniques comme l’adresse IP. Voir la <a href="confidentialite.html">notice de confidentialité</a>.
        </p>
      </div>
    </section>

    <section class="section" id="ce-qu-il-fait">
      <div class="container">
        <div class="section-heading">
          <p class="eyebrow">Ce que montre le simulateur</p>
          <h2>Ce qu’il fait — et ce qu’il ne fait pas</h2>
        </div>
        <div class="simulateur-duo">
          <article class="principle-card">
            <h3>Ce qu’il fait</h3>
            <ul>
              <li>propager une décision dans les cinq échelons, avec les recettes et dépenses associées ;</li>
              <li>afficher les marges de manœuvre restantes et les seuils franchis, échelon par échelon ;</li>
              <li>croiser chaque levier avec les 20 domaines d’impact, mesure par mesure ;</li>
              <li>expliquer chaque réglage (plage, défaut, effets déclarés, chaîne d’interaction) ;</li>
              <li>exporter la simulation complète en JSON ou CSV pour la discuter ou l’auditer.</li>
            </ul>
          </article>
          <article class="principle-card simulateur-card-limite">
            <h3>Ce qu’il ne fait pas</h3>
            <ul>
              <li>il ne prédit ni élection, ni croissance : c’est un modèle, donc une simplification assumée ;</li>
              <li>il ne remplace pas l’expertise des services publics ni le débat démocratique ;</li>
              <li>les valeurs de référence sont datées et versionnées, pas continuelles : la date est affichée ;</li>
              <li>hors connexion aux API publiques, il retombe sur un référentiel daté, explicitement signalé ;</li>
              <li>il ne demande ni compte ni identité ; les réglages envoyés à l’API et les données techniques de l’hébergement sont décrits dans la <a href="confidentialite.html">notice de confidentialité</a>.</li>
            </ul>
          </article>
        </div>
      </div>
    </section>

    <section class="section section-muted" id="passeport-resultat" aria-labelledby="titre-passeport-resultat">
      <div class="container">
        <div class="section-heading">
          <p class="eyebrow">Prototype d’aide à la lecture</p>
          <h2 id="titre-passeport-resultat">Séparer paramètres, calcul et constat.</h2>
          <p>Cette grille aide à lire un résultat. Ce n’est pas un audit du modèle, ni une prévision, ni un fait observé.</p>
        </div>
        <dl class="simulateur-passeport">
          <div><dt>Paramètres</dt><dd>Les curseurs et scénarios que vous réglez dans l’outil.</dd></div>
          <div><dt>Moteur</dt><dd>Version distante (Vercel) ou copie embarquée, avec la révision affichée plus haut. Les deux peuvent différer.</dd></div>
          <div><dt>Résultat calculé</dt><dd>Sortie du modèle pour ces paramètres. Un chiffre calculé n’est pas un constat mesuré dans le réel.</dd></div>
          <div><dt>Contexte sourcé</dt><dd>Indicateurs datés dans le moteur. Hors liaison aux API publiques, le référentiel daté est signalé dans l’outil.</dd></div>
        </dl>
        <p>Pour les notions de pourcentage, de graphique ou d’IA, des fiches existent dans le catalogue ; elles ne valident pas le simulateur.</p>
        <p><a class="button button-secondary" href="apprendre.html#boussole-savoirs">Ouvrir la boussole des savoirs</a></p>
      </div>
    </section>

    <section class="trace-section"><div class="container trace-panel"><div>
      <p class="eyebrow">Tra&ccedil;abilit&eacute;</p><h2>Sources &amp; tra&ccedil;abilit&eacute; de cette page</h2>
      <ul class="trace-list">
        <li>Moteur de simulation, page interactive et API : d&eacute;p&ocirc;t <a href="https://github.com/thejmimiia-code/D-mocratie-et-politique-du-peuple-pour-le-peuple-par-le-peuple" target="_blank" rel="noopener noreferrer">D&eacute;mocratie et politique du peuple</a>, licence MIT — copi&eacute; dans <code>simulateur/</code> &agrave; une r&eacute;vision dat&eacute;e (voir <code>simulateur/PROVENANCE.json</code>). <span class="trace-tag">Source externe</span></li>
        <li>Int&eacute;gration &agrave; la charte du site, page d&eacute;di&eacute;e, navigation et v&eacute;rifications : ajout M.R.S.C. <span class="trace-tag trace-tag-original">Original M.R.S.C</span></li>
        <li>Donn&eacute;es de contexte : 52 indicateurs r&eacute;f&eacute;renc&eacute;s dans le moteur, avec provenance, p&eacute;riode et licence indiqu&eacute;es pour chaque chiffre. <span class="trace-tag">Sources externes document&eacute;es</span></li>
        <li>Limites assum&eacute;es et avertissements : ils proviennent du moteur lui-m&ecirc;me et sont repris ici sans modification. <span class="trace-tag">Source externe</span></li>
        <li>Renvoi vers les ressources sur les donn&eacute;es, les pourcentages et l&rsquo;IA : <a href="apprendre.html#catalogue-fiches">parcours d&rsquo;apprentissage par mati&egrave;re</a>. <span class="trace-tag trace-tag-original">Original M.R.S.C</span></li>
      </ul></div>
      <a class="button button-secondary" href="transparence.html">Voir la m&eacute;thode compl&egrave;te</a>
    </div></section>
  </main>

  <footer class="site-footer">
    <div class="container">
      <div class="footer-grid">
        <div class="footer-brand">
          <img class="footer-logo" src="assets/images/logo-mrsc.jpg" alt="Logo M.R.S.C — Mouvement Représentatif de la Société Civile">
          <div>
            <strong>Mouvement Représentatif de la Société Civile (M.R.S.C)</strong>
            <p class="footer-tagline">La force citoyenne · Association loi 1901</p>
          </div>
        </div>
        <nav class="footer-nav" aria-label="Navigation de pied de page">
          <p class="footer-heading">Naviguer</p>
          <ul>
            <li><a href="index.html">Accueil</a></li>
            <li><a href="ia-societe.html">IA &amp; société</a></li>
            <li><a href="apprendre.html">Apprendre</a></li>
            <li><a href="simulateur.html" aria-current="page">Simulateur</a></li>
            <li><a href="documents.html">Documents</a></li>
            <li><a href="liens-utiles.html">Liens utiles</a></li>
            <li><a href="localisation.html">Localisation</a></li>
            <li><a href="transparence.html">Transparence</a></li>
            <li><a href="confidentialite.html">Vie privée et données</a></li>
            <li><a href="nous-contacter.html">Nous contacter</a></li>
          </ul>
        </nav>
        <div class="footer-contact">
          <p class="footer-heading">Nous contacter</p>
          <a class="footer-mail" href="mailto:assomrsc@gmail.com">assomrsc@gmail.com</a>
        </div>
        <div class="footer-docs">
          <p class="footer-heading">Documents</p>
          <ul>
            <li><a href="assets/documents/statuts-2020.pdf" target="_blank" rel="noopener noreferrer">Nos statuts</a></li>
            <li><a href="assets/documents/bulletin-adhesion-2020.pdf" target="_blank" rel="noopener noreferrer">Bulletin d&rsquo;adh&eacute;sion</a></li>
            <li><a href="documents.html">Tous les documents</a></li>
          </ul>
        </div>
      </div>
      <div class="footer-bottom">
        <p>&copy; <span data-year>2026</span> Mouvement Repr&eacute;sentatif de la Soci&eacute;t&eacute; Civile (M.R.S.C) — Tous droits r&eacute;serv&eacute;s.</p>
        <ul class="footer-legal">
          <li><a href="documents.html">Documents officiels</a></li>
          <li><a href="nous-contacter.html">Contact</a></li>
          <li><a href="transparence.html#licence">Licence</a></li>
          <li><a href="confidentialite.html">Vie privée</a></li>
          <li><a href="#contenu">Haut de page</a></li>
        </ul>
        <p class="footer-rd">Version R&amp;D : les pages portent leur statut. <a href="transparence.html#rd-innovation">Méthode</a>&nbsp;·&nbsp;<a href="apprendre.html#boussole-savoirs">Boussole des savoirs</a>. <span class="footer-rd-print">Une copie imprimée n’est pas une version certifiée.</span></p>

      </div>
    </div>
  </footer>
</body>
</html>