.row{
	margin: 0;
}
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {

    position: relative;
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;

}

html {
    scroll-behavior: smooth;
}

.displaynone{
        display: none;
      }


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

      .divider10{
        margin-top: 1em;
      }
      .divider20{
        margin-top: 2em;
      }
      .divider30{
        margin-top: 3em;
      }
      .divider35{
        margin-top: 3.5em;
      }
      .divider40{
        margin-top: 4em;
      }
      .divider50{
        margin-top: 5em;
      }
      .divider55{
        margin-top: 5.5em;
      }
      .divider60{
        margin-top: 6em;
      }
      .divider70{
        margin-top: 7em;
      }
      .divider80{
        margin-top: 8em;
      }
      .divider90{
        margin-top: 9em;
      }
      .divider100{
        margin-top: 10em;
      }
      .divider125{
        margin-top: 12.5em;
      }
      .divider170{
        margin-top: 17em;
      }
      .divider190{
        margin-top: 19em;
      }
      .divider200{
        margin-top: 20em;
      }

      .marginauto{
        display: block;
        margin: auto;
      }

      .marginzero{
        margin: 0rem;
      }


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

        .w-10 {
          width: 10% !important;
        }

        .w-20 {
          width: 20% !important;
        }

        .w-25 {
          width: 25% !important;
        }
        .w-35 {
          width: 35% !important;
        }

        .w-40 {
          width: 40% !important;
        }

        .w-50 {
          width: 50% !important;
        }

        .w-60 {
          width: 60% !important;
        }

        .w-70 {
          width: 70% !important;
        }

        .w-75 {
          width: 75% !important;
        }

        .w-80 {
          width: 80% !important;
        }

        .w-90 {
          width: 90% !important;
        }
        .w-95 {
          width: 95% !important;
        }

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

        .w-200 {
          width: 200% !important;
        }

        .w-auto {
          width: auto !important;
        }


/* ---------- height ---------- */

        .h-25 {
          height: 25% !important;
        }

        .h-50 {
          height: 50% !important;
        }

        .h-75 {
          height: 75% !important;
        }

        .h-100 {
          height: 100% !important;
        }

        .h-auto {
          height: auto !important;
        }

        .mw-100 {
          max-width: 100% !important;
        }

        .mh-100 {
          max-height: 100% !important;
        }


/* ---------- link ---------- */

    a{
      color: #000;
      cursor: pointer;
      text-decoration: none;
    }

    a:hover{
      color: #F4A454;
      text-decoration: none;
    }

    a:visited{
      cursor: pointer;
      text-decoration: none;
    }

    a:target {
      color: #F4A454;
      text-decoration: none;
    }


/* ---------- Align ---------- */

    .textcenter{
      text-align: center;
    }

    .itemcenter{
      align-items: center;
    }

    .itemend{
      align-items: end;
    }


/* ---------- Liste ---------- */

    ul.no-bullets {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }


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

    .highlight {
        background: linear-gradient(120deg, #F5D6B3 0%, #F5D6B3 100%);
        background-repeat: no-repeat;
        background-size: 100% 40%;
        background-position: 0 94%;
        font-weight: 300;
    }

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


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

      h1{
        font-family: 'Playfair Display', serif;
        font-weight: 500;
      }

      h2{
        font-family: 'Playfair Display', serif;
        font-weight: 400;
        font-size: 1.6rem;
      }

      h3{
        font-family: 'Playfair Display', serif;
        font-weight: 400;
        font-size: 1.4rem;
      }

      h4{
      	font-family: 'lato', serif;
        font-weight: 300;
        text-transform: uppercase;
        color: #746B6B;
        font-size: 1.2rem;
      }

      h5{
      	font-family: 'lato', serif;
      	font-weight: 300;
      	font-size: 1rem;
      }

      h6{
      	font-family: 'lato', serif;
      	font-weight: 300;
      	font-size: 0.9rem;
      	text-transform: uppercase;
      }

      .effect:hover{
        background: linear-gradient(120deg, #F5D6B3 0%, #F5D6B3 100%);
        background-repeat: no-repeat;
        background-size: 100% 40%;
        background-position: 0 94%;
        font-weight: 400;
        color: #000;
      }

      .quote{
        font-family: 'Playfair Display', serif;
        font-weight: 300;
        font-size: 1rem;
        color: #757575;
      }
      .quoteit{
        font-family: 'Playfair Display', serif;
        font-weight: 300;
        font-size: 1rem;
        font-style: italic;
        color: #757575;
      }

      .date{
        font-family: 'lato', serif;
        font-weight: 300;
        font-size: 0.9rem;
        margin-bottom: 0.2rem;
        color: #746B6B;
      }


      .note{
        font-family: "Dancing Script", serif;
        font-optical-sizing: auto;
        line-height: 1rem;
        color: #5C6268;
      }

      .medium{
        font-weight: 400;
      }

      .italic{
        font-style: italic;
      }

      .small {
        font-variant: small-caps;
        font-size: 18px;
        font-weight: 300;
      }


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

    body{
      background-color: #FEFEFE;
      font-family: 'Lato', sans-serif;
      font-weight: 300;
    }

    .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: 50vh;
      width:100%;
    }


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


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

    .project{
      width: auto;
    }

    .vignette-left{
      /*background-color: #F5D6B3;*/
      text-align: left;
    }
    .vignette-right{
      /*background-color: #F5D6B3;*/
      text-align: right;
    }

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

    .button:hover{
      border-bottom: 2px solid #F4A454;
      color: #F4A454;
      font-weight: 900;
    }


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

      body.revolt header {
        background-image: url('../img/revolt/revolt_cover.jpg');
        background-position-y: -16rem;
        background-repeat: no-repeat;
        height: 30vh;
      }

      body.revolt .imgdivider{
        background-image: url('../img/revolt/revolt_divider.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        height: 4vh;
        width:100%;
      }


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

      body.bike header {
        background-image: url('../img/bike/bike_cover.jpg');
        background-repeat: no-repeat;
        height: 30vh;
      }

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


/* ---------- ODAO ---------- */

      body.odao header {
        background-image: url('../img/odao/odao_cover.jpg');
        background-repeat: no-repeat;
        height: 30vh;
      }

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


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

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

      .navigator{
        height: 1.5em;
        background-color: #E2E2E2;
        border-top-left-radius: 0.4em;
        border-top-right-radius: 0.4em;
        clear: both;
        display: grid;
      }

      .circle_red {
          width: 0.7em;
          height: 0.7em;
          border-radius: 0.7em;
          background-color: #DF6259;
          float: left;
          margin-left: 0.5em;
      }

      .circle_orange{
        width: 0.7em;
        height: 0.7em;
        border-radius: 0.7em;
        background-color: #EEBD40;
        float: left;
        margin-left: 0.3em;
      }

      .circle_green{
        width: 0.7em;
        height: 0.7em;
        border-radius: 0.7em;
        background-color: #76C94F;
        float: left;
        margin-left: 0.3em;
      }

      .searchbar_web{
        width: 100%;
        height: 1.1em;
        border-radius: 1em;
        background-color: #F0F0F0;
        display: flex;
        align-items: flex-center; /* Centre verticalement */
        justify-content: center; /* Centre horizontalement */
        font-family: 'lato', serif;
        font-weight: 300;
        font-size: 0.8rem;
      }

        .searchbar_web a{
          color: #757575;
        }

        .searchbar_web a:hover{
          color: #757575;
        }


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

      .screen_computer{
        height: 30vh;
        overflow: auto;
        border-bottom-left-radius: 0.4em;
        border-bottom-right-radius: 0.4em;
        position: relative;
        clear:both;
      }

      body.bike .screen_computer{
        height: auto;
        overflow: auto;
        border-bottom-left-radius: 0.4em;
        border-bottom-right-radius: 0.4em;
        position: relative;
        clear:both;
      }

      .screen_computer img{
        width: 100%;
      }

      .screen_scroll{
        height: 391px;
        overflow: auto;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        position: relative;
        clear:both;
      }

      .screen_scroll img{
        width: 100%;
      }


/* ---------- 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:32vh;
      }

      /* 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;
    }