@import url("https://fonts.googleapis.com/css2?family=Belleza&family=Cormorant+Infant:ital,wght@0,300;0,400;0,600;0,700;1,400;1,600;1,700&family=Montserrat+Alternates:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap");
:root {
  /* clr: color */
  --clr-bleu-fonce: #03465d;
  --clr-orange: #ff7300;
  --clr-blanc: #fff;
  --clr-gris-fonce: #162429;
  --clr-bleu-pale: #a3cfdf;
  /* ff: font-family */
  --ff-belleza: Belleza, sans-serif;
  --ff-montserrat-atlernates: "Montserrat Alternates", sans-serif;
  --ff-cormorant: "Cormorant Infant", serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--ff-montserrat-atlernates);
  font-size: 1.5rem;
  line-height: 2.5rem;
  margin: 5rem 5rem 0 5rem;
  min-height: 100vh;
  /* display:flex; */
  /* height: 100%; */
  color: var(--clr-bleu-fonce);
}
.hero {
    display: flex;
  }
  
  .hero-texte {
    width: 50%;
    padding-right: 2rem;
    /* padding-left: 2rem; */
  }
  
  .hero-image {
    width: 50%;
    /* display:flex; */
  }
h1,
h2,
h3,
h4,
h5 {
  font-family: var(--ff-belleza);
}

h1 {
  color: var(--clr-orange);
  text-align: center;
  margin: 3rem 2rem 2rem;
}

h2 {
  margin: 2rem 0;
}
h3 {
  margin: 1rem 0;
}

p {
  padding: 0.75rem 0;
}

.portfolio li {
  padding-left: 2rem;
  list-style: inside;
}

.cache-ecran {
  position: absolute;
  height: 0;
  width: 0;
  left: -9999px;
  font-size: 0;
}

#entete {
  display: flex;
  margin-bottom: 5rem;
}

#nav-branding {
  flex: 30%;
}

#branding {
  font-family: var(--ff-belleza);
  font-size: 6rem;
}
#branding a {
  text-decoration: none;
  color: var(--clr-bleu-fonce);
}

.navbar {
  flex: 70%;
}

.nav-menu {
  display: flex;
  justify-content: flex-end;
  /* align-content: flex-end; */
  flex-direction: row;
}

.nav-item {
  list-style: none;
  font-size: 1.25rem;
  margin: 0 2rem;
}

.nav-link {
  text-decoration: none;
  color: var(--clr-bleu-fonce);
  display: inline-block;
  position: relative;
}

.nav-link::after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--clr-orange);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.nav-link:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.hero {
  display: flex;
}

.hero-texte {
  width: 50%;
  padding-right: 2rem;
  /* padding-left: 2rem; */
}

.hero-image {
  width: 50%;
  /* display:flex; */
}
.hero-portfolio {
    display: flex;
  }
  
  .hero-texte-portfolio {
    width: 50%;
    padding-right: 2rem;
    /* padding-left: 2rem; */
  }
  
  .hero-image-portfolio {
    width: 50%;
    /* display:flex; */
  }

.signature {
  display: flex;
  height: 400px;
  width: auto;
  align-items: center;
  margin-top: 4rem;
}

.illustration {
  display: flex;
  height: 400px;
  width: auto;
  align-items: center;
  justify-content: center;
}


.signature-svg-horizontale {
  fill: var(--clr-bleu-fonce);
  width: 85%;
  height: auto;
  /* height: auto; */
  /* margin-top: 2rem; */
  /* margin-left: 3rem; */
}

footer {
  width: 100%;
  height: 5rem;
  margin-top: 5rem;
  padding-top: 1;
  padding-bottom: 1rem;
  text-align: center;
  font-size: 1rem;
}

/* .copyright{
    position: fixed;
    bottom: 0;
    left: 0;
} */

.contact-index {
  /*position: fixed; */
  bottom: 0;
  left: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

.hero {
    display: flex;
  }
  
  .hero-texte {
    width: 50%;
    padding-right: 2rem;
    /* padding-left: 2rem; */
  }
  
  .hero-image {
    width: 50%;
    /* display:flex; */
  }
.portfolio img {
  display: flex;
  width: 90%;
  height: auto;
  align-items: center;
  justify-content: center;
  /* padding-top: 4rem; */
  border: 1px solid var(--clr-orange);
  border-radius: 0.25rem;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.illustration img {
  width: 80%;
}

/* Pour le menu */
@media screen and (max-width:795px) {
    .nav-item{
        margin: 0 1.5rem;
    }
}


.hamburger {
    display: none;
    cursor: pointer;
  }
  
  .bar {
    display: block;
    width: 2rem;
    height: 0.125rem;
    margin: .5rem auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: var(--clr-orange);
  }

  /* Mobile */
  @media screen and (max-width: 730px) {
    /* @media screen and (max-width: 620px) { */

    body{
        margin: 3rem;
    }
    .navbar{
        display: flex;
        justify-content: flex-end;
    }
    .hamburger {
      display: block;
      
    }
    .hamburger.active .bar:nth-child(2) {
      opacity: 0;
    }
    .hamburger.active .bar:nth-child(1) {
      transform: translateY(11px) rotate(45deg);
    }
    .hamburger.active .bar:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg);
    }
    .nav-menu {
      position: fixed;
      left: -100%;
      top: 8rem;
      gap: 20px;
      flex-direction: column;
      background-color: var(--clr-orange);
      opacity: .98;
      width: 100%;
      height: 85%;
      text-align: center;
      transition: 0.3s;
      justify-content: flex-start;
      
    }
    .nav-item {
      margin: 2rem 0 0 0;
    }
    .nav-menu.active {
      left: 0;
      height: 85%;
      z-index: 1;
    }

  }

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

    body {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .hero-image {
        display: none;
    }
    .hero-portfolio {
        display: flex;
        flex-direction: column-reverse;
      }
      
    .hero-texte-portfolio {
        width: 100%;
        padding-right: 2rem;
        /* padding-left: 2rem; */
      }
      
    .hero-image-portfolio {
        width: 100%;
        /* display:flex; */
      }
    .portfolio img {
      /* display: flex; */
      width: 100%;
      height: auto;
      align-items: center;
      justify-content: center;
      /* padding-top: 4rem; */
      border: 1px solid var(--clr-orange);
      border-radius: 0.25rem;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    }

    .hero {
        display: flex;
        flex-direction: column-reverse;
      }
      
      .hero-texte {
        width: 100%;
        padding-right: 2rem;
        /* padding-left: 2rem; */
      }
      
      .hero-image {
        width: 100%;
        /* display:flex; */
      }
/* 
      footer {
        width: 100%;
        height: 5rem;
        margin-top: 5rem;
        padding-top: 4;
        padding-bottom: 1rem;
        text-align: center;
        font-size: 1rem;
      } */

      .contact-index {
        /* position: fixed; */
        width: 100%;
        height: 2rem;
        margin-top: 2rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
        text-align: center;
        font-size: 1rem;
      }
  }


 a {
    color: var(--clr-orange);
    text-decoration: underline;
  }


  .navbar ul .active a {
    font-weight: bold;
}