/* ─── Page Réalisations ─── */
.page-hero--projects {
  background: linear-gradient(130deg, #060810 0%, var(--color-dark) 100%);
}

.projects-section { background: var(--color-bg); }

/* Spotlight */
.projects-spotlight { padding-block: var(--sp-24); }

.spotlight__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}

.spotlight__content p {
  color: rgba(255,255,255,.6);
  line-height: 1.8;
  margin-bottom: var(--sp-6);
}

.spotlight__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.spotlight__list li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: rgba(255,255,255,.75);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--sp-2) 0;
}

.spotlight__list li svg {
  width: 16px; height: 16px;
  stroke: var(--color-primary);
  flex-shrink: 0;
}

/* World map canvas */
.nd-map-wrap {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(44,184,76,.15);
  box-shadow: var(--shadow-glow), var(--shadow-lg);
  background: #0c1822;
}

#nd-world-map {
  display: block;
  width: 100%;
}

.nd-map-badge {
  position: absolute;
  top: 12px; right: 12px;
  background: rgba(10,18,28,.88);
  border: 1px solid rgba(60,183,60,.3);
  border-radius: 8px;
  padding: 6px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  backdrop-filter: blur(4px);
}

.nd-map-badge strong {
  font-family: 'Outfit', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: #3CB73C;
  line-height: 1;
}

.nd-map-badge span {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

.nd-map-tip {
  position: absolute;
  background: rgba(10,18,28,.92);
  border: 1px solid rgba(60,183,60,.25);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 4px;
  pointer-events: none;
  white-space: nowrap;
  display: none;
  z-index: 2;
}

@media (max-width: 1024px) {
  .spotlight__grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .projects-grid--full { grid-template-columns: 1fr; }
}