.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:currentColor;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:currentColor;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:currentColor;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:currentColor;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}
.tippy-box[data-animation=scale][data-placement^=top]{transform-origin:bottom}.tippy-box[data-animation=scale][data-placement^=bottom]{transform-origin:top}.tippy-box[data-animation=scale][data-placement^=left]{transform-origin:right}.tippy-box[data-animation=scale][data-placement^=right]{transform-origin:left}.tippy-box[data-animation=scale][data-state=hidden]{transform:scale(.5);opacity:0}
@charset "UTF-8";
/* stylelint-disable selector-class-pattern */
[data-tippy-root] {
  overflow: visible;
}
[data-tippy-root] .tippy-box {
  border-radius: var(--border-radius-huge-u);
  padding: 0;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.05), inset 1px 1px rgba(255, 255, 255, 0.05);
}
[data-tippy-root] .tippy-box > .tippy-content {
  flex: 0 1 auto;
  padding: 0;
}
[data-tippy-root] .tippy-box > .tippy-content > div {
  flex: 0 1 auto;
}
[data-tippy-root] .tippy-box > .tippy-content .tooltipContent {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  margin: 10px;
  text-align: left;
}
[data-tippy-root] .tippy-box > .tippy-content .tooltipContent.carouselIndex {
  margin: 0;
}
[data-tippy-root] .tippy-box > .tippy-content .tooltipContent.carouselIndex > img {
  border-radius: var(--tile-border-radius-u);
  margin: 16px 16px 0;
}
[data-tippy-root] .tippy-box > .tippy-content .tooltipContent.carouselIndex > .titleContainer {
  display: flex;
  flex-direction: column;
  font: 14px var(--regular-font);
  margin: 5px 16px;
}
[data-tippy-root] .tippy-box > .tippy-content .tooltipContent.carouselIndex.gemtv, [data-tippy-root] .tippy-box > .tippy-content .tooltipContent.carouselIndex.landscape {
  width: 192px;
}
[data-tippy-root] .tippy-box > .tippy-content .tooltipContent.carouselIndex.gemtv > img, [data-tippy-root] .tippy-box > .tippy-content .tooltipContent.carouselIndex.landscape > img {
  height: 90px;
  width: 160px;
}
[data-tippy-root] .tippy-box > .tippy-content .tooltipContent.carouselIndex.portrait {
  width: 144px;
}
[data-tippy-root] .tippy-box > .tippy-content .tooltipContent.carouselIndex.portrait > img {
  height: 166px;
  width: 112px;
}
[data-tippy-root] .tippy-box > .tippy-content .tooltipContent.button {
  padding-inline: 10px;
}
[data-tippy-root] .tippy-box > .tippy-content .tooltipContent.castSummary {
  align-items: flex-start;
  animation: fadeIn var(--medium-duration) ease-in forwards;
  display: flex;
  flex-direction: column;
  margin: 20px;
}
[data-tippy-root] .tippy-box > .tippy-content .tooltipContent.castSummary a {
  align-items: center;
  font: 14px var(--regular-font);
}
[data-tippy-root] .tippy-box > .tippy-content .tooltipContent.castSummary a > .pictoElement {
  width: 24px;
}
[data-tippy-root] .tippy-box > .tippy-content .tooltipContent.castSummary a > .pictoElement > svg {
  width: 12px;
}
[data-tippy-root] .tippy-box > .tippy-content .tooltipContent.castSummary .summary {
  font: 14px var(--light-font);
  margin: 20px 0;
  width: 400px;
}
[data-tippy-root] .tippy-box > .tippy-content .tooltipContent.castSummary > .detailsAndImage {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
}
[data-tippy-root] .tippy-box > .tippy-content .tooltipContent.castSummary > .detailsAndImage > .details {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
}
[data-tippy-root] .tippy-box > .tippy-content .tooltipContent.castSummary > .detailsAndImage > .details > .name {
  font: 24px var(--semibold-font);
}
[data-tippy-root] .tippy-box > .tippy-content .tooltipContent.castSummary > .detailsAndImage > .details > .dates {
  font: 14px var(--regular-font);
  opacity: 0.8;
}
[data-tippy-root] .tippy-box > .tippy-content .tooltipContent.castSummary > .detailsAndImage > img {
  margin-left: 10px;
  width: 100px;
}
[data-tippy-root] .tippy-box > .tippy-content .tooltipContent.castSummary > .citation {
  align-self: flex-end;
  font: 12px var(--regular-font);
  margin-top: 20px;
}
[data-tippy-root] .tippy-box > .tippy-content .tooltipContent.castSummary > .citation > a {
  font: 12px var(--semibold-font);
  margin-left: 5px;
}
[data-tippy-root] .tippy-box > .tippy-content .tooltipContent.castSummary > .citation > .license::before {
  content: "-";
  margin: 0 5px;
}
[data-tippy-root] .tippy-box > .tippy-content .tooltipContent.vodInformation {
  display: flex;
  flex-direction: column;
  margin: 20px 30px;
}
[data-tippy-root] .tippy-box > .tippy-content .tooltipContent.vodInformation > .bullet {
  font: 14px var(--regular-font);
}
[data-tippy-root] .tippy-box > .tippy-content .tooltipContent.vodInformation > .bullet::before {
  content: "■";
  margin-right: 10px;
}
[data-tippy-root] .tippy-box > .tippy-content .tooltipContent.vodInformation > .title {
  font: 20px var(--semibold-font);
}
[data-tippy-root] .tippy-box > .tippy-content .tooltipContent.vodInformation > .subtitle {
  font: 16px var(--semibold-font);
  margin: 20px 0 10px;
}
[data-tippy-root] .tippy-box > .tippy-content .tooltipContent.vodInformation > .customerService {
  font: 16px var(--semibold-font);
  margin-top: 40px;
}
[data-tippy-root] .tippy-box > .tippy-content .tooltipContent.npvrError {
  margin: 20px;
  font: 16px var(--semibold-font);
}
[data-tippy-root] .tippy-box > .tippy-content .tooltipContent.npvrError > .text.title {
  font: 16px var(--bold-font);
  margin-bottom: 10px;
}
[data-tippy-root] .tippy-box > .tippy-content .tooltipContent.npvrError > .conflicts {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 5px 0 0;
  padding: 0;
}
[data-tippy-root] .tippy-box > .tippy-content .tooltipContent.npvrError > .conflicts > .conflictItem {
  margin-top: 5px;
}
[data-tippy-root] .tippy-box[data-theme=dark] {
  background-color: var(--tooltip-background);
}
[data-tippy-root] .tippy-box[data-theme=dark] > .tippy-content .tooltipContent {
  color: var(--header-burger-menu-foreground);
}
[data-tippy-root] .tippy-box[data-theme=dark] > .tippy-content .tooltipContent.castSummary a:link, [data-tippy-root] .tippy-box[data-theme=dark] > .tippy-content .tooltipContent.castSummary a:visited {
  color: var(--overlay-foreground-2);
}
[data-tippy-root] .tippy-box[data-theme=dark] > .tippy-content .tooltipContent.castSummary a:active, [data-tippy-root] .tippy-box[data-theme=dark] > .tippy-content .tooltipContent.castSummary a:hover {
  color: var(--overlay-foreground-1);
}
[data-tippy-root] .tippy-box[data-theme=dark] > .tippy-content .tooltipContent.castSummary a svg {
  fill: var(--overlay-foreground-2);
}
[data-tippy-root] .tippy-box[data-theme=dark] > .tippy-content .tooltipContent.castSummary a:hover > svg {
  color: var(--overlay-foreground-1);
}
[data-tippy-root] .tippy-box[data-theme=dark] > .tippy-content .tooltipContent.castSummary > .citation {
  color: var(--overlay-foreground-2);
}
[data-tippy-root] .tippy-box[data-theme=dark] > .tippy-content .tooltipContent.npvrError > .text {
  color: var(--overlay-foreground-1);
}
[data-tippy-root] .tippy-box[data-theme=dark] > .tippy-content .tooltipContent.carouselIndex > .title {
  background-color: var(--overlay-transparent-background);
  color: var(--overlay-foreground-1);
}
[data-tippy-root] .tippy-box[data-theme=light] {
  background-color: var(--overlay-foreground-1);
}
[data-tippy-root] .tippy-box[data-theme=light] > .tippy-content .tooltipContent {
  color: var(--overlay-background);
}
[data-tippy-root] .tippy-box[data-animation=fade][data-state=hidden] {
  opacity: 0;
  transform: scale(0);
}
[data-tippy-root] .tippy-box[data-animation=fade][data-state=visible] {
  opacity: 1;
  transform: scale(1);
}

/* stylelint-enable selector-class-pattern */

/* stylelint-disable selector-class-pattern */
.Toastify > .Toastify__toast-container {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  overflow: visible;
  top: 60px;
  z-index: 11000;
}
.Toastify > .Toastify__toast-container > .Toastify__toast {
  align-items: flex-start;
  background-color: var(--background);
  border-radius: var(--border-radius-tiny-u);
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
  box-shadow: 0 1px 10px 0 var(--shadow), 0 2px 15px 0 var(--shadow);
  color: var(--text-foreground-1);
  display: flex;
  flex-direction: column;
  font: 16px var(--regular-font);
  justify-content: center;
  overflow: visible;
  padding-inline: 30px;
}
.Toastify > .Toastify__toast-container > .Toastify__toast::before {
  border-radius: 50%;
  content: "";
  height: 40px;
  left: -24px;
  margin-top: -20px;
  position: absolute;
  top: 50%;
  width: 40px;
}
.Toastify > .Toastify__toast-container > .Toastify__toast::after {
  align-items: center;
  background-color: var(--notification-picto-background-overlay);
  border-radius: 50%;
  display: flex;
  color: #fff;
  content: "";
  justify-content: center;
  left: -20px;
  height: 32px;
  margin-top: -16px;
  position: absolute;
  top: 50%;
  width: 32px;
}
.Toastify > .Toastify__toast-container > .Toastify__toast > .Toastify__progress-bar {
  border-radius: 0 0 var(--border-radius-tiny-u) var(--border-radius-tiny-u);
}
.Toastify > .Toastify__toast-container > .Toastify__toast.Toastify__toast--error::before {
  background-color: var(--error);
}
.Toastify > .Toastify__toast-container > .Toastify__toast.Toastify__toast--error::after {
  content: url("data:image/svg+xml,%3Csvg viewBox=%270 0 200 240%27 xmlns=%27http://www.w3.org/2000/svg%27 fill=%27white%27 width=%2724px%27 height=%2724px%27 style=%27margin-top: 4px%27%3E%3Cpath d=%27M28.89,47.86c-6.14-6.13-5.39-13.24,1-19.61,6.13-6.13,13.47-7.11,19.61-1L101,78.74l49.27-49.26c6.37-6.38,13.48-5.64,19.6.48,6.38,6.38,7.36,13.73,1,20.1L121.54,99.33l50.74,50.74c6.36,6.37,5.14,13.47-1,19.6-6.37,6.37-13.24,7.35-19.6,1L101,119.92,49.72,171.15c-6.37,6.37-13.72,5.4-20.1-1-6.12-6.12-6.86-13.23-.49-19.6L80.36,99.33Z%27 /%3E%3C/svg%3E");
}
.Toastify > .Toastify__toast-container > .Toastify__toast.Toastify__toast--error > .Toastify__progress-bar {
  background-color: var(--error);
}
.Toastify > .Toastify__toast-container > .Toastify__toast.Toastify__toast--info::before {
  background-color: var(--info);
}
.Toastify > .Toastify__toast-container > .Toastify__toast.Toastify__toast--info::after {
  content: url("data:image/svg+xml,%3Csvg viewBox=%270 0 200 240%27 xmlns=%27http://www.w3.org/2000/svg%27 fill=%27white%27 width=%2724px%27 height=%2724px%27 style=%27margin-top: 4px%27%3E%3Cpath d=%27M1156.28-278.29c-35.37-1-62.91-14.61-83.59-41.41a3.24,3.24,0,0,1-.48-3.76c14-31.1,38.09-49.66,72.62-54.12,39.67-5.14,78.73,18,93.36,54.47a2.83,2.83,0,0,1-.42,3.15c-17,22.32-39.37,36-67.59,40.35-4.93.75-10,.95-13.9,1.32%27 /%3E%3Cpath d=%27M1196.82-436.56a41.72,41.72,0,0,1-41.9,41.6A41.78,41.78,0,0,1,1113.48-437c.11-22.73,19-41.35,41.91-41.26a41.8,41.8,0,0,1,41.43,41.73%27 /%3E%3Cpath d=%27M1156.28-278.29c-35.37-1-62.91-14.61-83.59-41.41a3.24,3.24,0,0,1-.48-3.76c14-31.1,38.09-49.66,72.62-54.12,39.67-5.14,78.73,18,93.36,54.47a2.83,2.83,0,0,1-.42,3.15c-17,22.32-39.37,36-67.59,40.35-4.93.75-10,.95-13.9,1.32%27 /%3E%3Cpath d=%27M1196.82-436.56a41.72,41.72,0,0,1-41.9,41.6A41.78,41.78,0,0,1,1113.48-437c.11-22.73,19-41.35,41.91-41.26a41.8,41.8,0,0,1,41.43,41.73%27 /%3E%3Cpath d=%27M102.07.06A99.87,99.87,0,0,0,0,99.85C-.25,155.08,44.71,200,99.88,200,154.54,200.57,200,155.23,200,100.4A100,100,0,0,0,102.07.06Zm-2,182.33c-45.66,0-82.84-36.9-82.45-82.57s36.7-82.79,84-82.17c44.67.59,81,36.9,80.86,83.18C182.28,145.86,145.47,182.39,100,182.39Z%27 /%3E%3Cpath d=%27M90.47,62.72a3.45,3.45,0,0,1-1-2.54v-11a3.62,3.62,0,0,1,1-2.69A3.47,3.47,0,0,1,93,45.48h13.8a3.6,3.6,0,0,1,3.76,3.74v11a3.32,3.32,0,0,1-1.14,2.54,3.7,3.7,0,0,1-2.62,1.05H93A3.47,3.47,0,0,1,90.47,62.72Zm.61,90.75a3.42,3.42,0,0,1-1-2.55V80.12a3.36,3.36,0,0,1,1-2.62,3.57,3.57,0,0,1,2.54-1h12.76A3.58,3.58,0,0,1,110,80.12v70.8a3.58,3.58,0,0,1-3.59,3.6H93.62A3.43,3.43,0,0,1,91.08,153.47Z%27 /%3E%3C/svg%3E");
}
.Toastify > .Toastify__toast-container > .Toastify__toast.Toastify__toast--info > .Toastify__progress-bar {
  background-color: var(--info);
}
.Toastify > .Toastify__toast-container > .Toastify__toast.Toastify__toast--success::before {
  background-color: var(--success);
}
.Toastify > .Toastify__toast-container > .Toastify__toast.Toastify__toast--success::after {
  content: url("data:image/svg+xml,%3Csvg viewBox=%270 0 200 240%27 xmlns=%27http://www.w3.org/2000/svg%27 fill=%27white%27 width=%2724px%27 height=%2724px%27 style=%27margin-top: 4px%27%3E%3Cpath d=%27M67.93,171.64l-65-65a10,10,0,0,1,0-14.14L17.07,78.36a10,10,0,0,1,14.14,0L75,122.14l93.79-93.78a10,10,0,0,1,14.14,0L197.07,42.5a10,10,0,0,1,0,14.14l-115,115a10,10,0,0,1-14.14,0Z%27 /%3E%3C/svg%3E");
}
.Toastify > .Toastify__toast-container > .Toastify__toast.Toastify__toast--success > .Toastify__progress-bar {
  background-color: var(--success);
}
.Toastify > .Toastify__toast-container > .Toastify__toast.Toastify__toast--warning::before {
  background-color: var(--warning);
}
.Toastify > .Toastify__toast-container > .Toastify__toast.Toastify__toast--warning::after {
  content: url("data:image/svg+xml,%3Csvg viewBox=%270 0 200 240%27 xmlns=%27http://www.w3.org/2000/svg%27 fill=%27white%27 width=%2724px%27 height=%2724px%27 style=%27margin-top: 4px%27%3E%3Cpath d=%27M99,13.15.84,186.05a1,1,0,0,0,.87,1.49l196.57.83a1,1,0,0,0,.87-1.49L100.76,13.15A1,1,0,0,0,99,13.15Z%27 /%3E%3Cpath fill=%27gold%27 d=%27M91.39,141a5.37,5.37,0,0,1,3.15-2.73,22,22,0,0,1,6.59-.72c3,0,5.16.66,6.5,2s2,3.37,2,6.18v1.65a31.58,31.58,0,0,1-.16,3.66,9.23,9.23,0,0,1-1,2.84q-1.65,3-7.88,3t-8.25-2q-2-2-2-7.78A13.79,13.79,0,0,1,91.39,141Zm13.81-12a21.55,21.55,0,0,1-5.25.51,21.7,21.7,0,0,1-5.26-.51A4.18,4.18,0,0,1,92,127.1a7.21,7.21,0,0,1-.93-2.37,24.31,24.31,0,0,1-.15-3.19V88.87A25.93,25.93,0,0,1,91,85.62a6.68,6.68,0,0,1,1-2.42,4.57,4.57,0,0,1,2.79-1.9,19.38,19.38,0,0,1,5.25-.57,19.51,19.51,0,0,1,5.26.57,4.31,4.31,0,0,1,2.73,2,7.76,7.76,0,0,1,.93,2.48,25.64,25.64,0,0,1,.15,3.24v32.67a24.6,24.6,0,0,1-.15,3.2,6.2,6.2,0,0,1-1,2.31A4.43,4.43,0,0,1,105.2,129Z%27 /%3E%3C/svg%3E");
}
.Toastify > .Toastify__toast-container > .Toastify__toast.Toastify__toast--warning > .Toastify__progress-bar {
  background-color: var(--warning);
}
.Toastify > .Toastify__toast-container > .Toastify__toast > .Toastify__close-button > svg {
  fill: var(--text-foreground-1);
}

/* stylelint-enable selector-class-pattern */

:root {
  /************************
   Sizes (all in px)
  *************************/
  --header-height-u: 58px;
  --header-logo-height-u: 30px;
  --header-logo-width-u: 164px;
  --burger-width-u: 66px;
  --npvr-large-container-width-u: 1200px;
  --border-radius-tiny-u: 4px;
  --border-radius-small-u: 10px;
  --border-radius-medium-u: 14px;
  --border-radius-big-u: 18px;
  --border-radius-huge-u: 28px;
  --default-font: sans-serif;
  --monospace: monospace;
  --light-font: FontLight, var(--default-font, sans-serif);
  --regular-font: FontRegular, var(--default-font, sans-serif);
  --semibold-font: FontSemiBold, var(--default-font, sans-serif);
  --bold-font: FontBold, var(--default-font, sans-serif);
  --black-font: FontBlack, var(--default-font, sans-serif);
  --tile-gemtv-image-width-u: 320px;
  --tile-gemtv-image-height-u: 180px;
  --tile-gemtv-horizontal-space-u: 24px;
  --tile-portrait-image-width-u: 200px;
  --tile-portrait-image-height-u: 296px;
  --tile-portrait-horizontal-space-u: 24px;
  --tile-deeplink-image-width-u: 248px;
  --tile-deeplink-image-height-u: var(--tile-portrait-image-height-u);
  --tile-deeplink-horizontal-space-u: 24px;
  --tile-deeplink-5x1-image-width-u: 1770px;
  --tile-deeplink-5x1-image-height-u: 354px;
  --tile-deeplink-5x1-horizontal-space-u: 24px;
  --tile-deeplink-3x1-image-width-u: 873px;
  --tile-deeplink-3x1-image-height-u: 291px;
  --tile-deeplink-3x1-horizontal-space-u: 24px;
  --tile-landscape-image-width-u: 320px;
  --tile-landscape-image-height-u: 180px;
  --tile-landscape-horizontal-space-u: 24px;
  --tile-landscape-big-image-width-u: 455px;
  --tile-landscape-big-image-height-u: 256px;
  --tile-landscape-big-horizontal-space-u: 24px;
  --tile-landscape-vod-image-width-u: 478px;
  --tile-landscape-vod-image-height-u: 268px;
  --tile-landscape-vod-horizontal-space-u: 24px;
  --tile-channel-image-width-u: 96px;
  --tile-channel-image-height-u: 60px;
  --tile-channel-group-image-width-u: 153px;
  --tile-channel-group-image-height-u: 115px;
  --tile-channel-group-horizontal-space-u: 24px;
  --tile-channel-group-big-image-width-u: 200px;
  --tile-channel-group-big-image-height-u: 165px;
  --tile-channel-group-big-horizontal-space-u: 24px;
  --avenue-image-width-u: 100px;
  --avenue-image-height-u: 100px;
  --npvr-tv-image-width-u: 178px;
  --npvr-tv-image-height-u: 100px;
  --selection-thickness-u: 8px;
  --tile-border-radius-u: 14px;
  --tile-selection-border-radius-u: 22px;
  --tile-synopsis-font-size-u: 12px;
  --tile-synopsis-line-height-u: 14px;
  --tile-synopsis-tagline-font-size-u: 14px;
  --tile-synopsis-tagline-line-height-u: 16px;
  --tile-text-height-u: 41px;
  --channel-list-item-width-u: 120px;
  --channel-list-item-height-u: 60px;
  --channel-image-width-u: 80px;
  --channel-image-height-u: 40px;
  --tile-channel-logo-width-u: 50px;
  --tile-channel-logo-height-u: 25px;
  --conflict-channel-image-width-u: 40px;
  --conflict-channel-image-height-u: 20px;
  --avatar-size-small-u: 32px;
  --avatar-size-medium-u: 100px;
  --avatar-size-big-u: 125px;
  --modal-inline-padding-u: 50px;
  /************************
   Transitions & animations
  *************************/
  --extra-short-duration: 0.15s;
  --short-duration: 0.3s;
  --medium-duration: 0.5s;
  --long-duration: 1s;
  --opacity-short: opacity var(--short-duration) ease-out;
  --opacity-medium: opacity var(--medium-duration) ease-out;
  --opacity-long: opacity var(--long-duration) ease-out;
}

/************************
 Animations
*************************/
@keyframes pulse {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@font-face {
  font-display: swap;
  font-family: FontLight;
  src: url(/static/media/Light.2d05e8f2629c14688399.woff2) format("woff2"), url(/static/media/Light.e04b46353c81cdd3e2d7.woff) format("woff"), url(/static/media/Light.154fa7ce8c069ddd0a22.ttf) format("truetype");
}
@font-face {
  font-display: swap;
  font-family: FontRegular;
  src: url(/static/media/Regular.2a6eebb44eedf34db812.woff2) format("woff2"), url(/static/media/Regular.c7db5e81871064243636.woff) format("woff"), url(/static/media/Regular.c43f204acd75af22d226.ttf) format("truetype");
}
@font-face {
  font-display: swap;
  font-family: FontSemiBold;
  src: url(/static/media/SemiBold.bf0a8fb15fc4549df644.woff2) format("woff2"), url(/static/media/SemiBold.023bfdf8a58006326ccb.woff) format("woff"), url(/static/media/SemiBold.ac932c59e8afd67acfd9.ttf) format("truetype");
}
@font-face {
  font-display: swap;
  font-family: FontBold;
  src: url(/static/media/Bold.7fb8a543942d0f55f37b.woff2) format("woff2"), url(/static/media/Bold.278faa64be5746370f46.woff) format("woff"), url(/static/media/Bold.068e2f2250a5331f8061.ttf) format("truetype");
}
@font-face {
  font-display: swap;
  font-family: FontBlack;
  src: url(/static/media/ExtraBold.468bdb4a77c5e6123ed0.woff2) format("woff2"), url(/static/media/ExtraBold.a7889f064c25e4a0e722.woff) format("woff"), url(/static/media/ExtraBold.6437ca7f1db9bcb04fb2.ttf) format("truetype");
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
html {
  background-color: var(--background);
  height: 100vh;
  width: 100vw;
}

body {
  font-family: sans-serif;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
}
body * {
  -webkit-touch-callout: none;
  box-sizing: border-box;
  display: flex;
  flex: none;
  flex-flow: row nowrap;
  font: inherit;
  outline: 0;
  overflow: hidden;
  transition-duration: 0s;
  transition-property: none;
  -webkit-user-select: none;
          user-select: none;
}
body {
  /* stylelint-disable selector-class-pattern */
}
body #didomi-host * {
  display: inline;
  display: initial;
  flex: initial;
  overflow: visible;
  overflow: initial;
}
body #didomi-host a:not(.didomi-no-link-style) {
  font-weight: bold;
}
body #didomi-host .didomi-popup-backdrop {
  background-color: rgba(0, 0, 0, 0.6);
}
body #didomi-host .didomi-exterior-border,
body #didomi-host .didomi-popup-container {
  border: 0;
}
body #didomi-host .didomi-popup-notice .didomi-popup-notice-text {
  max-width: revert;
  text-align: justify;
}
body #didomi-host .didomi-consent-popup-body__explanation {
  text-align: justify;
}
body {
  /* stylelint-enable selector-class-pattern */
}
body style {
  display: none;
}
body img {
  border: 0;
}
body > script,
body > iframe {
  display: none;
}
body > #root {
  align-items: stretch;
  background-color: var(--background);
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
body > #root .parentalGuidance.pegi3, body > #root .parentalGuidance.pegi7, body > #root .parentalGuidance.pegi12, body > #root .parentalGuidance.pegi16, body > #root .parentalGuidance.pegi18 {
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
}
body > #root .parentalGuidance.pegi3, body > #root .parentalGuidance.pegi7 {
  background-color: #A6C500;
}
body > #root .parentalGuidance.pegi12, body > #root .parentalGuidance.pegi16 {
  background-color: #F5A200;
}
body > #root .parentalGuidance.pegi18 {
  background-color: #E30013;
}
body .videoDiagContainer {
  align-items: center;
  inset: 0;
  justify-content: center;
  position: absolute;
}
body .videoDiagContainer.hidden {
  background-color: transparent;
  display: none;
  height: 0;
  visibility: hidden;
  width: 0;
  z-index: 0;
}
body .videoDiagContainer.visible {
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  height: 100vh;
  visibility: visible;
  width: 100vw;
  z-index: 99999;
}
body .videoDiagContainer > .videoDiagContent {
  align-items: center;
  background-color: var(--background);
  border-radius: var(--border-radius-medium-u);
  box-shadow: 0 0 8px 4px var(--shadow);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5px;
}
body .videoDiagContainer > .videoDiagContent > video {
  width: 300px;
}
body .videoDiagContainer > .videoDiagContent > .videoDiagLegend {
  color: var(--text-foreground-1);
  padding: 20px 20px 15px;
}
body .gsContainerWrapper {
  background: #000;
  display: grid;
  height: 100vh;
  inset: 0;
  object-fit: cover;
  overflow: hidden;
  position: absolute;
  width: 100vw;
  z-index: 9999;
}
body .gsContainerWrapper > .infiniteCircleLoaderArc {
  grid-column: 1/2;
  grid-row: 1/2;
}
body .gsContainerWrapper > .gsClientContainer {
  grid-column: 1/2;
  grid-row: 1/2;
}
body .gsContainerWrapper > .gsClientContainer video {
  object-fit: cover;
  height: 100%;
  width: 100%;
}
body .gsContainerWrapper > .exitButton {
  align-items: center;
  background: radial-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0) 80%);
  border: none;
  border-radius: 50%;
  color: #AAA;
  cursor: pointer;
  font-size: 38px;
  font-weight: bold;
  height: 48px;
  justify-content: center;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 48px;
}
body .gsContainerWrapper > .exitButton:hover {
  color: #FFF;
}

.loginHeader {
  align-items: center;
  background-color: var(--header-login-background);
  display: flex;
  height: 58px;
  width: 100%;
  z-index: 10;
}
.loginHeader > img {
  height: var(--header-logo-height-u);
  margin-left: 50px;
  -webkit-user-select: none;
          user-select: none;
  width: var(--header-logo-width-u);
}
.loginHeader > .pictoElement {
  border-radius: 50%;
  height: 40px;
  margin: 0 10px 0 auto;
  width: 40px;
}

.runningOnMobile {
  align-items: center;
  background-color: var(--background);
  background-repeat: no-repeat;
  color: var(--text-foreground-1);
  display: flex;
  flex-direction: column;
  font: 16px var(--regular-font);
  justify-content: center;
  inset: 0;
  padding: 20px;
  position: absolute;
}
.runningOnMobile > img {
  height: 200px;
  margin-bottom: 50px;
  -webkit-user-select: none;
          user-select: none;
}
.runningOnMobile > img + div {
  margin-bottom: 50px;
  text-align: center;
}
.runningOnMobile > a {
  margin-bottom: 10px;
  text-decoration: none;
}
.runningOnMobile > a.text {
  background-color: var(--text-foreground-1);
  border-radius: var(--border-radius-tiny-u);
  color: var(--background);
  font: 16px var(--semibold-font);
  margin-top: 40px;
  padding: 10px 20px;
}

.browserNotCompatible {
  align-items: center;
  color: var(--text-foreground-1);
  display: flex;
  flex-direction: column;
  font: 24px var(--regular-font);
  margin: auto 20px;
}
.browserNotCompatible > img {
  height: 200px;
  margin-bottom: 50px;
  -webkit-user-select: none;
          user-select: none;
}
.browserNotCompatible > .browsers {
  align-self: stretch;
  justify-content: space-evenly;
  margin: 20px 0 40px;
}
.browserNotCompatible > .browsers + div {
  margin-bottom: 20px;
}
.browserNotCompatible a {
  margin-bottom: 10px;
  text-decoration: none;
}
.browserNotCompatible a:link, .browserNotCompatible a:visited {
  color: var(--accent);
}
.browserNotCompatible a:active, .browserNotCompatible a:hover {
  color: var(--accent-light);
}

.appLoader {
  align-items: center;
  display: flex;
  flex-grow: 1;
  justify-content: center;
}

.startupError {
  align-items: center;
  color: var(--text-foreground-1);
  flex-direction: column;
  justify-content: center;
  margin-top: 10%;
  text-align: center;
}
.startupError > .errorTitle {
  align-items: center;
  font: 24px var(--bold-font);
}
.startupError > .errorName {
  font: 18px var(--regular-font);
}
.startupError > .errorHint {
  font: 16px var(--regular-font);
  margin-top: 50px;
}

@media (max-width: 768px) {
  .browserNotCompatible {
    font: 18px var(--regular-font);
  }
}
@media (max-width: 400px) {
  .browserNotCompatible {
    font: 14px var(--regular-font);
  }
  .browserNotCompatible > svg {
    margin-bottom: 40px;
    width: 120px;
  }
}

.buttonFX {
  --loader-size-u: 30px;
  align-items: stretch;
  border: none;
  border-radius: var(--border-radius-tiny-u);
  cursor: pointer;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  position: relative;
}
.buttonFX > .content {
  align-items: center;
  display: flex;
  flex: 1 0 100%;
  flex-direction: column;
  font: 16px var(--semibold-font);
  justify-content: center;
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
  z-index: 1;
}
.buttonFX > .content.padding {
  padding-inline: 20px;
}
.buttonFX > .content div,
.buttonFX > .content span {
  color: inherit;
}
.buttonFX.dark {
  background-color: var(--button-dark-background);
}
.buttonFX.dark > .content {
  color: var(--button-dark-foreground);
}
.buttonFX.dark.empty {
  background-color: transparent;
  border: 1px solid var(--button-dark-empty-border);
}
.buttonFX.dark.link > .content {
  color: var(--button-light-background);
}
.buttonFX.light {
  background-color: var(--button-light-background);
}
.buttonFX.light > .content {
  color: var(--button-light-foreground);
}
.buttonFX.light.empty {
  background-color: transparent;
  border: 1px solid var(--button-light-empty-border);
}
.buttonFX.light.link > .content {
  color: var(--button-dark-foreground);
}
.buttonFX:has(.hoverLayer:hover) {
  border-color: transparent;
}
.buttonFX:has(.hoverLayer:hover).empty {
  border-color: transparent;
}
.buttonFX:has(.hoverLayer:hover) > .content {
  color: var(--button-foreground-hover);
}
.buttonFX:not(:has(.hoverLayer:hover)).empty > .content {
  color: var(--text-foreground-1);
}
.buttonFX.link {
  background-color: transparent;
  border: 0;
  text-decoration: underline;
  opacity: 0.8;
}
.buttonFX.link:hover {
  opacity: 1;
}
.buttonFX.link > .content {
  font-family: var(--regular-font);
}
.buttonFX > .hoverLayer {
  border-radius: var(--border-radius-tiny-u);
  inset: 0;
  position: absolute;
}
.buttonFX.heightStretched {
  height: 100%;
}
.buttonFX.heightSmall {
  height: 30px;
}
.buttonFX.heightSmall .infiniteCircleLoader {
  width: 26px;
}
.buttonFX.heightMedium {
  height: 40px;
}
.buttonFX.heightLarge {
  height: 46px;
}
.buttonFX.widthAuto {
  width: auto;
}
.buttonFX.widthStretched {
  width: 100%;
}
.buttonFX.widthSmall {
  width: 164px;
}
.buttonFX.widthLarge {
  width: 210px;
}
.buttonFX.loading > .content {
  opacity: 0.4;
}
.buttonFX > .disabled {
  background-color: var(--button-background-disabled);
  border-radius: var(--border-radius-tiny-u);
  cursor: default;
  inset: 0;
  position: absolute;
}
.buttonFX > .loader {
  align-items: center;
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  left: calc((100% - var(--loader-size-u)) / 2);
  position: absolute;
  top: calc((100% - var(--loader-size-u)) / 2);
  width: var(--loader-size-u);
}

button.avatarContainer {
  --no-avatar-bg-color-0: #0954B5;
  --no-avatar-bg-color-1: #1CB509;
  --no-avatar-bg-color-2: #B57909;
  --no-avatar-bg-color-3: #B5097A;
  --no-avatar-bg-color-4: #253E60;
  align-items: center;
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: stretch;
  margin: 0;
  padding: 0;
  position: relative;
}
button.avatarContainer.displayNameBottom {
  flex-direction: column;
  row-gap: 1rem;
}
button.avatarContainer.displayNameRight {
  column-gap: 1rem;
  flex-direction: row;
}
button.avatarContainer.displayNameRight > .avatarName {
  max-width: revert;
  text-overflow: revert;
}
button.avatarContainer:disabled {
  cursor: revert;
}
button.avatarContainer > .avatarImage {
  background-color: rgba(255, 255, 255, 0.1);
  border: var(--btn-border-u) solid transparent;
  border-radius: 50%;
  position: relative;
}
button.avatarContainer > .avatarImage.profile0 {
  background-color: var(--no-avatar-bg-color-0);
}
button.avatarContainer > .avatarImage.profile1 {
  background-color: var(--no-avatar-bg-color-1);
}
button.avatarContainer > .avatarImage.profile2 {
  background-color: var(--no-avatar-bg-color-2);
}
button.avatarContainer > .avatarImage.profile3 {
  background-color: var(--no-avatar-bg-color-3);
}
button.avatarContainer > .avatarImage.profile4 {
  background-color: var(--no-avatar-bg-color-4);
}
button.avatarContainer > .avatarImage > .editPicto,
button.avatarContainer > .avatarImage > .userPicto {
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
  inset: 0;
  height: 100%;
  position: absolute;
  width: 100%;
}
button.avatarContainer > .avatarImage > img {
  border: none;
  margin: 0;
  padding: 0;
}
button.avatarContainer > .avatarImage .profileInitial, button.avatarContainer > .avatarImage .profileInitialPlaceholder {
  align-items: center;
  color: var(--overlay-foreground-1);
  font: 36px var(--semibold-font);
  justify-content: center;
}
button.avatarContainer > .avatarImage > .noAvatar {
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative;
}
button.avatarContainer > .avatarImage > .noAvatar > .profileInitialPlaceholder {
  color: rgba(255, 255, 255, 0.3);
}
button.avatarContainer > .avatarName {
  color: var(--overlay-foreground-1);
  display: block;
  font: 22px var(--regular-font);
  max-width: var(--avatar-size-big-u);
  text-overflow: ellipsis;
  white-space: nowrap;
}
button.avatarContainer.unavailable {
  opacity: 0.4;
}
button.avatarContainer.unavailable > .avatarImage > .userPicto {
  display: flex;
}
button.avatarContainer.small {
  --btn-border-u: 4px;
}
button.avatarContainer.small > .avatarImage > img,
button.avatarContainer.small > .avatarImage > svg,
button.avatarContainer.small > .avatarImage > div {
  font-size: 18px;
  height: var(--avatar-size-small-u);
  width: var(--avatar-size-small-u);
}
button.avatarContainer.medium {
  --btn-border-u: 5px;
}
button.avatarContainer.medium > .avatarImage > img,
button.avatarContainer.medium > .avatarImage > svg,
button.avatarContainer.medium > .avatarImage > div {
  font-size: 30px;
  height: var(--avatar-size-medium-u);
  width: var(--avatar-size-medium-u);
}
button.avatarContainer.big {
  --btn-border-u: 6px;
}
button.avatarContainer.big > .avatarImage > img,
button.avatarContainer.big > .avatarImage > svg,
button.avatarContainer.big > .avatarImage > div {
  font-size: 36px;
  height: var(--avatar-size-big-u);
  width: var(--avatar-size-big-u);
}
button.avatarContainer.selected > .avatarImage {
  border-color: var(--avatar-selected);
}
button.avatarContainer:hover:not(:disabled) .avatarImage {
  border-color: var(--accent);
}
button.avatarContainer:hover:not(:disabled).showOnHover .editPicto {
  display: flex;
}
button.avatarContainer.showAlways .editPicto {
  display: flex;
}

.pictoElement {
  align-items: center;
  aspect-ratio: 1;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  display: flex;
  justify-content: center;
  overflow: visible;
  position: relative;
  width: 28px;
}
.pictoElement > svg {
  fill: var(--picto-foreground);
  opacity: 1;
  pointer-events: all;
  transition: var(--opacity-short), transform var(--short-duration) ease-out;
  width: 24px;
}
.pictoElement > .background {
  aspect-ratio: 1;
  background-color: var(--picto-background);
  border-radius: 50%;
  box-shadow: 0 1px 2px 0 var(--shadow);
  left: 2px;
  position: absolute;
  top: 2px;
  width: 24px;
  z-index: 0;
}
.pictoElement > .background + svg {
  width: 18px;
  z-index: 1;
}
.pictoElement.recording > svg, .pictoElement.scheduledRecording > svg {
  fill: var(--recording);
}
.pictoElement.recording.live, .pictoElement.scheduledRecording.live {
  animation: pulse var(--long-duration) infinite ease-in-out;
}
.pictoElement.future svg {
  fill: var(--future);
}
.pictoElement.preview svg {
  fill: var(--catchup);
}
.pictoElement.hoverEffect > svg {
  opacity: 0.4;
  transform: scale(0.9);
}
.pictoElement.hoverEffect:not(:disabled, [data-disabled=true], [disabled]) > svg {
  cursor: pointer;
  opacity: 0.9;
}
.pictoElement.hoverEffect:not(:disabled, [data-disabled=true], [disabled]):hover > svg {
  opacity: 1;
  transform: scale(1);
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
.infiniteCircleLoader {
  align-items: center;
  animation: rotate 2s linear infinite;
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  width: 30px;
}
.infiniteCircleLoader > svg {
  width: 100%;
}
.infiniteCircleLoader.dark > svg {
  fill: var(--background);
}
.infiniteCircleLoader.light > svg {
  fill: var(--text-foreground-1);
}

.ProgressBar_container__KDfs9 {
  background-color: var(--live-progress-bar-background);
  bottom: 0;
  height: 5px;
  left: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 320;
}
.ProgressBar_container__KDfs9 > .ProgressBar_progressBar__zE3yK {
  background-color: var(--live-progress-bar-foreground);
  transform: scaleX(1);
  transform-origin: 0 center;
  transition: transform var(--long-duration) linear;
  width: 100%;
  will-change: transform;
}

@keyframes circleLoaderArcSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.infiniteCircleLoaderArc {
  align-items: center;
  animation: circleLoaderArcSpin 1s infinite linear;
  aspect-ratio: 1;
  border: 10px solid rgba(255, 255, 255, 0.2);
  border-left: 10px solid #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  margin: auto;
  transform: translateZ(0);
  width: 100px;
}

.mainLayout {
  background-color: var(--background);
  display: flex;
  flex-direction: column;
  height: 100%;
  left: 0;
  overflow-y: auto;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 200;
}

.alertPicto {
  height: 24px;
  width: 24px;
}
.alertPicto.failure svg {
  fill: #b90015;
}
.alertPicto.failure svg path:last-child {
  fill: var(--background);
}
.alertPicto.warning svg {
  fill: var(--warning);
}
.alertPicto.warning svg path:last-child {
  fill: #000;
}

::-webkit-scrollbar {
  -webkit-box-shadow: unset;
  background: var(--scrollbar-background);
  height: 14px;
  width: 14px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: unset;
  background: transparent;
}

::-webkit-scrollbar-thumb {
  -webkit-box-shadow: unset;
  background: var(--scrollbar-thumb);
}

::-webkit-scrollbar-corner {
  -webkit-box-shadow: unset;
  background: transparent;
}

.mainLayout {
  background-color: transparent;
  display: flex;
  flex-direction: column;
  transition: background-color var(--short-duration) ease-in;
}
.mainLayout.theaterMode {
  background-color: var(--player-background);
  justify-content: center;
}
.mainLayout.theaterMode > .circleLoader {
  position: absolute;
}
.mainLayout.theaterMode > .circleLoader > svg > circle {
  stroke-width: 10px;
}
.mainLayout.theaterMode > .circleLoader > svg > circle:last-child {
  stroke: var(--player-overlay-background);
}
.mainLayout > .workingZone {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  opacity: 1;
  position: relative;
  transition: opacity var(--medium-duration) ease-in, visibility var(--medium-duration) ease-in;
  visibility: visible;
  z-index: 220;
}
.mainLayout > .workingZone.theaterMode {
  opacity: 0;
  visibility: hidden;
}
.mainLayout > .workingZone > .text {
  font-size: 70px;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  30% {
    background-color: #ffccf6;
  }
  45% {
    background-color: #ccdcff;
  }
  60% {
    background-color: #ccffe6;
  }
  75% {
    background-color: #ffefcc;
  }
  85% {
    background-color: #fff;
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes numberFade {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.unicornized {
  align-items: center;
  animation: 6s ease-out fade;
  background-color: #fff;
  display: flex;
  inset: 0;
  justify-content: center;
  opacity: 0;
  position: absolute;
  z-index: 1000000;
}
.unicornized > .countDown {
  animation: 1s ease-out numberFade;
  color: #000;
  font: bold 400px Helvetica, sans-serif;
  opacity: 0;
  position: absolute;
}
.unicornized > .countDown.number0 {
  animation-delay: 1s;
}
.unicornized > .countDown.number1 {
  animation-delay: 2s;
}
.unicornized > .countDown.number2 {
  animation-delay: 3s;
}
.unicornized > .countDown.number3 {
  animation-delay: 4s;
  -webkit-background-clip: text;
          background-clip: text;
  background-color: transparent;
  background-image: linear-gradient(#f00 30%, #ffa500, #ff0, #008000, #00f, #ee82ee 80%);
  color: transparent;
  font-size: 240px;
}

.bg1,
.bg2,
.bg3,
.bg4 {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
  z-index: 10000;
}

.bg1 {
  background: #ffccf6;
}

.bg2 {
  background: #ccdcff;
}

.bg3 {
  background: #ccffe6;
}

.bg4 {
  background: #ffefcc;
}

.unicorn {
  overflow: visible;
  transform: scale(0.5);
}

.unicorn * {
  display: block;
  overflow: visible;
}

.face {
  height: 6rem;
  width: 8rem;
  background: #efeeef;
  border-radius: 4rem;
  transform: rotate(20deg);
}

.face * {
  position: absolute;
}

.cheek {
  width: 3rem;
  height: 3rem;
  background: radial-gradient(#eccbdf 5%, #efeeef 70%);
  top: 2rem;
  left: 4rem;
  border-radius: 50%;
  z-index: 1;
}

.snoot {
  height: 7rem;
  width: 14rem;
  background: #efeeef;
  left: -5rem;
  border-radius: 4rem;
  transform: rotate(-40deg);
}

.nose {
  height: 7rem;
  width: 3.5rem;
  background: #e4a3ca;
  border-radius: 50% 0 0 50%;
}

.nostril {
  height: 2rem;
  width: 1rem;
  background: #5a5056;
  top: 1.5rem;
  left: 1rem;
  border-radius: 50%;
}

.eye {
  width: 2.5rem;
  height: 1rem;
  background: #332a2f;
  left: 3rem;
  border-radius: 3rem 3rem 0 0;
}

.eye::after {
  content: "";
  height: 1rem;
  width: 1.5rem;
  background: #efeeef;
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  border-radius: 3rem 3rem 0 0;
}

.eyelashes {
  height: 1rem;
  width: 0.5rem;
  background: #332a2f;
  top: -0.5rem;
  left: 1rem;
}

.eyelashes::before {
  content: "";
  height: 1rem;
  width: 0.5rem;
  background: #332a2f;
  position: absolute;
  top: 0.25rem;
  left: -1rem;
  transform: rotate(-40deg);
}

.eyelashes::after {
  content: "";
  height: 1rem;
  width: 0.5rem;
  background: #332a2f;
  position: absolute;
  top: 0.25rem;
  left: 1rem;
  transform: rotate(30deg);
}

.ear {
  border-left: 2rem solid transparent;
  border-right: 2rem solid transparent;
  border-bottom: 4rem solid #efeeef;
  top: -5rem;
  left: 2.5rem;
  transform: rotate(-5deg);
  z-index: 1;
}

.ear::after {
  content: "";
  border-left: 0.75rem solid transparent;
  border-right: 0.75rem solid transparent;
  border-bottom: 2rem solid #e4a3ca;
  position: absolute;
  top: 0.75rem;
  left: -0.75rem;
}

.horn {
  height: 7rem;
  width: 3rem;
  background: repeating-linear-gradient(-25deg, #ffe3aa, #ffe3aa 0.5rem, #bea97e 1rem, #bea97e 0.5rem);
  top: -7rem;
  left: -0.5rem;
  transform: rotate(-55deg);
  z-index: -1;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

.mane.top {
  height: 2rem;
  width: 4rem;
  top: -1.5rem;
  left: 1.5rem;
  border-radius: 50%;
  box-shadow: 7px 1rem 0 6px #a891b6;
  transform: rotate(140deg);
}

.mane.top::before {
  content: "";
  height: 2rem;
  width: 3rem;
  position: absolute;
  top: 2.5rem;
  left: -3rem;
  border-radius: 50%;
  box-shadow: 5px 1rem 0 6px #ffead9;
  transform: rotate(260deg);
}

.mane.top::after {
  content: "";
  height: 2rem;
  width: 4rem;
  position: absolute;
  top: -0.5rem;
  left: -2rem;
  border-radius: 50%;
  box-shadow: 5px 1rem 0 6px #c6e8d7;
  transform: rotate(100deg);
}

.mane.mid {
  height: 2rem;
  width: 4rem;
  top: -1rem;
  left: 4.5rem;
  border-radius: 50%;
  box-shadow: 3px 1rem 0 8px #ffcbc1;
  transform: rotate(250deg);
  z-index: -1;
}

.mane.mid::before {
  content: "";
  height: 2rem;
  width: 4rem;
  position: absolute;
  left: -2rem;
  border-radius: 50%;
  box-shadow: 5px 1rem 0 6px #afc8ff;
  transform: rotate(40deg);
}

.mane.mid::after {
  content: "";
  height: 2rem;
  width: 4rem;
  position: absolute;
  top: 1rem;
  left: -1rem;
  border-radius: 50%;
  box-shadow: 0 1rem 0 0.5rem #ff9cee;
  transform: rotate(40deg);
  z-index: -1;
}

.neck {
  position: absolute;
  height: 5rem;
  width: 3rem;
  background: #efeeef;
  left: 5rem;
  top: 5rem;
  transform: skew(-20deg);
  z-index: -1;
}

.mane.end {
  height: 2rem;
  width: 4rem;
  top: 1rem;
  border-radius: 50%;
  box-shadow: 3px 1rem 0 8px #b6edb6;
  transform: rotate(270deg);
}

.mane.end::before {
  content: "";
  height: 3rem;
  width: 5rem;
  position: absolute;
  left: 1rem;
  border-radius: 50%;
  box-shadow: 5px 1rem 0 6px #caf;
}

.mane.end::after {
  content: "";
  height: 3rem;
  width: 5rem;
  position: absolute;
  top: 0.5rem;
  left: -0.5rem;
  border-radius: 50%;
  box-shadow: 5px 1rem 0 6px #ffbdbd;
  transform: rotate(30deg);
  z-index: -1;
}

@keyframes rotating {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.avenueView {
  --picto-huge-size-u: 150px;
  align-items: stretch;
  display: flex;
  flex-direction: column;
  height: auto;
  position: relative;
  width: 100%;
}
.avenueView > .avenueHeader {
  animation: fadeIn var(--medium-duration) ease-in forwards;
  background-repeat: no-repeat;
  height: 100%;
  pointer-events: none;
  position: absolute;
  width: 100%;
}
.avenueView > .avenueHeader + .slider {
  margin-top: calc(110px + var(--header-height-u));
}
.avenueView > .avenueHeader + .backBar + .slider > .section.grid > .header > .sectionTitleContainer {
  display: none;
}
.avenueView > .slider {
  --carousel-margin: calc(40px + var(--header-height-u));
  display: flex;
  flex-direction: column;
  height: auto;
  margin-bottom: 20px;
  overflow: visible;
}
.avenueView > .slider:first-child .section:first-child {
  margin-top: var(--carousel-margin);
}
.avenueView > .slider:first-child .sectionCarousel + .section {
  margin-top: var(--carousel-margin);
}
.avenueView > .slider > .noResult {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: 50px;
}
.avenueView > .slider > .noResult > .pictoElement {
  height: auto;
}
.avenueView > .slider > .noResult > .pictoElement > svg {
  cursor: default;
  fill: var(--text-foreground-1);
  opacity: 0.8;
  width: var(--picto-huge-size-u);
}
.avenueView > .slider > .noResult > .noResultText {
  color: var(--text-foreground-1);
  font: 18px var(--regular-font);
  margin-top: 30px;
  width: auto;
}
.avenueView > .slider > .emptyMyVideos {
  align-items: center;
  color: var(--text-foreground-1);
  flex-direction: column;
  margin: 10% auto;
}
.avenueView > .slider > .emptyMyVideos > .title {
  font: 20px var(--bold-font);
}
.avenueView > .slider > .emptyMyVideos > .subtitle {
  font: 16px var(--regular-font);
  margin-top: 10px;
}
.avenueView > .slider > .emptyMyVideos > .iconAndText {
  align-items: center;
  margin-top: 40px;
}
.avenueView > .slider > .emptyMyVideos > .iconAndText > .pictoElement {
  height: auto;
  margin: 0 40px 0 0;
  width: auto;
}
.avenueView > .slider > .emptyMyVideos > .iconAndText > .pictoElement > svg {
  fill: var(--text-foreground-1);
  width: var(--picto-huge-size-u);
}
.avenueView > .slider > .emptyMyVideos > .iconAndText > .pictoElement > svg path:last-child {
  fill: var(--accent);
}
.avenueView > .slider > .emptyMyVideos > .iconAndText > div {
  flex-direction: column;
}
.avenueView > .slider > .emptyMyVideos > .iconAndText > div > ul {
  display: flex;
  flex-direction: column;
  list-style: square inside none;
  margin: 10px 0 0;
  padding: 0;
}
.avenueView > .slider > .emptyMyVideos > .iconAndText > div > ul > li {
  display: list-item;
  font: 16px var(--regular-font);
  margin-bottom: 5px;
}
.avenueView > .slider > .emptyMyVideos > .image {
  background-position: top;
  background-repeat: no-repeat;
  height: 300px;
  width: 100%;
}
.avenueView > .slider > .search {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  height: auto;
  margin-top: 50px;
  padding: 50px;
  pointer-events: auto;
  width: auto;
}
.avenueView > .slider > .search > .searchBox {
  align-items: center;
  display: flex;
  flex-direction: row;
  height: auto;
  margin-bottom: 50px;
  overflow: visible;
  width: auto;
}
.avenueView > .slider > .search > .searchBox > .pictoElement {
  margin-right: 20px;
  transform-origin: 14px 21px;
  width: 30px;
}
.avenueView > .slider > .search > .searchBox > .pictoElement > svg {
  fill: var(--text-foreground-1);
  width: 100%;
}
.avenueView > .slider > .search > .searchBox > input {
  border: 0;
  border-bottom: 1px solid var(--search-avenue-bottom);
  border-radius: 0;
  color: var(--text-foreground-1);
  flex: 1 1;
  font: 30px var(--regular-font);
  height: auto;
  justify-content: center;
  padding: 20px 0;
  -webkit-user-select: text;
          user-select: text;
}
.avenueView > .slider > .search > .searchBox > input::selection {
  background: var(--text-foreground-1);
  color: var(--background);
}
.avenueView > .slider > .search > .searchBox > input::placeholder {
  color: var(--placeholder-input);
}
.avenueView > .slider > .search.loading > .searchBox > .pictoElement {
  animation: rotating var(--medium-duration) linear infinite;
}
.avenueView > .avenueImage {
  background: no-repeat left center;
  background-size: contain;
  height: var(--avenue-image-height-u);
  margin: var(--header-height-u) 0 -10px 40px;
  width: var(--avenue-image-width-u);
}
.avenueView > .backBar {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 40px;
  margin: calc(33px + var(--header-height-u)) auto 20px 50px;
}
.avenueView > .backBar + .slider > .sectionCarousel + .section {
  margin-top: -12px;
}
.avenueView > .backBar + .avenueImage {
  margin-top: 0;
}

.modalContentDiv .avenueView.explore {
  margin-top: 20px;
}
.modalContentDiv .avenueView.explore > .slider .selectionBorder > .container {
  background-color: var(--tile-background-explorer);
}
.modalContentDiv .avenueView.explore > .slider .selectionBorder:hover > .container {
  background-color: var(--tile-background-explorer-hover);
}
.modalContentDiv .avenueView.explore .section.channel .tileContainer, .modalContentDiv .avenueView.explore .section.channelgroup .tileContainer {
  background-color: var(--tile-background);
}

.backButtonBase {
  background-color: transparent;
  border: 0;
}
.backButtonBase:hover > .pictoElement.hoverEffect > svg {
  opacity: 1;
  transform: scale(1);
}
.backButtonBase:hover > .text {
  opacity: 1;
}
.backButtonBase > .text {
  color: var(--text-foreground-1);
  font: 18px var(--semibold-font);
  margin-left: 10px;
  opacity: 0.7;
  transition: var(--opacity-short);
  -webkit-user-select: none;
          user-select: none;
}
.backButtonBase > .pictoElement > svg {
  opacity: 0.7;
  transition: var(--opacity-short), transform var(--short-duration) ease-out;
  transform: scale(0.9);
  width: 30px;
}

.searchHistory {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  row-gap: 10px;
}

.searchHistoryTerm {
  align-items: center;
  color: var(--text-foreground-1);
  display: flex;
  flex-direction: row-reverse;
  margin-right: 20px;
}
.searchHistoryTerm .pictoElement {
  height: 20px;
  width: 18px;
}
.searchHistoryTerm .pictoElement > svg {
  height: 16px;
}
.searchHistoryTerm > .refresh {
  opacity: 0;
  transition: var(--opacity-short);
}
.searchHistoryTerm > .refresh > svg {
  fill: var(--text-foreground-1);
}
.searchHistoryTerm > .term {
  background-color: var(--search-avenue-history-background);
  border-radius: var(--border-radius-huge-u);
  cursor: pointer;
  margin: 0 5px;
  padding: 14px 22px;
}
.searchHistoryTerm > .term:hover {
  background-color: var(--search-avenue-history-background-hover);
}
.searchHistoryTerm > .term:hover + .refresh {
  opacity: 1;
}
.searchHistoryTerm > .delete > .pictoElement > svg {
  fill: var(--text-foreground-1);
}

@keyframes movingArrow {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
    transform: translateX(5px);
  }
  100% {
    opacity: 1;
    transform: translateX(10px);
  }
}
.section {
  --section-header-height-u: 27px;
  --section-header-bottom-margin-u: 8px;
  --navigation-button-size-u: 126px;
  --navigation-button-collapsed-position-u: calc(var(--navigation-button-size-u) / -4);
  --navigation-button-expanded-position-u: calc(var(--navigation-button-size-u) / -8);
  --navigation-button-picto-margin-u: calc(var(--navigation-button-size-u) / 8);
  --navigation-button-vertical-shift-u: calc(var(--section-header-height-u) + var(--section-header-bottom-margin-u));
  --navigation-button-vertical-shift-selection-u: calc(var(--navigation-button-vertical-shift-u) + var(--selection-thickness-u));
  display: flex;
  flex-direction: column;
  margin: 30px 0;
  opacity: 1;
  overflow: visible;
  padding-left: 50px;
  pointer-events: auto;
  position: relative;
  transform: scaleY(1) translateY(0);
  transform-origin: top;
  transition: opacity ease-out, transform ease-out;
  width: 100%;
}
.section.hidden {
  opacity: 0;
  transform: translateY(300px);
  transition-duration: var(--long-duration);
}
.section > .backBar {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 40px;
  margin-bottom: 20px;
  margin-right: auto;
}
.section > div {
  overflow: visible;
}
.section > .navigationButton {
  align-items: center;
  aspect-ratio: 1;
  background-color: var(--section-navigation-buttons);
  cursor: pointer;
  display: flex;
  justify-content: center;
  opacity: 0;
  position: absolute;
  transition: left var(--short-duration) ease-out, right var(--short-duration) ease-out, var(--opacity-short);
  width: var(--navigation-button-size-u);
  z-index: 250;
}
.section > .navigationButton:hover {
  background-color: var(--section-navigation-buttons-hover);
}
.section > .navigationButton > .pictoElement {
  height: 20px;
}
.section > .navigationButton.previous {
  border-radius: 0 50% 50% 0;
  left: var(--navigation-button-collapsed-position-u);
}
.section > .navigationButton.previous:hover {
  left: var(--navigation-button-expanded-position-u);
}
.section > .navigationButton.previous > .pictoElement {
  margin-left: var(--navigation-button-picto-margin-u);
}
.section > .navigationButton.next {
  border-radius: 50% 0 0 50%;
  margin-left: auto;
  right: var(--navigation-button-collapsed-position-u);
}
.section > .navigationButton.next:hover {
  right: var(--navigation-button-expanded-position-u);
}
.section > .navigationButton.next > .pictoElement {
  margin-left: var(--navigation-button-picto-margin-u);
}
.section > .navigationButton.gemtv {
  top: calc((var(--tile-gemtv-image-height-u) - var(--navigation-button-size-u)) / 2 + var(--navigation-button-vertical-shift-u));
}
.section > .navigationButton.portrait, .section > .navigationButton.deeplink {
  top: calc((var(--tile-portrait-image-height-u) - var(--navigation-button-size-u)) / 2 + var(--navigation-button-vertical-shift-u));
}
.section > .navigationButton.deeplink3x1, .section > .navigationButton.deeplink5x1 {
  top: calc((var(--tile-deeplink-3x1-image-height-u) - var(--navigation-button-size-u)) / 2 + var(--navigation-button-vertical-shift-selection-u));
}
.section > .navigationButton.landscape {
  top: calc((var(--tile-landscape-image-height-u) - var(--navigation-button-size-u)) / 2 + var(--navigation-button-vertical-shift-u));
}
.section > .navigationButton.landscape.big {
  top: calc((var(--tile-landscape-big-image-height-u) - var(--navigation-button-size-u)) / 2 + var(--navigation-button-vertical-shift-selection-u));
}
.section > .navigationButton.landscape.vod {
  top: calc((var(--tile-landscape-vod-image-height-u) - var(--navigation-button-size-u)) / 2 + var(--navigation-button-vertical-shift-u));
}
.section > .navigationButton.channelgroup {
  top: calc((var(--tile-channel-group-image-height-u) - var(--navigation-button-size-u)) / 2 + var(--navigation-button-vertical-shift-selection-u));
}
.section > .navigationButton.channelgroup.big {
  top: calc((var(--tile-channel-group-big-image-height-u) - var(--navigation-button-size-u)) / 2 + var(--navigation-button-vertical-shift-selection-u));
}
.section:hover > .navigationButton {
  opacity: 1;
}
.section:hover > .header > .gridViewButton {
  opacity: 0.8;
}
.section:hover > .header > .sectionTitleContainer > .sectionTitle {
  opacity: 1;
  transform: scale(1.01);
}
.section.grid {
  height: auto;
  margin-top: 0;
}
.section.grid > .header {
  align-items: flex-start;
  flex-direction: column;
  height: auto;
  margin-bottom: 20px;
  row-gap: 10px;
}
.section.grid > .header > .sectionTitleContainer .sectionTitle {
  font-size: 36px;
  opacity: 1;
  transform: none;
  transition: none;
}
.section.grid > .header > .sortAndFilter {
  margin: 0;
}
.section.grid .sectionSlider {
  flex: 1 1;
  flex-flow: row wrap;
  height: auto;
  justify-content: flex-start;
  margin: 0;
  row-gap: 60px;
}
.section.grid .sectionSlider::after {
  content: "";
  flex: auto;
}
.section.grid .sectionSlider > .sectionItem {
  margin-bottom: 10px;
  margin-top: 10px;
}
.section > .header {
  align-items: center;
  display: flex;
  height: var(--section-header-height-u);
  margin-bottom: var(--section-header-bottom-margin-u);
  padding-right: 20px;
}
.section > .header > .sectionTitleContainer {
  align-items: center;
  display: flex;
  overflow: visible;
}
.section > .header > .sectionTitleContainer.hoverable {
  cursor: pointer;
}
.section > .header > .sectionTitleContainer > .sectionTitle {
  color: var(--text-foreground-1);
  font: 20px var(--bold-font);
  margin-left: 5px;
  opacity: 0.7;
  transform: scale(1);
  transform-origin: left;
  transition: transform var(--short-duration) ease-out;
  -webkit-user-select: none;
          user-select: none;
}
.section > .header > .gridViewButton {
  align-items: center;
  color: var(--text-foreground-1);
  cursor: pointer;
  display: flex;
  font: 16px var(--regular-font);
  margin-left: 30px;
  opacity: 0;
}
.section > .header > .gridViewButton:hover {
  opacity: 1;
  text-decoration: underline;
}
.section > .header > .gridViewButton:hover > .pictoElement {
  animation: movingArrow var(--short-duration) ease-out forwards;
  margin-inline: -10px 10px;
}
.section > .header > .gridViewButton > .pictoElement {
  height: 24px;
  opacity: 0;
}
.section > .header > .gridViewButton > .pictoElement > svg {
  fill: var(--text-foreground-1);
  width: 14px;
}
.section > .header > .sectionPagination {
  color: var(--text-foreground-1);
  font: 14px var(--semibold-font);
  margin-left: auto;
  opacity: 0.8;
}
.section.placeholder > .header .sectionTitleContainer.noTitle {
  background-color: var(--placeholder-text);
  height: 17px;
  width: 250px;
}
.section .sectionSlider {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  overflow: visible;
  transform: translate3d(0, 0, 0);
  transition: transform var(--short-duration) ease-out;
}

.sectionItem {
  display: flex;
  flex-direction: column;
  overflow: visible;
  pointer-events: auto;
  z-index: 200;
}
.sectionItem * {
  transition: var(--opacity-short);
}
.sectionItem > .selectionBorder {
  align-items: center;
  background-color: transparent;
  border-radius: var(--tile-selection-border-radius-u);
  display: flex;
  justify-content: center;
  position: relative;
}
.sectionItem > .selectionBorder .channelName {
  max-width: var(--tile-channel-image-width-u);
  pointer-events: none;
  position: absolute;
  width: fit-content;
  z-index: 1000;
}
.sectionItem .tileContainer {
  background: no-repeat center center;
  background-size: cover;
  border-radius: var(--tile-border-radius-u);
  cursor: pointer;
  display: flex;
  overflow: visible;
  position: relative;
  transform: translate3d(0, 0, 0);
  transform-origin: center center;
  transition: transform var(--short-duration) ease-out;
  will-change: transform;
  z-index: 300;
}
.sectionItem .tileContainer > .backgroundImage {
  animation-duration: var(--medium-duration);
  animation-fill-mode: both;
  border-radius: var(--tile-border-radius-u);
  height: 100%;
  left: 0;
  opacity: 1;
  position: absolute;
  top: 0;
  width: 100%;
}
.sectionItem .tileContainer > .backgroundImage.visible {
  animation-name: fadeIn;
  animation-timing-function: ease-out;
  z-index: 302;
}
.sectionItem .tileContainer > .backgroundImage.hidden {
  animation-name: fadeOut;
  animation-timing-function: ease-in;
  z-index: 301;
}
.sectionItem .tileContainer.locked {
  overflow: hidden;
}
.sectionItem .tileContainer.locked > .backgroundImage {
  filter: blur(10px);
}
.sectionItem .tileContainer > .missingImageText {
  align-items: center;
  color: var(--text-foreground-1);
  display: flex;
  flex-direction: column;
  font: 20px var(--semibold-font);
  inset: 0;
  justify-content: center;
  position: absolute;
}
.sectionItem .tileContainer > .lockWrapper {
  align-items: center;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: var(--tile-border-radius-u);
  cursor: pointer;
  display: flex;
  height: 100%;
  justify-content: center;
  position: absolute;
  width: 100%;
  z-index: 330;
}
.sectionItem .tileContainer > .lockWrapper > .pictoElement > svg {
  width: 50px;
}
.sectionItem .tileContainer.focused {
  transform: scale3d(1.22, 1.22, 1);
}
.sectionItem .tileContainer.focused > .missingImageText {
  display: none;
}
.sectionItem .tileContainer.focused > .decoration {
  opacity: 0;
}
.sectionItem .tileContainer.focused > .overlay {
  opacity: 1;
}
.sectionItem .tileContainer.focused ~ .textContainer {
  opacity: 0;
}
.sectionItem .tileContainer > .textScroller {
  left: 4%;
  position: absolute;
  top: calc(50% - 9px);
  width: 92%;
}
.sectionItem .tileContainer > .channelName {
  align-items: center;
  color: var(--text-foreground-1);
  display: flex;
  inset: 0;
  justify-content: center;
  pointer-events: none;
  position: absolute;
}
.sectionItem:hover {
  z-index: 340;
}
.sectionItem > .textContainer {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: var(--tile-text-height-u);
  margin-top: 2px;
  opacity: 1;
  z-index: 250;
}
.sectionItem > .textContainer .text {
  color: var(--text-foreground-1);
  flex: 1 0;
  font: 16px var(--semibold-font);
  text-align: left;
}
.sectionItem > .textContainer .text.secondLineInfo {
  color: var(--text-foreground-2);
  font: 14px var(--regular-font);
}
.sectionItem > .textContainer.placeholder {
  cursor: default;
}
.sectionItem > .textContainer.placeholder > .text {
  flex: 0 1 auto;
  height: 17px;
  margin-bottom: 2px;
  width: 200px;
}
.sectionItem > .textContainer.placeholder > .text.secondLineInfo {
  width: 140px;
}

.section.gemtv .sectionItem {
  margin-right: var(--tile-gemtv-horizontal-space-u);
  width: var(--tile-gemtv-image-width-u);
}
.section.gemtv .sectionItem > .tileContainer {
  height: var(--tile-gemtv-image-height-u);
}
.section.gemtv.medium .sectionItem {
  width: var(--tile-landscape-image-width-u);
}
.section.gemtv.medium .sectionItem > .tileContainer {
  height: var(--tile-landscape-image-height-u);
}
.section.gemtv.big .sectionItem {
  width: var(--tile-landscape-big-image-width-u);
}
.section.gemtv.big .sectionItem > .tileContainer {
  height: var(--tile-landscape-big-image-height-u);
}
.section.portrait .sectionItem > .tileContainer, .section.deeplink .sectionItem > .tileContainer, .section.landscape .sectionItem > .tileContainer {
  background-size: 100% 100%;
}
.section.portrait .sectionItem {
  margin-right: var(--tile-portrait-horizontal-space-u);
  width: var(--tile-portrait-image-width-u);
}
.section.portrait .sectionItem > .tileContainer {
  height: var(--tile-portrait-image-height-u);
}
.section.deeplink .sectionItem {
  margin-right: var(--tile-deeplink-horizontal-space-u);
  width: var(--tile-deeplink-image-width-u);
}
.section.deeplink .sectionItem > .tileContainer {
  height: var(--tile-deeplink-image-height-u);
}
.section.deeplink5x1 .sectionItem {
  margin-right: var(--tile-deeplink-5x1-horizontal-space-u);
  width: var(--tile-deeplink-5x1-image-width-u);
}
.section.deeplink5x1 .sectionItem > .selectionBorder {
  height: calc(var(--tile-deeplink-5x1-image-height-u) + 2 * var(--selection-thickness-u));
  width: calc(var(--tile-deeplink-5x1-image-width-u) + 2 * var(--selection-thickness-u));
}
.section.deeplink5x1 .sectionItem > .selectionBorder:hover {
  background-color: var(--accent);
}
.section.deeplink5x1 .sectionItem .tileContainer {
  background-size: 100% 100%;
  height: var(--tile-deeplink-5x1-image-height-u);
  width: var(--tile-deeplink-5x1-image-width-u);
}
.section.deeplink3x1 .sectionItem {
  margin-right: var(--tile-deeplink-3x1-horizontal-space-u);
  width: var(--tile-deeplink-3x1-image-width-u);
}
.section.deeplink3x1 .sectionItem > .selectionBorder {
  height: calc(var(--tile-deeplink-3x1-image-height-u) + 2 * var(--selection-thickness-u));
  width: calc(var(--tile-deeplink-3x1-image-width-u) + 2 * var(--selection-thickness-u));
}
.section.deeplink3x1 .sectionItem > .selectionBorder:hover {
  background-color: var(--accent);
}
.section.deeplink3x1 .sectionItem .tileContainer {
  background-size: 100% 100%;
  height: var(--tile-deeplink-3x1-image-height-u);
  width: var(--tile-deeplink-3x1-image-width-u);
}
.section.landscape .sectionItem {
  margin-right: var(--tile-landscape-horizontal-space-u);
  width: var(--tile-landscape-image-width-u);
}
.section.landscape .sectionItem > .tileContainer {
  height: var(--tile-landscape-image-height-u);
}
.section.landscape .sectionItem > .selectionBorder {
  height: calc(var(--tile-landscape-image-height-u) + 2 * var(--selection-thickness-u));
  width: calc(var(--tile-landscape-image-width-u) + 2 * var(--selection-thickness-u));
}
.section.landscape .sectionItem > .selectionBorder:hover {
  background-color: var(--accent);
}
.section.landscape .sectionItem > .selectionBorder > .tileContainer {
  height: var(--tile-landscape-image-height-u);
  width: var(--tile-landscape-image-width-u);
}
.section.landscape.big .sectionItem {
  margin-right: var(--tile-landscape-big-horizontal-space-u);
  width: var(--tile-landscape-big-image-width-u);
}
.section.landscape.big .sectionItem > .selectionBorder {
  height: calc(var(--tile-landscape-big-image-height-u) + 2 * var(--selection-thickness-u));
  width: calc(var(--tile-landscape-big-image-width-u) + 2 * var(--selection-thickness-u));
}
.section.landscape.big .sectionItem > .selectionBorder:hover {
  background-color: var(--accent);
}
.section.landscape.big .sectionItem .tileContainer {
  height: var(--tile-landscape-big-image-height-u);
  width: var(--tile-landscape-big-image-width-u);
}
.section.landscape.vod .sectionItem {
  margin-right: var(--tile-landscape-vod-horizontal-space-u);
  width: var(--tile-landscape-vod-image-width-u);
}
.section.landscape.vod .sectionItem > .tileContainer {
  height: var(--tile-landscape-vod-image-height-u);
}
.section.landscape.vod .sectionItem > .tileContainer > .overlay > .pricing {
  align-self: center;
  column-gap: 20px;
  justify-content: center;
  min-width: 210px;
}
.section.landscape.vod .sectionItem > .tileContainer > .overlay > .pricing.reversed {
  flex-direction: column-reverse;
}
.section.landscape.vod .sectionItem > .tileContainer > .overlay > .pricing > .availabilityDate {
  margin-bottom: 0;
}
.section.landscape.vod .sectionItem > .tileContainer > .overlay > .pricing + .buttonFX {
  margin-top: 10px;
}
.section.landscape.vod .sectionItem > .tileContainer > .overlay .buttonFX {
  align-self: center;
}
.section.landscape.vod .sectionItem > .tileContainer > .overlay .buttonFXBicolor {
  margin: 0;
}
.section.channelgroup {
  --selection-width: calc(var(--tile-channel-group-image-width-u) + 2 * var(--selection-thickness-u));
  --selection-height: calc(var(--tile-channel-group-image-height-u) + 2 * var(--selection-thickness-u));
}
.section.channelgroup .sectionItem {
  width: calc(var(--tile-channel-group-image-width-u) + var(--tile-channel-group-horizontal-space-u));
  z-index: 200;
}
.section.channelgroup .sectionItem .tileContainer {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80%;
  height: var(--tile-channel-group-image-height-u);
  width: var(--tile-channel-group-image-width-u);
}
.section.channelgroup:not(.cover) .sectionItem .selectionBorder .tileContainer {
  background-color: var(--tile-background);
}
.section.channelgroup .selectionBorder {
  height: calc(var(--tile-channel-group-image-height-u) + 2 * var(--selection-thickness-u));
  width: calc(var(--tile-channel-group-image-width-u) + 2 * var(--selection-thickness-u));
}
.section.channelgroup .selectionBorder:hover {
  background-color: var(--accent);
}
.section.channelgroup .selectionBorder:hover > .tileContainer {
  background-color: var(--tile-background-hover);
}
.section.channelgroup.big .sectionItem {
  margin-right: var(--tile-channel-group-big-horizontal-space-u);
  width: var(--tile-channel-group-big-image-width-u);
}
.section.channelgroup.big .sectionItem .selectionBorder {
  height: calc(var(--tile-channel-group-big-image-height-u) + 2 * var(--selection-thickness-u));
  width: calc(var(--tile-channel-group-big-image-width-u) + 2 * var(--selection-thickness-u));
}
.section.channelgroup.big .sectionItem .selectionBorder > .tileContainer {
  height: var(--tile-channel-group-big-image-height-u);
  width: var(--tile-channel-group-big-image-width-u);
}
.section.channel {
  --height-u: calc(var(--tile-channel-image-height-u) + 2 * var(--selection-thickness-u));
  --width-u: calc(var(--tile-channel-image-width-u) + 2 * var(--selection-thickness-u));
  --margin-u: calc(18px - 2 * var(--selection-thickness-u));
}
.section.channel .sectionItem {
  height: var(--height-u);
  width: var(--width-u);
}
.section.channel .sectionItem .tileContainer {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80%;
  height: var(--tile-channel-image-height-u);
  width: var(--tile-channel-image-width-u);
}
.section.channel .selectionBorder {
  height: var(--height-u);
  width: var(--width-u);
}
.section.channel .selectionBorder:hover {
  background-color: var(--accent);
}
.section.channel .selectionBorder:hover > .tileContainer {
  background-color: var(--tile-background-hover);
}
.section.cover .sectionItem > .selectionBorder > .tileContainer {
  background-size: cover;
}
.section .sectionItem .tileContainer {
  background-color: var(--placeholder-tile);
}
.section .sectionItem .selectionBorder .tileContainer {
  background-color: var(--placeholder-tile);
}
.section .sectionItem > .textContainer.placeholder > .text {
  background-color: var(--placeholder-tile);
}
.section:not(.placeholder).channel .sectionSlider, .section:not(.placeholder).channelgroup .sectionSlider, .section:not(.placeholder).landscape.big .sectionSlider, .section:not(.placeholder).deeplink3x1 .sectionSlider, .section:not(.placeholder).deeplink5x1 .sectionSlider {
  margin-left: calc(-1 * var(--selection-thickness-u));
}

.sectionItem>.tileContainer>.decoration{border-radius:inherit;height:100%;opacity:1;position:absolute;transition:var(--opacity-short);width:100%;z-index:310}.sectionItem>.tileContainer>.decoration.tv{background:var(--tile-tv-bottom-gradient)}.sectionItem>.tileContainer>.decoration>*{position:absolute}.sectionItem>.tileContainer>.decoration>.channelImage{background:no-repeat left center;background-size:contain;bottom:10px;height:var(--tile-channel-logo-height-u);left:10px;width:var(--tile-channel-logo-width-u)}.sectionItem>.tileContainer>.decoration>.series{bottom:10px;right:10px}.sectionItem>.tileContainer>.decoration>.series>svg path:nth-child(1),.sectionItem>.tileContainer>.decoration>.series>svg path:nth-child(2),.sectionItem>.tileContainer>.decoration>.series>svg path:nth-child(3){fill:#000}.sectionItem>.tileContainer>.decoration>.future,.sectionItem>.tileContainer>.decoration>.preview,.sectionItem>.tileContainer>.decoration>.recording,.sectionItem>.tileContainer>.decoration>.scheduledRecording{left:10px;top:10px}.sectionItem>.tileContainer>.decoration>.watchingStatus{margin:auto;overflow:visible;position:relative}.sectionItem>.tileContainer>.decoration>.debugInfo{background-color:var(--dimmer);border:2px solid var(--accent);border-radius:var(--tile-border-radius-u) 0;color:var(--tile-hover-foreground-1);display:flex;flex-direction:column;padding:5px}.sectionItem>.tileContainer>.decoration>.debugInfo>div{display:flex;flex-direction:column;font:12px var(--semibold-font);-webkit-user-select:none;user-select:none}.sectionItem>.tileContainer>.decoration>.debugInfo>div.record{border-top:1px solid var(--overlay-foreground-2);margin-top:3px;padding-top:3px}
.watchingStatus {
  --watching-status-size-u: 80px;
  aspect-ratio: 1;
  background-color: var(--watching-status-background);
  border-radius: 50%;
  height: var(--watching-status-size-u);
  position: relative;
  width: var(--watching-status-size-u);
}
.watchingStatus.clickable {
  cursor: pointer;
}
.watchingStatus > svg {
  height: 104px;
  margin: -12px 0 0 -12px;
  width: 104px;
}
.watchingStatus > svg > circle {
  fill: transparent;
  stroke: var(--watching-status-progress-foreground);
  stroke-dasharray: 252;
  stroke-dashoffset: 0;
  stroke-width: 4px;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset var(--long-duration) ease-out;
}
.watchingStatus > svg > circle.background {
  stroke: var(--watching-status-progress-background);
}
.watchingStatus > .pictoElement {
  left: 50%;
  margin: -14px 0 0 -14px;
  position: absolute;
  top: 50%;
}

.synopsisMeasure{font:var(--tile-synopsis-font-size-u) var(--light-font);left:-1000px;letter-spacing:.1pt;line-height:var(--tile-synopsis-line-height-u);position:absolute;top:-1000px}.synopsisMeasure.tagLine{font-size:var(--tile-synopsis-tagline-font-size-u);line-height:var(--tile-synopsis-tagline-line-height-u)}.sectionItem>.tileContainer>.overlay{align-items:stretch;background-color:var(--dimmer);border-radius:var(--tile-border-radius-u);color:var(--tile-hover-foreground-1);cursor:pointer;display:flex;flex-direction:column;height:100%;justify-content:stretch;opacity:0;overflow:visible;padding:10px 15px 15px;position:absolute;text-align:left;transition:var(--opacity-short);-webkit-user-select:none;user-select:none;width:100%;will-change:opacity;z-index:350}.sectionItem>.tileContainer>.overlay.bottom{justify-content:flex-end}.sectionItem>.tileContainer>.overlay>.loader{align-self:center;flex-grow:1}.sectionItem>.tileContainer>.overlay>.loader>svg{fill:var(--text-foreground-1)}.sectionItem>.tileContainer>.overlay .text{display:flex;filter:drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));font:18px var(--bold-font);max-height:24px}.sectionItem>.tileContainer>.overlay .text.secondLineInfo,.sectionItem>.tileContainer>.overlay .text.thirdLineInfo{color:var(--tile-hover-foreground-2);font:11px var(--light-font);max-height:16px}.sectionItem>.tileContainer>.overlay .text.thirdLineInfo{margin-bottom:5px}.sectionItem>.tileContainer>.overlay>.details{align-items:center;color:var(--tile-hover-foreground-1);display:flex;flex-wrap:wrap;font:12px var(--regular-font);opacity:.9;overflow:visible;text-align:left}.sectionItem>.tileContainer>.overlay>.details.other{margin:5px 0}.sectionItem>.tileContainer>.overlay>.details .pictoInfo{border-radius:var(--border-radius-tiny-u);font-size:10px;padding:1px 4px}.sectionItem>.tileContainer>.overlay>.details>div{align-items:center;display:flex;margin-right:15px;overflow:visible;position:relative}.sectionItem>.tileContainer>.overlay>.details>div:not(:last-child)::after{background-color:var(--tile-hover-foreground-1);border-radius:50%;content:"";height:5px;margin:0 5px;opacity:.7;position:absolute;right:-15px;width:5px}.sectionItem>.tileContainer>.overlay>.details>div.languages>.pictoInfo{border:1px solid var(--tile-hover-foreground-1)}.sectionItem>.tileContainer>.overlay>.details>div.languages>.pictoInfo:not(:last-child){margin-right:5px}.sectionItem>.tileContainer>.overlay>.details>div.languages>.pictoInfo.impaired{padding-inline:4px;height:18px}.sectionItem>.tileContainer>.overlay>.details>div.languages>.pictoInfo.impaired>svg{fill:var(--text-foreground-1);height:12px}.sectionItem>.tileContainer>.overlay>.details>div.parentalGuidance.pictoInfo{background-color:var(--tile-hover-foreground-1);color:var(--tile-parental-guidance-foreground);font:11px var(--bold-font);padding:1px 4px 2px}.sectionItem>.tileContainer>.overlay .resizeDetectorSynopsis{margin-block:4px 10px}.sectionItem>.tileContainer>.overlay .synopsisWrapper{align-items:stretch;display:flex;flex-direction:column;flex-shrink:1;overflow:visible}.sectionItem>.tileContainer>.overlay .synopsisWrapper.empty{margin:0}.sectionItem>.tileContainer>.overlay .synopsisWrapper.tagLine .synopsis>.text,.sectionItem>.tileContainer>.overlay .synopsisWrapper.tagLine .ellipsis{font-size:var(--tile-synopsis-tagline-font-size-u);line-height:var(--tile-synopsis-tagline-line-height-u)}.sectionItem>.tileContainer>.overlay .synopsis,.sectionItem>.tileContainer>.overlay .ellipsis{font:var(--tile-synopsis-font-size-u) var(--light-font);letter-spacing:.1pt;line-height:var(--tile-synopsis-line-height-u)}.sectionItem>.tileContainer>.overlay .synopsis>.text{flex:1 1;font:var(--tile-synopsis-font-size-u) var(--light-font);line-height:var(--tile-synopsis-line-height-u);max-height:none;max-height:initial;overflow:hidden}.sectionItem>.tileContainer>.overlay .ellipsis{opacity:.7}.sectionItem>.tileContainer>.overlay .ellipsis:hover{opacity:1}.sectionItem>.tileContainer>.overlay .buttonFX{margin-top:auto}.sectionItem>.tileContainer>.overlay .buttonFX>.content{font-size:12px}
.pricing {
  background-color: var(--transaction-status-purchased-background-tile);
  color: var(--transaction-status-purchased-foreground);
  display: flex;
  flex-direction: column;
  font: 14px var(--semibold-font);
  padding-inline: 10px;
}
.pricing.spaced {
  row-gap: 10px;
}
.pricing.reversed {
  flex-direction: column-reverse;
}
.pricing > .availabilityDate {
  color: var(--tile-hover-foreground-1);
}
.pricing.purchasable {
  background-color: transparent;
  background-color: initial;
  padding: 0;
}
.pricing div {
  justify-content: center;
  -webkit-user-select: none;
          user-select: none;
}

.overlay .pricing {
  align-items: center;
  margin-top: auto;
  overflow: visible;
}
.overlay .pricing + .buttonFX {
  margin-top: 10px;
}

.iconBar .pricing > .availabilityDate {
  color: var(--text-foreground-1);
  margin-bottom: 0;
  padding: 5px 10px;
}
.iconBar .pricing > .buttonFX > .content {
  font-size: 16px;
}
.iconBar .pricing:not(.purchasable) {
  background-color: var(--transaction-status-purchased-background-card);
  margin: 0;
  padding: 5px 10px;
}

.episodePricing {
  display: flex;
  column-gap: 20px;
  overflow: visible;
}

.availabilityDate {
  background-color: var(--transaction-status-availability-background);
  color: var(--tile-hover-foreground-1);
  font: italic 14px var(--regular-font);
  justify-content: center;
  overflow: visible;
}

.buttonFXBicolor > .content {
  flex-direction: row;
}
.buttonFXBicolor > .content > .part {
  align-items: center;
  height: 100%;
}
.buttonFXBicolor > .content > .part.left {
  flex-grow: 1;
  justify-content: center;
}
.buttonFXBicolor > .content > .part.right {
  justify-content: center;
  padding: 0 10px;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
  width: 75px;
}
.buttonFXBicolor.dark > .content > .part.left {
  background-color: var(--button-transaction-dark-left-background);
  color: var(--button-transaction-dark-left-foreground);
}
.buttonFXBicolor.dark > .content > .part.right {
  background-color: var(--button-transaction-dark-right-background);
  color: var(--button-transaction-dark-right-foreground);
}
.buttonFXBicolor.dark > .content.hovered > .left {
  background-color: transparent !important;
}
.buttonFXBicolor.dark > .content.hovered > .right {
  background-color: var(--button-transaction-dark-right-background-hover) !important;
}
.buttonFXBicolor.light > .content > .part.left {
  background-color: var(--button-transaction-light-left-background);
  color: var(--button-transaction-light-left-foreground);
}
.buttonFXBicolor.light > .content > .part.right {
  background-color: var(--button-transaction-light-right-background);
  color: var(--button-transaction-light-right-foreground);
}
.buttonFXBicolor.light > .content.hovered > .left {
  background-color: transparent !important;
}
.buttonFXBicolor.light > .content.hovered > .right {
  background-color: var(--button-transaction-dark-right-background-hover) !important;
}
.buttonFXBicolor {
  /* stylelint-disable no-duplicate-selectors */
}
.buttonFXBicolor > .content.hovered > .part.left, .buttonFXBicolor > .content.hovered > .part.right {
  color: var(--button-foreground-hover);
}

.modalDialogDiv.confirmation {
  max-width: 500px;
}
.modalDialogDiv.confirmation > .content > .question {
  color: var(--overlay-foreground-1);
  font: 16px var(--regular-font);
  padding: 20px var(--modal-inline-padding-u);
}
.modalDialogDiv.confirmation > .content > .buttons {
  align-items: center;
  display: flex;
  flex-direction: column-reverse;
  padding: 30px var(--modal-inline-padding-u);
  row-gap: 20px;
}

@keyframes modalSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes modalSlideUp {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}
@keyframes closeBtnSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes iconSlideDown {
  0% {
    transform: translateY(-300%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes iconSlideUp {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-300%);
  }
}
.modalBackground {
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
  z-index: 1000;
}

.modalOverlayDiv {
  background-color: var(--dimmer);
  height: 100%;
  inset: 0;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

.modalContentDiv {
  --icon-size-u: 100px;
  --balloon-height-u: 88px;
  --balloon-width-u: 86px;
  inset: 0;
  padding: 20px;
  position: fixed;
  text-align: center;
  z-index: 10000;
}
.modalContentDiv.modalContentClickable {
  cursor: pointer;
}
.modalContentDiv::after {
  content: "";
  display: inline-block;
  height: 100%;
  margin-left: -0.05em;
  vertical-align: middle;
}
.modalContentDiv > .modalDialogDiv {
  box-sizing: border-box;
  cursor: default;
  display: flex;
  flex-direction: column;
  margin: auto;
  max-height: 100%;
  outline: 0;
  /*
   * Visible because of modal's top icon
   */
  overflow: visible;
  position: relative;
  vertical-align: middle;
}
.modalContentDiv > .modalDialogDiv > .content {
  border-radius: var(--border-radius-huge-u);
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  transform: translateY(0);
  width: 100%;
  will-change: transform;
}
.modalContentDiv > .modalDialogDiv > .content.slideDown {
  animation: modalSlideDown var(--short-duration) ease-in both;
}
.modalContentDiv > .modalDialogDiv > .content.slideUp {
  animation: modalSlideUp var(--short-duration) ease-out both;
}
.modalContentDiv > .modalDialogDiv > .content > .modalHeader {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 14px 16px;
  z-index: 10;
}
.modalContentDiv > .modalDialogDiv > .content > .modalHeader > .title {
  font: 26px var(--semibold-font);
  margin: 0 auto 0 10px;
}
.modalContentDiv > .modalDialogDiv > .content > .modalHeader > .title.clickable {
  cursor: pointer;
}
.modalContentDiv > .modalDialogDiv > .content > .modalHeader > .modalClose {
  animation: closeBtnSlideDown var(--extra-short-duration) var(--short-duration) ease-in both;
}
.modalContentDiv > .modalDialogDiv > .content > .modalHeader > .modalClose > svg {
  width: 20px;
}
.modalContentDiv > .modalDialogDiv > .content > .header {
  align-items: center;
  border: none;
  display: flex;
  flex-direction: column;
  font: 26px var(--bold-font);
  padding: 0 var(--modal-inline-padding-u);
}
.modalContentDiv > .modalDialogDiv > .content > .header.separator {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  margin-bottom: 30px;
  padding-bottom: 20px;
}
.modalContentDiv > .modalDialogDiv > .iconContainer {
  align-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  justify-content: center;
  left: 50%;
  margin-left: calc(var(--icon-size-u) / -2);
  overflow: visible;
  position: absolute;
  top: calc(var(--icon-size-u) / -2);
  width: var(--icon-size-u);
  z-index: 15;
}
.modalContentDiv > .modalDialogDiv > .iconContainer.slideDown {
  animation: iconSlideDown var(--short-duration) ease-in;
}
.modalContentDiv > .modalDialogDiv > .iconContainer.slideUp {
  animation: iconSlideUp var(--short-duration) ease-out;
}
.modalContentDiv > .modalDialogDiv > .iconContainer > svg {
  fill: transparent;
  height: var(--balloon-height-u);
  left: 50%;
  margin-left: calc(var(--balloon-width-u) / -2);
  position: absolute;
  stroke-width: 2px;
  top: calc(var(--icon-size-u) - var(--balloon-height-u));
  width: var(--balloon-width-u);
}
.modalContentDiv > .modalDialogDiv > .iconContainer > .pictoElement > svg {
  width: 30px;
}
.modalContentDiv > .modalDialogDiv > .iconContainer > .pictoElement.error > svg > path:nth-child(2) {
  fill: var(--background);
}
.modalContentDiv > .modalDialogDiv > .iconContainer > .pictoElement.recording {
  margin-top: -1px;
}
.modalContentDiv > .modalDialogDiv > .iconContainer > .pictoElement.recording > svg {
  width: 36px;
}
.modalContentDiv > .modalDialogDiv.dark > .content {
  background-color: var(--overlay-background);
}
.modalContentDiv > .modalDialogDiv.dark > .content > .modalHeader {
  color: var(--overlay-foreground-1);
}
.modalContentDiv > .modalDialogDiv.dark > .content > .modalHeader > .title {
  color: var(--overlay-foreground-1);
}
.modalContentDiv > .modalDialogDiv.dark > .content > .modalHeader > .pictoElement > svg {
  fill: var(--overlay-foreground-1);
}
.modalContentDiv > .modalDialogDiv.dark > .content > .header {
  border-bottom-color: var(--separator-dark);
  color: var(--overlay-foreground-1);
}
.modalContentDiv > .modalDialogDiv.dark > .iconContainer {
  background-color: var(--overlay-background);
}
.modalContentDiv > .modalDialogDiv.dark > .iconContainer > svg {
  stroke: var(--overlay-foreground-1);
}
.modalContentDiv > .modalDialogDiv.dark > .iconContainer > .pictoElement > svg {
  fill: var(--overlay-foreground-1);
}
.modalContentDiv > .modalDialogDiv.dark > .iconContainer > .pictoElement.recording > svg {
  fill: var(--recording);
}
.modalContentDiv > .modalDialogDiv.light > .content {
  background-color: var(--overlay-foreground-1);
}
.modalContentDiv > .modalDialogDiv.light > .content > .modalHeader {
  color: var(--overlay-background);
}
.modalContentDiv > .modalDialogDiv.light > .content > .modalHeader > .title {
  color: var(--overlay-background);
}
.modalContentDiv > .modalDialogDiv.light > .content > .modalHeader > .pictoElement > svg {
  fill: var(--overlay-background);
}
.modalContentDiv > .modalDialogDiv.light > .content > .header {
  border-bottom-color: var(--separator-light);
  color: var(--overlay-background);
}
.modalContentDiv > .modalDialogDiv.light > .iconContainer {
  background-color: var(--overlay-foreground-1);
}
.modalContentDiv > .modalDialogDiv.light > .iconContainer > svg {
  stroke: var(--overlay-background);
}
.modalContentDiv > .modalDialogDiv.light > .iconContainer > .pictoElement > svg {
  fill: var(--overlay-background);
}
.modalContentDiv > .modalDialogDiv.light > .iconContainer > .pictoElement.recording > svg {
  fill: var(--recording);
}

.modalDialogDiv.npvrConfirmation {
  width: 450px;
}
.modalDialogDiv.npvrConfirmation > .content {
  color: var(--overlay-foreground-1);
  position: relative;
}
.modalDialogDiv.npvrConfirmation > .content > .pictoElement {
  left: 10px;
  position: absolute;
  top: 10px;
  z-index: 15;
}
.modalDialogDiv.npvrConfirmation > .content > .pictoElement > svg {
  fill: var(--overlay-foreground-1);
  left: 10px;
  top: 10px;
  width: 20px;
}
.modalDialogDiv.npvrConfirmation > .content > .header > .episodeTitle {
  font: 18px var(--regular-font);
}
.modalDialogDiv.npvrConfirmation > .content > .confirmationBody {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 30px var(--modal-inline-padding-u);
  row-gap: 20px;
}
.modalDialogDiv.npvrConfirmation > .content > .confirmationBody > .confirmationOptions {
  align-items: flex-start;
  flex-direction: column;
  margin-bottom: 30px;
}
.modalDialogDiv.npvrConfirmation > .content > .confirmationBody > .confirmationOptions > .confirmationOption {
  flex-direction: column;
  justify-content: space-between;
  margin: 10px 0;
  width: 100%;
}
.modalDialogDiv.npvrConfirmation > .content > .confirmationBody > .confirmationOptions > .confirmationOption > .confirmationLabel {
  font: 18px var(--semibold-font);
  margin-bottom: 10px;
}
.modalDialogDiv.npvrConfirmation > .content > .confirmationBody > .confirmationOptions > .confirmationOption > input {
  text-align: center;
  width: 50px;
}

.multipleChoices {
  align-items: center;
  cursor: pointer;
  font: 14px var(--semibold-font);
  position: relative;
}
.multipleChoices.disabled {
  cursor: default;
}
.multipleChoices.disabled > .disabledLayer {
  display: block;
}
.multipleChoices > .disabledLayer {
  background-color: rgba(255, 255, 255, 0.3);
  height: 100%;
  display: none;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.multipleChoices > .labels {
  --choice-count: 0;
  --offset-x: 0;
  --label-height: 0;
  --label-width: 0;
  display: grid;
  grid-template-columns: repeat(var(--choice-count), 1fr);
  width: 100%;
}
.multipleChoices > .labels::before {
  background-color: var(--multiple-choice-background-selected);
  border-radius: var(--border-radius-tiny-u);
  content: "";
  display: block;
  height: var(--label-height);
  position: absolute;
  transform: translateX(var(--offset-x));
  transition: transform var(--extra-short-duration) ease-out;
  width: var(--label-width);
}
.multipleChoices > .labels > .label {
  align-items: center;
  border: 1px solid var(--multiple-choice-border);
  color: var(--multiple-choice-foreground);
  justify-content: center;
  padding: 10px 50px;
  transition: color var(--short-duration) ease-out;
  -webkit-user-select: none;
          user-select: none;
  z-index: 1;
}
.multipleChoices > .labels > .label:first-child {
  border-radius: var(--border-radius-tiny-u) 0 0 var(--border-radius-tiny-u);
}
.multipleChoices > .labels > .label:last-child {
  border-radius: 0 var(--border-radius-tiny-u) var(--border-radius-tiny-u) 0;
}
.multipleChoices > .labels > .label.small {
  padding: 10px;
}
.multipleChoices > .labels > .label.medium {
  padding: 10px 30px;
}
.multipleChoices > .labels > .label.large {
  padding: 10px 50px;
}
.multipleChoices > .labels > .label:hover {
  background-color: var(--multiple-choice-background-hover);
  color: var(--multiple-choice-foreground-hover);
  border-color: var(--multiple-choice-border-hover);
}
.multipleChoices > .labels > .label.selected {
  color: var(--multiple-choice-foreground-selected);
  border-color: var(--multiple-choice-border-selected);
}

.resizeDetector {
  inset: 0;
  position: absolute;
  pointer-events: none;
}
.resizeDetector.withChildren {
  flex: 1 0 auto;
  inset: initial;
  pointer-events: all;
  position: relative;
}

.modalDialogDiv.eula {
  max-width: 500px;
}
.modalDialogDiv.eula > .content > .text {
  color: var(--overlay-foreground-1);
  font: 16px var(--regular-font);
  padding: 20px var(--modal-inline-padding-u);
}
.modalDialogDiv.eula > .content > .buttons {
  align-items: center;
  display: flex;
  flex-direction: column-reverse;
  padding: 0 var(--modal-inline-padding-u) 30px var(--modal-inline-padding-u);
  row-gap: 20px;
}

.overlay > .iconBar {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 10px;
  position: absolute;
  right: -24px;
  top: 5px;
}
.overlay > .iconBar > .iconContainer {
  background-color: var(--overlay-transparent-background);
  border-radius: var(--border-radius-huge-u);
  margin-bottom: 4px;
}
.overlay > .iconBar > .iconContainer > .pictoElement > svg {
  fill: var(--overlay-icon);
  width: 18px;
}
.overlay > .iconBar > .iconContainer > .pictoElement.favorite > svg {
  fill: var(--accent);
  stroke: var(--accent);
}
.overlay > .iconBar > .iconContainer > .pictoElement.bookmark {
  opacity: 0.3;
  transition: var(--opacity-short);
}
.overlay > .iconBar > .iconContainer > .pictoElement.bookmark.favorite {
  opacity: 1;
}
.overlay > .iconBar > .iconContainer > .pictoElement.bookmark.favorite > svg {
  fill: var(--accent);
  stroke: var(--accent);
}
.overlay > .iconBar > .iconContainer > .pictoElement.moreInfo > svg {
  margin: 10px;
}

.card .infoAndActionsContainer .iconBar {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  width: 210px;
}
.card .infoAndActionsContainer .iconBar .favoriteButton .content {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
}
.card .infoAndActionsContainer .iconBar .favoriteButton .content .favorite {
  margin-left: -3px;
}
.card .infoAndActionsContainer .iconBar .favoriteButton .content .favorite svg {
  fill: var(--accent);
  pointer-events: none;
  stroke: var(--accent);
}
.card .infoAndActionsContainer .iconBar .favoriteButton:hover .content .favorite:not(.franceChannel) svg {
  fill: var(--button-foreground-hover);
}

.TextScroller_wrapper__1rL1X{overflow:hidden;white-space:nowrap}.TextScroller_elementMeasure__x2OW3{left:-1000px;position:absolute;top:-1000px}
.section.placeholder .sectionSlider > .sectionItem {
  margin-right: var(--tile-gemtv-horizontal-space-u);
  width: var(--tile-gemtv-image-width-u);
}
.section.placeholder .sectionSlider > .sectionItem > .tileContainer {
  height: var(--tile-gemtv-image-height-u);
}
.section.placeholder .sectionSlider > .sectionItem > .textContainer > .text {
  background-color: var(--placeholder-tile);
  flex: 0 1 auto;
  height: 17px;
  margin-bottom: 2px;
  width: 200px;
}
.section.placeholder .sectionSlider > .sectionItem > .textContainer > .text.secondLineInfo {
  width: 140px;
}
.section.placeholder.gemtv.medium .sectionItem {
  width: var(--tile-landscape-image-width-u);
}
.section.placeholder.gemtv.medium .sectionItem > .tileContainer {
  height: var(--tile-landscape-image-height-u);
}
.section.placeholder.gemtv.big > .sectionItem {
  width: var(--tile-landscape-big-image-width-u);
}
.section.placeholder.gemtv.big > .sectionItem > .tileContainer {
  height: var(--tile-landscape-big-image-height-u);
}
.section.placeholder.channelgroup .sectionSlider .sectionItem {
  margin-block: var(--selection-thickness-u);
  margin-right: var(--tile-channel-group-horizontal-space-u);
  width: var(--tile-channel-group-image-width-u);
}
.section.placeholder.channelgroup .sectionSlider .sectionItem.placeholder > .tileContainer {
  height: var(--tile-channel-group-image-height-u);
}
.section.placeholder.channelgroup .sectionSlider .sectionItem.placeholder > .textContainer {
  display: none;
}
.section.placeholder.channelgroup.big .sectionSlider .sectionItem {
  margin-right: var(--tile-channel-group-big-horizontal-space-u);
  width: var(--tile-channel-group-big-image-width-u);
}
.section.placeholder.channelgroup.big .sectionSlider .sectionItem.placeholder > .tileContainer {
  height: var(--tile-channel-group-big-image-height-u);
  width: var(--tile-channel-group-big-image-width-u);
}
.section.placeholder.portrait .sectionSlider > .sectionItem {
  margin-right: var(--tile-portrait-horizontal-space-u);
  width: var(--tile-portrait-image-width-u);
}
.section.placeholder.portrait .sectionSlider > .sectionItem > .tileContainer {
  background-size: 100% 100%;
  height: var(--tile-portrait-image-height-u);
}
.section.placeholder.portrait .sectionSlider > .sectionItem > .textContainer {
  display: none;
}
.section.placeholder.deeplink .sectionSlider > .sectionItem {
  margin-right: var(--tile-deeplink-horizontal-space-u);
  width: var(--tile-deeplink-image-width-u);
}
.section.placeholder.deeplink .sectionSlider > .sectionItem > .tileContainer {
  background-size: 100% 100%;
  height: var(--tile-deeplink-image-height-u);
}
.section.placeholder.deeplink .sectionSlider > .sectionItem > .textContainer {
  display: none;
}
.section.placeholder.deeplink5x1 .sectionSlider > .sectionItem {
  margin-block: var(--selection-thickness-u);
  margin-right: var(--tile-deeplink-5x1-horizontal-space-u);
  width: var(--tile-deeplink-5x1-image-width-u);
}
.section.placeholder.deeplink5x1 .sectionSlider > .sectionItem > .tileContainer {
  height: var(--tile-deeplink-5x1-image-height-u);
}
.section.placeholder.deeplink3x1 .sectionSlider > .sectionItem {
  margin-block: var(--selection-thickness-u);
  margin-right: var(--tile-deeplink-3x1-horizontal-space-u);
  width: var(--tile-deeplink-3x1-image-width-u);
}
.section.placeholder.deeplink3x1 .sectionSlider > .sectionItem > .tileContainer {
  height: var(--tile-deeplink-3x1-image-height-u);
}
.section.placeholder.landscape .sectionSlider > .sectionItem {
  margin-right: var(--tile-landscape-horizontal-space-u);
  width: var(--tile-landscape-image-width-u);
}
.section.placeholder.landscape .sectionSlider > .sectionItem > .tileContainer {
  background-size: 100% 100%;
  height: var(--tile-landscape-image-height-u);
}
.section.placeholder.landscape .sectionSlider > .sectionItem > .textContainer {
  display: none;
}
.section.placeholder.landscape.big .sectionSlider > .sectionItem {
  margin-block: var(--selection-thickness-u);
  margin-right: var(--tile-landscape-big-horizontal-space-u);
  width: var(--tile-landscape-big-image-width-u);
}
.section.placeholder.landscape.big .sectionSlider > .sectionItem > .tileContainer {
  height: var(--tile-landscape-big-image-height-u);
}
.section.placeholder.landscape.vod .sectionSlider > .sectionItem {
  margin-right: var(--tile-landscape-vod-horizontal-space-u);
  width: var(--tile-landscape-vod-image-width-u);
}
.section.placeholder.landscape.vod .sectionSlider > .sectionItem > .tileContainer {
  background-size: 100% 100%;
  height: var(--tile-landscape-vod-image-height-u);
}
.section.placeholder.landscape.vod .sectionSlider > .sectionItem > .textContainer {
  display: none;
}

.sortAndFilter {
  align-items: center;
  display: flex;
  margin-left: 20px;
}
.sortAndFilter > input {
  background-color: transparent;
  border: 2px solid var(--input-border);
  border-radius: var(--border-radius-huge-u);
  color: var(--search-grid-foreground);
  display: flex;
  font: 16px var(--regular-font);
  justify-content: center;
  margin-right: 20px;
  padding: 8px 12px;
  -webkit-user-select: text;
          user-select: text;
  width: 250px;
}
.sortAndFilter > input::placeholder {
  color: var(--search-grid-placeholder);
}
.sortAndFilter > button {
  align-items: center;
  background-color: transparent;
  border: 0;
  color: var(--placeholder-input);
  cursor: pointer;
}
.sortAndFilter > button.selected {
  color: var(--text-foreground-1);
}
.sortAndFilter > button > .pictoElement > svg {
  fill: var(--text-foreground-1);
  width: 20px;
}

.sectionCarousel {
  align-items: stretch;
  display: flex;
  flex-direction: row;
  height: 440px;
  justify-content: center;
  opacity: 1;
  padding: 0 20px;
  pointer-events: none;
  transition: var(--opacity-medium);
}
.sectionCarousel.hidden {
  opacity: 0;
}
.sectionCarousel .previousButton,
.sectionCarousel .nextButton {
  align-items: center;
  display: flex;
  height: 100%;
  opacity: 0.4;
  pointer-events: auto;
  width: 30px;
}
.sectionCarousel .previousButton > .pictoElement,
.sectionCarousel .nextButton > .pictoElement {
  height: 20px;
}
.sectionCarousel .previousButton:hover,
.sectionCarousel .nextButton:hover {
  opacity: 1;
}
.sectionCarousel > .paginationAndActions {
  align-self: flex-end;
  flex-direction: column;
  pointer-events: auto;
}
.sectionCarousel > .paginationAndActions > .pagination {
  display: flex;
  flex: 1 1;
  margin-bottom: 25px;
  opacity: 0.8;
}
.sectionCarousel > .paginationAndActions > .pagination > .itemIndex {
  cursor: pointer;
}
.sectionCarousel > .paginationAndActions > .iconBar {
  --picto-shadow: drop-shadow(1px 1px 0 rgb(0 0 0 / 30%));
  align-items: flex-end;
  flex-direction: row;
  height: 20px;
}
.sectionCarousel > .paginationAndActions > .iconBar .pictoElement {
  filter: var(--picto-shadow);
  width: 20px;
}
.sectionCarousel > .paginationAndActions > .iconBar .pictoElement > svg {
  width: 14px;
}
.sectionCarousel > .swipeable {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  overflow: visible;
  pointer-events: auto;
}
.sectionCarousel > .swipeable > .itemSlideContainer {
  align-items: center;
  flex: 1 1 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  position: relative;
}
.sectionCarousel > .swipeable > .itemSlideContainer > .hubImage {
  height: auto;
  padding-left: 100px;
  position: absolute;
  top: -80px;
  width: auto;
}

.equalizer {
  --equalizer-bar-start: 0;
  --equalizer-bar-width-u: 2px;
  --equalizer-bar-width-incl-margin-u: 4px;
  cursor: pointer;
  filter: var(--picto-shadow);
  height: 20px;
  margin: 0 20px 3px;
  position: relative;
  width: 18px;
}
.equalizer.notAllowed {
  cursor: not-allowed;
}
.equalizer > span {
  background-color: var(--carousel-foreground);
  bottom: 1px;
  display: block;
  height: 100%;
  margin: 0;
  position: absolute;
  transform: scaleY(1);
  transform-origin: center bottom;
  transition: transform var(--short-duration) ease-out;
  width: var(--equalizer-bar-width-u);
}
.equalizer > span:nth-child(1) {
  left: 0px;
}
.equalizer > span:nth-child(2) {
  left: 4px;
}
.equalizer > span:nth-child(3) {
  left: 8px;
}
.equalizer > span:nth-child(4) {
  left: 12px;
}
.equalizer > span:nth-child(5) {
  left: 16px;
}
.equalizer .muteSign {
  left: var(--equalizer-bar-start);
  pointer-events: none;
  position: absolute;
}
.equalizer .muteSign > svg > line {
  stroke: var(--background);
  stroke-width: 2px;
}

.itemIndex {
  --item-index-width-u: 50px;
  color: var(--carousel-foreground);
  display: flex;
  height: 19px;
  overflow: visible;
  position: relative;
  width: auto;
}
.itemIndex > .videoProgressContainer {
  height: 19px;
  position: absolute;
  width: calc(100% - 2px);
}
.itemIndex > .videoProgressContainer > .videoProgress {
  background: var(--player-progress-bar-buffered);
  display: none;
  height: 100%;
  position: absolute;
  width: 0;
}
.itemIndex.focused > .index > p {
  color: var(--accent);
  font: 14px var(--bold-font);
}
.itemIndex.focused .videoProgress {
  display: flex;
}
.itemIndex > .index {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: var(--item-index-width-u);
}
.itemIndex > .index > p {
  display: inline;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.4));
  font: 14px var(--light-font);
  margin: 0;
  text-align: center;
  -webkit-user-select: none;
          user-select: none;
}
.itemIndex > .index > p:hover {
  font-family: var(--bold-font);
}
.itemIndex > .index > p::after {
  content: "00";
  display: block;
  font-family: var(--bold-font);
  height: 0;
  visibility: hidden;
}
.itemIndex:not(:last-child) > .index > p {
  border-right: 2px solid var(--carousel-foreground);
}

@keyframes slideTitleSlideIn {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  30% {
    opacity: 0;
  }
  60% {
    transform: translateX(0);
  }
  100% {
    opacity: 1;
  }
}
.itemSlide {
  display: flex;
  flex-direction: column;
  opacity: 0;
  overflow: visible;
  padding-left: 100px;
  pointer-events: none;
  position: absolute;
  transition: opacity var(--medium-duration) ease-in-out;
  z-index: 250;
}
.itemSlide.visible {
  opacity: 1;
  pointer-events: all;
  z-index: 255;
}
.itemSlide.visible .title {
  animation: slideTitleSlideIn 200ms var(--short-duration) ease-in both;
}
.itemSlide > .infoContainer {
  align-items: flex-start;
  color: var(--carousel-foreground);
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.itemSlide > .infoContainer .overTitle {
  align-items: center;
  display: flex;
  flex-direction: row;
  overflow: visible;
}
.itemSlide > .infoContainer .overTitle > .text,
.itemSlide > .infoContainer .overTitle > .separator {
  font: 16px var(--regular-font);
  margin-right: 12px;
}
.itemSlide > .infoContainer .overTitle > .text {
  opacity: 0.8;
  transition: var(--opacity-short);
}
.itemSlide > .infoContainer .overTitle > .text.clickable {
  cursor: pointer;
}
.itemSlide > .infoContainer .overTitle > .text.clickable:hover {
  opacity: 1;
}
.itemSlide > .infoContainer .overTitle > .liveRecording {
  align-items: center;
  margin-left: 10px;
}
.itemSlide > .infoContainer .overTitle > .liveRecording > .pictoElement > .background {
  left: 4px;
  top: 4px;
  width: 20px;
}
.itemSlide > .infoContainer .overTitle > .liveRecording > .pictoElement > svg {
  width: 12px;
}
.itemSlide > .infoContainer .overTitle > .liveRecording > .text {
  margin-left: 5px;
}
.itemSlide > .infoContainer .title {
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5));
  font: 38px var(--bold-font);
  line-height: 50px;
  margin-block: 5px 32px;
  max-width: 800px;
  opacity: 0;
}
.itemSlide > .infoContainer > .iconBar {
  align-items: flex-start;
  display: flex;
  justify-content: flex-start;
  overflow: visible;
}
.itemSlide > .infoContainer > .iconBar > .pictoElement {
  margin: 0 8px;
  width: 44px;
}
.itemSlide > .infoContainer > .iconBar > .pictoElement > svg {
  width: 28px;
}
.itemSlide > .infoContainer > .iconBar > .pictoElement.play {
  margin-right: 16px;
  width: 64px;
}
.itemSlide > .infoContainer > .iconBar > .pictoElement.play > svg {
  width: 28px;
}
.itemSlide > .infoContainer > .iconBar > .spacedButton {
  margin-right: 20px;
}

.statusPicto {
  align-items: center;
  border-radius: var(--border-radius-tiny-u);
  color: var(--picto-foreground);
  font: 14px var(--semibold-font);
  justify-content: center;
  padding: 3px 8px;
  -webkit-user-select: none;
          user-select: none;
}
.statusPicto.clickable {
  cursor: pointer;
}
.statusPicto.live {
  background-color: var(--live);
}
.statusPicto.future {
  background-color: var(--future);
}
.statusPicto.catchup, .statusPicto.preview {
  background-color: var(--catchup);
}
.statusPicto.recording {
  background-color: var(--recording);
}
.statusPicto.past {
  background-color: var(--past);
}

.section.channelGroupSection {
  --channel-group-navigation-button-size-u: 80px;
  --channel-group-navigation-button-collapsed-position-u: calc(var(--channel-group-navigation-button-size-u) / 4);
  --channel-group-navigation-button-expanded-position-u: calc(var(--channel-group-navigation-button-size-u) / 8);
  --channel-group-navigation-button-picto-margin-u: calc(var(--channel-group-navigation-button-collapsed-position-u) / 2);
  display: flex;
  flex-direction: column;
  padding-left: 50px;
  pointer-events: auto;
}
.section.channelGroupSection > div {
  overflow: visible;
}
.section.channelGroupSection > .navigationButton {
  align-items: center;
  background-color: var(--section-navigation-buttons);
  cursor: pointer;
  display: flex;
  height: var(--channel-group-navigation-button-size-u);
  justify-content: center;
  position: absolute;
  top: calc((125px - var(--channel-group-navigation-button-size-u)) / 2 + 38px);
  transition: left var(--short-duration) ease-out, right var(--short-duration) ease-out;
  width: var(--channel-group-navigation-button-size-u);
}
.section.channelGroupSection > .navigationButton:hover {
  background-color: var(--section-navigation-buttons-hover);
}
.section.channelGroupSection > .navigationButton > .pictoElement {
  height: 20px;
}
.section.channelGroupSection > .navigationButton.previous {
  border-radius: 0 50% 50% 0;
  left: calc(-1 * var(--channel-group-navigation-button-collapsed-position-u));
}
.section.channelGroupSection > .navigationButton.previous:hover {
  left: calc(-1 * var(--channel-group-navigation-button-expanded-position-u));
}
.section.channelGroupSection > .navigationButton.previous > .pictoElement {
  margin-left: var(--channel-group-navigation-button-picto-margin-u);
}
.section.channelGroupSection > .navigationButton.next {
  border-radius: 50% 0 0 50%;
  right: calc(-1 * var(--channel-group-navigation-button-collapsed-position-u));
}
.section.channelGroupSection > .navigationButton.next:hover {
  right: calc(-1 * var(--channel-group-navigation-button-expanded-position-u));
}
.section.channelGroupSection > .navigationButton.next > .pictoElement {
  margin-left: calc(-1 * var(--channel-group-navigation-button-picto-margin-u));
}
.section.channelGroupSection > .header {
  align-items: center;
  display: flex;
  margin: 0 0 8px 13px;
}
.section.channelGroupSection > .header .sectionTitleContainer {
  align-items: center;
  color: var(--text-foreground-1);
  display: flex;
  font: 18px var(--bold-font);
  -webkit-user-select: none;
          user-select: none;
}
.section.channelGroupSection .slider {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  height: var(--tile-channel-group-image-height-u);
  overflow: visible;
  transform: translate3d(0, 0, 0);
  transition: transform var(--short-duration) ease-out;
}

.section.channelSection {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  padding: 0 50px;
  pointer-events: auto;
}
.section.channelSection > .header {
  align-items: center;
  color: var(--text-foreground-1);
  display: flex;
  font: 18px var(--bold-font);
  margin: 0 0 8px 13px;
  -webkit-user-select: none;
          user-select: none;
}
.section.channelSection .itemGrid {
  display: flex;
  flex: 1 1;
  flex-flow: row wrap;
  justify-content: flex-start;
}
.section.channelSection .itemGrid::after {
  content: "";
  flex: auto;
}

.circleLoader {
  align-items: center;
  align-self: center;
  aspect-ratio: 1;
  background-color: rgba(22, 47, 73, 0.1);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  margin: 50px;
  overflow: visible;
  position: relative;
  width: 80px;
}
.circleLoader > svg {
  aspect-ratio: 1;
  position: absolute;
  width: 104px;
}
.circleLoader > svg > circle {
  fill: transparent;
  stroke: var(--accent);
  stroke-dasharray: 252;
  stroke-dashoffset: 0;
  stroke-width: 4px;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 50ms linear;
}
.circleLoader > svg > circle.background {
  stroke: rgba(255, 255, 255, 0.3);
}
.circleLoader > .percentage {
  color: var(--text-foreground-1);
  font: 18px var(--semibold-font);
}

.errorBoundary {
  background-color: #f00;
  color: #fff;
  font: 14px var(--regular-font);
  margin: 10px;
  padding: 10px;
  z-index: 100000;
}

@keyframes footerSlideUp {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes footerSlideDown {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}
.footer {
  background-color: var(--footer-background);
  color: var(--footer-foreground);
  display: flex;
  flex-direction: column;
  font: 14px var(--regular-font);
  margin-top: auto;
  opacity: 0;
  position: relative;
  transform: translateY(100%);
}
.footer.slideUp {
  animation: footerSlideUp var(--short-duration) ease-out forwards;
}
.footer.slideDown {
  animation: footerSlideDown var(--short-duration) ease-in forwards;
}
.footer > .footerCommon {
  justify-content: flex-end;
}
.footer > .footerCommon > .pictoElement.topButton {
  border-radius: var(--border-radius-tiny-u);
  cursor: pointer;
  margin: 20px 20px 10px;
  transition: background-color 700ms ease-out;
}
.footer > .footerCommon > .pictoElement.topButton > svg {
  opacity: 0.6;
  width: 16px;
}
.footer > .footerCommon > .pictoElement.topButton:hover {
  background-color: var(--picto-foreground);
  opacity: 1;
}
.footer > .footerCommon > .pictoElement.topButton:hover > svg {
  fill: var(--footer-background);
  opacity: 1;
}

.footer .footerVersion {
  align-items: center;
  bottom: 10px;
  font-size: 12px;
  opacity: 0.8;
  position: absolute;
  right: 10px;
}

@keyframes debugElasticAppearing {
  0% {
    opacity: 0;
    transform: scale(0);
    width: 0;
  }
  1% {
    opacity: 0;
    transform: scale(0);
    width: auto;
  }
  66% {
    opacity: 1;
    transform: scale(1.3);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes debugElasticDisappearing {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  33% {
    opacity: 1;
    transform: scale(1.3);
  }
  99% {
    opacity: 0;
    transform: scale(0);
    width: auto;
  }
  100% {
    opacity: 0;
    transform: scale(0);
    width: 0;
  }
}
.debugPicto {
  height: 20px;
  margin-left: 5px;
  opacity: 0;
  transform: scale(0);
  width: 20px;
}
.debugPicto.dark {
  fill: var(--text-foreground-1);
}
.debugPicto.light {
  fill: var(--overlay-background);
}
.debugPicto.hidden {
  animation: debugElasticDisappearing var(--medium-duration) ease-out forwards;
}
.debugPicto.visible {
  animation: debugElasticAppearing var(--medium-duration) ease-out forwards;
}

@keyframes headerSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes headerSlideUp {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}
.mainLayout > .header {
  align-items: center;
  /* stylelint-disable */
  background-image: linear-gradient(var(--header-background-top-color), var(--header-background-bottom-color));
  /* stylelint-enable */
  display: flex;
  flex-direction: row;
  height: var(--header-height-u);
  justify-content: flex-start;
  opacity: 0;
  overflow: visible;
  position: fixed;
  transform: translateY(-100%);
  /* stylelint-disable */
  transition: --header-background-bottom-color var(--medium-duration), --header-background-top-color var(--medium-duration);
  /* stylelint-enable */
  width: 100%;
  z-index: 350;
}
.mainLayout > .header.slideDown {
  animation: headerSlideDown var(--short-duration) ease-out forwards;
}
.mainLayout > .header.slideUp {
  animation: headerSlideUp var(--short-duration) ease-in forwards;
}
.mainLayout > .header.scroll {
  --header-background-bottom-color: var(--header-background-scroll-bottom-color);
  --header-background-top-color: var(--header-background-scroll-top-color);
}
.mainLayout > .header:hover {
  --header-background-bottom-color: var(--header-background-hover-bottom-color);
  --header-background-top-color: var(--header-background-hover-top-color);
}
.mainLayout > .header > .headerLeft {
  align-items: center;
}
.mainLayout > .header > .headerLeft > .headerImage {
  cursor: pointer;
  height: var(--header-logo-height-u);
  margin: 0 50px;
  pointer-events: auto;
  -webkit-user-select: none;
          user-select: none;
}
.mainLayout > .header > .headerMiddle {
  align-items: center;
  flex: 1 1 auto;
  min-width: var(--burger-width-u);
  overflow: visible;
  position: relative;
}
.mainLayout > .header > .headerRight {
  align-items: center;
  display: flex;
  margin: 0 50px;
}
.mainLayout > .header > .headerRight > a,
.mainLayout > .header > .headerRight > .link {
  border-bottom: 2px solid var(--accent);
  color: var(--accent);
  cursor: pointer;
  font-family: var(--bold-font);
  text-decoration: none;
}
.mainLayout > .header > .headerRight > a:hover,
.mainLayout > .header > .headerRight > .link:hover {
  color: var(--accent-light);
  border-color: var(--accent-light);
}
.mainLayout > .header > .headerRight > .searchBox {
  margin: 0 10px;
}
.mainLayout > .header > .headerRight > .freeTrial {
  align-items: center;
  background-color: #f00;
  border-radius: var(--border-radius-tiny-u);
  display: flex;
  height: 44px;
  justify-content: center;
  margin-right: 20px;
  padding-inline: 20px;
  position: relative;
  color: #fff;
}
.mainLayout > .header > .headerRight > .freeTrial:hover {
  background-color: #ff1a48;
}

.mainLayout > .header > .headerMiddle > .menuWrapper {
  align-items: center;
  flex: 1 1 auto;
  min-width: var(--burger-width-u);
  overflow: visible;
  pointer-events: auto;
}
.mainLayout > .header > .headerMiddle > .menuWrapper > .burgerIcon {
  align-items: center;
  color: var(--header-foreground);
  cursor: pointer;
  font: 15px var(--regular-font);
  height: 40px;
  margin: 0 auto 0 0;
  opacity: 0.8;
  overflow: visible;
  padding: 5px;
  position: relative;
  transition: var(--opacity-short), transform var(--short-duration) ease-in-out;
  -webkit-user-select: none;
          user-select: none;
}
.mainLayout > .header > .headerMiddle > .menuWrapper > .burgerIcon > .pictoElement {
  width: 20px;
}
.mainLayout > .header > .headerMiddle > .menuWrapper > .burgerIcon > .pictoElement > svg {
  width: 14px;
}
.mainLayout > .header > .headerMiddle > .menuWrapper > .burgerIcon > .burgerMenu {
  background-color: var(--header-burger-menu-background);
  border-radius: var(--border-radius-big-u);
  display: flex;
  flex-direction: column;
  min-width: 220px;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 40px;
  transform: scaleY(0);
  transform-origin: center 0;
  transition: transform var(--short-duration) ease-out, var(--opacity-short);
}
.mainLayout > .header > .headerMiddle > .menuWrapper > .burgerIcon > .burgerMenu > .avenueElement {
  padding: 10px 20px;
}
.mainLayout > .header > .headerMiddle > .menuWrapper > .burgerIcon > .burgerMenu > .avenueElement:not(:first-child) {
  border-top: 1px solid var(--header-burger-menu-separator);
}
.mainLayout > .header > .headerMiddle > .menuWrapper > .burgerIcon > .burgerMenu > .avenueElement > .text {
  color: var(--header-burger-menu-foreground);
  display: flex;
}
.mainLayout > .header > .headerMiddle > .menuWrapper > .burgerIcon > .burgerMenu > .avenueElement:hover {
  background-color: var(--header-burger-menu-background-hover);
}
.mainLayout > .header > .headerMiddle > .menuWrapper > .burgerIcon > .burgerMenu > .avenueElement:hover > .text {
  opacity: 1;
}
.mainLayout > .header > .headerMiddle > .menuWrapper > .burgerIcon > .burgerMenu > .avenueElement::before {
  display: none;
}
.mainLayout > .header > .headerMiddle > .menuWrapper > .burgerIcon:hover {
  opacity: 1;
}
.mainLayout > .header > .headerMiddle > .menuWrapper > .burgerIcon:hover > .burgerMenu {
  opacity: 0.9;
  transform: scaleY(1);
}

.avenueElement {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  font: 14px var(--semibold-font);
  height: 40px;
  justify-content: flex-start;
}
.avenueElement.separator::before {
  color: var(--header-foreground);
  content: "|";
  font: inherit;
  margin: 0 22px 0 19px;
  pointer-events: none;
}
.avenueElement > .text {
  align-items: center;
  background-color: transparent;
  color: var(--header-foreground);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font: inherit;
  margin-left: 5px;
  margin-right: 5px;
  opacity: 0.7;
  padding: 5px;
  transition: var(--opacity-short);
  -webkit-user-select: none;
          user-select: none;
}
.avenueElement > .text::after {
  content: attr(data-text);
  display: block;
  font-family: var(--bold-font);
  height: 0;
  visibility: hidden;
}
.avenueElement > .text:hover {
  color: var(--accent);
  opacity: 1;
}
.avenueElement.focused > .text {
  font-family: var(--bold-font);
  opacity: 1;
}

@keyframes searchBoxAppear {
  0% {
    opacity: 0;
    width: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    width: 280px;
  }
}
.searchBox {
  align-items: center;
  display: flex;
  flex-direction: row;
  pointer-events: auto;
}
.searchBox > .pictoElement {
  height: 44px;
  width: 44px;
}
.searchBox > input {
  animation: searchBoxAppear var(--short-duration) cubic-bezier(0, 0.4, 0.4, 1) both;
  background-color: transparent;
  border: 2px solid var(--input-border);
  border-radius: var(--border-radius-huge-u);
  color: var(--search-header-foreground);
  font: 15px var(--regular-font);
  justify-content: center;
  padding: 8px 12px;
  transform-origin: right;
  -webkit-user-select: text;
          user-select: text;
  width: 280px;
}
.searchBox > input::selection {
  background: var(--search-header-selection-background);
  color: var(--search-header-selection-foreground);
}
.searchBox > input::placeholder {
  color: var(--placeholder-input);
}

.mainLayout > .header > .headerRight .pictoElement {
  height: 44px;
  width: 44px;
}

.imageCarousel {
  height: 660px;
  pointer-events: none;
  position: absolute;
  width: 100%;
}
.imageCarousel > .imageContainer {
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transition: var(--opacity-long);
  width: 100%;
}
.imageCarousel > .imageContainer.selected {
  opacity: 1;
}
.imageCarousel > .imageContainer.locked {
  filter: blur(50px);
}

.playerView > .debugOverlay {
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  grid-column-gap: 20px;
  column-gap: 20px;
  display: grid;
  grid-template-columns: [col1-start] 1fr [col1-end col2-start] 1fr [col2-end col3-start] 1fr [col3-end];
  grid-template-rows: 1fr min-content auto;
  flex-direction: column;
  left: 80px;
  min-width: 200px;
  padding: 10px;
  position: absolute;
  top: 140px;
}
.playerView > .debugOverlay > .column1,
.playerView > .debugOverlay > .column2,
.playerView > .debugOverlay > .column3 {
  display: flex;
  flex-direction: column;
}
.playerView > .debugOverlay > .wholeRow {
  flex-direction: column;
  grid-column: col1-start/col3-end;
  margin-bottom: 10px;
  max-width: 750px;
}
.playerView > .debugOverlay > .column1 {
  grid-area: col1;
}
.playerView > .debugOverlay > .column2 {
  grid-area: col2;
}
.playerView > .debugOverlay > .column3 {
  grid-area: col3;
}
.playerView > .debugOverlay .pictoElement {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
}
.playerView > .debugOverlay .pictoElement > svg {
  color: var(--accent);
}
.playerView > .debugOverlay .title {
  color: var(--accent);
  font: 12px var(--semibold-font);
}
.playerView > .debugOverlay .subsection {
  flex-direction: column;
  margin-left: 20px;
  margin-bottom: 5px;
}
.playerView > .debugOverlay .data {
  align-items: baseline;
  margin-left: 10px;
}
.playerView > .debugOverlay .data > .label {
  font: 10px var(--light-font);
}
.playerView > .debugOverlay .data > .label.button {
  background-color: rgba(0, 0, 0, 0.1);
  border: 1px solid #fff;
  border-radius: 3px;
  cursor: pointer;
  padding: 0 3px;
}
.playerView > .debugOverlay .data > .label.button:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
.playerView > .debugOverlay .data > .label.button:active {
  background-color: #fff;
  color: #000;
}
.playerView > .debugOverlay .data > .value {
  font: 10px var(--regular-font);
  margin-left: 5px;
}
.playerView > .debugOverlay .data + .title {
  margin-top: 10px;
}

@keyframes pictoGrow {
  0% {
    transform: scale3d(0, 0, 1);
  }
  80% {
    transform: scale3d(1.2, 1.2, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}
@keyframes blink {
  0% {
    opacity: 0;
    transform: scale3d(0, 0, 1);
  }
  50% {
    opacity: 1;
    transform: scale3d(1.2, 1.2, 1);
  }
  80% {
    opacity: 1;
    transform: scale3d(1.2, 1.2, 1);
  }
  100% {
    opacity: 0;
    transform: scale3d(0, 0, 1);
  }
}
.playerView {
  --status-picto-size-u: 80px;
  --status-picto-margin-u: calc(var(--status-picto-size-u) / -2);
  align-items: center;
  background-color: var(--player-background);
  cursor: none;
  flex-direction: column;
  font: 14px var(--regular-font);
  inset: 0;
  justify-content: flex-start;
  position: absolute;
  z-index: 500;
}
.playerView > .videoContainer {
  align-items: center;
  flex: 1 1;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
}
.playerView > .videoContainer > video {
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  width: 100%;
}
.playerView > .videoContainer > video.shifted::-webkit-media-text-track-container {
  transform: translateY(-160px);
  -webkit-transition: transform var(--short-duration) ease-out;
  transition: transform var(--short-duration) ease-out;
}
.playerView > .videoContainer > video::cue(.white) {
  color: #fff;
}
.playerView > .videoContainer > video::cue(.lime) {
  color: #0f0;
}
.playerView > .videoContainer > video::cue(.cyan) {
  color: #0ff;
}
.playerView > .videoContainer > video::cue(.red) {
  color: #f00;
}
.playerView > .videoContainer > video::cue(.yellow) {
  color: #ff0;
}
.playerView > .videoContainer > video::cue(.magenta) {
  color: #f0f;
}
.playerView > .videoContainer > video::cue(.blue) {
  color: #00f;
}
.playerView > .videoContainer > video::cue(.black) {
  color: #000;
}
.playerView > .videoContainer > video {
  /* stylelint-disable selector-class-pattern */
}
.playerView > .videoContainer > video::cue(.bg_white) {
  background-color: #fff;
}
.playerView > .videoContainer > video::cue(.bg_lime) {
  background-color: #0f0;
}
.playerView > .videoContainer > video::cue(.bg_cyan) {
  background-color: #0ff;
}
.playerView > .videoContainer > video::cue(.bg_red) {
  background-color: #f00;
}
.playerView > .videoContainer > video::cue(.bg_yellow) {
  background-color: #ff0;
}
.playerView > .videoContainer > video::cue(.bg_magenta) {
  background-color: #f0f;
}
.playerView > .videoContainer > video::cue(.bg_blue) {
  background-color: #00f;
}
.playerView > .videoContainer > video::cue(.bg_black) {
  background-color: #000;
}
.playerView > .videoContainer > video {
  /* stylelint-enable selector-class-pattern */
}
.playerView > .videoContainer {
  /* stylelint-disable selector-class-pattern */
}
.playerView > .videoContainer > .shaka-text-container {
  align-items: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  font-size: 48px;
  inset: 0;
  justify-content: flex-end;
  line-height: 1.4;
  pointer-events: none;
  position: absolute;
  text-align: center;
  transform: translateY(0);
  transition: transform var(--short-duration) ease-out;
}
.playerView > .videoContainer > .shaka-text-container * {
  display: inline;
  display: initial;
  overflow: visible;
  position: static;
  position: initial;
}
.playerView > .videoContainer {
  /* stylelint-enable selector-class-pattern */
  /*
  // For future use

  // Black (low opacity) / White
  &.whiteOnTranslucentBlack {
    p {
      background-color: var(--translucent-black-bg-subs);
    }
  }

  // Black / White
  &.whiteOnBlack {
    p {
      background-color: var(--black-bg-subs);
    }
  }

  // Transparent / Yellow
  &.yellowOnTransparent {
    span {
      color: var(--yellow-fg-subs) !important;
    }
  }

  // Black (low opacity) / Yellow
  &.yellowOnTranslucentBlack {
    p {
      background-color: var(--translucent-black-bg-subs);
    }

    span {
      color: var(--yellow-fg-subs) !important;
    }
  }

  // Black / Yellow
  &.yellowOnBlack {
    p {
      background-color: var(--black-bg-subs);
    }

    span {
      color: var(--yellow-fg-subs) !important;
    }
  }

  // White / Black
  &.blackOnWhite {
    p {
      background-color: var(--white-bg-subs);
    }

    span {
      color: var(--black-fg-subs) !important;
    }
  }

  // White (low opacity) / Black
  &.blackOnTranslucentWhite {
    p {
      background-color: var(--translucent-white-bg-subs);
    }

    span {
      color: var(--black-fg-subs) !important;
    }
  }
  */
}
.playerView > .videoContainer > .blackOutWrapper {
  align-items: center;
  background-color: var(--background);
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 520;
}
.playerView > .videoContainer > .blackOutWrapper > img {
  margin-top: -5%;
  width: 320px;
}
.playerView > .videoContainer > .blackOutWrapper > div {
  color: var(--player-controller-foreground);
  font-size: 24px;
  text-align: center;
  white-space: pre-line;
}
.playerView > .videoContainer > .blackOutWrapper > div.blackOutTitle {
  font-family: var(--bold-font);
  font-size: 36px;
  margin-block: 60px 40px;
}
.playerView > .videoContainer > .lockWrapper {
  align-items: center;
  background-color: var(--background);
  color: var(--player-controller-foreground);
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 505;
}
.playerView > .videoContainer > .lockWrapper > .lockTitle {
  font: 40px var(--semibold-font);
}
.playerView > .videoContainer > .lockWrapper > .lockTitle + div {
  font-size: 20px;
  margin-block: 50px;
  text-align: center;
  white-space: break-spaces;
}
.playerView > .videoContainer > .lockWrapper > .buttonFX {
  pointer-events: all;
}
.playerView > .videoContainer > .lockWrapper > .buttonFX.unlock .content {
  align-items: center;
  column-gap: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.playerView > .videoContainer > .lockWrapper > .buttonFX.unlock .content svg {
  fill: var(--player-controller-background);
}
.playerView > .videoContainer > .loaderWrapper {
  align-items: center;
  height: 100%;
  justify-content: center;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transition: var(--opacity-short);
  width: 100%;
  z-index: 510;
}
.playerView > .videoContainer > .loaderWrapper.visible {
  opacity: 1;
}
.playerView > .videoContainer > .loaderWrapper > img {
  filter: blur(8px);
  height: 300px;
  opacity: 0.3;
  -webkit-user-select: none;
          user-select: none;
  width: 600px;
}
.playerView > .videoContainer > .videoController {
  bottom: 0;
  height: 160px;
  position: absolute;
  width: 100%;
}
.playerView > .videoContainer > .statusPictoBackground {
  align-items: center;
  aspect-ratio: 1;
  background-color: var(--player-status-picto-background);
  border-radius: 50%;
  justify-content: center;
  margin-top: var(--status-picto-margin-u);
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: scale3d(0, 0, 1);
  width: var(--status-picto-size-u);
}
.playerView > .videoContainer > .statusPictoBackground.play, .playerView > .videoContainer > .statusPictoBackground.pause {
  left: 50%;
  margin-left: var(--status-picto-margin-u);
}
.playerView > .videoContainer > .statusPictoBackground.skipBackward {
  left: 10%;
}
.playerView > .videoContainer > .statusPictoBackground.skipForward {
  right: 10%;
}
.playerView > .videoContainer > .statusPictoBackground.play, .playerView > .videoContainer > .statusPictoBackground.skipBackward, .playerView > .videoContainer > .statusPictoBackground.skipForward {
  animation: blink var(--medium-duration) ease-in-out forwards;
}
.playerView > .videoContainer > .statusPictoBackground.pause {
  animation-duration: var(--short-duration);
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  animation-name: fadeIn, pictoGrow;
}
.playerView > .videoContainer > .statusPictoBackground > .pictoElement {
  width: 24px;
}
.playerView > .videoContainer > .statusPictoBackground > .pictoElement > svg {
  fill: var(--player-status-picto-foreground);
  pointer-events: none;
}
.playerView.visibleCursor {
  cursor: default;
}
.playerView.visibleCursor > .videoContainer {
  /* stylelint-disable selector-class-pattern */
}
.playerView.visibleCursor > .videoContainer > .shaka-text-container {
  transform: translateY(-160px);
}
.playerView.visibleCursor > .videoContainer {
  /* stylelint-enable selector-class-pattern */
}
.playerView.visibleCursor > .videoContainer > video::-webkit-media-text-track-container {
  transform: translateY(-160px);
  -webkit-transition: transform var(--short-duration) ease-out;
  transition: transform var(--short-duration) ease-out;
}
.playerView > .backBar {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 40px;
  left: 0;
  margin-top: 75px;
  opacity: 0;
  overflow: visible;
  padding-left: 60px;
  pointer-events: none;
  position: absolute;
  transition: var(--opacity-short);
  z-index: 530;
}
.playerView > .backBar.visible {
  opacity: 1;
  pointer-events: auto;
}
.playerView > .backBar > .pictoElement > svg {
  fill: var(--player-status-picto-foreground);
  filter: drop-shadow(3px 5px 2px rgba(0, 0, 0, 0.3));
  width: 30px;
}

.videoController {
  align-items: stretch;
  background-color: var(--player-controller-background);
  display: flex;
  justify-content: space-between;
  opacity: 0;
  overflow: visible;
  padding: 0 40px;
  pointer-events: none;
  position: relative;
  transition: var(--opacity-short);
  z-index: 550;
}
.videoController:has(.channelZapper) {
  padding-left: 0;
}
.videoController.visible {
  opacity: 1;
  pointer-events: auto;
}
.videoController > .controller {
  flex: 1 1;
  flex-direction: column;
  justify-content: space-evenly;
  overflow: visible;
  position: relative;
}
.videoController > .controller > .textInfo {
  align-items: center;
  display: flex;
  flex-direction: row;
  height: 60px;
  justify-content: space-between;
}
.videoController > .controller > .textInfo > .titlesAndStatus {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto 0 0;
}
.videoController > .controller > .textInfo > .titlesAndStatus.multiline {
  justify-content: flex-start;
}
.videoController > .controller > .textInfo > .titlesAndStatus .title {
  color: var(--player-controller-foreground);
  font: 20px var(--regular-font);
  -webkit-user-select: none;
          user-select: none;
}
.videoController > .controller > .textInfo > .titlesAndStatus > .mainLine {
  align-items: center;
}
.videoController > .controller > .textInfo > .titlesAndStatus > .mainLine > .title {
  font: 24px var(--semibold-font);
  line-height: 30px;
  -webkit-user-select: none;
          user-select: none;
}
.videoController > .controller > .textInfo > .titlesAndStatus > .mainLine > .statusPicto {
  margin: 0 20px;
}
.videoController > .controller > .textInfo > .titlesAndStatus > .mainLine > .statusPicto.live > .recording {
  margin-top: 2px;
}
.videoController > .controller > .textInfo > .titlesAndStatus > .mainLine > .statusPicto.notLive {
  background-color: var(--timeshift);
}
.videoController > .controller > .textInfo > .titlesAndStatus > .mainLine > .liveRecording {
  align-items: center;
}
.videoController > .controller > .textInfo > .titlesAndStatus > .mainLine > .liveRecording > .text {
  color: var(--player-controller-foreground);
  margin-left: 5px;
}
.videoController > .controller > .textInfo > .titlesAndStatus > .mainLine + .title {
  margin-top: 5px;
}
.videoController > .controller > .textInfo > .channelImage {
  height: var(--channel-image-height-u);
  justify-content: center;
  margin-left: -5px;
  margin-right: 3px;
  overflow: visible;
  padding-top: 5px;
  width: var(--channel-image-width-u);
}
.videoController > .controller > .textInfo > .channelImage > img {
  object-fit: scale-down;
  -webkit-user-select: none;
          user-select: none;
}
.videoController > .controller > .textInfo > .channelImage + .titlesAndStatus {
  margin-left: 10px;
}
.videoController > .controller > .textInfo > .rightDetails {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-top: auto;
}
.videoController > .controller > .textInfo > .rightDetails > .rowWrapper {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-bottom: 5px;
}
.videoController > .controller > .textInfo > .rightDetails > .rowWrapper > .parentalGuidance {
  color: var(--tile-parental-guidance-foreground);
  font: 14px var(--bold-font);
}
.videoController > .controller > .textInfo > .rightDetails > .rowWrapper > .parentalGuidance.pictoInfo {
  background-color: var(--tile-hover-foreground-1);
  border-radius: var(--border-radius-tiny-u);
  padding: 3px 6px;
}
.videoController > .controller > .textInfo > .rightDetails > .rowWrapper > .videoQuality {
  align-items: center;
  color: var(--player-controller-foreground);
  font: 14px var(--semibold-font);
}
.videoController > .controller > .textInfo > .rightDetails > .rowWrapper > .videoQuality > div {
  border: 1px solid var(--player-controller-foreground);
  border-radius: var(--border-radius-tiny-u);
  margin-left: 10px;
  padding: 2px 4px;
}
.videoController > .controller > .textInfo > .rightDetails > .rowWrapper > .videoQuality > .leaf {
  height: 25px;
}
.videoController > .controller > .textInfo > .rightDetails > .timeInfo > div {
  align-items: flex-end;
  color: var(--player-controller-foreground);
  font: 20px var(--regular-font);
  -webkit-user-select: none;
          user-select: none;
}
.videoController > .controller > .textInfo > .rightDetails > .timeInfo > div.first {
  color: var(--player-controller-foreground);
}
.videoController > .controller > .textInfo > .rightDetails > .timeInfo > div.first.margin {
  color: var(--player-time-in-margin);
}
.videoController > .controller > .textInfo > .rightDetails > .timeInfo > div.timeSeparator {
  margin: 0 5px;
}
.videoController > .controller > .seekBar {
  align-items: center;
  height: 40px;
  justify-content: center;
}
.videoController > .controller > .buttons {
  align-items: center;
  flex-wrap: wrap;
  height: 50px;
  justify-content: space-between;
  overflow: visible;
}
.videoController > .controller > .buttons > .controlButtonContainer,
.videoController > .controller > .buttons > .infoButtonContainer {
  align-items: center;
}
.videoController > .controller > .buttons > .controlButtonContainer .pictoElement :not(:disabled) svg,
.videoController > .controller > .buttons > .infoButtonContainer .pictoElement :not(:disabled) svg {
  fill: var(--player-controller-foreground);
}
.videoController > .controller > .buttons > .controlButtonContainer .pictoElement:not(.skipPicto),
.videoController > .controller > .buttons > .infoButtonContainer .pictoElement:not(.skipPicto) {
  justify-content: center;
  width: 50px;
}
.videoController > .controller > .buttons > .controlButtonContainer .pictoElement:not(.skipPicto) > svg,
.videoController > .controller > .buttons > .infoButtonContainer .pictoElement:not(.skipPicto) > svg {
  width: 18px;
}
.videoController > .controller > .buttons > .controlButtonContainer > .playerVolumeContainer,
.videoController > .controller > .buttons > .infoButtonContainer > .playerVolumeContainer {
  height: 50px;
}
.videoController > .controller > .buttons > .controlButtonContainer {
  justify-content: flex-start;
}
.videoController > .controller > .buttons > .infoButtonContainer {
  justify-content: flex-end;
}
.videoController .channelZapper + .controller {
  margin-left: 20px;
}

@media screen and (max-width: 1100px) {
  .videoController > .controller > .buttons > .controlButtonContainer > .pictoElement {
    margin-right: 20px;
  }
  .videoController > .controller > .buttons > .controlButtonContainer > .pictoElement.prev {
    margin-left: 20px;
  }
  .videoController > .controller > .buttons > .infoButtonContainer > .pictoElement {
    margin-left: 20px;
  }
}
@media screen and (max-width: 950px) {
  .videoController > .controller > .buttons > .controlButtonContainer > .pictoElement {
    margin-right: 5px;
  }
  .videoController > .controller > .buttons > .controlButtonContainer > .pictoElement.prev {
    margin-left: 5px;
  }
  .videoController > .controller > .buttons > .infoButtonContainer > .pictoElement {
    margin-left: 5px;
  }
}
@media screen and (max-width: 820px) {
  .videoController > .controller > .buttons > .controlButtonContainer,
  .videoController > .controller > .buttons > .infoButtonContainer {
    height: 50px;
  }
  .videoController > .controller > .buttons > .controlButtonContainer > .pictoElement,
  .videoController > .controller > .buttons > .controlButtonContainer > .playerVolumeContainer > .pictoElement,
  .videoController > .controller > .buttons > .infoButtonContainer > .pictoElement,
  .videoController > .controller > .buttons > .infoButtonContainer > .playerVolumeContainer > .pictoElement {
    width: 40px;
  }
  .videoController > .controller > .buttons > .controlButtonContainer > .pictoElement > svg,
  .videoController > .controller > .buttons > .controlButtonContainer > .playerVolumeContainer > .pictoElement > svg,
  .videoController > .controller > .buttons > .infoButtonContainer > .pictoElement > svg,
  .videoController > .controller > .buttons > .infoButtonContainer > .playerVolumeContainer > .pictoElement > svg {
    width: 25px;
  }
  .videoController > .controller > .buttons > .controlButtonContainer > .playerVolumeContainer,
  .videoController > .controller > .buttons > .infoButtonContainer > .playerVolumeContainer {
    height: 40px;
  }
}
@media screen and (max-width: 725px) {
  .videoController > .controller > .buttons > .controlButtonContainer,
  .videoController > .controller > .buttons > .infoButtonContainer {
    height: 45px;
  }
  .videoController > .controller > .buttons > .controlButtonContainer > .pictoElement,
  .videoController > .controller > .buttons > .controlButtonContainer > .playerVolumeContainer > .pictoElement,
  .videoController > .controller > .buttons > .infoButtonContainer > .pictoElement,
  .videoController > .controller > .buttons > .infoButtonContainer > .playerVolumeContainer > .pictoElement {
    width: 35px;
  }
  .videoController > .controller > .buttons > .controlButtonContainer > .pictoElement > svg,
  .videoController > .controller > .buttons > .controlButtonContainer > .playerVolumeContainer > .pictoElement > svg,
  .videoController > .controller > .buttons > .infoButtonContainer > .pictoElement > svg,
  .videoController > .controller > .buttons > .infoButtonContainer > .playerVolumeContainer > .pictoElement > svg {
    width: 20px;
  }
  .videoController > .controller > .buttons > .controlButtonContainer > .playerVolumeContainer,
  .videoController > .controller > .buttons > .infoButtonContainer > .playerVolumeContainer {
    height: 35px;
  }
}

.channelZapper {
  align-items: flex-end;
  display: flex;
  flex-direction: row;
  overflow: visible;
}
.channelZapper > .channelListOpener {
  background-color: var(--accent);
  cursor: pointer;
  height: var(--channel-list-item-height-u);
  margin-bottom: 50px;
  width: 10px;
}
.channelZapper > .channelListOpener.disabled {
  cursor: default;
  opacity: 0;
}
.channelZapper > .channelList {
  align-items: center;
  display: flex;
  flex-direction: column;
}
.channelZapper > .channelList > .pictoElement {
  height: 50px;
  width: 100%;
}
.channelZapper > .channelList > .pictoElement.disabled {
  opacity: 0;
}
.channelZapper > .channelList > .channelContainer {
  height: var(--channel-list-item-height-u);
  width: var(--channel-list-item-width-u);
}
.channelZapper > .channelList > .channelContainer > .channelSlider {
  align-items: center;
  flex-direction: column-reverse;
  overflow: visible;
  transition: transform var(--short-duration) ease-in-out;
  width: 100%;
}
.channelZapper.open {
  height: 100%;
}
.channelZapper.open > .channelList > .channelContainer {
  background-color: var(--player-channel-zapper-background);
  height: 100%;
}

.channelSlider > .channel {
  align-items: center;
  background: no-repeat center center;
  background-size: contain;
  cursor: pointer;
  display: flex;
  height: var(--channel-list-item-height-u);
  justify-content: center;
  position: relative;
  width: var(--channel-list-item-width-u);
}
.channelSlider > .channel.disabled {
  cursor: default;
}
.channelSlider > .channel:hover:not(.disabled) {
  background-color: var(--player-channel-zapper-background-hover);
}
.channelSlider > .channel > .channelImage {
  background-repeat: no-repeat;
  background-size: contain;
  height: var(--channel-image-height-u);
  width: var(--channel-image-width-u);
}
.channelSlider > .channel > .channelName {
  align-items: center;
  color: var(--player-controller-foreground);
  display: flex;
  inset: 0;
  justify-content: center;
  position: absolute;
}

.channelZapper.open > .channelList > .channelContainer > .channelSlider {
  margin-bottom: 50px;
}
.channelZapper.open > .channelList > .channelContainer > .channelSlider > .channel {
  border-bottom: 1px solid var(--separator-light);
}

.progressBar {
  align-items: center;
  height: 30px;
  overflow: visible;
}
.progressBar > .reactiveBackground {
  background-color: transparent;
  height: 30px;
  overflow: visible;
  padding: 10px 0;
  width: 100%;
}
.progressBar > .reactiveBackground > .mainContainer {
  background-color: var(--player-progress-bar-unavailable);
  cursor: not-allowed;
  height: 10px;
  overflow: visible;
  position: relative;
  width: 100%;
}
.progressBar > .reactiveBackground > .mainContainer > .available {
  background-color: var(--player-progress-bar-available);
  display: flex;
  height: 100%;
  overflow: visible;
  position: absolute;
  width: 0;
  z-index: 600;
}
.progressBar > .reactiveBackground > .mainContainer > .buffered {
  background-color: var(--player-progress-bar-buffered);
  display: flex;
  height: 100%;
  pointer-events: none;
  position: absolute;
  width: 0;
  z-index: 610;
}
.progressBar > .reactiveBackground > .mainContainer > .progress {
  background-color: var(--accent);
  display: flex;
  overflow: visible;
  pointer-events: none;
  position: relative;
  width: 0;
  z-index: 620;
}
.progressBar > .reactiveBackground > .mainContainer > .progress > .thumb {
  pointer-events: auto;
  position: absolute;
  right: -13px;
  top: -9px;
  z-index: 630;
}
.progressBar > .reactiveBackground > .mainContainer > .progress > .thumb > svg {
  fill: var(--accent);
  opacity: 0;
  pointer-events: none;
  transform: scale(0);
  transition: var(--opacity-medium), transform var(--short-duration) ease-out;
}
.progressBar > .reactiveBackground > .mainContainer > .progress > .thumb.dragged > svg {
  opacity: 1;
  transform: scale(1);
}
.progressBar > .reactiveBackground > .mainContainer > .timeBadge {
  background-color: var(--player-overlay-background);
  border-radius: var(--border-radius-tiny-u);
  color: var(--player-overlay-foreground-1);
  font: 18px var(--regular-font);
  left: 0;
  padding: 5px 10px;
  position: absolute;
  top: -45px;
  -webkit-user-select: none;
          user-select: none;
}
.progressBar > .reactiveBackground > .mainContainer > .timeBadge.inMargin {
  color: var(--player-time-in-margin);
}
.progressBar > .reactiveBackground:hover > .mainContainer > .progress > .thumb {
  cursor: pointer;
}
.progressBar > .reactiveBackground:hover > .mainContainer > .progress > .thumb > svg {
  opacity: 1;
  transform: scale(1);
}

.progressBar.live > .reactiveBackground > .mainContainer.hoveredGood {
  cursor: pointer;
}
.progressBar.live > .reactiveBackground > .mainContainer.hoveredBad {
  cursor: not-allowed;
}

.options {
  --option-picto-height: 22px;
  align-items: center;
  background-color: var(--player-overlay-background);
  bottom: 50px;
  display: grid;
  grid-template-columns: [picto-start] 30px [picto-end title-start] auto [title-end selection-start] auto [selection-end];
  overflow: visible;
  position: absolute;
  right: 0;
  z-index: 700;
}
.options .pictoElement > svg {
  fill: var(--player-overlay-foreground-1);
  height: var(--option-picto-height);
}
.options .cell {
  cursor: pointer;
  height: 100%;
  padding: 12px 10px;
  width: 100%;
}
.options > .selection {
  display: contents;
}
.options > .selection div {
  -webkit-user-select: none;
          user-select: none;
  z-index: 740;
}
.options > .selection > .pictoElement {
  grid-column: picto-start/picto-end;
}
.options > .selection > .pictoElement > svg {
  transition: transform var(--short-duration) ease-out;
}
.options > .selection:hover > div {
  background-color: var(--player-overlay-background-hover);
}
.options > .selection.highlighted > div {
  background-color: var(--player-overlay-background-active);
}
.options > .selection.highlighted > .pictoElement svg {
  transform: rotate(-180deg);
}
.options > .selection > .selectionTitle {
  font: 16px var(--semibold-font);
  grid-column: title-start/title-end;
}
.options > .selection > .selectionInfo {
  color: var(--player-overlay-foreground-2);
  font: 16px var(--regular-font);
  grid-column: selection-start/selection-end;
}
.options > .selection.greenStreaming {
  display: contents;
}
.options > .selection.greenStreaming > .selectionTitle {
  grid-column: title-start/selection-end;
}
.options > .selection.greenStreaming > .selectionTitle > .leaf {
  border: 1px solid var(--player-overlay-foreground-2);
  border-radius: var(--border-radius-tiny-u);
  height: var(--option-picto-height);
  margin-left: 5px;
}
.options > .selection.greenStreaming > .pictoElement {
  bottom: auto;
  bottom: initial;
  left: auto;
  left: initial;
}
.options > .optionsContainer {
  background-color: var(--player-overlay-background);
  bottom: 0;
  display: grid;
  left: 0;
  grid-template-columns: [picto-start] 30px [picto-end title-start] auto [title-end];
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translateX(0);
  transition: var(--opacity-short), transform var(--short-duration) ease-out;
  z-index: 620;
}
.options > .optionsContainer.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-100%);
}
.options > .optionsContainer > .option {
  display: contents;
}
.options > .optionsContainer > .option:hover > div {
  background-color: var(--player-overlay-background-hover);
}
.options > .optionsContainer > .option .pictoElement {
  grid-column: picto-start/picto-end;
}
.options > .optionsContainer > .option .pictoElement.impaired {
  height: 18px;
}
.options > .optionsContainer > .option > .optionLabel {
  align-items: center;
  color: var(--player-overlay-foreground-1);
  font: 16px var(--regular-font);
  grid-column: title-start/title-end;
}

.playerVolumeContainer {
  align-items: center;
  display: flex;
  position: relative;
}
.playerVolumeContainer > .pictoVolumeDown,
.playerVolumeContainer > .pictoVolumeUp,
.playerVolumeContainer > .pictoVolumeMuted {
  position: absolute;
}
.playerVolumeContainer > .volumeController {
  align-items: center;
  cursor: pointer;
  justify-content: space-around;
  width: 80px;
}
.playerVolumeContainer > .volumeController > .volumeBar {
  background-color: var(--player-controller-foreground-disabled);
  height: 22px;
  opacity: 0.9;
  transform: scale(0.9);
  transition: var(--opacity-short), transform var(--short-duration) ease-out;
  width: 8px;
}
.playerVolumeContainer > .volumeController > .volumeBar.active {
  background-color: var(--player-controller-foreground);
}
.playerVolumeContainer > .volumeController > .volumeBar:hover {
  opacity: 1;
  transform: scale(1);
}

.progressBar.standard > .reactiveBackground > .mainContainer .allowed {
  cursor: pointer;
}
.progressBar.standard > .reactiveBackground > .mainContainer > .available {
  cursor: pointer;
}

.graphRoot{align-items:flex-start;display:flex;flex-direction:column;margin:0 auto 10px}.graphRoot.red{--border-color: #9d0000;--background-color: rgb(255 0 0 / 18%)}.graphRoot.green{--border-color: #009d00;--background-color: rgb(0 255 0 / 18%)}.graphRoot.blue{--border-color: #00009d;--background-color: rgb(0 0 255 / 18%)}.graphRoot.yellow{--border-color: #9d9d00;--background-color: rgb(255 255 0 / 18%)}.graphRoot>.graphTitle{background-color:var(--border-color);border-radius:3px 3px 0 0;color:#fff;font-size:10px;padding:2px 6px}.graphRoot>.graphData{background-color:var(--background-color);border:1px solid var(--border-color);height:100px;margin-inline:auto;width:240px}
.videoCarousel {
  height: 100%;
  pointer-events: none;
  position: absolute;
  width: 100%;
}
.videoCarousel > video {
  background-color: var(--player-background);
  left: 0;
  pointer-events: auto;
  position: absolute;
  transform: translateY(-136px);
  transition: transform var(--medium-duration) ease-in-out;
  width: 100%;
  z-index: -100;
}
.videoCarousel > .mask {
  background-color: var(--background);
  height: 700px;
  position: absolute;
  top: 600px;
  transform: translateY(0);
  transition: transform var(--long-duration) ease-in-out;
  width: 100%;
  z-index: -50;
}
.videoCarousel > .mask.reduced {
  transform: translateY(194px);
}
.videoCarousel > .backBar {
  align-items: flex-end;
  cursor: pointer;
  display: none;
  height: 40px;
  margin: 50px 0 0 50px;
  pointer-events: auto;
}
.videoCarousel > .backBar > .pictoElement {
  background-color: var(--player-controller-foreground);
  border-radius: 50%;
  width: 36px;
}
.videoCarousel > .backBar > .pictoElement > svg {
  fill: var(--player-overlay-foreground-1);
  opacity: 0.7;
  width: 16px;
}
.videoCarousel.fullscreen > .backBar {
  display: flex;
}
.videoCarousel.fullscreen > video {
  transform: translateY(0);
}

.modalDialogDiv.authenticationRequired {
  max-width: 500px;
}
.modalDialogDiv.authenticationRequired > .content > .header {
  padding: 50px var(--modal-inline-padding-u) 0 var(--modal-inline-padding-u);
}
.modalDialogDiv.authenticationRequired > .content > .authenticationRequiredContent {
  align-items: center;
  color: var(--overlay-foreground-1);
  display: flex;
  flex-direction: column;
  font: 16px var(--regular-font);
  padding: 0 var(--modal-inline-padding-u) 30px var(--modal-inline-padding-u);
}
.modalDialogDiv.authenticationRequired > .content > .authenticationRequiredContent > :first-child {
  margin-block: 30px;
}

.modalDialogDiv.avenue {
  width: 60%;
}
.modalDialogDiv.avenue > .content > .avenueView {
  flex: 1 1;
  overflow-y: auto;
}
.modalDialogDiv.avenue > .content > .avenueView > .slider {
  margin-top: 0;
}
.modalDialogDiv.avenue.explore > .content {
  background-color: var(--explorer-background);
  color: var(--explorer-foreground);
}
.modalDialogDiv.avenue.explore > .content .avenueView > .slider > .section:first-child {
  margin-top: 30px;
}
.modalDialogDiv.avenue.explore > .content .channelGroupSection > .header,
.modalDialogDiv.avenue.explore > .content .sectionGrid > .header {
  color: inherit;
}
.modalDialogDiv.avenue.explore > .content .channelGroupSection > .header .sectionTitleContainer,
.modalDialogDiv.avenue.explore > .content .sectionGrid > .header .sectionTitleContainer {
  color: inherit;
}

@media (max-width: 1600px) {
  .modalDialogDiv.avenue {
    width: 80%;
  }
}
@media (max-width: 1400px) {
  .modalDialogDiv.avenue {
    width: 90%;
  }
}
@media (max-width: 1000px) {
  .modalDialogDiv.avenue {
    width: 100%;
  }
}

@keyframes wishlistElasticAppearing {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  66% {
    opacity: 1;
    transform: scale(1.3);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes wishlistElasticDisappearing {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  33% {
    opacity: 1;
    transform: scale(1.3);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}
@keyframes cardTitleSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  30% {
    opacity: 0;
  }
  50% {
    transform: translateY(0);
  }
  100% {
    opacity: 1;
  }
}
.modalContentDiv > .modalDialogDiv.card > .content {
  background-color: var(--card-background);
}
.modalContentDiv > .modalDialogDiv.card > .content > .modalHeader > .pictoElement > svg {
  fill: var(--card-foreground);
}
.modalContentDiv > .modalDialogDiv.card > .content > .modalHeader > .title {
  color: var(--card-foreground);
}

.card {
  --perspective: 1;
  --image-z-translation-u: -1px;
  --image-scale: 2.05;
  --mask-z-translation-u: -1px;
  --mask-scale-x: 2.5;
  --mask-scale-y: 3;
  height: 100%;
  width: min(100%, 1200px);
}
.card > .content > .slider {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100vh;
  /*
   * Horizontal overflow occurs because of the background image and perspective, but it should be hidden
   */
  overflow: hidden auto;
  position: relative;
}
.card > .content > .slider > .backgroundImage {
  animation: fadeIn var(--medium-duration) ease-in forwards;
  height: 100%;
  inset: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: -2;
}
.card > .content > .slider > .backgroundImage.image {
  background-repeat: no-repeat;
  background-size: contain;
  transition: background-image var(--short-duration) ease-out;
}
.card > .content > .slider > .backgroundImage.mask {
  background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.3) 50%, var(--background) 55%);
  z-index: -1;
}
.card > .content > .slider .swipeable + .backgroundImage.mask {
  z-index: 1;
}
.card > .content > .slider > .cover {
  display: none;
  z-index: 0;
}
.card > .content > .slider > .infoAndActionsContainer {
  align-items: flex-end;
  color: var(--text-foreground-1);
  display: flex;
  flex-direction: row;
  margin: 400px 0 20px;
  padding: 0 50px;
  width: 100%;
  z-index: 1;
}
.card > .content > .slider > .infoAndActionsContainer > .infoContainer {
  align-items: flex-start;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  margin-right: 50px;
  overflow: visible;
}
.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .channelImage {
  align-items: center;
  background: no-repeat center left;
  background-size: contain;
  display: flex;
  height: var(--channel-image-height-u);
  justify-content: flex-start;
  margin-right: 20px;
  width: var(--channel-image-width-u);
}
.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .text {
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
  overflow: visible;
  position: relative;
}
.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .text > .favorite {
  left: -34px;
  opacity: 0;
  position: absolute;
  top: 8px;
}
.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .text > .favorite.visible {
  opacity: 1;
}
.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .text > .favorite.appearing {
  animation: wishlistElasticAppearing var(--medium-duration) ease-out forwards;
}
.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .text > .favorite.disappearing {
  animation: wishlistElasticDisappearing var(--medium-duration) ease-out forwards;
}
.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .text > .favorite > svg {
  fill: var(--accent);
  stroke: var(--accent);
}
.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .text > .title {
  align-items: center;
  animation: cardTitleSlideIn var(--short-duration) var(--short-duration) ease-in both;
  display: flex;
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5));
  font: 36px var(--bold-font);
  margin-bottom: 20px;
  text-align: left;
}
.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer {
  display: flex;
  flex-direction: column;
  font: 16px var(--regular-font);
  overflow: visible;
}
.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .programInfo {
  align-items: center;
  color: var(--text-foreground-2);
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
  overflow: visible;
}
.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .programInfo .pictoInfo {
  border-radius: var(--border-radius-tiny-u);
  font-size: 14px;
  padding: 2px 6px;
}
.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .programInfo > div {
  align-items: center;
  display: flex;
  margin-right: 15px;
  overflow: visible;
  position: relative;
}
.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .programInfo > div:not(:last-child):not(.statusPicto)::after {
  background-color: var(--text-foreground-1);
  border-radius: 50%;
  content: "";
  height: 5px;
  margin: 0 5px;
  opacity: 0.7;
  position: absolute;
  right: -15px;
  width: 5px;
}
.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .programInfo > div.languages > .pictoInfo {
  border: 1px solid var(--text-foreground-2);
  color: var(--text-foreground-2);
  font: 14px var(--semibold-font);
}
.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .programInfo > div.languages > .pictoInfo:not(:last-child) {
  margin-right: 5px;
}
.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .programInfo > div.languages > .pictoInfo.impaired {
  height: 25px;
}
.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .programInfo > div.languages > .pictoInfo.impaired > svg {
  fill: var(--text-foreground-2);
  height: 16px;
}
.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .programInfo > div.parentalGuidance.pictoInfo {
  background-color: var(--text-foreground-1);
  color: var(--background);
  font: 15px var(--semibold-font);
  padding: 2px 6px 3px;
}
.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .programInfo > .statusPicto {
  margin-right: 12px;
}
.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .programInfo > .liveRecording {
  margin-left: -10px;
}
.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .programInfo > .liveRecording svg {
  width: 10px;
}
.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .programInfo > .scheduledRecording {
  margin-left: -5px;
}
.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .programInfo > .scheduledRecording > .pictoElement {
  margin-right: 5px;
}
.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .programInfo > .recordError {
  align-items: center;
  cursor: pointer;
  display: flex;
  margin-left: -5px;
}
.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .programInfo > .recordError > .pictoElement > svg {
  width: 20px;
}
.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .programInfo > .recordError > .description {
  align-items: center;
  font: 16px var(--regular-font);
  opacity: 0.8;
  text-decoration: underline;
  transition: var(--opacity-short);
}
.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .programInfo > .recordError:hover > .description {
  opacity: 1;
}
.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .gameInfo > .gameInfoValue {
  font-family: var(--semibold-font);
  margin-left: 5px;
}
.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .tagline {
  font: 18px var(--semibold-font);
  margin: 30px 0 0;
  text-align: left;
}
.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .synopsis {
  font: 18px var(--light-font);
  line-height: 24px;
  margin-top: 10px;
  text-align: justify;
}
.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .gameCopyright {
  font: 12px var(--light-font);
  margin-top: 20px;
  text-align: start;
}
.card > .content > .slider.parallax {
  /*
   * In most cases, content will overflow the modal height, so the scrollbar
   * is displayed right at the beginning to prevent any layout shift
   */
  overflow-y: scroll;
  perspective: calc(var(--perspective) * 1px);
}
.card > .content > .slider.parallax:has(.lockOverlay) {
  overflow: hidden;
}
.card > .content > .slider.parallax > .backgroundImage.image {
  transform: translateZ(var(--image-z-translation-u)) scale(var(--image-scale));
}
.card > .content > .slider.parallax > .backgroundImage.mask {
  transform: translateZ(var(--mask-z-translation-u)) scale(var(--mask-scale-x), var(--mask-scale-y));
}
.card > .content > .slider > .lockOverlay {
  align-items: center;
  background-color: transparent;
  -webkit-backdrop-filter: blur(30px);
          backdrop-filter: blur(30px);
  cursor: pointer;
  display: flex;
  inset: 0;
  justify-content: center;
  position: absolute;
  z-index: 10;
}
.card > .content > .slider > .lockOverlay > .pictoElement > svg {
  width: 64px;
}
.card.portrait .content > .slider > .backgroundImage.image, .card.deeplink .content > .slider > .backgroundImage.image {
  background-position-y: -300px;
  background-size: contain;
}
.card.portrait .content > .slider > .backgroundImage.blurred, .card.deeplink .content > .slider > .backgroundImage.blurred {
  background-size: cover;
  filter: blur(30px) saturate(1.5);
}
.card.portrait .content > .slider > .backgroundImage.mask, .card.deeplink .content > .slider > .backgroundImage.mask {
  background: linear-gradient(to bottom, transparent 20%, var(--background) 60%);
}
.card.portrait .content > .slider > .cover, .card.deeplink .content > .slider > .cover {
  display: block;
  margin: 50px;
}
.card.portrait .content > .slider > .infoAndActionsContainer, .card.deeplink .content > .slider > .infoAndActionsContainer {
  margin: 0 0 20px;
}
.card.portrait .content > .slider > .infoAndActionsContainer > .infoContainer > .header, .card.deeplink .content > .slider > .infoAndActionsContainer > .infoContainer > .header {
  height: auto;
  height: initial;
  margin: 20px 0 10px;
}
.card.portrait .content > .slider > .cover {
  height: var(--tile-portrait-image-height-u);
  width: var(--tile-portrait-image-width-u);
}
.card.deeplink .content > .slider > .cover {
  height: var(--tile-deeplink-image-height-u);
  width: var(--tile-deeplink-image-width-u);
}

@media (max-width: 1200px) and (min-aspect-ratio: 16/9), (min-width: 1200px) and (max-height: 760px) {
  .card > .content > .slider > .backgroundImage.image {
    background-size: cover;
  }
}
@media (max-height: 900px) {
  .card > .content > .slider > .backgroundImage.mask {
    background: linear-gradient(to bottom, transparent 45%, rgba(0, 0, 0, 0.3) 55%, var(--background) 60%);
  }
}
@media (max-height: 800px) {
  .card > .content > .slider > .backgroundImage.mask {
    background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.3) 60%, var(--background) 65%);
  }
}
@media (max-height: 700px) {
  .card > .content > .slider > .backgroundImage.mask {
    background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.3) 70%, var(--background) 75%);
  }
}
@media (max-height: 620px) {
  .card {
    --image-z-translation-u: 0;
    --mask-z-translation-u: 0;
  }
  .card > .content > .slider > .backgroundImage.mask {
    background: linear-gradient(to bottom, transparent 55%, rgba(0, 0, 0, 0.3) 60%, var(--background) 65%);
  }
}

.cardAvenueView {
  background-color: var(--card-background);
  display: flex;
  flex-direction: column;
  z-index: 2;
}
.cardAvenueView > .sectionButtonBar {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-bottom: 10px;
  margin-left: 50px;
  margin-top: 40px;
}
.cardAvenueView > .sectionButtonBar > .tabButton {
  height: 34px;
  margin-right: 20px;
  width: 182px;
}
.cardAvenueView > .sectionOrderBar {
  align-items: center;
  display: flex;
  height: 34px;
  justify-content: flex-end;
  padding-right: 40px;
}

.episode {
  display: flex;
  flex-direction: column;
  overflow: visible;
  pointer-events: auto;
  position: relative;
  z-index: 200;
}
.episode::after {
  border-left: 4px solid var(--accent);
  bottom: 0;
  content: "";
  opacity: 0;
  position: absolute;
  top: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: var(--opacity-short), transform var(--short-duration) ease-out;
  z-index: 300;
}
.episode:hover > .header {
  background-color: var(--tile-background-past-hover);
}
.episode:hover > .header.future {
  background-color: var(--tile-background-future-hover);
}
.episode.expanded::after {
  opacity: 1;
  transform: scaleX(1);
}
.episode.expanded > .header > .actions > .arrow > svg {
  opacity: 0.7;
  transform: scale(0.9) rotate(-180deg);
}
.episode.expanded > .header > .actions > .arrow > svg:hover {
  opacity: 1;
  transform: scale(1) rotate(-180deg);
}
.episode.expanded > .content {
  max-height: 100vh;
  padding: 10px 20px;
}
.episode > .header {
  align-items: center;
  background-color: var(--tile-background-past);
  border-radius: var(--border-radius-medium-u);
  color: var(--text-foreground-1);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  position: relative;
}
.episode > .header.future {
  background-color: var(--tile-background-future);
}
.episode > .header > .actions {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  overflow: visible;
}
.episode > .header > .actions > .watchingStatus {
  height: 34px;
  margin: -3px 0 -3px 20px;
  width: 34px;
}
.episode > .header > .actions > .watchingStatus > svg {
  height: 38px;
  margin: -2px 0 0 -2px;
  width: 38px;
}
.episode > .header > .actions > .watchingStatus > svg > circle {
  stroke-width: 8px;
}
.episode > .header > .actions > .watchingStatus > .pictoElement > svg {
  margin-right: -1px;
  width: 12px;
}
.episode > .header > .actions > .arrow {
  margin-left: 20px;
}
.episode > .header > .actions > .arrow > svg {
  fill: var(--text-foreground-1);
  opacity: 0.7;
  transition-timing-function: ease-out;
  width: 16px;
}
.episode > .header > .actions > .arrow > svg:hover {
  opacity: 1;
  transform: scale(1);
}
.episode > .content {
  display: flex;
  flex-direction: row;
  max-height: 0;
  padding: 0 20px;
  transition: padding var(--short-duration) ease-in-out, max-height var(--short-duration) ease-in-out;
}
.episode > .content > .cover {
  background: no-repeat center center;
  background-size: cover;
}
.episode > .content > .details {
  align-items: flex-start;
  color: var(--text-foreground-1);
  display: flex;
  flex: 1 1;
  flex-direction: column;
  margin: 0 10px;
  z-index: 250;
}
.episode > .content > .details > .date {
  margin: 10px 0;
}
.episode > .content > .details > .programInfo {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.episode > .content > .details > .programInfo .pictoInfo {
  border-radius: var(--border-radius-tiny-u);
  font-size: 14px;
  padding: 2px 6px;
}
.episode > .content > .details > .programInfo > div {
  align-items: center;
  display: flex;
}
.episode > .content > .details > .programInfo > div:not(:last-child):not(.statusPicto)::after {
  background-color: var(--text-foreground-1);
  border-radius: 50%;
  content: "";
  height: 5px;
  margin: 0 5px;
  opacity: 0.7;
  width: 5px;
}
.episode > .content > .details > .programInfo > div.languages > .pictoInfo {
  border: 1px solid var(--text-foreground-1);
}
.episode > .content > .details > .programInfo > div.languages > .pictoInfo:not(:last-child) {
  margin-right: 5px;
}
.episode > .content > .details > .programInfo > div.parentalGuidance.pictoInfo {
  background-color: var(--text-foreground-1);
  color: var(--background);
}
.episode > .content > .details > .synopsis {
  font: 14px var(--regular-font);
  text-align: left;
  margin: 0 0 10px;
}

.seriesSection {
  --navigation-button-size-u: 126;
  --navigation-button-collapsed-position-u: var(--navigation-button-size-u) / 4;
  --navigation-button-expanded-position-u: var(--navigation-button-size-u) / 8;
  --navigation-button-picto-margin-u: var(--navigation-button-collapsed-position-u) / 2;
  display: flex;
  flex-direction: column;
  margin: 30px 0 50px;
  overflow: visible;
  padding: 0 50px;
  pointer-events: auto;
  width: 100%;
}
.seriesSection > .header {
  align-items: center;
  display: flex;
  margin-bottom: 8px;
  padding-right: 20px;
}
.seriesSection > .header > .sectionTitleContainer {
  align-items: center;
  display: flex;
}
.seriesSection > .header > .sectionTitleContainer > .sectionTitle {
  align-items: center;
  color: var(--text-foreground-1);
  font: 18px var(--bold-font);
  margin-left: 5px;
  -webkit-user-select: none;
          user-select: none;
}
.seriesSection > .header > .sectionTitleContainer > .sectionTitle > .episodeCount {
  color: var(--text-foreground-2);
  margin-left: 5px;
}
.seriesSection.placeholder > .header .sectionTitleContainer.noTitle {
  background-color: var(--placeholder-text);
  height: 17px;
  width: 250px;
}
.seriesSection .episodes {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: visible;
  row-gap: 4px;
}

.episode.tv > .header > .clock {
  height: 100%;
  opacity: 0.1;
  position: absolute;
  right: 190px;
}
.episode.tv > .header > .clock > svg {
  aspect-ratio: 1;
  fill: var(--tile-background-clock);
  width: 150px;
}
.episode.tv > .header > .dateAndTitle {
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
  margin-right: auto;
  white-space: nowrap;
}
.episode.tv > .header > .dateAndTitle > .date {
  font: 16px var(--bold-font);
}
.episode.tv > .header > .dateAndTitle > .title {
  font: 16px var(--regular-font);
}
.episode.tv > .header > .actions > .recording {
  width: 38px;
}
.episode.tv > .header > .actions > .recording > svg {
  width: 100%;
}
.episode.tv > .header > .actions > .recording > svg > circle {
  r: 34px;
}
.episode.tv > .content > .cover {
  height: 160px;
  width: 284px;
}
.episode.tv > .content > .details > .programInfo > .statusPicto {
  margin-right: 12px;
}
.episode.tv > .content > .details > .programInfo > .liveRecording {
  margin-left: -10px;
}
.episode.tv > .content > .details > .programInfo > .liveRecording svg {
  width: 10px;
}
.episode.tv > .content > .details > .programInfo > .recordError {
  align-items: center;
  cursor: pointer;
  display: flex;
}
.episode.tv > .content > .details > .programInfo > .recordError > .pictoElement > svg {
  width: 20px;
}
.episode.tv > .content > .details > .programInfo > .recordError > .description {
  align-items: center;
  font: 16px var(--regular-font);
  opacity: 0.8;
  text-decoration: underline;
  transition: var(--opacity-short);
}
.episode.tv > .content > .details > .programInfo > .recordError:hover > .description {
  opacity: 1;
}
.episode.tv > .content > .details > .programInfo > .duration > .real {
  color: var(--recording);
}
.episode.tv > .content > .details > .programInfo > .duration > .separator {
  margin: 0 5px;
}

.seriesSection.placeholder .episode.tv > .header {
  height: 62px;
}
.seriesSection.placeholder .episode.tv > .header > .dateAndTitle.placeholder .date {
  background-color: var(--placeholder-text);
  height: 20px;
  width: 300px;
}
.seriesSection.placeholder .episode.tv > .header > .dateAndTitle.placeholder .title {
  background-color: var(--placeholder-text);
  height: 20px;
  width: 200px;
}

.episode.vod > .header {
  column-gap: 20px;
}
.episode.vod > .header > .title {
  flex-shrink: 1;
  font: 16px var(--bold-font);
  margin-right: auto;
  white-space: nowrap;
}
.episode.vod > .header > .actions {
  color: var(--text-foreground-1);
}
.episode.vod > .header > .actions .availabilityDate {
  font: italic 14px var(--regular-font);
  overflow: visible;
}
.episode.vod > .header > .actions .pricingLink {
  font: 14px var(--bold-font);
  opacity: 1;
  text-decoration: underline;
  transition: var(--opacity-short);
}
.episode.vod > .header > .actions .pricingLink:hover {
  opacity: 0.6;
}
.episode.vod > .content > .cover {
  height: 160px;
  width: 108px;
}
.episode.vod .purchaseStatus {
  color: var(--accent);
  font: 14px var(--semibold-font);
}

.seriesSection.placeholder .episodes > .episode.vod > .header {
  height: 48px;
}
.seriesSection.placeholder .episodes > .episode.vod > .header .empty {
  background-color: var(--placeholder-text);
  height: 20px;
  margin-left: 5px;
  width: 300px;
}
.seriesSection.placeholder .episodes > .episode.vod > .header .pricingLink {
  background-color: var(--placeholder-text);
  height: 20px;
  margin-left: 20px;
  width: 160px;
}

.episode.tv > .header > .clock {
  height: 100%;
  opacity: 0.1;
  position: absolute;
  right: 190px;
}
.episode.tv > .header > .clock > svg {
  aspect-ratio: 1;
  fill: var(--tile-background-clock);
  width: 150px;
}
.episode.tv > .header > .dateAndTitle {
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
  margin-right: auto;
  white-space: nowrap;
}
.episode.tv > .header > .dateAndTitle > .date {
  font: 16px var(--bold-font);
}
.episode.tv > .header > .dateAndTitle > .title {
  font: 16px var(--regular-font);
}
.episode.tv > .header > .actions > .recording {
  width: 38px;
}
.episode.tv > .header > .actions > .recording > svg {
  width: 100%;
}
.episode.tv > .header > .actions > .recording > svg > circle {
  r: 34px;
}
.episode.tv > .content > .cover {
  height: 160px;
  width: 284px;
}
.episode.tv > .content > .details > .programInfo > .statusPicto {
  margin-right: 12px;
}
.episode.tv > .content > .details > .programInfo > .liveRecording {
  margin-left: -10px;
}
.episode.tv > .content > .details > .programInfo > .liveRecording svg {
  width: 10px;
}
.episode.tv > .content > .details > .programInfo > .recordError {
  align-items: center;
  cursor: pointer;
  display: flex;
}
.episode.tv > .content > .details > .programInfo > .recordError > .pictoElement > svg {
  width: 20px;
}
.episode.tv > .content > .details > .programInfo > .recordError > .description {
  align-items: center;
  font: 16px var(--regular-font);
  opacity: 0.8;
  text-decoration: underline;
  transition: var(--opacity-short);
}
.episode.tv > .content > .details > .programInfo > .recordError:hover > .description {
  opacity: 1;
}
.episode.tv > .content > .details > .programInfo > .duration > .real {
  color: var(--recording);
}
.episode.tv > .content > .details > .programInfo > .duration > .separator {
  margin: 0 5px;
}

.episode.vod > .header {
  column-gap: 20px;
}
.episode.vod > .header > .title {
  flex-shrink: 1;
  font: 16px var(--bold-font);
  margin-right: auto;
  white-space: nowrap;
}
.episode.vod > .header > .actions {
  color: var(--text-foreground-1);
}
.episode.vod > .header > .actions .availabilityDate {
  font: italic 14px var(--regular-font);
  overflow: visible;
}
.episode.vod > .header > .actions .pricingLink {
  font: 14px var(--bold-font);
  opacity: 1;
  text-decoration: underline;
  transition: var(--opacity-short);
}
.episode.vod > .header > .actions .pricingLink:hover {
  opacity: 0.6;
}
.episode.vod > .content > .cover {
  height: 160px;
  width: 108px;
}
.episode.vod .purchaseStatus {
  color: var(--accent);
  font: 14px var(--semibold-font);
}

@charset "UTF-8";
.credits {
  flex-wrap: wrap;
  font: 16px var(--regular-font);
  text-align: left;
}
.credits > span {
  display: inline-block;
  font: 16px var(--light-font);
  position: relative;
}
.credits > span.label {
  color: var(--text-foreground-2);
  font: 16px var(--regular-font);
  margin-right: 5px;
  white-space: nowrap;
}
.credits > span.cast {
  color: var(--text-foreground-1);
}
.credits > span.cast::before {
  background-color: var(--cast-underline);
  bottom: 0;
  content: "";
  height: 2px;
  position: absolute;
  width: 100%;
}
.credits > span.cast:not(:last-child)::before {
  width: 95%;
}
.credits > span.cast:not(:last-child)::after {
  content: ", ";
}
.credits > span.cast:hover {
  opacity: 1;
}
.credits > span.cast:hover::before {
  height: 3px;
}
.credits > span.nocast {
  opacity: 0.8;
}

@keyframes closeButtonSlideDown {
  0% {
    opacity: 0;
    transform: translateY(calc(var(--fullscreen-exit-margin) * -1));
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.gameSlideshow {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.gameSlideshow > .gameImage {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: var(--opacity-short);
  width: 100%;
}
.gameSlideshow > .gameImage.selected {
  opacity: 1;
}
.gameSlideshow > button.imageNav {
  align-items: center;
  background-color: rgba(255, 255, 255, 0.02);
  border: none;
  cursor: pointer;
  display: flex;
  height: 370px;
  justify-content: center;
  opacity: 0.8;
  position: absolute;
  top: 0;
  transition: var(--opacity-short);
}
.gameSlideshow > button.imageNav.previous {
  left: 0;
}
.gameSlideshow > button.imageNav.next {
  right: 0;
}
.gameSlideshow > button.imageNav:hover {
  background-color: rgba(255, 255, 255, 0.05);
  opacity: 1;
}
.gameSlideshow > .fullscreenExit {
  --fullscreen-exit-margin: 40px;
  animation: closeButtonSlideDown var(--short-duration) var(--short-duration) ease-in both;
  position: absolute;
  right: var(--fullscreen-exit-margin);
  top: var(--fullscreen-exit-margin);
}
.gameSlideshow.fullscreen > button.imageNav {
  height: 100%;
}
.gameSlideshow.fullscreen > .gameSlideshowNavigator {
  height: 100%;
  padding-bottom: 20px;
  right: revert;
  width: 100%;
}

.gameSlideshowNavigator {
  align-items: flex-end;
  display: flex;
  height: 450px;
  justify-content: center;
  pointer-events: none;
  position: absolute;
  right: 50px;
  z-index: 2;
}
.gameSlideshowNavigator .container {
  background-color: var(--background);
  border-radius: 40px;
  display: flex;
  gap: 10px;
  padding: 10px;
}
.gameSlideshowNavigator .container > button {
  background-color: var(--overlay-foreground-2);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  height: 10px;
  padding: 0;
  pointer-events: all;
  width: 10px;
}
.gameSlideshowNavigator .container > button:hover {
  background-color: var(--overlay-foreground-1);
}
.gameSlideshowNavigator .container > button.selected {
  background-color: var(--accent);
  cursor: revert;
}

.modalDialogDiv.externalContent {
  height: 100%;
  position: relative;
  width: 1200px;
}
.modalDialogDiv.externalContent iframe {
  border: 0;
  height: 100%;
  width: 100%;
}
.modalDialogDiv.externalContent .loader {
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  position: absolute;
  top: 50%;
}

.modalDialogDiv .gameProfileSelect {
  display: flex;
  gap: 30px;
  margin: 50px;
  place-content: center;
}

button.profileBtn {
  align-items: center;
  border: none;
  background-color: transparent;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  margin: 0;
  padding: 0;
}
button.profileBtn.selected img.profileAvatar {
  border-color: var(--accent);
}
button.profileBtn:hover img.profileAvatar {
  border-color: var(--accent-light);
}
button.profileBtn img.profileAvatar {
  border: 4px solid transparent;
  border-radius: 10px;
  height: 100px;
  width: 100px;
}
button.profileBtn .profileNickname {
  color: #fff;
  padding: 10px;
}

.modalDialogDiv.keyboardShortcuts > .content {
  color: var(--overlay-foreground-1);
  font: 16px var(--regular-font);
}
.modalDialogDiv.keyboardShortcuts > .content > .keyboardShortcutsContent {
  flex: 1 1;
  overflow-y: auto;
  padding: 0 50px;
}
.modalDialogDiv.keyboardShortcuts > .content > .keyboardShortcutsContent > .column {
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.modalDialogDiv.keyboardShortcuts > .content > .keyboardShortcutsContent > .column > .sectionTitle {
  font: 18px var(--semibold-font);
  margin: 20px 0 10px 100px;
}
.modalDialogDiv.keyboardShortcuts > .content > .keyboardShortcutsContent > .column > ul {
  display: grid;
  flex-direction: column;
  grid-template-columns: [shortcut-start] 110px [shortcut-end action-start] auto [action-end];
  list-style: none;
  margin: 0;
  overflow: visible;
  padding: 0 0 20px;
  grid-row-gap: 6px;
  row-gap: 6px;
}
.modalDialogDiv.keyboardShortcuts > .content > .keyboardShortcutsContent > .column > ul > li {
  display: contents;
}
.modalDialogDiv.keyboardShortcuts > .content > .keyboardShortcutsContent > .column > ul > li:not(:last-child) {
  margin-bottom: 6px;
}
.modalDialogDiv.keyboardShortcuts > .content > .keyboardShortcutsContent > .column > ul > li > .shortcut {
  grid-column: shortcut-start/shortcut-end;
  margin-left: auto;
  overflow: visible;
}
.modalDialogDiv.keyboardShortcuts > .content > .keyboardShortcutsContent > .column > ul > li > .shortcut > span {
  background-color: var(--keyboard-shortcut-background);
  border-radius: 8px;
  box-shadow: 0 1px 2px 0 var(--shadow);
  color: var(--keyboard-shortcut-foreground);
  font-family: var(--monospace);
  justify-content: center;
  min-width: 26px;
  overflow: visible;
  padding: 5px 10px;
  position: relative;
}
.modalDialogDiv.keyboardShortcuts > .content > .keyboardShortcutsContent > .column > ul > li > .shortcut > span:not(:last-child) {
  margin-right: 15px;
}
.modalDialogDiv.keyboardShortcuts > .content > .keyboardShortcutsContent > .column > ul > li > .shortcut > span:not(:last-child)::after {
  content: "+";
  position: absolute;
  right: -12px;
}
.modalDialogDiv.keyboardShortcuts > .content > .keyboardShortcutsContent > .column > ul > li > .action {
  align-items: center;
  grid-column: action-start/action-end;
  margin-left: 10px;
}

.modalDialogDiv.legalNotice > .content > .legalContent {
  align-items: flex-start;
  display: flex;
  flex: 1 1;
  flex-direction: column;
  font: 16px var(--regular-font);
  max-width: 500px;
  overflow-y: auto;
  padding: 20px var(--modal-inline-padding-u) 50px;
  text-align: left;
  white-space: pre-line;
}
.modalDialogDiv.legalNotice.dark > .content > .legalContent {
  color: var(--overlay-foreground-1);
}
.modalDialogDiv.legalNotice.light > .content > .legalContent {
  color: var(--overlay-background);
}

.modalDialogDiv.message > .content > .header {
  padding-top: 50px;
}
.modalDialogDiv.message > .content > .messageContainer {
  align-items: center;
  color: var(--overlay-foreground-1);
  display: flex;
  flex-direction: column;
  font: 16px var(--regular-font);
  padding: 20px var(--modal-inline-padding-u) 30px;
}
.modalDialogDiv.message > .content > .messageContainer > .messageContent {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  margin-bottom: 50px;
}

.modalDialogDiv.newVersion > .content > .header {
  padding-top: 50px;
}
.modalDialogDiv.newVersion > .content > .newVersionContent {
  align-items: center;
  color: var(--overlay-foreground-1);
  display: flex;
  flex-direction: column;
  font: 16px var(--regular-font);
  padding: 20px var(--modal-inline-padding-u) 30px;
}
.modalDialogDiv.newVersion > .content > .newVersionContent > :first-child {
  margin-bottom: 20px;
}

.modalDialogDiv.npvrHelp {
  max-height: 650px;
  width: 60%;
}
.modalDialogDiv.npvrHelp > .content div,
.modalDialogDiv.npvrHelp > .content span,
.modalDialogDiv.npvrHelp > .content ul,
.modalDialogDiv.npvrHelp > .content li {
  color: var(--overlay-foreground-1);
  font: 16px var(--regular-font);
}
.modalDialogDiv.npvrHelp > .content > .helpContent {
  flex: 1 1;
  flex-direction: column;
  overflow-y: auto;
  padding: 10px var(--modal-inline-padding-u) 30px;
}
.modalDialogDiv.npvrHelp > .content > .helpContent > .sectionTitle {
  font: 18px var(--semibold-font);
  margin: 30px 0 15px;
}
.modalDialogDiv.npvrHelp > .content > .helpContent > ul {
  display: flex;
  flex-direction: column;
  list-style: square inside none;
  margin: 0;
  padding: 0;
}
.modalDialogDiv.npvrHelp > .content > .helpContent > ul.noBullet {
  list-style: none;
}
.modalDialogDiv.npvrHelp > .content > .helpContent > ul > li {
  display: list-item;
  margin-bottom: 10px;
  text-align: left;
}
.modalDialogDiv.npvrHelp > .content > .helpContent > ul > li > div {
  align-items: center;
  display: flex;
  flex-direction: row;
}
.modalDialogDiv.npvrHelp > .content > .helpContent > ul > li > div > .buttonFX > .disabled {
  background-color: transparent;
}
.modalDialogDiv.npvrHelp > .content > .helpContent > ul > li > div > .hint {
  all: unset;
  font: 16px var(--regular-font);
  margin-left: 10px;
}

.modalDialogDiv.parentalControl > .content > .parentalControlContent {
  color: var(--overlay-foreground-1);
  display: block;
  flex: 1 1 auto;
  font: 16px var(--regular-font);
  min-width: 680px;
  overflow-y: auto;
  padding: 0 var(--modal-inline-padding-u) 40px;
}
.modalDialogDiv.parentalControl > .content > .parentalControlContent > .pcMainMenu {
  align-items: center;
  display: grid;
  grid-gap: 35px 10px;
  gap: 35px 10px;
  grid-template-columns: 2fr 1fr;
}
.modalDialogDiv.parentalControl > .content > .parentalControlContent > .pcMainMenu > .pcSectionLabel {
  font: 22px var(--semibold-font);
  grid-column: 1/span 2;
  margin-top: 30px;
}
.modalDialogDiv.parentalControl > .content > .parentalControlContent > .pcMainMenu .pcHint {
  font: 14px var(--light-font);
  margin-top: 5px;
  opacity: 0.7;
  text-align: start;
}
.modalDialogDiv.parentalControl > .content > .parentalControlContent > .pcMainMenu > .pcSectionHint {
  grid-column: 1/span 2;
  margin-top: 0;
  margin-bottom: 30px;
}
.modalDialogDiv.parentalControl > .content > .parentalControlContent > .pcMainMenu > .pcLabel {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
}
.modalDialogDiv.parentalControl > .content > .parentalControlContent > .pcMainMenu > .pcLabel > .pcSelectedValue {
  font: 15px var(--light-font);
  margin-top: 10px;
}
.modalDialogDiv.parentalControl > .content > .parentalControlContent > .pcMainMenu > .pcValue {
  margin-left: auto;
}
.modalDialogDiv.parentalControl > .content > .parentalControlContent > .pcMainMenu .parentalGuidance {
  background-color: var(--text-foreground-1);
  border-radius: var(--border-radius-huge-u);
  color: var(--background);
  font: 20px var(--bold-font);
  padding: 5px 10px;
}
.modalDialogDiv.parentalControl > .content > .parentalControlContent > .pcVideoMinAgeSelection {
  align-items: center;
  display: flex;
  flex-direction: column;
  row-gap: 50px;
}
.modalDialogDiv.parentalControl > .content > .parentalControlContent > .pcVideoMinAgeSelection > .pcExplanations {
  white-space: pre;
}

.pcVideoMinAgeSelection {
  --item-size: 64px;
  --margin-u: 30px;
  --border-u: 4px;
  --not-selected-opacity: .6;
  --selected-scale: 1.4;
  overflow: visible;
}
.pcVideoMinAgeSelection > .pcItemsWrapper {
  --selected-index: 0;
  column-gap: var(--margin-u);
  overflow: visible;
  position: relative;
}
.pcVideoMinAgeSelection > .pcItemsWrapper::before {
  background-color: var(--overlay-foreground-1);
  content: "";
  height: var(--border-u);
  left: calc(var(--item-size) - var(--border-u) * 2);
  pointer-events: none;
  position: absolute;
  top: calc(var(--item-size) / 2 - 10px);
  transition: width var(--short-duration) ease-out;
  width: calc((var(--margin-u) + var(--item-size)) * var(--selected-index));
  z-index: 0;
}
.pcVideoMinAgeSelection > .pcItemsWrapper::after {
  background-color: var(--overlay-foreground-1);
  content: "";
  height: var(--border-u);
  right: calc(var(--item-size) - var(--border-u) * 2);
  opacity: 0.6;
  pointer-events: none;
  position: absolute;
  top: calc(var(--item-size) / 2 - 10px);
  transition: width var(--short-duration) ease-out;
  width: calc(100% - var(--item-size));
  z-index: 0;
}
.pcVideoMinAgeSelection > .pcItemsWrapper > .pcItem {
  align-items: center;
  display: flex;
  flex-direction: column;
  overflow: visible;
  row-gap: 20px;
  width: var(--item-size);
}
.pcVideoMinAgeSelection > .pcItemsWrapper > .pcItem:not(.selected) {
  cursor: pointer;
}
.pcVideoMinAgeSelection > .pcItemsWrapper > .pcItem.included > .pictoElementBg > .pictoElement, .pcVideoMinAgeSelection > .pcItemsWrapper > .pcItem.selected > .pictoElementBg > .pictoElement {
  opacity: 1;
}
.pcVideoMinAgeSelection > .pcItemsWrapper > .pcItem.included > .pictoElementBg > .pictoElement > svg, .pcVideoMinAgeSelection > .pcItemsWrapper > .pcItem.selected > .pictoElementBg > .pictoElement > svg {
  opacity: 1;
}
.pcVideoMinAgeSelection > .pcItemsWrapper > .pcItem:hover:not(.selected) > .pictoElementBg > .pictoElement {
  border-color: var(--accent);
  opacity: 1;
}
.pcVideoMinAgeSelection > .pcItemsWrapper > .pcItem > .pictoElementBg {
  background-color: var(--overlay-background);
  border-radius: 50%;
  overflow: visible;
  z-index: 1;
}
.pcVideoMinAgeSelection > .pcItemsWrapper > .pcItem > .pictoElementBg > .pictoElement {
  background-color: var(--overlay-background);
  border: var(--border-u) solid var(--overlay-foreground-1);
  border-radius: 50%;
  opacity: var(--not-selected-opacity);
  padding-inline: 20px;
  z-index: 1;
}
.pcVideoMinAgeSelection > .pcItemsWrapper > .pcItem > .pictoElementBg > .pictoElement > svg {
  fill: var(--overlay-foreground-1);
  opacity: 0;
}
.pcVideoMinAgeSelection > .pcItemsWrapper > .pcItem.selected .pictoElement {
  transform: scale(var(--selected-scale));
}
.pcVideoMinAgeSelection > .pcItemsWrapper > .pcItem > .pcLabel {
  font-size: 14px;
}
.pcVideoMinAgeSelection > .pcVideoMinAgeHint {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--border-radius-big-u);
  column-gap: 20px;
  display: flex;
  padding: 10px 20px;
}

.modalDialogDiv.pin > .content > .modalHeader > .pictoElement {
  margin: 10px 10px -10px 0;
}
.modalDialogDiv.pin > .content > .pinContent {
  align-items: center;
  color: var(--overlay-foreground-1);
  display: flex;
  flex-direction: column;
  font: 16px var(--regular-font);
  min-width: 680px;
  padding: 0 var(--modal-inline-padding-u) 40px;
  row-gap: 30px;
}
.modalDialogDiv.pin > .content > .pinContent > hr {
  opacity: 0.4;
  width: 100%;
}
.modalDialogDiv.pin > .content > .pinContent > .buttonFX {
  margin-top: 10px;
}
.modalDialogDiv.pin > .content > .pinContent > .pinError {
  color: var(--error);
  height: 24px;
  margin-top: -10px;
}
.modalDialogDiv.pin > .content > .pinContent > .parentalGuidance {
  background-color: var(--text-foreground-1);
  border-radius: var(--border-radius-huge-u);
  color: var(--background);
  font: 24px var(--bold-font);
  padding: 10px;
}

.digitsWrapper {
  --border-size-u: 4px;
  align-items: center;
  column-gap: 20px;
  display: flex;
  justify-content: center;
  padding: var(--border-size-u);
}
.digitsWrapper .digit {
  align-items: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  cursor: pointer;
  font: 32px var(--bold-font);
  height: 60px;
  justify-content: center;
  line-height: 30px;
  padding: 10px 15px;
  -webkit-user-select: none;
          user-select: none;
  width: 50px;
}
.digitsWrapper .digit.focused {
  background-color: rgba(255, 255, 255, 0.2);
  outline: var(--border-size-u) solid var(--accent);
}
.digitsWrapper .digit:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.avatarSelectContainer {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin: 4rem 2rem;
  width: 720px;
  place-content: center;
}

.modalDialogDiv.profileEditor {
  max-width: 1000px;
}
.modalDialogDiv.profileEditor .profileEditorContainer {
  align-items: center;
  color: var(--overlay-foreground-1);
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
  margin-block: 3.4rem 4rem;
  overflow-y: scroll;
  padding-inline: 3rem;
  row-gap: 2rem;
}
.modalDialogDiv.profileEditor .profileEditorContainer .profileEditorAvatarAndName {
  align-items: center;
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
.modalDialogDiv.profileEditor .profileEditorContainer .profileEditorAvatarAndName > .profileEditorAvatar > img {
  border: none;
  margin: 0;
  padding: 0;
}
.modalDialogDiv.profileEditor .profileEditorContainer .profileEditorAvatarAndName > .selectAvatarLink {
  color: var(--overlay-foreground-1);
}
.modalDialogDiv.profileEditor .profileEditorContainer .profileEditorAvatarAndName > .profileEditorName {
  background-color: rgba(255, 255, 255, 0.1);
  border: 0;
  border-radius: var(--border-radius-small-u);
  color: var(--overlay-foreground-1);
  font-size: 24px;
  margin-top: 2rem;
  padding: 1rem;
  width: 18rem;
}
.modalDialogDiv.profileEditor .profileEditorContainer .profileSettings {
  align-items: center;
  display: grid;
  grid-gap: 1rem;
  gap: 1rem;
  grid-template-columns: 1fr 280px;
  margin-block: 3rem;
}
.modalDialogDiv.profileEditor .profileEditorContainer .profileSettings .expert {
  display: none;
}
.modalDialogDiv.profileEditor .profileEditorContainer .profileSettings.expertMode .expert {
  display: flex;
}
.modalDialogDiv.profileEditor .profileEditorContainer .profileSettings > .sectionTitle {
  font: 24px var(--bold-font);
  grid-column: span 2;
}
.modalDialogDiv.profileEditor .profileEditorContainer .profileSettings > .settingsLabel {
  align-items: center;
}
.modalDialogDiv.profileEditor .profileEditorContainer .profileSettings > .settingsLabel.column {
  align-items: flex-start;
  flex-direction: column;
}
.modalDialogDiv.profileEditor .profileEditorContainer .profileSettings > .settingsLabel > .value {
  font: 16px var(--semibold-font);
  margin-left: 10px;
  margin-top: -1px;
}
.modalDialogDiv.profileEditor .profileEditorContainer .profileSettings > .settingsLabel .leaf {
  border: 1px solid var(--text-foreground-1);
  border-radius: var(--border-radius-tiny-u);
  height: 22px;
  margin-left: 5px;
  opacity: 0.7;
  width: 34px;
}
.modalDialogDiv.profileEditor .profileEditorContainer .profileSettings > .settingsLabel > .hint {
  font: 14px var(--light-font);
  margin-top: 5px;
  opacity: 0.7;
  text-align: start;
}
.modalDialogDiv.profileEditor .profileEditorContainer .profileSettings .settingsValue {
  align-items: center;
  font-family: var(--semibold-font);
  justify-self: end;
  margin-left: 10px;
  overflow: visible;
}
.modalDialogDiv.profileEditor .profileEditorContainer .profileSettings .settingsValue.slider {
  margin: 15px 0;
}
.modalDialogDiv.profileEditor .profileEditorContainer .profileSettings .settingsValue > .pictoElement > svg {
  width: 20px;
}
.modalDialogDiv.profileEditor .profileEditorContainer .profileSettings .settingsValue > .pictoElement.speaker.waves {
  margin: 0 10px 0 -27px;
}
.modalDialogDiv.profileEditor .profileEditorContainer > .deleteAvatarLink {
  color: var(--overlay-foreground-2);
}

.linkButton {
  background-color: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  opacity: 0.8;
  text-decoration: underline;
}
.linkButton:hover {
  opacity: 1;
}
.linkButton.disabled {
  cursor: default;
  opacity: 0.4;
}

.slider {
  --slider-size-u: 6px;
  overflow: visible;
  position: relative;
}
.slider > input[type=range] {
  -webkit-appearance: none;
  background-color: transparent;
  box-sizing: border-box;
  overflow: visible;
  width: 150px;
}
.slider > input[type=range]::-webkit-slider-runnable-track {
  background-color: var(--slider-background);
  border-radius: 3px;
  cursor: pointer;
  height: var(--slider-size-u);
  width: 100%;
}
.slider > input[type=range]::-moz-range-track {
  background-color: var(--slider-background);
  border-radius: 3px;
  cursor: pointer;
  height: var(--slider-size-u);
  width: 100%;
}
.slider > input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: var(--slider-thumb);
  border-radius: 50%;
  cursor: pointer;
  height: calc(2 * var(--slider-size-u));
  margin-top: calc(var(--slider-size-u) / -2);
  width: calc(2 * var(--slider-size-u));
}
.slider > input[type=range]::-webkit-slider-thumb:hover {
  background-color: var(--slider-thumb-hover);
}
.slider > input[type=range]::-moz-range-thumb {
  background-color: var(--slider-thumb);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  height: calc(2 * var(--slider-size-u));
  margin-top: calc(var(--slider-size-u) / -2);
  width: calc(2 * var(--slider-size-u));
}
.slider > input[type=range]::-moz-range-thumb:hover {
  background-color: var(--slider-thumb-hover);
}
.slider > input[type=range]::-moz-range-progress {
  background-color: currentColor;
  border-radius: 50%;
  cursor: pointer;
  height: var(--slider-size-u);
}
.slider > .ticks {
  justify-content: space-between;
  overflow: visible;
  padding: 0 3px 0 7px;
  position: absolute;
  top: calc(2 * (var(--slider-size-u) + 1px));
  width: 150px;
  z-index: -1;
}
.slider > .ticks > .tick {
  background: var(--slider-tick);
  color: var(--slider-tick-value);
  font: 10px var(--regular-font);
  justify-content: center;
  overflow: visible;
  width: 1px;
  height: var(--slider-size-u);
  line-height: calc(var(--slider-size-u) * 4 + 2px);
}
.slider > .currentValue {
  font: 16px var(--semibold-font);
  justify-content: flex-end;
  width: 60px;
}

@keyframes splashscreenImage {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  25% {
    opacity: 1;
    transform: scale(1.2);
  }
  45% {
    opacity: 1;
    transform: scale(1);
  }
  80% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}
@keyframes splashscreenName {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
  45% {
    opacity: 1;
    transform: scale(1.2);
  }
  80% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}
.modalContentDiv > .modalDialogDiv.profileSplashscreen {
  --animation-duration: 2s;
}
.modalContentDiv > .modalDialogDiv.profileSplashscreen > .content {
  background-color: transparent;
  overflow: visible;
}
.modalContentDiv > .modalDialogDiv.profileSplashscreen .profileSplashscreenMessageContent {
  align-items: center;
  display: flex;
  flex-direction: column;
  overflow: visible;
  row-gap: 4rem;
}
.modalContentDiv > .modalDialogDiv.profileSplashscreen .profileSplashscreenMessageContent button {
  overflow: visible;
}
.modalContentDiv > .modalDialogDiv.profileSplashscreen .profileSplashscreenMessageContent button .avatarImage {
  transform-origin: center;
}
.modalContentDiv > .modalDialogDiv.profileSplashscreen .profileSplashscreenMessageContent button .avatarName {
  display: flex;
  max-width: revert;
}
.modalContentDiv > .modalDialogDiv.profileSplashscreen .profileSplashscreenMessageContent.animated .avatarImage {
  animation: splashscreenImage var(--animation-duration) cubic-bezier(0.04, 0.48, 0.55, 0.98) both;
}
.modalContentDiv > .modalDialogDiv.profileSplashscreen .profileSplashscreenMessageContent.animated .avatarName {
  animation: splashscreenName var(--animation-duration) cubic-bezier(0.04, 0.48, 0.55, 0.98) both;
}

.modalContentDiv > .modalDialogDiv.profiles {
  --btn-border-u: 4px;
  min-height: 400px;
  min-width: 600px;
}
.modalContentDiv > .modalDialogDiv.profiles > .content {
  background-color: transparent;
}
.modalContentDiv > .modalDialogDiv.profiles .loader {
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  position: absolute;
  top: 50%;
}
.modalContentDiv > .modalDialogDiv.profiles .profilesContent {
  align-items: center;
  color: var(--overlay-foreground-1);
  display: flex;
  flex-direction: column;
  row-gap: 5rem;
}
.modalContentDiv > .modalDialogDiv.profiles .profilesContent .profilesHeader {
  font: 36px var(--semibold-font);
  margin-block: 1rem;
}
.modalContentDiv > .modalDialogDiv.profiles .profilesContent .profilesList {
  align-items: flex-start;
  column-gap: 4rem;
  display: flex;
  justify-content: space-between;
}
.modalContentDiv > .modalDialogDiv.profiles .profilesContent .profilesList > .actionBtn {
  align-items: center;
  background-color: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  height: calc(var(--avatar-size-big-u) + 2 * var(--btn-border-u));
  justify-content: center;
  width: calc(var(--avatar-size-big-u) + 2 * var(--btn-border-u));
}
.modalContentDiv > .modalDialogDiv.profiles .profilesContent .profilesList > .actionBtn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.modalContentDiv > .modalDialogDiv.profiles .profilesContent .profilesList > .actionBtn:disabled {
  background-color: rgba(255, 255, 255, 0.05);
  cursor: revert;
}

@charset "UTF-8";
.modalDialogDiv.vodPurchase {
  max-width: 600px;
}
.modalDialogDiv.vodPurchase > .content .titles {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  display: flex;
  flex: 1 0;
  flex-direction: column;
  font: 36px var(--bold-font);
  padding: 30px;
  text-align: left;
}
.modalDialogDiv.vodPurchase > .content .titles > .subtitle {
  font: 24px var(--regular-font);
}
.modalDialogDiv.vodPurchase > .content .invalidContent {
  font: 20px var(--semibold-font);
  justify-content: center;
  padding: 50px;
}
.modalDialogDiv.vodPurchase > .content .validation {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
  overflow-y: auto;
  padding: 30px 30px 0;
}
.modalDialogDiv.vodPurchase > .content .validation > .summary {
  align-items: center;
  display: flex;
  flex-direction: row;
  font: 24px var(--regular-font);
}
.modalDialogDiv.vodPurchase > .content .validation > .summary > .price {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
}
.modalDialogDiv.vodPurchase > .content .validation > .summary > .price.discount {
  background-color: var(--purchase-discount-background);
  border-radius: var(--border-radius-tiny-u);
  color: var(--purchase-discount-foreground);
  font: 20px var(--semibold-font);
  padding: 2px 10px;
}
.modalDialogDiv.vodPurchase > .content .validation > .summary > .price.struck {
  margin-left: 10px;
  text-decoration: line-through;
}
.modalDialogDiv.vodPurchase > .content .validation > .details {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font: 16px var(--regular-font);
  margin-top: 5px;
  opacity: 0.7;
  text-align: left;
}
.modalDialogDiv.vodPurchase > .content .validation > .details .pictoInfo {
  border-radius: var(--border-radius-tiny-u);
  font-size: 12px;
  padding: 2px 6px;
}
.modalDialogDiv.vodPurchase > .content .validation > .details > div {
  align-items: center;
  display: flex;
}
.modalDialogDiv.vodPurchase > .content .validation > .details > div:not(:last-child)::after {
  border-radius: 50%;
  content: "";
  height: 5px;
  margin: 0 5px;
  opacity: 0.7;
  width: 5px;
}
.modalDialogDiv.vodPurchase > .content .validation > .details > div.languages > .pictoInfo {
  border-style: solid;
  border-width: 1px;
  font: 14px var(--semibold-font);
  height: 24px;
}
.modalDialogDiv.vodPurchase > .content .validation > .details > div.languages > .pictoInfo:not(:last-child) {
  margin-right: 5px;
}
.modalDialogDiv.vodPurchase > .content .validation > .details > div.languages > .pictoInfo.impaired {
  padding-inline: 16px;
}
.modalDialogDiv.vodPurchase > .content .validation > .details > div.languages > .pictoInfo > svg {
  width: 20px;
}
.modalDialogDiv.vodPurchase > .content .validation > .details > div.parentalGuidance.pictoInfo {
  font: 15px var(--semibold-font);
}
.modalDialogDiv.vodPurchase > .content .validation > .validity {
  flex-direction: column;
  font: 16px var(--regular-font);
  margin: 40px 0 10px;
}
.modalDialogDiv.vodPurchase > .content .validation > .validity > .bullet {
  text-align: left;
}
.modalDialogDiv.vodPurchase > .content .validation > .validity > .bullet::before {
  content: "•";
  margin-right: 10px;
}
.modalDialogDiv.vodPurchase > .content .validation > .codeAndButton {
  align-items: center;
  margin: 20px 0 5px;
}
.modalDialogDiv.vodPurchase > .content .validation > .codeAndButton > input {
  background-color: transparent;
  border: 2px solid var(--input-border);
  border-radius: var(--border-radius-huge-u);
  flex: 1 1;
  font: 14px var(--regular-font);
  height: 46px;
  margin-right: 20px;
  padding: 8px 12px;
  -webkit-user-select: text;
          user-select: text;
}
.modalDialogDiv.vodPurchase > .content .validation > .codeAndButton > .pictoElement > svg {
  fill: var(--success);
}
.modalDialogDiv.vodPurchase > .content .validation > .appliedPromocode > .label {
  font: 14px var(--light-font);
}
.modalDialogDiv.vodPurchase > .content .validation > .appliedPromocode > .promocode {
  font: 14px var(--regular-font);
  margin-left: 3px;
}
.modalDialogDiv.vodPurchase > .content .validation > .promocodeError {
  font: 14px var(--regular-font);
  height: 60px;
  margin-bottom: 20px;
  opacity: 0;
  text-align: left;
}
.modalDialogDiv.vodPurchase > .content .validation > .promocodeError.visible {
  opacity: 1;
}
.modalDialogDiv.vodPurchase > .content .validation > .information {
  align-items: center;
  cursor: pointer;
  font-size: 12px;
  margin: 8px 0;
}
.modalDialogDiv.vodPurchase > .content .validation > .information > .pictoElement {
  width: 20px;
}
.modalDialogDiv.vodPurchase > .content .validation > .information > .pictoElement > svg {
  fill: var(--accent);
  width: 16px;
}
.modalDialogDiv.vodPurchase > .content .paid {
  flex-direction: column;
  margin: 30px;
  text-align: left;
}
.modalDialogDiv.vodPurchase > .content .paid > .title {
  font: 24px var(--semibold-font);
}
.modalDialogDiv.vodPurchase > .content .paid > .message {
  font: 18px var(--regular-font);
  margin: 30px 0;
}
.modalDialogDiv.vodPurchase > .content .paid > .buttons {
  justify-content: space-between;
}
.modalDialogDiv.vodPurchase.dark > .content {
  color: var(--overlay-foreground-1);
}
.modalDialogDiv.vodPurchase.dark > .content .titles {
  border-bottom-color: var(--separator-dark);
}
.modalDialogDiv.vodPurchase.dark > .content .validation > .summary > .price.struck {
  text-decoration-color: var(--overlay-foreground-1);
}
.modalDialogDiv.vodPurchase.dark > .content .validation > .details > div:not(:last-child)::after {
  background-color: var(--overlay-foreground-1);
}
.modalDialogDiv.vodPurchase.dark > .content .validation > .details > div.languages > .pictoInfo {
  border-color: var(--overlay-foreground-1);
}
.modalDialogDiv.vodPurchase.dark > .content .validation > .details > div.languages > .pictoInfo > svg {
  fill: var(--overlay-foreground-1);
}
.modalDialogDiv.vodPurchase.dark > .content .validation > .details > div.parentalGuidance.pictoInfo {
  background-color: var(--overlay-foreground-1);
  color: var(--overlay-background);
}
.modalDialogDiv.vodPurchase.dark > .content .validation > .codeAndButton > input {
  background-color: var(--overlay-background);
  border-color: var(--placeholder-input);
  color: var(--overlay-foreground-1);
}
.modalDialogDiv.vodPurchase.dark > .content .validation > .codeAndButton > input::placeholder {
  color: var(--placeholder-input);
}
.modalDialogDiv.vodPurchase.dark > .content .validation > .promocodeError {
  color: var(--error);
}
.modalDialogDiv.vodPurchase.light > .content {
  color: var(--overlay-background);
}
.modalDialogDiv.vodPurchase.light > .content .titles {
  border-bottom-color: var(--separator-light);
}
.modalDialogDiv.vodPurchase.light > .content .validation > .summary > .price.struck {
  text-decoration-color: var(--overlay-background);
}
.modalDialogDiv.vodPurchase.light > .content .validation > .details > div:not(:last-child)::after {
  background-color: var(--overlay-background);
}
.modalDialogDiv.vodPurchase.light > .content .validation > .details > div.languages > .pictoInfo {
  border-color: var(--overlay-background);
}
.modalDialogDiv.vodPurchase.light > .content .validation > .details > div.parentalGuidance.pictoInfo {
  background-color: var(--overlay-background);
  color: var(--overlay-foreground-1);
}
.modalDialogDiv.vodPurchase.light > .content .validation > .codeAndButton > input {
  background-color: var(--overlay-foreground-1);
  border-color: var(--placeholder-input);
  color: var(--overlay-background);
}
.modalDialogDiv.vodPurchase.light > .content .validation > .codeAndButton > input::placeholder {
  color: var(--placeholder-input);
}
.modalDialogDiv.vodPurchase.light > .content .validation > .promocodeError {
  color: var(--error);
}

.purchaseRedirect {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  padding: 0 40px 40px;
  row-gap: 30px;
}
.purchaseRedirect > .purchaseRedirectTitle {
  font: 24px var(--semibold-font);
}
.purchaseRedirect > .purchaseRedirectContainer {
  align-items: flex-start;
  column-gap: 40px;
  display: flex;
}
.purchaseRedirect > .purchaseRedirectContainer > .purchaseRedirectMessage {
  flex-shrink: 1;
  line-height: 1.3rem;
  text-align: start;
  white-space: break-spaces;
}
.purchaseRedirect > .purchaseRedirectContainer > .qrCodeContainer {
  align-items: center;
  background-color: #fff;
  border-radius: var(--border-radius-big-u);
  display: flex;
  justify-content: center;
  padding: 20px;
}

.registrationFrameContainer {
  flex-grow: 1;
}
.registrationFrameContainer > .debugPanel {
  background-color: var(--accent-light);
  box-shadow: 0 0 4px 0 #000;
  color: var(--text-foreground-1);
  display: flex;
  flex-direction: column;
  font: 14px var(--regular-font);
  overflow: visible;
  padding: 10px 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1000;
}
.registrationFrameContainer > .debugPanel > .overriddenAppConf {
  align-items: center;
  display: flex;
  font: 16px var(--regular-font);
  margin: 10px 0;
  padding: 0 20px;
  width: 100%;
  z-index: 1000;
}
.registrationFrameContainer > .debugPanel > .overriddenAppConf > .label {
  background-color: var(--text-foreground-1);
  border-radius: var(--border-radius-tiny-u) 0 0 var(--border-radius-tiny-u);
  color: var(--background);
  padding: 1px 5px;
}
.registrationFrameContainer > .debugPanel > .overriddenAppConf > .value {
  background-color: var(--background);
  border-radius: 0 var(--border-radius-tiny-u) var(--border-radius-tiny-u) 0;
  color: var(--text-foreground-1);
  font-family: var(--bold-font);
  padding: 1px 5px;
}
.registrationFrameContainer > .debugPanel.reduced {
  padding: 0;
}
.registrationFrameContainer > .debugPanel.reduced > .overriddenAppConf {
  font-size: 14px;
  margin: 5px 0;
}
.registrationFrameContainer > .debugPanel * {
  overflow: visible;
}
.registrationFrameContainer > .debugPanel > .separator {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  margin: 10px 0;
}
.registrationFrameContainer > .debugPanel > .row {
  align-items: center;
  margin: 10px 0;
  padding: 0 20px;
}
.registrationFrameContainer > .debugPanel > .row.buttons {
  justify-content: center;
}
.registrationFrameContainer > .debugPanel > .row.buttons > div {
  margin-inline: 20px;
}
.registrationFrameContainer > .debugPanel > .row > .label {
  font-family: var(--semibold-font);
  margin-right: 10px;
}
.registrationFrameContainer > .debugPanel > .row > input {
  background-color: rgba(255, 255, 255, 0.3);
  border: 0;
  border-radius: var(--border-radius-tiny-u);
  color: var(--text-foreground-1);
  flex-grow: 1;
  padding: 5px 10px;
  -webkit-user-select: text;
          user-select: text;
}
.registrationFrameContainer > .debugPanel > .row > input::selection {
  background: #fff;
  color: var(--text-foreground-1);
}
.registrationFrameContainer > .registrationFrame {
  border: 0;
  height: 100%;
  width: 100%;
}

@keyframes debugSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-110%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes debugSlideOut {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-110%);
  }
}
.start {
  flex-grow: 1;
  position: relative;
}
.start > .mainLayout {
  align-items: center;
  background-color: var(--background);
  display: flex;
  flex-direction: column;
  inset: 0;
  justify-content: center;
  opacity: 0;
  z-index: 200;
}
.start > .mainLayout.visible {
  animation: fadeIn var(--short-duration) ease-out forwards;
}
.start > .mainLayout.hidden {
  animation: fadeOut var(--short-duration) ease-in forwards;
}
.start > .mainLayout > .debugContainer {
  background-color: #2a2a2a;
  border-radius: 2px 10px 2px 2px;
  bottom: 0;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  left: 0;
  min-width: 280px;
  opacity: 0;
  position: absolute;
  transform: translateX(-110%);
}
.start > .mainLayout > .debugContainer.debugSlideIn {
  animation: debugSlideIn var(--short-duration) ease-out forwards;
}
.start > .mainLayout > .debugContainer.debugSlideOut {
  animation: debugSlideOut var(--short-duration) ease-in forwards;
}
.start > .mainLayout > .debugContainer > .version,
.start > .mainLayout > .debugContainer > .line {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), transparent);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 2px;
}
.start > .mainLayout > .debugContainer > .version {
  align-items: center;
  color: #fff;
  font: 14px var(--regular-font);
  padding: 5px;
}
.start > .mainLayout > .debugContainer > .version > svg {
  fill: #fff;
}
.start > .mainLayout > .debugContainer > .line {
  align-items: center;
  color: #949494;
  padding: 2px 5px;
}
.start > .mainLayout > .debugContainer > .line > .status {
  background: #949494 linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0.2) 100%);
  border-radius: 50%;
  height: 20px;
  width: 20px;
}
.start > .mainLayout > .debugContainer > .line > .status > .queryLoader {
  border-width: 3px;
  height: 20px;
  width: 20px;
}
.start > .mainLayout > .debugContainer > .line.inProgress {
  color: var(--warning);
}
.start > .mainLayout > .debugContainer > .line.inProgress > .status {
  background-color: var(--warning);
}
.start > .mainLayout > .debugContainer > .line.success {
  color: var(--success);
}
.start > .mainLayout > .debugContainer > .line.success > .status {
  background-color: var(--success);
}
.start > .mainLayout > .debugContainer > .line.error {
  color: var(--error);
}
.start > .mainLayout > .debugContainer > .line.error > .status {
  background-color: var(--error);
}
.start > .mainLayout > .debugContainer > .line > .label,
.start > .mainLayout > .debugContainer > .line > .status {
  align-items: center;
  color: inherit;
  font: 14px var(--regular-font);
}
.start > .mainLayout > .debugContainer > .line > .duration {
  font: 12px monospace;
  margin-right: 5px;
}
.start > .mainLayout > .debugContainer > .line > .label {
  margin-right: auto;
}
.start > .mainLayout > .progressBar {
  background-color: var(--text-foreground-1);
  height: 4px;
  left: 0;
  position: absolute;
  top: 0;
  transform: scaleX(0);
  transform-origin: 0 center;
  transition: transform var(--short-duration) linear;
  width: 100%;
}
.start > .mainLayout > .loaderAnimation {
  height: 100%;
  width: 100%;
}
.start > .footerVersion {
  bottom: 10px;
  color: var(--text-foreground-1);
  font: 16px var(--regular-font);
  position: absolute;
  right: 10px;
  z-index: 1000;
}
.start > .startLoader {
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  position: absolute;
  top: 50%;
  z-index: 500;
}


/*# sourceMappingURL=main.5aa89e76.css.map*/