/* =====================================================================
   BIOGRAPHIE.CSS - Styles propres à biographie.html
   ===================================================================== */

/* ---- Fiche d'identité ---- */
.id-field { display: flex; align-items: flex-start; gap: .9rem; }
.id-ic {
  width: 2.5rem; height: 2.5rem; border-radius: .75rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-50); color: var(--blue-700);
  border: 1px solid rgba(0, 87, 168, 0.12);
}
.id-field dt { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-400); margin-bottom: .15rem; }
.id-field dd { font-size: .95rem; font-weight: 500; color: var(--blue-900); line-height: 1.35; }

/* ---- Récit biographique : badge année ---- */
.bio-media { position: relative; }
.bio-year {
  position: absolute; z-index: 3; top: -1rem; left: -0.5rem;
  font-family: 'Cormorant Garamond', serif; font-weight: 700;
  font-size: 1.1rem; letter-spacing: .05em;
  background: var(--grad-gold); color: var(--blue-950);
  padding: .4rem 1.1rem; border-radius: 9999px;
  box-shadow: 0 10px 22px -10px rgba(212, 160, 23, .7);
}

/* ---- Filtres timeline (pills) ---- */
.tl-filters {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
  margin-bottom: 3rem;
}
.tl-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1.25rem; border-radius: 9999px;
  font-size: .85rem; font-weight: 600; color: var(--slate-600);
  background: #fff; border: 1px solid rgba(0, 87, 168, 0.14);
  cursor: pointer; transition: all .25s var(--ease);
}
.tl-pill:hover { border-color: var(--blue-500); color: var(--blue-700); }
.tl-pill.active { background: var(--blue-700); color: #fff; border-color: var(--blue-700); box-shadow: 0 10px 22px -12px rgba(0, 61, 122, .6); }
.tl-pill .dot { width: 9px; height: 9px; border-radius: 9999px; }
.tl-pill .dot.blue { background: var(--blue-700); }
.tl-pill .dot.gold { background: var(--gold-500); }
.tl-pill .dot.red { background: var(--red-600); }
.tl-pill.active .dot { outline: 2px solid rgba(255,255,255,.6); }

/* ---- Timeline verticale ---- */
.tl-full { position: relative; list-style: none; }
.tl-full::before {
  content: ''; position: absolute; top: 6px; bottom: 6px; left: 7px;
  width: 2px; background: var(--blue-100);
}
.tl-full__item {
  position: relative; padding-left: 2.75rem; margin-bottom: 1.5rem;
  transition: opacity .4s var(--ease), transform .4s var(--ease), max-height .4s var(--ease);
}
.tl-full__dot { position: absolute; left: 0; top: 1.4rem; }
.tl-full__card { padding: 1.25rem 1.5rem; }
.tl-full__year {
  display: inline-block; font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem; font-weight: 700; color: var(--blue-900); line-height: 1; margin-bottom: .35rem;
}
.tl-full__card p { color: var(--slate-600); font-weight: 500; }
.tl-full__item.is-hidden {
  opacity: 0; transform: translateY(-6px);
  max-height: 0; margin-bottom: 0; overflow: hidden; pointer-events: none;
}

/* Desktop : cartes alternées gauche / droite */
@media (min-width: 900px) {
  .tl-full::before { left: 50%; transform: translateX(-50%); }
  .tl-full__item { width: 50%; padding-left: 0; margin-bottom: 2rem; }
  .tl-full__dot { left: auto; }
  .tl-full__item:nth-child(odd) {
    left: 0; padding-right: 3rem; text-align: right;
  }
  .tl-full__item:nth-child(odd) .tl-full__dot { right: -8px; left: auto; top: 1.4rem; }
  .tl-full__item:nth-child(even) {
    left: 50%; padding-left: 3rem;
  }
  .tl-full__item:nth-child(even) .tl-full__dot { left: -7px; top: 1.4rem; }
}