/* ==== Soutien public =================================================== */
.soutien { --accent: var(--team-a); gap: 18px; }
.soutien-title { margin-top: 14px; max-width: 24ch; }

/* le grand bouton : il respire doucement, comme une invitation */
.soutien-action { position: relative; margin: clamp(24px, 4vh, 44px) 0 clamp(10px, 1.6vh, 20px); }
.soutien-btn {
  position: relative; z-index: 1;
  width: clamp(160px, 11vw, 196px); aspect-ratio: 1; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: var(--accent); color: #fff;
  box-shadow: 0 18px 50px color-mix(in srgb, var(--accent) 30%, transparent);
  animation: soutien-breathe 3.2s ease-in-out infinite;
  transition: transform 300ms var(--ease-spring), background 500ms var(--ease), color 500ms var(--ease), box-shadow 500ms var(--ease);
}
.soutien-btn:hover { transform: scale(1.04); }
.soutien-btn:active { transform: scale(0.95); }
.soutien-btn.is-done {
  animation: none; background: var(--bg-alt); color: var(--accent);
  box-shadow: none;
}
@keyframes soutien-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
.soutien-btn__icon { width: 30%; height: auto; fill: currentColor; }
.soutien-btn__icon--check { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.soutien-btn__icon--check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: soutien-draw 600ms var(--ease) 150ms forwards; }
@keyframes soutien-draw { to { stroke-dashoffset: 0; } }
.soutien-btn__label { font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.01em; }
.soutien-swap-enter-active, .soutien-swap-leave-active { transition: opacity 200ms var(--ease), transform 300ms var(--ease-spring); }
.soutien-swap-enter-from, .soutien-swap-leave-to { opacity: 0; transform: scale(0.6); }

/* le merci : une onde et quelques coeurs qui montent */
.soutien-bursts { position: absolute; inset: 0; pointer-events: none; }
.soutien-ring {
  position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent);
  animation: soutien-ring 1200ms var(--ease) forwards;
}
@keyframes soutien-ring { from { transform: scale(1); opacity: 0.6; } to { transform: scale(1.7); opacity: 0; } }
.soutien-heart {
  position: absolute; left: 50%; top: 38%; width: 22px; height: 22px; margin-left: -11px; fill: var(--accent); opacity: 0;
  animation: soutien-heart 2000ms var(--ease) var(--d) forwards;
}
@keyframes soutien-heart {
  0% { opacity: 0; transform: translate(0, 0) scale(0.3); }
  15% { opacity: 1; }
  70% { opacity: 0; }
  100% { opacity: 0; transform: translate(var(--dx), calc(-1 * var(--rise))) scale(var(--s)); }
}

.soutien-count { display: flex; align-items: baseline; gap: 12px; color: var(--text-2); font-size: var(--fs-md); }
.soutien-count__n { font-size: var(--fs-xl); color: var(--text); }
.soutien-thanks { min-height: 1.5em; font-size: var(--fs-md); font-weight: 500; }

.soutien-duel { width: min(980px, 100%); margin-top: clamp(20px, 3.5vh, 44px); padding: 28px 36px 18px; }
.soutien-duel__teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.soutien-duel__team { display: flex; align-items: center; gap: 12px; font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); white-space: nowrap; }
.soutien-duel__team:last-child { justify-content: flex-end; }
.soutien-duel__team.is-me { color: var(--text); font-weight: 600; }
.soutien-duel__time { font-size: var(--fs-md); }

.soutien-share { display: flex; align-items: center; gap: 28px; margin-top: clamp(24px, 4vh, 44px); }
.soutien-copy { color: var(--text-2); font-size: var(--fs-sm); }
.soutien-copy:hover { color: var(--text); }

@media (max-width: 700px) {
  .soutien-duel { padding: 20px; }
  .soutien-duel__teams { grid-template-columns: 1fr 1fr; }
  .soutien-duel__time { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}

/* les deux territoires : l'équipe qui mène prend plus de place */
.soutien-split { display: flex; gap: 6px; height: 14px; margin-top: 22px; }
.soutien-split span { border-radius: 999px; transition: flex-grow 1200ms var(--ease-spring); }
.soutien-split .is-a { flex: var(--s) 0 0; background: linear-gradient(90deg, var(--team-a), #A78BFA); }
.soutien-split .is-b { flex: calc(1 - var(--s)) 0 0; background: linear-gradient(90deg, #FFA05A, var(--team-b)); }