@font-face {
  font-family: 'Excon';
  src: url('../font/Excon-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Ranade';
  src: url('../font/Ranade-Light.ttf') format('truetype');
}

body,
html {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

body {
  background-color: #181B1E;
  font-family: 'Ranade', sans-serif;
  font-size: 0.875rem;
  width: 100%;
}

header {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.video-container {
  width: 100vw;
}

iframe {
  display: block;
  aspect-ratio: 16 / 9;
  pointer-events: none;
  width: 100%;
  height: auto;
}

#lang-toggle {
  position: fixed;
  right: 0vw;
  margin: 5vw;
  padding: 1.5vw;
  border: none;
  color: #F3F7F8;
  border-radius: 0.625rem;
  background-color: #2e3134;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  max-width: 90px;
  max-height: 50px;
}

#lang-toggle:hover {
  transform: scale(1.1);
  height: auto;
}

#lang-toggle:active {
  background-color: #7A154B;
  color: #F3F7F8;
}

h1 {
  position: absolute;
  color: #F3F7F8;
  text-align: center;
  font-family: 'Excon', sans-serif;
  font-size: 1.063rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}

h1 span {
  font-size: 1.625rem;
}

.presentation-section {
  background-color: hsl(192, 26%, 96%);
  padding: 7.5vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.presentation-section img {
  width: 75vw;
  border-radius: 10%;
  margin: 1.25rem 0;
}

strong {
  font-weight: bolder;
}

.softskills {
  display: flex;
  text-align: center;
  gap: 20px;
}

.dot {
  color: #7A154B;
}

.custom-bar {
  width: 0;
  height: 0.188rem;
  background-color: #F3F7F8;
  border: none;
  margin: 1.25rem 0;
  transition: width 0.8s ease-out;
}

.custom-bar.visible {
  width: 100%;
}

h2 {
  font-size: 1.25rem;
  color: #F3F7F8;
  padding-left: 2rem;
  padding-top: 1rem;
  font-family: 'Excon', sans-serif;
}

.hardskills-section,
.contact-section {
  color: #F3F7F8;
}

.hardskills-list {
  position: relative;
  list-style: none;
  height: 28.125rem;
  overflow: hidden;
  margin: 5vw;
}

.hardskills-element {
  position: absolute;
  background-color: #F3F7F8;
  width: fit-content;
  height: fit-content;
  color: #181B1E;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0.625rem;
  border-radius: 0.625rem;
  transition: opacity 0.5s ease, transform 0.5s ease;
  gap: 0.5rem;
}

.hardskills-element:hover {
  background-color: #7A154B;
  color: #F3F7F8;
}

.hardskills-element:hover img {
  filter: invert(100%) sepia(58%) saturate(671%) hue-rotate(177deg) brightness(103%) contrast(94%);
}

h3 {
  font: 2rem;
  margin-bottom: 1.5vw;
}

.projects-section {
  background-color: #F3F7F8;
}

.projects-section h2 {
  color: #181B1E;
}

.projects-section .custom-bar {
  background-color: #181B1E;
}

.projects-section ul {
  list-style: none;
  padding-top: 5vw;
  padding-bottom: 5vw;
  display: flex;
  justify-content: center;
  flex-direction: column;
  flex-wrap: wrap;
}

.projects-section img {
  max-width: 100%;
  width: 80vw;
  height: auto;
}

.projects-section li {
  margin-bottom: 5vw;
}

.projects-section ul li {
    opacity: 0;
    transform: translateY(30px); /* Commence 30px plus bas */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.projects-section ul li.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.contact-section {
  width: 100%;
  padding-bottom: 5vw;
}

form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, auto);
  gap: 5vw;
  width: 100%;
  box-sizing: border-box;
  align-items: start;
  justify-items: center;
  margin: 10vw 0;
}

.input-1 input,
.input-2 input {
  height: 10vw;
}

.input-1 input,
.input-2 input {
  width: 35vw;
}

.input-3 input {
  height: 2.188rem;
}

.input-1 input,
.input-2 input,
.input-3 input,
.input-4 input,
textarea {
  padding-left: 1rem;
  padding-top: 0.2rem;
}

.input-1 {
  display: grid;
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row: 1;
  width: 35vw;
  gap: 2vw;
  justify-content: start;
}

.input-2 {
  display: grid;
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row: 1;
  width: 35vw;
  gap: 2vw;
  justify-content: end;
}

.input-3 {
  display: grid;
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row: 2;
  gap: 2vw;
  width: 85vw;
}

.input-4 {
  display: grid;
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row: 3;
  gap: 2vw;
  width: 85vw;
}

.btn-send {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  border-radius: 0;
  color: inherit;
  font: inherit;
  text-align: center;
  display: grid;
  grid-column: 1 / 3;
  grid-row: 4;
  justify-self: center;
  padding: 2.5vw;
  cursor: pointer;
  background-color: #F3F7F8;
  color: #181B1E;
  border-radius: 8px;
}

input,
textarea {
  border-radius: 0.625rem;
  box-shadow: 1vw 1vw 3vw #7A154B;
}

label,
.label {
  font-weight: bold;
  font-size: 1rem;
}

.infos-contact {
  display: flex;
  flex-direction: column;
  width: 85vw;
  margin: 0 auto;
  text-align: left;
  gap: 5vw;
}

.contact-groupe {
  display: flex;
  flex-direction: column;
  gap: 5vw;
}

.cv {
  display: flex;
}

.cv button {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0.625rem;
  box-shadow: 1vw 1vw 5vw #7A154B;
  padding: 2.5vw;
  color: #181B1E;
  border-color: #F3F7F8;
}

.btn-send:hover,
.btn-send:active,
.cv button:hover,
.cv button:active {
  outline: none;
  color: #F3F7F8;
  background-color: #7A154B;
  border-color: #7A154B;
  -webkit-tap-highlight-color: transparent;
}

.btn-send:focus {
  outline: none;
  box-shadow: none;
}

.cv .label {
  margin-right: 5vw;
}

.cv a {
  color: #181B1E;
}

.phone {
  text-decoration: none;
  color: #F3F7F8;
}

.contact-element {
  padding-left: 1.25rem;
}

.contact-groupe ul {
  display: flex;
  gap: 5vw;
  list-style: none;
  justify-content: start;
}

.contact-groupe ul img {
  max-width: 3rem;
  height: 8vw;
  width: auto;
  display: block;
}

footer p {
  width: 100%;
  text-align: center;
  color: #7A154B;
  font-family: 'Excon', sans-serif;
  font-size: 0.775rem;
}

.projects-section img {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.projects-section img:hover,
.projects-section img:active {
  filter: grayscale(0%);
}

.hidden {
  display: none;
}

@media screen and (min-width: 768px) {

  h2 {
    font-size: 1.5rem;
  }

  .video-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }

  iframe {
    position: absolute;
    width: 100vw;
    height: 56.25vw;
    min-height: 100vh;
    min-width: 177.77vh;
    object-fit: cover;
    object-position: center;
    z-index: -1;
  }

  .presentation-section {
    display: grid;
    padding: auto 5vw;
    grid-template-columns: repeat(2, auto);
    grid-template-columns: repeat(2, auto);
    column-gap: 10vw;
  }

  .presentation-section img {
    width: 25vw;
    border-radius: 10%;
    margin: 1.25rem 0;
    grid-column: 1;
    grid-row-start: 1;
    grid-row-end: 3;
  }

  .presentation {
    grid-column: 2;
    grid-row: 1;
  }

  .softskills {
    grid-column: 2;
    grid-row: 2;
  }

  .presentation p {
    font-size: 0.875rem;
  }

  .softskills {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5vw;
  }

  .softskills span {
    display: inline;
    margin: 0;
    font-size: 0.9075rem;
  }

  .hardskills-list {
    height: 18rem;
    margin: 10vw;
  }

  .projects-section ul {
    flex-direction: row;
    gap: 1.5vw;
  }

  .projects-section img {
    width: 10vw;
    height: auto;
    transition: transform 0.3s ease;
  }

  .projects-section ul:hover img {
    transform: scale(0.95);
  }

  .projects-section ul img:hover {
    transform: scale(1.1);
  }

  .projects-section li {
    margin-bottom: 0;
  }

  .grid-section {
    margin-top: 5vw;
    display: grid;
    grid-template-columns: repeat(2, 43.5vw);
    align-items: start;
    gap: 5vw;
    justify-content: center;
  }

  .infos-contact {
    grid-column: 1;
    grid-row: 1;
    width: 43.5vw;
    gap: 3.75vw;
  }

  .contact-groupe,
  .cv {
    gap: 1.5vw;
  }

  .btn-send,
  .cv button {
    padding: 1vw;
  }

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

  .cv button {
    margin-left: 2vw;
  }

  .contact-groupe ul {
    padding-left: 1.25rem;
  }

  .grid-section form {
    grid-column: 2;
    grid-row: 1;
    width: 43vw;
    column-gap: 3vw;
    row-gap: 2vw;
    justify-items: start;
    margin: 0;
  }

  form input,
  textarea {
    box-sizing: border-box;
  }

  .input-1 input,
  .input-1,
  .input-2 input,
  .input-2 {
    width: 20vw;
  }

  .input-1 input,
  .input-2 input,
  .input-3 input {
    height: 4.5vw;
    max-height: 50px;
  }

  .input-3,
  .input-3 input,
  .input-4,
  .input-4 textarea {
    width: 43vw;
  }

  input,
  textarea,
  .cv button {
    box-shadow: 0.3vw 0.3vw 1.5vw #7A154B;
  }

}

@media screen and (min-width: 1440px) {

  h1 {
    font-size: 3.189rem;
  }

  h1 span {
    font-size: 4.875rem;
  }

  .softskills span {
    font-size: 1.625rem;
  }

  .softskills .dot {
    font-size: 4rem;
  }

  .presentation p {
    font-size: 1.25rem;
  }

  h2 {
    font-size: 2.5rem;
  }

  h3 {
    font-size: 1.5rem;
  }

  .hardskills-list {
    height:20rem;
    margin: 5vw 12.5vw ;
  }

  .hardskills-element {
    font-size: 1.25rem;
  }

  .hardskills-element img {
    width: 2rem;
    height: 2rem;
  }

  footer p {
    font-size: 1.25rem;
  }
}