/* =====================================================================
   Rattrapage — le panneau des jours passes d'une chaine.

   Il se pose par-dessus la grille des chaines, dans le repere 1920x1080
   de l'application : c'est un enfant de l'ecran actif, jamais du body,
   sinon l'echelle appliquee sur Mac ne le suivrait pas.
   ===================================================================== */

.rattrap{
  position:absolute; left:0; top:0; width:1920px; height:1080px;
  background:rgba(8,8,10,.985);
  z-index:40;
  padding:70px 90px 40px;
  box-sizing:border-box;
  animation:wtv-apparition .18s ease-out both;
}

.rattrap__tete{ margin-bottom:26px }
.rattrap__tete b{
  display:block; font-size:44px; font-weight:600; color:var(--white);
  line-height:1.1;
}
.rattrap__tete span{
  display:block; margin-top:6px; font-size:22px; color:rgba(255,255,255,.45);
}

/* --- les jours ---------------------------------------------------- */
/* Le cadre serrait la pastille de si pres que l'anneau blanc du focus,
   qui deborde de 4 px, etait coupe en haut et en bas. Meme reglage que
   la barre des chaines : une boite plus haute que la pastille, l'anneau
   tombe dans la marge au lieu du bord. Le decoupage reste utile en
   largeur — au-dela de six jours la ligne depasse l'ecran. */
.rattrap__jours{
  height:76px; padding:9px 0; margin-bottom:22px;
  white-space:nowrap; overflow:hidden;
}
.rattrap__jours-inner{
  -webkit-transition:-webkit-transform .18s linear;
  transition:transform .18s linear;
}

/* --- les emissions ------------------------------------------------ */
.rattrap__liste{
  height:700px; overflow:hidden;
}
.rattrap__prog{
  display:block; width:100%; text-align:left;
  padding:16px 22px; margin-bottom:8px;
  background:rgba(255,255,255,.05);
  border:2px solid transparent; border-radius:10px;
  color:var(--white); font:inherit; cursor:pointer;
  transition:background .18s ease-out, transform .18s ease-out;
}
.rattrap__prog i{
  display:inline-block; width:92px; font-style:normal;
  font-size:26px; font-weight:600; color:rgba(255,255,255,.55);
  vertical-align:middle;
}
.rattrap__prog b{
  display:inline-block; max-width:1120px; font-size:27px; font-weight:500;
  vertical-align:middle; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rattrap__prog span{
  display:block; margin-left:92px; margin-top:2px;
  font-size:20px; color:rgba(255,255,255,.42);
}

/* L'etat de selection reprend celui du reste de l'application : c'est la
   meme classe que pose le moteur de focus, pas une regle a part. */
.rattrap__prog.is-focused,
.rattrap__prog:focus{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.85);
  transform:scale(1.012);
  outline:none;
}

.rattrap .empty{
  padding:40px 4px; font-size:24px; color:rgba(255,255,255,.42);
}

/* Le cadre découpe et ne bouge pas ; c'est le contenu qui glisse. */
.rattrap__liste{ position:relative }
.rattrap__liste-inner{
  -webkit-transition:-webkit-transform .18s linear;
  transition:transform .18s linear;
}