@font-face {
    font-family: fixeltext-regular;
    src: url(fixel-text/FixelText-Regular.woff);
  }
  @font-face {
    font-family: h1;
    src: url(outfit/Outfit-Medium.ttf);
  }


html, body {
    margin: 0;
    padding: 0;
    }

    body{
        background-color: #fffdfb;
    }
    a{
        text-decoration: none;
    }
    ul{
        list-style-type: circle;
        padding: 0;
        margin: 0;
    }
    section h2, #evolve-more h2, footer h2{
        font-size: 4rem;
        font-family: h1;
        color: #f2069d;
        margin-bottom: 4rem;
    }
    p {
        font-family: fixeltext-regular;
    }
    img{
      width: 100%;
    }
/********************** HEADER ***********************/  
/********************** HEADER ***********************/
/********************** HEADER ***********************/  
 /* Structure de base */
/* Base styling */
nav {
    padding: 2rem;
    position: relative;
    z-index: 100;
  }
  
  .nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .brand {
    font-size: 26px;
    font-family: h1;
    color: #3a1fcf;
  }
  .brand a{
    text-decoration: none;
    color: #f2069d;
  }
  /* Burger button */
  .burger {
    width: 30px;
    height: 24px;
    position: relative;
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 200;
  }
  
  .burger .bar {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #f2069d;
    margin: 5px 0;
    transition: 0.4s;
  }
  
  /* Menu */
  .nav-links {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .nav-links li a {
    font-size: 20px;
    font-family: h1;
    color: #f2069d;
    text-decoration: none;
  }
  
  /* Responsive full-screen overlay */
  @media (max-width: 768px) {
    .burger {
      display: block;
    }
  
    .nav-links {
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      width: 100vw;
      background-color: rgba(255, 255, 255, 1);
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 2rem;
      transform: translateY(-100%);
      opacity: 0;
      pointer-events: none;
      transition: transform 0.3s ease, opacity 0.3s ease;
      z-index: 150;
    }
  
    .nav-links.active {
      transform: translateY(0);
      opacity: 1;
      pointer-events: auto;
    }
  
    .nav-links li a {
      font-size: 8vw;
    }
  
    /* Burger to cross animation */
    .burger.open .bar:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }
  
    .burger.open .bar:nth-child(2) {
      opacity: 0;
    }
  
    .burger.open .bar:nth-child(3) {
      transform: rotate(-45deg) translate(6px, -6px);
    }
  }
/********************** MAIN ***********************/
/********************** MAIN ***********************/
/********************** MAIN ***********************/
    main{
        margin:0 5vw;
    }
    section{
        margin-bottom: 7rem;
    }
    section#presentation{
        background-image: url(images/cover_site_web.jpg);
        background-size: cover;
        background-position: center;
        text-align: center;
        height: 80vh;
        border-radius: 15px;
        display: flex;
        justify-content: center;
    }
    section#presentation h1{
        color: #f2069d;
        font-size: 5rem;
        font-family: h1;
        margin: auto;
    }
    section#projets .project img{
        border-radius: 15px;
    }
    section#projets figure{
        margin: 0 0 4rem;
    }
    section#projets figure a{
        height: 100%;
        width: 100%;
        display: inline-block;
    }
    figure img{
        margin: 0 0 1rem;
    }
    figcaption{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    figcaption h3{
        font-family: h1;
        color: #1b0a40;
        margin: 0;
    }
    figcaption .tags{
        color: #6504c1;
        font-family: fixeltext-regular;
    }
    #full-intro{
        height: 60vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #intro p{
        font-size: 4rem;
    }
    .bolder{
      font-weight: bold;
      color: #1b0a40;
    }
    #resume p{
        font-size: 1.2rem;
    }
    .thin{
        height: 1px;
        background-color: #000000;
        display: block;
        margin: 4rem 0 5rem;
    }
    #evolve{
        height: 40vh;
        display: flex;
        justify-content: end;
        flex-direction: column;
    }
    #pres-projet h1{
        color: #1b0a40;
        font-size: 5rem;
        font-family: h1;
    }
    .projet-info span{
        color: #6504c1;
        font-weight: bold;
    }
    #evolve-more img{
        margin-bottom: 4rem;
    }
    #projet-intro {
      padding: 2rem 0 10rem;
    }
    .citation{
      text-align: center;
      font-size: 2.5rem;
      color: #6504c1;
      padding: 15% 0;
    }



    .cta-button {
      position: relative;
      display: inline-block;
      padding: 16px 40px;
      background-color: #6504c1;
      color: #fff;
      font-size: 13px;
      font-family: h1;
      font-weight: 600;
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 1px;
      border-radius: 0;
      overflow: hidden;
      box-shadow: 0 0 0 rgba(0, 0, 0, 0);
      cursor: pointer;
      user-select: none;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      margin-top: 2rem;
    }

    .cta-button:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(101, 4, 193, 0.4);
    }

    /* Le shine */
    .shine {
      position: absolute;
      top: 0;
      left: -50%;
      width: 50%;
      height: 100%;
      background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0.3),
        rgba(255, 255, 255, 0)
      );
      transform: skewX(-20deg);
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: 1;
    }

    /* Animation via classe JS */
    .shine.animate-forward {
      animation: shineForward 0.75s forwards;
      opacity: 1;
    }

    .shine.animate-backward {
      animation: shineBackward 0.75s forwards;
      opacity: 1;
    }

    @keyframes shineForward {
      0% {
        left: -50%;
        opacity: 1;
      }
      100% {
        left: 125%;
        opacity: 0;
      }
    }

    @keyframes shineBackward {
      0% {
        left: 125%;
        opacity: 0;
      }
      100% {
        left: -50%;
        opacity: 0.8;
      }
    }


/********************** FOOTER ***********************/
/********************** FOOTER ***********************/
/********************** FOOTER ***********************/
footer{
    background-color: #1b0a40;
    padding: 4rem 5vw;
}
footer ul.rs{
    line-height: 50px;
    padding: 0;
    list-style-type: none;
}
footer ul.rs li a{
    text-decoration: underline;
    font-size: 1.5rem;
    color: #f0e2dd;
}


@media screen and (max-width: 640px) {
  section#presentation h1{
    font-size: 2rem;
    }
    section#presentation{
      background-image: url(images/cover_site_web_mobile.jpg);
    }
    section h2, footer h2, section h2, #evolve-more h2, footer h2{
      font-size: 2rem;
    }
    #intro p{
      font-size: 1.5rem;
    }
    section{
      margin-bottom: 3rem;
    }
    .thin{
      margin: 2rem 0 3rem;
    }
    section h2, #evolve-more h2, footer h2{
      margin-bottom: 2rem;
    }
    #projet-intro{
      padding: 0rem 0 2rem;
    }
    .citation{
      font-size: 1.5rem;
      padding: 0;
    }
    #evolve{
      height: auto;
    }
    #pres-projet h1{
      font-size: 3rem;
    }
    #projet-intro h2{
      margin-bottom: 0;
    }
    #evolve-more img{
      margin-bottom: 1rem;
    }
    .cta-button{
      width: 100%;
      text-align: center;
      margin-top: 1rem;
    }
    
  }