/* =============================================================
   L'entre-sons — cartes épisodes (liste EXT:news)
   À inclure dans le thème (page.includeCSS) ou via ton build.
   Les variables sont scopées sous .es-eps pour ne pas toucher
   au reste du thème ; remplace-les par tes tokens si tu en as.
   Police : Spectral (serif) + Inter (sans) — self-host ou Google Fonts.
   ============================================================= */
.es-eps{
  --paper:#F3EEE4; --card:#FFFFFF; --ink:#1B1A17; --muted:#6E6A62; --faint:#A39E94;
  --accent:#E0512E; --accent-ink:#8F2F17;
  --cover:#1C1A18; --line:rgba(27,26,23,.10);
  --serif:'Spectral',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --shadow:0 1px 2px rgba(40,30,15,.04), 0 18px 40px -26px rgba(40,30,15,.45);
  --shadow-hover:0 2px 4px rgba(40,30,15,.06), 0 30px 60px -28px rgba(40,30,15,.55);

  display:grid;gap:1.75rem;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  font-family:var(--sans);
}

.es-ep{position:relative;display:flex;flex-direction:column;background:var(--card);
  border-radius:16px;box-shadow:var(--shadow);overflow:hidden;color:var(--ink);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.es-ep:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}

.es-ep__cover{position:relative;aspect-ratio:16/10;background:var(--cover);overflow:hidden}
.es-ep__cover img,.es-ep__cover svg{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.es-ep:hover .es-ep__cover img,.es-ep:hover .es-ep__cover svg{transform:scale(1.04)}

.es-ep__tag{position:absolute;top:.7rem;left:.7rem;display:inline-flex;align-items:center;gap:.35rem;
  font-size:.72rem;font-weight:600;letter-spacing:.03em;color:#fff;
  background:rgba(20,18,16,.55);backdrop-filter:blur(6px);padding:.32rem .6rem;border-radius:999px}
.es-ep__dur{position:absolute;bottom:.7rem;right:.7rem;font-variant-numeric:tabular-nums;
  font-size:.72rem;font-weight:600;color:#fff;background:rgba(20,18,16,.62);
  padding:.26rem .5rem;border-radius:6px;letter-spacing:.02em}

.es-ep__play{position:absolute;inset:0;margin:auto;width:64px;height:64px;display:grid;place-items:center;
  opacity:0;transform:scale(.85);transition:opacity .3s,transform .3s}
.es-ep:hover .es-ep__play{opacity:1;transform:scale(1)}
.es-ep__play svg{width:64px;height:64px}

.es-ep__body{display:flex;flex-direction:column;gap:.55rem;padding:1.25rem 1.35rem 1.4rem}
.es-ep__kicker{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--accent-ink);margin:0}
.es-ep__title{font-family:var(--serif);font-weight:600;font-size:1.28rem;line-height:1.25;
  letter-spacing:-.005em;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.es-ep__title a{color:inherit;text-decoration:none}
.es-ep__title a::after{content:"";position:absolute;inset:0;z-index:0}
.es-ep__teaser{color:var(--muted);font-size:.95rem;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.es-ep__people{font-size:.85rem;color:var(--muted);margin:.1rem 0 0}
.es-ep__people b{color:var(--muted);font-weight:500}

.es-ep__foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:.65rem;padding-top:.85rem;border-top:1px solid var(--line)}
.es-ep__meta{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.es-ep__cta{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.3rem;
  font-size:.85rem;font-weight:600;color:var(--accent-ink);text-decoration:none}
.es-ep__cta .arr{transition:transform .25s}
.es-ep:hover .es-ep__cta .arr{transform:translateX(3px)}

.es-ep__cover .es-ring{width:100%;height:100%}

@media (prefers-reduced-motion:reduce){.es-ep,.es-ep *{transition:none!important}}
.es-ep a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* =============================================================
   Gabarits de liste podcast — préfixe .podcast-list
   ============================================================= */
.podcast-list {
    --pl-card: #ffffff;
    --pl-ink: #1B1A17;
    --pl-muted: #6E6A62;
    --pl-accent: #E0512E;
    --pl-accent-dark: #8F2F17;
    --pl-cover: #1C1A18;
    --pl-line: rgba(27,26,23,.10);
    --pl-serif: 'Spectral', Georgia, 'Times New Roman', serif;
    --pl-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --pl-shadow: 0 1px 2px rgba(40,30,15,.04), 0 18px 40px -26px rgba(40,30,15,.45);
    --pl-shadow-hover: 0 2px 4px rgba(40,30,15,.06), 0 30px 60px -28px rgba(40,30,15,.55);
    font-family: var(--pl-sans);
}

/* --- Gabarit 0 : Grille de cartes ----------------------------------------- */
.podcast-list--grid {
    display: grid;
    gap: 1.75rem;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
@media (max-width: 640px) {
    .podcast-list--grid { grid-template-columns: 1fr; }
}

/* --- Gabarit 1 : Slider horizontal ---------------------------------------- */
.podcast-list--slider { position: relative; }

.podcast-list--slider__track {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* padding-right laisse dépasser légèrement la 4e carte (peek) */
    padding-right: 2rem;
    padding-bottom: 2px;
}
.podcast-list--slider__track::-webkit-scrollbar { display: none; }
.podcast-list--slider__track { scrollbar-width: none; }

.podcast-list--slider__card {
    /* 3 cartes complètes + peek de la 4e ≈ calc(31% - gap/3) */
    flex: 0 0 calc(31% - 0.85rem);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
}

.podcast-list--slider__controls {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1.1rem;
}
.podcast-list--slider__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1.5px solid rgba(27,26,23,.15);
    background: var(--pl-card);
    color: var(--pl-ink);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.podcast-list--slider__btn:hover:not(:disabled) {
    background: var(--pl-ink);
    color: #fff;
    border-color: var(--pl-ink);
}
.podcast-list--slider__btn:disabled { opacity: .3; cursor: default; }
.podcast-list--slider__btn:focus-visible { outline: 2px solid var(--pl-accent); outline-offset: 2px; }

@media (max-width: 640px) {
    .podcast-list--slider__card { flex: 0 0 78vw; }
    .podcast-list--slider__controls { display: none; }
}

/* --- Gabarit 2 : Liste éditoriale ----------------------------------------- */
.podcast-list--editorial { display: flex; flex-direction: column; }

.ple-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: .9rem 0;
    border-bottom: 1px solid rgba(27,26,23,.08);
    transition: background .15s ease;
    padding-left: .5rem;
    padding-right: .5rem;
    margin-left: -.5rem;
    margin-right: -.5rem;
    border-radius: 8px;
}
.ple-row:first-child { border-top: 1px solid rgba(27,26,23,.08); }
.ple-row:hover { background: rgba(27,26,23,.03); }

.ple-row__thumb {
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--pl-cover);
}
.ple-row__thumb img,
.ple-row__thumb svg { width: 100%; height: 100%; object-fit: cover; display: block; }

.ple-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }

.ple-row__kicker {
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--pl-accent-dark);
    margin: 0;
}
.ple-row__title {
    font-family: var(--pl-serif);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ple-row__title a { color: var(--pl-ink); text-decoration: none; }
.ple-row__title a:hover { color: var(--pl-accent-dark); text-decoration: underline; }
.ple-row__title a:focus-visible { outline: 2px solid var(--pl-accent); outline-offset: 2px; border-radius: 2px; }

.ple-row__people {
    font-size: .82rem;
    color: var(--pl-muted);
    margin: 0;
}
.ple-row__meta {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .8rem;
    color: var(--pl-muted);
    flex-wrap: wrap;
}

.ple-row__play-btn {
    flex-shrink: 0;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--pl-ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}
.ple-row__play-btn:hover { background: var(--pl-accent-dark); transform: scale(1.06); }
.ple-row__play-btn:focus-visible { outline: 2px solid var(--pl-accent); outline-offset: 3px; }

@media (max-width: 640px) {
    .ple-row__thumb { width: 64px; height: 64px; border-radius: 8px; }
    .ple-row__title { font-size: .95rem; }
    .ple-row__play-btn { width: 2.2rem; height: 2.2rem; }
}

/* --- Gabarit 3 : Une à la une + grille ------------------------------------ */
.podcast-list--featured { display: flex; flex-direction: column; gap: 2rem; }

.plf-hero {
    display: flex;
    background: var(--pl-card);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--pl-shadow);
}
.plf-hero__image {
    flex: 0 0 50%;
    background: var(--pl-cover);
    overflow: hidden;
    min-height: 320px;
}
.plf-hero__image img,
.plf-hero__image svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.plf-hero__body {
    flex: 1;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: .9rem;
    justify-content: center;
}
.plf-hero__badge {
    display: inline-flex;
    align-self: flex-start;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pl-accent-dark);
    background: rgba(224,81,46,.09);
    padding: .3rem .8rem;
    border-radius: 999px;
}
.plf-hero__kicker {
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--pl-accent-dark);
    margin: 0;
}
.plf-hero__title {
    font-family: var(--pl-serif);
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -.01em;
    margin: 0;
}
.plf-hero__title a { color: var(--pl-ink); text-decoration: none; }
.plf-hero__title a:hover { color: var(--pl-accent-dark); text-decoration: underline; }
.plf-hero__title a:focus-visible { outline: 2px solid var(--pl-accent); outline-offset: 2px; border-radius: 2px; }
.plf-hero__teaser {
    font-size: .95rem;
    color: var(--pl-muted);
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.plf-hero__people { font-size: .85rem; color: var(--pl-muted); margin: 0; }
.plf-hero__foot { display: flex; align-items: center; gap: 1.25rem; }
.plf-hero__date { font-size: .82rem; color: var(--pl-muted); }
.plf-hero__cta {
    font-size: .9rem;
    font-weight: 600;
    color: var(--pl-accent-dark);
    text-decoration: none;
}
.plf-hero__cta:hover { color: var(--pl-accent); text-decoration: underline; }

.plf-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.plf-card {
    background: var(--pl-card);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--pl-shadow);
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
}
.plf-card:hover { transform: translateY(-3px); box-shadow: var(--pl-shadow-hover); }
.plf-card__cover {
    aspect-ratio: 16/10;
    background: var(--pl-cover);
    overflow: hidden;
    flex-shrink: 0;
}
.plf-card__cover img,
.plf-card__cover svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.plf-card__body { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; }
.plf-card__kicker {
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--pl-accent-dark);
    margin: 0;
}
.plf-card__title {
    font-family: var(--pl-serif);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.plf-card__title a { color: var(--pl-ink); text-decoration: none; }
.plf-card__title a:hover { color: var(--pl-accent-dark); text-decoration: underline; }
.plf-card__title a:focus-visible { outline: 2px solid var(--pl-accent); outline-offset: 2px; border-radius: 2px; }
.plf-card__meta { font-size: .78rem; color: var(--pl-muted); margin-top: .25rem; }

@media (max-width: 900px) {
    .plf-hero { flex-direction: column; }
    .plf-hero__image { flex: none; min-height: 200px; }
    .plf-hero__body { padding: 1.5rem 1.5rem; }
}
@media (max-width: 640px) {
    .plf-grid { grid-template-columns: 1fr; }
    .plf-hero__title { font-size: 1.45rem; }
}

/* --- Gabarit 4 : Liste compacte (tracklist) -------------------------------- */
.podcast-list--compact { display: flex; flex-direction: column; }

.plc-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .7rem 0;
    border-bottom: 1px solid rgba(27,26,23,.07);
    position: relative;
}
.plc-row:first-child { border-top: 1px solid rgba(27,26,23,.07); }
.plc-row:hover .plc-row__title { text-decoration: underline; }

.plc-row__num {
    flex-shrink: 0;
    width: 2rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: .8rem;
    color: var(--pl-muted);
    font-family: 'Courier New', Courier, monospace;
}
.plc-row__content {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.plc-row__title {
    font-family: var(--pl-sans);
    font-size: .9375rem;
    font-weight: 500;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.plc-row__link {
    position: static;
    color: var(--pl-ink);
    text-decoration: none;
}
.plc-row__link::after {
    content: '';
    position: absolute;
    inset: 0;
}
.plc-row__link:focus-visible {
    outline: 2px solid var(--pl-accent);
    outline-offset: 2px;
    border-radius: 2px;
}
.plc-row__meta {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .8rem;
    color: var(--pl-muted);
    font-variant-numeric: tabular-nums;
}
.plc-row__dur::before { content: '·'; margin-right: .25rem; }

@media (max-width: 640px) {
    .plc-row__content { flex-direction: column; align-items: flex-start; gap: .15rem; }
    .plc-row__meta { font-size: .75rem; }
    .plc-row__title { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
    .podcast-list--slider__card,
    .plf-card,
    .ple-row__play-btn { transition: none !important; }
}