/* ════════════════════════════════════════════════════════════════════════
   CONSTELLATION FAMILIALE · astrolabe familial vivant (2026-10-02)
   Chargé après le <style> de la page ; règles destructives limitées à body.afx-on.
   Nuit profonde · or subtil · violet cosmique · bleu astral · halos doux (pas de néon).
   Connexions : résonance = or · complémentarité = cyan · zone d'ajustement = violet-rose.
   ════════════════════════════════════════════════════════════════════════ */
:root{
  --afx-res:#e9c66f; --afx-comp:#6fd2e8; --afx-fric:#b4659e;
  --afx-card:rgba(10,10,32,.72); --afx-line:rgba(160,130,230,.24); --afx-gold-line:rgba(226,193,111,.28);
}
.afx-ic{width:1.15em;height:1.15em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em}

/* ── fond & entête compacts : la constellation est le cœur ── */
body.afx-on{background:radial-gradient(70% 50% at 50% 0%,rgba(100,76,200,.22),transparent 70%),linear-gradient(180deg,#05051a,#09051a 60%,#05051a) fixed}
body.afx-on .wrap{padding-top:calc(.9rem + env(safe-area-inset-top,0px))}
body.afx-on .topline{margin-bottom:.4rem}
body.afx-on h1{font-size:1.05rem;letter-spacing:.34rem;margin:.1rem 0 .15rem;text-transform:uppercase;color:var(--gold-l)}
body.afx-on .subtitle{font-size:.88rem;margin:0 auto .7rem;opacity:.85}
.afx-old-head,.afx-old-toolbar,.afx-old-tip{display:none !important}

/* ── la scène ── */
#afx-stage{margin:.2rem 0 1.4rem;width:min(1240px,calc(100vw - 1rem));position:relative;left:50%;transform:translateX(-50%)}
body.afx-on #constellation-wrap{height:clamp(420px,76vh,820px);padding:0;border-radius:24px;border:1px solid var(--afx-line);
  background:radial-gradient(90% 80% at 50% 45%,rgba(54,40,120,.40),rgba(8,7,28,.86) 70%),#06061c;
  box-shadow:0 0 70px rgba(100,76,200,.14),inset 0 0 90px rgba(0,0,0,.4)}
body.afx-on #constellation-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}
body.afx-on #constellation-bg-svg{z-index:0}
#constellation-svg.afx-smooth{transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.afx-star{fill:var(--gold-l)}
.afx-star.tw{animation:afxTwinkle 5.5s ease-in-out infinite}
.afx-bg-halo{animation:afxBreathe 12s ease-in-out infinite}
.afx-astrolabe{animation:afxSpin 600s linear infinite;transform-origin:300px 255px}
@keyframes afxTwinkle{0%,100%{opacity:.15}50%{opacity:.75}}
@keyframes afxBreathe{0%,100%{opacity:.62}50%{opacity:1}}
@keyframes afxSpin{to{transform:rotate(360deg)}}
@keyframes afxLineIn{from{opacity:0}to{opacity:var(--base-op,.5)}}

/* ── astres ── */
.afx-node{cursor:pointer;outline:none}
.afx-body{transition:transform .25s ease;animation:afxDrift 11s ease-in-out infinite alternate;animation-delay:var(--afx-d,0s)}
.afx-node:hover .afx-body,.afx-node.afx-hot .afx-body{transform:scale(1.1)}
.afx-halo{animation:afxBreathe 8s ease-in-out infinite;animation-delay:var(--afx-d,0s)}
.afx-rays{animation:afxSpin 120s linear infinite}
@keyframes afxDrift{from{translate:-1.2px -.8px}to{translate:1.3px 1px}}
.afx-name{font-family:'Cinzel',serif;font-weight:600;font-size:10.5px;fill:#f0e6c8;paint-order:stroke;stroke:#05051a;stroke-width:3.2px;stroke-linejoin:round}
.afx-role{font-family:'Crimson Text',serif;font-style:italic;font-size:9px;fill:#c9bd9c;paint-order:stroke;stroke:#05051a;stroke-width:2.6px;stroke-linejoin:round}
.afx-ring-label,.afx-gen-label{font-family:'Crimson Text',serif;font-style:italic;font-size:8.5px;fill:rgba(226,200,140,.55)}
.afx-gen-label{font-size:10px;fill:rgba(226,200,140,.7);letter-spacing:.04rem}

/* ── connexions ── */
.afx-link .afx-hit{cursor:pointer}
.afx-link .afx-vis{transition:stroke-width .25s,opacity .25s}
.afx-link:hover .afx-vis{opacity:1 !important;stroke-width:3.2}
.afx-res .afx-vis{opacity:var(--op,.7);animation:afxPulse 5.5s ease-in-out infinite}
@keyframes afxPulse{0%,100%{opacity:calc(var(--op,.7) * .62)}50%{opacity:var(--op,.7)}}
.afx-lit .afx-vis{opacity:0}

/* ── barre d'outils flottante ── */
.afx-toolbar{position:absolute;left:50%;bottom:.9rem;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:.15rem;
  padding:.3rem .45rem;border-radius:999px;border:1px solid var(--afx-line);background:rgba(8,8,30,.82);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 10px 34px rgba(0,0,0,.45);max-width:calc(100% - 1rem)}
.afx-tool{position:relative;width:42px;height:42px;border-radius:50%;border:1px solid transparent;background:none;color:var(--dim);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem;transition:background .2s,color .2s,border-color .2s}
.afx-tool:hover{color:var(--gold-l);background:rgba(154,125,228,.16)}
.afx-tool.on{color:#fff3d4;border-color:rgba(226,193,111,.5);background:rgba(154,125,228,.26)}
.afx-tool::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(4px);white-space:nowrap;
  padding:.28rem .65rem;border-radius:8px;background:rgba(8,8,30,.95);border:1px solid var(--afx-line);color:var(--gold-l);
  font-family:'Cinzel',serif;font-size:.6rem;letter-spacing:.08rem;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
@media(hover:hover){.afx-tool:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}}
.afx-tool-sep{width:1px;height:22px;background:var(--afx-line);margin:0 .2rem}
.afx-more{position:relative}
.afx-more-menu{display:none;position:absolute;bottom:calc(100% + 10px);right:0;min-width:210px;padding:.4rem;border-radius:14px;border:1px solid var(--afx-line);
  background:rgba(8,8,30,.96);flex-direction:column;gap:.2rem}
.afx-more-menu.open{display:flex}
.afx-more-menu button{background:none;border:0;color:var(--text);text-align:left;padding:.55rem .7rem;border-radius:9px;cursor:pointer;font-family:'Crimson Text',serif;font-size:.98rem}
.afx-more-menu button:hover{background:rgba(154,125,228,.16)}

/* ── haut de scène : onglets de vue, statut, indicateur ── */
.afx-top{position:absolute;top:.8rem;left:.8rem;right:.8rem;z-index:5;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;pointer-events:none}
.afx-top > *{pointer-events:auto}
.afx-top .view-tabs{margin:0;gap:.25rem;padding:.25rem;border-radius:999px;border:1px solid var(--afx-line);background:rgba(8,8,30,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.afx-top .view-tab{border:1px solid transparent;padding:.34rem .85rem;font-size:.6rem}
.afx-top .view-tab.active{border-color:rgba(226,193,111,.45);background:rgba(154,125,228,.26);color:#fff3d4}
.afx-top .lineage-filters{margin:0}
.afx-top .save-indicator{margin-left:auto;font-size:.66rem}
.afx-status{display:none;align-items:center;gap:.6rem;padding:.3rem .4rem .3rem .9rem;border-radius:999px;border:1px solid var(--afx-gold-line);background:rgba(226,193,111,.08);
  font-family:'Crimson Text',serif;font-size:.95rem;color:var(--gold-l)}
.afx-status.show{display:inline-flex}
.afx-status button{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--afx-line);border-radius:999px;background:rgba(154,125,228,.14);color:var(--purple-l);
  padding:.28rem .7rem;cursor:pointer;font-family:'Cinzel',serif;font-size:.58rem;letter-spacing:.08rem}
.afx-hint{position:absolute;top:3.7rem;left:50%;transform:translateX(-50%);z-index:4;padding:.4rem 1rem;border-radius:999px;border:1px solid var(--afx-line);
  background:rgba(8,8,30,.82);color:var(--gold-l);font-family:'Crimson Text',serif;font-size:1rem;opacity:0;pointer-events:none;transition:opacity .3s;max-width:90%;text-align:center}
.afx-hint.show{opacity:1}
body.afx-relmode #constellation-wrap{border-color:rgba(226,193,111,.5)}
.afx-tip{position:absolute;z-index:6;transform:translate(-50%,calc(-100% - 12px));padding:.55rem .85rem;border-radius:12px;border:1px solid var(--afx-gold-line);
  background:rgba(8,8,30,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 26px rgba(0,0,0,.45);
  display:none;flex-direction:column;gap:.1rem;pointer-events:none;text-align:left;min-width:120px}
.afx-tip.show{display:flex}
.afx-tip strong{font-family:'Cinzel',serif;font-size:.8rem;color:var(--gold-l)}
.afx-tip em{font-family:'Crimson Text',serif;font-size:.92rem;color:var(--purple-l);margin-bottom:.15rem}
.afx-tip span{font-family:'Crimson Text',serif;font-size:.95rem;color:var(--text)}
.afx-legend{position:absolute;right:.9rem;bottom:4.6rem;z-index:6;width:min(320px,calc(100% - 1.8rem));padding:.9rem 1rem;border-radius:16px;border:1px solid var(--afx-gold-line);
  background:rgba(8,8,30,.95);display:none;font-family:'Crimson Text',serif;font-size:.98rem;color:var(--dim);line-height:1.5}
.afx-legend.open{display:block}
.afx-legend p{margin:0 0 .5rem}
.afx-legend b{color:var(--gold-l);font-weight:600}
.afx-legend-x{position:absolute;top:.4rem;right:.4rem;width:30px;height:30px;border:0;background:none;color:var(--dim);cursor:pointer}
.afx-legend-k i{display:inline-block;width:9px;height:9px;border-radius:50%;margin:0 .25rem 0 .4rem;vertical-align:baseline}

/* ── tiroirs : Relations · Équilibre · Motifs · Ma famille ── */
.afx-drawer{margin:.7rem 0;border:1px solid var(--afx-line);border-radius:18px;background:var(--afx-card);overflow:hidden}
.afx-drawer-head{width:100%;display:flex;align-items:center;gap:.9rem;min-height:62px;padding:.8rem 1.2rem;background:none;border:0;cursor:pointer;color:var(--text);text-align:left;font-family:inherit}
.afx-drawer-t{font-family:'Cinzel',serif;font-weight:600;font-size:.82rem;letter-spacing:.24rem;text-transform:uppercase;color:var(--gold-l);white-space:nowrap}
.afx-drawer-s{flex:1;min-width:0;font-family:'Crimson Text',serif;font-style:italic;font-size:1rem;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.afx-chev{margin-left:auto;color:var(--dim);transition:transform .25s}
.afx-drawer.afx-open .afx-chev{transform:rotate(180deg)}
.afx-drawer-body{display:none;padding:0 1.2rem 1.3rem}
.afx-drawer.afx-open .afx-drawer-body{display:block;animation:afxFade .35s ease}
.afx-drawer-oldhead{display:none !important}
@keyframes afxFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.afx-lead{font-family:'Crimson Text',serif;font-size:1.05rem;color:var(--dim);margin:0 0 .5rem}
.afx-more-text{margin:.2rem 0 .9rem}
.afx-more-text summary{cursor:pointer;color:var(--purple-l);font-family:'Crimson Text',serif;font-size:.98rem;list-style:none}
.afx-more-text summary::-webkit-details-marker{display:none}
.afx-more-text[open] summary{margin-bottom:.5rem}
.afx-drawer .section-head{margin-bottom:.6rem}

/* ── mandala des éléments ── */
.afx-mandala-row{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;justify-content:center}
.afx-mandala-svg{width:min(360px,100%);height:auto;flex:0 0 auto}
.afx-m-el{font-family:'Cinzel',serif;font-size:7.4px;letter-spacing:.14rem;text-anchor:middle;opacity:.9}
.afx-m-name{font-family:'Crimson Text',serif;font-size:8.5px;fill:#f0e6c8;paint-order:stroke;stroke:#05051a;stroke-width:2.4px}
.afx-m-c{font-family:'Cinzel',serif;font-size:7.8px;fill:var(--gold-l);letter-spacing:.06rem}
.afx-m-c2{font-family:'Crimson Text',serif;font-style:italic;font-size:8px;fill:var(--dim)}
.afx-mlight{cursor:pointer}
.afx-mlight:focus-visible circle:nth-child(2){stroke-width:2}
.afx-mandala-side{flex:1 1 240px;min-width:220px}
.afx-pills{display:flex;gap:.3rem;margin-bottom:.8rem;flex-wrap:wrap}
.afx-pill{border:1px solid var(--afx-line);border-radius:999px;background:none;color:var(--dim);padding:.34rem .9rem;cursor:pointer;font-family:'Cinzel',serif;font-size:.6rem;letter-spacing:.1rem}
.afx-pill.on{border-color:rgba(226,193,111,.5);background:rgba(154,125,228,.22);color:#fff3d4}
.afx-reading{font-family:'Crimson Text',serif;font-size:1.2rem;line-height:1.45;color:var(--text);margin:0 0 .6rem}
.afx-fine{font-family:'Crimson Text',serif;font-style:italic;font-size:.95rem;color:var(--dim-2);margin:0}
.afx-wheel-detail{margin-top:1rem}

/* ── relation : trois cartes ── */
.afx-rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.7rem;margin:.9rem 0}
.afx-rcard{border-radius:14px;padding:.9rem 1rem;border:1px solid var(--afx-line);background:rgba(10,10,32,.6)}
.afx-rcard h4{display:flex;align-items:center;gap:.5rem;font-family:'Cinzel',serif;font-size:.74rem;letter-spacing:.12rem;text-transform:uppercase;margin:0 0 .6rem}
.afx-rcard h4 i{font-style:normal;font-size:1rem}
.afx-rcard.res{border-color:rgba(233,198,111,.35)} .afx-rcard.res h4{color:var(--afx-res)}
.afx-rcard.comp{border-color:rgba(111,210,232,.32)} .afx-rcard.comp h4{color:var(--afx-comp)}
.afx-rcard.fric{border-color:rgba(180,101,158,.35)} .afx-rcard.fric h4{color:#d79bc6}
.afx-rcard .summary-item{border-left-color:rgba(255,255,255,.12)}

/* ── fiches (panneau latéral + feuilles) ── */
body.afx-on .member-panel{background:rgba(9,8,32,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-left:1px solid var(--afx-gold-line)}
body.afx-on .btn{border-radius:999px}
.afx-explore-btn{margin-top:.7rem}

/* ── assistant « Ajouter un astre » ── */
.afx-wizard{max-width:460px}
.afx-steps{display:flex;justify-content:center;gap:.5rem;margin:-.3rem 0 .5rem}
.afx-dot{width:9px;height:9px;border-radius:50%;border:1px solid var(--afx-gold-line);background:none;transition:all .3s}
.afx-dot.done{background:rgba(226,193,111,.45)}
.afx-dot.on{background:var(--gold-l);box-shadow:0 0 10px rgba(226,193,111,.6);transform:scale(1.25)}
.afx-step-sub{text-align:center;font-family:'Crimson Text',serif;font-size:1.02rem;color:var(--dim);margin:0 0 1rem}
.afx-step-sub b{font-family:'Cinzel',serif;font-weight:600;font-size:.78rem;letter-spacing:.14rem;text-transform:uppercase;color:var(--gold-l)}
.afx-step-pane{display:none}
.afx-step-pane.on{display:block;animation:afxFade .3s ease}
.afx-recap{text-align:center;padding:1rem .5rem;display:flex;flex-direction:column;gap:.3rem;align-items:center}
.afx-recap-star{font-size:2rem;color:var(--gold-l);text-shadow:0 0 22px rgba(226,193,111,.6);animation:afxBreathe 4s ease-in-out infinite}
.afx-recap strong{font-family:'Cinzel',serif;font-size:1.05rem;color:var(--gold-l)}
.afx-recap em{color:var(--purple-l);font-size:1rem}
.afx-recap span{font-family:'Crimson Text',serif;font-size:1.02rem;color:var(--dim)}
.afx-wiz-actions{justify-content:space-between}

/* ── Harmonie ── */
.afx-hp{margin:0 0 .8rem !important;padding-left:0 !important}
.afx-hp::before{display:none !important}
.afx-hp b{display:block;font-family:'Cinzel',serif;font-size:.7rem;letter-spacing:.22rem;text-transform:uppercase;color:var(--gold-l);margin-bottom:.15rem}
body.afx-on .harmony-overlay{background:radial-gradient(70% 60% at 50% 35%,#0b0830,#02020c 80%);justify-content:flex-start;padding-top:max(3vh,env(safe-area-inset-top,0px))}
body.afx-on #harmony-svg{width:min(94vw,48vh,640px);height:min(94vw,48vh,640px)}
body.afx-on .harmony-caption{position:static;transform:none;margin-top:.6rem;width:min(92vw,520px)}
.afx-hline{opacity:0;animation:afxLineIn 2.4s ease var(--d,1s) forwards,harmonyBreathe 6.5s ease-in-out calc(var(--d,1s) + 2.4s) infinite}
@media (prefers-reduced-motion: reduce){.afx-hline{opacity:var(--base-op,.5);animation:none}}

/* ── barre basse mobile ── */
.afx-bottombar{display:none}
@media(max-width:760px){
  .afx-bottombar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;justify-content:space-around;padding:.3rem .4rem calc(.3rem + env(safe-area-inset-bottom,0px));
    background:rgba(7,7,26,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--afx-line)}
  .afx-bottombar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:.15rem;min-height:52px;background:none;border:0;color:var(--dim);cursor:pointer;
    font-family:'Cinzel',serif;font-size:.54rem;letter-spacing:.08rem;text-transform:uppercase}
  .afx-bottombar button .afx-ic{width:1.45em;height:1.45em}
  .afx-bottombar button.on{color:var(--gold-l)}
  body.afx-on .wrap{padding-bottom:calc(5.2rem + env(safe-area-inset-bottom,0px))}
  body.afx-on #constellation-wrap{height:clamp(380px,112vw,600px);border-radius:18px}
  .afx-tool{width:40px;height:40px}
  .afx-toolbar{bottom:.6rem}
  .afx-top .view-tab{padding:.32rem .65rem}
  .afx-drawer-head{padding:.7rem .9rem;gap:.6rem}
  .afx-drawer-t{letter-spacing:.14rem;font-size:.74rem}
  .afx-drawer-s{display:none}
  .afx-drawer-body{padding:0 .9rem 1.1rem}
}

/* ── mouvement réduit ── */
@media (prefers-reduced-motion: reduce){
  .afx-star.tw,.afx-bg-halo,.afx-astrolabe,.afx-body,.afx-halo,.afx-rays,.afx-res .afx-vis{animation:none !important}
  .afx-res .afx-vis{opacity:var(--op,.7)}
  .afx-drawer.afx-open .afx-drawer-body,.afx-step-pane.on{animation:none}
}

/* ── feuilles (relation, fiche) : plus larges sur ordinateur, défilement sombre, radar sans rognage ── */
.ps-sheet{color-scheme:dark}
#relation-sheet-content{overflow-x:hidden}
.radar-wrap{padding:1rem .4rem}
.radar-wrap svg{overflow:visible;max-width:400px;margin:0 auto;display:block}
@media(min-width:768px){#relation-sheet.ps-sheet{width:min(720px,94vw)}}

/* ════════════════════════════════════════════════════════════════════════
   PLAN UX (2 oct.) : accueil, hiérarchie sobre, mobile, raisons de revenir
   ════════════════════════════════════════════════════════════════════════ */
:root{--afx-bb:0px}
@media(max-width:760px){:root{--afx-bb:62px}}

/* places fantômes : invitation douce à ajouter les premiers proches */
.afx-ghost{cursor:pointer;outline:none}
.afx-ghost-c{animation:afxGhost 3.6s ease-in-out infinite}
.afx-ghost:hover .afx-ghost-c{fill:rgba(226,193,111,.16);stroke:rgba(226,193,111,.95)}
.afx-ghost-t{fill:rgba(232,213,163,.82) !important}
@keyframes afxGhost{0%,100%{opacity:.55}50%{opacity:1}}
.afx-arc{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid transparent;vertical-align:-2px;margin-right:.2rem}
.afx-arc.l{border-left-color:#8fb0ff}.afx-arc.r{border-right-color:#e2c16f}

/* cartes flottantes (aide, à explorer) */
.afx-card{border-radius:16px;border:1px solid var(--afx-gold-line);background:rgba(8,8,30,.93);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 14px 36px rgba(0,0,0,.5);padding:.85rem 1rem;color:var(--text)}
.afx-card-k{font-family:'Cinzel',serif;font-size:.58rem;letter-spacing:.24rem;text-transform:uppercase;color:var(--gold);margin:0 0 .3rem}
.afx-card-t{font-family:'Crimson Text',serif;font-size:1.12rem;line-height:1.35;color:var(--gold-l);margin:0 0 .25rem}
.afx-card-s{font-family:'Crimson Text',serif;font-style:italic;font-size:.98rem;line-height:1.4;color:var(--dim);margin:0 0 .6rem}
.afx-link-btn{background:none;border:0;color:var(--purple-l);cursor:pointer;font-family:'Crimson Text',serif;font-size:1rem;text-decoration:underline;text-underline-offset:3px;padding:.3rem .2rem;min-height:40px}
.afx-x{width:40px;height:40px;border-radius:50%;border:1px solid transparent;background:none;color:var(--dim);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.afx-x:hover{color:#fff;background:rgba(154,125,228,.16)}
.afx-coach{position:absolute;left:50%;bottom:5.4rem;transform:translateX(-50%);z-index:7;width:min(380px,calc(100% - 1.4rem))}
.afx-coach-actions{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem}

/* « À explorer » */
.afx-today{position:absolute;top:3.8rem;left:.8rem;z-index:5;max-width:calc(100% - 1.6rem)}
.afx-today[hidden]{display:none}
.afx-today-pill{display:inline-flex;align-items:center;gap:.45rem;min-height:40px;padding:.3rem .9rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--afx-gold-line);background:rgba(8,8,30,.78);color:var(--gold-l);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-family:'Cinzel',serif;font-size:.6rem;letter-spacing:.14rem;text-transform:uppercase}
.afx-today-pill.pulse{animation:afxPill 3.4s ease-in-out infinite}
@keyframes afxPill{0%,100%{box-shadow:0 0 0 0 rgba(226,193,111,0)}50%{box-shadow:0 0 0 6px rgba(226,193,111,.12)}}
.afx-today-card{display:none;margin-top:.5rem;width:min(330px,calc(100vw - 2.2rem));max-height:56vh;overflow-y:auto}
.afx-today.open .afx-today-card{display:block;animation:afxFade .3s ease}
.afx-sug,.afx-welcome{padding-bottom:.6rem}
.afx-welcome{border-bottom:1px solid var(--afx-line);margin-bottom:.7rem}
.afx-steps-list{list-style:none;margin:.3rem 0 0;padding:0;display:flex;flex-direction:column;gap:.3rem}
.afx-steps-list li span,.afx-steps-list li button{display:block;width:100%;text-align:left;padding:.45rem .7rem;border-radius:10px;font-family:'Crimson Text',serif;font-size:1.02rem}
.afx-steps-list li.done span{color:#72d9c6;background:rgba(114,217,198,.08)}
.afx-steps-list li.lock span{color:var(--dim-2);border:1px dashed var(--afx-line)}
.afx-steps-list li.now button{cursor:pointer;color:#fff3d4;border:1px solid rgba(226,193,111,.5);background:rgba(154,125,228,.2);min-height:44px}
.afx-resume{display:block;margin-top:.2rem;background:none;border:0;color:var(--purple-l);cursor:pointer;font-family:'Crimson Text',serif;font-size:1rem;text-decoration:underline;text-underline-offset:3px;min-height:40px;text-align:left}

/* recherche d'un astre (grandes constellations) */
.afx-search{position:relative}
.afx-search[hidden]{display:none}
.afx-search .afx-tool{border:1px solid var(--afx-line);background:rgba(8,8,30,.7)}
.afx-search-box{display:none;position:absolute;top:calc(100% + 6px);right:0;width:min(250px,calc(100vw - 3rem));padding:.5rem;border-radius:14px;border:1px solid var(--afx-gold-line);background:rgba(8,8,30,.96)}
.afx-search.open .afx-search-box{display:block}
.afx-search-box input{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--afx-line);border-radius:10px;color:var(--text);padding:.6rem .8rem;font-family:'Crimson Text',serif;font-size:1.05rem}
.afx-search-box ul{list-style:none;margin:.4rem 0 0;padding:0;max-height:220px;overflow-y:auto}
.afx-search-box li button{width:100%;display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;background:none;border:0;color:var(--text);cursor:pointer;padding:.55rem .6rem;border-radius:9px;min-height:44px;text-align:left;font-family:'Crimson Text',serif;font-size:1.02rem}
.afx-search-box li button:hover{background:rgba(154,125,228,.16)}
.afx-search-box li em{color:var(--purple-l);font-size:.9rem}
.afx-search-box li.none{padding:.5rem .6rem;color:var(--dim-2);font-style:italic}
.afx-top .lineage-pill{padding:.3rem .8rem;font-size:.58rem;background:rgba(8,8,30,.7)}

/* aperçu d'astre + demi-panneau de relation (mobile) : la constellation reste visible au-dessus */
.afx-peek,.afx-rel{position:fixed;left:.5rem;right:.5rem;bottom:calc(var(--afx-bb) + env(safe-area-inset-bottom,0px) + .5rem);z-index:95;
  border-radius:20px;border:1px solid var(--afx-gold-line);background:rgba(8,8,30,.96);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 -10px 40px rgba(0,0,0,.55);transform:translateY(130%);transition:transform .32s cubic-bezier(.22,.61,.36,1);visibility:hidden}
.afx-peek.show,.afx-rel.show{transform:none;visibility:visible}
@media(min-width:860px){.afx-peek,.afx-rel{display:none !important}}
.afx-peek{padding:.9rem 1rem 1rem}
.afx-peek .afx-x{position:absolute;top:.3rem;right:.3rem}
.afx-peek-main{display:flex;align-items:center;gap:.8rem;padding-right:2.4rem}
.afx-peek-av{width:52px;height:52px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border:2px solid var(--gold);
  background:radial-gradient(circle at 35% 30%,#fffaf0,#d9c89a);color:#170f33;font-size:1.5rem;font-family:'Segoe UI Symbol','Noto Sans Symbols 2','DejaVu Sans',serif}
.afx-peek-t{display:flex;flex-direction:column;gap:.05rem;min-width:0}
.afx-peek-t strong{font-family:'Cinzel',serif;font-size:1rem;color:var(--gold-l)}
.afx-peek-t em{font-family:'Crimson Text',serif;font-size:1rem;color:var(--purple-l)}
.afx-peek-t span{font-family:'Crimson Text',serif;font-size:1rem;color:var(--text)}
.afx-peek-actions{display:flex;gap:.5rem;margin-top:.8rem}
.afx-peek-actions .btn{flex:1;min-height:46px}
.afx-rel{max-height:52dvh;display:flex;flex-direction:column;transition:transform .32s cubic-bezier(.22,.61,.36,1),max-height .3s ease}
.afx-rel.full{max-height:calc(100dvh - var(--afx-bb) - 4.5rem)}
.afx-rel-head{display:flex;align-items:center;gap:.2rem;padding:.55rem .5rem .3rem 1rem;position:relative}
.afx-rel-grip{position:absolute;top:6px;left:50%;width:38px;height:4px;border-radius:4px;background:rgba(255,255,255,.2);transform:translateX(-50%)}
.afx-rel-head strong{flex:1;font-family:'Cinzel',serif;font-size:.85rem;color:var(--gold-l);margin-top:.5rem}
.afx-rel.full .afx-rel-exp .afx-ic{transform:rotate(180deg)}
.afx-rel-body{overflow-y:auto;padding:0 1rem 1rem;-webkit-overflow-scrolling:touch}

/* mobile : moins de boutons, zones tactiles généreuses */
@media(max-width:760px){
  #afx-btn-harm{display:none}
  .afx-tool{width:46px;height:46px}
  .afx-toolbar{gap:.25rem;padding:.3rem .5rem}
  .afx-coach{bottom:5.6rem}
}
.afx-hint{top:auto;bottom:4.9rem}
@media (prefers-reduced-motion: reduce){.afx-ghost-c,.afx-today-pill.pulse{animation:none}}

.afx-peek-hint{font-family:'Crimson Text',serif;font-style:italic;font-size:.98rem;color:var(--dim);margin:.55rem 0 0}
body.afx-peek-on .afx-hint{display:none}
@media(max-width:760px){
  body.afx-on .afx-top .lineage-filters{display:none !important}
  body.afx-on .afx-top.chips-open .lineage-filters{display:flex !important;width:100%}
  .afx-top{gap:.4rem}
  .afx-search{margin-left:auto}
  .afx-today{top:3.7rem}
  .afx-hint{font-size:.92rem;max-width:92%}
}

/* ════════════════════════════════════════════════════════════════════════
   ARBRE COSMIQUE FAMILIAL — titre, arbre décoratif, lumière, hiérarchie
   (couche purement visuelle : aucune position, aucun clic, aucun calcul)
   ════════════════════════════════════════════════════════════════════════ */

/* 1 · titre principal */
body.afx-on .topline{margin-bottom:.2rem}
body.afx-on h1{display:flex;align-items:center;justify-content:center;gap:clamp(.5rem,1.6vw,1.1rem);flex-wrap:wrap;
  font-family:'Cinzel',serif;font-weight:600;font-size:clamp(2.2rem,4.5vw,4rem);line-height:1.12;letter-spacing:.18em;text-transform:uppercase;
  color:#f7e2a0;margin:.6rem auto .5rem;padding:0 .4rem;text-align:center;
  text-shadow:0 0 14px rgba(240,207,122,.6),0 0 46px rgba(230,198,106,.32),0 0 90px rgba(139,92,246,.3)}
body.afx-on h1 .afx-h1-t{display:inline-block;max-width:100%;text-wrap:balance}
@media(min-width:900px){body.afx-on h1 .afx-h1-t{white-space:nowrap}}
body.afx-on h1 .afx-h1-star{font-size:.42em;color:#e6c66a;opacity:.85;animation:afxHalo 6s ease-in-out infinite}
body.afx-on h1::before,body.afx-on h1::after{content:'';flex:0 0 clamp(24px,7vw,110px);height:1px;opacity:.7;
  background:linear-gradient(90deg,transparent,rgba(230,198,106,.9))}
body.afx-on h1::after{background:linear-gradient(270deg,transparent,rgba(230,198,106,.9))}
body.afx-on .subtitle{font-family:'Crimson Text',Georgia,serif;font-style:italic;font-size:clamp(1rem,1.7vw,1.3rem);color:#e8dcb8;opacity:.92;margin:.1rem auto 1.4rem;max-width:none}

/* 5 · lumière : halo central, étoiles plus présentes, cercles plus lisibles */
body.afx-on #constellation-wrap{
  background:radial-gradient(circle at 50% 48%,rgba(120,80,255,.18),rgba(15,10,40,.05) 50%,transparent 75%),
             radial-gradient(90% 80% at 50% 45%,rgba(72,54,152,.52),rgba(10,9,34,.9) 72%),#07061f;
  border-color:rgba(160,130,230,.32);box-shadow:0 0 90px rgba(120,80,255,.2),inset 0 0 90px rgba(0,0,0,.34)}
.afx-star{fill:#fbefc4}
.afx-node .afx-body > circle:not(.afx-halo){filter:drop-shadow(0 0 4px rgba(246,231,180,.45))}
.afx-ring-label{fill:rgba(236,214,156,.7)}
.afx-halo{opacity:var(--h,.7);animation:afxHalo 6s ease-in-out infinite;animation-delay:var(--afx-d,0s)}
@keyframes afxHalo{0%,100%{opacity:calc(var(--h,.7) * .6)}50%{opacity:var(--h,.7)}}
.afx-node.afx-self .afx-body > circle:not(.afx-halo){filter:drop-shadow(0 0 14px rgba(240,207,122,.95)) drop-shadow(0 0 4px rgba(255,240,190,.8))}

/* 2-4 · arbre cosmique (branches en haut, tronc derrière « Moi », racines en bas) */
/* couche fixe : jamais de transform, indépendante du pan/zoom ; plus fine, plus transparente */
#afx-tree-svg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible;opacity:.28;transform:none !important}
#afx-tree-svg path{stroke-width:.5px}
#afx-tree-svg .fine path{stroke-width:.3px}
#afx-tree-svg line{stroke-width:.6px}
#afx-tree-svg .tw{animation:afxTwinkle 7s ease-in-out infinite}
.afx-tree-lbl{font-family:'Cinzel',serif;font-size:7px;letter-spacing:.34em;fill:rgba(242,217,140,.42)}
.afx-dust{animation:afxDust 24s ease-in-out infinite alternate}
@keyframes afxDust{from{transform:translate(-6px,3px)}to{transform:translate(8px,-5px)}}

/* 10 · tiroirs du bas : sobres, mais plus lumineux */
.afx-drawer{border-color:rgba(226,193,111,.36);background:rgba(8,8,32,.72);margin-top:.9rem;transition:border-color .25s,box-shadow .25s}
.afx-drawer:hover{border-color:rgba(226,193,111,.6);box-shadow:0 0 28px rgba(139,92,246,.16)}
.afx-drawer-t{color:#f7e2a0;letter-spacing:.06em;display:inline-flex;align-items:center;gap:.6rem}
.afx-drawer-t::before{content:'✦';font-size:.85em;color:#e6c66a;opacity:.85}

/* 11 · hiérarchie : la constellation prend la place */
#afx-stage{width:min(1200px,92vw)}
body.afx-on #constellation-wrap{height:clamp(480px,82vh,880px)}

/* mobile : décoration réduite, rien ne gêne les doigts */
@media(max-width:760px){
  body.afx-on h1{font-size:clamp(1.7rem,8vw,2.1rem);letter-spacing:.1em}
  body.afx-on h1::before,body.afx-on h1::after{flex-basis:18px}
  #afx-tree-svg{opacity:.2}
  #afx-tree-svg .fine{display:none}
  .afx-tree-lbl{display:none}
  #afx-stage{width:calc(100vw - 1rem)}
  body.afx-on #constellation-wrap{height:clamp(400px,118vw,620px)}
}
@media (prefers-reduced-motion: reduce){
  .afx-dust,body.afx-on h1 .afx-h1-star,#afx-tree-svg .tw{animation:none}
  .afx-halo{animation:none;opacity:var(--h,.7)}
}