/* =========================================================
   GRILLE COMPLÈTE · programgrid.php
   Page dédiée : hero, navigation par jour collante, puis
   chaque jour en grandes lignes (horaire, visuel, texte).
   ========================================================= */

.pg{
    --pg-pink:#ff2d8d;
    --pg-cyan:#00e5ff;
    --pg-text:#fff;
    --pg-muted:#93a5b0;
    --pg-line:rgba(255,255,255,.1);

    position:relative;
    color:var(--pg-text);
    font-family:"DM Sans",Arial,Helvetica,sans-serif;
    background:
        radial-gradient(circle at 10% 0%,rgba(156,77,255,.18),transparent 32%),
        radial-gradient(circle at 92% 38%,rgba(0,229,255,.07),transparent 30%),
        linear-gradient(180deg,#191b3b 0%,#111329 40%,#0b0c1d 100%);
}

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


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

.pg-hero{
    padding:84px max(22px,calc((100vw - 1200px)/2)) 56px;
    border-bottom:1px solid var(--pg-line);
}

.pg-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(--pg-pink);
}

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

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

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

/* Émission en cours */

.pg-now{
    position:relative;
    display:flex;
    align-items:center;
    gap:20px;
    max-width:620px;
    margin-top:34px;
    padding:14px 24px 14px 14px;
    color:inherit;
    text-decoration:none;
    background:linear-gradient(90deg,rgba(255,45,141,.2),rgba(255,255,255,.04));
    border:1px solid rgba(255,45,141,.45);
    border-radius:16px;
    transition:transform .2s,border-color .2s;
}

.pg-now:hover{ transform:translateY(-2px); border-color:var(--pg-pink); }

.pg-now img{
    width:84px;
    height:84px;
    flex:0 0 84px;
    border-radius:10px;
    object-fit:cover;
}

.pg-now-live{
    position:absolute;
    top:-11px;
    left:18px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 11px;
    border-radius:99px;
    font:800 10px/1 "Space Grotesk",sans-serif;
    letter-spacing:.14em;
    color:#fff;
    background:var(--pg-pink);
}

.pg-now-live i,
.pg-show-time em i{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#fff;
    animation:pgPulse 1.4s ease-in-out infinite;
}

@keyframes pgPulse{ 50%{ opacity:.25; } }

.pg-now-text{ display:flex; flex-direction:column; gap:4px; min-width:0; flex:1; }

.pg-now-text small{
    font:700 11px/1 "Space Grotesk",sans-serif;
    letter-spacing:.14em;
    color:var(--pg-muted);
}

.pg-now-text strong{ font:800 24px/1.15 "Space Grotesk",sans-serif; }

.pg-now-text em{ font-style:normal; font-size:14px; color:var(--pg-muted); }

.pg-now b{ font-size:22px; color:var(--pg-pink); }


/* ---------- Navigation par jour ---------- */

.pg-days{
    position:sticky;
    top:0;
    z-index:20;
    background:rgba(11,12,29,.88);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--pg-line);
}

.pg-days-inner{
    display:flex;
    gap:8px;
    padding:12px max(22px,calc((100vw - 1200px)/2));
    overflow-x:auto;
    scrollbar-width:none;
}

.pg-days-inner::-webkit-scrollbar{ display:none; }

.pg-day-link{
    flex:1 0 auto;
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:8px;
    min-width:84px;
    padding:12px 18px;
    border:1px solid var(--pg-line);
    border-radius:12px;
    color:var(--pg-muted);
    text-decoration:none;
    font:800 13px/1 "Space Grotesk",sans-serif;
    letter-spacing:.12em;
    transition:color .2s,border-color .2s,background .2s;
}

.pg-day-link span{ font-size:18px; color:#fff; letter-spacing:0; }

.pg-day-link:hover{ border-color:rgba(255,255,255,.35); color:#fff; }

.pg-day-link.is-today:not(.is-active){ border-color:rgba(255,45,141,.5); }

.pg-day-link.is-active{
    background:var(--pg-pink);
    border-color:var(--pg-pink);
    color:#fff;
}


/* ---------- Jours ---------- */

.pg-inner{
    width:min(1200px,calc(100% - 44px));
    margin:0 auto;
    padding:34px 0 90px;
}

.pg-empty{
    padding:80px 0;
    text-align:center;
    color:var(--pg-muted);
}

.pg-day{ padding-top:46px; }

.pg-day-head{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:8px 18px;
    margin-bottom:22px;
    padding-bottom:16px;
    border-bottom:1px solid var(--pg-line);
}

.pg-day-head h2{
    margin:0;
    font:800 clamp(30px,4.6vw,54px)/1 "Space Grotesk",sans-serif;
    letter-spacing:-.03em;
}

.pg-day.is-today .pg-day-head h2{ color:var(--pg-pink); }

.pg-day-date{
    font:700 18px/1 "Space Grotesk",sans-serif;
    color:var(--pg-muted);
}

.pg-today-tag{
    padding:6px 12px;
    border-radius:99px;
    font:800 10px/1 "Space Grotesk",sans-serif;
    letter-spacing:.14em;
    color:#0b0c1d;
    background:var(--pg-pink);
}

.pg-day-count{
    margin-left:auto;
    font:700 12px/1 "Space Grotesk",sans-serif;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--pg-dim,#667985);
}


/* ---------- Émissions ---------- */

.pg-shows{ display:flex; flex-direction:column; gap:12px; }

.pg-show{
    position:relative;
    display:grid;
    grid-template-columns:170px 210px minmax(0,1fr) auto;
    align-items:center;
    gap:26px;
    padding:14px 28px 14px 14px;
    color:inherit;
    text-decoration:none;
    background:rgba(255,255,255,.04);
    border:1px solid var(--pg-line);
    border-radius:18px;
    transition:background .2s,border-color .2s,transform .2s;
}

.pg-show:hover{
    background:rgba(255,255,255,.075);
    border-color:rgba(255,255,255,.28);
    transform:translateX(4px);
}

.pg-show.is-live{
    background:linear-gradient(90deg,rgba(255,45,141,.18),rgba(255,255,255,.04));
    border-color:var(--pg-pink);
}

.pg-show-time{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:9px;
    padding-left:14px;
    font:800 22px/1.15 "Space Grotesk",sans-serif;
    letter-spacing:-.01em;
    white-space:nowrap;
}

.pg-show-time em{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 10px;
    border-radius:99px;
    font:800 10px/1 "Space Grotesk",sans-serif;
    font-style:normal;
    letter-spacing:.14em;
    background:var(--pg-pink);
}

.pg-show-cover{
    display:block;
    width:100%;
    aspect-ratio:16/10;
    overflow:hidden;
    border-radius:12px;
    background:linear-gradient(135deg,#2b1250,#12183a);
}

.pg-show-cover img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .4s;
}

.pg-show:hover .pg-show-cover img{ transform:scale(1.06); }

.pg-show-body{ display:flex; flex-direction:column; gap:7px; min-width:0; }

.pg-show-body small{
    font:800 11px/1 "Space Grotesk",sans-serif;
    letter-spacing:.18em;
    color:var(--pg-cyan);
}

.pg-show-body strong{
    font:800 clamp(20px,2.4vw,30px)/1.15 "Space Grotesk",sans-serif;
    letter-spacing:-.02em;
}

.pg-show-body em{
    font-style:normal;
    font-size:14px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--pg-pink);
}

.pg-show-desc{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    font-size:14px;
    line-height:1.55;
    color:var(--pg-muted);
}

.pg-show-go{
    font-size:26px;
    color:var(--pg-muted);
    transition:color .2s,transform .2s;
}

.pg-show:hover .pg-show-go{ color:var(--pg-pink); transform:translateX(4px); }


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

@media(max-width:960px){
    .pg-show{ grid-template-columns:150px 170px minmax(0,1fr); gap:20px; }
    .pg-show-go{ display:none; }
}

@media(max-width:700px){
    .pg-hero{ padding:56px 16px 40px; }
    .pg-hero p{ font-size:15px; }
    .pg-now{ gap:14px; padding-right:16px; }
    .pg-now img{ width:64px; height:64px; flex-basis:64px; }
    .pg-now-text strong{ font-size:19px; }
    .pg-days-inner{ padding:10px 16px; }
    .pg-day-link{ min-width:74px; padding:11px 14px; }
    .pg-inner{ width:calc(100% - 32px); padding-bottom:60px; }
    .pg-day{ padding-top:34px; }
    .pg-day-count{ margin-left:0; width:100%; }

    .pg-show{
        grid-template-columns:116px minmax(0,1fr);
        grid-template-areas:"cover time" "cover body";
        align-items:start;
        gap:6px 14px;
        padding:12px;
    }
    .pg-show:hover{ transform:none; }
    .pg-show-cover{ grid-area:cover; aspect-ratio:1; }
    .pg-show-time{ grid-area:time; flex-direction:row; align-items:center; gap:10px; padding:0; font-size:15px; }
    .pg-show-body{ grid-area:body; gap:5px; }
    .pg-show-body strong{ font-size:18px; }
    .pg-show-desc{ display:none; }
}

@media(prefers-reduced-motion:reduce){
    .pg-now-live i,.pg-show-time em i{ animation:none; }
    .pg-show,.pg-show-cover img{ transition:none; }
}