/**
 * @file
 * Global rules for the PF Page
 *
 * This stylesheet is used to custom the global "Pierre Fabre expertise" across all the different PFHC websites.
 * Change only the color, the grid or the fonts variables at the beginning of the file.
 */



/**
 * Drupal Classes
 */

/**
 * Hero
 */
.page__header--with-background{
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  padding:1.5em 0em;
  min-height:250px;
}
.page__header-title h1{
  color: #fff;
}
@media screen and (min-width:550px) {
  .page__header--with-background{
    background-position: center top 33%;
    background-size: 145%;
  }
}
@media screen and (min-width:750px) {
  .page__header{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .page__header--with-background{
    padding:1.5em 0em;
  }
}
@media screen and (min-width:1250px) {
  .page__header--with-background{
    min-height:330px;
    padding-top:4rem;
  }
}
@media screen and (min-width:1550px) {
  .page__header--with-background{
    background-size: 100%;
  }
}
/* Hero -- Title -- Hero */
@media screen and (min-width:750px) {
  .page__header-title h1{
    font-size: 2em;
  }
}
@media screen and (min-width:1000px) {
  .page__header-title h1{
    font-size: 2.5em;
  }
}
@media screen and (min-width:1250px) {
  .page__header-title h1{
    font-size: 2.875em;
  }
}

/* Hero -- Breadcrumbs -- Hero */
.page__header-breadcrumbs{
  margin-top:0.5rem;
}
.page__header-breadcrumbs li{
  font-size: 1em;
  font-weight: 400;
  font-display: swap;
}
.page__header-breadcrumbs li,
.page__header-breadcrumbs a{
  color:#fff;
}
@media screen and (min-width:750px) {
  .page__header-breadcrumbs{
    margin-top:1rem;
  }
}


/* Color variables */
.pf-main-color,
.pf-main-color-list li:before{
  color:#E66000;
}
.pf-main-color-border{
  border-color:#E66000;
}
.pf-main-color-background{
  background-color:#E66000;
}
/* .pf-global-page .pf-cta a{
  background:#E66000;
  color:#555D63;
  border:2px solid #E66000;
  font-weight: 700;
}
.pf-global-page .pf-cta a:hover{
  transform: translateY(-3px);
  box-shadow: 0px 10px 15px rgb(134 184 226 / 20%);
} */
/* Grid variables */
.pf-grid-row{
  max-width: 1150px;
  margin: 0 auto;
  padding:0 1rem;
}
@media all and (min-width: 750px) {
  .pf-grid-row{
    width: 85%;
    padding:0;
  }
}

/* Grid variables */
.pf-grid-row--s{
  max-width:595px;
  padding:0 15px;
  width:100%;
  margin:0 auto;
}



/* Font variables */

.pf-subtitle{
  color:#000;
}


/* MAIN */
.pf-global-page{
  font-size:17px;
  line-height:1.35;
  background-color:#fff;
}
.pf-global-page h2,
.pf-illustrated-text h2,
.pf-simple-image h2,
.pf-simple-text h2 {
  color: var(--color-neutral--dark-grey);
}
#h2-margin {
  margin-top:0 ;
}
.pf-global-page ul{
  font-size:17px;
  line-height:1.35;
  padding-left:2rem;
}
.pf-global-page ul li{
  position: relative;
  padding:0 0 0.75rem;
}
.pf-global-page a{
  color:#000;
  text-decoration: underline;
}

.pf-subtitle{
  font-weight: 700;
  margin:0;
  font-size:1.25em;
}
.pf-subtitle p{
  margin:0;
}

.pf-cta a {
  text-decoration: none;
  max-width: 350px;
  margin: 0 auto;
}
.pf-cta--over-image {
  margin-top: 1rem;
}
.pf-cta--over-image a{
  max-width: 100%;
  color: #fff;
}
@media screen and (min-width:768px) {
  .pf-subtitle{
    font-size:1.5em;
  }
}
@media screen and (min-width:850px) {
  .pf-cta--over-image{
    position: absolute;
    bottom:2rem;
    left:50%;
    transform:translateX(-50%);
    margin: 2.5rem auto;
  }
  .pf-cta a {
    margin: 0;
  }
}
@media screen and (min-width:1024px) {
  .pf-subtitle{
    font-size:2em;
  }

}

/*Hero*/
.pf-hero{
  background: linear-gradient(#003f6e 0%, #0069ad 100%);
}
.pf-hero__content{
  color:#fff;
  padding:2rem;
}
.pf-hero__title{
  margin:0;
  font-size:1.5em;
}
.pf-hero__text{
  margin:0;
  line-height: 1.5rem;
}
.pf-hero__image{
  display: none;
}
.pf-hero__quote{
  font-style: normal;
  font-size:0.85em;
  margin:1rem 0 0;
}
.pf-hero--alternative{
  background-image:url('../images/pf-global-page/hero-pierre-fabre.png');
  background-position: center right -15rem;
  background-size: cover;
  background-repeat: no-repeat;
  color:#fff;
}
.pf-hero--alternative__content{
  max-width: 611px;
  padding:8rem 0;
}
.pf-hero--alternative__text{
  font-size:1em;
  font-weight: 700;
  margin:0;
}

@media screen and (min-width:600px) {
  .pf-hero__title{
    font-size:1.75em;
  }
}
@media screen and (min-width:768px) {
  .pf-hero__title{
    font-size:2em;
  }
  .pf-hero--alternative__text{
    font-size: 1.5em;
  }
  .pf-hero__quote{
    font-size: 18px;
  }
}
@media screen and (min-width:1024px) {
  .pf-hero__wrapper{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .pf-hero__content{
    width:50%;
    font-size:0.85em;
    padding:0 0 0 4rem;
  }
  .pf-hero__image{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width:47%;
  }
  .pf-hero__image img{
    display: block;
  }
  .pf-hero__text{
    max-width:450px;
  }
  .pf-hero--alternative__text{
    font-size: 25px;
    line-height: 140%;
  }
}
@media screen and (min-width:1280px) {
  .pf-hero__content{
    font-size:1em;
    padding:0 0 0 7rem;
  }
  .pf-hero__title{
    font-size:2.25em;
  }
  .pf-hero--alternative{
    background-position: center right;
  }
}
@media screen and (min-width:1420px) {
  .pf-hero__content{
    padding:0 0 0 8rem;
  }
}
@media screen and (min-width:1650px) {
  .pf-hero__content{
    padding:0 0 0 10rem;
  }
}

/* Illustrated Text */
.pf-illustrated-text{
  padding:2rem 0;
}
.pf-illustrated-text__wrapper{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.pf-illustrated-text__content{
  margin-top:2rem;
}
.pf-illustrated-text__image--desktop {
  display: none;
}
.pf-illustrated-text__image--mobile {
  margin: 2rem auto;
}
.pf-illustrated-text__image--mobile img {
  margin: auto;
}
@media screen and (min-width:768px) {
  .pf-illustrated-text{
    padding:4rem 0;
  }
  .pf-illustrated-text__wrapper{
    flex-direction: row;
    justify-content: space-between;
  }
  .pf-illustrated-text__image--desktop {
    display: block;
  }
  .pf-illustrated-text__image--mobile {
    display: none;
  }
  .pf-illustrated-text__content{
    margin-top:0;
  }
  .pf-illustrated-text--position-image-right .pf-illustrated-text__content,
  .pf-illustrated-text--position-image-left .pf-illustrated-text__image{
    order:1;
  }
  .pf-illustrated-text--position-image-right .pf-illustrated-text__image,
  .pf-illustrated-text--position-image-left .pf-illustrated-text__content{
    order:2;
  }
  .pf-illustrated-text--ratio-60-40.pf-illustrated-text--position-image-left .pf-illustrated-text__image,
  .pf-illustrated-text--ratio-60-40.pf-illustrated-text--position-image-right .pf-illustrated-text__content{
    width: 60%;
  }
  .pf-illustrated-text--ratio-60-40.pf-illustrated-text--position-image-right .pf-illustrated-text__image,
  .pf-illustrated-text--ratio-60-40.pf-illustrated-text--position-image-left .pf-illustrated-text__content{
    width: 35%;
  }
  .pf-illustrated-text--ratio-40-60.pf-illustrated-text--position-image-left .pf-illustrated-text__image,
  .pf-illustrated-text--ratio-40-60.pf-illustrated-text--position-image-right .pf-illustrated-text__content{
    width: 35%;
  }
  .pf-illustrated-text--ratio-40-60.pf-illustrated-text--position-image-right .pf-illustrated-text__image,
  .pf-illustrated-text--ratio-40-60.pf-illustrated-text--position-image-left .pf-illustrated-text__content{
    width: 60%;
  }
  .pf-illustrated-text__image,
  .pf-illustrated-text__content{
    width: 48%;
  }
  .pf-illustrated-text-multiple .pf-illustrated-text{
    padding:0;
  }
  .pf-illustrated-text-multiple .pf-illustrated-text__wrapper{
    align-items: flex-start;
  }
  .pf-illustrated-text-multiple .pf-illustrated-text__content{
    padding-top:1rem;
  }
  .pf-illustrated-text-multiple .pf-illustrated-text:nth-child(2){
    padding-bottom:1rem;
  }
  .pf-illustrated-text-multiple .pf-illustrated-text:nth-child(2) .pf-illustrated-text__image{
    transform:translateY(20px);
  }
}
@media screen and (min-width:1024px) {
  .pf-illustrated-text{
    padding:5rem 0;
  }
  .pf-illustrated-text-multiple .pf-illustrated-text__content{
    padding-top:3rem;
  }
  .pf-illustrated-text--ecocert{
    padding-top:0;
  }
}
@media screen and (min-width:1280px) {
  .pf-illustrated-text-multiple .pf-illustrated-text__content{
    padding-top:6rem;
  }
  .pf-illustrated-text-multiple .pf-illustrated-text:nth-child(2) .pf-illustrated-text__image{
    transform:translateY(-130px);
  }
}
/* Simple image */
.pf-simple-image{
  padding:1rem 0;
}
.pf-simple-image__wrapper{
  text-align: center;
  position: relative;
}
.pf-simple-image .pf-subtitle{
  padding-bottom:2rem;
  text-align: left;
}
.pf-simple-image__legend{
  text-align: center;
  color:#6B6B6B;
  font-size:0.875em;
  padding-top:1rem;
}
.pf-simple-image--madeinfrance{
  padding-bottom:0;
}

/* Multiple text */
.pf-multiple-text{
  padding-top:2rem;
}
.pf-multiple-text__wrapper{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding:1rem 0;
}
@media screen and (min-width:768px) {
  .pf-multiple-text__wrapper{
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  .pf-multiple-text_content{
    width:48%;
  }
}
@media screen and (min-width:1000px) {
  .pf-multiple-text{
    padding:2rem 0;
  }
}


/* Simple text */
.pf-simple-text{
  padding:2rem 0;
}
.pf-simple-text--ecocert{
  padding-bottom:0;
}
.pf-simple-text--madeinfrance{
  padding:0;
}

/* Listing Colors */
.pf-listing-numbers__item{
  border-bottom-width:2px;
  border-bottom-style: solid;
  padding:1rem 0;
  font-size: 0.75em;
}
.pf-listing-numbers__item:last-child{
  border-bottom:none;
}
.pf-listing-numbers__item p{
  margin:0;
}
.pf-listing-numbers__title{
  font-weight: 700;
  font-size:2em;
}
.pf-listing-numbers__text{
  font-size: 18px;
  line-height: 160%;
  margin-top: 14px !important;
}
@media screen and (min-width:1024px) {
  .pf-listing-numbers__item{
    font-size: 1em;
  }
}

/* pf-footer */
.pf-footer{
  text-align: center;
  padding:2rem 0;
  margin:2rem 0 0;
}
.pf-footer__links{
  padding-top:2rem;
}
.pf-footer__links p{
  font-size:1.45em;
}
.pf-footer__links-wrapper{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.pf-footer__links-item{
  margin:0 5px;
}
.pf-footer__links-item img{
  width: 52px;
  height: 52px;
}
.pf-footer__links-item a {
  text-decoration: none;
}
.pf-footer__brand picture {
  display: block;
  width: 360px;
  max-width: 100%;
  margin: 0 auto;
}
@media screen and (min-width:600px) {
  .pf-footer{
    margin-bottom: 4rem;
  }
  .pf-footer__links-item{
    margin:0 15px;
  }
}

/* PF stats */
.pf-stats__item{
  text-align: center;
}
.pf-stats__item p{
  margin:0;
}
.pf-stats__number{
  width: 116px;
  height:116px;
  border-radius:50%;
  position: relative;
  display: inline-block;
}
.pf-stats__number-inner{
  color:#fff;
  font-size:2.75em;
  position: absolute;
  top:calc(50% - 5px);
  left:50%;
  transform:translateX(-50%) translateY(-40%);
  line-height: 1;
}
.pf-stats__item{
  margin:0 0 2rem;
}
@media screen and (min-width:600px) {
  .pf-stats__wrapper{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-around;
  }
}


/**
 * Image With Text
 */

.pf-global-page .image-with-text {
  display: flex;
  flex-direction: column-reverse;
  margin: 1rem 0;
}
@media all and (min-width: 1000px){
  .pf-global-page .image-with-text {
    margin: 6rem 0;
  }
}

.pf-global-page .image-with-text--over {
  margin-top: -10rem;
  position: relative;
  z-index: 5;
}
.pf-global-page .image-with-text__medias {
  padding: 1.5rem 1.5rem 81px;
  border-radius: 16px;
  background: var(--color-neutral--white);
  box-shadow: -1px 22px 49px 0px rgba(92, 92, 92, 0.10), -4px 90px 90px 0px rgba(92, 92, 92, 0.09);
  max-width: 390px;
  width: 100%;
  height: fit-content;
}
.pf-global-page .image-with-text__wrapper {
  position: relative;
  overflow: hidden;
}
.pf-global-page .image-with-text__image img {
  border-radius: 16px;
}
.pf-global-page .image-with-text__content {
  margin: 1rem 0;
}
.pf-global-page .image-with-text__content ul {
  margin: 0;
}
.pf-global-page .image-with-text__cta {
  margin: 1rem 0;
}
@media all and (min-width: 450px) {
  .pf-global-page .image-with-text__medias {
    margin: 0 auto;
  }
}
@media screen and (min-width: 850px) {
  .pf-global-page .image-with-text {
    display: grid;
    grid-template-columns: repeat(2, calc(50% - 0.75rem));
    gap: 1.5rem;
    align-items: center;
  }
  .pf-global-page .image-with-text__medias {
    max-width: 630px;
    padding: 1.5rem 1.5rem 101px;
  }
  .pf-global-page .image-with-text__content {
    margin: 0;
    max-width: 530px;
  }
  .pf-global-page .image-with-text--over {
    margin-top: -3rem;
    align-items: initial;
  }
  .pf-global-page .image-with-text--over .image-with-text__content{
    margin-top: 3rem;
  }
}
@media screen and (min-width: 1000px) {
  .pf-global-page .image-with-text__content {
    margin: 3rem 0;
  }
}
@media screen and (min-width: 1300px) {
  .pf-global-page .image-with-text {
    grid-template-columns: repeat(2, calc(50% - 1rem));
    gap: 2rem;
  }
}


/**
 * Modifiers Left
 */


@media all and (min-width: 850px) {
  .pf-global-page .image-with-text--left .image-with-text__medias {
    transform: rotate(-4.811deg);
  }
  .pf-global-page .image-with-text--left .image-with-text__content {
    margin-left: auto;
    padding-left: 1rem;
  }
}

/**
 * Modifiers right
 */


@media all and (min-width: 850px) {
  .pf-global-page .image-with-text--right .image-with-text__medias {
    transform: rotate(6.222deg);
    order: 2;
  }
  .pf-global-page .image-with-text--right .image-with-text__content {
    margin-right: auto;
    padding-right: 1rem;
    order: 1;
  }
}


.pf-global-page .image-with-text__image {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}
.pf-global-page .image-with-text__image::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: block;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.08) 100%);
  opacity: 0.8;
  z-index: 9;
}
.pf-main-color-list li::marker {
  display: none;
}
.pf-main-color-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.pf-main-color-list li::before {
  content: '';
  display: block;
  min-width: 18px;
  height: 18px;
  background: url('../images/pf-global-page/puce.svg');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateY(2px);
  position: relative;
  border-radius: unset;
  width: unset;
}