/* =====================================================================
   Synthèse des réponses — panneau « ciel étoilé »
   Nébuleuse, étoiles qui scintillent, étoiles filantes, compteurs,
   podium, barres lumineuses et constellations de prénoms.
   Chargé par base.html (sert à la page publique ET à la page admin).
   Animations armées par recap.js : sans JS, tout s'affiche à l'état final.
   ===================================================================== */

.cosmos {
  --c-yes: #46e3a4;
  --c-maybe: #ffc36b;
  --c-no: #ff8fa8;
  --gold: #ffd98a;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 36px -6px 0;
  padding: clamp(22px, 4vw, 34px) clamp(16px, 3.6vw, 30px) 24px;
  border-radius: 26px;
  color: #efe9ff;
  background:
    radial-gradient(110% 70% at 8% 0%, rgba(154, 123, 255, .50), transparent 55%),
    radial-gradient(90% 70% at 100% 100%, rgba(236, 111, 158, .42), transparent 60%),
    radial-gradient(60% 45% at 70% 35%, rgba(70, 160, 230, .22), transparent 70%),
    linear-gradient(165deg, #0e0824 0%, #1b1040 52%, #2a0f38 100%);
  box-shadow: 0 34px 70px -34px rgba(16, 4, 44, .95), inset 0 0 0 1px rgba(255, 255, 255, .09);
}

/* Nébuleuse qui dérive lentement */
.cosmos::before {
  content: ""; position: absolute; inset: -40%; z-index: -2;
  background:
    radial-gradient(30% 25% at 30% 40%, rgba(255, 170, 120, .20), transparent 70%),
    radial-gradient(25% 30% at 70% 60%, rgba(120, 220, 255, .16), transparent 70%),
    radial-gradient(20% 20% at 55% 25%, rgba(236, 111, 158, .22), transparent 70%);
  filter: blur(18px);
  animation: nebula 38s ease-in-out infinite alternate;
}
@keyframes nebula {
  from { transform: rotate(0deg) scale(1); }
  to   { transform: rotate(24deg) scale(1.15); }
}

/* Deux champs d'étoiles qui scintillent en décalé */
.cosmos-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cosmos-sky::before, .cosmos-sky::after {
  content: ""; position: absolute; inset: 0;
  background-repeat: repeat;
}
.cosmos-sky::before {
  background-image:
    radial-gradient(1.4px 1.4px at 12px 18px, #fff, transparent),
    radial-gradient(1px 1px at 64px 90px, rgba(255,255,255,.8), transparent),
    radial-gradient(1.6px 1.6px at 110px 40px, #ffe9c4, transparent),
    radial-gradient(1px 1px at 150px 130px, rgba(255,255,255,.7), transparent);
  background-size: 170px 150px;
  animation: twinkle 4.2s ease-in-out infinite alternate;
}
.cosmos-sky::after {
  background-image:
    radial-gradient(1.2px 1.2px at 30px 70px, rgba(200,220,255,.9), transparent),
    radial-gradient(2px 2px at 95px 20px, rgba(255,255,255,.95), transparent),
    radial-gradient(1px 1px at 180px 110px, rgba(255,210,240,.8), transparent);
  background-size: 230px 190px;
  animation: twinkle 5.8s ease-in-out infinite alternate-reverse;
}
@keyframes twinkle { from { opacity: .35; } to { opacity: 1; } }

/* Étoiles filantes */
.shoot {
  position: absolute; top: 10%; left: -20%;
  width: 140px; height: 1.6px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95));
  filter: drop-shadow(0 0 6px rgba(255,255,255,.9));
  transform: rotate(16deg); opacity: 0;
  animation: shoot 9s ease-in infinite 2s;
}
.shoot.s2 { top: 55%; animation-delay: 6.5s; animation-duration: 11s; width: 100px; }
@keyframes shoot {
  0%   { transform: translate(0, 0) rotate(16deg); opacity: 0; }
  2%   { opacity: 1; }
  11%  { transform: translate(900px, 260px) rotate(16deg); opacity: 0; }
  100% { transform: translate(900px, 260px) rotate(16deg); opacity: 0; }
}

/* --- En-tête --- */
.cosmos-head { text-align: center; margin-bottom: 20px; }
.cosmos-eyebrow {
  margin: 0 0 4px; font-size: .72rem; font-weight: 700; letter-spacing: .34em;
  text-transform: uppercase; color: rgba(255, 217, 138, .85);
}
.cosmos-title {
  margin: 0; font-size: clamp(1.6rem, 5vw, 2.2rem);
  background: linear-gradient(100deg, #fff 0%, #ffd98a 35%, #ffb3d1 65%, #fff 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: cosmos-shimmer 8s ease-in-out infinite;
  text-shadow: 0 0 30px rgba(255, 200, 150, .25);
}
@keyframes cosmos-shimmer { 0%,100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

/* --- Ciel vide --- */
.cosmos-empty { text-align: center; padding: 18px 0 8px; }
.cosmos-empty p { margin: 8px 0 0; font-size: 1.05rem; color: rgba(239, 233, 255, .85); line-height: 1.5; }
.cosmos-empty-star {
  display: inline-block; font-size: 2.6rem; color: var(--gold);
  text-shadow: 0 0 22px rgba(255, 217, 138, .9);
  animation: pulse-star 2.6s ease-in-out infinite;
}
@keyframes pulse-star { 0%,100% { transform: scale(1) rotate(0); opacity: .8; } 50% { transform: scale(1.25) rotate(20deg); opacity: 1; } }

/* --- Compteurs --- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 22px; }
.stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 6px 12px; border-radius: 18px; text-align: center;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.stat-n {
  font-family: var(--sans); font-weight: 800; font-size: clamp(1.7rem, 6vw, 2.4rem); line-height: 1;
  background: linear-gradient(180deg, #fff, #ffd98a); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.stat-l { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(239,233,255,.72); }

/* --- Podium --- */
.podium {
  display: flex; align-items: flex-end; justify-content: center; gap: clamp(6px, 2vw, 14px);
  margin: 4px 0 24px; min-height: 200px;
}
.podium-col { flex: 1 1 0; max-width: 170px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.podium-medal { font-size: 1.8rem; line-height: 1; margin-bottom: 4px; filter: drop-shadow(0 0 10px rgba(255,217,138,.6)); }
.podium-col.r1 .podium-medal { font-size: 2.4rem; animation: float 3s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.podium-date { display: flex; flex-direction: column; margin-bottom: 8px; line-height: 1.15; }
.pd-wd { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(239,233,255,.7); }
.pd-day { font-weight: 700; font-size: clamp(.95rem, 3.4vw, 1.1rem); }
.pd-slot { font-size: .72rem; color: rgba(239,233,255,.7); }
.podium-step {
  width: 100%; display: flex; align-items: flex-start; justify-content: center;
  padding-top: 10px; border-radius: 14px 14px 6px 6px;
  transform-origin: bottom;
}
.podium-col.r1 .podium-step { height: 96px; background: linear-gradient(180deg, #ffe39a, #e2a13a); box-shadow: 0 0 34px -4px rgba(255,200,90,.75); color: #5a3606; }
.podium-col.r2 .podium-step { height: 68px; background: linear-gradient(180deg, #f2f1ff, #a9a6c9); box-shadow: 0 0 24px -8px rgba(220,220,255,.6); color: #34305a; }
.podium-col.r3 .podium-step { height: 50px; background: linear-gradient(180deg, #f6c79c, #b2703f); box-shadow: 0 0 24px -8px rgba(240,160,100,.6); color: #4a2408; }
.podium-score { font-weight: 800; font-size: .9rem; line-height: 1.2; padding: 0 4px; }
.podium-score small { display: block; font-weight: 600; font-size: .7rem; opacity: .8; }

/* --- Orbites (une ligne par date) --- */
.orbits { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.orbit {
  padding: 12px 14px; border-radius: 16px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .10);
  transition: background .2s, transform .2s;
}
.orbit:hover { background: rgba(255, 255, 255, .08); }
.orbit.fav {
  background: linear-gradient(135deg, rgba(255,217,138,.16), rgba(255,255,255,.05));
  border-color: rgba(255, 217, 138, .55);
  box-shadow: 0 0 0 1px rgba(255,217,138,.25), 0 0 36px -10px rgba(255,190,90,.7);
}
.orbit-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 9px; }
.orbit-date { font-weight: 700; }
.orbit-slot { font-size: .78rem; padding: 1px 8px; border-radius: 99px; background: rgba(255,255,255,.1); }
.fav-badge {
  font-size: .72rem; font-weight: 800; letter-spacing: .04em; color: #4d2f05;
  padding: 2px 9px; border-radius: 99px; background: linear-gradient(135deg, #ffe7a6, #f0b24e);
  box-shadow: 0 0 16px rgba(255, 200, 90, .7);
  animation: badge 2.4s ease-in-out infinite;
}
@keyframes badge { 0%,100% { box-shadow: 0 0 10px rgba(255,200,90,.5); } 50% { box-shadow: 0 0 22px rgba(255,200,90,.95); } }
.orbit-counts { margin-left: auto; display: flex; gap: 8px; font-size: .82rem; font-variant-numeric: tabular-nums; }
.c-y { color: var(--c-yes); } .c-m { color: var(--c-maybe); } .c-n { color: var(--c-no); opacity: .85; }

.bar {
  display: flex; height: 12px; border-radius: 99px; overflow: hidden;
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 3px rgba(0,0,0,.35);
}
.bar span { display: block; height: 100%; }
.bar-y {
  width: var(--y); background: linear-gradient(90deg, #1fb57c, var(--c-yes));
  box-shadow: 0 0 14px rgba(70, 227, 164, .8);
  border-radius: 99px 0 0 99px;
}
.bar-m { width: var(--m); background: linear-gradient(90deg, #e8a13f, var(--c-maybe)); box-shadow: 0 0 12px rgba(255, 195, 107, .6); }

/* Constellation de prénoms */
.constellation { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.star-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px; border-radius: 99px; font-size: .8rem; font-weight: 600;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
}
.star-chip::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 8px currentColor;
}
.star-chip.y { color: #b9ffe2; border-color: rgba(70, 227, 164, .38); }
.star-chip.y::before { color: var(--c-yes); }
.star-chip.m { color: #ffe3b8; border-color: rgba(255, 195, 107, .38); }
.star-chip.m::before { color: var(--c-maybe); }

.cosmos-note { margin: 16px 0 0; text-align: center; font-size: .82rem; color: rgba(239,233,255,.7); }
.lg { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 2px 0 8px; vertical-align: 0; }
.lg.y { background: var(--c-yes); box-shadow: 0 0 8px var(--c-yes); }
.lg.m { background: var(--c-maybe); box-shadow: 0 0 8px var(--c-maybe); }

/* --- Animations d'entrée (armées par recap.js quand le panneau devient visible) --- */
.cosmos.armed .stat, .cosmos.armed .orbit, .cosmos.armed .star-chip, .cosmos.armed .podium-col { opacity: 0; }
.cosmos.armed .bar span { width: 0; }
.cosmos.armed .podium-step { transform: scaleY(0); }

.cosmos.armed.in .stat { animation: c-rise .6s cubic-bezier(.2,.8,.2,1) forwards; }
.cosmos.armed.in .stat:nth-child(2) { animation-delay: .1s; }
.cosmos.armed.in .stat:nth-child(3) { animation-delay: .2s; }
.cosmos.armed.in .podium-col { animation: c-rise .6s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(.35s + var(--i) * .12s); }
.cosmos.armed.in .podium-step { transform: scaleY(1); transition: transform .9s cubic-bezier(.3,1.4,.5,1); transition-delay: calc(.45s + var(--i) * .12s); }
.cosmos.armed.in .orbit { animation: c-rise .55s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(.6s + var(--i) * .08s); }
.cosmos.armed.in .bar-y { width: var(--y); transition: width 1.3s cubic-bezier(.2,.8,.2,1); transition-delay: calc(.8s + var(--i) * .08s); }
.cosmos.armed.in .bar-m { width: var(--m); transition: width 1.3s cubic-bezier(.2,.8,.2,1); transition-delay: calc(1s + var(--i) * .08s); }
.cosmos.armed.in .star-chip { animation: c-pop .45s cubic-bezier(.3,1.6,.5,1) forwards; animation-delay: calc(1.1s + var(--k) * .05s); }
@keyframes c-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes c-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }

/* --- Responsive --- */
@media (max-width: 560px) {
  .cosmos { margin: 30px -10px 0; border-radius: 22px; }
  .stats { gap: 6px; }
  .stat { padding: 12px 4px 10px; border-radius: 14px; }
  .stat-l { font-size: .62rem; letter-spacing: .04em; }
  .podium { min-height: 180px; }
  .podium-col.r1 .podium-step { height: 84px; }
  .podium-col.r2 .podium-step { height: 60px; }
  .podium-col.r3 .podium-step { height: 44px; }
  .orbit-counts { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cosmos::before, .cosmos-sky::before, .cosmos-sky::after, .shoot, .cosmos-title,
  .cosmos-empty-star, .podium-col.r1 .podium-medal, .fav-badge { animation: none; }
  .shoot { display: none; }
}