/* ══ 29/09 · LE GESTE PENDANT LA SÉANCE (geste-seance.js ; affichage : poserLeGeste dans app.js) ══════════
 * Le chrono reste lisible de loin : quand le geste est là, l'anneau rétrécit un peu, il ne disparaît jamais. */
.tr-geste { width: 100%; max-width: 440px; margin: 0 auto 8px; text-align: center; }
.tr-geste[hidden] { display: none; }
.tr-geste-ensuite { margin: 0 0 8px; color: var(--tr-texte-2); font: 500 14px/1.2 var(--tr-police); letter-spacing: .02em; }
.tr-geste-visuel { position: relative; width: min(100%, 26vh); aspect-ratio: 1 / 1; margin: 0 auto; border-radius: 16px; overflow: hidden;
  background: radial-gradient(circle at 50% 42%, #0a2236 0%, #04101c 55%, #010409 100%); border: 1px solid var(--tr-ligne, #2a2a2e); }
.tr-vue-exercice .tr-geste-visuel { width: min(100%, 40vh); }
.tr-geste-holo { width: 100%; height: 100%; object-fit: contain; display: block; }
.tr-geste-muscles { display: flex; align-items: center; justify-content: center; gap: 4%; padding: 10px; background: #111214; aspect-ratio: 4 / 3; width: min(100%, 40vh); }
.tr-geste-muscles svg { height: 100%; width: auto; max-width: 47%; }
.tr-geste-bandeau { position: absolute; left: 8px; top: 8px; padding: 4px 8px; border-radius: 8px; background: rgba(0, 0, 0, .7); color: #E8C27A; font: 600 11px/1.2 var(--tr-police); text-align: left; }
.tr-geste-souffle { position: absolute; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 7px; max-width: calc(100% - 16px); padding: 6px 11px 6px 8px;
  border-radius: 999px; background: rgba(0, 0, 0, .66); color: #fff; font: 600 14px/1.15 var(--tr-police); text-align: left; }
.tr-geste-souffle[hidden] { display: none; }
.tr-geste-souffle i { flex: none; width: 14px; height: 14px; border-radius: 50%; background: #7FD4FF; transform: scale(.8); transition: transform 900ms ease-in-out, background 300ms; }
.tr-geste-souffle[data-phase="retour"] i { transform: scale(1.3); background: #7FD4FF; }          /* inspire : le rond se gonfle */
.tr-geste-souffle[data-phase="effort"] i { transform: scale(.55); background: var(--tr-or, #E0AE55); } /* expire : il se vide */
.tr-geste-point { margin: 8px 0 0; color: #fff; font: 700 clamp(20px, 5.6vw, 26px)/1.2 var(--tr-police); min-height: 2.4em; }
.tr-vue-minuteur .tr-geste-point { font-size: clamp(18px, 5vw, 22px); }
.tr-geste-point[hidden] { display: none; }
.tr-geste-point small { display: block; margin-bottom: 5px; color: var(--tr-or, #E0AE55); font: 600 12px/1 var(--tr-police); letter-spacing: .08em; text-transform: uppercase; }
.tr-geste-tout { font-size: 14px; padding-top: 4px; }
.tr-vue-minuteur.avec-geste .tr-run-nom { margin: 6px 0 10px; }
.tr-vue-minuteur.avec-geste .tr-cadran { width: min(46vw, 180px); }
.tr-vue-minuteur.avec-geste .tr-chiffre { font-size: clamp(40px, 12vw, 52px) !important; }
.tr-vue-minuteur.avec-geste .tr-etat { font-size: 17px !important; }
/* « Tout le geste » : une feuille qui monte du bas, lisible pendant le repos. */
.tr-geste-feuille { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; background: rgba(0, 0, 0, .55); }
.tr-geste-feuille[hidden] { display: none; }
.tr-geste-feuille-corps { width: 100%; max-height: 82dvh; overflow: auto; padding: 20px 18px calc(18px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0;
  background: #141416; color: #fff; text-align: left; animation: tr-in-fondu 200ms ease-out both; }
.tr-geste-feuille-corps h2 { margin: 0 0 6px; font: 700 24px/1.2 var(--tr-police); color: #fff; }
.tr-geste-texte h3 { margin: 16px 0 6px; color: var(--tr-or, #E0AE55); font: 600 13px/1 var(--tr-police); letter-spacing: .08em; text-transform: uppercase; }
.tr-geste-texte p, .tr-geste-texte li { margin: 0 0 6px; color: #E6E6E8; font-size: 16px; line-height: 1.45; }
.tr-geste-texte ul, .tr-geste-texte ol { margin: 0; padding-left: 20px; }
.tr-geste-texte .tr-geste-source { margin-top: 10px; color: var(--tr-texte-3, #8A8A90); font-size: 13px; }
.tr-geste-feuille .tr-cta { margin-top: 18px; width: 100%; }
@media (prefers-reduced-motion: reduce) { .tr-geste-souffle i { transition: none; } .tr-geste-feuille-corps { animation: none; } }
/* Vue « à ton rythme » avec le geste et sans vidéo de Tonio : la case vidéo ne garde que son petit chrono. */
.tr-exo-media.avec-geste { aspect-ratio: auto; background: none; border: 0; display: flex; justify-content: center; min-height: 0; margin-top: 6px; overflow: visible; animation: none; }
.tr-exo-media.avec-geste video, .tr-exo-media.avec-geste .tr-exo-sans-video { display: none !important; }
.tr-exo-media.avec-geste .tr-exo-temps { position: static; }
.tr-geste-avalider { margin: 6px 0 0; color: var(--tr-texte-3, #8A8A90); font: 500 12px/1.2 var(--tr-police); }
/* La démonstration marquée (points clés et souffle dans l'image) : un peu plus grande, rien par-dessus. */
.tr-geste-visuel.tr-geste-marque { width: min(100%, 30vh); }
.tr-vue-exercice .tr-geste-visuel.tr-geste-marque { width: min(100%, 44vh); }
/* 30/09 — pendant le chrono, la démonstration marquée prend la place : ses sous-titres (points clés) doivent se lire
 * à bout de bras. L'anneau du chrono reste lisible, plus petit. */
.tr-vue-minuteur.avec-demo .tr-geste-visuel.tr-geste-marque { width: min(100%, 41vh); }
.tr-vue-minuteur.avec-demo .tr-cadran { width: min(36vw, 138px); }
.tr-vue-minuteur.avec-demo .tr-chiffre { font-size: clamp(34px, 10vw, 42px) !important; }
.tr-vue-minuteur.avec-demo .tr-etat { font-size: 15px !important; }
.tr-vue-minuteur.avec-demo .tr-geste-tout { padding-top: 2px; }

/* 30/09 · L'HOLOGRAMME VIVANT : la démonstration fabriquée et jouée en direct (holo/moteur/vivant.js). Le canevas prend la place
   de la vidéo, à la taille exacte de l'écran ; on peut tourner autour du corps du doigt. */
.tr-geste-vivant { position: absolute; inset: 0; }
.tr-geste-vivant canvas { width: 100% !important; height: 100% !important; display: block; }
.tr-geste-attente { width: 100%; height: 100%; background: radial-gradient(circle at 50% 45%, #0a2236, #04101c 55%, #010409); }

/* 01/10 (35q) · PAUSE ET RALENTI EN SÉANCE : sous l'hologramme vivant, deux boutons de 44 px (le geste se regarde à son rythme,
   surtout pendant le repos, où il montre l'exercice suivant). */
.tr-geste-cmd { display: flex; justify-content: center; gap: 8px; margin: 8px auto 0; }
.tr-geste-cmd button { min-height: 44px; min-width: 96px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--tr-ligne, #2a2a2e);
  background: rgba(255, 255, 255, .06); color: #fff; font: 600 14px/1 var(--tr-police); cursor: pointer; }
.tr-geste-cmd button[aria-pressed="true"] { border-color: var(--tr-or, #E0AE55); color: var(--tr-or, #E0AE55); background: rgba(224, 174, 85, .12); }
.tr-geste-cmd button:focus-visible { outline: 2px solid var(--tr-or, #E0AE55); outline-offset: 2px; }

/* 02/10 · « MON CORPS » (Suivi › Mensurations) : l'hologramme taillé sur les tours relevés, la chaleur de la semaine sur ses muscles. */
.sv-corps-holo .sv-corps-dit { margin: 0 0 8px; color: var(--tr-texte-2, #C9C2B4); font: 500 14px/1.35 var(--tr-police); }
.sv-corps-cadre { position: relative; width: min(100%, 340px); aspect-ratio: 5 / 6; margin: 0 auto; border-radius: 16px; overflow: hidden;
  background: radial-gradient(circle at 50% 42%, #0a2236 0%, #04101c 55%, #010409 100%); border: 1px solid var(--tr-ligne, #2a2a2e); }
.sv-corps-cadre canvas { width: 100% !important; height: 100% !important; display: block; }
.sv-corps-cadre:not(:has(canvas))::after { content: 'Préparation de ton hologramme…'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #8A8A90; font: 600 13px var(--tr-police); }
.sv-corps-leg { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; list-style: none; margin: 10px 0 4px; padding: 0; font: 500 12px var(--tr-police); color: var(--tr-texte-2, #C9C2B4); }
.sv-corps-leg li::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--p); margin-right: 6px; vertical-align: 0; }
.sv-corps-t { margin: 12px 0 6px; font: 700 13px var(--titre); letter-spacing: .08em; text-transform: uppercase; color: var(--tr-or, #E0AE55); }
.sv-corps-recup { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; width: 100%; min-height: 52px; margin: 0 0 6px; padding: 8px 12px;
  border-radius: 12px; border: 1px solid rgba(255, 90, 60, .45); background: rgba(255, 70, 40, .08); color: #fff; text-align: left; cursor: pointer; font: 600 15px var(--tr-police); }
.sv-corps-recup small { grid-row: 2; color: var(--tr-texte-2, #C9C2B4); font-weight: 500; font-size: 12px; }
.sv-corps-recup span { grid-row: 1 / 3; grid-column: 2; color: var(--tr-or, #E0AE55); font-size: 14px; }
.sv-corps-froids { margin: 8px 0 0; color: #8FA7FF; font: 500 13px/1.4 var(--tr-police); }
.sv-corps-compo { margin: 10px 0 0; color: var(--tr-texte-2, #C9C2B4); font: 500 13px/1.5 var(--tr-police); }
.sv-corps-compo:empty { display: none; }
/* 02/10 · fin de séance : « Ce que tu as travaillé » */
.tr-fin-travail { width: min(100%, 340px); margin: 14px auto 6px; text-align: center; }
.tr-fin-cadre { width: min(100%, 300px); }
.tr-fin-muscles { margin: 8px 0 0; color: var(--tr-texte-2, #C9C2B4); font: 500 14px/1.4 var(--tr-police); }
.tr-fin-muscles:empty { display: none; }
/* 02/10 · l'hologramme DANS la figure des mensurations : plus d'image masquée, le corps 3D remplit le cadre, les anneaux par-dessus */
.sv-perso.sv-perso-holo .sv-perso-corps, .sv-perso.sv-perso-holo[data-sexe="f"] .sv-perso-corps { -webkit-mask: none; mask: none; background: none; filter: none; }
.sv-perso-holo-hote, .sv-perso-holo-hote canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.sv-perso.sv-perso-holo .sv-perso-traits { z-index: 1; }
/* 02/10 (« le bonhomme fait tout petit — agrandis-le, intègre mieux les mesures ») : le corps 3D prend ~1,5× la place ; ses marges vides
   (de chaque côté des mains) passent SOUS les cartes, en verre, qui gardent leur taille de texte. Un fil relie chaque mesure allumée à son anneau. */
.sv-corps.sv-corps-3d { --k: min(280px, 58vw); --deb: calc(var(--k) * .15); grid-template-columns: minmax(0, 1fr) calc(var(--k) - 2 * var(--deb)) minmax(0, 1fr); gap: 4px; }
.sv-corps-3d .sv-perso { width: var(--k); margin-inline: calc(-1 * var(--deb)); align-self: start; z-index: 0; }
.sv-corps-3d .sv-colonne { position: relative; z-index: 1; padding: 6px 0; }
.sv-corps-3d .sv-zone { background: rgba(20, 18, 15, .62); background: color-mix(in srgb, var(--sv-carte) 64%, transparent); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); opacity: .78; }
.sv-corps-3d .sv-zone.allumee, .sv-corps-3d .sv-zone.soulevee { opacity: 1; }
.sv-fil { fill: none; stroke: var(--sv-a-vif); stroke-width: .42; stroke-linecap: round; stroke-linejoin: round; opacity: .8; filter: drop-shadow(0 0 1px var(--sv-a)); animation: sv-allume .45s ease both; }
.sv-fil-pt { fill: #fff; filter: drop-shadow(0 0 1.4px var(--sv-a-vif)); animation: sv-allume .45s ease both; }
.sv-corps.en-glisse .sv-fil, .sv-corps.en-glisse .sv-fil-pt { opacity: 0; }
/* 02/10 · masse grasse et eau SOUS le corps : deux jauges lisibles (une part de 100, sans zone « idéale », sans vert ni rouge) */
.sv-compo3d { display: grid; gap: 8px; margin: 2px 0 14px; }
.sv-compo3d-j { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 16px; text-align: left; cursor: pointer; color: var(--sv-texte, #F2EDE4); font: inherit; background: var(--sv-carte, #1B1A17); border: 1px solid rgba(255, 255, 255, .07); }
.sv-compo3d-j svg { flex: none; width: 64px; height: 64px; }
.sv-compo3d-fond { fill: none; stroke: rgba(255, 255, 255, .09); stroke-width: 6; }
.sv-compo3d-arc { fill: none; stroke: var(--j); stroke-width: 6; stroke-linecap: round; filter: drop-shadow(0 0 4px var(--j)); }
.sv-compo3d-j text { fill: currentColor; font: 700 13px var(--titre, var(--tr-police)); letter-spacing: -.01em; }
.sv-compo3d-mots { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sv-compo3d-mots b { font: 700 16px/1.15 var(--titre, var(--tr-police)); letter-spacing: .02em; text-transform: uppercase; color: var(--j); }
.sv-compo3d-mots small { font-size: 12.5px; line-height: 1.3; color: var(--sv-texte-2, #B9B1A3); }
.sv-compo3d-mots em { font-style: normal; font-size: 14px; line-height: 1.3; font-weight: 600; }
.sv-compo3d-note { margin: 0; padding: 0 4px; font-size: 12.5px; line-height: 1.4; color: var(--sv-texte-3, #8E877B); }
.sv-corps-3d .sv-colonne.sv-aligne { justify-content: flex-start; gap: 0; }
.sv-corps-holo.sans-corps .sv-corps-leg { display: none; }
/* la boucle réelle : devant plein, derrière en pointillé léger (elle fait le tour du corps) */
.sv-perso-traits path.sv-anneau-halo, .sv-perso-traits path.sv-anneau-trait { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sv-anneau-dos { fill: none; stroke: var(--sv-a-vif); stroke-width: .45; stroke-dasharray: .9 1.1; opacity: .4; animation: sv-allume .45s ease both; }
.sv-corps.sv-corps-3d { position: relative; }
.sv-corps-3d .sv-zone.sv-libre { z-index: 3; }
.sv-replacer { display: block; margin: -6px auto 12px; padding: 8px 14px; min-height: 40px; border-radius: 999px; border: 1px solid rgba(var(--sv-a-rgb, 224, 174, 85), .35); background: transparent; color: var(--sv-a, #E0AE55); font: 600 13px var(--tr-police); cursor: pointer; }
/* 02/10 · l'anneau FLOTTE (moderne) : trait fin et net, lueur douce, l'arrière à peine visible */
.sv-perso-traits path.sv-anneau-trait { stroke: #fff; stroke-width: .5; filter: drop-shadow(0 0 1.2px var(--sv-a-vif)) drop-shadow(0 0 3.5px var(--sv-a)); }
.sv-perso-traits path.sv-anneau-halo { stroke: var(--sv-a-vif); stroke-width: 2.2; opacity: .22; filter: blur(1.4px); }
.sv-anneau-dos { stroke-width: .35; opacity: .28; }
/* 02/10 (« on ne voit pas bien tout le corps ») : le corps entier dégagé — cartes compactes (sans icône), presque plus de chevauchement */
.sv-corps.sv-corps-3d { --k: min(300px, 62vw); --deb: calc(var(--k) * .05); }
.sv-corps-3d .sv-zone { min-height: 0; padding: 6px 8px 7px; gap: 2px; border-radius: 12px; }
.sv-corps-3d .sv-zone-ico { display: none; }
.sv-corps-3d .sv-zone-haut small { font-size: 11px; }
.sv-corps-3d .sv-zone-ligne b { font-size: 16px; }
/* 02/10 : l'effet d'appui global (.tap-press : scale .96 !important) écrasait le déplacement — la carte soulevée suit le doigt */
.sv-zone.soulevee, .sv-zone.soulevee.tap-press { transform: var(--sv-glisse, none) !important; }
/* 02/10 · l'anneau de lumière : le dégradé porte la couleur (pas de blanc uni), lueur douce, nœud avant qui respire */
.sv-perso-traits path.sv-anneau-trait { stroke-width: .6; filter: drop-shadow(0 0 1.5px var(--sv-a-vif)); }
.sv-perso-traits path.sv-anneau-halo { stroke-width: 2.6; opacity: .16; filter: blur(1.8px); }
.sv-anneau-dos { stroke-dasharray: .5 1.4; opacity: .22; }
.sv-anneau-noeud { fill: #fff; filter: drop-shadow(0 0 1.5px var(--sv-a-vif)) drop-shadow(0 0 3px var(--sv-a)); animation: sv-noeud 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sv-noeud { 50% { opacity: .55; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .sv-anneau-noeud { animation: none; } }
.sv-perso-traits path.sv-anneau-trait { stroke-width: .85; filter: drop-shadow(0 0 1.6px var(--sv-a-vif)) drop-shadow(0 0 4px var(--sv-a)); }
.sv-perso-traits path.sv-anneau-halo { stroke-width: 3; opacity: .22; }
.sv-anneau-noeud { r: 1.1; }
/* 02/10 · le corps du Suivi se déverrouille (cadenas) : les anneaux ne prennent jamais le doigt */
.sv-perso.sv-perso-holo .sv-perso-traits { pointer-events: none; }
.sv-perso-holo-hote .holo-cadenas { top: 0 !important; right: auto !important; left: 50% !important; transform: translateX(-50%); width: 38px !important; height: 38px !important; font-size: 17px !important; z-index: 4; }   /* au-dessus de la tête : aucune carte ne le couvre */
/* 02/10 · Suivi › Mensurations : quatre onglets (Vue générale · Corps · Tendances · Objectif) tiennent sur un téléphone */
.sv-segments-4 .sv-seg { font-size: 13.5px; padding: 0 3px; }
@media (max-width: 360px) { .sv-segments-4 .sv-seg { font-size: 12.5px; } }
/* 02/10 · L'OBJECTIF EN HOLOGRAMME : aujourd'hui | objectif, les tours réglables, les raccourcis */
.sv-obj3d { display: grid; gap: 12px; margin: 0 0 14px; }
.sv-obj3d-dit { margin: 0; color: var(--sv-texte-2, #C9C2B4); font: 500 14px/1.4 var(--tr-police); }
.sv-obj3d-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sv-obj3d-fig { margin: 0; display: grid; gap: 6px; justify-items: center; }
.sv-obj3d-cadre { position: relative; width: 100%; aspect-ratio: 1 / 2.04; border-radius: 18px; background: radial-gradient(ellipse at 50% 42%, rgba(var(--sv-a-rgb, 224, 174, 85), .1), transparent 70%); }
.sv-obj3d-fig[data-qui="cible"] .sv-obj3d-cadre { box-shadow: inset 0 0 0 1px rgba(var(--sv-a-rgb, 224, 174, 85), .35), 0 0 22px -8px rgba(var(--sv-a-rgb, 224, 174, 85), .6); }
.sv-obj3d-hote, .sv-obj3d-hote canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.sv-obj3d-hote .holo-cadenas { top: 4px !important; right: 4px !important; width: 36px !important; height: 36px !important; font-size: 16px !important; }
.sv-obj3d-fig figcaption { font: 700 13px var(--titre, var(--tr-police)); letter-spacing: .1em; text-transform: uppercase; color: var(--sv-texte-2, #C9C2B4); }
.sv-obj3d-fig[data-qui="cible"] figcaption { color: var(--sv-a, #E0AE55); }
.sv-obj3d-raccourcis { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-obj3d-chip { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(var(--sv-a-rgb, 224, 174, 85), .45); background: rgba(var(--sv-a-rgb, 224, 174, 85), .1); color: var(--sv-texte, #F2EDE4); font: 600 14px var(--tr-police); cursor: pointer; }
.sv-obj3d-chip-sobre { background: transparent; border-color: rgba(255, 255, 255, .16); color: var(--sv-texte-2, #C9C2B4); }
.sv-obj3d-tours { list-style: none; margin: 0; padding: 0; border-radius: 16px; background: var(--sv-carte, #1B1A17); border: 1px solid rgba(255, 255, 255, .06); }
.sv-obj3d-tours li { display: grid; grid-template-columns: minmax(0, 1fr) 40px 74px 40px 64px; align-items: center; gap: 6px; padding: 8px 10px; min-height: 52px; }
.sv-obj3d-tours li + li { border-top: 1px solid rgba(255, 255, 255, .06); }
.sv-obj3d-mot { display: flex; flex-direction: column; font: 600 15px var(--tr-police); min-width: 0; }
.sv-obj3d-mot small { font: 500 11.5px var(--tr-police); color: var(--sv-texte-3, #8E877B); }
.sv-obj3d-pas { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(var(--sv-a-rgb, 224, 174, 85), .4); background: transparent; color: var(--sv-a, #E0AE55); font: 700 20px/1 var(--tr-police); cursor: pointer; }
.sv-obj3d-val { text-align: center; font: 700 16px var(--titre, var(--tr-police)); }
.sv-obj3d-ecart { text-align: right; font: 700 13px var(--tr-police); color: var(--sv-texte-3, #8E877B); display: flex; flex-direction: column; }
.sv-obj3d-ecart.plus, .sv-obj3d-ecart.moins { color: var(--sv-a, #E0AE55); }
.sv-obj3d-ecart small { font: 500 10.5px var(--tr-police); color: var(--sv-texte-3, #8E877B); }
.sv-obj3d-muscles { margin: 0; font: 500 14px/1.45 var(--tr-police); color: var(--sv-texte-2, #C9C2B4); }
.sv-obj3d-muscles b { color: var(--sv-a, #E0AE55); }
.sv-obj3d-note { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--sv-texte-3, #8E877B); }
.sv-obj3d-boite { display: block; width: 100%; }
/* 02/10 · SAISIE SIMPLE : poids + taille en haut, « où mesurer » sous chaque tour, la mesure guidée (un tour à la fois) */
.sv-cta-guide { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; margin: 10px 0 4px; border-radius: 16px;
  background: rgba(var(--sv-a-rgb, 224, 174, 85), .1); border: 1px solid rgba(var(--sv-a-rgb, 224, 174, 85), .45); color: var(--sv-texte, #F2EDE4); cursor: pointer; font: inherit; }
.sv-cta-guide b { display: block; font: 700 15px var(--tr-police); color: var(--sv-a, #E0AE55); }
.sv-cta-guide small { display: block; font: 500 12.5px var(--tr-police); color: var(--sv-texte-2, #C9C2B4); }
.sv-cta-guide-ico { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--sv-a, #E0AE55); background: rgba(var(--sv-a-rgb, 224, 174, 85), .14); }
.sv-cta-guide-ico svg { width: 22px; height: 22px; }
.sv-cta-guide-corps { margin: -4px 0 14px; }
.sv-champ-bloc { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sv-champ-aide { margin: 0 2px; font-size: 11.5px; line-height: 1.35; color: var(--sv-texte-3, #8E877B); }
.sv-guide { display: grid; gap: 10px; }
.sv-guide-pas { margin: 0; font: 700 12px var(--tr-police); letter-spacing: .12em; color: var(--sv-a, #E0AE55); }
.sv-guide-barre { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.sv-guide-barre span { display: block; height: 100%; background: linear-gradient(90deg, var(--sv-a-bas, #9C7A3A), var(--sv-a-vif, #FFC766)); transition: width .25s ease; }
.sv-guide-corps { display: grid; place-items: center; margin: 2px 0; }
.sv-guide-corps .sv-perso { width: 118px; }
.sv-guide .sv-h2 { margin: 0; text-align: center; }
.sv-guide-aide { margin: 0; text-align: center; font: 500 14.5px/1.45 var(--tr-police); color: var(--sv-texte-2, #C9C2B4); }
.sv-champ-grand input { font-size: 30px !important; text-align: center; }
.sv-champ-grand span { text-align: center; }
.sv-guide-boutons { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 8px; }
.sv-guide-boutons .sv-cta { margin: 0; min-height: 48px; }
/* 02/10 · L'OBJECTIF INTELLIGENT : se voir en chemin, le délai réaliste, la progression, le plan */
.sv-obj3d-temps { display: grid; gap: 6px; padding: 10px 12px; border-radius: 16px; background: var(--sv-carte, #1B1A17); border: 1px solid rgba(255, 255, 255, .06); }
.sv-obj3d-curseur { width: 100%; accent-color: var(--sv-a, #E0AE55); height: 28px; }
.sv-obj3d-quand { margin: 0; text-align: center; font: 600 14px var(--tr-police); color: var(--sv-a, #E0AE55); }
.sv-obj3d-chip-poids { background: linear-gradient(180deg, var(--sv-a-vif, #FFC766), var(--sv-a, #E0AE55)); color: var(--sv-sur-a, #1C1406); border-color: transparent; }
.sv-obj3d-prog { display: block; margin-top: 3px; font: 600 10.5px var(--tr-police); color: var(--sv-a, #E0AE55); background: linear-gradient(90deg, rgba(var(--sv-a-rgb, 224, 174, 85), .35) var(--p), rgba(255, 255, 255, .06) var(--p)); border-radius: 4px; padding: 1px 4px; text-align: center; }
.sv-obj3d-plan { display: grid; gap: 8px; padding: 14px; border-radius: 18px; background: var(--sv-carte, #1B1A17); border: 1px solid rgba(var(--sv-a-rgb, 224, 174, 85), .25); }
.sv-obj3d-t { margin: 0; font: 700 14px var(--titre, var(--tr-police)); letter-spacing: .14em; text-transform: uppercase; color: var(--sv-a, #E0AE55); }
.sv-obj3d-rythme, .sv-obj3d-nutri { margin: 0; font: 500 14px/1.45 var(--tr-police); color: var(--sv-texte, #F2EDE4); }
.sv-obj3d-rythme small, .sv-obj3d-nutri small { color: var(--sv-texte-3, #8E877B); }
.sv-obj3d-sous, .sv-obj3d-cherche { margin: 0; font: 500 13px var(--tr-police); color: var(--sv-texte-2, #C9C2B4); }
.sv-obj3d-seance { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 8px; width: 100%; text-align: left; padding: 10px 12px; margin-top: 6px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); color: var(--sv-texte, #F2EDE4); cursor: pointer; font: inherit; }
.sv-obj3d-seance b { font: 600 15px var(--tr-police); } .sv-obj3d-seance small { grid-column: 1; font: 500 12px var(--tr-police); color: var(--sv-texte-3, #8E877B); }
.sv-obj3d-seance span { grid-column: 2; grid-row: 1 / 3; font-size: 22px; color: var(--sv-a, #E0AE55); }
.sv-obj3d-repere { margin: 0; font-size: 12px; line-height: 1.4; color: var(--sv-texte-3, #8E877B); }
/* 02/10 · LES COUCHES du corps (Corps · Muscles · Os) et le MUSCLE TOUCHÉ */
.sv-couches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; margin: 4px auto 6px; max-width: 320px; border-radius: 999px; background: var(--sv-carte, #1B1A17); border: 1px solid rgba(255, 255, 255, .08); }
.sv-couche { min-height: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--sv-texte-2, #C9C2B4); font: 600 14px var(--tr-police); cursor: pointer; }
.sv-couche[aria-checked="true"] { background: linear-gradient(180deg, var(--sv-a-vif, #FFC766), var(--sv-a, #E0AE55)); color: var(--sv-sur-a, #1C1406); }
.sv-couche-dit { margin: 0 4px 12px; text-align: center; font: 500 13px/1.45 var(--tr-police); color: var(--sv-texte-2, #C9C2B4); }
.sv-couche-dit b { color: var(--sv-texte, #F2EDE4); }
.sv-couche-lien { border: 0; background: none; padding: 0 0 0 4px; color: var(--sv-a, #E0AE55); font: 700 13px var(--tr-police); cursor: pointer; min-height: 32px; }
.sv-perso.sv-couche-os .sv-perso-traits { opacity: .18; }
.sv-bulle { position: absolute; z-index: 6; width: 180px; display: grid; gap: 3px; padding: 10px 12px; border-radius: 14px; background: rgba(12, 12, 14, .94); border: 1px solid rgba(var(--sv-a-rgb, 224, 174, 85), .5); box-shadow: 0 12px 28px -8px rgba(0, 0, 0, .8); pointer-events: auto; }
.sv-bulle b { font: 700 15px var(--titre, var(--tr-police)); letter-spacing: .03em; color: var(--sv-a, #E0AE55); }
.sv-bulle small { font: 500 12px/1.35 var(--tr-police); color: var(--sv-texte-2, #C9C2B4); }
.sv-bulle-mal { color: #FF8A7A !important; }
.sv-bulle-actions { display: flex; gap: 6px; margin-top: 4px; }
.sv-bulle-actions button { flex: 1; min-height: 36px; border-radius: 10px; border: 1px solid rgba(var(--sv-a-rgb, 224, 174, 85), .4); background: transparent; color: var(--sv-texte, #F2EDE4); font: 600 12px var(--tr-police); cursor: pointer; }
.sv-bulle { width: 204px; }
.sv-bulle-actions button { white-space: nowrap; padding: 0 6px; font-size: 12.5px; }
/* 02/10 · REVUE DU TOUCHER — empilement par CARTE (une carte glissée de gauche à droite ne passe plus sous l'autre colonne) */
.sv-corps-3d .sv-colonne { z-index: auto; }
.sv-corps-3d .sv-zone { position: relative; z-index: 1; }
.sv-corps-3d .sv-zone.sv-libre { position: absolute; z-index: 3; }
.sv-corps-3d .sv-zone.soulevee { z-index: 5; }
/* le cadenas centré SANS transform (l'effet d'appui global .tap-press remplaçait le translateX : il sautait de 19 px sous le doigt) */
.sv-perso-holo-hote .holo-cadenas { left: calc(50% - 22px) !important; transform: none !important; width: 44px !important; height: 44px !important; }
.sv-obj3d-hote .holo-cadenas, .holo-cadenas.tap-press { transform: none !important; }
.sv-obj3d-hote .holo-cadenas { width: 44px !important; height: 44px !important; }
/* cibles de 44 px au moins */
.sv-obj3d-pas { width: 44px; height: 44px; }
.sv-obj3d-tours li { grid-template-columns: minmax(0, 1fr) 44px 70px 44px 60px; gap: 4px; }
.sv-obj3d-chip, .sv-replacer, .sv-couche, .sv-segments-4 .sv-seg { min-height: 44px; }
.sv-bulle-actions button { min-height: 44px; }
.sv-obj3d-curseur { height: 44px; }
/* l'Objectif pendant que le corps se construit : rien n'est touchable */
.sv-obj3d-attente .sv-obj3d-raccourcis, .sv-obj3d-attente .sv-obj3d-tours { pointer-events: none; opacity: .5; }

/* 02/10 — réveiller les oubliés : le constat devient un geste */
.sv-oublies { margin-top: 10px; width: 100%; min-height: 44px; }
.sv-oublies-liste:empty { display: none; }
.sv-oublies-liste { margin-top: 4px; }
/* 02/10 — le corps qui change : l'ancien s'efface dans le nouveau ; les cartes des tours qui ont bougé s'éclairent */
.sv-corps-entre { animation: sv-corps-entre 1.2s ease both; }
.sv-corps-sort { animation: sv-corps-sort 1.2s ease both; pointer-events: none; z-index: 2; }
@keyframes sv-corps-entre { from { opacity: 0; filter: blur(6px) brightness(1.6); } to { opacity: 1; filter: none; } }
@keyframes sv-corps-sort { from { opacity: 1; } to { opacity: 0; filter: blur(4px); } }
.sv-zone.sv-zone-change { box-shadow: 0 0 0 2px var(--sv-a, #E0AE55), 0 0 22px rgba(224, 174, 85, .45); transition: box-shadow .4s; }
@media (prefers-reduced-motion: reduce) { .sv-corps-entre, .sv-corps-sort { animation: none; } }
.sv-credit-anat { display: block; margin-top: 6px; font: 500 11px/1.3 var(--tr-police); color: var(--sv-texte-3, #8E877B); } .sv-credit-anat a { color: inherit; text-decoration: underline; }
.sv-vigil { color: #FFC24A; } .sv-mal { color: #FF6B5A; }
.sv-leg-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin: 6px 0 2px; font: 500 11.5px/1.3 var(--tr-police); color: var(--sv-texte-2, #C9C2B4); } .sv-leg-liens i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); margin-right: 4px; vertical-align: -1px; box-shadow: 0 0 6px var(--c); }
.sv-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; } .sv-suggestion { min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(224,174,85,.45); background: rgba(224,174,85,.08); color: var(--sv-a, #E0AE55); font: 600 13px var(--tr-police); cursor: pointer; }
.sv-bulle-seances { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; } .sv-bulle-seances:empty { display: none; } .sv-bulle-seances button { text-align: left; min-height: 36px; padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(224,174,85,.35); background: rgba(224,174,85,.08); color: var(--sv-a, #E0AE55); font: 600 12.5px var(--tr-police); }
.sv-dicter { display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .sv-dicter[aria-pressed="true"] { border-color: #FF6B5A; color: #FFB4A9; box-shadow: 0 0 0 3px rgba(255, 107, 90, .18); animation: sv-ecoute 1.6s ease-in-out infinite; } @keyframes sv-ecoute { 50% { box-shadow: 0 0 0 7px rgba(255, 107, 90, .05); } } @media (prefers-reduced-motion: reduce) { .sv-dicter[aria-pressed="true"] { animation: none; } }
.sv-guide-boutons .sv-dicter { grid-column: 1 / -1; order: -1; }
.tr-geste-couches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 8px auto 0; max-width: 360px; padding: 4px; border-radius: 16px; background: rgba(8, 7, 6, .65); border: 1px solid rgba(224, 174, 85, .22); }
.tr-geste-couches button { min-height: 44px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: #D8CFBF; font: 600 14px var(--tr-police, system-ui); }
.tr-geste-couches button[aria-checked="true"] { background: linear-gradient(180deg, rgba(224, 174, 85, .9), rgba(224, 174, 85, .7)); color: #14100A; }
.tr-geste-garde { grid-column: 1 / -1; margin: 4px 6px 2px; font: 600 12.5px/1.35 var(--tr-police, system-ui); color: #FF8A80; text-align: center; }
.sv-bulle-anat { font: italic 500 12px/1.3 var(--tr-police); color: #F2C26B; }
.sv-bulle-att { font: 500 11.5px/1.3 var(--tr-police); color: var(--sv-texte-2, #C9C2B4); }