/* common */
.ui-dialog {
  position: relative;
  top: inherit;
  border: none;
}
.ui-dialog .ui-dialog-content {
  position: absolute;
  border: 0.1rem solid #e7e7e7;
  padding: 2rem;
  background: #FFFFFF;
  /* overflow: inherit; remove for the scroll from menu */
}

.ui-widget {
  font-family: Lato;
}

.ui-widget.ui-widget-content {
  border: inherit;
}

.page-wrapper > .breadcrumbs {
  /* margin-bottom: 0; fait bugger la fiche produit */
}

/** popin */
.modal-popup.modal-slide._inner-scroll .modal-inner-wrap {
  /* max-height: inherit; fait bugger la popin d ajout au panier */
}

/*******************************************/
@media only screen and (max-width: 767px) {
  .ui-dialog {
    position: absolute;
    width: 100%;
    left: 0;
  }
  .ui-dialog .ui-dialog-content {
    position: absolute;
    border: none;
    padding: 0;
  }

  .header .block-customer-login-content {
    border: 0.1rem solid #e7e7e7;
    padding: 2rem;
  }

  .breadcrumbs + .page-main {
    padding-top: 0;
  }

  /** popin */
  .modal-popup.modal-slide._inner-scroll .modal-inner-wrap {
    height: auto;
  }
}
/* yellow */
/* ivory */
/* button */
/* body font color */
/* field required */
/* grey */
/* cta pink */
/* cta white */
/* light blue */
/* orange */
/* title red */
/* title purple */
.d-none {
  display: none !important;
}

section {
  margin: 0 auto;
}
section .wrapper {
  margin: 0 auto;
}
section .wrapper .section-content {
  width: 95%;
  margin: 0 auto;
  padding: 2rem 0rem;
}
section .wrapper .section-content .title {
  margin: 0 auto 2.4rem;
  padding: 0 0rem;
}
section .wrapper .section-content .description {
  margin: 0 auto 3.4rem;
  padding: 0 1rem;
}

.mobile {
  display: block !important;
}

.mobile-flex {
  display: flex !important;
}

.desktop,
.desktop-flex {
  display: none !important;
}

/*******************************************/
@media only screen and (min-width: 768px) {
  section {
    max-width: 128rem;
  }
  section.full-width {
    max-width: inherit;
  }
  section .wrapper {
    max-width: 128rem;
  }
  section .wrapper .section-content {
    padding: 3rem 0rem 3rem;
  }
  section .wrapper .section-content .description {
    padding: 0 0rem;
  }

  .mobile,
.mobile-flex {
    display: none !important;
  }

  .desktop {
    display: block !important;
  }

  .desktop-flex {
    display: flex !important;
  }
}
.our-audio .wrapper .section-content {
  width: 100%;
}
.our-audio .wrapper .section-content .title {
  margin: 0 auto 4rem;
}
.our-audio .wrapper .section-content .description {
  margin: 0 auto 3rem;
}
.our-audio .baseline {
  font-size: 2.4rem;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -1px;
}
.our-audio .picture {
  margin: 0 auto 3rem;
}
.our-audio .customers-like {
  display: block;
  margin: 0 auto 3rem;
}
.our-audio .customers-like-description .text {
  font-size: 1.7rem;
  font-weight: 600;
}
.our-audio .customers-like .strong {
  font-size: 3rem;
}
.our-audio .customers-like .reasons {
  display: flex;
  justify-content: space-evenly;
  align-items: start;
}
.our-audio .customers-like .reasons li {
  flex-basis: 30%;
  text-align: center;
  font-size: 1.2rem;
  line-height: 1.3;
}
.our-audio .customers-like .reasons li .picto {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 13rem;
}
.our-audio .customers-like .reasons li .picto img {
  max-height: 12rem;
}

/*******************************************/
@media only screen and (min-width: 768px) {
  .our-audio .wrapper {
    position: relative;
  }
  .our-audio .wrapper:after {
    background: transparent url("../img/rond-03.png") no-repeat center center;
    background-size: contain;
    display: block;
    content: " ";
    position: absolute;
    top: 0;
    right: 1rem;
    width: 8rem;
    height: 8rem;
  }
  .our-audio .customers-like {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 102.4rem;
  }
  .our-audio .customers-like-picture {
    flex-basis: 30%;
    max-width: 34.5rem;
  }
  .our-audio .customers-like-description {
    flex-basis: 65%;
  }
  .our-audio .customers-like .reasons li {
    font-size: 1.3rem;
  }
  .our-audio .customers-like .reasons li .picto {
    min-height: 14.8rem;
  }
  .our-audio .customers-like .reasons li .picto img {
    max-height: inherit;
  }
}
.stories .products-magazine {
  display: block;
  margin: 0 auto 0rem;
}
.stories .products-magazine .row {
  display: flex;
  justify-content: space-evenly;
  align-items: start;
  background: transparent url("../img/curv-top.png") no-repeat center 40%;
  background-size: contain;
  margin: 0 auto 5rem;
}
.stories .products-magazine .row.even {
  background-image: url("../img/curv-bot.png");
  background-position: -1px 41%;
}
.stories .products-magazine .row .item {
  flex-basis: 40%;
}
.stories .products-magazine .row .item .picture {
  display: flex;
  justify-content: center;
  margin: 0 auto 1rem;
  align-items: center;
  height: 15rem;
}
.stories .products-magazine .row .item .picture img {
  transition: all 0.15s ease;
}
.stories .products-magazine .row .item .picture img:hover {
  transform: scale(1.09);
}
.stories .products-magazine .row .item .name a {
  text-decoration: underline;
  font-weight: 600;
  font-style: italic;
}
.stories .products-magazine .row .item .name a:hover {
  text-decoration: none;
}
.stories .products-numeric {
  margin: 0 auto 0rem;
}
.stories .products-numeric .to-listen {
  font-weight: 600;
  margin: 0rem auto 3rem;
}
.stories .products-numeric .to-listen.last {
  margin: 0rem auto;
}
.stories .products-numeric .items {
  display: block;
}
.stories .products-numeric .items .item {
  margin: 0 auto 4rem;
}
.stories .products-numeric .items .item-picture {
  display: block;
  margin: 0 auto 2rem;
}
.stories .products-numeric .items .item-description {
  margin: 0 auto 2rem;
  font-size: 1.5rem;
}
.stories .products-numeric .items .item-description .name {
  font-size: 1.7rem;
}

/*******************************************/
@media only screen and (min-width: 768px) {
  .stories .products-magazine {
    display: flex;
    justify-content: center;
    align-items: start;
  }
  .stories .products-magazine .row {
    margin: 0 0 4rem;
    flex-basis: 50%;
    max-height: 25rem;
  }
  .stories .products-numeric .items {
    display: flex;
    justify-content: space-evenly;
    align-items: start;
  }
  .stories .products-numeric .items .item {
    flex-basis: 50%;
    margin: 0 auto 1rem;
  }
  .stories .products-numeric .items .item-picture {
    min-height: 20.5rem;
  }
  .stories .products-numeric .items .item-description {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 5rem;
  }
}
/*******************************************/
@media only screen and (min-width: 992px) {
  .stories .wrapper .section-content {
    overflow: inherit;
  }
  .stories .rounded-box {
    position: relative;
    overflow: inherit;
  }
  .stories .rounded-box:after, .stories .rounded-box:before {
    display: block;
    content: " ";
    position: absolute;
  }
  .stories .rounded-box:before {
    background: transparent url("../img/rond-red.png") no-repeat center center;
    background-size: contain;
    bottom: 2rem;
    left: -5rem;
    width: 2.8rem;
    height: 2.8rem;
  }
  .stories .rounded-box:after {
    background: transparent url("../img/rond-yellow.png") no-repeat center center;
    background-size: contain;
    bottom: 7rem;
    right: -5rem;
    width: 2.8rem;
    height: 2.8rem;
  }
}
.listen-to-english .products-magazine {
  display: block;
  margin: 0 auto 0rem;
}
.listen-to-english .products-magazine .row {
  display: flex;
  justify-content: space-evenly;
  align-items: start;
  background: transparent url("../img/curv-top.png") no-repeat center 40%;
  background-size: contain;
  margin: 0 auto 5rem;
}
.listen-to-english .products-magazine .row.even {
  background-image: url("../img/curv-bot.png");
  background-position: -1px 44%;
}
.listen-to-english .products-magazine .row .item {
  flex-basis: 40%;
}
.listen-to-english .products-magazine .row .item-picture {
  display: flex;
  justify-content: center;
  margin: 0 auto 1rem;
  align-items: center;
  height: 18rem;
}
.listen-to-english .products-magazine .row .item-picture img {
  transition: all 0.15s ease;
}
.listen-to-english .products-magazine .row .item-picture img:hover {
  transform: scale(1.09);
}
.listen-to-english .products-magazine .row .item-name a {
  font-weight: 600;
  font-style: italic;
}
.listen-to-english .products-magazine .row .item-description {
  font-size: 1.35rem;
}
.listen-to-english .products-magazine .row .item-description a {
  text-decoration: underline;
  font-weight: 600;
  font-style: italic;
}
.listen-to-english .products-magazine .row .item-description a:hover {
  text-decoration: none;
}

/*******************************************/
@media only screen and (min-width: 768px) {
  .listen-to-english .wrapper .section-content .description {
    width: 68%;
  }
  .listen-to-english .products-magazine {
    display: flex;
    justify-content: center;
    align-items: start;
  }
  .listen-to-english .products-magazine .row {
    margin: 0 0 4rem;
    flex-basis: 50%;
    max-height: 32rem;
  }
}
/*******************************************/
@media only screen and (min-width: 992px) {
  .listen-to-english .wrapper .section-content {
    overflow: inherit;
  }
  .listen-to-english .rounded-box {
    position: relative;
    overflow: inherit;
  }
  .listen-to-english .rounded-box:after, .listen-to-english .rounded-box:before {
    display: block;
    content: " ";
    position: absolute;
  }
  .listen-to-english .rounded-box:before {
    background: transparent url("../img/rond-02.png") no-repeat center center;
    background-size: contain;
    bottom: -5rem;
    left: -5rem;
    width: 4.5rem;
    height: 7.5rem;
  }
}
.universe .description-content {
  display: flex;
  justify-content: space-evenly;
  align-items: start;
  margin: 4rem auto;
}
.universe .description-content picture {
  flex-basis: 30%;
  max-width: 15rem;
}
.universe .description-content .text {
  flex-basis: 60%;
  text-align: left;
}
.universe .box-content .subtitle {
  margin: 0 auto 1.5rem;
}
.universe .box-content .subdescription .picture {
  display: block;
  margin: 0 auto 2rem;
  width: 90%;
}
.universe .our-podcast {
  margin: 4rem 0 2rem;
}
.universe .our-podcast .items .item-content {
  margin: 0 auto;
  max-width: 30rem;
}
.universe .our-podcast .items .item-picture img {
  max-height: 15rem;
  max-width: 26rem;
  width: auto;
  margin: 0 auto;
}
.universe .our-podcast .items .item-name {
  font-weight: 600;
}
.universe .our-podcast .items .item-name a {
  text-decoration: underline;
}
.universe .our-podcast .items .item-name a:hover {
  text-decoration: none;
}
.universe .our-podcast .items .item-description small {
  font-size: 1.3rem;
}

/*******************************************/
@media only screen and (min-width: 768px) {
  .universe .our-podcast .items .item {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 81%;
    margin: 0 auto;
  }
  .universe .our-podcast .items .item-link {
    order: 2;
    flex-basis: 50%;
    max-width: 36rem;
  }
  .universe .our-podcast .items .item-content {
    order: 1;
    flex-basis: 45%;
  }
}
/*******************************************/
@media only screen and (min-width: 992px) {
  .universe .wrapper .section-content {
    overflow: inherit;
  }
  .universe .rounded-box {
    position: relative;
    overflow: inherit;
  }
  .universe .rounded-box:after, .universe .rounded-box:before {
    display: block;
    content: " ";
    position: absolute;
  }
  .universe .rounded-box:before {
    background: transparent url("../img/rond-blue.png") no-repeat center center;
    background-size: contain;
    bottom: 13%;
    left: -5rem;
    width: 2.8rem;
    height: 2.8rem;
  }
  .universe .rounded-box:after {
    background: transparent url("../img/rond-022.png") no-repeat center center;
    background-size: contain;
    bottom: 11%;
    right: -6.5rem;
    width: 4.5rem;
    height: 7.5rem;
  }
}
.all-age-podcast .all-podcast {
  margin: 0 auto 3rem;
}
.all-age-podcast .all-podcast .items .item {
  width: 75%;
  margin: 0 auto;
}
.all-age-podcast .all-podcast .items .item-picture {
  margin: 0 auto 1rem;
}
.all-age-podcast .all-podcast .items .item-picture img {
  max-height: 16rem;
  width: auto;
  margin: 0 auto;
}
.all-age-podcast .all-podcast .items .item-name {
  margin: 0 auto 2rem;
  font-weight: 600;
}
.all-age-podcast .all-podcast .items .item-name a {
  text-decoration: underline;
}
.all-age-podcast .all-podcast .items .item-name a:hover {
  text-decoration: none;
}
.all-age-podcast .owl-nav {
  top: 33%;
  bottom: inherit !important;
  width: 95% !important;
}
.all-age-podcast .anatol, .all-age-podcast .samsam {
  display: none;
}

/*******************************************/
@media only screen and (min-width: 768px) {
  .all-age-podcast .wrapper .section-content .description {
    width: 64%;
  }
  .all-age-podcast .all-podcast {
    margin: 0 auto 3rem;
  }
  .all-age-podcast .all-podcast .items .item {
    width: 38rem;
  }
  .all-age-podcast .owl-nav {
    top: 48%;
    bottom: inherit !important;
    width: 68% !important;
  }
  .all-age-podcast .anatol, .all-age-podcast .samsam {
    position: absolute;
    display: block;
    z-index: 2;
  }
  .all-age-podcast .samsam {
    bottom: 26%;
    left: -0.2rem;
    max-width: 7rem;
  }
  .all-age-podcast .anatol {
    bottom: 27%;
    right: -7rem;
    max-width: 17rem;
  }
}
/*******************************************/
.but-still .description {
  font-weight: 600;
}
.but-still .products {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.but-still .products .item {
  flex-basis: 40%;
}
.but-still .ariol, .but-still .anatol, .but-still .pob {
  display: none;
}

/*******************************************/
@media only screen and (min-width: 768px) {
  .but-still .wrapper .section-content {
    overflow: hidden;
  }
  .but-still .wrapper .section-content .description {
    width: 62%;
  }
  .but-still .rounded-box {
    overflow: hidden;
  }
  .but-still .products .item {
    flex-basis: 30%;
  }
  .but-still .ariol, .but-still .anatol, .but-still .pob {
    position: absolute;
    display: block;
  }
  .but-still .ariol {
    top: 35%;
    right: 5rem;
    max-height: 10rem;
  }
  .but-still .anatol {
    bottom: -3rem;
    left: 1rem;
    max-width: 17rem;
  }
  .but-still .pob {
    bottom: -3rem;
    right: 2rem;
    max-width: 12rem;
  }
}
/*******************************************/
@media only screen and (min-width: 992px) {
  .but-still .wrapper .section-content {
    overflow: inherit;
  }
  .but-still .rounded-box {
    position: relative;
    overflow: inherit;
  }
  .but-still .rounded-box:after, .but-still .rounded-box:before {
    display: block;
    content: " ";
    position: absolute;
  }
  .but-still .rounded-box:before {
    background: transparent url("../img/rond-02.png") no-repeat center center;
    background-size: contain;
    bottom: -4rem;
    left: -5rem;
    width: 4.5rem;
    height: 7.5rem;
  }
  .but-still .rounded-box:after {
    background: transparent url("../img/rond-021.png") no-repeat center center;
    background-size: contain;
    top: -4rem;
    right: -7rem;
    width: 5.5rem;
    height: 7.5rem;
  }
  .but-still .rounded-box-content {
    position: relative;
  }
  .but-still .rounded-box .description {
    width: 62%;
  }
}
.page-wrapper > .breadcrumbs {
  margin-bottom: 0;
}

.cta {
  background-color: #FFEC00;
  border: 3px solid #FFEC00;
  border-radius: 40px;
  color: #0F0F11 !important;
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 15px;
  min-width: 10rem;
  padding: 12px 35px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: none;
}

.cta:hover, .cta.on {
  background-color: #ffdf3d;
  border-color: #ffdf3d;
  color: #0F0F11 !important;
}

.cta {
  padding: 8px 35px;
}

.chevron-yellow {
  position: relative;
  padding: 0 0 0 1.8rem;
}
.chevron-yellow:before {
  position: absolute;
  top: -0.2rem;
  left: 0rem;
  display: block;
  width: 2rem;
  height: 2rem;
  content: ">";
  color: #FDD600;
  font-weight: 800;
}

.age {
  margin: 0 0 2rem;
}
.age span {
  color: #FFFFFF;
  font-weight: 600;
  padding: 0.5rem 1.2rem;
  border-radius: 1.5rem;
  font-size: 1.3rem;
}
.age span.bg-1-2 {
  background: #F36201;
}
.age span.bg-3-5 {
  background: #F36201;
}
.age span.bg-6-8 {
  background: #FF6464;
}
.age span.bg-9-10 {
  background: #FF6464;
}
.age span.bg-11-14 {
  background: #8DDF34;
}
.age span.bg-15-20 {
  background: #8DDF34;
}

.font-dkbocadillo {
  font-family: "DK Bocadillo";
}

.rounded-box {
  max-width: 80rem;
  margin: 0 auto;
  padding: 3rem 0;
  border-radius: 2rem;
  position: relative;
  overflow: hidden;
}

.bg-white {
  background: #FFFFFF;
}

.surlined {
  background: transparent url("../img/box-surline.png") no-repeat left 17px;
  padding: 0 1rem 3rem;
  background-size: contain;
}
.surlined-wide {
  background: transparent url("../img/box-surline-wide.png") no-repeat left 19px;
  background-size: contain;
  padding: 0 1rem 1.5rem;
}
.surlined-thin {
  background: transparent url("../img/box-surline.png") no-repeat left 19px;
  background-size: contain;
  padding: 0 1rem 0.5rem;
}
.surlined-big {
  background: transparent url("../img/top-title-surlined.png") no-repeat left top;
  background-size: contain;
  padding: 0.6rem 1rem 1rem 4rem;
}
.surlined-small {
  background: transparent url("../img/small-title-surlined.png") no-repeat center center;
  background-size: cover;
  padding: 0 0.8rem;
}

section {
  margin: 0 auto 3.5rem;
}
section:last-child {
  margin: 0 auto 2.5rem;
}
section .wrapper .section-content {
  padding: 0;
}
section .wrapper .section-content .title {
  padding: 0 1rem;
}
section .wrapper .section-content .description {
  margin: 0 auto 2.5rem;
  width: 85%;
}

.bold {
  font-weight: 600;
}

.bolder {
  font-weight: 800;
}

.italic {
  font-style: italic;
}

.audio {
  margin: 0 auto;
  max-width: 128rem;
  background: #DBF0EF;
  padding: 2rem 0 1rem 0;
  text-align: center;
  font-size: 1.4rem;
}
.audio h1, .audio h2, .audio h3, .audio h4, .audio h5, .audio h6 {
  margin: 0;
  padding: 0;
}
.audio p {
  margin: 0 0 2rem;
}
.audio ul, .audio li {
  list-style: none;
  text-align: left;
  margin: 0;
  padding: 0;
}
.audio .h1 {
  font-size: 4rem;
  line-height: 1.3;
}
.audio .h2 {
  font-size: 3rem;
  line-height: 1.3;
}
.audio .subtitle {
  font-size: 2.5rem;
  line-height: 1.3;
}
.audio .box-content {
  margin: 0 auto 4rem;
}
.audio .box-content:last-child {
  margin: 0 auto;
}
.audio .picto-audio-end {
  position: relative;
}
.audio .picto-audio-end:after {
  background: transparent url("../img/picto-audio.png") no-repeat center center;
  background-size: contain;
  position: absolute;
  top: 0.5rem;
  right: -4rem;
  display: block;
  content: "";
  width: 4rem;
  height: 4rem;
}
.audio .picto-english-end {
  position: relative;
}
.audio .picto-english-end:after {
  background: transparent url("../img/flag-en.png") no-repeat center center;
  background-size: contain;
  position: absolute;
  top: -3px;
  right: -5rem;
  display: block;
  content: "";
  width: 5rem;
  height: 4.4rem;
}
.audio .carousel .item {
  flex-basis: 45%;
}
.audio .carousel .item-picture {
  display: flex;
  justify-content: center;
  margin: 0 auto 1rem;
  align-items: center;
  height: 17.5rem;
}
.audio .carousel .item-name {
  font-weight: 600;
  font-style: italic;
}
.audio .carousel .item-name a, .audio .carousel .item-description a {
  text-decoration: underline;
  font-weight: 600;
}
.audio .carousel .item-name a:hover, .audio .carousel .item-description a:hover {
  text-decoration: none;
}
.audio .owl-nav {
  z-index: 2;
  position: absolute;
  bottom: 34%;
  width: 95%;
  margin: auto;
  left: 0;
  right: 0;
}
.audio .owl-nav:after {
  content: " ";
  clear: both;
}
.audio .owl-nav button {
  width: 40px;
  height: 40px;
  background: #FFEC00 !important;
  border-radius: 25px !important;
  box-shadow: 3px 3px 1px #0F0F11 !important;
}
.audio .owl-nav button:hover {
  background: #FFFFFF;
}
.audio .owl-nav button span {
  font-size: 4rem;
  font-weight: 800;
}
.audio .owl-nav button.owl-prev {
  float: left;
  margin: 0 0 0 1.5rem;
}
.audio .owl-nav button.owl-next {
  float: right;
  margin: 0 1.5rem 0 0;
}

/*******************************************/
@media only screen and (min-width: 768px) {
  .audio {
    font-size: 1.6rem;
  }
  .audio .box-content {
    margin: 0 auto 6rem;
  }
}