/* =========================================================================
   EPICVIEW — Timeline orbitale (portage vanilla du composant React)
   Nœuds en orbite auto-rotative ; clic = fiche détaillée + nœuds liés.
   Thème sombre/rouge EPICVIEW. Réutilisable : conteneur [data-ev-orbital].
   ========================================================================= */

.ev-orbital {
  position: relative; width: 100%;
  height: clamp(390px, 84vw, 470px);
  margin: 0 auto;
  display: grid; place-items: center;
  overflow: hidden;
  perspective: 1000px; touch-action: manipulation;
}

.ev-orbital__stage { position: absolute; inset: 0; display: grid; place-items: center; }

/* Anneau d'orbite */
.ev-orbital__ring {
  position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.10);
  pointer-events: none;
}

/* Cœur central pulsant */
.ev-orbital__center {
  position: absolute; width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center; z-index: 10;
  background: radial-gradient(circle at 35% 30%, #ff5b5b, var(--ev-red) 60%, #6d0000);
  box-shadow: 0 0 32px rgba(164,0,0,.6);
  animation: evoPulse 3s ease-in-out infinite;
}
.ev-orbital__center span {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.85); backdrop-filter: blur(4px);
}
.ev-orbital__center::before, .ev-orbital__center::after {
  content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255,120,120,.4);
  animation: evoPing 2.4s cubic-bezier(0,0,.2,1) infinite;
}
.ev-orbital__center::before { width: 78px; height: 78px; }
.ev-orbital__center::after { width: 96px; height: 96px; animation-delay: .6s; opacity: .6; }
@keyframes evoPulse { 0%,100% { transform: scale(1); opacity: .95; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes evoPing { 0% { transform: scale(.7); opacity: .8; } 80%,100% { transform: scale(1.25); opacity: 0; } }

/* Nœud */
.ev-orbital__node {
  position: absolute; left: 50%; top: 50%;
  transition: transform .7s var(--ev-ease), opacity .7s var(--ev-ease);
  cursor: pointer; will-change: transform;
}
.ev-orbital__dot {
  position: relative; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; margin: -21px 0 0 -21px;
  background: #0b0b0d; color: #fff; border: 2px solid rgba(255,255,255,.4);
  transition: transform .3s var(--ev-ease), background .3s var(--ev-ease),
              border-color .3s var(--ev-ease), box-shadow .3s var(--ev-ease), color .3s var(--ev-ease);
}
.ev-orbital__dot svg { width: 18px; height: 18px; }
.ev-orbital__node.is-related .ev-orbital__dot {
  color: var(--ev-red-lite); border-color: var(--ev-red-lite);
  animation: evoNodePulse 1.4s ease-in-out infinite;
}
.ev-orbital__node.is-active .ev-orbital__dot {
  background: linear-gradient(150deg, var(--ev-red-lite), var(--ev-red));
  color: #fff; border-color: #ff7b7b; transform: scale(1.5);
  box-shadow: 0 0 26px rgba(255,91,91,.6);
}
@keyframes evoNodePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,91,91,.5); } 50% { box-shadow: 0 0 0 6px rgba(255,91,91,0); } }

/* halo d'énergie */
.ev-orbital__halo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,91,91,.25) 0%, rgba(255,91,91,0) 70%);
}

/* libellé */
.ev-orbital__label {
  position: absolute; top: 26px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: clamp(.64rem, 2.3vw, .73rem); font-weight: 600; letter-spacing: .03em;
  color: rgba(255,255,255,.72); transition: color .3s var(--ev-ease), transform .3s var(--ev-ease);
  text-shadow: 0 2px 8px rgba(0,0,0,.8); pointer-events: none;
}
.ev-orbital__node.is-active .ev-orbital__label { color: #fff; transform: translateX(-50%) scale(1.1); }

/* Fiche détaillée — ancrée en bas du cadre pour toujours tenir dans la boîte */
.ev-orbital__card {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  width: min(300px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow-y: auto;
  background: rgba(10,10,12,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(164,0,0,.4); border-radius: 16px; z-index: 220;
  box-shadow: 0 24px 60px rgba(0,0,0,.75); text-align: left;
  animation: evoCardIn .28s var(--ev-ease); scrollbar-width: thin;
}
@keyframes evoCardIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translateX(-50%); } }
.ev-orbital__card-hd { padding: .85rem .9rem .4rem; }
.ev-orbital__card-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.ev-orbital__badge {
  font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .18rem .5rem; border-radius: 100px; border: 1px solid;
}
.ev-orbital__badge.s-completed { color: #fff; background: var(--ev-red); border-color: #ff7b7b; }
.ev-orbital__badge.s-in-progress { color: #fbbf24; background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.4); }
.ev-orbital__badge.s-pending { color: var(--ev-grey); background: rgba(255,255,255,.06); border-color: var(--ev-line); }
.ev-orbital__date { font-family: ui-monospace, monospace; font-size: .66rem; color: var(--ev-grey-dim); }
.ev-orbital__card h3 { font-size: .92rem; font-weight: 700; margin-top: .5rem; line-height: 1.2; }
.ev-orbital__card-bd { padding: 0 .9rem .9rem; }
.ev-orbital__card-bd > p { font-size: .78rem; color: var(--ev-grey); line-height: 1.5; }

.ev-orbital__meter { margin-top: .8rem; padding-top: .7rem; border-top: 1px solid rgba(255,255,255,.1); }
.ev-orbital__meter-row { display: flex; justify-content: space-between; align-items: center; font-size: .68rem; color: var(--ev-grey); margin-bottom: .35rem; }
.ev-orbital__meter-row b { font-weight: 600; display: inline-flex; align-items: center; gap: .3rem; }
.ev-orbital__meter-row b svg { width: 11px; height: 11px; }
.ev-orbital__meter-row span { font-family: ui-monospace, monospace; }
.ev-orbital__bar { width: 100%; height: 4px; border-radius: 100px; background: rgba(255,255,255,.1); overflow: hidden; }
.ev-orbital__bar i { display: block; height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--ev-red), var(--ev-red-lite)); }

.ev-orbital__rel { margin-top: .8rem; padding-top: .7rem; border-top: 1px solid rgba(255,255,255,.1); }
.ev-orbital__rel-h { display: flex; align-items: center; gap: .3rem; font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ev-grey); margin-bottom: .5rem; }
.ev-orbital__rel-h svg { width: 11px; height: 11px; }
.ev-orbital__rel-list { display: flex; flex-wrap: wrap; gap: .35rem; }
.ev-orbital__rel-btn {
  display: inline-flex; align-items: center; gap: .25rem;
  font-family: var(--ev-font); font-size: .68rem; color: var(--ev-grey);
  background: transparent; border: 1px solid var(--ev-line); border-radius: 8px;
  padding: .2rem .45rem; cursor: pointer; transition: background .25s var(--ev-ease), color .25s var(--ev-ease), border-color .25s var(--ev-ease);
}
.ev-orbital__rel-btn:hover { background: rgba(164,0,0,.14); color: #fff; border-color: rgba(164,0,0,.5); }
.ev-orbital__rel-btn svg { width: 9px; height: 9px; opacity: .7; }

.ev-orbital__open {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  margin: .85rem .9rem .9rem; padding: .5rem; border-radius: 10px;
  background: linear-gradient(100deg, var(--ev-red-lite), var(--ev-red));
  color: #fff; text-decoration: none; font-size: .8rem; font-weight: 700;
  transition: transform .25s var(--ev-ease), box-shadow .25s var(--ev-ease);
}
.ev-orbital__open:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(164,0,0,.45); }
.ev-orbital__open svg { width: 15px; height: 15px; }

@media (prefers-reduced-motion: reduce) {
  .ev-orbital__center, .ev-orbital__center::before, .ev-orbital__center::after,
  .ev-orbital__node.is-related .ev-orbital__dot { animation: none; }
}