/**************/
/* front page */
/**************/
.front {
  position: relative;
  width: 100vw;
  padding-bottom: calc(50vw - 35rem);
  /* height: auto; */
  overflow: hidden;
  /* aspect-ratio: 16/9; */
}

.front .background {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.front .background .img {
  z-index: -2;
  width: 100vw;
  aspect-ratio: 16/9;
  background: url("assets/programme/backg.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
}
.front .background .filtre {
  position: absolute;
  top: calc(9 * 100vw / 16 - 200vw);
  left: 0;
  width: 200vw;
  aspect-ratio: 1/1;
  background-color: transparent;
  background: radial-gradient(
    circle,
    rgba(var(--background-main), 0) 0%,
    rgba(var(--background-main), 0) 45%,
    rgba(var(--background-main), 0.3) 55%,
    rgba(var(--background-main), 1) 65%,
    rgba(var(--background-main), 1) 100%
  );
}

.front p {
  position: relative;
  margin-top: calc(20vw - 7rem);
  margin-left: 3vw;
  padding-bottom: calc(1rem + 5vw);
  width: calc(20vw + 10rem);
  font-size: 1.5rem;
}

.front h1 {
  position: absolute;
  top: 45vw;
  padding-left: max(calc(20rem + 9.3vw), 26.5vw);
  font-size: 8vw;
  font-weight: var(--light);
}

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

.front .arrow img {
  padding-top: 10rem;
  height: calc(1vw + 1rem);
}
/***********************/
/* programme structure */
/***********************/
.para-structure {
  margin: 5vw 10vw;
  text-align: center;
}

.para-structure h2 {
  margin: 1vw;
  font-size: 3rem;
  font-weight: var(--light);
}

.para-structure p {
  font-size: 2rem;
  font-weight: var(--light);
}

/*******/
/*years*/
/*******/

.years p {
  text-align: center;
  margin: 2vw 0;
  font-size: 3rem;
  font-weight: var(--light);
}

.years .box {
  display: flex;
  justify-content: center;
}
.years .box .cont {
  width: 40%;
  margin: 3vw;
}

.years .box .first-year {
  border-radius: 1vw;
  padding: 2vw;
  background-color: rgba(var(--blue-matte), 0.3);
}
.years .box .second-year {
  border-radius: 1vw;
  padding: 2vw;
  background-color: rgba(var(--blue-matte), 0.4);
}

.years .box h3 {
  position: relative;
  padding-left: 1vw;
  font-size: 3rem;
  text-align: center;
}
.years .box h3::before {
  content: "";
  position: relative;
  top: 1.2rem;
  right: 1vw;
  padding: 0.7rem;
  background: url("assets/icones/arrow_triangle.svg");
  background-repeat: no-repeat;
  background-size: 100%;
}

.years .box p {
  margin: 0;
  text-align: left;
  font-size: 1.7rem;
  font-weight: var(--regular);
}

.years .box ul {
  padding-left: 1vw;
}

.years .box li {
  position: relative;
  font-size: 1.6rem;
  margin: 2vw 0;
}

.years .box li::before {
  content: "";
  font-size: 0;
  position: absolute;
  top: 0.6rem;
  left: -0.8rem;
  padding: 0.25rem;
  border-radius: 50%;
  background-color: rgb(var(--darkest));
}

/***********/
/* zig zag */
/***********/
.zigzag {
  --bord-rad: 2vw;
  --bord-wid: 0.5rem;
  --bord: var(--bord-wid) solid;
  width: 80vw;
  margin: 10vw 10vw;
}

.zigzag .container {
  position: relative;
}

.zigzag p {
  font-size: 1.9rem;
  font-weight: var(--regular);
  padding: 4vw;
}
.zigzag .left {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(70% - var(--bord-wid));
  height: calc(100% - var(--bord-wid));
  border: var(--bord) transparent;
  border-radius: var(--bord-rad) 0 0 var(--bord-rad);
}
.zigzag .right {
  z-index: -1;

  position: absolute;
  top: 0;
  right: 0;
  width: calc(30% - var(--bord-wid));
  height: calc(100% - var(--bord-wid));
  border: var(--bord) transparent;
  border-radius: 0 var(--bord-rad) var(--bord-rad) 0;
}

.zigzag .top .right {
  border-top: var(--bord) rgb(var(--darkest));
  border-radius: 0;
}

.zigzag .top .left {
  border-top: var(--bord) rgb(var(--darkest));
  border-left: var(--bord) rgb(var(--darkest));
  border-bottom: var(--bord) rgb(var(--darkest));
}
.zigzag .middle .right {
  border-top: var(--bord) rgb(var(--darkest));
  border-right: var(--bord) rgb(var(--darkest));
  border-bottom: var(--bord) rgb(var(--darkest));
}

.zigzag .bottom .left {
  border-top: var(--bord) rgb(var(--darkest));
  border-left: var(--bord) rgb(var(--darkest));
  border-bottom: var(--bord) rgb(var(--darkest));
}

/************/
/*Curriculum*/
/************/
.curriculum {
  width: 94vw;
  margin: 3vw;
  text-align: center;
}
.curriculum h3 {
  margin-bottom: 1vw;
  font-size: 3rem;
  font-weight: var(--light);
}
.curriculum p {
  font-size: 2rem;
  font-weight: var(--light);
}
/*************/
/*competences*/
/*************/
.competences {
  margin: 4vw;
}
.competences p {
  font-size: 2rem;
  font-weight: var(--regular);
}

.competences .flex-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.competences .flex-box .container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.competences .flex-box .container div {
  margin: 2vw;
  padding: 2vw;
  border-radius: 1vw;
}

.competences .flex-box .container .light {
  background-color: rgba(var(--purple), 0.2);
}
.competences .flex-box .container .medium {
  background-color: rgba(var(--purple), 0.3);
}
.competences .flex-box .container .dark {
  background-color: rgba(var(--purple), 0.4);
}

.competences .flex-box .container p {
  font-size: 1.6rem;
  font-weight: var(--regular);
}
/********************************/
/* summer school and conference */
/********************************/
.summerSchool {
  /* margin: 3vw; */
  width: 94vw;
  text-align: center;
}
.summerSchool h3 {
  margin-bottom: 1vw;
  font-size: 3rem;
  font-weight: var(--light);
}
.summerSchool p {
  margin: 0 3vw;
  font-size: 2rem;
  font-weight: var(--light);
}

.summerSchool .learn {
  display: flex;
  justify-content: center;
}
.summerSchool .learn .cont {
  width: 40%;
  margin: 3vw;
}

.summerSchool .learn .students {
  border-radius: 1vw;
  padding: 2vw;
  background-color: rgba(var(--green-matte), 0.45);
}
.summerSchool .learn .outcomes {
  border-radius: 1vw;
  padding: 2vw;
  background-color: rgba(var(--green-matte), 0.3);
}

.summerSchool .learn h4 {
  padding-left: 1vw;
  font-size: 3rem;
  font-weight: var(--regular);
}
.summerSchool .learn h4::before {
  content: "";
  position: relative;
  top: 1.2rem;
  right: 1vw;
  padding: 0.7rem;
  background: url("assets/icones/arrow_triangle.svg");
  background-repeat: no-repeat;
  background-size: 100%;
}

.summerSchool .learn .cont p {
  text-align: left;
  font-size: 1.7rem;
  font-weight: var(--regular);
}

.summerSchool .learn li {
  position: relative;
  text-align: left;
  font-size: 1.6rem;
  margin: 2vw 0;
  padding-left: 1vw;
}

.summerSchool .learn li::before {
  content: "";
  font-size: 0;
  position: absolute;
  top: 0.6rem;
  left: 0rem;
  padding: 0.25rem;
  border-radius: 50%;
  background-color: rgb(var(--darkest));
}

.summerSchool .para-content {
  background-color: rgba(var(--green-matte), 0.2);
  border-radius: 1vw;
  margin: 2vw 7vw;
  padding: 2vw 0;
}
.summerSchool .para-content p {
  flex-basis: 33%;
  text-align: left;
  font-size: 1.7rem;
  padding: 0.5vw 3vw;
  font-weight: var(--regular);
}
/***************/
/* Internships */
/***************/
.internships {
  margin: 7vw 3vw;
  text-align: center;
}
.internships h3 {
  margin-bottom: 1vw;
  font-size: 5rem;
  font-weight: var(--light);
}
.internships p {
  font-size: 2rem;
  font-weight: var(--light);
}
/*******************/
/* Master's thesis */
/*******************/
.master {
  margin: 7vw 3vw;
  text-align: center;
}
.master h3 {
  margin-bottom: 1vw;
  font-size: 5rem;
  font-weight: var(--light);
}
.master p {
  font-size: 2rem;
  font-weight: var(--light);
}
/*****************************/
/* Careers and employability */
/*****************************/
.careers {
  margin: 7vw 3vw;
  text-align: center;
}
.careers h3 {
  margin-bottom: 1vw;
  font-size: 5rem;
  font-weight: var(--light);
}
.careers p {
  font-size: 2rem;
  font-weight: var(--light);
}

@media screen and (max-width: 1215px) and (min-width: 981px) {
  .front p {
    margin-top: 15vw;
  }
  .years .box {
    flex-direction: column;
  }
  .years .box .cont {
    width: 94vw;
  }

  .summerSchool .learn {
    flex-direction: column;
  }
  .summerSchool .learn .cont {
    width: 90vw;
    margin: 3vw 0;
  }

  .summerSchool .para-content {
    margin: 2vw 0;
  }
}

@media screen and (max-width: 980px) {
  .front .background .filtre {
    width: 100vw;
    top: calc(9 * 100vw / 16 - 100vw);
    background: linear-gradient(
      180deg,
      rgba(var(--background-main), 0) 0%,
      rgba(var(--background-main), 0) 70%,
      rgba(var(--background-main), 0.7) 80%,
      rgba(var(--background-main), 1) 90%,
      rgba(var(--background-main), 1) 100%
    );
  }
  .front p {
    text-align: center;
    margin-top: 55vw;
    margin-right: 3vw;
    width: 94vw;
  }
  .front h1 {
    width: 100%;
    text-align: center;
    padding-left: 0;
  }
  .years .box {
    flex-direction: column;
  }
  .years .box .cont {
    width: 94vw;
  }
  .zigzag {
    margin: 10vw 3vw;
  }
  .competences .flex-box {
    flex-direction: column;
  }

  .summerSchool .learn {
    flex-direction: column;
  }
  .summerSchool .learn .cont {
    width: 90vw;
    margin: 3vw 0;
  }

  .summerSchool .para-content {
    margin: 2vw;
  }
}