@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Lexend+Deca:wght@300;400;500;600&display=swap');

* {
  margin:0;
  padding: 0;
}
body {
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    }
  
  
  /*Logo rond*/
  
  h1 span {
      position: absolute;
      font-family: 'Lexend Deca';
      font-weight: lighter;
      font-size: 12pt;
      text-transform: uppercase;
      top: 0;
      left: 0;
      offset: path('M-50 0 a 50 50 0,11 0 0.1') var(--c);
      color: rgb(174, 0, 255);
    }
    
    h1 {
      position: absolute;
      top: calc(15% - .5em);
      left: calc(8% - .5em);
      animation: rotate 20s linear infinite;
    }
    
  
    @keyframes rotate {
      to { rotate: -1turn; }
    }
  
  h1 span:hover {
    color: rgb(41, 244, 176);
  }

  /*menu burger responsive*/

.menu_responsive {
  display: none;
}


#burger_menu
{
  display: block;
  position: relative;
  top: 50px;
  left: 40px;
  
  z-index: 1;
}

#burger_menu a
{
  text-decoration: none;
  color: rgb(174, 0, 255);
  
  transition: color 0.3s ease;
}

#burger_menu a:hover
{
  color: rgb(41, 244, 176);
}


#burger_menu input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* On cache l'input */
  z-index: 2; /* on le met par dessus le bouton */
}

/* Bouton burger */
#burger_menu span
	  {
		display: block;
		width: 33px;
		height: 3px;
		margin-bottom: 5px;
		position: relative;
		
		background: rgb(174, 0, 255);
		border-radius: 3px;
		
		z-index: 1;
		
		transform-origin: 7px -2px;
		
		transition: transform 0.5s ease,
					background 0.5s ease,
					opacity 0.55s ease;
	  }

/* Transformer la forme du bouton quand on clique dessus*/
#burger_menu span:first-child
{
  transform-origin: 0% 0%;
}

#burger_menu span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

#burger_menu input:checked ~ span
{
  transform: rotate(45deg) translate(-2px, -1px);
  background: rgb(41, 244, 176);
}

#burger_menu input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#burger_menu input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

#menu
{
  position: absolute;
  width: 170px;
  margin: -100px 0 0 -50px;
  padding: 30px;
  padding-top: 125px;
  
  background: #ededed;
  list-style-type: none;
  
  transform-origin: 0% 0%;
  transform: translateX(-100%);
  
  transition: transform 0.5s ease-in-out;
}

#menu li
{
  padding: 10px 0;
  font-size: 16px;
}

/* Faire apparaitre le menu */
#burger_menu input:checked ~ ul
{
  transform: none;
}
  
  /*Menu bar*/
  
  html {
      font-family: 'Lexend Deca';
  }
  
  body, ul, li {
      margin-top: 2em;
      margin-left: 5%;
      padding:0;
      list-style:none;
  }
  
  a {
      color:inherit;
      text-decoration:none;
  }
  
  .con {
      margin-left:12%;
      margin-right:auto;
  }
  
  .cell {
      float:left;
      box-sizing:border-box;
  }
  
  /*.row::after {
      content:"";
      display: block;
      clear:both;
  }*/
  
  .img-box > img {
      width:100%;
      display:block;
  }
  
  html, body {
      overflow-x:hidden;
  }
  
  .con {
      max-width:1000px;
  }
  
  
  .menu-bar {
      margin-top:20px;
  }
  
  @media ( max-width:800px ) {
      .menu-bar {
          display:none;
      }
  }
  
  .menu-bar > .menu-box-1 > ul > li {
      width:calc(100% / 7);
  }
  
  .menu-bar > .menu-box-1 > ul > li > a {
      display:block;
      font-weight:bold;
      text-align:center;
      position:relative;
      color: rgb(174, 0, 255);
  }
  
  .menu-bar > .menu-box-1 > ul > li:hover > a {
      color:rgb(41, 244, 176);
      font-weight: bolder;
  }
  
  .menu-bar > .menu-box-1 > ul > li > a::before {
      content:"";
      position:absolute;
      top:50%;
      transform:translateY(-50%);
      left:0;
      width:2px;
      height:40px;
      background-color:rgb(174, 0, 255);
  }
  
  .menu-bar > .menu-box-1 > ul > li > a::after {
      left:auto;
      right:0;
  }
  
  .menu-bar > .menu-box-1 > ul > li:first-child > a::before, .menu-bar > .menu-box-1 > ul > li:last-child > a::after {
      width:2px;
  }
  
  .menu-bar > .menu-box-1 > ul > li > .page_active {
    display:block;
    font-weight:bold;
    text-align:center;
    position:relative;
    color: rgb(41, 244, 176);
}

  /*lignes grille*/
  
  .ligne { 
      border-bottom:3px solid rgb(174, 0, 255);;
      width: 85%;
      margin-left: 10%;
      margin-top: -1.5em;
  }
  
  .ligne_verticale { 
      border-left: thick solid rgb(174, 0, 255);
      border-width: 3px;
      height:80%;
      left: 85%;
      top: 20%;
      position: absolute;
  }
  
  .ligne_diagonale { 
      border-left: thick solid rgb(174, 0, 255);
      transform: rotate(-45deg);
      border-width: 3px;
      height:45%;
      left: 1%;
      top: 45%;
      position: absolute;
  }
  
  .ligne_diagonale_2 { 
      border-left: thick solid rgb(174, 0, 255);;
      transform: rotate(-45deg);
      border-width: 3px;
      height:47%;
      left: 15%;
      top: 60%;
      position: absolute;
  }
  
  .ligne_diagonale_3 { 
      border-left: thick solid rgb(174, 0, 255);
      transform: rotate(45deg);
      border-width: 3px;
      height:47%;
      left: 97%;
      top: -8%;
      position: absolute;
  }
  
  .ligne_diagonale_4 { 
      border-left: thick solid rgb(174, 0, 255);;
      border-width: 3px;
      height:30%;
      left: 56.2%;
      top: 50%;
      position: absolute;
  }
  
  
  /*carousel*/
  
  @keyframes tonext {
      75% {
        left: 0;
      }
      95% {
        left: 100%;
      }
      98% {
        left: 100%;
      }
      99% {
        left: 0;
      }
    }
    
    @keyframes tostart {
      75% {
        left: 0;
      }
      95% {
        left: -300%;
      }
      98% {
        left: -300%;
      }
      99% {
        left: 0;
      }
    }
    
    @keyframes snap {
      96% {
        scroll-snap-align: center;
      }
      97% {
        scroll-snap-align: none;
      }
      99% {
        scroll-snap-align: none;
      }
      100% {
        scroll-snap-align: center;
      }
    }
    
    .projet {
      max-width: 35rem;
      margin: 0;
      padding: 0;
      font-family: 'Lato', sans-serif;
      margin-top : 10%;
      margin-left: 13%;
      border-width: 10px;
      border-color: rgb(174, 0, 255);;
    }
    
    * {
      box-sizing: border-box;
      scrollbar-color: transparent transparent; /* thumb and track color */
      scrollbar-width: 0px;
    }
    
    *::-webkit-scrollbar {
      width: 0;
    }
    
    *::-webkit-scrollbar-track {
      background: transparent;
    }
    
    *::-webkit-scrollbar-thumb {
      background: transparent;
      border: none;
    }
    
    * {
      -ms-overflow-style: none;
    }
    
    ol, li {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    .carousel {
      position: relative;
      padding-top: 70%;
      perspective: 100px;
    }
    
    .carousel__viewport {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: flex;
      overflow-x: scroll;
      counter-reset: item;
      scroll-behavior: smooth;
      scroll-snap-type: x mandatory;
    }
    
    .carousel__slide {
      position: relative;
      flex: 0 0 100%;
      width: 100%;
      counter-increment: item;
      border-width: 10px;
      border-color: rgb(174, 0, 255);;
    }
  
    .carousel__slide img {
      height: 55vh;
    }
  
    
    .carousel__slide:nth-child(even) {
      background-color: rgb(255, 255, 255);
    }
    
    .carousel__slide:before {
      position: absolute;
      top: 50%;
      left: 50%;
      /*transform: translate3d(-50%,-40%,70px);*/
      color: rgb(174, 0, 255);;
      font-size: 2em;
    }
    
    .carousel__snapper {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      scroll-snap-align: center;
    }
    
    @media (hover: hover) {
      .carousel__snapper {
        animation-name: tonext, snap;
        animation-timing-function: ease;
        animation-duration: 4s;
        animation-iteration-count: infinite;
      }
    
      .carousel__slide:last-child .carousel__snapper {
        animation-name: tostart, snap;
      }
    }
    
    @media (prefers-reduced-motion: reduce) {
      .carousel__snapper {
        animation-name: none;
      }
    }
    
    .carousel:hover .carousel__snapper,
    .carousel:focus-within .carousel__snapper {
      animation-name: none;
    }
    
    .carousel__navigation {
      position: absolute;
      right: 0;
      bottom: -6%;
      left: 0;
      text-align: center;
    }
    
    .carousel__navigation-list,
    .carousel__navigation-item {
      display: inline-block;
    }
    
    .carousel__navigation-button {
      display: inline-block;
      width: 1rem;
      height: 1rem;
      background-color: rgb(41, 244, 176);
      background-clip: content-box;
      border: 0.25rem solid transparent;
      border-radius: 50%;
      font-size: 0;
      transition: transform 0.1s;
    }
    
    .carousel::before,
    .carousel::after,
    .carousel__prev,
    .carousel__next {
      position: absolute;
      top: 0;
      margin-top: 37.5%;
      width: 2rem;
      height: 2rem;
      transform: translateY(-50%);
      border-radius: 50%;
      font-size: 0;
      outline: 0;
    }
    
    .carousel::before,
    .carousel__prev {
      left: -0.5rem;
    }
    
    .carousel::after,
    .carousel__next {
      right: -0.5rem;
    }
    
    .carousel::before,
    .carousel::after {
      content: '';
      z-index: 1;
      background-color: rgba(255, 255, 255, 0); ;
      background-size: 1rem 1rem;
      background-repeat: no-repeat;
      background-position: center center;
      color: rgb(255, 255, 255);
      font-size: 2.5rem;
      line-height: 4rem;
      text-align: center;
      pointer-events: none;
    }
    
  
  
  /*signature*/ 
  
  .signature {
      position: absolute;
      transform: rotate(-90deg);
      right: -6.5%;
      bottom: 22%;
      font-size: 10pt;
      color: rgb(41, 244, 176);
  }
  
  .description {
      position: absolute;
      right: 19.5%;
      bottom: 20%;
      font-size: 1.1em;
      color: rgb(174, 0, 255);
      font-family: 'lexend deca';
    }
  
    .bold {
      color :rgb(41, 244, 176);
    }

    .plus {
      color: rgb(174, 0, 255);
      font-size: 30pt;
      position: absolute;
      right: 40.8%;
      bottom: 39%;
      font-family: 'Fredoka';
    }

    .plus:hover {
      color: rgb(41, 244, 176);
    }
  
    /*  vert : rgb(41, 244, 176)   orange : rgb(255, 115, 0)   violet : rgb(174, 0, 255)  */
    @media  screen and (max-width : 1500px) {

      .signature{
        margin-bottom: 2%;
      }
    
      .description {
        position: absolute;
        right: 20%;
        bottom: 25%;
        font-size: 11pt;
        color: rgb(174, 0, 255);
        font-family: 'lexend deca';
      }
    
      .bold {
        color :rgb(41, 244, 176)
      }
    
      .projet {
        max-width: 32rem;
        margin: 0;
        padding: 0;
        font-family: 'Lato', sans-serif;
        margin-top : 11%;
        margin-left: 10%;
        border-width: 10px;
        margin-bottom: 20%;
        border-color: rgb(174, 0, 255);;
      }
    
      .carousel__slide img {
        height: 50vh;
      }
    
      .ligne {
        margin-left: 10%;
        width: 85%;
      }
    
     /* .ligne_verticale { 
        border-left: thick solid rgb(174, 0, 255);
        border-width: 3px;
        height:80%;
        left: 88%;
        top: 30%;
        position: absolute;
      }
    
     /* .ligne_diagonale_3 { 
        border-left: thick solid rgb(174, 0, 255);
        transform: rotate(-50deg);
        border-width: 3px;
        height:40%;
        left: 90%;
        top: 2%;
        position: absolute;
      }*/
    
      .ligne_diagonale_4 { 
        display: none;
      }
    
      /*h1 span {
        position: absolute;
        font-family: 'Lexend Deca';
        font-weight: lighter;
        font-size: .4em;
        text-transform: uppercase;
        top: 0;
        left: 0;
        offset: path('M-40 0 a 40 40 0,11 0 0.1') var(--c);
        color: rgb(174, 0, 255);
      }*/
    
        
      .plus {
        color: rgb(174, 0, 255);
        font-size: 30pt;
        position: absolute;
        right: 22%;
        bottom: 34%;
        font-family: 'Fredoka';
      }

      .carousel__navigation {
        position: absolute;
        right: 0;
        bottom: 0%;
        left: 0;
        text-align: center;
      }

    }

    @media  screen and (max-width : 1200px) {
  
      .signature{
        margin-bottom: 1%;
      }

      .carousel__navigation {
        position: absolute;
        right: 0;
        bottom: 0%;
        left: 0;
        text-align: center;
    
      .description {
        position: absolute;
        right: 18%;
        bottom: 25%;
        font-size: 11pt;
        color: rgb(174, 0, 255);
        font-family: 'lexend deca';
      }
    
      .bold {
        color :rgb(41, 244, 176)
      }
    
      .projet {
        max-width: 30rem;
        margin: 0;
        padding: 0;
        font-family: 'Lato', sans-serif;
        margin-top : 13%;
        margin-left: 9%;
        border-width: 10px;
        margin-bottom: 20%;
        border-color: rgb(174, 0, 255);;
      }
    
      .carousel__slide img {
        height: 50vh;
      }
    
      .ligne {
        margin-left: 10%;
        width: 85%;
      }
    
     /* .ligne_verticale { 
        border-left: thick solid rgb(174, 0, 255);
        border-width: 3px;
        height:80%;
        left: 88%;
        top: 30%;
        position: absolute;
      }
    
     /* .ligne_diagonale_3 { 
        border-left: thick solid rgb(174, 0, 255);
        transform: rotate(-50deg);
        border-width: 3px;
        height:40%;
        left: 90%;
        top: 2%;
        position: absolute;
      }*/
    
      .ligne_diagonale_4 { 
        display: none;
      }
    
      /*h1 span {
        position: absolute;
        font-family: 'Lexend Deca';
        font-weight: lighter;
        font-size: .4em;
        text-transform: uppercase;
        top: 0;
        left: 0;
        offset: path('M-40 0 a 40 40 0,11 0 0.1') var(--c);
        color: rgb(174, 0, 255);
      }*/
    
        
      .plus {
        color: rgb(174, 0, 255);
        font-size: 30pt;
        position: absolute;
        right: 22%;
        bottom: 34%;
        font-family: 'Fredoka';
      }
    
    }
    
      @media  screen and (max-width : 1100px) {
        .signature {
          margin-bottom: 2%;
          font-size: 10px;
          margin-right: 0;
        }
      
        .description {
          position: absolute;
          right: 18%;
          bottom: 25%;
          font-size: 10pt;
          color: rgb(174, 0, 255);
          font-family: 'lexend deca';
        }
      
        .bold {
          color :rgb(41, 244, 176)
        }
      
        .projet {
          max-width: 28rem;
          margin: 0;
          padding: 0;
          font-family: 'Lato', sans-serif;
          margin-top : 8%;
          margin-left: 9%;
          border-width: 10px;
          margin-bottom: 20%;
          border-color: rgb(174, 0, 255);;
        }
      
        .carousel__slide img {
          height: 50vh;
        }
      
        .ligne { 
          width: 55%;
          margin-top:3%;
          border-width: 3px;
          margin-left: 18%;
        }
      
        .ligne_verticale { 
          border-left: thick solid rgb(174, 0, 255);
          border-width: 3px;
          height:80%;
          left: 86%;
          top: 30%;
          position: absolute;
        }
      
        .ligne_diagonale_3 { 
          border-left: thick solid rgb(174, 0, 255);
          transform: rotate(40deg);
          border-width: 3px;
          height:30%;
          left: 95%;
          top: -2%;
          position: absolute;
        }
      
        .ligne_diagonale_4 { 
          display: none;
        }
      
        h1 span {
          position: absolute;
          font-family: 'Lexend Deca';
          font-weight: lighter;
          font-size: 10pt;
          text-transform: uppercase;
          top: 0;
          left: 0;
          offset: path('M-40 0 a 40 40 0,11 0 0.1') var(--c);
          color: rgb(174, 0, 255);
        }
      
        h1 {
          position: absolute;
          top: calc(8% - .5em);
          left: calc(88% - .5em);
          animation: rotate 20s linear infinite;
        }
      
        .menu-bar {
          display: none;
        }
      
        .menu_responsive {
          display: block;
          margin-top: -2%;
          margin-left: 0;
        }
          
        .plus {
          color: rgb(174, 0, 255);
          font-size: 30pt;
          position: absolute;
          right: 16%;
          bottom: 18%;
          font-family: 'Fredoka';
        }

        .carousel__navigation {
          position: absolute;
          right: 0;
          bottom: 0%;
          left: 0;
          text-align: center;
    
      @media  screen and (max-width :800px) { /*TELEPHONE*/
        .signature {
          display: none;
        }
      
        .description {
          position: absolute;
          right: 12%;
          bottom: 15%;
          font-size: 10pt;
          color: rgb(174, 0, 255);
          font-family: 'lexend deca';
        }
      
        .bold {
          color :rgb(41, 244, 176)
        }
      
        .projet {
          max-width: 16rem;
          margin: 0;
          padding: 0;
          font-family: 'Lato', sans-serif;
          margin-top : 50%;
          margin-left: 15%;
          border-width: 10px;
          margin-bottom: 20%;
          border-color: rgb(174, 0, 255);;
        }
      
        .carousel__slide img {
          height: 24vh;
        }
      
        .ligne { 
          display: none;
        }
      
        .ligne_verticale { 
          border-left: thick solid rgb(174, 0, 255);
          border-width: 3px;
          height:80%;
          left: 10%;
          top: 20%;
          position: absolute;
        }
      
        .ligne_diagonale { 
          display: none;
        }
      
        .ligne_diagonale_2 { 
          display: none;
        }
      
        .ligne_diagonale_3 { 
          border-left: thick solid rgb(174, 0, 255);
          transform: rotate(-50deg);
          border-width: 3px;
          height:40%;
          left: 68%;
          top: -4%;
          position: absolute;
        }
      
        .ligne_diagonale_4 { 
          display: none;
        }
      
        h1 span {
          position: absolute;
          font-family: 'Lexend Deca';
          font-weight: lighter;
          font-size: 10pt;
          text-transform: uppercase;
          top: 0;
          left: 0;
          offset: path('M-40 0 a 40 40 0,11 0 0.1') var(--c);
          color: rgb(174, 0, 255);
        }
      
        h1 {
          position: absolute;
          top: calc(8% - .5em);
          left: calc(88% - .5em);
          animation: rotate 20s linear infinite;
        }
      
        .menu-bar {
          display: none;
        }
      
        .menu_responsive {
          display: block;
          margin-top: -8%;
        }
          
        .plus {
          color: rgb(174, 0, 255);
          font-size: 30pt;
          position: absolute;
          right: 25%;
          bottom: 23%;
          font-family: 'Fredoka';
        }

        .carousel__navigation {
          position: absolute;
          right: 0;
          bottom: 0%;
          left: 0;
          text-align: center;
        }
      }
    }
  }
}