/**********************************************
_JeunesPousses.scss
 */

/*!
 * Bootstrap v5.1.3 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");


:root {
  --share-bg: rgba(122, 83, 166, 0.5);

  --primary: #7a53a6;
  --secondary: #f69e78;
  --tertiary: #6ec5ef;
  --accent: #e33d7f;
  --body-color: #6a5186;
  --body-link: var(--accent);
  --body-link-hover: var(--accent);
  --btn-play-color: var(--secondary);
  --btn-play-hover-color: var(--accent);
  --btn-play-active-color: var(--secondary);
  --entry-border: #c0a7dc;
  --entry-h3: #644a82;
  --entry-h4: var(--accent);
  --label-border-color: var(--secondary);
  --label-color: var(--entry-h3);
  --label-bg: #f5e6e0;

  --sm2-bg: var(--primary);
  --sm2-drawer-active-bg: #e37f66;
  --sm2-drawer-overlay-bg: rgba(0, 0, 0, 0.1);
  --catbtn-color: #e33d7f;
  --tipord-color: #a08fb3;
  --tipord-hcolor: #4b3366;
  --sm2-color: #fff;
  --sm2-btn-border-color: rgba(0, 0, 0, 0.1);
  --sm2-drawer-bg: var(--sm2-bg);
  --sm2-drawer-color: var(--sm2-color);
  --sm2-drawer-active-color: var(--sm2-color);
  --sm2-drawer-active-bg: rgba(0, 0, 0, 0.25);
  --sm2-drawer-hover-bg: rgba(0, 0, 0, 0.1);
  --sm2-drawer-odd-bg: rgba(255, 255, 255, 0.08);
  --sm2-drawer-border-color: rgba(0, 0, 0, 0);
  --sm2-font: Barlow Semi Condensed, sans-serif;


  --more-bg: #f2f0f5;
  --more-color: #573380;
  --tabs-btn: #a9a1b3;
  --tabs-border-color: #c1b8cc;
  --more-link: #543973;
  --more-hlink: #422d59;
  --more-date: #897a99;
  --footer-bg: #2b2433;
  --footer-color: #aca6b3;
}

header.dossier-header .pic {
  -webkit-filter: saturate(1.2) blur(10px);
  filter: saturate(1.2) blur(10px);
  margin: -20px
}

header.dossier-header .veil {
  background-color: rgba(102, 102, 102, 0.3);
  -webkit-box-shadow: none;
  box-shadow: none
}

header.dossier-header h1 {
  position: relative
}

header.dossier-header h1::after {
  content: 'Compilation goûte mes disques';
  display: block;
  text-transform: uppercase;
  margin: .5em 0 0;
  letter-spacing: .15em;
  font-family: var(--bs-font-sans-serif);
  font-size: .3em;
  font-weight: 700
}

@media (min-width: 992px) {
  header.dossier-header h1::after {
    margin: .75em 0 0;
    font-size: .25em
  }
}

body {
  color: var(--body-color, #666);
  background-color: var(--body-bg, #fff)
}

.contentWrap {
  position: relative;
  z-index: 2
}

.articleBody {
  background: none;
  padding: 0;
  line-height: 2
}

@media (min-width: 992px) {
  .articleBody {
    text-align: justify
  }
}

.articleBody p > a:not([class]) {
  color: var(--body-link, #4998c2)
}

.articleBody p > a:not([class]):hover {
  color: var(--body-link-hover, #4998c2)
}

#compilPlayer, .intro, .chapo, .playlist, #accordion {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto
}

#compilPlayer {
  margin-top: 40px
}

.intro, .chapo {
  font-size: 1.125rem;
  padding-bottom: 30px
}

.intro::before, .chapo::before {
  content: '';
  display: block;
  width: 30px;
  height: 3px;
  background: var(--accent, #4998c2);
  margin: 50px auto
}

.intro a.download, .chapo a.download {
  font-family: "Barlow Semi Condensed", var(--bs-font-sans-serif);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 3px;
  margin: 30px 0;
  letter-spacing: 0px;
  padding: 20px 20px;
  text-align: center;
  color: var(--accent, #4998c2);
  background: var(--head-bg, #f5e6e0)
}

.intro a.download:hover, .chapo a.download:hover {
  background: var(--accent, #4998c2);
  color: #FFF
}

.intro a.download:before, .chapo a.download:before {
  content: '\f019';
  font-family: "Font Awesome 5 Pro";
  font-size: 16px;
  font-style: normal;
  font-weight: normal;
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle
}

.btnPlay {
  display: block;
  color: var(--btn-play-color, #CCC);
  background: var(--btn-play-bg, #fff);
  position: relative;
  width: 60px;
  height: 60px;
  margin: -32px auto 20px;
  outline: 20px solid #FFF;
  border: 2px solid currentColor;
  border-radius: 50%;
  text-decoration: none
}

.btnPlay::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: 20px;
  left: 23px;
  border-style: solid;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent currentColor
}

.btnPlay:hover {
  color: var(--btn-play-hover-color, #999)
}

.btnPlay.onair {
  color: #FFF;
  background: var(--btn-play-active-color);
  -webkit-box-shadow: 0 0 0 30px var(--btn-play-active-color) inset;
  box-shadow: 0 0 0 30px var(--btn-play-active-color) inset;
  border-color: var(--btn-play-active-color)
}

.btnPlay.onair:not(.paused)::before {
  width: 14px;
  height: 20px;
  border: 4px solid;
  border-width: 0 4px;
  position: absolute;
  top: 19px;
  left: 21px
}

.links {
  margin-top: 30px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--bs-font-sans-serif);
  font-size: 1rem
}

.links .link-title {
  text-transform: uppercase;
  color: var(--label-color);
  font-family: "Montserrat", "pf_din", sans-serif;
  font-size: 11px;
  font-weight: 700;
  position: relative;
  border-radius: 3px 3px 3px 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding-left: 8px;
  background: var(--label-bg, #EEE);
  margin-bottom: 4px
}

.links .link-title::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 100%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 8px 0 0;
  border-color: var(--label-bg, #EEE) transparent transparent transparent
}

.links .link-title::after {
  content: '';
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1
}

.links a {
  text-decoration: none !important;
  border-bottom: 1px solid
}

.links a:hover {
  border-bottom-color: transparent
}

.playlist ul, #accordion ul {
  padding: 0;
  list-style: none
}

.playlist li, #accordion li {
  list-style: none;
  border-top: 1px solid var(--entry-border, rgba(0, 0, 0, 0.1));
  position: relative;
  margin: 100px 0 50px
}

.playlist li .toggler, #accordion li .toggler {
  margin-top: 52px
}

.playlist li .btnPlay + .toggler, #accordion li .btnPlay + .toggler {
  margin-top: 0
}

.playlist .toggler, #accordion .toggler {
  padding: 10px 0
}

.playlist h3, .playlist h4, #accordion h3, #accordion h4 {
  font-family: "Montserrat", "pf_din", sans-serif;
  text-align: center;
  line-height: 1;
  margin: 0 0 .2em
}

.playlist h3, #accordion h3 {
  color: var(--entry-h3, #4998c2);
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -.05em
}

.playlist h4, #accordion h4 {
  color: var(--entry-h4, #4998c2);
  font-size: 32px;
  font-weight: 500
}

@media only screen and (max-width: 400px) {
  .sm2-inline-duration {
    display: none
  }
}

/* MP3 PLAYER */
:root {
  /*--sm2-bg: #757575;*/
  /*--sm2-color: #fff;*/
  /*--sm2-btn-border-color: rgba(0, 0, 0, 0.1);*/
  /*--sm2-drawer-bg: var(--sm2-bg);*/
  /*--sm2-drawer-overlay-bg: rgba(0, 0, 0, 0);*/
  /*--sm2-drawer-color: var(--sm2-color);*/
  /*--sm2-drawer-active-color: var(--sm2-color);*/
  /*--sm2-drawer-active-bg: rgba(0, 0, 0, 0.25);*/
  /*--sm2-drawer-hover-bg: rgba(0, 0, 0, 0.1);*/
  /*--sm2-drawer-odd-bg: rgba(255, 255, 255, 0.08);*/
  --sm2-drawer-border-color: transparent;
  --sm2-font: 'Barlow Semi Condensed', sans-serif;
}

#compilPlayer {
  clear: both;
  padding: 20px 0 0;
  margin-bottom: 15px;
}

#compilPlayer > p {
  border-radius: 3px;
  color: #BBB;
  padding: 7px;
  margin: 0;
}

#compilPlayer.hidden > div {
  opacity: 0;
  height: 0;
}

.sm2-bar-ui {
  font-family: var(--sm2-font);
  cursor: default;
}

.sm2-bar-ui .sm2-main-controls {
  color: var(--sm2-color);
  background-color: var(--sm2-bg);
}

.sm2-bar-ui .sm2-playlist-drawer {
  background-color: var(--sm2-drawer-bg);
  color: var(--sm2-color);
  box-shadow: 0 4px 3px -3px rgba(0, 0, 0, 0.1) inset;
}

.sm2-bar-ui .sm2-playlist-drawer .selected {
  color: var(--sm2-drawer-active-color);
}

.sm2-bar-ui .sm2-playlist-drawer a {
  color: inherit;
}

.sm2-bar-ui .sm2-inline-element {
  border-right: 1px solid var(--sm2-btn-border-color);
}

.sm2-bar-ui .sm2-playlist-wrapper {
  background-color: var(--sm2-drawer-overlay-bg);
}

.sm2-bar-ui .sm2-playlist-wrapper li {
  border-bottom-color: var(--sm2-drawer-border-color);
}

.sm2-bar-ui .sm2-playlist-wrapper li:nth-child(odd):not(:hover) {
  background-color: var(--sm2-drawer-odd-bg);
}

.sm2-bar-ui .sm2-playlist-wrapper li:hover a {
  background-color: var(--sm2-drawer-hover-bg);
}

.sm2-bar-ui .sm2-playlist-wrapper li.selected a {
  background-color: var(--sm2-drawer-active-bg);
}

.sm2-bar-ui .sm2-playlist-wrapper li a {
  margin-right: 0;
}

.sm2-bar-ui b,
.sm2-bar-ui strong {
  font-weight: 600;
}

.sm2-bar-ui .sm2-playlist li {
  font-size: 110%;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.sm2-playlist-wrapper li a,
.sm2-inline-time,
.sm2-inline-duration {
  font-size: 100%;
}

.sm2-playlist-wrapper li.selected a,
.sm2-inline-time,
.sm2-inline-duration {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.sm2-bar-ui .sm2-inline-element,
.sm2-bar-ui .sm2-button-element .sm2-button-bd {
  min-height: 3.2em;
}

.sm2-playlist-wrapper ul,
.sm2-playlist-wrapper ol {
  max-height: 10.4em;
}

.sm2-bar-ui.fixed {
  top: 0;
  bottom: auto;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.sm2-bar-ui.fixed.no-transition .sm2-playlist-drawer {
  transition: none;
}

.sm2-bar-ui.fixed .bd.sm2-playlist-drawer {
  bottom: auto;
  position: relative;
}

/* MP3 PLAYER end */

#compilPlayer p {
  border: 1px solid #DDD;
  text-align: center;
}

.sm2-progress .sm2-progress-track {
  background-color: rgba(0, 0, 0, 0.2);
}

.sm2-progress .sm2-progress-bar {
  background-color: rgba(0, 0, 0, 0.15);
}