@charset "UTF-8";
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
}
body:before {
  content: "";
  display: block;
  position: fixed;
  width: 100vw;
  min-height: 100vh;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -10;
  background-color: #000;
  background: url("./../../e4.jpg") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

button:active,
button:active,
button:focus:not(.focus-visible),
button:focus:not(.focus-visible) {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

a {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.box-tagProjet {
  display: flex;
  flex-wrap: wrap;
  margin: 5px 5px;
}

.tagProjet {
  display: block;
  background-color: red;
  padding: 5px;
  font-size: 0.7rem;
}

.flex {
  display: flex;
}

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

button, a {
  cursor: pointer;
}

.noscroll {
  overflow: hidden; /*pr empècher le scroll lorsque nav en column*/
}

#header_fixed {
  height: 60px;
  width: 100%;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: rgba(46, 46, 46, 0.75);
  z-index: 500;
}
@media only screen and (max-width: 830px) {
  #header_fixed {
    background-color: inherit;
    position: sticky;
    top: 0;
    z-index: 500;
  }
}

header a {
  color: white;
  text-decoration: none;
}

.navbar {
  display: flex;
  justify-content: space-between;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.nav_ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  z-index: 99;
}
@media only screen and (max-width: 830px) {
  .nav_ul {
    border-bottom: none;
    background: rgb(41, 39, 39);
    background: rgb(64, 64, 64);
    background-color: rgba(0, 0, 0, 0.9);
  }
}

.nav_ul a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  width: 120px;
  font-size: 1.4rem;
  font-weight: 400;
}
@media only screen and (max-width: 830px) {
  .nav_ul a {
    font-size: 1.1rem;
  }
}

.nav_ul a:hover {
  border-radius: 10px;
}

.navbar_item {
  display: block;
  padding: 0px 30px 0 30px;
  width: 150px;
  line-height: 60px;
}
@media only screen and (max-width: 830px) {
  .navbar_item {
    line-height: 45px;
  }
}

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  position: absolute;
  padding-left: 16px;
  top: 8px;
  z-index: 999;
  width: 50px;
  border-radius: 0 50px 50px 0;
  height: 50px;
  background-color: rgb(164, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
  box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.4);
}

.bar1,
.bar2,
.bar3 {
  width: 35px;
  height: 4px;
  background-color: white;
  border-radius: 5px;
}

.bar2,
.bar3 {
  margin-top: 6px;
}

.open .bar1,
.open .bar2,
.open .bar3 {
  transition: all 0.3s;
}

.open .bar1 {
  transform: translateY(257%) rotate(-45deg);
}

.open .bar3 {
  transform: translateY(-257%) rotate(45deg);
}

.open .bar2 {
  transform: rotate(-45deg);
  opacity: 0;
}

@media (max-width: 800px) {
  .navbar {
    display: flex;
    justify-content: inherit;
    z-index: 999;
  }
  .hamburger {
    display: flex;
  }
  .nav_ul {
    position: absolute;
    height: 100vh;
    padding-top: 60px;
    width: 85vw;
    width: 280px;
    left: -280px;
    flex-direction: column;
    transition: transform ease-out 0.3s;
    z-index: 99;
  }
  .slide {
    transform: translateX(100%);
  }
  .nav_ul a {
    border-bottom: 1px solid rgba(251, 250, 247, 0.4);
    width: 90%;
    justify-content: left;
    height: 45px;
    padding: 5px 25px 5px 25px;
  }
  .nav_ul a:hover {
    animation: none;
    border-radius: 0;
  }
}
.menu_li_link {
  padding-bottom: 5px;
  width: 220px;
}
.menu_li_link span {
  position: relative;
  height: 100%;
}
@media only screen and (max-width: 830px) {
  .menu_li_link span {
    padding-left: 10px;
  }
}
@media only screen and (max-width: 830px) {
  .menu_li_link span::after {
    display: none;
  }
}
.menu_li_link span::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #fff;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}
.menu_li_link:hover span::after {
  transform: scaleX(1);
}

.boxNomStar {
  display: flex;
  position: relative;
}

.li_contact {
  position: relative;
}
.li_contact span {
  z-index: 15;
}

#starContainer {
  position: absolute;
  z-index: 5;
  right: 60px;
  top: 30px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#star {
  display: flex;
  flex-direction: column;
}

#half,
#half2 {
  display: flex;
}

.starQuarter {
  width: 40px;
  height: 40px;
  animation: animStarSize 4s ease-in-out infinite;
}

#topLeft {
  background: radial-gradient(ellipse at top left, transparent 70%, rgb(255, 255, 255) 100%);
}

#topRight {
  background: radial-gradient(ellipse at top right, transparent 70%, rgb(255, 255, 255) 100%);
}

#bottomLeft {
  background: radial-gradient(ellipse at bottom left, transparent 70%, rgb(255, 255, 255) 100%);
}

#bottomRight {
  background: radial-gradient(ellipse at bottom right, transparent 70%, rgb(253, 253, 230) 100%);
}

@keyframes animStarSize {
  0% {
    height: 40px;
    width: 40px;
  }
  25% {
    height: 60px;
    width: 50px;
  }
  50% {
    height: 40px;
    width: 40px;
  }
  75% {
    height: 50px;
    width: 60px;
  }
  100% {
    height: 40px;
    width: 40px;
  }
}
@media only screen and (max-width: 830px) {
  .menu_li_link span::after {
    display: none;
  }
}
.boite {
  background-color: #454448;
  background: linear-gradient(to left, rgb(34, 33, 33) 0%, rgb(52, 53, 57) 100%);
  justify-self: center;
  border-radius: 15px;
}
@media only screen and (max-width: 1000px) {
  .boite {
    margin-top: 30px;
    margin-bottom: 50px;
  }
}
@media only screen and (max-width: 550px) {
  .boite {
    height: auto;
    margin-bottom: 30px;
    width: 100%;
    margin-right: 0;
  }
}
.boite .skillcapacite {
  width: 300px;
}
@media only screen and (max-width: 550px) {
  .boite .skillcapacite {
    justify-content: center;
  }
}
.boite .skillcapacite .name {
  margin-left: 10px;
  margin-right: 15px;
}
.boite .skillcapacite .name span {
  background-color: #0ba9c5;
  padding: 5px 18px 12px 18px;
  width: 200px;
  height: 25px;
}
@media only screen and (max-width: 550px) {
  .boite .skillcapacite .name span {
    font-size: 1rem;
    width: 160px;
    height: 18px;
  }
}

@media (max-width: 800px) {
  .skillcapacite {
    padding: 15px;
    margin-left: 10px;
  }
}
@media only screen and (max-width: 800px) and (max-width: 550px) {
  .skillcapacite {
    margin-left: 0;
  }
}
.capacite {
  display: flex;
  margin: 20px;
}
@media only screen and (max-width: 550px) {
  .capacite {
    margin: 20px 0;
  }
}

.skillcapacite::before {
  content: "Mes qualités";
  transform: rotate(-5deg);
  position: absolute;
  top: -30px;
  left: 30px;
  background: rgb(242, 59, 80);
  box-shadow: 2px 1px 4px rgba(0, 0, 0, 0.5);
  padding: 10px 25px;
  color: #fff;
}

.skillcapacite {
  display: flex;
  justify-content: center;
  padding: 20px 30px 20px 30px;
  border-radius: 15px;
  position: relative;
}

.skillcapacite .name {
  display: flex;
  flex-direction: column;
  color: #fff;
  font-size: 1.4em;
  font-weight: 400;
  margin-right: 30px;
}

.skillcapacite .name span {
  margin: 7px 0;
  display: block;
  padding: 10px 20px;
  text-align: center;
  border-radius: 50px;
  border: 5px solid #b49090;
  transition: 0.2s;
  cursor: pointer;
  width: 170px;
  color: #fff;
  text-shadow: 1px 1px #267389, 1px 2px rgb(31, 85, 130), 1px 3px #2271af;
  font-weight: bold;
}

.skillcapacite .name span:hover {
  color: #3a3a3d;
  background-color: rgb(47, 219, 239);
  border-color: rgb(251, 251, 251);
  box-shadow: 5.91px 5.91px 10px #d9dade, -5.91px -5.91px 10px #ffffff, inset 5.91px 5.91px 10px #d9dade, inset -5.91px -5.91px 10px #ffffff;
  text-shadow: 1px 1px #d9dbdb, 1px 2px rgb(214, 216, 216), 1px 3px #cccfcf, 1px 4px #c7caca, 1px 5px #bebfc0, 1px 5px #aeb0b0;
}

.niveau_capacite {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.niveau {
  width: 200px;
  height: 15px;
  border-radius: 20px;
  box-shadow: inset 6px 6px 6px #d9dade, inset -6px -6px 6px #ffffff;
}
@media only screen and (max-width: 550px) {
  .niveau {
    width: 140px;
    height: 12px;
  }
}

.niveau .progress {
  height: 100%;
  background: linear-gradient(to right, #9a989c, #4a484e);
  border-radius: 20px;
}

.niveau:nth-child(1) .progress {
  width: 90%;
}

.niveau:nth-child(2) .progress {
  width: 80%;
}

.niveau:nth-child(3) .progress {
  width: 80%;
}

.niveau:nth-child(4) .progress {
  width: 70%;
}

.niveau:nth-child(5) .progress {
  width: 90%;
}

.competence {
  color: whitesmoke;
  margin-left: 10px;
  padding-left: 40px;
}

.loader_page {
  z-index: 999;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 1;
  overflow: hidden;
  animation: loaderAnimation 0.4s forwards;
  animation-delay: 1.2s;
  background-size: 400% 400%;
  align-items: center;
  display: flex;
}

.loaderWrapper {
  position: relative;
  bottom: 50px;
  z-index: 999;
  align-items: center;
  justify-content: center;
  display: flex;
  width: 100%;
}

.loader {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  perspective: 800px;
}
@media only screen and (max-width: 550px) {
  .loader {
    width: 60px;
    height: 60px;
  }
}

.span_loader {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.span_loader:nth-child(1) {
  border-bottom: 6px double rgb(218, 0, 0);
  transform: rotateX(35deg) rotateY(-45deg);
  animation: rotateOne 0.8s linear infinite;
}

.span_loader:nth-child(2) {
  border-right: 6px double rgb(200, 0, 0);
  transform: rotateX(50deg) rotateY(10deg);
  animation: rotateTwo 0.8s linear infinite;
}

.span_loader:nth-child(3) {
  border-top: 6px double rgb(211, 0, 0);
  transform: rotateX(35deg) rotateY(55deg);
  animation: rotateThree 0.8s linear infinite;
}

@keyframes rotateOne {
  to {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}
@-webkit-keyframes rotateOne {
  to {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}
@keyframes rotateTwo {
  to {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}
@-webkit-keyframes rotateTwo {
  to {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}
@keyframes rotateThree {
  to {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}
@-webkit-keyframes rotateThree {
  to {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}
@keyframes loaderAnimation {
  0% {
    overflow: visible;
    opacity: 0.92;
  }
  30% {
    background-color: rgb(50, 50, 50);
  }
  70% {
    opacity: 0.6;
    background-color: rgb(50, 50, 50);
  }
  80% {
    opacity: 0.3;
    background-color: rgb(50, 50, 50);
  }
  90% {
    opacity: 0.1;
    background-color: rgb(50, 50, 50);
  }
  98% {
    opacity: 0;
    top: 0;
    background-color: rgb(50, 50, 50);
  }
  100% {
    opacity: 0;
    display: none;
    top: -100%;
    background-color: rgb(50, 50, 50);
  }
}
#home {
  position: relative;
  top: -60px;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#home .container {
  position: relative;
  top: -60px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
@media only screen and (max-width: 830px) {
  #home .container {
    top: -60px;
  }
}
@media only screen and (max-width: 550px) {
  #home .container {
    height: 100%;
    width: 100%;
  }
}
#home .container .box_photo {
  position: relative;
}
#home .container .box_photo .rond-blanc0, #home .container .box_photo .rond-blanc1, #home .container .box_photo .rond-blanc2 {
  position: absolute;
  top: -10px;
  left: 250px;
  width: 20px;
  height: 20px;
  background-color: rgb(255, 255, 255);
  border-radius: 50%;
  z-index: 50;
}
#home .container .box_photo .rond-blanc0 {
  top: 3px;
  left: 115px;
  width: 10px;
  height: 10px;
}
@media only screen and (max-width: 550px) {
  #home .container .box_photo .rond-blanc0 {
    left: 100px;
    top: 0px;
    width: 7px;
    height: 7px;
  }
}
#home .container .box_photo .rond-blanc1 {
  top: -15px;
  left: 130px;
  width: 13px;
  height: 13px;
}
@media only screen and (max-width: 550px) {
  #home .container .box_photo .rond-blanc1 {
    width: 12px;
    height: 12px;
    top: -10px;
    left: 110px;
  }
}
#home .container .box_photo .rond-blanc2 {
  top: -30px;
  left: 155px;
  width: 18px;
  height: 18px;
}
@media only screen and (max-width: 550px) {
  #home .container .box_photo .rond-blanc2 {
    display: none;
  }
}
#home .container .box_photo #github_home {
  position: absolute;
  left: 169px;
  top: -58px;
  z-index: 50;
  box-shadow: none;
}
@media only screen and (max-width: 550px) {
  #home .container .box_photo #github_home {
    left: 110px;
    top: -45px;
  }
}
#home .container .box_photo #github_home .icon_github a {
  width: 38px;
  height: 38px;
}
#home .container .box_photo #github_home .icon_github a i {
  font-size: 28px;
  line-height: 38px;
}
#home .container .box_photo #github_home .icon_github:hover .tooltip_github {
  top: -50px;
}
#home .wrapTitle {
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 20px 0 40px 0;
  align-items: center;
}
#home .presentation {
  margin: 30px 0 30px 0;
  font-weight: 400;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#home .presentation h1,
#home .presentation p {
  margin: 0;
}
#home .text-3d {
  color: rgb(255, 255, 255);
  text-shadow: 1px 1px 3px #000;
}
#home h1 {
  margin: 0px;
  font-size: 2.6rem;
  line-height: 2rem;
}
@media only screen and (max-width: 550px) {
  #home h1 {
    font-size: 2.2rem;
    line-height: 1.8rem;
  }
}
#home .text_web {
  font-size: 1.3rem;
  color: rgba(193, 189, 188, 0.9);
  text-shadow: 1px 1px 1px rgb(244, 241, 241), 1px 1px 1px rgb(233, 230, 230), 1px 1px 1px rgb(227, 224, 224), 1px 1px 1px rgb(224, 222, 222);
}
@media only screen and (max-width: 550px) {
  #home .text_web {
    font-size: 1.1rem;
  }
}
#home .c1 {
  display: block;
  box-sizing: border-box;
  position: relative;
}
#home .c2 {
  display: block;
  box-sizing: border-box;
  margin-top: 10px;
}
#home .type1 {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  opacity: 0;
  font-weight: bold;
  animation: typing 0.4s 1.7s steps(27, end) forwards, borderVisible 0.01s 1.7s forwards;
}
#home .type2 {
  position: relative;
  text-align: center;
  box-sizing: border-box;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  text-shadow: 1px 1px 1px rgb(63, 62, 62), 1px 1px 1px rgb(103, 3, 3), 1px 1px 1px rgb(101, 2, 2), 1px 1px 1px rgb(101, 2, 2), 1px 1px 1px rgb(101, 2, 2), 1px 1px 1px rgb(101, 2, 2), 1px 1px 1px rgb(101, 2, 2), 1px 1px 1px rgb(77, 3, 3);
  animation: typing 0.8s 2.1s steps(38, end) forwards, blink 0.75s 2.1s infinite, borderVisible 0.01s 2.1s forwards;
}
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes borderVisible {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes borderHidden {
  from {
    border-right: 0.15em solid rgb(224, 224, 224);
  }
  to {
    border-right: none;
  }
}
@keyframes borderHidden2 {
  from {
    border-right: 0.16em solid rgb(224, 224, 224);
  }
  to {
    border-right: none;
  }
}
@keyframes blink {
  from {
    border-color: transparent;
  }
  to {
    border-color: rgb(189, 193, 190);
  }
}
#home .box_photo {
  height: 130px;
  width: 130px;
}
#home .box_photo.hiddenImg {
  display: none;
}
#home .box_photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#home .main_frozzen.frozzen {
  background: linear-gradient(280deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
  filter: blur(10px);
}
#home #btn_home {
  position: relative;
  overflow: hidden;
  border-radius: 9999px;
  text-align: center;
  justify-content: center;
  display: block;
  text-decoration: none;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
  border: 3px solid rgb(242, 59, 80);
  color: #fff;
  letter-spacing: 1px;
  background: rgb(242, 59, 80);
  font-weight: 500;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
  margin: 15px auto 0;
  padding: 10px 15px;
  width: 250px;
  font-size: 1.2rem;
}
#home #btn_home:hover {
  background: rgb(189, 19, 39);
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
  transform: translatey(1px);
  border-color: rgb(189, 19, 39);
  border-left: 1px solid rgb(189, 19, 39);
  border-right: 1px solid rgb(189, 19, 39);
}
#home #btn_home::before {
  content: "";
  position: absolute;
  width: 200px;
  height: 20px;
  background: rgba(255, 255, 255, 0.4);
  transform: rotate(-45deg);
  left: -150px;
}
#home #btn_home:hover::before {
  transition: 0.8s transform linear;
  transform: translateX(500px) rotate(-45deg);
}
@media only screen and (max-width: 550px) {
  #home #btn_home {
    margin-top: 15px;
    border-left: none;
    border-right: none;
  }
}

.main_projets {
  color: #fff;
  text-align: center;
  box-sizing: border-box;
  background: linear-gradient(250deg, rgba(26, 26, 30, 0.2), rgba(47, 44, 44, 0.1));
  /* Section asymétrique */
  /* Placement */
}
.main_projets #p_projet3 .p_projet,
.main_projets #p_projet4 .p_projet,
.main_projets #p_projet6 .p_projet,
.main_projets #p_projet7 .p_projet,
.main_projets #p_projet11 .p_projet,
.main_projets #p_projet14 .p_projet,
.main_projets #p_projet12 .p_projet {
  line-height: 18px;
  font-size: 1rem;
  text-align: left;
  margin: 0;
  padding: 0 10px 0 30px;
}
@media only screen and (max-width: 550px) {
  .main_projets #p_projet3 .p_projet,
  .main_projets #p_projet4 .p_projet,
  .main_projets #p_projet6 .p_projet,
  .main_projets #p_projet7 .p_projet,
  .main_projets #p_projet11 .p_projet,
  .main_projets #p_projet14 .p_projet,
  .main_projets #p_projet12 .p_projet {
    padding: 0 10px 0 20px;
    text-justify: auto;
  }
}
.main_projets #p_projet3 .p_projet,
.main_projets #p_projet4 .p_projet,
.main_projets #p_projet6 .p_projet,
.main_projets #p_projet7 .p_projet,
.main_projets #p_projet11 .p_projet {
  padding: 0 10px 0 30px;
}
@media only screen and (max-width: 550px) {
  .main_projets #p_projet3 .p_projet,
  .main_projets #p_projet4 .p_projet,
  .main_projets #p_projet6 .p_projet,
  .main_projets #p_projet7 .p_projet,
  .main_projets #p_projet11 .p_projet {
    padding: 0 10px 0 20px;
  }
}
.main_projets #p_projet13 .p_projet {
  padding: 0 10px 0 30px;
  line-height: 20px;
  margin-bottom: 0;
  text-align: left;
}
@media only screen and (max-width: 550px) {
  .main_projets #p_projet13 .p_projet {
    padding: 0 10px 0 20px;
    font-size: 1rem;
  }
}
.main_projets #p_projet4 .p_projet,
.main_projets #p_projet7 .p_projet,
.main_projets #p_projet14 .p_projet,
.main_projets #p_projet12 .p_projet {
  padding: 0 5px 0 5px;
}
@media only screen and (max-width: 830px) {
  .main_projets #p_projet4 .p_projet,
  .main_projets #p_projet7 .p_projet,
  .main_projets #p_projet14 .p_projet,
  .main_projets #p_projet12 .p_projet {
    padding: 0 10px 0 30px;
  }
}
@media only screen and (max-width: 550px) {
  .main_projets #p_projet4 .p_projet,
  .main_projets #p_projet7 .p_projet,
  .main_projets #p_projet14 .p_projet,
  .main_projets #p_projet12 .p_projet {
    padding: 0 10px 0 20px;
  }
}
.main_projets .ul_projets {
  text-align: left;
  margin: 0 0 20px 0;
}
@media only screen and (max-width: 550px) {
  .main_projets .ul_projets {
    margin: 0 0 15px 0;
  }
}
.main_projets .ul_projets li {
  text-align: left;
  padding: 5px 5px 5px 0;
}
@media only screen and (max-width: 550px) {
  .main_projets .ul_projets li {
    padding: 0 15px 0 0;
  }
}
.main_projets .iconResponsive {
  position: relative;
  bottom: 0;
  margin-bottom: 10px;
}
@media only screen and (max-width: 550px) {
  .main_projets .iconResponsive {
    margin: 0 0 15px 0;
  }
}
.main_projets .iconResponsive i {
  padding-left: 6px;
  padding-right: 6px;
  font-size: 1.4rem;
}
.main_projets .borderProjet {
  background: rgb(47, 45, 45);
  height: 70px;
}
@media only screen and (max-width: 830px) {
  .main_projets .borderProjet {
    height: 60px;
  }
}
@media only screen and (max-width: 830px) {
  .main_projets #border-endSection {
    display: none;
  }
}
.main_projets .accueil {
  padding-top: 90px;
  width: 80%;
  margin: 0 auto 0;
  height: auto;
  padding-bottom: 20px;
  box-shadow: 1px 1px 4px 1px rgba(96, 95, 95, 0.3);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-bottom: 7px solid #615f55;
  border-radius: 0 0 16px 16px;
  border-left: 1px solid rgba(113, 108, 108, 0.4);
  border-right: 1px solid rgba(113, 108, 108, 0.4);
}
@media only screen and (max-width: 830px) {
  .main_projets .accueil {
    padding-top: 50px;
  }
}
.main_projets .accueil h2 {
  text-align: center;
  font-size: 3.2rem;
  text-shadow: 0 0 10px #000;
  margin-top: 10px;
  font-family: Merienda one, sans-serif;
}
.main_projets .sous-titre {
  text-align: center;
  font-size: 1.4rem;
  font-weight: bold;
  margin: 5px 0;
  text-shadow: 0 0 10px #000;
}
@media screen and (max-width: 850px) {
  .main_projets .accueil h2 {
    font-size: 2.2rem;
    padding-top: 15px;
  }
  .main_projets .sous-titre {
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 400px) {
  .main_projets .accueil h2 {
    font-size: 2rem;
  }
  .main_projets .sous-titre {
    font-size: 1rem;
  }
}
.main_projets #AccueilProjetExplic {
  display: none;
}
.main_projets #AccueilProjetExplic.isVisible {
  display: flex;
  color: #fff;
  margin: 20px 10px 0;
  padding: 8px;
  font-size: 1.2rem;
  background: linear-gradient(280deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
  border: 1px solid rgb(199, 198, 198);
  transform-origin: top center;
  animation: scaleZ 0.6s ease-in-out forwards;
  position: relative;
}
@keyframes scaleZ {
  0% {
    opacity: 0;
    transform: scale(0);
    top: -15px;
  }
  10% {
    opacity: 0.3;
    top: 0px;
  }
  80% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}
.main_projets .btn-accueil {
  position: relative;
  overflow: hidden;
  border-radius: 9999px;
  text-align: center;
  justify-content: center;
  display: block;
  text-decoration: none;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
  border: 3px solid rgb(242, 59, 80);
  color: #fff;
  letter-spacing: 1px;
  background: rgb(242, 59, 80);
  font-weight: 500;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
  font-size: 1.3rem;
  width: 200px;
  height: 60px;
  margin: 30px auto 15px;
  border: 3px solid rgb(242, 59, 80);
  background: inherit;
}
.main_projets .btn-accueil:hover {
  background: rgb(189, 19, 39);
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
  transform: translatey(1px);
  border-color: rgb(189, 19, 39);
  border-left: 1px solid rgb(189, 19, 39);
  border-right: 1px solid rgb(189, 19, 39);
}
.main_projets .btn-accueil::before {
  content: "";
  position: absolute;
  width: 200px;
  height: 20px;
  background: rgba(255, 255, 255, 0.4);
  transform: rotate(-45deg);
  left: -150px;
}
.main_projets .btn-accueil:hover::before {
  transition: 0.8s transform linear;
  transform: translateX(500px) rotate(-45deg);
}
.main_projets .btn-accueil:hover, .main_projets .btn-accueil.redColor {
  border-color: rgb(189, 19, 39);
}
@media only screen and (max-width: 830px) {
  .main_projets .btn-accueil {
    width: 180px;
    height: 50px;
    font-size: 1.2rem;
    margin: 30px auto 20px;
  }
}
@media only screen and (max-width: 550px) {
  .main_projets .btn-accueil {
    margin: 20px auto 5px;
    font-size: 1rem;
  }
}
.main_projets hr {
  color: #fff;
  margin: 0;
}
.main_projets .section-asymetrique0 {
  display: grid;
  grid-template: 140px repeat(6, auto) 30px/1fr 600px 1fr;
}
.main_projets .section-asymetrique {
  display: grid;
  grid-template: 10px repeat(6, auto) 30px/1fr 600px 1fr;
}
.main_projets .section-asymetrique2 {
  grid-template: 10px repeat(6, auto) 30px/1fr 600px 1fr;
}
.main_projets .section-asymetrique3 {
  grid-template: 10px repeat(4, auto) 30px/1fr 600px 1fr;
}
.main_projets .section-asymetrique h2 {
  grid-area: 1/1/2/-1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 1.4rem;
  text-transform: uppercase;
  padding-bottom: 20px;
}
.main_projets .section-asymetrique .h2bis {
  grid-area: 1/1/2/-1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 1rem;
  text-transform: uppercase;
  padding-bottom: 20px;
}
.main_projets .section-asymetrique .h2ter {
  grid-area: 1/1/2/-1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 1rem;
  text-transform: uppercase;
  padding-bottom: 20px;
  height: 1px;
}
@media only screen and (max-width: 830px) {
  .main_projets .img-grid {
    border-bottom: 10px solid rgb(114, 111, 111);
    margin-bottom: -3px;
  }
}
@media only screen and (max-width: 550px) {
  .main_projets .img-grid {
    background: linear-gradient(to left, rgb(34, 33, 33) 0%, rgb(52, 53, 57) 100%);
    border-bottom: 10px solid rgb(114, 111, 111);
    margin-bottom: -3px;
  }
}
.main_projets .img-grid img {
  height: 100%;
  object-fit: cover;
}
.main_projets .img-grid .imgTableprojet14 {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.main_projets .bloc-1,
.main_projets .img-grid-1 {
  grid-area: 2/2/3/3;
}
.main_projets .bloc-right,
.main_projets .img-grid-2 {
  grid-area: 3/2/4/3;
}
.main_projets .bloc-3,
.main_projets .img-grid-3 {
  grid-area: 4/2/5/3;
}
.main_projets .bloc {
  background: linear-gradient(to left, rgb(34, 33, 33) 0%, rgb(52, 53, 57) 100%);
  box-sizing: border-box;
  color: #fff;
  position: relative;
  height: 620px;
  margin-bottom: 150px;
}
.main_projets .img-grid {
  width: 450px;
  height: 630px;
  object-fit: cover;
  position: relative;
}
.main_projets .img-grid-1,
.main_projets .img-grid-3 {
  top: 60px;
  left: 20px;
}
.main_projets .bloc-left {
  left: -300px;
}
.main_projets .bloc-txt-left {
  width: 50%;
  height: 100%;
}
.main_projets .bloc-txt-left h3 {
  white-space: nowrap;
  font-size: 1.8rem;
  margin: 30px 15px;
}
.main_projets .bloc-txt-left p {
  line-height: 40px;
  padding: 15px;
}
.main_projets .bloc .btnProjet {
  position: relative;
  overflow: hidden;
  border-radius: 9999px;
  text-align: center;
  justify-content: center;
  display: block;
  text-decoration: none;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
  border: 3px solid rgb(242, 59, 80);
  color: #fff;
  letter-spacing: 1px;
  background: rgb(242, 59, 80);
  font-weight: 500;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
  outline: none;
  padding: 15px 5px;
  font-size: 1.1rem;
  margin: 35px auto;
  width: 200px;
}
.main_projets .bloc .btnProjet:hover {
  background: rgb(189, 19, 39);
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
  transform: translatey(1px);
  border-color: rgb(189, 19, 39);
  border-left: 1px solid rgb(189, 19, 39);
  border-right: 1px solid rgb(189, 19, 39);
}
.main_projets .bloc .btnProjet::before {
  content: "";
  position: absolute;
  width: 200px;
  height: 20px;
  background: rgba(255, 255, 255, 0.4);
  transform: rotate(-45deg);
  left: -150px;
}
.main_projets .bloc .btnProjet:hover::before {
  transition: 0.8s transform linear;
  transform: translateX(500px) rotate(-45deg);
}
@media only screen and (max-width: 830px) {
  .main_projets .bloc .btnProjet {
    margin: 5px auto 20px;
  }
}
.main_projets .bloc .btnProjet.btnProjet14 {
  margin: 25px auto 25px;
}
@media only screen and (max-width: 830px) {
  .main_projets .bloc .btnProjet.btnProjet14 {
    margin: 20px auto 20px;
  }
}
.main_projets .bloc-right {
  right: -300px;
}
.main_projets .bloc-right ul {
  padding: 0 5px 0 10px;
}
.main_projets .img-grid-2 {
  top: 60px;
  left: 120px;
}
.main_projets .bloc-right2 {
  right: -300px;
}
.main_projets .img-grid2-1,
.main_projets .img-grid2-3 {
  top: 60px;
  left: 120px;
}
.main_projets .img-grid2-2 {
  top: 60px;
  left: 20px;
}
.main_projets .bloc-left2 {
  left: -300px;
}
.main_projets .bloc2-1,
.main_projets .img-grid2-1 {
  grid-area: 2/2/3/3;
}
.main_projets .bloc-left2,
.main_projets .img-grid2-2 {
  grid-area: 3/2/4/3;
}
.main_projets .bloc2-3,
.main_projets .img-grid2-3 {
  grid-area: 4/2/5/3;
}
.main_projets .bloc-txt-right {
  position: absolute;
  right: 0;
  width: 50%;
  height: 100%;
}
.main_projets .bloc-txt-right ul {
  padding: 0 5px 0 10px;
}
@media only screen and (max-width: 830px) {
  .main_projets .bloc-txt-right ul {
    padding-left: 40px;
  }
}
.main_projets .bloc-txt-right h3 {
  position: relative;
  font-size: 1.8rem;
  margin: 30px 15px;
}
.main_projets .bloc-txt-right #projet14 {
  margin: 30px 15px 10px;
  align-items: center;
  display: flex;
  justify-content: center;
}
.main_projets .bloc-txt-right p {
  line-height: 40px;
  padding: 15px;
}
.main_projets .ligne-gauche {
  grid-area: 1/2/-1/3;
  border-left: 3px solid #fff;
  border-left: 4px solid #5e5a4c;
  border-left: 3px solid #a8a69e;
}
.main_projets .ligne-droite {
  grid-area: 1/3/-1/4;
  border-left: 3px solid #fff;
  border-left: 4px solid #5e5a4c;
  border-left: 3px solid #a8a69e;
}
@media screen and (max-width: 1200px) {
  .main_projets .section-asymetrique {
    grid-template: 80px repeat(6, auto) 10px/1fr 600px 1fr;
  }
  .main_projets .section-asymetrique2 {
    grid-template: 40px repeat(6, auto) 30px/1fr 600px 1fr;
  }
  .main_projets .section-asymetrique h2 {
    font-size: 1.4rem;
    padding-bottom: 0px;
  }
  .main_projets .bloc-1 {
    grid-area: 2/2/3/3;
  }
  .main_projets .img-grid-1 {
    grid-area: 3/2/4/3;
  }
  .main_projets .bloc-right {
    grid-area: 4/2/5/3;
  }
  .main_projets .img-grid-2 {
    grid-area: 5/2/6/3;
  }
  .main_projets .bloc-3 {
    grid-area: 6/2/7/3;
  }
  .main_projets .img-grid-3 {
    grid-area: 7/2/8/3;
  }
  .main_projets .bloc2-1 {
    grid-area: 2/2/3/3;
  }
  .main_projets .img-grid2-1 {
    grid-area: 3/2/4/3;
  }
  .main_projets .bloc-left2 {
    grid-area: 4/2/5/3;
  }
  .main_projets .img-grid2-2 {
    grid-area: 5/2/6/3;
  }
  .main_projets .bloc2-3 {
    grid-area: 6/2/7/3;
  }
  .main_projets .img-grid2-3 {
    grid-area: 7/2/8/3;
  }
  .main_projets .bloc {
    height: 100%;
    margin-bottom: 0px;
  }
  .main_projets .img-grid {
    position: static;
    width: 600px;
    perspective: 600px;
    perspective-origin: bottom 100px;
  }
  .main_projets .img-grid-1,
  .main_projets .img-grid-3 {
    top: 0px;
    left: 0px;
  }
  .main_projets .img-grid-2 {
    top: 0px;
    left: 0px;
  }
  .main_projets .bloc-left {
    left: 0px;
  }
  .main_projets .bloc-right {
    right: 0px;
  }
  .main_projets .img-grid2-1,
  .main_projets .img-grid-3 {
    top: 0px;
    left: 0px;
  }
  .main_projets .img-grid2-2 {
    top: 0px;
    left: 0px;
  }
  .main_projets .bloc-left2 {
    left: 0px;
  }
  .main_projets .bloc-right2 {
    right: 0px;
  }
  .main_projets .bloc-txt-left {
    width: 100%;
    height: 100%;
  }
  .main_projets #bloc-txt-left13 {
    width: 100%;
    height: 100%;
  }
  .main_projets .bloc-txt-left h3,
  .main_projets .bloc-txt-right h3 {
    text-align: center;
  }
  .main_projets .bloc-txt-left p,
  .main_projets .bloc-txt-right p {
    font-size: 20px;
    line-height: 1.8;
    padding: 15px;
  }
  .main_projets .bloc button {
    font-size: 20px;
    padding: 15px 30px;
    margin-bottom: 30px;
  }
  .main_projets .bloc-txt-right {
    position: static;
    width: 100%;
    height: 100%;
  }
}
@media screen and (max-width: 550px) {
  .main_projets .section-asymetrique0 {
    grid-template: 120px repeat(6, auto) 1px/100%;
  }
  .main_projets .section-asymetrique {
    grid-template: 1px repeat(6, auto) 1px/100%;
  }
  .main_projets .section-asymetrique2 {
    grid-template: 1px repeat(6, auto) 1px/100%;
  }
  .main_projets .section-asymetrique3 {
    grid-template: 1px repeat(6, auto) 1px/100%;
  }
  .main_projets .ligne-gauche,
  .main_projets .ligne-droite {
    display: none;
  }
  .main_projets .section-asymetrique h2 {
    font-size: 1.2rem;
  }
  .main_projets .bloc,
  .main_projets .img-grid {
    grid-area: auto;
  }
  .main_projets .img-grid {
    width: 100%;
    box-sizing: border-box;
    height: 300px;
    padding: 15px 30px 25px 30px;
  }
  .main_projets #img_projet12_1 {
    height: 300px;
  }
  .main_projets .bloc-txt-left h3,
  .main_projets .bloc-txt-right h3 {
    font-size: 1.5rem;
    margin: 20px 10px 20px 10px;
  }
  .main_projets .bloc-txt-right {
    width: 100%;
    font-size: 0.9rem;
    line-height: 1.2rem;
  }
  .main_projets .bloc-txt-left {
    font-size: 0.9rem;
    line-height: 1.2rem;
  }
}

.box_imgProjet {
  height: 100%;
  width: 100%;
  position: relative;
}
@media only screen and (max-width: 550px) {
  .box_imgProjet {
    padding: 20px 20px 20px 20px;
    background: inherit;
    background: linear-gradient(to left, rgb(56, 163, 187) 0%, rgb(45, 154, 190) 100%);
    box-sizing: border-box;
    border: 3px solid rgb(222, 171, 171);
    border-radius: 10px 10px 10px 10px;
  }
}
@media only screen and (max-width: 550px) {
  .box_imgProjet .box_img14 {
    position: relative;
  }
}

.img-grid {
  background: linear-gradient(to right, rgba(219, 153, 140, 0.35) 0%, rgba(110, 63, 63, 0.36) 100%);
  border: 4px solid rgb(145, 116, 110);
}
@media only screen and (max-width: 830px) {
  .img-grid {
    background: none;
    border: none;
  }
}

.bloc::after {
  content: "";
  background-color: rgb(68, 75, 86);
  position: absolute;
  top: 10px;
  right: -20px;
  height: 100%;
  width: 20px;
  transform: skewy(40deg);
}
.bloc::before {
  content: "";
  background-color: rgb(41, 44, 55);
  position: absolute;
  bottom: -20px;
  left: 9px;
  height: 20px;
  width: 100%;
  transform: skewX(50deg);
}

@media only screen and (max-width: 830px) {
  .img-grid {
    background-color: transparent;
  }
  .bloc::after {
    display: none;
  }
  .bloc::before {
    display: none;
  }
}
#imgProjet4_2,
#imgProjet_2,
#imgProjet6_2,
#imgProjet11_2,
#imgProjet13_2,
#imgProjet3_2,
#imgProjet7_2 {
  border-top: 1px solid rgb(212, 212, 212);
  border-left: 1px solid rgb(211, 211, 211);
  position: absolute;
  box-sizing: border-box;
  bottom: 0;
  right: 0;
}
@media only screen and (max-width: 830px) {
  #imgProjet4_2,
  #imgProjet_2,
  #imgProjet6_2,
  #imgProjet11_2,
  #imgProjet13_2,
  #imgProjet3_2,
  #imgProjet7_2 {
    right: 12px;
  }
}
#imgProjet4_2 img,
#imgProjet_2 img,
#imgProjet6_2 img,
#imgProjet11_2 img,
#imgProjet13_2 img,
#imgProjet3_2 img,
#imgProjet7_2 img {
  height: 100%;
}

@media only screen and (max-width: 550px) {
  #projet13 {
    margin-top: 20px;
    padding-top: 20px;
    margin-bottom: 10px;
  }
}

#imgProjet_12 {
  position: absolute;
  box-sizing: border-box;
  bottom: 0;
  right: 0;
}
@media only screen and (max-width: 830px) {
  #imgProjet_12 {
    right: 12px;
  }
}
#imgProjet_12 img {
  height: 100%;
}

#imgProjet4_2 {
  height: 450px;
}
@media only screen and (max-width: 550px) {
  #imgProjet4_2 {
    height: 80%;
    margin-bottom: 20px;
  }
}

#imgProjet6_2,
#imgProjet13_2,
#imgProjet11_2 {
  height: 400px;
}
@media only screen and (max-width: 550px) {
  #imgProjet6_2,
  #imgProjet13_2,
  #imgProjet11_2 {
    height: 80%;
    margin-bottom: 20px;
  }
}

#imgProjet_2 {
  height: 300px;
}

#imgProjet_12 {
  height: 300px;
}
@media screen and (max-width: 600px) {
  #imgProjet_12 {
    height: 200px;
  }
}

#imgProjet3_2 {
  height: 400px;
}
@media only screen and (max-width: 550px) {
  #imgProjet3_2 {
    height: 80%;
    margin-bottom: 20px;
  }
}

#imgProjet7_2 {
  height: 400px;
}
@media only screen and (max-width: 550px) {
  #imgProjet7_2 {
    height: 60%;
    margin-bottom: 20px;
  }
}

#imgProjet6_3,
#imgProjet12_2,
#imgProjet13_3,
#imgProjet11_3 {
  border-top: 1px solid rgb(211, 211, 211);
  border-right: 1px solid rgb(211, 211, 211);
  position: absolute;
  height: 250px;
  bottom: 0;
}
#imgProjet6_3 img,
#imgProjet12_2 img,
#imgProjet13_3 img,
#imgProjet11_3 img {
  height: 100%;
}

#imgProjet14_2 {
  border-top: 1px solid rgb(211, 211, 211);
  border-right: 1px solid rgb(211, 211, 211);
  position: absolute;
  width: 450px;
  height: auto;
  bottom: 0;
}
#imgProjet14_2 img {
  width: 100%;
}
@media only screen and (max-width: 550px) {
  #imgProjet14_2 {
    height: 40%;
    margin-bottom: 20px;
    width: auto;
  }
}

#imgProjet13_3 {
  height: 350px;
}

#imgProjet6_3,
#imgProjet13_3,
#imgProjet11_3 {
  left: 0;
}
@media only screen and (max-width: 830px) {
  #imgProjet6_3,
  #imgProjet13_3,
  #imgProjet11_3 {
    left: 12px;
  }
}

#imgProjet12_2 {
  right: 0;
}
@media only screen and (max-width: 830px) {
  #imgProjet12_2 {
    right: 12px;
  }
}

@media only screen and (max-width: 550px) {
  #imgProjet6_2 {
    height: 65%;
  }
}

@media only screen and (max-width: 550px) {
  #imgProjet13_3,
  #imgProjet11_3 {
    height: 60%;
    margin-bottom: 20px;
  }
}

@media only screen and (max-width: 550px) {
  #imgProjet6_3,
  #imgProjet12_2 {
    height: 140px;
    margin-bottom: 20px;
  }
}

.box_imgProjet2 {
  height: 90%;
}
.box_imgProjet2 img {
  object-fit: cover;
  height: 90%;
}

.boxFrontBack {
  display: flex;
  justify-content: center;
}

#projet13 {
  margin-bottom: 20px;
}

#link_11,
#link_11home,
#link_4,
#link_7,
#link_12 {
  margin-top: 10px;
}

#link_13,
#link_13bis,
#link_14,
#link_14bis,
#link_14ter,
#linknpm_14 {
  margin-top: 5px;
  display: inline-block;
}

#linknpm_14 {
  margin-bottom: 4px;
}

#link_11, #link_11home {
  position: relative;
  bottom: 0;
}

.wrapper_github {
  display: inline-flex;
}

.wrapper_github .icon_github {
  margin: 0 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  justify-content: center;
  flex-direction: column;
  position: relative;
  z-index: 2;
}

.wrapper_github .icon_github a {
  width: 40px;
  height: 40px;
  display: block;
  text-align: center;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.6);
  background-color: #fff;
  border-radius: 50%;
  color: #000;
  position: relative;
  z-index: 2;
}

.wrapper_github .icon_github.icon_github14 a {
  height: 40px;
}

.wrapper_github .icon_github:hover a {
  background-color: #0ba9c5;
}

.wrapper_github .icon_github a i {
  font-size: 30px;
  line-height: 40px;
}

.wrapper_github .icon_github:hover a i {
  color: #fff;
}

.wrapper_github .icon_github .tooltip_github {
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.6);
  font-size: 20px;
  padding: 10px 18px;
  border-radius: 25px;
  color: rgb(47, 45, 45);
  position: absolute;
  top: -25px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  background-color: #0ba9c5;
  color: #fff;
}

.wrapper_github .icon_github:hover .tooltip_github {
  opacity: 1;
  top: -70px;
  pointer-events: auto;
}

.wrapper_github .icon_github .tooltip_github::before {
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  background-color: #fff;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  background-color: #0ba9c5;
}

.main_formation {
  color: #fff;
  padding: 20px 4% 20px 4%;
  border-top: 8px solid rgb(126, 123, 123);
  background-color: rgba(0, 0, 0, 0.5);
  border-bottom: 8px solid rgb(126, 123, 123);
}
@media only screen and (max-width: 550px) {
  .main_formation {
    padding: 20px 2% 20px 2%;
  }
}
.main_formation h1,
.main_formation .h3_formation {
  text-align: center;
  color: #fff;
  font-size: 2rem;
}
.main_formation .box_savoir {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  margin-top: 30px;
  grid-auto-columns: minmax(570px, auto);
  align-items: center;
  margin-bottom: 60px;
  justify-content: center;
  padding-top: 100px;
}
@media only screen and (max-width: 1000px) {
  .main_formation .box_savoir {
    padding-top: 70px;
    display: flex;
    flex-direction: column;
  }
}
@media only screen and (max-width: 830px) {
  .main_formation .box_savoir {
    padding-top: 60px;
  }
}
@media only screen and (max-width: 550px) {
  .main_formation .box_savoir {
    padding-top: 30px;
  }
}
.main_formation .boite {
  grid-column: 1/2;
  grid-row: 1;
}
.main_formation .box_diplome {
  grid-column: 2/4;
  grid-row: 1;
  font-size: 1.2rem;
  display: flex;
  flex-direction: column;
}
.main_formation .box_diplome .box_titre {
  background-color: #454448;
  background: linear-gradient(to left, rgb(34, 33, 33) 0%, rgb(52, 53, 57) 100%);
  padding: 30px 30px 30px 30px;
  transition: all 0.2s ease-in-out;
  z-index: 2;
  width: 90%;
}
.main_formation .box_diplome .box_titre .box-iconsFormation {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.main_formation .box_diplome .box_titre:hover {
  transform: translateY(-5px);
}
@media only screen and (max-width: 550px) {
  .main_formation .box_diplome .box_titre {
    padding: 10px 15px 10px 15px;
  }
}
.main_formation .box_diplome h2 {
  padding: 15px 0 15px 0;
  background-color: rgba(66, 65, 65, 0.8);
  background: linear-gradient(to left, rgb(34, 33, 33) 0%, rgb(52, 53, 57) 100%);
  display: block;
  margin: 0;
  text-align: center;
  position: relative;
  font-size: 2.2rem;
}
@media only screen and (max-width: 1000px) {
  .main_formation .box_diplome h2 {
    margin-top: 40px;
  }
}
@media only screen and (max-width: 550px) {
  .main_formation .box_diplome h2 {
    font-size: 1.9rem;
    margin-top: 20px;
  }
}
.main_formation .box_diplome .box_titre {
  position: relative;
}
.main_formation .box_diplome .box_titre::after {
  content: "";
  background-color: rgb(88, 92, 98);
  position: absolute;
  top: 6px;
  right: -10px;
  height: 100%;
  width: 10px;
  transform: skewy(50deg);
  z-index: -1;
}
@media only screen and (max-width: 550px) {
  .main_formation .box_diplome .box_titre::after {
    display: none;
  }
}
.main_formation .box_diplome .box_titre::before {
  content: "";
  background-color: rgb(68, 65, 65);
  position: absolute;
  bottom: -10px;
  left: 6px;
  height: 10px;
  width: 100%;
  transform: skewX(50deg);
}
@media only screen and (max-width: 550px) {
  .main_formation .box_diplome .box_titre::before {
    display: none;
  }
}
.main_formation .box_diplome .box_titre h3 {
  align-self: flex-start;
  display: block;
  width: 100%;
  font-size: 1.2rem;
  margin: 10px 20px 5px 0;
}
@media only screen and (max-width: 550px) {
  .main_formation .box_diplome .box_titre h3 {
    font-size: 0.9rem;
  }
}
.main_formation .box_diplome .box_titre h3.title_formation {
  margin: 10px 20px 10px 0;
}
.main_formation .box_diplome .box_titre h4 {
  padding-left: 25px;
  font-size: 1rem;
  color: rgb(222, 171, 171);
  margin: 0 10px 10px 0;
}
@media only screen and (max-width: 550px) {
  .main_formation .box_diplome .box_titre h4 {
    font-size: 0.8rem;
    margin: 0 10px 0 0;
  }
}
.main_formation .box_diplome .box_titre span {
  margin-right: 20px;
  z-index: -1;
}
.main_formation .box_diplome .box_titre .flex {
  align-items: center;
}
.main_formation .section_certif h3 {
  margin: 30px 0 0 0;
  display: block;
  background-color: rgba(27, 21, 21, 0.2);
  padding-bottom: 20px;
  padding-top: 20px;
}
.main_formation .section-skill {
  padding-bottom: 50px;
}
@media only screen and (max-width: 550px) {
  .main_formation .section-skill {
    padding-bottom: 20px;
  }
}
.main_formation .section-skill h2 {
  text-align: center;
  margin: 30px 0 0 0;
  font-size: 2.2rem;
  display: block;
  background: linear-gradient(to left, rgb(34, 33, 33) 0%, rgb(52, 53, 57) 100%);
  padding-bottom: 20px;
  padding-top: 20px;
  position: relative;
  border-bottom: 5px solid #5e5a4c;
  box-sizing: border-box;
}
@media only screen and (max-width: 550px) {
  .main_formation .section-skill h2 {
    font-size: 1.9rem;
    margin: 20px 0 0 0;
  }
}
.main_formation .section-skill .container-skill {
  display: flex;
  justify-content: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.main_formation .section-skill .cartes-skill {
  background: linear-gradient(to left, rgb(34, 33, 33) 0%, rgb(52, 53, 57) 100%);
  color: #fff;
  z-index: 3;
  width: 350px;
  height: auto;
  margin: 0 15px 0px 15px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  position: relative;
  padding: 0 0 20px 0;
}
@media only screen and (max-width: 550px) {
  .main_formation .section-skill .cartes-skill {
    box-shadow: none;
    border-radius: 15px;
    width: 340px;
    padding: 0 0 20px 0;
    border: 3px solid rgb(222, 171, 171);
    margin: 0;
  }
}
@media only screen and (max-width: 360px) {
  .main_formation .section-skill .cartes-skill {
    width: 300px;
  }
}
.main_formation .section-skill .cartes-skill::after {
  content: "";
  background-color: rgb(88, 92, 98);
  position: absolute;
  top: 6px;
  right: -10px;
  height: 100%;
  width: 10px;
  transform: skewy(50deg);
  z-index: -1;
}
@media only screen and (max-width: 550px) {
  .main_formation .section-skill .cartes-skill::after {
    display: none;
  }
}
.main_formation .section-skill .cartes-skill::before {
  content: "";
  background-color: rgb(68, 65, 65);
  position: absolute;
  bottom: -10px;
  left: 6px;
  height: 10px;
  width: 100%;
  transform: skewX(50deg);
}
@media only screen and (max-width: 550px) {
  .main_formation .section-skill .cartes-skill::before {
    display: none;
  }
}
.main_formation .section-skill .cartes-skill:hover {
  transform: translateY(-8px);
}
.main_formation .section-skill .cartes-skill h3 {
  margin: 0;
  text-align: center;
  padding: 20px 10px 10px 10px;
  font-size: 1.3rem;
  height: 40px;
}
@media only screen and (max-width: 550px) {
  .main_formation .section-skill .cartes-skill h3 {
    border-radius: 10px 10px 0 0;
    text-shadow: 1px 1px #19718c, 1px 2px rgb(30, 88, 134), 1px 3px #166982, 1px 4px #206da8;
    font-size: 1.2rem;
    border-bottom: 3px solid rgb(222, 171, 171);
  }
}
.main_formation .section-skill .cartes-skill:nth-child(2) h3 {
  background: linear-gradient(to left, rgb(21, 26, 38) 0%, rgb(71, 75, 70) 100%);
  position: relative;
  overflow: hidden;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
  margin-bottom: 20px;
}
@media only screen and (max-width: 550px) {
  .main_formation .section-skill .cartes-skill:nth-child(2) h3 {
    background: linear-gradient(to left, rgb(59, 174, 200) 0%, rgb(51, 153, 187) 100%);
  }
}
.main_formation .section-skill .cartes-skill:nth-child(2) h3::before {
  content: "";
  position: absolute;
  width: 200px;
  height: 20px;
  background: rgba(255, 255, 255, 0.4);
  transform: rotate(-45deg);
  left: -150px;
}
.main_formation .section-skill .cartes-skill:nth-child(2) h3:hover::before {
  transition: 0.8s transform linear;
  transform: translateX(500px) rotate(-45deg);
}
.main_formation .section-skill .cartes-skill p {
  font-size: 1.1rem;
  padding: 0 5px 0 10px;
  margin: 10px 0 10px 0;
}
.main_formation .section-skill .cartes-skill p i {
  color: rgb(45, 211, 31);
  font-size: 1rem;
  font-weight: bold;
  margin-right: 8px;
}
@media only screen and (max-width: 550px) {
  .main_formation .section-skill .cartes-skill p {
    padding: 0 5px 0 10px;
    margin: 5px 0 5px 0;
    font-size: 1rem;
  }
}
.main_formation .section-skill .cartes-skill p:nth-child(1) {
  padding-top: 20px;
}
@media screen and (max-width: 900px) {
  .main_formation .section-skill .section-skill h3 {
    font-size: 35px;
    margin: 80px 0 0 0;
  }
}
@media screen and (max-width: 550px) {
  .main_formation .section-skill .section-skill h3 {
    font-size: 30px;
    padding: 10px 0 10px 0;
    margin: 30px 0 0 0;
  }
  .main_formation .section-skill .section-skill hr {
    width: 200px;
    margin: 20px auto 20px;
  }
}
.main_formation .container-skill .lien {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.main_formation .container-skill .lien_span {
  display: block;
  text-align: center;
  width: 80px;
  height: 25px;
  border-left: 3px solid #fff;
  border-right: 3px solid #fff;
  z-index: 1;
}
@media only screen and (max-width: 550px) {
  .main_formation .container-skill .lien_span {
    border-color: transparent;
  }
}
.main_formation .diplome_span {
  display: block;
  text-align: center;
  width: 140px;
  height: 25px;
  border-left: 3px solid #fff;
  border-right: 3px solid #fff;
}
@media only screen and (max-width: 550px) {
  .main_formation .diplome_span {
    border-color: transparent;
  }
}
.main_formation .diplome_lien {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-top: 5px solid #5e5a4c;
}

.certification {
  margin: 30px auto;
  width: 80%;
  background-color: rgba(0, 0, 0, 0.6);
  padding-bottom: 30px;
}
@media only screen and (max-width: 550px) {
  .certification {
    width: 100%;
  }
}
.certification .h2_formation {
  border-top: 1px solid #fff;
  text-align: center;
  padding-top: 20px;
  display: block;
}
@media only screen and (max-width: 550px) {
  .certification .h2_formation {
    font-size: 1.6rem;
  }
}
.certification .boxCertification {
  column-count: 2;
  column-gap: 1em;
}
.certification .boxCertification p {
  font-size: 1.1rem;
  margin: 5px 0;
  padding-left: 30px;
  padding-right: 30px;
}
@media only screen and (max-width: 550px) {
  .certification .boxCertification p {
    font-size: 0.9rem;
    padding-left: 5px;
    padding-right: 5px;
  }
}
.certification .boxCertification p:nth-child(1) {
  margin-top: 0;
  display: block;
}
@media only screen and (max-width: 830px) {
  .certification .boxCertification {
    column-count: 1;
    padding-right: 15px;
    padding-left: 15px;
  }
}
.certification .boxInterets {
  column-count: 5;
  column-gap: 1em;
  display: flex;
  justify-content: space-between;
}
@media only screen and (max-width: 1000px) {
  .certification .boxInterets {
    column-count: 1;
    flex-direction: column;
    padding-right: 15px;
    padding-left: 15px;
  }
}
.certification .boxInterets .colonne {
  flex: 0 0 calc(20% - 20px);
  margin: 20px 10px;
  text-align: center;
}
@media only screen and (max-width: 550px) {
  .certification .boxInterets .colonne {
    font-size: 0.9rem;
    padding-left: 5px;
    padding-right: 5px;
    margin: 10px 10px;
  }
}
.certification .boxInterets .colonne i {
  font-size: 2.5rem;
}
@media only screen and (max-width: 550px) {
  .certification .boxInterets .colonne i {
    font-size: 2rem;
  }
}
.certification .boxInterets .colonne img {
  height: 60px;
}
@media only screen and (max-width: 550px) {
  .certification .boxInterets .colonne img {
    height: 40px;
  }
}
.certification .icon_formation {
  width: 35px;
  height: 35px;
  display: inline-block;
  margin-top: 4px;
  margin-bottom: 4px;
}
.certification .icon_formation img {
  width: 100%;
  height: 100%;
}
.certification .box-iconsFormation {
  display: flex;
  flex-wrap: wrap;
  margin: 10px 30px 10px 30px;
}
.certification .box-iconsFormation i {
  margin-top: 4px;
  margin-bottom: 4px;
}

.main_contact {
  text-align: center;
  align-items: center;
  justify-content: center;
  display: flex;
  height: 100vh;
  border-top: 2px solid rgb(214, 212, 212);
  color: #fff;
  background: rgb(50, 50, 50);
  background: rgba(0, 0, 0, 0.8);
}
@media only screen and (max-width: 830px) {
  .main_contact {
    background-color: inherit;
  }
}
@media only screen and (max-width: 550px) {
  .main_contact {
    border-top: none;
  }
}
.main_contact .h2_contact {
  font-size: 2.6rem;
}
@media only screen and (max-width: 830px) {
  .main_contact .h2_contact {
    font-size: 1.5rem;
  }
}
.main_contact #contact .wrap_contact {
  margin-top: 90px;
  padding: 20px 20px 20px 20px;
  width: 600px;
  border-radius: 15px;
  font-size: 1.4rem;
}
@media only screen and (max-width: 830px) {
  .main_contact #contact .wrap_contact {
    width: 450px;
    background: linear-gradient(to left, rgba(17, 17, 17, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%);
  }
}
@media only screen and (max-width: 550px) {
  .main_contact #contact .wrap_contact {
    margin-top: 100px;
    width: 340px;
    height: auto;
    border: none;
    box-shadow: none;
    background-color: inherit;
  }
}
@media only screen and (max-width: 550px) {
  .main_contact #contact .wrap_contact hr {
    display: none;
  }
}
@media only screen and (max-width: 830px) {
  .main_contact #contact .wrap_contact span {
    font-size: 1.2rem;
  }
}
.main_contact .mail_link_contact {
  position: relative;
  overflow: hidden;
  border-radius: 9999px;
  text-align: center;
  justify-content: center;
  display: block;
  text-decoration: none;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
  border: 3px solid rgb(242, 59, 80);
  color: #fff;
  letter-spacing: 1px;
  background: rgb(242, 59, 80);
  font-weight: 500;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
  font-size: 1.2rem;
  padding: 10px 25px 10px 25px;
  margin: 35px auto;
  width: 300px;
  display: flex;
  padding: 10px 15px;
}
.main_contact .mail_link_contact:hover {
  background: rgb(189, 19, 39);
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
  transform: translatey(1px);
  border-color: rgb(189, 19, 39);
  border-left: 1px solid rgb(189, 19, 39);
  border-right: 1px solid rgb(189, 19, 39);
}
.main_contact .mail_link_contact::before {
  content: "";
  position: absolute;
  width: 200px;
  height: 20px;
  background: rgba(255, 255, 255, 0.4);
  transform: rotate(-45deg);
  left: -150px;
}
.main_contact .mail_link_contact:hover::before {
  transition: 0.8s transform linear;
  transform: translateX(500px) rotate(-45deg);
}
@media only screen and (max-width: 830px) {
  .main_contact .mail_link_contact {
    margin: 15px auto 20px;
  }
}
.main_contact .mail_link_contact > svg {
  color: #fff;
}

/*# sourceMappingURL=styles.css.map */