.tnc-chronologie{
  --tnc-max: 1100px;
  --tnc-nav-w: 140px;
  --tnc-col-gap: clamp(44px, 6vw, 96px);
  --tnc-row-gap: var(--tnc-row-gap); /* gap between left/right columns (center space) */
  color: var(--tnc-card-text);
}

.tnc-chronologie__layout{
  max-width: var(--tnc-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--tnc-nav-w) 1fr;
  gap: clamp(18px, 3vw, 36px);
  align-items: start;
}

/* Sticky year navigation (left rail) */
.tnc-chronologie__nav{
  position: sticky;
  top: 90px;
  align-self: start;
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}

.tnc-chronologie__navInner{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Each year is an independent small "card" */
.tnc-chronologie__navItem{
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 14px;
  color: var(--tnc-nav-text);
  background: var(--tnc-nav-bg);
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 10px 24px rgba(0,0,0,0.05);
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
  width: 100%;
  box-sizing: border-box;
}
.tnc-chronologie__navItem:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.07);
}
.tnc-chronologie__navItem:active{ transform: translateY(0); }

.tnc-chronologie__navItem.is-active{
  background: color-mix(in srgb, var(--tnc-nav-active) 12%, var(--tnc-nav-bg));
  outline: 1px solid color-mix(in srgb, var(--tnc-nav-active) 40%, transparent);
}

.tnc-chronologie__navYear{
  font-weight: 700;
  letter-spacing: 0.2px;
  font-size: 14px;
}

/* Cards: two distinct columns, no central line */
.tnc-chronologie__cards{
  /* Center the whole two-column timeline area within the page */
  width: min(var(--tnc-cards-w, 920px), 100%);
  justify-self: center;

  /* Each event is a ROW, with two distinct columns inside (true quinconce) */
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--tnc-row-gap);
  align-items: start;
}

/* Each card row is a 2-column grid: left card OR right card */
.tnc-card{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--tnc-col-gap);
  align-items: start;
}

/* Place inner card in the correct column (quinconce) */
.tnc-card.tnc-left  .tnc-card__inner{ grid-column: 1; }
.tnc-card.tnc-right .tnc-card__inner{ grid-column: 2; }

/* Optional: keep empty column truly empty (no stretching weirdness) */
.tnc-card__inner{ justify-self: stretch; }
/* Place items in left/right column (quinconce) */
.tnc-card{ display: grid; }

.tnc-card__inner{
  position: relative;
  background: var(--tnc-card-bg);
  border: 1px solid var(--tnc-card-border);
  border-radius: var(--tnc-card-radius, 18px);
  padding: clamp(14px, 2.4vw, 18px);
  box-shadow: 0 18px 40px rgba(0,0,0,var(--tnc-card-shadow, 0.12));
  opacity: var(--tnc-card-opacity-inactive, 0.10);
  transform: translateY(12px);
  transition: opacity .35s ease, transform .35s ease, box-shadow .35s ease;
}

.tnc-card.is-revealed .tnc-card__inner{
  transform: translateY(0);
}

.tnc-card.is-active .tnc-card__inner{
  opacity: 1;
}

/* Blue dot ONLY for big text cards, positioned toward center */
.tnc-card__edgeDot{
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--tnc-dot);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--tnc-dot) 14%, transparent);
  z-index: 2;
  transform: translateY(-50%);
}

/* Left column: dot on right edge (toward center) */
.tnc-card.tnc-left .tnc-card__edgeDot{
  right: calc(-1 * (var(--tnc-col-gap) / 2));
}

/* Right column: dot on left edge (toward center) */
.tnc-card.tnc-right .tnc-card__edgeDot{
  left: calc(-1 * (var(--tnc-col-gap) / 2));
}

.tnc-card__header{
  display: block;
  margin-bottom: 10px;
}

.tnc-card__year{ font-size: 18px; font-weight: 750; }
.tnc-card__label{
  font-size: 13px;
  color: color-mix(in srgb, var(--tnc-card-text) 70%, #ffffff);
  margin-top: 2px;
}

.tnc-card__media{
  margin: 12px 0 10px;
  border-radius: calc(var(--tnc-card-radius, 18px) - 6px);
  overflow: hidden;
}
.tnc-card__media img{ width:100%; height:auto; display:block; }

.tnc-card__content{ line-height: 1.55; }
.tnc-card__content p:last-child{ margin-bottom: 0; }

/* Accessible focus */
.tnc-chronologie__navItem:focus-visible{
  outline: 2px solid var(--tnc-accent);
  outline-offset: 2px;
}

/* Responsive: nav becomes horizontal sticky bar, cards become 1 column */
@media (max-width: 880px){
  .tnc-chronologie__layout{ grid-template-columns: 1fr; }
  .tnc-chronologie__nav{ top: 70px; z-index: 20; }

  .tnc-chronologie__navInner{
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 10px;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }
  .tnc-chronologie__navItem{
    width: auto;
    white-space: nowrap;
  }

  .tnc-chronologie__cards{
    width: 100%;
    justify-self: stretch;
    grid-template-columns: 1fr;
  }
  .tnc-card{
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .tnc-card.tnc-left  .tnc-card__inner,
  .tnc-card.tnc-right .tnc-card__inner{ grid-column: 1; }

  /* On mobile, dots are hidden (center axis no longer exists in 1-col) */
  .tnc-card__edgeDot{ display: none; }
}

/* Explicitly no top/bottom fade masks */