@import url('https://fonts.cdnfonts.com/css/clash-display');

:root{
    font-size: 18px;
}

::selection{
  background-color: #d6e2e0;
}

/* custom barre de scroll */
::-webkit-scrollbar {
  width: 15px;
}
::-webkit-scrollbar-track {
  border: solid 1px #303538;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb {
  border: solid 1px #303538;
  border-radius: 8px;
  background-color: #d6e2e0;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Clash Display", sans-serif;
    text-decoration: none;
    list-style: none;
    font-weight: 400;
    color: #303538;
}

html,body{
  height: 100%;
  background-color: #F3F7F6;
}

body{
  /* background: #bec2c2; */
  display: flex;
  flex-direction: column;
}

/* loading_screen */
.loading_screen {
  position: fixed;
  z-index: 50;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background: #d6e2e0; /* Ajustez si nécessaire */
  transition: top 0.4s ease-out; /* Transition uniquement pour la position */
}

/* Style pour le titre de chargement */
.loading_title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem;
  line-height: 60px;
  color: #333; /* Couleur du texte pour une bonne visibilité */
}

/* Style pour chaque partie du titre */
.loading_title_span {
  position: relative;
  display: inline-block;
  bottom: -20px;
  opacity: 0;
  font-weight: 500;
  transition: opacity 0.4s ease-in-out, bottom 0.4s ease-in-out; /* Transitions pour les propriétés modifiées */
}

.loading_title_span.active {
  bottom: 0;
  opacity: 1;
}

.loading_title_span.fade {
  bottom: 150px;
  opacity: 0;
}


/* scroll animations */
.hidden{
  opacity: 0;
  transform: translateY(10%);
  transition: all 0.4s;
}
.show{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion){
  .hidden{
    transition: none;
  }
}
/* scroll animations - page accueil */
.content-block:nth-child(1){
  transition-delay: 200ms;
}
.content-block:nth-child(2){
  transition-delay: 200ms;
}
.content-block:nth-child(3){
  transition-delay: 400ms;
}
.content-block:nth-child(4){
  transition-delay: 600ms;
}
.content-block:nth-child(5){
  transition-delay: 800ms;
}
.content-block_cv{
  transition-delay: 1000ms;
}
.content-block_typewriter {
  transition-delay: 600ms;
}
/* scroll animations - page projets */
.projects_item:nth-child(1){
  transition-delay: 200ms;
}
.projects_item:nth-child(2){
  transition-delay: 400ms;
}
.projects_item:nth-child(3){
  transition-delay: 600ms;
}
.projects_item:nth-child(4){
  transition-delay: 800ms;
}
/* scroll animations - liens réseaux sociaux */
.social_link:nth-child(1){
  transition-delay: 200ms;
}
.social_link:nth-child(2){
  transition-delay: 200ms;
}
.social_link:nth-child(3){
  transition-delay: 200ms;
}
/* scroll animations - page contact */
.contact-content-block_text:nth-child(1){
  transition-delay: 200ms;
}
.block_list:nth-child(1){
  transition-delay: 400ms;
}
.block_list:nth-child(2){
  transition-delay: 600ms;
}

/* header */
header{
  position: relative;
  z-index: 10;
  padding: 15px;
  width: 100%;
}
.header_container{
  display: flex;
  align-items: center;
  border: solid 1px #303538;
  border-radius: 8px;
  overflow: hidden;
  /* box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);  */
}
.header_container .menu_list{
  display: none;
}
.menu_date{
  float: left;
  width: 80%;
  border-radius: 8px 0 0 8px;
  padding: 15px;
}
.menu_date span{
  font-weight: 300;
}
.menu_icon{
  width: 20%;
  border-left: solid 1px #303538;
  padding: 15px;
}

/* menu-btn_burger */
.menu_icon_btn{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 23px;
  height: 23px;
  cursor: pointer;
  margin: auto;
}
.btn_burger{
  width: 23px;
  height: 0.5px;
  background: #303538;
  border-radius: 8px;
  transition: all 0.4s ease-in-out;
}
.btn_burger::before,
.btn_burger::after{
  content: "";
  position: absolute;
  width: 23px;
  height: 0.5px;
  background: #303538;
  border-radius: 8px;
  transition: all 0.2s ease-in-out;
}
.btn_burger::before{
  transform: translateY(-8px);
}
.btn_burger::after{
  transform: translateY(8px);
}

/* animation btn_burger */
.menu_icon_btn.open .btn_burger{
  transform: translateX(-14px);
  background: transparent;
}
.menu_icon_btn.open .btn_burger::before{
  transform: rotate(45deg) translate(10px, -10px);
}
.menu_icon_btn.open .btn_burger::after{
  transform: rotate(-45deg) translate(10px, 10px);
}
.menu_body{
  position: fixed;
  height: 100vh;
  z-index: 5;
  padding: 150px 15px 0px;
  width: 100%;
  background-color: #F3F7F6;
  transform: translate(100%, 0%);
  transition: 0.4s;
}
.menu_body.active{
  transform: translate(0%, 0%);
  transition: 0.4s;
}
.menu_list{
  border-top: solid 1px #303538;
  border-right: solid 1px #303538;
  border-left: solid 1px #303538;
  border-radius: 8px;
  overflow: hidden;
}
.menu_item{
  border-bottom: solid 1px #303538;
}
.menu_link{
  display: block;
  padding: 15px;
  color: #303538;
  font-size: 1.4rem;
  transition: 0.4s;
}
.menu_link:hover{
  background: #d6e2e0;
  transition: 0.4s;
}
.menu_link_inactive{
  display: block;
  padding: 15px;
  color: #303538;
  font-size: 1.4rem;
  transition: 0.4s;
}
.menu_link_inactive:hover{
  background: #d6e2e0;
  transition: 0.4s;
}
.menu_link.active{
  background: #d6e2e0;
}
.socials{
  padding: 15px;
  border-bottom: solid 1px #303538;
  border-radius: 8px ;
}
.socials span{
  font-size: 1.1rem;
  color: #303538;
  font-weight: 500;
}
.socials span:hover{
  text-decoration: underline;
}

/* typewriter */
@keyframes typing {
  0%, 18% { content: ""; }
  1%, 17% { content: "c"; }
  2%, 16% { content: "cr"; }
  3%, 15% { content: "cré"; }
  4%, 14% { content: "créa"; }
  5%, 13% { content: "créat"; }
  6%, 12% { content: "créati"; }
  7%, 11% { content: "créatif"; }

  22%, 42% { content: ""; }
  23%, 41% { content: "o"; }
  24%, 40% { content: "or"; }
  25%, 39% { content: "org"; }
  26%, 38% { content: "orga"; }
  27%, 37% { content: "organ"; }
  28%, 36% { content: "organi"; }
  29%, 35% { content: "organis"; }
  30%, 34% { content: "organisé"; }

  46%, 66% { content: ""; }
  47%, 65% { content: "a"; }
  48%, 64% { content: "au"; }
  49%, 63% { content: "aut"; }
  50%, 62% { content: "auto"; }
  51%, 61% { content: "auton"; }
  52%, 60% { content: "autono"; }
  53%, 59% { content: "autonom"; }
  54%, 58% { content: "autonome"; }

  70%, 94% { content: ""; }
  71%, 93% { content: "à"; }
  72%, 92% { content: "à "; }
  73%, 91% { content: "à l"; }
  74%, 90% { content: "à l'"; }
  75%, 89% { content: "à l'é"; }
  76%, 88% { content: "à l'éc"; }
  77%, 87% { content: "à l'éco"; }
  78%, 86% { content: "à l'écou"; }
  79%, 85% { content: "à l'écout"; }
  80%, 84% { content: "à l'écoute"; }

  }

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.typewriter {
  --caret: currentcolor;
}
.typewriter::before {
  content: "";
  animation: typing 13.5s infinite;
}
.typewriter::after {
  content: "";
  border-right: 1px solid var(--caret);
  animation: blink 0.5s linear infinite;
}
.typewriter.thick::after {
  border-right: 1ch solid var(--caret);
}
.typewriter.nocaret::after {
  border-right: 0;
}
@media (prefers-reduced-motion) {
  .typewriter::after {
    animation: none;
  }

  @keyframes sequencePopup {
    0%, 100% { content: "créatif"; }
    25% { content: "organisé"; }
    50% { content: "autonome"; }
    75% { content: "à l'écoute"; }
  }

  .typewriter::before {
    content: "créatif";
    animation: sequencePopup 12s linear infinite;
  }
}

/* page_accueil */
.page_home{
  position: relative;
  display: block;
  padding: 0 15px 15px;
  flex-grow: 1;
  margin-bottom: 30px;
}

.main-title h1{
  font-size: 2.5rem;
  letter-spacing: 2px;
  line-height: 50px;
  padding: 30px 15px 45px;
  text-align: center;
  font-weight: 500;
  color: #303538;
}

.main-title .content-block_empty img{
  display: none;
}

.content-block_img img{
  width: 100%;
  border-radius: 8px;
  margin-bottom: 30px;
}

.page_home .main-block_content{
  gap: 0;
  border: 0;
  padding: 0;
}

.content-block_description{
  border: solid 1px #303538;
  padding: 15px 15px 30px 15px;
  border-radius: 8px 8px 0px 0px;
}

.content-block_typewriter{
  border: solid 1px #303538;
  padding: 15px 15px 30px 15px;
  border-top: 0;
}

.content-block_about{
  border: solid 1px #303538;
  padding: 15px;
  border-top: 0;
}

.content-block_location{
  border: solid 1px #303538;
  padding: 15px;
  border-top: 0;
}

.content-block_cv{
  border: solid 1px #303538;
  padding: 15px;
  border-top: 0;
}

.content-block_cv span{
  color: #303538;
  font-weight: 500;
}

.content-block_cv span:hover{
  text-decoration: underline;
}

/* page_projects */

.page_projects .main-block_content{
  gap: 0;
  border: 0;
  padding: 0;
}

.main-block_header .content-block_empty img{
  display: block;
  width: 50px;
}

.block-miniature{
  display: none;
}

.projects_list{
  border-top: solid 1px #303538;
  border-right: solid 1px #303538;
  border-left: solid 1px #303538;
  border-radius: 8px 8px 0px 0px;
  overflow: hidden;
}

.projects_item{
  border-bottom: solid 1px #303538;
}

.projects_link{
  display: block;
  padding: 15px;
  color: #303538;
  font-size: 1.4rem;
  transition: all 0.4s ease-in-out;
}

.projects_link:hover{
  background: #d6e2e0;
  transition: all 0.4s ease-in-out;
}

/* page_dev_web */
.page_code .main-block_content{
  border: 0;
  border-radius: 0;
  gap: 0;
  padding: 0;
}

.page_code .page_container{
  padding-bottom: 0;
}

.content-block_image_miniature{
  padding: 0 0 30px 0;
  display: block;
}

.content-block_image img{
  width: 100%;
  display: flex;
  align-items: center;
  border-radius: 8px;
}

.content-block_group_image p{
  padding-bottom: 15px;
}

#block_img_top{
  margin-bottom: 15px;
}

.content-block_image_miniature img{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  border-radius: 8px;
}

.main-block_header .content-block_empty .img_memoji_project{
  display: none;
}

.btn_back{
  display: block;
  font-weight: 500;
  line-height: 50px;
  font-size: 2rem;
}

.title-projects {
  border-top: solid 1px #303538;
  border-left: solid 1px #303538;
  border-right: solid 1px #303538;
  border-bottom: solid 1px #303538;
  border-radius: 8px;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: 0.4s;
}

.title-projects h4{
  text-align: right;
  font-weight: 500;
  font-size: 1.5rem;
}

.title-projects-tbd{
  border-top: solid 1px #303538;
  border-left: solid 1px #303538;
  border-right: solid 1px #303538;
  border-bottom: solid 1px #303538;
  border-radius: 8px;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-projects-tbd h4{
  text-align: right;
  font-weight: 500;
  font-size: 1.5rem;
  opacity: 0.5;
}

.title-projects-tbd .icon-show_project{
  cursor: default;
}

/* icon-show_project */
.icon-show_project{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 23px;
  height: 23px;
  cursor: pointer;
}

.btn_show{
  width: 23px;
  height: 1px;
  background: #303538;
  border-radius: 8px;
  transition: all 0.4s ease-in-out;
}

.btn_show::before{
  content: "";
  position: absolute;
  width: 23px;
  height: 1px;
  background: #303538;  
  border-radius: 8px;
  transition: all 0.4s ease-in-out;
  rotate: 90deg;
}

.btn_close{
  width: 23px;
  height: 1px;
  background: #303538;
  opacity: 0.5;
}

.btn_close::before{
  content: "";
  position: absolute;
  width: 23px;
  height: 1px;
  background: #303538;  
  rotate: 90deg;
}

.title-projects:hover{
  background: #d6e2e0;
  transition: 0.4s;
}
.title-projects.active{
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

/* animation btn_show */
.title-projects.active .btn_show{
  transform: rotate(180deg);
  transition: all 0.4s ease-in-out;
}

.title-projects.active .btn_show::before{
  rotate: 90deg;
  opacity: 0;
}

.show_content-block_pojects{
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s ease-in-out;
}

.body-projects{
  border-top: solid 1px #303538;
  border-left: solid 1px #303538;
  border-right: solid 1px #303538;
  padding: 15px 15px 30px 15px;
}

.body-projects h5{
  margin-bottom: 15px;
  font-size: 1rem;
  font-weight: 500;
}

.body-projects_last h5{
  margin-bottom: 15px;
  font-size: 1rem;
  font-weight: 500;
}

.page_code .content-block_info{
  display: none;
}

.body-projects_last span{
  font-weight: 500;
}

.body-projects_last span:hover{
  text-decoration: underline;
}

.body-projects_last_final h5{
  margin-bottom: 15px;
  font-size: 1rem;
  font-weight: 500;
}

.body-projects_last_final span{
  font-weight: 500;
}

.body-projects_last_final span:hover{
  text-decoration: underline;
}

.content-block_pojects{
  margin-bottom: 15px;
}

#content-block_pojects_last{
  margin-bottom: 15px;
}

/* page_graphisme */
.page_illustration .page_container{
  padding-bottom: 0;
}

.page_illustation__body-projects{
  display: flex;
  flex-direction: column;
  border: solid 1px #303538;
  padding: 15px 15px 0 15px;
  border-radius: 0 0 8px 8px;
}

.page_illustration .main-block_content{
  border: 0;
  border-radius: 0;
  gap: 0;
  padding: 0;
}

.page_illustration .content-block_image{
  padding: 0;
}

.content-block_image, .content-block_image_last img{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  border-radius: 8px;
}

.body-projects .content-block_image{
  padding: 0;
  display: block;
}

.body-projects .content-block_image_last{
  padding: 0;
}

.content-block_caption{
  text-align: center;
  font-size: 0.8rem;
  opacity: 75%;
  font-style: italic;
  margin-top: 15px;
  margin-bottom: 8px;
}

.body-projects_last{
  border: solid 1px #303538;
  border-radius: 0 0 8px 8px;
  padding: 15px;
  column-count: 1;
  column-gap: 15px;
}

.body-projects_last #bofy-projects_1{
  margin-bottom: 30px;
}

.body-projects_last .content-block_image{
  padding: 0;
}

.body-projects_last_final{
  border: solid 1px #303538;
  border-radius: 0 0 8px 8px;
  padding: 15px 15px 30px 15px;
}

.body-projects_last_final .content-block_image{
  padding: 0 0 15px 0;
}

.page_illustration .content-block_info{
  display: none;
}

.content__group-block{
  height: auto;
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

/* page_musique */
.page_music .main-block_content{
  border: 0;
  border-radius: 0;
  gap: 0;
  padding: 0;
  border-top: solid 1px #303538;
}

.content-block_image{
  padding: 45px 0;
}

.content-block_image img{
  width: 100%;
  display: flex;
  align-items: center;
  border-radius: 8px;
}

.topic_content span{
  font-weight: 500;
}

.topic_content span:hover{
  text-decoration: underline;
}

.body-audio{
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.video{
  width: 100%;
  display: flex;
}

.video-credits{
  display: flex;
  flex-direction: column;
  margin-top: 15px;
}

.credits-names{
  margin-top: 7.5px;
}

/* page_contact */

.page_contact{
  position: relative;
}

.page_container{
  padding: 0 15px 15px;
}

.main-block_header{
  padding: 15px 15px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main-block_header h1{
  font-weight: 500;
  line-height: 50px;
  font-size: 2rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding-left: 15px;
}

.main-block_header a{
  font-weight: 500;
  color: #303538;
}

.main-block_content{
  border: solid 1px #303538;
  border-radius: 8px 8px 0 0;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 6rem;
}

.contact-content-block_list{
  display: flex;
  flex-direction: column;
}

.contact-content-block_list a{
  cursor:default;
}

.contact-content-block_list span{
  color: #303538;
  cursor: pointer;
  font-weight: 500;
}

.contact-content-block_list span:hover{
  text-decoration: underline;
}

.content-block_info{
  border-left: solid 1px #303538;
  border-right: solid 1px #303538;
  border-bottom: solid 1px #303538;
  border-radius: 0 0 8px 8px;
  padding: 15px;
}

.content-block_info span{
  color: #303538;
  font-weight: 500;
}

.content-block_info span:hover{
  text-decoration: underline;
}

/* footer */
.footer_container{
  padding: 0px 15px 15px;
  text-align: right;
}

.footer_container .content-block_empty{
  content: "";
}

.footer_container h1 span{
  font-weight: 500;
  font-size: clamp(4rem ,2.4047277937rem + 6.4947468959vw ,8.25rem);
}

.link-item{
  font-weight: 500;
}

.link-item:hover{
  text-decoration: underline;
}

.clickable-image{
  cursor: pointer;
}

/* Style for the modal */
.modal{
  display: none; 
  position: fixed; 
  z-index: 10000; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgba(0,0,0,0.8);
}

/* Modal Content (image) */
.modal-content{
  margin: auto;
  display: block;
  width: 80%;
  max-width: 600px;
  border-radius: 8px;
}

/* Add Animation - Zoom in the Modal */
.modal-content{
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom{
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/* The Close Button */
.close{
  position: absolute;
  top: 45px;
  right: 45px;
  width: 23px;
  height: 23px;
  cursor: pointer;
}

.close::before{
  content: "";
  position: absolute;
  width: 23px;
  height: 1px;
  background: #fff;
  border-radius: 8px;
  rotate: 45deg;
}
.close::after{
  content: "";
  position: absolute;
  width: 23px;
  height: 1px;
  background: #fff;
  border-radius: 8px;
  rotate: -45deg;
}

.close:hover,
.close:focus{
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* Responsive Styles */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 80%;
  }
}

.no-scroll{
  overflow-x: hidden; /* Hide scrollbars */
  position: fixed; /* Fix the body in place */
  width: 100%; /* Ensure it takes up full width */
}