/* Accueil, section 04 · Podcast & vidéo (#podcast) : « le micro est une lampe ».
   Chargé après home.css ; tout est limité à main.home #podcast et à html:not(.calage).
   Les calques du micro (halo, sol, barres, anneau, micro détouré) sont créés par
   assets/js/modules/home/pod.js : jamais dans l'éditeur ni en ?calage, où l'image
   d'origine podcast-mic.webp reste affichée.
   États cachés et départs uniquement sous html.yn-fx : sans cette classe (animations
   réduites, éditeur), la section est dans son état final, immobile.
   Notation des commentaires : « 160 u » = calc(160 * var(--u)), planche 1920 × 1080. */

/* ---- 0. Jetons propres à la section (les jetons communs --u, --pl, --pr, --xtra,
   --t-*, --lv, --tk viennent de home.css) ---------------------------------------- */
html:not(.calage) main.home #podcast{
  /* côté de la composition du micro : 1000 u, plus une part du surplus vertical
     des écrans 16:10 (bornée : sur un écran presque carré, le micro serait sinon
     coincé entre le titre et le lecteur) */
  --S:calc(1000 * var(--u) + min(.8 * var(--xtra),80 * var(--u)));
  /* hauteur de l'étiquette : le haut du lecteur s'aligne sur celui du titre */
  --lab-h:calc(var(--t-mono) * 1.3 + 2 * max(4px,calc(5.5 * var(--u))) + 2px);
}

/* ---- 1. Calques du micro (créés par pod.js : .pod__mic.is-layers) ------------- */
/* l'image d'origine et ses anneaux restent pour ?calage, l'éditeur et sans JS */
html:not(.calage) main.home #podcast .pod__mic.is-layers > :is(img,.pod__mic-brand,.pod__pulse){display:none}
/* la boîte du micro couvre la partie visible de la composition (6 % à 94 % de --S) ;
   la scène, carrée, déborde d'autant en haut et en bas */
html:not(.calage) main.home #podcast .pod__mic{clip-path:none}
html:not(.calage) #podcast .pod__stage{position:absolute;left:0;top:calc(var(--S) * -.06);width:var(--S);height:var(--S);perspective:calc(var(--S) * 1.4);perspective-origin:50% 42%}
html:not(.calage) #podcast .pod__stage > :is(div,canvas){position:absolute}
html:not(.calage) main.home #podcast .pod__grid{perspective:calc(1800 * var(--u));perspective-origin:76% 30%}

/* halo rouge derrière la capsule (statique) */
html:not(.calage) #podcast .pod__halo{left:-18%;top:-18%;width:136%;height:136%;background:
  radial-gradient(closest-side at 50% 47%,rgba(246,43,62,.30),rgba(170,16,30,.20) 34%,rgba(120,10,20,.09) 60%,transparent 100%)}

/* sol : plan couché sous le micro ; flaque de lumière + ondes (Web Animations) */
html:not(.calage) #podcast .pod__floor{left:0;top:39%;width:100%;height:100%;transform:rotateX(78deg);pointer-events:none}
html:not(.calage) #podcast .pod__floor > b{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(closest-side,rgba(246,43,62,.42),rgba(150,12,26,.16) 55%,transparent 100%)}
html:not(.calage) #podcast .pod__floor > i{position:absolute;left:20%;top:20%;width:60%;height:60%;border-radius:50%;opacity:0;transform:scale(.4);
  background:radial-gradient(closest-side,transparent 91%,rgba(255,96,110,.9) 96.5%,transparent 100%)}

/* barres de l'onde (canvas 2D, dessinées par pod.js) */
html:not(.calage) #podcast .pod__barsd{left:0;top:33%;width:100%;height:34%;pointer-events:none}
html:not(.calage) #podcast .pod__bars{display:block;width:100%;height:100%}

/* anneau néon : deux demi-arcs tracés depuis le haut, lueur dans un calque à part */
html:not(.calage) #podcast .pod__ringd{left:9.05%;top:9.05%;width:81.9%;height:81.9%}
html:not(.calage) #podcast .pod__ring{position:absolute;inset:0;transition:scale .6s var(--e-out,cubic-bezier(.16,1,.3,1))}
html:not(.calage) #podcast .pod__ring svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:calc(.8 + .2 * var(--v,.5))}
html:not(.calage) #podcast .pod__arc{fill:none;stroke:#ffd9dc;stroke-width:1;stroke-dasharray:1 1;stroke-dashoffset:0}
html:not(.calage) #podcast .pod__arc--glow{stroke:#ff4052;stroke-width:3.4;opacity:.85}
html:not(.calage) #podcast .pod__far{fill:none;stroke:#f62b3e;stroke-width:.45;opacity:.34}
html:not(.calage) #podcast .pod__far + .pod__far{opacity:.18}
html:not(.calage) #podcast .pod__ring-lit{position:absolute;left:15.71%;top:15.71%;width:68.58%;height:68.58%}
html:not(.calage) #podcast .pod__ring-glow{position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 calc(var(--S) * .06) calc(var(--S) * .01) rgba(246,43,62,.62),0 0 calc(var(--S) * .016) calc(var(--S) * .002) rgba(255,64,82,.7),inset 0 0 calc(var(--S) * .06) calc(var(--S) * .008) rgba(246,43,62,.45);
  opacity:calc(.42 + .45 * var(--v,.5) + .25 * var(--h,0))}

/* le micro détouré, sa capsule qui s'allume et la marque sur la bague */
html:not(.calage) #podcast .pod__dep{inset:0}
html:not(.calage) #podcast .pod__body{position:absolute;inset:0;transform-origin:50% 62%}
html:not(.calage) #podcast .pod__obj{position:absolute;left:-11.43%;top:24%;width:91.65%;height:auto;max-width:none;filter:none;
  /* le bras et le câble s'éteignent avant d'atteindre les textes */
  -webkit-mask-image:linear-gradient(90deg,transparent 33%,#000 48%),linear-gradient(#000 76%,transparent 97%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 33%,#000 48%),linear-gradient(#000 76%,transparent 97%);mask-composite:intersect}
html:not(.calage) #podcast .pod__lamp{position:absolute;left:37.6%;top:27.2%;width:24.8%;height:26.3%;border-radius:50% / 32%;mix-blend-mode:screen;pointer-events:none;
  background:radial-gradient(closest-side at 50% 46%,rgba(255,92,104,.62),rgba(246,43,62,.28) 52%,transparent 100%);
  opacity:calc(.12 + .5 * var(--v,.5) + .15 * var(--h,0))}
html:not(.calage) #podcast .pod__brand{position:absolute;left:50.2%;top:55.5%;transform:translate(-50%,-50%);padding-left:.34em;
  font-family:var(--f-title);font-weight:700;font-size:calc(var(--S) * .0215);line-height:1;letter-spacing:.34em;color:#ff4558;text-shadow:0 0 .35em rgba(246,43,62,.75)}
html:not(.calage) #podcast .pod__brand::before{content:"";position:absolute;left:-40%;right:-40%;top:-90%;bottom:-90%;z-index:-1;
  background:radial-gradient(closest-side,rgba(255,64,82,.5),transparent);opacity:calc(.2 + .8 * var(--v,.5))}

/* calques promus seulement pendant l'ambiance (boucle en cours) et l'arrivée */
html:not(.calage) #podcast.is-live :is(.pod__ring svg,.pod__ring-glow,.pod__lamp),html:not(.calage) #podcast.is-live .pod__brand::before{will-change:opacity}
html:not(.calage) #podcast.is-arriving :is(.pod__body,.pod__halo,.player,.pod__ring-lit,.pod__ring svg){will-change:transform,opacity}
html.yn-moving:not(.calage) #podcast :is(.pod__ringd,.pod__barsd){will-change:transform,opacity}

/* ---- 2. Ordinateur : la section remplit l'écran --------------------------------- */
@media (min-width:1024px){
  html:not(.calage) main.home #podcast .pod__grid{
    grid-template-columns:calc(600 * var(--u)) minmax(0,1fr) calc(580 * var(--u));
    grid-template-rows:auto minmax(0,1fr);
    grid-template-areas:"intro . player" "intro . eps";
    align-items:start;padding:0 var(--pr) 0 var(--pl)}
  html:not(.calage) main.home #podcast .pod__intro{align-self:start}
  html:not(.calage) main.home #podcast .pod__intro .sec__label{height:var(--lab-h)}
  html:not(.calage) main.home #podcast .pod__title{font-size:calc(160 * var(--u));margin-top:calc(26 * var(--u) + .1 * var(--xtra));max-width:calc(600 * var(--u))}
  html:not(.calage) main.home #podcast .pod__intro .txt{font-size:var(--t-body);max-width:calc(520 * var(--u));margin-top:calc(44 * var(--u) + .25 * var(--xtra))}
  html:not(.calage) main.home #podcast .pod__intro .btn{margin-top:calc(40 * var(--u) + .25 * var(--xtra))}

  /* micro : composition de --S de côté, centrée entre le titre (560 u depuis --pl)
     et le lecteur (vers x = 975 u sur la planche), à 52 % de la hauteur */
  html:not(.calage) main.home #podcast .pod__mic{left:calc((var(--pl) + 560 * var(--u) + 100% - var(--pr) - 580 * var(--u) - var(--S)) / 2);top:calc(52% - var(--S) * .44);width:var(--S);height:calc(var(--S) * .88);transform:none;margin:0}

  /* lecteur : 580 u, bord droit sur --pr, haut aligné sur le haut des capitales du
     titre (boîte du titre + 20 u) ; verre fumé sans backdrop-filter (coûteux
     au-dessus de la vidéo) */
  html:not(.calage) main.home #podcast .player{grid-area:player;margin-top:calc(var(--lab-h) + 46 * var(--u) + .1 * var(--xtra));min-height:0;
    padding:calc(58 * var(--u)) calc(40 * var(--u)) calc(30 * var(--u));
    background:linear-gradient(160deg,rgba(22,20,21,.84),rgba(9,8,9,.9) 55%,rgba(14,6,8,.9));-webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:0 calc(40 * var(--u)) calc(80 * var(--u)) calc(-30 * var(--u)) rgba(0,0,0,.75)}
  html:not(.calage) main.home #podcast .player::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(246,43,62,.7) 30%,rgba(255,217,220,.55) 50%,rgba(246,43,62,.7) 70%,transparent)}
  html:not(.calage) main.home #podcast .player__tag{left:-1px;top:calc(16 * var(--u));gap:calc(9 * var(--u));padding:calc(5 * var(--u)) calc(14 * var(--u)) calc(5 * var(--u)) calc(9 * var(--u));font-size:var(--t-mono)}
  html:not(.calage) main.home #podcast .player__tag i{width:max(5px,calc(7 * var(--u)));height:max(5px,calc(7 * var(--u)))}
  html:not(.calage) main.home #podcast .player__ep{font-size:var(--t-mono)}
  html:not(.calage) main.home #podcast .player__state{font-size:calc(var(--t-mono) * .9);padding:1px .6em}
  html:not(.calage) main.home #podcast .player__title{margin-top:calc(10 * var(--u));font-size:max(19px,calc(30 * var(--u)));max-width:calc(420 * var(--u))}
  html:not(.calage) main.home #podcast .player__row{gap:calc(26 * var(--u));margin-top:calc(26 * var(--u) + .1 * var(--xtra))}
  html:not(.calage) main.home #podcast .player__play{--d:max(44px,calc(64 * var(--u)))}
  html:not(.calage) main.home #podcast .player__wave{height:calc(48 * var(--u))}
  html:not(.calage) main.home #podcast .player__times{margin-top:calc(6 * var(--u));font-size:var(--t-mono)}
  html:not(.calage) main.home #podcast .player__msg{margin-top:calc(10 * var(--u));font-size:var(--t-mono)}

  /* épisodes à venir : rangées de 56 u sous le lecteur */
  html:not(.calage) main.home #podcast .eps{grid-area:eps;margin:calc(30 * var(--u) + .2 * var(--xtra)) 0 0;padding:0 0 0 calc(8 * var(--u))}
  html:not(.calage) main.home #podcast .eps__list::before{left:calc(18 * var(--u) - .5px);top:calc(28 * var(--u));bottom:calc(28 * var(--u))}
  html:not(.calage) main.home #podcast .ep{min-height:calc(56 * var(--u) + .07 * var(--xtra));gap:calc(20 * var(--u));padding:calc(6 * var(--u)) 0}
  html:not(.calage) main.home #podcast .ep__dot{--d:max(28px,calc(36 * var(--u)))}
  html:not(.calage) main.home #podcast .ep__meta{font-size:var(--t-mono)}
  html:not(.calage) main.home #podcast .ep__name{margin-top:calc(3 * var(--u));font-size:max(15px,calc(19 * var(--u)))}
  html:not(.calage) main.home #podcast .eps__on{margin-top:calc(16 * var(--u))}
}

/* ---- 3. Téléphone et tablette : le micro en fond, à droite du titre --------------- */
/* Le titre passe sur 3 lignes comme sur ordinateur (« DONNEZ / DE LA / VOIX. ») :
   la colonne à droite du titre reste libre pour le micro, et « VOIX. » ne passe
   jamais sur son corps. Repères (fractions de --S) : suspension de 32,8 % à 69,8 %
   en largeur, capsule à 28,7 % du haut, bas de la suspension à 78 %. */
@media (max-width:1023px){
  html:not(.calage) main.home #podcast{
    --ft:clamp(40px,calc(60 * var(--u)),72px);
    --mb:calc(var(--fs-top) + 32px + 2.7 * var(--ft));                     /* bas de la suspension : au plus bas du titre */
    --S:min(110vw,calc(100 * var(--u) + 560px),calc((var(--mb) - var(--hdr) - 10px) / .493));
    --ml:max(calc(38px + 3.48 * var(--ft)),calc(100vw - .37 * var(--S) - 4vw))}  /* bord gauche de la suspension */
  html:not(.calage) main.home #podcast .pod__mic{position:absolute;right:auto;left:calc(var(--ml) - .328 * var(--S));top:calc(var(--mb) - .72 * var(--S));width:var(--S);height:calc(var(--S) * .88);margin:0;transform:none;opacity:.5;z-index:0}
  html:not(.calage) main.home #podcast .pod__title{font-size:var(--ft);max-width:4.2em;margin-top:14px}
  html:not(.calage) main.home #podcast .pod__intro{margin-bottom:16px}
  html:not(.calage) main.home #podcast .player{background:linear-gradient(160deg,rgba(20,18,19,.86),rgba(9,8,9,.92));-webkit-backdrop-filter:none;backdrop-filter:none}
  /* cartouche du lecteur : les deux points ne collent plus au texte ni au cadre
     (--m est minuscule au téléphone : valeurs en px, comme sur podcast.html) */
  html:not(.calage) main.home #podcast .player__tag{left:0;gap:6px;padding-left:8px}
}
/* téléphones bas : la pile se resserre pour tenir dans l'écran */
@media (max-width:1023px) and (max-height:760px){
  html:not(.calage) main.home #podcast{--mb:calc(var(--fs-top) + 28px + 2.7 * var(--ft))}
  html:not(.calage) main.home #podcast .pod__title{margin-top:10px}
  html:not(.calage) main.home #podcast .pod__intro .txt{margin-top:10px}
  html:not(.calage) main.home #podcast .pod__intro .btn{margin-top:14px}
  html:not(.calage) main.home #podcast .pod__intro{margin-bottom:12px}
  html:not(.calage) main.home #podcast .player{padding:28px 14px 10px}
  html:not(.calage) main.home #podcast .player__title{font-size:18px}
  html:not(.calage) main.home #podcast .player__row{margin-top:8px}
  html:not(.calage) main.home #podcast .eps{margin-top:8px}
  html:not(.calage) main.home #podcast .ep{min-height:36px;padding:2px 0}
  html:not(.calage) main.home #podcast .ep__dot{--d:26px}
}
/* très bas (375 × 667) : la mention « Épisode 0X · À venir » des épisodes suivants et
   le cartouche décoratif du lecteur s'effacent (le lecteur dit déjà « À venir ») */
@media (max-width:1023px) and (max-height:700px){
  html:not(.calage) main.home #podcast .player__tag{display:none}
  html:not(.calage) main.home #podcast .player{padding-top:14px}
  html:not(.calage) main.home #podcast .ep__meta{display:none}
  html:not(.calage) main.home #podcast .ep{min-height:32px}
  html:not(.calage) main.home #podcast .ep__name{margin-top:0}
}

/* ---- 4. Arrivée (T0 = .st-in, posé par sections.js) et départ (--lv) -------------- */
/* états cachés : la section n'a pas encore été rejointe */
html.yn-fx main.home #podcast:not(.st-in) .pod__halo,
html.yn-fx main.home #podcast:not(.st-in) .pod__floor > b,
html.yn-fx main.home #podcast:not(.st-in) .pod__ring-lit,
html.yn-fx main.home #podcast:not(.st-in) .pod__far{opacity:0}
html.yn-fx main.home #podcast:not(.st-in) .pod__body{opacity:0;transform:translate3d(0,calc(40 * var(--u)),0) scale(1.06)}
html.yn-fx main.home #podcast:not(.st-in) .pod__arc{stroke-dashoffset:1}
html.yn-fx main.home #podcast .player.rv{opacity:1;transform:none}
html.yn-fx main.home #podcast:not(.st-in) .player.rv{opacity:0;transform:translate3d(calc(120 * var(--u)),0,calc(-200 * var(--u))) rotateY(-30deg)}
html.yn-fx main.home #podcast .player__wave{clip-path:inset(-12px -12px -12px -12px)}
html.yn-fx main.home #podcast:not(.st-in) .player__wave{clip-path:inset(-12px 100% -12px -12px)}
html.yn-fx main.home #podcast .eps.rv{opacity:1;transform:none;transition:none}
html.yn-fx main.home #podcast:not(.st-in) .eps__list > li,
html.yn-fx main.home #podcast:not(.st-in) .eps__on{opacity:0;transform:translate3d(calc(24 * var(--u)),0,0)}
html.yn-fx main.home #podcast:not(.st-in) .ep__dot{transform:scale(.6)}

/* chorégraphie : t en ms après T0, multiplié par --tk (0,6 au 2e passage) */
html.yn-fx main.home #podcast.st-in .pod__halo{transition:opacity calc(900ms * var(--tk,1)) var(--e-out,cubic-bezier(.16,1,.3,1))}
html.yn-fx main.home #podcast.st-in .pod__body{transition:opacity calc(1400ms * var(--tk,1)) var(--e-out,cubic-bezier(.16,1,.3,1)),transform calc(1400ms * var(--tk,1)) var(--e-out,cubic-bezier(.16,1,.3,1))}
html.yn-fx main.home #podcast.st-in .pod__arc{transition:stroke-dashoffset calc(1200ms * var(--tk,1)) var(--e-io,cubic-bezier(.65,0,.35,1)) calc(150ms * var(--tk,1))}
html.yn-fx main.home #podcast.st-in .pod__ring-lit{transition:opacity calc(600ms * var(--tk,1)) var(--e-out,cubic-bezier(.16,1,.3,1)) calc(1150ms * var(--tk,1))}
html.yn-fx main.home #podcast.st-in .pod__far{transition:opacity calc(900ms * var(--tk,1)) var(--e-out,cubic-bezier(.16,1,.3,1)) calc(1100ms * var(--tk,1))}
html.yn-fx main.home #podcast.st-in .pod__floor > b{transition:opacity calc(1200ms * var(--tk,1)) var(--e-out,cubic-bezier(.16,1,.3,1)) calc(300ms * var(--tk,1))}
html.yn-fx main.home #podcast.st-in .player.rv{transition:opacity calc(700ms * var(--tk,1)) var(--e-out,cubic-bezier(.16,1,.3,1)) calc(550ms * var(--tk,1)),transform calc(1100ms * var(--tk,1)) var(--e-spring,cubic-bezier(.34,1.25,.64,1)) calc(550ms * var(--tk,1))}
html.yn-fx main.home #podcast.st-in .player__wave{transition:clip-path calc(700ms * var(--tk,1)) var(--e-io,cubic-bezier(.65,0,.35,1)) calc(900ms * var(--tk,1))}
html.yn-fx main.home #podcast.st-in .eps__list > li,
html.yn-fx main.home #podcast.st-in .eps__on{transition:opacity calc(600ms * var(--tk,1)) var(--e-out,cubic-bezier(.16,1,.3,1)) calc((800ms + var(--k,3) * 80ms) * var(--tk,1)),transform calc(600ms * var(--tk,1)) var(--e-out,cubic-bezier(.16,1,.3,1)) calc((800ms + var(--k,3) * 80ms) * var(--tk,1))}
html.yn-fx main.home #podcast.st-in .ep__dot{transition:transform calc(500ms * var(--tk,1)) var(--e-pop,cubic-bezier(.34,1.4,.64,1)) calc((900ms + var(--k,3) * 80ms) * var(--tk,1)),border-color .3s,box-shadow .3s}
html:not(.calage) #podcast .eps__list > li:nth-child(1){--k:0}
html:not(.calage) #podcast .eps__list > li:nth-child(2){--k:1}
html:not(.calage) #podcast .eps__list > li:nth-child(3){--k:2}

/* « VOIX. » se remplit du bas vers le haut (le reste du titre : commun, home.css) */
html.yn-fx main.home #podcast .pod__title .red{background-image:linear-gradient(0deg,var(--red) calc(var(--fill) - 10%),#ffd9dc var(--fill),transparent calc(var(--fill) + 3%))}

/* départ « à travers l'anneau » : piloté par --lv (0 → 1 quand la section part vers
   le haut), donc réversible, à la molette comme au doigt */
html.yn-fx main.home #podcast .pod__dep{transform:translate3d(0,calc(80 * var(--u) * var(--lv,0)),calc(-200 * var(--u) * var(--lv,0)))}
html.yn-fx main.home #podcast .pod__ringd{transform:scale(calc(1 + 2.2 * var(--lv,0)));opacity:calc(1 - var(--lv,0))}
html.yn-fx main.home #podcast :is(.pod__barsd,.pod__floor){opacity:calc(1 - var(--lv,0))}
html.yn-fx main.home #podcast .pod__title{transform:translate3d(0,calc(-6vh * var(--lv,0)),0)}

/* survol du bouton lecture : l'anneau s'élargit (son éclat : --h, posé par pod.js) */
html.yn-fx main.home #podcast.is-hot .pod__ring{scale:1.04}

/* animations réduites et sans yn-fx : une onde au sol, fixe */
html:not(.calage):not(.yn-fx) #podcast .pod__floor > i:first-of-type{opacity:.4;transform:scale(1)}

/* ---- 5. Extraits verticaux à la place du lecteur ---------------------------------
   #podcast.pod--clips (pod.js) tant qu'aucun épisode n'est publié : trois extraits
   9:16 en téléphones, en éventail (celui du centre devant), qui « jouent » (barre de
   lecture) ; le lecteur et la liste « à venir » sont masqués. --cw = largeur du
   téléphone du centre ; l'éventail fait 2,3 × --cw de large. */
html:not(.calage) main.home #podcast.pod--clips :is(.player,.eps){display:none}
html:not(.calage) main.home #podcast .pod__clips{position:relative;z-index:2;margin:0;
  --cw:calc(250 * var(--u) + .1 * var(--xtra));--bw:max(3px,calc(var(--cw) * .035))}
html:not(.calage) main.home #podcast .pod__fan{position:relative;width:calc(var(--cw) * 2.3);height:calc(var(--cw) * 2.1643 + 2 * var(--bw));perspective:calc(var(--cw) * 5.6);perspective-origin:50% 40%}
html:not(.calage) main.home #podcast .pod__clip{position:absolute;top:0;left:calc(var(--cw) * .65);width:var(--cw);margin:0;z-index:3;transform-origin:50% 60%}
html:not(.calage) main.home #podcast .pod__clip--l,
html:not(.calage) main.home #podcast .pod__clip--r{--sw:calc(var(--cw) * .82);width:var(--sw);top:calc(var(--cw) * .1948);z-index:2}
html:not(.calage) main.home #podcast .pod__clip--l{left:0;transform:translate3d(0,0,calc(var(--cw) * -.24)) rotateY(16deg)}
html:not(.calage) main.home #podcast .pod__clip--r{left:auto;right:0;transform:translate3d(0,0,calc(var(--cw) * -.24)) rotateY(-16deg)}
/* le téléphone : cadre sombre, encoche, lueur rouge discrète */
html:not(.calage) main.home #podcast .pod__phone{position:relative;overflow:hidden;border:var(--bw) solid #151517;border-radius:calc(var(--cw) * .13);background:#000;
  box-shadow:0 calc(30 * var(--u)) calc(60 * var(--u)) calc(-18 * var(--u)) rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.09),0 0 calc(60 * var(--u)) calc(-20 * var(--u)) rgba(246,43,62,.55)}
html:not(.calage) main.home #podcast .pod__phone::before{content:"";position:absolute;left:50%;top:calc(var(--cw) * .03);z-index:2;width:30%;height:calc(var(--cw) * .05);border-radius:999px;background:#151517;transform:translateX(-50%)}
html:not(.calage) main.home #podcast .pod__phone img{display:block;width:100%;height:auto;aspect-ratio:420/909}
html:not(.calage) main.home #podcast :is(.pod__clip--l,.pod__clip--r) .pod__phone::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(8,6,7,.3);pointer-events:none}
/* barre de lecture de l'extrait (en bas de l'écran) */
html:not(.calage) main.home #podcast .pod__bar{position:absolute;left:9%;right:9%;bottom:3.4%;z-index:2;height:max(2px,calc(var(--cw) * .012));border-radius:2px;overflow:hidden;background:rgba(255,255,255,.3)}
html:not(.calage) main.home #podcast .pod__bar::after{content:"";position:absolute;inset:0;background:var(--red);transform-origin:0 50%;transform:scaleX(.62)}
html:not(.calage) main.home #podcast .pod__clips-cap{margin:calc(30 * var(--u)) 0 0 50%;width:max-content;max-width:calc(100vw - 48px);translate:-50% 0;text-align:center;font-family:var(--f-mono);font-weight:500;font-size:var(--t-mono);letter-spacing:.2em;line-height:1.5;text-transform:uppercase;color:var(--ink-2)}

/* ordinateur : la colonne du lecteur (580 u), haut aligné sur le haut du titre */
@media (min-width:1024px){
  html:not(.calage) main.home #podcast .pod__clips{grid-column:3;grid-row:1 / span 2;justify-self:end;align-self:start;margin-top:calc(var(--lab-h) + 46 * var(--u) + .1 * var(--xtra))}
}
/* téléphone et tablette : sous le texte, au centre ; taille bornée par la hauteur */
@media (max-width:1023px){
  html:not(.calage) main.home #podcast .pod__clips{grid-area:player;justify-self:center;margin-top:6px;
    --cw:clamp(72px,min(30vw,calc((100svh - 520px) / 1.75)),190px)}
  html:not(.calage) main.home #podcast .pod__clips-cap{margin-top:14px;font-size:10px;letter-spacing:.08em}
}
@media (max-width:1023px) and (max-height:760px){
  html:not(.calage) main.home #podcast .pod__clips-cap{display:none}
}

/* arrivée (T0 = .st-in) : les trois téléphones montent de la profondeur, celui du
   centre d'abord ; puis la légende */
html.yn-fx main.home #podcast .pod__clip{transition:opacity calc(700ms * var(--tk,1)) var(--e-out,cubic-bezier(.16,1,.3,1)) calc(var(--cd,550ms) * var(--tk,1)),
  transform calc(1200ms * var(--tk,1)) var(--e-spring,cubic-bezier(.34,1.25,.64,1)) calc(var(--cd,550ms) * var(--tk,1)),scale .45s var(--e-out,cubic-bezier(.16,1,.3,1))}
html.yn-fx main.home #podcast .pod__clip--l{--cd:700ms}
html.yn-fx main.home #podcast .pod__clip--r{--cd:820ms}
html.yn-fx main.home #podcast:not(.st-in) .pod__clip{opacity:0;transform:translate3d(0,calc(var(--cw) * .4),calc(var(--cw) * -1.1)) rotateX(14deg)}
html.yn-fx main.home #podcast .pod__clips-cap{transition:opacity calc(600ms * var(--tk,1)) var(--e-out,cubic-bezier(.16,1,.3,1)) calc(1050ms * var(--tk,1)),transform calc(700ms * var(--tk,1)) var(--e-out,cubic-bezier(.16,1,.3,1)) calc(1050ms * var(--tk,1))}
html.yn-fx main.home #podcast:not(.st-in) .pod__clips-cap{opacity:0;transform:translate3d(0,calc(12 * var(--u)),0)}
/* ambiance (section active seulement) : chaque extrait « joue » (barre qui se
   remplit, durées différentes) et flotte doucement */
html.yn-fx main.home #podcast .pod__bar::after{animation:podPlay var(--pd,7.2s) linear calc(var(--cd,550ms) + 600ms) infinite both paused}
html.yn-fx main.home #podcast .pod__clip--l .pod__bar::after{--pd:8.6s}
html.yn-fx main.home #podcast .pod__clip--r .pod__bar::after{--pd:9.8s}
html.yn-fx main.home #podcast .pod__clip{animation:podFloat var(--pf,7.4s) ease-in-out calc(var(--cd,550ms) + 1300ms) infinite paused}
html.yn-fx main.home #podcast .pod__clip--l{--pf:8.9s}
html.yn-fx main.home #podcast .pod__clip--r{--pf:10.3s}
html.yn-fx main.home #podcast.is-current.st-in .pod__clip,
html.yn-fx main.home #podcast.is-current.st-in .pod__bar::after{animation-play-state:running}
@keyframes podPlay{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes podFloat{0%,100%{translate:0 0}50%{translate:0 calc(var(--cw) * -.035)}}
/* départ (--lv) : les extraits reculent avec le reste de la section */
html.yn-fx main.home #podcast .pod__clips{transform:translate3d(0,calc(-4vh * var(--lv,0)),0);opacity:calc(1 - .6 * var(--lv,0))}
/* pointeur fin : l'extrait survolé passe devant */
@media (hover:hover) and (pointer:fine){
  html:not(.calage) main.home #podcast .pod__clip:hover{z-index:4;scale:1.04}
}