.puce-cv {
  line-height: 0em;
  padding-left: 0.5em;
  overflow: hidden;
  white-space: nowrap;
  font-size: clamp(0.8rem, 1vw, 1rem)!important;
}

.puce-cv02 {
  line-height: 0em;
  padding-left: 0.5em;
  overflow: hidden;
  white-space: nowrap;
  font-size:1em;
}

ul li {
  line-height: 2em;
  padding-left: 0.5em;
  white-space: nowrap;
  font-size: clamp(0.8rem, 1vw, 1rem);

}

p {
  line-height: clamp(1rem, 2vw, 1.8rem);
  font-size: clamp(0.8rem, 1vw, 1rem);
}

.h1-cv {
  margin-top: 1.6em;
}

.h2-cv {
  border: 2px solid #b4dad7;
  padding: .5em;
  display: inline-block;
  font-size: clamp(1.2rem, 2vw, 2rem);
  font-family: "moret-variable", Book Antiqua, serif;
}

h3 {
  line-height: .3em;
  margin-top: 2em;
  font-size: clamp(0.8rem, 2vw, 1.5rem);
}

header {
  overflow: hidden;
}

header #twitter {
  float: right;
  margin-top: 33px;
}


section {
  margin: auto;
  /*padding-top: 8em;*/
  padding-left: 7vw;
  padding-right: 7vw;
  padding-bottom: 5em;
}

hr {
  border: 1px solid #b4dad7;
  margin-top: 0;

}

.full-qual {
  width: 100%;
  margin: 0 auto;
  margin-top: 3em;
}

.third-qual {
  width: 100%;
  margin-top: 14em;
}

.quarter-qual {
  width: 25%;
  float: left;
}


.qual hr {
  margin: 0 auto;
  width: 100%;
}

.data {
  height: 200px;
  position: relative;
  width: 100%;
}

.data .data-item {
  position: absolute;
  width: 0;
  height: 0;
  bottom: 0;
}

.data .data-item h4 {
  position: absolute;
  bottom: 15px;
  white-space: nowrap;
  border-bottom: 2px solid #b4dad7;

}

.data .data-item span {
  position: absolute;
  bottom: 13px;
  border-left: 2px solid #b4dad7;

}

#item1 {
  z-index: 1;
  left: 0vw;
  border-left: 1vw solid transparent;
  border-right: 1vw solid transparent;
  border-bottom: 30px solid #2196a7;
}

#item2 {
  z-index: 5;
  left: 5vw;
  border-left: 1vw solid transparent;
  border-right: 1vw solid transparent;
  opacity: .5;
  border-bottom: 10px solid #b4dad7;
}

#item3 {
  /* z-index: 5;*/
  left: 15vw;
  border-left: 5vw solid transparent;
  border-right: 5vw solid transparent;
  border-bottom: 10px solid #2196a7;
}

#item3 h4 {
  position: absolute;
  left: -55px;
}

#item4 {
  z-index: 5;
  left: 25vw;
  border-left: 9vw solid transparent;
  border-right: 9vw solid transparent;
  opacity: .5;
  border-bottom: 10px solid #b4dad7;
  cursor: pointer;
}

#item1:hover {
  opacity: 1;
  border-bottom: 10px solid #07163d;
  cursor: pointer;
  transition: all .3s;
}

#item2:hover {
  opacity: 1;
  border-bottom: 10px solid #07163d;
  cursor: pointer;
  transition: all .3s;
}

#item3:hover {
  opacity: 1;
  border-bottom: 10px solid #07163d;
  cursor: pointer;
  transition: all .3s;
}

#item4:hover {
  opacity: 1;
  border-bottom: 10px solid #07163d;
  cursor: pointer;
  transition: all .3s;
}

#item5:hover {
  opacity: 1;
  border-bottom: 10px solid #07163d;
  cursor: pointer;
  transition: all .3s;
}

#item6:hover {
  opacity: 1;
  border-bottom: 10px solid #07163d;
  cursor: pointer;
  transition: all .3s;
}

.active {
  opacity: 1;
  border-bottom: solid #07163d !important;
  transition: all .3s;
}


#item4 h4 {
  position: absolute;
  left: -65px;
}

#item5 {
  z-index: 5;
  left: 52vw;
  border-left: 12vw solid transparent;
  border-right: 12vw solid transparent;
  opacity: .5;
  border-bottom: 10px solid #b4dad7;
  z-index: 60;
}

#item5 h4 {
  text-align: right;
  position: absolute;
  left: -80px;
  bottom: 20px;
}

#item5 span {
  line-height: 24px;
}

#item6 {
  z-index: 5;
  left: 43vw;
  border-left: 22vw solid transparent;
  border-right: 21vw solid transparent;
  opacity: .5;
  border-bottom: 30px solid #b4dad7;
}

#item6 h4 {
  position: absolute;
  bottom: 26px;
}

#item6 span {
  line-height: 30px;
}

#item7 {
  z-index: 10;
  left: 450px;
  border-left: 125px solid transparent;
  border-right: 125px solid transparent;
  border-bottom: 0px solid #b4dad7;
}

#item7 h4 {
  text-align: right;
  position: absolute;
  left: -67px;
  bottom: 30px;
}

#item7 span {
  line-height: 40px;
}

.years {
  text-align: justify;
  line-height: 0.4;
  margin-top: 0.8em;
}

.years .middot {
  margin: 0 auto;
  font-size: 58px;
  color: #4b5859;
  line-height: 0px;
}

.years .year-list {
  margin-top: -30px;
}

.years * {
  list-style-position: outside;
  padding: 0;
  display: inline;
}

.years span {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
}

.edu .highschool {
  color: #4b5859;
  margin-left: 1em;
}

.edu .schools {
  position: relative;
  height: 150px;
}

.edu .schools .school-item h4 {
  position: absolute;
  bottom: 15px;
  white-space: nowrap;
  border-bottom: 2px solid #b4dad7;
}

.edu .schools .school-item span {
  position: absolute;
  bottom: 13px;
  border-left: 2px solid #b4dad7;
}

#school1 {
  position: absolute;
  z-index: 18;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border-left: 2.7vw solid transparent;
  border-right: 2.7vw solid transparent;
  border-bottom: 12px solid #2196a7;
}

#school2 {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 5.3vw;
  width: 0;
  height: 0;
  border-left: 4.7vw solid transparent;
  border-right: 4.7vw solid transparent;
  border-bottom: 17px solid #b4dad7;
}

#school3 {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 14.5vw;
  width: 0;
  height: 0;
  opacity: 0.7;
  border-left: 2.7vw solid transparent;
  border-right: 2.7vw solid transparent;
  border-bottom: 5px solid #b4dad7;
}

#school4 {
  position: absolute;
  /*z-index: 1;*/
  bottom: 0;
  left: 39vw;
  width: 0;
  height: 0;
  border-left: 2vw solid transparent;
  border-right: 2vw solid transparent;
  border-bottom: 7.5px solid #2196a7;
  opacity: 0.8;
}

#school5 {
  position: absolute;
  z-index: 1;
  bottom: 0;
  right: 0vw;
  width: 0;
  height: 0;
  border-left: 2vw solid transparent;
  border-right: 2vw solid transparent;
  border-bottom: 2px solid #b4dad7;
}


.hna {
  position: relative;
}

.hna ul {
  list-style-position: inside;
  padding: 0;
  color: #4b5859;
}

.hna ul ul {
  padding-left: 1em;
}

.sknex {
  clear: both;
  margin-bottom: 2em;
}

.sknex {
  overflow: hidden;
}

.sknex .skills-text {
  float: left;
  width: 28%;
  margin-right: 2%;
  color: #4b5859;
}

.skills-vis {
  float: left;
  width: 70%;
}

#skill1 {
  width: 45%;
  margin-right: 5%;
  float: left;
}

#skill1 #puters .pie {
  background-color: #b4dad7;
  -webkit-transform: rotate(80deg);
  -moz-transform: rotate(80deg);
  -o-transform: rotate(80deg);
  transform: rotate(80deg);
}

#skill1 #puters4 {
  background-color: #215961;
  -webkit-transform: rotate(210deg);
  -moz-transform: rotate(210deg);
  -o-transform: rotate(210deg);
  transform: rotate(210deg);
}

#skill1 #movies {
  background-color: #307982;
  -webkit-transform: rotate(170deg);
  -moz-transform: rotate(170deg);
  -o-transform: rotate(170deg);
  transform: rotate(170deg);
}

#skill1 #games {
  background-color: #2196a7;
  -webkit-transform: rotate(160deg);
  -moz-transform: rotate(160deg);
  -o-transform: rotate(160deg);
  transform: rotate(160deg);
}

#skill1 #music {
  background-color: #519ca4;
  -webkit-transform: rotate(110deg);
  -moz-transform: rotate(110deg);
  -o-transform: rotate(110deg);
  transform: rotate(110deg);
}

#skill1 #music2 {
  background-color: #519ca4;
  -webkit-transform: rotate(80deg);
  -moz-transform: rotate(80deg);
  -o-transform: rotate(80deg);
  transform: rotate(80deg);
}

#skill2 {
  width: 45%;
  float: left;
}

#skill2 #puters .pie {
  background-color: #b4dad7;
  -webkit-transform: rotate(80deg);
  -moz-transform: rotate(80deg);
  -o-transform: rotate(80deg);
  transform: rotate(80deg);
}

#skill2 #puters4 {
  background-color: #215961;
  -webkit-transform: rotate(210deg);
  -moz-transform: rotate(210deg);
  -o-transform: rotate(210deg);
  transform: rotate(210deg);
}

#skill2 #movies {
  background-color: #307982;
  -webkit-transform: rotate(170deg);
  -moz-transform: rotate(170deg);
  -o-transform: rotate(170deg);
  transform: rotate(170deg);
}

#skill2 #games {
  background-color: #2196a7;
  -webkit-transform: rotate(160deg);
  -moz-transform: rotate(160deg);
  -o-transform: rotate(160deg);
  transform: rotate(160deg);
}

#skill2 #music {
  background-color: #519ca4;
  -webkit-transform: rotate(110deg);
  -moz-transform: rotate(110deg);
  -o-transform: rotate(110deg);
  transform: rotate(110deg);
}

#skill2 #music2 {
  background-color: #519ca4;
  -webkit-transform: rotate(80deg);
  -moz-transform: rotate(80deg);
  -o-transform: rotate(80deg);
  transform: rotate(80deg);
}

.skill-breakdown {
  overflow: hidden;
}

.skill-breakdown .pie-container {
  position: relative;
  height: 150px;
  width: 150px;
  margin-right: 10px;
  float: left;
}

.skill-breakdown .pie-container .center {
  position: absolute;
  z-index: 50;
  width: 75px;
  height: 75px;
  top: 25%;
  left: 25%;
  background-color: #1f2426;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

.skill-breakdown .pie-container .pie-back {
  background-color: #1f2426;
  position: absolute;
  width: 150px;
  height: 150px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

.skill-breakdown .pie-container .pie {
  position: absolute;
  width: 150px;
  height: 150px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  clip: rect(0px, 75px, 150px, 0px);
}

.skill-breakdown .pie-container .hold {
  position: absolute;
  width: 150px;
  height: 150px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  clip: rect(0px, 150px, 75px, 75px);
}

.skill-breakdown ul {
  margin-left: 150px;
}

.info-item1 {
  background-color: #07163d;
  padding: 2em;
  display: none;
}

.info-item2 {
  background-color: #07163d;
  padding: 2em;
  display: none;
}

.info-item3 {
  background-color: #07163d;
  padding: 2em;
  display: none;
}

.info-item4 {
  background-color: #07163d;
  padding: 2em;
  display: none;
}

.info-item5 {
  background-color: #07163d;
  padding: 2em;
  display: none;
}

.info-item6 {
  background-color: #07163d;
  padding: 2em;
  display: none;
}

.titre-item-cv {
  font-weight: 800;
  line-height: clamp(1rem, 2vw, 2rem) !important;
  font-size: clamp(0.8rem, 1vw, 1rem);
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

.txt-item-cv {
  line-height: clamp(0.8rem, 2vw, 1.6rem);
  font-size: clamp(0.8rem, 1vw, 1rem);
}

.br {
  margin: 0.5em;
}

.txt-school5 {
  right: -2px;
}

.txt-school4 {
  right: -79px;
}

.anim-txt {
  font-size: clamp(1rem, 1.5vw, 1.5rem);
  text-align: center;
  font-weight: 600;
}

.school-item1 {
  background-color: #07163d;
  padding: 2em;
  display: none;
}

.school-item2 {
  background-color: #07163d;
  padding: 2em;
  display: none;
}
.school-item3 {
  background-color: #07163d;
  padding: 2em;
  display: none;
}
.school-item4 {
  background-color: #07163d;
  padding: 2em;
  display: none;
}
.school-item5 {
  background-color: #07163d;
  padding: 2em;
  display: none;
}
#school1:hover {
  opacity: 1;
  border-bottom: 10px solid #07163d;
  cursor: pointer;
  transition: all .3s;
}
#school2:hover {
  opacity: 1;
  border-bottom: 10px solid #07163d;
  cursor: pointer;
  transition: all .3s;
}
#school3:hover {
  opacity: 1;
  border-bottom: 10px solid #07163d;
  cursor: pointer;
  transition: all .3s;
}
#school4:hover {
  opacity: 1;
  border-bottom: 10px solid #07163d;
  cursor: pointer;
  transition: all .3s;
}
#school5:hover {
  opacity: 1;
  border-bottom: 10px solid #07163d;
  cursor: pointer;
  transition: all .3s;
}
@media screen and (max-width: 54em) {

  section{
    padding-bottom: 1em;
  }
  .third-qual {
    margin-top: 8em;
  }
  .h1-cv {
    margin-top: 3em;
  }
  .padding-txt {
    padding-top: 0.2em;
    padding-left: 1em;
    padding-right: 1em;
    padding-bottom: 1em;
  }
  .div-gauche {
    padding-right: 1em;
  }
  .div-droite {
    padding-right: 1em !important;
  }
}
.skillset .skillbar {
  height: 30px;
  color: #fff;
  width: 0px;
  text-align: left;
  transition: 0.4s linear;
  transition-property: width;
}
.skillset .skillbar-container {
  width: 100%;
  background-color: #0f112d;
  margin-bottom: 2%;
}
.skillset .skillbar-container02 {
  width: 100%;
  background-color: #0f112d;
  margin-bottom: 1%;
}
.skillset {
  width: 100%;
  opacity: 0.8;
}
.skillset ul {
  list-style-type: none;
  width: 100%;
  padding: 0;
  margin: 0;
}
.logiciel-div {

  display: flex;
}
.design-div {
  float: left;
  width: 50%;
}
.div-gauche {
  padding-right: 5vw;
  float: left;
  width: 50%;
}
.div-droite {
  padding-right: 2em;
  float: right;
  width: 50%;
}
.titre-margin {
  margin-top: 7em;
}
.trophee {
  width: 110px;
  float: left;
  margin-right: 1em;
  margin-bottom: 0.5em;
}
.lien-cv:hover {
  color: #4caaf2;
  text-decoration: underline;
}
/* axards*/
:root {
  --card-height: 300px;
  --card-width: calc(var(--card-height) / 1.5);
}
* {
  box-sizing: border-box;
}
.card {
  width: var(--card-width);
  height: var(--card-height);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 0 36px;
  perspective: 2500px;
}
.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wrapper {
  transition: all 0.5s;
  position: absolute;
  width: 100%;
  z-index: -1;
}
.boulangerhover:hover .wrapper {
  transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
  box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
}
.wrapper::before,
.wrapper::after {
  content: "";
  opacity: 0;
  width: 100%;
  height: 80px;
  transition: all 0.5s;
  position: absolute;
  left: 0;
}
.wrapper::before {
  top: 0;
  height: 100%;
  background-image: linear-gradient(to top,
      transparent 16%,
      rgba(12, 13, 19, 0.5) 68%,
      rgba(12, 13, 19) 97%);
}
.wrapper::after {
  bottom: 0;
  opacity: 1;
  background-image: linear-gradient(to bottom,
      transparent 46%,
      rgba(12, 13, 19, 0.5) 68%,
      rgba(12, 13, 19) 97%);
}
.boulangerhover:hover .wrapper::before,
.wrapper::after {
  opacity: 1;
}
.boulangerhover:hover .wrapper::after {
  height: 120px;
}
.title {
  width: 100%;
  transition: transform 0.5s;
  margin-bottom: 1em;
}
.boulangerhover:hover .title {
  transform: translate3d(1%, -34px, 100px);
}
.character {
  width: 136%;
  opacity: 0;
  transition: all 0.5s;
  position: absolute;
  z-index: -1;
}
.boulangerhover:hover .character {
  opacity: 1;
  transform: translate3d(1%, -9%, 100px);
}
#boulanger {
  transition: 1s;
  opacity: 0;
  color: #fff;
  width: 50%;
  padding-left: 3em;
}
#boulanger02 {
  transition: 1s;
  opacity: 0.4;
  color: #fff;
  width: 50%;
  padding-left: 3em;

}
#boulanger03 {
  transition: 1s;
  opacity: 0.4;
  color: #fff;
  width: 50%;
  padding-left: 3em;

}




.boulangerhover:hover>#boulanger02 {
  opacity: 1;
  transition: 1s;
  padding-left: 4em;
}

.boulangerhover {
  width: 100%;
  display: flex;
  margin: auto;
  float: right;
}

.award {

  display: flex;

}

.recompense {
  line-height: 1em !important;
  margin-top: 3em;
}

.award-gauche {
  float: left;
  width: 50%;
}

.block-recompense {
  margin-top: 2em;
}

.padding-txt02 {
  width: 264px;
}

/*ICON*/


.icon-etude-bg-front {
  width: 7em !important;
  border-radius: 1049px;
  border: 0.1rem solid;
  color: #bbbbbb;
  height: 7em;
  display: flex;
  margin: auto;

}

.icon-etude-bg-back {
  width: 7em !important;
  border-radius: 1049px;
  border: 0.1rem solid;
  color: #bbbbbb;
  height: 7em;
  display: flex;
  margin: auto;
}

.icon-etude-front {
  display: flex;
  margin: auto;
  width: 4em;
}

.box-conception {
  text-align: center;

}

.box-etude-conception01 {
  display: inline-block;
  vertical-align: top;
  padding-right: 5em;
  padding-left: 5em;
  padding-bottom: 2em;
  padding-top: 2em;
}

.box-etude-conception02 {
  width: 32.5%;
  display: inline-block;
  vertical-align: top;
  padding-left: 1em;
}

.box-etude-conception03 {
  width: 32.5%;
  display: inline-block;
  vertical-align: top;
  padding-left: 1em;
}

.box-etude-conception04 {
  width: 32.5%;
  display: inline-block;
  vertical-align: top;
  padding-left: 1em;
}

.box-etude-conception05 {
  width: 32.5%;
  display: inline-block;
  vertical-align: top;
  padding-left: 1em;
}

.box-etude-conception06 {
  width: 32.5%;
  display: inline-block;
  vertical-align: top;
  padding-left: 1em;
}

.box-etude-conception07 {
  width: 32.5%;
  display: inline-block;
  vertical-align: top;
  padding-left: 1em;
}

.box-etude-conception08 {
  width: 32.5%;
  display: inline-block;
  vertical-align: top;
  padding-left: 1em;
}

.box-etude-conception09 {
  width: 32.5%;
  display: inline-block;
  vertical-align: top;
  padding-left: 1em;
}


@media screen and (max-width: 1192px) {
  .award-gauche {
    float: unset;
    width: 100%;
  }

  .award {
    padding-top: 3em;
  }
}


.txt-icon-tel {
  display: none;

}

@media screen and (max-width: 53em) {


  .block-recompense {
    margin-top: 0;
  }

  .award{
    margin-top: -3em!important;

  }

  .txt-icon-tel {
    display: block;

  }

  #boulanger02 {
    padding-left: 0.8em;
    width: 52%;
  }
  #boulanger03 {
    padding-left: 0.8em;
    width: 52%;
  }

  .padding-txt02 {
    width: 100%;
  }

  .h3 {
    line-height: .3em;
  }


  .box-etude-conception01 {
    padding-right: 3vw;
    padding-left: 3vw;
    padding-bottom: 0em;
    padding-top: 2em;
  }


  .box-etude1 {
    width: 20.5%;
  }

  .box-etude {
    padding-top: 0;
    padding-bottom: 2em;
  }
}

.box-etude-conception01 {
  background-color: transparent;
  perspective: 1000px;
}

.box-etude-niv02 {
  position: relative;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}


.box-etude-conception01:hover .box-etude-niv02 {
  transform: rotateY(180deg);
}

.icon-etude-bg-front,
.icon-etude-bg-back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.icon-etude-bg-back {
  transform: rotateY(180deg);
  margin-top: -113px;
  background-color: #000319;
}

.txt-icon-hover {
  margin: auto;
}

.h3-cv{
  
  line-height: 1em;

}

h4{

  font-size:0.8em;
}