/* Widgets vivants : barre de progression, bouton retour en haut, bulles flottantes, halo des cartes. Tout est coupé en reduced-motion. */
.vie-progres { position: fixed; inset: 0 0 auto 0; z-index: 90; height: 3px; background: linear-gradient(90deg, var(--or), color-mix(in oklch, var(--or), var(--blanc) 55%)); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

.vie-haut { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 80; width: 52px; height: 52px; min-height: 52px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--marine); color: var(--or); box-shadow: var(--shadow-lg); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px) scale(.8); transition: opacity .3s, transform .35s var(--ease), visibility 0s .3s; }
.vie-haut.visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.vie-haut:hover { transform: translateY(-3px) scale(1.06); }
.vie-haut svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.vie-haut svg.fleche { position: static; width: 22px; height: 22px; transform: none; }
.vie-haut circle { fill: none; stroke-width: 3; }
.vie-haut .piste { stroke: color-mix(in oklch, var(--blanc) 16%, transparent); }
.vie-haut .jauge { stroke: var(--or); stroke-linecap: round; stroke-dasharray: 150.8; stroke-dashoffset: 150.8; }
.vie-haut path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* halo doré qui suit le curseur sur les cartes */
.vie-halo { position: relative; }
.vie-halo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(18rem circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklch, var(--or) 22%, transparent), transparent 60%); transition: opacity .3s; }
.vie-halo:hover::after { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  /* bulles rondes qui dérivent dans le héros */
  .ouverture { position: relative; overflow: clip; }
  .ouverture::before, .ouverture::after { content: ""; position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }
  .ouverture::before { width: 26rem; height: 26rem; top: -9rem; right: 8%; background: radial-gradient(circle at 35% 35%, color-mix(in oklch, var(--or) 32%, transparent), transparent 68%); animation: vie-derive 16s ease-in-out infinite alternate; }
  .ouverture::after { width: 16rem; height: 16rem; bottom: 4rem; left: -5rem; border: 2px solid color-mix(in oklch, var(--or) 38%, transparent); animation: vie-derive 12s ease-in-out -4s infinite alternate-reverse; }
  .arc--vif { animation: vie-arc 14s ease-in-out infinite alternate; }
  .arc--pale { animation: vie-arc 20s ease-in-out -6s infinite alternate-reverse; }
  .c-pastille, .note-ligne__chiffre { animation: vie-lueur 3.2s ease-in-out infinite; }
  .ouverture__visuel .c-media { transform: translate3d(0, var(--par, 0px), 0); will-change: transform; }
  .vie-tilt { transform-style: preserve-3d; transition: transform .25s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
  .vie-tilt.actif { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); transition-duration: .08s; }
  .vie-aimant { transition: transform .2s var(--ease), background-color .2s, color .2s, box-shadow .2s; }
}
@keyframes vie-derive { to { transform: translate3d(2.5rem, 2rem, 0) scale(1.12); } }
@keyframes vie-arc { from { transform: rotate(-20deg); } to { transform: rotate(8deg) translateY(.6rem); } }
@keyframes vie-lueur { 50% { text-shadow: 0 0 .9rem color-mix(in oklch, var(--or) 70%, transparent); } }
@media (prefers-reduced-motion: reduce) { .vie-progres { display: none; } }