<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta charset="UTF-8">
<meta name="robots" content="noindex,nofollow">
<meta name="description" content="Les 7 Piliers de l’Individuation : l’introspection dans ta poche. Respirer, boire, manger, se mouvoir, se reposer, se reproduire, s’élever, guidé par la voix de Johnatan Agostini.">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32-7p3.png">
<link rel="icon" type="image/png" sizes="48x48" href="favicon-48-7p3.png">
<link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon-7p3.png">
<link rel="apple-touch-icon" sizes="192x192" href="assets/icon-192-7p3.png">
<link rel="apple-touch-icon" sizes="512x512" href="assets/icon-512-7p3.png">
<link rel="manifest" href="manifest.json">
<meta name="apple-mobile-web-app-title" content="Individuation">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="author" content="Agostini Accompagnements EURL">
<meta name="copyright" content="© Agostini Accompagnements EURL · tous droits réservés">
<meta name="theme-color" content="#F5EFE3">
<meta name="color-scheme" content="light">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="google" content="notranslate">
<title>Les 7 Piliers de l’Individuation</title>
<meta name="application-name" content="Les 7 Piliers de l’Individuation">
<meta property="og:title" content="Les 7 Piliers de l’Individuation">
<meta property="og:site_name" content="Les 7 Piliers de l’Individuation">
<meta property="og:description" content="L’introspection dans ta poche.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://app.agostinijohnatan.com/">
<meta property="og:image" content="https://app.agostinijohnatan.com/assets/icon-1024-7p3.png">
<meta name="twitter:card" content="summary">

<link rel="stylesheet" href="app-v113-rc207-parcours-offre.css">
</head>
<body class="landing-locked">
<div id="paperFx"></div>
<button id="egg" aria-label="Un petit quelque chose">✻</button>
<div id="tipPop" class="tipcard"><div class="tiplab sans" id="tipPopLab">Trouvé.</div><div id="tipText"></div></div>

<button class="gear" id="gearBtn" aria-label="Réglages" title="Réglages">
  <svg viewBox="0 0 24 24" aria-hidden="true" width="21" height="21" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
    <circle cx="12" cy="12" r="3.2"></circle>
    <path d="M19 12a7 7 0 0 0-.08-1l2-1.55-2-3.46-2.46 1a7 7 0 0 0-1.74-1L14.4 3h-4.8l-.32 2.99a7 7 0 0 0-1.74 1l-2.46-1-2 3.46L5.08 11A7 7 0 0 0 5 12c0 .34.03.67.08 1l-2 1.55 2 3.46 2.46-1a7 7 0 0 0 1.74 1L9.6 21h4.8l.32-2.99a7 7 0 0 0 1.74-1l2.46 1 2-3.46L18.92 13c.05-.33.08-.66.08-1Z"></path>
  </svg>
</button>
<button class="gear" id="profBtn" aria-label="Profil" style="right:auto;left:16px;font-size:1.0625rem">☰</button>

<header id="brandHome" data-locked="1" style="cursor:default" aria-disabled="true">
  <svg viewBox="14 28 200 128" style="width:58px;height:37px;margin:0 auto 6px;display:block" aria-hidden="true">
   <g class="logoInk">
    <polygon points="20,150 40,150 48,122 28,122"/>
    <polygon points="48,150 68,150 80,96 60,96"/>
    <polygon points="76,150 96,150 112,66 92,66"/>
    <polygon points="132,150 152,150 144,66 124,66"/>
    <polygon points="160,150 180,150 164,96 144,96"/>
    <polygon points="188,150 208,150 184,122 164,122"/>
   </g>
   <polygon class="logoGold" points="104,150 124,150 128,34 108,34"/>
  </svg>
  <div class="brand">Les 7 Piliers<small class="sans">de l’Individuation</small></div>
  <svg class="rule" viewBox="0 0 64 8" aria-hidden="true"><path d="M1 5 C 14 2.5, 30 6.5, 44 4 S 60 3.5, 63 4.5" stroke="#8E6A2F" stroke-width="1.6" fill="none" stroke-linecap="round"/></svg>
</header>

<main>
  <!-- ONBOARDING -->
  <section class="screen on" id="sOnb">
    <div class="q-eyebrow sans">Bienvenue</div>
    <h1>Entrer dans ton espace.</h1>
    <p id="entreeOffre" class="tipcard sans" style="display:none;font-size:0.875rem;line-height:1.6;margin:12px 0;padding:14px" aria-live="polite"></p>
    <p class="sans" style="font-size:0.9375rem;line-height:1.6;color:var(--gray);margin:2px 0 18px">Ton e-mail et ton code ouvrent ta session. Ton journal et tes pratiques restent sur cet appareil.</p>
    <div id="entreeLecture" style="display:none;margin:0 0 16px;padding:13px 16px;border-radius:14px;border:1px solid var(--filet);background:var(--lueur)">
      <p class="sans" style="margin:0;font-size:0.875rem;line-height:1.6"><b>Ta lecture est prête.</b><br>Entre ton e-mail : elle s’ouvre juste après.</p>
    </div>

    <label class="sans" for="entreeEmail" style="display:block;font-size:0.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-texte);margin:0 0 6px">Ton e-mail</label>
    <input id="entreeEmail" type="email" inputmode="email" autocomplete="email" autocapitalize="off" spellcheck="false" placeholder="prenom@exemple.fr"
      style="width:100%;padding:14px 16px;border:1px solid var(--filet);border-radius:14px;background:var(--card);color:var(--ink);font-family:inherit;font-size:1rem" aria-label="Ton adresse e-mail">

    <!-- rc188 · Le code vit ici, avec l'adresse : ce sont les deux choses qui
         ouvrent un espace. Plus d'écran intermédiaire pour choisir sa sorte de code. -->
    <label class="sans" for="entreeCode" style="display:block;font-size:0.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-texte);margin:16px 0 6px">Ton code d’accès</label>
    <input id="entreeCode" type="text" autocomplete="one-time-code" autocapitalize="off" autocorrect="off" spellcheck="false" placeholder="reçu par e-mail, ou celui que tu as choisi"
      style="width:100%;padding:14px 16px;border:1px solid var(--filet);border-radius:14px;background:var(--card);color:var(--ink);font-family:inherit;font-size:1rem" aria-label="Ton code d’accès">
    <button type="button" id="entreeOublie" class="sans" style="display:block;margin:7px 0 0 auto;padding:5px 2px;background:none;border:none;cursor:pointer;font-family:inherit;font-size:0.8125rem;color:var(--gold-texte);text-decoration:underline;text-underline-offset:3px">Code oublié&nbsp;?</button>

    <button id="entreeRester" type="button" aria-pressed="true" style="display:flex;align-items:center;gap:11px;width:100%;margin-top:16px;padding:12px 4px;background:none;border:none;cursor:pointer;font-family:inherit;text-align:left;color:var(--ink)">
      <span id="entreeResterCase" style="flex:0 0 22px;height:22px;border-radius:7px;border:1.5px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:0.8125rem;color:#fff;background:var(--gold)">✓</span>
      <span class="sans" style="font-size:0.875rem;line-height:1.45">Rester connecté sur cet appareil</span>
    </button>
    <p class="sans" id="entreeErr" style="min-height:18px;margin:10px 0 0;font-size:0.875rem;line-height:1.5;color:var(--gold-texte)"></p>
    <button class="btn solid" id="entreeGo" style="width:100%;margin-top:6px;font-size:0.9375rem;padding:15px">Se connecter</button>
    <button class="btn" id="entreeOffres" style="width:100%;margin-top:10px;font-size:0.875rem;padding:11px;border-color:transparent;color:var(--gold-texte)">Je n’ai pas de compte : créer ma session</button>
    <button class="btn" id="apEntreeLien" style="display:none;width:100%;margin-top:4px;font-size:0.875rem;padding:11px;border-color:transparent;color:var(--gold-texte)">Mon espace d’apporteur</button>
    <p class="sans" style="margin:16px 0 0;text-align:center;font-size:0.75rem;color:var(--gray)">
      <a href="https://agostinijohnatan.com/cgv-application" target="_blank" rel="noopener" style="color:inherit">Conditions</a> ·
      <a href="https://agostinijohnatan.com/confidentialite" target="_blank" rel="noopener" style="color:inherit">Confidentialité</a>
    </p>
    <p class="sans" style="margin:8px 0 0;text-align:center;font-size:0.75rem;color:var(--gray)">© Agostini Accompagnements EURL · tous droits réservés</p>
    <button type="button" id="langueEntree" class="sans" style="display:block;margin:12px auto 0;padding:6px 14px;background:none;border:1px solid var(--filet);border-radius:999px;cursor:pointer;font-family:inherit;font-size:0.8125rem;color:var(--gold-texte)">English</button>
  </section>




  <!-- rc126 · arbitrage du 8 sept. : un espace sans lecture est conduit au test offert avec pédagogie, jamais par surprise -->
  <section class="screen" id="sVersTest">
    <div class="q-eyebrow sans">Ta lecture d’abord</div>
    <h1>Tout commence par ta lecture.</h1>
    <p class="sans" style="font-size:0.9375rem;line-height:1.65;color:var(--ink);margin:0 0 12px">Ton espace est prêt. Il lui manque une chose pour te guider : ta lecture des 7 Piliers de l’Individuation. Sept questions, soixante secondes, offertes. Elle te donne ton pilier à explorer, celui qui mérite ton attention aujourd’hui, et c’est lui qui règle Aujourd’hui, ton plan du soir et tes pratiques.</p>
    <p class="sans" style="font-size:0.9375rem;line-height:1.65;color:var(--gray);margin:0 0 18px">Le test s’ouvre sur le site ; tu reviens ici avec ta lecture, et tout se met en place autour d’elle.</p>
    <button class="btn solid" id="versTestGo" style="width:100%;font-size:0.9375rem;padding:15px">Faire mes 7 questions</button>
    <button class="btn" id="versTestCode" style="width:100%;margin-top:8px;border-color:transparent;color:var(--gold-texte)">J’ai déjà ma clé de lecture</button>
  </section>


  <!-- CRÉATION DU PROFIL -->
  <section class="screen" id="sSignup">
    <div class="q-eyebrow sans">Ton espace</div>
    <h1>Créons ton profil.</h1>
    <p class="sans" style="font-size:0.875rem;line-height:1.6;color:var(--gray);margin:4px 0 14px">Ton adresse identifie ton espace sur cet appareil : rien n’est envoyé pour le créer. Elle ne part vers nos serveurs que le jour où tu ouvres un accès ou demandes un lien de connexion. Ta pratique, ton journal et tes réglages restent ici. La synchronisation entre appareils arrivera avec le compte en ligne.</p>
    <input id="signupEmail" type="email" placeholder="prenom@exemple.fr" style="width:100%;border:1px solid var(--filet);border-radius:12px;padding:14px;font-family:inherit;font-size:0.9375rem;background:var(--card);color:var(--ink)" aria-label="Ton adresse e-mail">
    <div class="demo-note sans" id="signupStatus" style="min-height:18px;margin-top:8px"></div>
    <button class="btn solid" id="signupGo" style="width:100%;margin-top:8px">Continuer</button>
    <p class="demo-note sans" style="margin-top:10px">Ton espace est conservé sur cet appareil.</p>
    <button class="btn" id="signupBack" style="margin-top:8px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <!-- PROFIL · LE CODE -->
  <section class="screen" id="sSignupCode">
    <div class="q-eyebrow sans">Ton espace · dernière étape</div>
    <h1>As-tu déjà ta lecture des 7 Piliers de l’Individuation&nbsp;?</h1>
    <p class="sans" style="font-size:0.875rem;line-height:1.6;color:var(--gray);margin:4px 0 14px">Après le test offert du site, ton code transporte uniquement ta lecture du test des 7 piliers. Si tu as fait un Diagnostic, le même écran le reconnaît et lui donne la priorité.</p>
    <div class="opts">
      <button class="opt" id="sgHasCode">Oui, j’ai mon code <small>lecture du test ou Diagnostic</small></button>
      <button class="opt" id="sgNoCode">Pas encore <small>faire le test offert puis revenir ici avec ma lecture</small></button>
    </div>
    <button class="btn" id="sgBack" style="margin-top:14px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>
  <section class="screen" id="sOnbCode">
    <div class="q-eyebrow sans">Ton code</div>
    <h1>Ton code, en un geste.</h1>
    <p class="sans" style="font-size:0.875rem;line-height:1.6;color:var(--gray);margin:2px 0 14px">Abonnement, code offert, lecture du test ou Diagnostic : colle n’importe lequel, l’application reconnaît lequel c’est.</p>
    <button class="btn solid" id="codeColler" style="width:100%;margin:0 0 10px;font-size:0.9375rem;padding:14px">Coller mon code</button>
    <div id="codeStatusPaid" style="display:none;margin:0 0 14px;padding:14px 16px;border-radius:14px;border:1px solid var(--filet);background:var(--lueur)">
      <p class="sans" style="margin:0;font-size:0.875rem;line-height:1.6"><b>Ton paiement est confirmé. Merci.</b><br>Ton code d’accès personnel vient de partir par e-mail : ouvre-le, copie le code et colle-le ci-dessous. Une seule fois, et l’application est à toi.</p>
    </div>
    <textarea id="codeInput" placeholder="ou écris-le ici, tel que tu l’as reçu" style="width:100%;min-height:96px;border:1px solid var(--filet);border-radius:12px;padding:14px;font-family:-apple-system,monospace;font-size:0.8125rem;background:var(--card);color:var(--ink)" aria-label="Ton code, tel que tu l’as reçu"></textarea>
    <div class="demo-note sans" id="codeErr" style="min-height:18px"></div>
    <button class="btn" id="codeVersReduction" style="display:none;width:100%;margin-top:4px;font-size:0.875rem;padding:11px">Voir les formules avec ce code de réduction</button>
    <button class="btn solid" id="codeGo" style="margin-top:10px">Valider mon code</button>
    <button type="button" id="codeOublie" class="sans" style="display:block;margin:14px 0 0;padding:4px 0;background:none;border:none;cursor:pointer;font-family:inherit;font-size:0.875rem;color:var(--gold-texte);text-decoration:underline;text-underline-offset:3px">Code oublié ? Je le reçois par e-mail</button>
    <div id="codeOublieZone" style="display:none;margin:12px 0 0;padding:14px 16px;border-radius:14px;border:1px solid var(--filet);background:var(--card)">
      <label class="sans" for="codeOublieEmail" style="display:block;font-size:0.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-texte);margin:0 0 6px">L’e-mail de ton abonnement</label>
      <input id="codeOublieEmail" type="email" inputmode="email" autocapitalize="off" autocorrect="off" autocomplete="email" spellcheck="false" placeholder="prenom@exemple.fr" style="width:100%;padding:13px 14px;border:1px solid var(--filet);border-radius:12px;background:var(--paper);color:var(--ink);font-family:inherit;font-size:0.9375rem">
      <button class="btn solid" id="codeOublieGo" style="width:100%;margin:10px 0 0;font-size:0.9375rem;padding:13px">M’envoyer mon code</button>
      <p class="sans" id="codeOublieMsg" aria-live="polite" style="min-height:18px;margin:10px 0 0;font-size:0.875rem;line-height:1.5;color:var(--gold-texte)"></p>
      <div id="codeOublieEnvoye" style="display:none;margin:8px 0 0;padding:12px 14px;border-radius:12px;border:1px solid var(--filet);background:var(--lueur)">
        <p class="sans" style="margin:0;font-size:0.875rem;line-height:1.6"><b>C’est parti.</b><br>Ouvre ta boîte e-mail <b>sur cet appareil</b> et touche « Retrouver mon espace » : ton espace s’ouvre tout seul. Sinon, le code est dans l’e-mail, colle-le ci-dessus. Rien dans deux minutes ? Regarde les indésirables.</p>
      </div>
    </div>
    <button class="btn" id="codeBack" style="margin-top:10px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <section class="screen" id="sDiagActivated">
    <div class="q-eyebrow sans">Diagnostic relié</div>
    <h1>Avant de te demander comment tu vas aujourd’hui, l’app te montre ce qu’elle vient d’apprendre.</h1>
    <div id="diagActivationBody"></div>
    <div id="diagPedagogy" class="diag-pedagogy"></div>
    <div id="diagFirstRoute" class="tipcard sans" style="margin:12px 0 0;text-align:left"></div>
    <button class="btn solid" id="diagActivatedToday" style="width:100%;margin-top:10px">Découvrir ma première orientation</button>
    <button class="btn" id="diagActivatedRead" style="width:100%;margin-top:8px">Voir toute ma lecture Diagnostic</button>
      <button class="btn" id="diagActBack" style="width:100%;margin-top:10px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <section class="screen" id="sOnbMap">
    <div class="q-eyebrow sans">Ta carte</div>
    <h1 id="mapTitle">Ta silhouette d’équilibre.</h1>
    <div id="pillarBars"></div>
    <div class="demo-note sans" id="mapNote" aria-live="polite" style="margin-top:10px"></div>
    <div id="mapDepth" class="tipcard sans" style="display:none;margin-top:12px;text-align:left"></div>
    <button class="btn solid" id="mapGo" style="margin-top:16px">Commencer ma pratique</button>
    <button class="btn" id="mapDiag" style="display:none;margin-top:10px">Approfondir avec le Diagnostic écrit</button>
    <button class="btn" id="mapBack" style="margin-top:10px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <section class="screen" id="sOnbAudit">
    <div class="q-eyebrow sans">Mesure de suivi</div>
    <h1>Comment vont tes piliers aujourd’hui ?</h1>
    <div class="demo-note sans" style="margin-bottom:10px">Cette mesure rapide sert uniquement à suivre ton évolution après ta lecture du test.</div>
    <div id="auditSliders"></div>
    <button class="btn solid" id="auditGo" style="margin-top:16px">Voir ma carte</button>
    <button class="btn" id="auditBack" style="margin-top:10px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <!-- ACCUEIL DU JOUR (hub) -->
  <section class="screen" id="sHome">
    <div class="q-eyebrow sans" id="homeDate"></div>
    <h1>Aujourd’hui</h1>
    <button id="diagActiveStrip" class="diag-active-strip" type="button" aria-label="Reprendre ton diagnostic en cours"></button>
    <div id="recCard"></div>
    <div id="devPanel" class="demo-note sans" style="display:none;white-space:pre-wrap;background:var(--card);border:1px dashed var(--filet-fort);border-radius:10px;padding:10px;font-size:0.75rem;margin-bottom:12px"></div>
  <!-- rc171 : un seul message a la fois. Les bandeaux gardent chacun leur logique ;
       un arbitre (arbitrerBandeaux) ne laisse paraitre que le plus urgent, dans cet
       ordre : stockage, mise a jour prete, mise a jour faite, mise a jour, installer,
       jalon, echo du journal, emporter. La note « Explorer reste ton espace de
       liberte » est partie : elle expliquait un onglet a deux centimetres. -->
  <div id="bandeauxHome">
  <div id="jalonCard" style="display:none;margin:16px 0 0;padding:16px;border:1px solid var(--filet-fort);border-radius:16px;background:linear-gradient(180deg, var(--lueur), rgba(169,130,60,.04))">
    <div class="tiplab sans" style="margin:0 0 8px">Six mois de pratique</div>
    <p class="sans" id="jalonTexte" style="margin:0 0 12px;font-size:0.9375rem;line-height:1.65;color:var(--ink)"></p>
    <button class="btn solid" id="jalonGo" style="width:100%;font-size:0.875rem;padding:12px">Refaire ma lecture, c’est offert</button>
    <div id="jalonFid" style="display:none;margin-top:12px;padding-top:12px;border-top:1px solid rgba(142,106,47,.2)">
      <p class="sans" id="jalonFidTexte" style="margin:0 0 10px;font-size:0.875rem;line-height:1.6;color:var(--gray)"></p>
      <button class="btn" id="jalonFidGo" style="width:100%;font-size:0.875rem;padding:11px">Voir le Diagnostic écrit</button>
    </div>
    <button class="btn" id="jalonLater" style="width:100%;margin-top:8px;font-size:0.8125rem;padding:10px;border-color:transparent;color:var(--gray)">Une autre fois</button>
  </div>
  <div id="emporterHome" style="display:none;margin:16px 0 0;padding:16px;border:1px solid var(--filet);border-radius:16px;background:var(--card)">
    <div class="tiplab sans" style="margin:0 0 8px">Avant de partir</div>
    <p class="sans" id="emporterHomeTexte" style="margin:0 0 12px;font-size:0.9375rem;line-height:1.65;color:var(--ink)">Ma voix te suit tant qu’il y a du réseau. Emporte les pratiques sur ton appareil, et elles t’accompagneront aussi en avion, dans le métro, ou là où le réseau ne va pas.</p>
    <button class="btn solid" id="emporterHomeGo" style="width:100%;font-size:0.875rem;padding:12px">Tout emporter · 76 Mo</button>
    <button class="btn" id="emporterHomeMouv" style="width:100%;margin-top:8px;font-size:0.875rem;padding:11px">Seulement le mouvement · 6,6 Mo</button>
    <div class="micro" id="emporterHomeNote" aria-live="polite" style="margin-top:8px">155 voix et 6 ambiances · rien ne part de ton appareil</div>
    <button class="btn" id="emporterHomeLater" style="width:100%;margin-top:8px;font-size:0.8125rem;padding:10px;border-color:transparent;color:var(--gray)">Pas maintenant</button>
  </div>
  <div id="echoHome" style="display:none;margin:16px 0 0;padding:16px;border:1px solid var(--filet);border-radius:16px;background:var(--card)">
    <div class="tiplab sans" style="margin:0 0 8px">Tu écrivais, il y a quelque temps</div>
    <p class="sans" id="echoHomeDate" style="margin:0 0 8px;font-size:0.8125rem;color:var(--gold-texte)"></p>
    <p id="echoHomeTexte" style="margin:0 0 12px;font-size:0.9375rem;line-height:1.7;font-style:italic;color:var(--ink)"></p>
    <button class="btn" id="echoHomeOk" style="width:100%;font-size:0.875rem;padding:11px;border-color:transparent;color:var(--gray)">Merci</button>
  </div>
  <div id="majPreteBar" style="display:none;margin:16px 0 0;padding:13px 16px;border:1px solid var(--filet-fort);border-radius:14px;background:var(--lueur)">
    <p class="sans" style="margin:0 0 10px;font-size:0.875rem;line-height:1.55"><b>Une amélioration est prête.</b> Recharge quand tu veux : rien de ce que tu fais ne sera perdu.</p>
    <button class="btn solid" id="majPreteGo" style="width:100%;font-size:0.875rem;padding:11px">Recevoir la mise à jour</button>
  </div>
  <div id="majFaiteBar" style="display:none;margin:16px 0 0;padding:13px 16px;border:1px solid var(--filet);border-radius:14px;background:var(--card)">
    <p class="sans" style="margin:0 0 6px;font-size:0.875rem;line-height:1.55;color:var(--ink)"><b>L’application a été mise à jour.</b> <span id="majFaiteType" style="display:inline-block;font-size:0.6875rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:#fff;background:var(--gold);border-radius:999px;padding:2px 9px;vertical-align:1px"></span></p>
    <p class="sans" id="majFaiteNote" aria-live="polite" style="margin:0 0 8px;font-size:0.8125rem;line-height:1.55;color:var(--gray)"></p>
    <p class="sans" id="majFaiteTuyaux" style="display:none;margin:0 0 10px;font-size:0.8125rem;line-height:1.55;color:var(--gold-texte)"></p>
    <div style="display:flex;gap:8px">
      <button class="btn" id="majFaiteAvis" style="flex:1;font-size:0.8125rem;padding:10px">Donner mon avis</button>
      <button class="btn" id="majFaiteOk" style="flex:1;font-size:0.875rem;padding:10px;border-color:transparent;color:var(--gold-texte)">Parfait</button>
    </div>
  </div>
  <div id="stockBar" style="display:none;margin:16px 0 0;padding:13px 16px;border:1px solid var(--filet-fort);border-radius:14px;background:var(--card)">
    <p class="sans" style="margin:0 0 10px;font-size:0.875rem;line-height:1.55;color:var(--ink)"><b>Ton appareil manque de place.</b><br>Tes dernières pages n’ont pas pu être enregistrées. Télécharge ta sauvegarde maintenant : elle contient tout.</p>
    <button class="btn solid" id="stockGo" style="width:100%;font-size:0.875rem;padding:10px">Télécharger ma sauvegarde</button>
  </div>
  <div id="majBar" style="display:none;margin:16px 0 0;padding:13px 16px;border:1px solid var(--filet);border-radius:14px;background:var(--card)">
    <p class="sans" style="margin:0 0 10px;font-size:0.875rem;line-height:1.55;color:var(--gray)">Une nouvelle version des 7 Piliers de l’Individuation est prête. Elle s’installera quand tu voudras : rien ne presse, et rien ne se perd.</p>
    <button class="btn solid" id="majGo" style="width:100%;font-size:0.875rem;padding:10px">Passer à la nouvelle version</button>
  </div>
  <div id="installBar" style="display:none;margin:16px 0 0;padding:14px 16px;border:1px solid var(--filet);border-radius:14px;background:var(--card)">
    <p class="sans" id="installText" style="margin:0 0 10px;font-size:0.875rem;line-height:1.55;color:var(--gray)"></p>
    <div style="display:flex;gap:10px;align-items:center">
      <button class="btn solid" id="installGo" style="flex:1;font-size:0.875rem;padding:10px">Installer l’application</button>
      <button class="btn" id="installLater" style="font-size:0.8125rem;padding:10px 14px">Plus tard</button>
    </div>
  </div>
  </div>
</section>


  <!-- MODULE 01 · RESPIRER -->
  <section class="screen" id="sRespirer">
    <div class="q-eyebrow sans" style="color:var(--p1)">Pilier 01 · Respirer</div>
    <h1>Dans quel état es-tu, et duquel as-tu besoin&nbsp;?</h1>
    <p class="demo-note sans" style="margin:-2px 0 15px">Le souffle est la seule fonction vitale qui se laisse conduire. C’est la poignée que ton système nerveux garde à portée de main.</p>

    <div class="opts" style="margin-bottom:16px">
      <button class="opt" id="respBesoinCarte" data-besoin="respirer">De quoi as-tu besoin maintenant&nbsp;? <small>six réponses courtes, une porte pour chacune</small></button>
    </div>

    <div class="seg-ctrl wrap" id="respDoors" style="grid-template-columns:1fr 1fr 1fr;margin-bottom:14px">
      <button data-d="corps" class="sel">Le corps</button><button data-d="esprit">L’esprit</button><button data-d="ame">L’âme</button>
    </div>
    <div id="respDCorps">
      <div class="planlab">Ressentir · le souffle tel qu’il est</div>
      <div class="opts">
      <button class="opt" id="respObserver" data-durseg="C56" data-pq="respObserver">Respire comme tu respires <small>~2 min · deux minutes d’observation, sans rien corriger</small></button>
      </div>
      <div class="planlab" style="margin-top:18px">Réguler · redescendre vite</div>
      <div class="opts">
      <button class="opt" id="respSoupir" data-durseg="C57" data-pq="respSoupir">Le soupir qui apaise <small>~2 min · deux inspirations, une longue expiration, cinq fois</small></button>
      </div>
      <div class="planlab" style="margin-top:18px">Respirer · la pratique du souffle</div>
      <div class="opts">
      <button class="opt" id="respMedit" data-pq="respMedit">Ta méditation du jour <small>générée sur mesure : ton état, ton intention, ta durée</small></button>
      <button class="opt" id="respCoherence" data-pq="respCoherence">Ta séance de cohérence <small>5 min · six souffles par minute : ma voix ouvre, l’orbe te porte</small></button>
      <button class="opt" id="respCoherenceCourte" data-pq="respCoherenceCourte">La version courte <small>3 min · pour le milieu de journée</small></button>
      </div>
    </div>
    <div id="respDEsprit" style="display:none">
      <div class="planlab">Clarifier · le souffle qui range les idées</div>
      <div class="opts">
      <button class="opt" id="respClarte" data-pq="respClarte">Aérer l’esprit <small>~5 à 15 min · le souffle carré, les idées qui se rangent</small></button>
      <button class="opt" id="respRecentr" data-pq="respRecentr">Revenir ici <small>~5 à 15 min · les appuis, le souffle, toi</small></button>
      </div>
    </div>
    <div id="respDAme" style="display:none">
      <div class="planlab">Recevoir · le souffle comme premier cadeau</div>
      <div class="opts">
      <button class="opt" id="respAme" data-durseg="C44" data-pq="respAme">Le souffle reçu <small>~2 min 30 · recevoir, rendre : le plus vieil échange du monde</small></button>
      <button class="opt" id="respConfiance" data-durseg="C49" data-pq="respConfiance">La confiance du souffle <small>~2 min 40 · l’air sait où aller, ton corps le distribue pour toi</small></button>
      </div>
    </div>
    <div class="opts" style="margin-top:18px">
      <button class="opt" data-comprendre="respirer">Comprendre mon souffle <small>deux lectures courtes, et l’article complet sur le site</small></button>
    </div>
    <button class="btn" id="respBack" style="margin-top:14px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <!-- MODULE SE NOURRIR -->
  <section class="screen" id="sNourrir">
    <div class="q-eyebrow sans" style="color:var(--p3)">Pilier 03 · Manger</div>
    <h1>Qu’est-ce que je laisse entrer&nbsp;?</h1>
    <p class="demo-note sans" style="margin:-2px 0 15px">Ressentir, choisir, nourrir, savourer. Une alimentation soutenable est une alimentation qu’on peut réellement vivre&nbsp;: rien n’est compté ici, aucun aliment n’est jugé.</p>

    <div class="opts" style="margin-bottom:16px">
      <button class="opt" id="nBesoinCarte" data-besoin="manger">De quoi as-tu besoin maintenant&nbsp;? <small>six réponses courtes, une porte pour chacune</small></button>
    </div>

    <div class="seg-ctrl wrap" id="nDoors" style="grid-template-columns:1fr 1fr 1fr;margin-bottom:14px">
      <button data-d="corps" class="sel">Le corps</button><button data-d="esprit">L’esprit</button><button data-d="ame">L’âme</button>
    </div>
    <div id="nCorps">
      <div class="demo-note sans" style="margin-bottom:10px">Des pratiques de table, à la voix. Rien n’est noté, rien n’est compté, on consulte, on ne corrige pas.</div>
      <div class="opts">
        <button class="opt" id="nAssiette" data-pq="nAssiette">Ton assiette du jour <small>deux questions, une assiette, et le pourquoi sur les trois plans</small></button>
        <button class="opt" data-np="premiere" data-durseg="C24" data-pq="premiere">La première bouchée <small>~2 min · avant un repas</small></button>
        <button class="opt" data-np="faim" data-durseg="C25" data-pq="faim">Écouter la faim <small>~2 min · hors repas · consulter, sans corriger</small></button>
        <button class="opt" data-np="satiete" data-durseg="C26" data-pq="satiete">Entendre la satiété <small>~2 min · en fin de repas</small></button>
      </div>
    </div>
    <div id="nEsprit" style="display:none">
      <div class="planlab" style="margin-top:0">Ressentir · faim, envie, émotion</div>
      <div class="opts">
      <button class="opt" id="nFaimEnvie" data-pq="nFaimEnvie">Faim ou envie&nbsp;? <small>~3 min · à l’écrit · distinguer, sans rien décider</small></button>
      </div>
      <div class="planlab" style="margin-top:18px">Préparer · ce que ton environnement décide</div>
      <div class="opts">
      <button class="opt" id="nPlacard" data-pq="nPlacard">Ce que mon placard décide <small>~4 min · à l’écrit · déplacer trois choses, une fois</small></button>
      </div>
      <div class="planlab" style="margin-top:18px">Nourrir l’esprit · une portion choisie</div>
      <div class="tipcard" style="margin:0"><div class="tiplab sans">La nourriture d’esprit du jour</div>
        <div id="espritText" style="font-size:1rem;line-height:1.55"></div>
        <button class="btn solid" id="espritDone" style="width:100%;margin-top:14px">J’y prends une minute, c’est fait</button>
      </div>
      <div class="demo-note sans" style="margin-top:10px">Une seule par jour. L’esprit se nourrit mieux par petites portions choisies que par flux continu.</div>
    </div>
    <div id="nAme" style="display:none">
      <div class="planlab">Confier · le corps sait ce qu’il fait</div>
      <div class="opts" style="margin-bottom:12px">
      <button class="opt" id="nDigestion" data-durseg="C48" data-pq="nDigestion">Confier la digestion <small>~2 min · après le repas · la méditation de l’Âme, par la voix de Johnatan</small></button>
      </div>
      <div class="tipcard" style="margin:0"><div class="tiplab sans">L’invitation du jour</div>
        <div id="ameText" style="font-size:1rem;line-height:1.55"></div>
        <input id="ameNote" aria-live="polite" placeholder="Un mot pour toi, si tu veux, il reste ici, jamais enregistré" style="width:100%;border:none;border-bottom:1px solid var(--filet);background:transparent;padding:8px 2px;font-family:inherit;font-size:0.9375rem;color:var(--ink);margin-top:12px" aria-label="Un mot pour toi, si tu veux, il reste ici, jamais enregistré">
        <button class="btn solid" id="ameDone" style="width:100%;margin-top:12px">C’est fait</button>
      </div>
    </div>
    <div class="opts" style="margin-top:18px">
      <button class="opt" data-comprendre="manger">Comprendre ce que je mange <small>deux lectures courtes, et l’article complet sur le site</small></button>
    </div>
    <button class="btn" id="nourrirBack" style="margin-top:14px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <!-- MODULE ASSIETTE DU JOUR -->
  <section class="screen" id="sAssiette">
    <div class="q-eyebrow sans" style="color:var(--p3)">Pilier 03 · Manger</div>
    <h1>Ton assiette du jour.</h1>
    <div id="assProfil" style="display:none">
      <p class="sans" style="font-size:0.875rem;line-height:1.6;color:var(--gray);margin:2px 0 14px">Dis-le une fois, l’app s’en souvient : tes assiettes seront justes dès la première.</p>
      <div class="planlab">Ton régime</div>
      <p class="demo-note sans" style="margin:0 0 6px">Le mode étudiant écarte les assiettes chères ou aux ingrédients moins courants : petits prix, produits de supermarché. Décoche-le quand tu veux, rien n’est figé.</p>
      <div class="jfilters" id="profRegime" style="margin-bottom:12px">
        <button type="button" data-k="vege">Végétarien</button><button type="button" data-k="poisson">Sans poisson</button><button type="button" data-k="etudiant">Mode étudiant</button>
      </div>
      <details class="grp"><summary>Mes allergies <span id="profAlgCompte" style="text-transform:none;letter-spacing:0;color:var(--gray)"></span></summary>
        <p class="demo-note sans" style="margin:8px 0 8px">Les quatorze allergènes à déclaration obligatoire. Une case cochée écarte l’assiette sans exception ; vérifie toujours tes étiquettes, c’est toi qui as le dernier mot.</p>
        <div id="profAllergies" style="margin-bottom:6px"></div>
      </details>
      <details class="grp"><summary>Ce que je n’aime pas <span id="profEviteCompte" style="text-transform:none;letter-spacing:0;color:var(--gray)"></span></summary>
        <p class="demo-note sans" style="margin:8px 0 8px">Coche, et ces ingrédients ne reviendront plus dans tes assiettes.</p>
        <div id="profEvite" style="margin-bottom:8px"></div>
        <div style="display:flex;gap:8px;margin-bottom:8px">
          <input id="profEviteAutre" type="text" placeholder="Autre : coriandre, betterave…" style="flex:1;padding:11px 13px;border:1px solid var(--filet);border-radius:10px;background:var(--card);color:var(--ink);font-family:inherit;font-size:0.875rem" aria-label="Autre ingrédient à écarter">
          <button type="button" class="btn" id="profEviteAjout" style="padding:0 16px;font-size:0.875rem">Ajouter</button>
        </div>
      </details>
      <button class="btn solid" id="profOk" style="width:100%">C’est noté, on mange</button>
    </div>
    <div id="assQuestions">
      <div class="planlab">Ta journée ?</div>
      <div class="seg-ctrl wrap" id="assJournee" style="grid-template-columns:1fr 1fr 1fr;margin-bottom:14px">
        <button data-j="posee">Posée</button><button data-j="active" class="sel">Active</button><button data-j="sportive">Sportive</button>
      </div>
      <div class="planlab">Ton envie ?</div>
      <div class="seg-ctrl wrap" id="assEnvie" style="grid-template-columns:1fr 1fr 1fr;margin-bottom:14px">
        <button data-e="leger">Léger</button><button data-e="genereux">Généreux</button><button data-e="tout" class="sel">Surprends-moi</button>
      </div>
      <button class="btn solid" id="assGo" style="width:100%;margin-top:4px">Voir mon assiette</button>
      <button type="button" id="assGouts" class="sans" style="display:block;margin:14px 0 0;padding:4px 0;background:none;border:none;cursor:pointer;font-family:inherit;font-size:0.875rem;color:var(--gold-texte);text-decoration:underline;text-underline-offset:3px">Mes goûts, allergies et régime</button>
      <button class="btn" id="assSemaine" style="width:100%;margin-top:14px;font-size:0.875rem">Préparer ma semaine <small style="display:block;font-weight:400;font-size:0.75rem;margin-top:2px">petit-déj, déjeuner, dîner · et la liste de courses</small></button>
    <div style="display:flex;gap:8px;margin-top:8px">
      <button class="btn" id="assCuisine" style="flex:1;font-size:0.8125rem;padding:10px 8px">Qu’as-tu dans ta cuisine ? <small style="display:block;font-weight:400;font-size:0.6875rem;margin-top:2px">une assiette avec ce que tu as</small></button>
      <button class="btn" id="assDigestion" style="flex:1;font-size:0.8125rem;padding:10px 8px">Confier la digestion <small style="display:block;font-weight:400;font-size:0.6875rem;margin-top:2px">après le repas · ~3 min</small></button>
    </div>
    <div id="cuisineBloc" style="display:none;background:var(--card);border:1px solid var(--filet);border-radius:14px;padding:12px 14px;margin-top:8px">
      <p class="sans" style="margin:0 0 6px;font-size:0.8125rem;line-height:1.5">Écris ce que tu as sous la main, séparé par des virgules. Par exemple : <i>œufs, champignons, riz</i>.</p>
      <textarea id="cuisineTexte" rows="2" aria-label="Les aliments que tu as sous la main, séparés par des virgules" style="width:100%;box-sizing:border-box;font-family:inherit;font-size:0.875rem;padding:8px 10px;border:1px solid var(--filet-fort);border-radius:10px;background:transparent;color:var(--ink);resize:vertical"></textarea>
      <button class="btn solid" id="cuisineGo" style="width:100%;margin-top:8px;font-size:0.875rem">Trouve-moi une assiette</button>
      <div id="cuisineRes"></div>
    </div>
    </div>
    <div id="assResultat" style="display:none"></div>
    <p class="demo-note sans" style="margin-top:12px"><b>Le brut d’abord.</b> Un légume surgelé nature vaut un frais. Cuisiner soi-même permet surtout de choisir ses ingrédients, ses quantités et son temps ; un produit préparé n’est pas forcément un problème, tout dépend de sa composition, de sa fréquence et du reste de l’assiette. <b>Et l’intention ensuite :</b> dans la lecture des 7 Piliers de l’Individuation, ce qu’on met dans la préparation participe à la façon dont on reçoit le repas. C’est une image de l’attention portée, pas une chimie.</p>
    <p class="demo-note sans" style="margin-top:6px">L’app propose, n’ordonne jamais. Ce n’est ni un outil médical, ni un régime : vérifie toujours tes ingrédients si tu as une allergie.</p>
    <p class="demo-note sans" style="margin-top:6px">Et le plus local possible : le marché, le producteur d’à côté. Plus frais, plus juste, souvent moins cher en pleine saison.</p>
    <p class="demo-note sans" style="margin-top:6px">Bibliothèque élaborée en collaboration avec <a href="https://www.nutryna.fr" target="_blank" rel="noopener" style="color:var(--gold-texte)">Nutryna</a>, nutrithérapie et micronutrition.</p>
    <button class="btn" id="assBack" style="width:100%;margin-top:10px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <!-- MODULE SEMAINE -->
  <section class="screen" id="sSemaine">
    <div class="q-eyebrow sans" style="color:var(--p3)">Pilier 03 · Manger</div>
    <h1>Ta semaine, posée.</h1>
    <p class="sans" style="font-size:0.875rem;line-height:1.6;color:var(--gray);margin:2px 0 14px">Sept jours, trois repas, tes goûts respectés. Et la liste de courses qui va avec.</p>
    <div id="semPlan"></div>
    <div id="semListe" style="display:none"></div>
    <button class="btn solid" id="semCourses" style="width:100%;margin-top:10px">Voir la liste de courses</button>
    <button class="btn" id="semCalendrier" style="width:100%;margin-top:8px;font-size:0.875rem">Poser la semaine dans mon calendrier</button>
    <button class="btn" id="semRegen" style="width:100%;margin-top:8px;font-size:0.875rem">Une autre semaine</button>
    <div id="semHistorique"></div>
    <button class="btn" id="semBack" style="width:100%;margin-top:8px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <!-- POINT DU JOUR -->
  <section class="screen" id="sCheckday">
    <div class="q-eyebrow sans">Ton Point du jour · moins d’une minute</div>
    <h1 style="margin-bottom:8px">De quoi as-tu besoin maintenant ?</h1>
    <!-- rc172 : trois réponses visibles (énergie, temps, besoin), deux derrière « préciser »
         (charge mentale, nuit). Le moteur reçoit toujours les cinq : les réponses du milieu
         sont cochées d'avance, et on peut valider tel quel. -->
    <div id="checkdayContext" class="demo-note sans" style="display:block;margin:0 0 14px;line-height:1.55">Tu peux valider tel quel&nbsp;: les réponses du milieu sont déjà cochées. Si tu as un Diagnostic, le Point du jour ne le remplace pas&nbsp;: il ajuste la forme de l’expérience à ce que tu vis aujourd’hui.</div>
    <div class="pref"><div class="lab sans">Ton énergie</div>
      <div class="seg-ctrl wrap" id="cdEnergy" style="grid-template-columns:repeat(5,1fr)"><button data-v="1">Très basse</button><button data-v="2">Basse</button><button data-v="3" class="sel">Correcte</button><button data-v="4">Haute</button><button data-v="5">Très haute</button></div></div>
    <div class="pref"><div class="lab sans">Ton temps disponible</div>
      <div class="seg-ctrl wrap" id="cdTime" style="grid-template-columns:repeat(5,1fr)"><button data-v="2">2 min</button><button data-v="5" class="sel">5 min</button><button data-v="10">10 min</button><button data-v="15">15 min</button><button data-v="20">20 min +</button></div></div>
    <div class="pref"><div class="lab sans">Ton besoin, s’il est clair</div>
      <div class="seg-ctrl wrap" id="cdNeed" style="grid-template-columns:1fr 1fr"><button data-v="apaiser">M’apaiser</button><button data-v="clarte">Retrouver de la clarté</button><button data-v="energie">Retrouver de l’énergie</button><button data-v="sommeil">Préparer mon sommeil</button><button data-v="corps">Prendre soin de mon corps</button><button data-v="decision">Prendre une décision</button><button data-v="cultiver">Cultiver ce qui va bien</button><button data-v="nsp" class="sel">Je ne sais pas</button></div></div>
    <button class="btn" id="cdPlus" type="button" aria-expanded="false" aria-controls="cdPlusRows" style="width:100%;margin-top:4px;border-color:transparent;color:var(--gold-texte);font-size:0.875rem;padding:10px">Préciser · charge mentale, nuit</button>
    <div id="cdPlusRows" style="display:none">
    <div class="pref"><div class="lab sans">Ta charge mentale</div>
      <div class="seg-ctrl wrap" id="cdLoad" style="grid-template-columns:repeat(5,1fr)"><button data-v="1">Légère</button><button data-v="2" class="sel">Présente</button><button data-v="3">Forte</button><button data-v="4">Très forte</button><button data-v="5">Saturation</button></div></div>
    <div class="pref"><div class="lab sans">Ta dernière nuit</div>
      <div class="seg-ctrl wrap" id="cdSleep" style="grid-template-columns:repeat(5,1fr)"><button data-v="1">Très mauvaise</button><button data-v="2">Mauvaise</button><button data-v="3" class="sel">Moyenne</button><button data-v="4">Bonne</button><button data-v="5">Très bonne</button></div></div>
    </div>
    <button class="btn solid" id="cdGo" style="width:100%;margin-top:6px">Voir mon prochain pas</button>
      <button class="btn" id="cdBack" style="width:100%;margin-top:10px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <!-- RÉFLEXION (S’élever) -->
  <section class="screen" id="sReflex">
    <div class="q-eyebrow sans" style="color:var(--p7)">Pilier 07 · S’élever</div>
    <h1 id="reflexQ" style="margin-bottom:16px"></h1>
    <textarea id="reflexA" placeholder="Quelques mots, ou garde la réponse pour toi" style="width:100%;min-height:110px;border:1px solid var(--filet);border-radius:12px;padding:14px;font-family:inherit;font-size:0.9375rem;background:var(--card);color:var(--ink)" aria-label="Quelques mots, ou garde la réponse pour toi"></textarea>
    <div style="display:flex;gap:10px;margin-top:12px">
      <button class="btn" id="reflexKeep" style="flex:1">Garder pour moi</button>
      <button class="btn solid" id="reflexDone" style="flex:1">C’est fait</button>
    </div>
    <button class="btn" id="reflexBack" style="margin-top:12px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <!-- SÉCURITÉ -->
  <section class="screen" id="sSafety" style="justify-content:center">
    <h1 style="font-size:1.375rem">Ce que tu traverses dépasse ce que cette application peut accompagner.</h1>
    <p style="font-size:1rem;line-height:1.55;margin:14px 0">Là, tout de suite, le bon geste est humain : contacte les secours de ton pays, ou une personne de confiance, maintenant. Tu mérites une vraie présence, pas un écran.</p>
    <p class="demo-note sans">Aucune pratique n’est proposée ici volontairement : ce moment demande plus qu’une méditation.</p>
    <button class="btn solid" id="safetyBack" style="margin-top:14px">Revenir</button>
  </section>


  <!-- MODULE SE REPRODUIRE · LE FIL DU LIEN -->
  <section class="screen" id="sLien">
    <div class="q-eyebrow sans" style="color:var(--p6)">Pilier 06 · Se reproduire</div>
    <h1>Qu’est-ce que tu choisis de reproduire&nbsp;?</h1>
    <p class="demo-note sans" style="margin:-2px 0 15px">Renouveler, répéter, relier, transmettre. Nous devenons aussi ce que nous répétons et ce que nous transmettons. Aucune injonction ici, et rien qui ne soit révocable.</p>

    <div class="opts" style="margin-bottom:16px">
      <button class="opt" id="lienBesoinCarte" data-besoin="se_reproduire">De quoi as-tu besoin maintenant&nbsp;? <small>six réponses courtes, une porte pour chacune</small></button>
    </div>
    <div class="seg-ctrl wrap" id="lienDoors" style="grid-template-columns:1fr 1fr 1fr;margin-bottom:14px">
      <button data-d="corps" class="sel">Le corps</button><button data-d="esprit">L’esprit</button><button data-d="ame">L’âme</button>
    </div>
    <div id="lienDCorps">
      <div class="planlab">Ressentir · le corps qui goûte la vie</div>
      <div class="opts">
      <button class="opt" data-lp="savourer" data-durseg="C43" data-pq="savourer">La connexion <small>~2 min · le toucher comme nourriture</small></button>
      <button class="opt" id="lienJournee" data-pq="journee">Ma journée idéale <small id="lienJourneeSub">~5 min · à l’écrit · dessiner la journée que tu veux reproduire</small></button>
      </div>
    </div>
    <div id="lienDEsprit" style="display:none">
      <div class="planlab">Répéter · ce que je choisis de reproduire</div>
      <div class="opts">
      <button class="opt" id="lienUneChose" data-pq="lienUneChose">Une chose à reproduire <small>~3 min · à l’écrit · ce qui, dans cette journée, mérite d’exister à nouveau</small></button>
      <button class="opt" id="lienConscient" data-pq="lienConscient">Reproduire consciemment <small>~6 min · à l’écrit · ce que je répète déjà, et ce que je choisis</small></button>
      <button class="opt" id="lienRepro">Ce que je reproduis <small>ce que tu as choisi de refaire, et le nombre de fois</small></button>
      </div>
      <div class="planlab" style="margin-top:18px">Relier · les liens qui nourrissent</div>
      <div class="opts">
      <button class="opt" data-lp="tendresse" data-durseg="C38" data-pq="tendresse">La tendresse pour soi <small>~2 min · le premier maillon de tous les liens</small></button>
      <button class="opt" data-lp="entier" data-durseg="C39" data-pq="entier">Arriver entier à l’autre <small>~2 min · avant de retrouver quelqu’un</small></button>
      <button class="opt" data-lp="fil" data-durseg="C40" data-pq="fil">Le fil <small>~3 min · retendre un lien, de l’intérieur d’abord</small></button>
      <button class="opt" data-lp="recevoir" data-durseg="C37" data-pq="recevoir">Recevoir <small>~2 min · l’art discret qui se travaille</small></button>
      </div>
    </div>
    <div id="lienDAme" style="display:none">
      <div class="planlab">Transmettre · la trace vivante</div>
      <div class="opts">
      <button class="opt" data-lp="trace" data-durseg="C41" data-pq="trace">Ce qui passe par toi <small>~3 min · la transmission, ce qui grandit autour de toi</small></button>
      <button class="opt" data-lp="renouvelle" data-durseg="C52" data-pq="renouvelle">Ce qui se renouvelle <small>~2 min 30 · le corps se refait cellule après cellule, et garde ce que tu répètes</small></button>
      </div>
    </div>
    <div class="opts" style="margin-top:18px">
      <button class="opt" data-comprendre="se_reproduire">Comprendre ce qui se répète <small>deux lectures courtes, et l’article complet sur le site</small></button>
    </div>
    <button class="btn" id="lienBack" style="margin-top:14px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <!-- MA JOURNÉE IDÉALE (Se reproduire · le corps) -->
  <section class="screen" id="sJournee">
    <div class="q-eyebrow sans" style="color:var(--p6)">Pilier 06 · Se reproduire</div>
    <div id="journeeBody"></div>
    <button class="btn" id="journeeBack" style="margin-top:14px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <!-- MODULE S’ÉLEVER -->
  <section class="screen" id="sElever">
    <div class="q-eyebrow sans" style="color:var(--p7)">Pilier 07 · S’élever</div>
    <h1>Vers quoi est-ce que tu vas&nbsp;?</h1>
    <p class="demo-note sans" style="margin:-2px 0 15px">Transcender, se délester, trouver du sens, faire confiance. Retrouver sa juste place pour habiter le présent en paix&nbsp;: un passé réconcilié, un futur confié, un présent habité.</p>

    <div class="opts" style="margin-bottom:16px">
      <button class="opt" id="eleverBesoinCarte" data-besoin="s_elever">De quoi as-tu besoin maintenant&nbsp;? <small>six réponses courtes, une porte pour chacune</small></button>
    </div>
    <div class="seg-ctrl wrap" id="eleverDoors" style="grid-template-columns:1fr 1fr 1fr;margin-bottom:14px">
      <button data-d="esprit" class="sel">L’esprit</button><button data-d="corps">Le corps</button><button data-d="ame">L’âme</button>
    </div>
    <div id="eleverDEsprit">
      <div class="planlab">Se délester · ce qui ne dépend pas de toi</div>
      <div class="opts">
      <button class="opt" id="eleverDepend" data-pq="eleverDepend">Ce qui dépend de moi <small>~4 min · à l’écrit · trier une fois, et respirer mieux</small></button>
      </div>
      <div class="planlab" style="margin-top:18px">Trouver du sens · l’écart entre dire et vivre</div>
      <div class="opts">
      <button class="opt" id="eleverEcart" data-pq="eleverEcart">L’écart <small>~5 min · à l’écrit · ce que je dis qui compte, et ce à quoi j’ai donné mon temps</small></button>
      </div>
      <div class="planlab" style="margin-top:18px">Laisser redescendre · le mental qui se dépose</div>
      <div class="opts">
      <button class="opt" data-ep="matin" data-durseg="C32" data-pq="matin">La question du matin <small id="elevMatinSub">~2 min 30 · poser le cap avant que la journée se remplisse</small></button>
      <button class="opt" data-ep="revue" data-durseg="C33" data-pq="revue">La revue du soir <small>~3 min · relire la journée, avec des yeux honnêtes</small></button>
      <button class="opt" id="elevQuestion" data-pq="elevQuestion">Une question qui éclaire <small>~2 min · à l’écrit, pour toi</small></button>
      </div>
    </div>
    <div id="eleverDCorps" style="display:none">
      <div class="planlab">Retrouver l’axe · la verticale physique</div>
      <div class="opts">
      <button class="opt" data-ep="axe" data-durseg="C36" data-pq="axe">L’axe <small>~3 min · la ligne intérieure qui reste droite</small></button>
      <button class="opt" id="elevDouche" data-pq="douche">Sous la douche <small>à ta prochaine douche · laisser l’eau emporter ce qui pèse</small></button>
      </div>
    </div>
    <div id="eleverDAme" style="display:none">
      <div class="planlab">Monter · ce qui se confie et s’élève</div>
      <div class="opts">
      <button class="opt" data-ep="gratitude" data-durseg="C34" data-pq="gratitude">La gratitude verticale <small>~2 min 30 · le merci qui monte</small></button>
      <button class="opt" data-ep="futur" data-durseg="C42" data-pq="futur">Confier le futur <small>~2 min 30 · ta part, et le reste qui se dépose</small></button>
      <button class="opt" data-ep="grand" data-durseg="C53" data-pq="grand">Se relier au grand <small>~2 min 30 · l’air, l’eau, les étoiles : tu es fait du monde</small></button>
      </div>
    </div>
    <div class="opts" style="margin-top:18px">
      <button class="opt" data-comprendre="s_elever">Comprendre ce qui me porte <small>deux lectures courtes, et l’article complet sur le site</small></button>
    </div>
    <button class="btn" id="eleverBack" style="margin-top:14px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <!-- SOUS LA DOUCHE (S’élever · le corps) -->
  <section class="screen" id="sDouche">
    <div class="q-eyebrow sans" style="color:var(--p7)">Pilier 07 · S’élever</div>
    <h1>À ta prochaine douche.</h1>
    <p style="font-size:1rem;line-height:1.6;margin:0 0 14px">Quand l’eau coule sur toi, laisse-la faire son travail : elle nettoie la peau, elle peut aussi emporter le reste.</p>
    <p style="font-size:1rem;line-height:1.6;margin:0 0 14px">Visualise ce qui te pèse en ce moment : une tension, une pensée qui tourne, une fatigue. Vois l’eau passer dessus, la décoller, la faire glisser vers le sol, puis vers l’évacuation.</p>
    <p style="font-size:1rem;line-height:1.6;margin:0 0 14px">Pose l’intention simple de sortir de la douche nettoyé de ce qui pèse en toi. Le corps comprend cette image tout de suite.</p>
    <p class="demo-note sans" style="margin:0 0 18px">Deux ou trois minutes suffisent. Rien à réussir : l’eau fait l’essentiel.</p>
    <button class="btn solid" id="doucheFait" style="width:100%">C’est fait, je sors plus léger</button>
    <button class="btn" id="doucheEmporte" style="width:100%;margin-top:10px">Je l’emporte sous la douche</button>
    <button class="btn" id="doucheBack" style="margin-top:12px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>


  <!-- MODE D’EMPLOI DES TROIS PLANS -->
  <section class="screen" id="sPlans">
    <div class="q-eyebrow sans">Le mode d’emploi</div>
    <h1>Chaque pilier s’ouvre par trois portes.</h1>
    <p class="sans" style="font-size:0.875rem;line-height:1.6;color:var(--gray);margin:4px 0 16px">La même logique partout : observer, comprendre, choisir. Chaque porte travaille un plan de toi, et les trois se renforcent.</p>
    <div class="tipcard" style="margin:0 0 12px"><div class="tiplab sans">Le corps · le plan physique</div>
      <div style="font-size:0.9375rem;line-height:1.6">Tout ce qui se vit par le corps : les sensations, le souffle, le mouvement, les appuis, l’énergie. C’est la porte la plus directe : le corps répond tout de suite, sans débat. On y apprend à l’écouter, à le délier, à le ressentir : un corps traité en allié devient le socle de tout le reste.</div></div>
    <div class="tipcard" style="margin:0 0 12px"><div class="tiplab sans">L’esprit · le plan cognitif et émotionnel</div>
      <div style="font-size:0.9375rem;line-height:1.6">Les pensées, la charge mentale, les émotions, l’attention. Ici, on observe et on nomme : une pensée regardée en face pèse déjà moins, une émotion nommée redevient une information. On y cultive la clarté : trier ce qui occupe l’esprit, garder ce qui compte, orienter le reste.</div></div>
    <div class="tipcard" style="margin:0 0 12px"><div class="tiplab sans">L’âme · le plan du sens et de l’ego</div>
      <div style="font-size:0.9375rem;line-height:1.6">Le plan de ce qui se dépose et de ce qui se cultive. Ce qui se dépose : le mental qui tourne, les émotions qui débordent, l’ego qui veut tout tenir. Ce qui se cultive : la gratitude, la confiance, le sens. La foi s’y pratique comme un état : un apaisement suffisant pour faire confiance. Et chacun choisit librement ce qu’il met derrière : la vie, le hasard, ses ancêtres, ou ce que sa foi nomme. L’observation suffit pour commencer ; le reste t’appartient.</div></div>
    <p class="demo-note sans" style="text-align:center">On s’élève de tout ce qu’on laisse redescendre.</p>
    <button class="btn" id="plansBack" style="margin-top:10px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <!-- COMPAGNON SE MOUVOIR -->
  <section class="screen" id="sMouv">
    <div class="q-eyebrow sans" style="color:var(--p4)">Pilier 04 · Se mouvoir</div>
    <h1>Qu’est-ce que ton corps n’a pas fait aujourd’hui&nbsp;?</h1>
    <p class="demo-note sans" style="margin:-2px 0 15px">Mobiliser, solliciter, adapter, récupérer. Un corps sert à agir&nbsp;: l’entretenir, c’est le garder disponible. Aucune performance ici, aucune série à tenir.</p>

    <div class="opts" style="margin-bottom:16px">
      <button class="opt" id="mouvBesoinCarte" data-besoin="se_mouvoir">De quoi as-tu besoin maintenant&nbsp;? <small>six réponses courtes, une porte pour chacune</small></button>
    </div>

    <div class="seg-ctrl wrap" id="mouvDoors" style="grid-template-columns:1fr 1fr 1fr;margin-bottom:14px">
      <button data-d="corps" class="sel">Le corps</button><button data-d="esprit">L’esprit</button><button data-d="ame">L’âme</button>
    </div>
    <div id="mouvDCorps">
      <div class="planlab">Mouvement quotidien · avec ce que tu as sous la main</div>
      <div class="opts">
      <button class="opt" id="mouvEnviron" data-durseg="C58" data-pq="mouvEnviron">Utilise ton environnement <small>~3 min · une chaise, un mur, le sol, des escaliers</small></button>
      </div>
      <div class="planlab" style="margin-top:18px">Tranquille · délier et préparer</div>
      <div class="opts">
      <button class="opt" data-r="reveil" data-durroutine="reveil" data-pq="reveil">Le réveil articulaire <small>~5 min · debout · pour ouvrir la journée</small></button>
      <button class="opt" data-r="soir" data-durroutine="soir" data-pq="soir">La mobilité du soir <small>~6 min · douce · pour préparer la détente</small></button>
      </div>
      <div class="planlab">Dynamique · relancer le courant</div>
      <div class="opts">
      <button class="opt" data-r="pause" data-durroutine="pause" data-pq="pause">La pause énergie <small>~5 min · au bureau · pour relancer l’après-midi</small></button>
      <button class="opt" data-r="dynamique" data-durroutine="dynamique" data-pq="dynamique">La relance dynamique <small>~5 min · qui réveille vraiment · à ton allure</small></button>
      </div>
      <div class="tipcard sans" id="emporterCarte" style="margin-top:16px;text-align:left">
        <div class="tiplab sans">Avion, métro, montagne</div>
        <div id="emporterEtat" aria-live="polite" style="margin-bottom:10px">Ma voix se garde au fur et à mesure que tu écoutes. Tu peux aussi tout emporter d’un coup, pour les fois où il n’y a pas de réseau.</div>
        <button class="btn ghost" id="emporterGo" style="width:100%">Emporter les quatre routines</button>
        <div class="micro" id="emporterNote" aria-live="polite" style="margin-top:8px">Environ 6,6 Mo · rien ne part de ton appareil</div>
      </div>
    </div>
    <div id="mouvDEsprit" style="display:none">
      <div class="planlab">Le corps qui pense · attention en mouvement</div>
      <div class="opts">
      <button class="opt" data-mp="marche1" data-durseg="C29" data-pq="marche1">La marche consciente <small>~3 min · en marchant · le trajet devient pratique</small></button>
      <button class="opt" data-mp="marche2" data-durseg="C30" data-pq="marche2">La marche qui dépose <small>~2 min 30 · en marchant · l’esprit se pose pas à pas</small></button>
      <button class="opt" data-mp="poste" data-durseg="C31" data-pq="poste">La pause au poste <small>~2 min · assis au bureau · nuque et épaules écoutées</small></button>
      </div>
    </div>
    <div id="mouvDAme" style="display:none">
      <div class="planlab">Honorer · le corps-temple</div>
      <div class="opts">
      <button class="opt" data-mp="honorer" data-durseg="C46" data-pq="honorer">Bouger pour honorer <small>~2 min 30 · chaque geste peut se faire offrande</small></button>
      <button class="opt" data-mp="tonus" data-durseg="C51" data-pq="tonus">La confiance du mouvement <small>~2 min 30 · debout ou assis · les bons muscles au bon moment, tout seuls</small></button>
      </div>
    </div>
    <div class="demo-note sans" style="margin-top:12px">Je t’annonce chaque étape à la voix : pose le téléphone, garde les mains libres. Et la règle du pilier : une douleur parle ? On écoute, on ne traverse pas.</div>
    <div class="opts" style="margin-top:18px">
      <button class="opt" data-comprendre="se_mouvoir">Comprendre mon mouvement <small>deux lectures courtes, et l’article complet sur le site</small></button>
    </div>
    <button class="btn" id="mouvBack" style="margin-top:14px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <section class="screen" id="sMouvRun" style="align-items:center;text-align:center;justify-content:center;gap:6px">
    <div class="session-int sans" id="mouvRoutineName"></div>
    <div class="q-eyebrow sans" id="mouvStepCount" style="margin:0"></div>
    <div class="serif" id="mouvStepName" style="font-size:1.625rem;line-height:1.25;max-width:320px"></div>
    <canvas id="mouvFigure" aria-hidden="true" style="width:196px;height:214px;margin:4px 0 2px"></canvas>
    <div class="serif" id="mouvClock" style="font-size:2.75rem;color:var(--gold-texte);margin:0"></div>
    <div class="demo-note sans" id="mouvNext" style="margin:0"></div>
    <div class="demo-note sans" style="opacity:.75">Une douleur parle ? On écoute, on ne traverse pas.</div>
    <div class="playbtns">
      <button class="btn" id="mouvPause">Pause</button>
      <button class="btn" id="mouvSkip" style="border-color:rgba(108,104,95,.5);color:var(--gray)">Étape suivante</button>
      <button class="btn" id="mouvStop" style="border-color:transparent;color:var(--gray)">Arrêter</button>
    </div>
  </section>

  <!-- ARCHITECTE DU SOIR -->
  <section class="screen" id="sSoir">
    <div class="q-eyebrow sans" style="color:var(--p5)">Pilier 05 · Se reposer</div>
    <h1>Qu’est-ce qui a besoin de redescendre avant de repartir&nbsp;?</h1>
    <p class="demo-note sans" style="margin:-2px 0 15px">Se reposer, c’est restaurer ta disponibilité. Le repos rend l’action de nouveau possible.</p>

    <div class="opts" style="margin-bottom:16px">
      <button class="opt" id="soirBesoinCarte" data-besoin="se_reposer">De quoi as-tu besoin maintenant&nbsp;? <small>sept réponses courtes, une porte pour chacune</small></button>
    </div>

    <div class="seg-ctrl wrap" id="soirDoors" style="grid-template-columns:1fr 1fr 1fr;margin-bottom:14px">
      <button data-d="corps" class="sel">Le corps</button><button data-d="esprit">L’esprit</button><button data-d="ame">L’âme</button>
    </div>
    <div id="soirDEsprit" style="display:none">
      <div class="planlab">Déposer · la journée reste dehors</div>
      <div class="opts">
      <button class="opt" id="soirDeposer" data-pq="soirDeposer">Déposer la journée <small>~3 min · trois phrases, et la journée reste dehors</small></button>
      <button class="opt" id="soirSas" data-pq="soirSas">Le sas de décompression <small>~5 à 15 min · une méditation Apaiser avant de retrouver les tiens</small></button>
      </div>
    </div>
    <div id="soirDAme" style="display:none">
      <div class="planlab">Confier · la nuit sait ce qu’elle fait</div>
      <div class="opts">
      <button class="opt" id="soirNuit" data-durseg="C47" data-pq="soirNuit">La nuit confiée <small>~2 min 30 · s’endormir comme acte de confiance</small></button>
      </div>
    </div>
    <div id="soirDCorps">
    <div class="planlab" id="soirTitle">L’architecte du soir</div>
    <div id="soirAudit">
      <div class="demo-note sans" style="margin-bottom:12px">Quatre réponses, une fois : ton plan du soir se calera dessus.</div>
      <div class="pref"><div class="lab sans">Réveil demain</div>
        <input type="time" id="soirWake" value="06:30" class="timein" aria-label="Réveil demain"></div>
      <div class="pref"><div class="lab sans">Tu es plutôt…</div>
        <div class="seg-ctrl wrap" id="soirChrono" style="grid-template-columns:1fr 1fr 1fr"><button data-v="matin">Du matin</button><button data-v="entre" class="sel">Entre les deux</button><button data-v="soir">Du soir</button></div></div>
      <div class="pref"><div class="lab sans">Dîner habituel</div>
        <input type="time" id="soirDiner" value="19:30" class="timein" aria-label="Dîner habituel"></div>
      <div class="pref"><div class="lab sans">Tes soirées</div>
        <div class="seg-ctrl wrap" id="soirCadre" style="grid-template-columns:1fr 1fr 1fr"><button data-v="moi" class="sel">Pour moi</button><button data-v="couple">À deux</button><button data-v="famille">En famille</button></div></div>
      <button class="btn solid" id="soirStart" style="width:100%">Construire mes soirs</button>
    </div>

    <div id="soirCheckin" style="display:none">
      <div class="q-eyebrow sans" style="margin-top:4px">Ce soir · 3 réponses</div>
      <div class="pref"><div class="lab sans">Tu finis à quelle heure ?</div>
        <input type="time" id="soirFin" value="18:30" class="timein" aria-label="Tu finis à quelle heure"></div>
      <div class="pref"><div class="lab sans">Ta soirée ?</div>
        <div class="seg-ctrl wrap" id="soirMode" style="grid-template-columns:1fr 1fr 1fr 1fr"><button data-v="moi">Pour moi</button><button data-v="couple">À deux</button><button data-v="famille" class="sel">Famille</button><button data-v="sortie">Je sors</button></div></div>
      <div class="pref"><div class="lab sans">Ton besoin ce soir ?</div>
        <div class="seg-ctrl wrap" id="soirBesoin" style="grid-template-columns:1fr 1fr 1fr"><button data-v="dormir">M’endormir vite</button><button data-v="sas" class="sel">Décompresser</button><button data-v="qualite">Temps de qualité</button></div></div>
      <button class="btn solid" id="soirGo" style="width:100%">Mon plan du soir</button>
    </div>

    <div id="soirPlan" style="display:none">
      <div class="demo-note sans" id="soirPlanNote" aria-live="polite" style="margin:2px 0 12px"></div>
      <div id="soirTimeline"></div>
      <button class="btn solid" id="soirRitual" style="width:100%;margin-top:14px">Lancer le rituel maintenant</button>
      <div style="display:flex;gap:10px;margin-top:10px">
        <button class="btn" id="soirIcs" style="flex:1;font-size:0.875rem;padding:12px 8px">Mettre au calendrier</button>
        <button class="btn" id="soirNotif" style="flex:1;font-size:0.875rem;padding:12px 8px">Activer les rappels</button>
      </div>
      <div class="demo-note sans" id="soirPlugNote" aria-live="polite" style="min-height:16px;text-align:center"></div>
      <button class="btn" id="soirRedo" style="margin-top:6px;border-color:transparent;color:var(--gray)">Modifier ce soir</button>
    </div>
      <div class="planlab" style="margin-top:22px">Récupérer éveillé · sans obligation de dormir</div>
      <div class="opts">
        <button class="opt" id="soirProfond" aria-expanded="false" aria-controls="soirProfondChoix">Repos profond guidé <small>Laisse le corps récupérer sans avoir besoin de dormir.</small></button>
      </div>
      <!-- rc168 : une seule entree visible, trois chemins derriere. Jamais un quatrieme
           sans usage mesure qui le justifie (voir tests/testnsdr.js). -->
      <div id="soirProfondChoix" style="display:none">
        <div class="q-eyebrow sans" style="margin-top:10px">De quoi as-tu besoin&nbsp;?</div>
        <div class="opts">
          <button class="opt" id="soirRedescendre" data-durseg="C59" data-pq="soirRedescendre">Redescendre <small>~11 min · entre deux temps forts, revenir au calme du corps</small></button>
          <button class="opt" id="soirProfondRef" data-durseg="C55" data-pq="soirProfond">Récupérer profondément <small>~19 min · le corps se dépose, le sommeil reste facultatif</small></button>
          <button class="opt" id="soirLacher" data-durseg="C60" data-pq="soirLacher">Lâcher le mental <small>~22 min · quand le corps est posé et que la tête continue</small></button>
        </div>
      </div>
      <div class="demo-note sans" style="margin-top:8px">Ces trois chemins s’inspirent notamment de techniques de relaxation profonde, du Yoga Nidra et de ce qui est parfois regroupé aujourd’hui sous le terme NSDR, Non-Sleep Deep Rest. Ils visent à te rendre de la disponibilité. Le sommeil peut venir, et il reste facultatif.</div>
    </div>

    <div class="opts" style="margin-top:18px">
      <button class="opt" id="soirComprendre" data-comprendre="se_reposer">Comprendre mon sommeil <small>dix lectures courtes, et l’article complet sur le site</small></button>
    </div>

    <button class="btn" id="soirBack" style="margin-top:14px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <!-- DE QUOI AS-TU BESOIN MAINTENANT · les sept piliers -->
  <section class="screen" id="sBesoin">
    <div class="q-eyebrow sans" id="besoinSurtitre">Se reposer · maintenant</div>
    <h1>De quoi as-tu besoin&nbsp;?</h1>
    <p class="demo-note sans" id="besoinIndice" style="margin:-2px 0 14px" aria-live="polite"></p>
    <div class="opts" id="besoinListe"></div>
    <div id="besoinReponse" style="display:none">
      <div class="planlab" id="besoinRepLab"></div>
      <p id="besoinRepTxt" style="font-size:1rem;line-height:1.6;margin:0 0 14px"></p>
      <div class="opts" id="besoinRepActions"></div>
      <button class="btn" id="besoinAutre" style="width:100%;margin-top:12px;border-color:transparent;color:var(--gray)">Choisir autre chose</button>
    </div>
    <button class="btn" id="besoinBack" style="margin-top:14px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <!-- SE REPOSER · DEPOSER LA JOURNEE -->
  <section class="screen" id="sDeposer">
    <div class="q-eyebrow sans" style="color:var(--p5)">Se reposer · l’esprit</div>
    <h1>Déposer la journée.</h1>
    <p class="demo-note sans" style="margin:-2px 0 18px">Trois phrases, et la journée reste dehors. Écris court&nbsp;: ce qui est nommé cesse de tourner.</p>

    <div class="pref"><div class="lab sans">Qu’est-ce qui est terminé pour aujourd’hui&nbsp;?</div>
      <textarea id="depFini" rows="2" class="deposer-champ" placeholder="Ce qui est fait, même petit." aria-label="Qu’est-ce qui est terminé pour aujourd’hui ?"></textarea></div>

    <div class="pref"><div class="lab sans">Qu’est-ce qui attendra demain&nbsp;?</div>
      <textarea id="depDemain" rows="2" class="deposer-champ" placeholder="Ce qui garde toute sa place, demain." aria-label="Qu’est-ce qui attendra demain ?"></textarea></div>

    <div class="pref"><div class="lab sans">Qu’est-ce que tu choisis de déposer ce soir&nbsp;?</div>
      <textarea id="depPose" rows="2" class="deposer-champ" placeholder="Ce que tu laisses là, pour la nuit." aria-label="Qu’est-ce que tu choisis de déposer ce soir ?"></textarea></div>

    <div class="tipcard" id="depMot" style="margin-top:16px">Le reste attendra demain, et ce sera très bien.</div>

    <button class="btn solid" id="depGarder" style="width:100%;margin-top:16px">Déposer</button>
    <p class="demo-note sans" id="depNote" aria-live="polite" style="min-height:18px;text-align:center;margin-top:8px"></p>
    <button class="btn" id="depBack" style="width:100%;margin-top:4px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <!-- SE REPOSER · COMPRENDRE MON SOMMEIL -->
  <section class="screen" id="sComprendre">
    <div class="q-eyebrow sans" id="comprendreSurtitre">Se reposer · comprendre</div>
    <h1 id="comprendreTitre">Comprendre mon sommeil.</h1>
    <p class="demo-note sans" id="comprendreSous" style="margin:-2px 0 14px">Des lectures de deux minutes. Chacune dit d’où vient ce qu’elle avance.</p>
    <div class="opts" id="capsuleListe"></div>
    <a id="comprendreArticle" class="btn" target="_blank" rel="noopener" style="display:block;text-align:center;text-decoration:none;margin-top:16px">L’article complet est sur le site</a>
    <button class="btn" id="capsuleBack" style="width:100%;margin-top:14px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <!-- COMPAGNON BOIRE -->
  <section class="screen" id="sBoire">
    <div class="q-eyebrow sans" style="color:var(--p2)">Pilier 02 · Boire</div>
    <h1>De quoi ton corps a-t-il besoin maintenant&nbsp;?</h1>
    <p class="demo-note sans" style="margin:-2px 0 15px">Percevoir, répondre, équilibrer, adapter. Ton besoin d’eau change avec la chaleur, l’effort, ce que tu manges&nbsp;: aucun chiffre unique ne vaut pour tout le monde, ni pour tous les jours.</p>

    <div class="opts" style="margin-bottom:16px">
      <button class="opt" id="boireBesoinCarte" data-besoin="boire">De quoi as-tu besoin maintenant&nbsp;? <small>six réponses courtes, une porte pour chacune</small></button>
    </div>
    <div class="seg-ctrl wrap" id="boireDoors" style="grid-template-columns:1fr 1fr 1fr;margin-bottom:14px">
      <button data-d="corps" class="sel">Le corps</button><button data-d="esprit">L’esprit</button><button data-d="ame">L’âme</button>
    </div>
    <div id="boireDCorps">
    <div class="planlab" id="boireTitle">S’hydrater · verre après verre</div>
    <div id="boireAudit">
      <div class="demo-note sans" style="margin-bottom:10px">Trois réponses pour caler ton repère du jour, modifiables quand tu veux.</div>
      <div class="pref"><div class="lab sans">Ta journée</div>
        <div class="seg-ctrl" id="waterAct"><button data-v="pose" class="sel">Plutôt posée</button><button data-v="actif">Active / sportive</button></div></div>
      <div class="pref"><div class="lab sans">La météo</div>
        <div class="seg-ctrl" id="waterHeat"><button data-v="normal" class="sel">Normale</button><button data-v="chaud">Chaude</button></div></div>
      <div class="pref"><div class="lab sans">Pour mieux adapter certains repères</div>
        <div class="seg-ctrl" data-pref="reperePhysio" style="grid-template-columns:1fr 1fr 1fr"><button data-v="femme">Femme</button><button data-v="homme">Homme</button><button data-v="aucun" class="sel">Ne pas préciser</button></div>
        <div class="demo-note sans" style="margin-top:6px">Certains repères physiologiques diffèrent selon les références scientifiques. Tu peux choisir celui que l’app utilise. C’est facultatif, ça se change à tout moment dans les réglages, et ça reste sur cet appareil : jamais envoyé.</div></div>
      <button class="btn solid" id="waterStart" style="width:100%">C’est parti</button>
    </div>
    <div class="planlab" style="margin-top:20px">Ritualiser · là où l’eau se trouve déjà</div>
    <div class="opts">
      <button class="opt" id="boireMoments" data-pq="boireMoments">Mes trois moments <small>~3 min · à l’écrit · accrocher l’eau à ce que tu fais déjà</small></button>
    </div>
    <div id="boireTrack" style="display:none">
      <div class="planlab">Suivre et ressentir · verre après verre</div>
      <button class="opt" id="waterZen" data-pq="waterZen" style="margin:0 0 10px">Boire celui-ci en conscience <small>~2 min · le verre devient une pratique</small></button>
      <div id="glassRow" style="display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px"></div>
      <div class="demo-note sans" id="waterMsg" aria-live="polite" style="min-height:20px"></div>
      <button class="btn solid" id="waterPlus" style="width:100%;font-size:1.125rem;padding:16px">+ 1 verre</button>
      <div class="demo-note sans" id="waterNote" style="margin-top:8px"></div>

    </div>
    </div>
    <div id="boireDEsprit" style="display:none">
      <div class="planlab">Fluidifier · ce qui demande à couler</div>
      <div class="opts">
      <button class="opt" id="boireFluide" data-durseg="C54" data-pq="boireFluide">Ce qui a besoin de fluidité <small>~3 min · un sujet regardé, et la permission de couler</small></button>
      </div>
      <div class="planlab" style="margin-top:18px">Fluidifier · la décision qui simplifie</div>
      <div style="background:var(--card);border:1px solid var(--filet);border-radius:14px;padding:16px">
        <div style="font-size:1rem;line-height:1.45;margin-bottom:10px">Quelle décision peux-tu prendre pour que cette journée soit plus fluide&nbsp;?</div>
        <input id="fluidAnswer" placeholder="Une phrase suffit, ou garde-la pour toi" style="width:100%;border:none;border-bottom:1px solid var(--filet);background:transparent;padding:8px 2px;font-family:inherit;font-size:0.9375rem;color:var(--ink)" aria-label="Une phrase suffit, ou garde-la pour toi">
        <div class="demo-note sans" id="fluidSaved" style="min-height:16px;margin-top:6px"></div>
      </div>
      <div class="demo-note sans" style="margin-top:10px">L’eau épouse, contourne, continue. Cette question t’apprend son geste.</div>
    </div>
    <div id="boireDAme" style="display:none">
      <div class="planlab">Relier · l’eau qui te traverse</div>
      <div class="opts">
      <button class="opt" id="boireAme" data-durseg="C45" data-pq="boireAme">L’eau qui relie <small>~2 min 30 · le cycle qui te dépasse et t’inclut</small></button>
      <button class="opt" id="boireConfiance" data-durseg="C50" data-pq="boireConfiance">La confiance de l’eau <small>~2 min 30 · je bois, et le corps s’occupe du reste</small></button>
      </div>
    </div>
    <div class="opts" style="margin-top:18px">
      <button class="opt" data-comprendre="boire">Comprendre ce qui circule <small>deux lectures courtes, et l’article complet sur le site</small></button>
    </div>
    <button class="btn" id="boireBack" style="margin-top:16px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <!-- CHECK-IN -->
  <section class="screen" id="sQ1">
    <div class="q-eyebrow sans">Ta pratique du jour · 1/3</div>
    <h1>Tu arrives comment&nbsp;?</h1>
    <div class="opts" role="group">
      <button class="opt" data-v="tendu">Tendu, agité</button>
      <button class="opt" data-v="fatigue">Éteint, fatigué</button>
      <button class="opt" data-v="charge">Chargé mentalement</button>
      <button class="opt" data-v="dispo">Disponible</button>
    </div>
    <div class="intens" id="intensBox">
      <div class="ilab sans" id="intensLab">À quel point ?</div>
      <div class="irow">
        <button class="opt" data-i="1"><span class="dots"><i></i></span>Un peu</button>
        <button class="opt" data-i="2"><span class="dots"><i></i><i></i></span>Bien présent</button>
        <button class="opt" data-i="3"><span class="dots"><i></i><i></i><i></i></span>Très fort</button>
      </div>
    </div>
    <div class="stepdots"><i class="done"></i><i></i><i></i></div>
    <button class="btn" id="testSound" style="margin:14px auto 0;font-size:0.875rem;padding:10px 22px">Tester le son</button>
    <div class="demo-note sans" id="soundStatus" style="text-align:center;margin-top:8px;min-height:18px"></div>
      <button class="btn" id="q1Back" style="width:100%;margin-top:10px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <section class="screen" id="sQ2">
    <div class="q-eyebrow sans">Ta pratique du jour · 2/3</div>
    <h1>Tu cherches quoi, là&nbsp;?</h1>
    <div class="opts" role="group">
      <button class="opt" data-v="cultiver" id="optCultiver">Cultiver ce qui va <small>savourer, ancrer</small></button>
      <button class="opt" data-v="apaiser">Apaiser <small>relâcher la tension</small></button>
      <button class="opt" data-v="clarte">Retrouver de la clarté <small>aérer l’esprit</small></button>
      <button class="opt" data-v="sommeil">Préparer le sommeil <small>glisser vers la nuit</small></button>
      <button class="opt" data-v="recentrage">Me recentrer <small>revenir ici</small></button>
    </div>
    <div class="stepdots"><i class="done"></i><i class="done"></i><i></i></div>
  </section>

  <section class="screen" id="sQ3">
    <div class="q-eyebrow sans" id="q3Eyebrow">Ta pratique du jour · 3/3</div>
    <h1>Tu as combien de temps&nbsp;?</h1>
    <div class="demo-note sans" id="q3Note" style="display:none;margin:-4px 0 12px"></div>
    <div class="opts durrow" role="group">
      <button class="opt" data-v="5">5<small>min</small></button>
      <button class="opt" data-v="10">10<small>min</small></button>
      <button class="opt" data-v="15">15<small>min</small></button>
    </div>
    <div class="stepdots" id="q3Dots"><i class="done"></i><i class="done"></i><i class="done"></i></div>
      <button class="btn" id="q3Back" style="width:100%;margin-top:10px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <!-- PARCOURS DÉCOUVERTE · activé lorsque FREE_ACCESS=false -->
  <section class="screen" id="sDiscoveryPath">
    <div class="q-eyebrow sans" id="discoveryEyebrow">Ton expérience offerte est terminée</div>
    <h1 id="discoveryTitle">Ce que l’app pourrait te proposer ensuite.</h1>
    <p class="sans" id="discoveryIntro" style="font-size:0.9375rem;line-height:1.65;color:var(--gray);margin:2px 0 14px">Ta lecture du test a ouvert une première porte. La suite devient un parcours vivant : ton état du jour, tes pratiques et ton historique affinent progressivement ce qui t’est proposé.</p>
    <p class="demo-note sans" id="discoveryFreeNote" aria-live="polite" style="display:none;margin:0 0 12px;color:var(--gold-texte)"></p>
    <div id="discoveryPathList"></div>
    <button class="btn solid" id="discoveryContinue" style="width:100%;margin-top:14px">Continuer avec Les 7 Piliers de l’Individuation</button>
    <button class="btn" id="discoveryLater" style="width:100%;margin-top:8px;border-color:transparent;color:var(--gray)">Plus tard</button>
  </section>

  <!-- LES FORMULES · paiement Stripe en production -->
  <section class="screen" id="sPay">
    <div class="q-eyebrow sans">Continuer ton parcours</div>
    <h1>Choisis la profondeur qui te convient.</h1>
    <p id="payOffre" class="tipcard sans" style="display:none;font-size:0.875rem;line-height:1.6;margin:12px 0;padding:14px" aria-live="polite"></p>
    <div style="display:flex;flex-direction:column;gap:12px;margin-bottom:14px">
      <button class="opt" id="payYear" style="border-color:var(--gold);position:relative">
        <div><b>149,99 € / an</b> <small>l’application complète + le Diagnostic écrit offert · sans reconduction tacite</small></div>
        <span class="sans" style="position:absolute;top:-9px;right:12px;background:var(--gold);color:#fff;font-size:0.75rem;letter-spacing:.08em;padding:3px 9px;border-radius:999px">EXPÉRIENCE LA PLUS PROFONDE</span>
      </button>
      <button class="opt" id="payMonth"><div><b>12,99 € / mois</b> <small>l’application complète · résiliation libre</small></div></button>
    </div>
    <div class="demo-note sans">L’abonnement ouvre toutes les pratiques et laisse l’app apprendre de ton usage. Avec l’annuel, le Diagnostic écrit est offert et ajoute une lecture plus profonde : piliers à explorer, portes Corps / Esprit / Âme et personnalisation renforcée.</div>
    <p class="demo-note sans" style="margin:10px 0 0;text-align:center;color:var(--gold-texte)">Chaque abonnement soutient l’association Un Maillot pour la Vie : 1 € par mois, ou 14,99 € par année.</p>
    <p class="demo-note sans" style="margin:8px 0 0;text-align:center">Étudiant ? 9,99 € / mois ou 119,99 € / an avec ton adresse universitaire, sur <a href="https://agostinijohnatan.com/etudiants" target="_blank" rel="noopener" style="color:var(--gray)">la page étudiants</a>.</p>
    <p class="demo-note sans" id="payStripeNote" aria-live="polite" style="display:none;margin:8px 0 0">Paiement sécurisé par Stripe. Ton accès arrive par e-mail après confirmation du paiement : le bouton du message l’ouvre, tu n’as rien à recopier. En payant, tu demandes l’accès immédiat et renonces au délai de rétractation.</p>
    <p class="demo-note sans" style="margin:6px 0 0;text-align:center"><a href="https://agostinijohnatan.com/cgv-application" target="_blank" rel="noopener" style="color:var(--gray)">Conditions générales</a> · <a href="https://agostinijohnatan.com/confidentialite" target="_blank" rel="noopener" style="color:var(--gray)">Confidentialité</a></p>
    <p class="demo-note sans" id="payReduction" style="margin:8px 0 0;text-align:center"></p>
    <!-- rc184 · Aucune porte de code ici. Sur un ecran qui vend un abonnement,
         « j'ai deja un code » fait douter le lecteur de ce qu'il est cense
         posseder. Le code se saisit APRES : le courriel porte un bouton qui
         l'active tout seul, l'entree offre « J'ai un code », et Mon espace
         « Importer ou mettre a jour mon code ». « Plus tard », ci-dessous,
         ramene justement a l'entree quand l'espace n'existe pas encore. -->
    <button class="btn" id="payLater" style="width:100%;margin-top:8px;border-color:transparent;color:var(--gray)">Plus tard</button>
  </section>

  <section class="screen" id="sPaymentBeta">
    <div class="q-eyebrow sans">Ton accès</div>
    <h1 id="paymentBetaTitle">Ton choix est clair.</h1>
    <p class="sans" id="paymentBetaText" style="font-size:0.9375rem;line-height:1.65;color:var(--gray);margin:2px 0 14px"></p>
    <div class="tipcard sans" style="text-align:left;margin-bottom:12px"><b>Rien ne se déclenche sans ton accord.</b><br>Tu choisis ce qui te convient, quand tu le décides. Ton choix est enregistré sur cet appareil, puis ton code d’accès ouvre l’application.</div>
    <button class="btn solid" id="paymentBetaCode" style="width:100%">Entrer mon code</button>
    <button class="btn" id="paymentBetaBack" style="width:100%;margin-top:8px;border-color:transparent;color:var(--gray)">Revoir les offres</button>
  </section>

  <section class="screen" id="sBetaAccess">
    <div class="q-eyebrow sans">Ton code d’accès</div>
    <h1>Entre ton code d’accès.</h1>
    <p class="sans" style="font-size:0.875rem;line-height:1.6;color:var(--gray);margin:2px 0 12px">Tu l’as reçu par e-mail, après ton abonnement ou en cadeau : il commence par 7P2 et ouvre l’application complète.</p>
    <input id="betaAccessInput" type="text" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" placeholder="7P2-… reçu par e-mail" style="width:100%;border:1px solid var(--filet);border-radius:12px;padding:14px;font-family:inherit;font-size:0.9375rem;background:var(--card);color:var(--ink)" aria-label="Ton code d’accès">
    <div class="demo-note sans" id="betaAccessStatus" style="min-height:18px;margin-top:8px"></div>
    <button class="btn" id="betaVersReduction" style="display:none;width:100%;margin-top:4px;font-size:0.875rem;padding:11px">Voir les formules avec ce code de réduction</button>
    <button class="btn solid" id="betaAccessGo" style="width:100%;margin-top:8px">Activer mon accès</button>
    <div id="betaEntree" style="display:none">
      <button class="btn" id="betaSansCode" style="width:100%;margin-top:14px">Je n’ai pas de code d’accès : continuer</button>
      <button class="btn" id="betaOffres" style="width:100%;margin-top:8px;border-color:transparent;color:var(--gold-texte)">Voir les formules</button>
    </div>
    <button class="btn" id="betaAccessBack" style="width:100%;margin-top:8px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <!-- rc196 · CRÉER SA SESSION · le même écran la crée et la réinitialise -->
  <section class="screen" id="sCreerSession">
    <div class="q-eyebrow sans" id="sessionSurtitre">Ta session</div>
    <h1 id="sessionTitre">Crée ta session.</h1>
    <p id="sessionOffre" class="tipcard sans" style="display:none;font-size:0.875rem;line-height:1.6;margin:12px 0;padding:14px" aria-live="polite"></p>
    <p class="sans" id="sessionTexte" style="font-size:0.9375rem;line-height:1.65;color:var(--gray);margin:2px 0 18px">Ton adresse, et un code que tu choisis. Nous t’envoyons un message pour confirmer que cette adresse est bien la tienne&nbsp;: c’est en l’ouvrant que ton code s’active.</p>

    <label class="sans" for="sessionEmail" style="display:block;font-size:0.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-texte);margin:0 0 6px">Ton e-mail</label>
    <input id="sessionEmail" type="email" inputmode="email" autocomplete="email" autocapitalize="off" spellcheck="false" placeholder="prenom@exemple.fr"
      style="width:100%;padding:14px 16px;border:1px solid var(--filet);border-radius:14px;background:var(--card);color:var(--ink);font-family:inherit;font-size:1rem" aria-label="Ton adresse e-mail">

    <label class="sans" for="sessionCode" style="display:block;font-size:0.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-texte);margin:16px 0 6px">Le code de ta session</label>
    <input id="sessionCode" type="text" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" placeholder="quatre caractères au moins"
      style="width:100%;padding:14px 16px;border:1px solid var(--filet);border-radius:14px;background:var(--card);color:var(--ink);font-family:inherit;font-size:1rem" aria-label="Le code de ta session">
    <p class="sans" style="margin:7px 0 0;font-size:0.8125rem;line-height:1.5;color:var(--gray)">Quelque chose que tu retiens. Il n’est enregistré nulle part&nbsp;: nous n’en gardons qu’une empreinte, et personne ne peut le relire.</p>

    <p class="sans" id="sessionMsg" aria-live="polite" style="min-height:18px;margin:12px 0 0;font-size:0.875rem;line-height:1.5;color:var(--gold-texte)"></p>
    <button class="btn solid" id="sessionGo" style="width:100%;margin-top:4px;font-size:0.9375rem;padding:15px">Créer ma session</button>
    <div id="sessionEnvoye" style="display:none;margin:12px 0 0;padding:15px 16px;border-radius:14px;border:1px solid var(--filet);background:var(--lueur)">
      <p class="sans" style="margin:0;font-size:0.9375rem;line-height:1.65"><b>C’est parti.</b><br>Ouvre ta boîte e-mail <b>sur cet appareil</b> et touche « Confirmer mon adresse ». Si rien n’arrive dans deux minutes, regarde les indésirables.</p>
    </div>
    <button class="btn" id="sessionBack" style="width:100%;margin-top:10px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <!-- rc122 · écran 4 de l’entrée : la lecture (Diagnostic des 105 questions ou test offert du site) -->
  <section class="screen" id="sCodeLecture">
    <div class="q-eyebrow sans">Ta lecture</div>
    <h1>Tu as ta clé de lecture&nbsp;?</h1>
    <p class="sans" style="font-size:0.875rem;line-height:1.6;color:var(--gray);margin:2px 0 14px">Ta clé de lecture arrive par e-mail. Après le Diagnostic écrit elle commence par 7P-DIAG ; après le test offert, par 7P-PHOTO, et elle est aussi sur la page de ta lecture, sous « Copier ma clé de lecture ». Colle-la : l’application retrouve ta lecture.</p>
    <button class="btn solid" id="lectureColler" style="width:100%;margin:0 0 10px;font-size:0.9375rem;padding:14px">Coller mon code</button>
    <textarea id="lectureInput" placeholder="ou écris-le ici, tel que tu l’as reçu" style="width:100%;min-height:96px;border:1px solid var(--filet);border-radius:12px;padding:14px;font-family:-apple-system,monospace;font-size:0.8125rem;background:var(--card);color:var(--ink)" aria-label="Ta clé de lecture"></textarea>
    <div class="demo-note sans" id="lectureErr" style="min-height:18px"></div>
    <button class="btn" id="lectureVersReduction" style="display:none;width:100%;margin-top:4px;font-size:0.875rem;padding:11px">Voir les formules avec ce code de réduction</button>
    <button class="btn solid" id="lectureGo" style="margin-top:10px">Valider mon code</button>
    <button class="btn" id="lectureRestaurer" style="width:100%;margin-top:14px">Je viens d’un autre appareil : restaurer ma sauvegarde</button>
    <button class="btn" id="lectureSans" style="width:100%;margin-top:8px;border-color:transparent;color:var(--gold-texte)">Je n’ai pas de code : continuer</button>
    <button class="btn" id="lectureBack" style="width:100%;margin-top:8px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <section class="screen" id="sPaySuccess">
    <div class="q-eyebrow sans" id="paySuccessEyebrow">Accès activé</div>
    <h1 id="paySuccessTitle">Ton parcours peut continuer.</h1>
    <p class="sans" id="paySuccessText" style="font-size:0.9375rem;line-height:1.65;color:var(--gray);margin:2px 0 14px">Toutes les pratiques sont maintenant ouvertes sur cet appareil.</p>
    <p class="sans" id="paySuccessNote" aria-live="polite" style="font-size:0.9375rem;line-height:1.65;color:var(--gray);margin:0 0 16px"></p>

    <div id="persoInvite" style="display:none;margin:0 0 16px;padding:16px;border:1px solid var(--filet);border-radius:16px;background:var(--card)">
      <div class="tiplab sans">Crée ta session</div>
      <p class="sans" style="margin:0 0 12px;font-size:0.875rem;line-height:1.6;color:var(--gray)">Choisis le code de ta session : quatre caractères au moins, quelque chose que tu retiens. Avec ton e-mail, il ouvre ton espace sur n’importe quel appareil, sans chercher aucun message.</p>
      <input id="persoInput" type="text" autocapitalize="off" autocomplete="off" spellcheck="false" aria-label="Ton code personnel" placeholder="quatre caractères au moins"
        style="width:100%;padding:13px 15px;border:1px solid var(--filet);border-radius:13px;background:var(--paper);color:var(--ink);font-family:inherit;font-size:1rem">
      <p class="sans" id="persoInviteErr" style="min-height:16px;margin:8px 0 0;font-size:0.8125rem;color:var(--gold-texte)"></p>
      <button class="btn solid" id="persoInviteGo" style="width:100%;margin-top:4px;font-size:0.875rem;padding:12px">Créer ma session</button>
      <button class="btn" id="persoInviteLater" style="width:100%;margin-top:8px;font-size:0.875rem;padding:11px;border-color:transparent;color:var(--gray)">Plus tard</button>
    </div>

    <button class="btn solid" id="paySuccessGo" style="width:100%;margin-top:9px">Entrer dans l’app</button>
  </section>

  <!-- SESSION -->
  <section class="screen" id="sSession">
    <div class="session-int sans" id="intLabel"></div>
    <div id="ccGuide" style="display:none;text-align:center;margin-bottom:4px">
      <div id="ccPhase" style="font-size:1.1875rem">Inspire…</div>
      <div class="sans" style="font-size:0.75rem;color:var(--gray);margin-top:2px">5 secondes · 5 secondes</div>
    </div>
    <div class="halo-wrap">
      <div class="halo" id="halo"><img class="orb-v79-base" src="assets/orb-respirer-v3.webp?v=114" alt="" decoding="async" width="1024" height="1024"><div class="orb-v79-live"><img class="orb-v79-cloud orb-v79-c1" src="assets/orb-respirer-v3.webp?v=114" alt="" decoding="async" width="1024" height="1024"><img class="orb-v79-cloud orb-v79-c2" src="assets/orb-respirer-v3.webp?v=114" alt="" decoding="async" width="1024" height="1024"><img class="orb-v79-cloud orb-v79-c3" src="assets/orb-respirer-v3.webp?v=114" alt="" decoding="async" width="1024" height="1024"><span class="orb-v79-spiral"></span><span class="orb-v79-glow"></span><span class="orb-v79-pearl"></span><span class="orb-v79-sheen"></span><span class="orb-v79-edgefade"></span></div></div>
      <svg class="ring" viewBox="0 0 230 230">
        <circle class="track" cx="115" cy="115" r="108"/>
        <circle class="prog" id="progC" cx="115" cy="115" r="108"/>
        <circle id="heart" cx="115" cy="115" r="6.5" fill="var(--gold)" opacity=".50"/>
        <circle id="heartHit" cx="115" cy="115" r="88" fill="transparent" role="button" tabindex="0" aria-label="Mettre en pause" style="pointer-events:all;cursor:pointer"><title id="heartHitTitle">Mettre en pause</title></circle>
      </svg>
    </div>
    <div class="demo-note sans" id="voiceState" style="display:none;text-align:center;margin:6px 0 0"></div>
    <div class="sans" id="worldRow" style="display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:10px 0 2px">
      <button class="wchip" data-w="off">Silence</button><button class="wchip" data-w="A">Nappe</button><button class="wchip" data-w="mer">Océan</button><button class="wchip" data-w="pluie">Pluie</button><button class="wchip" data-w="foret">Forêt</button><button class="wchip" data-w="feu">Feu</button><button class="wchip" data-w="ruisseau">Ruisseau</button>
    </div>
    <div class="session-time sans" id="timeLabel">·</div>
    <div class="seg-label" id="segLabel"></div>
    <div id="subtitle" style="min-height:44px;font-size:1rem;line-height:1.5;color:var(--ink);opacity:.85;max-width:320px;margin:4px auto 0"></div>
    <div class="playbtns">
      <button class="btn" id="pauseBtn">Mettre en pause</button>
      <button class="btn" id="stopBtn" style="border-color:transparent;color:var(--gray)">Arrêter</button>
    </div>
  </section>

  <!-- PROFIL -->
  <section class="screen" id="sPartenaire">
    <div class="q-eyebrow sans">Programme partenaire</div>
    <h1>Recommande, et gagne du temps.</h1>
    <p class="sans" style="font-size:0.9375rem;line-height:1.65;color:var(--gray);margin:2px 0 20px">Ce que tu vis ici, d’autres le cherchent. Quand quelqu’un entre par ton lien et prend l’abonnement d’un an, tu y gagnes, et l’autre aussi.</p>

    <div style="display:flex;gap:13px;align-items:flex-start;margin-bottom:14px">
      <div style="flex:0 0 34px;height:34px;border-radius:50%;background:var(--lueur);color:var(--gold-texte);display:flex;align-items:center;justify-content:center;font-family:Georgia,'Times New Roman',serif;font-size:0.875rem;font-weight:600;letter-spacing:.02em">+1</div>
      <p class="sans" style="margin:0;font-size:0.875rem;line-height:1.6"><b>Pour toi :</b> un mois supplémentaire crédité sur ton accès, à chaque abonnement d’un an souscrit grâce à toi. Ils se cumulent.</p>
    </div>
    <div style="display:flex;gap:13px;align-items:flex-start;margin-bottom:20px">
      <div style="flex:0 0 34px;height:34px;border-radius:50%;background:var(--lueur);color:var(--gold-texte);display:flex;align-items:center;justify-content:center;font-family:Georgia,'Times New Roman',serif;font-size:0.875rem;font-weight:600;letter-spacing:.02em">13</div>
      <p class="sans" style="margin:0;font-size:0.875rem;line-height:1.6"><b>Pour la personne :</b> treize mois au lieu de douze, au même prix, avec le Diagnostic écrit offert.</p>
    </div>

    <div id="partCondition" style="display:none;margin:0 0 18px;padding:15px;border:1px solid var(--filet-fort);border-radius:14px;background:var(--lueur)">
      <p class="sans" style="margin:0 0 4px;font-size:0.875rem;line-height:1.6;color:var(--ink)"><b>Le programme est réservé aux abonnés à l’année.</b></p>
      <p class="sans" style="margin:0;font-size:0.875rem;line-height:1.6;color:var(--gray)">C’est cohérent : on recommande d’abord ce qu’on a choisi pour soi. Passe à l’année et ton lien s’ouvre aussitôt.</p>
    </div>

    <div id="partActif" style="display:none">
      <div class="tiplab sans">Ton lien</div>
      <p class="sans" id="partLien" style="margin:0 0 12px;font-size:0.8125rem;line-height:1.5;color:var(--gold-texte);word-break:break-all"></p>
      <button class="btn solid" id="partPartage" style="width:100%;font-size:0.875rem;padding:13px">Partager mon lien</button>
      <p class="sans" id="partCompteur" style="margin:12px 0 0;text-align:center;font-size:0.8125rem;color:var(--gray)"></p>
    </div>

    <p class="sans" id="partStatut" aria-live="polite" style="min-height:18px;margin:14px 0 0;text-align:center;font-size:0.875rem;color:var(--gold-texte)"></p>

    <!-- APPORTEUR D'AFFAIRES · la carte n'apparait que pour qui a signe le contrat.
         Le statut arrive par le lien #apporteur=A-XXXX.jeton que Johnatan envoie a la signature. -->
    <button id="apCarte" class="cardlink" style="display:none;margin:18px 0 0">
      <div class="cl-row">
        <div>
          <div class="tiplab sans" style="margin:0 0 5px">Apport d’affaires</div>
          <div class="cl-titre">Mon espace d’apporteur</div>
          <div class="cl-note">Ton lien, tes messages prêts à envoyer, tes commissions et leur état.</div>
        </div>
      </div>
    </button>

    <div id="apInvite" style="margin:18px 0 0;padding:15px;border:1px solid var(--filet-fort);border-radius:14px;background:var(--lueur)">
      <div class="tiplab sans" style="margin:0 0 6px">Envie d’aller plus loin ?</div>
      <p class="sans" style="margin:0 0 10px;font-size:0.875rem;line-height:1.6;color:var(--ink)">La méthode te parle au point d’en parler vraiment autour de toi ? L’<b>apport d’affaires</b> rémunère ta parole : <b>10 % du prix hors taxes</b> de chaque abonnement annuel souscrit par ton lien, avec un contrat signé en ligne. La personne que tu amènes garde ses treize mois et son Diagnostic offert.</p>
      <a class="btn" href="https://agostinijohnatan.com/apport-affaires" target="_blank" rel="noopener" style="display:block;width:100%;text-align:center;font-size:0.875rem;padding:11px;box-sizing:border-box">Découvrir l’apport d’affaires</a>
      <p class="sans" style="margin:8px 0 0;font-size:0.75rem;line-height:1.5;color:var(--gray)">Un même abonnement compte pour l’un ou l’autre : le code partenaire pour le geste simple, le contrat pour la rémunération.</p>
    </div>

    <button class="btn" id="partBack" style="width:100%;margin-top:16px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <!-- PARTAGER L'APPLICATION · trois portes (rc127). La premiere est ouverte a tous ;
       les deux autres (un mois offert, retrocession de 10 %) sont reservees aux abonnes
       a l'annee : voilees mais visibles, elles menent aux formules. -->
  <section class="screen" id="sPartager">
    <div class="q-eyebrow sans">Partager</div>
    <h1>Envie de partager l’application ?</h1>
    <p class="sans" style="font-size:0.9375rem;line-height:1.65;color:var(--gray);margin:2px 0 18px">Trois façons de le faire, selon ce que tu en attends. Le lien ouvre l’application ; la personne commence par ses sept questions offertes.</p>
    <div class="opts">
      <button class="opt" id="partagerSimple">Partager simplement <small>le lien de l’application et quelques mots, rien d’autre</small></button>
      <button class="opt" id="partagerMois">Partager avec un mois offert <small>treize mois pour la personne, un mois de plus pour toi, à chaque abonnement d’un an pris grâce à toi</small></button>
      <button class="opt" id="partagerRetro">Partager avec une rétrocession de 10 % <small>10 % du prix hors taxes de chaque abonnement d’un an, avec un contrat d’apport d’affaires</small></button>
    </div>
    <div id="partagerCondition" style="display:none;margin:14px 0 0;padding:15px;border:1px solid var(--filet-fort);border-radius:14px;background:var(--lueur)">
      <p class="sans" style="margin:0 0 4px;font-size:0.875rem;line-height:1.6;color:var(--ink)"><b>Le mois offert et la rétrocession sont réservés aux abonnés à l’année.</b></p>
      <p class="sans" style="margin:0 0 12px;font-size:0.875rem;line-height:1.6;color:var(--gray)">On recommande d’abord ce qu’on a choisi pour soi. Passe à l’année et ces deux portes s’ouvrent aussitôt.</p>
      <button class="btn solid" id="partagerAnnuel" style="width:100%;font-size:0.875rem;padding:13px">Passer à l’abonnement annuel</button>
    </div>
    <p class="sans" id="partagerStatut" aria-live="polite" style="min-height:18px;margin:14px 0 0;text-align:center;font-size:0.875rem;color:var(--gold-texte)"></p>
    <button class="btn" id="partagerBack" style="width:100%;margin-top:16px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <!-- ESPACE APPORTEUR D'AFFAIRES · tout ce qui concerne le contrat, au meme endroit.
       S'ouvre par le lien #apporteur=A-XXXX.jeton envoye a la signature, puis par
       la carte du Profil ou du programme partenaire. Le jeton reste sur l'appareil ;
       le serveur ne repond qu'a lui, jamais au code seul (le code circule dans les liens). -->
  <section class="screen" id="sApporteur">
    <div class="q-eyebrow sans">Apport d’affaires</div>
    <h1 id="apTitre">Ton espace d’apporteur.</h1>
    <p class="sans" style="font-size:0.9375rem;line-height:1.65;color:var(--gray);margin:2px 0 16px">Tout ce qui concerne ton contrat est ici : ton lien, des mots prêts à envoyer, tes commissions et où elles en sont.</p>
    <p class="sans" id="apStatut" aria-live="polite" style="min-height:18px;margin:0 0 12px;font-size:0.875rem;line-height:1.5;color:var(--gold-texte)"></p>

    <div id="apCorps" style="display:none">
      <div class="tiplab sans">Ton contrat</div>
      <div style="margin:0 0 20px;padding:15px;border:1px solid var(--filet-fort);border-radius:14px;background:var(--lueur)">
        <p class="sans" style="margin:0 0 6px;font-size:0.875rem;line-height:1.6">Code <b id="apCode" style="letter-spacing:.06em"></b> · <b><span id="apTaux"></span>&nbsp;%</b> du prix hors taxes de chaque abonnement annuel.</p>
        <p class="sans" id="apContrat" style="margin:0;font-size:0.875rem;line-height:1.6;color:var(--gray)"></p>
      </div>

      <div class="tiplab sans">Ton lien de suivi</div>
      <p class="sans" id="apLien" style="margin:0 0 12px;font-size:0.8125rem;line-height:1.5;color:var(--gold-texte);word-break:break-all"></p>
      <button class="btn solid" id="apPartage" style="width:100%;font-size:0.875rem;padding:13px">Partager mon lien</button>
      <button class="btn" id="apCopier" style="width:100%;margin-top:8px;font-size:0.875rem;padding:11px">Copier le lien</button>
      <p class="sans" style="margin:10px 0 20px;font-size:0.75rem;line-height:1.5;color:var(--gray)">Le lien reste valable 90 jours dans le navigateur de la personne. Un abonnement d’un an pris ensuite compte pour toi, et elle reçoit treize mois avec le Diagnostic écrit offert.</p>

      <div class="tiplab sans">Des mots prêts à envoyer</div>
      <div class="opts" style="margin:0 0 20px">
        <button class="opt" data-ap-msg="court">Message court <small>SMS, WhatsApp, Messenger · copié, tu n’as plus qu’à coller</small></button>
        <button class="opt" data-ap-msg="mail">E-mail <small>un objet et quelques lignes, à ta main</small></button>
        <button class="opt" data-ap-msg="post">Publication <small>pour un réseau, avec la mention de collaboration que la loi demande</small></button>
      </div>

      <div class="tiplab sans">Tes commissions</div>
      <div style="display:flex;gap:8px;margin:0 0 12px">
        <div style="flex:1;padding:12px 8px;border:1px solid var(--filet);border-radius:14px;background:var(--card);text-align:center">
          <div class="sans" style="font-size:0.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gray)">En rétractation</div>
          <div id="apTotRetr" style="font-family:Georgia,'Times New Roman',serif;font-size:1.125rem;margin-top:4px">0,00&nbsp;€</div>
        </div>
        <div style="flex:1;padding:12px 8px;border:1px solid rgba(142,106,47,.55);border-radius:14px;background:var(--lueur);text-align:center">
          <div class="sans" style="font-size:0.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-texte)">À verser</div>
          <div id="apTotDue" style="font-family:Georgia,'Times New Roman',serif;font-size:1.125rem;margin-top:4px;color:var(--gold-texte)">0,00&nbsp;€</div>
        </div>
        <div style="flex:1;padding:12px 8px;border:1px solid var(--filet);border-radius:14px;background:var(--card);text-align:center">
          <div class="sans" style="font-size:0.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gray)">Versées</div>
          <div id="apTotVers" style="font-family:Georgia,'Times New Roman',serif;font-size:1.125rem;margin-top:4px">0,00&nbsp;€</div>
        </div>
      </div>
      <div id="apListe" aria-live="polite" style="margin:0 0 20px"></div>

      <div class="tiplab sans">Comment ça se passe</div>
      <p class="sans" style="margin:0 0 8px;font-size:0.875rem;line-height:1.6;color:var(--ink)">Quand quelqu’un prend l’abonnement d’un an par ton lien, la commission apparaît ici le jour même, <b>en rétractation</b> pendant <span id="apRetr">14</span> jours. Passé ce délai, elle devient <b>à verser</b> : le virement part dans les 30 jours fin de mois, sur l’IBAN de ton contrat.</p>
      <p class="sans" style="margin:0 0 8px;font-size:0.875rem;line-height:1.6;color:var(--gray)">Un même abonnement compte pour un seul rail : ton lien d’apporteur, ou un code partenaire, jamais les deux. Quand tu en parles en public, dis que tu es rémunéré : c’est la loi, et c’est cohérent avec ce que tu recommandes.</p>
      <p class="sans" style="margin:0 0 4px;font-size:0.875rem;line-height:1.6;color:var(--gray)">Pour changer d’IBAN, d’adresse ou pour toute question : <a href="https://agostinijohnatan.com/contact" target="_blank" rel="noopener" style="color:var(--gold-texte)">écris à Johnatan</a>. Le contrat et ses conditions restent lisibles sur <a href="https://agostinijohnatan.com/apport-affaires" target="_blank" rel="noopener" style="color:var(--gold-texte)">la page de l’apport d’affaires</a>.</p>
    </div>

    <button class="btn" id="apActualiser" style="width:100%;margin-top:16px;font-size:0.875rem;padding:11px">Actualiser</button>
    <button class="btn" id="apQuitter" style="width:100%;margin-top:8px;font-size:0.8125rem;padding:10px;border-color:transparent;color:var(--gray)">Retirer cet espace de cet appareil</button>
    <button class="btn" id="apBack" style="width:100%;margin-top:8px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

<section class="screen" id="sProfil">
    <div class="q-eyebrow sans">Mon espace</div>
    <h1 style="margin-bottom:14px">Tes données, ton histoire.</h1>
    <div style="display:flex;gap:7px;justify-content:center;margin:2px 0 18px" aria-hidden="true">
      <span style="width:7px;height:7px;border-radius:50%;background:#2F8C7A;opacity:.75"></span><span style="width:7px;height:7px;border-radius:50%;background:#3E7CA6;opacity:.75"></span><span style="width:7px;height:7px;border-radius:50%;background:#B0763A;opacity:.75"></span><span style="width:7px;height:7px;border-radius:50%;background:#A0522D;opacity:.75"></span><span style="width:7px;height:7px;border-radius:50%;background:#4B4E7D;opacity:.75"></span><span style="width:7px;height:7px;border-radius:50%;background:#8E4A5B;opacity:.75"></span><span style="width:7px;height:7px;border-radius:50%;background:#8A6FA8;opacity:.75"></span>
    </div>
    <div id="profilPillars" class="demo-note sans" style="margin-bottom:14px"></div>
    <!-- rc183 · On sait toujours dans quel espace on est, et on en sort d'un geste. -->
    <div id="sessionCard" style="margin:0 0 14px;padding:15px 16px;border-radius:16px;border:1px solid var(--filet);background:var(--lueur)">
      <div class="tiplab sans">Ma session</div>
      <p class="sans" id="sessionQui" style="margin:3px 0 0;font-size:0.9375rem;line-height:1.5;word-break:break-word"></p>
      <button class="opt" id="profilLogout" style="margin-top:11px">Me déconnecter <small>ton espace reste sur cet appareil, retrouvable avec ton e-mail</small></button>
    </div>
    <div id="aboCard" style="margin:0 0 16px;padding:16px;border-radius:16px;border:1px solid var(--filet);background:var(--card)">
      <div class="tiplab sans">Mon abonnement</div>
      <p class="sans" id="aboState" style="margin:0 0 4px;font-size:0.9375rem;line-height:1.55"></p>
      <p class="sans" id="aboUntil" style="margin:0;font-size:0.8125rem;color:var(--gray)"></p>
      <div id="aboActions" style="display:flex;gap:10px;margin-top:12px;flex-wrap:wrap"></div>
    </div>
    <!-- rc127 : la porte du partage en haut de Mon espace, sous l'abonnement, pour qu'elle se voie. -->
    <button id="partCarte" class="cardlink" style="margin:0 0 16px">
    <div class="cl-row">
      <div>
        <div class="tiplab sans" style="margin:0 0 5px">Partager</div>
        <div class="cl-titre">Envie de partager l’application ?</div>
        <div class="cl-note">Simplement, avec un mois offert, ou avec une rétrocession de 10 %.</div>
      </div>
    </div>
    </button>
    <p class="sans" style="margin:14px 0 0;text-align:center;font-size:0.8125rem;color:var(--gray)">Suivre le fil ailleurs ·
      <a href="https://www.instagram.com/johnatan.ago/" target="_blank" rel="noopener" style="color:var(--gold-texte)">Instagram</a> ·
      <a href="https://www.linkedin.com/in/johnatan-agostini-cailleaux-82a39b225/" target="_blank" rel="noopener" style="color:var(--gold-texte)">LinkedIn</a> ·
      <a href="https://www.facebook.com/104847988255696" target="_blank" rel="noopener" style="color:var(--gold-texte)">Facebook</a></p>
    

    
    <details class="grp" open><summary><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#4B4E7D;margin-right:7px;vertical-align:middle;opacity:.8"></span>Mon rythme</summary><div class="opts">
      <button class="opt" id="profilReminders">Mes rappels <small id="remindersSub">Point du jour et routine du soir</small></button>
      <button class="opt" id="profilHealth"><span id="healthTxt">Les signaux de mon corps</span> <small id="healthSub">ta nuit, tes pas : pour ajuster ce qu’on te propose</small></button>
        <button class="opt" id="profilReglages">Langue et réglages de séance <small>français ou anglais, fond sonore, rythme de la voix</small></button>
      
    </div></details>
    <details class="grp"><summary><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#2F8C7A;margin-right:7px;vertical-align:middle;opacity:.8"></span>Mon chemin</summary><div class="opts">
      <button class="opt" id="profilHistory">Mon historique <small id="historySub">tes pratiques, pilier par pilier</small></button>
      <button class="opt" id="profilMeasures">Mes mesures <small id="measuresSub">ta silhouette d’équilibre dans le temps</small></button>
      <button class="opt" id="profilDiag"><span id="profilDiagTxt">Le Diagnostic écrit · 100 €</span> <small id="profilDiagSub">la lecture écrite de tes 7 piliers, avec Johnatan</small></button>
      
    </div></details>
    <details class="grp"><summary><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#B0763A;margin-right:7px;vertical-align:middle;opacity:.8"></span>Mes clés</summary>
      <button class="opt" id="profilAccount"><span id="accountTxt">Mon espace</span> <small id="accountSub">ta pratique, ton journal et tes réglages vivent sur cet appareil ; nos serveurs ne gardent que ce qui ouvre ton accès : adresse, formule, échéance, appareils reliés</small></button><div class="opts">
      <button class="opt" id="profilCode">Importer ou mettre à jour mon code <small id="profilCodeSub">aucune lecture du test ni Diagnostic reliée à cet espace</small></button>
      <button class="opt" id="profilSub"><span id="profilSubTxt">Accès découverte</span> <small id="profilSubSmall">une expérience offerte avant de choisir la suite</small></button>
      <button class="opt" id="profilPerso">Le code de ma session <small id="persoSub">choisis un code court pour retrouver ton accès</small></button>
      <button class="opt" id="profilTuto">Revoir le didacticiel <small>les quatre écrans de l’application, en trente secondes</small></button>
      <button class="opt" id="profilEmporter"><span id="profilEmporterTxt">Emporter hors ligne</span> <small id="profilEmporterSub">pour l’avion, le métro, la montagne</small></button>
      
    </div></details>
    <details class="grp"><summary><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#8A6FA8;margin-right:7px;vertical-align:middle;opacity:.8"></span>Mes données</summary>
      <button class="opt" id="profilBeta">Partager mon retour <small>2 minutes · ton ressenti et le contexte technique utile</small></button>
      <button class="opt" id="journalSonProfil">Copier le journal du son <small>si le son se coupe, ce journal m’aide à comprendre : copie-le et envoie-le moi</small></button>
      <div class="demo-note sans" id="journalSonProfilOut" style="margin:0 0 6px"></div><div class="opts">
      <button class="opt" id="profilInstall">Installer sur mon écran d’accueil <small id="installSub">l’application à portée de pouce, plein écran</small></button>
      <button class="opt" id="profilExport">Télécharger mes données <small>tout ce que l’app sait, en un fichier lisible</small></button>
      <button class="opt" id="profilRestore">Restaurer une sauvegarde <small id="restoreSub">remettre en place un espace depuis un fichier de sauvegarde</small></button>
      
      
      <button id="apProfilCarte" class="cardlink" style="display:none;margin:10px 0 0">
      <div class="cl-row">
        <div>
          <div class="tiplab sans" style="margin:0 0 5px">Apport d’affaires</div>
          <div class="cl-titre">Mon espace d’apporteur</div>
          <div class="cl-note">Ton lien, tes messages prêts à envoyer, tes commissions et leur état.</div>
        </div>
      </div>
    </button>

    <div id="passageCard" style="display:none;margin:14px 0 0;padding:15px;border:1px solid var(--filet-fort);border-radius:14px;background:var(--lueur)">
      <div class="tiplab sans" id="passageTitre" style="margin:0 0 8px">Passer à l’année, ton premier mois déduit</div>
      <p class="sans" id="passageTexte" style="margin:0 0 6px;font-size:0.875rem;line-height:1.6;color:var(--ink)">Tu as déjà réglé 12,99 €. Ils viennent en déduction de l’année : <b>137,00 € au lieu de 149,99 €</b>, avec le <b>Diagnostic écrit offert</b> (valeur 100 €).</p>
      <p class="sans" id="passageNote" aria-live="polite" style="margin:0 0 12px;font-size:0.8125rem;color:var(--gold-texte)"></p>
      <button class="btn solid" id="passageGo" style="width:100%;font-size:0.875rem;padding:11px">Passer à l’année</button>
      <button class="btn" id="passageLater" style="width:100%;margin-top:8px;font-size:0.8125rem;padding:10px;border-color:transparent;color:var(--gray)">Rester au mois</button>
    </div>

    <button class="opt" id="profilMesure">Aider à améliorer l’application <small id="mesureSub">des compteurs anonymes, rien de ce que tu écris</small></button>
      <div id="mesureZone" style="display:none;margin:6px 0 12px;padding:14px 16px;border:1px solid var(--filet);border-radius:14px;background:var(--card)">
        <p class="sans" style="margin:0 0 10px;font-size:0.875rem;line-height:1.6;color:var(--gray)">Une fois par semaine, l’application peut envoyer <b>des compteurs</b> : pratiques commencées et terminées, retour un autre jour, session confirmée et formule choisie. Le réseau ou la publication qui t’a conduit ici peut être compté aussi. Aucun achat n’est déduit de ces compteurs.</p>
        <p class="sans" style="margin:0 0 12px;font-size:0.875rem;line-height:1.6;color:var(--gray)">Jamais ton journal, jamais tes repères de sommeil, jamais ton e-mail. L’envoi porte un jeton aléatoire, sans aucun lien avec ton accès. Tu peux couper à tout moment.</p>
        <button class="btn solid" id="mesureOui" style="width:100%;font-size:0.875rem;padding:11px">J’accepte d’aider</button>
        <button class="btn" id="mesureNon" style="width:100%;margin-top:8px;font-size:0.8125rem;padding:10px;border-color:transparent;color:var(--gray)">Non merci</button>
      </div>
      <button class="opt danger" id="profilOubli">Effacer mon enregistrement <small id="oubliSub">supprimer de notre registre mon accès, mes codes et mon adresse</small></button>
      <input type="file" id="restoreFile" accept="application/json,.json" style="display:none" aria-label="restoreFile">
      <button class="opt danger" id="profilReset">Supprimer mes données <small>tout ce qui vit sur cet appareil est effacé, immédiatement ; ton enregistrement d’accès chez nous ne bouge pas</small></button>
    </div></details>
    <p class="demo-note sans" style="margin-top:14px">Les méditations sont créées à partir de la voix de Johnatan Agostini. Tes réponses servent uniquement à composer ta pratique, jamais à autre chose.</p>
    <button class="btn solid" id="profilBack" style="margin-top:12px">Revenir</button>
    <p class="sans" id="restoreInfo" aria-live="polite" style="margin:10px 0 0;text-align:center;font-size:0.8125rem;color:var(--gold-texte)"></p>
    <p class="sans" style="margin:26px 0 6px;text-align:center;font-size:0.75rem;line-height:1.6;color:var(--gray)">
      Les 7 Piliers de l’Individuation<br>
      © Agostini Accompagnements EURL · tous droits réservés<br>
      Méthode, textes, voix et identité visuelle protégés.<br>
      Nom en demande d’enregistrement à l’INPI.
    </p>
    <p class="sans" style="margin:0 0 8px;text-align:center;font-size:0.75rem;color:var(--gray)">
      <a href="https://agostinijohnatan.com/cgv-application" target="_blank" rel="noopener" style="color:inherit">Conditions</a> ·
      <a href="https://agostinijohnatan.com/confidentialite" target="_blank" rel="noopener" style="color:inherit">Confidentialité</a> ·
      <a href="https://agostinijohnatan.com/deontologie" target="_blank" rel="noopener" style="color:inherit">Déontologie</a>
    </p>
  </section>

  <!-- RAPPELS · export vers le calendrier de l’appareil -->
  <section class="screen" id="sReminders">
    <div class="q-eyebrow sans">Mon espace · rappels</div>
    <h1>Choisis quand l’app revient vers toi.</h1>
    <p class="sans" style="font-size:0.875rem;line-height:1.6;color:var(--gray);margin:2px 0 14px">Les rappels passent par le calendrier de ton téléphone : de vraies alertes, même quand l’app est fermée.</p>
    <div class="pref"><div class="lab sans">Point du jour · à ton heure</div>
      <input type="time" id="reminderCheckin" style="width:100%;border:1px solid var(--filet);border-radius:12px;padding:12px;background:var(--card);color:var(--ink);font:16px -apple-system,system-ui,sans-serif" aria-label="reminderCheckin">
      <div class="demo-note sans" style="margin-top:6px">Laisse vide pour t’en passer.</div>
    </div>
    <div class="pref"><div class="lab sans">Le soir · sas et architecte</div>
      <input type="time" id="reminderEvening" style="width:100%;border:1px solid var(--filet);border-radius:12px;padding:12px;background:var(--card);color:var(--ink);font:16px -apple-system,system-ui,sans-serif" aria-label="reminderEvening">
      <div class="demo-note sans" style="margin-top:6px">Laisse vide pour t’en passer.</div>
    </div>
    <div class="pref"><div class="lab sans">Hydratation · le fil de la journée</div>
      <div class="seg-ctrl" data-hydra="every" style="grid-template-columns:1fr 1fr 1fr 1fr">
        <button data-v="off" class="sel">Sans</button><button data-v="2">2 h</button><button data-v="3">3 h</button><button data-v="4">4 h</button>
      </div>
      <div style="display:flex;gap:10px;margin-top:10px;align-items:center">
        <span class="sans" style="font-size:0.8125rem;color:var(--gray)">De</span>
        <input type="time" id="hydraFrom" value="09:00" style="flex:1;border:1px solid var(--filet);border-radius:12px;padding:10px;background:var(--card);color:var(--ink);font:16px -apple-system,system-ui,sans-serif" aria-label="hydraFrom">
        <span class="sans" style="font-size:0.8125rem;color:var(--gray)">à</span>
        <input type="time" id="hydraTo" value="21:00" style="flex:1;border:1px solid var(--filet);border-radius:12px;padding:10px;background:var(--card);color:var(--ink);font:16px -apple-system,system-ui,sans-serif" aria-label="hydraTo">
      </div>
      <div class="demo-note sans" style="margin-top:6px">Un verre à chaque rappel, et ton objectif du pilier Boire se tient presque tout seul.</div>
    </div>
    <div class="tipcard sans" style="text-align:left;margin:12px 0">L’export crée des rappels quotidiens pendant 30 jours. Tu peux les modifier ou les supprimer directement dans ton calendrier.</div>
    <button class="btn solid" id="remindersExport" style="width:100%">Ajouter mes rappels au calendrier</button>
    <div class="demo-note sans" id="remindersStatus" style="min-height:22px;margin-top:8px"></div>
    <button class="btn" id="remindersBack" style="width:100%;margin-top:8px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <!-- RETOUR D’EXPÉRIENCE · structuré, conservé localement -->
  <section class="screen" id="sBetaFeedback">
    <div class="q-eyebrow sans">Retour d’expérience</div>
    <h1>Aide-nous à voir ce que tu vois.</h1>
    <p class="sans" style="font-size:0.875rem;line-height:1.6;color:var(--gray);margin:2px 0 14px">Réponds avec tes mots. Rien n’est envoyé automatiquement : le bouton final ouvre le partage de ton appareil, ou copie le retour dans le presse-papiers.</p>
    <div class="beta-grid">
      <label class="sans" style="font-size:0.8125rem;color:var(--gray)">Qu’as-tu compris de l’application ?
        <textarea class="beta-field" id="betaUnderstood" rows="3" placeholder="Ce que tu penses que l’app fait pour toi…" aria-label="Ce que tu penses que l’app fait pour toi…"></textarea>
      </label>
      <label class="sans" style="font-size:0.8125rem;color:var(--gray)">À quel moment as-tu hésité ou bloqué ?
        <textarea class="beta-field" id="betaBlocked" rows="3" placeholder="Écran, mot, bouton, enchaînement…" aria-label="Écran, mot, bouton, enchaînement…"></textarea>
      </label>
      <label class="sans" style="font-size:0.8125rem;color:var(--gray)">Qu’est-ce qui t’a donné envie de continuer, ou au contraire de quitter ?
        <textarea class="beta-field" id="betaValue" rows="3" placeholder="Le moment qui a créé ou détruit la valeur…" aria-label="Le moment qui a créé ou détruit la valeur…"></textarea>
      </label>
      <div class="sans" style="font-size:0.8125rem;color:var(--gray)">As-tu envie de revenir demain ?</div>
      <div class="seg-ctrl wrap" id="betaReturn" style="grid-template-columns:1fr 1fr 1fr">
        <button data-v="oui">Oui</button><button data-v="peut-etre">Peut-être</button><button data-v="non">Non</button>
      </div>
    </div>
    <button class="btn solid" id="betaShare" style="width:100%;margin-top:8px">Partager mon retour</button>
    <button class="btn" id="betaCopy" style="width:100%;margin-top:8px">Copier mon retour</button>
    <div id="betaStatus" class="beta-status"></div>
    <div id="betaTech" class="beta-tech"></div>
    <button class="btn" id="betaBack" style="width:100%;margin-top:10px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <!-- DIAGNOSTIC ENRICHI · lecture locale -->
  <section class="screen" id="sDiagInsight">
    <div class="q-eyebrow sans">Mon Diagnostic</div>
    <h1>Une carte plus profonde.</h1>
    <div id="diagInsightHead" class="tipcard sans" style="margin-bottom:14px"></div>
    <div id="diagInsightPillars"></div>
    <div id="diagInsightLayers" class="tipcard sans" style="margin-top:14px"></div>
    <p class="demo-note sans" style="margin-top:12px">Cette lecture oriente les propositions, sans les figer. Ton état du jour et ton historique peuvent toujours déplacer la porte la plus juste.</p>
    <button class="btn solid" id="diagInsightGo" style="width:100%;margin-top:10px">Voir ma proposition du jour</button>
    <button class="btn" id="diagInsightBack" style="width:100%;margin-top:8px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>




  <!-- BANQUE VOCALE -->
  


  <!-- SAS DECOUVERTE -->
  

  <!-- SAS DECOUVERTE FIN -->

  <!-- EXPLORER (Sprint A) -->
  <section class="screen" id="sExplorer">
    <div class="q-eyebrow sans">Explorer</div>
    <h1>Sept piliers. Trois lectures.</h1>
    <p class="sans" style="font-size:0.875rem;line-height:1.6;color:var(--gray);margin:2px 0 14px">Ici, c’est toi qui choisis : un pilier, une lecture Corps, Esprit ou Âme, une expérience.</p>
    <div class="opts">
      <button class="opt pill" id="homeMedit" style="--pc:var(--p1)"><span class="pnum">01</span>Respirer <small>le souffle, seule fonction vitale qui se laisse conduire</small></button>
      <button class="opt pill" id="homeBoire" style="--pc:var(--p2)"><span class="pnum">02</span>Boire <small id="homeBoireSub">percevoir, répondre, équilibrer, adapter</small></button>
      <button class="opt pill" id="homeNourrir" style="--pc:var(--p3)"><span class="pnum">03</span>Manger <small>ressentir, choisir, nourrir, savourer</small></button>
      <button class="opt pill" id="homeMouv" style="--pc:var(--p4)"><span class="pnum">04</span>Se mouvoir <small>mobiliser, solliciter, adapter, récupérer</small></button>
      <button class="opt pill" id="homeSoir" style="--pc:var(--p5)"><span class="pnum">05</span>Se reposer <small id="homeSoirSub">restaurer ta disponibilité, sans obligation de dormir</small></button>
      <button class="opt pill" id="homeLien" style="--pc:var(--p6)"><span class="pnum">06</span>Se reproduire <small>renouveler, répéter, relier, transmettre</small></button>
      <button class="opt pill" id="homeElever" style="--pc:var(--p7)"><span class="pnum">07</span>S’élever <small>se délester, trouver du sens, faire confiance</small></button>
    </div>
    <button class="btn" id="plansLink" style="width:100%;margin-top:10px;border-color:transparent;color:var(--gray);font-size:0.8125rem">Corps · Esprit · Âme, comprendre les trois portes</button>
  
  </section>

  <!-- JOURNAL (Sprint A) -->
  <section class="screen" id="sJournal">
    <div class="q-eyebrow sans">Journal</div>
    <h1>Ce qui reste.</h1>
  <button type="button" id="jPourquoiLien" class="sans" style="display:none;margin:0 0 10px;padding:2px 0;background:none;border:none;cursor:pointer;font-family:inherit;font-size:0.8125rem;color:var(--gold-texte);text-decoration:underline;text-underline-offset:3px">Pourquoi écrire ?</button>
  <div id="jPourquoi" style="display:none;background:var(--card);border:1px solid var(--filet);border-radius:16px;padding:18px 18px 14px;margin:2px 0 14px">
    <div class="q-eyebrow sans" style="margin-bottom:10px">Pourquoi écrire</div>
    <p class="sans" style="font-size:0.875rem;line-height:1.55;margin:0 0 9px"><b>Nommer apaise.</b> Poser le mot juste sur ce qui est là en fait déjà redescendre l’intensité.</p>
    <p class="sans" style="font-size:0.875rem;line-height:1.55;margin:0 0 9px"><b>Ce qui est écrit tourne moins en boucle.</b> La page le porte : ta tête n’a plus à le faire.</p>
    <p class="sans" style="font-size:0.875rem;line-height:1.55;margin:0 0 9px"><b>Le soir, déposer aide à dormir.</b> Les préoccupations couchées sur la page réveillent moins la nuit.</p>
    <p class="sans" style="font-size:0.875rem;line-height:1.55;margin:0 0 12px"><b>Relire fait comprendre.</b> Des semaines plus tard, tu verras ce qui se répète. C’est souvent là que quelque chose se comprend.</p>
    <p class="sans" style="font-size:0.8125rem;color:var(--gray);margin:0">Une phrase suffit. Et personne d’autre ne le lira : ni un humain, ni le moteur.</p>
  </div>
    <input id="jSearch" type="search" placeholder="Rechercher dans tes entrées" style="width:100%;border:1px solid var(--filet);border-radius:12px;padding:12px 14px;font-family:Georgia,serif;font-size:0.875rem;background:var(--card);color:var(--ink);margin-bottom:10px" aria-label="Rechercher dans tes entrées">
    <div class="jfilters" id="jFilters"></div>
    <div id="jList"></div>
    <button class="btn solid" id="jNew" style="width:100%;margin-top:6px">Écrire librement</button>
    <button class="btn" id="jExport" style="width:100%;margin-top:8px;border-color:transparent;color:var(--gray);font-size:0.8125rem">Exporter mon journal</button>
  </section>

  <!-- JOURNAL · ECRITURE -->
  <section class="screen" id="sJournalWrite">
    <div class="q-eyebrow sans" id="jwContext">Journal</div>
    <h1 id="jwTitle">Écrire ce qui reste.</h1>
    <textarea id="jwText" rows="9" placeholder="Ce qui est là, avec tes mots. Personne d’autre ne le lira." style="width:100%;border:1px solid var(--filet);border-radius:14px;padding:14px;font-family:Georgia,serif;font-size:1rem;line-height:1.6;background:var(--card);color:var(--ink);resize:vertical" aria-label="Ce qui est là, avec tes mots. Personne d’autre ne le lira."></textarea>
    <p class="demo-note sans" style="margin:10px 0 12px">Ton journal t’appartient : il n’est jamais lu par le moteur, jamais analysé, jamais partagé.</p>
    <button class="btn solid" id="jwSave" style="width:100%">Garder</button>
    <button class="btn" id="jwBack" style="width:100%;margin-top:8px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <!-- JOURNAL · ENTREE -->
  <section class="screen" id="sJournalEntry">
    <div class="q-eyebrow sans" id="jeMeta">Journal</div>
    <div id="jeText" style="font-size:1rem;line-height:1.7;white-space:pre-wrap;margin:6px 0 18px"></div>
    <button class="btn" id="jeDelete" style="width:100%;border-color:rgba(162,59,46,.4)">Supprimer cette entrée</button>
    <button class="btn" id="jeBack" style="width:100%;margin-top:8px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <!-- SIGNAUX DU CORPS -->
  <section class="screen" id="sHealth">
    <div class="q-eyebrow sans">Mon espace</div>
    <h1>Les signaux de ton corps.</h1>
    <div id="healthIntro">
      <p class="sans" style="font-size:0.9375rem;line-height:1.65;color:var(--gray);margin:4px 0 14px">Ton corps parle déjà : ta nuit, tes pas, ton rythme. Si tu l’autorises, l’app écoute ces signaux pour ajuster ce qu’elle te propose. Elle ne te notera jamais, ne te diagnostiquera jamais, et ton ressenti garde toujours le dernier mot.</p>
      <div class="tipcard" style="margin:0 0 12px"><div class="tiplab sans">Ce que l’app lit</div>
        <div style="font-size:0.9375rem;line-height:1.7">La durée de ta nuit, tes pas de la journée, la tendance de ton rythme cardiaque au repos, les minutes de souffle déjà pratiquées ailleurs.</div></div>
      <div class="tipcard" style="margin:0 0 12px"><div class="tiplab sans">Ce qu’elle ne lira jamais</div>
        <div style="font-size:0.9375rem;line-height:1.7">Ton poids, ta tension, ta glycémie, tes cycles. Ces données ne servent pas la méthode, donc elles n’ont pas à exister ici.</div></div>
      <p class="demo-note sans" style="margin-bottom:12px">Tout reste sur cet appareil. Rien n’est envoyé, rien n’est conservé au-delà de la journée. Tu peux couper à tout moment, et tout s’efface.</p>
      <button class="btn solid" id="healthAccept" style="width:100%">J’autorise l’écoute de ces signaux</button>
      <button class="btn" id="healthBack" style="width:100%;margin-top:8px;border-color:transparent;color:var(--gray)">Pas maintenant</button>
    </div>
    <div id="healthPanel" style="display:none">
      <p class="sans" style="font-size:0.875rem;line-height:1.6;color:var(--gray);margin:4px 0 14px">En attendant la connexion automatique à ta montre ou à ton téléphone, tu peux renseigner ces repères. Le moteur en tiendra compte dès aujourd’hui.</p>
      <div class="planlab">Ta nuit</div>
      <div class="seg-ctrl wrap" id="hSleep" style="grid-template-columns:1fr 1fr 1fr 1fr">
        <button data-v="5">courte</button><button data-v="7" class="sel">correcte</button><button data-v="8.5">pleine</button><button data-v="">passer</button>
      </div>
      <div class="planlab" style="margin-top:14px">Ton mouvement aujourd’hui</div>
      <div class="seg-ctrl wrap" id="hSteps" style="grid-template-columns:1fr 1fr 1fr 1fr">
        <button data-v="1200">peu</button><button data-v="6000" class="sel">un peu</button><button data-v="14000">beaucoup</button><button data-v="">passer</button>
      </div>
      <div class="planlab" style="margin-top:14px">Ton rythme au repos, ces jours-ci</div>
      <div class="seg-ctrl wrap" id="hHR" style="grid-template-columns:1fr 1fr 1fr">
        <button data-v="up">plus haut</button><button data-v="flat" class="sel">comme d’habitude</button><button data-v="">passer</button>
      </div>
      <button class="btn solid" id="healthSave" style="width:100%;margin-top:16px">Enregistrer pour aujourd’hui</button>
      <div class="demo-note sans" id="healthSaved" style="min-height:18px;margin-top:8px"></div>
      <button class="btn" id="healthRevoke" style="width:100%;margin-top:10px;border-color:rgba(162,59,46,.4)">Couper l’écoute et tout effacer</button>
      <button class="btn" id="healthBack2" style="width:100%;margin-top:8px;border-color:transparent;color:var(--gray)">Revenir</button>
    </div>
  </section>

  <!-- HISTORIQUE -->
  <section class="screen" id="sHistory">
    <div class="q-eyebrow sans">Mon espace</div>
    <h1>Ton histoire de pratique.</h1>
    <div id="histStats" style="margin:4px 0 12px"></div>
    <div class="planlab">Tes dernières pratiques</div>
    <div id="histList"></div>
    <button class="btn solid" id="histBack" style="margin-top:14px">Revenir</button>
  </section>

  <!-- FIN -->
  <section class="screen" id="sEnd">
    <div class="done-title">C’est fait.</div>
    <div class="chain" id="chainBox" style="display:none" aria-hidden="true"></div>
    <div class="done-sub" id="endSub">Prends une seconde pour remarquer ce qui a changé, même légèrement.</div>
  <!-- rc171 : trois temps. Tu repars… ; garder ou ecrire ; terminer. Une seule sortie,
       qui revient d'ou l'on vient. Le mot du temps long ne se dit qu'a la premiere et a
       la dixieme pratique : la pedagogie du temps long vit dans l'article, jamais en boucle. -->
  <div id="feelRow" style="display:flex;gap:10px;align-items:center;min-height:44px">
    <span class="demo-note sans" style="margin:0">Tu repars…</span>
    <button class="btn" data-feel="mieux" style="padding:10px 18px;font-size:0.875rem">Mieux</button>
    <button class="btn" data-feel="pareil" style="padding:10px 18px;font-size:0.875rem;border-color:rgba(108,104,95,.5);color:var(--gray)">Pareil</button>
    <span class="demo-note sans" id="feelNote" style="display:none;margin:0">Noté.</span>
  </div>
  <div style="display:flex;gap:8px;margin:12px 0 0">
    <div id="reproRow" style="flex:1;display:none;margin:0">
      <button class="btn" id="reproBtn" style="width:100%;font-size:0.875rem;padding:12px 8px">Je veux la reproduire</button>
      <div class="demo-note sans" id="reproNote" aria-live="polite" style="min-height:16px;text-align:center;margin-top:4px"></div>
    </div>
    <button class="btn" id="endJournal" style="flex:1;font-size:0.875rem;padding:12px 8px;align-self:flex-start">Écrire ce qui reste</button>
  </div>
  <div id="endEcho" style="display:none"></div>
  <div class="demo-note sans" id="endDuree" style="display:none;margin:14px 0 4px;line-height:1.55">Une méditation détend sur l’instant. Une méditation quotidienne apaise l’âme. La première est vraie dès aujourd’hui ; la seconde se construit, quelques minutes à la fois, sur des semaines. Rien à réussir : il suffit de revenir. <a href="https://agostinijohnatan.com/mediter" target="_blank" rel="noopener" style="color:var(--gold-texte)">Pourquoi ça prend du temps</a></div>
  <button class="btn solid" id="againBtn" style="margin-top:14px">Terminer</button>  </section>

  <!-- BOIRE · MES TROIS MOMENTS -->
  <section class="screen" id="sMoments">
    <div class="q-eyebrow sans" style="color:var(--p2)">Boire · ritualiser</div>
    <h1>Mes trois moments.</h1>
    <p class="demo-note sans" style="margin:-2px 0 18px">Un verre se boit mieux quand il s’accroche à quelque chose que tu fais déjà. Pas un objectif de plus&nbsp;: trois points d’accroche dans une journée qui existe.</p>

    <div class="pref"><div class="lab sans">Quel geste fais-tu chaque matin, sans y penser&nbsp;?</div>
      <textarea id="moMatin" rows="2" class="deposer-champ" placeholder="Le café, l’ordinateur qui s’allume, les dents." aria-label="Quel geste fais-tu chaque matin, sans y penser ?"></textarea></div>

    <div class="pref"><div class="lab sans">Et vers le milieu de journée&nbsp;?</div>
      <textarea id="moMidi" rows="2" class="deposer-champ" placeholder="Le déjeuner, un trajet, une réunion qui revient." aria-label="Et vers le milieu de journée ?"></textarea></div>

    <div class="pref"><div class="lab sans">Et en fin de journée&nbsp;?</div>
      <textarea id="moSoir" rows="2" class="deposer-champ" placeholder="Rentrer, fermer l’ordinateur, préparer le repas." aria-label="Et en fin de journée ?"></textarea></div>

    <div class="tipcard" style="margin-top:16px">Pose un verre à portée de chacun de ces trois moments. Tu ne changes pas ta journée&nbsp;: tu changes la distance entre elle et l’eau.</div>

    <button class="btn solid" id="moGarder" style="width:100%;margin-top:16px">Garder</button>
    <p class="demo-note sans" id="moNote" aria-live="polite" style="min-height:18px;text-align:center;margin-top:8px"></p>
    <button class="btn" id="moBack" style="width:100%;margin-top:4px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <!-- MANGER · FAIM OU ENVIE -->
  <section class="screen" id="sFaimEnvie">
    <div class="q-eyebrow sans" style="color:var(--p3)">Manger · ressentir</div>
    <h1>Faim ou envie&nbsp;?</h1>
    <p class="demo-note sans" style="margin:-2px 0 18px">Les deux se ressemblent beaucoup, et aucune des deux n’a tort. On regarde, et on ne décide rien&nbsp;: savoir laquelle est là suffit à changer la suite, ou pas.</p>

    <div class="pref"><div class="lab sans">Qu’est-ce que tu ressens, dans le corps&nbsp;?</div>
      <textarea id="fePhysique" rows="2" class="deposer-champ" placeholder="Le ventre, la gorge, la tête, l’énergie." aria-label="Qu’est-ce que tu ressens, dans le corps ?"></textarea></div>

    <div class="pref"><div class="lab sans">Et qu’est-ce qui se passe autour, ou dans ta journée&nbsp;?</div>
      <textarea id="feContexte" rows="2" class="deposer-champ" placeholder="L’heure, la fatigue, une contrariété, une odeur, une habitude." aria-label="Et qu’est-ce qui se passe autour, ou dans ta journée ?"></textarea></div>

    <div class="pref"><div class="lab sans">Si tu devais nommer ce dont tu as besoin, là&nbsp;?</div>
      <textarea id="feBesoin" rows="2" class="deposer-champ" placeholder="Manger, souffler, dormir, parler à quelqu’un. Ou manger, tout simplement." aria-label="Si tu devais nommer ce dont tu as besoin, là ?"></textarea></div>

    <div class="tipcard" style="margin-top:16px">Manger par envie n’est pas une faute, et manger par émotion non plus. Le seul intérêt de regarder, c’est de savoir ce que tu fais.</div>

    <button class="btn solid" id="feGarder" style="width:100%;margin-top:16px">Garder</button>
    <p class="demo-note sans" id="feNote" aria-live="polite" style="min-height:18px;text-align:center;margin-top:8px"></p>
    <button class="btn" id="feBack" style="width:100%;margin-top:4px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <!-- MANGER · CE QUE MON PLACARD DÉCIDE -->
  <section class="screen" id="sPlacard">
    <div class="q-eyebrow sans" style="color:var(--p3)">Manger · préparer</div>
    <h1>Ce que mon placard décide.</h1>
    <p class="demo-note sans" style="margin:-2px 0 18px">Entre l’intention et le geste, il y a une distance qui se mesure en secondes et en obstacles. La déplacer une fois vaut mieux que se motiver tous les jours.</p>

    <div class="pref"><div class="lab sans">Qu’est-ce que tu aimerais manger plus souvent&nbsp;?</div>
      <textarea id="plOui" rows="2" class="deposer-champ" placeholder="Ce que tu aimes vraiment, pas ce qui ferait bien." aria-label="Qu’est-ce que tu aimerais manger plus souvent ?"></textarea></div>

    <div class="pref"><div class="lab sans">Qu’est-ce qui rendrait ça plus facile, demain&nbsp;?</div>
      <textarea id="plFacile" rows="2" class="deposer-champ" placeholder="Un bocal devant, un truc déjà coupé, une course faite." aria-label="Qu’est-ce qui rendrait ça plus facile, demain ?"></textarea></div>

    <div class="pref"><div class="lab sans">Et qu’est-ce qui demanderait un geste de plus pour y arriver&nbsp;?</div>
      <textarea id="plLoin" rows="2" class="deposer-champ" placeholder="Un placard plus haut, une autre pièce, ne plus en avoir d’avance." aria-label="Et qu’est-ce qui demanderait un geste de plus pour y arriver ?"></textarea></div>

    <div class="tipcard" style="margin-top:16px">Rien n’est interdit. On change la distance, pas la liste.</div>

    <button class="btn solid" id="plGarder" style="width:100%;margin-top:16px">Garder</button>
    <p class="demo-note sans" id="plNote" aria-live="polite" style="min-height:18px;text-align:center;margin-top:8px"></p>
    <button class="btn" id="plBack" style="width:100%;margin-top:4px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <!-- S'ÉLEVER · CE QUI DÉPEND DE MOI -->
  <section class="screen" id="sDepend">
    <div class="q-eyebrow sans" style="color:var(--p7)">S’élever · se délester</div>
    <h1>Ce qui dépend de moi.</h1>
    <p class="demo-note sans" style="margin:-2px 0 18px">Une idée vieille de vingt siècles, et toujours utile&nbsp;: une partie de ce qui t’occupe dépend de toi, une autre non. Les trier ne change pas la situation. Ça change ce que tu portes.</p>

    <div class="pref"><div class="lab sans">Qu’est-ce qui t’occupe en ce moment&nbsp;?</div>
      <textarea id="depOccupe" rows="2" class="deposer-champ" placeholder="Une situation, une personne, une échéance." aria-label="Qu’est-ce qui t’occupe en ce moment ?"></textarea></div>

    <div class="pref"><div class="lab sans">Là-dedans, qu’est-ce qui dépend de toi&nbsp;?</div>
      <textarea id="depMoi" rows="2" class="deposer-champ" placeholder="Ce que tu peux faire, dire, décider, préparer." aria-label="Là-dedans, qu’est-ce qui dépend de toi ?"></textarea></div>

    <div class="pref"><div class="lab sans">Et qu’est-ce qui n’en dépend pas&nbsp;?</div>
      <textarea id="depAutre" rows="2" class="deposer-champ" placeholder="Ce que fera l’autre, le temps qu’il fera, ce qui est déjà passé." aria-label="Et qu’est-ce qui n’en dépend pas ?"></textarea></div>

    <div class="tipcard" style="margin-top:16px">Ce qui dépend de toi mérite ton énergie. Le reste mérite ta confiance, ou au moins ta patience.</div>

    <button class="btn solid" id="depGarder2" style="width:100%;margin-top:16px">Garder</button>
    <p class="demo-note sans" id="depNote2" aria-live="polite" style="min-height:18px;text-align:center;margin-top:8px"></p>
    <button class="btn" id="depBack2" style="width:100%;margin-top:4px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <!-- S'ÉLEVER · L'ÉCART -->
  <section class="screen" id="sEcart">
    <div class="q-eyebrow sans" style="color:var(--p7)">S’élever · trouver du sens</div>
    <h1>L’écart.</h1>
    <p class="demo-note sans" style="margin:-2px 0 18px">Tes valeurs se lisent moins dans ce que tu dis que dans ce à quoi tu donnes ton temps. Regarder l’écart n’est pas un reproche&nbsp;: c’est une information.</p>

    <div class="pref"><div class="lab sans">Qu’est-ce qui compte vraiment pour toi&nbsp;?</div>
      <textarea id="ecartCompte" rows="2" class="deposer-champ" placeholder="Deux ou trois choses, pas dix." aria-label="Qu’est-ce qui compte vraiment pour toi ?"></textarea></div>

    <div class="pref"><div class="lab sans">À quoi as-tu donné ton temps cette semaine&nbsp;?</div>
      <textarea id="ecartTemps" rows="2" class="deposer-champ" placeholder="Ce qui a réellement occupé tes heures." aria-label="À quoi as-tu donné ton temps cette semaine ?"></textarea></div>

    <div class="pref"><div class="lab sans">Quel petit déplacement rapprocherait les deux&nbsp;?</div>
      <textarea id="ecartPas" rows="2" class="deposer-champ" placeholder="Petit. Vraiment petit." aria-label="Quel petit déplacement rapprocherait les deux ?"></textarea></div>

    <div class="tipcard" style="margin-top:16px">Un écart existe toujours, chez tout le monde. Ce qui compte n’est pas de le supprimer&nbsp;: c’est de le connaître, et de le resserrer un peu.</div>

    <button class="btn solid" id="ecartGarder" style="width:100%;margin-top:16px">Garder</button>
    <p class="demo-note sans" id="ecartNote" aria-live="polite" style="min-height:18px;text-align:center;margin-top:8px"></p>
    <button class="btn" id="ecartBack" style="width:100%;margin-top:4px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <!-- SE REPRODUIRE · UNE CHOSE À REPRODUIRE -->
  <section class="screen" id="sUneChose">
    <div class="q-eyebrow sans" style="color:var(--p6)">Se reproduire · répéter</div>
    <h1>Une chose à reproduire.</h1>
    <p class="demo-note sans" style="margin:-2px 0 18px">Deux phrases, ce soir. Ce qui mérite d’exister à nouveau ne se décide pas une fois pour toutes&nbsp;: ça se choisit, un jour après l’autre.</p>

    <div class="pref"><div class="lab sans">Qu’est-ce qui, dans cette journée, mérite d’exister à nouveau&nbsp;?</div>
      <textarea id="uneQuoi" rows="2" class="deposer-champ" placeholder="Un moment, un geste, une conversation, un silence." aria-label="Qu’est-ce qui, dans cette journée, mérite d’exister à nouveau ?"></textarea></div>

    <div class="pref"><div class="lab sans">Comment pourrais-tu lui donner une nouvelle occasion d’exister&nbsp;?</div>
      <textarea id="uneComment" rows="2" class="deposer-champ" placeholder="Une occasion, pas une promesse." aria-label="Comment pourrais-tu lui donner une nouvelle occasion d’exister ?"></textarea></div>

    <div class="tipcard" style="margin-top:16px">La discipline n’est pas de réussir une action une fois. C’est de créer les conditions dans lesquelles elle peut être reproduite.</div>

    <button class="btn solid" id="uneGarder" style="width:100%;margin-top:16px">Garder</button>
    <p class="demo-note sans" id="uneNote" aria-live="polite" style="min-height:18px;text-align:center;margin-top:8px"></p>
    <button class="btn" id="uneBack" style="width:100%;margin-top:4px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <!-- SE REPRODUIRE · REPRODUIRE CONSCIEMMENT -->
  <section class="screen" id="sConscient">
    <div class="q-eyebrow sans" style="color:var(--p6)">Se reproduire · répéter</div>
    <h1>Reproduire consciemment.</h1>
    <p class="demo-note sans" style="margin:-2px 0 18px">Trois regards, sans jugement. Ce qui se répète dans une vie vient de mille endroits&nbsp;: l’habitude, le contexte, la facilité. Regarder suffit pour commencer.</p>

    <div class="pref"><div class="lab sans">Qu’est-ce que je reproduis déjà&nbsp;?</div>
      <textarea id="consDeja" rows="2" class="deposer-champ" placeholder="Ce qui revient, en bien comme en moins bien." aria-label="Qu’est-ce que je reproduis déjà ?"></textarea></div>

    <div class="pref"><div class="lab sans">Qu’est-ce qui se reproduit alors que je ne souhaite plus le transmettre&nbsp;?</div>
      <textarea id="consAssez" rows="2" class="deposer-champ" placeholder="Une phrase suffit, et elle reste chez toi." aria-label="Qu’est-ce qui se reproduit alors que je ne souhaite plus le transmettre ?"></textarea></div>

    <div class="pref"><div class="lab sans">Quelle est la prochaine répétition possible&nbsp;?</div>
      <textarea id="consProchaine" rows="2" class="deposer-champ" placeholder="La plus petite qui tienne." aria-label="Quelle est la prochaine répétition possible ?"></textarea></div>

    <div class="tipcard" style="margin-top:16px">Ce qui se répète a des causes, et elles sont rarement une seule. L’habitude, le contexte, la fatigue, ce qu’on a vu faire&nbsp;: regarder vaut mieux que conclure.</div>

    <button class="btn solid" id="consGarder" style="width:100%;margin-top:16px">Garder</button>
    <p class="demo-note sans" id="consNote" aria-live="polite" style="min-height:18px;text-align:center;margin-top:8px"></p>
    <button class="btn" id="consBack" style="width:100%;margin-top:4px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <!-- SE REPRODUIRE · CE QUE JE REPRODUIS -->
  <section class="screen" id="sReproduire">
    <div class="q-eyebrow sans" style="color:var(--p6)">Se reproduire · répéter</div>
    <h1>Ce que je reproduis.</h1>
    <p class="demo-note sans" style="margin:-2px 0 16px">Ce que tu as choisi de refaire, et le nombre de fois où tu l’as fait. Aucune série à tenir&nbsp;: une semaine sans rien ne casse rien.</p>
    <div id="reproListe"></div>
    <div class="tipcard" id="reproVide" style="display:none">À la fin d’une pratique qui te fait du bien, touche «&nbsp;Je veux la reproduire&nbsp;». Elle apparaîtra ici, avec le compte des fois où tu l’auras vécue.</div>
    <button class="btn" id="reproBack" style="width:100%;margin-top:16px;border-color:transparent;color:var(--gray)">Revenir</button>
  </section>

  <!-- NUIT (fin Sommeil) -->
  <section class="screen" id="sNight">
    <div class="night-word serif">Bonne nuit.</div>
    <div class="night-sub">La pratique est terminée. Tu peux poser l’écran, ou revenir tranquillement à l’application.</div>
    <div class="night-actions">
      <button class="btn solid" id="nightDone">Terminer</button>
      <button class="btn" id="nightBack">Revenir à Se reposer</button>
    </div>
  </section>
</main>

<!-- RÉGLAGES -->
<div class="sheet" id="tutoSheet" style="z-index:1200">
    <div class="sheet-in" style="top:50%;bottom:auto;transform:translateY(-50%);left:14px;right:14px;border-radius:20px;max-height:min(78dvh, 640px);padding:26px 22px 24px">
      <div id="tutoSlides">
        <div class="tutoS" data-i="0">
          <div style="display:flex;gap:8px;justify-content:center;margin:4px 0 16px" aria-hidden="true"><span style="width:8px;height:8px;border-radius:50%;background:#2F8C7A;opacity:.85"></span><span style="width:8px;height:8px;border-radius:50%;background:#3E7CA6;opacity:.85"></span><span style="width:8px;height:8px;border-radius:50%;background:#B0763A;opacity:.85"></span><span style="width:8px;height:8px;border-radius:50%;background:#A0522D;opacity:.85"></span><span style="width:8px;height:8px;border-radius:50%;background:#4B4E7D;opacity:.85"></span><span style="width:8px;height:8px;border-radius:50%;background:#8E4A5B;opacity:.85"></span><span style="width:8px;height:8px;border-radius:50%;background:#8A6FA8;opacity:.85"></span></div>
          <h2 style="font-family:Georgia,'Times New Roman',serif;font-size:1.3125rem;line-height:1.3;margin:0 0 10px;text-align:center">Bienvenue chez toi.</h2>
          <p class="sans" style="margin:0 0 10px;font-size:0.9375rem;line-height:1.65;color:var(--gray);text-align:center">Elle sert à une chose : t’introspecter, avoir une lecture de toi grâce aux sept piliers et aux trois verticales, le corps, l’esprit et l’âme.</p>
          <p class="sans" style="margin:0;font-size:0.9375rem;line-height:1.65;color:var(--gray);text-align:center">Quatre écrans, pas un de plus. Voici à quoi sert chacun : trente secondes, et tu n’auras plus jamais à y penser.</p>
        </div>
        <div class="tutoS" data-i="1" style="display:none">
          <div class="tiplab sans" style="text-align:center">Aujourd’hui</div>
          <h2 style="font-family:Georgia,'Times New Roman',serif;font-size:1.3125rem;line-height:1.3;margin:0 0 10px;text-align:center">Le geste du jour.</h2>
          <p class="sans" style="margin:0;font-size:0.9375rem;line-height:1.65;color:var(--gray);text-align:center">Tu réponds à quelques questions sur ton état, l’application te propose <b>une seule</b> pratique ajustée au moment. Pas une liste : une direction.</p>
        </div>
        <div class="tutoS" data-i="2" style="display:none">
          <div class="tiplab sans" style="text-align:center">Explorer</div>
          <h2 style="font-family:Georgia,'Times New Roman',serif;font-size:1.3125rem;line-height:1.3;margin:0 0 10px;text-align:center">Ta liberté.</h2>
          <p class="sans" style="margin:0;font-size:0.9375rem;line-height:1.65;color:var(--gray);text-align:center">Les sept piliers, leurs portes, leurs pratiques. Ici personne ne te recommande rien : tu choisis ce vers quoi tu vas.</p>
        </div>
        <div class="tutoS" data-i="3" style="display:none">
          <div class="tiplab sans" style="text-align:center">Journal</div>
          <h2 style="font-family:Georgia,'Times New Roman',serif;font-size:1.3125rem;line-height:1.3;margin:0 0 10px;text-align:center">À toi seul.</h2>
          <p class="sans" style="margin:0;font-size:0.9375rem;line-height:1.65;color:var(--gray);text-align:center">Ce que tu écris reste sur cet appareil. Personne ne le lit, aucun algorithme ne l’analyse. Il te sera re-présenté un jour, quand ce sera utile.</p>
        </div>
        <div class="tutoS" data-i="4" style="display:none">
          <div class="tiplab sans" style="text-align:center">Mon espace</div>
          <h2 style="font-family:Georgia,'Times New Roman',serif;font-size:1.3125rem;line-height:1.3;margin:0 0 10px;text-align:center">Ton abonnement et tes réglages.</h2>
          <p class="sans" style="margin:0;font-size:0.9375rem;line-height:1.65;color:var(--gray);text-align:center">Ta carte, tes rappels, ta sauvegarde, ton code partenaire. Tout ce qui te concerne, rangé au même endroit.</p>
        </div>
        <div class="tutoS" data-i="5" style="display:none">
          <div class="tiplab sans" style="text-align:center">Un garde-fou</div>
          <h2 style="font-family:Georgia,'Times New Roman',serif;font-size:1.3125rem;line-height:1.3;margin:0 0 10px;text-align:center">L’app suggère, tu choisis.</h2>
          <p class="sans" style="margin:0;font-size:0.9375rem;line-height:1.65;color:var(--gray);text-align:center">Rien ici n’est la bonne pratique. Ce sont des questions, testées sur des profils différents, posées à toi. La bonne pratique, c’est celle que tu trouves, à travers l’outil. Le petit <b>?</b> à côté de chaque pratique te dit ce qu’elle apporte et l’intention derrière.</p>
        </div>
        <div class="tutoS" data-i="6" style="display:none">
          <div class="tiplab sans" style="text-align:center">Sur ton écran d’accueil</div>
          <h2 style="font-family:Georgia,'Times New Roman',serif;font-size:1.3125rem;line-height:1.3;margin:0 0 10px;text-align:center">Garde-la sous le pouce.</h2>
          <p class="sans" id="tutoInstallP" style="margin:0;font-size:0.9375rem;line-height:1.65;color:var(--gray);text-align:center">Le cerveau aime le facile : une icône sur ton écran d’accueil, et l’application s’ouvre en plein écran, en un geste.</p>
          <button class="btn" id="tutoInstall" style="width:100%;margin-top:14px;font-size:0.875rem;padding:11px">Voir comment faire</button>
        </div>
        <!-- rc191 · Le dernier écran ouvre l'expérience offerte. La formulation est
             celle déjà arbitrée pour « Ta lecture d'abord » : on ne réinvente rien. -->
        <div class="tutoS" data-i="7" style="display:none">
          <div class="tiplab sans" style="text-align:center">Ton expérience offerte</div>
          <h2 style="font-family:Georgia,'Times New Roman',serif;font-size:1.3125rem;line-height:1.3;margin:0 0 10px;text-align:center">Tout commence par ta lecture.</h2>
          <p class="sans" style="margin:0;font-size:0.9375rem;line-height:1.65;color:var(--gray);text-align:center">Sept questions, soixante secondes, offertes. Elle te donne ton pilier à explorer, celui qui mérite ton attention aujourd’hui, et c’est lui qui règle Aujourd’hui, ton plan du soir et tes pratiques.</p>
          <button class="btn solid" id="tutoTest" style="width:100%;margin-top:14px;font-size:0.9375rem;padding:13px">Faire mes 7 questions</button>
        </div>
      </div>
      <div id="tutoPoints" style="display:flex;gap:7px;justify-content:center;margin:20px 0 16px"></div>
      <button class="btn solid" id="tutoNext" style="width:100%;font-size:0.9375rem;padding:13px">Continuer</button>
      <div style="display:flex;gap:10px;margin-top:8px">
        <button class="btn" id="tutoPrev" style="flex:1;font-size:0.875rem;padding:11px;border-color:transparent;color:var(--gray)">Précédent</button>
        <button class="btn" id="tutoSkip" style="flex:1;font-size:0.875rem;padding:11px;border-color:transparent;color:var(--gray)">Passer</button>
      </div>
    </div>
  </div>
  <div class="sheet" id="capSheet" style="z-index:1150">
    <div class="sheet-in">
      <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:12px">
        <div class="tiplab sans" style="margin-bottom:10px">Comprendre mon sommeil</div>
        <button class="btn" id="capClose" aria-label="Fermer" style="padding:4px 10px;min-height:32px;border-color:transparent;color:var(--gray);font-size:1.125rem;line-height:1">✕</button>
      </div>
      <h2 id="capTitre" style="font-family:Georgia,'Times New Roman',serif;font-size:1.3125rem;line-height:1.3;margin:0 0 4px"></h2>
      <div class="demo-note sans" id="capSous" style="margin:0 0 14px"></div>
      <div id="capCorps" style="font-size:1rem;line-height:1.65"></div>
      <div class="planlab" style="margin-top:18px">D’où ça vient</div>
      <div class="demo-note sans" id="capSource" style="margin-top:0"></div>
      <a id="capArticle" class="btn" target="_blank" rel="noopener" style="display:block;text-align:center;text-decoration:none;margin-top:16px">Lire l’article complet</a>
      <button class="btn" id="capFini" style="width:100%;margin-top:18px">J’ai lu</button>
    </div>
  </div>
  <div class="sheet" id="pqSheet" style="z-index:1150">
    <div class="sheet-in">
      <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:12px">
        <div class="tiplab sans" style="margin-bottom:10px">Pourquoi cette pratique</div>
        <button class="btn" id="pqClose" aria-label="Fermer" style="padding:4px 10px;min-height:32px;border-color:transparent;color:var(--gray);font-size:1.125rem;line-height:1">✕</button>
      </div>
      <h2 id="pqTitre" style="font-family:Georgia,'Times New Roman',serif;font-size:1.3125rem;line-height:1.3;margin:0 0 14px"></h2>
      <div class="planlab">Ce que ça apporte</div>
      <p id="pqBienfait" style="font-size:1rem;line-height:1.6;margin:0 0 6px"></p>
      <div class="planlab">L’intention derrière</div>
      <p id="pqIntention" style="font-size:1rem;line-height:1.6;margin:0 0 6px"></p>
      <p class="demo-note sans" style="margin-top:16px;padding-top:12px;border-top:1px solid rgba(169,130,60,.18)">L’application suggère : la bonne pratique, c’est celle que tu trouves, à travers l’outil. Ce qu’elle propose a fait ses preuves sur différents profils ; ce sont des questions posées à toi, jamais des réponses.</p>
    </div>
  </div>
  <div class="sheet" id="installSheet">
    <div class="sheet-in">
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px">
        <div class="tiplab sans" style="margin:0">Mettre Les 7 Piliers de l’Individuation sur ton écran</div>
        <button id="installSheetClose" aria-label="Fermer" style="background:none;border:1px solid var(--filet);border-radius:999px;width:32px;height:32px;font-size:0.9375rem;color:var(--gray);cursor:pointer">✕</button>
      </div>
      <p class="sans" id="installSheetIntro" style="margin:0 0 16px;font-size:0.875rem;line-height:1.6;color:var(--gray)">Trois secondes, et l’application s’ouvre en plein écran depuis ton écran d’accueil.</p>
      <div id="installSheetIOS">
        <div style="display:flex;gap:13px;align-items:flex-start;margin-bottom:14px">
          <div style="flex:0 0 30px;height:30px;border-radius:50%;background:var(--lueur);color:var(--gold-texte);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:0.875rem">1</div>
          <p class="sans" style="margin:0;font-size:0.875rem;line-height:1.55">Touche le bouton <b>Partager</b> de Safari, en bas : un carré avec une flèche vers le haut.</p>
        </div>
        <div style="display:flex;gap:13px;align-items:flex-start;margin-bottom:14px">
          <div style="flex:0 0 30px;height:30px;border-radius:50%;background:var(--lueur);color:var(--gold-texte);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:0.875rem">2</div>
          <p class="sans" style="margin:0;font-size:0.875rem;line-height:1.55">Fais défiler et choisis <b>« Sur l’écran d’accueil »</b>.</p>
        </div>
        <div style="display:flex;gap:13px;align-items:flex-start">
          <div style="flex:0 0 30px;height:30px;border-radius:50%;background:var(--lueur);color:var(--gold-texte);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:0.875rem">3</div>
          <p class="sans" style="margin:0;font-size:0.875rem;line-height:1.55">Touche <b>Ajouter</b>. Le monogramme des 7 Piliers de l’Individuation est sur ton écran.</p>
        </div>
      </div>
      <div id="installSheetAndroid" style="display:none">
        <p class="sans" style="margin:0 0 14px;font-size:0.875rem;line-height:1.6">Une seule touche suffit : ton navigateur te demandera de confirmer.</p>
        <button class="btn solid" id="installSheetGo" style="width:100%;font-size:0.9375rem;padding:13px">Installer maintenant</button>
      </div>
      <p class="sans" id="installSheetDejaLa" style="display:none;margin:0;font-size:0.875rem;line-height:1.6;color:var(--gold-texte)">Elle y est déjà : tu l’utilises depuis ton écran d’accueil.</p>
    </div>
  </div>
  <div class="sheet" id="sheet">
  <div class="sheet-in">
    <div style="display:flex;justify-content:space-between;align-items:center;margin:0 -2px 16px;position:sticky;top:-24px;padding:18px 2px 10px;background:linear-gradient(var(--card) 78%,rgba(253,248,240,0));z-index:2">
      <h2 style="margin:0">Réglages</h2>
      <button id="sheetClose" aria-label="Fermer" style="background:none;border:1px solid var(--filet);border-radius:999px;width:32px;height:32px;font-size:0.9375rem;color:var(--gray);cursor:pointer">✕</button>
    </div>
    <!-- La teinte et le grain du papier sont une décision de la marque, pas un réglage : retirés le 1er septembre 2026. -->
    <!-- v91 : Expérience et Guidage retirés des réglages. Le moteur conserve des valeurs internes stables pour compatibilité. -->
    <div class="pref" style="display:none" aria-hidden="true"><div class="lab sans">Univers sonore</div>
      <div class="seg-ctrl wrap" data-pref="univ"><button data-v="A" class="sel">Nappe</button><button data-v="B">Clair-obscur</button><button data-v="mer">Mer</button><button data-v="pluie">Pluie</button><button data-v="foret">Forêt</button><button data-v="feu">Feu</button><button data-v="ruisseau">Ruisseau</button></div>
      </div>
    <div class="pref"><div class="lab sans">Volume du fond sonore</div>
      <input type="range" id="bedVol" min="20" max="300" value="100" style="width:100%;accent-color:#8E6A2F" aria-label="bedVol">
    </div>
    <div class="pref"><div class="lab sans">Rythme de la voix</div>
      <div class="seg-ctrl wrap" data-pref="rate" style="grid-template-columns:1fr 1fr 1fr 1fr">
        <button data-v="0.85">Très posé</button><button data-v="1" class="sel">Posé</button><button data-v="1.15">Fluide</button><button data-v="1.3">Vif</button>
      </div>
      <div class="demo-note sans" style="margin-top:6px">Les durées annoncées valent au rythme Posé. En méditation, l’app compense dans les silences ; les pratiques à durée fixe se raccourcissent ou s’allongent d’autant.</div>
    </div>
    <div class="pref" id="prefDemoRow" style="display:none"><div class="lab sans">Position d’écoute</div>
      <div class="seg-ctrl" data-pref="pos"><button data-v="assis" class="sel">Assis</button><button data-v="allonge">Allongé</button></div></div>
    <div class="pref" style="display:none" aria-hidden="true"><div class="lab sans">Silences courts</div>
      <div class="seg-ctrl" data-pref="demo"><button data-v="reel" class="sel">Durées réelles</button><button data-v="court">Aperçu rapide</button></div></div>
    <div class="pref" style="display:none" aria-hidden="true"><div class="lab sans">Pourquoi cette proposition</div>
      <div class="seg-ctrl" data-pref="devmode"><button data-v="off" class="sel">Masquée</button><button data-v="on">Visible</button></div></div>
    <div class="pref"><div class="lab sans">Langue</div>
      <div class="seg-ctrl" data-pref="langue"><button data-v="fr">Français</button><button data-v="en">Anglais</button></div>
      <div class="demo-note sans" style="margin-top:6px">L’app se rouvre dans la langue choisie : les écrans, les pratiques et la voix te suivent.</div>
    </div>
    <div class="pref"><div class="lab sans">Pour mieux adapter certains repères</div>
      <div class="seg-ctrl" data-pref="reperePhysio" style="grid-template-columns:1fr 1fr 1fr"><button data-v="femme">Femme</button><button data-v="homme">Homme</button><button data-v="aucun" class="sel">Ne pas préciser</button></div>
      <div class="demo-note sans" style="margin-top:6px">Certains repères physiologiques diffèrent selon les références scientifiques. Tu peux choisir celui que l’app utilise. C’est facultatif, ça se change ici à tout moment, et ça reste sur cet appareil : jamais envoyé, jamais déduit. Pour l’instant, seul le repère d’eau du pilier Boire s’en sert.</div>
    </div>
    <p class="demo-note">La voix des pratiques est celle de Johnatan. Si la banque vocale est momentanément inaccessible, une voix d’aperçu prend le relais et l’app te l’indique. Si tu n’entends rien, vérifie le mode silencieux et le volume de l’appareil.</p>
    <button class="btn solid" id="closeSheet" style="width:100%;margin-top:6px">Fermer</button>
  </div>
</div>

  <!-- NAVIGATION PRINCIPALE -->
  <nav class="tabbar" id="tabbar" aria-label="Navigation principale">
    <button data-tab="sHome" class="on">Aujourd’hui</button>
    <button data-tab="sExplorer">Explorer</button>
    <button data-tab="sJournal">Journal</button>
    <button data-tab="sProfil">Mon espace</button>
  </nav>
  <button class="boirechip" id="boireChip" aria-label="Ajouter un verre d’eau"><span class="water-drop" aria-hidden="true"><svg viewBox="0 0 24 30"><path d="M12 1.5C9.2 6.2 3.5 12.2 3.5 18.3A8.5 8.5 0 0 0 12 26.8a8.5 8.5 0 0 0 8.5-8.5C20.5 12.2 14.8 6.2 12 1.5Z"/></svg></span><span class="boire-label">+ 1 verre</span></button>



<script src="app-v113-rc207-parcours-offre.js"></script>
</body>
</html>
