/*################################ Polices ################################*/
@font-face {
  font-family: "Oi";
  src: url(/Polices/Oi/Oi-Regular.ttf);
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "LemonMilk";
  src: url(/Polices/LemonMilk/LEMONMILK-Regular.otf);
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Gliker";
  src: url(/Polices/Gliker/Gliker-RegularSemiExpanded.ttf);
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Lovelo";
  src: url(/Polices/Lovelo/Lovelo\ Black.otf);
  font-weight: lighter;
  font-style: normal;
}
@font-face {
  font-family: "Vandal";
  src: url(/Polices/Vandal/Vandal\ Blow\ Shadow.otf);
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Poppins";
  src: url(/Polices/Poppins/Poppins-Regular.ttf);
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Horizon";
  src: url(/Polices/Horizon/Horizon_Regular.otf);
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Garet";
  src: url(/Polices/Garet/Garet-Book.otf);
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Maswen";
  src: url(/Polices/maswen-2.ttf);
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Necosmic";
  src: url(/Polices/Necosmic/Necosmic-PersonalUse.otf);
  font-weight: normal;
  font-style: normal;
}
/*################################ Fin Polices ################################*/
/*################################ Global ################################*/
:root {
  --color-primary: #2b2c37;
  --color-secondary: #ededed;
  --color-accent: #93adb5;
}
html {
  overflow-x: hidden;
  max-width: 100%;
  scroll-behavior: smooth;
  overscroll-behavior-y: none;
  -ms-overflow-style: none; /*Masquer barre verticale sur Edge*/
  scrollbar-width: none; /*Masquer barre verticale sur Firefox*/
  touch-action: pan-y; /*Empeche le scroll horizontal sur tablette*/
}
html::-webkit-scrollbar {
  display: none; /*Masquer barre verticale sur Chrome*/
}

body {
  max-width: 100%;
  margin: 0 auto;
  font-family: "LemonMilk";
  background: var(--color-secondary);
  text-align: center;
  cursor: none;
  transition: 0.8s ease-in-out;
  transition: top 0.4s ease-out;
  overscroll-behavior-y: none;
}

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 25px;
  height: 25px;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.5;
  z-index: 999;
  transition: background-color 0.3s;
}
.cursor.cursorsurvol {
  background: var(--color-primary);
  border-color: var(--color-primary);
  transition: background-color 0.3s;
}
/*################################ Fin Global ################################*/
/*################################ Header ################################*/
header {
  margin: 0 auto;
  width: 100%;
}
nav {
  display: flex;
  justify-content: center;
  margin-top: 2%;
  margin-bottom: 3%;
}
ul {
  z-index: 99;
  list-style: none;
  display: flex;
  padding: 1vw;
  padding-right: 3vw;
  padding-left: 3vw;
  flex-wrap: wrap;
  justify-content: center;
  color: var(--color-accent);
  border-radius: 50px;
  transition: 0.5s;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
li {
  font-size: clamp(2px, 25px, 25px);
  width: clamp(10px, 60px, 60px);
  height: 60px;
  justify-content: center;
  align-items: center;
  display: flex;
  transition: 0.5s;
  color: var(--color-accent);
}
.li_nav {
  width: 0px;
  transition: width 0.6s ease, opacity 1s ease 0.1s;
  opacity: 0;
  color: var(--color-accent);
  align-items: center;
  justify-content: center;
}
a {
  text-decoration: none;
  cursor: none;
}
/*################################ Fin Header ################################*/
/*################################ Bloc Moi ################################*/
.nom_prenom {
  width: 100%;
  justify-content: center;
  align-items: center;
  position: relative;
  display: flex;
}

.phrases_back {
  position: absolute;
  width: 100%;
  overflow: hidden;
  z-index: 0;
  font-size: 50px;
  white-space: nowrap;
}

#phrases_back_1 {
  position: relative;
  width: 250%;
  color: var(--color-primary);
  font-family: "Oi";
  font-size: clamp(40px, 100px, 100px);
  vertical-align: bottom;
  line-height: 0.5;
  transition: 0.3s;
}
#phrases_back_2 {
  position: relative;
  width: 250%;
  color: var(--color-accent);
  font-family: "LemonMilk";
  font-size: clamp(40px, 100px, 100px);
  margin: 0;
  vertical-align: top;
  transition: 0.3s;
}

#img_moi {
  line-height: 0;
  max-width: 40%;
  z-index: 2;
  border-radius: 5px;
  transition: 0.8s;
  cursor: none;
  pointer-events: none;
}
/*################################ Fin Bloc Moi ################################*/
/*################################ Bloc Infos ################################*/
.tableau_infos {
  position: relative;
  margin: 0 auto;
  color: var(--color-primary);
  font-weight: normal;
  margin-top: 2%;
  margin-bottom: clamp(50px, 10vw, 100px);
}

.tr_infos th {
  font-weight: normal;
  text-align: center;
  width: 33%;
  transition: 0.3s;
  font-size: clamp(10px, 4vw, 20px);
}
.tr_infos th:hover {
  transform: scale(1.1);
}

.txt_infos {
  font-size: clamp(10px, 4vw, 20px);
  color: var(--color-accent);
  transition: 0.3s;
}

.txt_mycv {
  position: absolute;
  bottom: -10%;
  font-size: clamp(10px, 4vw, 20px);
  transform: rotate(-25deg);
  font-family: "Poppins";
  line-height: 1;
  transition: 1.2s ease-in-out;
}
.txt_mycv i {
  transform: rotate(-45deg);
}
/*################################ Fin Bloc Infos ################################*/
/*################################ PROEXP ################################*/
.global_proexp_defile_section {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 50vh;
  margin-bottom: 20px;
  z-index: 50;
  justify-content: center;
  margin-top: clamp(50px, 10vw, 100px);
}

.defile_content {
  display: flex;
  width: fit-content;
  height: 50vh;
  max-height: 500px;
  width: 100%;
  transition: 0.3s;
}

.section_defile {
  width: 70vw;
  height: 50vh;
  max-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 15vw;
}

.section_defile div {
  height: 100%;
  width: 70vw;
}

.div_proexp_present1 {
  position: relative;
}

.h2_proexp {
  font-weight: normal;
  gap: clamp(1rem, 3vw, 3rem);
  color: var(--color-primary);
  font-size: clamp(10px, 4vw, 20px);
  margin-top: 2vw;
}

.logo_proexp {
  width: clamp(100px, 10vw, 200px);
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%);
}

.p_proexp {
  font-family: "Poppins";
  font-size: clamp(10px, 4vw, 20px);
  color: var(--color-primary);
  text-align: center;
  padding: 5%;
}

.fa-arrow-left-long {
  position: absolute;
  bottom: 0%;
  left: 5%;
  font-size: 30px;
  display: none !important;
}

.fa-arrow-right-long {
  position: absolute;
  bottom: 0%;
  right: 5%;
  font-size: 30px;
  display: none !important;
}

@media (max-width: 768px) {
  .section_defile {
    width: 80vw;
    margin-left: 10vw;
  }

  .section_defile div {
    height: 100%;
    width: 80vw;
  }
}
/*################################ FINPROEXP ################################*/
/*################################ Bloc Pro Exp ################################*/
.bloc_present {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15%;
}
#bloc_present_proexp {
  gap: 5%;
}

.p_click {
  font-family: "Poppins";
  font-size: clamp(10px, 4vw, 20px);
  color: var(--color-primary);
  transition: 1.2s ease-in-out;
}
#p_click_haut {
  margin-top: clamp(20px, 10vh, 100px);
  margin-bottom: clamp(50px, 20vh, 200px);
}
#p_click_bas {
  margin: clamp(50px, 10vw, 100px);
}

.div_present_proexp {
  width: clamp(80px, 10vw, 200px);
  height: clamp(80px, 10vw, 200px);
  background-size: cover;
  background-position: center;
  transition: 0.5s ease-in-out;
}
.div_present_proexp:hover {
  transform: scale(1.1);
}

#proexp1 {
  background-image: url(/Images/logo_j23.png);
}
#proexp2 {
  background-image: url(/Images/logo_estiam.png);
}
#proexp3 {
  background-image: url(/Images/logo_eurocom.png);
}
#proexp4 {
  background-image: url(/Images/logo_mcdo.png);
}

/*################################ Fin Bloc Pro Exp ################################*/
/*################################ Citation ################################*/
.citation {
  display: flex;
  gap: clamp(1rem, 3vw, 3rem);
  margin: 0 auto;
  width: 80%;
  color: var(--color-primary);
  font-size: clamp(25px, 4vw, 40px);
  margin-top: clamp(50px, 10vw, 100px);
}

.citation p {
  margin: 0 auto;
}

#mot_change_couleur {
  color: var(--color-primary);
  transition: 0.5s;
}
#mot_change_couleur:hover {
  color: var(--color-accent);
  transition: 0.5s;
}
/*################################ Fin Citation ################################*/
/*################################ Bloc Projects ################################*/
.div_present_project {
  width: clamp(120px, 15vw, 240px);
  height: clamp(78px, 15vw, 135px);
  border: clamp(5px, 1vw, 10px) solid rgb(200, 200, 200);
  border-bottom: clamp(5px, 5vw, 20px) solid rgb(200, 200, 200);
  background-size: cover;
  transition: 0.6s ease-in-out;
  margin-bottom: clamp(50px, 10vw, 100px);
}
#project1_1 {
  background-image: url(/Images/img_storm/fullimg_storm1.png);
  transform: rotate(-5deg);
}
#project1_2 {
  background-image: url(/Images/img_storm/fullimg_storm2.png);
  transform: rotate(7deg);
  opacity: 0;
}
#project1_3 {
  background-image: url(/Images/img_storm/fullimg_storm3.png);
  transform: rotate(-10deg);
  opacity: 0;
}

#project2_1 {
  background-image: url(/Images/img_dante/fullimg_dante1.png);
  transform: rotate(5deg);
}
#project2_2 {
  background-image: url(/Images/img_dante/fullimg_dante3.png);
  transform: rotate(-15deg);
  opacity: 1;
}
#project2_3 {
  background-image: url(/Images/img_dante/fullimg_dante5.png);
  transform: rotate(10deg);
  opacity: 1;
}
/*################################ Fin Bloc Projects ################################*/
/*################################ Bloc Skills ################################*/
.skills {
  margin-top: clamp(10px, 4vw, 20px);
  margin-bottom: clamp(20px, 10vw, 40px);
}
.skills hr {
  color: var(--color-primary);
  width: 30%;
  height: 2px;
}

.div_skills h4 {
  font-family: "Horizon";
  font-size: clamp(25px, 4vw, 40px);
  font-weight: normal;
  margin: 0;
  transition: 0.3s ease-in 0.3s ease-out;
}

.div_skills p {
  font-family: "Poppins";
  font-size: clamp(10px, 4vw, 20px);
  font-weight: normal;
  margin-left: clamp(10vw, 4vw, 35vw);
  margin-right: clamp(10vw, 4vw, 35vw);
}

.div_skills h5 {
  font-family: "Poppins";
  font-size: 20px;
  font-weight: 550;
  font-style: italic;
}
/*################################ Fin Bloc Skills ################################*/
/*################################ Formulaire ################################*/
.formulaire {
  margin: 0 auto;
  width: 80%;
  font-family: "Poppins";
  font-size: clamp(10px, 4vw, 20px);
  font-weight: normal;
  margin-top: clamp(50px, 10vw, 100px);
  margin-bottom: clamp(50px, 10vw, 100px);
}

.div_formulaire {
  text-align: center;
  margin: clamp(5px, 4vw, 15px);
}

input,
textarea {
  cursor: none;
  font-family: "Poppins";
  font-size: clamp(5px, 4vw, 15px);
  font-weight: normal;
  background-color: var(--color-secondary);
  border: 1px solid var(--color-primary);
  border-radius: 15px;
  padding: clamp(5px, 4vw, 15px);
  width: clamp(100px, 50vw, 500px);
  text-align: center;
}

.btn_formulaire_false {
  cursor: none;
  font-family: "Poppins";
  font-size: clamp(10px, 4vw, 20px);
  font-weight: normal;
  color: #666;
  background-color: var(--color-secondary);
  border: 2px solid #666;
  border-radius: 15px;
  padding: clamp(5px, 4vw, 15px);
  width: clamp(100px, 50vw, 500px);
  transition: 0.5s;
  opacity: 0.3;
}
.btn_formulaire_true {
  cursor: none;
  font-family: "Poppins";
  font-size: clamp(10px, 4vw, 20px);
  font-weight: normal;
  color: var(--color-accent);
  background-color: var(--color-secondary);
  border: 2px solid var(--color-accent);
  border-radius: 15px;
  padding: clamp(5px, 4vw, 15px);
  width: clamp(100px, 50vw, 500px);
  transition: 0.5s;
  opacity: 1;
}
.btn_formulaire_true:hover {
  border: 2px solid var(--color-accent);
  color: var(--color-secondary);
  background-color: var(--color-accent);
}

.mess_remerciement {
  display: none;
}

*,
*::before,
*::after {
  box-sizing: border-box;
} /*Eneleve l'epaisseur supplementaire des inputs*/
/*################################ Fin formulaire ################################*/
/*################################ Footer ################################*/
footer {
  margin: clamp(10px, 4vw, 20px);
}

footer table {
  margin: 0 auto;
  font-weight: normal;
  font-family: "Poppins";
  border-spacing: 50px 20px;
}

footer p {
  color: var(--color-primary);
  font-weight: normal;
  font-family: "Poppins";
  font-size: clamp(10px, 4vw, 20px);
}

footer a i {
  font-size: clamp(25px, 10vw, 40px);
  color: var(--color-primary);
  transition: 0.3s ease-in-out;
}

footer a i:hover {
  color: var(--color-accent);
}

.div_ES_1_h2_transpa {
  transition: 0.8s;
}

.div_ES_1_h2_solid {
  transition: 0.8s;
}
/*################################ Fin Footer ################################*/
/*################################ Responsive ################################*/
@media (max-width: 768px) {
  body {
    margin: 0 auto;
    overflow-x: hidden;
  }
  .cursor {
    display: none;
  }

  nav {
    margin-top: 10%;
    margin-bottom: 10%;
  }
  li {
    font-size: 16px;
    width: 40px;
  }

  #img_moi {
    max-width: 60%;
  }

  #phrases_back_1 {
    font-size: 60px;
  }
  #phrases_back_2 {
    font-size: 60px;
  }

  .nom_prenom {
    margin-bottom: 10%;
  }

  .tableau_infos {
    margin-top: 10%;
    border-spacing: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .tr_infos {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 1.5rem;
  }

  .tr_infos th {
    display: block;
    width: 100%;
    text-align: center;
  }

  .tr_infos th:nth-child(1) {
    order: 2;
  }
  .tr_infos th:nth-child(2) {
    order: 1;
  }
  .tr_infos th:nth-child(3) {
    order: 2;
  }

  .txt_mycv {
    display: none;
  }

  #p_click_haut {
    display: none;
  }

  .global_proexp_defile_section {
    margin-bottom: clamp(50px, 10vw, 100px);
  }
}

@media (pointer: coarse) {
  .fa-arrow-right-long,
  .fa-arrow-left-long {
    display: flex !important;
  }
}
/*################################ Fin Responsive ################################*/