Logopoïos ← Retour

<!-- SCREEN: Intro -->
<div id="screen-intro" class="screen active">
  <h1>Bilan d'orientation</h1>
  <p class="subtitle">Explore ce qui t'intéresse, ta façon d'être et ce qui compte pour toi — pour découvrir des pistes, sans pression.</p>
  <div class="privacy-badge">Rien n'est envoyé au serveur — tout reste sur ton appareil</div>

  <div class="module-intro">
    <h2>Comment ça marche</h2>
    <p>Tu réponds à des questions sur ce que tu aimes faire. Pas de bonne ni de mauvaise réponse, juste la tienne. L'outil calcule ton profil et te propose des métiers et des formations qui pourraient te parler. Tu peux t'arrêter quand tu veux et reprendre plus tard.</p>
  </div>

  <div class="module-intro">
    <h2>Choisir ton parcours</h2>
    <p id="parcours-info"></p>
    <div style="margin-top: 1.2em; display: flex; gap: 12px; flex-wrap: wrap;">
      <button type="button" class="btn btn-secondary" data-action="start" data-parcours="express">Express (8 min)</button>
      <button type="button" class="btn btn-primary" data-action="start" data-parcours="standard">Standard (20 min)</button>
      <button type="button" class="btn btn-secondary" data-action="start" data-parcours="complet">Complet (35 min)</button>
      <button type="button" class="btn btn-secondary" data-action="start" data-parcours="exhaustif">Exhaustif (60 min)</button>
    </div>
  </div>

  <div class="module-intro" style="font-size: 0.9rem; color: var(--muted-color);">
    <p style="margin:0;"><strong>À garder en tête :</strong> cet outil s'appuie sur des instruments validés (O*NET Interest Profiler, Mini-IPIP, HEXACO, CAAS…), mais la traduction française n'a pas été formellement validée. Je préfère te le dire franchement. C'est un outil d'exploration qui reflète un moment précis de ta vie, pas un diagnostic ni une fatalité. Pour un bilan approfondi, un conseiller d'orientation t'accompagnera bien mieux qu'un écran.</p>
  </div>
</div>

<!-- SCREEN: Questionnaire -->
<div id="screen-quiz" class="screen">
  <div class="progress-text" id="progress-text">Module 1/3 — Question 1/60</div>
  <div class="progress-bar"><div class="progress-fill" id="progress-fill" style="width:0%"></div></div>
  <div id="quiz-module-title" class="module-intro"><h2></h2><p></p></div>
  <div id="quiz-items"></div>
  <div class="nav-buttons">
    <button type="button" class="btn btn-secondary" id="btn-prev" data-action="prev">← Précédent</button>
    <button type="button" class="btn btn-primary" id="btn-next" data-action="next">Suivant →</button>
  </div>
</div>

<!-- SCREEN: Results -->
<div id="screen-results" class="screen">
  <!-- En-tête visible uniquement à l'impression (page de titre type article) -->
  <div class="print-header">
    <img src="/logo.png" alt="Logopoïos" class="print-logo">
    <h1>Bilan d'orientation</h1>
    <div class="meta" id="print-meta"></div>
    <div class="print-offered">Offert gratuitement par Logopoïos · logopoios.com</div>
  </div>
  <h1 class="results-title">Ton profil</h1>
  <p class="subtitle">D'après tes réponses — voici ce qui se dessine. Rappelle-toi : c'est une photo d'aujourd'hui, pas une étiquette pour la vie.</p>
  <div id="results-content"></div>
  <div class="nav-buttons" style="margin-top: 2em;">
    <button type="button" class="btn btn-secondary" data-action="download">Télécharger mes réponses (JSON)</button>
    <button type="button" class="btn btn-primary" data-action="print">Télécharger en PDF</button>
  </div>
  <div style="text-align:center; margin-top: 1em;">
    <button type="button" class="btn btn-secondary" id="btn-share" data-action="share">Partager l'outil</button>
  </div>
  <p style="font-size: 0.82rem; color: var(--muted-color); margin-top: 1.6em; text-align: center;">
    Cet outil est gratuit et offert par Logopoïos. Tes réponses ne quittent jamais ton navigateur.<br>
    <a href="/constellation.html" style="color: var(--text-color);">Explorer la constellation des savoirs →</a>
  </p>
  <!-- Pied de page visible uniquement à l'impression -->
  <div class="print-footer">
    <strong>Offert par Logopoïos</strong> — logopoios.com · Bilan généré le
    <span id="print-date"></span>.
    Outil d'exploration gratuit inspiré d'instruments validés (O*NET, IPIP, HEXACO,
    CAAS, CDDQ, DigComp). Aucune donnée n'est enregistrée : tout est calculé sur ton
    appareil. Ce bilan reflète un moment précis de ta vie et peut évoluer : il n'y a pas
    de fatalité. Il ne remplace pas un bilan professionnel certifié ni l'accompagnement
    d'un conseiller d'orientation.
    Cet outil t'a été utile ? Parles-en autour de toi — c'est la meilleure façon de
    soutenir Logopoïos.
  </div>
</div>