/* ==========================================================================
   PAGE PODCAST & VIDÉO — quatre écrans, chacun montre une étape du travail :
   01 trois lignes de texte deviennent une voix · 02 la table de montage ·
   03 du plan large aux extraits verticaux · 04 le podcast du studio.
   Composants communs (frame, phone, cap) : assets/css/pages.css.
   Lecteur et épisodes : assets/css/podcast.css (même bloc que l'accueil).
   États animés : uniquement sous html.p3fx (posé dans la page, jamais dans
   l'éditeur, en ?calage ni en « animations réduites ») ; sans cette classe,
   tout est dessiné et immobile. Déclencheurs : .is-on (arrivée, une fois) et
   .is-live (boucles, seulement à l'écran), posés par assets/js/pages/podcast.js.
   ========================================================================== */

body[data-page="podcast"]{
  /* langage commun du mouvement (mêmes courbes que l'accueil) */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.35,1);
  --e-pop:cubic-bezier(.34,1.4,.64,1);
  --e-spring:linear(0,.04 4%,.135 8%,.26 12%,.393 16%,.522 20%,.666 25%,.784 30%,.874 35%,.939 40%,.988 46%,1.015 52%,1.028 60%,1.025 70%,1.016 80%,1.008 90%,1 100%);
  --loop:14s;           /* une boucle de la table de montage */
}
@supports not (transition-timing-function:linear(0,1)){body[data-page="podcast"]{--e-spring:cubic-bezier(.34,1.25,.64,1)}}

/* ---------- En-tête : le micro du décor passe à droite du texte (bureau) --------- */
@media (min-width:1024px){
  [data-page="podcast"] .phero__scene{background-position:calc(105 * var(--m)) 50%}
}
[data-page="podcast"] .phero__lede{max-width:max(calc(var(--mins) * 430px),calc(232 * var(--m)))}

/* ---------- Icônes des listes (système commun : span.ico[data-ico]) -------------- */
.pfeats{--pi:max(54px,calc(33 * var(--m)))}
.psteps{--pi:max(50px,calc(29 * var(--m)))}

/* ==========================================================================
   01 · TROIS LIGNES DEVIENNENT UNE VOIX
   ========================================================================== */
.pvoice-blk{padding-top:0}
.pvoice{position:relative;margin-top:max(calc(var(--mins) * 4px),calc(4 * var(--m)))}
.pvoice__lab{position:relative;height:1.5em;font-family:var(--f-mono);font-weight:500;font-size:var(--fs-nano);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.pvoice__lab span{position:absolute;left:0;top:0;display:flex;align-items:center;gap:10px;white-space:nowrap;transition:opacity .6s var(--e-out),transform .8s var(--e-out)}
.pvoice__lab span::before{content:"";width:max(22px,calc(16 * var(--m)));height:1px;background:var(--red);box-shadow:0 0 8px rgba(246,43,62,.5)}
.pvoice__l1{opacity:0}
.pvoice__stage{position:relative;margin-top:max(12px,calc(8 * var(--m)));aspect-ratio:5/1;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:radial-gradient(60% 90% at 50% 50%,rgba(160,14,28,.12),transparent 70%)}
.pvoice__stage::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08) 12%,rgba(255,255,255,.08) 88%,transparent)}
.pvoice__svg,.pvoice__cv{position:absolute;inset:0;width:100%;height:100%}
.pvoice__svg path{fill:none;stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke}
.pvoice__q{stroke:rgba(245,243,238,.82)}
.pvoice__v{stroke:var(--red)}
.pvoice__cv{display:none}
.pvoice__legend{display:flex;flex-wrap:wrap;gap:8px max(22px,calc(16 * var(--m)));margin-top:max(12px,calc(8 * var(--m)));font-family:var(--f-mono);font-weight:500;font-size:var(--fs-nano);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.pvoice__legend span{display:flex;align-items:center;gap:9px}
.pvoice__legend span::before{content:"";width:8px;height:8px;border-radius:2px}
.pvoice__legend .is-v::before{background:var(--red);box-shadow:0 0 8px rgba(246,43,62,.6)}
.pvoice__legend .is-q::before{background:rgba(245,243,238,.82)}

/* animé : le canevas remplace le dessin fixe ; d'abord « trois lignes », puis « une voix » */
html.p3fx .pvoice__svg{display:none}
html.p3fx .pvoice__cv{display:block}
html.p3fx .pvoice:not(.is-voice) .pvoice__l1{opacity:1}
html.p3fx .pvoice:not(.is-voice) .pvoice__l2{opacity:0;transform:translate3d(0,8px,0)}
html.p3fx .pvoice .pvoice__legend{opacity:0;transform:translate3d(0,10px,0);transition:opacity .7s var(--e-out),transform .9s var(--e-out)}
html.p3fx .pvoice.is-voice .pvoice__legend{opacity:1;transform:none;transition-delay:.5s}

/* ==========================================================================
   02 · LA TABLE DE MONTAGE
   ========================================================================== */
.pedit-blk{display:grid;grid-template-columns:minmax(0,1fr) calc(220 * var(--m));column-gap:calc(34 * var(--m));align-items:start;padding-top:0}
.pedit{grid-column:1;grid-row:1;position:relative;perspective:1600px}
.pedit__note{grid-column:1;grid-row:2;margin-top:max(14px,calc(10 * var(--m)))}
.pfeats{grid-column:2;grid-row:1 / span 2;align-self:center}

/* l'écran du programme */
.pedit__mon{margin:0;border:1px solid var(--line-2);background:#0c0c0d;border-radius:6px;overflow:hidden;box-shadow:0 34px 80px -30px rgba(0,0,0,.95),0 0 70px -28px rgba(246,43,62,.4)}
.pedit__mon .frame__bar span{color:var(--ink-2)}
.pedit__screen{position:relative;overflow:hidden;aspect-ratio:1600/780;background:#000}
.pedit__img{position:absolute;inset:0;width:100%;height:100%;transform-origin:0 0}
/* carton de début : titre de l'épisode aux couleurs du client */
.pedit__card{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-left:9%;background:linear-gradient(90deg,rgba(6,6,6,.94) 40%,rgba(6,6,6,.6));opacity:0}
.pedit__card small{display:flex;align-items:center;gap:12px;font-family:var(--f-mono);font-weight:500;font-size:max(10px,calc(6 * var(--m)));letter-spacing:.24em;text-transform:uppercase;color:var(--red)}
.pedit__card small::before{content:"";width:28px;height:2px;background:var(--red);box-shadow:0 0 10px rgba(246,43,62,.7)}
.pedit__card b{margin-top:.25em;font-family:var(--f-title);font-weight:700;font-size:max(28px,calc(30 * var(--m)));line-height:.9;text-transform:uppercase;letter-spacing:.01em;color:var(--ink);-webkit-text-stroke:.012em currentColor}
/* bandeau : le nom de l'invité (à l'arrêt, il reste affiché : c'est l'habillage) */
.pedit__lower{position:absolute;left:5%;bottom:9%;display:flex;flex-direction:column;padding:.55em 1.1em .6em .9em;background:linear-gradient(90deg,rgba(6,6,6,.92),rgba(6,6,6,.75));border-left:3px solid var(--red);box-shadow:0 10px 30px -10px rgba(0,0,0,.8)}
.pedit__lower b{font-family:var(--f-title);font-weight:700;font-size:max(15px,calc(11 * var(--m)));line-height:1;text-transform:uppercase;letter-spacing:.02em;color:var(--ink)}
.pedit__lower small{margin-top:.4em;font-family:var(--f-mono);font-weight:500;font-size:max(9px,calc(4.8 * var(--m)));letter-spacing:.2em;text-transform:uppercase;color:var(--red)}

/* la timeline */
.pedit__tl{position:relative;display:grid;grid-template-columns:max(46px,calc(30 * var(--m))) minmax(0,1fr);grid-template-rows:max(28px,calc(18 * var(--m))) max(36px,calc(24 * var(--m))) max(28px,calc(18 * var(--m)));gap:max(6px,calc(4 * var(--m))) max(10px,calc(7 * var(--m)));margin-top:max(8px,calc(6 * var(--m)));padding:max(14px,calc(9 * var(--m))) max(14px,calc(10 * var(--m)));border:1px solid var(--line);border-radius:6px;background:linear-gradient(180deg,#0d0d0f,#09090a)}
.pedit__nm{grid-column:1;align-self:center;font-family:var(--f-mono);font-weight:500;font-size:max(9.5px,calc(5 * var(--m)));letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.pedit__lane{grid-column:2;position:relative;border-radius:3px;background:rgba(255,255,255,.028)}
.pedit__nm:nth-of-type(1),.pedit__lane--img{grid-row:1}
.pedit__nm:nth-of-type(2),.pedit__lane--wave{grid-row:2}
.pedit__nm:nth-of-type(3),.pedit__lane--txt{grid-row:3}
.pedit__lane > span{position:absolute;top:2px;bottom:2px;left:calc(var(--a) * 1%);width:calc((var(--b) - var(--a)) * 1% - 2px);display:flex;align-items:center;padding-left:7px;overflow:hidden;white-space:nowrap;border-radius:2px;font-family:var(--f-mono);font-weight:500;font-size:max(9px,calc(4.9 * var(--m)));letter-spacing:.1em;text-transform:uppercase;transform-origin:0 50%}
.pedit__lane--img > span{background:linear-gradient(180deg,#2b2b30,#1c1c20);border-left:2px solid var(--red);color:var(--ink-2)}
.pedit__lane--txt > span{background:rgba(246,43,62,.2);border:1px solid rgba(246,43,62,.55);color:#fff}
.pedit__lane--wave svg{position:absolute;left:0;top:3px;width:100%;height:calc(100% - 6px)}
.pedit__lane--wave path{fill:none;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.pedit__noisy{display:none}
.pedit__noisy path{stroke:rgba(245,243,238,.3)}
.pedit__clean path{stroke:var(--red)}
.pedit__scan{position:absolute;top:-3px;bottom:-3px;left:0;width:100%;opacity:0;pointer-events:none}
.pedit__scan::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 12px 2px rgba(246,43,62,.8)}
/* tête de lecture : une ligne rouge, un point jaune (à l'arrêt, posée au premier tiers) */
.pedit__playzone{grid-column:2;grid-row:1 / span 3;position:relative;pointer-events:none}
.pedit__head{position:absolute;left:0;top:-8px;bottom:-6px;width:100%;transform:translateX(30%)}
.pedit__head::before{content:"";position:absolute;left:-.75px;top:0;bottom:0;width:1.5px;background:var(--red);box-shadow:0 0 10px rgba(246,43,62,.8)}
.pedit__head::after{content:"";position:absolute;left:-3.5px;top:-2px;width:7px;height:7px;border-radius:50%;background:var(--yellow);box-shadow:0 0 8px rgba(255,214,10,.7)}

/* les quatre points (icône + libellé + une ligne) */
.pfeats{display:flex;flex-direction:column}
.pfeat{display:grid;grid-template-columns:var(--pi) minmax(0,1fr);column-gap:max(14px,calc(9 * var(--m)));align-items:start;padding:max(16px,calc(11 * var(--m))) 0;border-top:1px solid var(--line-2)}
.pfeat:last-child{border-bottom:1px solid var(--line-2)}
.pfeat .ico{grid-row:1 / span 2;--ico-size:var(--pi)}
.pfeat b{font-family:var(--f-title);font-weight:700;font-size:max(17px,calc(10.4 * var(--m)));line-height:1.02;text-transform:uppercase;letter-spacing:.005em;color:var(--ink)}
.pfeat span:not(.ico){margin-top:.45em;font-size:max(14px,calc(6.6 * var(--m)));line-height:1.5;color:var(--ink-3)}

/* ---- 02 animé ----------------------------------------------------------------- */
html.p3fx .pedit__mon{opacity:0;transform:translate3d(0,46px,-140px) rotateX(9deg);transform-origin:50% 100%;transition:opacity .9s var(--e-out),transform 1.1s var(--e-out)}
html.p3fx .pedit__tl{opacity:0;transform:translate3d(0,26px,0);transition:opacity .8s var(--e-out) .3s,transform 1s var(--e-out) .3s}
html.p3fx .pedit__lane > span{transform:scaleX(0);transition:transform .55s var(--e-out)}
html.p3fx .pedit__lane--img > span:nth-child(1){transition-delay:.45s}
html.p3fx .pedit__lane--img > span:nth-child(2){transition-delay:.54s}
html.p3fx .pedit__lane--img > span:nth-child(3){transition-delay:.63s}
html.p3fx .pedit__lane--img > span:nth-child(4){transition-delay:.72s}
html.p3fx .pedit__lane--img > span:nth-child(5){transition-delay:.81s}
html.p3fx .pedit__lane--img > span:nth-child(6){transition-delay:.9s}
html.p3fx .pedit__lane--txt > span:nth-child(1){transition-delay:.75s}
html.p3fx .pedit__lane--txt > span:nth-child(2){transition-delay:.84s}
html.p3fx .pedit__lane--txt > span:nth-child(3){transition-delay:.93s}
/* le son : d'abord brut (bruit de fond), un passage le nettoie */
html.p3fx .pedit__noisy{display:block;clip-path:inset(0 0 0 0);transition:clip-path .95s var(--e-io) 1.15s}
html.p3fx .pedit__clean{clip-path:inset(0 100% 0 0);transition:clip-path .95s var(--e-io) 1.15s}
html.p3fx .pedit__scan{transform:translateX(0);transition:transform .95s var(--e-io) 1.15s,opacity .3s 1.1s}
html.p3fx .pedit__head{opacity:0;transform:none;transition:opacity .5s var(--e-out) 2s}
html.p3fx .pedit__lower{opacity:0}

html.p3fx .pedit.is-on .pedit__mon,html.p3fx .pedit.is-on .pedit__tl{opacity:1;transform:none}
html.p3fx .pedit.is-on .pedit__lane > span{transform:none}
html.p3fx .pedit.is-on .pedit__noisy{clip-path:inset(0 0 0 100%)}
html.p3fx .pedit.is-on .pedit__clean{clip-path:inset(0 0 0 0)}
html.p3fx .pedit.is-on .pedit__scan{opacity:1;transform:translateX(100%)}
html.p3fx .pedit.is-on.is-scanned .pedit__scan{opacity:0;transition:opacity .4s}
html.p3fx .pedit.is-on .pedit__head{opacity:1}
/* boucles : la tête parcourt la timeline, l'écran suit les coupes, l'habillage passe */
html.p3fx .pedit.is-on .pedit__head{animation:peHead var(--loop) linear 2s infinite both;animation-play-state:paused}
html.p3fx .pedit.is-on .pedit__img{animation:peCam var(--loop) linear 2s infinite both;animation-play-state:paused}
html.p3fx .pedit.is-on .pedit__card{animation:peCard var(--loop) linear 2s infinite both;animation-play-state:paused}
html.p3fx .pedit.is-on .pedit__lower{animation:peLower var(--loop) linear 2s infinite both;animation-play-state:paused}
html.p3fx .pedit.is-on.is-live .pedit__head,html.p3fx .pedit.is-on.is-live .pedit__img,
html.p3fx .pedit.is-on.is-live .pedit__card,html.p3fx .pedit.is-on.is-live .pedit__lower{animation-play-state:running}

@keyframes peHead{from{transform:translateX(0)}to{transform:translateX(100%)}}
/* coupes : Large 0-14 · Caméra 1 14-36 · Caméra 2 36-52 · Large 52-64 · Caméra 1 64-82 · Caméra 2 82-100
   (léger travelling avant dans chaque plan, coupe franche entre deux plans) */
@keyframes peCam{
  0%{transform:none}
  13.99%{transform:translate(-1.2%,-1.2%) scale(1.03)}
  14%{transform:translate(-7%,-12.7%) scale(1.9)}
  35.99%{transform:translate(-8.8%,-14.7%) scale(1.96)}
  36%{transform:translate(-100%,-54%) scale(2)}
  51.99%{transform:translate(-106%,-57%) scale(2.06)}
  52%{transform:none}
  63.99%{transform:translate(-1%,-1%) scale(1.025)}
  64%{transform:translate(-4%,-10%) scale(1.8)}
  81.99%{transform:translate(-5.6%,-11.8%) scale(1.85)}
  82%{transform:translate(-96%,-50%) scale(1.96)}
  100%{transform:translate(-101%,-53%) scale(2.01)}
}
@keyframes peCard{0%,9%{opacity:1}12%,90%{opacity:0}93%,100%{opacity:1}}
@keyframes peLower{
  0%,22%{opacity:0;transform:translate3d(-24px,0,0)}
  24%,36%{opacity:1;transform:none}
  38%,100%{opacity:0;transform:translate3d(-12px,0,0)}
}

/* ==========================================================================
   03 · DU PLAN LARGE AUX EXTRAITS VERTICAUX
   ========================================================================== */
.pclips{display:grid;grid-template-columns:calc(279 * var(--m)) minmax(0,1fr);column-gap:calc(24 * var(--m));align-items:center}
.pclips__text .txt{margin-top:max(calc(var(--mins) * 16px),calc(11 * var(--m)))}
/* les cinq étapes, reliées par un filet */
.psteps{position:relative;margin-top:max(calc(var(--mins) * 26px),calc(16 * var(--m)));display:flex;flex-direction:column;gap:max(12px,calc(7 * var(--m)))}
.psteps::before{content:"";position:absolute;left:calc(var(--pi) / 2);top:8px;bottom:8px;width:1px;background:linear-gradient(var(--red),rgba(246,43,62,.12));transform-origin:50% 0}
.psteps li{position:relative;display:grid;grid-template-columns:var(--pi) minmax(0,1fr);column-gap:max(14px,calc(9 * var(--m)));align-items:center}
.psteps .ico{grid-row:1 / span 2;--ico-size:var(--pi);--ico-bg:#09090a;background:#09090a;border-radius:50%}
.psteps b{font-family:var(--f-title);font-weight:700;font-size:max(17px,calc(10 * var(--m)));line-height:1;text-transform:uppercase;letter-spacing:.01em;color:var(--ink)}
.psteps span:not(.ico){margin-top:.3em;font-family:var(--f-mono);font-weight:500;font-size:var(--fs-nano);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* la scène : l'épisode en 16:9, la fenêtre 9:16, trois téléphones */
.pclips__stage{position:relative;aspect-ratio:16/10.6;perspective:1800px}
.pclips__wide{position:absolute;left:0;top:5%;width:60%}
.pclips__wide .frame__bar span{color:var(--ink-2)}
.pclips__shot{position:relative;overflow:hidden;aspect-ratio:1600/780}
.pclips__shot img{position:absolute;inset:0;width:100%;height:100%}
.pclips__crop{position:absolute;top:0;bottom:0;left:15.5%;width:27.4%;outline:1px solid rgba(255,255,255,.55);box-shadow:0 0 0 999px rgba(6,6,6,.62)}
.pclips__crop i{position:absolute;width:14px;height:14px;border:0 solid var(--red)}
.pclips__crop i:nth-child(1){left:-1px;top:-1px;border-width:2px 0 0 2px;transform-origin:0 0}
.pclips__crop i:nth-child(2){right:-1px;top:-1px;border-width:2px 2px 0 0;transform-origin:100% 0}
.pclips__crop i:nth-child(3){left:-1px;bottom:-1px;border-width:0 0 2px 2px;transform-origin:0 100%}
.pclips__crop i:nth-child(4){right:-1px;bottom:-1px;border-width:0 2px 2px 0;transform-origin:100% 100%}
.pclips__crop small{position:absolute;left:50%;top:6px;transform:translateX(-50%);padding:2px 6px;background:var(--red);font-family:var(--f-mono);font-weight:500;font-size:9.5px;letter-spacing:.12em;color:#fff}
.pclips__ph{position:absolute;margin:0;width:19%}
.pclips__ph--1{left:44%;top:21%;z-index:3}
.pclips__ph--2{left:62.5%;top:6%;z-index:2}
.pclips__ph--3{left:81%;top:25%;z-index:1}
.pclips__ph .phone{border-width:5px;border-radius:20px}
.pclips__ph .phone::before{--cam-top:3px;--cam:4px}
.pclips__ph .cap{margin-top:10px}
/* survol des téléphones : relief commun (pages.css, « RELIEF AU SURVOL DES VISUELS ») */

/* ---- 03 animé ----------------------------------------------------------------- */
html.p3fx .pclips__wide{opacity:0;transform:translate3d(0,40px,-160px) rotateY(10deg);transition:opacity .9s var(--e-out),transform 1.1s var(--e-out)}
html.p3fx .pclips__crop{opacity:0;transition:opacity .6s var(--e-out) .55s}
html.p3fx .pclips__crop i{opacity:0;transform:scale(2.4);transition:opacity .4s var(--e-out) .75s,transform .6s var(--e-out) .75s}
html.p3fx .pclips__ph{opacity:0;transition:opacity .6s var(--e-out),transform 1.15s var(--e-spring)}
html.p3fx .pclips__ph--1{transform:translate3d(-190%,-6%,-200px) scale(.5) rotateY(28deg);transition-delay:1.15s}
html.p3fx .pclips__ph--2{transform:translate3d(-287%,10%,-200px) scale(.5) rotateY(28deg);transition-delay:1.4s}
html.p3fx .pclips__ph--3{transform:translate3d(-384%,-10%,-200px) scale(.5) rotateY(28deg);transition-delay:1.65s}
html.p3fx .psteps::before{transform:scaleY(0);transition:transform 1.8s var(--e-io) .25s}
html.p3fx .psteps li{opacity:.28;transition:opacity .6s var(--e-out) calc(.3s + var(--k) * .36s)}
html.p3fx .psteps li b,html.p3fx .psteps li span:not(.ico){display:block;transform:translate3d(-8px,0,0);transition:transform .8s var(--e-out) calc(.3s + var(--k) * .36s)}

html.p3fx .pclips.is-on .pclips__wide,html.p3fx .pclips.is-on .pclips__ph{opacity:1;transform:none}
html.p3fx .pclips.is-on .pclips__crop{opacity:1}
html.p3fx .pclips.is-on .pclips__crop i{opacity:1;transform:none}
html.p3fx .pclips.is-on .psteps::before{transform:none}
html.p3fx .pclips.is-on .psteps li{opacity:1}
html.p3fx .pclips.is-on .psteps li b,html.p3fx .pclips.is-on .psteps li span:not(.ico){transform:none}
/* boucle : la fenêtre suit le visage, doucement */
html.p3fx .pclips.is-on .pclips__crop{animation:pcTrack 7.4s var(--e-io) 2.2s infinite alternate both;animation-play-state:paused}
html.p3fx .pclips.is-on.is-live .pclips__crop{animation-play-state:running}
@keyframes pcTrack{0%{transform:none}40%{transform:translate3d(12%,0,0)}75%{transform:translate3d(-6%,0,0)}100%{transform:translate3d(4%,0,0)}}

/* ==========================================================================
   04 · LE PODCAST DU STUDIO (lecteur + épisodes côte à côte)
   ========================================================================== */
.podstudio::before{content:"";position:absolute;inset:0;background:radial-gradient(calc(340 * var(--m)) calc(170 * var(--m)) at 64% 52%,rgba(160,14,28,.2),transparent 70%);pointer-events:none}
.podstudio__intro .txt{margin-top:max(calc(var(--mins) * 16px),calc(11 * var(--m)))}
.podstudio__intro .txt + .txt{margin-top:max(calc(var(--mins) * 12px),calc(8 * var(--m)))}
@media (min-width:1024px){
  .podstudio .podstudio__deck{max-width:none;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);column-gap:calc(24 * var(--m));align-items:start}
  .podstudio .player{grid-column:auto;margin-top:0}
  .podstudio .player__title{max-width:calc(210 * var(--m))}
  .podstudio .eps{grid-column:auto;margin-left:0}
  .podstudio .eps::before{top:calc(4 * var(--m));bottom:0}
}
/* Liste vide (un seul épisode, aucune plateforme renseignée) : le bloc est masqué,
   le lecteur garde sa place. Il revient seul dès qu'une entrée existe. */
.podstudio .eps:not(:has(li)){display:none}
/* Épisode « À venir » : le bouton lecture reste cliquable (message) mais ne se
   présente pas comme un épisode disponible. */
[data-page="podcast"] .player:has([data-p-state]:not([hidden])) .player__play{opacity:.55}
/* Étiquette du lecteur : l'écart des deux points ne descend pas sous 5 px (tablette, mobile). */
[data-page="podcast"] .player__tag{gap:max(5px,calc(5 * var(--m)))}

/* ---- 04 animé : le lecteur pivote depuis la profondeur, son onde se dévoile ----- */
html.p3fx #le-podcast .podstudio__deck{perspective:1400px}
html.p3fx #le-podcast .player.rv{transform:translate3d(70px,0,-180px) rotateY(-24deg);transform-origin:100% 50%;transition:opacity .9s var(--e-out) .25s,transform 1.3s var(--e-spring) .25s}
html.p3fx #le-podcast .player.rv.is-in{transform:none}
html.p3fx #le-podcast .player.rv .player__wave{clip-path:inset(0 100% 0 0);transition:clip-path .8s var(--e-io) 1s}
html.p3fx #le-podcast .player.rv.is-in .player__wave{clip-path:inset(0 0 0 0)}
html.p3fx #le-podcast .eps.rv{transform:translate3d(40px,0,0)}
html.p3fx #le-podcast .eps.rv.is-in{transform:none}

/* ---- 04 · l'écran du lecteur (.np--deck) ---------------------------------------
   Tant que la liste des épisodes est vide, la colonne de droite reçoit un retour
   vidéo vertical de la famille des écrans « Page suivante » (trois extraits qui
   zappent, segments, REC, onde) et le micro du studio, dont la voix fait des
   ondes. Composants, allumage et pauses : pages.css (section @nextpage) et
   assets/js/modules/nextpage.js. Une entrée dans la liste : l'écran s'efface. */
.podstudio__screen{--mw:calc(160 * var(--m));--mh:calc(var(--mw) * 1.3333);--chin:calc(var(--mw) * .06);--bz:calc(var(--mw) * .022);--tilt:-18deg;--slide:calc(-8 * var(--m));position:relative}
.podstudio__deck:has(.eps li) .podstudio__screen{display:none}
.np--deck .np-mon{right:auto;left:calc(6 * var(--m))}
.np--deck .np-crop{right:auto;left:calc(-4 * var(--m))}
.np--deck .np-floor{right:auto;left:calc(6 * var(--m) + var(--mw) * .04)}
.np--deck .np-vert{inset:0;height:auto;aspect-ratio:auto;transform:none;border-radius:0;box-shadow:none}
.np--deck .np-vert img{object-position:50% 60%}
.np--deck .np-vert .np-segs{top:4.5%}
.np--deck .np-rec{top:10%;left:7%}
.np--deck.is-on :is(.np-ph,.np-flt){animation:none}
.np--deck.is-on .np-vf img{animation:pdKen 6s ease-in-out infinite alternate}
@keyframes pdKen{from{transform:scale(1.04) translateY(1.5%)}to{transform:scale(1.13) translateY(-1.5%)}}
/* le micro, à droite de l'écran (image retournée) ; sa capsule émet des ondes */
.np-mic{position:absolute;right:calc(-8 * var(--m));bottom:0;width:calc(var(--mw) * .98);aspect-ratio:1410/1086;transform-origin:33% 30%}
.np-mic img{position:absolute;inset:0;width:100%;height:100%;transform:scaleX(-1);filter:drop-shadow(0 calc(var(--mw) * .04) calc(var(--mw) * .05) rgba(0,0,0,.8));
  -webkit-mask-image:linear-gradient(128deg,transparent 14%,#000 40%);mask-image:linear-gradient(128deg,transparent 14%,#000 40%)}
.np-mic__ring{position:absolute;left:33%;top:24%;width:calc(var(--mw) * .62);aspect-ratio:1;margin:calc(var(--mw) * -.31);border-radius:50%;
  border:1.5px solid rgba(255,90,106,.85);box-shadow:0 0 14px rgba(246,43,62,.55),inset 0 0 14px rgba(246,43,62,.35);opacity:0}
.np-mic__ring:first-child{opacity:.4}
.np--deck.is-on .np-mic{animation:pdFloat 4.6s ease-in-out 1.2s infinite alternate}
.np--deck.is-on .np-mic__ring{animation:pdRing 2.7s var(--e-out) calc(1s + var(--k,0) * .9s) infinite backwards}
.np-mic__ring:nth-child(2){--k:1}
.np-mic__ring:nth-child(3){--k:2}
@keyframes pdFloat{from{transform:translateY(2%) rotate(-1.5deg)}to{transform:translateY(-3%) rotate(2deg)}}
@keyframes pdRing{from{opacity:.95;transform:scale(.3)}to{opacity:0;transform:scale(1.9)}}
@media (max-width:1023px){
  .podstudio__screen{--mw:min(calc(50vw),280px);--tilt:-14deg;margin-top:26px}
  .np--deck .np-mon{left:calc(50% - var(--mw) * .72)}
  .np--deck .np-crop{left:calc(50% - var(--mw) * .72 - 10px)}
  .np--deck .np-floor{left:calc(50% - var(--mw) * .68)}
  .np--deck .np-mic{right:auto;left:calc(50% - var(--mw) * .12)}
}

/* ==========================================================================
   Tablette et mobile
   ========================================================================== */
@media (max-width:1023px){
  .pvoice__stage{aspect-ratio:2.6/1}
  .pedit-blk{grid-template-columns:minmax(0,1fr);row-gap:0}
  .pedit,.pedit__note,.pfeats{grid-column:1;grid-row:auto}
  .pedit__note{margin-top:14px}
  .pfeats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;margin-top:30px}
  .pfeat:last-child{border-bottom:0}
  .pclips{grid-template-columns:minmax(0,1fr);row-gap:40px}
  .pclips__stage{aspect-ratio:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:620px;margin:0 auto;width:100%}
  .pclips__wide{position:relative;left:auto;top:auto;grid-column:1 / -1;width:100%}
  .pclips__ph{position:relative;left:auto!important;top:auto!important;width:auto;margin-top:-16%}
  .pclips__ph--2{margin-top:-8%}
  html.p3fx .pclips__ph--1{transform:translate3d(0,-60%,-200px) scale(.5)}
  html.p3fx .pclips__ph--2{transform:translate3d(-60%,-70%,-200px) scale(.5)}
  html.p3fx .pclips__ph--3{transform:translate3d(-130%,-60%,-200px) scale(.5)}
  .podstudio .podstudio__deck{padding-top:36px}
}
@media (max-width:1439px){
  .pedit__lane > span{padding-left:5px;letter-spacing:.05em}
}
@media (max-width:640px){
  .pvoice__stage{aspect-ratio:2/1}
  .pedit__tl{grid-template-columns:40px minmax(0,1fr);padding:10px;column-gap:8px}
  .pedit__lane > span{padding-left:4px;font-size:0;letter-spacing:.04em}
  .pedit__lane > span::after{content:attr(data-s);font-size:8px}
  .pedit__nm{font-size:8.5px;letter-spacing:.08em}
  .pedit__card b{font-size:22px}
  .pedit__lower{padding:.4em .8em .45em .7em}
  .pedit__lower b{font-size:12px}
  .pedit__lower small{font-size:7.5px}
  .pfeats{grid-template-columns:1fr;margin-top:24px}
  .pfeat:last-child{border-bottom:1px solid var(--line-2)}
  .pclips__stage{gap:8px}
  .pclips__ph .phone{border-width:3px;border-radius:13px}
  .pclips__ph .phone::before{--cam-top:2px;--cam:3px}
  .pclips__ph .cap{align-items:flex-start;font-size:10.5px;line-height:1.3;letter-spacing:.03em;gap:5px;margin-top:8px}
  .pclips__ph .cap::before{flex:none;width:4px;height:4px;margin-top:.45em}
  .pclips__crop small{font-size:8px;padding:1px 4px;top:4px}
  .pclips__crop i{width:9px;height:9px}
}