/* ------------------------------------ *\
  CONTENTS
\* ------------------------------------ */

/**
 * CONTENTS..............You’re reading it!
 * FULL...................................
 * STICKY ................................
 * TEASER.................................
 * LINKED ................................
 * MEDIA QUERIES .........................
*/

/* ------------------------------------ *\
  ==FULL
\* ------------------------------------ */
.podcast-content__chapo {
  font-style: italic;
  font-size: 1.125rem;
}

.podcast-content .region-wrapper > .grid-container {
  padding-right: 0;
  padding-left: 0;
}

.podcast-content .region-wrapper {
  padding-top: 0;
  padding-bottom: 1rem;
}

/* ------------------------------------ *\
  ==STICKY
\* ------------------------------------ */
.paragraph
  .node--type-podcast.node--view-mode-podcast-sticky
  a.podcast-sticky-link:hover {
  text-decoration: none;
}

.paragraph article.node--type-podcast.node--view-mode-podcast-sticky {
  border: 1px solid #fff;
  border-radius: 12px;
}

.paragraph-2408.paragraph,
.paragraph-2406.paragraph,
.paragraph-2410.paragraph,
.paragraph-2412.paragraph {
  width: 100%;
  text-align: center;
  padding: 0 0.7rem 0.4rem;
}

.paragraph article.node--type-podcast.node--view-mode-podcast-sticky:hover {
  -webkit-box-shadow: 0 0 40px #0000001a;
          box-shadow: 0 0 40px #0000001a;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.podcast--sticky .podcast__thumb img {
  height: 200px;
}

.podcast--sticky .podcast__source {
  margin-bottom: 0.5rem;
}

.playlist ul {
  list-style: none;
}

.playlist .amplitude-song-container:not(.podcast-content__podcast) {
  opacity: 0.5;
  cursor: pointer;
  margin: 0.313rem;
}

.playlist .amplitude-active-song-container,
.playlist .amplitude-song-container:hover {
  opacity: 1;
}

/* n'affiche pas le player du template de la vue podcast sur la page d'un seul podcast */
.block-views-block-podcasts-block-1 .flat-black-player-container {
  display: none;
}

.field--name-field-article-podcast-ref {
  width: 800px;
  margin: auto;
}

.flat-black-player-container {
  padding: 0 1rem;
  position: relative;
  max-width: 200px;
  text-align: center;
}

.bouton-playlist {
  float: left;
  position: relative;
  max-width: 100%;
  width: 100%;
  font-family: Luciole, sans-serif;
  font-weight: bold;
  font-size: 0.875rem;
  line-height: 1.4;
  text-align: left;
  top: 5px;
}

.playlist-bouton a:hover {
  border: 1px dotted #2d2d3d;
  color: #fff;
  background: #2d2d3d;
}

.playlist-bouton a:hover .blocanim-contour-noir {
  fill: none;
  stroke: #fff;
}

.playlist-bouton a:hover .blocanim-fond-noir {
  fill: #fff;
  stroke: #fff;
}

.song {
  position: relative;
}

.podcast-picto {
  position: absolute;
  bottom: 5px;
  display: block;
  text-align: left;
}

.podcast-picto a {
  width: 15px;
  height: 15px;
  display: inline-block;
  margin: 0 2px;
  opacity: 0.5;
}

.podcast-picto a:hover {
  opacity: 1;
}

.playlist span.list-active-song-name {
  color: #2d2d3d;
  line-height: 1.6;
  font-size: 0.625rem;
  font-family: Luciole, sans-serif;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.playlist .song {
  padding: 15px;
  background-color: #2d2d3d;
  cursor: pointer;
  line-height: 1.5;
  border-radius: 4px;
  min-width: 150px;
  min-height: 150px;
  float: left;
  margin: 5px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  opacity: 0.5;
}

.playlist .song:hover {
  opacity: 1;
}

.playlist .song.amplitude-active-song-container {
  background-color: #f9b335;
  border-radius: 4px;
  width: 150px;
  height: 150px;
  opacity: 1;
  float: left;
  margin: 5px;
}

.playlist .song .song-meta-container {
  display: inline-block;
  vertical-align: middle;
}

.playlist .song .meta-container span.song-name {
  font-family: Luciole, sans-serif;
  font-weight: bold;
  font-size: 0.75rem;
  line-height: 1.2;
  color: #fff;
  padding-bottom: 10px;
  display: block;
}

.playlist .song .song-meta-container span.song-artist-album {
  font-family: Luciole-Regular-Italic, sans-serif;
  font-size: 0.625rem;
  line-height: 1.2;
  color: #fff;
  display: block;
}

.playlist .song span.song-artist-album {
  color: #5277b0;
}

.player-top {
  position: relative;
}

.player-top img[data-amplitude-song-info='cover_art_url'] {
  width: 100%;
  height: auto;
}

.player-progress-bar-container {
  width: 100%;
  height: 4px;
  background-color: #ccc;
  position: relative;
  margin-top: 2px;
  border-radius: 40px;
}

.player-progress-bar-container .song-played-progress {
  width: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 4px;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 9;
  border: none;
  cursor: pointer;
  background: transparent;
  border-radius: 40px;
}

.player-progress-bar-container
  .song-played-progress[value]::-webkit-progress-bar {
  background: none;
}

.player-progress-bar-container
  .song-played-progress[value]::-webkit-progress-value {
  background: #2d2d3d;
  border-radius: 40px;
}

.player-progress-bar-container .song-played-progress[value]::-moz-progress-bar {
  background: #5eaefd;
  border-radius: 40px;
}

.player-progress-bar-container .song-buffered-progress {
  width: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 4px;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 2;
  border: none;
  background: transparent;
  border-radius: 40px;
}

.player-progress-bar-container
  .song-buffered-progress[value]::-webkit-progress-bar {
  background: none;
}

.player-progress-bar-container
  .song-buffered-progress[value]::-webkit-progress-value {
  background-color: #5eaefd;
  border-radius: 40px;
  -webkit-transition: width 0.1s ease;
  transition: width 0.1s ease;
}

.player-progress-bar-container
  .song-buffered-progress[value]::-moz-progress-bar {
  background: #5eaefd;
  border-radius: 40px;
}

.player-middle {
  background-color: #fff;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
  position: relative;
}

.time-container {
  padding-top: 10px;
}

.player-middle .time-container-wrapper {
  color: #2d2d3d;
  width: 100%;
  background-color: #fff;
  font-family: Luciole, sans-serif;
  font-weight: bold;
  font-size: 0.5rem;
}

.player-middle .time-container-wrapper .amplitude-duration-time {
  position: absolute;
  top: 0;
  right: 5px;
}

.player-middle .time-container-wrapper .amplitude-current-time {
  position: absolute;
  top: 0;
  left: 5px;
}

.player-middle,
.podcast--sticky .podcast__title .heading {
  font-family: Bitter, serif;
  font-size: 0.625rem;
  color: #000;
  letter-spacing: 0.03rem;
  line-height: 0.75rem;
  display: block;
}

.player-middle .song-artist-album,
.podcast--sticky .podcast__source {
  opacity: 0.5;
  font-family: Luciole, sans-serif;
  font-weight: bold;
  font-size: 0.625rem;
  color: #2d2d3d;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.player-middle .time-container {
  font-size: 0.5rem;
  margin: 0;
}

.player-bottom {
  width: 100%;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  background-color: #fff;
}

.player-bottom .control-container {
  height: 30px;
  width: 150px;
  margin: 0 auto;
}

.player-bottom .control-container div {
  padding: 0 20px;
}

.player-bottom .control-container .prev-container {
  height: 30px;
  width: 30px;
  float: left;
}

.player-bottom .control-container .prev-container .previous {
  background: url('../images/amplitude/previous.svg');
  background-repeat: no-repeat;
  height: 30px;
  width: 30px;
  cursor: pointer;
  margin: auto;
}

.player-bottom .control-container .prev-container .previous:hover {
  background: url('../images/amplitude/previous-hover.svg');
  background-repeat: no-repeat;
}

.player-bottom .control-container .play-pause-container {
  height: 30px;
  width: 30px;
  float: left;
}

.player-bottom .control-container .play-pause-container .play-pause {
  height: 30px;
  width: 30px;
  cursor: pointer;
  margin: auto;
}

.player-bottom
  .control-container
  .play-pause-container
  .play-pause.amplitude-playing {
  background: url('../images/amplitude/pause.svg');
  background-repeat: no-repeat;
}

.player-bottom .control-container .play-pause-container .play-pause,
.player-bottom
  .control-container
  .play-pause-container
  .play-pause.amplitude-paused {
  background: url('../images/amplitude/play.svg');
  background-repeat: no-repeat;
}

.player-bottom .control-container .next-container {
  height: 30px;
  width: 30px;
  float: left;
}

.player-bottom .control-container .next-container .next {
  background: url('../images/amplitude/next.svg');
  background-repeat: no-repeat;
  height: 30px;
  width: 30px;
  cursor: pointer;
  margin: auto;
}

.player-bottom .control-container .next-container .next:hover {
  background: url('../images/amplitude/next-hover.svg');
  background-repeat: no-repeat;
}

.player-bottom .control-container::after {
  content: '';
  display: table;
  clear: both;
}

.player-bottom .volume-container {
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
}

.player-bottom .volume-container img {
  display: block;
  float: left;
  margin-top: -9px;
}

.player-bottom .volume-container input[type='range'].amplitude-volume-slider {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: block;
  float: left;
  max-width: 60%;
  margin-left: 20%;
}

.player-bottom
  .volume-container
  input[type='range'].amplitude-volume-slider:focus {
  outline: none;
}

.player-bottom
  .volume-container
  input[type='range'].amplitude-volume-slider::-webkit-slider-runnable-track {
  width: 75%;
  height: 2px;
  cursor: pointer;
  animate: 0.2s;
  background: #2d2d3d;
  border-radius: 4px;
}

.player-bottom
  .volume-container
  input[type='range'].amplitude-volume-slider::-webkit-slider-thumb {
  height: 10px;
  width: 10px;
  background-color: #2d2d3d;
  cursor: pointer;
  margin-top: -4px;
  -webkit-appearance: none;
          appearance: none;
  border-radius: 20px;
}

#player-bottom
  .volume-container
  input[type='range'].amplitude-volume-slider:focus::-webkit-slider-runnable-track {
  background: #ccc;
}

.player-bottom
  .volume-container
  input[type='range'].amplitude-volume-slider::-moz-range-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  animate: 0.2s;
  background: #ccc;
}

.player-bottom
  .volume-container
  input[type='range'].amplitude-volume-slider::-moz-range-thumb {
  height: 10px;
  width: 10px;
  background-color: white;
  cursor: pointer;
  margin-top: -4px;
  -moz-appearance: none;
       appearance: none;
  border-radius: 20px;
}

.player-bottom
  .volume-container
  input[type='range'].amplitude-volume-slider::-ms-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  animate: 0.2s;
  background: #ccc;
  border-width: 15px 0;
  color: transparent;
  border-color: #192029;
}

.player-bottom
  .volume-container
  input[type='range'].amplitude-volume-slider::-ms-fill-lower {
  background: transparent;
  border-radius: 2.6px;
}

.player-bottom
  .volume-container
  input[type='range'].amplitude-volume-slider::-ms-fill-upper {
  background: #ccc;
  border-radius: 2.6px;
}

.player-bottom
  .volume-container
  input[type='range'].amplitude-volume-slider::-ms-thumb {
  height: 18px;
  width: 18px;
  background-color: white;
  cursor: pointer;
  margin-top: 0;
  border: 20px;
}

.player-bottom
  .volume-container
  input[type='range'].amplitude-volume-slider:focus::-ms-fill-lower {
  background: #ccc;
}

.player-bottom
  .volume-container
  input[type='range'].amplitude-volume-slider::-ms-tooltip {
  display: none;
}

.player-bottom .volume-container:after {
  content: '';
  display: table;
  clear: both;
}

/* ------------------------------------ *\
  ==LINKED
\* ------------------------------------ */
.article__linked {
  margin-bottom: 1rem;
}

/* ------------------------------------ *\
  ==MEDIA QUERIES
\* ------------------------------------ */
@supports (-ms-ime-align: auto) {
  .player-bottom .volume-container input[type='range'].amplitude-volume-slider {
    margin-top: -4px;
    height: 30px;
    background-color: #192029 !important;
  }
}

@media all and (-ms-high-contrast: none) {
  .player-bottom .volume-container *::-ms-backdrop,
  .flat-black-player-container
    .player-bottom
    .volume-container
    input[type='range'].amplitude-volume-slider {
    margin-top: -8px;
    background-color: #192029 !important;
  }
}

@media screen and (max-width: 63.9375em) {
  .podcast-content {
    margin-bottom: 1rem;
  }

  .field--name-field-article-podcast-ref {
    width: unset;
    margin: 0 1rem;
  }
}

@media screen and (max-width: 39.9375em) {
  .podcast-content__chapo {
    font-size: 0.875rem;
  }
}