/* =========================================================
   ODTR — Page « Programmation / Saison » (surcouche de cine.css)
   Réutilise les tokens + le système de scènes de la maquette
   cinématique. Ajoute : une LIGNE DU TEMPS annuelle (rail droit)
   et l'habillage des scènes d'événement (méta + doubles CTA).
   ========================================================= */

/* Lien de nav actif (page courante) */
.nav a[aria-current]{opacity:1;color:var(--vert-clair)}
.nav a[aria-current]::after{width:100%}

/* ---------- LIGNE DU TEMPS (rail droit, remplace .chapitres) ---------- */
.ligne-temps{position:fixed;right:clamp(16px,2.2vw,42px);top:50%;transform:translateY(-50%);
  z-index:40;display:flex;flex-direction:column;gap:12px;max-height:86vh}
.lt-annee{text-align:right;line-height:1;margin-bottom:2px}
.lt-annee b{font-family:var(--serif);font-weight:500;font-size:1.05rem;color:#fff;letter-spacing:.03em}
.lt-annee small{display:block;font-family:var(--ui);font-size:.54rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--vert-clair);font-weight:700;margin-top:5px}

.lt-piste{position:relative;display:flex;flex-direction:column;gap:clamp(7px,1.3vh,15px);padding:8px 0}
/* l'axe de l'année */
.lt-piste::before{content:"";position:absolute;right:5px;top:7px;bottom:7px;width:2px;
  background:rgba(255,255,255,.16);border-radius:2px}
/* progression remplie jusqu'à l'événement actif */
.lt-progress{position:absolute;right:5px;top:7px;width:2px;height:0;border-radius:2px;z-index:0;
  background:linear-gradient(180deg,var(--vert-clair),var(--vert));
  box-shadow:0 0 10px rgba(195,205,131,.7);transition:height .55s cubic-bezier(.2,.8,.2,1)}

/* Groupe d'un mois — peut contenir PLUSIEURS événements */
.lt-mgroupe{display:flex;flex-direction:column;gap:clamp(6px,1vh,11px);position:relative}
.lt-mtete{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding-right:24px;
  font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--vert-clair);opacity:.85}
.lt-mtete::after{content:"";width:8px;height:1px;background:rgba(195,205,131,.5)}
/* repère « plusieurs dates » quand le mois a 2 événements ou + */
.lt-mtete em{font-style:normal;font-size:.52rem;letter-spacing:.08em;color:rgba(255,255,255,.6);
  text-transform:none;font-weight:600}
@media(max-width:1024px){.lt-mtete em{display:none}}

.lt-node{display:flex;align-items:center;gap:12px;justify-content:flex-end;position:relative;z-index:1;
  background:none;border:0;color:#fff;cursor:pointer;padding:0;font:inherit}
.lt-txt{display:flex;flex-direction:column;text-align:right;line-height:1.12}
.lt-mois{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:rgba(255,255,255,.55);transition:color .3s}
.lt-titre{font-size:.74rem;font-weight:600;white-space:nowrap;max-width:0;overflow:hidden;opacity:0;
  transform:translateX(6px);transition:max-width .4s ease,opacity .35s ease,transform .35s ease,color .3s;color:#fff}
.lt-dot{width:11px;height:11px;border-radius:50%;border:1.6px solid rgba(255,255,255,.55);
  background:var(--bleu-encre);flex:none;transition:.3s;position:relative;z-index:1}

.lt-node:hover .lt-mois{color:var(--vert-clair)}
.lt-node:hover .lt-titre{max-width:220px;opacity:.9;transform:none}
.lt-node.on .lt-mois{color:var(--vert-clair)}
.lt-node.on .lt-titre{max-width:240px;opacity:1;transform:none;color:var(--vert-clair)}
.lt-node.on .lt-dot{background:var(--vert-clair);border-color:var(--vert-clair);transform:scale(1.4);
  box-shadow:0 0 14px rgba(195,205,131,.9)}
.lt-node:focus-visible{outline:2px solid var(--vert-clair);outline-offset:4px;border-radius:4px}

@media(max-width:1024px){.lt-titre{display:none}}      /* moyen : mois + points seulement */
@media(max-width:820px){.ligne-temps{display:none}}    /* mobile : les scènes se suffisent */

/* ---------- SCÈNE D'ÉVÉNEMENT ---------- */
.evt-scene .inner{max-width:660px}
.evt-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.evt-num{font-family:var(--serif);font-size:1.05rem;color:var(--vert-clair);letter-spacing:.06em}
.evt-num i{font-style:normal;color:rgba(255,255,255,.5);font-size:.82rem}
.puce{border:1px solid rgba(195,205,131,.5);color:var(--vert-clair);font-size:.6rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:5px 12px;border-radius:40px;background:rgba(1,0,42,.35)}

.evt-meta{list-style:none;display:flex;gap:clamp(20px,3vw,34px);flex-wrap:wrap;margin:22px 0 28px;padding:0}
.evt-meta li{display:flex;flex-direction:column;gap:4px}
.evt-meta li span{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--vert-clair);font-weight:700}
.evt-meta li b{font-size:.96rem;font-weight:500;color:#fff}
.evt-meta li b em{font-style:normal;color:var(--vert-clair)}

/* ---------- SCÈNE HERO (intro programmation) ---------- */
.lt-legende{display:flex;gap:22px;flex-wrap:wrap;margin-top:26px}
.lt-legende .lg{display:flex;align-items:center;gap:9px;font-size:.8rem;color:rgba(255,255,255,.82);font-weight:300}
.lt-legende .lg b{font-weight:600;color:#fff}
.lt-legende .pt{width:11px;height:11px;border-radius:50%;flex:none}
.lt-legende .pt.vert{background:var(--vert-clair);box-shadow:0 0 10px rgba(195,205,131,.8)}
.lt-legende .pt.creux{border:1.6px solid rgba(255,255,255,.55);background:var(--bleu-encre)}

/* ---------- SCÈNE BILLETTERIE (achat / réservation) ---------- */
.achat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:8px 0 24px}
@media(max-width:820px){.achat-row{grid-template-columns:1fr}}
.tarifs-note{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:26px}
.tarifs-note .tn{border-left:2px solid var(--vert);padding-left:14px;max-width:220px}
.tarifs-note .tn b{font-family:var(--serif);color:var(--vert-clair);font-size:1.02rem;display:block;margin-bottom:4px}
.tarifs-note .tn span{font-size:.82rem;color:rgba(255,255,255,.75);font-weight:300}