@charset "UTF-8";


/* =========================================================
   RESET / BASE
   ========================================================= */

body {
  margin: unset;

  font-family: "Lato", sans-serif;

  font-size: unset;
  font-weight: unset;
  line-height: unset;

  color: unset;

  text-align: unset;

  background-color: unset;

  -webkit-text-size-adjust: unset;
  -webkit-tap-highlight-color: unset;
}


.container {
  padding-left: 0;
  padding-right: 0;

  width: unset;
}


button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
}


#navbar {
  z-index: 5000;
}


/* =========================================================
   PODCASTS
   ========================================================= */

.crip-podcasts {
  --podcast-ink: #282541;
  --podcast-purple: #1f1b38;

  --podcast-card: #e0d6dd;
  --podcast-card-active: #e4e0f2;

  --podcast-line: #bbb7ca;

  --podcast-orange: #f28c00;

  color: var(--podcast-ink);

  padding:
    0
    0
    130px;

  /*
   * Remonte la liste ET la fiche détail.
   */
  margin-top: -4em;
}


.crip-podcasts__container {
  max-width: 1600px;

  padding-top: 0;
}


.crip-podcasts__list {
  display: flex;

  flex-direction: column;

  gap: 26px;

  margin-top: 0;

  padding-top: 0;
}


.crip-podcasts__empty {
  padding: 32px;

  background:
    var(--podcast-card);

  border-radius: 24px;

  font-size: 18px;
}


/* =========================================================
   CARTE PODCAST
   ========================================================= */

.crip-podcast-card {
  display: grid;

  grid-template-columns:
    310px
    minmax(0, 1fr);

  gap: 28px;

  min-height: 250px;

  padding:
    34px
    36px;

  background:
    var(--podcast-card);

  border-radius: 34px;

  transition:
    background-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}


.crip-podcast-card:hover,
.crip-podcast-card.is-selected,
.crip-podcast-card.is-playing-card {
  background:
    var(--podcast-card-active);
}


/* =========================================================
   IMAGE CARTE
   ========================================================= */

.crip-podcast-card__image-wrap {
  display: block;

  align-self: start;

  border-radius: 10px;

  overflow: hidden;
}


.crip-podcast-card__image {
  display: block;

  width: 100%;

  /*aspect-ratio: 16 / 9;*/

  object-fit: contain;
  
  /*background: #dedbe7;*/
}


.crip-podcast-card__image--placeholder {
  display: flex;

  align-items: center;
  justify-content: center;

  color: #fff;

  font-size: 32px;

  font-weight: 800;

  background:
    var(--podcast-purple);
}


/* =========================================================
   CONTENU CARTE
   ========================================================= */

.crip-podcast-card__content {
  display: flex;

  flex-direction: column;

  min-width: 0;
}


.crip-podcast-card__title {
  margin:
    0
    0
    10px;

	font-size: clamp(
		22.5px,
		1.8vw,
		34.2px	
	);

  line-height: 1.15;

  font-weight: 800;
}


/* =========================================================
   TITRE CLIQUABLE
   ========================================================= */

.crip-podcast-card__title-link {
  color: inherit;

  text-decoration: none;

  transition:
    color .18s ease;
}


.crip-podcast-card__title-link:hover,
.crip-podcast-card__title-link:focus {
  color:
    var(--podcast-orange);

  text-decoration: none;
}


.crip-podcast-card__summary {
  max-width: 1100px;

  font-size:
    clamp(
		15.3px,
		1.26vw,
		20.7px
    );

  line-height: 1.42;
}


.crip-podcast-card__date {
  margin-top: 20px;

  font-size: 17px;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.crip-podcast-card__actions {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 18px;

  margin-top: auto;

  padding-top: 24px;
}


.crip-podcast-card__secondary-actions {
  display: flex;

  align-items: center;

  gap: 6px;
}


/* =========================================================
   + / -
   ========================================================= */

.crip-podcast-card__more,
.crip-podcast-card__share-toggle {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 46px;
  height: 46px;

  padding: 0;

  border: 0;

  background: transparent;

  color:
    var(--podcast-ink);

  cursor: pointer;
}


.crip-podcast-card__more {
  font-size: 39px;

  font-weight: 300;

  line-height: 1;
}


.crip-podcast-card__share-toggle {
  font-size: 30px;

  font-weight: 700;

  line-height: 1;

  letter-spacing: 0;
}


.crip-podcast-card__more:hover,
.crip-podcast-card__share-toggle:hover {
  opacity: .68;
}


/* =========================================================
   PARTAGE
   ========================================================= */

.crip-podcast-share {
  position: relative;
}


.crip-podcast-share__menu {
  position: absolute;

  z-index: 20;

  left: 0;

  bottom:
    calc(
      100% + 8px
    );

  min-width: 220px;

  padding: 7px;

  background: #fff;

  border:
    1px solid
    rgba(
      40,
      37,
      65,
      .12
    );

  border-radius: 12px;

  box-shadow:
    0
    8px
    24px
    rgba(
      31,
      27,
      56,
      .18
    );
}


.crip-podcast-share__menu[hidden] {
  display: none;
}


.crip-podcast-share__item {
  display: block;

  width: 100%;

  padding:
    10px
    12px;

  border: 0;

  border-radius: 8px;

  background: transparent;

  color:
    var(--podcast-ink);

  font-size: 14px;

  font-weight: 700;

  text-align: left;

  white-space: nowrap;

  cursor: pointer;
}


.crip-podcast-share__item:hover {
  background:
    var(--podcast-card);
}


/* =========================================================
   DESCRIPTION DÉPLIABLE DANS LA LISTE
   ========================================================= */

.crip-podcast-card__details {
  margin-top: 18px;

  padding:
    20px
    22px;

  border-top:
    1px solid
    var(--podcast-line);

  color:
    var(--podcast-ink);

  font-size: 17px;

  line-height: 1.55;
}


.crip-podcast-card__details[hidden] {
  display: none;
}


.crip-podcast-card__details p:first-child {
  margin-top: 0;
}


.crip-podcast-card__details p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   BOUTON ÉCOUTER
   ========================================================= */

.crip-podcast-card__listen {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 11px;

  min-width: 150px;

  padding:
    14px
    22px;

  border: 0;

  border-radius: 999px;

  background:
    var(--podcast-purple);

  color: #fff;

  font-size: 18px;

  font-weight: 800;

  cursor: pointer;

  transition:
    transform .15s ease,
    opacity .15s ease;
}


.crip-podcast-card__listen:hover:not(:disabled) {
  transform:
    translateY(-1px);
}


.crip-podcast-card__listen:disabled {
  opacity: .45;

  cursor: not-allowed;
}


.crip-podcast-card__listen-icon,
.crip-player-btn__play {
  width: 0;
  height: 0;

  border-top:
    8px solid transparent;

  border-bottom:
    8px solid transparent;

  border-left:
    13px solid currentColor;
}


/* =========================================================
   FICHE DÉTAIL
   ========================================================= */

.crip-podcast-detail__back {
  margin-top: 0;

  margin-bottom: 16px;
}


.crip-podcast-detail__back a {
  display: inline-block;

  /*
   * Décalage demandé.
   */
  margin-left: 1em;

  color:
    var(--podcast-ink);

  /*
   * 120 % au lieu de 150 %.
   */
  font-size: 120%;

  font-weight: 700;

  text-decoration: none;
}


.crip-podcast-detail__back a:hover,
.crip-podcast-detail__back a:focus {
  color:
    var(--podcast-orange);

  text-decoration: none;
}


/* =========================================================
   CONTENEUR DÉTAIL
   ========================================================= */

.crip-podcast-detail__card {
  display: grid;

  grid-template-columns:
    minmax(300px, 525px)
    minmax(0, 1fr);

  gap: 60px;

  align-items: start;

  padding:
    36px
    40px
    48px;

  background:
    var(--podcast-card);

  border-radius: 34px;
}


/* =========================================================
   IMAGE DÉTAIL
   ========================================================= */

.crip-podcast-detail__image {
  min-width: 0;
}


.crip-podcast-detail__image img {
  display: block;

  width: 100%;

  aspect-ratio: 1 / 1;

  object-fit: contain;
  object-position: top;
 
  border-radius: 20px;
}


/* =========================================================
   COLONNE DROITE DÉTAIL
   ========================================================= */

.crip-podcast-detail__content {
  display: flex;

  flex-direction: column;

  min-width: 0;
}


.crip-podcast-detail__title {
  margin:
    0
    0
    15px;

  color:
    var(--podcast-ink);

  font-size:
    clamp(
		27px,
		2.25vw,
		41.4px
	);

  line-height: 1.15;

  font-weight: 800;
}


.crip-podcast-detail__summary {
  margin-bottom: 18px;

  font-size: 19px;

  line-height: 1.45;
}


.crip-podcast-detail__date {
  margin-bottom: 28px;

  font-size: 17px;
}


/* =========================================================
   ACTIONS DÉTAIL
   ========================================================= */

.crip-podcast-detail__actions {
  display: flex;

  align-items: center;

  gap: 8px;

  margin-top: 20px;
}


/* =========================================================
   DESCRIPTION DÉTAIL
   JUSTE SOUS ÉCOUTER DANS LA COLONNE DROITE
   ========================================================= */

.crip-podcast-detail__description {
  display: block;

  width: 100%;

  box-sizing: border-box;

  margin-top: 28px;

  padding-top: 24px;

  border-top:
    1px solid
    var(--podcast-line);

  color:
    var(--podcast-ink);

  font-size: 18px;

  line-height: 1.6;
}


.crip-podcast-detail__description p {
  max-width: none;
}


.crip-podcast-detail__description p:first-child {
  margin-top: 0;
}


.crip-podcast-detail__description p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   PLAYER FIXE
   ========================================================= */

.crip-podcast-player {
  position: fixed;

  z-index: 4800;

  left: 22px;
  right: 22px;

  bottom: 16px;

  transform:
    translateY(
      calc(
        100% + 40px
      )
    );

  opacity: 0;

  pointer-events: none;

  transition:
    transform .28s ease,
    opacity .28s ease;
}


.crip-podcast-player.is-visible {
  transform:
    translateY(0);

  opacity: 1;

  pointer-events: auto;
}


.crip-podcast-player__inner {
  display: grid;

  grid-template-columns:
    minmax(260px, 1.2fr)
    minmax(420px, 1.6fr)
    minmax(130px, .45fr);

  align-items: center;

  gap: 30px;

  min-height: 112px;

  padding:
    14px
    26px;

  background:
    rgba(
      36,
      33,
      63,
      .97
    );

  border-radius: 12px;

  box-shadow:
    0
    10px
    32px
    rgba(
      0,
      0,
      0,
      .35
    );

  color: #fff;
}


/* =========================================================
   IDENTITÉ PLAYER
   ========================================================= */

.crip-podcast-player__identity {
  display: flex;

  align-items: center;

  gap: 18px;

  min-width: 0;
}


.crip-podcast-player__cover-wrap {
  width: 74px;

  flex:
    0 0 74px;
}


.crip-podcast-player__cover {
  display: block;

  width: 74px;
  height: 74px;

  object-fit: cover;

  border-radius: 6px;
}


.crip-podcast-player__texts {
  min-width: 0;
}


.crip-podcast-player__brand {
  margin-bottom: 4px;

  font-size: 17px;

  font-weight: 800;
}


.crip-podcast-player__title {
  overflow: hidden;

  font-size: 16px;

  font-weight: 600;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* =========================================================
   CONTRÔLES PLAYER
   ========================================================= */

.crip-podcast-player__controls {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 18px;

  min-width: 0;
}


.crip-player-btn {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  border: 0;

  background: transparent;

  color: #fff;

  cursor: pointer;
}


.crip-player-btn--main {
  width: 52px;
  height: 52px;

  flex:
    0 0 52px;

  border-radius: 50%;

  background: #fff;

  color:
    var(--podcast-purple);
}


.crip-player-btn--main
.crip-player-btn__play {
  margin-left: 4px;
}


.crip-podcast-player.is-playing
.crip-player-btn--main
.crip-player-btn__play {
  width: 14px;

  height: 18px;

  margin-left: 0;

  border: 0;

  border-left:
    5px solid currentColor;

  border-right:
    5px solid currentColor;
}


.crip-player-btn--skip {
  width: 42px;
  height: 42px;

  border:
    2px solid
    rgba(
      255,
      255,
      255,
      .75
    );

  border-radius: 50%;

  font-size: 12px;

  font-weight: 700;
}


/* =========================================================
   TIMELINE
   ========================================================= */

.crip-podcast-player__timeline {
  width:
    min(
      360px,
      32vw
    );

  min-width: 130px;
}


.crip-podcast-player__seek {
  width: 100%;

  accent-color: #fff;

  cursor: pointer;
}


.crip-podcast-player__time {
  margin-top: 3px;

  color:
    rgba(
      255,
      255,
      255,
      .68
    );

  font-size: 14px;

  text-align: center;
}


/* =========================================================
   PARTIE DROITE PLAYER
   ========================================================= */

.crip-podcast-player__right {
  display: flex;

  align-items: center;
  justify-content: flex-end;

  gap: 18px;
}


.crip-player-btn--volume,
.crip-player-btn--close {
  width: 38px;
  height: 38px;

  font-size: 23px;

  opacity: .82;
}


.crip-player-btn--close {
  font-size: 34px;

  font-weight: 300;
}


/* =========================================================
   ACCESSIBILITÉ
   ========================================================= */

.visually-hidden {
  position:
    absolute !important;

  width:
    1px !important;

  height:
    1px !important;

  padding:
    0 !important;

  margin:
    -1px !important;

  overflow:
    hidden !important;

  clip:
    rect(
      0,
      0,
      0,
      0
    ) !important;

  white-space:
    nowrap !important;

  border:
    0 !important;
}


/* =========================================================
   RESPONSIVE <= 1520
   ========================================================= */

@media only screen and (max-width: 1520px) {

  .container {
    margin:
      0
      40px;

    max-width: 100%;
  }


  .crip-podcast-card {
    grid-template-columns:
      250px
      minmax(
        0,
        1fr
      );
  }

}


/* =========================================================
   RESPONSIVE <= 1000
   ========================================================= */

@media only screen and (max-width: 1000px) {

  .crip-podcast-card {
    grid-template-columns:
      200px
      minmax(
        0,
        1fr
      );

    padding: 26px;
  }


  .crip-podcast-player__inner {
    grid-template-columns:
      minmax(
        210px,
        1fr
      )
      minmax(
        330px,
        1.5fr
      )
      auto;

    gap: 18px;
  }


  .crip-podcast-player__timeline {
    width:
      min(
        280px,
        28vw
      );
  }

}


/* =========================================================
   RESPONSIVE DÉTAIL <= 900
   ========================================================= */

@media only screen and (max-width: 900px) {

  .crip-podcast-detail__card {
    grid-template-columns: 1fr;

    gap: 30px;

    padding: 24px;
  }


  .crip-podcast-detail__image {
    max-width: 500px;
  }


  .crip-podcast-detail__description {
    margin-top: 24px;
  }

}


/* =========================================================
   MOBILE <= 750
   ========================================================= */

@media only screen and (max-width: 750px) {

  .container {
    margin:
      0
      24px;
  }


  .crip-podcasts {
    padding-top: 0;

    padding-bottom: 190px;

    /*
     * Sur mobile, on réduit légèrement le déplacement négatif
     * pour éviter de remonter trop haut.
     */
    margin-top: -2em;
  }


  .crip-podcast-card {
    grid-template-columns: 1fr;

    gap: 18px;

    padding: 20px;

    border-radius: 24px;
  }


  .crip-podcast-card__image-wrap {
    max-width: none;
  }


  .crip-podcast-card__date {
    margin-top: 14px;
  }


  .crip-podcast-card__actions {
    align-items: flex-end;
  }


  .crip-podcast-share__menu {
    bottom:
      calc(
        100% + 5px
      );
  }


  .crip-podcast-card__details {
    padding:
      16px
      0
      0;

    margin-top: 14px;
  }


  /* DETAIL */

  .crip-podcast-detail__back a {
    margin-left: .5em;

    font-size: 120%;
  }


  .crip-podcast-detail__title {
    font-size: 30px;
  }


  .crip-podcast-detail__summary {
    font-size: 18px;
  }


  .crip-podcast-detail__actions {
    margin-top: 10px;
  }


  .crip-podcast-detail__description {
    font-size: 17px;
  }


  /* PLAYER */

  .crip-podcast-player {
    left: 8px;
    right: 8px;

    bottom: 8px;
  }


  .crip-podcast-player__inner {
    grid-template-columns:
      1fr
      auto;

    gap:
      10px
      14px;

    padding:
      12px
      14px;
  }


  .crip-podcast-player__identity {
    grid-column:
      1 / 2;
  }


  .crip-podcast-player__cover-wrap,
  .crip-podcast-player__cover {
    width: 54px;
    height: 54px;

    flex-basis: 54px;
  }


  .crip-podcast-player__brand {
    font-size: 14px;
  }


  .crip-podcast-player__title {
    font-size: 13px;
  }


  .crip-podcast-player__controls {
    grid-column:
      1 / -1;

    grid-row: 2;
  }


  .crip-podcast-player__timeline {
    width:
      min(
        46vw,
        260px
      );
  }


  .crip-podcast-player__right {
    grid-column: 2;

    grid-row: 1;

    gap: 2px;
  }


  .crip-player-btn--volume {
    display: none;
  }

}