/* --- 1. la scène et ses couches ---------------------------------------------------------------- */
.cy-scene { position: relative; display: block; overflow: hidden; aspect-ratio: 254 / 214; isolation: isolate; }
.cy-couche { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
svg.cy-couche { overflow: hidden; }
/* le cycle monté caché se dévoile une carte par image à sa première taille réelle (cycle.js, mesurer) */
.cy-scene[data-cy-attente] > .cy-couche { display: none; }

/* --- 2. la silhouette : une copie par carte, le point des pieds à l'origine -------------------- */
.cy-pp { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; }
.cy-pp[data-vu="non"] { display: none; }
/* l'ombre au sol, sous les pieds, dessinée une fois (en pixels de planche, l'échelle de la copie l'emporte) */
.cy-pp-ombre {
  position: absolute; left: -38px; top: -7px; width: 76px; height: 14px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, .22) 55%, rgba(0, 0, 0, 0));
}
/* le sens : la pose retournée une fois pour toutes quand sa planche regarde à gauche (cycle.js, REGARDE) */
.cy-pp-sens { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; visibility: hidden; }
.cy-pp-sens[data-actif] { visibility: visible; }
.cy-pp-pose { position: absolute; overflow: hidden; }
.cy-pp .cy-pp-planche { position: absolute; left: 0; top: 0; display: block; max-width: none; max-height: none; will-change: transform; }

/* --- 3. « ▶ » : rejouer le cycle après le repos, au coin haut droit de la nuit (dans sa marge, sur le ciel de la
   dernière carte, jamais sur un texte) ---------------------------------------------------------------- */
.cy-relance {
  position: absolute; right: 8px; top: 8px; z-index: 3; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: #f8ff07; color: #18191b; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}
.cy-relance[hidden] { display: none; }
.cy-relance:focus-visible { outline: 2px solid #f8ff07; outline-offset: 3px; }
.cy-relance-icone { display: block; width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }

.cy-anime { position: absolute; inset: 0; pointer-events: none; }
/* le globe de la Discovery : un disque rogné, tourné sur l'axe du globe ; dedans, la bande du motif qui défile */
.cy-globe { position: absolute; overflow: hidden; border-radius: 50%; transform-origin: 50% 50%; }
.cy-globe-bande { position: absolute; top: 0; height: 100%; will-change: transform; }
.cy-globe-bande > svg { position: absolute; inset: 0; display: block; }
.cy-globe-points { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
/* le point jaune, et son halo : un rond posé une fois, que l'échelle fait naître et battre */
.cy-globe-point {
  position: absolute; border-radius: 50%; background: #f8ff07; translate: -50% -50%;
  transform: scale(0); will-change: transform;
}
.cy-globe-points .cy-globe-point:not(:first-child) { transform: none; }
.cy-globe-halo {
  position: absolute; left: -150%; top: -150%; width: 400%; height: 400%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(248, 255, 7, .5), rgba(248, 255, 7, .14) 45%, rgba(248, 255, 7, 0));
}
/* l'ombre de la sphère par-dessus le motif : le bord s'assombrit, la face se bombe */
.cy-globe-ombre {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 62% 38%, rgba(5, 5, 6, 0) 38%, rgba(5, 5, 6, .35) 72%, rgba(5, 5, 6, .8) 100%);
}
/* la voie jaune que le stylo dessine sur la carte de la Maturation */
.cy-trace { position: absolute; inset: 0; display: block; overflow: hidden; }

/* --- 4. les cartes sans « À venir » : le pied de Développement et d'Itération ne porte que le chevron ------------------- */
.sv-c5-pied { min-height: 28px; box-sizing: border-box; }
.sv-c5-pied > .sv-c5-chevron:only-child { margin-left: auto; }