<!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 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">
<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="7 Piliers">
<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">
<title>Les 7 Piliers de l’Individuation</title>
<meta name="application-name" content="Les 7 Piliers">
<meta property="og:title" content="Les 7 Piliers de l'Individuation">
<meta property="og:site_name" content="Les 7 Piliers">
<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-rc10-boucle.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:17px">☰</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</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 class="sans" style="font-size:14.5px;line-height:1.6;color:var(--gray);margin:2px 0 18px">Ton e-mail identifie ton espace : il reste sur cet appareil. Si tu as reçu un code, colle-le ici, l’application reconnaît lequel c’est.</p>

    <label class="sans" for="entreeEmail" style="display:block;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);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 rgba(142,106,47,.35);border-radius:14px;background:var(--card);color:var(--ink);font-family:inherit;font-size:16px" aria-label="prenom@exemple.fr">

    <label class="sans" for="entreeCode" style="display:block;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin:16px 0 6px">Ton code <span style="text-transform:none;letter-spacing:0;color:var(--gray)">· si tu en as un</span></label>
    <input id="entreeCode" type="text" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" placeholder="ton code personnel, ou le code reçu par e-mail"
      style="width:100%;padding:14px 16px;border:1px solid rgba(142,106,47,.28);border-radius:14px;background:var(--card);color:var(--ink);font-family:inherit;font-size:15px" aria-label="ton code personnel, ou le code reçu par e-mail">

    <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:13px;color:#fff;background:var(--gold)">✓</span>
      <span class="sans" style="font-size:14px;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:13.5px;line-height:1.5;color:var(--gold)"></p>
    <button class="btn solid" id="entreeGo" style="width:100%;margin-top:6px;font-size:15px;padding:15px">Entrer</button>
    <p class="sans" style="margin:14px 0 0;text-align:center;font-size:12.5px;color:var(--gray)">Sans code, tu entres en découverte : ton pilier t’est offert.</p>
    <button class="btn" id="entreeOffres" style="width:100%;margin-top:10px;font-size:13.5px;padding:11px;border-color:transparent;color:var(--gold)">Je sais déjà : voir les formules →</button>
    <p class="sans" style="margin:16px 0 0;text-align:center;font-size:12px;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:11.5px;color:var(--gray)">© Agostini Accompagnements EURL · tous droits réservés</p>
  </section>



  <!-- RETROUVER UN ESPACE EXISTANT · bêta locale -->
  

  <!-- 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:14px;line-height:1.6;color:var(--gray);margin:4px 0 14px">Ton adresse identifie ton espace. Tes données restent sur cet appareil ; aucune donnée n’est envoyée pour créer ce profil. La synchronisation entre appareils arrivera avec le compte en ligne.</p>
    <input id="signupEmail" type="email" placeholder="ton@adresse.fr" style="width:100%;border:1px solid rgba(142,106,47,.35);border-radius:12px;padding:14px;font-family:inherit;font-size:15px;background:var(--card);color:var(--ink)" aria-label="ton@adresse.fr">
    <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à ton aperçu des 7 Piliers&nbsp;?</h1>
    <p class="sans" style="font-size:14px;line-height:1.6;color:var(--gray);margin:4px 0 14px">Après le test offert du site, ton code transporte uniquement ton aperçu initial des 7 piliers. Si tu as le Diagnostic complet, 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>aperçu initial ou Diagnostic complet</small></button>
      <button class="opt" id="sgNoCode">Pas encore <small>faire le test offert puis revenir ici avec mon aperçu</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>Colle ici n’importe lequel de tes codes : abonnement, code offert, aperçu initial ou Diagnostic. L’application reconnaît lequel c’est.</h1>
    <div id="codeStatusPaid" style="display:none;margin:0 0 14px;padding:14px 16px;border-radius:14px;border:1px solid rgba(142,106,47,.35);background:rgba(169,130,60,.10)">
      <p class="sans" style="margin:0;font-size:14px;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="7P-PHOTO-1… · 7P-DIAG-2… · ou code Diagnostic actuel" style="width:100%;min-height:96px;border:1px solid rgba(142,106,47,.35);border-radius:12px;padding:14px;font-family:-apple-system,monospace;font-size:13px;background:var(--card);color:var(--ink)" aria-label="7P-PHOTO-1… · 7P-DIAG-2… · ou code Diagnostic actuel"></textarea>
    <div class="demo-note sans" id="codeErr" style="min-height:18px"></div>
    <button class="btn solid" id="codeGo" style="margin-top:10px">Valider mon code</button>
    <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 complet 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" 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 complet</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 ton aperçu initial.</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"></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 rgba(142,106,47,.4);border-radius:10px;padding:10px;font-size:11.5px;margin-bottom:12px"></div>
    <div class="demo-note sans" id="todayHint" style="margin-top:14px"><b>Explorer reste ton espace de liberté.</b> Aujourd’hui, l’app t’aide à décider ; Explorer te laisse choisir sans recommandation.</div>
    
  
  <div id="jalonCard" style="display:none;margin:16px 0 0;padding:16px;border:1px solid rgba(142,106,47,.42);border-radius:16px;background:linear-gradient(180deg, rgba(169,130,60,.09), 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:14.5px;line-height:1.65;color:var(--ink)"></p>
    <button class="btn solid" id="jalonGo" style="width:100%;font-size:14px;padding:12px">Refaire mon aperçu, 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:13.5px;line-height:1.6;color:var(--gray)"></p>
      <button class="btn" id="jalonFidGo" style="width:100%;font-size:13.5px;padding:11px">Voir le Diagnostic écrit</button>
    </div>
    <button class="btn" id="jalonLater" style="width:100%;margin-top:8px;font-size:13px;padding:10px;border-color:transparent;color:var(--gray)">Une autre fois</button>
  </div>
  <div id="echoHome" style="display:none;margin:16px 0 0;padding:16px;border:1px solid rgba(142,106,47,.28);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:12.5px;color:var(--gold)"></p>
    <p id="echoHomeTexte" style="margin:0 0 12px;font-size:15px;line-height:1.7;font-style:italic;color:var(--ink)"></p>
    <button class="btn" id="echoHomeOk" style="width:100%;font-size:13.5px;padding:11px;border-color:transparent;color:var(--gray)">Merci</button>
  </div>
  <div id="majFaiteBar" style="display:none;margin:16px 0 0;padding:13px 16px;border:1px solid rgba(142,106,47,.3);border-radius:14px;background:var(--card)">
    <p class="sans" style="margin:0 0 4px;font-size:13.5px;line-height:1.55;color:var(--ink)"><b>L’application a été mise à jour.</b></p>
    <p class="sans" id="majFaiteNote" style="margin:0 0 10px;font-size:13px;line-height:1.55;color:var(--gray)"></p>
    <button class="btn" id="majFaiteOk" style="width:100%;font-size:13.5px;padding:10px;border-color:transparent;color:var(--gold)">Parfait</button>
  </div>
  <div id="stockBar" style="display:none;margin:16px 0 0;padding:13px 16px;border:1px solid rgba(169,130,60,.5);border-radius:14px;background:var(--card)">
    <p class="sans" style="margin:0 0 10px;font-size:13.5px;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:13.5px;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 rgba(142,106,47,.3);border-radius:14px;background:var(--card)">
    <p class="sans" style="margin:0 0 10px;font-size:13.5px;line-height:1.55;color:var(--gray)">Une nouvelle version des 7 Piliers 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:13.5px;padding:10px">Passer à la nouvelle version</button>
  </div>
  <div id="installBar" style="display:none;margin:16px 0 0;padding:14px 16px;border:1px solid rgba(142,106,47,.28);border-radius:14px;background:var(--card)">
    <p class="sans" id="installText" style="margin:0 0 10px;font-size:13.5px;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:13.5px;padding:10px">Installer l’application</button>
      <button class="btn" id="installLater" style="font-size:13px;padding:10px 14px">Plus tard</button>
    </div>
  </div>
</section>


  <!-- MODULE 01 · RESPIRER -->
  <section class="screen" id="sRespirer">
    <div class="q-eyebrow sans" style="color:#2F8C7A">Pilier 01 · Respirer</div>
    <h1>L’espace que tu gardes en toi.</h1>
    <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">Respirer · la pratique du souffle</div>
      <div class="opts">
      <button class="opt" id="respMedit">Ta méditation du jour <small>générée sur mesure : ton état, ton intention, ta duré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">Aérer l’esprit <small>~5 à 15 min · le souffle carré, les idées qui se rangent</small></button>
      <button class="opt" id="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">Le souffle reçu <small>~2 min 30 · recevoir, rendre : le plus vieil échange du monde</small></button>
      </div>
    </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:#B5651D">Pilier 03 · Manger</div>
    <h1>Se nourrir, c’est choisir ce que tu laisses entrer.</h1>
    <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" data-np="premiere" data-durseg="C24">La première bouchée <small>~2 min · avant un repas</small></button>
        <button class="opt" data-np="faim" data-durseg="C25">Écouter la faim <small>~2 min · hors repas · consulter, sans corriger</small></button>
        <button class="opt" data-np="satiete" data-durseg="C26">Entendre la satiété <small>~2 min · en fin de repas</small></button>
      </div>
    </div>
    <div id="nEsprit" style="display:none">
      <div class="tipcard" style="margin:0"><div class="tiplab sans">La nourriture d’esprit du jour</div>
        <div id="espritText" style="font-size:16px;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="tipcard" style="margin:0"><div class="tiplab sans">L’invitation du jour</div>
        <div id="ameText" style="font-size:16px;line-height:1.55"></div>
        <input id="ameNote" placeholder="Un mot pour toi, si tu veux, il reste ici, jamais enregistré" style="width:100%;border:none;border-bottom:1px solid rgba(142,106,47,.35);background:transparent;padding:8px 2px;font-family:inherit;font-size:14.5px;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>
    <button class="btn" id="nourrirBack" style="margin-top:14px;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>
    <div id="checkdayContext" class="demo-note sans" style="display:block;margin:0 0 14px;line-height:1.55">Le Point du jour lit le présent. Si tu as un Diagnostic, il ne le remplace pas : il aide l’app à ajuster 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">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 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 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:#C19A3E">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 rgba(142,106,47,.35);border-radius:12px;padding:14px;font-family:inherit;font-size:15px;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:22px">Ce que tu traverses dépasse ce que cette application peut accompagner.</h1>
    <p style="font-size:16px;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:#A65A57">Pilier 06 · Se reproduire</div>
    <h1>Qu’est-ce que tu fais grandir autour de toi ?</h1>
    <div class="demo-note sans" style="margin-bottom:10px">Le pilier du plaisir et de la sortie de soi. Des pratiques à la voix, aucune injonction, des mouvements intérieurs toujours révocables.</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">La connexion <small>~2 min · le toucher comme nourriture</small></button>
      </div>
    </div>
    <div id="lienDEsprit" style="display:none">
      <div class="planlab">Relier · les liens qui nourrissent</div>
      <div class="opts">
      <button class="opt" data-lp="tendresse" data-durseg="C38">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">Arriver entier à l’autre <small>~2 min · avant de retrouver quelqu’un</small></button>
      <button class="opt" data-lp="fil" data-durseg="C40">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">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">Ce qui passe par toi <small>~3 min · la transmission, ce qui grandit autour de toi</small></button>
      </div>
    </div>
    <button class="btn" id="lienBack" 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:#C19A3E">Pilier 07 · S’élever</div>
    <h1>La verticale du jour.</h1>
    <div class="demo-note sans" style="margin-bottom:10px">On s’élève de tout ce qu’on laisse redescendre.</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">Laisser redescendre · le mental qui se dépose</div>
      <div class="opts">
      <button class="opt" data-ep="matin" data-durseg="C32">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">La revue du soir <small>~3 min · relire la journée, avec des yeux honnêtes</small></button>
      <button class="opt" id="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">L’axe <small>~3 min · la ligne intérieure qui reste droite</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">La gratitude verticale <small>~2 min 30 · le merci qui monte</small></button>
      <button class="opt" data-ep="futur" data-durseg="C42">Confier le futur <small>~2 min 30 · ta part, et le reste qui se dépose</small></button>
      </div>
    </div>
    <button class="btn" id="eleverBack" style="margin-top:14px;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:14px;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:15px;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:15px;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:15px;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:#C0622D">Pilier 04 · Se mouvoir</div>
    <h1>Cinq minutes qui changent l’heure qui suit.</h1>
    <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">Tranquille · délier et préparer</div>
      <div class="opts">
      <button class="opt" data-r="reveil" data-durroutine="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">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">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">La relance dynamique <small>~5 min · qui réveille vraiment · à ton allure</small></button>
      </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">La marche consciente <small>~3 min · en marchant · le trajet devient pratique</small></button>
      <button class="opt" data-mp="marche2" data-durseg="C30">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">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">Bouger pour honorer <small>~2 min 30 · chaque geste peut se faire offrande</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>
    <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:26px;line-height:1.25;max-width:320px"></div>
    <div class="serif" id="mouvClock" style="font-size:52px;color:var(--gold);margin:4px 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:#4B4E7D">Pilier 05 · Se reposer</div>
    <h1 id="soirTitle">L’architecte du soir</h1>

    <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="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">La nuit confiée <small>~2 min 30 · s’endormir comme acte de confiance</small></button>
      </div>
    </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="soirWake"></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="soirDiner"></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="soirFin"></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" 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:14px;padding:12px 8px">Mettre au calendrier</button>
        <button class="btn" id="soirNotif" style="flex:1;font-size:14px;padding:12px 8px">Activer les rappels</button>
      </div>
      <div class="demo-note sans" id="soirPlugNote" 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>

    <button class="btn" id="soirBack" style="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:#3A6B8C">Pilier 02 · Boire</div>
    <h1>Qu’est-ce qui fluidifie ta vie&nbsp;?</h1>
    <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">Deux 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>
      <button class="btn solid" id="waterStart" style="width:100%">C’est parti</button>
    </div>
    <div id="boireTrack" style="display:none">
      <div class="planlab">Suivre et ressentir · verre après verre</div>
      <button class="opt" id="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" style="min-height:20px"></div>
      <button class="btn solid" id="waterPlus" style="width:100%;font-size:18px;padding:16px">+ 1 verre</button>
      <div class="demo-note sans" style="margin-top:8px">Repère informatif (EFSA : ~2 L d’apports par jour, aliments compris). Une soif inhabituelle qui persiste se dit à un médecin.</div>

    </div>
    </div>
    <div id="boireDEsprit" style="display:none">
      <div class="planlab">Fluidifier · la décision qui simplifie</div>
      <div style="background:var(--card);border:1px solid rgba(142,106,47,.28);border-radius:14px;padding:16px">
        <div style="font-size:16px;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 rgba(142,106,47,.35);background:transparent;padding:8px 2px;font-family:inherit;font-size:15px;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">L’eau qui relie <small>~2 min 30 · le cycle qui te dépasse et t’inclut</small></button>
      </div>
    </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:14px;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">Ta pratique du jour · 3/3</div>
    <h1>Tu as combien de temps&nbsp;?</h1>
    <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"><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">Ton expérience offerte est terminée</div>
    <h1>Ce que l’app pourrait te proposer ensuite.</h1>
    <p class="sans" style="font-size:14.5px;line-height:1.65;color:var(--gray);margin:2px 0 14px">Ton aperçu initial 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" style="display:none;margin:0 0 12px;color:var(--gold)"></p>
    <div id="discoveryPathList"></div>
    <button class="btn solid" id="discoveryContinue" style="width:100%;margin-top:14px">Continuer avec Les 7 Piliers</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>
    <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 style="display:block">l’application complète + le Diagnostic complet offert</small></div>
        <span class="sans" style="position:absolute;top:-9px;right:12px;background:var(--gold);color:#fff;font-size:11.5px;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 style="display:block">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 complet 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)">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" id="payStripeNote" style="display:none;margin:8px 0 0">Paiement sécurisé par Stripe. Ton code d’accès personnel arrive par e-mail dans la minute : tu le saisis ici, une seule fois. 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>
    <button class="btn" id="payBeta" style="width:100%;margin-top:14px">J’ai déjà un code</button>
    <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:14.5px;line-height:1.65;color:var(--gray);margin:2px 0 14px"></p>
    <div class="tipcard sans" style="text-align:left;margin-bottom:12px"><b>Aucun paiement ne sera déclenché pendant ce test.</b><br>Nous voulons que tu rencontres le vrai moment de décision. 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’invitation.</h1>
    <p class="sans" style="font-size:14px;line-height:1.6;color:var(--gray);margin:2px 0 12px">Il ouvre l’application complète pour la durée prévue. Il ne simule aucun achat et ne t’abonne à rien.</p>
    <input id="betaAccessInput" type="text" autocomplete="off" autocapitalize="characters" placeholder="Code bêta" style="width:100%;border:1px solid rgba(142,106,47,.35);border-radius:12px;padding:14px;font-family:inherit;font-size:15px;background:var(--card);color:var(--ink)" aria-label="Code bêta">
    <div class="demo-note sans" id="betaAccessStatus" style="min-height:18px;margin-top:8px"></div>
    <button class="btn solid" id="betaAccessGo" style="width:100%;margin-top:8px">Activer mon accès</button>
    <button class="btn" id="betaAccessBack" 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:14.5px;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" style="font-size:14.5px;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 rgba(142,106,47,.3);border-radius:16px;background:var(--card)">
      <div class="tiplab sans">Pour ne plus jamais chercher ce code</div>
      <p class="sans" style="margin:0 0 12px;font-size:13.5px;line-height:1.6;color:var(--gray)">Choisis un code court, que tu retiens. Avec ton e-mail, il t’ouvrira ton espace sur n’importe quel appareil.</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 rgba(142,106,47,.35);border-radius:13px;background:var(--paper);color:var(--ink);font-family:inherit;font-size:16px">
      <p class="sans" id="persoInviteErr" style="min-height:16px;margin:8px 0 0;font-size:13px;color:var(--gold)"></p>
      <button class="btn solid" id="persoInviteGo" style="width:100%;margin-top:4px;font-size:14px;padding:12px">Enregistrer mon code</button>
      <button class="btn" id="persoInviteLater" style="width:100%;margin-top:8px;font-size:13.5px;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 class="halo-wrap">
      <div class="halo" id="halo"><img class="orb-v79-base" src="assets/orb-respirer-v2.webp?v=113" alt="" decoding="async"><div class="orb-v79-live"><img class="orb-v79-cloud orb-v79-c1" src="assets/orb-respirer-v2.webp?v=113" alt="" decoding="async"><img class="orb-v79-cloud orb-v79-c2" src="assets/orb-respirer-v2.webp?v=113" alt="" decoding="async"><img class="orb-v79-cloud orb-v79-c3" src="assets/orb-respirer-v2.webp?v=113" alt="" decoding="async"><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:16px;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:14.5px;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, vous y gagnez tous les deux.</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:rgba(169,130,60,.14);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:15px">↑</div>
      <p class="sans" style="margin:0;font-size:14px;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:rgba(169,130,60,.14);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:15px">✳</div>
      <p class="sans" style="margin:0;font-size:14px;line-height:1.6"><b>Pour la personne :</b> treize mois au lieu de douze, au même prix, avec le Diagnostic complet offert.</p>
    </div>

    <div id="partCondition" style="display:none;margin:0 0 18px;padding:15px;border:1px solid rgba(142,106,47,.4);border-radius:14px;background:rgba(169,130,60,.07)">
      <p class="sans" style="margin:0 0 4px;font-size:13.5px;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:13.5px;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:12.5px;line-height:1.5;color:var(--gold);word-break:break-all"></p>
      <button class="btn solid" id="partPartage" style="width:100%;font-size:14px;padding:13px">Partager mon lien</button>
      <p class="sans" id="partCompteur" style="margin:12px 0 0;text-align:center;font-size:13px;color:var(--gray)"></p>
    </div>

    <p class="sans" id="partStatut" style="min-height:18px;margin:14px 0 0;text-align:center;font-size:13.5px;color:var(--gold)"></p>
    <button class="btn" id="partBack" style="width:100%;margin-top:16px;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>
    <div id="aboCard" style="margin:0 0 16px;padding:16px;border-radius:16px;border:1px solid rgba(142,106,47,.28);background:var(--card)">
      <div class="tiplab sans">Mon abonnement</div>
      <p class="sans" id="aboState" style="margin:0 0 4px;font-size:15px;line-height:1.55"></p>
      <p class="sans" id="aboUntil" style="margin:0;font-size:13px;color:var(--gray)"></p>
      <div id="aboActions" style="display:flex;gap:10px;margin-top:12px;flex-wrap:wrap"></div>
    </div>
    <button id="partCarte" class="cardlink" style="margin:14px 0 0">
      <div class="cl-row">
        <div>
          <div class="tiplab sans" style="margin:0 0 5px">Programme partenaire</div>
          <div class="cl-titre">Obtenir mon code partenaire</div>
          <div class="cl-note">Un mois pour toi, treize mois pour la personne que tu recommandes.</div>
        </div>
        <div class="cl-fleche">→</div>
      </div>
    </button>

    <div id="passageCard" style="display:none;margin:14px 0 0;padding:15px;border:1px solid rgba(142,106,47,.4);border-radius:14px;background:rgba(169,130,60,.07)">
      <div class="tiplab sans" style="margin:0 0 8px">Passer à l’année, ton premier mois déduit</div>
      <p class="sans" style="margin:0 0 6px;font-size:13.5px;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 complet offert</b> (valeur 100 €).</p>
      <p class="sans" id="passageNote" style="margin:0 0 12px;font-size:12.5px;color:var(--gold)"></p>
      <button class="btn solid" id="passageGo" style="width:100%;font-size:13.5px;padding:11px">Passer à l’année</button>
      <button class="btn" id="passageLater" style="width:100%;margin-top:8px;font-size:13px;padding:10px;border-color:transparent;color:var(--gray)">Rester au mois</button>
    </div>
    <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>
      
    </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 complet · 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">conservé sur cet appareil, en toute confidentialité</small></button><div class="opts">
      <button class="opt" id="profilCode">Importer ou mettre à jour mon code <small id="profilCodeSub">aucun aperçu initial ni Diagnostic relié à 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">Mon code personnel <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>
      
    </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><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 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 rgba(142,106,47,.28);border-radius:14px;background:var(--card)">
        <p class="sans" style="margin:0 0 10px;font-size:13.5px;line-height:1.6;color:var(--gray)">Une fois par semaine, l’application peut envoyer <b>des compteurs</b> : combien de pratiques, sur quels piliers, lesquelles sont terminées. Rien d’autre.</p>
        <p class="sans" style="margin:0 0 12px;font-size:13.5px;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:13.5px;padding:11px">J’accepte d’aider</button>
        <button class="btn" id="mesureNon" style="width:100%;margin-top:8px;font-size:13px;padding:10px;border-color:transparent;color:var(--gray)">Non merci</button>
      </div>
      <button class="opt danger" id="profilOubli">Effacer mon enregistrement <small id="oubliSub">retirer de nos serveurs tout ce qui te concerne</small></button>
      <button class="opt" id="profilLogout">Changer d’espace <small>fermer cet espace en le gardant en sécurité sur cet appareil</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 est effacé, immédiatement</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" style="margin:10px 0 0;text-align:center;font-size:12.5px;color:var(--gold)"></p>
  <p class="sans" style="margin:20px 0 4px;text-align:center;font-size:12px;color:var(--gray)">
    <a href="https://agostinijohnatan.com/cgv-application" target="_blank" rel="noopener" style="color:inherit">Conditions générales</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>

    <p class="sans" style="margin:26px 0 6px;text-align:center;font-size:11.5px;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:11.5px;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:14px;line-height:1.6;color:var(--gray);margin:2px 0 14px">Les rappels passent par le calendrier de ton téléphone. Tu recevras donc de vraies alertes même lorsque l’app est fermée. Les notifications natives de l’app prendront le relais au lancement.</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 rgba(142,106,47,.28);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 rgba(142,106,47,.28);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:13px;color:var(--gray)">De</span>
        <input type="time" id="hydraFrom" value="09:00" style="flex:1;border:1px solid rgba(142,106,47,.28);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:13px;color:var(--gray)">à</span>
        <input type="time" id="hydraTo" value="21:00" style="flex:1;border:1px solid rgba(142,106,47,.28);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:14px;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:12.5px;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:12.5px;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:12.5px;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:12.5px;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:14px;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:#2F8C7A"><span class="pnum">01</span>Respirer <small>ta méditation du jour, générée sur mesure, matin, midi ou soir</small></button>
      <button class="opt pill" id="homeBoire" style="--pc:#3A6B8C"><span class="pnum">02</span>Boire <small id="homeBoireSub">ton eau du jour, verre après verre</small></button>
      <button class="opt pill" id="homeNourrir" style="--pc:#B5651D"><span class="pnum">03</span>Manger <small>se nourrir en conscience, corps, esprit, âme</small></button>
      <button class="opt pill" id="homeMouv" style="--pc:#C0622D"><span class="pnum">04</span>Se mouvoir <small>quatre routines guidées de 5 minutes, mains libres</small></button>
      <button class="opt pill" id="homeSoir" style="--pc:#4B4E7D"><span class="pnum">05</span>Se reposer <small id="homeSoirSub">l’architecte du soir, ton plan de soirée sur mesure</small></button>
      <button class="opt pill" id="homeLien" style="--pc:#A65A57"><span class="pnum">06</span>Se reproduire <small>le fil du lien, faire grandir autour de toi</small></button>
      <button class="opt pill" id="homeElever" style="--pc:#C19A3E"><span class="pnum">07</span>S’élever <small>la question du matin, la revue du soir, l’axe</small></button>
    </div>
    <button class="btn" id="plansLink" style="width:100%;margin-top:10px;border-color:transparent;color:var(--gray);font-size:13px">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>
    <input id="jSearch" type="search" placeholder="Rechercher dans tes entrées" style="width:100%;border:1px solid rgba(169,130,60,.3);border-radius:12px;padding:12px 14px;font-family:Georgia,serif;font-size:14px;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:13px">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 rgba(169,130,60,.3);border-radius:14px;padding:14px;font-family:Georgia,serif;font-size:15.5px;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:16px;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:14.5px;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:14.5px;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:14.5px;line-height:1.7">Ton poids, tes calories, 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:14px;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>
    <div id="feelRow" style="display:flex;gap:10px;align-items:center">
      <span class="demo-note sans" style="margin:0">Tu repars…</span>
      <button class="btn" data-feel="mieux" style="padding:9px 18px;font-size:14px">Mieux</button>
      <button class="btn" data-feel="pareil" style="padding:9px 18px;font-size:14px;border-color:rgba(108,104,95,.5);color:var(--gray)">Pareil</button>
    </div>
    <div id="endEcho" style="display:none"></div>
    <button class="btn" id="endJournal" style="margin-bottom:10px">Écrire ce qui reste <small style="display:block;margin-top:3px;font-size:11.5px;color:var(--gray)">une phrase suffit, ton journal la garde</small></button>
    <button class="btn solid" id="againBtn">Terminer</button>
      <button class="btn" id="endBack" style="width:100%;margin-top:10px;border-color:transparent;color:var(--gray)">Revenir à Aujourd’hui</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="text-align:center;font-size:30px;color:var(--gold);margin-bottom:10px">✳</div>
          <h2 style="font-family:'Fraunces',Georgia,serif;font-size:21px;line-height:1.3;margin:0 0 10px;text-align:center">Bienvenue chez toi.</h2>
          <p class="sans" style="margin:0;font-size:14.5px;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:'Fraunces',Georgia,serif;font-size:21px;line-height:1.3;margin:0 0 10px;text-align:center">Le geste du jour.</h2>
          <p class="sans" style="margin:0;font-size:14.5px;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:'Fraunces',Georgia,serif;font-size:21px;line-height:1.3;margin:0 0 10px;text-align:center">Ta liberté.</h2>
          <p class="sans" style="margin:0;font-size:14.5px;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:'Fraunces',Georgia,serif;font-size:21px;line-height:1.3;margin:0 0 10px;text-align:center">À toi seul.</h2>
          <p class="sans" style="margin:0;font-size:14.5px;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:'Fraunces',Georgia,serif;font-size:21px;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:14.5px;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>
      <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:14.5px;padding:13px">Continuer</button>
      <div style="display:flex;gap:10px;margin-top:8px">
        <button class="btn" id="tutoPrev" style="flex:1;font-size:13.5px;padding:11px;border-color:transparent;color:var(--gray)">Précédent</button>
        <button class="btn" id="tutoSkip" style="flex:1;font-size:13.5px;padding:11px;border-color:transparent;color:var(--gray)">Passer</button>
      </div>
    </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 sur ton écran</div>
        <button id="installSheetClose" aria-label="Fermer" style="background:none;border:1px solid rgba(169,130,60,.35);border-radius:999px;width:32px;height:32px;font-size:15px;color:var(--gray);cursor:pointer">✕</button>
      </div>
      <p class="sans" id="installSheetIntro" style="margin:0 0 16px;font-size:14px;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:rgba(169,130,60,.14);color:var(--gold);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px">1</div>
          <p class="sans" style="margin:0;font-size:14px;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:rgba(169,130,60,.14);color:var(--gold);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px">2</div>
          <p class="sans" style="margin:0;font-size:14px;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:rgba(169,130,60,.14);color:var(--gold);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px">3</div>
          <p class="sans" style="margin:0;font-size:14px;line-height:1.55">Touche <b>Ajouter</b>. Le monogramme des 7 Piliers est sur ton écran.</p>
        </div>
      </div>
      <div id="installSheetAndroid" style="display:none">
        <p class="sans" style="margin:0 0 14px;font-size:14px;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:14.5px;padding:13px">Installer maintenant</button>
      </div>
      <p class="sans" id="installSheetDejaLa" style="display:none;margin:0;font-size:14px;line-height:1.6;color:var(--gold)">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 rgba(169,130,60,.35);border-radius:999px;width:32px;height:32px;font-size:15px;color:var(--gray);cursor:pointer">✕</button>
    </div>
    <div class="pref" style="display:none" aria-hidden="true"><div class="lab sans">Teinte du papier</div>
      <div class="seg-ctrl wrap" id="paperPick" style="grid-template-columns:1fr 1fr 1fr 1fr">
        <button data-c="#FAF5EC">Ivoire</button>
        <button data-c="#F6EEE3">Sable</button>
        <button data-c="#F3E9D7" class="sel">Parchemin</button>
        <button data-c="#F2EEE6">Lin</button>
      </div>
      <div class="lab sans" style="margin-top:10px">Grain du papier</div>
      <input type="range" id="grainVol" min="0" max="100" value="55" style="width:100%;accent-color:#8E6A2F" aria-label="grainVol">
    </div>
    <!-- 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><button data-v="C" style="display:none" aria-hidden="true">Fichier</button></div>
      <div id="natureRow" style="display:none!important;margin-top:10px" aria-hidden="true">
        <input type="file" id="natureFile" accept="audio/*" style="font-family:-apple-system,sans-serif;font-size:13px;width:100%" aria-label="natureFile">
        <div class="demo-note" id="natureStatus">Charge un son de nature (mer, pluie, forêt) téléchargé depuis Pixabay ou Freesound (CC0) : il tournera en boucle sous la voix.</div>
      </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 (mode test)</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 (test)</button></div></div>
    <div class="pref" style="display:none" aria-hidden="true"><div class="lab sans">Afficher la logique du moteur</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>
    <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-rc10-boucle.js"></script>
</body>
</html>
