:root {
  --fpep-orange: #f06423;
  --fpep-orange-dark: #d94d1f;
  /* Largeur standard Pépites, identique au --W des tokens de la home. */
  --fpep-w: 1350px;
  --fpep-ink: #151515;
  --fpep-text: #414141;
  --fpep-muted: #737373;
  --fpep-bg: #f7f4ee;
  --fpep-card: #ffffff;
  --fpep-soft: #fbfaf7;
  --fpep-line: #e5ded4;
  --fpep-shadow: 0 16px 40px rgba(18, 18, 18, .08);
  --fpep-ui: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-theme="dark"] body.festival-pep-page,
body.festival-pep-page.theme-dark,
body.festival-pep-page.dark-mode,
.dark body.festival-pep-page {
  --fpep-ink: #f7f4ee;
  --fpep-text: #ddd7ce;
  --fpep-muted: #aaa39b;
  --fpep-bg: #101010;
  --fpep-card: #191919;
  --fpep-soft: #242321;
  --fpep-line: #34302c;
  --fpep-shadow: 0 18px 46px rgba(0, 0, 0, .34);
}

body.festival-pep-page,
body.festival-pep-page * { box-sizing: border-box; }

body.festival-pep-page {
  margin: 0;
  background: var(--fpep-bg);
  color: var(--fpep-ink);
  font-family: var(--fpep-ui);
}

.festival-pep-main { background: var(--fpep-bg); }
.fpep-shell { width: min(var(--fpep-w, 1350px), calc(100% - 2rem)); margin: 0 auto; }

.fpep-index { padding: clamp(1.35rem, 2.4vw, 2.15rem) 0 clamp(4.8rem, 7vw, 6.8rem); }

.fpep-filter {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(135px, .55fr) minmax(230px, 1.35fr) repeat(2, minmax(145px, .72fr)) auto auto;
  gap: .72rem;
  align-items: end;
  margin: 0 auto clamp(2.45rem, 4.4vw, 3.6rem);
  padding: clamp(.82rem, 1.4vw, 1.05rem);
  border: 1px solid var(--fpep-line);
  border-radius: 18px;
  background: var(--fpep-card);
  box-shadow: var(--fpep-shadow);
}

.fpep-filter__count {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 40px;
  padding: .55rem .7rem;
  border-radius: 11px;
  background: var(--fpep-soft);
  color: var(--fpep-muted);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.25;
}
.fpep-filter__count strong { color: var(--fpep-ink); font-size: 1.05rem; line-height: 1; }

.fpep-filter label { display: grid; gap: .32rem; min-width: 0; }
.fpep-filter span,
.fpep-kicker {
  color: var(--fpep-orange-dark);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.fpep-filter input,
.fpep-filter select {
  width: 100%;
  height: 40px;
  border: 1px solid var(--fpep-line);
  border-radius: 9px;
  background: var(--fpep-card);
  color: var(--fpep-ink);
  font: 500 .88rem/1 var(--fpep-ui);
  padding: 0 .78rem;
}

.fpep-filter button,
.fpep-filter__reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 .92rem;
  border-radius: 9px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.fpep-filter button { border: 0; color: #fff; background: var(--fpep-orange); cursor: pointer; }
.fpep-filter button:hover { background: var(--fpep-orange-dark); }
.fpep-filter__reset { border: 1px solid var(--fpep-line); color: var(--fpep-ink); background: var(--fpep-card); }

.fpep-section { margin-top: clamp(2.55rem, 4.2vw, 3.85rem); }
.fpep-section__head { margin-bottom: clamp(1.05rem, 2vw, 1.45rem); }
.fpep-section__head--row {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: flex-start;
}
.fpep-kicker { display: block; margin: 0 0 .42rem; }
.fpep-section h2,
.fpep-empty h2 {
  margin: 0;
  color: var(--fpep-ink);
  font-family: var(--fpep-ui);
  font-size: clamp(1.55rem, 2.25vw, 2.15rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.03em;
}


.fpep-timeline {
  display: grid;
  gap: clamp(2.35rem, 4vw, 3.45rem);
}

.fpep-month {
  display: grid;
  gap: clamp(1rem, 1.8vw, 1.35rem);
}

.fpep-month__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--fpep-line);
}

.fpep-month__head .fpep-kicker { margin: 0 0 .35rem; }

.fpep-month__head h3 {
  margin: 0;
  color: var(--fpep-ink);
  font-size: clamp(1.18rem, 1.65vw, 1.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.fpep-month__head span {
  flex: 0 0 auto;
  color: var(--fpep-muted);
  font-size: .78rem;
  font-weight: 700;
}

.fpep-featured__grid,
.fpep-catalog__grid {
  display: grid;
  gap: clamp(1.05rem, 1.7vw, 1.38rem);
}

.fpep-featured__grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.fpep-catalog__grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.fpep-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--fpep-line);
  border-radius: 18px;
  background: var(--fpep-card);
  box-shadow: 0 13px 32px rgba(21, 21, 21, .055);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease;
}

.fpep-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--fpep-orange) 40%, var(--fpep-line));
  box-shadow: 0 18px 36px rgba(21, 21, 21, .085);
}

.fpep-card--past {
  background: color-mix(in srgb, var(--fpep-card) 88%, var(--fpep-soft) 12%);
}
.fpep-card--past .fpep-card__poster img { opacity: .68; filter: grayscale(.22); }

.fpep-card__poster {
  --fpep-poster-fit: contain;
  --fpep-poster-position: center center;
  --fpep-poster-bg: var(--fpep-soft);
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 2 / 3;
  padding: .5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--fpep-line) 78%, transparent);
  background: var(--fpep-poster-bg);
  color: var(--fpep-muted);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
}

.fpep-card__poster::before {
  content: "";
  position: absolute;
  inset: .5rem;
  z-index: -1;
  border-radius: 12px;
  background: rgba(255, 255, 255, .36);
}

.fpep-card__poster--cover { padding: 0; }
.fpep-card__poster--cover::before { inset: 0; border-radius: 0; }

.fpep-card__poster img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: var(--fpep-poster-fit, contain);
  object-position: var(--fpep-poster-position, center center);
}

.fpep-card__poster--contain img { filter: drop-shadow(0 8px 18px rgba(21, 21, 21, .10)); }
.fpep-card__poster span { padding: 1rem; color: var(--fpep-muted); font-size: .86rem; text-align: center; }

.fpep-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 1rem 1.04rem 1.05rem;
}

.fpep-card__topline { display: flex; flex-wrap: wrap; gap: .42rem; align-items: center; margin-bottom: .5rem; }
.fpep-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  padding: .22rem .48rem;
  border: 1px solid color-mix(in srgb, var(--fpep-orange) 28%, var(--fpep-line));
  border-radius: 999px;
  color: var(--fpep-orange-dark);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}
.fpep-badge--past {
  border-color: color-mix(in srgb, var(--fpep-muted) 35%, var(--fpep-line));
  color: var(--fpep-muted);
  background: var(--fpep-soft);
}

.fpep-card h3 { margin: 0 0 .46rem; color: var(--fpep-ink); font-size: clamp(1.08rem, 1.32vw, 1.23rem); font-weight: 700; line-height: 1.18; letter-spacing: -.02em; }
.fpep-card h3 a { color: inherit; text-decoration: none; }
.fpep-card h3 a:hover { color: var(--fpep-orange-dark); }

.fpep-card__date,
.fpep-card__place { margin: 0 0 .38rem; color: var(--fpep-orange-dark); font-size: .8rem; font-weight: 700; line-height: 1.35; }
.fpep-card__place { color: var(--fpep-muted); font-weight: 600; }
.fpep-card__intro {
  display: -webkit-box;
  min-height: 4.15em;
  margin: .22rem 0 1rem;
  overflow: hidden;
  color: color-mix(in srgb, var(--fpep-text) 92%, var(--fpep-muted));
  font-size: .88rem;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.fpep-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  margin-top: auto;
  padding-top: .72rem;
  border-top: 1px solid var(--fpep-line);
}
.fpep-card__footer span { color: var(--fpep-muted); font-size: .75rem; font-weight: 600; }
.fpep-card__link { display: inline-flex; align-items: center; color: var(--fpep-ink); font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.fpep-card__link::after { content: " →"; color: var(--fpep-orange-dark); margin-left: .15rem; }


.fpep-ad {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--fpep-line) 86%, var(--fpep-orange) 14%);
  border-radius: 18px;
  background: var(--fpep-card);
  box-shadow: 0 13px 32px rgba(21, 21, 21, .055);
  overflow: hidden;
}
.fpep-ad__label {
  display: block;
  padding: .72rem .95rem .45rem;
  color: var(--fpep-orange-dark);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
}
.fpep-ad__frame {
  display: block;
  width: 100%;
  max-width: none;
  min-width: 0;
  height: 1px;
  min-height: 0;
  border: 0;
  background: transparent;
}
.fpep-ad--banner,
.fpep-ad--banner-fluid {
  /* Une bannière posée après une carte se retrouve DANS la grille du
     catalogue : sans cette règle elle occupe une seule colonne, la créa
     fluide se replie en format portrait et la bannière n'a plus rien d'une
     bannière. Elle doit traverser toute la rangée.
     Sans effet hors grille : grid-column est ignoré en flux normal. */
  grid-column: 1 / -1;
  margin: clamp(1.55rem, 2.8vw, 2.25rem) 0 clamp(2.35rem, 4vw, 3.35rem);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.fpep-ad--banner .fpep-ad__label,
.fpep-ad--banner-fluid .fpep-ad__label {
  padding: 0 0 .55rem;
}
.fpep-ad--banner .fpep-ad__frame,
.fpep-ad--banner-fluid .fpep-ad__frame {
  width: 100%;
  border-radius: 0;
}
/* La carte pub, elle, reste sur une colonne : c'est son rôle. */
.fpep-ad--card,
.fpep-ad--inline-editorial-fluid { grid-column: auto; }
.fpep-ad--card,
.fpep-ad--inline-editorial-fluid {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  height: 100%;
}
.fpep-ad--card .fpep-ad__frame,
.fpep-ad--inline-editorial-fluid .fpep-ad__frame {
  width: calc(100% - 1rem);
  margin: 0 .5rem;
  border-radius: 13px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(21, 21, 21, .045);
}
.fpep-ad__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: .95rem 1.04rem 1.05rem;
}
.fpep-ad__eyebrow { margin: 0 0 .42rem; color: var(--fpep-orange-dark); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.fpep-ad__title { margin: 0 0 .5rem; color: var(--fpep-ink); font-size: clamp(1.04rem, 1.22vw, 1.18rem); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; }
.fpep-ad__text { margin: 0; color: var(--fpep-muted); font-size: .84rem; line-height: 1.45; }
.fpep-ad__cta { margin: auto 0 0; padding-top: .78rem; border-top: 1px solid var(--fpep-line); color: var(--fpep-ink); font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }


.fpep-support {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
  gap: clamp(1rem, 2vw, 1.7rem);
  align-items: center;
  margin-top: clamp(3.2rem, 5vw, 4.4rem);
  padding: clamp(1.35rem, 2.4vw, 2rem);
  border: 1px solid var(--fpep-line);
  border-radius: 22px;
  background:
    radial-gradient(circle at 95% 15%, color-mix(in srgb, var(--fpep-orange) 15%, transparent), transparent 32%),
    var(--fpep-card);
  box-shadow: var(--fpep-shadow);
}

.fpep-support h2 {
  margin: 0;
  color: var(--fpep-ink);
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.025em;
}

.fpep-support p:not(.fpep-kicker) {
  max-width: 720px;
  margin: .7rem 0 0;
  color: var(--fpep-text);
  font-size: .95rem;
  line-height: 1.65;
}

.fpep-support__links {
  display: grid;
  gap: .62rem;
}

.fpep-support__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 46px;
  padding: .75rem .9rem;
  border: 1px solid var(--fpep-line);
  border-radius: 13px;
  background: var(--fpep-soft);
  color: var(--fpep-ink);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-decoration: none;
  text-transform: uppercase;
}

.fpep-support__links a::after {
  content: "→";
  color: var(--fpep-orange-dark);
}

.fpep-support__links a:hover {
  border-color: color-mix(in srgb, var(--fpep-orange) 42%, var(--fpep-line));
  background: color-mix(in srgb, var(--fpep-soft) 88%, var(--fpep-orange) 12%);
}

.fpep-empty { padding: 3rem; border: 1px solid var(--fpep-line); border-radius: 16px; background: var(--fpep-card); text-align: center; }
.fpep-empty p { color: var(--fpep-muted); }
.fpep-empty a { color: var(--fpep-orange-dark); font-weight: 700; text-decoration: none; }

@media (min-width: 980px){
  .fpep-featured__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fpep-catalog__grid { grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }
}

@media (max-width: 1080px){
  .fpep-filter { grid-template-columns: 1fr 1fr; }
  .fpep-filter__count { grid-column: 1 / -1; }
  .fpep-section__head--row { align-items: start; }
}

@media (max-width: 760px){
  .fpep-shell { width: min(100% - 1.1rem, 1160px); }
  .fpep-filter { grid-template-columns: 1fr; border-radius: 14px; }
  .fpep-section__head--row { display: block; }
  .fpep-featured__grid,
.fpep-catalog__grid { grid-template-columns: 1fr; gap: .95rem; }
  .fpep-card__body { padding: 1rem; }
  .fpep-card__intro { min-height: auto; }
  .fpep-month__head { display: block; }
  .fpep-month__head span { display: inline-flex; margin-top: .38rem; }
  .fpep-support { grid-template-columns: 1fr; border-radius: 18px; }
}


/* ----------------------------------------------------------------------------
 * ÉDITIONS PASSÉES
 * Bloc de bas de page. Les festivals terminés y basculent automatiquement,
 * d'après leur date de fin — jamais d'après une case cochée dans le JSON.
 * L'ensemble est visuellement en retrait : présent pour la consultation et le
 * référencement, mais sans concurrencer la programmation à venir.
 * ---------------------------------------------------------------------------- */
.fpep-past {
    margin-top: 3.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(127, 127, 127, 0.22);
}

.fpep-past .fpep-section__head h2 {
    opacity: .82;
}

.fpep-past__note {
    max-width: 60ch;
    margin: .6rem 0 0;
    font-size: .92rem;
    line-height: 1.65;
    opacity: .72;
}

/* Le grisé des cartes existe déjà (.fpep-card--past) : on l'accentue un peu
   ici, et on le lève au survol pour que la carte reste consultable. */
.fpep-past .fpep-card {
    opacity: .88;
    transition: opacity .25s ease;
}

.fpep-past .fpep-card:hover,
.fpep-past .fpep-card:focus-within {
    opacity: 1;
}

/* ----------------------------------------------------------------------------
 * ARCHIVES ANNUELLES
 * Les éditions des années révolues quittent la liste courante sans quitter le
 * site : repliées par année, dépliables au clic. L'information reste indexable,
 * la page reste lisible.
 * ---------------------------------------------------------------------------- */
.fpep-archives {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(127, 127, 127, 0.22);
}

.fpep-archive {
    margin-top: .9rem;
    border: 1px solid var(--fpep-line);
    border-radius: 12px;
    background: var(--fpep-soft);
    overflow: hidden;
}

.fpep-archive__summary {
    display: flex;
    align-items: baseline;
    gap: .9rem;
    padding: .95rem 1.15rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.fpep-archive__summary::-webkit-details-marker { display: none; }

/* Chevron maison : il tourne à l'ouverture, sans dépendre du marqueur natif
   dont le rendu diffère d'un navigateur à l'autre. */
.fpep-archive__summary::before {
    content: "›";
    display: inline-block;
    color: var(--fpep-orange);
    font-size: 1.2rem;
    line-height: 1;
    transition: transform .2s ease;
}
.fpep-archive[open] > .fpep-archive__summary::before { transform: rotate(90deg); }

.fpep-archive__year {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.fpep-archive__count {
    margin-left: auto;
    color: var(--fpep-muted);
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.fpep-archive__grid {
    padding: 0 1.15rem 1.3rem;
}

/* Les cartes archivées sont en retrait, comme les éditions passées. */
.fpep-archive .fpep-card { opacity: .88; transition: opacity .25s ease; }
.fpep-archive .fpep-card:hover,
.fpep-archive .fpep-card:focus-within { opacity: 1; }

@media (prefers-reduced-motion: reduce){
    .fpep-archive__summary::before { transition: none; }
}