.header-link {
    color: #fff;                    /* stay white */
    text-decoration: none;          /* no underline by default */
}

.header-link:hover,
.header-link:focus {
    color: #fff;                    /* stay white on hover */
    text-decoration: underline;     /* show underline on hover/focus */
    text-decoration-color: #fff;    /* force underline to be white */
    text-underline-offset: 0.2em;   /* push underline a bit down = more visible */
}

/* keeps the right column visible while scrolling */
.year-nav-sticky {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding-bottom: 1rem;
  padding-right: .5rem;             /* NEW: avoid visual clipping on the edge */
}

/* responsive grid for the year buttons (legacy block) */
.year-nav-grid {
  display: grid;
  grid-template-columns: 1fr;       /* default: 1 column */
  gap: 0.5rem;                      /* space between buttons */
}

/* on medium+ screens, switch to 2 columns */
@media (min-width: 768px) {
  .year-nav-grid {
    grid-template-columns: 1fr 1fr; /* 2 columns */
  }
}

/* make sure each button stretches fully inside its grid cell */
.year-nav-grid .btn {
  width: 100%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  text-align: left;
  font-size: 0.8rem;                /* slightly tighter buttons */
  line-height: 1.2;

  /* NEW: cleaner look for multi-line labels */
  border-radius: .5rem;             /* flatter than rounded-pill */
  white-space: normal;              /* allow wrapping */
  hyphens: auto;                    /* nicer wrapping (fr) */
  overflow: hidden;                 /* trims anti-aliased “ears” */
  text-wrap: balance;               /* optional, modern browsers */
}

/* --------- New generic grid with variants --------- */
.nav-grid {
  display: grid;
  gap: 0.5rem;
}

/* --- VARIANTE COMPACTE (boutons courts : années) --- */
/* mobile par défaut : 1 colonne */
.nav-grid--compact {
  grid-template-columns: 1fr;
}

/* à partir de md : 2 colonnes */
@media (min-width: 768px) {
  .nav-grid--compact {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- VARIANTE LARGE (boutons longs) --- */
/* toujours 1 colonne, même sur desktop */
.nav-grid--wide {
  grid-template-columns: 1fr !important; /* force 1 col if reused in other contexts */
}

/* boutons dans la grille (appliqué aux deux variantes) */
.nav-grid .btn {
  width: 100%;
  text-align: left;                 /* left-align reads better for long labels */
  font-size: 0.8rem;
  line-height: 1.2;
  padding-left: 0.5rem;
  padding-right: 0.5rem;

  /* same visual tweaks as above */
  border-radius: .5rem;
  white-space: normal;
  hyphens: auto;
  overflow: hidden;
  text-wrap: balance;
}

/* 1) Titre un peu plus visible (sans crier) */
.stage-title {
  font-weight: 600;          /* semi-bold */
  font-size: 1.08rem;        /* un poil plus grand que 1rem */
  line-height: 1.2;
}

/* 2) Badge bien collé à droite : déjà assuré par ms-auto dans le header.
   (Rien à ajouter si tu gardes la <div class="d-flex w-100">) */

/* 4) Références : style simple et propre */
.stage-refs {
  border-top: 1px solid var(--bs-border-color);
  padding-top: .5rem;
  margin-top: .5rem;
}

.stage-refs-title {
  font-size: .875rem;
  color: var(--bs-secondary-color);
  margin-bottom: .25rem;
}

.stage-refs-list {
  margin: 0;
  padding-left: 1.25rem;   /* puces alignées proprement */
  font-size: .9rem;
  color: var(--bs-body-color);
}

.stage-refs-list li {
  margin-bottom: .25rem;
}




/* Chips inside the "former" cards */
#materials .chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .6rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: inherit;                 /* <- kills blue link color */
  text-decoration: none;          /* <- kills underline */
  font-size: .9rem;
  line-height: 1.2;
}

#materials .chip:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.26);
  color: inherit;                 /* keep text color stable on hover */
  text-decoration: none;
}

#materials .chip:active {
  transform: translateY(1px);
}

#materials .chip:focus-visible {
  outline: 2px solid rgba(80,170,255,.8);
  outline-offset: 2px;
  text-decoration: none;
}

/* Keep visited links same color as normal */
#materials .chip:visited {
  color: inherit;
}

/* Icon alignment */
#materials .chip .bi {
  font-size: 1rem;
  vertical-align: -0.175em;
}




.map-wrapper { position: relative; height: 320px; }
@media (min-width: 992px){ .map-wrapper { height: 480px; } }
#map.leaflet-map { position: absolute; inset: 0; }
/* Subtle link styling */
.link-underline:hover { text-decoration: underline; }
/* Keep visual parity with the sample (rounded + shadow) */
.soft-box { background: var(--bs-body-bg); }