:root {
    --a-player-bar-bg: #738EF2;
    --a-player-bar-fg: #4897c7;
    --a-player-url-fg: white;
    --a-playlist-header-bg: #F6ED80;;
    --a-playlist-header-fg: #222;
    --a-player-panel-bg: #738ef2;
    --a-player-panel-fg: white;
    --a-sound-hv-bg: #f6ed80;
    --a-sound-hv-fg: #444;
    --a-sound-bg: #f6ed80;
    --body-bg: unset;
    --break-color: transparent;
    --button-bg: #e9e9ed;
    --button-fg: #222;
    --button-hv-bg: #F4F88D;
    --button-hv-fg: #1d3cab;
    --button-active-fg: white;
    --button-active-bg: #738ef2;
    --cover-small-h: 10rem;
    --cover-small-w: 10rem;
    --heading-font-family: "campus_grotesk";
    --header-height: 320px;
    --heading-link-hv-fg: #aa217b;
    --heading-hg-fg: #fff;
    --link-fg: #3b47ff;
    --link-hv-fg: #c40c85;
    --main-color-light: #F4F881;
    --nav-bg: transparent;
    --nav-fg: #222;
    --nav-secondary-bg: transparent;
    --nav-hv-bg: unset;
    --nav-active-bg: unset;
    --nav-active-fg: white;
    --preview-title-sz: 21px;
    --text-color: #75124e;
    --text-color-light: #eee;
}

@font-face {
  font-family: "campus_grotesk";
  src:
    local("campus_grotesk"),
    url("/static/radiocampus/fonts/campus_grotesk/CampusGroteskv24-Regular.woff2") format("woff2"),
    url("/static/radiocampus/fonts/campus_grotesk/CampusGroteskv24-Regular.woff") format("woff"),
    url("/static/radiocampus/fonts/campus_grotesk/CampusGroteskv24-Regular.otf") format("opentype") tech(color-COLRv1);
}

body {
    color: #222;
    background-size: cover;
}


body.home, body.home .preview .headings a, body.home .page a {
    color: #fff;
}
body.home .preview .headings a:hover {
    color: #f4f88d !important;
}
body.home .nav.primary {
    max-width: 1200px;
    margin: 0 auto;
}
body.yellow {
    background: url(/static/radiocampus/backgrounds/degrade-jaune.jpg) repeat-x top fixed;
}
body.yellow :root {
    --nav-active-fg: #f4f88d;
}
body.yellow.home {
    background: url(/static/radiocampus/backgrounds/photo-degrade-02.jpg) no-repeat center/cover;
    background-attachment: fixed;
}
body.blue {
    background: url(/static/radiocampus/backgrounds/degrade-bleu.jpg) repeat-x top fixed;
}
body.blue.home {
    background: url(/static/radiocampus/backgrounds/photo-degrade-01.jpg) no-repeat center/cover;
    background-attachment: fixed;
}
body.blue #grandlogo img {
    content: url('/static/radiocampus/logos/logo-RC-blanc1.png');
}
body.yellow #grandlogo img {
    content: url('/static/radiocampus/logos/logo-RC-bleu1.png');
}
body.blue.home #grandlogo img {
    content: url('/static/radiocampus/logos/logo-RC-blanc2.png');
}
body.yellow.home #grandlogo img {
     content: url('/static/radiocampus/logos/logo-RC-bleu2.png');
}
body.yellow .nav .nav-item.active {
    color: #738EF2 !important;
    text-shadow: -3px 3px 17px rgb(0, 48, 111);
}
body.blue #grandlogo img, body.yellow #grandlogo img {
    width: 120px;
    margin: 12px 0 0 48px;
}
body.blue.home #grandlogo, body.yellow.home #grandlogo {
    text-align: center;
    width: 100%;
}
body.blue.home #grandlogo img , body.yellow.home #grandlogo img {
    margin: 12px auto 0 auto;
    width: 100%;
    opacity: 0.8;
}

.a-player-bar {
    border-top: 1px solid #555;
}
.a-player .button, .a-player-bar-content {
    color: white;
}
#player .a-sound-item .label {
    color: white !important;
}
.a-switch-nav span {
    color: white;
}
.a-switch-nav span:hover {
    color: #333;
}
a.heading.title {
    color: black;
}

a.heading.title:hover {
    /*color: var(--link-hv-fg); */
    color: #738ef2;
}
.button, a.button, button.button {
  border: 0;
}
.header-cover:not(:only-child) {
    float: left;
    margin: 0 1.2rem 1.2rem 0;
}
.header.has-cover {
    min-height: unset;
}
.item-section {display:flex; align-items:end}
.fifty {
    width: 55%;
}
.grid.list-emissions {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-auto-flow: dense;
    gap: 0.2rem;
}
.grid.list-emissions .media-content {
    font-size: 0.84rem;
}
.today {
   color:  yellow;
   font-size: 1.4em !important;
}
.list-grille article {
    border-bottom: 1px solid black;
}
.lagrille .category {
    color: white;
    margin-left: 10px;
    vertical-align: text-bottom;
    font-size: 0.8rem;
}
.lagrille:not(.homedisplay) .heading.subtitle {
    color: black;
}
.mt-3 {
    margin-top: unset !important;
}
.nav.primary .nav-brand {
    display: none;
}
.nav.secondary .nav-item {
    color: black !important;
}
a.nav-item:hover {
    opacity: 0.8;
}
.nav.primary .nav-item {
    font-weight: unset;
    font-size: 1.4em;
}
.page section.container {
    margin-top: 0;
}
.program-list {
    flex-direction: column;
}

.list-home {
    display: block;
}
.list-home article div.media {
    line-height: 1;
    padding: 0;
}
.list-home article.active div.media div.media-content a, .list-home article.active div.media div.media-content span {
    color: yellow;
}

.list-home article.active div.media a:before {
    content: "\2192";
    margin-right: 6px;
}

.list-home article div.media a.preview-cover {
    display: none;
}
.list-home article div.media div.media-content.flex-column {
    display: unset;
}
.list-home article div.media div.media-content section.content {
    display: none;
}
.list-home article div.media div.media-content div.episode-date {
    display: none;
}
.list-home article div.media div.media-content span.heading.subtitle {
    float: right;
}
.schedule {
    background-color: unset;
    font-size: 0.9em;
    margin: 0 0.2rem;
    opacity: 0.6;
    padding: 0 0.2rem 0.2rem 0.2rem;
}

.schedules {
    margin-bottom: 0.4rem !important;
}
.title, .preview .title, .preview .title:not(:last-child) {
    text-transform: unset;
    font-weight: unset;
    font-size: 1.2rem;
}

@media screen and (max-width: 400px) {
    body {
        font-size: 16px;
    }
}


@media screen and (max-width: 1024px) {
    :root {
        --header-height: 200px;
    }
    .page {
        margin-top: 0;
        padding-top: var(--nav-primary-height);
    }
    .nav.primary .nav-brand {
        display: inline-block;
    }
    .nav.secondary .nav-item {
        color: white !important;
    }
    .dropdown-trigger .icon, .icon.bullet {
        color: white;
    }
    .dropdown.is-right .dropdown-menu {
        left: 0;
    }
    .grid.list-emissions {
        grid-template-columns: 1fr 1fr 1fr;
    }
    #grandlogo {
        display: none;
    }
    .navs, .nav-menu.active {
        background-color: #7892f1; /*#738ef2;*/
    }
    .nav .nav-item {
        color: white !important;
    }
    .nav .nav-item.active {
        color: white !important;
    }
    .navs .nav + .nav {
        flex-grow: 1 !important;
    }
}

@media screen and (min-width: 1408px) {
    .container:not(.is-max-desktop):not(.is-max-widescreen) {
        max-width: unset;
        margin: 10px 64px;
    }
    body.home .container:not(.is-max-desktop):not(.is-max-widescreen) {
        max-width: 1400px;
        margin: 0 auto;
    }
}

@media screen and (min-width: 1216px) {
    .container:not(.is-max-desktop):not(.is-max-widescreen) {
        max-width: unset;
        margin: 0 64px;
    }
    body.home .container:not(.is-max-desktop):not(.is-max-widescreen) {
        max-width: 1152px;
        margin: 0 auto;
    }
}

@media screen and (max-width: 900px) {
  .grid.list-emissions {
        grid-template-columns: 1fr 1fr;
  }
}

.list-item .headings {
    margin-bottom: .2rem !important;
}

.list-item:nth-child(3n+1):not(.wide) .media {
  border-color: transparent !important;
}

.list-item:nth-child(3n):not(.wide) .media {
  border-color: transparent !important;
}

.list-item:not(.wide) .media {
    padding: 0.2rem;
}

.media-content .content p, .episode-date {
    opacity: 0.7;
}

/*
.nav-urls .urls a, .nav-urls .urls span {
    color: white;
    background-color: #444;
    border-radius: 5px;
    padding: 4px;
}

#background {
    background-size: cover;
    padding: 80px 0 80px 0;
    width: 100%;
}


.button:hover, a.button:hover, button.button:hover {
    opacity: 0.9 !important;
}

.container {
    background: whitesmoke;
    padding: 24px;
    border-radius: 5px;
    max-width: 960px;
    border: 1px solid #929293;
}

.container.breadcrumbs, .container.header {
    background: transparent;
    border-radius: 0;
    padding: 0 24px 0 24px;
    border: 0;
}

.container.breadcrumbs a {
    color: white;
}

.grid .list-item .headings .heading {
    padding-top: 10px;
    padding-left: 12px;
}

.nav.secondary {
    opacity: 0.9;
}

.nav.secondary .nav-item{
    olor: #1d3cab !important;
    color: #8c827e !important;
    font-size: 1.1em;
}

.nav .nav-item:hover {
    opacity: 0.8;
}

.navs {
  border-bottom: 1px solid #4d4545;
}

.page {
    min-height: 500px;
}

.preview-cover {
    border-radius: 5px;
    opacity: 0.92;
    border: 1px solid #fff;
}

.a-carousel .preview-cover {
    border: 1px solid #ccc;
}

.preview-card .headings .heading {
    opacity: 0.85;
    padding: 12px;
    background-color: #242121;
}

.preview-card .headings a {
    color: white;
}

.grid .preview .headings a {
    color: black;
}

.preview .title, .preview .title:not(:last-child) {
    font-weight: normal;
}

@media screen and (max-width: 1024px) {
  .nav .nav-menu {
    background-color: #6C7ED2;
  }

  .page {
      margin-top: 10px;
  }

  #background {
      padding: 100px 0 50px 0;
  }

  .container, .page .container {
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
  }
}
*/



/* fred fixes */
.grid.list-emissions:not(.list-home) {display: flex !important;flex-wrap: wrap !important; gap: 20px 1rem;}

.grid.list-emissions:not(.list-home) > .list-item {width: calc(20% - 2rem) !important ;}

.grid.list-emissions:not(.list-home) > .list-item .preview-cover {max-width: 100% !important;
    display: block;
    width: 100% !important;
    min-width: auto;
    aspect-ratio: 1 / 1;
    height: fit-content;
    background-size: contain;
    background-position: center;
    background-color: white;
    margin-bottom: 0.5rem;
}

.grid.list-emissions:not(.list-home) .media-content {margin-top: 0;}

.grid.list-emissions:not(.list-home) > .list-item .media .media-content > br, .grid.listfive > .list-item .media .media-content .episode-date > br {display: none;}

.grid.list-emissions:not(.list-home) .list-item .subtitle {text-align: left !important;font-size: 0.8rem !important;}


.grid.list-emissions:not(.list-home) .preview.active .heading:not(:empty) {
    color: #738EF2 !important;
}

.grid.list-podcasts {display: flex !important;flex-wrap: wrap !important; gap: 20px 1rem;}

.grid.list-podcasts > .list-item {width: calc(50% - 2rem) !important ;}

.grid.list-podcasts > .list-item .preview-cover {max-width: 100% !important;
    display: block;
    width: 50% !important;
    min-width: auto;
    aspect-ratio: 1 / 1;
    height: fit-content;
    background-size: contain;
    background-position: center;
    background-color: white;
}

.grid.list-podcasts .media-content {margin-top: 0;}

.grid.list-podcasts .media .media-left {width: 25% !important;}
.grid.list-podcasts .media .media-content {width: 75%;}

.grid.list-podcasts > .list-item .media .media-content > br, .grid.list-emissions > .list-item .media .media-content .episode-date > br {display: none;}

.grid.list-podcasts .list-item .subtitle {text-align: left !important;font-size: 0.8rem !important;}


.grid.list-podcasts .preview.active .heading:not(:empty) {
    color: #738EF2 !important;
}

.withmargin {
      margin-bottom: 5px;
      margin-right: 5px;
}

@media screen and (max-width: 1224px) {
.grid.list-emissions:not(.list-home) > .list-item {width: calc(33% - 2rem) !important;;}
}

@media screen and (max-width: 924px) {
    .grid.list-emissions:not(.list-home) > .list-item {width: calc(50% - 2rem) !important;}
}

@media screen and (max-width: 1024px) {
    .grid.list-emissions > .list-item {width: 100% !important;}
    .program-list {flex-direction: column;}
    .grid.list-podcasts > .list-item {width: 100% !important ;}
}

.list-item .subtitle:not(:empty) {
     min-width: auto !important;
}

@media screen and (max-width: 924px) {
  .a-player-bar-content {overflow: hidden;}
  .a-player-bar-content .title {
      display: inline-block;
      padding-right: 2em;
      padding-left: 100%;
      white-space: nowrap;
      animation: defilement-rtl 55s infinite linear;
      overflow: visible;}

  @keyframes defilement-rtl {
          0% {
              transform: translate3d(0,0,0);      /* position initiale à droite */
          }
          100% {
              transform: translate3d(-100%,0,0);  /* position finale à gauche */
          }
  }
}

@media screen and (max-width: 540px) {
    .media {
      flex-direction: column;
    }
    .grid.list-podcasts .media .media-content {width:100%}

  .grid.list-emissions:not(.list-home) > .list-item {
   width: 100% !important;
  }
}

.list-item .media-content {height:auto;}
