/* =========================================================
   REPLAYS · replay.php
   Grille de podcasts façon affiches : visuel plein cadre,
   dégradé, pastille de catégorie colorée (--rp-h = teinte),
   premier épisode mis en avant sur 2 colonnes × 2 lignes.
   ========================================================= */

.rp{
    --rp-h:330;
    --rp-accent:hsl(var(--rp-h) 95% 62%);
    --rp-text:#fff;
    --rp-muted:#93a5b0;
    --rp-line:rgba(255,255,255,.1);

    position:relative;
    color:var(--rp-text);
    font-family:"DM Sans",Arial,Helvetica,sans-serif;
    background:
        radial-gradient(circle at 88% 0%,hsl(var(--rp-h) 90% 55% / .2),transparent 42%),
        radial-gradient(circle at 4% 40%,rgba(0,229,255,.07),transparent 30%),
        linear-gradient(180deg,#2b1250 0%,#1c0d3a 28%,#0b0c1d 100%);
}

.rp *{ box-sizing:border-box; }


/* ---------- Hero ---------- */

.rp-hero{ padding:84px max(22px,calc((100vw - 1240px)/2)) 36px; }

.rp-kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:20px;
    font:800 12px/1 "Space Grotesk",sans-serif;
    letter-spacing:.24em;
    color:var(--rp-accent);
}

.rp-kicker i{
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--rp-accent);
    box-shadow:0 0 14px var(--rp-accent);
}

.rp-hero h1{
    margin:0;
    font:800 clamp(40px,7vw,86px)/.98 "Space Grotesk",sans-serif;
    letter-spacing:-.04em;
    overflow-wrap:anywhere;
}

.rp-hero h1 em{
    font-style:normal;
    background:linear-gradient(90deg,var(--rp-accent),hsl(calc(var(--rp-h) + 40) 95% 62%));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.rp-hero p{
    max-width:560px;
    margin:22px 0 0;
    font-size:16px;
    line-height:1.6;
    color:var(--rp-muted);
}

.rp-chips{
    display:flex;
    gap:8px;
    margin-top:30px;
    overflow-x:auto;
    padding-bottom:4px;
    scrollbar-width:none;
}

.rp-chips::-webkit-scrollbar{ display:none; }

.rp-chip{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:11px 18px;
    border:1px solid var(--rp-line);
    border-radius:99px;
    color:var(--rp-muted);
    text-decoration:none;
    font:700 12px/1 "Space Grotesk",sans-serif;
    letter-spacing:.1em;
    text-transform:uppercase;
    transition:color .2s,border-color .2s,background .2s;
}

.rp-chip b{
    padding:3px 7px;
    border-radius:99px;
    font-size:10px;
    background:rgba(255,255,255,.1);
}

.rp-chip:hover{ color:#fff; border-color:hsl(var(--rp-h) 90% 62% / .7); }

.rp-chip.is-active{
    color:#0b0c1d;
    border-color:hsl(var(--rp-h) 95% 62%);
    background:hsl(var(--rp-h) 95% 62%);
}

.rp-chip.is-active b{ background:rgba(0,0,0,.18); }


/* ---------- Grille ---------- */

.rp-inner{
    width:min(1240px,calc(100% - 44px));
    margin:0 auto;
    padding:14px 0 90px;
}

.rp-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-auto-flow:dense;
    gap:18px;
}

.rp-card{
    position:relative;
    display:block;
    aspect-ratio:4/5;
    overflow:hidden;
    isolation:isolate;
    color:inherit;
    text-decoration:none;
    background:linear-gradient(135deg,#2b1250,#12183a);
    border:1px solid var(--rp-line);
    border-radius:20px;
    transition:transform .3s,border-color .3s,box-shadow .3s;
}

.rp-card.is-feature{
    grid-column:span 2;
    grid-row:span 2;
    aspect-ratio:auto;
}

.rp-card > img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:-2;
    transition:transform .6s;
}

.rp-card-shade{
    position:absolute;
    inset:0;
    z-index:-1;
    background:
        linear-gradient(180deg,rgba(11,12,29,.45) 0%,transparent 30%,rgba(11,12,29,.55) 58%,rgba(11,12,29,.96) 100%),
        linear-gradient(0deg,hsl(var(--rp-h) 90% 50% / .22),transparent 45%);
}

.rp-card:hover{
    transform:translateY(-6px);
    border-color:hsl(var(--rp-h) 90% 62% / .8);
    box-shadow:0 22px 50px rgba(0,0,0,.5),0 0 40px hsl(var(--rp-h) 90% 55% / .25);
}

.rp-card:hover > img{ transform:scale(1.08); }

.rp-card-cat,
.rp-card-time{
    position:absolute;
    top:14px;
    padding:6px 11px;
    border-radius:99px;
    font:800 10px/1 "Space Grotesk",sans-serif;
    letter-spacing:.12em;
}

.rp-card-cat{
    left:14px;
    max-width:62%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#0b0c1d;
    background:hsl(var(--rp-h) 95% 64%);
}

.rp-card-time{
    right:14px;
    color:#fff;
    background:rgba(11,12,29,.62);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

.rp-card-time i{ margin-right:3px; font-size:9px; }

.rp-card-play{
    position:absolute;
    top:50%;
    left:50%;
    display:grid;
    place-items:center;
    width:64px;
    height:64px;
    margin:-32px 0 0 -32px;
    border-radius:50%;
    font-size:20px;
    color:#0b0c1d;
    background:hsl(var(--rp-h) 95% 64%);
    box-shadow:0 10px 30px rgba(0,0,0,.45);
    opacity:0;
    transform:scale(.7);
    transition:opacity .25s,transform .25s;
}

.rp-card-play i{ margin-left:3px; }

.rp-card:hover .rp-card-play,
.rp-card:focus-visible .rp-card-play{ opacity:1; transform:scale(1); }

.rp-card-body{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:20px;
}

.rp-card-body small{
    font:700 10px/1.4 "Space Grotesk",sans-serif;
    letter-spacing:.14em;
    color:hsl(var(--rp-h) 95% 74%);
}

.rp-card-body strong{
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    font:800 19px/1.2 "Space Grotesk",sans-serif;
    letter-spacing:-.01em;
}

.rp-card.is-feature .rp-card-body{ padding:32px; gap:12px; }
.rp-card.is-feature .rp-card-body strong{ font-size:clamp(26px,3vw,40px); -webkit-line-clamp:4; }
.rp-card.is-feature .rp-card-play{ width:84px; height:84px; margin:-42px 0 0 -42px; font-size:26px; }

.rp-card-excerpt{
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    max-width:520px;
    font-size:14px;
    line-height:1.55;
    color:rgba(255,255,255,.75);
}


/* ---------- Vide / pagination ---------- */

.rp-empty{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    padding:90px 0;
    text-align:center;
    color:var(--rp-muted);
}

.rp-empty strong{ font:800 24px/1.2 "Space Grotesk",sans-serif; color:#fff; }

.rp-empty a{ margin-top:8px; color:var(--rp-accent); text-decoration:none; font-weight:700; }

.rp-pager{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    margin-top:44px;
}

.rp-pager-btn{
    padding:12px 22px;
    border:1px solid var(--rp-line);
    border-radius:99px;
    color:#fff;
    text-decoration:none;
    font:700 12px/1 "Space Grotesk",sans-serif;
    letter-spacing:.08em;
    transition:border-color .2s,background .2s;
}

a.rp-pager-btn:hover{ border-color:var(--rp-accent); background:rgba(255,255,255,.05); }

.rp-pager-btn.is-disabled{ opacity:.35; }

.rp-pager-info{ font-size:13px; color:var(--rp-muted); }


/* ---------- Tablette / mobile ---------- */

@media(max-width:1080px){
    .rp-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media(max-width:780px){
    .rp-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
    .rp-card.is-feature{ grid-column:span 2; grid-row:span 1; aspect-ratio:4/3; }
    .rp-card-body{ padding:14px; }
    .rp-card-body strong{ font-size:16px; }
    .rp-card.is-feature .rp-card-body{ padding:20px; }
    .rp-card.is-feature .rp-card-body strong{ font-size:24px; }
    .rp-card.is-feature .rp-card-excerpt{ display:none; }
    .rp-card-play{ display:none; }
}

@media(max-width:700px){
    .rp-hero{ padding:56px 16px 26px; }
    .rp-inner{ width:calc(100% - 32px); padding-bottom:60px; }
}

@media(max-width:420px){
    .rp-card-cat{ max-width:70%; }
    .rp-card-time{ display:none; }
}

@media(hover:none){
    .rp-card:hover{ transform:none; }
}

@media(prefers-reduced-motion:reduce){
    .rp-card,.rp-card > img,.rp-card-play{ transition:none; }
}