/* ============================================================
   DCP — Bloc feuille de route
   Partage entre la page Actus et la page Standard.
   ============================================================ */

/* Le bloc pose son propre fond : les pastilles s'en servent pour masquer
   le fil qui les relie, et doivent donc connaitre la couleur sur laquelle
   elles reposent. Sans cela, le bloc place sur une section teintee laisse
   apparaitre un disque plus sombre derriere chaque pastille. */
.roadmap-block {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2.5rem;
  max-width: 680px;
  margin-inline: auto;
  background-color: var(--bg);
}

.roadmap-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-gold-text);
  margin-bottom: 0.5rem;
}

.roadmap-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 0.25rem;
}

.roadmap-subtitle {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

.roadmap-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

/* La ligne verticale continue qui relie les jalons */
.roadmap-list::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background-color: var(--border);
  z-index: 0;
}

.roadmap-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-block: 0.875rem;
  position: relative;
}

.roadmap-bullet {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  z-index: 1;
  background-color: var(--bg);
  display: block;
}

.roadmap-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding-top: 0.0625rem;
}

.roadmap-text strong {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
}

.roadmap-text span {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.roadmap-item--todo .roadmap-text strong,
.roadmap-item--todo .roadmap-text span {
  color: var(--text-secondary);
}

/* --- Les liens d'un jalon --------------------------------------------- */

/* Chaque jalon porte ses propres sources, depliees a la demande : plus
   utile qu'un bloc unique en pied de liste, ou l'on ne savait plus a quelle
   etape chaque lien se rattachait. Meme mecanique que les autres
   depliants du site : <details> natif, chevron maison, rien en JS. */
.jalon-liens {
  margin-top: 0.375rem;
}

.jalon-liens > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
}

.jalon-liens > summary::-webkit-details-marker { display: none; }

.jalon-liens > summary::before {
  content: '▸';
  flex-shrink: 0;
  color: var(--accent-gold);
  font-size: 0.75rem;
  transition: transform 180ms ease;
}

.jalon-liens[open] > summary::before { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
  .jalon-liens > summary::before { transition: none; }
}

.jalon-liens > summary:hover { color: var(--accent-gold-text); }

.jalon-liens > summary:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Les liens s'alignent sur le libelle, pas sur le chevron. */
.jalon-liens ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0.5rem 0 0;
  padding-left: 1.125rem;
}

.jalon-liens a {
  font-size: 0.8125rem;
  color: var(--accent-gold-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.jalon-liens a:hover { border-bottom-color: var(--accent-gold); }

.jalon-liens a:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (max-width: 767px) {
  .roadmap-block { padding: 1.5rem; }
}