h2 {
  font-weight: var(--light);
  font-size: 4rem;
  text-align: center;
}
/*****************************/
/* première partie IMAGE MAP */
/*****************************/

#image-map {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: row-reverse;
  align-items: center;
  margin: 6vw 0 10vw 0;
  width: 100vw;
}

#image-map .info {
  position: relative;
  top: 0vw;
  right: 0vw;
  width: 200%;
  aspect-ratio: 16/9;
}

#image-map .content-container {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
}

#image-map .content {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  /* background-color: aqua; */
  width: 35vw;
  text-align: left;
}

#image-map h2 {
  margin: 1.5vw 2vw 0 2vw;
  font-weight: var(--bold);
  text-align: left;
  font-size: 2.5rem;
}

#image-map .text p {
  font-weight: var(--regular);
  margin: 0 2vw;
  font-size: 2rem;
}

#image-map .button-apply {
  align-self: center;
  width: 100%;
  height: auto;
  margin: 5vw 0 5vw 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
#image-map .button-apply a {
  display: block;
  /* border: rgb(var(--darkest)) solid 0.2vw; */
  width: 50%;
  border-radius: 1vw;
  padding: 2vw;
  margin: 0.5vw 1vw;
  text-align: center;
  transition: background-color 0.5s;
  background: rgba(var(--green), 0.5);
  background: linear-gradient(
    90deg,
    rgba(var(--blue), 0.2) 10%,
    rgba(var(--purple), 0.2) 100%
  );
  box-shadow: 0px 0px 10px -3px rgb(var(--darkest));
  transition: box-shadow 0.1s;
}

#image-map .button-apply a:hover {
  box-shadow: 0px 0px 5px -3px rgb(var(--darkest));
  transition: box-shadow 0.1s;
}

#image-map .button-apply a p {
  margin: 0;
  left: 0;
  top: 0;
  width: 100%;
  font-size: 1.7rem;
  font-weight: var(--bold);
  color: rgba(var(--darkest), 75%);
}
#image-map .button-apply a p::after {
  content: ">";
  font-size: 2rem;
  font-weight: var(--bold);
  position: absolute;
  display: inline-block;
  position: relative;
  right: -1.5vw;
}

#image-map .button-image-map {
  position: relative;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 1vw 2vw 1vw;
}

#image-map .button-image-map a {
  border: rgb(var(--darkest)) solid 0.2vw;
  border-radius: 1vw;
  padding: 1vw;
  margin: 0.5vw 1vw;
  text-align: center;
  transition: background 0.5s;
}

#image-map .button-image-map a:hover {
  background-color: rgb(var(--gray-04));
}

#image-map .button-image-map a p {
  margin: 0;
  left: 0;
  top: 0;
  width: 100%;
  font-size: 1.5rem;
}

#image-map .button-image-map a p::after {
  content: ">";
  display: inline-block;
  position: relative;
  left: 0.4vw;
}

#image-map .arrow {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#image-map .arrow img {
  width: 5vw;
}
/**********************/
/* join the programme */
/**********************/

.join-the-programme {
  margin: 7vw 0;
}
/********************/
/* degree programme */
/********************/
.degree-programme {
  margin: 0 2vw 10vw 2vw;
  padding: 4vw;
  border-radius: 2vw;
  background-color: rgba(var(--green), 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}

.degree-programme .content {
  width: 100%;
}

.degree-programme .content h3 {
  font-size: 2.5rem;
  font-weight: var(--regular);
  margin-bottom: 1vw;
}

.degree-programme .content .para-degree {
  font-size: 1.7rem;
  font-weight: var(--regular);

  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis"...";
}

.degree-programme .content .para-degree a {
  font-weight: var(--bold);
}

.degree-programme .content .a {
  cursor: pointer;
  display: block;
  width: 11rem;
  text-align: center;
  margin-top: 3vw;
  padding: 0.5vw 1vw;
  border: 0.2vw solid rgb(var(--darkest));
  border-radius: 1vw;
}

.degree-programme .content .a:hover {
  border: 0.2vw solid rgb(var(--purple));
  color: rgb(var(--purple));
}

.degree-programme .content .a p {
  font-size: 1.6rem;
}

.degree-programme .images-top {
  padding-left: 3vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
}

.degree-programme .images {
  --width-images: 10vw;
  width: calc(3 * var(--width-images) + 2 * 1.5vw);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.degree-programme .images-top img {
  width: var(--width-images);
}
.degree-programme .images-top img:first-child {
  padding-top: 4vw;
}

.degree-programme .images-top img:nth-child(2) {
  padding: 0 1.5vw 4vw 1.5vw;
}

.degree-programme .unite-logo {
  width: 80%;
  /* display: none; */
}

.degree-programme .unite-logo img {
  width: 100%;
}

/* on click */
.degree-programme .content .see {
  display: block;
}

/**********************/
/* différentes écoles */
/**********************/
.universities-pres h2 {
  padding: 2vw 2vw 5vw 2vw;
  text-transform: none;
  font-weight: var(--light);
  font-size: 2.5rem;
}

.universities-pic {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.universities-pic .uni-presentation {
  flex-basis: 20%;
  position: relative;
  width: 100%;
  height: 50vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  background: rgb(255, 255, 255);
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 10%,
    rgba(255, 255, 255, 0) 70%,
    rgba(255, 255, 255, 1) 100%
  );
}
.universities-pic .uni-bg {
  z-index: -1;
  top: 0;
  height: 100%;
  position: absolute;
}

/* régler quelle portion des images on veut voir */
.universities-pic .tu-braunschweig .uni-bg {
  left: -204%;
}
.universities-pic .grenoble-inp .uni-bg {
  left: -90%;
}
.universities-pic .upc-barcelona .uni-bg {
  left: -137%;
}
.universities-pic .aalto-university .uni-bg {
  left: -205%;
}
.universities-pic .technico_lisboa .uni-bg {
  left: -70%;
}

.universities-pic .logo-uni {
  width: 100%;
  height: 10vw;
  padding: 5% 10%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(
    0deg,
    rgba(var(--background-main), 0) 0%,
    rgba(var(--background-main), 0.8) 50%,
    rgba(var(--background-main), 1) 100%
  );
}
.universities-pic .uni-grad {
  position: absolute;
  width: 100%;
  aspect-ratio: 1/1;
  bottom: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(var(--background-main), 0) 0%,
    rgba(var(--background-main), 0.8) 50%,
    rgba(var(--background-main), 1) 100%
  );
}

.universities-pic .logo-uni a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.universities-pic .logo-uni img {
  max-width: 90%;
  max-height: 100%;
}

.universities-pic div:first-child .logo-uni img {
  width: 100%;
}

.universities-pic .par-uni {
  width: 100%;
  height: 23.5vw;
  bottom: -100%;
  background: rgba(var(--background-main), 0.5);
  backdrop-filter: blur(2px);
  border-top-right-radius: 1vw;
  border-top-left-radius: 1vw;
  position: relative;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
  transition: bottom 0.5s;
}

.universities-pic .par-uni h4 {
  font-weight: var(--medium);
  font-size: 2.2vw;
  padding: 0.5vw 0 1vw 0;
}

.universities-pic .par-uni p {
  width: 90%;
  border-top: rgb(var(--darkest)) solid 0.3vh;
  padding-top: 2vw;
  font-size: 1.25vw;

  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis"...";
}

.universities-pic .par-uni a {
  border: rgb(var(--darkest)) solid 0.2vw;
  border-radius: 1vw;
  padding: 0.5vw 1vw;
  margin: 2vw 0;
  text-align: center;
  transition: background 0.5s;
}

.universities-pic .par-uni a:hover {
  border: rgb(var(--darkest)) solid 0.2vw;
}

.universities-pic .par-uni a p {
  top: 0;
  left: 0;
  padding: 0;
  display: block;
  border: none;
  width: 100%;
  height: 100%;
  font-size: 2vw;
}

.uni-presentation:hover > .par-uni {
  bottom: 0%;
}

/**************************/
/* Experience paragraphes */
/**************************/
.experience {
  margin: 7vw 0;
}
.experience-flex {
  display: flex;
}

.experience-flex .experience-par {
  width: 29vw;
  margin: 2vw;
}
.experience-flex .experience-par div {
  padding: 2vw;
  border-radius: 2vw;
}
.experience-flex .experience-par .program-overview {
  background-color: rgba(var(--green), 0.1);
}
.experience-flex .experience-par .skill-development {
  background-color: rgba(var(--green), 0.2);
}
.experience-flex .experience-par .global-exposure {
  background-color: rgba(var(--green), 0.3);
}

.experience-flex .experience-par img {
  width: 20%;
}

.experience-flex .experience-par h4 {
  font-weight: var(--light);
  font-size: 3rem;
  margin: 1vw 0;
}

.experience-flex .experience-par p {
  font-weight: var(--regular);
  font-size: 1.7rem;
}

.experience .apply-link {
  text-align: center;
  font-size: 2rem;
  font-weight: var(--light);
  color: rgb(var(--purple));
}

.experience .apply-link p::after {
  content: ">";
  padding-left: 0.7vw;
  font-weight: var(--regular);
}

.experience .apply-link:hover {
  font-size: 2.05rem;
  color: rgba(var(--purple), 0.7);
}

/**********************************************/
/* représentation image groupe bonne ambiance */
/**********************************************/
.transition-img-groupe {
  margin: 7vw 0;
  width: 100%;
  aspect-ratio: 16/6;
  overflow: hidden;
}

.transition-img-groupe img {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
}

/***************/
/* Actual News */
/***************/

.actual-news {
  margin: 7vw 0;
}

.actual-news h2 {
  padding-bottom: 2vw;
}

.actual-news .news {
  display: flex;
  justify-content: center;
  align-items: center;
}

.actual-news .news .news-side {
  width: 40vw;
  margin: 0 3vw;
  overflow: hidden;
}

.actual-news .news .news-side .new {
  margin: 4vw 0;
}

.actual-news .news .news-side .new .img-info {
  border-radius: 3vw;
  overflow: hidden;
}

.actual-news .news .news-side .new .img-info img {
  position: relative;
}

/* changer la position des images */
.actual-news .news .news-side .new .img-info1 img {
  left: -49%;
  height: 40vw;
}
.actual-news .news .news-side .new .img-info2 img {
  left: -35%;
  height: 60vw;
}
.actual-news .news .news-side .new .img-info3 img {
  left: 0%;
  height: 50vw;
}

.actual-news .news .news-side .new h4 {
  margin: 2vw 0;
  font-weight: var(--light);
  font-size: 2.5vw;
}

.actual-news .news .news-side .new .more {
  position: relative;
}

.actual-news .news .news-side .new .more::before {
  content: "";
  position: absolute;
  width: 2vw;
  left: -2.5vw;
  top: 0.1vw;

  aspect-ratio: 1/1;
  background: url("assets/icones/full_arrow_circled.svg");
  background-size: 100%;
  background-repeat: no-repeat;
}

.actual-news .news .news-side .new .more:hover::before {
  background: url("assets/icones/blank_arrow_circled.svg");
  background-size: 100%;
  background-repeat: no-repeat;
}

.actual-news .news .news-side .new a p {
  margin-left: 2.5vw;
  font-size: 2vw;
}

.actual-news .more-news {
  height: 100px;
  margin: auto;
  text-align: center;
}

.actual-news .more-news p {
  font-size: 3rem;
  font-weight: var(--light);
}
.actual-news .more-news:hover p {
  font-weight: var(--regular);
}

/************************/
/* carroussel portraits */
/************************/
.carroussel {
  --size-dots: calc(0.2rem + 0.3vw);
  --width-portrait: 60vw;
  --height-portrait: calc(17vw + 10rem);
  /* display: none; */

  margin: 0 auto;
  overflow: hidden;
  width: 100vw;
  height: auto;
  transition: all 0s;
}

.carroussel .portraits {
  position: relative;
  height: var(--height-portrait);
  width: calc(3 * var(--width-portrait));
  background-color: rgb(var(--background-main));
  margin: 2vw 0;
  transition: all 0s;
}

/* cartes des portraits */
.carroussel .portraits .portrait {
  position: absolute;
  width: var(--width-portrait);
  height: var(--height-portrait);
  transition: all 0s;
  display: flex;
  justify-content: center;
  align-items: center;
}
.carroussel .portraits .portrait::before {
  /* petit point entre les cartes */
  content: "";
  padding: calc(var(--size-dots));
  border-radius: 50%;
  left: -3vw;
  position: absolute;
  background-color: rgb(var(--gray-07));
}

.carroussel .portrait img {
  position: relative;
  left: 3.5vw;
  width: 8vw;
  border-radius: 50%;
}

.carroussel .portrait .content {
  /* height: 80%; */
  padding-left: 1vw;
  position: relative;
  padding: 0 5vw;
}

.carroussel .portrait .content h4 {
  font-size: 1.7rem;
  font-weight: var(--light);
}
.carroussel .portrait .content .para-portrait {
  position: relative;
  padding: 1vw 5vw 0 0;
  font-size: 1rem;
  font-weight: var(--regular);
  color: rgba(var(--darkest), 70%);
  font-style: italic;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis"...";
}

.carroussel .portrait .content .para-portrait::before {
  content: "‟";
  position: absolute;
  font-family: "Roboto";
  top: -0.5rem;
  left: -2rem;
  font-size: 2.5rem;
  font-weight: var(--bold);
}

.carroussel .portrait .content .arrowMoreContent {
  position: relative;
  margin-top: 1vw;
  margin-left: 2.5rem;
  font-size: 1.5rem;
  font-weight: var(--light);
}
.carroussel .portrait .content .arrowMoreContent::before {
  content: "";
  position: absolute;
  width: 1.5rem;
  bottom: 0;
  left: -2.5rem;
  aspect-ratio: 1/1;
  background: url("assets/icones/full_arrow_circled.svg");
  background-size: 100%;
  background-repeat: no-repeat;
}

.carroussel .portrait .content .arrowMoreContent:hover::before {
  background: url("assets/icones/blank_arrow_circled.svg");
  background-size: 100%;
  background-repeat: no-repeat;
}

/* carroussel défilement */
.carroussel .dots {
  position: relative;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.carroussel .dots .dot {
  padding: var(--size-dots);
  border-radius: var(--size-dots);
  margin: 0 calc(0.5 * var(--size-dots));
  background-color: rgba(var(--darkest), 0.7);
  cursor: pointer;
  transition: padding 0.2s;
  transition-delay: 0s;
}

.carroussel .dots .selected {
  padding: var(--size-dots) calc(3 * var(--size-dots));
  background-color: rgba(var(--darkest), 1);
  transition: padding 0.2s;
  transition-delay: 0.05s;
}

@media screen and (max-width: 1215px) and (min-width: 981px) {
  #image-map {
    margin-top: 10vw;
    flex-direction: column-reverse;
  }
  #image-map .info {
    width: 100%;
  }
  #image-map .content-container {
    justify-content: center;
    align-items: center;
  }
  #image-map .content {
    width: 100%;
  }

  #image-map h2 {
    text-align: center;
  }

  #image-map .text p {
    text-align: center;
  }
  .experience-flex {
    flex-direction: column;
  }

  .experience-flex .experience-par img {
    width: 10%;
  }
  .experience-flex .experience-par {
    width: 96vw;
  }
}

@media screen and (max-width: 980px) {
  #image-map {
    flex-direction: column-reverse;
  }
  #image-map .info {
    width: 100%;
  }
  #image-map .content-container {
    justify-content: center;
    align-items: center;
  }
  #image-map .content {
    width: 100%;
  }

  #image-map h2 {
    text-align: center;
  }

  #image-map .text p {
    text-align: center;
  }

  .degree-programme {
    flex-direction: column;
  }
  .degree-programme .images {
    --width-images: 30%;
    width: 100%;
    margin-top: 5vw;
  }

  .experience-flex {
    flex-direction: column;
  }

  .experience-flex .experience-par img {
    width: 10%;
  }

  .experience-flex .experience-par {
    width: 96vw;
  }
  .carroussel .portraits .portrait {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .carroussel .portraits .portrait::before {
    /* petit point entre les cartes */
    content: "";
    border-radius: 50%;
    top: 50%;
  }

  .carroussel .portrait img {
    width: 15vw;
    /* width: var(--width-portrait); */
    left: calc((var(--width-portrait) - 18vw) / 2);
    border-radius: 50%;
  }
}