@media (max-width: 767px) {
  .row {
    margin: 24px;
  }

  .row.navbar, footer.row , .rowZero{
    margin: 0px;
  }

}

/* ---------- Marges ---------- */


  @media (max-width: 767px) {
      .divider10{
        margin-top: 0.4em;
      }
      .divider20{
        margin-top: 0.6em;
      }
      .divider30{
        margin-top: 1.8em;
      }
      .divider35{
        margin-top: 1em;
      }
      .divider40{
        margin-top: 1.5em;
      }
      .divider50{
        margin-top: 2em;
      }
      .divider55{
        margin-top: 2.5em;
      }
      .divider60{
        margin-top: 3em;
      }
      .divider70{
        margin-top: 3.5em;
      }
      .divider80{
        margin-top: 4em;
      }
      .divider90{
        margin-top: 4.5em;
      }
      .divider100{
        margin-top: 5em;
      }
      .divider125{
        margin-top: 4em;
      }
      .divider170{
        margin-top: 8em;
      }
      .divider190{
        margin-top: 9em;
      }
      .divider200{
        margin-top: 10em;
      }

  }


/* ---------- width ---------- */

  @media (max-width: 767px) {

        .w-100mobile {
          width: 100% !important;
        }
  }



/* ---------- Highlight ---------- */

@media (max-width: 767px) {
    .highlight {
        background-size: 100% 32%;
        background-position: 0 100%;
    }

    .borderOrange{
        border-bottom: 0.6rem solid #F5D6B3;
        margin-bottom: 2em;
    }
}

/* ---------- Typo ---------- */

  @media (max-width: 767px) {
      h1{
        font-size: 1.6rem;
      }

      h2{
        font-size: 1.4rem;
      }

      h3{
        font-size: 1.2rem;
      }

      h4{
        font-size: 1rem;
      }

      h5{
        font-size: 0.9rem;
      }

      h6{font-size: 0.8rem;
      }

      .quote{
        font-size: 0.8rem;
      }
      .quoteit{font-size: 0.8rem;
      }
  }






/* ---------- Basics components ---------- */


  @media (max-width: 767px) {
    .navbar {
      position: fixed;
      top: 0px;
      width: 100%;
      background-color: #FEFEFE;
      border-bottom: solid 1px black;
      height: 3rem;
      overflow: hidden;
      z-index: 10;
    }

    header{
      margin-top: 3rem;
      background-size: cover; /* Pour que l'image couvre tout le header */
      background-position: center; /* Pour centrer l'image */
      height: 88vh;
      width:100%;
    }

    footer{
      border-top: 2px solid black;
      padding-top: 1.4rem;
      padding-bottom: 1.4rem;
    }
  }



/* ---------- Home ---------- */

@media (max-width: 767px) {

      .date{
        font-family: 'lato', serif;
        font-weight: 200;
        font-size: 0.9rem;
        margin-bottom: 0.2rem;
      }

      .project{
        width: auto;
      }

      .vignette-left{
        text-align: left;
        margin-bottom: 1em;
      }
      .vignette-right{
        text-align: right;
        margin-bottom: 1em;
      }

      .button{
        font-family: 'lato', serif;
        font-weight: 700;
        font-size: 12px;
        height: 26px;
        width: 8em;
        border-bottom: 1px solid black;
        margin-bottom: 1em;
      }

      .button:hover{
        border-bottom: 1px solid #F4A454;
        color: #F4A454;
      }
}


/* ---------- Revolt ---------- */

  @media (max-width: 767px) {
      body.revolt header {
        background-position-y: 0rem;
        background-repeat: no-repeat;
      }

      body.revolt .imgdivider{
        background-size: cover;
        height: 4vh;
        width:100%;
      }
  }

/* ---------- Bike ---------- */

  @media (max-width: 767px) {
      body.bike header {
        background-image: url('../img/bike/bike_cover.jpg');
      }

      body.bike .imgdivider{
        background-image: url('../img/bike/bike_divider.svg');
        background-size: cover;
        height: 9vh;
        width:100%;
      }
  }


/* ---------- Computer Screen ---------- */

    /* ---------- Navigator ---------- */

  @media (max-width: 767px) {

      body.bike .screen_computer{
        height: 32vh;
      }
  }


/* ---------- VIEWBOX ---------- */

      #originalImage{

          cursor: pointer;
      }

      /* Fond gris clair semi-transparent qui recouvre bien toute la page */
      .viewbox {
          display: none;
          position: fixed;
          inset: 0; /* Remplace top, left, width, height pour couvrir toute la fenêtre */
          width: 100vw; /* Assure la pleine largeur */
          height: 100vh; /* Assure la pleine hauteur */
          background: rgba(0, 0, 0, 0.7); /* Fond gris clair semi-transparent */
          align-items: center;
          justify-content: center;
          z-index: 100; /* S'assurer qu'elle est bien au-dessus */
      }


      /* Conteneur de l’image avec fond vert et bordure noire */
      .viewboxContent {
          background: #EFEFEF;
          padding: 60px;
          border-radius: 15px;
          border: 3px solid black;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          max-width: 70%;
          max-height: 80%;
          overflow: hidden;
      }

      /* Image bien centrée avec marges dynamiques */
      .viewboxImage {
          max-width: 100%;
          max-height: 80vh;
          border-radius: 10px;
          display: block;
          margin: auto;
      }

      /* Bouton de fermeture */
      .closeButton {
          position: absolute;
          top: 10px;
          right: 10px;
          background: rgba(0, 0, 0, 0.7);
          color: white;
          border: none;
          font-size: 18px;
          cursor: pointer;
          width: 30px;
          height: 30px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      .closeButton:hover {
          background: rgba(0, 0, 0, 1);
      }


/* ---------- Carousel ---------- */

      .carouselContainer {
          position: relative;
          margin: auto;
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      /* Conteneur des images */
      .carousel {
          position: relative;
          width: 100%;
          height:30rem;
      }

      /* Images superposées */
      .carouselImage, .carouselImage2 {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          opacity: 0;
          transition: opacity 0.9s ease; /* Transition fluide */
      }

      /* Image active */
      .carouselImage.active, .carouselImage2.active {
          opacity: 1;
      }

      /* Boutons de navigation */
      .prevButton, .nextButton {
          position: absolute;
          transform: translateY(-50%);
          color: #888;
          background-color: #E2E2E2;
          border: none;
          font-size: 14px;
          width: 20px;
          height: 20px;
          border-radius: 20%;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      .prevButton { left: 0px; }
      .nextButton { right: 24px; }

      .prevButton:hover, .nextButton:hover {
          background-color: #EFEFEF;
          color: #333;
      }


      /* Conteneur du scroll (rectangle visible) */
      .image-scroll-container {
          width: 80%; /* Largeur du rectangle */
          max-width: 800px;
          overflow-x: auto; /* Active le défilement horizontal */
          white-space: nowrap; /* Empêche le retour à la ligne */
          padding: 10px;
          
          /* Masquer la barre de défilement */
          scrollbar-width: none; /* Firefox */
          -ms-overflow-style: none; /* Internet Explorer et Edge */
      }

      /* Masquer la barre de scroll sur WebKit (Chrome, Safari) */
      .image-scroll-container::-webkit-scrollbar {
          display: none;
      }

      /* Conteneur des images */
      .image-scroll {
          display: flex; /* Alignement horizontal */
          gap: 10px; /* Espace entre les images */
          align-items: start; 
          margin-left: -10px;
      }

      /* Images */
      .image-scroll img {
          width: 36%;
          height: auto; /* Hauteur ajustée automatiquement */
          cursor: pointer;
          object-fit: contain; /* Assure un bon rendu sans découper l’image */
      }


/* ---------- Photos projects ---------- */

    .picRevolt {
      background-image: url('../img/revolt/revolt_thumbnail.jpg');
      background-size: cover;
      height: 50vh;
      background-position: center; 
    }

    .picBike {
      background-image: url('../img/bike/bike_thumbnail.jpg');
      background-size: cover;
      height: 50vh;
      background-position: center;
    }
    .picOdao {
      background-image: url('../img/odao/odao_thumbnail.jpg');
      background-size: cover;
      height: 50vh;
      background-position: center;
    }

    .picRevolt h2, .picBike h2, .picOdao h2{
      background: rgba(33, 37, 41, 0.6);
      width: 100%;
      height: 100%;
      align-content: center;
      text-align: center;
      color: #FEFEFE;
    }

    .picRevolt h2:hover, .picBike h2:hover, .picOdao h2:hover{
      background: rgba(33, 37, 41, 0.9);
      width: 100%;
      height: 100%;
      align-content: center;
      text-align: center;
      color: #FEFEFE;
    }