/*-----------------------------*\
 #JOB-SECTION

 TEXTS
- paramètres globaux
    job-title
    job-text
- spécification
    job-text--detail
    job-text--reference
    job-text--list
    job-text--list::before
    job-text--bloc

SECTION CONTAINER
- job-section
- job-section--wrap
- job-article

ARTICLE STRUCTURE
- job-header
- job-body
- scrol-bloc

 HEADER
- job-header__img
- job-header__detail
    reference
      reference__img
    detail
      detail__img
      detail--last

ASIDE
-job-aside
-job-aside__wrapper
-job-aside__img
-job-title--aside
Animation: - job-title--aside--hide
Animation: - job-aside__img--hide

BODY
Animation: - profil

ANIMATION
- carousel
- carousel > li
- side-pos
- front-pos
- mid-pos
- back-pos
- @keyframes show
- hide
- job-section--hide


\*-----------------------------*/


/*-----------------------------*\
 #TEXTS
\*-----------------------------*/

/* paramètre global */

html *
{
   font-family: "urbanist" !important;
}

/* tous les "titre"  */
 .job-title {
   color: var(--darkgrey);
   font-family: "urbanist";
   font-weight:800;
   font-style: normal;
   font-size: var(--title);
   padding-top: var(--big-space);
   padding-bottom: var(--medium-space);
   transition: all 1s linear;
   text-transform: uppercase;
 }
 .job-title.job-title_big{
  font-size: var(--big-title);
 }

 .job-title--hide{
   margin-left: -100%;
   opacity: 0;
   transition: all 2s linear;
 }

 /* Base pour tous les autres textes */
 .job-text {
   margin: 0px;
   font-family: "urbanist";
 }

/* + spécification diverse */
 .job-text--detail {
   font-size: var(--small-typo);
   font-weight: 800 !important;
   text-transform: uppercase;
 }

  /* spec couleurs abici vs interima */
 .job-text--detail.orange {
  color: var(--orange);
 }
 .job-text--detail.red {
  color: var(--red);
 }
 .job-text--detail.blue {
  color: var(--blue);
 }
 .job-text--reference {
   color: var(--darkgrey);
   font-size: var(--ref-typo);
   text-transform: uppercase;
   font-weight: 500 !important;
 }

/* + spécification "liste" */
 .job-text--list {
   display: inline-flex;
   align-items: baseline;
   width:100%;
   color: var(--darkgrey);
   font-size: var(--medium-typo);
   padding-bottom: var(--extrasmall-space)
 }

 .job-text--list::before {
   content: "⟶";
   font-size: var(--medium-typo);
   font-weight: bold !important;
   padding-right: var(--small-space);
 }


.job-text--list__last {
  padding-bottom: var(--small-space) !important;
}
/* + spécification paragraphe */
 .job-text--bloc {
   color: var(--darkgrey);
   font-size: var(--medium-typo);
   padding-bottom: var(--small-space);
   text-align: justify;
   display:flex;
 }


 /*-----------------------------*\
  #SECTION CONTAINER
 \*-----------------------------*/

.job-section {
  width:70vw;
  margin-left: 0px;
  height: 100vh;
  display: block;
  position: absolute;
  transition: margin-left 2s ease-out;
  transition-delay: 2s;;
}

.job-section--wrap {
  width: 100%;
  height: 100vh;
  position: relative;
}

.job-article {
position: absolute;
width:80%;
height: 100vh;
background-color: white;
}


/*-----------------------------*\
 #ARTICLE STRUCTURE
\*-----------------------------*/

.job-header {
  display:flex;
}

.job-body {
  padding-left: calc(var(--big-space) + var(--medium-space)) ;
  padding-right: calc(var(--small-space) + var(--medium-space));
  max-height: 60vh;
  overflow: hidden;
}


.job-body ul li:before {
  content: "\e5c8";
  font-family: 'Material Symbols Outlined';
  font-size: 18px;
  left: 0;
  top: 1px;
  margin-right:10px;
}
.job-body.Abici ul li:before {
  color: var(--red);
}
.job-body.Flexsis ul li:before {
  color: var(--orange);
}
.job-body.Medicalis ul li:before {
  color: var(--blue);
}
/*-----------------------------*\
 #HEADER
\*-----------------------------*/

/* image */

.job-header__img {
  width: 30%;
  /*background-image:linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url("https://unsplash.it/200") ;*/
  background-size: cover;
  border-right: inset 0.4vw white;
  border-bottom: inset 10px white;
}


/* figcaption contain  - sub contain */

.job-header__detail{
  width: 55%;
  overflow: hidden;
  padding-left: var(--small-space);
  padding-right: calc(var(--small-space) + var(--medium-space));
  margin-bottom: 10px;
}


/* figcaption  "content" gauche*/
.reference {
  width: 25%;
  height: inherit;
  padding-right: var(--medium-space);
  float: left;
}

.reference.orange{
  border-right: solid 2px var(--orange);
}
.reference.red{
  border-right: solid 2px var(--red);
}
.reference.blue{
  border-right: solid 2px var(--blue);
}

/* qr code img*/
.reference__img {
  width:100%;
  margin-bottom: var(--extrasmall-space);
}


/* figcaption "content" liste droite */
.detail {
  width: 75%;
  padding-left: var(--small-space);
  margin-bottom: var(--small-space);
  float: right;
  display: flex;
  align-items: center;

}

/* pour le dernier de la list */
.detail--last {
  margin-bottom: 0px !important;
}

/* picto */
.detail__img {
  width: 12%;
  margin-right: var(--small-space);
}


/*-----------------------------*\
 #ASIDE
\*-----------------------------*/

.job-aside {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: calc(100%);
}

.job-aside__wrapper {
  width: 100vh;
  height: 5vw;
  transform-origin: left bottom;
  transform: rotate(90deg) translate(-5vw, 2px);
  display: inline-flex;
  align-items: center;
  position: absolute;
  box-shadow: 0px -10px 20px rgba(0, 0, 0, 0.3);
}
.job-aside__wrapper.orange{
  background-color: var(--orange);
}
.job-aside__wrapper.red{
  background-color: var(--red);
}
.job-aside__wrapper.blue{
  background-color: var(--blue);
}

.job-aside__img {
  width: 30vh;
  height: 5vw;
  /*background-image:linear-gradient(to left, var(--orange), rgba(239, 123, 16, 0), rgba(239, 123, 16, 0)), url("https://unsplash.it/200");*/
  background-size: cover;
}

.job-title--aside {
  color: white !important;
  padding: 0px !important;
  overflow: hidden;
  white-space: nowrap;
}



/*Animation*/

.postulez {
  display: none;
  opacity: 0.5;
  color: white;
  padding: 0px;
  padding-left: 30vh;
  font-family: "urbanist";
  font-weight:800;
  font-style: normal;
  font-size: var(--title);
  text-transform: uppercase;
}
.job-title--aside--hide{
  opacity: 0.2;
  display: none;
  transition: opacity 0.5s ease-out;
  transition-delay: display 1;
}

.job-aside__img--hide {
  width: 0px;
  background-image:linear-gradient(to left, var(--orange), rgba(255, 153, 51, 0)), url("https://unsplash.it/200");
  transition: 1s ease-in;
}
.job-aside__img--hide.abici{
  background-image:linear-gradient(to left, var(--red), rgba(255, 153, 51, 0)), url("https://unsplash.it/200");
}
/*-----------------------------*\
 #BODY
\*-----------------------------*/
/*Animation*/
.profil {
  transition-delay: 1;
}

/*-----------------------------*\
 #MIXIN ANIMATION
\*-----------------------------*/

.carousel{
  display: inline-flex;
  align-items: center;
  height:100%;
}

.carousel > li {
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.side-pos {
  margin-left: -80vw !important;
  z-index: 4;
}

.front-pos {
  z-index: 3;
}

.mid-pos {
  margin-left:7.7vw;
  z-index: 2;
  transform: scale(0.9);
}

.back-pos {
  z-index: 1;
  margin-left:15vw;
  transform: scale(0.8);
  animation-name: show;
  animation-duration: 1.5s;
  animation-iteration-count: 1;

}
/*back-pos animation*/
@keyframes show {
  0% {opacity: 0; margin-left:10vw;}
  50% {opacity: 0;margin-left:10vw;}
  100% {opacity: 1;margin-left:15vw;}
}
.hide {
  display: none !important;
}

.description, .profil , .list{
  transition: all 2s ease-out;
  font-family: "urbanist";
  font-size: 23px !important;
}