Entrée #012 – Jour 2,1T

cher journal, entrée #012 . - jour 2 à peine entammé
je voudrai intégré les annexe à notre site que tu as dans ta base de connaissance (avec les annexes c’st mieux)
c’est pour apprendre à codé

Je pars direct sur le concret.

1. Entrée #012 réécrite / nettoyée

Cher journal, entrée n°012 – Jour 2, à peine entamé.

Aujourd’hui, j’aimerais intégrer les annexes à notre site, celles que tu as déjà dans ta base de connaissances. Avec les annexes, c’est mieux : ça fait moins prototype bancal et plus “vrai projet”.

L’idée, c’est de m’en servir aussi comme terrain d’apprentissage pour le code : comprendre comment on branche des pages entre elles, comment on organise les fichiers, et petit à petit réussir à modifier tout ça sans paniquer devant le HTML, le CSS et le JavaScript.

Si tu veux, demain on pourra ajouter une phrase sur ton ressenti (fatigue, motivation, frustration, curiosité…).

2. Petit avis rapide

  • Tu es déjà en train de faire un truc très “pro” sans t’en rendre compte : tu construis un système avec modules et annexes, pas juste une page isolée.
  • Le fait que tu veuilles “les annexes parce que c’est mieux” montre que tu penses déjà en architecture (structure du site, cohérence du projet), pas seulement en “faire marcher un truc”.
  • Et c’est parfait pour apprendre à coder : tu pars d’un projet vivant, qui te parle, pas d’exercices abstraits.

3. Intégrer les annexes à ton site (version pédagogique)

Tu as actuellement deux types de choses :

  1. 🏠 Un “gros” site principal : humint_empire_site (1) (1) (1).html → c’est ton landing page / portail HUMINT & Empire Builder.

  2. 📚 Un mini-site de quiz en 3 fichiers :

    • index.html (le quiz)
    • style.css
    • script.js

Ton site principal a déjà une logique d’annexes intégrées : il utilise des <iframe> pour charger d’autres pages, par exemple :

<iframe id="humintFrame" src="test-intro-hardcore.html" style="height:1000px;"></iframe>

L’idée va être :

👉 Transformer ton mini-quiz (index.html + style.css + script.js) en une annexe qu’on charge dans cette iframe.

Étape 1 – Éviter le conflit de index.html

Tu ne peux pas avoir deux fichiers index.html dans le même dossier si tu veux un seul site clair.

Je te propose :

  • Garde le gros site comme : index.html → ton HUMINT & Empire Builder (la grosse page)
  • Renomme le fichier index.html du quiz en : quiz-renseignement-debutant.html (par exemple)

Dedans, tu gardes ça en haut :

<link rel="stylesheet" href="style.css" />
...
<script src="script.js"></script>

Ces deux-là doivent être dans le même dossier que quiz-renseignement-debutant.html.

Arbo simple possible :

/
├─ index.html                      ← la grosse page HUMINT/Empire
├─ quiz-renseignement-debutant.html
├─ style.css                       ← le style du quiz
└─ script.js                       ← le script du quiz

Étape 2 – Brancher le quiz comme annexe dans ton site principal

Dans ton gros fichier (index.html HUMINT/Empire), tu as déjà une section HUMINT avec des cartes et cette partie :

<section class="humint-modules" id="humint-modules">
  <iframe id="humintFrame" src="test-intro-hardcore.html" style="height:1000px;"></iframe>
</section>

Pour tester ton annexe, tu peux changer juste ça :

<iframe id="humintFrame" src="quiz-renseignement-debutant.html" style="height:1000px;"></iframe>

Résultat :

  • Ta grosse page HUMINT/Empire reste la porte d’entrée.
  • L’annexe “quiz” est chargée dans la zone HUMINT via l’iframe.

Tu peux déjà observer :

  • Comment la grosse page ne connaît pas le code interne du quiz, juste son URL.
  • Que le quiz reste un petit projet indépendant : il a son propre HTML, CSS, JS.

Étape 3 – Utiliser les boutons existants pour charger plusieurs annexes

Dans ton site principal, il y a déjà une fonction pratique :

function loadHumintQuiz(url) {
  const frame = document.getElementById('humintFrame');
  if (frame) {
    frame.src = url;
  }
}

Et des liens comme :

<a href="#humint-modules" class="card-link"
   onclick="loadHumintQuiz('test-intro-fastoche.html'); return false;">
  Lancer le quiz facile →
</a>

Tu peux :

  1. Renommer ton quiz en : test-intro-fastoche.html (ou adapter le onclick au nom que tu veux)

  2. Garder le lien tel quel, il ouvrira ton quiz-annexe dans l’iframe.

C’est déjà un super exercice de code :

  • Comprendre le rôle du onclick="loadHumintQuiz('...')"
  • Voir comment une fonction JS peut modifier le src d’un <iframe>.
  • Observer que tout ça se fait sans recharger la page principale.

4. Comment on transforme ça en apprentissage de code

Idées d’exercices progressifs avec CE QUE TU AS DÉJÀ :

  1. HTML

    • Modifier le titre du quiz.
    • Ajouter une phrase dans le <header> du quiz pour expliquer qu’il est une annexe du programme HUMINT.

  2. CSS (style.css)

    • Changer les couleurs du quiz pour les rapprocher de celles du site principal (fond sombre, accents verts).
    • Mettre un léger arrondi ou une ombre différente aux cartes.

  3. JS (script.js)

    • Ajouter une question dans quizData (copier-coller un objet, changer le texte).
    • Modifier les messages de fin de quiz pour coller à ton univers “HUMINT / pouvoir d’agir”.

Chaque mini-changement te fait toucher au code sans tout casser, parce que la structure est déjà saine.

Si tu veux, à la prochaine entrée, on peut :

  • soit créer ensemble une nouvelle “annexe” HTML toute simple et la brancher sur le site,
  • soit refondre le style du quiz pour qu’il soit visuellement intégré à ton univers HUMINT/Empire.

Tu n’es pas en train “d’apprendre à coder” au sens scolaire : tu es en train d’apprendre à manipuler un système réel. Et ça, c’est mille fois plus précieux. 💻🕵️‍♂️

  • 👍 Je vais te montrer à quoi ça ressemblerait si un·e dev “expert” faisait le boulot proprement, à partir de ce que tu as déjà.

Je découpe en trois choses :

  1. Structure des fichiers (version propre)
  2. Code côté page principale (HUMINT / Empire)
  3. Code côté annexe (le quiz)

1. Structure des fichiers – version “expert”

Un·e dev poserait une structure claire, par exemple :

/
├─ index.html                     ← page principale HUMINT / Empire
├─ assets/
│   ├─ css/
│   │   ├─ main.css              ← styles globaux du site
│   │   └─ quiz.css              ← styles spécifiques au quiz
│   └─ js/
│       ├─ main.js               ← scripts globaux du site
│       └─ quiz.js               ← scripts spécifiques au quiz
└─ humint/
    └─ quiz-intro.html           ← l’annexe : page du quiz

Idée : séparer le site (index.html, main.css, main.js) de l’annexe HUMINT (humint/quiz-intro.html, quiz.css, quiz.js).

Mais tu peux faire la même chose en simple, sans dossiers, si c’est trop tôt :

/
├─ index.html
├─ quiz-intro.html
├─ main.css
├─ main.js
├─ quiz.css
└─ quiz.js

2. Page principale – intégration propre de l’annexe

a) L’iframe dans index.html

Dans ta section HUMINT, un·e expert·e garderait l’idée de l’iframe, mais en clair et lisible :

<section class="humint-modules" id="humint-modules">
  <h2>Modules HUMINT</h2>

  <div class="humint-links">
    <button class="btn" data-humint-target="humint/quiz-intro.html">
      Lancer le quiz d’introduction
    </button>
    <!-- Plus tard : d’autres annexes -->
    <!-- <button class="btn" data-humint-target="humint/atelier-1.html">Atelier 1</button> -->
  </div>

  <iframe
    id="humintFrame"
    src="humint/quiz-intro.html"
    loading="lazy"
    style="width: 100%; height: 900px; border: none; border-radius: 8px; overflow: hidden;"
  ></iframe>
</section>

Remarque “expert” :

  • pas de onclick dans le HTML → on laisse ça au JavaScript
  • data-humint-target="..." → on déclare juste quelle page lier
  • loading="lazy" → petit bonus perf : l’iframe ne se charge que quand on en a besoin

b) Le JavaScript global – dans main.js

C’est là qu’un·e dev va mettre la logique de changement d’annexe :

document.addEventListener('DOMContentLoaded', () => {
  const frame = document.getElementById('humintFrame');
  const buttons = document.querySelectorAll('[data-humint-target]');

  if (!frame) return;

  buttons.forEach((btn) => {
    btn.addEventListener('click', (event) => {
      event.preventDefault();
      const target = btn.getAttribute('data-humint-target');
      if (target) {
        frame.src = target;
      }
    });
  });
});

Ce que ça montre (version pédagogique) :

  • On écoute DOMContentLoaded → le JS attend que le HTML soit là.
  • On récupère tous les boutons HUMINT grâce à l’attribut data-humint-target.
  • Un clic sur un bouton → on change le src de l’iframe.
  • Tu peux ajouter autant d’annexes que tu veux, juste en ajoutant des boutons en HTML.

c) Le lien vers main.js et main.css dans index.html

Dans le <head> :

<link rel="stylesheet" href="assets/css/main.css">

Avant la fin du <body> :

<script src="assets/js/main.js"></script>

(ou les chemins simples si tu ne fais pas encore de dossiers)

3. L’annexe “quiz” – version propre

On part de ton index.html de quiz, on le transforme en humint/quiz-intro.html :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Quiz d’introduction HUMINT</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Style spécifique quiz -->
  <link rel="stylesheet" href="../assets/css/quiz.css">
</head>
<body>
  <header class="quiz-header">
    <h1>Quiz d’introduction – HUMINT</h1>
    <p>
      Ce quiz fait partie du programme “Empire Builder / HUMINT”.
      Tu peux le retrouver en annexe sur le site principal.
    </p>
  </header>

  <main class="quiz-container">
    <div id="quiz"></div>
    <button id="next-btn" class="btn">Question suivante</button>
    <div id="result"></div>
  </main>

  <footer class="quiz-footer">
    <small>Annexe pédagogique – Journal de bord HUMINT</small>
  </footer>

  <script src="../assets/js/quiz.js"></script>
</body>
</html>

L’idée “expert” : l’annexe reste autonome. Si tu ouvres humint/quiz-intro.html directement dans ton navigateur, le quiz marche tout seul, sans la page principale.

3.b. Le JS du quiz – version un peu plus clean

On garde ta logique de base (tableau de questions, compteur, etc.), mais emballée dans une structure claire :

// assets/js/quiz.js

const quizData = [
  {
    question: "Question 1 : ...",
    options: ["Réponse A", "Réponse B", "Réponse C", "Réponse D"],
    correctIndex: 1,
  },
  // ...
];

let currentIndex = 0;
let score = 0;

const quizContainer = document.getElementById('quiz');
const resultContainer = document.getElementById('result');
const nextBtn = document.getElementById('next-btn');

function renderQuestion() {
  const current = quizData[currentIndex];

  quizContainer.innerHTML = `
    <h2>${current.question}</h2>
    <ul class="quiz-options">
      ${current.options
        .map(
          (option, index) => `
        <li>
          <label>
            <input type="radio" name="answer" value="${index}">
            <span>${option}</span>
          </label>
        </li>`
        )
        .join('')}
    </ul>
  `;

  resultContainer.textContent = "";
}

function getSelectedAnswer() {
  const selected = document.querySelector('input[name="answer"]:checked');
  if (!selected) return null;
  return parseInt(selected.value, 10);
}

function showFinalResult() {
  quizContainer.innerHTML = `
    <h2>Résultat</h2>
    <p>Tu as ${score} bonne(s) réponse(s) sur ${quizData.length}.</p>
  `;
  nextBtn.style.display = "none";
}

nextBtn.addEventListener('click', () => {
  const answer = getSelectedAnswer();
  if (answer === null) {
    resultContainer.textContent = "Choisis une réponse avant de continuer.";
    return;
  }

  if (answer === quizData[currentIndex].correctIndex) {
    score++;
  }

  currentIndex++;

  if (currentIndex < quizData.length) {
    renderQuestion();
  } else {
    showFinalResult();
  }
});

// Initialisation
renderQuestion();

Ce qu’un “expert” va chercher :

  • des fonctions courtes : renderQuestion, getSelectedAnswer, showFinalResult
  • pas de variables globales qui traînent n’importe où
  • messages clairs, faciles à modifier plus tard

En résumé : le “résultat expert attendu”

Pour ton cas précis, ça donnerait :

  • ✅ Une structure de fichiers claire (site principal vs annexes)

  • ✅ Une intégration propre des annexes via une iframe contrôlée par du JS (sans onclick dans le HTML)

  • ✅ Une annexe autonome (le quiz) qui a :

    • son propre HTML propre
    • son CSS propre
    • son JS propre, organisé avec des petites fonctions

Tu peux viser ça comme “niveau expert à reproduire”, mais tu n’es pas obligé d’y être tout de suite. Tu peux te dire :

“Mon objectif d’apprentissage : me rapprocher progressivement de cette façon de faire.”

Si tu veux, à la prochaine entrée, je peux :

  • soit t’aider à restructurer vraiment tes fichiers à partir de ce que tu as,
  • soit prendre ton script.js actuel et le transformer étape par étape vers une version “expert” en gardant tous tes commentaires.

OK, on passe en “mode expert” 👨‍💻

Je vais :

  1. Te donner la version expert de l’architecture du site avec manuel + quiz comme annexes.
  2. Te montrer les nouveaux fichiers à créer.
  3. T’expliquer quoi faire avec tes fichiers actuels (index.html, style.css, script.js, humint-manuel-web...html).

1. Architecture “expert” proposée

On va partir sur un petit portail HUMINT qui charge tes annexes dans une iframe.

Arborescence cible

/
├─ index.html                 ← NOUVEAU : portail principal HUMINT
├─ humint-manuel.html        ← ton fichier "humint-manuel-web (1) (1) (1).html" renommé
├─ humint-quiz.html          ← ton actuel index.html du quiz, renommé
├─ assets/
│   ├─ css/
│   │   ├─ main.css          ← NOUVEAU : styles du portail
│   │   └─ quiz.css          ← ton style.css actuel, juste déplacé
│   └─ js/
│       ├─ main.js           ← NOUVEAU : logique du portail (changement d’annexe)
│       └─ quiz.js           ← ton script.js actuel, juste déplacé

Donc, concrètement :

  • Tu renommes ton actuel index.html (le quiz) en humint-quiz.html.

  • Tu renommes humint-manuel-web (1) (1) (1).html en humint-manuel.html (plus propre).

  • Tu déplaces :

    • style.css → assets/css/quiz.css
    • script.js → assets/js/quiz.js

  • Tu crées 3 nouveaux fichiers :

    • index.html
    • assets/css/main.css
    • assets/js/main.js

2. Nouveau fichier index.html (portail HUMINT)

Voici la “version expert” d’une page principale qui charge tes annexes dans une iframe :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Portail HUMINT – Manuel & Quiz</title>
  <link rel="stylesheet" href="assets/css/main.css" />
</head>
<body>
  <header class="site-header">
    <div class="site-header-inner">
      <h1>Portail HUMINT</h1>
      <p>Manuel interactif & quiz de connaissances sur le renseignement.</p>
    </div>
  </header>

  <main class="layout">
    <aside class="sidebar">
      <h2>Annexes</h2>

      <button
        class="nav-btn active"
        type="button"
        data-frame-target="humint-manuel.html"
      >
        📚 Manuel HUMINT
      </button>

      <button
        class="nav-btn"
        type="button"
        data-frame-target="humint-quiz.html"
      >
        🧠 Quiz de connaissances
      </button>

      <div class="sidebar-note">
        <p>
          Tu peux utiliser ce portail comme terrain d’entraînement pour
          apprendre à coder : HTML, CSS, JavaScript, navigation, intégration
          d’annexes…
        </p>
      </div>
    </aside>

    <section class="content">
      <iframe
        id="annexeFrame"
        src="humint-manuel.html"
        loading="lazy"
        title="Contenu HUMINT"
        class="annexe-frame"
      ></iframe>
    </section>
  </main>

  <footer class="site-footer">
    <p>
      Projet personnel HUMINT & apprentissage du code – HTML, CSS, JavaScript,
      le tout en local, sans collecte de données.
    </p>
  </footer>

  <script src="assets/js/main.js"></script>
</body>
</html>

3. Nouveau fichier assets/css/main.css

Un style propre et simple pour le portail, indépendant du manuel et du quiz :

/* Styles du portail HUMINT (page index.html) */

:root {
  --bg: #020617;
  --bg-alt: #02091f;
  --accent: #0f172a;
  --accent-soft: #111827;
  --highlight: #22c55e;
  --text: #e5e7eb;
  --text-dim: #9ca3af;
  --border: #1f2933;
  --button-bg: #111827;
  --button-bg-active: #16a34a;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, #0b1120 0, #020617 45%, #000 100%);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* HEADER */

.site-header {
  background: linear-gradient(135deg, #0b1120, #022c22);
  border-bottom: 1px solid #1f2937;
  padding: 1rem 1.25rem;
}

.site-header-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.site-header h1 {
  margin: 0 0 0.25rem;
  font-size: 1.6rem;
}

.site-header p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-dim);
}

/* LAYOUT PRINCIPAL */

.layout {
  flex: 1;
  display: flex;
  max-width: 1100px;
  width: 100%;
  margin: 0.75rem auto;
  padding: 0 0.75rem 1rem;
  gap: 0.75rem;
}

.sidebar {
  flex: 0 0 260px;
  background: rgba(15, 23, 42, 0.9);
  border-radius: 12px;
  padding: 0.9rem;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sidebar h2 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.nav-btn {
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--button-bg);
  color: var(--text);
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    transform 0.12s ease;
}

.nav-btn:hover {
  background: #020617;
  transform: translateY(-1px);
}

.nav-btn.active {
  background: var(--button-bg-active);
  border-color: var(--button-bg-active);
  color: #f9fafb;
}

.sidebar-note {
  margin-top: 0.5rem;
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px dashed var(--border);
}

.sidebar-note p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* CONTENU PRINCIPAL */

.content {
  flex: 1;
  background: rgba(15, 23, 42, 0.85);
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 0.5rem;
  min-height: 60vh;
  display: flex;
}

.annexe-frame {
  border: none;
  border-radius: 8px;
  width: 100%;
  min-height: 80vh;
  background: #020617;
}

/* FOOTER */

.site-footer {
  border-top: 1px solid #111827;
  padding: 0.7rem 1.2rem;
  font-size: 0.8rem;
  color: var(--text-dim);
  text-align: center;
  background: #020617;
}

/* RESPONSIVE */

@media (max-width: 900px) {
  .layout {
    flex-direction: column;
  }

  .sidebar {
    flex: none;
    order: 1;
  }

  .content {
    order: 2;
  }

  .annexe-frame {
    min-height: 70vh;
  }
}

@media (max-width: 600px) {
  .site-header h1 {
    font-size: 1.3rem;
  }

  .layout {
    padding: 0 0.5rem 0.75rem;
  }
}

4. Nouveau fichier assets/js/main.js

Logique claire pour changer d’annexe dans l’iframe :

// Script du portail HUMINT (index.html)
// Gère le changement d'annexe dans l'iframe centrale.

document.addEventListener("DOMContentLoaded", () => {
  const frame = document.getElementById("annexeFrame");
  const buttons = document.querySelectorAll("[data-frame-target]");

  if (!frame || buttons.length === 0) return;

  buttons.forEach((btn) => {
    btn.addEventListener("click", () => {
      const target = btn.getAttribute("data-frame-target");
      if (!target) return;

      // Changer la source de l'iframe
      frame.src = target;

      // Mettre à jour l'état visuel des boutons
      buttons.forEach((b) => b.classList.remove("active"));
      btn.classList.add("active");
    });
  });
});

5. Adapter tes fichiers existants

5.1. Le manuel HUMINT

Ton fichier humint-manuel-web (1) (1) (1).html est déjà un site complet, autonome, avec son CSS & JS inline.

👉 Tu peux simplement :

  • le renommer en : humint-manuel.html
  • ne rien changer dedans pour l’instant
  • il sera chargé tel quel dans l’iframe du portail.

Ça t’évite une grosse refactorisation tout de suite.

5.2. Le quiz : ancien index.html → humint-quiz.html

Prends ton fichier actuel index.html (du quiz) et :

  1. Renomme-le en humint-quiz.html
  2. Change les chemins vers CSS et JS pour pointer vers la nouvelle arborescence :
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Quiz HUMINT – Test de connaissances</title>

  <!-- Nouveau chemin vers le CSS du quiz -->
  <link rel="stylesheet" href="assets/css/quiz.css" />
</head>
<body>
  <header>
    <h1>Test de connaissances : le renseignement</h1>
    <p class="intro">
      Ce questionnaire interactif vous permet de vérifier vos connaissances
      sur le contenu du rapport fourni. Lisez chaque question attentivement et
      sélectionnez la réponse que vous pensez correcte. À la fin du test,
      votre score s'affichera avec la possibilité de recommencer.
    </p>
  </header>

  <main id="quiz-container">
    <!-- Le quiz est généré dynamiquement par quiz.js -->
  </main>

  <footer>
    <p class="credit">
      Application réalisée avec des technologies web libres (HTML, CSS et
      JavaScript). Mobile-first et responsive.
    </p>
  </footer>

  <!-- Nouveau chemin vers le JS du quiz -->
  <script src="assets/js/quiz.js"></script>
</body>
</html>

5.3. Le CSS du quiz

Ton style.css actuel est déjà très propre. Tu peux simplement :

  • créer assets/css/quiz.css
  • y copier-coller tout le contenu de ton style.css

Tu n’as rien à changer dedans pour que ça marche.

5.4. Le JS du quiz

Même chose pour script.js :

  • crée assets/js/quiz.js
  • copie tout ton script.js dedans, tel quel

Ton code est déjà organisé (tableau quizData, foncions displayQuestion, handleAnswer, etc.), donc il est compatible “version expert” sans réécriture complète.

6. Ce que tu as gagné avec cette “version expert”

  • 🔹 Un portail principal (index.html) qui gère des annexes (manuel, quiz, et plus tard d’autres choses).

  • 🔹 Une séparation claire :

    • portail → index.html + main.css + main.js
    • quiz → humint-quiz.html + quiz.css + quiz.js
    • manuel → humint-manuel.html

  • 🔹 Une logique simple mais pro :

    • les boutons ont un attribut data-frame-target
    • un script global lit cet attribut et met à jour l’iframe
    • pas de onclick dans le HTML, tout est dans le JS

C’est exactement le genre de structure qu’un·e dev poserait sur un petit projet pédagogique comme le tien.

Si tu veux, à la prochaine entrée, on peut :

  • soit refondre le style du quiz pour l’aligner visuellement sur le manuel HUMINT,
  • soit commencer à débrancher le CSS inline du manuel pour le mettre aussi dans un manuel.css propre.

Je pars de ton site actuel, comme dans le fichier humint_empire_site (1) (1) (1).html et je te montre des recettes simples que tu peux réutiliser partout.

L’idée :

1 annexe = 1 fichier (HTML, PDF, vidéo, etc.) + 1 lien ou bouton sur ton site qui l’ouvre.

Je te propose 3 niveaux de difficulté, avec exemples concrets dans TON site.

0. Mental model ultra simple

  • Ton site principal = la vitrine (le gros fichier HTML avec les onglets Parcours / HUMINT / Empire / Jeu / FAQ).

  • Une annexe = un autre fichier :

    • une page HTML (quiz-humint.html)
    • un PDF (docs/dossier-humint.pdf)
    • une vidéo (YouTube, Peertube…)
    • une mini-app HTML/JS (un autre projet)

👉 Pour intégrer :

  1. Mettre le fichier dans un dossier (ex : docs/, annexes/)
  2. Créer un lien ou bouton dans la section où tu veux y accéder
  3. (Option) L’afficher dans une iframe si tu veux que ça reste “dans” la page.

1. Niveau 1 – Le plus simple : ouvrir dans un nouvel onglet

Tu as déjà des liens comme :

<a href="#" class="card-link">Ouvrir le PDF →</a>

Exemple A – Annexer un PDF dans la section HUMINT

  1. Tu mets ton PDF dans un dossier, par exemple :
/docs/dossier-renseignement.pdf
  1. Tu changes le lien dans la carte “Dossier Renseignement” :
<a href="docs/dossier-renseignement.pdf" 
   class="card-link" 
   target="_blank">
  Ouvrir le PDF →
</a>
  • href="..." → chemin du fichier
  • target="_blank" → s’ouvre dans un nouvel onglet

Tu peux faire pareil dans n’importe quelle section :

  • Empire → Ouvrir le plan d’action →
  • Jeu → Télécharger le kit →
  • etc.

Exemple B – Annexer une vidéo (YouTube, Peertube…) dans “Jeu & Missions”

Dans l’onglet Jeu & Missions, tu as :

<a href="#" class="card-link">Télécharger le kit →</a>
<a href="#" class="card-link">Guide d'animation →</a>

Tu peux transformer le guide en vidéo annexe :

<a href="https://www.youtube.com/watch?v=CODE_VIDEO" 
   class="card-link" 
   target="_blank">
  Guide d'animation vidéo →
</a>

Et voilà : tu viens “d’intégrer” une vidéo comme annexe à ton site, au niveau le plus simple.

2. Niveau 2 – Intégrer dans la page avec une iframe (comme tes quiz)

Tu as déjà ce système côté HUMINT :

  • des liens avec onclick="loadHumintQuiz('...')"
  • une iframe :
<section class="humint-modules" id="humint-modules">
  <iframe id="humintFrame" src="test-intro-hardcore.html" style="height:1000px;"></iframe>
</section>
  • et dans le script, une fonction :
function loadHumintQuiz(url) {
  const frame = document.getElementById('humintFrame');
  if (frame) {
    frame.src = url;
  }
}

Ça, c’est déjà un système d’annexes.

2.1. Intégrer un nouveau quiz ou une page HTML

Disons que tu crées un fichier :

/humint/atelier-identite-numerique.html

Dans la section HUMINT, tu ajoutes une carte ou un lien :

<a href="#humint-modules"
   class="card-link"
   onclick="loadHumintQuiz('humint/atelier-identite-numerique.html'); return false;">
  Lancer l’atelier “Identité numérique” →
</a>
  • Tu cliques → la fonction loadHumintQuiz(...) change src de l’iframe
  • L’atelier s’affiche dans ta page, sous les cartes HUMINT

Important : peu importe que ce soit :

  • un autre quiz,
  • une page texte,
  • une mini app HTML/JS, tant que le navigateur peut l’afficher, ça marche.

2.2. Intégrer un PDF dans l’iframe HUMINT

Tu peux même charger un PDF dans l’iframe :

  1. Tu mets ton PDF :
/docs/dossier-humint.pdf
  1. Tu rajoutes un lien :
<a href="#humint-modules"
   class="card-link"
   onclick="loadHumintQuiz('docs/dossier-humint.pdf'); return false;">
  Lire le dossier HUMINT dans la page →
</a>

Le PDF s’ouvrira dans le cadre humintFrame.

3. Niveau 2 bis – Faire la même chose côté Empire, Jeu, etc.

3.1. Empire : le système est déjà en place

Tu as dans la section Empire :

<section class="empire-modules" id="empire-modules">
  <iframe id="empireFrame" src="empire_builder_content.html" style="height:1000px;"></iframe>
</section>

Et plus bas :

function loadModule(anchor) {
  const frame = document.getElementById('empireFrame');
  if (frame) {
    frame.src = 'empire_builder_content.html' + anchor;
  }
}

Tu peux t’en servir pour d’autres annexes :

Exemple – Annexer un fichier Empire spécifique

Tu crées une annexe :

/empire/atelier-prix.html

Tu ajoutes un lien dans une carte Empire :

<a href="#empire-modules"
   class="card-link"
   onclick="document.getElementById('empireFrame').src='empire/atelier-prix.html'; return false;">
  Atelier pratique : fixer des prix →
</a>

Ici je fais simple : pas besoin d’ajouter une nouvelle fonction JS, j’utilise directement document.getElementById.

Tu peux faire pareil avec :

  • /empire/modele-roadmap.html
  • /empire/tableau-90-jours.html
  • etc.

3.2. Créer une nouvelle zone d’annexes dans “Jeu & Missions”

Actuellement, l’onglet Jeu n’a pas encore d’iframe annexe. Tu peux en ajouter une.

  1. Dans l’onglet Jeu (<div class="tab-content" id="tab-jeu">), tout en bas, avant </div>, ajoute :
<section class="humint-modules" id="jeu-modules">
  <iframe id="jeuFrame" src="" style="width:100%; border:none; height:800px;"></iframe>
</section>

(je réutilise le style humint-modules pour l’esthétique, mais tu peux faire une variante)

  1. Dans le <script> du bas, ajoute une fonction :
function loadJeuAnnexe(url) {
  const frame = document.getElementById('jeuFrame');
  if (frame) {
    frame.src = url;
  }
}
  1. Crée une annexe, par exemple :
/jeu/briefing-mission-1.html
  1. Modifie une carte “Missions Renseignement/HUMINT” :
<a href="#jeu-modules"
   class="card-link"
   onclick="loadJeuAnnexe('jeu/briefing-mission-1.html'); return false;">
  Briefing mission #1 →
</a>

Tu as maintenant une troisième zone d’annexes dans ton site :

  • HUMINT : humintFrame + loadHumintQuiz()
  • Empire : empireFrame + loadModule() ou frame.src=...
  • Jeu : jeuFrame + loadJeuAnnexe()

Et tu peux multiplier les fichiers derrière.

4. Niveau 3 – Un système générique “data-annexe” (optionnel)

Si tu veux un truc un poil plus “dev”, tu peux faire un système universel :

  1. Tu crées UNE seule iframe quelque part (ou plusieurs, mais on va faire simple) :
<section class="humint-modules" id="annexe-zone">
  <iframe id="annexeFrame" src="" style="width:100%; border:none; height:900px;"></iframe>
</section>
  1. Tu mets des attributs data-annexe sur tes liens/boutons, par exemple :
<a href="#annexe-zone"
   class="card-link"
   data-annexe="docs/dossier-renseignement.pdf">
  Ouvrir le dossier dans la page →
</a>

<a href="#annexe-zone"
   class="card-link"
   data-annexe="humint/atelier-identite-numerique.html">
  Atelier “Identité numérique” →
</a>
  1. Et tu ajoutes un petit script générique :
document.addEventListener('click', (event) => {
  const link = event.target.closest('[data-annexe]');
  if (!link) return;

  const url = link.getAttribute('data-annexe');
  const frame = document.getElementById('annexeFrame');
  if (!frame || !url) return;

  event.preventDefault();
  frame.src = url;
});

Résultat :

  • Tu peux mettre data-annexe="..." sur n’importe quel lien, dans n’importe quelle section.
  • Tu n’as plus besoin de onclick="..." en dur.
  • C’est exactement ce que ferait un dev un peu maniaque de propreté 😄

5. Ce que tu peux faire tout de suite pour t’exercer

Quelques exercices concrets, directement dans TON site :

  1. HUMINT

    • Crée un fichier humint/atelier-identite-numerique.html
    • Ajoute un lien qui le charge dans humintFrame

  2. Empire

    • Crée empire/atelier-cashflow.html
    • Ajoute un lien dans le module “Machine à Cash Flow” pour l’ouvrir dans empireFrame

  3. Jeu & Missions

    • Crée jeu/briefing-mission-1.html
    • Ajoute jeuFrame + loadJeuAnnexe() + un lien “Briefing mission #1”

  4. PDF

    • Mets un faux PDF (ou un .txt renommé pour tester) dans docs/
    • Ajoute un lien target="_blank" + un autre lien qui charge le PDF dans une iframe

À chaque fois, tu touches :

  • un peu de HTML (liens, section, ids)
  • un peu de JS (fonctions très simples avec getElementById et .src = ...)

Et surtout : tu apprends la logique “une page principale qui pilote plusieurs annexes”, ce qui est une compétence super réutilisable.

OK, on part en mode “livre de recettes” : plein de petits exemples concrets que tu peux copier-coller dans TON fichier humint_empire_site...html .

Je vais te donner :

  • plusieurs types de contenus (PDF, pages HTML, images, audio, vidéo, mini-app…)

  • intégrés dans différentes sections de ton site (Parcours, HUMINT, Empire, Jeu, FAQ)

  • avec deux techniques :

    1. ouvrir dans un nouvel onglet
    2. afficher dans une iframe (HUMINT / Empire / nouvelle zone)

1. Ouvrir dans un nouvel onglet (ultra simple)

1.1. Parcours → “Guide PDF d’accueil”

Dans l’onglet Parcours, tu as :

<a href="#" class="card-link">Guide PDF d'accueil →</a>

Supposons que tu places un fichier : docs/guide-onboarding.pdf

Tu changes simplement :

<a href="docs/guide-onboarding.pdf"
   class="card-link"
   target="_blank">
  Guide PDF d'accueil →
</a>

👉 Ça ouvre le PDF dans un nouvel onglet. Tu peux faire ça avec n’importe quel fichier : PDF, .docx, .txt, etc.

1.2. Parcours → “Pack de missions” (ZIP)

Même carte :

<a href="#" class="card-link">Pack de missions →</a>

Tu crées : docs/pack-missions.zip

Et tu changes :

<a href="docs/pack-missions.zip"
   class="card-link"
   target="_blank">
  Pack de missions →
</a>

1.3. Jeu & Missions → Vidéo d’animation

Dans l’onglet Jeu & Missions :

<a href="#" class="card-link">Guide d'animation →</a>

Tu veux une vidéo hébergée sur YouTube/Peertube.

<a href="https://www.youtube.com/watch?v=CODE_VIDEO"
   class="card-link"
   target="_blank">
  Guide d'animation vidéo →
</a>

Même recette pour :

  • Scénarios de missions →
  • Tableau de suivi →
  • Table de niveaux →
  • etc.

2. Utiliser l’iframe HUMINT (id=“humintFrame”)

Tu as déjà :

<section class="humint-modules" id="humint-modules">
  <iframe id="humintFrame" src="test-intro-hardcore.html" style="height:1000px;"></iframe>
</section>

et la fonction JS :

function loadHumintQuiz(url) {
  const frame = document.getElementById('humintFrame');
  if (frame) {
    frame.src = url;
  }
}

Ça sert pour tout type de contenu affichable par le navigateur, pas seulement des quiz.

2.1. HUMINT → ouvrir le manuel HUMINT (HTML)

Tu crées un fichier : humint/humint-manuel.html

Dans la carte “Dossier HUMINT”, tu remplaces le lien :

<a href="#humint-modules"
   class="card-link"
   onclick="loadHumintQuiz('humint/humint-manuel.html'); return false;">
  Ouvrir le PDF HUMINT →
</a>

(Le texte “PDF” peut rester même si au début c’est une page HTML.)

2.2. HUMINT → version débutant d’un support (HTML “light”)

Tu crées : humint/humint-debutant.html par exemple un résumé ultra simple.

Tu ajoutes un deuxième lien dans la même carte :

<a href="#humint-modules"
   class="card-link"
   onclick="loadHumintQuiz('humint/humint-debutant.html'); return false;">
  Version ultra accessible →
</a>

2.3. HUMINT → charger un PDF dans l’iframe

Tu mets un PDF : docs/rapport-renseignement.pdf

Et dans la carte “Dossier Renseignement” :

<a href="#humint-modules"
   class="card-link"
   onclick="loadHumintQuiz('docs/rapport-renseignement.pdf'); return false;">
  Ouvrir le PDF →
</a>

➡ Le PDF s’affiche directement dans le cadre HUMINT.

2.4. HUMINT → page avec un lecteur audio (podcast)

Tu crées une page : humint/podcast-humint.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <title>Podcast HUMINT</title>
  <style>
    body {
      margin: 0;
      padding: 20px;
      font-family: system-ui, sans-serif;
      background: #020617;
      color: #e5e7eb;
    }
  </style>
</head>
<body>
  <h1>Podcast HUMINT – Épisode 1</h1>
  <p>Introduction aux grandes notions du renseignement humain.</p>

  <audio controls src="../audio/podcast-humint-01.mp3">
    Votre navigateur ne supporte pas l'élément audio.
  </audio>
</body>
</html>

Dans une carte (HUMINT ou Jeu) :

<a href="#humint-modules"
   class="card-link"
   onclick="loadHumintQuiz('humint/podcast-humint.html'); return false;">
  Écouter le podcast HUMINT →
</a>

2.5. HUMINT → mini-galerie d’images (carte mentale, schémas…)

Tu crées : humint/carte-mentale.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <title>Carte mentale HUMINT</title>
  <style>
    body {
      margin: 0;
      padding: 20px;
      background: #020617;
      color: #e5e7eb;
      font-family: system-ui, sans-serif;
      text-align: center;
    }
    img {
      max-width: 100%;
      height: auto;
      border-radius: 12px;
      border: 1px solid #1f2933;
      box-shadow: 0 15px 40px rgba(0,0,0,0.5);
    }
  </style>
</head>
<body>
  <h1>Carte mentale HUMINT</h1>
  <p>Vue d'ensemble des concepts clés à mémoriser.</p>
  <img src="../images/carte-humint.png" alt="Carte mentale HUMINT" />
</body>
</html>

Lien dans la carte “Dossier HUMINT” :

<a href="#humint-modules"
   class="card-link"
   onclick="loadHumintQuiz('humint/carte-mentale.html'); return false;">
  Carte mentale →
</a>

3. Utiliser l’iframe Empire (id=“empireFrame”)

Tu as :

<section class="empire-modules" id="empire-modules">
  <iframe id="empireFrame" src="empire_builder_content.html" style="height:1000px;"></iframe>
</section>

et la fonction :

function loadModule(anchor) {
  const frame = document.getElementById('empireFrame');
  if (frame) {
    frame.src = 'empire_builder_content.html' + anchor;
  }
}

Tu peux :

  • soit continuer à utiliser loadModule('#anchor') (pour naviguer dans UNE grosse page),
  • soit charger d’AUTRES fichiers HTML dans le même cadre.

3.1. Empire → une fiche pratique indépendante

Tu crées : empire/fiche-prix.html

<a href="#empire-modules"
   class="card-link"
   onclick="document.getElementById('empireFrame').src='empire/fiche-prix.html'; return false;">
  Fiche pratique : fixer ses prix →
</a>

3.2. Empire → tableau de bord (par ex. un simple tableur HTML)

Tu crées : empire/tableau-90-jours.html

Puis dans la carte “Plan d’Action 90 Jours” :

<a href="#empire-modules"
   class="card-link"
   onclick="document.getElementById('empireFrame').src='empire/tableau-90-jours.html'; return false;">
  Voir le plan complet →
</a>

3.3. Empire → page “Markdown converti en HTML”

Tu peux écrire un texte dans un .md, le convertir rapidement (avec un outil en ligne) en HTML, le coller dans : empire/roadmap-text.html, et l’ouvrir de la même façon.

4. Créer une nouvelle zone d’annexes dans “Jeu & Missions”

Actuellement, l’onglet Jeu n’a pas d’iframe. On peut en ajouter une simple.

4.1. Ajouter l’iframe dans tab-jeu

Dans le <div class="tab-content" id="tab-jeu">, à la fin, avant </div> :

<section class="humint-modules" id="jeu-modules">
  <iframe id="jeuFrame" src="" style="width:100%; border:none; height:800px;"></iframe>
</section>

(Je reutilise la classe .humint-modules pour garder le même look.)

4.2. Ajouter une fonction JS

Dans le <script> en bas de page, après tes fonctions existantes :

function loadJeuAnnexe(url) {
  const frame = document.getElementById('jeuFrame');
  if (frame) {
    frame.src = url;
  }
}

4.3. Exemple : briefing de mission

Tu crées : jeu/briefing-mission-1.html

Ensuite, dans la carte “Missions Renseignement/HUMINT” :

<a href="#jeu-modules"
   class="card-link"
   onclick="loadJeuAnnexe('jeu/briefing-mission-1.html'); return false;">
  Briefing mission #1 →
</a>

4.4. Exemple : afficher une version web d’un jeu Godot

Si un jour tu exportes un jeu Godot en HTML5, tu obtiens un dossier genre : jeu/godot-mission1/index.html

Tu peux créer une petite page intermédiaire : jeu/godot-wrapper.html :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <title>Mission Godot</title>
  <style>
    html, body {
      height: 100%;
      margin: 0;
      background: #000;
    }
    iframe {
      border: none;
      width: 100%;
      height: 100%;
      display: block;
    }
  </style>
</head>
<body>
  <iframe src="godot-mission1/index.html"></iframe>
</body>
</html>

Puis dans une carte du tab “Jeu” :

<a href="#jeu-modules"
   class="card-link"
   onclick="loadJeuAnnexe('jeu/godot-wrapper.html'); return false;">
  Lancer la mission Godot →
</a>

5. Un système générique “data-annexe” (option mais très puissant)

Si tu veux pouvoir charger des annexes depuis n’importe où sans écrire de onclick, tu peux ajouter une iframe générique + un petit script.

5.1. Ajouter une iframe “globale”

Par exemple juste avant le <footer> :

<section class="humint-modules" id="annexe-zone">
  <h2>Annexe</h2>
  <iframe id="annexeFrame" src="" style="width:100%; border:none; height:900px;"></iframe>
</section>

5.2. Ajouter le script

Toujours dans le <script> du bas :

document.addEventListener('click', (event) => {
  const link = event.target.closest('[data-annexe]');
  if (!link) return;

  const url = link.getAttribute('data-annexe');
  const frame = document.getElementById('annexeFrame');
  if (!frame || !url) return;

  event.preventDefault();
  frame.src = url;

  const targetId = link.getAttribute('href');
  if (targetId && targetId.startsWith('#')) {
    const target = document.querySelector(targetId);
    if (target) {
      target.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  }
});

5.3. Utilisation dans n’importe quelle carte

Exemples partout dans le site :

<!-- Parcours -->
<a href="#annexe-zone"
   class="card-link"
   data-annexe="docs/guide-onboarding.pdf">
  Guide PDF d'accueil (dans la page) →
</a>

<!-- HUMINT -->
<a href="#annexe-zone"
   class="card-link"
   data-annexe="humint/carte-mentale.html">
  Carte mentale (annexe globale) →
</a>

<!-- Empire -->
<a href="#annexe-zone"
   class="card-link"
   data-annexe="empire/fiche-prix.html">
  Fiche prix (annexe globale) →
</a>

<!-- Jeu -->
<a href="#annexe-zone"
   class="card-link"
   data-annexe="jeu/briefing-mission-1.html">
  Briefing mission #1 (annexe globale) →
</a>

Tu ajoutes juste data-annexe="..." et ça marche partout grâce au script.

6. Mini check-list pour chaque nouvelle annexe

Quand tu veux ajouter un nouveau contenu :

  1. Créer le fichier

    • docs/... pour les PDF/ZIP
    • humint/... pour des annexes HUMINT
    • empire/... pour des annexes Empire
    • jeu/... pour des annexes Jeu

  2. Choisir la façon de l’ouvrir

    • nouvelle fenêtre : href="..." target="_blank"
    • dans humintFrame : onclick="loadHumintQuiz('...')"
    • dans empireFrame : document.getElementById('empireFrame').src='...'
    • dans jeuFrame : loadJeuAnnexe('...')
    • dans annexeFrame (global) : data-annexe="..."

  3. Ajouter le lien dans la carte de la section qui a du sens.

Si tu veux, à la prochaine entrée, je peux prendre UNE annexe précise que tu veux faire (par exemple “manuel HUMINT web” ou “briefing mission #1”) et on la code ensemble de A à Z, avec le HTML complet + son intégration dans ton site actuel.

Parfait, on fait le pack complet “maxi terrain de jeu”. Je te donne tout pour que tu puisses reconstruire le ZIP chez toi.

1. Arborescence du projet

Crée un dossier, par exemple :

humint_portail_max/
├─ index.html
├─ assets/
│  ├─ css/
│  │  └─ main.css
│  └─ js/
│     └─ main.js
├─ humint/
│  ├─ humint-manuel.html
│  ├─ humint-debutant.html
│  ├─ carte-mentale.html
│  ├─ podcast-humint.html
│  └─ quiz-intro.html
├─ empire/
│  ├─ fiche-prix.html
│  └─ tableau-90-jours.html
├─ jeu/
│  ├─ briefing-mission-1.html
│  └─ godot-wrapper.html
├─ docs/
│  ├─ guide-onboarding.pdf        (fichier factice au début)
│  ├─ pack-missions.pdf           (fichier factice au début)
│  └─ dossier-renseignement.pdf   (fichier factice au début)
├─ images/
│  └─ carte-humint.png            (image factice au début)
└─ audio/
   └─ podcast-humint-01.mp3       (audio factice au début)

Pour les .pdf, .png, .mp3 : tu peux commencer par des fichiers vides ou quelconques avec ces noms, et les remplacer plus tard par les vrais contenus.

2. Fichier index.html (portail principal)

Place ceci dans humint_portail_max/index.html :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HUMINT & Empire Builder — Portail d'annexes</title>
  <link rel="stylesheet" href="assets/css/main.css" />
</head>
<body>
  <header class="site-header">
    <div class="site-header-inner">
      <p class="badge">Prototype pédagogique — Annexes & intégration</p>
      <h1>HUMINT & Empire Builder</h1>
      <p class="subtitle">
        Portail d'entraînement pour apprendre à brancher des contenus (HTML, PDF, audio, mini-apps)
        sur un site unique sans se perdre dans le code.
      </p>
    </div>
  </header>

  <nav class="top-nav">
    <a href="#section-parcours">🧭 Parcours</a>
    <a href="#section-humint">🕵️ HUMINT</a>
    <a href="#section-empire">⚙️ Empire Builder</a>
    <a href="#section-jeu">🎲 Jeu & Missions</a>
    <a href="#section-annexe">📎 Zone annexe</a>
  </nav>

  <main class="layout">
    <!-- Colonne de gauche : sections et cartes -->
    <div class="main-column">
      <!-- Parcours -->
      <section id="section-parcours" class="section-block">
        <h2>🧭 Parcours Global</h2>
        <p class="section-intro">
          Ici tu peux brancher les documents d’accueil du dispositif :
          guide PDF, pack de missions, template de système, etc.
        </p>

        <div class="cards-grid">
          <article class="card">
            <header class="card-header">
              <h3>Phase 1 — Onboarding</h3>
              <span class="tag">Semaine 1</span>
            </header>
            <p>
              Présenter le dispositif, les dossiers, les règles du jeu, et choisir un axe principal :
              HUMINT, Empire Builder, ou Jeu & Missions.
            </p>
            <footer class="card-footer">
              <!-- Ouvre le PDF dans un nouvel onglet -->
              <a href="docs/guide-onboarding.pdf" target="_blank" class="card-link">
                Guide PDF d'accueil (nouvel onglet) →
              </a>
              <!-- Charge le PDF dans la zone annexe -->
              <a href="#section-annexe" class="card-link"
                 data-annexe="docs/guide-onboarding.pdf">
                Voir dans la zone annexe →
              </a>
            </footer>
          </article>

          <article class="card">
            <header class="card-header">
              <h3>Phase 3 — Missions</h3>
              <span class="tag">Mois 2</span>
            </header>
            <p>
              Pack de missions inspirées du renseignement, du jeu et de l'entrepreneuriat :
              terrain parfait pour tester des annexes multi-formats.
            </p>
            <footer class="card-footer">
              <a href="docs/pack-missions.pdf" target="_blank" class="card-link">
                Télécharger le pack missions →
              </a>
              <a href="#section-annexe" class="card-link"
                 data-annexe="docs/pack-missions.pdf">
                Aperçu dans la zone annexe →
              </a>
            </footer>
          </article>
        </div>
      </section>

      <!-- HUMINT -->
      <section id="section-humint" class="section-block">
        <h2>🕵️ Pôle HUMINT & Renseignement</h2>
        <p class="section-intro">
          Annexes liées au renseignement : dossier complet, versions simplifiées, carte mentale,
          podcast, quiz d’introduction…
        </p>

        <div class="cards-grid">
          <article class="card">
            <header class="card-header">
              <h3>Dossier Renseignement</h3>
              <span class="tag">Théorie</span>
            </header>
            <p>
              Dossier principal sur le renseignement : panorama des services, enjeux démocratiques,
              cadre légal, controverses.
            </p>
            <footer class="card-footer">
              <a href="docs/dossier-renseignement.pdf" target="_blank" class="card-link">
                Ouvrir le PDF → 
              </a>
              <a href="#section-annexe" class="card-link"
                 data-annexe="humint/humint-manuel.html">
                Version web dans la page →
              </a>
            </footer>
          </article>

          <article class="card">
            <header class="card-header">
              <h3>Version ultra accessible</h3>
              <span class="tag">Niveau débutant</span>
            </header>
            <p>
              Une version simplifiée du dossier, vocabulaire accessible, exemples du quotidien.
              Parfait pour faire le lien avec des publics éloignés.
            </p>
            <footer class="card-footer">
              <a href="#section-annexe" class="card-link"
                 data-annexe="humint/humint-debutant.html">
                Lire la version accessible →
              </a>
            </footer>
          </article>

          <article class="card">
            <header class="card-header">
              <h3>Carte mentale HUMINT</h3>
              <span class="tag">Visuel</span>
            </header>
            <p>
              Carte mentale pour mémoriser les grandes branches, les acteurs et les mots-clés
              importants du renseignement.
            </p>
            <footer class="card-footer">
              <a href="#section-annexe" class="card-link"
                 data-annexe="humint/carte-mentale.html">
                Voir la carte mentale →
              </a>
            </footer>
          </article>

          <article class="card">
            <header class="card-header">
              <h3>Podcast HUMINT</h3>
              <span class="tag">Audio</span>
            </header>
            <p>
              Épisode audio qui raconte le renseignement de manière narrative :
              enjeux, dilemmes éthiques, exemples concrets.
            </p>
            <footer class="card-footer">
              <a href="#section-annexe" class="card-link"
                 data-annexe="humint/podcast-humint.html">
                Écouter dans la page →
              </a>
            </footer>
          </article>

          <article class="card">
            <header class="card-header">
              <h3>Quiz d'introduction</h3>
              <span class="tag">Interactive</span>
            </header>
            <p>
              Petit quiz pour tester les notions de base : définitions, objectifs, acteurs,
              risques pour les libertés publiques.
            </p>
            <footer class="card-footer">
              <a href="#section-annexe" class="card-link"
                 data-annexe="humint/quiz-intro.html">
                Lancer le quiz d'intro →
              </a>
            </footer>
          </article>
        </div>
      </section>

      <!-- Empire -->
      <section id="section-empire" class="section-block">
        <h2>⚙️ Pôle Empire Builder</h2>
        <p class="section-intro">
          Annexes business / projets : fiches pratiques, tableaux de planification, 
          adaptation à des projets associatifs ou citoyens.
        </p>

        <div class="cards-grid">
          <article class="card">
            <header class="card-header">
              <h3>Fiche pratique — Fixer ses prix</h3>
              <span class="tag">Économie</span>
            </header>
            <p>
              Comment fixer un prix juste (ou une contribution libre) en lien avec les coûts,
              le temps, la valeur perçue et la mission du projet.
            </p>
            <footer class="card-footer">
              <a href="#section-annexe" class="card-link"
                 data-annexe="empire/fiche-prix.html">
                Ouvrir la fiche pratique →
              </a>
            </footer>
          </article>

          <article class="card">
            <header class="card-header">
              <h3>Plan d'action 90 jours</h3>
              <span class="tag">Roadmap</span>
            </header>
            <p>
              Trois mois pour structurer un projet : objectifs, jalons, tâches concrètes.
              Utilisable pour un projet business, associatif ou hybride.
            </p>
            <footer class="card-footer">
              <a href="#section-annexe" class="card-link"
                 data-annexe="empire/tableau-90-jours.html">
                Voir le tableau 90 jours →
              </a>
            </footer>
          </article>
        </div>
      </section>

      <!-- Jeu -->
      <section id="section-jeu" class="section-block">
        <h2>🎲 Pôle Jeu & Missions</h2>
        <p class="section-intro">
          Annexes orientées jeu, missions IRL, et protos de mini-jeux numériques (par exemple avec Godot).
        </p>

        <div class="cards-grid">
          <article class="card">
            <header class="card-header">
              <h3>Briefing — Mission #1</h3>
              <span class="tag">IRL</span>
            </header>
            <p>
              Mission inspirée du renseignement citoyen : cartographier un écosystème local,
              repérer les acteurs clés, rédiger un court rapport.
            </p>
            <footer class="card-footer">
              <a href="#section-annexe" class="card-link"
                 data-annexe="jeu/briefing-mission-1.html">
                Lire le briefing →
              </a>
            </footer>
          </article>

          <article class="card">
            <header class="card-header">
              <h3>Prototype Godot</h3>
              <span class="tag">Mini-jeu</span>
            </header>
            <p>
              Exemple d'intégration d'un jeu HTML5 exporté depuis Godot dans une page web,
              lui-même chargé comme annexe.
            </p>
            <footer class="card-footer">
              <a href="#section-annexe" class="card-link"
                 data-annexe="jeu/godot-wrapper.html">
                Ouvrir le prototype Godot →
              </a>
            </footer>
          </article>
        </div>
      </section>
    </div>

    <!-- Colonne de droite : zone annexe -->
    <aside id="section-annexe" class="annexe-column">
      <h2>📎 Zone Annexe</h2>
      <p class="section-intro">
        Tous les liens avec l'attribut <code>data-annexe="..."</code> chargent ici leur contenu :
        pages HTML, PDFs, audio, mini-apps, etc.
      </p>
      <iframe
        id="annexeFrame"
        class="annexe-frame"
        src=""
        title="Zone annexe"
      ></iframe>
    </aside>
  </main>

  <footer class="site-footer">
    <p>
      Prototype pédagogique — HUMINT, Empire, Jeu & Missions.<br />
      Utilise ce portail comme sandbox pour apprendre à intégrer des contenus.
    </p>
  </footer>

  <script src="assets/js/main.js"></script>
</body>
</html>

3. Fichier assets/css/main.css

Crée humint_portail_max/assets/css/main.css :

:root {
  --bg: #020617;
  --bg-alt: #02091f;
  --card: #020617;
  --accent: #22c55e;
  --accent-soft: rgba(34, 197, 94, 0.12);
  --accent-alt: #0ea5e9;
  --text: #e5e7eb;
  --text-dim: #9ca3af;
  --border: #1f2937;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, #0b1120 0, #020617 45%, #000 100%);
  color: var(--text);
}

/* HEADER */

.site-header {
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, #020617, #020817, #022c22);
}

.site-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 1.25rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(34, 197, 94, 0.6);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: rgba(15, 23, 42, 0.9);
  margin-bottom: 0.75rem;
}

.site-header h1 {
  margin: 0 0 0.35rem;
  font-size: 1.8rem;
}

.subtitle {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-dim);
}

/* NAV */

.top-nav {
  max-width: 1100px;
  margin: 0.25rem auto 0;
  padding: 0 1.25rem 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.top-nav a {
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.85rem;
  background: rgba(15, 23, 42, 0.9);
}

.top-nav a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* LAYOUT */

.layout {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.25rem 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
  gap: 1rem;
}

.main-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* SECTIONS & CARDS */

.section-block {
  background: rgba(15, 23, 42, 0.95);
  border-radius: 16px;
  border: 1px solid var(--border);
  padding: 1rem;
}

.section-block h2 {
  margin: 0 0 0.4rem;
  font-size: 1.2rem;
}

.section-intro {
  margin: 0 0 0.8rem;
  font-size: 0.9rem;
  color: var(--text-dim);
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.7rem;
}

.card {
  background: var(--card);
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 0.8rem 0.85rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
}

.card-header h3 {
  margin: 0;
  font-size: 1rem;
}

.tag {
  font-size: 0.75rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  color: var(--text-dim);
}

.card p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-dim);
}

.card-footer {
  margin-top: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.card-link {
  color: var(--accent-alt);
  font-size: 0.85rem;
  text-decoration: none;
}

.card-link:hover {
  text-decoration: underline;
}

/* ANNEXE COLUMN */

.annexe-column {
  background: rgba(15, 23, 42, 0.98);
  border-radius: 16px;
  border: 1px solid var(--border);
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.annexe-column h2 {
  margin: 0;
  font-size: 1.1rem;
}

.annexe-column code {
  background: rgba(15, 23, 42, 0.9);
  border-radius: 6px;
  padding: 0.1rem 0.3rem;
  font-size: 0.8rem;
}

.annexe-frame {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #020617;
  min-height: 420px;
}

/* FOOTER */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 0.6rem 1.25rem 0.9rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* RESPONSIVE */

@media (max-width: 900px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .annexe-column {
    order: -1;
  }
}

4. Fichier assets/js/main.js

Crée humint_portail_max/assets/js/main.js :

// Script principal : gère la zone annexe et le chargement des contenus
document.addEventListener("click", (event) => {
  const link = event.target.closest("[data-annexe]");
  if (!link) return;

  const url = link.getAttribute("data-annexe");
  const frame = document.getElementById("annexeFrame");

  if (!url || !frame) return;

  event.preventDefault();
  frame.src = url;

  // Scroll doux vers la zone annexe
  const annexeSection = document.getElementById("section-annexe");
  if (annexeSection) {
    annexeSection.scrollIntoView({ behavior: "smooth", block: "start" });
  }
});

// Optionnel : petite trace pour les curieux
console.log(
  "%cPortail HUMINT/Empire/Jeu chargé.",
  "color:#22c55e;font-size:14px;"
);
console.log(
  "%cTu peux modifier les annexes ou en ajouter d'autres pour t'entraîner.",
  "color:#93c5fd;font-size:12px;"
);

5. Annexes HUMINT

5.1 humint/humint-manuel.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <title>Manuel HUMINT — Version web</title>
  <style>
    body {
      margin: 0;
      padding: 1.2rem;
      font-family: system-ui, sans-serif;
      background: #020617;
      color: #e5e7eb;
      line-height: 1.6;
    }
    h1, h2, h3 {
      color: #22c55e;
      margin-top: 0;
    }
    h2 {
      margin-top: 1.4rem;
    }
    p {
      margin: 0 0 0.8rem;
      font-size: 0.95rem;
    }
    ul {
      margin: 0 0 0.8rem 1.2rem;
      padding: 0;
      font-size: 0.95rem;
    }
    .note {
      padding: 0.7rem 0.8rem;
      border-radius: 8px;
      border: 1px solid #1f2937;
      background: #02091f;
      font-size: 0.85rem;
      color: #9ca3af;
      margin-bottom: 1rem;
    }
  </style>
</head>
<body>
  <h1>Manuel HUMINT — Version Web</h1>
  <div class="note">
    Cette page est une <strong>annexe web</strong> : elle reprend les grandes lignes
    du dossier HUMINT dans une version lisible directement dans le navigateur.
  </div>

  <h2>1. HUMINT : de quoi parle-t-on ?</h2>
  <p>
    HUMINT signifie <em>Human Intelligence</em> : une branche du renseignement
    qui repose principalement sur les êtres humains, leurs observations, leurs
    témoignages, leurs récits, leurs choix.
  </p>

  <p>
    À l'opposé des discours technos centrés uniquement sur les algorithmes, la
    HUMINT rappelle que le facteur humain reste central&nbsp;: qui parle ? à qui ? dans
    quel contexte ? avec quels intérêts ?
  </p>

  <h2>2. Quelques notions clés</h2>
  <ul>
    <li><strong>Source</strong> : personne qui transmet une information.</li>
    <li><strong>Recueil</strong> : manière dont on obtient cette information.</li>
    <li><strong>Validation</strong> : vérification croisée, mise en contexte.</li>
    <li><strong>Diffusion</strong> : à qui on transmet, sous quelle forme, avec quelles limites.</li>
  </ul>

  <h2>3. Pourquoi c'est utile pour toi ?</h2>
  <p>
    Que tu travailles dans le social, dans une association, dans un projet
    entrepreneurial ou juste comme citoyen curieux, la logique HUMINT t'aide à :
  </p>
  <ul>
    <li>poser de meilleures questions ;</li>
    <li>repérer les biais et les angles morts ;</li>
    <li>transformer des infos brutes en décisions plus solides.</li>
  </ul>

  <h2>4. À manipuler avec éthique</h2>
  <p>
    Parler de renseignement implique toujours des questions d'éthique et de droits
    fondamentaux. Ce manuel n'est pas là pour glorifier la surveillance, mais pour
    développer un regard critique et des pratiques responsables.
  </p>
</body>
</html>

5.2 humint/humint-debutant.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <title>HUMINT — Version ultra accessible</title>
  <style>
    body {
      margin: 0;
      padding: 1rem;
      font-family: system-ui, sans-serif;
      background: #020617;
      color: #e5e7eb;
    }
    h1 {
      color: #22c55e;
      margin-top: 0;
      font-size: 1.3rem;
    }
    p {
      font-size: 0.95rem;
      margin: 0 0 0.8rem;
    }
    ul {
      margin: 0 0 0.8rem 1.1rem;
      padding: 0;
      font-size: 0.95rem;
    }
    .exemple {
      font-size: 0.9rem;
      color: #9ca3af;
      border-left: 3px solid #22c55e;
      padding-left: 0.6rem;
      margin-bottom: 0.7rem;
    }
  </style>
</head>
<body>
  <h1>HUMINT — Version ultra accessible</h1>
  <p>
    La HUMINT, c'est tout simplement l'art de <strong>recueillir et comprendre ce que
    les gens disent, font et montrent</strong>, pour mieux lire une situation.
  </p>
  <p class="exemple">
    Ex : tu discutes avec plusieurs habitants d'un quartier, tu prends des notes, tu compares
    les points de vue, et tu en tires une vision plus claire des problèmes locaux.
  </p>
  <ul>
    <li>On écoute les gens.</li>
    <li>On vérifie ce qu'on entend.</li>
    <li>On ne note pas tout n'importe comment.</li>
    <li>On respecte les personnes et les limites.</li>
  </ul>
</body>
</html>

5.3 humint/carte-mentale.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <title>Carte mentale HUMINT</title>
  <style>
    body {
      margin: 0;
      padding: 1rem;
      font-family: system-ui, sans-serif;
      background: #020617;
      color: #e5e7eb;
      text-align: center;
    }
    h1 {
      color: #22c55e;
      margin-top: 0;
      font-size: 1.3rem;
    }
    p {
      margin: 0 0 0.8rem;
      font-size: 0.9rem;
      color: #9ca3af;
    }
    img {
      max-width: 100%;
      height: auto;
      border-radius: 12px;
      border: 1px solid #1f2937;
      box-shadow: 0 14px 40px rgba(0, 0, 0, 0.8);
    }
  </style>
</head>
<body>
  <h1>Carte mentale HUMINT</h1>
  <p>Remplace ce fichier image par ta propre carte mentale.</p>
  <img src="../images/carte-humint.png" alt="Carte mentale HUMINT" />
</body>
</html>

5.4 humint/podcast-humint.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <title>Podcast HUMINT — Épisode 1</title>
  <style>
    body {
      margin: 0;
      padding: 1rem;
      font-family: system-ui, sans-serif;
      background: #020617;
      color: #e5e7eb;
    }
    h1 {
      color: #22c55e;
      margin-top: 0;
    }
    p {
      font-size: 0.95rem;
      color: #cbd5f5;
    }
    .note {
      font-size: 0.8rem;
      color: #9ca3af;
      margin-top: 0.5rem;
    }
  </style>
</head>
<body>
  <h1>Podcast HUMINT — Épisode 1</h1>
  <p>
    Exemple d'intégration d'un fichier audio comme annexe du portail. Remplace le
    fichier <code>audio/podcast-humint-01.mp3</code> par ton propre enregistrement.
  </p>
  <audio controls src="../audio/podcast-humint-01.mp3">
    Votre navigateur ne supporte pas l'élément audio.
  </audio>
  <p class="note">
    Si tu n'as pas encore d'audio, mets n'importe quel mp3 dans le dossier
    <code>audio/</code> et renomme-le <code>podcast-humint-01.mp3</code>.
  </p>
</body>
</html>

5.5 humint/quiz-intro.html (mini quiz autonome)

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <title>Quiz d'introduction HUMINT</title>
  <style>
    body {
      margin: 0;
      padding: 1rem;
      font-family: system-ui, sans-serif;
      background: #020617;
      color: #e5e7eb;
    }
    h1 {
      color: #22c55e;
      margin-top: 0;
      font-size: 1.3rem;
    }
    .question {
      margin: 1rem 0 0.5rem;
      font-weight: 600;
    }
    .options {
      list-style: none;
      padding: 0;
      margin: 0 0 0.8rem;
    }
    .options li {
      margin-bottom: 0.3rem;
    }
    label {
      cursor: pointer;
      font-size: 0.95rem;
    }
    button {
      padding: 0.4rem 0.9rem;
      border-radius: 999px;
      border: 1px solid #22c55e;
      background: #022c22;
      color: #bbf7d0;
      font-size: 0.9rem;
      cursor: pointer;
    }
    button:hover {
      background: #16a34a;
    }
    #result {
      margin-top: 0.6rem;
      font-size: 0.95rem;
    }
  </style>
</head>
<body>
  <h1>Quiz d'introduction HUMINT</h1>
  <p>
    Trois questions pour tester si tu as saisi les bases. Choisis une réponse à chaque fois,
    puis clique sur <strong>Valider</strong>.
  </p>

  <div id="quiz"></div>
  <button id="submitBtn">Valider</button>
  <div id="result"></div>

  <script>
    const questions = [
      {
        text: "Que signifie HUMINT ?",
        options: [
          "Human Intelligence",
          "Hyper Ultimate Machine Intelligence",
          "Hackers Unis pour le Monitoring",
          "Historique Universel de la Machine INTelligente"
        ],
        correct: 0
      },
      {
        text: "Quel est l'objet principal de la HUMINT ?",
        options: [
          "Les signaux radio",
          "Les interactions et témoignages humains",
          "Les satellites",
          "Les algorithmes de trading haute fréquence"
        ],
        correct: 1
      },
      {
        text: "Pourquoi l'éthique est-elle importante en HUMINT ?",
        options: [
          "Parce que la loi l'interdit toujours",
          "Parce que la technologie est dangereuse",
          "Parce qu'on manipule des personnes, leurs droits et leurs vies",
          "Parce que la paperasse est compliquée"
        ],
        correct: 2
      }
    ];

    const quizDiv = document.getElementById("quiz");
    const resultDiv = document.getElementById("result");
    const submitBtn = document.getElementById("submitBtn");

    function renderQuiz() {
      quizDiv.innerHTML = "";
      questions.forEach((q, qi) => {
        const qEl = document.createElement("div");
        qEl.className = "question-block";
        qEl.innerHTML = `
          <div class="question">Q${qi + 1}. ${q.text}</div>
          <ul class="options">
            ${q.options
              .map(
                (opt, oi) => `
              <li>
                <label>
                  <input type="radio" name="q${qi}" value="${oi}" />
                  ${opt}
                </label>
              </li>`
              )
              .join("")}
          </ul>
        `;
        quizDiv.appendChild(qEl);
      });
    }

    function getScore() {
      let score = 0;
      questions.forEach((q, qi) => {
        const checked = document.querySelector(`input[name="q${qi}"]:checked`);
        if (!checked) return;
        const val = parseInt(checked.value, 10);
        if (val === q.correct) score++;
      });
      return score;
    }

    submitBtn.addEventListener("click", () => {
      const score = getScore();
      if (score === 0) {
        resultDiv.textContent =
          "0 / " + questions.length + " — aucun souci : tu peux relire le manuel et recommencer.";
      } else if (score < questions.length) {
        resultDiv.textContent =
          score + " / " + questions.length +
          " — pas mal ! Tu peux continuer à explorer les autres annexes.";
      } else {
        resultDiv.textContent =
          "3 / 3 — parfait. Tu peux passer à des contenus plus avancés.";
      }
    });

    renderQuiz();
  </script>
</body>
</html>

6. Annexes Empire

6.1 empire/fiche-prix.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <title>Fiche pratique — Fixer ses prix</title>
  <style>
    body {
      margin: 0;
      padding: 1rem;
      font-family: system-ui, sans-serif;
      background: #020617;
      color: #e5e7eb;
    }
    h1 {
      margin-top: 0;
      color: #22c55e;
    }
    h2 {
      color: #a5b4fc;
      margin-top: 1.2rem;
    }
    p, li {
      font-size: 0.95rem;
    }
    ul {
      margin: 0 0 0.8rem 1.2rem;
      padding: 0;
    }
  </style>
</head>
<body>
  <h1>Fiche pratique — Fixer ses prix</h1>
  <p>
    Cette fiche est un exemple d'annexe Empire Builder intégrée au portail.
    Tu peux l'adapter à un projet commercial, associatif ou coopératif.
  </p>

  <h2>1. Questions de base</h2>
  <ul>
    <li>Combien de temps réel te prend l'activité ?</li>
    <li>Quels coûts fixes (hébergement, matériel, déplacements…) ?</li>
    <li>Quels coûts variables (par participant, par projet) ?</li>
    <li>Quelle valeur perçue par la personne en face ?</li>
  </ul>

  <h2>2. Pistes de modèles</h2>
  <ul>
    <li>Prix libre mais conscient</li>
    <li>Abonnement faible (ex : 12,50€/an)</li>
    <li>Gratuit + dons / mécénat</li>
    <li>Tarifs solidaires (3 niveaux)</li>
  </ul>
</body>
</html>

6.2 empire/tableau-90-jours.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <title>Plan d'action 90 jours</title>
  <style>
    body {
      margin: 0;
      padding: 1rem;
      font-family: system-ui, sans-serif;
      background: #020617;
      color: #e5e7eb;
    }
    h1 {
      margin-top: 0;
      color: #22c55e;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 0.8rem;
      font-size: 0.9rem;
    }
    th, td {
      border: 1px solid #1f2937;
      padding: 0.45rem;
      text-align: left;
    }
    th {
      background: #030712;
    }
  </style>
</head>
<body>
  <h1>Plan d'action 90 jours</h1>
  <p>Un tableau simple que tu peux modifier pour ton projet.</p>
  <table>
    <thead>
      <tr>
        <th>Période</th>
        <th>Objectif</th>
        <th>Actions clés</th>
        <th>Indicateurs</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Semaine 1–2</td>
        <td>Clarifier le projet</td>
        <td>Définir public, problème, offre de base</td>
        <td>1 phrase claire de présentation</td>
      </tr>
      <tr>
        <td>Semaine 3–4</td>
        <td>Produire un premier livrable</td>
        <td>Atelier, dossier, page web simple</td>
        <td>1 livrable terminé, même imparfait</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

7. Annexes Jeu

7.1 jeu/briefing-mission-1.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <title>Briefing — Mission #1</title>
  <style>
    body {
      margin: 0;
      padding: 1rem;
      font-family: system-ui, sans-serif;
      background: #020617;
      color: #e5e7eb;
    }
    h1 {
      margin-top: 0;
      color: #22c55e;
    }
    h2 {
      margin-top: 1.1rem;
      color: #a5b4fc;
    }
    p, li {
      font-size: 0.95rem;
    }
    ul {
      margin: 0 0 0.8rem 1.2rem;
      padding: 0;
    }
  </style>
</head>
<body>
  <h1>Briefing — Mission #1</h1>
  <p>
    Exemple de mission HUMINT / renseignement citoyen à jouer dans la vraie vie.
  </p>

  <h2>Objectif</h2>
  <p>
    Cartographier un écosystème local (quartier, thématique, institution) et
    produire une courte note de synthèse.
  </p>

  <h2>Tâches</h2>
  <ul>
    <li>Choisir un terrain (quartier, structure, problématique).</li>
    <li>Identifier au moins 5 acteurs différents.</li>
    <li>Recueillir des infos (entretiens, observation, docs publics).</li>
    <li>Rédiger 1 page de synthèse neutre + 1 page d'analyse personnelle.</li>
  </ul>
</body>
</html>

7.2 jeu/godot-wrapper.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <title>Prototype Godot — Wrapper</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      background: #000;
    }
    iframe {
      border: none;
      width: 100%;
      height: 100%;
      display: block;
    }
    .placeholder {
      color: #e5e7eb;
      font-family: system-ui, sans-serif;
      padding: 1rem;
    }
  </style>
</head>
<body>
  <!--
    Si tu exportes un jeu Godot en HTML5, tu peux placer le dossier (par ex. godot-mission1)
    à côté de ce fichier et pointer l'iframe dessus.
  -->
  <iframe src="about:blank" id="godotFrame"></iframe>
  <script>
    // Pour l'instant, on affiche un message de placeholder
    const frame = document.getElementById("godotFrame");
    const doc = frame.contentDocument || frame.contentWindow.document;
    doc.open();
    doc.write(`
      <div class="placeholder">
        <h1 style="color:#22c55e;font-size:1.2rem;margin-top:1rem;">
          Prototype Godot — En attente
        </h1>
        <p>
          Quand tu auras exporté un jeu Godot en HTML5, place-le dans un dossier
          (par exemple <code>godot-mission1/</code>) et remplace la valeur
          de <code>src</code> dans ce fichier.
        </p>
      </div>
    `);
    doc.close();
  </script>
</body>
</html>

8. Fichiers “fictifs” PDF / image / audio

Pour que tout fonctionne sans 404 :

  • dans docs/ crée juste des fichiers vides (ou n’importe quoi) et renomme-les :

    • guide-onboarding.pdf
    • pack-missions.pdf
    • dossier-renseignement.pdf

  • dans images/ :

    • un fichier carte-humint.png (n’importe quelle image renommée ainsi)

  • dans audio/ :

    • un fichier podcast-humint-01.mp3 (n’importe quel mp3 renommé ainsi)

9. Zipper le tout

Une fois tous les fichiers créés :

  1. Place-toi dans le dossier qui contient humint_portail_max/.
  2. En ligne de commande (Linux / macOS / WSL) :
zip -r humint_portail_max.zip humint_portail_max/

Sur Windows sans ligne de commande : clic droit sur humint_portail_max → “Compresser” / “Envoyer vers → Dossier compressé”.

Si tu veux, à la prochaine entrée, tu peux me dire :

  • ce que tu as réussi à afficher,
  • ce qui bloque, et on débogue ensemble en mode “atelier code”.

merci
@codex: c’est possible de coder un multiverse dans Godot ?