:root{
  --paper:#F5EFE3; --ink:#241F18; --gold:#A9823C;--gold-texte:#886624; --gold-soft:#C19A63;
  --gray:#6B5A43; --card:#FBF7EE; --night:#12100C; --night-ink:#D8CDBA; --cloud-rgb:169,130,60;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html, body{height:100%}
body{
  font-family:Georgia,'Times New Roman',serif;
  background:var(--paper); color:var(--ink);
  min-height:100dvh; display:flex; flex-direction:column;
  transition:background-color .6s ease, color .6s ease;
}
#paperFx{position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.18;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .12 0 0 0 0 .09 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px}
:root{color-scheme:light}
html{background:var(--paper); min-height:100%}
/* La zone de la barre d’etat est peinte par l’app elle-meme : aucune bande
   sombre ne peut apparaitre, quel que soit le reglage systeme du telephone. */
body::before{content:"";position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top);
  background:var(--paper);z-index:2000;pointer-events:none;transition:background-color .6s ease}
body.night::before{background:var(--night)}
html.night{background:var(--night)}
body.night #paperFx{opacity:0}
main, header{position:relative;z-index:1}
/* --- L'œuf : le conseil caché --- */
#egg{display:none; margin:30px auto 2px; background:none; border:none; cursor:pointer;
  font-size:1.1875rem; color:var(--gold-texte); opacity:.4; padding:10px;
  animation:eggbreathe 7s ease-in-out infinite}
#egg.show{display:block}
#egg.found{opacity:.18; animation:none}
@keyframes eggbreathe{0%,100%{opacity:.32}50%{opacity:.5}}
#tipPop{position:fixed; bottom:calc(env(safe-area-inset-bottom) + 128px); right:16px; left:16px; max-width:480px; margin-left:auto; z-index:9;
  display:none; box-shadow:0 8px 30px rgba(35,31,22,.14); transform-origin:bottom right}
#tipPop.show{display:block; animation:unfold .45s cubic-bezier(.2,.9,.3,1) both}
@keyframes unfold{from{opacity:0; transform:scale(.9) translateY(10px)} to{opacity:1; transform:none}}
body.night{background:var(--night); color:var(--night-ink); background-image:none; --gold-texte:var(--gold)}
.sans{font-family:-apple-system,'Segoe UI',Helvetica,Arial,sans-serif}
header{padding:calc(env(safe-area-inset-top) + 18px) 22px 10px; text-align:center}
.logoInk{fill:#231F16}.logoGold{fill:var(--gold)}
body.night .logoInk{fill:var(--night-ink)}
body.night .logoGold{fill:var(--gold-soft)}
.brand{font-size:0.8125rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-texte)}
.brand small{display:block; font-size:0.6875rem; letter-spacing:.20em; margin-top:2px; opacity:.85}
body.night .brand{color:var(--gold-soft)}
.rule{width:64px; height:8px; margin:10px auto 0; opacity:.9}
main{flex:1; display:flex; flex-direction:column; padding:6px 22px calc(env(safe-area-inset-bottom) + 22px); max-width:520px; width:100%; margin:0 auto}
.screen{display:none; flex:1; flex-direction:column}
.screen.on{display:flex; animation:appear .5s ease both; animation:screenIn .22s ease-out}
@keyframes appear{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }

/* ---------- Check-in ---------- */
.q-eyebrow{font-size:0.75rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gray); margin:18px 0 6px}
h1{font-size:1.625rem; font-weight:normal; line-height:1.25; margin-bottom:22px}
.opts{display:flex; flex-direction:column; gap:12px}
.opt{
  background:var(--card); border:1px solid var(--filet); border-radius:14px;
  padding:18px 18px; font-size:1.0625rem; text-align:left; cursor:pointer; color:var(--ink);
  font-family:inherit; transition:border-color .2s, transform .08s;
  /* rc178 : le bouton reste une ligne souple (le numéro de pilier colle à son titre),
     mais le sous-titre prend toujours sa propre ligne, pleine largeur. En colonne
     unique, « 01 » serait parti seul sur sa ligne ; en ligne stricte, un titre long
     et un sous-titre long se partageaient la largeur, un mot par ligne. */
  display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 10px;
}
.opt small{color:var(--gray); font-size:0.8125rem; font-family:-apple-system,sans-serif; flex:1 0 100%; line-height:1.5}
.opt:active{transform:scale(.985)}
#sOnb .opt{display:block;padding:18px 18px 17px}
#sOnb .opt small{display:block;margin-top:6px;line-height:1.45}
#sApporteur .opt{display:block;padding:15px 18px 14px;font-size:1rem}
#sApporteur .opt small{display:block;margin-top:5px;line-height:1.45}
#sPartager .opt{display:block;padding:15px 18px 14px;font-size:1rem}
#sPartager .opt small{display:block;margin-top:5px;line-height:1.45}
.opt.voile{opacity:.5}
#sOnb .opts{gap:12px}
.opt.sel, .opt:focus-visible{border-color:var(--gold); outline:none; box-shadow:0 0 0 1px var(--gold)}
.durrow{display:flex; gap:12px}
.durrow .opt{flex:1; justify-content:center; font-size:1.3125rem; padding:20px 8px}
.durrow .opt small{display:block; font-size:0.75rem}
.intens{display:none; margin-top:20px}
.intens.on{display:block; animation:appear .35s ease both}
.intens .ilab{font-size:0.75rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gray); margin-bottom:10px}
.intens .irow{display:flex; gap:10px}
.intens .opt{flex:1; flex-direction:column; align-items:center; gap:4px; font-size:0.9375rem; padding:14px 6px; text-align:center}
.intens .dots{display:flex; gap:4px}
.intens .dots i{width:6px; height:6px; border-radius:50%; background:var(--gold); opacity:.9}
.stepdots{display:flex; gap:8px; justify-content:center; margin-top:auto; padding-top:26px}
.stepdots i{width:7px; height:7px; border-radius:50%; background:rgba(108,104,95,.35)}
.stepdots i.done{background:var(--gold)}

/* ---------- Session ---------- */
#sSession{align-items:center; justify-content:center; text-align:center; gap:8px}
.halo-wrap{position:relative;width:230px;height:230px;margin:8px auto 4px;isolation:isolate}
/* Orbe vivante v68 : texture HD réelle + circulation interne en profondeur.
   L’anneau reste or = le temps. L’orbe prend la couleur du pilier. */
.halo{position:absolute;inset:16px;border-radius:50%;pointer-events:none;z-index:1;overflow:hidden;contain:paint;
  transform:translateZ(0);will-change:transform,opacity;filter:drop-shadow(0 10px 22px rgba(36,31,24,.055));
  --orb-pillar:#2F8C7A;--orb-pillar-rgb:47,140,122;}
.orb-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;
  image-rendering:auto;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0);}
/* La matière d’origine est neutralisée avant colorisation pour éviter le bleu/violet résiduel de l’asset. */
.orb-base{z-index:1;opacity:.98;filter:grayscale(1) saturate(0) contrast(1.14) brightness(1.06)}
.orb-color{position:absolute;inset:0;z-index:2;border-radius:50%;pointer-events:none;will-change:opacity,transform;
  background:rgba(var(--orb-pillar-rgb),.97);
  -webkit-mask:radial-gradient(circle closest-side,#000 93%,rgba(0,0,0,.6) 96%,transparent 99.5%);
  mask:radial-gradient(circle closest-side,#000 93%,rgba(0,0,0,.6) 96%,transparent 99.5%);
  mix-blend-mode:color;opacity:.90;}
.orb-depth{z-index:3;opacity:.40;mix-blend-mode:multiply;filter:grayscale(1) saturate(0) contrast(1.34) brightness(.70)}
.orb-aura{position:absolute;inset:4%;z-index:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(var(--orb-pillar-rgb),.30) 0%,rgba(var(--orb-pillar-rgb),.16) 42%,rgba(var(--orb-pillar-rgb),.06) 64%,transparent 82%);
  filter:blur(18px);opacity:.86;transform:translateZ(0)}
/* Fenêtres de parallax. Le cadre ne bouge presque pas{position:absolute;z-index:6;overflow:hidden;border-radius:50%;pointer-events:none;isolation:isolate;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 0%,rgba(0,0,0,.96) 45%,rgba(0,0,0,.58) 67%,transparent 86%);
  mask-image:radial-gradient(ellipse at center,#000 0%,rgba(0,0,0,.96) 45%,rgba(0,0,0,.58) 67%,transparent 86%);
  opacity:.18;mix-blend-mode:soft-light;filter:contrast(1.10) brightness(1.01)}
.orb-shine{position:absolute;inset:11%;z-index:10;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(ellipse at 37% 26%, rgba(255,255,255,.44) 0%, rgba(255,255,255,.13) 20%, transparent 48%),
    radial-gradient(ellipse at 63% 70%, rgba(255,255,255,.10) 0%, transparent 28%);
  mix-blend-mode:screen;filter:blur(7px);opacity:.42}
.orb-coreglow{position:absolute;inset:18%;z-index:11;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 52%, rgba(255,255,255,.18) 0%, rgba(var(--orb-pillar-rgb),.12) 24%, rgba(var(--orb-pillar-rgb),.04) 45%, transparent 68%);
  mix-blend-mode:screen;filter:blur(10px);opacity:.72}
.orb-rim{position:absolute;inset:6%;z-index:13;border-radius:50%;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), inset 0 0 18px rgba(255,255,255,.06), 0 0 0 1px rgba(var(--orb-pillar-rgb),.12);
  opacity:.70}
/* v76 : nébuleuse procédurale SVG. Elle utilise le même pipeline CSS que la respiration{display:none!important}


/* Les amplitudes sont volontairement suffisantes pour être visibles en 2–4 secondes, mais les cycles restent lents et contemplatifs. */








@media (prefers-reduced-motion:reduce){
  
}
/* Matière interne : amplitudes petites, cycles longs et non synchronisés. */
.halo.souffle-6, body.session-playing .halo.souffle-6{ animation:ccSouffle 10s ease-in-out infinite!important }
.halo.souffle-carre, body.session-playing .halo.souffle-carre{ animation:ccCarre 16s ease-in-out infinite!important }
.halo.souffle-46, body.session-playing .halo.souffle-46{ animation:cc46 10s ease-in-out infinite!important }
.halo.souffle-48, body.session-playing .halo.souffle-48{ animation:cc48 12s ease-in-out infinite!important }
body.paused .halo.souffle-6, body.paused .halo.souffle-carre,
body.paused .halo.souffle-46, body.paused .halo.souffle-48{ animation-play-state:paused!important }
@media (prefers-reduced-motion: reduce){ .halo.souffle-6, .halo.souffle-carre, .halo.souffle-46, .halo.souffle-48,
  body.session-playing .halo.souffle-6, body.session-playing .halo.souffle-carre,
  body.session-playing .halo.souffle-46, body.session-playing .halo.souffle-48{ animation:none!important } }
@keyframes ccSouffle{ 0%{transform:scale(.78) translateZ(0)} 50%{transform:scale(1.06) translateZ(0)} 100%{transform:scale(.78) translateZ(0)} }
/* le souffle carré : 4 dedans, 4 plein, 4 dehors, 4 vide */
@keyframes ccCarre{ 0%{transform:scale(.78) translateZ(0)} 25%{transform:scale(1.06) translateZ(0)} 50%{transform:scale(1.06) translateZ(0)} 75%{transform:scale(.78) translateZ(0)} 100%{transform:scale(.78) translateZ(0)} }
/* 4 secondes qui entrent, 6 qui sortent */
@keyframes cc46{ 0%{transform:scale(.78) translateZ(0)} 40%{transform:scale(1.06) translateZ(0)} 100%{transform:scale(.78) translateZ(0)} }
/* 4 secondes qui entrent, 8 qui sortent */
@keyframes cc48{ 0%{transform:scale(.78) translateZ(0)} 33%{transform:scale(1.06) translateZ(0)} 100%{transform:scale(.78) translateZ(0)} }
@keyframes orbDepthDrift{
  0%,100%{transform:translate3d(-1px,1px,0) rotate(-.7deg) scale(1.03)}
  45%{transform:translate3d(2px,-2px,0) rotate(.9deg) scale(1.058)}
  72%{transform:translate3d(0,1px,0) rotate(.2deg) scale(1.042)}
}












@keyframes orbAura{
  0%,100%{transform:scale(.975);opacity:.72}
  50%{transform:scale(1.035);opacity:.90}
}
@keyframes orbShine{
  0%,100%{transform:translate3d(-3px,-2px,0) scale(.95);opacity:.38}
  50%{transform:translate3d(5px,4px,0) scale(1.08);opacity:.66}
}
@keyframes coreGlow{
  0%,100%{transform:scale(.985);opacity:.62}
  50%{transform:scale(1.025);opacity:.84}
}
@keyframes rimGlow{
  0%,100%{opacity:.50;transform:scale(.988)}
  50%{opacity:.82;transform:scale(1.012)}
}



body.session-playing .halo{animation:orbBreath 17.5s cubic-bezier(.42,.05,.58,.95) infinite}
body.session-playing .orb-depth{animation:orbDepthDrift 34s ease-in-out infinite}
body.session-playing .orb-aura{animation:orbAura 18s ease-in-out infinite}
body.session-playing .orb-shine{animation:orbShine 26s ease-in-out infinite}
body.session-playing .orb-coreglow{animation:coreGlow 18s ease-in-out infinite}
body.session-playing .orb-rim{animation:rimGlow 16s ease-in-out infinite}
/* La voix augmente la luminosité, pas la vitesse : l’orbe reste contemplative. */
body.session-playing.speaking .halo{filter:drop-shadow(0 11px 26px rgba(36,31,24,.065)) brightness(1.05)}
body.session-playing.speaking .orb-color{opacity:.93}
body.session-playing.speaking .orb-aura{opacity:.96}
body.session-playing.speaking .orb-coreglow{opacity:.88}
body.session-playing.speaking .orb-rim{opacity:.86}
body.paused .halo, body.paused .orb-depth, body.paused .orb-aura, body.paused .orb-shine, body.paused .orb-coreglow, body.paused .orb-rim{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  .halo,.orb-depth,.orb-aura,.orb-shine,.orb-coreglow,.orb-rim{animation:none!important;transform:none!important}
}
svg.ring{position:absolute; inset:0; transform:rotate(-90deg);z-index:3}
.ring circle{fill:none; stroke-width:2.5}
.ring .track{stroke:rgba(142,106,47,.18)}
.ring .prog{stroke:var(--gold); stroke-linecap:round; transition:stroke-dashoffset 1s linear}
.session-int{font-size:0.75rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gray)}
body.night .session-int{color:rgba(216,205,186,.55)}
.session-time{font-size:0.9375rem; color:var(--gray); font-family:-apple-system,sans-serif}
.seg-label{min-height:22px; font-size:0.875rem; font-style:italic; color:var(--gray); font-family:-apple-system,sans-serif}
body.night .seg-label{color:rgba(216,205,186,.5)}
.playbtns{display:flex; gap:14px; margin-top:18px; flex-wrap:wrap; justify-content:center}
.btn{
  font-family:inherit; font-size:1rem; padding:14px 26px; border-radius:999px; cursor:pointer;
  border:1px solid var(--gold); background:transparent; color:var(--gold-texte);
}
.btn.solid{background:var(--gold); color:#fff;font-weight:700}
.btn:active{transform:scale(.97)}
body.night .btn{border-color:var(--gold-soft); color:var(--gold-soft)}

/* ---------- Fin ---------- */
#sEnd{align-items:center; justify-content:center; text-align:center; gap:16px}
.done-title{font-size:1.875rem}
.chain{display:flex; gap:0; align-items:center; margin:6px 0 2px}
.chain svg{display:block}
.done-sub{color:var(--gray); font-size:0.9375rem; max-width:280px; line-height:1.5}
#sNight{align-items:center; justify-content:center; text-align:center;gap:14px}
#sNight .night-actions{display:flex;flex-direction:column;gap:8px;width:min(280px,90%);margin-top:14px}
#sNight .night-sub{max-width:320px;font:13px/1.55 -apple-system,system-ui,sans-serif;color:rgba(216,205,186,.58)}
.night-word{font-size:1.3125rem; color:rgba(216,205,186,.7); letter-spacing:.1em; animation:fadeword 6s ease forwards}
@keyframes fadeword{0%{opacity:0} 25%{opacity:1} 75%{opacity:1} 100%{opacity:0}}

/* ---------- Réglages ---------- */
.gear{position:fixed; top:calc(env(safe-area-inset-top) + 12px); right:14px; width:38px;height:38px;display:grid;place-items:center;background:rgba(253,248,240,.78);border:1px solid rgba(142,106,47,.22);border-radius:999px;box-shadow:0 5px 18px rgba(35,31,22,.06);color:var(--gold-texte);cursor:pointer;z-index:5;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
/* Voile dans la teinte du papier : aucun pixel sombre en haut de page, donc
   aucune barre de navigateur qui se teinte en noir. Et c’est plus fidele a la charte. */
/* Sections dépliantes de Mon espace : le commercial reste visible, le reste se déplie. */
details.grp{margin:18px 0 0;border-top:1px solid rgba(142,106,47,.16);padding-top:4px}
details.grp>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  padding:12px 2px;font:600 11.5px/1 -apple-system,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-texte)}
details.grp>summary::-webkit-details-marker{display:none}
details.grp>summary::after{content:"+";font:400 17px/1 Georgia,serif;color:var(--gold-texte);opacity:.7;transition:transform .25s ease}
details.grp[open]>summary::after{content:"–"}
details.grp>summary:active{opacity:.7}
details.grp .opts{margin-top:2px}
/* Cliquables de Mon espace : une seule grammaire.
   .opt = une action de réglage · .cardlink = une carte qui mène ailleurs · .opt.danger = un geste irréversible */
.cardlink{display:block;width:100%;text-align:left;padding:15px 16px;border:1px solid var(--filet-fort);
  border-radius:16px;background:linear-gradient(180deg, var(--lueur), rgba(169,130,60,.04));
  cursor:pointer;font-family:inherit;color:var(--ink);transition:border-color .2s ease, background .2s ease}
.cardlink:active{border-color:rgba(142,106,47,.7)}
.cardlink .cl-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cardlink .cl-titre{font-family:Georgia,'Times New Roman',serif;font-size:1.0625rem;line-height:1.35}
.cardlink .cl-note{font:12.5px/1.5 -apple-system,system-ui,sans-serif;color:var(--gray);margin-top:4px}
.opt.danger{border-color:rgba(162,59,46,.4)}
.opt.danger:active{border-color:rgba(162,59,46,.75)}
/* Une feuille ouverte fait taire tout ce qui flotte : rien ne recouvre la lecture. */
body.sheeted .boirechip{display:none !important}
body.sheeted #tipPop{display:none !important}
/* Le texte de séance respire : il apparaît en fondu, s’estompe dans les silences.
   Aucun défilement, aucun clignotement : la lecture se pose, elle ne court pas. */
#subtitle{transition:opacity 1.1s ease}
#subtitle.arrive{opacity:.88}
#subtitle.repose{opacity:.28}
#subtitle.parti{opacity:0}
@media (prefers-reduced-motion:reduce){ #subtitle{transition:opacity .2s linear} }
.sheet{position:fixed; top:env(safe-area-inset-top); left:0; right:0; bottom:0;
  background:rgba(200,186,160,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  display:none; z-index:10}
body.night .sheet{background:rgba(18,16,12,.55)}
.sheet.on{display:block}
.sheet-in{position:absolute; left:0; right:0; bottom:0; background:var(--card); border-radius:20px 20px 0 0; padding:24px 22px calc(env(safe-area-inset-bottom) + 24px); max-height:80dvh; overflow:auto; color:var(--ink)}
.sheet-in h2{font-size:1.125rem; font-weight:normal; margin-bottom:16px}
.pref{margin-bottom:16px}
.pref .lab{font-size:0.75rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gray); margin-bottom:8px}
.seg-ctrl{display:flex; border:1px solid var(--filet); border-radius:10px; overflow:hidden}
.seg-ctrl.wrap{display:grid; grid-template-columns:1fr 1fr 1fr; border-radius:12px}
.seg-ctrl.wrap button{border:1px solid rgba(142,106,47,.15)}
.seg-ctrl button{flex:1; padding:11px 6px; background:transparent; border:none; font-family:-apple-system,sans-serif; font-size:0.875rem; color:var(--ink); cursor:pointer}
.seg-ctrl button.sel{background:var(--gold); color:#fff;font-weight:700}
.demo-note{font-size:0.8125rem; color:var(--gray); font-family:-apple-system,sans-serif; line-height:1.5; margin-top:10px}
.tipcard{margin-top:16px; background:var(--card); border:1px solid var(--filet); border-radius:14px; padding:14px 16px 15px; font-size:0.9375rem; line-height:1.5; position:relative}
.tiplab{position:relative; padding-bottom:9px}
.tiplab::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 4' preserveAspectRatio='none'%3E%3Cpath d='M1 2.5 C 14 1, 30 3.5, 44 2 S 60 1.5, 63 2.2' stroke='%238E6A2F' stroke-width='0.9' fill='none' stroke-linecap='round' opacity='.65'/%3E%3C/svg%3E") no-repeat center/100% 100%}
.planlab{font-family:-apple-system,sans-serif;font-size:0.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-texte);margin:14px 0 8px}
.planlab:first-child{margin-top:0}
.planlab small{color:var(--gray);letter-spacing:.04em;text-transform:none;font-size:0.75rem;margin-left:6px}
.tiplab{font-size:0.75rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-texte); margin-bottom:14px}
.timein{width:100%; border:1px solid var(--filet); border-radius:10px; padding:12px; font-family:Georgia,serif; font-size:1.125rem; background:var(--card); color:var(--ink)}
.tl{position:relative; padding-left:26px}
.tl::before{content:""; position:absolute; left:8px; top:6px; bottom:6px; width:1.5px; background:var(--filet)}
.tlit{position:relative; padding:0 0 16px}
.tlit::before{content:""; position:absolute; left:-22.5px; top:6px; width:8px; height:8px; border-radius:50%; background:var(--gold)}
.tlit.soft::before{background:var(--filet)}
.tlit .tlh{font-size:1.125rem; color:var(--gold-texte)}
.tlit .tll{font-size:1rem; margin-top:1px}
.tlit .tln{font-size:0.8125rem; color:var(--gray); font-family:-apple-system,sans-serif; margin-top:2px; line-height:1.45}
.opt:active{transform:scale(.985)}
#sOnb .opt{display:block;padding:18px 18px 17px}
#sOnb .opt small{display:block;margin-top:6px;line-height:1.45}
#sOnb .opts{gap:12px}
.btn:active{transform:scale(.97)}
.opt, .btn{transition:transform .12s ease}
body.retour-vers-droite .screen.on{ animation:arriveDeGauche .30s cubic-bezier(.32,.72,0,1) }
body.retour-vers-gauche .screen.on{ animation:arriveDeDroite .30s cubic-bezier(.32,.72,0,1) }
/* L'ecran d'arrivee entre d'aussi loin que le sortant s'en va, et sur la meme
   courbe : sans ca, l'un partait vite et l'autre arrivait de trois centimetres,
   ce qui donnait un geste brutal. */
@keyframes arriveDeGauche{ from{opacity:.45; transform:translateX(-46%)} to{opacity:1; transform:none} }
@keyframes arriveDeDroite{ from{opacity:.45; transform:translateX(46%)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion: reduce){
  body.retour-vers-droite .screen.on, body.retour-vers-gauche .screen.on{ animation:none }
}
.eau-victoire{ position:fixed; left:50%; bottom:96px; transform:translateX(-50%) translateY(14px);
  background:var(--card); color:var(--ink); border:1px solid var(--filet-fort); border-radius:14px;
  padding:12px 18px; font-size:0.875rem; line-height:1.5; max-width:320px; text-align:center;
  box-shadow:0 10px 30px rgba(36,31,24,.18); opacity:0; transition:opacity .4s ease, transform .4s ease; z-index:80; pointer-events:none }
.eau-victoire.on{ opacity:1; transform:translateX(-50%) translateY(0) }
@keyframes screenIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){ .screen.on{animation:none} }
.opt.pill{border-left:3px solid var(--pc); padding-left:15px; position:relative}
.opt.pill:has(.pbadge){padding-top:30px}
.pbadge{position:absolute;top:8px;right:12px;font-size:0.6875rem;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:rgba(169,130,60,.15);color:var(--gold-texte);font-family:-apple-system,sans-serif}
.pbadge.sub{background:transparent;border:1px solid var(--filet);color:var(--gray)}
.opt.pill .pnum{font-size:0.75rem;color:var(--pc);letter-spacing:.08em;margin-right:6px}
.wchip{font-family:-apple-system,sans-serif;font-size:0.75rem;padding:5px 10px;border-radius:999px;border:1px solid var(--filet);background:transparent;color:var(--gray)}
.wchip.sel{border-color:var(--gold);color:var(--gold-texte)}
body.night .wchip{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.5)}
body.night .wchip.sel{border-color:var(--gold);color:var(--gold-texte)}
#heart, #heartGlow{transform-origin:115px 115px;transform-box:view-box}
#heart{opacity:.38;visibility:hidden}
#heartGlow{opacity:.08}
#heartHit{outline:none}
#heartHit:focus-visible{stroke:var(--heartc,#A9823C);stroke-width:2;stroke-opacity:.65}
body.session-playing #heart{animation:heartIdle 8.4s ease-in-out infinite}
body.session-playing #heartGlow{animation:heartGlow 8.4s ease-in-out infinite}
body.session-playing.speaking #heart{animation:heartSpeak 2.35s ease-in-out infinite}
body.session-playing.speaking #heartGlow{animation:heartGlowSpeak 2.35s ease-in-out infinite}
body.paused #heart, body.paused #heartGlow{animation-play-state:paused}
@keyframes heartIdle{0%,100%{transform:scale(.92);opacity:.34}50%{transform:scale(1.35);opacity:.54}}
@keyframes heartGlow{0%,100%{transform:scale(.85);opacity:.06}50%{transform:scale(1.55);opacity:.14}}
@keyframes heartSpeak{0%,100%{transform:scale(1);opacity:.52}50%{transform:scale(1.75);opacity:.82}}
@keyframes heartGlowSpeak{0%,100%{transform:scale(1.1);opacity:.10}50%{transform:scale(2.15);opacity:.20}}
@media (prefers-reduced-motion: reduce){#heart,#heartGlow{animation:none!important}}

/* ===== Navigation principale (Sprint A) ===== */
.tabbar{position:fixed;left:0;right:0;bottom:0;display:none;gap:0;background:var(--card);border-top:1px solid var(--filet);padding:6px 4px calc(env(safe-area-inset-bottom) + 6px);z-index:9}
.tabbar button{flex:1;background:none;border:none;font-family:Georgia,serif;font-size:0.8125rem;color:var(--gray);padding:9px 2px 7px;cursor:pointer;border-radius:10px;letter-spacing:.01em}
.tabbar button.on{color:var(--gold-texte);font-weight:bold}
.tabbar button:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
body.tabbed .screen{padding-bottom:92px}

/* ===== LA PISTE DES QUATRE ONGLETS =====================================
   Un conteneur persistant : les quatre panneaux y vivent en permanence,
   cote a cote, et c'est le NAVIGATEUR qui fait le glisse et l'accrochage.
   Rien n'est monte ni demonte, aucun display ne change entre eux, aucune
   animation d'entree ne se declenche : c'etaient les trois causes du saut.
   Contrainte du procede : un conteneur qui defile en X ne peut pas laisser
   deborder le Y. Le defilement vertical vit donc DANS chaque panneau, et
   l'en-tete cesse de defiler avec le contenu. C'est assume. */
body{ height:100dvh; overflow:hidden }
main{ padding-left:0; padding-right:0; min-height:0; position:relative }

/* ══ rc156 · CHAQUE ECRAN DEFILE CHEZ LUI ═══════════════════════════
   Suite directe de la piste. Le document ne defile plus du tout : il ne
   peut donc plus etre recale quand un ecran en remplace un autre, et
   l'ecran d'arrivee peut etre pose DESSOUS pendant le geste de retour,
   a sa propre position, sans que rien ne soit demonte.
   Les quatre onglets, eux, vivent dans #piste et ont leurs regles. */
main > .screen{
  position:absolute; inset:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain;
  padding:0 22px calc(env(safe-area-inset-bottom) + 22px);
}
/* Un ecran qui defile chez lui est une colonne flex de hauteur ferme : ses
   enfants ne doivent JAMAIS retrecir pour y tenir, ils doivent deborder et
   faire defiler. Sans cela, tout ce qui porte overflow:hidden (les .seg-ctrl,
   donc les trois espaces d'un pilier) s'ecrase jusqu'a disparaitre. */
main > .screen > *, #piste > .screen > *{ flex-shrink:0 }
/* rc172 · à portée de main.
   L'or clair (--gold, #A9823C) contraste à 3,53:1 sous du blanc : il reste pour les
   filets, les bordures et les accents ; les surfaces pleines qui portent du texte
   blanc prennent l'or plein (#8E6A2F, 4,94:1). Toute cible tactile fait 44 px.
   Le clavier et le Contrôle de sélection voient où ils sont (focus-visible). */
:root{ --gold-plein:#8E6A2F;
  /* rc174 · le système graphique, écrit une fois. La même bordure or était écrite
     quarante façons (var(--filet) à .5, var(--filet) à .45) : une
     bordure, une bordure forte, une lueur. Les sept couleurs de pilier vivent ici,
     pas dans les attributs. */
  --filet:rgba(142,106,47,.28); --filet-fort:rgba(142,106,47,.42); --lueur:rgba(169,130,60,.10);
  --p1:#2F8C7A; --p2:#3A6B8C; --p3:#B5651D; --p4:#C0622D; --p5:#4B4E7D; --p6:#A65A57; --p7:#C19A3E }
.btn.solid{ background:var(--gold-plein) }
.seg-ctrl button.sel{ background:var(--gold-plein) }
.btn{ min-height:44px }
.seg-ctrl button{ min-height:44px }
:focus-visible{ outline:2px solid var(--gold); outline-offset:2px }
/* rc180 : trois boutons de texte (le choix de langue à l'entrée, « Code oublié ? »,
   « Mes goûts ») tombaient sous la cible de 44 px : ils ne portent pas la classe
   .btn, donc la règle de rc172 les ignorait. Un bouton reste un bouton, quelle
   que soit son allure. Trouvé par l'explorateur, sur un vrai rendu. */
button{ min-height:44px }
button.wchip, button.opt, .seg-ctrl button, .tabbar button, #heartHit{ min-height:0 }
.seg-ctrl button{ min-height:44px }
.tabbar button{ min-height:44px }
/* Le retour en haut de l'écran : le même geste que le bouton « Revenir » du bas,
   pour qui n'a pas défilé. Posé par poserRetourHaut, seulement sur les écrans qui
   ont ce bouton en bas. Il défile avec l'écran, jamais par-dessus le header. */
.retour-haut{ position:absolute; top:4px; left:4px; width:44px; height:44px; border:0; background:none; padding:0;
              font:32px/44px Georgia,'Times New Roman',serif; color:var(--gold-texte); cursor:pointer; z-index:3; text-align:center }
.screen.avec-retour > .q-eyebrow:first-of-type{ padding-left:36px }
/* Les trois phrases du rituel de fermeture : le meme papier que le journal. */
.deposer-champ{width:100%;border:1px solid var(--filet);border-radius:12px;padding:11px 13px;
  font-family:Georgia,serif;font-size:1rem;line-height:1.55;background:var(--card);color:var(--ink);resize:vertical}
/* Pendant le geste : le sortant passe DEVANT et devient opaque (sinon les
   deux textes se superposent), l'entrant attend DESSOUS, hors du doigt. */
main > .screen.on{ z-index:2 }
main > .screen.dessous{ display:flex !important; z-index:1; pointer-events:none }
main > .screen.glisse{ transition:none }
main > .screen.repose{ transition:transform .30s cubic-bezier(.32,.72,0,1) }
main > .screen.ressort{ transition:transform .30s cubic-bezier(.22,.9,.3,1.18) }
main > .screen.glisse.on, main > .screen.repose.on{ background:var(--paper) }
body.night main > .screen.glisse.on, body.night main > .screen.repose.on{ background:var(--night) }
/* Le raccord : a la fin du geste les deux ecrans sont DEJA en place,
   aucune animation d'entree ne doit rejouer par-dessus. */
body.sans-entree .screen.on{ animation:none !important }
/* Le clavier de l'iPhone : le document ne defile plus, donc un ecran court
   ne pourrait pas remonter un champ resté sous le clavier. On lui donne de
   quoi defiler tant qu'un champ a le doigt. (Lecon de rc128 : c'est sur
   l'ecran d'entree que ca coute le plus cher.) */
body.clavier main > .screen.on{ padding-bottom:calc(env(safe-area-inset-bottom) + 46vh) }
@media (prefers-reduced-motion:reduce){ main > .screen.repose, main > .screen.ressort{ transition:none } }
#piste{
  flex:1 1 auto; min-height:0; display:none;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-behavior:auto;
  overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
#piste::-webkit-scrollbar{ display:none }
body.tabbed #piste{ display:flex }
#piste > .screen{
  display:flex !important;               /* jamais de display:none entre eux */
  animation:none !important;             /* jamais screenIn, jamais appear */
  flex:0 0 100%; width:100%; min-width:100%;
  scroll-snap-align:start; scroll-snap-stop:always;
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain;
  padding:0 22px calc(env(safe-area-inset-bottom) + 96px);
}
/* Une feuille ouverte neutralise le glisse entre onglets. */
body.sheeted #piste{ overflow-x:hidden }
@media (prefers-reduced-motion:reduce){ #piste{ scroll-behavior:auto } }
.boirechip{position:fixed;right:16px;bottom:calc(env(safe-area-inset-bottom) + 72px);z-index:8;display:none;align-items:center;gap:8px;background:rgba(251,247,238,.94);border:1px solid rgba(58,107,140,.42);color:#3A6B8C;border-radius:999px;padding:9px 14px 9px 11px;font-family:Georgia,serif;font-size:0.875rem;box-shadow:0 5px 18px rgba(58,107,140,.12);cursor:pointer;overflow:visible;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.boirechip .water-drop{position:relative;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:rgba(58,107,140,.11);box-shadow:inset 0 0 0 1px rgba(58,107,140,.12);overflow:hidden;transition:transform .3s ease,background .3s ease}
.boirechip .water-drop::before{content:"";position:absolute;left:0;right:0;bottom:-2px;height:48%;background:rgba(58,107,140,.20);border-radius:50% 50% 0 0;transform-origin:bottom;transition:height .45s ease}.boirechip .water-drop svg{position:relative;z-index:1;width:14px;height:18px;display:block;fill:#3A6B8C}.boirechip.splash .water-drop::before{height:88%}
.boirechip.splash .water-drop{animation:waterDropPop .7s cubic-bezier(.2,.8,.2,1)}
.boirechip.splash::after{content:"";position:absolute;left:20px;top:50%;width:18px;height:18px;border:1px solid rgba(58,107,140,.48);border-radius:50%;transform:translate(-50%,-50%);animation:waterRipple .75s ease-out forwards;pointer-events:none}
@keyframes waterDropPop{0%{transform:scale(1)}35%{transform:scale(.82) translateY(2px)}65%{transform:scale(1.18) translateY(-2px)}100%{transform:scale(1)}}
@keyframes waterRipple{0%{opacity:.75;transform:translate(-50%,-50%) scale(.55)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.7)}}
.jentry{background:var(--card);border:1px solid rgba(169,130,60,.18);border-radius:14px;padding:13px 15px;margin-bottom:10px;cursor:pointer}
.jmeta{font-size:0.75rem;color:var(--gray);font-family:-apple-system,system-ui,sans-serif;margin-bottom:5px}
.jtext{font-size:0.9375rem;line-height:1.55;color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.jfilters{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:10px;-webkit-overflow-scrolling:touch}
.jfilters button{flex:0 0 auto;border:1px solid var(--filet);background:none;border-radius:999px;padding:6px 12px;font-family:Georgia,serif;font-size:0.8125rem;color:var(--gray);cursor:pointer}
.jfilters button.on{background:var(--gold);color:#fff;border-color:var(--gold);font-weight:700}
/* --- rc108 · Ma journée idéale, Sous la douche, le « ? » des pratiques --- */
/* rc109 : listes pleine largeur, une coche à droite */
.jour-list{display:flex;flex-direction:column;gap:8px;margin:6px 0 6px}
.jour-list button{display:flex;align-items:center;gap:12px;width:100%;min-height:50px;border:1px solid var(--filet);background:var(--card);border-radius:14px;padding:11px 14px;font-family:Georgia,serif;font-size:1rem;color:var(--ink);cursor:pointer;text-align:left}
.jour-list button .lab{flex:1}
.jour-list button .chk{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--filet-fort);flex:none;position:relative}
.jour-list button.on{border-color:var(--gold);background:var(--lueur)}
.jour-list button.on .chk{background:var(--gold);border-color:var(--gold)}
.jour-list button.on .chk::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.jour-list button .num{width:24px;height:24px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;font-family:-apple-system,sans-serif;font-size:0.8125rem;font-weight:700;border:1px solid var(--filet);color:var(--gold-texte)}
.jour-list button.on .num{background:var(--gold);color:#fff;border-color:var(--gold)}
.jour-ajout{display:flex;gap:8px;margin:0 0 10px}
.jour-ajout input{flex:1;min-width:0;border:1px solid var(--filet);border-radius:12px;padding:10px 12px;font-family:Georgia,serif;font-size:1rem;background:var(--card);color:var(--ink);min-height:46px}
.jour-ajout .btn{width:auto;flex:none;padding:0 16px;margin:0;min-height:46px}
.jour-curseur .val{font-size:1.625rem;font-weight:700;color:var(--gold-texte);text-align:center;margin-bottom:2px;font-variant-numeric:tabular-nums}
.jour-curseur input[type=range]{margin:6px 0 2px}
.jour-curseur .reperes{display:flex;justify-content:space-between;font-size:0.75rem;color:var(--gray);margin-top:2px}
.jour-chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 16px}
.jour-chips button{min-height:44px;border:1px solid var(--filet);background:var(--card);border-radius:999px;padding:9px 14px;font-family:Georgia,serif;font-size:0.9375rem;color:var(--ink);cursor:pointer;text-align:left;display:inline-flex;align-items:center}
.jour-chips button.on{background:var(--gold);color:#fff;border-color:var(--gold);font-weight:700}
.jour-chips button .num{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.3);font-size:0.75rem;margin-right:7px;font-family:-apple-system,sans-serif;font-weight:700}
.jour-row{padding:11px 0;border-bottom:1px solid var(--lueur)}
.jour-row:last-child{border-bottom:none}
.jour-row .lab{font-size:1rem;margin-bottom:7px}
.jour-mom{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.jour-mom button{min-height:36px;border:1px solid var(--filet);background:none;border-radius:999px;padding:5px 6px;font-family:-apple-system,sans-serif;font-size:0.8125rem;color:var(--gray);cursor:pointer;text-align:center}
.jour-mom button.on{background:var(--gold);color:#fff;border-color:var(--gold);font-weight:700}
.jour-time{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--lueur)}
.jour-time:last-child{border-bottom:none}
.jour-time input{border:1px solid var(--filet);border-radius:10px;padding:9px 12px;font-family:Georgia,serif;font-size:1.0625rem;background:var(--card);color:var(--ink);min-height:44px}
.jour-tl{border-left:2px solid var(--filet);margin:10px 0 6px 8px;padding-left:18px}
.jour-pt{position:relative;padding:0 0 16px}
.jour-pt::before{content:"";position:absolute;left:-25px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--gold)}
.jour-pt .lab{font-family:-apple-system,sans-serif;font-size:0.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-texte);margin-bottom:3px}
.jour-pt .val{font-size:1rem;line-height:1.5}
.jour-pt .val.vide{color:var(--gray);font-style:italic}
.jour-dots{display:flex;gap:5px;margin:10px 0 4px}
.jour-dots span{width:10px;height:10px;border-radius:50%;background:rgba(169,130,60,.16)}
.jour-dots span.s1{background:var(--filet)}
.jour-dots span.s2{background:rgba(169,130,60,.6)}
.jour-dots span.s3{background:var(--gold)}
.jour-dots span.s4{background:var(--gold);box-shadow:0 0 0 2px var(--filet)}
.pq{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:22px;height:22px;margin-left:auto;align-self:center;border:1px solid var(--filet-fort);border-radius:50%;font:italic 600 12px Georgia,serif;color:var(--gold-texte);cursor:pointer}
.pq:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ===== v79 DIAGNOSTIC : ORBE CSS TEXTURE VIVANTE =====
   Même moteur CSS que la respiration. Aucun Canvas/WebGL/SVG/video/WebP animé.
   Trois copies de la vraie texture HD circulent au-dessus de la base. */
.orb-v79-base, .orb-v79-cloud, .orb-v79-spiral, .orb-v79-glow, .orb-v79-pearl{position:absolute;pointer-events:none}
.orb-v79-base{inset:0;width:100%;height:100%;object-fit:contain;z-index:1;opacity:.62;filter:grayscale(1) contrast(1.18) brightness(.88)}
.orb-v79-live{position:absolute;inset:0;z-index:4;overflow:hidden;border-radius:50%;pointer-events:none;
  /* Un degrade dessine le disque, rond et fondu sur les bords : la couleur du pilier arrive
     AVEC l’ecran, sans attendre aucune image. C’est le rendu que Johnatan a choisi le
     3 septembre 2026 (l’ancienne silhouette de nuage, un masque de 500 Ko, est abandonnee). */
  -webkit-mask:radial-gradient(circle closest-side,#000 93%,rgba(0,0,0,.6) 96%,transparent 99.5%);mask:radial-gradient(circle closest-side,#000 93%,rgba(0,0,0,.6) 96%,transparent 99.5%)}
.orb-v79-cloud{width:150%;height:150%;max-width:none;object-fit:contain;left:-25%;top:-25%;will-change:transform,opacity;transform:translateZ(0)}
.orb-v79-c1{z-index:4;opacity:.72;mix-blend-mode:screen}
.orb-v79-c2{z-index:5;opacity:.58;mix-blend-mode:soft-light;filter:grayscale(1) contrast(1.42) brightness(.90)}
.orb-v79-c3{z-index:6;opacity:.46;mix-blend-mode:screen;filter:grayscale(1) contrast(1.18) brightness(1.34)}
.orb-v79-spiral{inset:5%;z-index:7;border-radius:50%;opacity:.34;mix-blend-mode:screen;filter:blur(8px);
  background:conic-gradient(from 20deg,transparent 0 9%,rgba(255,255,255,.19) 14%,transparent 24%,rgba(var(--orb-pillar-rgb),.25) 34%,transparent 45%,rgba(255,255,255,.14) 58%,transparent 69%,rgba(var(--orb-pillar-rgb),.20) 82%,transparent 94%)}
.orb-v79-glow{inset:8%;z-index:8;border-radius:50%;mix-blend-mode:screen;opacity:.68;filter:blur(9px);
  background:radial-gradient(ellipse at 34% 28%,rgba(255,255,255,.42),transparent 30%),radial-gradient(ellipse at 68% 62%,rgba(var(--orb-pillar-rgb),.28),transparent 34%)}
.orb-v79-pearl{width:18px;height:18px;z-index:9;border-radius:50%;left:48%;top:47%;opacity:.38;mix-blend-mode:screen;filter:blur(5px);
  background:radial-gradient(circle,rgba(255,255,255,.85) 0%,rgba(var(--orb-pillar-rgb),.42) 38%,transparent 75%)}
.orb-v79-sheen{position:absolute;inset:2%;z-index:10;border-radius:50%;pointer-events:none;box-shadow:inset 0 0 26px rgba(255,255,255,.10),0 0 20px rgba(var(--orb-pillar-rgb),.13)}
@keyframes v79Cloud1{0%,100%{transform:translate3d(-7%,-5%,0) rotate(-9deg) scale(1.04)}35%{transform:translate3d(5%,-1%,0) rotate(2deg) scale(1.13)}68%{transform:translate3d(2%,7%,0) rotate(10deg) scale(1.08)}}
@keyframes v79Cloud2{0%,100%{transform:translate3d(7%,5%,0) rotate(12deg) scale(1.10)}42%{transform:translate3d(-6%,2%,0) rotate(-3deg) scale(1.18)}75%{transform:translate3d(-2%,-7%,0) rotate(-12deg) scale(1.12)}}
@keyframes v79Cloud3{0%,100%{transform:translate3d(-3%,7%,0) rotate(-4deg) scale(1.06)}48%{transform:translate3d(7%,-7%,0) rotate(13deg) scale(1.16)}}
@keyframes v79Spiral{0%{transform:rotate(-8deg) scale(.97)}50%{transform:rotate(16deg) scale(1.04)}100%{transform:rotate(40deg) scale(.97)}}
@keyframes v79Glow{0%,100%{transform:translate3d(-6px,-4px,0) scale(.94);opacity:.48}50%{transform:translate3d(8px,7px,0) scale(1.08);opacity:.82}}
@keyframes v79Pearl{0%,100%{transform:translate3d(-52px,-22px,0) scale(.65);opacity:.18}25%{transform:translate3d(18px,-48px,0) scale(1.05);opacity:.54}55%{transform:translate3d(49px,19px,0) scale(.78);opacity:.30}80%{transform:translate3d(-19px,45px,0) scale(1.10);opacity:.48}}
body.session-playing .orb-v79-c1{animation:v79Cloud1 18s ease-in-out infinite}
body.session-playing .orb-v79-c2{animation:v79Cloud2 23s ease-in-out infinite reverse}
body.session-playing .orb-v79-c3{animation:v79Cloud3 29s ease-in-out infinite}
body.session-playing .orb-v79-spiral{animation:v79Spiral 72s linear infinite}
body.session-playing .orb-v79-glow{animation:v79Glow 15s ease-in-out infinite}
body.session-playing .orb-v79-pearl{animation:v79Pearl 21s ease-in-out infinite}
body.session-playing.speaking .orb-v79-c1{opacity:.80}body.session-playing.speaking .orb-v79-c2{opacity:.66}body.session-playing.speaking .orb-v79-glow{opacity:.88}
body.paused .orb-v79-c1, body.paused .orb-v79-c2, body.paused .orb-v79-c3, body.paused .orb-v79-spiral, body.paused .orb-v79-glow, body.paused .orb-v79-pearl{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.orb-v79-c1,.orb-v79-c2,.orb-v79-c3,.orb-v79-spiral,.orb-v79-glow,.orb-v79-pearl{animation:none!important}}


/* ===== v81 : retour des couleurs pilier + respiration visible ===== */
.orb-color, .orb-aura, .orb-coreglow, .orb-shine, .orb-rim{display:block!important}
.orb-v79-c1{opacity:.74!important}
.orb-v79-c2{opacity:.60!important}
.orb-v79-c3{opacity:.44!important}
.halo-wrap{transform:translateZ(0)}
@keyframes orbBreath{
  0%,100%{transform:scale(.972)}
  50%{transform:scale(1.036)}
}
body.session-playing .halo{animation:orbBreath 12s cubic-bezier(.42,.05,.58,.95) infinite!important}
body.paused .halo{animation-play-state:paused!important}
body.session-playing.speaking .orb-aura{opacity:.98!important}
body.session-playing.speaking .orb-coreglow{opacity:.92!important}


/* ===== v83 : textures PNG nativement colorées par pilier ===== */
.orb-v79-base{
  opacity:.88!important;
  filter:contrast(1.05) brightness(1.10)!important;
}
.orb-v79-cloud{
  filter:contrast(1.06) brightness(1.08)!important;
}
.orb-v79-c1{opacity:.52!important;mix-blend-mode:screen!important}
.orb-v79-c2{opacity:.38!important;mix-blend-mode:soft-light!important}
.orb-v79-c3{opacity:.30!important;mix-blend-mode:screen!important}
.orb-v79-glow{
  opacity:.68!important;
  background:radial-gradient(ellipse at 34% 28%,rgba(255,255,255,.36),transparent 30%),radial-gradient(ellipse at 68% 62%,rgba(var(--orb-pillar-rgb),.25),transparent 34%)!important;
}
.orb-v79-sheen{box-shadow:inset 0 0 26px rgba(255,255,255,.12),0 0 20px rgba(var(--orb-pillar-rgb),.16)!important}
/* v84 : bordures fondues, pour éviter un contour trop net */
.orb-v79-live{
  box-shadow:inset 0 0 1px rgba(255,255,255,.28), inset 0 0 18px rgba(255,255,255,.10);
}
.orb-v79-edgefade{
  position:absolute;inset:-1.4%;z-index:16;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,
    rgba(245,239,227,0) 58%,
    rgba(245,239,227,.03) 66%,
    rgba(245,239,227,.12) 74%,
    rgba(245,239,227,.28) 82%,
    rgba(245,239,227,.58) 90%,
    rgba(245,239,227,.92) 97%,
    rgba(245,239,227,1) 100%);
  filter:blur(2.4px);
  opacity:.98;
}
body.session-playing.speaking .orb-v79-edgefade{opacity:.92}


/* v95 · aperçu du test, parcours offert et impact Diagnostic */
.discovery-next{background:var(--card);border:1px solid var(--filet);border-radius:14px;padding:13px 15px;margin-bottom:9px;text-align:left}
.discovery-next .dn-k{font:700 10.5px/1.2 -apple-system,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-texte);margin-bottom:4px}
.discovery-next .dn-t{font-size:1rem;line-height:1.35}
.discovery-next .dn-s{font:12.5px/1.45 -apple-system,system-ui,sans-serif;color:var(--gray);margin-top:4px}
.diag-hint{display:block;margin-top:6px;font:700 11.5px/1.35 -apple-system,system-ui,sans-serif;color:var(--gold-texte)}


/* ===== v97 · Diagnostic perceptible ===== */
.diag-active-strip{display:none;margin:0 0 14px;padding:12px 14px;border:1px solid rgba(193,154,62,.34);border-radius:14px;background:linear-gradient(135deg,rgba(193,154,62,.11),rgba(251,247,238,.78));text-align:left;cursor:pointer}
.diag-active-strip .das-k{font:700 10.5px/1.2 -apple-system,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-texte);margin-bottom:4px}
.diag-active-strip .das-t{font-size:0.875rem;line-height:1.45;color:var(--ink)}
.diag-active-strip .das-s{font:12px/1.45 -apple-system,system-ui,sans-serif;color:var(--gray);margin-top:4px}
.diag-activation-hero{border:1px solid rgba(193,154,62,.34);border-radius:18px;padding:18px;background:linear-gradient(160deg,rgba(193,154,62,.12),rgba(251,247,238,.9));margin-bottom:14px}
.diag-activation-hero .k{font:700 10.5px/1.2 -apple-system,system-ui,sans-serif;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-texte);margin-bottom:7px}
.diag-activation-hero .t{font-size:1.3125rem;line-height:1.3;margin-bottom:7px}
.diag-activation-hero .s{font:13.5px/1.6 -apple-system,system-ui,sans-serif;color:var(--gray)}
.diag-signal-grid{display:grid;grid-template-columns:1fr;gap:9px;margin:12px 0}
.diag-signal{border:1px solid rgba(142,106,47,.2);border-radius:13px;padding:12px 13px;background:var(--card)}
.diag-signal .k{font:700 10px/1.2 -apple-system,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--gray);margin-bottom:3px}
.diag-signal .v{font-size:1rem;line-height:1.35}
.diag-signal .sub{font:12.5px/1.45 -apple-system,system-ui,sans-serif;color:var(--gray);margin-top:3px}
.diag-compare{border-left:3px solid var(--gold);padding:10px 0 10px 13px;margin:14px 0;font:13.5px/1.6 -apple-system,system-ui,sans-serif;color:var(--gray)}
.diag-rec-banner{margin:0 0 11px;padding:10px 12px;border-radius:12px;background:rgba(193,154,62,.10);border:1px solid rgba(193,154,62,.26);font:12.5px/1.5 -apple-system,system-ui,sans-serif;color:var(--ink)}
.diag-rec-banner b{color:var(--gold-texte)}
.diag-impact-detail{display:none;margin:8px 0 0;padding:11px 12px;border-radius:12px;background:var(--lueur);border:1px solid rgba(142,106,47,.16);font:12.5px/1.55 -apple-system,system-ui,sans-serif;color:var(--gray)}

/* v98 · la carte avant la météo */
.diag-door-arrival{background:linear-gradient(135deg,var(--lueur),rgba(169,130,60,.025));border:1px solid var(--filet);border-radius:14px;padding:14px 15px;margin:0 0 14px;text-align:left}
.diag-door-arrival .dda-k{font:700 10.5px/1.2 -apple-system,system-ui,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-texte);margin-bottom:5px}
.diag-door-arrival .dda-t{font-size:1.0625rem;line-height:1.35;margin-bottom:4px}
.diag-door-arrival .dda-s{font:12.5px/1.5 -apple-system,system-ui,sans-serif;color:var(--gray)}

/* v99 · pédagogie Carte / Présent / Trajectoire */
.diag-pedagogy{display:grid;grid-template-columns:1fr;gap:8px;margin:12px 0 4px}
.diag-pedagogy .dp{background:rgba(255,255,255,.32);border:1px solid rgba(142,106,47,.20);border-radius:13px;padding:12px 13px;text-align:left}
.diag-pedagogy .dp .n{font:700 10.5px/1.2 -apple-system,system-ui,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-texte);margin-bottom:4px}
.diag-pedagogy .dp .t{font-size:1rem;line-height:1.35;margin-bottom:2px}
.diag-pedagogy .dp .s{font:12.5px/1.48 -apple-system,system-ui,sans-serif;color:var(--gray)}
.diag-legacy-note{background:var(--lueur);border:1px solid var(--filet);border-radius:13px;padding:12px 13px;margin:10px 0;font:12.5px/1.5 -apple-system,system-ui,sans-serif;color:var(--gray)}
.diag-legacy-note b{color:var(--ink)}

/* Insigne d’accès */
.beta-badge{display:inline-flex;align-items:center;gap:6px;font:700 10px/1 -apple-system,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-texte);border:1px solid var(--filet);border-radius:999px;padding:6px 9px;margin:0 0 12px;background:rgba(255,255,255,.32)}
.beta-grid{display:grid;gap:10px;margin:12px 0}
.beta-field{width:100%;box-sizing:border-box;border:1px solid var(--filet);border-radius:12px;padding:12px 13px;font:14px/1.5 -apple-system,system-ui,sans-serif;background:var(--card);color:var(--ink);resize:vertical}
.beta-status{min-height:20px;margin-top:8px;font:12.5px/1.45 -apple-system,system-ui,sans-serif;color:var(--gray)}
.beta-tech{font:11.5px/1.55 -apple-system,system-ui,sans-serif;color:var(--gray);white-space:pre-wrap;background:var(--lueur);border-radius:10px;padding:10px 12px;margin-top:12px}


/* V102 · Aujourd’hui = décider, Explorer = choisir */
.today-choice-intro{margin:0 0 12px;padding:14px 15px;border:1px solid var(--filet);border-radius:14px;background:rgba(255,255,255,.22)}
.today-choice-intro .t{font-size:1.0625rem;line-height:1.35;margin-bottom:5px}
.today-choice-intro .s{font:13px/1.55 -apple-system,system-ui,sans-serif;color:var(--gray)}
.today-entry{margin:0 0 10px;padding:15px;border:1px solid var(--filet);border-radius:14px;background:var(--card);text-align:left}
.today-entry .k{font:700 10.5px/1.2 -apple-system,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-texte);margin-bottom:5px}
.today-entry .t{font-size:1.125rem;line-height:1.3;margin-bottom:5px}
.today-entry .s{font:13px/1.55 -apple-system,system-ui,sans-serif;color:var(--gray)}
.today-entry .route{font:700 14px/1.4 -apple-system,system-ui,sans-serif;color:var(--ink);margin-top:9px}
.today-entry .why{display:none;margin-top:9px;padding-top:9px;border-top:1px solid rgba(169,130,60,.18);font:12.5px/1.55 -apple-system,system-ui,sans-serif;color:var(--gray)}
.today-entry-actions{display:flex;gap:8px;margin-top:11px}
.today-entry-actions .btn{margin:0}
.today-foundation-link{width:100%;margin-top:8px;font-size:0.8125rem;padding:9px;border-color:var(--filet)}


/* V102.2 · aucun chrome interactif avant l’entrée réelle dans l’app */
body.landing-locked #brandHome{
  pointer-events:none !important;
  cursor:default !important;
  -webkit-user-select:none;
  user-select:none;
}
body.tabbed #profBtn{display:none !important}
body.landing-locked #gearBtn,
body.landing-locked #profBtn{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}


/* Petits écrans : les cinq choix d’énergie ne doivent pas être rognés. */
@media(max-width:360px){
  .seg-ctrl.wrap button{ font-size:0.75rem; padding-left:4px; padding-right:4px; }
}

/* Zones tactiles : 44 px, seuil au-delà duquel un pouce ne rate pas sa cible.
   Le contrôle segmenté et les boutons portent 53 des 60 cas mesurés. */
/* rc199 · le didacticiel se feuillette au doigt : le geste horizontal nous
   revient, le defilement vertical reste au navigateur. */
#tutoSlides{ touch-action: pan-y; }
.seg-ctrl button{ min-height:44px; }
.btn{ min-height:44px; }