/* Cercle d'épargne animé (accueil et connexion) : les membres tournent autour de la cagnotte,
   l'étoile dorée du drapeau camerounais marque le bénéficiaire du tour. */

.scene { --size: min(500px, 88vw); --r: calc(var(--size) * .4); position: relative; width: var(--size); height: var(--size); margin: 0 auto; }
.halo { position: absolute; inset: 8%; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 62%); filter: blur(6px); }
.orb { position: absolute; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--brand) 28%, transparent); }
.orb.o1 { inset: 0; border-style: solid; border-color: color-mix(in srgb, var(--brand) 12%, transparent); }
.orb.o2 { inset: 10%; animation: spin 90s linear infinite; }
.orb.o3 { inset: 26%; border-color: color-mix(in srgb, var(--sun) 45%, transparent); animation: spin 60s linear infinite reverse; }
.seats { position: absolute; inset: 0; animation: spin 48s linear infinite; }
.seat { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px;
  transform: rotate(calc(var(--i) * 45deg)) translateY(calc(var(--r) * -1)) rotate(calc(var(--i) * -45deg)); }
.face { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; font: 800 14px var(--font-display); color: #fff;
  background: hsl(var(--h) 62% 52%); box-shadow: 0 0 0 4px var(--bg), 0 8px 18px -8px hsl(var(--h) 60% 40%);
  animation: spin 48s linear infinite reverse; }
.seat.star { width: 62px; height: 62px; margin: -31px 0 0 -31px; }
.seat.star .face { background: var(--sun); color: #3d2a00; font-size: 26px; box-shadow: 0 0 0 4px var(--bg), 0 0 0 10px color-mix(in srgb, var(--sun) 25%, transparent), 0 12px 26px -10px #a37700; }
.pot { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 46%; padding: calc(var(--size) * .035) calc(var(--size) * .025);
  border-radius: calc(var(--size) * .05); text-align: center; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lift); }
/* Tailles proportionnelles au cercle : le bloc reste lisible et sans débordement à toutes les tailles. */
.pot-label, .pot-meta { display: block; font-size: max(10.5px, calc(var(--size) * .026)); line-height: 1.3; color: var(--muted); font-weight: 700; }
.pot strong { display: block; white-space: nowrap; font: 800 max(18px, calc(var(--size) * .068))/1.1 var(--font-display); letter-spacing: -.03em;
  margin: calc(var(--size) * .012) 0 calc(var(--size) * .008); }
.pot small { display: block; font: 700 max(10px, calc(var(--size) * .024)) var(--font-body); letter-spacing: .08em; color: var(--muted); margin-top: 2px; }
.float { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; font-size: 13px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lift); animation: bob 6s ease-in-out infinite; }
.float small { display: block; color: var(--muted); font-size: 11.5px; }
.float strong { font-weight: 800; }
.f1 { top: 2%; right: -2%; max-width: 230px; }
.f2 { bottom: 9%; left: -4%; flex-direction: column; align-items: stretch; gap: 8px; min-width: 190px; animation-delay: -2s; }
.f3 { bottom: -1%; right: 6%; animation-delay: -4s; }
.f3 strong { display: block; font: 800 15px var(--font-display); }
.f-title { font-weight: 800; }
.dot-in { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 10px; background: var(--in-soft); color: var(--in); }
.sun { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--sun-soft); color: var(--sun); font-size: 17px; }
.meter { display: block; height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--in), #43c38b); }
@keyframes spin { to { rotate: 360deg; } }
@keyframes bob { 50% { transform: translateY(-8px); } }
@media (max-width: 560px) { .f1 { right: 0; max-width: 200px; } .f2 { left: 0; min-width: 160px; } .seat { width: 40px; height: 40px; margin: -20px 0 0 -20px; } .face { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .seats, .face, .orb, .float, .hl path { animation: none !important; } .hl path { stroke-dashoffset: 0; } }