section {
  position: relative;
}

/****************************************************************/
/****************************************************************/
/****************************************************************/
/****************************************************************/
/************************ DEBUT FRONT PAGE **********************/
/****************************************************************/
/****************************************************************/
/****************************************************************/
/****************************************************************/

.hero_accueil {
  width: 100%;
  background-color: var(--color-blue);
  overflow: hidden;
}

.container_hero_accueil {
  width: 100%;
  max-width: 1920px;
  height: calc(100vh + 80px);
  padding-bottom: 80px;
  position: relative;
  margin: 0 auto
}

@media(min-height: 1100px) {}

.container_hero_accueil .container_title {
  padding-top: 250px;
  width: 100%;
  height: 100%;
  display: flex;
  padding-bottom: 20px;
  flex-direction: column;
  justify-content: end;
  align-items: start;
}

@media(min-height: 1100px) {
  .container_hero_accueil .container_title {
    justify-content: center;
    align-items: start;
  }
}

.hero_accueil h1 {
  font-family: 'Times New Roman', Times, serif;
  text-transform: uppercase;
  font-size: 2.25rem;
  color: white;
  font-weight: 200;
  letter-spacing: 4px;
  margin-left: 10px;
}

.hero_accueil h2,
.hero_accueil h2 span {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(2.5rem, 8.2vw, 11.3rem);
  ;
  color: white;
  z-index: 1;
}

.hero_accueil .container_title h2.dev,
.hero_accueil .container_title h2.creation {
  transition: transform 0.1s ease-out;
  /* Optionnel mais très recommandé pour la performance :
       Informe le navigateur d'utiliser l'accélération matérielle */
  will-change: transform;
}

.hero_accueil .container_title h2.dev span.word:last-child span,
.hero_accueil .container_title h2.creation span.word:nth-child(2) span {
  font-family: 'Times New Roman', Times, serif;
}

.hero_accueil .container_title h2.creation span.word:nth-child(2) span {
  font-style: italic;
}

.btn_scroll_hero {
  position: fixed;
  bottom: 30px;
  right: 30px;
}

.btn_scroll_hero_container {
  position: relative;
  height: 150px;
  width: 25px;
}

.btn_scroll_hero span:nth-of-type(1) {
  position: absolute;
  bottom: 0;
  display: block;
  width: 4px;
  height: 100%;
  background-color: white;
  border-radius: 999px;
  left: 11px;
  -webkit-animation: arrowAnim 2s cubic-bezier(1, 0, 0, 1) infinite;
  animation: arrowAnim 2s cubic-bezier(1, 0, 0, 1) infinite;
}

.btn_scroll_hero span:nth-of-type(2) {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 4px;
  height: 35px;
  background-color: white;
  border-radius: 999px;
  transform: translate(-1px, 5px) rotate(-45deg);
}

.btn_scroll_hero span:nth-of-type(3) {
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  width: 4px;
  height: 35px;
  background-color: white;
  border-radius: 999px;
  transform: translate(1px, 5px) rotate(45deg);
}



@keyframes arrowAnim {
  0% {
    transform-origin: 0 0;
    transform: scale3d(1, 0, 1);
  }

  50% {
    transform-origin: 0 0;
    transform: scale3d(1, 1, 1);
  }

  50.1% {
    transform-origin: 0 100%;
    transform: scale3d(1, 1, 1);
  }

  100% {
    transform-origin: 0 100%;
    transform: scale3d(1, 0, 1);
  }

}

@media screen and (max-width: 767px) {

  .hero_accueil h1 {
    margin-left: 0;
    font-size: 1.5rem;
  }

  .btn_scroll_hero {
    transform: scale(0.6);
    bottom: 0;
    right: 15px;
  }
}

/**********************************************************/
/**********************************************************/
/******************** Section Présentation ********************/
/**********************************************************/
/**********************************************************/

.presentation {
  width: 100%;
  background-color: white;
  position: relative;
  padding: 75px 25px 0 25px;
  color: black;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.container_presentation {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.presentation .myNameIs,
.presentation .myNameIs span {
  font-family: 'Times New Roman', Times, serif;
  font-size: 2rem;
  color: black;
  margin-left: 10px;
  letter-spacing: 4px;
  margin-top: -25px;
}

.presentation .myNameIs span {
  color: var(--color-blue)
}

.presentation h2 {
  font-size: clamp(2.5rem, 14.2vw, 13.9rem);
}

.presentation .container {
  display: flex;
  justify-content: space-between;
  gap: 70px;
}

.presentation .container .portrait {
  width: 100%;
  max-width: 500px;
  max-height: 80vh;
  height: auto;
  object-fit: contain;
}

.presentation .container .info_presentation {
  display: flex;
  flex-direction: column;
  gap: 100px;
  padding-bottom: 50px;
  max-width: 1030px;
}

.presentation .container .info_presentation * {
  color: black;
}

.presentation .container .info_presentation p {
  font-size: clamp(1rem, 2vw, 1.125rem);
  text-align: end;
  margin-top: 15px;
  font-weight: 200;
}

.presentation .container .info_presentation_link {
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: 10px;
}

@media screen and (max-width: 1024px) {

  .presentation .myNameIs,
  .presentation .myNameIs span {
    margin-left: 5px;
  }

  .presentation .container {
    gap: 25px;
  }

  .presentation .container .portrait {
    width: 50%;
    height: auto;
    object-fit: contain;
  }

  .presentation h2 {
    font-size: clamp(2.5rem, 13.8vw, 9.2rem);
  }

}

@media screen and (max-width: 767px) {
  .presentation .container {
    flex-direction: column;
    gap: 25px;
  }

  .presentation .container .info_presentation p {
    text-align: start;
  }

  .presentation .myNameIs,
  .presentation .myNameIs span {
    font-size: 1.25rem;
    letter-spacing: 1px;
    margin-left: 2px;
    margin-top: 0;
  }

  .presentation .container .portrait {
    width: 100%;
  }

  .presentation h2 {
    font-size: clamp(2.5rem, 14vw, 9.2rem);
  }
}



/*************************************************************/
/*************************************************************/
/******************** Section compétences ********************/
/*************************************************************/
/*************************************************************/

.competences {
  min-height: 100vh;
  width: 100%;
  background-color: black;
  position: relative;
  padding: 120px 25px 100px 25px;
  color: white;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.competences.crea {
  background-color: white;
}

.competences.crea * {
  color: black;
}

.container_competences {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.container_competences .header_competences {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
}

.container_competences .header_competences h2 {
  font-size: clamp(2rem, 7vw, 6rem);
  margin-top: -35px;
  display: flex;
  flex-direction: column;
}

.container_competences .header_competences h2 .after_br {
  font-size: clamp(2rem, 12.5vw, 11rem);
}

.container_competences .header_competences h2 .after_br span {
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  color: var(--color-blue);
}

.container_competences.crea .header_competences h2 {
  margin-top: -50px;
}

.container_competences.crea .header_competences h2,
.container_competences.crea .header_competences h2 .after_br {
  font-size: clamp(2rem, 12.5vw, 11rem);
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  color: var(--color-blue);
}

.container_competences .header_competences h2 .after_br {
  margin-top: -30px;
}

.container_competences.crea .header_competences h2 .after_br {
  margin-top: -50px;
}

.container_competences.crea .header_competences h2 .after_br {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-style: normal;
  color: black;
}

.container_competences .header_competences .container_text_explication {
  display: flex;
  align-items: end;
  padding-bottom: 25px;
}



.container_competences .container_projet_competence {
  display: flex;
  gap: 50px;
  padding-top: 40px;
}

.container_competences .container_projet_competence p {
  padding-top: 25px;
  width: 40%;
}

.container_competences p {
  font-weight: 200;
}


.list_projet_competence {
  list-style: none;
  width: 60%;
}

.list_projet_competence li a {
  display: flex;
  justify-content: space-between;
  color: white;
  text-decoration: none;
  padding: 25px 0 10px 0;
  border-bottom: 1px solid white;
  position: relative;
}

.competences.crea .list_projet_competence li a {
  border-color: black;
}

.competences.crea .list_projet_competence li a svg path {
  fill: black;
}

.list_projet_competence li a::before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-blue);
  transition: all 300ms ease-in-out;
}

.list_projet_competence li:hover a::before {
  width: 100%;
}

.list_projet_competence .en_savoir_plus {
  display: flex;
  align-items: center;
  gap: 10px;
}

.list_projet_competence li .en_savoir_plus svg {
  transition: all 300ms ease-in-out;
}

.list_projet_competence li:hover .en_savoir_plus svg {
  transform: rotate(45deg);
}

/**********************************************************/
/**********************************************************/
/******************** Section carrousel *******************/
/**********************************************************/
/**********************************************************/
/* carrousel */
.carrousel {
  height: 100vh;
  min-height: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 70px 20px;
  background-color: black;
  gap: 25px;
}

.container_carrousel {
  width: 100%;
  max-width: 1400px;
  height: 100%;
  min-height: 500px;
  position: relative;
  overflow: hidden;
  /* border: 25px solid white; */
  border-radius: 30px;
}

.carrousel .list .item {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0 0 0 0;
}

.carrousel .list .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carrousel .list .item .content {
  position: absolute;
  top: 20%;
  width: 100%;
  max-width: 40%;
  left: 50px;
  box-sizing: border-box;
  color: #fff;
  text-shadow: 0 5px 10px #0004;
}

.carrousel .list .item .title {
  font-size: 4.375rem;
  font-weight: bold;
  line-height: 1.3em;
}


/* thumbail */
.thumbnail {
  position: absolute;
  bottom: 50%;
  left: 60%;
  transform: translateY(50%);
  width: max-content;
  height: 380px;
  z-index: 100;
  display: flex;
  gap: 20px;
}

.thumbnail .item {
  width: 220px;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
}

.thumbnail .item .image_container {
  max-width: 2000px;
  overflow: hidden;
  margin: 0 auto;
  width: 100%;
  height: 75%;
  overflow: hidden;
}

.thumbnail .item .image_container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.thumbnail .item .content {
  padding-top: 20px;
  padding-left: 15px;
  background-color: white;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 190px;
  margin-top: -25px;
  position: relative;
}

.thumbnail .item .content .title {
  font-weight: 700;
  font-size: 1.25rem;
  position: relative;
  z-index: 1;
  padding-bottom: 5px;
}

.thumbnail .item .content .des {
  font-size: 0.625rem;
  position: relative;
  z-index: 1;
  padding-right: 25px;
  color: var(--color-dark);
}

/* Arrows */
.arrows {
  position: absolute;
  bottom: 50px;
  right: 0;
  width: 50%;
  z-index: 100;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: end;
  padding-right: 25px;
}

/* Ligne entre les flèches et le compteur */
.arrows .line_arrow {
  width: 100%;
  position: relative;
  height: 2px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

.arrows .line_arrow .progress {
  height: 2px;
  background-color: var(--color-blue);
  transform-origin: left;
}


.container_arrow {
  display: flex;
  gap: 15px;
}

.arrows button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: transparent;
  border: 1px solid white;
  color: #fff;
  font-family: monospace;
  font-weight: bold;
  transition: .5s;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.container_arrow svg {
  width: 25px;
  height: 25px;
}

.arrows button:hover {
  border-color: var(--color-blue);
  background-color: var(--color-blue);
}

.arrows .compteur {
  font-weight: 900;
  font-size: 2.1875rem;
  color: white;
}

.carrousel .list .item .content .button_explore {
  margin-top: 15px;
}

/* animation */
.carrousel .list .item:nth-child(1) {
  z-index: 1;
}


/* animation text in first item */
.carrousel .list .item:nth-child(1) .content .title,
.carrousel .list .item:nth-child(1) .content .des,
.carrousel .list .item:nth-child(1) .content .button_explore {
  transform: translateY(50px);
  filter: blur(20px);
  opacity: 0;
  animation: showContent .5s 1s ease-in-out 1 forwards;
}

@keyframes showContent {
  to {
    transform: translateY(0px);
    filter: blur(0px);
    opacity: 1;
  }
}

.carrousel .list .item:nth-child(1) .content .title {
  animation-delay: 750ms !important;
}

.carrousel .list .item:nth-child(1) .content .des {
  animation-delay: 1s !important;
}

.carrousel .list .item:nth-child(1) .content .button_explore {
  animation-delay: 1.25s !important;
}

/* create animation when next click */
.carrousel.next .list .item:nth-child(1) img {
  width: 150px;
  height: 220px;
  position: absolute;
  bottom: 50%;
  left: 70%;
  border-radius: 30px;
  animation: showImage .5s ease-in-out 1 forwards;
}

@keyframes showImage {
  to {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
}

.carrousel.prev .list .item img {
  z-index: 100;
}

@keyframes showThumbnail {
  from {
    width: 0;
    opacity: 0;
  }
}

.carrousel.next .thumbnail {
  animation: effectNext .5s ease-in-out 1;
}

@keyframes effectNext {
  from {
    transform: translate(220px, 50%);
  }
}

/* running time */

.carrousel .time {
  position: absolute;
  z-index: 1000;
  width: 0%;
  height: 3px;
  background-color: #f1683a;
  left: 0;
  top: 0;
}


/* prev click */

.carrousel.prev .list .item:nth-child(2) {
  z-index: 2;
}

.carrousel.prev .list .item:nth-child(2) img {
  animation: outFrame 0s ease-in-out 1 forwards;
  position: absolute;
  bottom: 0;
  left: 0;
}


@keyframes outFrame {
  to {
    width: 0px;
  }
}

.carrousel.prev .thumbnail .item:nth-child(1) {
  overflow: hidden;
  opacity: 0;
  animation: showThumbnail .5s ease-in-out 1 forwards;
}

.carrousel.prev .list .item:nth-child(2) .content .title,
.carrousel.prev .list .item:nth-child(2) .content .des,
.carrousel.prev .list .item:nth-child(2) .content .button_explore {
  animation: contentOut 1.5s ease-in-out 1 forwards !important;
}

@keyframes contentOut {
  to {
    transform: translateY(-150px);
    filter: blur(20px);
    opacity: 0;
  }
}



@media (max-width: 1024px) {
  .carrousel .list .item .content {
    padding-right: 0;
    width: calc(50% - 50px);
  }

  .carrousel .list .item .content .title {
    font-size: 3.125rem;
  }
}

@media (max-width: 768px) {
  .carrousel .list .item .content {
    padding-right: 0;
    left: 15px;
    width: 100%;
    padding-right: 30px;
  }

  .carrousel .list .item .content .title {
    font-size: 2.5rem;
  }

  .thumbnail {
    left: 100%;
  }

  .carrousel .list .item .content{
    max-width: 100%;
  }

}


/* Animation améliorée pour éviter le délai */
@keyframes showThumbnail {
  from {
    width: 0;
    opacity: 0;
  }

  to {
    width: 220px;
    opacity: 1;
  }
}

.carrousel.prev .thumbnail .item:nth-child(1) {
  overflow: hidden;
  opacity: 0;
  animation: showThumbnail 0.5s ease-in-out 1 forwards;
  animation-fill-mode: forwards;
  /* Évite le retour à l'état initial */
}

/* Correction des animations pour le mode prev */
.carrousel.prev .list .item:nth-child(2) img {
  animation: outFrame 0.5s ease-in-out 1 forwards;
  position: absolute;
  bottom: 0;
  left: 0;
}

@keyframes outFrame {
  to {
    width: 0px;
    height: 0px;
    bottom: 50%;
    left: calc(60% + 220px);
    border-radius: 20px;
    opacity: 0;
  }
}


/* Ajout d'une transition fluide */
.thumbnail .item {
  transition: opacity 0.5s ease, transform 0.5s ease;
}


/**********************************************************/
/**********************************************************/
/**************** FIN Section carrousel ********************/
/**********************************************************/
/**********************************************************/









/**********************************************************/
/******************** Section contact ********************/
/**********************************************************/
.bandeau_contact {
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 25px;
  color: white;
  background-image: linear-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25)),
    var(--background-contact);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  text-align: center;
  padding: 25px;
}

/**********************************************************/
/******************** Section projets ********************/
/**********************************************************/
.projets {
  padding: 50px 25px;
  background-color: var(--color-black);
}

.projets h2{
  color: white;
  padding-bottom: 25px;
}

.projets h2 span{
  font-family: 'Times New Roman', Times, serif;
  color: var(--color-blue);
}

.container_projets {
  margin: 0 auto;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
}


.container_projets .swiper-button-prev,
.container_projets .swiper-button-next{
  width: 40px;
}

.container_projets .swiper-slide{
  padding-bottom: 70px;
}

.myProjetSwiperHomePage{
  padding-left: 5px !important;
}