/* ======================= WASCAL — Timeline Premium (scopé) ======================= */
.timeline{
  /* Tokens locaux (hérite si les vars globales existent) */
  --tl-accent:   var(--brand-accent, #16a34a);
  --tl-accent-2: var(--brand-accent-2, #84cc16);
  --tl-ink:      var(--brand-ink, #0f172a);
  --tl-muted:    var(--brand-muted, #475569);
  --tl-bg:       var(--brand-bg, #f6faf7);
  --tl-line:     color-mix(in hsl, var(--tl-ink) 10%, transparent);
  --tl-radius:   18px;
  --tl-shadow:   0 10px 28px rgba(2,6,23,.12);

  position:relative; isolation:isolate;
  padding: clamp(32px, 5vw, 70px) 12px;
  border-radius: var(--tl-radius);
  background:
    radial-gradient(1100px 520px at 0% 0%, color-mix(in hsl, var(--tl-accent-2) 10%, transparent), transparent 60%),
    radial-gradient(900px 420px at 95% 10%, color-mix(in hsl, var(--tl-accent) 12%, transparent), transparent 55%),
    var(--tl-bg);
  box-shadow: var(--tl-shadow);
  border:1px solid var(--tl-line);
}

/* En-tête */
.timeline .tl-head{ text-align:center; margin-bottom: clamp(18px, 3vw, 28px); }
.timeline .tl-head h2{
  margin:0 0 .4rem 0;
  font-weight:800; letter-spacing:-.01em; line-height:1.15;
  font-size: clamp(1.7rem, 2.6vw, 2.8rem);
  background: linear-gradient(90deg, var(--tl-accent), var(--tl-accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.timeline .tl-head p{ margin:.2rem 0 0; color:var(--tl-muted); }

/* Grille des entrées */
.tl-list{ list-style:none; margin:0; padding:0; display:grid; gap: clamp(18px, 2.4vw, 28px); }
.tl-item{
  position:relative;
  display:grid; gap:16px;
  grid-template-columns: 1.2fr .8fr;
  align-items:start;
  opacity:0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.tl-item.is-visible{ opacity:1; transform:none; }
@media (max-width: 800px){ .tl-item{ grid-template-columns:1fr; } }

/* Colonne texte → carte “verre” */
.tl-item .tl-col--text{
  background: color-mix(in hsl, var(--tl-bg) 92%, white 8%);
  border:1px solid var(--tl-line);
  border-radius: 16px;
  padding: clamp(16px, 2vw, 22px);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
}
.tl-item .tl-col--text .tl-date{
  display:inline-block; font-weight:800; letter-spacing:.02em;
  margin: 0 0 8px 0;
  padding: .38rem .7rem; border-radius:999px;
  color:#0a1f1a; font-size:.92rem;
  background: linear-gradient(135deg, var(--tl-accent), var(--tl-accent-2));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.tl-item .tl-col--text h3{ margin:.2rem 0 .25rem; color:var(--tl-ink); font-size: clamp(1.05rem, .7vw + .95rem, 1.28rem); font-weight:800; }
.tl-item .tl-col--text p{ margin:.35rem 0 0; color:var(--tl-muted); line-height:1.7; }

/* Colonne média */
.tl-media img{
  width:100%; height:auto; display:block; border-radius: 14px;
  border:1px solid var(--tl-line);
  box-shadow: 0 12px 30px rgba(5,20,35,.10);
  object-fit:cover;
}

/* État “vide” fournis par le plugin */
.tl-item.tl-empty{ grid-template-columns:1fr; text-align:center; opacity:.8; }

/* CTA (si présent) */
.tl-cta{ margin-top: clamp(18px, 2.4vw, 28px); text-align:center; }
.tl-cta .btn.btn-primary{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:.6rem;
  min-height:44px; padding:.9rem 1.3rem; border-radius:999px; font-weight:800; text-decoration:none;
  color:#fff; background: linear-gradient(135deg, var(--tl-accent), var(--tl-accent-2));
  box-shadow: 0 10px 26px rgba(22,163,74,.35), inset 0 0 0 1px rgba(255,255,255,.22);
}
.tl-cta .btn.btn-primary::before{
  content:""; position:absolute; width:200px; height:200px;
  left:var(--x,50%); top:var(--y,50%); transform:translate(-50%,-50%);
  background: radial-gradient(circle, color-mix(in hsl, var(--tl-accent) 45%, transparent), transparent 60%);
  transition:left .1s, top .1s; pointer-events:none;
}

/* Lightbox plugin (harmonisée) */
.tl-lightbox{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
}
.tl-lightbox-overlay{ position:absolute; inset:0; background: rgba(0,0,0,.65); backdrop-filter: blur(2px); }
.tl-lightbox-content{
  position:relative; background:#000; padding:12px; border-radius:12px;
  max-width:90vw; max-height:90vh; overflow:auto; box-shadow: 0 18px 48px rgba(0,0,0,.35);
}
.tl-lightbox-close{
  position:absolute; top:6px; right:8px; font-size:28px; background:none; color:#fff;
  border:none; cursor:pointer; line-height:1; width:38px; height:38px; border-radius:10px;
}
.tl-lightbox-close:hover{ background:rgba(255,255,255,.08); }

/* Mode sombre auto */
@media (prefers-color-scheme: dark){
  .timeline{ --tl-bg:#0b1320; --tl-ink:#e5e7eb; --tl-muted:#b6c1d2; }
}

/* Réduction d’animations */
@media (prefers-reduced-motion: reduce){
  .tl-item{ transition:none !important; opacity:1 !important; transform:none !important; }
}