/*
 * Page « Nos mises à jour » (/updates).
 * Utilise uniquement les tokens et composants du design system (static/css/ds/). Préfixe : up-
 * Sans JavaScript, toutes les années et tous les textes sont visibles ; updates.js ajoute le choix d'année
 * (attribut hidden) et le repli des textes longs (classe is-collapsible).
 */

.up {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-10);
}

/* --- Introduction ---------------------------------------------- */
.up-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5vw, 56px) clamp(22px, 5vw, 56px);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-sm);
}

.up-hero::before,
.up-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.up-hero::before {
  width: 360px;
  height: 360px;
  right: -120px;
  top: -150px;
  background: var(--ds-accent-soft);
}

.up-hero::after {
  width: 220px;
  height: 220px;
  right: 110px;
  bottom: -160px;
  background: var(--ds-primary-soft);
}

.up-hero > * {
  position: relative;
  z-index: 1;
}

.up-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  margin: 0 0 var(--ds-space-4);
  padding: 6px 14px;
  border-radius: var(--ds-radius-badge);
  background: var(--ds-primary-soft);
  color: var(--ds-primary-text);
  font-size: var(--ds-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.up-title {
  max-width: 14em;
  margin: 0;
  font-family: var(--ds-font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 5vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ds-text);
}

.up-title em {
  font-style: normal;
  color: var(--ds-accent-text);
}

.up-lead {
  max-width: 38em;
  margin: var(--ds-space-4) 0 0;
  font-size: clamp(1rem, 2.2vw, 1.1rem);
  color: var(--ds-text-2);
}

.up-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  margin: var(--ds-space-6) 0 0;
  padding: 0;
  list-style: none;
}

.up-facts li {
  padding: 6px 14px;
  border-radius: var(--ds-radius-xs);
  background: var(--ds-surface-2);
  color: var(--ds-text-2);
  font-size: var(--ds-text-sm);
}

.up-facts strong {
  color: var(--ds-text);
  font-weight: 600;
}

/* --- Mise en page : années à gauche, frise à droite ------------------ */
.up-layout {
  display: grid;
  grid-template-columns: 188px minmax(0, 1fr);
  gap: var(--ds-space-8);
  align-items: start;
}

/* --- Choix de l'année ------------------------------------------ */
.up-years {
  position: sticky;
  top: 110px; /* sous l'en-tête fixe du site */
}

.up-years__label {
  margin: 0 0 var(--ds-space-3);
  padding-left: var(--ds-space-3);
  color: var(--ds-text-3);
  font-size: var(--ds-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.up-years__list {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-shell a.up-year {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3);
  padding: 10px 14px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
  color: var(--ds-text-2);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--ds-duration) var(--ds-ease), border-color var(--ds-duration) var(--ds-ease), color var(--ds-duration) var(--ds-ease);
}

.ds-shell a.up-year:hover {
  border-color: var(--ds-border-strong);
  background: var(--ds-surface-hover);
  color: var(--ds-text);
}

.ds-shell a.up-year[aria-current] {
  border-color: var(--ds-primary);
  background: var(--ds-primary);
  color: var(--ds-on-primary);
}

.up-year__count {
  min-width: 28px;
  padding: 1px 8px;
  border-radius: var(--ds-radius-xs);
  background: var(--ds-surface-2);
  color: var(--ds-text-3);
  font-size: var(--ds-text-xs);
  font-weight: 600;
  text-align: center;
}

.ds-shell a.up-year[aria-current] .up-year__count {
  background: color-mix(in srgb, var(--ds-on-primary) 22%, transparent);
  color: var(--ds-on-primary);
}

/* --- Frise ------------------------------------------------------ */
.up-panel {
  scroll-margin-top: 110px;
}

.up-panel[hidden] {
  display: none;
}

.up-panel__title {
  margin: 0 0 var(--ds-space-6);
  font-family: var(--ds-font-display);
  font-weight: 500;
  font-size: var(--ds-text-xl);
  line-height: 1.2;
  color: var(--ds-text);
}

.up-panel__title span {
  margin-left: var(--ds-space-2);
  color: var(--ds-text-3);
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-sm);
  font-weight: 400;
}

.up-panel + .up-panel {
  margin-top: var(--ds-space-10);
}

.up-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-6);
  margin: 0;
  padding: 0 0 0 36px;
  list-style: none;
}

/* Le trait vertical */
.up-list::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 2px;
  background: var(--ds-border-strong);
}

.up-item {
  position: relative;
}

/* Le point de chaque mise à jour */
.up-item::before {
  content: "";
  position: absolute;
  left: -36px;
  top: 30px;
  width: 16px;
  height: 16px;
  border: 4px solid var(--ds-primary);
  border-radius: 50%;
  background: var(--ds-bg);
}

.up-item--latest::before {
  border-color: var(--ds-accent);
  background: var(--ds-accent);
  box-shadow: 0 0 0 5px var(--ds-accent-soft);
}

/* --- Carte d'une mise à jour ------------------------------------ */
.up-card {
  scroll-margin-top: 110px;
  transition: box-shadow var(--ds-duration) var(--ds-ease);
}

.up-card:target {
  box-shadow: var(--ds-focus-ring), var(--ds-shadow-sm);
}

.up-card__head {
  position: relative;
  padding: var(--ds-space-6) var(--ds-space-6) var(--ds-space-4);
}

.up-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-3);
  margin-bottom: var(--ds-space-3);
}

.up-date {
  color: var(--ds-text-2);
  font-size: var(--ds-text-sm);
}

.up-date i {
  margin-right: 4px;
  color: var(--ds-text-3);
}

.ds-shell a.up-permalink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: var(--ds-space-4);
  right: var(--ds-space-4);
  width: 34px;
  height: 34px;
  border-radius: var(--ds-radius-xs);
  color: var(--ds-text-3);
  text-decoration: none;
  transition: background var(--ds-duration) var(--ds-ease), color var(--ds-duration) var(--ds-ease);
}

.ds-shell a.up-permalink:hover {
  background: var(--ds-surface-2);
  color: var(--ds-primary-text);
}

.up-card__title {
  margin: 0;
  font-family: var(--ds-font-display);
  font-weight: 500;
  font-size: var(--ds-text-lg);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ds-text);
}

/* --- Texte (Markdown rendu par le serveur) ------------------------ */
.up-prose {
  position: relative;
  padding: 0 var(--ds-space-6) var(--ds-space-6);
  color: var(--ds-text-2);
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.up-prose > :first-child {
  margin-top: 0;
}

.up-prose > :last-child {
  margin-bottom: 0;
}

.up-prose p {
  margin: 0 0 1em;
}

.up-prose strong {
  color: var(--ds-text);
  font-weight: 600;
}

.up-prose h4,
.up-prose h5,
.up-prose h6 {
  margin: 1.4em 0 0.5em;
  font-family: var(--ds-font-display);
  font-weight: 500;
  font-size: var(--ds-text-base);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ds-text);
}

.up-prose h5,
.up-prose h6 {
  font-size: var(--ds-text-sm);
}

.up-prose hr {
  height: 0;
  margin: 1.6em 0;
  border: 0;
  border-top: 1px solid var(--ds-border);
}

.up-prose ul,
.up-prose ol {
  margin: 0 0 1em;
  padding-left: 1.3em;
}

.up-prose li {
  margin: 0.45em 0;
}

.up-prose li::marker {
  color: var(--ds-primary-text);
}

.up-prose li > ul,
.up-prose li > ol {
  margin: 0.4em 0 0;
}

.ds-shell .up-prose a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.up-prose blockquote {
  margin: 1.2em 0;
  padding: var(--ds-space-3) var(--ds-space-4);
  border-left: 3px solid var(--ds-accent);
  border-radius: 0 var(--ds-radius-sm) var(--ds-radius-sm) 0;
  background: var(--ds-surface-2);
}

.up-prose code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--ds-surface-2);
  color: var(--ds-text);
  font-size: 0.9em;
}

.up-prose pre {
  margin: 1.2em 0;
  padding: var(--ds-space-4);
  overflow-x: auto;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface-2);
}

.up-prose pre code {
  padding: 0;
  background: none;
}

/* --- Texte long replié (posé par updates.js) --------------------- */
.up-prose.is-collapsible:not(.is-expanded) {
  max-height: 320px;
  overflow: hidden;
}

.up-prose.is-collapsible:not(.is-expanded)::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 110px;
  background: linear-gradient(to bottom, transparent, var(--ds-surface));
  pointer-events: none;
}

.up-more {
  padding: 0 var(--ds-space-6) var(--ds-space-6);
}

.up-more .ds-btn i {
  transition: transform var(--ds-duration) var(--ds-ease);
}

.up-more .ds-btn[aria-expanded="true"] i {
  transform: rotate(180deg);
}

/* --- Apparition d'une année ------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .up-panel.is-entering .up-item {
    animation: up-in 360ms var(--ds-ease) both;
  }

  .up-panel.is-entering .up-item:nth-child(2) { animation-delay: 50ms; }
  .up-panel.is-entering .up-item:nth-child(3) { animation-delay: 100ms; }
  .up-panel.is-entering .up-item:nth-child(n+4) { animation-delay: 150ms; }
}

@keyframes up-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* --- Tablette et mobile ----------------------------------------- */
@media (max-width: 900px) {
  .up-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ds-space-6);
  }

  .up-years {
    position: static;
  }

  .up-years__label {
    display: none;
  }

  .up-years__list {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: var(--ds-space-1);
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .ds-shell a.up-year {
    flex-shrink: 0;
    scroll-snap-align: start;
  }
}

@media (max-width: 600px) {
  .up {
    gap: var(--ds-space-8);
  }

  .up-list {
    padding-left: 28px;
  }

  .up-list::before {
    left: 5px;
  }

  .up-item::before {
    left: -28px;
    top: 24px;
    width: 12px;
    height: 12px;
    border-width: 3px;
  }

  .up-card__head {
    padding: var(--ds-space-5) var(--ds-space-5) var(--ds-space-3);
  }

  .ds-shell a.up-permalink {
    top: var(--ds-space-3);
    right: var(--ds-space-3);
  }

  .up-prose {
    padding: 0 var(--ds-space-5) var(--ds-space-5);
  }

  .up-more {
    padding: 0 var(--ds-space-5) var(--ds-space-5);
  }

  .up-card__title {
    font-size: var(--ds-text-base);
  }
}