/* Déroulé orbital.
   ------------------------------------------------------------------
   Les étapes tournent autour d'un noyau : on lit le projet comme un
   cycle plutôt que comme une liste. Le fond est en bleu de nuit, ce qui
   laisse l'orange ne désigner qu'une chose à la fois — l'étape ouverte.

   Le balisage de départ est une simple liste ordonnée, lisible sans
   JavaScript ; js/orbite.js la remplace par l'orbite quand il peut. */

.orbite-zone { position: relative; }

/* --- repli : la liste telle qu'elle existe sans script --------------- */
.orbite-source {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--trait-clair);
  border: 1px solid var(--trait-clair);
}
.orbite-source li {
  background: var(--nuit);
  padding: var(--sp-5);
  display: grid;
  gap: var(--sp-2);
  align-content: start;
}
.orbite-source .etape-num { color: var(--chiffre); }
.orbite-source h3 { color: var(--os); }
.orbite-source p { color: rgba(243, 240, 233, 0.7); font-size: var(--fs-small); }
.orbite-source .duree { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--orange-texte); }

@media (max-width: 700px) { .orbite-source { grid-template-columns: 1fr; } }

/* --- orbite ---------------------------------------------------------- */
.est-orbite .orbite-source { display: none; }

.orbite {
  position: relative;
  height: clamp(470px, 64vw, 660px);
  display: grid;
  place-items: center;
  touch-action: manipulation;
}

.orbite-anneau {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--trait-clair);
  pointer-events: none;
}

/* Noyau : la marque au centre, qui respire. */
.orbite-noyau {
  position: absolute;
  width: 74px; height: 74px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 32% 28%, var(--bleu) 0%, var(--nuit-2) 70%);
  box-shadow: 0 0 0 1px var(--nuit-3), 0 18px 50px rgba(0, 0, 0, 0.45);
  z-index: 3;
}
.orbite-noyau span {
  font-family: var(--font-display);
  font-variation-settings: "wdth" var(--wdth-display), "wght" var(--wght-titre);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--os);
}
.orbite-noyau::before,
.orbite-noyau::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px solid rgba(255, 74, 10, 0.35);
  animation: orbite-onde 3.4s var(--ease-doux) infinite;
}
.orbite-noyau::after { inset: -26px; animation-delay: 1.1s; border-color: rgba(27, 59, 216, 0.32); }

@keyframes orbite-onde {
  0%   { transform: scale(0.86); opacity: 0.9; }
  70%  { transform: scale(1.16); opacity: 0; }
  100% { transform: scale(1.16); opacity: 0; }
}

/* Jalons */
.orbite-jalon {
  position: absolute;
  width: 0; height: 0;
  display: grid;
  place-items: center;
  transition: opacity 0.5s var(--ease-sortie);
}

.orbite-pastille {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--nuit-2);
  color: var(--os);
  border: 1px solid var(--nuit-3);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  padding: 0;
  transition:
    transform var(--dur-2) var(--ease-elan),
    background-color var(--dur-2) var(--ease-sortie),
    border-color var(--dur-2) var(--ease-sortie),
    color var(--dur-2) var(--ease-sortie);
}
.orbite-pastille:hover { transform: scale(1.12); border-color: var(--os); }

.orbite-jalon.est-lie .orbite-pastille {
  border-color: var(--bleu);
  background: rgba(27, 59, 216, 0.28);
}

.orbite-jalon.est-ouvert .orbite-pastille {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--encre);
  transform: scale(1.24);
}

.orbite-titre {
  position: absolute;
  top: 32px;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.005em;
  text-transform: none;
  color: rgba(243, 240, 233, 0.74);
  transition: color var(--dur-2) var(--ease-sortie);
  pointer-events: none;
}
.orbite-jalon.est-ouvert .orbite-titre { color: var(--os); }

/* Fiche de l'étape */
.orbite-fiche {
  position: absolute;
  top: 62px;
  left: 50%;
  transform: translateX(-50%);
  width: min(300px, 76vw);
  background: rgba(16, 28, 51, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--nuit-3);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  text-align: left;
  z-index: 40;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.orbite-fiche::before {
  content: "";
  position: absolute;
  top: -13px; left: 50%;
  width: 1px; height: 13px;
  background: var(--nuit-3);
}

.orbite-fiche-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.orbite-etat {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.005em;
  text-transform: none;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--orange);
  color: var(--orange-texte);
}
.orbite-duree {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: rgba(243, 240, 233, 0.74);
}

.orbite-fiche h3 { margin-top: var(--sp-3); color: var(--os); font-size: 1.02rem; }
.orbite-fiche p {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: rgba(243, 240, 233, 0.76);
}

.orbite-jauge {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--nuit-3);
}
.orbite-jauge-tete {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: rgba(243, 240, 233, 0.74);
  margin-bottom: 6px;
}
.orbite-jauge-barre {
  height: 3px;
  background: var(--nuit-3);
  border-radius: 3px;
  overflow: hidden;
}
.orbite-jauge-barre i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--bleu), var(--orange));
  transition: width 0.7s var(--ease-sortie);
}

.orbite-livrable {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--nuit-3);
  font-size: var(--fs-small);
  color: rgba(243, 240, 233, 0.76);
}
.orbite-livrable b { color: var(--os); font-weight: 600; }

.orbite-liens {
  margin-top: var(--sp-3);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.orbite-liens button {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  padding: 4px 9px;
  border: 1px solid var(--nuit-3);
  border-radius: var(--radius-pill);
  background: transparent;
  color: rgba(243, 240, 233, 0.72);
  transition: border-color var(--dur-1) ease, color var(--dur-1) ease;
}
.orbite-liens button:hover { border-color: var(--orange); color: var(--os); }

.orbite-aide {
  position: absolute;
  bottom: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.005em;
  text-transform: none;
  color: rgba(243, 240, 233, 0.74);
}

@media (prefers-reduced-motion: reduce) {
  .orbite-noyau::before, .orbite-noyau::after { animation: none; }
}