/* ============ AGENDA HERO ============ */
.agenda-hero {
  position: relative;
  background: var(--primary);
  color: #fff;
  /* Pas de min-height : la bande épouse son contenu, padding vertical
     symétrique via --hero-pad-y → contenu optiquement centré (cf. .qsn-hero). */
  margin-top: var(--hero-nav-clear);
  padding: var(--hero-pad-y) var(--container-gutter);
  /* flex-start (et non center) : voir l'explication sur .qsn-hero — c'est ce
     qui aligne le fil d'Ariane de l'Agenda sur celui de Bail à ferme. */
  display: flex; flex-direction: column; justify-content: flex-start;
}
.agenda-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.08; mix-blend-mode: overlay; pointer-events: none;
}
.agenda-hero__inner {
  width: 100%;
  max-width: var(--container-max); margin: 0 auto;
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 3rem; align-items: center;
}
/* Même règle que .qsn-hero__inner : la colonne titre est calée en HAUT, sinon
   elle est centrée face au ticker (bien plus haut qu'elle) et le fil d'Ariane
   descend nettement plus bas que sur Bail à ferme ou Qui sommes-nous. */
.agenda-hero__inner > :first-child { align-self: start; }
.agenda-hero__eyebrow {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--secondary-light);
  display: inline-flex; align-items: center; gap: 0.65rem;
  margin-bottom: 1rem;
}
.agenda-hero__eyebrow::before {
  content: ""; width: 28px; height: 1px;
  background: var(--secondary-light); opacity: 0.7;
}
.agenda-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 600; line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
  color: #fff; text-wrap: balance;
}
.agenda-hero__title em {
  /* ENG-45 item E : titres uniformes, plus d'orange/italique */
  font-style: normal; font-weight: inherit;
  color: inherit;
}
.agenda-hero__lead {
  font-size: 0.95rem; line-height: 1.7;
  color: rgba(255,255,255,0.78);
  margin: 0; max-width: 50ch;
}

/* Year ticker on right */
/* COMPACITÉ — c'est ce bloc qui pilotait la hauteur du héros Agenda. Avec ses
   valeurs d'origine (padding 1.5rem, rows 0.4rem, valeur 1.25rem) il mesurait
   ~186px, soit plus que la zone de contenu de la bande standard (14rem moins
   le padding vertical, ~136px) : le héros Agenda dépassait donc d'une
   cinquantaine de pixels celui de toutes les autres pages. Resserré ici pour
   que la bande retombe dans le gabarit commun. */
.agenda-hero__ticker {
  align-self: center;
  display: flex; flex-direction: column;
  gap: 0.35rem;
  padding: 0.75rem 1.25rem;
}
.agenda-hero__ticker-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.agenda-hero__ticker-row:last-child { border-bottom: 0; }
.agenda-hero__ticker-label {
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}
.agenda-hero__ticker-value {
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.agenda-hero__ticker-value em {
  font-style: italic; color: var(--secondary-light);
  font-size: 0.9rem; margin-left: 0.4rem;
}

/* ============ TOOLBAR (segmented + filters) ============ */
.agenda-page .toolbar {
  width: min(var(--container-max), 100% - 2 * var(--container-gutter));
  margin: 2.5rem auto 0;
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

/* Underline tabs */
.segmented {
  position: relative;
  display: inline-flex;
  gap: 1.75rem;
  border-bottom: 1px solid rgba(23,57,1,0.10);
  padding: 0;
}
.segmented__indicator { display: none; }
.segmented__btn {
  position: relative;
  border: 0; background: transparent;
  padding: 0.55rem 0 0.85rem;
  font-family: var(--font-sans);
  font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--on-surface-muted);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.55rem;
  transition: color .25s ease;
}
.segmented__btn::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.6,.05,.2,1);
}
.segmented__btn:hover { color: var(--primary); }
.segmented__btn[aria-selected="true"] { color: var(--primary); }
.segmented__btn[aria-selected="true"]::after { transform: scaleX(1); }
.segmented__btn[aria-selected="true"] .segmented__count {
  background: var(--primary); color: #fff;
}
.segmented__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--surface-high);
  color: var(--on-surface-muted);
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  transition: background .25s ease, color .25s ease;
}

.agenda-page .filters {
  display: inline-flex; gap: 0.4rem; align-items: center;
  flex-wrap: wrap;
}
.agenda-page .chip {
  background: var(--surface-lowest);
  color: var(--primary);
  border: 1px solid rgba(23,57,1,0.10);
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.4rem;
  transition: background .2s, color .2s, border-color .2s;
}
.agenda-page .chip:hover { background: var(--surface-low); }
.agenda-page .chip.is-active {
  background: var(--secondary); color: #fff;
  border-color: var(--secondary);
}
.agenda-page .chip svg { width: 12px; height: 12px; }
.agenda-page .chip[hidden] { display: none; }

.agenda-page .chip--toggle {
  background: transparent;
  color: var(--on-surface-muted);
  border: 1px dashed rgba(23,57,1,0.18);
}
.agenda-page .chip--toggle:hover {
  background: var(--surface-low);
  color: var(--primary);
  border-color: rgba(23,57,1,0.28);
}
.agenda-page .chip--toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.agenda-page .chip--toggle svg { transition: transform .25s ease; }

/* ============ AGENDA BODY ============ */
.agenda-body {
  width: min(var(--container-max), 100% - 2 * var(--container-gutter));
  margin: 2rem auto 0;
  padding: 0 0 5rem;
}

.panes { position: relative; }
.pane {
  transition: opacity .35s ease, transform .35s ease;
}
.pane.is-hidden {
  display: none;
}
.pane.is-leaving {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
.pane.is-entering {
  opacity: 0;
  transform: translateY(-8px);
}

/* ============ TIMELINE / MONTH GROUPS ============ */
.month-group {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 2.5rem;
  padding: 2rem 0;
  border-top: 1px solid rgba(23,57,1,0.10);
}
.month-group:first-child { border-top: 0; padding-top: 0.5rem; }

.month-label {
  position: sticky;
  top: 1.5rem;
  align-self: start;
  display: flex; flex-direction: column;
  gap: 0.4rem;
}
.month-label__name {
  font-family: var(--font-display);
  font-size: 1.8rem; font-weight: 600;
  color: var(--primary);
  line-height: 1;
  letter-spacing: -0.01em;
}
.month-label__year {
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--on-surface-muted);
  margin-top: 0.3rem;
}
.month-label__count {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  color: var(--on-surface-muted);
}
.month-label__count strong { color: var(--primary); font-weight: 700; }

.events { display: flex; flex-direction: column; gap: 1rem; }

/* ============ EVENT CARD ============ */
.event {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 1.25rem;
  align-items: stretch;
  background: var(--surface-lowest);
  border-radius: 1.2rem;
  padding: 1.5rem 1.75rem;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 0 rgba(23,57,1,0.03), 0 12px 32px -20px rgba(23,57,1,0.18);
  transition: transform .25s ease, box-shadow .25s ease;
  position: relative;
  overflow: hidden;
}
.event:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(23,57,1,0.04), 0 18px 44px -16px rgba(23,57,1,0.30);
}
.event:hover .event__title { color: var(--primary-mid); }

.event__date {
  display: flex; flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-right: 1rem;
  border-right: 1px solid rgba(23,57,1,0.08);
  line-height: 1;
}
.event__date-day {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: -0.02em;
}
.event__date-month {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--secondary);
  margin-top: 0.15rem;
}
.event__date-time {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--on-surface-muted);
  margin-top: 0.65rem;
  text-transform: uppercase;
}

.event__body {
  display: flex; flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.event__top {
  display: flex; align-items: center; gap: 0.55rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.event__category {
  font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--secondary);
}
.event__dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(23,57,1,0.28);
}
.event__type {
  font-size: 0.7rem;
  color: var(--on-surface-muted);
}
.event__title {
  font-family: var(--font-display);
  font-size: 1.3rem; font-weight: 600;
  color: var(--primary);
  line-height: 1.25; margin: 0 0 0.5rem;
  letter-spacing: -0.005em;
  transition: color .2s;
  text-wrap: balance;
}
.event__meta {
  display: flex; gap: 1.25rem;
  font-size: 0.82rem;
  color: var(--on-surface-muted);
  flex-wrap: wrap;
}
.event__meta-item { display: inline-flex; align-items: center; gap: 0.4rem; }

.event__cta {
  display: flex; flex-direction: column;
  align-items: flex-end; justify-content: center;
  gap: 0.65rem;
  flex-shrink: 0;
}
.event__pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.7rem 0.3rem 0.6rem;
  border-radius: 999px;
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  line-height: 1;
}
.event__pill::before {
  content: ""; width: 5px; height: 5px;
  border-radius: 50%; background: currentColor;
}
.pill--inscriptions { background: var(--primary); color: #fff; }
.pill--bientot { background: var(--primary); color: #fff; }
.pill--complet { background: var(--primary); color: #fff; }
.pill--membres { background: var(--primary); color: #fff; }
.pill--passe { background: rgba(120,115,106,0.15); color: var(--on-surface-muted); }
.pill--annonce { background: rgba(120,115,106,0.15); color: var(--on-surface-muted); }

.event__btn {
  font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--primary);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.4rem;
  transition: gap .2s;
}
.event__btn:hover { gap: 0.65rem; }

/* Featured event variant — first upcoming */
.event--featured {
  background: var(--primary);
  color: #fff;
  grid-template-columns: 96px 1fr auto;
  padding: 2rem 2rem;
}
.event--featured .event__date { border-right-color: rgba(255,255,255,0.18); }
.event--featured .event__date-day { color: #fff; }
.event--featured .event__date-month { color: var(--secondary-light); }
.event--featured .event__date-time { color: rgba(255,255,255,0.65); }
.event--featured .event__category { color: var(--secondary-light); }
.event--featured .event__type { color: rgba(255,255,255,0.65); }
.event--featured .event__dot { background: rgba(255,255,255,0.35); }
.event--featured .event__title { color: #fff; font-size: 1.5rem; }
.event--featured .event__meta { color: rgba(255,255,255,0.78); }
.event--featured .event__btn { color: #fff; }
/* Aucune pilule n'est lisible telle quelle sur la carte mise en avant : les
   unes portent `background: var(--primary)`, soit le fond même de la carte
   (elles perdent toute forme et ne laissent qu'un texte flottant), les autres
   un gris sourd pensé pour une carte claire. Le statut étant un libre choix de
   back-office, les six peuvent s'y retrouver : on donne donc le voile blanc par
   défaut à toutes, plutôt qu'une exception par statut à oublier une par une. */
.event--featured .event__pill {
  background: rgba(255,255,255,0.18);
  color: #fff;
}
/* Seule exception : « inscriptions ouvertes », qui doit ressortir — c'est
   l'action attendue sur l'événement mis en avant. */
.event--featured .pill--inscriptions {
  background: #f08a5c; color: #65332c;
}
.event--featured:hover { transform: translateY(-2px); }
.event--featured:hover .event__title { color: var(--secondary-light); }

/* Past variant — slightly muted */
.event--past {
  background: var(--surface-low);
  box-shadow: none;
}
.event--past:hover {
  background: var(--surface-lowest);
  box-shadow: 0 1px 0 rgba(23,57,1,0.03), 0 12px 32px -20px rgba(23,57,1,0.18);
}
.event--past .event__date { opacity: 0.85; }

/* ============ EMPTY / FOOT ============ */
.agenda-foot {
  margin-top: 3rem;
  text-align: center;
  color: var(--on-surface-muted);
  font-size: 0.85rem;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1000px) {
  /* Hero padding now governed by --hero-pad-top / --container-gutter tokens */
  .agenda-hero__inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .agenda-page .toolbar { margin-top: clamp(1.5rem, 2.5vw, 2rem); }
  .agenda-body { padding-bottom: 4rem; }
  .month-group { grid-template-columns: 1fr; gap: 1rem; padding: 1.5rem 0; }
  .month-label { position: static; flex-direction: row; align-items: baseline; gap: 0.75rem; }
  .month-label__year { margin-top: 0; }
  .month-label__count { display: none; }
  .event {
    grid-template-columns: 76px 1fr;
    gap: 1.25rem;
    padding: 1.25rem 1.4rem;
  }
  .event__cta { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; padding-top: 0.75rem; border-top: 1px solid rgba(23,57,1,0.06); }
  .event__date { padding-right: 1rem; }
  .event__date-day { font-size: 2.1rem; }
  .event--featured { padding: 1.5rem; }
  .event--featured .event__cta { border-top-color: rgba(255,255,255,0.18); }
}
/* AGENDA HERO — RESPONSIVE */
@media (max-width: 1000px) {
  .agenda-hero__inner { grid-template-columns: 1fr; gap: 2rem; align-items: start; }
  .agenda-hero__ticker { padding: 1.2rem 1.5rem; }
}
@media (max-width: 768px) {
  /* Clairance navbar gérée en marge ; padding symétrique conservé. */
  .agenda-hero__title { font-size: var(--page-title-size-mobile); }
  .agenda-hero__inner { gap: 1.5rem; }
  .agenda-hero__ticker { padding: 0; }
  .agenda-page .toolbar { margin-top: 2rem; }
}
@media (max-width: 600px) {
  .agenda-hero__ticker { padding: 0; }
  .segmented { gap: 1.25rem; }
  .segmented__btn { padding: 0.5rem 0 0.7rem; font-size: 0.72rem; letter-spacing: 0.06em; }
  .agenda-page .filters { gap: 0.35rem; }
  .agenda-page .chip { padding: 0.4rem 0.7rem; font-size: 0.7rem; }

  /* Move date & time to top of card */
  .event { grid-template-columns: 1fr; gap: 0.75rem; padding: 1.25rem; }
  .event__date { flex-direction: row; gap: 0.5rem; border: 0; border-bottom: 1px solid rgba(23,57,1,0.08); padding: 0 0 0.75rem 0; align-items: center; }
  .event__date-day { font-size: 1.6rem; flex-shrink: 0; }
  .event__date-month { font-size: 0.9rem; margin-top: 0; flex-shrink: 0; }
  .event__date-time { margin-top: 0; text-align: right; flex-shrink: 0; font-size: 0.65rem; margin-left: auto; }
  .event__title { font-size: 1.1rem; }

  /* Featured event mobile */
  .event--featured { grid-template-columns: 1fr; padding: 1.25rem; }
  .event--featured .event__date { flex-direction: row; gap: 0.5rem; border: 0; border-bottom: 1px solid rgba(255,255,255,0.18); padding: 0 0 0.75rem 0; align-items: center; }
  .event--featured .event__date-day { font-size: 1.8rem; }
  .event--featured .event__date-time { font-size: 0.7rem; margin-left: auto; }
  .event--featured .event__title { font-size: 1.2rem; }
}