/**
 * Font-size calcul
 */
/**
* Trigger hover effect on different pseudo-classes
* depending on touch or no-touch device
* => no-touch > on hover and on focus (by default, can be disable)
* => touch > on active, and when a class is added on the targeted element (optionnal)
*
* @param $focus (boolean) set to false to disable the hover effect on focus (no-touch only)
* @param $touchClass (string) the hover effect will be set if the targeted element has this class
*/
/**
* Set an item to 100% of its parent's width and height
*/
/**
* Set an item to 100% of the window width (and 100% of its parent height)
* even if located in a limited width wrapper
*/
/**
* Set an item to 100% of the window width
* even if located in a limited width wrapper,
* but keep it in the flow
*/
/**
* To call on an <img> tag.
* Set the image size to adapt to its parent
*/
/**
* Like img-cover(), but for responsive img with <picture>
* /!\ To call on <picture>, or <img> parent.
*/
/**
* Floating form items
* if $class2 equals 'empty', the next item is cleared
*/
/*
A simple little SCSS mixin for creating scrim gradients
Inspired by Andreas Larson - https://github.com/larsenwork
https://css-tricks.com/easing-linear-gradients/
*/
/**
Convert em value into px
 */
/**
Fluid font-size between 2 breakpoints.
Font-size must be in px, use em2px() function to convert from em.
*/
/**
Fluid value between 2 breakpoints (can be use for other than font-size)
(Font-size must be in px, use em2px() function to convert from em)
*/
/*
Fluid value - clamp version (2023)
@see https://www.smashingmagazine.com/2022/10/fluid-typography-clamp-sass-functions/
 */
/**
 * Animated placeholder for images or divs (FB like)
 */
/*** SPECIFIC TO CURRENT PROJECT ***/
/************************************
 * Grids
 */
/************************************
 * Breakpoints
 */
/************************************
 * Transitions
 */
/************************************
 * Paths
 */
/************************************
 * Fonts
 */
/*** LOCAL FONTS ***/
/*** FONTS ***/
/*** VARIABLES TO USE ***/
/************************************
 * Font Sizes
 */
/************************************
 * COLORS
 */
/************************************
 * THEME
 */
/**
 * Font-size calcul
 */
/**
* Trigger hover effect on different pseudo-classes
* depending on touch or no-touch device
* => no-touch > on hover and on focus (by default, can be disable)
* => touch > on active, and when a class is added on the targeted element (optionnal)
*
* @param $focus (boolean) set to false to disable the hover effect on focus (no-touch only)
* @param $touchClass (string) the hover effect will be set if the targeted element has this class
*/
/**
* Set an item to 100% of its parent's width and height
*/
/**
* Set an item to 100% of the window width (and 100% of its parent height)
* even if located in a limited width wrapper
*/
/**
* Set an item to 100% of the window width
* even if located in a limited width wrapper,
* but keep it in the flow
*/
/**
* To call on an <img> tag.
* Set the image size to adapt to its parent
*/
/**
* Like img-cover(), but for responsive img with <picture>
* /!\ To call on <picture>, or <img> parent.
*/
/**
* Floating form items
* if $class2 equals 'empty', the next item is cleared
*/
/*
A simple little SCSS mixin for creating scrim gradients
Inspired by Andreas Larson - https://github.com/larsenwork
https://css-tricks.com/easing-linear-gradients/
*/
/**
Convert em value into px
 */
/**
Fluid font-size between 2 breakpoints.
Font-size must be in px, use em2px() function to convert from em.
*/
/**
Fluid value between 2 breakpoints (can be use for other than font-size)
(Font-size must be in px, use em2px() function to convert from em)
*/
/*
Fluid value - clamp version (2023)
@see https://www.smashingmagazine.com/2022/10/fluid-typography-clamp-sass-functions/
 */
/**
 * Animated placeholder for images or divs (FB like)
 */
/*** SPECIFIC TO CURRENT PROJECT ***/
/************************************
 * Grids
 */
/************************************
 * Breakpoints
 */
/************************************
 * Transitions
 */
/************************************
 * Paths
 */
/************************************
 * Fonts
 */
/*** LOCAL FONTS ***/
/*** FONTS ***/
/*** VARIABLES TO USE ***/
/************************************
 * Font Sizes
 */
/************************************
 * COLORS
 */
/************************************
 * THEME
 */
.job-offers-teaser {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(13px, 0.14vw + 11.33px, 14px);
  padding-block: 12px;
}
@media screen and (max-width: 980px) {
  .job-offers-teaser {
    padding-right: 10px;
  }
}
.job-offers-teaser:hover, .job-offers-teaser:focus {
  color: var(--c-secondary);
}
.job-offers-teaser:hover .job__link:before, .job-offers-teaser:focus .job__link:before {
  opacity: 1;
}
.job-offers-teaser .body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding-right: 15px;
}
.job-offers-teaser .right {
  -ms-flex-item-align: end;
      align-self: flex-end;
  margin-left: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: clamp(10px, 2.78vw + -23.33px, 30px);
  min-width: 115px;
}
@media screen and (max-width: 980px) {
  .job-offers-teaser .right {
    min-width: unset;
  }
}
.job-offers-teaser .date-container {
  min-width: 75px;
  margin-right: 15px;
}
.job-offers-teaser .type-container {
  min-width: 30px;
}
.job-offers-teaser .job__domain, .job-offers-teaser .job__type {
  color: var(--c-secondary-light);
}
.job-offers-teaser .job__type {
  text-align: right;
}
.job-offers-teaser .job__title {
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: clamp(15px, 0.42vw + 10px, 18px);
}
.job-offers-teaser .job__link {
  position: relative;
  font-family: "Barlow", sans-serif;
  font-weight: 300;
  font-style: normal;
  margin-top: 0;
  white-space: pre;
  padding-inline: 3px;
}
@media screen and (max-width: 980px) {
  .job-offers-teaser .job__link {
    display: none;
  }
}
.job-offers-teaser .job__link:before {
  position: absolute;
  content: "";
  background-color: var(--c-main);
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 5px;
  z-index: -1;
  opacity: 0;
  -webkit-transition: ease-in-out 0.5s;
  transition: ease-in-out 0.5s;
}

body.page-template-page-employer-brand .last-job-offers-container {
  position: relative;
  padding-bottom: 0;
  margin-top: clamp(150px, 9.04vw + 61.38px, 235px);
}
body.page-template-page-employer-brand .last-job-offers-container__top {
  position: absolute;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  margin-left: clamp(80px, 6.38vw + 17.45px, 140px);
  top: clamp(-85px, 1.06vw + -95.43px, -75px);
}
body.page-template-page-employer-brand .last-job-offers-container__top .brand-img-1 {
  width: clamp(200px, 16.94vw + -3.33px, 322px);
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}
body.page-template-page-employer-brand .last-job-offers-container__top .brand-img-2 {
  width: clamp(300px, 26.39vw + -16.67px, 490px);
}
@media screen and (max-width: 1200px) {
  body.page-template-page-employer-brand .last-job-offers-container__top {
    margin-left: 0;
  }
}
body.page-template-page-employer-brand .last-job-offers-container__bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: clamp(50px, 14.58vw + -125px, 155px);
  padding-right: clamp(50px, 31.25vw + -325px, 275px);
}
@media screen and (max-width: 1200px) {
  body.page-template-page-employer-brand .last-job-offers-container__bottom {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding-right: 0;
  }
}
body.page-template-page-employer-brand .last-job-offers-container__bottom .bg-yellow {
  position: relative;
  background-color: var(--c-main);
  width: clamp(400px, 38.19vw + -58.33px, 675px);
  height: 825px;
}
@media screen and (max-width: 1200px) {
  body.page-template-page-employer-brand .last-job-offers-container__bottom .bg-yellow {
    width: 100%;
    height: 310px;
  }
}
@media screen and (max-width: 480px) {
  body.page-template-page-employer-brand .last-job-offers-container__bottom .bg-yellow {
    height: clamp(200px, 104.76vw + -192.86px, 310px);
  }
}
body.page-template-page-employer-brand .last-job-offers-container__bottom .last-job-offers {
  padding-bottom: clamp(45px, 6.94vw + -38.33px, 95px);
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media screen and (max-width: 1200px) {
  body.page-template-page-employer-brand .last-job-offers-container__bottom .last-job-offers {
    padding-inline: 10px;
  }
}
body.page-template-page-employer-brand .last-job-offers-container__bottom .last-job-offers__text {
  max-width: clamp(400px, 28.47vw + 58.33px, 605px);
  margin-bottom: clamp(60px, 12.5vw + -90px, 150px);
  -ms-flex-item-align: end;
      align-self: flex-end;
}
@media screen and (max-width: 1200px) {
  body.page-template-page-employer-brand .last-job-offers-container__bottom .last-job-offers__text {
    max-width: 100%;
  }
}
body.page-template-page-employer-brand .last-job-offers-container__bottom .last-job-offers .job-offers {
  margin-bottom: 45px;
}
body.page-template-page-employer-brand .last-job-offers-container__bottom .last-job-offers .job-offers li {
  border-bottom: 1px solid #D3D3D3;
}
body.page-template-page-employer-brand .last-job-offers-container__bottom .last-job-offers .job-offers .job-offers-teaser .job__domain, body.page-template-page-employer-brand .last-job-offers-container__bottom .last-job-offers .job-offers .job-offers-teaser .job__type, body.page-template-page-employer-brand .last-job-offers-container__bottom .last-job-offers .job-offers .job-offers-teaser .job__date {
  font-size: clamp(14px, 0.13vw + 13.51px, 16px);
}
body.page-template-page-employer-brand .last-job-offers-container__bottom .last-job-offers .job-offers .job-offers-teaser .job__title {
  font-size: clamp(15px, 0.32vw + 13.79px, 20px);
}
body.page-template-page-employer-brand .last-job-offers-container__bottom .last-job-offers .job-offers .job-offers-teaser .job__link {
  font-size: clamp(14px, 0.06vw + 13.76px, 15px);
}
@media screen and (max-width: 1200px) {
  body.page-template-page-employer-brand .last-job-offers-container__bottom .last-job-offers .job-offers .job-offers-teaser .job__link {
    display: none;
  }
}
/*# sourceMappingURL=employer-brand.css.map */