/* ===== Frise horizontale pinnée ===== */
:root{
  /* Ajuste si ta navbar + event-bar cumulées sont plus hautes */
  --sticky-top: 84px;
}

.history-pin { /* hauteur recalculée en JS; met une valeur par défaut */
  position: relative;
  height: 200vh; /* fallback si JS off */
}

.history-sticky{
  position: sticky;
  top: var(--sticky-top);
  height: calc(100vh - var(--sticky-top));
  overflow: hidden;
  background: linear-gradient(180deg, rgba(0,226,166,.06), rgba(0,226,166,.02));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Barre des années (collée en haut du bloc sticky) */
.history-years{
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 1.25rem;
  align-items: center;
  padding: .5rem .85rem;
  background: rgba(16,23,34,.65);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 999px;
  z-index: 2;
}
.history-years a{
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  padding: .25rem .5rem;
  /* border-left: 3px solid transparent; */
  transition: color .25s ease, border-color .25s ease, transform .2s ease;
}
.history-years a:hover{ color: var(--text); transform: translateY(-1px); }
.history-years a.active{
  color: #05332a;
  border: 2px solid var(--brand);
  /* background: linear-gradient(90deg, var(--brand), #2ee1b5); */
  /* border-left-color: transparent; */
  border-radius: 999px;
  padding: .35rem .8rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}


/* Viewport + track horizontale */
.history-viewport{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.history-track{
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform .06s linear; /* lissé léger */
}

/* Un panneau = 100vw -> une année à la fois */
.history-item{
  flex: 0 0 100vw;
  max-width: 100vw;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 2rem;
}
.history-card{
  width: min(820px, 86vw);
  padding: clamp(24px, 3vw, 40px);
  background: rgba(16,23,34,0.75);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
}
.history-card .year{
  font: 700 1.8rem/1.1 "Poppins", sans-serif;
  color: var(--brand);
  margin: 0 0 .5rem;
  margin-bottom: 40px;
}
.history-card p{ margin: 0; opacity: .92; }

/* Ligne de frise au milieu (option esthétique) */
.history-viewport::before{
  content:"";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 2px;
  background: var(--line);
  z-index: 0;
}

/* Accessibilité / réduit les animations */
@media (prefers-reduced-motion: reduce){
  .history-track{ transition: none !important; }
}


/* Bloc timeline / card */
/* .timeline-item {
  flex: 0 0 300px;
  background: var(--surface-3);
  padding: 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  text-align: center; /* garde le titre principal centré */
  /* position: relative;
  z-index: 1;
}  */



/* Titre principal (année) centré */
.timeline-item .year {
  font: 700 1.5rem "Poppins", sans-serif;
  color: var(--brand);
  text-align: center;
  margin-bottom: 40px;
}

/* Sous-titres (h4) alignés à gauche */
.timeline-item h4 {
  text-align: left;
  font: 600 1.05rem "Poppins", sans-serif;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  color: var(--text);
}

/* Texte justifié */
.timeline-item p {
  text-align: justify;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text);
  opacity: 0.9;
}

/* Style des listes TURBOPROG */
.history-listing {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.history-listing li {
  position: relative;
  font-size: 18px;
  text-align: left;
  padding-left: 1.8rem;
  color: var(--text);
  line-height: 1.5;
}

/* Icône/bulle avant chaque item */
.history-listing li::before {
  content: "";
  position: absolute;
  top: 0.6rem;
  left: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--brand), #2ee1b5);
  box-shadow: 0 0 6px rgba(0, 226, 166, 0.7);
}


.intro p {
    padding-top: 20px !important;
}

p {
    font-size: 18px !important;
}

h3 {
    font-size: 27px !important;
}

h4 {
    font-size: 20px !important;
}

/* Card Crédits */
.credits-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-top: 2rem;
  box-shadow: var(--shadow);
  text-align: left;
}

.credits-card h4 {
  margin-bottom: 1rem;
  color: var(--brand);
  font-weight: 600;
}

.credits-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.credits-card ul li {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  color: var(--text);
}

.credits-card a {
  color: var(--brand);
  text-decoration: none;
}

.credits-card a:hover {
  text-decoration: underline;
}

/* Bouton article */

.credit {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: 1rem;
}

.credit-badge {
  background: linear-gradient(90deg, var(--brand), #2ee1b5);
  color: #05332a;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

.credit-name {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
}


.reading-time-wrapper {
  position: sticky;
  top: 90px; /* reste sous ta barre sticky */
  width: 100%;
  text-align: center;
  margin-top: 0.5rem;
  z-index: 10;
}

.reading-time {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.4rem 1.2rem;
  font-size: 0.9rem;
  color: var(--text);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  backdrop-filter: blur(6px);
}

.reading-time .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand);
  display: inline-block;
}

.reading-time .scroll-hint {
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--line);
  color: #fff;
  width: 38px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: default;
  animation: pulse 1.6s infinite;
}

.reading-time .scroll-hint i {
  font-size: 1rem;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 226, 166, 0.6);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(0, 226, 166, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 226, 166, 0);
  }
}


/* ===================== */
/*  MOBILE / SMALL SCREENS
   - Empilement vertical (plus lisible)
   - Barre des années scrollable
   - Typo et paddings adaptés
   - On désactive les effets "sticky/horizontal" trop serrés sur petit écran
/* ===================== */

@media (max-width: 992px) {
  :root {
    --sticky-top: 72px; /* léger gain de place sur laptop 13"/tablette */
  }

  .history-card {
    width: min(720px, 92vw);
    padding: clamp(18px, 2.6vw, 28px);
  }

  .history-years {
    top: 8px;
    gap: .75rem;
    padding: .4rem .6rem;
  }

  .history-viewport::before { opacity: .6; } /* ligne de frise plus discrète */
}

@media (max-width: 768px) {
  /* 1) On sort du layout horizontal/sticky pour empiler les cartes */
  .history-pin {
    height: auto !important; /* ne plus forcer 200vh */
  }

  .history-sticky {
    position: relative;
    top: 0;
    height: auto;
    overflow: visible;
    background: transparent; /* alléger le fond sur mobile */
    border: none;
  }

  .history-viewport {
    height: auto;
    overflow: visible;
  }

  .history-track {
    display: block;              /* au lieu de flex horizontal */
    height: auto;
    will-change: auto;
    transition: none;
  }

  .history-item {
    /* Chaque panneau devient une section à la suite */
    flex: 0 0 auto;
    max-width: 100%;
    height: auto;
    display: block;
    padding: 1rem 1rem 1.25rem;
  }

  .history-card {
    width: 100%;
    border: 1px solid var(--line);
    background: rgba(16,23,34,0.72);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-align: left; /* plus naturel en lecture mobile */
  }

  /* 2) Ligne médiane de frise inutile en empilement */
  .history-viewport::before { display: none; }

  /* 3) Barre des années : pleine largeur & scrollable */
  .history-years {
    position: sticky;   /* reste visible pendant le scroll vertical */
    top: 8px;
    left: 0;
    right: 0;
    transform: none;
    margin: 0 .5rem;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    gap: .5rem;
  }

  .history-years a {
    white-space: nowrap;
    font-size: .9rem;
    padding: .3rem .6rem;
  }

  .history-years a.active {
    padding: .35rem .7rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.22);
  }

  /* 4) Typo / lisibilité */
  .history-card .year { 
    font-size: 1.35rem;
    margin-bottom: 20px;
    text-align: left;
  }

  .timeline-item .year { font-size: 1.25rem; margin-bottom: 20px; }
  .timeline-item h4 { font-size: 1rem; }
  .timeline-item p { font-size: .98rem; line-height: 1.55; text-align: left; }

  p { font-size: 16px !important; }
  h3 { font-size: 22px !important; }
  h4 { font-size: 18px !important; }

  /* 5) Listes : meilleure densité visuelle */
  .history-listing { gap: .6rem; }
  .history-listing li { font-size: 16px; padding-left: 1.4rem; }
  .history-listing li::before { top: .5rem; width: 10px; height: 10px; }

  /* 6) Widget "reading-time" : compacité + éviter chevauchements */
  .reading-time-wrapper { top: 60px; margin-top: .25rem; }
  .reading-time {
    gap: .6rem;
    padding: .3rem .9rem;
    font-size: .85rem;
  }
  .reading-time .scroll-hint { width: 34px; height: 28px; }
}

/* Ultra-petits écrans */
@media (max-width: 380px) {
  .history-years { margin: 0 .35rem; gap: .4rem; }
  .history-years a { font-size: .85rem; padding: .28rem .5rem; }
  .history-card { padding: 14px; }
}