/* Extrait de progression.html — sorti du HTML pour etre mis en cache
independamment de la page. Charge a la meme position, donc
cascade inchangee. */
:root{
--cream:#E3E3C4; --c50:rgba(227,227,196,.5); --c20:rgba(227,227,196,.2);
--ink:#060A10;
--st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{font-family:'Afacad',system-ui,sans-serif;color:var(--cream);background:#04070B;min-height:100vh}
button{font-family:inherit;color:inherit}
a{color:inherit}
img{max-width:100%;display:block}
/* Fond de page : le meme ciel etoile que le splash, assombri pour que le
texte reste lisible — le meme traitement que la fiche constellation. */
#pagebg{position:fixed;inset:0;z-index:0;pointer-events:none}
#pagebg img{width:100%;height:100%;object-fit:cover;object-position:center bottom;
opacity:0;transition:opacity .6s ease}
#pagebg img.ready{opacity:1}
#pagebg .ov{position:absolute;inset:0;background:rgba(0,0,0,.55)}
/* ---------- en-tete ---------- */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:16px;
padding:calc(14px + var(--st)) 26px 14px;
background:linear-gradient(180deg,rgba(3,6,10,.96),rgba(3,6,10,.62));
border-bottom:1px solid var(--c20);backdrop-filter:blur(12px)}
.back{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
border:1px solid var(--c50);border-radius:999px;padding:9px 16px;font-size:11.5px;
font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.8;
transition:opacity .2s,background .2s;white-space:nowrap}
.back:hover{opacity:1;background:rgba(227,227,196,.08)}
.top .sp{flex:1}
.top .where{font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.45;white-space:nowrap}
/* ---------- contenu ---------- */
.wrap{position:relative;z-index:1;max-width:560px;margin:0 auto;padding:48px 26px calc(80px + var(--sb));
display:flex;flex-direction:column;align-items:center;text-align:center}
/* ---------- anneau ---------- */
.ring-zone{position:relative;width:min(340px,74vw);height:min(340px,74vw);flex:none;margin-top:8px}
.ring-zone svg{width:100%;height:100%;overflow:visible}
.ring-deco{transform-origin:170px 170px;animation:ring-spin 34s linear infinite}
@keyframes ring-spin{to{transform:rotate(360deg)}}
#ring-fill{transition:stroke-dashoffset 1s cubic-bezier(.3,.8,.3,1)}
.ring-center{
position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
/* 34px : le plafond fixe pour les badges dans l'interface. Lottie
injecte un